/* ==========================================================================
   SATI — Ressources IA locale

   Règles tenues dans toute la feuille :
   1. Une seule police de titrage (Zilla Slab), réservée aux GRANDS titres.
      Tout le reste est en Inter — un texte se lit, il ne se décore pas.
   2. Le dégradé du logo ne sert jamais à colorer du texte à lire :
      seulement des filets et des pastilles.
   3. Pas de boîte dans une boîte. Une carte contient du texte, pas d'autres
      encadrés.
   4. Pas d'effet au survol qui déplace le contenu.
   Couleurs échantillonnées dans le logo : braise #a81818, rouge-orangé
   #d84818, orange #f06018, ambre #f0a848, crème #f0d8c0.
   ========================================================================== */

:root {
    --ink: #1f1512;
    --ink-deep: #2a1008;
    --ink-deeper: #1a0904;
    --text: #1f1512;
    --text-light: #5e4d45;
    --text-muted: #8d786c;
    --white: #ffffff;
    --gray-50: #fdfaf8;
    --gray-100: #f6f0eb;
    --gray-200: #e8dbd1;
    --gray-300: #d6c2b3;
    --gray-900: #2a1008;

    --primary: #b8331a;
    --primary-dark: #97270f;
    --ember: #a81818;
    --flame: #d84818;
    --orange: #f06018;
    --amber: #f0a848;
    --cream: #f0d8c0;
    --accent: #f06018;

    --fx-gradient: linear-gradient(90deg, #a81818 0%, #e8571f 45%, #f0a848 100%);

    --success: #3f7d20;
    --warning: #9a5209;
    --error: #a81818;

    --shadow-sm: 0 1px 2px rgba(42, 16, 8, 0.05);
    --shadow: 0 1px 3px rgba(42, 16, 8, 0.07);
    --shadow-lg: 0 8px 24px rgba(42, 16, 8, 0.1);

    --radius: 10px;
    --radius-lg: 16px;
    --pill: 980px;
    --transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;

    --display: 'Zilla Slab', Georgia, serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

    --header-h: 60px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

[hidden] { display: none !important; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 20px);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    color: var(--text);
    background: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; }
::selection { background: rgba(240, 96, 24, 0.2); }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

/* ==========================================================================
   En-tête
   ========================================================================== */

.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--gray-200);
}

.header.scrolled { border-bottom-color: var(--gray-300); }

.nav-container {
    max-width: 1100px;
    margin: 0 auto;
    height: var(--header-h);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.75rem;
    gap: 1.25rem;
}

.logo {
    font-family: var(--display);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
    line-height: 1.1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding-bottom: 4px;
}

.logo::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 3px;
    border-radius: 2px;
    background: var(--fx-gradient);
}

.logo small {
    display: block;
    font-family: var(--sans);
    font-size: 0.57rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 1px;
}









/* ==========================================================================
   Titres de page
   ========================================================================== */

.hero {
    padding: 4.5rem 0 3rem;
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
}

.hero-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.75rem;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3rem;
    align-items: center;
}

.hero-container > * { min-width: 0; }

.hero-content h1 {
    font-family: var(--display);
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.018em;
    color: var(--ink);
    margin-bottom: 1.25rem;
}

.hero-content h1 em { font-style: normal; color: var(--primary); }

.hero-content .subtitle {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.9rem;
}

.hero-content .description {
    font-size: 1.12rem;
    line-height: 1.65;
    color: var(--text-light);
    max-width: 60ch;
    margin-bottom: 2rem;
}

.hero-content .description,
.hero-content .subtitle,
.hero-cta { max-width: none; }

.hero-cta { display: flex; gap: 0.7rem; flex-wrap: wrap; }

.hero-visual { display: flex; justify-content: center; }
.hero-visual img { width: 100%; max-width: 300px; height: auto; }
.hero-3d-card { display: contents; }
.floating-elements { display: none; }

.page-hero {
    padding: 3.5rem 0 2.5rem;
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
}

.page-hero h1 {
    font-family: var(--display);
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.018em;
    color: var(--ink);
    margin-bottom: 0.9rem;
    max-width: 24ch;
}

.page-hero p.lead {
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--text-light);
    max-width: 66ch;
}

.eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.7rem;
}

/* ==========================================================================
   Boutons et liens
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.7rem 1.4rem;
    border: 1px solid transparent;
    border-radius: var(--pill);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
}

.btn-primary { background: var(--primary); color: var(--white); }
.btn-primary:hover { background: var(--primary-dark); }

.btn-secondary { background: var(--white); color: var(--primary); border-color: var(--gray-300); }
.btn-secondary:hover { border-color: var(--primary); background: var(--gray-50); }

.btn-gradient { background: var(--primary); color: var(--white); }
.btn-gradient:hover { background: var(--primary-dark); }

.btn-sm { padding: 0.5rem 1rem; font-size: 0.87rem; }

.card-link, .link-chevron {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--primary);
    font-size: 0.93rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.card-link:hover, .link-chevron:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Sections
   ========================================================================== */

.section { padding: 4rem 0; }
.section--tight { padding: 2.75rem 0; }
.section--gray { background: var(--gray-50); border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }

.container { max-width: 1100px; margin: 0 auto; padding: 0 1.75rem; }
.container--narrow { max-width: 720px; }
.container--doc { max-width: 1000px; }

.section-title {
    font-family: var(--display);
    font-size: clamp(1.6rem, 3vw, 2.15rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 0.6rem;
}

.section-subtitle {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-light);
    margin-bottom: 2.25rem;
    max-width: 66ch;
}

/* Les titres sont alignés à gauche par défaut : c'est ce qui se lit le mieux.
   Les deux classes ci-dessous restent acceptées pour ne rien casser. */
.section-title--left, .section-subtitle--left { text-align: left; margin-left: 0; }

/* ==========================================================================
   Chiffres
   ========================================================================== */

.stats { background: var(--white); padding: 2.5rem 0; border-bottom: 1px solid var(--gray-200); }

.stats-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.75rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1.5rem;
}

.stat { padding: 0; }

.stat-number {
    display: block;
    font-family: var(--display);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--primary);
    margin-bottom: 0.2rem;
}

.stat-label { font-size: 0.9rem; line-height: 1.5; color: var(--text-light); }

/* ==========================================================================
   Cartes — un cadre, du texte, rien d'autre
   ========================================================================== */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
    margin-top: 1.75rem;
}

.card-grid--2 { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
.card-grid > * { min-width: 0; }

.card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1.6rem;
    transition: var(--transition);
}

.card:hover { border-color: var(--gray-300); }

.card-icon { font-size: 1.5rem; line-height: 1; margin-bottom: 0.75rem; }

.card-title {
    font-size: 1.12rem;
    font-weight: 650;
    line-height: 1.35;
    color: var(--ink);
    margin-bottom: 0.5rem;
}

.card-title a { color: inherit; text-decoration: none; }
.card-title a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

.card-description { color: var(--text-light); font-size: 0.97rem; line-height: 1.65; margin-bottom: 1rem; }

.card-features { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }

.card-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.93rem;
    line-height: 1.55;
    color: var(--text-light);
}

.card-features li::before {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    margin-top: 0.6em;
    border-radius: 50%;
    background: var(--orange);
}

.card-features--warn li::before { background: var(--gray-300); }

/* Petit intertitre à l'intérieur d'une carte */
.subhead {
    font-size: 0.82rem;
    font-weight: 650;
    color: var(--ink);
    margin: 1.1rem 0 0.45rem;
}

/* Une remarque, sans encadré : un filet et du texte */
.note {
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--gray-100);
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--text-light);
}

.note strong { color: var(--ink); font-weight: 650; }

.card-footer {
    margin-top: auto;
    padding-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.problem-card { border-left: 3px solid var(--amber); }
.solution-card { border-left: 3px solid var(--orange); }

/* ==========================================================================
   Étiquettes
   ========================================================================== */

.tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.18rem 0.6rem;
    border-radius: var(--pill);
    background: var(--gray-100);
    color: var(--text-light);
    white-space: nowrap;
}

.tag--primary { background: rgba(240, 96, 24, 0.11); color: var(--primary-dark); }
.tag--success { background: rgba(63, 125, 32, 0.11); color: var(--success); }
.tag--warning { background: rgba(240, 168, 72, 0.2);  color: var(--warning); }
.tag--error   { background: rgba(168, 24, 24, 0.09);  color: var(--ember); }
.tag--info    { background: rgba(184, 51, 26, 0.09);  color: var(--primary); }
.tag--mono    { font-family: var(--mono); font-weight: 500; }

.level-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* ==========================================================================
   Barre de filtres
   ========================================================================== */

.toolbar {
    position: sticky;
    top: var(--header-h);
    z-index: 500;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--gray-200);
    padding: 0.7rem 0;
    margin-bottom: 2.5rem;
}

.toolbar-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.search-field { flex: 1 1 220px; position: relative; display: flex; align-items: center; }

.search-field input {
    width: 100%;
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--text);
    padding: 0.5rem 0.9rem 0.5rem 2.2rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--white);
    transition: var(--transition);
}

.search-field input::placeholder { color: var(--text-muted); }
.search-field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(184, 51, 26, 0.1); }

.search-field::before {
    content: "⌕";
    position: absolute;
    left: 0.8rem;
    font-size: 1.1rem;
    color: var(--text-muted);
    pointer-events: none;
}

.select-field {
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--text);
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--white);
    cursor: pointer;
    transition: var(--transition);
}

.select-field:focus { outline: none; border-color: var(--primary); }

.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.chip {
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.42rem 0.85rem;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    background: var(--white);
    color: var(--text-light);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.chip:hover { border-color: var(--gray-300); color: var(--ink); }
.chip.is-active { background: var(--primary); border-color: var(--primary); color: var(--white); font-weight: 600; }

.result-count { font-size: 0.85rem; color: var(--text-muted); margin-left: auto; white-space: nowrap; }

.empty-state {
    padding: 3rem 1.75rem;
    color: var(--text-light);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    background: var(--gray-50);
}

.empty-state strong { display: block; font-size: 1.1rem; color: var(--ink); margin-bottom: 0.35rem; }

/* ==========================================================================
   Tableaux
   ========================================================================== */

.table-wrap { overflow-x: auto; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--white); }

table.data { width: 100%; border-collapse: collapse; font-size: 0.93rem; min-width: 620px; }

table.data thead th {
    background: var(--gray-50);
    color: var(--text-light);
    font-size: 0.84rem;
    font-weight: 600;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--gray-200);
    white-space: nowrap;
}

table.data tbody td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--gray-100); vertical-align: top; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--gray-50); }
table.data .num { font-family: var(--mono); font-size: 0.85rem; color: var(--text-light); white-space: nowrap; }

/* ==========================================================================
   Code
   ========================================================================== */

.code-block { margin: 1.4rem 0; border-radius: var(--radius); background: var(--ink-deep); overflow: hidden; }

.code-block__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0.7rem 0.45rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.code-block__label {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: rgba(255, 232, 212, 0.6);
}

.code-block__copy {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: rgba(255, 255, 255, 0.88);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
}

.code-block__copy:hover { background: rgba(255, 255, 255, 0.2); }
.code-block__copy.is-done { background: var(--amber); color: var(--ink-deep); }

.code-block pre {
    margin: 0;
    padding: 1rem 1.1rem;
    overflow-x: auto;
    font-family: var(--mono);
    font-size: 0.83rem;
    line-height: 1.7;
    color: #f6ece3;
    tab-size: 2;
}

.code-block pre .cmt { color: #b3907a; }

code.inline {
    font-family: var(--mono);
    font-size: 0.87em;
    background: var(--gray-100);
    color: var(--primary-dark);
    padding: 0.08em 0.35em;
    border-radius: 4px;
    white-space: nowrap;
}

/* ==========================================================================
   Contenu long
   ========================================================================== */

.prose { font-size: 1.05rem; line-height: 1.75; color: var(--text); max-width: 68ch; }
.prose > * + * { margin-top: 1.1rem; }
.prose strong { font-weight: 650; color: var(--ink); }
.prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.45rem; }
.prose li::marker { color: var(--text-muted); }
.prose .table-wrap, .prose .code-block { max-width: none; }

.guide-layout { display: grid; grid-template-columns: 210px 1fr; gap: 3rem; align-items: start; }
.guide-layout > * { min-width: 0; }

.guide-toc { position: sticky; top: calc(var(--header-h) + 24px); }

.guide-toc h4 {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.7rem;
}

.guide-toc ol { list-style: none; counter-reset: toc; display: flex; flex-direction: column; }

.guide-toc a {
    counter-increment: toc;
    display: flex;
    gap: 0.5rem;
    padding: 0.3rem 0 0.3rem 0.7rem;
    border-left: 2px solid var(--gray-200);
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.88rem;
    line-height: 1.45;
    transition: var(--transition);
}

.guide-toc a::before { content: counter(toc) "."; color: var(--text-muted); flex: 0 0 auto; font-size: 0.82rem; }
.guide-toc a:hover { color: var(--primary); border-left-color: var(--gray-300); }
.guide-toc a.is-current { color: var(--primary); border-left-color: var(--primary); }

.step { margin-bottom: 2.75rem; scroll-margin-top: calc(var(--header-h) + 24px); }

.step__head { display: flex; gap: 0.7rem; align-items: baseline; margin-bottom: 0.9rem; }

.step__num {
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--gray-100);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.step__title { font-size: 1.3rem; font-weight: 650; line-height: 1.3; color: var(--ink); }

.callout {
    border-radius: var(--radius);
    padding: 0.95rem 1.15rem;
    margin: 1.4rem 0;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-left: 3px solid var(--gray-300);
    font-size: 0.97rem;
    line-height: 1.7;
    color: var(--text-light);
}

.callout strong { display: block; margin-bottom: 0.15rem; color: var(--ink); font-weight: 650; }
.callout--warn { border-left-color: var(--amber); }
.callout--ok   { border-left-color: var(--success); }
.callout--info { border-left-color: var(--orange); }

.meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 1rem 0;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 2.5rem;
}

.meta-item { display: flex; flex-direction: column; gap: 0.1rem; }
.meta-item span { font-size: 0.78rem; color: var(--text-muted); }
.meta-item strong { font-size: 0.93rem; color: var(--text); font-weight: 600; }

.breadcrumb { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1rem; }
.breadcrumb a { color: var(--text-light); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

/* Liste de spécifications, à plat : plus de boîte dans la boîte */
.specs { display: grid; gap: 0; margin: 0 0 1rem; }

.spec-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.92rem;
}

.spec-item:last-child { border-bottom: none; }
.spec-label { color: var(--text-light); }
.spec-value { font-family: var(--mono); font-size: 0.84rem; color: var(--ink); text-align: right; }

.tech-specs { border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; background: var(--white); }

.tech-content { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; margin-top: 1.75rem; }
.tech-content > * { min-width: 0; }
.tech-text h3 { font-size: 1.5rem; font-weight: 650; line-height: 1.3; color: var(--ink); margin-bottom: 1rem; }
.tech-text p { font-size: 1.02rem; color: var(--text-light); line-height: 1.7; margin-bottom: 1.1rem; max-width: 60ch; }

/* ==========================================================================
   Sections sombres — sobres, sans halo
   ========================================================================== */

.mission, .impact { background: var(--ink-deep); color: var(--cream); }
.impact { background: var(--ink-deeper); }

.mission .section-title, .impact .section-title { color: var(--white); }
.mission .section-subtitle, .impact .section-subtitle { color: rgba(240, 216, 192, 0.75); }

.mission-grid, .impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: 1.75rem;
}

.mission-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-lg);
    padding: 1.6rem;
}

.mission-icon { font-size: 1.5rem; line-height: 1; display: block; margin-bottom: 0.85rem; }
.mission-title { font-size: 1.12rem; font-weight: 650; margin-bottom: 0.5rem; color: var(--white); }
.mission-description { color: rgba(240, 216, 192, 0.75); line-height: 1.65; font-size: 0.96rem; }

.highlight-stat { color: var(--amber); font-weight: 650; }

.impact-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-lg);
    padding: 1.6rem;
}

.impact-number {
    display: block;
    font-family: var(--display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--amber);
    margin-bottom: 0.25rem;
}

.impact-label { font-size: 0.93rem; line-height: 1.55; color: rgba(240, 216, 192, 0.75); }

/* ==========================================================================
   Zone éducation
   ========================================================================== */

.edu-hero {
    padding: 3.5rem 0 2.5rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.edu-hero h1 {
    font-family: var(--display);
    font-size: clamp(2rem, 4.4vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.018em;
    color: var(--ink);
    margin-bottom: 1rem;
    max-width: 20ch;
}

.edu-hero h1 em { font-style: normal; color: var(--primary); }

.edu-hero p.lead { font-size: 1.14rem; line-height: 1.65; color: var(--text-light); max-width: 60ch; margin-bottom: 1.75rem; }

.age-switch { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; }
.age-switch .chip { font-size: 0.9rem; padding: 0.5rem 1rem; }

.atelier {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1.6rem;
    transition: var(--transition);
}

.atelier:hover { border-color: var(--gray-300); }

.atelier__top { padding: 0; background: none; border: none; margin-bottom: 1rem; }
.atelier__emoji { font-size: 1.6rem; line-height: 1; display: block; margin-bottom: 0.6rem; }
.atelier__title { font-size: 1.18rem; font-weight: 650; line-height: 1.3; color: var(--ink); margin-bottom: 0.4rem; }
.atelier__pitch { font-size: 0.97rem; line-height: 1.6; color: var(--text-light); }

.atelier__body { padding: 0; display: flex; flex-direction: column; flex: 1; }
.atelier__meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1.1rem; }

.atelier h4 {
    font-size: 0.82rem;
    font-weight: 650;
    color: var(--ink);
    margin: 1.1rem 0 0.45rem;
}

.atelier h4:first-of-type { margin-top: 0; }

.atelier ol { list-style: none; counter-reset: etape; display: flex; flex-direction: column; gap: 0.45rem; }

.atelier ol li {
    counter-increment: etape;
    display: flex;
    gap: 0.55rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-light);
}

.atelier ol li::before {
    content: counter(etape) ".";
    flex: 0 0 auto;
    color: var(--primary);
    font-weight: 650;
    font-size: 0.88rem;
    padding-top: 0.05em;
}

.atelier__foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--gray-100); font-size: 0.92rem; color: var(--text-light); }
.atelier__foot strong { color: var(--ink); font-weight: 650; }

.rules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25rem; margin-top: 1.75rem; }

.rule { padding: 1.5rem; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); }

.rule__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--gray-100);
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.85rem;
}

.rule h3 { font-size: 1.08rem; font-weight: 650; line-height: 1.35; color: var(--ink); margin-bottom: 0.4rem; }
.rule p { font-size: 0.95rem; line-height: 1.65; color: var(--text-light); }

.qa { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--gray-200); }

.qa details { border-bottom: 1px solid var(--gray-200); background: none; }

.qa summary {
    cursor: pointer;
    list-style: none;
    padding: 1rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.qa summary::-webkit-details-marker { display: none; }

.qa summary::after {
    content: "+";
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1;
    flex: 0 0 auto;
}

.qa details[open] summary::after { content: "–"; }
.qa summary:hover { color: var(--primary); }

.qa .qa__body { padding: 0 0 1.15rem; font-size: 1rem; line-height: 1.7; color: var(--text-light); max-width: 66ch; }
.qa .qa__body > * + * { margin-top: 0.7rem; }
.qa .qa__body strong { color: var(--ink); }

.teacher-band {
    background: var(--ink-deep);
    color: var(--cream);
    border-radius: var(--radius-lg);
    padding: 2.25rem;
}

.teacher-band .eyebrow { color: var(--amber); }
.teacher-band h2 { font-family: var(--display); font-size: 1.6rem; font-weight: 700; color: var(--white); margin-bottom: 0.85rem; }
.teacher-band p { color: rgba(240, 216, 192, 0.78); line-height: 1.7; max-width: 62ch; margin-bottom: 1.1rem; }

/* ==========================================================================
   Pied de page — une ligne d'identité, quatre colonnes de liens, une mention
   ========================================================================== */

.footer {
    background: var(--gray-50);
    color: var(--text-light);
    padding: 3.5rem 0 2rem;
    border-top: 1px solid var(--gray-200);
    font-size: 0.9rem;
}

.footer-haut {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--gray-200);
}

.footer-marque {
    font-family: var(--display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
    margin-bottom: 0.5rem;
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
}

.footer-marque::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 3px;
    border-radius: 2px;
    background: var(--fx-gradient);
}

.footer-baseline { max-width: 60ch; line-height: 1.65; color: var(--text-light); }

.footer-mail {
    flex: 0 0 auto;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--pill);
    background: var(--white);
    transition: var(--transition);
    white-space: nowrap;
}

.footer-mail:hover { border-color: var(--primary); background: var(--white); }

.footer-liens {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 2.5rem;
}

.footer-section h4 { font-size: 0.8rem; font-weight: 650; color: var(--ink); margin-bottom: 0.75rem; }

.footer-section a {
    display: block;
    color: var(--text-light);
    text-decoration: none;
    margin-bottom: 0.45rem;
    transition: var(--transition);
}

.footer-section a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.6;
}

/* ==========================================================================
   Divers
   ========================================================================== */

.scroll-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--gray-200);
    color: var(--ink);
    font-size: 1rem;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 1000;
    box-shadow: var(--shadow);
}

.scroll-to-top.visible { opacity: 1; pointer-events: auto; }
.scroll-to-top:hover { border-color: var(--gray-300); }

/* Plus d'apparition au défilement : le texte est là dès l'ouverture. */
.fade-in, .fade-in.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition-duration: 0.01ms !important; }
    html { scroll-behavior: auto; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1000px) {
    .tech-content { grid-template-columns: 1fr; gap: 2rem; }
    .guide-layout { grid-template-columns: 1fr; gap: 2rem; }
    .guide-toc { position: static; }
    .guide-toc ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.2rem; }
}

@media (max-width: 900px) {
    .footer-liens { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
}

@media (max-width: 860px) {
    .hero-container { grid-template-columns: 1fr; gap: 2rem; }
    .hero-visual { justify-content: flex-start; }
    .hero-visual img { max-width: 200px; }
}

@media (max-width: 768px) {
    body { font-size: 16px; }
    .container, .nav-container, .toolbar-inner, .stats-container, .hero-container { padding-left: 1.25rem; padding-right: 1.25rem; }
    .section { padding: 3rem 0; }
    .hero { padding: 3rem 0 2.25rem; }
    .card-grid, .card-grid--2 { grid-template-columns: 1fr; }
    .stats-container { grid-template-columns: 1fr 1fr; }
    .result-count { margin-left: 0; width: 100%; }
    .meta-row { gap: 1.25rem; }
    .chips { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.25rem; }
    .teacher-band { padding: 1.6rem; }
    .scroll-to-top { bottom: 1rem; right: 1rem; }
}

@media (max-width: 520px) {
    .stats-container { grid-template-columns: 1fr; gap: 1rem; }
    .footer-liens { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
    .footer-mail { width: 100%; text-align: center; }
    .btn { width: 100%; }
    .hero-cta { flex-direction: column; }
}

/* ==========================================================================
   Mode pas à pas — une étape à l'écran, Précédent / Suivant, comme un
   assistant d'installation.
   ========================================================================== */

.wizard-head {
    padding: 1.5rem 0 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.wizard-head__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.wizard-head__titre { font-size: 1rem; font-weight: 650; color: var(--ink); }
.wizard-head__titre a { color: inherit; text-decoration: none; }
.wizard-head__titre a:hover { color: var(--primary); }
.wizard-head__compte { font-size: 0.86rem; color: var(--text-muted); white-space: nowrap; }

.wizard-bar {
    height: 5px;
    border-radius: 3px;
    background: var(--gray-200);
    overflow: hidden;
}

.wizard-bar span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--fx-gradient);
    transition: width .3s ease;
}

.wizard-layout {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 3rem;
    align-items: start;
}

.wizard-layout > * { min-width: 0; }

.wizard-steps { position: sticky; top: calc(var(--header-h) + 24px); }
.wizard-steps h4 { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.7rem; }
.wizard-steps ol { list-style: none; display: flex; flex-direction: column; }

.wizard-steps a {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    padding: 0.4rem 0 0.4rem 0.7rem;
    border-left: 2px solid var(--gray-200);
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.88rem;
    line-height: 1.45;
    transition: var(--transition);
}

.wizard-steps a:hover { color: var(--primary); border-left-color: var(--gray-300); }

.wizard-steps a .puce {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.1rem;
    border-radius: 50%;
    border: 1px solid var(--gray-300);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wizard-steps a.is-current { color: var(--ink); font-weight: 600; border-left-color: var(--primary); }
.wizard-steps a.is-current .puce { background: var(--primary); border-color: var(--primary); color: #fff; }
.wizard-steps a.is-done .puce { background: var(--success); border-color: var(--success); color: #fff; }
.wizard-steps a.is-done .puce::after { content: "✓"; }
.wizard-steps a.is-done .puce span { display: none; }

.wizard-etape__titre {
    font-family: var(--display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 1.25rem;
}

.wizard-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--gray-200);
}

.wizard-nav .btn { min-width: 8.5rem; }
.wizard-nav__vide { visibility: hidden; }

.wizard-aide { font-size: 0.85rem; color: var(--text-muted); }
.wizard-aide kbd {
    font-family: var(--mono);
    font-size: 0.78rem;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    padding: 0.05em 0.35em;
}

.wizard-fin { text-align: center; padding: 1rem 0 0; }
.wizard-fin__coche {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: rgba(63, 125, 32, 0.12);
    color: var(--success);
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard-fin h1 {
    font-family: var(--display);
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 0.75rem;
}

.wizard-fin p { color: var(--text-light); max-width: 56ch; margin: 0 auto 1rem; line-height: 1.7; }
.wizard-fin .hero-cta { justify-content: center; margin-top: 1.75rem; }

.wizard-recap { text-align: left; margin: 2.25rem auto 0; max-width: 34rem; }
.wizard-recap h2 { font-size: 0.82rem; font-weight: 650; color: var(--text-muted); margin-bottom: 0.6rem; }
.wizard-recap ol { list-style: none; counter-reset: r; border-top: 1px solid var(--gray-200); }
.wizard-recap li {
    counter-increment: r;
    display: flex;
    gap: 0.6rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.95rem;
    color: var(--text-light);
}
.wizard-recap li::before { content: "✓"; color: var(--success); font-weight: 700; flex: 0 0 auto; }

/* Reprise de progression, affichée par le script s'il y a lieu */
.reprise { font-size: 0.85rem; color: var(--success); font-weight: 600; }

@media (max-width: 1000px) {
    .wizard-layout { grid-template-columns: 1fr; gap: 1.75rem; }
    .wizard-steps { position: static; }
    .wizard-steps ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.15rem; }
}

@media (max-width: 520px) {
    .wizard-nav { flex-direction: column-reverse; align-items: stretch; }
    .wizard-nav .btn { width: 100%; }
    .wizard-nav__vide { display: none; }
    .wizard-aide { display: none; }
}

/* Sur petit écran, la liste des étapes se replie en pastilles numérotées :
   seule l'étape en cours affiche son titre. */
@media (max-width: 768px) {
    .wizard-steps h4 { display: none; }
    .wizard-steps ol {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0.3rem;
        padding-bottom: 0.35rem;
        align-items: center;
    }
    .wizard-steps li { flex: 0 0 auto; }
    .wizard-steps a {
        border-left: none;
        padding: 0.25rem;
        align-items: center;
        white-space: nowrap;
    }
    .wizard-steps a > span:last-child { display: none; }
    .wizard-steps a.is-current > span:last-child { display: inline; padding-right: 0.3rem; }
}

/* ==========================================================================
   Générateur de script
   ========================================================================== */

.champ { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.champ > span { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.champ .select-field { width: 100%; }

#sortie { display: block; white-space: pre; }

/* ==========================================================================
   SATI Installer : la page complète
   --------------------------------------------------------------------------
   Même carte que l'installateur de l'accueil, en plus large : les questions
   à gauche, le script à droite, et tout visible d'un coup. Le pas à pas
   n'est plus imposé, c'est une bascule.
   ========================================================================== */

.installer-page { padding: 0 0 4rem; }

.mini-installer--complet .mini-installer__corps { grid-template-columns: 1.1fr 0.9fr; }
.mini-installer--complet .mini-installer__questions,
.mini-installer--complet .mini-installer__sortie { padding: 2rem; }

/* Les questions sont longues, le script doit rester sous les yeux : c'est
   lui qui change quand on coche une option tout en bas. Le collage demande
   de rendre le débordement visible, donc d'arrondir la barre et le coin
   à la main. */
.mini-installer.mini-installer--complet { overflow: visible; }
.mini-installer.mini-installer--complet::before { border-radius: 20px 20px 0 0; }
.mini-installer--complet .mini-installer__sortie { border-radius: 0 0 20px 0; }

.mini-installer--complet .mini-installer__collant {
    position: sticky;
    top: calc(var(--header-h) + 1rem);
}

/* Les étapes s'enchaînent, séparées d'un filet. */
.gen-etape { border-top: 1px solid var(--gray-200); padding-top: 1.6rem; margin-top: 1.6rem; }
.gen-etape:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }

/* … sauf en mode pas à pas, où seule l'étape courante reste à l'écran. */
.gen--pas-a-pas .gen-etape { display: none; border-top: none; padding-top: 0; margin-top: 0; }
.gen--pas-a-pas .gen-etape.is-active { display: block; }

#fNom { width: 100%; }

.mini-installer__bascule {
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 650;
    color: var(--primary);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.mini-installer__bascule:hover { text-decoration: underline; text-underline-offset: 3px; }

.code-block__boutons { display: flex; gap: 0.4rem; }

@media (max-width: 980px) {
    .mini-installer--complet .mini-installer__corps { grid-template-columns: 1fr; }
    .mini-installer--complet .mini-installer__sortie { border-radius: 0 0 20px 20px; }
    .mini-installer--complet .mini-installer__collant { position: static; }
}

@media (max-width: 768px) {
    .mini-installer--complet .mini-installer__questions,
    .mini-installer--complet .mini-installer__sortie { padding: 1.25rem; }
}

/* ==========================================================================
   Tableau comparatif des machines
   ========================================================================== */

.data--machines { min-width: 760px; }
.data--machines td { vertical-align: top; }
.data--machines td:first-child { min-width: 14rem; }

.machine-nom {
    color: var(--primary);
    font-weight: 650;
    text-decoration: none;
}

.machine-nom:hover { text-decoration: underline; text-underline-offset: 3px; }

.machine-sous {
    display: block;
    font-size: 0.79rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
    line-height: 1.35;
}

.data--machines .tag { margin-left: 0.35rem; }
.data--machines tbody tr:hover .machine-nom { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Glossaire — une définition doit se lire, pas se décoder
   ========================================================================== */

.glossaire {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0;
    border-top: 1px solid var(--gray-200);
}

.mot {
    padding: 1.4rem 1.5rem 1.4rem 0;
    border-bottom: 1px solid var(--gray-200);
}

.mot__terme {
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--ink);
    margin-bottom: 0.4rem;
}

.mot__def { font-size: 0.97rem; line-height: 1.6; color: var(--text); margin-bottom: 0.5rem; }

.mot__clair { font-size: 0.93rem; line-height: 1.6; color: var(--text-light); }
.mot__clair span { color: var(--primary); font-weight: 650; }

@media (max-width: 700px) {
    .glossaire { grid-template-columns: 1fr; }
    .mot { padding-right: 0; }
}

/* ==========================================================================
   Le triangle des arbitrages
   ========================================================================== */

.triangle-bloc {
    display: grid;
    grid-template-columns: minmax(280px, 420px) 1fr;
    gap: 3rem;
    align-items: start;
    margin: 2rem 0 2.5rem;
}

.triangle-bloc > * { min-width: 0; }

.triangle-figure { text-align: center; }
.triangle-figure svg { width: 100%; height: auto; overflow: visible; }

.triangle-aide {
    font-size: 0.83rem;
    color: var(--text-muted);
    margin-top: 0.75rem;
}

.sommet-svg { cursor: pointer; }
.sommet-svg circle { transition: r .2s ease, opacity .2s ease; }
.sommet-svg:hover circle { opacity: 0.85; }
.sommet-svg.is-active circle { r: 34; }
.sommet-svg[data-sommet="equilibre"].is-active circle { r: 31; }

.sommets-boutons { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.5rem; }

.triangle-panneau {
    border: 1px solid var(--gray-200);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius);
    background: var(--gray-50);
    padding: 1.5rem 1.6rem;
}

.triangle-panneau h3 {
    font-size: 1.15rem;
    font-weight: 650;
    color: var(--ink);
    margin-bottom: 0.5rem;
}

.triangle-resume { font-size: 1rem; line-height: 1.65; color: var(--text); margin-bottom: 1.25rem; }

.triangle-liste { display: grid; gap: 0.9rem; }

.triangle-liste dt {
    font-size: 0.79rem;
    font-weight: 650;
    color: var(--primary);
    margin-bottom: 0.15rem;
}

.triangle-liste dd { font-size: 0.95rem; line-height: 1.6; color: var(--text-light); }

@media (max-width: 900px) {
    .triangle-bloc { grid-template-columns: 1fr; gap: 2rem; }
    .triangle-figure { max-width: 380px; margin: 0 auto; }
}

.tech-sous-titre {
    font-size: 1.35rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: 0.75rem;
}

/* ==========================================================================
   ACCUEIL — hero compact, l'installateur juste dessous
   ========================================================================== */

.accueil-hero {
    position: relative;
    overflow: hidden;
    padding: 3.5rem 0 2.5rem;
    background:
        radial-gradient(1100px 420px at 18% -10%, rgba(240, 168, 72, 0.22), transparent 65%),
        radial-gradient(900px 380px at 82% 0%, rgba(216, 72, 24, 0.14), transparent 65%),
        var(--white);
    border-bottom: 1px solid var(--gray-200);
}

.accueil-hero__grille {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 2.5rem;
    align-items: center;
}

.accueil-hero__grille > * { min-width: 0; }

.accueil-hero h1 {
    font-family: var(--display);
    font-size: clamp(2.1rem, 4.6vw, 3.3rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 1rem;
}

.accueil-hero h1 em { font-style: normal; color: var(--primary); }

.accueil-hero__pitch {
    font-size: 1.12rem;
    line-height: 1.65;
    color: var(--text-light);
    max-width: 52ch;
    margin-bottom: 1.5rem;
}

.accueil-hero__image { display: flex; justify-content: center; }
.accueil-hero__image img { width: 100%; max-width: 230px; height: auto; }

.badge-live {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-dark);
    background: rgba(240, 168, 72, 0.28);
    border-radius: var(--pill);
    padding: 0.3rem 0.8rem;
    margin-bottom: 1rem;
}

.badge-live::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
}

.pastilles { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }

.pastilles li {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.88rem;
    color: var(--text-light);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--pill);
    padding: 0.35rem 0.85rem;
}

.pastilles b { font-family: var(--display); font-size: 1.05rem; color: var(--ink); }

/* --------------------------------------------------- le mini-installateur */

.installer-accueil { padding: 2.5rem 0 3.5rem; }

.mini-installer {
    position: relative;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 20px;
    box-shadow: 0 18px 48px rgba(42, 16, 8, 0.1);
    overflow: hidden;
}

.mini-installer::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--fx-gradient);
}

.mini-installer__entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.5rem 1.75rem 1.1rem;
    border-bottom: 1px solid var(--gray-200);
}

.mini-installer__marque {
    font-family: var(--display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.1;
}

.mini-installer__titre {
    font-family: var(--display);
    font-size: clamp(1.35rem, 2.4vw, 1.8rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
    line-height: 1.2;
}

.mini-installer__corps {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 0;
}

.mini-installer__corps > * { min-width: 0; }
.mini-installer__questions { padding: 1.75rem; }
.mini-installer__sortie { padding: 1.75rem; background: var(--gray-50); border-left: 1px solid var(--gray-200); }

.q { border: none; margin-bottom: 1.5rem; }
.q:last-of-type { margin-bottom: 1rem; }

.q legend {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.98rem;
    font-weight: 650;
    color: var(--ink);
    margin-bottom: 0.7rem;
    padding: 0;
}

.q__num {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--fx-gradient);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.q__aide { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.5rem; }
.q__aide a { font-weight: 600; }

/* Deuxième question à l'intérieur d'une étape : la RAM sous la machine,
   le contexte sous le moteur. Pas de numéro, pas de nouvelle carte. */
.q__sous {
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--ink);
    margin: 1.1rem 0 0.5rem;
}

.q__intro { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 0.7rem; }

.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem; }
.tuiles--courtes { grid-template-columns: repeat(3, 1fr); }
.tuiles--options { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.tuile {
    font-family: inherit;
    text-align: left;
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: 12px;
    padding: 0.7rem 0.8rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.tuile:hover { border-color: var(--gray-300); transform: translateY(-1px); }

.tuile.is-active {
    border-color: var(--primary);
    background: rgba(240, 96, 24, 0.07);
}

/* Une option se coche et se décoche : le carré dit lequel des deux,
   là où une tuile de choix se contente de la bordure orange. */
.tuile--bascule { position: relative; padding-right: 2.2rem; }

.tuile--bascule::after {
    content: "";
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    width: 1.1rem;
    height: 1.1rem;
    border: 1.5px solid var(--gray-300);
    border-radius: 5px;
    background: var(--white);
}

.tuile--bascule.is-active::after {
    content: "\2713";
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.tuile__ico { display: block; font-size: 1.25rem; line-height: 1; margin-bottom: 0.3rem; }
.tuile__nom { display: block; font-size: 0.92rem; font-weight: 650; color: var(--ink); line-height: 1.25; }
.tuile__note { display: block; font-size: 0.76rem; color: var(--text-muted); margin-top: 0.1rem; line-height: 1.3; }
.tuile.is-active .tuile__note { color: var(--primary-dark); }

/* Une option que le moteur choisi ne sait pas installer. Elle reste lisible
   — la raison est écrite juste à côté, dans le panneau de droite. */
.tuile.is-indispo {
    cursor: not-allowed;
    opacity: 0.45;
    background: var(--gray-50);
}

.tuile.is-indispo:hover { border-color: var(--gray-200); transform: none; }
.tuile.is-indispo::after { opacity: 0.5; }

.mini-installer__resultat {
    font-size: 0.92rem;
    color: var(--text-light);
    background: var(--gray-50);
    border-left: 3px solid var(--primary);
    border-radius: 0 8px 8px 0;
    padding: 0.7rem 0.9rem;
}

.mini-installer__resultat b { color: var(--ink); }

/* Ce que la page a ajuste toute seule. Un choix corrige en silence est une
   facon de mentir : on le dit, et on dit pourquoi. */
.ajustements {
    list-style: none;
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ajustements li {
    position: relative;
    font-size: 0.83rem;
    line-height: 1.5;
    color: var(--text-light);
    padding-left: 1.4rem;
}

.ajustements li::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary);
    font-weight: 700;
}

.mini-installer__volume {
    font-size: 0.86rem;
    color: var(--text-light);
    margin-top: 0.75rem;
}

.mini-installer__volume b { color: var(--ink); font-weight: 650; }
.mini-installer__volume span {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.mini-installer__sortie .code-block pre { max-height: 22rem; }
.mini-installer__pied { font-size: 0.83rem; line-height: 1.6; color: var(--text-muted); margin-top: 0.9rem; }

/* ------------------------------------------------------------ trois points */

.trois-points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    margin-top: 1.75rem;
}

.point__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--fx-gradient);
    color: #fff;
    font-family: var(--display);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.point h3 { font-size: 1.08rem; font-weight: 650; color: var(--ink); margin-bottom: 0.45rem; line-height: 1.3; }
.point p { font-size: 0.97rem; line-height: 1.65; color: var(--text-light); }

/* ------------------------------------------------------------- parcours */

.parcours {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.25rem;
    margin-top: 1.75rem;
}

.parcours__carte {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.parcours__carte:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(42, 16, 8, 0.09);
}

.parcours__ico { font-size: 1.7rem; line-height: 1; margin-bottom: 0.8rem; }
.parcours__carte h3 { font-size: 1.05rem; font-weight: 650; color: var(--ink); margin-bottom: 0.45rem; line-height: 1.3; }
.parcours__carte p { font-size: 0.93rem; line-height: 1.6; color: var(--text-light); margin-bottom: 1rem; }

.parcours__lien {
    margin-top: auto;
    font-size: 0.88rem;
    font-weight: 650;
    color: var(--primary);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 980px) {
    .mini-installer__corps { grid-template-columns: 1fr; }
    .mini-installer__sortie { border-left: none; border-top: 1px solid var(--gray-200); }
}

@media (max-width: 860px) {
    .accueil-hero__grille { grid-template-columns: 1fr; gap: 1.75rem; }
    .accueil-hero__image { justify-content: flex-start; }
    .accueil-hero__image img { max-width: 150px; }
}

@media (max-width: 768px) {
    .accueil-hero { padding: 2.5rem 0 2rem; }
    .installer-accueil { padding: 1.75rem 0 2.5rem; }
    .mini-installer__entete,
    .mini-installer__questions,
    .mini-installer__sortie { padding: 1.25rem; }
    .tuiles { grid-template-columns: 1fr 1fr; }
    .mini-installer__sortie .code-block pre { max-height: 16rem; }
}

/* Sous 560 px, le visuel du hero laisse la place a l installateur :
   il doit etre visible sans avoir a faire defiler longtemps. */
@media (max-width: 560px) {
    .accueil-hero__image { display: none; }
    .accueil-hero { padding-bottom: 1.5rem; }
    .installer-accueil { padding-top: 1.25rem; }
}

/* ==========================================================================
   EN-TÊTE ET MENU — quatre entrées au premier niveau, l'action en bouton
   ========================================================================== */

.saut-contenu {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--primary);
    color: #fff;
    padding: 0.7rem 1.1rem;
    border-radius: 0 0 var(--radius) 0;
    font-weight: 650;
    text-decoration: none;
}

.saut-contenu:focus { left: 0; }

.nav-bureau { display: block; }

.nav-menu { display: flex; list-style: none; gap: 0.25rem; align-items: center; }

.nav-menu > li { position: relative; }

.nav-menu a,
.nav-declencheur {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: inherit;
    font-size: 0.91rem;
    font-weight: 500;
    color: var(--text-light);
    background: none;
    border: none;
    border-radius: var(--pill);
    padding: 0.45rem 0.75rem;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}

.nav-menu a:hover,
.nav-declencheur:hover { color: var(--ink); background: var(--gray-100); }

.nav-menu a.is-active,
.nav-declencheur.is-active { color: var(--primary); font-weight: 650; }

.nav-chevron {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.6;
    transition: transform .2s ease;
}

.nav-declencheur[aria-expanded="true"] { color: var(--ink); background: var(--gray-100); }
.nav-declencheur[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

.sous-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1100;
    min-width: 19rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px rgba(42, 16, 8, 0.14);
    padding: 0.5rem;
}

.sous-menu::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--fx-gradient);
}

.sous-menu a {
    display: block;
    width: 100%;
    padding: 0.65rem 0.8rem;
    border-radius: var(--radius);
    white-space: normal;
}

.sous-menu a strong { display: block; font-size: 0.95rem; font-weight: 650; color: var(--ink); }
.sous-menu a span { display: block; font-size: 0.82rem; color: var(--text-muted); line-height: 1.4; margin-top: 0.1rem; }
.sous-menu a:hover { background: var(--gray-50); }
.sous-menu a:hover strong { color: var(--primary); }
.sous-menu a[aria-current="page"] strong { color: var(--primary); }

.cta-header {
    background: var(--primary);
    color: var(--white);
    padding: 0.5rem 1.05rem;
    border-radius: var(--pill);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 650;
    white-space: nowrap;
    transition: var(--transition);
}

.cta-header:hover,
.cta-header.is-active { background: var(--primary-dark); }

/* --------------------------------------------------- le bouton hamburger */

.mobile-menu-btn {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.burger, .burger::before, .burger::after {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform .2s ease, opacity .2s ease;
}

.burger { position: relative; }
.burger::before, .burger::after { content: ''; position: absolute; left: 0; }
.burger::before { top: -7px; }
.burger::after { top: 7px; }

[aria-expanded="true"] .burger { background: transparent; }
[aria-expanded="true"] .burger::before { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"] .burger::after { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------- panneau mobile */

.menu-mobile { position: fixed; inset: 0; z-index: 1500; }

.menu-mobile__voile {
    position: absolute;
    inset: 0;
    background: rgba(26, 9, 4, 0.45);
    opacity: 0;
    transition: opacity .2s ease;
}

.menu-mobile.est-ouvert .menu-mobile__voile { opacity: 1; }

.menu-mobile__panneau {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(22rem, 88vw);
    display: flex;
    flex-direction: column;
    background: var(--white);
    box-shadow: -12px 0 40px rgba(42, 16, 8, 0.18);
    transform: translateX(100%);
    transition: transform .22s cubic-bezier(0.32, 0.72, 0, 1);
}

.menu-mobile.est-ouvert .menu-mobile__panneau { transform: translateX(0); }

.menu-mobile__haut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.75rem 0.75rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
}

.menu-mobile__titre {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.menu-mobile__fermer {
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    font-size: 1.15rem;
    color: var(--ink);
    cursor: pointer;
    border-radius: 50%;
}

.menu-mobile__fermer:hover { background: var(--gray-100); }

.menu-mobile__corps {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    -webkit-overflow-scrolling: touch;
}

.menu-mobile__action {
    display: block;
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius);
    padding: 0.9rem 1.1rem;
    text-decoration: none;
    margin-bottom: 1.5rem;
}

.menu-mobile__action strong { display: block; font-size: 1.02rem; font-weight: 650; }
.menu-mobile__action span { display: block; font-size: 0.83rem; opacity: 0.85; margin-top: 0.1rem; line-height: 1.4; }

.menu-mobile__liste { list-style: none; }

.menu-mobile__liste > li + li { margin-top: 0.2rem; }

.menu-mobile__liste a {
    display: block;
    min-height: 44px;
    padding: 0.7rem 0.6rem;
    border-radius: var(--radius);
    color: var(--ink);
    font-size: 1.02rem;
    font-weight: 600;
    text-decoration: none;
}

.menu-mobile__liste a:hover,
.menu-mobile__liste a:focus-visible { background: var(--gray-100); }
.menu-mobile__liste a.is-active { color: var(--primary); background: rgba(240, 96, 24, 0.08); }
.menu-mobile__liste a small { display: block; font-size: 0.8rem; font-weight: 400; color: var(--text-muted); margin-top: 0.1rem; line-height: 1.4; }

.menu-mobile__groupe { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--gray-200); }

.menu-mobile__groupe-titre {
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
    padding-left: 0.6rem;
}

.menu-mobile__contact {
    display: block;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--gray-200);
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.93rem;
}

body.menu-ouvert { overflow: hidden; }

/* ==========================================================================
   Défilement horizontal : on montre qu'il y a une suite
   ========================================================================== */

.table-wrap, .chips, .wizard-steps ol, .age-switch { position: relative; }

.deborde-droite {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent 100%);
}

.deborde-gauche.deborde-droite {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 36px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 36px), transparent 100%);
}

.deborde-gauche:not(.deborde-droite) {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px);
    mask-image: linear-gradient(to right, transparent 0, #000 28px);
}

/* ==========================================================================
   Confort tactile — cibles d'au moins 44 px, respiration
   ========================================================================== */

@media (max-width: 900px) {
    .nav-bureau { display: none; }
    .mobile-menu-btn { display: inline-flex; }
    .cta-header { display: inline-flex; align-items: center; padding: 0.45rem 0.9rem; font-size: 0.83rem; }
}

@media (max-width: 480px) {
    .cta-header { display: none; }
}

@media (hover: none) {
    .chip, .tuile, .btn, .card-link, .qa summary { min-height: 44px; }
    .chip { display: inline-flex; align-items: center; }
    .qa summary { padding-top: 0.9rem; padding-bottom: 0.9rem; }
    .code-block__copy { min-height: 32px; padding-left: 0.9rem; padding-right: 0.9rem; }
    .footer-section a { padding: 0.25rem 0; }
    .tuile { display: flex; flex-direction: column; justify-content: center; }
}

@media (max-width: 768px) {
    .mini-installer__sortie .code-block pre { font-size: 0.78rem; }
    .toolbar { padding: 0.6rem 0; margin-bottom: 2rem; }
    .toolbar-inner { gap: 0.5rem; }
    .search-field { flex: 1 1 100%; }
    .select-field { flex: 1 1 auto; }
    .pastilles li { font-size: 0.83rem; padding: 0.3rem 0.7rem; }
    .section-subtitle { margin-bottom: 1.75rem; }
    .scroll-to-top { width: 2.9rem; height: 2.9rem; }
}

/* Le logo est aussi une cible tactile : au moins 44 px de haut au doigt. */
@media (hover: none) {
    .logo { padding-top: 5px; padding-bottom: 9px; }
}

/* ==========================================================================
   Liens dans le texte courant
   Hors .prose, les liens heritaient du bleu par defaut du navigateur : ils
   sortaient de la palette. Un seul endroit pour les rattraper tous.
   ========================================================================== */

p.lead a,
.section-subtitle a,
.note a,
.card-description a,
.qa__body a,
.mission-description a,
.atelier__foot a,
.triangle-liste a,
.triangle-resume a,
.q__aide a,
.empty-state a,
.mot__clair a,
.footer-bottom a,
.callout a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

p.lead a:hover,
.section-subtitle a:hover,
.note a:hover,
.card-description a:hover,
.qa__body a:hover,
.callout a:hover { color: var(--primary-dark); }

/* Sur fond sombre, le rouge ne passe pas : on prend l ambre. */
.mission-description a,
.mission .section-subtitle a,
.impact .section-subtitle a,
.teacher-band a { color: var(--amber); }

/* ==========================================================================
   Multilingue — sélecteur de langue et avertissement de traduction
   ========================================================================== */

.choix-langue { position: relative; }

.langue-declencheur {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.sous-menu--langue { min-width: 11rem; left: auto; right: 0; }
.sous-menu--langue a { padding: 0.55rem 0.8rem; }
.sous-menu--langue a strong { font-weight: 550; }
.sous-menu--langue a[aria-current="true"] strong { color: var(--primary); font-weight: 650; }

/* La coche se place en absolu, pas en float : sur une entree a deux lignes
   (« Automatique » et sa note), un float tombe sur la seconde ligne et semble
   marquer l entree suivante. */
.sous-menu--langue a { position: relative; padding-right: 2rem; }

.sous-menu--langue a[aria-current="true"]::after {
    content: "✓";
    position: absolute;
    top: 0.55rem;
    right: 0.8rem;
    color: var(--primary);
    font-weight: 700;
}

/* --- Le choix de langue dans le panneau mobile --- */

.menu-mobile__langues { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0 0.6rem; }

.menu-mobile__langues a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--pill);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-light);
}

.menu-mobile__langues a.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 650;
}

/* --- Le rappel de langue en pied de page --- */

.footer-langues {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--gray-200);
    font-size: 0.87rem;
}

.footer-langues > span {
    font-weight: 650;
    color: var(--ink);
    margin-right: 0.25rem;
}

.footer-langues a { color: var(--text-light); text-decoration: none; }
.footer-langues a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.footer-langues a.is-active { color: var(--primary); font-weight: 650; }

/* --- Avertissement de traduction partielle --- */

.avis-langue {
    background: #fff7ea;
    border-bottom: 1px solid #f7e2c0;
    padding: 0.9rem 0;
}

.avis-langue__titre {
    font-size: 0.93rem;
    font-weight: 650;
    color: var(--warning);
    margin-bottom: 0.15rem;
}

.avis-langue__texte {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-light);
    max-width: 78ch;
}

.avis-langue__texte a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

/* --- Le japonais respire différemment --- */

:lang(ja) body,
html[lang="ja"] body { line-height: 1.8; }

html[lang="ja"] .accueil-hero h1,
html[lang="ja"] .page-hero h1,
html[lang="ja"] .section-title {
    font-family: var(--sans);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
}

html[lang="ja"] .logo,
html[lang="ja"] .footer-marque,
html[lang="ja"] .mini-installer__marque { font-family: var(--display); }

@media (max-width: 1100px) {
    .langue-declencheur { padding-left: 0.5rem; padding-right: 0.5rem; }
}

@media (max-width: 900px) {
    .choix-langue { display: none; }
}