/* ==========================================================================
   Virtuo360 v10. Signature : le chemin et le repere.
   Une seule ambiance claire, un bleu maitre (celui du logo), un pied de page
   bleu nuit et rien d'autre de sombre. Voir panel/1-design.md et SPEC-v10.md.
   ========================================================================== */

:root{
  --fond:#fbfaf7;
  --surface:#ffffff;
  --surface-2:#f3f1ec;
  --bleu-pale:#eaf3fb;

  --encre:#1b2430;
  --texte:#2f3640;
  --gris:#58585b;
  --sourdine:#65696f;
  --ligne:#e6e2da;
  --ligne-bleue:#d5e6f5;

  --bleu:#0f75bd;
  --bleu-texte:#0d6aad;
  --bleu-fonce:#0b5c95;
  --bleu-nuit:#0a3d63;

  --vert:#056839;
  --jaune:#f8c70d;
  --rouge:#c01e30;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;

  --t-micro:13px;
  --t-petit:14.5px;
  --t-corps:16.5px;
  --t-h3:21px;

  --largeur:1160px;
  --largeur-texte:720px;
  --gouttiere:clamp(20px,4vw,40px);

  --r-s:8px; --r-m:16px; --r-l:24px; --r-pilule:999px;

  --ombre-1:0 1px 2px rgba(27,36,48,.04), 0 2px 8px rgba(27,36,48,.04);
  --ombre-2:0 8px 24px -8px rgba(27,36,48,.12), 0 2px 6px rgba(27,36,48,.04);
  --ombre-3:0 32px 64px -24px rgba(10,61,99,.28), 0 4px 12px rgba(27,36,48,.05);
  --ombre-bleue:0 8px 24px -8px rgba(15,117,189,.35);

  --section:clamp(72px,9vw,116px);
  --section-serree:clamp(48px,6vw,76px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--sans);font-size:var(--t-corps);line-height:1.6;
  color:var(--texte);background:var(--fond);overflow-x:clip;padding-top:70px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,video,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--bleu);color:#fff}
:focus-visible{outline:2px solid var(--bleu);outline-offset:3px;border-radius:4px}

/* --- titres ------------------------------------------------------------- */
h1,h2,h3,.chiffre{font-family:var(--serif);color:var(--encre);font-optical-sizing:auto;font-weight:600;letter-spacing:-.005em}
h1{font-size:clamp(32px,3.9vw,54px);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:clamp(25px,2.9vw,38px);line-height:1.15;letter-spacing:-.015em;text-wrap:balance}
h3{font-size:var(--t-h3);line-height:1.25;letter-spacing:-.01em;font-weight:500;text-wrap:balance}
h4{font:600 var(--t-petit)/1.3 var(--sans);color:var(--encre)}
p{max-width:68ch;text-wrap:pretty}
strong{font-weight:600;color:var(--encre)}

.lead{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--gris);max-width:62ch;text-wrap:pretty}
.surtitre{display:inline-flex;align-items:center;gap:8px;font:600 var(--t-micro)/1.15 var(--sans);
  letter-spacing:.08em;text-transform:uppercase;color:var(--bleu-texte)}
.note{font:500 var(--t-petit)/1.45 var(--sans);color:var(--sourdine);text-wrap:balance}
.centre{text-align:center}
.hors-ecran{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.centre .lead,.centre p,.centre h1,.centre h2,.centre h3,
p.centre,.note.centre,
.heros h1,.heros .lead,.heros p,.heros .note,
.scene .legende{margin-left:auto;margin-right:auto}
.centre .cta,.heros .cta,.centre form .btn{justify-content:center}
.centre form .btn{display:flex;margin-left:auto;margin-right:auto}

/* --- mise en page ------------------------------------------------------- */
.wrap{max-width:var(--largeur);margin:0 auto;padding:0 var(--gouttiere)}
.wrap-texte{max-width:var(--largeur-texte);margin:0 auto;padding:0 var(--gouttiere)}
section{padding:var(--section) 0;position:relative}
section.serree{padding:var(--section-serree) 0}
.bande{background:var(--surface-2);border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.tete{max-width:min(720px,100%);margin-bottom:clamp(36px,4.5vw,56px)}
.centre .tete,.tete.centre{margin-left:auto;margin-right:auto}
.tete .surtitre{margin-bottom:14px}
.tete .lead{margin-top:16px}
.grille{display:grid;gap:24px}
.grille>*{min-width:0}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
/* Cinq cartes sur trois colonnes : le vide a droite se lit comme une carte
   manquante. Une grille ne centre pas une derniere ligne incomplete, un flex
   oui, et les cartes gardent leur largeur. */
.g3:has(>:last-child:nth-child(5)){display:flex;flex-wrap:wrap;justify-content:center}
.g3:has(>:last-child:nth-child(5))>*{flex:0 1 calc((100% - 48px)/3)}
.g4{grid-template-columns:repeat(4,1fr)}
.g-7-5{grid-template-columns:7fr 5fr;gap:clamp(32px,5vw,72px);align-items:center}
.g-6-6{grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.pile>*+*{margin-top:16px}

/* --- la signature : le fil et le repere --------------------------------- */
.repere{width:28px;height:28px;color:var(--bleu);flex:none}
.fil{display:inline-flex;gap:10px;align-items:center;vertical-align:middle}
.fil i{width:5px;height:5px;border-radius:50%;background:var(--bleu);opacity:0;transform:scale(.4)}
.vu .fil i,.fil.vu i{animation:pose .34s var(--ease) forwards;animation-delay:calc(var(--i,0)*45ms)}
@keyframes pose{to{opacity:1;transform:scale(1)}}

/* --- boutons ------------------------------------------------------------ */
.cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 24px;
  border-radius:var(--r-pilule);font:600 var(--t-petit)/1.15 var(--sans);border:1px solid transparent;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s,border-color .2s;white-space:nowrap}
.btn-primaire{background:var(--bleu);color:#fff}
.btn-primaire:hover{background:var(--bleu-fonce);transform:translateY(-1px);box-shadow:var(--ombre-bleue)}
.btn-secondaire{background:var(--surface);color:var(--encre);border-color:var(--ligne);box-shadow:var(--ombre-1)}
.btn-secondaire:hover{border-color:#c9c3b6;transform:translateY(-1px)}
.btn-sm{height:42px;padding:0 18px;font-size:var(--t-petit)}
.lien{display:inline-flex;align-items:center;gap:6px;color:var(--bleu-texte);font-weight:600;font-size:var(--t-petit)}
.lien svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.lien:hover svg{transform:translateX(3px)}

/* --- etiquettes --------------------------------------------------------- */
.etiq{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:4px 11px;border-radius:var(--r-pilule);
  font:600 var(--t-micro)/1.35 var(--sans);letter-spacing:.01em}
.etiq::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.etiq-bleu{background:var(--bleu-pale);color:var(--bleu-fonce)}
.etiq-vert{background:#e6f2ec;color:var(--vert)}
.etiq-jaune{background:#fdf3c4;color:#6b5300}
.etiq-scenario{background:var(--surface-2);color:var(--gris);border:1px solid var(--ligne)}

/* --- cartes ------------------------------------------------------------- */
.carte{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r-m);padding:28px;
  box-shadow:var(--ombre-1);transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  display:flex;flex-direction:column}
.carte:hover{transform:translateY(-2px);box-shadow:var(--ombre-2)}
.carte .repere,.carte .pict{margin-bottom:18px}
.carte h3{margin-bottom:8px}
.carte p{font-size:var(--t-corps);color:var(--gris);max-width:none}
.carte .lien{margin-top:auto;padding-top:18px;align-self:flex-start}
.carte-media{padding:0;overflow:hidden}
.carte-media figure{aspect-ratio:16/9;background:var(--surface-2);overflow:hidden;position:relative}
.carte-media figure img,.carte-media figure video{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.carte-media .corps{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.carte-media .etiq{margin-bottom:12px;align-self:flex-start}
.panneau{border-radius:var(--r-l);padding:clamp(28px,4vw,56px);background:var(--bleu-pale);border:1px solid var(--ligne-bleue)}
.panneau-clair{background:var(--surface);border-color:var(--ligne);box-shadow:var(--ombre-1)}
.panneau-clair .carte{background:var(--surface-2);box-shadow:none}
.panneau-clair .carte:hover{transform:none;box-shadow:none}
.pict{width:44px;height:44px;border-radius:var(--r-s);background:var(--bleu-pale);color:var(--bleu);
  display:grid;place-items:center;flex:none}
.pict svg{width:23px;height:23px}

/* --- cadre navigateur et telephone -------------------------------------- */
.scene .cadre{z-index:1}
/* La plaque : l'appareil est POSE sur une surface, il ne flotte plus.
   Elle prend la cellule de grille qui contenait deja le mockup, donc aucun
   balisage a ajouter dans les vingt pages. */
.grille>div:has(>.cadre),.grille>div:has(>.tel),.alt>div:has(>.cadre){
  background:var(--bleu-pale);border-radius:var(--r-l);
  padding:clamp(18px,2.6vw,34px);display:grid;place-items:center}
/* Dans un panneau deja bleu pale, la plaque passe au blanc pour rester lisible. */
.panneau .grille>div:has(>.cadre),.panneau .grille>div:has(>.tel){
  background:var(--surface)}
.grille>div:has(>.tel){padding:clamp(22px,3vw,40px) clamp(18px,2.6vw,34px) 0;align-content:end}
.grille>div:has(>.tel)>.tel{margin-bottom:calc(-1*clamp(18px,2.6vw,34px))}

.cadre{position:relative;border-radius:var(--r-l);background:var(--surface);border:1px solid var(--ligne);
  box-shadow:var(--ombre-2);overflow:hidden}
.cadre .barre{display:flex;align-items:center;gap:7px;height:42px;padding:0 16px;
  border-bottom:1px solid var(--ligne);background:#fcfbf9}
.cadre .barre i{width:10px;height:10px;border-radius:50%;background:#e3dfd6;flex:none}
.cadre .barre span{margin-left:0;margin-right:34px;flex:1;height:26px;border-radius:var(--r-s);background:var(--fond);
  border:1px solid var(--ligne);font:500 var(--t-micro)/24px var(--sans);color:var(--sourdine);text-align:center;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 10px}
.cadre .ecran{position:relative;aspect-ratio:16/9;background:var(--surface-2)}
.cadre .ecran>img,.cadre .ecran>video{width:100%;height:100%;object-fit:cover}
.legende{display:flex;gap:8px 20px;justify-content:center;flex-wrap:wrap;margin:14px auto 0;
  font:500 var(--t-petit)/1.4 var(--sans);color:var(--sourdine)}
.legende span{display:inline-flex;align-items:center;gap:7px}
.legende span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--vert);flex:none}
.tel{width:min(288px,72vw);aspect-ratio:9/19;border-radius:38px;background:#161d27;padding:7px;
  box-shadow:0 22px 44px -20px rgba(10,61,99,.42),0 3px 8px rgba(27,36,48,.08);margin:0 auto}
.tel .ecran{position:relative;border-radius:32px;overflow:hidden;background:#fff;height:100%}
/* Pas d'ile : nos captures commencent au premier pixel du widget, sans barre
   d'etat, donc une ile masquerait l'en-tete « Ki, votre concierge ». */
.tel .ecran img{width:100%;height:100%;object-fit:cover;object-position:top center}

/* --- bulles de conversation --------------------------------------------- */
.echange{display:flex;flex-direction:column;gap:10px}
.bulle{width:fit-content;max-width:min(430px,100%);padding:13px 17px;font-size:var(--t-corps);line-height:1.45}
.bulle.bulle-q{align-self:flex-start;background:var(--bleu);color:#fff;border-radius:16px 16px 16px 4px;font-weight:500}
/* Le geste : quand le concierge n'ecrit rien et agit. Une bille du chemin le porte. */
.geste{align-self:flex-end;position:relative;max-width:min(430px,100%);padding:3px 4px 3px 19px;
  font:500 var(--t-petit)/1.45 var(--sans);color:var(--sourdine)}
.geste::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--bleu)}
.bulle-r{align-self:flex-end;background:var(--surface);border:1px solid var(--ligne);
  border-radius:16px 16px 4px 16px;color:var(--texte);box-shadow:var(--ombre-1)}

/* --- KPI ---------------------------------------------------------------- */
.kpi .grille{gap:0}
.kpi .grille>div{padding:8px clamp(12px,2vw,28px);border-left:1px solid var(--ligne-bleue)}
.kpi .grille>div:first-child{border-left:0;padding-left:0}
.chiffre{display:block;font-size:clamp(38px,4.4vw,58px);line-height:1;color:var(--bleu);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-bottom:10px}
.chiffre small{font-size:.55em;vertical-align:.28em;margin-left:2px}
.kpi .libelle{display:block;font:500 var(--t-petit)/1.45 var(--sans);color:var(--gris);max-width:24ch}

/* --- prix --------------------------------------------------------------- */
.prix{display:grid;gap:24px;grid-template-columns:1fr 1fr;align-items:stretch}
.prix .carte{padding:32px}
.prix .montant{font-family:var(--serif);font-size:clamp(36px,3.8vw,50px);line-height:1;color:var(--encre);
  letter-spacing:-.02em;margin:14px 0 4px;font-weight:600}
.prix .montant span{font:500 var(--t-petit)/1.2 var(--sans);color:var(--gris);margin-left:8px;letter-spacing:normal}
.prix .vedette{background:var(--bleu-pale);border-color:#c9dff2}
.prix ul{list-style:none;margin:20px 0;display:grid;gap:11px}
.prix li{display:flex;gap:10px;font-size:var(--t-corps);color:var(--texte);line-height:1.4}
.prix li svg{width:18px;height:18px;color:var(--vert);flex:none;margin-top:2px}
.prix .btn{width:100%;margin-top:auto}
.devis{grid-column:1/-1;background:var(--surface-2);border-color:var(--ligne);
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;padding:28px 32px}
.devis .btn{margin-top:0;width:auto}
.devis h3{margin-bottom:6px}

/* --- tableau ------------------------------------------------------------ */
.table-defile{overflow-x:auto;border-radius:var(--r-m);border:1px solid var(--ligne);background:var(--surface)}
.tableau{width:100%;border-collapse:collapse;font-size:var(--t-corps);min-width:520px}
.tableau th,.tableau td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--ligne)}
.tableau thead th{font:600 var(--t-micro)/1.15 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--gris);background:var(--surface-2)}
.tableau tbody tr:last-child td{border-bottom:0}
.tableau td:not(:first-child){text-align:center;width:22%}
.tableau .oui{color:var(--vert);font-weight:600}
.tableau .bientot{color:#6b5300;font-weight:600;font-size:var(--t-petit)}
/* Tableau d'article : des colonnes de texte, pas une grille de comparaison.
   On annule donc le centrage et la largeur fixe heritee de .tableau. */
.tableau-texte td:not(:first-child){text-align:left;width:auto}
.tableau-texte{font-size:var(--t-petit);min-width:640px}
.tableau-texte th,.tableau-texte td{padding:12px 16px;vertical-align:top}

/* --- bloc de code dans un article -------------------------------------- */
.bloc-code{margin:24px 0;padding:20px 22px;border-radius:var(--r-m);
  border:1px solid var(--ligne);background:var(--surface-2);overflow-x:auto}
.bloc-code code{font:400 13px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--texte);white-space:pre}
.article code{font:500 .92em/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--surface-2);border:1px solid var(--ligne);border-radius:5px;padding:1px 5px}
.bloc-code code{background:none;border:0;padding:0}

/* --- filtres du blogue --------------------------------------------------
   Le bloc arrive avec l'attribut `hidden` : site.js le montre seulement s'il a
   pu brancher le tri. Une barre de filtres qui ne filtre pas est pire que pas
   de barre. */
.filtres{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:-8px 0 30px}
.filtre{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;
  border:1px solid var(--ligne);border-radius:var(--r-pilule);background:var(--surface);
  color:var(--gris);font:500 var(--t-petit)/1 var(--sans);cursor:pointer;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.filtre:hover{border-color:#c9c3b6;color:var(--encre)}
.filtre .compte{display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pilule);
  background:var(--surface-2);color:var(--gris);font-size:var(--t-micro);font-weight:600}
.filtre.actif{background:var(--bleu);border-color:var(--bleu);color:#fff}
.filtre.actif .compte{background:rgba(255,255,255,.22);color:#fff}
.filtre:focus-visible{outline:2px solid var(--bleu);outline-offset:2px}
.filtre-etat{flex:1 0 100%;margin:0;font-size:var(--t-micro);color:var(--gris)}
.filtre-etat:empty{display:none}
/* `.carte` pose display:flex, ce qui bat le `[hidden]{display:none}` de la
   feuille du navigateur : une carte filtree restait a l'ecran alors que le
   compteur annoncait « 3 articles sur 9 ». Il faut le dire ici. */
[hidden]{display:none !important}
@media (max-width:560px){
  .filtres{gap:8px}
  .filtre{height:36px;padding:0 13px}
}

/* --- FAQ ---------------------------------------------------------------- */
.faq details{border-bottom:1px solid var(--ligne)}
.faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:20px 0;font:600 var(--t-corps)/1.4 var(--sans);color:var(--encre);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:20px;height:20px;flex:none;margin-top:2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f75bd' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/20px no-repeat;
  transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;color:var(--texte);font-size:var(--t-corps);max-width:64ch}
.faq .groupe{margin:38px 0 2px;font:600 var(--t-micro)/1.15 var(--sans);color:var(--bleu-texte);
  letter-spacing:.08em;text-transform:uppercase}
.faq .groupe:first-child{margin-top:0}

/* --- mosaique de lieux captes ------------------------------------------- */
.mosaique{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.mosaique figure{position:relative;aspect-ratio:4/3;border-radius:var(--r-s);overflow:hidden;
  border:1px solid var(--ligne);background:var(--surface-2)}
.mosaique img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.mosaique figure:hover img{transform:scale(1.05)}
.mosaique figcaption{position:absolute;left:0;right:0;bottom:0;padding:20px 10px 8px;
  font:600 var(--t-micro)/1.3 var(--sans);color:#fff;
  background:linear-gradient(rgba(11,17,25,0),rgba(11,17,25,.35) 42%,rgba(11,17,25,.86))}
.noms{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;margin:26px auto 0;
  font:500 var(--t-petit)/1.5 var(--sans);color:var(--gris)}
.noms b{font-weight:500}
.noms b:not(:last-child)::after{content:"·";color:#b9b2a4;margin-left:18px}

/* --- etapes numerotees -------------------------------------------------- */
.etapes{display:grid;gap:24px;grid-template-columns:repeat(3,1fr);counter-reset:e}
.etapes>div{position:relative;padding-top:28px}
.etapes>div::before{counter-increment:e;content:"0" counter(e);position:absolute;top:0;left:0;
  font:600 var(--t-micro)/1.15 var(--sans);color:var(--bleu-texte);letter-spacing:.1em}
.etapes>div::after{content:"";position:absolute;top:6px;left:34px;right:-24px;height:2px;
  background:repeating-linear-gradient(to right,var(--bleu) 0 5px,transparent 5px 15px);opacity:.45}
.etapes>div:last-child::after{display:none}
.etapes h3{margin-bottom:8px}
.etapes p{font-size:var(--t-corps);color:var(--gris)}

/* --- frise verticale ---------------------------------------------------- */
.frise{list-style:none;position:relative;padding-left:40px}
.frise::before{content:"";position:absolute;left:9px;top:12px;bottom:12px;width:2px;
  background:repeating-linear-gradient(var(--bleu) 0 5px,transparent 5px 14px);opacity:.45}
.frise li{position:relative;padding-bottom:36px}
.frise li:last-child{padding-bottom:0}
.frise li::before{content:"";position:absolute;left:-40px;top:5px;width:20px;height:20px;border-radius:50%;
  background:var(--surface);border:2px solid var(--bleu)}
.frise b{display:block;font:600 var(--t-micro)/1.15 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--bleu-texte);margin-bottom:8px}
.frise h3{margin-bottom:8px}
.frise p{color:var(--gris);font-size:var(--t-corps)}
.frise .media{margin-top:16px;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--ligne);
  box-shadow:var(--ombre-1);max-width:520px}

/* --- revelations -------------------------------------------------------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.vu{opacity:1;transform:none}
.rv-2{transition-delay:.08s}.rv-3{transition-delay:.16s}.rv-4{transition-delay:.24s}
.no-js .rv{opacity:1;transform:none}

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav{position:fixed;inset:0 0 auto;z-index:60;height:70px;
  background:rgba(251,250,247,.82);backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.nav.colle{border-bottom-color:var(--ligne);background:rgba(251,250,247,.94)}
.nav .wrap{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);height:100%}
.marque{display:flex;align-items:center;flex:none}
.marque img{height:32px;width:auto}
.nav ul{list-style:none;display:flex;align-items:center;gap:clamp(13px,1.9vw,26px);margin-left:auto}
.nav ul a{font:500 var(--t-petit)/1.15 var(--sans);color:var(--texte);position:relative;padding:6px 0;display:inline-block;
  transition:color .2s}
.nav ul a:hover{color:var(--encre)}
.nav ul a.ici{color:var(--encre);font-weight:600}
.nav ul a.ici::after{content:"";position:absolute;left:50%;bottom:-3px;width:6px;height:6px;margin-left:-3px;
  border-radius:50%;background:var(--bleu)}
.nav>.wrap>.btn{margin-left:4px;flex:none}
.nav .langue{flex:none;display:grid;place-items:center;min-height:34px;padding:8px 11px;
  font:600 var(--t-micro)/1 var(--sans);letter-spacing:.08em;color:var(--texte);
  border:1px solid var(--ligne);border-radius:999px;transition:color .2s,border-color .2s}
.nav .langue:hover{color:var(--encre);border-color:var(--encre)}
.burger{display:none;width:42px;height:42px;place-items:center;margin-left:auto;color:var(--encre)}
.burger svg{width:24px;height:24px}

@media(max-width:980px){
  .nav ul{position:fixed;inset:70px 0 0;background:var(--fond);flex-direction:column;
    align-items:flex-start;gap:0;padding:20px var(--gouttiere) 60px;overflow-y:auto;
    transform:translateX(100%);transition:transform .35s var(--ease);margin:0}
  .nav ul.ouvert{transform:none}
  .nav ul li{width:100%;border-bottom:1px solid var(--ligne)}
  .nav ul a{font-family:var(--serif);font-size:24px;font-weight:600;padding:15px 0;width:100%}
  .nav ul a.ici::after{left:auto;right:4px;bottom:auto;top:24px}
  .nav>.wrap>.btn{display:none}
  /* Deux margin-left:auto de suite se partagent l'espace : le bouton de
     langue finissait au milieu de la barre. Il pousse, le burger suit. */
  .nav .langue{margin-left:auto}
  .nav .langue ~ .burger{margin-left:0}
  .burger{display:grid}
}

/* ==========================================================================
   Heros de l'accueil
   ========================================================================== */
.heros{padding:clamp(24px,3.2vw,44px) 0 clamp(56px,7vw,88px);text-align:center;position:relative;overflow:clip}
.heros::before{content:"";position:absolute;inset:-70px 0 auto;height:700px;z-index:-1;
  background:radial-gradient(62% 52% at 50% 0%,var(--bleu-pale),transparent 72%)}
.heros h1{max-width:17ch;margin:12px auto 0}
.heros .lead{margin:16px auto 0;max-width:54ch}
.heros .cta{margin-top:24px}
.heros .note{margin-top:12px}

.scene{position:relative;max-width:1000px;margin:clamp(26px,4vw,58px) auto 0}
.chemin{position:absolute;left:50%;top:calc(-1*clamp(17px,3vw,44px));transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;z-index:0;pointer-events:none}
.chemin i{border-radius:50%;width:var(--t,9px);height:var(--t,9px);
  background:radial-gradient(circle at 34% 32%,#6fb0e4,var(--bleu) 62%,var(--bleu-fonce));
  box-shadow:0 2px 6px rgba(15,117,189,.34);opacity:0;transform:scale(.4)}
.vu .chemin i{animation:pose .32s var(--ease) forwards;animation-delay:calc(var(--i)*70ms)}
/* Ni telephone pose sur la video, ni repere de marque au milieu de l'ecran :
   le heros montre UNE prise, en entier. Retires le 27 aout sur la remarque
   d'Alexis (le telephone redisait le concierge deja lisible a l'ecran et
   mordait dessus, le repere se lisait comme un logo pose la par erreur).

   Et le cadre qui porte une video prend le rapport de la prise (1280x636)
   au lieu du 16/9 du cadre a image : en `cover`, le 16/9 rognait 11 % de la
   largeur, donc les bords, donc le panneau du concierge, coupe en plein mot
   (« je souhaite voir la sa… »). Vaut pour /concierge-ia et les captures des
   pages interieures. */
.cadre .ecran:has(>video),.carte-media figure:has(>video){aspect-ratio:1280/636}

/* Le heros de l'accueil, depuis le 25 septembre, porte une seule prise montee
   de six plans (v-promo.mp4), captee en 1920x1080 et servie en 16/9 : rien
   n'est rogne, le menu de la visite reste entier en haut et en bas. */
.scene.promo .cadre .ecran{aspect-ratio:16/9}
/* la video des sept reperes annonce le concierge en bas a droite et Reserver en bas
   a gauche : la commande de pause monte sur le logo, seul coin sans repere */
.scene.promo .cmd-video{left:14px;top:14px;right:auto;bottom:auto}

/* Le heros porte UN texte, et c'est la lecon du 25 septembre, en trois temps.
   Une etiquette de deux mots ancree sur un detail nommait des bouts
   d'interface a quelqu'un qui ne sait pas encore ce qu'il regarde, « tous vos
   espaces », « 54 m jusqu'a la piscine ». Une pilule « Exemple, la visite de
   l'hotel Ki Space » parlait de notre demonstration au lieu de parler a
   l'acheteur, et l'adresse du cadre plus la legende sous le cadre nomment deja
   le client de reference. Ce qui reste dit ce que SES visiteurs feront chez
   LUI, une phrase par plan, au meme endroit.

   Le texte est en HTML au-dessus de la video et non incruste : il se traduit
   pour /en, il se corrige sans reencoder, et le lecteur d'ecran lit
   l'aria-label de la video plutot qu'un texte qui change sous lui.

   Le fond est OPAQUE et la pilule ne fait que la largeur de son texte. En
   translucide la sonde de contraste de `verifier.sh` compose le blanc du cadre
   et rend 1,13:1, donc elle ferme la porte, et elle a raison. En bande pleine
   largeur, elle recouvrait le nom du lieu et le panneau du configurateur, qui
   sont la preuve. */
.dit-plan{position:absolute;left:16px;bottom:16px;right:112px;z-index:4;margin:0;
  width:fit-content;max-width:calc(100% - 128px);
  padding:10px 16px;border-radius:var(--r-m);background:#fff;
  box-shadow:0 16px 36px -14px rgba(10,30,50,.42),0 2px 6px rgba(10,30,50,.07);
  border:1px solid #dfe4ea;text-align:left;
  font:500 var(--t-petit)/1.35 var(--sans);color:var(--encre)}
.dit-plan>span{display:block;font:500 var(--t-petit)/1.35 var(--sans);color:var(--encre);
  opacity:1;transition:opacity .22s var(--ease)}
.dit-plan.passe>span{opacity:0}
@media(prefers-reduced-motion:reduce){.dit-plan>span{transition:none;opacity:1}}


/* ==========================================================================
   La conversation rejouee, et la grille des fonctions
   ========================================================================== */
/* Le widget du concierge, redessine en HTML pour qu'il PARLE : la question
   se tape dans le champ, part en bulle, les points d'attente battent, la
   reponse arrive. Aucune librairie : c'est la meme mecanique que la demande
   du heros, et une capture animee n'a pas besoin de plus. */
.chat{display:flex;flex-direction:column;height:100%;background:#eef2f7;overflow:hidden;text-align:left}
.chat-tete{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--bleu-nuit);color:#fff;flex:none}
.chat-tete .ki{width:30px;height:30px;border-radius:9px;flex:none;background:rgba(255,255,255,.15);
  display:grid;place-items:center;font:600 13px/1 var(--sans);color:#fff}
.chat-tete b{display:block;font:600 var(--t-petit)/1.25 var(--sans)}
.chat-tete i{display:flex;align-items:center;gap:6px;font:500 12px/1.3 var(--sans);
  color:rgba(255,255,255,.72);font-style:normal}
.chat-tete i::before{content:"";width:6px;height:6px;border-radius:50%;background:#4cc38a;flex:none}
.chat-fil{flex:1;min-height:0;overflow:hidden;padding:14px;display:flex;flex-direction:column;
  justify-content:flex-end;gap:9px}
.chat-fil>*{opacity:0;transform:translateY(9px);animation:bulle-entre .34s var(--ease) forwards}
@keyframes bulle-entre{to{opacity:1;transform:none}}
.bul{max-width:88%;padding:10px 13px;border-radius:15px;font:400 14px/1.45 var(--sans)}
.bul-r{align-self:flex-start;background:#fff;border:1px solid #e2e9f1;color:var(--encre);border-bottom-left-radius:5px}
.bul-q{align-self:flex-end;background:var(--bleu-nuit);color:#fff;border-bottom-right-radius:5px}
.bul-r ul{margin:7px 0 0;padding-left:17px;display:grid;gap:5px}
.bul-r b{color:var(--encre)}
/* Ce que la visite fait sans ecrire un mot : la salle qui se remeuble n'est
   pas une reponse du concierge, elle ne prend donc pas une bulle de reponse. */
.chat-geste{align-self:center;display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:var(--r-pilule);
  background:rgba(15,117,189,.09);color:var(--bleu-texte);font:500 12.5px/1.35 var(--sans);text-align:center}
.chat-geste svg{width:14px;height:14px;flex:none}
.chat-points{align-self:flex-start;display:inline-flex;gap:5px;padding:13px 14px;background:#fff;
  border:1px solid #e2e9f1;border-radius:15px;border-bottom-left-radius:5px}
.chat-points i{width:6px;height:6px;border-radius:50%;background:#9db0c4;animation:pointe 1.15s infinite}
.chat-points i:nth-child(2){animation-delay:.17s}
.chat-points i:nth-child(3){animation-delay:.34s}
@keyframes pointe{0%,62%,100%{opacity:.34;transform:translateY(0)}31%{opacity:1;transform:translateY(-3px)}}
.chat-pied{flex:none;display:flex;align-items:center;gap:9px;padding:10px 12px;background:#fff;border-top:1px solid #e6ecf3}
.chat-champ{flex:1;min-width:0;min-height:38px;display:flex;align-items:center;padding:0 14px;
  border:1px solid #d7e3ef;border-radius:var(--r-pilule);font:400 13.5px/1.35 var(--sans);color:var(--encre);
  overflow:hidden;white-space:nowrap}
.chat-champ:empty::before{content:"Tapez votre message…";color:#68757f}
.chat-envoi{width:38px;height:38px;border-radius:50%;flex:none;background:var(--bleu-nuit);display:grid;place-items:center}
.chat-envoi svg{width:16px;height:16px;color:#fff}
.chat-marque{flex:none;padding:7px;text-align:center;background:#fff;border-top:1px solid #eef2f6;
  font:500 11px/1.2 var(--sans);color:#68757f}
/* Hors telephone : le widget se pose dans sa propre boite, sur la plaque. */
.chat-boite{border-radius:var(--r-l);overflow:hidden;background:#fff;
  height:clamp(380px,42vw,470px);width:100%}
/* Posee sur la plaque, sans ombre : une boite blanche ombree dans un panneau
   blanc, c'est la carte dans la carte que l'audit du 27 aout a chassee. */
.grille>div:has(>.chat-boite){background:var(--bleu-pale);border-radius:var(--r-l);
  padding:clamp(18px,2.6vw,34px);display:grid;place-items:center}

/* La grille des fonctions : une grande carte, quatre capsules. */
.bento{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.bento>.large{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:center;
  background:var(--bleu-pale);border-color:var(--ligne-bleue)}
.bento>.large>figure{order:2;border-radius:0}
/* Meme rapport pour les cinq media, sinon les deux cartes d'une rangee ne
   s'alignent pas : la capsule video suit la prise, l'image suivait le 16/9. */
.bento .carte-media figure{aspect-ratio:1280/636}
.bento>.large>.corps{padding:clamp(24px,3vw,42px)}
.dit{display:inline-block;margin-top:16px;padding:11px 16px;border-radius:var(--r-m);
  background:var(--bleu-pale);border:1px solid var(--ligne-bleue);
  font:500 var(--t-petit)/1.55 var(--sans);color:var(--bleu-fonce)}
.dit-liste{display:block;list-style:none}
.dit-liste li+li{margin-top:7px}
.bento>.large .dit{background:#fff}
@media(max-width:860px){
  .bento{grid-template-columns:1fr}
  .bento>.large{grid-template-columns:1fr}
  .bento>.large>figure{order:0}
}

/* ==========================================================================
   Pied de page
   ========================================================================== */
footer{background:var(--bleu-nuit);color:rgba(255,255,255,.74);padding:clamp(56px,6vw,80px) 0 26px;font-size:var(--t-petit)}
footer .wrap{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:36px}
footer .marque img{height:30px}
footer p{margin-top:16px;max-width:34ch;font-size:var(--t-petit);line-height:1.55}
footer .titre-col{color:#fff;font:600 var(--t-micro)/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase;margin:0 0 16px;max-width:none}
footer ul{list-style:none;display:grid;gap:0}
footer ul a{display:block;padding:10px 0;min-height:44px}
footer a{transition:color .2s}
footer a:hover{color:#fff}
footer .bas{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px;
  flex-wrap:wrap;margin-top:18px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  font-size:var(--t-petit);color:rgba(255,255,255,.56)}
footer .bas svg{width:28px;height:auto}

/* ==========================================================================
   En-tete de page interieure et blocs communs
   ========================================================================== */
.tete-page{padding:clamp(44px,5vw,72px) 0 clamp(34px,4vw,52px);position:relative;overflow:clip}
.tete-page::before{content:"";position:absolute;inset:-70px 0 auto;height:600px;z-index:-1;
  background:radial-gradient(56% 50% at 32% 0%,var(--bleu-pale),transparent 72%)}
.tete-page h1{max-width:18ch}
.tete-page .lead{margin-top:18px}
.tete-page .cta{margin-top:28px}
.tete-page .surtitre,.tete-page .etiq{margin-bottom:16px}
.tete-page .media{border-radius:var(--r-l);padding:clamp(12px,1.6vw,22px);background:var(--bleu-pale)}
.tete-page .media img,.tete-page .media video{width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r-m);box-shadow:var(--ombre-2)}

.alt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;
  padding:clamp(34px,4vw,54px) 0;border-top:1px solid var(--ligne)}
.alt:first-of-type{border-top:0;padding-top:0}
.alt .num{font:600 var(--t-micro)/1.15 var(--sans);letter-spacing:.1em;color:var(--bleu-texte);margin-bottom:12px;display:block}
.alt h3{font-size:clamp(22px,2.4vw,29px);margin-bottom:12px}
.alt p{color:var(--gris)}
.alt .media{border-radius:var(--r-l);padding:clamp(12px,1.6vw,22px);background:var(--bleu-pale)}
.alt .media img,.alt .media video{width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r-m);box-shadow:var(--ombre-2)}
.alt.inverse>*:first-child{order:2}
.alt .bulle{margin-top:18px}

.article{font-size:18px;line-height:1.72}
.article h2{font-size:clamp(24px,2.6vw,32px);margin:44px 0 14px}
.article h3{font-size:var(--t-h3);margin:32px 0 10px}
.article p{margin-bottom:18px;max-width:none}
.article ul,.article ol{margin:0 0 20px 22px;display:grid;gap:9px}
.article a{color:var(--bleu-texte);text-decoration:underline;text-underline-offset:3px}
.article .encadre{background:var(--bleu-pale);border:1px solid var(--ligne-bleue);border-radius:var(--r-m);
  padding:24px 28px;margin:30px 0}
.article .encadre h3{font:600 var(--t-petit)/1.3 var(--sans);margin:0 0 8px;color:var(--bleu-fonce);letter-spacing:normal}
.article .sources{font-size:var(--t-petit);color:var(--gris)}
.article .sources li{overflow-wrap:anywhere}
.meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font:500 var(--t-petit)/1.35 var(--sans);color:var(--sourdine)}

/* ==========================================================================
   Adaptatif
   ========================================================================== */
@media(max-width:1024px){
  .g4,.mosaique{grid-template-columns:repeat(3,1fr)}
  .kpi .grille{grid-template-columns:repeat(2,1fr);gap:28px 0}
  .kpi .grille>div:nth-child(odd){border-left:0;padding-left:0}
}
@media(max-width:860px){
  .g2,.g3,.g4,.g-7-5,.g-6-6,.prix,.etapes{grid-template-columns:1fr}
  .g3:has(>:last-child:nth-child(5))>*{flex:0 1 100%}
  .alt{grid-template-columns:1fr;gap:26px}
  .alt.inverse>*:first-child{order:0}
  .alt .media{order:-1}
  .devis{grid-template-columns:1fr;gap:20px}
  .mosaique{grid-template-columns:repeat(2,1fr)}
  footer .wrap{grid-template-columns:1fr 1fr}
  .etapes>div::after{display:none}
  .scene{margin-top:38px}
  .dit-plan{left:12px;bottom:12px;right:104px;max-width:calc(100% - 118px);padding:9px 14px}
}
@media(max-width:640px){
  .scene .chemin{display:none}
  .cadre .barre{display:none}
  /* Sur telephone les deux bandes tiennent leur place, et la phrase du bas
     passe sur deux lignes plutot que de se faire couper. */
  /* Au telephone la pilule prend la largeur libre a gauche de la commande de
     pause et passe sur deux ou trois lignes plutot que de se faire couper. */
  .dit-plan{left:10px;bottom:10px;right:92px;max-width:calc(100% - 104px);padding:8px 12px}
  .dit-plan>span{font-size:12.5px;line-height:1.3}
  .scene.promo .cmd-video{left:10px;top:10px;right:auto;bottom:auto}
  .dit-plan>span{font-size:12.5px;line-height:1.3}
  .scene{width:calc(100% + var(--gouttiere)*2);max-width:none;
    margin-left:calc(-1*var(--gouttiere));margin-right:calc(-1*var(--gouttiere))}
  .scene .cadre{border-radius:0;border-left:0;border-right:0}
  .scene .legende{padding:0 var(--gouttiere)}
}
@media(max-width:520px){
  .cta .btn{width:100%}
  .kpi .grille{grid-template-columns:1fr;gap:24px}
  .mosaique{grid-template-columns:1fr 1fr;gap:8px}
  footer .wrap{grid-template-columns:1fr;gap:28px}
  .frise{padding-left:34px}
  .frise li::before{left:-34px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:120ms!important;transition-property:color,background-color,border-color,box-shadow,opacity!important;
    scroll-behavior:auto!important}
  .btn:hover,.carte:hover{transform:none}
  .mosaique figure:hover img{transform:none}
  .rv{opacity:1;transform:none}
  .chemin i,.fil i{opacity:1;transform:none}
}
@media print{.nav,footer,.cta{display:none}}

/* ==========================================================================
   Refonte de positionnement, 8 septembre 2026.
   La plateforme se raconte en une chaine, et le hero porte ses quatre couches.
   ========================================================================== */

/* Les quatre couches, sous le titre du hero */
.couches{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin:22px auto 0;list-style:none;max-width:52ch}
.couches li{
  font:600 var(--t-petit)/1 var(--sans);color:var(--bleu-texte);
  background:var(--bleu-pale);border:1px solid var(--ligne-bleue);
  border-radius:var(--r-pilule);padding:9px 15px;
}

/* La chaine du produit : explorer, comprendre, demander, guider, convertir, apprendre */
.chaine{list-style:none;display:grid;gap:14px;margin-top:38px}
@media(min-width:900px){.chaine{grid-template-columns:repeat(6,1fr);gap:0}}
.chaine li{position:relative;background:var(--surface);border:1px solid var(--ligne);
  border-radius:var(--r-m);padding:20px 18px;box-shadow:var(--ombre-1)}
@media(min-width:900px){
  .chaine li{border-radius:0;border-left-width:0}
  .chaine li:first-child{border-left-width:1px;border-radius:var(--r-m) 0 0 var(--r-m)}
  .chaine li:last-child{border-radius:0 var(--r-m) var(--r-m) 0}
}
.chaine b{display:block;font:700 12px/1 var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--bleu);margin-bottom:10px}
.chaine span{display:block;font:400 var(--t-petit)/1.45 var(--sans);color:var(--sourdine)}
.chaine li::after{
  content:"";position:absolute;right:-7px;top:50%;width:13px;height:13px;
  border-top:2px solid var(--ligne-bleue);border-right:2px solid var(--ligne-bleue);
  transform:translateY(-50%) rotate(45deg);background:var(--fond);z-index:2;
}
.chaine li:last-child::after{display:none}
@media(max-width:899px){
  .chaine li::after{right:auto;left:50%;top:auto;bottom:-8px;
    transform:translateX(-50%) rotate(135deg)}
}

/* Les quatre verbes du produit, en colonnes lisibles */
.verbes{list-style:none;display:grid;gap:26px;margin-top:34px}
@media(min-width:760px){.verbes{grid-template-columns:repeat(2,1fr);gap:32px 40px}}
.verbes h3{font:600 var(--t-h3)/1.25 var(--serif);color:var(--encre);margin-bottom:10px}
.verbes b{display:block;font:700 12px/1 var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--bleu);margin-bottom:12px}
.verbes p+p{margin-top:10px}
.verbes .dit{margin-top:12px}

/* Les etapes numerotees de la methode */
.numeros{list-style:none;counter-reset:etape;display:grid;gap:20px;margin-top:34px}
@media(min-width:760px){.numeros{grid-template-columns:repeat(4,1fr)}}
.numeros li{counter-increment:etape}
.numeros li::before{
  content:counter(etape);display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:var(--r-pilule);margin-bottom:14px;
  background:var(--bleu);color:#fff;font:700 16px/1 var(--sans);
}
.numeros h3{font:600 var(--t-h3)/1.25 var(--serif);color:var(--encre);margin-bottom:8px}

/* Le formulaire d'estimation */
.champ{margin-bottom:18px}
.champ label{display:block;font:600 14px/1.3 var(--sans);color:var(--encre);margin-bottom:8px}
.champ input,.champ select,.champ textarea{
  width:100%;padding:0 16px;border:1px solid var(--ligne);border-radius:var(--r-s);
  background:var(--surface);font:400 16px/1 var(--sans);color:var(--texte);
}
.champ input,.champ select{height:50px}
.champ select{padding:0 12px}
.champ textarea{padding:14px 16px;line-height:1.5;resize:vertical}
.champ input:focus-visible,.champ select:focus-visible,.champ textarea:focus-visible{
  outline:2px solid var(--bleu);outline-offset:1px;border-color:var(--bleu);
}
.reponse-formulaire{margin-top:18px;padding:14px 16px;border-radius:var(--r-s);
  font:500 var(--t-petit)/1.5 var(--sans)}
.reponse-formulaire[data-etat="ok"]{background:#eaf6ef;color:var(--vert);
  border:1px solid #c7e5d4}
.reponse-formulaire[data-etat="erreur"]{background:#fdecee;color:var(--rouge);
  border:1px solid #f3ccd1}

/* ==========================================================================
   Audit marketing du 11 septembre 2026.
   Le premier ecran montre une action au lieu de l'annoncer, la preuve remonte
   sous le heros, les pages transactionnelles perdent leur grand vide du haut,
   et toute animation porte sa commande de pause.
   ========================================================================== */

/* --- le heros a deux colonnes : le texte a gauche, la demo a cote --------
   L'audit : « la demonstration ne commence visuellement qu'en bas de l'ecran
   et sa partie utile est coupee ». En deux colonnes elle entre dans le premier
   ecran en entier. Sous 900px on retombe sur une colonne, centree comme avant. */
.heros.duo{text-align:left;padding-bottom:clamp(40px,5vw,64px)}
.heros.duo .wrap{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media(min-width:900px){
  .heros.duo .wrap{grid-template-columns:minmax(0,5.2fr) minmax(0,6.8fr)}
}
.heros.duo .dit-heros{display:flex;flex-direction:column;gap:0}
.heros.duo h1{max-width:19ch;margin:14px 0 0;font-size:clamp(30px,3.3vw,46px)}
.heros.duo .lead{margin:16px 0 0;max-width:46ch}
.heros.duo .cta{margin-top:26px;justify-content:flex-start}
.heros.duo .dit-heros p,.heros.duo .note{margin-left:0;margin-right:0}
.heros.duo .note{margin:14px 0 0;text-align:left}
.heros.duo .scene{margin:0;max-width:none}
.heros.duo .scene .legende{justify-content:flex-start;margin-left:0;margin-right:0}
@media(max-width:899px){
  .heros.duo{text-align:center}
  .heros.duo h1,.heros.duo .lead,.heros.duo .note{margin-left:auto;margin-right:auto;text-align:center}
  .heros.duo .cta{justify-content:center}
  .heros.duo .scene .legende{justify-content:center}
}
/* Le chemin de billes ne tient pas a gauche d'une colonne etroite. */
.heros.duo .chemin{display:none}

/* --- la preuve courte, juste sous le heros -------------------------------
   Un client, un usage concret, une capture. Elle passe AVANT la presentation
   des fonctions : l'audit la voulait « juste sous ce premier bloc ». */
.preuve{background:var(--surface-2);border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);
  padding:clamp(30px,3.6vw,46px) 0}
.preuve .wrap{display:grid;gap:clamp(22px,3vw,44px);align-items:center}
@media(min-width:820px){.preuve .wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.preuve .qui{font:600 var(--t-micro)/1.15 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--bleu-texte);display:block;margin-bottom:12px}
.preuve blockquote{margin:0;font-family:var(--serif);font-weight:500;
  font-size:clamp(19px,1.9vw,25px);line-height:1.38;color:var(--encre);max-width:34ch}
.preuve .apres{margin-top:14px;font:500 var(--t-petit)/1.5 var(--sans);color:var(--gris);max-width:52ch}
.preuve figure{margin:0;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--ligne);
  background:var(--surface)}
.preuve figure img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.preuve figcaption{padding:11px 15px;font:500 var(--t-micro)/1.4 var(--sans);color:var(--sourdine);
  border-top:1px solid var(--ligne)}

/* --- le parcours en trois actions ---------------------------------------
   Une seule sequence sur l'accueil : choisir un lieu, consulter, demander ou
   reserver. Elle remplace les quatre verbes ET la grille bento, qui disaient
   la meme chose deux fois. Chaque etape porte sa capture. */
.parcours{list-style:none;display:grid;gap:clamp(18px,2.4vw,26px);counter-reset:pas}
@media(min-width:820px){.parcours{grid-template-columns:repeat(3,1fr)}}
.parcours>li{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--ligne);border-radius:var(--r-m);overflow:hidden;box-shadow:var(--ombre-1)}
.parcours figure{margin:0;position:relative;background:var(--surface-2)}
.parcours figure>img,.parcours figure>video{width:100%;display:block;aspect-ratio:16/10;object-fit:cover}
.parcours .corps{padding:clamp(18px,2vw,24px);display:flex;flex-direction:column;gap:9px;flex:1}
.parcours .pas{counter-increment:pas;display:inline-flex;align-items:center;gap:9px;
  font:700 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--bleu-texte)}
.parcours .pas::before{content:counter(pas);display:grid;place-items:center;width:22px;height:22px;
  border-radius:50%;background:var(--bleu-pale);color:var(--bleu-texte);font-size:12px;letter-spacing:0}
.parcours h3{margin:0}
.parcours p{margin:0;color:var(--gris);font-size:var(--t-corps)}

/* --- la commande de pause sur les captures animees -----------------------
   L'audit : « les sept videos trouvees sur l'accueil ne presentaient pas de
   commandes natives ». Un bouton par capture, toujours visible au clavier. */
.cmd-video{position:absolute;right:10px;bottom:10px;z-index:5;
  display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;
  border-radius:var(--r-pilule);border:1px solid rgba(255,255,255,.42);
  background:rgba(10,24,38,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff;font:600 12px/1 var(--sans);cursor:pointer}
.cmd-video svg{width:13px;height:13px;flex:none}
.cmd-video:hover{background:rgba(12,28,44,.8)}
.cmd-video:focus-visible{outline:2px solid #fff;outline-offset:2px}
.scene .cmd-video{right:14px;bottom:14px}

/* --- la mention d'une conversation rejouee -------------------------------
   Elle etait dans un texte hors ecran. Elle passe a cote du widget, visible,
   parce qu'un champ de saisie dessine se prend pour un outil utilisable. */
.rejoue{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:12px;padding:9px 14px;border-radius:var(--r-pilule);
  background:var(--surface-2);border:1px solid var(--ligne)}
.rejoue span{font:500 var(--t-micro)/1.4 var(--sans);color:var(--sourdine)}
.rejoue button{display:inline-flex;align-items:center;gap:7px;border:0;background:none;cursor:pointer;
  color:var(--bleu-texte);font:600 var(--t-micro)/1 var(--sans);padding:4px 2px}
.rejoue button svg{width:13px;height:13px}
.rejoue button:focus-visible{outline:2px solid var(--bleu);outline-offset:3px;border-radius:4px}

/* --- les deux totaux, en tete de la page Prix ----------------------------
   L'audit : « le visiteur doit calculer lui-meme les 149 a 209 $ mensuels ».
   Les deux totaux sont ecrits, l'un a cote de l'autre, avant tout le reste. */
.totaux{display:grid;gap:clamp(16px,2vw,22px)}
@media(min-width:760px){.totaux{grid-template-columns:1fr 1fr}}
.totaux>article{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.6vw,32px);
  border-radius:var(--r-m);border:1px solid var(--ligne);background:var(--surface);box-shadow:var(--ombre-1)}
.totaux>article.vedette{border-color:var(--ligne-bleue);background:var(--bleu-pale)}
.totaux h3{margin:0;font-size:var(--t-h3)}
.totaux .somme{font-family:var(--serif);font-weight:600;line-height:1;color:var(--encre);
  font-size:clamp(34px,3.6vw,46px);letter-spacing:-.02em;margin:2px 0 0;display:flex;align-items:baseline;
  gap:8px;flex-wrap:wrap}
.totaux .somme small{font:500 var(--t-petit)/1.2 var(--sans);color:var(--gris);letter-spacing:0}
.totaux .compose{font:500 var(--t-petit)/1.5 var(--sans);color:var(--gris);margin:0}
.totaux dl{margin:14px 0 0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;
  padding-top:14px;border-top:1px solid var(--ligne)}
.totaux.sur-bleu dl{border-top-color:var(--ligne-bleue)}
.totaux dt{font:600 var(--t-micro)/1.45 var(--sans);color:var(--sourdine);
  letter-spacing:.05em;text-transform:uppercase}
.totaux dd{margin:0;font:500 var(--t-petit)/1.45 var(--sans);color:var(--texte)}
.totaux .btn{margin-top:auto;align-self:flex-start}
.devise{margin-top:16px;font:500 var(--t-petit)/1.5 var(--sans);color:var(--sourdine)}

/* --- le statut d'une fonction, partout le meme --------------------------- */
.tableau .etude{color:var(--bleu-texte);font-weight:600;font-size:var(--t-petit)}
.tableau td.etude,.tableau td.bientot,.tableau td.oui,.tableau td.note{white-space:nowrap}

/* --- pages transactionnelles : moins de vide en haut ---------------------
   L'audit : « reduire les grands intervalles en haut des pages
   transactionnelles ; conserver la respiration dans le corps ». */
.tete-page.compacte{padding:clamp(22px,2.4vw,34px) 0 clamp(22px,2.6vw,34px)}
.tete-page.compacte h1{max-width:22ch}
.tete-page.compacte .lead{margin-top:14px}

/* --- le formulaire remonte : deux colonnes des le premier ecran ---------- */
.demande-haut{padding-top:clamp(18px,2.2vw,30px)}
.demande-haut .grille{align-items:start}
.champ .aide{display:block;margin-top:6px;font:500 var(--t-micro)/1.45 var(--sans);color:var(--sourdine)}
.form-pied{margin-top:18px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.form-pied .autre{font:500 var(--t-petit)/1.5 var(--sans);color:var(--sourdine)}

/* --- les details facultatifs du formulaire -------------------------------
   L'audit : « regrouper les details facultatifs ». Le visiteur voit trois
   champs, pas huit, et deplie le reste s'il l'a sous la main. */
.champs-plus{margin:4px 0 6px;border-top:1px solid var(--ligne);padding-top:16px}
.champs-plus>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  font:600 var(--t-petit)/1.2 var(--sans);color:var(--bleu-texte);padding:6px 0;margin-bottom:10px}
.champs-plus>summary::-webkit-details-marker{display:none}
.champs-plus>summary::before{content:"";width:8px;height:8px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .2s var(--ease)}
.champs-plus[open]>summary::before{transform:rotate(-135deg) translate(-2px,-2px)}
.champs-plus>summary:focus-visible{outline:2px solid var(--bleu);outline-offset:3px;border-radius:4px}

/* --- le cas client -------------------------------------------------------
   L'audit : « les cartes expliquent surtout ce qui a ete produit ». Un cas
   porte le probleme, le perimetre, les modules, la place dans le parcours et
   l'usage releve. La liste de definition dit lequel est lequel, sans que le
   lecteur ait a le deviner. */
.cas{display:grid;gap:clamp(22px,3vw,40px);align-items:start;
  padding:clamp(26px,3.4vw,44px) 0;border-top:1px solid var(--ligne)}
.cas:first-of-type{border-top:0;padding-top:0}
@media(min-width:900px){.cas{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.cas-media{border-radius:var(--r-m);overflow:hidden;background:var(--bleu-pale);
  padding:clamp(10px,1.4vw,18px);position:sticky;top:100px}
@media(max-width:899px){.cas-media{position:static}}
.cas-media img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;border-radius:var(--r-s)}
.cas-dit{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.cas-dit h3{margin:0;font-size:clamp(22px,2.2vw,28px)}
.cas-dit dl{margin:6px 0 0;width:100%;display:grid;gap:14px 26px}
@media(min-width:560px){.cas-dit dl{grid-template-columns:minmax(140px,auto) 1fr}}
.cas-dit dt{font:600 var(--t-micro)/1.35 var(--sans);letter-spacing:.07em;text-transform:uppercase;
  color:var(--bleu-texte);padding-top:2px}
.cas-dit dd{margin:0;font-size:var(--t-corps);line-height:1.55;color:var(--texte)}
@media(max-width:559px){.cas-dit dd{margin-bottom:4px}}

/* --- les vues rapprochees ------------------------------------------------
   L'audit : « montrer la zone utile en gros plan ; une legende explique une
   action, pas seulement le lieu ». Le cadre 4/5 laisse le panneau atteindre
   une taille lisible dans une colonne de trois. */
.gros-plan .carte-media figure{aspect-ratio:4/5;background:var(--bleu-nuit)}
.gros-plan .carte-media figure img{object-position:50% 0}
.parcours figure>img.haut{object-position:50% 0}

/* La cellule qui porte un telephone le laisse deborder vers le bas. Quand la
   mention de conversation rejouee la suit, elle tombait dessus : on rend son
   rembourrage a la cellule. */
.grille>div:has(>.tel):has(>.rejoue){padding-bottom:clamp(18px,2.6vw,34px)}
.grille>div:has(>.tel):has(>.rejoue)>.tel{margin-bottom:16px}
.chat-boite+.rejoue{margin-top:14px}

/* Les initiales de l'equipe tombaient a 4,35:1 sur le bleu pale : --bleu a
   15 px n'atteint pas le seuil, --bleu-texte si. Mesure : contraste.mjs. */
.pict:not(:has(svg)){color:var(--bleu-texte)}