/* =====================================================================
   ARCHIPLUS — Thème sombre (accueil, tarifs)
   ---------------------------------------------------------------------
   Thème sombre. Feuille autonome : elle ne partage rien avec public.css,
   qui habille les autres pages publiques (tarifs, contact, mentions).

   Récit commercial : organisation → temps → projets → suivi → revenus.
   Vocabulaire visuel emprunté au dessin d'architecte — intitulés de
   section posés sur une ligne de cote, nomenclature des modules.
   ===================================================================== */

/* =====================================================================
   1. JETONS
   ===================================================================== */
:root{
  --noir:#000000;
  --calque:#0A0D10;        /* surface posée sur le noir */
  --calque-2:#10151B;      /* même surface, au survol */
  --trait:#1A2026;         /* filet discret */
  --trait-fort:#2B353F;    /* filet lisible, lignes de cote */

  --turquoise:#00ADB5;     /* accent principal — celui de la charte */
  --turquoise-vif:#00D8E4; /* survol, éclats */
  --azur:#19A1F5;          /* couleur du hero WebGL, en second */

  --craie:#E8EDF2;         /* texte principal      — 15,8:1 sur noir */
  --craie-2:#8A97A3;       /* texte secondaire     —  7,0:1 sur noir */
  --craie-3:#5C6773;       /* mentions, désactivé */

  --display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --etiquette:"Jost","Archivo",system-ui,sans-serif;
  --sortie:cubic-bezier(.16,1,.3,1);
}

/* =====================================================================
   2. BASE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--noir);
  color:var(--craie);
  font:400 1rem/1.7 var(--display);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3{margin:0;line-height:1.12;letter-spacing:-.03em;font-weight:700}
p{margin:0 0 1rem}
img{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0;list-style:none}

a{color:var(--turquoise);text-decoration:none}

:where(a,button,summary,details):focus-visible{
  outline:2px solid var(--turquoise-vif);
  outline-offset:3px;
  border-radius:2px;
}

.dedans{width:100%;max-width:74rem;margin:0 auto;padding:0 1.5rem}

/* Aucun filet entre les sections : la ligne de cote qui ouvre chacune
   d'elles fait déjà office de séparation, et deux traits l'un sous
   l'autre hachaient la page sans rien apporter.
   3,25rem de part et d'autre, soit 6,5rem entre deux sections. */
.bloc{padding:3.25rem 0;position:relative}

/* L'en-tête est fixe : sans cette marge, un lien d'ancre amène le titre
   de section juste dessous, à moitié caché. */
.bloc[id]{scroll-margin-top:5.5rem}

/* =====================================================================
   3. LIGNE DE COTE — la signature de la page
   ---------------------------------------------------------------------
   Un titre de section se lit comme une cote sur un plan : le code de
   la phase, puis le trait avec ses ticks d'extrémité.
   ===================================================================== */
.cote{display:flex;align-items:center;gap:1.1rem;margin-bottom:2rem}

.cote-code{
  font-family:var(--etiquette);font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--turquoise);white-space:nowrap;
}

.cote-trait{flex:1;height:1px;background:var(--trait-fort);position:relative}
.cote-trait::before,.cote-trait::after{
  content:"";position:absolute;top:-3.5px;
  width:1px;height:8px;background:var(--trait-fort);
}
.cote-trait::before{left:0}
.cote-trait::after{right:0}

/* Le label se lit au milieu de sa ligne, comme une cote sur un plan.
   Les ticks ne se posent qu'aux deux extrémités : ceux qui tombaient de
   part et d'autre du label auraient donné un trait coupé en deux. */
.cote-trait:first-child::after{display:none}
.cote-trait:last-child::before{display:none}

/* =====================================================================
   4. TYPOGRAPHIE DE SECTION
   ===================================================================== */
.titre{
  font-size:clamp(2.05rem,4.2vw,3.3rem);
  font-weight:800;
  letter-spacing:-.04em;
  /* 36ch : assez large pour que la plus longue première ligne — « Toute
     votre boîte d'architecture. », 33 signes — tienne d'un seul tenant.
     C'est le <br class="saut"> qui décide de la coupure, pas ce plafond.
     À 22ch, ce titre se cassait en trois lignes. */
  max-width:36ch;
  margin:0 auto 1.15rem;
  text-align:center;
}
.titre .accent{color:var(--turquoise)}

/* Le trait se déploie sous le titre au moment où la section entre dans
   l'écran. C'est la seule animation de la page qui DESSINE au lieu de
   faire apparaître — elle reprend le geste de la cote, en plus vif. */
.titre::after{
  content:"";display:block;height:2px;width:0;
  background:var(--turquoise);
  margin:1.35rem auto 0;
  transition:width .9s var(--sortie) .2s;
}
.titre.vu::after,.vu .titre::after{width:4.5rem}

.chapeau{
  color:var(--craie-2);
  font-size:1.0625rem;
  max-width:54ch;
  margin:0 auto 2.75rem;
  text-align:center;
}

/* Dans une composition à deux colonnes, un titre centré flotte : ceux
   des blocs image + texte restent calés à gauche, avec leur trait. */
/* Le passage à la ligne avant l'accent tient le titre en deux blocs
   nets, au lieu de laisser la couleur se couper au milieu d'une ligne.
   Sur mobile la place manque : le texte se replace tout seul. */
@media (min-width:601px){ .saut{display:inline} }
@media (max-width:600px){ .saut{display:none} }

.duo-texte .titre{text-align:left;max-width:none;margin-left:0;margin-right:0}
.duo-texte .titre::after{margin-left:0}
.duo-texte p{text-align:left}

/* =====================================================================
   5. BOUTONS
   ===================================================================== */
/* Boutons fins. Trois leviers, pas un seul : le corps descend à 13 px,
   la graisse passe de 600 à 500, et surtout l'interligne est ramené à
   1,2 — hérité du corps de texte à 1,7, il gonflait la hauteur d'une
   dizaine de pixels sans qu'aucun réglage de padding n'y change rien.
   Une pointe de letter-spacing positif compense la perte de corps. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--display);font-weight:500;font-size:.8125rem;
  line-height:1.2;letter-spacing:.01em;
  padding:.6rem 1.2rem;border-radius:2px;
  border:1px solid transparent;cursor:pointer;
  transition:background .25s var(--sortie),border-color .25s var(--sortie),
             color .25s var(--sortie),transform .25s var(--sortie);
}
.btn:hover{transform:translateY(-1px)}

.btn-plein{background:var(--turquoise);color:#00161A}
.btn-plein:hover{background:var(--turquoise-vif)}

.btn-ligne{border-color:var(--trait-fort);color:var(--craie)}
.btn-ligne:hover{border-color:var(--turquoise);color:var(--turquoise)}

/* « Gros » ne veut plus dire massif : juste un cran au-dessus, pour que
   les appels principaux se distinguent sans peser. */
.btn-gros{padding:.72rem 1.5rem;font-size:.875rem}

/* La flèche avance au survol : le seul mouvement décoratif de la page. */
.fleche::after{content:"→";transition:transform .25s var(--sortie)}
.fleche:hover::after{transform:translateX(4px)}

.actions{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}

/* =====================================================================
   6. EN-TÊTE
   ===================================================================== */
.entete{
  position:fixed;inset:0 0 auto;z-index:60;
  border-bottom:1px solid transparent;
  transition:background .3s var(--sortie),border-color .3s var(--sortie),
             backdrop-filter .3s var(--sortie);
}
/* En haut de page, l'en-tête est transparent et la sphère passe
   dessous : les liens de navigation s'y perdaient. Ce voile les tient
   sans refermer la composition, et s'efface quand le fond opaque prend
   le relais au défilement. */
.entete::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.88),rgba(0,0,0,.45) 60%,transparent);
  transition:opacity .3s var(--sortie);
}
.entete.pose::before{opacity:0}
.entete.pose{
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--trait);
}
.entete .dedans{display:flex;align-items:center;justify-content:space-between;
  height:4.5rem;max-width:80rem}

.logo{
  font-family:var(--display);font-weight:500;font-size:1.0625rem;
  letter-spacing:.14em;color:var(--craie);
}
.logo b{font-weight:800;color:var(--turquoise)}

.nav{display:flex;align-items:center;gap:2rem}
.nav a{color:var(--craie-2);font-size:.9375rem;transition:color .2s}
.nav a:hover{color:var(--craie)}
/* « Se connecter » est une porte d'entrée, pas un lien de sommaire :
   il se tient un cran plus clair que les ancres de section. */
.nav .nav-connexion{color:var(--craie)}
.nav .nav-connexion:hover{color:var(--turquoise)}
.nav .btn{color:var(--craie)}
.nav .btn:hover{color:var(--turquoise)}

/* =====================================================================
   7. HERO
   ===================================================================== */
.hero{
  position:relative;width:100%;
  height:100vh;height:100svh;min-height:40rem;
  overflow:hidden;background:var(--noir);
}
/* La scène occupe la moitié droite et déborde du cadre : c'est ce
   débord qui décentre la composition. Le canevas se dimensionne sur ce
   bloc, donc la sphère reste ronde quelles que soient ses proportions. */
.hero-scene{position:absolute;top:0;bottom:0;left:40%;right:-10%;z-index:0}
.hero-scene canvas{display:block}

/* Voile horizontal : le noir tient la colonne de gauche où se pose le
   texte, et se retire vers la droite pour dégager la sphère. Le second
   dégradé raccroche simplement le bas au fond de la page. */
.hero-voile{
  position:absolute;inset:0;z-index:10;pointer-events:none;
  background:
    linear-gradient(to right,
      var(--noir) 0%,
      rgba(0,0,0,.92) 26%,
      rgba(0,0,0,.55) 46%,
      rgba(0,0,0,.12) 66%,
      transparent 80%),
    linear-gradient(to top, var(--noir) 0%, transparent 22%);
}

.hero-contenu{
  position:relative;z-index:20;
  display:flex;align-items:center;
  height:100%;
}
/* Le bloc se cale sur la même marge gauche que les sections : le hero
   est décentré, mais il reste aligné sur la grille de la page. */
.hero-contenu .dedans{width:100%}
/* 40rem : la largeur juste nécessaire pour que « Plus d'organisation. »
   tienne sur une ligne. En dessous, le titre casse en quatre lignes et
   le triptyque ne se lit plus. */
.hero-bloc{max-width:40rem;text-align:left}

.hero-titre{
  font-size:clamp(2.15rem,4.2vw,3.6rem);
  font-weight:800;letter-spacing:-.045em;line-height:1.06;
  margin:0;
}
.hero-titre .accent{
  color:var(--turquoise);
  /* Le trait sous l'accent rappelle le soulignement d'une cote. */
  box-shadow:inset 0 -.09em 0 rgba(0,173,181,.32);
}
/* La signature de marque : elle porte le nom et la promesse, donc elle
   se détache du paragraphe explicatif qui la suit. */
.hero-signature{
  margin:1.75rem 0 0;font-size:1.0625rem;font-weight:600;
  letter-spacing:-.015em;color:var(--craie);
}
.hero-signature b{color:var(--turquoise);font-weight:700;letter-spacing:.02em}

.hero-texte{
  margin:.85rem 0 0;max-width:46ch;
  font-size:1.0625rem;line-height:1.7;color:var(--craie-2);
}
.hero-actions{margin-top:2.4rem}
.hero-note{
  margin:1.6rem 0 0;font-family:var(--etiquette);
  font-size:.78rem;letter-spacing:.05em;color:var(--craie-3);
}
.hero-note b{color:var(--turquoise);font-weight:500}

/* Séquence d'entrée : un seul mouvement orchestré, du haut vers le bas. */
/* Le pas est serré à dessein : avec six éléments, l'ancien décalage de
   .13s repoussait l'apparition du bouton principal à près de deux
   secondes après le chargement. Ici tout est posé en 1,3 s. */
.hero-bloc > *{animation:monte .85s var(--sortie) both}
.hero-bloc > :nth-child(1){animation-delay:.06s}
.hero-bloc > :nth-child(2){animation-delay:.14s}
.hero-bloc > :nth-child(3){animation-delay:.22s}
.hero-bloc > :nth-child(4){animation-delay:.3s}
.hero-bloc > :nth-child(5){animation-delay:.38s}

@keyframes monte{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* =====================================================================
   8. ÉTAT DES LIEUX — avant / après
   ===================================================================== */
.bascule{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:stretch}

.volet{
  background:var(--calque);border:1px solid var(--trait);
  border-radius:3px;padding:2.25rem;
}
.volet-avant{border-style:dashed;background:transparent}

.volet .etiq{
  display:inline-block;font-family:var(--etiquette);font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:1.5rem;
}
.volet-avant .etiq{color:var(--craie-3)}
.volet-apres .etiq{color:var(--turquoise)}

.volet li{
  padding:.7rem 0 .7rem 1.6rem;position:relative;
  font-size:.95rem;line-height:1.55;
  border-bottom:1px solid var(--trait);
}
.volet li:last-child{border-bottom:0}
.volet-avant li{color:var(--craie-3)}
.volet-apres li{color:var(--craie)}

.volet-avant li::before{
  content:"×";position:absolute;left:0;top:.65rem;
  font-family:var(--etiquette);color:var(--craie-3);
}
.volet-apres li::before{
  content:"✓";position:absolute;left:0;top:.65rem;
  font-family:var(--etiquette);color:var(--turquoise);
}

.entre{
  align-self:center;font-family:var(--etiquette);font-size:1.5rem;
  color:var(--trait-fort);
}

/* Les trois lieux d'usage, en pastilles : ils disent la mobilité plus
   vite qu'une phrase. */
.lieux{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.75rem}
.lieux li{
  font-family:var(--etiquette);font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--turquoise);
  border:1px solid var(--trait-fort);border-radius:2px;
  padding:.5rem .85rem;
}

/* =====================================================================
   9. PROGRAMME — la nomenclature des modules
   ---------------------------------------------------------------------
   Pas de cartes. Sur un jeu de plans, un programme se lit en
   nomenclature : des lignes réglées, un repère, un intitulé, une
   description. Six pavés pleins posaient un boîtier dans un boîtier —
   l'icône encadrée à l'intérieur de la carte encadrée — là où trois
   filets suffisent. Chaque module tient sur une ligne pleine largeur,
   et sa description respire au lieu de s'entasser sur cinq lignes dans
   une colonne étroite.
   ===================================================================== */
.modules{border-top:1px solid var(--trait)}

.module{
  position:relative;
  display:grid;
  grid-template-columns:1.6rem 10rem 1fr;
  gap:0 2rem;
  align-items:start;
  padding:1.55rem .25rem;
  border-bottom:1px solid var(--trait);
  transition:background .35s var(--sortie);
}
.module:hover{background:rgba(232,237,242,.022)}

/* Le filet du bas se retrace en turquoise au survol : le même geste que
   le trait qui se déploie sous les titres de section. */
.module::after{
  content:"";position:absolute;left:0;bottom:-1px;
  height:1px;width:0;background:var(--turquoise);
  transition:width .55s var(--sortie);
}
.module:hover::after{width:100%}

.module-ico{
  display:block;color:var(--turquoise);margin-top:.15rem;
  transition:color .3s var(--sortie),transform .45s var(--sortie);
}
.module-ico svg{display:block;width:1.4rem;height:1.4rem}
.module:hover .module-ico{color:var(--turquoise-vif);transform:translateY(-2px)}

.module-nom{
  font-size:1.0625rem;font-weight:600;letter-spacing:-.02em;color:var(--craie);
}
.module-txt{
  margin:0;color:var(--craie-2);
  font-size:.9375rem;line-height:1.7;max-width:70ch;
}

/* =====================================================================
   10. DUO IMAGE + TEXTE
   ===================================================================== */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.duo-inverse .duo-texte{order:2}

.duo-texte p{color:var(--craie-2)}
.duo-texte .titre{margin-bottom:1.25rem}
.duo-texte .btn{margin-top:.75rem}

/* Les captures de l'application sont claires : sur fond noir elles
   éblouissent. Le filet, la légère désaturation et le halo turquoise
   les font tenir dans la page au lieu de la trouer. */
.visuel{position:relative;isolation:isolate}
.visuel::before{
  content:"";position:absolute;inset:-12%;z-index:-1;
  background:radial-gradient(closest-side,rgba(0,173,181,.16),transparent 72%);
  filter:blur(28px);
}
/* Aucun filet ici : les visuels sont déjà des mockups d'appareil, avec
   leur propre cadre et une large marge transparente autour. Une bordure
   posée sur l'image ne suit pas l'appareil, elle dessine un rectangle
   flottant autour du vide. Le halo suffit à les asseoir sur le noir. */
.visuel img{display:block}
.visuel-mobile{max-width:16rem;margin:0 auto}

/* =====================================================================
   11. PARCOURS CLIENT
   ---------------------------------------------------------------------
   Seul endroit numéroté de la page : ici, l'ordre des étapes est
   l'information.
   ===================================================================== */
.parcours{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;border:1px solid var(--trait);border-radius:3px;overflow:hidden;
}
.jalon{
  padding:2rem;border-right:1px solid var(--trait);
  border-bottom:1px solid var(--trait);
  transition:background .3s var(--sortie);
}
.jalon:hover{background:var(--calque)}
.jalon:nth-child(3n){border-right:0}
.jalon:nth-child(n+4){border-bottom:0}

.jalon .n{
  display:block;font-family:var(--etiquette);font-size:.72rem;
  letter-spacing:.16em;color:var(--turquoise);margin-bottom:1rem;
}
.jalon h3{font-size:1.0625rem;margin-bottom:.5rem}
.jalon p{color:var(--craie-2);font-size:.9rem;line-height:1.6;margin:0}

.bilan{
  margin-top:2.5rem;padding:2.25rem;
  background:var(--calque);border:1px solid var(--trait);border-radius:3px;
}
.bilan h3{font-size:1.125rem;margin-bottom:1.5rem;font-weight:600}
.bilan ul{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.bilan li{
  font-family:var(--etiquette);font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--craie-2);
  padding-top:1rem;border-top:1px solid var(--turquoise);
}

/* =====================================================================
   12. CROISSANCE — la phrase pivot et les trois atouts
   ===================================================================== */
/* La phrase pivot de la section, isolée entre deux filets : c'est elle
   qui relie l'organisation au revenu. */
.cle{
  margin:0 auto 3rem;max-width:34ch;
  padding:1.75rem 0;
  border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);
  text-align:center;
  font-size:clamp(1.25rem,2.1vw,1.6rem);font-weight:700;
  letter-spacing:-.025em;color:var(--turquoise);
}

.atouts{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.atout{padding:1.75rem 0 0;border-top:1px solid var(--trait-fort)}
.atout h3{
  font-family:var(--etiquette);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--turquoise);margin-bottom:.9rem;
}
.atout p{color:var(--craie-2);font-size:.9375rem;line-height:1.7;margin:0}

/* =====================================================================
   13. MISE EN ROUTE
   ===================================================================== */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
.etape{padding-top:1.5rem;border-top:1px solid var(--trait-fort)}
.etape .pas{
  display:block;font-family:var(--etiquette);font-size:.72rem;
  letter-spacing:.16em;color:var(--turquoise);margin-bottom:.9rem;
}
.etape h3{font-size:1.125rem;margin-bottom:.5rem}
.etape p{color:var(--craie-2);font-size:.9375rem;margin:0}

.appel-milieu{
  margin-top:3.5rem;padding-top:2.5rem;border-top:1px solid var(--trait);
  display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;
}
.appel-milieu span{
  font-family:var(--etiquette);font-size:.78rem;letter-spacing:.05em;
  color:var(--craie-3);
}

/* =====================================================================
   14. QUESTIONS FRÉQUENTES
   ===================================================================== */
.questions{max-width:52rem}
.q{border-bottom:1px solid var(--trait)}
.q summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.5rem 0;cursor:pointer;list-style:none;
  font-weight:600;font-size:1.0625rem;letter-spacing:-.015em;
  transition:color .2s;
}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{color:var(--turquoise)}
.q summary::after{
  content:"+";font-family:var(--etiquette);font-weight:400;font-size:1.25rem;
  color:var(--turquoise);flex-shrink:0;transition:transform .25s var(--sortie);
}
.q[open] summary::after{transform:rotate(45deg)}
.q p{color:var(--craie-2);font-size:.9375rem;padding:0 0 1.5rem;
  max-width:60ch;margin:0}

/* =====================================================================
   15. APPEL FINAL
   ===================================================================== */
.final{position:relative;text-align:center;overflow:hidden}
.final::before{
  content:"";position:absolute;left:50%;top:0;
  width:min(46rem,90vw);aspect-ratio:1;transform:translate(-50%,-42%);
  background:radial-gradient(closest-side,rgba(0,173,181,.13),transparent 70%);
  pointer-events:none;
}
.final .dedans{position:relative}
.final .titre{max-width:20ch}
.final .chapeau{margin-bottom:2.5rem}
.final .actions{justify-content:center}

.garanties{
  display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;
  margin-top:3rem;padding-top:2rem;border-top:1px solid var(--trait);
}
.garanties li{
  font-family:var(--etiquette);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--craie-3);
}
.garanties li::before{content:"✓ ";color:var(--turquoise)}

/* =====================================================================
   16. PIED
   ===================================================================== */
.pied{border-top:1px solid var(--trait);padding:3.5rem 0 2.5rem;background:var(--noir)}
.pied .dedans{display:grid;gap:2.5rem}

.pied-marque{margin:0;display:grid;gap:.8rem;max-width:36rem}
.pied-marque b{
  font-family:var(--display);font-weight:500;font-size:1.0625rem;
  letter-spacing:.14em;color:var(--craie);
}
.pied-marque span{color:var(--craie-3);font-size:.9375rem;line-height:1.7}

.pied-liens{display:flex;flex-wrap:wrap;gap:.75rem 2rem}
.pied-liens a{color:var(--craie-2);font-size:.9375rem}
.pied-liens a:hover{color:var(--turquoise)}

.pied-bas{
  margin:0;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
  padding-top:2rem;border-top:1px solid var(--trait);
  font-size:.875rem;color:var(--craie-3);
}
.pied-bas a{color:var(--craie-2)}
.pied-bas a:hover{color:var(--turquoise)}

/* =====================================================================
   17. APPARITION AU DÉFILEMENT
   ===================================================================== */
.rev{
  opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--sortie),transform .8s var(--sortie);
  transition-delay:var(--d,0s);
}
.rev.vu{opacity:1;transform:none}

/* =====================================================================
   18. RESPONSIVE
   ===================================================================== */
@media (max-width:960px){
  /* La colonne fixe de l'intitulé n'a plus la place : le nom passe
     au-dessus de sa description, l'icône garde sa gouttière. */
  .module{grid-template-columns:1.6rem 1fr;gap:0 1.5rem}
  .module-txt{grid-column:2}
  .module-nom{margin-bottom:.45rem}
  .parcours{grid-template-columns:repeat(2,1fr)}
  .jalon:nth-child(3n){border-right:1px solid var(--trait)}
  .jalon:nth-child(2n){border-right:0}
  .jalon:nth-child(n+4){border-bottom:1px solid var(--trait)}
  .jalon:nth-child(n+5){border-bottom:0}
  .duo{gap:3rem}
}

}

/* Sous 900 px, la composition décentrée n'a plus la place de tenir : la
   sphère repasse en fond, le texte descend sous elle, et le voile
   redevient vertical pour porter la lisibilité. */
@media (max-width:900px){
  /* La sphère remonte franchement : en pleine largeur elle venait sinon
     mordre sur le label et le titre, que le voile seul ne suffisait pas
     à détacher. */
  .hero-scene{left:0;right:0;top:-18%;bottom:28%}
  /* Le voile mobile monte plus haut que sur desktop : le petit label en
     capitales se pose là où la sphère est encore vive, et à .22
     d'opacité il devenait illisible. */
  .hero-voile{
    background:linear-gradient(to top,
      var(--noir) 0%,
      rgba(0,0,0,.96) 40%,
      rgba(0,0,0,.82) 58%,
      rgba(0,0,0,.45) 74%,
      rgba(0,0,0,.1) 86%,
      transparent 95%);
  }
  .hero-contenu{align-items:flex-end;padding-bottom:4.5rem}
  .hero-bloc{max-width:34rem}
}

@media (max-width:760px){
  .bloc{padding:2.5rem 0}
  .bascule{grid-template-columns:1fr;gap:1.25rem}
  .entre{transform:rotate(90deg);justify-self:center}
  .atouts{grid-template-columns:1fr}
  .parcours{grid-template-columns:1fr}
  /* Empilés, deux boutons de largeurs différentes font désordre. */
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .jalon{border-right:0 !important;border-bottom:1px solid var(--trait) !important}
  .jalon:last-child{border-bottom:0 !important}
  .bilan ul{grid-template-columns:repeat(2,1fr)}
  .duo,.duo-inverse .duo-texte{grid-template-columns:1fr;order:0}
  .etapes{grid-template-columns:1fr;gap:2rem}
  .hero-contenu{padding-bottom:3.5rem}
  .garanties{gap:1rem 1.75rem}
}

/* =====================================================================
   19. MOUVEMENT RÉDUIT
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-bloc > *{animation:none}
  .rev{opacity:1;transform:none;transition:none}
  .titre::after{transition:none}
  .btn:hover{transform:none}
  .fleche:hover::after{transform:none}
}

/* =====================================================================
   20. MESSAGES FLASH
   ---------------------------------------------------------------------
   Aucune redirection ne pointe aujourd'hui vers « / », donc ce bloc ne
   s'affiche jamais. Il est là pour que le jour où l'une le fera, le
   message ait une apparence, au lieu de tomber sans style sur le noir.
   ===================================================================== */
.messages-sombre{padding:6rem 0 0}
.message{
  border:1px solid var(--trait-fort);border-left-width:2px;border-radius:2px;
  padding:.9rem 1.1rem;margin-bottom:.75rem;
  font-size:.9375rem;color:var(--craie);
  background:var(--calque);
}
.message-succes{border-left-color:var(--turquoise)}
.message-info{border-left-color:var(--azur)}
.message-erreur{border-left-color:#E5484D}

/* =====================================================================
   21. TARIFS
   ===================================================================== */
.tarif{
  max-width:46rem;margin:0 auto;
  background:var(--calque);border:1px solid var(--trait);border-radius:3px;
  overflow:hidden;
}
.tarif-phase{
  display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center;
  padding:2rem 2.25rem;
}
.tarif-phase + .tarif-phase{border-top:1px solid var(--trait)}
.tarif-quand{
  font-family:var(--etiquette);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--turquoise);margin:0 0 .55rem;
}
.tarif-quoi{margin:0;color:var(--craie-2);font-size:.9375rem;line-height:1.6}
.tarif-prix{
  font-family:var(--etiquette);font-weight:600;
  font-size:2.4rem;line-height:1;letter-spacing:-.04em;
  color:var(--craie);white-space:nowrap;text-align:right;
}
.tarif-prix small{
  display:block;margin-top:.55rem;
  font-size:.75rem;letter-spacing:.08em;color:var(--craie-3);
}

/* Le pied de la carte porte l'action : un fond turquoise très dilué le
   détache des deux lignes de prix sans ajouter de filet. */
.tarif-pied{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;
  padding:1.75rem 2.25rem;
  border-top:1px solid var(--trait);
  background:rgba(0,173,181,.045);
}
.tarif-pied span{
  font-family:var(--etiquette);font-size:.75rem;letter-spacing:.05em;
  color:var(--craie-3);
}

/* --- Ce qui est compris -------------------------------------------- */
.compris{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 3rem;
  max-width:58rem;margin:0 auto;
}
.compris li{
  position:relative;padding:.9rem 0 .9rem 1.75rem;
  border-bottom:1px solid var(--trait);
  color:var(--craie);font-size:.9375rem;
}
.compris li::before{
  content:"✓";position:absolute;left:0;top:.9rem;
  color:var(--turquoise);font-family:var(--etiquette);
}

/* --- Création de site web ------------------------------------------ */
.offres{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;align-items:stretch}
.offre{
  display:flex;flex-direction:column;
  background:var(--calque);border:1px solid var(--trait);border-radius:3px;
  padding:2.25rem;
}
.offre-phare{border-color:var(--turquoise)}

.offre-etiq{
  margin:0 0 1.35rem;
  font-family:var(--etiquette);font-size:.7rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--craie-3);
}
.offre-phare .offre-etiq{color:var(--turquoise)}

.offre h3{font-size:1.1875rem;margin-bottom:.75rem}
.offre p{color:var(--craie-2);font-size:.9375rem;line-height:1.7;margin:0 0 1.75rem}

.offre-prix{
  margin-top:auto;
  font-family:var(--etiquette);font-weight:600;
  font-size:1.9rem;line-height:1;letter-spacing:-.03em;color:var(--craie);
}
.offre-phare .offre-prix{color:var(--turquoise)}
.offre-avant{
  text-decoration:line-through;color:var(--craie-3);
  font-size:1.15rem;margin-right:.6rem;
}
.offre-prix small{
  display:block;margin-top:.7rem;
  font-size:.75rem;letter-spacing:.06em;color:var(--craie-3);
}

@media (max-width:760px){
  .tarif-phase{grid-template-columns:1fr;gap:1rem}
  .tarif-prix{text-align:left}
  .tarif-phase,.tarif-pied{padding-left:1.5rem;padding-right:1.5rem}
  .compris{grid-template-columns:1fr;gap:0}
  .offres{grid-template-columns:1fr}
}

/* Sur une page sans hero, le premier bloc passerait sous l'en-tête fixe :
   il lui faut la hauteur de l'en-tête en plus de son propre espacement. */
.bloc-premier{padding-top:8.5rem}

/* Un bloc centré ne peut pas se terminer par des boutons calés à gauche. */
.actions-centre{justify-content:center;margin-top:2.5rem}

@media (max-width:760px){
  .bloc-premier{padding-top:7rem}
}

/* Passerelle vers une prestation voisine : une ligne, deux filets, rien
   de plus. Elle signale sans concurrencer le contenu de la page. */
.passerelle{
  max-width:52rem;margin:3rem auto 0;padding:1.5rem 0;
  border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);
  text-align:center;color:var(--craie-2);font-size:.9375rem;
}
.passerelle a{
  display:inline-flex;align-items:center;gap:.45rem;
  color:var(--turquoise);font-weight:600;
}
.passerelle a:hover{color:var(--turquoise-vif)}

/* =====================================================================
   22. MENU MOBILE
   ---------------------------------------------------------------------
   Avant, les liens de navigation étaient simplement masqués sous 960 px :
   les pages n'étaient plus atteignables depuis l'en-tête sur téléphone.

   Deux états sont prévus. Sans JavaScript, le menu reste une liste
   empilée, visible et cliquable — on ne perd rien. Le script pose une
   classe « js » sur <html>, et c'est seulement alors que la liste
   devient un panneau replié derrière un bouton.
   ===================================================================== */
.burger{
  display:none;
  flex-direction:column;justify-content:center;gap:5px;
  width:2.5rem;height:2.5rem;padding:0;flex-shrink:0;
  background:none;border:1px solid var(--trait-fort);border-radius:2px;
  cursor:pointer;
  transition:border-color .25s var(--sortie);
}
.burger:hover{border-color:var(--turquoise)}
.burger span{
  display:block;width:1.1rem;height:1px;margin:0 auto;
  background:var(--craie);
  transition:transform .3s var(--sortie),opacity .25s var(--sortie);
}
/* Ouvert, les trois traits deviennent une croix. */
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:900px){
  /* --- Repli de base, sans JavaScript --- */
  .entete .dedans{flex-wrap:wrap;height:auto;padding-top:1rem;padding-bottom:1rem}
  .nav{
    flex-direction:column;align-items:stretch;gap:0;
    width:100%;margin-top:.5rem;
  }
  .nav a{padding:.95rem 0;font-size:1rem;border-bottom:1px solid var(--trait)}
  .nav .btn{margin-top:1.25rem;justify-content:center;padding:.85rem 1.5rem;border-bottom:0}

  /* --- Avec JavaScript : panneau commandé par le bouton --- */
  html.js .burger{display:flex}
  html.js .entete .dedans{
    flex-wrap:nowrap;height:4.5rem;padding-top:0;padding-bottom:0;
  }
  html.js .nav{
    position:fixed;left:0;right:0;top:4.5rem;margin-top:0;
    padding:.5rem 1.5rem 1.75rem;
    background:rgba(0,0,0,.97);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--trait);
    opacity:0;transform:translateY(-10px);pointer-events:none;
    transition:opacity .28s var(--sortie),transform .28s var(--sortie);
    max-height:calc(100svh - 4.5rem);overflow-y:auto;
  }
  html.js .nav.ouvert{opacity:1;transform:none;pointer-events:auto}
}

/* Sans animation, le panneau apparaît et disparaît sèchement. */
@media (prefers-reduced-motion:reduce){
  html.js .nav,.burger span{transition:none}
}

/* =====================================================================
   23. PAGE CRÉATION DE SITE — HERO À BANDEAU DÉFILANT
   ---------------------------------------------------------------------
   Adaptation du principe « AnimatedMarqueeHero » : très grande
   typographie, appel à l'action central, et une bande de visuels
   inclinée qui défile en continu sous le texte.

   Le défilement est une animation CSS sur une piste dupliquée, pas une
   boucle JavaScript. C'est un transform composité par le GPU : il ne
   touche pas au fil principal, ne provoque aucun recalcul de mise en
   page, et ne coûte donc rien aux Core Web Vitals. Une boucle
   requestAnimationFrame aurait fait le contraire.
   ===================================================================== */
.hero-site{
  position:relative;
  display:flex;flex-direction:column;
  /* Pas de hauteur forcée : à 100svh, le bandeau se faisait couper net
     par le bas de la fenêtre sur tout écran de moins de 900 px de haut.
     Laissé libre, le hero fait naturellement une pleine page sur un
     portable courant et montre ses visuels en entier. */
  padding-top:9rem;
  overflow:hidden;
  background:var(--noir);
}

.hero-site-texte{
  flex:1;display:flex;align-items:center;
  padding-bottom:2.5rem;
}
.hero-site-bloc{max-width:52rem;margin:0 auto;text-align:center}

/* Un surtitre, pas une pastille : il annonce la promesse en capitales
   au-dessus du titre, dans la même fonte que lui — la version mono le
   faisait lire comme une étiquette technique. Volontairement grand :
   le titre en dessous ne fait plus que la préciser. */
.hero-badge{
  display:block;margin:0 0 1.75rem;
  font-family:var(--display);font-size:clamp(.95rem,2.1vw,1.45rem);font-weight:600;
  letter-spacing:.07em;line-height:1.35;text-transform:uppercase;color:var(--turquoise);
}

.hero-site-titre{
  font-size:clamp(1.85rem,3.7vw,2.9rem);
  font-weight:800;letter-spacing:-.045em;line-height:1.04;
  margin:0;
}
.hero-site-titre .accent{color:var(--turquoise)}

/* Classe dédiée, et non « .hero-site-texte p » : ce sélecteur
   descendant l'emportait sur .hero-badge et lui imposait sa taille, sa
   marge et son max-width de 46 caractères. Le badge se retrouvait en
   17 px sur deux lignes. */
.hero-site-desc{
  margin:1.75rem auto 0;max-width:46ch;
  font-size:1.0625rem;line-height:1.7;color:var(--craie-2);
}
.hero-site-actions{margin-top:2.5rem;justify-content:center}

/* --- La bande défilante --------------------------------------------- */
/* Débordement latéral volontaire : incliné, le bandeau laisserait sinon
   apparaître ses coins. Le masque efface ses deux extrémités pour que
   les visuels naissent et disparaissent au lieu d'être coupés net. */
.marquee{
  position:relative;
  margin:0 -8vw;padding-bottom:4rem;
  transform:rotate(-2deg);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);
}

.marquee-piste{
  display:flex;gap:1.25rem;width:max-content;
  animation:defile 64s linear infinite;
}
/* La piste contient deux fois la même série. Le décalage d'une demi-piste
   moins un demi-intervalle place la copie exactement là où l'original
   commençait : la boucle ne se voit pas. */
@keyframes defile{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-50% - .625rem),0,0)}
}
.marquee:hover .marquee-piste{animation-play-state:paused}

.marquee-carte{
  flex:0 0 auto;
  width:clamp(10rem,18vw,15.5rem);
  aspect-ratio:4 / 5;
  position:relative;overflow:hidden;
  background:var(--calque);
  border:1px solid var(--trait-fort);border-radius:3px;
}
/* Décalage alterné : la rangée respire au lieu de former un bloc. */
.marquee-carte:nth-child(even){transform:translateY(1.5rem)}

.marquee-carte img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* Emplacement en attente de visuel. La trame diagonale est celle des
   surfaces à traiter sur un plan : elle dit « à remplir » sans ambiguïté,
   et ne pèse rien puisqu'elle est peinte en CSS. */
.marquee-vide{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.55rem;padding:1rem;text-align:center;
  background:
    repeating-linear-gradient(45deg,
      rgba(232,237,242,.028) 0 6px, transparent 6px 14px),
    var(--calque);
  font-family:var(--etiquette);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--craie-3);line-height:1.5;
}
.marquee-vide b{color:var(--turquoise);font-weight:500;font-size:.72rem}

@media (max-width:900px){
  .hero-site{padding-top:7rem}
  .marquee{margin:0 -14vw}
  .marquee-piste{animation-duration:48s}
}
@media (max-width:600px){
  .marquee-carte{width:9.5rem}
  .marquee{padding-bottom:3rem}
}

/* Le défilement s'arrête net : c'est un mouvement d'ambiance, il n'y a
   rien à comprendre dedans. */
@media (prefers-reduced-motion:reduce){
  .marquee-piste{animation:none}
  .marquee{transform:none}
}

/* =====================================================================
   24. MISE EN SCÈNE DE LA MAQUETTE
   ---------------------------------------------------------------------
   Une image posée seule ne dit rien. Le cadre de navigateur — réduit à
   une barre et trois pastilles — indique qu'on regarde un site, pas une
   photo ; le halo la décolle du noir ; la perspective au repos donne la
   profondeur d'une présentation de projet.
   ===================================================================== */
.maquette{position:relative;max-width:64rem;margin:0 auto;isolation:isolate}

/* Débord vertical seulement : à -4% horizontalement, la boîte du halo
   dépassait le conteneur et ajoutait 5 px au scrollWidth sur tablette.
   Le flou de 40 px étale de toute façon la lueur au-delà, sans compter
   dans la largeur défilable. */
.maquette::before{
  content:"";position:absolute;inset:-8% 0;z-index:-1;
  background:radial-gradient(closest-side,rgba(0,173,181,.18),transparent 72%);
  filter:blur(40px);
}

.maquette-cadre{
  border:1px solid var(--trait-fort);border-radius:5px;overflow:hidden;
  background:var(--calque);
  box-shadow:0 2.5rem 5rem rgba(0,0,0,.65);
  transform:perspective(2000px) rotateX(3deg);
  transform-origin:center top;
  transition:transform .9s var(--sortie);
}
/* La perspective se redresse quand le bloc entre à l'écran : le geste
   suffit, inutile d'y ajouter un déplacement. */
.vu .maquette-cadre{transform:perspective(2000px) rotateX(0deg)}

.maquette-barre{
  display:flex;align-items:center;gap:.45rem;
  padding:.7rem .9rem;
  border-bottom:1px solid var(--trait);
  background:rgba(255,255,255,.02);
}
.maquette-barre i{
  width:.5rem;height:.5rem;border-radius:50%;
  background:var(--trait-fort);
}
.maquette-barre span{
  margin-left:.6rem;padding:.2rem .7rem;border-radius:2px;
  background:rgba(255,255,255,.03);
  font-family:var(--etiquette);font-size:.66rem;letter-spacing:.06em;
  color:var(--craie-3);
}

.maquette-vue{display:block;width:100%;background:var(--noir)}
.maquette-vue img{width:100%;height:auto;display:block}

/* Emplacement en attente de l'image définitive. */
.maquette-vide{
  aspect-ratio:16 / 10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.9rem;padding:2rem;text-align:center;
  background:
    repeating-linear-gradient(45deg,
      rgba(232,237,242,.022) 0 8px, transparent 8px 18px),
    var(--calque);
}
.maquette-vide b{
  font-family:var(--etiquette);font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--turquoise);font-weight:500;
}
.maquette-vide span{
  font-size:.875rem;color:var(--craie-3);max-width:34ch;line-height:1.6;
}

@media (prefers-reduced-motion:reduce){
  .maquette-cadre,.vu .maquette-cadre{transform:none;transition:none}
}

/* =====================================================================
   25. RÉALISATIONS
   ===================================================================== */
.realisations{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}

.realisation{
  display:flex;flex-direction:column;
  border:1px solid var(--trait);border-radius:3px;overflow:hidden;
  background:var(--calque);
  transition:border-color .3s var(--sortie);
}
.realisation:hover{border-color:var(--trait-fort)}

.realisation-vue{aspect-ratio:16 / 10;overflow:hidden;border-bottom:1px solid var(--trait)}
.realisation-vue img{width:100%;height:100%;object-fit:cover;display:block}

.realisation-vide{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:
    repeating-linear-gradient(45deg,
      rgba(232,237,242,.028) 0 6px, transparent 6px 14px),
    var(--calque);
  font-family:var(--etiquette);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--craie-3);
}

.realisation-corps{padding:1.5rem;display:flex;flex-direction:column;flex:1}
.realisation-type{
  margin:0 0 .6rem;
  font-family:var(--etiquette);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--turquoise);
}
.realisation h3{font-size:1.0625rem;margin-bottom:.4rem}
.realisation-lieu{margin:0 0 1.25rem;font-size:.875rem;color:var(--craie-3)}
.realisation .btn{margin-top:auto;align-self:flex-start}

/* =====================================================================
   26. PROCESSUS EN QUATRE TEMPS
   ===================================================================== */
.etapes-4{grid-template-columns:repeat(4,1fr)}

@media (max-width:960px){
  .realisations{grid-template-columns:repeat(2,1fr)}
  .etapes-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .realisations{grid-template-columns:1fr}
  .etapes-4{grid-template-columns:1fr}
}

/* =====================================================================
   27. PREMIER BLOC COMPACT (page tarifs)
   ---------------------------------------------------------------------
   Sur une page de tarifs, le prix ET son bouton doivent tenir dans le
   premier écran : un visiteur qui doit faire défiler pour voir combien
   ça coûte a déjà commencé à douter.

   Le resserrement est scopé à ce bloc, pas appliqué globalement :
   l'accueil et la page site web ont un hero pleine hauteur et n'ont
   aucune raison de perdre leur respiration.
   ===================================================================== */
/* Réglé pour qu'un portable 1366x768 — soit environ 600 px de zone
   utile une fois les barres du navigateur déduites — voie encore le
   bouton. */
.bloc-premier{padding-top:5.5rem;padding-bottom:2.5rem}
.bloc-premier .cote{margin-bottom:1.25rem}
.bloc-premier .titre{margin-bottom:0}
.bloc-premier .titre::after{margin-top:1rem;margin-bottom:1.5rem}

.bloc-premier .tarif-phase{padding:1.35rem 2rem}
.bloc-premier .tarif-pied{padding:1.3rem 2rem}

@media (max-width:760px){
  .bloc-premier{padding-top:6rem}
}