*{box-sizing:border-box}
/* ---------- jetons de design ----------
   Une seule source de vérité pour toutes les pages : noir très sombre,
   blanc, et un rouge réservé aux gestes qui engagent (réserver, payer,
   se déconnecter, supprimer). Le reste est gris ou blanc. */
:root{
  --police-titre:"Bricolage Grotesque"; --police-texte:"Outfit";
  --fond:#070707; --carte:#121212; --carte-2:#1B1B1B; --trait:#262626; --trait-2:#333333;
  --perle:#FFFFFF; --gris:#A3A3A3; --gris-f:#666666;
  --i1:#FFFFFF; --i2:#D4D4D4; --iris:linear-gradient(135deg,#FFFFFF 0%,#E4E4E4 100%);
  --vert:#8FD8B4; --ambre:#E2C79A; --rouge:#DFA09A;
  --rouge-vif:#E10600; --rouge-vif-h:#FF1F1A;
  --r:20px;
}
body{
  margin:0;color:var(--perle);
  background:var(--fond);
  -webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;
  font-family:var(--police-texte),"Helvetica Neue",Arial,sans-serif;font-weight:400;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
body.avec-tabs{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
body.avec-action{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
body.avec-tabs.avec-action{padding-bottom:calc(196px + env(safe-area-inset-bottom))}
h1,h2,h3{margin:0;font-family:var(--police-titre),Verdana,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.15}
p{margin:0}
button{font-family:inherit;font-size:inherit;font-weight:300;color:inherit;cursor:pointer;
  touch-action:manipulation;-webkit-user-select:none;user-select:none}
a{color:var(--perle);text-decoration:none}
:focus-visible{outline:2px solid var(--i1);outline-offset:3px}
.wrap{max-width:560px;margin:0 auto;padding:0 22px}

/* suggestions d'adresse */
.boite-sugg{position:relative}
.sugg{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:35;background:var(--carte-2);
  border-radius:16px;overflow:hidden;box-shadow:0 18px 46px rgba(0,0,0,.6);max-height:290px;
  overflow-y:auto}
.sugg:empty{display:none}
.sugg button{display:block;width:100%;text-align:left;background:none;border:0;padding:15px 17px;
  font-size:14.5px;line-height:1.45;border-bottom:1px solid rgba(255,255,255,.07)}
.sugg button:last-child{border-bottom:0}
.sugg button:hover,.sugg button:focus{background:rgba(255,255,255,.08)}
.sugg .rue{display:block}
.sugg .loc{display:block;font-size:12.5px;color:var(--gris);margin-top:4px}
.sugg .src{padding:10px 17px;font-size:11px;color:var(--gris-f);letter-spacing:.06em}
.cherche{font-size:12.5px;color:var(--gris-f);margin-top:9px}

.fil-msg{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.msg{max-width:86%;border-radius:20px;padding:16px 18px}
.msg.moi{align-self:flex-end;background:linear-gradient(140deg,#2A2A2A,#171717);
  border-bottom-right-radius:7px}
.msg.lui{align-self:flex-start;background:var(--carte);border-bottom-left-radius:7px}
.msg .qui{display:block;font-size:10.5px;letter-spacing:.16em;color:var(--gris);margin-bottom:8px}
.msg .t{display:block;font-size:15px;line-height:1.6}
.msg .h{display:block;font-size:11px;color:var(--gris-f);margin-top:9px}
.cloche{position:relative}
.cloche b{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;border-radius:999px;
  background:var(--iris);color:#000000;font-size:11px;font-weight:500;display:grid;
  place-items:center;padding:0 5px}

.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.vignette{position:relative;aspect-ratio:1;border-radius:16px;background-size:cover;
  background-position:center;background-color:var(--carte-2)}
.oter{position:absolute;top:7px;right:7px;width:28px;height:28px;border-radius:50%;border:0;
  background:rgba(15,14,22,.75);color:var(--perle);font-size:13px;display:grid;place-items:center;
  backdrop-filter:blur(6px)}
.ajout-photo{aspect-ratio:1;border-radius:16px;background:var(--carte);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  color:var(--gris);border:1.5px dashed var(--trait-2);transition:border-color .2s,color .2s}
.ajout-photo:hover{border-color:var(--i1);color:var(--perle)}
.ajout-photo span:first-of-type{font-size:24px;line-height:1}
.ajout-photo .t{font-size:11.5px}
.envoi{font-size:12.5px;color:var(--i2);margin-top:10px}
.recu{background:var(--carte)}
@media print{
  body{background:#fff;color:#111;padding:0}
  .haut,.tabs,.action,.demo,#alerte,.entete .sur,#imprimer{display:none!important}
  .recu{background:#fff;color:#111;box-shadow:none;border:1px solid #ddd}
  .recu .ligne{border-color:#eee}
  .recu .ligne span:first-child{color:#666}
  .sous{color:#666}
}
.fiche-c{background:var(--carte);border-radius:var(--r);padding:20px;margin-bottom:14px}
.fiche-haut{display:flex;align-items:center;gap:15px;width:100%;background:none;border:0;
  padding:0;text-align:left}
.mini-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.mini-photos span{aspect-ratio:4/3;border-radius:12px;background-size:cover;
  background-position:center;background-color:var(--carte-2);display:block}
.prix-l{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.prix-l span{background:var(--carte-2);border-radius:999px;padding:8px 14px;font-size:12.5px;
  color:var(--gris);display:inline-flex;align-items:baseline;gap:8px}
.prix-l b{font-weight:500;color:var(--perle);margin-right:7px}
.lab-ligne{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.voir-tout{background:none;border:0;color:var(--i2);font-size:13px;padding:4px 0}
.carte-choix{background:var(--carte);border-radius:var(--r);padding:16px 18px;margin-bottom:12px;
  transition:box-shadow .2s,background .2s}
.carte-choix.prise{background:linear-gradient(150deg,#242424,#141414)}
.pt-r{display:inline-grid;place-items:center;min-width:21px;height:21px;border-radius:999px;
  background:var(--rouge);color:#17090A;font-size:11.5px;font-weight:600;padding:0 6px;
  margin-left:9px;vertical-align:1px}
.pt-tab{position:absolute;top:9px;right:calc(50% - 15px);width:9px;height:9px;border-radius:50%;
  background:var(--rouge);border:2px solid var(--fond)}
.tab{position:relative}
.coche{width:24px;height:24px;flex:none;border-radius:50%;border:1.8px solid var(--trait-2);
  display:grid;place-items:center;font-size:13px;color:#000000;margin-right:2px;transition:all .2s}
.coche.ok{background:var(--iris);border-color:transparent}
.choix-bas{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}
.choix-bas .lien-t{padding:0;min-height:0}
.carte-choix.prise{box-shadow:inset 0 0 0 1.5px var(--i1)}
.carte-choix .rangee{width:100%;gap:12px}
.carte-choix .rangee[aria-pressed=true]{box-shadow:none;background:none}
.carte-choix .rangee .txt{min-width:0}
.carte-choix .prix-choix{font-weight:500;font-size:16px;white-space:nowrap;flex:none}
.boite-mdp{position:relative}
.boite-mdp input{padding-right:54px}
.oeil{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:42px;height:42px;
  border:0;background:none;display:grid;place-items:center;border-radius:12px}
.oeil svg{width:21px;height:21px;fill:none;stroke:var(--gris);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.oeil[aria-pressed=true] svg{stroke:var(--i1)}

/* Page d'attente : la même porte, mais elle accueille aussi les laveurs
   qui arrivent par la vidéo. Le code reste, plus bas, pour la direction. */
.porte{position:absolute;inset:0;min-height:100%;display:grid;place-items:center;padding:26px;
  background:#000000;
  background-image:radial-gradient(90% 55% at 12% -8%,rgba(255,255,255,.06),transparent 60%),
                   radial-gradient(70% 45% at 95% 4%,rgba(255,255,255,.04),transparent 62%)}
.porte-in{width:100%;max-width:400px;text-align:center;padding:40px 0}
.porte-sur{font-size:11px;letter-spacing:.2em;color:#6E6E6E;font-weight:600;margin-bottom:10px}
.porte-video{width:100%;max-width:250px;margin:24px auto 0;border-radius:22px;overflow:hidden;
  background:#0E0E0E;box-shadow:0 24px 60px rgba(0,0,0,.7);position:relative;aspect-ratio:9/16}
.porte-video video{display:block;width:100%;height:100%;object-fit:cover}
.porte-cta{display:block;width:100%;margin-top:22px;background:linear-gradient(135deg,#FFFFFF,#D9D9D9);
  color:#000000;border:0;border-radius:15px;padding:17px;font-family:var(--police-texte),sans-serif;
  font-size:15.5px;font-weight:600;text-decoration:none;box-sizing:border-box}
.porte-args{display:flex;flex-direction:column;gap:11px;margin-top:24px;text-align:left}
.porte-arg{display:flex;gap:11px;align-items:flex-start;background:#111111;border-radius:14px;
  padding:13px 15px;font-size:13.5px;line-height:1.5;color:#D6D6D6}
.porte-arg b{color:#FFFFFF;font-weight:600}
.porte-arg span:first-child{color:#8FD8B4;flex:none;font-weight:700}
/* section publique : ce qu'un client, et un contrôleur de moyen de
   paiement, doivent pouvoir lire sans se connecter */
.porte-bloc{margin-top:42px;padding-top:30px;border-top:1px solid #232323;text-align:left}
.porte-bloc h2{font-family:var(--police-titre),sans-serif;font-weight:600;font-size:22px;
  color:#FFFFFF;margin:0 0 6px;text-align:center}
.porte-bloc p{color:#A6A6A6;font-size:14px;line-height:1.65;margin:0 0 18px;text-align:center}
.porte-prix{width:100%;border-collapse:collapse;font-size:14px}
.porte-prix td{padding:12px 0;border-top:1px solid #1E1E1E;color:#D6D6D6}
.porte-prix td:last-child{text-align:right;color:#FFFFFF;white-space:nowrap}
.porte-prix tr:first-child td{border-top:0}
.porte-note{color:#7A7A7A;font-size:12.5px;line-height:1.6;margin-top:14px;text-align:left}
.porte-moyens{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.porte-moyens span{background:#141414;border-radius:999px;padding:7px 14px;font-size:12.5px;color:#C6C6C6}
.porte-legal{margin-top:26px;font-size:12.5px;line-height:1.75;color:#7A7A7A;text-align:center}
.porte-legal a{color:#C6C6C6}
.porte .lang{background:#141414}
.porte .lang button{color:#7A7A7A}
.porte .lang button[aria-pressed=true]{background:#F5F5F5;color:#000}
.porte-sep{margin:38px 0 0;padding-top:26px;border-top:1px solid #232323}
.porte-sep .porte-min{background:none;border:0;color:#6E6E6E;font-family:var(--police-texte),sans-serif;
  font-size:13px;text-decoration:underline;padding:0;cursor:pointer}
.porte-code{display:none;margin-top:18px}
.porte-code.on{display:block}
.porte-marque{display:inline-flex;align-items:center;gap:9px;font-family:var(--police-titre),sans-serif;
  font-weight:600;font-size:15px;letter-spacing:.18em;color:#FFFFFF;margin-bottom:26px}
.porte-marque i{width:9px;height:9px;border-radius:50%;background:#FFFFFF;position:relative;
  font-style:normal}
.porte-marque i::after{content:"";position:absolute;left:1.5px;top:1.5px;width:3px;height:3px;
  border-radius:50%;background:#000000}
.porte h1{font-family:var(--police-titre),sans-serif;font-weight:600;font-size:30px;margin:0 0 12px;
  color:#FFFFFF;letter-spacing:-.01em}
.porte p{color:#A6A6A6;font-size:14.5px;line-height:1.65;margin:0 0 26px}
.porte input{width:100%;background:#141414;border:1.5px solid transparent;border-radius:15px;
  color:#FFFFFF;font-family:var(--police-texte),sans-serif;font-size:16px;padding:16px 18px;
  text-align:center;letter-spacing:.08em}
.porte input:focus{border-color:#FFFFFF;outline:none}
.porte-err{color:var(--rouge,#DFA09A);font-size:13px;min-height:20px;margin-top:10px}
.porte button{width:100%;margin-top:8px;background:linear-gradient(135deg,#FFFFFF,#D9D9D9);
  color:#000000;border:0;border-radius:15px;padding:16px;font-family:var(--police-texte),sans-serif;
  font-size:15px;font-weight:500}
.lang-b{font-family:var(--police-texte),sans-serif;font-size:12px;font-weight:700;letter-spacing:.06em;
  color:var(--perle)}
.lang-menu{position:fixed;inset:0;z-index:72;background:rgba(0,0,0,.6);display:grid;place-items:center;
  padding:26px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lang-menu .in{width:100%;max-width:330px;background:var(--carte);border-radius:24px;padding:22px;
  text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.7)}
.lang-menu b{display:block;font-size:16px;font-weight:600;margin-bottom:18px}
.lang-menu .lang{display:flex;flex-direction:column;gap:8px;background:none;padding:0;width:100%}
.lang-menu .lang button{padding:16px;font-size:15px;font-weight:500;letter-spacing:0;
  background:var(--carte-2);color:var(--perle);border-radius:15px;width:100%;text-align:center}
.lang-menu .lang button[aria-pressed=true]{background:var(--perle);color:#000000}
.lang{display:inline-flex;gap:4px;background:var(--carte-2);border-radius:999px;padding:4px}
.lang button{background:none;border:0;color:var(--gris-f);font-family:inherit;font-size:12px;
  font-weight:600;letter-spacing:.06em;padding:7px 11px;border-radius:999px;cursor:pointer}
.lang button[aria-pressed=true]{background:var(--perle);color:#000000}
.centre{text-align:center}

/* ---------- barre du haut ---------- */
.haut{position:sticky;top:0;z-index:28;background:rgba(0,0,0,.88);backdrop-filter:blur(20px);
  padding-top:env(safe-area-inset-top)}
.haut-in{max-width:560px;margin:0 auto;padding:0 22px;height:70px;display:flex;align-items:center;gap:14px}
.haut .titre{font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:400}
.icone{width:44px;height:44px;border-radius:50%;border:0;background:var(--carte);
  display:grid;place-items:center;flex:none;transition:background .2s}
.icone:hover{background:var(--carte-2)}
.icone svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- titres ---------- */
.entete{padding:34px 0 30px}
.sur{font-size:11px;letter-spacing:.2em;color:var(--gris);display:block;margin-bottom:12px}
.entete h1{font-size:34px}
.entete p{color:var(--gris);font-size:14.5px;margin-top:14px;line-height:1.65}
.section{margin-bottom:44px}
.lab{display:block;font-size:11px;letter-spacing:.2em;color:var(--gris);margin-bottom:16px}
.sous{color:var(--gris);font-size:14px;margin-top:12px;line-height:1.7}

/* ---------- cartes ---------- */
.carte{background:var(--carte);border:0;border-radius:var(--r);padding:24px}
.carte + .carte{margin-top:14px}
.rangee{display:flex;align-items:center;gap:16px;width:100%;text-align:left;
  background:var(--carte);border:0;border-radius:var(--r);padding:18px 20px;margin-bottom:12px;
  transition:background .2s,box-shadow .2s}
.rangee:hover{background:var(--carte-2)}
a.rangee{text-decoration:none;color:inherit}
.rangee[aria-pressed=true]{box-shadow:inset 0 0 0 1.5px var(--i1)}
.txt{flex:1;min-width:0}
.r-t{display:block;font-size:15.5px;line-height:1.4;font-weight:400}
.r-s{display:block;font-size:13px;color:var(--gris);margin-top:6px;line-height:1.55}
.fl{margin-left:auto;color:var(--gris-f);flex:none}
/* Squelettes : pendant que les données arrivent, on montre la forme de
   ce qui va s'afficher plutôt qu'un vide ou un « rien trouvé » trompeur.
   Annoncer « aucun laveur » alors que la liste charge encore est la
   pire réponse possible : elle est fausse, et elle fait partir. */
.sq{background:var(--carte);border-radius:var(--r);padding:18px 20px;margin-bottom:12px;
  display:flex;align-items:center;gap:16px}
.sq-r{border-radius:8px;background:linear-gradient(90deg,
  rgba(255,255,255,.05) 25%,rgba(255,255,255,.11) 37%,rgba(255,255,255,.05) 63%);
  background-size:400% 100%;animation:sqOnde 1.4s ease infinite}
.sq-p{width:46px;height:46px;border-radius:14px;flex:none}
.sq-c{flex:1;display:flex;flex-direction:column;gap:9px}
.sq-l1{height:13px;width:58%}
.sq-l2{height:11px;width:82%}
@keyframes sqOnde{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.sq-r{animation:none}}
/* pictogramme d'un moyen de paiement, dans sa pastille */
.moy-i{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:var(--carte-2);color:var(--perle);transition:background .2s,color .2s}
.moy-i svg{width:22px;height:22px;display:block}
.rangee[aria-pressed=true] .moy-i{background:var(--perle);color:#000}

/* ---------- avatars ---------- */
.av{width:52px;height:52px;border-radius:17px;flex:none;object-fit:cover;
  background:var(--carte-2);display:grid;place-items:center;
  font-family:var(--police-texte),sans-serif;font-weight:500;font-size:17px;letter-spacing:.02em;color:var(--i1)}
.av.s{width:44px;height:44px;border-radius:14px;font-size:15px}
.av.xl{width:88px;height:88px;border-radius:28px;font-size:28px}
.pastille{position:relative;display:inline-block;flex:none}
.pastille::after{content:"";position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;
  border-radius:50%;background:var(--vert);border:3px solid var(--fond)}

/* ---------- badges ---------- */
.bg{display:inline-flex;align-items:center;gap:5px;font-size:11px;letter-spacing:.02em;
  border-radius:999px;padding:5px 11px;border:0;white-space:nowrap;background:var(--carte-2)}
.bg-v{color:var(--vert)} .bg-a{color:var(--ambre)} .bg-g{color:var(--gris)} .bg-r{color:var(--rouge)}
.puces{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.puce{font-size:12px;color:#A6A6A6;background:var(--carte-2);border-radius:999px;padding:6px 13px}

/* ---------- champs ---------- */
.champ{margin-bottom:18px}
.champ label{display:block;font-size:13px;color:var(--gris);margin-bottom:9px}
.champ label i{color:var(--i1);font-style:normal;margin-left:3px}
input,textarea{width:100%;background:var(--carte);border:1.5px solid transparent;border-radius:15px;
  color:var(--perle);font-family:inherit;font-weight:300;font-size:16px;padding:15px 17px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--gris-f)}
input:focus,textarea:focus{border-color:var(--i1);outline:none;background:var(--carte-2)}
.duo{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.note-info.attention{background:rgba(223,160,154,.10);box-shadow:inset 0 0 0 1px rgba(223,160,154,.35)}
.note-info.attention svg{stroke:var(--rouge)}
.note-info.attention b{color:var(--rouge);font-weight:600}
.note-info{display:flex;gap:11px;align-items:flex-start;background:var(--carte-2);
  border-radius:15px;padding:15px 17px;font-size:12.5px;color:var(--gris);line-height:1.6;margin-top:12px}
.note-info svg{width:15px;height:15px;flex:none;margin-top:3px;stroke:var(--i1);fill:none;stroke-width:1.7}

/* ---------- choix ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{background:var(--carte);border:0;border-radius:999px;padding:13px 20px;font-size:14px;
  transition:background .2s,color .2s}
.chip:hover{background:var(--carte-2)}
.montant-libre{display:flex;align-items:baseline;gap:12px;background:var(--carte);border-radius:var(--r);
  padding:14px 22px;cursor:text;border:1.5px solid transparent}
.montant-libre:focus-within{border-color:var(--i1);background:var(--carte-2)}
.montant-libre input{background:none;border:0;padding:0;font-size:42px;font-weight:700;letter-spacing:-.02em;
  color:var(--perle);min-width:0;flex:1}
.montant-libre input:focus{background:none;border:0}
.montant-libre span{color:var(--gris);font-size:17px;font-weight:500}
/* choix du pays */
.liste-pays{position:relative}
.liste-pays select{width:100%;appearance:none;-webkit-appearance:none;background:var(--carte);color:var(--perle);
  border:1.5px solid transparent;border-radius:15px;padding:16px 44px 16px 16px;font:inherit;font-size:16px}
.liste-pays select:focus{border-color:var(--i1);outline:none;background:var(--carte-2)}
.liste-pays::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;margin-top:-6px;
  border-right:2px solid var(--gris);border-bottom:2px solid var(--gris);transform:rotate(45deg);pointer-events:none}
.carte-rayon svg{touch-action:none;cursor:grab}
.carte-rayon svg:active{cursor:grabbing}
.carte-outils{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:8px}
.carte-outils button{width:40px;height:40px;border-radius:12px;border:0;background:rgba(20,20,20,.9);color:#fff;
  font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 0 0 1px #2E2E2E}
.carte-outils button:hover{background:#262626}
.carte-outils svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2}
.pays-choix{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pays-choix .chip{text-align:left;padding:14px 16px}
.pays-choix .chip span{margin-right:8px}
.note-info.interdit{box-shadow:inset 0 0 0 1.5px var(--rouge)}
.note-info.interdit b{color:var(--rouge);font-weight:600}
.profil-t{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 0 8px}
.profil-t .pastille{margin-bottom:14px}
.profil-t h1{font-size:25px;margin:0 0 4px}
.stats-t{display:flex;justify-content:center;gap:34px;margin:20px 0 16px}
.stats-t div{display:flex;flex-direction:column;align-items:center}
.stats-t b{font-size:19px;font-weight:700}
.stats-t span{font-size:12.5px;color:var(--gris);margin-top:2px}
.bio-t{font-size:14px;color:var(--gris);line-height:1.6;margin:14px 0 0;max-width:340px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ong-t{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;gap:8px;scrollbar-width:none;margin-left:-2px;margin-right:-2px}
.ong-t::-webkit-scrollbar{display:none}
.ong.ong-t button{flex:none;padding:10px 13px;font-size:13px}
/* barre d'actions sous le profil, à la manière d'Instagram :
   deux boutons de même largeur, puis une icône de réglages */
.act-t{display:flex;gap:8px;margin:18px 0 6px;width:100%}
.act-t .btn{flex:1;padding:13px;font-size:14.5px;border-radius:13px}
.act-t .icone{flex:0 0 auto;width:46px;height:46px;border-radius:13px;background:var(--carte);
  border:0;display:grid;place-items:center;color:var(--perle);cursor:pointer}
.act-t .icone svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* bandeau de statut de la fiche, juste sous les boutons */
.etat-fiche{display:flex;align-items:center;gap:10px;background:var(--carte);border-radius:14px;
  padding:12px 15px;margin-top:10px;font-size:13px;color:var(--gris);width:100%;box-sizing:border-box}
.etat-fiche i{width:8px;height:8px;border-radius:50%;flex:none;font-style:normal}
.etat-fiche b{color:var(--perle);font-weight:600}
.grille-t{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin:0 -4px}
.case-t{position:relative;aspect-ratio:9/16;background:var(--carte);overflow:hidden;border-radius:4px}
.case-t-b{position:absolute;inset:0;border:0;padding:0;background:none;cursor:pointer}
.case-t-b .img,.case-t-b video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background-size:cover;background-position:center;pointer-events:none}
.case-t .lecture{position:absolute;left:8px;bottom:6px;color:#fff;font-size:12px;text-shadow:0 1px 4px #000}
.case-t .oter{position:absolute;top:6px;right:6px}
.publier-b{display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer}
.publier-b span{font-size:22px;line-height:1}
.compose-media{border-radius:14px;overflow:hidden;background:#000;max-height:420px;display:flex;justify-content:center}
.compose-media img,.compose-media video{max-width:100%;max-height:420px;object-fit:contain}
#visionneuse{position:fixed;inset:0;z-index:80;background:#000;display:flex;align-items:center;justify-content:center;
  touch-action:none;-webkit-user-select:none;user-select:none}
.vis-media{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vis-media img,.vis-media video{max-width:100%;max-height:100%;object-fit:contain}
.vis-zone{position:absolute;top:70px;bottom:120px;width:30%;background:none;border:0;z-index:2;cursor:pointer}
.vis-zone.g{left:0} .vis-zone.d{right:0}
.vis-haut{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;gap:10px;
  padding:calc(14px + env(safe-area-inset-top)) 14px 24px;background:linear-gradient(#000c,#0000)}
.vis-haut b{font-weight:600;flex:1;text-align:left}
.vis-num{font-size:12.5px;color:#bbb}
.vis-btn{width:40px;height:40px;border-radius:50%;border:0;background:#fff2;color:#fff;font-size:16px;cursor:pointer}
.vis-bas{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:40px 18px calc(22px + env(safe-area-inset-bottom));
  background:linear-gradient(#0000,#000d);font-size:14.5px;line-height:1.55;color:#fff}
.tabs .tab-creer{color:var(--gris)}
.tabs .tab-creer .plus{width:42px;height:27px;border-radius:9px;background:var(--perle);display:flex;
  align-items:center;justify-content:center;margin-bottom:1px;flex:none}
.tabs .tab-creer .plus svg{width:17px;height:17px;stroke:#000;stroke-width:2.6;transform:none}
.tabs .tab-creer[aria-pressed=true]{color:var(--perle)}
.tabs .tab-creer[aria-pressed=true] .plus svg{stroke:#000}
.creer-t{cursor:pointer;min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center}
.creer-t svg{width:30px;height:30px;fill:none;stroke:var(--perle);stroke-width:1.7;stroke-linejoin:round;margin-bottom:4px}
.creer-t b{font-family:inherit;font-size:17px;font-weight:600;color:var(--perle)}
.rangee .coche{flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--gris-f);
  display:inline-flex;align-items:center;justify-content:center}
.rangee[aria-pressed=true] .coche{background:var(--vert);border-color:var(--vert)}
.rangee[aria-pressed=true] .coche::after{content:"";width:6px;height:11px;border:solid #000;border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg) translate(-1px,-1px)}
/* méthode cochée : bien visible, en vert */
.rangee.meth{transition:background .2s,box-shadow .2s}
.rangee.meth[aria-pressed=true]{background:rgba(143,216,180,.14);box-shadow:inset 0 0 0 1.5px var(--vert)}
.rangee.meth[aria-pressed=true] .r-t{color:var(--vert);font-weight:600}
.chip.jour[aria-pressed=true]{background:rgba(143,216,180,.16);color:var(--vert);
  box-shadow:inset 0 0 0 1.5px var(--vert);font-weight:600}
.chip.jour[aria-pressed=false]{color:var(--gris)}
.carte-rayon{position:relative;-webkit-user-select:none;user-select:none;background:#050505;border-radius:var(--r);overflow:hidden;cursor:crosshair;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.carte-rayon svg{display:block;width:100%;height:auto}
.carte-rayon .v{fill:#3A3A3A;transition:fill .25s}
.carte-rayon .v.in{fill:#fff}
.carte-rayon .vt{fill:#5E5E5E;font-weight:500;pointer-events:none;transition:fill .25s;paint-order:stroke;stroke:#050505;stroke-linejoin:round}
.carte-rayon .vt.in{fill:#E6E6E6}
.carte-rayon .mer{fill:#050505}
.carte-rayon .grille{fill:#2A2A2A}
.carte-rayon .voisins{fill:none;stroke:#1C1C1C;stroke-linejoin:round}
.carte-rayon .pays{fill:rgba(255,255,255,.025);stroke:#3C3C3C;stroke-linejoin:round}
.carte-rayon .lac{fill:#000;stroke:#262626}
.carte-rayon .zone{fill:rgba(255,255,255,.05);stroke:#fff}
.carte-rayon .poignee{cursor:ew-resize}
.carte-rayon .poignee-p{fill:#fff;stroke:#050505}
.carte-rayon .poignee-f{fill:none;stroke:#050505;stroke-linecap:round;stroke-linejoin:round}
.carte-rayon .echelle path{fill:none;stroke:#6E6E6E}
.carte-rayon .echelle text{fill:#8A8A8A;paint-order:stroke;stroke:#050505}
.carte-rayon .onde{fill:none;stroke:#fff;opacity:0;transform-box:fill-box;transform-origin:center;
  animation:onde 2.6s ease-out infinite}
@keyframes onde{0%{opacity:.55;transform:scale(.2)}100%{opacity:0;transform:scale(1)}}
.carte-rayon .depart{fill:#fff}
.carte-rayon .depart-t{fill:#000;font-weight:800;pointer-events:none}
.carte-rayon .depart-b{fill:#fff}
.carte-aide{position:absolute;left:10px;bottom:10px;font-size:12px;color:var(--gris);pointer-events:none;
  background:rgba(12,12,12,.82);padding:5px 10px;border-radius:999px}
.rayon-carte{background:var(--carte);border:1px solid var(--trait);border-radius:20px;padding:18px 22px 10px;margin-top:14px}
.rayon-carte .rc-haut{display:flex;align-items:baseline;justify-content:space-between;font-size:15px;color:var(--gris);font-weight:500}
.rayon-carte .rc-haut b{color:var(--perle);font-size:17px;font-weight:800}
input.rayon-range{-webkit-appearance:none;appearance:none;width:100%;height:36px;padding:0;margin:0;
  background:transparent;border:0;border-radius:0}
input.rayon-range:focus{background:transparent;border:0}
.rayon-range::-webkit-slider-runnable-track{height:4px;border-radius:4px;
  background:linear-gradient(90deg,#fff var(--p,15%),var(--trait) var(--p,15%))}
.rayon-range::-moz-range-track{height:6px;border-radius:6px;background:var(--trait)}
.rayon-range::-moz-range-progress{height:6px;border-radius:6px;background:#fff}
.rayon-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;
  margin-top:-10px;box-shadow:0 2px 10px rgba(0,0,0,.6)}
.rayon-range::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:#fff;
  box-shadow:0 0 0 6px rgba(255,255,255,.14)}
.rayon-bornes{display:flex;justify-content:space-between;font-size:12px;color:var(--gris-f);margin-top:2px}
.chip[aria-pressed=true]{background:var(--iris);color:#000000;font-weight:500}
.grille2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tuile{background:var(--carte);border:0;border-radius:var(--r);padding:20px;text-align:left;
  min-height:150px;display:flex;flex-direction:column;justify-content:flex-start;
  transition:background .2s}
.tuile:hover{background:var(--carte-2)}
.tuile[aria-pressed=true]{box-shadow:inset 0 0 0 1.5px var(--i1)}
.tuile b{font-family:var(--police-texte),sans-serif;font-weight:500;font-size:16px;display:block;line-height:1.3}
.tuile span{font-size:12.5px;color:var(--gris);margin-top:8px;display:block;line-height:1.55}
.tuile{justify-content:space-between}
.tuile svg{width:46px;height:46px;border-radius:15px;background:var(--iris);padding:12px;
  box-sizing:border-box;fill:none;stroke:#000000;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex:none;align-self:flex-start}

.creneaux{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.creneaux .chip{text-align:center;padding:14px 4px;border-radius:15px}
.defile{display:flex;gap:11px;overflow-x:auto;padding:0 20px 8px;scrollbar-width:none;margin:0 -20px}
.defile::-webkit-scrollbar{display:none}
.date-c{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:70px;
  background:var(--carte);border:0;border-radius:18px;padding:14px 6px;flex:none;transition:background .2s}
.date-c[aria-pressed=true]{background:var(--iris);color:#000000}
.date-c b{font-family:var(--police-texte),sans-serif;font-weight:500;font-size:21px}
.date-c span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}

.segm{display:flex;background:var(--carte);border-radius:999px;padding:5px;gap:4px;
  overflow-x:auto;scrollbar-width:none}
.segm::-webkit-scrollbar{display:none}
.segm button{flex:1 0 auto;border:0;background:none;border-radius:999px;padding:12px 14px;
  font-size:14px;white-space:nowrap;color:var(--gris);transition:background .2s,color .2s}
.segm button[aria-pressed=true]{background:var(--iris);color:#000000;font-weight:500}
.ong{display:flex;gap:10px;margin-bottom:24px}
.ong button{background:var(--carte);border:0;border-radius:999px;padding:13px 20px;font-size:14px;
  min-height:44px;
  color:var(--gris);transition:background .2s,color .2s}
.ong button[aria-pressed=true]{background:var(--perle);color:#000000;font-weight:500}

/* ---------- progression ---------- */
.pas{display:flex;align-items:center;gap:9px;margin-bottom:28px}
.pas i{width:28px;height:28px;border-radius:50%;background:var(--carte);display:grid;
  place-items:center;font-size:12px;font-style:normal;color:var(--gris-f);flex:none;font-weight:400}
.pas i[data-e=on]{background:var(--carte-2);color:var(--perle);box-shadow:inset 0 0 0 1.5px var(--i1)}
.pas i[data-e=ok]{background:var(--iris);color:#000000}
.pas u{flex:1;height:2px;background:var(--carte);border-radius:2px;text-decoration:none}
.pas u[data-e=ok]{background:var(--iris)}

/* ---------- lignes ---------- */
.ligne{display:flex;justify-content:space-between;gap:18px;padding:12px 0;font-size:14.5px;
  line-height:1.5}
.ligne + .ligne{border-top:1px solid rgba(255,255,255,.07)}
.ligne span:first-child{color:var(--gris);flex:none}
.ligne span:last-child{text-align:right}
.ligne.tot{margin-top:10px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);align-items:center}
.ligne.tot b{font-family:var(--police-texte),sans-serif;font-weight:500;font-size:26px;letter-spacing:-.02em}

.case{display:flex;align-items:flex-start;gap:13px;font-size:13px;color:var(--gris);
  text-align:left;background:none;border:0;padding:0;line-height:1.65}
.boite{width:22px;height:22px;flex:none;border:1.5px solid var(--trait);border-radius:8px;margin-top:2px;
  display:grid;place-items:center;font-size:11px;color:#000000;background:transparent}
.case[aria-pressed=true] .boite{background:var(--iris);border-color:transparent}

/* ---------- boutons ---------- */
.btn{background:var(--iris);color:#000000;border:0;border-radius:16px;padding:18px 26px;
  font-weight:600;font-size:15px;transition:opacity .2s,background .2s}
/* le rouge n'existe que pour les gestes qui engagent */
.btn-rouge{background:var(--rouge-vif);color:#FFFFFF}
.btn-rouge:hover{background:var(--rouge-vif-h);opacity:1}
.btn-rouge.charge{background:var(--rouge-vif);color:#FFFFFF}
.btn-rouge .btn-tourne{border-color:rgba(255,255,255,.3);border-top-color:#FFFFFF}
.rangee-rouge{background:var(--rouge-vif);color:#FFFFFF}
.rangee-rouge:hover{background:var(--rouge-vif-h)}
.rangee-rouge .r-t{color:#FFFFFF;font-weight:600}
.rangee-rouge .fl{stroke:#FFFFFF}
.btn:hover{opacity:.9}
.btn:disabled{background:var(--carte);color:var(--gris-f);cursor:not-allowed}
/* bouton en attente : garde sa couleur, montre qu'il travaille */
.btn.charge{background:var(--iris);color:#000000;opacity:1;cursor:progress;
  display:inline-flex;align-items:center;justify-content:center;gap:10px}
.btn-tourne{width:15px;height:15px;flex:none;border-radius:50%;
  border:2px solid rgba(0,0,0,.25);border-top-color:#000000;
  animation:tour .7s linear infinite}
@media (prefers-reduced-motion:reduce){.btn-tourne{animation-duration:2s}}
.btn-2{background:var(--carte);color:var(--perle)}
/* coordonnées bancaires : une ligne, un geste pour copier */
.coord{display:flex;flex-direction:column;gap:8px}
.coord-l{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--carte);border:1px solid var(--trait);border-radius:14px;
  padding:14px 16px;color:var(--perle);transition:background .18s,border-color .18s}
.coord-l:hover{background:var(--carte-2)}
.coord-l.copie{border-color:var(--vert)}
.coord-k{flex:none;width:118px;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gris-f)}
.coord-v{flex:1;font-size:15px;word-break:break-all}
.coord-c{flex:none;font-size:12px;color:var(--i1)}
.coord-l.copie .coord-c{color:var(--vert)}
@media (max-width:420px){
  .coord-l{flex-wrap:wrap}
  .coord-k{width:100%}
  .coord-v{flex:1 1 auto}
}
.btn-2:hover{background:var(--carte-2);opacity:1}
.btn-l{width:100%}
.lien-t{background:none;border:0;color:var(--i2);font-size:13.5px;padding:13px 0;min-height:44px}
.manque{font-size:13px;color:var(--gris-f);text-align:center;margin-top:16px;min-height:20px}

.vide{text-align:center;padding:50px 26px;background:var(--carte);border-radius:var(--r)}
.vide h3{font-size:18px;margin-bottom:12px;font-family:var(--police-texte),sans-serif;font-weight:400}
.vide p{color:var(--gris);font-size:14px;line-height:1.65}
.vide .btn{margin-top:24px}

/* La notification se place sous la barre du haut, jamais dessous ni
   dessus. La zone sûre seule ne suffisait pas : dans une vue intégrée
   elle vaut zéro, et la bannière repassait sous la barre d'état. Le
   décalage fixe garantit qu'elle reste lisible partout. */
/* feuille qui monte du bas : choix du moyen de paiement, sans quitter l'écran */
#voile{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.62);
  animation:apparait .22s ease both;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
@keyframes apparait{from{opacity:0}to{opacity:1}}
.feuille{position:fixed;left:0;right:0;bottom:0;z-index:71;max-width:540px;margin:0 auto;
  background:var(--fond);border-radius:26px 26px 0 0;padding:22px 20px calc(26px + env(safe-area-inset-bottom));
  box-shadow:0 -20px 60px rgba(0,0,0,.7);animation:monte .32s cubic-bezier(.2,.75,.3,1) both;
  max-height:86vh;overflow:auto}
@keyframes monte{from{transform:translateY(102%)}to{transform:none}}
.feuille-h{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.feuille-h .icone{flex:none}
.feuille-h b{font-size:17px;font-weight:600;flex:1;text-align:center;margin-right:44px}
.feuille .sous{margin:0 0 18px;text-align:center}
.feuille .rangee{margin-bottom:10px}
/* bandeau hors ligne : sans lui, une session expirée se manifeste par
   des erreurs incompréhensibles au lieu d'un message clair */
.horsligne{position:sticky;top:0;z-index:29;display:flex;align-items:center;gap:12px;
  background:rgba(223,160,154,.14);box-shadow:inset 0 -1px 0 rgba(223,160,154,.3);
  padding:12px 18px;font-size:13px;line-height:1.5;color:var(--rouge)}
.horsligne b{display:block;font-weight:600;color:var(--rouge)}
.horsligne button{flex:none;background:var(--rouge);color:#000;border:0;border-radius:999px;
  padding:9px 15px;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.alerte{position:fixed;left:16px;right:16px;z-index:60;max-width:508px;margin:0 auto;
  top:calc(78px + env(safe-area-inset-top));
  background:var(--carte-2);border-radius:18px;padding:16px 18px;
  box-shadow:0 16px 40px rgba(0,0,0,.6);animation:tombe .3s cubic-bezier(.2,.7,.3,1) both}
.alerte b{display:block;font-weight:500;font-size:14px;margin-bottom:5px}
.alerte p{font-size:13px;color:var(--gris);line-height:1.55}
.alerte.ok b{color:var(--vert)} .alerte.ko b{color:var(--rouge)}
@keyframes tombe{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

/* ---------- barre d'action ---------- */
.action{position:fixed;left:0;right:0;bottom:calc(100px + env(safe-area-inset-bottom));z-index:26;
  padding:0 20px}
.action.seule{bottom:calc(20px + env(safe-area-inset-bottom))}
.action-in{max-width:540px;margin:0 auto;display:flex;align-items:center;gap:14px;
  background:rgba(18,18,24,.82);backdrop-filter:blur(22px);border-radius:22px;padding:10px 10px 10px 20px}
.action .prix{flex:none;line-height:1.25}
.action .prix small{display:block;font-size:10px;letter-spacing:.14em;color:var(--gris)}
.action .prix b{font-family:var(--police-texte),sans-serif;font-weight:500;font-size:21px;letter-spacing:-.02em}
.action .btn{flex:1;padding:16px 20px}
.action .retour-etape{flex:0 0 auto;padding:16px 20px}

/* ---------- onglets flottants ---------- */
/* ---------- barre de navigation « liquide » ----------
   Une pilule flottante. Sous l'onglet actif, une goutte pend au bord
   inférieur et glisse d'un onglet à l'autre avec un léger ressort ; le
   filtre « goo » fond la goutte dans la pilule. La barre n'est dessinée
   qu'une fois : seuls l'onglet actif et la position de la goutte changent,
   sinon aucune transition ne pourrait se jouer. */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:0 16px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom));pointer-events:none}
.tabs-in{position:relative;max-width:440px;margin:0 auto;display:flex;height:64px;pointer-events:auto;
  border-radius:24px;filter:drop-shadow(0 12px 28px rgba(0,0,0,.6))}
.tabs-liquide{position:absolute;inset:0;border-radius:24px;background:#151519;filter:url(#goo);
  pointer-events:none}
.tabs-goutte{position:absolute;bottom:-8px;width:26px;height:20px;border-radius:50%;background:#151519;
  left:calc((var(--i,0) + .5) * (100% / var(--n,5)));transform:translateX(-50%);
  transition:left .55s cubic-bezier(.62,-.35,.3,1.35)}
.tabs-point{position:absolute;bottom:-4px;width:5px;height:5px;border-radius:50%;background:#FFFFFF;
  left:calc((var(--i,0) + .5) * (100% / var(--n,5)));transform:translateX(-50%);
  transition:left .55s cubic-bezier(.62,-.35,.3,1.35)}
.tabs button{position:relative;z-index:1;flex:1;min-width:0;background:none;border:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;color:var(--gris-f);font-size:10px;font-weight:500;
  letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px;
  transition:color .25s;border-radius:24px}
.tabs button[aria-pressed=true]{color:var(--perle)}
.tabs svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .55s cubic-bezier(.62,-.35,.3,1.35),fill .25s,stroke-width .25s}
.tabs button[aria-pressed=true] svg{fill:rgba(255,255,255,.18);stroke:#FFFFFF;stroke-width:2;transform:translateY(-2px)}

/* ---------- carte compte ---------- */
.compte.ouvrable{cursor:pointer;transition:transform .18s ease}
.compte.ouvrable:active{transform:scale(.985)}
.compte{position:relative;overflow:hidden;border-radius:28px;padding:26px 24px;min-width:0;
  background:radial-gradient(120% 140% at 10% 0%,#242424 0%,#131313 55%,#080808 100%)}
.compte::after{content:"";position:absolute;right:-70px;top:-70px;width:230px;height:230px;
  border-radius:50%;background:radial-gradient(circle,var(--halo,rgba(255,255,255,.16)),transparent 68%)}
/* Le bouton portait deux règles d'affichage contradictoires : un
   inline-flex horizontal, puis un grid qui empilait l'icône au-dessus du
   texte. Avec une hauteur figée à 38 pixels, le contenu débordait de la
   pastille. Une seule règle désormais, et plus de hauteur imposée. */
/* Le bouton vit dans la ligne du titulaire, poussé à droite. Auparavant
   il était en position absolue avec une hauteur figée et deux règles
   d'affichage contradictoires : son contenu débordait de la pastille. */
.carte-perso{margin-left:auto;flex:none;border-radius:999px;
  width:36px;height:36px;display:inline-grid;place-items:center;
  color:var(--perle);border:0;background:rgba(255,255,255,.12);
  transition:background .2s}
.carte-perso:hover{background:rgba(255,255,255,.2)}
.carte-perso svg{width:18px;height:18px;fill:none;stroke:var(--perle);stroke-width:1.7}
.echantillons{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ech{border:0;border-radius:18px;height:104px;position:relative;padding:0;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:11px;font-size:12px;
  font-family:inherit;color:var(--perle);cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.ech::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 -34px 34px -22px rgba(0,0,0,.72),inset 0 0 0 1px rgba(255,255,255,.07)}
.ech span{position:relative;z-index:1;text-shadow:0 1px 6px rgba(0,0,0,.85)}
.ech:active{transform:scale(.96)}
.ech[aria-pressed=true]{box-shadow:0 0 0 2px var(--perle)}
.ech[aria-pressed=true]::before{content:"✓";position:absolute;top:9px;right:10px;z-index:2;
  width:22px;height:22px;border-radius:50%;background:var(--perle);color:#000;font-size:12px;
  display:grid;place-items:center;font-weight:700}
/* mise en page façon carte bancaire : titulaire en haut, montant en bas */
.c-haut{position:relative;z-index:1;display:flex;align-items:center;gap:12px;
  margin-bottom:44px}
.c-nom{font-family:var(--police-titre),sans-serif;font-weight:600;font-size:19px;
  letter-spacing:0;color:var(--perle);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.c-badge{flex:none;font-size:11.5px;letter-spacing:.06em;padding:5px 12px;
  border-radius:999px;background:rgba(255,255,255,.13);color:var(--perle)}
/* sur un petit téléphone, la rangée passait sous le bord de la carte :
   elle descend maintenant d'une ligne plutôt que d'être coupée */
.c-bas{position:relative;z-index:1;display:flex;align-items:flex-end;
  justify-content:space-between;gap:14px;flex-wrap:wrap;min-width:0}
.c-perle{width:38px;height:38px;flex:none;color:var(--perle);opacity:.92;
  margin-left:auto}
/* la phrase explicative vit hors de la carte, pour ne pas l'alourdir */
.c-sous{font-size:13px;line-height:1.55;color:var(--gris);margin:14px 2px 0}
.compte .lab{margin-bottom:14px;position:relative}
/* un dégradé au bord droit dit qu'il reste du contenu à faire défiler */
.segm,.chips-rang,.defile-r{-webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)}
.segm.fin,.chips-rang.fin,.defile-r.fin{mask-image:none;-webkit-mask-image:none}
.compte .val{position:relative;font-family:var(--police-texte),sans-serif;font-weight:500;font-size:46px;letter-spacing:-.035em;
  line-height:1.05}
.compte .val small{font-size:16px;color:var(--gris);margin-left:9px;font-weight:300;letter-spacing:0}
.compte .note{position:relative;font-size:12.5px;color:var(--gris);margin-top:12px;line-height:1.6}
/* Les boutons ne s'étalent plus sur toute la largeur : ils se regroupent
   à gauche, en pastilles plus petites. Étirés, un libellé sur deux lignes
   décalait tout l'alignement de la rangée. */
.rapides{position:relative;display:flex;gap:10px;margin:0 0 2px auto;
  justify-content:flex-end;flex-wrap:nowrap;flex:0 1 auto;min-width:0}
.rapide{flex:0 1 auto;width:56px;min-width:46px;display:flex;flex-direction:column;align-items:center;gap:7px;
  background:none;border:0;font-size:9.5px;color:var(--gris);text-align:center;
  line-height:1.25;padding:0}
/* pastilles de verre : on devine la carte au travers, avec un liseré
   clair et un flou d'arrière-plan plutôt qu'un aplat opaque */
.rapide svg{width:42px;height:42px;max-width:100%;padding:12px;border-radius:50%;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  fill:none;stroke:var(--perle);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  box-sizing:border-box;transition:background .2s,border-color .2s}
.rapide:hover svg{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24)}
/* le premier reste l'action principale, mais en verre clair */
.rapide:first-child svg{background:rgba(255,255,255,.82);border-color:rgba(255,255,255,.5);
  stroke:#000000}
.rapide:first-child:hover svg{background:rgba(255,255,255,.92)}

/* ---------- graphique ---------- */
.graph{display:flex;align-items:flex-end;gap:10px;height:140px;margin-top:24px}
.barre{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px}
.barre i{width:100%;background:var(--carte-2);border-radius:8px;display:block;min-height:4px;
  transition:height .4s cubic-bezier(.22,.61,.36,1)}
.barre.max i{background:var(--iris)}
.barre span{font-size:10.5px;color:var(--gris-f);letter-spacing:.06em}
.tendance{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;border-radius:999px;
  padding:6px 13px;background:var(--carte-2)}

/* ---------- boutique et avis ---------- */
.defile-r{display:flex;gap:12px;overflow-x:auto;padding:0 20px 10px;margin:0 -20px;scrollbar-width:none}
.defile-r::-webkit-scrollbar{display:none}
.recomp{min-width:215px;flex:none;border-radius:var(--r);padding:20px;display:flex;
  flex-direction:column;justify-content:space-between;min-height:182px;
  background:radial-gradient(130% 120% at 100% 0%,#282828 0%,#151515 60%)}
.recomp b{font-family:var(--police-texte),sans-serif;font-weight:500;font-size:16.5px;display:block;line-height:1.35}
.recomp span{font-size:12.5px;color:var(--gris);display:block;margin-top:10px;line-height:1.55}
.recomp .cout{margin-top:18px;font-size:13px;color:var(--i2)}
.avis-c{min-width:255px;flex:none;background:var(--carte);border-radius:var(--r);padding:20px}
.photo-large{min-width:230px;height:170px;flex:none;border-radius:var(--r);background-size:cover;
  background-position:center;background-color:var(--carte-2)}
.pts-tete{position:relative;overflow:hidden;border-radius:26px;padding:30px 24px 26px;text-align:center;
  background:radial-gradient(120% 150% at 50% 0%,#2E2E2E 0%,#161616 60%,#0B0B0B 100%)}
.pts-tete svg{background:var(--iris);border-radius:50%;padding:9px;box-sizing:content-box;margin-bottom:14px}
.pts-val{display:block;font-family:var(--police-texte),sans-serif;font-weight:500;font-size:52px;letter-spacing:-.04em;line-height:1}
.pts-lib{display:block;font-size:14px;color:var(--gris);margin-top:10px}
.pts-note{display:inline-block;margin-top:16px;font-size:12px;color:var(--gris);
  background:rgba(255,255,255,.07);border-radius:999px;padding:6px 14px}
.une-c{min-width:250px;flex:none;border-radius:var(--r);padding:22px;text-align:left;border:0;
  display:flex;flex-direction:column;justify-content:space-between;min-height:196px;color:var(--perle)}
.une-ico{font-size:26px;opacity:.85}
.une-c b{display:block;font-family:var(--police-texte),sans-serif;font-weight:500;font-size:17px;line-height:1.35;margin-top:auto}
.une-c span span{display:block;font-size:12.5px;color:rgba(245,244,248,.62);margin-top:8px;line-height:1.5}
.une-cout{display:inline-block;margin-top:16px;font-size:12.5px;color:var(--i2)}
/* Rangée de filtres qui défile plutôt que de passer à la ligne */
.chips-rang{display:flex;gap:9px;overflow-x:auto;margin-bottom:18px;padding-bottom:4px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips-rang::-webkit-scrollbar{display:none}
.chips-rang .chip{flex:none;padding:11px 17px;font-size:13.5px}

/* ---------- boutique ---------- */
/* La grille garde une hauteur plancher : sans elle, passer de huit
   récompenses à deux faisait fondre la page, et le navigateur ramenait
   la vue vers le haut faute de place pour défiler. */
.grille-boutique{min-height:560px;align-content:start}
/* ---------- inscription, une question par écran ---------- */
.ins-haut{display:flex;align-items:center;gap:14px;margin-bottom:38px}
.pas-jauge{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.10);
  overflow:hidden}
.pas-jauge i{display:block;height:100%;border-radius:3px;background:var(--perle);
  transition:width .32s cubic-bezier(.2,.7,.3,1)}
.pas-n{font-size:12px;color:var(--gris-f);flex:none;min-width:26px;text-align:right}
/* La question occupe la place d'un titre d'écran : c'est elle le sujet,
   pas le formulaire qui la suit. */
.ins-q{font-family:var(--police-titre),sans-serif;font-weight:600;font-size:27px;
  line-height:1.25;color:var(--perle);margin-bottom:10px}
.ins-s{font-size:13.5px;line-height:1.6;color:var(--gris);margin-bottom:26px}
.ins-q+.champ{margin-top:26px}
.ins-ou{display:flex;align-items:center;gap:16px;margin:22px 0;color:var(--gris-f);
  font-size:12.5px}
.ins-ou span:first-child,.ins-ou span:last-child{flex:1;height:1px;background:var(--trait)}
.ins .champ label{display:none}
.ins .champ input{font-size:17px;padding:18px 16px}

.prod{border:0;border-radius:var(--r);background:var(--carte);padding:0 0 14px;text-align:left;
  display:flex;flex-direction:column;overflow:hidden;
  transition:background .2s,transform .18s ease}
.prod:hover{background:var(--carte-2)}
.prod:active{transform:scale(.985)}
.prod:disabled{cursor:not-allowed}
/* une récompense hors de portée s'estompe sans disparaître : elle doit
   rester désirable, c'est ce qui donne envie de cumuler */
.prod-loin .prod-img{filter:saturate(.5)}
.prod-loin .prod-n,.prod-loin .prod-d{opacity:.6}
.prod-img{position:relative;height:104px;display:grid;place-items:center;margin-bottom:14px}
.prod-e{font-size:34px;color:rgba(255,255,255,.9);line-height:1}
/* le coût se lit sur la vignette, pas en bas : on le voit avant de lire */
.prod-tag{position:absolute;top:10px;right:10px;font-size:11px;letter-spacing:.02em;
  padding:5px 10px;border-radius:999px;color:var(--perle);
  background:rgba(0,0,0,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.prod-n{font-size:14.5px;line-height:1.35;padding:0 14px}
.prod-d{font-size:12px;color:var(--gris);margin-top:6px;line-height:1.5;flex:1;padding:0 14px}
.prod-c{margin-top:12px;font-size:13px;padding:0 14px}
.prod-c b{font-weight:500;color:var(--perle)}
.prod-c i{font-style:normal;color:var(--gris-f)}
/* la jauge dit ce qu'il reste à parcourir, mieux qu'un simple refus */
.prod-jauge{display:block;height:3px;border-radius:3px;margin:10px 14px 0;
  background:rgba(255,255,255,.09);overflow:hidden}
.prod-jauge i{display:block;height:100%;border-radius:3px;background:var(--perle);opacity:.55}
.etape-n{width:34px;height:34px;border-radius:50%;background:var(--iris);color:#000000;
  display:grid;place-items:center;font-weight:500;font-size:14px;flex:none}
.code-pts{font-family:var(--police-texte),sans-serif;font-weight:500;letter-spacing:.12em;font-size:13px;color:var(--i2);
  background:var(--carte-2);border-radius:10px;padding:8px 12px}
.etoiles{color:var(--ambre);font-size:13px;letter-spacing:.16em}
.pastille-pts{display:inline-flex;align-items:center;gap:7px;background:var(--iris);color:#000000;
  border:0;border-radius:999px;padding:12px 17px;font-weight:500;font-size:14px;flex:none;
  min-height:44px}

/* ---------- transitions ---------- */
@keyframes entree{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.anime{animation:entree .38s cubic-bezier(.22,.61,.36,1) both}
::view-transition-old(root){animation:vtS .14s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:vtE .22s cubic-bezier(.2,.6,.2,1) both}
@keyframes vtS{to{opacity:0;transform:translateY(-6px)}}
@keyframes vtE{from{opacity:0;transform:translateY(8px)}}
.reflet{transform-origin:50px 50px}
.tourne .reflet{animation:tour .9s cubic-bezier(.42,.02,.22,1)}
@keyframes tour{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- écran d'attente et ouverture ----------
   Pendant le chargement : la perle blanche respire sur fond noir, son
   éclat suit l'avancement réel.
   Ouverture, jouée une fois par session : une nappe BLANCHE naît sous
   la perle et s'étale comme une goutte — son contour irrégulier tourne
   doucement pendant qu'elle grandit, c'est ce qui fait « liquide ».
   La perle s'inverse en noir, « Nacre » se déplie lettre à lettre,
   puis tout le voile se soulève, bord inférieur courbé, et découvre
   l'application déjà prête dessous. */
#attente-app{position:fixed;inset:0;z-index:9999;background:#070707;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  opacity:1;transition:opacity .45s ease,transform .75s cubic-bezier(.76,0,.18,1)}
#attente-app.parti{opacity:0;pointer-events:none}
#attente-app.parti .att-logo{transform:scale(1.22)}

/* la goutte : un grand galet aux bords inégaux, qui grossit en tournant */
.att-liquide{position:absolute;left:50%;top:50%;width:265vmax;height:265vmax;
  margin:-132.5vmax 0 0 -132.5vmax;background:#FFFFFF;
  border-radius:44% 56% 58% 42% / 52% 46% 54% 48%;
  transform:scale(0) rotate(-16deg);
  transition:transform 1s cubic-bezier(.55,0,.12,1),border-radius 1s ease}
#attente-app.rempli .att-liquide{transform:scale(1) rotate(4deg);
  border-radius:48% 52% 50% 50% / 50% 50% 52% 48%}
#attente-app.rempli{background:#070707}
#attente-app.rempli .att-logo{animation:none;filter:none}
/* sur le blanc, la perle passe en noir */
#attente-app.rempli .att-logo circle,
#attente-app.rempli .att-logo .att-reflet{stroke:#070707;transition:stroke .45s ease .25s}
#attente-app.rempli .att-reflet{animation:none;transform:rotate(268deg);
  transition:stroke .45s ease .25s,transform .8s cubic-bezier(.3,.9,.3,1) .2s}

.att-marque{position:relative;display:flex;align-items:center;gap:16px}
.att-mot{font-family:var(--police-titre),sans-serif;font-weight:800;font-size:clamp(38px,9vw,50px);
  letter-spacing:-.03em;color:#070707;line-height:1;max-width:0;overflow:hidden;opacity:0;white-space:nowrap;
  transition:max-width .55s cubic-bezier(.3,.9,.3,1),opacity .3s ease}
#attente-app.mot .att-mot{max-width:240px;opacity:1}
/* chaque lettre monte à son tour, comme portée par l'eau */
.att-mot i{display:inline-block;font-style:normal;transform:translateY(115%);opacity:0;
  transition:transform .6s cubic-bezier(.22,1.2,.36,1) var(--d,0ms),opacity .35s ease var(--d,0ms)}
#attente-app.mot .att-mot i{transform:none;opacity:1}

/* départ : le voile blanc se soulève, bord du bas arrondi */
#attente-app.rempli.parti{opacity:1;transform:translateY(-103%);
  border-radius:0 0 50% 50% / 0 0 90px 90px}
#attente-app.rempli.parti .att-logo{transform:none}

.att-logo{width:104px;height:104px;overflow:visible;
  /* --av va de 0 à 1 : piloté par le script au fil du chargement */
  --av:0;
  transform:scale(calc(.9 + var(--av) * .1));
  filter:drop-shadow(0 0 calc(6px + var(--av) * 20px)
    rgba(247,245,250,calc(.12 + var(--av) * .38)));
  transition:transform .55s cubic-bezier(.3,.9,.3,1),filter .55s ease;
  animation:attRespire 3.4s ease-in-out infinite}

.att-logo circle{opacity:calc(.5 + var(--av) * .5);transition:opacity .55s ease}

/* le reflet fait le tour de la perle, sans à-coup */
.att-reflet{transform-origin:50px 50px;
  animation:attReflet 1.7s linear infinite}

@keyframes attReflet{to{transform:rotate(360deg)}}
@keyframes attRespire{0%,100%{opacity:.86}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .att-logo{animation:none}
  .att-reflet{animation-duration:4s}
  .att-liquide{transition:none}
  .att-mot i{transition:opacity .3s ease}
}

.merci{text-align:center;padding:74px 0 40px}
.merci h2{font-size:29px;margin-top:26px}
.ref{font-family:var(--police-texte),sans-serif;font-weight:500;font-size:18px;letter-spacing:.18em;background:var(--carte);
  border-radius:16px;padding:14px 26px;display:inline-block;margin:22px 0;color:var(--i2)}

/* ---------- accueil qui respire ---------- */
.accueil-haut{display:flex;align-items:center;justify-content:space-between;padding:28px 0 6px}
.marque-nav{display:inline-flex;align-items:center;gap:10px;font-family:var(--police-titre),sans-serif;
  font-weight:800;font-size:23px;letter-spacing:-.02em;color:#FFFFFF}
.av-haut{width:46px;height:46px;border-radius:50%;border:0;background:var(--rouge-vif);color:#FFFFFF;
  display:grid;place-items:center;font-weight:700;font-size:15px;letter-spacing:.02em}
.salut{color:var(--gris);font-size:15px;margin:0 0 22px}
.titre-sec{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:700;margin:0 0 18px;letter-spacing:-.02em}
.titre-sec svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tuiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tuile-x{background:var(--carte);border:0;border-radius:28px;padding:30px 14px 26px;min-height:172px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#FFFFFF;
  text-align:center;transition:transform .18s ease,background .2s}
.tuile-x:hover{background:var(--carte-2)}
.tuile-x:active{transform:scale(.97)}
.tuile-x .ico{width:62px;height:62px;border-radius:20px;background:#1F1F1F;display:grid;place-items:center;color:#FFFFFF}
.tuile-x .ico svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tuile-x.rouge .ico{background:var(--rouge-vif)}
.tuile-x b{font-weight:600;font-size:15px;letter-spacing:.01em}
.tuile-x small{color:var(--gris);font-size:12.5px;margin-top:-8px}
.defile-r{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
.avis-c{scroll-snap-align:start}

/* ---------- laveurs : rangée de cartes ---------- */
.laveurs-rang{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.laveurs-rang::-webkit-scrollbar{display:none}
.lv-carte{flex:0 0 150px;height:192px;scroll-snap-align:start;position:relative;border-radius:22px;overflow:hidden;
  border:2px solid transparent;background:linear-gradient(165deg,#3A0A0A,#141414 70%);cursor:pointer;
  transition:border-color .25s,transform .25s}
.lv-carte:active{transform:scale(.98)}
.lv-carte[aria-pressed=true]{border-color:#FFFFFF}
.lv-carte img,.lv-carte .av-grand{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.lv-carte .av-grand{display:grid;place-items:center;font-family:var(--police-titre),sans-serif;font-size:44px;
  font-weight:800;color:rgba(255,255,255,.9)}
.lv-carte .voile{position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.88))}
.lv-carte .nom{position:absolute;left:13px;right:13px;bottom:12px;text-align:left}
.lv-carte .nom b{display:block;font-weight:700;font-size:14px;line-height:1.2;color:#FFFFFF}
.lv-carte .nom span{display:block;font-size:11.5px;color:#F2C94C;margin-top:4px}
.lv-carte .nom i{font-style:normal;color:var(--gris)}
.lv-fiche{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;border:0;
  background:rgba(0,0,0,.55);color:#FFFFFF;display:grid;place-items:center;backdrop-filter:blur(6px)}
.lv-fiche svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dispo-mois{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--carte);
  border-radius:18px;padding:16px 18px;margin:0 0 6px;font-weight:600;font-size:15px}
.dispo-jour{font-weight:700;font-size:15px;margin:22px 0 12px}
.dispo-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dispo-grille button{background:var(--carte);border:1px solid var(--trait);border-radius:14px;padding:14px 0;
  font-weight:600;font-size:14.5px;color:#FFFFFF;transition:background .15s,transform .15s}
.dispo-grille button:hover{background:var(--carte-2)}
.dispo-grille button:active{transform:scale(.96)}
.dispo-absent{color:var(--gris);font-size:13.5px;margin:0}
.date-c.ferme{opacity:.3;cursor:not-allowed}
.chip.pris{opacity:.3;text-decoration:line-through;cursor:not-allowed}

/* ---------- messages ---------- */
.conv{margin-bottom:10px}
.conv .conv-d{color:var(--i2)}
.msg.moi{background:#FFFFFF;color:#000000}
.msg.moi .qui,.msg.moi .h{color:rgba(0,0,0,.55)}
.support-saisie{display:flex;gap:10px;margin-top:20px}
.support-saisie input{flex:1;min-width:0;background:var(--carte);border:1.5px solid transparent;border-radius:16px;
  color:#FFFFFF;font-family:inherit;font-size:16px;padding:15px 17px}
.support-saisie input:focus{border-color:#FFFFFF;outline:none}
.support-saisie .btn{padding:0 20px;display:grid;place-items:center;border-radius:16px}

/* ---------- confirmation animée ---------- */
.confirm-v{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;
  background:rgba(0,0,0,.86);backdrop-filter:blur(10px);animation:apparait .25s ease}
.confirm-v.sort{animation:vtS .3s ease forwards}
.confirm-v .boite{text-align:center;max-width:340px}
.confirm-v .rond{width:100px;height:100px;margin:0 auto 24px;border-radius:50%;background:var(--vert);
  display:grid;place-items:center;animation:pop .55s cubic-bezier(.34,1.56,.64,1)}
.confirm-v .rond.rouge{background:var(--rouge-vif)}
.confirm-v .rond svg{width:48px;height:48px;fill:none;stroke:#000000;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:60;stroke-dashoffset:60;animation:trace .5s .3s ease-out forwards}
.confirm-v .rond.rouge svg{stroke:#FFFFFF}
.confirm-v h2{font-size:27px}
.confirm-v p{color:var(--gris);margin-top:10px;font-size:15px}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes trace{to{stroke-dashoffset:0}}

/* ---------- barre : l'onglet actif est blanc, simplement ---------- */
.tabs button[aria-pressed=true]{color:#FFFFFF}

/* ---------- page d'ouverture (privée) ---------- */
.porte-in{max-width:420px;padding:48px 0 60px}
.porte h1{font-weight:800;font-size:38px;letter-spacing:-.03em;line-height:1.05;margin:0 0 16px}
.porte p{font-size:16px;line-height:1.7;margin:0 0 30px}
.porte-cta{background:var(--rouge-vif);color:#FFFFFF;border-radius:18px;padding:19px;font-weight:600;font-size:16px}
.porte-cta:hover{background:var(--rouge-vif-h)}
.porte-arg{padding:16px 18px;border-radius:18px}
.porte-arg span:first-child{color:#FFFFFF}
.porte-bloc{margin-top:56px;padding-top:40px}
.porte-bloc h2{font-weight:800;font-size:26px;letter-spacing:-.02em}
@media (prefers-reduced-motion:reduce){.confirm-v .rond,.confirm-v .rond svg{animation:none;stroke-dashoffset:0}}