/* ───────────────────────────────────────────────────────────────
   Kamélécom — Hero section
   Chameleon-driven brand surface. Mockup-faithful brutalist layout.
   ─────────────────────────────────────────────────────────────── */

:root {
    /* Brand chameleon — drives background + every brand surface.
     Rest = deep forest green. The chameleon "wakes up" on hover
     and the bg mutates toward the color sampled under the pointer. */
    --bg: #001e0f;
    --ink: #F2EBD9;
    --dark: #001e0f;

    /* Kamelecom secondary palette — used in the manifesto bento cards */
    --accent-blue: #A8D0F5;
    --accent-yellow: #FBFBA0;
    --accent-peach: #F2A573;
    --accent-pink: #F0A6F0;
    /* Symboles +/− de la DA (hélice), utilisés en masque sur les toggles
     FAQ et expertises. Blanc = forme opaque du masque (la couleur vient
     de currentColor de l'élément). */
    --icon-plus: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2068.65%2068.64'%3E%3Cpath%20fill='%23fff'%20d='M68.65,24.53c0,12.18-9.87,22.06-22.06,22.06v22.05h-2.47c-12.19,0-22.06-9.87-22.06-22.05H0v-2.48c0-12.18,9.88-22.06,22.06-22.06V0h2.48c12.18,0,22.05,9.87,22.05,22.05h22.06v2.48Z'/%3E%3C/svg%3E");
    --icon-kam-arrow: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2041.95%2048.73'%3E%3Cpath%20fill='%23fff'%20d='M0,0v48.73c17.55,0,17.7-17.39,17.7-17.7.27.16,15.31,8.87,24.24-6.23L0,0Z'/%3E%3C/svg%3E");
    --icon-minus: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2068.65%2024.54'%3E%3Cpath%20fill='%23fff'%20d='M22.06,24.54H0v-2.48C0,9.88,9.88,0,22.06,0h46.59v2.48c0,12.18-9.87,22.06-22.06,22.06h-24.53Z'/%3E%3C/svg%3E");
    --p: 0;
    /* scroll progress 0 → 1, set by JS as the hero leaves the viewport */

    /* Type stacks
     Display : Acumin Variable (Adobe Fonts kit cct0kkj), Black weight.
     The wdth axis isn't available in this kit, so the type is Black at
     normal width — Bebas Neue stays as a graceful fallback.
     Bricolage Grotesque drives all body / micro copy (ex-Space Mono). */
    /* Titres : coupe unique Acumin Pro Extra Condensed Black (kit Adobe cct0kkj, font-display swap, Problème 11 option 2, 25/09/2026).
       "acumin-variable" reste en secours tant que le kit n'est pas republié ; les font-variation-settings sont ignorés par la coupe fixe. */
    --font-display: "acumin-pro-extra-condensed", "acumin-variable", "Bebas Neue", "Oswald", Impact, sans-serif;
    --font-mono: "Bricolage Grotesque", "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Layout tokens (header — historique) */
    --mx: -200px;
    --my: -200px;
    --pad-x: clamp(20px, 3.2vw, 56px);
    --pad-y: clamp(18px, 2.6vw, 40px);
    --gap: clamp(14px, 1.8vw, 28px);
    --card-gap: clamp(2px, .4vw, 6px);
    /* mirrors the tight letter spacing of the wordmark */
    --pill-w: clamp(46px, 4.4vw, 68px);
    --radius-card: clamp(14px, 1.6vw, 24px);
    --radius-pill: 999px;
    --max-w: 1920px;
    /* full-bleed hard cap (legacy) */
    --content-max: 1100px;
    /* éditorial : largeur de lecture confortable, match Tarifs/FAQ */

    /* Section rhythm — système unifié pour toutes les sections.
     Mobile-first : 20px de gutter horizontal sur 375px (anti-claustro),
     scale linéaire jusqu'à 120px sur 2000px+. Vertical 64→140px. */
    --section-px: clamp(20px, 6vw, 120px);
    --section-py: clamp(64px, 10vh, 140px);
    --section-gap: clamp(40px, 7vh, 96px);

    /* Spacing scale 4pt (utilitaire pour gaps internes) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Type scale fluide (ratio ≈1.25 majeur tierce) */
    --text-xs: clamp(11px, .72vw, 12px);
    --text-sm: clamp(12px, .85vw, 14px);
    --text-base: clamp(16px, 1.15vw, 18px);
    --text-lg: clamp(17px, 1.2vw, 20px);
    --text-xl: clamp(20px, 1.5vw, 26px);
    --text-2xl: clamp(24px, 2vw, 34px);
    --text-3xl: clamp(28px, 2.6vw, 44px);
    --text-4xl: clamp(36px, 3.6vw, 60px);
    --text-5xl: clamp(44px, 5vw, 80px);
    --text-6xl: clamp(54px, 7vw, 110px);

    /* Line heights & letter spacing */
    --lh-display: .95;
    --lh-tight: 1.1;
    --lh-snug: 1.4;
    --lh-body: 1.6;
    --ls-tight: -.01em;
    --ls-mono-tight: .04em;
    --ls-label: .14em;
    /* Sticky header height at rest. JS measures the real value on load
     and on window resize and writes it back here. The fallback covers
     the brief pre-script paint and uses an average across viewports. */
    --header-h: 240px;
    /* Header déjà replié à l'arrivée (html.is-header-locked, posé dans <head>) : la réserve
     tombe à la hauteur de la barre repliée, les heros remontent (Antoine 2026-09-15). */

    /* Motion */
    --t-bg: 1100ms;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

html.is-header-locked {
    --header-h: 90px;
}

* {
    box-sizing: border-box;
}

/* Typographie : jamais de césure auto en plein mot, et meilleure
   répartition des lignes (titres équilibrés, paragraphes sans mot
   orphelin en dernière ligne). */
h1,
h2,
h3,
h4 {
    hyphens: manual;
    text-wrap: balance;
}

p {
    hyphens: manual;
    text-wrap: pretty;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-mono);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Body bg snaps fast so it stays in sync with the hard section
     fractures (each section paints its own bg explicitly). */
    transition: background-color 200ms linear;
    /* `clip` instead of `hidden` : prevents the immersions marquee from
     creating a horizontal scrollbar, WITHOUT establishing a new scroll
     container (which would break position: sticky on the hero lede). */
    overflow-x: clip;
}

body::selection,
::selection {
    background: var(--dark);
    color: var(--ink);
}

a {
    color: inherit;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.skip-link {
    position: absolute;
    left: 8px;
    top: 8px;
    padding: 8px 12px;
    background: var(--dark);
    color: var(--ink);
    text-decoration: none;
    transform: translateY(-150%);
    transition: transform .2s var(--ease-out);
    z-index: 1000;
}

.skip-link:focus {
    transform: translateY(0);
}

/* ─── Section base ───────────────────────────────────────────── */

/* ─── Hero ───────────────────────────────────────────────────── */
.hero {
    /* La hero est "trouée" : pas de background, on voit la vidéo globale
     fixée derrière. Le contenu lead se positionne par-dessus. */
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    padding: 0;
    background: transparent;
    color: #ffffff;
}

/* Vidéo de fond GLOBALE : fixée au viewport pour rester visible derrière
   les sections "trouées" (.hero, .contact). Le <main> est position:
   relative z-index:1 pour passer au-dessus de la vidéo, et les sections
   opaques (avec background propre) couvrent la vidéo au scroll. Les
   sections transparentes (.hero, .contact) laissent revoir la vidéo. */
.hero__bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

main {
    position: relative;
    z-index: 1;
}

.hero__bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Composition en bas du hero : grid 2 colonnes, calée en bas.
   Col gauche : H1 + quote (aligné gauche, padding sur le rail du logo).
   Col droite : lede + CTAs (aligné droite). */
.hero__lead {
    position: relative;
    z-index: 2;
    /* Une seule colonne, tout à gauche (point 2026-09-09) ; le bloc est calé
     en bas du hero, la réassurance de la home vient dessous. */
    display: grid;
    grid-template-columns: 1fr;
    align-items: end;
    align-content: end;
    row-gap: clamp(14px, 2vh, 24px);
    column-gap: clamp(24px, 4vw, 80px);
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    padding-top: calc(var(--header-h) + clamp(8px, 1.5vh, 20px));
    padding-bottom: clamp(64px, 9vh, 120px);
    padding-inline: var(--pad-x);
    color: #ffffff;
}

.hero__col {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2vh, 24px);
}

.hero__col--left {
    align-items: flex-start;
    text-align: left;
}

.hero__col--right {
    align-items: flex-start;
    text-align: left;
}

@media (max-width: 768px) {

    /* Mobile : titre, paragraphe et boutons forment un seul bloc calé en bas
     (sans quoi les 2 rangées se partagent la hauteur du hero et le titre
     flotte loin du paragraphe). Retour Antoine 2026-09-08. */
    .hero__lead {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        align-content: end;
        row-gap: clamp(20px, 3vh, 32px);
    }

    .hero__col--right {
        align-items: flex-start;
        text-align: left;
    }
}

.hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(28px, 3.6vw, 56px);
    line-height: 1;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: inherit;
    max-width: 22ch;
    text-wrap: balance;
}

.hero__quote {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(15px, 1.4vw, 22px);
    line-height: 1.3;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: inherit;
    opacity: .95;
}

.hero__lede {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-base);
    letter-spacing: 0;
    line-height: 1.6;
    color: inherit;
    opacity: .92;
    max-width: 60ch;
    text-align: left;
}

/* Phrase-signature mise en avant en rose brand. */
.hero__lede strong {
    color: #ffffff;
    font-weight: 700;
}

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    /* Même boîte que .hero__lede (60ch ancrés à droite de la colonne) :
     les boutons s'alignent sur le bord gauche du paragraphe. Le ch est
     calé sur la même taille de police que le lede pour un bord identique. */
    font-size: var(--text-base);
    width: 100%;
    max-width: 60ch;
    gap: clamp(12px, 1.4vw, 24px);
    margin-top: clamp(8px, 1vh, 16px);
}

@media (max-width: 768px) {
    .hero__cta {
        justify-content: flex-start;
    }
}

/* Badge Google / Trustindex du hero home (2026-09-09) : même pastille translucide
   que les preuves, à droite ; infobulle blanche au survol du « i ». */
.hero .reassurance--hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(12px, 1.8vh, 18px);
}

.reassurance--hero .ti-badge {
    order: -1;
}

/* badge Google juste sous les boutons, preuves en dessous (Antoine 2026-09-09) */
.reassurance--hero .reassurance__track {
    width: 100%;
}

.ti-badge {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 12px;
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, .14);
    color: #ffffff;
    font-family: var(--font-mono);
    user-select: none;
}

.ti-badge__g {
    width: 34px;
    height: 34px;
    flex: none;
    display: block;
}

.ti-badge__body {
    display: grid;
    gap: 2px;
}

.ti-badge__rating {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}

.ti-badge__stars {
    display: inline-flex;
    gap: 2px;
    color: var(--accent-yellow);
}

.ti-badge__stars svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.ti-badge__score {
    font-weight: 700;
    font-size: 14px;
}

.ti-badge__count {
    font-size: 12px;
    opacity: .8;
}

.ti-badge__title {
    margin: 0;
    font-weight: 700;
    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.2;
}

.ti-badge__cert {
    margin: 0;
    font-size: 12px;
    opacity: .85;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ti-badge__info {
    position: relative;
    display: inline-flex;
}

.ti-badge__i {
    appearance: none;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1.5px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    font: italic 700 10px/1 Georgia, "Times New Roman", serif;
    cursor: help;
}

.ti-badge__i:focus-visible {
    outline: 2px solid var(--accent-pink);
    outline-offset: 2px;
}

.ti-badge__tip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: -8px;
    width: min(320px, 80vw);
    padding: 12px 14px;
    border-radius: 12px;
    background: #ffffff;
    color: var(--dark);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 400;
    text-align: left;
    box-shadow: 0 12px 32px rgba(0, 30, 15, .25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility 0s .2s;
    z-index: 5;
}

.ti-badge__tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 12px;
    border: 7px solid transparent;
    border-top-color: #ffffff;
}

.ti-badge__tip a {
    color: var(--dark);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ti-badge__tip a:hover {
    color: var(--accent-pink);
}

.ti-badge__info:hover .ti-badge__tip,
.ti-badge__info:focus-within .ti-badge__tip {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

/* zone tampon entre le « i » et la bulle pour ne pas la perdre en montant la souris */
.ti-badge__info::after {
    content: "";
    position: absolute;
    left: -10px;
    right: -10px;
    bottom: 100%;
    height: 12px;
}

/* Réassurance intégrée au premier écran de la home (2026-09-09) : version
   « ligne » (retour Antoine : les cards prenaient trop de place). Les 5
   preuves tiennent sur une ligne de texte à gauche, picto + chiffre + libellé,
   séparées par une pupille rose. Même markup que le bandeau des autres pages. */
.hero:has(.reassurance--hero) .hero__lead {
    padding-bottom: clamp(12px, 2vh, 20px);
}

.hero .reassurance--hero {
    padding: 0 var(--pad-x) clamp(72px, 9vh, 88px);
    position: relative;
    z-index: 3;
    /* au-dessus de .hero__lead (z 2) : l'infobulle Trustindex passait sous le bouton Contactez-nous (Antoine 2026-09-15) */
}

.reassurance--hero .reassurance__track {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    max-width: none;
    font-size: var(--text-base);
}

.reassurance--hero .reassurance__cell {
    background: rgba(255, 255, 255, .14);
    border-radius: 999px;
    padding: 9px 18px 9px 12px;
    min-height: 0;
    color: #ffffff;
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 7px;
    text-align: left;
    user-select: none;
}

.reassurance--hero .reassurance__eye {
    height: clamp(26px, 2.2vw, 32px);
    color: #ffffff;
}

.reassurance--hero .reassurance__big {
    font-size: clamp(18px, 1.55vw, 24px);
    white-space: nowrap;
}

.reassurance--hero .reassurance__sub {
    flex: 0 0 auto;
    font-size: clamp(16px, 1.3vw, 20px);
    opacity: .9;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .hero .reassurance--hero {
        padding-bottom: clamp(72px, 10vh, 96px);
    }

    .reassurance--hero .reassurance__track {
        gap: 10px 0;
    }
}

/* CTA principal (Contactez-nous) : pastille rose au repos, texte vert
   foncé. Au survol le remplissage blanc émerge en diagonale → pastille
   blanche. Le CTA ghost (Voir nos réalisations) reste outline. */
.hero .cta-pill:not(.cta-pill--ghost) {
    color: var(--dark);
    background: var(--accent-pink);
    border-color: var(--accent-pink);
}

.hero .cta-pill:not(.cta-pill--ghost)::before {
    background: #ffffff;
}

.hero .cta-pill:not(.cta-pill--ghost)::after {
    background-color: #ffffff;
}

.hero .cta-pill:not(.cta-pill--ghost):hover,
.hero .cta-pill:not(.cta-pill--ghost):focus-visible {
    color: var(--dark);
    border-color: #ffffff;
    outline: none;
}

.hero .cta-pill--ghost {
    color: #ffffff;
    border-color: rgba(255, 255, 255, .85);
}

.hero .cta-pill--ghost::before {
    background: var(--ink);
}

.hero .cta-pill--ghost::after {
    background-color: var(--ink);
}

.hero .cta-pill--ghost:hover,
.hero .cta-pill--ghost:focus-visible {
    color: var(--dark);
    border-color: var(--ink);
    outline: none;
}

/* ─── Bandeau de réassurance (section 2) ─────────────────────────
   6 white trust cards scrolling right → left in an infinite marquee.
   The track holds the set twice; CSS keyframes translate -50 % so
   the loop snaps back to a frame that is visually identical to the
   start — no jump. */
.reassurance {
    /* Section "trouée" : fond transparent pour laisser voir la vidéo
     du hero qui scrolle derrière. Bande compacte sur UNE ligne :
     6 cards alignées côte-à-côte. */
    position: relative;
    padding: clamp(40px, 6vh, 80px) var(--section-px);
    background: transparent;
    color: #ffffff;
}

.reassurance__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(10px, 1vw, 18px);
}

@media (max-width: 1100px) {
    .reassurance__track {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .reassurance__track {
        grid-template-columns: repeat(2, 1fr);
    }
}

.reassurance__cell {
    background: rgba(255, 255, 255, .92);
    color: var(--dark);
    border-radius: var(--radius-card);
    padding: clamp(12px, 1.6vh, 18px) clamp(14px, 1.6vw, 22px);
    /* hauteur −25 % (Antoine 2026-09-08) */
    /* Picto + titre alignés sur une même ligne (flex-wrap), le sous-titre
     repasse en dessous sur toute la largeur de la card. */
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    text-align: center;
    column-gap: clamp(8px, .8vw, 12px);
    row-gap: clamp(3px, .6vh, 7px);
    min-height: clamp(84px, 10.5vh, 112px);
    cursor: default;
    user-select: none;
}

.reassurance__big {
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(15px, 1.4vw, 22px);
    line-height: 1;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: inherit;
}

.reassurance__sub {
    margin: 0;
    flex: 0 0 100%;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: clamp(12px, .95vw, 14px);
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.35;
    color: inherit;
    opacity: .85;
}

/* Picto réassurance : forme pleine + trou en œil. Pas de rotation ;
   seul le trou (.reassurance__eye-hole) dart en JS pour l'illusion d'un
   œil qui regarde. Taille calée sur la HAUTEUR pour rester homogène
   malgré les ratios variés des pictos. */
.reassurance__eye {
    display: block;
    flex: 0 0 auto;
    height: clamp(26px, 2.6vh, 34px);
    width: auto;
    margin: 0;
    overflow: visible;
    color: var(--dark);
    fill: currentColor;
}

.reassurance__eye-hole {
    will-change: transform;
}

/* ─── Pourquoi Kamélécom (section 3) ──────────────────────────────
   Editorial split : H2 on the left in display Acumin, the three
   manifesto paragraphs + CTA stacked on the right in mono. Cream bg
   keeps the section calm so the typography does the work. */
.pourquoi {
    position: relative;
    padding: 0;
    background: var(--accent-pink);
    color: var(--dark);
    overflow: hidden;
}

.pourquoi__inner {
    width: 100%;
    display: grid;
    /* Visuel ≈ 2/3 mais jamais plus large que 80 % de la hauteur × 4/3 (grands écrans) :
     le plafond est sur la COLONNE, donc le texte commence juste après le visuel,
     sans vide rose entre les deux (Antoine 2026-09-15). */
    grid-template-columns: min(63.6%, calc(80vh * 4 / 3)) 1fr;
    gap: 0;
    align-items: stretch;
}

@media (max-width: 900px) {
    .pourquoi__inner {
        grid-template-columns: 1fr;
    }
}

/* Photo unique (moitié gauche home) : 6 portraits empilés, bascule
   INSTANTANÉE toutes les secondes (aucune transition, image directe). */
.pourquoi__single {
    position: relative;
    width: 100%;
    /* Format 4:3 horizontal sur toute la largeur des 2/3 (Antoine 2026-09-09), centré. */
    aspect-ratio: 4 / 3;
    width: 100%;
    /* la colonne porte le plafond 80vh × 4/3 */
    /* Remplit toute la hauteur de la section : si la colonne texte est plus haute
     que le 4:3, le visuel s'étire (cover) au lieu de laisser une bande rose (2026-09-15). */
    align-self: stretch;
    justify-self: start;
    /* calé à gauche de la section (Antoine 2026-09-09) */
    overflow: hidden;
}

/* Variante "photo unique" (page Agence) : la figure remplit toute la
   moitié gauche edge-to-edge, pleine hauteur. */
/* Frames empilées, déjà décodées. Tête calée en haut-centre pour qu'elle
   reste au même endroit d'une photo à l'autre (cadrage studio identique). */
/* Vidéo de morphing du logo : remplit toute la zone, en boucle. */
.pourquoi__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Left column — the K SVG with the chameleon eye that darts via
   the existing EYES timer (selector .eye--k-pourquoi). */

/* Champ d'écailles interactif : grille hexagonale de cercles qui se
   décalent loin du curseur (effet repoussage organique), K central
   dont l'œil suit la souris. Le SVG porte des CSS custom properties
   --mx/--my (coordonnées du curseur en unités SVG, set par JS) que
   chaque écaille consomme pour calculer son déplacement. */
/* K invisible : sert uniquement de référence Path2D pour le JS. */


/* Morphing entre lettres : --base-x / --base-y (registered @property)
   interpolés sur 1400 ms avec une easing liquide. Chaque écaille a un
   --i aléatoire (0–1) → transition-delay individuel jusqu'à 500 ms,
   métamorphose en vagues désordonnées sans surcharger le GPU. */
/* Chameleon eye in the standalone K — same darting CSS as the
   wordmark's .logo-eye, scoped to this SVG so the JS dart timer
   actually shows up visually. */
.pourquoi__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    gap: clamp(14px, 1.8vh, 22px);
    /* Colonne texte aérée (2026-09-15) : même marge droite que le reste du site (--pad-x),
     haut/bas généreux ; la hauteur de la section suit le contenu. */
    padding: clamp(36px, 5.5vh, 64px) var(--pad-x) clamp(36px, 5.5vh, 64px) clamp(28px, 3vw, 56px);
    /* gauche : 43 px à 1440, 56 px à 1920 (Antoine 2026-09-15) */
}

.pourquoi__list {
    padding-left: 1.2em;
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.5;
}

.pourquoi__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(28px, 3.2vw, 52px);
    line-height: 1;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: inherit;
    max-width: 22ch;
    text-wrap: balance;
}

.pourquoi__p {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: clamp(14px, 1.1vw, 16px);
    /* colonne au tiers : texte compact (2026-09-09) */
    line-height: 1.5;
    color: inherit;
    max-width: 68ch;
}

.pourquoi__p strong {
    font-weight: 700;
    /* Highlight the "caméléon" keyword without italics — keeps the
     editorial body in one weight class but lets the brand word pop. */
}

.pourquoi__list {
    margin: 0;
    padding-left: 1.2em;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: 1.6;
    color: inherit;
    max-width: 68ch;
}

.pourquoi__list li {
    margin: 0;
}

.pourquoi__list li::marker {
    color: currentColor;
}

.pourquoi__cta {
    margin-top: clamp(16px, 2.4vh, 32px);
}

/* Retour Raph 09/2026 : état plein (vert foncé) au repos, la teinte rose
   de la section revient au survol. */
.pourquoi .cta-pill {
    color: var(--ink);
    background: var(--dark);
    border-color: var(--dark);
}

.pourquoi .cta-pill::before {
    background: var(--accent-pink);
}

.pourquoi .cta-pill::after {
    background-color: #ffffff;
}

.pourquoi .cta-pill:hover,
.pourquoi .cta-pill:focus-visible {
    color: var(--dark);
    border-color: var(--dark);
    outline: none;
}

/* ─── Jungle d'expertises (section 4) ────────────────────────────
   Editorial header (H2 + intro on 2 cols) above a 3×4 bento grid.
   IA card sits at the top as a full-width featured banner on a
   pink accent, so it reads as the "headline" of the toolkit. The
   nine remaining expertises fill the 3×3 mosaic underneath on dark
   green cells with cream text — visual inversion of the cream
   section bg keeps the grid graphic without competing with the
   manifesto bento later in the page. */
.jungle {
    position: relative;
    padding: var(--section-py) var(--section-px);
    background: var(--dark);
    color: var(--ink);
    overflow: hidden;
}

@media (max-width: 600px) {
    .jungle {
        padding-inline: 24px;
    }
}

/* Même fond animé que la section Pourquoi (grille de points interactive). */
.jungle__dotgrid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    pointer-events: none;
}

.jungle__inner {
    position: relative;
    z-index: 1;
    max-width: var(--content-max);
    width: 100%;
    margin-inline: auto;
}

.jungle__head {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(40px, 5vw, 100px);
    align-items: start;
    margin-bottom: var(--section-gap);
}

@media (max-width: 900px) {
    .jungle__head {
        grid-template-columns: 1fr;
        gap: clamp(24px, 4vh, 40px);
    }
}

.jungle__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(36px, 4.4vw, 80px);
    line-height: .95;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: inherit;
    max-width: 14ch;
}

.jungle__intro {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vh, 24px);
}

.jungle__p {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: 1.6;
    max-width: 64ch;
}

/* Split layout : IA featured cell pleine hauteur à gauche (1fr),
   sous-grid 3×3 des 9 expertises à droite (2fr). */
/* Plus de split : la card IA featured est retirée, les 9 cards
   d'expertises occupent toute la largeur en grid 3×3. */
.jungle__split {
    display: block;
}

.jungle__cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 1.2vw, 22px);
}

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

@media (max-width: 600px) {
    .jungle__cards {
        grid-template-columns: 1fr;
    }
}

.jungle__cell {
    background: var(--ink);
    color: var(--dark);
    border-radius: var(--radius-card);
    padding: clamp(22px, 2.2vw, 36px);
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2vh, 22px);
    /* Toute la carte déplie / replie le contenu (handler en JS). */
    cursor: pointer;
    /* Reveal animation : at rest, the card is faded out and pushed down
     a bit. The IntersectionObserver in script.js sets .is-revealed
     when the section enters the viewport, and the transition-delay
     keyed off --i staggers the cascade. */
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity .55s var(--ease-out),
        transform .55s var(--ease-out),
        background-color .3s var(--ease-out);
    /* La cascade de reveal est échelonnée via --i, mais la couleur au
     survol ne doit PAS être retardée → delay 0 sur background-color. */
    transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s;
}

.jungle__cell.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Couleur au survol : chaque card prend un accent de la palette (cyclé). */
.jungle__cell:nth-child(4n+1) {
    --cell-accent: var(--accent-pink);
}

.jungle__cell:nth-child(4n+2) {
    --cell-accent: var(--accent-blue);
}

.jungle__cell:nth-child(4n+3) {
    --cell-accent: var(--accent-yellow);
}

.jungle__cell:nth-child(4n+4) {
    --cell-accent: var(--accent-peach);
}

.jungle__cell:hover,
.jungle__cell:focus-within {
    background: var(--cell-accent, var(--accent-pink));
}

/* Variante colorée (accordéon sur fond clair, ex. sous-expertises
   Graphisme) : la carte prend sa couleur de palette dès le repos. */
.jungle__cards--colored > .jungle__cell:nth-child(4n+1) {
    background: var(--accent-pink);
}

.jungle__cards--colored > .jungle__cell:nth-child(4n+2) {
    background: var(--accent-blue);
}

.jungle__cards--colored > .jungle__cell:nth-child(4n+3) {
    background: var(--accent-yellow);
}

.jungle__cards--colored > .jungle__cell:nth-child(4n+4) {
    background: var(--accent-peach);
}

@media (prefers-reduced-motion: reduce) {
    .jungle__cell {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ─── Accordion (9 regular cells) ─────────────────────────────────
   Each cell is a panel : <h3><button> summary header + collapsible
   <div> content. Animated with grid-template-rows 0fr↔1fr — modern
   technique that smoothly tweens height with no JS measurement. */
.jungle__heading {
    margin: 0;
}

.jungle__summary {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    width: 100%;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(12px, 1.4vw, 24px);
    color: inherit;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.jungle__summary:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
    border-radius: 4px;
}

.jungle__toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(28px, 2.2vw, 36px);
    height: clamp(28px, 2.2vw, 36px);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(22px, 1.8vw, 30px);
    line-height: 1;
    color: inherit;
}

/* Toggle = flèche Kamélécom dans un rond (Antoine 2026-09-09) : vers la droite
   fermé, vers le bas ouvert. Le rond suit la couleur du texte de la card. */
.jungle__toggle {
    position: relative;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.jungle__toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    -webkit-mask: var(--icon-kam-arrow) center / 42% no-repeat;
    mask: var(--icon-kam-arrow) center / 42% no-repeat;
    rotate: 120deg;
    /* même orientation que .kam-arrow--right */
    /* Le tracé de la flèche est asymétrique : on recale son centre de masse au
     centre du rond (calcul du centroïde, 2026-09-09). */
    translate: -4% 6%;
    /* recalage vérifié à l'écran (rendu ×7) */
    transition: rotate .45s var(--ease-out), translate .45s var(--ease-out);
    pointer-events: none;
}

.jungle__toggle::after {
    content: none;
}

.jungle__cell.is-open .jungle__toggle::before {
    rotate: 210deg;
    translate: -5% -3%;
}

/* = .kam-arrow--down */
.jungle__content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s var(--ease-out), margin-top .4s var(--ease-out);
    margin-top: 0;
}

.jungle__content-inner {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.6vh, 18px);
}

.jungle__cell.is-open .jungle__content {
    grid-template-rows: 1fr;
    margin-top: clamp(14px, 2vh, 22px);
}

/* Lien "en savoir +" : pastille outline (style unifié des liens-boutons). */
.jungle__link {
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: 0;
    text-transform: uppercase;
    color: inherit;
    text-decoration: none;
    border: 2px solid currentColor;
    border-radius: 999px;
    padding: 8px 16px;
    align-self: flex-start;
    transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}

.jungle__link:hover,
.jungle__link:focus-visible {
    background: var(--dark);
    border-color: var(--dark);
    color: var(--ink);
    outline: none;
}

/* IA card : pleine hauteur à gauche du split, sur le pink accent.
   Le flex column + justify-content: center centre verticalement le
   contenu dans la hauteur stretchée par le grid parent. */
.jungle__name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(20px, 1.8vw, 30px);
    line-height: 1;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: inherit;
}

.jungle__desc {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: clamp(12px, .9vw, 15px);
    line-height: 1.55;
    color: inherit;
    opacity: .88;
}


/* ─── Tanière (section 5) — SEO local + map + contact ─────────────
   Editorial head (eyebrow + H2 + lead) full-width on top of a split :
   Google Maps embed à gauche, ul des 4 infos (adresse / tel / horaires
   / GMB) à droite. Cream beige bg, vert foncé text. */
.taniere {
    /* Split 50/50 full-bleed (Antoine 2026-09-09) : texte, cards et bouton à gauche
     (padding de section), carte Google pleine hauteur à droite. */
    padding: 0;
    background: var(--ink);
    color: var(--dark);
}

.taniere__inner {
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 1fr;
    /* carte = 1/3 (Antoine 2026-09-09) */
    align-items: stretch;
}

.taniere__col {
    padding: var(--section-py) var(--section-px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 900px) {
    .taniere__inner {
        grid-template-columns: 1fr;
    }

    .taniere__map {
        min-height: 44vh;
    }
}

.taniere__head {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vh, 28px);
}

.taniere__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(32px, 3.6vw, 64px);
    line-height: 1;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: inherit;
    max-width: 30ch;
}

.taniere__lead {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: 1.6;
    color: inherit;
    max-width: 72ch;
}

.taniere__top {
    display: block;
    margin-bottom: 0;
}

.taniere__map {
    border-radius: 0;
    overflow: hidden;
    height: 100%;
    min-height: clamp(360px, 60vh, 720px);
    /* Fond clair : évite le liseré sombre dans les angles arrondis
     et pendant le chargement de l'iframe. */
    background: #ffffff;
}

.taniere__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(.15) contrast(1.02);
}

.taniere__info {
    list-style: none;
    margin: 0;
    padding: clamp(28px, 3.5vh, 44px) 0 0;
    /* Cards ajustées à la largeur de leur texte (Antoine 2026-09-09). */
    display: flex;
    flex-wrap: wrap;
    gap: clamp(12px, 1.2vw, 18px);
}

.taniere__cell {
    flex: 0 0 auto;
    width: max-content;
    max-width: 100%;
}

.taniere__cell {
    color: var(--dark);
    display: flex;
    flex-direction: column;
    gap: clamp(6px, .8vh, 10px);
    /* Card blanche translucide : sépare les blocs sans tracer de trait.
     Contenu centré verticalement pour équilibrer les cards entre elles
     (l'adresse sur 2 lignes définit la hauteur de la rangée). */
    background: rgba(255, 255, 255, .45);
    border-radius: var(--radius-card);
    padding: clamp(16px, 2vw, 26px);
    justify-content: flex-start;
}

/* Typos inversées (demande Antoine) : l'Acumin condensée joue les titres,
   la Bricolage Grotesque le texte courant. Chaque bloc est ancré par une
   pupille pastel (clin d'œil caméléon) au lieu d'un trait séparateur. */
.taniere__label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(15px, 1.2vw, 20px);
    line-height: 1;
    letter-spacing: -.005em;
    text-transform: uppercase;
    opacity: .7;
}

.taniere__value {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: clamp(14px, 1vw, 17px);
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    font-style: normal;
    color: inherit;
}

.taniere__value--link {
    text-decoration: none;
    transition: opacity .2s var(--ease-out);
}

.taniere__value--link:hover {
    opacity: .8;
}

/* CTA fiche GMB : cta-pill standard du site (uniformisé avec « Voir nos
   tarifs »), centré sous la grille. Sélecteurs préfixés .taniere pour
   l'emporter sur les règles génériques .cta-pill définies plus loin. */
.taniere .taniere__cta {
    display: flex;
    width: max-content;
    margin: clamp(22px, 3.4vh, 36px) 0 0;
    /* aligné à gauche dans la colonne texte */
    color: var(--dark);
}

.taniere .taniere__cta::before {
    background: var(--dark);
}

.taniere .taniere__cta::after {
    background-color: var(--dark);
}

.taniere .taniere__cta:hover,
.taniere .taniere__cta:focus-visible {
    color: var(--ink);
    border-color: var(--dark);
    outline: none;
}

.taniere__cta:hover,
.taniere__cta:focus-visible {
    background: var(--dark);
    border-color: var(--dark);
    color: var(--ink);
    outline: none;
}

/* ─── Shared CTA pill ────────────────────────────────────────
   Outlined capsule at rest, fills with cream + kamelecom scale
   tramage on hover via a diagonal mask sweep. */
.cta-pill {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: clamp(14px, 1.3vw, 20px) clamp(22px, 2.2vw, 36px);
    border: 2px solid currentColor;
    border-radius: 999px;
    background: transparent;
    text-decoration: none;
    /* Typo boutons : Bricolage Grotesque sur tout le site (2026-08-28). */
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(13px, 1.05vw, 17px);
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
    width: max-content;
    overflow: hidden;
    cursor: pointer;
    transition:
        color .35s var(--ease-out),
        border-color .35s var(--ease-out),
        transform .25s var(--ease-out);
}

/* Solid cream fill that emerges diagonally on hover */
.cta-pill::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--ink);
    -webkit-mask-image: linear-gradient(135deg, #000 0%, #000 35%, transparent 65%, transparent 100%);
    mask-image: linear-gradient(135deg, #000 0%, #000 35%, transparent 65%, transparent 100%);
    -webkit-mask-size: 300% 300%;
    mask-size: 300% 300%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 100% 100%;
    mask-position: 100% 100%;
    transition:
        -webkit-mask-position .8s cubic-bezier(.5, 0, .3, 1),
        mask-position .8s cubic-bezier(.5, 0, .3, 1);
    pointer-events: none;
    z-index: -2;
}

/* Scales band that travels with the wavefront — fully outside the
   visible mask range at BOTH ends (rest 67-100%, hover end 0-33%),
   only intersects the visible range during the middle of the transition. */
.cta-pill::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: #ffffff;
    -webkit-mask:
        url("assets/tramage.svg") repeat 0 0 / 13px 13px,
        linear-gradient(135deg, transparent 0%, transparent 40%, #000 47%, #000 53%, transparent 60%, transparent 100%) no-repeat 100% 100% / 300% 300%;
    mask:
        url("assets/tramage.svg") repeat 0 0 / 13px 13px,
        linear-gradient(135deg, transparent 0%, transparent 40%, #000 47%, #000 53%, transparent 60%, transparent 100%) no-repeat 100% 100% / 300% 300%;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    transition:
        -webkit-mask-position .8s cubic-bezier(.5, 0, .3, 1),
        mask-position .8s cubic-bezier(.5, 0, .3, 1);
    pointer-events: none;
    z-index: -1;
}

.cta-pill > * {
    position: relative;
    z-index: 1;
}

.cta-pill:hover::before,
.cta-pill:focus-visible::before {
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
}

.cta-pill:hover::after,
.cta-pill:focus-visible::after {
    -webkit-mask-position: 0 0, 0% 0%;
    mask-position: 0 0, 0% 0%;
}

.cta-pill:active {
    transform: scale(.97);
}

/* Aucune ombre sur les boutons (ni portée, ni sur le texte), quelle que
   soit la section — neutralise tout text-shadow hérité d'une section. */
.cta-pill,
.cta-pill span,
.cta-pill__arrow,
.menu-pill,
.menu-pill__label {
    text-shadow: none;
    box-shadow: none;
}

/* Section colour variants — each button inverts to its complementary
   tone on hover. Cream-themed buttons fill with cream + white scales,
   dark-themed buttons fill with dark + black scales. */

/* ─── Sticky brand header ──────────────────────────────────────
   Fixed bar at the top of the viewport. Drives a single CSS var
   --p (0 → 1) populated by JS from the hero's scroll position.
   Every visual property below interpolates against --p, so the
   collapse is locked to the scroll and not a discrete state. */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--gap);
    /* Padding linearly interpolates from full editorial spacing at p=0
     down to a tight-but-visible gutter at p=1. The mix formula
     A*(1−p) + B*p reads cleaner than chained subtractions and is
     robust whatever value clamp() resolves --pad-x/--pad-y to. */
    padding-top: calc(var(--pad-y) * (1 - var(--p, 0)) + 22px * var(--p, 0));
    padding-bottom: calc(var(--pad-y) * (1 - var(--p, 0)) + 22px * var(--p, 0));
    padding-left: calc(var(--pad-x) * (1 - var(--p, 0)) + 36px * var(--p, 0));
    padding-right: calc(var(--pad-x) * (1 - var(--p, 0)) + 36px * var(--p, 0));
    background: transparent;
    /* see through to the underlying section */
    color: var(--accent, var(--ink));
    /* default brand color, swapped by JS during manifesto cell hover */
    /* Fast color flip so the wordmark switches contrast the moment the
     overlap-with-section detection triggers, instead of dragging through
     400ms of mid-tone that reads poorly during scroll transitions. */
    transition: color .15s var(--ease-out);
}

/* On light sections (everything except the dark-green manifesto/footer)
   the header switches to the brand dark green for a clean editorial
   read — no blend mode artefacts. */
.site-header.is-blended {
    color: var(--dark);
}

/* Over the hero K-texture slideshow the wordmark joins the lede in
   mix-blend-mode: difference — same chromatic inversion as .hero__lead
   so the whole top of the page reads as one editorial block. White text
   is the canonical input for the difference math. */
.site-header.is-over-hero {
    /* Blanc pur fixe sur la hero plein écran (pas de mix-blend qui
     donnerait des teintes inconsistantes selon les frames vidéo). */
    color: #ffffff;
}

/* (Règle supprimée : elle passait tout le header en vert foncé au survol
   des menus au-dessus du hero — illisible sur les heros vidéo sombres.
   Héritage de l'ancien hero clair à textures K.) */

.wordmark {
    margin: 0;
    padding: 0;
    display: block;
    line-height: 0;
    /* Shrink via WIDTH (not transform: scale) so the SVG height auto-follows
     and the header row reflows — that's what lets the MENU pill become a
     true horizontal capsule instead of a tall ball. */
    width: calc((1 - var(--p, 0) * 0.75) * 100%);
    /* état final = 25 % (retour Antoine 2026-09-04) */
    /* On ultra-wide displays the wordmark would otherwise grow into a
     2000+ px banner — cap it so the proportions stay editorial. */
    max-width: 1400px;
    min-width: 0;
    animation: rise .9s var(--ease-out) both;
}

.wordmark__link {
    display: block;
    width: 100%;
    text-decoration: none;
    line-height: 0;
    /* Zone cliquable élargie sans décaler le logo (padding compensé). */
    padding-block: 10px;
    margin-block: -10px;
}

.wordmark__svg {
    display: block;
    width: 100%;
    height: auto;
}

.wordmark__svg .logo-fill {
    fill: currentColor;
}

/* ─── Chameleon eyes ──────────────────────────────────────────
   Now sit inside <mask id="wordmark-cutout"> as black shapes that
   PUNCH HOLES through the wordmark. Color doesn't matter (only
   mask alpha does), so we keep only the transform for darting. */
.wordmark__svg .logo-eye {
    transition: transform 90ms cubic-bezier(.5, 0, .3, 1);
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
}

/* Site nav — totally absent at rest (display:none → zero layout
   footprint, so the wordmark gets the full available width). When
   --p crosses the scroll threshold, JS adds .is-scrolled on the
   header and the nav appears beside the now-collapsed wordmark. */
.site-header__nav {
    display: none;
}

.site-header.is-scrolled .site-header__nav {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.6vw, 26px);
    animation: navFadeIn .4s var(--ease-out);
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.site-header__nav a {
    font-family: var(--font-mono);
    font-weight: 700;
    /* Aligné sur .site-header__link : 12.5px mini (lisibilité laptop)
     et padding vertical pour la zone cliquable. */
    font-size: clamp(12.5px, .95vw, 14px);
    padding-block: 10px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
}

/* ─── Dropdown nav system ────────────────────────────────────────
   3 menus déroulants (Agence / Expertises / Nos clients) + 2 liens
   directs (Blog / Contact pill). Triggers : Agence est un lien vers
   sa page d'accueil + ouvre le menu au hover, Expertises et Nos
   clients sont des <button> trigger-only (pas de page parente). */
.site-header__nav {
    gap: clamp(20px, 2.4vw, 40px);
}

.site-header__group {
    position: relative;
}

.site-header__link {
    font-family: var(--font-mono);
    font-weight: 700;
    /* 12.5px minimum (au lieu de 11px) : lisibilité laptop 1024-1280,
     et padding vertical pour une zone cliquable décente (13px -> 33px). */
    font-size: clamp(12.5px, .95vw, 14px);
    padding-block: 10px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .25em;
    /* Reset button styles for the trigger variant */
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.site-header__link:focus-visible {
    outline: none;
}

.site-header__caret {
    display: inline-block;
    font-size: .9em;
    opacity: .7;
    transition: transform .2s var(--ease-out);
}

.site-header__group:hover .site-header__caret,
.site-header__group .site-header__link[aria-expanded="true"] .site-header__caret {
    transform: rotate(180deg);
}

/* Dropdown panel : dark green bg cream text, anchored under each
   nav group. Hidden by default, revealed on group :hover OR when
   the trigger button has aria-expanded="true" (JS click toggle). */
.site-header__menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    min-width: 280px;
    background: var(--dark);
    color: var(--ink);
    border-radius: clamp(12px, 1.2vw, 20px);
    padding: clamp(10px, 1vw, 16px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
        opacity .22s var(--ease-out),
        transform .22s var(--ease-out),
        visibility .22s;
    z-index: 110;
    /* Sort the dropdown out of the header's mix-blend-mode group so the
     hero H1 doesn't bleed through when .site-header is-over-hero. */
    isolation: isolate;
    mix-blend-mode: normal;
}

.site-header__group:hover .site-header__menu,
.site-header__group:focus-within .site-header__menu,
.site-header__group .site-header__link[aria-expanded="true"] ~ .site-header__menu,
.site-header__group.is-open .site-header__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.site-header__menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.site-header__menu a {
    display: block;
    padding: clamp(8px, .9vw, 12px) clamp(14px, 1.2vw, 20px);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(12px, .9vw, 14px);
    letter-spacing: 0;
    text-transform: none;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    border-radius: clamp(8px, .8vw, 12px);
    transition: background .15s var(--ease-out), color .15s var(--ease-out);
}

.site-header__menu a:hover,
.site-header__menu a:focus-visible {
    background: var(--accent-pink);
    color: var(--dark);
    outline: none;
}

/* Featured items (IA, Nos réalisations) en rose accent. */

/* Kontact pill — vertical capsule at rest, horizontal once scrolled.
   Two stacked labels crossfade because writing-mode can't transition. */
.menu-pill {
    align-self: stretch;
    width: calc(var(--pill-w) + var(--p, 0) * 110px);
    min-width: var(--pill-w);
    border: 2px solid currentColor;
    border-radius: var(--radius-pill);
    display: grid;
    place-items: center;
    position: relative;
    /* Pastille Contact PLEINE rose (fond + bordure rose, texte vert
     foncé) sur toutes les sections vert foncé / crème / blanc où elle
     est lisible. Sur la hero (.is-over-hero) elle repasse en blanc —
     voir override plus bas. */
    background: var(--accent-pink);
    border-color: var(--accent-pink);
    color: var(--dark);
    padding-inline: calc(var(--p, 0) * 18px);
    text-decoration: none;
    animation: rise .9s .12s var(--ease-out) both;
    transition:
        background-color .25s var(--ease-out),
        color .25s var(--ease-out),
        transform .25s var(--ease-out);
}

.menu-pill__label {
    grid-area: 1 / 1;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    line-height: 1;
}

.menu-pill__label--v {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: clamp(14px, 1.2vw, 20px);
}

.menu-pill__label--h {
    display: none;
    /* hidden at rest, takes over when .is-scrolled */
    font-size: clamp(11px, .95vw, 14px);
    padding: 0 6px;
}

/* When wordmark has shrunk : kill the vertical label entirely so it
   no longer dictates the grid cell height. */
.site-header.is-scrolled .menu-pill__label--v {
    display: none;
}

.site-header.is-scrolled .menu-pill__label--h {
    display: block;
}

.menu-pill:hover,
.menu-pill:focus-visible {
    background: var(--dark);
    border-color: var(--dark);
    outline: none;
}

.menu-pill:hover .menu-pill__label,
.menu-pill:focus-visible .menu-pill__label {
    color: var(--accent-pink);
}

/* Section 1 (hero) : la pastille reste BLANCHE — contour blanc, texte
   blanc — et s'inverse au survol (fond blanc, texte vert foncé). */
.site-header.is-over-hero .menu-pill {
    background: transparent;
    border-color: #ffffff;
    color: #ffffff;
}

.site-header.is-over-hero .menu-pill:hover,
.site-header.is-over-hero .menu-pill:focus-visible {
    background: #ffffff;
    border-color: #ffffff;
}

.site-header.is-over-hero .menu-pill:hover .menu-pill__label,
.site-header.is-over-hero .menu-pill:focus-visible .menu-pill__label {
    color: var(--dark);
}

.menu-pill:active {
    transform: scale(.97);
}

/* When the wordmark has shrunk, drop the stretched height so the
   pill becomes a compact horizontal capsule instead of a tall bar. */
.site-header.is-scrolled .menu-pill {
    align-self: center;
    height: auto;
    padding-block: clamp(10px, 1.1vw, 14px);
    min-width: 0;
    width: auto;
    padding-inline: clamp(18px, 1.8vw, 28px);
}

/* ── Bouton MENU (haut de page) ──────────────────────────────────
   En p=0 (header déplié, gros logo) on remplace la pastille Contact
   verticale par un bouton MENU. Au clic → .is-menu-open sur le header :
   le logo se réduit (--p forcé à 1) et la nav + le Contact apparaissent,
   comme dans l'état scrollé, mais sans avoir scrollé. */
.site-header__actions {
    align-self: stretch;
    display: flex;
    align-items: stretch;
    gap: var(--gap);
}

.menu-toggle {
    align-self: stretch;
    min-width: var(--pill-w);
    border: 2px solid currentColor;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--accent-pink);
    display: grid;
    place-items: center;
    cursor: pointer;
    padding-inline: calc(var(--p, 0) * 18px);
    font-family: var(--font-mono);
    font-weight: 700;
    text-transform: uppercase;
    transition: background-color .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease-out);
}

.menu-toggle__label--v {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: clamp(14px, 1.2vw, 20px);
}

.menu-toggle__label--h {
    display: none;
    font-size: clamp(11px, .95vw, 14px);
    padding: 0 6px;
}

.menu-toggle:hover {
    background: var(--accent-pink);
}

.menu-toggle:hover .menu-toggle__label {
    color: var(--bg);
}

.menu-toggle:active {
    transform: scale(.97);
}

.site-header.is-over-hero .menu-toggle {
    color: #ffffff;
}

.site-header.is-over-hero .menu-toggle:hover {
    background: #ffffff;
}

.site-header.is-over-hero .menu-toggle:hover .menu-toggle__label {
    color: var(--dark);
}

/* Visibilité : MENU au repos (p=0) ; Contact quand déplié ou scrollé. */
.menu-pill {
    display: none;
}

.site-header.is-scrolled .menu-pill,
.site-header.is-menu-open .menu-pill {
    display: grid;
}

.site-header.is-scrolled .menu-toggle {
    display: none;
}

/* .is-menu-open reproduit l'état scrollé sans scroller. */
.site-header.is-menu-open {
    --p: 1;
}

.site-header.is-menu-open .site-header__nav {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.6vw, 26px);
    animation: navFadeIn .4s var(--ease-out);
}

.site-header.is-menu-open .menu-pill__label--v {
    display: none;
}

.site-header.is-menu-open .menu-pill__label--h {
    display: block;
}

.site-header.is-menu-open .menu-pill {
    align-self: center;
    height: auto;
    padding-block: clamp(10px, 1.1vw, 14px);
    min-width: 0;
    width: auto;
    padding-inline: clamp(18px, 1.8vw, 28px);
}

/* Bouton MENU compact + label « Fermer » quand le menu est ouvert. */
/* Menu ouvert : le bouton disparaît (fermeture via lien de nav, Échap
   ou scroll). Plus de bouton « Fermer ». */
.site-header.is-menu-open .menu-toggle {
    display: none;
}

@media (max-width: 900px) {
    .site-header.is-scrolled .site-header__nav {
        display: none;
    }

    /* Sur mobile la nav horizontale ne rentre pas : menu dédié à prévoir. */
    .site-header.is-menu-open .site-header__nav {
        display: none;
    }
}

/* ─── Project cards row ──────────────────────────────────────── */
/* ─── Projects grid — 4 portrait vignettes in a row.
   Floats up from below on first viewport entry (stagger). */


/* Each card has its own horizontal slot. The four slots all live on
   the LEFT and RIGHT EDGES of the hero so they avoid the central
   column where the lede + CTA are pinned — no more vignettes
   floating across the headline text. Uniform duration + evenly
   spaced negative delays keep at most 3 cards visible at a time. */

/* Five-step keyframe = continuous oscillating rotation as the card
   falls upward. The --rot-amp variable flips sign so cards alternate
   their sway direction without sharing identical rotations. */


/* Vignettes are now full-color portrait images. Subtle saturation
   boost on hover, no duotone filter. */

/* Discipline-tag pills — hover-only, bottom-left, white fill */

/* Hover / focus / pointer-triggered reveal : full color, slight
   zoom, and the page bg mutates to the project color (JS-driven). */
/* Hover : only the media (image/video) rounds at top-right, not the
   card itself. The card's dark green background stays visible in that
   corner — like a "page tucked back" reveal. */

/* Hairline ↗ arrow tucked deep in the dark green corner. */

/* Stagger the tags so they cascade in from bottom-left */


/* ─── Section : Quote / Founder statement ─────────────────────
   Sits ABOVE the sticky hero lede (z-index 5). The negative margin
   pulls the quote up to overlap the empty bottom of the hero so the
   lede visibly disappears under it as the page scrolls — the brief
   asked specifically to see the lede pass behind section 2. */
/* Word wrap container : keeps a word from breaking across lines. */
.word {
    display: inline-block;
    white-space: nowrap;
}

/* Letter reveal — generic. Each letter scales from 0 to 1 with a
   subtle overshoot. transform doesn't affect layout so the line
   geometry stays static and letters "pop" in / out cleanly. */
.letter {
    display: inline-block;
    opacity: 0;
    transform: scale(0);
    transform-origin: center;
    transition:
        opacity .28s var(--ease-out),
        transform .42s cubic-bezier(.34, 1.56, .64, 1);
    will-change: transform, opacity;
}

.letter.is-revealed {
    opacity: 1;
    transform: scale(1);
}

/* .no-glyph wraps letters that must stay raw Acumin (e.g. specific
   letters the user wants out of wordmark substitution). */
.no-glyph {
    display: inline;
}

@media (prefers-reduced-motion: reduce) {
    .letter {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* CTA on the pink surface : dark green outline + text for legibility,
   fills with dark green on hover and the text inverts to cream. */

/* ─── Brand glyphs in the quote / footer — K / A / É / O / M ──
   Inline SVG cropped from the wordmark. ALL glyphs share the SAME
   em-per-unit scale (≈ 0.00355em / wordmark unit, calibrated so the
   A — the wordmark's shortest letter — matches Acumin Black's cap
   height). The K and the É naturally end up taller than the A/O/M,
   because their viewBoxes are taller in wordmark units — exactly
   the proportions the original wordmark uses. */
.glyph {
    display: inline-block;
    width: auto;
    vertical-align: baseline;
    margin: 0 .015em;
    color: inherit;
    line-height: 0;
}

.glyph[data-letter="a"] {
    height: .7em;
}

/* viewBox 197 → cap-height */
.glyph[data-letter="o"] {
    height: .717em;
}

/* viewBox 202 */
.glyph[data-letter="m"] {
    height: .717em;
}

/* viewBox 202 */
.glyph[data-letter="k"] {
    height: .824em;
}

/* viewBox 232 — taller, extends above cap */
.glyph[data-letter="e"] {
    height: .824em;
}

/* viewBox 232 — É with accent extends above cap */

.glyph svg {
    display: block;
    height: 100%;
    width: auto;
    overflow: visible;
}

/* Brand-mark spans (e.g. the "Kam" in the footer claim) must stay
   on a single line — the inline-block glyphs would otherwise be
   eligible break points and the word could wrap mid-letter.
   Painted in the brand pink so the kamelecom signature pops inside
   the footer claim. The .glyph paths use fill: currentColor and
   inherit this color automatically. */
.brand-mark {
    white-space: nowrap;
    display: inline-block;
    color: var(--accent-pink);
}

/* Contact section sits on a pink background, so the brand-mark needs
   to flip to dark green to stay legible. The glyph SVGs use fill:
   currentColor, so this single rule re-tints the K · A · M letters. */
.contact .brand-mark {
    color: #ffffff;
}

.glyph-eye {
    transition: transform 90ms cubic-bezier(.5, 0, .3, 1);
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
}


/* ─── Reveal utility — fade up on scroll into view ─────────────
   Generic helper applied on titles, paragraphs, cards. JS toggles
   .is-in when the element crosses the viewport via IntersectionObserver. */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition:
        opacity .9s var(--ease-out),
        transform 1s var(--ease-out);
}

.reveal.is-in {
    opacity: 1;
    transform: translateY(0);
}

.reveal[data-delay="1"] {
    transition-delay: .12s;
}

.reveal[data-delay="2"] {
    transition-delay: .24s;
}

.reveal[data-delay="3"] {
    transition-delay: .36s;
}

.reveal[data-delay="4"] {
    transition-delay: .48s;
}

.reveal[data-delay="5"] {
    transition-delay: .60s;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ─── Réalisations (section 6) ───────────────────────────────────
   Galerie carousel de 3 projets stars sur fond vert foncé. Cards
   pleines photos en grand format avec caption client + secteur en
   bas. CTA "Voir toutes nos réalisations" en bas de section. */
.realisations {
    padding: var(--section-py) var(--section-px);
    background: var(--realisations-bg, var(--dark));
    color: var(--ink);
    transition: background-color .55s var(--ease-in-out);
}

.realisations__inner {
    /* Section pleine largeur : le carousel occupe toute la largeur dispo
     (entre les gutters de section). Le bloc d'intro garde sa largeur de
     lecture éditoriale via son propre max-width. */
    max-width: var(--max-w);
    width: 100%;
    margin-inline: auto;
}

.realisations__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(16px, 2vh, 28px);
    max-width: 1100px;
    margin-inline: auto;
    margin-bottom: var(--section-gap);
}

.realisations__eyebrow {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .7;
}

.realisations__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(36px, 4.4vw, 80px);
    line-height: 1;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: inherit;
    /* Assez large pour que la 1re ligne (« 350 marques, 350 terrains de
     jeu. ») tienne sur une seule ligne ; les <br> gèrent les 3 lignes. */
    max-width: 38ch;
}

.realisations__lead {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: 1.6;
    color: inherit;
    max-width: 84ch;
    opacity: .9;
}

.realisations__carousel {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(12px, 1.4vw, 24px);
    margin-bottom: clamp(36px, 5vh, 72px);
}

.realisations__nav {
    appearance: none;
    -webkit-appearance: none;
    background: var(--ink);
    color: var(--dark);
    border: 0;
    border-radius: 50%;
    width: clamp(44px, 3.6vw, 56px);
    height: clamp(44px, 3.6vw, 56px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .2s var(--ease-out);
}

.realisations__nav:hover,
.realisations__nav:focus-visible {
    transform: scale(1.08);
    outline: none;
}

.realisations__nav svg {
    width: 40%;
    height: 40%;
    display: block;
    fill: currentColor;
}

/* Flèche masquée quand on ne peut plus avancer dans ce sens (JS, 2026-09-09). */
.realisations__nav:disabled {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s var(--ease-out), visibility 0s .25s;
}

/* Dernière card : « Voir toutes nos réalisations » — card vide en contour,
   pastille centrée, la card entière passe en crème au survol (v2, 2026-09-09). */
.realisations__card--more {
    background: rgba(242, 235, 217, .06);
    border: 2px solid rgba(242, 235, 217, .35);
    transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out);
}

.realisations__card--more .realisations__more {
    /* prime sur .realisations__link (display:block) déclaré plus bas */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(18px, 2vw, 28px);
    color: var(--ink);
}

.realisations__more-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: clamp(14px, 1.3vw, 20px) clamp(22px, 2.2vw, 36px);
    border: 2px solid currentColor;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(13px, 1.05vw, 17px);
    letter-spacing: 0;
    text-transform: uppercase;
    /* Libellés longs (pages expertise, 2026-09-15) : le texte passe sur 2 lignes,
     la flèche reste à droite, la pastille ne dépasse jamais de la card. */
    white-space: normal;
    text-align: left;
    max-width: 100%;
    box-sizing: border-box;
    transition: color .35s var(--ease-out), border-color .35s var(--ease-out), background-color .35s var(--ease-out);
}

.realisations__more-btn > span:first-child {
    flex: 1 1 auto;
    text-wrap: balance;
    line-height: 1.2;
}

.realisations__more-btn .realisations__more-arrow {
    flex: 0 0 auto;
}

.realisations__more-arrow {
    width: clamp(16px, 1.4vw, 22px);
    height: auto;
    fill: currentColor;
    transition: translate .35s var(--ease-out);
}

/* orientation par .kam-arrow--right (rotate 120deg) */
.realisations__card--more:hover,
.realisations__card--more:focus-within {
    background: var(--ink);
    border-color: var(--ink);
}

.realisations__card--more:hover .realisations__more,
.realisations__card--more:focus-within .realisations__more {
    color: var(--dark);
}

.realisations__card--more:hover .realisations__more-btn,
.realisations__card--more:focus-within .realisations__more-btn {
    background: var(--dark);
    border-color: var(--dark);
    color: var(--ink);
}

.realisations__card--more:hover .realisations__more-arrow,
.realisations__card--more:focus-within .realisations__more-arrow {
    animation: moreArrowNudge 1.1s ease-in-out infinite;
}

@keyframes moreArrowNudge {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 7px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .realisations__card--more:hover .realisations__more-arrow {
        animation: none;
        translate: 4px 0;
    }
}

.realisations__more:focus-visible {
    outline: none;
}

.realisations__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: clamp(16px, 1.6vw, 28px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.realisations__track::-webkit-scrollbar {
    display: none;
}

.realisations__card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: clamp(280px, 32vw, 560px);
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-card);
    overflow: hidden;
    position: relative;
    background: #2a2a2a;
}

@media (max-width: 768px) {
    .realisations__card {
        width: 80vw;
    }
}

.realisations__link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
    position: relative;
}

.realisations__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s var(--ease-out), opacity .5s var(--ease-in-out);
}

/* Photo alternative du projet : masquée au repos, révélée au survol /
   focus par-dessus le média principal (image ou vidéo). */
.realisations__media--alt {
    opacity: 0;
}

.realisations__card:hover .realisations__media--alt,
.realisations__link:focus-visible .realisations__media--alt {
    opacity: 1;
}

.realisations__card:hover .realisations__media,
.realisations__link:focus-visible .realisations__media {
    transform: scale(1.04);
}

.realisations__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: clamp(20px, 2vw, 36px);
    background: linear-gradient(to top, rgba(0, 30, 15, .85), rgba(0, 30, 15, 0));
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: clamp(4px, .8vh, 8px);
}

/* Secteur en pastille crème en haut de la card, révélée au survol / focus ; accroche
   (textes Mélanie / brouillons Claude) déployée sous le nom — même procédé que le
   hub réalisations (Antoine 2026-09-15). */
.realisations__pills {
    position: absolute;
    top: clamp(14px, 1.4vw, 22px);
    left: clamp(14px, 1.4vw, 22px);
    right: clamp(14px, 1.4vw, 22px);
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
    pointer-events: none;
}

.realisations__card:hover .realisations__pills,
.realisations__link:focus-visible .realisations__pills {
    opacity: 1;
    transform: none;
}

.realisations__pill {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(242, 235, 217, .92);
    color: var(--dark);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.realisations__pitch {
    margin: 0;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .35s var(--ease-out), opacity .25s var(--ease-out);
}

.realisations__pitch > span {
    min-height: 0;
    overflow: hidden;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: clamp(14px, 1.05vw, 16px);
    line-height: 1.4;
    text-wrap: pretty;
    padding-top: 8px;
}

.realisations__card:hover .realisations__pitch,
.realisations__link:focus-visible .realisations__pitch {
    grid-template-rows: 1fr;
    opacity: 1;
}

.realisations__caption:has(.realisations__pitch) {
    padding-top: clamp(72px, 9vh, 120px);
    background: linear-gradient(to top, rgba(0, 30, 15, .86) 0%, rgba(0, 30, 15, .55) 60%, rgba(0, 30, 15, 0) 100%);
}

@media (hover: none) {
    .realisations__pills {
        opacity: 1;
        transform: none;
    }
}

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

    .realisations__pills,
    .realisations__pitch {
        transition: none;
    }
}

.realisations__client {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(22px, 2.2vw, 36px);
    line-height: 1;
    letter-spacing: -.005em;
    text-transform: uppercase;
}

.realisations .cta-pill {
    color: var(--ink);
    border-color: var(--ink);
}

.realisations .cta-pill::before {
    background: var(--ink);
}

.realisations .cta-pill::after {
    background-color: var(--ink);
}

.realisations .cta-pill:hover,
.realisations .cta-pill:focus-visible {
    color: var(--dark);
    outline: none;
}

/* ─── Typologies clients (section 7) ─────────────────────────────
   H2 + lead éditoriaux full-width, puis 4 cards de typologies en grid
   4-col, puis carousel de logos clients avec nav prev/next. Fond peach
   pour casser le cycle cream/dark/pink. */
.typologies {
    /* Padding latéral réduit et largeur libérée (Antoine 2026-09-09) : les cards
     respirent au lieu d'être serrées dans les 1100 px éditoriaux. */
    padding: var(--section-py) var(--pad-x);
    background: #ffffff;
    color: var(--dark);
}

.typologies__inner {
    max-width: 1400px;
    width: 100%;
    margin-inline: auto;
}

.typologies__split {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: clamp(32px, 4vw, 80px);
    align-items: start;
    margin-bottom: var(--section-gap);
}

@media (max-width: 1024px) {
    .typologies__split {
        grid-template-columns: 1fr;
        gap: clamp(32px, 5vh, 56px);
    }
}

.typologies__head {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vh, 28px);
    max-width: 56ch;
}

.typologies__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(32px, 3.8vw, 64px);
    line-height: 1;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: inherit;
}

.typologies__lead {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: 1.6;
    color: inherit;
    max-width: 84ch;
}

.typologies__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(10px, 1.2vw, 18px);
}

@media (max-width: 600px) {
    .typologies__grid {
        grid-template-columns: 1fr;
        gap: clamp(24px, 3vh, 36px);
    }
}

.typologies__cell {
    padding: 0;
}

/* Card cliquable (remplace les traits séparateurs) : fond crème comme les
   cellules jungle, teinte de son accent charte au survol. Grille : picto +
   titre sur la 1re rangée, description puis pastille Découvrir en dessous. */
.typologies__link {
    color: var(--dark);
    text-decoration: none;
    height: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(10px, 1vw, 16px);
    row-gap: clamp(12px, 1.6vh, 20px);
    background: var(--ink);
    border-radius: var(--radius-card);
    padding: clamp(22px, 2.3vw, 36px);
    transition: background-color .25s var(--ease-out);
}

.typologies__link:hover,
.typologies__link:focus-visible {
    background: var(--typo, var(--accent-blue));
    outline: none;
}

/* Picto pétales sur la même ligne que le titre, centré verticalement.
   Largeur constante → le nombre de pétales (hauteur) évoque la taille
   du client. */
.typologies__picto {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    color: var(--dark);
}

.typologies__picto svg {
    width: clamp(22px, 2.1vw, 30px);
    height: auto;
    display: block;
    fill: currentColor;
}

/* Description sur toute la largeur, en 2e rangée, calée en haut. */
.typologies__desc {
    grid-column: 1 / -1;
    align-self: start;
}

.typologies__name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(24px, 2.2vw, 40px);
    line-height: .95;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: inherit;
}

.typologies__desc {
    /* Aligné en haut, directement sous le titre — indépendant de la
     hauteur de la cellule (avant : collé en bas via margin-top auto,
     ce qui décalait Collectivités sous TPE). */
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: clamp(14px, 1.1vw, 17px);
    line-height: 1.55;
    color: inherit;
    opacity: .88;
}

/* Logo marquee : track horizontal infini, droite → gauche, sans flèches.
   La track contient 2× le set, animation translateX 0 → -50%. */
.typologies__logos {
    overflow: hidden;
    /* Carrousel placé en haut de section : marge basse pour le séparer du
     titre. Bleed edge-to-edge via marge inline négative. */
    margin-inline: calc(var(--section-px) * -1);
    margin-bottom: clamp(40px, 6vh, 80px);
    padding-inline: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* Kamelecom arrow — shared style. viewBox 41.95 × 48.73, tip at (0,0).
   The arrow's "axis" (centroid → tip) sits at ~240° CW from east in
   screen — i.e. it naturally points up-left at 11 o'clock. To get a
   horizontal arrow :
     • LEFT  → rotate(-60deg)  (240° → 180° = pure west)
     • RIGHT → rotate(120deg)  (240° → 0°   = pure east)
   The centroid is at (33%, 50%) of the viewBox, so we (a) set
   transform-origin there so the rotation pivots on the centroid, then
   (b) translate the SVG by +17% of its width to bring that centroid
   to the dead center of the button (otherwise it sits 17 % left). */
.kam-arrow {
    aspect-ratio: 41.95 / 48.73;
    transform-origin: 33% 50%;
    translate: 17% 0;
}

.kam-arrow--left {
    rotate: -60deg;
}

.kam-arrow--right {
    rotate: 120deg;
}

.kam-arrow--down {
    rotate: 210deg;
}

/* ─── Flèche « scroll » du hero ───────────────────────────────────
   Flèche Kamélécom pointée vers le bas, rebond doux en boucle.
   S'efface dès le premier scroll (classe .is-hidden posée en JS). */
.hero__scroll {
    position: absolute;
    left: 50%;
    bottom: clamp(16px, 3vh, 40px);
    translate: -50% 0;
    z-index: 3;
    /* Pastille ronde à contour blanc, flèche centrée dedans. */
    width: clamp(46px, 4vw, 62px);
    height: clamp(46px, 4vw, 62px);
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: heroScrollBob 1.9s var(--ease-in-out) infinite;
    transition: opacity .45s var(--ease-out), visibility .45s,
        background-color .3s var(--ease-out), border-color .3s var(--ease-out);
}

.hero__scroll svg {
    width: 40%;
    height: auto;
    display: block;
    fill: currentColor;
}

.hero__scroll:hover,
.hero__scroll:focus-visible {
    background: rgba(255, 255, 255, .16);
    border-color: #ffffff;
    outline: none;
}

.hero__scroll.is-hidden {
    opacity: 0;
    visibility: hidden;
}

@keyframes heroScrollBob {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(9px);
    }
}

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

.typologies__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: clamp(32px, 4vw, 72px);
    width: max-content;
    animation: typologies-marquee 60s linear infinite;
    will-change: transform;
}

@keyframes typologies-marquee {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

.typologies__track > li {
    flex: 0 0 auto;
    width: clamp(190px, 19vw, 300px);
    height: clamp(120px, 12vh, 190px);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.typologies__track img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1) contrast(1.05);
    opacity: .75;
    transition: opacity .25s var(--ease-out), filter .25s var(--ease-out);
}

.typologies__track > li:hover img,
.typologies__track > li:focus-within img {
    filter: grayscale(0);
    opacity: 1;
}

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

/* ─── IA (section 8) — comment l'IA a transformé notre créativité
   Sur fond yellow, 3 paragraphes éditoriaux à gauche + 4 stat tiles
   à droite, CTA centré en bas. Couleur signal innovation. */
.ia {
    /* Full-bleed comme Pourquoi/Équipe : pas de padding section, la vidéo
     remplit sa moitié gauche edge-to-edge sur toute la hauteur, le bloc
     texte (à droite) porte son propre padding. */
    padding: 0;
    background: var(--accent-yellow);
    color: var(--dark);
    overflow: hidden;
}

.ia__inner {
    max-width: none;
    width: 100%;
    margin-inline: 0;
}

.ia__head {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vh, 28px);
    margin-bottom: 0;
}

.ia__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(32px, 3.3vw, 50px);
    /* 2 lignes avec le <br> (Antoine 2026-09-09, agrandi) */
    line-height: 1;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: inherit;
    max-width: none;
}

.ia__p {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: 1.5;
    color: inherit;
}

.ia__split {
    /* Vidéo verticale réduite à gauche (centrée), bloc texte à droite.
     Padding à gauche pour décoller la vidéo du bord de section. */
    /* Vidéo pleine hauteur, bord à bord à gauche (Antoine 2026-09-09). */
    display: grid;
    grid-template-columns: 36% 1fr;
    gap: 0;
    align-items: stretch;
    padding-left: 0;
    margin-bottom: 0;
    min-height: min(100vh, 980px);
    /* section plus haute (Antoine 2026-09-15) */
}

@media (max-width: 900px) {

    /* Empilé : la vidéo garde l'espacement de section au-dessus (sinon elle
     colle à la section équipe, retour Antoine 2026-09-08) ; le bloc texte
     n'ajoute plus son propre padding haut, l'écart vidéo→texte = gap. */
    .ia__split {
        grid-template-columns: 1fr;
        gap: clamp(28px, 4vh, 44px);
        padding-left: 0;
    }

    .ia__split .ia__col-text {
        padding-top: 0;
    }

    /* prime sur le padding de base déclaré plus bas */
}

.ia__col-left,
.ia__col-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(18px, 2.4vh, 28px);
}

.ia__col-text {
    /* Texte sur une colonne (2026-09-09) ; padding vertical remonté pour donner de la hauteur
     à la section (Antoine 2026-09-15). */
    padding: clamp(112px, 16vh, 168px) clamp(32px, 4.4vw, 64px);
    /* +80 px de hauteur (Antoine 2026-09-15) */
}

/* Corps de texte sur une seule colonne (Antoine 2026-09-09). */
.ia__text {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(12px, 1.6vh, 18px);
    max-width: 70ch;
}

.ia__text-col {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.8vh, 22px);
}

.ia__stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(8px, .9vw, 12px);
}

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

    .ia__stat {
        min-width: 0;
    }

    .ia__split {
        grid-template-columns: minmax(0, 1fr);
    }

    .ia__col-text {
        min-width: 0;
    }

    .ia__stat-sub {
        white-space: normal;
    }

    /* sinon la grille déborde à 375 px */
}

.ia__stat {
    background: var(--dark);
    color: var(--accent-yellow);
    border-radius: var(--radius-card);
    padding: clamp(12px, 1.2vw, 18px) clamp(14px, 1.4vw, 20px);
    /* Cards compactes (Antoine 2026-09-09) : « + » Kamélécom devant le mot, sous-titre dessous. */
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    row-gap: 3px;
    min-height: 0;
}

.ia__plus {
    display: inline-block;
    width: .8em;
    height: .8em;
    margin-right: .18em;
    vertical-align: -.04em;
    background: currentColor;
    -webkit-mask: var(--icon-plus) center / 100% no-repeat;
    mask: var(--icon-plus) center / 100% no-repeat;
}

/* Picto « plus » (cercle + croix en trou) à gauche du titre : la croix
   darte comme une pupille (réutilise .reassurance__eye-hole via le JS). */
.ia__stat-big {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(17px, 1.45vw, 22px);
    line-height: 1;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: inherit;
}

.ia__stat-sub {
    white-space: nowrap;
    /* une ligne dans les cards compactes */
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(10px, .78vw, 12px);
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .75;
}

.ia__video {
    /* La vidéo s'étire sur toute la hauteur du bloc éditorial : son haut
     s'aligne sur le titre, son bas sur les éléments de réassurance.
     La marge verticale reproduit le padding du bloc texte pour caler
     le haut sur le titre. Le ratio est libre, la vidéo remplit en cover. */
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    position: relative;
    min-height: 100%;
    background: var(--dark);
    color: var(--accent-yellow);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 900px) {

    /* Empilé : vidéo verticale centrée, largeur contenue pour ne pas
     manger tout l'écran sur mobile. */
    .ia__video {
        align-self: center;
        width: min(72%, 320px);
        max-width: none;
        aspect-ratio: 9 / 16;
        margin-inline: auto;
        margin-block: var(--section-py) 0;
        min-height: 0;
        /* sinon le bloc prend la hauteur de la rangée + sa marge et mord sur l'écart avec le texte (audit IA 2026-09-15) */
    }
}

.ia__video video,
.ia__video iframe {
    /* En absolu : la hauteur de la section est donnée par le texte, pas par le 9:16 de la vidéo (2026-09-09). */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* cover : le cadre fait exactement 9:16 comme la vidéo source, donc
     elle remplit la zone sans recadrage ni bandes. */
    object-fit: cover;
    border: 0;
    background: var(--dark);
}

.ia__cta {
    display: flex;
    justify-content: flex-start;
}

@media (max-width: 900px) {
    .ia__cta {
        justify-content: center;
    }
}

.ia .cta-pill {
    color: var(--dark);
}

.ia .cta-pill::before {
    background: var(--dark);
}

.ia .cta-pill::after {
    background-color: var(--dark);
}

.ia .cta-pill:hover,
.ia .cta-pill:focus-visible {
    color: var(--accent-yellow);
    outline: none;
}

/* ─── Tarifs (section 9) — transparence tarifaire ────────────────
   Single-column éditorial centré. Eyebrow + H2 grand + paragraphe +
   CTA. Bleu pastel pour signaler la clarté / confiance, contraste
   chaud après le yellow IA et avant le pink de la quote. */
.tarifs {
    /* Full-bleed : texte à gauche (padding propre), photo pleine hauteur
     edge-to-edge sur la moitié droite. */
    padding: 0;
    background: var(--accent-blue);
    color: var(--dark);
    overflow: hidden;
}

.tarifs__inner {
    max-width: none;
    width: 100%;
    margin-inline: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    text-align: left;
}

@media (max-width: 900px) {
    .tarifs__inner {
        grid-template-columns: 1fr;
    }
}

.tarifs__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(20px, 3vh, 40px);
    padding: var(--section-py) var(--section-px);
}

.tarifs__media {
    position: relative;
    min-height: clamp(360px, 60vh, 720px);
}

.tarifs__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Visage centré : la tête est dans la partie haute des portraits, on
     remonte le point de recadrage. */
    object-position: center 28%;
    display: block;
    opacity: 0;
    /* frames masquées empilées, déjà décodées */
}

.tarifs__frame.is-shown {
    opacity: 1;
}

/* bascule instantanée, sans transition */
@media (max-width: 900px) {
    .tarifs__media {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }
}

.tarifs__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(32px, 4vw, 72px);
    line-height: .98;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: inherit;
    max-width: 28ch;
}

.tarifs__body {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: 1.65;
    color: inherit;
    max-width: 72ch;
}

.tarifs__cta {
    display: flex;
    margin-top: clamp(8px, 1.4vh, 18px);
}

.tarifs .cta-pill {
    color: var(--dark);
}

.tarifs .cta-pill::before {
    background: var(--dark);
}

.tarifs .cta-pill::after {
    background-color: var(--dark);
}

.tarifs .cta-pill:hover,
.tarifs .cta-pill:focus-visible {
    color: var(--accent-blue);
    outline: none;
}

/* ─── Avis Google (section 10) — verbatims en marquee horizontal
   Cards cream sur fond vert foncé, étoiles roses, défilent droite à
   gauche en boucle infinie comme le bandeau de réassurance. Le track
   embarque le set 2× pour boucler sans saut visible. */
.avis {
    padding: var(--section-py) 0;
    background: var(--dark);
    color: var(--ink);
    overflow: hidden;
}

.avis__inner {
    max-width: var(--content-max);
    width: 100%;
    margin-inline: auto;
    padding: 0 var(--section-px);
}

/* Conteneur du widget Trustindex : largeur de lecture confortable,
   padding latéral aligné sur le reste de la section, marge haute pour
   le séparer du titre. Le widget gère sa propre mise en page. */
.avis__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(16px, 2vh, 28px);
    max-width: 1100px;
    margin-inline: auto;
    margin-bottom: var(--section-gap);
}

.avis__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(36px, 4.4vw, 80px);
    line-height: 1;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: inherit;
    max-width: 26ch;
}

.avis__lead {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: 1.6;
    color: inherit;
    max-width: 72ch;
    opacity: .85;
}

/* ─── Citations clients (.citations) ──────────────────────────────
   Slider de 3 avis Google en dur, façon témoignage (brief Mélanie,
   v3 Antoine 2026-09-15) : une citation à la fois, centrée, dans une
   card large translucide et basse ; l'avis suivant entre par la droite
   pendant que le courant sort par la gauche (inversé en reculant :
   data-dir="prev" sur le conteneur), toutes les 5 s. Nom en Bricolage
   + badge « certifié » bleu charte, « Avis Google » + 5 étoiles jaunes,
   3 points de navigation, badge Google / Trustindex dessous.
   Piloté par [data-citations] dans script.js. */
.citations {
    max-width: 1200px;
    width: 100%;
    margin-inline: auto;
    padding: 0 var(--section-px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(18px, 2.6vh, 28px);
}

.citations__track {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: min(100%, 920px);
    display: block;
    /* Hauteur = celle de la citation active (posée par script.js), animée entre deux avis. */
    transition: height .45s var(--ease-out);
    overflow: hidden;
    border-radius: var(--radius-card);
}

.citation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(10px, 1.6vh, 16px);
    padding: clamp(24px, 2.8vw, 36px) clamp(24px, 3.2vw, 48px) clamp(22px, 2.6vw, 32px);
    background: rgba(242, 235, 217, .07);
    border-radius: var(--radius-card);
    color: var(--ink);
    opacity: 0;
    visibility: hidden;
    transform: translateX(60px);
    transition: opacity .55s var(--ease-out), transform .65s var(--ease-out), visibility 0s linear .65s;
}

/* Le courant sort par la gauche… */
.citation.is-leaving {
    transform: translateX(-60px);
}

/* …sauf quand on recule : tout s'inverse. */
[data-dir="prev"] .citation {
    transform: translateX(-60px);
}

[data-dir="prev"] .citation.is-leaving {
    transform: translateX(60px);
}

.citation.is-active,
[data-dir="prev"] .citation.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .55s var(--ease-out) .1s, transform .65s var(--ease-out), visibility 0s;
}

/* Picto « citation » dessiné par Antoine (source : REFONTE SITE/_hors-site/assets-orphelins/assets/pictos/SVG/picto citations.svg,
   2026-09-15), inline pour prendre la couleur rose via currentColor. */
.citation__mark {
    display: block;
    width: clamp(40px, 3.4vw, 54px);
    height: auto;
    aspect-ratio: 1;
    color: var(--accent-pink);
    fill: currentColor;
    user-select: none;
}

.citation__quote {
    margin: 0;
}

.citation__quote p {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: clamp(17px, 1.35vw, 22px);
    line-height: 1.45;
    text-wrap: balance;
    max-width: 44ch;
}

.citation__by {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: clamp(4px, .8vh, 8px);
}

.citation__name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(16px, 1.15vw, 19px);
    line-height: 1.2;
}

.citation__badge {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: var(--accent-blue);
}

.citation__src {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    opacity: .9;
}

.citation__g {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.citation__score {
    font-weight: 700;
    margin-left: 4px;
}

.citation__stars {
    display: inline-flex;
    gap: 2px;
    color: var(--accent-yellow);
}

.citation__stars svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

/* « i » certifié Trustindex en haut à droite de la card ; l'infobulle s'ouvre vers le bas,
   calée à droite, et reste dans la card (la piste est en overflow hidden). */
.citation__info {
    position: absolute;
    top: clamp(12px, 1.4vw, 18px);
    right: clamp(12px, 1.4vw, 18px);
    z-index: 3;
}

.citation__info .ti-badge__i {
    border-color: rgba(242, 235, 217, .7);
    color: var(--ink);
    width: 18px;
    height: 18px;
    font-size: 11px;
}

.citation__info .ti-badge__tip {
    bottom: auto;
    top: calc(100% + 10px);
    left: auto;
    right: -4px;
    text-align: left;
}

.citation__info .ti-badge__tip::after {
    top: auto;
    bottom: 100%;
    left: auto;
    right: 8px;
    border-top-color: transparent;
    border-bottom-color: #ffffff;
}

.citation__info::after {
    bottom: auto;
    top: 100%;
}

/* Scène du slider : la piste + les deux flèches rondes qui débordent de la card
   (même dessin que l'ancien carrousel Google : 36 px, blanc, ombre, rose au survol). */
.citations__stage {
    position: relative;
    width: min(100%, 920px);
}

.citations__stage .citations__track {
    width: 100%;
}

.citations__nav {
    position: absolute;
    top: 50%;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: #ffffff;
    color: var(--dark);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateY(-50%);
    z-index: 2;
    transition: background .2s var(--ease-out), color .2s var(--ease-out);
}

.citations__nav svg {
    width: 16px;
    height: 16px;
}

.citations__nav--prev {
    left: -18px;
}

.citations__nav--next {
    right: -18px;
}

.citations__nav:hover,
.citations__nav:focus-visible {
    background: var(--accent-pink);
    outline: none;
}

@media (max-width: 700px) {
    .citations__nav--prev {
        left: -8px;
    }

    .citations__nav--next {
        right: -8px;
    }
}

/* Points de navigation : cible tactile 28 px, point visible 10 px, actif rose et allongé. */
.citations__dots {
    display: flex;
    gap: 6px;
}

.citations__dot {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.citations__dot::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(242, 235, 217, .35);
    transition: width .3s var(--ease-out), background-color .3s var(--ease-out);
}

.citations__dot:hover::before {
    background: rgba(242, 235, 217, .7);
}

.citations__dot.is-active::before {
    width: 26px;
    background: var(--accent-pink);
}

.citations__dot:focus-visible {
    outline: 2px solid var(--accent-pink);
    outline-offset: 2px;
    border-radius: 999px;
}

/* Badge Google / Trustindex sous le slider : infobulle vers le bas comme dans le footer. */
.ti-badge--avis {
    margin-top: clamp(4px, 1vh, 12px);
    max-width: 100%;
}

.ti-badge--avis .ti-badge__tip {
    bottom: auto;
    top: calc(100% + 10px);
}

.ti-badge--avis .ti-badge__tip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #ffffff;
}

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

    .citation,
    .citation.is-active,
    .citation.is-leaving,
    [data-dir="prev"] .citation {
        transition: none;
        transform: none;
    }

    .citations__track {
        transition: none;
    }

    .citations__dot::before {
        transition: none;
    }
}

/* ─── Avis Google maison (.gavis) ─────────────────────────────────
   Remplace le widget Trustindex en reprenant sa mise en forme : barre
   d'en-tête blanche (Google · Excellent · 5 étoiles · note · nombre
   d'avis · bouton « Écrire un avis »), puis carrousel de cards blanches
   (avatar, nom, date relative, étoiles + badge vérifié, texte clampé
   avec « Lire la suite »), flèches rondes qui débordent des bords.
   Les avis sont dans le HTML (lisibles par Google), les dates relatives
   et le carrousel sont animés par script.js. */

/* Carrousel : piste en scroll-snap, 3 cards visibles, flèches rondes
   à cheval sur les bords. */

/* ─── Notre équipe (section 11) — 5 portraits + CTA ──────────────
   Grid 5-col responsive. Portraits = cercles avec initiale en gros,
   chaque membre a son accent brand. À remplacer par des photos. */
.equipe {
    /* Full-bleed comme Pourquoi : pas de padding section, le bloc intro
     porte son propre padding, la grille photo remplit sa moitié
     edge-to-edge sur toute la hauteur. */
    padding: 0;
    background: var(--ink);
    color: var(--dark);
    overflow: hidden;
}

.equipe__inner {
    max-width: var(--content-max);
    width: 100%;
    margin-inline: auto;
}

.equipe__head {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vh, 28px);
    max-width: 1100px;
    margin-bottom: var(--section-gap);
}

.equipe__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(32px, 3.8vw, 64px);
    line-height: 1;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: inherit;
    max-width: 24ch;
}

.equipe__lead {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: 1.6;
    color: inherit;
    max-width: 72ch;
}

/* Split full-bleed 50/50 : intro (titre + lead + CTA) à gauche avec son
   propre padding, galerie 3×3 edge-to-edge à droite. Override du
   max-width de .equipe__inner pour occuper toute la largeur. */
.equipe__split {
    max-width: none;
    margin-inline: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
}

@media (max-width: 900px) {
    .equipe__split {
        grid-template-columns: 1fr;
    }
}

.equipe__intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(24px, 3vh, 40px);
    padding: var(--section-py) var(--section-px);
}

.equipe__intro .equipe__head {
    margin-bottom: 0;
}

/* Grille 3×3 qui s'étire sur toute la hauteur de la colonne droite :
   3 rangées égales (1fr) remplissent l'espace, comme la grille photo de
   la section Pourquoi. Un min-height garantit des portraits jamais
   écrasés si la colonne d'intro est courte. */
.equipe__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Retour Raph 09/2026 : la grille 3×3 doit tenir dans un écran (max ≈ hauteur de viewport). */
    width: 100%;
    max-width: calc(92vh - 80px);
    justify-self: end;
    gap: 0;
    /* Rangées auto dimensionnées par les portraits carrés : la hauteur de
     la grille = 3× la largeur d'une cellule, ce qui donne sa hauteur à
     la section. align-content: center recentre si la colonne intro est
     plus haute. */
    align-content: center;
    overflow: hidden;
}

@media (max-width: 480px) {
    .equipe__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.equipe__cell {
    display: block;
    min-height: 0;
}

.equipe__portrait {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    /* Pas de fond placeholder : il créait un liseret d'1px autour des
     photos sur les écrans à zoom fractionnaire (demande Antoine). */
}

/* Photos empilées : principale visible, alternative révélée au survol. */
.equipe__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .4s var(--ease-in-out), transform .6s var(--ease-out);
}

.equipe__photo--alt {
    opacity: 0;
}

.equipe__cell:hover .equipe__photo,
.equipe__cell:focus-within .equipe__photo {
    transform: scale(1.04);
}

.equipe__cell:hover .equipe__photo--main,
.equipe__cell:focus-within .equipe__photo--main {
    opacity: 0;
}

.equipe__cell:hover .equipe__photo--alt,
.equipe__cell:focus-within .equipe__photo--alt {
    opacity: 1;
}

/* Overlay nom / fonction, révélé au survol. */
.equipe__caption {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    padding: clamp(10px, 1.2vw, 18px);
    background: linear-gradient(to top, rgba(0, 30, 15, .55) 0%, rgba(0, 30, 15, .14) 45%, rgba(0, 30, 15, 0) 78%);
    opacity: 0;
    transition: opacity .35s var(--ease-in-out);
}

.equipe__cell:hover .equipe__caption,
.equipe__cell:focus-within .equipe__caption {
    opacity: 1;
}

.equipe__name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(15px, 1.3vw, 22px);
    line-height: 1.05;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: var(--ink);
}

.equipe__role {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: clamp(10px, .8vw, 13px);
    letter-spacing: 0;
    line-height: 1.3;
    color: var(--ink);
    opacity: .8;
}

/* ─── FAQ (section 13) — accordéons +/− avec schema FAQPage ──────
   Réutilise le pattern d'animation des cards jungle (grid-template-
   rows 0fr ↔ 1fr) mais en single column éditorial. Cream bg + dark
   text pour la lisibilité longue. */
.faq {
    padding: var(--section-py) var(--section-px);
    background: var(--ink);
    color: var(--dark);
}

.faq__inner {
    max-width: 1100px;
    width: 100%;
    margin-inline: auto;
}

.faq__head {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vh, 28px);
    margin-bottom: clamp(48px, 8vh, 80px);
}

.faq__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(28px, 3.4vw, 56px);
    line-height: 1;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: inherit;
    max-width: 26ch;
}

.faq__lead {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: 1.6;
    color: inherit;
    max-width: 72ch;
}

.faq__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(0, 30, 15, .15);
}

.faq__item {
    border-bottom: 1px solid rgba(0, 30, 15, .15);
}

.faq__heading {
    margin: 0;
}

.faq__summary {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    width: 100%;
    padding: clamp(20px, 2.4vh, 32px) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(20px, 2vw, 40px);
    color: inherit;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.faq__summary:focus-visible {
    outline: 2px solid var(--dark);
    outline-offset: 4px;
    border-radius: 4px;
}

.faq__question {
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(18px, 1.7vw, 28px);
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: uppercase;
    color: inherit;
}

.faq__toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(28px, 2.4vw, 36px);
    height: clamp(28px, 2.4vw, 36px);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(22px, 1.8vw, 30px);
    line-height: 1;
    color: inherit;
}

.faq__toggle {
    position: relative;
}

.faq__toggle::before,
.faq__toggle::after {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    -webkit-mask: center / 59% no-repeat;
    mask: center / 59% no-repeat;
    transition: transform .5s var(--ease-out), opacity .35s var(--ease-out);
    pointer-events: none;
}

.faq__toggle::before {
    -webkit-mask-image: var(--icon-plus);
    mask-image: var(--icon-plus);
}

.faq__toggle::after {
    -webkit-mask-image: var(--icon-minus);
    mask-image: var(--icon-minus);
    opacity: 0;
    transform: rotate(-90deg) scale(.6);
}

/* Ouvert : le « + » tourne (demi-tour) et s'efface, puis le « − »
   apparait en pivotant à sa place. */
.faq__item.is-open .faq__toggle::before {
    transform: rotate(180deg);
    opacity: 0;
}

.faq__item.is-open .faq__toggle::after {
    transform: none;
    opacity: 1;
    transition-delay: .16s;
}

/* Universal collapse via max-height — works in every browser
   (the grid-template-rows: 0fr ↔ 1fr technique still glitches in
   some Safari versions). The 1200px ceiling is well above any
   answer's real height so the transition runs from 0 to natural
   height visually. */
.faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s var(--ease-out);
}

.faq__item.is-open .faq__answer {
    max-height: 1200px;
}

.faq__answer-inner > p {
    margin: 0 0 clamp(20px, 2.4vh, 32px);
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: 1.65;
    color: inherit;
    max-width: 78ch;
}

.faq__answer-inner a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.faq .cta-pill {
    color: var(--dark);
}

.faq .cta-pill::before {
    background: var(--dark);
}

.faq .cta-pill::after {
    background-color: var(--dark);
}

.faq .cta-pill:hover,
.faq .cta-pill:focus-visible {
    color: var(--ink);
    outline: none;
}

/* ─── Contact CTA (section 14) — split éditorial photo + accroche
   Pink accent pour signaler le "moment de passage à l'action" avant
   le footer. */
.contact {
    /* Fond photo jungle + caméléons camouflés. Voile vert sombre via
     ::before pour garder le texte blanc parfaitement lisible. */
    position: relative;
    padding: var(--section-py) var(--section-px);
    background-image: url("assets/contact/contact-jungle.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
    overflow: hidden;
}

.contact::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(rgba(0, 20, 12, .82), rgba(0, 20, 12, .88));
    /* même voile que .xp-final (uniformisé 2026-09-07) */
}

.contact > * {
    position: relative;
    z-index: 1;
}

.contact__inner {
    max-width: var(--content-max);
    width: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.contact__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 3vh, 36px);
}

.contact__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    /* Corps cappé pour que "Votre projet, c'est notre Kam !" tienne sur
     une seule ligne (puis <br> → 2 lignes au total). */
    font-size: clamp(34px, 4.6vw, 78px);
    line-height: 1;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: inherit;
    text-align: center;
    max-width: 100%;
}

.contact__lead {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: clamp(14px, 1.1vw, 18px);
    line-height: 1.55;
    color: inherit;
    max-width: 56ch;
}

.contact__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(12px, 1.4vw, 24px);
    margin-top: clamp(8px, 1.4vh, 16px);
}

.contact .cta-pill {
    color: #ffffff;
    border-color: rgba(255, 255, 255, .85);
}

.contact .cta-pill::before {
    background: var(--ink);
}

.contact .cta-pill::after {
    background-color: var(--ink);
}

.contact .cta-pill:hover,
.contact .cta-pill:focus-visible {
    color: var(--dark);
    outline: none;
}

/* CTA primaire (Envoyer mon brief) : pastille rose au repos, blanc au
   survol — identique au « Contactez-nous » de la section 1 (hero). */
.contact .cta-pill--primary {
    color: var(--dark);
    background: var(--accent-pink);
    border-color: var(--accent-pink);
}

.contact .cta-pill--primary::before {
    background: #ffffff;
}

.contact .cta-pill--primary::after {
    background-color: #ffffff;
}

.contact .cta-pill--primary:hover,
.contact .cta-pill--primary:focus-visible {
    color: var(--dark);
    border-color: #ffffff;
    outline: none;
}

/* ─── Site footer ────────────────────────────────────────────── */
.site-footer {
    position: relative;
    z-index: 1;
    padding: clamp(40px, 6vh, 72px) var(--section-px) clamp(24px, 3vh, 40px);
    display: grid;
    gap: clamp(24px, 4vh, 44px);
    background: #001e0f;
    color: var(--ink);
    /* Safety: if the claim line gets slightly wider than the content
     area on an unusual viewport, the overflow is clipped rather than
     spilling outside the page. */
    overflow-x: clip;
}

.site-footer > * {
    max-width: var(--max-w);
    width: 100%;
    margin-inline: auto;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 48px);
    border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
    padding-top: clamp(28px, 4vh, 48px);
}

.site-footer__col {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.2vh, 14px);
}

.site-footer__h {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-xs);
    letter-spacing: 0;
    text-transform: uppercase;
    margin: 0 0 clamp(6px, 1vh, 10px);
    opacity: .55;
}

.site-footer__link {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: clamp(13px, 1.1vw, 17px);
    letter-spacing: 0;
    color: var(--ink);
    text-decoration: none;
    width: max-content;
    border-bottom: 1px solid transparent;
    transition: color .3s var(--ease-out), border-color .3s var(--ease-out), opacity .3s var(--ease-out);
}

/* Brand pink signature on hover for every clickable in the footer */
.site-footer__link:hover,
.site-footer__link:focus-visible {
    color: var(--accent-pink);
    border-bottom-color: var(--accent-pink);
    outline: none;
}

.site-footer__link--small {
    font-size: clamp(12px, .85vw, 13px);
    /* liens légaux : 12 px minimum (check-up 2026-09-15) */
    opacity: .75;
}

/* Brand column : wordmark + tagline, no h3 label. */
.site-footer__col--brand {
    gap: clamp(14px, 2vh, 22px);
}

.site-footer__brand {
    margin: 0;
    color: var(--ink);
    line-height: 0;
    display: inline-block;
    text-decoration: none;
    transition: opacity .25s var(--ease-out);
}

.site-footer__brand:hover {
    opacity: .85;
}

.site-footer__brand-svg {
    display: block;
    width: 100%;
    max-width: clamp(170px, 17vw, 260px);
    /* légèrement plus grand (Antoine 2026-09-09) */
    height: auto;
}

.site-footer__tagline {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: clamp(12px, .95vw, 15px);
    line-height: 1.5;
    color: var(--ink);
    opacity: .7;
    max-width: 32ch;
}

/* Bulles réseaux sociaux (footer). */
.site-footer__social {
    list-style: none;
    margin: clamp(6px, 1.4vh, 14px) 0 0;
    padding: 0;
    display: flex;
    gap: 12px;
}

.site-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid rgba(242, 235, 217, .35);
    color: var(--ink);
    transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out),
        color .25s var(--ease-out), transform .25s var(--ease-out);
}

.site-footer__social-link svg {
    width: 19px;
    height: 19px;
    display: block;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
    background: var(--accent-pink);
    border-color: var(--accent-pink);
    color: var(--dark);
    transform: translateY(-2px);
    outline: none;
}

/* Legal links row at the bottom. */
.site-footer__legal {
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, 1vw, 14px);
    flex-wrap: wrap;
}

.site-footer__legal span {
    opacity: .4;
}

.site-footer__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
    padding-top: clamp(18px, 2.5vh, 28px);
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: clamp(10px, .8vw, 12px);
    letter-spacing: 0;
    opacity: .7;
}

.site-footer__copy {
    margin: 0;
    font-size: clamp(12px, .85vw, 13px);
}

.site-footer__nap {
    margin: 0;
    font-style: normal;
    font-size: clamp(12px, .85vw, 13px);
    text-align: center;
    flex: 1 1 auto;
}

.site-footer__sep {
    align-self: stretch;
    width: 1px;
    min-height: 1em;
    background: currentColor;
    opacity: .4;
}

/* 12 px minimum (check-up 2026-09-15) */
/* Colonne CTA (retour Raph 09/2026 : footer en 4 colonnes). */
.site-footer .cta-pill.site-footer__cta {
    margin: 4px 0 0;
    color: var(--ink);
    border-color: var(--ink);
}

/* Badge Google dans le footer, au-dessus des réseaux sociaux (2026-09-09). */
.site-footer .ti-badge--footer {
    background: rgba(242, 235, 217, .08);
    margin-top: clamp(6px, 1vh, 12px);
    max-width: 100%;
}

.site-footer .ti-badge__tip {
    bottom: auto;
    top: calc(100% + 10px);
}

.site-footer .ti-badge__tip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #ffffff;
}

.site-footer .cta-pill.site-footer__cta::before {
    background: var(--ink);
}

.site-footer .cta-pill.site-footer__cta:hover,
.site-footer .cta-pill.site-footer__cta:focus-visible {
    color: var(--dark);
    border-color: var(--ink);
    outline: none;
}

@media (max-width: 1000px) {
    .site-footer__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .site-footer__col--brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .site-footer__grid {
        grid-template-columns: 1fr;
    }

    .site-footer__bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ─── Custom cursor ──────────────────────────────────────────
   Pointer:fine only. Native cursor hidden, replaced by the kamelecom
   fleche-nav glyph that morphs to a chameleon-eye dot on clickables.
   mix-blend-mode: difference + white color guarantees visibility on
   every backdrop (green hero, lavender manifesto, orange expertises,
   white tag pills, project images…). */
@media (pointer: fine) {

    html,
    body,
    * {
        cursor: none !important;
    }

    .cursor {
        position: fixed;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        pointer-events: none;
        z-index: 99999;
        transform: translate3d(var(--mx), var(--my), 0);
        will-change: transform;
        transition: opacity .25s ease-out;
        mix-blend-mode: difference;
        color: #ffffff;
    }

    .cursor.is-hidden {
        opacity: 0;
    }

    .cursor__arrow {
        position: absolute;
        top: 0;
        left: 0;
        width: 44px;
        height: 52px;
        fill: currentColor;
        transform-origin: 0 0;
        transition:
            opacity .22s var(--ease-out),
            transform .35s var(--ease-out);
    }

    .cursor__dot {
        position: absolute;
        top: 0;
        left: 0;
        width: 32px;
        height: 32px;
        margin: -16px 0 0 -16px;
        border-radius: 50%;
        background: currentColor;
        opacity: 0;
        transform: scale(.35);
        transition:
            opacity .22s var(--ease-out),
            transform .4s var(--ease-out);
    }

    .cursor.is-active .cursor__arrow {
        opacity: 0;
        transform: scale(.45) rotate(-25deg);
    }

    .cursor.is-active .cursor__dot {
        opacity: 1;
        transform: scale(1);
    }
}

@media (pointer: coarse) {
    .cursor {
        display: none;
    }
}

/* ─── Animations ──────────────────────────────────────────────── */
@keyframes rise {

    /* Opacity-only fade-in : leaves `transform` free for the wordmark scale
     interpolation (`--p`) and the menu-pill :active scale feedback. */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    :root {
        --pill-w: 44px;
        --card-gap: 3px;
    }
}

@media (max-width: 640px) {
    :root {
        --pad-x: 16px;
        --pad-y: 14px;
        --gap: 8px;
        --card-gap: 2px;
        --pill-w: 38px;
    }

    .hero {
        gap: 24px;
    }
}

/* ─── Accessibility : reduced motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}


/* ─── Scroll timeline ────────────────────────────────────────────
   Rail vertical fixé à droite du viewport, une dot par section.
   Au scroll : la dot de la section active grossit, son label reste
   visible, un trait de progression remplit le rail du haut jusqu'à
   la dot active. Au hover du nav : tous les labels apparaissent en
   cascade (stagger via --i). Hérite de currentColor : se passe en
   --dark sur sections claires (via .is-blended), en blanc en blend
   difference sur la hero. Caché ≤900px. */
.scroll-timeline {
    position: fixed;
    right: clamp(16px, 1.8vw, 26px);
    bottom: clamp(84px, 11vh, 120px);
    /* remontée : place pour le bouton cookies Tarte au citron en bas à droite (Antoine 2026-09-15) */
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: clamp(6px, .8vh, 10px);
    padding: 8px 0;
    /* mix-blend-mode: difference inverse les couleurs derrière, donc une
     timeline blanche reste lisible quel que soit le fond. Cachée par
     défaut, révélée uniquement quand la section Réassurance est dans
     le viewport (.is-shown posé par IntersectionObserver en JS). */
    color: #ffffff;
    mix-blend-mode: difference;
    isolation: isolate;
    opacity: 0;
    visibility: hidden;
    transform: translateX(8px);
    transition:
        opacity .35s var(--ease-out),
        transform .35s var(--ease-out),
        visibility .35s;
}

.scroll-timeline.is-shown {
    opacity: .85;
    visibility: visible;
    transform: translateX(0);
}

/* Rail de fond + trait de progression. Dot 5px → centre à right:2.5px,
   rail 1px à right:2px → centré sur l'axe des dots. */
.scroll-timeline::before,
.scroll-timeline::after {
    content: "";
    position: absolute;
    right: 2px;
    width: 1px;
    border-radius: .5px;
    pointer-events: none;
}

.scroll-timeline::before {
    top: 0;
    bottom: 0;
    background: currentColor;
    opacity: .3;
}

.scroll-timeline::after {
    top: 0;
    height: var(--timeline-progress, 0px);
    background: currentColor;
    opacity: .75;
    transition: height .35s var(--ease-out);
}

.scroll-timeline__item {
    --i: 0;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: clamp(8px, .9vw, 12px);
    text-decoration: none;
    color: inherit;
    position: relative;
    padding: 4px 0;
    cursor: pointer;
}

.scroll-timeline__item:focus-visible {
    outline: none;
}

.scroll-timeline__dot {
    flex: 0 0 auto;
    position: relative;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
    transition: opacity .2s var(--ease-out);
}

/* Ring sur la dot active : cercle creux concentrique, gap entre dot
   et ring. Dot 5px, ring 14px → gap ≈ 4.5px de chaque côté. */
.scroll-timeline__dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    border: 1px solid currentColor;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(.55);
    opacity: 0;
    transition: opacity .22s var(--ease-out), transform .25s var(--ease-out);
    pointer-events: none;
}

.scroll-timeline__item:hover .scroll-timeline__dot {
    opacity: .9;
}

.scroll-timeline__item.is-active .scroll-timeline__dot {
    opacity: .95;
}

.scroll-timeline__item.is-active .scroll-timeline__dot::before {
    opacity: .9;
    transform: translate(-50%, -50%) scale(1);
}

.scroll-timeline__label {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(10px, .7vw, 11px);
    /* lisibilité : 9,4 px en 1440 était trop petit (check-up 2026-09-15) */
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: inherit;
    opacity: 0;
    transform: translateX(6px);
    transition:
        opacity .28s var(--ease-out),
        transform .28s var(--ease-out);
    transition-delay: 0ms;
}

/* Active label : visible en permanence */
.scroll-timeline__item.is-active .scroll-timeline__label {
    opacity: 1;
    transform: translateX(0);
}

/* Hover sur le nav : tous les labels apparaissent en cascade depuis le haut */
.scroll-timeline:hover .scroll-timeline__label,
.scroll-timeline:focus-within .scroll-timeline__label {
    opacity: 1;
    transform: translateX(0);
    transition-delay: calc(var(--i) * 25ms);
}

/* Items au repos : retour rapide en cascade inversée (du bas vers le haut) */
.scroll-timeline:not(:hover):not(:focus-within) .scroll-timeline__item:not(.is-active) .scroll-timeline__label {
    transition-delay: 0ms;
}

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

@media (prefers-reduced-motion: reduce) {
    .scroll-timeline__label {
        transform: none;
        transition: opacity .15s;
    }

    .scroll-timeline:hover .scroll-timeline__label,
    .scroll-timeline:focus-within .scroll-timeline__label {
        transform: none;
        transition-delay: 0ms;
    }

    .scroll-timeline::after {
        transition: none;
    }

    .scroll-timeline__dot {
        transition: opacity .15s;
    }
}

/* ─── Page Agence Nord : Territoire + Hub ────────────────────
   Sections spécifiques à /agence (agence.html, page « territoire Nord »). Reprennent
   les patterns de la HP (header éditorial + grid de cards) avec
   un grid 3×2 pour les 6 villes du territoire et 5 cards pour
   les sous-rubriques du menu Agence. */
.territoire {
    padding: var(--section-py) var(--section-px);
    background: var(--ink);
    color: var(--dark);
}

.territoire__inner {
    max-width: var(--content-max);
    width: 100%;
    margin-inline: auto;
}

.territoire__head {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vh, 28px);
    max-width: 84ch;
    margin-bottom: var(--section-gap);
}

.territoire__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(32px, 3.6vw, 60px);
    line-height: 1;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: inherit;
    text-wrap: balance;
}

.territoire__lead {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: 1.6;
    color: inherit;
    max-width: 72ch;
    opacity: .9;
}

.territoire__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 1.8vw, 28px);
}

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

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

.territoire__cell {
    position: relative;
    --card-pad: clamp(12px, 1.2vw, 18px);
    padding: var(--card-pad);
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1vh, 14px);
    border-radius: var(--radius-card);
    background: var(--cell-bg, var(--ink));
    color: var(--dark);
    overflow: hidden;
    isolation: isolate;
    transition:
        transform .35s var(--ease-out),
        box-shadow .35s var(--ease-out);
}

.territoire__photo {
    /* Photo insérée dans la card. Rayon interne = rayon de la card moins
     le padding, pour des coins concentriques (et non plus ronds que la
     card). Marge basse = un peu d'air entre la photo et le titre. */
    margin: 0 0 clamp(6px, 1vh, 12px);
    border-radius: calc(var(--radius-card) - var(--card-pad));
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.territoire__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.95);
    transition: transform .6s var(--ease-out), filter .35s var(--ease-out);
}

.territoire__cell:hover .territoire__photo img {
    transform: scale(1.05);
    filter: saturate(1.1);
}

.territoire__cell:hover {
    transform: translateY(-6px);
}

.territoire__cell > * {
    position: relative;
    z-index: 1;
}

/* Palette rotative sur les 6 cards : signature multicolore brand.
   Card 05 passée en accent-pink (au lieu du cream qui disparaissait
   sur le fond cream de la section). */
.territoire__grid > :nth-child(1) {
    --cell-bg: var(--accent-pink);
}

.territoire__grid > :nth-child(2) {
    --cell-bg: var(--accent-peach);
}

.territoire__grid > :nth-child(3) {
    --cell-bg: var(--accent-yellow);
}

.territoire__grid > :nth-child(4) {
    --cell-bg: var(--accent-blue);
}

.territoire__grid > :nth-child(5) {
    --cell-bg: var(--accent-pink);
}

.territoire__grid > :nth-child(6) {
    --cell-bg: var(--accent-peach);
}

/* Card pillar (Lille = notre repaire) : reliftée en vert foncé brand
   avec texte cream. Spécificité doublée pour battre le nth-child. */
.territoire__grid > .territoire__cell--pillar {
    --cell-bg: var(--dark);
    color: var(--ink);
}

.territoire__name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(20px, 1.8vw, 30px);
    line-height: 1;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: inherit;
}

.territoire__desc {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: clamp(13px, .95vw, 15px);
    line-height: 1.55;
    color: inherit;
    opacity: .85;
}

/* Card pilier Lille (fond vert foncé) : pastille cream, texte foncé. */

/* Hub « Entrez dans la jungle » : 5 cartes-onglets qui dépassent sous la
   section Réalisations. Chaque carte est plus haute que sa rangée et
   déborde vers le bas, coupée net par overflow:hidden au raccord avec la
   section suivante (vert foncé) : seul le titre dépasse sur le fond rose.
   Au survol / focus la carte remonte et dévoile sa description. Toute la
   carte est un lien : pas de bouton. */
.hub {
    position: relative;
    /* Pas de padding bas : les cartes touchent le bord et sont coupées au
     raccord avec la section du dessous. */
    padding: var(--section-py) var(--section-px) 0;
    background: var(--dark);
    /* fallback si la vidéo ne charge pas */
    color: var(--ink);
    overflow: hidden;
    /* Lift réduit : card-h plus proche du peek pour que la carte ne remonte
     pas trop haut au survol. */
    --hub-card-h: clamp(220px, 19vw, 286px);
    --hub-peek: clamp(96px, 9vw, 132px);
}

/* Vidéo de fond : la même que le hero de la home. */
.hub__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hub__bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Voile vert foncé pour garder titre + intro lisibles par-dessus la vidéo. */
.hub__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 30, 15, .5);
}

.hub__inner {
    position: relative;
    z-index: 1;
    max-width: var(--content-max);
    width: 100%;
    margin-inline: auto;
}

.hub__head {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vh, 28px);
    max-width: 84ch;
    margin-bottom: var(--section-gap);
    text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

.hub__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(32px, 3.8vw, 64px);
    line-height: 1;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: inherit;
    text-wrap: balance;
}

.hub__lead {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: 1.6;
    color: inherit;
    max-width: 72ch;
    opacity: .9;
}

.hub__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    gap: clamp(6px, .7vw, 14px);
    height: var(--hub-peek);
    /* seul le bandeau titre occupe le flux */
}

.hub__cell {
    flex: 1 1 0;
    min-width: 0;
    height: var(--hub-card-h);
    /* plus haute que la rangée → déborde (coupé) */
    position: relative;
}

.hub__cell:nth-child(5n+1) {
    --cell-accent: var(--accent-blue);
}

.hub__cell:nth-child(5n+2) {
    --cell-accent: var(--accent-yellow);
}

.hub__cell:nth-child(5n+3) {
    --cell-accent: var(--accent-peach);
}

.hub__cell:nth-child(5n+4) {
    --cell-accent: var(--accent-blue);
}

.hub__cell:nth-child(5n+5) {
    --cell-accent: var(--accent-yellow);
}

.hub__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.2vh, 14px);
    height: 100%;
    padding: clamp(14px, 1.3vw, 22px);
    border-radius: var(--radius-card);
    background: var(--ink);
    color: var(--dark);
    text-decoration: none;
    overflow: hidden;
    transition:
        transform .45s var(--ease-out),
        background-color .3s var(--ease-out);
    will-change: transform;
}

/* Flèche brand en haut à droite, orientée vers le haut-droite : signale
   que la carte est cliquable. */
.hub__arrow {
    position: absolute;
    top: clamp(13px, 1.2vw, 20px);
    right: clamp(13px, 1.2vw, 20px);
    width: clamp(13px, 1vw, 17px);
    height: auto;
    fill: currentColor;
    rotate: 75deg;
    transform-origin: center;
    opacity: .7;
    transition: opacity .25s var(--ease-out), translate .25s var(--ease-out);
    pointer-events: none;
}

.hub__cell:hover .hub__arrow,
.hub__cell:focus-within .hub__arrow {
    opacity: 1;
    translate: 2px -2px;
}

.hub__cell:hover,
.hub__cell:focus-within {
    z-index: 5;
}

.hub__cell:hover .hub__card,
.hub__cell:focus-within .hub__card {
    transform: translateY(calc(var(--hub-peek) - var(--hub-card-h)));
    background: var(--cell-accent, var(--accent-blue));
}

.hub__name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(17px, 1.4vw, 24px);
    line-height: 1;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: inherit;
    /* le titre occupe le bandeau visible (peek) pour que la description
     démarre sous la ligne de coupe et reste cachée au repos. */
    min-height: calc(var(--hub-peek) - clamp(14px, 1.3vw, 22px) - clamp(8px, 1.2vh, 14px));
    /* réserve l'espace de la flèche en haut à droite pour que le titre
     ne passe pas dessous. */
    padding-right: clamp(22px, 2vw, 32px);
    display: flex;
    align-items: flex-start;
}

.hub__desc {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(12px, .9vw, 14px);
    line-height: 1.55;
    color: inherit;
    opacity: .85;
}

@media (prefers-reduced-motion: reduce) {
    .hub__card {
        transition: background-color .3s var(--ease-out);
    }
}

/* Mobile / tablette : pas de hover → on déplie tout en colonne. */
@media (max-width: 900px) {
    .hub {
        padding-bottom: var(--section-py);
        overflow: visible;
    }

    .hub__grid {
        flex-direction: column;
        height: auto;
        gap: clamp(10px, 1.5vh, 18px);
    }

    .hub__cell {
        height: auto;
        width: 100%;
    }

    .hub__cell:hover .hub__card,
    .hub__cell:focus-within .hub__card {
        transform: none;
    }

    .hub__name {
        min-height: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   PAGES EXPERTISES (.xp-*) — gabarit commun aux 9 pages expertises.
   Réutilise les tokens de la DA (fonts, couleurs, rythme des sections).
   ═══════════════════════════════════════════════════════════════════ */

/* Fil d'ariane */

/* ─── Hero expertise ─────────────────────────────────────────────── */
/* CTA hero : rose plein / blanc au survol (comme la home) */

/* Grand œil qui « scanne » (illustration conseil = observer). La forme
   est crème, le trou laisse voir le fond ; le trou se déplace en boucle
   pour donner l'illusion d'un œil qui regarde partout. */

/* Bandeau réassurance sur fond vert foncé (cards blanches lisibles). */

/* Réassurance imbriquée en tête d'une section (pages expertise) :
   même rythme vertical que le bandeau de la home (clamp 40→80px),
   cartes blanches posées sur le fond de section, track aligné sur le
   contenu. On annule le padding-top de la section pour ne pas cumuler. */
.xp-section:has(> .reassurance) {
    padding-top: 0;
}

.xp-section > .reassurance {
    padding: clamp(40px, 6vh, 80px) 0;
    background: transparent;
}

/* ─── Sections génériques ────────────────────────────────────────── */
.xp-section {
    padding: var(--section-py) var(--section-px);
    color: var(--dark);
}

.xp-section[data-bg="#ffffff"] {
    background: #ffffff;
}

.xp-section[data-bg="#F2EBD9"] {
    background: var(--ink);
}

.xp-section[data-bg="#A8D0F5"] {
    background: var(--accent-blue);
}

.xp-section--dark,
.xp-section[data-bg="#001e0f"] {
    background: var(--dark);
    color: var(--ink);
}

.xp-inner {
    max-width: var(--content-max);
    width: 100%;
    margin-inline: auto;
}

.xp-head {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.4vh, 18px);
    margin-bottom: clamp(28px, 4vh, 52px);
}

/* En-tête centré (page IA, bloc « Une agence moderne… », Antoine 2026-09-15). */
.xp-head--center {
    align-items: center;
    text-align: center;
}

.xp-head--center .xp-title {
    max-width: none;
    font-size: clamp(26px, 4vw, 58px);
    text-wrap: balance;
}

/* titre sur 2 lignes, pas 4 (Antoine 2026-09-15) */
.xp-head--center:last-child {
    margin-bottom: 0;
}

.xp-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(26px, 3.2vw, 52px);
    line-height: 1.03;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: inherit;
    max-width: 22ch;
    text-wrap: balance;
}

.xp-lead {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: 1.6;
    color: inherit;
    max-width: 78ch;
    opacity: .92;
}

.xp-p {
    margin: 0 0 clamp(10px, 1.4vh, 16px);
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--text-base);
    line-height: 1.65;
    color: inherit;
    max-width: 62ch;
}

.xp-p:last-child {
    margin-bottom: 0;
}

.xp-p strong,
.xp-card__ex strong {
    font-weight: 700;
}

/* Split texte + média */
.xp-split {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    align-items: center;
    gap: clamp(28px, 4vw, 72px);
}

@media (max-width: 860px) {
    .xp-split {
        grid-template-columns: 1fr;
        gap: clamp(24px, 4vh, 40px);
    }
}

.xp-split__text {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.6vh, 20px);
}

.xp-split__text .xp-title {
    margin-bottom: clamp(2px, .6vh, 8px);
    /* colonne assez large pour laisser le titre sur 2 lignes (br manuel) */
    max-width: none;
    text-wrap: pretty;
}

/* Titre pleine largeur, mais paragraphes resserrés pour la lisibilité. */
.xp-split__text .xp-p {
    max-width: 46ch;
}

/* Section tarifs des pages expertise : full-bleed, photo edge-to-edge sur
   la moitié droite (comme la section tarifs de la home). */
.xp-section#tarifs {
    padding: 0;
    overflow: hidden;
}

.xp-section#tarifs > .xp-inner.xp-split {
    max-width: none;
    width: 100%;
    margin-inline: 0;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
}

.xp-section#tarifs .xp-split__text {
    padding: var(--section-py) var(--section-px);
    justify-content: center;
}

.xp-section#tarifs .tarifs__media {
    height: 100%;
}

@media (max-width: 860px) {
    .xp-section#tarifs > .xp-inner.xp-split {
        grid-template-columns: 1fr;
    }
}

/* Glyphes-œil (O/A) du CTA final expertise en crème sur le fond sombre. */
.xp-final .brand-mark {
    color: var(--ink);
}

/* Section présentation (celle qui porte le bandeau réassurance) : le split
   s'étend sur toute la largeur de section (comme le bandeau) et la zone
   photo remplit la hauteur du texte, son bord droit calé sur la dernière
   carte réassurance (« 100 % d'experts »). */
.xp-section:has(> .reassurance) > .xp-split {
    max-width: none;
    /* Le texte reste aligné comme au format content-max (placement H1/texte
     inchangé) grâce au décalage gauche ; la colonne droite s'étend jusqu'au
     bord de section (aligné sur la dernière carte réassurance) et prend plus
     de largeur pour une zone photo agrandie. */
    padding-inline: max(0px, calc((100% - var(--content-max)) / 2));
    /* symétrique (retour Raph 2026-09-16 : « même de chaque côté ») */
    grid-template-columns: 1fr .95fr;
    align-items: stretch;
}

@media (max-width: 860px) {
    .xp-section:has(> .reassurance) > .xp-split {
        padding-inline: 0;
        grid-template-columns: 1fr;
    }
}

/* Zone média placeholder (en attendant les vraies photos) */
/* Vraie photo dans la zone média. */

/* ── Comparateur « avant / après Kamélécom » (présentation Graphisme) ─
   Un interrupteur on/off bascule le visuel entre l'état « avant » (grisé)
   et « après » (couleur, palette brand). Classe .is-after posée en JS. */
/* Interrupteur segmenté avant | après. */
/* Les chiffres basculent avant ↔ après. */
/* Tuiles chiffres : grises en « avant », colorées en « après ». */

/* Cartes (sous-expertises, cas d'usage) */
.xp-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 28px);
}

@media (max-width: 820px) {
    .xp-cards {
        grid-template-columns: 1fr;
    }
}

.xp-card {
    border: 1px solid rgba(0, 30, 15, .16);
    border-radius: var(--radius-card);
    padding: clamp(20px, 2.2vw, 32px);
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.1vh, 14px);
    background: rgba(0, 30, 15, .02);
}

.xp-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(18px, 1.6vw, 26px);
    line-height: 1.05;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: inherit;
}

.xp-card__text,
.xp-card__ex {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: clamp(13px, .95vw, 15px);
    line-height: 1.55;
    color: inherit;
}

/* Cartes colorées : palette brand rotative (au lieu du blanc cassé),
   texte foncé lisible sur chaque pastel. */
.xp-cards > .xp-card {
    border: none;
    color: var(--dark);
    transition: transform .25s var(--ease-out);
}

.xp-cards:not(.xp-cards--divided) > .xp-card:nth-child(4n+1) {
    background: var(--accent-pink);
}

.xp-cards:not(.xp-cards--divided) > .xp-card:nth-child(4n+2) {
    background: var(--accent-blue);
}

.xp-cards:not(.xp-cards--divided) > .xp-card:nth-child(4n+3) {
    background: var(--accent-yellow);
}

.xp-cards:not(.xp-cards--divided) > .xp-card:nth-child(4n+4) {
    background: var(--accent-peach);
}

.xp-cards:not(.xp-cards--divided) > .xp-card:hover {
    transform: translateY(-6px);
}

/* Variante sans fond : séparateurs verticaux entre les cartes. */

/* ── Section piliers : même fond animé que la section expertises de la
   home (grille de points interactive, .jungle__dotgrid + data-dotgrid). ── */
.xp-section--skin {
    position: relative;
    overflow: hidden;
}

.xp-section--skin > .xp-inner {
    position: relative;
    z-index: 1;
}

/* Bouton « Prendre rdv avec l'agence » : au survol, remplissage rose et
   écriture vert foncé (au lieu du remplissage crème par défaut). */
.xp-section--skin .xp-cta .cta-pill::before {
    background: var(--accent-pink);
}

.xp-section--skin .xp-cta .cta-pill::after {
    background-color: var(--accent-pink);
}

.xp-section--skin .xp-cta .cta-pill:hover,
.xp-section--skin .xp-cta .cta-pill:focus-visible {
    color: var(--dark);
    border-color: var(--accent-pink);
    outline: none;
}


/* Piliers caméléon (section vert foncé) */

/* Section « Quand faire appel » des pages expertise, divisée en 3 : photo
   d'Antoine en pleine hauteur sur le tiers gauche (collée aux bords,
   sticky plein écran pendant que les cards défilent — header vert foncé
   lisible sur la photo claire), titre + cards sur les deux tiers droits.
   Empilé photo / cards sous 900px. */
.xp-section--photo-split {
    padding: 0;
}

.xp-section--photo-split > .xp-inner.xp-photo-split {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
}

.xp-photo-split__visual {
    margin: 0;
    position: sticky;
    top: 0;
    height: 100vh;
}

.xp-photo-split__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.xp-photo-split__visual video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.xp-photo-split__body {
    padding: var(--section-py) var(--section-px);
    padding-left: clamp(24px, 4vw, 64px);
}

/* Cards en 2 colonnes dans les deux tiers : pas de filet sur la 1re colonne. */
.xp-photo-split .xp-cards {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 900px) {
    .xp-section--photo-split > .xp-inner.xp-photo-split {
        grid-template-columns: 1fr;
    }

    .xp-photo-split__visual {
        position: static;
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .xp-photo-split__body {
        padding-left: var(--section-px);
    }
}

@media (max-width: 820px) {
    .xp-photo-split .xp-cards {
        grid-template-columns: 1fr;
    }
}

/* Réalisations liées (grille de cas) */
.xp-case {
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid rgba(0, 30, 15, .12);
    background: #fff;
    transition: transform .3s var(--ease-out);
}

.xp-case:hover {
    transform: translateY(-4px);
}

/* Rangées de CTA */
.xp-cta {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(12px, 1.4vw, 20px);
    margin-top: clamp(28px, 4vh, 48px);
}

/* CTA final (fond vert foncé, bouton rose plein) */
.xp-final {
    padding: var(--section-py) var(--section-px);
    /* Fond peau de caméléon + voile vert sombre pour la lisibilité du texte. */
    background:
        linear-gradient(rgba(0, 20, 12, .82), rgba(0, 20, 12, .88)),
        url("assets/contact/contact-jungle.jpg") center / cover no-repeat;
    color: var(--ink);
}

.xp-final__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(16px, 2.4vh, 28px);
}

.xp-final__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(28px, 4vw, 64px);
    line-height: 1;
    letter-spacing: -.005em;
    text-transform: uppercase;
}

.xp-final__lead {
    margin: 0;
    font-family: var(--font-mono);
    font-size: clamp(14px, 1.1vw, 18px);
    line-height: 1.55;
    max-width: 56ch;
    opacity: .92;
}

.xp-final__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(12px, 1.4vw, 22px);
    margin-top: clamp(6px, 1vh, 14px);
}

.xp-final .cta-pill--primary {
    color: var(--dark);
    background: var(--accent-pink);
    border-color: var(--accent-pink);
}

.xp-final .cta-pill--primary::before {
    background: #ffffff;
}

.xp-final .cta-pill--primary::after {
    background-color: #ffffff;
}

.xp-final .cta-pill--primary:hover,
.xp-final .cta-pill--primary:focus-visible {
    color: var(--dark);
    border-color: #ffffff;
    outline: none;
}

.xp-final .cta-pill--ghost {
    color: #ffffff;
    border-color: rgba(255, 255, 255, .85);
}

.xp-final .cta-pill--ghost::before {
    background: var(--ink);
}

.xp-final .cta-pill--ghost::after {
    background-color: var(--ink);
}

.xp-final .cta-pill--ghost:hover,
.xp-final .cta-pill--ghost:focus-visible {
    color: var(--dark);
    border-color: var(--ink);
    outline: none;
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER MOBILE (< 900px) — burger + volet plein écran
   Header desktop (nav + Menu + Contact) entièrement remplacé par un
   logo compact + un bouton burger qui ouvre un panneau plein écran.
   ═══════════════════════════════════════════════════════════════════ */
.burger {
    display: none;
}

.mobile-menu {
    display: none;
}

@media (max-width: 900px) {

    /* Header compact : logo + burger seulement. */
    .site-header {
        grid-template-columns: 1fr auto;
        align-items: center;
        padding-top: clamp(12px, 3.4vw, 20px);
        padding-bottom: clamp(12px, 3.4vw, 20px);
    }

    .site-header__nav,
    .site-header__actions {
        display: none !important;
    }

    .wordmark {
        width: auto;
        max-width: clamp(120px, 34vw, 170px);
    }

    /* Bouton burger */
    .burger {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 46px;
        height: 46px;
        padding: 11px;
        background: transparent;
        border: 0;
        cursor: pointer;
        color: inherit;
        justify-self: end;
        position: relative;
        z-index: 320;
    }

    .burger__line {
        display: block;
        width: 100%;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        transition: transform .3s var(--ease-out), opacity .2s var(--ease-out);
    }

    /* Header au-dessus du volet quand ouvert (logo + burger cliquables),
     en crème pour rester lisible sur le fond vert foncé du volet. */
    body.menu-open .site-header {
        z-index: 320;
        color: var(--ink);
    }

    body.menu-open .burger__line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    body.menu-open .burger__line:nth-child(2) {
        opacity: 0;
    }

    body.menu-open .burger__line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Volet plein écran */
    .mobile-menu {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 300;
        background: var(--dark);
        color: var(--ink);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility .35s;
    }

    body.menu-open .mobile-menu {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    body.menu-open {
        overflow: hidden;
    }

    .mobile-menu__inner {
        display: flex;
        flex-direction: column;
        gap: clamp(20px, 4vh, 34px);
        padding: clamp(92px, 20vh, 140px) var(--section-px) clamp(48px, 10vh, 80px);
        min-height: 100%;
    }

    .mobile-menu__group {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .mobile-menu__head,
    .mobile-menu__solo {
        margin: 0 0 2px;
        font-family: var(--font-display);
        font-weight: 800;
        font-variation-settings: "slnt"0, "wdth"50, "wght"800;
        font-size: clamp(28px, 8.5vw, 44px);
        line-height: 1;
        letter-spacing: -.005em;
        text-transform: uppercase;
        color: var(--ink);
        text-decoration: none;
    }

    .mobile-menu__link {
        font-family: var(--font-mono);
        font-weight: 400;
        font-size: clamp(15px, 4.4vw, 18px);
        line-height: 1.4;
        color: var(--ink);
        opacity: .78;
        text-decoration: none;
        padding: 3px 0;
    }

    a.mobile-menu__head:active,
    .mobile-menu__solo:active,
    .mobile-menu__link:active {
        color: var(--accent-pink);
        opacity: 1;
    }

    .mobile-menu__cta {
        margin-top: clamp(8px, 2vh, 18px);
        align-self: flex-start;
        display: inline-block;
        padding: 14px 30px;
        border-radius: 999px;
        background: var(--accent-pink);
        color: var(--dark);
        font-family: var(--font-mono);
        font-weight: 700;
        font-size: clamp(14px, 4vw, 16px);
        text-transform: uppercase;
        text-decoration: none;
    }
}

/* ── Hero variante « visuel pub » ────────────────────────────────────
   Image de fond plein cadre (au lieu de la vidéo globale) + voile
   dégradé côté gauche pour garder le texte blanc lisible. L'URL de
   l'image est passée en style inline sur la section. */
/* ─────────────────────────────────────────────────────────────
   Hero « split » des pages expertise : moitié gauche = bloc
   éditorial (H1 + paragraphe + boutons) sur fond sombre plein,
   moitié droite = visuel (vidéo ou image) plein cadre.
   ───────────────────────────────────────────────────────────── */
.hero--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--dark);
}

/* Colonne texte. */
.hero--split .hero__panel {
    display: flex;
    align-items: center;
    padding-top: calc(var(--header-h) + clamp(20px, 3vh, 48px));
    padding-bottom: clamp(48px, 8vh, 100px);
    padding-left: var(--pad-x);
    padding-right: clamp(28px, 3.4vw, 64px);
}

.hero--split .hero__col--left {
    align-items: flex-start;
    text-align: left;
    gap: clamp(16px, 2.4vh, 28px);
    color: #fff;
    width: 100%;
}

.hero--split .hero__cta {
    justify-content: flex-start;
}

.hero--split .hero__lede {
    max-width: 48ch;
}

/* Titre calibré pour la demi-colonne (évite qu'une ligne déborde
   et crée une ligne supplémentaire). */
.hero--split .hero__title {
    font-size: clamp(24px, 2.6vw, 44px);
    max-width: none;
    text-wrap: pretty;
}

/* Colonne visuel : la vidéo / l'image remplit toute la hauteur. */
.hero--split .hero__visual {
    position: relative;
    overflow: hidden;
}

.hero--split .hero__visual > video,
.hero--split .hero__visual > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Showreel du hero expertise (2026-09-08) : la vidéo (5 s, non bouclée) joue,
   puis les visuels des cas clients de la page entrent et sortent avec un
   rebond, puis la vidéo repart. Piloté par [data-showreel] dans script.js. */
.xp-showreel__slides {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.xp-showreel__slide {
    position: absolute;
    inset: 0;
    display: none;
    overflow: hidden;
}

.xp-showreel__slide img,
.xp-showreel__slide video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.xp-showreel__slide.is-in,
.xp-showreel__slide.is-out {
    display: block;
}

.xp-showreel__slide.is-in {
    animation: showreelIn .45s cubic-bezier(.34, 1.3, .64, 1) both;
}

/* plus rapide, rebond léger (2026-09-09) */
.xp-showreel__slide.is-out {
    animation: showreelOut .35s cubic-bezier(.36, 0, .66, -.3) both;
}

.xp-showreel.is-slides .xp-showreel__video {
    opacity: 0;
    transition: opacity .25s var(--ease-out);
}

/* La vidéo du showreel de la home garde sa mise en page « pourquoi » (absolute, cover). */
.pourquoi__single .xp-showreel__slides {
    z-index: 1;
}

.xp-showreel__video {
    transition: opacity .4s var(--ease-out);
}

/* Variante fondu enchaîné (home « Pourquoi », 2026-09-15) : l'image suivante se fond
   par-dessus la précédente (script.js chevauche in/out) avec un rebond léger et rapide
   (arrive un poil trop petite = zoom, se pose avec un petit dépassement), sortie courte en continuant le zoom (Antoine 2026-09-15). */
.xp-showreel--fade .xp-showreel__slide.is-in {
    animation: showreelFadeIn var(--reel-in, .45s) cubic-bezier(.22, 1.35, .36, 1) both;
    z-index: 2;
}

.xp-showreel--fade .xp-showreel__slide.is-out {
    animation: showreelFadeOut var(--reel-out, .3s) cubic-bezier(.4, 0, .7, .2) both;
    z-index: 1;
}

.xp-showreel--fade.is-slides .xp-showreel__video {
    transition-duration: var(--reel-in, .45s);
}

@keyframes showreelFadeIn {
    from {
        opacity: 0;
        transform: scale(.94) translateY(2%);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes showreelFadeOut {
    from {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: scale(1.03);
    }
}

@keyframes showreelIn {
    from {
        opacity: 0;
        transform: scale(.8);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes showreelOut {
    from {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: scale(.85);
    }
}

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

    .xp-showreel__slide.is-in,
    .xp-showreel__slide.is-out {
        animation: none;
    }

    .xp-showreel__slide.is-out {
        display: none;
    }
}

/* Mobile : visuel au-dessus, texte en dessous, colonne unique. */
@media (max-width: 900px) {
    .hero--split {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .hero--split .hero__visual {
        order: 1;
        min-height: 44vh;
    }

    .hero--split .hero__panel {
        order: 2;
        padding-right: var(--pad-x);
        padding-top: clamp(28px, 5vh, 48px);
        min-height: 56vh;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   PAGE TARIFS (tarifs.html) — « l'essentiel d'abord » en 3 étages :
   1. hero split : titre + card règle (interrupteur ponctuel/annuel)
      + cards réassurance à gauche, photo-boucle [data-tarifs-loop]
      pleine hauteur à droite. Le mécanisme générique [data-ba] →
      .is-after (posé sur <main class="pricing-wrap">) bascule
      85 € ↔ 65 € sur toute la page ;
   2. tuiles « projets clés en main » par besoin client ;
   3. détail complet dans l'accordéon jungle existant.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Étage 1 · Hero split ── */
.pricing-hero {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    color: var(--dark);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: 100vh;
    padding: 0;
}

.pricing-hero__panel {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(16px, 2.2vh, 26px);
    align-content: center;
    justify-items: start;
    padding: calc(var(--header-h) + clamp(8px, 2vh, 24px)) clamp(24px, 3vw, 56px) clamp(40px, 6vh, 72px) var(--section-px);
}

.pricing-hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: clamp(34px, 3.8vw, 68px);
    line-height: .95;
    text-transform: uppercase;
    letter-spacing: -.005em;
}

/* La règle dans une card blanche (même peau que les cards réassurance). */
.pricing-rulecard {
    /* Plus de card blanche (retour Antoine 2026-09-04) : la règle vit
     directement sur le fond crème. */
    background: none;
    color: var(--dark);
    border-radius: 0;
    padding: 0;
    display: grid;
    gap: clamp(16px, 2.2vh, 24px);
    justify-items: start;
    width: 100%;
}

.pricing-rule__price {
    margin: 0;
    /* Bricolage Grotesque, pas de capitales (retour Antoine 2026-09-04). */
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: clamp(30px, 2.9vw, 54px);
    line-height: 1.05;
    letter-spacing: 0;
}

.pricing-rule__unit {
    font-size: .5em;
}

/* Card règle en deux tarifs (Antoine 2026-09-15) : rang dans une pastille, contexte en petit. */
.pricing-rule__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 10px;
}

.pricing-rule__price--alt {
    font-size: clamp(22px, 2vw, 36px);
    opacity: .8;
    margin-top: 4px;
}

.pricing-rule__rank {
    align-self: center;
    display: inline-grid;
    place-items: center;
    width: 1.1em;
    height: 1.1em;
    border-radius: 999px;
    background: var(--dark);
    color: var(--ink);
    font-size: .5em;
    font-weight: 700;
}

.pricing-rule__ctx {
    font-size: clamp(14px, 1.05vw, 17px);
    font-weight: 500;
    opacity: .85;
}

.pricing-rule__note {
    margin-top: 12px;
}

.pricing-rule__note strong {
    font-weight: 700;
    opacity: 1;
}

/* Interrupteur agrandi dans le détail (Antoine 2026-09-15). */
.pricing-toggle--lg {
    font-size: var(--text-base);
}

.pricing-toggle--lg .pricing-toggle__opt {
    padding: 13px 26px;
}

.pricing-rule__note {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.55;
    max-width: 52ch;
    opacity: .8;
}

/* Interrupteur ponctuel / engagement annuel (sur card claire). */
.pricing-toggle {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 4px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--dark) 9%, transparent);
    cursor: pointer;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--dark);
    width: max-content;
    max-width: 100%;
}

.pricing-toggle:focus-visible {
    outline: 2px solid var(--dark);
    outline-offset: 3px;
}

.pricing-toggle__opt {
    position: relative;
    z-index: 1;
    padding: 9px 18px;
    white-space: nowrap;
    opacity: .55;
    transition: opacity .3s;
}

.pricing-toggle__opt--std {
    opacity: 1;
}

.pricing-wrap.is-after .pricing-toggle__opt--std {
    opacity: .55;
}

.pricing-wrap.is-after .pricing-toggle__opt--eng {
    opacity: 1;
}

.pricing-toggle__knob {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 999px;
    background: var(--accent-pink);
    transition: transform .3s var(--ease-out);
    z-index: 0;
}

.pricing-wrap.is-after .pricing-toggle__knob {
    transform: translateX(100%);
}

/* Cards réassurance (mêmes cellules que la home, en rangée de 3). */
.pricing-hero__reassurance {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(8px, 1vw, 14px);
}

/* Photo-boucle pleine hauteur à droite (Antoine qui regarde partout). */
.pricing-hero__visual {
    position: relative;
    min-height: 100%;
}

.pricing-hero__visual .tarifs__media {
    height: 100%;
    min-height: 100%;
}

/* ── Étage 2 · Projets clés en main ── */
.pricing-section {
    background: var(--ink);
    color: var(--dark);
    padding: clamp(56px, 9vh, 120px) var(--section-px);
}

.pricing-inner {
    max-width: 1200px;
    margin-inline: auto;
    display: grid;
    gap: clamp(22px, 3.6vh, 40px);
}

.pricing-headed {
    display: grid;
    gap: clamp(10px, 1.6vh, 16px);
}

.pricing-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: var(--text-4xl);
    line-height: .95;
    text-transform: uppercase;
    letter-spacing: -.005em;
}

.pricing-lead {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-base);
    line-height: 1.6;
    max-width: 70ch;
    opacity: .85;
    text-wrap: pretty;
}

.pricing-needs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(10px, 1.2vw, 18px);
}

.pricing-need {
    /* Même peau que les cards « nos clients » de la home : crème sur fond
     blanc, teinte charte au survol (retour Antoine 2026-09-04). */
    background: var(--ink);
    color: var(--dark);
    transition: background-color .25s var(--ease-out);
    border-radius: var(--radius-card);
    padding: clamp(18px, 2vw, 30px);
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: clamp(8px, 1.2vh, 12px);
}

.pricing-need__desc {
    opacity: .8;
    text-wrap: pretty;
}

/* césures (Antoine 2026-09-15) */
.pricing-need__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: var(--text-2xl);
    line-height: .95;
    text-transform: uppercase;
}

.pricing-need__desc {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* Prix en pastille rose, calée à droite de la tuile. */
.pricing-need__price {
    margin: 0;
    justify-self: start;
    /* pastille calée à gauche (retour Antoine 2026-09-04) */
    background: var(--accent-pink);
    color: var(--dark);
    border-radius: 999px;
    padding: .34em .7em;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: clamp(15px, 1.2vw, 21px);
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pricing-need__pre {
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-right: 8px;
    vertical-align: .25em;
}

.pricing-need__unit {
    font-size: max(.5em, 12px);
}

/* jamais sous 12 px (check-up 2026-09-15) */

/* ── Étage 3 · Volet de cards horizontal piloté par le scroll ──
   La section est étirée en hauteur par le JS ; le contenu reste
   épinglé (sticky) pendant que le rail de cards translate en X.
   Fallback .is-static (mobile / reduced-motion / sans JS pertinent) :
   rail en défilement horizontal natif avec scroll-snap. ── */
.pricing-slider {
    position: relative;
    background: var(--dark);
    color: var(--ink);
}

.pricing-slider__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(18px, 3.4vh, 36px);
    padding: clamp(16px, 3vh, 32px) 0;
}

.pricing-slider__head {
    padding: 0 var(--section-px);
    display: grid;
    gap: clamp(8px, 1.2vh, 12px);
}

.pricing-slider__hint {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    opacity: .6;
    max-width: 60ch;
    text-wrap: pretty;
}

.pricing-slider__track {
    display: flex;
    align-items: stretch;
    gap: clamp(14px, 1.6vw, 24px);
    padding: 0 var(--section-px);
    width: max-content;
    will-change: transform;
}

.pricing-card {
    flex: 0 0 auto;
    width: min(420px, 82vw);
    background: var(--ink);
    color: var(--dark);
    border-radius: var(--radius-card);
    padding: clamp(20px, 2.4vh, 32px);
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: clamp(10px, 1.6vh, 16px);
    align-content: start;
}

.pricing-card__name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: var(--text-2xl);
    line-height: .95;
    text-transform: uppercase;
}

.pricing-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(7px, 1vh, 10px);
    align-content: start;
}

.pricing-card__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.4;
    padding-bottom: clamp(6px, .9vh, 9px);
    border-bottom: 1px solid color-mix(in srgb, var(--dark) 16%, transparent);
}

.pricing-card__row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.pricing-card__price {
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: var(--text-lg);
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pricing-card__note {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .65;
}

.pricing-card__more {
    margin: 0;
    align-self: end;
}

/* Lien expertise en pastille (outline, remplissage vert foncé au survol). */
.pricing-card__more a {
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0;
    color: inherit;
    text-decoration: none;
    border: 2px solid currentColor;
    border-radius: 999px;
    padding: 8px 16px;
    transition: background-color .2s, color .2s, border-color .2s;
}

.pricing-card__more a:hover {
    background: var(--dark);
    border-color: var(--dark);
    color: var(--ink);
}

.pricing-card__more a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Tarifs horaires : bascule pilotée par l'interrupteur de l'étage 1. */
.pricing-hourly--eng {
    display: none;
}

.pricing-wrap.is-after .pricing-hourly--std {
    display: none;
}

.pricing-wrap.is-after .pricing-hourly--eng {
    display: inline-block;
    background: var(--accent-pink);
    padding: .06em .18em;
    border-radius: .14em;
}

/* Fallback statique : défilement horizontal natif, cards swipables. */
.pricing-slider.is-static {
    height: auto !important;
}

.pricing-slider.is-static .pricing-slider__pin {
    position: static;
    height: auto;
    overflow: visible;
    padding: clamp(48px, 8vh, 96px) 0;
}

.pricing-slider.is-static .pricing-slider__track {
    transform: none !important;
    width: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
}

.pricing-slider.is-static .pricing-card {
    scroll-snap-align: start;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .pricing-needs {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .pricing-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .pricing-hero__panel {
        padding-right: var(--section-px);
    }

    .pricing-hero__visual .tarifs__media {
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 10;
    }
}

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

    .pricing-hero__reassurance {
        grid-template-columns: 1fr 1fr;
    }
}

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

    .pricing-toggle__opt,
    .pricing-toggle__knob {
        transition: none;
    }
}

/* CTA « Je demande un devis » (fin des sections 2 et 3 de la page tarifs). */
.pricing-cta {
    display: flex;
    justify-content: center;
    margin-top: clamp(12px, 2vh, 22px);
}

/* Dans le volet (section 3), le CTA reste calé à gauche avec le contenu. */
.pricing-slider__cta {
    justify-content: flex-start;
}

.pricing-section .cta-pill {
    color: var(--dark);
}

.pricing-section .cta-pill::before {
    background: var(--dark);
}

.pricing-section .cta-pill::after {
    background-color: var(--dark);
}

.pricing-section .cta-pill:hover,
.pricing-section .cta-pill:focus-visible {
    color: var(--ink);
    border-color: var(--dark);
    outline: none;
}

.pricing-slider__cta {
    padding: 0 var(--section-px);
    margin-top: 0;
}

.pricing-slider .cta-pill::before {
    background: var(--accent-pink);
}

.pricing-slider .cta-pill::after {
    background-color: var(--accent-pink);
}

.pricing-slider .cta-pill:hover,
.pricing-slider .cta-pill:focus-visible {
    color: var(--dark);
    border-color: var(--accent-pink);
    outline: none;
}

/* Interrupteur ponctuel/annuel : déplacé en haut à droite de la section 3,
   petit format sur fond sombre (le hero garde une mise en avant statique). */
.pricing-slider__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(12px, 2vw, 28px);
    flex-wrap: wrap;
}

.pricing-slider__headline {
    display: grid;
    gap: clamp(8px, 1.2vh, 12px);
}

.pricing-slider .pricing-toggle {
    background: rgba(255, 255, 255, .16);
}

.pricing-slider .pricing-toggle__opt {
    color: var(--ink);
    opacity: .6;
}

.pricing-slider .pricing-toggle__opt--std {
    color: var(--dark);
    opacity: 1;
}

.pricing-wrap.is-after .pricing-slider .pricing-toggle__opt--std {
    color: var(--ink);
    opacity: .6;
}

.pricing-wrap.is-after .pricing-slider .pricing-toggle__opt--eng {
    color: var(--dark);
    opacity: 1;
}

.pricing-slider .pricing-toggle:focus-visible {
    outline-color: var(--accent-pink);
}

/* Cards accordéon (home + pages expertise) : le résumé se centre
   verticalement quand la rangée est étirée par un titre voisin sur
   2 lignes, et le gap fantôme sous le titre carte fermée disparaît
   (l'espacement carte ouverte est déjà géré par le margin-top du
   contenu). La grande card IA garde son gap d'origine. */
.jungle__cell:not(.jungle__cell--ia) {
    gap: 0;
    justify-content: center;
}

/* Pupilles des blocs coordonnées : les 4 accents officiels de la charte. */
.taniere__label::before {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-blue);
    /* bleu charte */
}

.taniere__cell:nth-child(2) .taniere__label::before {
    background: var(--accent-pink);
}

/* rose charte */
.taniere__cell:nth-child(3) .taniere__label::before {
    background: var(--accent-yellow);
}

/* jaune charte */
.taniere__cell:nth-child(4) .taniere__label::before {
    background: var(--accent-peach);
}

/* pêche charte */

/* ═══════════════════════════════════════════════════════════════════
   PAGE CONTACT (contact.html) — hero direct (téléphone d'abord),
   formulaire de brief (Netlify Forms), coordonnées en cards,
   carte + itinéraires. ═══════════════════════════════════════════════ */

/* Hero split : texte à gauche, photo pleine hauteur à droite (l'humain
   d'abord). */
.ctc-hero {
    position: relative;
    overflow: hidden;
    background: var(--dark);
    color: var(--ink);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: stretch;
    min-height: 86vh;
    padding: 0;
}

.ctc-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(16px, 2.4vh, 28px);
    justify-items: start;
    align-content: center;
    padding: calc(var(--header-h) + clamp(8px, 2vh, 28px)) clamp(24px, 3vw, 56px) clamp(40px, 6vh, 72px) var(--section-px);
}

/* Variante claire (page contact, 2026-08-28) : hero sur fond blanc,
   textes vert foncé — le header passe en .is-blended (MENU vert foncé). */
.ctc-hero--light {
    background: #ffffff;
    color: var(--dark);
}

/* Bouton d'envoi du brief en rose (Antoine 2026-09-15). */
.ctc-brief__form .cta-pill[type="submit"] {
    background: var(--accent-pink);
    border-color: var(--accent-pink);
    color: var(--dark);
}

.ctc-brief__form .cta-pill[type="submit"]:hover,
.ctc-brief__form .cta-pill[type="submit"]:focus-visible {
    color: var(--ink);
    border-color: var(--dark);
}

/* Badge Trustindex dans une card claire : fond et couleurs inversés, infobulle vers le haut. */
.ctc-card--badge {
    gap: 10px;
}

.ti-badge--card {
    background: rgba(0, 30, 15, .06);
    color: var(--dark);
    max-width: 100%;
}

.ti-badge--card .ti-badge__i {
    border-color: rgba(0, 30, 15, .6);
    color: var(--dark);
}

.ti-badge--card .ti-badge__tip {
    left: auto;
    right: -8px;
}

.ti-badge--card .ti-badge__tip::after {
    left: auto;
    right: 12px;
}

.ctc-hero__visual {
    position: relative;
    min-height: 100%;
}

.ctc-hero__visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ctc-hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: clamp(40px, 5.5vw, 96px);
    line-height: .95;
    text-transform: uppercase;
    letter-spacing: -.005em;
}

.ctc-hero__lede {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-base);
    line-height: 1.65;
    max-width: 62ch;
    opacity: .95;
}

.ctc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(12px, 1.4vw, 24px);
}

.ctc-hero__hours {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    opacity: .7;
}

/* ── Structure commune ── */
.ctc-inner {
    max-width: 1200px;
    margin-inline: auto;
}

.ctc-headed {
    display: grid;
    gap: clamp(10px, 1.6vh, 16px);
    margin-bottom: clamp(22px, 3.6vh, 40px);
}

.ctc-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: var(--text-4xl);
    line-height: .95;
    text-transform: uppercase;
    letter-spacing: -.005em;
}

.ctc-lead {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-base);
    line-height: 1.6;
    max-width: 70ch;
    opacity: .85;
}

/* ── Le brief ── */
.ctc-brief {
    background: var(--ink);
    color: var(--dark);
    padding: clamp(56px, 9vh, 120px) var(--section-px);
}

.ctc-brief__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(24px, 3.5vw, 64px);
    align-items: start;
}

.ctc-brief__form {
    display: grid;
    gap: clamp(12px, 1.8vh, 18px);
}

.ctc-brief__form form {
    margin: clamp(6px, 1vh, 12px) 0 0;
    display: grid;
    gap: clamp(16px, 2.4vh, 24px);
}

.ctc-hp {
    position: absolute;
    left: -9999px;
    margin: 0;
}

.ctc-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(14px, 1.8vw, 22px);
}

.ctc-field {
    margin: 0;
    display: grid;
    gap: 6px;
    align-content: start;
}

.ctc-field--full {
    grid-column: 1 / -1;
}

.ctc-field__label {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-sm);
}

.ctc-field__input {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    font-family: var(--font-mono);
    font-size: var(--text-base);
    color: var(--dark);
    background: #ffffff;
    border: 2px solid transparent;
    border-radius: 14px;
    padding: 12px 14px;
    transition: border-color .2s var(--ease-out);
}

.ctc-field__input:focus-visible {
    outline: none;
    border-color: var(--dark);
}

.ctc-field__input--area {
    resize: vertical;
    min-height: 140px;
}

/* Pièce jointe (2026-09-15) : même champ que les autres, bouton de sélection en petite pastille. */
.ctc-field__input--file {
    padding: 9px 12px;
    cursor: pointer;
}

.ctc-field__input--file::file-selector-button {
    margin-right: 12px;
    padding: 7px 14px;
    border: 2px solid var(--dark);
    border-radius: 999px;
    background: transparent;
    color: var(--dark);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}

.ctc-field__input--file:hover::file-selector-button {
    background: var(--dark);
    color: var(--ink);
}

.ctc-field__help {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    opacity: .65;
}

.ctc-submit {
    display: grid;
    gap: 10px;
    justify-items: start;
}

.ctc-submit__note {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    opacity: .65;
    max-width: 52ch;
}

/* cta-pill sur fond clair : remplissage vert foncé au survol. */
.ctc-brief .cta-pill {
    color: var(--dark);
}

.ctc-brief .cta-pill::before {
    background: var(--dark);
}

.ctc-brief .cta-pill::after {
    background-color: var(--dark);
}

.ctc-brief .cta-pill:hover,
.ctc-brief .cta-pill:focus-visible {
    color: var(--ink);
    border-color: var(--dark);
    outline: none;
}

/* Coordonnées en cards (même langage que la bande tanière de la home). */
.ctc-brief__aside {
    display: grid;
    gap: clamp(10px, 1.2vh, 16px);
    align-content: start;
}

.ctc-card {
    background: rgba(255, 255, 255, .55);
    border-radius: var(--radius-card);
    padding: clamp(16px, 2vw, 26px);
    display: grid;
    gap: 8px;
    justify-items: start;
}

.ctc-card__label {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: clamp(15px, 1.2vw, 20px);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -.005em;
    opacity: .7;
}

.ctc-card__value {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: clamp(14px, 1vw, 17px);
    line-height: 1.5;
    font-style: normal;
    color: inherit;
    text-decoration: none;
}

.ctc-card__value--link:hover {
    opacity: .8;
}

.ctc-card__go {
    display: inline-block;
    margin-top: 4px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: 0;
    text-transform: uppercase;
    color: inherit;
    text-decoration: none;
    border: 2px solid currentColor;
    border-radius: 999px;
    padding: 6px 14px;
    transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}

.ctc-card__go:hover,
.ctc-card__go:focus-visible {
    background: var(--dark);
    border-color: var(--dark);
    color: var(--ink);
    outline: none;
}

/* ── Venir à l'agence ── */
.ctc-acces {
    background: #ffffff;
    color: var(--dark);
    padding: clamp(56px, 9vh, 120px) var(--section-px);
}

.ctc-acces__map {
    border-radius: var(--radius-card);
    overflow: hidden;
    height: clamp(300px, 42vh, 460px);
    background: #ffffff;
    border: 1px solid rgba(0, 30, 15, .12);
}

/* Bandeau pleine largeur sous les itinéraires (2026-09-15) : sort du padding de la
   section (marges négatives), sans arrondi ni bord, collé au footer. */
.ctc-acces__map--band {
    border-radius: 0;
    border: 0;
    height: clamp(320px, 46vh, 540px);
    margin: clamp(36px, 6vh, 72px) calc(-1 * var(--section-px)) calc(-1 * clamp(56px, 9vh, 120px));
}

.ctc-acces__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(.15) contrast(1.02);
}

.ctc-acces__routes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(10px, 1.2vw, 18px);
    margin-top: clamp(10px, 1.2vw, 18px);
}

.ctc-route {
    background: var(--ink);
    border-radius: var(--radius-card);
    padding: clamp(18px, 2vw, 28px);
    display: grid;
    gap: 8px;
    align-content: start;
}

.ctc-route__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: var(--text-xl);
    line-height: 1;
    text-transform: uppercase;
}

.ctc-route__text {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.6;
    opacity: .85;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .ctc-hero {
        min-height: 0;
        grid-template-columns: 1fr;
    }

    .ctc-hero__visual {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .ctc-brief__grid {
        grid-template-columns: 1fr;
    }

    .ctc-fields {
        grid-template-columns: 1fr;
    }

    .ctc-acces__routes {
        grid-template-columns: 1fr;
    }
}

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

    .ctc-field__input,
    .ctc-card__go {
        transition: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   PAGE RECRUTEMENT (recrutement.html) — réutilise le hero split .ctc-*
   et les tuiles .pricing-need ; ci-dessous uniquement la card offre
   d'emploi et le bandeau candidature spontanée. ══════════════════════ */

.rec-jobs {
    background: #ffffff;
    color: var(--dark);
    padding: clamp(56px, 9vh, 120px) var(--section-px);
}

/* Pas d'offre ouverte (2026-09-15) : message posé entre le titre et la candidature spontanée. */
.rec-jobs__empty {
    margin: 0 0 clamp(20px, 3vh, 32px);
    padding: clamp(18px, 2.4vh, 28px) clamp(20px, 2vw, 32px);
    border-radius: var(--radius-card);
    background: var(--ink);
    color: var(--dark);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-base);
}

/* Bandeau candidature spontanée : tuile vert foncé pleine largeur. */
.rec-spont {
    margin-top: clamp(14px, 2vh, 24px);
    background: var(--dark);
    color: var(--ink);
    border-radius: var(--radius-card);
    padding: clamp(22px, 2.8vw, 40px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(14px, 2vw, 28px);
}

.rec-spont__text {
    display: grid;
    gap: 8px;
    max-width: 64ch;
}

.rec-spont__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: var(--text-2xl);
    line-height: .95;
    text-transform: uppercase;
}

.rec-spont__desc {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.55;
    opacity: .85;
}

/* cta-pill sur fond clair dans la card offre. */


/* ═══════════════════════════════════════════════════════════════════
   PAGES RÉALISATIONS (gabarit .real-*, première : realisation-casa-
   del-spa.html) — hero contexte sur accent, parti pris en grande
   citation, rangées alternées visuel/texte, galerie de déclinaisons.
   Réutilisable pour chaque étude de cas. ═════════════════════════════ */

.real-hero {
    position: relative;
    overflow: hidden;
    background: var(--real-accent, var(--accent-peach));
    color: var(--dark);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: stretch;
    min-height: 86vh;
}

.real-hero__panel {
    display: grid;
    gap: clamp(14px, 2vh, 22px);
    justify-items: start;
    align-content: center;
    padding: calc(var(--header-h) + clamp(8px, 2vh, 24px)) clamp(24px, 3vw, 56px) clamp(40px, 6vh, 72px) var(--section-px);
}

/* Lien retour en pastille outline (style unifié des liens-boutons). */
.real-hero__back {
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0;
    color: inherit;
    text-decoration: none;
    border: 2px solid currentColor;
    border-radius: 999px;
    padding: 8px 16px;
    transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}

.real-hero__back::before {
    content: "← ";
}

.real-hero__back:hover,
.real-hero__back:focus-visible {
    background: var(--dark);
    border-color: var(--dark);
    color: var(--ink);
    outline: none;
}

.real-hero__kicker {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    opacity: .7;
}

.real-hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: clamp(30px, 3.8vw, 64px);
    line-height: .98;
    text-transform: uppercase;
    letter-spacing: -.005em;
}

.real-hero__lede {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-base);
    line-height: 1.6;
    max-width: 58ch;
    opacity: .92;
}

.real-hero__visual {
    position: relative;
    min-height: 100%;
}

.real-hero__visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Structure commune */
.real-eyebrow {
    margin: 0 0 clamp(10px, 1.6vh, 16px);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-sm);
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--dark);
    opacity: .65;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .real-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .real-hero__panel {
        padding-right: var(--section-px);
    }

    .real-hero__visual {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
}

/* Pages réalisations : le wordmark du header reste en format compact dès
   l'arrivée (pas de logo géant sur les études de cas), même largeur que
   l'état replié piloté par --p sur les autres pages. */
.page-realisation .wordmark {
    width: 25%;
}

/* Variante hero réalisation : photo vue à travers l'œil Kamélécom géant
   (masque SVG, pupille dartée par le JS global). */
.real-hero__visual--eye {
    position: relative;
}

.real-eye {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* L'œil peut déborder de la colonne (vers le panneau texte, même fond
     pêche) au lieu d'être tranché net ; le overflow:hidden de la section
     garantit que rien ne sort de la section elle-même. */
    overflow: visible;
}

/* Variante mise en abîme du K : tout reste contenu dans la colonne
   (le K se fond dans le fond de section là où il touche les bords). */
.real-eye--k {
    overflow: hidden;
}

/* Variante paysage : la colonne visuel en 2:1 horizontal PILOTE la hauteur
   du hero (plus de min-height plein écran) — la photo remplit la section de
   haut en bas, et le K (collé à gauche, pleine hauteur) mange moins la
   photo. Le viewBox du svg doit suivre le ratio (0 0 100 50) pour un
   cadrage sans rognage. En ≤900px, le 4/3 mobile de --eye reprend la main. */
.real-hero--wide {
    min-height: 0;
}

/* Desktop uniquement : en ≤900px le hero repasse en 1 colonne (règle
   mobile commune) et ces overrides ne doivent pas la contrarier. */
@media (min-width: 901px) {
    .real-hero--wide {
        /* Assez haut pour garder de la présence, sans retomber dans le format
       carré : la colonne photo élargie (1.1fr) compense la hauteur. */
        min-height: 70vh;
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    }
}

.real-hero__visual--wide {
    aspect-ratio: 2 / 1;
    /* Si le panneau texte ou le min-height imposent une section plus haute
     que le ratio, le cadre s'étire en hauteur au lieu de faire déborder
     la colonne. */
    max-width: 100%;
}

@media (max-width: 900px) {
    .real-hero__visual--eye {
        aspect-ratio: 4 / 3;
        min-height: 0;
    }

    /* En mobile, le K mis en abîme se retire : la photo seule occupe le
     cadre (demande Antoine 2026-08-28). Le <g> du K est le seul <g>
     enfant direct du svg (defs n'est pas un <g>). */
    .real-eye--k > g {
        display: none;
    }
}

/* L'œil géant du hero réalisation peut déborder de sa section (plus
   naturel) : la section repasse au-dessus des suivantes pour que le
   débordement ne soit pas rogné par leurs fonds. */
.page-realisation .real-hero {
    overflow: visible;
    position: relative;
    z-index: 2;
}

/* L'étude : infos sticky à gauche, visuels qui défilent à droite. */
.real-study {
    /* Fond blanc : fait ressortir les visuels de l'étude. Le padding droit
     est réduit pour que la colonne de visuels s'étende vers le bord.
     La section passe AU-DESSUS du hero : l'œil qui déborde vers le bas
     se fait couper par son bord supérieur. */
    position: relative;
    z-index: 2;
    background: #ffffff;
    color: var(--dark);
    padding: clamp(56px, 9vh, 110px) clamp(12px, 1.6vw, 28px) clamp(56px, 9vh, 110px) var(--section-px);
}

.real-study__grid {
    max-width: none;
    display: grid;
    /* Proportions façon Koto : colonne infos étroite, médias larges. */
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    gap: clamp(28px, 4.5vw, 96px);
    align-items: start;
}

.real-study__info {
    position: sticky;
    top: clamp(76px, 12vh, 130px);
    display: grid;
    gap: clamp(12px, 1.8vh, 20px);
    justify-items: start;
}

.real-study__quote {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: clamp(22px, 2.2vw, 38px);
    line-height: .98;
    text-transform: uppercase;
    letter-spacing: -.005em;
}

.real-study__detail {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.6;
    opacity: .8;
}

.real-study__block {
    display: grid;
    gap: 6px;
    padding-top: clamp(10px, 1.6vh, 16px);
    border-top: 1px solid color-mix(in srgb, var(--dark) 25%, transparent);
}

.real-study__block h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: clamp(20px, 1.8vw, 30px);
    /* titres ++ (Antoine 2026-09-15) */
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -.005em;
}

.real-study__block p {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.55;
    opacity: .85;
}

/* Phrase + CTA contact au libellé de l'expertise, en bas de la colonne (2026-09-15). */
.real-study__pitch {
    margin: clamp(14px, 2vh, 22px) 0 0;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--text-base);
    line-height: 1.55;
    text-wrap: pretty;
}

.real-study__cta {
    margin-top: clamp(6px, 1vh, 12px);
}

.real-study .cta-pill {
    color: var(--dark);
}

.real-study .cta-pill::before {
    background: var(--dark);
}

.real-study .cta-pill::after {
    background-color: var(--dark);
}

.real-study .cta-pill:hover,
.real-study .cta-pill:focus-visible {
    color: var(--ink);
    border-color: var(--dark);
    outline: none;
}

.real-study__media {
    display: grid;
    gap: clamp(6px, .6vw, 10px);
}

.real-study__item {
    margin: 0;
    overflow: hidden;
}

.real-study__item img,
.real-study__item video {
    width: 100%;
    height: auto;
    display: block;
}

.real-study__duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(6px, .6vw, 10px);
}

/* Galerie uniformisée : duos en 4/3, bandeaux larges en 21/9, motion en 16/9. */
.real-study__duo .real-study__item {
    aspect-ratio: 1 / 1;
}

.real-study__duo .real-study__item img,
.real-study__duo .real-study__item video {
    height: 100%;
    object-fit: cover;
}

.real-study__item--film {
    aspect-ratio: 16 / 9;
}

.real-study__item--film video {
    height: 100%;
    object-fit: cover;
}

/* Bento chiffres clés (colonne visuels d'une étude) : deux tuiles
   carrées dans le flux des images, gros nombre en display condensée,
   légendes en Bricolage. Couleurs pilotées par la page via
   --bento-bg / --bento-fg (accents projet). */
.real-study__bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(6px, .6vw, 10px);
}

.real-study__bento-stat {
    /* Card ajustée à son contenu : plus de carré vide (Antoine 2026-09-15). Eyebrow,
     chiffre puis légende, empilés serrés. */
    border-radius: var(--radius-card);
    background: var(--bento-bg, var(--dark));
    color: var(--bento-fg, var(--ink));
    padding: clamp(18px, 1.8vw, 28px) clamp(18px, 1.8vw, 30px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
}

.real-study__bento-stat p {
    margin: 0;
}

.real-study__bento-stat .real-study__bento-num {
    margin-top: 6px;
}

.real-study__bento-eyebrow {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(10px, .8vw, 12px);
    text-transform: uppercase;
    opacity: .75;
}

.real-study__bento-num {
    margin-top: 6px;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: clamp(60px, 6.4vw, 132px);
    line-height: .88;
    letter-spacing: -.005em;
}

.real-study__bento-sub {
    font-family: var(--font-mono);
    font-size: clamp(12px, 1vw, 14px);
    line-height: 1.4;
}

@media (max-width: 560px) {
    .real-study__bento-stat {
        aspect-ratio: auto;
        min-height: 190px;
    }
}

/* Variante trio : trois tuiles texte (ex. socle de marque Pourquoi /
   Comment / Quoi de Rémory) — valeur courte en display, phrase en dessous. */
.real-study__bento--trio {
    grid-template-columns: repeat(3, 1fr);
}

.real-study__bento--trio .real-study__bento-stat {
    aspect-ratio: auto;
    min-height: 230px;
    gap: 10px;
}

.real-study__bento--trio .real-study__bento-num {
    font-size: clamp(26px, 2.4vw, 40px);
    line-height: 1;
    margin-top: 0;
}

.real-study__bento--trio .real-study__bento-sub {
    margin-top: auto;
}

@media (max-width: 900px) {
    .real-study__bento--trio {
        grid-template-columns: 1fr;
    }

    .real-study__bento--trio .real-study__bento-stat {
        min-height: 0;
    }
}

/* Graphique avant / après (colonne visuels d'une étude, ex. WC Loc Google
   Ads) : card blanche, barres SVG fines à bout arrondi (une teinte, deux
   nuances : tint vert clair = avant, vert charte = après), légende +
   valeurs en texte, tableau équivalent masqué pour les lecteurs d'écran. */
.real-study__chart {
    margin: 0;
    background: #ffffff;
    border: 1px solid rgba(0, 30, 15, .12);
    border-radius: var(--radius-card);
    padding: clamp(18px, 1.8vw, 30px);
    display: grid;
    gap: clamp(12px, 1.4vh, 18px);
    color: var(--dark);
    font-family: var(--font-mono);
}

.real-study__chart-head {
    display: grid;
    gap: 4px;
}

.real-study__chart-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: clamp(20px, 1.8vw, 28px);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -.005em;
}

.real-study__chart-sub {
    margin: 0;
    font-size: 13px;
    opacity: .65;
}

.real-study__chart svg {
    width: 100%;
    height: auto;
    display: block;
    font-family: var(--font-mono);
    fill: var(--dark);
}

.real-study__chart-table {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.real-study__chart-note {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    opacity: .8;
}

@media (max-width: 1024px) {
    .real-study__grid {
        grid-template-columns: 1fr;
    }

    .real-study__info {
        position: static;
    }
}

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

    .real-study__duo .real-study__item {
        aspect-ratio: auto;
    }

    .real-study__duo .real-study__item img {
        height: auto;
    }
}

/* Pages réalisations : le menu du header est visible dès l'arrivée
   (réplique CSS de l'état .is-menu-open, sans clic). Le --p forcé à 1
   compacte aussi paddings, wordmark et pilule Contact. Sur mobile, le
   burger garde la main (la nav y est masquée en !important). */
.page-realisation .site-header {
    --p: 1;
}

.page-realisation .site-header__nav {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.6vw, 26px);
}

.page-realisation .menu-toggle {
    display: none;
}

.page-realisation .menu-pill {
    display: grid;
    align-self: center;
    height: auto;
}

.page-realisation .menu-pill__label--v {
    display: none;
}

.page-realisation .menu-pill__label--h {
    display: block;
    padding: 10px 14px;
}

/* Lisibilité de la pastille Contact : sur les sections claires (header
   .is-blended : crème, blanc, pêche…), le rose se perdait — la pilule
   passe en vert foncé plein, texte crème ; le survol la rebascule rose. */
.site-header.is-blended .menu-pill {
    background: var(--dark);
    border-color: var(--dark);
    color: var(--ink);
}

.site-header.is-blended .menu-pill:hover,
.site-header.is-blended .menu-pill:focus-visible {
    background: var(--accent-pink);
    border-color: var(--accent-pink);
    color: var(--dark);
}

/* Le label a sa propre règle de survol (rose) qui gagnerait sinon la
   cascade → rose sur rose, texte invisible. On la neutralise ici. */
.site-header.is-blended .menu-pill:hover .menu-pill__label,
.site-header.is-blended .menu-pill:focus-visible .menu-pill__label {
    color: var(--dark);
}

/* Même logique pour le bouton MENU (état p=0) : rose illisible/incongru
   sur les sections claires → vert foncé, survol inversé. */
.site-header.is-blended .menu-toggle {
    color: var(--dark);
}

.site-header.is-blended .menu-toggle:hover {
    background: var(--dark);
}

.site-header.is-blended .menu-toggle:hover .menu-toggle__label {
    color: var(--ink);
}

/* Header au-dessus d'un hero réalisation --wide À PHOTO SOMBRE (classe
   real-hero--photo-dark sur le hero → JS pose .is-over-photo) : le wordmark
   reste sur le fond de section (teinte .is-blended), mais la nav et la
   pastille Contact, à droite, sont posées sur la photo — elles passent en
   blanc (mesuré sur casa : contraste vert foncé 1,07, blanc 4,3-16,9).
   Les heros à photo claire (arcelor, wc-loc, roubaix…) ne portent pas la
   classe : le vert foncé .is-blended y contraste mieux (9,7-16,1).
   Déclarées APRÈS .is-blended pour gagner à spécificité égale. */
.site-header.is-over-photo .site-header__nav {
    color: #ffffff;
}

.site-header.is-over-photo .menu-pill {
    background: transparent;
    border-color: #ffffff;
    color: #ffffff;
}

.site-header.is-over-photo .menu-pill:hover,
.site-header.is-over-photo .menu-pill:focus-visible {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--dark);
}

.site-header.is-over-photo .menu-pill:hover .menu-pill__label,
.site-header.is-over-photo .menu-pill:focus-visible .menu-pill__label {
    color: var(--dark);
}

/* Bandeau « D'autres projets » (pages réalisations) : trois tuiles
   entièrement cliquables, image généreuse, survol explicite. */
.real-more {
    /* Fond blanc au repos, en épilogue après le CTA final ; le fond
     prend toujours la couleur signature du projet survolé (JS pose
     --real-more-bg depuis le data-color de la tuile). */
    background: var(--real-more-bg, #ffffff);
    transition: background-color .45s var(--ease-out);
    color: var(--dark);
    padding: clamp(24px, 3.6vh, 40px) var(--section-px);
}

.real-more__inner {
    max-width: 1100px;
    margin-inline: auto;
    display: grid;
    gap: clamp(12px, 1.8vh, 18px);
}

.real-more__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.real-more__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: var(--text-xl);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -.005em;
}

.real-more__all {
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0;
    color: inherit;
    text-decoration: none;
    border: 2px solid currentColor;
    border-radius: 999px;
    padding: 8px 16px;
    transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}

.real-more__all:hover,
.real-more__all:focus-visible {
    background: var(--dark);
    border-color: var(--dark);
    color: var(--ink);
    outline: none;
}

.real-more__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(10px, 1.2vw, 18px);
}

.real-more__card {
    display: grid;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.real-more__card:focus-visible {
    outline: 2px solid var(--accent-pink);
    outline-offset: 4px;
}

.real-more__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius-card);
}

.real-more__media img,
.real-more__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s var(--ease-out);
}

.real-more__card:hover .real-more__media img,
.real-more__card:hover .real-more__media video,
.real-more__card:focus-visible .real-more__media img,
.real-more__card:focus-visible .real-more__media video {
    transform: scale(1.04);
}

.real-more__meta {
    display: grid;
    gap: 2px;
}

.real-more__client {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-base);
}

.real-more__card:hover .real-more__client {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.real-more__sector {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    opacity: .65;
}

@media (max-width: 900px) {
    .real-more__list {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .real-more__media img {
        transition: none;
    }
}

/* Lisibilité au survol (audit) : sur les heros contact/recrutement et le
   bandeau candidature spontanée (fonds vert foncé), le remplissage crème
   des cta-pill émergeait sous un texte resté crème. Le texte passe en
   vert foncé au survol, comme sur les autres sections sombres du site. */
.ctc-hero .cta-pill:hover,
.ctc-hero .cta-pill:focus-visible,
.rec-spont .cta-pill:hover,
.rec-spont .cta-pill:focus-visible {
    color: var(--dark);
    outline: none;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE NOS RÉALISATIONS (realisations.html) — hub filtrable, pensé
   pour une trentaine de projets : chips par expertise + grille de
   cards ; le fond prend la couleur signature du projet survolé. ══════ */

.hub-hero {
    position: relative;
    overflow: hidden;
    /* Fond blanc, titre sans glyphes-œil (demande Antoine 2026-08-28) :
     page volontairement calme, ce sont les vignettes qui font la couleur. */
    background: #ffffff;
    color: var(--dark);
    padding: calc(var(--header-h) + clamp(8px, 2vh, 28px)) var(--section-px) clamp(32px, 5vh, 56px);
}

.hub-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin-inline: auto;
    display: grid;
    gap: clamp(14px, 2vh, 24px);
    justify-items: center;
    text-align: center;
}

.hub-hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: clamp(36px, 5vw, 88px);
    line-height: .95;
    text-transform: uppercase;
    letter-spacing: -.005em;
}

.hub-hero__lede {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-base);
    line-height: 1.65;
    max-width: 70ch;
    opacity: .92;
}

/* La grille : fond blanc permanent (teinte caméléon au survol retirée
   sur cette page — demande Antoine 2026-08-28).
   ⚠ `.hub` seul désigne AUSSI le hub vidéo de la page Nord (règles ~4005) :
   tout ce bloc est scopé `.hub--catalogue` (classe posée sur la section de
   realisations.html) pour ne pas déteindre dessus. L'overflow repasse en
   visible, sinon le hidden hérité de .hub tue le sticky de l'aside. */
.hub--catalogue {
    background: #ffffff;
    color: var(--dark);
    overflow: visible;
    padding: clamp(28px, 4vh, 48px) var(--section-px) clamp(64px, 10vh, 130px);
}

.hub--catalogue .hub__inner {
    max-width: 1400px;
    margin-inline: auto;
    display: grid;
    gap: clamp(18px, 2.6vh, 30px);
}

/* Mise en page filtres/grille : colonne de filtres STICKY à gauche
   (type de projet + secteur d'activité), vignettes à droite — même
   mécanique que la colonne infos des études de cas (.real-study__info). */
.hub--catalogue .hub__inner--split {
    /* Pleine largeur façon .real-study__grid : la colonne filtres se colle
     au bord gauche (juste --section-px), pas de centrage 1400px. */
    max-width: none;
    grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
    gap: clamp(28px, 3vw, 56px);
    align-items: start;
}

.hub-aside {
    position: sticky;
    top: clamp(76px, 12vh, 130px);
    /* aligné sur .real-study__info */
    display: grid;
    gap: clamp(12px, 2vh, 20px);
    align-content: start;
}

.hub-aside__label {
    margin: 0 0 10px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0;
    opacity: .55;
}

/* Chips empilées dans l'aside, en format COMPACT : les deux groupes +
   le titre doivent tenir dans un écran (la colonne est sticky, elle ne
   doit jamais demander de scroll pour voir tous les filtres). */
.hub-aside .hub-filters {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* chips plus espacées (Antoine 2026-09-15) */
.hub-aside .hub-filter {
    font-size: 12px;
    line-height: 1.3;
    padding: 6px 13px;
    border-width: 1.5px;
}

.hub-aside .hub-aside__label {
    margin-bottom: 8px;
}

/* Écrans peu hauts (portables 1920×810, etc.) : la colonne sticky doit tenir sans scroll,
   on revient au format compact des chips. */
@media (max-height: 860px) {
    .hub-aside .hub-filters {
        gap: 4px;
    }

    .hub-aside .hub-filter {
        font-size: 11px;
        padding: 4px 11px;
    }
}

.hub-main {
    display: grid;
    gap: clamp(18px, 2.6vh, 30px);
    min-width: 0;
}

@media (max-width: 1024px) {
    .hub--catalogue .hub__inner--split {
        grid-template-columns: 1fr;
    }

    .hub-aside {
        position: static;
    }

    .hub-aside .hub-filters {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.hub--catalogue .hub__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: var(--text-2xl);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -.005em;
}

.hub-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 10px;
}

/* chips plus espacées (Antoine 2026-09-15) */
.hub-filter {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--dark);
    border: 2px solid color-mix(in srgb, var(--dark) 40%, transparent);
    border-radius: 999px;
    padding: 10px 18px;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}

.hub-filter:hover {
    border-color: var(--dark);
}

.hub-filter:focus-visible {
    outline: 2px solid var(--accent-pink);
    outline-offset: 2px;
}

.hub-filter[aria-pressed="true"] {
    background: var(--dark);
    border-color: var(--dark);
    color: var(--ink);
}

.hub-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* 3 vignettes max par ligne (demande Antoine) : grandes cards
     (~470px en 1920 avec la mise en page pleine largeur). */
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 1.8vw, 28px) clamp(10px, 1.2vw, 18px);
}

.hub-card.is-hidden {
    display: none;
}

/* Pagination du hub (12 projets par page, JS) : mêmes pastilles que les filtres. */
.hub-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: clamp(28px, 4vh, 48px);
}

.hub-pagination__btn {
    appearance: none;
    background: transparent;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--dark);
    border: 2px solid color-mix(in srgb, var(--dark) 40%, transparent);
    border-radius: 999px;
    min-width: 42px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out);
}

.hub-pagination__btn:hover {
    border-color: var(--dark);
}

.hub-pagination__btn:focus-visible {
    outline: 2px solid var(--accent-pink);
    outline-offset: 2px;
}

.hub-pagination__btn[aria-current="page"] {
    background: var(--dark);
    border-color: var(--dark);
    color: var(--ink);
}

.hub-pagination__btn:disabled {
    opacity: .35;
    cursor: default;
}

.hub-pagination__btn:disabled:hover {
    border-color: color-mix(in srgb, var(--dark) 40%, transparent);
}

.hub-grid {
    scroll-margin-top: 120px;
}

/* Vignette PORTRAIT, texte EN SURIMPRESSION (demande Antoine 2026-08-28) :
   le lien est le cadre 3:4, le média le remplit en absolu, le bloc méta se
   pose en bas sur un dégradé vert foncé (lisibilité sur photo). */
.hub-card__link {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--radius-card);
    color: inherit;
    text-decoration: none;
}

.hub-card__link:focus-visible {
    outline: 2px solid var(--accent-pink);
    outline-offset: 4px;
}

.hub-card__media {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
}

/* Image secondaire révélée en fondu au survol (pattern main/alt du site). */
.hub-card__alt {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .3s var(--ease-out), transform .35s var(--ease-out);
}

.hub-card__link:hover .hub-card__alt,
.hub-card__link:focus-visible .hub-card__alt {
    opacity: 1;
}

.hub-card__media img,
.hub-card__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s var(--ease-out);
}

.hub-card__link:hover .hub-card__media img,
.hub-card__link:hover .hub-card__media video,
.hub-card__link:focus-visible .hub-card__media img,
.hub-card__link:focus-visible .hub-card__media video {
    transform: scale(1.04);
}

.hub-card__meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    gap: 2px;
    padding: clamp(40px, 5vh, 64px) clamp(14px, 1.4vw, 20px) clamp(14px, 1.6vh, 18px);
    color: var(--ink);
    background: linear-gradient(180deg, rgba(0, 30, 15, 0) 0%, rgba(0, 30, 15, .74) 100%);
}

/* Nom du client en acumin condensée (titre de vignette). */
.hub-card__client {
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    /* Même échelle que les noms clients des carrousels home/expertises. */
    font-size: clamp(22px, 2.2vw, 36px);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -.005em;
}

/* Type de projet + secteur en petites pastilles en haut de la card, révélées au
   survol / focus (Antoine 2026-09-15) : type en vert foncé, secteur en crème. */
.hub-card__pills {
    position: absolute;
    top: clamp(12px, 1.2vw, 16px);
    left: clamp(12px, 1.2vw, 16px);
    right: clamp(12px, 1.2vw, 16px);
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
    pointer-events: none;
}

.hub-card__link:hover .hub-card__pills,
.hub-card__link:focus-visible .hub-card__pills {
    opacity: 1;
    transform: none;
}

.hub-card__pill {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(242, 235, 217, .92);
    color: var(--dark);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--text-xs);
    line-height: 1.2;
    white-space: nowrap;
}

.hub-card__pill--type {
    background: rgba(0, 30, 15, .88);
    color: var(--ink);
    font-weight: 700;
    text-transform: uppercase;
}

/* Phrase d'accroche (textes de Mélanie, wireframes) : repliée au repos (0fr), elle se
   déploie au survol / focus sous le nom du client et pousse le nom vers le haut,
   sans réserver d'espace au repos (essai Casa del Spa 2026-09-15). */
.hub-card__pitch {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .35s var(--ease-out), opacity .25s var(--ease-out);
}

.hub-card__pitch > span {
    min-height: 0;
    overflow: hidden;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: clamp(13px, .95vw, 15px);
    line-height: 1.4;
    text-wrap: pretty;
    padding: 6px 0 8px;
}

.hub-card__link:hover .hub-card__pitch,
.hub-card__link:focus-visible .hub-card__pitch {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* Avec une accroche, le voile du bas monte plus haut pour garder le texte lisible. */
.hub-card__link:has(.hub-card__pitch) .hub-card__meta {
    padding-top: clamp(72px, 9vh, 120px);
    background: linear-gradient(180deg, rgba(0, 30, 15, 0) 0%, rgba(0, 30, 15, .55) 35%, rgba(0, 30, 15, .84) 100%);
}

/* Tactile (pas de survol) : infos toujours visibles. */
@media (hover: none) {
    .hub-card__pills {
        opacity: 1;
        transform: none;
    }
}

.hub--catalogue .hub__note,
.hub--catalogue .hub__empty {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    opacity: .65;
}

@media (max-width: 1024px) {
    .hub-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .hub-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hub-card__media img {
        transition: none;
    }

    .hub-card__alt {
        transition: none;
    }

    .hub-card__pills,
    .hub-card__pitch {
        transition: none;
    }
}

/* Légende sous les vidéos de l'étude (pages réalisations). */
.real-study__caption {
    margin-top: 8px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0;
    opacity: .65;
}


/* ═══════════════════════════════════════════════════════════════════
   PAGE ÉQUIPE (equipe.html) — la tribu : hero + photomaton marquee,
   folio « portraits croisés » épinglé plein écran (l'écran prend la
   couleur du membre actif, effet caméléon), photo de groupe, valeurs,
   devise et chiffres. ═══════════════════════════════════════════════ */

/* ── 001 / Hero : titre + photomaton défilant ── */
.eqp-hero {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    color: var(--dark);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 92vh;
    gap: clamp(28px, 5vh, 56px);
}

.eqp-hero__inner {
    display: grid;
    gap: clamp(16px, 2.4vh, 28px);
    justify-items: center;
    text-align: center;
    /* Même gabarit que le hero du hub réalisations : contenu plafonné
     à 1200px et centré, pour un rythme identique aux autres pages. */
    width: 100%;
    max-width: calc(1200px + 2 * var(--section-px));
    margin-inline: auto;
    padding: calc(var(--header-h) + clamp(20px, 5vh, 64px)) var(--section-px) 0;
}

.eqp-hero__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: clamp(42px, 6.4vw, 116px);
    line-height: .93;
    text-transform: uppercase;
    letter-spacing: -.005em;
}

.eqp-hero__lede {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-base);
    line-height: 1.65;
    max-width: 62ch;
}

.eqp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Photomaton : marquee infini des 9 photos décalées, cliquables
   (data-member → saut vers le portrait). Deux sets identiques pour
   boucler sans saut ; pause au survol. */
.eqp-strip {
    overflow: hidden;
    padding-bottom: clamp(24px, 4vh, 44px);
}

.eqp-strip__track {
    display: flex;
    width: max-content;
    animation: eqp-marquee 42s linear infinite;
}

.eqp-strip__set {
    display: flex;
    gap: clamp(12px, 1.4vw, 20px);
    padding-right: clamp(12px, 1.4vw, 20px);
}

.eqp-strip__item {
    flex: none;
    width: clamp(260px, 26vw, 400px);
    aspect-ratio: 4 / 5;
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
}

.eqp-strip__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s var(--ease-out);
}

.eqp-strip__item:hover img,
.eqp-strip__item:focus-visible img {
    transform: scale(1.06);
}

@keyframes eqp-marquee {
    to {
        transform: translateX(-50%);
    }
}

/* Glyphes-œil de la page : toujours dans la couleur du texte
   (jamais en rose), sur les O et les A uniquement. */
.eqp-hero .brand-mark,
.eqp-folio .brand-mark {
    color: var(--dark);
}

.eqp-values .brand-mark {
    color: var(--dark);
}

/* ── Kicker générique de la page ── */
.eqp-eyebrow {
    margin: 0 0 clamp(10px, 1.6vh, 16px);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-sm);
    text-transform: uppercase;
    color: currentColor;
    opacity: .6;
}

/* ── 002 / Folio « portraits croisés » ──
   Section étirée en hauteur par le JS ([data-folio]) ; le pin reste
   sticky pendant que le scroll fait défiler les chapitres en fondu.
   Le fond du pin prend la couleur signature du membre actif. ── */
/* Pastille signe astrologique, sous le rôle. */

/* Rail d'avatars : saut direct vers un portrait. */

/* Fallback statique (mobile / reduced-motion) : cards empilées,
   chacune sur sa couleur signature (--m-color). */

/* Chips « terrain de jeu » : reliées aux pages expertise. */
.eqp-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--dark);
    text-decoration: none;
    transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out);
}

.eqp-tag:hover,
.eqp-tag:focus-visible {
    background: var(--ink);
    border-color: var(--ink);
}

/* ── 004 / Nos valeurs : 4 tuiles bordées sur fond sombre ── */
.eqp-values {
    /* Même langage que la section « nos clients » de la home : section
     blanche, cards crème, teinte charte au survol (retour 2026-09-04). */
    background: #ffffff;
    color: var(--dark);
    padding: clamp(56px, 9vh, 110px) var(--section-px);
}

.eqp-values__head {
    max-width: 900px;
    margin: 0 auto clamp(32px, 5vh, 52px);
    text-align: center;
}

.eqp-values__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: clamp(28px, 3.4vw, 56px);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -.005em;
}

.eqp-values__lead {
    margin: 14px auto 0;
    font-family: var(--font-mono);
    font-size: var(--text-base);
    line-height: 1.65;
    max-width: 56ch;
    opacity: .75;
}

.eqp-values__grid {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1100px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 22px);
}

.eqp-value {
    background: var(--ink);
    border: 0;
    border-radius: var(--radius-card);
    transition: background-color .25s var(--ease-out);
    padding: clamp(22px, 2.6vw, 34px);
    display: grid;
    gap: 12px;
    align-content: start;
}

.eqp-value__name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: clamp(22px, 2vw, 34px);
    line-height: 1;
    text-transform: uppercase;
    color: var(--dark);
}

.eqp-value__text {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-base);
    line-height: 1.65;
    color: inherit;
    opacity: .88;
}

/* ── 005 / La devise + la tribu en chiffres ── */
.eqp-motto {
    background: var(--accent-blue);
    color: var(--dark);
    padding: clamp(64px, 10vh, 120px) var(--section-px);
    text-align: center;
}

.eqp-motto__title {
    margin: 0 auto;
    max-width: 22ch;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: clamp(30px, 4.4vw, 74px);
    line-height: .98;
    text-transform: uppercase;
    letter-spacing: -.005em;
    text-wrap: balance;
    /* césures maîtrisées (Antoine 2026-09-15) */
}

.eqp-motto__sub {
    margin: 18px auto 0;
    font-family: var(--font-mono);
    font-size: var(--text-base);
    line-height: 1.65;
    max-width: 48ch;
    text-wrap: pretty;
    /* pas de mot orphelin en fin de paragraphe */
    opacity: .8;
}

.eqp-motto__stats {
    list-style: none;
    padding: 0;
    margin: clamp(36px, 6vh, 64px) auto 0;
    max-width: 1100px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 20px);
}

.eqp-stat {
    background: #ffffff;
    border-radius: 18px;
    padding: clamp(20px, 2.4vw, 30px) clamp(14px, 1.6vw, 22px);
    display: grid;
    gap: 6px;
    justify-items: center;
}

.eqp-stat__num {
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: clamp(30px, 3vw, 52px);
    line-height: 1;
    text-transform: uppercase;
}

.eqp-stat__label {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.45;
    opacity: .75;
}

/* ── Responsive ── */
@media (max-width: 1080px) {
    .eqp-motto__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .eqp-hero {
        min-height: 0;
    }

    .eqp-values__grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eqp-strip {
        overflow-x: auto;
    }

    .eqp-strip__track {
        animation: none;
    }

    .eqp-folio__pin,
    .eqp-folio__panel,
    .eqp-folio__photo,
    .eqp-strip__item img,
    .eqp-tag {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   CORRECTIFS RESPONSIVE & ACCESSIBILITÉ HEADER (audit 2026-08-28)
   ═══════════════════════════════════════════════════════════════════ */

/* Focus clavier visible sur toute la navigation (header + menu mobile) :
   indispensable à l'accessibilité, invisible à la souris. */
.site-header a:focus-visible,
.site-header button:focus-visible,
.mobile-menu a:focus-visible,
.mobile-menu button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

@media (max-width: 900px) {

    /* Pages réalisation : le wordmark compact (28%) descendait à 70x10px
     sur mobile — on le ramène à la taille mobile standard. */
    .page-realisation .wordmark {
        width: auto;
        max-width: clamp(120px, 34vw, 170px);
    }

    /* Liens du menu mobile : cible tactile ~40px (30px avant). */
    .mobile-menu__link {
        padding-block: 5px;
    }
}

/* Le trigger <button> Expertises subit un reset de padding plus
   spécifique : on lui redonne la même zone cliquable que les liens. */
.site-header__nav button.site-header__link {
    padding-block: 10px;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE PHILOSOPHIE (.philo-*) — récit fondateur Why/How/What.
   Fil rouge : contenu dense mais aéré (éditorial centré, respirations
   géantes en acumin), et la mécanique caméléon appliquée à la page
   elle-même (section totem qui change de couleur au survol des traits).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero récit : section coupée en deux. Texte sur crème à gauche,
     la photo d'Arnaud occupe TOUTE la moitié droite, bord à bord
     (même gabarit que les heros réalisation). ── */
.philo-hero {
    background: #F2EBD9;
    color: var(--dark);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: stretch;
    min-height: 92vh;
}

.philo-hero__panel {
    display: grid;
    align-content: center;
    justify-items: start;
    padding: calc(var(--header-h) + clamp(8px, 2vh, 24px)) clamp(24px, 3vw, 56px) clamp(40px, 6vh, 72px) var(--section-px);
}

.philo-hero__visual {
    position: relative;
    min-height: 100%;
}

.philo-hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 32%;
}

.philo-hero__title {
    margin: 0 0 clamp(16px, 2.4vh, 26px);
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: clamp(32px, 4vw, 68px);
    line-height: .98;
    text-transform: uppercase;
    letter-spacing: -.005em;
}

.philo-hero__cta {
    margin-top: clamp(14px, 2vh, 22px);
}

/* ── Credo : séquence cinétique épinglée. La section s'étire, le
     contenu reste collé plein écran et les 6 temps du récit se relaient
     au centre (crossfade piloté par le JS). ── */
.philo-credo {
    position: relative;
    background: #F2EBD9;
    color: var(--dark);
    /* 1 écran sticky + 1 « cran » de scroll par temps (4 temps depuis le 2026-09-15,
     textes regroupés deux par deux). */
    height: calc(100vh + 4 * 70vh);
}

.philo-credo__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    display: grid;
    place-items: center;
    padding: 0 var(--section-px);
    overflow: hidden;
}

/* ── Peau de caméléon : pigments flous + grain ──
   Trois taches de couleur floutées dérivent lentement ; leur teinte
   (--credo-a, posée par le JS) change à chaque phrase du récit :
   rose → bleu → jaune → pêche, toujours mélangées au beige charte. */
.philo-credo__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* La teinte est enregistrée comme vraie couleur : ses changements
   s'interpolent, y compris à l'intérieur des dégradés radiaux. */
@property --credo-a {
    syntax: "<color>";
    inherits: true;
    initial-value: #F0A6F0;
}

.philo-credo {
    transition: --credo-a 1.1s var(--ease-out);
}

/* L'orbite porte la dérive (animation CSS), le blob à l'intérieur porte
   le magnétisme (transform JS vers le curseur) : pas de conflit. */
.philo-credo__orbit {
    position: absolute;
    will-change: transform;
}

.philo-credo__blob {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Nuage de pigment : fondu radial multi-paliers vers le transparent
     (progression douce, pas d'anneau de banding), léger blur en renfort. */
    background: radial-gradient(closest-side,
            var(--credo-a, var(--accent-pink)) 0%,
            color-mix(in srgb, var(--credo-a, var(--accent-pink)) 93%, #F2EBD9) 26%,
            color-mix(in srgb, var(--credo-a, var(--accent-pink)) 66%, transparent) 54%,
            color-mix(in srgb, var(--credo-a, var(--accent-pink)) 30%, transparent) 78%,
            transparent 100%);
    filter: blur(36px);
    opacity: .96;
    will-change: transform;
}

/* Trajectoires vagabondes : boucles fermées à étapes irrégulières,
   durées premières entre elles (17/23/29s) et départs décalés — les
   trois pigments ne se resynchronisent jamais, le mouvement paraît
   aléatoire tout en restant fluide. */
.philo-credo__orbit--1 {
    width: 55vw;
    height: 55vw;
    top: -18%;
    left: -12%;
    animation: credoDrift1 13s ease-in-out infinite;
    animation-delay: -7s;
}

.philo-credo__orbit--2 {
    width: 46vw;
    height: 46vw;
    bottom: -22%;
    right: -10%;
    animation: credoDrift2 17s ease-in-out infinite;
    animation-delay: -11s;
}

.philo-credo__orbit--3 {
    width: 30vw;
    height: 30vw;
    top: 30%;
    left: 52%;
    animation: credoDrift3 9s ease-in-out infinite;
    animation-delay: -4s;
}

/* 4e pigment, petit et rapide : il traverse la scène et croise les
   autres, le fond ne se fige jamais. */
.philo-credo__orbit--4 {
    width: 22vw;
    height: 22vw;
    top: 8%;
    right: 18%;
    animation: credoDrift4 7s ease-in-out infinite;
    animation-delay: -2s;
}

.philo-credo__blob--2 {
    opacity: .82;
}

.philo-credo__blob--3 {
    opacity: .72;
}

.philo-credo__blob--4 {
    opacity: .64;
}

/* Pigment-curseur : la tache qui suit la souris (traîne élastique JS).
   Invisible tant que la souris n'est pas dans la section. */
.philo-credo__cursorblob {
    position: absolute;
    top: 0;
    left: 0;
    width: 24vw;
    height: 24vw;
    margin: -12vw 0 0 -12vw;
    border-radius: 50%;
    background: radial-gradient(closest-side,
            var(--credo-a, var(--accent-pink)) 0%,
            color-mix(in srgb, var(--credo-a, var(--accent-pink)) 70%, transparent) 45%,
            color-mix(in srgb, var(--credo-a, var(--accent-pink)) 25%, transparent) 75%,
            transparent 100%);
    filter: blur(26px);
    opacity: 0;
    transition: opacity .5s var(--ease-out);
    will-change: transform;
    pointer-events: none;
}

.philo-credo__cursorblob.is-on {
    opacity: .92;
}

@keyframes credoDrift1 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    19% {
        transform: translate(17vw, 11vh) scale(1.22);
    }

    38% {
        transform: translate(28vw, -5vh) scale(1);
    }

    57% {
        transform: translate(12vw, 16vh) scale(1.3);
    }

    80% {
        transform: translate(21vw, 5vh) scale(.94);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

@keyframes credoDrift2 {
    0% {
        transform: translate(0, 0) scale(1.12);
    }

    16% {
        transform: translate(-13vw, -15vh) scale(.9);
    }

    41% {
        transform: translate(-26vw, 4vh) scale(1.14);
    }

    63% {
        transform: translate(-9vw, -19vh) scale(1.26);
    }

    84% {
        transform: translate(-19vw, 8vh) scale(.88);
    }

    100% {
        transform: translate(0, 0) scale(1.12);
    }
}

@keyframes credoDrift3 {
    0% {
        transform: translate(0, 0) scale(.9);
    }

    23% {
        transform: translate(-16vw, 13vh) scale(1.26);
    }

    47% {
        transform: translate(9vw, 20vh) scale(.98);
    }

    66% {
        transform: translate(15vw, -10vh) scale(1.32);
    }

    86% {
        transform: translate(-8vw, -13vh) scale(.92);
    }

    100% {
        transform: translate(0, 0) scale(.9);
    }
}

@keyframes credoDrift4 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    26% {
        transform: translate(-22vw, 18vh) scale(1.24);
    }

    52% {
        transform: translate(-38vw, -4vh) scale(.9);
    }

    74% {
        transform: translate(-15vw, 24vh) scale(1.16);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

/* Grain par-dessus les pigments (sous le texte). */
.philo-credo__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.95" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%25" height="100%25" filter="url(%23n)" opacity="0.9"/></svg>');
    opacity: .55;
    /* overlay : le grain ACCENTUE le dégradé (contraste) au lieu de
     l'assombrir uniformément. */
    mix-blend-mode: overlay;
    /* Crépitement façon pellicule : le motif SAUTE de position ~13 fois
     par seconde (steps), le grain « bout » sur les pigments. */
    background-size: 140px 140px;
    animation: credoGrain .62s steps(1, end) infinite;
}

@keyframes credoGrain {
    0% {
        background-position: 0 0;
    }

    12.5% {
        background-position: -47px -29px;
    }

    25% {
        background-position: 33px -61px;
    }

    37.5% {
        background-position: -18px 44px;
    }

    50% {
        background-position: 58px 17px;
    }

    62.5% {
        background-position: -39px -55px;
    }

    75% {
        background-position: 24px 51px;
    }

    87.5% {
        background-position: -62px 12px;
    }

    100% {
        background-position: 0 0;
    }
}

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

    .philo-credo__bg::after {
        animation: none;
    }
}

.philo-credo__beat {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: 940px;
    text-align: center;
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}

.philo-credo__beat.is-active {
    opacity: 1;
    transform: none;
}

.philo-credo__bp {
    /* Tout le récit dans la même typo (Antoine 2026-09-15), corps un peu réduit
     car chaque temps regroupe deux phrases. */
    font-family: var(--font-mono);
    font-size: clamp(17px, 1.6vw, 25px);
    line-height: 1.55;
}

/* Picto à œil percé au-dessus de la phrase (formes du bandeau
   réassurance : K, étoile, cœur, diamant, sablier — la pupille darte
   via le JS global sur .reassurance__eye-hole). */
.philo-credo__picto {
    display: block;
    width: clamp(44px, 4.6vw, 68px);
    height: auto;
    margin: 0 auto clamp(14px, 2.2vh, 24px);
    fill: var(--dark);
}

/* Glyphes-œil dans la couleur du texte (jamais rose) — règle du site. */
.philo-credo .brand-mark {
    color: var(--dark);
}

/* Fallback statique (mobile, reduced-motion) : récit empilé classique. */
.philo-credo.is-static {
    height: auto;
    padding: clamp(56px, 9vh, 110px) var(--section-px);
}

.philo-credo.is-static .philo-credo__pin {
    position: static;
    height: auto;
    display: grid;
    gap: clamp(18px, 3vh, 30px);
    place-items: center;
    padding: 0;
}

.philo-credo.is-static .philo-credo__beat {
    grid-area: auto;
    opacity: 1;
    transform: none;
}

/* ── Bande réassurance : reprend le composant commun sur crème ── */
/* Preuves en pastilles en tête de « Trois mots » (ex bande beige, 2026-09-15) : même
   composant que le hero home, adapté au fond rose (pastilles blanches, texte et pictos
   vert foncé), en GRAND et en bandeau défilant sur une ligne, de gauche à droite
   (piste dupliquée pour la boucle, pause au survol, statique en reduced-motion). */
.reassurance--philo {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 0 0 clamp(32px, 5vh, 64px);
    overflow: hidden;
}

.reassurance__marquee {
    display: flex;
    width: max-content;
    /* Pas de gap ici : l'espace entre les deux copies est le padding-right de chaque piste,
     donc une période = exactement 50 % → boucle sans raccord ni vide (2026-09-15). */
    animation: reassMarquee 32s linear infinite;
    will-change: transform;
}

.reassurance--philo .reassurance__track {
    width: auto;
    /* annule le width:100% du hero : chaque copie garde sa largeur naturelle (sinon vide entre les deux) */
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: clamp(12px, 1.2vw, 18px);
    padding-right: clamp(12px, 1.2vw, 18px);
}

.reassurance--philo .reassurance__cell {
    background: rgba(255, 255, 255, .82);
    color: var(--dark);
    padding: clamp(10px, 1vw, 14px) clamp(18px, 1.8vw, 26px) clamp(10px, 1vw, 14px) clamp(12px, 1.2vw, 18px);
    gap: 10px;
}

.reassurance--philo .reassurance__eye {
    height: clamp(30px, 2.6vw, 40px);
    color: var(--dark);
}

.reassurance--philo .reassurance__big {
    font-size: clamp(20px, 1.8vw, 27px);
}

.reassurance--philo .reassurance__sub {
    font-size: clamp(16px, 1.4vw, 21px);
    opacity: 1;
}

/* Sens inversé (Antoine 2026-09-15) : les pastilles défilent vers la gauche, en continu,
   sans pause au survol. */
@keyframes reassMarquee {
    from {
        transform: none;
    }

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

@media (prefers-reduced-motion: reduce) {
    .reassurance__marquee {
        animation: none;
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
    }

    .reassurance__marquee .reassurance__track[aria-hidden="true"] {
        display: none;
    }

    .reassurance--philo .reassurance__track {
        flex-wrap: wrap;
        justify-content: center;
    }
}


/* ── Trois mots : fond vert + dot-grid, cards translucides ── */
.philo-circle {
    position: relative;
    /* Fond rose, cards crème, texte vert foncé (retour Antoine 2026-09-04). */
    background: var(--accent-pink);
    color: var(--dark);
    padding: clamp(56px, 9vh, 110px) var(--section-px);
    overflow: hidden;
}

.philo-circle__inner {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin-inline: auto;
}

.philo-circle__title {
    margin: 0 0 clamp(22px, 3.6vh, 40px);
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: var(--text-2xl);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -.005em;
}

.philo-circle__cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 1.6vw, 22px);
    align-items: start;
}

.philo-card {
    /* Card translucide (dispositif préféré aux séparateurs). */
    background: var(--ink);
    border: 0;
    border-radius: var(--radius-card);
    padding: clamp(18px, 2.4vw, 28px);
    transition: background-color .5s var(--ease-out), transform .5s var(--ease-out), opacity .5s var(--ease-out);
}

/* Mise en avant tour à tour (carrousel des numéros, 2026-09-15) : la card active
   passe en blanc et se soulève, les deux autres s'effacent un peu. */
.philo-card.is-active {
    background: #ffffff;
    transform: translateY(-8px);
}

.philo-circle__cards:has(.philo-card.is-active) .philo-card:not(.is-active) {
    opacity: .7;
}

.philo-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    /* Titres = punchlines (plus longs, 2026-09-15). */
    font-size: clamp(22px, 2vw, 32px);
    line-height: 1;
    text-transform: uppercase;
    text-wrap: balance;
}

.philo-card__kicker {
    margin: 8px 0 10px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0;
    opacity: .65;
}

.philo-card__p {
    margin: 0 0 10px;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.65;
    opacity: .92;
}

.philo-card__p:last-child {
    margin-bottom: 0;
}

.philo-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.philo-card__list a {
    color: inherit;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 30, 15, .35);
    transition: border-color .2s var(--ease-out), color .2s var(--ease-out);
}

.philo-card__list a:hover,
.philo-card__list a:focus-visible {
    color: var(--dark);
    border-bottom-width: 2px;
    border-color: var(--dark);
    outline: none;
}

/* Carrousel des trois mots : plus de phrase tournante (les punchlines sont dans les
   titres des cards), seuls les numéros restent, centrés sous les cards. */
.philo-rotator {
    position: relative;
    margin-top: clamp(22px, 3.6vh, 40px);
    display: grid;
    place-items: center;
}

@media (prefers-reduced-motion: reduce) {
    .philo-rotator {
        display: none;
    }

    .philo-card {
        transition: none;
    }
}

/* ── Totem caméléon : section coupée en deux, la vidéo motion occupe
     TOUTE la moitié gauche bord à bord ; la section prend la couleur du
     trait survolé (teinte caméléon). ── */
.philo-totem {
    background: var(--philo-bg, #F2EBD9);
    transition: background-color .45s var(--ease-out);
    color: var(--dark);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
}

.philo-totem__body {
    padding: clamp(56px, 9vh, 110px) var(--section-px) clamp(56px, 9vh, 110px) clamp(28px, 4vw, 64px);
}

.philo-totem__title {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: var(--text-2xl);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -.005em;
}

.philo-totem__lede {
    margin: 0 0 clamp(22px, 3.4vh, 38px);
    font-family: var(--font-mono);
    font-size: var(--text-base);
    line-height: 1.65;
    max-width: 62ch;
}

.philo-totem__media {
    position: relative;
    margin: 0;
    min-height: 100%;
}

.philo-totem__media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Bords carrés, pas de fond placeholder derrière le média. */
    border-radius: 0;
}

.philo-totem__traits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(10px, 1.4vw, 18px);
}

.philo-trait {
    background: #ffffff;
    border-radius: var(--radius-card);
    padding: clamp(16px, 2vw, 24px);
    transition: transform .25s var(--ease-out);
}

.philo-trait:hover {
    transform: translateY(-3px);
}

.philo-trait__tag {
    display: inline-block;
    margin: 0 0 10px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0;
    background: var(--dark);
    color: var(--ink);
    border-radius: 999px;
    padding: 5px 12px;
}

.philo-trait__p {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.philo-totem__outro {
    margin: clamp(22px, 3.4vh, 38px) 0 0;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-base);
    line-height: 1.6;
}

/* ── Adaptabilité & transparence : bloc JAUNE charte plein, impossible
     à scroller sans le voir. Titre géant, tuiles vert foncé (le langage
     visuel des « projets clés en main » de la page tarifs). ── */
.philo-clair {
    background: var(--accent-yellow);
    color: var(--dark);
    padding: clamp(64px, 10vh, 130px) var(--section-px);
}

.philo-clair__inner {
    max-width: 1100px;
    margin-inline: auto;
}

/* Variante « photo split » : texte + cards sur les deux tiers gauches,
   photo de Mélanie plein tiers droit, pleine hauteur (sticky comme les
   sections « Quand faire appel » des pages expertise). */
.philo-clair--photo-split {
    padding: 0;
}

.philo-clair--photo-split > .philo-clair__inner.philo-clair__split {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
}

.philo-clair__body {
    padding: clamp(64px, 10vh, 130px) var(--section-px);
    padding-right: clamp(24px, 4vw, 64px);
}

.philo-clair__visual {
    margin: 0;
    position: relative;
    min-height: 560px;
}

.philo-clair__visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

@media (max-width: 900px) {
    .philo-clair--photo-split > .philo-clair__inner.philo-clair__split {
        grid-template-columns: 1fr;
    }

    .philo-clair__body {
        padding-right: var(--section-px);
    }

    .philo-clair__visual {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
}

.philo-clair__title {
    margin: 0 0 clamp(18px, 2.6vh, 28px);
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: clamp(34px, 4.4vw, 78px);
    line-height: .96;
    text-transform: uppercase;
    letter-spacing: -.005em;
    max-width: 20ch;
}

.philo-clair__p {
    margin: 0 0 10px;
    font-family: var(--font-mono);
    font-size: var(--text-base);
    line-height: 1.65;
    max-width: 66ch;
}

.philo-clair__p--close {
    font-weight: 700;
    font-size: var(--text-base);
    /* réduit (retour Antoine 2026-09-04) */
}

.philo-clair__cta {
    margin-top: clamp(14px, 2vh, 20px);
}

/* Voile de transparence sur le portrait (2026-09-15) : jaune charte translucide,
   troué par un masque radial qui suit le curseur (--mx/--my/--r posés par le JS).
   .is-clear (tactile, reduced-motion) : le voile se lève entièrement. */
.philo-clair__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--accent-yellow);
    opacity: .72;
    pointer-events: none;
    --mx: 50%;
    --my: 50%;
    --r: 0px;
    -webkit-mask: radial-gradient(circle var(--r) at var(--mx) var(--my), transparent 0, transparent calc(var(--r) - 70px), #000 var(--r));
    mask: radial-gradient(circle var(--r) at var(--mx) var(--my), transparent 0, transparent calc(var(--r) - 70px), #000 var(--r));
    transition: --r .35s var(--ease-out), opacity .6s var(--ease-out);
}

@property --r {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

.philo-clair__visual.is-clear .philo-clair__veil {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .philo-clair__veil {
        transition: none;
    }
}

/* ── Preuves : crème, 4 stats blanches ── */
.philo-preuves {
    background: #F2EBD9;
    color: var(--dark);
    padding: clamp(56px, 9vh, 110px) var(--section-px);
}

.philo-preuves__inner {
    max-width: 1100px;
    margin-inline: auto;
}

.philo-preuves__title {
    margin: 0 0 clamp(14px, 2vh, 22px);
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: var(--text-2xl);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -.005em;
}

.philo-preuves__p {
    margin: 0 0 10px;
    font-family: var(--font-mono);
    font-size: var(--text-base);
    line-height: 1.65;
    max-width: 72ch;
}

.philo-stats {
    list-style: none;
    margin: clamp(20px, 3vh, 32px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 1.6vw, 22px);
}

.philo-stat {
    background: #ffffff;
    border-radius: var(--radius-card);
    padding: clamp(18px, 2.2vw, 28px) clamp(14px, 1.6vw, 22px);
    text-align: center;
}

.philo-stat__big {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: clamp(30px, 3.4vw, 54px);
    line-height: 1;
    text-transform: uppercase;
}

.philo-stat__sub {
    margin: 8px 0 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.45;
    opacity: .75;
}

/* ── Responsive philosophie ── */
@media (max-width: 900px) {

    /* Splits : une colonne, le média devient un bloc 4/3. */
    .philo-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .philo-hero__visual {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .philo-circle__cards {
        grid-template-columns: 1fr;
    }

    .philo-totem {
        grid-template-columns: 1fr;
    }

    .philo-totem__media {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .philo-totem__body {
        padding: clamp(40px, 6vh, 64px) var(--section-px);
    }

    .philo-totem__traits {
        grid-template-columns: 1fr;
    }

    .philo-stats {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════ Retours Antoine 2026-09-04 (lot 1) ═══════════════ */

/* Tarifs, projets clés en main + recrutement, pourquoi nous rejoindre :
   section blanche (ou rose), cards crème comme « nos clients » (home),
   accent charte tournant au survol. */
.pricing-section--white {
    background: #ffffff;
}

.pricing-section--pink {
    background: var(--accent-pink);
}

.pricing-need:nth-child(4n+1) {
    --need-accent: var(--accent-blue);
}

.pricing-need:nth-child(4n+2) {
    --need-accent: var(--accent-pink);
}

.pricing-need:nth-child(4n+3) {
    --need-accent: var(--accent-yellow);
}

.pricing-need:nth-child(4n+4) {
    --need-accent: var(--accent-peach);
}

.pricing-section--pink .pricing-need:nth-child(4n+2) {
    --need-accent: var(--accent-blue);
}

/* Pas d'effet au survol sur ces cards (retour Antoine 2026-09-04). */
.pricing-need__desc {
    opacity: .88;
}

.pricing-need__picto {
    display: block;
    color: var(--dark);
    margin-bottom: 2px;
}

.pricing-need__picto svg {
    width: clamp(24px, 2.2vw, 32px);
    height: auto;
    display: block;
    fill: currentColor;
}

/* Hero recrutement sur fond crème. */
.ctc-hero--cream {
    background: var(--ink);
    color: var(--dark);
}

/* Philosophie, trois mots : numéros 1-2-3 sous les cards (carrousel de mise en avant). */
.philo-rotator__steps {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.philo-rotator__step {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 2px solid var(--dark);
    background: transparent;
    color: var(--dark);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}

.philo-rotator__step:hover,
.philo-rotator__step:focus-visible {
    background: var(--ink);
    outline: none;
}

.philo-rotator__step.is-active {
    background: var(--dark);
    color: var(--ink);
}

/* Avis Google : avatar « initiale » (Google n'expose pas la photo de tous
   les auteurs ; même rendu que les pastilles Google). */

/* Équipe, strip : fondu photo posée ⇄ photo « créative » (texture),
   décalé d'un membre à l'autre (--d). */
.eqp-strip__item {
    position: relative;
}

.eqp-strip__item img {
    position: absolute;
    inset: 0;
}

.eqp-strip__alt {
    opacity: 0;
    animation: eqp-fade 7s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

@keyframes eqp-fade {

    0%,
    38% {
        opacity: 0;
    }

    50%,
    88% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eqp-strip__alt {
        animation: none;
        opacity: 1;
    }
}

/* Équipe, valeurs : picto pétales (même set que « nos clients ») +
   teinte charte au survol. */
.eqp-value:hover {
    background: var(--v-accent, var(--accent-blue));
}

.eqp-value__picto {
    display: block;
    color: var(--dark);
}

.eqp-value__picto svg {
    width: clamp(24px, 2.2vw, 32px);
    height: auto;
    display: block;
    fill: currentColor;
}

/* Pages expertise, « Quand faire appel » : section coupée en deux (photo
   / contenu), cards blanches empilées, chacune sur sa ligne, avec le « + »
   de la charte (même masque que l'accordéon). Plus de filet. */
.xp-section--photo-split > .xp-inner.xp-photo-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.xp-cards--stack {
    grid-template-columns: 1fr;
    gap: clamp(10px, 1.4vh, 16px);
}

@media (max-width: 900px) {
    .xp-section--photo-split > .xp-inner.xp-photo-split {
        grid-template-columns: 1fr;
    }
}

/* Pages expertise, « Pourquoi un caméléon… » : mise en forme de la
   section totem de la page philosophie (cards blanches à pastille,
   section qui prend la couleur du trait survolé), sans la vidéo. */
.xp-section--totem {
    background: var(--philo-bg, #F2EBD9);
    transition: background-color .45s var(--ease-out);
    color: var(--dark);
}

.xp-section--totem .philo-totem__traits {
    grid-template-columns: repeat(4, 1fr);
}

.xp-section--totem .philo-trait {
    display: flex;
    flex-direction: column;
}

.philo-trait__title {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(16px, 1.3vw, 22px);
    line-height: 1.05;
    text-transform: uppercase;
}

.xp-section--totem .philo-trait__tag {
    align-self: flex-start;
}

.xp-section--totem .xp-cta {
    margin-top: clamp(22px, 3.4vh, 38px);
}

/* Retours Antoine 2026-09-15 : titre sur une ligne, CTA rose, césures maîtrisées. */
.xp-section--totem .xp-title {
    max-width: none;
    font-size: clamp(24px, 2.5vw, 42px);
}

@media (min-width: 1100px) {
    .xp-section--totem .xp-title {
        white-space: nowrap;
    }
}

.xp-section--totem .xp-lead,
.xp-section--totem .philo-trait__p {
    text-wrap: pretty;
}

.xp-section--totem .cta-pill {
    background: var(--accent-pink);
    border-color: var(--accent-pink);
    color: var(--dark);
}

.xp-section--totem .cta-pill::before {
    background: var(--dark);
}

.xp-section--totem .cta-pill::after {
    background-color: var(--dark);
}

.xp-section--totem .cta-pill:hover,
.xp-section--totem .cta-pill:focus-visible {
    color: var(--ink);
    border-color: var(--dark);
    outline: none;
}

/* Tarifs (pages expertise) : H2 plus petit, sans césure hasardeuse. */
.xp-section#tarifs .xp-title {
    font-size: clamp(24px, 2.6vw, 42px);
    text-wrap: balance;
}

/* Prestations toujours ouvertes (pages expertise, 2026-09-15) : pas de flèche, pas de clic. */
.jungle__cards--static .jungle__toggle {
    display: none;
}

.jungle__cards--static .jungle__summary {
    cursor: default;
}

.jungle__cards--static .jungle__cell {
    cursor: default;
}

@media (max-width: 1000px) {
    .xp-section--totem .philo-totem__traits {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .xp-section--totem .philo-totem__traits {
        grid-template-columns: 1fr;
    }
}

/* Page conseil : cas client (Rémory) à droite de la présentation, à la
   place du comparateur avant / après placeholder. Card blanche, photo bord
   à bord en haut, pastille « Lire l'étude de cas » qui se remplit au survol. */
.xp-case {
    display: grid;
    grid-template-rows: auto auto;
    /* Hauteur = contenu : la colonne texte du split est souvent bien plus haute
     (align-items: stretch), la card ne doit pas s'étirer avec elle. */
    align-self: center;
    background: #ffffff;
    color: var(--dark);
    border-radius: var(--radius-card);
    overflow: hidden;
    text-decoration: none;
    transition: transform .3s var(--ease-out);
}

.xp-case:hover,
.xp-case:focus-visible {
    transform: translateY(-4px);
    outline: none;
}

/* sans ombre (retour Antoine) */
.xp-case__img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.xp-case__body {
    display: grid;
    gap: 10px;
    padding: clamp(18px, 2vw, 28px);
    align-content: start;
}

.xp-case__eyebrow {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    opacity: .65;
}

.xp-case__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: clamp(22px, 2vw, 34px);
    line-height: .98;
    text-transform: uppercase;
}

.xp-case__text {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.55;
    opacity: .88;
}

.xp-case__go {
    justify-self: start;
    margin-top: 6px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    border: 2px solid currentColor;
    border-radius: 999px;
    padding: 8px 14px;
    transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}

.xp-case:hover .xp-case__go,
.xp-case:focus-visible .xp-case__go {
    background: var(--dark);
    border-color: var(--dark);
    color: var(--ink);
}

/* « Quand faire appel » : priorité sur la grille 2 colonnes du split et sur
   la palette rotative des cards (spécificité alignée sur ces règles). */
.xp-photo-split .xp-cards--stack {
    grid-template-columns: 1fr;
}

.xp-photo-split .xp-cards--stack > .xp-card:nth-child(n) {
    background: #ffffff;
}

/* plus de picto + (Antoine 2026-09-15) */
.xp-photo-split .xp-cards--stack > .xp-card:hover {
    transform: none;
}

/* ═══════════════ Équipe · Portraits croisés (liste éditoriale) ═══════════════
   Remplace le folio épinglé plein écran (retour Antoine 2026-09-04). Section
   crème, rail de prénoms sticky à gauche, stage à droite : portrait carré +
   prénom, rôle, signe, trois rubriques. La couleur du membre = pastille. */
/* Stage : les 9 panneaux empilés, seul l'actif est visible. */


/* ═══════════════ Équipe · Portraits croisés (grille de cards) ═══════════════
   Option (a) retenue par Antoine le 2026-09-04 (remplace la liste éditoriale
   .eqp-roster, elle-même remplaçante du folio). Section blanche, cards crème
   (langage « nos clients » de la home). La couleur du membre = pastille +
   liseré du rôle, jamais en plein fond. */
.eqp-cards {
    background: #ffffff;
    color: var(--dark);
    padding: clamp(56px, 9vh, 110px) var(--section-px);
}

.eqp-cards .brand-mark {
    color: var(--dark);
}

.eqp-cards__inner {
    max-width: 1160px;
    margin-inline: auto;
}

.eqp-cards__head {
    max-width: 760px;
    margin-bottom: clamp(28px, 4.4vh, 48px);
}

.eqp-cards__title {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: clamp(34px, 4.4vw, 72px);
    line-height: .96;
    text-transform: uppercase;
    letter-spacing: -.005em;
}

.eqp-cards__lead {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-base);
    line-height: 1.6;
    opacity: .85;
}

.eqp-cards__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 22px);
}

.eqp-card {
    background: var(--ink);
    border-radius: var(--radius-card);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr;
    transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}

.eqp-card:hover,
.eqp-card:focus-within {
    outline: none;
}

/* plus d'ombre ni de remontée au survol (Antoine, 2026-09-08) */
.eqp-card__media {
    position: relative;
    margin: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.eqp-card__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .45s var(--ease-out), transform .6s var(--ease-out);
}

.eqp-card__photo--alt {
    opacity: 0;
}

.eqp-card:hover .eqp-card__photo--main,
.eqp-card:focus-within .eqp-card__photo--main {
    opacity: 0;
}

.eqp-card:hover .eqp-card__photo--alt,
.eqp-card:focus-within .eqp-card__photo--alt {
    opacity: 1;
    transform: scale(1.04);
}

.eqp-card__body {
    padding: clamp(16px, 1.8vw, 24px);
    display: grid;
    gap: 8px;
    align-content: start;
}

.eqp-card__role {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    opacity: .8;
}

/* Pastille de couleur devant le poste retirée (Antoine, 2026-09-08). */
.eqp-card__name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: clamp(26px, 2.3vw, 38px);
    line-height: .96;
    text-transform: uppercase;
    letter-spacing: -.005em;
}

/* Révélation au survol : la rubrique se déplie (grid 0fr → 1fr). */
.eqp-card__reveal {
    display: grid;
    grid-template-rows: 0fr 0fr 0fr;
    /* trois rangées (label + phrase + signe astro), repliées */
    opacity: 0;
    transition: grid-template-rows .4s var(--ease-out), opacity .3s var(--ease-out);
}

.eqp-card__reveal > * {
    min-height: 0;
    overflow: hidden;
}

.eqp-card:hover .eqp-card__reveal,
.eqp-card:focus-within .eqp-card__reveal {
    grid-template-rows: 1fr 1fr 1fr;
    opacity: 1;
}

.eqp-card__label {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    opacity: .6;
}

.eqp-card__imm {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.eqp-card__tags {
    margin: 4px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

@media (hover: none) {

    /* Tactile : pas de survol, la rubrique reste visible. */
    .eqp-card__reveal {
        grid-template-rows: 1fr 1fr;
        opacity: 1;
    }

    .eqp-card__photo--alt {
        opacity: 0;
    }
}

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

@media (max-width: 600px) {
    .eqp-cards__grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════ Page 404 ═══════════════
   Hero split crème (composant contact) : code géant en acumin au-dessus du
   message, Raph perplexe à droite. */
/* Cards blanches inclinées autour de la tête de Raph (même dispositif que
   la section transparence de la philosophie). */
@media (min-width: 901px) {
    .nf-hero {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        min-height: 100vh;
    }
}

/* plein écran, pas de footer */
/* section coupée en deux (desktop) */
.nf-hero .ctc-hero__visual {
    position: relative;
}

.nf-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    inset: 0;
}

.nf-card {
    position: absolute;
    width: min(46%, 280px);
    background: #ffffff;
    color: var(--dark);
    border-radius: var(--radius-card);
    padding: clamp(14px, 1.6vw, 22px);
    box-shadow: 0 14px 34px rgba(0, 30, 15, .16);
    transition: transform .3s var(--ease-out);
}

.nf-card:nth-child(1) {
    top: 10%;
    left: 5%;
    transform: rotate(-7deg);
}

.nf-card:nth-child(2) {
    bottom: 9%;
    left: 8%;
    transform: rotate(4deg);
}

.nf-card:nth-child(3) {
    top: 44%;
    right: 4%;
    transform: rotate(6deg);
}

.nf-card:hover {
    transform: rotate(0) scale(1.03);
    z-index: 1;
}

.nf-card__title {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: var(--text-lg);
    line-height: 1;
    text-transform: uppercase;
}

.nf-card__p {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.55;
}

@media (max-width: 900px) {
    .nf-hero .ctc-hero__visual {
        display: grid;
        aspect-ratio: auto;
    }

    .nf-hero .ctc-hero__visual img {
        position: static;
        aspect-ratio: 4 / 3;
    }

    .nf-cards {
        position: static;
        display: grid;
        gap: 10px;
        padding: var(--section-px);
    }

    .nf-card {
        position: static;
        width: auto;
        transform: none;
    }

    .nf-card:hover {
        transform: none;
    }
}

.nf-hero .ctc-hero__title {
    max-width: 14ch;
}

.nf-hero .ctc-hero__hours a {
    color: inherit;
    font-weight: 700;
}

.nf-hero .brand-mark {
    color: var(--dark);
}

/* Teinte caméléon des sections « Pourquoi un caméléon » : gagne sur la
   règle .xp-section[data-bg] (spécificité), sinon le survol ne teinte pas. */
.xp-section.xp-section--totem[data-bg] {
    background: var(--philo-bg, var(--ink));
}

/* Hub réalisations : cards dont la page n'existe pas encore (demande
   Antoine 2026-09-04, pour visualiser ce qui manque). Badge rose « À faire »
   sur le visuel, photo légèrement désaturée. À retirer card par card quand
   la page est livrée (classe .hub-card--todo + span .hub-card__todo). */

/* Lecteur YouTube dans une figure film (NOVIAcare) : même cadre 16/9 que les vidéos locales. */
.real-study__item--film iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Bento : unité / signe accolé au chiffre (ex. « 80+ » Vert Marine). */
.real-study__bento-unit {
    font-size: .55em;
    vertical-align: .35em;
}

/* ═══════════════ Pages légales (mentions, confidentialité, CGV) — 2026-09-15 ═══════════════
   Page éditoriale sobre sur crème : colonne de lecture, titres display, corps Bricolage. */
.legal {
    background: #F2EBD9;
    color: var(--dark);
    padding: calc(var(--header-h) + clamp(16px, 3vh, 40px)) var(--section-px) clamp(64px, 10vh, 120px);
}

.legal__inner {
    max-width: 76ch;
    margin-inline: auto;
}

.legal__eyebrow {
    margin: 0 0 12px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    opacity: .65;
}

.legal__title {
    margin: 0 0 clamp(20px, 3vh, 32px);
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: clamp(36px, 5vw, 80px);
    line-height: .95;
    text-transform: uppercase;
    letter-spacing: -.005em;
}

.legal__intro {
    margin: 0 0 clamp(24px, 3.6vh, 40px);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--text-base);
    line-height: 1.6;
}

.legal h2 {
    margin: clamp(30px, 4.5vh, 48px) 0 12px;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "wght"800, "wdth"50;
    font-size: clamp(22px, 2vw, 32px);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -.005em;
}

.legal p,
.legal li {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.65;
}

.legal p {
    margin: 0 0 12px;
}

.legal ul {
    margin: 0 0 12px;
    padding-left: 1.2em;
    display: grid;
    gap: 6px;
}

.legal a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal a:hover {
    color: var(--accent-pink);
}

.legal strong {
    font-weight: 700;
}

/* ═══════════════ Page IA & création augmentée (2026-09-15) — ajustements de composants existants ═══════════════ */
/* Section .ia réutilisée avec une photo à la place de la vidéo. */
.ia__video img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Texte à gauche, visuel à droite (page IA, Antoine 2026-09-15). */
.ia__split--reverse {
    grid-template-columns: 1fr 1fr;
}

/* 50/50 : plus de place à la photo (Antoine 2026-09-15) */
.ia__split--reverse .ia__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* pictos sur deux lignes */
.ia__split--reverse .ia__video {
    order: 2;
}

@media (max-width: 900px) {
    .ia__split--reverse {
        grid-template-columns: 1fr;
    }

    .ia__split--reverse .ia__video {
        order: 0;
    }
}

/* empilé : visuel d'abord (il porte la marge de section), texte ensuite — sinon le texte collait au haut de la section */
/* Section « usages » : slider sur le composant des citations (un panneau à la fois),
   sur fond sombre — panneau crème, photo de l'expert à gauche, texte à droite. */
.pricing-slider--free {
    height: auto !important;
}

.pricing-slider--free .pricing-slider__pin {
    position: static;
    height: auto;
    padding: var(--section-py) 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(22px, 3.4vh, 40px);
}

.pricing-slider--free .pricing-slider__head {
    padding: 0 var(--section-px);
    justify-content: center;
    text-align: center;
}

/* en-tête au centre de la section, indépendant de la colonne d'onglets (Antoine 2026-09-15) */
.pricing-slider--free .pricing-slider__hint--lg {
    margin-inline: auto;
}

.pricing-slider__hint--lg {
    font-size: var(--text-base);
    max-width: 72ch;
    line-height: 1.6;
    opacity: .85;
}

/* v3 (Antoine 2026-09-15) : onglets en colonne collante à gauche, panneau à droite, en-tête centré. */
.pricing-slider--free .pricing-slider__headline {
    justify-items: center;
    text-align: center;
}

.pricing-slider--free .pricing-title {
    text-wrap: balance;
}

.pricing-slider__hint--lg {
    margin-inline: auto;
}

.citations--usages {
    max-width: 1600px;
    /* padding latéral (--section-px) compris : le bloc occupe la largeur de section jusqu'à 1370 px de contenu, plus de marges mortes en grand écran (Antoine 2026-09-15) */
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(20px, 2.4vw, 40px);
}

.citations--usages .citations__dots--tabs {
    position: sticky;
    top: calc(90px + 24px);
    /* barre repliée + marge */
    flex-direction: column;
    align-items: flex-start;
    /* onglets en tags alignés à gauche, largeur au contenu (Antoine 2026-09-15) */
    gap: 8px;
    padding: 0;
}

.citations--usages .citations__dot--label {
    text-align: left;
    width: auto;
}

.citations--usages .citations__stage {
    width: 100%;
}

.citations--usages .citations__track {
    width: 100%;
}

@media (max-width: 1100px) {

    /* sous 1100 px la colonne d'onglets écrasait le panneau (texte à 244 px en 1024) : onglets au-dessus */
    .citations--usages {
        grid-template-columns: 1fr;
    }

    .citations--usages .citations__dots--tabs {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .citations--usages .citations__dot--label {
        width: auto;
    }
}

.citation.usage {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: stretch;
    text-align: left;
    gap: 0;
    padding: 0;
    background: var(--ink);
    color: var(--dark);
}

.usage__photo {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    object-position: center 20%;
}

.usage__body {
    padding: clamp(24px, 3vw, 44px) clamp(24px, 3.2vw, 48px);
    display: grid;
    gap: 12px;
    align-content: start;
}

.usage__kicker {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    opacity: .6;
}

.usage__title {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-weight: 800;
    font-variation-settings: "slnt"0, "wdth"50, "wght"800;
    font-size: clamp(24px, 2.3vw, 38px);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -.005em;
    text-wrap: balance;
}

.usage__p {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.6;
    text-wrap: pretty;
}

.usage__expert {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(0, 30, 15, .07);
    margin-top: 4px;
}

.usage__label {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    opacity: .7;
}

.usage__punch {
    margin: 4px 0 0;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-base);
    line-height: 1.4;
    text-wrap: balance;
}

.usage__links {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    font-weight: 700;
    opacity: .8;
}

.usage__links a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.usage__links a:hover {
    color: var(--accent-pink);
}

/* Onglets nommés à la place des points. */
.citations__dots--tabs {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 0 var(--section-px);
}

.citations__dot--label {
    width: auto;
    height: auto;
    padding: 9px 16px;
    border: 1.5px solid rgba(242, 235, 217, .45);
    border-radius: 999px;
    color: var(--ink);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}

.citations__dot--label::before {
    display: none;
}

.citations__dot--label:hover {
    border-color: var(--ink);
}

.citations__dot--label.is-active {
    background: var(--accent-pink);
    border-color: var(--accent-pink);
    color: var(--dark);
}

@media (max-width: 800px) {
    .citation.usage {
        grid-template-columns: 1fr;
    }

    .usage__photo {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
}

/* Méthode : 6 étapes en cards « caméléon » (.philo-trait), 6 en ligne puis 3 puis 2. */
.ia-steps {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ia-steps .philo-trait {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ia-steps .philo-trait__tag {
    align-self: flex-start;
}

.ia-steps .philo-trait__title {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 700;
    text-transform: none;
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.3;
    text-wrap: balance;
}

/* tout en Bricolage (Antoine 2026-09-15) */
@media (max-width: 1100px) {
    .ia-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

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

.ia-quote {
    /* En Bricolage (Antoine 2026-09-15), pas en acumin. */
    margin: clamp(32px, 5vh, 56px) auto 0;
    max-width: 52ch;
    text-align: left;
    /* aligné à gauche (Antoine) */
    margin-inline: 0;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(18px, 1.6vw, 26px);
    line-height: 1.4;
    text-wrap: balance;
}

/* Page IA : bandeau réassurance sous l'en-tête « modernité ». */
#modernite .reassurance {
    margin-top: clamp(24px, 4vh, 48px);
    padding-bottom: 0;
}

/* bandeau philo, dernier élément de la section : pas de padding bas en plus */
#modernite .xp-head--center {
    margin-bottom: 0;
}

#ia-confiance-title {
    max-width: none;
}

/* sur 2 lignes, coupe forcée avant « vigilance » (Antoine 2026-09-15) */
#ia-integree-title {
    max-width: none;
}

/* 3 lignes, coupes forcées (Antoine 2026-09-15) : la plus longue tient de 375 à 1920 px à la taille standard */
@media (max-width: 700px) {

    #ia-integree-title br,
    #modernite .xp-head--center .xp-title br {
        display: none;
    }
}

/* mobile : retour au flux naturel */

/* ═══ Check-up livraison 2026-09-15 : cibles tactiles et lisibilité ═══ */
/* Bouton « i » Trustindex : zone de clic élargie à 28 px sans changer le dessin. */
.ti-badge__i {
    position: relative;
}

.ti-badge__i::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
}

/* Liens inline et liens de pied de page : 24 px de hauteur de cible sur tactile (WCAG 2.5.8),
   via un padding vertical qui n'affecte pas la mise en page des inline. */
@media (max-width: 900px),
(pointer: coarse) {

    .site-footer__link,
    .site-footer__link--small,
    p a,
    li a,
    .taniere__value,
    .ctc-card__value,
    .usage__links a,
    .legal a {
        padding-block: 5px;
    }

    .jungle__summary {
        min-height: 32px;
    }

    .site-footer__copy {
        font-size: 12px;
    }

    .site-footer__bar { flex-direction: column; align-items: flex-start; gap: 10px; }
    .site-footer__sep { display: none; }
    .site-footer__nap { text-align: left; }
}

/* Pages réalisation : la grille étude ne doit jamais être élargie par le contenu (bento de chiffres
   à 2 colonnes = min-content > 375 px sur Oxelo et WC Loc Google Ads → colonnes à minmax(0, 1fr)). */
@media (max-width: 1024px) {
    .real-study__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .real-study__info,
    .real-study__media {
        min-width: 0;
    }
}

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

    .real-study__bento-eyebrow,
    .real-study__bento-sub {
        overflow-wrap: anywhere;
    }
}

/* ═══ Retours Raph / Mélanie / Thibault (2026-09-16) — mobile & module avis ═══ */
/* Menu latéral (timeline) : caché jusqu'à la tablette portrait, il chevauchait les cards (1024×1336). */
@media (max-width: 1100px) {
    .scroll-timeline {
        display: none;
    }
}

/* Mobile : barre d'en-tête opaque crème, logo et burger vert profond du haut de page au footer. */
@media (max-width: 900px) {

    .site-header,
    .site-header.is-over-hero,
    .site-header.is-blended {
        background: var(--ink);
        color: var(--dark) !important;
    }

    body.menu-open .site-header {
        background: transparent;
        color: var(--ink) !important;
    }

    /* Hero home : hiérarchie mobile, CTA pleine largeur. */
    .hero__cta {
        flex-direction: column;
        align-items: stretch;
        max-width: none;
    }

    .hero__cta .cta-pill {
        width: 100%;
        justify-content: center;
    }

    /* Section réalisations : une card entière à la fois, coins arrondis visibles. */
    .realisations__card {
        width: calc(100vw - 2 * var(--section-px));
    }

    /* Tanière : une info par ligne, pleine largeur, carte moins haute. */
    .taniere__cell {
        width: 100%;
    }

    .taniere__map {
        min-height: 34vh;
    }

    /* FAQ : questions plus lisibles. */
    .faq__question {
        font-size: 20px;
    }
}

/* Titres de section : planchers mobiles (Raph : « Hn trop petits »). */
@media (max-width: 700px) {
    .hero__title {
        font-size: clamp(34px, 9.6vw, 44px);
    }

    .xp-title,
    .pricing-title,
    .avis__title,
    .faq__title,
    .equipe__title,
    .taniere__title,
    .pourquoi__title,
    .realisations__title,
    .ia__title,
    .jungle__title,
    .typologies__title,
    .contact__title,
    .xp-final__title,
    .eqp-cards__title,
    .eqp-motto__title,
    .philo-circle__title,
    .philo-hero__title,
    .ctc-hero__title,
    .rec-hero__title,
    .hub-hero__title,
    .real-study__quote {
        font-size: clamp(28px, 8vw, 38px);
    }

    .xp-head--center .xp-title {
        font-size: clamp(28px, 8vw, 38px);
    }

    .xp-lead,
    .hero__lede,
    .pricing-lead,
    .avis__lead {
        font-size: 16px;
    }
}

/* Module avis : badge Google / Trustindex en premier et plus grand, puis les citations, puis le CTA. */
.citations .ti-badge--avis {
    order: -1;
    margin-top: 0;
}

.citations .ti-badge--avis .ti-badge__g {
    width: 44px;
    height: 44px;
}

.citations .ti-badge--avis .ti-badge__title {
    font-size: clamp(15px, 1.2vw, 19px);
}

.citations .ti-badge--avis .ti-badge__score {
    font-size: 16px;
}

.citations .ti-badge--avis .ti-badge__stars svg {
    width: 16px;
    height: 16px;
}

.citations__more {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 22px;
}

.citations__more-link {
    color: inherit;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: .85;
}

.citations__more-link:hover {
    opacity: 1;
}

/* Philosophie : badge sous les pastilles de « trois mots » (fond rose → badge en vert profond). */
.philo-circle__badge {
    display: flex;
    justify-content: center;
    margin: 0 0 clamp(28px, 4vh, 48px);
}

.philo-circle__badge .ti-badge--avis {
    margin-top: 0;
}

.philo-circle__badge .ti-badge {
    color: var(--dark);
}

.philo-circle__badge .ti-badge__i {
    border-color: rgba(0, 30, 15, .6);
    color: var(--dark);
}

/* Équipe : prénom + nom sur une ligne, devise sur une ligne avec espaces fines. */
.eqp-card__name {
    white-space: nowrap;
}

.eqp-motto__title {
    max-width: none;
    font-size: clamp(28px, 4vw, 62px);
    white-space: nowrap;
}

@media (max-width: 700px) {
    .eqp-motto__title {
        white-space: normal;
    }

    .eqp-card__name {
        white-space: normal;
    }
}

/* Mobile : flèches du carrousel réalisations par-dessus la card, la card occupe toute la largeur (retour Raph 2026-09-16). */
@media (max-width: 768px) {
    .realisations__carousel {
        display: block;
        position: relative;
    }

    .realisations__track {
        width: 100%;
    }

    .realisations__card {
        width: 100%;
    }

    .realisations__nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        box-shadow: 0 4px 14px rgba(0, 30, 15, .25);
    }

    .realisations__nav--prev {
        left: 10px;
    }

    .realisations__nav--next {
        right: 10px;
    }
}

@media (max-width: 700px) {
    .hero--split .hero__title {
        font-size: clamp(32px, 8.6vw, 40px);
    }

    /* pages expertise + IA : 24 px était trop petit */
}

/* ═══ Tarifs V7 (maquette Mélanie + notes Raph, 2026-09-16) ═══ */
.pricing-hero__lead {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-base);
    line-height: 1.55;
    max-width: 60ch;
}

.pricing-eyebrow {
    margin: 0 0 6px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0;
    opacity: .7;
}

/* Hero : deux cards de tarif horaire, l'annuel mis en avant (vert profond), le ponctuel en blanc. */
.pricing-modes {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(12px, 1.4vw, 20px);
    width: 100%;
}

.pricing-mode {
    margin: 0;
    background: #ffffff;
    color: var(--dark);
    border-radius: var(--radius-card);
    padding: clamp(18px, 2vw, 28px) clamp(18px, 2.2vw, 30px);
    display: grid;
    gap: 8px;
    align-content: start;
}

.pricing-mode--annual {
    background: var(--dark);
    color: var(--ink);
}

.pricing-mode--annual .pricing-rule__rank {
    background: var(--accent-pink);
    color: var(--dark);
}

.pricing-mode__label {
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    opacity: .85;
}

.pricing-mode__label .pricing-rule__rank {
    width: 22px;
    height: 22px;
    font-size: 12px;
}

.pricing-mode__price {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: clamp(34px, 3.4vw, 60px);
    line-height: 1;
}

.pricing-mode--annual .pricing-mode__price {
    font-size: clamp(40px, 4vw, 72px);
}

.pricing-mode__price .pricing-rule__unit {
    font-size: .38em;
    font-weight: 700;
    opacity: .8;
}

.pricing-mode__name {
    margin: 2px 0 0;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-base);
}

.pricing-mode__desc {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.5;
    opacity: .88;
}

.pricing-mode__plus {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-sm);
}

@media (max-width: 600px) {
    .pricing-modes {
        grid-template-columns: 1fr;
    }
}

/* Repères : cards détaillées (offre, liste, deux prix). Description 17 px, prix 23 px minimum (Raph). */
.pricing-needs--v7 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

.pricing-needs--v7 .pricing-need {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pricing-need__offer {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-sm);
    opacity: .72;
}

/* couleurs charte uniquement */
.pricing-needs--v7 .pricing-need__desc {
    font-size: 17px;
    line-height: 1.5;
}

.pricing-need__list {
    margin: 0;
    padding-left: 18px;
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 1.45;
    opacity: .9;
    display: grid;
    gap: 4px;
}

.pricing-need__list li::marker {
    color: var(--accent-pink);
}

.pricing-need__prices {
    margin-top: auto;
    padding-top: 10px;
    display: grid;
    gap: 6px;
}

.pricing-need__from {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    opacity: .7;
}

.pricing-need__row {
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    padding: 8px 0;
    border-top: 1px solid rgba(0, 30, 15, .12);
}

.pricing-need__row strong {
    font-weight: 800;
    font-size: 23px;
    line-height: 1;
    white-space: nowrap;
}

.pricing-need__row--annual strong {
    background: var(--accent-pink);
    color: var(--dark);
    border-radius: 999px;
    padding: 4px 10px;
}

/* tarif annuel mis en avant en rose charte */
.pricing-need__tax {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    opacity: .65;
    text-align: right;
}

.pricing-need__secondary {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.45;
    opacity: .75;
}

.pricing-need--featured {
    outline: 2px solid var(--accent-pink);
    outline-offset: -2px;
}

@media (max-width: 1000px) {
    .pricing-needs--v7 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .pricing-needs--v7 {
        grid-template-columns: 1fr;
    }
}

/* CTA « votre projet » sur fond vert profond. */
.pricing-projectcta {
    margin-top: clamp(20px, 3vh, 32px);
    background: rgba(0, 30, 15, .07);
    color: var(--dark);
    /* card translucide + picto info (Antoine 2026-09-16) */
    border-radius: var(--radius-card);
    padding: clamp(22px, 2.6vw, 34px) clamp(22px, 3vw, 40px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 3vw, 40px);
    flex-wrap: wrap;
}

.pricing-projectcta p {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-base);
    line-height: 1.5;
    max-width: 62ch;
}

.pricing-projectcta .cta-pill {
    flex: 0 0 auto;
}

/* Détail : en-tête de colonnes dans chaque card. */
.pricing-card__head {
    margin: 0 0 6px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    opacity: .6;
    border-bottom: 1px solid rgba(242, 235, 217, .25);
    padding-bottom: 6px;
}

.pricing-card__row small {
    display: block;
    font-weight: 400;
    opacity: .7;
    font-size: 12px;
    line-height: 1.35;
    margin-top: 2px;
}

.pricing-projectcta__i {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 2px solid var(--dark);
    border-radius: 50%;
    font: italic 700 17px/1 Georgia, "Times New Roman", serif;
    color: var(--dark);
}

.pricing-projectcta p {
    flex: 1 1 320px;
}

/* Section épinglée : si le contenu dépasse la hauteur d'écran, on cale en haut (le titre restait coupé, Antoine 2026-09-16). */
.pricing-slider__pin {
    justify-content: safe center;
}

/* Cards du détail à la hauteur de leur contenu, alignées en haut (Antoine 2026-09-16 : « plus de vide que de tarifs »). */
.pricing-slider__track {
    align-items: flex-start;
}

.pricing-card {
    height: auto;
    min-height: 0;
    align-self: flex-start;
}

.pricing-card__list {
    margin-top: 0;
}

/* CTA « Découvrez nos autres avis » : texte vert profond sur le remplissage crème au survol (Antoine 2026-09-16). */
.citations__more .cta-pill:hover,
.citations__more .cta-pill:focus-visible {
    color: var(--dark);
    border-color: var(--ink);
}

/* Détail tarifs : plus d'air en haut et sur les côtés (Antoine 2026-09-16). */
.pricing-slider__pin {
    padding: clamp(40px, 6vh, 72px) 0;
}

.pricing-slider__head,
.pricing-slider__track {
    padding-inline: calc(var(--section-px) + clamp(16px, 2vw, 40px));
}

/* Interrupteur ponctuel / annuel sous le paragraphe, aligné à gauche (Antoine 2026-09-16). */
.pricing-slider[data-pricing-slider] .pricing-slider__head {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: clamp(14px, 2vh, 22px);
}

/* Détail tarifs : encore plus d'air en haut et à gauche (Antoine 2026-09-16, 2e passe). */
.pricing-slider__pin {
    padding: clamp(64px, 10vh, 120px) 0;
    justify-content: flex-start;
}

.pricing-slider__head,
.pricing-slider__track {
    padding-inline: calc(var(--section-px) + clamp(40px, 4vw, 80px));
}

/* Écrans peu hauts (portables 768 px) : la card Digital dépassait la hauteur épinglée → padding réduit, sous-titres des lignes masqués. */
@media (max-height: 820px) {
    .pricing-slider__pin {
        padding: clamp(32px, 5vh, 56px) 0;
    }

    .pricing-card__row small {
        display: none;
    }

    .pricing-card {
        padding-block: 16px;
    }
}

/* Pas de lignes séparatrices dans les cards tarifs (Antoine 2026-09-16). */
.pricing-card__row,
.pricing-card__row + .pricing-card__row,
.pricing-card__head,
.pricing-need__row {
    border: 0;
}

.pricing-card__row {
    padding-block: 5px;
}

/* Ligne fine et discrète entre les prestations, espacement resserré (Antoine 2026-09-16). */
.pricing-card__row + .pricing-card__row {
    border-top: 1px solid rgba(0, 30, 15, .1);
}

.pricing-card__row {
    padding-block: 4px;
}

.pricing-card__list {
    gap: 0;
}

/* Cards du détail : même hauteur pour toutes, CTA calé en bas, « Voir plus » au-delà de 5 prestations (Antoine 2026-09-16). */
.pricing-slider__track {
    align-items: stretch;
}

.pricing-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: stretch;
    height: auto;
}

.pricing-card__more {
    margin-top: auto;
}

.pricing-card__list--collapsed:not(.is-open) .pricing-card__row:nth-child(n + 6) {
    display: none;
}

.pricing-card__toggle {
    appearance: none;
    align-self: flex-start;
    margin: 0;
    padding: 4px 0;
    border: 0;
    background: none;
    color: inherit;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.pricing-card__toggle:hover,
.pricing-card__toggle:focus-visible {
    color: var(--accent-pink);
    outline: none;
}

/* Tarifs, responsive (2026-09-16) : sous 700 px, marges latérales standard, interrupteur compact ; repères en 2 colonnes jusqu à 1100 px. */
@media (max-width: 1100px) {
    .pricing-needs--v7 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {

    .pricing-slider__head,
    .pricing-slider__track {
        padding-inline: var(--section-px);
    }

    .pricing-slider__pin {
        padding: clamp(32px, 6vh, 56px) 0;
    }

    .pricing-toggle--lg {
        font-size: var(--text-sm);
        max-width: 100%;
    }

    .pricing-toggle--lg .pricing-toggle__opt {
        padding: 10px 14px;
    }
}

@media (max-width: 640px) {
    .pricing-needs--v7 {
        grid-template-columns: 1fr;
    }
}

/* prime sur la règle 1100 px ci-dessus */

/* ═══ Brief Mélanie (2026-09-18) — pages réalisation ═══ */
/* Portraits deux par deux sans recadrage excessif : la tuile prend le ratio du portrait (Chaussexpo 2/3, Imperator 3/4). */
.real-study__duo--portrait .real-study__item {
    aspect-ratio: var(--duo-ratio, 2 / 3);
}

.real-study__duo--portrait .real-study__item img {
    object-position: center top;
}

/* Chiffre clé en toutes lettres (« 1er prix », « Paris-Bercy ») : corps réduit, une seule ligne, plus de chevauchement avec le texte du dessous. */
.real-study__bento-num--long {
    font-size: clamp(34px, 3.6vw, 72px);
    line-height: 1;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .real-study__bento-num--long {
        font-size: clamp(26px, 7.4vw, 40px);
    }
}

/* Trio (Rémory, Groupama) : une tuile par ligne sur mobile, pas de tuile orpheline dans une grille à 2 colonnes. */
@media (max-width: 560px) {
    .real-study__bento.real-study__bento--trio {
        grid-template-columns: minmax(0, 1fr);
    }

    .real-study__bento--trio .real-study__bento-stat {
        min-height: 0;
    }
}

/* ── Retours Antoine 2026-09-18 (soir) ─────────────────────────────────────────────
   Photo de hero en <img> derrière le K (pages dont le sujet est à droite) : le cadre est presque carré à 1440 px,
   l'ancien <image> du svg, calé à gauche, coupait toute la moitié droite. Point focal = object-position en ligne. */
.real-hero__visual .real-hero__photo {
    object-position: 50% 50%;
}

/* Visuel d'étude recadré (ex. sacs à pain Groupama) : ratio et point focal pilotés par variables. */
.real-study__item--crop {
    aspect-ratio: var(--crop-ratio, 4 / 3);
}

.real-study__item--crop img {
    height: 100%;
    object-fit: cover;
    object-position: var(--crop-pos, 50% 50%);
}

/* Vidéo YouTube en façade : vignette + bouton lecture, le lecteur ne se charge qu'au clic (script.js). */
.yt-lite {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--dark);
}

.yt-lite img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s var(--ease-out);
}

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

.yt-lite:focus-visible {
    outline: 3px solid var(--accent-pink);
    outline-offset: -3px;
}

.yt-lite__play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(64px, 7vw, 96px);
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: var(--ink);
    transition: background-color .2s var(--ease-out), transform .2s var(--ease-out);
}

.yt-lite__play::before {
    content: "";
    position: absolute;
    left: 54%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: .85em 0 .85em 1.4em;
    border-color: transparent transparent transparent currentColor;
    font-size: clamp(14px, 1.4vw, 20px);
}

.yt-lite:hover .yt-lite__play,
.yt-lite:focus-visible .yt-lite__play {
    background: var(--accent-pink);
    transform: translate(-50%, -50%) scale(1.06);
}

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

    .yt-lite img,
    .yt-lite__play {
        transition: none;
    }
}

/* ═══ Retours mobile Antoine (2026-09-19, iPhone 17 Pro 402×874, Chrome iOS = WebKit) ═══ */
/* 1. Photos / GIF invisibles sur iPhone : WebKit n'applique pas `aspect-ratio` à un élément de grille étiré dont le
   contenu est en absolu (hauteur calculée = 0). On ne dépend plus d'aspect-ratio : alignement en haut + cale en
   padding-top (ratio garanti partout, identique dans Chrome). */
@media (max-width: 900px) {

    .tarifs__media,
    .pricing-hero__visual .tarifs__media,
    .ctc-hero__visual,
    .real-hero__visual,
    .real-hero__visual--eye,
    .philo-clair__visual,
    .philo-hero__visual,
    .philo-totem__media {
        align-self: start;
        width: 100%;
        height: auto;
    }

    .tarifs__media::before,
    .ctc-hero__visual::before,
    .real-hero__visual::before,
    .philo-clair__visual::before,
    .philo-hero__visual::before,
    .philo-totem__media::before {
        content: "";
        display: block;
        width: 100%;
        padding-top: 75%;
        pointer-events: none;
    }

    .tarifs__media::before {
        padding-top: 62.5%;
    }

    .nf-hero .ctc-hero__visual::before {
        content: none;
    }
}

/* 2. Carrousel réalisations : au toucher, :hover / :focus remplaçait le translateY(-50 %) par un scale → la flèche sautait. */
@media (max-width: 768px) {

    .realisations__nav:hover,
    .realisations__nav:focus-visible,
    .realisations__nav:active {
        transform: translateY(-50%);
    }
}

/* 3. En-tête mobile : logo calé sur la marge du contenu (et du menu), burger calé à droite sur la même marge. */
@media (max-width: 900px) {
    .site-header {
        padding-left: var(--section-px);
        padding-right: calc(var(--section-px) - 11px);
    }

    .mobile-menu__inner {
        padding-top: calc(var(--header-h, 73px) + 20px);
    }

    /* Pages expertise + IA : le visuel du hero commençait sous la barre crème. */
    .hero--split .hero__visual {
        margin-top: var(--header-h, 73px);
    }
}

/* 4. Section IA (home) : vidéo alignée sur les marges du texte ; cards « + ambitieux… » sans débordement. */
@media (max-width: 900px) {
    .ia__video {
        width: calc(100% - 2 * var(--section-px));
        align-self: start;
    }

    .ia__col-text {
        padding-inline: var(--section-px);
    }

    /* même marge que le reste du site : texte et vidéo alignés */
    /* Page IA : la photo occupe toute la largeur, plus de jaune autour. */
    .ia__split--reverse .ia__video {
        width: 100%;
        margin-block: 0;
        aspect-ratio: 4 / 5;
    }

    .ia__split--reverse .ia__video::before {
        content: "";
        display: block;
        padding-top: 125%;
    }
}

@media (max-width: 700px) {
    .ia__stat {
        padding: 12px;
    }

    .ia__stat-sub {
        letter-spacing: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.25;
    }

    .ia__stat-big {
        overflow-wrap: anywhere;
    }
}

/* 5. Pages réalisation : visuels avec la même marge à gauche qu'à droite. */
@media (max-width: 1024px) {
    .real-study__media {
        margin-left: calc(clamp(12px, 1.6vw, 28px) - var(--section-px));
    }
}

/* 6. Infobulle Trustindex : sur mobile elle s'ouvre sur toute la largeur du badge (elle sortait de l'écran). */
@media (max-width: 700px) {
    .ti-badge {
        position: relative;
    }

    .ti-badge > .ti-badge__body .ti-badge__info:not(.citation__info),
    .ti-badge .ti-badge__info:not(.citation__info) {
        position: static;
    }

    .ti-badge .ti-badge__info:not(.citation__info) .ti-badge__tip {
        left: 0;
        right: 0;
        width: auto;
    }

    .ti-badge .ti-badge__info:not(.citation__info) .ti-badge__tip::after {
        display: none;
    }
}

/* 7. Tarifs : plus de contour rose sur la card « Site vitrine » (mobile et desktop). */
.pricing-need--featured {
    outline: 0;
}

/* 8. « Kamélécom en trois mots » : sur mobile les trois cards se lisent à la suite, sans mise en avant tournante. */
@media (max-width: 900px) {

    .philo-circle .philo-circle__cards .philo-card,
    .philo-circle .philo-circle__cards:has(.philo-card.is-active) .philo-card:not(.is-active) {
        opacity: 1;
        transform: none;
        background: #ffffff;
    }

    .philo-circle .philo-rotator {
        display: none;
    }
}

/* 9. Home, « Une jungle d'expertises… » : deux lignes (une par proposition), sur mobile comme sur desktop. */
.jungle__title {
    max-width: none;
}

.jungle__title .jungle__line {
    display: block;
    white-space: nowrap;
}

@media (min-width: 901px) {
    .jungle__title {
        font-size: clamp(34px, 3.7vw, 64px);
    }
}

/* 10. Chiffres clés des réalisations : le nombre reste dans la tuile sur les petits écrans (2 tuiles par ligne). */
@media (max-width: 560px) {
    .real-study__bento:not(.real-study__bento--trio) .real-study__bento-num:not(.real-study__bento-num--long) {
        font-size: clamp(28px, 9.4vw, 40px);
    }
}

/* Formulaire de contact : message de retour sous le bouton (couleurs charte, pas de vert / rouge navigateur). */
#formResponse:empty {
    display: none;
}

#formResponse.is-success,
#formResponse.is-error {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 700;
    opacity: 1;
    color: var(--dark);
}

#formResponse.is-success {
    background: var(--accent-yellow);
}

#formResponse.is-error {
    background: var(--accent-peach);
}

/* ═══ Retours Thibault (2026-09-21) ═══ */
/* 1. Bandeau de réassurance vert profond après le premier écran (home, agence, philosophie) : texte d'intro centré,
   puis les 5 preuves SANS pastille (picto au-dessus, chiffre, libellé), centrées. */
.reassurance--band {
    background: var(--dark);
    color: var(--ink);
    padding: clamp(56px, 9vh, 104px) var(--section-px);
}

.reassurance--band .reassurance__inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    justify-items: center;
    gap: clamp(32px, 5.5vh, 64px);
}

.reassurance__lede {
    margin: 0;
    max-width: 78ch;
    text-align: center;
    font-family: var(--font-mono);
    font-size: clamp(16px, 1.25vw, 20px);
    line-height: 1.6;
    color: inherit;
}

.reassurance--band .reassurance__track {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(28px, 4vh, 40px) clamp(16px, 2vw, 32px);
    width: 100%;
    max-width: none;
}

.reassurance--band .reassurance__cell {
    flex: 0 1 calc((100% - 4 * clamp(16px, 2vw, 32px)) / 5);
    min-width: 150px;
    min-height: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    color: inherit;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-content: start;
    row-gap: 8px;
    text-align: center;
}

.reassurance--band .reassurance__eye {
    height: clamp(40px, 3.4vw, 54px);
    color: inherit;
    margin-bottom: 6px;
}

.reassurance--band .reassurance__big {
    font-size: clamp(24px, 2.2vw, 36px);
}

.reassurance--band .reassurance__sub {
    flex: none;
    font-size: clamp(14px, 1.05vw, 16px);
    opacity: .85;
}

@media (max-width: 700px) {
    .reassurance--band .reassurance__cell {
        flex-basis: calc(50% - 12px);
        min-width: 0;
    }

    .reassurance--band .reassurance__track {
        gap: 28px 24px;
    }
}

/* Premier écran : le badge Google passe juste avant les boutons, le bloc est calé en bas et la vidéo respire. */
.hero__col--right > .ti-badge {
    align-self: flex-start;
}

/* 2. Menu latéral d'ancres masqué au-dessus des carrousels de réalisations (classe posée par script.js). */
.scroll-timeline {
    transition: opacity .3s var(--ease-out), visibility 0s linear 0s;
}

.scroll-timeline.is-away {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s var(--ease-out), visibility 0s linear .3s;
}

/* 3. Footer : bouton « Nous contacter » en rose (plein), remplissage crème au survol, texte vert profond. */
.site-footer .cta-pill.site-footer__cta {
    background: var(--accent-pink);
    border-color: var(--accent-pink);
    color: var(--dark);
}

.site-footer .cta-pill.site-footer__cta::before,
.site-footer .cta-pill.site-footer__cta::after {
    background-color: var(--ink);
}

.site-footer .cta-pill.site-footer__cta:hover,
.site-footer .cta-pill.site-footer__cta:focus-visible {
    color: var(--dark);
    border-color: var(--ink);
}

/* 4. Contact : plus de colonne de coordonnées à côté du formulaire (doublon avec l'en-tête, le footer et le plan) : le formulaire ferme le bloc. */
.ctc-brief__grid {
    grid-template-columns: minmax(0, 860px);
}

/* 5. Tarifs : flèches du volet de prix (même bouton que le carrousel réalisations), à droite de l'en-tête. */
.pricing-slider__nav {
    display: flex;
    gap: 10px;
    align-items: center;
}

.pricing-slider__arrow:disabled {
    opacity: .35;
    visibility: visible;
    pointer-events: none;
}

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

/* mobile : le rail se fait glisser au doigt */
/* Une card dépliée (« Voir plus ») ne sort plus du cadre épinglé sur les écrans peu hauts : sa liste défile à l'intérieur. */
.pricing-slider:not(.is-static) .pricing-card__list.is-open {
    max-height: calc(100vh - 360px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (min-width: 901px) {

    /* En-tête du volet : titre + texte, puis l'interrupteur à gauche et les flèches à droite sur la même ligne. */
    .pricing-slider[data-pricing-slider] .pricing-slider__head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .pricing-slider[data-pricing-slider] .pricing-slider__headline {
        grid-column: 1 / -1;
    }

    .pricing-slider[data-pricing-slider] .pricing-toggle {
        justify-self: start;
    }

    .pricing-slider[data-pricing-slider] .pricing-slider__nav {
        justify-self: end;
    }
}

/* 6. Section avis : citation plus compacte (largeur et hauteur réduites), puis le vrai widget Trustindex (avis Google à jour). */
.citations__stage,
.citations__track {
    width: min(100%, 720px);
}

.citation {
    padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 32px) clamp(16px, 1.8vw, 22px);
    gap: clamp(8px, 1.2vh, 12px);
}

.citation__mark {
    width: clamp(28px, 2.4vw, 38px);
}

.citation__quote {
    font-size: clamp(15px, 1.1vw, 18px);
    max-width: 52ch;
}

.citation__name {
    font-size: clamp(15px, 1vw, 17px);
}

.avis-widget {
    width: 100%;
    max-width: 1200px;
    margin: clamp(24px, 4vh, 44px) auto 0;
}

/* 7. Philosophie, « en trois mots » : les trois cards à la même hauteur (la card active ne se soulève plus, elle passe seulement en blanc). */
.philo-circle__cards {
    align-items: stretch;
}

.philo-circle__cards .philo-card {
    height: 100%;
}

.philo-circle__cards .philo-card.is-active {
    transform: none;
}

/* 8. Mobile (retours Thibault) */
.typologies__split:last-child {
    margin-bottom: 0;
}

/* « Pour qui » : la marge basse du bloc s'ajoutait au padding de section (vide après la card Collectivités) */
@media (max-width: 900px) {

    /* Home, section tarifs : le GIF d'Antoine passe juste après le titre, aux mêmes marges que le texte. */
    .tarifs .tarifs__inner {
        display: flex;
        flex-direction: column;
        gap: clamp(20px, 3vh, 32px);
        padding: var(--section-py) var(--section-px);
    }

    .tarifs .tarifs__content {
        display: contents;
    }

    .tarifs .tarifs__title {
        order: 1;
    }

    .tarifs .tarifs__media {
        order: 2;
        width: 100%;
    }

    .tarifs .tarifs__body {
        order: 3;
    }

    .tarifs .tarifs__cta {
        order: 4;
    }

    /* Section IA : le bloc texte gardait un grand padding bas de desktop (vide en fin de section). */
    .ia__split .ia__col-text {
        padding-bottom: var(--section-py);
    }

    .ia__split {
        min-height: 0;
    }
}

/* Retouches Antoine (2026-09-21) : H1 du premier écran un peu plus grand ; bandeau de réassurance plus compact,
   pictos roses, chiffres un peu plus petits et toujours sur une ligne (« Tarifs transparents »). */
@media (min-width: 769px) {
    .hero:not(.hero--split) .hero__title {
        font-size: clamp(32px, 4.3vw, 68px);
    }
}

.reassurance--band {
    padding-block: clamp(36px, 5.5vh, 64px);
}

.reassurance--band .reassurance__inner {
    gap: clamp(22px, 3.5vh, 40px);
}

.reassurance--band .reassurance__eye {
    color: var(--accent-pink);
    height: clamp(34px, 2.8vw, 46px);
    margin-bottom: 2px;
}

.reassurance--band .reassurance__big {
    font-size: clamp(19px, 1.65vw, 27px);
    white-space: nowrap;
}

.reassurance--band .reassurance__cell {
    row-gap: 6px;
}

@media (max-width: 700px) {
    .reassurance--band .reassurance__track {
        gap: 22px 16px;
    }

    .reassurance--band .reassurance__cell {
        flex-basis: calc(50% - 8px);
    }
}

/* Section avis (Antoine 2026-09-21) : titre légèrement réduit, texte du témoignage plus petit. */
@media (min-width: 901px) {
    .avis__title {
        font-size: clamp(34px, 3.7vw, 66px);
    }
}

.citation__quote {
    font-size: clamp(14px, .95vw, 16px);
    line-height: 1.55;
}

/* Page équipe, valeurs : sur mobile et sur tout écran tactile (pas de survol), les cards portent leur couleur d'emblée (Antoine 2026-09-21). */
@media (max-width: 900px),
(hover: none) {
    .eqp-value {
        background: var(--v-accent, var(--accent-blue));
    }
}

/* Page équipe, mobile : les sections portraits et valeurs ont le même fond blanc, leurs deux paddings s'additionnaient (129 px de vide). */
@media (max-width: 900px) {
    #portraits + #valeurs {
        padding-top: clamp(8px, 2vh, 20px);
    }
}

/* Liseret entre deux sections (Antoine 2026-09-21) : les hauteurs de section ne tombent pas sur des pixels entiers, et sur
   les écrans très denses (iPhone) un filet laissait voir la vidéo fixe du hero derrière. Chaque section recouvre la
   précédente d'1 px : plus aucun jour possible. */
main > section + section,
body > section + section,
main > section + footer,
body > section + footer {
    margin-top: -1px;
}

/* Mobile : deux sections de même fond qui se suivent cumulaient leurs deux paddings (vide excessif). La seconde ne garde qu'un petit padding haut. */
@media (max-width: 900px) {

    [data-bg="#001e0f"] + [data-bg="#001e0f"],
    [data-bg="#ffffff"] + [data-bg="#ffffff"],
    [data-bg="#FFFFFF"] + [data-bg="#FFFFFF"],
    [data-bg="#F2EBD9"] + [data-bg="#F2EBD9"],
    [data-bg="#f2ebd9"] + [data-bg="#f2ebd9"] {
        padding-top: clamp(16px, 3vh, 28px);
    }
}

/* Rythme vertical mobile (Antoine 2026-09-21, « trop de vide en fin de section, vérifier partout ») : le padding de section
   suivait 10 % de la hauteur d'écran, soit 87 px en haut ET en bas sur un iPhone. On le ramène à ~57 px sur tout le site. */
@media (max-width: 900px) {
    :root {
        --section-py: clamp(44px, 6.5vh, 60px);
        --section-gap: clamp(28px, 4.5vh, 44px);
    }
}

/* ═══ Home, section expertises (Thibault 2026-09-21) : cards toujours ouvertes, un seul lien par card ═══
   Le lien est sur le titre ; son ::after couvre toute la card (cible de clic = la card entière, ancre = le titre + le
   mot-clé en .sr-only). État survol / focus : fond couleur (déjà en place) + flèche qui avance. */
.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;
}

.jungle__cards--links .jungle__cell {
    position: relative;
    cursor: pointer;
}

.jungle__cardlink {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(12px, 1.4vw, 24px);
    width: 100%;
    color: inherit;
    text-decoration: none;
}

.jungle__cardlink::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.jungle__cardlink:focus-visible {
    outline: none;
}

.jungle__cardlink:focus-visible::after {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

.jungle__cards--links .jungle__desc {
    margin-top: clamp(14px, 2vh, 22px);
}

/* La flèche pointe vers la droite (lien), plus vers le bas (accordéon ouvert), et avance au survol. */
.jungle__cards--links .jungle__cell.is-open .jungle__toggle::before {
    rotate: 120deg;
    translate: -4% 6%;
}

.jungle__cards--links .jungle__toggle {
    transition: transform .3s var(--ease-out), background-color .3s var(--ease-out), color .3s var(--ease-out);
}

.jungle__cards--links .jungle__cell:hover .jungle__toggle,
.jungle__cards--links .jungle__cardlink:focus-visible .jungle__toggle {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .jungle__cards--links .jungle__toggle {
        transition: none;
    }
}

.jungle__cards--links .jungle__cell {
    justify-content: flex-start;
    align-content: start;
}

/* titres alignés en haut d'une card à l'autre, quelle que soit la longueur du texte */
/* Section avis (Antoine 2026-09-21, 2e passe) : texte des citations encore réduit ; le libellé « Avis Google » est retiré (le G suffit). */
.citation__quote {
    font-size: clamp(13px, .85vw, 14.5px);
    line-height: 1.55;
    max-width: 56ch;
}

.citation__name {
    font-size: clamp(14px, .95vw, 16px);
}

/* Page équipe, bandeau de visages (Antoine 2026-09-21) : au survol, la photo ne change plus d'état. Le fondu posé / créative
   de la photo survolée se fige tel qu'il est (il reprend quand on sort), et il n'y a plus de zoom. */
.eqp-strip__item:hover .eqp-strip__alt,
.eqp-strip__item:focus-visible .eqp-strip__alt {
    animation-play-state: paused;
}

.eqp-strip__item:hover img,
.eqp-strip__item:focus-visible img {
    transform: none;
}

/* Citations (Antoine 2026-09-21, 3e passe) : la taille est portée par le <p> de la citation, pas par le blockquote. Les trois
   réglages précédents visaient le mauvais sélecteur et n'avaient donc aucun effet. Texte = taille du paragraphe d'intro. */
.citation__quote p {
    font-size: var(--text-base);
    line-height: 1.6;
    font-weight: 500;
    max-width: 58ch;
}

/* ═══ Audit SEO Thibault (2026-09-21) ═══ */
/* Ancres du plan de redirections 301 (studio graphique, cartes « Nos savoir-faire ») : la cible s'arrête sous l'en-tête fixe.
   120 px = valeur déjà employée pour l'ancre du hub réalisations (.hub-grid). */
.jungle__cell[id] {
    scroll-margin-top: 120px;
}

/* toutes les ancres de cards du plan de redirections (scripts/ancres-redirections.pl) */
/* Paragraphe de relais après les cartes « Quand faire appel » (pub, photo) : même style que l'intro du bloc, avec de l'air au-dessus. */
.xp-cards + .xp-lead {
    margin-top: clamp(18px, 2.6vh, 28px);
}

.xp-lead a,
.xp-card__text a,
.jungle__desc a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Bandeau de réassurance, variante claire (pages expertise, Antoine 2026-09-21) : fond blanc, texte vert profond, pictos roses. */
.reassurance--light {
    background: #ffffff;
    color: var(--dark);
}

.reassurance--light .reassurance__eye {
    color: var(--accent-pink);
}

.reassurance--light .reassurance__sub {
    opacity: .8;
}

/* Fil d'Ariane visible (Thibault 2026-09-21) : il reprend les mêmes entrées que le BreadcrumbList du JSON-LD de la page.
   Ligne discrète au-dessus du H1, dans la couleur du texte du hero. À l'essai sur la page publicité avant généralisation. */
.breadcrumb {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.4;
}

.breadcrumb__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 0;
}

.breadcrumb__item {
    display: inline-flex;
    align-items: center;
    opacity: .75;
}

.breadcrumb__item + .breadcrumb__item::before {
    content: "›";
    margin: 0 .6em;
    opacity: .7;
}

.breadcrumb__item a {
    color: inherit;
    text-decoration: none;
    padding-block: 6px;
}

.breadcrumb__item a:hover,
.breadcrumb__item a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.breadcrumb__item[aria-current="page"] {
    opacity: 1;
}

/* Mots composés des titres (savoir-faire, rendez-vous, sous-titres…) : jamais coupés au trait d'union (scripts/titres-mots-composes.pl). */
.nowrap {
    white-space: nowrap;
}

/* ═══ Retours Thibault V2 (2026-09-22) — scripts/thibault-v2-0922.pl ═══ */
/* A1. Barre d'en-tête repliée (desktop) : « Liquid Glass » façon iOS 26 (Antoine 2026-09-22, 2e itération, à la place du vert
   à 50 % de Thibault). Capsule flottante détachée des bords (insets et arrondi pilotés par --p comme le reste du header),
   verre épais : flou fort + saturation + légère surexposition, bord spéculaire fin, reflet en haut à gauche, ombre douce.
   La couleur du texte garde sa logique (vert foncé sur sections claires via .is-blended, crème sur sombres), la pastille aussi.
   Mobile : barre crème opaque inchangée (règle du 16/09). */
@media (min-width: 901px) {

    /* Pas de capsule (Antoine 2026-09-22) : barre pleine largeur. Le logo replié respire davantage : 30 % de sa largeur
     pleine au lieu de 25 % (« logo serré »), padding vertical 18 px. */
    .site-header {
        padding-top: calc(var(--pad-y) * (1 - var(--p, 0)) + 18px * var(--p, 0));
        padding-bottom: calc(var(--pad-y) * (1 - var(--p, 0)) + 18px * var(--p, 0));
    }

    .site-header .wordmark {
        width: calc((1 - var(--p, 0) * 0.70) * 100%);
    }

    .site-header.is-scrolled,
    .site-header.is-scrolled.is-over-hero,
    .site-header.is-scrolled.is-over-photo,
    .site-header.is-scrolled.is-blended {
        background:
            radial-gradient(60% 160% at 8% 0%, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 60%),
            linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .10));
        -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(1.06);
        backdrop-filter: blur(28px) saturate(190%) brightness(1.06);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .55),
            /* arête lumineuse en haut */
            0 4px 14px rgba(0, 30, 15, .07);
        /* ombre portée discrète */
    }

    .site-header.is-scrolled.is-blended {
        background:
            radial-gradient(60% 160% at 8% 0%, rgba(255, 255, 255, .65), rgba(255, 255, 255, 0) 60%),
            linear-gradient(180deg, rgba(255, 255, 255, .50), rgba(255, 255, 255, .34));
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .85),
            0 4px 14px rgba(0, 30, 15, .05);
    }

    /* Pastille Contact : un cran plus compacte, et toujours rose plein dans la barre repliée (Antoine 2026-09-22),
     quelle que soit la section ; survol = vert foncé, texte rose. */
    .site-header.is-scrolled .menu-pill,
    .site-header.is-scrolled.is-blended .menu-pill,
    .site-header.is-scrolled.is-over-hero .menu-pill,
    .site-header.is-scrolled.is-over-photo .menu-pill {
        padding-block: clamp(9px, 1vw, 12px);
        background: var(--accent-pink);
        border-color: var(--accent-pink);
        color: var(--dark);
    }

    .site-header.is-scrolled .menu-pill:hover,
    .site-header.is-scrolled .menu-pill:focus-visible,
    .site-header.is-scrolled.is-blended .menu-pill:hover,
    .site-header.is-scrolled.is-blended .menu-pill:focus-visible,
    .site-header.is-scrolled.is-over-hero .menu-pill:hover,
    .site-header.is-scrolled.is-over-hero .menu-pill:focus-visible,
    .site-header.is-scrolled.is-over-photo .menu-pill:hover,
    .site-header.is-scrolled.is-over-photo .menu-pill:focus-visible {
        background: var(--dark);
        border-color: var(--dark);
    }

    .site-header.is-scrolled .menu-pill:hover .menu-pill__label,
    .site-header.is-scrolled .menu-pill:focus-visible .menu-pill__label,
    .site-header.is-scrolled.is-blended .menu-pill:hover .menu-pill__label,
    .site-header.is-scrolled.is-blended .menu-pill:focus-visible .menu-pill__label,
    .site-header.is-scrolled.is-over-hero .menu-pill:hover .menu-pill__label,
    .site-header.is-scrolled.is-over-hero .menu-pill:focus-visible .menu-pill__label,
    .site-header.is-scrolled.is-over-photo .menu-pill:hover .menu-pill__label,
    .site-header.is-scrolled.is-over-photo .menu-pill:focus-visible .menu-pill__label {
        color: var(--accent-pink);
    }
}

/* Mobile : même verre que sur desktop (Antoine 2026-09-22), à la place de la barre crème opaque du 16/09. La barre est
   toujours repliée sur mobile, donc le verre est permanent ; logo et burger suivent la section (vert foncé sur clair,
   crème sur sombre) comme sur desktop. Volet ouvert : barre transparente sur le fond vert du menu. */
@media (max-width: 900px) {

    .site-header,
    .site-header.is-over-hero,
    .site-header.is-over-photo {
        background:
            radial-gradient(60% 160% at 8% 0%, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 60%),
            linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .10));
        -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(1.06);
        backdrop-filter: blur(28px) saturate(190%) brightness(1.06);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 4px 14px rgba(0, 30, 15, .07);
        color: var(--ink) !important;
    }

    .site-header.is-blended {
        background:
            radial-gradient(60% 160% at 8% 0%, rgba(255, 255, 255, .65), rgba(255, 255, 255, 0) 60%),
            linear-gradient(180deg, rgba(255, 255, 255, .50), rgba(255, 255, 255, .34));
        -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(1.06);
        backdrop-filter: blur(28px) saturate(190%) brightness(1.06);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 4px 14px rgba(0, 30, 15, .05);
        color: var(--dark) !important;
    }

    body.menu-open .site-header,
    body.menu-open .site-header.is-blended {
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
        color: var(--ink) !important;
    }
}

/* Badge Google du hero (home, agence, 9 expertises) : même verre « Liquid Glass » que la barre repliée (Antoine 2026-09-22). */
.hero .ti-badge:not(.ti-badge--card) {
    background:
        radial-gradient(60% 160% at 8% 0%, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .10));
    -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(1.06);
    backdrop-filter: blur(28px) saturate(190%) brightness(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .55),
        0 4px 14px rgba(0, 30, 15, .07);
}

/* A2. Avis en dur (15 pages) : card aussi large que le conteneur de section, beaucoup moins haute. Citation sur 3 lignes
   maximum (coupée au-delà), auteur + badge + G + note + étoiles sur une seule ligne à gauche, picto citation en filigrane. */
.avis {
    padding-block: clamp(36px, 5vh, 60px);
}

.avis .avis__head {
    margin-bottom: clamp(24px, 3.4vh, 36px);
}

.avis .avis-widget {
    margin-top: clamp(16px, 2.4vh, 24px);
}

.citations {
    max-width: var(--content-max);
    gap: clamp(14px, 2vh, 18px);
}

.citations__stage,
.citations__track {
    width: 100%;
}

/* Tout centré, picto citation au-dessus (Antoine 2026-09-22, contre la version alignée à gauche de Thibault). */
.citation {
    align-items: center;
    text-align: center;
    gap: clamp(8px, 1.2vh, 12px);
    padding: clamp(16px, 1.6vw, 22px) clamp(20px, 2.4vw, 32px) clamp(18px, 1.8vw, 24px);
}

.citation__mark {
    width: clamp(24px, 2vw, 30px);
}

.citation__quote {
    max-width: none;
    width: 100%;
}

.citation__quote p {
    max-width: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-wrap: pretty;
}

.citation__by {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 12px;
    padding-top: 0;
    width: 100%;
}

.citation__name,
.citation__src {
    display: inline-flex;
    flex: 0 0 auto;
}

/* A3. Pied de page : le titre de colonne « L'agence » devient un lien (même style que le <p>, rose au survol). */
a.site-footer__h {
    display: block;
    color: inherit;
    text-decoration: none;
    width: max-content;
    transition: color .3s var(--ease-out), opacity .3s var(--ease-out);
}

a.site-footer__h:hover,
a.site-footer__h:focus-visible {
    color: var(--accent-pink);
    opacity: 1;
    outline: none;
}

/* A5. Pages expertise, « Quand faire appel à … » : fond jaune (couleur du bloc tarifs de la philosophie). */
.xp-section[data-bg="#FBFBA0"] {
    background: var(--accent-yellow);
}

/* A6. Mobile, bloc tarifs des 9 expertises et de la philosophie : mêmes règles que la home (styles.css « 8. Mobile »),
   la photo passe entre le titre et le texte, plus petite, entourée de la couleur du bloc. Rien ne change sur desktop. */
@media (max-width: 900px) {
    .xp-section#tarifs > .xp-inner.xp-split {
        display: flex;
        flex-direction: column;
        gap: clamp(20px, 3vh, 32px);
        padding: var(--section-py) var(--section-px);
    }

    .xp-section#tarifs .xp-split__text {
        display: contents;
    }

    .xp-section#tarifs .xp-split__text .xp-title {
        order: 1;
        margin-bottom: 0;
    }

    .xp-section#tarifs .tarifs__media {
        order: 2;
        width: 100%;
        height: auto;
    }

    .xp-section#tarifs .xp-split__text .xp-p {
        order: 3;
    }

    .xp-section#tarifs .xp-split__text .xp-cta {
        order: 4;
    }

    .philo-clair--photo-split > .philo-clair__inner.philo-clair__split {
        display: flex;
        flex-direction: column;
        gap: clamp(20px, 3vh, 32px);
        padding: var(--section-py) var(--section-px);
    }

    .philo-clair--photo-split .philo-clair__body {
        display: contents;
    }

    .philo-clair--photo-split .philo-clair__title {
        order: 1;
        margin-bottom: 0;
    }

    .philo-clair--photo-split .philo-clair__visual {
        order: 2;
        width: 100%;
    }

    .philo-clair--photo-split .philo-clair__p {
        order: 3;
        margin: 0;
    }

    .philo-clair--photo-split .philo-clair__cta {
        order: 4;
    }
}

/* B1d. Vidéo dont la lecture automatique est refusée (iOS) : le poster reste affiché proprement. */
video.is-fallback {
    object-fit: cover;
}

/* B2b. Home, cards expertises : sans survol (écran tactile), la card porte d'emblée sa couleur de survol. */
@media (pointer: coarse) {
    .jungle__cards--links .jungle__cell {
        background: var(--cell-accent, var(--accent-pink));
    }
}

/* E1. Page équipe, « Nos valeurs » : fond jaune (la 3e card, d'accent jaune, passe en blanc : --v-accent posé dans le HTML). */
.eqp-values[data-bg="#FBFBA0"] {
    background: var(--accent-yellow);
    color: var(--dark);
}

/* G3. Page tarifs, « Quel budget… » : fond bleu (bloc tarifs de la home) ; la card d'accent bleu passe en blanc au survol. */
.pricing-section[data-bg="#A8D0F5"] {
    background: var(--accent-blue);
}

.pricing-section[data-bg="#A8D0F5"] .pricing-need:nth-child(4n+1) {
    --need-accent: #ffffff;
}

/* ═══ Carte Google sous consentement (Raph 2026-09-22) : <div class="googlemapsembed" data-url> à la place de l'iframe
   (home #taniere, contact #acces). Tarte au citron y injecte l'iframe après accord, ou son CTA de consentement.
   Sans script (local) : lien vers Google Maps centré sur fond crème. Les attributs width/height du div sont ceux
   attendus par le service ; la hauteur réelle vient du conteneur parent (.taniere__map / .ctc-acces__map--band). */
.googlemapsembed {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: inherit;
    background: var(--ink);
    color: var(--dark);
}

.googlemapsembed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(.15) contrast(1.02);
}

.googlemapsembed__link {
    color: var(--dark);
    border-color: var(--dark);
}

.googlemapsembed__link:hover,
.googlemapsembed__link:focus-visible {
    background: var(--dark);
    color: var(--ink);
}

/*#tarteaucitronRoot,
#tarteaucitronRoot * {
    cursor: none !important;
}*/
.cursor { z-index: 2147483647 !important; }
#carrousel-expertises-page-ia{
    padding: 0!important;
}

/* ═══ Page communication digitale, bloc « Nos expertises » (Thibault 2026-09-22) : 4 cartes 2 × 2, chaque carte en deux
   colonnes (titre + texte | 4 leviers en H3), trait vertical fin ; empilé sous 600 px (coupure mobile de .jungle__cards). ═══ */
.jungle__cards--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jungle__cards--split .jungle__cell--split { display: grid; grid-template-columns: 3fr 2fr; gap: clamp(20px, 2.4vw, 40px); align-items: start; }
.jungle__cell--split .jungle__col--levers { border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent); padding-left: clamp(20px, 2.4vw, 40px); display: flex; flex-direction: column; gap: clamp(8px, .8vw, 12px); }
.jungle__cell--split .jungle__heading { font-weight: 700; margin: 0 0 clamp(10px, 1vh, 16px); }
.jungle__cell--split .jungle__desc { margin: 0; }
.jungle__lever { margin: 0; font-family: var(--font-mono); font-weight: 600; font-size: clamp(13px, .95vw, 16px); line-height: 1.35; text-align: left; text-transform: none; }
@media (max-width: 600px) {
  .jungle__cards--split { grid-template-columns: 1fr; }
  .jungle__cards--split .jungle__cell--split { grid-template-columns: 1fr; }
  .jungle__cell--split .jungle__col--levers { border-left: 0; padding-left: 0; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); padding-top: clamp(14px, 2vh, 20px); }
}

/* Titres H2 déjà dépassés au chargement : lettres affichées d'un coup, sans transition (script.js, Thibault 2026-09-23). */
.letters-instant .letter { transition: none !important; }

/* ═══ Contacts par e-mail (Thibault 2026-09-24) ═══
   1. Page contact, sous le formulaire : encart « pièce jointe » (le formulaire n'accepte pas de fichier).
   2. Footer : adresse e-mail sous le bouton « Nous contacter ».
   Les classes lien-mail-contact-page-contact / lien-mail-contact-footer servent au suivi des conversions (GTM) :
   aucun style ne s'y accroche, on peut les laisser telles quelles. */
.ctc-mailbox {
    margin: clamp(8px, 1.4vh, 16px) 0 0;
    padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 32px);
    display: grid;
    gap: 6px;
    max-width: 860px;
    border-radius: var(--radius-card);
    background: var(--dark);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--text-base);
    line-height: 1.55;
}

.ctc-mailbox__label {
    font-weight: 700;
}

.ctc-mailbox__text {
    opacity: .9;
}

.ctc-mailbox__link {
    color: var(--accent-pink);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
    transition: color .25s var(--ease-out);
}

.ctc-mailbox__link:hover,
.ctc-mailbox__link:focus-visible {
    color: var(--ink);
    outline: none;
}

/* Footer : adresse e-mail sous la signature « …vous faire émerger ! », en rose souligné (Thibault 2026-09-24). */
.site-footer__mail {
    margin-top: calc(-1 * clamp(6px, 1.2vh, 12px)); /* resserre l'écart de colonne : se lit comme la suite de la signature */
    width: max-content;
    max-width: 100%;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(13px, 1.05vw, 16px);
    line-height: 1.4;
    color: var(--accent-pink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    overflow-wrap: anywhere;
    transition: color .25s var(--ease-out);
}

.site-footer__mail:hover,
.site-footer__mail:focus-visible {
    color: var(--ink);
    outline: none;
}

@media (max-width: 900px), (pointer: coarse) {
    .site-footer__mail { padding-block: 5px; } /* cible tactile 24 px (WCAG 2.5.8), comme les autres liens du footer */
}

/* Bouton « Afficher le numéro » (ordinateur uniquement) : il reprend les classes du lien qu'il
   remplace ; on neutralise seulement la marge intérieure par défaut des <button> dans le pied de page. */
.site-footer__link.phone-reveal {
    padding: 0;
}