/* ==========================================================================
   Prosomo - Forfaits SEO et optimisation IA
   Direction reprise des interfaces produit Prosomo :
   noir et bleu nuit, cartes blanches, Inter en poids lourd, arc bleu.
   ========================================================================== */

:root{
  --noir:#000000;
  --nuit:#0B1B26;
  --blanc:#FFFFFF;
  --bleu-marque:#027CDF;   /* surfaces decoratives, sans texte par-dessus */
  --bleu:#0166B6;          /* texte et boutons : 5.7:1 sur blanc, AA */
  --bleu-vif:#2E9BF0;      /* accents sur fond sombre */
  --bleu-fonce:#014E8C;
  --bleu-pale:#E8F3FC;

  --fond:#F4F5F6;
  --trait:#E3E5E8;
  --trait-fort:#C9CDD2;
  --encre:#101418;
  --texte:rgba(16,20,24,.78);
  --texte-doux:rgba(16,20,24,.56);
  --sur-noir:rgba(255,255,255,.74);
  --sur-noir-doux:rgba(255,255,255,.5);
  --trait-noir:rgba(255,255,255,.14);

  --e1:6px; --e2:10px; --e3:16px; --e4:26px; --e5:40px; --e6:64px; --e7:96px; --e8:136px;
  --max:1240px;
  --r:6px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.6;font-weight:400;
  color:var(--texte);background:var(--fond);
  -webkit-font-smoothing:antialiased;
}

/* surfaces dessinees par le navigateur */
::selection{background:var(--bleu);color:#fff}
::-moz-selection{background:var(--bleu);color:#fff}
html{scrollbar-color:var(--trait-fort) var(--fond);scrollbar-width:thin;caret-color:var(--bleu)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--fond)}
::-webkit-scrollbar-thumb{background:var(--trait-fort);border:3px solid var(--fond);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#A9AEB4}
:focus-visible{outline:2px solid var(--bleu);outline-offset:2px;border-radius:2px}
a{color:var(--bleu);text-underline-offset:.2em;text-decoration-thickness:1px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--e4)}
section{padding:var(--e7) 0}
@media(max-width:860px){:root{--e8:84px;--e7:56px;--e6:40px}}

/* --- typographie --- */
h1,h2,h3{color:var(--encre);letter-spacing:-0.035em;line-height:1.06;font-weight:800}
h1{font-size:clamp(2.5rem,5.6vw,4.4rem)}
h2{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.1}
h3{font-size:1.12rem;font-weight:600;letter-spacing:-0.02em;line-height:1.35}
.balise{
  font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--bleu);display:block;
}
.lead{font-size:clamp(1rem,1.4vw,1.16rem);line-height:1.6;color:var(--texte);max-width:46ch}
.prose{max-width:68ch}

/* --- entete --- */
.barre{background:var(--bleu);text-align:center;padding:9px 20px}
.barre span{font-size:12.5px;font-weight:600;letter-spacing:.04em;color:#fff}
.barre a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}

.nav{background:var(--noir)}
.nav-in{display:flex;align-items:center;justify-content:space-between;
  max-width:var(--max);margin:0 auto;padding:var(--e4)}
.logo{display:inline-flex;align-items:center;color:#fff;text-decoration:none}
.logo svg{height:24px;width:auto;display:block}
.logo:hover{color:var(--bleu-vif)}
.logo-pied svg{height:21px}
.nav-tel{color:#fff;text-decoration:none;font-size:14.5px;font-weight:600;letter-spacing:-0.01em}
.nav-tel:hover{color:var(--bleu-vif)}

/* --- boutons --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--bleu);color:#fff;text-decoration:none;
  font-weight:700;font-size:14.5px;letter-spacing:-0.005em;
  padding:15px 26px;border-radius:var(--r);border:1.5px solid var(--bleu);line-height:1.15;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
  cursor:pointer;text-align:center;
}
.btn:hover{background:var(--bleu-fonce);border-color:var(--bleu-fonce);color:#fff}
.btn-ligne{background:var(--blanc);color:var(--encre);border-color:var(--trait-fort)}
.btn-ligne:hover{background:var(--blanc);border-color:var(--encre);color:var(--encre)}
.btn-fantome{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.btn-fantome:hover{background:transparent;border-color:#fff;color:#fff}
.btn svg{width:15px;height:15px;flex-shrink:0}

/* --- hero noir avec arc --- */
.hero{background:var(--noir);color:#fff;position:relative;overflow:hidden;
  padding:var(--e7) 0 var(--e8)}
.hero .wrap{position:relative;z-index:2}
.hero h1{color:#fff;max-width:15ch;margin:var(--e4) 0 var(--e4)}
.hero .lead{color:var(--sur-noir);max-width:52ch}
.arc{
  position:absolute;z-index:1;pointer-events:none;
  right:-8%;top:50%;width:min(600px,56vw);aspect-ratio:1;
  transform:translateY(-50%);
  border-radius:50%;border:clamp(44px,6.5vw,82px) solid var(--bleu-marque);
}
.arc::after{
  content:"";position:absolute;inset:calc(-1 * clamp(44px,6.5vw,82px));
  background:var(--noir);transform-origin:left center;
  animation:decouvrir 1.4s var(--ease) .3s both;
}
@keyframes decouvrir{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(max-width:860px){.arc{right:-34%;top:auto;bottom:-30%;transform:none;width:74vw}}

.fil{display:flex;gap:9px;align-items:center;font-size:13.5px;flex-wrap:wrap}
.fil a{color:var(--sur-noir-doux);text-decoration:none}
.fil a:hover{color:#fff}
.fil .sep{color:var(--bleu)}
.fil .ici{color:#fff;font-weight:600}

/* --- selecteur --- */
.parcours{margin-top:calc(-1 * var(--e6));position:relative;z-index:3;padding-bottom:var(--e7)}
.consigne{display:flex;align-items:baseline;gap:var(--e3);flex-wrap:wrap;padding-bottom:var(--e3)}
.consigne .titre{font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--encre)}
.consigne .aide{font-size:13.5px;color:var(--texte-doux)}

.parcours-in{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r);overflow:hidden;
  box-shadow:0 2px 3px rgba(16,20,24,.06);
}
@media(max-width:900px){.parcours-in{grid-template-columns:1fr}}

.voie{
  appearance:none;background:var(--blanc);border:0;border-right:1px solid var(--trait);
  padding:var(--e4) var(--e4) var(--e5);text-align:left;cursor:pointer;width:100%;
  font-family:inherit;color:var(--texte);position:relative;display:block;
  transition:background .3s var(--ease);
}
.voie:last-child{border-right:0}
@media(max-width:900px){
  .voie{border-right:0;border-bottom:1px solid var(--trait)}
  .voie:last-child{border-bottom:0}
}
.voie:hover{background:#FAFBFC}
.voie .temoin{
  width:18px;height:18px;border-radius:50%;border:2px solid var(--trait-fort);
  display:block;margin-bottom:var(--e3);position:relative;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.voie .temoin::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--bleu);
  transform:scale(0);transition:transform .3s var(--ease);
}
.voie:hover .temoin{border-color:var(--encre)}
.voie .q{font-size:1.18rem;font-weight:700;letter-spacing:-0.028em;line-height:1.3;
  color:var(--encre);display:block;margin-bottom:var(--e2)}
.voie .r{font-size:14.5px;line-height:1.5;color:var(--texte-doux);display:block}
.voie .fleche,.voie .etat{
  align-items:center;gap:7px;margin-top:var(--e3);
  font-size:14px;font-weight:700;color:var(--bleu);
  transition:transform .3s var(--ease);
}
.voie .fleche{display:inline-flex}
.voie .etat{display:none}
.voie:hover .fleche{transform:translateX(4px)}
.voie[aria-selected="true"]{background:var(--encre)}
.voie[aria-selected="true"]::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--bleu)}
.voie[aria-selected="true"] .q{color:#fff}
.voie[aria-selected="true"] .r{color:var(--sur-noir-doux)}
.voie[aria-selected="true"] .temoin{border-color:var(--bleu);box-shadow:0 0 0 4px rgba(1,102,182,.24)}
.voie[aria-selected="true"] .temoin::after{transform:scale(1)}
.voie[aria-selected="true"] .fleche{display:none}
.voie[aria-selected="true"] .etat{display:inline-flex;color:var(--bleu-vif)}
.voie:focus-visible{outline:2px solid var(--bleu);outline-offset:-4px}

/* --- panneaux --- */
.panneau[hidden]{display:none}
.tete{max-width:56ch;margin-bottom:var(--e6)}
.tete .balise{margin-bottom:var(--e3)}
.tete h2{margin-bottom:var(--e3)}

/* --- cartes d offre --- */
.offres{display:grid;gap:var(--e4);align-items:stretch}
.o3{grid-template-columns:repeat(3,1fr)}
.o1{grid-template-columns:1fr;max-width:600px}
@media(max-width:1040px){.o3{grid-template-columns:1fr;max-width:540px;margin-left:auto;margin-right:auto}}

.offre{
  background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r);
  padding:var(--e5) var(--e4) var(--e4);display:flex;flex-direction:column;
  box-shadow:0 2px 3px rgba(16,20,24,.06);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.offre:hover{border-color:var(--trait-fort);box-shadow:0 6px 14px -8px rgba(16,20,24,.26)}
.offre.phare{background:var(--encre);border-color:var(--encre);
  box-shadow:0 8px 18px -9px rgba(16,20,24,.44)}
.offre.phare:hover{box-shadow:0 10px 22px -9px rgba(16,20,24,.5)}

.offre .marque{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e3)}
.offre h3{font-size:1.34rem;font-weight:800;letter-spacing:-0.032em;line-height:1.25}
.offre.phare h3{color:#fff}
.offre .sceau{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--bleu);white-space:nowrap;padding-top:6px}
.offre.phare .sceau{color:var(--bleu-vif)}
.offre .qui{font-size:14.5px;line-height:1.5;color:var(--texte-doux);margin-top:var(--e2);min-height:3.1em}
.offre.phare .qui{color:var(--sur-noir-doux)}
.offre .montant{font-size:2.85rem;font-weight:800;letter-spacing:-0.045em;line-height:1.1;
  color:var(--encre);margin:var(--e4) 0 var(--e1)}
.offre.phare .montant{color:#fff}
.offre .unite{font-size:.92rem;font-weight:600;color:var(--texte-doux);letter-spacing:-0.01em}
.offre.phare .unite{color:var(--sur-noir-doux)}
.offre .engagement{font-size:13px;color:var(--texte-doux);margin-bottom:var(--e4);line-height:1.5}
.offre.phare .engagement{color:var(--sur-noir-doux)}
.offre .btn{width:100%}
.offre.phare .btn{background:var(--bleu);border-color:var(--bleu);color:#fff}
.offre.phare .btn:hover{background:var(--blanc);border-color:var(--blanc);color:var(--encre)}

.detail{list-style:none;margin-top:var(--e4);padding-top:var(--e4);
  border-top:1px solid var(--trait);flex-grow:1}
.offre.phare .detail{border-top-color:var(--trait-noir)}
.detail li{padding:var(--e3) 0;border-bottom:1px solid var(--trait)}
.offre.phare .detail li{border-bottom-color:var(--trait-noir)}
.detail li:last-child{border-bottom:0}
.detail .quoi{font-size:15px;font-weight:700;color:var(--encre);line-height:1.35;
  letter-spacing:-0.015em;display:block}
.offre.phare .detail .quoi{color:#fff}
.detail .pourquoi{font-size:13.5px;line-height:1.55;color:var(--texte-doux);margin-top:5px;display:block}
.offre.phare .detail .pourquoi{color:var(--sur-noir-doux)}
.detail .socle{font-size:12.5px;font-weight:700;letter-spacing:.05em;color:var(--bleu);
  padding-bottom:var(--e3);display:block;line-height:1.45}
.offre.phare .detail .socle{color:var(--bleu-vif)}

/* --- bande --- */
.bande{background:var(--nuit);color:#fff;padding:var(--e6) 0}
.bande-in{display:flex;align-items:center;justify-content:space-between;gap:var(--e5);flex-wrap:wrap}
.bande p{font-size:clamp(1.5rem,2.8vw,2.2rem);font-weight:800;letter-spacing:-0.035em;
  line-height:1.2;color:#fff;max-width:20ch}

/* --- sequence --- */
.sequence{margin-top:var(--e6)}
.jalons{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e4)}
@media(max-width:860px){.jalons{grid-template-columns:1fr;gap:var(--e5)}}
.jalon{position:relative;padding-top:var(--e4);border-top:2px solid var(--trait)}
.jalon::after{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;
  border-radius:50%;background:var(--bleu)}
.jalon.ouvert::after{background:var(--fond);border:2px solid var(--trait-fort)}
.jalon .rang{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--bleu);display:block;margin-bottom:var(--e2)}
.jalon h3{font-size:1.08rem;font-weight:700;margin-bottom:var(--e2);line-height:1.35}
.jalon p{font-size:14.5px;line-height:1.6;color:var(--texte-doux)}

/* --- encadre --- */
.encadre{margin-top:var(--e5);background:var(--blanc);border:1px solid var(--trait);
  border-radius:var(--r);padding:var(--e4) var(--e5);max-width:80ch;
  font-size:15px;line-height:1.65;box-shadow:0 2px 3px rgba(16,20,24,.06)}
.encadre b{color:var(--encre);font-weight:700}

/* --- tableau --- */
.grille-zone{margin-top:var(--e6);overflow-x:auto;background:var(--blanc);padding:var(--e2) 0 0;
  border:1px solid var(--trait);border-radius:var(--r);box-shadow:0 2px 3px rgba(16,20,24,.06)}
table{width:100%;border-collapse:collapse;min-width:780px}
caption{text-align:left;padding:var(--e4) var(--e4) var(--e2);font-size:13px;color:var(--texte-doux)}
th,td{padding:14px var(--e4);border-bottom:1px solid var(--trait);font-size:14.5px;text-align:center}
thead th{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--texte-doux);border-bottom:2px solid var(--encre);vertical-align:bottom;padding-bottom:12px}
thead th b{display:block;font-size:1.34rem;font-weight:800;color:var(--encre);
  letter-spacing:-0.035em;text-transform:none;margin-top:5px;line-height:1.35}
thead th.phare,thead th.phare b{color:var(--bleu)}
thead th:first-child,tbody th{text-align:left}
tbody th{font-weight:400;color:var(--encre);width:36%}
tbody td{color:var(--encre);font-weight:700;font-variant-numeric:tabular-nums}
tr.famille th{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--bleu);padding-top:var(--e4);border-bottom-color:var(--trait-fort);background:var(--bleu-pale)}
tr.famille td{border-bottom-color:var(--trait-fort);background:var(--bleu-pale)}
.vide{color:var(--trait-fort);font-weight:400}
.plein{color:var(--bleu)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}

/* --- questions --- */
.questions{margin-top:var(--e5);background:var(--blanc);border:1px solid var(--trait);
  border-radius:var(--r);box-shadow:0 2px 3px rgba(16,20,24,.06);overflow:hidden}
details{border-bottom:1px solid var(--trait)}
details:last-of-type{border-bottom:0}
summary{cursor:pointer;list-style:none;padding:var(--e4);
  font-size:1.05rem;font-weight:700;color:var(--encre);letter-spacing:-0.02em;line-height:1.4;
  display:flex;justify-content:space-between;gap:var(--e4);align-items:baseline;
  transition:background .2s var(--ease)}
summary:hover{background:#FAFBFC}
summary::-webkit-details-marker{display:none}
.croix{color:var(--bleu);font-size:1.3rem;font-weight:400;flex-shrink:0;line-height:1;
  transition:transform .3s var(--ease)}
details[open] .croix{transform:rotate(45deg)}
details p{padding:0 var(--e4) var(--e4);max-width:72ch;font-size:15px;line-height:1.7}


/* --- formulaire de demande --- */
.demande{background:var(--fond);padding:var(--e7) 0 var(--e8)}
.demande-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--e6);align-items:start}
@media(max-width:900px){.demande-in{grid-template-columns:1fr;gap:var(--e5)}}
.demande .accroche h2{margin-bottom:var(--e3)}
.demande .accroche .lead{margin-bottom:var(--e4)}
.rassure{list-style:none;border-top:1px solid var(--trait);padding-top:var(--e3)}
.rassure li{font-size:14.5px;line-height:1.5;color:var(--texte-doux);padding:var(--e2) 0 var(--e2) 22px;
  position:relative}
.rassure li::before{content:"";position:absolute;left:0;top:16px;width:11px;height:2px;background:var(--bleu)}

.formulaire{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r);
  padding:var(--e5) var(--e5) var(--e4);box-shadow:0 2px 3px rgba(16,20,24,.06)}
@media(max-width:600px){.formulaire{padding:var(--e4) var(--e4) var(--e3)}}
.paire{display:grid;grid-template-columns:1fr 1fr;gap:var(--e3)}
@media(max-width:600px){.paire{grid-template-columns:1fr}}
.champ{margin-bottom:var(--e3)}
.champ label{display:block;font-size:13px;font-weight:700;color:var(--encre);
  letter-spacing:-0.005em;margin-bottom:7px}
.champ .facultatif{font-weight:400;color:var(--texte-doux)}
.champ input,.champ select,.champ textarea{
  width:100%;font-family:inherit;font-size:15px;color:var(--encre);background:var(--blanc);
  border:1.5px solid var(--trait);border-radius:var(--r);padding:13px 14px;line-height:1.4;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.champ textarea{resize:vertical;min-height:104px}
.champ select{
  appearance:none;cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%230166B6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px;
}
.champ input:hover,.champ select:hover,.champ textarea:hover{border-color:var(--trait-fort)}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:0;border-color:var(--bleu);box-shadow:0 0 0 3px rgba(1,102,182,.16);
}
.champ input::placeholder,.champ textarea::placeholder{color:rgba(16,20,24,.4)}
.champ .indice{font-size:12.5px;color:var(--texte-doux);margin-top:6px;line-height:1.45}
/* selection reprise de la navigation */
.selection{min-height:48px;display:flex;align-items:center}
.sel-vide{font-size:13.5px;line-height:1.5;color:var(--texte-doux);
  background:var(--fond);border:1px dashed var(--trait-fort);border-radius:var(--r);
  padding:12px 14px;width:100%}
.sel-vide b{color:var(--encre);font-weight:700}
.jeton{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--bleu-pale);border:1.5px solid var(--bleu);border-radius:var(--r);
  padding:11px 11px 11px 15px;font-size:14.5px;font-weight:700;color:var(--bleu);
  letter-spacing:-0.01em;max-width:100%;
}
.jeton[hidden]{display:none}
.sel-retirer{
  appearance:none;background:transparent;border:0;cursor:pointer;padding:4px;
  color:var(--bleu);display:inline-flex;border-radius:3px;flex-shrink:0;
  transition:background .2s var(--ease);
}
.sel-retirer svg{width:13px;height:13px}
.sel-retirer:hover{background:rgba(1,102,182,.14)}
.sel-retirer:focus-visible{outline:2px solid var(--bleu);outline-offset:1px}

.formulaire .btn{width:100%;margin-top:var(--e2);padding:16px 26px;font-size:15px}
.mention{font-size:12.5px;color:var(--texte-doux);text-align:center;margin-top:var(--e3);line-height:1.5}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.reponse{display:none;text-align:center;padding:var(--e5) var(--e3)}
.reponse.vu{display:block}
.reponse .pastille{width:44px;height:44px;border-radius:50%;background:var(--bleu);
  display:flex;align-items:center;justify-content:center;margin:0 auto var(--e3)}
.reponse .pastille svg{width:22px;height:22px;color:#fff}
.reponse h3{font-size:1.34rem;font-weight:800;letter-spacing:-0.03em;margin-bottom:var(--e2)}
.reponse p{font-size:15px;line-height:1.6;color:var(--texte-doux);max-width:42ch;margin:0 auto}
.formulaire.envoye .corps{display:none}
.erreur{display:none;background:#FDECEA;border:1px solid #F3C4BF;border-radius:var(--r);
  padding:13px 15px;font-size:14px;color:#8B1F14;margin-bottom:var(--e3);line-height:1.5}
.erreur.vu{display:block}

/* --- fin --- */
.fin{background:var(--nuit);text-align:center;padding:var(--e8) 0}
.fin .balise{color:var(--bleu-vif);margin-bottom:var(--e3)}
.fin h2{color:#fff;max-width:17ch;margin:0 auto var(--e3)}
.fin .lead{color:var(--sur-noir);margin:0 auto var(--e5);max-width:44ch}
.gestes{display:flex;gap:var(--e3);justify-content:center;flex-wrap:wrap}

/* ==========================================================================
   Espace directeur de compte
   ========================================================================== */
.interne{background:var(--nuit);color:#fff;padding:var(--e6) 0 var(--e7)}
.interne .balise{color:var(--bleu-vif);margin-bottom:var(--e3)}
.interne h2{color:#fff;margin-bottom:var(--e3)}
.interne .lead{color:var(--sur-noir)}
.interne .amorce{display:flex;align-items:center;justify-content:space-between;gap:var(--e4);flex-wrap:wrap}

.verrou{background:var(--blanc);border-radius:var(--r);padding:var(--e5);max-width:430px;
  margin-top:var(--e5)}
.verrou p{font-size:14.5px;color:var(--texte-doux);margin-bottom:var(--e3);line-height:1.55}
.verrou p b{color:var(--encre);font-weight:700}
.verrou .btn{white-space:nowrap}
.verrou .refus{display:none;font-size:13.5px;color:#8B1F14;margin-top:var(--e3);line-height:1.5}
.verrou .refus.vu{display:block}

.identite{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
  flex-wrap:wrap;margin-top:var(--e5);padding:12px 16px;border-radius:var(--r);
  background:rgba(255,255,255,.08);border:1px solid var(--trait-noir)}
.identite[hidden]{display:none}
.identite .qui{font-size:13.5px;color:var(--sur-noir);font-weight:600}
.identite .qui::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#3FBF6A;margin-right:9px;vertical-align:middle}
.deconnexion{appearance:none;background:transparent;border:1px solid var(--trait-noir);
  color:var(--sur-noir);border-radius:var(--r);padding:7px 14px;font-family:inherit;
  font-size:13px;font-weight:600;cursor:pointer;transition:border-color .2s var(--ease),color .2s var(--ease)}
.deconnexion:hover{border-color:#fff;color:#fff}
.deconnexion:focus-visible{outline:2px solid var(--bleu-vif);outline-offset:2px}

.atelier{display:none;background:var(--blanc);border-radius:var(--r);padding:var(--e5);
  margin-top:var(--e3)}
.atelier.ouvert{display:block}
@media(max-width:600px){.verrou,.atelier{padding:var(--e4)}}
.atelier-in{display:grid;grid-template-columns:1fr 1fr;gap:var(--e5)}
@media(max-width:900px){.atelier-in{grid-template-columns:1fr;gap:var(--e4)}}
.atelier h3{font-size:1.12rem;font-weight:800;letter-spacing:-0.03em;margin-bottom:var(--e3);
  padding-bottom:var(--e2);border-bottom:1px solid var(--trait)}

.cases{border:1.5px solid var(--trait);border-radius:var(--r);max-height:238px;overflow-y:auto}
.cases .groupe{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--bleu);background:var(--bleu-pale);padding:9px 14px;position:sticky;top:0}
.cases label{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;cursor:pointer;
  font-size:14.5px;line-height:1.4;color:var(--encre);border-bottom:1px solid var(--trait)}
.cases label:last-child{border-bottom:0}
.cases label:hover{background:#FAFBFC}
.cases input{width:17px;height:17px;accent-color:var(--bleu);margin-top:2px;flex-shrink:0}

.sortie{margin-top:var(--e5);border-top:1px solid var(--trait);padding-top:var(--e5);display:none}
.sortie.vu{display:block}
.sortie .objet{background:var(--fond);border:1px solid var(--trait);border-radius:var(--r);
  padding:13px 15px;font-size:15px;font-weight:700;color:var(--encre);margin-bottom:var(--e3)}
.sortie .corps{background:var(--fond);border:1px solid var(--trait);border-radius:var(--r);
  padding:var(--e4);font-size:14.5px;line-height:1.65;color:var(--encre);
  white-space:pre-wrap;max-height:440px;overflow-y:auto}
.sortie .gestes-mail{display:flex;gap:var(--e2);flex-wrap:wrap;margin-top:var(--e3)}
.sortie .gestes-mail .btn{flex:1;min-width:150px}
.note-mail{font-size:12.5px;color:var(--texte-doux);margin-top:var(--e3);line-height:1.5}
.note-mail b{color:var(--encre)}

footer{background:var(--noir);padding:var(--e5) 0}
.pied{display:flex;justify-content:space-between;gap:var(--e3);flex-wrap:wrap;align-items:center}
.pied .villes{color:var(--sur-noir-doux);font-size:13.5px}

@media(prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  html{scroll-behavior:auto}
  .arc::after{display:none}
}