/* =============================================================================
   Charte visuelle : sobre et institutionnelle.
   Fond blanc, bleu et rouge, typographie systeme, contrastes eleves.
   ============================================================================= */
:root{
  --bleu:#000091;           /* bleu principal */
  --bleu-clair:#1212ff;
  --bleu-pale:#f5f5fe;
  --rouge:#e1000f;          /* rouge d accent */
  --rouge-pale:#fff4f4;
  --texte:#161616;
  --gris:#666;
  --gris-clair:#e5e5e5;
  --gris-fond:#f6f6f6;
  --blanc:#fff;
  --rayon:4px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--blanc);color:var(--texte);line-height:1.6;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased
}
.conteneur{width:min(1080px,92%);margin-inline:auto}

/* --- bandeau tricolore, en-tete et navigation ------------------------------ */
.tricolore{display:flex;height:4px}
.tricolore i{flex:1}
.tricolore i:nth-child(1){background:var(--bleu)}
.tricolore i:nth-child(2){background:var(--blanc)}
.tricolore i:nth-child(3){background:var(--rouge)}

header{border-bottom:1px solid var(--gris-clair);background:var(--blanc);
  position:sticky;top:0;z-index:20}
.entete{display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:14px 0;flex-wrap:wrap}

.marque{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--texte)}
.marque:hover{color:var(--texte)}
.marque .bloc-tricolore{display:flex;width:32px;height:22px;border:1px solid var(--gris-clair);flex:none}
.marque .bloc-tricolore i{flex:1}
.marque .bloc-tricolore i:nth-child(1){background:var(--bleu)}
.marque .bloc-tricolore i:nth-child(3){background:var(--rouge)}
.marque b{display:block;font-size:1.12rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.marque small{display:block;font-size:.76rem;color:var(--gris);letter-spacing:.01em}

.navigation{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.navigation a{position:relative;padding:8px 10px;border-radius:var(--rayon);
  font-size:.92rem;font-weight:500;color:var(--texte);text-decoration:none;transition:background .15s;
  white-space:nowrap}
.navigation a:hover{background:var(--bleu-pale);color:var(--bleu)}
.navigation a[aria-current]{color:var(--bleu);font-weight:600}
.navigation a[aria-current]::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;
  height:2px;background:var(--bleu)}
.navigation .bouton{margin-left:8px;padding:9px 15px;font-size:.9rem}
.navigation .bouton:hover{background:#00006b}

@media(max-width:780px){
  .entete{padding:12px 0}
  .marque small{display:none}
  .navigation{width:100%;gap:2px;border-top:1px solid var(--gris-clair);padding-top:8px}
  .navigation a{padding:8px 10px;font-size:.88rem}
  .navigation .bouton{margin-left:auto}
}

/* --- titres et texte ------------------------------------------------------ */
h1{font-size:clamp(1.55rem,3.2vw,2.15rem);line-height:1.2;margin-bottom:12px;letter-spacing:-.02em}
h2{font-size:1.28rem;margin:34px 0 14px;padding-bottom:8px;border-bottom:2px solid var(--bleu);
  display:inline-block}
h3{font-size:1.02rem;margin-bottom:6px}
p{margin-bottom:10px}
.doux{color:var(--gris)}
.chapeau{font-size:1.08rem;color:#3a3a3a;max-width:680px}
a{color:var(--bleu);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--bleu-clair)}
main{padding-block:30px 64px}

/* --- boutons -------------------------------------------------------------- */
.bouton{display:inline-block;padding:11px 22px;border:1px solid var(--bleu);border-radius:var(--rayon);
  background:var(--bleu);color:var(--blanc)!important;font:inherit;font-weight:600;font-size:.95rem;
  text-decoration:none;cursor:pointer;transition:background .15s}
.bouton:hover{background:#00006b;color:var(--blanc)!important}
.bouton--secondaire{background:var(--blanc);color:var(--bleu)!important}
.bouton--secondaire:hover{background:var(--bleu-pale);color:var(--bleu)!important}
.bouton--rouge{background:var(--rouge);border-color:var(--rouge)}
.bouton--rouge:hover{background:#b8000c}
.bouton:disabled{opacity:.55;cursor:progress}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

/* --- mise en page --------------------------------------------------------- */
.bandeau{background:var(--bleu-pale);border-block:1px solid var(--gris-clair);padding:44px 0;margin-bottom:6px}
.grille{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin:22px 0}
.bloc{background:var(--blanc);border:1px solid var(--gris-clair);border-radius:var(--rayon);padding:20px}
.bloc--bleu{border-top:3px solid var(--bleu)}
.bloc--rouge{border-top:3px solid var(--rouge)}
.etapes{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.etape{background:var(--gris-fond);border-left:3px solid var(--bleu);padding:16px 18px;border-radius:var(--rayon)}
.etape b{display:block;color:var(--bleu);font-size:.74rem;letter-spacing:.09em;margin-bottom:6px}

/* --- formulaires ---------------------------------------------------------- */
label{display:block;margin:14px 0 5px;font-size:.92rem;font-weight:500}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--gris);border-radius:var(--rayon);
  background:var(--blanc);color:var(--texte);font:inherit;font-size:.95rem}
input:focus,textarea:focus{outline:2px solid var(--bleu);outline-offset:1px;border-color:var(--bleu)}
.duo{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.coche{display:flex;gap:10px;align-items:flex-start;margin-top:16px}
.coche input{width:auto;margin-top:5px}
.message{margin-top:18px;padding:14px 16px;border-radius:var(--rayon);display:none;border-left:4px solid}
.message--ok{background:var(--bleu-pale);border-color:var(--bleu)}
.message--ko{background:var(--rouge-pale);border-color:var(--rouge)}

/* --- chiffres et tableaux ------------------------------------------------- */
.chiffres{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));margin:20px 0}
.chiffre{background:var(--blanc);border:1px solid var(--gris-clair);border-top:3px solid var(--bleu);
  border-radius:var(--rayon);padding:16px;text-align:center}
.chiffre b{display:block;font-size:1.75rem;color:var(--bleu);letter-spacing:-.02em}
.chiffre span{color:var(--gris);font-size:.8rem}
table{width:100%;border-collapse:collapse;font-size:.9rem;margin-top:12px;background:var(--blanc)}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--gris-clair)}
th{background:var(--gris-fond);color:var(--texte);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
tr:hover td{background:var(--bleu-pale)}

/* --- alertes -------------------------------------------------------------- */
.alerte{background:var(--blanc);border:1px solid var(--gris-clair);border-left:4px solid var(--bleu);
  border-radius:var(--rayon);padding:14px 18px;margin-bottom:10px}
.alerte p{color:var(--gris);font-size:.92rem;margin:4px 0}
.alerte small{color:var(--gris);font-size:.78rem}

/* --- divers --------------------------------------------------------------- */
.mandat{white-space:pre-wrap;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;
  color:#333;background:var(--gris-fond);border:1px solid var(--gris-clair);
  border-radius:var(--rayon);padding:18px;overflow:auto;max-height:340px}
.avertissement{background:var(--gris-fond);border-left:4px solid var(--rouge);padding:16px 18px;
  border-radius:var(--rayon);color:#3a3a3a;font-size:.9rem;margin-top:22px}
.prix{border:1px solid var(--gris-clair);border-top:4px solid var(--rouge);border-radius:var(--rayon);
  padding:30px;text-align:center;margin-top:20px}
.prix .montant{font-size:2.6rem;font-weight:700;color:var(--bleu);letter-spacing:-.03em}
.prix .montant small{font-size:.95rem;color:var(--gris);font-weight:400;letter-spacing:0}
.inclus{list-style:none;max-width:580px;margin:20px auto 0;text-align:left}
.inclus li{padding:9px 0 9px 26px;position:relative;color:#3a3a3a;border-bottom:1px solid var(--gris-clair);
  font-size:.94rem}
.inclus li::before{content:"";position:absolute;left:2px;top:17px;width:10px;height:10px;
  background:var(--bleu)}
.etiquette{display:inline-block;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--bleu);border:1px solid var(--bleu);border-radius:100px;padding:3px 11px;margin-bottom:14px}
footer{border-top:1px solid var(--gris-clair);background:var(--gris-fond);padding:26px 0;
  color:var(--gris);font-size:.86rem}
@media(max-width:620px){ .duo{grid-template-columns:1fr} }

/* --- section commerciale --------------------------------------------------- */
.offre{display:grid;gap:26px;grid-template-columns:minmax(330px,395px) 1fr;align-items:start;margin-top:8px}
.offre__carte{border:1px solid var(--gris-clair);border-radius:var(--rayon);overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.06);position:sticky;top:96px}
.offre__bandeau{background:linear-gradient(100deg,var(--bleu),#1d1d9e);color:var(--blanc);padding:11px 18px;font-size:.74rem;
  letter-spacing:.05em;text-transform:uppercase;font-weight:600;display:flex;
  align-items:center;justify-content:space-between;gap:12px;white-space:nowrap}
.offre__bandeau span{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.55);
  border-radius:100px;padding:3px 12px;font-size:.63rem;letter-spacing:.03em;white-space:nowrap;
  backdrop-filter:blur(2px)}
.offre__corps{padding:24px 22px}
.offre__prix{display:flex;align-items:baseline;gap:8px}
.offre__prix b{font-size:3rem;font-weight:700;color:var(--bleu);letter-spacing:-.03em;line-height:1}
.offre__prix small{color:var(--gris);font-size:.95rem}
.offre__ancrage{margin:14px 0 18px;padding:12px 14px;background:var(--bleu-pale);
  border-left:3px solid var(--bleu);font-size:.9rem;color:#2a2a2a}
.offre__ancrage b{color:var(--bleu)}
.offre__garanties{list-style:none;margin:16px 0 0;font-size:.88rem;color:var(--gris)}
.offre__garanties li{padding:6px 0 6px 24px;position:relative}
.offre__garanties li::before{content:"";position:absolute;left:3px;top:8px;width:6px;height:11px;
  border:2px solid var(--bleu);border-left:0;border-top:0;transform:rotate(45deg)}
.offre__detail{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.lot{border-left:3px solid var(--gris-clair);padding:2px 0 2px 16px}
.lot h4{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bleu);margin-bottom:8px}
.lot ul{list-style:none}
.lot li{position:relative;padding:4px 0 4px 18px;font-size:.93rem;color:#333}
.lot li::before{content:"";position:absolute;left:0;top:13px;width:7px;height:7px;background:var(--bleu)}
@media(max-width:860px){ .offre{grid-template-columns:1fr} .offre__carte{position:static} }


/* --- finitions et animations ---------------------------------------------- */
html{scroll-behavior:smooth}
::selection{background:var(--bleu);color:var(--blanc)}
:focus-visible{outline:3px solid var(--bleu);outline-offset:2px;border-radius:2px}

/* apparition au defilement */
.anim{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1)}
.anim.vu{opacity:1;transform:none}

/* bandeau d accueil : trame discrete et halo */
.bandeau{position:relative;overflow:hidden}
.bandeau::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 120% at 88% 10%, rgba(0,0,145,.09), transparent 62%),
    repeating-linear-gradient(135deg, rgba(0,0,145,.035) 0 1px, transparent 1px 13px)}
.bandeau .conteneur{position:relative}

/* titres : soulignement qui se deploie */
h2{position:relative;border-bottom:0;padding-bottom:10px}
h2::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--bleu);
  transition:width .7s cubic-bezier(.22,.61,.36,1)}
h2.vu::after,h2:hover::after{width:100%}

/* cartes : elevation au survol */
.bloc,.chiffre,.offre__carte{transition:transform .25s cubic-bezier(.22,.61,.36,1),
  box-shadow .25s,border-color .25s}
.bloc:hover,.chiffre:hover{transform:translateY(-3px);border-color:#c9c9de;
  box-shadow:0 10px 24px -14px rgba(0,0,145,.45)}
.offre__carte:hover{box-shadow:0 16px 36px -20px rgba(0,0,145,.5)}

/* etapes : numero en pastille et glissement */
.etape{position:relative;transition:transform .25s,background .25s,border-color .25s}
.etape:hover{transform:translateX(3px);background:var(--bleu-pale);border-color:var(--bleu)}

/* lots de l offre : la barre laterale se colore */
.lot{transition:border-color .25s}
.lot:hover{border-color:var(--bleu)}
.lot li{transition:padding-left .2s}
.lot li:hover{padding-left:22px}

/* boutons : relief et enfoncement */
.bouton{position:relative;overflow:hidden;
  transition:background .18s,transform .18s,box-shadow .18s}
.bouton:hover{transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(0,0,145,.65)}
.bouton:active{transform:translateY(0);box-shadow:none}
.bouton--secondaire:hover{box-shadow:0 8px 18px -10px rgba(0,0,145,.4)}

/* liens : soulignement anime */
main a:not(.bouton):not(.marque){text-decoration:none;background-image:linear-gradient(var(--bleu),var(--bleu));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .28s;padding-bottom:1px}
main a:not(.bouton):not(.marque):hover{background-size:100% 1px}

/* navigation : glissement du fond */
.navigation a{transition:background .18s,color .18s}
.navigation a[aria-current]::after{transition:transform .3s}

/* chiffres : le nombre grossit legerement */
.chiffre b{transition:transform .25s}
.chiffre:hover b{transform:scale(1.06)}

/* tableaux : ligne surlignee a gauche */
tbody tr,table tr{transition:background .18s}
table tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--bleu)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .anim{opacity:1;transform:none;transition:none}
  h2::after{width:100%;transition:none}
  .bloc:hover,.chiffre:hover,.etape:hover,.bouton:hover{transform:none}
}

.mentions{margin-top:18px;padding-top:14px;border-top:1px solid var(--gris-clair);
  font-size:.76rem;line-height:1.5;color:var(--gris)}
.mentions b{color:#3a3a3a}
.offre__bandeau sup{font-size:.7em;vertical-align:super}
.mentions-lien{margin-top:16px;padding-top:12px;border-top:1px solid var(--gris-clair);
  font-size:.78rem;color:var(--gris)}
.mentions-lien a{color:var(--gris)}
.cgv h2{font-size:1.06rem;margin:26px 0 8px}
.cgv p,.cgv li{font-size:.92rem;color:#333}
.cgv ul{margin:0 0 10px 20px}
.cgv .sommaire{background:var(--gris-fond);border-left:3px solid var(--bleu);padding:14px 18px;
  border-radius:var(--rayon);margin-bottom:22px;font-size:.9rem}

/* ═══════════════════════════════════════════════════════════════════════════
   Ajouts du 20/09/2026 : navigation reellement utilisable et leviers de
   conversion. L'en-tete est collant : sans scroll-margin-top, un clic dans le
   menu amenait le titre de section SOUS l'en-tete, et deux liens voisins
   donnaient l'impression de mener au meme endroit.
   ═════════════════════════════════════════════════════════════════════════ */
h2[id], h3[id] { scroll-margin-top: 96px }

/* la section affichee est soulignee dans le menu */
.navigation a[aria-current] { color: var(--bleu); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--bleu) }

/* ligne de reassurance sous les boutons d'appel */
.rassurance { margin: 14px 0 0; font-size: .85rem; color: #4a5568 }
.bandeau .rassurance { color: #3a3f54 }   /* le bandeau est PALE : texte fonce obligatoire */

/* rappel des delais, sous les etapes */
.delais { margin-top: 20px; padding: 14px 16px; background: var(--bleu-pale);
  border-left: 3px solid var(--bleu); border-radius: var(--rayon);
  font-size: .92rem; color: #2a2a2a }

/* ancrage de prix : HORS du cadre de paiement, pour qu'aucun montant
   d'honoraires ne puisse etre pris pour une somme a payer */
.comparaison { max-width: 720px; margin: 6px 0 18px; padding: 12px 15px;
  background: var(--gris-fond); border-left: 3px solid var(--gris-clair);
  border-radius: var(--rayon); font-size: .93rem; color: #3a3a3a }

/* ce que couvre reellement le prix, a l'interieur du cadre */
.offre__unique { margin: 12px 0 16px; font-size: .88rem; color: #2a2a2a;
  background: var(--bleu-pale); border-radius: var(--rayon); padding: 10px 12px }

/* chiffres verifiables */
.chiffre { background: var(--blanc); border: 1px solid var(--gris-clair);
  border-radius: var(--rayon); padding: 14px 15px; text-align: left }
.chiffre b { display: block; font-size: 1.5rem; color: var(--bleu); line-height: 1.2 }
.chiffre span { display: block; margin-top: 4px; font-size: .82rem; color: #55606e }

/* questions frequentes */
.question { border: 1px solid var(--gris-clair); border-radius: var(--rayon);
  margin-bottom: 10px; background: var(--blanc) }
.question summary { cursor: pointer; padding: 13px 16px; font-weight: 600;
  color: var(--bleu-fonce, #1b1b35); list-style: none }
.question summary::-webkit-details-marker { display: none }
.question summary::before { content: '+'; display: inline-block; width: 18px;
  color: var(--bleu); font-weight: 700 }
.question[open] summary::before { content: '–' }
.question summary:hover { background: var(--gris-fond) }
.question p { margin: 0; padding: 0 16px 15px 34px; font-size: .93rem; color: #3a3a3a }

/* appel final */
.final { margin-top: 34px; padding: 34px 0; background: var(--bleu-pale);
  border-top: 1px solid var(--gris-clair); border-bottom: 1px solid var(--gris-clair);
  text-align: center }
.final .chapeau { color: #3a3a3a }

@media (max-width: 720px) {
  .navigation { flex-wrap: wrap; gap: 8px 12px }
  .navigation a { font-size: .9rem }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Espace client : montrer que le dossier AVANCE, et permettre de tout confier
   en un clic. Ajouts du 20/09/2026.
   ═════════════════════════════════════════════════════════════════════════ */

/* --- panneau "votre dossier est en cours de traitement" ------------------- */
.travail { border: 1px solid var(--gris-clair); border-left: 4px solid var(--bleu);
  border-radius: var(--rayon); padding: 16px 18px; margin: 18px 0 26px;
  background: linear-gradient(180deg, var(--bleu-pale), var(--blanc)) }
.travail__tete { display: flex; align-items: center; gap: 10px; font-size: 1.02rem }
.travail__legende { margin: 10px 0 0; font-size: .89rem; color: #44506a }

/* point qui bat : le dossier vit */
.pastille-vivante { width: 11px; height: 11px; border-radius: 50%; background: #18a558;
  position: relative; flex: none; box-shadow: 0 0 0 0 rgba(24,165,88,.55);
  animation: battement 2.2s ease-out infinite }
@keyframes battement {
  0%   { box-shadow: 0 0 0 0 rgba(24,165,88,.55) }
  70%  { box-shadow: 0 0 0 11px rgba(24,165,88,0) }
  100% { box-shadow: 0 0 0 0 rgba(24,165,88,0) }
}

/* barre d'avancement : elle se remplit a l'ouverture de la page */
.barre { height: 10px; border-radius: 999px; background: #e7e7f5; overflow: hidden; margin-top: 12px }
.barre i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--bleu), #4b4bd6);
  animation: remplir 1.1s cubic-bezier(.22,.61,.36,1) both;
  position: relative }
.barre i::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: balayage 2.4s linear infinite }
@keyframes remplir  { from { width: 0 } }
@keyframes balayage { from { transform: translateX(-100%) } to { transform: translateX(100%) } }

/* --- demarches en un clic ------------------------------------------------- */
.service { border: 1px solid var(--gris-clair); border-radius: var(--rayon);
  padding: 15px 16px; margin-bottom: 12px; background: var(--blanc);
  transition: border-color .2s, box-shadow .2s }
.service:hover { border-color: #c7c7e8; box-shadow: 0 2px 10px rgba(0,0,145,.06) }
.service--pris { background: #f4fbf6; border-color: #cdebd7 }
.service__tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: space-between }
.service__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px }
.service__actions .bouton { margin-top: 0 }

.badge { font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 3px 10px;
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap }
.badge--libre    { background: var(--bleu-pale); color: var(--bleu); border: 1px solid #d3d3f2 }
.badge--perso    { background: var(--gris-fond); color: #55606e; border: 1px solid var(--gris-clair) }
.badge--demande  { background: #fff4e5; color: #9a5b00; border: 1px solid #ffe0b2 }
.badge--en_cours { background: #e8f1ff; color: #14448f; border: 1px solid #cfe0ff }
.badge--fait     { background: #e8f6ec; color: #15662f; border: 1px solid #cdebd7 }
.badge--impossible { background: var(--gris-fond); color: #7a2f2f; border: 1px solid #f0c9c9 }

/* --- journal d'activite --------------------------------------------------- */
.journal { list-style: none; margin: 14px 0 0; padding: 0; border-left: 2px solid #e7e7f5 }
.journal li { position: relative; padding: 9px 0 9px 20px; display: flex; gap: 12px;
  align-items: baseline; flex-wrap: wrap;
  animation: apparait .45s ease both }
.journal li:nth-child(2) { animation-delay: .06s } .journal li:nth-child(3) { animation-delay: .12s }
.journal li:nth-child(4) { animation-delay: .18s } .journal li:nth-child(5) { animation-delay: .24s }
.journal__puce { position: absolute; left: -8px; top: 9px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--blanc); color: var(--bleu); font-size: .7rem;
  line-height: 14px; text-align: center; border: 2px solid #e7e7f5 }
.journal__texte { flex: 1 1 auto; font-size: .93rem; color: #2a2a2a }
.journal__date { font-size: .78rem; color: #8b93a7; white-space: nowrap }
@keyframes apparait { from { opacity: 0; transform: translateY(6px) } }

/* --- accessibilite : aucune animation si le visiteur n'en veut pas -------- */
@media (prefers-reduced-motion: reduce) {
  .pastille-vivante, .barre i, .barre i::after, .journal li { animation: none !important }
  .barre i::after { display: none }
}

/* barre indeterminee : le dossier est en preparation, rien n'est encore parti */
.barre--preparation i { width: 34%; background: linear-gradient(90deg, #9b9bdd, var(--bleu));
  animation: va-et-vient 1.8s ease-in-out infinite }
@keyframes va-et-vient { 0% { margin-left: 0 } 50% { margin-left: 66% } 100% { margin-left: 0 } }
@media (prefers-reduced-motion: reduce) { .barre--preparation i { animation: none; width: 100% } }

/* --- fiche d'informations (Mon compte) ------------------------------------ */
.fiche { width: 100%; border-collapse: collapse; margin: 10px 0 18px }
.fiche th { text-align: left; font-weight: 500; color: #55606e; width: 250px;
  padding: 9px 12px 9px 0; border-bottom: 1px solid var(--gris-clair); font-size: .9rem }
.fiche td { padding: 9px 0; border-bottom: 1px solid var(--gris-clair); font-size: .95rem }

/* --- zone sensible : resiliation, volontairement discrete et a part -------- */
.zone-sensible { margin-top: 34px; padding: 16px 18px; border: 1px dashed #d8d8e2;
  border-radius: var(--rayon); background: #fbfbfd }
.zone-sensible b { color: #55606e; font-size: .95rem }
.zone-sensible .bouton { margin-top: 0 }

/* "Me connecter" : en haut a droite, sur la ligne du logo, separe de la
   navigation de contenu. La navigation occupe alors toujours sa propre ligne. */
.connexion { margin-left: auto; font-size: .88rem; color: var(--bleu);
  text-decoration: none; border: 1px solid #d3d3f2; border-radius: 999px;
  padding: 6px 14px; background: var(--bleu-pale); white-space: nowrap;
  transition: background .15s, border-color .15s }
.connexion:hover { background: #e9e9fb; border-color: var(--bleu) }
.entete > .navigation { flex-basis: 100%; }
@media (max-width: 780px) {
  .connexion { order: 2; margin-left: auto; font-size: .82rem; padding: 5px 11px }
}

/* --- navigation de l'espace client ---------------------------------------- */
/* Mon compte est pousse a droite et prend l'apparence d'une pastille : c'est un
   espace personnel, pas une rubrique de contenu. */
.navigation .nav-compte { margin-left: auto; background: var(--bleu-pale); border: 1px solid #d3d3f2;
  border-radius: 999px; padding: 6px 15px !important; font-size: .88rem !important;
  color: var(--bleu) !important; transition: background .15s, border-color .15s }
.navigation .nav-compte:hover { background: #e9e9fb; border-color: var(--bleu) }
.navigation .nav-compte[aria-current] { background: var(--bleu); border-color: var(--bleu);
  color: #fff !important; font-weight: 600 }
.navigation .nav-compte[aria-current]::after { display: none }

.nav-site { font-size: .84rem !important; color: #66707f !important; padding: 6px 8px !important }
.nav-site:hover { color: var(--bleu) !important; background: transparent }

@media (max-width: 780px) {
  .navigation .nav-compte { margin-left: 0 }
}

/* Mon compte : une icone de personne, ronde, a droite de la navigation.
   Le libelle reste accessible (title + aria-label) pour les lecteurs d'ecran. */
.navigation .nav-compte { margin-left: auto; display: inline-flex; align-items: center;
  justify-content: center; width: 42px; height: 42px; padding: 0 !important;
  border-radius: 50%; background: var(--bleu-pale); border: 1px solid #d3d3f2;
  color: var(--bleu) !important; transition: background .15s, border-color .15s, transform .15s }
.navigation .nav-compte:hover { background: #e3e3fa; border-color: var(--bleu); transform: translateY(-1px) }
.navigation .nav-compte[aria-current] { background: var(--bleu); border-color: var(--bleu); color: #fff !important }
.navigation .nav-compte[aria-current]::after { display: none }
.navigation .nav-compte svg { display: block }

/* --- marque ES-PROTECT ---------------------------------------------------- */
.marque__embleme { display: block; width: 44px; height: 44px; flex: none }
.marque__nom { font-weight: 800; font-size: 1.24rem; letter-spacing: .5px;
  color: #0d1b3e; line-height: 1 }
@media (max-width: 780px) {
  .marque__embleme { width: 36px; height: 36px }
  .marque__nom { font-size: 1.08rem }
}

/* logo ES-PROTECT : image unique (embleme + nom), donc identique partout */
.marque__logo { display: block; height: 54px; width: auto; max-width: 62vw }
@media (max-width: 780px) { .marque__logo { height: 42px } }

/* ═══════════════════════════════════════════════════════════════════════════
   EN-TETE DE L'ESPACE CLIENT
   Une seule ligne : le logo, les rubriques, et le compte a droite.
   ═════════════════════════════════════════════════════════════════════════ */
.entete--espace { box-shadow: 0 1px 0 rgba(16,24,64,.06), 0 6px 18px -12px rgba(16,24,64,.35) }
.entete--espace .entete { gap: 28px; flex-wrap: nowrap }
.entete--espace .marque__logo { height: 44px }

.navigation--espace { flex: 1 1 auto; gap: 4px; flex-wrap: nowrap }

/* rubriques : pastille douce, etat courant marque par un fond et non un trait */
.navigation--espace .onglet { padding: 9px 15px; border-radius: 9px; font-size: .95rem;
  font-weight: 500; color: #46506b; transition: background .15s, color .15s }
.navigation--espace .onglet:hover { background: #f1f2f9; color: var(--bleu) }
.navigation--espace .onglet[aria-current] { background: var(--bleu-pale); color: var(--bleu);
  font-weight: 650 }
.navigation--espace .onglet[aria-current]::after { display: none }

/* --- bloc de compte -------------------------------------------------------- */
.compte { position: relative; flex: none }
.compte__declencheur { display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px; border: 1px solid #e3e5f0; border-radius: 999px;
  background: #fff; text-decoration: none; color: #2b3450; font-size: .92rem;
  font-weight: 600; transition: border-color .15s, box-shadow .15s, background .15s }
.compte__declencheur:hover { border-color: #c9cee4; box-shadow: 0 2px 10px rgba(16,24,64,.08) }
.compte__declencheur.est-actif { border-color: var(--bleu); background: var(--bleu-pale) }

.compte__pastille { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: linear-gradient(140deg, #1b3fb5, #0a1f6e); color: #fff;
  font-size: .82rem; font-weight: 700; letter-spacing: .5px }
.compte__nom { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.compte__fleche { color: #8891ab; transition: transform .18s }
.compte[aria-ouvert] .compte__fleche { transform: rotate(180deg) }

/* --- menu deroulant -------------------------------------------------------- */
.compte__menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 268px;
  background: #fff; border: 1px solid #e6e8f2; border-radius: 12px; padding: 6px;
  box-shadow: 0 18px 40px -16px rgba(16,24,64,.45), 0 2px 8px rgba(16,24,64,.06);
  z-index: 60; animation: menu-apparait .16s ease both }
.compte__menu[hidden] { display: none }
@keyframes menu-apparait { from { opacity: 0; transform: translateY(-6px) } }
.compte__tete { padding: 10px 12px 12px; border-bottom: 1px solid #f0f1f7; margin-bottom: 6px }
.compte__tete b { display: block; font-size: .95rem; color: #1b2340 }
.compte__tete span { display: block; font-size: .82rem; color: #7b849c;
  overflow: hidden; text-overflow: ellipsis }
.compte__menu a { display: block; padding: 10px 12px; border-radius: 8px;
  font-size: .92rem; color: #33405f; text-decoration: none }
.compte__menu a:hover { background: #f4f5fb; color: var(--bleu) }
.compte__sortie { margin-top: 4px; border-top: 1px solid #f0f1f7; border-radius: 0 0 8px 8px;
  color: #7b849c !important }

@media (max-width: 860px) {
  .entete--espace .entete { flex-wrap: wrap; gap: 12px }
  .entete--espace .marque__logo { height: 38px }
  .navigation--espace { order: 3; flex-basis: 100%; }
  .compte__nom { display: none }
  .compte__declencheur { padding: 5px }
}

/* la rubrique active de lespace est marquee par sa pastille, pas par un trait */
.navigation--espace .onglet[aria-current] { box-shadow: none }

/* ═══════════════════════════════════════════════════════════════════════════
   MENU PUBLIC : meme langage visuel que l'espace client (pastilles douces)
   ═════════════════════════════════════════════════════════════════════════ */
.navigation a:not(.bouton):not(.connexion) { padding: 9px 14px; border-radius: 9px;
  font-size: .94rem; font-weight: 500; color: #46506b;
  transition: background .15s, color .15s }
.navigation a:not(.bouton):not(.connexion):hover { background: #f1f2f9; color: var(--bleu) }
.navigation a[aria-current]:not(.bouton) { background: var(--bleu-pale); color: var(--bleu);
  font-weight: 650; box-shadow: none }
.navigation a[aria-current]:not(.bouton)::after { display: none }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE : les menus deviennent un panneau lateral, ouvert par trois traits
   ═════════════════════════════════════════════════════════════════════════ */
.burger { display: none; flex: none; width: 44px; height: 44px; margin-left: auto;
  align-items: center; justify-content: center; gap: 5px; flex-direction: column;
  background: #fff; border: 1px solid #e3e5f0; border-radius: 11px; cursor: pointer;
  padding: 0; transition: border-color .15s, box-shadow .15s }
.burger:hover { border-color: #c9cee4; box-shadow: 0 2px 10px rgba(16,24,64,.08) }
.burger span { display: block; width: 19px; height: 2px; border-radius: 2px;
  background: #2b3450; transition: transform .22s, opacity .18s }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0 }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }

.voile { position: fixed; inset: 0; background: rgba(12,18,40,.42); z-index: 90;
  opacity: 0; transition: opacity .2s }
.voile.est-visible { opacity: 1 }

@media (max-width: 860px) {
  .burger { display: flex }
  .entete { flex-wrap: nowrap; gap: 10px }
  .connexion { margin-left: auto }

  .navigation, .navigation--espace {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(330px, 86vw);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 4px; padding: 84px 16px 24px; margin: 0; background: #fff; z-index: 95;
    box-shadow: -18px 0 40px -18px rgba(12,18,40,.5);
    transform: translateX(104%); transition: transform .26s cubic-bezier(.22,.61,.36,1);
    overflow-y: auto; flex-basis: auto }
  .navigation.est-ouvert { transform: translateX(0) }
  .navigation a, .navigation--espace .onglet { width: 100%; padding: 13px 14px;
    border-radius: 10px; font-size: 1rem }
  .navigation .bouton { margin: 10px 0 0; text-align: center }
  .navigation--espace { padding-top: 84px }
}
@media (prefers-reduced-motion: reduce) {
  .navigation, .voile, .burger span { transition: none }
}


/* le lien de connexion passe dans le panneau lateral sur petit ecran */
.connexion--panneau { display: none }
@media (max-width: 860px) {
  .entete > .connexion { display: none }
  .connexion--panneau { display: block; margin: 12px 0 0; text-align: center;
    padding: 12px 14px !important; font-size: .95rem }
}

/* Compte pas encore confirme : bandeau bloquant, visible des l'arrivee */
.a-confirmer { border: 1px solid #ffd9a8; background: #fff8ef; border-left: 4px solid #d97706;
  border-radius: var(--rayon); padding: 16px 18px; margin: 0 0 22px }
.a-confirmer b { color: #92400e }
.a-confirmer p { margin: 6px 0 12px; font-size: .93rem; color: #4a3520 }
.a-confirmer .bouton { margin-top: 0 }