/* ===== tonformateur · design system ===== */
/* Polices chargées via + dans le de chaque page (non bloquant). */
:root{
/* ===== TOKENS · source unique de vérité (couleurs, typo, espacements, ombres) =====
À terme, extractibles dans css/tokens.css. Tout le reste référence ces variables. */
/* Couleurs de marque */
--encre:#1C1C22;
--encre-soft:#262630;
--papier:#F4F2EC;
--accent:#C026D3;
--accent-dark:#86198F;
--accent-light:#E879F9;
--gris:#6A6A73; /* foncé pour passer le contraste AA (~5:1 sur fond clair) */
--gris-clair:#DEDCD3;
--blanc:#FFFFFF;
/* Gris texte conforme AA (4.5:1 sur fond clair) · à préférer à --gris pour du texte */
--gris-texte:#5C5C66;
--ok:#16A34A; --warn:#D97706; --no:#DC2626;
/* Rayons */
--radius:14px;
--radius-sm:9px;
--radius-lg:20px;
--radius-pill:999px;
/* Ombres (cel-shading) */
--shadow-cel:5px 6px 0 var(--accent-dark);
--shadow-hard:4px 4px 0 rgba(26,26,26,.16);
--shadow-soft:0 6px 20px rgba(26,26,26,.10);
/* Échelle typographique (ratio ~1.25) */
--step--1:13px;
--step-0:16px; /* corps de texte */
--step-1:20px;
--step-2:25px;
--step-3:31px;
--step-4:39px;
--step-5:49px;
--step-6:61px;
--h1:clamp(34px, 5vw, var(--step-5));
--h2:var(--step-3);
--h3:var(--step-2);
--h4:var(--step-1);
/* Espacements (échelle 4px) */
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--space-7:48px;
--space-8:64px;
/* Cibles tactiles minimales (a11y) */
--tap:44px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
font-family:'Inter',system-ui,sans-serif;
background:var(--papier);
color:var(--encre);
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.font-display{font-family:'DM Sans',system-ui,sans-serif}
a{color:var(--accent-dark);text-decoration:none}
a:hover{text-decoration:underline}
/* ===== Header ===== */
.topbar{
background:#fff;color:var(--encre);
padding:0;position:sticky;top:0;z-index:50;
border-bottom:3px solid var(--accent);
}
/* Conteneur partagé : aligne logo, hero et footer sur la même marge gauche */
.bar-inner{max-width:1320px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box}
.topbar:not(:has(.bar-inner)){display:flex;align-items:center;justify-content:space-between;padding:14px 28px}
.brand{display:flex;align-items:center;gap:7px}
.brand .logo{width:74px;height:74px}
.brand .word{font-family:'DM Sans';font-weight:500;font-size:24px;letter-spacing:-1px;color:var(--encre)}
.brand .word b{font-weight:700}
.topbar .who{display:flex;align-items:center;gap:16px;font-size:14px}
.topbar .who .role{color:var(--accent-dark);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:1px}
/* ===== Boutons cel-shading ===== */
.btn{
font-family:'DM Sans';font-weight:700;font-size:15px;cursor:pointer;white-space:nowrap;
border:2.5px solid var(--encre);border-radius:10px;
background:var(--accent);color:#fff;padding:11px 20px;
box-shadow:4px 5px 0 var(--accent-dark);
transition:transform .06s ease, box-shadow .06s ease;
}
.btn:hover{transform:translate(1px,1px);box-shadow:3px 4px 0 var(--accent-dark)}
.btn:active{transform:translate(4px,5px);box-shadow:0 0 0 var(--accent-dark)}
.btn.ghost{background:var(--papier);color:var(--encre);box-shadow:4px 5px 0 var(--encre)}
.btn.dark{background:var(--encre-soft);color:var(--papier);box-shadow:4px 5px 0 var(--accent)}
.btn.sm{font-size:13px;padding:7px 13px;box-shadow:3px 4px 0 var(--accent-dark)}
.btn.sm.ghost{box-shadow:3px 4px 0 var(--encre)}
.btn.danger{background:#fff;color:var(--no);border-color:var(--no);box-shadow:3px 4px 0 #fca5a5}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
/* ===== Layout ===== */
.wrap{max-width:1400px;margin:0 auto;padding:52px 28px 72px}
.page-title{font-size:30px;font-weight:700;letter-spacing:-.5px;margin:0 0 4px}
.subtitle{color:#5b5563;font-weight:500;margin:0 0 24px}
/* Accessibilité : focus clavier visible partout */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
.btn:focus-visible,.cf-arrow:focus-visible,.cf-dot:focus-visible,.cf-card:focus-visible{outline:3px solid var(--encre);outline-offset:3px}
/* En-tête de section centré (planning public) */
#planning .page-title,#planning .subtitle{text-align:center}
#planning .subtitle{margin-left:auto;margin-right:auto;max-width:640px}
.section{margin:34px 0}
.section h2{font-size:20px;font-weight:700;margin:0 0 14px;display:flex;align-items:center;gap:10px}
.section h2 .tag{font-family:'Inter';font-size:12px;font-weight:600;background:var(--encre);color:var(--papier);padding:3px 9px;border-radius:20px}
/* ===== Cards cours ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:18px;align-items:stretch}
.pill.niveau-pill{background:#F1E3F7;border-color:#DDBDE8;color:#6E157A;font-weight:700}
.card{
background:#fff;border:2px solid var(--encre);border-radius:var(--radius);
padding:18px;box-shadow:4px 5px 0 var(--encre);display:flex;flex-direction:column;gap:10px;
}
.card .city{font-size:12px;font-weight:600;color:var(--accent-dark);text-transform:uppercase;letter-spacing:1px}
.card h3{font-size:18px;margin:2px 0 0}
.card .obj{font-size:14px;color:#4A4A52;line-height:1.45;flex:0 0 auto;overflow:hidden}
.card-bottom{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:14px}
.card .obj-p{margin:0}
.obj-h{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--accent-dark);margin:2px 0 8px}
.obj-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.obj-list li{position:relative;padding-left:22px;font-size:13px;line-height:1.4;color:#4A4A52}
.obj-list li::before{content:"";position:absolute;left:0;top:4px;width:13px;height:13px;border-radius:4px;
background:#F1E3F7;border:1.5px solid var(--accent)}
.obj-list li::after{content:"";position:absolute;left:4px;top:6.5px;width:4px;height:7px;
border:solid var(--accent-dark);border-width:0 2px 2px 0;transform:rotate(45deg)}
.obj-list li.obj-more{padding-left:22px;color:var(--accent-dark);font-weight:600;font-size:12.5px}
.obj-list li.obj-more::before,.obj-list li.obj-more::after{display:none}
.card .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.pill{font-size:12.5px;font-weight:600;background:var(--papier);border:1.5px solid var(--gris-clair);
border-radius:8px;padding:5px 9px;color:var(--encre)}
.pill.rate{background:var(--accent);color:#fff;border-color:var(--accent)}
.card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px;gap:10px}
.candidats{font-size:12px;color:#5b5563}
.status{font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px}
.status.demande{background:#FEF3C7;color:#92400E}
.status.accepte{background:#DCFCE7;color:#166534}
.status.refuse{background:#FEE2E2;color:#991B1B}
/* ===== Filtres ===== */
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;background:#fff;border:2px solid var(--encre);
border-radius:var(--radius);padding:14px 16px;box-shadow:4px 5px 0 var(--encre);margin-bottom:20px}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:12px;font-weight:600;color:var(--gris)}
input,select,textarea{
font-family:'Inter';font-size:14px;border:2px solid var(--gris-clair);border-radius:9px;
padding:9px 11px;background:#fff;color:var(--encre);outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
textarea{resize:vertical;min-height:80px}
/* ===== Timeline maison ===== */
.toggle{display:inline-flex;border:2px solid var(--encre);border-radius:10px;overflow:hidden;box-shadow:3px 4px 0 var(--encre)}
.toggle button{font-family:'DM Sans';font-weight:700;font-size:13px;border:none;background:#fff;color:var(--encre);
padding:8px 16px;cursor:pointer}
.toggle button.on{background:var(--accent);color:#fff}
.timeline{background:#fff;border:2px solid var(--encre);border-radius:var(--radius);box-shadow:4px 5px 0 var(--encre);
padding:0;overflow-x:auto}
.tl-head{display:flex;border-bottom:2px solid var(--encre);position:sticky;top:0;background:#fff;z-index:2}
.tl-rowlabelhead{min-width:200px;flex:0 0 200px;padding:12px 14px;font-weight:700;font-family:'DM Sans';
border-right:2px solid var(--encre);font-size:13px;background:var(--papier)}
.tl-months{position:relative;flex:1}
.tl-month{position:absolute;top:0;height:100%;border-left:1px dashed var(--gris-clair);
font-size:11px;font-weight:600;color:var(--gris);padding:12px 0 0 6px;text-transform:capitalize}
.tl-row{display:flex;border-bottom:1px solid var(--gris-clair);min-height:54px}
.tl-row:hover{background:#FBFAF7}
.tl-rowlabel{min-width:200px;flex:0 0 200px;padding:10px 14px;border-right:2px solid var(--encre);
font-size:13px;font-weight:600;display:flex;flex-direction:column;justify-content:center;gap:2px}
.tl-rowlabel small{color:var(--accent-dark);font-weight:600}
.tl-track{position:relative;flex:1}
.tl-bar{position:absolute;top:11px;height:30px;border:2px solid var(--encre);border-radius:8px;
background:var(--accent);color:#fff;font-size:12px;font-weight:700;font-family:'DM Sans';
display:flex;align-items:center;padding:0 9px;white-space:nowrap;overflow:hidden;cursor:pointer;
box-shadow:2px 3px 0 var(--accent-dark)}
.tl-bar.mine{background:var(--encre-soft);box-shadow:2px 3px 0 var(--accent)}
.tl-bar:hover{filter:brightness(1.08)}
/* ===== Auth ===== */
.auth-bg{min-height:100vh;display:flex;flex-direction:column}
.auth-hero{background:var(--encre);color:var(--papier);padding:40px 28px;border-bottom:4px solid var(--accent)}
.auth-hero .wrap{padding-top:0;padding-bottom:0}
.auth-hero h1{font-size:34px;letter-spacing:-1px;margin:18px 0 8px}
.auth-hero p{color:#D9D7CE;max-width:560px;line-height:1.5;margin:0}
.auth-hero .baseline{color:var(--accent-light);font-weight:600;letter-spacing:2px;font-size:13px}
.auth-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1000px;margin:-30px auto 40px;padding:0 28px}
.panel{background:#fff;border:2px solid var(--encre);border-radius:18px;box-shadow:6px 7px 0 var(--encre);padding:26px}
.panel h2{margin:0 0 4px;font-size:22px}
.panel .hint{color:var(--gris);font-size:13px;margin:0 0 18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-stack{display:flex;flex-direction:column;gap:12px}
.full{grid-column:1/-1}
.msg{font-size:13.5px;font-weight:600;padding:10px 12px;border-radius:9px;margin-bottom:14px;display:none}
.msg.err{background:#FEE2E2;color:#991B1B;display:block}
.msg.ok{background:#DCFCE7;color:#166534;display:block}
.seed-note{font-size:12px;color:var(--gris);margin-top:14px;line-height:1.5}
@media(max-width:820px){
.auth-cols{grid-template-columns:1fr}
.form-row{grid-template-columns:1fr}
}
/* ===== Modale ===== */
.modal-bg{position:fixed;inset:0;background:rgba(28,28,34,.55);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal-bg.show{display:flex}
.modal{background:#fff;border:2px solid var(--encre);border-radius:18px;box-shadow:8px 9px 0 var(--accent-dark);
max-width:520px;width:100%;padding:26px;max-height:90vh;overflow:auto}
.modal h3{margin:0 0 10px;font-size:22px}
.modal .row{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.empty{color:var(--gris);padding:20px;text-align:center}
.kv{display:flex;gap:8px;font-size:14px;margin:4px 0}
.kv b{min-width:120px;color:var(--gris);font-weight:600}
/* barre de partage */
.sharebar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fff;border:2px dashed var(--accent);
border-radius:var(--radius);padding:12px 16px;margin-bottom:18px;font-size:14px;font-weight:500}
.sharebar code{background:var(--papier);padding:5px 10px;border-radius:8px;font-size:13px;color:var(--accent-dark)}
/* champ code */
.code-input{font-family:'DM Sans';font-size:34px;font-weight:700;letter-spacing:14px;text-align:center;
width:100%;padding:14px;border:2.5px solid var(--encre);border-radius:12px}
.code-input:focus{border-color:var(--accent)}
/* timeline : cours pourvu */
.tl-bar.pourvu{background:var(--gris);box-shadow:2px 3px 0 var(--encre);cursor:default}
/* ===== Profil admin + menu ===== */
.profile{position:relative;display:flex;align-items:center;gap:12px}
.profile-chip{display:flex;align-items:center;gap:9px;cursor:pointer;background:var(--encre-soft);
border:2px solid var(--accent);border-radius:30px;padding:4px 14px 4px 4px;box-shadow:3px 4px 0 var(--accent-dark)}
.profile-chip:active{transform:translate(2px,2px);box-shadow:1px 2px 0 var(--accent-dark)}
.profile-chip .av{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;
display:flex;align-items:center;justify-content:center;font-weight:700;font-family:'DM Sans';font-size:14px}
.profile-chip .nm{color:var(--papier);font-weight:600;font-size:14px}
.profile-chip .car{color:var(--accent-light);font-size:11px}
.menu{position:absolute;right:0;top:54px;background:#fff;border:2px solid var(--encre);border-radius:14px;
box-shadow:6px 7px 0 var(--accent-dark);min-width:240px;padding:8px;display:none;z-index:80}
.menu.show{display:block}
.menu .mtitle{font-size:11px;font-weight:700;color:var(--gris);text-transform:uppercase;letter-spacing:1px;padding:8px 10px 4px}
.menu button{display:flex;width:100%;align-items:center;gap:10px;background:none;border:none;text-align:left;
font-family:'Inter';font-size:14px;font-weight:600;color:var(--encre);padding:10px;border-radius:9px;cursor:pointer}
.menu button:hover{background:var(--papier)}
.menu .sep{height:1.5px;background:var(--gris-clair);margin:6px 4px}
.menu button.danger{color:var(--no)}
/* ===== Onglets ===== */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 24px}
.tabs button{font-family:'DM Sans';font-weight:700;font-size:14px;border:2px solid var(--encre);background:#fff;
color:var(--encre);padding:9px 18px;border-radius:10px;cursor:pointer;box-shadow:3px 4px 0 var(--encre)}
.tabs button.on{background:var(--accent);color:#fff;box-shadow:3px 4px 0 var(--accent-dark)}
.tabs button:active{transform:translate(2px,2px);box-shadow:1px 2px 0 var(--encre)}
/* ===== Gantt ===== */
.gantt-hint{font-size:13px;color:var(--gris);margin:0 0 12px}
.gantt-wrap{background:#fff;border:2px solid var(--encre);border-radius:14px;box-shadow:4px 5px 0 var(--encre);
overflow:auto;user-select:none;max-height:70vh}
.g-head{display:flex;border-bottom:2px solid var(--encre);position:sticky;top:0;background:#fff;z-index:5}
.g-corner{flex:0 0 210px;border-right:2px solid var(--encre);background:var(--papier);font-family:'DM Sans';
font-weight:700;font-size:13px;padding:16px 14px;position:sticky;left:0;z-index:6}
.g-headcols{position:relative}
.g-months{position:relative;height:22px}
.g-month{position:absolute;top:0;height:22px;font-size:11px;font-weight:700;color:var(--encre);
padding:4px 0 0 6px;text-transform:capitalize;border-left:2px solid var(--gris-clair)}
.g-days{position:relative;height:22px;border-top:1px solid var(--gris-clair)}
.g-day{position:absolute;top:0;width:26px;height:22px;line-height:22px;text-align:center;font-size:10px;
font-weight:600;color:var(--gris);border-left:1px solid #EFEDE6}
.g-day.we{background:rgba(28,28,34,.05);color:#B7B7BD}
.g-we{position:absolute;top:0;height:100%;width:26px;background:rgba(28,28,34,.035);pointer-events:none}
.g-row{display:flex;border-bottom:1px solid var(--gris-clair);height:54px}
.g-row:hover{background:#FBFAF7}
.g-label{flex:0 0 210px;border-right:2px solid var(--encre);padding:8px 12px;font-size:13px;font-weight:600;
display:flex;flex-direction:column;justify-content:center;gap:2px;background:#fff;position:sticky;left:0;z-index:4}
.g-label small{color:var(--accent-dark);font-weight:600}
.g-track{position:relative;flex:1;min-width:600px}
.g-daycol{position:absolute;top:0;height:100%;width:0;border-left:1px solid #EFEDE6}
.g-daycol.we{background:rgba(0,0,0,.03);width:var(--dw,26px)}
.g-bar{position:absolute;top:10px;height:32px;border:2px solid var(--encre);border-radius:8px;background:var(--accent);
color:#fff;font-size:12px;font-weight:700;font-family:'DM Sans';display:flex;align-items:center;padding:0 10px;
white-space:nowrap;overflow:hidden;cursor:grab;box-shadow:2px 3px 0 var(--accent-dark)}
.g-bar.pourvu{background:var(--gris);box-shadow:2px 3px 0 var(--encre)}
.g-bar.masque{opacity:.55;background-image:repeating-linear-gradient(45deg,transparent,transparent 6px,rgba(255,255,255,.25) 6px,rgba(255,255,255,.25) 12px)}
.g-bar:active{cursor:grabbing}
.g-bar .gh{position:absolute;right:0;top:0;width:12px;height:100%;cursor:ew-resize;border-left:2px solid rgba(0,0,0,.2)}
.g-create{display:flex;height:54px;border-top:2px dashed var(--accent)}
.g-create .g-label{color:var(--accent-dark);font-weight:700}
.g-ctrack{position:relative;flex:1;min-width:600px;cursor:crosshair;
background:repeating-linear-gradient(45deg,#faf5fb,#faf5fb 10px,#fff 10px,#fff 20px)}
.g-sel{position:absolute;top:10px;height:32px;border:2px dashed var(--accent-dark);border-radius:8px;
background:rgba(192,38,211,.18);display:flex;align-items:center;justify-content:center;padding:0 8px;
font-family:'DM Sans';font-size:12px;font-weight:700;color:var(--accent-dark);white-space:nowrap;overflow:hidden;pointer-events:none}
/* ===== Hero page d'accueil ===== */
.hero{background:var(--encre);color:var(--papier);border-bottom:4px solid var(--accent);position:relative;overflow:hidden}
/* halo violet léger et moderne */
.hero::after{content:"";position:absolute;right:-160px;top:-160px;width:560px;height:560px;border-radius:50%;
background:radial-gradient(circle,rgba(192,38,211,.22),transparent 68%);pointer-events:none}
.hero-inner{max-width:1320px;margin:0 auto;padding:42px 28px 44px;position:relative;z-index:1;box-sizing:border-box}
/* ===== Effets classe & légers ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-copy>*{animation:fadeUp .6s both}
.hero-copy>*:nth-child(1){animation-delay:.04s}
.hero-copy>*:nth-child(2){animation-delay:.10s}
.hero-copy>*:nth-child(3){animation-delay:.16s}
.hero-copy>*:nth-child(4){animation-delay:.22s}
.hero-copy>*:nth-child(5){animation-delay:.28s}
/* hero deux colonnes + visuel */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-visual{position:relative;height:360px;animation:fadeUp .7s .3s both}
.hero-card{position:absolute;background:#fff;color:var(--encre);border:2.5px solid var(--encre);
border-radius:18px;box-shadow:8px 9px 0 var(--accent);padding:18px 20px;width:248px;max-width:48%}
.hero-card h3,.hero-card .hc-meta{white-space:normal}
.hero-card h3{font-family:'DM Sans';font-size:19px;margin:8px 0 12px}
.hero-card .hc-city{font-family:'Inter';font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--accent-dark)}
.hero-card .hc-meta{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:14px;font-family:'Inter',sans-serif;font-size:11.5px;color:#55535e}
.hero-card .hc-meta i{color:var(--gris-clair);font-style:normal}
.hero-card .hc-rate{font-weight:800;color:var(--accent-dark);font-size:12.5px}
.hero-card .hc-cta{display:inline-block;font-family:'DM Sans';font-weight:700;font-size:13px;color:#fff;
background:var(--accent);border:2px solid var(--encre);border-radius:9px;padding:7px 14px;box-shadow:3px 4px 0 var(--accent-dark)}
/* 3 fiches qui flottent, lisibles, légère superposition */
.hc3{top:0;right:18px;z-index:1;transform:rotate(4deg);opacity:.9;animation:floaty2 7s ease-in-out infinite}
.hc2{top:96px;left:0;z-index:2;transform:rotate(-5deg);opacity:.95}
.hc1{top:172px;right:0;z-index:3;transform:rotate(-1deg);animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:rotate(-1deg) translateY(0)}50%{transform:rotate(-1deg) translateY(-9px)}}
@keyframes floaty2{0%,100%{transform:rotate(4deg) translateY(0)}50%{transform:rotate(4deg) translateY(7px)}}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-visual{display:none}}
.hstat b{display:inline-block;transition:transform .2s}
.hero-stats .hstat:hover b{transform:translateY(-3px)}
/* cartes : survol doux */
.card{transition:transform .16s ease, box-shadow .16s ease}
.card:hover{transform:translate(-2px,-3px);box-shadow:6px 8px 0 var(--encre)}
/* barres du tableau de bord : remplissage animé */
.bar-fill{transform-origin:left;animation:barGrow .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
.hero-eyebrow{font-family:'DM Sans';font-weight:700;font-size:13px;letter-spacing:3px;color:var(--accent-light)}
.hero h1{font-family:'DM Sans';font-weight:700;font-size:46px;line-height:1.05;letter-spacing:-1.5px;margin:12px 0 14px;text-wrap:balance}
.hero p#heroSub{font-family:'Inter';font-size:16px;color:#D9D7CE;max-width:540px;line-height:1.5;margin:0}
.hero-stats{display:flex;gap:34px;flex-wrap:wrap;margin:24px 0 26px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-ctas .btn.ghost{background:transparent;color:var(--papier);border-color:var(--papier);box-shadow:4px 5px 0 var(--accent)}
.hero-ctas .btn.ghost:hover{background:rgba(255,255,255,.08)}
.hstat b{font-family:'DM Sans';font-weight:700;font-size:34px;color:#fff;display:block;line-height:1}
.hstat span{font-family:'Inter';font-size:13px;color:#9A9AA2}
@media(max-width:640px){.hero h1{font-size:34px}}
/* ===== Bande logos écoles ===== */
.logos{background:#fff;border-bottom:2px solid var(--gris-clair);padding:34px 0}
.logos-title{text-align:center;font-family:'Inter';font-size:12px;font-weight:600;letter-spacing:1px;
text-transform:uppercase;color:var(--gris);margin:0 0 16px}
.logos-marquee{overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logos-track{display:flex;gap:20px;width:max-content;animation:logoscroll 30s linear infinite;padding:6px 2px}
.logos-marquee:hover .logos-track{animation-play-state:paused}
@keyframes logoscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* logo seul, sans carte · recoloré en violet (silhouette via masque) */
.logo-chip{flex:none;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 28px}
.logo-chip .logo-img{display:block;height:84px;width:230px;background:var(--accent);
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
-webkit-mask-size:contain;mask-size:contain;transition:background .15s}
.logo-chip:hover .logo-img{background:var(--accent-dark)}
/* fallback (école sans logo) : petite carte cel-shading */
.logo-chip:not(.has-logo){border:2px solid var(--encre);border-radius:12px;padding:8px 16px 8px 8px;
background:#fff;box-shadow:3px 4px 0 var(--encre)}
.logo-chip .lmono{width:34px;height:34px;border-radius:8px;background:var(--encre);color:#fff;
display:flex;align-items:center;justify-content:center;font-family:'DM Sans';font-weight:700;font-size:14px}
.logo-chip .lname{font-family:'DM Sans';font-weight:700;font-size:15px;color:var(--encre);white-space:nowrap}
/* ===== Tableau de bord (KPIs) ===== */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.kpi{background:#fff;border:2px solid var(--encre);border-radius:14px;box-shadow:4px 5px 0 var(--encre);padding:18px}
.kpi b{font-family:'DM Sans';font-weight:700;font-size:30px;display:block;line-height:1;color:var(--encre)}
.kpi span{font-family:'Inter';font-size:13px;color:#4A4A52;display:block;margin-top:6px}
.kpi small{display:block;margin-top:4px;font-size:12px;color:var(--accent-dark);font-weight:600}
.bar-row{display:flex;align-items:center;gap:12px;padding:8px 8px;border-radius:10px;transition:background .15s}
.bar-row:hover{background:#FBF5FC}
.bar-rank{flex:0 0 24px;height:24px;border-radius:50%;background:var(--gris-clair);color:var(--encre);
font-family:'DM Sans';font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center}
.bar-row:first-child .bar-rank{background:var(--encre);color:#fff}
.bar-l{flex:0 0 92px;font-size:13.5px;font-weight:700;font-family:'DM Sans';white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{flex:1;height:13px;background:#ECEAE2;border-radius:8px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--accent-dark),var(--accent));border-radius:8px}
.bar-n{flex:0 0 36px;text-align:center;font-weight:700;font-family:'DM Sans';font-size:13px;color:var(--accent-dark);
background:#F6E6FA;border-radius:8px;padding:3px 0}
/* carte + villes côte à côte */
.map-panel{display:flex;gap:24px;align-items:center;flex-wrap:wrap;position:relative;overflow:hidden;border-radius:14px}
.map-left{flex:1 1 360px;min-width:280px;position:relative;z-index:1;margin-right:-70px}
.map-right{flex:1 1 300px;min-width:260px;padding-left:24px;position:relative;z-index:2}
@media(max-width:780px){.map-left{margin-right:0}.map-right{padding-left:0;border-top:2px solid var(--gris-clair);padding-top:16px}}
/* pastilles carte : pop + survol */
.g-dot{animation:dotPop .5s cubic-bezier(.2,1.3,.4,1) both;transform-box:fill-box;transform-origin:center;transition:transform .18s cubic-bezier(.2,1.3,.4,1);cursor:pointer}
@keyframes dotPop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
.g-dot:hover,.g-dot.hi{transform:scale(1.22)}
.g-dot.hi circle:last-of-type{stroke:var(--accent-dark);stroke-width:3.5}
.g-dot.hi text:first-of-type{font-size:15px}
/* surbrillance ligne "Par ville" liée à la carte */
.bar-row.hi{background:#F3E1F8;box-shadow:inset 3px 0 0 var(--accent)}
.bar-row.hi .bar-fill{filter:saturate(1.15) brightness(1.05)}
.bar-row.hi .bar-n{background:var(--accent);color:#fff}
/* cartes KPI : apparition + survol */
.kpi{animation:fadeUp .5s both;transition:transform .15s ease, box-shadow .15s ease}
.kpi:hover{transform:translate(-2px,-3px);box-shadow:6px 8px 0 var(--accent)}
.kpis .kpi:nth-child(1){animation-delay:.03s}.kpis .kpi:nth-child(2){animation-delay:.07s}
.kpis .kpi:nth-child(3){animation-delay:.11s}.kpis .kpi:nth-child(4){animation-delay:.15s}
.kpis .kpi:nth-child(5){animation-delay:.19s}.kpis .kpi:nth-child(6){animation-delay:.23s}
.kpis .kpi:nth-child(7){animation-delay:.27s}.kpis .kpi:nth-child(8){animation-delay:.31s}
/* bouton suppression logo */
.logo-chip .lx{border:none;background:none;color:var(--no);font-size:18px;font-weight:700;cursor:pointer;line-height:1;padding:0 0 0 4px}
/* ===== Gestion des écoles / logos (admin) ===== */
.part-grid{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.part-card{display:flex;align-items:center;gap:10px;border:2px solid var(--encre);border-radius:12px;
padding:7px 10px 7px 7px;background:var(--papier);box-shadow:3px 4px 0 var(--encre)}
.part-card .lmono{width:36px;height:36px;flex:none;border-radius:9px;background:var(--encre);color:#fff;
display:flex;align-items:center;justify-content:center;font-family:'DM Sans';font-weight:700;font-size:14px}
.part-card .part-logo{width:36px;height:36px;flex:none;object-fit:contain;border-radius:9px;background:#fff;border:1.5px solid var(--gris-clair);padding:3px}
.part-card .lname{font-family:'DM Sans';font-weight:600;font-size:14px;color:var(--encre);white-space:nowrap}
.part-card .part-act{border:1.5px solid var(--encre);background:#fff;border-radius:8px;font-size:12px;font-weight:600;
font-family:'Inter';padding:4px 9px;cursor:pointer;color:var(--encre)}
.part-card .part-act:hover{background:var(--papier)}
.part-card .part-del{border:none;background:none;color:var(--no);cursor:pointer;display:flex;align-items:center;padding:3px}
/* ===== Gantt v2 : colonne gauche figée + timeline scrollable ===== */
.gantt-wrap{display:flex;overflow:hidden;max-height:none;align-items:stretch}
.g2-left{flex:0 0 210px;border-right:2px solid var(--encre);background:#fff;z-index:2}
.g2-right{flex:1 1 auto;overflow-x:auto;overflow-y:hidden}
.g2-corner{height:44px;display:flex;align-items:center;padding:0 14px;font-family:'DM Sans';
font-weight:700;font-size:13px;background:var(--papier);border-bottom:2px solid var(--encre)}
.g2-lrow{height:54px;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 12px;
border-bottom:1px solid var(--gris-clair);font-size:13px;font-weight:600}
.g2-lrow span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g2-lrow small{color:var(--accent-dark);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g2-lrow.create{color:var(--accent-dark);font-weight:700;border-top:2px dashed var(--accent)}
.g2-head{position:relative;height:44px;border-bottom:2px solid var(--encre)}
.g2-months{position:relative;height:22px}
.g2-days{position:relative;height:22px;border-top:1px solid var(--gris-clair)}
.g2-trow{position:relative;height:54px;border-bottom:1px solid var(--gris-clair)}
.g2-trow.create{border-top:2px dashed var(--accent);cursor:crosshair;
background:repeating-linear-gradient(45deg,#faf5fb,#faf5fb 10px,#fff 10px,#fff 20px)}
/* ===== Bascule Missions / Formateurs ===== */
.vmode{display:flex;width:fit-content;gap:6px;background:#fff;border:2px solid var(--encre);border-radius:14px;
padding:5px;box-shadow:3px 4px 0 var(--encre);margin:0 auto 26px}
.vmode button{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;cursor:pointer;
font-family:'DM Sans';font-weight:700;font-size:14px;color:var(--encre);padding:9px 16px;border-radius:10px;transition:.15s}
.vmode button svg{opacity:.8}
.vmode button:hover{background:#F6EEF8}
.vmode button.on{background:var(--accent);color:#fff;box-shadow:2px 2px 0 var(--encre)}
.roster-note{font-size:13px;color:#5b5563;margin:-8px 0 18px;max-width:680px}
/* ===== Carrousel "sélection de personnage" (coverflow) ===== */
.cf{display:flex;align-items:center;gap:10px;margin:6px auto 0;max-width:1240px}
.cf-viewport{flex:1;min-width:0;overflow:hidden;height:500px;perspective:1700px}
.cf-track{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.cf-slide{position:absolute;left:50%;top:50%;width:min(600px,56vw);backface-visibility:hidden;
transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .5s ease}
.cf-slide.center{z-index:50}
.cf-slide.side{cursor:pointer}
.cf-slide.side *{pointer-events:none}
.cf-slide .cfp-badges{flex-wrap:nowrap;overflow:hidden}
.cf-slide .cfp-stats{flex-wrap:nowrap;overflow:hidden}
@media(max-width:760px){.cf-viewport{height:480px}.cf-slide{width:82vw}}
.cf-card{flex:0 0 168px;width:168px;cursor:pointer;background:#fff;border:2.5px solid var(--encre);
border-radius:18px;padding:16px;box-shadow:5px 6px 0 var(--encre);text-align:center;
transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .42s,box-shadow .2s}
.cf-av{width:150px;margin:0 auto 12px;filter:drop-shadow(0 6px 10px rgba(28,28,34,.10))}
.cf-eyebrow{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
color:var(--accent-dark);background:#F6E6FA;border-radius:999px;padding:3px 10px}
.cf-pseudo{display:block;font-family:'DM Sans';font-weight:800;font-size:21px;margin:9px 0 2px;line-height:1.1}
.cf-zone{display:block;font-size:13px;color:var(--gris);font-weight:600}
.cf-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px}
.cf-tags span{font-size:11px;font-weight:700;background:#F1E3F7;color:#6E157A;
border:1.5px solid #DDBDE8;border-radius:999px;padding:3px 9px}
.cf-card{position:relative}
/* carte sélectionnée : mise en avant DOUCE · ombre diffuse + fin trait d'accent (pas d'arcade) */
.cf-card.is-center{box-shadow:5px 6px 0 var(--encre), 0 16px 34px rgba(28,28,34,.14)}
.cf-card.is-center{padding-bottom:22px}
.cf-card.is-center::after{content:"";position:absolute;left:50%;bottom:9px;transform:translateX(-50%);
width:38px;height:3px;border-radius:3px;background:var(--accent)}
/* minimalisme : sur les cartes latérales on ne montre que pseudo + zone */
.cf-card:not(.is-center) .cf-eyebrow,
.cf-card:not(.is-center) .cf-tags{display:none}
.cf-arrow{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--gris-clair);
background:#fff;color:var(--encre);cursor:pointer;display:flex;align-items:center;justify-content:center;
box-shadow:0 6px 16px rgba(28,28,34,.10);transition:.16s}
.cf-arrow:hover{border-color:var(--encre);transform:translateY(-2px);box-shadow:0 10px 22px rgba(28,28,34,.14)}
.cf-dots{display:flex;gap:8px;justify-content:center;margin-top:8px;color:var(--gris);font-size:13px;font-weight:700;letter-spacing:.3px}
.cf-dot{width:8px;height:8px;border-radius:50%;border:0;background:var(--gris-clair);cursor:pointer;padding:0;transition:.16s}
.cf-dot.on{background:var(--accent);transform:scale(1.35)}
/* ===== Panneau "compétences" du profil sélectionné · carte cel-shading CLAIRE, allégée ===== */
.cf-panel{margin-top:22px;background:#fff;border:2.5px solid var(--encre);border-radius:20px;
padding:24px 28px;box-shadow:6px 7px 0 var(--encre);position:relative}
.cfp-main{width:100%}
.cfp-head{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.cfp-cta{font-size:14px;padding:12px 18px;white-space:nowrap}
.cfp-badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent-dark);
background:#F6E6FA;border-radius:999px;padding:4px 12px}
.cfp-sub{font-size:13.5px;color:var(--gris);font-weight:600;margin-top:7px}
.cf-panel .skill{display:flex;align-items:center;gap:12px;margin:9px 0}
.skl-l{flex:0 0 130px;font-size:12.5px;font-weight:700;color:var(--encre);text-align:right}
.skl-bar{flex:1;height:12px;background:#ECEAE2;border-radius:7px;overflow:hidden}
.skl-bar i{display:block;height:100%;width:0;border-radius:7px;
background:linear-gradient(90deg,var(--accent-dark),var(--accent));transition:width .7s cubic-bezier(.22,1,.36,1)}
.skl-lvl{flex:0 0 116px;font-size:12.5px;font-weight:700;text-align:left}
.lvl-expert{color:#6E157A}
.lvl-confirme{color:#9A1FA8}
.lvl-avance{color:#B255BE}
.lvl-intermediaire{color:#8A8A92}
.cfp-legend{margin-top:14px;font-size:11.5px;color:var(--gris)}
@media(max-width:680px){.skl-l{flex-basis:92px}.skl-lvl{flex-basis:96px}.cf-panel{padding:20px}}
/* CTA principal du panneau = accent magenta le plus fort */
.cfp-cta{font-size:14px;padding:12px 18px}
/* Barre de filtres repliable */
.filters-bar{display:flex;justify-content:flex-end;margin-bottom:14px}
.filters.collapsed{display:none}
.filters-quick{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
/* Barre de recherche flottante (reste visible en descendant vers les résultats) */
#formateursBlock .filters-quick{position:sticky;top:86px;z-index:40;background:var(--papier);padding:12px 0 12px;margin-bottom:14px;box-shadow:0 8px 16px -10px rgba(28,28,34,.3)}
.filters-quick .fq-search{flex:1;min-width:220px}
.filters-quick input,.filters-quick select{font:inherit;font-size:14px;padding:10px 12px;border:2px solid var(--encre);border-radius:10px;background:#fff;color:var(--encre)}
.estim{font-size:12.5px;color:#4A4A52;margin-top:8px;background:var(--papier);border-radius:9px;padding:7px 10px}
.estim b{color:var(--encre);font-weight:700}
.comp{font-size:12.5px;color:var(--accent-dark);margin-top:8px;font-weight:600}
.comp span{background:#F6E6FA;border-radius:6px;padding:2px 8px;margin-right:7px;font-size:10px;letter-spacing:.6px;text-transform:uppercase}
/* Infos profil enrichies (panneau) */
.cfp-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.cfp-meta span{font-size:12.5px;color:#4A4A52;background:var(--papier);border:1.5px solid var(--gris-clair);border-radius:999px;padding:4px 11px}
.cfp-meta b{color:var(--encre)}
/* Grille formateurs (parcours efficace, carrousel = mise en avant) */
.fgrid-h{font-family:'DM Sans';font-weight:700;font-size:15px;margin:34px 0 14px;color:var(--encre)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.fgrid-card{cursor:pointer;background:#fff;border:2px solid var(--encre);border-radius:16px;padding:14px;text-align:center;
box-shadow:4px 5px 0 var(--encre);transition:transform .14s,box-shadow .14s}
.fgrid-card:hover{transform:translate(-2px,-2px);box-shadow:6px 7px 0 var(--accent)}
.fgrid-card.sel{box-shadow:6px 7px 0 var(--accent);border-color:var(--accent-dark)}
.fgrid-av{width:96px;margin:0 auto 10px}
.fgrid-card b{display:block;font-family:'DM Sans';font-size:15px}
.fgrid-card small{color:var(--gris);font-size:12.5px}
.fgrid-card .fg-dom{margin-top:8px;font-size:11px;color:#6E157A}
/* Suivi des candidatures (modal) */
.suivi-grid{display:flex;flex-direction:column;gap:10px;margin-top:16px;max-height:320px;overflow:auto}
.suivi-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:2px solid var(--gris-clair);border-radius:12px;padding:10px 14px}
.suivi-row b{display:block;font-family:'DM Sans';font-size:14.5px}
.suivi-row small{color:var(--gris);font-size:12.5px}
/* Bande « pourquoi nous » */
.why{max-width:1120px;margin:0 auto;padding:8px 28px 8px}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:760px){.why-grid{grid-template-columns:1fr}}
.why-item{background:#fff;border:2px solid var(--encre);border-radius:16px;padding:22px;box-shadow:5px 6px 0 var(--encre)}
.why-item .why-ic{width:40px;height:40px;border-radius:11px;background:var(--papier);border:2px solid var(--encre);
display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.why-item h3{font-family:'DM Sans';font-size:17px;margin:0 0 6px}
.why-item p{font-size:14px;color:#4A4A52;line-height:1.5;margin:0}
/* Pied de page */
.site-foot{background:var(--encre);color:var(--papier);margin-top:56px;border-top:4px solid var(--accent)}
.foot-inner{max-width:1320px;margin:0 auto;padding:42px 28px 28px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;box-sizing:border-box}
@media(max-width:760px){.foot-inner{grid-template-columns:1fr;gap:22px}}
.site-foot .word{font-family:'DM Sans';font-weight:500;font-size:22px;letter-spacing:-1px;color:var(--papier)}
.site-foot .word b{font-weight:700}
.site-foot p{font-size:13.5px;color:#C9C7BE;line-height:1.55;margin:10px 0 0;max-width:320px}
.foot-col h4{font-family:'DM Sans';font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--accent-light);margin:0 0 12px}
.foot-col a,.foot-col span{display:block;color:#D9D7CE;font-size:14px;margin-bottom:9px}
.foot-col a:hover{color:#fff}
.foot-bottom{border-top:1px solid #34343C;padding:16px 28px;text-align:center;font-size:12.5px;color:#9A9AA2;max-width:1320px;margin:0 auto;box-sizing:border-box}
/* ===== Pile d'avatars anonymes sur les cartes mission ===== */
.foot-l{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ava-stack{display:inline-flex;align-items:center}
.ava-mini{width:26px;height:26px;margin-left:-9px;border-radius:7px;overflow:hidden;
box-shadow:0 0 0 2px #fff;display:inline-block}
.ava-mini:first-child{margin-left:0}
.ava-more{margin-left:6px;font-size:12px;font-weight:700;color:var(--accent-dark)}
/* ===== Admin : vitrine formateurs ===== */
.fm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(390px,1fr));gap:16px;margin-top:18px}
.fm-card{display:flex;gap:16px;background:#fff;border:2px solid var(--encre);border-radius:16px;
padding:16px;box-shadow:4px 5px 0 var(--encre);opacity:.66;transition:opacity .15s,box-shadow .15s}
.fm-card.on{opacity:1;box-shadow:5px 6px 0 var(--accent)}
.fm-av{flex:0 0 70px;width:70px;align-self:flex-start}
.fm-body{flex:1;min-width:0}
.fm-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.fm-priv{flex:1;font-size:12px;color:var(--gris);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm-fields{display:flex;flex-direction:column;gap:8px}
.fm-fields .field label{font-size:11.5px}
.fm-row2{display:flex;gap:8px;flex-wrap:wrap}
.fm-row2 .field{flex:1;min-width:90px}
.ecole-pill{display:inline-flex;align-items:center;gap:6px}
.ecole-logo{height:18px;width:auto;max-width:46px;object-fit:contain;vertical-align:middle;display:inline-block}
.fm-actions{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.fm-meta{font-size:12px;color:var(--accent-dark);font-weight:600}
.switch{position:relative;display:inline-block;width:46px;height:26px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#D8D4CC;border:2px solid var(--encre);border-radius:999px;cursor:pointer;transition:.15s}
.slider:before{content:"";position:absolute;width:14px;height:14px;left:4px;top:3px;background:#fff;border:2px solid var(--encre);border-radius:50%;transition:.15s}
.switch input:checked+.slider{background:var(--accent)}
.switch input:checked+.slider:before{transform:translateX(20px)}
.lnk{background:none;border:0;color:var(--accent-dark);font-weight:700;font-size:14px;cursor:pointer;text-decoration:underline;padding:0 0 0 4px}
.navpill{display:inline-flex;min-width:18px;height:18px;padding:0 5px;align-items:center;justify-content:center;
background:var(--accent);color:#fff;border-radius:999px;font-size:11px;font-weight:700;margin-left:4px}
/* Demandes (leads) */
.dem-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px;margin-top:16px}
.dem-card{background:#fff;border:2px solid var(--encre);border-radius:16px;padding:16px;box-shadow:4px 5px 0 var(--encre)}
.dem-card.neuf{box-shadow:5px 6px 0 var(--accent)}
.dem-top{display:flex;align-items:center;gap:12px}
.dem-av{flex:0 0 46px;width:46px}
.dem-top b{font-family:'DM Sans';font-weight:700;font-size:15px;display:block}
.dem-zone{font-size:12px;color:var(--gris)}
.dem-flag{margin-left:auto;font-size:11px;font-weight:700;background:#F6E6FA;color:var(--accent-dark);border-radius:999px;padding:3px 10px}
.dem-flag.done{background:#E7F6EC;color:#1B7A43}
.dem-dom{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.dem-dom span{font-size:11px;font-weight:600;background:#F4EEF9;color:var(--accent-dark);border:1.5px solid #EBD6F2;border-radius:999px;padding:2px 8px}
.dem-contact{font-size:13px;margin:6px 0}
.dem-msg{font-size:13px;color:#4A4A52;background:var(--papier);border-radius:10px;padding:8px 10px;margin-top:6px}
.dem-actions{display:flex;align-items:center;gap:8px;margin-top:12px}
.dem-actions small{color:var(--gris)}
/* ===== Mode tableau éditable (admin cours) ===== */
.xls-wrap{overflow:auto;border:2px solid var(--encre);border-radius:14px;box-shadow:4px 5px 0 var(--encre);background:#fff;max-height:70vh}
table.xls{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
table.xls thead th{position:sticky;top:0;z-index:2;background:var(--encre);color:#fff;text-align:left;padding:10px 10px;font-weight:700;white-space:nowrap}
table.xls tbody td{padding:5px 8px;border-bottom:1px solid #E5E7EB;border-right:1px solid #F1F1F4}
table.xls tbody tr:nth-child(even){background:#FAF7FB}
table.xls tbody tr:hover{background:#F6ECFA}
.tcell{border:1px solid transparent;background:transparent;border-radius:7px;padding:6px 8px;font:inherit;color:var(--encre)}
.tcell:hover{border-color:#E3D6EC;background:#fff}
.tcell:focus{outline:2px solid #C026D3;background:#fff}
table.xls select.tcell{cursor:pointer}
/* ===== Tableau cours : pleine largeur, sans ascenseur horizontal ===== */
table.xls{table-layout:fixed}
.xls-wrap{overflow-x:hidden;overflow-y:auto}
/* Mobile : les tableaux larges deviennent défilables horizontalement (au lieu de s'écraser) */
@media(max-width:760px){
.xls-wrap{overflow-x:auto}
table.xls{table-layout:auto;min-width:680px}
table.xls colgroup{display:none}
}
table.xls td{overflow:hidden}
.tcell{width:100%;box-sizing:border-box}
table.xls input[type=date].tcell,table.xls input[type=number].tcell{font-size:12px;padding:6px 4px}
table.xls thead th{padding:10px 8px;font-size:12px}
.xls-det{padding:4px 6px;font-weight:700;line-height:1}
/* Bouton segmenté Cartes / Tableau */
#coursViewSwitch{display:inline-flex;border:2px solid var(--encre);border-radius:10px;overflow:hidden;box-shadow:2px 2px 0 var(--encre);height:fit-content}
#coursViewSwitch button{border:0;background:#fff;padding:9px 16px;font-weight:700;cursor:pointer;color:var(--encre);font-size:13px}
#coursViewSwitch button+button{border-left:2px solid var(--encre)}
#coursViewSwitch button.on{background:var(--encre);color:#fff}
/* Onglet cours : laisser la place au sélecteur Cartes/Tableau */
#tab-cours .filters-quick .fq-search{flex:1 1 240px}
#coursViewSwitch{flex-shrink:0}
/* ===== Carte cours admin (épurée) ===== */
.ccard{background:#fff;border:1.5px solid #ECE6E0;border-radius:16px;box-shadow:0 2px 10px rgba(20,18,16,.05);padding:18px 20px;margin-bottom:14px;transition:box-shadow .15s ease,transform .15s ease}
.ccard:hover{box-shadow:0 8px 22px rgba(20,18,16,.10);transform:translateY(-1px)}
.ccard-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.ccard-info{min-width:0;flex:1}
.ccard-title{margin:0;font-size:18px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.25}
.ccard-sub{margin:6px 0 10px;color:var(--gris);font-size:13px}
.ccard .meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ccard-line{margin:7px 0 0;font-size:13px}
.muted2{color:var(--gris)}
.status.muted{background:#EEF0F2;color:#4B5563}
.ccard-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.ca{border:1px solid #E4DED7;background:#F7F4F0;color:var(--encre);border-radius:9px;padding:7px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s}
.ca:hover{background:#fff;border-color:#C9BFB4}
.ca.del{color:#C0392B;border-color:#F0D2CD;background:#FCF1EF}
.ca.del:hover{background:#F6DED9;border-color:#E0A99F}
.ca.solid{background:var(--encre);color:#fff;border-color:var(--encre)}
.ca.solid:hover{background:#2a2622}
/* barre de relance groupée des contrats */
.ctr-relance{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px;padding:11px 14px;background:#fff;border:2px solid var(--encre);border-radius:13px;box-shadow:4px 4px 0 rgba(192,38,211,.14)}
.ctr-relance .cr-info{font-weight:700;color:var(--encre);font-size:13.5px}
.ctr-relance .btn.sm:disabled{opacity:.5;cursor:not-allowed}
.ctr-relance .cr-hint{font-size:12px;color:var(--gris);flex-basis:100%}
.xls thead th input[type=checkbox],.xls td input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
/* panneau cohérence dates ↔ heures */
.datecheck{margin:0 0 18px;padding:16px 18px;background:#FFFBEB;border:2px solid #F59E0B;border-radius:14px;box-shadow:5px 5px 0 rgba(245,158,11,.18)}
.datecheck .dc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.datecheck .dc-title{margin:0;color:#92400E;font-size:16px}
.datecheck .dc-sub{margin:4px 0 0;color:#a16207;font-size:12.5px}
.datecheck .dc-bad{color:#B45309;font-weight:700;text-decoration:line-through}
.datecheck .dc-good{color:#166534;font-weight:700}
.datecheck .dc-ferie{color:#92400E;font-weight:600;font-style:italic}
.datecheck .dc-in{font:inherit;font-size:13px;padding:6px 8px;border:1.5px solid #D6CCBE;border-radius:8px;background:#fff;color:var(--encre);max-width:150px}
.datecheck .dc-in:focus{outline:none;border-color:#F59E0B;box-shadow:2px 2px 0 rgba(245,158,11,.18)}
.datecheck .dc-in.dc-h{width:70px}
.datecheck .dc-in-bad{border-color:#F0B27A;color:#B45309;font-weight:600}
.datecheck .dc-hwrap{display:inline-flex;align-items:baseline;gap:4px;font-weight:600}
.datecheck .dc-acts{display:flex;gap:7px;flex-wrap:wrap}
/* cloche admin : tâches à faire */
.bell-wrap{position:relative;display:inline-flex;align-items:center;margin-right:2px}
.bell-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1.5px solid #E2DAD0;border-radius:50%;background:#fff;color:var(--encre);cursor:pointer;box-shadow:0 1px 4px rgba(28,28,34,.08);transition:background .15s,border-color .15s}
.bell-btn:hover{background:#FAF3FB;border-color:var(--accent)}
.bell-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bell-btn.has{color:var(--accent-dark)}
.bell-badge{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;border:2.5px solid #fff}
.bell-menu{position:absolute;top:50px;right:0;width:340px;max-width:88vw;background:#fff;border:2px solid var(--encre);border-radius:14px;box-shadow:6px 8px 0 rgba(28,28,34,.18);padding:10px;z-index:200;display:none}
.bell-menu.show{display:block}
.bell-head{font-family:'DM Sans',sans-serif;font-weight:800;color:var(--encre);font-size:14px;padding:4px 6px 10px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #EEE7DD;margin-bottom:6px}
.bell-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:none;background:transparent;border-radius:10px;padding:10px 8px;cursor:pointer;font:inherit;color:var(--encre);transition:background .12s}
.bell-item:hover{background:#FAF3FB}
.bell-item .bi-ic{flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#FCE7F3;color:var(--accent-dark)}
.bell-item .bi-lbl{flex:1;font-size:13.5px;font-weight:600;line-height:1.3}
.bell-item .bi-n{flex:none;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--encre);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.bell-empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:#6c6c74;font-size:13px;padding:18px 10px}
.bell-empty svg{color:#22A06B}
.datecheck .btn.sm{background:linear-gradient(135deg,#F59E0B,#FBBF24);color:#1C1C22;border:2px solid #1C1C22}
.ccard-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid #EFEAE4}
/* ============ Fiches formateurs · style « gaming » sombre ============ */
/* Cartes du carrousel */
.cf-card{width:168px;background:linear-gradient(165deg,#241f30,#14111d);border:1.5px solid #3a3147;border-radius:18px;box-shadow:0 12px 30px rgba(0,0,0,.40);color:#fff;padding:13px 11px 15px;text-align:center}
.cf-card .cf-av{width:92px;height:92px;margin:0 auto 9px;border-radius:14px;overflow:hidden;border:1.5px solid rgba(192,38,211,.45);box-shadow:0 0 22px rgba(192,38,211,.25),inset 0 0 0 1px rgba(255,255,255,.04)}
.cf-card .cf-av svg{width:100%;height:100%;display:block}
.cf-eyebrow{display:block;color:#c879ff;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;margin-bottom:2px}
.cf-pseudo{display:block;color:#fff;font-weight:800;font-size:14.5px;line-height:1.15}
.cf-zone{display:block;color:#c2b4dd;font-size:11.5px;margin:2px 0 8px}
.cf-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.cf-tags span{background:rgba(192,38,211,.16);border:1px solid rgba(192,38,211,.5);color:#ecccff;font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px}
.cf-card.is-center{border-color:#C026D3;box-shadow:0 0 0 2px rgba(192,38,211,.55),0 0 42px rgba(192,38,211,.45),0 20px 50px rgba(0,0,0,.55)}
/* Cartes de la grille */
.fgrid-card{background:linear-gradient(165deg,#241f30,#14111d);border:1.5px solid #3a3147;border-radius:18px;box-shadow:0 10px 24px rgba(0,0,0,.35);color:#fff;padding:16px 12px;text-align:center;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
.fgrid-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.45);border-color:#5a4d6e}
.fgrid-av{width:104px;height:104px;margin:0 auto 10px;border-radius:16px;overflow:hidden;border:1.5px solid rgba(192,38,211,.4);box-shadow:0 0 18px rgba(192,38,211,.22)}
.fgrid-av svg{width:100%;height:100%;display:block}
.fgrid-card b{color:#fff;font-size:15px}
.fgrid-card small{display:block;color:#cdbfe6;font-size:12.5px;margin-top:1px}
.fgrid-card .fg-dom{margin-top:8px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.fgrid-card .fg-dom span{color:#ecccff;background:rgba(192,38,211,.18);border:1px solid rgba(192,38,211,.5);font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:999px}
.fgrid-card .fg-meta{margin-top:8px;color:#cdbfe6;font-size:11.5px;font-weight:600}
.fgrid-card .fg-cta{margin-top:12px;width:100%;background:linear-gradient(90deg,#C026D3,#9b1fb0);border:0;color:#fff;font-weight:700;border-radius:10px;padding:9px 10px;font-size:12.5px;cursor:pointer;box-shadow:0 0 18px rgba(192,38,211,.4)}
.fgrid-card .fg-cta:hover{filter:brightness(1.08)}
.fgrid-card.sel{border-color:#C026D3;box-shadow:0 0 0 2px rgba(192,38,211,.5),0 0 30px rgba(192,38,211,.4)}
.fgrid-card:focus-visible{outline:3px solid #e05bff;outline-offset:2px}
/* Panneau détaillé (stats card) */
.cfp.gaming{background:linear-gradient(160deg,#1d1828,#0f0c17);border:1.5px solid #3a3147;border-radius:20px;box-shadow:0 20px 55px rgba(0,0,0,.45);color:#fff;padding:18px 22px;width:100%}
.cfp-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.cfp-id{display:flex;gap:16px;align-items:center}
.cfp-av{width:88px;height:88px;border-radius:18px;overflow:hidden;border:1.5px solid rgba(192,38,211,.55);box-shadow:0 0 26px rgba(192,38,211,.35);flex:none}
.cfp-av svg{width:100%;height:100%;display:block}
.cfp .cfp-badge{color:#c879ff;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:700}
.cfp-name{font-size:23px;font-weight:800;line-height:1.1;margin-top:2px}
.cfp-zone{color:#b6a8d2;font-size:13px}
.cfp .cfp-cta{background:linear-gradient(90deg,#C026D3,#9b1fb0);border:0;color:#fff;font-weight:700;border-radius:12px;padding:12px 20px;box-shadow:0 0 26px rgba(192,38,211,.5);cursor:pointer}
.cfp .cfp-cta:hover{filter:brightness(1.08)}
.cfp-stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.cfp-stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:7px 11px;font-size:13px;color:#e7def5}
.cfp-stat b{color:#fff}.cfp-stat small{color:#b6a8d2}
.cfp-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.cfp-badge-it{font-size:12px;padding:6px 11px;border-radius:999px;font-weight:600}
.cfp-badge-it.cert{background:rgba(245,200,66,.14);border:1px solid rgba(245,200,66,.4);color:#f3d27a}
.cfp-badge-it.lang{background:rgba(99,179,237,.14);border:1px solid rgba(99,179,237,.4);color:#9ecbf2}
.cfp-badge-it.sect{background:rgba(192,38,211,.14);border:1px solid rgba(192,38,211,.4);color:#ecccff}
.cfp-grid{display:grid;grid-template-columns:210px 1fr;gap:22px;margin-top:16px;align-items:center}
@media(max-width:680px){.cfp-grid{grid-template-columns:1fr;gap:14px}}
.cfp-radar{display:flex;justify-content:center}
.cfp .cfp-skills{background:none;padding:0}
.cfp-skh{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#b6a8d2;margin-bottom:12px;font-weight:700}
.cfp .skill{display:grid;grid-template-columns:130px 1fr 86px;gap:10px;align-items:center;margin:6px 0}
.cfp .skl-l{color:#dcd2ec;font-size:13px;text-align:left}
.cfp .skl-bar{height:9px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden}
.cfp .skl-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#9b1fb0,#e05bff);box-shadow:0 0 12px rgba(224,91,255,.6);transition:width .9s cubic-bezier(.22,1,.36,1)}
.cfp .skl-lvl{font-size:12px;font-weight:700;text-align:right}
.cfp .lvl-expert{color:#e05bff}.cfp .lvl-confirme{color:#c879ff}.cfp .lvl-avance{color:#b29ad8}.cfp .lvl-intermediaire{color:#8b9bb5}
.cfp-legend{color:#8a7da6;font-size:11px;margin-top:14px}
/* Radar */
.radar{width:210px;height:auto;max-width:100%}
.rdr-bg{fill:rgba(255,255,255,.03)}
.rdr-ring{fill:none;stroke:rgba(255,255,255,.10);stroke-width:1}
.rdr-axis{stroke:rgba(255,255,255,.12);stroke-width:1}
.rdr-poly{fill:rgba(224,91,255,.22);stroke:#e05bff;stroke-width:2}
.rdr-dot{fill:#fff;stroke:#e05bff;stroke-width:1.5}
.rdr-lbl{fill:#ddd2ee;font-size:11px;font-weight:600}
/* Icônes SVG vectorielles (panneau formateur + admin) */
.cfp .ic{width:13px;height:13px;vertical-align:-2px;margin-right:4px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cfp .ic.fill{fill:currentColor;stroke:none}
.xls-det .ic{width:16px;height:4px;display:block}
.xls-det svg circle{fill:currentColor}
/* Mini-brief de cours dans une demande (admin) */
.dem-brief{margin-top:8px;font-size:13px;background:#F6ECFA;border:1px solid #E3D6EC;color:#5b2a6b;border-radius:8px;padding:7px 10px}
/* ===== Pop-up cel-shading : envoi de contrat ===== */
.csm-eyebrow{display:inline-block;color:#C026D3;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:800}
.csm-title{margin:6px 0 4px;font-size:22px;font-weight:800;color:var(--encre);line-height:1.15}
.csm-sub{color:var(--gris);font-size:13px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.csm-eco{display:inline-flex;align-items:center;gap:5px;background:#FEF9C3;border:1px solid #FDE68A;color:#854D0E;border-radius:999px;padding:2px 9px;font-weight:600}
.csm-eco img{height:14px;border-radius:3px}
.csm-tel{margin:12px 0 0;font-size:13px;color:var(--encre)}
.csm-note{margin-top:14px;background:#F6ECFA;border:1.5px solid #E3D6EC;color:#5b2a6b;border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.5}
.csm .form-row{margin-top:14px}
/* Menu utilisateur (espace formateur) */
.um-btn{display:inline-flex;align-items:center;gap:7px}
.um-ic{width:17px;height:17px}
.um-chev{width:14px;height:14px;opacity:.7}
.usermenu{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;background:#fff;border:2px solid var(--encre);border-radius:12px;box-shadow:4px 5px 0 var(--encre);padding:6px;z-index:50}
.usermenu-item{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;text-align:left;font:inherit;font-size:14px;font-weight:600;color:var(--encre);padding:10px 10px;border-radius:8px;cursor:pointer}
.usermenu-item:hover{background:#F6ECFA}
.usermenu-item svg{width:18px;height:18px;flex:none}
/* ===== Vue calendrier (espace formateur) ===== */
.vswitch{display:inline-flex;gap:4px;background:#fff;border:2px solid var(--encre);border-radius:12px;padding:4px;margin:4px 0 16px;box-shadow:3px 4px 0 var(--encre)}
.vswitch button{display:inline-flex;align-items:center;gap:6px;border:none;background:transparent;color:var(--encre);font-family:'DM Sans',sans-serif;font-weight:600;font-size:13px;padding:7px 14px;border-radius:8px;cursor:pointer}
.vswitch button.on{background:var(--encre);color:#fff}
#missionsCal{background:#fff;border:2px solid var(--encre);border-radius:16px;padding:16px;box-shadow:5px 5px 0 rgba(28,28,34,.10)}
.cal-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cal-head h3{margin:0;font-size:18px;text-transform:capitalize;min-width:150px;text-align:center;font-family:'DM Sans'}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;background:transparent}
.cal-dow{font-family:'DM Sans';font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--gris);text-align:center;padding:2px 0 6px}
.cal-cell{min-height:72px;background:var(--papier);border:1.5px solid var(--gris-clair);border-radius:10px;padding:5px 6px;display:flex;flex-direction:column;gap:3px;overflow:hidden;transition:border-color .12s}
.cal-cell.empty{background:transparent;border:none}
.cal-cell.today{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset;background:#fff}
.cal-num{font-size:12px;font-weight:700;color:var(--encre);font-family:'Inter'}
.cal-cell.today .cal-num{color:var(--accent-dark)}
.cal-ev{font-size:10.5px;line-height:1.2;color:#fff;border-radius:6px;padding:3px 6px;font-family:'Inter';font-weight:700;overflow:hidden;box-shadow:1px 1px 0 rgba(0,0,0,.18)}
.cal-leg{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--gris-clair)}
.cal-leg-t{font-family:'DM Sans';font-weight:700;font-size:12.5px;color:var(--encre);margin-right:2px}
.cal-leg-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-family:'Inter';color:var(--encre);background:#fff;border:1.5px solid var(--gris-clair);border-radius:999px;padding:4px 11px;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.cal-leg-chip:hover{border-color:var(--accent);box-shadow:2px 2px 0 rgba(192,38,211,.15)}
.cal-leg-chip.cur{border-color:var(--accent);background:#FCF2FE;font-weight:700}
.cal-leg-chip i{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}
.cal-leg-chip b{color:var(--gris);font-weight:700}
.cal-cell.cal-hl{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(192,38,211,.35);animation:calpulse 1.2s ease-in-out 2}
@keyframes calpulse{0%,100%{box-shadow:0 0 0 3px rgba(192,38,211,.35)}50%{box-shadow:0 0 0 6px rgba(192,38,211,.18)}}
@media(max-width:620px){.cal-cell{min-height:54px}.cal-ev{font-size:9px}.cal-num{font-size:11px}#missionsCal{padding:10px}}
/* école dans l'événement calendrier */
.cal-ev{display:block;white-space:normal}
.cal-ev-eco{display:block;font-size:9.5px;font-weight:500;opacity:.92;line-height:1.2;margin-top:1px}
/* ===== Accessibilité : cibles tactiles ≥44px sur mobile (filtres vitrine) ===== */
@media(max-width:760px){
.filters-quick .fq-search,
.filters-quick select{ min-height:44px; }
.fgrid-card .fg-cta{ min-height:44px; }
}
/* ===== Carte formateur : flip recto/verso + holographique (inspiré pokemon-cards-css) ===== */
.cfp-card{position:relative;width:100%;height:440px;transform-style:preserve-3d;transition:transform .14s ease}
.cf-slide.center .cfp-card{cursor:pointer}
.cf-slide.center .cfp-card.active{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.cfp-flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,.15,.2,1)}
.cfp-flip.flipped{transform:rotateY(180deg)}
.cfp-front,.cfp-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.cfp-back{transform:rotateY(180deg)}
.holo{position:absolute;inset:0;border-radius:20px;pointer-events:none;opacity:0;transition:opacity .3s;mix-blend-mode:screen;z-index:6;
background:
radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.5), rgba(255,255,255,0) 40%),
linear-gradient(115deg, transparent 26%, rgba(214,79,255,.3) 44%, rgba(120,90,255,.22) 53%, rgba(70,180,255,.3) 62%, transparent 78%);
background-size:170% 170%, 300% 300%;
background-position:var(--mx,50%) var(--my,50%), var(--mx,50%) var(--my,50%);}
.cf-slide.center .cfp-card.active .holo{opacity:.1}
@media(prefers-reduced-motion:reduce){.holo{display:none}.cf-slide.center .cfp-card.active{transform:none}}
.cfp-hint{position:absolute;left:0;right:0;bottom:9px;text-align:center;font-size:11px;color:#9183b0;letter-spacing:.3px}
/* Dos de carte */
.cfp-back{display:flex;flex-direction:column;gap:9px;padding:18px 22px}
.bk-head{border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:8px}
.bk-head .cfp-name{font-size:19px;font-weight:800}
.bk-sec h4{margin:0 0 5px;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:#b6a8d2;font-weight:700}
.bk-chips{display:flex;flex-wrap:wrap;gap:5px}
.bk-chip{font-size:11px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#e7def5}
.bk-chip.tech{background:rgba(192,38,211,.16);border-color:rgba(192,38,211,.42);color:#ecccff}
.bk-chip.cert{background:rgba(245,200,66,.14);border-color:rgba(245,200,66,.4);color:#f3d27a}
.bk-chip.met{background:rgba(99,179,237,.14);border-color:rgba(99,179,237,.4);color:#9ecbf2}
.bk-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bk-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;color:#b6a8d2;font-size:12px;padding-top:6px}
/* Tableau écoles partenaires : actions compactes qui tiennent sur la largeur */
.part-table td{vertical-align:middle}
.part-acts{display:flex;gap:6px;flex-wrap:nowrap;justify-content:flex-end;align-items:center}
.part-acts .ca{padding:6px 9px;font-size:12px;white-space:nowrap}
@media(max-width:900px){.part-acts{flex-wrap:wrap}}
/* État vide (espace formateur) */
.empty-state{grid-column:1/-1;text-align:center;background:#fff;border:2px dashed var(--gris-clair);border-radius:18px;padding:40px 24px}
.empty-state .es-ic{width:54px;height:54px;margin:0 auto 14px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--papier);color:var(--accent-dark)}
.empty-state .es-ic svg{width:28px;height:28px}
.empty-state h3{font-family:'DM Sans';font-size:18px;margin:0 0 6px;color:var(--encre)}
.empty-state p{color:#5b5563;font-size:14px;margin:0 0 16px}
/* ===== Hero amélioré ===== */
.hero{background:
radial-gradient(880px 520px at 86% 18%, rgba(160,46,196,.30), transparent 60%),
radial-gradient(680px 520px at 8% 92%, rgba(90,34,130,.24), transparent 62%),
var(--encre)}
.hero h1 .hl{color:#e463ff}
.hero-glow{position:absolute;right:-6%;top:-12%;width:62%;height:130%;z-index:0;pointer-events:none;
background:radial-gradient(circle at 68% 42%, rgba(192,38,211,.42), rgba(192,38,211,0) 60%);filter:blur(18px)}
.hero-trust{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 20px}
.hero-trust li{display:flex;align-items:center;gap:7px;font-size:13.5px;color:#D9D4DE;font-weight:500;white-space:nowrap}
.hero-trust li::before{content:"";width:16px;height:16px;border-radius:50%;flex:none;
background:rgba(228,99,255,.18);border:1.5px solid #e463ff;
-webkit-mask:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e463ff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:center;background-size:11px}
.scroll-cue{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:38px;height:38px;border-radius:50%;
display:flex;align-items:center;justify-content:center;color:var(--papier);background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.2);z-index:3;animation:cueBounce 1.8s ease-in-out infinite}
.scroll-cue svg{width:20px;height:20px}
@keyframes cueBounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(5px)}}
@media(max-width:760px){.scroll-cue{display:none}}
@media(prefers-reduced-motion:reduce){.scroll-cue{animation:none}}
/* Accroche italique du hero */
.hero-tag{margin:8px 0 0;font-family:'Inter',sans-serif;font-weight:600;font-size:14px;color:#e463ff;max-width:540px;line-height:1.4}
/* Positionnements : liste de candidats dans la cellule */
.pos-cand{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--gris-clair)}
.pos-cand .pos-c-id{flex:1 1 60%;min-width:0}
.pos-cand:last-child{border-bottom:none}
.pos-c-id{font-size:13px;color:var(--encre)}
.pos-c-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0}
.btn.xs{font-size:12px;padding:5px 10px;border-radius:8px;border:2px solid var(--encre);background:#fff;color:var(--encre);font-weight:700;cursor:pointer;box-shadow:2px 2px 0 var(--encre)}
.btn.xs:hover{filter:brightness(.97)}
.btn.xs.ok{background:#16a34a;color:#fff;border-color:#0f5132;box-shadow:2px 2px 0 #0f5132}
.btn.xs.ghost{background:var(--papier);color:var(--gris);box-shadow:2px 2px 0 rgba(28,28,34,.18)}
/* ===== Espace formateur : export agenda + signature groupée ===== */
.cal-export{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 14px;padding:12px 14px;background:#fff;border:2px solid var(--encre);border-radius:14px;box-shadow:4px 4px 0 rgba(28,28,34,.10)}
.cal-export .ce-lbl{font-family:'DM Sans';font-weight:700;color:var(--encre)}
.cal-export .ce-hint{font-size:12px;color:var(--gris);flex-basis:100%}
.sign-bar{position:sticky;top:8px;z-index:20;display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 14px;padding:10px 14px;background:linear-gradient(135deg,#1C1C22,#3A1140);color:#fff;border:2px solid var(--encre);border-radius:14px;box-shadow:4px 4px 0 rgba(192,38,211,.25)}
.sign-bar .sb-all{display:flex;align-items:center;gap:7px;font-weight:600;cursor:pointer}
.sign-bar .sb-count{font-size:13px;opacity:.9;margin-right:auto}
.sign-bar .btn.sm{background:linear-gradient(135deg,#C026D3,#E879F9);color:#fff;border:2px solid #fff}
.sign-bar .btn.sm:disabled{opacity:.5;cursor:not-allowed}
/* barre de filtres des missions */
.mfilters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:10px 12px;background:#fff;border:2px solid var(--encre);border-radius:14px;box-shadow:4px 4px 0 rgba(28,28,34,.10)}
.mf-search{display:flex;align-items:center;gap:8px;flex:1 1 240px;min-width:200px;background:#FAF7F2;border:1.5px solid var(--encre);border-radius:10px;padding:7px 11px}
.mf-search .ic{color:var(--gris);flex:none}
.mf-search input{border:none;background:transparent;outline:none;width:100%;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--encre)}
.mf-search input::placeholder{color:var(--gris)}
.mf-sel{font-family:'DM Sans',sans-serif;font-size:13.5px;font-weight:600;color:var(--encre);background:#fff;border:1.5px solid var(--encre);border-radius:10px;padding:8px 12px;cursor:pointer;box-shadow:2px 2px 0 rgba(28,28,34,.08)}
.mf-sel:focus{outline:none;border-color:var(--accent);box-shadow:2px 2px 0 rgba(192,38,211,.18)}
.mf-count{font-size:12.5px;font-weight:700;color:var(--gris);margin-left:auto}
.card-sel{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--accent-dark);cursor:pointer;user-select:none;background:#fff;border:1.5px solid var(--accent);border-radius:999px;padding:4px 11px;box-shadow:2px 2px 0 rgba(192,38,211,.12)}
.card-sel:hover{background:rgba(192,38,211,.06)}
.card-sel:has(input:checked){background:var(--accent);color:#fff}
.card-sel input{width:15px;height:15px;accent-color:#fff}
/* entête de vue : titre + bascule alignés */
.view-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.view-head .page-title{margin:0}
.view-head .subtitle{margin:4px 0 0}
.vswitch.compact button{padding:7px 12px;font-size:13px}
.bulk-list{margin:8px 0 14px;padding-left:18px;max-height:160px;overflow:auto;color:var(--encre);font-size:13.5px}
.bulk-list li{margin:3px 0}
.bulk-consent{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--encre);margin-top:6px;cursor:pointer}
.bulk-consent input{margin-top:2px;width:16px;height:16px;accent-color:var(--accent)}
.bulk-prev{font-size:12px;color:var(--accent);font-weight:700;text-decoration:none;margin-left:6px}
.bulk-prev:hover{text-decoration:underline}
#dashView .card .ecole-line{margin:8px 0}
#impersonateBar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px;padding:10px 16px;background:linear-gradient(135deg,#1C1C22,#3A1140);color:#fff;border:2px solid var(--encre);border-radius:12px;box-shadow:4px 4px 0 rgba(192,38,211,.25)}
#impersonateBar .btn.sm{background:#fff;color:var(--encre);border:2px solid var(--encre)}
.ic{vertical-align:-2px;flex-shrink:0}
.seo-world{filter:drop-shadow(0 1px 0 rgba(0,0,0,.04))}
.status.presta-ok{background:#DCFCE7;color:#166534;border:1px solid #86efac}
/* ===== Blog / Ressources (SEO) ===== */
.post-hero{background:
radial-gradient(880px 520px at 86% 18%, rgba(160,46,196,.30), transparent 60%),
radial-gradient(680px 520px at 8% 92%, rgba(90,34,130,.24), transparent 62%),
var(--encre);color:var(--papier);border-bottom:4px solid var(--accent)}
.post-hero .bar-inner{padding-top:42px;padding-bottom:38px}
.post-hero .eyebrow{font-family:'DM Sans';font-weight:700;letter-spacing:3px;font-size:12px;color:var(--accent-light)}
.post-hero h1{font-family:'DM Sans';font-weight:700;font-size:38px;line-height:1.12;letter-spacing:-1px;margin:10px 0 8px;max-width:840px}
.post-hero .meta{color:#C9C7BE;font-size:13px;font-family:'Inter'}
.post{max-width:760px;margin:0 auto;padding:34px 24px 64px;font-family:'Inter'}
.post .backlink{display:inline-block;margin-bottom:16px;color:var(--accent-dark);font-weight:700;text-decoration:none;font-family:'DM Sans'}
.post h2{font-family:'DM Sans';font-weight:700;font-size:22px;margin:30px 0 10px;color:var(--encre)}
.post p,.post li{font-size:16px;line-height:1.7;color:#33333a}
.post ul{padding-left:20px;margin:10px 0}
.post .lead{font-size:18px;color:#222;line-height:1.6}
.post .cta-box{margin:32px 0 0;background:var(--papier);border:1.5px solid var(--gris-clair);border-radius:16px;padding:22px}
.post .cta-box h3{font-family:'DM Sans';margin:0 0 8px;font-size:18px;color:var(--encre)}
.post .cta{display:inline-block;margin-top:8px;background:linear-gradient(90deg,#C026D3,#9b1fb0);color:#fff;font-weight:700;font-family:'DM Sans';padding:12px 20px;border-radius:12px;text-decoration:none;box-shadow:0 0 20px rgba(192,38,211,.35)}
.blog-grid{max-width:1120px;margin:0 auto;padding:32px 24px 64px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.blog-card{background:#fff;border:1.5px solid var(--gris-clair);border-radius:16px;padding:20px;box-shadow:4px 5px 0 var(--accent-dark);transition:transform .15s;display:flex;flex-direction:column}
.blog-card:hover{transform:translateY(-3px)}
.blog-card .tag{font-family:'Inter';font-size:11px;font-weight:700;letter-spacing:1px;color:var(--accent-dark);text-transform:uppercase;margin-bottom:8px}
.blog-card h3{font-family:'DM Sans';font-weight:700;font-size:18px;margin:0 0 8px;color:var(--encre);line-height:1.25}
.blog-card p{font-size:14px;color:#555;line-height:1.5;margin:0 0 14px;flex:1}
.blog-card a.more{color:var(--accent-dark);font-weight:700;text-decoration:none;font-size:14px;font-family:'DM Sans'}
@media(max-width:640px){.post-hero h1{font-size:28px}}
/* ===== Blog v2 : catégories, tags, FAQ, articles liés ===== */
.cat-chip{display:inline-block;background:var(--accent);color:#fff;font-family:'DM Sans';font-weight:700;font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:5px 12px;border-radius:20px}
.meta-row{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;color:#C9C7BE;font-size:13px;font-family:'Inter';margin-top:12px}
.meta-row .dot{opacity:.5}
.keypoints{background:var(--papier);border:1.5px solid var(--gris-clair);border-left:4px solid var(--accent);border-radius:12px;padding:16px 18px;margin:22px 0}
.keypoints h2{margin:0 0 8px;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent-dark)}
.keypoints ul{margin:0;padding-left:18px}.keypoints li{margin:5px 0;font-size:15px}
.tagrow{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0;align-items:center}
.tagrow .lbl{font-family:'Inter';font-size:12px;color:var(--gris);font-weight:700;text-transform:uppercase;letter-spacing:1px}
.tagchip{font-family:'Inter';font-size:12px;font-weight:700;color:var(--accent-dark);background:#faf0fc;border:1px solid #E6CDEF;border-radius:20px;padding:5px 12px;text-decoration:none}
.tagchip:hover{background:#f1d6f8}
.faq{margin:34px 0 0}
.faq h2{font-family:'DM Sans';font-size:22px;color:var(--encre);margin:0 0 12px}
.faq details{border:1.5px solid var(--gris-clair);border-radius:12px;margin:10px 0;background:#fff}
.faq summary{cursor:pointer;padding:14px 16px;font-family:'DM Sans';font-weight:700;color:var(--encre);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--accent);font-weight:800;font-size:18px;line-height:1}
.faq details[open] summary::after{content:'\2013'}
.faq details p{padding:0 16px 14px;margin:0;font-size:15px;line-height:1.65;color:#33333a}
.related{max-width:760px;margin:12px auto 0;padding:0 24px 10px}
.related h2{font-family:'DM Sans';font-size:20px;color:var(--encre);margin:0 0 14px}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.related-grid a{display:block;background:#fff;border:1.5px solid var(--gris-clair);border-radius:14px;padding:16px;text-decoration:none;transition:transform .15s}
.related-grid a:hover{transform:translateY(-3px)}
.related-grid .rt{font-family:'Inter';font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--accent-dark)}
.related-grid .rh{font-family:'DM Sans';font-weight:700;font-size:15px;color:var(--encre);margin-top:6px;line-height:1.3}
.cat-filter{max-width:1120px;margin:0 auto;padding:22px 24px 0;display:flex;flex-wrap:wrap;gap:10px}
.cat-filter a{font-family:'DM Sans';font-weight:700;font-size:13px;color:var(--encre);background:#fff;border:1.5px solid var(--gris-clair);border-radius:20px;padding:8px 16px;text-decoration:none;transition:.15s}
.cat-filter a:hover,.cat-filter a.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.featured{max-width:1120px;margin:24px auto 0;padding:0 24px}
.featured-card{position:relative;border-radius:18px;overflow:hidden;border:1.5px solid var(--gris-clair);box-shadow:6px 7px 0 var(--accent-dark);background:
radial-gradient(700px 400px at 92% 12%, rgba(192,38,211,.30), transparent 60%), var(--encre);color:var(--papier);padding:30px}
.featured-card .fc-tag{font-family:'Inter';font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent-light)}
.featured-card h2{font-family:'DM Sans';font-weight:700;font-size:28px;line-height:1.15;margin:10px 0 10px;max-width:680px}
.featured-card p{color:#D9D7CE;max-width:620px;line-height:1.55;margin:0 0 16px}
.featured-card a.cta{display:inline-block;background:#fff;color:var(--encre);font-family:'DM Sans';font-weight:700;padding:11px 20px;border-radius:12px;text-decoration:none}
.blog-card .rt{font-family:'Inter';font-size:11px;color:var(--gris);font-weight:700;margin-top:auto}
@media(max-width:640px){.featured-card h2{font-size:22px}}
/* ===== Annuaire d'outils ===== */
.annu-tools{max-width:1180px;margin:0 auto;padding:8px 24px 60px}
.annu-controls{position:sticky;top:0;z-index:5;background:rgba(244,242,236,.92);backdrop-filter:blur(8px);padding:16px 0;margin-bottom:6px;border-bottom:1px solid var(--gris-clair)}
.annu-search{width:100%;font-family:'Inter';font-size:15px;border:2px solid var(--gris-clair);border-radius:12px;padding:13px 16px;outline:none}
.annu-search:focus{border-color:var(--accent)}
.annu-filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.annu-filter button{font-family:'DM Sans';font-weight:700;font-size:13px;color:var(--encre);background:#fff;border:1.5px solid var(--gris-clair);border-radius:20px;padding:7px 14px;cursor:pointer;transition:.15s}
.annu-filter button:hover,.annu-filter button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.annu-sec{margin:30px 0 0}
.annu-sec h2{font-family:'DM Sans';font-weight:700;font-size:24px;color:var(--encre);margin:0 0 4px;display:flex;align-items:center;gap:10px}
.annu-sec h2 .n{font-size:13px;color:#fff;background:var(--accent-dark);border-radius:20px;padding:3px 10px;font-weight:700}
.annu-sec .sub{color:var(--gris);font-family:'Inter';font-size:14px;margin:0 0 16px}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.tool-card{background:#fff;border:1.5px solid var(--gris-clair);border-radius:14px;padding:16px 18px;transition:transform .12s,box-shadow .12s,border-color .12s}
.tool-card:hover{transform:translateY(-3px);box-shadow:5px 6px 0 var(--accent-dark);border-color:var(--accent)}
.tool-card .th{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.tool-card .tn{font-family:'DM Sans';font-weight:700;font-size:17px;color:var(--encre);text-decoration:none}
.tool-card .tn:hover{color:var(--accent-dark)}
.tool-card .tcat{font-family:'Inter';font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--accent-dark);white-space:nowrap}
.tool-card p{font-family:'Inter';font-size:14px;line-height:1.55;color:#444;margin:0}
.tool-card .ext{font-family:'Inter';font-size:12px;color:var(--accent-dark);text-decoration:none;font-weight:700;display:inline-block;margin-top:8px}
.annu-empty{display:none;text-align:center;color:var(--gris);font-family:'Inter';padding:40px}
.annu-count{font-family:'Inter';font-size:13px;color:var(--gris);margin-top:8px}
/* ===== Blog futuriste (thème sombre scopé .blogx) ===== */
body.blogx{background:#0E0E13;color:#E7E5EC}
.blogx .grid-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;background:
radial-gradient(900px 620px at 86% -8%, rgba(192,38,211,.20), transparent 60%),
radial-gradient(760px 620px at -5% 105%, rgba(90,34,130,.22), transparent 60%), #0E0E13}
.blogx .grid-bg::after{content:"";position:absolute;inset:0;
background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
background-size:46px 46px;-webkit-mask-image:radial-gradient(circle at 50% 24%, #000, transparent 78%);mask-image:radial-gradient(circle at 50% 24%, #000, transparent 78%)}
.blogx .topbar{background:rgba(14,14,19,.55);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.blogx .brand .word{color:#fff}
.blogx .who .role{color:var(--accent-light)}
.blogx .post-hero{background:transparent;border-bottom:1px solid rgba(255,255,255,.08)}
.blogx .post-hero h1{background:linear-gradient(92deg,#ffffff 30%,#E879F9);-webkit-background-clip:text;background-clip:text;color:transparent}
.blogx .cat-chip{box-shadow:0 0 22px rgba(192,38,211,.55)}
.blogx .meta-row{color:#9A98A4}
/* filtres */
.blogx .cat-filter a,.blogx .annu-filter button{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#E7E5EC}
.blogx .cat-filter a:hover,.blogx .cat-filter a.active,.blogx .annu-filter button:hover,.blogx .annu-filter button.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 18px rgba(192,38,211,.5)}
/* cartes blog */
.blogx .blog-card{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);box-shadow:none;color:#E7E5EC;backdrop-filter:blur(6px);position:relative;overflow:hidden}
.blogx .blog-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#C026D3,transparent);opacity:0;transition:opacity .3s}
.blogx .blog-card:hover{transform:translateY(-4px);border-color:rgba(192,38,211,.55);box-shadow:0 24px 60px -24px rgba(192,38,211,.55)}
.blogx .blog-card:hover::before{opacity:1}
.blogx .blog-card h3 a{color:#fff}.blogx .blog-card p{color:#A9A7B2}.blogx .blog-card .tag{color:var(--accent-light)}.blogx .blog-card .rt{color:#8A8896}
/* featured */
.blogx .featured-card{background:rgba(255,255,255,.03)!important;border:1px solid rgba(255,255,255,.10)!important;box-shadow:0 30px 70px -30px rgba(192,38,211,.45)!important;backdrop-filter:blur(8px)}
.blogx .featured-card h2{background:linear-gradient(92deg,#fff,#E879F9);-webkit-background-clip:text;background-clip:text;color:transparent}
.blogx .featured-card p{color:#C7C5CF}
.blogx .featured-card a.cta{background:linear-gradient(90deg,#C026D3,#9b1fb0);color:#fff;box-shadow:0 0 22px rgba(192,38,211,.5)}
/* article */
.blogx .post{color:#C7C5CF}
.blogx .post .lead{color:#D9D7E2!important}
.blogx .post h2{color:#fff}.blogx .post p,.blogx .post li{color:#B9B7C2}
.blogx .post .backlink{color:var(--accent-light)}
.blogx .keypoints{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-left:4px solid var(--accent)}
.blogx .keypoints h2{color:var(--accent-light)}
.blogx .tagchip{background:rgba(192,38,211,.14);border:1px solid rgba(192,38,211,.35);color:#E879F9}
.blogx .tagrow .lbl{color:#8A8896}
.blogx .faq h2{color:#fff}
.blogx .faq details{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10)}
.blogx .faq summary{color:#fff}.blogx .faq details p{color:#B9B7C2}
.blogx .cta-box{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10)}
.blogx .cta-box h3{color:#fff}.blogx .cta-box p{color:#B9B7C2}
.blogx .related h2{color:#fff}
.blogx .related-grid a{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10)}
.blogx .related-grid a:hover{border-color:rgba(192,38,211,.55);box-shadow:0 18px 44px -20px rgba(192,38,211,.5)}
.blogx .related-grid .rt{color:var(--accent-light)}.blogx .related-grid .rh{color:#fff}
/* annuaire */
.blogx .annu-controls{background:rgba(14,14,19,.7);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.10)}
.blogx .annu-search{background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.12);color:#fff}
.blogx .annu-search::placeholder{color:#8A8896}
.blogx .annu-search:focus{border-color:var(--accent);box-shadow:0 0 22px rgba(192,38,211,.35)}
.blogx .annu-count{color:#8A8896}
.blogx .annu-sec h2{color:#fff}.blogx .annu-sec .sub{color:#9A98A4}
.blogx .annu-sec h2 .n{background:var(--accent);box-shadow:0 0 16px rgba(192,38,211,.5)}
.blogx .tool-card{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);color:#E7E5EC}
.blogx .tool-card:hover{transform:translateY(-3px);border-color:rgba(192,38,211,.55);box-shadow:0 20px 46px -22px rgba(192,38,211,.55)}
.blogx .tool-card .tn{color:#fff}.blogx .tool-card p{color:#A9A7B2}.blogx .tool-card .tcat{color:var(--accent-light)}.blogx .tool-card .ext{color:#E879F9}
.blogx .annu-empty{color:#8A8896}
/* ===== Blog futuriste v2 : 3D tilt, sheen, organisation ===== */
.blogx .annu-count{display:none}
.blogx .post-hero h1{font-size:44px;letter-spacing:-1.2px;text-wrap:balance}
@media(max-width:640px){.blogx .post-hero h1{font-size:30px}}
/* sheen qui suit le curseur */
.blogx .tool-card,.blogx .blog-card{background-image:radial-gradient(200px 200px at var(--mx,50%) var(--my,-20%), rgba(192,38,211,.12), transparent 60%)}
/* effets 3D (souris fine uniquement) */
@media (hover:hover) and (pointer:fine){
.blogx .blog-grid,.blogx .tool-grid,.blogx .featured,.blogx .related-grid{perspective:1100px}
.blogx .tilt{transform-style:preserve-3d;will-change:transform;transition:transform .12s ease-out, box-shadow .2s, border-color .2s}
.blogx .tilt .tn,.blogx .tilt h2,.blogx .tilt h3,.blogx .tilt .rh{transform:translateZ(26px)}
.blogx .tilt .tcat,.blogx .tilt .tag,.blogx .tilt .rt{transform:translateZ(16px)}
}
/* en-têtes de section organisées */
.blogx .blog-sec{max-width:1120px;margin:34px auto 0;padding:0 24px}
.blogx .blog-sec .sec-head{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.blogx .blog-sec .sec-head h2{font-family:'DM Sans';font-weight:700;font-size:23px;color:#fff;margin:0;position:relative;padding-left:14px}
.blogx .blog-sec .sec-head h2::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:5px;border-radius:4px;background:linear-gradient(180deg,#E879F9,#C026D3)}
.blogx .blog-sec .sec-head a{margin-left:auto;font-family:'DM Sans';font-weight:700;font-size:13px;color:var(--accent-light);text-decoration:none;white-space:nowrap}
.blogx .annu-sec h2 .n{display:none}
/* carte annuaire mise en avant (hero du blog) */
.blogx .annu-hero{max-width:1120px;margin:26px auto 0;padding:0 24px}
.blogx .annu-hero .inner{position:relative;overflow:hidden;border-radius:20px;border:1px solid rgba(255,255,255,.10);
background:radial-gradient(700px 360px at 88% 0%, rgba(192,38,211,.28), transparent 60%), rgba(255,255,255,.03);
padding:34px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;box-shadow:0 30px 70px -34px rgba(192,38,211,.5)}
.blogx .annu-hero .eyebrow{font-family:'Inter';font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent-light)}
.blogx .annu-hero h2{font-family:'DM Sans';font-weight:700;font-size:26px;margin:8px 0 8px;background:linear-gradient(92deg,#fff,#E879F9);-webkit-background-clip:text;background-clip:text;color:transparent;max-width:560px}
.blogx .annu-hero p{color:#C7C5CF;max-width:560px;margin:0;font-family:'Inter';line-height:1.55}
.blogx .annu-hero .cta{display:inline-block;background:linear-gradient(90deg,#C026D3,#9b1fb0);color:#fff;font-family:'DM Sans';font-weight:700;padding:13px 22px;border-radius:14px;text-decoration:none;box-shadow:0 0 26px rgba(192,38,211,.5);white-space:nowrap}
/* ===== Correctifs blog : titres visibles + tilt adouci ===== */
.blogx .blog-card h3, .blogx .blog-card h3 a{color:#fff !important}
.blogx .blog-card .tag{color:var(--accent-light) !important}
.blogx .blog-card p{color:#A9A7B2 !important}
.blogx .blog-card:hover{z-index:3}
.blogx .tilt{position:relative}
@media (hover:hover) and (pointer:fine){
.blogx .tilt .tn,.blogx .tilt h2,.blogx .tilt h3,.blogx .tilt .rh{transform:translateZ(12px)}
}
/* ===== Blog : fil d'Ariane, compteur de résultats, sommaire ===== */
.blogx .crumb{font-family:'Inter';font-size:12.5px;color:#9A98A4;margin:0 0 12px}
.blogx .crumb a{color:var(--accent-light);text-decoration:none}
.blogx .crumb a:hover{text-decoration:underline}
.blogx .crumb span{color:#9A98A4}
.blogx .annu-results{font-family:'Inter';font-size:13px;color:#C7C5CF;margin-top:10px}
.blogx .post-toc{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:14px 18px;margin:20px 0}
.blogx .post-toc strong{display:block;font-family:'DM Sans';color:#fff;font-size:12px;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.blogx .post-toc ol{margin:0;padding-left:20px}
.blogx .post-toc li{margin:4px 0}
.blogx .post-toc a{color:var(--accent-light);text-decoration:none}
.blogx .post-toc a:hover{text-decoration:underline}
.blogx .post h2{scroll-margin-top:80px}
/* Liens dans le corps d'article : accent-dark (#86198F) est illisible sur fond sombre.
On passe en accent-light (#E879F9) souligné → contraste suffisant. */
.blogx .post-body a,.blogx .post .post-content a,.blogx .post p a,.blogx .post li a{color:var(--accent-light);text-decoration:underline;text-underline-offset:2px}
.blogx .post-body a:hover,.blogx .post p a:hover,.blogx .post li a:hover{color:#fff}
/* ===== Blog v3 : vignettes, méta cartes, pagination, haut de page, récents ===== */
.blogx .blog-card{overflow:hidden;cursor:pointer}
.blogx .bc-thumb{display:block;width:calc(100% + 36px);margin:-20px -18px 14px;aspect-ratio:1200/630;object-fit:cover;border-bottom:1px solid rgba(255,255,255,.08);background:#15151c}
.blogx .bc-meta{font-family:'Inter';font-size:11.5px;color:#8A8896;display:flex;gap:8px;align-items:center;margin:0 0 6px}
.blogx .bc-meta .sep{opacity:.5}
.blogx .pager{display:flex;justify-content:center;margin:28px 0 0}
.blogx .pager button{font-family:'DM Sans';font-weight:700;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:14px;padding:12px 28px;cursor:pointer;transition:.15s}
.blogx .pager button:hover{background:var(--accent);border-color:var(--accent);box-shadow:0 0 22px rgba(192,38,211,.5)}
.blogx .totop{position:fixed;right:18px;bottom:18px;z-index:30;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(192,38,211,.92);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:none;box-shadow:0 10px 28px rgba(192,38,211,.5)}
.blogx .totop.show{display:block}
.blogx .recent{max-width:1120px;margin:24px auto 0;padding:0 24px}
.blogx .recent h2{font-family:'DM Sans';color:#fff;font-size:18px;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.blogx .recent h2::before{content:"";width:5px;height:18px;border-radius:3px;background:linear-gradient(180deg,#E879F9,#C026D3)}
.blogx .recent-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.blogx .recent-row a{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:14px;text-decoration:none;transition:.15s}
.blogx .recent-row a:hover{border-color:rgba(192,38,211,.5);transform:translateY(-2px)}
.blogx .recent-row .rc-cat{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--accent-light);font-weight:700}
.blogx .recent-row .rc-t{color:#fff;font-family:'DM Sans';font-weight:700;font-size:14px;margin-top:6px;line-height:1.3}
.blogx .recent-row .rc-d{color:#8A8896;font-size:11px;margin-top:6px}
/* ===== Survol blog : doux, sans rotation 3D ===== */
.blogx .blog-grid,.blogx .tool-grid,.blogx .featured,.blogx .related-grid{perspective:none}
.blogx .tilt{transform:none !important}
.blogx .tilt .tn,.blogx .tilt h2,.blogx .tilt h3,.blogx .tilt .rh,.blogx .tilt .tcat,.blogx .tilt .tag,.blogx .tilt .rt{transform:none !important}
.blogx .blog-card,.blogx .tool-card{transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease}
.blogx .blog-card:hover,.blogx .tool-card:hover{transform:translateY(-4px)}
.blogx .featured-card:hover,.blogx .annu-hero .inner:hover{transform:translateY(-3px)}
/* ===== Fix vignette cassée : hauteur fixe (override aspect-ratio) ===== */
.blogx .blog-card .bc-thumb{height:160px !important;aspect-ratio:auto !important;width:calc(100% + 36px) !important;object-fit:cover !important;display:block;margin:-20px -18px 14px}
@media(max-width:520px){.blogx .blog-card .bc-thumb{height:140px !important}}
/* ===== Admin : tableau de bord Visites ===== */
.vs-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:8px 0 6px}
/* cel-shading doux : contour net + ombre portée décalée (pleine, non floutée) */
.vs-kpi{background:#fff;border:2px solid var(--encre);border-radius:14px;padding:14px 16px;box-shadow:4px 4px 0 rgba(28,28,34,.10);position:relative;overflow:hidden}
.vs-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--accent),var(--accent-dark))}
.vs-kpi b{font-family:'DM Sans';font-size:26px;display:block;line-height:1;color:var(--encre)}
.vs-kpi span{font-size:12px;color:var(--gris)}
.vs-h{font-family:'DM Sans';font-size:15px;margin:22px 0 10px;color:var(--encre)}
.vs-chart{display:flex;align-items:flex-end;gap:3px;height:150px;background:#fff;border:2px solid var(--encre);border-radius:14px;padding:12px;box-shadow:4px 4px 0 rgba(28,28,34,.10)}
.vs-bar{flex:1;display:flex;align-items:flex-end;height:100%;min-width:3px}
.vs-bar i{display:block;width:100%;background:linear-gradient(180deg,var(--accent),var(--accent-dark));border-radius:3px 3px 0 0;min-height:2px}
.vs-bar:hover i{filter:brightness(1.15)}
.vs-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:6px}
.vs-tbl td{font-size:13px;padding:6px 8px;border-bottom:1px solid var(--gris-clair)}
#vsRange{font-family:'Inter';border:2px solid var(--gris-clair);border-radius:9px;padding:8px 10px;background:#fff}
.vs-h-sub{font-weight:400;font-size:12px;color:var(--gris)}
/* listes avec barre de proportion (style dashboard) */
.vs-list{display:flex;flex-direction:column;gap:5px}
.vs-li{position:relative;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;background:#fff;border:1.5px solid var(--encre);box-shadow:2px 2px 0 rgba(28,28,34,.08);overflow:hidden;font-size:13px}
.vs-li-bar{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(192,38,211,.16),rgba(232,121,249,.10));border-right:2px solid rgba(192,38,211,.35);z-index:0}
.vs-li-lbl{position:relative;z-index:1;color:var(--encre);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.vs-li-val{position:relative;z-index:1;font-family:'DM Sans';font-weight:700;color:var(--encre)}
/* tableau des dernières visites */
.vs-table-wrap{border:2px solid var(--encre);border-radius:14px;overflow:auto;max-height:480px;margin-top:6px;box-shadow:4px 4px 0 rgba(28,28,34,.10);background:#fff}
/* ===== Encadrés blog enrichi (cel-shading doux) ===== */
.post .example-box{background:var(--papier,#FBF7FD);border:2px solid var(--encre);border-radius:14px;padding:16px 18px;margin:14px 0;box-shadow:4px 4px 0 rgba(192,38,211,.14);position:relative}
.post .example-box::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:5px;border-radius:3px;background:linear-gradient(180deg,var(--accent),var(--accent-dark))}
.post .example-box p{margin:0;padding-left:8px}
.post ul.check{list-style:none;padding:0;margin:12px 0;display:flex;flex-direction:column;gap:8px}
.post ul.check li{position:relative;padding:9px 12px 9px 38px;background:#fff;border:1.5px solid var(--encre);border-radius:10px;box-shadow:2px 2px 0 rgba(28,28,34,.07)}
.post ul.check li::before{content:"✕";position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;line-height:18px;text-align:center;font-size:12px;font-weight:700;color:#fff;background:var(--accent);border-radius:5px}
.blogx .post .example-box{background:rgba(192,38,211,.07);border-color:rgba(255,255,255,.18);box-shadow:4px 4px 0 rgba(192,38,211,.20)}
.blogx .post ul.check li{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);color:#e8e6ef}
.vs-table{width:100%;border-collapse:collapse;font-size:12.5px}
.vs-table thead th{position:sticky;top:0;background:var(--papier);text-align:left;font-family:'DM Sans';font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--gris);padding:9px 12px;border-bottom:1.5px solid var(--gris-clair);z-index:1}
.vs-table tbody td{padding:8px 12px;border-bottom:1px solid var(--gris-clair);vertical-align:top}
.vs-table tbody tr:hover{background:rgba(192,38,211,.04)}
.vs-table code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:rgba(192,38,211,.08);color:var(--accent-dark);padding:1px 6px;border-radius:5px}
.vs-nowrap{white-space:nowrap;color:var(--gris)}
.vs-path{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-table .empty{padding:18px;text-align:center}
/* ===== Onglets : séparateur de groupes ===== */
.tabs-sep{display:inline-block;width:2px;height:22px;background:var(--gris-clair);border-radius:2px;margin:0 4px;align-self:center}
/* ===== Dashboard SEO (cell-shading) ===== */
.seo-grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-top:8px}
@media(max-width:780px){.seo-grid2{grid-template-columns:1fr}}
.seo-card{background:#fff;border:2px solid var(--encre);border-radius:16px;padding:14px 16px;box-shadow:5px 5px 0 rgba(28,28,34,.10)}
.seo-card .vs-h{margin-top:4px}
.seo-area{display:block;border-radius:10px}
.seo-legs{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;justify-content:center}
.seo-leg{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--gris)}
.seo-leg span{width:12px;height:12px;border-radius:4px;border:1.5px solid var(--encre);display:inline-block}
.seo-leg b{color:var(--encre)}
.seo-donut{display:flex;flex-direction:column;align-items:center;gap:6px}
.seo-donut svg{filter:drop-shadow(3px 3px 0 rgba(28,28,34,.10))}
.seo-map-wrap{display:grid;grid-template-columns:1.7fr 1fr;gap:18px;align-items:start;margin-top:4px}
@media(max-width:780px){.seo-map-wrap{grid-template-columns:1fr}}
.seo-world{background:linear-gradient(180deg,#FBF7FD,#F3ECDC);border:2px solid var(--encre);border-radius:16px;box-shadow:5px 5px 0 rgba(192,38,211,.14);padding:6px}
.seo-pin circle{transition:transform .15s}
.seo-gsc{margin-top:22px;background:var(--papier);border:2px dashed var(--accent);border-radius:14px;padding:16px 18px}
.seo-gsc p{margin:6px 0 12px;color:var(--gris);font-size:13.5px}
.btn-seo{display:inline-block;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;font-weight:700;padding:9px 16px;border-radius:10px;border:2px solid var(--encre);box-shadow:3px 3px 0 rgba(28,28,34,.15);text-decoration:none}
.btn-seo:hover{filter:brightness(1.06)}
/* ===== Offres publiques (SEO) ===== */
.off-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:22px}
.off-card{display:block;text-decoration:none;color:inherit;background:#fff;border:2px solid var(--encre);border-radius:16px;padding:18px;box-shadow:5px 5px 0 rgba(28,28,34,.10);transition:transform .12s,box-shadow .12s}
.off-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(192,38,211,.18)}
.off-cardhead{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.off-chip{font-family:'Inter';font-size:11.5px;font-weight:700;color:var(--accent-dark);background:#fff;border:1.5px solid var(--accent-light,#E879F9);border-radius:999px;padding:3px 10px}
.off-card h2{font-family:'DM Sans';font-size:18px;margin:4px 0 6px;color:var(--encre)}
.off-card p{color:#55535e;font-size:14px;margin:0 0 10px;line-height:1.5}
.off-meta{font-size:12.5px;color:#6A6A72}
.off-go{display:inline-block;margin-top:10px;color:var(--accent);font-weight:700;font-size:13.5px}
.off-detail{background:#fff;border:2px solid var(--encre);border-radius:18px;padding:24px;box-shadow:6px 6px 0 rgba(28,28,34,.10)}
.off-detail h2{margin:18px 0 6px}
.off-cta{margin-top:22px;background:linear-gradient(135deg,#1C1C22,#3A1140);color:#fff;border-radius:14px;padding:20px}
.off-cta .cta{display:inline-block;background:linear-gradient(135deg,#C026D3,#E879F9);color:#fff;font-weight:800;text-decoration:none;padding:11px 20px;border-radius:10px;border:2px solid #fff}
/* ===== Fix critique : hero blog en bloc (ne pas hériter du flex de .bar-inner) ===== */
.post-hero .bar-inner{display:block !important;max-width:1120px;align-items:initial;justify-content:initial}
.post-hero .bar-inner .crumb{display:block}
.post-hero .bar-inner .cat-chip{display:inline-block}
.post-hero .bar-inner .meta-row{display:flex}
/* ===== Homepage : accessibilité + nouvelles sections (audit) ===== */
.skip-link{position:absolute;left:-999px;top:0;z-index:1000;background:var(--encre);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;font-weight:700;font-family:'DM Sans',sans-serif}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Comment ça marche */
.hiw{max-width:1400px;margin:46px auto 0;padding:0 28px}
.hiw-inner{text-align:center}
.hiw h2{font-family:'DM Sans',sans-serif;font-size:30px;margin:0 0 6px}
.hiw-sub{color:#55535e;max-width:640px;margin:0 auto 26px}
.hiw-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:0;margin:0;counter-reset:none;text-align:left}
.hiw-step{position:relative;background:#fff;border:2px solid var(--encre);border-radius:16px;padding:22px 20px 20px;box-shadow:5px 6px 0 var(--encre)}
.hiw-num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#C026D3,#E879F9);color:#fff;font-family:'DM Sans';font-weight:800;font-size:18px;margin-bottom:12px}
.hiw-step h3{font-family:'DM Sans',sans-serif;font-size:18px;margin:0 0 6px}
.hiw-step p{margin:0;color:#55535e;font-size:14px;line-height:1.5}
@media(max-width:780px){.hiw-grid{grid-template-columns:1fr}}
/* Réassurance + témoignages */
.proof{max-width:1400px;margin:40px auto 0;padding:0 28px}
.proof-figs{display:flex;justify-content:center;gap:38px;flex-wrap:wrap;margin-bottom:26px}
.pfig{text-align:center}
.pfig b{display:block;font-family:'DM Sans',sans-serif;font-size:30px;color:var(--accent-dark);line-height:1}
.pfig span{font-size:13px;color:#55535e}
.proof-quotes{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.quote{position:relative;margin:0;overflow:hidden;
background:linear-gradient(155deg,#2A2033 0%,#1C1C22 58%);
color:#fff;border:1px solid rgba(232,121,249,.20);border-radius:18px;padding:28px 26px 22px;
box-shadow:0 16px 38px rgba(28,28,34,.30), inset 0 1px 0 rgba(255,255,255,.05);
transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease}
.quote::before{content:"\201C";position:absolute;top:8px;left:20px;font-family:Georgia,serif;font-size:64px;line-height:1;color:var(--accent);opacity:.6}
.quote::after{content:"";position:absolute;right:-50px;top:-50px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(192,38,211,.40),transparent 68%);pointer-events:none}
.quote:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(124,30,140,.34)}
.quote blockquote{position:relative;margin:22px 0 16px;font-size:16.5px;line-height:1.55;font-family:'DM Sans',sans-serif;color:#F4EEF9}
.quote figcaption{position:relative;font-size:13px;color:var(--accent-light);font-weight:600;display:flex;align-items:center;gap:9px}
.quote figcaption::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--accent)}
@media(max-width:780px){.proof-quotes{grid-template-columns:1fr}.proof-figs{gap:24px}}
/* Bande écoles (B2B) */
.school-cta{max-width:1400px;margin:48px auto 0;padding:0 28px}
.school-inner{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;background:linear-gradient(135deg,#2a1033,#1C1C22);border:2px solid var(--encre);border-radius:20px;padding:30px 32px;box-shadow:8px 9px 0 rgba(192,38,211,.25)}
.school-copy{flex:1 1 440px;color:#fff}
.school-copy .hero-eyebrow{color:#E879F9}
.school-copy h2{font-family:'DM Sans',sans-serif;font-size:26px;margin:8px 0 8px;line-height:1.15}
.school-copy p{margin:0;color:#D9D7CE;font-size:15px;line-height:1.55;max-width:620px}
.school-actions{display:flex;flex-direction:column;gap:10px;flex:0 0 auto}
.school-actions .btn{white-space:nowrap}
@media(max-width:780px){.school-inner{padding:24px}.school-actions{width:100%}.school-actions .btn{width:100%;text-align:center}}
/* FAQ visible */
.faq{max-width:820px;margin:48px auto 10px;padding:0 20px}
.faq h2{font-family:'DM Sans',sans-serif;font-size:28px;text-align:center;margin:0 0 20px}
.faq-it{background:#fff;border:2px solid var(--encre);border-radius:13px;padding:2px 16px;margin:10px 0;box-shadow:3px 4px 0 var(--encre)}
.faq-it summary{cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:700;color:var(--encre);padding:13px 36px 13px 0;list-style:none;position:relative}
.faq-it summary::-webkit-details-marker{display:none}
.faq-it summary::marker{content:""}
.faq-it summary::after{content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--accent-dark);font-weight:700;line-height:1;pointer-events:none}
.faq-it[open] summary::after{content:"–"}
.faq-it p{margin:0 0 14px;color:#44424a;line-height:1.6;font-size:14.5px}
/* sélection de cours pour envoi groupé de contrats */
.cc-sel{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--accent-dark);cursor:pointer;user-select:none;background:#fff;border:1.5px solid var(--accent);border-radius:999px;padding:5px 11px;margin-right:8px}
.cc-sel input{width:15px;height:15px;accent-color:var(--accent)}
/* ===== Assistant formateur "Otto Matör" (sans IA) ===== */
#asg{position:fixed;right:22px;bottom:22px;z-index:300;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.asg-fab{position:relative;width:62px;height:62px;border-radius:50%;border:2.5px solid var(--encre);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:4px 5px 0 var(--encre);transition:transform .12s,box-shadow .12s;align-self:flex-end}
.asg-fab:hover{transform:translate(-1px,-2px);box-shadow:5px 7px 0 var(--encre)}
.asg-fab:active{transform:translate(1px,1px);box-shadow:2px 3px 0 var(--encre)}
.asg-fab svg{animation:asgFloat 3.4s ease-in-out infinite}
@keyframes asgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.asg-dot{position:absolute;top:-2px;right:-2px;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2.5px solid #fff;box-shadow:0 0 0 1px var(--encre)}
.asg-panel{width:344px;max-width:calc(100vw - 36px);max-height:min(72vh,560px);background:#fff;border:2.5px solid var(--encre);border-radius:18px;box-shadow:6px 8px 0 rgba(28,28,34,.18);overflow:hidden;display:none;flex-direction:column;transform-origin:bottom right;animation:asgPop .16s ease-out}
.asg-panel.show{display:flex}
@keyframes asgPop{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.asg-head{display:flex;align-items:center;gap:10px;padding:12px 14px;background:linear-gradient(135deg,#1C1C22,#3A1140);color:#fff;flex:none}
.asg-ava{flex:none;width:42px;height:42px;border-radius:12px;background:#fff;border:2px solid #1C1C22;display:flex;align-items:center;justify-content:center}
.asg-head-tx{display:flex;flex-direction:column;line-height:1.15;flex:1}
.asg-head-tx b{font-family:'DM Sans',sans-serif;font-size:15px}
.asg-head-tx span{font-size:11.5px;color:#c9c2d0}
.asg-x{margin-left:auto;background:transparent;border:none;color:#fff;font-size:24px;line-height:1;cursor:pointer;opacity:.85;padding:0 2px}
.asg-x:hover{opacity:1}
.asg-body{flex:1;min-height:0;padding:14px;overflow-y:auto;background:#FAF7F2}
.asg-row{display:flex;align-items:flex-end;gap:8px;margin:8px 0}
.asg-row.me{justify-content:flex-end}
.asg-mini{flex:none;width:30px;height:30px;border-radius:9px;background:#fff;border:1.5px solid var(--encre);display:flex;align-items:center;justify-content:center}
.asg-msg{font-size:13.5px;line-height:1.5;border-radius:14px;padding:10px 13px;max-width:84%;word-wrap:break-word}
.asg-msg.botb{background:#fff;border:1.5px solid #ECE3D6;color:var(--encre);border-bottom-left-radius:5px}
.asg-msg.botb a{color:var(--accent-dark);font-weight:600}
.asg-msg.meb{background:var(--accent);color:#fff;border-bottom-right-radius:5px}
.asg-typing{display:flex;gap:4px;align-items:center;padding:13px 14px}
.asg-typing i{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block;animation:asgBlink 1.1s infinite}
.asg-typing i:nth-child(2){animation-delay:.18s}.asg-typing i:nth-child(3){animation-delay:.36s}
@keyframes asgBlink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.asg-more{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--gris);margin:14px 0 6px;font-weight:700}
.asg-chips{display:flex;flex-direction:column;gap:7px}
.asg-chip{display:flex;align-items:center;gap:9px;text-align:left;background:#fff;border:1.5px solid #ECD8F2;color:var(--encre);border-radius:11px;padding:9px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s}
.asg-chip svg{flex:none;color:var(--accent-dark)}
.asg-chip:hover{background:#FCEFFD;border-color:var(--accent)}
.asg-foot{display:flex;gap:8px;padding:10px;border-top:1.5px solid #EEE7DD;background:#fff;flex:none}
.asg-foot input{flex:1;border:1.5px solid #D6CCBE;border-radius:11px;padding:10px 12px;font:inherit;font-size:13.5px;outline:none}
.asg-foot input:focus{border-color:var(--accent)}
.asg-send{flex:none;width:42px;border:none;border-radius:11px;background:var(--accent);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.asg-send:hover{background:var(--accent-dark)}
@media(max-width:520px){#asg{right:14px;bottom:14px}.asg-fab{width:54px;height:54px}.asg-panel{max-height:72vh}}
/* ===== Espace formateur : profil, documents, logistique ===== */
.pf-toggle{display:flex;align-items:center;gap:10px;background:#FAF3FB;border:1.5px solid var(--accent);border-radius:12px;padding:12px 14px;margin-bottom:16px;font-weight:600;color:var(--encre);cursor:pointer}
.pf-toggle input{width:18px;height:18px;accent-color:var(--accent)}
.doc-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fff;border:1.5px solid var(--gris-clair,#E4DED7);border-radius:12px;padding:12px 14px;margin:8px 0}
.doc-row .doc-main{flex:1;min-width:180px;font-size:14px;color:var(--encre)}
.doc-row .doc-acts{display:flex;gap:8px;align-items:center}
.doc-up{cursor:pointer}
.doc-stat{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.ds-todo{background:#F3F0EA;color:#6c6c74}
.ds-wait{background:#FEF3C7;color:#B45309}
.ds-ok{background:#DCFCE7;color:#166534}
.ds-bad{background:#FEE2E2;color:#B91C1C}
.miss-logis{margin-top:8px;padding:10px 12px;background:#F4FBF6;border:1px solid #BBE9CC;border-radius:10px;font-size:13px;color:#2c3a30;line-height:1.45}
.miss-logis .ml-h{display:flex;align-items:center;gap:6px;font-weight:700;color:#166534;margin-bottom:3px}
/* ===== Mes documents (formateur) : épuré & stylé ===== */
#view-documents .subtitle{margin-bottom:14px}
#view-documents h2{font-size:12px;letter-spacing:.7px;text-transform:uppercase;color:var(--gris);font-weight:700;margin:24px 0 10px;border:0;padding:0}
.dq-card{background:#fff;border:1px solid #ECE6DC;border-radius:18px;box-shadow:0 6px 24px rgba(28,28,34,.05);overflow:hidden}
.dq-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px 14px}
.dq-h-t{font-family:'DM Sans',sans-serif;font-weight:700;font-size:16px;color:var(--encre)}
.dq-h-s{font-size:13px;color:var(--gris);margin-top:2px}
.dq-ring{--p:0;width:52px;height:52px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--accent) calc(var(--p)*1%), #EFE7F1 0);}
.dq-ring span{width:40px;height:40px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--accent-dark)}
.dq-bar{height:3px;background:#F0EAF1}
.dq-bar i{display:block;height:100%;background:linear-gradient(90deg,#C026D3,#E879F9)}
.dq-list{display:flex;flex-direction:column}
.dq-row{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:14px 20px;border-top:1px solid #F1ECE3;transition:background .12s}
.dq-row:hover{background:#FCFAFD}
.dq-ic{flex:none;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:#F4EFEA;color:#8A8A92}
.dq-ic.ds-ok{background:#E7F6EE;color:#16804a}
.dq-ic.ds-wait{background:#FEF3C7;color:#B45309}
.dq-ic.ds-bad{background:#FDE8E4;color:#C0392B}
.dq-ic.ds-todo{background:#F1ECF2;color:#9A1FA8}
.dq-main{flex:1;min-width:0}
.dq-name{font-weight:600;font-size:14.5px;color:var(--encre)}
.dq-meta{font-size:12.5px;color:var(--gris);margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.dq-meta .dq-err,.dq-err{color:#C0392B}
.dq-file{color:var(--accent-dark);font-weight:600;text-decoration:none}
.dq-file:hover{text-decoration:underline}
.dq-btn:focus-visible,.dq-up:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dq-del{width:32px;height:32px;border-radius:9px;border:1px solid #E2DAD0;background:#fff;color:#9a9aa2;font-size:19px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.dq-del:hover{background:#FDE8E4;border-color:#F0B7AD;color:#C0392B}
.dq-del:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dq-exprow{flex-basis:100%;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 2px 54px;padding:10px 12px;background:#FAF7F2;border:1px solid #ECE6DC;border-radius:10px}
.dq-exp-l{font-size:13px;font-weight:600;color:var(--encre)}
.dq-exp-l small{color:var(--gris);font-weight:400}
.dq-date{font:inherit;font-size:13px;padding:6px 8px;border:1px solid #D6CCBE;border-radius:8px;background:#fff}
.dq-foot{padding:11px 20px;font-size:12px;color:var(--gris);border-top:1px solid #F1ECE3}
.dq-uploading{opacity:.55;pointer-events:none}
.dq-uploading .dq-up::after{content:" · envoi…";font-weight:600}
.dq-badge{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;white-space:nowrap}
.dq-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.dq-badge.ds-ok{background:#E7F6EE;color:#16804a}
.dq-badge.ds-wait{background:#FEF3C7;color:#B45309}
.dq-badge.ds-bad{background:#FDE8E4;color:#C0392B}
.dq-badge.ds-todo{background:#F2EFF3;color:#7c7c86}
.dq-acts{flex:none;display:flex;gap:7px}
.dq-btn{display:inline-flex;align-items:center;cursor:pointer;font:inherit;font-size:13px;font-weight:600;padding:7px 13px;border-radius:10px;border:1px solid #E2DAD0;background:#fff;color:var(--encre);text-decoration:none;transition:background .12s,border-color .12s}
.dq-btn:hover{background:#FAF7F2;border-color:#CDBFB0}
.dq-btn.prim{background:var(--accent);border-color:var(--accent);color:#fff}
.dq-btn.prim:hover{background:var(--accent-dark)}
@media(max-width:620px){.dq-row{flex-wrap:wrap}.dq-main{flex-basis:calc(100% - 54px)}.dq-badge,.dq-acts{margin-left:54px}}
/* en-têtes de tableau triables */
.xls th.th-sort{cursor:pointer;user-select:none;white-space:nowrap}
.xls th.th-sort:hover{color:var(--accent-light,#E879F9)}
/* ===== Overlay de chargement (logo tonformateur) ===== */
.tf-loader{position:fixed;inset:0;z-index:4000;display:none;align-items:center;justify-content:center;background:rgba(244,242,236,.82);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.tf-loader.show{display:flex;animation:tfFade .15s ease}
.tf-loader-box{display:flex;flex-direction:column;align-items:center;gap:14px}
.tf-loader-logo{width:84px;height:84px;border-radius:22px;background:#fff;border:2.5px solid var(--encre);box-shadow:5px 6px 0 var(--encre);display:flex;align-items:center;justify-content:center;animation:tfBounce 1s ease-in-out infinite}
.tf-loader-logo img{width:52px;height:52px;animation:tfWobble 1.4s ease-in-out infinite}
.tf-loader-dots{display:flex;gap:6px}
.tf-loader-dots i{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;animation:tfBlink 1s infinite}
.tf-loader-dots i:nth-child(2){animation-delay:.15s}
.tf-loader-dots i:nth-child(3){animation-delay:.3s}
.tf-loader-msg{font-family:'DM Sans',sans-serif;font-weight:700;color:var(--encre);font-size:14px}
@keyframes tfBounce{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}
@keyframes tfWobble{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes tfBlink{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
@keyframes tfFade{from{opacity:0}to{opacity:1}}
/* ===== Modales utilitaires (confirm/alert/prompt) ===== */
.tf-cm{max-width:440px}
.tf-cm-input{width:100%;font:inherit;font-size:14px;padding:9px 11px;border:1.5px solid #D6CCBE;border-radius:10px;margin-top:2px}
.tf-cm-input:focus{outline:none;border-color:var(--accent)}
.tf-cm .btn.tf-cm-danger{background:linear-gradient(135deg,#C0392B,#E05750);border-color:#1C1C22;color:#fff}
/* ===== Pastilles de statut unifiées ===== */
.st{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap;line-height:1.2}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.st.ok{background:#E7F6EE;color:#16804a}
.st.warn{background:#FEF3C7;color:#B45309}
.st.bad{background:#FDE8E4;color:#C0392B}
.st.info{background:#EDE9FE;color:#6D28D9}
.st.neutral{background:#F1ECE3;color:#6c6c74}
.st.accent{background:#FCE7F3;color:#9D174D}
/* fiche détail formateur (modale admin) */
.fiche-list{display:flex;flex-direction:column;border:1px solid #ECE6DC;border-radius:10px;overflow:hidden}
.fiche-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-top:1px solid #F1ECE3;font-size:13.5px}
.fiche-row:first-child{border-top:0}
.fiche-row span:first-child{flex:1}
/* ===== Menu ⋯ (actions secondaires regroupées) ===== */
.kb{position:relative;display:inline-block}
.kb-btn{font-weight:700;letter-spacing:1px;line-height:1;padding:3px 9px}
.kb-menu{position:fixed;z-index:1200;display:none;flex-direction:column;min-width:176px;background:#fff;border:2px solid #1A1A1A;border-radius:10px;box-shadow:4px 4px 0 rgba(26,26,26,.16);padding:5px;gap:2px}
.kb-menu.open{display:flex}
.kb-item{display:block;width:100%;text-align:left;background:transparent;border:0;border-radius:7px;padding:8px 11px;font:inherit;font-size:13.5px;color:#1A1A1A;cursor:pointer}
.kb-item:hover,.kb-item:focus{background:#F4EFE7;outline:none}
.kb-item.del{color:#B91C1C}
.kb-item.del:hover{background:#FEECEC}
/* ===== Skeletons de chargement ===== */
.skel-wrap{display:flex;flex-direction:column;gap:10px;padding:8px 2px}
.skel-row{display:flex;align-items:center;gap:14px;padding:6px 2px}
.skel-bar{height:14px;border-radius:7px;background:linear-gradient(90deg,#EEE8DE 25%,#F6F1E8 37%,#EEE8DE 63%);background-size:400% 100%;animation:skelShimmer 1.3s ease infinite}
.skel-bar.sm{height:11px;opacity:.7}
@keyframes skelShimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.skel-bar{animation:none}}
/* ===== États vides illustrés ===== */
.empty-ill{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:48px 20px;color:var(--gris,#6B6B6B)}
.empty-ico{width:64px;height:64px;fill:none;stroke:#C9BEAE;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px}
.empty-ill-t{margin:0;font-size:15px;font-weight:700;color:#1A1A1A}
.empty-ill-s{margin:0;font-size:13.5px;max-width:420px}
.empty-ill .btn{margin-top:10px}
/* ===== a11y · cibles tactiles confortables sur écrans tactiles ===== */
@media (pointer:coarse){
.ca,.kb-btn{min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center}
.kb-item{min-height:var(--tap)}
}
/* ===== Badge dossier Qualiopi (fiche formateur publique) ===== */
.qualiopi-ok{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:8px 13px;border:2px solid #15803D;border-radius:var(--radius-pill);background:#EAF7EE;color:#15803D;font-size:13.5px;font-weight:600;box-shadow:3px 3px 0 rgba(21,128,61,.18)}
.qualiopi-ok svg{flex:none}
.qualiopi-ok b{font-weight:800}
/* ===== Navigation principale : liens texte + 1 bouton ===== */
.who{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nav-link{font-family:'DM Sans',sans-serif;font-weight:600;font-size:15px;color:var(--encre);text-decoration:none;padding:8px 12px;border-radius:9px;line-height:1.4}
/* Bouton « Connexion » du header : action importante, on l'aligne sur la taille des liens de nav */
.btn.sm.nav-cta{font-size:15px;padding:9px 18px}
.nav-link:hover{background:#F4EFE7;color:var(--accent-dark);text-decoration:none}
.nav-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:520px){.nav-link{padding:6px 8px;font-size:14px}}
/* ===== Avatars cel-shading sur cartes & fiches SSR ===== */
.off-card .off-ava{width:100%;aspect-ratio:1/1;max-width:64px;margin:0 0 10px;border-radius:14px;overflow:hidden}
.off-detail-head{display:flex;gap:16px;align-items:flex-start}
.off-detail-head .off-ava{flex:none;width:84px;height:84px;border-radius:18px;overflow:hidden}
@media(max-width:520px){.off-detail-head .off-ava{width:64px;height:64px}}
/* ===== Guide de démarrage admin (onboarding, masquable) ===== */
.admin-guide{position:relative;background:linear-gradient(180deg,#FBF4FF,#fff);border:2px solid var(--encre);border-radius:var(--radius);box-shadow:var(--shadow-hard);padding:16px 18px;margin:0 0 18px}
.admin-guide .ag-head{display:flex;align-items:center;gap:8px;color:var(--accent-dark);font-family:'DM Sans';font-size:15px}
.admin-guide .ag-sub{margin:8px 0 6px;color:var(--gris-texte);font-size:14px}
.admin-guide .ag-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--encre)}
.admin-guide .ag-steps a{color:var(--accent-dark);font-weight:600}
.admin-guide .ag-x{position:absolute;top:6px;right:10px;background:none;border:0;font-size:24px;line-height:1;cursor:pointer;color:var(--gris-texte)}
.admin-guide .ag-x:hover{color:var(--encre)}
/* ===== Effets / micro-interactions (rendu pro) ===== */
.hiw-step{transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease}
.hiw-step:hover{transform:translateY(-5px);box-shadow:8px 12px 0 var(--encre)}
.hiw-num{box-shadow:0 6px 16px rgba(192,38,211,.35)}
.pfig{transition:transform .2s ease}
.pfig:hover{transform:translateY(-3px)}
.pfig b{background:linear-gradient(135deg,#C026D3,#E879F9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.off-card:hover{transform:translateY(-4px);box-shadow:8px 10px 0 rgba(28,28,34,.14)}
/* révélation douce au scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}}
/* ancre catalogue sous le header sticky */
#planning{scroll-margin-top:84px}
/* ===== P2 — KPIs en barre + 3 témoignages avec badge école ===== */
.proof-figs{display:flex;justify-content:center;flex-wrap:wrap;gap:0;background:#fff;border:2px solid var(--encre);border-radius:16px;box-shadow:var(--shadow-hard);padding:16px 8px;margin:0 auto 28px;max-width:760px}
.proof-figs .pfig{flex:1 1 150px;padding:6px 16px}
.proof-figs .pfig + .pfig{border-left:1.5px solid var(--gris-clair)}
.proof-quotes{grid-template-columns:repeat(3,1fr)}
.quote figcaption::before{content:none}
.q-ava{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#C026D3,#E879F9);color:#fff;font-family:'DM Sans',sans-serif;font-weight:800;font-size:12px;flex:none;box-shadow:0 4px 12px rgba(192,38,211,.35)}
@media(max-width:880px){.proof-quotes{grid-template-columns:1fr}.proof-figs .pfig + .pfig{border-left:0}}
/* ===== Nav : état actif (pages SSR) ===== */
.nav-link.active{color:var(--accent-dark);background:#F4EFE7}
/* ===================================================================
AUDIT DESIGN — système d'élévation unifié, désaturation, hiérarchie
=================================================================== */
/* 1) Une seule élévation pour les cartes de contenu : offset dur encre.
Le magenta est réservé aux actions (boutons) et au showcase hero. */
.card,.off-card,.hiw-step,.ccard,.proof-figs{box-shadow:var(--shadow-hard)}
.card:hover,.off-card:hover,.hiw-step:hover{box-shadow:8px 10px 0 rgba(26,26,26,.14)}
/* Témoignages : même langage d'ombre (on supprime la diffuse + le halo) */
.quote{box-shadow:var(--shadow-hard)!important}
.quote::after{display:none}
.quote:hover{box-shadow:8px 12px 0 rgba(26,26,26,.22)}
/* 2) Désaturation : numéros d'étapes en encre (accent structurel neutralisé) */
.hiw-num{background:var(--encre)!important;box-shadow:none}
/* 3) Hero : hiérarchie des 2 CTA + bouton secondaire plus « enfoncé » */
.hero-ctas .btn:not(.ghost){padding:14px 26px;font-size:16px}
.hero-ctas .btn.ghost{box-shadow:none;border:2px solid rgba(244,242,236,.55)}
.hero-ctas .btn.ghost:hover{border-color:var(--papier);background:rgba(255,255,255,.08)}
/* 4) Compteurs : chiffres à chasse fixe (anti-saut de layout / CLS) */
.hstat b,.pfig b{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* 5) Longueur de ligne confortable (lecture) */
.hero-copy p,.hiw-sub,.school-copy p{max-width:60ch}
/* 6) Bas de page : bandeau école en CLAIR (évite 2 blocs sombres d'affilée) */
.school-inner{background:#fff;box-shadow:var(--shadow-hard)}
.school-copy{color:var(--encre)}
.school-copy .hero-eyebrow{color:var(--accent-dark)}
.school-copy p{color:#44424a}
/* ===== Menu mobile (burger) — uniquement sur les pages qui ont le bouton ===== */
.nav-burger{display:none;background:none;border:0;color:var(--encre);cursor:pointer;padding:6px;border-radius:9px}
.nav-burger:hover{background:#F4EFE7}
@media(max-width:640px){
.nav-burger{display:inline-flex;align-items:center}
.bar-inner:has(.nav-burger){position:relative}
.bar-inner:has(.nav-burger) .who{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;align-items:stretch;gap:6px;background:#fff;border:2px solid var(--encre);border-radius:14px;box-shadow:var(--shadow-hard);padding:12px;z-index:60}
.bar-inner:has(.nav-burger) .who.open{display:flex}
.bar-inner:has(.nav-burger) .who .nav-link,.bar-inner:has(.nav-burger) .who .btn{width:100%;text-align:center}
}
/* ===== Skeleton du catalogue public (perçu perf) ===== */
.course-skel{height:230px;border:2px solid var(--gris-clair);border-radius:16px;background:linear-gradient(90deg,#EEE8DE 25%,#F6F1E8 37%,#EEE8DE 63%);background-size:400% 100%;animation:skelShimmer 1.3s ease infinite}
@media(prefers-reduced-motion:reduce){.course-skel{animation:none}}
/* ===== Hero : pas de carte de démo sur mobile ===== */
@media(max-width:900px){
.hero-visual{display:none!important}
}
/* ===== Feuille d'impression minimale ===== */
@media print{
.topbar,.nav-burger,.scroll-cue,.logos,.school-cta,.site-foot,.modal-bg,#asg,.tf-loader{display:none!important}
.hero{background:#fff!important;color:#000!important;border:0}
.hero-visual{display:none!important}
*{box-shadow:none!important}
}
/* ===== Lenis (smooth scroll) ===== */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
/* ===== Effets de scroll visibles (barre de progression + parallax hero) ===== */
#scrollProgress{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;pointer-events:none;
background:linear-gradient(90deg,var(--accent),var(--accent-light));
box-shadow:0 0 8px rgba(192,38,211,.5);will-change:width}
.hero-glow{will-change:transform}
@media(prefers-reduced-motion:reduce){#scrollProgress{display:none}.hero-glow{transform:none!important}}
/* ===== Stats bénéfice dans les bandes CTA (école + formateur) ===== */
.cta-figs{display:flex;gap:30px;flex-wrap:wrap;margin:16px 0 2px}
.cta-figs .cfig b{display:block;font-family:'DM Sans',sans-serif;font-size:23px;line-height:1;color:var(--accent-dark);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.cta-figs .cfig span{display:block;margin-top:3px;font-size:12.5px;color:#55535e;max-width:175px}
.formateur-cta .school-inner{background:linear-gradient(135deg,#FBF3FF,#fff)}
/* ===== Apport d'affaires / parrainage ===== */
.referral{max-width:1400px;margin:48px auto 0;padding:0 28px}
.referral-inner{text-align:center}
.referral .hero-eyebrow{color:var(--accent-dark)}
.referral h2{font-family:'DM Sans',sans-serif;font-size:26px;margin:8px 0 8px;line-height:1.15}
.referral-sub{max-width:640px;margin:0 auto 24px;color:#44424a;font-size:15px;line-height:1.55}
.referral-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;text-align:left}
.ref-card{background:#fff;border:2px solid var(--encre);border-radius:16px;box-shadow:var(--shadow-hard);padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px}
.ref-badge{align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--accent-dark);background:#F6E8FB;border:1.5px solid #E9C9F4;border-radius:999px;padding:3px 10px}
.ref-card h3{font-family:'DM Sans',sans-serif;font-size:17px;margin:6px 0 0;line-height:1.2}
.ref-card p{margin:0;color:#44424a;font-size:14px;line-height:1.5;flex:1}
.ref-card .btn{align-self:flex-start;margin-top:6px}
.referral-note{font-size:12.5px;color:#6A6A72;margin:16px auto 0;max-width:560px}
@media(max-width:780px){.referral-grid{grid-template-columns:1fr}}
/* ===== Ornements vectoriels d'ambiance (transitions douces entre sections) ===== */
#contenu{position:relative;z-index:0}
.bg-orn{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg-orn .orn{position:absolute;filter:blur(10px);opacity:.42;will-change:transform}
.bg-orn .orn1{top:24%;left:-150px;width:420px;height:420px}
.bg-orn .orn2{top:52%;right:-180px;width:520px;height:520px;opacity:.34}
.bg-orn .orn3{top:80%;left:-130px;width:400px;height:400px}
@media(max-width:780px){.bg-orn .orn{opacity:.3}.bg-orn .orn2{width:380px;right:-150px}}
/* ============================================================
HOME — Glassmorphism & dégradés (tout le bas, hero conservé)
============================================================ */
/* 1) Fond dégradé animé : on gonfle les blobs pour nourrir le flou du verre */
.bg-orn .orn{filter:blur(40px)}
.bg-orn .orn1{opacity:.55;width:520px;height:520px}
.bg-orn .orn2{opacity:.45;width:620px;height:620px}
.bg-orn .orn3{opacity:.55;width:500px;height:500px}
@keyframes ornDrift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(28px,-24px) scale(1.07)}100%{transform:translate(0,0) scale(1)}}
.bg-orn .orn1{animation:ornDrift 19s ease-in-out infinite}
.bg-orn .orn2{animation:ornDrift 24s ease-in-out infinite reverse}
.bg-orn .orn3{animation:ornDrift 21s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.bg-orn .orn{animation:none!important}}
/* 2) Cartes en verre dépoli (sections marketing) */
.hiw-step,.ref-card,.proof-figs,.quote,.school-inner{
background:rgba(255,255,255,.5)!important;
-webkit-backdrop-filter:blur(18px) saturate(165%);
backdrop-filter:blur(18px) saturate(165%);
border:1px solid rgba(255,255,255,.65)!important;
border-radius:20px!important;
box-shadow:0 12px 34px -10px rgba(134,25,143,.20), 0 2px 10px rgba(26,26,34,.05)!important;
}
.formateur-cta .school-inner{background:rgba(251,240,255,.5)!important}
.hiw-step:hover,.ref-card:hover{
transform:translateY(-6px);
box-shadow:0 22px 48px -12px rgba(134,25,143,.32), 0 4px 14px rgba(26,26,34,.07)!important;
}
/* dégradé lumineux sur le bord supérieur (finition chic) */
.hiw-step::before,.ref-card::before{
content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:20px 20px 0 0;
background:linear-gradient(90deg,var(--accent),var(--accent-light));opacity:.85;
}
.ref-card{position:relative;overflow:hidden}
/* 3) Cartes de cours : CEL-SHADING (style maison, plus de verre ni de reflet) */
.card{
background:#fff!important;
-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
border:2px solid var(--encre)!important;
border-radius:16px!important;
box-shadow:var(--shadow-hard)!important;
}
.card:hover{transform:translateY(-4px);box-shadow:8px 10px 0 rgba(26,26,26,.20)!important}
.card::after,.hiw-step::after,.ref-card::after{display:none!important}
/* 4) Titres de section avec dégradé animé (touche premium) */
.hiw h2,#ref-title{
background:linear-gradient(120deg,var(--encre) 0%,var(--accent-dark) 50%,var(--accent) 75%,var(--encre) 100%);
background-size:220% auto;
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
animation:txtShine 8s linear infinite;
}
@keyframes txtShine{to{background-position:220% center}}
/* 5) Reflet de lumière qui balaie les cartes au survol (effet verre chic) */
.hiw-step,.ref-card,.card{position:relative;overflow:hidden}
.hiw-step::after,.ref-card::after,.card::after{
content:"";position:absolute;top:0;left:-75%;width:55%;height:100%;pointer-events:none;z-index:2;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
transform:skewX(-18deg);transition:left .65s cubic-bezier(.2,.7,.3,1);
}
.hiw-step:hover::after,.ref-card:hover::after,.card:hover::after{left:135%}
/* 6) Apparition au scroll : un glissé + léger flou qui se résorbe */
.reveal{opacity:0;transform:translateY(26px);filter:blur(6px);
transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1),filter .7s ease}
.reveal.in{opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){
.hiw h2,#ref-title{animation:none}
.hiw-step::after,.ref-card::after,.card::after{display:none}
.reveal{opacity:1!important;transform:none!important;filter:none!important}
}
/* ============================================================
ZONE PREMIUM SOMBRE — réinvention du bas (esprit hero)
============================================================ */
.lowzone{position:relative;overflow:hidden;margin-top:64px;padding:74px 0 88px;
background:linear-gradient(180deg,#1B0F20 0%,#241026 45%,#1A0D1F 100%);
border-top:4px solid var(--accent)}
.lowzone-glow{position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(620px 420px at 14% 10%, rgba(192,38,211,.30), transparent 60%),
radial-gradient(700px 480px at 88% 58%, rgba(232,121,249,.20), transparent 60%),
radial-gradient(520px 380px at 42% 102%, rgba(192,38,211,.18), transparent 62%)}
.lowzone>section{position:relative;z-index:1}
/* espacements internes resserrés (la zone porte déjà la respiration) */
.lowzone .hiw,.lowzone .proof{margin-top:0}
.lowzone .proof{margin-top:44px}
.lowzone .school-cta{margin-top:40px}
.lowzone .referral{margin-top:48px}
/* Textes en clair sur fond sombre */
.lowzone .hiw-sub{color:#C9C4D2}
.lowzone .hiw-step h3{color:#fff}
.lowzone .hiw-step p{color:#C2BDCD}
.lowzone .pfig span{color:#C2BDCD}
.lowzone .quote blockquote{color:#EFEBF4}
.lowzone .quote figcaption,.lowzone .quote figcaption span{color:#C2BDCD}
.lowzone .school-copy h2{color:#fff}
.lowzone .school-copy p{color:#D6D1E0}
.lowzone .school-copy .hero-eyebrow,.lowzone .referral .hero-eyebrow{color:var(--accent-light)}
.lowzone .referral-sub{color:#D6D1E0}
.lowzone .referral-sub b{color:#fff}
.lowzone .ref-card h3{color:#fff}
.lowzone .ref-card p{color:#C2BDCD}
.lowzone .referral-note{color:#9D98A9}
.lowzone .cta-figs .cfig b{color:var(--accent-light)}
.lowzone .cta-figs .cfig span{color:#C2BDCD}
/* Titres dégradés adaptés au sombre (clair → magenta) */
.lowzone .hiw h2,.lowzone #ref-title{
background:linear-gradient(120deg,#fff 0%,var(--accent-light) 52%,var(--accent) 86%,#fff 100%);
background-size:220% auto;
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* Cartes en CEL-SHADING sur fond sombre (bord net + ombre dure, style maison) */
.lowzone .hiw-step,.lowzone .ref-card,.lowzone .proof-figs,.lowzone .quote,.lowzone .school-inner{
background:#2a1430!important;
border:2px solid rgba(255,255,255,.82)!important;
border-radius:16px!important;
box-shadow:6px 7px 0 var(--accent-dark)!important;
-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.lowzone .formateur-cta .school-inner{background:#311439!important}
.lowzone .hiw-step:hover,.lowzone .ref-card:hover{
transform:translateY(-4px);box-shadow:9px 11px 0 var(--accent-dark)!important}
/* plus d'effet brillant : reflet balayant + liserés dégradés + scintillements coupés */
.lowzone .hiw-step::after,.lowzone .ref-card::after{display:none!important}
.lowzone .hiw-step::before,.lowzone .ref-card::before{display:none!important}
.lowzone .hiw h2,.lowzone #ref-title{animation:none!important}
.topbanner{animation:none!important;background:linear-gradient(90deg,#86198F,#C026D3)!important}
/* ===== Barre d'annonce apport d'affaires (haut de page) ===== */
.topbanner{display:flex;align-items:center;justify-content:center;gap:10px;
padding:9px 16px;text-decoration:none;font-size:13.5px;color:#fff;line-height:1.2;
background:linear-gradient(90deg,#6d1577,#C026D3 50%,#6d1577);background-size:200% auto;
animation:tbShine 7s linear infinite}
.topbanner b{font-weight:700;color:#fff}
.topbanner .tb-ico{display:inline-flex}.topbanner .tb-ico svg{width:17px;height:17px}
.topbanner .tb-arrow{font-weight:700;transition:transform .2s ease}
.topbanner:hover .tb-arrow{transform:translateX(4px)}
@keyframes tbShine{to{background-position:200% center}}
@media(max-width:600px){.topbanner{font-size:11.5px;padding:8px 12px;gap:7px}.topbanner .tb-ico{display:none}}
#parrainage{scroll-margin-top:88px}
/* ===== Comment ça marche : illustrations animées ===== */
.lowzone .hiw-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.lowzone .hiw-num{margin-bottom:0}
.hiw-ico{position:relative;display:inline-flex;color:#D2CCDC;width:58px;height:58px}
.hiw-ico svg{width:58px;height:58px;overflow:visible;animation:icoFloat 5s ease-in-out infinite}
.hiw-ico::before{content:"";position:absolute;inset:-12px;border-radius:50%;z-index:-1;
background:radial-gradient(circle,rgba(192,38,211,.5),transparent 68%);
animation:icoPulse 3.2s ease-in-out infinite}
.hiw-step:nth-child(2) .hiw-ico svg{animation-delay:.5s}
.hiw-step:nth-child(3) .hiw-ico svg{animation-delay:1s}
.hiw-step:nth-child(2) .hiw-ico::before{animation-delay:.5s}
.hiw-step:nth-child(3) .hiw-ico::before{animation-delay:1s}
@keyframes icoPulse{0%,100%{opacity:.4;transform:scale(.88)}50%{opacity:.85;transform:scale(1.14)}}
@keyframes icoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){.hiw-ico svg,.hiw-ico::before,.topbanner{animation:none}}
/* ===== Apport d'affaires : illustration + montant ===== */
.ref-card{align-items:flex-start}
.ref-ico{display:inline-flex;color:var(--accent-light);width:42px;height:42px;margin-bottom:2px;
filter:drop-shadow(0 4px 12px rgba(192,38,211,.45))}
.ref-ico svg{width:42px;height:42px}
.ref-amount{display:inline-block}
/* ============================================================
BAS ÉPURÉ — alléger le cel-shading, aérer, retirer le superflu
============================================================ */
.lowzone{padding:84px 0 96px}
.lowzone .proof{margin-top:58px}
.lowzone .school-cta{margin-top:54px}
.lowzone .referral{margin-top:66px}
.lowzone .hiw-grid{gap:22px}
.lowzone .proof-quotes{gap:26px}
/* Cartes principales : bord net mais discret + ombre dure plus légère */
.lowzone .hiw-step,.lowzone .ref-card,.lowzone .school-inner{
border:1.5px solid rgba(255,255,255,.5)!important;
box-shadow:4px 5px 0 rgba(192,38,211,.5)!important}
.lowzone .hiw-step:hover,.lowzone .ref-card:hover{
box-shadow:6px 8px 0 rgba(192,38,211,.6)!important}
/* Stats : barre discrète sans bloc lourd */
.lowzone .proof-figs{
background:transparent!important;
border:1px solid rgba(255,255,255,.15)!important;
box-shadow:none!important}
/* Témoignages : à plat (épuré), filet d'accent à gauche, sans cadre */
.lowzone .quote{
background:transparent!important;border:0!important;box-shadow:none!important;
border-left:2px solid rgba(232,121,249,.55)!important;border-radius:0!important;
padding:2px 0 6px 18px!important}
/* Témoignage unique, centré et léger */
.lowzone .quote-solo{max-width:640px;margin:30px auto 0;text-align:center}
.lowzone .quote-solo blockquote{margin:0;font-size:16px;line-height:1.55;color:#EFEBF4;font-style:italic}
.lowzone .quote-solo figcaption{margin-top:12px;display:inline-flex;align-items:center;gap:8px;color:#C2BDCD;font-size:13px}
/* Deux portes (école / formateur) compactes */
.dual-cta{max-width:1400px;margin:54px auto 0;padding:0 28px}
.dual-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dual-col{background:#2a1430;border:1.5px solid rgba(255,255,255,.5);border-radius:16px;
box-shadow:4px 5px 0 rgba(192,38,211,.5);padding:26px 24px;display:flex;flex-direction:column;gap:5px}
.dual-col .hero-eyebrow{color:var(--accent-light)}
.dual-col h3{font-family:'DM Sans',sans-serif;font-size:20px;margin:4px 0 0;color:#fff}
.dual-col p{margin:0;color:#C2BDCD;font-size:14px;line-height:1.5;flex:1}
.dual-col .btn{align-self:flex-start;margin-top:12px}
.dual-col.formateur-col{background:#311439}
@media(max-width:780px){.dual-grid{grid-template-columns:1fr}}
/* Icônes magenta nettes + bloc fusionné */
.hiw-ico{color:var(--accent-light)!important}
.dual-ico{display:inline-flex;color:var(--accent-light);width:40px;height:40px;margin-bottom:4px;
filter:drop-shadow(0 4px 12px rgba(192,38,211,.4))}
.dual-ico svg{width:40px;height:40px}
.dual-col .dual-ref{flex:none;margin:14px 0 0;font-size:13px;color:#9D98A9}
.lnk-ref{background:none;border:0;color:var(--accent-light);font:inherit;font-weight:700;
cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px}
.lnk-ref:hover{color:#fff}
/* ===== Draw-on des icônes (le tracé se dessine au scroll, façon pixel2motion) ===== */
.hiw-ico svg path,.hiw-ico svg circle,.hiw-ico svg rect,
.dual-ico svg path,.dual-ico svg circle,.dual-ico svg rect{stroke-dasharray:380;stroke-dashoffset:0}
/* État de repos TOUJOURS visible (offset 0) : sur mobile, animation-fill-mode:forwards
sur les propriétés SVG ne tient pas, donc on ne s'appuie jamais dessus pour la visibilité.
Le tracé « draw-on » reste joué par l'animation (keyframe from{380}) quand .in apparaît. */
.hiw-step.reveal .hiw-ico svg path,.hiw-step.reveal .hiw-ico svg circle,.hiw-step.reveal .hiw-ico svg rect,
.dual-col.reveal .dual-ico svg path,.dual-col.reveal .dual-ico svg circle,.dual-col.reveal .dual-ico svg rect{stroke-dashoffset:0}
.hiw-step.in .hiw-ico svg path,.hiw-step.in .hiw-ico svg circle,.hiw-step.in .hiw-ico svg rect,
.dual-col.in .dual-ico svg path,.dual-col.in .dual-ico svg circle,.dual-col.in .dual-ico svg rect{stroke-dashoffset:0;animation:svgDraw 1.2s ease forwards}
@keyframes svgDraw{from{stroke-dashoffset:380}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
.hiw-ico svg *,.dual-ico svg *{stroke-dasharray:none!important;stroke-dashoffset:0!important;animation:none!important}}
/* ===== Sélection multiple de missions (barre flottante) ===== */
.sel-btn.on{background:var(--accent-dark)!important;color:#fff!important;border-color:var(--accent-dark)!important}
.card.card-sel{outline:3px solid var(--accent);outline-offset:2px}
.sel-bar{position:fixed;left:50%;bottom:18px;z-index:95;display:flex;align-items:center;gap:14px;
background:var(--encre);color:#fff;border:2px solid var(--accent);border-radius:14px;padding:10px 16px;
box-shadow:0 14px 34px rgba(0,0,0,.35);transform:translateX(-50%) translateY(160%);
transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.sel-bar.show{transform:translateX(-50%) translateY(0)}
.sel-bar .sel-txt{font-size:14px}
.sel-bar .sel-txt b{color:var(--accent-light);font-variant-numeric:tabular-nums}
.sel-clear{background:none;border:0;color:#D9D4DE;cursor:pointer;font:inherit;text-decoration:underline;text-underline-offset:2px}
.sel-clear:hover{color:#fff}
@media(prefers-reduced-motion:reduce){.sel-bar{transition:none}}
@media(max-width:560px){.sel-bar{left:12px;right:12px;transform:translateY(160%);justify-content:space-between;gap:8px}.sel-bar.show{transform:translateY(0)}}
/* ===== Carte « mission » au format offre (plus de cases à cocher) ===== */
.mcard{display:flex;flex-direction:column;gap:9px;padding:18px 18px 15px}
.mc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.mc-dom{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1.5px solid;line-height:1.1}
.mc-rate{font-family:'DM Sans',sans-serif;font-weight:800;font-size:25px;color:var(--encre);line-height:1;white-space:nowrap}
.mc-rate small{font-size:12px;font-weight:600;color:var(--gris-texte)}
.mcard h3{font-family:'DM Sans',sans-serif;font-size:18px;margin:0;line-height:1.2}
.mc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:13px;color:var(--gris-texte)}
.mc-meta i{color:var(--gris-clair);font-style:normal}
.mc-net{font-size:10px;font-weight:700;background:#EDE9FE;border:1px solid #C4B5FD;color:#6D28D9;border-radius:999px;padding:1px 7px;margin-left:2px}
.mc-obj{margin:1px 0 0;font-size:13.5px;color:#55535e;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mc-more{color:var(--accent-dark);font-weight:600;white-space:nowrap}
.mc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:8px}
.mc-signal{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--gris-texte);flex-wrap:wrap}
.mc-signal i{color:var(--gris-clair);font-style:normal}
.dom-cyber{background:#FCE7F1;border-color:#F3C0DC;color:#9D174D}
.dom-data{background:#E7F0FE;border-color:#BFD6F7;color:#1E40AF}
.dom-cloud{background:#E2F6FB;border-color:#B3E5EF;color:#0E7490}
.dom-dev{background:#E8F8ED;border-color:#C0E9CD;color:#15803D}
.dom-net{background:#FEF0E2;border-color:#F8D7B0;color:#9A3412}
.dom-sys{background:#F2ECFB;border-color:#D8C9F0;color:#6D28D9}
.dom-default{background:#EFEAF0;border-color:#D9D0DB;color:#4A3C50}
/* ===== Logo animé (reveal au chargement, home) ===== */
.logo-anim{animation:lgBadge .62s cubic-bezier(.2,.85,.3,1.3) both}
.logo-anim .lg-t1,.logo-anim .lg-t2,.logo-anim .lg-t3{transform-box:fill-box;transform-origin:center}
.logo-anim .lg-t1{animation:lgPart .45s cubic-bezier(.2,.9,.3,1.45) .34s both}
.logo-anim .lg-t2{animation:lgPart .45s cubic-bezier(.2,.9,.3,1.45) .46s both}
.logo-anim .lg-t3{animation:lgPart .45s cubic-bezier(.2,.9,.3,1.45) .58s both}
.logo-anim .lg-gl{animation:lgFade .6s ease .3s both}
.brand:has(.logo-anim) .word{display:inline-block;animation:wordReveal .55s ease .5s both}
@keyframes lgBadge{0%{opacity:0;transform:scale(.3) rotate(-28deg)}65%{opacity:1;transform:scale(1.08) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
@keyframes lgPart{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes lgFade{from{opacity:0}to{opacity:1}}
@keyframes wordReveal{0%{opacity:0;transform:translateX(-8px);clip-path:inset(0 100% 0 0)}100%{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
@media(prefers-reduced-motion:reduce){.logo-anim,.logo-anim *,.brand:has(.logo-anim) .word{animation:none!important}}
/* ===== Infobulle stylée globale ===== */
.tipbox{position:fixed;z-index:9999;max-width:320px;background:var(--encre);color:#fff;
border:1.5px solid var(--accent);border-radius:10px;padding:8px 11px;
font-family:'Inter',system-ui,sans-serif;font-size:12.5px;line-height:1.5;
box-shadow:0 12px 30px rgba(0,0,0,.38);pointer-events:none;
white-space:normal;animation:tipIn .12s ease}
.tipbox b{color:var(--accent-light)}
.pwa-install{position:fixed;left:16px;bottom:16px;z-index:80;display:inline-flex;align-items:center;gap:8px;
background:var(--encre);color:#fff;border:2px solid var(--accent);border-radius:999px;padding:10px 16px;
font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.3)}
.pwa-install:hover{background:var(--accent-dark)}
@media(max-width:520px){.pwa-install{left:12px;bottom:12px;font-size:13px;padding:9px 13px}}
.asg-cta{display:inline-block;margin-top:8px;padding:7px 13px;border-radius:9px;background:var(--accent);color:#fff!important;font-weight:700;font-size:13px;text-decoration:none;border:0;cursor:pointer}
.asg-cta:hover{background:var(--accent-dark)}
@keyframes tipIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.tipbox{animation:none}}
/* ===== Admin · Documents (grille : une colonne par pièce) ===== */
.gx{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;font-weight:800;font-size:13px;text-decoration:none;border:1.5px solid;line-height:1}
.gx.ok{background:#E7F8EC;border-color:#15803D;color:#15803D}
.gx.warn{background:#FEF3C7;border-color:#B45309;color:#B45309}
.gx.bad{background:#FDE2E2;border-color:#B91C1C;color:#B91C1C}
.gx.miss{background:#F0EEF2;border-color:#D8D2DC;color:#9A93A3}
.gx-act{display:inline-flex;align-items:center;gap:3px;justify-content:center}
.gx-b{width:21px;height:21px;border-radius:6px;border:1.5px solid;cursor:pointer;font-weight:800;font-size:12px;padding:0;line-height:1}
.gx-b.ok{background:#15803D;border-color:#15803D;color:#fff}
.gx-b.no{background:#fff;border-color:#B91C1C;color:#B91C1C}
/* ===== Hero : preuves concrètes + revenu type + cartes vivantes ===== */
.hero-revenu{margin:14px 0 0;font-size:14px;color:#D9D4DE}
.hero-revenu b{color:#fff;font-weight:700}
.hero-visual{transition:opacity .36s ease}
.hero-visual.hero-swap{opacity:.18}
@media(prefers-reduced-motion:reduce){.hero-visual{transition:none}}
/* ============================================================
MOBILE POLISH — UX/UI petits écrans (sans impacter le desktop)
============================================================ */
@media(max-width:680px){
/* En-tête compact */
.brand .logo{width:46px;height:46px}
.brand .word{font-size:19px}
.topbar .bar-inner{padding-top:8px;padding-bottom:8px}
/* Marges latérales réduites */
.wrap{padding:26px 16px 52px}
.hero-inner{padding:24px 18px 30px}
.hiw,.proof,.school-cta,.referral,.dual-cta{padding-left:16px;padding-right:16px}
/* Hero */
.hero h1{font-size:29px;letter-spacing:-1px}
.hero-ctas{flex-direction:column}
.hero-ctas .btn{width:100%;text-align:center;justify-content:center}
.hero-stats{gap:18px}
.hero-tag{font-size:13px}
/* Titres */
.page-title{font-size:23px}
.hiw h2,.referral h2,.school-copy h2{font-size:22px}
.subtitle,.hiw-sub,.referral-sub{font-size:14px}
/* Catalogue : recherche pleine largeur */
.filters-quick{gap:8px}
.filters-quick .fq-search{flex:1 1 100%;order:-1}
.filters-quick .lnk{margin-left:0!important}
/* Modales un peu plus serrées */
.modal-bg{padding:12px}
.modal{padding:18px}
.modal h3{font-size:19px}
.code-input{font-size:28px;letter-spacing:10px}
/* Zone sombre */
.lowzone{padding:48px 0 56px}
}
/* Onglets admin : défilement horizontal au lieu de multi-lignes */
@media(max-width:760px){
.tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:6px;padding-bottom:8px}
.tabs button{flex:0 0 auto;white-space:nowrap}
.tabs-sep{display:none}
}
/* ============================================================
Mode SWIPE des missions (façon Tinder)
============================================================ */
#swipeView{max-width:460px;margin:6px auto 0}
.swipe-count{text-align:center;font-size:12.5px;color:var(--gris-texte);font-variant-numeric:tabular-nums;margin-bottom:8px;min-height:16px}
.swipe-stack{position:relative;height:420px}
.sw-slot{position:absolute;inset:0;display:flex;transition:transform .25s ease}
.sw-slot:not(.front){pointer-events:none}
.sw-slot:not(.front) .sw-card{transform:scale(calc(1 - var(--d)*0.045)) translateY(calc(var(--d)*12px));filter:saturate(.9)}
.sw-card{position:relative;flex:1;background:#fff;border:2px solid var(--encre);border-radius:20px;box-shadow:var(--shadow-hard);padding:20px;display:flex;flex-direction:column;gap:9px;cursor:grab;touch-action:pan-y;user-select:none;overflow:hidden;will-change:transform}
.sw-slot.front .sw-card:active{cursor:grabbing}
.sw-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.sw-card h3{font-family:'DM Sans',sans-serif;font-size:21px;margin:0;line-height:1.2}
.sw-obj{margin:4px 0 0;padding-left:18px;color:#55535e;font-size:14px;line-height:1.5;display:flex;flex-direction:column;gap:4px}
.sw-est{margin-top:auto;font-size:13px;color:var(--gris-texte)}
.sw-est b{color:var(--encre)}
.sw-tap{align-self:flex-start;margin-top:4px;font-size:13px;font-weight:600;color:var(--accent-dark);cursor:pointer}
.sw-ov{position:absolute;top:18px;font-family:'DM Sans',sans-serif;font-weight:800;font-size:20px;padding:5px 12px;border-radius:10px;border:3px solid;opacity:0;pointer-events:none}
.sw-ov.like{right:16px;color:#15803D;border-color:#15803D;transform:rotate(-10deg)}
.sw-ov.pass{left:16px;color:#B91C1C;border-color:#B91C1C;transform:rotate(10deg)}
.swipe-actions{display:flex;justify-content:center;gap:28px;margin-top:18px}
.sw-btn{width:60px;height:60px;border-radius:50%;border:2.5px solid var(--encre);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:4px 5px 0 var(--encre);transition:transform .12s}
.sw-btn:active{transform:translateY(2px)}
.sw-btn.pass{color:#B91C1C}
.sw-btn.like{color:#fff;background:var(--accent);border-color:var(--accent-dark)}
.sw-btn:disabled{opacity:.4;cursor:default}
.swipe-hint{text-align:center;color:var(--gris-texte);font-size:12.5px;margin:14px auto 0;max-width:360px}
.sw-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:20px;border:2px dashed var(--gris-clair);border-radius:20px;color:var(--gris-texte)}
.sw-empty b{font-family:'DM Sans',sans-serif;font-size:20px;color:var(--encre)}
@media(max-width:520px){.swipe-stack{height:62vh;min-height:380px}.sw-card h3{font-size:20px}}
/* Écran d'explication du swipe (1re fois) */
.sw-coach{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:16px}
#swipeView{position:relative}
.sw-coach-box{background:#fff;border:2px solid var(--encre);border-radius:18px;box-shadow:var(--shadow-hard);padding:22px 20px;max-width:340px;text-align:center;display:flex;flex-direction:column;gap:12px}
.sw-coach-emoji{font-size:30px}
.sw-coach-box>b{font-family:'DM Sans',sans-serif;font-size:18px}
.sw-coach-row{display:flex;align-items:center;gap:10px;text-align:left;font-size:13.5px;color:#44424a;line-height:1.4}
.sw-coach-ic{flex:none;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;border:2px solid}
.sw-coach-ic.like{color:#15803D;border-color:#15803D;background:#E7F8EC}
.sw-coach-ic.pass{color:#B91C1C;border-color:#B91C1C;background:#FDE2E2}
.sw-coach-box .btn{margin-top:4px;width:100%;text-align:center;justify-content:center}
/* =========================================================
BAS DE HOME · « Comment ça marche » + « Deux usages »
(icônes SVG inline · entrée 100% CSS qui finit toujours visible)
========================================================= */
.hiwx{background:#140C20;padding:72px 28px;position:relative;overflow:hidden}
.hiwx::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(192,38,211,.18) 1.5px,transparent 1.5px);background-size:38px 38px;pointer-events:none;opacity:.5}
.hiwx-in,.dualx-in{max-width:1320px;margin:0 auto;position:relative;z-index:1}
.hiwx-head,.dualx-head{text-align:center;margin-bottom:48px}
.hiwx-ey,.dualx-ey{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-light);margin:0 0 12px}
.dualx-ey{color:rgba(232,121,249,.6)}
.hiwx-h2,.dualx-h2{font-family:'DM Sans',sans-serif;font-size:28px;font-weight:800;color:#fff;letter-spacing:-.5px;line-height:1.2;margin:0 0 10px}
.hiwx-p,.dualx-p{font-size:15px;color:rgba(244,242,236,.55);line-height:1.5;margin:0}
.dualx-p{color:rgba(244,242,236,.45)}
.hiwx-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative}
/* connecteur lumineux + point qui voyage 1 → 2 → 3 */
.hiwx-steps::before{content:"";position:absolute;top:52px;left:17%;right:17%;height:2px;border-radius:2px;
background:linear-gradient(90deg,transparent,rgba(232,121,249,.32),rgba(192,38,211,.32),rgba(232,121,249,.32),transparent);z-index:0}
.hiwx .sc{background:rgba(255,255,255,.05);border:1px solid rgba(232,121,249,.16);border-radius:16px;padding:28px 22px 24px;position:relative;overflow:hidden;
backdrop-filter:blur(2px);transition:transform .35s cubic-bezier(.2,.7,.3,1),border-color .3s,box-shadow .35s}
/* Révélation au défilement (activée seulement si JS marque .js-reveal → repli visible sinon) */
.hiwx.js-reveal .sc,.dualx.js-reveal .dc{opacity:0}
.hiwx.js-reveal .sc.in-view{animation:scIn .85s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--sd,0s)}
.dualx.js-reveal .dc.in-view{animation:scIn .9s cubic-bezier(.16,1,.3,1) both}
/* reflet diagonal qui balaie la carte au survol */
.hiwx .sc::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(120deg,transparent 42%,rgba(255,255,255,.1) 50%,transparent 58%);
transform:translateX(-120%);transition:transform .8s ease}
.hiwx .sc:hover{transform:translateY(-7px);border-color:rgba(232,121,249,.55);box-shadow:0 22px 46px -16px rgba(192,38,211,.6)}
.hiwx .sc:hover::after{transform:translateX(120%)}
@keyframes scIn{from{opacity:0;transform:translateY(40px) scale(.97)}to{opacity:1;transform:none}}
.hiwx .nw{position:relative;width:52px;height:52px;margin-bottom:18px}
.hiwx .nc{position:relative;z-index:2;width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;font-family:'DM Sans',sans-serif;font-size:20px;font-weight:800;display:flex;align-items:center;justify-content:center}
.hiwx .pr{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);z-index:1}
.hiwx .pr1{animation:rpls 2.6s cubic-bezier(.3,0,.7,1) infinite}
.hiwx .pr2{animation:rpls 2.6s cubic-bezier(.3,0,.7,1) 1s infinite}
@keyframes rpls{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.6);opacity:0}}
.hiwx .si{display:block;color:var(--accent-light);margin-bottom:14px;line-height:0}
.hiwx .si svg{width:26px;height:26px}
.hiwx .hx-st{font-family:'DM Sans',sans-serif;font-size:17px;font-weight:700;color:#fff;line-height:1.3;margin:0 0 10px}
.hiwx .sb{font-size:13.5px;color:rgba(244,242,236,.6);line-height:1.6;margin:0}
.dualx{background:#09050F;padding:72px 28px;position:relative;overflow:hidden}
.dualx-row{display:flex;align-items:stretch}
.dualx .dc{flex:1;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:34px 28px 26px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.dualx .de{background:rgba(192,38,211,.07);border-top:3px solid var(--accent)}
.dualx .df{background:rgba(255,255,255,.04);border-top:3px solid rgba(255,255,255,.18)}
.dualx .deco{position:absolute;right:-4px;bottom:-16px;font-family:'DM Sans',sans-serif;font-size:150px;font-weight:900;line-height:1;pointer-events:none;user-select:none}
.dualx .de .deco{color:rgba(192,38,211,.06)}
.dualx .df .deco{color:rgba(255,255,255,.035)}
.dualx .ci{display:block;color:var(--accent-light);margin-bottom:16px;line-height:0;position:relative;z-index:1}
.dualx .ci svg{width:32px;height:32px}
.dualx .df .ci{color:rgba(255,255,255,.65)}
.dualx .cey{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:0 0 8px;position:relative;z-index:1}
.dualx .de .cey{color:rgba(232,121,249,.75)}
.dualx .df .cey{color:rgba(255,255,255,.4)}
.dualx .ct{font-family:'DM Sans',sans-serif;font-size:22px;font-weight:700;color:#fff;line-height:1.25;margin:0 0 10px;position:relative;z-index:1}
.dualx .cd{font-size:13.5px;color:rgba(244,242,236,.55);line-height:1.6;margin:0 0 20px;flex:1;position:relative;z-index:1}
.dualx .cs{display:flex;align-items:center;padding:16px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:22px;position:relative;z-index:1}
.dualx .csi{flex:1}
.dualx .csv{display:block;font-family:'DM Sans',sans-serif;font-size:26px;font-weight:800;color:#fff;line-height:1}
.dualx .csl{display:block;font-size:12px;color:rgba(244,242,236,.4);margin-top:5px}
.dualx .csdiv{width:1px;height:34px;background:rgba(255,255,255,.1);margin:0 16px}
.dualx .cb{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:13px 20px;border:none;border-radius:12px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:700;cursor:pointer;margin-bottom:14px;position:relative;z-index:1}
.dualx .cb svg{width:16px;height:16px}
.dualx .cbp{background:var(--accent);color:#fff}
.dualx .cbp:hover{background:var(--accent-dark)}
.dualx .cbg{background:rgba(255,255,255,.09);color:#fff;border:1px solid rgba(255,255,255,.18)}
.dualx .cbg:hover{background:rgba(255,255,255,.14)}
.dualx .cr{font-size:12.5px;text-align:center;color:rgba(244,242,236,.4);margin:0;position:relative;z-index:1}
.dualx .cr-lnk{background:none;border:0;color:var(--accent-light);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;padding:0}
.dualx .cr-lnk:hover{color:#fff}
.dualx .dor{display:flex;flex-direction:column;align-items:center;padding:0 18px}
.dualx .orl{flex:1;width:1px;background:rgba(255,255,255,.08);min-height:48px}
.dualx .orb{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;color:rgba(255,255,255,.3);margin:10px 0}
/* ── Effets : relief des cartes (halo de lumière / aurora retiré) ── */
.hiwx .nc{box-shadow:0 0 0 0 rgba(192,38,211,.55);animation:lzNum 2.8s ease-out infinite;animation-delay:var(--sd,0s)}
@keyframes lzNum{0%{box-shadow:0 0 0 0 rgba(192,38,211,.55)}70%,100%{box-shadow:0 0 0 15px rgba(192,38,211,0)}}
.dualx .dc{transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .3s}
.dualx .de:hover{transform:translateY(-6px);border-color:rgba(232,121,249,.45);box-shadow:0 26px 54px -18px rgba(192,38,211,.55)}
.dualx .df:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.3);box-shadow:0 26px 54px -18px rgba(0,0,0,.6)}
.dualx .dc .deco{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.dualx .dc:hover .deco{transform:scale(1.12) rotate(-4deg)}
.dualx .cb{transition:background .25s,transform .2s,box-shadow .25s}
.dualx .cbp:hover{transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(192,38,211,.75)}
.dualx .cb:active{transform:translateY(0)}
/* ── Icônes SVG ultra-animées (corps toujours visible → 100% fiable) ── */
.hiwx .si svg,.dualx .ci svg{overflow:visible;width:30px;height:30px}
.dualx .ci svg{width:34px;height:34px}
/* halo magenta qui respire + léger flottement (sur le conteneur) */
.hiwx .si,.dualx .ci{animation:icoBreathe 3.6s ease-in-out infinite;will-change:transform,filter}
.dualx .df .ci{animation:icoBreatheW 3.6s ease-in-out infinite}
@keyframes icoBreathe{0%,100%{transform:translateY(0);filter:drop-shadow(0 0 0 rgba(232,121,249,0))}50%{transform:translateY(-4px);filter:drop-shadow(0 0 10px rgba(232,121,249,.65))}}
@keyframes icoBreatheW{0%,100%{transform:translateY(0);filter:drop-shadow(0 0 0 rgba(255,255,255,0))}50%{transform:translateY(-4px);filter:drop-shadow(0 0 9px rgba(255,255,255,.5))}}
/* MÉGAPHONE : petit « coup de gueule » + ondes sonores qui jaillissent */
.zico-mega .z-body{transform-origin:11px 16px;animation:megaShout 2.8s ease-in-out infinite}
@keyframes megaShout{0%,72%,100%{transform:rotate(0)}80%{transform:rotate(-8deg)}88%{transform:rotate(-2deg)}}
.zico-mega .zw{opacity:0;transform-origin:18px 16px;animation:megaWave 2.8s ease-out infinite}
.zico-mega .zw2{animation-delay:.24s}
@keyframes megaWave{0%{opacity:0;transform:scale(.5)}25%{opacity:.95}55%{opacity:0;transform:scale(1.25)}100%{opacity:0}}
/* ÉCLAIR : halo qui pulse + flash blanc électrique */
.zico-bolt .z-bolt{animation:boltGlow 2.2s ease-in-out infinite}
@keyframes boltGlow{0%,100%{filter:none}50%{filter:drop-shadow(0 0 7px rgba(232,121,249,.95))}}
.zico-bolt .z-flash{stroke:#fff;opacity:0;animation:boltFlash 2.2s steps(1) infinite}
@keyframes boltFlash{0%,80%,100%{opacity:0}82%{opacity:.95}84%{opacity:0}87%{opacity:.7}89%{opacity:0}}
/* STYLO : la signature se trace pendant que le stylo glisse */
.zico-pen .z-sign{stroke-dasharray:48;stroke-dashoffset:48;animation:penSign 3.2s ease-in-out infinite}
@keyframes penSign{0%{stroke-dashoffset:48}45%{stroke-dashoffset:0}78%{stroke-dashoffset:0}100%{stroke-dashoffset:48}}
.zico-pen .z-pen{animation:penGlide 3.2s ease-in-out infinite}
@keyframes penGlide{0%{transform:translate(-5px,3px)}45%{transform:translate(4px,-1px)}78%{transform:translate(4px,-1px)}100%{transform:translate(-5px,3px)}}
/* IMMEUBLE : fenêtres qui s'allument en cascade */
.zico-build .zwin{fill:currentColor;stroke:none;opacity:.22;animation:winBlink 2.8s ease-in-out infinite}
.zico-build .z-wins rect:nth-child(2){animation-delay:.45s}
.zico-build .z-wins rect:nth-child(3){animation-delay:.9s}
@keyframes winBlink{0%,100%{opacity:.18}50%{opacity:1}}
/* FORMATEUR : étoile qui scintille */
.zico-person .z-spark{transform-origin:25px 8px;animation:sparkTwinkle 2.6s ease-in-out infinite}
@keyframes sparkTwinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}40%{opacity:1;transform:scale(1) rotate(25deg)}72%{opacity:.25;transform:scale(.6) rotate(45deg)}}
/* ── Touche premium : bordure dégradée rotative + numéro joaillier ── */
@property --hxang{syntax:"";initial-value:0deg;inherits:false}
@keyframes hxSpin{to{--hxang:360deg}}
/* bordure conique qui tourne autour des cartes étapes */
.hiwx .sc::before{content:"";position:absolute;inset:0;border-radius:16px;padding:1.5px;z-index:1;pointer-events:none;
background:conic-gradient(from var(--hxang),transparent 52%,rgba(232,121,249,.95),rgba(192,38,211,.95),transparent 98%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
opacity:.6;transition:opacity .35s;animation:hxSpin 7s linear infinite}
.hiwx .sc:hover::before{opacity:1}
/* numéro : fond dégradé + anneau dégradé rotatif (on retire les vieux pulses) */
.hiwx .pr{display:none}
.hiwx .nc{background:linear-gradient(135deg,#F0A6FB,#C026D3 55%,#86198F)}
.hiwx .nw::before{content:"";position:absolute;inset:-5px;border-radius:50%;z-index:0;
background:conic-gradient(from var(--hxang),transparent 0 8%,var(--accent-light) 30%,var(--accent) 55%,transparent 80%);
animation:hxSpin 3.6s linear infinite}
.hiwx .nw::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;background:#17101f;z-index:1}
/* même bordure rotative, plus douce, sur les cartes « deux usages » */
.dualx .dc::before{content:"";position:absolute;inset:0;border-radius:20px;padding:1.5px;z-index:1;pointer-events:none;
background:conic-gradient(from var(--hxang),transparent 55%,rgba(232,121,249,.7),transparent 95%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
opacity:0;transition:opacity .4s;animation:hxSpin 9s linear infinite}
.dualx .dc:hover::before{opacity:1}
.hiwx .si svg{width:34px;height:34px}
.dualx .ci svg{width:38px;height:38px}
@media(prefers-reduced-motion:reduce){
.hiwx .sc,.hiwx .pr,.hiwx .si,.dualx .ci,.zico *,.hiwx .sc::before,.dualx .dc::before,.hiwx .nw::before,
.hiwx::after,.dualx::after,.hiwx-steps::after,.hiwx .nc{animation:none!important}
.hiwx .pr{opacity:0}
.zico-pen .z-sign{stroke-dashoffset:0!important}
.zico-mega .zw,.zico-person .z-spark,.zico-build .zwin{opacity:1!important}
.zico-bolt .z-flash{opacity:0!important}
}
@media(max-width:760px){
.hiwx,.dualx{padding:48px 16px}
.hiwx-head,.dualx-head{margin-bottom:32px}
.hiwx-h2,.dualx-h2{font-size:23px}
.hiwx-steps{grid-template-columns:1fr;gap:14px}
.hiwx-steps::before,.hiwx-steps::after{display:none} /* connecteur horizontal hors-sujet en colonne */
.dualx-row{flex-direction:column}
.dualx .dor{flex-direction:row;padding:6px 0}
.dualx .orl{width:auto;height:1px;min-height:0}
.dualx .orb{margin:0 12px}
.dualx .deco{font-size:120px}
}
/* =========================================================
ADMIN · refonte mobile (header .topbar, onglets, KPIs, PWA)
========================================================= */
@media(max-width:760px){
/* Header compact (l'admin utilise l'ancien .topbar, sans burger) */
.topbar:not(:has(.bar-inner)){padding:10px 14px;gap:8px}
.topbar:not(:has(.bar-inner)) .brand .word{font-size:18px}
.topbar:not(:has(.bar-inner)) .brand .logo{width:38px;height:38px}
.topbar:not(:has(.bar-inner)) .who{gap:8px}
.topbar:not(:has(.bar-inner)) .who .btn.sm{padding:7px 10px;font-size:12.5px}
.profile{gap:8px}
.profile-chip{padding:3px 8px 3px 3px}
.profile-chip .nm{display:none} /* on garde l'avatar « A », on cache « Admin » */
.profile-chip .car{display:none}
.menu{right:0;top:50px;min-width:min(280px,calc(100vw - 28px))}
/* Onglets : une seule ligne défilante (plutôt que 4 lignes empilées) */
.tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
scrollbar-width:none;margin:6px 0 18px;padding-bottom:6px;
scroll-snap-type:x proximity}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:0 0 auto;scroll-snap-align:start;padding:9px 14px;font-size:13px;
box-shadow:2px 3px 0 var(--encre)}
.tabs button.on{box-shadow:2px 3px 0 var(--accent-dark)}
.tabs-sep{display:none}
/* Vue minimale mobile : seulement le flux essentiel Cours · Positionnements · Contrats
(le reste — dashboard, planning, demandes, parrainages, documents — reste joignable
via le menu profil en haut à droite) */
.tabs button[data-tab="dash"],
.tabs button[data-tab="planning"],
.tabs button[data-tab="demandes"],
.tabs button[data-tab="parrainages"],
.tabs button[data-tab="documents"]{display:none}
#dashView .page-title,#dashView .subtitle{display:none} /* titres redondants, on gagne de la hauteur */
/* KPIs : 2 colonnes denses sur téléphone */
.kpis{grid-template-columns:1fr 1fr;gap:12px}
.vs-kpis{grid-template-columns:1fr 1fr;gap:12px}
/* Respiration générale */
#dashView .page-title{font-size:24px}
.panel{padding:18px}
/* Barres de filtres : recherche pleine largeur en premier */
.filters-quick{gap:8px}
.filters-quick .fq-search{flex:1 1 100%;order:-1}
.filters-quick select{flex:1 1 calc(50% - 4px)}
/* En-têtes de panneau (titre + select) ne se chevauchent pas */
.panel select{max-width:100%}
}
@media(max-width:420px){
.kpis,.vs-kpis{grid-template-columns:1fr}
.topbar:not(:has(.bar-inner)) .who .btn.sm{padding:7px 9px}
.topbar:not(:has(.bar-inner)) .brand .word{font-size:0} /* logo seul, on gagne de la place */
.topbar:not(:has(.bar-inner)) .brand .logo{width:40px;height:40px}
}
/* PWA installée : respecter l'encoche (safe-area) en haut */
@media all and (display-mode:standalone){
.topbar{padding-top:max(12px,env(safe-area-inset-top))}
body{padding-bottom:env(safe-area-inset-bottom)}
}
/* Le mode Swipe (Tinder) est réservé au mobile : on masque l'option sur desktop */
@media(min-width:701px){ #vSwipe{display:none} }
/* Outil de résolution : conflits de planning (admin) */
.conflits-box{background:#FEF2F2;border:2px solid #E11D2A;border-radius:14px;padding:14px 16px;margin:10px 0 16px;box-shadow:4px 5px 0 rgba(225,29,42,.25)}
.conflits-box .cf-head{font-family:'DM Sans',sans-serif;font-weight:800;color:#B91C1C;font-size:16px}
.conflits-box .cf-sub{font-size:13px;color:#7f1d1d;margin:4px 0 12px}
.conflits-box .cf-item{background:#fff;border:1.5px solid #FBD5D5;border-radius:10px;padding:10px 12px;margin-bottom:8px}
.conflits-box .cf-who{font-size:13.5px;margin-bottom:8px;color:var(--encre)}
.conflits-box .cf-vs{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.conflits-box .cf-c{flex:1 1 240px;background:var(--papier);border:1px solid var(--gris-clair);border-radius:9px;padding:9px 11px;font-size:13px}
.conflits-box .cf-c .btn{margin-top:8px}
.conflits-box .cf-x{color:#B91C1C;font-weight:800;font-size:18px}
.conflits-box .cf-keep{margin-top:8px;text-align:right}
/* Halo de localisation PERSISTANT autour de la carte ciblée (jusqu'au prochain clic) */
.card.card-target{position:relative;z-index:4;border-radius:18px;
box-shadow:0 0 0 3px var(--accent),0 0 28px 8px rgba(192,38,211,.5)!important;
animation:cardHalo 1.7s ease-in-out infinite}
@keyframes cardHalo{0%,100%{box-shadow:0 0 0 3px var(--accent),0 0 20px 5px rgba(192,38,211,.4)}50%{box-shadow:0 0 0 3px var(--accent-light),0 0 36px 11px rgba(192,38,211,.7)}}
@media(prefers-reduced-motion:reduce){.card.card-target{animation:none;box-shadow:0 0 0 3px var(--accent),0 0 24px 7px rgba(192,38,211,.55)!important}}
/* Hero : badge « Nouveau cours » rouge clignotant (haut-droite) + date d'ajout + flash carte */
.hero-card{cursor:pointer}
.hero-card .hc-new-badge{position:absolute;top:12px;right:12px;z-index:6;
background:#E11D2A;color:#fff;font-family:'Inter',sans-serif;font-weight:700;font-size:9.5px;letter-spacing:.7px;text-transform:uppercase;
padding:4px 9px;border-radius:6px;box-shadow:0 2px 8px rgba(225,29,42,.35);
animation:hcNewPulse 2.2s ease-in-out infinite}
@keyframes hcNewPulse{0%,100%{opacity:1}50%{opacity:.6}}
.hero-card .hc-added{font-family:'Inter',sans-serif;font-size:11px;font-weight:500;color:#6c6c74;margin-top:-4px;margin-bottom:2px}
@media(prefers-reduced-motion:reduce){.hero-card .hc-new-badge{animation:none}}
/* =========================================================
BAS DE HOME · cartes en style CEL-SHADING (comme les cartes hero)
fond clair · bordure encre · ombre magenta franche · texte foncé
========================================================= */
/* ÉTAPES */
.hiwx .sc{background:#fff;border:2.5px solid var(--encre);border-radius:18px;box-shadow:7px 8px 0 var(--accent);
backdrop-filter:none;transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s}
.hiwx .sc::before,.hiwx .sc::after{display:none} /* plus de bordure rotative ni de reflet */
.hiwx .sc:hover{transform:translate(-2px,-2px);box-shadow:10px 12px 0 var(--accent)}
.hiwx .hx-st{color:var(--encre)}
.hiwx .sb{color:#55535e}
.hiwx .si{color:var(--accent)}
.hiwx .nw::before,.hiwx .nw::after{display:none} /* plus d'anneau rotatif */
.hiwx .nc{border:2.5px solid var(--encre);box-shadow:2px 3px 0 var(--accent-dark);animation:none}
/* flottement léger SANS halo lumineux */
.hiwx .si,.dualx .ci{animation:lzFloat 3.8s ease-in-out infinite;filter:none}
.dualx .df .ci{animation:lzFloat 3.8s ease-in-out infinite}
@keyframes lzFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.zico-bolt .z-flash{stroke:var(--accent-light)} /* flash visible sur fond blanc */
/* DEUX USAGES */
.dualx .dc{background:#fff;border:2.5px solid var(--encre);border-radius:18px;box-shadow:7px 8px 0 var(--accent);
transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s}
.dualx .dc::before{display:none}
.dualx .de,.dualx .df{border-top:2.5px solid var(--encre)}
.dualx .dc:hover{transform:translate(-2px,-2px);box-shadow:10px 12px 0 var(--accent)}
.dualx .ci{color:var(--accent)}
.dualx .df .ci{color:var(--encre)}
.dualx .cey{color:var(--accent-dark)}
.dualx .df .cey{color:#6c6c74}
.dualx .ct{color:var(--encre)}
.dualx .cd{color:#55535e}
.dualx .cs{border-top:1px solid var(--gris-clair);border-bottom:1px solid var(--gris-clair)}
.dualx .csv{color:var(--encre)}
.dualx .csl{color:#8a8794}
.dualx .csdiv{background:var(--gris-clair)}
.dualx .deco{color:rgba(192,38,211,.07)}
.dualx .df .deco{color:rgba(28,28,34,.05)}
.dualx .cbp{border:2px solid var(--encre);box-shadow:3px 4px 0 var(--accent-dark);border-radius:10px}
.dualx .cbg{background:#fff;color:var(--encre);border:2px solid var(--encre);border-radius:10px;box-shadow:3px 4px 0 var(--encre)}
.dualx .cr{color:#6c6c74}
.dualx .cr-lnk{color:var(--accent-dark)}
.dualx .orl{background:var(--gris-clair)}
.dualx .orb{background:#fff;border:2px solid var(--encre);color:var(--encre)}