/* ============================================================
   Portail captif — style néomorphique (fond #ecf0f3, rouge #a80303,
   marine #191041, vert #00DD80, police Lato). Aucune dépendance.
   Téléphone (base) · tablette (≥ 640 px) · ordinateur (≥ 1024 px)
   ============================================================ */
@font-face{font-family:'Lato';src:url('font/Lato-Regular.ttf');font-weight:400 900;font-style:normal;font-display:swap}

:root{
  /* Trois couleurs du portail (remplacées par la configuration EVISIONS ou config.js) :
     --ev1 principale (boutons, prix), --ev2 secondaire (survol), --ev3 texte des boutons */
  --ev1:#a80303;--ev2:#191041;--ev3:#ffffff;
  --fond:#ecf0f3;--ombre:#c0ced1;--lumiere:#ffffff;--creux:#cbccd1;
  --texte:#555;--texte-fort:#2b2d42;--doux:#7d8390;--marine:#191041;
  --rouge:var(--ev1);--rouge-vif:var(--ev1);--rouge-vif:color-mix(in srgb,var(--ev1) 78%,#fff);--vert:#00DD80;--vert-fonce:#00a862;--alerte:#d9481c;
  --rayon:40px;--carte:22px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--fond:#22252b;--ombre:#16181c;--lumiere:#2e3239;--creux:#17191d;
    --texte:#c9ced6;--texte-fort:#f1f3f6;--doux:#959cab;--marine:#e8e6ff;--alerte:#ff8a5c}
}
:root[data-theme="dark"]{--fond:#22252b;--ombre:#16181c;--lumiere:#2e3239;--creux:#17191d;
  --texte:#c9ced6;--texte-fort:#f1f3f6;--doux:#959cab;--marine:#e8e6ff;--alerte:#ff8a5c}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--fond);-webkit-text-size-adjust:100%}
body{
  min-height:100vh;font-family:'Lato',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:700;
  color:var(--texte);background:var(--fond);display:flex;justify-content:center;align-items:flex-start;
  padding:24px 14px 96px;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));
  line-height:1.4;transition:background .3s,color .3s;
}
button{font-family:inherit;font-weight:800;cursor:pointer;border:none;outline:none;color:inherit;background:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--rouge);outline-offset:3px;border-radius:14px}
[hidden]{display:none!important}

/* ---------- Conteneur ---------- */
.container-login{
  width:100%;max-width:420px;padding:34px 24px 26px;border-radius:var(--rayon);
  background:var(--fond);box-shadow:13px 13px 20px var(--ombre),-13px -13px 20px var(--lumiere);
  position:relative;animation:entree .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes entree{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.col-connexion,.col-infos{position:relative;min-width:0}
.col-infos{margin-top:30px}

.barre-haut{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:-14px}
.outils-haut{display:flex;gap:10px}
.puce-etat{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.4px;color:var(--doux);
  padding:5px 10px;border-radius:20px;box-shadow:inset 3px 3px 5px var(--creux),inset -3px -3px 5px var(--lumiere)}
.puce-etat i{width:7px;height:7px;border-radius:50%;background:var(--vert);animation:pouls 2s infinite}
.puce-etat.eteint i{background:var(--doux);animation:none}
@keyframes pouls{0%{box-shadow:0 0 0 0 rgba(0,221,128,.6)}70%{box-shadow:0 0 0 7px rgba(0,221,128,0)}100%{box-shadow:0 0 0 0 rgba(0,221,128,0)}}
.btn-rond{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;
  box-shadow:4px 4px 8px var(--ombre),-4px -4px 8px var(--lumiere);color:var(--doux);text-decoration:none}
.btn-rond:active{box-shadow:inset 3px 3px 5px var(--creux),inset -3px -3px 5px var(--lumiere)}
.btn-rond svg{width:16px;height:16px}
.btn-langue{font-size:11px;letter-spacing:.5px}

/* ---------- Logo + titres ---------- */
.logo{width:88px;height:88px;border-radius:50%;margin:22px auto 0;display:flex;justify-content:center;align-items:center;
  box-shadow:0 0 2px var(--vert),0 0 0 5px var(--fond),8px 8px 15px var(--ombre),-8px -8px 15px var(--lumiere);position:relative}
.logo img{width:62px;height:62px}
.logo::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid transparent;
  border-top-color:var(--vert);border-right-color:var(--vert);opacity:.55;animation:tour 3.5s linear infinite}
.logo.petit{width:68px;height:68px}.logo.petit img{width:48px;height:48px}
@keyframes tour{to{transform:rotate(360deg)}}
.title{text-align:center;font-size:18px;padding-top:22px;letter-spacing:.5px;color:var(--texte-fort);font-weight:900;line-height:1.3}
.title .badge-5g{display:inline-block;font-size:10px;vertical-align:4px;margin-left:5px;padding:2px 7px;border-radius:8px;
  color:var(--ev3);background:linear-gradient(135deg,var(--rouge-vif),var(--rouge))}
.sub-title{font-size:12.5px;text-align:center;padding-top:6px;color:var(--doux);font-weight:700}
.code-client{color:var(--rouge);letter-spacing:1px}

/* ---------- Sélecteurs (Ticket / Membre, onglets) ---------- */
.segment,.onglets{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:30px;
  box-shadow:inset 5px 5px 8px var(--creux),inset -5px -5px 8px var(--lumiere)}
.segment{margin:26px 2px 6px}
.segment button,.onglets button{position:relative;z-index:1;height:42px;border-radius:24px;font-size:14px;color:var(--doux);
  transition:color .25s,background .25s;display:flex;align-items:center;justify-content:center;gap:7px}
.segment button svg,.onglets button svg{width:16px;height:16px}
.segment button[aria-pressed="true"]{color:var(--ev3)}
.segment .curseur{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:24px;
  background:linear-gradient(135deg,var(--rouge-vif),var(--rouge));box-shadow:3px 3px 8px var(--ombre);
  transition:transform .35s cubic-bezier(.5,1.6,.4,.8)}
.segment[data-mode="membre"] .curseur{transform:translateX(100%)}
.onglets{margin-bottom:16px}
.onglets button{height:38px;font-size:13px}
.onglets button[aria-selected="true"]{color:var(--rouge);background:var(--fond);box-shadow:3px 3px 6px var(--ombre),-3px -3px 6px var(--lumiere)}

/* ---------- Messages ---------- */
.box{padding-top:14px;opacity:.8;font-size:12.5px;text-align:center;min-height:32px}
.notice{display:flex;gap:10px;align-items:flex-start;margin:6px 4px 4px;padding:12px 14px;border-radius:16px;font-size:12.5px;text-align:left;
  color:var(--alerte);box-shadow:inset 4px 4px 7px var(--creux),inset -4px -4px 7px var(--lumiere);animation:secoue .45s}
.notice svg{flex:none;width:18px;height:18px;margin-top:1px}
.notice b{display:block;color:var(--texte-fort);font-size:13px;margin-bottom:2px}
@keyframes secoue{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

/* ---------- Champs ---------- */
.custom-fields{width:100%;padding:12px 4px 4px}
.username-field,.password-field{position:relative;display:flex;align-items:center;margin-bottom:16px;border-radius:20px;
  padding:0 8px 0 16px;box-shadow:inset 5px 5px 5px var(--creux),inset -5px -5px 5px var(--lumiere);transition:box-shadow .2s}
.username-field:focus-within,.password-field:focus-within{box-shadow:inset 5px 5px 5px var(--creux),inset -5px -5px 5px var(--lumiere),0 0 0 2px rgba(168,3,3,.35);box-shadow:inset 5px 5px 5px var(--creux),inset -5px -5px 5px var(--lumiere),0 0 0 2px color-mix(in srgb,var(--ev1) 40%,transparent)}
.username-field>span,.password-field>span{display:flex;color:var(--doux)}
.username-field>span svg,.password-field>span svg{width:18px;height:18px}
.custom-fields input{flex:1;min-width:0;outline:none;border:none;background:none;font:inherit;font-size:17px;color:var(--texte-fort);
  padding:16px 8px 16px 10px;letter-spacing:1.5px}
.custom-fields input::placeholder{color:var(--doux);letter-spacing:.3px;font-size:14px;font-weight:700}
.icone-btn{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--doux)}
.icone-btn:active{box-shadow:inset 2px 2px 4px var(--creux),inset -2px -2px 4px var(--lumiere)}
.icone-btn svg{width:18px;height:18px}
.retenir{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--doux);margin:-4px 6px 16px;cursor:pointer;user-select:none}
.custom-fields .retenir input{flex:none;padding:0;-webkit-appearance:none;appearance:none;width:34px;height:20px;border-radius:12px;position:relative;cursor:pointer;
  box-shadow:inset 2px 2px 4px var(--creux),inset -2px -2px 4px var(--lumiere);transition:background .2s}
.retenir input::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--doux);transition:.25s}
.retenir input:checked{background:rgba(0,221,128,.25)}
.retenir input:checked::after{left:17px;background:var(--vert-fonce)}

/* ---------- Boutons ---------- */
.btn-submit,.btn-logout,.btn-sec{width:100%;min-height:50px;padding:0 18px;border-radius:30px;font-size:15.5px;letter-spacing:.3px;font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;transition:transform .1s,background .2s,box-shadow .2s;text-align:center}
.btn-submit{color:var(--ev3);background:linear-gradient(135deg,var(--rouge-vif),var(--rouge));box-shadow:5px 5px 10px var(--ombre),-6px -6px 10px var(--lumiere)}
.btn-submit:active,.btn-sec:active,.btn-logout:active{transform:scale(.98)}
.btn-submit svg,.btn-sec svg,.btn-logout svg{width:19px;height:19px;flex:none}
.btn-submit>span,.btn-sec>span,.btn-logout>span{display:inline-flex;align-items:center}
.btn-submit[disabled]{opacity:.8;pointer-events:none}
.roue{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:tour .7s linear infinite}
.btn-sec{color:var(--texte-fort);background:var(--fond);box-shadow:5px 5px 10px var(--ombre),-6px -6px 10px var(--lumiere);margin-top:14px;font-size:14.5px}
.btn-sec:active{box-shadow:inset 4px 4px 6px var(--creux),inset -4px -4px 6px var(--lumiere)}
.btn-sec.vert{color:var(--vert-fonce)}
.btn-logout{color:#fff;background:linear-gradient(135deg,#ff6b6b,#e03b3b);box-shadow:5px 5px 10px var(--ombre),-6px -6px 10px var(--lumiere);margin-top:14px}
.main-btn-gap{margin-top:16px}
#continuer,#reco,#retour,#naviguer{margin-top:18px}
.lien-discret{font-size:11.5px;color:var(--doux);text-decoration:underline;font-weight:700}
@media (hover:hover){
  .btn-submit:hover,.btn-buy:hover{background:var(--ev2)}
  .btn-sec:hover{color:var(--rouge)}
  .btn-sec.vert:hover{color:var(--vert-fonce);filter:brightness(1.1)}
  .tarif:hover{transform:translateY(-3px)}
  .btn-rond:hover{color:var(--rouge)}
}

.reprise{display:flex;align-items:center;gap:10px;margin:0 4px 16px;padding:10px 12px;border-radius:18px;font-size:12.5px;
  box-shadow:5px 5px 10px var(--ombre),-5px -5px 10px var(--lumiere);width:calc(100% - 8px);text-align:left;color:var(--texte)}
.reprise .rond{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--vert-fonce);flex:none}
.reprise .rond svg{width:16px;height:16px}
.reprise b{color:var(--texte-fort);letter-spacing:1px}
.reprise small{display:block;color:var(--doux);font-weight:700}

/* ---------- Guide audio ---------- */
.audio{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:18px;font-size:12px;color:var(--doux)}
.audio-titre{display:inline-flex;align-items:center;gap:6px;width:100%;justify-content:center}
.audio-titre svg{width:16px;height:16px}
.audio button{font-size:12px;padding:7px 13px;border-radius:16px;color:var(--texte-fort);box-shadow:3px 3px 6px var(--ombre),-3px -3px 6px var(--lumiere)}
.audio button.joue{color:#fff;background:var(--vert-fonce);box-shadow:inset 2px 2px 4px rgba(0,0,0,.2)}

/* ---------- Historique ---------- */
.historique{margin-top:24px}
.h-liste{display:flex;gap:10px;overflow-x:auto;padding:4px 4px 10px;scrollbar-width:none}
.h-liste::-webkit-scrollbar{display:none}
.h-ticket{flex:none;display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;text-align:left;padding:9px 13px;border-radius:16px;
  box-shadow:4px 4px 8px var(--ombre),-4px -4px 8px var(--lumiere);color:var(--texte)}
.h-ticket svg{width:16px;height:16px;grid-row:span 2;color:var(--rouge)}
.h-ticket b{font-size:13px;color:var(--texte-fort);letter-spacing:1px}
.h-ticket small{font-size:10.5px;color:var(--doux);font-weight:700}

.link{text-align:center;margin-top:12px;font-size:13px;color:var(--doux)}
.link a{color:var(--rouge);text-decoration:none;font-weight:900}

/* ---------- Sections ---------- */
.section{margin-top:30px}
.section-titre{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14.5px;color:var(--texte-fort);margin:0 6px 14px;font-weight:900}
.section-titre small{font-size:11px;color:var(--doux);font-weight:700;text-align:right}
.operateurs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.operateurs span{font-size:11px;font-weight:900;padding:6px 12px;border-radius:14px;box-shadow:2px 2px 5px var(--ombre),-2px -2px 5px var(--lumiere)}

/* Bannières */
.carrousel{position:relative;border-radius:var(--carte);overflow:hidden;box-shadow:5px 5px 12px var(--ombre),-6px -6px 12px var(--lumiere)}
.carrousel .piste{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.carrousel .piste::-webkit-scrollbar{display:none}
.diapo{flex:0 0 100%;scroll-snap-align:start;min-height:132px;padding:22px 20px 34px;color:#fff;position:relative;
  background:linear-gradient(135deg,var(--ev2) 0%,var(--ev1) 135%);background-size:cover;background-position:center;
  display:flex;flex-direction:column;justify-content:center}
.diapo:nth-child(3n+2){background:linear-gradient(135deg,var(--ev1) 0%,var(--ev2) 140%)}
.diapo:nth-child(3n+3){background:linear-gradient(135deg,#00a862 0%,var(--ev2) 140%)}
.diapo.img::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.65),rgba(0,0,0,.1))}
.diapo h3{position:relative;font-size:17px;font-weight:900;margin-bottom:6px}
.diapo p{position:relative;font-size:12.5px;opacity:.9;font-weight:700;max-width:92%}
.diapo .onde{position:absolute;right:-30px;top:-30px;width:130px;height:130px;border-radius:50%;border:16px solid rgba(255,255,255,.07)}
.points{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.points i{width:6px;height:6px;border-radius:4px;background:rgba(255,255,255,.45);transition:width .3s,background .3s}
.points i.actif{width:18px;background:#fff}

/* Tarifs */
.tarifs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tarif{position:relative;border-radius:var(--carte);padding:18px 12px 14px;text-align:center;
  box-shadow:5px 5px 10px var(--ombre),-5px -5px 10px var(--lumiere);display:flex;flex-direction:column;gap:3px;transition:transform .2s}
.tarif.populaire{box-shadow:5px 5px 10px var(--ombre),-5px -5px 10px var(--lumiere),inset 0 0 0 2px var(--rouge)}
.tarif .ruban{position:absolute;top:-9px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:9.5px;letter-spacing:.6px;
  color:var(--ev3);padding:3px 9px;border-radius:10px;background:linear-gradient(135deg,var(--rouge-vif),var(--rouge))}
.tarif .t-nom{font-size:14px;color:var(--texte-fort);font-weight:900}
.tarif .t-prix{font-size:24px;color:var(--rouge);font-weight:900;letter-spacing:-.5px;line-height:1.15;margin:4px 0 2px}
.tarif .t-prix small{font-size:11px;font-weight:800;color:var(--doux);letter-spacing:0;margin-left:3px}
.tarif .t-info{font-size:11px;color:var(--doux);font-weight:700;display:flex;align-items:center;justify-content:center;gap:4px}
.tarif .t-info svg{width:12px;height:12px}
.tarif .t-principal{color:var(--texte);font-size:11.5px}
.tarif .t-info b{color:var(--texte)}
.t-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:6px}
.t-badges span{display:inline-flex;align-items:center;gap:3px;font-size:10px;color:var(--doux);padding:3px 7px;border-radius:10px;
  box-shadow:inset 2px 2px 3px var(--creux),inset -2px -2px 3px var(--lumiere)}
.t-badges svg{width:11px;height:11px}
.tarif>*:nth-last-child(2){margin-bottom:12px}
.btn-buy{margin-top:auto;height:38px;border-radius:20px;font-size:12.5px;color:var(--ev3);text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(135deg,var(--rouge-vif),var(--rouge));box-shadow:3px 3px 8px var(--ombre),-4px -4px 8px var(--lumiere)}
.btn-buy svg{width:14px;height:14px}
.note-prix{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px;color:var(--doux);margin-top:16px}
.note-prix svg{width:14px;height:14px;color:var(--vert-fonce)}

/* Étapes */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.etape{text-align:center;font-size:11px;color:var(--doux);padding:12px 6px;border-radius:18px;box-shadow:inset 3px 3px 6px var(--creux),inset -3px -3px 6px var(--lumiere)}
.etape b{display:grid;place-items:center;width:28px;height:28px;margin:0 auto 6px;border-radius:50%;color:var(--ev3);font-size:13px;
  background:linear-gradient(135deg,var(--rouge-vif),var(--rouge))}
.etape span{color:var(--texte-fort);display:block;font-size:12px;margin-bottom:2px}
.etape em{font-style:normal;display:block}

/* Listes */
.menu-items{border-radius:var(--carte);overflow:hidden;box-shadow:5px 5px 10px var(--ombre),-5px -5px 10px var(--lumiere);padding:6px 4px}
.ligne{display:flex;align-items:center;gap:12px;padding:11px 12px;font-size:13px;color:var(--texte-fort)}
.ligne+.ligne{border-top:1px solid rgba(128,128,128,.12)}
.ligne .pastille{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:none;color:var(--rouge);
  box-shadow:inset 2px 2px 4px var(--creux),inset -2px -2px 4px var(--lumiere)}
.ligne .pastille svg{width:15px;height:15px}
details.faq{border-top:1px solid rgba(128,128,128,.12)}
details.faq:first-child{border-top:none}
details.faq summary{list-style:none;cursor:pointer;padding:13px 12px;font-size:13px;color:var(--texte-fort);display:flex;justify-content:space-between;gap:10px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-size:18px;line-height:1;color:var(--rouge);transition:transform .25s}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq p{padding:0 12px 14px;font-size:12.5px;color:var(--doux);font-weight:700}

.contacts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contacts .btn-sec{margin-top:0;font-size:13.5px;padding:0 10px}
.statut-droite .contacts{margin-top:14px}

.confiance{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:26px;font-size:11px;color:var(--doux)}
.confiance>span{display:inline-flex;align-items:center;gap:6px}
.confiance svg{width:14px;height:14px;color:var(--vert-fonce)}

.pied{text-align:center;margin-top:24px;font-size:11.5px;color:var(--doux);font-weight:700;line-height:1.7}
.pied a{color:var(--doux)}
.pied .coeur{color:var(--rouge)}

/* ---------- Bouton Signaler + feuille ---------- */
.btn-signaler{position:fixed;z-index:8;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:7px;padding:11px 16px;border-radius:26px;font-size:13px;color:var(--alerte);
  background:var(--fond);box-shadow:5px 5px 12px var(--ombre),-5px -5px 12px var(--lumiere),0 0 0 1px rgba(217,72,28,.15)}
.btn-signaler svg{width:17px;height:17px}
.feuille-fond{position:fixed;inset:0;z-index:20;background:rgba(15,12,35,.35);display:flex;align-items:flex-end;justify-content:center;
  opacity:0;transition:opacity .25s;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.feuille-fond.ouvert{opacity:1}
.feuille{position:relative;width:100%;max-width:480px;max-height:88vh;overflow:auto;background:var(--fond);border-radius:28px 28px 0 0;
  padding:26px 20px calc(22px + env(safe-area-inset-bottom));transform:translateY(30px);transition:transform .3s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 -10px 30px rgba(0,0,0,.18)}
.feuille-fond.ouvert .feuille{transform:none}
.feuille h2{font-size:17px;color:var(--texte-fort);font-weight:900;padding-right:40px}
.feuille p{font-size:12.5px;color:var(--doux);margin:6px 0 18px}
.feuille-fermer{position:absolute;top:18px;right:18px}
.choix-probleme{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.choix-probleme button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;border-radius:18px;font-size:11.5px;
  color:var(--texte-fort);box-shadow:4px 4px 8px var(--ombre),-4px -4px 8px var(--lumiere)}
.choix-probleme button span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--rouge);
  box-shadow:inset 3px 3px 6px var(--creux),inset -3px -3px 6px var(--lumiere)}
.choix-probleme button svg{width:20px;height:20px}
.choix-probleme button:active{box-shadow:inset 3px 3px 6px var(--creux),inset -3px -3px 6px var(--lumiere)}

/* ---------- État / déconnexion ---------- */
.anneau{position:relative;width:200px;height:200px;margin:26px auto 8px}
.anneau::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:9px 9px 16px var(--ombre),-9px -9px 16px var(--lumiere)}
.anneau svg{position:absolute;inset:0;transform:rotate(-90deg)}
.anneau .fond-arc{stroke:var(--creux);opacity:.55}
.anneau .arc{stroke:url(#degrade);transition:stroke-dashoffset 1s linear}
.anneau .centre{position:absolute;inset:22px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:inset 6px 6px 10px var(--creux),inset -6px -6px 10px var(--lumiere);text-align:center}
.anneau .centre small{font-size:10.5px;color:var(--doux);letter-spacing:.6px;text-transform:uppercase}
.anneau .centre b{font-size:27px;color:var(--texte-fort);font-variant-numeric:tabular-nums;letter-spacing:.5px;line-height:1.2}
.anneau .centre span{font-size:11px;color:var(--vert-fonce)}
.grille{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.case{border-radius:18px;padding:12px 14px;box-shadow:inset 4px 4px 7px var(--creux),inset -4px -4px 7px var(--lumiere);min-width:0}
.case small{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--doux);text-transform:uppercase;letter-spacing:.5px}
.case small svg{width:12px;height:12px}
.case b{display:block;font-size:15px;color:var(--texte-fort);margin-top:3px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.case.large{grid-column:1/-1}
.jauge{height:10px;border-radius:6px;margin-top:8px;box-shadow:inset 2px 2px 4px var(--creux),inset -2px -2px 4px var(--lumiere);overflow:hidden}
.jauge i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--vert),var(--vert-fonce));width:0;transition:width 1s}
.coche{width:96px;height:96px;margin:26px auto 4px;border-radius:50%;display:grid;place-items:center;box-shadow:8px 8px 15px var(--ombre),-8px -8px 15px var(--lumiere)}
.coche svg{width:48px;height:48px}
.coche path{stroke-dasharray:60;stroke-dashoffset:60;animation:trace .6s .2s ease forwards}
@keyframes trace{to{stroke-dashoffset:0}}
.barre-prog{height:6px;border-radius:4px;margin:20px 30px 0;overflow:hidden;box-shadow:inset 2px 2px 4px var(--creux),inset -2px -2px 4px var(--lumiere)}
.barre-prog i{display:block;height:100%;width:0;background:var(--vert);animation:remplir 2.4s linear forwards}
@keyframes remplir{to{width:100%}}

/* ---------- Texte légal ---------- */
.texte-legal{margin-top:22px;font-size:13.5px;line-height:1.65;font-weight:400;color:var(--texte)}
.texte-legal h2{font-size:14.5px;color:var(--texte-fort);font-weight:900;margin:20px 0 6px}
.texte-legal p+p{margin-top:8px}
.texte-legal b{font-weight:800;color:var(--texte-fort)}
.texte-legal .avis{font-size:12px;color:var(--alerte);padding:10px 14px;border-radius:14px;box-shadow:inset 3px 3px 6px var(--creux),inset -3px -3px 6px var(--lumiere)}

.toast{position:fixed;left:50%;bottom:84px;transform:translate(-50%,40px);opacity:0;background:#191041;color:#fff;
  padding:10px 18px;border-radius:20px;font-size:12.5px;transition:.3s;z-index:30;pointer-events:none}
.toast.visible{opacity:1;transform:translate(-50%,0)}
.demo{position:fixed;top:0;left:0;right:0;text-align:center;font-size:11px;padding:4px;background:#191041;color:#fff;z-index:10;font-weight:700}

/* ================= Petits téléphones ================= */
@media (max-width:360px){
  body{padding-left:10px;padding-right:10px}
  .container-login{padding:30px 16px 22px;border-radius:30px}
  .tarifs{gap:10px}
  .tarif .t-prix{font-size:21px}
  .choix-probleme{grid-template-columns:repeat(2,1fr)}
  .btn-signaler span{display:none}
}

/* ================= Tablettes (≥ 640 px) ================= */
@media (min-width:640px){
  body{padding:40px 24px 100px}
  .container-login{max-width:720px;padding:44px 40px 34px}
  .page-simple .container-login{max-width:480px}
  .col-connexion{max-width:460px;margin:0 auto}
  .tarifs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tarifs[data-n="1"],.tarifs[data-n="2"],.tarifs[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .diapo{min-height:160px;padding:30px 30px 40px}
  .diapo h3{font-size:20px}
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
  .feuille-fond{align-items:center}
  .feuille{border-radius:28px;padding:30px 26px}
  .carte-large{max-width:720px}
  .carte-texte{max-width:760px}
  .statut-droite{max-width:460px;margin:0 auto}
  .title{font-size:20px}
}

/* ================= Ordinateurs (≥ 1024 px) ================= */
@media (min-width:1024px){
  body{padding:48px 32px 60px;align-items:center}
  .page-connexion .container-login{max-width:1180px;display:grid;grid-template-columns:minmax(360px,410px) minmax(0,1fr);
    gap:52px;padding:44px 48px 36px;align-items:start}
  .col-connexion{max-width:none;margin:0;position:sticky;top:32px;padding:30px 26px 26px;border-radius:32px;
    box-shadow:inset 6px 6px 12px var(--creux),inset -6px -6px 12px var(--lumiere)}
  .col-connexion .barre-haut{margin-top:-6px}
  .col-infos{margin-top:0}
  .col-infos>.carrousel{margin-top:4px}
  .col-infos .diapo{min-height:190px;padding:34px 40px 42px}
  .col-infos .diapo h3{font-size:24px}
  .col-infos .diapo p{font-size:14px;max-width:70%}
  .etape{padding:16px 10px;font-size:12px}
  .etape span{font-size:13px}
  .btn-signaler{right:32px;bottom:28px}
  .page-statut .carte-large{max-width:980px}
  .statut-grille{display:grid;grid-template-columns:360px 1fr;gap:48px;align-items:center;margin-top:8px}
  .statut-droite{max-width:none;margin:0}
  .statut-droite .grille{margin-top:0}
  .anneau{width:230px;height:230px}
  .anneau .centre b{font-size:31px}
}
@media (min-width:1360px){
  .page-connexion .container-login{max-width:1280px;grid-template-columns:430px minmax(0,1fr)}
  .tarifs[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Paysage sur téléphone : moins de hauteur perdue */
@media (max-height:500px) and (orientation:landscape){
  body{padding-top:14px}
  .logo{width:64px;height:64px;margin-top:10px}.logo img{width:44px;height:44px}
  .feuille{max-height:96vh}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.btn-signaler,.outils-haut,.demo{display:none}.container-login{box-shadow:none}}