/* ==========================================================================
   Studio Cassette — Refonte 2026
   Direction « brutaliste éditorial » (Proposition D).
   Display General Sans capitales · accent orange signature · cartes plates
   à grands rayons sur fond crème · zéro ombre au repos.
   ========================================================================== */

:root {
  /* --- Neutres (encre → papier) ------------------------------------------
     Les noms de tokens sont conservés depuis la version précédente : de
     nombreux gabarits les référencent en style inline. Seules les valeurs
     changent. */
  --ink: #000000;          /* carbon black   */
  --ink-80: #2f2f2f;       /* graphite       */
  --ink-70: #444444;       /* slate          */
  --ink-50: #979797;       /* smoke          */
  --paper: #f6f5ef;        /* warm canvas    */
  --paper-2: #f3f3f3;      /* mist gray      */
  --white: #ffffff;        /* paper white    */
  --hairline: #e3e1d8;
  --hairline-2: #c6c6c6;   /* ash            */

  /* --- Accents ----------------------------------------------------------- */
  --signal: #ff8300;       /* orange signature — accent unique */
  --signal-hover: #ff9422;
  --signal-soft: #fff1e0;
  --signal-ink: #ff8300;
  --orange-off: #ff8300;
  --orange-off-hover: #ff9422;
  --trust: #2652e4;        /* bleu — CTA « Devis gratuit », bloc CTA final */
  --trust-hover: #1c41bd;
  --trust-soft: #eef1fb;
  --voltage: #fff100;      /* surlignage ::selection, usage rare */

  /* Accent actif. La règle de marque : l'orange signale, il ne sature jamais
     (idéalement un seul élément orange par viewport, deux au maximum). */
  --ac: var(--signal);
  --ac-hover: var(--signal-hover);
  --ac-soft: var(--signal-soft);
  --ac-ink: var(--signal-ink);

  /* --- États ------------------------------------------------------------- */
  --success: #1e8a5b;
  --error: #c0392b;
  --error-soft: #fbeae8;

  /* --- Typographie : familles -------------------------------------------- */
  --font-display: 'General Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  /* Plus de police à empattements ni de monospace dans cette direction :
     les deux alias pointent volontairement sur Inter. */
  --font-serif: var(--font-body);
  --font-mono: var(--font-body);

  /* --- Échelle type ------------------------------------------------------ */
  /* 6.5vw et non 8.2 : le plafond doit être atteint seulement quand la colonne
     du hero est assez large pour tenir le titre en 3 lignes (vers 1280 px). À
     8.2vw, 80 px arrivaient dès 976 px et le titre partait sur 4 ou 5 lignes. */
  --t-display: clamp(44px, 6.5vw, 80px);   /* .display-xl (hero)       */
  /* Titres des pages intérieures. Plafond volontairement sous celui du hero
     d'accueil (--t-display, 80 px) : le display de la home doit rester le point
     le plus fort du site. */
  --t-h1: clamp(44px, 6vw, 65px);          /* .display                 */
  --t-h2: clamp(30px, 4vw, 40px);          /* .heading  (Inter 500)    */
  --t-h3: 24px;                            /* .heading-sm              */
  --t-h4: 20px;
  --t-body: 16px;
  --t-small: 14px;
  --t-eyebrow: 12px;

  --lh-tight: 0.95;
  --lh-snug: 1.1;
  --lh-body: 1.5;
  --tr-tight: -0.03em;
  --tr-wide: 0.06em;

  /* --- Espacement (échelle 8 px) ----------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;
  /* Alias explicites du handoff */
  --s8: 8px; --s16: 16px; --s24: 24px; --s40: 40px; --s64: 64px; --s80: 80px; --s96: 96px;

  /* --- Formes ------------------------------------------------------------ */
  --r-sm: 4px;    /* micro-éléments : chips, puces               */
  --r-md: 8px;    /* boutons, champs de formulaire (--r-btn)     */
  --r-lg: 28px;   /* cartes standard (--r-card)                  */
  --r-xl: 32px;   /* grandes cartes, tuiles bento (--r-card-lg)  */
  --r-pill: 48px; /* pilule de navigation                        */
  --r-tag: 64px;  /* tags & chips arrondis                       */
  --r-img: 12px;  /* images encadrées                            */

  /* --- Ombres ------------------------------------------------------------
     Aucune ombre au repos : les cartes sont plates sur le fond crème.
     Les tokens restent définis (référencés en inline) mais neutralisés. */
  --sh-low: none;
  --sh-pop: none;
  --sh-menu: 0 1px 2px rgba(0, 0, 0, 0.05), 0 12px 32px rgba(0, 0, 0, 0.10);

  /* --- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;

  /* --- Layout ------------------------------------------------------------
     .container-wide donne exactement les 1200 px de contenu du prototype. */
  --container: 1200px;
  --container-wide: 1264px;
  --gutter: 32px;
  --header-h: 8rem;
  --header-h-scrolled: 5rem;
}

/* La page Marchés publics bascule l'accent en bleu institutionnel. */
.accent-trust {
  --ac: var(--trust);
  --ac-hover: var(--trust-hover);
  --ac-soft: var(--trust-soft);
  --ac-ink: var(--trust);
}

/* Option d'accessibilité (non activée par défaut) : bascule l'orange en
   texte vers une teinte conforme AA sur fond clair. Ajouter la classe
   `sc-a11y-accent` sur <body> (filtre body_class) pour l'activer. */
.sc-a11y-accent {
  --ac-ink: #a04d00;
  --signal-ink: #a04d00;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-70);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
a, button { -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   Type primitives
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

/* h1 : display General Sans en capitales, tracking négatif.
   h2 : casse normale par défaut — les capitales sont réservées aux blocs CTA
   (voir .cta-band h2), qui portent leur propre text-transform. */
h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
h2 {
  /* Titres de section en General Sans, comme le h1 et les titres de cartes. */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
h3 {
  /* Même famille et même graisse que les titres de cartes (General Sans 600). */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: -0.03em;
}
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* Un mot seul plus large que sa colonne fait scroller toute la page en mobile
   (« Confidentialité » à 44 px = 392 px pour 335 px disponibles sur un 375).
   La césure ne se déclenche que dans ce cas précis : un titre de plusieurs mots
   passe à la ligne normalement, sans être coupé. `lang="fr-FR"` sur <html> donne
   au navigateur le bon dictionnaire ; break-word sert de filet pour les rares
   moteurs qui n'en ont pas. */
h1, h2, h3, h4 { hyphens: auto; overflow-wrap: break-word; }

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
strong { color: var(--ink); font-weight: 600; }

/* Titre display (hero) */
.t-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

/* Mot accentué dans un titre. Anciennement en italique à empattements —
   devient le mot orange en capitales de la nouvelle direction. */
.t-serif {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: var(--ac);
}

.t-lead { font-size: 18px; line-height: 1.5; color: var(--ink-70); }

/* Titre de section « heading-lg » (General Sans 700, capitales) */
.t-heading-lg {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4.4vw, 48px);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.caption {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Eyebrow — pilule orange (tag-mint du prototype)
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  background: var(--ac);
  color: var(--white);
  border-radius: var(--r-tag);
  padding: 8px 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-eyebrow);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.eyebrow::before { content: none; }
.eyebrow.is-trust { background: var(--trust); color: var(--white); }
.eyebrow.is-center { align-self: center; }

/* Variante « filet + texte » (bloc CTA, en-têtes discrets). */
.eyebrow.no-rule,
.eyebrow--line {
  background: transparent;
  color: var(--ac);
  padding: 0;
  border-radius: 0;
  gap: 14px;
  letter-spacing: 0.1em;
}
.eyebrow.no-rule::before,
.eyebrow--line::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--ac);
  display: inline-block;
  flex: none;
}
.eyebrow.no-rule.is-trust,
.eyebrow--line.is-trust { color: var(--trust); }
.eyebrow.no-rule.is-trust::before,
.eyebrow--line.is-trust::before { background: var(--trust); }

/* Sur fond sombre / bloc CTA bleu : pilule blanche à texte bleu. */
.on-dark .eyebrow:not(.no-rule),
.section--dark .eyebrow:not(.no-rule),
.cta-band .eyebrow:not(.no-rule) { background: var(--white); color: var(--trust); }

/* Empilement eyebrow + titre */
.eyebrow-stack { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

/* Tags & chips */
.tag-quiet {
  display: inline-flex;
  align-items: center;
  background: var(--paper);
  color: var(--ink-70);
  border-radius: var(--r-tag);
  padding: 8px 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.chip {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--ink-70);
  background: var(--paper-2);
  padding: 6px 10px;
  border-radius: 16px;
  display: inline-block;
}
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.voltage {
  background: var(--voltage);
  padding: 0 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); }

/* Rythme vertical : une section sur fond de page ne pousse que par le bas
   (80 px), sinon deux sections consécutives cumulent leurs paddings et
   creusent un vide de ~190 px. Les sections qui portent un fond (alt, dark,
   bande de stats) gardent une respiration symétrique. */
.section { padding: 0 0 var(--s80); }
.section--tight { padding: 0 0 var(--s-8); }
/* FAQ : section respirée symétriquement, contrairement au rythme courant du
   site où les sections ne portent qu'un padding bas. */
.section--faq { padding: var(--s80) 0; }
.section--alt,
.section--dark { padding: var(--s80) 0; }
/* Plus de bande grise : ces sections reprennent le fond clair de la page, les
   cartes blanches restant le seul élément qui se détache. */
.section--alt { background: transparent; border-top: none; border-bottom: none; }
.section--dark { background: var(--ink); color: var(--white); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }

.grid { display: grid; }
.gap-5 { gap: var(--s-5); }
.gap-6 { gap: var(--s-6); }
.gap-7 { gap: var(--s-7); }

/* --------------------------------------------------------------------------
   Accessibilité
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 131, 0, 0.25);
  border-radius: var(--r-sm);
}
.on-dark :focus-visible,
.section--dark :focus-visible,
.stats-band :focus-visible { outline-color: var(--white); }

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  background: var(--ink);
  color: var(--white);
  padding: 12px 18px;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  z-index: 1000;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 16px; }

.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
}

/* Apparition au scroll : fade + translation 6 px. */
html.js .reveal {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; }
}

::selection { background: var(--voltage); color: var(--ink); }

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.01em;
  border-radius: var(--r-md);
  cursor: pointer;
  border: 1.5px solid transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  padding: 16px 24px;
  min-height: 44px;
  transition: background var(--dur-fast) linear, color var(--dur-fast) linear,
    border-color var(--dur-fast) linear, opacity var(--dur-fast) linear;
}
.btn:active { opacity: 0.85; }
.btn--sm { font-size: 15px; padding: 11px 16px; }
.btn--lg { font-size: 16px; padding: 16px 24px; }
.btn--full { width: 100%; }

/* Orange plein — CTA principal */
.btn--primary { background: var(--ac); color: var(--white); border-color: var(--ac); }
.btn--primary:hover { background: var(--ac-hover); border-color: var(--ac-hover); }

/* Noir plein */
.btn--dark { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn--dark:hover { background: var(--ink-80); border-color: var(--ink-80); }

/* Contour noir — CTA secondaire */
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: rgba(0, 0, 0, 0.06); }

/* Contour bleu — « Voir nos réalisations », devis */
.btn--outline-blue,
.btn--trust {
  background: transparent; color: var(--trust); border-color: var(--trust);
  border-radius: var(--r-sm); padding: 15px 16px;
}
.btn--outline-blue:hover,
.btn--trust:hover { background: rgba(38, 82, 228, 0.08); }

/* Contour gris discret */
.btn--ghost {
  background: transparent; color: var(--ink-70); border-color: var(--ink-70);
  border-radius: var(--r-sm); padding: 15px 16px;
}
.btn--ghost:hover { background: var(--paper-2); color: var(--ink); border-color: var(--ink); }

/* Sur fond sombre / bleu */
.btn--light { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.5); }
.btn--light:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--white); }

/* Lien texte fléché */
.btn--link {
  background: none;
  color: inherit;
  padding: 0;
  min-height: 0;
  border: none;
  border-radius: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  gap: 6px;
  transition: color var(--dur-fast) linear;
}
.btn--link:hover { color: var(--ac); }
.btn--link .arrow { transition: transform var(--dur-base) var(--ease); }
.btn--link:hover .arrow { transform: translateX(3px); }

.btn-row { display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center; }

/* Boutons dans le bloc CTA bleu : inversion en blanc. */
.cta-band .btn--primary,
.cta-band .btn--dark { background: var(--white); color: var(--trust); border-color: var(--white); }
.cta-band .btn--primary:hover,
.cta-band .btn--dark:hover { background: #eef1fb; border-color: #eef1fb; }
.cta-band .btn--secondary { border-color: rgba(255, 255, 255, 0.5); color: var(--white); }
.cta-band .btn--secondary:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--white); }
.cta-band .btn--link { color: var(--white); }
.cta-band .btn--link:hover { color: #eef1fb; }

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
/* `fixed` et non `sticky` : le header change de hauteur au scroll (128 → 80 px).
   En sticky il occupe sa place dans le flux, donc ce rétrécissement raccourcit
   le document et fait DÉRIVER la position de scroll de 48 px — ce qui repasse
   sous le seuil, ré-agrandit le header, et installe une boucle (l'à-coup visible
   au franchissement). Hors flux, la hauteur du document ne bouge plus.
   La réservation d'espace est faite par `main { padding-top: var(--header-h) }`,
   que `.hero` annule avec sa marge négative pour passer sous la barre. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--paper);
  transition: background var(--dur-base) linear, height var(--dur-base) var(--ease);
}
main { padding-top: var(--header-h); }
/* Accueil, avant scroll : le header passe sur le visuel du hero. */
.site-header.is-home:not(.is-scrolled) { background: transparent; }
.site-header.is-scrolled { height: var(--header-h-scrolled); background: var(--paper); }
/* Neutralise le filet hérité de la direction précédente, encore posé en
   « CSS additionnel » du Personnalisateur (`.site-header{border-bottom:…!important}`).
   Le header de la Proposition D est sans filet — transparent sur le hero.
   À terme : supprimer ces deux lignes dans Apparence → Personnaliser → CSS additionnel. */
body .site-header { border-bottom: 0 none !important; }

/* Même boîte que .container-wide : sans ça l'en-tête a sa propre gouttière
   (clamp indépendant de --gutter) et le logo ne tombe jamais sur la verticale
   du contenu — l'écart atteignait 120 px au-delà de 1264 px, où le contenu se
   centre alors que l'en-tête reste pleine largeur. */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: auto;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex: none;
}
.wordmark .o { color: var(--ac); }
/* Le SVG de marque fait 1168.94 × 188 : 34 px de haut dans le header,
   26 px dans le footer (mesures de la maquette). Le font-size ne sert
   qu'au repli texte, quand l'asset SVG est absent. */
.wordmark img { height: 34px; width: auto; max-width: none; }
.wordmark--footer { font-size: 26px; }
.wordmark--footer img { height: 26px; }

/* Deux logos superposés dans le même emplacement : le sombre par défaut, le
   clair tant que le header est transparent au-dessus du visuel du hero.
   Superposition plutôt que display:none pour que la largeur du lien ne change
   pas au basculement — sinon la barre de navigation se décale. */
.wordmark--dual { position: relative; }
.wordmark--dual .wordmark__img--light {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity var(--dur-base) linear;
}
.site-header.is-home:not(.is-scrolled) .wordmark__img { opacity: 0; }
.site-header.is-home:not(.is-scrolled) .wordmark__img--light { opacity: 1; }
.wordmark--dual .wordmark__img { transition: opacity var(--dur-base) linear; }

/* Pilule de navigation centrale */
.primary-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border-radius: var(--r-pill);
  padding: 8px 12px;
}
.primary-nav a.nav-link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink-70);
  padding: 8px 12px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--dur-fast) linear, background var(--dur-fast) linear;
}
.primary-nav a.nav-link:hover { color: var(--ink); }
.primary-nav a.nav-link[aria-current="page"],
.primary-nav .current-menu-item > a.nav-link,
.primary-nav .current_page_item > a.nav-link {
  color: var(--ink);
  background: var(--paper);
}
.primary-nav a.nav-link::after { content: none; }

/* Sous-menu Expertises */
.nav-has-children { position: relative; display: flex; align-items: center; }
.nav-caret { width: 12px; height: 12px; opacity: 0.7; transition: transform 180ms var(--ease); }
.nav-has-children:hover .nav-caret,
.nav-has-children:focus-within .nav-caret { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 16px);
  left: 0;
  width: 380px;
  max-width: 78vw;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 160ms linear, transform 160ms var(--ease), visibility 160ms;
  z-index: 60;
}
.nav-dropdown::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.nav-has-children:hover .nav-dropdown,
.nav-has-children:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: none; }
.nav-dropdown__panel {
  background: var(--white);
  border: none;
  border-radius: 16px;
  box-shadow: var(--sh-menu);
  padding: 12px;
  max-height: min(70vh, 560px);
  overflow-y: auto;
}
.nav-dropdown__item {
  display: block;
  padding: 14px 18px;
  border-radius: 12px;
  line-height: 1.35;
  transition: background var(--dur-fast) linear;
}
.nav-dropdown__item:hover { background: var(--paper-2); }
.nav-dropdown__item .t {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
}
.nav-dropdown__item .d {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: 14px;
  color: var(--ink-50);
}
.nav-dropdown__all {
  display: block;
  margin: 8px 6px 0;
  padding: 14px 12px 0;
  border-top: 1px solid var(--hairline-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ac);
  transition: opacity var(--dur-fast) linear;
}
.nav-dropdown__all:hover { opacity: 0.75; }

/* Actions à droite */
.nav-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.nav-actions .btn { padding: 11px 16px; font-size: 15px; }

/* CTA « Devis gratuit » : trois états.
   – accueil, avant scroll → contour et texte blancs, sur le visuel du hero ;
   – accueil scrollé, et toutes les autres pages → contour et texte bleus ;
   – repli (pas de classe sur le header) → contour noir. */
.btn-devis {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
  border-radius: var(--r-md);
}
.btn-devis:hover { background: rgba(0, 0, 0, 0.06); }
.site-header:not(.is-home) .btn-devis,
.site-header.is-scrolled .btn-devis { border-color: var(--trust); color: var(--trust); }
.site-header:not(.is-home) .btn-devis:hover,
.site-header.is-scrolled .btn-devis:hover { background: rgba(38, 82, 228, 0.08); }
.site-header.is-home:not(.is-scrolled) .btn-devis { border-color: var(--white); color: var(--white); }
.site-header.is-home:not(.is-scrolled) .btn-devis:hover { background: rgba(255, 255, 255, 0.14); }

.nav-burger { display: none; background: none; border: none; cursor: pointer; padding: 10px; }
.nav-burger span {
  display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0;
  transition: background var(--dur-base) linear;
}
/* Header transparent au-dessus du visuel du hero : les barres passent en blanc,
   comme le logo. Deux sélecteurs, parce que la transparence n'a pas la même
   condition selon la largeur — `is-home` en desktop, `has-hero-media` en mobile
   (où seul l'accueil avec vidéo garde un header transparent). */
.site-header.is-home:not(.is-scrolled) .nav-burger span,
.site-header.has-hero-media:not(.is-scrolled) .nav-burger span { background: var(--white); }

/* Menu plein écran mobile */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 200;
  padding: 24px var(--gutter);
  overflow-y: auto;
  display: none;
}
.mobile-menu.is-open { display: block; }
/* Collant : le menu défile, la croix de fermeture doit rester atteignable. */
.mobile-menu__top {
  display: flex; justify-content: space-between; align-items: center; height: 54px;
  position: sticky; top: -24px; z-index: 1;
  margin: -24px 0 0; padding-top: 24px;
  background: var(--paper);
}
.mobile-menu__close { background: none; border: none; font-size: 34px; cursor: pointer; line-height: 1; padding: 4px 10px; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 4px; margin-top: 40px; }
.mobile-menu nav > a,
.mobile-menu .mm-parent {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 12px 0;
}
.mobile-menu nav > a { border-bottom: 1px solid var(--hairline); }
.mobile-menu .mm-sub {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 0 12px 4px; border-bottom: 1px solid var(--hairline);
}
.mobile-menu .mm-sub a { font-family: var(--font-body); font-weight: 500; font-size: 17px; color: var(--ink-70); padding: 8px 0; }
.mobile-menu .mm-cta { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 1024px) {
  .nav-desktop { display: none !important; }
  .nav-burger { display: block; }
}

/* ==========================================================================
   Hero (accueil) — visuel photo calé à droite
   ========================================================================== */
.hero {
  position: relative;
  margin-top: calc(-1 * var(--header-h));
  padding: calc(var(--header-h) + var(--s-7)) 0 var(--s-9);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
}
/* Vidéo de fond : même cadrage que le background-image qu'elle recouvre
   (calé à droite, recadré en cover), l'image restant visible dessous tant que
   la vidéo n'a pas démarré.

   Lisibilité — le visuel est clair et animé, là où les couleurs de texte du hero
   avaient été calibrées sur une photo sombre. Trois réglages se cumulent, dans
   cet ordre : la vidéo est assombrie globalement, un voile dégradé renforce le
   contraste du côté du texte, et le texte passe en clair. Les trois curseurs
   sont ci-dessous, pour pouvoir les doser sans toucher au reste. */
:root {
  --hero-video-brightness: 0.62;   /* 1 = vidéo telle quelle */
  --hero-veil-strong: 0.72;        /* opacité du voile, côté texte */
  --hero-veil-soft: 0.30;          /* opacité du voile, au milieu */
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  border: 0;
  pointer-events: none;
  filter: brightness(var(--hero-video-brightness)) saturate(0.92);
}
/* Voile dégradé : dense à gauche sous le texte, transparent à droite pour
   laisser le visuel respirer. */
.hero.hero--video::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(17, 17, 17, var(--hero-veil-strong)) 0%,
    rgba(17, 17, 17, var(--hero-veil-soft)) 58%,
    rgba(17, 17, 17, 0) 100%
  );
  pointer-events: none;
  z-index: 0;
}
/* Le contenu repasse au-dessus de la vidéo et du voile. */
.hero > .hero__split { position: relative; z-index: 1; }

/* Texte en clair, uniquement là où le voile est posé : les autres hero restent
   sur fond crème avec leur texte sombre. */
.hero.hero--video h1 { color: var(--white); }
.hero.hero--video .t-lead { color: rgba(255, 255, 255, 0.88); }
.hero.hero--video .hero__meta .caption { color: rgba(255, 255, 255, 0.72); }
/* Le bouton secondaire était bleu sur fond clair : illisible sur le voile. */
.hero.hero--video .btn--trust { color: var(--white); border-color: rgba(255, 255, 255, 0.6); }
.hero.hero--video .btn--trust:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--white); }

/* Animations réduites : plus de vidéo, donc plus de voile ni de texte clair —
   sinon on se retrouve avec du blanc sur le fond crème. */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero.hero--video::before { display: none; }
  .hero.hero--video h1 { color: var(--ink); }
  .hero.hero--video .t-lead { color: var(--ink-70); }
  .hero.hero--video .hero__meta .caption { color: var(--ink-50); }
  .hero.hero--video .btn--trust { color: var(--trust); border-color: var(--trust); }
}
/* Aligné sur .container-wide comme l'en-tête et le reste de la page : le titre
   du hero doit tomber sur la même verticale que les sections qui suivent. */
.hero__split {
  display: grid;
  /* Colonne de texte élargie (1.05 → 1.25) pour tenir le titre à 80 px en
     3 lignes. La seconde colonne est vide en desktop : elle ne fait que
     réserver la zone où le visuel de fond reste dégagé. */
  grid-template-columns: 1.25fr 1fr;
  gap: var(--s-8);
  align-items: center;
  min-height: 520px;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 0 0 var(--s-5);
}

/* Pages Expertise : titre à l'échelle des autres pages (--t-h1) et non au
   display du hero d'accueil, qui l'emporte largement sur le reste du site. */
.hero--compact h1 { font-size: var(--t-h1); line-height: 1; }
/* 600 px : l'accroche tient sur deux lignes dans la colonne du hero (615 px). */
.hero .t-lead { max-width: 600px; margin: 0 0 var(--s-7); color: var(--ink-70); font-size: 16px; line-height: 1.5; }
.hero .btn-row { margin-top: 0; }
.hero__meta { display: flex; gap: var(--s-5); margin-top: var(--s-7); flex-wrap: wrap; }
.hero__meta .caption { color: var(--ink-50); }
.hero__visual-m { display: none; }
.hero__visual { position: relative; }

/* En-tête des pages intérieures */
.page-hero,
.page-head { padding: var(--s-7) 0 var(--s-8); }
.page-hero h1,
.page-head h1 {
  font-size: var(--t-h1);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: var(--s-4) 0 var(--s-5);
}
/* Mesure des accroches d'en-tête : 720 px tient l'essentiel des textes en
   2 à 4 lignes sans partir sur une ligne trop longue à lire. */
.page-hero .t-lead,
.page-head p { color: var(--ink-70); max-width: 720px; margin: 0; }
.page-hero--trust { background: transparent; border-bottom: none; }

.breadcrumb {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: -0.03em;
  color: var(--ink-50); margin-bottom: 22px;
}
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .current { color: var(--ink); }

/* ==========================================================================
   Bande de confiance : marquee de logos dans une pilule blanche
   ========================================================================== */
.trust-pill {
  background: var(--white);
  border-radius: 999px;
  padding: 14px 36px;
  display: flex;
  align-items: center;
  gap: var(--s-6);
  /* Les sections qui suivent n'ont plus de padding haut : la pilule porte
     elle-même sa respiration inférieure. */
  margin-bottom: var(--s80);
}
.trust-pill__label {
  flex-shrink: 0;
  /* Plus de margin-left:auto : la piste de logos remplit désormais l'espace,
     c'est le gap de la pilule qui donne l'écart avec la phrase. */
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink-70);
}
/* Pas de max-width : la piste occupe toute la largeur laissée par le label,
   sinon les logos se tassent à gauche et un vide s'installe au milieu de la
   pilule. Le fondu est resserré sur les bords pour la même raison. */
.logo-marquee {
  flex: 1;
  min-width: 0;
  max-width: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.logo-marquee__track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  /* Vitesse de défilement, en pixels par seconde. C'est elle qu'il faut régler,
     pas la durée : la durée dépend du nombre de logos (la piste est répétée
     pour remplir la bande), donc à durée fixe, ajouter un logo accélère le
     défilement. main.js lit cette valeur et en déduit la durée. Les 105s
     ci-dessous ne sont qu'un repli si le JS ne s'exécute pas. */
  --logo-speed: 14;
  animation: logo-scroll 105s linear infinite reverse;
}
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.logo-marquee img {
  height: 44px;
  max-height: 44px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.6;
  flex-shrink: 0;
  padding: 0;
  transition: opacity var(--dur-base) linear, filter var(--dur-base) linear;
}
.logo-marquee img:hover { filter: grayscale(0); opacity: 1; }
.logo-marquee__item {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink-50);
  white-space: nowrap;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track { animation: none; }
  .logo-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* L'ancienne bande à filets orange devient une simple respiration. */
.logo-band { border: none; padding: 0; }
.logo-band__quote {
  margin-top: 44px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
}
.logo-band__quote p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink);
  max-width: 700px;
  margin: 0;
}
.logo-band__rating { display: flex; align-items: center; gap: 10px; }
.logo-band__stars { display: flex; gap: 3px; color: var(--ink); }
.logo-band__score { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); }
.logo-band__count { font-size: 14px; color: var(--ink-50); }

.logo-row__label {
  text-align: center; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: -0.03em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 32px;
}
.logo-row__items { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 56px; }
.logo-row__items .logo {
  font-family: var(--font-display); font-weight: 600; font-size: 20px;
  color: var(--ink); opacity: 0.42; filter: grayscale(1);
}
.logo-row__items img { max-height: 40px; width: auto; opacity: 0.7; filter: grayscale(1); transition: opacity var(--dur-base); }
.logo-row__items img:hover { opacity: 1; }

/* ==========================================================================
   Cartes
   ========================================================================== */
.card-standard { background: var(--white); border-radius: var(--r-lg); padding: var(--s-5); }
.card-inverted { background: var(--ink); color: var(--white); border-radius: var(--r-xl); padding: var(--s-7); }

.cards-grid { display: grid; gap: var(--s-4); }
.cards-grid--4 { grid-template-columns: repeat(4, 1fr); }
.cards-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cards-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* Carte service (grille expertises) — tuile blanche plate à grand rayon. */
.service-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: none;
  border-radius: var(--r-xl);
  padding: var(--s-7);
  height: 100%;
  min-height: 280px;
  transition: transform var(--dur-slow) var(--ease);
}
.service-card:hover { transform: translateY(-4px); box-shadow: none; border-color: transparent; }
.service-card .icon, .service-card__icon { color: var(--ac); }
.service-card__num {
  font-family: var(--font-mono); font-size: 12px; color: var(--ac);
  text-transform: uppercase; letter-spacing: -0.03em;
}
.service-card h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 30px;
  line-height: 1.02; letter-spacing: -0.02em; margin: auto 0 0; padding-top: var(--s-5);
}
/* Filet orange sous le titre */
.service-card h3::after {
  content: ""; display: block; width: 44px; height: 3px;
  background: var(--ac); margin: var(--s-5) 0 var(--s-4);
}
.service-card p { font-size: 15px; line-height: 1.5; color: var(--ink-70); margin: 0; max-width: 34ch; }
.service-card__more {
  margin-top: var(--s-5); font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--ink); display: inline-flex; gap: 8px; transition: color var(--dur-fast) linear;
}
.service-card:hover .service-card__more { color: var(--ac); }
.service-card:hover .service-card__more .arrow { transform: translateX(4px); }
.service-card__more .arrow { transition: transform var(--dur-base) var(--ease); }

/* Mini-cartes numérotées (méthode / chaîne de production) */
.minicard {
  background: var(--white);
  border: none;
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.minicard .num { font-family: var(--font-mono); font-size: 12px; color: var(--ac); display: block; margin-bottom: 6px; }
.minicard .t {
  font-family: var(--font-display); font-weight: 600; font-size: 24px;
  /* Sans interligne propre, ces titres héritaient du 1.5 du corps de texte :
     beaucoup trop aéré pour un titre de carte sur deux lignes. */
  line-height: 1.2;
  letter-spacing: -0.02em; color: var(--ink); margin-top: 0; margin-bottom: 8px;
}
.minicard .d { font-size: 14px; line-height: 1.4; color: var(--ink-70); margin-top: 0; }
.minicard--icon .icon { color: var(--ac); }
.minicard--icon .t { font-size: 20px; margin-top: 14px; }

/* Bento expertises — grille 12 colonnes du prototype */
.exp-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-4); }
.exp-bento > * { grid-column: span 4; }
.exp-bento > .t-feature { grid-column: span 8; min-height: 300px; }
.exp-bento > .t-2 { grid-column: span 4; min-height: 300px; }
.exp-bento > .t-3 { grid-column: span 6; }
.exp-bento > .t-4, .exp-bento > .t-5 { grid-column: span 3; }
.exp-bento .service-card.t-feature h3 { font-size: 40px; letter-spacing: -0.03em; }
.exp-bento .service-card.t-feature h3::after { width: 56px; }
.exp-bento .service-card.t-feature p { font-size: 17px; max-width: 40ch; }
/* Semis de points décoratif sur la dernière tuile */
.exp-bento > .t-5 { position: relative; overflow: hidden; }
.exp-bento > .t-5::before {
  content: ""; position: absolute; top: 0; right: 0; width: 60%; height: 100%;
  background-image: radial-gradient(rgba(0, 0, 0, 0.10) 1.1px, transparent 1.1px);
  background-size: 14px 14px; opacity: 0.45;
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%);
  mask-image: linear-gradient(200deg, #000, transparent 70%);
  pointer-events: none;
}
.exp-bento > .t-5 > * { position: relative; z-index: 1; }

/* ==========================================================================
   Cartes réalisation / article
   ========================================================================== */
.project-card {
  display: flex; flex-direction: column; height: 100%; width: 100%; cursor: pointer;
  padding: 0; border-radius: var(--r-xl); overflow: hidden;
  background: var(--white); border: none;
  transition: none;
}
.project-card--public, .project-card--prive { border: none; }
.project-card--public:hover, .project-card--prive:hover { box-shadow: none; }
.project-card__media { position: relative; overflow: hidden; border-radius: 0; }
.project-card__media .scaler { transition: transform 600ms var(--ease); }
.project-card:hover .project-card__media .scaler { transform: scale(1.02); }
.project-card__img {
  display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: top;
  border: none; border-radius: 0;
}
.project-card__media::after {
  content: ""; position: absolute; inset: 0; background: var(--ink);
  opacity: 0; transition: opacity var(--dur-fast) linear; pointer-events: none; z-index: 1;
}
.project-card:hover .project-card__media::after { opacity: 0.04; }
.project-card__cat {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  padding: 8px 16px; border-radius: var(--r-tag);
  background: rgba(255, 255, 255, 0.92); color: var(--ink-70);
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  letter-spacing: -0.03em; text-transform: uppercase;
}
.project-card__meta {
  margin-top: 0; padding: var(--s-4) var(--s-5) var(--s-5);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.project-card__meta h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  letter-spacing: -0.02em; text-transform: none; margin: 0; color: var(--ink);
}
.project-card--public .project-card__meta h3,
.project-card--prive .project-card__meta h3 { color: var(--ink); }
.project-card__meta .sector {
  display: inline-flex; align-items: center; background: var(--paper); color: var(--ink-70);
  border-radius: var(--r-tag); padding: 8px 16px;
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  letter-spacing: -0.03em; text-transform: uppercase; white-space: nowrap;
}

.article-card { display: block; cursor: pointer; }
.article-card__media { overflow: hidden; border-radius: var(--r-xl); }
.article-card__media .scaler { transition: transform 600ms var(--ease); }
.article-card:hover .article-card__media .scaler { transform: scale(1.02); }
.article-card__tags {
  margin-top: 16px; display: flex; gap: 12px; align-items: center;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: -0.03em; text-transform: uppercase;
}
.article-card__tags .cat { color: var(--ac); }
.article-card__tags .sep { color: var(--hairline-2); }
.article-card__tags .read { color: var(--ink-50); }
.article-card h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 24px;
  line-height: 1.1; letter-spacing: -0.02em; margin: 10px 0 0;
  transition: color var(--dur-fast) linear;
}
.article-card:hover h3 { color: var(--ac); }
.article-card__date { font-size: 14px; color: var(--ink-50); margin-top: 10px; }

/* Vignette « écran de projet » — conservée pour les contenus sans image.
   Sans chrome de navigateur dans cette direction : image seule, rayon 12 px. */
.site-thumb { border-radius: var(--r-img); overflow: hidden; background: var(--white); border: none; box-shadow: none; }
.site-thumb__bar { display: none; }
.site-thumb__body { padding: 0; min-height: 180px; aspect-ratio: 16 / 11; }
/* Capture réelle : elle occupe le même cadre 16:11 que la plaque de
   remplacement, recadrée sans déformation quel que soit son format. */
.site-thumb img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: center top; }
.site-thumb.tone-warm .site-thumb__body { background: linear-gradient(160deg, #f4ebe0, #e7d6c2); }
.site-thumb.tone-cool .site-thumb__body { background: linear-gradient(160deg, #e6ecf3, #d2deec); }
.site-thumb.tone-sage .site-thumb__body { background: linear-gradient(160deg, #e6ebe3, #d2dcc9); }
.site-thumb.tone-ink .site-thumb__body { background: linear-gradient(160deg, #2a2a30, #16161a); }

/* Plaque photographie */
.photo-plate { border-radius: var(--r-img); position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.photo-plate.tone-warm { background: linear-gradient(150deg, #ebdfd0 0%, #d8c3a6 60%, #b79a72 100%); }
.photo-plate.tone-cool { background: linear-gradient(150deg, #dce4ee 0%, #b9c8dc 60%, #8da3c0 100%); }
.photo-plate.tone-sage { background: linear-gradient(150deg, #dfe6d8 0%, #c2cfb4 60%, #9dae8a 100%); }
.photo-plate.tone-ink { background: linear-gradient(150deg, #3a3a42 0%, #222228 60%, #16161a 100%); }
.photo-plate__label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(0, 0, 0, 0.28); font-family: var(--font-mono); font-size: 12px;
  letter-spacing: -0.03em; text-transform: uppercase; text-align: center; padding: 20px;
}
.photo-plate.tone-ink .photo-plate__label { color: rgba(255, 255, 255, 0.45); }
.photo-plate__caption {
  position: absolute; left: 16px; bottom: 14px; padding: 8px 14px;
  background: rgba(0, 0, 0, 0.82); color: var(--white); border-radius: var(--r-tag);
  font-family: var(--font-display); font-size: 12px; font-weight: 600; text-transform: uppercase;
}
.photo-plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.ratio-1-1 { aspect-ratio: 1 / 1; }
.ratio-3-4 { aspect-ratio: 3 / 4; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-16-10 { aspect-ratio: 16 / 10; }
.ratio-21-9 { aspect-ratio: 21 / 9; }

/* Aucune image n'est encadrée dans cette direction : pas de chrome de
   navigateur, pas de filet. Seul le rayon découpe le visuel. */
.exp-photo { border-radius: var(--r-img); overflow: hidden; border: none; }
img { border: none; }
/* Carte « Un exemple, en … » sur les pages expertise : plate, léger lift. */
.exp-work-card { transition: transform var(--dur-slow) var(--ease); }
.exp-work-card:hover { transform: translateY(-4px); }
.exp-photo img { width: 100%; height: 100%; aspect-ratio: 16 / 11; object-fit: cover; display: block; }

/* ==========================================================================
   Bande de statistiques (fond noir pleine largeur)
   ========================================================================== */
.stats-band { background: var(--ink); color: var(--white); padding: var(--s80) 0; margin-bottom: var(--s80); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.stats-grid--3 { grid-template-columns: repeat(3, 1fr); }
.stat__value {
  font-family: var(--font-display); font-weight: 700; font-size: 64px; line-height: 0.95;
  letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink); margin-bottom: var(--s-4);
}
.stat__value .accent { color: var(--ac); }
/* Unité (« ans », « % », « h ») : plus petite que le chiffre, comme la maquette. */
.stat__value .suffix { color: inherit; font-size: 0.5em; letter-spacing: -0.01em; }
.stat__label { font-family: var(--font-body); font-weight: 500; font-size: 16px; color: var(--ink); margin-bottom: 2px; }
.stat__sub { font-size: 13px; color: var(--ink-50); line-height: 1.5; }
.section--dark .stat__value,
.stats-band .stat__value { color: var(--ac); }
.section--dark .stat__label,
.stats-band .stat__label { color: var(--white); }
.section--dark .stat__sub,
.stats-band .stat__sub { color: rgba(255, 255, 255, 0.7); }
/* Bandes de chiffres noires (accueil, Agence) : chiffres, libellés et
   sous-textes centrés. Les compteurs des pages Expertise sont dans une
   section .section--dark, pas dans .stats-band : ils ne sont pas concernés. */
.stats-band .stats-grid { text-align: center; }

/* ==========================================================================
   Témoignage
   ========================================================================== */
.testimonial {
  display: flex; flex-direction: column; gap: var(--s-5); align-items: flex-start;
  background: var(--white); border-radius: var(--r-xl); padding: var(--s-7);
}
.testimonial__mark {
  background: var(--ac); color: var(--white); width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; flex: none;
}
.testimonial blockquote {
  margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 20px;
  font-style: italic; line-height: 1.3; letter-spacing: 0; color: var(--ink);
}
.testimonial__by { margin-top: 0; display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.testimonial__by img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: center top; flex: none; }
.testimonial__by .name,
.testimonial__by .role {
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase;
  color: var(--ink-50); line-height: 1.5; font-weight: 400;
}
.testimonial .photo-plate { width: 56px; height: 56px; border-radius: 50%; aspect-ratio: 1 / 1; flex: none; }
/* Variante « pleine largeur » (étude de cas) : bloc centré et contenu centré,
   largeur bornée pour garder les proportions du témoignage de l'accueil. */
.testimonial--center {
  max-width: 720px; margin: 0 auto;
  align-items: center; text-align: center;
}
.testimonial--center .testimonial__by { justify-content: center; }
/* Citation d'étude de cas : un cran au-dessus du témoignage de l'accueil
   (20 px), sur l'échelle fluide du thème — 24 px sur mobile, 28 px en desktop. */
.testimonial--center blockquote { font-size: var(--t-h3); }

/* ==========================================================================
   Bloc CTA final — fond bleu, grands rayons
   ========================================================================== */
.cta-band { background: transparent; color: var(--white); padding: 0 0 var(--s-9); }
.cta-band__inner {
  background: var(--trust);
  border-radius: 35px;
  padding: var(--s-7) var(--s-7);
  display: grid;
  /* Colonne de droite plus large et écart resserré : le texte et le formulaire
     remontent vers le titre au lieu d'être repoussés au bord droit. */
  grid-template-columns: 1fr 1.15fr;
  gap: var(--s-6);
  align-items: center;
}
.cta-band h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 4.6vw, 46px); line-height: 1; letter-spacing: -0.03em;
  text-transform: uppercase; color: var(--white); margin: var(--s-5) 0 0;
}
.cta-band__text { font-size: 16px; line-height: 1.5; color: var(--white); margin: 0 0 var(--s-7); max-width: 420px; }

/* Amorce de conversation : champ e-mail + bouton, sur le bloc bleu. */
.cta-band__form { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.cta-band__form input[type="email"] {
  flex: 1 1 200px;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--white);
  border-radius: var(--r-md);
  padding: 15px 16px;
  min-height: 44px;
  outline: none;
  transition: box-shadow var(--dur-fast) linear;
}
.cta-band__form input[type="email"]::placeholder { color: var(--ink-50); }
.cta-band__form input[type="email"]:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45); }
.cta-band__form .btn {
  flex: 0 0 auto;
  white-space: nowrap;
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.cta-band__form .btn:hover { background: rgba(255, 255, 255, 0.14); }
@media (max-width: 480px) {
  .cta-band__form { flex-direction: column; align-items: stretch; }
  /* En colonne, le flex-basis s'applique à la hauteur : sans ce reset le champ
     e-mail devient un bloc de 200 px de haut. */
  .cta-band__form input[type="email"] { flex: 0 0 auto; width: 100%; }
  .cta-band__form .btn { justify-content: center; white-space: normal; }
}

/* ==========================================================================
   Blocs expertise (page pilier + détail)
   ========================================================================== */
.exp-block {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;
  padding: var(--s-8) 0; border-top: none;
}
/* Bloc collé à la section précédente : on retire le retrait haut, les deux
   colonnes restant centrées l'une par rapport à l'autre. Son titre porte une
   pastille : il suit la taille des autres titres de section, pas celle,
   plus grande, des blocs d'expertise. */
.exp-block--flush { padding-top: 0; }
.exp-block__num {
  font-family: var(--font-display); font-weight: 700; font-size: 72px; line-height: 0.85;
  color: var(--ac); letter-spacing: -0.033em;
}
/* Titre de bloc expertise : display General Sans mais en casse de phrase,
   comme sur la capture — l'ALL CAPS est réservé aux titres de section. */
.exp-block h2 {
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-h2);
  line-height: 1.02; letter-spacing: -0.03em; text-transform: none; margin: 14px 0 0;
}
.exp-block--flush h2 { font-size: var(--t-h2); line-height: 1.1; margin: 16px 0 0; }
.exp-block p { font-size: 18px; line-height: 1.55; color: var(--ink-70); margin: 20px 0 0; max-width: 520px; }
.exp-block.is-reverse .exp-block__text { order: 2; }
.exp-block.is-reverse .exp-block__media { order: 1; }

.checklist, .exp-block__items {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; max-width: 540px;
}
.checklist li, .exp-block__items li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 15.5px; line-height: 1.4; color: var(--ink-70);
}
.checklist li::before, .exp-block__dot {
  content: ""; flex-shrink: 0; margin-top: 7px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--ac); display: inline-block;
}
.checklist--lg li { font-size: 16px; color: var(--ink-70); }

/* Rangée expertise compacte (numéro / texte / CTA) */
.exp-row {
  display: grid; grid-template-columns: 80px 1fr auto; gap: var(--s-7);
  align-items: start; padding: var(--s-7) 0; border-top: 1px solid var(--hairline-2);
}
.exp-row:last-child { border-bottom: 1px solid var(--hairline-2); }
.exp-row .idx { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 0.9; color: var(--ac); }
.exp-row p { color: var(--ink-70); max-width: 560px; margin-bottom: var(--s-4); }
.exp-row .col-cta { align-self: center; }

/* « Nos autres expertises » : pilules blanches sans contour, qui passent en
   orange au survol. Même style sur la page pilier et sur les pages détail. */
.exp-related-card {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: var(--s-4) var(--s-5); border: none; border-radius: var(--r-pill);
  background: var(--white); color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.02em;
  transition: transform var(--dur-slow) var(--ease), background var(--dur-fast) linear, color var(--dur-fast) linear;
}
.exp-related-card [aria-hidden="true"] { flex: none; color: var(--ac); font-size: 17px; transition: color var(--dur-fast) linear; }
.exp-related-card:hover { transform: translateY(-4px); background: var(--ac); color: var(--white); }
.exp-related-card:hover [aria-hidden="true"] { color: var(--white); }

/* Process en étapes */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.process-step { background: var(--white); border-radius: var(--r-lg); padding: var(--s-5); height: 100%; }
.process-step .head { display: flex; align-items: center; gap: 14px; }
.process-step .num { font-family: var(--font-mono); font-size: 12px; color: var(--ac); }
/* Plus de filet après les numéros (01, 02…) : le chiffre orange suffit à
   séquencer. Le sélecteur reste global pour couvrir les éventuels `.rule`
   sortis d'un pattern ou d'un contenu existant. */
.rule { display: none; }
.process-step h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 24px;
  letter-spacing: -0.02em; margin: 12px 0 8px;
}
.process-step p { font-size: 14px; line-height: 1.4; color: var(--ink-70); margin: 0; }

/* Process numéroté en lignes (Marchés publics) */
.process-rows .row,
.ao-step {
  display: grid; grid-template-columns: 80px 1fr; gap: var(--s-6); padding: var(--s-5) 0;
  border-top: 1px solid var(--hairline-2); align-items: baseline;
}
.process-rows .row .bignum,
.ao-step__num {
  font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 0.9;
  color: var(--ac); letter-spacing: -0.03em;
}
.process-rows .row .body,
.ao-step__body { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s-6); align-items: baseline; }
.process-rows .row h3,
.ao-step__body h3 { font-size: 22px; margin: 0; }
.process-rows .row p,
.ao-step__body p { font-size: 16px; line-height: 1.5; color: var(--ink-70); margin: 0; }

/* ==========================================================================
   Marchés publics — conformité
   ========================================================================== */
.compliance-card {
  background: var(--white); border: none; border-radius: var(--r-xl);
  padding: var(--s-7); height: 100%; display: flex; flex-direction: column; gap: var(--s-4);
}
/* Picto de tête, à la place de l'ancien numéro : même orange, même aplomb. */
.compliance-card .icon { color: var(--ac); line-height: 0; }
.compliance-card .idx { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 0.9; color: var(--ac); }
.compliance-card h3 { font-size: var(--t-h3); margin: 0; }
.compliance-card p { font-size: 15px; line-height: 1.55; color: var(--ink-70); margin: 0; }
.compliance-card .chips { margin-top: auto; padding-top: 8px; }

.contact-box { background: var(--white); border-radius: var(--r-xl); padding: var(--s-7); }
.contact-box .icon { color: var(--ac); }
.contact-box h3 { font-size: var(--t-h3); margin: 18px 0 12px; }
.contact-box .email { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); }
.contact-box .tel { font-size: 15px; color: var(--ink-70); margin-top: 6px; }

/* Callout / signal secteur public */
.public-signal,
.callout {
  background: var(--white); border: none; border-radius: var(--r-xl);
  padding: var(--s-7); display: grid; grid-template-columns: 1fr auto;
  gap: var(--s-7); align-items: center;
}
/* Variante centrée : une seule colonne, tout aligné au centre, les moyens de
   contact côte à côte sous le texte. */
.callout--center { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.callout--center .btn-row { justify-content: center; }

/* ==========================================================================
   Filtres (réalisations / blog)
   ========================================================================== */
/* Pas de marge basse : l'écart avec la grille est porté par le seul
   padding de la section, sinon les deux s'additionnent (40 + 40 px). */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 0; border-bottom: none; margin-bottom: 0; }
.filter-chip {
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: -0.03em;
  cursor: pointer; padding: 10px 16px; border-radius: var(--r-tag); min-height: 44px;
  border: none; background: var(--white); color: var(--ink-70);
  transition: background var(--dur-fast) linear, color var(--dur-fast) linear;
}
.filter-chip:hover { background: var(--white); color: var(--ink); }
.filter-chip[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.filter-count { margin-left: auto; align-self: center; font-size: 14px; color: var(--ink-50); }
/* La barre de filtres ne se colle plus au scroll : elle défile avec la page.
   (Ancienne classe .filters-sticky, renommée pour que le nom ne mente pas.) */
.filters-section { background: var(--paper); }

/* Chip « Type de projet » : bouton + panneau de cases à cocher */
.filter-dropdown { position: relative; }
.filter-dropdown .filter-chip { display: inline-flex; align-items: center; gap: 8px; }
.filter-dropdown .filter-chip svg { transition: transform var(--dur-fast) var(--ease); }
.filter-dropdown .filter-chip[aria-expanded="true"] svg { transform: rotate(180deg); }
.filter-dropdown__panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  width: 280px;
  background: var(--white);
  border: none;
  border-radius: 16px;
  box-shadow: var(--sh-menu);
  padding: 8px;
}
.filter-dropdown__panel.is-open { display: block; }
.filter-dropdown__opt {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px; border: none; background: transparent;
  cursor: pointer; text-align: left; min-height: 44px;
  transition: background var(--dur-fast) linear;
}
.filter-dropdown__opt:hover { background: var(--paper-2); }
.filter-dropdown__opt .box {
  width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0;
  border: 1.5px solid var(--hairline-2); background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
}
.filter-dropdown__opt .box svg { display: none; }
.filter-dropdown__opt[aria-checked="true"] .box { border-color: var(--ink); background: var(--ink); }
.filter-dropdown__opt[aria-checked="true"] .box svg { display: block; }
.filter-dropdown__opt .t { font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--ink); }
.filter-dropdown__foot { border-top: 1px solid var(--hairline); margin-top: 6px; padding-top: 6px; }
.filter-dropdown__clear {
  width: 100%; padding: 10px 12px; border-radius: 12px; border: none; background: transparent;
  text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: var(--ac); cursor: pointer;
}
.filter-dropdown__clear:disabled { color: var(--ink-50); cursor: default; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq__item { border-bottom: 1px solid var(--hairline-2); }
.faq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  background: none; border: none; cursor: pointer; text-align: left; padding: var(--s-5) 0;
  font-family: var(--font-display); font-weight: 600; font-size: 20px;
  letter-spacing: -0.02em; color: var(--ink);
}
.faq__icon { flex-shrink: 0; width: 26px; height: 26px; position: relative; transition: transform var(--dur-base) var(--ease); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--ac); }
.faq__icon::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.faq__icon::after { left: 50%; top: 0; height: 100%; width: 2px; transform: translateX(-50%); }
.faq__item.is-open .faq__icon { transform: rotate(45deg); }
.faq__a { overflow: hidden; max-height: 0; opacity: 0; transition: max-height var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); }
.faq__item.is-open .faq__a { max-height: 600px; opacity: 1; }
.faq__a-inner { padding-bottom: var(--s-5); font-size: 16px; line-height: 1.5; color: var(--ink-70); max-width: 720px; }

/* ==========================================================================
   Étude de cas
   ========================================================================== */
/* Fiche réalisation : page en blanc. Le header sticky suit le fond, et les
   plaques du gabarit (cartes « besoins ») passent en crème pour rester
   lisibles — l'inverse du reste du site. */
/* Seul le corps de page passe en blanc. Le header garde le crème du thème :
   la pastille de navigation est blanche et se fondrait dans un header blanc.
   Nav et onglet actif conservent donc leurs couleurs standard. */
body.single-realisation { background: var(--white); }
/* Titre de fiche = un nom de client : casse normale et un cran sous le display
   du reste du site, où les titres sont des phrases courtes en capitales. */
body.single-realisation h1 {
  text-transform: none;
  font-size: clamp(38px, 5vw, 64px);
}

/* En-tête de fiche collé : il reste en place pendant que le visuel défile
   par-dessus (le JS gère l'estompage). La zone collante est bornée par
   .case-intro, sinon l'en-tête resterait accroché toute la page. */
body.single-realisation .case-intro { position: relative; }
body.single-realisation .case-hero-sticky { position: sticky; top: var(--header-h); z-index: 0; }
body.single-realisation .case-visual { position: relative; z-index: 1; background: var(--white); }
@media (prefers-reduced-motion: reduce) {
  /* Ni collage ni estompage : la page redevient un simple empilement. */
  body.single-realisation .case-hero-sticky { position: static; opacity: 1 !important; }
}

/* Encadré « L'objectif » d'une fiche : mêmes rayon et retrait que le bloc CTA
   final, sur aplat crème, sans formulaire. Sur-titre à gauche, texte à droite. */
.case-goal {
  background: var(--paper);
  border-radius: 35px;
  padding: var(--s-7);
  display: grid;
  /* « auto » : la colonne épouse la pastille, tout le reste va au texte —
     une colonne en fraction laissait un vide mort après la pastille. */
  grid-template-columns: auto 1fr;
  gap: var(--s-7);
  align-items: center;
}
/* Sur aplat crème, la pastille reprend l'aspect par défaut du thème (orange,
   texte blanc), comme les autres sur-titres de la fiche. */
.case-goal .eyebrow {
  justify-self: start;
  align-self: center;
}
.case-goal p { font-size: 18px; line-height: 1.55; color: var(--ink); margin: 0; }
@media (max-width: 1023px) {
  .case-goal { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* Images agrandissables : le bouton ne doit rien ajouter visuellement. */
.zoom-trigger {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: zoom-in; -webkit-appearance: none; appearance: none;
}
.zoom-trigger > img { transition: transform var(--dur-base) var(--ease); }
.zoom-trigger:hover > img { transform: scale(1.012); }
@media (prefers-reduced-motion: reduce) {
  .zoom-trigger:hover > img { transform: none; }
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(0, 0, 0, 0.88);
  opacity: 0; transition: opacity var(--dur-base) linear;
}
.lightbox.is-open { opacity: 1; }
.lightbox__img {
  display: block; max-width: 100%; max-height: 100%;
  width: auto; height: auto; border-radius: var(--r-img);
}
.lightbox__close {
  position: absolute; top: 16px; right: 16px;
  width: 48px; height: 48px; min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.14); color: var(--white);
  font-family: var(--font-body); font-size: 30px; line-height: 1;
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.26); }

/* Informations de la fiche : fond transparent, sans filet ni cadre — les
   colonnes et l'espacement sont posés par le gabarit. */
.case-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6);
}
.case-meta .k { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: -0.03em; color: var(--ink-50); }
.case-meta .v { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; color: var(--ink); margin-top: 6px; }
.case-quote {
  margin: 0; font-family: var(--font-body); font-style: italic; font-weight: 400;
  font-size: clamp(24px, 3vw, 32px); line-height: 1.3; color: var(--ink); text-align: center;
}
.case-quote__by {
  text-align: center; margin-top: 26px; font-family: var(--font-mono); font-size: 12px;
  text-transform: uppercase; color: var(--ink-50);
}
.case-next {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-6);
  padding: var(--s-7) 0; border-top: 1px solid var(--hairline-2); border-bottom: 1px solid var(--hairline-2);
}
.case-next .lab { font-family: var(--font-mono); font-size: 12px; color: var(--ink-50); text-transform: uppercase; letter-spacing: -0.03em; }
.case-next .ti { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3); text-transform: uppercase; letter-spacing: -0.02em; color: var(--ink); margin-top: 8px; }
.case-next .arrow { font-size: 36px; color: var(--ac); }

/* ==========================================================================
   Article (blog single)
   ========================================================================== */
.reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 90; }
.reading-progress__bar { height: 100%; width: 0; background: var(--ac); transition: width 80ms linear; }

.article-head { padding: var(--s-8) 0 var(--s-7); }
.article-head .container { max-width: 880px; }
/* Titre d'article : on garde le display General Sans mais en casse de phrase.
   Les titres éditoriaux sont longs — l'ALL CAPS y coûte trop en lisibilité
   (et le site vise le RGAA). Les titres marketing restent en capitales. */
.article-head h1 {
  font-size: clamp(36px, 4.8vw, 58px);
  line-height: 1.02;
  text-transform: none;
  margin: 0;
}
.article-meta-top {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: -0.03em; text-transform: uppercase; margin-bottom: 22px;
}
.article-meta-top .cat { color: var(--ac); }
.article-meta-top .sep { color: var(--hairline-2); }
.article-meta-top .read { color: var(--ink-50); }
.article-byline { display: flex; align-items: center; gap: 14px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--hairline-2); }
.article-byline__avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.article-byline .name { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--ink); }
.article-byline .sub { font-size: 14px; color: var(--ink-50); }

.article-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--s-8); padding: var(--s-8) 0; align-items: start; }
.article-toc { position: sticky; top: calc(var(--header-h-scrolled) + 24px); }
.article-toc__title { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: -0.03em; color: var(--ink-50); margin-bottom: 14px; }
.article-toc__list { border-left: 2px solid var(--hairline-2); padding-left: 16px; }
.article-toc__list a { display: block; width: 100%; text-align: left; padding: 7px 0; font-size: 14px; line-height: 1.45; color: var(--ink-50); transition: color var(--dur-fast) linear; }
.article-toc__list a:hover { color: var(--ink); }
.article-toc__list a.is-active { color: var(--ac); font-weight: 600; }

.article-body { max-width: 720px; }
.article-body p { font-size: 18px; line-height: 1.7; color: var(--ink-70); margin: 0 0 26px; }
.article-body h2 { font-size: var(--t-h3); text-transform: none; margin: 52px 0 18px; scroll-margin-top: 120px; }
.article-body h3 { margin: 36px 0 14px; font-size: 22px; }
.article-body ul, .article-body ol { margin: 0 0 26px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.article-body ul li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.6; color: var(--ink-70); }
.article-body ul li::before { content: ""; flex-shrink: 0; margin-top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--ac); }
.article-body blockquote { margin: 36px 0; padding-left: 28px; border-left: 3px solid var(--ac); }
.article-body blockquote p { font-style: italic; font-size: 22px; line-height: 1.4; color: var(--ink); margin: 0; }
.article-body img { border-radius: var(--r-img); margin: 0 0 26px; }
.article-body .has-drop-cap:first-letter {
  float: left; font-family: var(--font-display); font-weight: 700; font-size: 64px;
  line-height: 0.82; margin-right: 14px; margin-top: 6px; color: var(--ac);
}

.article-footer { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--hairline-2); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.tag-pill {
  font-family: var(--font-display); font-weight: 600; font-size: 12px; text-transform: uppercase;
  letter-spacing: -0.03em; color: var(--ink-70); padding: 8px 16px; border: none;
  background: var(--white); border-radius: var(--r-tag);
}
.share-row { display: flex; align-items: center; gap: 10px; }
.share-row a {
  width: 44px; height: 44px; border-radius: var(--r-md); border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px; color: var(--ink-70);
  transition: border-color var(--dur-fast) linear, color var(--dur-fast) linear;
}
.share-row a:hover { border-color: var(--ink); color: var(--ink); }
.author-box {
  display: grid; grid-template-columns: 120px 1fr; gap: 28px; align-items: center;
  background: var(--white); border: none; border-radius: var(--r-xl); padding: var(--s-7);
}

/* ==========================================================================
   À propos
   ========================================================================== */
/* Équipe et partis pris : mêmes cartes blanches plates que le reste du site. */
/* Sans carte autour des portraits, l'écart doit être plus franc qu'une gouttière de grille. */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 50px; }
/* Pas de carte blanche ici : les portraits ronds posés sur le fond de page
   suffisent à structurer la grille. */
.team-member { background: transparent; border-radius: 0; padding: 0; height: 100%; text-align: center; }
/* Portrait rond : cadre carré, cadrage haut (les visages restent dans
   l'image quel que soit le format d'origine). */
.team-member__photo {
  border-radius: 50%; overflow: hidden; aspect-ratio: 1 / 1;
  /* Le rond ne remplit plus la colonne : taille bornée et centré sous le texte. */
  width: 100%; max-width: 180px; margin: 0 auto var(--s-5);
}
.team-member__photo img {
  display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1;
  object-fit: cover; object-position: center top;
}
.team-member__photo .photo-plate { border-radius: 50%; aspect-ratio: 1 / 1; }
/* Fonction : même libellé mono orange que les cartes « Bureaux ». */
.team-member .role {
  display: block; color: var(--ac); font-family: var(--font-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: -0.03em; margin: 0 0 8px;
}
.team-member .name {
  font-family: var(--font-display); font-weight: 600; font-size: 22px;
  letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); margin: 0 0 10px; text-transform: none;
}
.team-member .bio { font-size: 14px; line-height: 1.4; color: var(--ink-70); margin: 0; }

.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.value-item { background: var(--white); border-radius: var(--r-lg); padding: var(--s-5); border-top: none; height: 100%; }
.value-item h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 22px;
  letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 10px;
}
.value-item p { font-size: 14px; line-height: 1.4; color: var(--ink-70); margin: 0; }

/* Bureaux : les deux cartes côte à côte, libellé de ville en orange.
   La grille les met d'office à la même hauteur. */
.office-stack { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.office-card { padding: var(--s-7); }
.office-card .caption {
  display: block; color: var(--ac); font-family: var(--font-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: -0.03em; margin-bottom: 10px; font-weight: 600;
}
.office-card h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 24px;
  letter-spacing: -0.02em; margin: 0 0 6px;
}
.office-card p { font-size: 15px; color: var(--ink-70); margin: 0; }

/* Bande de chiffres en 2×2 (page Agence). La classe est portée par le même
   élément que .container-wide : on borne via les colonnes, pas via max-width,
   sinon le conteneur se recentre et décroche de l'alignement de la page. */
.stats-grid--pair { grid-template-columns: repeat(2, minmax(0, 360px)); gap: var(--s-8) var(--s-5); }

/* ==========================================================================
   Contact (formulaire)
   ========================================================================== */
.contact-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s-8); align-items: start; }
/* Variante des captures : une seule colonne — formulaire pleine largeur,
   puis les cartes de coordonnées empilées dessous. */
/* La classe est portée par le même élément que .container-wide : on borne
   la colonne via la grille, pas via max-width — sinon le conteneur entier
   se recentre et décroche de l'alignement du titre. */
.contact-layout--stacked { grid-template-columns: minmax(0, 880px); gap: var(--s-7); }
/* Colonne de droite : les deux cartes empilées face au formulaire. */
/* minmax(0, …) : sans ça la colonne prend la largeur min-content de son contenu
   (l'adresse e-mail, insécable) et fait déborder la page en mobile. */
.contact-aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-content: start; }
.contact-card { padding: var(--s-5) var(--s-7); }
.contact-line {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  font-size: 16px; font-weight: 500; padding: 14px 0;
  border-bottom: 1px solid var(--hairline-2);
}
.contact-line:last-child { border-bottom: none; }
.contact-line .caption { color: var(--ink-50); width: 70px; flex-shrink: 0; font-weight: 400; }
.contact-line a { min-width: 0; overflow-wrap: anywhere; }
.contact-line a:hover { color: var(--ac); }
.office { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; }
.office .caption {
  color: var(--ac); font-family: var(--font-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: -0.03em; font-weight: 600;
}
.office .addr { font-size: 15px; line-height: 1.5; color: var(--ink-70); }
.form-card { background: transparent; border: none; border-radius: 0; padding: 0; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--s-5); }
.field > .label {
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: -0.03em; font-weight: 400; color: var(--ink-70);
}
.field .req { color: var(--ac); }
.field input, .field textarea, .field select {
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  background: var(--white); border: 1px solid transparent; border-radius: var(--r-md);
  padding: 14px 16px; width: 100%; outline: none;
  transition: border-color var(--dur-fast) linear, box-shadow var(--dur-fast) linear;
}
.field textarea { resize: vertical; min-height: 120px; }
.field select {
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23979797' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--ink); box-shadow: 0 0 0 3px rgba(255, 131, 0, 0.18);
}
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--error); }
.field.has-error input:focus, .field.has-error textarea:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.18); }
.field__hint { font-size: 13px; color: var(--ink-50); }
.field__error { font-size: 13px; color: var(--error); font-weight: 500; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }

.form-success { background: var(--ink); color: var(--white); border-radius: var(--r-lg); padding: var(--s-5); }
.form-success h2, .form-success h3 { color: var(--white); }
.form-success__icon {
  width: 56px; height: 56px; border-radius: 50%; background: var(--ac);
  display: flex; align-items: center; justify-content: center; color: var(--white);
}

.contact-info__title { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: -0.03em; color: var(--ac); }
.contact-info__row { padding: var(--s-5) 0; border-top: 1px solid var(--hairline-2); }
.contact-info__row:first-child { border-top: none; }
.contact-info__row .city { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--ink); }
.contact-info__row .addr, .contact-info__row .tel { font-size: 15px; color: var(--ink-70); margin-top: 6px; line-height: 1.5; }
.contact-map { margin-top: 28px; border-radius: var(--r-img); overflow: hidden; border: none; }
.contact-map__inner { aspect-ratio: 4 / 3; background: linear-gradient(150deg, #e9e4da, #dad2c4); position: relative; }
.contact-map__grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--hairline-2) 1px, transparent 1px), linear-gradient(90deg, var(--hairline-2) 1px, transparent 1px);
  background-size: 32px 32px; opacity: 0.6;
}
.contact-map__pin { position: absolute; top: 42%; left: 46%; width: 16px; height: 16px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 0 6px var(--ac-soft); }

/* ==========================================================================
   Footer — fond crème, dans la continuité de la page (cf. prototype)
   ========================================================================== */
.site-footer { background: var(--paper); color: var(--ink); border-top: none; margin-top: var(--s-5); }
/* Gouttières : on garde celles de .container-wide, sinon le contenu colle au bord
   de l'écran en mobile et se désaligne de 32 px du reste de la page en desktop. */
.site-footer__inner { padding: var(--s-8) var(--gutter) var(--s-7); }
.site-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-8); padding-bottom: var(--s-8); }
.site-footer__about { max-width: 320px; }
.site-footer__about p { margin-top: var(--s-5); font-size: 15px; line-height: 1.55; color: var(--ink-70); }
.footer-social { margin-top: var(--s-5); display: flex; gap: 12px; }
.footer-social a {
  width: 44px; height: 44px; border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px; color: var(--ink-70);
  transition: border-color var(--dur-fast) linear, color var(--dur-fast) linear;
}
.footer-social a:hover { border-color: var(--ink); color: var(--ink); }
.footer-col__title {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-50); margin-bottom: 18px; font-weight: 400;
}
.accent-trust .footer-col__title { color: var(--ink-50); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.footer-col a { font-size: 16px; color: var(--ink-80); transition: color var(--dur-fast) linear; }
.footer-col a:hover { color: var(--ac); }
.footer-office p { font-size: 16px; line-height: 1.55; color: var(--ink-70); }
.footer-office strong { color: var(--ink); font-weight: 600; display: block; }
.site-footer__bottom {
  margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
}
.site-footer__bottom .copy { font-size: 14px; color: var(--ink-50); }
.legal-links { display: flex; gap: 22px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.legal-links a { font-size: 14px; color: var(--ink-50); }
.legal-links a:hover { color: var(--ink); }

/* ==========================================================================
   Utilitaires
   ========================================================================== */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-5); margin-bottom: var(--s-7); flex-wrap: wrap; }
.section-head h2 { margin: 16px 0 0; }
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: start; }
.split-asym { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s-7); align-items: center; }
.mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); }
.maxw-680 { max-width: 680px; } .maxw-720 { max-width: 720px; } .maxw-560 { max-width: 560px; }

/* ==========================================================================
   Contenu riche (the_content)
   ========================================================================== */
.sc-rich > * + * { margin-top: 1.25em; }
.sc-rich h2 { margin-top: 1.6em; }
.sc-rich h3 { margin-top: 1.4em; }
/* Mentions légales / confidentialité : les URLs collées en dur sont insécables
   et faisaient scroller la page en mobile. */
.sc-rich { overflow-wrap: break-word; }
.sc-rich a { overflow-wrap: anywhere; }
.sc-rich a:not(.btn):not(.wp-element-button) { color: var(--ink); border-bottom: 1.5px solid var(--ac); }
.sc-rich a:not(.btn):not(.wp-element-button):hover { color: var(--ac); }
.sc-rich figure { margin: 0; }
.sc-rich img { border-radius: var(--r-img); }
.sc-rich ul:not(.checklist) { padding-left: 1.2em; }
.sc-rich .wp-block-pullquote, .sc-rich blockquote { border-left: 3px solid var(--ac); padding-left: 28px; margin: 36px 0; }

/* ==========================================================================
   Styles de blocs Gutenberg
   ========================================================================== */
.is-style-sc-card { background: var(--white); border: none; border-radius: var(--r-lg); padding: var(--s-5); height: 100%; }
.is-style-sc-section-alt { background: var(--paper-2); border-top: none; border-bottom: none; }
.is-style-sc-section-dark { background: var(--ink); color: var(--white); }
.is-style-sc-section-dark :where(h1, h2, h3, p, cite) { color: var(--white); }
.is-style-sc-eyebrow {
  display: inline-flex !important; align-items: center;
  background: var(--ac); color: var(--white) !important;
  border-radius: var(--r-tag); padding: 8px 16px;
  font-family: var(--font-display) !important; font-weight: 600 !important;
  font-size: var(--t-eyebrow) !important; letter-spacing: -0.03em !important; text-transform: uppercase;
}

.wp-block-button.is-style-sc-primary .wp-block-button__link {
  background: var(--ac); color: #fff; border-radius: var(--r-md);
  font-family: var(--font-display); font-weight: 600; font-size: 16px; padding: 16px 24px;
}
.wp-block-button.is-style-sc-primary .wp-block-button__link:hover { background: var(--ac-hover); }
.wp-block-button.is-style-sc-secondary .wp-block-button__link {
  background: transparent; color: var(--ink); border: 1.5px solid var(--ink); border-radius: var(--r-md);
  font-family: var(--font-display); font-weight: 600; font-size: 16px; padding: 16px 24px;
}
.wp-block-button.is-style-sc-secondary .wp-block-button__link:hover { background: rgba(0, 0, 0, 0.06); }
.wp-block-button.is-style-sc-link .wp-block-button__link {
  background: none; color: var(--ink); padding: 0; border-radius: 0; border: none;
  font-family: var(--font-display); font-weight: 600;
}
.wp-block-button.is-style-sc-link .wp-block-button__link:hover { color: var(--ac); }

.sc-testimonial-quote { border: none; padding: 0; }
.sc-testimonial-quote p { font-family: var(--font-body); font-style: italic; font-weight: 400; line-height: 1.3; color: var(--ink); }
.sc-testimonial-quote cite { font-family: var(--font-mono); font-weight: 400; font-size: 12px; text-transform: uppercase; color: var(--ink-50); font-style: normal; }

/* Accordéon natif de l'éditeur : même habillage que la FAQ des gabarits
   (.faq__item), pour qu'une FAQ posée dans une page se fonde dans le site. */
.wp-block-details { border-bottom: 1px solid var(--hairline-2); padding: var(--s-5) 0; }
.wp-block-details summary {
  position: relative; padding-right: 46px;
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  letter-spacing: -0.02em; color: var(--ink); cursor: pointer; list-style: none;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
/* Le « + » orange, qui bascule en « × » à l'ouverture. */
.wp-block-details summary::before,
.wp-block-details summary::after {
  content: ""; position: absolute; right: 0; background: var(--ac);
  transition: transform var(--dur-base) var(--ease);
}
.wp-block-details summary::before { top: 50%; width: 26px; height: 2px; transform: translateY(-50%); }
.wp-block-details summary::after { top: 50%; right: 12px; width: 2px; height: 26px; transform: translateY(-50%); }
.wp-block-details[open] summary::before { transform: translateY(-50%) rotate(45deg); }
.wp-block-details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.wp-block-details > :not(summary) { margin-top: var(--s-4); font-size: 16px; line-height: 1.5; color: var(--ink-70); max-width: 720px; }

/* Pagination */
.wp-block-query-pagination, .pagination, .nav-links {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase;
}
.nav-links .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 14px;
  border: none; background: var(--white); border-radius: var(--r-tag); color: var(--ink-70);
}
.nav-links .page-numbers.current { background: var(--ink); color: var(--white); }
.nav-links .page-numbers:hover:not(.current) { color: var(--ink); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  :root { --gutter: 32px; }
}

@media (max-width: 1023px) {
  .cards-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .cards-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .stats-grid, .stats-grid--3, .case-results { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: var(--s-7); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  /* !important : bat les grid-template-columns posés en style inline dans les gabarits.
     minmax(0, 1fr) plutôt que 1fr : une colonne 1fr ne descend pas sous la largeur
     min-content de son contenu (mots longs, e-mails, URLs) et fait déborder la page. */
  .hero__split, .split-2, .split-asym, .exp-block, .public-signal, .callout,
  .contact-layout, .case-hero, .case-split, .case-next-grid
  { grid-template-columns: minmax(0, 1fr) !important; gap: var(--s-7); }
  .exp-block.is-reverse .exp-block__text, .exp-block.is-reverse .exp-block__media { order: 0; }
  .article-layout { grid-template-columns: 1fr !important; gap: var(--s-6); }
  .article-toc { display: none; }
  .cta-band__inner { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-7) var(--s-5); }
  .public-signal, .callout { padding: var(--s-5); }
  .testimonial { grid-template-columns: minmax(0, 1fr) !important; }
  /* La signature passe à la ligne : le « · » ne doit pas ouvrir la ligne suivante. */
  .testimonial__by .sep { display: none; }
  /* Informations de la fiche : 4 colonnes → 2 en tablette (1 sous 767 px). */
  .case-meta { grid-template-columns: repeat(2, 1fr) !important; gap: var(--s-5) var(--s-6); }
  /* En-tête empilé : le logo du projet s'aligne sur le texte. */
  .case-hero__logo { justify-content: flex-start !important; }
  .process-rows .row .body, .ao-step__body { grid-template-columns: 1fr !important; gap: 10px; }
  .trust-pill { flex-direction: column; gap: var(--s-4); padding: 20px 24px; border-radius: var(--r-xl); }
  .trust-pill__label { margin-left: 0; text-align: center; white-space: normal; }
  .logo-marquee { max-width: 100%; width: 100%; }
}

/* Bento : passage en 2 colonnes */
@media (max-width: 860px) {
  .exp-bento { grid-template-columns: 1fr 1fr; }
  .exp-bento > *, .exp-bento > .t-feature, .exp-bento > .t-2, .exp-bento > .t-3 { grid-column: span 2; }
  .exp-bento > .t-4, .exp-bento > .t-5 { grid-column: span 1; }
  .exp-bento .service-card { min-height: 220px; }
  .exp-bento > .t-feature { min-height: 300px; }
  .exp-bento .service-card.t-feature h3 { font-size: 42px; }
  .cards-grid--3, .compliance-grid, .sc-conformite-grid { grid-template-columns: 1fr !important; }
}

/* Hero : le visuel passe sous le texte, plus d'image de fond */
@media (max-width: 960px) {
  /* :not(.hero--video) — l'accueil garde son visuel en fond (voir plus bas) ;
     seuls les hero sans vidéo repassent sur fond crème, visuel dans le flux. */
  .hero:not(.hero--video) {
    background-image: none !important;
    margin-top: 0;
    padding: var(--s-7) 0;
  }
  .hero__split { min-height: 0; }
  .hero__visual-m { display: block; border-radius: var(--r-xl); overflow: hidden; }
  .hero__visual-m img { width: 100%; height: auto; }
  /* Hero sans vidéo (pages Expertise) : header opaque crème, donc logo sombre. */
  .site-header.is-home:not(.is-scrolled) { background: var(--paper); }
  .site-header.is-home:not(.is-scrolled) .wordmark__img { opacity: 1; }
  .site-header.is-home:not(.is-scrolled) .wordmark__img--light { opacity: 0; }
  .site-header.is-home:not(.is-scrolled) .nav-burger span { background: var(--ink); }
  .site-header.is-home:not(.is-scrolled) .btn-devis { border-color: var(--trust); color: var(--trust); }

  /* --- Accueil : la vidéo de fond est conservée en mobile ---------------
     Le hero garde donc son traitement desktop (visuel plein cadre, voile,
     texte clair), au lieu de repasser sur fond crème avec l'image dans le
     flux. Ciblé sur .hero--video : les autres hero gardent le repli ci-dessus. */
  .hero.hero--video {
    margin-top: calc(-1 * var(--header-h));
    padding: calc(var(--header-h) + var(--s-7)) 0 var(--s-8);
  }
  .hero.hero--video .hero__video { display: block; }
  /* Voile vertical et non plus horizontal : en mobile le texte occupe toute la
     largeur, un dégradé dense seulement à gauche laisserait la fin des lignes
     sur une zone claire du visuel. */
  .hero.hero--video::before {
    display: block;
    background: linear-gradient(
      180deg,
      rgba(17, 17, 17, 0.78) 0%,
      rgba(17, 17, 17, 0.66) 55%,
      rgba(17, 17, 17, 0.74) 100%
    );
  }
  /* L'image du flux ferait doublon avec la vidéo qui la recouvre déjà. */
  .hero.hero--video .hero__visual-m { display: none; }
  /* Le header repasse sur le visuel : transparent, logo clair. */
  .site-header.has-hero-media:not(.is-scrolled) { background: transparent; }
  .site-header.has-hero-media:not(.is-scrolled) .wordmark__img { opacity: 0; }
  .site-header.has-hero-media:not(.is-scrolled) .wordmark__img--light { opacity: 1; }
  .site-header.has-hero-media:not(.is-scrolled) .nav-burger span { background: var(--white); }
  .site-header.has-hero-media:not(.is-scrolled) .btn-devis { border-color: var(--white); color: var(--white); }
}

@media (max-width: 767px) {
  :root { --gutter: 20px; --header-h: 5.5rem; --header-h-scrolled: 4.5rem; }
  .section { padding: 0 0 var(--s-8) !important; }
  .section--faq { padding: var(--s-8) 0 !important; }
  .section--alt, .section--dark { padding: var(--s-8) 0 !important; }
  .stats-band { padding: var(--s-8) 0; margin-bottom: var(--s-8); }
  .trust-pill { margin-bottom: var(--s-8); }
  .cards-grid--4, .cards-grid--3, .cards-grid--2, .stats-grid, .stats-grid--3,
  .process-grid, .team-grid, .values-grid, .form-grid-2, .case-meta,
  .case-results, .office-stack { grid-template-columns: minmax(0, 1fr) !important; }
  .grid { grid-template-columns: minmax(0, 1fr) !important; }
  .checklist, .checklist--lg, .exp-block__items { grid-template-columns: 1fr !important; }
  .exp-block { padding: var(--s-7) 0; }
  .exp-block h2 { font-size: 32px; }
  .exp-block__num { font-size: 56px; }
  .exp-row { grid-template-columns: 1fr; gap: var(--s-4); }
  .exp-row .col-cta { justify-self: start; }
  .stat__value { font-size: 44px; }
  .form-card { padding: 0; }
  /* Libellé au-dessus de la valeur, comme la carte « bureaux » juste en dessous :
     en ligne, l'e-mail ne tient pas et le rendu devient irrégulier. */
  .contact-card { padding: var(--s-5); }
  .contact-line { flex-direction: column; align-items: flex-start; gap: 4px; }
  .contact-line .caption { width: auto; }
  .public-signal, .callout { grid-template-columns: minmax(0, 1fr) !important; padding: var(--s-5); }
  .process-rows .row, .ao-step { grid-template-columns: 1fr !important; gap: 6px; }
  .process-rows .row .bignum, .ao-step__num { font-size: 32px; }
  .case-next { flex-wrap: wrap; gap: 14px; }
  /* Projet précédent / suivant empilés : le filet vertical devient horizontal,
     et on retire les paddings latéraux prévus pour deux colonnes. */
  .case-next-grid > a { padding: 24px 0 !important; border-right: none !important; justify-content: flex-start !important; text-align: left !important; }
  .case-next-grid > a + a { border-top: 1px solid var(--hairline); }
  /* Flèche en tête pour les deux liens : sinon « précédent » est indenté et
     « suivant » colle au bord, l'alignement paraît cassé. */
  .case-next-grid > a > span { order: -1; flex: none; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .site-footer__about { grid-column: 1 / -1; }
  /* Cibles tactiles : les liens font 20 px de haut, on les porte à 42 px sans
     changer le rythme (le gap de la liste passe dans le padding des liens). */
  .footer-col ul { gap: 0; }
  .footer-col a { display: block; padding: 11px 0; }
  /* Liens fléchés : zone tactile de 44 px via un pseudo-élément, sans décaler la mise en page. */
  .btn--link { position: relative; }
  .btn--link::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 44px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
  .t-lead { font-size: 16px; }
  .cta-band__inner { border-radius: var(--r-xl); }
  .exp-bento { grid-template-columns: 1fr; }
  .exp-bento > *, .exp-bento > .t-feature, .exp-bento > .t-2,
  .exp-bento > .t-3, .exp-bento > .t-4, .exp-bento > .t-5 { grid-column: span 1; }
  .exp-bento .service-card.t-feature h3 { font-size: 34px; }
  .service-card { padding: var(--s-5); min-height: 0; }
  .service-card h3 { font-size: 24px; }
  /* Cartes réalisation en 1 colonne */
  .sc-real-grid { grid-template-columns: 1fr !important; }
  /* « Notre différence » : 2×2 */
  .sc-diff-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .sc-diff-grid .minicard { padding: 18px 16px; }
  .sc-diff-grid .minicard .t { font-size: 18px; }
  .sc-diff-grid .minicard .d { font-size: 13px; }
  .sc-home-stats { grid-template-columns: 1fr 1fr !important; gap: var(--s-6) var(--s-5); }
  .sc-serv-grid { grid-template-columns: 1fr !important; }
  .sc-home-logos { padding-bottom: 0 !important; }
  .logo-band__quote { margin-top: 32px; }
}

@media (max-width: 480px) {
  .site-footer__cols { grid-template-columns: 1fr; }
  .stat__value { font-size: 40px; }
  .sc-diff-grid, .sc-home-stats { grid-template-columns: 1fr !important; }
  .trust-pill { padding: 16px; }
  /* Les <br> des titres sont une coupure voulue pour les grandes largeurs.
     Sur un mobile, la ligne se casse déjà toute seule et la coupure forcée
     n'ajoute qu'une ligne de plus (« Un partenaire / du secteur / public. »
     tenait sur 4 lignes au lieu de 3). On laisse le texte couler ; le seuil
     est à 480 px pour garder l'intention typographique sur tablette. */
  .page-head h1 br,
  .page-hero h1 br { display: none; }
}

/* Très petits écrans (320-360 px : iPhone SE 1re génération, Android compacts).
   Le plancher de --t-h1 (44 px) dépasse la largeur disponible sur les mots longs
   et insécables (« gratuitement », « Confidentialité »). Volontairement borné à
   360 px pour ne rien changer à partir de 375 px (iPhone SE 2/3, 12/13 mini). */
@media (max-width: 360px) {
  :root { --t-h1: clamp(33px, 10.3vw, 44px); }
  .cta-band__inner { padding: var(--s-7) var(--s-4); }
}