/* Xodyia — feuille de style commune aux démonstrations commerciales.
   Jetons repris du site vitrine. Aucune dépendance externe : tout fonctionne hors ligne. */

:root{
  --bg-0:#0A1424; --bg-1:#0D1A2E; --bg-2:#122239;
  --panel:rgba(255,255,255,.045); --panel-fort:rgba(255,255,255,.07);
  --bord:rgba(111,212,208,.18); --bord-fort:rgba(111,212,208,.36);
  --teal:#10B8B1; --teal-clair:#6FD4D0; --aqua:#66D8D0; --navy:#071C3B;
  --txt:#F3F6F8; --txt-moy:#AEB9C4; --txt-bas:#7C8794;
  --ok:#4ADE80; --attention:#FBBF24; --r-s:8px; --r-m:12px; --r-l:20px; --r-xl:28px;
  --police:'Montserrat',-apple-system,'Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
/* Un élément caché doit le rester, même quand sa classe (.btn, .segments…)
   lui donne un display : sans cela, l'attribut hidden est sans effet. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--bg-0); color:var(--txt); font-family:var(--police);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3,h4{margin:0; font-weight:600; line-height:1.25}

/* ---------- ossature ---------- */
.enveloppe{max-width:1180px; margin:0 auto; padding:20px 18px 64px}
.entete{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:14px 18px; margin-bottom:22px;
  background:var(--panel); border:1px solid var(--bord); border-radius:var(--r-xl);
}
.marque{display:flex; align-items:center; gap:9px; font-weight:700; letter-spacing:-.01em}
.pastille{
  width:22px; height:22px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 32% 30%, var(--aqua), var(--teal) 60%, transparent 61%);
  border:1.5px solid var(--teal-clair);
}
.entete .pousse{margin-left:auto}
.surtitre{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal-clair); font-weight:600; margin-bottom:10px;
}
.chapo{color:var(--txt-moy); max-width:62ch; margin:10px 0 0}

/* ---------- boutons ---------- */
button{font-family:inherit; font-size:inherit; cursor:pointer; border:0}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:999px; font-weight:600; font-size:14px;
  background:var(--teal); color:var(--navy); transition:transform .12s, filter .12s;
}
.btn:hover{filter:brightness(1.08)} .btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.4; cursor:not-allowed; filter:none; transform:none}
.btn-creux{background:transparent; color:var(--txt); border:1px solid var(--bord-fort)}
.btn-creux:hover{background:var(--panel-fort); filter:none}
.btn-petit{padding:7px 14px; font-size:13px}

/* ---------- sélecteur de marque ---------- */
.segments{display:flex; gap:4px; padding:4px; background:var(--bg-1); border-radius:999px; border:1px solid var(--bord)}
.segments button{
  padding:7px 15px; border-radius:999px; background:transparent;
  color:var(--txt-bas); font-size:13px; font-weight:600; transition:.15s;
}
.segments button[aria-pressed="true"]{background:var(--teal); color:var(--navy)}

/* ---------- scène : téléphone + tableau de bord ---------- */
.scene{display:grid; grid-template-columns:340px 1fr; gap:26px; align-items:start}
@media (max-width:900px){ .scene{grid-template-columns:1fr} }

.telephone{
  background:#05101d; border:9px solid #1b2740; border-radius:34px;
  padding:0; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.5);
  position:sticky; top:20px;
}
@media (max-width:900px){ .telephone{position:static; max-width:340px; margin:0 auto} }
.tel-barre{
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 18px 5px; font-size:11px; color:var(--txt-bas); font-weight:600;
}
.tel-ecran{height:512px; overflow-y:auto; padding:14px 16px 22px; scroll-behavior:smooth}
.tel-ecran::-webkit-scrollbar{width:0}

.carte{
  background:var(--panel); border:1px solid var(--bord);
  border-radius:var(--r-l); padding:20px 22px; margin-bottom:18px;
}
.carte h3{font-size:16px; margin-bottom:4px}
.carte-titre{
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
  padding-bottom:12px; border-bottom:1px solid var(--bord);
}
.carte-titre h3{flex:1}


/* ---------- éléments d'interface simulés ---------- */
.creneau{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:12px 14px; margin-bottom:8px; border-radius:var(--r-m);
  background:var(--panel); border:1px solid var(--bord); color:var(--txt);
  font-size:14px; transition:.15s;
}
.creneau:hover{border-color:var(--bord-fort); background:var(--panel-fort)}
.creneau[aria-pressed="true"]{background:var(--teal); color:var(--navy); border-color:var(--teal); font-weight:600}
.creneau .h{font-weight:600; font-variant-numeric:tabular-nums}
.creneau .d{margin-left:auto; font-size:12px; color:var(--txt-bas)}
.creneau[aria-pressed="true"] .d{color:rgba(7,28,59,.7)}

.champ{margin-bottom:12px}
.champ label{display:block; font-size:12px; color:var(--txt-moy); margin-bottom:5px; font-weight:500}
.champ input,.champ select,.champ textarea{
  width:100%; padding:10px 12px; border-radius:var(--r-s); font-family:inherit; font-size:14px;
  background:var(--bg-1); border:1px solid var(--bord); color:var(--txt);
}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:2px solid var(--teal); outline-offset:1px}

.sms{
  background:#0e2033; border:1px solid var(--bord); border-left:3px solid var(--teal);
  border-radius:var(--r-m); padding:12px 14px; margin-bottom:10px; font-size:13.5px;
}
.sms .exp{font-size:11px; color:var(--teal-clair); font-weight:600; margin-bottom:4px; letter-spacing:.04em}
.sms .hr{font-size:11px; color:var(--txt-bas); margin-top:6px; font-variant-numeric:tabular-nums}

.bulle{max-width:82%; padding:10px 13px; border-radius:14px; margin-bottom:9px; font-size:13.5px; line-height:1.5}
.bulle.eux{background:var(--panel-fort); border-bottom-left-radius:4px}
.bulle.nous{background:var(--teal); color:var(--navy); margin-left:auto; border-bottom-right-radius:4px; font-weight:500}
.bulle .src{
  display:block; margin-top:7px; padding-top:6px; border-top:1px solid rgba(111,212,208,.22);
  font-size:11px; color:var(--teal-clair); font-weight:600;
}
.bulle.alerte{border:1px solid var(--attention); background:rgba(251,191,36,.09)}
.bulle.alerte .src{color:var(--attention); border-top-color:rgba(251,191,36,.3)}

.ecrit{display:flex; gap:4px; padding:10px 13px}
.ecrit i{width:6px; height:6px; border-radius:50%; background:var(--txt-bas); animation:pulse 1.2s infinite}
.ecrit i:nth-child(2){animation-delay:.2s} .ecrit i:nth-child(3){animation-delay:.4s}
@keyframes pulse{0%,60%,100%{opacity:.25; transform:translateY(0)}30%{opacity:1; transform:translateY(-3px)}}

/* ---------- tableaux et listes ---------- */
table{width:100%; border-collapse:collapse; font-size:13.5px}
th{
  text-align:left; padding:9px 10px; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--txt-bas); font-weight:600; border-bottom:1px solid var(--bord);
}
td{padding:11px 10px; border-bottom:1px solid rgba(111,212,208,.09); vertical-align:middle}
tr:last-child td{border-bottom:0}
.num{font-variant-numeric:tabular-nums}

.etiq{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:600; letter-spacing:.02em;
}
.etiq.vert{background:rgba(74,222,128,.15); color:var(--ok)}
.etiq.teal{background:rgba(16,184,177,.16); color:var(--teal-clair)}
.etiq.jaune{background:rgba(251,191,36,.15); color:var(--attention)}
.etiq.gris{background:var(--panel-fort); color:var(--txt-bas)}

.vide{padding:30px 16px; text-align:center; color:var(--txt-bas); font-size:13px}

/* ---------- apparitions ---------- */
.apparait{animation:monte .45s cubic-bezier(.22,1,.36,1) both}
@keyframes monte{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.surligne{animation:flash 1.6s ease-out}
@keyframes flash{0%{background:rgba(16,184,177,.28)}100%{background:transparent}}

/* ---------- note de bas de démo ---------- */
.note{
  margin-top:26px; padding:15px 18px; border-radius:var(--r-m);
  background:var(--panel); border-left:3px solid var(--teal);
  font-size:13px; color:var(--txt-moy);
}
.note b{color:var(--txt)}
a{color:var(--teal-clair)}
:focus-visible{outline:2px solid var(--teal-clair); outline-offset:2px; border-radius:4px}

/* Sur petit écran, le bandeau de pilotage ne doit pas recouvrir la scène. */
@media (max-width:900px){
  .pilote{position:static; backdrop-filter:none}
  .tel-ecran{height:400px}
}

/* ---------- quand les scripts ne s'exécutent pas ----------
   Les aperçus de pièces jointes (WhatsApp, Gmail, l'application Fichiers
   d'iOS et d'Android) affichent le HTML et la feuille de style mais
   bloquent le JavaScript. Sans ce bandeau, la démonstration paraît
   simplement cassée. */
.sansjs{
  margin-bottom:22px; padding:18px 20px; border-radius:var(--r-l);
  background:rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.4);
}
.sansjs b{display:block; color:var(--attention); font-size:15px; margin-bottom:6px}
.sansjs p{margin:0; font-size:13.5px; color:var(--txt-moy); line-height:1.65}
.sansjs p + p{margin-top:8px}

/* ---------- débordement horizontal ----------
   Un élément de grille a une largeur minimale de « auto », c'est-à-dire
   celle de son contenu le plus large. Un tableau ou une ligne de scores
   pousse alors la colonne au-delà de l'écran, et toute la page se met à
   défiler latéralement sur téléphone. min-width:0 lui rend le droit de
   rétrécir. */
.scene > *, .duo > *{min-width:0}
.telephone{max-width:100%}
.carte{overflow-wrap:anywhere}
table{table-layout:fixed}


/* =====================================================================
   BANDE DE NARRATION
   La phrase du bas est le vrai support de la démonstration. Elle est
   écrite pour être lue à voix haute et doit rester lisible dans une
   vidéo regardée sur un téléphone : d'où la taille, le contraste et
   la largeur limitée.
   ===================================================================== */
body{padding-bottom:132px}

.bande{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:rgba(7,15,28,.94); backdrop-filter:blur(16px) saturate(1.2);
  border-top:1px solid var(--bord-fort);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  transition:opacity .5s, transform .5s;
}
.bande.effacee{opacity:0; transform:translateY(14px); pointer-events:none}

.bande-progres{height:2px; background:rgba(255,255,255,.07)}
.bande-progres span{display:block; height:100%; width:0; background:var(--teal); transition:width .5s ease}

.bande-corps{
  max-width:1180px; margin:0 auto; padding:16px 18px 14px;
  display:flex; align-items:center; gap:22px;
}
.bande-texte{
  flex:1; margin:0; font-size:19px; line-height:1.45; font-weight:500;
  color:var(--txt); max-width:60ch; text-wrap:balance; min-height:1.45em;
}
.bande-texte.apparait{animation:monte .4s cubic-bezier(.22,1,.36,1) both}

.bande-boutons{display:flex; align-items:center; gap:8px; flex:none}
.rond{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:14px;
  background:var(--panel-fort); color:var(--txt-moy); transition:.15s;
}
.rond:hover{background:rgba(255,255,255,.13); color:var(--txt)}
.rond.lecture{width:48px; height:48px; background:var(--teal); color:var(--navy); font-size:15px}
.rond.lecture:hover{filter:brightness(1.08); background:var(--teal)}
.rond.lecture .ic-pause{display:none}
.bande.joue .rond.lecture .ic-play{display:none}
.bande.joue .rond.lecture .ic-pause{display:inline}

.bande-points{
  max-width:1180px; margin:0 auto; padding:0 18px 14px;
  display:flex; gap:6px;
}
.point{
  flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.1);
  padding:0; transition:background .3s;
}
.point.fait{background:var(--teal-clair)}
.point:hover{background:var(--aqua)}

/* ---------- mode vidéo ----------
   Tout ce qui sert au vendeur disparaît : il ne reste que la scène et
   la phrase. C'est le cadrage d'une vidéo YouTube. */
body.mode-video .entete,
body.mode-video .surtitre,
body.mode-video h1,
body.mode-video .chapo,
body.mode-video .note,
body.mode-video .bande-points{display:none}
body.mode-video .enveloppe{padding-top:38px}
body.mode-video .bande-texte{font-size:23px}
body.mode-video .bande-boutons{opacity:.35}
body.mode-video .bande-boutons:hover{opacity:1}

@media (max-width:900px){
  body{padding-bottom:158px}
  .bande-corps{flex-direction:column; align-items:stretch; gap:12px; padding:14px 16px 10px}
  .bande-texte{font-size:16.5px}
  .bande-boutons{justify-content:center}
  body.mode-video .bande-texte{font-size:18px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}


/* ---------- légendes de scène et bilan ----------
   Dire à qui appartient chaque écran. Un profane ne devine pas qu'il
   regarde deux points de vue en même temps. */
.legende-scene{
  margin:0 0 10px; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--txt-bas); font-weight:600;
}
.bilan-tel{
  margin-top:20px; padding:18px 14px; border-radius:var(--r-m); text-align:center;
  background:rgba(16,184,177,.12); border:1px solid var(--bord-fort);
  font-size:12.5px; color:var(--txt-moy); line-height:1.5;
}
.bilan-tel .gros{
  font-size:40px; font-weight:700; color:var(--teal-clair); line-height:1; margin-bottom:6px;
  font-variant-numeric:tabular-nums;
}

/* ---------- en-tête : logo officiel et sélecteur de langue ---------- */
.marque{text-decoration:none}
.marque img{height:26px; width:auto; display:block}
@media (max-width:640px){ .marque img{height:22px} }
.repere{color:var(--txt-bas); font-size:13px}
@media (max-width:640px){ .repere{display:none} }
.segments.langues button{padding:7px 12px; font-size:12px; letter-spacing:.04em}
.entete .pousse{margin-left:auto}
.entete{gap:12px}


/* =====================================================================
   MODE ESSAI
   Le visiteur du site fait lui-même. Avant : une consigne et
   l'avertissement « données fictives ». Pendant : une bande qui dit
   quoi toucher, et un halo sur l'élément. À la fin : nous écrire.
   ===================================================================== */
.essai-accueil{
  margin-top:22px; padding:18px 20px; border-radius:var(--r-l);
  background:rgba(16,184,177,.07); border:1px solid var(--bord-fort);
}
.essai-tete{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.essai-tete .modes{margin-left:auto}
.segments.modes button{padding:7px 14px; font-size:12.5px}
.essai-consigne{margin-top:16px; padding-top:16px; border-top:1px solid var(--bord)}
.essai-consigne h2{font-size:19px; margin-bottom:6px}
.essai-texte{margin:0; font-size:15px; line-height:1.6; max-width:66ch}
.essai-fictif{margin:10px 0 16px; font-size:13px; color:var(--txt-bas); max-width:66ch; line-height:1.55}

/* La consigne disparaît dès que l'essai commence, et en visite commentée. */
body.essai-en-cours .essai-consigne,
body.mode-visite .essai-consigne{display:none}

/* Une bande à la fois : le guide en essai, la narration en visite. */
body.mode-essai .bande{display:none}
body.mode-visite .guide{display:none}
body:not(.essai-en-cours) .guide{display:none}
body.mode-essai{padding-bottom:132px}
body.mode-video .essai-accueil{display:none}

.guide{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:rgba(7,15,28,.95); backdrop-filter:blur(16px) saturate(1.2);
  border-top:1px solid var(--bord-fort);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.guide-progres{height:3px; background:rgba(255,255,255,.07)}
.guide-progres span{display:block; height:100%; width:0; background:var(--teal); transition:width .5s ease}
.guide-corps{
  max-width:1180px; margin:0 auto; padding:14px 18px 16px;
  display:flex; align-items:center; gap:20px;
}
.guide-gauche{flex:1; min-width:0}
.guide-n{
  display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-clair); font-weight:700; margin-bottom:3px;
}
.guide.termine .guide-n{color:var(--ok)}
.guide-texte{margin:0; font-size:17px; line-height:1.45; font-weight:500; max-width:62ch; text-wrap:balance}
.guide-texte.apparait{animation:monte .4s cubic-bezier(.22,1,.36,1) both}
.guide-actions{display:flex; align-items:center; gap:10px; flex:none}
a.btn{text-decoration:none}
.guide .cta{white-space:nowrap}

/* Le halo : ce que le visiteur doit toucher maintenant. */
.a-faire{position:relative; animation:halo 1.8s ease-in-out infinite; border-radius:var(--r-m)}
@keyframes halo{
  0%,100%{box-shadow:0 0 0 0 rgba(111,212,208,.0), 0 0 0 2px rgba(111,212,208,.55)}
  50%{box-shadow:0 0 0 7px rgba(111,212,208,.16), 0 0 0 2px rgba(111,212,208,.9)}
}

.essai-fin{
  margin-top:26px; padding:24px 24px 20px; border-radius:var(--r-l);
  background:linear-gradient(135deg, rgba(16,184,177,.16), rgba(16,184,177,.05));
  border:1px solid var(--bord-fort);
}
.essai-fin h2{font-size:22px; margin-bottom:8px}
.essai-fin > p{margin:0; color:var(--txt-moy); max-width:62ch}
.essai-fin-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.essai-fin-contact{margin:16px 0 0 !important; font-size:13px; color:var(--txt-bas) !important}

@media (max-width:900px){
  body.mode-essai{padding-bottom:190px}
  .guide-corps{flex-direction:column; align-items:stretch; gap:10px; padding:12px 16px 12px}
  .guide-texte{font-size:15.5px}
  .guide-actions{justify-content:space-between}
  .guide .cta{flex:1; white-space:normal; text-align:center; padding:10px 14px; font-size:13.5px}
  .essai-tete .modes{margin-left:0; width:100%}
  .segments.modes button{flex:1; padding:8px 8px; font-size:12px}
}