*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* ── LA TAILLE DE BASE SUR GRAND ÉCRAN ─────────────────────────────────
   Le site n'avait aucune taille de racine : tout partait du 16 px du
   navigateur et n'en bougeait jamais. Relevé le 21/09 à 1920 px, une
   trentaine de blocs de texte courant tenaient encore 15 px — lisible sur
   un portable, petit sur un 27 pouces où l'on se tient plus loin.

   On règle la RACINE plutôt que trente classes : presque tout le site est
   écrit en `rem`, donc le texte ET les espacements grandissent ensemble et
   les proportions ne bougent pas. Les `clamp()` déjà en place, eux, sont
   en `vw` : ils ne doublent pas l'effet.

   16 px à 1440, 17,7 à 1920, plafonné à 18,5 : un gain d'un dixième, pas
   un grossissement. */
@media (min-width: 1440px) {
    html { font-size: clamp(16px, 0.35vw + 11px, 18.5px); }
}

body {
    font-family: 'Lora', Georgia, serif;
    color: var(--charbon);
    background: var(--ivoire);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

:root {
    --vert: #5a7247;
    --vert-light: #7a9a62;
    --vert-bg: rgba(90,114,71,0.08);
    --jaune: #d4a843;
    --jaune-light: #e8c972;
    --jaune-bg: rgba(212,168,67,0.10);
    --lie: #6b2d3e;
    --lie-light: #8e4a66;   /* prune du vin peint */
    --lie-bg: rgba(192,140,132,0.16);
    --bleu: #3d5a80;
    --bleu-light: #5b7da6;
    --bleu-bg: rgba(61,90,128,0.08);

    /* ── Aquarelle — teintes relevées sur le logo peint (19/09/2026) ──
       Le logo n'impose pas une nouvelle palette : il en ajoute une
       famille, et ne déplace qu'un seul token existant (--lie-light,
       amené sur le prune du vin peint) pour que la marque ne jure pas. */
    --brique: #c08c84;           /* le lavis du papier peint */
    --lavis-teinte: 192, 140, 132;   /* la brique, en composantes */
    --lavis-force: .46;              /* ⟵ LE CURSEUR : monte ou baisse tous les lavis d'un coup */
    --lueur-teinte: 244, 242, 205;   /* le halo du tableau */
    --lueur-force: .62;
    --fond-force: 1.3;               /* ⟵ LE CURSEUR DU FOND : 0 = plat, 1.3 = le réglage actuel.
                                        ⚠ Plafond de lisibilité : au-delà de ~1.35, le croisement du
                                        halo de droite et du dégradé de bas de page fait tomber les
                                        textes secondaires sous 4,5:1. Le monter oblige à réassombrir
                                        --crayon-light et --prune. */
    --brique-clair: #ddc3ba;
    --brique-bg: rgba(192,140,132,0.14);
    --prune: #743d54;            /* le vin dans la carafe, calé sur le même pire cas */
    --prune-bg: rgba(142,74,90,0.10);
    --cire: #f4f2cd;
    --cire-bg: rgba(244,242,205,0.50);

    --ivoire: #f3ece0;      /* accordé au papier du tableau */
    --ivoire-warm: #ece3d3;
    --ivoire-dark: #e6d4c9;   /* ivoire + 25 % de brique : le rappel diffus */
    --charbon: #2c2c2c;
    --crayon: #3a3a3a;
    --crayon-light: #4e4e4e;   /* calé sur le fond le plus teinté (#d9bbb1), là où deux halos se croisent */

    --font-hand: 'Caveat', cursive;
    --font-body: 'Lora', Georgia, serif;

    --container: 1100px;
    --gap: 2rem;
    
    --gutter: 1rem;
    --section-py: clamp(4rem, 8vw, 7rem);

    
    --r-hand: 255px 15px 225px 15px / 15px 225px 15px 255px;
    --r-hand-sm: 30px 4px 28px 4px / 4px 28px 4px 30px;
    --r-hand-btn: 20px 6px 18px 6px / 6px 20px 6px 18px;

    
    --t-vif: .14s;
    --t-moyen: .3s;
    --t-pose: .55s;
    --ease-pose: cubic-bezier(.2, .8, .3, 1);
    --ease-doux: cubic-bezier(.4, 0, .2, 1);
}

html::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        /* ── Les lueurs du tableau ──
           Ce calque est SOUS le contenu (z-index -1) : on peut y aller
           franchement, il ne voilera jamais un texte. C'est lui qui porte
           l'effet ; celui du dessus reste un souffle.
           Ellipses larges et arrêts lointains = fondu long, pas de bord. */
        radial-gradient(ellipse 150% 105% at 96% -12%,
            rgba(var(--lavis-teinte), calc(.26 * var(--fond-force))),
            rgba(var(--lavis-teinte), 0) 78%),
        radial-gradient(ellipse 135% 95% at -14% 62%,
            rgba(var(--lavis-teinte), calc(.20 * var(--fond-force))),
            rgba(var(--lavis-teinte), 0) 80%),
        radial-gradient(ellipse 128% 88% at 52% 118%,
            rgba(var(--lueur-teinte), calc(.66 * var(--fond-force))),
            rgba(var(--lueur-teinte), 0) 82%),
        
        radial-gradient(90% 60% at 50% 18%,
            rgba(255,253,248,0.42) 0%,
            rgba(255,253,248,0.00) 70%),
        
        /* Le dégradé de page passait du jaune vigne au VERT en bas — ce
           vert sous un halo brique donnait un gris sale. Il devient
           cire → brique : l'accord du tableau, de haut en bas. */
        linear-gradient(180deg,
            rgba(var(--lueur-teinte), calc(.55 * var(--fond-force))) 0%,
            rgba(var(--lueur-teinte), 0) 36%,
            rgba(var(--lavis-teinte), 0) 58%,
            rgba(var(--lavis-teinte), calc(.20 * var(--fond-force))) 100%);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    background:
        /* ── Les lueurs du tableau, posées sur toute la page ──
           Trois taches asymétriques : une brique en haut à droite (d'où
           vient la lumière dans l'aquarelle), une seconde en bas à gauche
           pour que l'œil ne lise pas une symétrie, et une lueur cire en
           bas. Elles sont fixes : c'est la lumière de la pièce, pas un
           décor qui défile. Les lavis de section, eux, défilent — les
           deux ensemble font un fond qui ne se répète jamais.
           Valeurs volontairement basses : ce calque passe AU-DESSUS du
           contenu, un point de trop et le texte se voile. */
        
        radial-gradient(125% 95% at 50% 42%,
            rgba(255,252,246,0.16) 0%,
            rgba(255,252,246,0.00) 42%,
            rgba(112,84,56,0.035)  74%,
            rgba(112,84,56,0.095) 100%),
        
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 28px,
            rgba(139,119,101,0.04) 28px,
            rgba(139,119,101,0.04) 29px
        );
}
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    opacity: 0.35;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
    background-size: 256px 256px;
}

.svg-filters { position: absolute; width: 0; height: 0; }

.container {
    width: min(var(--container), 100% - var(--gutter) * 2);
    margin-inline: auto;
}

.rail {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gutter) * -1);
    padding: .6rem var(--gutter) 1.1rem;
    scroll-padding-left: var(--gutter);
}
.rail > * {
    flex: 0 0 76%;
    max-width: 300px;
    scroll-snap-align: start;
}
section, .marquee { position: relative; }

.section-header {
    text-align: center;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.doodle-img {
    display: block;
    height: auto;
    /* `object-fit` vaut `fill` par défaut : dès qu'une boîte contraint la
       largeur ET la hauteur, le dessin s'écrase. Relevé le 21/09 à 375 px :
       le casier à bouteilles rendait 37x88 pour un fichier de 223x184, soit
       un tiers de sa largeur. `contain` le laisse respirer dans sa boîte au
       lieu de l'étirer — au pire il reste du vide, jamais une déformation. */
    object-fit: contain;
    /* L'ombre portée décolle l'aquarelle du papier. Elle est très courte et
       teintée lie, pas grise : l'image est en `multiply`, donc l'ombre se
       multiplie elle aussi sur l'ivoire — un gris y virerait au sale.
       21/09/2026, avec le passage à l'aquarelle. */
    filter: brightness(1.13) drop-shadow(0 2px 4px rgba(107, 45, 62, .15));
    mix-blend-mode: multiply;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.eyebrow {
    font-family: var(--font-hand);
    font-size: 1.25rem;
    color: var(--prune);
    margin-bottom: .5rem;
    letter-spacing: 0.02em;
}
.section-title {
    font-family: var(--font-hand);
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--charbon);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
:is(.section-title, .vsl__title) .underline {
    display: inline-block;
    position: relative;
}
:is(.section-title, .vsl__title) .underline::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: -4px;
    right: -4px;
    height: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='12' fill='none'%3E%3Cpath d='M2 8 C30 3, 60 10, 90 5 C120 0, 150 9, 198 4' stroke='%236b2d3e' stroke-width='2.5' stroke-linecap='round' opacity='0.5'/%3E%3Cpath d='M4 11 C34 7, 64 12, 94 8 C124 4, 154 12, 196 8' stroke='%23c08c84' stroke-width='2' stroke-linecap='round' opacity='0.55'/%3E%3C/svg%3E") no-repeat center;
    background-size: 100% 100%;
}
.section-subtitle {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--crayon-light);
    max-width: 600px;
    margin-inline: auto;
    margin-top: .75rem;
    font-style: italic;
}

.annotation {
    font-family: var(--font-hand);
    font-size: 1rem;
    color: var(--bleu);
    transform: rotate(-2deg);
    display: inline-block;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-hand);
    font-size: 1.2rem;
    font-weight: 600;
    padding: .75rem 1.5rem;
    border-radius: var(--r-hand-btn);
    
    transition: background var(--t-moyen) var(--ease-doux),
                border-color var(--t-moyen) var(--ease-doux),
                color var(--t-moyen) var(--ease-doux),
                box-shadow var(--t-moyen) var(--ease-doux),
                transform var(--t-vif) var(--ease-pose);
    position: relative;
    letter-spacing: 0.01em;
}
.btn--primary {
    background: var(--lie);
    color: #fff;
    border: 2px solid var(--lie);
}
.btn--outline {
    background: transparent;
    color: var(--lie);
    border: 2px solid var(--charbon);
}
.btn--ghost {
    color: var(--charbon);
    border: 2px dashed var(--crayon-light);
}

@media (hover: hover) {
    .btn--primary:hover {
        background: var(--lie-light);
        border-color: var(--lie-light);
        transform: translateY(-2px) rotate(-0.5deg);
    }
    .btn--outline:hover {
        background: var(--lie-bg);
        transform: translateY(-2px) rotate(0.5deg);
    }
    .btn--ghost:hover {
        border-color: var(--charbon);
        background: rgba(0,0,0,.03);
    }
}

.btn:active {
    transform: translateY(1px) scale(.985);
    transition-duration: .05s;
}
.btn--lg { padding: 1rem 2rem; font-size: 1.3rem; }
.btn--full { width: 100%; justify-content: center; }
.btn svg { flex-shrink: 0; }

.nav-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 1rem 0;
    
    /* OPAQUE des deux côtés : --brique-bg est semi-transparent, et une
       barre translucide laissait voir les sections sombres au travers —
       le logo à fondu ivoire y devenait une tache claire. La nuance
       brique est donc pré-mélangée, pas superposée. */
    background: linear-gradient(180deg, var(--ivoire) 0%, #ecdfd3 100%);
    border-bottom: 1.5px solid var(--brique-clair);
    transition: background var(--t-moyen) var(--ease-doux),
                box-shadow var(--t-moyen) var(--ease-doux),
                padding var(--t-moyen) var(--ease-pose);
}
.nav-wrap.scrolled {
    
    background: linear-gradient(180deg, var(--ivoire) 0%, #eee3d7 100%);
    box-shadow: 0 2px 0 rgba(142, 74, 90, 0.11);
    padding: .6rem 0;
}
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    gap: 2rem;
}
.nav__logo {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-hand);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--charbon);
    
    min-height: 44px;
}
.nav__logo-img {
    width: 40px;
    height: auto;
    filter: brightness(1.13);
    mix-blend-mode: multiply;
}
.nav__menu {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}
.nav__link {
    font-family: var(--font-hand);
    font-size: 1.15rem;
    color: var(--crayon);
    position: relative;
    transition: color var(--t-moyen) var(--ease-doux);
}

.nav__link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--lie);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--t-moyen) var(--ease-pose);
}
.nav__link:focus-visible { color: var(--lie); }

.nav__link.active { color: var(--lie); }
.nav__link.active::after,
.nav__link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}
@media (hover: hover) {
    .nav__link:hover { color: var(--lie); }
    .nav__link:hover::after { transform: scaleX(1); transform-origin: left center; }
}
.nav__cta { margin-left: .5rem; }

.nav__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    
    margin-right: -8px;
}
.nav__toggle span { width: 28px; }
.nav__toggle span {
    display: block;
    height: 2px;
    background: var(--charbon);
    border-radius: 2px;
    transition: transform var(--t-moyen) var(--ease-pose),
                opacity var(--t-vif) var(--ease-doux);
}

@media (max-width: 960px) {
    .nav__menu {
        position: fixed;
        inset: 0;
        background: var(--ivoire);
        flex-direction: column;
        justify-content: center;
        gap: 2.5rem;
        transform: translateX(100%);
        transition: transform var(--t-pose) var(--ease-pose);
        z-index: 99;
    }
    .nav__menu.open { transform: translateX(0); }
    
    .nav__menu > li {
        opacity: 0;
        translate: 14px 0;
        transition: opacity var(--t-moyen) var(--ease-doux),
                    translate var(--t-moyen) var(--ease-pose);
    }
    .nav__menu.open > li { opacity: 1; translate: none; }
    .nav__menu.open > li:nth-child(1) { transition-delay: .18s; }
    .nav__menu.open > li:nth-child(2) { transition-delay: .23s; }
    .nav__menu.open > li:nth-child(3) { transition-delay: .28s; }
    .nav__menu.open > li:nth-child(4) { transition-delay: .33s; }
    .nav__menu.open > li:nth-child(5) { transition-delay: .38s; }
    .nav__menu.open > li:nth-child(6) { transition-delay: .43s; }
    .nav__menu.open > li:nth-child(7) { transition-delay: .48s; }
    
    .nav__logo { position: relative; z-index: 101; }   /* pas de fond opaque :
        la barre est désormais translucide, un aplat ivoire y dessinerait
        un rectangle clair derrière la marque. */
    .nav__menu .nav__link { font-size: 1.5rem; padding: .4rem 1rem; }
    .nav__cta { display: none; }
    .nav__cta-mobile { display: block !important; }
    
    .nav__mobile-seul { display: block !important; }
    .nav__toggle { display: flex; z-index: 101; }
    .nav__toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    
    .nav__toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(.1); }
    .nav__toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
}
.nav__cta-mobile { display: none; }
.nav__mobile-seul { display: none; }

.hero {
    padding: clamp(7rem, 14vw, 10rem) 0 var(--section-py);
    min-height: 100vh;
    display: flex;
    align-items: center;
}
.hero .container {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 3rem;
    align-items: center;
}
.hero__title {
    font-family: var(--font-hand);
    font-size: clamp(2.8rem, 6.5vw, 4.4rem);
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--charbon);
    margin-bottom: 1.5rem;
    letter-spacing: 0.01em;
}
.hero__title .accent {
    position: relative;
    display: inline-block;
}

.hero__title .accent::after {
    content: '';
    position: absolute;
    left: -4px;
    right: -6px;
    
    bottom: -.1em;
    height: 8px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C40 2, 80 8, 120 4 C160 1, 210 7, 260 3 C275 2, 290 5, 298 4' stroke='%236b2d3e' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.hero__kicker {
    font-family: var(--font-hand);
    /* Du script EN CAPITALES à 22 px, c'était la ligne la plus dure à
       lire du hero, contraste conforme ou non. On la grandit d'un quart
       plutôt que de la changer de police : elle est courte, et c'est
       elle qui prolonge le geste du titre. */
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    text-transform: uppercase;
    /* Charbon et non crayon : sur une photo, les quatorze points de gris
       qui séparent les deux valent un point de contraste entier, et le
       sous-titre passait sous le seuil de 4,5 une fois le halo allégé. */
    color: var(--charbon);
    line-height: 1.5;
    letter-spacing: .02em;
    margin-bottom: 1.75rem;
}
/* ── CE QU'ON FAIT, EN NOTE DE MARGE ───────────────────────────────────
   Nathan, 23/09/2026 : « on peut améliorer le design de ce bandeau pour
   le rendre plus premium ».

   C'était un aplat doré translucide, bordé d'un filet doré, penché de
   0,8 degré, avec deux touffes de hachures de part et d'autre — le tout
   sur 1026 px de large, c'est-à-dire presque toute la page. Trois
   défauts qui s'additionnent : un jaune translucide posé sur une photo
   donne une couleur sale ; un rectangle bordé au milieu d'un hero se lit
   comme un encart d'avertissement ; et une inclinaison sur un bloc aussi
   long ne se lit pas comme un geste mais comme un défaut d'alignement.

   Reste ce que la phrase est vraiment : une note en marge du titre. Un
   filet vertical lie, le texte au crayon, rien autour. C'est le geste du
   carnet, et il ne pose aucune couleur sur la photo. La largeur tombe à
   une soixantaine de signes — au-delà, l'œil ne revient pas à la ligne
   suivante sans se perdre. */
.hero__highlight {
    display: block;
    /* 60 signes : en dessous, la phrase tombait sur quatre lignes courtes
       et se lisait par à-coups ; au-delà, l'œil perd la ligne suivante. */
    max-width: 60ch;
    /* LA POLICE DE LECTURE, PAS LA MANUSCRITE. « Je trouve le sous-texte
       trop illisible » (Nathan, 23/09/2026) : trois lignes denses en
       script ET en capitales, posées sur une photo, c'est le cumul de
       tout ce qui freine l'œil. Le contraste mesuré était pourtant
       conforme — le défaut n'était pas la couleur, c'était la lettre.
       La manuscrite reste au titre et au sous-titre, qui sont courts et
       grands : c'est là qu'elle fait son effet. */
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.5vw, 1.12rem);
    text-transform: none;
    color: var(--charbon);
    line-height: 1.6;
    background: none;
    border: 0;
    border-left: 2.5px solid var(--lie);
    border-radius: 0;
    padding: .1rem 0 .15rem 1.15rem;
    margin-bottom: 2rem;
    position: relative;
}

/* ⚠ PLUS AUCUNE PAGE N'EMPLOIE CES CLASSES depuis le 21/09/2026 : les
   quatre portes de métier du hero ont été remplacées par .tremplin.
   Conservé tel quel le temps que la décision se confirme — à supprimer
   (jusqu'à .porte.is-connu inclus) si elle tient. */
.hero__portes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    margin-bottom: 1.9rem;
    list-style: none;
    padding: 0;
}
.porte {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    height: 100%;
    padding: .85rem .6rem .75rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    
    background: var(--ivoire);
    border: 1.5px solid var(--charbon);
    border-radius: var(--r-hand-sm);
    position: relative;
    overflow: hidden;
    transition: transform var(--t-moyen) var(--ease-pose),
                box-shadow var(--t-moyen) var(--ease-doux);
}

.hero__portes li:nth-child(1) .porte { transform: rotate(-1deg); }
.hero__portes li:nth-child(2) .porte { transform: rotate(.6deg); }
.hero__portes li:nth-child(3) .porte { transform: rotate(-.4deg); }
.hero__portes li:nth-child(4) .porte { transform: rotate(.9deg); }

.porte::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
}
.porte--vert::before  { background: var(--vert); }
.porte--bleu::before  { background: var(--bleu); }
.porte--lie::before   { background: var(--lie); }

.porte--jaune::before { background: repeating-linear-gradient(90deg,
                            var(--jaune) 0 8px, transparent 8px 14px); }

@media (hover: hover) {
    .porte:hover {
        transform: rotate(0deg) translateY(-4px);
        box-shadow: 3px 5px 0 rgba(142, 74, 90, 0.18);
    }
    .porte:hover .porte__fleche { translate: 4px 0; }
}
.porte:focus-visible { outline: 3px solid var(--jaune); outline-offset: 4px; }

.porte__fig {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 58px;
    background: var(--ivoire);
    transform-origin: bottom center;
    animation: swaySoft 4.6s ease-in-out infinite;
}
.hero__portes li:nth-child(2) .porte__fig { animation-delay: -1.5s; }
.hero__portes li:nth-child(3) .porte__fig { animation-delay: -3s; }
.hero__portes li:nth-child(4) .porte__fig { animation-delay: -4.2s; }
.porte__fig img {
    max-height: 58px;
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
}
.porte__nom {
    font-family: var(--font-hand);
    font-size: 1.35rem;
    line-height: 1.1;
    color: var(--charbon);
}
.porte__quoi {
    font-size: .78rem;
    line-height: 1.35;
    color: var(--crayon);
}

.porte__lien {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--font-hand);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ivoire);
    background: var(--charbon);
    padding: .14rem .7rem;
    border-radius: var(--r-hand-btn);
}
.porte__fleche { transition: translate var(--t-moyen) var(--ease-pose); }

.porte.is-connu { border-color: var(--charbon); }
.porte.is-connu .porte__lien { background: var(--lie); }

.hero__voir {
    font-family: var(--font-hand);
    font-size: 1.05rem;
    color: var(--crayon-light);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    align-self: center;
    
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: .5rem;
}
.hero__voir:hover { color: var(--lie); }
.hero__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ivoire);
}
.hero__visual > img {
    width: 100%;
}

.hero__snapshot {
    position: absolute;
    right: -.5rem;
    bottom: -.5rem;
    width: 42%;
    max-width: 210px;
    margin: 0;
    padding: .4rem;
    background: var(--ivoire);
    border: 1.5px solid var(--charbon);
    border-radius: var(--r-hand-sm);
    box-shadow: 3px 4px 0 rgba(142, 74, 90, 0.15);
    transform: rotate(2.4deg);
}
.hero__snapshot img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 3px;
    filter: saturate(.93);
}

.hero__snapshot::before {
    content: '';
    position: absolute;
    top: -8px; left: -10px;
    width: 52px; height: 17px;
    transform: rotate(-32deg);
    background: rgba(214,190,130,.42);
    border: 1px solid rgba(142, 74, 90, 0.17);
    border-radius: 2px;
}

@media (max-width: 768px) {
    .hero { min-height: auto; }
    .hero .container { grid-template-columns: 1fr; text-align: center; }
    .hero__portes { max-width: 460px; margin-inline: auto; }
    .hero__actions { justify-content: center; }
    .hero__highlight::before,
    .hero__highlight::after { display: none; }
    .hero__visual { max-width: 460px; margin-inline: auto; order: -1; }
    .hero__snapshot { right: 0; bottom: -.5rem; width: 38%; }
}

.hero__scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-hand);
    font-size: .95rem;
    color: var(--crayon-light);
}
.hero__scroll-line {
    width: 1.5px;
    height: 40px;
    background: linear-gradient(to bottom, var(--charbon), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
    0%, 100% { opacity: 1; transform: scaleY(1); }
    50% { opacity: 0.3; transform: scaleY(0.6); }
}

.marquee {
    padding: 1.25rem 0;
    border-top: 1.5px dashed var(--ivoire-dark);
    border-bottom: 1.5px dashed var(--ivoire-dark);
    overflow: hidden;
}
.marquee__track {
    display: flex;
    width: max-content;
    animation: scroll-marquee 30s linear infinite;
}
.marquee__content {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}
.marquee__content span {
    font-family: var(--font-hand);
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--charbon);
    white-space: nowrap;
    padding: 0 1rem;
    letter-spacing: 0.05em;
}
.marquee__dot {
    color: var(--lie) !important;
    font-size: 1rem !important;
}
@keyframes scroll-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.vitrine {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    overflow: hidden;
    border-top: 1.5px dashed var(--ivoire-dark);
    border-bottom: 1.5px dashed var(--ivoire-dark);
    background: var(--ivoire-warm);
}
.vitrine .section-header { margin-bottom: 2rem; }

.vitrine__rail { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.vitrine__rail + .vitrine__rail { margin-top: 1.5rem; }
.vitrine__track {
    display: flex;
    width: max-content;
    animation: vitrine-defile var(--duree, 60s) linear infinite;
}
.vitrine__track--retour { animation-direction: reverse; }
.vitrine__set { display: flex; align-items: flex-start; flex-shrink: 0; }
.vitrine__set > * { margin-right: 1rem; }
@keyframes vitrine-defile {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.vitrine__rail:hover .vitrine__track { animation-play-state: paused; }

.vitrine__vue {
    background: var(--ivoire);
    border: 1.5px solid var(--charbon);
    border-radius: var(--r-hand-sm);
    padding: .4rem;
    box-shadow: 4px 5px 0 rgba(142, 74, 90, 0.13);
    flex: 0 0 auto;
}
.vitrine__vue :is(video, img) {
    display: block;
    border-radius: 3px;
    object-fit: cover;
    filter: saturate(.93);
    background: var(--ivoire-dark);
}
.vitrine__vue--reel { width: 176px; transform: rotate(-.7deg); }
.vitrine__vue--reel:nth-child(even) { transform: rotate(.6deg); }
.vitrine__vue--reel :is(video, img) { width: 100%; aspect-ratio: 9 / 16; }

.vitrine__vue--photo { transform: rotate(.6deg); }
.vitrine__vue--photo:nth-child(even) { transform: rotate(-.7deg); }
.vitrine__vue--photo img { height: 200px; width: auto; }

.vitrine__note {
    font-family: var(--font-hand);
    font-size: 1.15rem;
    color: var(--crayon-light);
    text-align: center;
    margin-top: 1.5rem;
}

/* Une vraie marge basse depuis le 14/10/2026 : la filière était suivie de
   « Ce qu'on tourne », dont la bordure et la marge faisaient la séparation.
   Dans l'ordre de conversion, c'est un renvoi sur fond papier qui suit, et
   la teinte s'arrêtait net sous les logos. */
.filiere { padding: var(--section-py) 0 clamp(2.2rem, 5vw, 3.4rem); }

.filiere__frise {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.filiere__maillon {
    position: relative;
    isolation: isolate;
    flex: 1 1 0;
    min-width: 0;
    padding-inline: .5rem;
}
.filiere__lien {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
}
@media (hover: hover) {
    .filiere__lien:hover .filiere__vignette {
        transform: rotate(0deg) translateY(-3px);
        box-shadow: 3px 4px 0 rgba(142, 74, 90, 0.18);
    }
    .filiere__lien:hover .filiere__nom { color: var(--lie); }
}
.filiere__lien:focus-visible {
    outline: 2px solid var(--lie);
    outline-offset: 6px;
    border-radius: 6px;
}

.filiere__maillon::after {
    content: "";
    position: absolute;
    
    top: 39px;
    left: 50%;
    width: 100%;
    border-top: 2px dashed var(--ivoire-dark);
    z-index: 0;
}
.filiere__maillon:last-child::after { display: none; }

.filiere__vignette {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 92px;
    height: 78px;
    margin-bottom: .8rem;
    background: var(--ivoire);
    border: 1.5px solid var(--charbon);
    border-radius: 12px 4px 10px 5px / 5px 10px 4px 12px;
    box-shadow: 2px 2px 0 rgba(142, 74, 90, 0.11);
    transition: transform .25s var(--ease-pose), box-shadow .25s var(--ease-pose);
}
.filiere__maillon:nth-child(odd)  .filiere__vignette { transform: rotate(-1.1deg); }
.filiere__maillon:nth-child(even) .filiere__vignette { transform: rotate(.9deg); }

.filiere__num {
    position: absolute;
    top: -9px;
    left: -9px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    font-family: var(--font-hand);
    font-size: .78rem;
    font-weight: 700;
    color: var(--ivoire);
    background: var(--crayon-light);
    border-radius: 50%;
    line-height: 1;
}

.filiere__vignette img {
    height: 58px;
    width: auto;
    max-width: 84px;
    object-fit: contain;
}

.filiere__nom {
    font-family: var(--font-hand);
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--charbon);
    line-height: 1.2;
}

.filiere__maillon--v1 .filiere__num { background: var(--vert); }
.filiere__maillon--v2 .filiere__num { background: var(--vert-light); }
.filiere__maillon--v3 .filiere__num { background: var(--jaune); color: var(--charbon); }
.filiere__maillon--v4 .filiere__num { background: var(--bleu); }
.filiere__maillon--v5 .filiere__num { background: var(--lie-light); }
.filiere__maillon--v6 .filiere__num { background: var(--lie); }

.filiere__note {
    margin-top: 1.6rem;
    text-align: center;
    font-size: .95rem;
    color: var(--crayon-light);
}
.filiere__note a { color: var(--lie); text-decoration: underline; }

@media (max-width: 720px) {
    
    .filiere__frise {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: .5rem;
    }
    .filiere__maillon { padding-inline: 0; }

    
    .filiere__maillon::after { display: none; }

    .filiere__lien {
        flex-direction: row;
        align-items: center;
        gap: .9rem;
        text-align: left;
        padding: .6rem .9rem;
        background: var(--ivoire);
        border: 1.5px solid var(--ivoire-dark);
        border-radius: var(--r-hand-sm);
    }
    .filiere__vignette {
        width: 52px;
        height: 46px;
        margin: 0;
        flex: 0 0 auto;
    }
    .filiere__vignette img { height: 36px; max-width: 46px; }
    .filiere__num { width: 20px; height: 20px; font-size: .68rem; top: -7px; left: -7px; }
    .filiere__nom { font-size: 1.15rem; line-height: 1.15; flex: 1; }
    
    .filiere__nom::after { float: right; opacity: 1; }
    .filiere__note { margin-top: 1.1rem; font-size: 0.95rem; }
}

.segments { padding: var(--section-py) 0; }

.segments__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.4vw, 1.9rem);
    align-items: stretch;
}

.segment {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .9rem;
    padding: clamp(1.6rem, 3vw, 2.3rem) clamp(1.1rem, 2.2vw, 1.7rem);
    background: var(--ivoire-warm);
    border: 2px solid var(--crayon);
    border-radius: var(--r-hand-md);
    text-decoration: none;
    color: inherit;
    transition: transform var(--t-moyen) var(--ease-pose),
                box-shadow var(--t-moyen) var(--ease-pose),
                background var(--t-moyen) var(--ease-doux),
                scale var(--t-vif) var(--ease-doux);
}

.segments__grid > .segment:nth-child(1) { transform: rotate(-.8deg); }
.segments__grid > .segment:nth-child(2) { transform: rotate(.5deg); }
.segments__grid > .segment:nth-child(3) { transform: rotate(-.35deg); }

.segment:focus-visible {
    background: var(--ivoire);
    transform: translateY(-6px) rotate(0deg);
    box-shadow: 0 16px 34px rgba(142, 74, 90, 0.18);
}
@media (hover: hover) {
    .segment:hover {
        background: var(--ivoire);
        transform: translateY(-6px) rotate(0deg);
        box-shadow: 0 16px 34px rgba(142, 74, 90, 0.18);
    }
    .segment:hover .segment__fleche { translate: 5px 0; }
}
.segment:focus-visible { outline: 3px solid var(--jaune); outline-offset: 4px; }

.segment::before {
    content: '';
    position: absolute;
    top: -2px; left: 12%; right: 12%;
    height: 6px;
    border-radius: 8px 3px 7px 4px / 4px 7px 3px 8px;
}
.segment--vert::before { background: var(--vert); }
.segment--bleu::before { background: var(--bleu); }
.segment--lie::before  { background: var(--lie); }

.segment--vert-clair::before { background: var(--vert-light); }
.segment--jaune::before      { background: var(--jaune); }
.segment--lie-clair::before  { background: var(--lie-light); }

.segment__visuel {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: clamp(96px, 11vw, 132px);
}

.segment__visuel .doodle-img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.segment__texte { display: flex; flex-direction: column; gap: .5rem; }

.segment__label {
    font-family: var(--font-hand);
    font-size: clamp(1.55rem, 2.6vw, 2rem);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    color: var(--charbon);
}
.segment__phrase {
    color: var(--crayon);
    font-size: .96rem;
    line-height: 1.55;
}
.segment__lien {
    font-family: var(--font-hand);
    font-size: 1.15rem;
    font-weight: 600;
    margin-top: .15rem;
}
.segment--vert .segment__lien { color: var(--vert); }
.segment--bleu .segment__lien { color: var(--bleu); }
.segment--lie  .segment__lien { color: var(--lie); }
.segment--vert-clair .segment__lien { color: var(--vert-light); }
.segment--jaune      .segment__lien { color: #a37c1f; }
.segment--lie-clair  .segment__lien { color: var(--lie-light); }

.segment__fleche {
    display: inline-block;
    transition: translate var(--t-moyen) var(--ease-pose);
}

.segment.is-connu { background: var(--ivoire); border-color: var(--charbon); }
.segment.is-connu::after {
    content: 'déjà vu';
    position: absolute;
    top: -.75rem; right: 1rem;
    padding: .1rem .6rem;
    font-family: var(--font-hand);
    font-size: .95rem;
    color: var(--charbon);
    background: var(--jaune-bg);
    border-radius: 12px 4px 10px 5px / 5px 10px 4px 12px;
}

.segments__note {
    font-family: var(--font-hand);
    font-size: 1.15rem;
    color: var(--crayon-light);
    text-align: center;
    margin-top: clamp(1.5rem, 3vw, 2.2rem);
}
.segments__note a { color: var(--lie); }

@media (max-width: 860px) {
    .segments__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    
    .segments__grid > .segment:nth-child(3) { grid-column: 1 / -1; max-width: 420px; justify-self: center; }
}

@media (max-width: 640px) {
    .segments__grid { grid-template-columns: 1fr; gap: .85rem; }
    .segments__grid > .segment:nth-child(3) { grid-column: auto; max-width: none; justify-self: stretch; }
    .segment {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 1rem;
        padding: 1rem 1.1rem;
    }
    
    .segment::before {
        top: 12%; bottom: 12%; left: -2px; right: auto;
        height: auto; width: 6px;
        border-radius: 4px 8px 3px 7px / 7px 3px 8px 4px;
    }
    .segment__visuel {
        width: 76px; height: 76px;
        flex: 0 0 76px;
        align-items: center;
    }
    .segment__texte { gap: .25rem; }
    .segment__label { font-size: 1.4rem; }
    .segment__phrase { font-size: 0.95rem; line-height: 1.45; }
    .segment__lien { font-size: 1.02rem; }
    .segment.is-connu::after { top: .4rem; right: .6rem; font-size: 0.95rem; }
}

.vsl { padding: var(--section-py) 0; }
.vsl .container {
    display: grid;
    gap: clamp(1.6rem, 3.5vw, 2.4rem);
    justify-items: center;
}
.vsl__entete { text-align: center; }
.vsl__title {
    font-family: var(--font-hand);
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
}
.vsl__texte {
    display: grid;
    justify-items: center;
    gap: 1.2rem;
    text-align: center;
}
.vsl__text { color: var(--crayon); line-height: 1.65; max-width: 56ch; margin: 0; }

.vsl__duo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(.8rem, 2vw, 1.6rem);
    width: 100%;
}
.vsl__avant, .vsl__apres {
    position: relative;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    min-width: 0;
}
.vsl__avant { flex: 0 1 230px; }
.vsl__apres { flex: 0 1 310px; }

.vsl__tag {
    align-self: center;
    font-family: var(--font-hand);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .1rem .9rem;
    border: 1.5px solid currentColor;
    border-radius: var(--r-hand-btn);
}
.vsl__tag--avant { color: var(--crayon-light); transform: rotate(-1.5deg); }
.vsl__tag--apres { color: var(--lie); background: var(--jaune-bg); transform: rotate(1.2deg); }

.vsl__avant-cadre {
    position: relative;
    background: var(--ivoire);
    border: 1.5px solid var(--charbon);
    border-radius: var(--r-hand-sm);
    padding: .35rem;
    box-shadow: 4px 5px 0 rgba(142, 74, 90, 0.13);
    transform: rotate(-2deg);
}
.vsl__avant-cadre :is(video, img) {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: 3px;
    filter: saturate(.93);
    background: var(--ivoire-dark);
}
.vsl__avant-legende {
    text-align: center;
    display: grid;
    gap: .15rem;
    line-height: 1.25;
}
.vsl__avant-legende strong {
    font-family: var(--font-hand);
    font-size: 1.35rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.vsl__avant-legende span {
    font-size: 0.95rem;
    color: var(--crayon-light);
}

.vsl__fleche {
    flex: 0 0 auto;
    display: grid;
    justify-items: center;
    gap: .1rem;
    margin-bottom: 2.5rem;
}
.vsl__fleche svg { width: 62px; height: auto; }
.vsl__fleche span {
    font-family: var(--font-hand);
    font-size: 1.05rem;
    color: var(--lie);
    white-space: nowrap;
}

.vsl__cadre {
    position: relative;
    aspect-ratio: 9 / 16;
    background: var(--ivoire);
    border: 2px dashed var(--charbon);
    border-radius: var(--r-hand-sm);
    transform: rotate(1.2deg);
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .75rem;
    padding: 1.5rem;
    text-align: center;
}

.vsl__cadre::before {
    content: '';
    position: absolute; top: -11px; left: 50%;
    width: 86px; height: 22px;
    transform: translateX(-50%) rotate(-2deg);
    background: rgba(212,168,67,.35);
    border: 1px solid rgba(142, 74, 90, 0.18);
}
.vsl__cadre img { width: 62px; height: auto; opacity: .8; }
.vsl__cadre-titre {
    font-family: var(--font-hand);
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.vsl__cadre-note { font-size: 0.95rem; color: var(--crayon-light); line-height: 1.5; }
.vsl__cadre-format {
    font-family: var(--font-hand);
    font-size: 1.05rem;
    color: var(--lie);
    border: 1.5px solid currentColor;
    border-radius: var(--r-hand-btn);
    padding: .15rem .8rem;
}

.vsl__cadre video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: var(--r-hand-sm);
}
.vsl__cadre--plein { border-style: solid; padding: .35rem; }

@media (prefers-reduced-motion: reduce) {
    .vitrine__track, .marquee__track { animation: none; }
    .vitrine__rail { overflow-x: auto; }
}

.hand-card {
    background: var(--ivoire);
    border: 1.5px solid var(--charbon);
    border-radius: var(--r-hand-sm);
    padding: 2rem;
    position: relative;
    transition: transform var(--t-moyen) var(--ease-pose), box-shadow var(--t-moyen) var(--ease-doux),
                scale var(--t-vif) var(--ease-doux);
}
@media (hover: hover) {
    .hand-card:hover {
        transform: translateY(-4px) rotate(-0.3deg);
        box-shadow: 4px 4px 0 rgba(142, 74, 90, 0.11);
    }
}

.section-cta {
    text-align: center;
    margin-top: 2.5rem;
}

.why { padding: var(--section-py) 0; }

.why__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
@media (max-width: 900px) {
    .why__grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}
.why-card {
    background: var(--ivoire);
    border: 1.5px solid var(--charbon);
    border-radius: var(--r-hand-sm);
    padding: 2rem 1.75rem;
    position: relative;
    transition: transform var(--t-moyen) var(--ease-pose), box-shadow var(--t-moyen) var(--ease-doux),
                scale var(--t-vif) var(--ease-doux);
}
@media (hover: hover) {
    .why-card:hover {
        transform: translateY(-4px) rotate(-0.3deg);
        box-shadow: 4px 4px 0 rgba(142, 74, 90, 0.11);
    }
}
.why-card__icon {
    height: 60px;
    margin-bottom: 1rem;
}
.why-card__icon img {
    height: 100%;
    width: auto;
}
.why-card__title {
    font-family: var(--font-hand);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--charbon);
    margin-bottom: .5rem;
}
.why-card__text {
    font-size: .95rem;
    color: var(--crayon-light);
    line-height: 1.7;
}

.why-card__num {
    position: absolute;
    top: -12px;
    right: 16px;
    font-family: var(--font-hand);
    font-size: 2rem;
    font-weight: 700;
    color: var(--jaune);
    opacity: 0.5;
}

.process {
    padding: var(--section-py) 0;
    background: var(--ivoire-warm);
    border-top: 1.5px dashed var(--ivoire-dark);
    border-bottom: 1.5px dashed var(--ivoire-dark);
}

.process__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem 1.25rem;
    position: relative;
    padding-top: 1.75rem;
}
@media (max-width: 979px) {
    .process__grid {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin-inline: auto;
    }
}

/* ── LA FRISE DU PROCESS ───────────────────────────────────────────────
   Avant : quatre cartes encadrées, numéro dans une pastille. C'était le
   même objet graphique que la frise des métiers juste en dessous, et on
   lisait deux fois la même chose. Ici, plus de cadre : les étapes sont
   posées SUR un trait qui se dessine de gauche à droite quand la section
   arrive à l'écran. Le geste raconte la suite des étapes, que quatre
   cartes côte à côte ne racontaient pas.

   Le trait part de la pastille 01 et s'arrête à la 04 — d'où les 12,5 %
   de retrait de chaque côté, soit un demi-intervalle sur quatre colonnes. */
.process__trait {
    position: absolute;
    top: calc(1.75rem + 2px);
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: repeating-linear-gradient(90deg,
        var(--crayon-light) 0 8px, transparent 8px 15px);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.5s var(--ease-doux);
    z-index: 0;
}
.process__frise.visible .process__trait { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
    .process__trait { transition: none; transform: scaleX(1); }
}
@media (max-width: 979px) {
    /* En colonne, le trait est vertical et part du haut. */
    .process__trait {
        top: calc(1.75rem + 2px); bottom: 3rem;
        left: 50%; right: auto; width: 2px; height: auto;
        background: repeating-linear-gradient(180deg,
            var(--crayon-light) 0 8px, transparent 8px 15px);
        transform: scaleY(0); transform-origin: top center;
    }
    .process__frise.visible .process__trait { transform: scaleY(1); }
}
.process-card {
    --accent: var(--vert);
    text-align: center;
    padding: 2.4rem 1.1rem 1.5rem;
    position: relative;
    z-index: 1;
    background: none;
    border: 0;
    /* Chaque étape monte à son tour, dans le sens du trait. On ne touche
       QUE la position : l'opacité appartient à `.reveal`, qui porte déjà
       son filet de sécurité — si le navigateur ne sait pas observer, le
       script rend tout visible d'emblée. Doubler l'opacité ici aurait
       effacé les quatre étapes le jour où l'animation rate. */
    transform: translateY(14px);
    transition: transform .6s var(--ease-pose);
}
.process__frise.visible .process-card { transform: translateY(0); }
.process__frise.visible .process-card:nth-child(2) { transition-delay: .18s; }
.process__frise.visible .process-card:nth-child(3) { transition-delay: .50s; }
.process__frise.visible .process-card:nth-child(4) { transition-delay: .82s; }
.process__frise.visible .process-card:nth-child(5) { transition-delay: 1.14s; }
.process-card:nth-child(2) { --accent: var(--vert); }
.process-card:nth-child(3) { --accent: var(--jaune); }
.process-card:nth-child(4) { --accent: var(--lie); }
.process-card:nth-child(5) { --accent: var(--bleu); }

@media (prefers-reduced-motion: reduce) {
    .process-card { transform: none; transition: none; }
}

.process-card__number {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%) rotate(-7deg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--accent);
    /* Un anneau ivoire : la pastille doit couvrir le trait qu'elle touche,
       sinon les pointillés lui passent au travers. */
    border: 2px solid var(--charbon);
    box-shadow: 0 0 0 6px var(--ivoire);
    border-radius: 50% 45% 55% 48% / 48% 52% 46% 54%;
    font-family: var(--font-hand);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ivoire);
    line-height: 1;
}
.process-card__icon {
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: .3rem 0 .9rem;
}
.process-card__icon img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}
.process-card h3 {
    font-family: var(--font-hand);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--charbon);
    margin-bottom: .4rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.process-card h3::after {
    content: '';
    display: block;
    width: 42px;
    height: 5px;
    margin: .3rem auto 0;
    background: var(--accent);
    opacity: .35;
    border-radius: 4px 2px 5px 2px / 2px 5px 2px 4px;
}
.process-card p {
    font-size: 0.95rem;
    color: var(--crayon-light);
}

@media (max-width: 979px) {
    .process__grid::before { display: none; }
}

.deplacement {
    padding: clamp(2rem, 4vw, 3rem) 0;
    background: var(--ivoire-warm);
    border-top: 1.5px dashed var(--ivoire-dark);
    border-bottom: 1.5px dashed var(--ivoire-dark);
}
.deplacement__bloc {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
}
.deplacement__icone {
    flex: 0 0 auto;
    width: 108px;
}
.deplacement__texte {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--crayon);
}
.deplacement__texte strong { color: var(--charbon); }
.deplacement__lien {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-hand);
    font-size: 1.3rem;
    color: var(--lie);
    text-decoration: none;
    min-height: 44px;
    border-bottom: 1.5px solid transparent;
    transition: border-color var(--t-moyen) var(--ease-doux), gap var(--t-moyen) var(--ease-pose),
                scale var(--t-vif) var(--ease-doux);
}
.deplacement__lien svg { width: 26px; height: auto; }
@media (hover: hover) {
    .deplacement__lien:hover {
        border-bottom-color: var(--lie);
        gap: .8rem;
    }
}

.regions__ancrage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}
.regions__terrain {
    background: var(--ivoire);
    border: 1.5px solid var(--charbon);
    border-radius: var(--r-hand-sm);
    padding: 1.6rem 1.7rem;
    box-shadow: 4px 5px 0 rgba(142, 74, 90, 0.11);
}
.regions__terrain:nth-child(odd)  { transform: rotate(-.4deg); }
.regions__terrain:nth-child(even) { transform: rotate(.35deg); }
.regions__terrain p {
    margin: 0;
    font-size: .97rem;
    line-height: 1.7;
    color: var(--crayon);
}
.regions__terrain-titre {
    font-family: var(--font-hand);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--lie);
    margin: 0 0 .6rem;
}
.regions__sous-titre {
    font-family: var(--font-hand);
    font-size: clamp(1.7rem, 3.4vw, 2.2rem);
    font-weight: 700;
    color: var(--charbon);
    text-align: center;
    margin: 0 0 1.5rem;
}
.regions__faq { margin-top: 3.5rem; }
.regions__q {
    font-family: var(--font-hand);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--charbon);
    margin: 1.8rem 0 .4rem;
}
.regions__r {
    margin: 0;
    max-width: 68ch;
    font-size: .98rem;
    line-height: 1.75;
    color: var(--crayon);
}

.tunnel--vigneron  { --accent: var(--vert); }
.tunnel--agent     { --accent: var(--vert-light); }
.tunnel--grossiste { --accent: var(--jaune); }
.tunnel--caviste   { --accent: var(--bleu); }
.tunnel--bar       { --accent: var(--lie-light); }
.tunnel--resto     { --accent: var(--lie); }

body { --accent: var(--vert); }
body:has(.tunnel--agent)     { --accent: var(--vert-light); }
body:has(.tunnel--grossiste) { --accent: var(--jaune); }
body:has(.tunnel--caviste)   { --accent: var(--bleu); }
body:has(.tunnel--bar)       { --accent: var(--lie-light); }
body:has(.tunnel--resto)     { --accent: var(--lie); }

.tunnel {
    padding: clamp(6.5rem, 12vw, 9rem) 0 var(--section-py);
}

.tunnel__retour {
    display: inline-block;
    margin-bottom: 1.6rem;
    padding: .45rem .1rem;
    font-family: var(--font-hand);
    font-size: 1.1rem;
    color: var(--crayon-light);
    text-decoration: none;
}
.tunnel__retour:hover { color: var(--accent); }

.tunnel__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.8rem, 4vw, 3.5rem);
    align-items: center;
}
.tunnel__titre {
    font-family: var(--font-hand);
    font-size: clamp(2.4rem, 5.4vw, 4rem);
    font-weight: 700;
    line-height: 1.02;
    text-transform: uppercase;
    margin: .3rem 0 1rem;
    color: var(--charbon);
}
.tunnel__chapo {
    color: var(--crayon);
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 46ch;
}
.tunnel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.6rem;
}

/* ── LE RAPPEL DE L'OFFRE, DANS LE HERO ────────────────────────────────
   Nathan, 23/09/2026 : « pour les offres, il ne faut pas mettre une photo
   mais le rappel de l'offre en question, le même design que sur la page
   d'accueil ». La photo y était décorative — une grappe, un village —
   quand ce que le visiteur cherche à cet instant, c'est ce que la formule
   contient et ce qu'elle coûte.

   C'est donc la carte de l'accueil qui vient là, À L'IDENTIQUE : aucune
   règle ne la retouche, et c'est voulu — le jour où la carte change sur
   l'accueil, le rappel suit sans qu'on y pense. Deux choses seulement
   sont retirées du balisage : l'animation d'entrée, qui appartient à une
   liste et non à un élément seul, et le bouton « Partez de cette
   formule », qui vit déjà dans les actions du hero, trente centimètres à
   gauche — deux appels identiques côte à côte se neutralisent.

   La classe `.tunnel__rappel` reste posée comme prise : elle ne sert à
   rien aujourd'hui, elle servira le jour où le hero demandera un écart. */

.tunnel__photo {
    position: relative;
    margin: 0;
    padding: 12px 12px 0;
    background: #fff;
    border-radius: var(--r-hand-sm);
    box-shadow: 0 18px 40px rgba(142, 74, 90, 0.18);
    transform: rotate(1.4deg);
}
.tunnel__photo img {
    display: block;
    width: 100%;
    height: clamp(240px, 34vw, 400px);
    object-fit: cover;
    border-radius: 4px;
}

/* Le logo en grand, à la place de la photo, sur « Qui on est ». Il porte
   son propre halo d'aquarelle : pas de cadre, pas d'ombre portée — un
   cadre autour d'un fondu le transformerait en vignette. */
.tunnel__marque { margin: 0; display: grid; place-items: center; }
.tunnel__marque img {
    display: block; width: min(100%, 460px); height: auto;
    filter: drop-shadow(0 14px 22px rgba(142, 74, 90, .10));
}
@media (max-width: 900px) {
    .tunnel__marque { order: -1; }
    .tunnel__marque img { width: min(62vw, 280px); }
}

.tunnel__photo figcaption {
    padding: .7rem .3rem .8rem;
    font-family: var(--font-hand);
    font-size: 1.02rem;
    color: var(--crayon-light);
    text-align: center;
}

/* ── Les quatre offres en miniature, à la place de la photo (/offres/) ──
   Nathan, 22/09 : « remplace la photo par un format miniature de nos 4
   offres, avec le design, et cliquable ». Les couleurs, les emblèmes et
   les prix des grandes cartes plus bas, en format timbre : on voit ce
   que ça coûte avant d'avoir à descendre, et chaque timbre mène à sa
   page. Posés de travers, un peu, comme des cartes sur une table. */
.apercu-offres {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 1rem;
    align-content: center;
}
.apercu-offre {
    --accent: var(--charbon);
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    padding: 1rem .7rem 1.05rem;
    text-align: center; text-decoration: none; color: var(--charbon);
    background: var(--ivoire);
    border: 1.5px solid var(--accent);
    border-radius: var(--r-hand-sm);
    box-shadow: 0 12px 26px rgba(142, 74, 90, 0.10);
    transform: rotate(var(--penche, 0deg));
    transition: transform var(--t-moyen) var(--ease-pose), box-shadow var(--t-moyen) var(--ease-doux);
}
.apercu-offre:nth-child(1) { --penche: -1.2deg; }
.apercu-offre:nth-child(2) { --penche: .9deg; }
.apercu-offre:nth-child(3) { --penche: .7deg; }
.apercu-offre:nth-child(4) { --penche: -.8deg; }
@media (hover: hover) {
    .apercu-offre:hover {
        transform: translateY(-4px) rotate(0deg);
        box-shadow: 5px 6px 0 rgba(142, 74, 90, 0.14);
    }
}
.apercu-offre:focus-visible { outline: 3px solid var(--lie); outline-offset: 3px; }
.apercu-offre--decouverte { --accent: var(--vert); }
.apercu-offre--visibilite { --accent: #b8912f; }
.apercu-offre--signature  { --accent: var(--lie); border-width: 2.5px; }
.apercu-offre--surmesure  { --accent: var(--bleu); }
/* LE RÉFÉRENCEMENT NE PEUT PAS PRENDRE LE BLEU DE SA FAMILLE.
   « Web & référencement » est bleu dans le configurateur, et la cohérence
   aurait voulu ce bleu ici. Mais Sur mesure le porte déjà, et les deux
   cartes se suivent sur /offres/ : mesuré, l'écart perceptuel valait ΔE 0.
   Deux offres qu'on ne distingue pas valent moins qu'une famille dont la
   couleur se décale d'une page à l'autre.
   Le prune du vin peint est ce que la palette offre de mieux. Une couleur
   d'accent n'est pas décorative ici : le nom de l'offre est écrit en
   ivoire SUR elle (la capsule porte un dégradé centré dessus), et elle
   sert de texte ailleurs. Elle doit donc rester lisible — 5,38:1 contre
   l'ivoire — et c'est la plus éloignée des quatre déjà prises
   (ΔE 14,5 de Signature, la plus proche).
   Le jaune et la brique sont plus distincts encore, et illisibles : 1,89
   et 2,44. (29/09/2026) */
.apercu-offre--referencement { --accent: var(--lie-light); }
/* LA SIXIÈME CARTE PREND L'ENCRE, PARCE QUE LA PALETTE EST VIDE.
   Les cinq accents colorés sont pris. Mesuré sur les deux critères qui
   comptent — une couleur d'accent porte du texte : --prune est lisible
   mais à ΔE 8,6 de Signature, --jaune et --brique sont distincts et
   illisibles (1,89 et 2,44). --charbon est à 11,9:1 et à ΔE 31 du plus
   proche : le seul jeton qui tienne les deux.
   Et le sens suit la forme : la publicité est la seule offre où l'on
   paie un tiers. Une carte au trait, pas au lavis. (29/09/2026) */
.apercu-offre--publicite { --accent: var(--charbon); }
/* 13/10/2026 — deux encres de plus, calculées (pas de color-mix : un navigateur qui ne le lit pas perdrait la bordure).
   Community : vert et bleu à parts égales, 5,27:1 sur l'ivoire. Présence : l'ambre du fût, jaune 35 % et lie, 4,89:1. */
.apercu-offre--community { --accent: #4c6664; }
.apercu-offre--presence { --accent: #905840; }
.apercu-offre__capsule {
    padding: .28rem .85rem .34rem;
    border-radius: var(--r-hand-btn);
    transform: rotate(-.6deg);
    background: linear-gradient(176deg,
        color-mix(in srgb, var(--accent) 86%, #fff) 0%,
        var(--accent) 62%,
        color-mix(in srgb, var(--accent) 92%, var(--charbon)) 100%);
    font-family: var(--font-hand); font-size: 1.32rem; font-weight: 700; line-height: 1.05;
    text-transform: uppercase; letter-spacing: .03em; color: var(--ivoire);
    white-space: nowrap;
}
.apercu-offre__embleme {
    display: block; width: auto; height: 66px; object-fit: contain;
    mix-blend-mode: multiply;
}
.apercu-offre__cuvee {
    font-family: var(--font-hand); font-size: 1.08rem; line-height: 1.1;
    text-transform: uppercase; letter-spacing: .02em; color: var(--accent);
}
.apercu-offre__prix {
    font-family: var(--font-hand); font-size: 1.28rem; font-weight: 700; line-height: 1;
    padding: .28rem .6rem; white-space: nowrap;
    border: 1.5px solid var(--accent); border-radius: var(--r-hand-btn);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.apercu-offre__prix small { font-size: .9rem; font-weight: 400; color: var(--crayon-light); }
.apercu-offre__ruban {
    position: absolute; top: -.75rem; right: .5rem;
    padding: .2rem .6rem .25rem;
    background: var(--accent); color: var(--ivoire);
    font-family: var(--font-hand); font-size: .95rem; line-height: 1; white-space: nowrap;
    border-radius: var(--r-hand-btn); transform: rotate(2deg);
}
.apercu-offres__legende {
    grid-column: 1 / -1; margin: .15rem 0 0; text-align: center;
    font-family: var(--font-hand); font-size: 1.05rem; color: var(--crayon-light);
}
@media (max-width: 640px) {
    .apercu-offres { gap: .9rem .6rem; }
    .apercu-offre { padding: .85rem .45rem .8rem; gap: .3rem; }
    .apercu-offre__capsule { font-size: 1.08rem; padding: .22rem .6rem .28rem; }
    .apercu-offre__embleme { height: 44px; }
    .apercu-offre__cuvee { font-size: .95rem; }
    .apercu-offre__prix { font-size: 1.02rem; padding: .22rem .45rem; }
    .apercu-offre__ruban { font-size: .82rem; right: .3rem; }
}

.tunnel-obj { padding: 0 0 var(--section-py); }
.tunnel-obj__bloc {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: clamp(1.2rem, 3vw, 2.2rem);
    align-items: start;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    background: var(--ivoire-warm);
    border-left: 5px solid var(--accent);
    border-radius: var(--r-hand-md);
}
.tunnel-obj__dessin { width: auto; max-width: 96px; height: auto; }
.tunnel-obj__titre {
    font-family: var(--font-hand);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 .7rem;
    color: var(--charbon);
}
.tunnel-obj__bloc p {
    margin: 0;
    color: var(--crayon);
    line-height: 1.75;
    max-width: 68ch;
}

.tunnel-liv { padding: var(--section-py) 0; background: var(--ivoire-warm); border-top: 1.5px dashed var(--ivoire-dark); }
.tunnel-liv__grille {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(.9rem, 2vw, 1.6rem);
}
.tunnel-liv__item {
    padding: clamp(1.2rem, 2.4vw, 1.8rem);
    background: var(--ivoire);
    border: 2px solid var(--crayon);
    border-radius: var(--r-hand-md);
}

.tunnel-liv__icone {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 78px;
    object-fit: contain;
    object-position: left center;
    margin-bottom: .9rem;
}

.tunnel-liv__item { display: flex; flex-direction: column; }
.tunnel-liv__item > .tunnel-liv__icone { min-height: 78px; }
.tunnel-liv__item h3 {
    font-family: var(--font-hand);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 .45rem;
    color: var(--charbon);
}
.tunnel-liv__item p { margin: 0; color: var(--crayon); font-size: 0.95rem; line-height: 1.6; }

.tunnel-mom { padding: var(--section-py) 0; }
.tunnel-mom__rail {
    list-style: none;
    margin: 0;
    padding: 0 0 1rem;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 1fr);
    gap: clamp(.9rem, 2vw, 1.5rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    
    scrollbar-width: none;
}
.tunnel-mom__rail::-webkit-scrollbar { display: none; }
.tunnel-mom__item {
    scroll-snap-align: start;
    padding: clamp(1.1rem, 2.2vw, 1.6rem);
    background: var(--ivoire-warm);
    border: 2px solid var(--ivoire-dark);
    border-radius: var(--r-hand-md);
}

.tunnel-mom__item--fort { border-color: var(--accent); background: var(--ivoire); }

/* Le dessin du temps fort. Il est plafonné en hauteur, pas en largeur : un
   coffret est large, une bougie est haute, et les quatre cartes du rail
   doivent garder la même ligne de texte. */
.tunnel-mom__dessin {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 86px;
    object-fit: contain;
    object-position: left bottom;
    margin-bottom: .7rem;
}

.tunnel-mom__vigne {
    width: 100%;
    aspect-ratio: 227 / 160;
    margin-bottom: .8rem;
    background-image: url('saisons.jpg');
    background-size: 617.3% auto;
    background-repeat: no-repeat;
    background-position: var(--vigne-x) 56.1%;
    border: 1.5px solid var(--charbon);
    border-radius: var(--r-hand-sm);
}
.tunnel-mom__item:nth-child(1) .tunnel-mom__vigne { --vigne-x: 5.1%; }
.tunnel-mom__item:nth-child(2) .tunnel-mom__vigne { --vigne-x: 34%; }
.tunnel-mom__item:nth-child(3) .tunnel-mom__vigne { --vigne-x: 62.8%; }
.tunnel-mom__item:nth-child(4) .tunnel-mom__vigne { --vigne-x: 91.6%; }
.tunnel-mom__quand {
    display: inline-block;
    margin-bottom: .5rem;
    padding: .12rem .6rem;
    font-family: var(--font-hand);
    font-size: .98rem;
    color: var(--charbon);
    background: var(--jaune-bg);
    border-radius: 12px 4px 10px 5px / 5px 10px 4px 12px;
}
.tunnel-mom__item h3 {
    font-family: var(--font-hand);
    font-size: 1.45rem;
    font-weight: 700;
    margin: 0 0 .4rem;
    color: var(--charbon);
}
.tunnel-mom__item p { margin: 0; color: var(--crayon); font-size: 0.95rem; line-height: 1.6; }

.tunnel-offre { padding: 0 0 var(--section-py); }
.tunnel-offre__bloc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: clamp(1.2rem, 3vw, 2.5rem);
    align-items: center;
    padding: clamp(1.6rem, 3.2vw, 2.6rem);
    background: var(--ivoire-warm);
    border: 2px dashed var(--accent);
    border-radius: var(--r-hand-md);
}
.tunnel-offre__titre {
    font-family: var(--font-hand);
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    font-weight: 700;
    line-height: 1.12;
    margin: .2rem 0 .7rem;
    color: var(--charbon);
}
.tunnel-offre__texte p { margin: 0; color: var(--crayon); line-height: 1.7; max-width: 60ch; }

.tunnel-offre__rythme {
    margin-top: .9rem !important;
    font-family: var(--font-hand);
    font-size: 1.1rem;
    color: var(--charbon) !important;
    line-height: 1.4 !important;
}
.tunnel-offre__rythme a { color: var(--lie); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.tunnel-offre__dessin {
    width: auto;
    max-width: 180px;
    height: auto;
    justify-self: center;
}

.tunnel-fin {
    padding: var(--section-py) 0;
    background: var(--ivoire-warm);
    border-top: 1.5px dashed var(--ivoire-dark);
    text-align: center;
}
.tunnel-fin__titre {
    font-family: var(--font-hand);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 .9rem;
    color: var(--charbon);
}
.tunnel-fin__texte {
    margin: 0 auto 1.8rem;
    max-width: 60ch;
    color: var(--crayon);
    line-height: 1.7;
}

@media (max-width: 900px) {
    .tunnel__hero { grid-template-columns: 1fr; }
    
    .tunnel__photo { order: -1; transform: rotate(-1.1deg); }
    .tunnel-liv__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tunnel-offre__bloc { grid-template-columns: 1fr; }
    .tunnel-offre__dessin { width: 130px; order: -1; }
}

@media (max-width: 640px) {
    
    .tunnel-obj__bloc { grid-template-columns: 62px minmax(0, 1fr); gap: .9rem; align-items: center; }
    .tunnel-obj__dessin { width: 62px; }
    .tunnel-obj__bloc > div { grid-column: 1 / -1; }
    .tunnel-obj__titre { font-size: 1.35rem; }

    
    .tunnel-liv__icone { height: 54px; object-position: center; }
    .tunnel-liv__item { padding: .95rem .85rem; }
    .tunnel-liv__item h3 { font-size: 1.18rem; }
    .tunnel-liv__item p { font-size: 0.95rem; line-height: 1.5; }

    
    .tunnel-mom__rail {
        grid-auto-columns: 78%;
        margin-inline: calc(var(--gutter) * -1);
        padding: 0 var(--gutter) 1rem;
        scroll-padding-left: var(--gutter);
    }

    .tunnel__actions .btn { flex: 1 1 100%; justify-content: center; }
    .tunnel__photo img { height: 220px; }
}

.regions {
    padding: var(--section-py) 0;
    background: var(--ivoire-warm);
    border-top: 1.5px dashed var(--ivoire-dark);
    border-bottom: 1.5px dashed var(--ivoire-dark);
}
.regions__list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    gap: .9rem;
}
.regions__item {
    background: var(--ivoire);
    border: 1.5px solid var(--charbon);
    border-radius: var(--r-hand-sm);
    padding: .85rem 1rem;
    transition: transform var(--t-moyen) var(--ease-pose), box-shadow var(--t-moyen) var(--ease-doux),
                scale var(--t-vif) var(--ease-doux);
}
.regions__item:nth-child(3n)   { transform: rotate(-.5deg); }
.regions__item:nth-child(3n+2) { transform: rotate(.4deg); }
.regions__item.is-active {
    transform: rotate(0) translateY(-3px);
    box-shadow: 4px 4px 0 rgba(142, 74, 90, 0.12);
}
@media (hover: hover) {
    .regions__item:hover {
        transform: rotate(0) translateY(-3px);
        box-shadow: 4px 4px 0 rgba(142, 74, 90, 0.12);
    }
}

.regions__item--ailleurs {
    border-style: dashed;
    border-color: var(--lie);
    background: var(--lie-bg);
    padding: 0;
}
.regions__item--ailleurs a {
    display: block;
    padding: .85rem 1rem;
}
.regions__item--ailleurs .regions__name { color: var(--lie); }
.regions__name {
    display: block;
    font-family: var(--font-hand);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--charbon);
}
.regions__note {
    display: block;
    font-size: 0.95rem;
    color: var(--crayon-light);
    margin-top: .1rem;
}

/* Du fond, sinon la page est blanche. La carte flottait sur l'ivoire nu :
   beaucoup de clair autour d'elle, et rien qui la situe dans la page. Même
   traitement que la carte des vignobles — une photo sous un voile épais, on
   ne la lit pas, on sent qu'il y a de la matière. */
.evin {
    position: relative;
    padding: var(--section-py) 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image:
        linear-gradient(rgba(240, 233, 221, .91), rgba(240, 233, 221, .87)),
        url("/assets/photos/fonds/fond-serv.jpg");
}
.evin > .container { position: relative; z-index: 1; }
.evin__card {
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 1.4rem;
    align-items: start;
    background: var(--ivoire-warm);
    border: 2px solid var(--charbon);
    border-radius: var(--r-hand);
    padding: 2rem 2.2rem;
    box-shadow: 5px 6px 0 rgba(142, 74, 90, 0.11);
    transform: rotate(-.4deg);
}
.evin__icon {
    width: 78px;
    height: auto;
    mix-blend-mode: multiply;
    filter: brightness(1.13);
}
.evin__title {
    font-family: var(--font-hand);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 700;
    color: var(--charbon);
    margin-bottom: .5rem;
}
.evin__text { color: var(--crayon); line-height: 1.75; margin-bottom: .9rem; }
.evin__list { list-style: none; display: grid; gap: .45rem; }
.evin__list li {
    position: relative;
    padding-left: 1.5rem;
    font-size: .95rem;
    color: var(--crayon);
}
.evin__list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--vert);
    font-weight: 700;
}

.services { padding: var(--section-py) 0; }
.services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}
.service-card {
    background: var(--ivoire);
    border: 1.5px solid var(--charbon);
    border-radius: var(--r-hand-sm);
    padding: 2rem;
    transition: transform var(--t-moyen) var(--ease-pose), box-shadow var(--t-moyen) var(--ease-doux),
                scale var(--t-vif) var(--ease-doux);
    position: relative;
    overflow: hidden;
}
@media (hover: hover) {
    .service-card:hover {
        transform: translateY(-4px) rotate(-0.3deg);
        box-shadow: 4px 4px 0 rgba(142, 74, 90, 0.11);
    }
}

.service-card--large {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 72px 1fr;
    column-gap: 1.6rem;
    align-items: start;
}
.service-card--large .service-card__icon {
    grid-row: 1 / span 3;
    height: 72px;
    margin-bottom: 0;
}
.service-card--large p { max-width: 76ch; }
.service-card--large .service-card__tag { justify-self: start; }
.service-card__icon {
    height: 52px;
    margin-bottom: 1rem;
}
.service-card__icon img {
    height: 100%;
    width: auto;
}
.service-card h3 {
    font-family: var(--font-hand);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--charbon);
    margin-bottom: .5rem;
    text-transform: uppercase;
}

.service-card__alias {
    display: inline-block;
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .01em;
    text-transform: none;
    color: var(--crayon-light);
    vertical-align: middle;
}
.service-card p {
    font-size: 0.95rem;
    color: var(--crayon-light);
    line-height: 1.7;
}
.service-card__tag {
    display: inline-block;
    margin-top: .75rem;
    font-family: var(--font-hand);
    font-size: 0.95rem;
    color: var(--vert);
    padding: .2rem .7rem;
    border: 1px dashed var(--vert);
    border-radius: 10px 3px 12px 3px / 3px 10px 3px 12px;
}

.service-card::before {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    width: 30px;
    height: 30px;
    border-bottom: 1.5px solid var(--charbon);
    border-left: 1.5px solid var(--charbon);
    border-radius: 0 0 0 12px;
    opacity: 0.3;
}

.pricing { padding: var(--section-py) 0; }

.offres__grille {
    display: grid;
    
    grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
    gap: 1.75rem;
    align-items: stretch;
}
.offre {
    --accent: var(--charbon);
    position: relative;
    background: var(--ivoire);
    border: 1.5px solid var(--accent);
    border-radius: var(--r-hand-sm);
    padding: 2.1rem 1.9rem 1.9rem;
    
    display: grid;
    grid-template-columns: 200px 1fr;
    
    grid-template-rows: auto 1fr;
    gap: 1.6rem 1.9rem;
    transition: transform var(--t-moyen) var(--ease-pose), box-shadow var(--t-moyen) var(--ease-doux),
                scale var(--t-vif) var(--ease-doux);
}
.offre--decouverte { --accent: var(--vert); }
.offre--visibilite { --accent: #b8912f; }
.offre--signature  { --accent: var(--lie); }
.offre--surmesure  { --accent: var(--bleu); }
.offre--referencement { --accent: var(--lie-light); }
.offre--publicite { --accent: var(--charbon); }
.offre--community { --accent: #4c6664; }
.offre--presence { --accent: #905840; }
@media (hover: hover) {
    .offre:hover {
        transform: translateY(-4px) rotate(-.3deg);
        box-shadow: 5px 5px 0 rgba(142, 74, 90, 0.12);
    }
}

.offre--phare { border-width: 2.5px; }
.offre__ruban {
    position: absolute;
    top: -.85rem;
    right: 1.6rem;
    background: var(--accent);
    color: var(--ivoire);
    font-family: var(--font-hand);
    font-size: 1.02rem;
    line-height: 1;
    padding: .3rem .85rem .35rem;
    border-radius: var(--r-hand-btn);
    transform: rotate(1.5deg);
    white-space: nowrap;
}

.offre__capsule {
    grid-column: 1 / -1;
    
    justify-self: start;
    width: fit-content;
    max-width: 100%;
    margin: -.4rem 0 .2rem;
    padding: .5rem 1.2rem .6rem;
    border-radius: var(--r-hand-btn);
    transform: rotate(-.6deg);
    
    background:
        repeating-linear-gradient(92deg,
            rgba(255, 255, 255, .11) 0 1px,
            transparent 1px 9px),
        repeating-linear-gradient(95deg,
            rgba(142, 74, 90, 0.09) 0 1px,
            transparent 1px 14px),
        linear-gradient(176deg,
            color-mix(in srgb, var(--accent) 86%, #fff) 0%,
            var(--accent) 62%,
            color-mix(in srgb, var(--accent) 92%, var(--charbon)) 100%);
    
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0, #000 10px, #000 calc(100% - 13px), transparent 100%);
    mask-image: linear-gradient(90deg,
        transparent 0, #000 10px, #000 calc(100% - 13px), transparent 100%);
}
.offre__nom {
    margin: 0;
    font-family: var(--font-hand);
    font-size: clamp(1.85rem, 3.4vw, 2.35rem);
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ivoire);
    
    text-shadow: 1px 1px 0 rgba(142, 74, 90, 0.18);
}

.offre__identite {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    justify-content: center;
    text-align: center;
    
    border-right: 1.5px dashed var(--ivoire-dark);
    padding-right: 1.6rem;
}

.offre__embleme {
    display: block;
    object-fit: contain;
    height: 124px;
    width: auto;
    margin-bottom: .7rem;
    mix-blend-mode: multiply;
}
.offre__cuvee {
    font-family: var(--font-hand);
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--accent);
    margin-bottom: .9rem;
}
.offre__prix {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .35rem;
    margin: 0;
}
.offre__montant {
    font-family: var(--font-hand);
    font-size: clamp(1.55rem, 2.5vw, 1.95rem);
    font-weight: 700;
    line-height: 1;
    color: var(--charbon);
    white-space: nowrap;
    padding: .35rem .8rem;
    border: 1.5px solid var(--accent);
    border-radius: var(--r-hand-btn);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.offre__montant--devis { font-size: 1.5rem; }

/* La promesse en tête de la carte sur mesure : elle dit ce que l'offre
   évite plutôt que ce qu'elle contient. La liste juste dessous dit déjà
   le contenu. */
.offre__promesse {
    font-family: var(--font-hand);
    font-size: clamp(1.25rem, 2.2vw, 1.55rem);
    line-height: 1.15;
    color: var(--accent);
    margin: 0 0 .6rem;
}
.offre__ht {
    font-family: var(--font-hand);
    font-size: 1.05rem;
    color: var(--crayon-light);
}

.offre__contenu {
    display: flex;
    flex-direction: column;
}
.offre__liste {
    margin: 0 0 1.4rem;
    flex: 1;
}
.offre__liste li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-family: var(--font-hand);
    font-size: 1.22rem;
    line-height: 1.4;
    color: var(--charbon);
    padding: .55rem 0;
    border-bottom: 1px dashed var(--ivoire-dark);
}
.offre__liste li:last-child { border-bottom: none; }

.offre__liste li::before {
    content: '';
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    margin-top: .48rem;
    background: var(--accent);
    border-radius: 45% 60% 50% 40%;
}

.offre__liste--compacte li {
    font-size: 1.1rem;
    padding: .34rem 0;
}
.offre__liste--compacte li::before { margin-top: .4rem; }

.offre__intro-liste {
    margin: 0 0 .5rem;
    font-family: var(--font-hand);
    font-size: 1.1rem;
    color: var(--crayon);
}

.offre__texte {
    flex: 1;
    font-family: var(--font-hand);
    font-size: 1.22rem;
    line-height: 1.5;
    color: var(--charbon);
    margin: 0 0 1.4rem;
}
.offre__note {
    font-family: var(--font-hand);
    font-size: 1.12rem;
    line-height: 1.35;
    text-align: center;
    color: var(--accent);
    margin-top: .85rem;
}

.rythme {
    margin-top: clamp(2rem, 4vw, 3rem);
    padding: clamp(1.6rem, 3.5vw, 2.6rem);
    background: var(--ivoire-warm);
    border: 2px solid var(--vert);
    border-radius: var(--r-hand-md);
}
.rythme__intro {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 1.8rem);
    align-items: center;
    margin-bottom: clamp(1.4rem, 3vw, 2rem);
}
.rythme__icone { width: 100%; height: auto; }
.rythme__titre {
    font-family: var(--font-hand);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.05;
    margin-bottom: .5rem;
}
.rythme__texte { color: var(--crayon); line-height: 1.6; max-width: 62ch; }

.rythme__echelle {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(.7rem, 1.6vw, 1.1rem);
}
.rythme__palier {
    position: relative;
    display: grid;
    align-content: start;
    gap: .35rem;
    padding: 1.1rem 1rem;
    background: var(--ivoire);
    border: 1.5px solid var(--crayon);
    border-radius: var(--r-hand-sm);
}
.rythme__palier:nth-child(odd)  { transform: rotate(-.5deg); }
.rythme__palier:nth-child(even) { transform: rotate(.45deg); }
.rythme__palier--phare { border: 2px solid var(--vert); background: var(--ivoire-warm); }
.rythme__ruban {
    position: absolute; top: -.8rem; left: 50%;
    transform: translateX(-50%) rotate(-1deg);
    white-space: nowrap;
    padding: .05rem .7rem;
    font-family: var(--font-hand);
    font-size: .95rem;
    color: var(--ivoire);
    background: var(--vert);
    border-radius: var(--r-hand-btn);
}
.rythme__quand {
    font-family: var(--font-hand);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.15;
}
.rythme__remise {
    font-family: var(--font-hand);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--lie);
}

.rythme__palier:first-child .rythme__remise { font-size: 1.15rem; color: var(--crayon-light); }
.rythme__detail { font-size: 0.95rem; color: var(--crayon); line-height: 1.45; }

.rythme__fine {
    margin-top: clamp(1.1rem, 2.5vw, 1.6rem);
    padding-top: 1rem;
    border-top: 1.5px dashed var(--ivoire-dark);
    font-size: 0.95rem;
    color: var(--crayon-light);
    line-height: 1.6;
}

@media (max-width: 900px) {
    .rythme__echelle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .rythme { padding: 1.2rem 1rem; }
    .rythme__intro { grid-template-columns: 56px minmax(0, 1fr); gap: .9rem; margin-bottom: 1.1rem; }
    .rythme__titre { font-size: 1.5rem; }
    .rythme__texte { font-size: 0.95rem; }
    .rythme__echelle { grid-template-columns: 1fr; gap: .55rem; }
    .rythme__palier {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
        padding: .7rem .9rem;
        gap: .2rem .8rem;
    }
    .rythme__quand   { grid-column: 1; font-size: 1.1rem; }
    .rythme__remise  { grid-column: 2; grid-row: 1; text-align: right; font-size: 1.6rem; }
    .rythme__detail  { grid-column: 1 / -1; font-size: .8rem; }
    .rythme__ruban   { position: static; transform: none; justify-self: start;
                       grid-column: 1 / -1; margin-bottom: .15rem; font-size: 0.95rem; }
    .rythme__fine { font-size: 0.95rem; }
}

.pricing__option {
    margin-top: 2rem;
    background: var(--ivoire-warm);
    border: 1.5px solid var(--bleu);
    border-radius: var(--r-hand-sm);
    padding: 1.9rem 1.9rem;
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 1.4rem 1.7rem;
    align-items: start;
}

.pricing__option-icon { width: 72px; height: auto; margin-top: .15rem; }
.pricing__option .btn { align-self: center; }
.pricing__option-label {
    display: inline-block;
    font-family: var(--font-hand);
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bleu);
    margin-bottom: .2rem;
}
.pricing__option h3 {
    font-family: var(--font-hand);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--charbon);
    margin: 0 0 .35rem;
}
.pricing__option p {
    font-size: .97rem;
    line-height: 1.6;
    color: var(--crayon-light);
    margin: 0;
    max-width: 68ch;
}
.pricing__option-fine {
    display: block;
    font-family: var(--font-hand);
    font-size: 1.05rem;
    line-height: 1.45;
    color: var(--crayon-light);
    margin-top: .55rem;
}
@media (max-width: 760px) {
    
    .pricing__option {
        grid-template-columns: 44px 1fr;
        padding: 1.4rem 1.15rem;
        gap: .8rem .9rem;
    }
    .pricing__option-icon { width: 44px; }
    .pricing__option-body { grid-column: 2; }
    .pricing__option .btn { grid-column: 1 / -1; }
    .pricing__option-label { font-size: .95rem; letter-spacing: .04em; }
    .pricing__option h3 { font-size: 1.45rem; }
    .pricing__option p { font-size: 0.95rem; line-height: 1.55; }
    .pricing__option-fine { font-size: .98rem; }
}
.pricing__note {
    text-align: center;
    font-family: var(--font-hand);
    font-size: 1.2rem;
    color: var(--crayon-light);
    margin-top: 2.5rem;
}

@media (max-width: 560px) {
    .offre {
        grid-template-columns: 1fr;
        gap: 1.1rem;
        padding: 1.7rem 1.25rem 1.5rem;
    }
    .offre__identite {
        display: grid;
        /* Piste fixe et non `auto` : en carte étroite, la colonne de texte
           en `1fr` réclame sa largeur minimale et comprimait la piste
           `auto` sous la taille de l'emblème — le casier tombait à 37 px
           de large pour 76 demandés. */
        grid-template-columns: 76px 1fr;
        gap: 0 1rem;
        align-items: center;
        text-align: left;
        border-right: none;
        padding-right: 0;
        padding-bottom: 1.1rem;
        border-bottom: 1.5px dashed var(--ivoire-dark);
    }
    .offre__embleme {
        grid-row: 1 / 3;
        /* Contrainte par la largeur et non par la hauteur : la colonne
           `auto` qui la porte se faisait comprimer par le texte voisin,
           et l'image n'avait plus que 37 px pour 88 de haut. */
        width: 76px;
        height: auto;
        max-height: 96px;
        margin-bottom: 0;
    }
    .offre__cuvee { margin-bottom: .4rem; align-self: end; }
    .offre__prix { justify-content: flex-start; margin: 0; align-self: start; }
    .offre__nom { font-size: 1.8rem; }
    .offre__ruban { right: 1rem; font-size: .95rem; }
    .offre__liste li,
    .offre__texte { font-size: 1.14rem; }
}

.cta-section {
    padding: var(--section-py) 0;
    background: var(--charbon);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-section__title {
    font-family: var(--font-hand);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.cta-section__title .accent { color: var(--jaune); }
.cta-section__text {
    font-size: 1.05rem;
    opacity: 0.8;
    max-width: 550px;
    margin: 0 auto 2rem;
    line-height: 1.7;
}
.cta-section__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.recap {
    list-style: none;
    padding: 0;
    margin: 0 auto 2.25rem;
    max-width: 620px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.recap__item {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
}
.recap__num {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    font-family: var(--font-hand);
    font-size: 1.3rem;
    color: var(--charbon);
    background: var(--jaune);
    border-radius: var(--r-hand-btn);
    
    transform: rotate(-3deg);
}
.recap__item:nth-child(2) .recap__num { transform: rotate(2.5deg); }
.recap__item:nth-child(3) .recap__num { transform: rotate(-1.5deg); }
.recap__texte {
    font-size: 1rem;
    line-height: 1.6;
    opacity: .85;
}
.recap__texte strong { opacity: 1; color: #fff; }
.btn--white {
    background: var(--ivoire);
    color: var(--charbon);
    border: 2px solid var(--ivoire);
}
@media (hover: hover) {
    .btn--white:hover {
        background: #fff;
        transform: translateY(-2px) rotate(-0.5deg);
    }
}
.btn--ghost-light {
    color: var(--ivoire);
    border: 2px dashed rgba(255,255,255,.3);
}
.btn--ghost-light:hover {
    border-color: rgba(255,255,255,.6);
}
.cta-section__note {
    font-family: var(--font-hand);
    font-size: .95rem;
    opacity: 0.5;
    margin-top: 1.5rem;
}

.booking { padding: var(--section-py) 0 0; }
.booking__cadre {
    max-width: 820px;
    margin-inline: auto;
    padding: .6rem;
    background: var(--ivoire-warm);
    border: 1.5px solid var(--crayon);
    border-radius: var(--r-hand-md);
}

.booking__widget {
    min-width: min(320px, 100%);
    width: 100%;
    height: 700px;
    border-radius: var(--r-hand-sm);
    overflow: hidden;
    
    position: relative;
    z-index: 1;
}
/* Koalendar pose son cadre à 668 px de haut, quelle que soit la place :
   il prend désormais toute la hauteur du bloc (700 px, 860 sur
   téléphone) au lieu de laisser une bande vide dessous. */
.booking__widget iframe { height: 100%; }

.booking__attente {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: .5rem;
    padding: 1.5rem;
    text-align: center;
    color: var(--crayon-light);
    font-size: .95rem;
    line-height: 1.55;
}
.booking__attente-titre {
    font-family: var(--font-hand);
    font-size: 1.3rem;
    color: var(--charbon);
}
.booking__attente a { color: var(--lie); text-decoration: underline; }

.booking__cadre { position: relative; }

.booking__cadre--sans-agenda .booking__attente {
    position: static;
    padding: 1.8rem 1.2rem;
}

.booking__cadre--sans-agenda .booking__attente-titre { font-size: 0; }
.booking__cadre--sans-agenda .booking__attente-titre::after {
    content: "Le calendrier n'a pas pu s'afficher.";
    font-size: 1.3rem;
}

.rappel {
    max-width: 640px;
    margin: 2.2rem auto 0;
    padding: 1.6rem clamp(1rem, 3vw, 1.8rem);
    background: var(--ivoire-warm);
    border: 2px dashed var(--ivoire-dark);
    border-radius: 12px 4px 10px 5px / 5px 10px 4px 12px;
}
.rappel__intro { text-align: center; margin-bottom: 1.2rem; }
.rappel__titre {
    font-family: var(--font-hand);
    font-size: clamp(1.35rem, 3vw, 1.7rem);
    color: var(--charbon);
    margin-bottom: .3rem;
}
.rappel__texte { font-size: .95rem; color: var(--crayon-light); line-height: 1.55; }

.rappel__form { display: grid; gap: .85rem; }

.rappel__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.rappel__champ { display: grid; gap: .3rem; }
.rappel__champ > span {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--crayon);
}
.rappel__champ em { font-weight: 400; font-style: italic; color: var(--crayon-light); }
.rappel__champ input,
.rappel__champ textarea {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--charbon);
    padding: .6rem .7rem;
    background: var(--ivoire);
    border: 1.5px solid var(--ivoire-dark);
    border-radius: 6px 3px 5px 3px / 3px 5px 3px 6px;
    width: 100%;
    resize: vertical;
}
.rappel__champ input:focus,
.rappel__champ textarea:focus {
    outline: none;
    border-color: var(--lie);
    box-shadow: 0 0 0 3px rgba(114, 47, 55, .12);
}

.rappel__miel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.rappel__accord {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    font-size: 0.95rem;
    color: var(--crayon);
    line-height: 1.45;
}
.rappel__accord input { margin-top: .18rem; flex: 0 0 auto; accent-color: var(--lie); }
.rappel__accord a { color: var(--lie); text-decoration: underline; }

.rappel__erreur:empty { display: none; }
.rappel__erreur {
    font-size: 0.95rem;
    color: var(--lie);
    background: var(--lie-bg);
    border-left: 3px solid var(--lie);
    padding: .5rem .7rem;
    border-radius: 3px;
}
.rappel__envoi { justify-content: center; }
.rappel__merci {
    text-align: center;
    font-family: var(--font-hand);
    font-size: 1.3rem;
    color: var(--charbon);
    padding: 1rem 0;
}

@media (max-width: 640px) {
    .rappel {
        padding: 1.2rem .9rem;
        margin-top: 1.6rem;
        border-radius: 10px 4px 8px 4px / 4px 8px 4px 10px;
    }
    .rappel__intro { margin-bottom: .9rem; }
    .rappel__texte { font-size: 0.95rem; }
    .rappel__form { gap: .6rem; }

    
    .rappel__ligne { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .rappel__ligne + .rappel__ligne { grid-template-columns: 1fr; }

    .rappel__champ > span {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .rappel__champ input,
    .rappel__champ textarea {
        font-size: 16px;
        padding: .58rem .65rem;
    }
    .rappel__champ textarea { min-height: 74px; }
    .rappel__accord { font-size: .8rem; }
    .rappel__envoi { min-height: 48px; font-size: 1.05rem; }
}

.booking__repli,
.booking__note {
    text-align: center;
    font-family: var(--font-hand);
    font-size: 1.1rem;
    color: var(--crayon-light);
    margin: 1.4rem auto 0;
    max-width: 46ch;
    line-height: 1.5;
}
.booking__repli { margin: 1.4rem auto; }
.booking__repli a,
.booking__note a {
    color: var(--lie);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

@media (max-width: 640px) {
    .booking__cadre { padding: .35rem; }
    .booking__widget { height: 860px; }
    .booking__repli,
    .booking__note { font-size: 1rem; }
}

.booking__horaires {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    max-width: 46ch;
    margin: 1rem auto 0;
    text-align: left;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--crayon-light);
}
.booking__horaires-dessin { width: 36px; flex: none; }
.booking__horaires b { color: var(--crayon); font-weight: 700; }
@media (max-width: 640px) {
    .booking__horaires { font-size: 0.95rem; gap: .6rem; }
    .booking__horaires-dessin { width: 30px; }
}

.faq { padding: var(--section-py) 0; }
.faq__list {
    max-width: 750px;
    margin-inline: auto;
}
.faq-item {
    border-bottom: 1.5px dashed var(--ivoire-dark);
}
.faq-item__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    font-family: var(--font-hand);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--charbon);
    text-align: left;
    transition: color var(--t-moyen) var(--ease-doux),
                scale var(--t-vif) var(--ease-doux);
}
.faq-item__question:hover { color: var(--lie); }
.faq-item__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    transition: transform var(--t-moyen) var(--ease-pose);
}
.faq-item.active .faq-item__icon {
    transform: rotate(45deg);
}
.faq-item__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-pose) var(--ease-pose);
}

.faq-item__answer-inner {
    padding: 0 0 1.25rem;
    font-size: .95rem;
    color: var(--crayon-light);
    line-height: 1.7;
    opacity: 0;
    transition: opacity var(--t-moyen) var(--ease-doux);
}
.faq-item.active .faq-item__answer-inner { opacity: 1; }

.team {
    padding: var(--section-py) 0;
    background: var(--ivoire-warm);
    border-top: 1.5px dashed var(--ivoire-dark);
}
.team__duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 850px;
    margin-inline: auto;
}

.team__member { perspective: 1400px; }
.team__card {
    position: relative;
    display: grid;
    
    height: 100%;
    transform-style: preserve-3d;
    transition: transform var(--t-pose) var(--ease-pose),
                scale var(--t-vif) var(--ease-doux);
    cursor: pointer;
}
.team__member.is-flipped .team__card { transform: rotateY(180deg); }
.team__face {
    grid-area: 1 / 1;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: var(--ivoire);
    border: 1.5px solid var(--charbon);
    border-radius: var(--r-hand-sm);
    padding: 2rem;
    transition: box-shadow var(--t-moyen) var(--ease-doux);
}
.team__face--back {
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    
    align-items: flex-start;
    
    justify-content: center;
}
.team__card:hover .team__face { box-shadow: 4px 4px 0 rgba(142, 74, 90, 0.11); }

/* ── LE PORTRAIT : UN CARRÉ, PAS UN GALET ────────────────────────
   Ce bloc habillait un DESSIN, et une seule image pour deux : une
   planche carrée où Nathan et Maxence étaient côte à côte. D'où le
   cadrage à 238 % avec des décalages négatifs — on découpait une
   moitié — et le `mix-blend-mode: multiply`, qui faisait boire le
   trait de crayon par le papier ivoire.

   Depuis le 28/09/2026, ce sont deux PHOTOGRAPHIES séparées, en
   480 × 640. Les trois réglages sont devenus faux du même coup :
   le rayon en pourcentages a fabriqué un ovale sur une boîte qui
   n'est pas carrée, les décalages ont poussé les visages hors du
   cadre, et le multiply a délavé les photos sur le fond crème.

   Un carré, le rayon dessiné du reste du site, et un recadrage qui
   garde le visage — object-position légèrement haut, parce qu'un
   portrait se cadre sur les yeux, pas sur le milieu du corps. */
.team__portrait {
    position: relative;
    width: 130px;
    aspect-ratio: 1;
    margin: 0 auto 1rem;
    overflow: hidden;
    background: var(--ivoire);
    border: 2px solid var(--charbon);
    border-radius: var(--r-hand-sm);
}
.team__portrait img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 28%;
}

.team__flip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: 1.1rem;
    padding: .35rem .85rem;
    
    min-height: 44px;
    background: none;
    font-family: var(--font-hand);
    font-size: 1.05rem;
    color: var(--lie);
    border: 1px dashed var(--lie);
    border-radius: var(--r-hand-btn);
    cursor: pointer;
    transition: background var(--t-moyen) var(--ease-doux);
}
.team__flip:hover { background: var(--lie-bg); }
.team__back-title {
    font-family: var(--font-hand);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--charbon);
    margin-bottom: .1rem;
}
.team__back-role {
    font-family: var(--font-hand);
    font-size: 1.05rem;
    color: var(--lie);
    margin-bottom: .9rem;
}
.team__back-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin-bottom: 1.2rem;
    font-size: 0.95rem;
    color: var(--crayon);
    line-height: 1.5;
}
.team__back-list li {
    padding-left: 1.1rem;
    position: relative;
}
.team__back-list li::before {
    content: '·';
    position: absolute;
    left: .25rem;
    font-family: var(--font-hand);
    font-size: 1.6rem;
    line-height: .7;
    color: var(--lie);
}
.team__contact {
    
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--font-hand);
    font-size: 1.25rem;
    color: var(--charbon);
    border-bottom: 1.5px dashed var(--lie);
    align-self: flex-start;
}
.team__back-note {
    margin-top: 1.1rem;
    font-size: 0.95rem;
    color: var(--crayon-light);
    line-height: 1.6;
}
.team__member-label {
    display: inline-block;
    font-family: var(--font-hand);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--vert);
    padding: .15rem .6rem;
    border: 1px dashed var(--vert);
    border-radius: 10px 3px 12px 3px / 3px 10px 3px 12px;
    margin-bottom: .75rem;
}
.team__name {
    font-family: var(--font-hand);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--charbon);
}
.team__title-text {
    font-family: var(--font-hand);
    font-size: 1.05rem;
    color: var(--lie);
    margin-bottom: .75rem;
}
.team__bio {
    font-size: 0.95rem;
    color: var(--crayon-light);
    line-height: 1.7;
    margin-bottom: 1rem;
}
.team__skills {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .75rem;
}
.team__skill {
    font-family: var(--font-hand);
    font-size: 0.95rem;
    color: var(--charbon);
    padding: .15rem .5rem;
    background: var(--ivoire-warm);
    border: 1px solid var(--ivoire-dark);
    border-radius: 8px 3px 10px 3px / 3px 8px 3px 10px;
}
@media (max-width: 650px) {
    .team__duo {
        grid-template-columns: 1fr;
        max-width: 450px;
    }
    .team__face { text-align: center; }
    .team__skills { justify-content: center; }
    .team__face--back { align-items: center; }
    .team__back-list li { padding-left: 0; }
    .team__back-list li::before { display: none; }
    .team__contact { align-self: center; }
}

.footer {
    background: var(--charbon);
    color: rgba(255,255,255,.88);
    padding: 3.5rem 0 1.5rem;
}
.footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}
.footer__brand-name {
    font-family: var(--font-hand);
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: .5rem;
}
.footer__tagline {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.footer__social-titre {
    font-family: var(--font-hand);
    font-size: 1.1rem;
    color: #fff;
    margin: 0 0 .75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.footer__social {
    display: flex;
    gap: .75rem;
}

.footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    
    border: 1.5px solid rgba(255,255,255,.55);
    background: rgba(255,255,255,.08);
    border-radius: 50% 45% 55% 48% / 48% 52% 46% 54%;
    transition: border-color var(--t-moyen) var(--ease-doux), background var(--t-moyen) var(--ease-doux);
}
.footer__social-link:hover {
    border-color: var(--jaune);
    background: rgba(255,255,255,.05);
}

.footer__social-link svg { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; }

.footer__links h3 {
    font-family: var(--font-hand);
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: .75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.footer__links li {
    margin-bottom: .4rem;
}
.footer__links a {
    font-size: 0.95rem;
    transition: color var(--t-moyen) var(--ease-doux);
}
.footer__links a:hover { color: var(--jaune); }

.footer__links li { font-size: 0.95rem; }
.footer__horaires b { color: #fff; font-weight: 600; }

.footer__horaires a {
    color: #fff;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 1.5rem;
    font-size: 0.95rem;
}
.footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
}

.footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    transition: color var(--t-moyen) var(--ease-doux);
}
.footer__legal a:hover { color: var(--jaune); }

/* L'AGENCE SŒUR (15/10/2026). Crealyx porte dans son pied de page la
   ligne « Agence sœur : Mediassemblage, communication vin & gastronomie » ;
   on lui rend la même, sous la barre légale, sur une ligne à part.
   C'est la couleur qui la met en sourdine, pas la taille : elle reste au
   plancher du texte secondaire (15 px, voir « Planchers de lisibilité »).
   Le blanc à 70 % garde au moins 4,8:1 à l'endroit exact de la ligne
   (mesuré sur fond-pied.jpg sous son voile, à 1280 et à 375 px). */
.footer__soeur { color: rgba(255,255,255,.7); }
.footer__soeur a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--t-moyen) var(--ease-doux);
}
.footer__soeur a:hover { color: var(--jaune); }

@media (max-width: 768px) {
    .footer__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "brand brand"
            "nav   serv"
            "nav   cont";
        align-items: start;
    }
    .footer__brand { grid-area: brand; }
    .footer__links--nav { grid-area: nav; }
    .footer__links--services { grid-area: serv; }
    .footer__links--contact { grid-area: cont; }
    .footer__bottom { flex-direction: column; gap: .75rem; text-align: center; }
    .footer__legal { flex-wrap: wrap; justify-content: center; gap: .5rem 1.1rem; }
    .footer__soeur { text-align: center; }
}

.page-doodle {
    position: absolute;
    pointer-events: none;
    opacity: 0.12;
    z-index: 0;
}

@keyframes revele {
    from { opacity: 0; translate: 0 18px; }
    
    55%  { opacity: 1; }
    to   { opacity: 1; translate: none; }
}
.reveal { opacity: 0; }

.reveal.visible {
    opacity: 1;
    animation: revele var(--t-pose) var(--ease-pose) backwards;
}
.reveal[data-delay="1"] { animation-delay: .08s; }
.reveal[data-delay="2"] { animation-delay: .16s; }
.reveal[data-delay="3"] { animation-delay: .24s; }
.reveal[data-delay="4"] { animation-delay: .32s; }
.reveal[data-delay="5"] { animation-delay: .40s; }

.segment:active,
.hand-card:active,
.why-card:active,
.process-card:active,
.service-card:active,
.offre:active,
.regions__item:active,
.team__card:active,
.faq-item__question:active,
.deplacement__lien:active {
    scale: .985;
    transition-duration: .05s;
}

@keyframes floatSoft {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-9px) rotate(.5deg); }
}
@keyframes swaySoft {
    0%, 100% { transform: rotate(-2.5deg); }
    50%      { transform: rotate(2.5deg); }
}
@keyframes popIn {
    0%   { opacity: 0; transform: translateY(20px) rotate(-1.5deg); }
    60%  { opacity: 1; transform: translateY(-4px) rotate(.5deg); }
    100% { opacity: 1; transform: translateY(0) rotate(0); }
}
@keyframes drawUnderline {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@keyframes inkPulse {
    0%, 100% { opacity: .5; }
    50%      { opacity: 1; }
}

.hero__text > *,
.hero__visual {
    opacity: 0;
    animation: popIn var(--t-pose) var(--ease-pose) forwards;
}
.hero__title     { animation-delay: .04s; }
.hero__kicker    { animation-delay: .14s; }
.hero__highlight { animation-delay: .24s; }
.hero__portes    { animation-delay: .32s; }
.hero__actions   { animation-delay: .40s; }

.hero__visual {
    animation: popIn .7s var(--ease-pose) .2s forwards,
               floatSoft 7s ease-in-out 1s infinite;
}

.hero__title .accent::after {
    transform-origin: left center;
    animation: drawUnderline .6s cubic-bezier(.65,0,.35,1) .55s backwards;
}

.hero__portes li:nth-child(2) .porte__fig { animation-duration: 5.5s; }
.hero__portes li:nth-child(3) .porte__fig { animation-duration: 6.2s; }
.hero__portes li:nth-child(4) .porte__fig { animation-duration: 5.1s; }

.hero__scroll span { animation: inkPulse 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
    .hero__text > *, .hero__visual { opacity: 1; }
    .reveal { opacity: 1; translate: none; }
}

@media (max-width: 768px) {
    :root {
        --section-py: 3.25rem;
        
        --gutter: 1.25rem;
    }

    
    .section-header { margin-bottom: 1.9rem; }
    .section-title { font-size: 1.85rem; }
    .section-subtitle { font-size: .95rem; margin-top: .55rem; }
    .eyebrow { font-size: 1.1rem; margin-bottom: .3rem; }

    
    .hero { padding: 6.5rem 0 3rem; }
    .hero .container { gap: 1.5rem; }
    .hero__visual { max-width: 300px; }
    .hero__title { margin-bottom: 1rem; }
    .hero__kicker { margin-bottom: 1.25rem; }
    
    .hero__portes { gap: .4rem; margin-bottom: 1.5rem; }
    .porte { padding: .6rem .3rem .55rem; gap: .2rem; }
    .porte__fig { height: 42px; }
    .porte__fig img { max-height: 42px; }
    .porte__nom { font-size: 1.05rem; }
    .porte__quoi { font-size: 0.95rem; }
    .porte__lien { font-size: .78rem; padding: .1rem .45rem; gap: .2rem; }

    .hero__actions { flex-direction: column; align-items: stretch; gap: .75rem; }
    .hero__actions .btn { width: 100%; justify-content: center; }
    
    .hero__scroll { display: none; }

    
    .vitrine { padding: 2.25rem 0; }
    .vitrine .section-header { margin-bottom: 1.4rem; }
    .vitrine__vue--reel { width: 128px; }
    .vitrine__vue--photo img { height: 140px; }
    .vitrine__set > * { margin-right: .7rem; }
    .vitrine__rail + .vitrine__rail { margin-top: 1rem; }
    .vitrine__note { font-size: 1rem; margin-top: 1.1rem; padding: 0 var(--gutter); }

    
    .vsl .container { gap: 1.4rem; }
    .vsl__duo { gap: .3rem; }
    .vsl__avant { flex: 0 0 94px; }
    .vsl__apres { flex: 0 0 190px; }
    .vsl__avant, .vsl__apres { gap: .45rem; }
    .vsl__avant-legende strong { font-size: 1rem; }
    .vsl__avant-legende span { font-size: .7rem; }
    .vsl__tag { font-size: 0.95rem; padding: .05rem .55rem; letter-spacing: .05em; }
    
    .vsl__fleche { margin-bottom: 2.2rem; flex: 0 0 38px; min-width: 0; }
    .vsl__fleche svg { width: 32px; }
    .vsl__fleche span { font-size: .68rem; line-height: 1.15; }
    .vsl__cadre { padding: .9rem; gap: .5rem; }
    .vsl__cadre img { width: 40px; }
    .vsl__cadre-titre { font-size: 1.1rem; }
    .vsl__cadre-format { font-size: 0.95rem; padding: .1rem .55rem; }
    .vsl__cadre::before { width: 58px; height: 16px; top: -8px; }
    .vsl .btn { width: 100%; justify-content: center; }

    
    .deplacement__bloc { flex-direction: column; text-align: center; gap: .9rem; }
    .deplacement__icone { width: 86px; }
    .deplacement__texte { font-size: .95rem; }
    .deplacement__lien { font-size: 1.2rem; }

    
    .regions__list { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .regions__item { padding: .6rem .7rem; }
    .regions__name { font-size: 1.1rem; line-height: 1.2; }
    .regions__note { font-size: .72rem; line-height: 1.35; }

    
    .evin__card {
        grid-template-columns: 1fr;
        gap: .9rem;
        padding: 1.6rem 1.3rem;
    }
    .evin__icon { width: 58px; }

    
    
    .process-card {
        display: grid;
        grid-template-columns: 48px 1fr;
        column-gap: .9rem;
        align-items: center;
        text-align: left;
        padding: 1.15rem 1.1rem;
    }
    .process-card__number {
        top: -13px;
        left: auto;
        right: 14px;
        width: 38px;
        height: 38px;
        font-size: 1.15rem;
        transform: rotate(-7deg);
    }
    .process-card__icon { grid-row: 1 / span 2; height: 48px; margin: 0; }
    .process-card h3 { font-size: 1.2rem; padding-right: 40px; margin-bottom: .25rem; }
    .process-card h3::after { margin-inline: 0; }
    .process-card p { font-size: 0.95rem; line-height: 1.55; }
    
    .process__grid { gap: 1rem; padding-top: 0; }
    /* PLUS DE TRAIT AU TÉLÉPHONE.
       Le trait vertical est posé à `left: 50 %` depuis le palier 979 —
       là où les quatre étapes sont encore centrées l'une sous l'autre.
       À 768 px la carte devient un bandeau : le dessin passe à gauche,
       le texte au milieu, et la pastille du numéro file à droite. Le
       trait, lui, est resté au milieu. Mesuré le 23/09 à 375 px : trait
       à 173 px, pastilles à 310, texte de 80 à 325 — il barrait chaque
       paragraphe. Le relier aux pastilles demanderait de le faire
       partir d'un `top: -13px` de la première carte pour finir sur
       celui de la quatrième, ce qu'aucune règle ne sait exprimer. Les
       bandeaux numérotés racontent déjà la suite des étapes. */
    .process__trait { display: none; }

    
    .services__grid, .why__grid { gap: 1rem; }
    .service-card, .why-card {
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: .9rem;
        align-items: start;
        padding: 1.3rem 1.2rem;
    }
    .service-card__icon, .why-card__icon {
        height: 40px;
        margin: .15rem 0 0;
    }
    
    .service-card--large { grid-template-columns: 44px 1fr; column-gap: .9rem; }
    .service-card--large .service-card__icon { height: 40px; }
    
    .service-card__icon { grid-row: 1 / span 3; }
    .why-card__icon { grid-row: 1 / span 2; }
    .service-card h3, .why-card__title { font-size: 1.2rem; margin-bottom: .3rem; }
    .service-card p, .why-card__text { font-size: 0.95rem; line-height: 1.55; }
    
    .service-card__tag { justify-self: start; margin-top: .55rem; }
    .why-card__num { font-size: 1.6rem; right: 12px; }

    
    .offres__grille { gap: 1.2rem; }
    .offre__capsule { padding: .42rem .9rem .5rem; }
    .offre__cuvee { font-size: 1.18rem; }
    .offre__liste { margin-bottom: 1rem; }
    .offre__liste li { padding: .42rem 0; }
    .offre__texte { margin-bottom: 1rem; }
    .offre__note { font-size: 1.05rem; margin-top: .7rem; }
    .pricing__note { margin-top: 1.75rem; font-size: 1.1rem; }

    
    .team__duo { grid-template-columns: 1fr; gap: 1.25rem; max-width: 420px; }
    .team__face { padding: 1.35rem 1.2rem; }
    .team__portrait { width: 104px; margin-bottom: .7rem; }

    
    .footer { padding: 2.5rem 0 1.25rem; }
    .footer__grid { gap: 1.5rem 1.25rem; margin-bottom: 2rem; }

    
    .btn { min-height: 48px; padding: .8rem 1.4rem; }
    .faq-item__question { padding: 1.1rem 0; min-height: 56px; }
    .footer__links a { display: inline-block; padding: .2rem 0; }
}

@media (max-width: 400px) {
    :root { --gutter: 1rem; }
    .regions__item { padding: .55rem .6rem; }
    .regions__name { font-size: 1.05rem; }
    .regions__note { font-size: .7rem; }
    .evin__card { padding: 1.4rem 1.1rem; }
    .section-title { font-size: 1.7rem; }
}

.notebook-margin {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 60px;
    border-right: 2px solid rgba(107,45,62,0.12);
    pointer-events: none;
}
.notebook-holes {
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    pointer-events: none;
}
.notebook-hole {
    width: 16px;
    height: 16px;
    border: 1.5px solid rgba(142, 74, 90, 0.18);
    border-radius: 50%;
    background: var(--ivoire);
}

.barre-action {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .9rem;
    
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--ivoire);
    border-top: 1.5px solid var(--charbon);
    box-shadow: 0 -3px 14px rgba(142, 74, 90, 0.15);
    
    translate: 0 110%;
    transition: translate var(--t-moyen) var(--ease-pose);
}
.barre-action.est-visible { translate: 0 0; }

.barre-action__texte {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.barre-action__texte strong {
    font-family: var(--font-hand);
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--charbon);
}
.barre-action__texte span {
    font-size: .72rem;
    color: var(--crayon-light);
}

.barre-action__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
    flex: 0 0 auto;
}
.barre-action__btn {
    flex: 0 0 auto;
    
    min-height: 44px;
    padding-inline: 1.15rem;
    white-space: nowrap;
}

.barre-action__quizz {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    padding: 0 .85rem;
    font-family: var(--font-hand);
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--lie);
    background: var(--jaune-bg);
    border: 1.5px solid var(--lie);
    border-radius: var(--r-hand-btn);
    white-space: nowrap;
    transition: background var(--t-moyen) var(--ease-doux),
                color var(--t-moyen) var(--ease-doux),
                translate var(--t-vif) var(--ease-doux);
}

.barre-action__quizz::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--jaune);
    box-shadow: 0 0 0 0 rgba(212, 168, 67, .7);
    animation: pastille 2.4s var(--ease-doux) infinite;
}
@keyframes pastille {
    0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(212, 168, 67, .7); }
    35%           { box-shadow: 0 0 0 6px rgba(212, 168, 67, 0); }
}
@media (hover: hover) {
    .barre-action__quizz:hover {
        background: var(--lie);
        color: var(--ivoire);
        translate: 0 -1px;
    }
    .barre-action__quizz:hover::before { background: var(--jaune-light); }
}
.barre-action__quizz:active { translate: 0 1px; }

@media (min-width: 901px) {
    .barre-action {
        left: auto;
        right: 1.5rem;
        bottom: 1.5rem;
        width: min(330px, calc(100vw - 3rem));
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
        padding: 1.1rem 1.2rem 1.2rem;
        border: 1.5px solid var(--charbon);
        
        border-radius: 14px 5px 12px 6px / 6px 12px 5px 14px;
        box-shadow: 3px 4px 0 rgba(142, 74, 90, 0.16);
        
        translate: 0 calc(100% + 1.5rem);
    }
    .barre-action.est-visible { translate: 0 0; }

    .barre-action__texte { padding-right: 1.6rem; }
    .barre-action__texte strong { font-size: 1.22rem; line-height: 1.25; }
    .barre-action__texte span { font-size: 0.95rem; }

    .barre-action__actions { width: 100%; margin-left: 0; }
    .barre-action__quizz { width: 100%; justify-content: center; }
    .barre-action__btn { display: none; }

    .barre-action__fermer {
        position: absolute;
        top: .5rem;
        right: .5rem;
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        padding: 0;
        background: none;
        border: none;
        border-radius: 50%;
        color: var(--crayon-light);
        cursor: pointer;
        transition: background .2s ease, color .2s ease;
    }
    .barre-action__fermer svg {
        width: 15px; height: 15px;
        fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
    }
    .barre-action__fermer:hover { background: rgba(142, 74, 90, 0.10); color: var(--charbon); }
    .barre-action__fermer:focus-visible { outline: 2px solid var(--lie); outline-offset: 2px; }
}

@media (max-width: 900px) {
    .barre-action__fermer { display: none; }
}

@media (max-width: 900px) {
    
    body.barre-active .footer { padding-bottom: 5.5rem; }
}

@media (max-width: 560px) {
    .barre-action { gap: .4rem; padding-inline: .6rem; }
    .barre-action__texte { display: none; }
    .barre-action__actions { margin-left: 0; width: 100%; }
    .barre-action__quizz { flex: 1 1 auto; justify-content: center; padding-inline: .35rem; }
    .barre-action__btn { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .barre-action { transition: none; }
    
    .barre-action__quizz::before { animation: none; }
}

.quizz {
    
    margin: auto;
    width: min(600px, calc(100vw - 2rem));
    max-height: min(88vh, 780px);
    padding: 0;
    border: none;
    background: transparent;
    overflow: visible;
}
.quizz::backdrop {
    background: rgba(142, 74, 90, 0.18);
    backdrop-filter: blur(3px);
}
.quizz__boite {
    display: flex;
    flex-direction: column;
    max-height: min(88vh, 780px);
    background: var(--ivoire);
    border: 2px solid var(--charbon);
    border-radius: var(--r-hand-sm);
    box-shadow: 6px 8px 0 rgba(142, 74, 90, 0.18);
    overflow: hidden;
}

.quizz__tete {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1.1rem .5rem;
    flex: 0 0 auto;
}
.quizz__compteur {
    font-family: var(--font-hand);
    font-size: 1.05rem;
    color: var(--crayon-light);
    letter-spacing: .02em;
    margin: 0;
}
.quizz__fermer {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--crayon);
    border-radius: 50%;
    transition: background var(--t-moyen) var(--ease-doux);
}
@media (hover: hover) {
    .quizz__fermer:hover { background: rgba(142, 74, 90, 0.10); }
}

.quizz__jauge {
    flex: 0 0 auto;
    height: 3px;
    margin: 0 1.1rem;
    background: rgba(142, 74, 90, 0.15);
    border-radius: 2px;
    overflow: hidden;
}
.quizz__jauge-barre {
    display: block;
    height: 100%;
    width: 0;
    background: var(--lie);
    transition: width var(--t-pose) var(--ease-pose);
}

.quizz__corps {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.2rem 1.1rem 1.3rem;
}
.quizz__titre {
    font-family: var(--font-hand);
    font-size: clamp(1.6rem, 4.5vw, 2.1rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--charbon);
    margin-bottom: .45rem;
}

.quizz__titre:focus { outline: none; }
.quizz__titre:focus-visible { outline: 2px solid var(--lie); outline-offset: 4px; }
.quizz__aide {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--crayon-light);
    margin-bottom: 1.1rem;
}

.quizz__choix { display: grid; gap: .55rem; }
.quizz__option {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    width: 100%;
    min-height: 44px;
    padding: .7rem .9rem;
    text-align: left;
    background: var(--ivoire-warm);
    border: 1.5px solid rgba(142, 74, 90, 0.18);
    border-radius: var(--r-hand-btn);
    transition: background var(--t-moyen) var(--ease-doux),
                border-color var(--t-moyen) var(--ease-doux),
                transform var(--t-vif) var(--ease-pose);
}
.quizz__option-label {
    font-family: var(--font-body);
    font-size: .97rem;
    line-height: 1.4;
    color: var(--charbon);
}
.quizz__option-sous {
    font-size: .78rem;
    color: var(--crayon-light);
}
@media (hover: hover) {
    .quizz__option:hover {
        background: var(--jaune-bg);
        border-color: var(--charbon);
        transform: translateX(3px);
    }
}
.quizz__option:active { transform: scale(.99); transition-duration: .05s; }
.quizz__option.est-choisi {
    border-color: var(--lie);
    background: var(--lie-bg);
}

.quizz__form { display: grid; gap: .9rem; }
.quizz__champ { display: grid; gap: .3rem; }
.quizz__champ label {
    font-family: var(--font-hand);
    font-size: 1.15rem;
    color: var(--charbon);
}
.quizz__champ input {
    width: 100%;
    
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--charbon);
    padding: .65rem .8rem;
    min-height: 44px;
    background: #fffdf8;
    border: 1.5px solid rgba(142, 74, 90, 0.18);
    border-radius: var(--r-hand-btn);
    transition: border-color var(--t-moyen) var(--ease-doux),
                box-shadow var(--t-moyen) var(--ease-doux);
}
.quizz__champ input:focus {
    outline: none;
    border-color: var(--lie);
    box-shadow: 0 0 0 3px var(--lie-bg);
}
.quizz__champ-aide { font-size: .78rem; color: var(--crayon-light); }
.quizz__erreur:empty { display: none; }
.quizz__erreur {
    font-size: 0.95rem;
    color: var(--lie);
    padding: .4rem .6rem;
    background: var(--lie-bg);
    border-radius: var(--r-hand-btn);
}

.quizz__echo {
    margin: 1rem 0 .8rem;
    padding: .85rem 1rem;
    background: var(--jaune-bg);
    border-left: 3px solid var(--jaune);
    border-radius: 0 var(--r-hand-btn) var(--r-hand-btn) 0;
}
.quizz__echo-intro {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--crayon-light);
    margin-bottom: .25rem;
}
.quizz__echo-phrase {
    font-family: var(--font-hand);
    font-size: 1.35rem;
    line-height: 1.3;
    color: var(--charbon);
}
.quizz__reponse {
    font-size: .95rem;
    line-height: 1.65;
    margin-bottom: 1.2rem;
}
.quizz__offre {
    padding: 1rem 1.1rem;
    background: var(--ivoire-warm);
    border: 2px solid var(--charbon);
    border-radius: var(--r-hand-sm);
    box-shadow: 3px 4px 0 rgba(142, 74, 90, 0.15);
}
.quizz__offre-eyebrow {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--crayon-light);
}
.quizz__offre-nom {
    font-family: var(--font-hand);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--lie);
}
.quizz__offre-prix {
    font-family: var(--font-hand);
    font-size: 1.5rem;
    color: var(--charbon);
    margin-bottom: .5rem;
}
.quizz__offre-resume { font-size: 0.95rem; line-height: 1.6; }
.quizz__offre-note {
    font-family: var(--font-hand);
    font-size: 1.1rem;
    color: var(--crayon-light);
    margin-top: .35rem;
}

.quizz__franchise {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--crayon-light);
    margin: .8rem 0 1.1rem;
}
.quizz__actions { display: grid; gap: .55rem; }
.quizz__actions .btn { justify-content: center; }

.quizz__rappel {
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1.5px dashed rgba(142, 74, 90, 0.18);
}
.quizz__rappel-titre {
    font-family: var(--font-hand);
    font-size: 1.4rem;
    line-height: 1.2;
    color: var(--charbon);
}
.quizz__rappel-texte {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--crayon-light);
    margin-bottom: .9rem;
}
.quizz__rappel-form { display: grid; gap: .7rem; }

.quizz__piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.quizz__accord {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem .8rem;
    background: var(--ivoire-warm);
    border: 1.5px solid rgba(142, 74, 90, 0.18);
    border-radius: var(--r-hand-btn);
}
.quizz__accord input[type="checkbox"] {
    flex: 0 0 auto;
    
    width: 22px;
    height: 22px;
    margin-top: .1rem;
    accent-color: var(--lie);
    cursor: pointer;
}
.quizz__accord label {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--crayon);
    cursor: pointer;
}
.quizz__accord a {
    color: var(--lie);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.quizz__etat:empty { display: none; }
.quizz__etat {
    font-size: 0.95rem;
    line-height: 1.5;
    padding: .5rem .7rem;
    border-radius: var(--r-hand-btn);
    background: rgba(142, 74, 90, 0.08);
    color: var(--crayon);
}
.quizz__etat.est-erreur { background: var(--lie-bg); color: var(--lie); }
.quizz__etat.est-ok {
    background: var(--vert-bg);
    color: var(--vert);
    font-family: var(--font-hand);
    font-size: 1.2rem;
}
.quizz__etat a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.quizz__lien-page {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: .6rem;
    font-family: var(--font-hand);
    font-size: 1.1rem;
    color: var(--lie);
    border-bottom: 1.5px solid transparent;
}
@media (hover: hover) {
    .quizz__lien-page:hover { border-bottom-color: var(--lie); }
}
.quizz__refaire {
    display: block;
    min-height: 44px;
    margin-top: .4rem;
    font-size: 0.95rem;
    color: var(--crayon-light);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.quizz__pied {
    flex: 0 0 auto;
    padding: .5rem 1.1rem calc(.8rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(142, 74, 90, 0.15);
}
.quizz__retour {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--font-hand);
    font-size: 1.05rem;
    color: var(--crayon-light);
}
@media (hover: hover) {
    .quizz__retour:hover { color: var(--charbon); }
}
.quizz__retour[hidden] { display: none; }

body.quizz-ouvert { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .quizz__jauge-barre { transition: none; }
    .quizz__option { transition: none; }
}

.diagnostic {
    position: relative;
    padding-block: clamp(3rem, 7vw, 4.6rem);
    background-size: cover;
    background-position: center 62%;
    background-repeat: no-repeat;
    background-image:
        linear-gradient(rgba(240, 233, 221, .90), rgba(240, 233, 221, .86)),
        url("/assets/photos/fonds/fond-courts.jpg");
}
.diagnostic > .container { position: relative; z-index: 1; }
.diagnostic__carte {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
    max-width: 780px;
    margin: 0 auto;
    padding: clamp(1.3rem, 3.5vw, 2rem);
    background: var(--ivoire-warm);
    border: 2px dashed var(--charbon);
    border-radius: var(--r-hand-sm);
    transform: rotate(-.5deg);
}
.diagnostic__icone {
    flex: 0 0 auto;
    width: clamp(64px, 12vw, 96px);
    mix-blend-mode: multiply;
}
.diagnostic__texte { min-width: 0; }
.diagnostic__titre {
    font-family: var(--font-hand);
    font-size: clamp(1.7rem, 4vw, 2.3rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: .3rem;
}
.diagnostic__sous {
    font-size: .95rem;
    line-height: 1.6;
    color: var(--crayon-light);
    margin-bottom: .9rem;
}
.diagnostic__btn { white-space: normal; }
.diagnostic__note {
    font-size: .78rem;
    color: var(--crayon-light);
    margin-top: .55rem;
}
@media (max-width: 700px) {
    .diagnostic__carte { flex-direction: column; text-align: center; transform: rotate(-.4deg); }
    .diagnostic__btn { width: 100%; justify-content: center; }
}

.legal {
    
    padding: calc(72px + 3rem) 0 5rem;
    background: var(--ivoire);
}
.legal__inner {
    max-width: 44rem;   
}
.legal__titre {
    font-family: var(--font-hand);
    font-size: clamp(2.4rem, 7vw, 3.6rem);
    font-weight: 700;
    line-height: 1.05;
    margin: .2rem 0 1.2rem;
}
.legal__chapo {
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--crayon);
    border-left: 3px solid var(--vert);
    padding-left: 1rem;
    margin-bottom: 1rem;
}
.legal__maj {
    font-family: var(--font-hand);
    font-size: 1.05rem;
    color: var(--crayon-light);
    margin-bottom: 2.5rem;
}

.legal h2 {
    font-family: var(--font-body);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 2.6rem 0 .9rem;
    padding-bottom: .4rem;
    border-bottom: 1px dashed var(--ivoire-dark);
}
.legal h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 1.6rem 0 .6rem;
}
.legal p { margin-bottom: 1rem; }
.legal a {
    color: var(--lie);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.legal a:hover { color: var(--lie-light); }

.legal__liste { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.legal__liste li { margin-bottom: .8rem; }
ul.legal__liste { list-style: disc; }
ol.legal__liste { list-style: decimal; }
ul.legal__liste::marker, ol.legal__liste::marker { color: var(--vert); }

.legal__todo {
    background: var(--jaune-bg);
    border: 1px dashed var(--jaune);
    border-radius: var(--r-hand-sm);
    padding: .9rem 1.1rem;
    font-size: 0.95rem;
}
.legal__contact {
    font-family: var(--font-hand);
    font-size: 1.5rem;
    text-align: center;
    margin: 1.4rem 0 1.6rem;
}
.legal__retour {
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px dashed var(--ivoire-dark);
    font-family: var(--font-hand);
    font-size: 1.25rem;
}
.legal__retour a { text-decoration: none; color: var(--vert); }

.evitement {
    
    position: fixed;
    top: .6rem;
    left: 50%;
    z-index: 200;
    translate: -50% -150%;
    padding: .7rem 1.3rem;
    font-family: var(--font-hand);
    font-size: 1.1rem;
    color: var(--ivoire);
    background: var(--charbon);
    border-radius: var(--r-hand-btn);
    text-decoration: none;
    transition: translate var(--t-moyen) var(--ease-pose);
}
.evitement:focus { translate: -50% 0; }

:where(section[id], [id^="rappel"], .filiere, .booking) {
    scroll-margin-top: calc(80px + 1.5rem);
}

@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .nav-wrap::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 100%;
            height: 2.5px;
            background: linear-gradient(90deg, var(--vert), var(--jaune), var(--lie));
            transform-origin: 0 50%;
            
            scale: 0 1;
            animation: filDeLecture linear both;
            animation-timeline: scroll(root block);
        }
    }
}
@keyframes filDeLecture {
    to { scale: 1 1; }
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .filiere__maillon::after {
            transform-origin: 0 50%;
            animation: traitFiliere linear both;
            animation-timeline: view();
            animation-range: entry 25% cover 45%;
        }
    }
}
@keyframes traitFiliere {
    from { scale: 0 1; }
    to   { scale: 1 1; }
}

.btn:active { translate: 0 1px; }
.btn--primary { box-shadow: 2px 2px 0 rgba(142, 74, 90, 0.18); }
.btn--primary:active { box-shadow: 1px 1px 0 rgba(142, 74, 90, 0.18); }

@media (hover: hover) {
    .btn--primary:hover { box-shadow: 3px 4px 0 rgba(142, 74, 90, 0.18); }
}

@media (hover: hover) {
    .vitrine__rail:hover .vitrine__track { animation-play-state: paused; }
}
.vitrine__rail:focus-within .vitrine__track { animation-play-state: paused; }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 2.5px solid var(--lie);
    outline-offset: 3px;
    border-radius: 3px;
}

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
    .nav-wrap    { view-transition-name: entete; }
    .barre-action { view-transition-name: invitation; }
    .footer      { view-transition-name: pied; }
    .tunnel__photo { view-transition-name: photo-metier; }
    .tunnel__titre { view-transition-name: titre-metier; }

    
    ::view-transition-old(entete),
    ::view-transition-new(entete),
    ::view-transition-old(pied),
    ::view-transition-new(pied),
    ::view-transition-old(invitation),
    ::view-transition-new(invitation) {
        animation: none;
        mix-blend-mode: normal;
    }

    ::view-transition-group(photo-metier),
    ::view-transition-group(titre-metier) {
        animation-duration: .45s;
        animation-timing-function: var(--ease-pose);
    }

    
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: .28s;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .filiere__frise.visible .filiere__vignette {
        animation: posePetit .5s var(--ease-pose) backwards;
    }
    .filiere__maillon:nth-child(1) .filiere__vignette { animation-delay: .00s; }
    .filiere__maillon:nth-child(2) .filiere__vignette { animation-delay: .06s; }
    .filiere__maillon:nth-child(3) .filiere__vignette { animation-delay: .12s; }
    .filiere__maillon:nth-child(4) .filiere__vignette { animation-delay: .18s; }
    .filiere__maillon:nth-child(5) .filiere__vignette { animation-delay: .24s; }
    .filiere__maillon:nth-child(6) .filiere__vignette { animation-delay: .30s; }
}
@keyframes posePetit {
    from { opacity: 0; translate: 0 10px; }
    to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-wrap::after,
    .filiere__maillon::after,
    .filiere__vignette { animation: none !important; scale: 1 1 !important; }
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}

.nav__item--sous { position: relative; }

.nav__sous-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
    color: inherit;
    font-family: var(--font-hand);
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}
.nav__chevron {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: rotate var(--t-vif) var(--ease-doux);
}
.nav__sous-btn[aria-expanded="true"] .nav__chevron { rotate: 180deg; }

.nav__sous {
    position: absolute;
    top: calc(100% + .8rem);
    left: 50%;
    translate: -50% 0;
    z-index: 120;
    min-width: 250px;
    margin: 0;
    padding: .5rem;
    list-style: none;
    background: var(--ivoire);
    border: 1.5px solid var(--charbon);
    border-radius: 12px 4px 10px 5px / 5px 10px 4px 12px;
    box-shadow: 3px 4px 0 rgba(142, 74, 90, 0.17);
    
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-vif) var(--ease-doux),
                visibility var(--t-vif) var(--ease-doux);
}
.nav__item--sous:hover .nav__sous,
.nav__item--sous:focus-within .nav__sous,
.nav__sous-btn[aria-expanded="true"] + .nav__sous {
    opacity: 1;
    visibility: visible;
}

.nav__item--sous::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: .9rem;
}

.nav__sous-lien {
    display: block;
    padding: .5rem .7rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--crayon);
    text-decoration: none;
    border-radius: 5px;
    white-space: nowrap;
    transition: background var(--t-vif) var(--ease-doux),
                color var(--t-vif) var(--ease-doux);
}
@media (hover: hover) {
    .nav__sous-lien:hover { background: var(--ivoire-warm); color: var(--lie); }
}
.nav__sous-lien[aria-current="page"] {
    color: var(--lie);
    font-weight: 600;
    background: var(--lie-bg);
}

@media (max-width: 900px) {
    .nav__sous {
        position: static;
        translate: none;
        min-width: 0;
        margin: .4rem auto 0;
        max-width: 320px;
        box-shadow: none;
        background: var(--ivoire-warm);
        display: none;
        opacity: 1;
        visibility: visible;
    }
    .nav__sous-btn[aria-expanded="true"] + .nav__sous { display: block; }
    
    .nav__item--sous:hover .nav__sous,
    .nav__item--sous:focus-within .nav__sous { display: none; }
    .nav__sous-btn[aria-expanded="true"] + .nav__sous { display: block; }
    .nav__sous-lien { text-align: center; font-size: 1rem; padding: .6rem; }
    .nav__item--sous::after { display: none; }
}

.expertise { padding: 0 0 var(--section-py); }
.expertise__inner { max-width: 760px; }

.expertise__article + .expertise__article {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1.5px dashed var(--ivoire-dark);
}
.expertise__tete {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.2rem;
}
.expertise__num {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    font-family: var(--font-hand);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ivoire);
    background: var(--lie);
    border-radius: 50%;
}
.expertise__etiquette {
    display: inline-block;
    font-family: var(--font-body);
    font-size: .74rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--crayon-light);
    margin-bottom: .15rem;
}
.expertise__titre {
    font-family: var(--font-hand);
    font-size: clamp(1.6rem, 4vw, 2.1rem);
    font-weight: 700;
    color: var(--charbon);
    line-height: 1.15;
}
.expertise__corps p { margin-bottom: .9rem; line-height: 1.75; color: var(--crayon); }
.expertise__corps a { color: var(--lie); text-decoration: underline; }

.expertise__liste {
    margin: 0 0 .9rem;
    padding-left: 1.2rem;
    line-height: 1.7;
    color: var(--crayon);
}
.expertise__liste li { margin-bottom: .5rem; }
.expertise__liste--num { counter-reset: none; }

.expertise__note {
    margin-top: 1.2rem;
    padding: .8rem 1rem;
    font-size: 0.95rem;
    color: var(--crayon-light);
    background: var(--ivoire-warm);
    border-left: 3px solid var(--vert);
    border-radius: 4px;
}
.expertise__pied {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1.5px dashed var(--ivoire-dark);
    text-align: center;
    font-family: var(--font-hand);
    font-size: 1.35rem;
    color: var(--crayon);
}
.expertise__pied a { color: var(--lie); }

@media (max-width: 640px) {
    .expertise__tete { gap: .7rem; }
    .expertise__num { width: 36px; height: 36px; font-size: 1rem; }
    .expertise__article + .expertise__article { margin-top: 2.2rem; padding-top: 2.2rem; }
}

@media (min-width: 1101px) {
    .nav__menu { gap: 1.15rem; }
    .nav__link { font-size: 1.06rem; white-space: nowrap; }
    .nav__cta { white-space: nowrap; padding-inline: 1.1rem; font-size: 1.06rem; }
}

@media (min-width: 901px) and (max-width: 1100px) {
    .nav__menu {
        position: fixed;
        inset: 0;
        flex-direction: column;
        justify-content: center;
        gap: 1.6rem;
        background: var(--ivoire);
        transform: translateX(100%);
        transition: transform var(--t-moyen) var(--ease-pose);
        z-index: 110;
    }
    .nav__menu.open { transform: translateX(0); }
    .nav__toggle { display: flex; }
    .nav__cta { display: none; }
    .nav__cta-mobile { display: block; }
    .nav__mobile-seul { display: block; }
    .nav__sous {
        position: static;
        translate: none;
        margin: .4rem auto 0;
        max-width: 320px;
        box-shadow: none;
        background: var(--ivoire-warm);
        display: none;
        opacity: 1;
        visibility: visible;
    }
    .nav__item--sous:hover .nav__sous { display: none; }
    .nav__sous-btn[aria-expanded="true"] + .nav__sous { display: block; }
    .nav__item--sous::after { display: none; }
}

.tunnel-liv__note {
    max-width: 70ch;
    margin: 2rem auto 0;
    padding: 1rem 1.2rem;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--crayon);
    background: var(--ivoire-warm);
    border-left: 3px solid var(--accent, var(--vert));
    border-radius: 4px;
}
.tunnel-liv__note a { color: var(--lie); text-decoration: underline; }

@media (max-width: 1100px) {
    .nav__menu {
        gap: 1.1rem;
        
        padding: calc(80px + 1rem) var(--gutter) 2rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        
        justify-content: safe center;
    }
    .nav__menu > li { flex: 0 0 auto; }

    
    .nav__menu:has(.nav__sous-btn[aria-expanded="true"]) { gap: .75rem; }
    .nav__sous { margin-block: .3rem; }
    .nav__sous-lien { padding: .45rem; }

    
    .nav__cta-mobile { margin-top: .6rem; }
}

.titre__metier {
    display: block;
    margin-top: .7rem;
    font-family: var(--font-body);
    font-size: clamp(.95rem, 1.6vw, 1.15rem);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--lie);
    max-width: 34ch;
}

.grille-photos {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.carte-photo > img {
    width: 100%;
    
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: var(--r-hand-sm, 6px);
    margin-bottom: .9rem;
    max-height: none;
}
.carte-photo > a > img {
    width: 100%;
    height: auto;               
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    border-radius: var(--r-hand-sm, 6px);
    margin-bottom: .9rem;
}
.carte-photo h3 a { color: inherit; text-decoration: none; }
.carte-photo h3 a:hover { text-decoration: underline; }

.carte-photo--nue {
    padding: 0;
    border: none;
    background: none;
}
.carte-photo--nue > img {
    margin-bottom: 0;
    border: 2px solid var(--crayon);
}

.tunnel-obj__bloc--texte {
    grid-template-columns: minmax(0, 1fr);
}
.tunnel-obj__bloc--texte p {
    margin: 0 0 1rem;
}
.tunnel-obj__bloc--texte p:last-child { margin-bottom: 0; }

.tunnel-obj__bloc--texte > div { max-width: 70ch; }

@media (max-width: 600px) {
    .porte__quoi   { font-size: .95rem; }   
    .regions__note { font-size: 0.95rem; line-height: 1.45; }
}

.hero__snapshot img,
.vitrine__vue--reel :is(video, img),
.vsl__avant-cadre :is(video, img) {
    height: auto;
}

.regions__terrain-photo {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
    border-radius: var(--r-hand-sm, 6px);
    margin-bottom: 1rem;
}

.section-header .titre__metier {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.format-court { padding: var(--section-py) 0; }
.format-court__bloc {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: clamp(1.6rem, 4vw, 3.2rem);
    align-items: center;
}
.format-court__film { margin: 0; display: grid; gap: .7rem; }
.format-court__cadre {
    position: relative;
    background: var(--ivoire);
    border: 1.5px solid var(--charbon);
    border-radius: var(--r-hand-sm);
    padding: .35rem;
    box-shadow: 5px 6px 0 rgba(142, 74, 90, 0.13);
    transform: rotate(-1.4deg);
}

.format-court__cadre video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: 3px;
    background: var(--ivoire-dark);
}
/* UNE PHOTO DANS LE CADRE, PAS SEULEMENT UNE VIDÉO (22/09).
   Seule la vidéo avait sa règle. Une <img width="733" height="1100">
   posée là prenait la largeur de la colonne (290 px) mais gardait sa
   hauteur HTML (1 100 px) : la règle globale des images ne fixe pas
   `height: auto`. Portrait du vigneron étiré, texte repoussé en bas,
   panorama en lanière. Les photos prennent le format portrait
   d'Instagram, 4:5, recadrées sans déformation. */
.format-court__cadre img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 3px;
    background: var(--ivoire-dark);
}
/* ── Les points focaux des photos recadrées (22/09) ──────────────
   Une photo en hauteur posée dans un bandeau large n'en montre plus
   qu'un quart. Recadrée au centre, elle coupait l'étiquette de la
   bouteille VICUS (relevé par Nathan sur « Que publier… caviste »), ou
   ne gardait que le torse sous les bras levés. Chaque photo portrait
   dit ici où regarder : la règle vaut partout où elle est recadrée, et
   ne change rien là où elle est montrée entière. Relevés sur la photo,
   en pourcentage de sa hauteur. */
img[src*="bande-bouteille-grappes"]  { object-position: 50% 75%; }   /* l'étiquette */
img[src*="bande-bras-leves"]         { object-position: 50% 42%; }   /* bouteilles et visage */
img[src*="moselle-chemin"]           { object-position: 50% 42%; }   /* bouteilles et visage */
img[src*="moselle-grappes-blanches"] { object-position: 50% 55%; }   /* la grappe */
img[src*="moselle-pinot"]            { object-position: 50% 70%; }   /* les grappes */

.format-court__film figcaption {
    font-family: var(--font-hand);
    font-size: 1.05rem;
    color: var(--crayon-light);
    text-align: center;
}
.format-court__titre {
    font-family: var(--font-hand);
    font-size: clamp(1.9rem, 3.6vw, 2.6rem);
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
    margin: .3rem 0 1rem;
    color: var(--charbon);
}
.format-court__texte p {
    margin: 0 0 .9rem;
    max-width: 52ch;
    color: var(--crayon);
    line-height: 1.7;
}
.format-court__texte p:last-child { margin-bottom: 0; }
.format-court__note { font-size: 0.95rem; color: var(--crayon-light); }
.format-court__note a { color: var(--lie); text-decoration: underline; }

@media (max-width: 760px) {
    
    .format-court { padding: 2.4rem 0; }
    .format-court__bloc { grid-template-columns: 1fr; gap: 1.2rem; }
    .format-court__film { max-width: 230px; margin-inline: auto; gap: .5rem; }
}

.vitrine--planche { background: var(--ivoire); }
.vitrine--planche .vitrine__note { margin-top: 1.8rem; }

@media (max-width: 640px) {
    .vitrine--planche { padding: 2.2rem 0; }
    .vitrine--planche .vitrine__vue--photo img { height: 150px; }
    .vitrine--planche .vitrine__vue--reel { width: 132px; }
}

.maquette { padding: var(--section-py) 0; background: var(--ivoire); border-top: 1.5px dashed var(--ivoire-dark); }
.maquette .section-header { margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.maquette__scene {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    gap: clamp(1rem, 3vw, 2rem);
    align-items: end;
}

.maquette__bureau-cadre { margin: 0; min-width: 0; }
.maquette__bureau {
    border: 1.5px solid var(--charbon);
    border-radius: var(--r-hand-sm);
    background: var(--ivoire);
    box-shadow: 6px 7px 0 rgba(142, 74, 90, 0.13);
    overflow: hidden;
    transform: rotate(-.4deg);
}
.maquette__barre {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .7rem;
    background: var(--ivoire-warm);
    border-bottom: 1.5px solid var(--charbon);
}
.maquette__pastille {
    width: 9px; height: 9px;
    border-radius: 50%;
    border: 1.2px solid var(--charbon);
    background: var(--ivoire);
    flex: 0 0 auto;
}
.maquette__url {
    flex: 1;
    margin-left: .4rem;
    padding: .15rem .6rem;
    border: 1.2px solid var(--ivoire-dark);
    border-radius: 20px;
    background: var(--ivoire);
    font-family: var(--font-body);
    font-size: .72rem;
    color: var(--crayon-light);
    letter-spacing: .02em;
}

.maquette__site { background: var(--ivoire); }
.maquette__nav {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem .9rem;
    border-bottom: 1px dashed var(--ivoire-dark);
}
.maquette__marque {
    font-family: var(--font-hand);
    font-size: 1.05rem;
    color: var(--lie);
    letter-spacing: .03em;
}
.maquette__liens { display: flex; gap: .8rem; font-size: .66rem; color: var(--crayon-light); text-transform: uppercase; letter-spacing: .08em; }
.maquette__liens span:first-child { color: var(--charbon); }

.maquette__hero { position: relative; }
.maquette__hero img { display: block; width: 100%; height: clamp(140px, 22vw, 220px); object-fit: cover; filter: saturate(.93); }

.maquette__hero-texte {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.4rem .9rem .7rem;
    background: linear-gradient(transparent, rgba(142, 74, 90, 0.18));
    color: #fff;
}
.maquette__hero-texte strong { display: block; font-family: var(--font-hand); font-size: clamp(1.1rem, 2.6vw, 1.6rem); font-weight: 400; }
.maquette__hero-texte span { font-size: .68rem; letter-spacing: .06em; opacity: .9; }

.maquette__cuvees { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding: .7rem .9rem; }
.maquette__cuvee { text-align: center; }

.maquette__cuvee img { display: block; width: 100%; height: 92px; object-fit: cover; border-radius: 3px; filter: saturate(.93); }
.maquette__cuvee b { display: block; margin-top: .3rem; font-size: .68rem; font-weight: 600; color: var(--charbon); }
.maquette__cuvee em { font-style: normal; font-size: .62rem; color: var(--crayon-light); }

.maquette__infos {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .9rem;
    padding: .5rem .9rem .8rem;
    border-top: 1px dashed var(--ivoire-dark);
    font-size: .66rem;
    color: var(--crayon-light);
}
.maquette__infos b { color: var(--charbon); font-weight: 600; }

.maquette__mobile { margin: 0; }
.maquette__telephone {
    border: 1.5px solid var(--charbon);
    border-radius: 22px;
    padding: .5rem .35rem;
    background: var(--ivoire-warm);
    box-shadow: 5px 6px 0 rgba(142, 74, 90, 0.13);
    transform: rotate(1.2deg);
}
.maquette__encoche { width: 42px; height: 4px; margin: 0 auto .4rem; border-radius: 4px; background: var(--ivoire-dark); }
.maquette__ecran-tel { border-radius: 14px; overflow: hidden; background: var(--ivoire); border: 1px solid var(--ivoire-dark); }
.maquette__ecran-tel img { display: block; width: 100%; height: 96px; object-fit: cover; filter: saturate(.93); }
.maquette__fiche { padding: .6rem .55rem; display: grid; gap: .45rem; }
.maquette__fiche strong { font-family: var(--font-hand); font-size: .95rem; color: var(--lie); font-weight: 400; }
.maquette__ligne { display: flex; gap: .35rem; font-size: .64rem; color: var(--crayon-light); line-height: 1.35; }
.maquette__ligne b { color: var(--charbon); font-weight: 600; }
.maquette__bouton {
    margin-top: .1rem;
    padding: .35rem;
    text-align: center;
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ivoire);
    background: var(--lie);
    border-radius: var(--r-hand-btn);
}
.maquette figcaption {
    margin-top: .9rem;
    font-family: var(--font-hand);
    font-size: 1.05rem;
    color: var(--crayon-light);
    text-align: center;
}

@media (max-width: 760px) {
    .maquette { padding: 2.6rem 0; }
    .maquette__scene { grid-template-columns: 1fr; gap: 1.4rem; justify-items: center; }
    .maquette__bureau { width: 100%; }
    .maquette__mobile { width: 190px; }
    .maquette__cuvees { gap: .4rem; }
    .maquette__cuvee img { height: 68px; }
}

.courbe { padding: var(--section-py) 0; background: var(--ivoire-warm); border-top: 1.5px dashed var(--ivoire-dark); }
.courbe__bloc {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(1.4rem, 4vw, 3rem);
    align-items: center;
}
.courbe__dessin {
    margin: 0;
    padding: clamp(.8rem, 2vw, 1.4rem);
    background: var(--ivoire);
    border: 1.5px solid var(--charbon);
    border-radius: var(--r-hand-sm);
    box-shadow: 5px 6px 0 rgba(142, 74, 90, 0.13);
}
.courbe__dessin svg { display: block; width: 100%; height: auto; }

.courbe__legende { fill: var(--crayon-light); font-family: var(--font-body); font-size: 16px; }
.courbe__note-svg { fill: var(--lie); font-family: var(--font-hand); font-size: 23px; }
.courbe__titre { font-family: var(--font-hand); font-size: clamp(1.7rem, 3.4vw, 2.3rem); color: var(--charbon); margin: 0 0 .8rem; font-weight: 400; }
.courbe__texte p { margin: 0 0 .9rem; }
.courbe__texte p:last-child { margin-bottom: 0; }
.courbe__texte .courbe__appui { font-size: 0.95rem; color: var(--crayon-light); }

.courbe__dessin.visible .courbe__trace {
    stroke-dasharray: 4400;
    animation: courbe-tracer 2.2s var(--ease-pose) backwards;
}
.courbe__dessin.visible .courbe__grappe {
    animation: courbe-grappe .5s var(--ease-doux) backwards;
}
@keyframes courbe-tracer { from { stroke-dashoffset: 4400; } to { stroke-dashoffset: 0; } }
@keyframes courbe-grappe { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .courbe__dessin.visible :is(.courbe__trace, .courbe__grappe) {
        animation: none;
        stroke-dasharray: none;
    }
}

@media (max-width: 860px) {
    .courbe { padding: 2.6rem 0; }
    .courbe__bloc { grid-template-columns: 1fr; gap: 1.3rem; }

    
    .courbe__legende { font-size: 26px; }
    .courbe__note-svg { font-size: 34px; }
}

.courts__rail {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 236px));
    justify-content: center;
    gap: clamp(1.2rem, 3vw, 2.2rem);
}
.courts__item { margin: 0; }
.courts__film { margin: 0; display: grid; gap: .7rem; }
.courts__cadre {
    background: var(--ivoire);
    border: 1.5px solid var(--charbon);
    border-radius: var(--r-hand-sm);
    padding: .35rem;
    box-shadow: 5px 6px 0 rgba(142, 74, 90, 0.13);
}

.courts__item:nth-child(1) .courts__cadre { transform: rotate(-1.3deg); }
.courts__item:nth-child(2) .courts__cadre { transform: rotate(.9deg); }
.courts__item:nth-child(3) .courts__cadre { transform: rotate(-.6deg); }

.courts__cadre video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: 3px;
    background: var(--ivoire-dark);
}
.courts__film figcaption { text-align: center; display: grid; gap: .15rem; }

.courts__film figcaption strong {
    font-family: var(--font-hand);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
    min-height: 2.4em;
    color: var(--charbon);
}
.courts__film figcaption span { font-size: 0.95rem; color: var(--crayon-light); }
.courts__note {
    font-family: var(--font-hand);
    font-size: 1.15rem;
    color: var(--crayon-light);
    text-align: center;
    margin-top: 1.8rem;
}

/* ── Les formats courts glissent, sur ordinateur comme au téléphone ──
   11/10/2026. Sept vidéos en grille de trois faisaient trois rangées :
   « Ce qu'on tourne » devenait un mur. Une seule rangée qui glisse,
   avec les flèches des prestations — site.js les branche sur
   .volet--video comme sur .serv. Les cartes n'apparaissent plus en
   décalé : hors champ, une carte en attente de « reveal » restait
   invisible. La règle mobile, plus bas, garde la main sous 720 px. */
.volet--video .courts__rail {
    display: flex;
    justify-content: flex-start;
    gap: 1.2rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: .5rem .3rem 1.1rem;
}
.volet--video .courts__rail::-webkit-scrollbar { display: none; }
.volet--video .courts__item { flex: 0 0 214px; scroll-snap-align: start; }
.courts__tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.courts__tete .volet__sous { margin: 1.6rem 0 1.2rem; text-align: left; }

/* ── Photos et plans vidéo mêlés dans les bandeaux de l'accueil ──
   11/10/2026. Un bandeau « dégustation », un bandeau « vignes », chacun
   avec ses photos ET ses plans, au lieu d'un bandeau photo et d'un
   bandeau vidéo. Le plan prend la hauteur de la photo (200 px, 140 sous
   768 px) : à 176 px de large il dépassait de moitié. */
.volet--photo .vitrine__vue--reel { width: auto; }
.volet--photo .vitrine__vue--reel :is(video, img) { height: 200px; width: auto; aspect-ratio: 9 / 16; }
@media (max-width: 768px) {
    .volet--photo .vitrine__vue--reel :is(video, img) { height: 140px; }
}

/* ── La bande des logos, sous « toute la chaîne » ──
   Fixe tant qu'elle n'en compte que trois : un défilement de trois
   logos répétés ressemblait à du remplissage. Les PNG sont déjà en
   noir et blanc, ombre comprise (CLAUDE/OUTILS/bande-logos.py). */
.bande-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(.25rem, 2vw, 2rem);
    list-style: none;
    margin: 0;
    padding: 0 0 clamp(1.5rem, 4vw, 2.5rem);
}
.bande-logos img { display: block; width: clamp(100px, 27vw, 176px); height: auto; }

@media (max-width: 720px) {
    
    .volet--video .courts__rail {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        margin-inline: calc(var(--gutter) * -1);
        padding: .5rem var(--gutter) 1.1rem;
        scroll-padding-left: var(--gutter);
        scrollbar-width: none;
    }
    .volet--video .courts__rail::-webkit-scrollbar { display: none; }
    .volet--video .courts__item { flex: 0 0 63%; max-width: 250px; scroll-snap-align: start; }
    .courts__tete .serv__nav { display: none; }
    .courts__tete .volet__sous { margin-inline: auto; text-align: center; }
}

:is(.cta-section, .footer, .courts)::before {
    content: '';
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
:is(.cta-section, .footer, .courts) > .container { position: relative; z-index: 1; }

.cta-section::before {
    background-image:
        linear-gradient(rgba(44, 44, 44, 0.15), rgba(44, 44, 44, 0.15)),
        url("/assets/photos/fonds/fond-cta.jpg");
}

.footer { position: relative; overflow: hidden; }
.footer::before {
    background-image:
        linear-gradient(rgba(44, 44, 44, 0.15), rgba(44, 44, 44, 0.15)),
        url("/assets/photos/fonds/fond-pied.jpg");
}

.volet--video .courts__cadre { box-shadow: 5px 6px 0 rgba(142, 74, 90, 0.15); }

.volet--video .courts__film figcaption strong { color: var(--charbon); }
.volet--video .courts__film figcaption span { color: var(--crayon-light); }

.process { position: relative; overflow: hidden; }
.process::before {
    content: '';
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image:
        linear-gradient(rgba(240, 233, 221, .84), rgba(240, 233, 221, .80)),
        url("/assets/photos/fonds/fond-process.jpg");
}
.process > .container { position: relative; z-index: 1; }
.process .section-subtitle { color: var(--crayon); }

.espace { padding: var(--section-py) 0; background: var(--ivoire-warm); border-top: 1.5px dashed var(--ivoire-dark); border-bottom: 1.5px dashed var(--ivoire-dark); }
.espace__grille {
    list-style: none;
    margin: 0 0 clamp(1.6rem, 3vw, 2.4rem);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.4vw, 1.8rem);
}
.espace__item {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: .9rem;
    align-items: start;
}
.espace__item img { width: 54px; height: auto; }
.espace__item h3 {
    font-family: var(--font-hand);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--charbon);
    margin: 0 0 .2rem;
}
.espace__item p { margin: 0; font-size: 0.95rem; color: var(--crayon); line-height: 1.5; }
.espace__item em { font-style: normal; color: var(--lie); }

.espace__porte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .8rem 1.4rem;
    padding: clamp(1rem, 2.4vw, 1.5rem);
    background: var(--ivoire);
    border: 1.5px dashed var(--charbon);
    border-radius: var(--r-hand-sm);
    text-align: center;
}
.espace__porte p { margin: 0; font-size: .95rem; color: var(--crayon); max-width: 46ch; }
.espace__porte b { color: var(--charbon); }

@media (max-width: 900px) { .espace__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 620px) {
    .espace { padding: 2.4rem 0; }
    .espace .section-header { margin-bottom: 1.4rem; }
    .espace__grille { grid-template-columns: 1fr; gap: .85rem; margin-bottom: 1.3rem; }
    .espace__item { grid-template-columns: 44px minmax(0, 1fr); gap: .75rem; }
    .espace__item img { width: 44px; }
    .espace__item h3 { font-size: 1.15rem; }
    .espace__item p { font-size: 0.95rem; line-height: 1.42; }
    .espace__porte { padding: .9rem; gap: .7rem; }
    .espace__porte p { font-size: 0.95rem; }
}

.offre__espace {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin: .2rem 0 .9rem;
    padding-top: .7rem;
    border-top: 1.5px dashed var(--ivoire-dark);
    font-size: 0.95rem;
    color: var(--crayon-light);
}
.offre__espace b { color: var(--lie); font-size: 1.05rem; line-height: 1; }

/* ── LE FOND DU HERO, EN DÉFINITION ────────────────────────────────────
   Nathan, 23/09/2026 : « j'aimerais que la photo sur la page d'accueil
   soit moins floue, là je trouve que ça manque d'un côté premium ».

   Il n'y avait aucun flou déclaré : le flou venait de l'agrandissement.
   `fond-hero-2.jpg` mesurait 1600 px de large pour une surface qui en
   fait 2880 sur un écran de 1440 à deux pixels par point — l'image était
   étirée 1,80 fois. Et 82 Ko pour 1600 px de feuillage, c'est une
   compression qui mange le détail avant même l'étirement : un paysage de
   vigne est ce qu'un JPEG chiffre le plus mal.

   Repris depuis l'original du boîtier (6160 × 4640), au cadrage exact de
   la version précédente, en WebP : 2400 px pour 500 Ko, soit un
   agrandissement de 1,20 au lieu de 1,80, avec six fois plus de matière
   par pixel. Le petit écran reçoit 1400 px et 181 Ko : sous un voile et
   à cette taille physique, il n'a pas à télécharger un demi-mégaoctet de
   décor. */
.hero { position: relative; overflow: hidden; }
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* PLUS UN GRAMME DE BLANC. « Ce voile blanc est vraiment à proscrire,
       essaye plutôt un vignetage » (Nathan, 23/09/2026). Un calque clair
       ajoute du blanc à tous les canaux : la couleur s'affadit et il
       reste une brume. Un assombrissement fait l'inverse — il densifie,
       et c'est de là que vient l'impression de profondeur d'une photo
       bien tirée. Le fichier porte déjà son vignetage ; ce dégradé-ci
       pose l'ombre du côté du texte et s'efface vers la droite, où la
       vigne doit rester lisible. */
    background-image:
        /* Un second fondu, vertical : le pied du hero est la partie la plus
           éclairée de la photo, et c'est là que vivent le bouton et le lien
           secondaire. Il ancre aussi l'image au lieu de la laisser flotter. */
        linear-gradient(to top, rgba(26, 20, 18, .58) 0%, rgba(26, 20, 18, .30) 16%,
                        rgba(26, 20, 18, .06) 34%, transparent 52%),
        linear-gradient(105deg, rgba(26, 20, 18, .62) 0%, rgba(26, 20, 18, .46) 38%,
                        rgba(26, 20, 18, .18) 68%, rgba(26, 20, 18, .06) 100%),
        url("/assets/photos/fonds/fond-hero-v6-petit.webp");
}
@media (min-width: 901px) {
    .hero::before {
        background-image:
            /* Un second fondu, vertical : le pied du hero est la partie la plus
               éclairée de la photo, et c'est là que vivent le bouton et le lien
               secondaire. Il ancre aussi l'image au lieu de la laisser flotter. */
                linear-gradient(to top, rgba(26, 20, 18, .58) 0%, rgba(26, 20, 18, .30) 16%,
                                rgba(26, 20, 18, .06) 34%, transparent 52%),
                linear-gradient(105deg, rgba(26, 20, 18, .62) 0%, rgba(26, 20, 18, .46) 38%,
                                rgba(26, 20, 18, .18) 68%, rgba(26, 20, 18, .06) 100%),
                url("/assets/photos/fonds/fond-hero-v6.webp");
    }
}
.hero > .container, .hero > .hero__scroll { position: relative; z-index: 1; }

/* ── LES SUSPENSIONS DU HERO ───────────────────────────────────────────
   Elles pendent du haut, à gauche, dans la zone vide au-dessus du
   sur-titre. Posées sous le contenu (z-index 0 contre 1) : jamais elles
   ne passeront devant un mot, même si la typographie grandit.

   La lueur est un dégradé radial, pas un calque peint dans le PNG — un
   halo cuit dans l'image se découperait sur le fond photographique dès
   qu'on change de page ou de fond. Ici elle se fond, quoi qu'il y ait
   derrière.

   Pas de `mix-blend-mode: multiply` ici, contrairement aux doodles : le
   multiply éteindrait précisément les ampoules, qui sont la seule raison
   de poser ce dessin. */
.hero__lumiere {
    position: absolute;
    top: 3rem;
    /* À droite : depuis que la carte « Sur mesure » a quitté le hero, la
       colonne de droite est vide, et le titre occupe la gauche. */
    right: clamp(.5rem, 5vw, 4.5rem);
    width: clamp(168px, 19vw, 264px);
    z-index: 0;
    pointer-events: none;
    user-select: none;
}
.hero__lumiere::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 46%;
    width: 190%;
    aspect-ratio: 1 / .82;
    transform: translate(-50%, -20%);
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 42%,
        rgba(255, 216, 146, .40) 0%,
        rgba(255, 206, 124, .24) 26%,
        rgba(253, 199, 116, .10) 48%,
        rgba(253, 199, 116, .03) 66%,
        rgba(253, 199, 116, 0) 78%);
    animation: hero-lueur 7.5s ease-in-out infinite;
}
.hero__suspensions {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 7px 11px rgba(107, 45, 62, .13));
}

/* Un filament ne clignote pas, il respire. L'écart est volontairement
   petit : au-delà, l'œil voit une animation au lieu d'une lampe. */
@keyframes hero-lueur {
    0%, 100% { opacity: .78; }
    50%      { opacity: 1; }
}

@media (max-width: 900px) {
    /* Le titre s'élargit et monte : les lampes se rapprochent du bord. */
    .hero__lumiere { width: clamp(132px, 30vw, 176px); top: 2.4rem; right: .6rem; }
}
@media (max-width: 560px) {
    /* Elles étaient purement cachées. Mesuré à 375 px, il reste 137 px de
       vide entre le bas de la barre et le sur-titre : de quoi les loger
       en petit sans toucher au texte. Un décor qu'on supprime au lieu de
       le réduire, c'est un mobile qui reçoit moins que le bureau — ce
       n'était pas le but. */
    /* 4 rem et non 1,6 : la barre de navigation fait 73 px de haut à cette
       largeur et elle est opaque. À 1,6 rem il ne dépassait que 12 px de
       lampe sous elle — les cordons doivent disparaître derrière la barre,
       pas les abat-jour. */
    .hero__lumiere { width: 112px; top: 4rem; right: .4rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hero__lumiere::before { animation: none; opacity: .9; }
}

/* ── CE QUI REND LE TEXTE LISIBLE SUR LA PHOTO ─────────────────────────
   Nathan, 23/09/2026 : « l'effet blanc derrière le texte fait cheap ».

   Le halo montait à 0,90 d'opacité en son centre : à cette densité il
   n'éclaircit plus la photo, il l'efface, et il laisse une tache laiteuse
   dont on devine le bord. Tant que l'image était floue, la tache se
   fondait dedans ; depuis qu'elle est nette, elle se voit.

   La lisibilité se fabrique maintenant en deux temps, dont aucun
   n'efface l'image : un halo BEAUCOUP plus doux — 0,62 au centre, et six
   paliers au lieu de quatre pour qu'aucune limite ne se devine — et une
   lueur portée par les lettres elles-mêmes. Un texte qui porte sa propre
   clarté n'a pas besoin qu'on blanchisse ce qu'il y a derrière.

   Le contraste reste mesuré après coup : il ne doit jamais passer sous
   4,5 (voir le relevé du 17/09 sur les quatre textes du hero). */
/* PLUS AUCUN VOILE. « Je n'aime pas du tout le voile blanc » (Nathan,
   23/09/2026) — et il a raison sur le fond : un calque blanc posé sur une
   photo ajoute du blanc à tous les canaux. La couleur s'affadit, la
   matière disparaît, et on obtient exactement la tache laiteuse qu'on
   voulait éviter. Baissé, il reste une tache ; monté, il efface l'image.
   Il n'y a pas de bon réglage, seulement un mauvais principe.

   La lumière est passée DANS l'image. Le fichier du fond porte une
   correction gamma locale, au travers d'un masque très doux, à l'endroit
   exact où tombe le texte une fois le cadrage « cover » appliqué (le
   calcul est dans OUTILS/generer-fond-hero.py). Une gamma remonte les
   valeurs sans écraser les hautes lumières ni toucher la teinte : la
   vigne reste verte, le grain reste là, et le coin gauche gagne la
   lumière d'un matin au lieu d'un calque de peinture.

   Ne reste ici que le repère de superposition. */
.hero__text { position: relative; isolation: isolate; }
/* Le hero est désormais une photo tirée sombre : le texte s'y pose en
   clair, comme un titre de couverture. Rien n'est posé DERRIÈRE lui —
   c'est l'image elle-même qui porte l'ombre. */
.hero__sur { color: rgba(245, 240, 232, .88); }
.hero__title, .hero__kicker { color: var(--ivoire); }
/* « Souligne plutôt votre domaine en jaune » (Nathan, 23/09/2026) : le
   mot reste de la couleur du titre, c'est le trait qui le désigne. Un
   mot coloré ET souligné dirait deux fois la même chose. */
.hero .hero__title .accent { color: inherit; }
/* Le trait était tracé en lie (#6b2d3e) — invisible depuis que le hero
   est tiré sombre. Le voici en jaune, et un peu plus épais : un trait à
   la main doit se voir comme un geste, pas comme un liseré. */
.hero .hero__title .accent::after {
    height: 11px;
    bottom: -.14em;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C40 2, 80 8, 120 4 C160 1, 210 7, 260 3 C275 2, 290 5, 298 4' stroke='%23e8c972' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.hero__highlight { color: rgba(245, 240, 232, .94); border-left-color: #f0c96a; }
/* Le lien secondaire porte sa couleur en propre (crayon clair), donc il
   faut la reprendre ici ET au survol, sinon il repasse au bordeaux au
   premier passage de souris — invisible sur un tirage sombre. */
.hero .hero__voir { color: rgba(245, 240, 232, .92); text-decoration-color: rgba(245, 240, 232, .55); }
.hero .hero__voir:hover { color: #fff; text-decoration-color: rgba(255, 255, 255, .8); }
/* L'ombre portée devient sombre : sur fond sombre, une lueur claire
   autour des lettres les empâterait au lieu de les détacher. */
.hero__sur, .hero__title, .hero__kicker, .hero__highlight, .hero__voir {
    text-shadow: 0 1px 16px rgba(20, 15, 13, .55), 0 0 3px rgba(20, 15, 13, .35);
}

@media (max-width: 900px) {
    
    
    /* Le voile mobile est parti lui aussi : le fichier « petit » porte
       sa propre lumière, calée sur son propre cadrage. */
}

.tunnel__photo--ecran { transform: rotate(-1deg); padding: 10px 10px 0; }
.tunnel__photo--ecran img {
    height: auto;
    aspect-ratio: 1100 / 732;
    object-fit: contain;
    background: var(--ivoire);
}

.tunnel__appoint {
    margin: .9rem 0 0;
    font-size: 0.95rem;
    color: var(--crayon-light);
    max-width: 46ch;
}
.tunnel__appoint a { color: var(--lie); text-decoration: underline; }
.tunnel__actions--centre { justify-content: center; }

.esp-porte__aide--creer {
    margin-top: 1.2rem;
    padding: .8rem .9rem;
    background: var(--ivoire-warm);
    border: 1.5px dashed var(--ivoire-dark);
    border-radius: var(--r-hand-sm);
}
.esp-porte__aide--creer b { color: var(--charbon); }

.hero--large { align-items: stretch; padding: 0; }
.hero--large > .container {
    display: grid;
    /* Une seule colonne depuis le 21/09 : la carte « Sur mesure » qui
       occupait la seconde est retirée de l'accueil. La garder en `auto`
       laissait un gap de 2 rem mort à droite du texte. */
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    align-content: end;
    gap: 2rem;
    min-height: 100vh;
    padding-top: clamp(7rem, 14vw, 11rem);
    padding-bottom: clamp(5rem, 9vw, 7.5rem);
}
/* À GAUCHE, et c'est voulu. Le hero tenait deux colonnes, texte à gauche
   et carte « Sur mesure » à droite ; la carte est partie le 21/09 et le
   texte est resté seul dans 1100 px, d'où la moitié droite vide sur grand
   écran. On ne règle pas ça en centrant — un titre manuscrit de cette
   taille perd sa tenue au milieu — mais en le laissant OCCUPER la largeur :
   le titre monte à 6,6 rem et couvre le conteneur, les textes de service
   gardent une mesure lisible en dessous. */
.hero--large .hero__text { display: block; text-align: left; }

/* ── Les deux associés, dans l'en-tête de l'accueil (13/10/2026) ──
   « Un petit encart avec nos photos, une présentation simple et un
   rendez-vous » (Nathan). Deux tirages posés de travers sur une fiche
   ivoire : des photos du carnet, pas des pastilles rondes. En bas à
   droite sur grand écran, là où le paysage laisse un vide ; en bandeau
   compact sous les boutons ailleurs. Pas de partage des rôles sur la
   fiche : « deux associés pour une expertise complète » (Nathan). */
.hero__duo {
    position: relative;
    z-index: 1;
    display: grid;
    gap: .55rem;
    max-width: 320px;
    padding: 1.1rem 1.2rem 1.25rem;
    background: var(--ivoire);
    color: var(--charbon);
    border: 1.5px solid var(--charbon);
    border-radius: var(--r-hand-sm);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
    transform: rotate(-1.2deg);
}
.hero__duo-tirages { display: flex; justify-content: center; }
.hero__duo-tirages img {
    width: 92px;
    height: 116px;
    object-fit: cover;
    object-position: 50% 24%;
    padding: 5px 5px 15px;
    background: #fff;
    border: 1px solid rgba(44, 44, 44, .16);
    box-shadow: 0 4px 10px rgba(107, 45, 62, .18);
}
.hero__duo-tirages img:first-child { transform: rotate(-4deg); }
.hero__duo-tirages img:last-child  { transform: rotate(3deg); margin-left: -.5rem; }
.hero__duo-noms {
    margin: .3rem 0 0;
    font-family: var(--font-hand);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--lie);
    text-align: center;
}
.hero__duo-accroche,
.hero__duo-texte { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--crayon); text-align: center; }
.hero__duo-accroche { color: var(--charbon); font-weight: 600; }
.hero__duo-btn { justify-self: center; margin-top: .35rem; }
/* Sur grand écran, la fiche ne prend AUCUNE place au texte : une colonne
   de plus rétrécissait le titre, qui passait sur trois lignes et
   étirait son soulignement (vu chez Nathan à 1 263 px, 13/10). Elle se
   pose par-dessus le paysage, centrée dans le vide à droite du texte.
   Le titre grandit avec l'écran, donc le vide aussi : la marge droite
   idéale, mesurée de 1 200 à 1 920 px, suit une droite (104 → 203 px),
   ce que donne `right` ci-dessous, compté depuis le bord du conteneur. */
@media (min-width: 1200px) {
    .hero__duo {
        position: absolute;
        top: 52%;
        right: calc(489px - 36.25vw);
        width: 320px;
        transform: translateY(-50%) rotate(-1.2deg);
    }
}
@media (max-width: 1199px) {
    .hero__duo {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: .3rem .9rem;
        max-width: 520px;
        padding: .8rem .95rem .9rem;
        transform: rotate(-.6deg);
    }
    .hero__duo-tirages { grid-row: 1 / span 4; }
    .hero__duo-tirages img { width: 52px; height: 66px; padding: 3px 3px 9px; }
    .hero__duo-noms, .hero__duo-accroche, .hero__duo-texte { text-align: left; }
    .hero__duo-noms { margin: 0; font-size: 1.15rem; }
    .hero__duo-accroche, .hero__duo-texte { font-size: .84rem; line-height: 1.4; }
    /* Le bouton « Prenez rendez-vous » de l'en-tête est juste au-dessus :
       deux fois le même bouton à trois centimètres, c'est un de trop. */
    .hero__duo-btn { display: none; }
    .hero__duo-tirages { grid-row: 1 / span 3; }
}

.hero__sur {
    font-family: var(--font-body);
    font-size: clamp(.82rem, 1.3vw, .95rem);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    /* Ivoire, pas lie : depuis que le hero est tiré sombre, le bordeaux
       du sur-titre s'y perdait — contraste mesuré à 1,0. */
    color: rgba(245, 240, 232, .88);
    margin: 0 0 1.1rem;
}

.hero--large .hero__title {
    
    font-size: clamp(2.8rem, 7.4vw, 6.6rem);
    line-height: .9;
    margin-bottom: 1.6rem;
    display: grid;
    justify-items: start;
    gap: .12em;
}
.hero__ligne { display: block; }
.hero--large .hero__kicker { margin-bottom: 1.6rem; max-width: 34ch; }

@media (max-width: 900px) {
    
    .hero--large > .container { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
}
@media (max-width: 560px) {
    .hero--large > .container { padding-bottom: 3.5rem; }
    .hero--large .hero__title { font-size: clamp(2.5rem, 11vw, 3.4rem); }
    .hero--large .hero__kicker { max-width: none; }
}

.refs {
    padding: clamp(1.4rem, 2.6vw, 2.1rem) 0;
    background: var(--ivoire);
    border-top: 1.5px dashed var(--ivoire-dark);
    border-bottom: 1.5px dashed var(--ivoire-dark);
}
.refs__label {
    text-align: center;
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--crayon-light);
    opacity: .75;
    margin: 0 0 1rem;
}
.refs__piste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.4rem, 4.5vw, 3.2rem);
    margin: 0;
    padding: 0;
    list-style: none;
}
.refs__item a {
    display: grid;
    justify-items: center;
    gap: .25rem;
    text-decoration: none;
    
    filter: grayscale(1);
    opacity: .62;
    transition: opacity var(--t-moyen) var(--ease-doux), filter var(--t-moyen) var(--ease-doux);
}
.refs__item a:hover, .refs__item a:focus-visible { opacity: .92; }
.refs__nom {
    font-family: var(--font-body);
    font-size: clamp(.92rem, 1.5vw, 1.05rem);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--charbon);
    line-height: 1;
}
.refs__quoi {
    font-family: var(--font-body);
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--crayon-light);
}
.refs__note {
    text-align: center;
    font-family: var(--font-body);
    font-size: .74rem;
    color: var(--crayon-light);
    opacity: .8;
    margin: 1rem 0 0;
}
.refs__note a { color: var(--lie); text-decoration: underline; }

@media (max-width: 560px) {
    .refs { padding: 1.8rem 0; }
    .refs__piste { gap: 1.4rem 2rem; }
}

.hero__portes--colonne {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: end;
    gap: .6rem;
    width: min(320px, 32vw);
    margin: 0;
}
.hero__portes--colonne .porte {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    padding: .7rem .9rem;
    text-align: left;
}
.hero__portes--colonne .porte__fig { margin: 0; }
.hero__portes--colonne .porte__fig img { width: 46px; height: auto; }
.hero__portes--colonne .porte__nom { font-size: 1.15rem; margin: 0; }

.hero__portes--colonne .porte__quoi { grid-column: 1 / -1; font-size: .8rem; margin: .15rem 0 0; }
.hero__portes--colonne .porte__lien { display: none; }

@media (max-width: 900px) {
    
    .hero__portes--colonne {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: .6rem;
    }
}
@media (max-width: 480px) {
    .hero__portes--colonne { grid-template-columns: minmax(0, 1fr); }
}

.refs__item--logo { display: flex; align-items: center; }
.refs__logo {
    display: block;
    filter: grayscale(1);
    opacity: .62;
    transition: opacity var(--t-moyen) var(--ease-doux), filter var(--t-moyen) var(--ease-doux);
}
.refs__item--logo:hover .refs__logo { opacity: .92; }
.refs__logo img { display: block; height: clamp(26px, 2.8vw, 34px); width: auto; }

.serv {
    position: relative;
    overflow: hidden;
    padding: var(--section-py) 0;
    background: var(--charbon);
    border-top: 1.5px dashed rgba(255, 255, 255, .14);
    border-bottom: 1.5px dashed rgba(255, 255, 255, .14);
}
.serv::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(44, 44, 44, 0.15), rgba(44, 44, 44, 0.15)),
                url("/assets/photos/fonds/fond-serv.jpg") center / cover no-repeat;
}
.serv > .container { position: relative; z-index: 1; }
.serv__bloc {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: clamp(1.6rem, 4vw, 3rem);
    align-items: center;
}
.serv__intro .eyebrow { color: var(--jaune-light); }
.serv__intro .section-title { color: #fff; text-align: left; }
.serv__intro .section-title .underline::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='12' fill='none'%3E%3Cpath d='M2 8 C30 3, 60 10, 90 5 C120 0, 150 9, 198 4' stroke='%23e8c972' stroke-width='2.5' stroke-linecap='round' opacity='0.85'/%3E%3C/svg%3E");
}
.serv__texte { color: rgba(255, 255, 255, .88); font-size: 1rem; line-height: 1.6; margin: 0 0 1.6rem; }

.serv__nav { display: flex; gap: .7rem; }
.serv__fleche {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1.5px solid var(--lie-light);
    background: var(--lie);
    color: var(--ivoire);
    cursor: pointer;
    transition: background var(--t-moyen) var(--ease-doux), transform var(--t-vif) var(--ease-pose);
}
.serv__fleche svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.serv__fleche:hover { background: var(--lie-light); }
.serv__fleche:active { transform: scale(.94); }
.serv__fleche[disabled] { opacity: .35; cursor: default; }

.serv__rail {
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: .2rem 0 1rem;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    margin-right: calc(var(--gutter) * -1 - (100vw - min(100vw, var(--container))) / 2);
    padding-right: 2rem;
}
.serv__rail::-webkit-scrollbar { display: none; }
.serv__rail:focus-visible { outline: 2px solid var(--jaune-light); outline-offset: 4px; }

.serv-carte { flex: 0 0 214px; scroll-snap-align: start; }

.serv-carte__lien {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
.serv-carte__lien figure {
    transition: transform var(--t-moyen) var(--ease-doux),
                box-shadow var(--t-moyen) var(--ease-doux);
}
@media (hover: hover) {
    .serv-carte__lien:hover figure {
        transform: translateY(-4px);
        box-shadow: 7px 9px 0 rgba(0, 0, 0, .3);
    }
    .serv-carte__lien:hover h3 { color: var(--lie); }
}
.serv-carte__lien:focus-visible {
    outline: 2px solid var(--lie);
    outline-offset: 4px;
    border-radius: var(--r-hand-sm);
}
.serv-carte figure {
    margin: 0;
    height: 100%;
    background: var(--ivoire);
    border: 1.5px solid var(--charbon);
    border-radius: var(--r-hand-sm);
    overflow: hidden;
    box-shadow: 5px 6px 0 rgba(0, 0, 0, .3);
}
.serv-carte img { display: block; width: 100%; height: 148px; object-fit: cover; filter: saturate(.93); }
.serv-carte figcaption { padding: .8rem .85rem 1rem; display: grid; gap: .3rem; }

.serv-carte__tag {
    justify-self: start;
    font-family: var(--font-body);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ivoire);
    background: var(--lie);
    padding: .2rem .5rem;
    margin-top: -1.9rem;
    position: relative;
}
.serv-carte h3 { font-family: var(--font-hand); font-size: 1.3rem; font-weight: 700; color: var(--charbon); margin: .2rem 0 0; line-height: 1.15; }
.serv-carte p { margin: 0; font-size: 0.95rem; line-height: 1.45; color: var(--crayon); }

@media (max-width: 860px) {
    
    .serv { padding: 2.8rem 0; }
    .serv__bloc { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
    .serv__rail { margin-left: calc(var(--gutter) * -1); padding-left: var(--gutter); }
    .serv-carte { flex: 0 0 190px; }
}

.vitrine--tournage { padding-bottom: 0; overflow: visible; }
.vitrine--tournage .section-header { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.vitrine--tournage > .container:last-child { padding-top: 1.4rem; padding-bottom: clamp(2.2rem, 4vw, 3rem); }

.volet { position: relative; }





/* Les deux rails se touchent. L'écart et le filet pointillé séparaient deux
   volets qui s'annonçaient chacun par son étiquette — « Photo », « Vidéo ».
   Les étiquettes sont retirées le 21/09 : il n'y a plus deux blocs à
   distinguer, juste un défilé d'images puis un défilé de films. Un filet au
   milieu couperait le mouvement au lieu de le structurer. */
.volet--video { margin-top: .35rem; }

.volet__sous {
    margin: 1.6rem auto 1.2rem;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--crayon);
    max-width: 64ch;
    text-align: center;
}
.volet--video .courts__rail { margin-bottom: 0; }

.renvoi { padding: clamp(2rem, 4vw, 3rem) 0; }
.renvoi__bloc {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.2rem, 3vw, 2.4rem);
    padding: clamp(1.4rem, 3vw, 2.2rem);
    background: var(--ivoire-warm);
    /* Un filet plein plutôt que pointillé, et une ombre courte : le bloc
       paraissait vide parce que rien ne le posait sur la page. */
    border: 1.5px solid var(--ivoire-dark);
    border-radius: var(--r-hand-sm);
    box-shadow: 4px 5px 0 rgba(142, 74, 90, .09);
}
/* Le calendrier tenait 56 px pour un dessin de 241 : il se perdait dans une
   ligne de texte trois fois plus haute que lui. Centré et agrandi, il fait
   enfin le contrepoids de la vignette vidéo du bloc voisin. */
.renvoi__dessin {
    width: auto;
    height: auto;
    max-width: clamp(96px, 13vw, 132px);
    max-height: clamp(96px, 13vw, 132px);
    object-fit: contain;
    justify-self: center;
    align-self: center;
}
.renvoi__titre {
    font-family: var(--font-hand);
    font-size: clamp(1.9rem, 3.6vw, 2.6rem);
    font-weight: 400;
    color: var(--charbon);
    margin: 0 0 .5rem;
    line-height: 1.08;
}
.renvoi__bloc p { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--crayon); }
.renvoi__btn { margin-top: 1rem; }
.renvoi__bloc .btn { white-space: nowrap; }

.renvoi__vignette {
    position: relative;
    display: block;
    width: 150px;
    border-radius: var(--r-hand-sm);
    overflow: hidden;
    background: var(--ivoire-dark);
    box-shadow: 4px 5px 0 rgba(142, 74, 90, 0.13);
}
.renvoi__vignette img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    filter: saturate(.93);
}

.renvoi__lecture {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    box-shadow: 0 2px 8px rgba(142, 74, 90, 0.18);
    transition: transform var(--t-moyen) var(--ease-doux);
}
.renvoi__lecture svg {
    width: 18px;
    height: 18px;
    fill: var(--charbon);
    margin-left: 2px;
}
.renvoi__vignette:hover .renvoi__lecture { transform: translate(-50%, -50%) scale(1.08); }

.renvoi__duree {
    position: absolute;
    right: .4rem;
    bottom: .4rem;
    padding: .1rem .38rem;
    border-radius: 3px;
    background: rgba(142, 74, 90, 0.18);
    color: #fff;
    font-size: .72rem;
    line-height: 1.5;
}
.renvoi__cta {
    display: inline-block;
    margin-top: .55rem;
    font-weight: 600;
    color: var(--charbon);
    text-decoration: underline;
    text-underline-offset: .22em;
    text-decoration-thickness: 1.5px;
    text-decoration-color: var(--jaune);
}
.renvoi__cta:hover { text-decoration-color: var(--charbon); }

@media (max-width: 720px) {
    .renvoi__bloc { gap: .9rem; }
    .renvoi__dessin { max-width: 78px; max-height: 78px; }
    
    .renvoi__vignette { width: 96px; }
    .renvoi__lecture { width: 34px; height: 34px; }
    .renvoi__lecture svg { width: 14px; height: 14px; }
    .renvoi__duree { font-size: .66rem; right: .28rem; bottom: .28rem; }
}

.filiere__lien { transition: transform var(--t-moyen) var(--ease-pose); }
.filiere__vignette { transition: box-shadow var(--t-moyen) var(--ease-doux); }
.filiere__nom::after {
    content: ' →';
    color: var(--lie);
    opacity: 0;
    transition: opacity var(--t-moyen) var(--ease-doux);
}
.filiere__lien:hover, .filiere__lien:focus-visible { transform: translateY(-4px); }
.filiere__lien:hover .filiere__nom::after,
.filiere__lien:focus-visible .filiere__nom::after { opacity: 1; }
.filiere__lien:hover .filiere__vignette,
.filiere__lien:focus-visible .filiere__vignette { box-shadow: 4px 5px 0 rgba(142, 74, 90, 0.18); }

@media (hover: none) {
    .filiere__nom::after { opacity: 1; }
}
.tunnel-obj__bloc a{color:var(--lie);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}


/* ══════════════════════════════════════════════
   LA MARQUE PEINTE — médaillon d'aquarelle

   L'aquarelle ne se détoure pas : ses lavis n'ont pas de bord, et
   la carafe est translucide. On ne la découpe donc pas au ciseau,
   on la CADRE — un médaillon, comme une vignette collée dans le
   carnet. Le halo jaune reste : c'est la lumière du tableau, pas
   un défaut de détourage.
   ══════════════════════════════════════════════ */
.nav__logo-img--med {
    width: 64px;
    height: 64px;
    border-radius: 0;
    mix-blend-mode: normal;
    box-shadow: none;
    /* l'ombre suit le bord fondu, elle ne dessine pas de contour */
    filter: drop-shadow(0 1px 3px rgba(107, 45, 62, .22));
}
@media (max-width: 560px) { .nav__logo-img--med { width: 52px; height: 52px; } }

/* Pas de marque dans le pied de page : il est sur --charbon, et une
   aquarelle claire à fondu y fait une tache lumineuse au lieu de se
   fondre. Sur fond sombre, il faudrait un disque ivoire assumé — à
   trancher, plutôt que de le subir. */

/* Le lavis du fond de l'aquarelle, en bandeau très dilué : c'est ce
   qui raccroche la page au tableau sans repeindre le site. */
.tunnel-liv { background: linear-gradient(180deg, var(--cire-bg) 0%, var(--brique-bg) 46%, var(--ivoire-warm) 100%); }

/* ══════════════════════════════════════════════
   POURQUOI IL N'Y A PLUS DE TACHES ICI  (19/09/2026)

   Il y avait un lavis par section et une lueur derrière chaque titre.
   Les deux ont été retirés : un dégradé de taille moyenne posé sur une
   zone restreinte se lit comme une TACHE, jamais comme une lumière —
   l'œil trouve toujours son ovale. Et borné à une section, il s'arrête
   net au changement de fond.

   Tout est passé dans le calque de page (`html::before`), qui est
   continu d'un bout à l'autre du document et dont les ellipses sont
   plus larges que l'écran. Au-delà d'une certaine taille, un dégradé
   cesse d'être une forme et devient une ambiance : c'est là tout le
   réglage.
   ══════════════════════════════════════════════ */
.vitrine, .faq, .booking, .rythme, .section-header { position: relative; }

/* ══════════════════════════════════════════════
   LAISSER RESPIRER LE FOND

   Les sections peignaient leur ivoire en opaque : le calque de lumière
   travaillé en dessous était simplement masqué, et l'effet ne survivait
   que dans les rares sections sans fond. Leur ivoire devient un VOILE.
   Les cartes, elles, restent opaques — c'est ce qui les fait flotter
   au-dessus du lavis au lieu de s'y dissoudre.
   ══════════════════════════════════════════════ */
.vitrine, .process, .rythme, .team, .booking,
.filiere, .why, .pricing, .diagnostic, .faq {
    background-color: rgba(236, 227, 211, .46);
}
.tunnel-liv { background: rgba(236, 227, 211, .40); }

/* ══════════════════════════════════════════════
   PLANCHERS DE LISIBILITÉ  (19/09/2026)

   Audit du DOM à 1280 px : 38 styles de texte passaient sous 16 px,
   dont les cartes du hero à 12,8 px et une étiquette à 9,9 px. Sur un
   site où l'essentiel des visites se fait au téléphone, un texte de
   contenu ne descend pas sous 16 px, un texte secondaire pas sous 15,
   et une micro-étiquette pas sous 12,8.

   Ces règles sont en fin de feuille et ne touchent QUE la taille :
   elles ne peuvent pas déplacer une mise en page, seulement agrandir
   le texte qu'elle contient.
   ══════════════════════════════════════════════ */

/* ── Contenu : 16 px minimum ── */
.porte__quoi,
.why-card__text,
.faq-item__answer-inner,
.faq-item__answer-inner p,
.team__bio,
.volet__sous,

/* ── Secondaire : 15 px minimum ── */
.team__skill,
.team__member-label,
.rythme__fine,
.rythme__ruban,
.diagnostic__note,
.nav__sous-lien,
.service-card__alias,
.footer__links a,
.footer__links li,
.footer li,
.footer p,
.footer a {
    font-size: 0.95rem;
}

/* ── Micro-étiquettes : 12,8 px, et pas moins ── */
.serv-carte__tag {
    font-size: .8rem;
    letter-spacing: .04em;
}

/* Spécificité : `.hero__portes--colonne .porte__quoi` l'emportait sur le
   plancher et retenait le texte des cartes du hero à 12,8 px. */
.hero__portes--colonne .porte__quoi { font-size: 1rem; line-height: 1.5; margin: .25rem 0 0; }

/* Dernier passage d'audit : ce qui restait sous 15 px. */
.process-card p,
.team__back-list li {
    font-size: 1rem;
    line-height: 1.55;
}
.rappel__champ span,
.rappel__accord span,
.rappel__accord span a,
.barre-action__texte span {
    font-size: 0.95rem;
}






@media (max-width: 420px) {
}


/* ══════════════════════════════════════════════════════════════════
   LE TREMPLIN — le configurateur dans le hero
   Remplace les quatre portes de métier depuis le 21/09. C'est une
   fiche posée sur le tableau : le même papier ivoire, le même trait
   de crayon que les cartes d'offre, et une note chiffrée qui montre
   la sortie du configurateur plutôt que de la décrire.
   ══════════════════════════════════════════════════════════════════ */
/* Plus de carte : une image, un texte, un bouton, posés directement dans le
   hero. Le cadre — fond ivoire, bordure de 2 px, ombre portée dure et
   rotation — faisait un gros bloc opaque à côté d'un titre déjà large.
   Retiré le 21/09.

   Le fond ne disparaît pas pour autant : le voile du hero ne pèse que 0,30,
   du texte posé dessus tomberait sur la photo. On reprend donc le lavis
   radial de `.hero__text`, qui éclaircit sans dessiner de bord. */
.tremplin {
    position: relative;
    isolation: isolate;
    display: grid; gap: .75rem;
    max-width: 460px;
    padding: clamp(.6rem, 1.6vw, 1rem);
}
.tremplin::before {
    content: '';
    position: absolute;
    inset: -4rem -5rem;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 52% 46% at 50% 50%,
        rgba(245, 240, 232, .93) 0%,
        rgba(245, 240, 232, .89) 44%,
        rgba(245, 240, 232, .74) 64%,
        rgba(245, 240, 232, .38) 82%,
        rgba(245, 240, 232, 0) 100%);
}
.tremplin__oeil {
    font-family: var(--font-hand); font-size: 1rem; color: var(--lie-light);
    margin: 0; letter-spacing: .02em;
}
/* Le titre porte l'appel : il est gros, et c'est lui qu'on lit en premier
   dans le hero. Agrandi le 21/09 en même temps que le panier chiffré est
   parti — il n'y a plus de montant pour accrocher l'œil, c'est la phrase
   qui doit le faire. */
.tremplin__titre {
    font-family: var(--font-hand); font-size: clamp(2rem, 4.2vw, 2.85rem);
    color: var(--charbon); margin: 0; line-height: 1.06;
}
.tremplin__texte { margin: 0; font-size: .97rem; line-height: 1.55; color: var(--crayon); }

/* La note chiffrée. Volontairement dessinée comme une addition de
   bistrot : filet pointillé, montants alignés à droite, total souligné.
   On lit un ticket, pas un tableau de prix. */
/* La capsule peinte de la carte « Sur mesure », reprise dans le hero. Même
   objet graphique, donc la même classe `.offre__capsule` : la dupliquer sous
   un autre nom ferait deux bannières à maintenir, qui divergeraient.
   Seules changent la teinte — le bleu de la formule sur mesure, qui évite de
   répéter le bordeaux du bouton juste dessous — et la taille, un hero n'étant
   pas une carte de tarif. */
.tremplin__capsule {
    --accent: var(--bleu);
    margin: -.2rem 0 .1rem;
}
.tremplin__capsule .offre__nom { font-size: clamp(1.3rem, 2.4vw, 1.65rem); }

/* Le dessin de l'appel. Une seule image, grande et centrée : la frise de
   cinq petites icônes essayée avant lisait comme une barre d'outils, pas
   comme une invitation. Le mètre de couturier dit « sur mesure » mieux que
   la phrase ne le dit.
   Pas de `mix-blend-mode: multiply` : la carte a son propre fond ivoire,
   plus clair que le papier, et le multiply y creusait un carré terne. */
.tremplin__dessin {
    display: block;
    width: auto;
    height: auto;
    max-height: clamp(118px, 16vw, 168px);
    margin: .15rem auto .1rem;
    filter: brightness(1.06) drop-shadow(0 4px 7px rgba(107, 45, 62, .18));
}

.tremplin__actions { display: grid; gap: .6rem; justify-items: center; }
.tremplin__btn { gap: .5rem; }
.tremplin__lien {
    font-family: var(--font-hand); font-size: 1.02rem; color: var(--crayon-light);
    text-decoration: underline; text-underline-offset: 4px;
    display: inline-flex; align-items: center; min-height: 44px; padding-inline: .5rem;
}
.tremplin__lien:hover { color: var(--lie); }

@media (max-width: 768px) {
    .tremplin { max-width: 460px; margin-inline: auto; transform: none; text-align: left; }
}


/* ══════════════════════════════════════════════════════════════════
   L'ENTONNOIR — le configurateur en tête de la page d'offres
   Deux colonnes : à gauche le geste en trois temps et le bouton, à
   droite les cinq familles qu'on va y trouver. La colonne de droite
   n'est pas décorative — c'est elle qui répond à « qu'est-ce qu'il y
   a dedans ? » avant qu'on ait à cliquer pour le savoir.
   ══════════════════════════════════════════════════════════════════ */
.entonnoir { padding: clamp(2.2rem, 5vw, 3.6rem) 0 0; }
.entonnoir__bloc {
    display: grid; gap: clamp(1.4rem, 3.5vw, 2.8rem); align-items: start;
    grid-template-columns: 1fr;
    padding: clamp(1.4rem, 3.5vw, 2.6rem);
    background: var(--ivoire);
    border: 2px solid var(--crayon);
    border-radius: 18px;
    box-shadow: 6px 8px 0 rgba(142, 74, 90, .12);
}
@media (min-width: 900px) { .entonnoir__bloc { grid-template-columns: 1.25fr 1fr; } }
.entonnoir__texte .section-title { text-align: left; margin-bottom: .7rem; }
.entonnoir__texte .eyebrow { text-align: left; }
.entonnoir__chapo { font-size: 1.02rem; line-height: 1.6; margin: 0 0 1.2rem; }

/* La numérotation est dessinée à la main plutôt que laissée au
   navigateur : le chiffre doit être dans la même encre que les titres,
   et tenir dans la gouttière sans pousser le texte. */
.entonnoir__etapes { list-style: none; counter-reset: pas; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .95rem; }
/* Chaque temps a son dessin, et son numéro en pastille dessus — le même
   motif que les cinq familles d'à côté (22/09). */
.entonnoir__etapes li {
    counter-increment: pas; position: relative;
    display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: .85rem; align-items: start;
    font-size: .97rem; line-height: 1.55; color: var(--crayon);
}
.entonnoir__etape-img {
    width: 56px; height: 56px; object-fit: contain; padding: 4px; box-sizing: border-box;
    background: var(--ivoire); border: 1.5px solid var(--ivoire-dark); border-radius: 50%;
    filter: drop-shadow(0 2px 3px rgba(107, 45, 62, .12));
}
.entonnoir__etapes li::before {
    content: counter(pas); position: absolute; z-index: 1; left: 38px; top: -5px;
    width: 22px; height: 22px; display: grid; place-items: center;
    font-family: var(--font-hand); font-size: .95rem; line-height: 1; color: #fff;
    background: var(--lie); border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.entonnoir__etapes b { color: var(--charbon); display: block; }
.entonnoir__note { font-size: 0.95rem; color: var(--crayon); margin: .8rem 0 0; }

/* LES CINQ FAMILLES, EN PARCOURS (22/09). Une liste de mots en gras
   sur fond crème : Nathan, « il faut rajouter des assets ». Chaque
   famille a son dessin — les mêmes que dans le configurateur, pour
   qu'on les reconnaisse en y entrant — et son numéro d'étape, posé sur
   un trait pointillé qui les relie de haut en bas. */
.entonnoir__familles {
    list-style: none; counter-reset: famille; margin: 0;
    padding: clamp(1rem, 2.4vw, 1.4rem) clamp(.9rem, 2vw, 1.2rem);
    display: grid; gap: .95rem; position: relative;
    background: var(--cire-bg);
    border: 1.5px dashed var(--crayon-light);
    border-radius: 12px;
}
.entonnoir__famille {
    counter-increment: famille; position: relative;
    display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: .9rem; align-items: center;
}
/* le trait qui relie les étapes, derrière les dessins */
.entonnoir__famille:not(:last-child)::after {
    content: ''; position: absolute; left: 31px; top: 60px; bottom: -1rem;
    border-left: 2px dashed color-mix(in srgb, var(--lie) 45%, transparent);
}
.entonnoir__famille-img {
    position: relative; z-index: 1; width: 64px; height: 64px; object-fit: contain;
    padding: 4px; box-sizing: border-box;
    background: var(--ivoire); border: 1.5px solid var(--ivoire-dark); border-radius: 50%;
    filter: drop-shadow(0 2px 3px rgba(107, 45, 62, .12));
}
/* le numéro d'étape, en pastille sur le dessin */
.entonnoir__famille::before {
    content: counter(famille); position: absolute; z-index: 2; left: 44px; top: -4px;
    width: 24px; height: 24px; display: grid; place-items: center;
    font-family: var(--font-hand); font-size: 1rem; line-height: 1; color: #fff;
    background: var(--lie); border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.entonnoir__famille div { display: grid; gap: .1rem; }
.entonnoir__familles b { font-family: var(--font-hand); font-size: 1.25rem; color: var(--charbon); }
.entonnoir__familles span { font-size: 0.97rem; line-height: 1.45; color: var(--crayon); }

/* Le lien vers la page de détail, sous le bouton de chaque carte.
   Volontairement en texte : le geste principal est de composer, le
   détail reste une porte de sortie pour qui veut tout lire. */
.offre__detail {
    display: block; text-align: center; margin-top: .55rem;
    font-size: 0.95rem; color: var(--lie); text-decoration: underline;
    text-underline-offset: 3px; padding: .4rem;
}
.offre__detail:hover { color: var(--prune); }

/* L'espace client en résumé — la version courte des six vignettes. */
.espace--resume { padding-block: clamp(2rem, 5vw, 3.4rem); }
.espace__resume {
    display: grid; gap: clamp(1rem, 3vw, 2rem); align-items: center;
    grid-template-columns: 1fr;
}
@media (min-width: 760px) { .espace__resume { grid-template-columns: auto 1fr; } }
.espace__resume-dessin { width: clamp(110px, 18vw, 168px); height: auto; justify-self: center; }
.espace__resume .section-title, .espace__resume .eyebrow { text-align: left; }
.espace__resume-texte { font-size: 1rem; line-height: 1.6; margin: 0 0 1rem; }
.espace__resume-liste {
    list-style: none; margin: 0 0 1.2rem; padding: 0;
    display: flex; flex-wrap: wrap; gap: .5rem;
}
.espace__resume-liste li {
    font-size: 0.95rem; color: var(--crayon);
    background: var(--ivoire-warm); border: 1.5px solid var(--ivoire-dark);
    border-radius: 999px; padding: .32rem .8rem;
}

.tunnel-fin__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }

/* ── LA CARTE DES VIGNOBLES ────────────────────────────────────────────
   PRÉFIXE « .vignobles », PAS « .carte ». Elle s'est d'abord appelée
   .carte, .carte__nom… — les noms des VIGNETTES du configurateur, et
   site.css est chargé sur sa page. Pendant un jour, chaque vignette a
   hérité d'une marge basse de 26 à 42 px et d'un overflow caché, et
   sous 640 px le nom de chaque prestation a disparu (display: none,
   écrit ici pour les étiquettes de la carte). Relevé le 22/09.
   Elle remplace les deux grands encarts « En Moselle » et « En Savoie »,
   retirés le 21/09 : mettre en avant les deux seuls endroits où l'on a
   déjà tourné donnait à lire une agence locale, alors que la page dit
   l'inverse.

   Les treize noms sont du vrai texte dans le SVG, pas un tracé : ils sont
   lus par les moteurs, sélectionnables, et ils grossissent avec la page.
   Le détail des appellations reste dans la liste en dessous, qui porte
   l'essentiel du référencement — la carte l'illustre, elle ne la remplace
   pas.

   Les coordonnées sont de vraies longitudes/latitudes projetées
   linéairement ; à l'échelle de la France la déformation ne se voit pas. */
.vignobles {
    position: relative;
    isolation: isolate;
    margin: 0 0 clamp(1.6rem, 3.6vw, 2.6rem);
    padding: clamp(1.6rem, 3.4vw, 2.8rem) clamp(.5rem, 2vw, 1.5rem);
    border: 1.5px solid var(--ivoire-dark);
    border-radius: 18px;
    overflow: hidden;
    /* Le même fond photographique que la section « process », sous un voile
       épais : on ne doit pas lire la photo, seulement sentir qu'il y a de la
       matière. Un aplat ivoire rendait la carte triste. */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image:
        linear-gradient(rgba(240, 233, 221, .90), rgba(240, 233, 221, .86)),
        url("/assets/photos/fonds/fond-process.jpg");
}

/* Les dessins qui habillent les angles. Ils sont décoratifs : `aria-hidden`,
   sans clic possible, et ils s'effacent avant la carte quand la place
   manque — un décor ne doit jamais pousser le contenu dehors. */
.vignobles__deco {
    position: absolute;
    z-index: -1;
    width: auto;
    height: auto;
    opacity: .5;
    pointer-events: none;
    mix-blend-mode: multiply;
    filter: drop-shadow(0 2px 4px rgba(107, 45, 62, .12));
}
.vignobles__deco--cep     { top: 4%;   left: 2.5%;  max-height: clamp(64px, 9vw, 118px); }
.vignobles__deco--grappe  { top: 6%;   right: 3%;   max-height: clamp(58px, 8vw, 104px); }
.vignobles__deco--domaine { bottom: 5%; left: 4%;   max-height: clamp(56px, 8vw, 100px); }
.vignobles__deco--verre   { bottom: 4%; right: 4%;  max-height: clamp(60px, 8.5vw, 110px); }

@media (max-width: 900px) {
    .vignobles__deco { display: none; }
}
.vignobles__svg {
    display: block;
    width: 100%;
    max-width: 780px;
    height: auto;
    margin-inline: auto;
    overflow: visible;
}
.vignobles__terre {
    fill: color-mix(in srgb, var(--vert) 12%, var(--ivoire));
    stroke: var(--crayon);
    stroke-width: .7;
    stroke-linejoin: round;
    paint-order: fill stroke;
}
.vignobles__point {
    fill: var(--lie);
    stroke: var(--ivoire);
    stroke-width: .6;
}
.vignobles__nom {
    font-family: var(--font-hand);
    /* en unités du viewBox : le texte suit l'échelle du dessin */
    font-size: 4.1px;
    fill: var(--charbon);
    dominant-baseline: middle;
}
.vignobles__legende {
    max-width: 62ch;
    margin: .8rem auto 0;
    text-align: center;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--crayon);
}

@media (max-width: 640px) {
    /* Les treize étiquettes se chevauchent sous cette largeur : le texte
       garde sa taille en pixels d'écran quand le dessin rétrécit. On
       cachait la carte entière — c'était jeter le dessin pour un défaut
       d'étiquettes. On ne cache donc que les étiquettes : la silhouette et
       les treize pastilles restent, et la liste juste en dessous donne les
       noms, en plus complet qu'une étiquette ne le ferait. */
    .vignobles { padding-inline: .25rem; }
    .vignobles__nom { display: none; }
    .vignobles__svg { max-width: 420px; }
    .vignobles__point { r: 2.1; }
}

/* ── LE VOILE D'ACCUEIL ────────────────────────────────────────────────
   Quatre portes, et une règle de survol : celle qu'on vise garde ses
   couleurs, les trois autres passent en gris. Le gris est posé sur la
   GRILLE et retiré sur la carte visée — l'inverse (griser les voisines
   une par une) demanderait un sélecteur par carte.

   `:focus-within` double `:hover` : au clavier, la carte qui a le focus
   doit se distinguer exactement comme sous la souris. */
.porte {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: clamp(4.6rem, 9vw, 6.4rem) clamp(1rem, 4vw, 2.5rem) clamp(3.2rem, 6vw, 4rem);
    /* Le même fond flouté que le hero, sous un voile plus épais : le hero
       porte du texte sombre sur fond clair, le voile porte quatre cartes
       claires qui doivent s'en détacher. À 0,30 comme le hero, elles se
       confondaient avec la photo. */
    background-color: var(--ivoire);
    background-image:
        linear-gradient(rgba(245, 240, 232, .58), rgba(245, 240, 232, .52)),
        url("/assets/photos/fonds/fond-hero-v6-petit.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity var(--t-moyen) var(--ease-doux);
}
/* La porte couvre tout l'écran, comme le hero : même règle de définition. */
@media (min-width: 901px) {
    .porte {
        background-image:
            linear-gradient(rgba(245, 240, 232, .58), rgba(245, 240, 232, .52)),
            url("/assets/photos/fonds/fond-hero-v6.webp");
    }
}
.porte.est-visible { opacity: 1; }
body.porte-ouverte { overflow: hidden; }

.porte__boite { width: min(100%, 1040px); text-align: center; }
.porte__oeil {
    font-family: var(--font-hand); font-size: 1rem; color: var(--lie-light);
    margin: 0 0 .2rem;
}
.porte__titre {
    font-family: var(--font-hand);
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    color: var(--charbon);
    margin: 0 0 clamp(1.2rem, 3vw, 2rem);
    line-height: 1.05;
}
.porte__grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(.6rem, 1.6vw, 1.1rem);
}
.porte__choix {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    padding: clamp(.9rem, 2vw, 1.5rem) .6rem clamp(1rem, 2.2vw, 1.4rem);
    background: var(--ivoire-warm);
    border: 1.5px solid var(--ivoire-dark);
    border-radius: var(--r-hand-md);
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: filter var(--t-moyen) var(--ease-doux),
                transform var(--t-moyen) var(--ease-pose),
                border-color var(--t-moyen) var(--ease-doux);
}
.porte__dessin {
    width: auto; height: auto;
    max-width: 100%;
    max-height: clamp(76px, 11vw, 132px);
    object-fit: contain;
    mix-blend-mode: multiply;
    filter: brightness(1.08) drop-shadow(0 3px 5px rgba(107, 45, 62, .16));
}
.porte__nom {
    font-family: var(--font-hand);
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    color: var(--charbon);
    line-height: 1.1;
}
.porte__sous { font-size: .97rem; line-height: 1.35; color: var(--crayon-light); }

@media (hover: hover) {
    .porte__grille:hover .porte__choix { filter: grayscale(1); opacity: .72; }
    .porte__grille .porte__choix:hover {
        filter: none; opacity: 1;
        transform: translateY(-5px);
        border-color: var(--lie);
    }
}
.porte__grille:focus-within .porte__choix { filter: grayscale(1); opacity: .72; }
.porte__grille .porte__choix:focus {
    filter: none; opacity: 1;
    border-color: var(--lie);
}
.porte__grille .porte__choix:focus-visible {
    outline: 3px solid var(--jaune);
    outline-offset: 4px;
}
.porte__boite:focus { outline: none; }   /* cible technique de l'ouverture */
/* Rouvert par « changer » : la porte déjà choisie porte son étiquette. */
.porte__choix.est-actuel { position: relative; border-color: var(--vert); border-width: 2px; }
.porte__choix.est-actuel::after {
    content: 'votre choix'; position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%) rotate(-2deg);
    padding: .05rem .55rem; border-radius: 999px; white-space: nowrap;
    font-family: var(--font-hand); font-size: .95rem; color: #fff; background: var(--vert);
}

/* « Vous êtes vigneron · changer » : au bas du menu « Les métiers »,
   sous un pointillé, en petit — discret, mais là où on le cherche. */
.nav__sous-segment {
    margin: .3rem .15rem 0; padding: .45rem .55rem .15rem;
    border-top: 1px dashed var(--ivoire-dark);
    font-size: .9rem; line-height: 1.3; color: var(--crayon-light); white-space: nowrap;
}
.nav__sous-segment b { font-weight: 600; color: var(--crayon); }
.nav__sous-changer {
    min-height: 32px; padding: 0 .2rem; background: none; border: 0; cursor: pointer;
    font: inherit; color: var(--lie); text-decoration: underline; text-underline-offset: 2px;
}
.nav__sous-changer:focus-visible { outline: 2px solid var(--jaune); outline-offset: 2px; border-radius: 3px; }
@media (max-width: 900px) {
    .nav__sous-segment { text-align: center; font-size: .9rem; }
    .nav__sous-changer { min-height: 40px; }
}

.porte__passer {
    margin-top: clamp(1rem, 2.4vw, 1.6rem);
    min-height: 44px;
    padding-inline: .8rem;
    background: none;
    border: 0;
    font-family: var(--font-hand);
    font-size: 1.22rem;
    color: var(--crayon);
    text-decoration: underline;
    text-underline-offset: 5px;
    cursor: pointer;
}
.porte__passer:hover { color: var(--lie); }

@media (max-width: 720px) {
    .porte__grille { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
    /* Quatre cartes empilées ne tiennent pas dans un écran : on rend le
       voile défilable plutôt que de rogner la dernière. */
    .porte { place-items: start center; overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .porte { transition: none; }
    .porte__choix { transition: none; }
    .porte__grille .porte__choix:hover { transform: none; }
}

/* La marque en haut à gauche du voile. Plus grande que dans la barre de
   navigation : ici elle est seule à l'écran, c'est le premier contact, et
   la barre est cachée derrière le voile. */
.porte__marque {
    position: absolute;
    top: clamp(.9rem, 2.6vw, 2rem);
    left: clamp(.9rem, 2.6vw, 2.2rem);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-family: var(--font-hand);
    font-size: clamp(1.3rem, 2.6vw, 1.9rem);
    color: var(--charbon);
    pointer-events: none;
}
.porte__marque img {
    width: clamp(48px, 6.4vw, 86px);
    height: auto;
    filter: drop-shadow(0 2px 5px rgba(107, 45, 62, .16));
}

@media (max-width: 560px) {
    /* Sous cette largeur la marque mordrait sur le titre : on garde le
       dessin, qui suffit à situer, et on retire le mot. */
    .porte__marque span { display: none; }
}

/* Le bouton de contact, en face de la marque. Il ferme le voile avant de
   descendre vers la section : tant que le voile est là, `body` porte
   `overflow: hidden` et un saut d'ancre ne bouge rien. */
.porte__contact {
    position: absolute;
    top: clamp(.9rem, 2.6vw, 2rem);
    right: clamp(.9rem, 2.6vw, 2.2rem);
}

/* Les mentions obligatoires. Un premier écran qui demande quelque chose
   doit pouvoir dire qui le demande, sans qu'on ait à le traverser. */
.porte__legal {
    position: absolute;
    bottom: clamp(.8rem, 2.2vw, 1.4rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem 1.1rem;
    margin: 0;
    padding-inline: 1rem;
    width: 100%;
    max-width: 900px;
    font-size: .95rem;
    color: var(--crayon-light);
    text-align: center;
}
.porte__legal a {
    color: var(--crayon);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.porte__legal a:hover { color: var(--lie); }

@media (max-width: 560px) {
    /* Le libellé entier ne tient pas à côté de la marque. */
    .porte__contact { padding-inline: .8rem; font-size: .95rem; }
    .porte__legal { font-size: .76rem; gap: .25rem .7rem; }
}

/* ── LES OFFRES EN RAIL SUR PETIT ÉCRAN ────────────────────────────────
   Mesuré le 21/09 à 375 px : la section des offres tenait 5,5 écrans à
   elle seule, sur les 23,8 de l'accueil. Quatre cartes empilées, dont une
   de 892 px — personne ne descend jusqu'à la quatrième.

   En rail, la section tombe à un peu plus d'un écran : on voit tout de
   suite qu'il y a plusieurs formules, et on choisit d'en regarder une
   plutôt que de les subir dans l'ordre.

   Le rail déborde des gouttières du conteneur puis les reprend en
   `padding` : sans ça la première carte commence au ras du texte et on ne
   voit pas qu'il y en a d'autres à droite. Le `padding` vertical laisse
   passer le ruban « Le plus choisi », qui déborde de 0,85 rem vers le
   haut et qu'un `overflow-x` rognerait. */
@media (max-width: 860px) {
    .offres__grille {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: min(84%, 340px);
        gap: 1rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin-inline: calc(var(--gutter) * -1);
        padding: 1.1rem var(--gutter) .6rem;
        scroll-padding-left: var(--gutter);
        scrollbar-width: none;
        /* LE GESTE S'ARRÊTE AU RAIL.
           Sans `contain`, un balayage qui dépasse la dernière carte se
           propage au navigateur : sur iPhone c'est le geste « page
           précédente », déclenché en voulant simplement regarder la
           formule suivante. */
        overscroll-behavior-x: contain;
    }
    /* Pas de zoom au double-tap sur les cartes. Deux appuis rapprochés
       pendant qu'on fait défiler le rail agrandissent toute la page :
       l'en-tête, qui est `fixed`, part alors hors de l'écran et le site
       paraît cassé. `manipulation` laisse le pincement, qui reste le
       geste volontaire pour agrandir. */
    .offres__grille > .offre,
    .offres__grille > .offre a { touch-action: manipulation; }
    .offres__grille::-webkit-scrollbar { display: none; }
    .offres__grille > .offre {
        scroll-snap-align: start;
        /* En rail, toutes les cartes prennent la hauteur de la plus haute —
           celle « Sur mesure », qui porte huit lignes. La carte est une
           grille en `auto 1fr` : c'est cette rangée `1fr` qui avalait tout
           le surplus, et l'emblème de « Découverte » se retrouvait centré
           au milieu de 535 px pour un contenu de 200, avec un trou au-dessus.
           `align-content` seul n'y pouvait rien — une rangée `1fr` est déjà
           pleine par définition. On remet donc toutes les rangées au
           contenu, et le mou tombe en bas de carte, où il ne se voit pas. */
        /* Les deux premières rangées au contenu, la troisième souple : le
           mou va donc dans le contenu, où le bouton le pousse vers le bas.
           Les quatre appels à l'action se retrouvent sur la même ligne,
           quel que soit le nombre de lignes de la formule. Mettre la
           souplesse sur la DEUXIÈME rangée — ce que faisait la règle de
           bureau — creusait un trou au milieu de la carte. */
        grid-template-rows: auto auto 1fr;
    }
    .offres__grille > .offre .offre__contenu {
        display: flex;
        flex-direction: column;
    }
    .offres__grille > .offre .offre__contenu .btn { margin-top: auto; }
}

/* ── PASSE MOBILE DU 21/09/2026 ────────────────────────────────────────
   Relevé dans le volet navigateur à 375 px, pas déduit d'une maquette :
   17 liens de pied de page à 32 px de haut, un « Voir la vidéo » à 27,
   les adresses e-mail en ligne à 19-21, et du texte courant à 13,4 px.

   Le seuil retenu est 44 px, celui auquel un pouce touche ce qu'il vise
   sans agrandir. Les pastilles — le numéro de la frise, la durée d'une
   vidéo — gardent leur petite taille : on les regarde, on ne les lit pas
   et on ne les touche pas. */
@media (max-width: 640px) {

    /* Les liens de listes : le pied de page, surtout, où l'on va chercher
       une mention légale au pouce, souvent d'une seule main. */
    .footer li > a,
    .footer__horaires > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Un lien de renvoi est un appel à l'action : il doit se toucher comme
       un bouton, même s'il n'en a pas l'air. */
    .renvoi__cta,
    .booking__note > a,
    .evin__lien {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Les adresses e-mail, les téléphones et les liens d'un bloc de
       réservation posés dans une phrase. On ne peut pas leur donner 44 px
       de boîte sans casser le retour à la ligne au milieu d'un mot : on
       leur donne de la marge de frappe verticale, qui déborde sans pousser
       le texte. 0,72 rem porte une ligne de 21 px à 44.

       Les liens en pleine prose ailleurs — « la loi Évin », « nos
       réalisations » au fil d'un paragraphe — gardent leur hauteur de
       ligne : ce sont des cibles en ligne, que les règles d'accessibilité
       dispensent explicitement du seuil, et les passer en `inline-block`
       les empêcherait de se couper en fin de ligne. */
    .contact-bloc a[href^="mailto:"],
    .contact-bloc a[href^="tel:"],
    .footer a[href^="mailto:"],
    .footer a[href^="tel:"],
    .booking__attente a,
    .rappel__accord a {
        display: inline-block;
        padding-block: .72rem;
        margin-block: -.72rem;
    }

    /* Le texte courant. 13,4 px se lit mal à bout de bras dans un train ;
       14,5 coûte quelques pixels de hauteur et se lit. */
    .section-subtitle,
    .serv-carte p,
    .faq-item__answer-inner,
    .team__bio { font-size: 14.5px; }

    .hero__sur { font-size: 14px; }

    /* « Voir le détail » sous chaque offre : 37 px mesurés, c'est un vrai
       bouton de parcours, pas un lien au fil d'une phrase. */
    .offre__detail { min-height: 44px; display: inline-flex; align-items: center; }
    .serv-carte__tag { font-size: 13.5px; }
    .rythme__detail { font-size: 13.8px; }
}

/* ── /offres/prestations/ : les fiches, générées depuis le catalogue ──
   (OUTILS/generer-prestations.py, 22/09). La page n'avait aucune mise en
   forme : des titres de famille à gauche sous des chapeaux centrés, et
   des fiches en texte brut. Chaque famille a son dessin et son rang ;
   chaque fiche, le sien, et elle s'éclaire quand on y arrive depuis un
   lien « en savoir plus » du configurateur. */
.prestas__famille { margin: clamp(2.2rem, 5vw, 3.4rem) 0 0; scroll-margin-top: 100px; }
.prestas__tete {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 1.1rem; padding-bottom: .8rem; border-bottom: 1.5px dashed var(--ivoire-dark);
}
.prestas__dessin {
    width: 84px; height: 84px; object-fit: contain; flex: none;
    filter: drop-shadow(0 3px 5px rgba(107, 45, 62, .14));
}
.prestas__rang { margin: 0; font-family: var(--font-hand); font-size: 1rem; color: var(--crayon); }
.prestas__titre {
    margin: 0; font-family: var(--font-hand); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700;
    line-height: 1.05; text-transform: uppercase; color: var(--charbon);
}
.prestas__sous { margin: .2rem 0 0; max-width: 62ch; font-size: 1.05rem; line-height: 1.5; color: var(--crayon); }
.prestas__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 1rem; }
.presta {
    display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: .9rem; align-items: start;
    padding: 1.1rem 1.2rem; background: var(--ivoire);
    border: 1.5px solid var(--ivoire-dark); border-radius: 12px;
    box-shadow: 3px 4px 0 rgba(142, 74, 90, .08); scroll-margin-top: 110px;
}
.presta:target { border-color: var(--lie); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lie) 22%, transparent); }
.presta__dessin { width: 72px; height: 72px; object-fit: contain; }
.presta__nom { margin: 0; font-family: var(--font-hand); font-size: 1.45rem; line-height: 1.12; color: var(--lie); }
.presta__livre { margin: .15rem 0 .6rem; font-style: italic; color: var(--crayon); }
.presta__variantes { margin: -.2rem 0 .6rem; font-size: .97rem; line-height: 1.5; color: var(--charbon); }
.presta__variantes span { color: var(--crayon); }
.presta__faits {
    margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .75rem;
    font-size: .98rem; line-height: 1.5;
}
.presta__faits dt { font-weight: 700; color: var(--charbon); white-space: nowrap; }
.presta__faits dd { margin: 0; color: var(--crayon); }
.presta__ancre { display: block; scroll-margin-top: 110px; }
@media (max-width: 560px) {
    .prestas__dessin { width: 64px; height: 64px; }
    .presta { grid-template-columns: 1fr; padding: 1rem; }
    .presta__dessin { width: 60px; height: 60px; }
    .presta__faits { grid-template-columns: 1fr; gap: .05rem; }
    .presta__faits dd { margin-bottom: .45rem; }
    .presta__faits dt { white-space: normal; }
}

/* ══════════════════════════════════════════════════════════════════
   LE TRAJET — trois gestes, de la venue aux nouveaux clients
   ══════════════════════════════════════════════════════════════════
   Demandé par Nathan le 14/10/2026 : qu'un prospect s'y reconnaisse. Chaque étape
   part de ce qu'il se dit (la voix, en lie de vin), et répond par ce
   qu'on fait (le titre, sur le surligneur de sa famille du
   configurateur : bordeaux, ocre, bleu). Rien d'autre : Nathan a voulu
   le schéma sans texte dessous (« fais simple »). Toute l'étape est le
   lien vers son offre.

   LES SCÈNES SONT DESSINÉES EN em. Leur font-size fixe l'échelle : 10 px
   sur grand écran (260 x 190), 4 px sur téléphone (104 x 76). Tout ce
   qu'elles contiennent suit, sans une seule règle à doubler.

   VISIBLE PAR DÉFAUT, comme le surligneur du configurateur : chaque
   animation part d'un état et arrive à l'état normal. Si elle ne joue
   pas (onglet de fond, mouvement réduit), le schéma est déjà complet. */

/* SA PROPRE SECTION, JUSTE SOUS L'ACCUEIL (14/10/2026). L'accueil suit
   désormais l'ordre d'une page qui convertit : la promesse, le problème
   et sa réponse (ici), la solution détaillée, la preuve par l'exemple et
   par les clients, l'équipe, la méthode, l'offre, les objections, le
   rendez-vous. Fond papier entre le héros sombre et la bande sombre des
   services, pour que l'alternance tienne. */
.trajet-section {
    padding: var(--section-py) 0;
    /* MOINS VIDE (Nathan, 14/10/2026). Pas de photo : voilées comme les
       autres fonds, celles de la cave des Nogarévins ne laissaient qu'un
       beige uni, et une vigne de plus doublait « Comment ça marche ? ».
       Trois lavis à la place, un par étape, dans la couleur de sa famille
       (lie de vin, paille, bleu), sur la teinte papier des sections
       claires — la même manière que les lueurs du fond de page. */
    background:
        radial-gradient(ellipse 30% 58% at 17% 62%, rgba(107, 45, 62, .11), rgba(107, 45, 62, 0) 100%),
        radial-gradient(ellipse 30% 58% at 50% 58%, rgba(212, 168, 67, .16), rgba(212, 168, 67, 0) 100%),
        radial-gradient(ellipse 30% 58% at 83% 62%, rgba(61, 90, 128, .11), rgba(61, 90, 128, 0) 100%),
        rgba(236, 227, 211, .46);
}
/* Derrière chaque scène, la vraie texture d'aquarelle de sa famille — le
   coup de pinceau du configurateur, agrandi et presque effacé. */
.trajet__scene::before {
    content: "";
    position: absolute;
    inset: 10% -16% 0 -16%;
    z-index: 0;
    background: url("/assets/composer/contenus.png") center / 100% 100% no-repeat;
    opacity: .2;
    rotate: -5deg;
    pointer-events: none;
}
.trajet__etape--publier .trajet__scene::before { background-image: url("/assets/composer/reseaux-sociaux.png"); opacity: .26; rotate: 4deg; }
.trajet__etape--amplifier .trajet__scene::before { background-image: url("/assets/composer/acquisition.png"); rotate: -3deg; }
.trajet-section .section-header { margin-bottom: clamp(1.6rem, 3.5vw, 2.6rem); }
.trajet-section .trajet { margin-bottom: 0; }

.trajet {
    --ecart-trajet: clamp(1.5rem, 4vw, 3.4rem);
    list-style: none;
    margin: 0 auto clamp(1.8rem, 4vw, 3rem);
    padding: 0;
    max-width: 1040px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ecart-trajet);
}
.trajet__etape {
    --pas: 0s;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.trajet__etape:nth-child(2) { --pas: .35s; }
.trajet__etape:nth-child(3) { --pas: .7s; }
.trajet__etape.reveal.visible { animation-delay: var(--pas); }

/* ── La scène ───────────────────────────────────────────────────── */
.trajet__scene {
    position: relative;
    font-size: 10px;
    width: 26em;
    height: 19em;
    margin-bottom: .9rem;
    transition: translate var(--t-moyen) var(--ease-doux);
}
.trajet__lien:hover .trajet__scene { translate: 0 -3px; }
.trajet__num {
    position: absolute;
    top: -.3em;
    left: .2em;
    z-index: 3;
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: 4.2em;
    line-height: 1;
    color: var(--brique);
}
.trajet__dessin {
    position: absolute;
    height: auto;
    z-index: 2;
}

/* 1 · On tourne : les tirages s'ouvrent en éventail */
.trajet__photo {
    position: absolute;
    box-sizing: border-box;
    object-fit: cover;
    padding: .45em .45em 1.3em;
    background: #fffdf8;
    border-radius: .2em;
    box-shadow: 0 .35em .9em rgba(44, 44, 44, .2);
}
.trajet__photo--a { left: 3.4em;  top: 2.4em; width: 7.4em; height: 10em; rotate: -9deg; z-index: 1; }
.trajet__photo--c { left: 15.2em; top: 3.4em; width: 9.6em; height: 7.6em; rotate: 8deg;  z-index: 1; }
.trajet__photo--b { left: 8.4em;  top: 1.4em; width: 9.8em; height: 7.8em; rotate: -1deg; z-index: 2; }
.trajet__dessin--appareil { left: .4em;  bottom: .2em; width: 7.6em; rotate: -8deg; }
.trajet__dessin--video    { right: .6em; bottom: .4em; width: 6.2em; rotate: 7deg; }

.trajet__etape--tourner.visible .trajet__photo {
    animation: trajet-eventail .7s var(--ease-pose) both;
    animation-delay: calc(var(--pas) + .25s);
}
.trajet__etape--tourner.visible .trajet__photo--b { animation-delay: calc(var(--pas) + .15s); }
@keyframes trajet-eventail {
    from { opacity: 0; rotate: 0deg; translate: 0 1.4em; }
}
/* Le flash de l'appareil, une fois, au moment où les tirages sortent. */
.trajet__etape--tourner .trajet__scene::after {
    content: "";
    position: absolute;
    left: -.6em;
    bottom: -.6em;
    width: 12em;
    height: 12em;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 253, 240, .95) 0, rgba(255, 253, 240, 0) 65%);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
}
.trajet__etape--tourner.visible .trajet__scene::after {
    animation: trajet-flash .6s ease-out calc(var(--pas) + .1s) both;
}
@keyframes trajet-flash { 30% { opacity: 1; } to { opacity: 0; } }

/* 2 · On publie : les mêmes photos défilent dans le fil */
.trajet__telephone {
    position: absolute;
    left: 8.2em;
    top: .4em;
    z-index: 1;
    width: 9.6em;
    height: 17.8em;
    box-sizing: border-box;
    border: .26em solid var(--charbon);
    border-radius: 1.7em;
    background: #fffdf8;
    overflow: hidden;
    box-shadow: 0 .4em 1em rgba(44, 44, 44, .18);
}
.trajet__telephone::before {
    content: "";
    position: absolute;
    top: .45em;
    left: 50%;
    z-index: 1;
    width: 2.6em;
    height: .45em;
    margin-left: -1.3em;
    border-radius: .3em;
    background: var(--charbon);
}
.trajet__fil {
    margin-top: 1.4em;
    padding: 0 .7em;
}
.trajet__etape--publier.visible .trajet__fil {
    animation: trajet-fil 16s linear infinite;
    animation-delay: calc(var(--pas) + .6s);
}
/* La liste est écrite deux fois : à mi-course, la seconde moitié est
   exactement là où la première commençait, la boucle ne saute pas. Pour
   ça, chaque publication porte SA marge (pas de « gap », qui ne compte
   pas d'intervalle après la dernière), et le décalage du haut est une
   marge du fil, hors de la boîte qui glisse. */
@keyframes trajet-fil { to { translate: 0 -50%; } }
.trajet__post { display: block; margin-bottom: .8em; }
.trajet__post img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: .3em;
}
.trajet__ligne {
    display: block;
    height: .42em;
    margin-top: .38em;
    border-radius: .3em;
    background: var(--ivoire-dark);
}
.trajet__ligne + .trajet__ligne { width: 62%; }
.trajet__dessin--calendrier { left: .2em; bottom: 1em; width: 7.4em; }
.trajet__dessin--bulles     { right: .4em; top: 2.6em; width: 6.8em; }
.trajet__etape--publier.visible .trajet__dessin {
    animation: trajet-flotte 3.6s ease-in-out infinite alternate;
    animation-delay: calc(var(--pas) + .4s);
}
.trajet__etape--publier.visible .trajet__dessin--bulles { animation-delay: calc(var(--pas) + 1.6s); }
@keyframes trajet-flotte { to { translate: 0 -.55em; } }

/* 3 · On fait venir du monde : le mégaphone porte jusqu'au site */
.trajet__dessin--megaphone { left: 1.6em; top: 5.2em; width: 8.6em; rotate: -6deg; }
.trajet__dessin--site      { right: .6em; bottom: 1.2em; width: 9.4em; }
.trajet__dessin--loupe     { right: 1.4em; top: .8em; width: 6.4em; rotate: 6deg; }
.trajet__ondes {
    position: absolute;
    left: 9.4em;
    top: 5.4em;
    width: 6.4em;
    height: 6.4em;
}
.trajet__ondes span {
    position: absolute;
    inset: 0;
    border: .34em solid transparent;
    border-right-color: var(--lie);
    border-radius: 50%;
    opacity: .75;
    scale: .9;
}
.trajet__ondes span:nth-child(2) { inset: -1.3em; opacity: .5; }
.trajet__ondes span:nth-child(3) { inset: -2.6em; opacity: .3; }
.trajet__etape--amplifier.visible .trajet__ondes span {
    animation: trajet-onde 2.4s ease-out infinite;
    animation-delay: calc(var(--pas) + .5s);
}
.trajet__etape--amplifier.visible .trajet__ondes span:nth-child(2) { animation-delay: calc(var(--pas) + 1.3s); }
.trajet__etape--amplifier.visible .trajet__ondes span:nth-child(3) { animation-delay: calc(var(--pas) + 2.1s); }
@keyframes trajet-onde {
    from { opacity: 0; scale: .45; }
    30%  { opacity: 1; }
    to   { opacity: 0; scale: 1.15; }
}
.trajet__etape--amplifier.visible .trajet__dessin--loupe {
    animation: trajet-flotte 3.2s ease-in-out infinite alternate;
    animation-delay: calc(var(--pas) + .8s);
}

/* ── La flèche dessinée d'une étape à la suivante ───────────────── */
.trajet__fleche {
    position: absolute;
    top: 5.5rem;
    left: calc(100% - .4rem);
    width: calc(var(--ecart-trajet) + 1.6rem);
    min-width: 3rem;
    height: auto;
    overflow: visible;
    fill: none;
    stroke: var(--crayon-light);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.trajet__fleche path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.trajet__etape.visible .trajet__fleche path {
    animation: trajet-trace .6s ease-out both;
    animation-delay: calc(var(--pas) + .55s);
}
.trajet__etape.visible .trajet__fleche path + path { animation-delay: calc(var(--pas) + 1.1s); animation-duration: .25s; }
@keyframes trajet-trace { from { stroke-dashoffset: 1; } }

/* ── Le texte : la voix du prospect, puis ce qu'on fait ─────────── */
.trajet__voix {
    margin: 0 0 .35rem;
    font-family: var(--font-hand);
    font-size: clamp(1.15rem, 1.7vw, 1.32rem);
    line-height: 1.2;
    color: var(--lie);
    rotate: -1.5deg;
}
.trajet__titre {
    position: relative;
    isolation: isolate;
    display: inline-block;
    margin: 0;
    padding: 0 .45rem;
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: clamp(1.6rem, 2.5vw, 1.95rem);
    line-height: 1.1;
    color: var(--charbon);
    text-shadow: 0 1px 0 rgba(255, 253, 248, .85);
}
/* Sous le bas des lettres seulement, éclairci : sur un aplat de
   bordeaux, une encre foncée ne se lit plus (leçon du configurateur). */
.trajet__surligneur {
    position: absolute;
    z-index: -1;
    left: -12px;
    top: 42%;
    width: calc(100% + 26px);
    height: 66%;
    object-fit: fill;
    opacity: .55;
    clip-path: inset(0 0 0 0);
}
.trajet__etape.visible .trajet__surligneur {
    animation: trajet-surligne .55s cubic-bezier(.3, .8, .4, 1) both;
    animation-delay: calc(var(--pas) + .3s);
}
@keyframes trajet-surligne { from { clip-path: inset(0 100% 0 0); } }
/* Toute l'étape est le lien : la scène, la voix et le titre. Au survol,
   le surligneur se fonce et la scène se soulève — le geste du carnet,
   sans bouton ni pastille. */
.trajet__lien {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    color: inherit;
    text-decoration: none;
}
.trajet__surligneur { transition: opacity var(--t-moyen) var(--ease-doux); }
.trajet__lien:hover .trajet__surligneur,
.trajet__lien:focus-visible .trajet__surligneur { opacity: .85; }
.trajet__lien:focus-visible { outline: 2px solid var(--lie); outline-offset: 8px; border-radius: 14px; }

/* ── Téléphone : trois bandeaux, une scène à gauche ─────────────── */
@media (max-width: 720px) {
    .trajet-section {
        background:
            radial-gradient(ellipse 70% 22% at 20% 42%, rgba(107, 45, 62, .10), rgba(107, 45, 62, 0) 100%),
            radial-gradient(ellipse 70% 22% at 20% 64%, rgba(212, 168, 67, .15), rgba(212, 168, 67, 0) 100%),
            radial-gradient(ellipse 70% 22% at 20% 86%, rgba(61, 90, 128, .10), rgba(61, 90, 128, 0) 100%),
            rgba(236, 227, 211, .46);
    }
    .trajet { grid-template-columns: 1fr; gap: 1.1rem; }
    .trajet__etape { --pas: 0s; display: block; }
    .trajet__lien {
        display: grid;
        grid-template-columns: 5.9rem minmax(0, 1fr);
        column-gap: .85rem;
        align-items: center;
        text-align: left;
    }
    .trajet__scene { font-size: 3.6px; margin: 0; }
    /* Sur téléphone, le fil pointillé dit déjà l'ordre : un chiffre
       collé au bord de l'écran se lisait comme une erreur de mise en page. */
    .trajet__num { display: none; }
    .trajet__voix { font-size: 1.12rem; rotate: -1deg; }
    .trajet__titre { font-size: 1.55rem; padding-left: .2rem; }
    .trajet__fleche { display: none; }
    /* le fil qui relie les scènes, à la place des flèches */
    .trajet__etape:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 2.95rem;
        top: 4.6rem;
        bottom: -.95rem;
        border-left: 2px dashed var(--brique-clair);
    }
}

@media (prefers-reduced-motion: reduce) {
    .trajet__etape *,
    .trajet__etape *::before,
    .trajet__etape *::after,
    .trajet__scene::after { animation: none !important; }
    .trajet__lien:hover .trajet__scene { translate: none; }
}

/* ── Pages d'entrée des réseaux : les cartes en rail (15/10/2026) ──
   /instagram/, /linkedin/… sont ouvertes depuis un téléphone, presque
   toujours. Trois cartes empilées y prenaient 1,7 écran avant le
   rendez-vous : sous 700 px, elles passent en rail, comme les séries
   de l'accueil (.rail). Sur grand écran, la grille ne change pas. */
@media (max-width: 700px) {
    .tunnel-liv__grille--rail {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        margin-inline: calc(var(--gutter) * -1);
        padding: .6rem var(--gutter) 1.1rem;
        scroll-padding-left: var(--gutter);
    }
    .tunnel-liv__grille--rail > * {
        flex: 0 0 76%;
        max-width: 300px;
        scroll-snap-align: start;
    }
}