/*
Theme Name:  Yann RES
Theme URI:   https://yannres.fr
Author:      Yann RES
Description: Theme sur mesure du portfolio yannres.fr. Aucun theme parent. Reproduit les
             maquettes validees du 28/09/2026 (D131) : Newsreader, IBM Plex, vert #28674E,
             mode sombre. Une seule feuille, zero style inline dans le contenu (D16, D20).
Version:     2.1.0
Requires at least: 6.0
Tested up to:      7.1
Requires PHP:      8.0
License:     Usage prive
Text Domain: yannres
*/

/* ===========================================================================
   SOMMAIRE
   01. Polices          fichiers heberges dans le theme (D128)
   02. Jetons           clair et sombre (D31 : noms du v1)
   03. Base             cadre .site (= .page de la maquette)
   04. En-tete          logo, menu, langues, bouton theme
   05. Pied de page
   06. Composants       vocabulaire commun des maquettes (mockup/assets/theme.css)
   07. Fenetres         « en construction », message temporaire, progression
   10+. Pages           une section par maquette, dans l'ordre de PASSATION §7
   (fin de la couche « maquette »)
   08. Ex-styles en ligne   utilitaires et classes nommees, hors couche
   99. Ex-!important        regles mobiles de la maquette, hors couche

   Regle de travail (D131) : le rendu doit etre identique a la maquette. Les
   classes des maquettes sont reprises telles quelles ; seuls les jetons prennent
   les noms du v1 (D31). Controle : python outils/controle_r0.py <page>.
   =========================================================================== */


/* ===========================================================================
   01. POLICES (D128)
   Fichiers variables de Google Fonts, sous-ensembles latin et latin-ext (+ grec pour Plex Sans)
   (le tcheque est dans latin-ext). Licence SIL OFL : assets/fonts/OFL-*.txt.
   =========================================================================== */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Grec : lettres des formules (χ², σ, α) dans le texte courant */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ===========================================================================
   02. JETONS
   Valeurs : mockup/assets/theme.css. D31 : les noms du v1 sont conserves,
   les jetons de la maquette sans equivalent sont ajoutes. Correspondance :
     --fond     -> --fond-page          --encre    -> --texte-principal
     --surface  -> --fond-carte         --texte2   -> --texte-secondaire
     --surface2 -> --fond-doux          --muted    -> --texte-muted
     --ligne    -> --bordure            --accent   -> --vert-accent
     --vert     -> --vert-trait         --vert-t   -> --vert-texte
     --vert-bg  -> --vert-fond          --or       -> --or-marque
     --or-t     -> --or-texte           --or-bg    -> --or-fond
     --oc, --oc-bg, --oc-t     -> --origine-oc, --origine-oc-bg, --origine-oc-texte
     --perso, --perso-bg       -> --origine-perso, --origine-perso-bg
     --mer, --terre, --cyan    -> inchanges (carte des preferences, marques)
   Regle de role : --vert-accent, --or-marque et --cyan sont des marques
   graphiques, jamais du texte (contraste < 3:1).
   =========================================================================== */

:root {
  --vert-signature:   #28674E;   /* aplats et boutons a texte blanc, fixe */
  --vert-trait:       #28674E;
  --vert-texte:       #28674E;
  --vert-fond:        #E4EFE9;
  --vert-accent:      #70AD47;
  --or-marque:        #DCB228;
  --or-texte:         #7A5E00;
  --or-fond:          #FBF3D6;
  --cyan:             #00BFFF;

  --origine-oc:        #AA94F3;
  --origine-oc-bg:     #EDE8FC;
  --origine-oc-texte:  #4B3A99;
  --origine-perso:     #007A99;
  --origine-perso-bg:  #E0F4FA;

  --fond-page:   #F6F7F4;
  --fond-carte:  #FFFFFF;
  --fond-doux:   #EEF1EE;
  --fond-nuit:   #0F1412;   /* blocs toujours sombres, fixe */
  --bordure:     #DCE3DE;
  --mer:         #E2EDF1;
  --terre:       #F9FAF8;

  --texte-principal:  #131815;
  --texte-secondaire: #3F4A44;
  --texte-muted:      #5C6861;

  --f-titre: 'Newsreader', Georgia, serif;
  --f-texte: 'IBM Plex Sans', system-ui, sans-serif;
  --f-mono:  'IBM Plex Mono', ui-monospace, monospace;

  /* Rayons — noms du v1 (D31) */
  --radius-sm:    6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;
}

/* Sombre : suit le systeme ; le bouton lune pose data-theme sur <html>
   (script anti-flash dans <head>, functions.php). Deux blocs identiques. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fond-page: #0F1412; --fond-carte: #161D1A; --fond-doux: #1B2420;
    --texte-principal: #E8EEEA; --texte-secondaire: #C0CBC5; --texte-muted: #93A199; --bordure: #27322D;
    --vert-trait: #3D8F6D; --vert-texte: #74C7A2; --vert-fond: #15291F;
    --or-texte: #E8C547; --or-fond: #2B2410;
    --origine-oc-bg: #241E3A; --origine-oc-texte: #CBBEFA;
    --origine-perso: #4CC3E3; --origine-perso-bg: #0C2A33;
    --mer: #0F1B20; --terre: #1A221F;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --fond-page: #0F1412; --fond-carte: #161D1A; --fond-doux: #1B2420;
  --texte-principal: #E8EEEA; --texte-secondaire: #C0CBC5; --texte-muted: #93A199; --bordure: #27322D;
  --vert-trait: #3D8F6D; --vert-texte: #74C7A2; --vert-fond: #15291F;
  --or-texte: #E8C547; --or-fond: #2B2410;
  --origine-oc-bg: #241E3A; --origine-oc-texte: #CBBEFA;
  --origine-perso: #4CC3E3; --origine-perso-bg: #0C2A33;
  --mer: #0F1B20; --terre: #1A221F;
}


/* Seul !important admis : une classe qui pose display ne doit pas reafficher
   un element masque (PASSATION §8.2). */
[hidden] { display: none !important; }


/* ===========================================================================
   COUCHE « maquette » : theme.css et <style> des maquettes, meme ordre, meme
   specificite. Tout ce qui est hors couche (sections 08 et 99) l'emporte sur
   elle, comme les styles en ligne et les !important de la maquette.
   =========================================================================== */

@layer maquette {

/* ===========================================================================
   03. BASE
   .site = le cadre .page de la maquette : 1440 px, centre, en-tete compris.
   =========================================================================== */

html,
body { background: var(--fond-page); }

body { margin: 0; }

.site {
  max-width: 1440px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--fond-page);
  color: var(--texte-principal);
  font-family: var(--f-texte);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  position: relative;
  overflow-x: clip;
}

.site * { box-sizing: border-box; }
.site p { margin: 0; }
.site img,
.site svg { max-width: 100%; }
.site :focus-visible { outline: 2px solid var(--vert-trait); outline-offset: 2px; }


/* Lien d'evitement : hors de l'ecran, revele au clavier (accessibilite). */
.aller-au-contenu {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  background: var(--vert-signature);
  color: #fff;
  font-family: var(--f-texte);
}
.aller-au-contenu:focus { left: 8px; }


/* ===========================================================================
   04. EN-TETE
   =========================================================================== */

.nav {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 72px;
  border-bottom: 1px solid var(--bordure);
  padding: 0 120px;
  background: var(--fond-page);
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
}

.logo {
  font-family: var(--f-titre);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--texte-principal);
  text-decoration: none;
  white-space: nowrap;
}

.menu { display: flex; gap: 26px; flex-grow: 1; justify-content: center; }
.menu a {
  color: var(--texte-secondaire);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 24px 0;
  white-space: nowrap;
}
.menu a:hover { color: var(--texte-principal); }
.menu a.actif { color: var(--texte-principal); box-shadow: inset 0 -2px 0 var(--vert-trait); }

.langs { display: flex; gap: 2px; font-family: var(--f-mono); font-size: 12px; }
.langs a {
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--texte-muted);
  text-decoration: none;
  cursor: pointer;
}
.langs a.actif { background: var(--vert-fond); color: var(--vert-texte); }

/* Langues pas encore traduites (D127) : grisees, message au survol et au focus ;
   au toucher, site.js affiche un message temporaire. */
.langs a[aria-disabled="true"] {
  color: color-mix(in srgb, var(--texte-muted) 50%, transparent);
  cursor: not-allowed;
  position: relative;
}
.langs a[aria-disabled="true"]:hover::after,
.langs a[aria-disabled="true"]:focus-visible::after {
  content: attr(data-info);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  white-space: nowrap;
  background: #131815;
  color: #E8EEEA;
  font-family: var(--f-texte);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #3a4540;
  z-index: 30;
  pointer-events: none;
}

.icobtn {
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  background: var(--fond-carte);
  color: var(--texte-principal);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}


/* ===========================================================================
   05. PIED DE PAGE (D122, D136)
   =========================================================================== */

.footer {
  border-top: 1px solid var(--bordure);
  padding: 32px 120px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--texte-muted);
  margin-top: 80px;
  align-items: center;
}

.pied-liens { display: flex; gap: 20px; flex-wrap: wrap; }
.pied-liens a { color: var(--texte-muted); text-decoration: none; }
.pied-liens a:hover { color: var(--texte-principal); text-decoration: underline; }


/* ===========================================================================
   06. COMPOSANTS COMMUNS
   =========================================================================== */

.kicker {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vert-texte);
}

.h1 { font-family: var(--f-titre); font-weight: 500; font-size: 72px; line-height: 1.02; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
.h2 { font-family: var(--f-titre); font-weight: 500; font-size: 44px; line-height: 1.1; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.h3 { font-family: var(--f-titre); font-weight: 600; font-size: 24px; line-height: 1.25; margin: 0; }

.lead { font-size: 20px; line-height: 1.55; color: var(--texte-secondaire); max-width: 62ch; }
.txt { color: var(--texte-secondaire); max-width: 65ch; }
.mono { font-family: var(--f-mono); }
.muted { color: var(--texte-muted); }
.note { font-size: 13px; color: var(--texte-muted); line-height: 1.5; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--f-mono);
  white-space: nowrap;
}
.chip-oc { background: var(--origine-oc-bg); color: var(--origine-oc-texte); }
.chip-oc::before,
.chip-perso::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--origine-oc); }
.chip-perso { background: var(--origine-perso-bg); color: var(--origine-perso); }
.chip-perso::before { background: var(--origine-perso); }
.chip-vert { background: var(--vert-fond); color: var(--vert-texte); }
.chip-or { background: var(--or-fond); color: var(--or-texte); }
.chip-neutre { border: 1px solid var(--bordure); color: var(--texte-secondaire); }

.carte { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: 14px; }

.num {
  font-family: var(--f-titre);
  font-weight: 500;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.ref { font-family: var(--f-mono); font-size: 11px; color: var(--vert-texte); vertical-align: super; margin-left: 2px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.btn-plein { background: #28674E; color: #fff; }
.btn-ligne { border: 1px solid var(--bordure); color: var(--texte-principal); background: var(--fond-carte); }

.lien { color: var(--vert-texte); font-weight: 500; text-decoration: none; }
.lien:hover { text-decoration: underline; }

.ligne-h { height: 1px; background: var(--bordure); }

.tab { width: 100%; border-collapse: collapse; font-size: 14px; }
.tab th {
  text-align: left;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texte-muted);
  font-weight: 500;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bordure);
}
.tab td { padding: 12px; border-bottom: 1px solid var(--bordure); vertical-align: top; color: var(--texte-secondaire); }
.tab td.fort { color: var(--texte-principal); font-weight: 500; }

.defile { overflow-x: auto; }


/* ===========================================================================
   07. FENETRES ET INDICATEURS
   =========================================================================== */

/* Fenetre « en construction » (PASSATION §6). Jamais de position sur le
   <dialog> lui-meme : le centrage natif en depend (§8.3). */
.construction {
  border: 1px solid var(--bordure);
  border-radius: 16px;
  padding: 32px;
  max-width: 440px;
  width: calc(100% - 32px);
  background: var(--fond-carte);
  color: var(--texte-principal);
  font-family: var(--f-texte);
}
.construction .fermer {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--texte-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.construction .fermer:hover { background: var(--fond-doux); color: var(--texte-principal); }
.construction::backdrop { background: rgba(15, 20, 18, .55); }
.construction__titre { margin: 8px 0 12px; }
.construction__texte { font-size: 15px; }
.construction__actions { margin-top: 20px; display: flex; justify-content: flex-end; }

/* Message temporaire (langue grisee touchee sur mobile) */
.yr-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  background: #131815;
  color: #E8EEEA;
  padding: 12px 16px;
  border-radius: 10px;
  font: 14px/1.4 system-ui, sans-serif;
  z-index: 60;
  max-width: calc(100vw - 32px);
}

/* Progression de lecture, posee sur le filet bas de l'en-tete (accueil) */
.yr-progres { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--vert-trait); width: 0; }


/* ===========================================================================
   10+. PAGES — regles du <style> de chaque maquette (generees par
   outils/maquette_vers_theme.py entre les marqueurs, a ne pas editer a la main
   sans relancer le controle R0).
   =========================================================================== */

/* <r0:pages> */
/* <r0:page:carlog> */
  /* --- carlog : 03b_produit_carlog.html --- */
  :where(.gabarit-carlog) .sous-nav { display: flex; align-items: center; gap: 24px; padding: 0 120px; height: 52px; border-bottom: 1px solid var(--bordure); font-size: 13px; overflow-x: auto; white-space: nowrap; position: sticky; top: 72px; background: var(--fond-page); z-index: 15; }
  :where(.gabarit-carlog) .sous-nav a { color: var(--texte-secondaire); text-decoration: none; }
  :where(.gabarit-carlog) .sous-nav a:hover { color: var(--texte-principal); }
  .section { padding: 96px 120px 0; display: flex; flex-direction: column; gap: 28px; scroll-margin-top: 140px; }
  .deux { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 48px; }
  :where(.gabarit-carlog) .choix { display: grid; grid-template-columns: 220px minmax(0,1fr) minmax(0,1fr); gap: 32px; padding: 22px 0; border-top: 1px solid var(--bordure); }
  .version { display: grid; grid-template-columns: 120px 110px minmax(0,1fr); gap: 24px; padding: 14px 0; border-top: 1px solid var(--bordure); align-items: baseline; }
  .erreur { display: grid; grid-template-columns: 64px minmax(0,1fr) minmax(0,1fr); gap: 32px; padding: 28px 0; border-top: 1px solid var(--bordure); }
  :where(.gabarit-carlog) .erreur .regle { border-left: 3px solid var(--or-marque); padding-left: 16px; color: var(--texte-secondaire); }
  .graphe svg { display: block; width: 100%; height: auto; overflow: visible; }
  .graphe text { font-family: var(--f-mono); font-size: 12px; fill: var(--texte-muted); }
  .hero-kpi { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); width: 100%; max-width: 1120px; margin-top: 48px; border-top: 1px solid #27322D; }
  .hero-kpi > div { padding: 32px 16px; }
  .hero-kpi > div + div { border-left: 1px solid #27322D; }
  .echelle { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; border-top: 1px solid var(--texte-principal); }
  .echelle > div { padding: 20px 20px 20px 0; border-bottom: 1px solid var(--bordure); }
  .echelle > div + div { padding-left: 20px; border-left: 1px solid var(--bordure); }
  .route { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; padding-top: 56px; }
  .route::before { content: ""; position: absolute; left: 12px; right: 12px; top: 19px; border-top: 3px dashed var(--bordure); }
  .etape-route { position: relative; display: flex; flex-direction: column; gap: 12px; }
  .etape-route .borne { position: absolute; top: -45px; left: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--fond-carte); border: 4px solid var(--vert-trait); }
  .etape-route.loin .borne { border-color: var(--texte-muted); }
  .etape-route ul { margin: 0; padding-left: 18px; color: var(--texte-secondaire); font-size: 15px; display: flex; flex-direction: column; gap: 6px; }
  :where(.gabarit-carlog) .legende { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--texte-muted); }
  :where(.gabarit-carlog) .legende span { display: inline-flex; align-items: center; gap: 8px; }
  :where(.gabarit-carlog) .legende i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
  .capture { border: 1px solid var(--bordure); border-radius: 10px; overflow: hidden; background: #fff; }
  .capture img { display: block; width: 100%; height: auto; }
  @media (max-width:1100px) {
    .route { grid-template-columns: minmax(0,1fr); padding-top: 0; padding-left: 40px; }
    .route::before { left: 10px; right: auto; top: 8px; bottom: 8px; border-top: 0; border-left: 3px dashed var(--bordure); }
    .etape-route .borne { top: 2px; left: -40px; }
    :where(.gabarit-carlog) .sous-nav { top: 0; position: relative; }
    .echelle > div + div { border-left: 0; padding-left: 0; }
    .hero-kpi { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .hero-kpi > div + div { border-left: 0; }
    .section { padding: 64px 16px 0; }
  }
  .briques { border-top: 1px solid var(--texte-principal); }
  .brique { display: grid; grid-template-columns: 260px repeat(3,minmax(0,1fr)); gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--bordure); font-size: 15px; color: var(--texte-secondaire); }
  .phase { display: flex; flex-direction: column; gap: 6px; position: relative; }
  .phase .ph { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
  .phase.demain { color: var(--texte-principal); }
  .phase.demain .ph { color: var(--vert-texte); }
  @media (max-width:1100px) {
    .brique { gap: 12px; }
  }
/* </r0:page:carlog> */
/* <r0:page:accueil> */
  /* --- accueil : index.html --- */
  :where(.gabarit-accueil) .chap { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 64px; padding: 96px 120px 0; }
  :where(.gabarit-accueil) .index { display: flex; flex-direction: column; gap: 10px; font-family: var(--f-mono); font-size: 12px; color: var(--texte-muted); border-left: 1px solid var(--bordure); padding-left: 16px; }
  :where(.gabarit-accueil) .index span.on { color: var(--texte-principal); position: relative; }
  :where(.gabarit-accueil) .index span.on::before { content: ""; position: absolute; left: -18px; top: 2px; width: 3px; height: 14px; background: var(--vert-trait); border-radius: 2px; }
  :where(.gabarit-accueil) .secteur { display: grid; grid-template-columns: 160px minmax(0,1fr) 220px; gap: 24px; padding: 18px 0; border-top: 1px solid var(--bordure); align-items: baseline; }
  .hero { padding: 120px 120px 72px; display: flex; flex-direction: column; gap: 28px; border-bottom: 1px solid var(--bordure); }
  .kpis { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); border-top: 1px solid var(--texte-principal); margin-top: 16px; }
  .kpi { padding: 24px 20px; border-bottom: 1px solid var(--bordure); }
  .kpi+.kpi { border-left: 1px solid var(--bordure); }
  :where(.gabarit-accueil) .kpi .num { font-size: 44px; }
  :where(.gabarit-accueil) .kpi .note { margin-top: 8px; }
  .notes-kpi { display: flex; flex-direction: column; gap: 4px; }
  :where(.gabarit-accueil) .recit { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 64px; padding: 0 120px 96px; }
  :where(.gabarit-accueil) .recit > .index { position: sticky; top: 104px; align-self: start; margin-top: 96px; }
  :where(.gabarit-accueil) .recit > .index a { color: var(--texte-muted); text-decoration: none; position: relative; }
  :where(.gabarit-accueil) .recit > .index a:hover { color: var(--texte-principal); }
  :where(.gabarit-accueil) .recit > .index a.on { color: var(--texte-principal); }
  :where(.gabarit-accueil) .recit > .index a.on::before { content: ""; position: absolute; left: -18px; top: 2px; width: 3px; height: 14px; background: var(--vert-trait); border-radius: 2px; }
  :where(.gabarit-accueil) .recit .chap { display: block; padding: 96px 0 0; scroll-margin-top: 88px; }
  .notes-bas { display: flex; flex-direction: column; gap: 4px; padding: 24px 120px 48px; border-top: 1px solid var(--bordure); }
  .qualites { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; }
  .qualite { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 22px 0; border-top: 1px solid var(--bordure); }
  .qualite:nth-child(3n+2), .qualite:nth-child(3n) { padding-left: 24px; border-left: 1px solid var(--bordure); }
  .horizons { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; }
  .horizon { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-top: 3px solid var(--vert-trait); }
  .horizon:nth-child(2) { border-top-color: var(--vert-accent); }
  .horizon:nth-child(3) { border-top-color: var(--or-marque); }
  :where(.gabarit-accueil) .fil { display: flex; flex-wrap: wrap; gap: 8px; }
  @media (max-width:1100px) {
    :where(.gabarit-accueil) .recit { padding: 0 16px 64px; }
    :where(.gabarit-accueil) .recit > .index { display: none; }
    :where(.gabarit-accueil) .recit .chap { padding-top: 56px; }
    .notes-bas { padding: 24px 16px 40px; }
    .hero { padding: 64px 16px 48px; }
    .kpi+.kpi { border-left: 0; }
    .kpi:nth-child(even) { border-left: 1px solid var(--bordure); }
  }
  .etape { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-top: 3px solid var(--vert-trait); }
/* </r0:page:accueil> */
/* <r0:page:projets> */
  /* --- projets : 03_projets.html --- */
  .gamme { padding: 72px 120px 0; display: flex; flex-direction: column; gap: 24px; }
  .gamme-tete { display: flex; align-items: baseline; gap: 24px; border-bottom: 1px solid var(--texte-principal); padding-bottom: 16px; }
  .produit { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 12px; min-height: 280px; }
  .produit .nom { font-family: var(--f-titre); font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
  :where(.gabarit-projets) .produit .pied { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
  .seg { display: flex; border: 1px solid var(--bordure); border-radius: 10px; padding: 3px; background: var(--fond-carte); }
  .seg a { padding: 8px 14px; border-radius: 7px; font-size: 14px; color: var(--texte-secondaire); text-decoration: none; }
  :where(.gabarit-projets) .seg a.on { background: var(--texte-principal); color: var(--fond-page); }
  .filtre { display: flex; gap: 8px; }
  .filtre a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--bordure); font-size: 14px; color: var(--texte-secondaire); text-decoration: none; }
  :where(.gabarit-projets) .filtre a.on { border-color: var(--vert-trait); color: var(--vert-texte); background: var(--vert-fond); }
  .volet { margin: 56px 120px 0; border-radius: 18px; border: 1px solid var(--bordure); background: var(--fond-carte); }
  .volet-oc { border-top: 4px solid var(--origine-oc); }
  .volet-perso { border-top: 4px solid var(--origine-perso); }
  .volet-oc summary { background: var(--origine-oc-bg); }
  .volet-perso summary { background: var(--origine-perso-bg); }
  .volet[open] summary { border-radius: 14px 14px 0 0; margin-bottom: 28px; }
  .volet:not([open]) summary { border-radius: 14px; }
  :where(.gabarit-projets) .produit .pied { gap: 12px; }
  :where(.gabarit-projets) .produit .pied a { white-space: nowrap; }
  .volet summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 24px; padding: 28px 32px; flex-wrap: wrap; }
  .volet summary::-webkit-details-marker { display: none; }
  .volet summary:focus-visible { outline: 2px solid var(--vert-trait); outline-offset: 2px; border-radius: 18px; }
  .volet-titre { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .volet-info { margin-left: auto; }
  .chevron { flex: none; color: var(--texte-muted); transition: transform .2s; }
  .volet[open] .chevron { transform: rotate(180deg); }
  .volet-corps { padding: 0 32px 32px; display: flex; flex-direction: column; gap: 40px; }
  .groupe { display: flex; flex-direction: column; gap: 20px; }
  .groupe-tete { display: flex; align-items: baseline; gap: 20px; border-bottom: 1px solid var(--bordure); padding-bottom: 12px; flex-wrap: wrap; }
  :where(.gabarit-projets) .grille { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
  .volet .produit { background: var(--fond-page); }
  @media (max-width:1100px) {
    .volet { margin: 40px 16px 0; }
    .volet summary { padding: 20px; }
    .volet-corps { padding: 0 16px 20px; }
    .volet-info { margin-left: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .chevron { transition: none; }
  }
  .suite-pas { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--fond-carte); }
/* </r0:page:projets> */
/* <r0:page:fiche> */
  /* --- fiche : 03p_*.html --- */
  :where(.gabarit-fiche) .bloc { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 24px; padding: 28px 0; border-top: 1px solid var(--bordure); }
  :where(.gabarit-fiche) .galerie { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
  :where(.gabarit-fiche) .galerie figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
  :where(.gabarit-fiche) .galerie img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 10px; border: 1px solid var(--bordure); display: block; }
  :where(.gabarit-fiche) .galerie figcaption { font-family: var(--f-mono); font-size: 12px; color: var(--texte-muted); }
  :where(.gabarit-fiche) .fil { display: flex; flex-wrap: wrap; gap: 8px; }
  :where(.gabarit-fiche) .galerie span { aspect-ratio: 3/2; border-radius: 8px; background: var(--fond-doux); display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 12px; color: var(--texte-muted); }
  :where(.gabarit-fiche) .mt-16 { margin-top: 16px; }
  :where(.gabarit-fiche) .a-venir { opacity: .5; filter: grayscale(1); pointer-events: none; cursor: default; }
  :where(.gabarit-fiche) .captures { display: flex; flex-direction: column; gap: 20px; }
  :where(.gabarit-fiche) .captures figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
  :where(.gabarit-fiche) .captures img { display: block; width: 100%; height: auto; border: 1px solid var(--bordure); border-radius: 10px; background: #fff; }
  :where(.gabarit-fiche) .captures figcaption { font-family: var(--f-mono); font-size: 12px; color: var(--texte-muted); }
  :where(.gabarit-fiche) .captures span { display: flex; align-items: center; justify-content: center; aspect-ratio: 3/1; border-radius: 8px; background: var(--fond-doux); font-family: var(--f-mono); font-size: 12px; color: var(--texte-muted); }
  :where(.gabarit-fiche) .telechargements { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  :where(.gabarit-fiche) .telechargements .mono { width: 100%; }
  #profil { font-family: var(--f-texte); border: 1px solid var(--bordure); border-radius: 14px; padding: 28px; max-width: 440px; background: var(--fond-carte); color: var(--texte-principal); }
  #profil::backdrop { background: rgba(0,0,0,.45); }
  :where(.gabarit-fiche) #profil .choix { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
  #profil button { font: inherit; }
  :where(.gabarit-fiche) #profil .note { font-family: var(--f-texte); }
  :where(.gabarit-fiche) .piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  :where(.gabarit-fiche) .puces { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--texte-secondaire); max-width: 70ch; }
  :where(.gabarit-fiche) .sous-titre { margin: 16px 0 0; font-weight: 400; text-transform: uppercase; letter-spacing: .06em; }
/* </r0:page:fiche> */
/* <r0:page:competences> */
  /* --- competences : 04_competences.html --- */
  :where(.gabarit-competences) .zone { padding: 0 120px; }
  .mode { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 16px 20px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--fond-carte); }
  .mode p { font-size: 15px; color: var(--texte-secondaire); max-width: 70ch; }
  :where(.gabarit-competences) .legende { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 12px; color: var(--texte-muted); }
  :where(.gabarit-competences) .legende span { display: inline-flex; align-items: center; gap: 6px; }
  :where(.gabarit-competences) .chaine { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 14px; }
  .col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .col-tete { display: flex; flex-direction: column; gap: 2px; padding: 0 0 12px; border-bottom: 2px solid var(--vert-trait); margin-bottom: 8px; min-height: 74px; }
  .nd { display: flex; flex-direction: column; gap: 5px; text-align: left; padding: 8px 10px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--fond-carte); color: var(--texte-principal); font: inherit; font-size: 13px; line-height: 1.3; cursor: pointer; min-height: 44px; transition: opacity .2s,border-color .2s,box-shadow .2s; }
  .nd:hover { border-color: var(--vert-trait); }
  .nd.sel { border-color: var(--vert-trait); box-shadow: 0 0 0 2px var(--vert-trait); background: var(--vert-fond); }
  .nd.lie { border-color: var(--vert-trait); }
  .nd.estompe { opacity: .32; }
  .pts { display: flex; gap: 3px; flex-wrap: wrap; }
  :where(.gabarit-competences) .pt { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
  .pt-pro { background: var(--or-marque); }
  .pt-oc { background: var(--origine-oc); }
  .pt-perso { background: var(--origine-perso); }
  .savoirs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
  .savoir { padding: 14px 16px; gap: 8px; font-size: 14px; }
  .savoir .d { font-size: 13px; color: var(--texte-muted); line-height: 1.45; }
  :where(.gabarit-competences) .ctx { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 16px; padding: 10px 0; border-top: 1px solid var(--bordure); font-size: 14px; }
  .rattache { display: flex; flex-wrap: wrap; gap: 6px; }
  @media (prefers-reduced-motion: reduce) {
    .nd { transition: none; }
  }
  @media (max-width:1100px) {
    :where(.gabarit-competences) .zone { padding: 0 16px; }
  }
/* </r0:page:competences> */
/* <r0:page:parcours> */
  /* --- parcours : 02_parcours.html --- */
  :where(.gabarit-parcours) .noeud { border: 1px solid var(--bordure); background: var(--fond-carte); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; width: 200px; }
  :where(.gabarit-parcours) .fleche { flex-grow: 1; height: 1.5px; background: var(--vert-trait); position: relative; min-width: 24px; }
  :where(.gabarit-parcours) .fleche::after { content: ""; position: absolute; right: -1px; top: -4px; border-left: 7px solid var(--vert-trait); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
  .lane { position: relative; height: 84px; border-top: 1px solid var(--bordure); }
  .lane-lbl { position: absolute; left: -140px; top: 30px; font-family: var(--f-mono); font-size: 12px; color: var(--texte-muted); }
  .bar { position: absolute; top: 44px; height: 14px; border-radius: 3px; }
  .bar-f { background: var(--vert-trait); }
  .bar-e { background: var(--or-marque); }
  .idx { position: absolute; top: 22px; font-family: var(--f-mono); font-size: 11px; color: var(--texte-secondaire); }
  :where(.gabarit-parcours) .pt { position: absolute; top: 43px; width: 16px; height: 16px; border-radius: 50%; background: var(--fond-carte); border: 3px solid var(--vert-trait); }
  .tick { position: absolute; top: 0; font-family: var(--f-mono); font-size: 11px; color: var(--texte-muted); }
  .statut { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 12px; }
  .statut::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vert-trait); }
/* </r0:page:parcours> */
/* <r0:page:lab> */
  /* --- lab : 05_lab.html --- */
  .filtres { display: flex; flex-direction: column; gap: 2px; }
  .filtres a { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 8px; color: var(--texte-secondaire); text-decoration: none; font-size: 14px; }
  :where(.gabarit-lab) .filtres a.on { background: var(--vert-fond); color: var(--vert-texte); font-weight: 500; }
  :where(.gabarit-lab) .entree { display: grid; grid-template-columns: 120px 150px minmax(0,1fr) 40px; gap: 24px; padding: 22px 0; border-top: 1px solid var(--bordure); align-items: baseline; }
  .mois { font-family: var(--f-mono); font-size: 12px; color: var(--texte-muted); letter-spacing: .08em; text-transform: uppercase; padding: 32px 0 8px; }
  .filtres { display: flex; flex-direction: column; gap: 2px; }
  .filtres button { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 8px; color: var(--texte-secondaire); font: inherit; font-size: 14px; background: none; border: 0; cursor: pointer; text-align: left; min-height: 40px; }
  :where(.gabarit-lab) .filtres button.on { background: var(--vert-fond); color: var(--vert-texte); font-weight: 500; }
  .mots button { cursor: pointer; background: var(--fond-carte); min-height: 32px; }
  .filtre-actif { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 12px 16px; margin-bottom: 8px; border-radius: 10px; background: var(--vert-fond); color: var(--vert-texte); font-size: 14px; }
  :where(.gabarit-lab) .grille { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
  .vignette { padding: 0; flex-direction: column; background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: 14px; overflow: hidden; transition: border-color .2s; }
  .vignette:hover { border-color: var(--vert-trait); }
  :where(.gabarit-lab) .vignette .visuel { width: 100%; align-self: stretch; aspect-ratio: 16/9; background: var(--fond-doux); display: flex; align-items: center; justify-content: center; font-family: var(--f-titre); font-size: 28px; color: var(--vert-texte); border-bottom: 1px solid var(--bordure); }
  :where(.gabarit-lab) .vignette[data-type="reflexion"] .visuel { color: var(--texte-muted); font-size: 20px; }
  .vignette .corps { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex-grow: 1; }
  :where(.gabarit-lab) .vignette .meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  :where(.gabarit-lab) .vignette .titre { font-family: var(--f-titre); font-weight: 600; font-size: 20px; line-height: 1.25; margin: 0; text-wrap: balance; }
  :where(.gabarit-lab) .vignette .pied { margin-top: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 6px; }
  .vignette .mot { font-family: var(--f-mono); font-size: 12px; color: var(--texte-muted); }
  @media (prefers-reduced-motion: reduce) {
    .vignette { transition: none; }
  }
  :where(.gabarit-lab) .vignette.a-venir { opacity: .5; filter: grayscale(1); pointer-events: none; cursor: default; }
  :where(.gabarit-lab) .vignette.a-venir:hover { border-color: var(--bordure); }
/* </r0:page:lab> */
/* <r0:page:article> */
  /* --- article : 05a_*.html --- */
  :where(.gabarit-article) .article { padding: 72px 120px 96px; display: flex; flex-direction: column; gap: 24px; max-width: 1000px; }
  :where(.gabarit-article) .meta-art { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  :where(.gabarit-article) .bloc { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 24px; padding: 28px 0; border-top: 1px solid var(--bordure); }
  :where(.gabarit-article) .etapes { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--texte-secondaire); max-width: 65ch; }
  :where(.gabarit-article) .resultats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 14px; }
  :where(.gabarit-article) .resultats .carte { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
  :where(.gabarit-article) .resultats .obtenu { border-left: 3px solid var(--vert-trait); }
  :where(.gabarit-article) .ecart { margin-top: 14px; padding: 14px 18px; border-radius: 10px; background: var(--or-fond); color: var(--texte-secondaire); max-width: 65ch; }
  .corps-v1 { display: flex; flex-direction: column; gap: 16px; }
  :where(.gabarit-article) .corps-v1 .h3 { margin-top: 16px; }
  :where(.gabarit-article) .nav-art { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--bordure); padding-top: 24px; margin-top: 16px; }
  @media (max-width:1100px) {
    :where(.gabarit-article) .article { padding: 48px 16px 72px; }
  }
/* </r0:page:article> */
/* <r0:page:hobbies> */
  /* --- hobbies : 06_hobbies.html --- */
  :where(.gabarit-hobbies) .hobby { display: grid; grid-template-columns: minmax(0,1fr) 620px; gap: 64px; padding: 80px 120px 0; align-items: center; }
  :where(.gabarit-hobbies) .hobby.inverse { grid-template-columns: 620px minmax(0,1fr); }
  :where(.gabarit-hobbies) .visuel { border-radius: 14px; overflow: hidden; border: 1px solid var(--bordure); background: var(--fond-doux); aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; }
  :where(.gabarit-hobbies) .visuel img { display: block; width: 100%; height: 100%; object-fit: cover; }
  :where(.gabarit-hobbies) .visuel .vide { font-family: var(--f-mono); font-size: 13px; color: var(--texte-muted); text-align: center; padding: 16px; }
  :where(.gabarit-hobbies) .planche { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; width: 100%; height: 100%; padding: 8px; background: var(--fond-carte); }
  :where(.gabarit-hobbies) .visuel.ecran { aspect-ratio: 2240/1080; background: #222; }
  :where(.gabarit-hobbies) .visuel.ecran img { object-fit: contain; }
  :where(.gabarit-hobbies) .planche img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; min-height: 0; }
  :where(.gabarit-hobbies) .planche { grid-template-rows: repeat(2,minmax(0,1fr)); }
  :where(.gabarit-hobbies) .planche span { background: var(--fond-doux); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 11px; color: var(--texte-muted); }
  :where(.gabarit-hobbies) .fil { display: flex; flex-wrap: wrap; gap: 8px; }
  @media (max-width:1100px) {
    :where(.gabarit-hobbies) .hobby.inverse .visuel { order: 2; }
  }
/* </r0:page:hobbies> */
/* <r0:page:randonnee> */
  /* --- randonnee : 06a_randonnee.html --- */
  :where(.gabarit-randonnee) .bloc { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 24px; padding: 28px 0; border-top: 1px solid var(--bordure); }
  :where(.gabarit-randonnee) .galerie { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
  :where(.gabarit-randonnee) .galerie figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
  :where(.gabarit-randonnee) .galerie img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 10px; border: 1px solid var(--bordure); display: block; }
  :where(.gabarit-randonnee) .galerie figcaption { font-family: var(--f-mono); font-size: 12px; color: var(--texte-muted); }
  :where(.gabarit-randonnee) .fil { display: flex; flex-wrap: wrap; gap: 8px; }
  :where(.gabarit-randonnee) .galerie span { aspect-ratio: 3/2; border-radius: 8px; background: var(--fond-doux); display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 12px; color: var(--texte-muted); }
/* </r0:page:randonnee> */
/* <r0:page:automobile> */
  /* --- automobile : 06b_automobile.html --- */
  :where(.gabarit-automobile) .bloc { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 24px; padding: 28px 0; border-top: 1px solid var(--bordure); }
  :where(.gabarit-automobile) .galerie { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
  :where(.gabarit-automobile) .galerie figure { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  :where(.gabarit-automobile) .galerie img { width: 100%; height: 380px; object-fit: cover; border-radius: 10px; border: 1px solid var(--bordure); display: block; }
  :where(.gabarit-automobile) .galerie figcaption { font-family: var(--f-mono); font-size: 12px; color: var(--texte-muted); }
  .galerie-auto { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,2fr); }
  @media (max-width:1100px) {
    :where(.gabarit-automobile) .galerie img { height: auto; aspect-ratio: 3/4; }
    .galerie-auto figure:last-child { grid-column: 1 / -1; }
    .galerie-auto figure:last-child img { aspect-ratio: 3/2; }
  }
  :where(.gabarit-automobile) .galerie span { aspect-ratio: 3/2; border-radius: 8px; background: var(--fond-doux); display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 12px; color: var(--texte-muted); }
/* </r0:page:automobile> */
/* <r0:page:photo-video> */
  /* --- photo-video : 06c_photo_video.html --- */
  :where(.gabarit-photo-video) .bloc { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 24px; padding: 28px 0; border-top: 1px solid var(--bordure); }
  :where(.gabarit-photo-video) .galerie { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
  :where(.gabarit-photo-video) .galerie figure { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  :where(.gabarit-photo-video) .galerie img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 10px; border: 1px solid var(--bordure); display: block; }
  :where(.gabarit-photo-video) .galerie figcaption, .video figcaption { font-family: var(--f-mono); font-size: 12px; color: var(--texte-muted); }
  .video { margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
  .video video { width: 100%; aspect-ratio: 16/9; border-radius: 10px; background: #0F1412; display: block; }
  :where(.gabarit-photo-video) .fil { display: flex; flex-wrap: wrap; gap: 8px; }
  :where(.gabarit-photo-video) .galerie span { aspect-ratio: 3/2; border-radius: 8px; background: var(--fond-doux); display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 12px; color: var(--texte-muted); }
/* </r0:page:photo-video> */
/* <r0:page:cvs> */
  /* --- cvs : 07_cvs.html --- */
  :where(.gabarit-cvs) .app { display: grid; grid-template-columns: 240px minmax(0,1fr) 380px; border: 1px solid var(--bordure); border-radius: 16px; overflow: hidden; background: var(--fond-carte); height: 720px; }
  .side { background: var(--fond-doux); border-right: 1px solid var(--bordure); padding: 20px 12px; display: flex; flex-direction: column; gap: 4px; }
  .side a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--texte-secondaire); text-decoration: none; font-size: 14px; }
  :where(.gabarit-cvs) .side a.on { background: var(--fond-carte); color: var(--texte-principal); font-weight: 500; box-shadow: 0 0 0 1px var(--bordure); }
  .profil { font: inherit; color: inherit; text-align: left; background: var(--fond-carte); width: 100%; display: grid; grid-template-columns: 20px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--bordure); border-radius: 12px; cursor: pointer; }
  :where(.gabarit-cvs) .profil.on { border-color: var(--vert-trait); box-shadow: 0 0 0 1px var(--vert-trait); }
  .radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--bordure); }
  :where(.gabarit-cvs) .profil.on .radio { border: 5px solid var(--vert-trait); }
  #profil { font-family: var(--f-texte); border: 1px solid var(--bordure); border-radius: 14px; padding: 28px; max-width: 440px; background: var(--fond-carte); color: var(--texte-principal); }
  #profil::backdrop { background: rgba(0,0,0,.45); }
  :where(.gabarit-cvs) #profil .choix { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
  #profil button { font: inherit; }
  :where(.gabarit-cvs) .piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* </r0:page:cvs> */
/* <r0:page:contact> */
  /* --- contact : 08_contact.html --- */
  :where(.gabarit-contact) .contact { padding: 88px 120px 96px; display: flex; flex-direction: column; gap: 40px; }
  :where(.gabarit-contact) .faits { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid var(--texte-principal); }
  :where(.gabarit-contact) .faits>div { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 18px 0; border-bottom: 1px solid var(--bordure); font-size: 15px; }
  :where(.gabarit-contact) .faits>div+div { padding-left: 20px; border-left: 1px solid var(--bordure); }
  :where(.gabarit-contact) .rgpd { display: flex; gap: 10px; align-items: center; }
  :where(.gabarit-contact) .copie-ok { color: var(--vert-texte); font-family: var(--f-mono); font-size: 12px; }
  @media (max-width:1100px) {
    :where(.gabarit-contact) .contact { padding: 56px 16px 72px; }
    :where(.gabarit-contact) .faits>div+div { padding-left: 0; border-left: 0; }
  }
  :where(.gabarit-contact) .requete { background: #0F1412; color: #E8EEEA; border-radius: 16px; padding: 32px 36px; font-family: var(--f-mono); font-size: 16px; line-height: 1.8; overflow-x: auto; }
  :where(.gabarit-contact) .requete .cle { color: #74C7A2; }
  :where(.gabarit-contact) .requete .val { color: #E8C547; }
  :where(.gabarit-contact) .requete .com { color: #93A199; }
  :where(.gabarit-contact) .requete .res { display: grid; grid-template-columns: 110px minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid #27322D; }
  :where(.gabarit-contact) .requete a { color: #E8EEEA; }
  :where(.gabarit-contact) .requete .btn-sombre { height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid #3a4540; background: #1B2420; color: #E8EEEA; font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
  :where(.gabarit-contact) .requete .btn-sombre:hover { border-color: #74C7A2; }
  :where(.gabarit-contact) .choix-motif { display: flex; gap: 8px; flex-wrap: wrap; }
  :where(.gabarit-contact) .choix-motif button { font: inherit; font-size: 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--bordure); background: var(--fond-carte); color: var(--texte-secondaire); cursor: pointer; min-height: 40px; }
  :where(.gabarit-contact) .choix-motif button[aria-pressed="true"] { border-color: var(--vert-trait); color: var(--vert-texte); background: var(--vert-fond); }
  @media (max-width:1100px) {
    :where(.gabarit-contact) .requete { padding: 24px 20px; font-size: 14px; }
    :where(.gabarit-contact) .requete .res { gap: 8px; }
  }
  :where(.gabarit-contact) .bloc { display: grid; grid-template-columns: minmax(0,1.9fr) minmax(0,1fr); gap: 20px; align-items: stretch; }
  :where(.gabarit-contact) .canal { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
  :where(.gabarit-contact) .requete .entete { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
  :where(.gabarit-contact) .choix-motif button.libre { border-style: dashed; }
  :where(.gabarit-contact) .requete .libre-champ { font: inherit; color: #E8C547; background: #1B2420; border: 1px dashed #5a6660; border-radius: 6px; padding: 0 8px; min-width: 14ch; width: 28ch; max-width: 100%; height: 30px; }
  :where(.gabarit-contact) .requete .libre-champ:focus { outline: 2px solid #74C7A2; outline-offset: 1px; border-color: transparent; }
  :where(.gabarit-contact) .requete .libre-champ::placeholder { color: #93A199; }
  :where(.gabarit-contact) .faits .btn { height: 36px; align-self: flex-start; margin-top: 4px; }
/* </r0:page:contact> */
/* <r0:page:preferences> */
  /* --- preferences : 08b_preferences.html --- */
  .pref { padding: 72px 120px 96px; display: flex; flex-direction: column; gap: 32px; }
  .carte-iso { padding: 24px 24px 16px; display: flex; flex-direction: column; gap: 16px; }
  .iso-barre { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
  .onglets { display: flex; gap: 8px; flex-wrap: wrap; }
  .onglets button, .pause { font: inherit; font-size: 14px; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--bordure); background: var(--fond-carte); color: var(--texte-secondaire); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
  .onglets button[aria-pressed="true"] { border-color: var(--vert-trait); background: var(--vert-fond); color: var(--vert-texte); }
  .onglets button[data-z="c"][aria-pressed="true"] { border-color: var(--or-marque); background: var(--or-fond); color: var(--or-texte); }
  .onglets button[data-z="d"][aria-pressed="true"] { border-color: var(--texte-principal); background: var(--fond-doux); color: var(--texte-principal); }
  .pause { font-family: var(--f-mono); font-size: 12px; }
  .iso { width: 100%; height: auto; display: block; background: var(--fond-doux); border-radius: 10px; }
  :where(.gabarit-preferences) .zone path { fill: transparent; stroke: var(--texte-muted); stroke-opacity: .35; stroke-width: 1.2; transition: fill .6s ease,stroke-opacity .6s ease; }
  :where(.gabarit-preferences) .zone.actif path { stroke-opacity: 1; stroke-width: 2.5; }
  :where(.gabarit-preferences) .z-a.actif path, :where(.gabarit-preferences) .z-b.actif path { stroke: var(--vert-trait); fill: rgba(40,103,78,.14); }
  :where(.gabarit-preferences) .z-c.actif path { stroke: var(--or-marque); fill: rgba(220,178,40,.16); }
  :where(.gabarit-preferences) .z-d.actif path { stroke: var(--texte-secondaire); fill: rgba(92,104,97,.12); }
  :where(.gabarit-preferences) .zone path { stroke-linejoin: round; }
  .iso.avec-fond { background: var(--mer); }
  #fond path { fill: var(--terre); stroke: var(--terre); stroke-width: .8; stroke-linejoin: round; }
  .ville circle { fill: var(--fond-carte); stroke: var(--texte-secondaire); stroke-width: 1.5; }
  .ville text { font-family: var(--f-mono); font-size: 11px; fill: var(--texte-principal); opacity: 0; transition: opacity .4s; paint-order: stroke; stroke: var(--fond-doux); stroke-width: 3px; }
  .ville circle { opacity: .45; }
  .iso[data-actif="a"] .ville[data-z="a"] text, .iso[data-actif="b"] .ville[data-z="b"] text, .iso[data-actif="c"] .ville[data-z="c"] text, .iso[data-actif="d"] .ville[data-z="d"] text { opacity: 1; }
  .iso[data-actif="a"] .ville[data-z="a"] circle, .iso[data-actif="b"] .ville[data-z="b"] circle, .iso[data-actif="c"] .ville[data-z="c"] circle, .iso[data-actif="d"] .ville[data-z="d"] circle { opacity: 1; }
  .tab-zones td:nth-child(2) { white-space: nowrap; }
  :where(.gabarit-preferences) .legende { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--texte-muted); }
  :where(.gabarit-preferences) .legende svg { vertical-align: middle; margin-right: 6px; }
  .tab-zones { width: 100%; border-collapse: collapse; font-size: 15px; }
  .tab-zones th { text-align: left; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-muted); font-weight: 500; padding: 10px 14px; border-bottom: 1px solid var(--texte-principal); }
  .tab-zones td { padding: 16px 14px; border-bottom: 1px solid var(--bordure); vertical-align: top; color: var(--texte-secondaire); }
  .tab-zones tr { transition: background .4s; }
  :where(.gabarit-preferences) .tab-zones tr.actif { background: var(--vert-fond); }
  :where(.gabarit-preferences) .tab-zones tr.actif[data-z="c"] { background: var(--or-fond); }
  :where(.gabarit-preferences) .tab-zones tr.actif[data-z="d"] { background: var(--fond-doux); }
  :where(.gabarit-preferences) .pastille { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-titre); font-weight: 600; font-size: 18px; }
  .za { background: var(--vert-trait); color: #fff; }
  .zb { background: var(--vert-fond); color: var(--vert-texte); border: 2px solid var(--vert-trait); }
  .zc { background: var(--or-fond); color: var(--or-texte); border: 2px solid var(--or-marque); }
  .zd { background: var(--fond-doux); color: var(--texte-principal); border: 2px solid var(--texte-secondaire); }
  .dispo { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; padding: 40px 44px; border-radius: 18px; background: #0F1412; border-left: 6px solid var(--vert-trait); }
  @media (max-width:1100px) {
    .dispo { padding: 28px 22px; }
  }
  :root[data-theme="dark"] .dispo { background: var(--vert-fond); border: 1px solid var(--vert-trait); border-left-width: 6px; }
  @media (prefers-color-scheme:dark) {
    :root:not([data-theme="light"]) .dispo { background: var(--vert-fond); border: 1px solid var(--vert-trait); border-left-width: 6px; }
  }
  @media (max-width:1100px) {
    .pref { padding: 48px 16px 72px; }
    .tab-zones { display: block; overflow-x: auto; }
  }
  @media (prefers-reduced-motion: reduce) {
    :where(.gabarit-preferences) .zone path, .tab-zones tr { transition: none; }
  }
/* </r0:page:preferences> */
/* <r0:page:mentions> */
  /* --- mentions : 09_mentions_legales.html --- */
  :where(.gabarit-mentions) .legal { padding: 72px 120px 96px; display: flex; flex-direction: column; gap: 24px; max-width: 1000px; }
  :where(.gabarit-mentions) .bloc { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 24px; padding: 24px 0; border-top: 1px solid var(--bordure); }
  :where(.gabarit-mentions) .bloc > div { display: flex; flex-direction: column; gap: 10px; }
  :where(.gabarit-mentions) .bloc code { font-family: var(--f-mono); font-size: 13px; }
  @media (max-width:1100px) {
    :where(.gabarit-mentions) .legal { padding: 48px 16px 72px; }
    :where(.gabarit-mentions) .bloc { gap: 8px; }
  }
/* </r0:page:mentions> */
/* <r0:page:confidentialite> */
  /* --- confidentialite : 09_confidentialite.html --- */
  :where(.gabarit-confidentialite) .legal { padding: 72px 120px 96px; display: flex; flex-direction: column; gap: 24px; max-width: 1000px; }
  :where(.gabarit-confidentialite) .bloc { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 24px; padding: 24px 0; border-top: 1px solid var(--bordure); }
  :where(.gabarit-confidentialite) .bloc > div { display: flex; flex-direction: column; gap: 10px; }
  :where(.gabarit-confidentialite) .bloc code { font-family: var(--f-mono); font-size: 13px; }
  @media (max-width:1100px) {
    :where(.gabarit-confidentialite) .legal { padding: 48px 16px 72px; }
    :where(.gabarit-confidentialite) .bloc { gap: 8px; }
  }
/* </r0:page:confidentialite> */
/* <r0:page:recit> */
  /* --- recit : 05a_*.html (récit) --- */
  :where(.gabarit-recit.recit-lab-reconversion-bi) .blog { --accent: #74C7A2; --accent-texte: var(--vert-texte); --nuit: #0F1412; }
  :where(.gabarit-recit.recit-le-site-passe-en-v2) .blog { --accent: #28674E; --nuit: #0F1412; }
  :where(.gabarit-recit.recit-lab-outils-parcours) .blog { --accent: #E8C547; --accent-texte: var(--or-texte); --nuit: #0F1412; }
  .blog-hero { background: var(--nuit); color: #E8EEEA; padding: 72px 120px 0; overflow: hidden; border-radius: 5px; }
  .blog-hero .retour { color: #74C7A2; }
  :where(.gabarit-recit) .blog-hero .meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 28px; font-family: var(--f-mono); font-size: 12px; color: #93A199; letter-spacing: .06em; text-transform: uppercase; }
  :where(.gabarit-recit) .blog-hero .meta .pastille { border: 1px solid #3a4540; border-radius: 999px; padding: 4px 10px; color: #C0CBC5; }
  .blog-hero h1 { font-family: var(--f-titre); font-weight: 500; font-size: clamp(44px,7vw,96px); line-height: 1; letter-spacing: -.03em; margin: 20px 0 0; max-width: 16ch; }
  .blog-hero .chapeau { font-size: clamp(18px,2vw,22px); line-height: 1.5; color: #C0CBC5; max-width: 46ch; margin: 24px 0 0; }
  .avant-apres { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 28px; align-items: end; margin-top: 56px; }
  .avant-apres figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
  .avant-apres img { display: block; width: 100%; height: auto; border-radius: 12px 12px 0 0; border: 1px solid #27322D; border-bottom: 0; }
  .avant-apres .v1 img { filter: grayscale(.55) brightness(.8); transform: translateY(24px); }
  .avant-apres figcaption { font-family: var(--f-mono); font-size: 12px; color: #93A199; order: -1; }
  :where(.gabarit-recit) .recit { max-width: 680px; margin: 0 auto; padding: 88px 16px 24px; }
  :where(.gabarit-recit) .recit p { font-size: 19px; line-height: 1.75; color: var(--texte-secondaire); margin: 0 0 22px; }
  :where(.gabarit-recit) .recit p.lettrine::first-letter { font-family: var(--f-titre); float: left; font-size: 88px; line-height: .8; padding: 6px 12px 0 0; color: var(--vert-texte); }
  :where(.gabarit-recit) .recit h2 { font-family: var(--f-titre); font-weight: 500; font-size: 34px; line-height: 1.15; letter-spacing: -.01em; color: var(--texte-principal); margin: 56px 0 20px; }
  :where(.gabarit-recit) .recit blockquote { margin: 40px 0; padding: 4px 0 4px 28px; border-left: 3px solid var(--vert-trait); font-family: var(--f-titre); font-size: 28px; line-height: 1.35; color: var(--texte-principal); }
  :where(.gabarit-recit) .recit .fin { font-family: var(--f-mono); font-size: 13px; color: var(--texte-muted); border-top: 1px solid var(--bordure); padding-top: 20px; margin-top: 48px; }
  :where(.gabarit-recit) .nav-art { max-width: 680px; margin: 0 auto 96px; padding: 0 16px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  @media (max-width:1100px) {
    .blog-hero { padding: 48px 16px 0; }
    .avant-apres { gap: 16px; }
    .avant-apres .v1 img { transform: none; }
    :where(.gabarit-recit) .recit { padding-top: 56px; }
    :where(.gabarit-recit) .recit p { font-size: 17px; }
    :where(.gabarit-recit) .recit h2 { font-size: 28px; }
    :where(.gabarit-recit) .recit blockquote { font-size: 23px; }
  }
  :where(.gabarit-recit.recit-lab-outils-parcours, .gabarit-recit.recit-lab-reconversion-bi) .frise { list-style: none; margin: 56px 0 0; padding: 0 0 64px; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); position: relative; }
  :where(.gabarit-recit.recit-lab-outils-parcours, .gabarit-recit.recit-lab-reconversion-bi) .frise::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: repeating-linear-gradient(90deg,#3D8F6D 0 8px,transparent 8px 14px); }
  :where(.gabarit-recit.recit-lab-outils-parcours, .gabarit-recit.recit-lab-reconversion-bi) .frise li { position: relative; padding-top: 32px; display: flex; flex-direction: column; gap: 6px; padding-right: 12px; }
  :where(.gabarit-recit.recit-lab-outils-parcours, .gabarit-recit.recit-lab-reconversion-bi) .frise li::before { content: ""; position: absolute; top: 0; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--nuit); border: 3px solid #74C7A2; }
  :where(.gabarit-recit.recit-lab-outils-parcours, .gabarit-recit.recit-lab-reconversion-bi) .frise li.titre::before { border-color: #E8C547; background: #E8C547; }
  :where(.gabarit-recit.recit-lab-outils-parcours, .gabarit-recit.recit-lab-reconversion-bi) .frise .an { font-family: var(--f-mono); font-size: 12px; color: #93A199; }
  :where(.gabarit-recit.recit-lab-outils-parcours, .gabarit-recit.recit-lab-reconversion-bi) .frise .quoi { font-size: 15px; line-height: 1.35; color: #E8EEEA; }
  :where(.gabarit-recit.recit-lab-outils-parcours, .gabarit-recit.recit-lab-reconversion-bi) .outils { display: flex; flex-wrap: wrap; gap: 10px; margin: 48px 0 0; padding: 0 0 64px; }
  :where(.gabarit-recit.recit-lab-outils-parcours, .gabarit-recit.recit-lab-reconversion-bi) .outils span { font-family: var(--f-mono); font-size: 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid #3a4540; color: #C0CBC5; }
  :where(.gabarit-recit.recit-lab-outils-parcours, .gabarit-recit.recit-lab-reconversion-bi) .outils span b { color: var(--accent); font-weight: 500; margin-right: 6px; }
  :where(.gabarit-recit.recit-lab-outils-parcours, .gabarit-recit.recit-lab-reconversion-bi) .blog .recit p.lettrine::first-letter { color: var(--accent-texte); }
  :where(.gabarit-recit.recit-lab-outils-parcours, .gabarit-recit.recit-lab-reconversion-bi) .blog .recit blockquote { border-left-color: var(--accent-texte); }
  @media (max-width:1100px) {
    :where(.gabarit-recit.recit-lab-outils-parcours, .gabarit-recit.recit-lab-reconversion-bi) .frise { row-gap: 20px; }
    :where(.gabarit-recit.recit-lab-outils-parcours, .gabarit-recit.recit-lab-reconversion-bi) .frise::before { display: none; }
  }
/* </r0:page:recit> */
/* </r0:pages> */

/* Petits ecrans : regles ordinaires de theme.css */
@media (max-width: 1100px) {
  .nav { padding: 0 16px; gap: 12px; height: auto; flex-wrap: wrap; padding-block: 10px; }
  .menu { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; gap: 20px; }
  .menu a { padding: 8px 0; }
  .logo { margin-right: auto; }
  .footer { padding: 24px 16px; }
  .chap .index { display: none; }
  .pipeline { flex-wrap: wrap; }
  .pipeline .fleche { display: none; }
  .gantt { overflow-x: auto; }
  .gantt > div { width: 1060px; }
  .sous-nav { overflow-x: auto; white-space: nowrap; }
}

} /* fin @layer maquette */


/* ===========================================================================
   08. EX-STYLES EN LIGNE (hors couche : ils l'emportent sur la couche)
   Une declaration -> utilitaire (propriete abregee + valeur) ;
   plusieurs -> classe nommee dans outils/r0_classes.json.
   =========================================================================== */

/* <r0:utilitaires> */
.as-flex-start { align-self: flex-start; }
.bb-1-solid-27322d { border-bottom: 1px solid #27322D; }
.bc-vert { border-color: var(--vert-trait); }
.bg-repeating-linear-gradient-90deg-muted-0-6-transparent-6-11 { background: repeating-linear-gradient(90deg, var(--texte-muted) 0 6px, transparent 6px 11px); }
.bs-dashed { border-style: dashed; }
.c-encre { color: var(--texte-principal); }
.c-muted { color: var(--texte-muted); }
.c-muted-nuit { color: #93A199; }
.c-or { color: var(--or-texte); }
.c-vert-nuit { color: #74C7A2; }
.d-block { display: block; }
.detail-corps { padding: 72px 120px 96px; display: flex; flex-direction: column; gap: 24px; max-width: 1100px; }
.filet-bas { border-bottom: 1px solid var(--bordure); }
.fond-or { background: var(--or-marque); }
.fond-vert { background: var(--vert-trait); }
.fs-15 { font-size: 15px; }
.fs-19 { font-size: 19px; }
.fs-20 { font-size: 20px; }
.fs-24 { font-size: 24px; }
.fs-26 { font-size: 26px; }
.fs-36 { font-size: 36px; }
.fs-40 { font-size: 40px; }
.fs-44 { font-size: 44px; }
.fs-56 { font-size: 56px; }
.fw-600 { font-weight: 600; }
.gap-32 { gap: 32px; }
.h-36 { height: 36px; }
.h-96 { height: 96px; }
.jc-center { justify-content: center; }
.l-0 { left: 0; }
.l-175 { left: 175px; }
.l-249 { left: 249px; }
.l-351 { left: 351px; }
.l-36 { left: 36px; }
.l-38 { left: 38px; }
.l-409 { left: 409px; }
.l-490 { left: 490px; }
.l-512 { left: 512px; }
.l-594 { left: 594px; }
.l-596 { left: 596px; }
.l-632 { left: 632px; }
.l-656 { left: 656px; }
.l-700 { left: 700px; }
.l-796 { left: 796px; }
.l-873 { left: 873px; }
.l-95 { left: 95px; }
.m-12-0-4 { margin: 12px 0 4px; }
.ml-auto { margin-left: auto; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mw-24ch { max-width: 24ch; }
.mw-360 { max-width: 360px; }
.mw-62ch { max-width: 62ch; }
.op-6 { opacity: .6; }
.p-24-0 { padding: 24px 0; }
.p-28-40 { padding: 28px 40px; }
.p-4-12-10 { padding: 4px 12px 10px; }
.p-40-120-0 { padding: 40px 120px 0; }
.p-48-120-0 { padding: 48px 120px 0; }
.p-72-120-0-260 { padding: 72px 120px 0 260px; }
.pb-96 { padding-bottom: 96px; }
.pile-10 { display: flex; flex-direction: column; gap: 10px; }
.pile-12 { display: flex; flex-direction: column; gap: 12px; }
.pile-14 { display: flex; flex-direction: column; gap: 14px; }
.pile-16 { display: flex; flex-direction: column; gap: 16px; }
.pile-20 { display: flex; flex-direction: column; gap: 20px; }
.pile-24 { display: flex; flex-direction: column; gap: 24px; }
.pile-32 { display: flex; flex-direction: column; gap: 32px; }
.pile-8 { display: flex; flex-direction: column; gap: 8px; }
.pt-32 { padding-top: 32px; }
.pt-40 { padding-top: 40px; }
.pt-48 { padding-top: 48px; }
.rangee-8 { display: flex; align-items: center; gap: 8px; }
.rangee-extremes { display: flex; justify-content: space-between; align-items: baseline; }
.rangee-souple-8 { display: flex; gap: 8px; flex-wrap: wrap; }
.rangee-souple-8b { display: flex; flex-wrap: wrap; gap: 8px; }
.tete-page { padding: 88px 120px 0; display: flex; flex-direction: column; gap: 20px; }
.w-120 { width: 120px; }
.w-160 { width: 160px; }
.w-220 { width: 220px; }
.w-240 { width: 240px; }
.w-48 { width: 48px; }
/* </r0:utilitaires> */

/* <r0:derives> */
/* <r0:derives:carlog> */
/* --- carlog --- */
.sous-nav__titre { font-family: var(--f-titre); font-weight: 600; font-size: 17px; color: var(--texte-principal); }
.vitrine { background: #0F1412; color: #E8EEEA; padding: 112px 120px 72px; display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center; border-radius: 5px; }
.vitrine__titre { font-family: var(--f-titre); font-size: 128px; font-weight: 500; letter-spacing: -0.04em; line-height: 0.95; }
.vitrine__chapeau { font-size: 22px; color: #C0CBC5; max-width: 40ch; }
.vitrine__legende { color: #93A199; margin-top: 8px; }
.erreur__num { font-size: 32px; color: var(--or-texte); }
.erreur__texte { font-size: 15px; margin-top: 8px; }
.graphe-cadre { padding: 32px 40px; display: flex; flex-direction: column; gap: 8px; }
.graphe__tete { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.legende__neutre { background: var(--texte-muted); opacity: .45; }
.graphe__tete--second { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.graphe-cadre--aere { padding: 32px 40px; display: flex; flex-direction: column; gap: 12px; }
.gain-cadre { padding: 24px 28px; display: flex; flex-direction: column; gap: 8px; border-left: 3px solid var(--vert-trait); }
.choix--liste { grid-template-columns: 40px minmax(0,1fr); }
.choix--liste-fin { grid-template-columns: 40px minmax(0,1fr); border-bottom: 1px solid var(--bordure); }
.capture-figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.limites { padding: 40px; border-color: var(--or-marque); background: var(--or-fond); display: flex; flex-direction: column; gap: 20px; }
.limites__texte { font-size: 15px; margin-top: 8px; color: var(--texte-principal); }
.ia-bloc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; }
.ia-bloc__texte { font-size: 15px; color: var(--texte-principal); }
.suite-lab { display: flex; justify-content: center; margin-top: 64px; }
/* </r0:derives:carlog> */
/* <r0:derives:accueil> */
/* --- accueil --- */
.accueil__titre { font-size: 88px; max-width: 1100px; }
.accueil__lecture { display: flex; gap: 24px; align-items: center; margin-top: 8px; }
.terrain__chiffre { display: flex; gap: 48px; align-items: flex-end; flex-wrap: wrap; }
.terrain__num { font-size: 160px; color: var(--vert-texte); }
.terrain__texte { max-width: 46ch; padding-bottom: 16px; }
.declic__citation { font-size: 48px; max-width: 24ch; }
.cap__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
/* </r0:derives:accueil> */
/* <r0:derives:projets> */
/* --- projets --- */
.phare { display: grid; grid-template-columns: minmax(0, 1fr) 480px; background: #0F1412; border-radius: 20px; overflow: hidden; color: #E8EEEA; }
.phare__corps { padding: 56px; display: flex; flex-direction: column; gap: 18px; }
.phare__titre { font-family: var(--f-titre); font-size: 64px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.phare__chapeau { font-size: 20px; color: #C0CBC5; max-width: 34ch; }
.chip-nuit { border: 1px solid #27322D; color: #C0CBC5; }
.phare__lien { color: #74C7A2; margin-top: 8px; }
.phare__chiffres { border-left: 1px solid #27322D; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); }
.phare__chiffre { padding: 28px 40px; border-bottom: 1px solid #27322D; }
.suite-chaine { display: flex; align-items: stretch; gap: 16px; }
.suite-fleche { display: flex; align-items: center; color: var(--vert-texte); }
/* </r0:derives:projets> */
/* <r0:derives:fiche> */
/* --- fiche --- */
.bouton-article { margin-top: 16px; display: inline-flex; }
/* </r0:derives:fiche> */
/* <r0:derives:competences> */
/* --- competences --- */
.competences__tete { padding-top: 88px; display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 64px; align-items: end; }
.competences__compteurs { padding: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mode__actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.detail { padding: 28px 36px; scroll-margin-top: 96px; }
.savoirs-zone { padding-top: 56px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 20px; }
.savoirs-zone__tete { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; border-bottom: 2px solid var(--or-marque); padding-bottom: 12px; }
.detail__titre { font-size: 34px; }
.as-start { align-self: start; }
.col-tete__nom { font-weight: 600; font-size: 15px; }
.detail__grille { display: grid; grid-template-columns: minmax(0,340px) minmax(0,1fr); gap: 40px; }
/* </r0:derives:competences> */
/* <r0:derives:parcours> */
/* --- parcours --- */
.tete-page--parcours { padding: 88px 120px 48px; display: flex; flex-direction: column; gap: 20px; }
.pipeline-rangee { padding: 0 120px; display: flex; align-items: center; gap: 0; }
.gantt__graduations { position: relative; width: 1060px; height: 24px; }
.gantt__couloirs { position: relative; width: 1060px; }
.gantt__resserre { position: absolute; left: 512px; top: 0; width: 146px; height: 168px; background: repeating-linear-gradient(135deg, var(--fond-doux) 0 6px, transparent 6px 12px); border-left: 1px dashed var(--bordure); border-right: 1px dashed var(--bordure); }
.gantt-95-139 { left: 95px; width: 139px; }
.gantt-409-59 { left: 409px; width: 59px; }
.gantt-660-23 { left: 660px; width: 23px; }
.gantt-689-101 { left: 689px; width: 101px; }
.gantt-796-236 { left: 796px; width: 236px; }
.gantt__titre-obtenu { position: absolute; left: 1040px; top: 40px; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--or-marque); background: var(--fond-carte); }
.gantt-249-43 { left: 249px; width: 43px; }
.gantt-351-37 { left: 351px; width: 37px; }
.gantt-512-387 { left: 512px; width: 387px; }
.gantt__legende { display: flex; gap: 28px; margin-top: 16px; }
.legende__formation { width: 24px; height: 8px; background: var(--vert-trait); border-radius: 2px; }
.legende__experience { width: 24px; height: 8px; background: var(--or-marque); border-radius: 2px; }
.legende__date { width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--vert-trait); }
.legende__titre { width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--or-marque); }
.legende__resserre { width: 24px; height: 12px; background: repeating-linear-gradient(135deg, var(--fond-doux) 0 4px, transparent 4px 8px); border: 1px dashed var(--bordure); }
.journal-zone { padding: 64px 120px 0; display: flex; flex-direction: column; gap: 16px; }
/* </r0:derives:parcours> */
/* <r0:derives:lab> */
/* --- lab --- */
.lab-corps { padding: 56px 120px 96px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; }
.bouton-texte { background: none; border: 0; cursor: pointer; font: inherit; }
/* </r0:derives:lab> */
/* <r0:derives:article> */
/* --- article --- */
.article__titre { font-size: clamp(36px, 5vw, 56px); }
/* </r0:derives:article> */
/* <r0:derives:hobbies> */
/* --- hobbies --- */
.hobby__liens { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
/* </r0:derives:hobbies> */
/* <r0:derives:randonnee> */
/* --- randonnee --- */
/* </r0:derives:randonnee> */
/* <r0:derives:automobile> */
/* --- automobile --- */
/* </r0:derives:automobile> */
/* <r0:derives:photo-video> */
/* --- photo-video --- */
/* </r0:derives:photo-video> */
/* <r0:derives:cvs> */
/* --- cvs --- */
.cvs__tete { padding: 56px 120px 0; display: flex; justify-content: space-between; align-items: end; }
.cvs__choix { padding: 28px 32px; display: flex; flex-direction: column; gap: 14px; }
.cvs__apercu { border-left: 1px solid var(--bordure); background: var(--fond-doux); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.cv-apercu { display: block; width: 100%; height: auto; aspect-ratio: 1/1.414; object-fit: cover; object-position: top; background: #fff; border: 1px solid var(--bordure); border-radius: 4px; }
/* </r0:derives:cvs> */
/* <r0:derives:contact> */
/* --- contact --- */
.copie-ok--nuit { color: #74C7A2; align-self: center; }
.canal__action { align-self: flex-start; margin-top: auto; }
/* </r0:derives:contact> */
/* <r0:derives:preferences> */
/* --- preferences --- */
.pref__tete { display: flex; flex-direction: column; gap: 20px; max-width: 1000px; }
.dispo__surtitre { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #74C7A2; }
.dispo__titre { font-size: 40px; color: #E8EEEA; }
.dispo__texte { color: #C0CBC5; font-size: 18px; max-width: 52ch; }
.dispo__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn-ligne--nuit { background: transparent; color: #E8EEEA; border-color: #3a4540; }
/* </r0:derives:preferences> */
/* <r0:derives:mentions> */
/* --- mentions --- */
/* </r0:derives:mentions> */
/* <r0:derives:confidentialite> */
/* --- confidentialite --- */
/* </r0:derives:confidentialite> */
/* <r0:derives:recit> */
/* --- recit --- */
/* </r0:derives:recit> */
/* </r0:derives> */

/* Fenetre de telechargement des fiches (D147) : produite par [yr_telechargement], hors
   convertisseur. Ex-style en ligne du bouton « Annuler » de mockup/03p_*.html. */
.profil-annuler { margin-top: 16px; background: none; border: 0; cursor: pointer; font: inherit; }


/* ===========================================================================
   99. EX-!IMPORTANT DE LA MAQUETTE (hors couche, en dernier : ils l'emportent
   sur les ex-styles en ligne, comme dans la maquette). Chaque regle garde la
   specificite de l'original (.page -> .site).
   Rustines de theme.css devenues classes (PASSATION §8.4) :
     .m-gouttiere  marges laterales ramenees a 16 px
     .m-gauche     marge gauche ramenee a 16 px
     .m-pile       grille ramenee a une colonne
     .m-geant, .m-grand  tres grands chiffres reduits
   =========================================================================== */

@media (max-width: 1100px) {
  .site .m-gouttiere { padding-left: 16px; padding-right: 16px; }
  .site .m-gauche { padding-left: 16px; }
  .site .m-pile { grid-template-columns: minmax(0, 1fr); }
  .site .h1 { font-size: clamp(36px, 9vw, 64px); }
  .site .h2 { font-size: clamp(28px, 7vw, 40px); }
  .site .num { font-size: clamp(36px, 10vw, 56px); }
  .site table { display: block; overflow-x: auto; }
}
@media (max-width: 1100px) {
  .chap, .secteur, .entree, .hobby, .app, .pb, .fiche, .ctx, .regle { grid-template-columns: minmax(0, 1fr); }
  .chaine, .band, .planche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app { height: auto; }
  .pipeline { gap: 12px; }
  .pipeline .noeud { width: 100%; }
  .gantt { padding-left: 150px; }
  .sous-nav { padding: 0 16px; }
  .site .m-geant { font-size: clamp(56px, 18vw, 96px); }
  .site .m-grand { font-size: clamp(36px, 11vw, 56px); }
}

/* <r0:importants> */
/* <r0:importants:carlog> */
/* --- carlog --- */
@media (max-width:1100px) {
  .deux, :where(.gabarit-carlog) .choix, .version, .erreur, .echelle { grid-template-columns: minmax(0,1fr); }
  .brique { grid-template-columns: minmax(0,1fr); }
}
/* </r0:importants:carlog> */
/* <r0:importants:accueil> */
/* --- accueil --- */
:where(.gabarit-accueil) .secteur { grid-template-columns: 130px minmax(0,1fr) 240px; }
@media (max-width:1100px) {
  :where(.gabarit-accueil) .recit { grid-template-columns: minmax(0,1fr); }
  .kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  :where(.gabarit-accueil) .kpi .num { font-size: 32px; }
  .qualites, .horizons { grid-template-columns: minmax(0,1fr); }
  .qualite { padding-left: 0; border-left: 0; }
  :where(.gabarit-accueil) .secteur { grid-template-columns: minmax(0,1fr); gap: 4px; }
}
/* </r0:importants:accueil> */
/* <r0:importants:projets> */
/* --- projets --- */
@media (max-width:1100px) {
  :where(.gabarit-projets) .grille { grid-template-columns: minmax(0,1fr); }
}
/* </r0:importants:projets> */
/* <r0:importants:fiche> */
/* --- fiche --- */
@media (max-width:1100px) {
  :where(.gabarit-fiche) .bloc { grid-template-columns: minmax(0,1fr); }
  :where(.gabarit-fiche) .galerie { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
/* </r0:importants:fiche> */
/* <r0:importants:competences> */
/* --- competences --- */
@media (max-width:1100px) {
  :where(.gabarit-competences) .chaine, .savoirs { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
/* </r0:importants:competences> */
/* <r0:importants:parcours> */
/* --- parcours --- */
/* </r0:importants:parcours> */
/* <r0:importants:lab> */
/* --- lab --- */
.vignette { display: flex; }
@media (max-width:1100px) {
  :where(.gabarit-lab) .grille { grid-template-columns: minmax(0,1fr); }
}
/* </r0:importants:lab> */
/* <r0:importants:article> */
/* --- article --- */
@media (max-width:1100px) {
  :where(.gabarit-article) .bloc, :where(.gabarit-article) .resultats { grid-template-columns: minmax(0,1fr); }
}
/* </r0:importants:article> */
/* <r0:importants:hobbies> */
/* --- hobbies --- */
@media (max-width:1100px) {
  :where(.gabarit-hobbies) .hobby, :where(.gabarit-hobbies) .hobby.inverse { grid-template-columns: minmax(0,1fr); padding: 56px 16px 0; }
}
/* </r0:importants:hobbies> */
/* <r0:importants:randonnee> */
/* --- randonnee --- */
@media (max-width:1100px) {
  :where(.gabarit-randonnee) .bloc { grid-template-columns: minmax(0,1fr); }
  :where(.gabarit-randonnee) .galerie { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
/* </r0:importants:randonnee> */
/* <r0:importants:automobile> */
/* --- automobile --- */
@media (max-width:1100px) {
  :where(.gabarit-automobile) .bloc { grid-template-columns: minmax(0,1fr); }
  :where(.gabarit-automobile) .galerie { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
/* </r0:importants:automobile> */
/* <r0:importants:photo-video> */
/* --- photo-video --- */
@media (max-width:1100px) {
  :where(.gabarit-photo-video) .bloc { grid-template-columns: minmax(0,1fr); }
  :where(.gabarit-photo-video) .galerie { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
/* </r0:importants:photo-video> */
/* <r0:importants:cvs> */
/* --- cvs --- */
:where(.gabarit-cvs) .app { height: auto; }
@media (max-width:1100px) {
  :where(.gabarit-cvs) .app { grid-template-columns: minmax(0,1fr); }
  .side { display: none; }
}
/* </r0:importants:cvs> */
/* <r0:importants:contact> */
/* --- contact --- */
@media (max-width:1100px) {
  :where(.gabarit-contact) .faits { grid-template-columns: minmax(0,1fr); }
  :where(.gabarit-contact) .requete .res { grid-template-columns: minmax(0,1fr); }
  :where(.gabarit-contact) .bloc { grid-template-columns: minmax(0,1fr); }
}
/* </r0:importants:contact> */
/* <r0:importants:preferences> */
/* --- preferences --- */
@media (max-width:1100px) {
  :where(.gabarit-preferences) .deux { grid-template-columns: minmax(0,1fr); }
}
/* </r0:importants:preferences> */
/* <r0:importants:mentions> */
/* --- mentions --- */
@media (max-width:1100px) {
  :where(.gabarit-mentions) .bloc { grid-template-columns: minmax(0,1fr); }
}
/* </r0:importants:mentions> */
/* <r0:importants:confidentialite> */
/* --- confidentialite --- */
@media (max-width:1100px) {
  :where(.gabarit-confidentialite) .bloc { grid-template-columns: minmax(0,1fr); }
}
/* </r0:importants:confidentialite> */
/* <r0:importants:recit> */
/* --- recit --- */
@media (max-width:1100px) {
  .avant-apres { grid-template-columns: minmax(0,1fr); }
  :where(.gabarit-recit.recit-lab-outils-parcours, .gabarit-recit.recit-lab-reconversion-bi) .frise { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
/* </r0:importants:recit> */
/* </r0:importants> */