/* Généré par outils/build-formation.cjs depuis app/formation.css et app/schemas.css : ne pas éditer. */
@font-face { font-family: "Bricolage Grotesque"; src: url(../../app/fonts/bricolage-latin.woff2) format("woff2"); font-weight: 200 800; font-display: swap; 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: "Bricolage Grotesque"; src: url(../../app/fonts/bricolage-latin-ext.woff2) format("woff2"); font-weight: 200 800; font-display: swap; 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: "Hanken Grotesk"; src: url(../../app/fonts/hanken-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; 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: "Hanken Grotesk"; src: url(../../app/fonts/hanken-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-display: swap; 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: "Martian Mono"; src: url(../../app/fonts/martian-latin.woff2) format("woff2"); font-weight: 100 800; font-display: swap; 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: "Martian Mono"; src: url(../../app/fonts/martian-latin-ext.woff2) format("woff2"); font-weight: 100 800; font-display: swap; 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; }
:root {
  color-scheme: light dark;
  /* le monde du portfolio : mur de galerie, carton, encre, filets */
  --fond: light-dark(#e9e9e6, #111214);
  --fond-2: light-dark(#f2f2ef, #16181b);
  --panneau: light-dark(#fbfbfa, #1a1c20);
  --panneau-2: light-dark(#f1f1ee, #202328);
  --encre: light-dark(#18191b, #f1f2f3);
  --encre-2: light-dark(#3d3f43, #c2c6cc);
  --encre-3: light-dark(#5a5c60, #9499a0); /* ≥ 4,5:1 sur --fond, --fond-2 et --panneau dans les deux thèmes */
  --filet: light-dark(#cfcfca, #2a2d33);
  --filet-2: light-dark(#a6a6a0, #474c54);
  --bleu: light-dark(#1d4c8f, #6b9ce0);
  --bleu-2: light-dark(rgb(29 76 143 / .5), rgb(107 156 224 / .45));
  --bleu-voile: light-dark(rgb(29 76 143 / .08), rgb(107 156 224 / .1));
  --cable: light-dark(#d0291c, #ff4b3a);
  --accent: light-dark(#a8170c, #ff8c7f);
  --accent-plein: light-dark(#c9291b, #c9291b);
  --rouge-voile: light-dark(rgb(208 41 28 / .1), rgb(255 75 58 / .13));
  --ok: light-dark(#0b6e49, #4fd1a1);
  --ok-voile: light-dark(rgb(11 110 73 / .09), rgb(79 209 161 / .11));
  --ambre: light-dark(#8a5300, #f5b544);
  --ambre-voile: light-dark(rgb(138 83 0 / .09), rgb(245 181 68 / .11));
  /* couleurs de lot, une par chapitre : catégories, jamais des statuts (≥ 4,5:1 sur fond et panneau) */
  --ch-1: light-dark(#3d3f43, #c2c6cc);  /* fondations : graphite */
  --ch-2: light-dark(#1d4c8f, #6b9ce0);  /* réseau : bleu de plan */
  --ch-3: light-dark(#4338a8, #a59cf5);  /* sécurité réseau : indigo */
  --ch-4: light-dark(#7a2d8c, #d79ae6);  /* identité : prune */
  --ch-5: light-dark(#0b6577, #4cc4d6);  /* cloud : sarcelle */
  --ch-6: light-dark(#a8170c, #ff8c7f);  /* risque et EBIOS RM : carmin */
  --ch-7: light-dark(#1c6b3a, #6fd39a);  /* homologation et conformité : vert sapin */
  --ch-8: light-dark(#7a4b1e, #d9a066);  /* données et usages : terre */
  --ch-9: light-dark(#a4430a, #ff9a5c);  /* détecter et réagir : orange brûlé */
  --ch-10: light-dark(#44546a, #a3b3c7); /* spécialités et méthode : ardoise */
  --ch: var(--bleu);
  /* polices et mesures */
  --display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --emoji: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  /* échelle typographique : 6 pas, fluides ; les tailles en em restent relatives */
  --fs-xs: .6875rem;
  --fs-sm: .875rem;
  --fs-base: clamp(1rem, .97rem + .12vw, 1.0625rem);
  --fs-lg: clamp(1.125rem, 1.03rem + .4vw, 1.35rem);
  --fs-xl: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem);
  --fs-2xl: clamp(2.9rem, 1.3rem + 5vw, 5.6rem);
  --gout: clamp(1rem, 3.4vw, 2.6rem);
  --mesure: 44rem;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
[data-ch="1"] { --ch: var(--ch-1); } [data-ch="2"] { --ch: var(--ch-2); } [data-ch="3"] { --ch: var(--ch-3); } [data-ch="4"] { --ch: var(--ch-4); } [data-ch="5"] { --ch: var(--ch-5); } [data-ch="6"] { --ch: var(--ch-6); } [data-ch="7"] { --ch: var(--ch-7); } [data-ch="8"] { --ch: var(--ch-8); } [data-ch="9"] { --ch: var(--ch-9); } [data-ch="10"] { --ch: var(--ch-10); }
/* vocabulaire graphique des figures et des schémas : classes portées par les éléments SVG (outils/figures.cjs,
   outils/schemas-kit.cjs). Le corps de base est posé sur la racine <svg font-size="11"> en unités du dessin : il suit
   l'échelle du viewBox. Bloc repris tel quel par schemas/rendus/schemas.css (.dd svg → .dd svg) et par le portfolio. */
.dd svg text { font-family: var(--sans); fill: var(--encre-2); }
.dd svg .t-fort { fill: var(--encre); font-weight: 700; font-size: 1.16em; }
.dd svg .t-titre { fill: var(--encre); font-family: var(--display); font-weight: 800; font-size: 1.4em; letter-spacing: -.01em; }
.dd svg .t-mono { font-family: var(--mono); font-size: .96em; letter-spacing: .04em; fill: var(--encre-3); }
/* anatomie du kit : étiquettes mono (capitales posées par le kit, qui garde la casse des sigles), annotation, en-tête
   de couloir ; avant les couleurs de texte, qui l'emportent à spécificité égale (t-eti t-ch) */
.dd svg .t-eti { font-family: var(--mono); font-size: .9091em; font-weight: 500; letter-spacing: .05em; fill: var(--encre-3); }
.dd svg .t-fl { font-family: var(--mono); font-size: .9091em; font-weight: 500; letter-spacing: .04em; fill: var(--encre-3); }
.dd svg .t-note { font-family: var(--sans); font-style: italic; fill: var(--encre-2); }
.dd svg .t-colonne { font-family: var(--mono); font-size: .9091em; font-weight: 600; letter-spacing: .05em; fill: var(--encre); }
.dd svg .t-ch { fill: var(--ch); }
.dd svg .t-bleu { fill: var(--bleu); }
.dd svg .t-rouge { fill: var(--accent); }
.dd svg .t-vert { fill: var(--ok); }
.dd svg .t-ambre { fill: var(--ambre); }
.dd svg .t-inv { fill: var(--fond); }
.dd svg .t-petit { font-size: 1em; }
.dd svg .t-sous { font-size: 1em; fill: var(--encre-3); }
.dd svg .t-code { font-family: var(--mono); font-size: .96em; }
/* anatomie du kit : masque d'étiquette, acteur externe, document produit, zone et couloir neutres, filets, association,
   retour, lien sans pointe, séquence (asynchrone, ligne de vie, activation). Avant le vocabulaire des traits et des
   boîtes : une classe combinée (l-ch l-retour) garde la couleur de lot, comme dans les rendus du lot 15. */
.dd svg .masque { fill: var(--panneau); }
.dd svg .b-ext { fill: var(--panneau); stroke: var(--encre-3); stroke-width: 1.4; stroke-dasharray: 4 3; }
.dd svg .b-doc { fill: var(--panneau-2); stroke: var(--encre-2); stroke-width: 1.4; }
.dd svg .zone-n { fill: color-mix(in srgb, var(--encre) 2.5%, transparent); stroke: var(--encre-3); stroke-width: 1.2; stroke-dasharray: 6 4; }
.dd svg .couloir { fill: color-mix(in srgb, var(--encre) 2.5%, transparent); stroke: none; }
.dd svg .filet { fill: none; stroke: var(--filet); stroke-width: 1; }
.dd svg .filet-fort { fill: none; stroke: var(--encre-3); stroke-width: 1; }
.dd svg .l-assoc { fill: none; stroke: var(--encre-3); stroke-width: 1.4; stroke-dasharray: 5 4; }
.dd svg .l-retour { fill: none; stroke: var(--encre-2); stroke-width: 1.8; stroke-dasharray: 9 5; }
.dd svg .l-lien { fill: none; stroke: var(--encre-3); stroke-width: 1; }
.dd svg .b-tir { stroke-dasharray: 4 3; }
.dd svg .m-soft { fill: var(--encre-3); }
.dd svg .l-async { fill: none; stroke: var(--encre-3); stroke-width: 1.4; stroke-dasharray: 5 4; }
.dd svg .m-ouvert { fill: none; stroke: var(--encre-3); stroke-width: 1.2; }
.dd svg .vie { fill: none; stroke: var(--encre-3); stroke-width: 1; stroke-dasharray: 3 3; }
.dd svg .activation { fill: var(--panneau-2); stroke: var(--encre-3); stroke-width: .8; }
.dd svg .b {fill: var(--panneau); stroke: var(--encre); stroke-width: 1.4; }
.dd svg .b-doux { fill: var(--panneau-2); stroke: var(--filet-2); stroke-width: 1; }
.dd svg .b-ch { fill: color-mix(in srgb, var(--ch) 12%, var(--panneau)); stroke: var(--ch); stroke-width: 1.6; }
.dd svg .b-plein { fill: var(--ch); stroke: var(--ch); }
.dd svg .b-encre { fill: var(--encre); stroke: var(--encre); }
.dd svg .b-bleu { fill: color-mix(in srgb, var(--bleu) 10%, var(--panneau)); stroke: var(--bleu); stroke-width: 1.4; }
.dd svg .b-ok { fill: color-mix(in srgb, var(--ok) 10%, var(--panneau)); stroke: var(--ok); stroke-width: 1.4; }
.dd svg .b-refus { fill: color-mix(in srgb, var(--accent) 10%, var(--panneau)); stroke: var(--accent); stroke-width: 1.4; }
.dd svg .b-ambre { fill: color-mix(in srgb, var(--ambre) 11%, var(--panneau)); stroke: var(--ambre); stroke-width: 1.4; }
.dd svg .zone { fill: color-mix(in srgb, var(--ch) 5%, transparent); stroke: var(--ch); stroke-width: 1.2; stroke-dasharray: 6 4; }
.dd svg .zone-b { fill: var(--bleu-voile); stroke: var(--bleu-2); stroke-width: 1.2; stroke-dasharray: 6 4; }
.dd svg .zone-r { fill: var(--rouge-voile); stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 6 4; }
.dd svg .zone-v { fill: var(--ok-voile); stroke: var(--ok); stroke-width: 1.2; stroke-dasharray: 6 4; }
.dd svg .zone-a { fill: var(--ambre-voile); stroke: var(--ambre); stroke-width: 1.2; stroke-dasharray: 6 4; }
.dd svg .l { fill: none; stroke: var(--bleu); stroke-width: 1.8; }
.dd svg .l-encre { fill: none; stroke: var(--encre-2); stroke-width: 1.6; }
.dd svg .l-doux { fill: none; stroke: var(--filet-2); stroke-width: 1.2; }
.dd svg .l-ch { fill: none; stroke: var(--ch); stroke-width: 2.2; }
.dd svg .l-ok { fill: none; stroke: var(--ok); stroke-width: 2; }
.dd svg .l-refus { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; }
.dd svg .l-ambre { fill: none; stroke: var(--ambre); stroke-width: 2; stroke-dasharray: 3 3; }
.dd svg .l-epais { stroke-width: 5; }
.dd svg .l-tir { stroke-dasharray: 5 4; }
.dd svg .croix { stroke: var(--cable); stroke-width: 3; stroke-linecap: round; fill: none; }
.dd svg .pastille { fill: var(--ch); }
.dd svg .pastille-encre { fill: var(--encre); }
.dd svg .m-bleu { fill: var(--bleu); } .dd svg .m-ok { fill: var(--ok); } .dd svg .m-refus { fill: var(--accent); }
.dd svg .m-encre { fill: var(--encre-2); } .dd svg .m-ch { fill: var(--ch); } .dd svg .m-ambre { fill: var(--ambre); }
.dd svg .f-ch { fill: var(--ch); } .dd svg .f-ok { fill: var(--ok); } .dd svg .f-refus { fill: var(--accent); } .dd svg .f-ambre { fill: var(--ambre); }
.dd svg .f-bleu { fill: var(--bleu); } .dd svg .f-fond { fill: var(--panneau); } .dd svg .f-encre { fill: var(--encre); } .dd svg .f-doux { fill: var(--filet); }
/* familles catégorielles d'une figure (VLAN, zones, secteurs) : couleurs de lot, jamais des statuts */
.dd svg .bx-a { fill: color-mix(in srgb, var(--ch-2) 12%, var(--panneau)); stroke: var(--ch-2); stroke-width: 1.5; } .dd svg .s-a { fill: none; stroke: var(--ch-2); stroke-width: 2.2; } .dd svg .t-a { fill: var(--ch-2); }
.dd svg .bx-b { fill: color-mix(in srgb, var(--ch-4) 12%, var(--panneau)); stroke: var(--ch-4); stroke-width: 1.5; } .dd svg .s-b { fill: none; stroke: var(--ch-4); stroke-width: 2.2; } .dd svg .t-b { fill: var(--ch-4); }
.dd svg .bx-c { fill: color-mix(in srgb, var(--ch-5) 12%, var(--panneau)); stroke: var(--ch-5); stroke-width: 1.5; } .dd svg .s-c { fill: none; stroke: var(--ch-5); stroke-width: 2.2; } .dd svg .t-c { fill: var(--ch-5); }
.dd svg .bx-d { fill: color-mix(in srgb, var(--ch-8) 12%, var(--panneau)); stroke: var(--ch-8); stroke-width: 1.5; } .dd svg .s-d { fill: none; stroke: var(--ch-8); stroke-width: 2.2; } .dd svg .t-d { fill: var(--ch-8); }
.dd svg .a-ok { fill: color-mix(in srgb, var(--ok) 30%, var(--panneau)); } .dd svg .a-ambre { fill: color-mix(in srgb, var(--ambre) 32%, var(--panneau)); } .dd svg .a-refus { fill: color-mix(in srgb, var(--accent) 32%, var(--panneau)); }
/* masque d'étiquette posé sur une zone ou un couloir : la teinte du fond par-dessus, sans le contour (après .zone) */
.dd svg .masque-teinte { stroke: none; }

/* ============================================================================
   schemas.css — règles propres aux 35 schémas du second cerveau (rendus diagram-design, lot 15).
   Source écrite une fois. outils/build-formation.cjs assemble schemas/rendus/schemas.css :
   polices, jetons light-dark(), couleurs de lot et vocabulaire des figures repris de
   app/formation.css (source unique), puis ces règles. Aucune couleur ici : des variables du site.
   Un rendu ne contient aucun script : le thème et le mode intégré passent par le fragment d'URL
   (#clair, #sombre, #integre, #integre-clair, #integre-sombre), lu par :target.
   ========================================================================== */

/* ------------------------------------------------------- 1. thème et ancres */
/* thème du système par défaut (jetons : :root { color-scheme: light dark }) ; à l'écran, le fragment l'impose.
   Spécificité (1,1,1) : au-dessus de :root (0,1,0). À l'impression, la règle du §5 reprend la main. */
@media screen {
  html:has(#clair:target, #integre-clair:target) { color-scheme: light; }
  html:has(#sombre:target, #integre-sombre:target) { color-scheme: dark; }
}
.ancres { display: none; }

/* ------------------------------------------------------- 2. page plein écran */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--fond); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font: 400 1.0625rem/1.65 var(--sans); color: var(--encre-2); background: var(--fond); }
:focus-visible { outline: 2px solid var(--cable); outline-offset: 3px; border-radius: 2px; }
.dd-page { max-width: 76rem; margin: 0 auto; padding: clamp(1.2rem, 3vw, 2.6rem) clamp(1rem, 4vw, 3rem) clamp(1.6rem, 4vw, 3rem); }
.dd-surtitre { display: flex; flex-wrap: wrap; gap: .35rem .7rem; align-items: center; margin: 0; font: 500 .6875rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--encre-3); }
.dd-surtitre .code { padding: .12em .5em; border-radius: 3px; background: var(--ch); color: var(--fond); font-weight: 700; }
/* le point reste collé à l'élément qu'il clôt : jamais en début de ligne */
.dd-surtitre > span:not(:first-child):not(:last-child)::after { content: "\00a0·"; }
.dd-tete h1 { margin: .55rem 0 .5rem; font: 800 clamp(1.85rem, 1.2rem + 2.1vw, 3rem)/1.04 var(--display); letter-spacing: -.03em; color: var(--encre); text-wrap: balance; max-width: 34ch; }
.dd-sous { margin: 0 0 1.5rem; max-width: 44rem; color: var(--encre-2); text-wrap: pretty; }
.dd-tete { margin-bottom: 1.5rem; }
.dd-tete .dd-sous { margin-bottom: 0; }
/* la planche : mire du banc d'essai et équerres rouges, comme les figures de cours */
.diagram-container { position: relative; width: 100%; overflow-x: auto; overflow-y: hidden; padding: clamp(.6rem, 1.6vw, 1.2rem);
  border: 1px solid var(--filet-2); border-radius: 4px; background-color: var(--panneau);
  background-image: linear-gradient(var(--bleu-voile) 1px, transparent 1px), linear-gradient(90deg, var(--bleu-voile) 1px, transparent 1px);
  background-size: 26px 26px; background-position: -1px -1px; }
.diagram-container::before, .diagram-container::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1.5px solid var(--cable); pointer-events: none; }
.diagram-container::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.diagram-container::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
/* le texte garde sa taille sur téléphone : le dessin défile dans sa planche, jamais la page */
.diagram-container > svg { display: block; width: 100%; height: auto; min-width: 880px; overflow: visible; }
/* aide au défilement : au-dessus de la planche, visible au premier écran d'un téléphone (comme l'aide des figures) */
.dd-aide { display: none; margin: 0 0 .6rem; font-size: .875rem; line-height: 1.45; color: var(--encre-3); }
@media (max-width: 56rem) { .dd-aide { display: block; } }
.dd-pied { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: 1.4rem; padding-top: .8rem; border-top: 2px solid var(--encre); font-size: .875rem; line-height: 1.5; color: var(--encre-3); }
.dd-pied code { font: .8125rem var(--mono); color: var(--encre-2); }
.dd-pied a { color: var(--bleu); text-decoration: none; }
.dd-pied a:hover { color: var(--accent); text-decoration: underline; }

/* ------------------------------------------------------- 3. mode intégré (iframe de la base) */
/* le dessin seul, sur le fond du cadre, 8 px de marge : (largeur − 16) × H ÷ W + 16 */
:root:has(#integre:target, #integre-clair:target, #integre-sombre:target) body { background: var(--panneau); }
:root:has(#integre:target, #integre-clair:target, #integre-sombre:target) .dd-tete,
:root:has(#integre:target, #integre-clair:target, #integre-sombre:target) .dd-pied,
:root:has(#integre:target, #integre-clair:target, #integre-sombre:target) .dd-aide { display: none; }
:root:has(#integre:target, #integre-clair:target, #integre-sombre:target) .dd-page { max-width: none; padding: 0; }
/* la planche garde la mire du banc d'essai et ses équerres, comme les figures de cours (arbitrage de la porte A) */
:root:has(#integre:target, #integre-clair:target, #integre-sombre:target) .diagram-container { padding: 8px; border: 0; border-radius: 0; overflow: hidden; }
:root:has(#integre:target, #integre-clair:target, #integre-sombre:target) .diagram-container > svg { min-width: 0; }

/* ------------------------------------------------------- 4. anatomie des schémas (SVG) */
/* depuis le lot 16 : dans le bloc « vocabulaire graphique » de app/formation.css, commun aux figures de cours,
   au portfolio et à ces rendus (.fig svg → .dd svg à l'assemblage) */

/* ------------------------------------------------------- 5. impression */
@media print {
  :root { color-scheme: light; }
  html, body { background: var(--panneau); }
  .dd-page { max-width: none; padding: 0; }
  .diagram-container { overflow: visible; background-image: none; border: 0; padding: 0; }
  .diagram-container::before, .diagram-container::after { display: none; }
  .diagram-container > svg { min-width: 0; }
}