/* ============================================================
   site-pro.css — thème « pro » du portfolio, sombre et clair (2026-10-12).
   Inspiration Mobbin : noir neutre uni, gris et blanc, très peu de
   couleur ; moins de blocs encadrés (listes et colonnes séparées par des
   filets fins), seules les vignettes à image gardent une forme de carte.
   Le bleu n'apparaît plus que sur de rares détails (focus, paquets du
   schéma, curseur). Chargée en dernier, s'applique aux deux thèmes :
   les jetons du clair sont en section 9. Pour revenir en arrière,
   retirer la balise <link> dans layouts/public.php.
   ============================================================ */

/* ── 1. Jetons ─────────────────────────────────────────────── */
html:root body.ng-site:not(.ng-admin) {
  --pro-bg: #0a0a0a;
  --pro-s1: #111111;
  --pro-s2: #161616;
  --pro-s3: #1c1c1c;
  --pro-line: rgba(255,255,255,.08);
  --pro-line-2: rgba(255,255,255,.14);
  --pro-line-3: rgba(255,255,255,.4);
  --pro-fg: #ededed;
  --pro-tint: rgba(255,255,255,.025);
  --pro-tint-2: rgba(255,255,255,.05);
  --pro-sel: rgba(255,255,255,.18);
  --pro-nav: rgba(14,14,14,.78);
  --pro-menu: #121212;
  --pro-drop: rgba(0,0,0,.8);
  --pro-net-link: rgba(255,255,255,.18);

  --v3-bg: var(--pro-bg);
  --v3-s1: var(--pro-s1);
  --v3-s2: var(--pro-s2);
  --v3-s3: var(--pro-s3);
  --v3-line: var(--pro-line);
  --v3-shadow: 0 0 0 1px var(--pro-line) inset;
  --v3-glass: none;
  --v3-blue-soft: #c9c9c9;          /* les rares textes « accent » deviennent gris clair */
  --v3-accent-txt: var(--ng-heading);
  --v3-accent-glow: transparent;

  --ng-html-bg: var(--pro-bg);
  --ng-bg-grad: none;
  --ng-text: #d4d4d4;
  --ng-heading: #ededed;
  --ng-t75: rgba(237,237,237,.78); --ng-t70: rgba(237,237,237,.7);  --ng-t65: rgba(237,237,237,.64);
  --ng-t60: rgba(237,237,237,.6);  --ng-t55: rgba(237,237,237,.55); --ng-t50: rgba(237,237,237,.5);
  --ng-t45: rgba(237,237,237,.44); --ng-t40: rgba(237,237,237,.4);  --ng-t35: rgba(237,237,237,.34);
  --ng-t30: rgba(237,237,237,.28);
  --ng-inner: rgba(255,255,255,.05);
  --ng-inner-hover: rgba(255,255,255,.08);
  --ng-glass-edge: var(--v3-shadow);
  --ng-glass-edge-inset: none;
  --ng-accent-soft: #ededed;
  --m-spot: rgba(255,255,255,.04);
  --m-spot-edge: rgba(255,255,255,.1);
  background: var(--pro-bg);
}
html:root:has(body.ng-site:not(.ng-admin)) { background: var(--pro-page, #0a0a0a); scrollbar-color: var(--pro-scroll, #2a2a2a) transparent; }
html:root body.ng-site:not(.ng-admin) ::selection { background: var(--pro-sel); color: var(--pro-fg); }

/* ── 2. Fond uni : plus de halos, de grille ni de lumière au curseur ── */
html:root body.ng-site:not(.ng-admin) .ng-glows,
html:root body.ng-site:not(.ng-admin) .ng-glowzone::before,
html:root body.ng-site:not(.ng-admin) .ng-glowzone-photo { display: none; }
html:root body.ng-site:not(.ng-admin)::after { opacity: .02; }

/* ── 3. En-tête et menus : verre neutre, filet fin ── */
html:root body.ng-site:not(.ng-admin) .ng-navbar::before,
html:root body.ng-site:not(.ng-admin) .ng-toolpill::before {
  background: var(--pro-nav); box-shadow: 0 0 0 1px var(--pro-line) inset;
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
html:root body.ng-site:not(.ng-admin) :is(.ng-navdrop-menu, .ng-mobile-panel, .v3-export-menu, .ng-privacy-notice-inner) {
  background: var(--pro-menu); box-shadow: 0 0 0 1px var(--pro-line) inset, 0 24px 60px -20px var(--pro-drop);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ── 4. Surfaces génériques (autres pages) : aplat + filet, sans flou ── */
html:root body.ng-site:not(.ng-admin) :is(.ng-card, .ng-card-flat, .ng-cta-band) {
  background: var(--pro-s1); box-shadow: 0 0 0 1px var(--pro-line) inset;
  -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 18px;
}
html:root body.ng-site:not(.ng-admin) .ng-card-hover:hover { background: var(--pro-s2); box-shadow: 0 0 0 1px var(--pro-line-2) inset; transform: none; }
html:root body.ng-site:not(.ng-admin) :is(.ng-chip, .ng-filter-btn, .ng-tabbtn) { background: var(--pro-s2); }
html:root body.ng-site:not(.ng-admin) :is(.ng-filter-btn.ng-filter-active, .ng-tabbtn.active) { background: var(--pro-fg); color: var(--pro-bg); }
html:root body.ng-site:not(.ng-admin) .ng-btn-ghost { background: var(--pro-s2); }
html:root body.ng-site:not(.ng-admin) .ng-btn-ghost:hover { background: var(--pro-s3); }
html:root body.ng-site:not(.ng-admin) :is(.ng-banner-icon) { background: var(--pro-s2); color: var(--ng-t70); }
html:root body.ng-site:not(.ng-admin) .ng-banner-label { color: var(--ng-t50); }

/* ── 5. Typo : titres blancs, mots en italique en gris (plus de bleu) ── */
html:root body.ng-site:not(.ng-admin) :is(.v3-title, .ng-h1, .ng-h2-lg) .v3-serif { color: var(--ng-t45); }
html:root body.ng-site:not(.ng-admin) .v3-kicker { color: var(--ng-t40); }
html:root body.ng-site:not(.ng-admin) .v3-kicker b { color: var(--ng-t70); }
html:root body.ng-site:not(.ng-admin) .v3-kicker::before { display: none; }
html:root body.ng-site:not(.ng-admin) .v3-kicker::after { width: 40px; background: var(--pro-line-2); }
html:root body.ng-site:not(.ng-admin) :is(.v3-link span, .v3-project-more span) { color: inherit; }
html:root body.ng-site:not(.ng-admin) .v3-link:hover { color: var(--pro-fg); }
html:root body.ng-site:not(.ng-admin) .v3-hero-tags .ng-chip-icon { color: var(--ng-t50); }
html:root body.ng-site:not(.ng-admin) .v3-metric-val sup { color: var(--ng-t45); }

/* Décors bleus de la passe précédente : retirés en sombre */
html:root body.ng-site:not(.ng-admin) :is(.v3-tile, .v3-project, .v3-post-card, .v3-about-card, .v3-home-post, .tl-card)::after,
html:root body.ng-site:not(.ng-admin) .v3-metric-val::after { display: none; }

/* ── 6. Accueil : moins de blocs ───────────────────────────── */
/* Chiffres : une ligne entre deux filets, sans boîte */
html:root body.ng-site:not(.ng-admin) .v3-metrics {
  background: none; border-radius: 0;
  box-shadow: 0 1px 0 var(--pro-line) inset, 0 -1px 0 var(--pro-line) inset;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html:root body.ng-site:not(.ng-admin) .v3-metric { padding-left: 0; }
html:root body.ng-site:not(.ng-admin) .v3-metric + .v3-metric { padding-left: clamp(22px, 3vw, 34px); }

/* « Ce que je fais » : trois colonnes ouvertes, filet en haut */
html:root body.ng-site:not(.ng-admin) .v3-bento { gap: clamp(24px, 3vw, 40px); }
html:root body.ng-site:not(.ng-admin) .v3-tile {
  background: none; border-radius: 0; padding: 28px 0 0; overflow: visible;
  box-shadow: 0 1px 0 var(--pro-line) inset;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: box-shadow .3s ease;
}
html:root body.ng-site:not(.ng-admin) .v3-tile:hover { background: none; transform: none; box-shadow: 0 1px 0 var(--pro-line-3) inset; }
html:root body.ng-site:not(.ng-admin) .v3-tile-ico,
html:root body.ng-site:not(.ng-admin) .v3-tile:nth-child(1) .v3-tile-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--pro-s2); color: var(--ng-heading); box-shadow: 0 0 0 1px var(--pro-line) inset; }
html:root body.ng-site:not(.ng-admin) .v3-tile-num { color: var(--ng-t35); }
html:root body.ng-site:not(.ng-admin) .v3-tile-tags span,
html:root body.ng-site:not(.ng-admin) .v3-layer-skills span,
html:root body.ng-site:not(.ng-admin) .v3-soft span { background: var(--pro-s2); color: var(--ng-t60); }

/* Couches réseau : liste à filets au lieu de cartes empilées */
html:root body.ng-site:not(.ng-admin) .v3-layers { gap: 0; box-shadow: 0 1px 0 var(--pro-line) inset; }
html:root body.ng-site:not(.ng-admin) .v3-layer {
  background: none; border-radius: 0; padding: 20px 4px;
  box-shadow: 0 -1px 0 var(--pro-line) inset;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html:root body.ng-site:not(.ng-admin) .v3-layer:hover { background: var(--pro-tint); }
html:root body.ng-site:not(.ng-admin) .v3-layer:hover .v3-layer-skills span { background: var(--pro-s3); }
html:root body.ng-site:not(.ng-admin) .v3-layer-id i { box-shadow: none; }

/* Schéma réseau : bandeau sombre neutre au lieu du grand aplat bleu */
html:root body.ng-site .v3-netmap { background: var(--pro-s1); box-shadow: 0 0 0 1px var(--pro-line) inset; border-radius: 18px; }
html:root body.ng-site .v3-netmap::before { background: radial-gradient(60% 90% at 50% 50%, var(--pro-tint), transparent 70%); }
html:root body.ng-site .v3-netmap .v3-net-link { stroke: var(--pro-net-link); stroke-width: 1; }
html:root body.ng-site .v3-netmap .v3-net-node rect { fill: var(--pro-tint-2); }
html:root body.ng-site .v3-netmap .v3-net-node text { fill: var(--ng-t70); }
html:root body.ng-site .v3-netmap .v3-net-node .dot { fill: var(--pro-fg); }
html:root body.ng-site .v3-netmap .v3-net-packet { fill: #4d6bff; }
html:root body.ng-site .v3-netmap .v3-net-packet.g { fill: #3ddc97; }
html:root body.ng-site .v3-netmap .v3-visual-chip { background: var(--pro-s3); color: var(--ng-t70); font-weight: 500; }
html:root body.ng-site .v3-netmap .v3-visual-chip i { background: var(--pro-fg); }
html:root body.ng-site .v3-netmap .v3-visual-chip.c2 i { background: #3ddc97; }

/* Projets et posts : vignette (image) + texte dessous, sans boîte autour */
html:root body.ng-site:not(.ng-admin) :is(.v3-project, .v3-post-card, .v3-home-post) {
  background: none; box-shadow: none; border-radius: 0; overflow: visible;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html:root body.ng-site:not(.ng-admin) :is(.v3-project, .v3-post-card, .v3-home-post):hover { background: none; transform: none; }
html:root body.ng-site:not(.ng-admin) .v3-projects { row-gap: 40px; column-gap: 24px; }
html:root body.ng-site:not(.ng-admin) .v3-project-media {
  margin: 0; border-radius: 14px; background: var(--pro-s1);
  outline: 1px solid var(--pro-line); outline-offset: -1px;
}
html:root body.ng-site:not(.ng-admin) .v3-project-media img { transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .3s; }
html:root body.ng-site:not(.ng-admin) .v3-project:hover .v3-project-media img { transform: scale(1.025); }
html:root body.ng-site:not(.ng-admin) .v3-project-body { padding: 16px 2px 0; gap: 6px; }
html:root body.ng-site:not(.ng-admin) .v3-project h3 { font-size: 17px; }
html:root body.ng-site:not(.ng-admin) .v3-project:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--pro-line-2); }
html:root body.ng-site:not(.ng-admin) .v3-project-tag { background: rgba(10,10,10,.72); border-radius: 7px; }
html:root body.ng-site:not(.ng-admin) .v3-home-post { padding: 0; }
html:root body.ng-site:not(.ng-admin) .v3-home-post .v3-post-visual { border-radius: 14px; overflow: hidden; outline: 1px solid var(--pro-line); outline-offset: -1px; }

/* À propos : colonnes ouvertes, filet en haut */
html:root body.ng-site:not(.ng-admin) .v3-about,
html:root body.ng-site:not(.ng-admin) .v3-about-grid { gap: clamp(28px, 4vw, 56px); }
html:root body.ng-site:not(.ng-admin) .v3-about-card {
  background: none; border-radius: 0; padding: 26px 0 0;
  box-shadow: 0 1px 0 var(--pro-line) inset;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* Logos « Ils m'ont fait confiance » : chacun dans une boîte (aplat + filet fin) */
html:root body.ng-site:not(.ng-admin) .v3-trust a { background: var(--pro-s1); box-shadow: 0 0 0 1px var(--pro-line) inset; border-radius: 14px; padding: 10px 18px 10px 10px; color: var(--ng-t60); -webkit-backdrop-filter: none; backdrop-filter: none; transition: background .25s, box-shadow .25s, color .25s; }
html:root body.ng-site:not(.ng-admin) .v3-trust a:hover { background: var(--pro-s2); box-shadow: 0 0 0 1px var(--pro-line-2) inset; color: var(--ng-heading); transform: none; }
html:root body.ng-site:not(.ng-admin) .v3-trust img { width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 0 0 1px var(--pro-line); }

/* Carte du hero sous le portrait */
html:root body.ng-site .v3-visual .v3-visual-card { background: rgba(17,17,17,.86); box-shadow: 0 0 0 1px var(--pro-line) inset; }

/* Page Contact */
html:root body.ng-site:not(.ng-admin) :is(.ct-clock, .ct-copy, .ct-ico) { background: var(--pro-s2); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ── 7. Timeline Expériences : liste à la manière d'un journal ── */
html:root body.ng-site:not(.ng-admin) .tl-card {
  background: none; box-shadow: 0 -1px 0 var(--pro-line) inset; border-radius: 0;
  padding: 18px 0 30px; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible;
}
html:root body.ng-site:not(.ng-admin) .tl-card::before { display: none; }
html:root body.ng-site:not(.ng-admin) .tl-item:hover .tl-card { background: none; transform: none; }
html:root body.ng-site:not(.ng-admin) .tl-item:last-child .tl-card { box-shadow: none; }
html:root body.ng-site:not(.ng-admin) .tl::after { background: linear-gradient(180deg, var(--pro-line-3), var(--pro-line-2)); box-shadow: none; }
html:root body.ng-site:not(.ng-admin) .tl::before { background: var(--pro-line); }
html:root body.ng-site:not(.ng-admin) .tl-node i { background: var(--pro-bg); box-shadow: inset 0 0 0 2px var(--pro-line-3); }
html:root body.ng-site:not(.ng-admin) .tl-item.is-on .tl-node i,
html:root:not(.m-on) body.ng-site:not(.ng-admin) .tl-node i { background: var(--pro-fg); box-shadow: 0 0 0 4px var(--pro-bg); transform: none; }
html:root body.ng-site:not(.ng-admin) .tl-item.is-now .tl-node i { background: #3ddc97; }
html:root body.ng-site:not(.ng-admin) .tl-type { background: var(--pro-s2); }
html:root body.ng-site:not(.ng-admin) .tl-type i { box-shadow: none; }
html:root body.ng-site:not(.ng-admin) .tl-btn { background: var(--pro-s2); }
html:root body.ng-site:not(.ng-admin) .tl-btn:hover { background: var(--pro-s3); }
html:root body.ng-site:not(.ng-admin) .tl-logo { box-shadow: 0 0 0 1px var(--pro-line); }

/* ── 8. Mobile ── */
@media (max-width: 720px) {
  html:root body.ng-site:not(.ng-admin) .v3-metric,
  html:root body.ng-site:not(.ng-admin) .v3-metric + .v3-metric { padding-left: 0; padding-right: 12px; }
  html:root body.ng-site:not(.ng-admin) .v3-layer { padding: 18px 0; }
}

/* ── 9. Thème clair, même direction (2026-10-12) ──────────────
   Toutes les règles ci-dessus s'appliquent aux deux thèmes (préfixe
   html:root) ; ce bloc ne change que les jetons pour le clair :
   blanc, gris neutres, filets noirs très légers, texte presque noir. */
html.light:root body.ng-site:not(.ng-admin) {
  --pro-bg: #ffffff;
  --pro-s1: #fafafa;
  --pro-s2: #f4f4f5;
  --pro-s3: #ebebec;
  --pro-line: rgba(0,0,0,.08);
  --pro-line-2: rgba(0,0,0,.13);
  --pro-line-3: rgba(0,0,0,.35);
  --pro-fg: #0a0a0a;
  --pro-tint: rgba(0,0,0,.02);
  --pro-tint-2: rgba(0,0,0,.035);
  --pro-sel: rgba(0,0,0,.12);
  --pro-nav: rgba(255,255,255,.8);
  --pro-menu: #ffffff;
  --pro-drop: rgba(0,0,0,.14);
  --pro-net-link: rgba(0,0,0,.2);

  --v3-blue-soft: #3f3f46;
  --ng-text: #262626;
  --ng-heading: #0a0a0a;
  --ng-t75: rgba(10,10,10,.8);  --ng-t70: rgba(10,10,10,.74); --ng-t65: rgba(10,10,10,.68);
  --ng-t60: rgba(10,10,10,.62); --ng-t55: rgba(10,10,10,.57); --ng-t50: rgba(10,10,10,.52);
  --ng-t45: rgba(10,10,10,.47); --ng-t40: rgba(10,10,10,.43); --ng-t35: rgba(10,10,10,.38);
  --ng-t30: rgba(10,10,10,.32);
  --ng-inner: rgba(0,0,0,.04);
  --ng-inner-hover: rgba(0,0,0,.07);
  --ng-accent-soft: #0a0a0a;
  --v3-accent-txt: #0a0a0a;
  --m-spot: rgba(0,0,0,.03);
  --m-spot-edge: rgba(0,0,0,.08);
}
html.light:root:has(body.ng-site:not(.ng-admin)) { background: #ffffff; scrollbar-color: #d4d4d4 transparent; }
/* Le bouton principal reste à l'encre (noir en clair, blanc en sombre) : déjà géré par site-v3.css. */

/* ── 10. Aucun effet de survol sur les blocs (2026-10-12) ─────
   Demande de l'utilisateur : plus de liseré qui s'allume sur les bords,
   de changement de fond, de soulèvement ni de zoom d'image quand la
   souris passe sur une carte. L'état survolé = l'état normal. */
html:root body.ng-site:not(.ng-admin) :is(.ng-card, .ng-card-flat, .ng-card-hover):hover {
  background: var(--pro-s1); box-shadow: 0 0 0 1px var(--pro-line) inset; transform: none;
}
html:root body.ng-site:not(.ng-admin) .v3-tile:hover { box-shadow: 0 1px 0 var(--pro-line) inset; transform: none; background: none; }
html:root body.ng-site:not(.ng-admin) .v3-layer:hover { background: none; }
html:root body.ng-site:not(.ng-admin) .v3-layer:hover .v3-layer-skills span { background: var(--pro-s2); color: var(--ng-t60); }
html:root body.ng-site:not(.ng-admin) .v3-trust a:hover { background: var(--pro-s1); box-shadow: 0 0 0 1px var(--pro-line) inset; color: var(--ng-t60); transform: none; }
html:root body.ng-site:not(.ng-admin) :is(.v3-project, .v3-post-card, .v3-home-post, .v3-about-card, .v3-metrics, .tl-card):hover { background: none; transform: none; }
html:root body.ng-site:not(.ng-admin) .v3-project:hover .v3-project-media img,
html:root body.ng-site:not(.ng-admin) :is(.v3-post-card, .v3-home-post):hover img { transform: none; }
html:root body.ng-site:not(.ng-admin) .v3-project:hover h3 { text-decoration: none; }
html:root body.ng-site:not(.ng-admin) .tl-item:hover .tl-card { transform: none; }
html:root body.ng-site:not(.ng-admin) .tl-item:hover .tl-when, html:root body.ng-site:not(.ng-admin) .tl-item:hover .tl-year { transform: none; }
html:root body.ng-site:not(.ng-admin) .v3-metric:hover .v3-metric-val::after { width: 22px; }
/* Ancien halo « .m-spot » (au cas où une page l'ajouterait encore) */
html.m-on body.ng-site .m-spot:hover { background-image: none; }
html.m-on .m-spot::before { display: none; }

/* ── 11. Inspiration Mobbin (mobbin.com/mcp, 2026-10-12) ──────
   Relevé sur la page : texte #141414 / gris #717171 / gris clair #adadad
   (sombre : #ededed et ses transparences 64 / 48 / 24 / 16 / 8 %),
   filets presque invisibles, titres en deux tons (gris puis noir) au lieu
   de l'italique, en-têtes de section centrés + sous-titre gris, aucune
   police à chasse fixe, boutons pilule compacts, grands panneaux très
   arrondis, bleu quasi absent. */
html:root body.ng-site:not(.ng-admin) {
  --mb-1: #ededed;                        /* texte principal */
  --mb-2: rgba(237,237,237,.64);          /* texte secondaire */
  --mb-3: rgba(237,237,237,.42);          /* texte tertiaire (partie grise des titres) */
  --v3-mono: var(--v3-font);              /* plus de police technique : tout en Geist */
  --pro-line: rgba(237,237,237,.08);
  --pro-line-2: rgba(237,237,237,.16);
  --ng-heading: var(--mb-1);
  font-weight: 430;
}
html.light:root body.ng-site:not(.ng-admin) {
  --mb-1: #141414;
  --mb-2: #717171;
  --mb-3: #adadad;
  --pro-bg: #ffffff;
  --pro-s1: #f7f7f7;
  --pro-s2: #f1f1f1;
  --pro-s3: #e9e9e9;
  --pro-line: rgba(64,64,64,.08);
  --pro-line-2: rgba(65,65,65,.16);
  --ng-heading: var(--mb-1);
  --ng-text: #262626;
  --v3-ink: #141414;
}
html:root body.ng-site:not(.ng-admin)::after { display: none; }   /* plus de grain : aplats nets */

/* Titres : graisse 600, interlettrage moins serré, deux tons */
html:root body.ng-site:not(.ng-admin) :is(.v3-title, .ng-h1, .ng-h2, .ng-h2-lg) { font-weight: 600; letter-spacing: -.025em; color: var(--mb-1); }
html:root body.ng-site:not(.ng-admin) .v3-title { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; max-width: 22ch; }
html:root body.ng-site:not(.ng-admin) :is(.v3-title, .ng-h1, .ng-h2, .ng-h2-lg) .v3-serif {
  font-family: inherit; font-style: normal; font-size: 1em; font-weight: inherit; letter-spacing: inherit; color: var(--mb-3);
}
html:root body.ng-site:not(.ng-admin) :is(.v3-lead, .v3-hero-lead) { color: var(--mb-2); }
html:root body.ng-site:not(.ng-admin) .v3-hero-lead strong { color: var(--mb-1); font-weight: 600; }

/* En-têtes de section centrés : petit sur-titre gris + grand titre + sous-titre */
html:root body.ng-site:not(.ng-admin) .v3-head { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); }
html:root body.ng-site:not(.ng-admin) .v3-head > div:first-child { display: flex; flex-direction: column; align-items: center; }
html:root body.ng-site:not(.ng-admin) .v3-head .v3-title, html:root body.ng-site:not(.ng-admin) .v3-head .v3-lead { margin-left: auto; margin-right: auto; }
html:root body.ng-site:not(.ng-admin) .v3-head .v3-head-actions { justify-content: center; }
html:root body.ng-site:not(.ng-admin) .v3-kicker {
  justify-content: center; gap: 8px; margin-bottom: 14px;
  font-family: var(--v3-font); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mb-2);
}
html:root body.ng-site:not(.ng-admin) .v3-kicker b { color: var(--mb-3); font-weight: 500; }
html:root body.ng-site:not(.ng-admin) .v3-kicker b::after { content: ' ·'; }
html:root body.ng-site:not(.ng-admin) .v3-kicker::after { display: none; }

/* Petits libellés : plus de capitales espacées façon terminal */
html:root body.ng-site:not(.ng-admin) :is(.v3-metric-lab, .v3-mini-title, .v3-hero-name, .v3-tile-num, .v3-layer-id, .tl-type, .tl-to, .tl-live, .ng-banner-label, .v3-project-tag) {
  text-transform: none; letter-spacing: .2px; font-family: var(--v3-font);
}
html:root body.ng-site:not(.ng-admin) :is(.v3-metric-lab, .v3-mini-title, .v3-hero-name) { font-size: 14px; color: var(--mb-2); font-weight: 500; }
html:root body.ng-site:not(.ng-admin) .v3-metric-val { font-weight: 600; letter-spacing: -.03em; }

/* Boutons pilule compacts (hauteur ~44 px), noir / gris clair */
html:root body.ng-site:not(.ng-admin) :is(.ng-btn-primary, .ng-btn-ghost) { padding: 12px 22px; font-size: 14.5px; font-weight: 600; letter-spacing: 0; }
html:root body.ng-site:not(.ng-admin) .ng-btn-sm { padding: 9px 16px; font-size: 13.5px; }
html:root body.ng-site:not(.ng-admin) .ng-btn-primary:hover, html:root body.ng-site:not(.ng-admin) .ng-btn-ghost:hover { transform: none; box-shadow: none; opacity: .86; }
html:root body.ng-site:not(.ng-admin) .ng-btn-ghost { background: var(--pro-s2); color: var(--mb-1); }

/* Grands panneaux très arrondis, filet presque invisible */
html:root body.ng-site:not(.ng-admin) :is(.ng-card, .ng-card-flat, .ng-cta-band) { border-radius: 24px; }
html:root body.ng-site .v3-netmap { border-radius: 28px; }
html:root body.ng-site:not(.ng-admin) .v3-project-media,
html:root body.ng-site:not(.ng-admin) .v3-home-post .v3-post-visual { border-radius: 20px; }
html:root body.ng-site:not(.ng-admin) .v3-trust a { border-radius: 999px; padding: 6px 16px 6px 6px; }
html:root body.ng-site:not(.ng-admin) .v3-trust img { width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 0 0 2px var(--pro-bg); }
html:root body.ng-site:not(.ng-admin) :is(.v3-tile-tags span, .v3-layer-skills span, .v3-soft span, .ng-chip) { border-radius: 999px; }

/* Carte du hero : avatar cerclé de blanc comme les avatars Mobbin */
html:root body.ng-site .v3-visual .v3-visual-card img { box-shadow: 0 0 0 2px #fff; }

/* Timeline : dates sobres façon journal des versions, pastille « En cours » neutre */
html:root body.ng-site:not(.ng-admin) .tl-year { font-family: var(--v3-font); font-style: normal; font-weight: 600; font-size: 26px; letter-spacing: -.02em; line-height: 1; color: var(--mb-3); }
html:root body.ng-site:not(.ng-admin) .tl-item.is-on .tl-year,
html:root:not(.m-on) body.ng-site:not(.ng-admin) .tl-year { color: var(--mb-1); }
html:root body.ng-site:not(.ng-admin) .tl-to { font-size: 13px; color: var(--mb-2); }
html:root body.ng-site:not(.ng-admin) .tl-live { background: var(--pro-s2); color: var(--mb-1); font-size: 12px; font-weight: 500; }
html:root body.ng-site:not(.ng-admin) .tl-live i { color: #3ba213; }
html:root body.ng-site:not(.ng-admin) .tl-type { font-size: 12px; color: var(--mb-2); }

@media (max-width: 720px) {
  html:root body.ng-site:not(.ng-admin) .tl-year { font-size: 20px; }
}

/* ── 12. Tuiles « Ce que je fais » + blocs À propos : boîtes légères
   sans bordure (2026-10-12) — aplat gris très doux, grands arrondis,
   aucun filet ni ombre, rien ne bouge au survol. */
html:root body.ng-site:not(.ng-admin) :is(.v3-tile, .v3-about-card),
html:root body.ng-site:not(.ng-admin) :is(.v3-tile, .v3-about-card):hover {
  background: var(--pro-s1); box-shadow: none; border-radius: 24px; transform: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html:root body.ng-site:not(.ng-admin) .v3-tile { padding: clamp(24px, 2.6vw, 32px); overflow: hidden; }
html:root body.ng-site:not(.ng-admin) .v3-about-card { padding: clamp(26px, 3vw, 36px); }
html:root body.ng-site:not(.ng-admin) .v3-bento { gap: 14px; }
html:root body.ng-site:not(.ng-admin) .v3-about,
html:root body.ng-site:not(.ng-admin) .v3-about-grid { gap: 14px; }
/* Icône et pastilles : un cran plus foncé que la boîte, sans liseré */
html:root body.ng-site:not(.ng-admin) .v3-tile .v3-tile-ico { background: var(--pro-s3); box-shadow: none; }
html:root body.ng-site:not(.ng-admin) .v3-tile .v3-tile-tags span,
html:root body.ng-site:not(.ng-admin) .v3-about-card .v3-soft span { background: var(--pro-s3); }

/* ── 13. Posts LinkedIn (encart accueil + cartes de /posts) : même boîte
   légère sans bordure que les tuiles (2026-10-12). */
html:root body.ng-site:not(.ng-admin) :is(.v3-home-post, .v3-post-card),
html:root body.ng-site:not(.ng-admin) :is(.v3-home-post, .v3-post-card):hover {
  background: var(--pro-s1); box-shadow: none; border-radius: 24px; transform: none; overflow: hidden;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html:root body.ng-site:not(.ng-admin) .v3-home-post { padding: clamp(14px, 1.8vw, 18px); }
html:root body.ng-site:not(.ng-admin) .v3-home-post .v3-post-visual { border-radius: 16px; outline: none; }
html:root body.ng-site:not(.ng-admin) .v3-home-post .v3-post-body { padding-right: clamp(8px, 2vw, 22px); }

/* ── 15. Chiffres clés (accueil) : une boîte légère sans bordure par chiffre
   (2026-10-12), comme les tuiles « Ce que je fais ». */
html:root body.ng-site:not(.ng-admin) .v3-metrics,
html:root body.ng-site:not(.ng-admin) .v3-metrics:hover {
  background: none; box-shadow: none; border-radius: 0; overflow: visible; gap: 14px;
}
html:root body.ng-site:not(.ng-admin) .v3-metric,
html:root body.ng-site:not(.ng-admin) .v3-metric + .v3-metric {
  padding: clamp(22px, 2.6vw, 30px); border-radius: 24px; background: var(--pro-s1); box-shadow: none;
}
html:root body.ng-site:not(.ng-admin) .v3-metric + .v3-metric::before { display: none; }

/* ── 16. Chiffres clés animés (2026-10-12) — compteur mécanique posé par
   assets/js/counters.js (seulement avec html.m-on). Les boîtes arrivent
   une à une, chaque chiffre roule jusqu'à sa valeur, puis le « + » apparaît.
   .odo-ready n'est posé que si le script a construit les compteurs : sans
   JS, rien n'est masqué. */
.odo { display: inline-flex; vertical-align: top; }
.odo-col {
  display: inline-block; height: 1.1em; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.odo-strip { display: flex; flex-direction: column; transform: translateY(0); transition: transform 1.9s cubic-bezier(.16, 1, .3, 1); will-change: transform; }
.odo-strip > span { display: block; height: 1.1em; line-height: 1.1; text-align: center; }
.odo.is-on .odo-strip { transform: translateY(calc(var(--odo-steps) * -1.1em)); }

html.m-on .v3-metrics.odo-ready .v3-metric {
  opacity: 0; transform: translateY(18px) scale(.98);
  transition: opacity .7s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
}
html.m-on .v3-metrics.odo-ready.is-counted .v3-metric { opacity: 1; transform: none; }
html.m-on .v3-metrics.odo-ready .v3-metric:nth-child(2) { transition-delay: .12s; }
html.m-on .v3-metrics.odo-ready .v3-metric:nth-child(3) { transition-delay: .24s; }
html.m-on .v3-metrics.odo-ready .v3-metric:nth-child(4) { transition-delay: .36s; }

html.m-on .v3-metrics.odo-ready .v3-metric-val sup {
  display: inline-block; opacity: 0; transform: translateY(6px) scale(.6);
  transition: opacity .4s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
html.m-on .v3-metrics.odo-ready.is-counted .v3-metric-val sup { opacity: 1; transform: none; transition-delay: 1.5s; }
html.m-on .v3-metrics.odo-ready.is-counted .v3-metric:nth-child(2) .v3-metric-val sup { transition-delay: 1.62s; }
html.m-on .v3-metrics.odo-ready.is-counted .v3-metric:nth-child(3) .v3-metric-val sup { transition-delay: 1.74s; }
html.m-on .v3-metrics.odo-ready.is-counted .v3-metric:nth-child(4) .v3-metric-val sup { transition-delay: 1.86s; }

/* ── 17. Plus aucune boîte à contour sur le site public (2026-10-12) ──
   Inventaire fait sur 12 pages : toutes les boîtes (cartes, encadrés,
   menus, popups, quiz, FAQ, tableaux, boutons secondaires…) perdent leur
   bordure et leur liseré ; elles se distinguent par leur fond. On garde les
   filets de séparation (lignes de tableau, séparateurs), l'anneau de focus
   clavier et les ombres portées des menus. */
html:root body.ng-site:not(.ng-admin) {
  --v3-shadow: none;
  --ng-glass-edge: none;
  --ng-glass-edge-inset: none;
  --ng-nav-edge: none;
  --ng-chip-edge: none;
}
html:root body.ng-site:not(.ng-admin) :is(
  .ng-card, .ng-card-flat, .ng-cta-band, .ng-info-banner, .ng-faq-item, .ng-skill-box, .ng-theme-card, .ng-social-row,
  .ng-profil-video-placeholder, .ng-rgaa-table-wrap, .ng-inner-box, .ng-choice-card, .ng-chip, .ng-btn-ghost, .ng-btn-danger,
  .ng-filter-btn, .ng-tabbtn, .ng-input, .quiz-cat-card, .quiz-global-card, .quiz-preview-box, .topic-pill, .mode-btn, .diff-btn,
  .qf-question-card, .qf-scorecard, .qf-topbar, .qf-explanation, .qf-mode-pill, .qf-em-exp-box, .qf-exp-modal-box,
  .v3-tile, .v3-about-card, .v3-home-post, .v3-post-card, .v3-project, .v3-metrics, .v3-metric, .v3-trust a, .tl-card, .tl-logo,
  .v3-tile-ico, .v3-project-media, .v3-post-visual
) {
  border-color: transparent !important;
  outline: none;
  box-shadow: none;
}
html:root body.ng-site:not(.ng-admin) .v3-trust img { box-shadow: none; }
html:root body.ng-site .v3-netmap,
html:root body.ng-site .v3-visual .v3-visual-card { box-shadow: none; }
/* Fonds des boîtes qui n'en avaient pas assez une fois le contour retiré */
html:root body.ng-site:not(.ng-admin) :is(.ng-card, .ng-card-flat, .ng-info-banner, .ng-faq-item, .ng-skill-box, .ng-theme-card,
  .quiz-cat-card, .quiz-global-card, .quiz-preview-box, .qf-question-card, .qf-scorecard, .ng-rgaa-table-wrap) { background-color: var(--pro-s1); }
html:root body.ng-site:not(.ng-admin) :is(.ng-input, .ng-choice-card, .topic-pill, .mode-btn, .diff-btn, .qf-mode-pill) { background-color: var(--pro-s2); }
/* Menus, popups, fenêtres : pas de liseré, une ombre douce seulement */
html:root body.ng-site:not(.ng-admin) :is(.ng-navdrop-menu, .ng-mobile-panel, .v3-export-menu, .ng-privacy-notice-inner, .ng-a11y-popup, .ng-modal) {
  border-color: transparent !important;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.35);
}
html:not(.light) body.ng-site:not(.ng-admin) :is(.ng-navdrop-menu, .ng-mobile-panel, .v3-export-menu, .ng-privacy-notice-inner, .ng-a11y-popup, .ng-modal) { box-shadow: 0 24px 60px -20px rgba(0,0,0,.85); }
/* En-tête : plus de liseré autour de la pilule de navigation */
html:root body.ng-site:not(.ng-admin) :is(.ng-navbar, .ng-toolpill)::before { box-shadow: none; }
/* Encadrés écrits directement dans les pages (ex. Accessibilité) */
html:root body.ng-site:not(.ng-admin) main [style*="border:1px solid"],
html:root body.ng-site:not(.ng-admin) main [style*="border: 1px solid"] { border-color: transparent !important; }
/* Focus clavier : anneau bleu conservé */
html:root body.ng-site:not(.ng-admin) :is(.ng-input, .ng-btn-ghost, .ng-filter-btn, .ng-tabbtn, .ng-chip):focus-visible,
html:root body.ng-site:not(.ng-admin) .ng-input:focus { box-shadow: 0 0 0 3px rgba(77,107,255,.4); }

/* ── 18. Touches de bleu accent de la DA (2026-10-12) ─────────
   Quelques détails seulement, sur un site par ailleurs noir / blanc / gris.
   --acc : bleu lisible en texte (franc en clair, adouci en sombre). */
html:root body.ng-site:not(.ng-admin) { --acc: #7c93ff; --acc-solid: #4d6bff; --acc-bg: rgba(77,107,255,.14); }
html.light:root body.ng-site:not(.ng-admin) { --acc: #2f4cf0; --acc-solid: #2f4cf0; --acc-bg: rgba(47,76,240,.08); }
html:root body.ng-site:not(.ng-admin) ::selection { background: var(--acc-bg); color: var(--mb-1); }

/* Sur-titres : numéro de section en bleu */
html:root body.ng-site:not(.ng-admin) .v3-kicker b { color: var(--acc); }
/* Chiffres clés : « + » en bleu */
html:root body.ng-site:not(.ng-admin) .v3-metric-val sup { color: var(--acc); }
/* Tuiles « Ce que je fais » : icône bleue sur fond bleuté */
html:root body.ng-site:not(.ng-admin) .v3-tile .v3-tile-ico,
html:root body.ng-site:not(.ng-admin) .v3-tile:nth-child(1) .v3-tile-ico { background: var(--acc-bg); color: var(--acc); }
/* Liens « Voir tout → » : flèche bleue, texte bleu au survol */
html:root body.ng-site:not(.ng-admin) :is(.v3-link, .v3-project-more) span { color: var(--acc); }
html:root body.ng-site:not(.ng-admin) .v3-link:hover { color: var(--acc); }
/* Pastilles du hero : icônes bleues */
html:root body.ng-site:not(.ng-admin) .v3-hero-tags .ng-chip-icon { color: var(--acc); }
/* Navigation : lien actif marqué d'un point bleu */
html:root body.ng-site:not(.ng-admin) .ng-navlink.active::before { background: var(--acc-solid); box-shadow: none; }
/* Barre de progression de lecture en bleu */
html:root body.ng-site:not(.ng-admin) .m-progress { background: var(--acc-solid); }
/* Timeline : le rail se remplit en bleu, repères atteints en bleu (vert si en cours) */
html:root body.ng-site:not(.ng-admin) .tl::after { background: var(--acc-solid); }
html:root body.ng-site:not(.ng-admin) .tl-item.is-on .tl-node i,
html:root:not(.m-on) body.ng-site:not(.ng-admin) .tl-node i { background: var(--acc-solid); }
html:root body.ng-site:not(.ng-admin) .tl-item.is-now .tl-node i { background: #3ba213; }
/* Titres de page des autres rubriques : mot d'accent en bleu */
html:root body.ng-site:not(.ng-admin) .ng-h1 .muted { color: var(--mb-3); }
html:root body.ng-site:not(.ng-admin) .ng-banner-icon { background: var(--acc-bg); color: var(--acc); }

/* ── 19. Survol des boutons : texte qui roule (2026-10-12) ─────
   Remplace les boutons « aimantés » qui suivaient la souris. Le bouton ne
   bouge plus : seul son libellé glisse vers le haut et une copie arrive
   par le bas ; l'icône se décale légèrement. Posé par initRoll()
   (site-motion.js), seulement avec html.m-on et une souris. */
.btn-roll { display: inline-block; overflow: hidden; height: 1.25em; line-height: 1.25em; vertical-align: middle; }
.btn-roll-in { display: flex; flex-direction: column; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.btn-roll-in > span { display: block; height: 1.25em; white-space: nowrap; }
.m-roll:hover .btn-roll-in, .m-roll:focus-visible .btn-roll-in { transform: translateY(-1.25em); }
.m-roll > svg, .m-roll .dn-net-go { transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.m-roll:hover > svg:last-child, .m-roll:hover .dn-net-go { transform: translate(2px, -2px); }
.m-roll:hover > svg:first-child:not(:last-child) { transform: scale(1.08); }
/* Plus d'aimant ni d'atténuation : le bouton reste net */
html.m-on .m-mag { translate: none; }
html:root body.ng-site:not(.ng-admin) :is(.ng-btn-primary, .ng-btn-ghost).m-roll:hover { opacity: 1; }

/* ── 20. Appel à me contacter v3 — minimal façon Mobbin (2026-10-12) ──
   Choisi par l'utilisateur parmi 4 directions. Aucune boîte : tout est posé
   sur le fond de la page, centré, beaucoup d'air. */
.cta3 {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-top: clamp(110px, 14vw, 190px); padding-bottom: clamp(90px, 11vw, 150px);
}
.cta3-status {
  margin: 0 0 26px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; color: var(--mb-2, var(--ng-t60));
}
.cta3-status i { width: 7px; height: 7px; border-radius: 50%; background: #3ba213; box-shadow: 0 0 0 3px rgba(59,162,19,.16); }
.cta3-title {
  margin: 0; font-size: clamp(40px, 6.4vw, 84px); font-weight: 600; line-height: 1.02; letter-spacing: -.035em;
  color: var(--mb-1, var(--ng-heading));
}
.cta3-title span { color: var(--mb-3, var(--ng-t40)); }
.cta3-lead { margin: 22px 0 0; max-width: 42ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--mb-2, var(--ng-t60)); }
.cta3-actions { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cta3-mail { margin-top: 18px; font-size: 13.5px; color: var(--mb-3, var(--ng-t45)); text-decoration: none; }
.cta3-mail:hover { color: var(--mb-1, var(--ng-heading)); text-decoration: underline; text-underline-offset: 3px; }

/* ── 21. Pied de page : transition arrondie depuis le corps (2026-10-12) ──
   Le pied de page devient une surface à part (--pro-s2) dont les coins du
   haut sont arrondis : le fond de la page « passe derrière » en haut. */
html:root body.ng-site:not(.ng-admin) .ft {
  margin-top: clamp(48px, 6vw, 80px);
  background: var(--pro-s2);
  border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
}
/* La trame de points ne s'efface plus en haut : le bord arrondi reste net. */
html:root body.ng-site:not(.ng-admin) .ft::before {
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
          mask-image: linear-gradient(180deg, #000 70%, transparent);
}

/* ── 22. Contraste des textes gris (2026-10-12, checklist accessibilité) ──
   Les gris les plus pâles passaient sous le seuil WCAG AA (4,5:1 texte
   courant, 3:1 grands titres) : t40 à 2,9:1 en clair et 3,3:1 en sombre,
   #adadad (partie grise des titres) à 2,3:1 sur blanc. On les fonce juste
   assez pour passer, en gardant l'ordre des nuances. t35/t30 (traits,
   décors) ne bougent pas. */
html:root body.ng-site:not(.ng-admin) {
  --ng-t50: rgba(237,237,237,.56); --ng-t45: rgba(237,237,237,.53); --ng-t40: rgba(237,237,237,.5);
}
html.light:root body.ng-site:not(.ng-admin) {
  --ng-t60: rgba(10,10,10,.68); --ng-t55: rgba(10,10,10,.66); --ng-t50: rgba(10,10,10,.64);
  --ng-t45: rgba(10,10,10,.62); --ng-t40: rgba(10,10,10,.6);
  --mb-3: #8a8a8a;
}

/* ── 23. Un seul appel à me contacter par page (2026-10-12, checklist) ──
   Le bandeau .cta3 (partials/cta_band.php) et l'appel du pied de page
   (.ft-cta) se suivaient : même question, même e-mail, mêmes boutons.
   Quand le bandeau est présent, le pied de page commence aux colonnes. */
body.ng-site:not(.ng-admin):has(.cta3) .ft-cta { display: none; }
body.ng-site:not(.ng-admin):has(.cta3) .ft { padding-top: clamp(48px, 6vw, 80px); }
body.ng-site:not(.ng-admin):has(.cta3) .ft-grid { box-shadow: none; padding-top: 0; }

/* ── 24. Menu mobile / tablette lisible (2026-10-12) ──
   Le panneau était en verre à 78-82 % d'opacité (site-v3.css) : le contenu
   de la page transparaissait sous les liens. Fond plein, sans flou. */
html body.ng-site:not(.ng-admin) .ng-mobile-panel {
  background: var(--pro-menu, #121212) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.light body.ng-site:not(.ng-admin) .ng-mobile-panel { background: #ffffff !important; }

/* ── 25. Menu mobile / tablette plein écran (2026-10-12) ──
   La carte flottante (16 px de marge) laissait voir la page autour et
   derrière : le menu couvre maintenant tout l'écran, fond plein de la
   page ; l'en-tête (z-index 10005) reste par-dessus avec le bouton fermer. */
@media (max-width: 1023px) {
  html body.ng-site:not(.ng-admin) .ng-mobile-panel {
    inset: 0; top: 0; height: 100vh; height: 100dvh; max-height: none;
    border-radius: 0; box-shadow: none !important;
    padding: calc(env(safe-area-inset-top, 0px) + 104px) 20px calc(env(safe-area-inset-bottom, 0px) + 32px);
    background: var(--pro-bg, #0a0a0c) !important;
    transform: translateY(-8px);
  }
  html.light body.ng-site:not(.ng-admin) .ng-mobile-panel { background: #ffffff !important; }
  html body.ng-site:not(.ng-admin) .ng-mobile-panel.open { transform: none; }
  html body.ng-site:not(.ng-admin) .ng-mobile-panel .ng-mobile-item.ng-navlink { font-size: 20px; font-weight: 550; }
}

/* ── 26. Menus réellement opaques (2026-10-12) ──
   Cause de la transparence restante : app.css force
   « html.light #mobile-menu { background-color: hsla(0,0%,100%,.82) !important } ».
   Un sélecteur d'id l'emportait sur les corrections par classe (sections 24-25),
   même en !important. On répond avec l'id + la classe. Menus déroulants de la
   barre de navigation : même traitement (ils étaient en verre à 72-78 %). */
html.light body.ng-site:not(.ng-admin) #mobile-menu.ng-mobile-panel { background: #ffffff !important; background-color: #ffffff !important; }
html:not(.light) body.ng-site:not(.ng-admin) #mobile-menu.ng-mobile-panel { background: var(--pro-bg, #0a0a0a) !important; background-color: var(--pro-bg, #0a0a0a) !important; }
html body.ng-site:not(.ng-admin) #mobile-menu.ng-mobile-panel,
html body.ng-site:not(.ng-admin) .ng-navdrop-menu {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.light body.ng-site:not(.ng-admin) .ng-navdrop-menu { background: #ffffff !important; }
html:not(.light) body.ng-site:not(.ng-admin) .ng-navdrop-menu { background: var(--pro-menu, #121212) !important; }

/* ── 27. Mode sombre : noirs adoucis (2026-10-12) ──
   Le fond #0a0a0a (quasi noir pur) écrasait tout : cartes à peine visibles,
   texte trop contrasté. Échelle remontée en gris anthracite légèrement froids
   (accord avec le bleu accent), écarts plus nets entre fond et surfaces. */
html:not(.light):root body.ng-site:not(.ng-admin) {
  --pro-bg: #141519;
  --pro-s1: #1b1c21;
  --pro-s2: #212228;
  --pro-s3: #292a31;
  --pro-menu: #1d1e23;
  --pro-nav: rgba(26,27,32,.82);
  --pro-line: rgba(255,255,255,.09);
  --pro-line-2: rgba(255,255,255,.15);
  --pro-scroll: #3a3b42;
  --pro-page: #141519;
  --ng-html-bg: #141519;
  --ng-bg-grad: linear-gradient(180deg, #16171c 0%, #141519 45%, #121317 100%);
}
html:not(.light):root:has(body.ng-site:not(.ng-admin)) { background: #141519; }

/* ── 28. Cartes articles : vignette au lieu d'image de fond (2026-10-12) ──
   L'image de couverture était posée en fond flouté + voile sous le texte.
   Elle devient une vignette nette en tête de carte (16:9, coins arrondis,
   légèrement en retrait des bords), le texte reste sur le fond de la carte. */
html:root body.ng-site:not(.ng-admin) .ng-article-thumb {
  margin: -14px -14px 22px;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: var(--pro-s3);
}
html:root body.ng-site:not(.ng-admin) .ng-article-thumb img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}

/* ── 29. Reflet des boutons au survol, adouci (2026-10-12) ──
   Le rayon blanc qui balaie les boutons foncés (22 à 35 % d'opacité)
   était trop marqué : ramené à un reflet discret. */
html body.ng-site:not(.ng-admin) .ng-btn-primary::after {
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.08) 50%, transparent 62%) !important;
}
html body.ng-site:not(.ng-admin) :is(.ng-navcta, .ng-cta-main-btn, .ng-footer-cta)::after {
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.08) 50%, transparent 58%) !important;
}