/* Instrument Serif, servie depuis le dépôt elle aussi : le site ne fait plus
   aucun appel à Google Fonts. Quatre fichiers — romain et italique, latin et
   latin-ext — pour 67 Ko. L'italique n'a qu'un porteur, le mot mis en avant
   dans le titre d'accueil, mais il est au-dessus de la ligne de flottaison :
   il est préchargé comme le romain, sans quoi il s'afficherait d'abord en
   repli puis sauterait sous les yeux du visiteur.

   Licence SIL Open Font 1.1, copiée dans instrument-serif-OFL.txt. */
@font-face {
    font-family: 'Instrument Serif';
    src: url('../fonts/instrument-serif-latin-ext.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Instrument Serif';
    src: url('../fonts/instrument-serif-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Instrument Serif';
    src: url('../fonts/instrument-serif-latin-ext-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Instrument Serif';
    src: url('../fonts/instrument-serif-latin-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Bricolage Grotesque, servi depuis le dépôt plutôt que depuis Google Fonts :
   un aller-retour réseau et une dépendance de moins, et la police ne peut plus
   disparaître sous nous. Fichier variable — un seul fichier porte tout
   l'intervalle 200 à 800, là où Montserrat en demandait quatre. Le site
   déclare 300 trente-neuf fois, 500 trente-huit fois, 400 vingt-six fois et
   600 seize fois : c'est ce contraste qui porte la hiérarchie, un poids unique
   l'aurait effacé.

   Deux jeux de caractères comme chez Google : latin couvre le français et
   l'anglais, latin-ext prend les diacritiques des noms propres qui sortent du
   Latin-1. Le vietnamien n'est pas servi, il n'a rien à faire ici.

   Licence SIL Open Font 1.1, copiée dans bricolage-grotesque-OFL.txt. */
@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('../fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    /* L'axe de largeur a été figé à 100 % dans le fichier : aucun élément
       du site ne demandait une largeur étroite, et le porter faisait passer
       la police de 128 à 76 ko — la ressource la plus lourde de la page.
       Rien ne change à l'écran. Les axes de graisse et de taille optique
       restent variables. */
    font-family: 'Bricolage Grotesque';
    src: url('../fonts/bricolage-grotesque-latin.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Le repli de Bricolage Grotesque, aux mêmes métriques.

   Bricolage pèse 76 Ko et arrive APRÈS le premier rendu sur une connexion
   lente : relevé à 4265 ms contre 3020 ms de premier rendu en 3G. Le texte
   s'affiche donc d'abord dans une police de repli, puis bascule — et sans
   cette face-ci, la bascule décale tout le texte de la page sous les yeux
   du visiteur. C'est ce que l'animation d'introduction masquait autrefois.

   Les trois valeurs viennent de la police elle-même : ascendante 930/1000,
   descendante 270/1000, pas d'interligne. Le « size-adjust » a été MESURÉ au
   navigateur, pas calculé : une même phrase fait 605 px en Bricolage contre
   575 px en Arial, d'où 105,1 %.

   La cible est Arial, et non « system-ui » : ses métriques sont les mêmes
   sur Windows, macOS et Android, alors que system-ui désigne une police
   différente sur chacun — impossible d'en accorder une seule. */
@font-face {
    font-family: 'Bricolage repli';
    src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Liberation Sans');
    size-adjust: 105.1%;
    ascent-override: 93%;
    descent-override: 27%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Cloudyaurora';
    src: url('../fonts/cloudyaurora.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.signature-font {
    font-family: 'Cloudyaurora', cursive !important;
    font-weight: normal;
    text-transform: none;
    line-height: 1.2;
}

/* Glass Navbar Styles */


/* Custom Text Logos for Cards */
.custom-card-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--ink);
    margin-top: 0;
    margin-bottom: -10px;
}
.custom-card-logo .service-text {
    font-family: var(--font-main);
    font-weight: 300;
    font-size: 24px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
/* Carte Pulse, sur fond bleu nuit : le nom passe en blanc. */
.custom-card-logo--clair {
    color: var(--paper);
}

/* ==========================================================================
   DB Vision — Feuille de style unique (refonte 2026)
   DA éditoriale claire : papier / encre / pierre, accent bleu nuit.
   Typo : Instrument Serif (titres) + Bricolage Grotesque (interface & texte).
   Stack artisanale : CSS3 custom, aucun framework.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables & tokens
   -------------------------------------------------------------------------- */
:root {
    /* Palette DA */
    --paper: #f4f3f1;
    /* fond principal */
    --paper-2: #eceae5;
    /* survol / zones douces */
    --ink: #111111;
    /* texte principal */
    /* Assombri de onze points avec l'arrivée de la nappe de fond : à #6e6c68 ce
       gris n'avait que 4,72:1 sur le papier nu — la moindre teinte le faisait
       passer sous le seuil de lisibilité de 4,5:1. Il tient maintenant 5,57:1
       sur le papier et 4,85:1 au plus fort des halos. Il n'est jamais posé sur
       un bloc sombre, vérifié règle par règle. */
    --stone: #63615d;
    /* texte secondaire */
    --line: rgba(17, 17, 17, .14);
    /* filets */
    --blue: #0f2b45;
    /* accent nuit (mise en avant) */
    --sky: #dbe6ef;
    /* clair sur bleu */
    --placeholder-a: #e6e4df;
    --placeholder-b: #dedbd5;

    /* Compat rétro (utilisées par le JS injecté : reviews.js, et d'anciens
       styles inline). NE PAS supprimer. */
    --accent-color: #0f2b45;
    --card-bg: #ffffff;
    --bg-color: var(--paper);
    --secondary-color: var(--paper-2);
    --text-color: var(--ink);

    /* Typographie */
    --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --font-main: 'Bricolage Grotesque', 'Bricolage repli', system-ui, -apple-system, sans-serif;

    /* Rythme */
    --pad-x: clamp(16px, 3vw, 44px);
    --max: 1320px;
    --header-h: 62px;
    --ease: cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-main);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
}

body.menu-open,
img,
video {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color .3s var(--ease), opacity .3s var(--ease);
}

a:hover {
    color: var(--stone);
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

input,
textarea,
select {
    font: inherit;
    color: inherit;
}

::selection {
    background: var(--blue);
    color: var(--paper);
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -.02em;
    margin: 0;
    text-wrap: balance;
}

p {
    margin: 0 0 1em;
    text-wrap: pretty;
}

.container {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--pad-x);
}

/* Lien d'évitement : première cible tabulable de la page, invisible tant
   qu'elle n'a pas le focus. Sans lui, un visiteur au clavier ou au lecteur
   d'écran retraverse les sept entrées de navigation à chaque page. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 12px 20px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: 0 0 6px 0;
}

.skip-link:focus {
    left: 0;
    color: var(--paper);
}

/* Petites majuscules éditoriales (labels de section, kickers) */
.eyebrow {
    display: inline-flex;
    gap: .5em;
    align-items: baseline;
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 9.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--blue);
}

.eyebrow .num {
    color: var(--blue);
    opacity: .55;
}

/* --------------------------------------------------------------------------
   3. Animations de révélation
   -------------------------------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
    will-change: opacity, transform;
}

[data-reveal][data-shown] {
    opacity: 1;
    transform: none;
}

/* Compat : ancien système .fade-in-up / .visible (toujours utilisé par le JS) */
.fade-in-up {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.fade-in-up.visible {
    opacity: 1;
    transform: none;
}

.fade-in-up.delay-1 {
    transition-delay: .12s;
}

.fade-in-up.delay-2 {
    transition-delay: .24s;
}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    [data-reveal],
    .fade-in-up {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .salut,
    .bulle-flotte,
    .mot-dan[data-shown] .bulle-dan,
    .mot-dan[data-shown] .queue-dan,
    .mot-dan[data-shown] .bulle-dan > span {
        animation: none !important;
    }

    /* Le suivi du curseur est posé en style en ligne par core.js, qui le
       neutralise lui-même dans ce mode ; la transition est coupée ici pour
       qu'aucun trajet ne subsiste. */
    .bulle-suit {
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   4. Boutons & liens
   -------------------------------------------------------------------------- */
.btn-primary,
.btn-secondary {
    display: inline-block;
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 13px 22px;
    white-space: nowrap;
    border: 1px solid var(--ink);
    transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

.btn-primary {
    background: var(--ink);
    color: var(--paper);
}

.btn-primary:hover {
    background: var(--paper);
    color: var(--ink);
}

.btn-secondary {
    background: transparent !important;
    color: var(--ink);
    border-color: var(--line);
}

.btn-secondary:hover {
    color: var(--ink);
    border-color: var(--ink);
}

.btn-primary.large,
.btn-secondary.large {
    padding: 16px 30px;
    font-size: 10.5px;
}

.btn-primary.full-width {
    display: block;
    width: 100%;
    text-align: center;
    border: none;
    padding: 16px;
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* Lien souligné éditorial */
.btn-link {
    display: inline-block;
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 4px 0;
    border-bottom: 1px solid var(--ink);
    color: var(--ink);
}

.btn-link:hover {
    color: var(--blue);
    border-bottom-color: var(--blue);
}

/* --------------------------------------------------------------------------
   5. Navbar
   -------------------------------------------------------------------------- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 900;
    padding-top: 0;
    transition: padding-top 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar.scrolled {
    padding-top: 20px;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 40px);
    width: 100%;
    
    background: transparent;
    border-radius: 0;
    max-width: 100%;
    height: 100px;
    box-shadow: none;
    /* Liste explicite plutôt que « all » : un backdrop-filter sert de référence
       de positionnement aux éléments en position fixed. Pris dans la
       transition, il mettait une demi-seconde à disparaître à l'ouverture du
       menu, et le panneau — calé jusque-là sur la pilule — se ré-ancrait
       brusquement sur la fenêtre au bout de ~550 ms. En le laissant hors de
       la liste, il bascule aussitôt et le panneau s'ouvre d'un seul geste. */
    transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Au défilement, la barre se rétracte en pastille de largeur fixe, quelle que
   soit celle de l'écran : le chevauchement du sélecteur de langue sur
   « Boutique » s'y produisait donc jusqu'en 2560 px. Mesuré à l'intérieur, le
   contenu réclamait ~1268 px pour 1200 px disponibles. Deux réglages suffisent
   à les rendre : la pastille s'aligne sur la largeur du contenu (plus bas), et
   les espacements de la liste se resserrent dans cet état compact. La mention
   à côté du logo, elle, est déjà réduite à zéro plus bas — inutile d'y toucher. */
.navbar.scrolled .nav-links {
    gap: clamp(12px, 1.2vw, 18px);
}

.navbar.scrolled .nav-container {
    /* Alignée sur la largeur du contenu (--max, 1320 px). Elle valait 1200 px,
       donc plus étroite que la page qu'elle surplombe, et le contenu de la
       barre n'y tenait pas. */
    max-width: var(--max);
    height: 76px;
    border-radius: 40px;
    /* Verre dépoli plutôt que blanc plein : on doit deviner les images qui
       passent dessous. L'opacité seule donnerait un voile sale ; c'est le flou
       qui rend le fond lisible, et la saturation qui empêche les couleurs de
       virer au gris en le traversant. */
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    box-shadow: 0 4px 30px rgba(0,0,0,0.06);
    padding: 0 24px;
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}


.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
    transition: gap 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar.scrolled .logo {
    gap: 0;
}

/* La mention à côté du logo est retirée de la barre. Mesurée à 178 px, plus
   40 px d'espacement, c'était le poste le plus lourd après les liens eux-mêmes,
   et c'est lui qui repoussait le basculement vers le menu à 1536 px. Le
   positionnement reste écrit dans le bandeau d'accueil, les titres de page et
   les descriptions : rien ne se perd, la barre récupère 218 px. */
.brand-tag {
    display: none;
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--stone);
    white-space: nowrap;
    opacity: 1;
    max-width: 300px;
    overflow: hidden;
    flex-shrink: 0;
    transition: max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

.navbar.scrolled .brand-tag {
    opacity: 0;
    max-width: 0;
}

@media (max-width: 640px) {
    .brand-tag {
        display: none;
    }
}

.logo-img {
    display: block;
    height: 30px;
    width: auto;
}

.footer .logo-img {
    height: 40px;
}


/* Unscrolled navbar button (white on dark background) */
.navbar:not(.scrolled) .navbar-right .btn-primary {
    background: #ffffff;
    color: var(--ink);
    border-color: #ffffff;
}
.navbar:not(.scrolled) .navbar-right .btn-primary:hover {
    background: transparent !important;
    color: #ffffff;
}

/* Dans la pilule claire, le bouton reprend le bleu pétrole du logo : les deux
   extrémités de la barre portent alors la même couleur de marque. */
.navbar.scrolled .navbar-right .btn-primary {
    background: var(--blue);
    color: var(--paper);
    border-color: var(--blue);
}
.navbar.scrolled .navbar-right .btn-primary:hover {
    background: transparent !important;
    color: var(--blue);
    border-color: var(--blue);
}

.nav-links {
    display: flex;
    align-items: center;
    /* Resserrés : 30 px entre sept entrées coûtaient 180 px à eux seuls. */
    gap: clamp(14px, 1.6vw, 22px);
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 12.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
}


.nav-links>li>a:not(.lang-link) {
    font-family: var(--font-display);
    font-weight: 400;
}

.nav-links .btn-primary {
    font-family: var(--font-main);
    font-size: 11px;
    padding: 14px 22px;
    margin-top: 10px;
}


.nav-links>li>a:not(.btn-primary):not(.lang-link) {
    color: var(--ink);
    opacity: .78;
}

.nav-links>li>a:not(.btn-primary):not(.lang-link):hover {
    opacity: 1;
}

.nav-links .btn-primary {
    padding: 9px 16px;
    font-size: 9.5px;
}

/* Sélecteur de langue */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 6px 14px;
}

.lang-link {
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .08em;
    color: var(--stone);
    opacity: .7;
    transition: opacity .25s var(--ease), color .25s var(--ease);
}

.lang-link.lang-active {
    color: var(--ink);
    opacity: 1;
}

.lang-sep {
    color: var(--line);
    font-size: 10px;
}

/* Bouton menu mobile */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent !important;
    cursor: pointer;
    z-index: 100;
}


.mobile-menu-btn span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--ink);
    transition: transform .3s var(--ease), opacity .3s var(--ease);
}

.mobile-menu-btn span.open:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.mobile-menu-btn span.open:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn span.open:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* Éléments visibles uniquement sur mobile (dans le menu hamburger) */
.mobile-only { display: none; }

/* --------------------------------------------------------------------------
   6. Sections & en-têtes
   -------------------------------------------------------------------------- */
.section {
    padding: clamp(70px, 12vh, 150px) 0;
    /* Le filet s'éteint aux deux bords au lieu de buter contre la marge.
       Le dégradé passe par border-image : la section reste en position
       statique, aucun élément placé en absolu ne change de repère. */
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg,
        rgba(15, 43, 69, 0)   0%,
        rgba(15, 43, 69, .13) 16%,
        rgba(15, 43, 69, .30) 50%,
        rgba(15, 43, 69, .13) 84%,
        rgba(15, 43, 69, 0)   100%) 1;
}

.section.no-border {
    border-bottom: none;
}

.section-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: clamp(34px, 6vh, 64px);
    max-width: 760px;
}

.section-header h2 {
    font-size: clamp(30px, 4.4vw, 60px);
    line-height: 1.04;
}

/* Les trois sections de la page Création — Corporate, Publicité, Événements
   — étaient des « eyebrow » de 9,5 px : des étiquettes, pas des titres. Elles
   reprennent la taille des titres de section du reste du site, et deviennent
   de vrais h2 : la page n'avait aucun titre entre son h1 et ses vignettes.

   La fonte de titre n'existe qu'en une graisse ; un gras y serait synthétisé
   et baverait. Le poids vient donc de la taille, comme partout ailleurs. */
.realisations-titre {
    font-size: clamp(30px, 4.4vw, 60px);
    line-height: 1.04;
}

.realisations-titre .num {
    /* Le numéro reste un repère discret, dans la fonte d'interface : à 60 px
       de serif il aurait pesé autant que le titre. */
    font-family: var(--font-main);
    font-size: .3em;
    font-weight: 500;
    letter-spacing: .18em;
    color: var(--blue);
    opacity: .55;
    vertical-align: .55em;
    margin-right: .35em;
}

/* Titre de section centré — utilisé par « Ce qu'ils en disent. », dont le
   défilé de témoignages occupe toute la largeur : un titre calé à gauche
   au-dessus d'une bande centrée paraissait décroché. */
.section-header--centre {
    align-items: center;
    text-align: center;
    max-width: none;
}

/* Suite de la FAQ : le lien vers la page complète se lit après les réponses,
   là où l'on se demande s'il en reste d'autres. */
.faq-suite {
    display: flex;
    justify-content: center;
    /* Même largeur que .journal-faq : centré sur le conteneur, le lien
       tomberait à droite de la liste, qui s'arrête à 860 px. */
    max-width: 860px;
    margin-top: clamp(30px, 4vh, 44px);
}

.section-header p {
    margin: 0;
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: 300;
    line-height: 1.65;
    color: var(--stone);
    max-width: 52ch;
}

/* En-tête de section avec label + lien à droite */
.head-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: clamp(34px, 6vh, 60px);
}

.head-row .section-header {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   7. Hero (film plein écran, ambiance sombre)
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    /* Sur iOS, 100vh vaut la hauteur BARRES RÉTRACTÉES : au chargement, où les
       barres sont déployées, tout le bas du bandeau — repère « défiler »
       compris — passe dessous. 100svh est la hauteur réellement visible dans
       ce cas. La ligne 100vh reste en repli pour les navigateurs anciens ;
       sur ordinateur les deux valeurs sont identiques. */
    height: 100vh;
    height: 100svh;
    min-height: 560px;
    /* Bande réservée en bas du bandeau pour le repère « défiler » : sans elle,
       il retomberait sur les boutons. Le jeton est repris par .hero-content. */
    --place-repere: 86px;
    margin-top: 0;
    overflow: hidden;
    background: #0d0d0c;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.hero .video-wrapper,
.hero .video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero .overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 50% 30%, rgba(255, 255, 255, .06), transparent 60%),
        linear-gradient(to top, rgba(10, 10, 9, .78), rgba(10, 10, 9, .18) 55%, rgba(10, 10, 9, .32));
}

.hero-content {
    position: relative;
    z-index: 2;
    padding-top: clamp(28px, 6vh, 76px);
    /* La bande du bas est réservée au repère « défiler » : sans elle, il se
       superposait aux boutons — mesuré à 51 px de chevauchement sur téléphone
       et 41 px sur ordinateur. */
    padding-bottom: calc(clamp(28px, 6vh, 76px) + var(--place-repere, 86px));
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.hero-content .kicker {
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .88);
}

.hero-content h1 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(40px, 7.4vw, 112px);
    line-height: .95;
    letter-spacing: -.02em;
    color: var(--paper);
    /* 15ch tenait pour le français, pas pour l'anglais : « We build an image
       that attracts, reassures and captivates. » passait sur quatre lignes au
       lieu de trois, ce qui remontait tout le bloc de cent pixels et le
       collait à la barre de navigation. Le français casse au même endroit de
       15 à 20ch — élargir ne lui change rien. 18ch est au milieu de la plage
       où les deux langues tiennent en trois lignes, de 1200 à 1680 px. */
    max-width: 18ch;
}

.hero-content h1 em {
    font-style: italic;
    color: rgba(244, 243, 241, .72);
}

.hero-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    padding-top: 22px;
}

.hero-foot .btn-secondary {
    color: var(--paper);
    border-color: rgba(255, 255, 255, .35);
}

.hero-foot .btn-secondary:hover {
    color: var(--paper);
    border-color: var(--paper);
}

.hero-foot .btn-primary {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
}

.hero-foot .btn-primary:hover {
    background: transparent !important;
    color: var(--paper);
}

/* --------------------------------------------------------------------------
   8. Manifeste (La Maison)
   -------------------------------------------------------------------------- */
.manifesto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(30px, 6vw, 90px);
}

.manifesto .aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.manifesto .body {
    grid-column: span 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.manifesto .lines {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.6vw, 56px);
    line-height: 1.14;
    letter-spacing: -.015em;
    display: flex;
    flex-direction: column;
    /* L'animation « lettres éclatées » écarte les caractères de 25 px avant de
       les rassembler : la ligne dépasse alors largement sa colonne, et sur
       téléphone la page se mettait à défiler latéralement — surtout en anglais,
       où le mot est plus long. On coupe le débordement horizontal. « clip »
       plutôt que « hidden » : aucun conteneur de défilement n'est créé, donc
       l'épinglage GSAP de ce bloc n'est pas affecté. */
    overflow-x: clip;
}

.manifesto .lines .muted {
    /* Les trois temps de la méthode — définir, créer, affiner — prennent le
       bleu exact du logo. La ligne d'ouverture reste à l'encre : la strophe
       s'annonce en noir, puis se déroule en bleu. Ce sont aussi les trois
       lignes que core.js révèle une à une. */
    color: var(--blue);
}

@media (max-width: 720px) {
    .manifesto .body {
        grid-column: auto;
    }
}

/* --------------------------------------------------------------------------
   9. Savoir-faire (liste de disciplines)
   -------------------------------------------------------------------------- */
/* Savoir-faire — liste des disciplines (éditoriale, sobre & luxe) */

/* Chiffres en serif éditorial = signature haut de gamme */

/* Survol raffiné (souris uniquement) : léger renfoncement + accent bleu nuit */
@media (hover: hover) {
}

/* --------------------------------------------------------------------------
   10. Services / Univers (cartes)
   -------------------------------------------------------------------------- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.service-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 400px;
    padding: clamp(24px, 3vw, 40px);
    border-top: 1px solid var(--line);
    border-right: 1px solid var(--line);
    color: var(--ink);
    background: transparent !important;
    transition: background .35s var(--ease);
}

.service-card:hover {
    background: var(--paper-2);
    color: var(--ink);
}

.service-card:last-child {
    border-right: none;
}

.service-card .thumb {
    height: 175px;
    display: flex;
    align-items: flex-end;
    padding: 12px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--placeholder-a);
    overflow: hidden;
}

.service-card .thumb video,
.service-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
}

.service-card h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.05;
}

.service-card p {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--stone);
}

.service-card .go {
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 9.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-top: 6px;
    color: inherit;
}


/* Variante bleu nuit (mise en avant) */
.service-card.is-blue {
    background: var(--blue) !important;
    color: var(--paper) !important;
    padding: clamp(24px, 3vw, 40px) !important;
    border-right-color: rgba(255, 255, 255, .12);
}
.service-card.is-blue .card-body {
    padding: 0;
}
.service-card.is-blue:hover {
    background: #0b2137 !important;
    color: var(--paper) !important;
}
.service-card.is-blue:hover .go {
    color: var(--sky) !important;
    transition: color 0.3s ease;
}
.service-card.is-blue p {
    color: var(--sky);
}

/* --------------------------------------------------------------------------
   11. Approche / process (liste numérotée)
   -------------------------------------------------------------------------- */
.approach {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(30px, 5vw, 80px);
    align-items: start;
}

.approach-aside {
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: sticky;
    top: calc(var(--header-h) + 30px);
}

.approach-aside h2 {
    font-size: clamp(30px, 3.4vw, 52px);
    line-height: 1.06;
    max-width: 16ch;
}

.approach-aside p {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--stone);
    max-width: 34ch;
}

.approach-steps {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
}

.approach-step {
    /* Repère pour le filet bleu ci-dessous. Aucun élément placé en absolu ne
       vit dans cette étape : rien d'autre ne change de référence. */
    position: relative;
    border-bottom: 1px solid var(--line);
    padding: clamp(24px, 3vw, 38px) 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(20px, 3vw, 44px);
    align-items: baseline;
}

/* Le filet de l'étape en cours se trace de gauche à droite et s'éteint avant
   le bord : la progression du projet se lit au défilement, sans compteur ni
   barre ajoutée. Il se pose sur le filet gris existant, qu'il recouvre. */
.approach-step::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 1px;
    width: 0;
    background: linear-gradient(90deg,
        rgba(15, 43, 69, .60) 0%,
        rgba(15, 43, 69, .34) 58%,
        rgba(15, 43, 69, 0) 100%);
    transition: width .9s var(--ease);
    pointer-events: none;
}

.approach-step.active::after {
    width: 100%;
}

.approach-step:last-child {
    border-bottom: none;
}

.approach-step .step-num {
    font-family: var(--font-display);
    font-size: clamp(44px, 5vw, 76px);
    line-height: .8;
    color: rgba(15, 43, 69, .22);
    transition: color 0.4s ease;
}

.approach-step .step-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
}

.approach-step h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(24px, 2.6vw, 36px);
    line-height: 1;
    color: #cdc9c1;
    transition: color 0.4s ease;
}

/* L'étape en cours : le numéro passe au bleu plein du logo, le titre à
   l'encre. Le bleu marque l'avancement, le noir garde la lisibilité. */
.approach-step.active .step-num {
    color: var(--blue);
}

.approach-step.active h3 {
    color: var(--ink);
}

.approach-step.active .tag {
    color: var(--blue);
}

.approach-step .tag {
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--stone);
}

.approach-step p {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.65;
    color: var(--stone);
    max-width: 46ch;
}

@media (max-width: 720px) {
    .approach-aside {
        position: static;
    }
}

/* --------------------------------------------------------------------------
   12. Portfolio / réalisations
   -------------------------------------------------------------------------- */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(16px, 2.4vw, 30px);
}

.portfolio-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
}

.portfolio-item .media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--placeholder-a);
}

/* Conteneur média en ratio 16:9 via le hack padding : la hauteur est calculée
   depuis la largeur (jamais depuis le contenu) → robuste au cycle plein écran,
   contrairement à aspect-ratio + enfant en position absolue. */
.portfolio-item.wide .media {
    aspect-ratio: auto;
    height: 0;
    padding-bottom: 56.25%;
}

/* Lecteur Cloudinary intégré (iframe d'embed personnalisé) */
.portfolio-item .media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border: 0;
    background: #000;
}

.portfolio-item .portfolio-content {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    border-top: 1px solid var(--line);
    padding-top: 10px;
}

.portfolio-item .portfolio-content h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 19px;
    line-height: 1.1;
}

.portfolio-item .category {
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--stone);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   13. Présentation (Dan Berg)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   14. Équipe / collaborateurs
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   15. Marquee logos clients
   -------------------------------------------------------------------------- */
.marquee {
    overflow: hidden;
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: dbmarquee 40s linear infinite;
}

.marquee-track .cell {
    flex: none;
    width: clamp(150px, 18vw, 220px);
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #a8a49c;
}

.marquee-track .cell img {
    max-height: 40px;
    width: auto;
    opacity: .7;
}

.marquee:hover .marquee-track {
    animation-play-state: paused;
}

@keyframes dbmarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Grille "Créations" (cartes galerie qui renvoient au portfolio) */

/* Lien "Découvrir notre vision" du manifeste */
.manifesto .body .btn-link {
    align-self: flex-start;
}

/* --------------------------------------------------------------------------
   16. Avis / témoignages
   -------------------------------------------------------------------------- */
.avis-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.stars-aggregate {
    display: flex;
    gap: 2px;
    color: var(--blue);
    font-size: 18px;
    letter-spacing: 2px;
}

.rating-text {
    margin: 0;
    font-size: 14px;
    color: var(--stone);
}

.rating-text strong {
    color: var(--ink);
    font-weight: 600;
}

.avis-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.testimonial-card {
    background: var(--paper);
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.testimonial-card .stars {
    color: var(--blue);
    font-size: 15px;
    letter-spacing: 2px;
}

.testimonial-text {
    margin: 0;
    font-family: var(--font-display);
    font-size: 21px;
    line-height: 1.35;
    color: var(--ink);
    flex: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.author-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--blue);
    color: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .04em;
    flex: none;
}

.testimonial-author strong {
    display: block;
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
}

.testimonial-author span {
    font-size: 12px;
    color: var(--stone);
}

/* --------------------------------------------------------------------------
   17. Contact & formulaires
   -------------------------------------------------------------------------- */

/* Le mot de Dan, en bulle de conversation.
   Le verre dépoli n'a de sens que s'il a quelque chose à flouter : sur le
   papier nu, backdrop-filter ne rend qu'un rectangle blanc. On pose donc une
   lueur bleue derrière la bulle — c'est elle que le flou dilue, et c'est ce
   qui donne l'épaisseur du verre. */
.mot-dan {
    position: relative;
    margin-top: 4px;
}

/* Trois transformations doivent cohabiter sur la bulle : la révélation au
   défilement, le flottement perpétuel et le suivi du curseur. Posées sur le
   même élément elles s'écrasent l'une l'autre — chacune a donc sa couche.
   .mot-dan porte la révélation, .bulle-suit le curseur, .bulle-flotte le
   flottement, .bulle-dan l'entrée. */
.bulle-suit {
    /* Le curseur donne une cible, la transition fait le trajet : la bulle
       suit avec un temps de retard, ce qui la rend flottante plutôt que
       collée au pointeur. */
    transition: transform .55s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

.bulle-flotte {
    position: relative;
    display: flex;
    align-items: flex-start;
    /* Amplitude volontairement faible : six pixels sur sept secondes. Au-delà
       on ne lit plus une bulle qui flotte, on lit une bulle qui bouge. */
    animation: flottement 7.2s ease-in-out infinite;
}

@keyframes flottement {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    26%      { transform: translate3d(2px, -6px, 0) rotate(.45deg); }
    52%      { transform: translate3d(-2px, -2.5px, 0) rotate(-.38deg); }
    78%      { transform: translate3d(1px, -5px, 0) rotate(.2deg); }
}

.mot-dan::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -12%;
    top: -46%;
    width: 66%;
    height: 190%;
    border-radius: 50%;
    /* Le bleu profond mélangé au papier vire au gris : à 34 % il ne reste que
       17 points d'écart entre le rouge et le bleu. Le bleu allumé en garde 48
       pour la même opacité — c'est lui qui colore le verre. */
    background: radial-gradient(closest-side,
            rgba(var(--bleu-lueur), .46) 0%,
            rgba(var(--bleu-lueur), .17) 54%,
            rgba(var(--bleu-lueur), 0) 100%);
    filter: blur(22px);
    pointer-events: none;
}

.bulle-dan {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    max-width: 52ch;
    padding: 19px 26px 21px;
    /* Le coin bas-gauche est resserré : c'est de là que part la queue. */
    border-radius: 22px 22px 22px 8px;
    background: rgba(255, 255, 255, .54);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, .82);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .92) inset,
        0 20px 46px -24px rgba(15, 43, 69, .46);
    /* La bulle prend la police d'interface, comme le reste du site. Ce qui
       la détache du texte courant n'est plus la famille mais le poids et la
       taille : médium contre les trois cents du texte secondaire. */
    font-family: var(--font-main);
    font-size: clamp(16px, 1.6vw, 20px);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -.005em;
    color: var(--ink);
}

/* La queue : un carré tourné à 45°, même verre, seuls les deux bords
   extérieurs bordés. Elle est posée AVANT la bulle dans le HTML — la bulle
   la recouvre donc à moitié et il n'en dépasse qu'une pointe. */
.queue-dan {
    position: absolute;
    left: 24px;
    /* Centre de l'élément posé sur le bord bas de la bulle : le triangle
       pend entièrement dessous, son arête haute affleure. */
    bottom: -8px;
    width: 15px;
    height: 15px;
    background: rgba(255, 255, 255, .54);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
    border-right: 1px solid rgba(255, 255, 255, .82);
    border-bottom: 1px solid rgba(255, 255, 255, .82);
    /* La bulle n'est translucide qu'à 54 % : la moitié haute du losange se
       verrait au travers. On la découpe donc au lieu de la masquer. Après la
       rotation, ce triangle bas-droite pointe vers le bas, et ses deux arêtes
       visibles sont précisément celles qui portent une bordure. */
    clip-path: polygon(0 100%, 100% 100%, 100% 0);
    transform: rotate(45deg);
    pointer-events: none;
}

/* La main salue une fois, puis se repose : le geste vit sans harceler. */
.salut {
    display: inline-block;
    transform-origin: 72% 78%;
    animation: salut-main 3.6s var(--ease) 1.2s infinite;
}

@keyframes salut-main {
    0%, 60%, 100% { transform: rotate(0deg); }
    64% { transform: rotate(15deg); }
    70% { transform: rotate(-11deg); }
    76% { transform: rotate(15deg); }
    82% { transform: rotate(-8deg); }
    88% { transform: rotate(0deg); }
}

/* Le message arrive comme un message : la bulle se déplie depuis sa queue,
   puis les trois lignes tombent l'une après l'autre. */
.mot-dan[data-shown] .bulle-dan,
.mot-dan[data-shown] .queue-dan {
    animation: bulle-entree .68s var(--ease) both;
}

/* La queue est déjà tournée : son animation doit conserver la rotation,
   sinon elle redevient un carré le temps de l'entrée. */
.mot-dan[data-shown] .queue-dan {
    animation-name: queue-entree;
}

.mot-dan[data-shown] .bulle-dan > span {
    animation: bulle-ligne .46s var(--ease) both;
}

.mot-dan[data-shown] .bulle-dan > span:nth-child(1) { animation-delay: .16s; }
.mot-dan[data-shown] .bulle-dan > span:nth-child(2) { animation-delay: .29s; }
.mot-dan[data-shown] .bulle-dan > span:nth-child(3) { animation-delay: .42s; }

@keyframes bulle-entree {
    from { opacity: 0; transform: translateY(10px) scale(.94); transform-origin: 0 100%; }
    to   { opacity: 1; transform: none; transform-origin: 0 100%; }
}

@keyframes queue-entree {
    from { opacity: 0; transform: rotate(45deg) scale(.94); }
    to   { opacity: 1; transform: rotate(45deg); }
}

@keyframes bulle-ligne {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: none; }
}

.contact-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(32px, 6vw, 80px);
    align-items: start;
}

.contact-info h2 {
    font-size: clamp(26px, 3vw, 40px);
    margin-bottom: 12px;
}

.contact-info>p {
    font-size: 14px;
    font-weight: 300;
    color: var(--stone);
    max-width: 42ch;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 0;
    
}

.info-item .label {
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--stone);
}

.info-item a {
    font-size: 17px;
    font-weight: 300;
}




/* Champs */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.form-group label {
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--stone);
}

input[type=text],
input[type=email],
input[type=tel],
textarea,
select,
.lettre-form input {
    width: 100%;
    background: transparent !important;
    border: none;
    border-bottom: 1px solid var(--line);
    padding: 10px 0;
    font-family: var(--font-main);
    font-size: 15px;
    font-weight: 300;
    color: var(--ink);
    outline: none;
    transition: border-color .3s var(--ease);
}

textarea {
    border: 1px solid var(--line);
    padding: 14px;
    resize: vertical;
    min-height: 130px;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--blue);
    box-shadow: 0 1px 0 0 var(--blue);
}

input::placeholder,
textarea::placeholder {
    color: #a8a49c;
}

select {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236e6c68' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
    padding-right: 22px;
}



.form-status {
    margin-top: 12px;
    font-size: 13px;
    min-height: 1em;
}

.form-status.success {
    color: #2e7d32;
}

.form-status.error {
    color: #b23b3b;
}

/* Mention « (optionnel) » dans un label.
   #a8a49c ne tenait que 2,48:1 sur blanc — très loin des 4,5:1 exigés pour
   un texte de cette taille, et signalé par l'audit d'accessibilité. Le gris
   secondaire de la charte le remplace : 6,18:1 sur blanc, 5,57:1 sur le
   papier. La mention reste plus discrète que son libellé par sa graisse et
   son interlettrage, pas par un gris illisible. */
.form-group label .optional {
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: none;
    color: var(--stone);
}

/* Champ contextuel dynamique : petite transition à l'apparition */
#dynamic-field[hidden] {
    display: none;
}

#dynamic-field:not([hidden]) {
    animation: dynFieldIn .35s var(--ease);
}

@keyframes dynFieldIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Écran de confirmation post-envoi */
.contact-confirm[hidden] {
    display: none;
}

.contact-confirm {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: clamp(24px, 3vw, 36px);
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 16px;
    animation: dynFieldIn .4s var(--ease);
}

.contact-confirm .cc-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--sky);
    color: var(--blue);
}

.contact-confirm h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 400;
    color: var(--ink);
}

.contact-confirm > p {
    margin: 0;
    font-weight: 300;
    line-height: 1.6;
    color: var(--stone);
}

.contact-confirm .cc-newsletter {
    width: 100%;
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.cc-nl-title {
    margin: 0 0 10px;
    font-weight: 500;
    color: var(--ink);
}

/* Case à cocher dans un formulaire. Même dessin que celle du panneau de
   confirmation, mais posée avant le bouton d'envoi : l'inscription se fait
   d'un geste, sans quitter le formulaire. */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    cursor: pointer;
}

.form-check input[type=checkbox] {
    margin-top: 3px;
    width: auto;
    accent-color: var(--ink);
    cursor: pointer;
}

.form-check span {
    font-size: 13px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--stone);
}

.cc-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.cc-check input[type=checkbox] {
    margin-top: 3px;
    width: auto;
    accent-color: var(--ink);
    cursor: pointer;
}

.cc-check span {
    font-size: 13px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--stone);
}

/* --------------------------------------------------------------------------
   18. Bloc "entrer en relation" (CTA final)
   -------------------------------------------------------------------------- */
.cta-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(30px, 6vw, 80px);
    align-items: end;
}

.cta-band h2 {
    font-size: clamp(30px, 4.6vw, 68px);
    line-height: 1.05;
}

.cta-band .cta-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}

.cta-band .cta-actions p {
    margin: 0;
    font-size: 13px;
    font-weight: 300;
    color: var(--stone);
}

/* Deux structures portent ce nom, et une seule reçoit ses marges.

   Sur la boutique et les pages d'expertise, .cta-band est une grille posée
   DANS une .section : c'est la section qui lui donne ses marges verticales.
   Sur la FAQ et À propos, en français comme en anglais, elle EST la section et
   enveloppe directement un .container — elle n'héritait donc d'aucune marge.
   Le titre collait au paragraphe, et le bouton touchait la bande d'heures qui
   suit : zéro pixel d'écart, mesuré sur téléphone.

   On rend à cette forme les marges des autres sections, à la valeur exacte de
   .section pour que le rythme de la page ne bouge pas. */
.cta-band > .container {
    padding-top: clamp(70px, 12vh, 150px);
    padding-bottom: clamp(70px, 12vh, 150px);
}

.cta-band > .container > h2 {
    margin-bottom: 16px;
}

.cta-band > .container > p {
    margin-bottom: 30px;
    max-width: 60ch;
}

/* --------------------------------------------------------------------------
   20. Pages Services (détails)
   -------------------------------------------------------------------------- */
.service-page-header {
    /* margin-top: var(--header-h); removed */
    padding: clamp(70px, 14vh, 150px) 0 clamp(40px, 7vh, 80px);
    border-bottom: 1px solid var(--line);
}

.service-page-header .container {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.service-page-header h1 {
    font-size: clamp(38px, 6.5vw, 100px);
    line-height: .96;
    letter-spacing: -.025em;
    max-width: 18ch;
}

.service-page-header .lead {
    margin: 0;
    font-size: clamp(16px, 1.5vw, 21px);
    font-weight: 300;
    line-height: 1.6;
    color: var(--stone);
    max-width: 52ch;
}

.service-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(28px, 5vw, 70px);
    align-items: center;
    padding: clamp(40px, 7vh, 80px) 0;
    border-bottom: 1px solid var(--line);
}

.service-details-reverse .service-media {
    order: -1;
}

@media (max-width: 720px) {
    .service-details-reverse .service-media {
        order: 0;
    }
}

.service-text h2 {
    font-size: clamp(26px, 3.2vw, 44px);
    line-height: 1.08;
    margin-bottom: 16px;
}

.service-text p {
    font-size: 14.5px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--stone);
}

.service-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 8px;
    
}

.service-list li {
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
    font-weight: 300;
    display: flex;
    gap: 12px;
    align-items: baseline;
}

.service-list li::before {
    content: "—";
    color: var(--stone);
}

.service-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Un portrait vertical dans un créneau taillé pour du 4/3 : le recadrage
   automatique lui couperait la tête et les pieds. Il garde ses proportions,
   bornées de façon à ne pas écraser la colonne de texte d'à côté. */
.service-media--portrait img {
    aspect-ratio: 9 / 16;
    width: 100%;
    /* C'est la largeur qui est bornée, pas la hauteur : avec « width: auto »
       la boîte vaut zéro tant que la photo n'est pas arrivée, et toute la
       page en dessous sursaute de six cents pixels au chargement. Mesuré. */
    max-width: min(380px, 100%);
    margin-inline: auto;
}

/* Le pot de miel du formulaire de contact : hors de l'écran plutôt que
   « display: none ». Certains robots ignorent les champs qu'un navigateur ne
   rendrait pas ; celui-ci est rendu, simplement personne ne le voit. */
.pot-de-miel {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Le récit de la page « La maison »
   --------------------------------------------------------------------------
   La page était une colonne de texte de 68 caractères de large, six titres
   à la suite : une page de journal, pas une page d'agence d'images. Elle
   alterne maintenant texte et photographie, la photo tantôt à droite tantôt
   à gauche, sur la grille des pages d'expertise — même rythme, mêmes
   respirations, et la même désaturation qui reprend des couleurs quand le
   bloc croise le milieu de l'écran.

   Deux blocs échappent à l'alternance, et c'est voulu : le chapô qui ouvre
   et la liste de ce que l'agence ne fait pas. Quatre rangées identiques
   auraient remplacé un mur de texte par un métronome.
   -------------------------------------------------------------------------- */
.recit-chapo {
    max-width: 30ch;
    font-family: var(--font-display);
    font-size: clamp(26px, 3.4vw, 46px);
    line-height: 1.16;
    color: var(--ink);
    margin: 0 0 clamp(10px, 2vh, 26px);
}

.recit-chapo strong {
    font-weight: inherit;
    /* Le nom du fondateur se détache par la couleur du logo, pas par une
       graisse que cette fonte de titre ne possède pas. */
    color: var(--blue);
}

.recit-appui {
    max-width: 62ch;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--stone);
    margin: 0 0 clamp(24px, 5vh, 56px);
}

/* Le seul bloc sans photo. Le filet à gauche le tient à part sans avoir à
   lui inventer une image : dire ce qu'on ne fait pas n'a rien à illustrer. */
.recit-net {
    max-width: 70ch;
    margin: clamp(30px, 6vh, 64px) 0;
    padding: clamp(20px, 3vw, 34px) 0 clamp(20px, 3vw, 34px) clamp(20px, 3vw, 34px);
    border-left: 2px solid var(--blue);
}

.recit-net h2 {
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.12;
    margin: 0 0 14px;
}

.recit-net p {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--stone);
    margin: 0;
}

/* Sur la grille du récit, les liens restent soulignés : ils sont dans du
   texte courant, où rien d'autre ne les signale. */
.service-text p a {
    border-bottom: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   21. Pages sobres (réalisations, avis, formulaire avis, légal)
   -------------------------------------------------------------------------- */
.page-head {
    /* margin-top: var(--header-h); removed */
    padding: clamp(60px, 11vh, 130px) 0 clamp(30px, 5vh, 54px);
    border-bottom: 1px solid var(--line);
}

.page-head .container {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.page-head h1 {
    font-size: clamp(34px, 5.4vw, 84px);
    line-height: .98;
    letter-spacing: -.025em;
    max-width: 20ch;
}

.page-head p {
    margin: 0;
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: 300;
    color: var(--stone);
    max-width: 54ch;
}

/* Alias legacy : ancien en-tête de page (pages légales) */
.page-header {
    /* margin-top: var(--header-h); removed */
    padding: clamp(60px, 11vh, 130px) 0 clamp(30px, 5vh, 54px);
    border-bottom: 1px solid var(--line);
}

.page-header .container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
    text-align: left;
}

.page-header h1 {
    font-size: clamp(34px, 5.4vw, 78px);
    line-height: .98;
    letter-spacing: -.025em;
}

.page-header p {
    margin: 0;
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: 300;
    color: var(--stone);
    max-width: 54ch;
}

/* Contenu éditorial des pages légales (mentions, confidentialité, cookies) */
.content-section .container {
    max-width: 820px;
    font-weight: 300;
}

.content-section h2 {
    font-size: clamp(24px, 2.6vw, 36px);
    line-height: 1.1;
    margin: 40px 0 14px;
}

.content-section h3 {
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: .01em;
    margin: 26px 0 10px;
}

.content-section p,
.content-section li {
    font-size: 15px;
    line-height: 1.8;
    color: #3a3a37;
}

.content-section ul {
    list-style: disc;
    padding-left: 22px;
    margin: 0 0 1em;
}

.content-section a {
    border-bottom: 1px solid var(--line);
}

.content-section a:hover {
    color: var(--ink);
    border-color: var(--ink);
}

/* Filtres portfolio */
.filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: clamp(24px, 4vh, 44px);
}

.filters .filter {
    border: 1px solid var(--line);
    background: none;
    /* Mesuré : ces boutons faisaient 35 px de haut. Sous les 44 px d'usage,
       un pouce en manque un sur deux — et un bouton qu'on rate passe pour un
       bouton mort. C'est exactement ce qui a été signalé. */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    color: var(--ink);
    transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}

.filters .filter:hover {
    border-color: var(--ink);
}

.filters .filter.active {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

/* Formulaire d'avis : notation par étoiles */
.rating-input {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 4px;
}

.rating-input input {
    display: none;
}

.rating-input label {
    font-size: 30px;
    color: var(--line);
    cursor: pointer;
    transition: color .2s var(--ease);
}

.rating-input input:checked~label,
.rating-input label:hover,
.rating-input label:hover~label {
    color: var(--blue);
}

.honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

/* Contenu éditorial / pages légales */
.prose {
    max-width: 760px;
    margin: 0 auto;
    font-weight: 300;
}

.prose h2 {
    font-size: clamp(24px, 2.6vw, 36px);
    margin: 40px 0 14px;
    line-height: 1.1;
}

.prose h3 {
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: .02em;
    margin: 26px 0 10px;
}

.prose p,
.prose li {
    font-size: 15px;
    line-height: 1.8;
    color: #3a3a37;
}

.prose ul {
    list-style: disc;
    padding-left: 22px;
    margin: 0 0 1em;
}

.prose a {
    border-bottom: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   22. Intro splash (préserve le comportement plein écran d'origine)
   -------------------------------------------------------------------------- */
#intro-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.cookie-badge-required {
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--stone);
}

.btn-modal-decline,
.btn-modal-save {
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 11px 18px;
    border: 1px solid var(--line);
    border-radius: 100px;
    background: none;
    color: var(--ink);
}

.btn-modal-save {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background: #cdc9c1;
    border-radius: 22px;
    transition: background .3s var(--ease);
}

.toggle-slider::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    background: var(--paper);
    border-radius: 50%;
    transition: transform .3s var(--ease);
}











/* --------------------------------------------------------------------------
   25. Responsive
   -------------------------------------------------------------------------- */
/* La barre complète ne tient plus sous 1536 px : le sélecteur FR|EN passait
   par-dessus le lien « Boutique ». En dessous de ce seuil, on bascule sur le
   menu téléphone, où tout est à sa place. Mesuré : le dégagement n'est
   confortable (47 px) qu'à partir de 1536 px. */
@media (max-width: 1279px) {
    .mobile-menu-btn {
        display: flex;
    }
}

@media (max-width: 1060px) {
        .service-card {
        border-right: none;
    }

    .hero-content h1 {
        max-width: none;
    }
}

@media (max-width: 600px) {

    .section {
        padding: clamp(56px, 9vh, 90px) 0;
    }

    .footer-content {
        flex-direction: column;
        gap: 26px;
    }
}

/* --- Page Transition Overlay --- */
.page-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    pointer-events: none;
    display: flex;
    flex-direction: row;
}

.page-transition-strip {
    flex: 1;
    /* Le bleu pétrole du logo, et non plus un noir sans rapport avec la
       marque. La valeur passe par la variable : le jour où le bleu change,
       la transition suit. Le repli en dur sert les navigateurs qui ne
       résoudraient pas la variable, plutôt que de laisser des bandes
       transparentes. */
    background: var(--blue, #0f2b45);
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.page-transition-strip:last-child {
    border-right: none;
}

/* --- Lenis Smooth Scroll Base --- */
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}


/* --- Rolling Text Hover Effect (Studio Fief style) --- */
.roll-link {
    display: inline-block;
    vertical-align: middle;
}
.roll {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    overflow: hidden;
}
.roll-front, .roll-back {
    display: flex;
}
.roll-front span, .roll-back span {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}
.roll-back {
    position: absolute;
    top: 100%;
    left: 0;
}
.roll-link:hover .roll-front span,
.roll-link:hover .roll-back span {
    transform: translateY(-100%);
}


@media (max-width: 1279px) {
    .mobile-menu-btn {
        display: flex;
    }
    
    

.nav-links {
        position: fixed;
        inset: 0;
        top: 0;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 6px;
        padding: 0 var(--pad-x);
        background: var(--paper);
        font-size: clamp(30px, 8vw, 48px);
        letter-spacing: normal;
        text-transform: none;
        transform: translateX(100%);
        transition: transform .4s var(--ease);
        display: flex;
        z-index: 80;
    }
    
    .nav-links.active {
        transform: none;
    }
    
    .nav-links>li>a:not(.lang-link) {
        font-family: var(--font-display);
        font-weight: 400;
    }
    
    .nav-links .btn-primary {
        font-family: var(--font-main);
        font-size: 11px;
        padding: 14px 22px;
        margin-top: 10px;
    }
}

body.menu-open .navbar.scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.navbar-left {
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 40px);
}


/* Navbar Colors Transition (Transparent to White Pill) */
/* Le fichier source est le V bleu pétrole de la charte. En haut de page la
   barre est transparente au-dessus d'une photo sombre : le bleu nuit y serait
   illisible, on le passe donc en blanc. Dès que la barre devient une pilule
   claire, on retire le filtre et la vraie couleur de la marque apparaît.
   Les deux états gardent la même liste de fonctions (brightness puis invert)
   pour que la transition puisse s'interpoler ; « none » ne s'anime pas. */
.logo-img {
    filter: brightness(0) invert(1);
    transition: filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.navbar.scrolled .logo-img {
    filter: brightness(1) invert(0);
}

.brand-tag {
    color: #ffffff !important;
}
.navbar.scrolled .brand-tag {
    color: var(--ink) !important;
}

.nav-links > li > a:not(.btn-primary):not(.lang-link) {
    color: #ffffff !important;
    opacity: 0.9 !important;
    transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
}
.navbar.scrolled .nav-links > li > a:not(.btn-primary):not(.lang-link) {
    color: var(--ink) !important;
    /* Pleine force ici, contrairement à la barre transparente du haut de page :
       le verre laisse passer ce qui défile dessous, et un gris à 78 % posé sur
       une photo sombre devient illisible. */
    opacity: 1 !important;
}
.navbar.scrolled .nav-links > li > a:not(.btn-primary):not(.lang-link):hover {
    opacity: 1 !important;
}

.lang-switcher {
    border-color: rgba(255,255,255,0.3) !important;
    transition: border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.navbar.scrolled .lang-switcher {
    border-color: var(--line) !important;
}

.lang-link {
    color: rgba(255,255,255,0.6) !important;
}
.lang-link.lang-active {
    color: #ffffff !important;
}
.lang-sep {
    color: rgba(255,255,255,0.3) !important;
}

.navbar.scrolled .lang-link {
    color: var(--stone) !important;
}
.navbar.scrolled .lang-link.lang-active {
    color: var(--ink) !important;
}
.navbar.scrolled .lang-sep {
    color: var(--line) !important;
}

.mobile-menu-btn {
    border-color: rgba(255,255,255,0.3) !important;
    transition: border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-menu-btn span {
    background: #ffffff !important;
    transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s ease, opacity 0.4s ease;
}
.navbar.scrolled .mobile-menu-btn {
    border-color: var(--line) !important;
}
.navbar.scrolled .mobile-menu-btn span {
    background: var(--ink) !important;
}

/* --- 1600.agency WhatsApp Button Replica --- */
.btn-whatsapp {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgb(37, 211, 102);
    box-shadow: 5px 15px 30px 0px rgba(37, 211, 102, 0.2), 0px 1px 6px -2px rgb(37, 211, 102);
    border: 1px solid rgb(1, 130, 49);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 10;
}

.btn-whatsapp:hover {
    transform: scale(1.1);
}

.btn-whatsapp::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1;
}

.btn-whatsapp:hover::before {
    transform: translate(-50%, -50%) scale(1);
}

.btn-whatsapp svg {
    position: absolute;
    width: 25px;
    height: 25px;
    z-index: 2;
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wa-icon-white {
    fill: rgb(255, 255, 255);
    opacity: 1;
    transform: translateY(0);
}

.wa-icon-green {
    fill: rgb(37, 211, 102);
    opacity: 0;
    transform: translateY(15px);
}

.btn-whatsapp:hover .wa-icon-white {
    opacity: 0;
    transform: translateY(-15px);
}

.btn-whatsapp:hover .wa-icon-green {
    opacity: 1;
    transform: translateY(0);
}


/* --- Old Footer Styles Restored --- */

.footer {
    padding: 80px 0 30px;
    /* Second palier : un halo du même bleu au bord haut, qui se dissout dans
       le noir. La bande et le pied de page se répondent au lieu de se
       juxtaposer. */
    background:
        radial-gradient(130% 78% at 50% 0%,
            rgba(15, 43, 69, .50) 0%,
            rgba(15, 43, 69, 0) 60%),
        #050505;
    /* La bande d'heures, désormais sombre, précède toujours le pied de page :
       aucune marge entre les deux, sinon un liseré clair s'intercale. */
    margin-top: 0;
    font-family: var(--font-main);
}

.footer-top {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 60px;
}

.footer-top h2 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    color: #fff;
}

.footer-main {
    display: grid;
    /* Le minimum de piste vaut la largeur de la colonne la plus exigeante, et
       c'est « Réseaux Sociaux » : quatre pastilles de 40 px qui portent chacune
       10 px de marge de part et d'autre, plus 15 px d'écart — 285 px en tout,
       insécables. Avec un minimum de 200 px, la grille tenait trois colonnes
       jusqu'à 780 px de large en donnant 218 px à cette colonne : elle
       débordait de sa piste, et la page gagnait un défilement horizontal de un
       à dix pixels entre 780 et 830 px. À 285 px, la grille repasse à deux
       colonnes avant d'en arriver là, et rien ne change au-dessus. */
    grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
    gap: 40px;
    margin-bottom: 60px;
}

.footer-col h2 {
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 25px;
    font-weight: 600;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col a {
    color: #888;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 0.95rem;
}

.footer-col a:hover {
    color: #fff;
}

.footer-socials {
    display: flex;
    /* Filet de sécurité : si une cinquième icône arrive un jour, la rangée se
       replie au lieu de repousser sa colonne hors de la grille. */
    flex-wrap: wrap;
    gap: 15px;
}

.footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    color: #000;
    transition: all 0.3s ease;
}

.footer-socials a:hover {
    background: var(--accent-color);
    color: #fff;
    transform: translateY(-3px);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
    color: #666;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-legal-links a {
    color: #666;
    margin-left: 20px;
    transition: color 0.3s ease;
}

.footer-legal-links a:hover {
    color: #aaa;
}

.footer-creator {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-creator span {
    color: #666;
}

.footer-creator a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #888;
    transition: opacity 0.3s ease;
    text-decoration: none;
    font-weight: 500;
}

.footer-creator a:hover {
    opacity: 0.8;
    color: #fff;
}

.footer-creator img {
    height: 24px;
    width: auto;
    border-radius: 4px;
}

.footer-top h2 {
        font-size: 2.2rem;
    }

.footer-bottom {
        flex-direction: column;
        text-align: center;
    }

.footer-legal-links {
        margin: 15px 0;
    }

.footer-legal-links a {
        margin: 0 10px;
    }

.footer-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

.footer-socials a {
        margin: 0 10px;
    }

/* Le wordmark fait 8,7 fois plus large que haut : chaque pixel de hauteur en
   coûte presque neuf en largeur. À 34 px il traversait toute la page. */
.footer-main-logo { height: 26px; max-width: 100%; object-fit: contain; opacity: 0.8; transition: opacity 0.3s ease; }

.footer-logo-link:hover .footer-main-logo { opacity: 1; }

/* Logo signature dans la colonne Navigation du footer.
   Le PNG est un carré 1080x1080 avec de larges bords transparents :
   on contraint sa taille (comme sur l'ancien site) et on le passe en blanc
   pour qu'il reste lisible sur le footer sombre. */
.signature-nav-logo {
    width: 116px;
    height: 33px;
    object-fit: cover;
    object-position: center;
    filter: brightness(0) invert(1);
    /* L'image est en display:block (reset) : on la centre via marges auto. */
    margin: 0 auto;
}

@media (max-width: 768px) {
    .footer-top h2 {
        font-size: 2.2rem;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    .footer-legal-links {
        margin: 15px 0;
    }
    .footer-legal-links a {
        margin: 0 10px;
    }
}


/* Center the Social Networks column */
.footer-col:last-child {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer-col:last-child .footer-socials {
    justify-content: center;
}


/* ==========================================================================
   Founder Profile (Dan Berg)
   ========================================================================== */
.founder-profile {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vw, 80px);
    margin-top: clamp(80px, 12vw, 150px);
    padding-top: clamp(60px, 8vw, 100px);
    
}

@media (min-width: 900px) {
    .founder-profile {
        grid-template-columns: 4fr 5fr;
        align-items: center;
    }
}

.founder-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 4/5;
    overflow: hidden;
    border-radius: 4px;
}

.founder-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.founder-photo:hover img {
    transform: scale(1.03);
}

.founder-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.founder-name {
    font-family: var(--font-display);
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1;
    margin: 0;
    font-weight: 400;
}

.founder-role {
    font-family: var(--font-sans);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--stone);
    margin-top: -16px;
    display: block;
}

.founder-bio {
    max-width: 600px;
    line-height: 1.6;
}

/* ==========================================================================
   Image Filters (Black & White to Color on scroll/hover)
   ========================================================================== */
.founder-photo img, .service-media img {
    filter: grayscale(100%) contrast(1.1);
    transition: filter 0.8s ease, transform 0.8s ease;
}

.founder-photo img.active-color, .service-media img.active-color {
    filter: grayscale(0%) contrast(1);
}

/* Survol uniquement sur les appareils à pointeur (desktop) : évite que la
   couleur reste « collée » après un simple appui sur écran tactile. */
@media (hover: hover) {
    .founder-photo:hover img, .service-media:hover img {
        filter: grayscale(0%) contrast(1);
        transform: scale(1.02);
    }
}

/* Un créneau média des pages d'expertise peut porter une vidéo au lieu d'une
   photo. Le bloc vit ici, juste après la désaturation, et non plus haut avec
   le reste de « .service-media » : c'est cette règle-là qu'il doit annuler, et
   la faire gagner de loin aurait demandé un sélecteur inutilement lourd.

   La boîte est dimensionnée par le calage padding plutôt que par
   aspect-ratio, pour la même raison que dans la grille des réalisations : la
   hauteur reste calculée depuis la largeur, y compris au retour du plein
   écran, où aspect-ratio se laissait écraser par l'enfant en position
   absolue. */
.service-media .media {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    background: var(--placeholder-a, #e6e4df);
}

.service-media .media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border: 0;
    background: #000;
}

/* L'affiche échappe au noir et blanc : elle annonce un film qui, lui, part en
   couleur dès la première image. La laisser grise aurait fait virer le cadre
   au moment du clic. Le grossissement au survol est déjà géré par
   « .lecteur-affiche:hover img » : celui d'ici ferait double emploi. */
.service-media .media img {
    filter: none;
    aspect-ratio: auto;
}

@media (hover: hover) {
    .service-media:hover .media img {
        filter: none;
        transform: none;
    }
}

/* ==========================================================================
   Raffinements mobile (téléphone) — 2026-08
   ========================================================================== */

/* ---- Tablette / petit écran ---- */
@media (max-width: 768px) {

    /* --- Navbar --- */
    .nav-container {
        height: 72px;
        padding: 0 clamp(14px, 3vw, 24px);
    }
    .navbar.scrolled .nav-container {
        height: 60px;
        border-radius: 30px;
        padding: 0 18px;
    }
    .navbar.scrolled {
        padding-top: 10px;
    }
    .logo-img {
        height: 26px;
    }
    .navbar-right {
        gap: 10px;
    }
    .navbar-right .btn-primary {
        padding: 10px 16px;
        font-size: 8.5px;
    }
    .btn-whatsapp {
        width: 40px;
        height: 40px;
    }
    .btn-whatsapp svg {
        width: 21px;
        height: 21px;
    }
    .mobile-menu-btn {
        width: 40px;
        height: 40px;
    }
    .mobile-menu-btn span {
        width: 18px;
    }
    .lang-switcher {
        padding: 5px 10px;
    }
    .lang-link {
        font-size: 10px;
    }

    /* --- Hero ---
       (la hauteur svh est posée sur la règle de base ; ce min-height ne
       servait à rien, height l'emportait toujours) */
    .hero {
        /* Écran plus court : on resserre la bande, sinon le repère se
           retrouve isolé tout en bas, loin des boutons. */
        --place-repere: 62px;
    }
    .hero-content {
        padding-top: clamp(20px, 5vh, 50px);
        /* Même bande réservée qu'au-dessus : elle doit survivre à cette
           réécriture des marges, sinon le repère revient sur les boutons. */
        padding-bottom: calc(clamp(20px, 5vh, 50px) + var(--place-repere, 86px));
        gap: 20px;
    }
    .hero-content .kicker {
        font-size: 9px;
        letter-spacing: .2em;
    }
    .hero-content h1 {
        font-size: clamp(34px, 9vw, 52px);
        max-width: none;
        line-height: .96;
    }
    .hero-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding-top: 18px;
    }
    .btn-group {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }
    .btn-group .btn-primary,
    .btn-group .btn-secondary {
        width: 100%;
        text-align: center;
        padding: 14px 20px;
    }

    /* --- Sections (général) --- */
    .section {
        padding: clamp(50px, 8vh, 80px) 0;
    }
    .section-header {
        margin-bottom: clamp(28px, 5vh, 44px);
    }
    .section-header h2 {
        font-size: clamp(26px, 7vw, 38px);
        line-height: 1.06;
    }
    .section-header p {
        font-size: 14px;
    }
    .head-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: clamp(28px, 5vh, 44px);
    }

    /* --- Manifeste (La Maison) --- */
    .manifesto {
        gap: 24px;
    }
    .manifesto .aside {
        display: none;
    }
    .manifesto .body {
        grid-column: auto;
        gap: 24px;
    }
    .manifesto .lines {
        font-size: clamp(26px, 7vw, 38px);
        line-height: 1.16;
    }

    /* --- Fondateur (Dan Berg) --- */
    .founder-profile {
        margin-top: clamp(50px, 8vw, 80px);
        padding-top: clamp(40px, 6vw, 60px);
        gap: clamp(28px, 5vw, 44px);
    }
    .founder-photo {
        max-width: 280px;
        margin: 0 auto;
    }
    .founder-name {
        font-size: clamp(32px, 8vw, 44px);
        text-align: center;
    }
    .founder-role {
        text-align: center;
        margin-top: -12px;
    }
    .founder-content {
        text-align: center;
        gap: 18px;
    }
    .founder-content .large-text {
        font-size: 15px;
    }
    .founder-bio {
        font-size: 13.5px;
        max-width: none;
    }

    /* --- Savoir-faire --- */

    /* --- Univers (cartes services) --- */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .service-card {
        border: 1px solid var(--line) !important;
        border-right: 1px solid var(--line) !important;
        border-radius: 10px;
        min-height: auto;
        padding: 0 !important;
        overflow: hidden;
        background: #ffffff !important;
    }
    .service-card:hover {
        background: #fafaf8 !important;
    }
    .service-card:last-child {
        border: 1px solid var(--line) !important;
    }
    .service-card .thumb {
        height: 200px;
        border-radius: 0;
    }
    .service-card .card-body {
        padding: 18px 22px 24px;
    }
    .service-card h3 {
        font-size: 24px;
    }
    .custom-card-logo {
        justify-content: flex-start;
        margin-bottom: 0;
        padding: 18px 22px 0;
    }
    .custom-card-logo .service-text {
        font-size: 18px;
    }
    /* Variante blue nuit */
    .service-card.is-blue {
        border: none !important;
        border-radius: 10px;
        overflow: hidden;
    }
    .service-card.is-blue:hover {
        background: #0b2137 !important;
    }
    .service-card.is-blue .thumb {
        height: 200px;
    }
    .service-card.is-blue .card-body {
        padding: 18px 22px 24px;
    }

    /* --- Approche --- */
    .approach {
        gap: clamp(24px, 4vw, 36px);
    }
    .approach-aside {
        position: static;
    }
    .approach-aside h2 {
        font-size: clamp(26px, 7vw, 36px);
    }
    .approach-aside p {
        font-size: 13.5px;
        max-width: none;
    }
    .approach-step {
        grid-template-columns: 48px 1fr;
        gap: 16px;
        padding: clamp(18px, 3vw, 28px) 0;
    }
    .approach-step .step-num {
        font-size: clamp(36px, 9vw, 52px);
    }
    .approach-step h3 {
        font-size: clamp(20px, 5vw, 28px);
    }
    .approach-step p {
        font-size: 13px;
        max-width: none;
    }

    /* --- Créations (work grid) --- */

    /* --- Marquee --- */
    .marquee-track .cell {
        width: clamp(150px, 34vw, 185px); /* cellules plus larges = logos un peu plus espacés sur mobile */
        height: 72px;
        font-size: 9.5px;
    }
    /* Bande logos clients collée au trait de séparation (supprime le vide au-dessus sur mobile) */
    .section.no-border:has(> .marquee) {
        padding-top: 0 !important;
    }

    /* --- Contact --- */
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 0;
    }
    /* Sur téléphone, le formulaire passe devant : on vient pour écrire, pas
       pour lire des coordonnées. Elles suivent, avec la newsletter.
       La grille étant à une seule colonne ici, « order » suffit — l'ordre du
       document reste inchangé, donc la lecture au clavier et à la voix garde
       sa cohérence sur les grands écrans. */
    .contact-wrapper > .contact-form {
        order: 1;
    }

    .contact-wrapper > .contact-info {
        order: 2;
    }

    .contact-info {
        padding-top: 36px;
        border-top: 1px solid var(--line);
    }
    .contact-info h2 {
        font-size: clamp(24px, 6vw, 32px);
    }
    .contact-info > p {
        font-size: 13.5px;
    }
    .contact-form {
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 28px 22px 32px;
        margin-top: 28px;
    }
    .info-item a {
        font-size: 15px;
    }

    /* Labels de formulaire plus lisibles au doigt */
    .form-group label {
        font-size: 12px;
        letter-spacing: .12em;
    }
    /* Champs plus grands pour le toucher */
    input[type=text],
    input[type=email],
    input[type=tel],
    textarea,
    select,
    .lettre-form input {
        font-size: 16px; /* Empêche le zoom auto sur iOS */
        padding: 12px 0;
    }
    textarea {
        padding: 14px;
        min-height: 110px;
    }
    .btn-primary.full-width {
        padding: 16px;
        font-size: 11px;
    }

    /* --- Footer --- */
    .footer {
        padding: 50px 0 24px;
        margin-top: 0;
    }
    .footer-top {
        margin-bottom: 36px;
    }
    .footer-main-logo {
        /* Sur téléphone la hauteur doit BAISSER, pas monter : à 46 px le mot
           occupait les 358 px de large de l'écran d'un bord à l'autre. */
        height: 22px;
    }
    .footer-main {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 36px;
        text-align: center;
    }
    .footer-col h2 {
        font-size: 1rem;
        margin-bottom: 14px;
    }
    .footer-col ul li {
        margin-bottom: 8px;
    }
    .footer-col a {
        font-size: 0.9rem;
    }
    .footer-col:last-child {
        text-align: center;
    }
    .footer-socials {
        justify-content: center;
        gap: 12px;
    }
    .footer-socials a {
        width: 38px;
        height: 38px;
        margin: 0;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 14px;
        padding-top: 20px;
    }
    .footer-legal-links {
        margin: 0;
    }
    .footer-legal-links a {
        margin: 0 8px;
        font-size: 0.8rem;
    }
    .footer-creator {
        justify-content: center;
    }
    .footer-copyright {
        font-size: 0.8rem;
    }


    /* --- Portfolio grid (page toutes-réalisations) --- */
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .portfolio-item .portfolio-content h3 {
        font-size: 15px;
    }
    .portfolio-item .category {
        font-size: 8px;
    }

    /* --- Boutons globaux (touch-friendly) --- */
    .btn-primary,
    .btn-secondary {
        padding: 14px 20px;
        font-size: 9.5px;
    }
    .btn-link {
        font-size: 9.5px;
        padding: 6px 0;
    }

    /* --- Pages services / légales --- */
    .service-page-header {
        padding: clamp(50px, 10vh, 80px) 0 clamp(30px, 5vh, 50px);
    }
    .service-page-header h1 {
        font-size: clamp(30px, 8vw, 48px);
    }
    .service-details {
        gap: clamp(20px, 4vw, 36px);
        padding: clamp(30px, 5vh, 50px) 0;
    }
    .page-head {
        padding: clamp(50px, 9vh, 80px) 0 clamp(24px, 4vh, 40px);
    }
    .page-head h1 {
        font-size: clamp(28px, 7vw, 44px);
    }
    .page-header {
        padding: clamp(50px, 9vh, 80px) 0 clamp(24px, 4vh, 40px);
    }
    .page-header h1 {
        font-size: clamp(28px, 7vw, 44px);
    }

    /* --- Avis / témoignages --- */
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    .testimonial-card {
        padding: 24px 20px;
    }
    .testimonial-text {
        font-size: 18px;
    }

    /* --- Intro overlay mobile --- */
/* --- Menu mobile ouvert (couleurs des spans hamburger) --- */
    body.menu-open .mobile-menu-btn {
        border-color: var(--line) !important;
    }
    body.menu-open .mobile-menu-btn span {
        background: var(--ink) !important;
    }
}

/* ---- Très petit écran (iPhone SE, petits téléphones) ---- */
@media (max-width: 380px) {
    .hero-content h1 {
        font-size: 30px;
    }
    .hero-content .kicker {
        font-size: 8px;
    }
    .navbar-right .btn-primary {
        padding: 9px 12px;
        font-size: 7.5px;
    }
    .manifesto .lines {
        font-size: 24px;
    }
    .section-header h2 {
        font-size: 24px;
    }
    .approach-aside h2 {
        font-size: 24px;
    }
    .founder-name {
        font-size: 30px;
    }
    .contact-info h2 {
        font-size: 22px;
    }
}

/* ==========================================================================
   Navbar mobile — style 1600.agency avec transition
   Placé en dernier pour overrider les règles !important précédentes.
   ========================================================================== */
@media (max-width: 1279px) {

    /* ---- Navbar de base (état initial transparent) ---- */
    .nav-container {
        height: 72px !important;
        padding: 0 20px !important;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        max-width: 100% !important;
    }
    .logo-img {
        height: 26px;
    }
    .brand-tag {
        display: none !important;
    }
    .mobile-menu-btn {
        width: 40px;
        height: 40px;
    }
    .mobile-menu-btn span {
        width: 18px;
    }

    /* ---- Navbar au scroll (état pillule blanche) ---- */
    .navbar.scrolled {
        padding-top: 10px !important;
    }
    .navbar.scrolled .nav-container {
        background: rgba(255, 255, 255, 0.74) !important;
        backdrop-filter: blur(18px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
        border-radius: 32px !important;
        box-shadow: 0 2px 20px rgba(0,0,0,0.06) !important;
        max-width: calc(100% - 24px) !important;
        height: 56px !important;
        padding: 0 16px !important;
    }
    .navbar.scrolled .logo-img {
        filter: brightness(1) invert(0) !important;
    }
    .navbar.scrolled .mobile-menu-btn {
        border-color: var(--line) !important;
    }
    .navbar.scrolled .mobile-menu-btn span {
        background: var(--ink) !important;
    }
    
    /* ---- Masquer CTA + lang-switcher du header ---- */
    .navbar-right > .btn-primary {
        display: none !important;
    }
    .navbar-right > .lang-switcher {
        display: none !important;
    }

    /* ---- Afficher éléments mobile-only dans le menu ---- */
    .mobile-only {
        display: block !important;
    }

    /* ---- WhatsApp bouton compact ---- */
    .btn-whatsapp {
        width: 40px;
        height: 40px;
    }
    .btn-whatsapp svg {
        width: 21px;
        height: 21px;
    }
    
    /* ---- Navbar-right : juste WhatsApp + hamburger ---- */
    .navbar-right {
        gap: 10px;
    }

    /* ---- Style du menu mobile ouvert ---- */
    .mobile-menu-lang {
        margin-top: 16px;
    }
    .mobile-menu-lang .lang-switcher {
        border-color: var(--line) !important;
        display: inline-flex;
        padding: 8px 16px;
    }
    .mobile-menu-lang .lang-link {
        color: var(--stone) !important;
        opacity: 0.7 !important;
        font-size: 13px !important;
    }
    .mobile-menu-lang .lang-link.lang-active {
        color: var(--ink) !important;
        opacity: 1 !important;
    }
    .mobile-menu-lang .lang-sep {
        color: var(--line) !important;
    }
    .mobile-menu-cta {
        margin-top: 8px;
    }
    .mobile-menu-cta .btn-primary {
        display: inline-block !important;
        font-size: 11px;
        padding: 16px 28px;
        border-radius: 30px;
        margin-top: 4px;
    }

    /* ---- Menu ouvert : hamburger reste noir et background pillule sans backdrop-filter pour éviter les bugs de barre blanche ---- */
    body.menu-open .mobile-menu-btn {
        border-color: var(--line) !important;
    }
    body.menu-open .mobile-menu-btn span {
        background: var(--ink) !important;
    }
    body.menu-open .navbar .nav-container {
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 32px !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    body.menu-open .logo-img {
        filter: brightness(1) invert(0) !important;
    }
}


/* ==========================================================================
   Styles spécifiques à la page Signature (extrait de signature.html)
   ========================================================================== */
/* ---- Hero signature : image plein cadre + logo signature centré ---- */
        .hero-small {
            position: relative;
            height: 66vh;
            min-height: 440px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .hero-small .hero-bg {
            position: absolute;
            inset: 0;
            background: url('../img/db-pp-signature.png') no-repeat center center/cover;
            transform: scale(1.03);
        }
        .hero-small .overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top,
                rgba(10, 10, 9, .82),
                rgba(10, 10, 9, .35) 55%,
                rgba(10, 10, 9, .55));
        }
        .hero-small .hero-content {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 22px;
            text-align: center;
            padding: 0 var(--pad-x);
        }
        .hero-small .sig-logo {
            max-width: 450px;
            width: 90%;
            height: auto;
            filter: brightness(0) invert(1);
        }

        /* ---- Bloc « La Direction Artistique » : typo sobre, tout en Bricolage ----
           On garde la même famille que le texte courant (comme l'ancienne page),
           seuls le poids et la taille marquent la hiérarchie. */
        /* Accroche */
        .signature-lead {
            font-size: 1.25rem !important;
            font-weight: 500 !important;
            line-height: 1.5 !important;
            color: var(--ink) !important;
            margin-bottom: 22px !important;
        }
        /* Phrase de chute */
        .signature-close {
            font-size: 1.15rem !important;
            font-weight: 600 !important;
            line-height: 1.5 !important;
            color: var(--ink) !important;
            margin-top: 32px !important;
        }
        /* On retire le filet gris bas de .service-details : la signature flottante
           remonte par-dessus et la ligne la traverserait. */
        .service-details {
            border-bottom: none;
        }
        /* Portrait Dan Berg : cadrage vertical, hover subtil (façon « founder ») */
        .signature-portrait {
            position: relative;
            width: 100%;
            aspect-ratio: 4 / 5;
            overflow: hidden;
            border-radius: 4px;
        }
        .signature-portrait img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            aspect-ratio: auto; /* neutralise le 4/3 par défaut de .service-media img */
            transition: transform .6s var(--ease);
        }
        .signature-portrait:hover img {
            transform: scale(1.03);
        }

        /* ---- Signature manuscrite flottante : position identique à l'ancienne page,
           en chevauchement sur le bas du portrait ---- */
        .floating-signature {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-top: -210px;
            margin-bottom: 80px;
            padding-right: 10%;
            position: relative;
            z-index: 10;
        }
        .floating-signature img {
            max-width: 220px;
            filter: brightness(0); /* encre noire */
        }
        @media (max-width: 899px) {
            /* Une seule colonne : le texte prend la place du portrait, et le
               chevauchement recouvrait le dernier paragraphe. On le supprime. */
            .floating-signature {
                margin-top: 10px;
                margin-bottom: 50px;
                justify-content: center;
                padding-right: 0;
            }
            .floating-signature img { max-width: 180px; }
        }


/* --- Styles cookies.html --- */
.page-header p { color: var(--stone); }
        .content-section { color: var(--stone); }
        .content-section h2 { color: var(--ink); font-family: var(--font-display); font-weight: 400; font-size: clamp(22px,2.4vw,32px); margin: 44px 0 12px; }
        .content-section h2:first-child { margin-top: 0; }
        .badge-required { background: rgba(15,43,69,.08); color: var(--blue); border: 1px solid rgba(15,43,69,.22); }
        .badge-analytics { background: rgba(15,43,69,.05); color: var(--blue); border: 1px solid rgba(15,43,69,.18); }
        .prefs-block { background: var(--paper-2); border: 1px solid var(--line); padding: 28px; margin: 28px 0; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
        .prefs-block-text { flex: 1; min-width: 220px; }
        .prefs-block-text strong { display: block; color: var(--ink); font-size: .95rem; margin-bottom: 6px; }
        .prefs-block-text p { font-size: .85rem; color: var(--stone); margin: 0; }
        .consent-status { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 600; padding: 4px 12px; border-radius: 20px; margin-top: 10px; }
        .consent-status.accepted { background: rgba(46,125,50,.1); color: #2e7d32; border: 1px solid rgba(46,125,50,.25); }
        .consent-status.declined { background: rgba(178,59,59,.1); color: #b23b3b; border: 1px solid rgba(178,59,59,.25); }
        .consent-status.pending { background: rgba(180,140,20,.12); color: #8a6d1a; border: 1px solid rgba(180,140,20,.25); }
        .info-note { background: var(--paper-2); border-left: 3px solid var(--line); padding: 12px 16px; font-size: .85rem; color: var(--stone); margin: 16px 0; }

/* ==========================================================================
   Menu mobile — style « carte flottante » façon 1600.agency
   Transforme le panneau plein écran en carte arrondie ancrée en haut,
   avec fond de page assombri/flouté, liens gris alignés à gauche,
   pilule de langue et bouton d'action noir pleine largeur.
   Placé en toute fin de fichier pour overrider les règles précédentes.
   ========================================================================== */
@media (max-width: 1279px) {

    /* ---- Fond assombri + flouté derrière la carte ---- */
    body.menu-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(18, 18, 16, 0.28);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        z-index: 60;
        animation: mobileMenuScrim 0.32s var(--ease);
    }
    @keyframes mobileMenuScrim {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* ---- Navbar transparente quand le menu est ouvert (logo + croix flottent
           au-dessus de l'en-tête de la carte) ---- */
    body.menu-open .navbar .nav-container,
    body.menu-open .navbar.scrolled .nav-container {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        /* Surtout ne rien changer à la largeur ici : la contrainte qui s'y
           trouvait déplaçait le bouton de 12 px au moment de l'ouverture, et
           la croix paraissait sauter hors du panneau avant de se replacer. */
    }

    /* ---- La carte du menu ---- */
    .nav-links {
        position: fixed;
        top: 8px;
        left: 12px;
        right: 12px;
        bottom: auto;
        width: auto;
        /* Le panneau suit la largeur de la barre au lieu de se réduire à une
           carte calée à droite : mêmes bords, quelle que soit la taille d'écran. */
        max-width: none;
        margin-left: 0;
        max-height: calc(100vh - 20px);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 66px 22px 22px;
        background: #ffffff;
        border-radius: 26px;
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.20);
        font-size: 18px;
        letter-spacing: normal;
        text-transform: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        /* Ouverture et fermeture sans effet de rebond : un glissement court
           et une courbe régulière. */
        transform: translateY(-14px) scale(0.97);
        transform-origin: top right;
        transition: opacity 0.30s var(--ease),
                    transform 0.30s var(--ease),
                    visibility 0s linear 0.30s;
        z-index: 90;
    }
    .nav-links.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition: opacity 0.30s var(--ease),
                    transform 0.30s var(--ease);
    }

    /* Mouvement réduit : le panneau se contente d'apparaître et de disparaître. */
    @media (prefers-reduced-motion: reduce) {
        .nav-links {
            transition: opacity 0.20s linear,
                        visibility 0s linear 0.20s;
            transform: none;
        }
        .nav-links.active {
            transition: opacity 0.20s linear;
        }
    }

    /* ---- Liens du menu : gris, alignés à gauche, sans-serif ---- */
    .nav-links > li {
        width: 100%;
    }
    .nav-links > li > a:not(.lang-link):not(.btn-primary) {
        font-family: var(--font-main) !important;
        font-weight: 500;
        font-size: 18px;
        line-height: 1.2;
        display: block;
        padding: 12px 2px;
        letter-spacing: 0;
        text-align: left;
        transition: color 0.25s var(--ease);
    }
    /* Force la couleur grise (les liens héritent du blanc de la navbar sombre) */
    .nav-links > li > a:not(.lang-link):not(.btn-primary),
    .nav-links > li > a:not(.lang-link):not(.btn-primary) span {
        color: var(--stone) !important;
    }
    .nav-links > li > a:not(.lang-link):not(.btn-primary):hover,
    .nav-links > li > a:not(.lang-link):not(.btn-primary):hover span {
        color: var(--ink) !important;
    }

    /* ---- Logo + croix restent au-dessus de la carte (en-tête) ---- */
    body.menu-open .logo {
        position: relative;
        z-index: 100;
    }

    /* ---- Pilule de langue ---- */
    .nav-links .mobile-menu-lang {
        margin-top: 14px;
        padding-top: 16px;
        border-top: 1px solid var(--line);
    }
    .nav-links .mobile-menu-lang .lang-switcher {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 1px solid var(--line) !important;
        border-radius: 40px;
        padding: 9px 18px;
    }
    .nav-links .mobile-menu-lang .lang-link {
        font-family: var(--font-main) !important;
        font-size: 13px !important;
        font-weight: 500;
        color: var(--stone) !important;
        opacity: 0.7 !important;
    }
    .nav-links .mobile-menu-lang .lang-link.lang-active {
        color: var(--ink) !important;
        opacity: 1 !important;
    }

    /* ---- Bouton d'action noir pleine largeur ---- */
    .nav-links .mobile-menu-cta {
        margin-top: 14px;
    }
    .nav-links .mobile-menu-cta .btn-primary {
        display: block !important;
        width: 100%;
        text-align: center;
        background: var(--ink) !important;
        color: #ffffff !important;
        border: 1px solid var(--ink) !important;
        border-radius: 40px;
        font-family: var(--font-main) !important;
        font-size: 11px;
        letter-spacing: 0.14em;
        padding: 18px 24px;
        margin-top: 0;
    }
    .nav-links .mobile-menu-cta .btn-primary:hover {
        background: transparent !important;
        color: var(--ink) !important;
    }
}


/* ==========================================================================
   Savoir-faire — index typographique editorial (refonte)
   ========================================================================== */
/* Regroupement en 3 blocs (cœur de métier / renforts / accélérateurs) */
.savoir-index .disc-groups {
    margin-top: clamp(34px, 6vh, 68px);
}
.savoir-index .disc-group + .disc-group {
    margin-top: clamp(34px, 5vh, 60px);
}
/* En-tête de sous-groupe : sur-titre + sous-titre */
.savoir-index .disc-group-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: clamp(6px, 1.4vw, 16px);
}
.savoir-index .disc-group-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--ink);
}

.savoir-index .disc-index {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
}
.savoir-index .disc-row {
    border-bottom: 1px solid var(--line);
    transition: opacity .45s var(--ease);
}

.savoir-index .disc-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "num name go" "num desc go";
    align-items: baseline;
    column-gap: clamp(16px, 3vw, 44px);
    padding: clamp(22px, 3.2vw, 40px) 4px;
    min-height: 72px;
    color: var(--ink);
    text-decoration: none;
    transition: padding-left .45s var(--ease);
}
.savoir-index .disc-num {
    grid-area: num;
    align-self: start;
    font-family: var(--font-main);
    font-weight: 500;
    font-size: clamp(11px, 1vw, 13px);
    letter-spacing: .12em;
    color: var(--blue);
    padding-top: .6em;
    transition: color .45s var(--ease);
}
.savoir-index .disc-name {
    grid-area: name;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.4rem, 4.2vw, 3.15rem);
    line-height: 1.02;
    letter-spacing: -.02em;
    overflow-wrap: break-word;
}
.savoir-index .disc-desc {
    grid-area: desc;
    margin-top: 10px;
    font-family: var(--font-main);
    font-weight: 300;
    font-size: clamp(13px, 1.15vw, 15.5px);
    line-height: 1.55;
    color: var(--stone);
    max-width: 46ch;
}
.savoir-index .disc-go {
    grid-area: go;
    align-self: center;
    font-size: clamp(20px, 2.2vw, 30px);
    line-height: 1;
    color: var(--accent-color);
    transition: transform .45s var(--ease);
}
/* Ligne de sortie + CTA de conversion */
/* Effet projecteur — souris/clavier uniquement */
@media (hover: hover) {
    .savoir-index .disc-index:hover .disc-row:not(:hover) { opacity: .38; }
    .savoir-index .disc-index:focus-within .disc-row:not(:focus-within) { opacity: .38; }
    .savoir-index .disc-link:hover { padding-left: clamp(8px, 1.6vw, 22px); }
    .savoir-index .disc-link:hover .disc-num { color: var(--accent-color); }
    .savoir-index .disc-link:hover .disc-go { transform: translate(4px, -4px); }
}
.savoir-index .disc-link:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
    .savoir-index .disc-row,
    .savoir-index .disc-link,
    .savoir-index .disc-go { transition: none; }
}
@media (max-width: 640px) {
    .savoir-index .disc-name { font-size: clamp(1.9rem, 9vw, 2.6rem); }
    .savoir-index .disc-desc { display: none; } /* mobile : on garde num + nom + fleche, clairs et tap-friendly */
    .savoir-index .disc-link { grid-template-areas: "num name go"; align-items: center; min-height: 64px; }
}

/* Tactile (pas de survol) : effet projecteur pilote par le scroll (JS -> .is-active) */
@media (hover: none) {
    .savoir-index .disc-index.js-spotlight:has(.disc-row.is-active) .disc-row:not(.is-active) {
        opacity: .32;
    }
    .savoir-index .disc-row.is-active .disc-num { color: var(--accent-color); }
    .savoir-index .disc-row.is-active .disc-go { transform: translate(4px, -4px); }
}

/* ==========================================================================
   BOUTIQUE (refonte 2026)
   Ressources numériques & formations — DA éditoriale claire, accent bleu nuit.
   Pensée mobile d'abord : la majorité des acheteurs sont sur téléphone.
   ========================================================================== */

/* --- Héro boutique (fond sombre pour cohérence avec la navbar claire au scroll) --- */
.shop-hero .container { color: #ffffff; }
.shop-hero h1 { color: #ffffff; }
.shop-hero .lead { color: rgba(255, 255, 255, .86); }
.shop-hero .eyebrow { color: rgba(255, 255, 255, .7); }
.shop-hero .eyebrow .num { color: rgba(255, 255, 255, .5); }

/* Rangée d'intro sous le titre : mini-argumentaire + garanties */
.shop-assurances {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-top: 8px;
}
.shop-assurances li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 300;
    color: rgba(255, 255, 255, .82);
}
.shop-assurances li svg { width: 15px; height: 15px; flex: none; opacity: .9; }

/* --- Grille produits : galerie éditoriale en filets fins --- */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.product-card {
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 2.2vw, 32px);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: transparent;
    transition: background .4s var(--ease);
}

@media (hover: hover) {
    .product-card:hover { background: var(--paper-2); }
}

.product-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    margin-bottom: 22px;
    background: var(--placeholder-a);
}
.product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease);
}
@media (hover: hover) {
    .product-card:hover .product-media img { transform: scale(1.045); }
}

/* Couverture typographique — pour un produit sans visuel. Même cadre 4/3 que
   les autres cartes, donc aucun décalage dans la grille. Un cadre composé vaut
   mieux qu'une image d'emprunt ou qu'un carré vide. */
.product-media--texte {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding: 26px;
    text-align: center;
    background: var(--ink);
}

.couverture-titre {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(26px, 2.8vw, 38px);
    line-height: 1.05;
    color: var(--paper);
}

.couverture-mention {
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    line-height: 1.5;
    color: rgba(255, 255, 255, .5);
}

.product-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 6px 11px;
    color: #ffffff;
    background: var(--blue);
}
.product-badge.is-alt { background: rgba(17, 17, 17, .9); }

.product-card h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(20px, 1.7vw, 25px);
    line-height: 1.12;
    letter-spacing: -.01em;
    margin-bottom: 10px;
}

.product-desc {
    margin: 0;
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.65;
    color: var(--stone);
}

/* Corps de la fiche (titre + desc + pied) : occupe la hauteur restante
   pour aligner les prix/boutons entre cartes de la même rangée. */
.product-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-foot {
    margin-top: auto;
    padding-top: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.product-price {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(26px, 2.2vw, 34px);
    line-height: 1;
    color: var(--ink);
    white-space: nowrap;
}
.product-price .cur { font-size: .6em; color: var(--stone); margin-left: 2px; }

.product-foot .btn-primary { padding: 12px 18px; }

/* --- Icône panier dans la navbar (affichée par cart.js dès 1 article) --- */
.cart-nav-item { display: none; }
.cart-nav-item > a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    color: #ffffff !important;
    transition: border-color .5s var(--ease), color .5s var(--ease), background .3s var(--ease);
}
.cart-nav-item > a:hover { background: rgba(255, 255, 255, .1); }
.navbar.scrolled .cart-nav-item > a {
    border-color: var(--line);
    color: var(--ink) !important;
}
.navbar.scrolled .cart-nav-item > a:hover { background: var(--paper-2); }
.cart-nav-item svg { width: 18px; height: 18px; }
.cart-nav-item .snipcart-items-count {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 100px;
    background: var(--blue);
    color: #ffffff;
    font-family: var(--font-main);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}

/* --- Tiroir panier (généré par cart.js) --- */
.custom-cart-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    justify-content: flex-end;
    background: rgba(12, 12, 11, .42);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s var(--ease), visibility .4s var(--ease);
}
.custom-cart-overlay.active { opacity: 1; visibility: visible; }

.cart-drawer {
    width: min(430px, 92vw);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    box-shadow: -24px 0 60px rgba(0, 0, 0, .16);
    transform: translateX(100%);
    transition: transform .5s var(--ease);
}
.custom-cart-overlay.active .cart-drawer { transform: none; }

.cart-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px clamp(20px, 4vw, 30px);
    border-bottom: 1px solid var(--line);
}
.cart-drawer-header h2 { font-family: var(--font-display); font-weight: 400; font-size: 26px; }
.cart-drawer-close {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--stone);
    font-size: 24px;
    line-height: 1;
    transition: color .3s var(--ease), background .3s var(--ease);
}
.cart-drawer-close:hover { color: var(--ink); background: var(--paper-2); }

.cart-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 4px clamp(20px, 4vw, 30px);
}
.empty-cart {
    padding: 64px 0;
    text-align: center;
    font-weight: 300;
    color: var(--stone);
}

.cart-drawer-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 16px;
    align-items: start;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}
.cart-drawer-item img { width: 64px; height: 64px; object-fit: cover; }
/* Repli pour un produit sans visuel : même encombrement que la vignette,
   donc aucun décalage dans le panier. */
.cart-drawer-item-vignette {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--paper);
    background: var(--ink);
}
.cart-drawer-item-info h4 {
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: .01em;
    margin: 0 0 6px;
}
.cart-drawer-item-price { font-family: var(--font-display); font-size: 18px; color: var(--ink); }
.cart-drawer-item-controls {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    border: 1px solid var(--line);
    border-radius: 100px;
}
.cart-drawer-item-controls button {
    width: 28px;
    height: 26px;
    border: none;
    background: none;
    color: var(--ink);
    font-size: 15px;
    line-height: 1;
}
.cart-drawer-item-controls span { min-width: 26px; text-align: center; font-size: 13px; }
.cart-drawer-item-remove {
    align-self: start;
    width: 26px;
    height: 26px;
    border: none;
    background: none;
    color: var(--stone);
    font-size: 18px;
    line-height: 1;
    transition: color .3s var(--ease);
}
.cart-drawer-item-remove:hover { color: #b23b3b; }

.cart-drawer-footer {
    padding: 20px clamp(20px, 4vw, 30px) clamp(22px, 4vw, 30px);
    border-top: 1px solid var(--line);
}
.cart-drawer-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
}
.cart-drawer-total span:first-child {
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--stone);
}
.cart-drawer-total span:last-child { font-family: var(--font-display); font-size: 28px; color: var(--ink); }
.cart-drawer-checkout { display: block; width: 100%; text-align: center; }

/* --- Modale « produit ajouté » (statique dans la page) --- */
.cart-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(12, 12, 11, .5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.cart-modal-overlay.active { opacity: 1; visibility: visible; }
.cart-modal {
    width: min(400px, 100%);
    padding: clamp(28px, 5vw, 40px);
    text-align: center;
    background: var(--paper);
    border: 1px solid var(--line);
    transform: translateY(14px) scale(.98);
    transition: transform .4s var(--ease);
}
.cart-modal-overlay.active .cart-modal { transform: none; }
.cart-modal-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--blue);
}
.cart-modal-icon svg { width: 24px; height: 24px; }
.cart-modal h3 { font-family: var(--font-display); font-weight: 400; font-size: 28px; margin-bottom: 8px; }
.cart-modal p { font-size: 14px; font-weight: 300; color: var(--stone); margin-bottom: 24px; }
.cart-modal-buttons { display: flex; flex-direction: column; gap: 10px; }
.cart-modal-btn {
    display: block;
    width: 100%;
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 14px 22px;
    border: 1px solid var(--ink);
    transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.cart-modal-btn.primary { background: var(--ink); color: var(--paper); }
.cart-modal-btn.primary:hover { background: var(--paper); color: var(--ink); }
.cart-modal-btn.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.cart-modal-btn.secondary:hover { border-color: var(--ink); }

/* --- Pages de résultat de paiement (validé / annulé) --- */
.checkout-result {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(40px, 8vh, 100px) 0;
    text-align: center;
}
.checkout-result .container {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
/* Le fichier « LOGO NOIR.png » est en réalité clair : on le passe en noir
   pour l'afficher sur le fond papier (même principe que la navbar au scroll). */
/* Fichier déjà bleu : plus de filtre, sinon il serait écrasé en noir. */
.checkout-logo { height: 40px; width: auto; margin-bottom: 8px; }
.checkout-status-icon {
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--line);
}
.checkout-status-icon svg { width: 30px; height: 30px; }
.checkout-status-icon.ok { color: #2e7d32; }
.checkout-status-icon.ko { color: #b23b3b; }
.checkout-result h1 {
    font-size: clamp(34px, 5.2vw, 62px);
    line-height: 1.02;
    letter-spacing: -.02em;
}
.checkout-result .lead {
    margin: 0;
    max-width: 54ch;
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: 300;
    line-height: 1.65;
    color: var(--stone);
}
.checkout-result .fine { font-size: 12.5px; color: var(--stone); }
.downloads-container {
    display: none;
    width: 100%;
    max-width: 560px;
    margin: 8px auto 0;
    text-align: left;
    border: 1px solid var(--line);
}
.downloads-container h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 22px;
    padding: 20px clamp(18px, 4vw, 26px);
    border-bottom: 1px solid var(--line);
}
.download-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px clamp(18px, 4vw, 26px);
    border-bottom: 1px solid var(--line);
}
.download-item:last-child { border-bottom: none; }
.download-name { font-size: 14px; font-weight: 400; }
.download-loading { font-weight: 300; font-style: italic; color: var(--stone); }
.download-btn {
    flex: none;
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 10px 16px;
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
    transition: background .3s var(--ease), color .3s var(--ease);
}
.download-btn:hover { background: var(--paper); color: var(--ink); }

/* --------------------------------------------------------------------------
   Boutique — Responsive (téléphone : priorité absolue)
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
    /* Grille : une colonne, cartes en « fiches » nettes avec coins doux */
    .shop-grid {
        grid-template-columns: 1fr;
        border-left: none;
        border-top: none;
        gap: 16px;
    }
    .product-card {
        border: 1px solid var(--line);
        border-radius: 12px;
        overflow: hidden;
        padding: 0;
        background: #ffffff;
    }
    @media (hover: hover) {
        .product-card:hover { background: #ffffff; }
    }
    .product-media { margin-bottom: 0; aspect-ratio: 16 / 10; }
    .product-body {
        display: flex;
        flex-direction: column;
        padding: 20px 20px 22px;
    }
    .product-foot {
        padding-top: 18px;
        margin-top: 16px;
        border-top: 1px solid var(--line);
    }
    .product-foot .btn-primary { padding: 13px 18px; }
    .shop-assurances { gap: 8px 20px; }

    /* Tiroir panier plein écran sur petit mobile */
    .cart-drawer { width: 100%; }

    /* Cibles tactiles ≥44px pour la gestion des quantités (étape d'achat critique) */
    .cart-drawer-item { grid-template-columns: 72px 1fr auto; gap: 18px; }
    .cart-drawer-item img,
    .cart-drawer-item-vignette { width: 72px; height: 72px; flex-basis: 72px; }
    .cart-drawer-item-controls { margin-top: 12px; }
    .cart-drawer-item-controls button { width: 46px; height: 44px; font-size: 18px; }
    .cart-drawer-item-controls span { min-width: 40px; font-size: 15px; }
    .cart-drawer-item-remove { width: 44px; height: 44px; font-size: 22px; margin: -8px -10px 0 0; }
}

@media (max-width: 400px) {
    .product-foot { flex-direction: column; align-items: stretch; gap: 14px; }
    .product-foot .btn-primary { width: 100%; text-align: center; }
    .product-price { font-size: 30px; }
}

/* Nav à 6 entrées (ajout « Boutique ») : le tag de marque ne s'affiche que sur
   les larges écrans, sinon il pousse les liens et chevauche le bloc de droite. */
@media (max-width: 1340px) {
    .brand-tag { display: none !important; }
}

/* --------------------------------------------------------------------------
   Témoignages clients (index) — défilé auto sur 2 rangées (style 1600.agency)
   -------------------------------------------------------------------------- */
/* Conteneur pleine largeur, dégradés d'estompe sur les bords gauche/droit */
/* --------------------------------------------------------------------------
   FAQ — le O pointillé incrusté derrière les questions
   La liste des questions n'occupe que les deux tiers gauche de la section :
   477 px de colonne restent vides à droite, la seule vraie réserve d'espace
   de la page. Le O s'y loge, ancré dans le COIN BAS-DROITE et coupé par les
   deux bords à la fois : ne monte dans la page que l'arc supérieur gauche,
   comme un arrondi qui remonte du coin.
   background-size: 100% auto rend la largeur de l'image égale à celle du
   bloc ; les décalages, exprimés en pourcentage de cette largeur, retranchent
   donc une part connue du dessin de chaque côté.
   Il répond au V, posé à gauche dans les témoignages juste au-dessus : la
   page se referme sur les deux signes de la marque, un de chaque côté.
   -------------------------------------------------------------------------- */
#faq {
    position: relative;
}

#faq::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: clamp(300px, 40vw, 580px);
    aspect-ratio: 560 / 573;
    z-index: -1;
    pointer-events: none;
    /* Même traitement que le V : le bleu du logo se désature en s'éclaircissant,
       on lui rend sa vivacité avant de l'estomper. */
    opacity: .30;
    filter: saturate(2);
    background-image: url("../img/marque/o-points-bleu.webp");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: right -22% bottom -26%;
    /* Le masque s'ouvre depuis le coin bas-droite : le sigle est franc près du
       bord et se dissout en remontant vers le texte. */
    -webkit-mask-image: radial-gradient(98% 94% at 84% 86%, #000 0%, #000 36%, transparent 82%);
    mask-image: radial-gradient(98% 94% at 84% 86%, #000 0%, #000 36%, transparent 82%);
}

@media (max-width: 720px) {
    #faq::before {
        /* Sur téléphone la liste occupe toute la largeur : le O passerait sous
           les questions. On le pousse plus loin dans le coin et on l'allège. */
        width: clamp(230px, 64vw, 320px);
        background-position: right -34% bottom -32%;
        opacity: .24;
    }
}

/* --------------------------------------------------------------------------
   Témoignages — le V de la marque incrusté derrière les avis
   Le sigle est volontairement HORS CADRE à gauche : on n'en voit que la
   naissance d'une branche et l'autre qui s'échappe. Le recadrage se fait par
   background-position, dont l'offset négatif sort l'image du bloc — inutile
   de poser un overflow: hidden sur la section, qui rognerait aussi les
   animations d'apparition.
   Un masque radial le dissout vers la droite et vers les bords : le sigle
   n'a aucun contour net, il s'éteint dans le papier.
   z-index négatif : il passe sous le titre et sous les cartes, qui semblent
   alors posées dessus. Le fond du body étant reporté sur le canevas du
   navigateur, le sigle s'intercale entre les deux et ne masque aucun texte.
   -------------------------------------------------------------------------- */
#temoignages {
    position: relative;
}

#temoignages::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: clamp(360px, 52vw, 860px);
    z-index: -1;
    pointer-events: none;
    /* Mélangé au papier, le bleu du logo vire au gris : c'est une couleur
       sombre et peu chromatique, et l'éclaircir la désature. On lui rend donc
       sa saturation avant de l'estomper — la teinte ne change pas, seule sa
       vivacité est rendue. Sans ce filtre il faudrait doubler l'opacité pour
       obtenir la même lecture du pétrole, et le sigle deviendrait lourd. */
    opacity: .30;
    filter: saturate(2);
    background-image: url("../img/marque/v-bleu.png");
    background-repeat: no-repeat;
    /* Décalage négatif : la branche gauche sort du bloc et se trouve coupée
       par le bord de l'écran. Ne reste que sa naissance, et la branche droite
       qui redescend jusqu'à la pointe, sous la seconde rangée. */
    background-position: left -30% top 48%;
    background-size: auto clamp(520px, 74vh, 960px);
    -webkit-mask-image: radial-gradient(96% 86% at 22% 50%, #000 0%, #000 38%, transparent 82%);
    mask-image: radial-gradient(96% 86% at 22% 50%, #000 0%, #000 38%, transparent 82%);
}

@media (max-width: 720px) {
    /* Le sigle remonte au-dessus de la section : le filet qui sépare
       l'accompagnement des témoignages le traverserait de part en part. On le
       retire — sur téléphone seulement, là où le sigle passe. Sur ordinateur
       il ne franchit aucune jointure, le filet y reste. */
    #approche {
        border-bottom: none;
    }

    #temoignages::before {
        /* Sur téléphone les cartes occupent toute la largeur : posé au milieu
           de la section, le V disparaissait derrière elles et ne se lisait plus.
           Les bandes libres mesurées valent 139 px en haut, 14 px entre les
           rangées, 69 px en bas — aucune n'accueille un sigle lisible.
           On le remonte donc au-dessus de la section, dans le creux du bas de
           l'accompagnement : le z-index négatif le fait passer derrière tout,
           il ne recouvre rien. Les deux branches et la pointe redeviennent
           visibles, et le masque éteint son sommet avant le texte du dessus.
           Cadrage : background-size auto 100% cale la hauteur de l'image sur
           celle du bloc ; « left -12 % » ne retranche qu'un huitième du sigle
           au lieu du tiers précédent. */
        top: -38px;
        bottom: auto;
        height: 232px;
        width: clamp(240px, 72vw, 300px);
        background-size: auto 100%;
        background-position: left -12% top 0;
        opacity: .28;
        -webkit-mask-image: radial-gradient(94% 86% at 44% 60%, #000 0%, #000 40%, transparent 86%);
        mask-image: radial-gradient(94% 86% at 44% 60%, #000 0%, #000 40%, transparent 86%);
    }
}

.tml-marquee {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.4vw, 20px);
    margin-top: clamp(24px, 3vw, 40px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.tml-row {
    overflow: hidden;
}

.tml-track {
    display: flex;
    gap: clamp(14px, 1.4vw, 20px);
    width: max-content;
    animation: tmlscroll 60s linear infinite;
}

/* Boucle sans couture : le jeu de cartes est dupliqué par le script,
   -50 % ramène pile au début du second jeu. */
@keyframes tmlscroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Pause au survol de tout le défilé */
.tml-marquee:hover .tml-track {
    animation-play-state: paused;
}

/* Carte : fond blanc, coins arrondis, alignée verticalement (avis en haut,
   auteur collé en bas comme sur 1600.agency) */
.tml-card {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: clamp(260px, 24vw, 320px);
    margin: 0;
    padding: 24px;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 16px;
}

.tml-stars {
    font-size: 15px;
    letter-spacing: 2px;
    line-height: 1;
    color: #ff8e61;
}

.tml-quote {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.45;
    color: #515151;
}

/* Bloc auteur en bas : avatar rond + nom + poste */
.tml-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: auto 0 0;
}

/* Avatar : pastille à initiales tant qu'aucune photo n'est fournie.
   À remplacer par <img class="tml-avatar" ...> à la livraison du contenu. */
.tml-avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: grid;
    place-items: center;
    background: var(--sky);
    color: var(--blue);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .02em;
}

.tml-id {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.tml-name {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

.tml-role {
    font-size: 13px;
    font-weight: 500;
    color: #a9a9a9;
}

/* Placeholder de validation (à retirer avec le vrai contenu) */
.tml-card.is-placeholder {
    border-style: dashed;
}

/* Respect de la préférence « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
    .tml-track {
        animation: none;
    }

    .tml-row {
        overflow-x: auto;
    }
}

/* Mobile : cartes un peu plus étroites, défilé un peu plus rapide */
@media (max-width: 640px) {
    .tml-card {
        width: 78vw;
        max-width: 320px;
    }

    .tml-track {
        animation-duration: 45s;
    }
}

/* --------------------------------------------------------------------------
   Ancrage de prix (pages univers) — montants injectés par pricing.js
   -------------------------------------------------------------------------- */
.pricing-anchor {
    margin: clamp(28px, 5vh, 56px) 0 0;
    padding: 18px 22px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.pricing-anchor p {
    margin: 0;
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.5;
    color: var(--ink);
}

.pricing-anchor strong {
    color: var(--blue);
    font-weight: 600;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   26. Journal (index & articles)
   Reprend strictement les jetons de la DA : --paper / --ink / --stone /
   --line / --blue. Aucune couleur nouvelle.
   -------------------------------------------------------------------------- */

/* --- Bandeau d'en-tête sombre (la navbar est claire tant que la page n'est
       pas défilée : même parti pris que les pages Expertises) --- */
.journal-head {
    /* Même langage que les autres fonds : un halo posé sur le dégradé, pour
       que l'en-tête ait de la profondeur plutôt qu'un aplat en biais. */
    background:
        radial-gradient(88% 118% at 12% -14%, rgba(28, 74, 116, .58) 0%, rgba(15, 43, 69, 0) 60%),
        linear-gradient(160deg, #0f2b45 0%, #0a0a09 100%);
    border-bottom: none;
    color: #ffffff;
}

.journal-head h1 {
    color: #ffffff;
}

.journal-head > .container > p {
    color: rgba(255, 255, 255, .82);
}

.journal-head .eyebrow,
.journal-head .eyebrow .num {
    color: rgba(255, 255, 255, .6);
}

.journal-head .journal-breadcrumb a,
.journal-head .journal-byline a {
    color: rgba(255, 255, 255, .82);
    border-color: rgba(255, 255, 255, .28);
}

.journal-head .journal-breadcrumb a:hover,
.journal-head .journal-byline a:hover {
    color: #ffffff;
    border-color: #ffffff;
}

.journal-head .journal-byline {
    color: rgba(255, 255, 255, .6);
}

/* --- Fil d'Ariane + signature d'article --- */
.journal-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: .6em;
    align-items: baseline;
}

.journal-breadcrumb a:hover {
    color: var(--ink);
}

.journal-byline {
    margin: 4px 0 0;
    font-size: 13px;
    font-weight: 300;
    color: var(--stone);
}

.journal-byline a {
    border-bottom: 1px solid var(--line);
}

.journal-byline a:hover {
    color: var(--ink);
    border-color: var(--ink);
}

/* --- Mise en page d'un article : colonne latérale + corps --- */
.journal-layout {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: clamp(30px, 5vw, 74px);
    align-items: start;
}

.journal-aside {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vh, 34px);
    position: sticky;
    top: calc(var(--header-h) + 26px);
}

/* --- « En bref » --- */
.journal-brief {
    padding: clamp(20px, 2.4vw, 28px);
    background: var(--blue);
    color: var(--sky);
}

.journal-brief .eyebrow {
    color: rgba(219, 230, 239, .7);
}

.journal-brief ul {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 16px 0 0;
}

.journal-brief li {
    position: relative;
    padding-left: 18px;
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.65;
}

.journal-brief li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 8px;
    height: 1px;
    background: currentColor;
    opacity: .6;
}

/* --- Sommaire --- */
.journal-toc {
    border-top: 1px solid var(--line);
    padding-top: 18px;
}

.journal-toc ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 0 0;
    counter-reset: toc;
}

.journal-toc li {
    counter-increment: toc;
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.5;
}

.journal-toc li::before {
    content: counter(toc, decimal-leading-zero);
    margin-right: 10px;
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 9.5px;
    letter-spacing: .12em;
    color: var(--stone);
}

.journal-toc a:hover {
    color: var(--stone);
}

/* --- Corps de l'article (hérite de .prose) --- */
.journal-article {
    max-width: 68ch;
    margin: 0;
}

.journal-article > h2:first-child {
    margin-top: 0;
}

.journal-article h2 {
    padding-top: 8px;
    scroll-margin-top: calc(var(--header-h) + 24px);
}

.journal-article a:hover {
    color: var(--stone);
}

/* --- Questions fréquentes --- */
.journal-faq {
    max-width: 860px;
    border-top: 1px solid var(--line);
}

.journal-faq .faq-item {
    border-bottom: 1px solid var(--line);
}

.journal-faq .faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding: 20px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: clamp(18px, 1.8vw, 23px);
    line-height: 1.25;
    transition: color .3s var(--ease);
}

/* La question de FAQ est passée en <h3> pour qu'un extracteur l'apparie à sa
   réponse. La règle de base h1..h4 lui appliquerait sa propre typographie :
   on la neutralise, le rendu doit rester celui du <summary>. */
.journal-faq .faq-item summary .faq-q {
    font: inherit;
    letter-spacing: inherit;
    text-wrap: inherit;
    margin: 0;
    color: inherit;
}

.journal-faq .faq-item summary::-webkit-details-marker {
    display: none;
}

.journal-faq .faq-item summary:hover {
    color: var(--stone);
}

.journal-faq .faq-item summary::after {
    content: "+";
    flex: none;
    font-family: var(--font-main);
    font-weight: 300;
    font-size: 20px;
    line-height: 1;
    color: var(--blue);
    transition: transform .4s var(--ease);
}

.journal-faq .faq-item[open] summary::after {
    transform: rotate(45deg);
}

.journal-faq .faq-item p {
    margin: 0 0 22px;
    max-width: 62ch;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.8;
    color: #3a3a37;
}

/* --- Encadré auteur --- */
.author-box {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
    padding-top: clamp(20px, 3vh, 30px);
    border-top: 1px solid var(--line);
    max-width: 860px;
}

.author-box .author-portrait {
    width: 132px;
    height: 132px;
    object-fit: cover;
    border-radius: 50%;
}

.author-box h2 {
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.05;
    margin: 10px 0 12px;
}

.author-box p {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--stone);
    max-width: 56ch;
}

.author-box .journal-links {
    display: flex;
    gap: 18px;
    margin: 0;
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 9.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink);
}

.author-box .journal-links a {
    border-bottom: 1px solid var(--line);
    padding-bottom: 3px;
}

.author-box .journal-links a:hover {
    border-color: var(--ink);
}

/* --- Grille d'articles --- */
.journal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: clamp(20px, 2.6vw, 38px);
}

.journal-card {
    display: flex;
    flex-direction: column;
    color: var(--ink);
}

.journal-card[hidden] {
    display: none;
}

.journal-card .media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--placeholder-a);
}

.journal-card .media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease);
}

.journal-card:hover .media img {
    transform: scale(1.045);
}

.journal-card .journal-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.journal-card h2 {
    margin: 0;
    font-size: clamp(19px, 1.7vw, 25px);
    line-height: 1.16;
    transition: color .3s var(--ease);
}

.journal-card:hover h2 {
    color: var(--stone);
}

.journal-card p {
    margin: 0;
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--stone);
}

.journal-card .journal-card-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    margin-top: 2px;
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--stone);
}

.journal-empty {
    margin: clamp(30px, 5vh, 60px) 0 0;
    font-size: 15px;
    font-weight: 300;
    color: var(--stone);
}

/* --- Responsive --- */
@media (max-width: 960px) {
    .journal-layout {
        grid-template-columns: 1fr;
        gap: clamp(26px, 4vh, 40px);
    }

    .journal-aside {
        position: static;
        top: auto;
    }

    .journal-article {
        max-width: none;
    }
}

@media (max-width: 560px) {
    .author-box {
        grid-template-columns: 1fr;
    }

    .author-box .author-portrait {
        width: 108px;
        height: 108px;
    }
}

/* Le titre de la page Signature est le logo lui-même : le h1 l'enveloppe sans
   rien changer visuellement (marges et interlignage neutralisés). */
.hero-small h1.sig-title {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin: 0;
    line-height: 0;
}

/* --------------------------------------------------------------------------
   Compagnon des attributs width/height posés sur les <img>.
   Ces attributs servent au navigateur à réserver la place avant chargement
   (suppression du décalage de mise en page). Ils ne doivent pas devenir des
   dimensions imposées : dès qu'une seule dimension est fixée par le CSS,
   l'autre reste déduite du ratio. Toute règle de classe qui fixe une hauteur
   l'emporte sur celle-ci, sa spécificité étant plus forte.
   -------------------------------------------------------------------------- */
img {
    height: auto;
}

/* Ce logo ne fixe que sa hauteur : sans width auto, l'attribut width le
   étirerait sur toute la largeur du pied de page. */
.footer-main-logo {
    width: auto;
}

/* --------------------------------------------------------------------------
   Intro — repli quand la vidéo ne peut pas démarrer.
   En mode économie d'énergie, Safari et Chrome refusent la lecture automatique
   des vidéos, y compris muettes : aucun code de page ne peut passer outre.
   On joue alors cette ouverture en CSS, pour que l'entrée reste la même.
   -------------------------------------------------------------------------- */
@keyframes intro-mark {
    /* l'inversion est reprise dans chaque étape : une animation de `filter`
       remplace la propriété entière, elle effacerait le brightness/invert. */
    0%   { opacity: 0; transform: scale(.94); filter: brightness(0) invert(1) blur(8px); }
    55%  { opacity: 1; transform: scale(1);   filter: brightness(0) invert(1) blur(0); }
    100% { opacity: 1; transform: scale(1);   filter: brightness(0) invert(1) blur(0); }
}

/* Mouvement réduit : l'ouverture reste visible, mais en fondu seul. */
@media (prefers-reduced-motion: reduce) {
@keyframes intro-mark-soft {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}


/* --------------------------------------------------------------------------
   27. Aperçu (accueil) — deux films, deux photographies
   Les films partagent le même format 16/10. Les photographies, non : un
   paysage 3/2 et un portrait 9/16 n'entrent pas dans la même vignette. Enfermé
   dans un 16/10, le portrait ne montrait qu'un tiers de sa hauteur et la tête
   de l'homme debout sortait du cadre. La grille passe donc à douze colonnes :
   chaque photographie reçoit la largeur de son propre cadrage, et les deux
   gardent la même hauteur pour que la ligne reste alignée.
   -------------------------------------------------------------------------- */
.apercu-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 26px);
    margin-top: clamp(28px, 4vw, 48px);
}

/* Les deux films : une demi-largeur chacun, comme avant. */
.apercu-item {
    grid-column: span 6;
}

.apercu-item--paysage {
    grid-column: span 8;
}

.apercu-item--portrait {
    grid-column: span 4;
}

.apercu-item .media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--placeholder-a, #e6e4df);
}

/* Hauteur commune aux deux photographies : c'est elle qui aligne la ligne,
   la largeur venant des colonnes. Cette règle doit suivre celle du dessus :
   à spécificité égale, c'est l'ordre du fichier qui tranche, et le 16/10
   l'emportait — la vignette prenait alors 1,6 fois sa hauteur en largeur et
   sortait de la page. */
.apercu-item--photo .media {
    aspect-ratio: auto;
    height: clamp(340px, 42vw, 600px);
}

.apercu-item .media iframe,
.apercu-item .media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    display: block;
}

/* Le portrait ne perd plus qu'un cinquième de sa hauteur : on répartit cette
   perte entre le plafond et le sol plutôt que de la prendre en haut, où se
   trouve le visage de l'homme debout. */
.apercu-item--portrait .media img {
    object-position: center 42%;
}

.apercu-item .media img {
    transition: transform .8s var(--ease);
}

.apercu-item:hover .media img {
    transform: scale(1.04);
}

.apercu-legende {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding-top: 12px;
}

.apercu-legende h3 {
    margin: 0;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    font-weight: 500;
}

.apercu-legende .category {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--stone);
}

/* Une paire de portraits partage une seule vignette. Deux images côte à côte
   occupent la moitié de la hauteur qu'un portrait seul prendrait, ce qui évite
   qu'une photo verticale écrase la grille sur téléphone. */

/* Téléphone : une vignette par ligne. Les films gardent leur format ; les
   photographies reprennent le leur, sans recadrage — un portrait reste un
   portrait, un paysage reste un paysage. */
@media (max-width: 700px) {
    .apercu-grid {
        grid-template-columns: 1fr;
        gap: clamp(16px, 3.5vw, 22px);
    }

    /* Une vignette par ligne : les largeurs de la grille à douze colonnes
       n'ont plus cours, sinon elles créeraient des colonnes fantômes. */
    .apercu-item,
    .apercu-item--paysage,
    .apercu-item--portrait {
        grid-column: auto;
    }

    .apercu-item--photo .media {
        aspect-ratio: auto;
        /* La hauteur commune du bureau cède : chaque photographie reprend son
           propre format, sans recadrage. */
        height: auto;
    }

    .apercu-item--photo .media img {
        position: static;
        width: 100%;
        height: auto;
        object-fit: fill;
    }

    .apercu-legende {
        padding-top: 10px;
    }
}

/* --------------------------------------------------------------------------
   28. Bandeau de photographies défilantes (portfolio)
   La piste contient deux fois la même série : la translation de -50 % boucle
   donc sans saut. Au survol le défilement s'arrête ; en mouvement réduit il
   ne démarre pas et le bandeau se parcourt à la main.
   -------------------------------------------------------------------------- */
.photo-strip {
    margin-top: clamp(26px, 3.5vw, 44px);
}

.photo-strip-legende {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--stone);
    margin: 0 0 14px;
}

/* Invitation à balayer. Sur un écran tactile le bandeau est un carrousel,
   mais rien ne l'indiquait : les visiteurs le prenaient pour une image fixe.
   Elle n'apparaît donc que là où le geste existe, et s'efface au premier
   balayage — une fois le geste compris, le rappel n'a plus lieu d'être. */
.photo-strip-balayer {
    display: none;
    align-items: center;
    gap: 8px;
    flex: none;
    font-size: 10px;
    letter-spacing: .18em;
    color: var(--stone);
    transition: opacity .3s var(--ease);
}

.photo-strip-balayer svg {
    animation: photo-strip-invite 1.8s var(--ease) infinite;
}

@keyframes photo-strip-invite {
    0%, 100% { transform: translateX(0);   opacity: .55; }
    50%      { transform: translateX(5px); opacity: 1; }
}

@media (hover: none) {
    .photo-strip-balayer {
        display: inline-flex;
    }
}

.photo-strip.est-balaye .photo-strip-balayer {
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .photo-strip-balayer svg {
        animation: none;
    }
}

.photo-strip-fenetre {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.photo-strip-piste {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.4vw, 18px);
    width: max-content;
    animation: photo-strip-defile 46s linear infinite;
}

.photo-strip-fenetre:hover .photo-strip-piste,
.photo-strip-fenetre:focus-within .photo-strip-piste {
    animation-play-state: paused;
}

.photo-strip-piste img {
    height: clamp(170px, 21vw, 250px);
    width: auto;
    display: block;
    object-fit: cover;
    flex: 0 0 auto;
}

@keyframes photo-strip-defile {
    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .photo-strip-fenetre {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .photo-strip-piste {
        animation: none;
    }
}

/* Tactile : on ne fait pas tourner une animation en continu sur un téléphone.
   Le bandeau devient un carrousel qu'on balaie, et la série dupliquée — qui
   n'existait que pour boucler — est retirée. */
@media (hover: none) {
    .photo-strip-fenetre {
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .photo-strip-fenetre::-webkit-scrollbar {
        display: none;
    }

    .photo-strip-piste {
        animation: none;
        padding-right: var(--pad-x, 20px);
    }

    .photo-strip-piste img {
        height: clamp(200px, 52vw, 260px);
        scroll-snap-align: start;
    }

    .photo-strip-piste img[aria-hidden="true"] {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Invitation à faire défiler, sur le bandeau d'accueil
   En arrivant sur le site, rien ne disait que la page continuait : les
   visiteurs regardaient la vidéo en entier ou appuyaient sur un bouton, alors
   que le bandeau n'est qu'une accroche. D'où ce repère, discret mais posé
   dans l'axe du regard, en bas et au centre.
   Un trait qui descend plutôt qu'une flèche clignotante : le mouvement se
   remarque du coin de l'oeil sans réclamer l'attention. Il s'efface dès que
   la page bouge — une fois le geste fait, le rappel n'a plus lieu d'être.
   -------------------------------------------------------------------------- */
.hero-scroll {
    position: absolute;
    left: 50%;
    bottom: clamp(18px, 3.5vh, 34px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 6;
    text-decoration: none;
    opacity: .78;
    transition: opacity .45s var(--ease), transform .45s var(--ease);
}

.hero-scroll:hover {
    opacity: 1;
}

.hero-scroll-mot {
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 9.5px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #ffffff;
}

/* Le trait est le rail ; c'est son reflet, en ::after, qui descend. */
.hero-scroll-trait {
    position: relative;
    display: block;
    width: 1px;
    height: clamp(28px, 4vh, 38px);
    overflow: hidden;
    background: rgba(255, 255, 255, .28);
}

.hero-scroll-trait::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 14px;
    background: #ffffff;
    animation: hero-scroll-descend 2.1s var(--ease) infinite;
}

@keyframes hero-scroll-descend {
    0%        { transform: translateY(-16px); opacity: 0; }
    28%, 62%  { opacity: 1; }
    100%      { transform: translateY(40px);  opacity: 0; }
}

/* Une fois la page défilée, le repère s'efface et cesse de capter les clics. */
body.a-defile .hero-scroll {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
    pointer-events: none;
}

/* Pendant l'animation d'introduction, il n'a rien à faire là. */
@media (prefers-reduced-motion: reduce) {
    .hero-scroll-trait::after {
        animation: none;
        height: 38px;
        opacity: .85;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Touches vivantes — reflets et points bleus
   Cinq moments, pas un système. Le bleu apparaît là où il dit quelque chose :
   une horloge qui bat, une ligne qu'on survole, un mot qu'on éclaire.
   Bloc placé en fin de fichier : plusieurs de ces règles ne posent qu'une
   propriété et doivent passer après les raccourcis qui les précèdent.
   -------------------------------------------------------------------------- */

/* Le bleu du logo, allumé : même teinte (209°) et même saturation que
   #0f2b45, montée à 55 % de clarté. Deux emplois, pour la même raison — le
   bleu profond ne tient pas hors de sa plage : sur fond noir il ne se voit
   pas (1,25:1 contre la bande d'heures), et dilué sur le papier il vire au
   gris. Ce jeton sert donc aux lueurs et aux voiles ; le texte et les traits
   restent en --blue. */
:root {
    --bleu-lueur: 67, 143, 214;
}

@keyframes battement {
    0%, 100% { opacity: .32; transform: scale(.8); }
    50%      { opacity: 1;   transform: scale(1); }
}

/* 3 — Le mot de la marque reçoit une lueur bleue au pied de page. */
.footer-top {
    position: relative;
}

.footer-top::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(620px, 96%);
    height: 260px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%,
        rgba(var(--bleu-lueur), .20) 0%,
        rgba(var(--bleu-lueur), 0) 70%);
}

/* Le lien passe en position relative pour peindre au-dessus de la lueur : à
   z-index égal, c'est l'ordre du document qui tranche et le ::before vient
   avant. Sans cela le mot se lirait à travers un voile bleu. */
.footer-logo-link {
    position: relative;
}

/* 4 — Un point ouvre chaque surtitre. currentColor plutôt qu'une couleur
   fixe : sur les en-têtes sombres le surtitre est blanc, le point suit sans
   qu'il faille une seconde règle. */
.eyebrow::before {
    content: "";
    flex: none;
    align-self: center;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
}

/* 5 — Le seul aplat bleu de l'accueil : le bouton de l'accompagnement, dans
   la section qui s'allume déjà en bleu au défilement. */
.approach-aside .btn-primary {
    background: var(--blue);
    border-color: var(--blue);
}

.approach-aside .btn-primary:hover {
    background: transparent;
    color: var(--blue);
    border-color: var(--blue);
}

@media (prefers-reduced-motion: reduce) {
    }


/* ==========================================================================
   CURSEUR — repris de assets/css/mouse-follower.css, fusionné ici le
   27/08/2026. Deux feuilles, c'était deux requêtes bloquant le rendu, et la
   seconde ne pesait que 3 ko pour 304 ms perdus — mesuré. Le contenu est
   inchangé, en-tête de licence comprise.
   ========================================================================== */

/* ===========================================================================
   CURSEUR — feuille officielle de Cuberto Mouse Follower
   (npm mouse-follower@1.1.2, MIT, github.com/Cuberto/mouse-follower)
   Licence complète : assets/vendor/mouse-follower.LICENSE.txt

   Reprise telle quelle depuis dist/mouse-follower.min.css, seul le préfixe
   de classe passant de « mf- » à « cb- » pour coller au JS vendu.
   NE PAS RÉÉCRIRE À LA MAIN : le point visible est .cb-cursor:before, pas
   un élément intérieur. Le JS pose rotate()+scale() sur .cb-cursor, donc
   c'est le :before qui se déforme avec la vitesse ; .cb-cursor-inner ne
   reçoit que la contre-rotation, pour que le contenu ne pivote pas.
   Déplacer le point casse la déformation sans que rien ne le signale.

   background:currentColor sur le point : changer « color » change le
   point. C'est par là que passe la couleur de marque, plus bas.
   =========================================================================== */
.cb-cursor{position:fixed;top:0;left:0;z-index:250;direction:ltr;contain:layout style size;pointer-events:none;transition:opacity .3s,color .4s}.cb-cursor:before{content:"";position:absolute;top:-24px;left:-24px;display:block;width:48px;height:48px;transform:scale(0.2);background:currentColor;border-radius:50%;transition:transform .25s ease-in-out,opacity .1s}.cb-cursor.-inverse{color:#fff}@supports(mix-blend-mode: exclusion){.cb-cursor.-exclusion{mix-blend-mode:exclusion}.cb-cursor.-exclusion:before{background:#fff}}.cb-cursor.-pointer:before{transform:scale(0.15)}.cb-cursor.-text:before{opacity:.85;transform:scale(1.7)}.cb-cursor.-text.-active:before{transform:scale(1.6);transition-duration:.2s}.cb-cursor.-icon:before{transform:scale(1.5)}.cb-cursor.-icon.-active:before{transform:scale(1.4)}.cb-cursor.-hidden:before{transform:scale(0)}.cb-cursor-text{position:absolute;top:-18px;left:-18px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;transform:scale(0) rotate(10deg);opacity:0;color:#fff;font-size:16px;line-height:20px;text-align:center;transition:opacity .4s,transform .3s}.cb-cursor.-text .cb-cursor-text,.cb-cursor.-icon .cb-cursor-text{opacity:1;transform:scale(1)}.cb-cursor-media{position:absolute;width:400px;height:400px;margin:-200px 0 0 -200px}.cb-cursor-media img,.cb-cursor-media video{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:50%}@supports(object-fit: cover){.cb-cursor-media img,.cb-cursor-media video{position:static;width:100%;height:100%;object-fit:cover;transform:translateZ(0)}}.cb-cursor-media-box{position:relative;width:100%;height:100%;overflow:hidden;transform:scale(0) translateZ(0);padding:1px;opacity:0;border-radius:50%;transition:transform .35s,opacity .2s .2s}.cb-cursor.-media .cb-cursor-media-box{opacity:1;transform:scale(0.696);transition-duration:.4s,.4s;transition-delay:0s,0s}

/* ---------------------------------------------------------------------------
   Habillage DB Vision. Rien ici ne touche à la mécanique ci-dessus : la
   couleur de base, et le comportement demandé sur les boutons et les vidéos.
   --------------------------------------------------------------------------- */

/* Le bleu pétrole du logo. Le jeton fait foi — la valeur en repli ne sert
   que si style.css n'a pas été chargé.

   Le z-index de la bibliothèque, 250, ne suffit pas ici : la barre de
   navigation monte à 900, le tiroir du panier à 1300, le voile de transition
   entre pages à 999999. Le point disparaissait donc sous la barre — signalé,
   puis vérifié. Un curseur doit passer au-dessus de tout ce qui s'affiche, y
   compris d'un voile plein écran ; il ne gêne rien, la bibliothèque le pose
   déjà en pointer-events:none. La valeur laisse de la marge au-dessus du
   plus haut z-index du site. */
.cb-cursor {
    color: var(--blue, #0f2b45);
    z-index: 2000000;
}

/* Sur un bouton ou une vidéo, le point inverse ce qu'il survole plutôt que
   de garder une couleur fixe : c'est l'état « -exclusion » de la
   bibliothèque, posé par la détection d'état dans core.js.

   La feuille officielle ne blanchit le point qu'à l'intérieur d'un
   @supports(mix-blend-mode). Sans ce repli, un navigateur qui ignore le
   mode de fusion garderait un point bleu nuit sur un bouton noir — soit un
   curseur invisible. La valeur est la même dans les deux cas, la règle est
   donc sans effet là où le mode de fusion fonctionne. */
.cb-cursor.-exclusion:before {
    background: #fff;
}

/* Sur un bouton, le point grossit. La bibliothèque ne fournit que des états
   qui rapetissent (-pointer) ou qui grossissent en portant un contenu
   (-text, -icon, avec leur propre opacité) ; celui-ci lui est ajouté et
   n'agit que sur l'échelle. Il est déclaré après la feuille officielle :
   à spécificité égale, c'est l'ordre du fichier qui tranche. */
.cb-cursor.-grossi:before {
    transform: scale(0.9);
}

/* Au clic, il se rétracte un peu : c'est l'idiome de la bibliothèque sur
   ses propres états (-text.-active, -icon.-active). */
.cb-cursor.-grossi.-active:before {
    transform: scale(0.8);
}

/* L'effacement doit primer sur le grossissement. Les deux règles ont la même
   spécificité — deux classes et un pseudo-élément —, donc c'est l'ordre du
   fichier qui tranche, et -grossi arrivait après -hidden dans la feuille
   officielle. Mesuré : sur un lecteur venant d'être activé, le point
   affichait l'état -hidden tout en gardant ses 43 px, figé sur place. La
   règle officielle est donc redite ici, après les nôtres. */
.cb-cursor.-hidden:before {
    transform: scale(0);
}

/* Le curseur natif n'est masqué qu'une fois le nôtre confirmé visible :
   core.js pose cette classe sur l'évènement « show » de la bibliothèque,
   déclenché au premier mouvement de souris. Une panne du script ne peut
   donc pas laisser la page sans aucun curseur. */
@media (hover: hover) and (pointer: fine) {
    /* Le sélecteur universel avec !important n'est pas de la brutalité : un
       cursor:none posé sur html et body seulement est battu par tous les
       cursor:pointer déjà présents dans la feuille du site. */
    html.cb-cursor-on,
    html.cb-cursor-on * {
        cursor: none !important;
    }

    /* Sauf dans un champ de saisie : la barre en I sert à viser le point
       d'insertion dans un texte déjà tapé, notre disque ne sait pas le faire. */
    html.cb-cursor-on input,
    html.cb-cursor-on textarea,
    html.cb-cursor-on select,
    html.cb-cursor-on [contenteditable] {
        cursor: auto !important;
    }
}

/* Aucun curseur personnalisé au doigt. */
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
    .cb-cursor {
        display: none;
    }
}


/* ==========================================================================
   AFFICHE DES LECTEURS VIDÉO
   Le lecteur Cloudinary n'est plus posé dans la page : chaque vignette est
   une affiche cliquable, et l'iframe n'est construite qu'au clic. Un lecteur
   embarqué apporte plusieurs centaines de kilo-octets de JavaScript par
   vignette, dont presque rien ne sert tant que personne ne lance la vidéo.
   L'affiche, elle, pèse une trentaine de kilo-octets.

   C'est un <button> : le clavier y accède, il annonce son intitulé aux
   lecteurs d'écran, et le curseur du site le traite comme n'importe quel
   bouton sans règle supplémentaire.
   ========================================================================== */
.lecteur-affiche {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: var(--placeholder-a, #e6e4df);
    overflow: hidden;
}

.lecteur-affiche img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s var(--ease);
}

.lecteur-affiche:hover img,
.lecteur-affiche:focus-visible img {
    transform: scale(1.03);
}

/* La pastille de lecture. Dessinée en CSS plutôt qu'en image : une requête
   de moins, et elle suit la couleur de la charte. */
.lecteur-affiche::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 62px;
    height: 62px;
    margin: -31px 0 0 -31px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    /* Le triangle est fabriqué avec des bordures : pas de glyphe, donc pas
       d'attente de police, et il reste net à toutes les tailles. */
    box-shadow: 0 2px 18px rgba(17, 17, 17, .22);
    transition: transform .35s var(--ease), background .35s var(--ease);
}

.lecteur-affiche::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 0;
    height: 0;
    margin: -9px 0 0 -5px;
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent var(--blue, #0f2b45);
    transition: transform .35s var(--ease);
}

.lecteur-affiche:hover::after,
.lecteur-affiche:focus-visible::after {
    transform: scale(1.08);
    background: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .lecteur-affiche img,
    .lecteur-affiche::after,
    .lecteur-affiche::before {
        transition: none;
    }
    .lecteur-affiche:hover img {
        transform: none;
    }
}

/* ==========================================================================
   La visionneuse de photos (voir assets/js/visionneuse.js)
   ========================================================================== */

/* La photo cliquable se signale au survol, sinon rien n'indique qu'il y a
   quelque chose à ouvrir. Le curseur suffit à la souris ; le contour au
   focus sert la navigation au clavier. */
[data-visionnable] {
    cursor: zoom-in;
}

[data-visionnable]:focus-visible {
    outline: 2px solid var(--blue, #0f2b45);
    outline-offset: 3px;
}

/* Trois rangées : la barre du haut, la photo, la barre du bas. Rien n'est
   posé par-dessus la photo, rien n'est calculé à la main.

   La première version empilait des positions absolues et une hauteur en
   « calc(100vh - …) ». Mesuré sur la capture d'un iPhone 13 Pro : la zone
   réellement visible faisait 665 px de haut, la visionneuse 791 — parce que
   « vh » désigne la hauteur du navigateur barres masquées. Les 126 px de
   différence emportaient la légende et les flèches derrière la barre
   d'adresse, et poussaient la croix sous la barre d'état. « dvh » suit la
   hauteur visible, et la grille répartit ce qui reste. */
.visionneuse {
    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100dvh;
    /* Au-dessus de tout, y compris du voile de transition (999999) — une
       photo ouverte ne doit jamais passer derrière quoi que ce soit. */
    z-index: 1000001;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
    /* Les encoches et la barre du bas des téléphones récents : on ne place
       aucune commande dessous. */
    padding: max(10px, env(safe-area-inset-top))
             max(12px, env(safe-area-inset-right))
             max(10px, env(safe-area-inset-bottom))
             max(12px, env(safe-area-inset-left));
    background: rgba(10, 12, 14, .97);
    /* Le geste horizontal appartient à la visionneuse, pas au navigateur :
       sans cela le balayage vers la droite déclenche le retour arrière et la
       page disparaît sous la photo. Le pincement reste au navigateur, pour
       qui veut agrandir un détail. */
    touch-action: pan-y pinch-zoom;
    overscroll-behavior: contain;
    animation: visionneuse-entree .18s var(--ease, ease-out);
}

@keyframes visionneuse-entree {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .visionneuse { animation: none; }
}

/* Le fond de page ne défile plus pendant qu'une photo est ouverte : sans
   cela, la molette fait glisser la page derrière la visionneuse. */
body.visionneuse-ouverte {
    overflow: hidden;
}

/* --- la barre du haut : la croix, et rien d'autre --- */
.visionneuse-barre {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 48px;
}

/* --- la photo --- */
.visionneuse-scene {
    margin: 0;
    /* Sans cette ligne, une rangée « 1fr » refuse de descendre sous la
       hauteur de son contenu : la photo déborderait au lieu de rétrécir. */
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visionneuse-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    background: #16181c;
}

/* --- la barre du bas : flèche, légende, flèche --- */
.visionneuse-pied {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 48px;
}

.visionneuse-texte {
    /* Toujours la colonne du milieu, y compris quand une photo est seule et
       que les deux flèches disparaissent : sans cette ligne, la légende
       retombait dans la première colonne, décalée de 27 px sur un écran de
       390. Mesuré. */
    grid-column: 2;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    font-family: var(--font-main);
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .76);
    text-align: center;
    margin: 0;
}

.visionneuse-compteur {
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .5);
    letter-spacing: .06em;
    white-space: nowrap;
}

/* --- les boutons --- */
.visionneuse-fermer,
.visionneuse-nav {
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    cursor: pointer;
    /* Quarante-huit pixels : la taille en dessous de laquelle un doigt
       manque sa cible une fois sur deux. */
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    transition: background .2s var(--ease, ease), border-color .2s var(--ease, ease);
}

.visionneuse-fermer:hover,
.visionneuse-nav:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .4);
}

.visionneuse-fermer:focus-visible,
.visionneuse-nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* La fenêtre reçoit le focus à l'ouverture ; elle n'a pas à s'entourer d'un
   contour pour autant, personne ne l'a atteinte au clavier. */
.visionneuse:focus {
    outline: none;
}

.visionneuse-fermer {
    border-radius: 50%;
    font-size: 26px;
    line-height: 1;
}

.visionneuse-nav {
    font-size: 26px;
    line-height: 1;
}

.visionneuse-nav[hidden] {
    /* « hidden » ne suffit pas face au « display: grid » ci-dessus. */
    display: none;
}

/* Au-delà du téléphone, les flèches reprennent leur place sur les bords :
   l'écran est assez large pour qu'elles ne couvrent pas la photo. */
@media (min-width: 641px) {
    .visionneuse-pied {
        display: flex;
        justify-content: center;
    }

    /* Les flèches reprennent les bords : il faut leur réserver la place,
       sinon une photo assez large passe dessous. Mesuré sur une tablette de
       834 px, où l'image faisait 810 de large. */
    .visionneuse-scene {
        padding-inline: 78px;
    }

    .visionneuse-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 48px;
        height: 68px;
        font-size: 30px;
    }

    .visionneuse-nav--prec { left: clamp(6px, 1.6vw, 22px); }
    .visionneuse-nav--suiv { right: clamp(6px, 1.6vw, 22px); }
}

/* --------------------------------------------------------------------------
   30. La lettre (pied de page) et la boutique en construction
   --------------------------------------------------------------------------
   Une seule mise en forme pour les deux formulaires : celui du pied de page,
   sur fond noir, et celui de la boutique, sur papier. Les couleurs viennent
   du contexte, la structure est la même. */

.footer-lettre {
    display: grid;
    /* Le mot d'un côté, le champ de l'autre, tant que les deux tiennent. Sous
       860 px la grille repasse d'elle-même sur une colonne : mesuré, c'est le
       point où le champ descend sous 260 px et devient pénible à remplir. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(24px, 4vw, 60px);
    align-items: start;
    padding: 34px 0;
    margin-bottom: 26px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.footer-lettre .lettre-mot h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.1;
    color: #fff;
    margin: 0 0 8px;
}

.footer-lettre .lettre-mot p {
    margin: 0;
    max-width: 46ch;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    /* Mesuré sur la page rendue : le fond réellement peint derrière ce texte
       est #050505 (le halo bleu du pied ne descend pas jusque-là). #9a9a9a y
       donne 7,24:1 — au-dessus du seuil AAA. Le #8f8f8f essayé d'abord n'était
       qu'à 6,30:1 : sous le seuil, malgré l'impression contraire. */
    color: #9a9a9a;
}

.lettre-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
}

.lettre-champ {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lettre-champ label {
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--stone);
}

.footer-lettre .lettre-champ label {
    color: #9a9a9a;
}

.footer-lettre .lettre-champ input {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, .28);
}

.footer-lettre .lettre-champ input::placeholder {
    /* 5,0:1 sur le noir du pied. L'étiquette au-dessus porte déjà le sens :
       l'exemple n'a pas à atteindre AAA, mais il doit rester lisible. */
    color: #7e7e7e;
}

.footer-lettre .lettre-champ input:focus {
    border-color: #fff;
    box-shadow: 0 1px 0 0 #fff;
}

/* Le bouton du pied de page : clair sur noir, l'inverse du bouton du site.
   44 px de haut au minimum — c'est ce qu'un pouce trouve sans viser. */
.btn-lettre {
    align-self: flex-start;
    min-height: 44px;
    padding: 13px 26px;
    background: var(--paper);
    color: var(--ink);
    border: none;
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .3s var(--ease), color .3s var(--ease);
}

.btn-lettre:hover {
    background: var(--blue);
    color: #fff;
}

.btn-lettre[disabled] {
    opacity: .55;
    cursor: default;
}

.lettre-etat {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    min-height: 1em;
}

.lettre-etat.succes { color: #4a8f5f; }
.lettre-etat.erreur { color: #b4453c; }

/* Sur fond noir, ces deux verts et rouges ne passent plus le contraste :
   on les éclaircit plutôt que de les garder « par cohérence ». */
.footer-lettre .lettre-etat.succes { color: #7fd39a; }
.footer-lettre .lettre-etat.erreur { color: #ff9c93; }

/* La boutique, le temps d'être construite. */
.chantier {
    max-width: 620px;
}

.chantier-etat {
    display: inline-block;
    margin: 0 0 18px;
    padding: 7px 14px;
    border: 1px solid var(--line);
    font-family: var(--font-main);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--stone);
}

.chantier h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(30px, 4.4vw, 56px);
    line-height: 1.05;
    margin: 0 0 18px;
}

.chantier-mot {
    margin: 0 0 30px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--stone);
}

.chantier-form {
    max-width: 440px;
}

.chantier-form .btn-primary {
    align-self: flex-start;
    min-height: 44px;
}

@media (max-width: 600px) {
    .footer-lettre {
        padding: 28px 0;
    }

    /* Le bouton prend toute la largeur : à cette taille, un bouton aligné à
       gauche laisse une zone morte que le pouce vise quand même. */
    .btn-lettre,
    .chantier-form .btn-primary {
        align-self: stretch;
        width: 100%;
        text-align: center;
    }
}