/* ==========================================================================
   GARAGE PREMIUM — Feuille de styles
   Atelier de précision · industriel premium · graphite / rouge course / blanc cassé

   SOMMAIRE
     1. DESIGN TOKENS
     2. RESET
     3. BASE
     4. LAYOUT UTILITIES
     5. COMPOSANTS
     6. SECTIONS
     7. RESPONSIVE
     8. ACCESSIBILITÉ / REDUCED MOTION
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {

  /* ---------- Palette (figée) ---------- */
  --graphite:        #151719;   /* fond principal                       */
  --graphite-deep:   #0E1011;   /* fonds profonds, header compacté      */
  --graphite-2:      #222527;   /* surfaces surélevées, cartes          */
  --red:             #C8102E;   /* accent unique, rare                  */
  --off-white:       #F2EFE8;   /* texte principal, filets marqués      */
  --text-2:          #A7A7A2;   /* texte secondaire                     */

  /* Nuance dérivée du rouge validé (assombrie au graphite profond) :
     réservée aux états de survol. Aucune nouvelle couleur introduite.
     Valeur statique d'abord, pour les navigateurs sans color-mix(). */
  --red-pressed:     #AE102A;
  --red-pressed:     color-mix(in srgb, var(--red) 86%, var(--graphite-deep));

  /* ---------- Filets techniques ---------- */
  --rule:            rgba(242, 239, 232, 0.14);  /* filet standard      */
  --rule-strong:     rgba(242, 239, 232, 0.26);  /* filet marqué        */
  --rule-faint:      rgba(242, 239, 232, 0.05);  /* grille de fond      */
  --surface-hover:   rgba(242, 239, 232, 0.04);

  /* ---------- Géométrie ---------- */
  /* Angle de coupe unique sur tout le site : une seule valeur à changer
     pour faire évoluer la géométrie de l'ensemble des blocs. */
  --cut:             16px;
  --cut-sm:          8px;

  /* ---------- Typographie ---------- */
  --font-display:    'Bebas Neue', 'Bebas Fallback', sans-serif;
  --font-text:       'Barlow Condensed', 'Barlow Fallback', sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --track-mono:      0.16em;    /* interlettrage des labels techniques  */
  --track-ui:        0.09em;    /* interlettrage boutons / navigation   */

  /* ---------- Rythme ---------- */
  --container:       1360px;
  --gutter:          clamp(1.25rem, 4vw, 3rem);
  --strip-h:         30px;      /* bandeau d'étude de cas               */
  --header-h:        84px;
  --header-h-sm:     64px;      /* header compacté                      */
  --section-y:       clamp(4.5rem, 9vw, 8rem);   /* respiration verticale des sections */
  --dim-tick:        11px;      /* longueur des traits d'about de la cote */

  /* ---------- Mouvement ----------
     Trois durées, pas une de plus. Court, nerveux, précis.
     Rien au-delà de 280 ms sur ce site. */
  --d-1:             120ms;     /* micro-états : pression, survol       */
  --d-2:             180ms;     /* transitions d'interface              */
  --d-3:             260ms;     /* apparitions                          */
  --ease-out:        cubic-bezier(0.16, 0.84, 0.28, 1);   /* départ franc, arrivée nette */
  --ease-in-out:     cubic-bezier(0.5, 0, 0.2, 1);

  /* Le header passe au-dessus du panneau mobile : le bouton de fermeture
     doit rester visible et cliquable tant que le menu est ouvert. */
  --z-nav:           50;
  --z-header:        60;
  --z-skip:          70;
}


/* --------------------------------------------------------------------------
   Polices de repli calibrées
   Bebas Neue et Barlow Condensed sont très condensées. Si le CDN est lent ou
   indisponible, une substitution large ferait exploser la mise en page et
   provoquerait un décalage visible au chargement (CLS).
   size-adjust ramène le repli système à une largeur comparable : la
   composition tient dans tous les cas, avec ou sans les polices distantes.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Bebas Fallback';
  src: local('Arial Narrow'), local('Helvetica Neue Condensed'),
       local('DejaVu Sans Condensed'), local('Arial'), local('Helvetica');
  size-adjust: 62%;
  ascent-override: 108%;
  descent-override: 18%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Barlow Fallback';
  src: local('Arial Narrow'), local('Helvetica Neue Condensed'),
       local('DejaVu Sans Condensed'), local('Arial'), local('Helvetica');
  size-adjust: 88%;
  ascent-override: 104%;
  descent-override: 24%;
  line-gap-override: 0%;
}


/* ==========================================================================
   2. RESET
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, h4, p,
figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }

ul, ol { list-style: none; }

img, svg, video { display: block; max-width: 100%; }

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

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

:where(h1, h2, h3) { text-wrap: balance; }


/* ==========================================================================
   3. BASE
   ========================================================================== */

html { scroll-behavior: smooth; }

body {
  min-height: 100svh;
  background: var(--graphite);
  color: var(--off-white);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.55;
  /* Fond très légèrement plus profond vers le bas : donne de la matière
     au graphite sans jamais devenir un dégradé visible. */
  background-image: linear-gradient(180deg, var(--graphite) 0%, var(--graphite-deep) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Verrou de scroll pendant l'ouverture du menu mobile (posé en JS). */
body.is-locked { overflow: hidden; }

/* ---------- Sélection : le rouge sert ici de repère fonctionnel ---------- */
::selection { background: var(--red); color: var(--off-white); }

/* ---------- Focus visible ----------
   Contraste maximal sur graphite. Le décalage évite que l'anneau ne colle
   au glyphe et reste lisible sur les fonds sombres. */
:focus-visible {
  outline: 2px solid var(--off-white);
  outline-offset: 3px;
  border-radius: 1px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- Titres ---------- */
.hero__title,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.012em;
  line-height: 0.9;
  text-transform: uppercase;
}

/* ---------- Filets et labels techniques ---------- */

/* Petit repère rouge : sert à ouvrir une ligne de label. Rare par définition. */
.rule-tick {
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--red);
  vertical-align: middle;
  flex: none;
}

/* Label monospace : tout le vocabulaire « atelier » passe par là. */
.tag, .idx, .shot__label,
.hero__eyebrow, .hero__specs, .hero__cue-text, .case-strip {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
}


/* ==========================================================================
   4. LAYOUT UTILITIES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Conteneur resserré pour les blocs de lecture longue (FAQ). */
.container--narrow { max-width: 940px; }

/* Lecteurs d'écran uniquement */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Coins coupés ----------
   Géométrie commune : angle supérieur droit tranché.
   .cut-edge redessine le filet manquant le long de la coupe. */
.cut {
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    0 100%
  );
}

.cut-edge { position: relative; }

.cut-edge::after {
  content: "";
  position: absolute;
  top: calc(var(--cut) / 2);
  right: calc(var(--cut) / 2);
  width: calc(var(--cut) * 1.4142);
  height: 1px;
  background: var(--rule-strong);
  transform: translate(50%, -50%) rotate(45deg);
  pointer-events: none;
}

/* ---------- Séquence d'entrée ----------
   État initial appliqué uniquement si JS est disponible : sans JS, le
   contenu s'affiche immédiatement et reste entièrement lisible. */
.js [data-intro] {
  opacity: 0;
  transform: translateY(12px);
}

.js .is-ready [data-intro] {
  opacity: 1;
  transform: none;
  transition:
    opacity   var(--d-3) var(--ease-out) calc(var(--i, 0) * 55ms),
    transform var(--d-3) var(--ease-out) calc(var(--i, 0) * 55ms);
}

/* Base des révélations au scroll (sections des blocs suivants). */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  /* Même échelonnage que la séquence du hero : 55 ms entre deux éléments,
     piloté par --i posé sur l'élément. */
  transition:
    opacity   var(--d-3) var(--ease-out) calc(var(--i, 0) * 55ms),
    transform var(--d-3) var(--ease-out) calc(var(--i, 0) * 55ms);
}


/* ==========================================================================
   5. COMPOSANTS
   ========================================================================== */

/* ---------- 5.1 Lien d'évitement ---------- */
.skip-link {
  position: fixed;
  top: 0; left: 50%;
  z-index: var(--z-skip);
  transform: translate(-50%, -120%);
  padding: 0.75rem 1.5rem;
  background: var(--off-white);
  color: var(--graphite-deep);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  transition: transform var(--d-2) var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }


/* ---------- 5.2 Icônes ---------- */
.icon {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}


/* ---------- 5.3 Boutons ----------
   Le focus est dessiné en ombre interne : un outline classique serait
   rogné par le clip-path des coins coupés et deviendrait invisible. */
.btn {
  --cut: var(--cut-sm);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0 1.5rem;
  font-family: var(--font-text);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    0 100%
  );
  transition:
    background-color var(--d-1) var(--ease-out),
    color            var(--d-1) var(--ease-out),
    box-shadow       var(--d-1) var(--ease-out),
    transform        var(--d-1) var(--ease-out);
}

.btn:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 2px var(--graphite-deep),
    inset 0 0 0 4px var(--off-white);
}

/* Retour tactile : le bouton répond à la pression, brièvement. */
.btn:active { transform: translateY(1px); }

/* Action principale — rouge course, texte blanc cassé (contraste 5,1:1, AA). */
.btn--primary {
  background: var(--red);
  color: var(--off-white);
}
.btn--primary:hover { background: var(--red-pressed); }

/* Actions secondaires — filet seul. Le rouge reste réservé à l'action n°1. */
.btn--ghost {
  color: var(--off-white);
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}
.btn--ghost:hover {
  background: var(--surface-hover);
  box-shadow: inset 0 0 0 1px var(--off-white);
}
.btn--ghost:focus-visible {
  box-shadow:
    inset 0 0 0 2px var(--graphite-deep),
    inset 0 0 0 4px var(--off-white);
}

.btn--sm { min-height: 42px; padding: 0 1.15rem; font-size: 0.85rem; }


/* ---------- 5.4 Bandeau d'étude de cas ---------- */
.case-strip {
  position: relative;
  z-index: calc(var(--z-header) + 1);
  height: var(--strip-h);
  background: var(--graphite-deep);
  border-bottom: 1px solid var(--rule);
  color: var(--text-2);
  font-size: 0.6875rem;
}
.case-strip__inner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 100%;
}
.case-strip__dot {
  width: 6px; height: 6px;
  flex: none;
  background: var(--red);
}
.case-strip p {
  line-height: 1;
  /* Le bandeau doit tenir sur une seule ligne quelle que soit la largeur :
     la précision de la mise en page prime sur l'exhaustivité de la mention. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ---------- 5.4 bis  COTE TECHNIQUE — signature du projet ----------
   Le trait de cotation d'un plan d'atelier : une ligne fine fermée à ses
   deux extrémités par des traits d'about perpendiculaires, la valeur
   inscrite dans la coupure de la ligne.
   C'est le vocabulaire du dessin d'ingénierie et du contrôle qualité —
   il dit la mesure et la tolérance, jamais l'interface.

   RÈGLE D'EMPLOI : une seule cote par section, jamais deux dans le même
   écran. Elle porte l'indice de la section (01, 02, 03…) et devient le
   système de numérotation du site.
   Variantes prévues : .dim--v (verticale, posée ici) et .dim--h
   (horizontale, pour les blocs suivants). */

.dim {
  position: absolute;
  z-index: 1;
  color: var(--text-2);
  pointer-events: none;
}

.dim--v {
  top: 0;
  bottom: 0;
  width: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rule-strong);
}

/* Traits d'about : les deux extrémités fermées de la cote. */
.dim--v::before,
.dim--v::after {
  content: "";
  position: absolute;
  left: 50%;
  width: var(--dim-tick);
  height: 1px;
  background: var(--rule-strong);
  transform: translateX(-50%);
}
.dim--v::before { top: 0; }
.dim--v::after  { bottom: 0; }

/* La valeur interrompt la ligne. Le fond reprend le graphite du décor
   (moyenne des deux graphites du dégradé de page) pour que la coupure
   soit nette sans introduire de couleur. */
.dim__value {
  flex: none;
  writing-mode: vertical-rl;
  padding-block: 0.6rem;
  background: #121416;
  background: color-mix(in srgb, var(--graphite), var(--graphite-deep));
  font-family: var(--font-mono);
  font-size: 0.625rem;
  line-height: 1;
  letter-spacing: var(--track-mono);
}


/* Variante horizontale : c'est elle qui ouvre chaque section.
   Elle remplace le séparateur de section — un seul trait fait à la fois la
   coupure, l'indice et la signature.
   NOTE : le hero utilise .dim--v et bascule à l'horizontale sous 1180 px
   via une règle dédiée (§ 7). Les deux géométries partagent --dim-tick ;
   une troisième variante justifierait de les factoriser. */
.dim--h {
  position: relative;
  width: 100%;
  height: 1px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: var(--rule-strong);
}

.dim--h::before,
.dim--h::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1px;
  height: var(--dim-tick);
  background: var(--rule-strong);
  transform: translateY(-50%);
}
.dim--h::before { left: 0; }
.dim--h::after  { right: 0; }

.dim--h .dim__value {
  writing-mode: horizontal-tb;
  padding-block: 0;
  padding-inline: 0.65rem;
  margin-left: 2.25rem;
}


/* ---------- 5.5 Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid transparent;
  transition:
    height          var(--d-2) var(--ease-out),
    background-color var(--d-2) var(--ease-out),
    border-color    var(--d-2) var(--ease-out);
  height: var(--header-h);
}

/* Le header n'est habillé qu'une fois détaché du haut de page : sur le hero
   il reste transparent pour ne pas couper la composition. */
.site-header.is-compact {
  height: var(--header-h-sm);
  background: rgba(14, 16, 17, 0.92);
  border-bottom-color: var(--rule);
  backdrop-filter: blur(8px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  height: 100%;
}

/* Marque */
.brand { display: flex; align-items: center; gap: 0.75rem; margin-right: auto; }

.brand__mark {
  --cut: 7px;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  background: var(--graphite-2);
  box-shadow: inset 0 0 0 1px var(--rule-strong);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0.04em;
  padding-top: 3px;
  transition: background-color var(--d-1) var(--ease-out);
}
.brand:hover .brand__mark { background: var(--red); }

.brand__text { display: flex; flex-direction: column; line-height: 1; }

.brand__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.brand__baseline {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-2);
  margin-top: 4px;
}

/* Navigation desktop */
.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }

.nav__link {
  position: relative;
  display: block;
  padding: 0.4rem 0;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--text-2);
  transition: color var(--d-1) var(--ease-out);
}
.nav__link:hover { color: var(--off-white); }

/* Filet rouge tracé sous le lien : court, net, jamais décoratif. */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-1) var(--ease-out);
}
.nav__link:hover::after { transform: scaleX(1); }

/* Actions du header */
.site-header__actions { display: flex; align-items: center; gap: 1rem; }

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--text-2);
  transition: color var(--d-1) var(--ease-out);
}
.header-phone:hover { color: var(--off-white); }


/* ---------- 5.6 Bouton burger ---------- */
.burger {
  display: none;
  place-items: center;
  width: 44px; height: 44px;
  margin-right: -8px;
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}
.burger__bars { display: block; width: 20px; }
.burger__bars i {
  display: block;
  height: 1.5px;
  background: var(--off-white);
  transition: transform var(--d-2) var(--ease-out), opacity var(--d-1) linear;
}
.burger__bars i + i { margin-top: 5px; }

/* État ouvert : les deux barres se croisent. */
[aria-expanded="true"] .burger__bars i:first-child { transform: translateY(3.25px) rotate(45deg); }
[aria-expanded="true"] .burger__bars i:last-child  { transform: translateY(-3.25px) rotate(-45deg); }


/* ---------- 5.7 Menu mobile ---------- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-nav);
  background: var(--graphite-deep);
  opacity: 0;
  transition: opacity var(--d-2) var(--ease-out);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav.is-open { opacity: 1; }

.mobile-nav__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding-top: calc(var(--header-h) + var(--strip-h) + 1rem);
  padding-bottom: 2rem;
  /* Sur les écrans très courts, sept entrées plus le bloc de contact
     dépassent la hauteur disponible : le panneau défile au lieu de rogner
     les coordonnées. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-nav__list { border-top: 1px solid var(--rule); }

.mobile-nav__list a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: color var(--d-1) var(--ease-out);
}
.mobile-nav__list a:hover { color: var(--red); }

.mobile-nav__list .idx {
  font-size: 0.6875rem;
  color: var(--text-2);
}

.mobile-nav__foot { display: grid; gap: 1rem; }
.mobile-nav__foot .btn { width: 100%; }

.mobile-nav__meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--text-2);
  text-transform: uppercase;
}


/* ---------- 5.8 En-tête de section ----------
   Structure commune à toutes les sections : la cote de plan ouvre le bloc,
   le sur-titre monospace annonce, le titre Bebas affirme. */
.sec-head {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.sec-head__eyebrow {
  margin-top: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--text-2);
}

.sec-head__title {
  max-width: 20ch;
  margin-top: 0.85rem;
  font-size: clamp(2.25rem, 4.2vw, 3.75rem);
  line-height: 0.92;
}

.sec-head__lead {
  max-width: 56ch;
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-2);
}


/* ---------- 5.9 Note de section ----------
   Mention de démonstration, volontairement effacée : elle informe sans
   entrer en concurrence avec le contenu. */
.section-note {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--text-2);
}

/* ---------- 5.10 Retour TOSIT ----------
   Repère flottant vers le portfolio TOSIT. Coin coupé réemployé (.cut,
   --cut-sm) pour rester dans la même famille géométrique que .btn et
   .brand__mark, plutôt que d'introduire un nouveau vocabulaire visuel.
   Positionné sous le bandeau d'étude de cas + header (--strip-h + --header-h)
   pour ne jamais chevaucher la marque "GP" en haut à gauche, y compris avant
   tout défilement. z-index sous --z-nav : le panneau mobile plein écran le
   recouvre naturellement à l'ouverture, sans code supplémentaire. Lien
   direct (pas d'history.back()) : fonctionne même sans historique de
   navigation si la démo est ouverte directement. */
.tosit-return {
  --cut: var(--cut-sm);
  position: fixed;
  top: calc(var(--strip-h) + var(--header-h) + 28px);
  left: var(--gutter);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1.05rem;
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    0 100%
  );
  background: rgba(21, 23, 25, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--rule-strong);
  color: var(--off-white);
  font-family: var(--font-text);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: var(--track-ui);
  text-decoration: none;
  transition: background var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out);
}
.tosit-return__arrow {
  color: var(--red);
  font-size: 0.95rem;
  line-height: 1;
  transition: transform var(--d-2) var(--ease-out);
}
@media (hover: hover) {
  .tosit-return:hover {
    background: rgba(21, 23, 25, 0.85);
    border-color: var(--rule-strong);
    transform: translateY(-2px);
  }
  .tosit-return:hover .tosit-return__arrow { transform: translateX(-3px); }
}
.tosit-return:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}
@media (max-width: 1024px) {
  .tosit-return { top: calc(var(--strip-h) + var(--header-h) + 20px); }
}
@media (max-width: 480px) {
  .tosit-return { left: 1rem; padding: 0 0.85rem; font-size: 0.78rem; }
}
/* body.is-locked est déjà posé par js/main.js à l'ouverture du panneau
   mobile plein écran : réemployé ici pour éviter un sliver visuel du
   bouton derrière le panneau, sans toucher au script existant. */
body.is-locked .tosit-return { opacity: 0; pointer-events: none; }


/* ==========================================================================
   6. SECTIONS
   ========================================================================== */

/* ---------- 6.0 Rythme commun ---------- */
.section { padding-block: var(--section-y); }

/* Le header est collant : sans cette marge, une arrivée par ancre place le
   haut de la section sous le header et masque la cote et le sur-titre. */
.section,
.hero { scroll-margin-top: calc(var(--header-h) + 0.75rem); }

/* Section contrastée : surface légèrement relevée pour marquer une
   respiration dans la page sans changer de palette. */
.section--alt { background: var(--graphite-deep); }

/* ---------- 6.1 HERO ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* Hauteur calée sur la fenêtre réelle (svh) moins les éléments fixes :
     garantit que les trois CTA restent au-dessus de la ligne de flottaison. */
  min-height: calc(100svh - var(--header-h) - var(--strip-h));
  padding-block: clamp(2.5rem, 6vh, 5rem);
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(1.5rem, 4vh, 3rem));
  overflow: hidden;
}

/* Grille discrète : six colonnes et une ligne d'horizon.
   Perceptible en périphérie, jamais lisible au premier regard. */
.hero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, var(--rule-faint) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, transparent calc(50% - 0.5px), var(--rule-faint) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  background-size: calc(100% / 6) 100%, 100% 100%;
  /* Atténuation vers le centre : la grille encadre, elle ne traverse pas. */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 35%, transparent 65%, #000 100%);
          mask-image: linear-gradient(90deg, #000 0%, transparent 35%, transparent 65%, #000 100%);
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  width: 100%;
}

/* --- Colonne éditoriale --- */

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.75rem;
  color: var(--text-2);
  margin-bottom: 1.75rem;
}

.hero__title {
  font-size: clamp(3rem, 6.6vw, 6.25rem);
  line-height: 0.86;
  margin-bottom: 1.5rem;
  /* Les retours de ligne sont composés à la main : on désactive l'équilibrage
     automatique qui entrerait en conflit avec eux. */
  text-wrap: initial;
}

/* Accent unique de la page : un seul mot en rouge course.
   Grand corps uniquement — le rouge sur graphite ne passe pas AA en petit texte. */
.hero__title em {
  font-style: normal;
  color: var(--red);
}

.hero__lead {
  max-width: 52ch;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: 2.25rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.75rem;
}

/* Bandeau technique : trois données pratiques, filets de séparation. */
.hero__specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.hero__spec dt {
  font-size: 0.625rem;
  color: var(--text-2);
  margin-bottom: 0.5rem;
}
.hero__spec dd {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--off-white);
}

/* --- Colonne visuelle --- */

.hero__visual { position: relative; }

/* Tension de composition (grands écrans uniquement) :
   le bloc visuel est décalé vers le bas pour ne plus s'aligner exactement
   sur le bloc éditorial, et la photo principale déborde vers l'extérieur
   du conteneur. La grille tient, le cadre respire. */
@media (min-width: 1181px) {
  .hero__visual { transform: translateY(1.75rem); }

  /* Le débord se fait dans la gouttière du conteneur, jamais au-delà :
     la photo casse la colonne sans qu'aucun élément ne sorte de l'écran. */
  .shot--main { width: calc(100% + var(--gutter) * 0.75); }

  /* La cote se place dans la gouttière entre les deux colonnes. */
  .dim--v { left: clamp(-2.75rem, -2.4vw, -1.5rem); }
}

/* NOTE : .shot est né dans le hero mais sert désormais de composant partagé
   (atelier, savoir-faire). Les proportions passent par un modificateur. */
.shot {
  position: relative;
  background: var(--graphite-2);
  box-shadow: inset 0 0 0 1px var(--rule);
  overflow: hidden;
}

.shot--portrait  { aspect-ratio: 4 / 5; }
.shot--square    { aspect-ratio: 1 / 1; }
.shot--landscape { aspect-ratio: 16 / 10; }
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Les photos de démonstration sont désaturées et assombries pour se fondre
     dans le graphite : la matière prime sur la couleur du sujet. */
  filter: grayscale(0.55) contrast(1.08) brightness(0.82);
}

/* Le visuel ne doit jamais forcer un défilement pour être vu en entier :
   sa hauteur est plafonnée par la fenêtre, le cadrage s'élargit au besoin. */
.shot--main {
  aspect-ratio: 4 / 5;
  /* La marge basse réserve la place du débord de la vignette : le
     chevauchement doit rester entièrement visible sans défilement. */
  max-height: calc(100svh - var(--header-h) - var(--strip-h) - 7rem);
}

/* Étiquette d'angle : repère technique, pas décor. */
.shot__label {
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
  padding: 0.5rem 0.85rem;
  background: var(--graphite-deep);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 0.625rem;
  color: var(--text-2);
}

.shot__caption {
  position: absolute;
  right: 0; bottom: 0;
  z-index: 2;
  padding: 0.4rem 0.75rem;
  background: var(--graphite-deep);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* Balayage lumineux : une seule passe au chargement, opacité maximale 5 %.
   Déclenché par .is-scanning, retiré ensuite — aucune boucle. */
.shot__scan {
  position: absolute;
  left: 0; right: 0;
  top: -30%;
  height: 30%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(242, 239, 232, 0.05) 50%,
    transparent 100%);
}
.is-scanning .shot__scan {
  animation: shot-scan 620ms var(--ease-in-out) 1 both;
}
@keyframes shot-scan {
  from { transform: translateY(0);     opacity: 1; }
  to   { transform: translateY(440%);  opacity: 0; }
}

/* Vignette de détail : elle franchit délibérément la limite de colonne et
   passe par-dessus la cote. C'est la seule rupture d'alignement du hero —
   elle donne la tension d'une planche posée sur l'établi, sans dérégler
   la grille qui reste lisible partout ailleurs. */
.shot--inset {
  position: absolute;
  z-index: 2;
  left: clamp(-4.5rem, -4vw, -2rem);
  bottom: -2.5rem;
  width: 40%;
  aspect-ratio: 1 / 1;
  box-shadow: inset 0 0 0 1px var(--rule-strong), 0 18px 40px rgba(14, 16, 17, 0.55);
}

/* Repli si une image de démonstration ne se charge pas : le bloc conserve
   sa géométrie et l'indique clairement (classe posée en JS). */
.shot.is-missing img { display: none; }
.shot.is-missing::before {
  content: "Image indisponible";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-2);
  background:
    repeating-linear-gradient(45deg, var(--rule-faint) 0 1px, transparent 1px 9px),
    var(--graphite-2);
}

/* --- Repère de défilement --- */
.hero__cue {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1rem, 3vh, 2rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-2);
  /* Opacité pilotée en JS pendant le défilement : s'efface, ne clignote pas. */
  transition: opacity var(--d-2) linear;
}
.hero__cue-text { font-size: 0.625rem; }
.hero__cue-line { width: 44px; height: 1px; background: var(--rule-strong); }


/* ---------- 6.2 ENGAGEMENTS ----------
   Traitement éditorial et non « carte » : ces quatre points sont des règles
   de conduite, pas un catalogue. Un filet, un indice, une affirmation. */

.pledges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

.pledge {
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

.pledge__idx {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--track-mono);
  color: var(--text-2);
}

.pledge__title {
  margin-top: 0.9rem;
  font-size: 1.5rem;
  line-height: 1;
}

.pledge__text {
  margin-top: 0.75rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-2);
}


/* ---------- 6.3 PRESTATIONS ----------
   Grille de cartes à coins coupés sur fond profond. Les huit blocs sont
   strictement identiques : c'est la régularité qui fait la crédibilité. */

.services {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.25rem);
}

.service {
  height: 100%;
  padding: clamp(1.4rem, 2vw, 1.9rem);
  background: var(--graphite-2);
  box-shadow: inset 0 0 0 1px var(--rule);
  /* Même retour tactile que les boutons : court, mesuré, jamais flottant. */
  transition:
    box-shadow var(--d-1) var(--ease-out),
    transform  var(--d-1) var(--ease-out);
}
.service:hover {
  box-shadow: inset 0 0 0 1px var(--rule-strong);
  transform: translateY(-2px);
}

.service__idx {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--track-mono);
  color: var(--text-2);
}

.service__title {
  margin-top: 1.5rem;
  font-size: 1.375rem;
  line-height: 1;
}

.service__text {
  margin-top: 0.7rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-2);
}


/* ---------- 6.4 MÉTHODE ----------
   Quatre temps alignés sur une même ligne de base : la rangée de filets et
   de repères se lit comme une graduation. Les repères sont volontairement
   différents de la cote de plan, qui reste unique dans la section. */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.step {
  position: relative;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-strong);
}

/* Repère de graduation posé sur le filet, à l'aplomb de chaque étape. */
.step::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--off-white);
}

.step__idx {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--track-mono);
  color: var(--text-2);
}

.step__title {
  margin-top: 0.9rem;
  font-size: 1.5rem;
  line-height: 1;
}

.step__text {
  margin-top: 0.75rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-2);
}


/* ---------- 6.5 ATELIER ----------
   Composition en cinq colonnes : le texte tient la gauche, la verticale
   ancre la droite, les deux détails carrés viennent en dessous et décalent
   la lecture — même tension que le hero, sans la répéter à l'identique. */

.workshop {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
}

.workshop__text  { grid-column: 1 / 3; }
.workshop__shot--a { grid-column: 3 / 6; grid-row: 1 / 3; }
.workshop__shot--b { grid-column: 1 / 2; }
.workshop__shot--c { grid-column: 2 / 3; }

.workshop__lead {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.6;
  color: var(--off-white);
}

.workshop__points { margin-top: 1.75rem; }

.workshop__points li {
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-2);
}


/* ---------- 6.6 SAVOIR-FAIRE ----------
   Trois familles d'intervention. Aucune de ces cartes ne représente un
   chantier réalisé : le vocabulaire reste générique et les visuels sont
   légendés comme images de démonstration. */

.crafts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.craft__title {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 1.5rem;
  line-height: 1;
}

.craft__text {
  margin-top: 0.85rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-2);
}


/* ---------- 6.7 FAQ ----------
   <details>/<summary> natifs : la FAQ reste entièrement utilisable sans
   JavaScript. L'ouverture est animée par la bascule 0fr → 1fr d'une grille,
   la seule technique qui anime une hauteur automatique sans mesure JS. */

.faq { border-top: 1px solid var(--rule); }

.faq__item { border-bottom: 1px solid var(--rule); }

.faq__q {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-text);
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.35;
  transition: color var(--d-1) var(--ease-out);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--text-2); }

.faq__q:focus-visible {
  outline: 2px solid var(--off-white);
  outline-offset: -4px;
}

/* Marqueur + / − : un simple pivot, 120 ms. */
.faq__q::after {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  margin-left: auto;
  align-self: center;
  background:
    linear-gradient(var(--off-white) 0 0) center / 100% 1px no-repeat,
    linear-gradient(var(--off-white) 0 0) center / 1px 100% no-repeat;
  transition: transform var(--d-1) var(--ease-out);
}
.faq__item[open] .faq__q::after {
  /* La barre verticale disparaît par rotation : il ne reste que le trait. */
  transform: rotate(90deg);
  background:
    linear-gradient(var(--off-white) 0 0) center / 100% 1px no-repeat;
}

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-2) var(--ease-out);
}
.faq__item[open] .faq__panel { grid-template-rows: 1fr; }

.faq__a { overflow: hidden; }
.faq__a p {
  max-width: 68ch;
  padding-bottom: 1.5rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-2);
}


/* ---------- 6.8 CONTACT ---------- */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* --- Formulaire --- */
.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.field { margin-bottom: 1.25rem; }

.field label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--text-2);
}
.field__opt { text-transform: none; letter-spacing: 0.02em; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--graphite-2);
  color: var(--off-white);
  border: 1px solid var(--rule);
  border-radius: 0;
  font-size: 1rem;
  transition: border-color var(--d-1) var(--ease-out);
  /* Coins coupés volontairement absents ici : le clip-path rognerait le
     contour du champ et rendrait l'état d'erreur illisible. */
}
.field textarea { resize: vertical; min-height: 110px; }

.field input::placeholder,
.field textarea::placeholder { color: var(--text-2); opacity: 0.7; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--rule-strong); }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--off-white);
  outline-offset: 1px;
  border-color: transparent;
}

/* État d'erreur : le rouge course reprend ici sa fonction de signal. */
.field [aria-invalid="true"] { border-color: var(--red); }

.field__error {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--red);
}
.field__error[hidden] { display: none; }

/* Piège à robots : retiré du flux sans display:none, que certains bots lisent. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Mention de démonstration : lisible sans effort, mais tenue au niveau des
   labels de champ pour ne jamais concurrencer le bouton d'envoi. */
.form__demo {
  margin: 0.25rem 0 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--text-2);
}

.form__submit { margin-top: 0; }

.form__status {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--text-2);
}
.form__status[hidden] { display: none; }

/* --- Coordonnées --- */
.contact__actions { display: grid; gap: 0.75rem; }
.contact__actions .btn { width: 100%; justify-content: flex-start; }

.contact__info { margin-top: 2rem; }

.contact__line {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 1rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
}
.contact__line dt {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--text-2);
  padding-top: 2px;
}
.contact__line dd {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--off-white);
}


/* ---------- 6.9 FOOTER ---------- */

.site-footer {
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem;
  border-top: 1px solid var(--rule);
  background: var(--graphite-deep);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}

.footer__name {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
}
.footer__baseline {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--text-2);
}

.footer__navtitle {
  margin-bottom: 1.15rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--text-2);
}

.footer__nav li,
.footer__contact li {
  padding: 0.35rem 0;
  font-size: 0.9375rem;
  color: var(--text-2);
}
.footer__nav a,
.footer__contact a { transition: color var(--d-1) var(--ease-out); }
.footer__nav a:hover,
.footer__contact a:hover { color: var(--off-white); }

/* Mention d'étude de cas : encadrée, lisible, mais tenue à distance du
   contenu commercial — elle informe, elle ne s'excuse pas. */
.footer__case {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--graphite);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.footer__case-title {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--off-white);
}
.footer__case-text {
  margin-top: 0.9rem;
  padding-top: 0;
  border-top: 0;
  max-width: 88ch;
  line-height: 1.75;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--track-mono);
  color: var(--text-2);
}
.footer__bottom a { transition: color var(--d-1) var(--ease-out); }
.footer__bottom a:hover { color: var(--off-white); }


/* ---------- 6.10 BARRE CTA MOBILE ----------
   Mobile uniquement. Masquée par défaut : le module 10 la révèle une fois
   le hero dépassé et la retire au niveau du formulaire de contact. */

.cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-header) - 5);
  display: none;
  gap: 0.5rem;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(14, 16, 17, 0.94);
  border-top: 1px solid var(--rule);
  backdrop-filter: blur(8px);
  transform: translateY(100%);
  transition: transform var(--d-2) var(--ease-out);
}
.cta-bar.is-visible { transform: translateY(0); }

.cta-bar .btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 46px;
  padding: 0 0.65rem;
  gap: 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}


/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */

/* ---------- ≤ 1180px : compression de la colonne visuelle ---------- */
@media (max-width: 1180px) {
  .hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  /* Sous cette largeur, le chevauchement de la vignette deviendrait une
     collision avec le texte : elle se retire. */
  .shot--inset { display: none; }

  /* La cote bascule à l'horizontale et vient se poser au-dessus du visuel :
     la signature reste présente, y compris sur mobile. */
  .dim--v {
    top: -1.25rem;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
    justify-content: flex-start;
  }
  .dim--v::before,
  .dim--v::after {
    top: 50%;
    bottom: auto;
    left: auto;
    width: 1px;
    height: 11px;
    transform: translateY(-50%);
  }
  .dim--v::before { left: 0; }
  .dim--v::after  { right: 0; }

  .dim__value {
    writing-mode: horizontal-tb;
    padding-block: 0;
    padding-inline: 0.65rem;
    margin-left: 2.25rem;
  }
  .header-phone span { display: none; }
  .header-phone { padding: 0.5rem; }
}

/* ---------- ≤ 1024px : bascule en navigation mobile ---------- */
@media (max-width: 1024px) {
  :root { --header-h: 68px; }

  .nav,
  .site-header__actions .btn,
  .header-phone { display: none; }

  .burger { display: grid; }

  /* Le header mobile est habillé en permanence : le panneau de menu doit
     pouvoir s'ouvrir sur un fond franc. */
  .site-header { background: rgba(14, 16, 17, 0.92); border-bottom-color: var(--rule); }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  /* Le visuel passe en bandeau sous le contenu : les trois CTA restent
     au-dessus de la ligne de flottaison. */
  .hero__visual { order: 2; }
  .shot--main { aspect-ratio: 16 / 9; }

  .hero__cue { display: none; }

  /* Les grilles de section passent de quatre à deux colonnes : au-delà,
     les blocs deviendraient trop étroits pour rester lisibles. */
  .pledges,
  .services,
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Atelier : le texte repasse au-dessus, les trois visuels forment
     une rangée de trois. */
  .workshop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workshop__text { grid-column: 1 / -1; }
  .workshop__shot--a { grid-column: auto; grid-row: auto; aspect-ratio: 1 / 1; }
  .workshop__shot--b,
  .workshop__shot--c { grid-column: auto; }

  .contact { grid-template-columns: minmax(0, 1fr); }
  .contact__side { max-width: 520px; }

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

  /* La barre CTA n'existe qu'ici : en desktop, le header porte déjà
     l'appel et le rendez-vous. */
  .cta-bar { display: flex; }

  /* Réserve d'espace pour que la barre ne recouvre jamais la fin du footer. */
  body.has-cta-bar { padding-bottom: 74px; }
}

/* ---------- ≤ 700px : téléphones ---------- */
@media (max-width: 700px) {
  :root { --cut: 12px; }

  .hero {
    align-items: flex-start;
    min-height: calc(100svh - var(--header-h) - var(--strip-h));
  }

  .hero__title { font-size: clamp(2.75rem, 12vw, 4rem); }
  .hero__lead { font-size: 1.0625rem; margin-bottom: 1.75rem; }

  /* CTA pleine largeur, cibles tactiles confortables, appel en premier. */
  .hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin-bottom: 2rem;
  }
  .hero__actions .btn { width: 100%; min-height: 54px; justify-content: flex-start; }

  .hero__specs { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .hero__spec { display: flex; align-items: baseline; gap: 0.85rem; }
  .hero__spec dt { margin-bottom: 0; min-width: 78px; }

  .brand__baseline { display: none; }
  .case-strip { font-size: 0.625rem; letter-spacing: 0.1em; }
  .case-strip__more { display: none; }

  /* Une colonne : chaque bloc occupe toute la largeur, la lecture reste
     verticale et continue. */
  .pledges,
  .services,
  .steps { grid-template-columns: minmax(0, 1fr); }

  .sec-head__title { max-width: none; }
  .dim--h .dim__value { margin-left: 1.5rem; }

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

  /* Atelier : la verticale garde son format, les deux détails restent
     côte à côte pour ne pas allonger la page inutilement. */
  .workshop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workshop__shot--a { grid-column: 1 / -1; aspect-ratio: 4 / 5; }

  .form__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .form__submit { width: 100%; }

  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .contact__line { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }

  /* Trois actions sur une ligne étroite : on ne garde que les libellés
     courts, l'icône reste pour identifier chaque action au premier regard. */
  .cta-bar .btn { font-size: 0.6875rem; letter-spacing: 0.03em; }
  .mobile-nav__list a { font-size: 1.65rem; }
}

/* ---------- Écrans courts en paysage ---------- */
@media (max-height: 620px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: 3rem; }
}


/* ==========================================================================
   8. ACCESSIBILITÉ / REDUCED MOTION
   ========================================================================== */

@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;
    scroll-behavior: auto !important;
  }

  /* Le contenu doit être visible immédiatement, sans dépendre d'une transition. */
  .js [data-intro],
  .js [data-reveal] { opacity: 1; transform: none; }

  .shot__scan { display: none; }
}

/* Contraste renforcé : les filets deviennent francs. */
@media (prefers-contrast: more) {
  :root {
    --rule: rgba(242, 239, 232, 0.34);
    --rule-strong: rgba(242, 239, 232, 0.6);
    --text-2: #C9C9C4;
  }
}

/* Impression */
@media print {
  .case-strip, .site-header, .mobile-nav, .hero__cue, .hero__grid,
  .cta-bar, .form { display: none; }
  body { background: #fff; color: #000; }
  /* Les réponses de la FAQ sont dépliées à l'impression. */
  .faq__panel { grid-template-rows: 1fr; }
}