/* Hear — site. Noir et blanc, comme la pilule de l'application. Mouvements courts, courbe « sortie » de Hear.
   Aucune police ni ressource externe. */
:root{
  --fond:#09090b; --surface:#0f0f12; --carte:#131316; --carte-2:#1a1a1e; --sep:rgba(255,255,255,.075);
  --texte:#f5f5f7; --doux:#b9b9bf; --gris:#85858b; --puce:#26262b; --pilule:#040405; --bord-pilule:#2b2b31;
  --bleu:#0a84ff; --vert:#30d158; --rouge:#ff453a;
  --ressort:cubic-bezier(.32,.72,0,1); --sortie:cubic-bezier(.23,1,.32,1);
  --largeur:1040px; --marge:24px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{overflow-x:clip;overscroll-behavior-x:none;max-width:100%;scrollbar-width:thin;scrollbar-color:#2a2a30 transparent;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px;background:var(--fond)}
body{margin:0;background:var(--fond);color:var(--texte);overflow-x:hidden;overflow-x:clip;overscroll-behavior-x:none;position:relative;max-width:100%;
  font:16px/1.6 "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px;
  transition:text-decoration-color .18s var(--sortie)}
a:hover{text-decoration-color:#fff}
a:focus-visible,button:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:8px}
::selection{background:rgba(255,255,255,.28)}
.contenu{width:100%;max-width:var(--largeur);margin:0 auto;padding:0 var(--marge)}

/* langue : l'anglais par defaut (sans JavaScript aussi) */
html:not([data-lang="fr"]) [data-l="fr"], html[data-lang="fr"] [data-l="en"]{display:none!important}

/* ---------- barre du haut ---------- */
.barre{position:sticky;top:0;z-index:40;padding-top:env(safe-area-inset-top,0px);
  background:rgba(9,9,11,.38);-webkit-backdrop-filter:saturate(1.6) blur(26px);backdrop-filter:saturate(1.6) blur(26px);
  border-bottom:1px solid var(--sep)}
.barre .contenu{display:flex;align-items:center;gap:20px;height:60px}
.marque{display:flex;align-items:center;gap:11px;color:var(--texte);font-weight:700;font-size:18px;letter-spacing:-.2px;text-decoration:none}
.marque img{width:30px;height:30px;border-radius:7px}
.barre nav{display:flex;gap:4px;margin-left:auto}
.barre nav a{color:var(--doux);font-size:14px;padding:7px 12px;border-radius:9px;text-decoration:none;
  transition:background .18s var(--sortie),color .18s var(--sortie),transform .16s var(--sortie)}
.barre nav a:hover{background:rgba(255,255,255,.07);color:var(--texte)}
.barre nav a:active{transform:scale(.97)}
.barre nav a[aria-current="page"]{color:var(--texte)}
.langue{display:flex;background:#050507;border:1px solid var(--sep);border-radius:10px;padding:3px;gap:2px}
.langue button{font:inherit;font-size:12px;font-weight:600;letter-spacing:.4px;color:var(--gris);background:none;border:0;
  padding:5px 10px;border-radius:7px;cursor:pointer;
  transition:background .18s var(--sortie),color .18s var(--sortie),transform .16s var(--sortie)}
.langue button:active{transform:scale(.95)}
.langue button[aria-pressed="true"]{background:var(--puce);color:var(--texte)}

/* ---------- la mascotte : la pilule de Hear ----------
   Dimensions de l'application (70 x 45 au repos, 210 x 46 a l'ecoute), exprimees en « em » : la taille de la police
   fixe l'echelle (--u). Les yeux : 6 x 9,6, a +/- 8,6 du centre, comme dans l'application. */
.mascotte{--u:6px;--k:2.3;--gx:0;--gy:0;--bl:1;--op:1;--w:70em;--h:45em;
  font-size:var(--u);position:relative;width:76em;height:50em;margin:0 auto;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.mascotte.saut{animation:saut .5s var(--ressort)}
@keyframes saut{0%{transform:scale(1)}28%{transform:scale(.93,1.06)}62%{transform:scale(1.045,.97)}100%{transform:scale(1)}}
.pilule{position:absolute;left:50%;top:50%;width:var(--w);height:var(--h);transform:translate(-50%,-50%);border-radius:99em;
  background:var(--pilule);border:max(1px,.14em) solid var(--bord-pilule);
  box-shadow:0 1.2em 3.2em rgba(0,0,0,.7),inset 0 .15em .5em rgba(255,255,255,.035);
  transition:width .45s var(--ressort),height .45s var(--ressort)}
.mascotte[data-etat="ecoute"]{--w:210em;--h:46em}
.mascotte[data-etat="travail"]{--w:150em;--h:40em}
.yeux,.zz{position:absolute;inset:0;pointer-events:none;transition:opacity .2s var(--sortie)}
.oeil{position:absolute;left:50%;top:50%;width:6em;height:9.6em;margin:-4.8em 0 0 -3em;border-radius:3em;background:var(--texte);
  opacity:var(--op);will-change:transform;
  transform:translate(calc(var(--dx) + var(--gx) * var(--k) * 2em),calc(var(--gy) * var(--k) * 1.2em)) scaleY(var(--bl))}
.oeil.g,.arc.g{--dx:-8.6em}.oeil.d,.arc.d{--dx:8.6em}
.arc{position:absolute;left:50%;top:50%;width:8.8em;height:4.2em;margin:-1.4em 0 0 -4.4em;border:0 solid var(--texte);
  opacity:calc(1 - var(--op));transform:translateX(var(--dx))}
[data-humeur="dort"] .arc{border-bottom-width:.42em;border-radius:0 0 50% 50%}
[data-humeur="content"] .arc{border-top-width:.45em;border-radius:50% 50% 0 0;margin-top:-2em}
.zz b{position:absolute;left:calc(50% + 17 * var(--u));top:calc(50% + 6 * var(--u));font:600 4.6em/1 "Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  color:var(--texte);opacity:0}
[data-humeur="dort"] .zz b{animation:zz 3.6s linear infinite}
.zz b:nth-child(2){animation-delay:1.2s}.zz b:nth-child(3){animation-delay:2.4s}
@keyframes zz{0%{opacity:0;transform:translate(0,0) scale(.75)}30%{opacity:.8}100%{opacity:0;transform:translate(calc(9 * var(--u)),calc(-13 * var(--u))) scale(1.35)}}
.onde{position:absolute;left:11%;top:0;width:78%;height:100%;opacity:0;pointer-events:none;transition:opacity .25s var(--sortie)}
.etiq{position:absolute;inset:0;display:grid;place-items:center;font:500 13.5em/1 "Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  color:var(--texte);opacity:0;pointer-events:none;transition:opacity .2s var(--sortie)}
[data-etat="ecoute"] .yeux,[data-etat="ecoute"] .zz,[data-etat="travail"] .yeux,[data-etat="travail"] .zz{opacity:0}
[data-etat="ecoute"] .onde{opacity:1}
[data-etat="travail"] .etiq{opacity:.9;animation:respire 1.2s ease-in-out infinite alternate}
@keyframes respire{from{opacity:.45}to{opacity:.95}}

/* la scene d'accueil */
.hero{padding:40px 0 30px;text-align:center}
.scene-m{position:relative;display:grid;place-items:center;height:min(330px,60vw);margin-top:6px}
.scene-m .mascotte{--u:min(6px,calc(100vw / 88))}
.halo{position:absolute;left:50%;top:50%;width:min(900px,140vw);height:min(560px,100vw);transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.075),rgba(255,255,255,.02) 55%,transparent 75%)}
.anneau{position:absolute;left:50%;top:50%;width:min(620px,112vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  border:1px solid rgba(255,255,255,.055);animation:souffle 7s ease-in-out infinite alternate}
.anneau.deux{width:min(900px,160vw);border-color:rgba(255,255,255,.03);animation-delay:-3.5s}
@keyframes souffle{from{transform:translate(-50%,-50%) scale(.97)}to{transform:translate(-50%,-50%) scale(1.03)}}
.indice{position:absolute;left:0;right:0;bottom:0;margin:0;color:var(--gris);font-size:13px;letter-spacing:.2px;pointer-events:none}
.hero h1{margin:18px auto 0;max-width:17ch;font-size:clamp(38px,7.4vw,72px);line-height:1.04;letter-spacing:-.04em;font-weight:700;text-wrap:balance;
  background:linear-gradient(180deg,#fff 30%,#9a9aa1);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .intro{margin:22px auto 0;max-width:34em;font-size:clamp(17px,2.4vw,20px);color:var(--doux);line-height:1.55}
.etiquette{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--doux);
  background:var(--carte);border:1px solid var(--sep);border-radius:99px;padding:6px 14px}
.etiquette i{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.8)}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
.bouton{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 24px;border-radius:24px;font:inherit;font-size:15px;
  font-weight:600;border:0;cursor:pointer;color:#0a0a0c;background:#f5f5f7;text-decoration:none;
  transition:background .18s var(--sortie),transform .16s var(--sortie),opacity .2s var(--sortie)}
.bouton:hover{background:#fff}
.bouton:active{transform:scale(.97)}
.bouton.calme{background:var(--puce);color:var(--texte)}
.bouton.calme:hover{background:#34343a}
.bouton.attente{background:var(--carte);color:var(--doux);border:1px solid var(--sep);cursor:default}
.bouton.attente:hover{background:var(--carte)}
.bouton.attente:active{transform:none}

/* la pilule qui suit l'ecran (apparait quand la grande sort de la vue) */
.dock{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:35;transform:translate(-50%,26px) scale(.9);opacity:0;
  pointer-events:none;transition:opacity .28s var(--sortie),transform .34s var(--sortie)}
.dock.visible{opacity:1;transform:translate(-50%,0) scale(1);pointer-events:auto}
.dock .mascotte{--u:1.05px;--k:2.6}

/* ---------- sections ---------- */
section{padding:92px 0 0}
.titre-s{display:block;color:var(--gris);font-size:12px;letter-spacing:.7px;text-transform:uppercase;margin:0 0 14px}
h2{margin:0;font-size:clamp(28px,4.6vw,44px);line-height:1.1;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
.chapeau{margin:14px 0 0;max-width:38em;color:var(--doux);font-size:18px;line-height:1.55}
.centre{text-align:center}.centre .chapeau{margin-left:auto;margin-right:auto}

/* les trois modes (cartes de l'application) : on en choisit un, la demonstration suit */
.cartes-m{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px}
.cm{position:relative;display:flex;flex-direction:column;text-align:left;font:inherit;color:var(--texte);cursor:pointer;
  border:1px solid rgba(255,255,255,.08);background:var(--carte);border-radius:20px;padding:22px 22px 20px;overflow:hidden;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .28s var(--sortie),border-color .25s var(--sortie),background .25s var(--sortie),box-shadow .25s var(--sortie)}
.cm::before,.fonction::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;z-index:0;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.085),transparent 70%);transition:opacity .3s var(--sortie)}
.cm>*,.fonction>*{position:relative;z-index:1}
.cm:active{transform:perspective(900px) scale(.975)}
.cm .nom{font-size:22px;font-weight:700;letter-spacing:-.2px}
.cm .mod{font-size:13px;color:var(--gris);margin-top:2px}
.cm .desc{font-size:15px;line-height:1.5;color:#b4b4ba;margin:16px 0 20px;flex:1}
.pts{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--gris);margin-top:7px}
.pts b{font-weight:600;color:var(--texte)}
.pts span{display:flex;gap:4px}
.pts i{width:16px;height:5px;border-radius:3px;background:rgba(255,255,255,.13);transition:background .3s var(--sortie)}
.pts i.o{background:#d8d8dc}
.badge{font-style:normal;align-self:flex-start;margin-top:18px;font-size:11.5px;font-weight:600;letter-spacing:.2px;padding:3px 10px;
  border-radius:10px;background:rgba(255,255,255,.1);color:#cfcfd4}
.coche{position:absolute!important;top:16px;right:16px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;
  opacity:0;transform:scale(.8);transition:opacity .2s var(--sortie),transform .24s var(--sortie)}
.coche svg{width:12px;height:12px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cm.on{background:#1d1d21;border-color:rgba(255,255,255,.34);box-shadow:0 10px 36px rgba(0,0,0,.5)}
.cm.on .coche{opacity:1;transform:scale(1)}
.cm.ultra{background:linear-gradient(160deg,#16213a,#0d1424);border-color:rgba(120,175,255,.32)}
.cm.ultra .pts i.o{background:#8fbaff}
.cm.ultra .badge{background:rgba(70,130,255,.2);color:#9fc3ff}
.cm.ultra .mod{color:#8aa6d4}
.cm.ultra.on{background:linear-gradient(160deg,#0d2347,#14305c);border-color:rgba(120,175,255,.6);
  box-shadow:0 0 34px rgba(50,120,255,.3),inset 0 0 16px rgba(80,150,255,.1)}

/* la demonstration */
.ecran{position:relative;margin:34px auto 0;max-width:860px;border-radius:22px;overflow:hidden;background:#101013;border:1px solid var(--sep);
  box-shadow:0 40px 110px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.4)}
.ecran .haut{display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;background:rgba(0,0,0,.35)}
.ecran .haut i{width:13px;height:13px;border-radius:50%}
.ecran .haut i:nth-child(1){background:#ff5f57}.ecran .haut i:nth-child(2){background:#febc2e}.ecran .haut i:nth-child(3){background:#28c840}
.ecran .haut span{margin-left:12px;font-size:13px;color:var(--gris)}
.ecran .page{padding:30px 34px 150px;min-height:340px}
.ecran .texte{margin:0;font-size:clamp(17px,2.4vw,21px);line-height:1.6;color:var(--texte);white-space:pre-wrap;min-height:5.4em;transition:opacity .3s var(--sortie)}
.ecran .texte.efface{opacity:0}
.ecran .texte .cur{display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:-.2em;background:#fff;animation:clignote 1.1s steps(2,jump-none) infinite}
@keyframes clignote{50%{opacity:0}}
.ecran .vide{color:#5a5a60}
.ecran .pose{position:absolute;left:0;right:0;bottom:20px;display:flex;justify-content:center}
.ecran .pose .mascotte{--u:1.25px;--k:2.6}
.reponse{position:absolute;left:50%;bottom:104px;width:min(430px,88%);transform:translate(-50%,12px);background:var(--pilule);
  border:1px solid var(--bord-pilule);border-radius:22px;padding:16px 20px 18px;box-shadow:0 18px 50px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transition:opacity .28s var(--sortie),transform .34s var(--sortie)}
.reponse.on{opacity:1;transform:translate(-50%,0)}
.reponse .q{display:block;font-size:13px;color:var(--gris);margin-bottom:6px}
.reponse .a{display:block;font-size:17px;color:var(--texte);min-height:1.5em}
.touches{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.tb{display:inline-flex;align-items:center;gap:13px;height:56px;padding:0 22px 0 12px;border-radius:17px;background:var(--carte);border:1px solid var(--sep);
  color:var(--texte);font:inherit;font-size:15px;cursor:pointer;
  transition:transform .16s var(--sortie),background .18s var(--sortie),border-color .18s var(--sortie)}
.tb:hover{background:var(--carte-2);border-color:rgba(255,255,255,.14)}
.tb:active,.tb.enfonce{transform:scale(.97)}
.tb.actif{border-color:rgba(255,255,255,.4)}
.touche{display:inline-grid;place-items:center;min-width:38px;height:32px;padding:0 10px;border-radius:8px;font-size:13px;font-weight:600;
  color:var(--texte);background:var(--puce);box-shadow:0 3px 0 rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.07);
  transition:transform .12s var(--sortie),box-shadow .12s var(--sortie)}
.tb:active .touche,.tb.enfonce .touche{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.07)}
.legende{margin:18px 0 0;text-align:center;color:var(--gris);font-size:13.5px}

/* grille de fonctions */
.grille{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px}
.fonction{position:relative;overflow:hidden;background:var(--carte);border-radius:20px;padding:26px 24px 24px;border:1px solid rgba(255,255,255,.06);
  transition:transform .28s var(--sortie),border-color .28s var(--sortie)}
.icone{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--puce);margin-bottom:20px}
.icone svg{width:22px;height:22px;stroke:var(--texte);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fonction h3{margin:0 0 6px;font-size:18px;letter-spacing:-.1px}
.fonction p{margin:0;font-size:15px;color:#b4b4ba;line-height:1.55}

/* encadre « toujours actif » (comme dans les reglages) */
.encadre{margin-top:38px;border:1px dashed rgba(255,255,255,.16);border-radius:20px;padding:28px 30px;display:grid;
  grid-template-columns:1fr auto;gap:22px;align-items:center}
.encadre h3{margin:0 0 6px;font-size:20px;letter-spacing:-.15px}
.encadre p{margin:0;color:var(--doux);font-size:16px;max-width:42em}
.liste-ok{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:7px;font-size:15px;color:var(--doux)}
.liste-ok li{display:flex;gap:10px;align-items:flex-start}
.liste-ok li::before,.resume li::before{content:"";flex:none;width:17px;height:17px;margin-top:4px;border-radius:50%;background:#f5f5f7
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.3l2 2 4-4.4' fill='none' stroke='%23111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.liste-ok li::before{margin-top:3px}

.besoins{margin-top:38px;background:var(--carte);border:1px solid rgba(255,255,255,.06);border-radius:20px;overflow:hidden}
.besoins div{display:flex;justify-content:space-between;gap:24px;padding:17px 26px}
.besoins div+div{border-top:1px solid var(--sep)}
.besoins b{font-weight:600}
.besoins span{color:var(--doux);text-align:right}

/* ---------- pages de texte (confidentialite, licences) ---------- */
.doc{padding:64px 0 24px;max-width:760px}
.doc h1{margin:0;font-size:clamp(34px,6vw,52px);line-height:1.08;letter-spacing:-.035em}
.doc .maj{margin:14px 0 0;color:var(--gris);font-size:14px}
.doc .intro{margin:22px 0 0;font-size:19px;line-height:1.6;color:var(--doux)}
.doc h2{margin:56px 0 0;font-size:26px;letter-spacing:-.02em}
.doc h3{margin:30px 0 0;font-size:18px}
.doc p,.doc li{color:var(--doux);font-size:16.5px;line-height:1.7}
.doc p{margin:14px 0 0}
.doc ul{margin:12px 0 0;padding-left:22px}
.doc li{margin:7px 0}
.doc li::marker{color:var(--gris)}
.doc strong{color:var(--texte);font-weight:600}
.doc code{font:13.5px/1.4 "Cascadia Mono",Consolas,ui-monospace,monospace;background:#050507;border:1px solid var(--sep);padding:2px 7px;border-radius:6px;color:var(--texte)}
.resume{margin:34px 0 0;background:var(--carte);border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:24px 26px 20px}
.resume h2{margin:0 0 4px;font-size:20px}
.resume ul{list-style:none;padding:0;margin:14px 0 0}
.resume li{display:flex;gap:12px;align-items:flex-start;margin:9px 0;font-size:16px}
.sommaire{margin:30px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.sommaire a{height:32px;padding:0 14px;border-radius:16px;background:var(--puce);color:var(--texte);font-size:13.5px;display:flex;align-items:center;text-decoration:none;
  transition:background .18s var(--sortie),transform .16s var(--sortie)}
.sommaire a:hover{background:#34343a}
.sommaire a:active{transform:scale(.97)}
.defile{margin:18px 0 0;overflow-x:auto;border-radius:16px;background:var(--carte);border:1px solid rgba(255,255,255,.06);scrollbar-width:thin;scrollbar-color:#3a3a40 transparent}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
th,td{text-align:left;vertical-align:top;padding:13px 16px;border-top:1px solid var(--sep)}
thead th{border-top:0;color:var(--gris);font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;background:rgba(0,0,0,.25)}
td{color:var(--doux)}
td:first-child{color:var(--texte);font-weight:600}
.pastille-lic{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:9px;background:var(--puce);color:var(--texte);white-space:nowrap;text-decoration:none}

/* ---------- pied de page ---------- */
.pied{margin-top:120px;border-top:1px solid var(--sep);padding-top:56px;color:var(--gris);font-size:14px;overflow:hidden}
.pied a{color:var(--doux)}
.pied p{margin:0}
.pied-haut{display:flex;flex-direction:column;align-items:center;gap:40px;text-align:center}
.pied-marque{display:flex;flex-direction:column;align-items:center}
.pied-marque .marque{display:inline-flex;margin-bottom:14px}
.pied-marque p{max-width:26em;line-height:1.7}
.pied-cols{display:flex;flex-wrap:wrap;justify-content:center;gap:34px clamp(40px,9vw,120px)}
.pied-col{display:flex;flex-direction:column;gap:12px;align-items:center}
.pied-col h2{margin:0 0 6px;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);padding-left:.2em}
.pied-col a{text-decoration:none}
.pied-col a:hover{color:#fff}
.pied .petit{margin:44px auto 0;font-size:12.5px;line-height:1.6;max-width:56em;text-align:center}
/* le nom, tres grand, qui s'efface vers le bas */
.pied-nom{margin-top:10px;text-align:center;user-select:none;pointer-events:none;line-height:.82;height:.88em;
  font:600 clamp(150px,29vw,380px)/.82 "Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;letter-spacing:-.055em}
.pied-nom span{display:inline-block;padding:0 .055em .04em 0;transform:translateX(-.04em);color:transparent;background:linear-gradient(180deg,#34343b 0%,rgba(52,52,59,.45) 55%,rgba(9,9,11,0) 100%);
  -webkit-background-clip:text;background-clip:text}
.pied-bas{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;padding-top:18px;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--sep);font-size:12.5px;position:relative;margin-top:14px;text-align:center}

/* 404 */
.perdu{padding:110px 0 40px;text-align:center}
.perdu h1{margin:0 0 6px;font-size:clamp(64px,16vw,140px);letter-spacing:-.05em;line-height:1;color:#26262b}
.perdu .mascotte{margin-bottom:10px}

/* ---------- entree douce au defilement (JS ajoute .pret ; sans JS tout reste visible) ---------- */
.pret .vu-a{opacity:0}
.pret .vu-a.vu{opacity:1;animation:entree .34s var(--sortie) backwards}
@keyframes entree{from{opacity:0;transform:translateY(14px)}}

@media (hover:hover) and (pointer:fine){
  .cm:hover::before,.fonction:hover::before{opacity:1}
  .cm:hover{border-color:rgba(255,255,255,.2)}
  .cm.ultra:hover{border-color:rgba(120,175,255,.55)}
  .fonction:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.14)}
}

@media (max-width:860px){
  .cartes-m,.grille{grid-template-columns:1fr}
  .encadre{grid-template-columns:1fr}
}
@media (max-width:640px){
  :root{--marge:16px}
  .hero{padding-top:24px}
  section{padding-top:68px}
  .barre .contenu{gap:10px}
  .barre nav a{padding:7px 9px;font-size:13.5px}
  .marque span{display:none}
  .ecran .page{padding:22px 20px 130px;min-height:300px}
  .besoins div{flex-direction:column;gap:2px;padding:14px 18px}
  .besoins span{text-align:left}
  .encadre{padding:22px 20px}
  .doc{padding-top:44px}
  .ecran .pose .mascotte{--u:1.1px}
  .reponse{bottom:92px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .pret .vu-a{opacity:1}
  [data-humeur="dort"] .zz b{animation:none;opacity:.6}
}

/* invitation : la touche F9 « respire » une fois pour dire « essayez » */
.tb.invite{animation:invite 1.6s var(--sortie) 2}
@keyframes invite{0%{box-shadow:0 0 0 0 rgba(255,255,255,.35)}70%,100%{box-shadow:0 0 0 14px rgba(255,255,255,0)}}
.perdu .mascotte{--u:min(4px,calc(100vw / 100));margin:10px auto 18px}

/* barre de defilement fine et discrete */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#26262b;border-radius:8px;border:3px solid var(--fond)}
::-webkit-scrollbar-thumb:hover{background:#3a3a41}

/* telephone : le pied de page se range proprement, rien ne depasse sur les cotes */
@media (max-width:640px){
  .pied{margin-top:80px;padding-top:40px}
  .pied-haut{gap:30px}
  .pied-cols{display:grid;grid-template-columns:repeat(3,auto);gap:26px 22px;justify-content:center}
  .pied-col{gap:10px;font-size:13.5px}
  .pied-col h2{font-size:10.5px;letter-spacing:.14em}
  .pied .petit{margin-top:34px;font-size:12px}
  .pied-nom{font-size:clamp(110px,34vw,200px);margin-top:4px}
}
@media (max-width:380px){ .pied-cols{grid-template-columns:repeat(2,auto)} }

/* ---------- Assistant : l'orbe (le logo de l'assistant) ---------- */
.orbe{--u:1px;position:relative;width:calc(220*var(--u));height:calc(220*var(--u));margin:0 auto;display:grid;place-items:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.orbe .r{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.13)}
.orbe .r.b{inset:calc(34*var(--u));border-color:rgba(255,255,255,.2)}
.orbe .r.c{inset:calc(-26*var(--u));border-color:rgba(255,255,255,.06)}
.orbe .bille{position:relative;width:calc(92*var(--u));height:calc(92*var(--u));border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#fff 0%,#ececec 30%,#b4b4b8 70%,#77777c 100%);
  box-shadow:0 0 calc(60*var(--u)) rgba(255,255,255,.22),inset 0 calc(-8*var(--u)) calc(14*var(--u)) rgba(0,0,0,.18);
  transform:translate(calc(var(--gx,0)*8px),calc(var(--gy,0)*8px));transition:transform .12s linear,box-shadow .4s var(--sortie)}
.orbe::before{content:"";position:absolute;inset:calc(-60*var(--u));border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.07),transparent 62%);pointer-events:none}
.orbe[data-etat="ecoute"] .bille{animation:respire 1.1s ease-in-out infinite;box-shadow:0 0 calc(90*var(--u)) rgba(255,255,255,.4),inset 0 calc(-8*var(--u)) calc(14*var(--u)) rgba(0,0,0,.18)}
.orbe[data-etat="ecoute"] .r.b{animation:onde-o 1.6s var(--sortie) infinite}
.orbe[data-etat="ecoute"] .r.c{animation:onde-o 1.6s var(--sortie) .5s infinite}
.orbe[data-etat="reflechit"] .r.b{animation:tourne 2.4s linear infinite;border-style:dashed}
@keyframes respire{50%{transform:translate(calc(var(--gx,0)*8px),calc(var(--gy,0)*8px)) scale(1.12)}}
@keyframes onde-o{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.18);opacity:0}}
@keyframes tourne{to{transform:rotate(360deg)}}
.orbe-legende{text-align:center;color:var(--gris);font-size:13.5px;min-height:1.6em;margin:12px 0 0}
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px;counter-reset:e}
.etape{position:relative;background:var(--carte);border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:26px 24px}
.etape::before{counter-increment:e;content:counter(e);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--puce);font-weight:600;margin-bottom:14px}
.etape h3{margin:0 0 6px;font-size:18px}.etape p{margin:0;color:var(--doux);font-size:15px}
.dialogue{margin:26px auto 0;max-width:640px;display:flex;flex-direction:column;gap:10px}
.dialogue .q,.dialogue .a{max-width:84%;padding:11px 16px;border-radius:18px;font-size:15px;line-height:1.5}
.dialogue .q{align-self:flex-end;background:#26262b;border-bottom-right-radius:6px}
.dialogue .a{align-self:flex-start;background:var(--carte);border:1px solid var(--sep);color:var(--doux);border-bottom-left-radius:6px}
.fiche{margin-top:30px;background:var(--carte);border:1px solid rgba(255,255,255,.06);border-radius:20px;overflow:hidden}
.fiche div{display:flex;justify-content:space-between;gap:20px;padding:15px 22px;border-top:1px solid var(--sep)}
.fiche div:first-child{border-top:0}.fiche b{font-weight:600}.fiche span{color:var(--doux);text-align:right}
.pied-nom.long{font-size:clamp(64px,15.5vw,210px)}
@media (max-width:860px){.etapes{grid-template-columns:1fr}}
@media (max-width:640px){.fiche div{flex-direction:column;gap:2px}.fiche span{text-align:left}.pied-nom.long{font-size:clamp(56px,17vw,120px)}}
@media (prefers-reduced-motion:reduce){.orbe .bille,.orbe .r{animation:none!important;transition:none}}
@media (max-width:560px){
  .barre nav a[href="/privacy"],.barre nav a[href="/licenses"]{display:none}   /* ils restent dans le pied de page */
  .barre nav{margin-left:auto}
}