/* ==========================================================================
   style.css — Charte Hexagone × Af2i pour le portail
   Police de MARQUE : PP Neue Montreal (identique au site groupe-hexagone.com)
   Couleurs : braise #e75a28 · nuit #05314a · celeste #598db0 · ivoire #f9f4ef
   ========================================================================== */
/* --- Police de marque PP Neue Montreal (auto-hébergée, comme le site Hexagone) --- */
@font-face{font-family:'PP Neue Montreal'; src:url('fonts/PPNeueMontrealTT-Thin.woff2') format('woff2'); font-weight:100; font-style:normal; font-display:swap;}
@font-face{font-family:'PP Neue Montreal'; src:url('fonts/PPNeueMontrealTT-Book.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap;}
@font-face{font-family:'PP Neue Montreal'; src:url('fonts/PPNeueMontrealTT-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap;}
@font-face{font-family:'PP Neue Montreal'; src:url('fonts/PPNeueMontrealTT-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap;}
@font-face{font-family:'PP Neue Montreal'; src:url('fonts/PPNeueMontrealTT-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap;}

:root{
  /* --- 6 couleurs officielles de la charte --- */
  --basalte:#291d29; --braise:#e75a28; --nuit:#05314a; --celeste:#598db0;
  --ivoire:#f9f4ef; --givre:#f4faff;
  /* --- alias utilisés dans le portail (mappés sur la charte) --- */
  --cream-1:#FCF8F1; --paper:#ffffff;
  --navy:var(--nuit); --navy-2:#042536;
  --orange:var(--braise); --orange-2:#c8481c;
  --ink:#1f2a30; --gray:#5b6b78; --muted:#8A93A0;
  --line:#e6ddd0; --line-2:#dfe8ef; --green:#1a7a4a;
  --shadow:0 8px 24px rgba(5,49,74,.07);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'PP Neue Montreal','Avenir','Segoe UI',Arial,sans-serif;
  color:var(--ink);
  background:radial-gradient(90% 90% at 100% 100%, rgba(231,90,40,.20) 0%, rgba(231,90,40,0) 55%),
    linear-gradient(150deg, #ffffff 0%, #fdf6f1 50%, #f8e5d9 100%);
  background-attachment:fixed;
  font-size:17px; line-height:1.62; min-height:100vh; display:flex; flex-direction:column;}
a{color:inherit; text-decoration:none;}
main{flex:1; display:flex; flex-direction:column; min-height:0;}

/* --- Animations d'entrée : easing "expo-out" moderne --- */
@keyframes fadeUp{ from{opacity:0; translate:0 18px;} to{opacity:1; translate:0 0;} }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
:root{ --ease-out:cubic-bezier(.16,1,.3,1); }
/* Apparition à l'ouverture : chaque bloc apparaît en fondu-montée décalé.
   (Se joue une fois au chargement, finit visible -> ne cache jamais le bas de page.) */
.wrap > *{ animation:fadeUp .6s var(--ease-out) both; }
.wrap > *:nth-child(2){ animation-delay:.07s; }
.wrap > *:nth-child(3){ animation-delay:.14s; }
.wrap > *:nth-child(4){ animation-delay:.21s; }
.wrap > *:nth-child(n+5){ animation-delay:.26s; }
.auth .right{ animation:fadeUp .75s var(--ease-out) both; }
.auth .left{ animation:fadeIn 1s ease both; }
/* accessibilité : aucune animation si l'utilisateur l'a désactivée */
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* ---- Bandeau de marque (logos permutés : af2i gauche · Hexagone droite) ---- */
.brandbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 36px;
  background:linear-gradient(135deg,#fefaf7 0%,#fae4d4 60%,#f2b89a 100%); border-bottom:1px solid var(--line);}
.brandbar .af2i{font-weight:900; font-size:40px; color:var(--celeste); letter-spacing:-.02em;}
.brandbar .af2i b{color:var(--orange);}
.brandbar .btitle{text-align:center; flex:1; line-height:1.25;}
.brandbar .btitle b{font-size:22px; color:var(--navy); font-weight:800;}
.brandbar .btitle span{display:block; font-size:15px; color:var(--orange-2); font-weight:400; margin-top:3px;}
.brandbar .hexb{display:flex; align-items:center; gap:8px; color:var(--navy); font-weight:800; font-size:18px;}
.brandbar .hexb span{color:var(--orange);}
.brandbar .hexb svg{width:32px; height:32px; color:var(--orange);}
.brandbar .logo-img{height:68px; width:auto; display:block;}   /* logos déposés par le client */
.brandbar .logo-spacer{width:120px; flex:none;}   /* réserve la place du logo af2i (masqué hors dashboard) pour garder le titre centré */
@media(max-width:760px){ .brandbar .btitle{display:none;} .brandbar .logo-img{height:46px;} }

/* ---- Barre de navigation ---- */
.pnav{display:flex; align-items:center; gap:72px; padding:18px 40px; background:var(--paper);
  border-bottom:1px solid rgba(5,49,74,.32); flex-wrap:wrap;}
.pnav a{font-size:14px; font-weight:400; color:var(--nuit); padding:8px 0; position:relative;
  text-transform:uppercase; letter-spacing:.12em; transition:color .2s ease;}
/* souligné animé qui glisse depuis la gauche au survol / actif */
.pnav a::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:var(--braise); transform:scaleX(0); transform-origin:left;
  transition:transform .28s ease;}
.pnav a:hover{color:var(--nuit);}
.pnav a:hover::after{transform:scaleX(1);}
.pnav a.active{color:var(--nuit);}
.pnav a.active::after{transform:scaleX(1);}
/* Bloc de droite (« Nous contacter » + profil) : collé à droite et gardé d'un
   seul tenant, avec son propre écart — le gap de 72px de .pnav faisait passer
   le profil à la ligne suivante. */
.pnav-droite{margin-left:auto; display:flex; align-items:center; gap:36px;}
.pnav .lk{font-size:11px;}

/* Entrées de nav sur 3 lignes : niveau (braise, gras) / intitulé / effectif.
   Le parent .pnav a met tout en capitales : on ne le garde que sur la 1re ligne. */
.pnav a.nav-item{display:flex; flex-direction:column; gap:3px; line-height:1.35;
  padding:4px 0 6px;}
/* Ligne 1 : le niveau, en braise et capitales. Lignes 2 et 3 : bleu nuit
   (--nuit, la couleur du titre d'en-tête), en gras puis en graisse normale. */
.nav-niveau{font-size:12.5px; font-weight:800; color:var(--braise);
  text-transform:uppercase; letter-spacing:.13em;}
.nav-titre{font-size:16px; font-weight:700; color:var(--nuit);
  text-transform:none; letter-spacing:.01em; white-space:nowrap;}
.nav-sous{font-size:13.5px; font-weight:400; color:var(--nuit);
  text-transform:none; letter-spacing:.01em; white-space:nowrap;}

/* Effet de focus : quand un niveau est sélectionné, les autres passent en
   arrière-plan (léger flou + estompage). Le survol rend sa netteté à l'entrée
   pointée, pour rester lisible avant de cliquer. */
.pnav a.nav-item{transition:color .2s ease, filter .28s ease, opacity .28s ease;}
.pnav:has(a.nav-item.active) a.nav-item:not(.active){filter:blur(1.4px); opacity:.42;}
.pnav:has(a.nav-item.active) a.nav-item:not(.active):hover,
.pnav:has(a.nav-item.active) a.nav-item:not(.active):focus-visible{filter:none; opacity:1;}

@media(max-width:1400px){ .pnav{gap:44px;} }
@media(max-width:1150px){ .pnav{gap:28px;} .nav-sous{display:none;} }
.userchip{display:flex; align-items:center; gap:8px;}
.avatar{width:32px; height:32px; border-radius:50%; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px;}

/* ---- Menu du profil (Mon compte / Déconnexion) ---- */
.userchip-zone{position:relative;}
/* Le chip devient un bouton : on neutralise le style natif. */
button.userchip{background:none; border:0; padding:0; cursor:pointer; font:inherit;
  color:var(--nuit);}
button.userchip .chevron{font-size:10px; color:var(--gray); transition:transform .2s ease;}
button.userchip[aria-expanded="true"] .chevron{transform:rotate(180deg);}
.usermenu{position:absolute; right:0; top:calc(100% + 10px); z-index:60;
  min-width:180px; background:var(--paper); border:1px solid var(--line-2);
  border-radius:12px; padding:6px; box-shadow:0 14px 32px rgba(5,49,74,.16);}
.usermenu a{display:block; padding:9px 12px; border-radius:8px; font-size:13px;
  color:var(--nuit);}
.usermenu a::after{display:none;}           /* pas de soulignement animé de .pnav a */
.usermenu a:hover{background:rgba(225,118,58,.08); color:var(--orange-2);}
.usermenu a.on{color:var(--orange-2); font-weight:700;}

/* ---- Contenu ---- */
.wrap{padding:22px 28px 40px; flex:1; display:flex; flex-direction:column; min-height:0;}
.page-title{display:none;}
/* titres façon site corporate : grands, élégants, graisse moyenne (pas écrasés) */
.page-title h2{font-size:30px; font-weight:600; letter-spacing:-.01em; line-height:1.15; color:var(--nuit);}
.page-title p{font-size:14.5px; color:var(--gray); margin-top:5px;}
.pill{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
.pill.ok{color:var(--green); background:rgba(26,122,74,.1); border:1px solid rgba(26,122,74,.3);}
.pill.lock{color:var(--orange-2); background:rgba(225,118,58,.12); border:1px solid rgba(225,118,58,.35);}

.embed{flex:1; min-height:560px; background:var(--paper); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow);}
.embed iframe{display:block; width:100%; height:100%; border:0;}
/* Intégration "hauteur automatique" : l'iframe grandit à la taille du dashboard
   (plus de mini-scrollbar interne, c'est la page entière qui défile). */
.embed-fit{background:var(--paper); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow);}
.embed-fit iframe{display:block; width:100%; border:0; height:900px;}

.card{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:24px 26px; box-shadow:var(--shadow); margin-bottom:22px;}
.card h3{font-size:18px; font-weight:700; margin-bottom:12px; padding-left:12px; border-left:3px solid var(--braise);}
.hint{font-size:13px; color:var(--muted);}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch;}
/* les cartes côte à côte prennent la même hauteur */
.grid2 > .card{margin-bottom:0; height:100%;}
@media(max-width:820px){ .grid2{grid-template-columns:1fr;} }

/* ---- Formulaires ---- */
label{font-size:13.5px; font-weight:700; letter-spacing:.02em; color:var(--navy); display:block; margin-bottom:7px;}
input,select,textarea{font-family:inherit; font-size:15.5px; color:var(--navy); background:#fff;
  border:1px solid var(--line-2); border-radius:10px; padding:13px 14px; width:100%; outline:none;}
input:focus,select:focus,textarea:focus{border-color:var(--orange);}
textarea{min-height:120px; resize:vertical;}

/* ---- Case à cocher de formulaire ---- */
/* Le sélecteur global met les <label> en bloc : ici on veut la case et son
   texte sur la même ligne, alignés, et le tout cliquable. */
label.case-a-cocher{display:flex; align-items:center; gap:9px; cursor:pointer;
  font-weight:400; font-size:14px; color:var(--ink); margin-bottom:0;}
label.case-a-cocher input[type="checkbox"]{width:17px; height:17px; flex:0 0 17px;
  margin:0; padding:0; accent-color:var(--orange); cursor:pointer;}

/* ---- Offre : bandeau bleu à GAUCHE, carte d'accès à DROITE ----
   Les deux blocs étaient empilés ; ils partagent maintenant la même ligne.
   La carte garde une largeur fixe pour ne pas s'étirer, le bandeau prend le
   reste. En dessous de 900px on repasse en colonne (mobile). */
.offre-duo{display:grid; grid-template-columns:minmax(0,1fr) 320px;
  gap:18px; align-items:stretch; margin-top:18px;}
.offre-duo > .n1-hero,
.offre-duo > .n2-hero{margin:0; height:100%;}
/* .cat-grid sert aussi ailleurs : on ne le neutralise QUE dans ce contexte. */
.offre-duo > .cat-grid{display:flex; margin:0; height:100%;}
.offre-duo > .cat-grid > .cat-buy{width:100%; height:100%;
  display:flex; flex-direction:column; justify-content:center;}
@media(max-width:900px){ .offre-duo{grid-template-columns:1fr;} }

/* ---- Récapitulatif d'identité déduit du SIRET (page de paiement) ----
   Masqué tant que le SIRET n'est pas reconnu : au chargement, l'utilisateur
   ne voit qu'un seul champ. */
.recap-identite{background:var(--cream-1); border:1px solid var(--line);
  border-radius:12px; padding:14px 16px; margin:4px 0 16px;}
.recap-titre{font-size:11.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gray); margin-bottom:10px;}
.recap-identite dl{display:grid; grid-template-columns:auto 1fr;
  gap:6px 16px; margin:0 0 8px; align-items:baseline;}
.recap-identite dt{font-size:12.5px; color:var(--gray); white-space:nowrap;}
.recap-identite dd{margin:0; font-size:14px; font-weight:700; color:var(--navy);
  word-break:break-word;}
/* Légende sous le nom facturé (« Nom qui figurera sur la facture »). */
.recap-identite .recap-note{display:block; margin-top:2px; font-size:11.5px;
  font-weight:400; color:var(--muted);}
@media(max-width:520px){ .recap-identite dl{grid-template-columns:1fr; gap:2px 0;} }

/* ---- Retour de vérification du SIRET (inscription) ---- */
.siret-etat{display:flex; align-items:center; gap:8px; margin-top:9px;
  font-size:12.5px; line-height:1.4;}
.siret-etat.chargement{color:var(--gray);}
.siret-etat.valide{color:var(--green); font-weight:700;}
.siret-etat.invalide{color:var(--orange-2); font-weight:700;}
.siret-etat.avertissement{color:#8a6d1f; font-weight:700;}
/* Le disque tournant n'apparaît que pendant l'appel à l'API. */
.siret-loader{display:none; width:14px; height:14px; flex:0 0 14px; border-radius:50%;
  border:2px solid var(--line-2); border-top-color:var(--navy);
  animation:siret-tourne .7s linear infinite;}
.siret-etat.chargement .siret-loader{display:block;}
@keyframes siret-tourne{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){ .siret-loader{animation:none;} }

/* ---- Critères de mot de passe (macro _mdp_criteres.html) ----
   Chaque critère passe du gris au vert dès qu'il est satisfait. Tant que le
   champ est vide, la liste reste neutre : on n'accueille pas l'utilisateur
   avec cinq lignes en rouge. */
.mdp-criteres{list-style:none; margin:9px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:4px 16px; font-size:12.5px; color:var(--gray);}
.mdp-criteres li{display:flex; align-items:center; gap:6px; transition:color .2s ease;}
.mdp-criteres .puce{width:14px; height:14px; flex:0 0 14px; border-radius:50%;
  border:1.5px solid var(--line-2); position:relative; transition:background .2s ease, border-color .2s ease;}
/* Coche dessinée en CSS : deux traits blancs, visibles une fois le critère validé. */
.mdp-criteres .puce::after{content:""; position:absolute; left:4px; top:1px;
  width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0); transition:transform .2s ease;}
.mdp-criteres li.ok{color:var(--green); font-weight:700;}
.mdp-criteres li.ok .puce{background:var(--green); border-color:var(--green);}
.mdp-criteres li.ok .puce::after{transform:rotate(45deg) scale(1);}
/* Champ encore vide : aucun critère n'est mis en avant. */
.mdp-criteres.vide li{color:var(--muted); font-weight:400;}
.grp{margin-bottom:16px;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.seg{display:flex; gap:10px; margin-bottom:16px;}
.seg .opt{flex:1; border:1.5px solid var(--line-2); border-radius:12px; padding:14px; cursor:pointer; display:flex; align-items:center; gap:10px; background:#fff;}
.seg .opt.on{border-color:var(--orange); background:rgba(225,118,58,.06);}
.seg .opt .dot{width:16px; height:16px; border-radius:50%; border:2px solid var(--line-2); flex:0 0 auto;}
.seg .opt.on .dot{border-color:var(--orange); background:var(--orange);}
.seg .opt .t{font-weight:700; font-size:14px;}

/* ---- Boutons ---- */
.btn{border:0; cursor:pointer; font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:13px; border-radius:999px; padding:12px 20px; display:inline-block;
  transition:transform .28s var(--ease-out), background .2s ease, box-shadow .28s ease, color .2s ease, border-color .2s ease;}
.btn-solid{background:var(--orange); color:#fff;} .btn-solid:hover{background:var(--orange-2);}
.btn-navy{background:var(--navy); color:#fff;} .btn-navy:hover{background:var(--navy-2);}
.btn-solid:hover, .btn-navy:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(5,49,74,.2); }
.btn-ghost{background:#fff; color:var(--navy); border:1px solid var(--line-2);} .btn-ghost:hover{border-color:var(--orange); color:var(--orange-2);}
.btn.full{width:100%; text-align:center;}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.mini{border:0; cursor:pointer; font-weight:700; font-size:12px; border-radius:8px; padding:6px 10px; margin:2px 4px 2px 0;}
.mini.ok{background:var(--green); color:#fff;} .mini.no{background:#c0392b; color:#fff;} .mini.gh{background:#fff; border:1px solid var(--line-2); color:var(--navy);}

/* ---- Messages flash ---- */
.flashes{padding:10px 28px 0;}
.flash{padding:12px 16px; border-radius:12px; margin-bottom:8px; font-size:14px; font-weight:600;}
.flash.success{background:rgba(26,122,74,.1); color:#0f4d2e; border:1px solid rgba(26,122,74,.3);}
.flash.error{background:#fbe0e4; color:#7a1020; border:1px solid #f2b8c0;}
.flash.warning{background:#fdf0d5; color:#8a5a00; border:1px solid #f0d9a8;}

/* ---- Panel admin : zones scrollables, filtres, compteurs ---- */
/* Les tableaux défilent dans leur cadre : la page reste courte même avec
   plusieurs centaines de lignes. L'en-tête reste visible pendant le défilement. */
.zone-scroll{max-height:440px; overflow-y:auto; border:1px solid var(--line);
  border-radius:10px;}
.zone-scroll thead th{position:sticky; top:0; z-index:2;}
.barre-outils{display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-bottom:12px;}
.barre-outils .compteur{font-size:12px; color:var(--gray); margin-left:auto;}
.puce{font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px;
  border:1px solid var(--line-2); color:var(--gray); background:#fff;}
.puce:hover{border-color:var(--orange); color:var(--orange-2);}
.puce.on{background:var(--navy); border-color:var(--navy); color:#fff;}

/* ---- Tables (admin) ---- */
table{width:100%; border-collapse:collapse;}
th{background:#f3ece0; color:var(--gray); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; text-align:left; padding:9px 12px; border-bottom:1px solid var(--line);}
td{font-size:13px; color:var(--gray); padding:9px 12px; border-bottom:1px solid var(--line);}
td b{color:var(--navy);}
.badge{display:inline-block; font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px;}
.b-wait{color:#8a5a00; background:#fdf0d5;} .b-ok{color:#0f4d2e; background:#dcf0e4;}
.b-sdg{color:#1e3a5f; background:#e4eef8;} .b-autre{color:#5b4a1e; background:#f3ecd8;}

/* ---- Authentification (2 colonnes) ---- */
.auth{flex:1; display:grid; grid-template-columns:1fr 1fr; min-height:0;}
.auth .left{position:relative; overflow:hidden; background:#05314a; color:#fff; padding:72px 52px; display:flex; flex-direction:column; justify-content:flex-start;}
/* fond bleu nuit uni + symbole Hexagone (starburst) animé en décor, comme le site */
/* symbole Hexagone en décor : le WRAPPER suit légèrement la souris (parallax),
   l'IMAGE tourne très lentement + respire (opacité). */
.sb-decor{position:absolute; right:-90px; bottom:-90px; width:440px; height:440px; z-index:0; pointer-events:none;
  transform:translate(calc(var(--mx,0) * 26px), calc(var(--my,0) * 26px)); transition:transform .5s var(--ease-out);}
.sb-decor .sb{display:block; width:100%; height:100%;
  background:url('Icones/HEXA_PICTO_04.png') no-repeat center / contain;
  animation:spinSlow 90s linear infinite, breathe 9s ease-in-out infinite;}
.sb-decor .sb.alt1{background-image:url('Icones/HEXA_PICTO_01.png');}
@keyframes spinSlow{ to{ transform:rotate(360deg); } }
@keyframes breathe{ 0%,100%{opacity:.07;} 50%{opacity:.15;} }

/* --- Décor picto réutilisable dans les hero bleu nuit (pages internes) --- */
.hero-deco{position:absolute; width:172px; height:172px; z-index:0; pointer-events:none; opacity:.22;}
.hero-deco.tr{top:-26px; right:-26px;} .hero-deco.br{bottom:-26px; right:-26px;}
.hero-deco.tl{top:-26px; left:-26px;} .hero-deco.bl{bottom:-26px; left:-26px;}
.hero-deco .hs{display:block; width:100%; height:100%;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  animation:spinSlow 100s linear infinite, heroBreathe 11s ease-in-out infinite;}
.hero-deco .hs.p1{background-image:url('Icones/HEXA_PICTO_01.png');}
.hero-deco .hs.p2{background-image:url('Icones/HEXA_PICTO_02.png');}
.hero-deco .hs.p3{background-image:url('Icones/HEXA_PICTO_03.png');}
.hero-deco .hs.p4{background-image:url('Icones/HEXA_PICTO_04.png');}
@keyframes heroBreathe{ 0%,100%{opacity:.75;} 50%{opacity:1;} }
/* le contenu des hero reste au-dessus du décor */
.n1-hero > *:not(.hero-deco), .n2-hero > *:not(.hero-deco),
.ct-hero > *:not(.hero-deco), .acc-hero > *:not(.hero-deco),
.pay-hero > *:not(.hero-deco){ position:relative; z-index:1; }

/* En-tête clair du dashboard : trait fin (pas de boîte) + picto en décor */
.dash-head{position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:6px 2px 16px; margin-bottom:18px; border-bottom:1px solid var(--line-2);}
.dash-head .dh-ey{color:var(--braise); font-weight:800; letter-spacing:.16em; font-size:12px; text-transform:uppercase;}
.dash-head h2{font-size:22px; font-weight:800; color:var(--nuit); margin-top:4px; line-height:1.15;}
.dash-head .dh-deco{position:absolute; top:-14px; right:0; width:96px; height:96px; z-index:0; pointer-events:none; opacity:.13;}
.dash-head .dh-deco span{display:block; width:100%; height:100%;
  background:url('Icones/HEXA_PICTO_03.png') no-repeat center/contain; animation:spinSlow 80s linear infinite;}
.dash-head > *:not(.dh-deco){position:relative; z-index:1;}

/* Effet "agrandir au survol" : cartes ET boîtes bleues (hero) */
.card,
.n1-hero, .n2-hero, .ct-hero, .acc-hero, .pay-hero{
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.card:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 16px 36px rgba(5,49,74,.13); }
.n1-hero:hover, .n2-hero:hover, .ct-hero:hover, .acc-hero:hover, .pay-hero:hover{
  transform:translateY(-3px) scale(1.02); box-shadow:0 22px 50px rgba(5,49,74,.30); }
/* ... et les autres boîtes du site (étapes, encadrés) */
.step, .box, .dl-help{ transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.step:hover, .box:hover, .dl-help:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 14px 32px rgba(5,49,74,.14); }
.auth .left > *:not(.sb-decor){position:relative; z-index:2;}
.auth .left .ey{color:var(--orange); font-weight:800; letter-spacing:.18em; font-size:12px; text-transform:uppercase;}
.auth .left h1{font-size:36px; font-weight:800; line-height:1.1; margin:16px 0;}
.auth-feats{list-style:none; margin-top:28px; display:flex; flex-direction:column; gap:13px;}
.auth-feats li{position:relative; padding-left:26px; color:#dbe6ef; font-size:15px;}
.auth-feats li::before{content:""; position:absolute; left:0; top:7px; width:9px; height:9px; border-radius:50%; background:var(--braise); box-shadow:0 0 0 4px rgba(225,118,58,.2);}
.auth .right{background:var(--paper); padding:48px 56px; display:flex; flex-direction:column; justify-content:center; overflow:auto;}
.auth .right h2{font-size:26px; font-weight:800; margin-bottom:6px;}
.auth .right .sub{color:var(--gray); margin-bottom:22px; font-size:16px;}
.tabs{display:flex; background:#F1E7D8; border-radius:999px; padding:5px; width:fit-content; margin-bottom:26px;}
.tabs a{padding:11px 26px; border-radius:999px; font-weight:800; color:var(--gray); text-transform:uppercase; letter-spacing:.04em; font-size:12px;}
.tabs a.on{background:var(--navy); color:#fff;}
@media(max-width:900px){ .auth{grid-template-columns:1fr;} .auth .left{display:none;} }

/* ---- Pied de page (ancre le bas, supprime l'effet "page vide") ---- */
.pfoot{background:var(--nuit); color:#c7d2dc; margin-top:auto;}
.pfoot-in{max-width:none; margin:0; padding:36px 40px 24px; display:grid; grid-template-columns:2fr 1fr 1.5fr 1.5fr; gap:28px; font-size:13.5px;}
.pfoot-col h4{color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:12px;}
.pfoot-col a, .pfoot-col span{display:block; color:#a9bccb; margin-bottom:8px; transition:color .2s;}
.pfoot-col a:hover{color:var(--braise);}
.pfoot-col p{color:#a9bccb; line-height:1.6;}
.pfoot-brand{font-size:18px; margin-bottom:8px;} .pfoot-brand b{color:#fff;}
.pfoot-bottom{border-top:1px solid rgba(255,255,255,.1); max-width:none; margin:0; padding:16px 40px; font-size:12px; color:#7f94a4; line-height:1.6;}
@media(max-width:820px){ .pfoot-in{grid-template-columns:1fr 1fr;} }
/* le contenu occupe au moins la hauteur d'écran restante */
.wrap{min-height:52vh;}
/* pages courtes : contenu centré verticalement (supprime le grand vide en bas) */
.wrap.vcenter{justify-content:center;}
.wrap.vcenter .page-title{margin-bottom:22px;}


/* ---- Cartes d'offre (.cat-buy) ----
   Ces styles vivaient dans niveau1.html : le Niveau 2 n'en heritait donc
   pas et sa carte s'affichait sans encadre, avec une icone geante.
   Ils sont desormais partages par les deux niveaux. */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.cat-buy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 16px;
  box-shadow: var(--shadow);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.cat-buy:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 18px 40px rgba(5, 49, 74, 0.18);
  border-color: rgba(225, 118, 58, 0.4);
}
/* Rond de couleur douce autour de l'icône vectorielle */
/* Badge d'icône premium : anneau dégradé rotatif, flottement, pop + redessin au survol */
.cat-buy .i {
  position: relative;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--braise);
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, #fdeadf 68%, #fbdccb 100%);
  box-shadow: 0 8px 22px rgba(231, 90, 40, 0.2);
  isolation: isolate;
  transition: scale 0.45s var(--ease-out), rotate 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out);
}
/* anneau conique dégradé, masqué pour ne garder que le contour */
.cat-buy .i::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  z-index: -1;
  background: conic-gradient(from 0deg, #e75a28, #ffb98f, #ff7a3d, #e75a28);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
}
.cat-buy .i svg {
  width: 30px;
  height: 30px;
  overflow: visible;
  stroke-dasharray: 200;
  stroke-dashoffset: 0;
}
/* survol : le badge grossit et rebondit, l'anneau accélère, l'icône se redessine */
.cat-buy:hover .i {
  scale: 1.12;
  rotate: -3deg;
  box-shadow: 0 16px 34px rgba(231, 90, 40, 0.32);
}
.cat-buy:hover .i::before {
  animation-duration: 1.6s;
}
.cat-buy:hover .i svg {
  animation: iconDraw 0.95s var(--ease-out);
}
/* flottement décalé : les 3 badges ne bougent pas à l'unisson */
.cat-grid .cat-buy:nth-child(2) .i { animation-delay: 0.7s; }
.cat-grid .cat-buy:nth-child(3) .i { animation-delay: 1.4s; }
@keyframes ringSpin { to { transform: rotate(360deg); } }
@keyframes iconFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes iconDraw { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
.cat-buy b {
  font-size: 15px;
}
.cat-buy span {
  font-weight: 800;
  color: var(--braise);
}
/* Bandeau bleu de présentation (même style que le Niveau 2) */
.n1-hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  color: #fff;
  background: #05314a;
  padding: 34px 38px;
  box-shadow: 0 16px 44px rgba(5, 49, 74, 0.26);
}


/* ---- Bandeaux bleus : logo Hexagone à GAUCHE, texte à droite ----
   Le logo est volontairement grand : il occupe la zone restée vide à gauche du
   bandeau. Il rétrécit avant le texte quand la place manque, et passe au-dessus
   sur mobile. */
.hero-duo{display:flex; align-items:center; gap:32px; position:relative; z-index:2;}
.hero-texte{flex:1; min-width:0;}
.hero-logo{flex:0 0 auto; max-height:180px; max-width:230px; width:auto; height:auto;
  display:block; align-self:center;}
/* Seul le logo standard (bleu nuit) doit être blanchi : le fichier blanc
   déposé par le client est déjà à la bonne couleur. */
.hero-logo.a-blanchir{filter:brightness(0) invert(1); opacity:.92;}
@media(max-width:1100px){ .hero-logo{max-height:130px; max-width:170px;} .hero-duo{gap:24px;} }
@media(max-width:780px){
  .hero-duo{flex-direction:column; align-items:flex-start; gap:18px;}
  .hero-logo{max-height:80px; max-width:150px;}
}