/* ============================================================================
   S CHIFFRAGE · styles.css
   Charte "plan technique" : bleu nuit, grille millimétrée, ambre chantier,
   cotations SVG et numérotation mono.

   NOTE TECHNIQUE : Tailwind est chargé via le Play CDN, qui injecte sa feuille
   de style APRÈS ce fichier. Tous les sélecteurs ci-dessous sont donc basés sur
   des CLASSES (spécificité 0,1,0) afin de ne jamais être écrasés par le
   Preflight de Tailwind (sélecteurs d'éléments, spécificité 0,0,1).
   Tailwind ne sert ici qu'à la mise en page (grid / gap / colonnes).

   SOMMAIRE
   01. Variables & base
   02. Utilitaires (wrap, skip-link, liens, icônes)
   03. Boutons
   04. Signature : grille millimétrée, cotations, surtitres
   05. Barre de navigation (verticale bureau / tiroir mobile)
   06. Hero
   07. Bandeau crédibilité
   08. Sections & têtes de section
   09. Prestations
   10. Méthode (timeline)
   11. Différenciateur
   12. Pour qui
   13. Zone d'intervention (+ schéma SVG survolable)
   14. À propos (+ cartouche)
   15. Contact (formulaire Netlify)
   16. Footer
   17. Animations au scroll & prefers-reduced-motion
   18. Pages annexes (mentions légales, confirmation d'envoi)
   19. Modale, horaires, retour en haut, panneau d'avis
   20. Photos
   21. Sélecteur de profil
   22. Révélation (Distinction)
   23. Cadre de cotation du hero
   24. Portrait (Qui est-ce ?)
   ========================================================================= */


/* ============================================================================
   01. VARIABLES & BASE
   ========================================================================= */

:root {
  /* Fonds sombres */
  --nuit:            #0B1220;
  --nuit-800:        #0F1729;
  --nuit-700:        #151F35;
  --nuit-900:        #070C15;

  /* Accent · ambre chantier */
  --ambre:           #F59E0B;
  --ambre-clair:     #FBBF24;
  --ambre-sombre:    #B45309;   /* version accessible de l'ambre sur fond clair */
  --ambre-encre:     #1A1204;   /* texte posé sur un aplat ambre */

  /* Fonds clairs */
  --papier:          #F7F8FA;
  --blanc:           #FFFFFF;

  /* Textes */
  --ardoise:         #334155;
  --ardoise-600:     #475569;
  --ardoise-400:     #94A3B8;
  --texte-nuit:      #E2E8F0;
  --texte-nuit-doux: #94A3B8;

  /* Filets */
  --trait:           #E2E8F0;
  --trait-fort:      #CBD5E1;
  --trait-nuit:      rgba(255, 255, 255, .10);

  /* Typographie */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Géométrie */
  --rayon:      4px;
  --rayon-sm:   3px;
  --wrap:       1160px;
  --barre-h:    64px;    /* hauteur de la barre horizontale (mobile) */
  --barre-l:    268px;   /* largeur de la barre verticale (bureau)   */
  --tiroir-l:   340px;   /* largeur du tiroir mobile                 */
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--ardoise);
  font-family: var(--font-sans);
  overflow-x: hidden;                 /* jamais de bandeau blanc à droite sur mobile */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
}

/* Décalage des ancres pour passer sous le header sticky */
section[id] {
  scroll-margin-top: 80px;
}

::selection {
  background: var(--ambre);
  color: var(--ambre-encre);
}

:focus-visible {
  outline: 2px solid var(--ambre);
  outline-offset: 3px;
  border-radius: var(--rayon-sm);
}


/* ============================================================================
   02. UTILITAIRES
   ========================================================================= */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 768px) {
  .wrap { padding-inline: 32px; }
}

/* Lien d'évitement clavier */
.skip-link {
  position: fixed;
  top: -80px;
  left: 16px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: var(--rayon);
  background: var(--ambre);
  color: var(--ambre-encre);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: top .2s ease;
}

.skip-link:focus {
  top: 14px;
}

/* Icônes SVG inline */
.ico {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* Liens sur fond sombre */
.lien-clair {
  color: var(--texte-nuit-doux);
  font-size: .93rem;
  line-height: 1.7;
  text-decoration: none;
  transition: color .2s ease;
}

.lien-clair:hover {
  color: var(--ambre);
}


/* ============================================================================
   03. BOUTONS
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-ambre {
  background: var(--ambre);
  color: var(--ambre-encre);
}

.btn-ambre:hover {
  background: var(--ambre-clair);
}

.btn-fantome {
  background: transparent;
  border-color: rgba(255, 255, 255, .24);
  color: var(--blanc);
}

.btn-fantome:hover {
  border-color: var(--ambre);
  color: var(--ambre);
}

/* Bouton secondaire pour fond CLAIR (le fantôme blanc est réservé au fond sombre) */
.btn-ligne {
  background: transparent;
  border-color: var(--trait-fort);
  color: var(--ardoise-600);
}

.btn-ligne:hover {
  border-color: var(--ambre-sombre);
  color: var(--ambre-sombre);
}

.btn-lg {
  min-height: 56px;
  padding: 0 26px;
  font-size: 1rem;
}

.btn-bloc {
  width: 100%;
}

/* Bouton téléphone du header : numéro masqué sous 480px (aria-label le porte) */
.btn-tel {
  padding: 0 14px;
  min-height: 42px;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}

.btn-tel-num {
  display: none;
}

@media (min-width: 480px) {
  .btn-tel { padding: 0 18px; }
  .btn-tel-num { display: inline; }
}


/* ============================================================================
   04. SIGNATURE : GRILLE MILLIMÉTRÉE, COTATIONS, SURTITRES
   ========================================================================= */

/* Grille millimétrée · lignes fines, opacité 5-8%, aucune image externe */
.grille-tech {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(148, 163, 184, .08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, .08) 1px, transparent 1px),
    linear-gradient(to right,  rgba(148, 163, 184, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, .05) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 16px 16px, 16px 16px;
  -webkit-mask-image: radial-gradient(130% 100% at 50% 0%, #000 0%, #000 42%, transparent 100%);
          mask-image: radial-gradient(130% 100% at 50% 0%, #000 0%, #000 42%, transparent 100%);
}

/* Variante papier : la même grille, en bleu nuit sur fond blanc */
.grille-tech-papier {
  background-image:
    linear-gradient(to right,  rgba(11, 18, 32, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 18, 32, .07) 1px, transparent 1px),
    linear-gradient(to right,  rgba(11, 18, 32, .04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 18, 32, .04) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 0%, #000 40%, transparent 100%);
          mask-image: radial-gradient(120% 100% at 50% 50%, #000 0%, #000 40%, transparent 100%);
}

/* Cotation décorative · trait + ticks + flèches, façon plan d'architecte */
.cotation {
  display: block;
  width: 118px;
  height: 13px;
  margin: 18px 0 0;
  overflow: visible;
}

.cotation path {
  fill: none;
  stroke: var(--ambre);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cot-tick   { opacity: .6; }               /* traits d'attache aux extrémités */
.cot-ligne  { stroke-width: 1.1; }         /* ligne de cote */
.cot-fleche { stroke-width: 1.35; }        /* têtes de flèche */

.cotation-centre {
  margin-inline: auto;
}

/* Surtitre technique en mono */
.surtitre {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.section-sombre .surtitre { color: var(--ambre); }
.section-clair  .surtitre,
.section-blanc  .surtitre { color: var(--ambre-sombre); }


/* ============================================================================
   05. BARRE DE NAVIGATION
   Un seul balisage, deux mises en page :
     · < 1120 px → barre HORIZONTALE sticky + TIROIR latéral (drawer)
     · ≥ 1120 px → barre VERTICALE sticky, colonne de gauche, nav dépliée

   NOTE : .barre ne porte NI fond NI backdrop-filter. Un backdrop-filter créerait
   un bloc conteneur pour ses enfants en position:fixed · le tiroir et le voile
   seraient alors ancrés à la barre au lieu du viewport. Le fond translucide est
   donc porté par .barre-tete, qui n'a aucun descendant fixe.
   ========================================================================= */

/* ---------- Base : barre horizontale + tiroir (mobile / tablette) ---------- */

.barre {
  position: sticky;
  top: 0;
  z-index: 60;
}

.barre-tete {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--barre-h);
  padding-inline: 20px;
  background: rgba(11, 18, 32, .92);
  border-bottom: 1px solid var(--trait-nuit);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  transition: background-color .25s ease, box-shadow .25s ease;
}

/* La barre ne se cache JAMAIS au scroll · elle se densifie seulement */
.barre.est-scrolle .barre-tete {
  background: rgba(11, 18, 32, .98);
  box-shadow: 0 14px 34px -22px rgba(0, 0, 0, .9);
}

.barre-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* --- Logo --- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: 0 0 auto;
}

.logo-marque {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(245, 158, 11, .45);
  border-radius: var(--rayon-sm);
  background: rgba(245, 158, 11, .10);
  color: var(--ambre);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.logo-bloc {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.logo-nom {
  color: var(--blanc);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.1;
}

.logo-sous {
  display: none;
  color: var(--texte-nuit-doux);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

@media (min-width: 640px) {
  .logo-sous { display: block; }
}

/* --- Burger --- */
.burger {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--trait-nuit);
  border-radius: var(--rayon-sm);
  background: transparent;
  cursor: pointer;
}

.burger-barre {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--blanc);
  transition: transform .25s ease, opacity .2s ease;
}

.burger.est-actif .burger-barre:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.est-actif .burger-barre:nth-child(2) { opacity: 0; }
.burger.est-actif .burger-barre:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- Voile --- */
.voile {
  position: fixed;
  inset: 0;
  z-index: 2;
  background: rgba(7, 12, 21, .66);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .34s ease, visibility 0s linear .34s;
}

.voile.est-ouvert {
  opacity: 1;
  visibility: visible;
  transition: opacity .34s ease, visibility 0s linear 0s;
}

/* --- Tiroir (drawer) --- */
.panneau {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  width: min(86vw, var(--tiroir-l));
  padding: 0 20px 26px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--nuit-800);
  border-left: 1px solid var(--trait-nuit);
  box-shadow: -34px 0 60px -34px rgba(0, 0, 0, .95);

  /* Fermé : hors écran ET retiré du parcours clavier */
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .34s cubic-bezier(.4, 0, .2, 1),
              visibility 0s linear .34s;
}

/* Ouvert : courbe plus longue et plus douce que la fermeture */
.panneau.est-ouvert {
  transform: translateX(0);
  visibility: visible;
  transition: transform .46s cubic-bezier(.16, 1, .3, 1),
              visibility 0s linear 0s;
}

/* Verrouillage du défilement de la page pendant que le tiroir est ouvert */
body.nav-ouverte {
  overflow: hidden;
}

/* --- En-tête du tiroir --- */
.panneau-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--barre-h);
  margin-inline: -20px;
  padding: 0 14px 0 20px;
  border-bottom: 1px solid var(--trait-nuit);
}

.panneau-titre {
  color: var(--ambre);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1;
  text-transform: uppercase;
}

.fermer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--trait-nuit);
  border-radius: var(--rayon-sm);
  background: transparent;
  color: var(--blanc);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}

.fermer:hover {
  border-color: var(--ambre);
  color: var(--ambre);
}

/* --- Navigation numérotée (nomenclature d'un jeu de plans) --- */
.nav {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}

.nav-lien {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 6px;
  border-bottom: 1px solid var(--trait-nuit);
  color: var(--texte-nuit);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}

.nav-num {
  flex: 0 0 auto;
  color: var(--ardoise-400);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  transition: color .2s ease;
}

.nav-txt {
  flex: 1 1 auto;
  min-width: 0;
}

.nav-lien:hover,
.nav-lien.est-actif { color: var(--ambre); }

.nav-lien:hover .nav-num,
.nav-lien.est-actif .nav-num { color: var(--ambre); }

/* --- Pied du tiroir : CTA + adresse --- */
.barre-pied {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

.barre-lieu {
  display: none;      /* l'adresse n'apparaît que dans la barre verticale */
}

/* --- Entrée en cascade : le tiroir se « déplie » à l'ouverture --- */
.panneau-tete,
.panneau .nav-lien,
.panneau .barre-pied > * {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity .3s ease,
              transform .38s cubic-bezier(.16, 1, .3, 1),
              color .2s ease,
              background-color .2s ease,
              border-color .2s ease;
}

.panneau.est-ouvert .panneau-tete,
.panneau.est-ouvert .nav-lien,
.panneau.est-ouvert .barre-pied > * {
  opacity: 1;
  transform: translateX(0);
}

/* Les retards ne vivent QUE dans l'état ouvert :
   à la fermeture tout repart d'un bloc, sans traîner. */
.panneau.est-ouvert .panneau-tete                 { transition-delay: .06s; }
.panneau.est-ouvert .nav-lien:nth-child(1)        { transition-delay: .12s; }
.panneau.est-ouvert .nav-lien:nth-child(2)        { transition-delay: .17s; }
.panneau.est-ouvert .nav-lien:nth-child(3)        { transition-delay: .22s; }
.panneau.est-ouvert .nav-lien:nth-child(4)        { transition-delay: .27s; }
.panneau.est-ouvert .nav-lien:nth-child(5)        { transition-delay: .32s; }
.panneau.est-ouvert .nav-lien:nth-child(6)        { transition-delay: .37s; }
.panneau.est-ouvert .nav-lien:nth-child(7)        { transition-delay: .42s; }
.panneau.est-ouvert .barre-pied > *:nth-child(1)  { transition-delay: .47s; }
.panneau.est-ouvert .barre-pied > *:nth-child(2)  { transition-delay: .52s; }


/* ---------- ≥ 1120 px : bascule en barre VERTICALE ---------- */

@media (min-width: 1120px) {

  .barre {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: var(--barre-l);
    overflow-y: auto;
    background: var(--nuit);
    border-right: 1px solid var(--trait-nuit);
  }

  /* Grille millimétrée en fond de colonne */
  .barre::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      linear-gradient(to right,  rgba(148, 163, 184, .08) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(148, 163, 184, .08) 1px, transparent 1px),
      linear-gradient(to right,  rgba(148, 163, 184, .05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(148, 163, 184, .05) 1px, transparent 1px);
    background-size: 96px 96px, 96px 96px, 16px 16px, 16px 16px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 26%, transparent 78%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 26%, transparent 78%);
  }

  .barre-tete {
    display: block;
    min-height: 0;
    padding: 26px 22px 22px;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    transition: none;
  }

  .barre.est-scrolle .barre-tete {
    background: transparent;
    box-shadow: none;
  }

  /* Ni bouton téléphone compact, ni burger, ni voile, ni en-tête de tiroir */
  .barre-actions,
  .voile,
  .panneau-tete {
    display: none;
  }

  /* Le tiroir redevient le corps de la colonne */
  .panneau {
    position: static;
    z-index: auto;
    flex: 1 1 auto;
    justify-content: space-between;
    gap: 24px;
    width: auto;
    padding: 20px 14px 22px;
    overflow-y: visible;
    background: transparent;
    border-left: none;
    box-shadow: none;
    transform: none;
    visibility: visible;
    transition: none;
  }

  /* Plus de cascade : tout est posé */
  .panneau-tete,
  .panneau .nav-lien,
  .panneau .barre-pied > * {
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  .nav {
    padding-top: 0;
  }

  .nav-lien {
    padding: 12px 12px 12px 14px;
    border-bottom: none;
    border-left: 2px solid transparent;
    border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0;
    color: var(--texte-nuit-doux);
    font-size: .93rem;
  }

  .nav-lien:hover {
    background: rgba(255, 255, 255, .04);
    color: var(--blanc);
  }

  .nav-lien.est-actif {
    background: rgba(245, 158, 11, .08);
    border-left-color: var(--ambre);
    color: var(--blanc);
  }

  .barre-pied {
    margin-top: 0;
    gap: 8px;
    padding: 0 2px;
  }

  .barre-lieu {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 12px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--trait-nuit);
    color: var(--texte-nuit-doux);
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .04em;
    line-height: 1.7;
  }

  .barre-lieu-txt {
    display: block;
    min-width: 0;
  }

  .ico-pin {
    width: 15px;
    height: 15px;
    margin-top: 2px;
    color: var(--ambre);
  }

  /* --- Contenu décalé à droite de la colonne --- */
  .contenu-decale {
    margin-left: var(--barre-l);
  }

  .contenu-decale .wrap {
    max-width: 1040px;
    padding-inline: 44px;
  }

  /* Plus de header au-dessus du contenu : l'ancrage n'a plus besoin de marge */
  section[id] {
    scroll-margin-top: 24px;
  }

  /* Le lien d'évitement doit rester visible, à droite de la colonne */
  .skip-link {
    left: calc(var(--barre-l) + 16px);
  }
}


/* ============================================================================
   06. HERO
   ========================================================================= */

/* overflow: clip et non hidden : clip rogne sans creer de conteneur de
   defilement, ce qui laisse les animations pilotees par le scroll
   se rattacher au document. */
.section-sombre {
  position: relative;
  overflow: clip;
  background: var(--nuit);
  color: var(--texte-nuit);
}

.hero {
  padding: 48px 0 40px;
}

@media (min-width: 768px) {
  .hero { padding: 76px 0 60px; }
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 940px;
}

.hero-titre {
  margin: 0;
  color: var(--blanc);
  font-size: clamp(1.7rem, 4.6vw, 2.45rem);
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.1;
  /* Les mots composés peuvent se couper d'eux-mêmes si l'écran est étroit */
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Chaque partie du titre occupe sa propre ligne */
.hero-titre-ligne {
  display: block;
}

/* Empêche la coupure d'un nom propre en fin de ligne */
.insecable {
  white-space: nowrap;
}

.hero-titre-accent {
  display: block;
  color: var(--ambre);
}

.hero-sous {
  max-width: 680px;
  margin: 20px 0 0;
  color: var(--texte-nuit-doux);
  font-size: 1.02rem;
  line-height: 1.75;
}

@media (min-width: 768px) {
  .hero-sous { font-size: 1.12rem; }
}

.hero-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

@media (min-width: 520px) {
  .hero-cta { flex-direction: row; }
}

.hero-note {
  /* Une phrase continue : en flex, les deux spans formaient deux colonnes */
  display: block;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--trait-nuit);
  color: var(--ardoise-400);
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .04em;
  line-height: 1.7;
}


/* ============================================================================
   07. BANDEAU CRÉDIBILITÉ
   ========================================================================= */

.bandeau {
  padding: 0 0 32px;
}

.bandeau-liste {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--trait-nuit);
}

@media (min-width: 640px) {
  .bandeau-liste { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .bandeau-liste { grid-template-columns: repeat(4, 1fr); }
}

.bandeau-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid var(--trait-nuit);
  color: var(--texte-nuit);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.5;
}

/* 2 colonnes : filet vertical entre les colonnes, filet horizontal après la 1re ligne */
@media (min-width: 640px) {
  .bandeau-item {
    padding: 20px 22px;
    border-right: 1px solid var(--trait-nuit);
  }
  .bandeau-item:nth-child(odd)          { padding-left: 0; }
  .bandeau-item:nth-child(even)         { border-right: none; padding-right: 0; }
  .bandeau-item:nth-last-child(-n + 2)  { border-bottom: none; }
}

/* 4 colonnes : une seule ligne, filets verticaux uniquement */
@media (min-width: 1024px) {
  .bandeau-item {
    padding: 22px 24px;
    border-bottom: none;
    border-right: 1px solid var(--trait-nuit);
  }
  .bandeau-item:first-child { padding-left: 0; }
  .bandeau-item:last-child  { border-right: none; padding-right: 0; }
}

/* Puce losange · signature "point de repère" */
.bandeau-puce {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  background: var(--ambre);
  transform: rotate(45deg);
}


/* ============================================================================
   08. SECTIONS & TÊTES DE SECTION
   ========================================================================= */

.section {
  padding: 52px 0;
}

@media (min-width: 768px) {
  .section { padding: 72px 0; }
}

.section-clair {
  background: var(--papier);
  color: var(--ardoise);
}

.section-blanc {
  background: var(--blanc);
  color: var(--ardoise);
}

/* Sections portant la grille millimétrée en fond */
.section-grille {
  position: relative;
  overflow: clip;
}

.section-grille .wrap {
  position: relative;
  z-index: 1;
}

.section-tete {
  max-width: 720px;
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .section-tete { margin-bottom: 40px; }
}

.section-tete-centre {
  margin-inline: auto;
  text-align: center;
}

/* Pour les titres longs qui ne doivent pas se couper */
.section-tete-large {
  max-width: 900px;
}

.section-titre {
  margin: 0;
  font-size: clamp(1.45rem, 3.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.16;
}

.section-sombre .section-titre { color: var(--blanc); }
.section-clair  .section-titre,
.section-blanc  .section-titre { color: var(--nuit); }

.section-chapo {
  margin: 16px 0 0;
  font-size: 1rem;
  line-height: 1.75;
}

.section-sombre .section-chapo { color: var(--texte-nuit-doux); }
.section-clair  .section-chapo,
.section-blanc  .section-chapo { color: var(--ardoise-600); }


/* ============================================================================
   09. PRESTATIONS
   ========================================================================= */

.carte-presta {
  position: relative;
  padding: 20px 20px 22px;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  transition: border-color .25s ease, box-shadow .25s ease;
}

/* Filet ambre qui se déploie au survol · bord gauche, façon onglet de dossier */
.carte-presta::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 2px;
  background: var(--ambre);
  border-radius: 2px 0 0 2px;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .32s ease;
}

.carte-presta:hover {
  border-color: var(--trait-fort);
  box-shadow: 0 18px 40px -24px rgba(11, 18, 32, .40);
}

.carte-presta:hover::before {
  transform: scaleY(1);
}

.presta-num {
  margin: 0;
  color: var(--ambre-sombre);
  font-family: var(--font-mono);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
}

.presta-filet {
  display: block;
  height: 1px;
  margin: 15px 0 17px;
  background: var(--trait);
}

.presta-titre {
  margin: 0 0 11px;
  color: var(--nuit);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.35;
}

.presta-texte {
  margin: 0;
  color: var(--ardoise-600);
  font-size: .93rem;
  line-height: 1.7;
}


/* ============================================================================
   10. MÉTHODE · TIMELINE
   verticale sur mobile, horizontale à partir de 900px
   ========================================================================= */

.timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.etape {
  position: relative;
  padding-left: 46px;
}

/* Trait de liaison entre les étapes */
.etape::after {
  content: "";
  position: absolute;
  top: 32px;
  bottom: -32px;
  left: 14px;
  width: 1px;
  background: var(--trait-fort);
}

.etape:last-child::after {
  display: none;
}

.etape-num {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  background: var(--blanc);
  border: 1px solid var(--trait-fort);
  border-radius: 50%;
  color: var(--ambre-sombre);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1;
}

.etape-titre {
  margin: 4px 0 9px;
  color: var(--nuit);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.35;
}

.etape-texte {
  margin: 0;
  color: var(--ardoise-600);
  font-size: .9rem;
  line-height: 1.7;
}

@media (min-width: 900px) {
  .timeline {
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
  }

  .etape {
    padding: 50px 26px 0 0;
  }

  .etape::after {
    top: 14px;
    bottom: auto;
    left: 36px;
    right: 0;
    width: auto;
    height: 1px;
  }

  .etape-titre {
    margin-top: 0;
  }
}


/* ============================================================================
   11. DIFFÉRENCIATEUR
   ========================================================================= */

.carte-diff {
  position: relative;
  padding: 22px 22px 24px;
  background: var(--nuit-700);
  border: 1px solid var(--trait-nuit);
  border-radius: var(--rayon);
  transition: border-color .25s ease, background-color .25s ease;
}

.carte-diff:hover {
  background: var(--nuit-800);
  border-color: rgba(245, 158, 11, .35);
}

.diff-index {
  margin: 0 0 16px;
  color: var(--ambre);
  font-family: var(--font-mono);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
}

.diff-titre {
  margin: 0 0 12px;
  color: var(--blanc);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.35;
}

.diff-texte {
  margin: 0;
  color: var(--texte-nuit-doux);
  font-size: .93rem;
  line-height: 1.72;
}


/* ============================================================================
   12. POUR QUI
   ========================================================================= */

.carte-cible {
  display: flex;
  flex-direction: column;
  padding: 22px 20px 24px;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-top: 2px solid var(--nuit);
  border-radius: var(--rayon);
  transition: border-top-color .25s ease, box-shadow .25s ease;
}

.carte-cible:hover {
  border-top-color: var(--ambre);
  box-shadow: 0 18px 40px -24px rgba(11, 18, 32, .40);
}

.cible-label {
  margin: 0 0 14px;
  color: var(--ardoise-400);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}

.cible-titre {
  margin: 0 0 12px;
  color: var(--nuit);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.35;
}

.cible-texte {
  margin: 0 0 20px;
  color: var(--ardoise-600);
  font-size: .93rem;
  line-height: 1.7;
}

.cible-liste {
  margin: auto 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--trait);
  list-style: none;
}

.cible-puce {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 6px 0;
  color: var(--ardoise);
  font-size: .87rem;
  line-height: 1.6;
}

.cible-puce::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  background: var(--ambre-sombre);
  transform: rotate(45deg);
}


/* ============================================================================
   13. ZONE D'INTERVENTION (+ schéma SVG survolable)
   ========================================================================= */

.zone-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: center;
}

@media (min-width: 1024px) {
  .zone-grille {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }
}

.zone-texte {
  min-width: 0;
}

.zone-para {
  margin: 0 0 18px;
  color: var(--ardoise-600);
  font-size: 1rem;
  line-height: 1.78;
}

.zone-liste {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--trait);
}

.zone-item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 12px 16px 0;
  border-bottom: 1px solid var(--trait);
  border-left: 2px solid transparent;
  transition: border-left-color .25s ease, padding-left .25s ease, background-color .25s ease;
}

.zone-item:hover {
  padding-left: 12px;
  border-left-color: var(--ambre);
  background: rgba(245, 158, 11, .05);
}

.zone-dept {
  flex: 0 0 auto;
  min-width: 34px;
  color: var(--ambre-sombre);
  font-family: var(--font-mono);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .06em;
}

.zone-detail {
  color: var(--ardoise-600);
  font-size: .94rem;
  line-height: 1.65;
}

.zone-ville {
  color: var(--nuit);
  font-weight: 700;
}

.zone-note {
  margin: 22px 0 0;
  color: var(--ardoise-600);
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .04em;
  line-height: 1.7;
}


/* ---------------- Schéma SVG ---------------- */

.zone-schema {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Indice d'interactivité : discret, en mono comme les micro-libellés */
.schema-invite {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ardoise-400);
  text-align: center;
}

.schema {
  width: 100%;
  max-width: 580px;
  height: auto;
}

/* Cercles du bassin stéphanois */
.schema-cercle {
  fill: none;
  stroke: var(--trait-fort);
  stroke-width: 1;
  stroke-dasharray: 3 6;
  opacity: .85;
}

/* Zones de survol invisibles : le trait de cotation est trop fin pour être visé */
.schema-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 26;
  pointer-events: stroke;
}

.schema-hit-noeud {
  fill: transparent;
  pointer-events: all;
}

/* Cotation vers un pôle */
.schema-ligne {
  fill: none;
  stroke: rgba(245, 158, 11, .55);
  stroke-width: 1.3;
  pointer-events: none;
  transition: stroke .3s ease, stroke-width .3s ease;
}

.schema-fleche     { fill: rgba(245, 158, 11, .7); }
.schema-fleche-on  { fill: var(--ambre); }

/* Halo du nœud, révélé au survol */
.schema-halo {
  fill: var(--ambre);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.schema-anneau {
  fill: var(--blanc);
  stroke: var(--trait-fort);
  stroke-width: 1;
  pointer-events: none;
  transition: stroke .3s ease, stroke-width .3s ease;
}

.schema-point {
  fill: var(--nuit);
  pointer-events: none;
  transition: fill .3s ease;
}

/* Le point de base ne réagit pas au survol : c'est le repère fixe du schéma */
.schema-base {
  pointer-events: none;
}

.schema-centre {
  fill: var(--ambre);
  stroke: var(--nuit);
  stroke-width: 1;
}

/* Libellés */
.schema-ville {
  fill: var(--nuit);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-anchor: middle;
}

.schema-ville-centre {
  font-size: 13px;
}

.schema-dept {
  fill: var(--ardoise-600);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-anchor: middle;
  transition: fill .3s ease, font-weight .3s ease;
}

/* Villes de la région : masquées au repos, révélées au survol / focus / appui */
.schema-sous {
  fill: var(--ardoise-600);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  text-anchor: middle;
  opacity: 0;
  transition: opacity .3s ease, fill .3s ease;
}

.schema-legende {
  fill: var(--ardoise-400);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-anchor: middle;
}


/* ---- Pôle actif ----
   Un pôle s'active au survol (souris), au focus clavier et à l'appui tactile
   (le focus se pose au tap). Les mêmes états servent partout : la liste
   ci-contre reste le fond d'information robuste. */
.schema-pole {
  cursor: pointer;
  outline: none;
}

/* Anneau de focus clavier : réutilise le nœud de survol, dans la charte.
   Le focus tactile ou souris ne l'affiche pas, seul le clavier le déclenche. */
.schema-pole:focus-visible .schema-hit-noeud {
  fill: none;
  stroke: var(--ambre-sombre);
  stroke-width: 2;
  stroke-dasharray: 3 4;
}

.schema-pole:hover .schema-ligne,
.schema-pole:focus .schema-ligne {
  stroke: var(--ambre);
  stroke-width: 2.4;
  marker-start: url(#fl-on);
  marker-end: url(#fl-on);
}

.schema-pole:hover .schema-halo,
.schema-pole:focus .schema-halo   { opacity: .14; }

.schema-pole:hover .schema-anneau,
.schema-pole:focus .schema-anneau {
  stroke: var(--ambre);
  stroke-width: 2;
}

.schema-pole:hover .schema-point,
.schema-pole:focus .schema-point  { fill: var(--ambre-sombre); }

.schema-pole:hover .schema-dept,
.schema-pole:focus .schema-dept   { fill: var(--ambre-sombre); font-weight: 700; }

.schema-pole:hover .schema-sous,
.schema-pole:focus .schema-sous   { opacity: 1; }


/* ============================================================================
   14. À PROPOS + CARTOUCHE
   ========================================================================= */

.apropos-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: start;
}

@media (min-width: 1024px) {
  .apropos-grille {
    grid-template-columns: 1.35fr 1fr;
    gap: 60px;
  }
}

.apropos-texte {
  min-width: 0;
}

.apropos-para {
  margin: 26px 0 0;
  color: var(--ardoise-600);
  font-size: 1rem;
  line-height: 1.78;
}

.valeurs {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--trait);
}

.valeur {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--trait);
}

.valeur-num {
  flex: 0 0 auto;
  color: var(--ambre-sombre);
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.9;
}

.valeur-bloc {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.valeur-titre {
  color: var(--nuit);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.5;
}

.valeur-texte {
  color: var(--ardoise-600);
  font-size: .91rem;
  line-height: 1.7;
}

/* Cartouche · le bloc d'identification en bas à droite d'un plan technique */
.cartouche {
  position: relative;
  background: var(--nuit);
  border: 1px solid var(--nuit-700);
  border-radius: var(--rayon);
  overflow: hidden;
}

.cartouche-tete {
  margin: 0;
  padding: 14px 20px;
  background: var(--nuit-900);
  border-bottom: 1px solid var(--trait-nuit);
  color: var(--ambre);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1;
  text-transform: uppercase;
}

.cartouche-corps {
  margin: 0;
  padding: 4px 20px 8px;
}

.cartouche-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--trait-nuit);
}

.cartouche-ligne:last-child {
  border-bottom: none;
}

.cartouche-cle {
  flex: 0 0 auto;
  color: var(--ardoise-400);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.cartouche-val {
  margin: 0;
  color: var(--texte-nuit);
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: right;
}


/* ============================================================================
   14b. RÉALISATIONS
   Grille de fiches "cartouche de plan", toutes visibles. Fond --nuit,
   repère d'angle ambre, numéro et surface en JetBrains Mono ambre.
   Chaque fiche réserve un emplacement image en haut sans casser la grille.
   ========================================================================= */

.realisations-grille {
  display: grid;
  grid-template-columns: 1fr;   /* base / repli sans JS sous 600px : empilement vertical */
  gap: 18px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

/* 600 à 859px : deux fiches par ligne */
@media (min-width: 600px) {
  .realisations-grille {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 860px et plus : trois fiches par ligne (deux lignes de trois) */
@media (min-width: 860px) {
  .realisations-grille {
    grid-template-columns: repeat(3, 1fr);
  }
}

.realisation {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--nuit);
  border: 1px solid var(--nuit-700);
  border-radius: var(--rayon);
  overflow: hidden;
}

/* Repère d'angle ambre, haut-gauche (même motif que .photo::before) */
.realisation::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--ambre);
  border-left: 2px solid var(--ambre);
  pointer-events: none;
}

/* Plus d'emplacement image : la fiche est un cartouche seul.
   Le corps dégage le repère d'angle en haut à gauche via son padding. */
.realisation-corps {
  padding: 26px 18px 20px;
}

.realisation-num {
  display: block;
  color: var(--ambre);
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1;
}

.realisation-titre {
  margin: 10px 0 0;
  color: var(--texte-nuit);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.realisation-filet {
  height: 1px;
  margin: 14px 0 2px;
  background: var(--trait-nuit);
}

.realisation-lignes {
  margin: 0;
}

.realisation-ligne {
  padding: 11px 0;
  border-bottom: 1px solid var(--trait-nuit);
}

.realisation-ligne:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/* Libellés en JetBrains Mono capitales (RÉGION, MISSION, SURFACE, CADRE) */
.realisation-cle {
  display: block;
  color: var(--ardoise-400);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.realisation-val {
  margin: 3px 0 0;
  color: var(--texte-nuit);
  font-size: .84rem;
  font-weight: 500;
  line-height: 1.5;
}

/* Surface mise en avant : JetBrains Mono ambre */
.realisation-surface {
  color: var(--ambre);
  font-family: var(--font-mono);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .02em;
}

/* ---- Carrousel mobile (sous 600px) ----
   Uniquement quand JS est actif. Sans JS, la grille reste en une colonne
   (règle .realisations-grille de base) : les six fiches s'empilent proprement. */
@media (max-width: 599px) {
  .js .realisations-grille {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .js .realisations-grille::-webkit-scrollbar {
    display: none;
  }

  .js .realisations-grille .realisation {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }
}

/* Contrôles du carrousel : masqués par défaut (desktop et sans JS) */
.realisations-nav {
  display: none;
}

@media (max-width: 599px) {
  .js .realisations-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
  }
}

.realisations-invite {
  margin: 0;
  max-width: 36ch;
  color: var(--ardoise-600);
  font-family: var(--font-sans);
  font-size: .8rem;
  line-height: 1.5;
  text-align: center;
}

.realisations-nav-ligne {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.realisations-compteur {
  min-width: 6ch;
  color: var(--ardoise-600);
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-align: center;
}

.realisations-suivant {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--nuit);
  border: 1px solid var(--nuit-700);
  border-radius: var(--rayon);
  color: var(--ambre);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}

.realisations-suivant:hover {
  border-color: var(--ambre);
  background: var(--nuit-800);
}

.realisations-suivant:focus-visible {
  outline: 2px solid var(--ambre-sombre);
  outline-offset: 2px;
}

.realisations-suivant .ico {
  width: 20px;
  height: 20px;
}


/* ============================================================================
   15. CONTACT
   Deux fiches côte à côte sur bureau : contact direct + formulaire.
   Empilées sur mobile, les boutons d'appel en premier (canal prioritaire).
   ========================================================================= */

.contact-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1000px;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .contact-grille {
    grid-template-columns: 1fr 1.12fr;
    gap: 24px;
  }
}

/* --- Fiche : le panneau technique commun aux deux colonnes --- */
.fiche {
  display: flex;
  flex-direction: column;
  background: var(--nuit-700);
  border: 1px solid var(--trait-nuit);
  border-radius: var(--rayon);
  overflow: hidden;
}

.fiche-tete {
  margin: 0;
  padding: 14px 20px;
  background: var(--nuit-900);
  border-bottom: 1px solid var(--trait-nuit);
  color: var(--ambre);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1;
  text-transform: uppercase;
}

.fiche-corps {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 16px;
  padding: 22px 20px 24px;
}

@media (min-width: 640px) {
  .fiche-corps { padding: 26px 24px 28px; }
}

.fiche-note {
  margin: 2px 0 0;
  color: var(--ardoise-400);
  font-size: .78rem;
  line-height: 1.7;
}

/* --- Colonne 1 : contact direct --- */
.contact-actions {
  display: grid;
  gap: 10px;
}

/* Le renvoi vers les disponibilités n'a de sens que si les fiches sont empilées.
   Sur bureau, elles sont côte à côte : le bouton disparaît. */
@media (min-width: 1024px) {
  .btn-rdv-mobile { display: none; }
}

.contact-infos {
  margin: 6px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--trait-nuit);
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 0;
  border-bottom: 1px solid var(--trait-nuit);
}

.contact-info:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.contact-cle {
  color: var(--ambre);
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}

.contact-val {
  margin: 0;
  color: var(--texte-nuit);
  font-size: .9rem;
  line-height: 1.6;
}

/* --- Colonne 2 : formulaire (Netlify Forms) --- */
.champ {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.champ-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 480px) {
  .champ-duo { grid-template-columns: 1fr 1fr; }
}

.champ-label {
  color: var(--ardoise-400);
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.champ-req {
  color: var(--ambre);
  font-weight: 700;
}

/* background-color (et non background) : le raccourci écraserait la flèche du select */
.champ-saisie {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid var(--trait-nuit);
  border-radius: var(--rayon-sm);
  background-color: var(--nuit);
  color: var(--texte-nuit);
  font-family: var(--font-sans);
  font-size: .95rem;
  line-height: 1.5;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.champ-saisie::placeholder {
  color: #64748B;
}

.champ-saisie:hover {
  border-color: rgba(255, 255, 255, .22);
}

.champ-saisie:focus {
  border-color: var(--ambre);
  background-color: var(--nuit-900);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .16);
}

.champ-saisie:focus-visible {
  outline: none;   /* la bordure ambre + le halo font office d'indicateur */
}

.champ-zone {
  min-height: 112px;
  resize: vertical;
}

.champ-select {
  -webkit-appearance: none;
          appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23F59E0B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  cursor: pointer;
}

.champ-select option {
  background-color: var(--nuit-800);
  color: var(--texte-nuit);
}

/* Piège à robots (honeypot Netlify) : jamais visible, jamais tabulable */
.champ-piege {
  display: none;
}


/* ============================================================================
   16. FOOTER & MENTIONS LÉGALES
   ========================================================================= */

.pied {
  padding: 56px 0 30px;
  background: var(--nuit-900);
  border-top: 1px solid var(--trait-nuit);
}

.pied-haut {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--trait-nuit);
}

@media (min-width: 768px) {
  .pied-haut {
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 44px;
  }

  /* Variante à 4 colonnes (index : ajoute la colonne « Guides »).
     Réservée à cette page, les autres pieds gardent 3 colonnes. */
  .pied-haut-guides {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }
}

.pied-marque,
.pied-colonne {
  min-width: 0;
}

.logo-pied {
  margin-bottom: 18px;
}

.pied-texte {
  max-width: 380px;
  margin: 0;
  color: var(--texte-nuit-doux);
  font-size: .9rem;
  line-height: 1.75;
}

.pied-titre {
  margin: 0 0 16px;
  color: var(--blanc);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}

.pied-adresse {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-style: normal;
}

.pied-ligne {
  color: var(--texte-nuit-doux);
  font-size: .93rem;
  line-height: 1.7;
}

.pied-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Bas de page --- */
.pied-bas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 24px;
}

@media (min-width: 640px) {
  .pied-bas {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.pied-copy {
  margin: 0;
  color: var(--ardoise-400);
  font-size: .8rem;
  line-height: 1.6;
}

.pied-liens {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.pied-liens .lien-legal {
  font-size: .8rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--trait-nuit);
}

.pied-liens .lien-legal:hover {
  text-decoration-color: var(--ambre);
}

.pied-sep {
  color: var(--trait-nuit);
}

.pied-siren {
  color: var(--ardoise-400);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
}


/* ============================================================================
   17. ANIMATIONS AU SCROLL
   Apparition unique (fade + léger translate), pilotée par IntersectionObserver.
   La classe .js est posée par js/script.js AVANT le premier rendu : sans
   JavaScript, tout le contenu reste visible.
   ========================================================================= */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.16, 1, .3, 1);
}

.js .reveal.est-visible {
  opacity: 1;
  transform: none;
}

.js .reveal-d1 { transition-delay: .08s; }
.js .reveal-d2 { transition-delay: .16s; }
.js .reveal-d3 { transition-delay: .24s; }
.js .reveal-d4 { transition-delay: .32s; }

/* Aucune animation si l'utilisateur la refuse */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .reveal,
  .js .reveal.est-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .haut, .avis {
    opacity: 1;
    transform: none;
  }

  /* Le tiroir s'ouvre et se ferme instantanément, mais reste 100 % fonctionnel */
  .panneau-tete,
  .panneau .nav-lien,
  .panneau .barre-pied > * {
    opacity: 1;
    transform: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================================
   18. PAGES ANNEXES (mentions-legales.html, merci.html)
   Même charte, mise en page allégée : barre simple, contenu, pied compact.
   ========================================================================= */

.barre-simple {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(11, 18, 32, .95);
  border-bottom: 1px solid var(--trait-nuit);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.barre-simple-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--barre-h);
}

.lien-retour {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--texte-nuit);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s ease;
}

.lien-retour:hover {
  color: var(--ambre);
}

/* --- Document (mentions légales) --- */
.doc {
  padding: 52px 0 72px;
  background: var(--papier);
}

@media (min-width: 768px) {
  .doc { padding: 76px 0 96px; }
}

.doc-inner {
  max-width: 800px;
}

.doc-titre {
  margin: 0;
  color: var(--nuit);
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.1;
}

.doc-corps {
  margin-top: 34px;
  border-top: 1px solid var(--trait);
}

.doc-bloc {
  padding: 26px 0;
  border-bottom: 1px solid var(--trait);
}

.doc-cle {
  margin: 0 0 12px;
  color: var(--nuit);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.4;
}

.doc-texte {
  margin: 0 0 10px;
  color: var(--ardoise-600);
  font-size: .95rem;
  line-height: 1.75;
}

.doc-texte:last-child {
  margin-bottom: 0;
}

.doc-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 5px 0;
  color: var(--ardoise-600);
  font-size: .95rem;
  line-height: 1.7;
}

.doc-item::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 10px;
  background: var(--ambre-sombre);
  transform: rotate(45deg);
}

.lien-sombre {
  color: var(--ambre-sombre);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}

.lien-sombre:hover {
  color: var(--nuit);
}

.doc-item strong {
  color: var(--nuit);
  font-weight: 600;
}

/* --- Confirmation d'envoi --- */
.merci {
  display: flex;
  align-items: center;
  min-height: 76vh;
  padding: 72px 0;
}

.merci-inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}

.merci-marque {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 28px;
  border: 1px solid rgba(245, 158, 11, .40);
  border-radius: 50%;
  background: rgba(245, 158, 11, .10);
  color: var(--ambre);
}

.merci-marque .ico {
  width: 26px;
  height: 26px;
}

.merci-titre {
  margin: 0 0 18px;
  color: var(--blanc);
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.12;
}

.merci-texte {
  margin: 0 0 32px;
  color: var(--texte-nuit-doux);
  font-size: 1rem;
  line-height: 1.75;
}

.merci-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 520px) {
  .merci-cta {
    flex-direction: row;
    justify-content: center;
  }
}

/* --- Pied compact --- */
.pied-simple {
  padding: 26px 0;
  background: var(--nuit-900);
  border-top: 1px solid var(--trait-nuit);
}

.pied-simple-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 640px) {
  .pied-simple-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}


/* ============================================================================
   19. MODALE, HORAIRES, RETOUR EN HAUT, PANNEAU D'AVIS
   ========================================================================= */

/* ---------------- Modale de formulaire (<dialog> natif) ---------------- */

.modale {
  width: min(94vw, 620px);
  max-height: 90vh;
  padding: 0;
  border: 1px solid var(--trait-nuit);
  border-radius: var(--rayon);
  background: var(--nuit-700);
  color: var(--texte-nuit);
  overflow: hidden;
}

.modale::backdrop {
  background: rgba(7, 12, 21, .72);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

.modale-corps {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.modale-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  padding-right: 12px;
  background: var(--nuit-900);
  border-bottom: 1px solid var(--trait-nuit);
}

.modale-tete .fiche-tete {
  border-bottom: none;
}

.modale-contenu {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 22px 20px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (min-width: 640px) {
  .modale-contenu { padding: 26px 24px 28px; }
}

.champ-titre {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--trait-nuit);
  color: var(--texte-nuit);
  font-size: .92rem;
  font-weight: 600;
}

.champ-facultatif {
  color: var(--ardoise-400);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.formulaire-erreur {
  margin: 0;
  padding: 11px 13px;
  border: 1px solid rgba(220, 38, 38, .45);
  border-radius: var(--rayon-sm);
  background: rgba(220, 38, 38, .12);
  color: #FCA5A5;
  font-size: .87rem;
  line-height: 1.55;
}

/* Verrou de défilement quand une couche est ouverte */
body.couche-ouverte {
  overflow: hidden;
}

/* ---------------- Horaires ---------------- */

.horaires {
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}

.horaire {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--trait-nuit);
}

.horaire:last-child {
  border-bottom: none;
}

.horaire-jour {
  color: var(--texte-nuit);
  font-size: .93rem;
  font-weight: 600;
}

.horaire-plage {
  color: var(--texte-nuit-doux);
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .04em;
  text-align: right;
}

.horaire-off .horaire-jour,
.horaire-off .horaire-plage {
  color: var(--ardoise-400);
}

/* ---------------- Bouton retour en haut ---------------- */

.haut {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(245, 158, 11, .40);
  border-radius: 50%;
  background: var(--nuit);
  color: var(--ambre);
  cursor: pointer;
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .8);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
}

.haut.est-visible {
  opacity: 1;
  transform: translateY(0);
}

.haut:hover {
  background: var(--nuit-700);
}

@media (min-width: 1120px) {
  .haut { right: 26px; bottom: 26px; }
}

/* ---------------- Panneau d'avis de fin de page ---------------- */

.sentinelle {
  display: block;
  height: 1px;
}

.avis {
  position: fixed;
  right: 16px;
  bottom: 76px;
  z-index: 55;
  width: min(92vw, 330px);
  padding: 16px 18px 18px;
  border: 1px solid var(--trait-nuit);
  border-radius: var(--rayon);
  background: var(--nuit-800);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .9);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}

.avis.est-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 1120px) {
  .avis { right: 26px; bottom: 88px; }
}

.avis-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.avis-titre {
  margin: 0;
  color: var(--ambre);
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1;
  text-transform: uppercase;
}

.avis-fermer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ardoise-400);
  cursor: pointer;
  transition: color .2s ease;
}

.avis-fermer:hover {
  color: var(--ambre);
}

.avis-fermer .ico {
  width: 15px;
  height: 15px;
}

.avis-question {
  margin: 0 0 12px;
  color: var(--texte-nuit);
  font-size: .9rem;
  line-height: 1.5;
}

.avis-choix {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.avis-btn {
  padding: 7px 13px;
  border: 1px solid var(--trait-nuit);
  border-radius: var(--rayon-sm);
  background: transparent;
  color: var(--texte-nuit);
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.avis-btn:hover {
  border-color: var(--ambre);
  background: rgba(245, 158, 11, .08);
  color: var(--ambre);
}

.avis-merci {
  margin: 4px 0 0;
  color: var(--ambre);
  font-size: .87rem;
  line-height: 1.5;
}

/* Turnstile : centré dans la modale */
.cf-turnstile {
  display: flex;
  justify-content: center;
  min-height: 65px;
}


/* ============================================================================
   20. PHOTOS
   Traitement « plan technique » : cadre fin, désaturation et grille
   millimétrée en surimpression. Pleine largeur sur mobile.
   ========================================================================= */

.photo {
  position: relative;
  margin: 0;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--nuit-900);
  overflow: hidden;
}

.section-sombre .photo,
.photo-sombre {
  border-color: var(--trait-nuit);
}

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.06) brightness(.95);
}

/* Marque d'angle ambre, discrète */
.photo::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--ambre);
  border-left: 2px solid var(--ambre);
  pointer-events: none;
}

/* Emplacement vide, le temps que les vraies photos arrivent */
.photo-vide {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  background:
    repeating-linear-gradient(135deg,
      rgba(148, 163, 184, .07) 0 10px,
      transparent 10px 20px),
    var(--nuit-800);
}

.photo-vide-txt {
  color: var(--ardoise-400);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  line-height: 1.9;
  text-align: center;
  text-transform: uppercase;
}

/* ---------------- Bandes horizontales ---------------- */

.photo-bande {
  margin-top: 24px;
}

.photo-bande .photo-vide {
  aspect-ratio: 21 / 9;
}

/* Sur mobile, la photo sort du conteneur et traverse l'écran :
   c'est ce qui casse réellement le bloc de texte. */
@media (max-width: 767px) {
  .photo-bande {
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    border-inline: none;
    border-radius: 0;
  }
  .photo-bande .photo-vide { aspect-ratio: 3 / 2; }
}


/* ============================================================================
   21. SÉLECTEUR DE PROFIL (section « Pour qui »)
   Onglets défilables sur mobile, colonne verticale sur bureau.
   ========================================================================= */

.profils {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

@media (min-width: 1024px) {
  .profils {
    grid-template-columns: 260px 1fr;
    gap: 36px;
    align-items: start;
  }
}

/* ---------------- Onglets ---------------- */

/* Mobile : grille 2 par 2, les quatre profils visibles d'un coup.
   Pas de défilement horizontal, rien de caché hors écran. */
.profil-onglets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

@media (min-width: 1024px) {
  .profil-onglets {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--trait);
  }
}

.profil-onglet {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 52px;
  padding: 10px 13px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-sm);
  background: var(--blanc);
  color: var(--ardoise-600);
  font-family: var(--font-sans);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.profil-onglet:hover {
  border-color: var(--trait-fort);
  color: var(--nuit);
}

.profil-onglet.est-actif {
  border-color: var(--nuit);
  background: var(--nuit);
  color: var(--blanc);
}

@media (min-width: 1024px) {
  .profil-onglet {
    width: 100%;
    padding: 15px 16px;
    border: none;
    border-bottom: 1px solid var(--trait);
    border-left: 2px solid transparent;
    border-radius: 0;
    background: transparent;
  }
  .profil-onglet:hover {
    background: rgba(11, 18, 32, .03);
  }
  .profil-onglet.est-actif {
    background: var(--blanc);
    border-left-color: var(--ambre);
    color: var(--nuit);
  }
}

.profil-num {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ardoise-400);
  transition: color .2s ease;
}

.profil-onglet.est-actif .profil-num {
  color: var(--ambre);
}

.profil-nom {
  min-width: 0;
}

/* ---------------- Volets ---------------- */

.profil-volets {
  min-width: 0;
}

.profil-volet {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  animation: volet-entree .35s ease both;
}

/* Bureau : le texte à gauche, la photo en portrait à droite.
   Sur mobile, l'ordre du HTML est conservé (photo puis texte). */
@media (min-width: 640px) {
  .profil-volet {
    grid-template-columns: 1.15fr .85fr;
    gap: 28px;
    align-items: center;
  }
  .profil-volet .photo-profil { order: 2; }
  .profil-volet .profil-texte { order: 1; }
}

@keyframes volet-entree {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.photo-profil img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Portrait sur bureau, paysage sur mobile */
@media (min-width: 640px) {
  .photo-profil img { aspect-ratio: 3 / 4; }
}

.profil-texte {
  min-width: 0;
}

.profil-texte .cible-liste {
  margin-top: 16px;
}

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


/* ============================================================================
   22. RÉVÉLATION (section Distinction)
   Au repos, la photo et les cartes sont largement superposées. Quand la
   section entre à l'écran, elles s'écartent en sens inverse : la photo
   remonte, les cartes descendent, et il reste un léger chevauchement.
   Le mouvement se joue une seule fois, il ne rejoue pas au retour.
   ========================================================================= */

.reveler {
  position: relative;
}

.reveler-photo {
  position: relative;
  z-index: 1;
  margin: 0;
}

.reveler-photo img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.reveler-cartes {
  position: relative;
  z-index: 2;
  /* Position finale : léger chevauchement sur le bas de la photo */
  margin-top: -44px;
  padding-inline: 14px;
}

@media (max-width: 767px) {
  .reveler-photo {
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    border-inline: none;
    border-radius: 0;
  }
}

@media (min-width: 768px) {
  .reveler-photo img { aspect-ratio: 21 / 9; }
  .reveler-cartes {
    margin-top: -64px;
    padding-inline: 26px;
  }
}

@media (min-width: 1024px) {
  .reveler-cartes {
    margin-top: -78px;
    padding-inline: 34px;
  }
}

/* ---- Le mouvement ----
   La photo ne bouge pas, elle apparaît en fondu. Seules les cartes
   descendent, ce qui suffit à découvrir la photo.
   Sans JavaScript, tout est déjà en place. */

.js .reveler-photo {
  opacity: 0;
  transition: opacity .9s ease;
}

.js .reveler-cartes {
  transition: transform 1s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
  transition-delay: .12s;
}

/* État de départ : les cartes recouvrent largement la photo */
.js .reveler-cartes { transform: translateY(-84px); }

@media (min-width: 768px)  { .js .reveler-cartes { transform: translateY(-120px); } }
@media (min-width: 1024px) { .js .reveler-cartes { transform: translateY(-146px); } }

/* État final, atteint une fois pour toutes */
.js .reveler.est-ouvert .reveler-photo  { opacity: 1; }
.js .reveler.est-ouvert .reveler-cartes { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .js .reveler-photo  { opacity: 1; transition: none; }
  .js .reveler-cartes { transform: none; transition: none; will-change: auto; }
}


/* ============================================================================
   23. CADRE DE COTATION DU HERO
   Équerres d'angle et cotes qui se tracent une seule fois à l'arrivée,
   comme si on dimensionnait le bloc de titre sur un plan.
   ========================================================================= */

.hero-inner {
  max-width: 940px;
}

.cadre {
  position: relative;
  padding: 26px 20px 34px;
}

@media (min-width: 768px) {
  .cadre { padding: 34px 56px 44px 30px; }
}

.hero-texte {
  min-width: 0;
}

/* ---------------- Équerres d'angle ---------------- */

.cadre-coin {
  position: absolute;
  width: 26px;
  height: 26px;
  pointer-events: none;
}

@media (min-width: 768px) {
  .cadre-coin { width: 34px; height: 34px; }
}

/* Chaque équerre est faite de deux bras qui se tracent depuis l'angle.
   Courbe presque linéaire avec un départ progressif : c'est le geste
   d'un crayon, pas une apparition. */
.cadre-coin::before,
.cadre-coin::after {
  content: "";
  position: absolute;
  background: var(--ambre);
  transition: transform .38s cubic-bezier(.42, 0, .58, 1);
}

.cadre-coin::before {   /* bras horizontal */
  height: 1px;
  width: 100%;
  transform: scaleX(0);
}

.cadre-coin::after {    /* bras vertical */
  width: 1px;
  height: 100%;
  transform: scaleY(0);
}

.cadre-coin-hg { top: 0; left: 0; }
.cadre-coin-hd { top: 0; right: 0; }
.cadre-coin-bg { bottom: 0; left: 0; }
.cadre-coin-bd { bottom: 0; right: 0; }

.cadre-coin-hg::before { top: 0; left: 0; transform-origin: left; }
.cadre-coin-hg::after  { top: 0; left: 0; transform-origin: top; }

.cadre-coin-hd::before { top: 0; right: 0; transform-origin: right; }
.cadre-coin-hd::after  { top: 0; right: 0; transform-origin: top; }

.cadre-coin-bg::before { bottom: 0; left: 0; transform-origin: left; }
.cadre-coin-bg::after  { bottom: 0; left: 0; transform-origin: bottom; }

.cadre-coin-bd::before { bottom: 0; right: 0; transform-origin: right; }
.cadre-coin-bd::after  { bottom: 0; right: 0; transform-origin: bottom; }

/* ---------------- Cotes ---------------- */

.cadre-cote {
  position: absolute;
  pointer-events: none;
}

.cadre-cote-bas {
  left: 26px;
  right: 26px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.cadre-cote-droite {
  display: none;
}

@media (min-width: 768px) {
  .cadre-cote-bas { left: 34px; right: 34px; bottom: 16px; }

  .cadre-cote-droite {
    display: block;
    top: 34px;
    bottom: 34px;
    right: 14px;
    width: 1px;
  }
}

.cadre-trait {
  flex: 1 1 auto;
  height: 1px;
  background: rgba(245, 158, 11, .55);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.9s cubic-bezier(.4, 0, .5, 1);
}

.cadre-trait-v {
  display: block;
  width: 1px;
  height: 100%;
  background: rgba(245, 158, 11, .45);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.5s cubic-bezier(.4, 0, .5, 1);
}

.cadre-fleche {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-block: 3.5px solid transparent;
  opacity: 0;
  transition: opacity .3s ease;
}

.cadre-fleche-g { border-right: 6px solid var(--ambre); }
.cadre-fleche-d { border-left:  6px solid var(--ambre); }

.cadre-valeur {
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  padding: 0 7px;
  background: var(--nuit);
  color: var(--ambre);
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .18em;
  line-height: 1;
  opacity: 0;
  transition: opacity .4s ease;
}

.cadre-valeur-v {
  left: auto;
  right: -6px;
  bottom: 50%;
  transform: translateY(50%) rotate(90deg);
  transform-origin: center;
  white-space: nowrap;
}

/* ---------------- La séquence de tracé ---------------- */

.cadre.est-trace .cadre-coin::before { transform: scaleX(1); }
.cadre.est-trace .cadre-coin::after  { transform: scaleY(1); }

/* Les deux bras de chaque équerre se tracent l'un après l'autre,
   comme quand on pose un angle au crayon. */
.cadre.est-trace .cadre-coin-hg::before { transition-delay: .10s; }
.cadre.est-trace .cadre-coin-hg::after  { transition-delay: .38s; }

.cadre.est-trace .cadre-coin-hd::before { transition-delay: .66s; }
.cadre.est-trace .cadre-coin-hd::after  { transition-delay: .94s; }

.cadre.est-trace .cadre-coin-bd::before { transition-delay: 1.22s; }
.cadre.est-trace .cadre-coin-bd::after  { transition-delay: 1.50s; }

.cadre.est-trace .cadre-coin-bg::before { transition-delay: 1.78s; }
.cadre.est-trace .cadre-coin-bg::after  { transition-delay: 2.06s; }

/* Puis les cotes, une fois le cadre posé */
.cadre.est-trace .cadre-trait   { transform: scaleX(1); transition-delay: 2.55s; }
.cadre.est-trace .cadre-trait-v { transform: scaleY(1); transition-delay: 3.10s; }
.cadre.est-trace .cadre-fleche  { opacity: 1; transition-delay: 4.60s; }
.cadre.est-trace .cadre-valeur  { opacity: 1; transition-delay: 4.85s; }

/* Sans JavaScript ou si le mouvement est refusé : tout est déjà tracé */
html:not(.js) .cadre-coin::before,
html:not(.js) .cadre-coin::after,
html:not(.js) .cadre-trait,
html:not(.js) .cadre-trait-v { transform: none; }

html:not(.js) .cadre-fleche,
html:not(.js) .cadre-valeur { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cadre-coin::before,
  .cadre-coin::after,
  .cadre-trait,
  .cadre-trait-v {
    transform: none;
    transition: none;
  }
  .cadre-fleche,
  .cadre-valeur { opacity: 1; transition: none; }
}


/* ---------------- Ligne de zone qui s'écrit ---------------- */

.note-fixe {
  white-space: pre-wrap;
}

.note-variable {
  color: var(--ambre);
}

/* La fin de phrase reste fixe : seules les régions défilent */
.note-fin {
  color: var(--ardoise-400);
}

.note-visible {
  display: block;
}

/* Curseur de saisie, retiré une fois le texte posé */
.note-variable.est-en-cours::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: .95em;
  margin-left: 2px;
  vertical-align: -.12em;
  background: var(--ambre);
  animation: clignote 1s step-end infinite;
}

@keyframes clignote {
  0%, 50%  { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Contenu réservé aux lecteurs d'écran et aux moteurs de recherche */
.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ============================================================================
   24. PORTRAIT (section « Qui est-ce ? »)
   Emplacement réservé au-dessus du cartouche.
   ========================================================================= */

.colonne-droite {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.portrait img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Cadre d'attente, le temps que la vraie photo arrive */
.portrait-vide {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background:
    repeating-linear-gradient(135deg,
      rgba(148, 163, 184, .07) 0 10px,
      transparent 10px 20px),
    var(--nuit-800);
}

.portrait-txt {
  color: var(--ardoise-400);
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-align: center;
}


/* ---------------- Étapes dépliables (Méthodologie) ---------------- */

.etape-plus {
  margin-top: 10px;
}

.etape-plus-tete {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ambre-sombre);
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  transition: color .2s ease;
}

.etape-plus-tete::-webkit-details-marker {
  display: none;
}

.etape-plus-tete::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon-sm);
  font-size: .78rem;
  line-height: 1;
}

.etape-plus[open] .etape-plus-tete::before {
  content: "\2013";
}

.etape-plus-tete:hover {
  color: var(--nuit);
}

/* Le libellé suit l'état : Déplier quand c'est fermé, Replier quand c'est ouvert */
.mot-replier,
.etape-plus[open] .mot-deplier {
  display: none;
}

.etape-plus[open] .mot-replier {
  display: inline;
}

.etape-plus-txt {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--trait);
  color: var(--ardoise-600);
  font-size: .87rem;
  line-height: 1.7;
}


/* ---- FAQ ----
   Même motif dépliant que la Méthodologie (<details>/<summary> natif,
   bascule Déplier/Replier partagée), mais ici la question est le titre
   cliquable et la réponse s'affiche en dessous. */
.faq-liste {
  margin-top: 8px;
  border-top: 1px solid var(--trait);
}

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

.faq-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}

.faq-tete::-webkit-details-marker {
  display: none;
}

.faq-q {
  margin: 0;
  color: var(--nuit);
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
  transition: color .2s ease;
}

.faq-tete:hover .faq-q {
  color: var(--ambre-sombre);
}

/* Étiquette d'état, calquée sur .etape-plus-tete */
.faq-plus {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  color: var(--ambre-sombre);
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.faq-plus::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon-sm);
  font-size: .78rem;
  line-height: 1;
}

.faq-item[open] .faq-plus::before {
  content: "\2013";
}

/* Le libellé suit l'état (les spans .mot-* et leur repli sont partagés avec la Méthodologie) */
.faq-item[open] .mot-deplier {
  display: none;
}

.faq-item[open] .mot-replier {
  display: inline;
}

.faq-r {
  margin: 0;
  padding: 2px 0 24px;
  max-width: 70ch;
  color: var(--ardoise-600);
  font-size: .95rem;
  line-height: 1.75;
}

@media (max-width: 640px) {
  .faq-q {
    font-size: .98rem;
  }
  .faq-tete {
    gap: 16px;
  }
}


/* ============================================================================
   19. PAGE D'ATTERRISSAGE (estimation-travaux-avant-achat.html)
   En-tete minimal (pas de menu 8 rubriques) + quelques composants propres.
   Tout le reste reutilise les composants existants : btn, cotation, section,
   hero, bandeau, timeline, faq, cartouche (reperes d'angle ambre).
   ========================================================================= */

/* En-tete minimal : barre sombre sticky, logo + actions */
.lp-entete {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--barre-h);
  padding-inline: 20px;
  background: rgba(11, 18, 32, .95);
  border-bottom: 1px solid var(--trait-nuit);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

@media (min-width: 768px) {
  .lp-entete { padding-inline: 32px; }
}

.lp-entete-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Ligne d'identite discrete sous le H1 (mono, ardoise) : ce n'est pas un titre */
.lp-identite {
  margin: 12px 0 0;
  color: var(--ardoise-400);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.5;
}

/* Micro-ligne de reassurance sous le CTA principal du hero */
.lp-reassurance {
  margin: 14px 0 0;
  color: var(--texte-nuit-doux);
  font-size: .82rem;
  line-height: 1.5;
}

/* Lien secondaire discret du hero (page guide) : pas un bouton */
.lp-hero-lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  color: var(--ambre);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  transition: gap .2s ease, color .2s ease;
}

.lp-hero-lien:hover,
.lp-hero-lien:focus-visible {
  color: var(--ambre-clair);
  gap: 12px;
}

.lp-hero-lien .ico {
  width: 18px;
  height: 18px;
}

/* Sommaire : bloc de liens d'ancre, dans la charte */
.lp-sommaire {
  max-width: 820px;
  margin-inline: auto;
  padding: 24px 26px;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}

.lp-sommaire-titre {
  margin: 0 0 14px;
  color: var(--ambre-sombre);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}

.lp-sommaire-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .lp-sommaire-liste {
    grid-template-columns: 1fr 1fr;
    column-gap: 34px;
  }
}

.lp-sommaire-lien {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 0;
  border-bottom: 1px solid var(--trait);
  color: var(--ardoise-600);
  font-size: .92rem;
  line-height: 1.5;
  text-decoration: none;
  transition: color .2s ease;
}

/* Puce ambre en losange, comme les listes du site */
.lp-sommaire-lien::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  background: var(--ambre-sombre);
  transform: rotate(45deg);
}

.lp-sommaire-lien:hover,
.lp-sommaire-lien:focus-visible {
  color: var(--ambre-sombre);
}

/* Paragraphes de contenu */
.lp-texte {
  max-width: 68ch;
  margin: 0 0 16px;
  color: var(--ardoise-600);
  font-size: 1rem;
  line-height: 1.75;
}

.lp-texte:last-child {
  margin-bottom: 0;
}

.section-sombre .lp-texte {
  color: var(--texte-nuit-doux);
}

/* Panneau "cartouche" avec repere d'angle ambre (Ce que je vous remets) */
.lp-panneau {
  position: relative;
  margin-top: 22px;
  padding: 22px;
  background: var(--nuit);
  border: 1px solid var(--nuit-700);
  border-radius: var(--rayon);
}

.lp-panneau::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--ambre);
  border-left: 2px solid var(--ambre);
  pointer-events: none;
}

/* Panneau suivi d'autres paragraphes (section « Quels travaux chiffrer ») :
   espace avant le texte qui suit, sans toucher le panneau de la section 2. */
.lp-panneau-espace {
  margin-bottom: 26px;
}

.lp-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-liste-item {
  position: relative;
  padding: 12px 0 12px 22px;
  border-bottom: 1px solid var(--trait-nuit);
  color: var(--texte-nuit);
  font-size: .95rem;
  line-height: 1.65;
}

.lp-liste-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Puce ambre en losange, comme les listes de « Pour qui » (.cible-puce).
   Sur fond sombre : ambre plein (le repère d'angle reste sur le cadre du panneau). */
.lp-liste-item::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 2px;
  width: 6px;
  height: 6px;
  background: var(--ambre);
  transform: rotate(45deg);
}

/* Appel final centre */
.lp-final-ligne {
  max-width: 640px;
  margin: 0 auto 26px;
  color: var(--texte-nuit-doux);
  font-size: 1.05rem;
  line-height: 1.7;
  text-align: center;
}

/* Petite ligne de réassurance sous les boutons de l'appel final */
.lp-final-note {
  margin: 18px 0 0;
  color: var(--texte-nuit-doux);
  font-size: .82rem;
  line-height: 1.5;
  text-align: center;
}

.lp-final-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 460px;
  margin-inline: auto;
}

@media (min-width: 520px) {
  .lp-final-cta {
    flex-direction: row;
    justify-content: center;
  }
}

/* Pied d'identité : réutilise .pied d'index. Pas de bloc .pied-bas ici,
   donc on retire le filet de séparation qui pendouillait sous .pied-haut. */
.lp-pied .pied-haut {
  border-bottom: none;
  padding-bottom: 0;
}

/* Décalage d'ancrage sous l'en-tête collant (liens directs vers une section) */
.lp-cible {
  scroll-margin-top: 80px;
}

/* ---- Plan technique animé du hero ----
   À droite, faible présence, derrière le texte (hero-inner z-index:1),
   devant la grille figée (grille-tech z-index:0). Parallaxe pilotée en JS. */
.hero-plan {
  position: absolute;
  top: 50%;
  right: 3%;
  z-index: 0;
  transform: translateY(-50%);
  opacity: .45;
  pointer-events: none;
  will-change: transform;
}

.hero-plan-svg {
  display: block;
  width: 340px;
  max-width: 42vw;
  height: auto;
}

/* Tracé des traits au chargement (pathLength + stroke-dashoffset) */
.pth {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: tracer 1.5s ease forwards;
}

.hero-plan-svg .pth:nth-child(1) { animation-delay: .15s; }
.hero-plan-svg .pth:nth-child(2) { animation-delay: .6s; }
.hero-plan-svg .pth:nth-child(3) { animation-delay: .8s; }
.hero-plan-svg .pth:nth-child(4) { animation-delay: 1.15s; }
.hero-plan-svg .pth:nth-child(5) { animation-delay: .35s; }
.hero-plan-svg .pth:nth-child(6) { animation-delay: .9s; }
.hero-plan-svg .pth:nth-child(7) { animation-delay: .55s; }

@keyframes tracer {
  to { stroke-dashoffset: 0; }
}

/* Petit écran : plan masqué pour garder le texte du hero parfaitement lisible */
@media (max-width: 767px) {
  .hero-plan { display: none; }
}

/* Mouvement réduit : traits déjà tracés, aucune animation */
@media (prefers-reduced-motion: reduce) {
  .pth {
    stroke-dashoffset: 0;
    animation: none;
  }
}

/* ---- Bande de rupture ---- */
.lp-bande {
  text-align: center;
}

.lp-bande-phrase {
  max-width: 760px;
  margin: 0 auto;
  color: var(--blanc);
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.01em;
}

.lp-bande .cotation-centre {
  margin-top: 24px;
}

/* ---- Barre d'action collante, mobile uniquement ----
   Le <dialog> de la modale est en top-layer : cette barre (z-index 50) passe
   toujours dessous, et s'efface en plus quand la modale est ouverte. */
.lp-cta-mobile {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(11, 18, 32, .96);
  border-top: 1px solid var(--trait-nuit);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transform: translateY(100%);
  transition: transform .3s ease, opacity .2s ease;
}

.lp-cta-mobile.est-visible {
  transform: none;
}

body.couche-ouverte .lp-cta-mobile {
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 768px) {
  .lp-cta-mobile { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-cta-mobile { transition: none; }
}

/* Bloc « Qui suis-je » : photo à gauche, texte + cartouche à droite */
.lp-bio-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

@media (min-width: 1024px) {
  .lp-bio-grille {
    grid-template-columns: 1fr 1.4fr;
    gap: 48px;
  }
}

.lp-bio-texte {
  min-width: 0;
}

.lp-bio-texte .cartouche {
  margin-top: 24px;
}

/* Ligne de repères en JetBrains Mono, sous le texte */
.lp-reperes {
  margin: 18px 0 0;
  color: var(--ardoise-600);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.7;
}

/* Grille du bloc preuve : fiches .realisation en grille (pas de carrousel) */
/* Bloc preuve : réutilise .realisations-grille (grille desktop + carrousel mobile
   avec accroche, contrôles et compteur, identiques à la section Réalisations).
   .lp-preuve n'ajuste que le nombre de colonnes desktop pour ces quatre fiches. */
.lp-preuve {
  margin-top: 22px;
}

@media (min-width: 860px) {
  .lp-preuve {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* « Comment ça se passe » : sur desktop, tout le contenu (titre, cotation et
   les 3 étapes) partage une seule colonne centrée de 900px, alignée à gauche.
   Le « C » du titre commence donc au même bord que la colonne « 01 ». Sur
   mobile, rien ne change (une colonne, aligné à gauche). */
@media (min-width: 900px) {
  .lp-methode .wrap {
    max-width: 900px;
  }
  .lp-methode .section-tete {
    max-width: none;
  }
  .lp-methode .timeline {
    grid-template-columns: repeat(3, 1fr);
  }
}