/* ==========================================================================
   Portfolio d'Enzo Sari : feuille de style
   Idée directrice : une « fiche technique ». Des filets plutôt que des boîtes,
   les données en chasse fixe, un seul bleu (celui du premier site), la rosace
   comme signature « chez moi », un panneau « nuit » pour le contact.
   Mobile d'abord : 40rem (640 px), 48rem (768 px), 64rem (1024 px), 80rem (1280 px).
   ========================================================================== */

/* 1. POLICES (hébergées localement, licence SIL OFL 1.1) ------------------ */
@font-face {
    font-family: "Inter";
    src: url("fonts/inter-latin-opsz-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("fonts/inter-latin-wght-italic.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

/* 2. JETONS ---------------------------------------------------------------- */
/* Contrastes (formule WCAG), thème clair, sur --bg / --surface :
   ink 16,2 / 17,4 · ink-2 9,7 / 10,4 · muted 6,6 / 7,0 · accent 6,6 / 7,1 ·
   blanc sur accent 7,1 · accent-g 4,0 (éléments graphiques) · rule-strong 3,5 */
:root {
    color-scheme: light;

    --bg: #f5f7fa;
    --surface: #ffffff;
    --sunken: #edf1f6;
    --ink: #0d1b2a;
    --ink-2: #334155;
    --muted: #4b5a6d;
    --rule: #d0d8e2;
    --rule-strong: #76859a;
    --accent: #1a5a96;
    --accent-g: #2980b9;
    --accent-weak: #e6f0fa;
    --on-accent: #ffffff;
    --signal: #9a4a08;

    /* Panneau « nuit » du contact */
    --night: #0d1b2a;
    --on-night: #e7edf4;
    --on-night-2: #b8c4d2;
    --night-rule: #2a3a50;
    --night-accent: #8cc4f5;
    --night-btn: #ffffff;
    --on-night-btn: #0d1b2a;

    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Échelle typographique : 6 tailles de texte */
    --fs-label: 0.8125rem;                                         /* 13 px, chasse fixe */
    --fs-sm: 0.9375rem;                                            /* 15 px */
    --fs-body: 1.0625rem;                                          /* 17 px */
    --fs-lead: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);          /* 18 → 20 */
    --fs-h4: clamp(1.0625rem, 1.04rem + 0.1vw, 1.125rem);          /* 17 → 18 */
    --fs-h3: clamp(1.1875rem, 1.12rem + 0.35vw, 1.5rem);           /* 19 → 24 */
    --fs-h3-lg: clamp(1.375rem, 1.21rem + 0.8vw, 2rem);            /* 22 → 32 */
    --fs-h2: clamp(1.625rem, 1.3rem + 1.33vw, 2.5rem);             /* 26 → 40 */
    --fs-h1: clamp(2.75rem, 2.2rem + 2.4vw, 4rem);                 /* 44 → 64 */
    --fs-role: clamp(1.1875rem, 1.05rem + 0.7vw, 1.75rem);         /* 19 → 28 */

    --measure: 68ch;
    --gutter: 1.25rem;
    --maxw: 75rem;
    --space-section: clamp(4rem, 2.8rem + 4.5vw, 7.5rem);
    --r-s: 6px;
    --r-m: 12px;
    --header-h: 3.5rem;
}

@media (min-width: 40rem) {
    :root { --gutter: 2rem; }
}

@media (min-width: 64rem) {
    :root { --gutter: 2.5rem; --header-h: 4rem; }
}

/* Thème sombre « ciel de nuit » : bleu nuit teinté, jamais noir neutre.
   ink 16,1 · ink-2 10,9 · muted 7,9 · accent 10,2 · accent-g 6,4 · signal 10,3 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #0a111c;
        --surface: #0f1a2a;
        --sunken: #0c1522;
        --ink: #e7edf4;
        --ink-2: #bac6d4;
        --muted: #9aa9bb;
        --rule: #24344a;
        --rule-strong: #5a6c84;
        --accent: #8cc4f5;
        --accent-g: #4f9be0;
        --accent-weak: #122640;
        --on-accent: #0a111c;
        --signal: #f2b35e;
        --night: #14305a;
        --night-rule: #2f4d78;
        --night-btn: #8cc4f5;
        --on-night-btn: #0a111c;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0a111c;
    --surface: #0f1a2a;
    --sunken: #0c1522;
    --ink: #e7edf4;
    --ink-2: #bac6d4;
    --muted: #9aa9bb;
    --rule: #24344a;
    --rule-strong: #5a6c84;
    --accent: #8cc4f5;
    --accent-g: #4f9be0;
    --accent-weak: #122640;
    --on-accent: #0a111c;
    --signal: #f2b35e;
    --night: #14305a;
    --night-rule: #2f4d78;
    --night-btn: #8cc4f5;
    --on-night-btn: #0a111c;
}

/* 3. BASE ------------------------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.6;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-wrap: break-word;
}

@media (min-width: 40rem) {
    body { line-height: 1.65; }
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote {
    margin: 0;
}

h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.2;
    text-wrap: balance;
}

p, li {
    text-wrap: pretty;
}

ul, ol {
    padding: 0;
    list-style: none;
}

img, svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

sup {
    font-size: 0.7em;
    line-height: 0;
}

strong {
    font-weight: 600;
}

a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

@media (hover: hover) {
    a:hover {
        text-decoration-thickness: 2px;
    }
}

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

::selection {
    background: var(--accent);
    color: var(--on-accent);
}

[hidden] {
    display: none !important;
}

.nowrap {
    white-space: nowrap;
}

button {
    font: inherit;
    color: inherit;
}

.container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

main:focus {
    outline: none;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    border-radius: var(--r-s);
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

/* Césure sur petits écrans (mots français longs) */
@media (max-width: 39.99rem) {
    p, li, dd {
        hyphens: auto;
        -webkit-hyphens: auto;
        hyphenate-limit-chars: 10 4 4;
    }
}

/* 4. COMPOSANTS ------------------------------------------------------------ */
.icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
}

/* La rosace d'origine : trait constant à l'écran, quelle que soit sa taille */
.rosace {
    color: var(--accent-g);
    stroke-width: 1.5px;
    flex: none;
}

/* Libellé technique : chasse fixe, capitales, court (3 mots au plus) */
.label {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0 1.25rem;
    border: 0;
    border-radius: var(--r-s);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.btn .icon {
    width: 1.125rem;
    height: 1.125rem;
    transition: transform 0.15s ease;
}

.btn--primary {
    background: var(--accent);
    color: var(--on-accent);
}

.btn--light {
    background: var(--night-btn);
    color: var(--on-night-btn);
}

@media (hover: hover) {
    .btn--primary:hover {
        background: color-mix(in srgb, var(--accent) 85%, var(--ink));
    }

    .btn--light:hover {
        background: color-mix(in srgb, var(--night-btn) 88%, var(--night));
    }

    .btn:hover .icon {
        transform: translateX(3px);
    }
}

.link-strong,
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    font-weight: 600;
}

.link-arrow .icon {
    width: 1rem;
    height: 1rem;
}

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--r-s);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}

@media (hover: hover) {
    .icon-btn:hover {
        background: var(--sunken);
    }
}

/* Catégorie d'un projet ou émetteur d'un certificat */
.badge {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
}

/* États (frise, options du camping) : petite étiquette, sans code rouge ou vert */
.badge--live,
.badge--no {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    line-height: 1.3;
    white-space: nowrap;
}

.badge--live {
    background: var(--accent-weak);
    color: var(--accent);
}

.badge--no {
    border: 1px solid var(--rule-strong);
    color: var(--muted);
}

/* « En cours » : la seule touche ambrée du site */
.status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--signal);
}

.status::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
}

/* Puces : un petit trait bleu */
.project__points {
    display: grid;
    gap: 0.65rem;
}

.project__points li {
    position: relative;
    padding-left: 1.25rem;
}

.project__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.78em;
    width: 0.6rem;
    height: 2px;
    border-radius: 1px;
    background: var(--accent-g);
}

/* Leçon (« Ce que j'en retiens », « Limite ») : le seul usage de l'italique */
.callout__note {
    font-style: italic;
    color: var(--ink);
}

/* Pied de carte : compétences, puis outils */
.project__foot {
    display: grid;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
}

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

.chips a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 0.8rem 0 0.45rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-s);
    background: var(--surface);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.chip__code {
    padding: 0.3rem 0.4rem;
    border-radius: 4px;
    background: var(--accent-weak);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 600;
    line-height: 1;
}

@media (hover: hover) {
    .chips a:hover {
        border-color: var(--accent);
        background: var(--accent-weak);
    }
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.9rem;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    line-height: 1.6;
    color: var(--ink-2);
}

/* Chaque outil précédé d'un petit carré bleu : lisible même quand la ligne se coupe */
.tags li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.tags li::before {
    content: "";
    width: 4px;
    height: 4px;
    background: var(--accent-g);
}

/* 5. EN-TÊTE : barre pleine largeur, opaque sur mobile ------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
}

@media (min-width: 64rem) and (hover: hover) {
    .site-header {
        background: color-mix(in srgb, var(--bg) 88%, transparent);
        -webkit-backdrop-filter: saturate(1.4) blur(10px);
        backdrop-filter: saturate(1.4) blur(10px);
    }
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-height: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.75rem;
    margin-right: auto;
    color: var(--ink);
    font-size: 1.0625rem;
    line-height: 1;
    text-decoration: none;
}

.brand__mark {
    width: 1.5rem;
    height: 1.5rem;
    stroke-width: 1.4px;
}

.brand {
    transition: opacity 0.2s ease, visibility 0s;
}

.brand__text {
    white-space: nowrap;
}

.brand__first {
    font-style: italic;
    font-weight: 400;
}

.brand__last {
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Sur l'accueil, la marque n'apparaît dans la barre qu'une fois le grand titre passé */
.is-home:not(.show-name) .brand {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s 0.2s;
}

/* 2. Très petits écrans : la marque tient sur une ligne */
@media (max-width: 22.49rem) {
    .header-inner { gap: 0; }
    .brand { gap: 0.45rem; }
    .lang-switch__link { gap: 0.35rem; padding-inline: 0.4rem; }
}

/* Ordre sur mobile : marque, langue, thème, menu (au bord droit) */
.lang-nav { order: 1; }
.theme-toggle { order: 2; }
.site-nav { order: 3; }

.nav-toggle {
    display: none;
}

.nav-toggle .icon--close,
.nav-toggle[aria-expanded="true"] .icon--open {
    display: none;
}

.nav-toggle[aria-expanded="true"] .icon--close {
    display: block;
}

.nav-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
}

.nav-menu a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--ink-2);
    font-weight: 500;
    text-decoration: none;
}

.nav-index {
    margin-right: 0.4rem;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
}

/* Menu déroulant (moins de 64rem, avec JavaScript) */
@media (max-width: 63.99rem) {
    html.js .nav-toggle {
        display: inline-grid;
    }

    html.js .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        gap: 0;
        padding: 0.5rem var(--gutter) 1rem;
        border-bottom: 1px solid var(--rule);
        background: var(--bg);
        box-shadow: 0 16px 32px rgb(10 25 45 / 0.12);
    }

    html.js .nav-menu.is-open {
        display: flex;
    }

    html.js .nav-menu li + li {
        border-top: 1px solid var(--rule);
    }

    html.js .nav-menu a {
        display: flex;
        min-height: 3.25rem;
        color: var(--ink);
        font-size: 1.125rem;
        font-weight: 600;
    }

    html.js .nav-menu .nav-index {
        width: 2rem;
        margin-right: 0;
    }

    /* Sans JavaScript, la navigation passe sous la barre */
    html:not(.js) .header-inner {
        flex-wrap: wrap;
    }

    html:not(.js) .site-nav {
        order: 4;
        width: 100%;
    }
}

/* Navigation horizontale (64rem et plus) */
@media (min-width: 64rem) {
    .lang-nav,
    .theme-toggle,
    .site-nav {
        order: 0;
    }

    .site-nav {
        margin-right: 1rem;
    }

    .nav-menu {
        gap: 1.5rem;
    }

    .nav-menu a {
        font-size: 0.9375rem;
        box-shadow: inset 0 -2px transparent;
        transition: color 0.15s ease, box-shadow 0.15s ease;
    }

    .nav-menu a[aria-current] {
        color: var(--ink);
        box-shadow: inset 0 -2px var(--accent-g);
    }

    @media (hover: hover) {
        .nav-menu a:hover {
            color: var(--ink);
            box-shadow: inset 0 -2px var(--rule-strong);
        }
    }
}

/* Sélecteur de langue : drapeau + code en chasse fixe */
.lang-switch {
    display: flex;
}

.lang-switch__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0 0.6rem;
    border-radius: var(--r-s);
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.lang-switch__link[aria-current] {
    color: var(--ink);
    font-weight: 700;
}

@media (hover: hover) {
    .lang-switch__link:hover {
        background: var(--sunken);
        color: var(--ink);
    }
}

.flag {
    width: 1.25rem;
    height: 0.875rem;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--rule);
}

/* Petits écrans : seule l'autre langue est proposée */
@media (max-width: 29.99rem) {
    .lang-switch li:has([aria-current]) {
        display: none;
    }
}

.theme-toggle .icon--sun {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .icon--moon {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .icon--sun {
    display: block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon--moon {
        display: none;
    }

    :root:not([data-theme="light"]) .theme-toggle .icon--sun {
        display: block;
    }
}

/* Sans JavaScript, le bouton de thème n'a aucun effet : on le masque */
html:not(.js) .theme-toggle {
    display: none;
}

/* 6. ACCUEIL --------------------------------------------------------------- */
.hero {
    padding-block: 2rem 0;
}

.hero__grid {
    display: grid;
    gap: 1.5rem;
}

.hero__rosace {
    width: 3.5rem;
    height: 3.5rem;
    color: var(--accent-g);
    stroke-width: 2.4;
}

.hero__title {
    display: grid;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.hero__name {
    font-size: var(--fs-h1);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.hero__role {
    color: var(--ink-2);
    font-size: var(--fs-role);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* Fiche Parcours */
.sheet {
    padding: 1.25rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-m);
    background: var(--surface);
}

.sheet__title {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.steps li {
    display: grid;
    gap: 0.1rem;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--rule);
}

.steps__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.6rem;
    font-weight: 600;
    line-height: 1.35;
}

.steps__level {
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.45;
}

.steps__extra {
    margin-top: 0.85rem;
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
}

.hero__bio {
    display: grid;
    gap: 0.9rem;
    max-width: 62ch;
    color: var(--ink-2);
}

.hero__bio p:first-child {
    color: var(--ink);
    font-size: var(--fs-lead);
    line-height: 1.55;
}

@media (min-width: 64rem) {
    .hero {
        padding-top: 4.5rem;
    }

    .hero__grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
        grid-template-areas:
            "top     sheet"
            "bio     sheet"
            "actions sheet";
        grid-template-rows: auto auto 1fr;
        column-gap: 4rem;
        row-gap: 1.75rem;
        align-items: start;
    }

    .hero__top { grid-area: top; }
    .sheet { grid-area: sheet; padding: 1.5rem 1.75rem; margin-top: 5.5rem; }
    .hero__bio { grid-area: bio; }
    .hero__actions { grid-area: actions; }

    .hero__rosace {
        width: 4.5rem;
        height: 4.5rem;
        stroke-width: 2;
    }
}

/* 7. SECTIONS ---------------------------------------------------------------- */
.section {
    padding-top: var(--space-section);
}

.section__head {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule-strong);
}

.section__index {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.08em;
}

.section__title {
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.section__lead {
    max-width: 60ch;
    color: var(--ink-2);
    font-size: var(--fs-lead);
    line-height: 1.5;
}

@media (min-width: 64rem) {
    .section__head {
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        column-gap: 4rem;
        margin-bottom: 3rem;
        padding-top: 1.25rem;
    }

    .section__index { grid-column: 1 / -1; }
    .section__title { grid-column: 1; }

    .section__lead {
        grid-column: 2;
        grid-row: 2;
        align-self: end;
    }
}

/* Sous-titre de sous-partie (outils, certificats, après 2027) */
.toolbox__title {
    margin-bottom: 1rem;
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* 8. EXPÉRIENCES ------------------------------------------------------------ */
.exp {
    display: grid;
    gap: 1rem;
    padding-block: 2rem;
    border-top: 1px solid var(--rule);
}

.exp:first-child {
    padding-top: 0;
    border-top: 0;
}

.exp__aside {
    display: grid;
    align-content: start;
    gap: 0.2rem;
}

.exp__date {
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.exp__duration {
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.45;
}

.exp__body {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.exp__body > * {
    max-width: var(--measure);
}

.exp__title {
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.exp__org {
    margin-top: -0.5rem;
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.5;
}

.exp__org span {
    color: var(--muted);
    font-weight: 400;
}

@media (min-width: 64rem) {
    .exp {
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        column-gap: 4rem;
    }

    .exp__aside {
        position: sticky;
        top: calc(var(--header-h) + 1.5rem);
    }
}

/* Étude de cas : le seul encadré de la section */
.callout--case {
    display: grid;
    gap: 0.75rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent-g);
    border-radius: 0 var(--r-s) var(--r-s) 0;
    background: var(--surface);
}

.callout__title {
    font-size: var(--fs-h4);
    font-weight: 600;
    line-height: 1.4;
}

.callout--case .callout__note {
    padding-top: 0.75rem;
    border-top: 1px solid var(--rule);
}

@media (min-width: 40rem) {
    .callout--case {
        padding: 1.25rem 1.5rem;
    }
}

.exp-others {
    display: grid;
    gap: 0.4rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
}

.exp-others p {
    color: var(--ink-2);
}

.exp-others__date {
    margin-right: 0.5rem;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 500;
}

@media (min-width: 64rem) {
    .exp-others {
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        column-gap: 4rem;
    }
}

/* 9. COMPÉTENCES : une matrice plutôt que des cartes ---------------------- */
.skills-grid {
    border-bottom: 1px solid var(--rule);
}

.skill {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    column-gap: 1rem;
    padding-block: 1.25rem;
    border-top: 1px solid var(--rule);
}

.skill__code {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-s);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
}

.skill--parcours .skill__code {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}

.skill__kicker,
.skill__title,
.skill__proofs {
    grid-column: 2;
}

.skill__kicker {
    margin-bottom: 0.2rem;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.skill__title {
    font-size: var(--fs-h4);
    font-weight: 600;
    line-height: 1.35;
}

.skill:not(.skill--parcours) .skill__title {
    display: flex;
    align-items: center;
    min-height: 3rem;
}

.skill__proofs {
    margin-top: 0.6rem;
}

/* Mobile et tablette : les preuves prennent toute la largeur, sous le code */
@media (max-width: 63.99rem) {
    .skill__proofs {
        grid-column: 1 / -1;
        margin-top: 0.875rem;
    }
}

.skill__proofs ul {
    display: grid;
    gap: 0.5rem;
}

.skill__proofs li {
    position: relative;
    padding-left: 1.4rem;
    line-height: 1.5;
}

.skill__proofs li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--accent-g);
}

.skill__proofs a {
    padding-block: 0.15rem;
    color: var(--ink-2);
    text-decoration-color: color-mix(in srgb, var(--ink-2) 35%, transparent);
}

@media (hover: hover) {
    .skill__proofs a:hover {
        color: var(--accent);
        text-decoration-color: currentColor;
    }
}

@media (min-width: 64rem) {
    .skill {
        grid-template-columns: 3rem minmax(0, 4fr) minmax(0, 7fr);
        grid-template-rows: auto auto 1fr;
        column-gap: 2rem;
        padding-block: 1.5rem;
    }

    .skill__proofs {
        grid-column: 3;
        grid-row: 1 / -1;
        margin-top: 0;
        padding-top: 0.6rem;
    }
}

/* « Ce que j'utilise » : liste clé / valeur */
.toolbox {
    margin-top: 3rem;
}

.toolbox__grid {
    border-top: 1px solid var(--rule);
}

.toolbox__group {
    display: grid;
    gap: 0.3rem;
    padding-block: 1rem;
    border-bottom: 1px solid var(--rule);
}

.toolbox__group h4 {
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.toolbox__group p {
    max-width: var(--measure);
    color: var(--ink-2);
}

.toolbox__group--seen h4,
.toolbox__group--seen p {
    color: var(--muted);
}

@media (min-width: 48rem) {
    .toolbox__group {
        grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
        column-gap: 2rem;
        align-items: baseline;
    }
}

/* 10. PROJETS ----------------------------------------------------------------- */
.projects {
    display: grid;
    column-gap: 2.5rem;
}

.project {
    min-width: 0;
    padding-block: 2.5rem;
    border-top: 1px solid var(--rule);
}

.projects > .project:first-child {
    padding-top: 0;
    border-top: 0;
}

.project__body {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}

.project__body > p,
.project__body > .project__points,
.project__body > .callout,
.project__body > .roadmap {
    max-width: var(--measure);
}

.project__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.project__title {
    margin-top: -0.5rem;
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.project--flagship .project__title {
    font-size: var(--fs-h3-lg);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.project__intro {
    font-size: var(--fs-lead);
    line-height: 1.55;
}

.project__aside {
    color: var(--ink-2);
    font-size: var(--fs-sm);
}

/* Projets universitaires : cartes courtes en grille, sans cadre */
@media (min-width: 64rem) {
    .projects {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .project--flagship {
        grid-column: 1 / -1;
    }
}

@media (min-width: 80rem) {
    .projects {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Image cliquable (schéma du Bistrot) */
.project__media {
    position: relative;
    display: block;
    padding: 0.5rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-m);
    background: #ffffff;
}

.project__media img {
    width: 100%;
    border-radius: 6px;
}

.project__zoom {
    position: absolute;
    right: 0.375rem;
    bottom: 0.375rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--r-s);
    background: #ffffff;
    color: #1a5a96;
    box-shadow: 0 0 0 1px #c5ced9;
}

.project__zoom .icon {
    width: 1rem;
    height: 1rem;
}

/* « Pourquoi j'héberge mes services moi-même » : un filet, pas une boîte */
.callout {
    display: grid;
    gap: 0.6rem;
    padding-left: 1.125rem;
    border-left: 3px solid var(--accent-g);
}

.services {
    display: grid;
    gap: 0.2rem;
    color: var(--ink-2);
    font-size: var(--fs-sm);
}

.services li {
    position: relative;
    padding-left: 1rem;
}

.services li::before {
    content: "";
    position: absolute;
    left: 0.1rem;
    top: 0.7em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-g);
}

@media (min-width: 40rem) {
    .services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2rem;
    }
}

/* Schéma du homelab : le pointillé, c'est le tunnel chiffré */
.topo {
    display: grid;
    gap: 1rem;
}

.topo__sites {
    position: relative;
    display: grid;
    gap: 1rem;
    padding-left: 1.5rem;
}

.topo__sites::before {
    content: "";
    position: absolute;
    left: 0.4rem;
    top: 0.75rem;
    bottom: -2.4rem;
    border-left: 2px dashed var(--accent-g);
}

.topo__site {
    position: relative;
    padding: 0.875rem 1rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-s);
    background: var(--surface);
}

.topo__site::before {
    content: "";
    position: absolute;
    left: calc(-1.5rem + 0.05rem);
    top: 1.05rem;
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid var(--accent-g);
    border-radius: 50%;
    background: var(--bg);
}

.topo__site--main {
    border: 2px solid var(--accent-g);
}

.topo__site--main::before {
    left: calc(-1.5rem - 0.05rem);
    background: var(--accent-g);
}

.topo__tag {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.topo__tag .rosace {
    width: 1.1rem;
    height: 1.1rem;
    stroke-width: 1.25px;
}

.topo__title {
    margin-top: 0.15rem;
    font-size: var(--fs-h4);
    font-weight: 600;
    line-height: 1.35;
}

.topo__site ul {
    display: grid;
    gap: 0.15rem;
    margin-top: 0.4rem;
    color: var(--ink-2);
    font-size: var(--fs-sm);
    line-height: 1.45;
}

.topo__site li {
    position: relative;
    padding-left: 0.9rem;
}

.topo__site li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 0.45rem;
    height: 1.5px;
    background: var(--rule-strong);
}

.topo__mesh {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding-left: 1.5rem;
    color: var(--ink-2);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.topo__mesh .icon {
    position: absolute;
    left: -0.1rem;
    top: 0.05rem;
    width: 1.125rem;
    height: 1.125rem;
    padding: 1px;
    background: var(--bg);
    color: var(--accent-g);
}

.topo__mesh strong {
    color: var(--ink);
}

.topo__caption {
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

/* Une plaque derrière le schéma dès qu'il y a la place */
@media (min-width: 40rem) {
    .topo,
    .chain {
        padding: 1.5rem;
        border: 1px solid var(--rule);
        border-radius: var(--r-m);
        background: var(--sunken);
    }

    .topo__site::before,
    .topo__mesh .icon {
        background: var(--sunken);
    }

    .topo__site--main::before {
        background: var(--accent-g);
    }
}

@media (min-width: 64rem) {
    .topo {
        padding: 2rem;
    }

    .topo__sites {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
        padding-left: 0;
        padding-bottom: 2.25rem;
    }

    .topo__sites::before {
        left: 16.66%;
        right: 16.66%;
        top: auto;
        bottom: 0;
        border-left: 0;
        border-top: 2px dashed var(--accent-g);
    }

    .topo__site::before {
        display: none;
    }

    .topo__site::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: calc(-2.25rem - 2px);
        height: 2.25rem;
        border-left: 2px dashed var(--accent-g);
    }

    .topo__mesh {
        justify-content: center;
        padding-left: 0;
        text-align: center;
    }

    .topo__mesh .icon {
        position: static;
        padding: 0;
    }

    .topo__caption {
        text-align: center;
    }
}

/* Capture du tableau de bord : fond sombre d'origine, sans cadre blanc */
.shot {
    display: grid;
    gap: 0.6rem;
}

.shot .project__media {
    padding: 0;
    border-color: var(--rule);
    background: #0d1117;
    overflow: hidden;
}

.shot .project__media img {
    border-radius: 0;
}

/* Sécurité et exploitation : libellé et liste */
.project__block {
    display: grid;
    gap: 0.75rem;
    max-width: var(--measure);
}

/* Récits repliables */
.stories {
    border-top: 1px solid var(--rule);
}

.story {
    border-bottom: 1px solid var(--rule);
}

.story summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1rem;
    min-height: 3.5rem;
    padding-block: 0.875rem;
    list-style: none;
    cursor: pointer;
}

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

.story__title {
    grid-column: 1;
    font-size: var(--fs-h4);
    font-weight: 600;
    line-height: 1.35;
}

.story__teaser {
    grid-column: 1;
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.45;
}

/* Icône + / − dans une cible de 44 px */
.story summary::after {
    content: "";
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--rule-strong);
    border-radius: 50%;
    background:
        linear-gradient(var(--accent), var(--accent)) center / 0.875rem 2px no-repeat,
        linear-gradient(var(--accent), var(--accent)) center / 2px 0.875rem no-repeat;
    transition: transform 0.15s ease;
}

.story[open] summary::after {
    background: linear-gradient(var(--accent), var(--accent)) center / 0.875rem 2px no-repeat;
}

@media (hover: hover) {
    .story summary:hover .story__title {
        color: var(--accent);
    }

    .story summary:hover::after {
        border-color: var(--accent);
    }
}

.story__body {
    display: grid;
    gap: 0.85rem;
    max-width: var(--measure);
    padding-bottom: 1.5rem;
}

.story[open] .story__body {
    padding-left: 1rem;
    border-left: 2px solid var(--rule-strong);
}

.story__body .callout__note {
    padding-top: 0.75rem;
    border-top: 1px solid var(--rule);
}

/* Feuille de route */
.roadmap {
    display: grid;
    gap: 0.35rem;
}

.roadmap p {
    color: var(--ink-2);
}

/* Camping : schéma en chaîne et comparaison d'options */
.project__split {
    display: grid;
    gap: 1.75rem;
}

@media (min-width: 64rem) {
    .project__split {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        column-gap: 2.5rem;
        align-items: start;
    }
}

.chain__list {
    display: grid;
    gap: 1.5rem;
}

.chain__node {
    position: relative;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-s);
    background: var(--surface);
    text-align: center;
}

/* Liaison : réseau des campeurs (gris) + VLAN des caméras (bleu) */
.chain__node + .chain__node::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(-1.5rem - 1px);
    width: 8px;
    height: 1.5rem;
    border-left: 2px solid var(--rule-strong);
    border-right: 2px solid var(--accent-g);
    transform: translateX(-50%);
}

/* Box → routeur : le VLAN des caméras naît sur le routeur, cette liaison n'en porte pas */
.chain__node + .chain__node--wan::before {
    width: 2px;
    border-right: 0;
}

.chain__node--pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0;
    border: 0;
    background: none;
}

.chain__node--pair > div {
    padding: 0.75rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-s);
    background: var(--surface);
}

.chain__node--pair > .chain__chosen {
    border: 2px solid var(--accent-g);
}

@media (max-width: 23.99rem) {
    .chain__node--pair {
        grid-template-columns: minmax(0, 1fr);
    }
}

.chain__name {
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.35;
}

.chain__detail {
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.4;
}

.chain__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin-top: 1.25rem;
    color: var(--ink-2);
    font-size: var(--fs-sm);
}

.lane::before {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 4px;
    margin-right: 0.5rem;
    border-radius: 2px;
    background: var(--rule-strong);
    vertical-align: middle;
}

.lane--iot::before {
    background: var(--accent-g);
}

.chain .topo__caption {
    margin-top: 0.5rem;
}

.decision {
    display: grid;
    gap: 0.75rem;
}

.options {
    display: grid;
}

.options {
    border-bottom: 1px solid var(--rule);
}

.option {
    padding: 0.875rem 0;
    border-top: 1px solid var(--rule);
}

.option--chosen {
    padding: 0.875rem 0 0.875rem 1rem;
    border-top: 0;
    border-left: 3px solid var(--accent-g);
}

.option__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
    font-weight: 600;
    line-height: 1.4;
}

.option p + p {
    margin-top: 0.35rem;
    color: var(--ink-2);
}

/* 11. PARCOURS : frise, certificats, après 2027 --------------------------- */
.timeline {
    position: relative;
}

.timeline__item {
    position: relative;
    padding: 0 0 2.25rem 1.75rem;
}

.timeline__item:last-child {
    padding-bottom: 0;
}

/* Point : plein pour l'étape en cours, creux pour les autres */
.timeline__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3rem;
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid var(--accent-g);
    border-radius: 50%;
    background: var(--bg);
}

.timeline__item--current::before {
    background: var(--accent-g);
}

.timeline__item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(0.375rem - 0.5px);
    top: 1.35rem;
    bottom: 0.3rem;
    border-left: 1px solid var(--rule-strong);
}

.timeline__date {
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.06em;
}

.timeline__card {
    margin-top: 0.5rem;
}

.timeline__content {
    display: grid;
    gap: 0.4rem;
    max-width: var(--measure);
}

.timeline__badges {
    margin-bottom: 0.15rem;
}

.timeline__badges .badge--live {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    background: none;
    color: var(--signal);
    font-weight: 600;
}

.timeline__badges .badge--live::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
}

.timeline__title {
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.timeline__place {
    color: var(--muted);
    font-size: var(--fs-sm);
}

.timeline__content p:not([class]) {
    color: var(--ink-2);
}

@media (min-width: 64rem) {
    .timeline__item {
        display: grid;
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        column-gap: 4rem;
        padding-left: 0;
    }

    .timeline__item::before {
        left: calc((100% - 4rem) / 3 + 4rem - 1.75rem);
    }

    .timeline__item:not(:last-child)::after {
        left: calc((100% - 4rem) / 3 + 4rem - 1.75rem + 0.375rem - 0.5px);
    }

    .timeline__date {
        padding-top: 0.15rem;
    }

    .timeline__card {
        margin-top: 0;
    }
}

.certs,
.goals {
    margin-top: 3.5rem;
}

.certs__grid,
.goals__grid {
    display: grid;
    column-gap: 2.5rem;
}

.cert,
.goal {
    display: grid;
    align-content: start;
    gap: 0.6rem;
    padding-block: 1.25rem;
    border-top: 1px solid var(--rule);
}

@media (min-width: 48rem) {
    .certs__grid,
    .goals__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.cert__title,
.goal__title {
    font-size: var(--fs-h4);
    font-weight: 600;
    line-height: 1.35;
}

.cert__text,
.goal p {
    max-width: var(--measure);
    color: var(--ink-2);
}

.cert .project__meta {
    margin-bottom: -0.25rem;
}

/* Scores SecNumacadémie : tableau compact, chiffres alignés */
.scores {
    border-top: 1px solid var(--rule);
}

.scores li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.5rem;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-2);
    font-size: var(--fs-sm);
}

.scores strong {
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.interests {
    margin-top: 3.5rem;
}

.interests__more {
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
}

.interests__more p {
    max-width: var(--measure);
    color: var(--ink-2);
}

/* 12. CONTACT : panneau « nuit », titre au niveau des autres sections ----- */
.contact {
    padding-top: var(--space-section);
}

.contact__grid {
    position: relative;
    display: grid;
    gap: 2rem;
    overflow: hidden;
    padding: 2rem 1.25rem;
    border: 1px solid var(--night-rule);
    border-radius: var(--r-m);
    background: var(--night);
    color: var(--on-night);
}

.contact__intro,
.contact__form {
    position: relative;
    min-width: 0;
}

.contact .rosace--wm {
    position: absolute;
    top: -3rem;
    right: -3rem;
    display: none;
    width: 14rem;
    height: 14rem;
    color: var(--night-accent);
    stroke-width: 1px;
    opacity: 0.22;
    pointer-events: none;
}

@media (max-width: 39.99rem) {
    .contact .rosace--wm {
        display: block;
        top: -2rem;
        right: -2.5rem;
        width: 9rem;
        height: 9rem;
        opacity: 0.16;
    }
}

.contact .section__index {
    color: var(--night-accent);
}

.contact__kicker {
    margin-top: 0.75rem;
    color: var(--on-night-2);
    font-size: var(--fs-sm);
}

.contact__title {
    margin-top: 0.15rem;
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.contact__text {
    max-width: 44ch;
    margin-top: 0.75rem;
    color: var(--on-night-2);
}

.contact__channels {
    margin-top: 1.5rem;
    border-top: 1px solid var(--night-rule);
}

.contact__channels li {
    display: grid;
    gap: 0.1rem;
    padding-block: 0.6rem;
    border-bottom: 1px solid var(--night-rule);
}

.contact__label {
    color: var(--on-night-2);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.contact a {
    color: var(--on-night);
    text-decoration-color: color-mix(in srgb, var(--on-night) 55%, transparent);
}

.contact__channels a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.contact :focus-visible {
    outline-color: var(--night-accent);
}

.tally-gate {
    display: grid;
    justify-items: start;
    gap: 1rem;
    color: var(--on-night-2);
}

.contact__form iframe {
    display: block;
    width: 100%;
    min-height: 32.5rem;
    border: 0;
    border-radius: var(--r-s);
    background: #ffffff;
    color-scheme: light;
}

.contact__fallback {
    margin-top: 0.75rem;
    color: var(--on-night-2);
    font-size: var(--fs-sm);
}

@media (min-width: 40rem) {
    .contact__grid {
        padding: 2.5rem;
    }

    .contact .rosace--wm {
        display: block;
    }

    .contact__channels li {
        grid-template-columns: 6.5rem minmax(0, 1fr);
        align-items: center;
    }
}

@media (min-width: 64rem) {
    .contact__grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        column-gap: 4rem;
        padding: 3.5rem;
    }

    .contact__form {
        align-self: center;
    }
}

/* 13. PIED DE PAGE ------------------------------------------------------------ */
.site-footer {
    margin-top: var(--space-section);
    border-top: 1px solid var(--rule);
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1.5rem;
    padding-block: 1.25rem 2rem;
    color: var(--muted);
    font-size: var(--fs-sm);
}

.footer__copy {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-right: auto;
}

.footer__copy .rosace {
    width: 1.125rem;
    height: 1.125rem;
    stroke-width: 1.25px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--ink-2);
}

/* Détail replié dans une expérience (« Voir le détail du stage ») */
.more summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    color: var(--accent);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

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

.more summary::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.more[open] summary::before {
    transform: rotate(45deg);
}

@media (hover: hover) {
    .more summary:hover {
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }
}

.more__body {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-left: 1rem;
    border-left: 2px solid var(--rule-strong);
}

/* Étude de cas du homelab (page dédiée) */
.link-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    font-weight: 600;
}

.link-back .icon {
    width: 1rem;
    height: 1rem;
    transform: rotate(180deg);
}

.study__head {
    margin-top: 1.5rem;
}

.study__meta {
    color: var(--muted);
    font-size: var(--fs-sm);
}

.study__lead {
    max-width: var(--measure);
    margin-top: 0.5rem;
    font-size: var(--fs-lead);
    line-height: 1.55;
}

.study__section {
    display: grid;
    gap: 1.25rem;
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
}

.study__section > p,
.study__section > ul,
.study__section > .callout {
    max-width: var(--measure);
}

.study__title {
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.study__story {
    display: grid;
    gap: 0.4rem;
    max-width: var(--measure);
}

.study__story + .study__story {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}

.study__story-meta {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.04em;
}

.study__story-title {
    font-size: var(--fs-h4);
    font-weight: 600;
    line-height: 1.35;
}

.study__story .story__body {
    padding-bottom: 0;
}

.study__foot {
    gap: 0.9rem;
}

/* 14. VISIONNEUSE ---------------------------------------------------------------- */
.lightbox {
    max-width: 100vw;
    max-height: 100vh;
    margin: auto;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
}

.lightbox::backdrop {
    background: rgb(5 12 20 / 0.9);
}

.lightbox figure {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
}

.lightbox img {
    width: auto;
    max-width: min(94vw, 80rem);
    max-height: 80vh;
    border-radius: var(--r-m);
    background: #ffffff;
    box-shadow: 0 20px 60px rgb(0 0 0 / 0.5);
}

.lightbox figcaption {
    max-width: 60ch;
    padding-inline: 1rem;
    color: #e7edf4;
    font-size: var(--fs-sm);
    text-align: center;
}

.lightbox__close {
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;
    border-radius: 50%;
    background: #ffffff;
    color: #0d1b2a;
}

@media (hover: hover) {
    .lightbox__close:hover {
        background: #e6f0fa;
    }
}

.lightbox :focus-visible {
    outline-color: #8cc4f5;
}

/* 15. PAGES LÉGALES ---------------------------------------------------------------- */
.page {
    padding-top: 2.5rem;
}

@media (min-width: 64rem) {
    .page {
        padding-top: 4.5rem;
    }
}

.page__head {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule-strong);
}

.page__title {
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.page__date {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.04em;
}

.prose {
    max-width: var(--measure);
}

.prose h2 {
    margin-top: 2.25rem;
    margin-bottom: 0.5rem;
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.3;
}

.prose h2:first-child {
    margin-top: 0;
}

.prose p,
.prose li {
    color: var(--ink-2);
}

.prose strong {
    color: var(--ink);
}

.prose ul {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.prose li {
    position: relative;
    padding-left: 1.25rem;
}

.prose li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.78em;
    width: 0.6rem;
    height: 2px;
    background: var(--accent-g);
}

.prose ul + p {
    margin-top: 0.85em;
}

/* 16. MOUVEMENT ---------------------------------------------------------------- */
/* La rosace se dessine une fois à l'ouverture, pétale après pétale */
@media (prefers-reduced-motion: no-preference) {
    .hero__rosace > * {
        animation: draw-petal 0.9s cubic-bezier(0.55, 0, 0.25, 1) both;
    }

    .hero__rosace > :nth-child(2) { animation-delay: 0.08s; }
    .hero__rosace > :nth-child(3) { animation-delay: 0.16s; }
    .hero__rosace > :nth-child(4) { animation-delay: 0.24s; }
    .hero__rosace > :nth-child(5) { animation-delay: 0.32s; }
    .hero__rosace > :nth-child(6) { animation-delay: 0.40s; }
    .hero__rosace > :nth-child(7) { animation-delay: 0.48s; }
    .hero__rosace > :nth-child(8) { animation-delay: 0.56s; }
    .hero__rosace > :nth-child(9) { animation-delay: 0.64s; }

    html {
        scroll-behavior: smooth;
    }
}

@keyframes draw-petal {
    0% {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
    }

    99.9% {
        stroke-dasharray: 1;
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* 17. IMPRESSION (un recruteur peut imprimer la page comme un CV) ------------- */
@media print {
    .site-header,
    .skip-link,
    .hero__actions,
    .contact__form,
    .project__zoom,
    .lightbox,
    .rosace--wm,
    .story summary::after {
        display: none !important;
    }

    :root {
        --bg: #ffffff;
        --surface: #ffffff;
        --sunken: #ffffff;
        --ink: #000000;
        --ink-2: #222222;
        --muted: #444444;
        --night: #ffffff;
        --on-night: #000000;
        --on-night-2: #222222;
        --night-rule: #cccccc;
    }

    body {
        font-size: 10.5pt;
    }

    .section,
    .contact,
    .hero {
        padding-top: 1.25rem;
    }

    .story__body {
        display: grid !important;
    }

    .exp,
    .project,
    .skill,
    .cert,
    .goal,
    .topo,
    .timeline__item {
        break-inside: avoid;
    }

    .footer-links a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
    }
}