/* ============================================================
   Helyon. Feuille de style unique.
   Jetons repris de la grammaire visuelle de toplinepro.com :
   rayons 8 / 16 / 20 / pilule, fonds blanc + crème + ciment,
   titres display très serrés, bandes de couleur pleine.
   Couleur de marque : #a806f4
   ============================================================ */

:root{
  --violet:#a806f4;
  --violet-fonce:#8b04cc;
  --violet-pale:#f6e9fe;
  --violet-clair:#efd9ff;

  --encre:#1b1b1b;
  --encre-douce:#5c5c66;
  --blanc:#ffffff;
  --creme:#fbf9f7;
  --ciment:#f6f2ee;
  --sable:#f0e9df;
  --trait:#e5dfd9;

  --r-s:8px;
  --r-m:16px;
  --r-l:20px;
  --r-xl:28px;
  --pilule:999px;

  --large:1680px;
  --gouttiere:clamp(16px,2.2vw,36px);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--blanc);color:var(--encre);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16.5px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block;}
/* L'en-tete est colle en haut : sans ca, une ancre passe dessous. */
[id]{scroll-margin-top:118px;}
@media(max-width:1040px){ [id]{scroll-margin-top:94px;} }
a{color:inherit;}
ul{margin:0;padding:0;list-style:none;}

/* ---------- typographie ---------- */
.display,h1,h2{
  font-family:Archivo,Inter,Arial,sans-serif;
  font-weight:800;letter-spacing:-.035em;line-height:1.05;margin:0;
}
h1{font-size:clamp(32px,4vw,60px);letter-spacing:-.042em;}
/* Le titre est coupe en deux lignes declarees, pas laissees au hasard du
   retour a la ligne : le mot tournant doit FINIR la premiere ligne. Sinon il
   tombe en debut de deuxieme ligne, et la largeur reservee pour le mot le plus
   long creuse un trou violet sur la gauche. */
.titre__ligne{display:block;transition:transform .28s ease;}
/* L'accroche du hero suit la forme de toplinepro : une promesse de puissance,
   puis ce qu'on ne risque pas. Le gras porte la seconde moitie, qui est celle
   qui leve l'objection. */
.accroche b{color:var(--encre);font-weight:600;}
h2{font-size:clamp(30px,4.4vw,60px);}
h3{font-family:Archivo,Inter,Arial,sans-serif;font-weight:700;
   font-size:clamp(19px,2.1vw,24px);letter-spacing:-.022em;line-height:1.25;margin:0;}
p{margin:0 0 18px;}
.doux{color:var(--encre-douce);}

.contenant{max-width:var(--large);margin:0 auto;padding-inline:var(--gouttiere);}
.section{padding-block:clamp(66px,9vw,124px);}
.section--serree{padding-block:clamp(48px,6vw,80px);}
/* Le schema finit sur une carte isolee : sans cela le blanc sous elle double. */
#comment-ca-marche{padding-bottom:clamp(24px,3.2vw,44px);}
/* Meme chose entre les trois blocs et le tarif : le dernier bloc finit sur un
   grand cadre, la carte du tarif commence sans titre au-dessus d'elle, et les
   deux respirations s'additionnaient en 200 px de blanc. */
#ce-quon-fait + #tarif{padding-top:clamp(26px,3.6vw,52px);}
.creme{background:var(--creme);}
.ciment{background:var(--ciment);}
/* La lettre tient en quatre paragraphes : la section n'a pas besoin de la
   respiration d'une section pleine. */
#qui-sommes-nous{padding-block:clamp(48px,5.4vw,78px);}

/* ---------- étiquette de section ---------- */
.etiquette{
  display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--violet);margin-bottom:14px;
}
/* Le chapeau s'etale sur toute la largeur : titre a gauche, texte a droite.
   Sur une toile de 1445 px, un chapeau bride a 60 caracteres laissait
   800 px de vide a droite de chaque titre de section. */
.chapeau{max-width:none;display:grid;grid-template-columns:1.2fr 1fr;
  gap:clamp(20px,4vw,72px);align-items:end;}
.chapeau .etiquette{grid-column:1/-1;margin-bottom:2px;}
.chapeau h2{grid-column:1;}
.chapeau p{grid-column:2;font-size:18.5px;color:var(--encre-douce);margin:0 0 6px;}
/* un chapeau sans texte d'accompagnement garde son titre sur toute la ligne */
.chapeau:not(:has(p)) h2{grid-column:1/-1;}
@media(max-width:900px){
  .chapeau{grid-template-columns:1fr;align-items:start;}
  .chapeau h2,.chapeau p{grid-column:1;}
  .chapeau p{margin-top:16px;}
}

.chapeau--centre{max-width:26ch;margin-inline:auto;text-align:center;display:block;}
/* Trois lignes de titre au dessus d'une section deja dense : on elargit la
   mesure et on descend d'un cran pour tenir sur deux. */
#site-internet{max-width:36ch;font-size:clamp(28px,3.6vw,48px);}
.chapeau--centre + .sous{max-width:64ch;margin:20px auto 0;text-align:center;
  font-size:18px;color:var(--encre-douce);}
/* Les trois choses qui decident : le gras porte les trois, le reste les relie. */
.sous b{color:var(--encre);font-weight:600;}

/* ---------- boutons ---------- */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--violet);color:#fff;text-decoration:none;white-space:nowrap;
  font-weight:600;font-size:15px;letter-spacing:-.01em;
  padding:13px 24px;border-radius:var(--pilule);border:0;cursor:pointer;
  transition:background .18s ease,transform .18s ease;
}
.bouton:hover{background:var(--violet-fonce);transform:translateY(-1px);}
.bouton--fantome{background:#fff;color:var(--encre);border:1.5px solid var(--trait);}
.bouton--fantome:hover{background:var(--encre);color:#fff;border-color:var(--encre);}
.bouton--blanc{background:#fff;color:var(--violet);}
.bouton--blanc:hover{background:#f3e7ff;}
.bouton--grand{padding:16px 30px;font-size:16px;}

/* ---------- navigation ---------- */
/* En-tete flottant : fixe, en retrait des bords, coins arrondis.
   Au repos il est transparent ; des qu'on defile, il prend son fond
   floute et son ombre, et se detache donc du contenu qui passe dessous. */
.entete{
  position:fixed;top:14px;left:0;right:0;z-index:60;
  padding-inline:clamp(10px,2.2vw,36px);pointer-events:none;
  transition:transform .28s cubic-bezier(.2,.75,.3,1);
}
/* 19 septembre : l'entete mange 98 px sur 779, soit un huitieme de l'ecran, et
   le tarif est la section qui en souffre le plus. Elle se retire donc quand on
   descend et revient des qu'on remonte : on lit a pleine hauteur, et le bouton
   de prise de rendez-vous est toujours a un geste. Le retrait est pose par le
   script ; sans lui, l'entete reste simplement la. */
.entete[data-cachee="oui"]{transform:translateY(calc(-100% - 20px));}
@media (prefers-reduced-motion:reduce){
  .entete{transition:none;}
  .entete[data-cachee="oui"]{transform:none;}
}
.entete .contenant{
  display:flex;align-items:center;gap:32px;height:84px;
  max-width:calc(var(--large) - 72px);margin:0 auto;padding-inline:22px;
  border:1px solid transparent;border-radius:14px;
  pointer-events:auto;
  transition:background .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.entete[data-defile="oui"] .contenant{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border-color:rgba(27,27,27,.09);
  box-shadow:0 10px 34px rgba(27,27,27,.10);
}
/* la page commence sous l'en-tete flottant */
body{padding-top:104px;}

.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--encre);}
.logo svg{height:28px;width:auto;}
.logo span{font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.045em;font-size:27px;}
.logo i{font-style:normal;color:var(--violet);}

.nav{display:flex;align-items:center;gap:4px;margin-left:18px;}
.entete > .contenant > .bouton{margin-left:auto;}
.nav > a,.nav > .depliant > button{
  display:inline-flex;align-items:center;gap:7px;
  font:inherit;font-size:18.5px;font-weight:500;color:var(--encre);
  background:none;border:0;cursor:pointer;text-decoration:none;
  padding:10px 14px;border-radius:11px;
}
.nav > a:hover,.nav > .depliant > button:hover{background:var(--violet-pale);color:var(--violet);}
.nav .chevron{width:14px;height:14px;transition:transform .18s ease;}
.depliant{position:relative;}
.depliant[data-ouvert="oui"] > button{color:var(--violet);background:var(--violet-pale);}
.depliant[data-ouvert="oui"] .chevron{transform:rotate(180deg);}

/* le panneau déroulant */
.panneau{
  position:absolute;top:calc(100% + 16px);left:0;transform:translateY(-6px);
  background:#fff;border:1px solid var(--trait);border-radius:var(--r-xl);
  box-shadow:0 24px 60px rgba(27,27,27,.14);
  padding:34px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.depliant[data-ouvert="oui"] .panneau{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
}

/* Passerelle invisible entre le bouton et le panneau. Sans elle, la souris
   traverse 14 px de vide, mouseleave part, et le panneau se ferme avant
   qu'on ait pu cliquer dedans. */
.depliant::after{content:"";position:absolute;top:100%;left:0;right:0;height:20px;}
.depliant[data-ouvert="non"]::after{pointer-events:none;}
.panneau--large{width:min(1140px,calc(100vw - 48px));}
.panneau--metiers{width:min(880px,calc(100vw - 48px));}

/* Trois colonnes, une par etape du systeme, plus l'encart. */
.colonnes{display:grid;grid-template-columns:repeat(3,1fr) 235px;gap:30px;}
.colonnes--metiers{grid-template-columns:repeat(3,1fr);gap:10px 30px;}
/* Les intitules des colonnes du menu ne sont PAS des titres : ce sont des
   etiquettes. Ecrits en <h4>, ils arrivaient six fois avant le <h1> et le plan
   de la page commencait au niveau 4. On vend du referencement, on ne peut pas
   se permettre un plan de page bancal. */
.colonne__titre{
  margin:0 0 13px;font-size:15.5px;font-weight:600;letter-spacing:0;
  text-decoration:underline;text-underline-offset:4px;
}
.colonne ul{display:grid;gap:3px;}
.colonne ul a{
  display:flex;align-items:center;gap:10px;padding:8px 10px;margin-inline:-10px;
  border-radius:var(--r-s);text-decoration:none;font-size:16px;color:var(--encre);
}
.colonne ul a:hover{background:var(--ciment);}
.colonne ul svg{width:20px;height:20px;flex:none;stroke:var(--encre);
  stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.colonne ul a:hover svg{stroke:var(--violet);}

/* La ligne qui rattrape tous ceux qu'on n'a pas prevus. Elle fait plus de
   travail que les vingt-trois entrees reunies : personne ne doit repartir en
   se disant que son metier n'y est pas. */
.panneau__fin{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--trait);
  font-size:14.5px;color:var(--encre-douce);}
.panneau__fin a{color:var(--violet);font-weight:600;text-decoration:none;}
.panneau__fin a:hover{text-decoration:underline;}

.encart{
  background:var(--violet);color:#fff;border-radius:var(--r-l);padding:22px;
  display:flex;flex-direction:column;justify-content:space-between;gap:16px;
}
.encart strong{font-family:Archivo,sans-serif;font-weight:700;font-size:18px;
  letter-spacing:-.02em;line-height:1.25;display:block;}
.encart p{font-size:14px;opacity:.92;margin:8px 0 0;}
.encart .bouton{background:#fff;color:var(--violet);align-self:flex-start;padding:11px 18px;font-size:14.5px;}
.encart .bouton:hover{background:#f3e7ff;}

/* Cible le seul bouton de la barre, pas celui de l'encart du menu deroulant :
   a specificite egale c'etait cette regle qui gagnait, et le bouton de l'encart
   grossissait jusqu'a deborder du pave violet. */
.entete > .contenant > .bouton{padding:13px 24px;font-size:16.5px;}

/* ---------- burger, petit écran ---------- */
.burger{display:none;background:none;border:0;cursor:pointer;padding:9px;margin-left:auto;}
.burger svg{width:24px;height:24px;stroke:var(--encre);stroke-width:1.8;fill:none;stroke-linecap:round;}

@media(max-width:1200px){ .hero h1{text-wrap:balance;max-width:21ch;} }
@media(max-width:1040px){
  .entete{top:10px;}
  .entete .contenant{gap:12px;height:68px;padding-inline:16px;}
  body{padding-top:86px;}
  .burger{display:block;}
  .entete > .contenant > .bouton{display:none;}
  .nav{
    position:fixed;inset:88px 12px auto 12px;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border:1px solid var(--trait);border-radius:16px;
    box-shadow:0 18px 44px rgba(27,27,27,.14);padding:12px 18px 22px;
    max-height:calc(100dvh - 104px);overflow-y:auto;display:none;
  }
  .nav[data-ouvert="oui"]{display:flex;}
  .nav > a,.nav > .depliant > button{
    width:100%;justify-content:space-between;font-size:18px;padding:15px 4px;
    border-bottom:1px solid var(--trait);border-radius:0;
  }
  .depliant{position:static;}
  .depliant::after{display:none;}
  .panneau{
    position:static;transform:none;opacity:1;visibility:hidden;pointer-events:none;
    border:0;box-shadow:none;padding:6px 4px 18px;width:auto;height:0;overflow:hidden;
  }
  .depliant[data-ouvert="oui"] .panneau{transform:none;visibility:visible;pointer-events:auto;height:auto;}
  .colonnes,.colonnes--metiers{grid-template-columns:1fr;gap:18px;}
  /* La regle .nav > a remet un fond transparent : on la repasse devant
     pour que le bouton du menu mobile reste un vrai bouton violet. */
  .nav > a.bouton--mobile{
    display:flex;justify-content:center;margin-top:18px;padding:16px;
    background:var(--violet);color:#fff;font-weight:600;font-size:17px;
    border:0;border-radius:var(--pilule);
  }
  .nav > a.bouton--mobile:hover{background:var(--violet-fonce);color:#fff;}
}
@media(min-width:1041px){ .nav .bouton--mobile{display:none;} }

/* ---------- hero ---------- */
.hero{padding-block:clamp(10px,1.6vw,22px) clamp(36px,4.4vw,72px);text-align:center;}
/* `nowrap` gardait le titre sur une ligne sur grand ecran, mais sur telephone
   il le faisait deborder et toute la page glissait de gauche a droite.
   `balance` garde la ligne unique quand elle rentre, et coupe quand il faut. */
.hero h1{max-width:none;margin:0 auto 12px;text-wrap:balance;}
.hero .accroche{font-size:clamp(17px,1.7vw,20px);color:var(--encre);font-weight:400;
  max-width:none;margin:0 auto 22px;}
.hero .actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.fleche-bas{width:15px;height:15px;}

/* champ + bouton dans une même pilule */
.capture{
  display:flex;align-items:center;gap:6px;max-width:470px;margin:0 auto;
  background:#fff;border:1.5px solid var(--trait);border-radius:var(--pilule);
  padding:5px 5px 5px 20px;
}
.capture input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font:inherit;font-size:15px;color:var(--encre);padding:11px 0;
}
.capture input::placeholder{color:#9a9aa4;}
.capture:focus-within{border-color:var(--violet);}
.mention{font-size:13.5px;color:var(--encre-douce);margin-top:10px;}

/* ---------- vitrine du hero : une photo en grand, des vignettes dessous ----------
   Reprise de la reference : un visuel principal legende au nom de la personne,
   et un rail de vignettes cliquables en dessous. Les emplacements vides sont
   assumes : ils se rempliront a mesure que des clients acceptent d'y figurer. */
.vitrine{margin-top:clamp(14px,1.8vw,22px);}

.vitrine-scene{
  position:relative;margin:0;border-radius:21px;overflow:clip;
  aspect-ratio:2.2;background:var(--encre);
}

/* La hauteur de la bande, troisieme ecriture, 21 septembre.
   Deux demandes qui se contredisent : « qu'elle ne change pas d'un ecran a
   l'autre » et « qu'elle descende jusqu'au bas de l'ecran ». Le bas de l'ecran
   bouge, donc une bande qui l'atteint bouge aussi. On ne peut pas avoir les
   deux en entier.
   Ce qu'on fait : elle descend jusqu'au bas de la fenetre, mais BORNEE. 400 px
   au minimum, pour qu'elle ne devienne jamais une fente sur un portable bas ;
   640 px au maximum, pour qu'un grand ecran ne la transforme pas en affiche.
   Entre les deux elle suit la fenetre, et c'est la que se trouvent tous les
   ecrans de travail.
   404 px, c'est ce qui est au-dessus d'elle : entete, titre, accroche, boutons,
   plus un filet de blanc en dessous. */
@media(min-width:1041px){
  .vitrine-scene{
    aspect-ratio:auto;
    height:clamp(400px, calc(100vh - 404px), 640px);
  }
}
.vitrine-scene .vue{
  position:absolute;inset:0;margin:0;opacity:0;transition:opacity .7s ease;
}
.vitrine-scene .vue[data-actif="oui"]{opacity:1;}

/* Aucun mouvement sur l'image : elle reste fixe pendant tout son affichage.
   Seul le fondu d'une photo a l'autre est anime. Choix de Guillaume,
   17 septembre : le lent rapproche donnait une image qui bouge sans arret. */
.vitrine-scene .vue img{transform:none;animation:none;}

/* Barre de progression : elle dit combien de temps reste avant de passer au suivant. */
.pouce{position:relative;}
.pouce .jauge{
  position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--violet);
  border-radius:0 3px 3px 0;
}
.pouce[aria-selected="true"] .jauge{animation:remplir 4s linear forwards;}
.vitrine[data-pause="oui"] .pouce .jauge{animation-play-state:paused;}
@keyframes remplir{from{width:0}to{width:100%}}

@media (prefers-reduced-motion:reduce){
  .pouce[aria-selected="true"] .jauge{animation:none;}
  .vitrine-scene .vue{transition:none;}
}

/* Les visuels sont maintenant de vraies photos larges : le sujet remplit
   le cadre, sans couche floutee sur les cotes. Le cadrage vertical se regle
   par vue, parce que les tetes ne sont pas a la meme hauteur. */
.vue img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--cadrage,center 28%);
}

.vitrine-scene figcaption{
  position:absolute;right:clamp(16px,2.4vw,34px);bottom:clamp(14px,2vw,26px);
  text-align:right;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.6);z-index:2;
}
.vitrine-scene figcaption b{
  display:block;font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.025em;
  font-size:clamp(21px,2.4vw,30px);
}
/* petit trait de separation sous le prenom, aligne a droite comme la legende */
.vitrine-scene figcaption b::after{
  content:"";display:block;width:30px;height:2px;border-radius:2px;
  background:rgba(255,255,255,.6);margin:8px 0 8px auto;
}
.vitrine-scene figcaption em{
  display:block;font-style:normal;font-weight:600;font-size:16.5px;
  margin-top:2px;opacity:.95;
}
.vitrine-scene figcaption span{display:block;font-size:15.5px;opacity:.85;margin-top:1px;}

/* Le rail de vignettes n'est plus dans le HTML depuis le 17 septembre.
   Ses styles restent ici : le jour ou il revient, le script de la vitrine
   le reprend tout seul. Voir prompts/vignettes-en-attente/. */
.rail{
  display:flex;gap:10px;justify-content:center;flex-wrap:nowrap;
  margin-top:12px;overflow-x:auto;padding:4px 2px 6px;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none;}
.pouce{
  flex:none;width:clamp(64px,6vw,88px);aspect-ratio:1;border-radius:16px;
  overflow:hidden;padding:0;border:0;cursor:pointer;background:var(--ciment);
  box-shadow:0 0 0 1px var(--trait) inset;
  transition:box-shadow .18s ease,transform .18s ease;
}
.pouce img{width:100%;height:100%;object-fit:cover;}
.pouce:hover{transform:translateY(-2px);}
.pouce[aria-selected="true"]{box-shadow:0 0 0 3px var(--violet);}
.pouce--vide{
  cursor:default;background:var(--creme);
  box-shadow:0 0 0 1.5px var(--trait) inset;
  position:relative;
}
.pouce--vide::after{
  content:"";position:absolute;inset:0;border-radius:16px;
  border:1.5px dashed var(--trait);
}
.pouce--vide:hover{transform:none;}
.rail-note{
  text-align:center;font-size:13.5px;color:var(--encre-douce);margin-top:8px;
}
@media(max-width:760px){
  .vitrine-scene{aspect-ratio:5/4;}
  .rail{justify-content:flex-start;}
}

/* ---------- bande de chiffres, pleine largeur, en verre depoli ----------
   Bord a bord comme une bande de couleur pleine, mais faite de trois
   couches : des violets flous au fond, une plaque translucide qui les
   refloute par-dessus, puis le texte.
   `overflow:hidden` est indispensable : sans lui, le flou du fond bave
   au-dela de la bande et salit le blanc des sections voisines. */
.bande{position:relative;overflow:hidden;isolation:isolate;}

.bande-fond{
  position:absolute;inset:-30% -10%;z-index:0;pointer-events:none;
  filter:blur(64px);
  background:
    linear-gradient(115deg,#3f0163 0%,#7a04b8 42%,#a806f4 72%,#7d04bc 100%),
    radial-gradient(42% 70% at 20% 30%, #c44bff 0%, transparent 66%),
    radial-gradient(40% 68% at 82% 78%, #2e0149 0%, transparent 70%);
}

.bande-verre{
  position:relative;z-index:1;
  padding-block:clamp(52px,6.6vw,85px);   /* bandeau cale sur la hauteur de la reference, 359 px */
  background:linear-gradient(135deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.07) 42%,rgba(46,2,74,.16) 100%);
  backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  border-top:1px solid rgba(255,255,255,.30);
  border-bottom:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34);
}

.bande .grille{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
.bande .bloc{padding-inline:clamp(14px,2.4vw,40px);}
.bande .bloc:first-child{padding-left:0;}
.bande .bloc:last-child{padding-right:0;}
.bande .bloc + .bloc{border-left:1px solid rgba(255,255,255,.34);}
.bande .valeur{
  font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.045em;
  font-size:clamp(34px,4.4vw,52px);line-height:1;color:#fff;
  text-shadow:0 2px 20px rgba(34,0,56,.45);
  /* Les trois valeurs partagent une boite de hauteur fixe, calee sur la plus
     haute (« Sans engagement », deux lignes). Calees en HAUT de cette boite,
     elles demarrent toutes a la meme hauteur, et les trois paragraphes qui
     suivent demarrent ensemble eux aussi. Pour qu'aucune case ne laisse de
     vide sous sa valeur, les deux valeurs d'une seule ligne sont dimensionnees
     pour remplir presque toute la boite. */
  display:flex;align-items:flex-start;
  min-height:clamp(68px,8.4vw,104px);
}
.bande p{margin:6px 0 0;font-size:17.5px;font-weight:500;color:#fff;max-width:30ch;
  text-shadow:0 1px 14px rgba(34,0,56,.5);}

/* Un chiffre court laisse la case a moitie vide a cote d'un intitule qui
   tient sur deux lignes. On lui donne la hauteur des deux lignes. */
.bande .valeur--grande{font-size:clamp(56px,8.3vw,104px);}
.bande .valeur--moyenne{font-size:clamp(46px,6.4vw,80px);}
@media(max-width:820px){
  .bande .valeur--grande{font-size:clamp(56px,14vw,84px);}
  .bande .valeur--moyenne{font-size:clamp(46px,11vw,68px);}
  .bande .valeur{min-height:0;}
}

@media(max-width:820px){
  .bande .grille{grid-template-columns:1fr;gap:30px;}
  .bande .bloc{padding-inline:0;}
  .bande .bloc + .bloc{border-left:0;border-top:1px solid rgba(255,255,255,.34);padding-top:28px;}
}

/* Repli pour les navigateurs sans flou d'arriere-plan : plaque violette
   opaque plutot qu'un voile transparent illisible. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .bande-verre{background:linear-gradient(135deg,rgba(168,6,244,.95),rgba(96,3,148,.95));}
}

/* ---------- blocs image + texte alternés ---------- */
/* Le texte etait centre verticalement contre un visuel de 600 px : le titre
   partait au milieu de la colonne et prenait toute la hauteur. Il est cale en
   haut, et descendu d'un cran en taille : a 60 px il faisait quatre lignes. */
.duo{
  display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,4.4vw,80px);align-items:start;
  padding-block:clamp(40px,4.6vw,62px);
}
/* Le plafond etait a 40 px, et le titre de l'etape 1 prenait alors trois lignes
   quand les deux autres en prenaient deux. Mesure faite a 1440 px de fenetre :
   la bascule est entre 35 et 36 px. Plafond a 34, pour ne pas vivre sur le fil.
   C'est la taille qui cede, pas la phrase. */
.duo h2{font-size:clamp(26px,2.8vw,34px);}
/* La structure d'une etape : l'etiquette annonce l'etape, le titre pose le
   probleme que la personne a aujourd'hui, ce paragraphe fait la bascule vers ce
   qu'on installe, et les onglets portent le detail. */
.duo .reponse{margin:18px 0 0;font-size:16.5px;line-height:1.5;color:var(--encre-douce);
  max-width:56ch;}
.duo .reponse b{color:var(--encre);font-weight:600;}
.duo + .duo{border-top:1px solid var(--trait);}
.duo--inverse .media{order:2;}
.media{border-radius:var(--r-xl);overflow:hidden;}
.pilules{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 26px;}
.pilules li{
  font-size:13.5px;font-weight:500;color:var(--encre);
  background:var(--ciment);border:1px solid var(--trait);
  padding:7px 14px;border-radius:var(--pilule);
}
.points li{
  padding:14px 0;border-top:1px solid var(--trait);font-size:15.5px;color:var(--encre-douce);
}
.points li strong{color:var(--encre);font-weight:600;}

/* ---------- les onglets d'un bloc en quinconce ----------
   Le titre pose le probleme, les onglets portent les reponses. Trois ecueils
   traites ici :
   1. il faut qu'on voie que c'est cliquable avant d'avoir survole. D'ou le
      relief : fond blanc, trait franc, ombre basse, et le curseur main.
   2. il faut qu'on comprenne que ca tourne tout seul. D'ou la jauge qui se
      remplit sous l'onglet actif : elle annonce le changement au lieu de le
      subir.
   3. il ne faut pas que le bloc saute quand on change d'onglet. Les trois
      volets font cinq lignes, et le corps garde une hauteur minimale. */
.onglets{margin-top:26px;}
/* Les trois onglets doivent tenir sur une ligne dans une colonne de 640 px. Le
   corps et les marges sont regles pour ca : a 13,5 px et 15 px de marge, le bloc
   03 passait a la ligne. Mesure faite dans le navigateur, pas devinee. */
.onglets__barre{display:flex;flex-wrap:wrap;gap:8px;}
/* Les onglets reprennent la pastille du bloc 02, au pixel pres : meme ciment,
   meme trait, meme corps. Selectionne, l'onglet passe au violet tres pale de la
   fiche qui monte a la premiere place dans l'animation 01, avec son trait violet.
   C'est le meme objet visuel a deux endroits de la page, pas deux inventions. */
.onglet{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  font-family:inherit;font-size:13px;font-weight:500;color:var(--encre);
  background:var(--ciment);border:1px solid var(--trait);
  padding:9px 14px;border-radius:var(--pilule);cursor:pointer;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
/* Meme icone, meme trait, meme taille que dans le pupitre plus haut : les neuf
   outils y sont deja dessines, et les reprendre ici fait le lien entre le
   schema du systeme et le detail de chaque etape. */
.onglet svg{width:16px;height:16px;flex:none;stroke:var(--violet);stroke-width:1.7;
  fill:none;stroke-linecap:round;stroke-linejoin:round;}
.onglet:hover{border-color:var(--violet);transform:translateY(-1px);}
.onglet:focus-visible{outline:2px solid var(--violet);outline-offset:2px;}
.onglet[aria-selected="true"]{
  background:#f3e6ff;border-color:#e2cbf5;font-weight:600;}
/* Pas de coche violette ici : elle sert deja dans le tarif, et un meme signe a
   deux sens sur une meme page ne veut plus rien dire. On reprend le filet et le
   gras des points du bloc 02. */
/* La hauteur minimale est posee par le script, qui mesure le volet le plus haut
   du bloc a la largeur courante. Celle qui est ecrite ici n'est qu'un filet de
   secours si le script ne tourne pas : une valeur en dur est juste a une seule
   largeur d'ecran et fausse a toutes les autres. */
.volet{margin:22px 0 0;min-height:340px;}
.volet li{
  padding:14px 0;border-top:1px solid var(--trait);
  font-size:15.5px;line-height:1.45;color:var(--encre-douce);
}
.volet li strong{color:var(--encre);font-weight:600;}
@media(max-width:880px){ .volet{min-height:0;} }
@media (prefers-reduced-motion:reduce){ .onglet{transition:none;} }

/* L'etiquette violette est le titre du bloc : elle se lit avant le titre noir,
   donc elle ne peut pas rester en 12,5 px. */
.duo .etiquette{font-size:15px;letter-spacing:.1em;margin-bottom:10px;}
@media(max-width:880px){
  .duo{grid-template-columns:1fr;}
  .duo--inverse .media{order:0;}
}

/* ---------- tarif ---------- */
/* Le titre du tarif est plus long que les autres titres centres : on rend la
   mesure au titre lui-meme, sinon les 26ch du chapeau le cassent en six lignes. */
.chapeau--tarif{max-width:none;}
.chapeau--tarif h2{max-width:24ch;margin-inline:auto;}

/* Les trois gages ne sont pas une phrase de bas de page : sans engagement et
   sans frais de mise en route sont ce qui leve l'objection avant le prix, donc
   ils sont en pastilles, au-dessus des cartes, et on les voit avant de lire. */
.gages{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin:20px 0 0;padding:0;}
.gage{position:relative;display:inline-flex;align-items:center;
  padding:9px 18px 9px 36px;border-radius:var(--pilule);
  background:var(--blanc);border:1px solid var(--violet-clair);
  font-size:14.5px;font-weight:600;color:var(--encre);
  box-shadow:0 8px 18px -14px rgba(27,27,27,.5);}
.gage::before{content:"";position:absolute;left:16px;top:50%;
  width:10px;height:5.5px;margin-top:-4px;
  border-left:2.2px solid var(--violet);border-bottom:2.2px solid var(--violet);
  transform:rotate(-45deg);}

/* Les trois garanties s'animent, 19 septembre. Elles montent l'une apres
   l'autre quand la section arrive a l'ecran, et la coche se pose juste apres.
   C'est une animation et pas une transition, exprES : une transition retardee
   resterait accrochee a l'element et retarderait ensuite le survol de trois
   dixiemes. Et `backwards` plutot que `both` : la pose finale doit revenir a
   l'etat naturel, sinon l'animation figerait `transform:none` et le survol ne
   pourrait plus lever la pastille.
   L'etat par defaut est visible. Sans JavaScript, sans IntersectionObserver ou
   en mouvement reduit, aucun attribut n'est pose et les trois sont simplement
   la : une garantie ne depend pas d'un script pour se lire. */
.gage{transition:transform .22s cubic-bezier(.2,.75,.3,1),
      box-shadow .22s ease,border-color .22s ease;}
.gages[data-anime="pret"] .gage{opacity:0;}
.gages[data-anime="pret"] .gage::before{transform:rotate(-45deg) scale(0);}

.gages[data-anime="vu"] .gage{
  animation:gage-entree .55s cubic-bezier(.2,.75,.3,1) backwards;}
.gages[data-anime="vu"] .gage::before{
  animation:gage-coche .42s cubic-bezier(.2,1.6,.4,1) .22s backwards;}
.gages[data-anime="vu"] .gage:nth-child(2){animation-delay:.09s;}
.gages[data-anime="vu"] .gage:nth-child(2)::before{animation-delay:.31s;}
.gages[data-anime="vu"] .gage:nth-child(3){animation-delay:.18s;}
.gages[data-anime="vu"] .gage:nth-child(3)::before{animation-delay:.40s;}

@keyframes gage-entree{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:none;}
}
@keyframes gage-coche{
  from{transform:rotate(-45deg) scale(0);}
  to{transform:rotate(-45deg) scale(1);}
}

@media (hover:hover){
  .gage:hover,
  .gages[data-anime="vu"] .gage:hover{
    transform:translateY(-3px);border-color:var(--violet);
    box-shadow:0 14px 24px -14px rgba(108,3,166,.6);}
}
@media (prefers-reduced-motion:reduce){
  .gage{transition:none;}
  .gages[data-anime] .gage,
  .gages[data-anime] .gage::before{animation:none;opacity:1;}
  .gages[data-anime] .gage::before{transform:rotate(-45deg);}
}
@media(max-width:560px){.gage{font-size:13.5px;padding:8px 14px 8px 32px;}
  .gage::before{left:13px;}}

/* ---------- les trois offres ----------
   Deuxieme ecriture, 18 septembre. La premiere disait tout : ce qui est compris,
   ce qui ne l'est pas, le benefice de chaque ligne. Resultat, trois colonnes
   illisibles et deux ecrans de haut. Celle-ci suit la regle de toplinepro :
   le prix en haut, une ligne par chose, et **aucune liste de ce qui manque**.
   La difference se lit dans « Tout ce qu'il y a dans X, plus… », qui dit en
   cinq mots ce que vingt lignes barrees disaient mal.
   Le detail ligne a ligne a sa place sur une page dediee, pas ici. */
/* Deux formules depuis le 1er octobre : le site seul a 99 € n'est plus vendu,
   tout ce qu'il contenait est rentre dans Le systeme. Deux cartes etalees sur
   toute la largeur feraient des lignes de 70 caracteres : on les borne. */
.offres{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,1.8vw,26px);
  align-items:stretch;max-width:1060px;margin:clamp(26px,2.8vw,38px) auto 0;}
@media(max-width:900px){.offres{grid-template-columns:1fr;max-width:560px;}}

/* La carte du Systeme porte maintenant deux listes : ce qu'est le site, puis ce
   qui fait venir et rappeler les clients. Un petit titre gris par liste, pour
   qu'on voie d'un coup d'oeil qu'il y a deux choses, et pas neuf lignes en vrac.
   Gris et pas violet : le violet est pris par l'etiquette de l'option. */
.offre__bloc{display:grid;gap:11px;}
.offre__groupe{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--encre-douce);}

/* Le fond de section, 19 septembre. Il etait sur les temoignages ; il est ici,
   parce que c'est le tarif qui decide et qu'une page entierement blanche ne
   designe rien. Un lavis violet tres clair, pas un aplat : la tete encre de
   l'offre du milieu garde toute sa force dessus, ce qu'un fond sombre lui
   aurait enleve. Les cartes passent de creme a blanc pour se detacher du lavis :
   le creme, pose sur un tiret de violet, tournait au sale. */
#tarif{
  background:linear-gradient(168deg,#f7edfd 0%,#fdfaff 46%,#f1e1fb 100%);
  border-block:1px solid var(--violet-clair);
  /* 19 septembre : la section faisait 1278 px pour 695 px utiles sous l'entete.
     On ne verra jamais trois colonnes de prix d'un seul coup d'oeil, mais on
     doit voir les trois CARTES entieres. Tout est resserre pour ca. */
  padding-block:clamp(48px,5vw,76px);}

.offre{--pad:clamp(24px,2.1vw,31px);
  position:relative;display:flex;flex-direction:column;row-gap:18px;
  background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-xl);
  padding:var(--pad);
  box-shadow:0 22px 44px -32px rgba(27,27,27,.28);
  transition:transform .3s cubic-bezier(.2,.75,.3,1),
             box-shadow .3s ease,border-color .3s ease;}

/* Au survol, la formule se leve et prend le violet. C'est la seule chose de la
   page ou le lecteur compare trois objets : il faut que celui qu'il regarde se
   detache des deux autres pendant qu'il le regarde. */
@media (hover:hover){
  .offre:hover{transform:translateY(-8px);border-color:var(--violet);
    box-shadow:0 38px 64px -34px rgba(108,3,166,.42),0 0 0 2px rgba(168,6,244,.2);}
}
/* Celle du milieu ne devient pas une carte noire entiere : seule sa tete l'est.
   Un pave sombre de huit cents pixels ecrasait les deux autres et se lisait mal. */
.offre--vedette{border-color:var(--encre);
  box-shadow:0 34px 70px -34px rgba(60,4,92,.45),0 0 0 2px rgba(168,6,244,.22);}
@media (hover:hover){
  .offre--vedette:hover{border-color:var(--violet);
    box-shadow:0 44px 80px -34px rgba(60,4,92,.5),0 0 0 2px rgba(168,6,244,.38);}
}
@media (prefers-reduced-motion:reduce){
  .offre{transition:none;}
  .offre:hover{transform:none;}
}

/* L'espacement entre les blocs d'une carte est un row-gap, pas une marge : le
   bouton peut alors prendre `margin-top:auto` et se caler en bas sans que le
   gap disparaisse sur la carte la plus haute. */
.offre__tete{margin:0;}
/* La tete de l'offre du milieu : l'encre garde le fond, mais quatre couches de
   violet fige dessus le balayage qui traverse la barre IA Helyon. C'est le meme
   geste, arrete. On ne l'anime pas : une carte de prix qui scintille en
   permanence fatigue, et ce qu'on veut ici est un reflet, pas un clignotant. */
.offre--vedette .offre__tete{
  margin:calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0;
  padding:var(--pad);color:#fff;
  background:
    radial-gradient(100% 120% at 22% -4%, rgba(214,104,255,.26) 0%, rgba(214,104,255,0) 48%),
    radial-gradient(90% 110% at 82% 104%, rgba(124,58,237,.28) 0%, rgba(124,58,237,0) 50%),
    linear-gradient(104deg, rgba(168,6,244,0) 30%, rgba(226,138,255,.15) 48%,
      rgba(96,132,255,.09) 58%, rgba(168,6,244,0) 72%),
    var(--encre);
  border-radius:calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px) 0 0;}

.offre__prix{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0;}
.offre__prix s{font-family:Archivo,Inter,Arial,sans-serif;font-weight:700;
  font-size:24px;letter-spacing:-.03em;color:#8d8d97;text-decoration-thickness:2px;}
.offre__prix b{font-family:Archivo,Inter,Arial,sans-serif;font-weight:800;
  font-size:clamp(40px,4vw,52px);letter-spacing:-.045em;line-height:1;}
.offre__prix small{font-size:15px;font-weight:600;color:var(--encre-douce);}
.offre--vedette .offre__prix small{color:#c9c2d4;}
/* le 199 barre etait un gris neutre : sur le violet il tournait au sale */
.offre--vedette .offre__prix s{color:rgba(255,255,255,.56);}

.offre__nom{display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  font-family:Archivo,Inter,Arial,sans-serif;font-weight:800;
  font-size:21px;letter-spacing:-.025em;line-height:1.2;margin:24px 0 0;}
.offre__badge{background:#fff;color:var(--encre);border-radius:var(--pilule);
  padding:4px 11px;font-family:Inter,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;}
.offre__lancement{margin:8px 0 0;font-size:13px;font-weight:600;color:#cf95f9;}

/* Le reacteur : la barre noire du pupitre plus haut, au mot pres. Meme fond
   encre, meme balayage violet, meme pouls #d98bff, donc on la reconnait d'une
   section a l'autre. Il n'est que sur les deux offres qui l'ont ; l'offre a 99
   n'affiche rien a cette place, et c'est le « plus… » des deux autres qui dit
   la difference, pas une liste de manques. */
.offre__moteur{position:relative;overflow:hidden;margin:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:3px 9px;
  padding:12px 16px;border-radius:var(--r-m);background:var(--encre);color:#fff;
  font-family:Archivo,sans-serif;font-weight:700;font-size:15.5px;letter-spacing:-.02em;}
.offre__moteur::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(168,6,244,0) 38%,rgba(201,88,255,.5) 50%,
    rgba(168,6,244,0) 62%);
  transform:translateX(-100%);animation:reacteur-balayage 3.4s linear infinite;}
.offre__pouls{width:9px;height:9px;border-radius:50%;background:#d98bff;flex:none;
  animation:pupitre-pouls 2.2s ease-out infinite;}
@media (prefers-reduced-motion:reduce){
  .offre__moteur::after{display:none;}
  .offre__pouls{animation:none;}
}

/* Une ligne par chose, et elle tient sur une ou deux lignes. Si une ligne en
   demande trois, c'est qu'elle dit deux choses : la couper en deux ou la sortir. */
.offre__liste{margin:0;display:grid;gap:13px;}
/* Pas de gras sur la moitie de chaque ligne : avec des lignes aussi courtes ca
   fait un texte raye. Poids unique, et du noir, pas du gris : c'est ce qu'on
   lit pour choisir, ca ne se met pas en retrait. */
.offre__liste li{position:relative;padding-left:30px;font-size:16px;line-height:1.48;
  color:var(--encre);}
.offre__liste li b{font-weight:700;color:var(--encre);}
/* Le 999 barre est l'ancre de valeur de toute la section : il doit se voir dans
   la ligne, pas s'y fondre. Un cran au-dessus du corps, gris franc, trait net. */
.offre__liste li s{font-family:Archivo,Inter,Arial,sans-serif;font-weight:700;
  font-size:17px;color:#6f6a64;text-decoration-thickness:2px;}
.offre__liste li::before{content:"";position:absolute;left:3px;top:.36em;
  width:13px;height:7px;border-left:2.6px solid var(--violet);
  border-bottom:2.6px solid var(--violet);transform:rotate(-45deg);}

.offre__note{margin:0;font-size:13px;line-height:1.5;color:var(--encre-douce);}

/* L'option, 21 septembre. La fiche Google sort du forfait et se prend a part.
   Elle est donc montree pour ce qu'elle est : un ajout, en bas de la carte,
   juste au-dessus du bouton. Le trait discontinu dit du premier coup d'oeil
   que ce n'est pas compris dans le prix affiche au-dessus.
   C'est elle qui porte le `margin-top:auto`, pas le bouton : sinon les deux
   marges automatiques se partagent le vide et separent l'option du bouton. */
.offre__option{
  margin-top:auto;display:flex;align-items:center;gap:11px;
  padding:12px 14px;cursor:pointer;
  border:1.5px dashed var(--violet-clair);border-radius:var(--r-m);
  background:rgba(168,6,244,.045);
  transition:border-color .18s ease,background .18s ease;}
.offre__option + .offre__bouton{margin-top:0;}
/* Coche cochee : le trait devient plein. Discontinu = pas encore pris,
   plein = compris dans le prix affiche au-dessus. */
.offre[data-option="oui"] .offre__option{
  border-style:solid;border-color:var(--violet);
  background:rgba(168,6,244,.10);}
@media (hover:hover){
  .offre__option:hover{border-color:var(--violet);}
}

/* La vraie case reste dans la page pour le clavier et les lecteurs d'ecran,
   mais c'est le carre dessine a cote qui se voit. */
.offre__option input{position:absolute;opacity:0;width:0;height:0;}
.offre__option__coche{
  position:relative;flex:none;width:21px;height:21px;border-radius:6px;
  border:1.8px solid var(--violet);background:var(--blanc);
  transition:background .18s ease;}
.offre__option__coche::after{
  content:"";position:absolute;left:5px;top:6px;width:9px;height:4.5px;
  border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;
  transform:rotate(-45deg) scale(0);transform-origin:center;
  transition:transform .18s cubic-bezier(.2,1.6,.4,1);}
.offre__option input:checked + .offre__option__coche{background:var(--violet);}
.offre__option input:checked + .offre__option__coche::after{
  transform:rotate(-45deg) scale(1);}
.offre__option input:focus-visible + .offre__option__coche{
  outline:2px solid var(--violet);outline-offset:3px;}

.offre__option__corps{flex:1 1 auto;min-width:0;}
.offre__option__etiquette{display:block;margin-bottom:3px;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--violet);}
.offre__option__nom{display:block;font-size:14px;line-height:1.35;
  font-weight:600;color:var(--encre);}
/* Ce qu'on fait dedans, en dessous : la premiere ligne dit a quoi ca sert,
   celle-ci dit ce qu'on livre. Sans elle, l'option est une promesse sans
   contenu, et 49 € par mois ne se justifie pas. */
.offre__option__detail{display:block;margin-top:3px;font-size:12.5px;
  line-height:1.35;color:var(--encre-douce);}
.offre__option__prix{flex:none;font-family:Archivo,Inter,Arial,sans-serif;
  font-weight:700;font-size:15.5px;color:var(--encre);white-space:nowrap;
  text-align:right;}
.offre__option__prix small{display:block;font-weight:600;font-size:11px;
  letter-spacing:.04em;color:var(--encre-douce);}
@media (prefers-reduced-motion:reduce){
  .offre__option,.offre__option__coche,.offre__option__coche::after{
    transition:none;}
}

/* Les trois boutons sont calés sur le bas des cartes, qui font la meme hauteur :
   le regard les trouve sur une seule ligne au lieu de les chercher trois fois. */
.offre__bouton{margin-top:auto;width:100%;}
/* PRO+ n'est pas encore vendu : la carte garde sa place et son prix, mais son
   bouton devient un etat. Meme gabarit que les deux autres, pour que la ligne
   des trois boutons reste droite ; trait pointille et gris pour qu'on voie du
   premier coup qu'il n'y a rien a cliquer. */
.offre__bientot{margin-bottom:0;display:flex;align-items:center;justify-content:center;
  padding:13px 24px;border-radius:var(--pilule);
  border:1.5px dashed #cdc7c0;background:transparent;color:var(--encre-douce);
  font-size:15px;font-weight:600;letter-spacing:-.01em;cursor:default;}


/* ---------- lettre ---------- */
.lettre{display:grid;grid-template-columns:300px 1fr;gap:clamp(32px,5vw,64px);align-items:start;}
/* La colonne portrait suit la carte fondateur de toplinepro : photo centree aux
   coins tres arrondis, puis le nom et la fonction dessous, centres eux aussi.
   Un overflow:hidden ici rognerait la signature, c'est la photo qui porte les
   coins. */
.lettre .portrait{display:block;text-align:center;}

/* ---------- les trois temoignages video ----------
   Places juste apres le tarif : c'est la seconde exacte ou le lecteur se demande
   si ca marche vraiment. La section etait encre, et c'est elle qui attrapait
   l'oeil du haut de page. Le 19 septembre le fond a change de section : c'est le
   tarif qui le porte maintenant, parce que c'est lui qui decide. Les temoignages
   passent en clair et servent de preuve, pas d'affiche.
   Les videos sont verticales, filmees au telephone. On ne les etire pas en 16/9 :
   un format telephone dit qu'elles n'ont pas ete tournees par une agence, et c'est
   exactement ce qui les rend croyables. */

/* La hauteur de la section est commandee par la largeur des cartes : en 9/16,
   100 px de large en moins font 178 px de haut en moins. C'est le seul levier. */
/* 19 septembre : trois portraits 9/16 en grand sur fond blanc, c'etait trois
   telephones poses sur la page, et ca ne rassurait pas, ca inquietait. Les
   vignettes passent en 4/5, recadrees sur le visage dans la video source : plus
   de sous-titre fige en milieu de phrase, plus de logo coupe, et une section
   deux fois moins haute. La video, elle, se joue toujours en entier. */
.temoins{padding-block:clamp(40px,4.4vw,62px);}
/* Le chapeau du tarif est bride a 19ch pour tenir sur deux lignes ; celui des
   temoignages doit tenir sur une seule, donc il reprend toute la mesure. */
#temoignages h2{max-width:none;}
.temoins__grille{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,1.8vw,26px);max-width:760px;margin:clamp(22px,2.6vw,32px) auto 0;}
@media(max-width:860px){
  .temoins__grille{grid-template-columns:1fr;max-width:300px;}
}

.temoin{margin:0;}
/* Le cadre est un bouton tant que la video n'est pas lancee : la vignette est chez
   nous, et rien ne part chez Wistia avant le clic. Il porte le format et les coins,
   et le lecteur qui le remplace herite des memes. */
.temoin__cadre{position:relative;display:block;width:100%;padding:0;
  aspect-ratio:4/5;border:0;border-radius:var(--r-l);overflow:hidden;
  background:#241a2e;cursor:pointer;
  box-shadow:0 26px 50px -30px rgba(27,27,27,.5);
  transition:transform .2s ease,box-shadow .2s ease;}
.temoin__cadre--joue{cursor:default;}
.temoin__cadre:hover{transform:translateY(-3px);
  box-shadow:0 32px 58px -30px rgba(27,27,27,.6),0 0 0 1px rgba(168,6,244,.45);}
.temoin__cadre:focus-visible{outline:2px solid var(--violet);outline-offset:3px;}
.temoin__cadre img{width:100%;height:100%;object-fit:cover;}
/* Quand la video part, le cadre reprend le format vertical de la source :
   la vignette est recadree, la video ne l'est pas. */
.temoin__cadre--joue{aspect-ratio:9/16;}
.temoin__cadre wistia-player{display:block;width:100%;height:100%;}

/* Le bouton de lecture : un disque violet et un triangle dessine en bordures,
   donc aucune image a charger pour l'afficher. */
.temoin__lire{position:absolute;left:50%;top:50%;width:54px;height:54px;
  transform:translate(-50%,-50%);border-radius:50%;background:var(--violet);
  box-shadow:0 10px 26px -8px rgba(168,6,244,.8);
  transition:transform .2s ease,background .2s ease;}
.temoin__lire::after{content:"";position:absolute;left:54%;top:50%;
  transform:translate(-50%,-50%);
  border-left:15px solid #fff;border-top:9.5px solid transparent;
  border-bottom:9.5px solid transparent;}
.temoin__cadre:hover .temoin__lire{transform:translate(-50%,-50%) scale(1.08);
  background:var(--violet-fonce);}

.temoin__nom{margin:14px 0 0;text-align:center;font-size:15px;color:var(--encre);}
.temoin__nom b{font-family:Archivo,sans-serif;font-weight:700;}
.temoin__nom span{display:block;font-size:13.5px;color:var(--encre-douce);margin-top:2px;}

@media (prefers-reduced-motion:reduce){
  .temoin__cadre,.temoin__lire{transition:none;}
}

/* ---------- le portrait de « Qui est derriere » ----------
   La photo porte enfin son propre fond, une rue d'Angers generee autour du sujet
   reel (voir prompts/03-FOND-GUILLAUME.md). Il n'y a donc plus rien a fabriquer
   ici : ni fond de secours, ni masque pour dissoudre une coupe, ni ombre portee
   pour recoller un detourage, ni flottement.
   Le cadre est en 3/4 comme la photo : elle le remplit sans etre rognee. */
/* Le recadrage est fait dans le fichier, pas en CSS : le ciel au-dessus de la
   tete et les jambes sont coupes a la source, donc l'image pese moins et le
   cadre n'a plus rien a rogner. Le 4/5 du cadre est celui du fichier. */
.equipe{aspect-ratio:4/5;border-radius:30px;overflow:hidden;background:var(--sable);
  max-width:250px;margin-inline:auto;}
.equipe__gens{display:block;width:100%;height:100%;object-fit:cover;}

.lettre .citation{
  font-family:Archivo,sans-serif;font-weight:700;letter-spacing:-.025em;
  font-size:clamp(21px,2.5vw,29px);line-height:1.25;margin:0 0 26px;
}
.lettre p{color:var(--encre-douce);max-width:70ch;}
/* La signature est passee sous la photo le 18 septembre : le nom repond a
   l'etiquette « Qui est derriere » au moment ou on voit le visage, pas six
   paragraphes plus bas. */
.lettre .signature{margin-top:26px;font-size:19px;color:var(--encre-douce);line-height:1.3;}
.lettre .signature strong{display:block;font-family:Archivo,sans-serif;font-weight:800;
  font-size:27px;letter-spacing:-.03em;color:var(--encre);margin-bottom:3px;}
@media(max-width:820px){.lettre{grid-template-columns:1fr;}
  .lettre .portrait{max-width:320px;margin-inline:auto;}}

/* ---------- les trois visuels des blocs en quinconce ----------
   Une photo remplit le cadre, et une carte de verre posee dessus porte ce qui
   bouge. On n'ecrit rien sur l'ecran du telephone photographie : sur une scene
   large, cet ecran fait moins de cent pixels et rien n'y serait lisible.
   La carte, elle, fait 88 % de la largeur du cadre.
   Tant qu'aucune photo n'est livree, le cadre garde son degrade et la carte
   s'y lit tout aussi bien.
   Le fond est pose ici, une seule fois, pour les trois blocs : quand chacun
   avait le sien, les trois cadres n'etaient pas de la meme couleur et la
   colonne de gauche se lisait comme trois sections au lieu d'une. */
.ecran{position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:linear-gradient(160deg,#f3f0ea 0%,#fdfcfa 48%,#ece7f4 100%);
  min-height:420px;}
.ecran__fond{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--cadrage,center);}
@media(min-width:861px){
  /* Le cadre est cale sur le 3:4 de Flow : l'image le remplit sans etre rognee.
     Mais une colonne de 706 px en 3:4 ferait 942 px de haut contre 604 px pour
     le texte a cote. On le pilote donc par sa hauteur, et on le centre. */
  .ecran{aspect-ratio:3/4;height:clamp(540px,50vw,700px);width:auto;
    margin-inline:auto;min-height:0;}
}

.ecran__carte{position:absolute;left:6%;right:6%;bottom:6%;z-index:1;
  background:rgba(255,255,255,.93);border:1px solid rgba(255,255,255,.8);
  border-radius:20px;padding:16px 16px 18px;
  box-shadow:0 26px 50px -26px rgba(52,2,82,.5),0 2px 6px rgba(52,2,82,.07);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}

/* --- la carte du bloc 01 : la recherche qui se tape, puis les resultats --- */
.ecran__champ{display:flex;align-items:center;gap:8px;
  border:1px solid #e6d7f3;border-radius:var(--pilule);padding:10px 14px;
  background:var(--blanc);}
.ecran__champ svg{width:15px;height:15px;flex:none;stroke:var(--violet);
  stroke-width:1.9;fill:none;stroke-linecap:round;}
.ecran__saisie{position:relative;font-size:13.5px;font-weight:500;color:var(--encre);
  white-space:nowrap;animation:ecran-frappe 7.5s steps(14,end) infinite;}
.ecran__saisie::after{content:"";display:inline-block;width:1.7px;height:13px;
  background:var(--violet);margin-left:2px;vertical-align:-1px;
  animation:ecran-curseur .9s steps(2,start) infinite;}
@keyframes ecran-frappe{
  0%   {clip-path:inset(0 100% 0 0)}
  24%  {clip-path:inset(0 -4px 0 0)}
  88%  {clip-path:inset(0 -4px 0 0)}
  89%  {clip-path:inset(0 100% 0 0)}
  100% {clip-path:inset(0 100% 0 0)}
}
@keyframes ecran-curseur{ 0%{opacity:1} 50%{opacity:0} }

.ecran__liste{display:grid;gap:9px;margin-top:12px;}
.ecran__fiche{border:1px solid var(--trait);border-radius:14px;padding:12px 13px;
  background:var(--blanc);opacity:0;animation:ecran-fiche 7.5s ease-out infinite;}
.ecran--trouve .ecran__fiche:nth-child(1){animation-delay:2.2s;}
.ecran--trouve .ecran__fiche:nth-child(3){animation-delay:2.6s;}
.ecran__fiche i{display:block;height:7px;border-radius:4px;background:#ece7f2;}
.ecran__fiche i:first-child{width:62%;margin-bottom:8px;}
.ecran__fiche i:last-child{width:38%;}
@keyframes ecran-fiche{
  0%      {opacity:0;transform:translateY(9px)}
  6%      {opacity:1;transform:translateY(0)}
  58%     {opacity:1;transform:translateY(0)}
  64%,100%{opacity:0;transform:translateY(0)}
}

/* La fiche du milieu apparait comme les autres, puis se souligne de violet.
   Elle n'est pas en tete de liste : le site ne promet aucune place (regle 9). */
.ecran__fiche--vous{animation-name:ecran-vous;animation-delay:2.4s;}
.ecran__fiche--vous b{display:block;font-family:Archivo,sans-serif;font-weight:700;
  font-size:13.5px;letter-spacing:-.01em;color:var(--encre);}
.ecran__etoiles{display:block;font-size:10.5px;letter-spacing:1.8px;color:var(--violet);
  margin:3px 0 2px;}
.ecran__fiche--vous em{font-style:normal;font-size:11px;color:var(--encre-douce);}
@keyframes ecran-vous{
  0%      {opacity:0;transform:translateY(9px);border-color:var(--trait);box-shadow:none}
  6%      {opacity:1;transform:translateY(0);border-color:var(--trait);box-shadow:none}
  13%     {border-color:var(--violet);box-shadow:0 0 0 3px rgba(168,6,244,.13)}
  58%     {opacity:1;border-color:var(--violet);box-shadow:0 0 0 3px rgba(168,6,244,.13)}
  64%,100%{opacity:0;border-color:var(--violet);box-shadow:0 0 0 3px rgba(168,6,244,.13)}
}

/* ---------- la page de resultats, visuel du bloc « On vous trouve » ----------
   Ce n'est pas une capture d'ecran : c'est un schema dessine en CSS, dans les
   couleurs qu'un moteur de recherche emploie vraiment (un bleu de lien, un vert
   d'ouverture, des etoiles ambre, des gris de metadonnees). Il ne porte ni le
   logo ni le nom d'un moteur : on montre a quoi ressemble une recherche locale,
   on ne se fait pas passer pour quelqu'un.
   Les deux autres entreprises sont floutees : inventer des concurrents nommes
   sur un ecran fabrique, c'est la regle 5. Et la fiche du client est au milieu,
   pas en tete : le site ne promet aucune place, regle 9. */
@keyframes serp-vie{
  0%      {opacity:0}
  4%,93%  {opacity:1}
  99%,100%{opacity:0}
}
.ecran--serp{
  --serp-lien:#1b53d0; --serp-vert:#1a7f37; --serp-or:#f0a500;
  --serp-gris:#65686e; --serp-trait:#e3e5e9;
  display:grid;place-items:center;padding:26px;}

/* Deux temps dans la meme carte. D'abord la barre seule, au milieu, comme une
   page d'accueil de moteur : on tape. Puis la barre remonte en haut et la page
   de resultats s'ouvre dessous. La carte garde une hauteur fixe pour que le
   voyage de la barre soit un simple deplacement, sans rien faire sauter. */
/* Rien ne sort tout seul. Chaque element garde son etat jusqu'a la fin du
   cycle, et c'est la carte entiere qui s'efface d'un bloc : les retours a zero
   se font pendant qu'elle est invisible, donc on ne les voit jamais. */
.serp{position:relative;width:100%;max-width:420px;height:600px;
  animation:serp-vie 12s ease-in-out infinite;
  background:#fff;border:1px solid var(--serp-trait);
  border-radius:20px;padding:16px 16px 18px;
  box-shadow:0 30px 56px -30px rgba(24,28,40,.42),0 2px 6px rgba(24,28,40,.06);
  font-size:13px;color:#1f2126;}

/* la barre de recherche, et la requete qui s'ecrit */
.serp__barre{position:absolute;left:16px;right:16px;top:50%;
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--serp-trait);border-radius:var(--pilule);
  padding:10px 15px;box-shadow:0 1px 3px rgba(24,28,40,.06);background:#fff;z-index:3;
  animation:serp-barre 12s cubic-bezier(.4,0,.2,1) infinite;}
@keyframes serp-barre{
  0%,19%  {top:50%;transform:translateY(-50%) scale(1);
           box-shadow:0 1px 3px rgba(24,28,40,.06)}
  21%     {top:50%;transform:translateY(-50%) scale(.985);
           box-shadow:0 0 0 4px rgba(27,83,208,.13)}
  24%     {top:50%;transform:translateY(-50%) scale(1);
           box-shadow:0 0 0 4px rgba(27,83,208,.13)}
  30%,100%{top:16px;transform:translateY(0) scale(1);
           box-shadow:0 1px 3px rgba(24,28,40,.06)}
}

/* Ce qui entoure la barre pendant le premier temps : une carte vide avec une
   seule barre au milieu ne se comprenait pas. Une marque de recherche, une
   ligne d'explication et deux boutons suffisent a dire ou l'on est. Tout
   disparait des que la recherche est lancee. */
.serp__accueil{position:absolute;left:16px;right:16px;top:50%;
  transform:translateY(-112px);text-align:center;
  animation:serp-accueil 12s ease-out infinite;}
.serp__marque{display:inline-grid;place-items:center;width:46px;height:46px;
  border-radius:15px;background:rgba(27,83,208,.09);}
.serp__marque svg{width:23px;height:23px;stroke:var(--serp-lien);stroke-width:2;
  fill:none;stroke-linecap:round;}
.serp__accueil b{display:block;margin-top:11px;font-family:Archivo,sans-serif;
  font-weight:800;font-size:23px;letter-spacing:-.03em;color:#1f2126;}
.serp__accueil em{display:block;margin-top:3px;font-style:normal;font-size:12.5px;
  color:var(--serp-gris);}
.serp__boutons{position:absolute;left:16px;right:16px;top:50%;
  transform:translateY(42px);display:flex;justify-content:center;gap:9px;
  animation:serp-accueil 12s ease-out infinite;}
.serp__boutons span{font-size:12.5px;font-weight:500;color:#3c3f45;
  background:#f3f4f7;border:1px solid var(--serp-trait);border-radius:8px;
  padding:8px 15px;}
@keyframes serp-accueil{
  0%,3%   {opacity:0}
  7%,22%  {opacity:1}
  27%,100%{opacity:0}
}

/* la page de resultats n'existe pas tant qu'on n'a pas lance la recherche */
.serp__page{position:absolute;left:16px;right:16px;top:62px;opacity:0;
  animation:serp-page 12s ease-out infinite;}
@keyframes serp-page{
  0%,28%  {opacity:0;transform:translateY(10px)}
  33%,100%{opacity:1;transform:translateY(0)}
}
.serp__barre svg{width:15px;height:15px;flex:none;stroke:var(--serp-gris);
  stroke-width:2;fill:none;stroke-linecap:round;}
/* La frappe se fait lettre par lettre. Chaque lettre porte sa PROPRE suite de
   cles, calee sur le meme cycle de 10 s que le reste : avec un `animation-delay`
   par lettre, chacune bouclait a un instant different du conteneur, et au
   redemarrage le mot restait affiche puis s'effacait lettre a lettre par la
   gauche. C'est ce clignotement que Guillaume a vu.
   Les instants sont irreguliers, avec une respiration avant le nom de la
   commune. Une lettre masquee par l'opacite garderait sa largeur et le mot
   s'afficherait troue : on la masque a taille nulle. */
.serp__saisie{font-size:13.5px;white-space:pre;}
.serp__saisie i{font-style:normal;font-size:0;
  animation-duration:12s;animation-timing-function:step-end;
  animation-iteration-count:infinite;}
.serp__saisie i:nth-child(1){animation-name:serp-l1;}
.serp__saisie i:nth-child(2){animation-name:serp-l2;}
.serp__saisie i:nth-child(3){animation-name:serp-l3;}
.serp__saisie i:nth-child(4){animation-name:serp-l4;}
.serp__saisie i:nth-child(5){animation-name:serp-l5;}
.serp__saisie i:nth-child(6){animation-name:serp-l6;}
.serp__saisie i:nth-child(7){animation-name:serp-l7;}
.serp__saisie i:nth-child(8){animation-name:serp-l8;}
.serp__saisie i:nth-child(9){animation-name:serp-l9;}
.serp__saisie i:nth-child(10){animation-name:serp-l10;}
.serp__saisie i:nth-child(11){animation-name:serp-l11;}
.serp__saisie i:nth-child(12){animation-name:serp-l12;}
.serp__saisie i:nth-child(13){animation-name:serp-l13;}
.serp__saisie i:nth-child(14){animation-name:serp-l14;}
@keyframes serp-l1{ 0%,2.9%{font-size:0} 3.0%,100%{font-size:13.5px} }
@keyframes serp-l2{ 0%,3.7%{font-size:0} 3.8%,100%{font-size:13.5px} }
@keyframes serp-l3{ 0%,4.4%{font-size:0} 4.5%,100%{font-size:13.5px} }
@keyframes serp-l4{ 0%,4.9%{font-size:0} 5.0%,100%{font-size:13.5px} }
@keyframes serp-l5{ 0%,5.7%{font-size:0} 5.8%,100%{font-size:13.5px} }
@keyframes serp-l6{ 0%,6.2%{font-size:0} 6.3%,100%{font-size:13.5px} }
@keyframes serp-l7{ 0%,6.7%{font-size:0} 6.8%,100%{font-size:13.5px} }
@keyframes serp-l8{ 0%,8.1%{font-size:0} 8.2%,100%{font-size:13.5px} }
@keyframes serp-l9{ 0%,9.8%{font-size:0} 9.9%,100%{font-size:13.5px} }
@keyframes serp-l10{ 0%,10.4%{font-size:0} 10.5%,100%{font-size:13.5px} }
@keyframes serp-l11{ 0%,11.0%{font-size:0} 11.1%,100%{font-size:13.5px} }
@keyframes serp-l12{ 0%,11.5%{font-size:0} 11.6%,100%{font-size:13.5px} }
@keyframes serp-l13{ 0%,12.1%{font-size:0} 12.2%,100%{font-size:13.5px} }
@keyframes serp-l14{ 0%,12.7%{font-size:0} 12.8%,100%{font-size:13.5px} }
.serp__saisie::after{content:"";display:inline-block;width:1.6px;height:13px;
  background:var(--serp-lien);margin-left:2px;vertical-align:-1px;
  animation:ecran-curseur .9s steps(2,start) infinite;}

/* la rangee d'onglets, comme sur n'importe quel moteur */
.serp__onglets{display:flex;gap:18px;margin:0 2px;padding-bottom:9px;
  border-bottom:1px solid var(--serp-trait);font-size:12px;color:var(--serp-gris);}
.serp__onglets .est-actif{color:var(--serp-lien);font-weight:600;position:relative;}
.serp__onglets .est-actif::after{content:"";position:absolute;left:0;right:0;bottom:-10px;
  height:2px;border-radius:2px;background:var(--serp-lien);}

/* le petit plan : des routes, une riviere, trois punaises */
.serp__plan{position:relative;height:84px;margin-top:12px;border-radius:12px;
  overflow:hidden;background:#eaeee4;border:1px solid var(--serp-trait);}
.serp__route{position:absolute;background:#fff;border-radius:2px;}
.serp__route--a{left:-10%;right:-10%;top:38%;height:7px;transform:rotate(-4deg);}
.serp__route--b{top:-20%;bottom:-20%;left:32%;width:6px;transform:rotate(9deg);}
.serp__route--c{left:-10%;right:-10%;top:72%;height:4px;transform:rotate(3deg);}
.serp__eau{position:absolute;right:-14%;top:-30%;width:46%;height:160%;
  background:#cfe0ea;transform:rotate(16deg);}
.serp__pin{position:absolute;width:13px;height:13px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg) scale(0);transform-origin:center;
  box-shadow:0 2px 5px rgba(24,28,40,.32);
  animation-duration:12s;animation-timing-function:cubic-bezier(.2,1.5,.4,1);
  animation-iteration-count:infinite;}
.serp__pin--1{left:22%;top:30%;background:#c9ccd3;animation-name:serp-punaise1;}
/* La punaise du client ne tombe pas avec les autres : les autres sont deja la,
   lui arrive, et elle se pose au moment exact ou sa fiche prend la tete. */
.serp__pin--2{left:49%;top:46%;background:var(--violet);width:17px;height:17px;
  animation-name:serp-punaise-tard;animation-delay:0s;z-index:1;}
@keyframes serp-punaise-tard{
  0%,58%  {transform:rotate(-45deg) scale(0)}
  64%     {transform:rotate(-45deg) scale(1.25)}
  68%,100%{transform:rotate(-45deg) scale(1)}
}
.serp__pin--3{left:74%;top:26%;background:#c9ccd3;animation-name:serp-punaise3;}
.serp__pin--4{left:62%;top:70%;background:#c9ccd3;animation-name:serp-punaise4;}
.serp__pin--5{left:36%;top:66%;background:#c9ccd3;animation-name:serp-punaise5;}
@keyframes serp-punaise1{ 0%,34%{transform:rotate(-45deg) scale(0)} 37%{transform:rotate(-45deg) scale(1.15)} 39%,100%{transform:rotate(-45deg) scale(1)} }
@keyframes serp-punaise3{ 0%,36%{transform:rotate(-45deg) scale(0)} 39%{transform:rotate(-45deg) scale(1.15)} 41%,100%{transform:rotate(-45deg) scale(1)} }
@keyframes serp-punaise4{ 0%,38%{transform:rotate(-45deg) scale(0)} 41%{transform:rotate(-45deg) scale(1.15)} 43%,100%{transform:rotate(-45deg) scale(1)} }
@keyframes serp-punaise5{ 0%,40%{transform:rotate(-45deg) scale(0)} 43%{transform:rotate(-45deg) scale(1.15)} 45%,100%{transform:rotate(-45deg) scale(1)} }

/* Les fiches locales.
   Au depart la liste est PLEINE : quatre concurrents, aucune place vide, le
   client n'y est pas du tout. Sa fiche est hors du flux, sous la liste, et elle
   remonte en passant les quatre, une par une, avec un temps d'arret a chaque
   fois : c'est ce qui donne l'escalier. Quand elle arrive en tete, le bloc des
   quatre recule d'un cran et le dernier sort du cadre.
   Tout est en pourcentages d'un meme cycle de 10 s, sans aucun retard. */
/* La liste ne se termine plus sur un trait net. Une coupure franche donnait
   trois defauts d'un coup : la fiche du client semblait sortir d'un cadre blanc,
   la quatrieme entreprise etait tranchee en deux quand elle reculait, et sa
   disparition laissait un filet blanc. Un fondu vertical regle les trois.
   Le fondu ne s'applique qu'en hauteur : les 16 px de marge laterale laissent
   passer le bond d'arrivee, qui deborde de 7 px de chaque cote. */
.serp__resultats{position:relative;margin:-6px -16px 0;padding:12px 16px 0;
  height:364px;          /* quatre fiches de 85 px, le fondu, et la marge du bond */
  /* Douze pixels de marge en haut : sans eux, le bond d'arrivee de la fiche
     etait tranche par le bord du masque, qui commence exactement sur sa
     premiere ligne. */
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 86%,transparent 100%);}
.serp__autres{display:grid;
  animation:serp-recule 12s cubic-bezier(.3,.9,.3,1) infinite;}
@keyframes serp-recule{
  0%,48%   {transform:translateY(0)}
  57%,100% {transform:translateY(128px)}
}
.serp__ligne{display:grid;gap:2px;padding:9px 10px;border-radius:12px;
  border:1px solid transparent;height:85px;align-content:center;
  opacity:0;animation:serp-entre 12s ease-out infinite;}
.serp__nom{font-size:14px;font-weight:500;color:var(--serp-lien);}
.serp__note{font-size:12px;color:var(--serp-gris);}
.serp__note b{color:var(--serp-or);letter-spacing:.5px;font-weight:400;}
.serp__note em{font-style:normal;}
.serp__meta{font-size:12px;color:var(--serp-gris);}
.serp__meta u{color:var(--serp-vert);text-decoration:none;font-weight:500;}
.serp__flou{filter:blur(3.2px);user-select:none;}

/* La fiche du client est hors du flux : elle ne reserve aucune place, donc il
   n'y a pas de trou blanc a l'ecran avant qu'elle arrive. */
.serp__ligne--vous{position:absolute;left:16px;right:16px;top:12px;height:128px;z-index:2;
  background:#fff;animation-name:serp-grimpe;
  animation-timing-function:cubic-bezier(.62,0,.3,1);}
.serp__ligne--vous .serp__nom{color:#0f1114;font-weight:700;
  font-family:Archivo,sans-serif;letter-spacing:-.01em;}
@keyframes serp-grimpe{
  0%,38%  {opacity:0;transform:translateY(340px) scale(1);
           border-color:var(--serp-trait);box-shadow:none}
  40%     {opacity:1;transform:translateY(340px) scale(1);
           border-color:var(--serp-trait);box-shadow:0 10px 26px -14px rgba(24,28,40,.5)}
  55%     {opacity:1;transform:translateY(0) scale(1);
           border-color:var(--serp-trait);box-shadow:0 10px 26px -14px rgba(24,28,40,.5)}
  60%     {transform:translateY(0) scale(1.045);
           background:#faf3ff;border-color:var(--violet);
           box-shadow:0 0 0 4px rgba(168,6,244,.16),0 20px 40px -18px rgba(108,3,166,.6)}
  65%,100%{opacity:1;transform:translateY(0) scale(1);
           background:#faf3ff;border-color:var(--violet-clair);
           box-shadow:0 10px 26px -18px rgba(108,3,166,.4)}
}

/* les trois boutons, une fois la fiche posee */
.serp__actions{display:flex;gap:6px;margin-top:5px;opacity:0;
  animation:serp-boutons 12s ease-out infinite;}
.serp__actions span{font-size:11.5px;font-weight:500;color:var(--serp-lien);
  border:1px solid #d5ddf3;border-radius:var(--pilule);padding:5px 11px;
  background:#f7f9ff;}
@keyframes serp-boutons{
  0%,64%    {opacity:0;transform:translateY(5px)}
  68%,100%  {opacity:1;transform:translateY(0)}
}

@keyframes serp-entre{
  0%,31%    {opacity:0;transform:translateY(8px)}
  35%,100%  {opacity:1;transform:translateY(0)}
}

@media (prefers-reduced-motion:reduce){
  .serp__saisie,.serp__saisie i,.serp__saisie::after,.serp__resultats,.serp__onglets,.serp__plan,.serp__pin,
  .serp__ligne,.serp__actions{animation:none;opacity:1;}
  .serp__saisie i{font-size:13.5px;}
  .serp__resultats{clip-path:none;}
  .serp__pin{transform:rotate(-45deg) scale(1);}
  .serp__ligne--vous{background:#faf3ff;border-color:var(--violet-clair);}
  .serp__ligne,.serp__actions,.serp__autres{transform:none;}
  .serp__ligne--vous{position:static;}
}

/* ---------- la fiche d'avis, visuel du bloc « On vous choisit » ----------
   La fiche part de 3,2 sur 31 avis, avec des une et des deux etoiles bien
   visibles. Puis des avis 5 etoiles arrivent, les reponses partent, le compteur
   monte et la note finit a 4,8.
   Ce que le dessin ne dit surtout pas : que les mauvais avis disparaissent. Le
   vieil avis 2 etoiles reste a l'ecran du debut a la fin, et les barres du bas
   retrecissent sans jamais tomber a zero. On ne supprime pas, on couvre.
   Cycle de 12 s, tout en pourcentages, sans aucun retard : trois compteurs et
   cinq barres doivent avancer ensemble. */
.ecran--notes{
  --serp-lien:#1b53d0; --serp-or:#f0a500; --serp-gris:#65686e; --serp-trait:#e3e5e9;
  display:grid;place-items:center;padding:26px;}
.serp--notes{max-width:440px;
  /* Les compteurs reviennent a leur valeur de depart d'un coup a la fin du
     cycle : la carte s'efface juste avant, pour que le retour ne se voie pas. */
  animation:notes-cycle 12s ease-in-out infinite;}
@keyframes notes-cycle{
  0%      {opacity:0}
  3%,95%  {opacity:1}
  100%    {opacity:0}
}

.notes__tete{display:grid;grid-template-columns:auto 1fr;gap:3px 11px;
  align-items:center;padding-bottom:13px;border-bottom:1px solid var(--serp-trait);}
.notes__nom{grid-column:1/-1;font-family:Archivo,sans-serif;font-weight:800;
  font-size:16px;letter-spacing:-.02em;color:#0f1114;margin-bottom:4px;}

/* les deux compteurs : une colonne de valeurs qui defile par crans */
.notes__score,.notes__compte{display:block;overflow:hidden;line-height:1;}
.notes__score{grid-row:2/4;font-family:Archivo,sans-serif;font-weight:800;
  font-size:32px;letter-spacing:-.03em;color:#0f1114;height:32px;}
/* La colonne entiere coulisse, pas seulement sa premiere valeur : en animant le
   premier enfant, lui seul montait et la fenetre finissait vide. */
.notes__score b{display:block;animation:notes-roule-score 12s step-end infinite;}
.notes__score u{display:block;height:32px;text-decoration:none;}
@keyframes notes-roule-score{
  0%,19%   {transform:translateY(0)}
  19.1%,30%{transform:translateY(-32px)}
  30.1%,41%{transform:translateY(-64px)}
  41.1%,52%{transform:translateY(-96px)}
  52.1%,63%{transform:translateY(-128px)}
  63.1%,100%{transform:translateY(-160px)}
}
.notes__compte{grid-column:2;font-size:12px;color:var(--serp-gris);height:14px;}
.notes__compte b{display:block;font-weight:400;
  animation:notes-roule-compte 12s step-end infinite;}
.notes__compte u{display:block;height:14px;text-decoration:none;}
@keyframes notes-roule-compte{
  0%,19%   {transform:translateY(0)}
  19.1%,30%{transform:translateY(-14px)}
  30.1%,41%{transform:translateY(-28px)}
  41.1%,52%{transform:translateY(-42px)}
  52.1%,63%{transform:translateY(-56px)}
  63.1%,100%{transform:translateY(-70px)}
}

/* la rangee d'etoiles : un fond gris, et l'ambre qui avance par-dessus */
.notes__jauge{grid-column:2;position:relative;font-size:15px;letter-spacing:1px;
  line-height:1;align-self:end;}
.notes__jauge u{color:#dcdee3;text-decoration:none;}
.notes__jauge i{position:absolute;left:0;top:0;font-style:normal;color:var(--serp-or);
  white-space:nowrap;clip-path:inset(0 36% 0 0);
  animation:notes-jauge 12s cubic-bezier(.3,1,.4,1) infinite;}
@keyframes notes-jauge{
  0%,19%   {clip-path:inset(0 36% 0 0)}
  27%,30%  {clip-path:inset(0 30% 0 0)}
  38%,41%  {clip-path:inset(0 22% 0 0)}
  49%,52%  {clip-path:inset(0 14% 0 0)}
  60%,63%  {clip-path:inset(0 8% 0 0)}
  71%,100% {clip-path:inset(0 4% 0 0)}
}

/* la repartition : les mauvaises notes retrecissent, elles ne s'effacent pas */
.notes__barres{display:grid;gap:5px;margin:13px 0 4px;}
.notes__barres span{display:grid;grid-template-columns:11px 1fr;gap:9px;align-items:center;}
.notes__barres u{font-size:11px;color:var(--serp-gris);text-decoration:none;text-align:right;}
.notes__barres i{display:block;height:7px;border-radius:4px;background:#e9eaee;
  position:relative;overflow:hidden;}
.notes__barres i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--a);
  border-radius:4px;background:var(--serp-or);
  animation:notes-rebat 12s cubic-bezier(.3,1,.4,1) infinite;}
@keyframes notes-rebat{
  0%,19%   {width:var(--a)}
  71%,100% {width:var(--b)}
}

/* Les avis. Un seul mouvement pour toute la colonne, et rien d'autre : c'est ce
   qui rend le defilement fluide. La colonne part en haut, les plus anciens sont
   donc visibles au depart, et elle descend jusqu'a 0, ce qui fait entrer les
   plus recents par le haut et sortir les mauvais par le bas.
   Rien n'est supprime : les deux et trois etoiles sortent du cadre, ils ne
   s'effacent pas. */
.notes__liste{position:relative;height:258px;margin-top:10px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);}
/* Un cran par avis, et un palier entre deux : le compteur, les barres et
   l'avis qui glisse tombent exactement sur les memes instants. Un defilement
   continu ne se coordonnait avec rien. */
.notes__colonne{display:grid;
  transform:translateY(-430px);   /* 8 avis de 86 px, moins la fenetre de 258 */
  animation:notes-defile 12s cubic-bezier(.3,.9,.3,1) infinite;}
@keyframes notes-defile{
  0%,16%   {transform:translateY(-430px)}
  19%,27%  {transform:translateY(-344px)}
  30%,38%  {transform:translateY(-258px)}
  41%,49%  {transform:translateY(-172px)}
  52%,60%  {transform:translateY(-86px)}
  63%,100% {transform:translateY(0)}
}

/* Chaque avis neuf glisse depuis la droite a l'instant exact ou son cran de
   colonne arrive. Chacun porte ses propres cles, sans `animation-delay` : un
   retard decale la boucle de l'element et le fait clignoter au redemarrage. */
.notes__avis:nth-child(1){animation:notes-glisse1 12s cubic-bezier(.2,.9,.3,1) infinite;}
.notes__avis:nth-child(2){animation:notes-glisse2 12s cubic-bezier(.2,.9,.3,1) infinite;}
.notes__avis:nth-child(3){animation:notes-glisse3 12s cubic-bezier(.2,.9,.3,1) infinite;}
.notes__avis:nth-child(4){animation:notes-glisse4 12s cubic-bezier(.2,.9,.3,1) infinite;}
.notes__avis:nth-child(5){animation:notes-glisse5 12s cubic-bezier(.2,.9,.3,1) infinite;}
@keyframes notes-glisse1{ 0%,60%{opacity:0;transform:translateX(26px)} 63.5%,100%{opacity:1;transform:translateX(0)} }
@keyframes notes-glisse2{ 0%,49%{opacity:0;transform:translateX(26px)} 52.5%,100%{opacity:1;transform:translateX(0)} }
@keyframes notes-glisse3{ 0%,38%{opacity:0;transform:translateX(26px)} 41.5%,100%{opacity:1;transform:translateX(0)} }
@keyframes notes-glisse4{ 0%,27%{opacity:0;transform:translateX(26px)} 30.5%,100%{opacity:1;transform:translateX(0)} }
@keyframes notes-glisse5{ 0%,16%{opacity:0;transform:translateX(26px)} 19.5%,100%{opacity:1;transform:translateX(0)} }

.notes__avis{height:86px;display:grid;grid-template-columns:30px 1fr auto;
  gap:3px 10px;align-content:center;padding:0 2px;
  border-top:1px solid var(--serp-trait);}
.notes__rond{grid-row:1/4;width:30px;height:30px;border-radius:50%;align-self:center;}
.notes__rond--1{background:linear-gradient(140deg,#cfe0ea,#eaf2f7);}
.notes__rond--2{background:linear-gradient(140deg,#e7ddc8,#f6f1e6);}
.notes__rond--3{background:linear-gradient(140deg,#dcdfe3,#f1f2f4);}
.notes__qui{font-size:13px;font-weight:500;color:#1f2126;}
.notes__avis em{font-style:normal;font-size:11px;color:var(--serp-gris);}
.notes__etoiles{color:var(--serp-or);letter-spacing:1px;font-weight:400;font-size:12px;}
.notes__avis .notes__etoiles{grid-column:2/-1;}
.notes__avis i{grid-column:2/-1;display:block;height:6px;border-radius:3px;
  background:#e9eaee;width:82%;}

@media (prefers-reduced-motion:reduce){
  .notes__score b,.notes__compte b,.notes__jauge i,
  .notes__barres i::after,.notes__colonne,.notes__avis,.serp--notes{animation:none;}
  .notes__score b{transform:translateY(-160px);}
  .notes__compte b{transform:translateY(-70px);}
  .notes__jauge i{clip-path:inset(0 4% 0 0);}
  .notes__barres i::after{width:var(--b);}
  .notes__colonne{transform:translateY(0);}
  .notes__avis{opacity:1;transform:none;}
}
/* ---------- l'ecran verrouille, visuel du bloc « Ils vous appellent » ----------
   Un vrai telephone, pas une carte blanche : coins tres arrondis, ile noire en
   haut, barre d'etat, grande horloge, et des notifications empilees comme sur
   un ecran verrouille. L'heure et la date sont celles du visiteur, posees par
   un petit script ; un ecran fige a 09:41 se repere tout de suite.
   Aucune marque, aucun logo de fabricant : c'est un telephone, pas un modele.
   Cycle de 12 s, tout en pourcentages, sans aucun retard. */
.ecran--appels{display:grid;place-items:center;padding:20px;}

.tel{position:relative;width:308px;max-width:88%;aspect-ratio:9/19.5;
  border-radius:52px;padding:16px 13px;overflow:hidden;color:#fff;
  background:
    radial-gradient(120% 70% at 18% 8%, rgba(255,255,255,.22) 0%, transparent 60%),
    radial-gradient(90% 60% at 82% 96%, rgba(168,6,244,.55) 0%, transparent 62%),
    linear-gradient(165deg,#2b1147 0%,#170a29 52%,#3a1160 100%);
  box-shadow:0 0 0 3px #1b1b1f, 0 0 0 4.5px #494954,
             0 40px 70px -32px rgba(23,10,41,.85), 0 4px 10px rgba(23,10,41,.3);}

/* l'ile noire, la barre d'etat */
.tel__ile{position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:86px;height:26px;border-radius:14px;background:#08060c;}
.tel__etat{position:absolute;top:19px;left:26px;right:26px;
  display:flex;align-items:center;justify-content:flex-end;gap:6px;z-index:2;}
.tel__reseau{display:flex;align-items:flex-end;gap:1.5px;}
.tel__reseau i{display:block;width:2.5px;background:#fff;border-radius:1px;}
.tel__reseau i:nth-child(1){height:4px;}
.tel__reseau i:nth-child(2){height:6px;}
.tel__reseau i:nth-child(3){height:8px;}
.tel__reseau i:nth-child(4){height:10px;}
.tel__wifi{width:13px;height:13px;stroke:#fff;stroke-width:1.9;fill:none;
  stroke-linecap:round;}
.tel__wifi circle{fill:#fff;stroke:none;}
.tel__pile{width:20px;height:10px;border-radius:3px;border:1.2px solid rgba(255,255,255,.75);
  padding:1.4px;display:block;}
.tel__pile i{display:block;width:72%;height:100%;border-radius:1.5px;background:#fff;}

/* la date et l'heure */
.tel__date{margin:52px 0 0;text-align:center;font-size:15px;font-weight:600;
  color:rgba(255,255,255,.88);letter-spacing:.01em;}
.tel__heure{margin:1px 0 0;text-align:center;
  font-family:Archivo,sans-serif;font-weight:700;font-size:74px;line-height:1;
  letter-spacing:-.045em;color:#fff;
  text-shadow:0 4px 30px rgba(0,0,0,.35);}

/* les notifications, en verre, empilees du plus recent au plus ancien */
.tel__notifs{margin-top:30px;}
/* La plus recente est en haut. Une notification qui arrive prend sa place en
   poussant les precedentes vers le bas : elle passe donc d'une hauteur nulle a
   sa hauteur pleine, et tout ce qui est dessous glisse. */
.tel__notif{display:grid;grid-template-columns:30px 1fr auto;gap:10px;
  align-items:center;height:0;padding:0 12px;overflow:hidden;border-radius:19px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 8px 20px -12px rgba(0,0,0,.5);
  opacity:0;}
.tel__appli{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,.28);}
.tel__appli svg{width:17px;height:17px;stroke:#fff;stroke-width:1.9;fill:none;
  stroke-linecap:round;stroke-linejoin:round;}
.tel__texte b{display:block;font-family:Archivo,sans-serif;font-weight:700;
  font-size:13px;letter-spacing:-.01em;color:#fff;}
.tel__texte u{display:block;text-decoration:none;font-size:11.5px;
  color:rgba(255,255,255,.82);margin-top:2px;}
.tel__notif em{font-style:normal;font-size:10.5px;color:rgba(255,255,255,.66);
  align-self:start;white-space:nowrap;}

/* elles tombent l'une apres l'autre, la plus recente en dernier et en haut */
.tel__notif--avis{animation:tel-notif1 12s cubic-bezier(.2,1.2,.35,1) infinite;}
.tel__notif--demande{animation:tel-notif2 12s cubic-bezier(.2,1.2,.35,1) infinite;}
.tel__notif--devis{animation:tel-notif3 12s cubic-bezier(.2,1.2,.35,1) infinite;}
.tel__notif--tel{animation:tel-notif4 12s cubic-bezier(.2,1.2,.35,1) infinite;}
@keyframes tel-notif1{ 0%,10%{height:0;margin-bottom:0;opacity:0;transform:scale(.92)} 16%,100%{height:60px;margin-bottom:9px;opacity:1;transform:scale(1)} }
@keyframes tel-notif2{ 0%,26%{height:0;margin-bottom:0;opacity:0;transform:scale(.92)} 32%,100%{height:60px;margin-bottom:9px;opacity:1;transform:scale(1)} }
@keyframes tel-notif3{ 0%,42%{height:0;margin-bottom:0;opacity:0;transform:scale(.92)} 48%,100%{height:60px;margin-bottom:9px;opacity:1;transform:scale(1)} }
@keyframes tel-notif4{ 0%,58%{height:0;margin-bottom:0;opacity:0;transform:scale(.92)} 64%,100%{height:60px;margin-bottom:9px;opacity:1;transform:scale(1)} }

@media(max-width:860px){ .tel{width:270px;padding:14px 11px;border-radius:46px;}
  .tel__heure{font-size:64px;} .tel__date{margin-top:44px;} }
@media (prefers-reduced-motion:reduce){
  .tel__notif{animation:none;opacity:1;height:60px;margin-bottom:9px;transform:none;}
}

/* ---------- questions ---------- */
.question{border-bottom:1px solid var(--trait);}
.question summary{
  cursor:pointer;list-style:none;padding:22px 42px 22px 0;position:relative;
  font-family:Archivo,sans-serif;font-weight:700;font-size:18px;letter-spacing:-.022em;
}
.question summary::-webkit-details-marker{display:none;}
.question summary::after{content:"+";position:absolute;right:6px;top:18px;
  font-size:25px;font-weight:400;color:var(--violet);}
.question[open] summary::after{content:"\2013";}
.question p{color:var(--encre-douce);font-size:16px;margin:0 0 22px;max-width:72ch;}

/* ---------- appel final ---------- */
/* Le dernier appel a l'action n'a pas besoin de la respiration d'une section
   pleine : il tient en trois lignes et un bouton, et il est le dernier avant le
   pied de page. La mesure du titre est large pour qu'il tienne sur une ligne. */
.final{text-align:center;background:var(--violet);color:#fff;
  padding-block:clamp(52px,5.6vw,80px);}
/* Mesure libre : le titre fait 1072 px a 60 px, la colonne en fait 1440. C'est
   la bride en `ch` qui le cassait en deux, pas la place. */
.final h2{color:#fff;max-width:none;margin:0 auto 16px;text-wrap:balance;}
.final .sous{font-size:18px;opacity:.93;max-width:52ch;margin:0 auto 26px;}

/* ---------- pied ---------- */
.pied{background:var(--encre);color:#9a9aa4;padding-block:56px 38px;font-size:14.5px;}
.pied a{color:#d7d7de;text-decoration:none;}
.pied a:hover{color:#fff;text-decoration:underline;}
.pied .haut{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;
  padding-bottom:30px;border-bottom:1px solid #2e2e34;}
.pied .logo{color:#fff;}
.pied .liens{display:flex;gap:24px;flex-wrap:wrap;}
.pied .bas{padding-top:24px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;}


/* ---------- ce qu'on fait, trois colonnes ---------- */
/* Le pupitre. Rien n'y est pose au hasard : les neuf outils sont ranges dans
   les trois groupes qui les expliquent, et les trois groupes descendent vers un
   socle unique qui dit ce que ca produit et ou ca arrive. Les billes qui
   descendent les traits disent que ca alimente en continu, pas une fois. */
/* Le pupitre. Deux ancres de couleur, une en haut une en bas, et entre les deux
   trois cartes blanches qui restent lisibles : le sceau noir dit qui fait tourner
   le systeme, le socle violet dit ce qu'il rapporte. Le point qui bat et les
   billes qui descendent disent que ca tourne maintenant. */
.pupitre{margin-top:42px;}

/* Le reacteur. Les trois colonnes ne se jettent pas directement dans le socle :
   elles passent par la barre noire, qui est ce que le client paie tous les mois.
   Le balayage violet la traverse sans fin, donc elle tourne pendant qu'il lit. */
.reacteur{position:relative;overflow:hidden;margin:0 0 22px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 13px;
  padding:17px 26px;border-radius:var(--r-l);background:var(--encre);color:#fff;
  font-family:Archivo,sans-serif;font-weight:700;font-size:17px;letter-spacing:-.02em;
  text-align:center;}
.reacteur::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(168,6,244,0) 38%,rgba(201,88,255,.5) 50%,
    rgba(168,6,244,0) 62%);
  transform:translateX(-100%);animation:reacteur-balayage 3.4s linear infinite;}
@keyframes reacteur-balayage{ to{transform:translateX(100%)} }
.reacteur__detail{font-family:Inter,sans-serif;font-weight:400;font-size:14.5px;
  letter-spacing:0;color:rgba(255,255,255,.74);}
.reacteur__pouls{width:10px;height:10px;border-radius:50%;background:#d98bff;flex:none;
  animation:pupitre-pouls 2.2s ease-out infinite;}
@keyframes pupitre-pouls{
  0%{box-shadow:0 0 0 0 rgba(217,139,255,.6)}
  70%{box-shadow:0 0 0 11px rgba(217,139,255,0)}
  100%{box-shadow:0 0 0 0 rgba(217,139,255,0)}
}
@media (prefers-reduced-motion:reduce){
  .reacteur::after{display:none;}
  .reacteur__pouls{animation:none;}
}

/* Les cinq barres qui montent dans le socle : ce que le reacteur fait grossir. */
.pupitre__pousse{display:flex;align-items:flex-end;gap:4px;height:28px;
  margin-left:2px;flex:none;}
.pupitre__pousse i{width:6px;border-radius:2px;background:rgba(168,6,244,.22);height:7px;
  animation:pupitre-pousse 4.8s ease-out infinite;}
.pupitre__pousse i:nth-child(1){--h:10px;animation-delay:0s}
.pupitre__pousse i:nth-child(2){--h:14px;animation-delay:.12s}
.pupitre__pousse i:nth-child(3){--h:18px;animation-delay:.24s}
.pupitre__pousse i:nth-child(4){--h:23px;animation-delay:.36s}
.pupitre__pousse i:nth-child(5){--h:28px;animation-delay:.48s}
@keyframes pupitre-pousse{
  0%,2%{height:7px;background:rgba(168,6,244,.22)}
  9%,78%{height:var(--h);background:var(--violet)}
  90%,100%{height:7px;background:rgba(168,6,244,.22)}
}
@media (prefers-reduced-motion:reduce){
  .pupitre__pousse i{animation:none;height:var(--h);background:var(--violet);}
}

.pupitre__grille{display:grid;grid-template-columns:1fr 52px 1fr 52px 1fr;gap:0;}
/* Les trois fiches sont allumees en permanence : ce sont trois etapes qui
   existent toutes les trois, pas trois etats qui se succedent. Ce qui bouge,
   c'est le passage de l'une a l'autre, et rien d'autre. */
.pupitre__grille article{position:relative;z-index:1;
  background:#fff;border:1px solid var(--violet);
  border-radius:var(--r-l);padding:22px 24px 24px;
  box-shadow:0 0 0 4px rgba(168,6,244,.09),0 18px 34px -22px rgba(108,3,166,.42);
  animation:pupitre-bond 9.6s ease-in-out infinite;}
.pupitre__grille article:nth-of-type(1){animation-delay:0s;}
.pupitre__grille article:nth-of-type(2){animation-delay:3.4s;}
.pupitre__grille article:nth-of-type(3){animation-delay:6.8s;}
/* L'etape qu'on lit grossit et reste grossie deux secondes. Ensuite la lumiere
   part vers la suivante. Le cycle fait 9,6 s : 3 fois 2 s de lecture, 2 fois
   1 s de trajet, une pause. Les pourcentages sont ces secondes sur 9,6. */
@keyframes pupitre-bond{
  0%           {transform:scale(1);box-shadow:0 0 0 4px rgba(168,6,244,.09),0 18px 34px -22px rgba(108,3,166,.42)}
  4.2%,20.8%   {transform:scale(1.03);box-shadow:0 0 0 7px rgba(168,6,244,.17),0 30px 52px -22px rgba(108,3,166,.58)}
  25%,100%     {transform:scale(1);box-shadow:0 0 0 4px rgba(168,6,244,.09),0 18px 34px -22px rgba(108,3,166,.42)}
}
@media (prefers-reduced-motion:reduce){ .pupitre__grille article{animation:none;} }

.pupitre__titre{font-family:Archivo,sans-serif;font-weight:700;font-size:18px;
  letter-spacing:-.02em;margin:0 0 15px;}
.pupitre__titre i{font-style:normal;font-weight:800;color:var(--violet);
  font-size:19px;margin-right:3px;}
.pupitre__grille ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;}
.pupitre__grille li{display:flex;align-items:center;gap:10px;
  font-size:14.5px;font-weight:500;color:var(--encre);}
.pupitre svg{width:17px;height:17px;flex:none;stroke:var(--violet);stroke-width:1.7;
  fill:none;stroke-linecap:round;stroke-linejoin:round;}

/* Le reflet qui glisse d'une etape a la suivante, puis vers l'entreprise.
   Une piste violette pale, un eclat clair qui la traverse, et les trois
   partent l'un apres l'autre sur un cycle de 5,4 s. */
/* La fleche laisse 14 px de blanc de chaque cote : la fiche gagne 7 px par
   bord quand elle grossit, donc elle ne mord jamais dessus. */
.pupitre__lien{position:relative;align-self:center;height:3px;margin-inline:14px;}
.pupitre__lien::after{content:"";position:absolute;right:-1px;top:50%;
  transform:translateY(-50%);border:7px solid transparent;border-left-color:var(--violet);}
.pupitre__lien span{position:absolute;inset:0;overflow:hidden;border-radius:2px;
  background:rgba(168,6,244,.26);}
.pupitre__lien i{position:absolute;top:0;bottom:0;left:0;width:70%;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.95) 38%,
    var(--violet) 58%,rgba(168,6,244,0) 100%);
  transform:translateX(-115%);
  animation:pupitre-glisse 9.6s cubic-bezier(.4,0,.2,1) infinite;animation-delay:2.4s;}
.pupitre__lien--2 i{animation-delay:5.8s;}
@keyframes pupitre-glisse{
  0%   {transform:translateX(-115%)}
  10.4% {transform:translateX(185%)}
  100% {transform:translateX(185%)}
}
@media (prefers-reduced-motion:reduce){ .pupitre__lien i{display:none;} }

/* Le socle. Ce n'est plus un pave de couleur pleine sur toute la largeur : un
   seul encadre, plus petit, centre, sur un degrade violet tres clair. Les deux
   choses qu'il porte, ce que ca rapporte et ou ca arrive, tiennent ensemble
   parce que l'une ne va pas sans l'autre. */
.pupitre__socle{display:flex;align-items:center;gap:26px;margin:26px auto 0;
  width:fit-content;max-width:100%;border-radius:var(--r-l);padding:18px 30px;
  border:1px solid var(--violet-clair);
  background:linear-gradient(112deg,#f3e2ff 0%,#fdf8ff 48%,#ecd6ff 100%);
  box-shadow:0 14px 34px -26px rgba(108,3,166,.45);}
.pupitre__bloc{display:flex;align-items:center;gap:13px;flex:none;}

.pupitre__bloc svg{width:23px;height:23px;stroke:var(--violet);stroke-width:1.6;}
/* Gris clair sur violet clair, ca ne se lisait pas : on descend a un gris
   presque noir, legerement tire vers le violet du fond. */
.pupitre__bloc p{margin:0;font-size:13.5px;color:#413849;white-space:nowrap;}
.pupitre__bloc strong{display:block;font-family:Archivo,sans-serif;font-weight:800;
  font-size:17px;letter-spacing:-.02em;color:var(--encre);margin-bottom:1px;}
.pupitre__bloc--appli strong{font-size:17px;}
.pupitre__sep{width:1px;align-self:stretch;flex:none;background:var(--violet-clair);}

@media(max-width:900px){
  .pupitre__grille{grid-template-columns:1fr;gap:16px;}
  .pupitre__lien{height:26px;width:3px;justify-self:center;}
  .pupitre__lien::after{right:auto;top:auto;bottom:-1px;left:50%;
    transform:translateX(-50%);border-left-color:transparent;border-top-color:var(--violet);}
  .pupitre__lien i{left:0;right:0;top:0;bottom:auto;width:auto;height:70%;
    background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.95) 38%,
      var(--violet) 58%,rgba(168,6,244,0) 100%);
    transform:translateY(-115%);animation-name:pupitre-descend;}
  .reacteur{font-size:16px;padding:15px 20px;}
  .pupitre__socle{flex-direction:column;align-items:flex-start;gap:18px;
    width:auto;padding:20px 22px;}
  .pupitre__bloc p{white-space:normal;}
  .pupitre__sep{width:100%;height:1px;align-self:auto;}
}


/* ---------- mot mis en avant dans le titre ---------- */
.accent{color:var(--violet);}

/* Le dernier mot tourne. Reglages repris de la reference :
   fondu et glissement de 0,28 s, un mot toutes les 2,4 s.
   `inline-block` est indispensable pour que la transformation s'applique. */
/* Le mot reserve la largeur du plus long des quatre, sinon la ligne entiere
   danse a chaque changement. Il est CENTRE dans cette reserve, pas cale a
   gauche : cale a gauche, tout l'espace excedentaire se retrouvait a droite du
   mot et la ligne, centree, paraissait pousse vers la gauche. Centre, l'ecart
   se partage de part et d'autre et la ligne ne bouge plus d'un pixel.
   Le prix a payer est un blanc variable autour du mot, d'ou des mots de
   longueurs voisines dans la liste du script. */
/* cale a gauche : le mot reste colle au « de » qui le precede.
   Le recentrage de la ligne est fait en JS, voir index.html. */
.tourne{
  display:inline-block;text-align:left;
  transition:opacity .28s ease,transform .28s ease;
}
.tourne[data-sort="oui"]{opacity:0;transform:translateY(-.22em);}
@media (prefers-reduced-motion:reduce){
  .tourne{transition:none;}
  .titre__ligne{transition:none;}
}


/* ---------- questions, en deux colonnes ---------- */
.questions-grille{
  display:grid;grid-template-columns:minmax(300px,420px) 1fr;
  gap:clamp(28px,5vw,80px);align-items:start;margin-top:8px;
}
.questions-grille .chapeau{display:block;position:sticky;top:120px;}
.questions-grille .chapeau h2{max-width:14ch;}
@media(max-width:1000px){
  .questions-grille{grid-template-columns:1fr;gap:28px;}
  .questions-grille .chapeau{position:static;}
}

/* ---------- pages de texte : mentions legales, confidentialite ---------- */
.page{padding-block:clamp(40px,5vw,72px) clamp(56px,7vw,96px);}
.page .contenant{max-width:860px;}
.page h1{font-size:clamp(32px,4.6vw,52px);margin-bottom:10px;}
.page .maj{color:var(--encre-douce);font-size:15px;margin-bottom:38px;}
.page h2{font-size:clamp(21px,2.3vw,27px);margin:44px 0 14px;}
.page h3{font-size:18px;margin:26px 0 8px;}
.page p,.page li{color:var(--encre-douce);font-size:16.5px;}
.page a{color:var(--violet);}
.page ul{list-style:none;padding:0;margin:0 0 18px;}
.page ul li{padding-left:18px;position:relative;margin-bottom:8px;}
.page ul li::before{content:"";position:absolute;left:0;top:10px;
  width:6px;height:6px;border-radius:50%;background:var(--violet);}
.page .table{border:1px solid var(--trait);border-radius:var(--r-m);overflow:hidden;margin:0 0 18px;}
.page .table div{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:18px;
  padding:12px 18px;border-top:1px solid var(--trait);font-size:16px;}
.page .table div:first-child{border-top:0;}
.page .table dt{color:var(--encre-douce);margin:0;}
.page .table dd{margin:0;color:var(--encre);font-weight:500;}
@media(max-width:620px){ .page .table div{grid-template-columns:1fr;gap:3px;} }

/* Un bouton posé dans une page de texte (404) garde ses couleurs : .page a le passait en violet sur violet (08/10/2026). */
.page a.bouton{color:#fff;text-decoration:none;}

/* ---------- la page de la vidéo d'avant visio, /rendez-vous (18/10/2026) ----------
   Fabriquée par outils/page_rendez_vous.py. Ouverte depuis un SMS, donc pensée pour
   le téléphone d'abord : une colonne, la vidéo qui bouge dès l'ouverture, un seul geste
   demandé, et aucun menu qui ferait sortir de la page. */
.rv{background:var(--blanc);padding-top:0;--encre-douce:#3d3d46;}  /* le corps garde 86 px pour l'en-tete fixe de l'accueil, absent ici */
.rv-haut{display:flex;justify-content:center;padding:16px var(--gouttiere) 0;}
.rv-haut .logo span{font-size:24px;}
.rv-colonne{max-width:760px;margin:0 auto;padding-inline:max(16px,var(--gouttiere));}

/* l'ouverture */
.rv-ouverture{padding-block:14px clamp(28px,5vw,56px);text-align:center;}
.rv-bandeau{display:inline-block;margin:0 0 14px;background:var(--violet);color:#fff;
  font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(15px,3.9vw,19px);letter-spacing:-.01em;
  line-height:1.2;padding:10px 18px;border-radius:var(--r-m);text-transform:uppercase;
  box-shadow:0 14px 30px -14px rgba(168,6,244,.7);}
.rv-ouverture h1{font-size:clamp(29px,7.4vw,52px);line-height:1.04;letter-spacing:-.045em;text-wrap:balance;margin:0 0 18px;}
.rv-ouverture h1 .accent{color:var(--violet);}

.rv-video{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;
  border-radius:var(--r-l);overflow:hidden;background:#241a2e;cursor:pointer;
  box-shadow:0 0 0 3px var(--violet),0 30px 60px -28px rgba(27,27,27,.6);}
.rv-video--joue{cursor:default;}
.rv-video wistia-player{display:block;width:100%;height:100%;}
.rv-video:focus-visible{outline:3px solid var(--encre);outline-offset:4px;}
.rv-video__apercu{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.rv-video__voile{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(27,27,27,.05),rgba(27,27,27,.35));}
.rv-video__boite{display:flex;align-items:center;gap:12px;background:var(--violet);color:#fff;
  padding:12px 18px 12px 14px;border-radius:var(--r-m);text-align:left;
  box-shadow:0 0 0 0 rgba(168,6,244,.6),0 16px 34px -10px rgba(0,0,0,.55);
  animation:rv-appel 1.8s ease-out infinite;}
.rv-video__texte{display:flex;flex-direction:column;font-size:15px;line-height:1.25;}
.rv-video__texte b{font-family:Archivo,sans-serif;font-weight:800;font-size:17px;letter-spacing:-.01em;}
/* le haut-parleur : un carré, un cône et deux ondes, dessinés en CSS */
.rv-video__haut-parleur{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:#fff;}
.rv-video__haut-parleur::before{content:"";position:absolute;left:8px;top:12px;width:5px;height:10px;background:var(--violet);
  box-shadow:3px 0 0 0 var(--violet);clip-path:none;}
.rv-video__haut-parleur::after{content:"";position:absolute;left:12px;top:8px;border-right:9px solid var(--violet);
  border-top:9px solid transparent;border-bottom:9px solid transparent;}
@keyframes rv-appel{0%{box-shadow:0 0 0 0 rgba(168,6,244,.55),0 16px 34px -10px rgba(0,0,0,.55);}
  100%{box-shadow:0 0 0 18px rgba(168,6,244,0),0 16px 34px -10px rgba(0,0,0,.55);}}
.rv-video:hover .rv-video__boite{background:var(--violet-fonce);}
.rv-video__duree{position:absolute;right:10px;bottom:10px;background:rgba(27,27,27,.85);color:#fff;
  font-size:14px;font-weight:600;padding:4px 9px;border-radius:var(--pilule);}
.rv-lancer{width:100%;max-width:460px;margin-top:16px;font-size:17px;padding:17px 26px;
  box-shadow:0 18px 34px -16px rgba(168,6,244,.85);}
.rv-lancer__icone{width:0;height:0;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;}
@media (prefers-reduced-motion:reduce){ .rv-video__boite{animation:none;} }

/* les slides : texte blanc ou presque blanc sur fond sombre, jamais de gris pâle ;
   « Suivant » est un gros bouton visible, pas un geste à deviner */
.rv-slides{padding-block:clamp(26px,5vw,52px) clamp(30px,5vw,56px);background:var(--encre);color:#fff;overflow:hidden;}
.rv-slides__tete{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:16px;}
.rv-slides__tete h2{font-size:clamp(23px,5.4vw,32px);line-height:1.12;margin:0;color:#fff;}
.rv-slides__tete h2 span{display:block;color:#dcbcff;}
.rv-slides__compteur{flex:none;font-size:15px;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;}
.rv-slides__compteur b{color:#fff;font-size:17px;}
.rv-piste{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding:4px max(16px,calc((100vw - 760px)/2 + var(--gouttiere)));
  scroll-padding-inline:max(16px,calc((100vw - 760px)/2 + var(--gouttiere)));scrollbar-width:none;}
.rv-piste::-webkit-scrollbar{display:none;}
.rv-piste:focus-visible{outline:2px solid #dcbcff;outline-offset:-2px;}
.rv-slide{position:relative;flex:0 0 min(84vw,390px);scroll-snap-align:start;
  background:#2d2634;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-xl);padding:20px 18px 22px;
  display:flex;flex-direction:column;gap:11px;}
.rv-slide__tag{align-self:flex-start;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--violet);padding:6px 11px;border-radius:var(--pilule);}
.rv-slide h3{font-size:25px;line-height:1.14;letter-spacing:-.025em;margin:2px 0 0;color:#fff;}
.rv-slide p{margin:0;color:#f3f0f7;font-size:17.5px;line-height:1.45;}
.rv-slide .rv-slide__fort{color:#fff;font-weight:700;margin-top:auto;font-size:18.5px;line-height:1.35;}
.rv-slide .rv-slide__prix{font-family:Archivo,sans-serif;font-weight:800;font-size:60px;letter-spacing:-.04em;line-height:1;color:#fff;margin:14px 0 10px;}
.rv-slide .rv-slide__prix span{display:block;font-size:19px;letter-spacing:0;color:#fff;margin-top:8px;font-family:Inter,sans-serif;font-weight:600;}
.rv-slide .rv-slide__q{color:#fff;font-weight:700;font-size:18px;margin-top:6px;}
.rv-slide__capture{display:block;width:100%;height:auto;max-height:190px;object-fit:cover;object-position:top;
  border-radius:var(--r-m);background:#fff;}
.rv-slide--violet{background:var(--violet);border-color:transparent;}
.rv-slide--violet .rv-slide__tag{background:#fff;color:var(--violet);}
.rv-slide--violet .bouton{margin-top:auto;min-height:54px;font-size:16.5px;white-space:normal;text-align:center;}
.rv-slide.rv-slide--violet .rv-coches li::before{border-color:#fff;}
.rv-slide .rv-compare{font-size:15.5px;}
.rv-slide .rv-compare>div{grid-template-columns:1fr 56px 56px;padding:8px 10px;}
.rv-recherche{display:grid;gap:9px;margin:6px 0 4px;}
.rv-recherche span{display:flex;align-items:center;gap:10px;background:#fff;color:var(--encre);border-radius:var(--pilule);
  padding:12px 16px;font-size:16.5px;font-weight:600;}
.rv-recherche span::before{content:"";flex:none;width:11px;height:11px;border:2px solid #55555f;border-radius:50%;
  box-shadow:4px 4px 0 -2.5px #55555f;}
.rv-points{display:flex;justify-content:center;gap:8px;margin:14px 0 12px;}
.rv-points i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.35);transition:width .2s ease,background .2s ease;}
.rv-points i.rv-point--actif{width:28px;border-radius:var(--pilule);background:#fff;}
.rv-slides__boutons{display:grid;grid-template-columns:1fr 1.6fr;gap:12px;}
.rv-precedent,.rv-suivant{min-height:56px;border-radius:var(--pilule);font:700 17.5px/1 Inter,sans-serif;cursor:pointer;
  transition:background .18s ease,opacity .18s ease;}
.rv-precedent{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6);}
.rv-suivant{background:var(--violet);color:#fff;border:0;box-shadow:0 14px 30px -14px rgba(168,6,244,.9);}
.rv-suivant:hover{background:var(--violet-fonce);}
.rv-precedent:disabled,.rv-suivant:disabled{opacity:.35;cursor:default;box-shadow:none;}
.rv-precedent:focus-visible,.rv-suivant:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.rv-slides__aide{margin:12px 0 0;text-align:center;font-size:15px;color:#fff;}
@media (prefers-reduced-motion:reduce){ .rv-points i{transition:none;} }

/* coches, partout */
.rv-coches{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.rv-coches li{position:relative;padding-left:30px;font-size:16.5px;}
.rv-coches li::before{content:"";position:absolute;left:4px;top:.42em;width:12px;height:7px;
  border-left:2.5px solid var(--violet);border-bottom:2.5px solid var(--violet);transform:rotate(-45deg);}
.rv-slide .rv-coches li{color:#fff;font-size:17.5px;}
.rv-slide .rv-coches li::before{border-color:#dcbcff;}

/* le SMS d'avis, dessiné */
.rv-sms{background:#fff;border-radius:22px;padding:14px;box-shadow:0 20px 40px -24px rgba(0,0,0,.6);max-width:330px;}
.rv-sms p{margin:0;background:#e9e9ee;color:var(--encre) !important;border-radius:18px 18px 18px 6px;padding:11px 14px;font-size:15px;line-height:1.4;}
.rv-sms--petit{margin:6px 0;}

/* les blocs */
.rv-bloc{padding-block:clamp(48px,7vw,88px);}
.rv-bloc--serre{padding-block:clamp(30px,5vw,52px);}
.rv-bloc--creme{background:var(--creme);}
.rv-bloc--nuit{background:#17121c;color:#fff;}
.rv-bloc h2{font-size:clamp(27px,5.4vw,42px);line-height:1.08;letter-spacing:-.035em;text-wrap:balance;margin:0 0 18px;}
.rv-bloc--nuit h2{color:#fff;}
.rv-bloc--nuit .etiquette{color:#dcbcff;}
.rv-texte{font-size:17.5px;color:var(--encre-douce);margin:0 0 18px;}
.rv-bloc--nuit .rv-texte{color:#f0edf4;}

.rv-action{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;background:var(--violet-pale);
  border:2px solid var(--violet);border-radius:var(--r-l);padding:22px 20px;}
.rv-action__numero{width:40px;height:40px;border-radius:50%;background:var(--violet);color:#fff;font-weight:800;
  display:grid;place-items:center;font-family:Archivo,sans-serif;font-size:19px;}
.rv-action p{margin:0 0 14px;font-size:16.5px;}
.rv-action .rv-action__titre{font-family:Archivo,sans-serif;font-weight:800;font-size:21px;letter-spacing:-.02em;margin:6px 0 6px;}

.rv-sites{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px;}
.rv-sites figure{margin:0;position:relative;}
.rv-sites img{width:100%;height:auto;display:block;border-radius:var(--r-m);
  border:1px solid var(--trait);box-shadow:0 18px 36px -24px rgba(27,27,27,.5);}
.rv-sites figcaption{font-size:15px;color:var(--encre-douce);margin-top:8px;line-height:1.3;}
.rv-sites figcaption b{display:block;color:var(--encre);font-family:Archivo,sans-serif;font-size:16px;}
.rv-sous{font-size:21px;margin:40px 0 0;text-align:center;}
.rv .temoins__grille{grid-template-columns:repeat(3,1fr);max-width:620px;gap:12px;margin-top:18px;}

.rv-chose{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center;margin-top:22px;
  background:#231c29;border:1px solid rgba(255,255,255,.07);border-radius:var(--r-xl);padding:24px;}
.rv-chose__numero{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--violet);
  color:#fff;font-family:Archivo,sans-serif;font-weight:800;font-size:20px;margin-bottom:12px;}
.rv-chose h3{font-size:22px;line-height:1.15;margin:0 0 8px;color:#fff;}
.rv-chose p{margin:0;color:#f0edf4;font-size:17px;}
.rv-chose__visuel{display:grid;gap:12px;justify-items:start;}
.rv-chose .rv-chose__legende{font-size:13.5px;text-transform:uppercase;letter-spacing:.08em;color:#dcbcff;font-weight:700;}
.rv-chose .rv-chose__legende--bas{text-transform:none;letter-spacing:0;font-size:17px;color:#fff;}
.rv-capture{display:block;width:100%;max-width:360px;height:auto;border-radius:var(--r-m);background:#fff;}
.rv-compare{width:100%;display:grid;gap:5px;font-size:16px;}
.rv-compare>div{display:grid;grid-template-columns:1fr 72px 72px;gap:6px;align-items:center;
  background:rgba(255,255,255,.09);border-radius:var(--r-s);padding:11px 12px;color:#fff;}
.rv-compare .rv-compare__tete{background:none;padding-block:0 2px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff;}
.rv-compare .rv-compare__tete span:last-child{color:#dcbcff;}
.rv-compare .oui,.rv-compare .non{font-weight:700;text-align:center;}
.rv-compare .oui{color:#8ff0b6;}
.rv-compare .non{color:#ffa3a3;}

.rv-prix-carte{background:linear-gradient(140deg,var(--violet) 0%,#6d02a6 100%);color:#fff;border-radius:var(--r-xl);
  padding:clamp(26px,5vw,44px);box-shadow:0 30px 60px -30px rgba(168,6,244,.8);}
.rv-prix-carte__tag{font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#f0dcff;}
.rv-prix{font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(52px,12vw,80px);letter-spacing:-.045em;line-height:1;margin:12px 0 22px;}
.rv-prix span{font-size:.28em;letter-spacing:0;font-weight:700;color:#f0dcff;}
.rv-prix-carte .rv-coches li::before{border-color:#fff;}
.rv-prix-carte__mot{margin:20px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.25);font-size:16px;color:#f6eaff;}

.rv-fil{display:grid;gap:10px;margin-top:6px;}
.rv-bulle{margin:0;max-width:86%;padding:13px 16px;font-size:16px;line-height:1.45;}
.rv-bulle p{margin:0;}
.rv-bulle p+p{margin-top:8px;}
.rv-bulle--eux{justify-self:start;background:#fff;border:1px solid var(--trait);border-radius:20px 20px 20px 6px;font-weight:600;}
.rv-bulle--nous{justify-self:end;background:var(--violet);color:#fff;border-radius:20px 20px 6px 20px;margin-bottom:10px;}

.rv-deroule{list-style:none;counter-reset:pas;margin:0 0 20px;padding:0;display:grid;gap:0;}
.rv-deroule li{counter-increment:pas;position:relative;padding:0 0 22px 56px;color:var(--encre-douce);}
.rv-deroule li::before{content:counter(pas);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;
  background:var(--violet-pale);color:var(--violet);font-weight:800;display:grid;place-items:center;border:2px solid var(--violet);}
.rv-deroule li:not(:last-child)::after{content:"";position:absolute;left:19px;top:40px;bottom:2px;width:2px;background:var(--violet-clair);}
.rv-deroule b{display:block;color:var(--encre);font-family:Archivo,sans-serif;font-size:18px;padding-top:6px;}

.rv-signature{display:grid;grid-template-columns:120px 1fr;gap:22px;align-items:center;margin-top:30px;
  background:#fff;border:1px solid var(--trait);border-radius:var(--r-l);padding:20px;}
.rv-signature img{width:120px;height:150px;object-fit:cover;object-position:top;border-radius:var(--r-m);background:var(--ciment);}
.rv-signature p{margin:0 0 10px;font-size:16.5px;}
.rv-signature__nom b{display:block;font-family:Archivo,sans-serif;}
.rv-signature__nom span{font-size:14px;color:var(--encre-douce);}
.rv-pied{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  padding:26px max(16px,var(--gouttiere));background:var(--encre);color:#9a9aa4;font-size:14px;}
.rv-pied a{color:#d7d7de;}

@media(max-width:640px){
  .rv-chose{grid-template-columns:1fr;padding:20px;}
}
@media(max-width:560px){
  .rv-sites{gap:12px;}
  .rv-sites figcaption{font-size:14px;}
  .rv-signature{grid-template-columns:1fr;text-align:center;}
  .rv-signature img{margin:0 auto;}
  .rv-action .bouton,.rv-signature .bouton{width:100%;}
  .rv .temoin__cadre{border-radius:var(--r-m);}
  .rv .temoin__lire{width:40px;height:40px;}
  .rv .temoin__lire::after{border-left-width:12px;border-top-width:7.5px;border-bottom-width:7.5px;}
  .rv .temoin__nom{font-size:14.5px;margin-top:8px;}
}