/* Mini-sites prospects — feuille unique servie par le plugin m1f-mini-sites.
Generee depuis docs/design/mini-sites/ : tokens.css (sans les declarations de
polices locales, les polices sont gerees par WordPress) + global-reference.css
+ mini-site.css. Ne pas editer ici : editer les sources et regenerer. */
/* =========================================================================
Mille & 1 Formations — Design Tokens
Colors, typography, spacing, shadows, radii
========================================================================= */
/* Google Fonts chargé via dans le de chaque page (évite la résolution locale par vite/lightningcss) */
/* DIN Pro — italiques (correspondance graisse romaine) */
/* DIN Pro Cond — italiques */
:root {
/* ---------- Brand colors ---------- */
--navy: #2B4074; /* Primary — titles, headers, signature blocks */
--navy-900: #1A2849;
--navy-800: #223461;
--navy-700: #2B4074;
--navy-600: #3C548D;
--navy-500: #556FA8;
--navy-200: #B8C3DA;
--navy-100: #DDE3EF;
--navy-50: #EEF1F7;
--orange: #F7931E; /* Accent — rosace, separators, CTA */
--orange-700: #D67D0F;
--orange-600: #EE8817;
--orange-500: #F7931E;
--orange-300: #FABB6D;
--orange-100: #FEEACA;
--orange-50: #FFF7EB;
/* ---------- Neutrals (body copy, surfaces) ---------- */
--white: #FFFFFF;
--paper: #FAF8F5; /* Blanc cassé — fond de carte de visite */
--paper-warm: #F5F2EC;
--gray-50: #F5F5F4;
--gray-100: #EAEAE7;
--gray-200: #DBDCDE; /* Gris clair 15% noir — charte */
--gray-300: #B8B6B0;
--gray-400: #939598; /* Gris foncé 50% noir — charte */
--gray-500: #6B6965;
--gray-600: #4D4B48;
--gray-700: #35332F;
--gray-900: #1C1B19;
/* ---------- Semantic: foreground ---------- */
--fg-1: var(--gray-900); /* Primary body */
--fg-2: var(--gray-700); /* Secondary body */
--fg-3: var(--gray-500); /* Tertiary / meta */
--fg-4: var(--gray-400); /* Disabled / hints */
--fg-on-navy: var(--white);
--fg-on-orange:var(--white);
/* ---------- Semantic: surface ---------- */
--bg-page: var(--paper);
--bg-surface: var(--white);
--bg-sunken: var(--paper-warm);
--bg-navy: var(--navy);
--bg-accent: var(--orange);
/* ---------- Semantic: state ---------- */
--success: #2F7D5A;
--warning: #C77A1E;
--danger: #B8452F;
--info: var(--navy-700);
/* ---------- Borders ---------- */
--border-1: var(--gray-200);
--border-2: var(--gray-100);
--border-strong: var(--gray-300);
--border-navy: var(--navy-700);
--border-accent: var(--orange);
/* ---------- Typography ---------- */
--font-display: 'DIN Pro', 'Helvetica Neue', Arial, sans-serif;
--font-display-cond: 'DIN Pro Cond', 'DIN Pro', 'Helvetica Neue', Arial, sans-serif;
--font-body: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
/* Type scale — print-aware; body minimum 15px (~11pt) */
--fs-xs: 12px; /* fine print, captions */
--fs-sm: 14px;
--fs-base: 16px; /* body */
--fs-md: 18px;
--fs-lg: 22px;
--fs-xl: 28px;
--fs-2xl: 36px;
--fs-3xl: 48px;
--fs-4xl: 60px;
--lh-tight: 1.15;
--lh-snug: 1.3;
--lh-normal: 1.5;
--lh-relaxed: 1.65;
--tracking-tight: -0.01em;
--tracking-normal: 0;
--tracking-wide: 0.04em;
--tracking-wider: 0.12em; /* eyebrow labels */
/* ---------- Spacing (4px base) ---------- */
--s-0: 0;
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 20px;
--s-6: 24px;
--s-8: 32px;
--s-10: 40px;
--s-12: 48px;
--s-16: 64px;
--s-20: 80px;
/* ---------- Radii (subtle — institutional feel) ---------- */
--r-none: 0;
--r-xs: 2px;
--r-sm: 4px;
--r-md: 6px;
--r-lg: 10px;
--r-pill: 999px;
/* ---------- Shadows — restrained ---------- */
--shadow-xs: 0 1px 2px rgba(43, 64, 116, 0.06);
--shadow-sm: 0 1px 3px rgba(43, 64, 116, 0.08), 0 1px 2px rgba(43, 64, 116, 0.04);
--shadow-md: 0 4px 12px rgba(43, 64, 116, 0.08), 0 2px 4px rgba(43, 64, 116, 0.04);
--shadow-lg: 0 12px 28px rgba(43, 64, 116, 0.10), 0 4px 8px rgba(43, 64, 116, 0.05);
--shadow-inset: inset 0 0 0 1px var(--border-1);
/* ---------- Motion ---------- */
--dur-fast: 120ms;
--dur-normal: 200ms;
--dur-slow: 320ms;
--ease-std: cubic-bezier(0.2, 0, 0, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
}
/* =========================================================================
Semantic element styles — drop-in defaults
========================================================================= */
html {
font-family: var(--font-body);
font-size: var(--fs-base);
line-height: var(--lh-normal);
color: var(--fg-1);
background: var(--bg-page);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
color: var(--navy);
font-weight: 700;
letter-spacing: -0.02em;
line-height: var(--lh-tight);
margin: 0 0 var(--s-3);
text-wrap: balance;
font-kerning: normal;
}
h1 { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.025em; }
h3 { font-size: var(--fs-xl); letter-spacing: -0.02em; }
h4 { font-size: var(--fs-lg); font-weight: 600; }
h5 { font-size: var(--fs-md); font-weight: 600; }
h6 {
font-size: var(--fs-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: var(--orange-700);
}
p {
margin: 0 0 var(--s-4);
line-height: var(--lh-relaxed);
text-wrap: pretty;
max-width: 68ch;
letter-spacing: 0.01em;
}
small, .meta { font-size: var(--fs-sm); color: var(--fg-3); }
.eyebrow {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: var(--orange-700);
}
code, pre, kbd {
font-family: var(--font-mono);
font-size: 0.92em;
}
code {
background: var(--bg-sunken);
padding: 2px 6px;
border-radius: var(--r-xs);
color: var(--navy-800);
}
a {
color: var(--navy-700);
text-decoration: underline;
text-decoration-color: var(--orange);
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
transition: color var(--dur-fast) var(--ease-std);
}
a:hover { color: var(--orange-700); }
hr {
border: 0;
height: 2px;
background: var(--orange);
margin: var(--s-8) 0;
}
hr.subtle { background: var(--border-1); height: 1px; }
/* ---------- Institutional patterns ---------- */
.cartouche {
/* Navy title band — the canonical title block on official documents */
background: var(--navy);
color: var(--fg-on-navy);
padding: var(--s-5) var(--s-8);
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-lg);
letter-spacing: var(--tracking-tight);
}
.accent-rule {
/* The orange separator — used under section headers */
height: 3px;
width: 56px;
background: var(--orange);
border: 0;
margin: var(--s-2) 0 var(--s-5);
}
/* ---------- Extensions web (mini-sites offres) ---------- */
:root {
/* Hachures animées */
--hachure-pas: 20px;
--hachure-trait: 2px;
--hachure-angle: -55deg;
--hachure-vitesse: 24s;
--hachure-couleur-clair: rgba(247, 147, 30, 0.06);
--hachure-couleur-sombre: rgba(255, 255, 255, 0.04);
/* Rosace menu */
--rosace-hero-size: min(60vmin, 480px);
--rosace-compact-size: 64px;
--rosace-petale-base: var(--navy);
--rosace-petale-actif: var(--orange);
--rosace-petale-lu: var(--navy-500);
/* Layout web */
--content-max: 720px;
--content-gutter: clamp(16px, 4vw, 32px);
--sommaire-gap: 56px;
/* Fluid typography */
--fs-fluid-h1: clamp(2rem, 1.4rem + 3vw, 3.75rem);
--fs-fluid-h2: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
--fs-fluid-h3: clamp(1.25rem, 1rem + 1.25vw, 1.75rem);
--fs-fluid-body: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
}
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
body {
background: var(--bg-page);
color: var(--fg-1);
font-family: var(--font-body);
font-size: var(--fs-fluid-body);
line-height: var(--lh-relaxed);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Hachures animées — base */
.hachures {
background-image: repeating-linear-gradient(
var(--hachure-angle),
transparent 0 calc(var(--hachure-pas) - var(--hachure-trait)),
var(--hachure-couleur-clair) calc(var(--hachure-pas) - var(--hachure-trait)) var(--hachure-pas)
);
background-size: 100% 100%;
animation: hachures-flow var(--hachure-vitesse) linear infinite;
}
.hachures--sombre {
--hachure-couleur-clair: var(--hachure-couleur-sombre);
}
@keyframes hachures-flow {
from { background-position: 0 0; }
to { background-position: calc(var(--hachure-pas) + 8px) 0; }
}
@media (prefers-reduced-motion: reduce) {
.hachures { animation: none; }
}
/* Print */
@media print {
body { background: white; }
/* Cacher les éléments de navigation et UI à l'impression */
.rosace-compacte,
.partie-nav,
.strate-pill,
.orientation__strates,
.offre-header__prospect {
display: none !important;
}
/* Restaurer la pleine largeur du contenu */
.offre-main {
max-width: none !important;
padding: 0 !important;
}
/* Préserver les couleurs et hachures à l'impression */
* {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
/* Grilles contenu MDX (04-partie-iii) */
.referentiel-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-4);
margin: var(--s-6) 0;
}
.usage-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: var(--s-4);
margin: var(--s-6) 0;
}
@media (max-width: 768px) {
.referentiel-grid, .usage-grid { grid-template-columns: 1fr; }
}
/* Focus visible — accessible et cohérent avec le DS */
*:focus-visible {
outline: 2px solid var(--orange);
outline-offset: 2px;
border-radius: var(--r-sm);
}
/* Ne pas afficher l'outline sur les éléments avec leur propre indicateur de focus */
.strate-pill:focus-visible,
.partie-nav__lien:focus-visible,
.sommaire__link:focus-visible {
outline-offset: 4px;
}
/* =========================================================================
Mini-sites prospects — feuille de style des maquettes
Mille & 1 Formations — 31 juillet 2026
Se pose PAR-DESSUS docs/design/mini-sites/tokens.css (non modifié) et
global-reference.css. N'introduit que des extensions, jamais de réécriture
des jetons existants.
Ordre de chargement attendu dans chaque page :
Aucun JavaScript. Aucune ressource externe.
========================================================================= */
/* -------------------------------------------------------------------------
1. EXTENSIONS DE JETONS
------------------------------------------------------------------------- */
:root {
/* --- Substitution typographique (voir parti-pris.md) -------------------
Cible de production : Abel en titrage (déjà chargée par le site vitrine,
licence OFL, dessin condensé proche de DIN Pro Cond) + Poppins auto-
hébergée en texte (OFL). DIN Pro n'est PAS déployée : licence webfont
non vérifiée.
Substituts locaux de secours, dans l'ordre : Bahnschrift (Windows,
dessin dérivé de la DIN 1451), DIN Alternate (macOS), Liberation Sans
Narrow (Linux). Les maquettes ouvertes sur un poste sans Abel ni
Poppins rendent donc en Bahnschrift + Segoe UI : la couleur
typographique est proche, les chasses diffèrent de quelques pour cent. */
--font-display: 'Abel', 'Bahnschrift', 'DIN Alternate', 'DIN Pro',
'Liberation Sans Narrow', 'Franklin Gothic Medium',
'Arial Narrow', Arial, sans-serif;
--font-body: 'Poppins', 'Segoe UI Variable Text', 'Segoe UI',
'Helvetica Neue', system-ui, sans-serif;
/* --- Filiation avec le site vitrine ------------------------------------
Le mini-site vit sur le domaine de la vitrine. On ne décalque pas sa
palette : on en emprunte deux valeurs, à dose homéopathique, pour que
la parenté soit lisible sans que le document devienne une page de site. */
--encre-vitrine: #0e00aa; /* profondeur de la couverture + filet de tête */
--lien-vitrine: #7272ff; /* uniquement les liens qui sortent vers la vitrine */
/* --- Les deux voies ---------------------------------------------------- */
--voie-adm: var(--navy);
--voie-adm-fil: var(--navy-500);
--voie-adm-fond: var(--navy-50);
--voie-ped: var(--orange);
--voie-ped-fil: var(--orange-300);
--voie-ped-fond: var(--orange-50);
/* --- Gabarit ----------------------------------------------------------- */
--colonne: var(--content-max); /* 720px, hérité de tokens.css */
--colonne-large: 1060px; /* réservée à la frise deux voies */
--marge-page: clamp(16px, 5vw, 40px);
--bascule-frise: 860px; /* seuil bureau / mobile de la frise */
}
/* -------------------------------------------------------------------------
2. COQUILLE DE PAGE
------------------------------------------------------------------------- */
body {
margin: 0;
background: var(--bg-page);
overflow-x: hidden;
}
/* Filet de filiation — 4px en tête de chaque page.
Navy (le document) · encre vitrine (la maison) · orange (l'accent).
C'est le seul endroit où les deux identités se touchent franchement. */
.filet-filiation {
height: 4px;
background: linear-gradient(
90deg,
var(--navy) 0 62%,
var(--encre-vitrine) 62% 86%,
var(--orange) 86% 100%
);
}
.site-tete {
display: flex;
flex-wrap: wrap;
gap: var(--s-3) var(--s-6);
align-items: center;
justify-content: space-between;
padding: var(--s-4) var(--marge-page);
border-bottom: 1px solid var(--border-2);
background: var(--bg-surface);
}
.lockup {
display: flex;
align-items: center;
gap: var(--s-3);
text-decoration: none;
color: var(--navy);
}
.lockup:hover { color: var(--navy); }
.lockup__mot { display: flex; flex-direction: column; gap: 1px; }
.lockup__nom {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-md);
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.1;
}
.lockup__baseline {
font-family: var(--font-body);
font-size: 11px;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--fg-3);
line-height: 1.2;
}
.rosace-marque {
width: 34px;
height: 34px;
flex: 0 0 34px;
color: var(--navy);
}
.site-tete__destinataire {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--fg-3);
text-align: right;
}
.page {
padding: 0 var(--marge-page) var(--s-16);
}
.colonne { max-width: var(--colonne); margin-inline: auto; }
.large { max-width: var(--colonne-large); margin-inline: auto; }
/* Rythme des sections : généreux, régulier, identique sur les deux portes
d'entrée — c'est ce qui fait que les deux hubs se lisent comme un seul
document. */
/* `margin-block` et non le raccourci `margin` : une section porte souvent
`bloc` ET `colonne`/`large`, dont le centrage passe par `margin-inline: auto`.
Le raccourci l'écraserait et collerait toute la page à gauche. */
.bloc { margin-block: var(--s-16); }
.bloc:first-of-type { margin-top: var(--s-12); }
@media (max-width: 640px) {
.bloc { margin-block: var(--s-12); }
}
/* -------------------------------------------------------------------------
3. COUVERTURE
------------------------------------------------------------------------- */
.couverture {
position: relative;
overflow: hidden;
margin-top: var(--s-8);
border-radius: var(--r-md);
/* Le navy reste la couleur du document ; l'encre de la vitrine n'apparaît
que comme une profondeur dans un angle. Parenté, pas décalque. */
background:
radial-gradient(90% 120% at 96% 0%,
rgba(14, 0, 170, 0.40) 0%,
rgba(14, 0, 170, 0) 58%),
var(--navy);
color: var(--white);
isolation: isolate;
}
/* Hachures maison, en surimpression, très basse intensité */
.couverture::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: repeating-linear-gradient(
var(--hachure-angle),
transparent 0 calc(var(--hachure-pas) - var(--hachure-trait)),
var(--hachure-couleur-sombre) calc(var(--hachure-pas) - var(--hachure-trait)) var(--hachure-pas)
);
animation: hachures-flow var(--hachure-vitesse) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.couverture::after { animation: none; }
}
.couverture__rosace {
position: absolute;
right: -168px;
top: 50%;
transform: translateY(-50%);
width: 440px;
height: 440px;
color: var(--white);
opacity: 0.07;
pointer-events: none;
}
.couverture__inner {
position: relative;
z-index: 2;
padding: clamp(28px, 6vw, 64px) clamp(20px, 5vw, 56px);
max-width: 40rem;
}
.couverture__eyebrow {
display: block;
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--orange-300);
margin-bottom: var(--s-4);
}
.couverture__titre {
font-family: var(--font-display);
font-weight: 900;
font-size: var(--fs-fluid-h1);
line-height: 0.98;
letter-spacing: -0.02em;
color: var(--white);
margin: 0 0 var(--s-4);
text-wrap: balance;
}
.couverture__sous-titre {
margin: 0;
max-width: 46ch;
color: rgba(255, 255, 255, 0.78);
font-style: italic;
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
}
.couverture__meta {
margin-top: var(--s-6);
padding-top: var(--s-4);
border-top: 1px solid rgba(255, 255, 255, 0.18);
font-size: var(--fs-xs);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 700px) {
.couverture__rosace {
width: 210px; height: 210px;
right: -70px; top: auto; bottom: -66px; transform: none;
opacity: 0.07;
}
.couverture__inner { max-width: none; }
.site-tete__destinataire { text-align: left; }
}
/* Fil de sommaire — non cliquable. Il montre que les deux ouvertures
partagent la même charpente en six temps. */
.fil-sommaire {
/* Grille 3 × 2 plutôt qu'une ligne qui déborde : la charpente en six temps
se lit d'un coup, et elle est identique sur les deux portes d'entrée. */
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s-2) var(--s-4);
margin-top: var(--s-4);
padding: var(--s-3) var(--s-1);
border-bottom: 1px solid var(--border-1);
font-family: var(--font-display);
font-size: 11px;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--fg-4);
}
.fil-sommaire b {
color: var(--orange-700);
font-weight: 700;
margin-right: 4px;
}
.fil-sommaire span.est-ici { color: var(--navy); font-weight: 600; }
.fil-sommaire a {
color: var(--navy);
font-weight: 700;
text-decoration: none;
}
.fil-sommaire a:hover { color: var(--orange-700); }
@media (max-width: 560px) {
.fil-sommaire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Variante « page fille » : le même bloc de couverture, resserré. C'est le
cartouche du système, agrandi — pas un second gabarit. */
.couverture--fille .couverture__inner { padding-block: clamp(24px, 4vw, 40px); }
.couverture--fille .couverture__titre { font-size: var(--fs-fluid-h2); }
.couverture--fille .couverture__rosace { width: 330px; height: 330px; right: -130px; }
/* -------------------------------------------------------------------------
4. TÊTES DE SECTION
------------------------------------------------------------------------- */
.tete-section { margin-bottom: var(--s-6); }
.tete-section .eyebrow {
display: block;
margin-bottom: var(--s-2);
}
.tete-section h2 {
font-family: var(--font-display);
font-size: var(--fs-fluid-h2);
font-weight: 900;
letter-spacing: -0.015em;
color: var(--navy);
margin: 0;
}
.tete-section h3 {
font-family: var(--font-display);
font-size: var(--fs-fluid-h3);
font-weight: 700;
color: var(--navy);
margin: 0;
}
.tete-section .accent-rule { margin: var(--s-3) 0 0; }
.chapo {
font-size: var(--fs-md);
color: var(--fg-2);
line-height: var(--lh-relaxed);
max-width: 62ch;
}
/* -------------------------------------------------------------------------
5. OBJET « AVANT / APRÈS D'ANNONCE » (ouverture porte « annonce »)
------------------------------------------------------------------------- */
.avant-apres {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-5);
margin: var(--s-8) 0;
align-items: stretch;
}
.piece {
display: flex;
flex-direction: column;
border-radius: var(--r-md);
overflow: hidden;
background: var(--bg-surface);
break-inside: avoid;
}
.piece__tete {
display: flex;
flex-wrap: wrap;
gap: 4px var(--s-3);
align-items: baseline;
justify-content: space-between;
padding: var(--s-3) var(--s-4);
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
}
.piece__tete em {
font-family: var(--font-body);
font-style: normal;
font-weight: 400;
letter-spacing: var(--tracking-wide);
opacity: 0.75;
}
.piece__corps {
flex: 1;
padding: var(--s-5);
font-size: var(--fs-sm);
line-height: var(--lh-relaxed);
color: var(--fg-2);
}
.piece__corps p { margin: 0 0 var(--s-3); max-width: none; }
.piece__corps p:last-child { margin-bottom: 0; }
.piece__corps strong { color: var(--fg-1); font-weight: 600; }
.piece__poste {
display: block;
font-family: var(--font-display);
font-size: var(--fs-md);
font-weight: 700;
color: var(--navy);
letter-spacing: -0.01em;
margin-bottom: 2px;
}
.piece__lieu {
display: block;
font-size: var(--fs-xs);
color: var(--fg-3);
margin-bottom: var(--s-4);
}
/* État actuel — volontairement terne, sans être dévalorisant */
.piece--tel-quel {
border: 1px dashed var(--border-strong);
background: var(--paper-warm);
}
.piece--tel-quel .piece__tete {
background: var(--gray-100);
color: var(--fg-3);
}
/* État proposé — la même pièce, marquée */
.piece--marquee {
border: 1px solid var(--navy);
box-shadow: var(--shadow-md);
}
.piece--marquee .piece__tete {
background: var(--navy);
color: var(--white);
}
.piece--marquee .piece__tete em { color: var(--orange-300); opacity: 1; }
/* Les cinq mots */
mark.cinq-mots {
background: var(--orange-100);
color: var(--navy-900);
font-weight: 600;
padding: 1px 3px;
box-shadow: inset 0 -2px 0 var(--orange);
border-radius: 1px;
}
.avant-apres__note {
grid-column: 1 / -1;
margin: 0;
font-size: var(--fs-xs);
color: var(--fg-3);
border-left: 3px solid var(--orange);
padding-left: var(--s-3);
max-width: none;
}
@media (max-width: 780px) {
.avant-apres { grid-template-columns: 1fr; gap: var(--s-4); }
}
/* -------------------------------------------------------------------------
6. OBJET « FAIT PUBLIC » (ouverture porte « situation »)
Même grammaire de boîte que l'avant/après : c'est ce qui fait tenir la
parenté entre les deux ouvertures.
------------------------------------------------------------------------- */
.fait {
margin: var(--s-8) 0;
border: 1px dashed var(--border-strong);
border-left: 3px solid var(--navy);
background: var(--paper-warm);
border-radius: var(--r-md);
padding: var(--s-5) var(--s-6);
break-inside: avoid;
}
.fait__label {
display: block;
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--fg-3);
margin-bottom: var(--s-3);
}
.fait__citation {
margin: 0;
font-size: var(--fs-lg);
font-family: var(--font-display);
font-weight: 400;
line-height: var(--lh-snug);
color: var(--navy);
max-width: 44ch;
}
.fait__source {
display: block;
margin-top: var(--s-3);
font-size: var(--fs-xs);
color: var(--fg-3);
letter-spacing: var(--tracking-wide);
}
/* -------------------------------------------------------------------------
7. CARTES DE NAVIGATION — LES DEUX PORTES
------------------------------------------------------------------------- */
.portes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-5);
margin: var(--s-6) 0;
}
.porte {
display: flex;
flex-direction: column;
gap: var(--s-3);
padding: var(--s-6);
background: var(--bg-surface);
border: 1px solid var(--border-1);
border-top: 3px solid var(--navy);
border-radius: var(--r-md);
text-decoration: none;
color: inherit;
transition:
border-color var(--dur-normal) var(--ease-std),
box-shadow var(--dur-normal) var(--ease-std),
transform var(--dur-normal) var(--ease-std);
break-inside: avoid;
}
.porte:hover,
.porte:focus-visible {
border-top-color: var(--orange);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
color: inherit;
}
@media (prefers-reduced-motion: reduce) {
.porte { transition: none; }
.porte:hover { transform: none; }
}
.porte__rang {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--orange-700);
}
.porte__titre {
font-family: var(--font-display);
font-size: var(--fs-xl);
font-weight: 900;
letter-spacing: -0.015em;
color: var(--navy);
margin: 0;
line-height: var(--lh-tight);
}
.porte__texte {
margin: 0;
flex: 1;
font-size: var(--fs-sm);
line-height: var(--lh-relaxed);
color: var(--fg-2);
max-width: none;
}
.porte__action {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-sm);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--navy);
border-top: 1px solid var(--border-2);
padding-top: var(--s-3);
}
.porte__action::after {
content: ' \2192';
color: var(--orange);
transition: margin-left var(--dur-normal) var(--ease-std);
display: inline-block;
}
.porte:hover .porte__action::after { margin-left: 6px; }
@media (max-width: 780px) {
.portes { grid-template-columns: 1fr; gap: var(--s-4); }
}
/* -------------------------------------------------------------------------
8. ENCART DE PROPOSITION (le troc explicite)
------------------------------------------------------------------------- */
.proposition {
position: relative;
overflow: hidden;
border-radius: var(--r-md);
background: var(--navy);
color: var(--white);
break-inside: avoid;
}
.proposition::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: repeating-linear-gradient(
var(--hachure-angle),
transparent 0 calc(var(--hachure-pas) - var(--hachure-trait)),
var(--hachure-couleur-sombre) calc(var(--hachure-pas) - var(--hachure-trait)) var(--hachure-pas)
);
animation: hachures-flow var(--hachure-vitesse) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.proposition::before { animation: none; }
}
.proposition__part {
position: relative;
z-index: 2;
padding: var(--s-8) clamp(20px, 4vw, 48px);
}
.proposition__part + .proposition__part {
border-top: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(0, 0, 0, 0.14);
}
.proposition__label {
display: block;
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--orange-300);
margin-bottom: var(--s-3);
}
.proposition__titre {
font-family: var(--font-display);
font-size: var(--fs-xl);
font-weight: 900;
letter-spacing: -0.015em;
color: var(--white);
margin: 0 0 var(--s-4);
line-height: var(--lh-tight);
max-width: 22ch;
}
.proposition p {
margin: 0 0 var(--s-3);
color: rgba(255, 255, 255, 0.86);
max-width: 62ch;
}
.proposition p:last-child { margin-bottom: 0; }
.proposition__conditions {
list-style: none;
margin: var(--s-5) 0 0;
padding: 0;
display: grid;
gap: var(--s-2);
}
.proposition__conditions li {
border-left: 3px solid var(--orange);
padding: 2px var(--s-4);
font-size: var(--fs-sm);
color: rgba(255, 255, 255, 0.9);
}
/* -------------------------------------------------------------------------
9. ENCART D'ACTIONS (verbes à l'infinitif) — transposition de QuickWinBox
------------------------------------------------------------------------- */
.actions {
background: var(--navy);
color: var(--white);
border-radius: var(--r-md);
padding: var(--s-6) clamp(20px, 4vw, 40px);
margin: var(--s-8) 0;
break-inside: avoid;
}
.actions__label {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-xs);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--orange-300);
margin-bottom: var(--s-4);
}
.actions ul { list-style: none; padding: 0; margin: 0; }
.actions li {
border-left: 3px solid var(--orange);
padding: var(--s-2) var(--s-4);
margin-bottom: var(--s-3);
font-style: italic;
line-height: var(--lh-relaxed);
color: rgba(255, 255, 255, 0.92);
}
.actions li:last-child { margin-bottom: 0; }
/* -------------------------------------------------------------------------
10. CITATION — transposition à l'identique
------------------------------------------------------------------------- */
.citation {
border-left: 3px solid var(--orange);
padding: var(--s-3) var(--s-6);
margin: var(--s-10) 0;
font-style: italic;
color: var(--navy);
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
max-width: 60ch;
break-inside: avoid;
}
.citation p { margin: 0 0 var(--s-3); max-width: none; }
.citation cite {
display: block;
font-style: normal;
font-size: var(--fs-xs);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--fg-3);
}
/* -------------------------------------------------------------------------
11. CARTE DE SCÈNE — transposition à l'identique
------------------------------------------------------------------------- */
.scene {
background: var(--bg-surface);
border: 1px solid var(--border-2);
border-radius: var(--r-md);
margin: var(--s-6) 0;
overflow: hidden;
break-inside: avoid;
}
/* Réservé au mini-site produit en réaction à une actualité, où la scène 1 EST
l'actualité. Inutilisé dans le cas courant : avec trois scènes, la hiérarchie
soulève plus de questions qu'elle n'en résout (voir faisabilite-divi.md). */
.scene--pivot { border-color: var(--orange); box-shadow: var(--shadow-md); }
.scene__tete {
display: grid;
grid-template-columns: 40px 1fr;
gap: var(--s-3);
align-items: center;
padding: var(--s-4);
background-color: var(--paper-warm);
background-image: repeating-linear-gradient(
var(--hachure-angle),
transparent 0 calc(var(--hachure-pas) - var(--hachure-trait)),
var(--hachure-couleur-clair) calc(var(--hachure-pas) - var(--hachure-trait)) var(--hachure-pas)
);
}
.scene__numero {
font-family: var(--font-display);
font-weight: 900;
font-size: var(--fs-lg);
color: var(--white);
background: var(--orange);
border-radius: var(--r-pill);
width: 36px; height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.scene__titre {
font-family: var(--font-display);
font-size: var(--fs-md);
font-weight: 700;
margin: 0;
color: var(--navy);
}
.scene__sous-titre {
font-size: var(--fs-xs);
color: var(--fg-3);
margin: 2px 0 0;
}
.scene__corps { padding: var(--s-5); }
.scene__corps p { margin: 0 0 var(--s-3); max-width: none; }
.scene__corps p:last-child { margin-bottom: 0; }
.scene__cqc {
background: var(--paper-warm);
padding: var(--s-4) var(--s-5);
border-top: 1px solid var(--border-2);
}
.scene__cqc-label {
display: block;
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: var(--orange-700);
margin-bottom: var(--s-2);
}
.scene__cqc p {
margin: 0;
font-size: var(--fs-sm);
line-height: var(--lh-snug);
color: var(--gray-700);
max-width: none;
}
/* =========================================================================
12. PIÈCE MAÎTRESSE — LA FRISE À DEUX VOIES
-------------------------------------------------------------------------
Bureau : deux colonnes parallèles séparées par un rail à deux fils, une
bande de temps pleine largeur au-dessus de chaque moment, et des
bandes de jonction pleine largeur là où les deux voies se
rejoignent.
Mobile : les colonnes s'empilent DANS le même moment daté. La simultanéité
n'est plus portée par le parallélisme géométrique mais par la
co-présence sous une même date, et les deux fils continuent de
courir le long du bord gauche de l'objet entier.
========================================================================= */
.frise {
position: relative;
margin: var(--s-10) 0;
border-top: 1px solid var(--border-1);
border-bottom: 1px solid var(--border-1);
}
/* --- Étiquettes de voie ------------------------------------------------- */
.voie-tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
padding: 3px 9px;
border-radius: var(--r-xs);
}
.voie-tag::before {
content: '';
width: 8px; height: 8px;
border-radius: 50%;
background: currentColor;
flex: 0 0 8px;
}
.voie-tag--adm { color: var(--navy); background: var(--navy-100); }
.voie-tag--ped { color: var(--orange-700); background: var(--orange-100); }
/* --- Entête de la frise -------------------------------------------------- */
.frise__entete {
display: grid;
grid-template-columns: 1fr 88px 1fr;
background: var(--bg-surface);
border-bottom: 1px solid var(--border-1);
}
.frise__entete-voie { padding: var(--s-5) var(--s-5) var(--s-4); }
.frise__entete-voie p {
margin: var(--s-2) 0 0;
font-size: var(--fs-sm);
color: var(--fg-3);
line-height: var(--lh-snug);
max-width: none;
}
.frise__entete-voie--adm { text-align: right; }
.frise__entete-voie--adm p { margin-left: auto; }
/* --- Un moment ----------------------------------------------------------- */
.moment {
display: grid;
grid-template-columns: 1fr 88px 1fr;
break-inside: avoid;
}
/* La bande de temps traverse les deux voies : c'est le « en même temps » */
.moment__temps {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--s-2) var(--s-3);
padding: var(--s-3) var(--s-5);
background: var(--paper-warm);
border-top: 1px solid var(--border-1);
border-bottom: 1px solid var(--border-2);
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--navy);
}
.moment__temps span {
font-family: var(--font-body);
font-weight: 400;
letter-spacing: var(--tracking-wide);
text-transform: none;
color: var(--fg-3);
font-size: var(--fs-xs);
}
/* Le rail : deux fils continus dans la hauteur du moment, avec un point par
voie. C'est le seul endroit où l'objet « dessine » quelque chose. */
.rail {
display: flex;
justify-content: space-between;
padding: 0 20px;
background: var(--bg-surface);
}
.voie-fil {
position: relative;
width: 3px;
flex: 0 0 3px;
}
.voie-fil::before {
content: '';
position: absolute;
top: 26px;
left: 50%;
transform: translateX(-50%);
width: 11px; height: 11px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 3px var(--bg-surface);
}
.voie-fil--adm { background: var(--voie-adm-fil); color: var(--voie-adm); }
.voie-fil--ped { background: var(--voie-ped-fil); color: var(--voie-ped); }
.moment__voie {
padding: var(--s-5);
font-size: var(--fs-sm);
line-height: var(--lh-relaxed);
}
.moment__voie p { margin: 0; max-width: none; color: var(--fg-2); }
.moment__voie p + p { margin-top: var(--s-3); }
.moment__voie h4 {
font-family: var(--font-display);
font-size: var(--fs-md);
font-weight: 700;
color: var(--navy);
margin: 0 0 var(--s-2);
line-height: var(--lh-snug);
}
.moment__voie--adm { background: var(--voie-adm-fond); }
.moment__voie--ped { background: var(--voie-ped-fond); }
.moment__voie--ped h4 { color: var(--orange-700); }
/* Étiquettes de voie : inutiles en bureau (la colonne le dit), obligatoires
en mobile (les colonnes ont disparu). */
.moment .voie-tag { display: none; margin-bottom: var(--s-3); }
/* Une voie peut être en attente à un moment donné — le dire explicitement
vaut mieux qu'une case vide. */
.moment__voie--calme p { color: var(--fg-4); font-style: italic; }
/* --- Un point de jonction ------------------------------------------------ */
.jonction {
position: relative;
padding: var(--s-6) clamp(20px, 4vw, 40px) var(--s-6);
background: var(--navy);
color: var(--white);
overflow: hidden;
break-inside: avoid;
}
/* La barre de tête : navy à gauche, orange à droite, les deux se touchant
pile au milieu — c'est la convergence, dessinée par une seule règle CSS. */
.jonction::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--navy-500) 0 50%, var(--voie-ped) 50% 100%);
}
/* Le nœud, posé sur la couture */
.jonction::after {
content: '';
position: absolute;
top: -5px;
left: 50%;
width: 14px; height: 14px;
background: var(--orange);
border: 2px solid var(--navy);
transform: translateX(-50%) rotate(45deg);
}
.jonction__label {
display: block;
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--orange-300);
margin-bottom: var(--s-2);
}
.jonction__titre {
font-family: var(--font-display);
font-size: var(--fs-lg);
font-weight: 700;
color: var(--white);
margin: 0 0 var(--s-2);
line-height: var(--lh-snug);
max-width: 34ch;
}
.jonction p {
margin: 0;
color: rgba(255, 255, 255, 0.82);
font-size: var(--fs-sm);
line-height: var(--lh-relaxed);
max-width: 70ch;
}
/* --- Légende ------------------------------------------------------------- */
.frise__legende {
display: flex;
flex-wrap: wrap;
gap: var(--s-3) var(--s-5);
align-items: center;
padding: var(--s-4) var(--s-5);
background: var(--bg-surface);
border-top: 1px solid var(--border-1);
font-size: var(--fs-xs);
color: var(--fg-3);
}
.frise__legende .noeud {
display: inline-flex;
align-items: center;
gap: 8px;
}
.frise__legende .noeud::before {
content: '';
width: 11px; height: 11px;
background: var(--orange);
transform: rotate(45deg);
flex: 0 0 11px;
}
/* --- Bascule mobile ------------------------------------------------------ */
@media (max-width: 860px) {
/* Les deux fils quittent le centre et prennent le bord gauche : ils courent
désormais le long de l'objet entier, sans interruption. */
.frise {
padding-left: 24px;
}
.frise::before,
.frise::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 3px;
}
.frise::before { left: 0; background: var(--voie-adm-fil); }
.frise::after { left: 8px; background: var(--voie-ped-fil); }
.frise__entete,
.moment { grid-template-columns: 1fr; }
.frise__entete-voie { padding: var(--s-4) var(--s-5); }
.frise__entete-voie--adm { text-align: left; border-bottom: 1px solid var(--border-2); }
.frise__entete-voie--adm p { margin-left: 0; }
.rail { display: none; }
/* Les deux voies s'empilent, mais dans le même moment daté : la
simultanéité passe de la géométrie à la co-présence. */
.moment .voie-tag { display: inline-flex; }
.moment__voie { padding: var(--s-4) var(--s-5); }
.moment__voie--adm { border-left: 0; }
.moment__voie--ped { border-top: 1px solid var(--white); }
.jonction { padding-left: var(--s-5); padding-right: var(--s-5); }
/* Le nœud se recale sur les fils du bord gauche */
.jonction::after { left: 8px; transform: rotate(45deg); }
.jonction::before {
background: linear-gradient(90deg, var(--navy-500) 0 16px, var(--voie-ped) 16px 100%);
}
}
@media (max-width: 420px) {
.frise { padding-left: 16px; }
.frise::after { left: 6px; }
.moment__voie, .frise__entete-voie { padding-left: var(--s-4); padding-right: var(--s-4); }
.moment__temps { padding-left: var(--s-4); padding-right: var(--s-4); }
}
/* =========================================================================
13. PISTE B — LE PEIGNE SYNOPTIQUE
Variante compacte. Ne porte que des étiquettes, jamais des phrases.
Réservée à une annexe d'une page ou à un rappel en tête de section.
========================================================================= */
.peigne-cadre { overflow-x: auto; margin: var(--s-8) 0; }
.peigne {
min-width: 660px;
display: grid;
grid-template-columns: 118px repeat(6, 1fr);
border: 1px solid var(--border-1);
border-radius: var(--r-md);
overflow: hidden;
background: var(--bg-surface);
}
.peigne__cellule {
padding: var(--s-3);
border-left: 1px solid var(--border-2);
font-size: var(--fs-xs);
line-height: var(--lh-snug);
min-height: 62px;
display: flex;
align-items: center;
}
.peigne__entete {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--fg-3);
background: var(--paper-warm);
min-height: 0;
padding: var(--s-2) var(--s-3);
border-bottom: 1px solid var(--border-1);
}
.peigne__gouttiere {
border-left: 0;
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-xs);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
background: var(--paper-warm);
}
.peigne__cellule--adm { background: var(--voie-adm-fond); color: var(--navy-800); }
.peigne__cellule--ped { background: var(--voie-ped-fond); color: var(--gray-700); }
/* Colonne où les deux voies se rejoignent : un filet orange la traverse de
haut en bas. C'est l'équivalent compact du nœud de la frise. */
.peigne__cellule--colonne { box-shadow: inset 3px 0 0 var(--orange); }
.peigne__cellule--jonction {
align-items: flex-start;
min-height: 0;
padding-top: var(--s-2);
padding-bottom: var(--s-3);
border-top: 1px solid var(--border-2);
font-family: var(--font-display);
font-weight: 700;
font-size: 11px;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--orange-700);
background: var(--bg-surface);
}
.peigne__cellule--vide {
min-height: 0;
padding-top: var(--s-2);
padding-bottom: var(--s-3);
border-top: 1px solid var(--border-2);
background: var(--bg-surface);
}
.peigne__note {
font-size: var(--fs-xs);
color: var(--fg-3);
margin-top: var(--s-2);
}
/* =========================================================================
14. PIED DE PAGE, RAPPEL, RETOUR AU HUB
========================================================================= */
.rappel {
border: 1px solid var(--border-1);
border-left: 3px solid var(--orange);
background: var(--bg-surface);
border-radius: var(--r-md);
padding: var(--s-6);
margin: var(--s-10) 0 var(--s-8);
break-inside: avoid;
}
.rappel__label {
display: block;
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--orange-700);
margin-bottom: var(--s-2);
}
.rappel p { margin: 0 0 var(--s-3); }
.rappel p:last-child { margin-bottom: 0; }
.retour {
display: flex;
flex-wrap: wrap;
gap: var(--s-4);
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--border-1);
padding-top: var(--s-5);
margin-top: var(--s-10);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-weight: 700;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.retour a { text-decoration: none; color: var(--navy); }
.retour a:hover { color: var(--orange-700); }
.signature {
margin-top: var(--s-8);
padding-top: var(--s-5);
border-top: 2px solid var(--navy);
font-size: var(--fs-sm);
color: var(--fg-2);
}
.signature strong {
display: block;
font-family: var(--font-display);
font-size: var(--fs-md);
color: var(--navy);
letter-spacing: -0.01em;
}
.site-pied {
border-top: 1px solid var(--border-1);
padding: var(--s-6) var(--marge-page);
background: var(--bg-surface);
display: flex;
flex-wrap: wrap;
gap: var(--s-3) var(--s-8);
justify-content: space-between;
font-size: var(--fs-xs);
color: var(--fg-3);
}
.site-pied__mentions { letter-spacing: var(--tracking-wide); }
.site-pied a.lien-vitrine {
color: var(--lien-vitrine);
text-decoration-color: var(--lien-vitrine);
}
.site-pied a.lien-vitrine:hover { color: var(--encre-vitrine); }
/* Les liens qui sortent vers le site vitrine portent sa couleur : c'est le
seul usage du bleu-violet dans le corps du document. */
a.lien-vitrine {
color: var(--lien-vitrine);
text-decoration-color: var(--lien-vitrine);
}
a.lien-vitrine:hover { color: var(--encre-vitrine); }
/* =========================================================================
15. PLANCHE DE DÉMONSTRATION (deux-voies.html uniquement)
========================================================================= */
.planche { padding: 0 var(--marge-page) var(--s-16); }
.planche__intro { max-width: 68ch; }
.piste {
margin: var(--s-16) 0;
padding-top: var(--s-6);
border-top: 2px solid var(--navy);
}
.piste__rang {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--orange-700);
}
.piste__verdict {
display: inline-block;
margin-left: var(--s-3);
padding: 2px 8px;
border-radius: var(--r-xs);
font-size: var(--fs-xs);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
font-weight: 700;
}
.piste__verdict--retenue { background: var(--navy); color: var(--white); }
.piste__verdict--variante { background: var(--gray-100); color: var(--fg-3); }
.piste__verdict--ecartee {
background: transparent;
color: var(--fg-4);
border: 1px dashed var(--border-strong);
}
/* Cadre de simulation mobile : montre le rendu étroit sans redimensionner la
fenêtre. `container-type` est bien supporté ; à défaut, le cadre reste
simplement un bloc étroit et la frise garde sa version bureau. */
.simu-mobile {
width: 375px;
max-width: 100%;
border: 1px solid var(--border-strong);
border-radius: var(--r-lg);
padding: var(--s-3);
background: var(--bg-page);
box-shadow: var(--shadow-md);
}
.simu-mobile__legende {
font-size: var(--fs-xs);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--fg-3);
margin-bottom: var(--s-2);
}
/* Forçage de la vue étroite, hors requête média — UNIQUEMENT pour montrer le
rendu mobile à côté du rendu bureau sur la planche. Ce bloc ne part pas en
production : sur le site, c'est la requête média du §12 qui opère. */
.frise--etroite { padding-left: 24px; }
.frise--etroite::before,
.frise--etroite::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 3px;
}
.frise--etroite::before { left: 0; background: var(--voie-adm-fil); }
.frise--etroite::after { left: 8px; background: var(--voie-ped-fil); }
.frise--etroite .frise__entete,
.frise--etroite .moment { grid-template-columns: 1fr; }
.frise--etroite .frise__entete-voie { padding: var(--s-4) var(--s-5); }
.frise--etroite .frise__entete-voie--adm {
text-align: left;
border-bottom: 1px solid var(--border-2);
}
.frise--etroite .frise__entete-voie--adm p { margin-left: 0; }
.frise--etroite .rail { display: none; }
.frise--etroite .moment .voie-tag { display: inline-flex; }
.frise--etroite .moment__voie { padding: var(--s-4) var(--s-5); }
.frise--etroite .moment__voie--ped { border-top: 1px solid var(--white); }
.frise--etroite .jonction { padding-left: var(--s-5); padding-right: var(--s-5); }
.frise--etroite .jonction::after { left: 8px; transform: rotate(45deg); }
.frise--etroite .jonction::before {
background: linear-gradient(90deg, var(--navy-500) 0 16px, var(--voie-ped) 16px 100%);
}
.deux-vues {
display: grid;
gap: var(--s-8);
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
margin: var(--s-8) 0;
}
@media (max-width: 1100px) {
/* minmax(0, 1fr) et non 1fr : sans cela, la largeur fixe de 375 px du cadre
de simulation impose son minimum à la piste et fait déborder la page. */
.deux-vues { grid-template-columns: minmax(0, 1fr); }
}
.note-design {
border-left: 3px solid var(--navy);
background: var(--paper-warm);
padding: var(--s-4) var(--s-5);
margin: var(--s-6) 0;
font-size: var(--fs-sm);
color: var(--fg-2);
}
.note-design p { max-width: 74ch; }
.note-design p:last-child { margin-bottom: 0; }
.note-design strong { color: var(--navy); }
/* =========================================================================
16. IMPRESSION
Le lecteur imprime ou exporte en PDF pour faire circuler en comité.
La frise reprend sa géométrie à deux voies : une A4 portrait offre 180 mm,
soit deux colonnes de 80 mm — c'est suffisant, et la bascule mobile n'a
plus lieu d'être.
========================================================================= */
@media print {
@page { margin: 14mm 12mm; }
html, body { background: var(--white); font-size: 10.5pt; }
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.site-tete,
.fil-sommaire,
.retour,
.porte__action { display: none !important; }
.page, .planche { padding: 0; }
.colonne, .large { max-width: none; }
.couverture { break-after: avoid; margin-top: 0; }
.couverture::after,
.proposition::before { animation: none; }
.bloc { margin: 10mm 0; break-inside: avoid-page; }
h2, h3 { break-after: avoid; }
/* La frise retrouve ses deux voies, quelle que soit la largeur écran */
.frise { padding-left: 0; }
.frise::before, .frise::after { display: none; }
.frise__entete,
.moment { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); }
.rail { display: flex; padding: 0 14px; }
.moment .voie-tag { display: none; }
.frise__entete-voie--adm { text-align: right; border-bottom: 0; }
.jonction::after { left: 50%; transform: translateX(-50%) rotate(45deg); }
.jonction::before {
background: linear-gradient(90deg, var(--navy-500) 0 50%, var(--voie-ped) 50% 100%);
}
.moment, .jonction, .scene, .porte, .proposition, .actions, .citation {
break-inside: avoid;
}
/* Le peigne ne s'imprime pas : il ferait doublon avec la frise */
.peigne-cadre, .simu-mobile { display: none; }
/* La seule action attendue tient dans une ligne : on l'imprime */
.signature::after {
content: 'Réponse par retour de mail — contact@1000et1formations.pro';
display: block;
margin-top: 6pt;
font-size: 9pt;
color: var(--fg-3);
}
}
/* Signature de marque — patron rythmique, une seule fois par mini-site,
en clôture. Verbes en orange, charnière en navy, le reste en texte courant. */
.signature-marque {
margin: var(--s-10) 0 0;
padding-top: var(--s-6);
border-top: 1px solid var(--border-1);
font-family: var(--font-display);
font-size: var(--fs-md);
line-height: var(--lh-snug);
color: var(--navy);
max-width: 60ch;
}
.signature-marque b {
color: var(--orange-700);
font-weight: 700;
letter-spacing: var(--tracking-wide);
}
.signature-marque b + b { color: var(--navy); }
@media print { .signature-marque { break-inside: avoid; } }
/* ---------------------------------------------------------------------------
Rosaces — passees du contenu a la feuille de style (01/08/2026).
WordPress retire les SVG en ligne du contenu des pages (filtrage kses, et le
compte de service n'a deliberement pas la capacite de le contourner). Le
decor n'a de toute facon pas sa place dans le contenu : il vit ici, en
data-URI, hors de portee du filtrage et sans requete reseau supplementaire.
--------------------------------------------------------------------------- */
.rosace-marque {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%232B4074%22%20stroke-width%3D%227%22%20opacity%3D%220.3%22%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22200%22%20r%3D%22118%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22200%22%20r%3D%22166%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%232B4074%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%229%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate%28115.91%2C285.47%29%20scale%280.9303%2C-0.9303%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2011.303%2C-11.299%2029.627%2C-11.304%2040.926%2C-0.003%20L%20111.819%2C70.881%2070.893%2C111.806%200.004%2C40.924%20C%20-11.298%2C29.626%20-11.3%2C11.301%200%2C0%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28285.76%2C115.47%29%20scale%280.9303%2C-0.9303%29%22%3E%3Cpath%20d%3D%22m%200%2C0%20c%2011.301%2C-11.303%2011.301%2C-29.627%200%2C-40.923%20l%20-70.884%2C-70.894%20-40.925%2C40.926%2070.884%2C70.889%20C%20-29.629%2C11.299%20-11.307%2C11.301%200%2C0%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28285.75%2C285.49%29%20scale%280.9303%2C-0.9303%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2011.301%2C11.306%2011.306%2C29.626%200%2C40.927%20L%20-70.879%2C111.816%20-111.804%2C70.891%20-40.925%2C0.002%20C%20-29.624%2C-11.299%20-11.302%2C-11.299%200%2C0%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28115.91%2C115.51%29%20scale%280.9303%2C-0.9303%29%22%3E%3Cpath%20d%3D%22m%200%2C0%20c%2011.306%2C11.3%2029.623%2C11.307%2040.916%2C0.011%20l%2070.857%2C-70.848%20-40.924%2C-40.927%20-70.855%2C70.849%20C%20-11.304%2C-29.618%20-11.299%2C-11.302%200%2C0%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22200%22%20r%3D%2218%22%20fill%3D%22%23F7931E%22%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.couverture__rosace {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.5%22%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22200%22%20r%3D%22100%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22200%22%20r%3D%22120%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22200%22%20r%3D%22140%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22200%22%20r%3D%22160%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23FFFFFF%22%3E%3Cg%20transform%3D%22translate%28115.91%2C285.47%29%20scale%280.9303%2C-0.9303%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2011.303%2C-11.299%2029.627%2C-11.304%2040.926%2C-0.003%20L%20111.819%2C70.881%2070.893%2C111.806%200.004%2C40.924%20C%20-11.298%2C29.626%20-11.3%2C11.301%200%2C0%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28285.76%2C115.47%29%20scale%280.9303%2C-0.9303%29%22%3E%3Cpath%20d%3D%22m%200%2C0%20c%2011.301%2C-11.303%2011.301%2C-29.627%200%2C-40.923%20l%20-70.884%2C-70.894%20-40.925%2C40.926%2070.884%2C70.889%20C%20-29.629%2C11.299%20-11.307%2C11.301%200%2C0%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28285.75%2C285.49%29%20scale%280.9303%2C-0.9303%29%22%3E%3Cpath%20d%3D%22M%200%2C0%20C%2011.301%2C11.306%2011.306%2C29.626%200%2C40.927%20L%20-70.879%2C111.816%20-111.804%2C70.891%20-40.925%2C0.002%20C%20-29.624%2C-11.299%20-11.302%2C-11.299%200%2C0%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28115.91%2C115.51%29%20scale%280.9303%2C-0.9303%29%22%3E%3Cpath%20d%3D%22m%200%2C0%20c%2011.306%2C11.3%2029.623%2C11.307%2040.916%2C0.011%20l%2070.857%2C-70.848%20-40.924%2C-40.927%20-70.855%2C70.849%20C%20-11.304%2C-29.618%20-11.299%2C-11.302%200%2C0%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}