/* =====================================================================
   ARCHIPLUS — Landing page
   Simple et rapide. Un seul fichier CSS, un tout petit fichier JS.
   Toutes les animations sont désactivées si l'utilisateur préfère
   moins de mouvement.
   ===================================================================== */

:root{
  /* PALETTE — anthracite, ardoise, turquoise, gris clair.
     ------------------------------------------------------------------
     LOI DE CONTRASTE. Le turquoise vif #00ADB5 ne donne que 2,75:1 sur
     blanc : il ne portera JAMAIS de texte sur fond clair, et ne prendra
     jamais de texte blanc. Deux variantes se partagent donc le rôle :

       --vert (turquoise profond #007A80)  5,13:1 sur blanc
             → texte, liens, boutons pleins à texte blanc
       --or   (turquoise vif #00ADB5)      5,40:1 sur l'anthracite
             → décor, accents sur fond SOMBRE, et texte sombre dessus

     Les noms de variables restent ceux d'origine : ils désignent un
     rôle (couleur principale / accent), pas une teinte. */
  --vert:#007A80; --vert-f:#00666B; --vert-pale:#DFF3F4;
  --or:#00ADB5; --terre:#007A80;
  --papier:#EEEEEE; --blanc:#fff; --gris:#E4E7EA; --trait:#D9DCE0;
  --encre:#222831; --ardoise:#393E46; --gris-t:#5A6069;
  --police:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --sortie:cubic-bezier(.16,1,.3,1);
}

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

body{
  margin:0; background:var(--blanc); color:var(--encre);
  font:400 1rem/1.65 var(--police);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{ margin:0; line-height:1.2; letter-spacing:-.02em }
p{ margin:0 0 1rem }
a{ color:var(--vert) }
img{ max-width:100%; height:auto; display:block }

:where(a,button,input,textarea):focus-visible{
  outline:2px solid var(--vert); outline-offset:2px }

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

/* =====================================================================
   ANIMATIONS
   ===================================================================== */

/* --- Apparition au chargement (hero) : CSS pur, aucun JS --- */
@keyframes monte{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }
@keyframes fondu{ from{ opacity:0 } to{ opacity:1 } }

/* Fondu vers une opacité PARTIELLE.
   Une valeur animée l'emporte sur une déclaration normale : un élément
   qui portait « opacity:.15 » et « animation:fondu ... both » finissait
   à 1, pas à .15 — le fill-mode retient la dernière image du keyframe.
   Ce second keyframe s'arrête sur la variable --op, que chaque élément
   règle lui-même ; la déclaration et l'animation disent enfin la même
   chose. */
@keyframes fondu-op{ from{ opacity:0 } to{ opacity:var(--op) } }
/* L'image du hero arrive par la gauche, dans le sens de la lecture. */
@keyframes glisse{ from{ opacity:0; transform:translateX(-26px) } to{ opacity:1; transform:none } }

.anim{ animation:monte .7s var(--sortie) both }
.anim-1{ animation-delay:.05s } .anim-2{ animation-delay:.15s }
.anim-3{ animation-delay:.25s } .anim-4{ animation-delay:.35s }
.anim-5{ animation-delay:.45s }

/* --- Titre du hero, mot à mot ---
   Le JS découpe le titre en mots ; chaque mot monte de derrière une ligne
   invisible, l'un après l'autre. Sans JS, rien ne change : le titre garde
   son apparition en bloc et reste parfaitement lisible. */
/* Le rembourrage agrandit la fenêtre de découpe pour que les accents et
   les jambages ne soient pas rognés ; les marges négatives annulent son
   effet sur la mise en page. */
.mots .mot{ display:inline-block; overflow:hidden; vertical-align:top;
            padding:.14em .05em .20em; margin:-.14em -.05em -.20em }
.mots .mot > i{
  display:inline-block; font-style:normal;
  animation:leve .75s var(--sortie) both;
  animation-delay:calc(var(--i) * .055s + .1s);
}
@keyframes leve{ from{ transform:translateY(105%) } to{ transform:none } }

/* --- Respiration lente : le téléphone et les visuels flottent --- */
@keyframes flotte{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
@keyframes souffle{ 0%,100%{ opacity:.55; transform:scale(1) }
                    50%{ opacity:1; transform:scale(1.06) } }

/* --- Apparition au défilement : piloté par un IntersectionObserver --- */
.rev{ opacity:0; transform:translateY(24px);
      transition:opacity .6s var(--sortie), transform .6s var(--sortie) }
.rev.vu{ opacity:1; transform:none }
.rev-2{ transition-delay:.08s } .rev-3{ transition-delay:.16s }
.rev-4{ transition-delay:.24s } .rev-5{ transition-delay:.32s }
.rev-6{ transition-delay:.4s }

@media (prefers-reduced-motion:reduce){
  .anim{ animation:none }
  .rev{ opacity:1; transform:none; transition:none }
  .scene .portable{ transform:none }
  .scene .mobile{ translate:none }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important }
}

html{ scroll-behavior:smooth }
/* L'en-tête est collée : sans cette marge, une ancre amène la cible
   juste dessous et son titre reste caché. */
[id]{ scroll-margin-top:5.5rem }

/* =====================================================================
   BOUTONS
   ===================================================================== */
/* Boutons en pastille : l'angle droit fait administratif, la forme ronde
   fait « on peut y aller ». C'est le premier signal commercial de la page. */
.btn{
  display:inline-block; padding:.85rem 1.7rem; border-radius:999px;
  font-size:.95rem; font-weight:600; text-decoration:none;
  background:var(--vert); color:#fff; border:1px solid var(--vert);
  transition:background .2s, transform .12s, box-shadow .2s;
  position:relative; overflow:hidden; isolation:isolate;
  box-shadow:0 8px 20px -10px rgba(0,122,128,.7);
}
.btn.gros{ padding:1.02rem 2.1rem; font-size:1.02rem }
/* Un reflet traverse le bouton plein au survol. */
.btn:not(.btn-2)::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg, transparent 35%,
             rgba(255,255,255,.28) 50%, transparent 65%);
  transform:translateX(-115%);
  transition:transform .65s var(--sortie);
}
.btn:not(.btn-2):hover::before{ transform:translateX(115%) }
.btn:hover{ background:var(--vert-f); border-color:var(--vert-f);
            transform:translateY(-1px); box-shadow:0 6px 16px -6px rgba(0,122,128,.5) }
.btn:active{ transform:translateY(0) }
.btn-2{ background:var(--blanc); color:var(--encre); border-color:var(--trait);
        box-shadow:0 4px 14px -8px rgba(34,40,49,.35) }
.btn-2:hover{ background:var(--gris); color:var(--encre); border-color:var(--trait);
              box-shadow:none }
/* Bouton d'accent, posé sur les fonds sombres : turquoise vif avec un
   texte ANTHRACITE. Du blanc dessus ne donnerait que 2,75:1. */
.btn-or{ background:var(--or); border-color:var(--or); color:#0F1319;
         box-shadow:0 8px 22px -10px rgba(0,173,181,.8) }
.btn-or:hover{ background:#00C2CB; border-color:#00C2CB; color:#0F1319;
               box-shadow:0 6px 16px -6px rgba(0,0,0,.4) }
.btn-s{ padding:.5rem 1rem; font-size:.85rem }

/* Petite flèche qui avance au survol */
.fleche::after{ content:" →"; display:inline-block;
                transition:transform .2s var(--sortie) }
.fleche:hover::after{ transform:translateX(4px) }

/* =====================================================================
   EN-TÊTE
   ===================================================================== */
.entete{
  border-bottom:1px solid var(--trait); background:rgba(255,255,255,.9);
  backdrop-filter:saturate(150%) blur(8px);
  position:sticky; top:0; z-index:10;
  transition:box-shadow .3s, background .3s;
}
/* Dès qu'on descend, l'en-tête se détache du contenu. */
.entete.colle{ background:rgba(255,255,255,.96);
               box-shadow:0 6px 22px -14px rgba(34,40,49,.5) }
.entete.colle .dedans{ height:3.5rem }
.entete .dedans{ transition:height .3s var(--sortie) }

/* Fine barre d'avancement de lecture, créée par le JS. */
.progres{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:20;
  background:var(--or); transform:scaleX(0); transform-origin:0 50%;
  will-change:transform; pointer-events:none;
}
.entete .dedans{ display:flex; align-items:center; gap:1.5rem; height:4rem }
.logo{ font-size:1.15rem; font-weight:700; letter-spacing:.02em;
       color:var(--encre); text-decoration:none }
.logo b{ color:var(--vert) }
.entete nav{ margin-left:auto; display:flex; align-items:center; gap:1.5rem }
.entete nav a{ color:var(--gris-t); text-decoration:none; font-size:.92rem;
               transition:color .15s }
.entete nav a:hover{ color:var(--encre) }

/* Les liens de la barre (.entete nav a) ont une spécificité de 0,1,2 et
   écrasaient donc le « color:#fff » de .btn, qui n'est qu'à 0,1,0 : le
   texte du bouton héritait du gris des liens et devenait illisible sur
   le turquoise. On rétablit le blanc au même niveau de spécificité. */
.entete nav a.btn,
.entete nav a.btn:hover{ color:#fff }
@media (max-width:640px){ .entete nav a:not(.btn){ display:none } }

/* =====================================================================
   HERO
   ===================================================================== */
/* DEUX COLONNES : l'image à gauche, le texte à droite.
   Le bloc de texte reste le PREMIER élément du code (titre lu d'abord par
   Google et les lecteurs d'écran) ; « order:-1 » ne déplace que l'affichage. */
.hero{
  background:
    radial-gradient(ellipse 60% 80% at 22% 40%, var(--vert-pale), transparent 70%),
    var(--papier);
  padding:3rem 0 5.5rem; overflow:hidden; position:relative;
  /* Le bas du hero est un arc, pas un trait : la page ne commence plus
     par une dalle rectangulaire. Rayon horizontal 50 % de la largeur,
     vertical 3,5 rem — une courbe large et douce. */
  border-radius:0 0 50% 50% / 0 0 3.5rem 3.5rem;
}

/* Papier millimétré : une trame de calque d'architecte, très pâle, qui se
   dessine derrière la composition puis s'efface sur les bords. */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right,  rgba(0,122,128,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,122,128,.06) 1px, transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(ellipse 60% 75% at 28% 45%, #000, transparent 70%);
          mask-image:radial-gradient(ellipse 60% 75% at 28% 45%, #000, transparent 70%);
  animation:fondu 1.6s ease .35s both;
}
.hero .dedans{ position:relative; z-index:1 }

/* ---------------------------------------------------------------------
   LES FORMES — le vocabulaire du dessin d'architecte
   Toutes en position absolue derrière le contenu (z-index 0), toutes
   inertes au clic. Aucune image : uniquement des bordures et des
   dégradés, donc zéro octet téléchargé.
   --------------------------------------------------------------------- */
.formes{ position:absolute; inset:0; z-index:0; pointer-events:none }
.formes span{ position:absolute; display:block }

/* Le grand tracé de compas, centré derrière le portable. */
.formes .cercle{
  width:44rem; height:44rem; left:14%; top:50%;
  margin:-22rem 0 0 -22rem; border-radius:50%;
  border:1px solid rgba(0,122,128,.13);
  animation:fondu 1.4s ease .5s both;
}

/* Un quart d'arc doré qui tourne autour du même centre, très lentement :
   la pointe du compas qui n'a jamais fini son cercle. */
.formes .arc{
  width:30rem; height:30rem; left:14%; top:50%;
  margin:-15rem 0 0 -15rem; border-radius:50%;
  border:2px solid transparent; border-top-color:rgba(0,173,181,.55);
  animation:fondu 1.4s ease .7s both, tourne 70s linear 1s infinite;
}

/* Trame de calque : une grille de points. */
.formes .points{
  width:9rem; height:6rem; left:3%; bottom:9%;
  background-image:radial-gradient(rgba(0,122,128,.3) 1.2px, transparent 1.2px);
  background-size:14px 14px;
  animation:fondu 1.2s ease .9s both;
}

/* Repère de centrage, comme sur un plan. Placé dans la bande vide
   au-dessus du portable — jamais du côté du texte. */
.formes .croix{
  width:18px; height:18px; left:12%; top:13%;
  background:
    linear-gradient(var(--or), var(--or)) center/1.5px 100% no-repeat,
    linear-gradient(var(--or), var(--or)) center/100% 1.5px no-repeat;
  --op:.65;
  opacity:var(--op);
  animation:fondu-op 1.2s ease 1.1s both;
}

/* Les deux formes suivantes vivent dans les marges extérieures, hors du
   conteneur de 76 rem. Elles n'existent donc que si ces marges sont
   assez larges pour les accueillir : sinon elles tomberaient sur le
   texte. C'est la raison des deux seuils ci-dessous. */
.formes .cote,
.formes .equerre{ display:none }

/* Ligne de cote : le trait vertical à embouts des dessins techniques. */
@media (min-width:1200px){
  .formes .cote{
    display:block;
    width:1px; height:22%; left:2.2rem; top:26%;
    background:rgba(0,122,128,.28);
    animation:fondu 1.2s ease 1s both;
  }
  .formes .cote::before,
  .formes .cote::after{
    content:""; position:absolute; left:-4px; width:9px; height:1px;
    background:rgba(0,122,128,.28);
  }
  .formes .cote::before{ top:0 } .formes .cote::after{ bottom:0 }
}

/* Une équerre : deux traits en angle droit, dans la marge de droite. */
@media (min-width:1400px){
  .formes .equerre{
    display:block;
    width:5.5rem; height:5.5rem; right:3%; top:20%;
    border-right:1px solid rgba(0,122,128,.22);
    border-bottom:1px solid rgba(0,122,128,.22);
    animation:fondu 1.2s ease 1.2s both;
  }
}

@keyframes tourne{ to{ transform:rotate(360deg) } }

/* Sur écran étroit, le cercle et l'arc se recentrent sur l'image, et la
   trame de points passe sous le portable plutôt qu'à côté. */
@media (max-width:900px){
  .formes .croix{ display:none }
  .formes .cercle,
  .formes .arc{ left:50%; top:34% }
  .formes .points{ left:4%; bottom:4% }
}
.hero .dedans{
  max-width:76rem;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:clamp(1.5rem, 4vw, 3.5rem);
}

/* Le titre ouvre désormais le hero (plus de pastille au-dessus) : il gagne
   un peu de largeur pour tenir en deux lignes pleines au lieu de trois,
   et « balance » égalise ces lignes plutôt que de laisser un mot seul. */
.hero h1{ font-size:clamp(1.9rem,3.4vw,2.8rem); font-weight:700;
          max-width:19ch; margin:0 0 1rem; text-wrap:balance }
/* Classe explicite : le découpage mot à mot crée lui aussi des <span>
   dans le titre, un sélecteur « h1 span » les colorerait tous en vert. */
.hero h1 .accent{ color:var(--terre) }
.hero p{ font-size:1.06rem; color:var(--gris-t); max-width:44ch;
         margin:0 0 1.6rem; text-wrap:pretty }
.hero .actions{ display:flex; gap:.75rem; flex-wrap:wrap }
/* La note de réassurance est une seule ligne de trois mentions séparées
   par des points médians : la largeur de 44 ch héritée de « .hero p »
   la coupait et laissait « minutes » seul en dessous. */
.hero .note{ margin-top:1.1rem; font-size:.85rem; color:var(--gris-t);
             max-width:none; text-wrap:balance }

/* La composition des appareils, colonne de gauche.
   Elle déborde légèrement vers la gauche pour ouvrir la page ; sa hauteur
   est bornée par celle de l'écran afin que tout tienne au-dessus de la
   ligne de flottaison. */
.scene{
  order:-1;
  position:relative;
  width:100%;
  max-width:min(100%, 78vh);
  margin-left:clamp(-3.5rem, -3vw, 0rem);
  animation:glisse .8s var(--sortie) both;
  /* Décalage de la souris, écrit par le JS ; vaut 0 sans JS. */
  --px:0; --py:0;
}

/* Halo vivant sous les appareils : la lumière de l'écran allumé. */
.scene::before{
  content:""; position:absolute; z-index:0;
  inset:14% 8% 18% 8%; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,122,128,.28), transparent 68%);
  filter:blur(38px);
  animation:souffle 9s ease-in-out 1.2s infinite;
}

/* Le portable s'incline légèrement vers la souris : quelques degrés
   suffisent à donner du relief, la transition lisse le mouvement. */
.scene .portable{
  position:relative; z-index:1;
  filter:drop-shadow(0 24px 40px rgba(34,40,49,.22));
  transform:perspective(1600px)
            rotateY(calc(var(--px) *  3deg))
            rotateX(calc(var(--py) * -2deg));
  transition:transform .45s var(--sortie);
}

/* Le téléphone flotte en continu (transform) et suit la souris en sens
   inverse du portable (translate) : deux propriétés distinctes, donc
   aucun conflit entre l'animation et le geste. */
.scene .mobile{
  position:absolute; right:-3%; bottom:-4%; width:15%; z-index:3;
  filter:drop-shadow(0 16px 28px rgba(34,40,49,.3));
  animation:monte .8s var(--sortie) .35s both,
            flotte 6s ease-in-out 1.4s infinite;
  translate:calc(var(--px) * -12px) calc(var(--py) * -9px);
  transition:translate .5s var(--sortie);
}

/* Sous 900 px : une seule colonne, l'image toujours en tête, texte centré. */
@media (max-width:900px){
  .hero{ padding:2rem 0 3rem; text-align:center }
  .hero .dedans{ grid-template-columns:1fr; gap:2rem }
  .hero h1{ max-width:20ch; margin-inline:auto }
  .hero p{ max-width:52ch; margin-inline:auto }
  .hero .actions{ justify-content:center }
  .scene{ max-width:min(34rem, 100%); margin:0 auto }
}
@media (max-width:640px){
  .scene{ max-width:100% }
  .scene .mobile{ width:18%; right:0; bottom:-4% }
}

/* =====================================================================
   SECTIONS
   ===================================================================== */
.section{ padding:4.5rem 0; position:relative; overflow:hidden }
.section > .dedans{ position:relative; z-index:1 }
/* Les sections colorées ne sont plus des dalles pleine largeur bordées
   d'un trait : ce sont des îlots arrondis posés sur le blanc. C'est ce
   qui casse le plus nettement l'impression d'empilement rectangulaire. */
.section.gris,
.section.nuit{
  border:0; border-radius:clamp(1.25rem, 4vw, 2.75rem);
  margin:1.5rem 1.25rem; padding:4.5rem 0;
}
.section.gris{ background:var(--papier) }
.section.nuit{ background:var(--encre); color:#fff }

/* Chaque section porte une forme de fond, différente à chaque fois pour
   que le défilement ne se répète jamais. Toutes en pseudo-éléments :
   aucun balisage supplémentaire. */

/* Sections claires : un grand cercle sortant par le bord droit. */
.section::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:34rem; height:34rem; border-radius:50%;
  border:1px solid rgba(0,122,128,.09);
  right:-13rem; top:-9rem;
}
/* La seconde section blanche prend le cercle en bas à gauche, et en or :
   deux sections voisines ne portent jamais le même décor. */
.section.alt::before{ right:auto; left:-12rem; top:auto; bottom:-14rem;
                      border-color:rgba(0,173,181,.35) }

/* Sur fond papier, on l'envoie à gauche et on ajoute une trame. */
.section.gris::before{ right:auto; left:-14rem; top:auto; bottom:-11rem }
.section.gris::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:8rem; height:8rem; right:4%; top:14%;
  background-image:radial-gradient(rgba(0,122,128,.22) 1.2px, transparent 1.2px);
  background-size:15px 15px;
}

/* Section sombre : deux arcs dorés concentriques, coin haut droit. */
.section.nuit::before{
  width:30rem; height:30rem; right:-11rem; top:-12rem;
  border-color:rgba(0,173,181,.28);
}
.section.nuit::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:44rem; height:44rem; border-radius:50%;
  border:1px solid rgba(0,173,181,.13);
  right:-18rem; top:-19rem;
}
@media (max-width:760px){
  .section.gris::after{ display:none }
}
.section.nuit h2{ color:#fff }
.section.nuit .intro{ color:rgba(255,255,255,.65) }

/* Les titres portent seuls l'ouverture de section : plus de sur-titre en
   majuscules espacées au-dessus (règle appliquée à tout le site). Ils
   gagnent donc un peu de taille et d'air. */
.section h2{ font-size:clamp(1.6rem,3.2vw,2.15rem); font-weight:700;
             margin-bottom:.85rem; max-width:24ch }
.section .intro{ color:var(--gris-t); max-width:50ch; margin-bottom:2.5rem }

/* Les en-têtes posées au-dessus d'une grille pleine largeur sont
   centrées — sinon le titre se tasse à gauche et laisse un vide à
   droite. Les sections image + texte gardent leur alignement à gauche. */
.section > .dedans > h2{ text-align:center; margin-inline:auto }
.section > .dedans > .intro{ text-align:center; margin-left:auto; margin-right:auto }

/* =====================================================================
   GRILLE DE FONCTIONS
   ===================================================================== */
/* Grille en « bento » : deux cartes sur quatre colonnes occupent une
   double largeur, les autres une simple. Les rangées restent pleines,
   mais plus aucune n'est identique à la précédente. */
.grille{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem }
.carte.large{ grid-column:span 2 }
.carte:last-child{ grid-column:span 2 }

@media (max-width:900px){ .grille{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){
  .grille{ grid-template-columns:1fr }
  .carte.large,
  .carte:last-child{ grid-column:auto }
}

.carte{
  background:var(--blanc); border:1px solid var(--trait);
  border-radius:1.35rem; padding:1.75rem; position:relative;
  box-shadow:0 2px 3px rgba(34,40,49,.025), 0 14px 30px -22px rgba(34,40,49,.5);
  transition:transform .25s var(--sortie), box-shadow .25s, border-color .25s;
}
.carte:hover{ transform:translateY(-4px); border-color:rgba(0,122,128,.35);
              box-shadow:0 20px 40px -22px rgba(34,40,49,.45) }

/* La carte « Projets » est teintée : c'est l'objet central du produit. */
.carte.large{
  background:linear-gradient(135deg, #fff 35%, var(--vert-pale));
  border-color:rgba(0,122,128,.2);
}

/* Pastille d'icône : la forme ronde et la couleur réchauffent la grille
   bien plus qu'un numéro d'ordre. */
.carte .ico{
  display:grid; place-items:center; width:2.9rem; height:2.9rem;
  border-radius:.95rem; margin-bottom:1.1rem;
  background:var(--vert-pale); color:var(--vert);
  transition:transform .35s var(--sortie), background .3s, color .3s;
}
.carte .ico svg{ width:1.45rem; height:1.45rem }
.carte:hover .ico{ transform:rotate(-7deg) scale(1.07);
                   background:var(--vert); color:#fff }
.carte.large .ico{ background:var(--vert); color:#fff }
.carte.large:hover .ico{ background:var(--or); color:#0F1319 }

.carte h3{ font-size:1.08rem; font-weight:700; margin-bottom:.5rem }
.carte p{ font-size:.93rem; color:var(--gris-t); margin:0 }

/* =====================================================================
   SECTION IMAGE + TEXTE
   ===================================================================== */
.duo-img{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center }
.duo-img.inverse .texte{ order:2 }
@media (max-width:820px){
  .duo-img{ grid-template-columns:1fr; gap:2.5rem }
  .duo-img.inverse .texte{ order:0 }
}
.duo-img .visuel img{ border-radius:6px;
  filter:drop-shadow(0 20px 40px rgba(34,40,49,.18));
  transition:transform .5s var(--sortie) }
/* Sauf le téléphone : il flotte déjà, l'animation l'emporterait. */
.duo-img:not(.mobile-seul) .visuel:hover img{ transform:scale(1.02) }
/* Le téléphone est une image TRÈS haute et TRÈS étroite (1024×1536).
   Dans une colonne à 1fr il laissait 250 px de vide à sa gauche et à sa
   droite, tout en imposant la hauteur de la section — donc autant de
   vide en face du texte. Sa colonne est donc rétrécie, la colonne de
   texte élargie d'autant, et le téléphone agrandi pour l'occuper. */
.duo-img.mobile-seul{ grid-template-columns:.68fr 1.32fr; gap:2.75rem }
.duo-img.mobile-seul .visuel{ max-width:17.5rem; margin:0 auto }
@media (max-width:820px){
  .duo-img.mobile-seul{ grid-template-columns:1fr; gap:2.5rem }
}

/* Dans une colonne de texte, la liste tient sur un seul rang. */
.liste.serree{ grid-template-columns:1fr; gap:.6rem; margin-top:1.4rem }
/* Le téléphone de la section « sur le terrain » respire lui aussi. */
.duo-img.mobile-seul .visuel.vu img{ animation:flotte 6.5s ease-in-out .6s infinite }
.duo-img h2{ margin-bottom:1rem }
.duo-img p{ color:var(--gris-t) }
.section.nuit .duo-img p{ color:rgba(255,255,255,.7) }

/* =====================================================================
   LISTES
   ===================================================================== */
.liste{ list-style:none; padding:0; margin:0;
        display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem 2rem }
@media (max-width:640px){ .liste{ grid-template-columns:1fr } }
.liste li{ padding-left:1.6rem; position:relative; font-size:.95rem; color:var(--gris-t) }
.liste li::before{ content:"✓"; position:absolute; left:0; color:var(--vert); font-weight:700 }
.liste b{ color:var(--encre) }
.section.nuit .liste li{ color:rgba(255,255,255,.7) }
.section.nuit .liste li::before{ color:var(--or) }
.section.nuit .liste b{ color:#fff }


/* =====================================================================
   CHIFFRES
   ===================================================================== */
.chiffres{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem }
@media (max-width:760px){ .chiffres{ grid-template-columns:repeat(2,1fr) } }
.chiffre{
  background:var(--papier); border:1px solid var(--trait);
  border-radius:1.35rem; padding:1.5rem;
  transition:transform .25s var(--sortie), box-shadow .25s;
}
.chiffre:hover{ transform:translateY(-4px);
                box-shadow:0 18px 36px -24px rgba(34,40,49,.5) }
.chiffre .v{ display:block; font-size:1.9rem; font-weight:700; color:var(--vert);
             line-height:1; margin-bottom:.5rem; padding-bottom:.7rem;
             position:relative }
/* Un court trait doré sous le chiffre, arrondi. */
.chiffre .v::after{ content:""; position:absolute; left:0; bottom:0;
                    width:1.6rem; height:3px; border-radius:3px; background:var(--terre) }
.chiffre .v small{ font-size:.85rem; color:var(--gris-t); font-weight:600 }
/* Le nombre est compté par le JS ; en romain, comme le reste du chiffre. */
.chiffre .v i{ font-style:normal; font-variant-numeric:tabular-nums }
.chiffre h3{ font-size:.95rem; font-weight:700; margin-bottom:.3rem }
.chiffre p{ font-size:.88rem; color:var(--gris-t); margin:0 }

/* =====================================================================
   AVANT / APRÈS
   ---------------------------------------------------------------------
   Le bloc qui fait comprendre le produit sans le décrire : à gauche la
   journée d'aujourd'hui, à droite la même journée rangée. Rien
   d'inventé — ce sont les modules réellement livrés.
   ===================================================================== */
.bascule{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:stretch; gap:1.5rem; margin-top:2.5rem;
}
.volet{ border-radius:1.6rem; padding:1.9rem 1.8rem }
.volet .etiq{
  display:inline-block; margin-bottom:1.1rem; padding:.32rem .9rem;
  border-radius:999px; font-size:.78rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}
.volet ul{ list-style:none; margin:0; padding:0 }
.volet li{ position:relative; padding-left:1.75rem; margin-bottom:.7rem;
           font-size:.95rem; line-height:1.5 }
.volet li:last-child{ margin-bottom:0 }
.volet li::before{ position:absolute; left:0; top:-.05em; font-size:1.05rem }

/* Le texte de la colonne « aujourd'hui » doit paraître éteint SANS
   descendre sous le contraste légal : #646A73 sur le papier donne
   4,87:1, au-dessus du minimum de 4,5:1. */
.volet.avant{ background:var(--papier); border:1px dashed #C9CDD2; color:#646A73 }
.volet.avant .etiq{ background:#DDE0E3; color:#5A6069 }
.volet.avant li::before{ content:"✕"; color:#A8AEB6; font-size:.9rem }

/* Le volet « après » est anthracite, pas turquoise : c'est ce qui permet
   au turquoise vif d'y être franchement lisible (5,40:1). Sur un fond
   turquoise, l'accent turquoise se serait annulé lui-même. */
.volet.apres{
  background:linear-gradient(155deg, var(--ardoise) 0%, var(--encre) 100%);
  color:rgba(255,255,255,.88); border:1px solid var(--encre);
  box-shadow:0 26px 50px -30px rgba(34,40,49,.85);
}
.volet.apres .etiq{ background:var(--or); color:#0F1319 }
.volet.apres li::before{ content:"✓"; color:var(--or); font-weight:700 }

/* La flèche de bascule, dans une pastille. */
.bascule .entre{
  align-self:center;
  display:grid; place-items:center; width:2.6rem; height:2.6rem;
  border-radius:50%; background:var(--blanc); border:1px solid var(--trait);
  color:var(--vert); font-size:1.15rem; font-weight:700;
  box-shadow:0 8px 20px -12px rgba(34,40,49,.5);
}
@media (max-width:820px){
  .bascule{ grid-template-columns:1fr; gap:1rem }
  .bascule .entre{ transform:rotate(90deg); margin:0 auto }
}

/* =====================================================================
   LES TROIS ÉTAPES
   ===================================================================== */
.etapes{
  list-style:none; margin:2.5rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
  position:relative;
}
/* Le fil pointillé qui relie les trois pastilles. */
.etapes::before{
  content:""; position:absolute; left:14%; right:14%; top:1.6rem;
  border-top:2px dashed rgba(0,122,128,.28);
}
.etape{ position:relative; z-index:1; text-align:center }
.etape .pas{
  display:grid; place-items:center; width:3.2rem; height:3.2rem;
  margin:0 auto 1.1rem; border-radius:50%;
  background:var(--vert); color:#fff; font-size:1.15rem; font-weight:700;
  box-shadow:0 0 0 7px var(--papier), 0 12px 26px -14px rgba(0,122,128,.9);
  transition:transform .3s var(--sortie), background .3s;
}
.etape:hover .pas{ transform:scale(1.08); background:var(--or); color:#0F1319 }
.etape h3{ font-size:1.05rem; font-weight:700; margin-bottom:.4rem }
.etape p{ font-size:.93rem; color:var(--gris-t); margin:0 }

@media (max-width:760px){
  .etapes{ grid-template-columns:1fr; gap:2rem }
  .etapes::before{ display:none }
}

/* L'appel à l'action de milieu de page : le visiteur convaincu ne doit
   pas avoir à redescendre jusqu'au pied de page. */
.milieu-appel{
  margin-top:3rem; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
}
.milieu-appel span{ font-size:.86rem; color:var(--gris-t) }

/* =====================================================================
   QUESTIONS — objections traitées, sans JavaScript
   ===================================================================== */
.questions{ margin:2rem auto 0; display:grid; gap:.75rem; max-width:52rem }
.q{
  background:var(--papier); border:1px solid var(--trait);
  border-radius:1.1rem; padding:.15rem 1.35rem;
  transition:border-color .25s, background .25s;
}
.q[open]{ background:var(--blanc); border-color:rgba(0,122,128,.3);
          box-shadow:0 16px 34px -26px rgba(34,40,49,.6) }
.q summary{
  cursor:pointer; list-style:none; padding:1.05rem 2rem 1.05rem 0;
  font-weight:600; font-size:1rem; position:relative;
}
.q summary::-webkit-details-marker{ display:none }
/* Un « + » qui pivote en « × » à l'ouverture. */
.q summary::after{
  content:"+"; position:absolute; right:0; top:50%;
  transform:translateY(-50%); font-size:1.4rem; font-weight:400;
  color:var(--vert); transition:transform .3s var(--sortie);
}
.q[open] summary::after{ transform:translateY(-50%) rotate(135deg) }
.q summary:hover{ color:var(--vert) }
.q p{ margin:0 0 1.1rem; font-size:.94rem; color:var(--gris-t); max-width:60ch }

/* =====================================================================
   APPEL FINAL
   ===================================================================== */
.appel{
  background:linear-gradient(150deg, #393E46 0%, var(--vert) 45%, #171C24 100%);
  color:#fff; padding:5rem 0; text-align:center;
  position:relative; overflow:hidden;
  border-radius:clamp(1.25rem, 4vw, 2.75rem);
  margin:1.5rem 1.25rem 2.5rem;
}
.appel::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 50% 60% at 50% 0%, rgba(255,255,255,.09), transparent 70%);
  animation:souffle 10s ease-in-out infinite }

/* Deux cercles clairs traversent le bloc vert, l'un sortant à gauche,
   l'autre à droite : la page se referme sur le même geste de compas
   qu'elle a ouvert. */
.appel::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:32rem; height:32rem; border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  left:-12rem; bottom:-15rem;
}
.appel .anneau{
  position:absolute; z-index:0; pointer-events:none;
  width:24rem; height:24rem; border-radius:50%;
  border:1px solid rgba(0,173,181,.4);
  right:-9rem; top:-11rem;
}
.appel > *{ position:relative; z-index:1 }
.appel h2{ color:#fff; margin-bottom:.75rem }
.appel p{ color:rgba(255,255,255,.8); max-width:42ch; margin:0 auto 1.8rem }
.appel .note{ color:rgba(255,255,255,.6); font-size:.85rem; margin-top:1rem }

/* =====================================================================
   PIED
   ===================================================================== */
.pied{ background:var(--encre); color:rgba(255,255,255,.65);
       padding:2.5rem 0; font-size:.88rem }
.pied .dedans{ display:flex; gap:1.5rem; flex-wrap:wrap; align-items:center }
.pied a{ color:rgba(255,255,255,.85); text-decoration:none; transition:color .15s }
.pied a:hover{ color:var(--or) }
.pied .fin{ margin-left:auto; color:rgba(255,255,255,.45) }
.pied .fin a{ color:rgba(255,255,255,.75); font-weight:600; letter-spacing:.02em }
.pied .fin a:hover{ color:var(--or) }

/* =====================================================================
   PAGES DE CONTENU
   ===================================================================== */
.contenu{ padding:3.5rem 0; max-width:44rem }
.contenu h1{ font-size:2rem; font-weight:700; margin-bottom:.5rem }
.contenu .maj{ color:var(--gris-t); font-size:.85rem; margin-bottom:2.5rem }
.contenu h2{ font-size:1.15rem; font-weight:700; margin:2.2rem 0 .8rem;
             padding-bottom:.5rem; border-bottom:1px solid var(--trait) }
.contenu p,.contenu li{ color:#353B45 }
.contenu ul{ padding-left:1.2rem }
.contenu li{ margin-bottom:.5rem }
.contenu .encadre{ background:var(--papier); border-left:3px solid var(--vert);
                   padding:1.1rem 1.3rem; margin:1.5rem 0; font-size:.95rem }
.contenu .encadre p:last-child{ margin-bottom:0 }

.tarif{ background:var(--blanc); border:1px solid var(--trait);
        border-top:3px solid var(--or); border-radius:6px;
        padding:2rem; max-width:24rem; text-align:center }
.tarif .prix{ font-size:3rem; font-weight:700; color:var(--vert); line-height:1;
              margin:.5rem 0 .3rem }
.tarif .duree{ color:var(--gris-t); font-size:.9rem; margin-bottom:1.5rem }

/* =====================================================================
   FORMULAIRE
   ===================================================================== */
.champ{ margin-bottom:1.1rem }
.champ label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:.3rem }
.champ input,.champ textarea{
  width:100%; padding:.65rem .8rem; font:inherit; font-size:.95rem;
  border:1px solid var(--trait); border-radius:4px;
  background:var(--blanc); color:var(--encre); transition:border-color .15s;
}
.champ input:focus,.champ textarea:focus{ outline:none; border-color:var(--vert) }
.champ textarea{ min-height:8rem; resize:vertical }
.champ .champ-erreur{ display:block; margin-top:.25rem; font-size:.82rem; color:#A8372B }
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.2rem }
@media (max-width:540px){ .duo{ grid-template-columns:1fr } }
.piege{ position:absolute; left:-9999px }

.message{ padding:.85rem 1.1rem; border-radius:4px; margin-bottom:1.5rem;
          border-left:3px solid var(--vert); background:var(--papier); font-size:.95rem }
.message-erreur{ border-left-color:#A8372B }


/* =====================================================================
   LE PLAN EN ARRIÈRE-PLAN
   ---------------------------------------------------------------------
   Un plan de rez-de-chaussée dessiné en SVG (murs doubles, arcs de
   porte, escalier, chaîne de cotes juste : 4,20+5,80+4,50+3,60 = 18,10).
   Il occupe les grands vides et rappelle à qui la page s'adresse.
   L'opacité reste au-dessous du seuil où il gênerait la lecture.
   ===================================================================== */
.plan{
  position:absolute; z-index:0; pointer-events:none;
  background:url(/assets/img/plan.svg) no-repeat;
  background-size:contain;
  --op:.05;
  opacity:var(--op);
  animation:fondu-op 1.8s ease .6s both;
}

/* Hero : le plan occupe la moitié gauche, sous la composition. */
.hero .plan{ left:-6%; bottom:-14%; width:70%; height:118% }

/* Section sombre : le plan est inversé pour rester lisible sur le noir,
   et posé à droite, derrière le téléphone. */
.plan-nuit{
  right:-10%; top:-18%; width:58%; height:130%;
  filter:invert(1); --op:.05;
}

/* Section « Tunisie » : le plan passe à gauche, très en retrait. */
.plan-alt{ left:-14%; top:-10%; width:52%; height:120%; --op:.04 }

@media (max-width:900px){
  .hero .plan{ left:-20%; bottom:-8%; width:130%; height:80%; --op:.04 }
  .plan-nuit,
  .plan-alt{ display:none }
}

/* =====================================================================
   VIGNETTES FLOTTANTES DU HERO
   ---------------------------------------------------------------------
   Deux petites cartes posées au-dessus de la composition. Elles donnent
   de la profondeur (trois plans : plan de fond, appareils, vignettes) et
   remplissent le vide autour du portable.
   ===================================================================== */
.vignette{
  position:absolute; z-index:4;
  display:grid; grid-template-columns:auto 1fr; gap:.15rem .7rem;
  align-items:center;
  padding:.7rem .95rem; border-radius:.9rem;
  background:rgba(255,255,255,.94);
  border:1px solid var(--trait);
  backdrop-filter:blur(6px);
  box-shadow:0 1px 2px rgba(34,40,49,.06), 0 18px 34px -18px rgba(34,40,49,.55);
  white-space:nowrap;
}
.vignette .rond{
  grid-row:span 2; display:grid; place-items:center;
  width:2rem; height:2rem; border-radius:50%;
  font-size:.9rem; font-style:normal;
}
.vignette .rond.phase{ background:var(--vert-pale); color:var(--vert) }
.vignette .rond.fait{ background:var(--vert); color:#fff; font-weight:700 }
.vignette b{ font-size:.82rem; font-weight:700; color:var(--encre); line-height:1.25 }
.vignette em{ font-size:.74rem; font-style:normal; color:var(--gris-t); line-height:1.25 }

.v-haut{ left:-7%; top:9%;  animation:monte .8s var(--sortie) .55s both,
                            flotte 7s ease-in-out 1.6s infinite }
.v-bas { left:14%; bottom:-7%; animation:monte .8s var(--sortie) .75s both,
                            flotte 6.4s ease-in-out 2.1s infinite }

/* Elles suivent la souris comme le reste de la scène, en douceur. */
.vignette{ translate:calc(var(--px) * 6px) calc(var(--py) * 5px);
           transition:translate .6s var(--sortie) }

@media (max-width:1100px){ .v-haut{ left:-2% } .v-bas{ left:6% } }
@media (max-width:900px){ .vignette{ display:none } }

/* =====================================================================
   VOLUME
   ---------------------------------------------------------------------
   Tout ce qui était plat reçoit un dégradé, un liseré clair sur l'arête
   haute et une ombre portée en deux couches — une courte et serrée pour
   poser l'objet, une longue et diffuse pour le décoller du fond.
   ===================================================================== */
.btn{ background:linear-gradient(180deg, var(--vert), var(--vert-f)) }
.btn:hover{ background:linear-gradient(180deg, var(--vert-f), #005359) }
.btn-2{ background:linear-gradient(180deg, #fff, #F4F5F6) }
.btn-or{ background:linear-gradient(180deg, #00C2CB, var(--or)) }
.btn-or:hover{ background:linear-gradient(180deg, #14D2DB, #00A2AA) }

.carte{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             0 1px 2px rgba(34,40,49,.05),
             0 20px 38px -26px rgba(34,40,49,.65);
}
.carte:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             0 2px 4px rgba(34,40,49,.05),
             0 30px 52px -26px rgba(34,40,49,.6);
}

/* Les pastilles d'icône deviennent sphériques. */
.carte .ico{
  background:radial-gradient(circle at 32% 26%, #fff 0%, var(--vert-pale) 62%);
  box-shadow:inset 0 -1px 2px rgba(34,40,49,.08), 0 6px 14px -8px rgba(0,122,128,.6);
}
.carte:hover .ico{
  background:radial-gradient(circle at 32% 26%, #1FA0A6 0%, var(--vert) 65%);
}
.carte.large .ico{
  background:radial-gradient(circle at 32% 26%, #1FA0A6 0%, var(--vert) 65%);
}

/* Les jalons du parcours en trois étapes : de vraies billes. */
.etape .pas{
  background:radial-gradient(circle at 34% 26%, #23A5AB 0%, var(--vert) 58%, #00595E 100%);
  box-shadow:0 0 0 7px var(--papier),
             inset 0 -2px 4px rgba(0,0,0,.25),
             0 14px 26px -12px rgba(0,122,128,.85);
}
.etape:hover .pas{
  background:radial-gradient(circle at 34% 26%, #2DE2EB 0%, var(--or) 58%, #008188 100%);
}


.chiffre{
  background:linear-gradient(170deg, #fff 0%, var(--papier) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             0 14px 30px -24px rgba(34,40,49,.7);
}

.volet.avant{ box-shadow:inset 0 1px 0 rgba(255,255,255,.8) }

/* Les questions prennent du relief une fois ouvertes. */
.q{ box-shadow:inset 0 1px 0 rgba(255,255,255,.7) }

/* =====================================================================
   HALOS DE SECTION
   ---------------------------------------------------------------------
   De larges taches de lumière très diffuses dans les angles : elles
   donnent de la profondeur aux grandes zones unies sans rien ajouter au
   balisage ni au poids de la page.
   ===================================================================== */
.section{
  background-image:
    radial-gradient(ellipse 38% 46% at 90% 8%,  rgba(0,173,181,.09), transparent 70%),
    radial-gradient(ellipse 42% 44% at 4%  94%, rgba(34,40,49,.055), transparent 70%);
}
.section.gris{
  background-color:var(--papier);
  background-image:
    radial-gradient(ellipse 40% 48% at 6% 10%,  rgba(0,173,181,.11), transparent 70%),
    radial-gradient(ellipse 44% 46% at 94% 92%, rgba(34,40,49,.06),  transparent 70%);
}
.section.nuit{
  background-color:var(--encre);
  background-image:
    radial-gradient(ellipse 46% 52% at 88% 10%, rgba(0,173,181,.2),  transparent 70%),
    radial-gradient(ellipse 40% 44% at 4%  92%, rgba(0,173,181,.09), transparent 70%);
}

/* =====================================================================
   LE PARCOURS COMMERCIAL
   ---------------------------------------------------------------------
   Remplace une rangée de pastilles + une liste à deux colonnes qui
   répétaient les mêmes six mots dans une section presque vide. Chaque
   étape porte désormais son explication, et le bilan financier ferme
   le parcours.
   ===================================================================== */
.parcours{
  list-style:none; margin:2.5rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;
}
.jalon{
  position:relative;
  background:var(--blanc); border:1px solid var(--trait);
  border-radius:1.35rem; padding:1.5rem 1.4rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             0 14px 30px -24px rgba(34,40,49,.7);
  transition:transform .25s var(--sortie), box-shadow .25s, border-color .25s;
}
.jalon:hover{
  transform:translateY(-4px); border-color:rgba(0,122,128,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             0 26px 44px -26px rgba(34,40,49,.6);
}
.jalon .n{
  display:grid; place-items:center; width:2.15rem; height:2.15rem;
  border-radius:50%; margin-bottom:.9rem;
  background:radial-gradient(circle at 34% 26%, #23A5AB 0%, var(--vert) 60%);
  color:#fff; font-size:.85rem; font-weight:700;
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.25),
             0 8px 16px -8px rgba(0,122,128,.9);
}
.jalon h3{ font-size:1.02rem; font-weight:700; margin-bottom:.35rem }
.jalon p{ font-size:.9rem; color:var(--gris-t); margin:0 }

/* La flèche vit dans la gouttière, sauf en fin de rangée.
   Le « content » est posé sur TOUS les jalons et seul « display » varie :
   un pseudo-élément sans content n'existe pas, si bien qu'en passant à
   deux colonnes le jalon n°3 n'aurait jamais retrouvé sa flèche. */
.jalon::after{
  content:"→"; position:absolute; right:-1.06rem; top:50%;
  transform:translateY(-50%);
  color:var(--vert); opacity:.45; font-size:1rem; line-height:1;
}
.jalon:nth-child(3n)::after{ display:none }

@media (max-width:900px){
  .parcours{ grid-template-columns:repeat(2,1fr) }
  .jalon::after{ display:block }
  .jalon:nth-child(2n)::after{ display:none }
}
@media (max-width:560px){
  .parcours{ grid-template-columns:1fr }
  .jalon::after{ display:none }
}

/* Le bilan : la sortie du parcours, sur fond sombre pour trancher avec
   les six cartes claires et fermer la section. */
.bilan{
  margin-top:1.5rem;
  background:linear-gradient(150deg, var(--ardoise) 0%, var(--encre) 100%);
  border-radius:1.5rem; padding:1.6rem 1.9rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.25rem; flex-wrap:wrap;
  box-shadow:0 26px 48px -32px rgba(34,40,49,.95);
}
.bilan h3{ color:#fff; font-size:1.02rem; font-weight:700; max-width:30ch }
.bilan ul{ display:flex; gap:.55rem; flex-wrap:wrap;
           list-style:none; margin:0; padding:0 }
/* Turquoise clair : 6,34:1 sur l'ardoise, 8,74:1 sur l'anthracite —
   lisible aux deux extrémités du dégradé. */
.bilan li{
  padding:.5rem 1.05rem; border-radius:999px;
  border:1px solid rgba(0,173,181,.45);
  background:rgba(0,173,181,.12);
  color:#5FD8DF; font-size:.86rem; font-weight:600; white-space:nowrap;
}
@media (max-width:640px){
  .bilan{ padding:1.4rem 1.5rem }
  .bilan h3{ max-width:none }
}

/* =====================================================================
   RYTHME MOBILE
   ---------------------------------------------------------------------
   Les respirations sont réglées pour un grand écran : 4,5 rem de
   padding par section, plus 1,5 rem de marge d'îlot. Bout à bout, cela
   fait 168 px de vide entre la fin d'une section et le titre de la
   suivante — sur un téléphone de 390 px, presque la moitié de l'écran.

   Ce bloc ne touche QUE le rythme vertical et les rembourrages. Aucune
   largeur de conteneur n'y est modifiée.
   ===================================================================== */
@media (max-width:900px){
  .hero{ padding:1.75rem 0 2.5rem; border-radius:0 0 50% 50% / 0 0 2rem 2rem }
  .hero .dedans{ gap:1.5rem }
  .hero h1{ margin-bottom:.8rem }
  .hero p{ margin-bottom:1.3rem }
  .hero .note{ margin-top:.9rem }

  .section{ padding:2.75rem 0 }
  .section.gris,
  .section.nuit{ padding:2.75rem 0; margin:.85rem .85rem }

  /* Le titre ne doit plus flotter loin du haut de sa section. */
  .section h2{ margin-bottom:.6rem }
  .section .intro{ margin-bottom:1.6rem }

  /* Ce qui suit une intro : on divise l'écart par deux environ. */
  .parcours,
  .bascule,
  .etapes{ margin-top:1.6rem }
  .questions{ margin-top:1.25rem }
  .milieu-appel{ margin-top:1.75rem }
  .bilan{ margin-top:1rem }
  .liste.serree{ margin-top:1.1rem }

  .duo-img{ gap:1.75rem }
  .grille{ gap:.9rem }
  .parcours{ gap:.9rem }
  .chiffres{ gap:.9rem }
  .etapes{ gap:1.5rem }

  .appel{ padding:3rem 0; margin:.85rem .85rem 1.5rem }
  .appel p{ margin-bottom:1.4rem }
  .pied{ padding:2rem 0 }
}

/* Téléphone : on resserre encore, et les blocs perdent du rembourrage
   intérieur pour rendre de la largeur au texte. */
@media (max-width:640px){
  .section{ padding:2.25rem 0 }
  .section.gris,
  .section.nuit{ padding:2.25rem 0; margin:.7rem .7rem }
  .section .intro{ margin-bottom:1.35rem }

  .carte{ padding:1.35rem 1.25rem }
  .jalon{ padding:1.3rem 1.25rem }
  .chiffre{ padding:1.25rem }
  .volet{ padding:1.4rem 1.3rem }
  .bilan{ padding:1.3rem 1.35rem }
  .q summary{ padding:.9rem 2rem .9rem 0 }
  .q{ padding:.1rem 1.15rem }

  .appel{ padding:2.5rem 0; margin:.7rem .7rem 1.25rem }
  .pied{ padding:1.75rem 0 }
  .pied .dedans{ gap:.9rem 1.25rem }
}

/* Petits téléphones : dernier cran. */
@media (max-width:400px){
  .section{ padding:1.9rem 0 }
  .section.gris,
  .section.nuit{ padding:1.9rem 0; margin:.55rem .5rem }
  .appel{ padding:2.2rem 0; margin:.55rem .5rem 1rem }
  .dedans{ padding:0 1.15rem }
}

/* =====================================================================
   APPEL FINAL — actions et garanties
   ---------------------------------------------------------------------
   Le bouton n'est plus seul : à côté, une sortie pour celui qui hésite
   encore, et dessous les trois réserves qu'on se fait juste avant de
   cliquer, levées une par une.
   ===================================================================== */
.appel-actions{
  display:flex; align-items:center; justify-content:center;
  gap:.9rem 1.75rem; flex-wrap:wrap;
}
/* Blanc plein : 5,13:1 sur la partie turquoise du dégradé, davantage
   sur les deux extrémités sombres. */
.lien-clair{
  color:#fff; font-size:.93rem; font-weight:600;
  text-decoration:underline; text-underline-offset:5px;
  text-decoration-thickness:1px; text-decoration-color:rgba(255,255,255,.45);
  transition:text-decoration-color .2s;
}
.lien-clair:hover{ text-decoration-color:#fff }

.garanties{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:.55rem 1.7rem; list-style:none; margin:1.9rem 0 0; padding:0;
}
.garanties li{
  display:flex; align-items:center; gap:.45rem;
  font-size:.88rem; color:rgba(255,255,255,.92);
}
/* Turquoise très clair : 3,43:1 sur le turquoise du fond, au-dessus du
   seuil de 3:1 exigé pour un signe graphique. */
.garanties li::before{ content:"✓"; color:#7FE3E9; font-weight:700 }

/* Le plan ferme la page comme il l'a ouverte, encore plus en retrait. */
.plan-appel{ right:-12%; bottom:-22%; width:56%; height:135%;
             filter:invert(1); --op:.05 }
@media (max-width:900px){
  .plan-appel{ display:none }
  .garanties{ gap:.5rem 1.2rem; margin-top:1.4rem }
  .appel-actions{ gap:.8rem 1.2rem }
}