/* mathisleboucher.fr
   Base neutre chaude, un seul accent (orange brûlé).
   Formes : boutons pilule, cartes 16px, champs 10px. */

/* ----- Polices (auto-hébergées, variables) ----- */
@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
    font-weight: 300 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+2013-2014, U+2019, U+201C-201D;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
    font-weight: 300 700;
    font-display: swap;
    unicode-range: U+0100-024F, U+0152-0153;
}
@font-face {
    font-family: 'Outfit';
    src: url('../fonts/outfit-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+2013-2014, U+2019, U+201C-201D;
}
@font-face {
    font-family: 'Outfit';
    src: url('../fonts/outfit-latin-ext.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0100-024F, U+0152-0153;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
    font-weight: 100 800;
    font-display: swap;
    unicode-range: U+0000-00FF;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
    font-weight: 100 800;
    font-display: swap;
    unicode-range: U+0100-024F, U+0152-0153;
}

/* ----- Variables ----- */
:root {
    --bg: #FAFAF7;
    --bg-soft: #F1F0EA;
    --surface: #FFFFFF;
    --ink: #131315;
    --ink-2: #56565E;
    --ink-3: #8B8B93;
    --line: rgba(19, 19, 21, 0.10);
    --line-strong: rgba(19, 19, 21, 0.24);
    --accent: #D4511E;
    --accent-strong: #B03F13;
    --accent-soft: rgba(212, 81, 30, 0.10);
    --on-accent: #FFFFFF;

    /* États : succès / danger */
    --success: #1E7F4B;
    --success-soft: rgba(30, 127, 75, 0.10);
    --danger: #BE3434;
    --danger-soft: rgba(190, 52, 52, 0.09);

    --font-title: 'Space Grotesk', 'Segoe UI', sans-serif;
    --font-body: 'Outfit', 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', monospace;

    --radius-card: 16px;
    --radius-field: 10px;

    --nav-height: 68px;
    --ease-long: 0.7s cubic-bezier(0.16, 1, 0.3, 1);

    /* Footer : encre dans les deux thèmes */
    --footer-bg: #131315;
    --footer-text: #F2F1ED;
    --footer-text-2: rgba(242, 241, 237, 0.55);
    --footer-line: rgba(242, 241, 237, 0.2);
}

/* Prévient le navigateur du thème réellement appliqué : barres de défilement,
   champs de formulaire et menus déroulants natifs suivent alors, au lieu de
   rester clairs sur un site en sombre. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

:root[data-theme="dark"] {
    --bg: #101012;
    --bg-soft: #17171A;
    --surface: #1B1B1F;
    --ink: #F2F1ED;
    --ink-2: #A9A9B1;
    --ink-3: #70707A;
    --line: rgba(242, 241, 237, 0.12);
    --line-strong: rgba(242, 241, 237, 0.28);
    --accent: #E8632F;
    --accent-strong: #F0784B;
    --accent-soft: rgba(232, 99, 47, 0.15);
    --on-accent: #131315;

    --success: #3FAE72;
    --success-soft: rgba(63, 174, 114, 0.14);
    --danger: #E05B5B;
    --danger-soft: rgba(224, 91, 91, 0.13);

    --footer-bg: #0B0B0D;
}

/* ----- Base ----- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-height) + 24px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    font-weight: 380;
    transition: background-color 0.35s ease, color 0.35s ease;
}

h1, h2, h3 {
    font-family: var(--font-title);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
    text-wrap: balance;
}

p { margin: 0; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; } /* prime sur les display des composants */
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

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

/* Le curseur de saisie n'apparaît que là où l'on peut écrire. Partout
   ailleurs il laissait croire qu'un texte était modifiable, y compris dans
   le menu et sur les intitulés. Une liste de classes ne suffisait pas :
   chaque nouveau composant aurait été à ajouter. D'où la règle inverse.
   Les liens et les boutons gardent leur pointeur : la règle du navigateur
   s'applique directement à eux, ce qui prime sur la valeur héritée du body.
   Le texte reste sélectionnable, seul le dessin du pointeur change. */
body { cursor: default; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
textarea,
[contenteditable="true"] { cursor: text; }

/* ----- Barres de défilement (charte : piste encre discrète, pouce orange) ----- */
:root {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) color-mix(in srgb, var(--ink) 8%, transparent);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: color-mix(in srgb, var(--ink) 7%, transparent); }
::-webkit-scrollbar-thumb {
    /* Bordure transparente + clip : pouce orange en retrait de sa piste */
    background: var(--accent);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-strong); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Page figée derrière une fenêtre modale (popup projet, visionneuse).
   position:fixed plutôt que overflow:hidden : seule méthode fiable sur iOS.
   La gouttière compense la largeur de la barre pour éviter tout décalage. */
body.is-locked {
    position: fixed;
    inset-inline: 0;
    width: 100%;
    overflow: hidden;
    padding-right: var(--scroll-gap, 0px);
}

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

.mono {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.accent { color: var(--accent); font-style: normal; }

.container {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(20px, 5vw, 56px);
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    top: -100%;
    left: 16px;
    z-index: 200;
    background: var(--ink);
    color: var(--bg);
    padding: 10px 18px;
    border-radius: 999px;
    text-decoration: none;
    transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

/* Icône teintée par la couleur du texte (fichiers SVG en masque) */
.icon-mask {
    display: inline-block;
    width: 18px; height: 18px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: var(--ico) center / contain no-repeat;
    mask: var(--ico) center / contain no-repeat;
}

/* ----- Boutons ----- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.98rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.25s ease,
                color 0.25s ease, border-color 0.25s ease;
}
.btn:active { transform: scale(0.97); }
/* Icône de bouton : l'écart vient du gap du bouton, jamais d'une espace dans
   le texte. Elle ne se contracte pas quand le libellé manque de place. */
.btn-ico { flex-shrink: 0; }

.btn-solid {
    background: var(--accent);
    color: var(--on-accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 13px 26px;
}
.btn-solid:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

.btn-outline {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 12px 24px;
}
.btn-outline:hover { border-color: var(--ink); }

.btn-text {
    background: none;
    border: none;
    padding: 6px 0;
    color: var(--accent);
    text-decoration: none;
}
.btn-text:hover { color: var(--accent-strong); }

/* ----- Marque ----- */
.brand-mark { display: block; flex-shrink: 0; }
.mark-bg { fill: var(--ink); }
.mark-glyph { stroke: var(--bg); }
.mark-dot { fill: var(--accent); }
.brand-name {
    font-family: var(--font-title);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* Fil de progression de lecture */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 110;
    background: var(--accent);
    transform-origin: left;
    transform: scaleX(0);
}

/* ----- Navigation ----- */
.nav {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease, background-color 0.35s ease;
}
.nav.is-scrolled { border-bottom-color: var(--line); }

.nav-inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(20px, 5vw, 56px);
    height: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
}

.nav-menu { display: flex; align-items: center; gap: 28px; }

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a {
    font-size: 0.95rem;
    font-weight: 480;
    color: var(--ink-2);
    text-decoration: none;
    transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links .nav-cta {
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 8px 18px;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.nav-links .nav-cta:hover {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.theme-toggle:hover { border-color: var(--line-strong); color: var(--ink); }
.theme-toggle:active { transform: scale(0.92); }
:root:not([data-theme="dark"]) .icon-sun { display: none; }
:root[data-theme="dark"] .icon-moon { display: none; }

.nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px; height: 42px;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
}
.nav-burger span {
    display: block;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

@media (max-width: 860px) {
    .nav-burger { display: flex; }
    /* position:absolute (et non fixed) : le backdrop-filter de .nav ferait
       du header le bloc conteneur d'un descendant fixed -> hauteur nulle. */
    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: calc(100vh - var(--nav-height));
        height: calc(100dvh - var(--nav-height));
        flex-direction: column;
        justify-content: center;
        gap: 40px;
        background: var(--bg);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    body.menu-open .nav-menu { opacity: 1; pointer-events: auto; }
    body.menu-open { overflow: hidden; }
    body.menu-open .nav { background: var(--bg); }
    body.menu-open .nav-burger span:first-child { transform: translateY(7px) rotate(45deg); }
    body.menu-open .nav-burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    body.menu-open .nav-burger span:last-child { transform: translateY(-7px) rotate(-45deg); }
    .nav-links { flex-direction: column; gap: 30px; }
    .nav-links a { font-family: var(--font-title); font-size: 1.6rem; color: var(--ink); }
    .nav-links .nav-cta { padding: 12px 32px; }
}

/* ----- Sections ----- */
section { position: relative; }

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: clamp(36px, 6vw, 64px);
}
.section-head h2, .about h2, .contact h2, .testimonials h2 {
    font-size: clamp(1.65rem, 3vw, 2.4rem);
    letter-spacing: -0.03em;
}
.section-note { color: var(--ink-3); font-size: 0.92rem; max-width: 40ch; text-align: right; }
/* Une fois passée sous le titre, la note se lit mieux alignée à gauche */
@media (max-width: 760px) {
    .section-head { align-items: flex-start; }
    .section-note { text-align: left; }
}

.services, .about, .testimonials, .contact {
    padding-block: clamp(60px, 8vw, 104px);
}

/* ----- Hero ----- */
.hero {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding-top: var(--nav-height);
    overflow: clip;
}
.hero-inner { position: relative; z-index: 1; will-change: transform, opacity; }

/* Fond du hero : trame de points + halos orange en dérive lente */
.hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--line-strong) 1px, transparent 1.5px);
    background-size: 28px 28px;
    opacity: 0.5;
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 42% 42%, #000 0%, transparent 72%);
    mask-image: radial-gradient(ellipse 75% 65% at 42% 42%, #000 0%, transparent 72%);
}
.hero-glow {
    position: absolute;
    top: -140px;
    right: -100px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-soft) 0%, transparent 62%);
    animation: glow-drift 16s ease-in-out infinite alternate;
}
.hero-glow-2 {
    top: auto;
    right: auto;
    bottom: -180px;
    left: -140px;
    width: 460px;
    height: 460px;
    opacity: 0.75;
    animation-duration: 22s;
    animation-delay: -8s;
}
@keyframes glow-drift {
    to { transform: translate(-70px, 50px) scale(1.18); }
}


.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    width: 100%;
}

.hero-kicker {
    color: var(--accent);
    margin-bottom: clamp(16px, 3vh, 28px);
}

.hero-title {
    font-size: clamp(2.2rem, 5.2vw, 4.1rem);
    font-weight: 550;
    line-height: 1.02;
    letter-spacing: -0.03em;
}
.hero-title .word { display: block; overflow: hidden; }
.hero-title .word > span { display: inline-block; }

.hero-lead {
    max-width: 48ch;
    margin-top: clamp(16px, 2.8vh, 26px);
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    color: var(--ink-2);
    text-wrap: pretty;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: clamp(24px, 4vh, 36px);
}

.hero-scroll {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.hero-scroll span {
    width: 1px;
    height: 44px;
    background: var(--line-strong);
    overflow: hidden;
    position: relative;
}
.hero-scroll span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform: translateY(-100%);
    animation: scroll-wire 2.2s cubic-bezier(0.6, 0, 0.3, 1) infinite;
}
@keyframes scroll-wire {
    0% { transform: translateY(-100%); }
    55% { transform: translateY(0); }
    100% { transform: translateY(100%); }
}

/* Terminal du hero */
.hero-terminal {
    justify-self: end;
    width: min(100%, 430px);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: #16161A;
    border: 1px solid rgba(242, 241, 237, 0.08);
    box-shadow: 0 24px 60px -32px rgba(19, 19, 21, 0.35);
}
.terminal-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    background: rgba(242, 241, 237, 0.04);
    border-bottom: 1px solid rgba(242, 241, 237, 0.07);
}
.terminal-bar span {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(242, 241, 237, 0.16);
}
.terminal-bar span:first-child { background: #E8632F; }
.terminal-bar .mono { margin-left: 8px; color: rgba(242, 241, 237, 0.4); font-size: 0.66rem; }
.terminal-body {
    margin: 0;
    padding: 20px 22px 24px;
    min-height: 218px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.75;
    color: #E9E7E1;
    white-space: pre-wrap;
}
.terminal-body .prompt { color: #E8632F; }
.terminal-body .cursor {
    display: inline-block;
    width: 8px; height: 1em;
    vertical-align: -2px;
    background: #E8632F;
    animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

html.js .hero-terminal { opacity: 0; transform: translateY(26px); }
html.js.is-loaded .hero-terminal {
    opacity: 1;
    transform: translateY(0);
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s, opacity 0.8s ease 0.35s;
}
/* Le hero fait toute la hauteur de l'écran, mais son contenu n'en occupait
   qu'un gros tiers : 354 px sur 900, soit 546 px de vide. Les éléments
   grossissent donc quand la place le permet.
   Les deux conditions sont nécessaires : sous 800 px de haut, les boutons
   viendraient toucher l'indicateur de scroll (6 px de marge au lieu de 31) ;
   sous 861 px de large, la grille passe sur une colonne et les boutons
   agrandis se répartiraient sur deux lignes. */
@media (min-width: 861px) and (min-height: 800px) {
    .hero-kicker { font-size: 0.8rem; }
    .hero-title { font-size: clamp(2.5rem, 6.1vw, 5.2rem); }
    .hero-lead {
        max-width: 44ch; /* resserré : compense la police plus grande */
        font-size: clamp(1.06rem, 1.55vw, 1.32rem);
    }
    .hero-actions { gap: 22px; }
    .hero-actions .btn { font-size: 1.06rem; }
    .hero-actions .btn-solid,
    .hero-actions .btn-outline { padding: 16px 32px; }
    .hero-terminal { width: min(100%, 500px); }
    .hero-terminal .terminal-body { font-size: 0.92rem; min-height: 252px; }
}

@media (max-width: 860px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-terminal { display: none; }
    .hero-scroll { display: none; } /* chevauchait les actions sur petits écrans */
}

/* Entrée du hero au chargement */
html.js .hero-title .word > span,
html.js .hero-kicker,
html.js .hero-lead,
html.js .hero-actions {
    opacity: 0;
    transform: translateY(110%);
}
html.js .hero-kicker, html.js .hero-lead, html.js .hero-actions { transform: translateY(22px); }
html.js.is-loaded .hero-title .word > span,
html.js.is-loaded .hero-kicker,
html.js.is-loaded .hero-lead,
html.js.is-loaded .hero-actions {
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease;
}
html.js.is-loaded .hero-kicker { transition-delay: 0.05s; }
html.js.is-loaded .hero-title .word:nth-child(1) > span { transition-delay: 0.12s; }
html.js.is-loaded .hero-title .word:nth-child(2) > span { transition-delay: 0.22s; }
html.js.is-loaded .hero-lead { transition-delay: 0.4s; }
html.js.is-loaded .hero-actions { transition-delay: 0.5s; }

/* ----- Services ----- */
.service-list { border-top: 1px solid var(--line); }

.service {
    display: grid;
    grid-template-columns: 52px 1fr 48px;
    align-items: center;
    gap: clamp(16px, 2.5vw, 28px);
    padding-block: clamp(18px, 2.6vw, 26px);
    border-bottom: 1px solid var(--line);
}
.service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
}
.service-icon .icon-mask { width: 24px; height: 24px; }
.service-body { display: flex; flex-direction: column; gap: 6px; }
.service-body h3 {
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    letter-spacing: -0.02em;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-body p { color: var(--ink-2); font-size: 0.95rem; text-wrap: pretty; max-width: 58ch; }

/* Flèche = demande pré-remplie dans le formulaire */
.service-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    color: var(--ink-2);
    font-size: 1.15rem;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease,
                border-color 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.service:hover .service-link, .service-link:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    transform: rotate(45deg);
}
.service:hover .service-body h3 { transform: translateX(6px); }

@media (max-width: 760px) {
    .service { grid-template-columns: 44px 1fr 44px; }
    .service-icon { width: 44px; height: 44px; }
    .service-icon .icon-mask { width: 20px; height: 20px; }
}

/* ----- À propos + parcours ----- */
.about { background: var(--bg-soft); }
.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(32px, 6vw, 80px);
    align-items: start;
}
.about-left {
    position: sticky;
    top: calc(var(--nav-height) + 40px);
}
.about-photo {
    margin: 22px 0 0;
    border-radius: var(--radius-card);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    max-width: 340px;
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-text {
    margin-top: 20px;
    font-size: 0.98rem;
    color: var(--ink-2);
    max-width: 46ch;
    text-wrap: pretty;
}
.about-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px; }

.career-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}
.career-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.career-filter:hover { color: var(--ink); border-color: var(--ink); }
.career-filter[aria-expanded="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}
.career-filter .icon-mask { width: 17px; height: 17px; }

.career-filters {
    display: flex;
    gap: 10px 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 24px;
}
.career-filters[hidden] { display: none; }
.career-select {
    font-family: var(--font-body);
    font-size: 0.86rem;
    color: var(--ink-2);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 12px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.career-select:hover { border-color: var(--line-strong); color: var(--ink); }
.career-empty { color: var(--ink-3); font-size: 0.92rem; padding-block: 16px; }
.chip {
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ink-2);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 16px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.25s ease;
}
.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip.is-active {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}

/* Timeline : rail 2px + trait orange dessiné au scroll.
   z-index:0 isole le contexte, les rails passent sous les points. */
.timeline { position: relative; z-index: 0; }
.timeline::before,
.timeline::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    border-radius: 2px;
    z-index: -1;
}
.timeline::before { background: var(--line); }
.timeline::after {
    background: var(--accent);
    transform-origin: top;
    transform: scaleY(var(--tl-p, 0));
}

.step {
    position: relative;
    padding: 0 0 clamp(28px, 4vw, 44px) clamp(24px, 3.5vw, 38px);
}
.step:last-child { padding-bottom: 0; }
.step.is-hidden { display: none; }

/* Point : centré sur le rail (rail 2px => centre à 1px) */
.step::before {
    content: "";
    position: absolute;
    left: -6px;               /* 1px (centre rail) - 7px (demi-point) */
    top: 4px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--bg-soft);
    border: 2.5px solid var(--line-strong);
    z-index: 1;
    transition: border-color 0.35s ease, background-color 0.35s ease;
}
.step.is-past::before {                                           /* passé : plein orange */
    border-color: var(--accent);
    background: var(--accent);
}
.step.is-current::before { border-color: var(--accent); }        /* en cours : contour orange */

.step-dates { margin-bottom: 8px; }
.step-arrow { color: var(--accent); letter-spacing: 0; }
.step-title { font-size: clamp(1.05rem, 1.7vw, 1.3rem); letter-spacing: -0.015em; }
.step-place {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 7px;
    color: var(--ink-2);
    font-size: 0.92rem;
}
.step-desc { margin-top: 10px; color: var(--ink-2); font-size: 0.92rem; max-width: 58ch; text-wrap: pretty; }

.badge {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    color: var(--ink-2);
}

/* Mobile : le portrait devient le fond de la section, texte pleine largeur */
@media (max-width: 760px) {
    .about { overflow: hidden; }
    .about > .container { position: relative; z-index: 1; }
    .about-grid { grid-template-columns: 1fr; }
    .about-left { position: static; }
    .about-photo {
        position: absolute;
        left: 0;
        right: 0;
        /* Déborde du conteneur pour couvrir toute la section, paddings compris :
           sinon le fond s'arrête net en plein contenu. */
        top: calc(-1 * clamp(60px, 8vw, 104px));
        bottom: calc(-1 * clamp(60px, 8vw, 104px));
        margin: 0;
        max-width: none;
        aspect-ratio: auto;
        border-radius: 0;
        z-index: -1; /* sous le texte, au-dessus du fond de section */
        pointer-events: none;
        clip-path: inset(0); /* clippe l'image fixe aux limites de la zone */
    }
    /* Le reveal poserait un transform => l'image fixe se calerait sur la figure */
    html.js .about-photo[data-reveal] { transform: none; transition: none; opacity: 1; }
    .about-photo img {
        position: fixed; /* fond immobile pendant le défilement */
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        object-fit: cover;
        object-position: center 25%;
        opacity: var(--photo-op, 0.24);
    }
    :root[data-theme="dark"] .about-photo img { opacity: calc(var(--photo-op, 0.24) * 0.72); }
    /* Fondu haut/bas posé sur les bords réels de la zone : entrée/sortie douces */
    .about-photo::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(var(--bg-soft) 0%, transparent 16%, transparent 84%, var(--bg-soft) 100%);
    }
    .about-text { max-width: none; }
}

/* ----- Compétences ----- */
.skills { padding-block: clamp(60px, 8vw, 104px); }

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(24px, 3.5vw, 44px);
}
.skill-group h3 {
    position: relative;
    font-size: 0.98rem;
    letter-spacing: -0.01em;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
/* Court trait orange qui prolonge le séparateur */
.skill-group h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 34px;
    height: 2px;
    background: var(--accent);
}
.skill-list { display: flex; flex-direction: column; gap: 11px; }
.skill {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 0.94rem;
    color: var(--ink-2);
    transition: color 0.2s ease;
}
.skill .icon-mask { opacity: 0.85; transition: color 0.2s ease, opacity 0.2s ease; }
.skill:hover { color: var(--ink); }
.skill:hover .icon-mask { color: var(--accent); opacity: 1; }

/* Mobile : familles en accordéon exclusif (chevron via ::before,
   dépliage animé via grid-template-rows) */
@media (max-width: 760px) {
    .skills-grid { gap: 0; }
    .skill-group h3 {
        padding-block: 15px 13px;
        margin-bottom: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .skill-group h3::before {
        content: "";
        position: absolute;
        right: 4px;
        top: 45%;
        width: 8px; height: 8px;
        border-right: 1.6px solid var(--ink-3);
        border-bottom: 1.6px solid var(--ink-3);
        transform: translateY(-50%) rotate(45deg);
        transition: transform 0.35s ease;
    }
    .skill-group.is-open h3::before { transform: translateY(-20%) rotate(225deg); }
    .skill-body {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .skill-group.is-open .skill-body { grid-template-rows: 1fr; }
    .skill-list {
        overflow: hidden;
        min-height: 0;
        padding-block: 0;
        transition: padding 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .skill-group.is-open .skill-list { padding-block: 16px 20px; }
}

/* ----- Projets récents (pan horizontal) ----- */
.featured {
    background: var(--bg-soft);
    padding-block: clamp(60px, 8vw, 104px) 0;
}

.featured .section-head { margin-bottom: clamp(40px, 6vh, 72px); }

/* Sans JS / mobile : défilement natif. Le padding gauche s'aligne
   sur le conteneur centré de 1200px. */
.featured-track {
    display: flex;
    gap: clamp(16px, 2.5vw, 28px);
    padding-inline: max(clamp(20px, 5vw, 56px), calc((100vw - 1200px) / 2 + clamp(20px, 5vw, 56px)));
    padding-bottom: clamp(56px, 8vw, 96px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Sans quoi le snap aligne la 1re carte sur le bord et avale la marge */
    scroll-padding-inline: max(clamp(20px, 5vw, 56px), calc((100vw - 1200px) / 2 + clamp(20px, 5vw, 56px)));
    scrollbar-width: none;
}
.featured-track::-webkit-scrollbar { display: none; }

/* Mode épinglé (activé par le JS sur grand écran) */
.featured.pan-active {
    height: var(--pan-height, auto);
    padding-top: 0;
}
.featured.pan-active .featured-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: calc(var(--nav-height) + clamp(20px, 4vh, 40px));
    overflow: hidden;
}
/* margin-inline:auto annule l'étirement flex : largeur explicite */
.featured.pan-active .container { width: 100%; }
.featured.pan-active .section-head { margin-bottom: clamp(28px, 4.5vh, 48px); }
.featured.pan-active .featured-track {
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
    will-change: transform;
}

.featured-card {
    flex: 0 0 auto;
    width: clamp(250px, 28vw, 370px);
    scroll-snap-align: start;
}
/* Mobile : une carte dominante, centrée au snap (sauf la première) */
@media (max-width: 860px) {
    .featured-card {
        width: min(78vw, 340px);
        scroll-snap-align: center;
    }
    .featured-card:first-child { scroll-snap-align: start; }
}
.card-link {
    display: block;
    text-decoration: none;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-link:hover { transform: translateY(-6px); }
.card-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--bg);
}

.card-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-link:hover .card-media img { transform: scale(1.045); }
.card-info { display: flex; flex-direction: column; gap: 5px; padding-top: 12px; }
.card-cat { color: var(--accent); }
.card-title { font-family: var(--font-title); font-size: 1.08rem; font-weight: 500; letter-spacing: -0.015em; }

.featured-more {
    display: grid;
    place-items: center;
    align-self: stretch; /* même hauteur que la plus haute carte de la rangée */
    border: 1px solid var(--accent);
    border-radius: var(--radius-card);
    text-decoration: none;
    color: var(--accent);
    font-family: var(--font-title);
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    letter-spacing: -0.02em;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.featured-more:hover { background: var(--accent); color: var(--on-accent); }

/* ----- Témoignages ----- */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(24px, 4vw, 48px);
    margin-top: clamp(32px, 5vw, 56px);
}
.testimonial {
    margin: 0;
    padding: clamp(20px, 3vw, 32px);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
}
.testimonial-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.testimonial-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.testimonial-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-title);
    font-size: 0.95rem;
    font-weight: 600;
}
.testimonial-who { flex: 1; min-width: 0; }
.testimonial-name { font-weight: 550; font-size: 0.98rem; line-height: 1.3; }
.testimonial-role { color: var(--ink-3); font-size: 0.85rem; line-height: 1.3; }
.testimonial-date { flex-shrink: 0; align-self: flex-start; }
.testimonial blockquote { margin: 0; }
.testimonial blockquote p { font-size: 0.98rem; color: var(--ink-2); text-wrap: pretty; }

@media (max-width: 760px) {
    .testimonials-grid { gap: 14px; margin-top: 26px; }
    .testimonial { padding: 18px; }
    .testimonial-head { gap: 10px; margin-bottom: 12px; }
    .testimonial-avatar { width: 36px; height: 36px; }
    .testimonial-initials { font-size: 0.8rem; }
    .testimonial-name { font-size: 0.92rem; }
    .testimonial-role { font-size: 0.8rem; }
    .testimonial blockquote p { font-size: 0.9rem; }
}

/* ----- Contact ----- */
.contact { background: var(--bg-soft); }
/* Sans témoignages, le contact suit directement les projets (même fond) :
   on rebascule sur le fond clair pour garder l'alternance visible. */
.featured + .contact { background: var(--bg); }
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(40px, 6vw, 90px);
    align-items: start;
}
.contact-intro h2 { margin-bottom: 20px; }
.contact-intro p { color: var(--ink-2); max-width: 40ch; text-wrap: pretty; }

.contact-form { display: flex; flex-direction: column; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 0.88rem; font-weight: 500; cursor: pointer; width: fit-content; }
.required { color: var(--accent); }
.optional { color: var(--ink-3); font-weight: 400; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field input[type="url"],
.field input[type="file"],
.field select,
.field textarea {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
    padding: 12px 14px;
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input[type="file"] { padding: 9px 10px; cursor: pointer; }
.field input[type="file"]::file-selector-button {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink);
    background: var(--bg-soft);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 6px 14px;
    margin-right: 12px;
    cursor: pointer;
}
.field input[type="file"]::file-selector-button:hover { border-color: var(--ink); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-strong); }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.field [aria-invalid="true"] { border-color: var(--danger); }

.field-error { font-size: 0.85rem; color: var(--danger); }

.consent label {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--ink-2);
    cursor: pointer;
}
.consent input {
    margin-top: 3px;
    width: 17px; height: 17px;
    accent-color: var(--accent);
    flex-shrink: 0;
}
.consent a { color: var(--ink); }

.form-status {
    padding: 14px 18px;
    border-radius: var(--radius-field);
    font-size: 0.95rem;
}
.form-status.is-flash { animation: status-pop 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes status-pop {
    0% { transform: scale(0.96); }
    45% { transform: scale(1.015); }
    100% { transform: none; }
}
.form-status.success {
    background: var(--success-soft);
    color: var(--success);
    border: 1px solid var(--success);
}
.form-status.error {
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid var(--danger);
}

.form-submit {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.captcha-badge { font-size: 0.62rem; }
.captcha-badge.is-ok { color: var(--accent); }

.hp-field {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

@media (max-width: 760px) {
    .contact-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .form-submit { justify-content: center; }
}

/* ----- En-tête de page ----- */
.page-head {
    /* L'écart au menu reste de l'air voulu, pas du vide : resserré pour se
       caler sur les fiches projet, où le titre est à environ 100 px du menu. */
    padding-top: calc(var(--nav-height) + clamp(36px, 6.5vw, 76px));
    padding-bottom: clamp(32px, 5vw, 56px);
}
.page-title {
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    font-weight: 550;
    letter-spacing: -0.035em;
    line-height: 1;
}
.page-title .word { display: block; overflow: hidden; }
.page-title .word > span { display: inline-block; }
html.js .page-title .word > span { transform: translateY(110%); }
html.js.is-loaded .page-title .word > span {
    transform: translateY(0);
    transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.page-lead {
    margin-top: 18px;
    color: var(--ink-2);
    font-size: clamp(1.02rem, 1.5vw, 1.18rem);
    max-width: 52ch;
    text-wrap: pretty;
}
.error-404 { padding-bottom: clamp(72px, 12vw, 140px); }
.error-404 .btn { margin-top: 28px; }

/* ----- Page projets ----- */
.gallery { padding-bottom: clamp(72px, 11vw, 140px); }

/* Barre d'outils : filtres à gauche, tri à droite */
.gallery-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
    margin-bottom: clamp(32px, 5vw, 52px);
}
.filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.gallery-tri {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.gallery-tri label { cursor: pointer; }
.filter-btn {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ink-2);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 9px 20px;
    cursor: pointer;
    user-select: none;
    caret-color: transparent; /* pas de curseur de saisie fantôme au clic */
    transition: border-color 0.2s ease, color 0.2s ease,
                background-color 0.25s ease, transform 0.15s ease;
}
.filter-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.filter-btn:active { transform: scale(0.96); }
.filter-btn.is-active {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}

.gallery-empty { color: var(--ink-3); padding-block: 40px; }

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: clamp(24px, 3.5vw, 40px);
}
.project-card.is-hidden { display: none; }

.card-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-body);
    color: var(--ink);
}
.card-btn .card-media { background: var(--bg-soft); }
.card-btn:hover .card-media img { transform: scale(1.045); }
.card-btn .card-info { padding-top: 13px; }
.card-btn .card-title { font-size: 1.12rem; }

/* ----- Fiche projet (popup) -----
   Bandeau court portant la catégorie et le titre, image et opacité réglées
   par projet dans le back-office. Bandeau et actions figés, contenu défilant
   entre les deux. */
.project-modal {
    border: none;
    padding: 0;
    background: transparent;
    max-width: min(680px, 94vw);
    width: 100%;
    margin: auto;
}
.project-modal::backdrop {
    background: rgba(10, 10, 12, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.modal-body {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-height: min(640px, 86vh);
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 0 40px 80px -40px rgba(10, 10, 12, 0.5);
}

/* Bandeau figé : l'image porte la catégorie et le titre.
   aspect-ratio sert de hauteur souhaitée ; un titre long fait grandir la zone
   au lieu d'être tronqué. */
.modal-tete {
    position: relative;
    display: grid;
    align-content: end;
    aspect-ratio: 16 / 3.5;
    padding: clamp(18px, 3vw, 26px) clamp(20px, 3.5vw, 36px);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
.modal-bandeau {
    position: absolute;
    inset: 0;
    background: var(--bg-soft);
}
.modal-bandeau img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.modal-bandeau img.is-loaded { opacity: var(--fond-op, 0.45); }
/* Voile dégradé posé DANS le bloc image : il passe sous le titre, qui reste
   donc pleinement opaque quelle que soit l'opacité choisie. */
.modal-bandeau::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        var(--surface) 0%,
        color-mix(in srgb, var(--surface) 62%, transparent) 42%,
        transparent 100%);
}
.modal-titre-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.modal-surtitre { color: var(--accent); }
.modal-tete h2 {
    font-size: clamp(1.35rem, 3vw, 1.9rem);
    letter-spacing: -0.025em;
    padding-right: 44px; /* dégage la croix de fermeture */
}

.modal-corps, .modal-pied { position: relative; }

/* Corps défilant */
.modal-corps {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(18px, 2.6vw, 26px) clamp(20px, 3.5vw, 36px);
    scrollbar-color: var(--accent) color-mix(in srgb, var(--ink) 10%, transparent);
}
.modal-desc { color: var(--ink-2); font-size: 0.98rem; text-wrap: pretty; }

/* Pied figé : actions toujours accessibles, alignées à gauche */
.modal-pied {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px clamp(20px, 3.5vw, 36px) clamp(18px, 2.6vw, 24px);
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Bloc d'informations structuré */
.meta-label {
    display: inline-block;
    min-width: 110px;
    font-size: 0.62rem;
}
/* Informations de la fiche : date et compétences côte à côte, le statut se
   plaçant sous la date. Chaque bloc porte son intitulé au-dessus de sa valeur,
   et les compétences occupent la largeur restante : quand leurs puces passent
   à la ligne, elles repartent du bord gauche de l'intitulé « Compétences ». */
.modal-infos {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 30px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 0.94rem;
}
.modal-infos-colonne {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-shrink: 0;
}
.modal-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.modal-info .meta-label { min-width: 0; }
.modal-skills { flex: 1 1 240px; }

.modal-close {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 2;
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
    font-size: 0.78rem;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    caret-color: transparent;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.modal-close:hover { background: var(--ink); color: var(--bg); }
.modal-close:active { transform: scale(0.92); }

@media (max-width: 720px) {
    .modal-body { max-height: min(640px, 88vh); }
    .meta-label { min-width: 88px; }
}
@media (max-width: 560px) {
    /* Bandeau un peu plus haut : la largeur seule le rendrait trop mince */
    .modal-tete { aspect-ratio: 16 / 5; }
}
/* Petits écrans : les boutons gardent leur largeur naturelle et restent
   alignés à gauche, plutôt que de s'étirer sur toute la ligne. */
@media (max-width: 480px) {
    /* Les deux boutons doivent tenir sur une ligne avec leur icône : le pied
       resserre donc ses écarts et ses boutons plutôt que de sacrifier
       l'icône, qui signale l'ouverture dans un nouvel onglet. */
    .modal-pied { gap: 8px; }
    .modal-pied .btn { gap: 6px; }
    .modal-pied .btn-solid, .modal-pied .btn-outline { padding-inline: 15px; }
}

/* ----- Visionneuse d'images (galerie projet) ----- */
.lightbox {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    /* Rangée bornée à la hauteur de la visionneuse : sans minmax(0, 1fr), elle
       se dimensionnait sur son contenu, donc une image en portrait la faisait
       grandir au-delà de l'écran malgré la hauteur fixe du dialogue. */
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    gap: clamp(8px, 2vw, 24px);
}
.lightbox:not([open]) { display: none; }
.lightbox::backdrop {
    background: rgba(8, 8, 10, 0.92);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.lightbox-figure {
    grid-column: 2;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    height: 100%;
    padding-block: clamp(56px, 9vh, 88px);
}
/* L'image et le compteur se partagent la hauteur du cadre. Sans min-height à
   0, l'image gardait sa hauteur naturelle et le compteur s'ajoutait par
   dessus : une page de PDF, en portrait, débordait de l'écran et il fallait
   défiler. L'image se contracte donc pour tenir en entier, format préservé. */
.lightbox-figure { min-height: 0; overflow: hidden; }
.lightbox-figure img {
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    flex: 0 1 auto;
    object-fit: contain;
    width: auto;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.25s ease;
    /* Le doigt sert à naviguer, pas à sélectionner l'image */
    user-select: none;
    -webkit-user-drag: none;
}
.lightbox-figure img.is-loaded { opacity: 1; }
.lightbox-compteur { color: rgba(242, 241, 237, 0.6); flex-shrink: 0; }

.lightbox-nav, .lightbox-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(242, 241, 237, 0.28);
    background: rgba(19, 19, 21, 0.5);
    color: #F2F1ED;
    cursor: pointer;
    user-select: none;
    caret-color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.lightbox-nav {
    width: clamp(42px, 5vw, 54px);
    height: clamp(42px, 5vw, 54px);
    font-size: 1.9rem;
    line-height: 0;
    margin-inline: clamp(8px, 1.5vw, 18px);
}
.lightbox-nav span { margin-top: -4px; } /* chevron optiquement centré */
.lightbox-prev { grid-column: 1; }
.lightbox-next { grid-column: 3; }
.lightbox-close {
    position: absolute;
    top: clamp(14px, 2.5vh, 24px);
    right: clamp(14px, 2.5vw, 24px);
    width: 40px; height: 40px;
    font-size: 0.9rem;
}
.lightbox-nav:hover, .lightbox-close:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #FFFFFF;
}
.lightbox-nav:active, .lightbox-close:active { transform: scale(0.92); }

/* Mobile : les flèches passent au-dessus de l'image (le doigt suffit,
   mais elles restent atteignables au pouce) */
@media (max-width: 700px) {
    .lightbox { grid-template-columns: minmax(0, 1fr); }
    .lightbox-figure { grid-column: 1; padding-block: 64px 92px; }
    .lightbox-nav {
        position: absolute;
        bottom: clamp(18px, 4vh, 34px);
        margin: 0;
    }
    .lightbox-prev { left: 22%; }
    .lightbox-next { right: 22%; }
    .lightbox-compteur { position: absolute; bottom: calc(clamp(18px, 4vh, 34px) + 16px); }
}

/* ----- Page projet -----
   Bandeau pleine largeur portant le titre, puis deux colonnes (texte à
   gauche, informations collantes à droite), puis la galerie en pleine
   largeur. */
.case-bandeau {
    /* Hauteur partagée avec la bande d'image, qui doit s'aligner dessus en
       haut de page. Une hauteur explicite plutôt qu'un aspect-ratio : les deux
       éléments n'ont pas la même largeur de référence, la barre de défilement
       suffirait à les décaler. */
    --bandeau-h: clamp(160px, 17.5vw, 340px);
    position: relative;
    display: grid;
    align-content: end;
    height: var(--bandeau-h);
    margin-top: var(--nav-height);
    padding-block: clamp(20px, 3.5vw, 40px);
    /* 100% et non 100vw : sinon la largeur de la barre de défilement décale le
       titre par rapport au conteneur centré du contenu. */
    padding-inline: max(clamp(20px, 5vw, 56px), calc((100% - 1200px) / 2 + clamp(20px, 5vw, 56px)));
    overflow: hidden;
    background: var(--bg-soft);
}
/* Bande d'image figée sous le menu : elle ne défile pas avec la page et reste
   visible quel que soit le défilement. Le contenu, transparent, défile par
   dessus elle, et son voile dégradé garde le texte lisible pendant la
   traversée. Elle épouse la hauteur du bandeau, d'où la variable partagée. */
.case-bandeau-image {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    z-index: 0; /* sous le corps de la fiche, qui est en 1 */
    height: var(--bandeau-h);
    overflow: hidden;
    background: var(--bg-soft);
}
.case-bandeau-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: var(--fond-op, 0.45);
}
/* Voile dégradé posé DANS le bloc image : il passe sous le titre, qui reste
   donc pleinement opaque quelle que soit l'opacité choisie. */
.case-bandeau-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        var(--bg) 0%,
        color-mix(in srgb, var(--bg) 60%, transparent) 45%,
        transparent 100%);
}
.case-bandeau-titre {
    position: relative;
    /* Au-dessus de la bande d'image, qui est figée : sans cela le titre
       passerait derrière elle. Il défile ensuite normalement avec la page. */
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.case-bandeau-titre h1 {
    font-size: clamp(1.9rem, 4.4vw, 3.2rem);
    font-weight: 550;
    letter-spacing: -0.03em;
    line-height: 1.04;
}
.case-cat { color: var(--accent); }

/* Corps de la fiche : au-dessus de la bande d'image figée, et transparent.
   Le texte défile donc PAR DESSUS l'image, comme le titre, et l'image reste
   visible quel que soit le défilement. C'est le voile dégradé de la bande qui
   rend le texte lisible quand il la traverse.
   Le z-index est indispensable : sans lui l'image, qui est positionnée,
   passerait devant ce contenu qui ne l'est pas, et le texte disparaîtrait
   derrière elle. Pas de fond ici : un fond opaque recouvrirait l'image. */
.case-corps {
    position: relative;
    z-index: 1;
}

/* Deux colonnes */
.case-duo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: clamp(28px, 5vw, 64px);
    align-items: start;
    padding-block: clamp(28px, 4vw, 44px) clamp(40px, 6vw, 72px);
}
/* Texte long : contenu formaté depuis le back-office (gras, titres, listes,
   liens, alignement). Les marges viennent d'ici, pas de l'éditeur. */
.case-text { display: flex; flex-direction: column; gap: 18px; }
.case-text > * { max-width: 72ch; }
.case-text p, .case-text li { color: var(--ink-2); text-wrap: pretty; }
.case-vide { color: var(--ink-3); font-size: 0.95rem; }

.case-text h2, .case-text h3 {
    margin-top: 14px;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.case-text h2 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); }
.case-text h3 { font-size: clamp(1.08rem, 1.7vw, 1.22rem); }
.case-text h2:first-child, .case-text h3:first-child { margin-top: 0; }

.case-text ul, .case-text ol {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 22px;
}
.case-text ul { list-style: disc; }
.case-text ol { list-style: decimal; }
.case-text li::marker { color: var(--accent); }

.case-text blockquote {
    margin: 4px 0;
    padding: 4px 0 4px 18px;
    border-left: 2px solid var(--accent);
    color: var(--ink-2);
    font-style: italic;
}

/* Liens du contenu : orange, comme sur les pages légales */
.case-text a {
    color: var(--accent);
    text-decoration-color: var(--accent-soft);
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}
.case-text a:hover { color: var(--accent-strong); }

/* Alignements posés par l'éditeur (classes, jamais d'attribut style) */
.texte-centre { text-align: center; }
.texte-droite { text-align: right; }

.case-aside {
    position: sticky;
    top: calc(var(--nav-height) + 24px);
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: clamp(18px, 2.4vw, 26px);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
}
.case-meta { display: flex; flex-direction: column; gap: 10px; font-size: 0.94rem; }
.case-meta li { display: flex; flex-direction: column; gap: 2px; }
.case-actions { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.case-aside .btn { justify-content: center; }

.case-skills ul, .skills-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.skills-chips { margin-top: 0; }
.case-skills li, .skills-chips li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.88rem;
    color: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 14px;
}
.skills-chips li { font-size: 0.85rem; padding: 6px 13px; }
.case-skills .icon-mask, .skills-chips .icon-mask { width: 16px; height: 16px; color: var(--accent); }

/* Galerie : tuiles régulières, l'image remplissant son cadre. Le rognage est
   ici purement visuel, le fichier stocké garde son format d'origine : c'est la
   visionneuse qui le montre en entier, contenu dans l'écran. */
.case-photos { padding-bottom: clamp(72px, 11vw, 140px); }
.case-photos .photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: clamp(12px, 1.8vw, 20px);
    margin-top: 14px;
}
.case-media {
    margin: 0;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--bg-soft);
}
.photos-grid img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.aide-galerie { color: var(--ink-3); letter-spacing: 0.04em; text-transform: none; }

/* Pages de PDF : une page A4 est en portrait, la tuile en 4:3 paysage. Remplir
   le cadre en amputerait la moitié, donc la page s'y inscrit entière. Les
   photos, elles, remplissent bien leur tuile. */
.case-page img { object-fit: contain; background: var(--surface); }
.case-page .photo-btn { position: relative; display: block; }
.page-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    padding: 4px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 82%, transparent);
    color: var(--bg);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    pointer-events: none;
}
.case-documents {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: clamp(16px, 2.2vw, 24px) 0 0;
}

@media (max-width: 900px) {
    .case-duo { grid-template-columns: 1fr; }
    .case-aside { position: static; }
    /* Écrans étroits : la bande garde une hauteur lisible, 22 % de la largeur
       n'y suffirait pas. */
    .case-bandeau { --bandeau-h: clamp(160px, 40vw, 260px); }
}

/* Photos cliquables : ouverture dans la visionneuse */
.photo-btn {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    border-radius: var(--radius-card);
    overflow: hidden;
    cursor: zoom-in;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.photo-btn img { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.photo-btn:hover { transform: translateY(-3px); }
.photo-btn:hover img { transform: scale(1.04); }
.case-media .photo-btn { border-radius: 0; }

@media (max-width: 700px) {
    .case-gallery { grid-template-columns: 1fr; }
}

/* ----- Pages légales ----- */
.legal-body { max-width: 720px; padding-bottom: clamp(72px, 11vw, 140px); }
.legal-body h2 {
    position: relative;
    font-size: 1.35rem;
    margin: 40px 0 14px;
    padding-bottom: 10px;
    letter-spacing: -0.015em;
    border-bottom: 1px solid var(--line);
}
.legal-body h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 34px;
    height: 2px;
    background: var(--accent);
}
.legal-body p { color: var(--ink-2); }
.legal-body a {
    color: var(--accent);
    text-decoration-color: var(--accent-soft);
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}
.legal-body a:hover { color: var(--accent-strong); }

/* ----- Pied de page ----- */
.footer {
    /* Positionné et opaque, comme le corps des fiches projet : il recouvre la
       bande d'image figée du bandeau au lieu de passer derrière elle. */
    position: relative;
    z-index: 1;
    background: var(--footer-bg);
    color: var(--footer-text);
    padding-block: clamp(40px, 6vw, 64px);
}
.footer-inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(20px, 5vw, 56px);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
}
.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--footer-text);
}
.footer .mark-bg { fill: var(--footer-text); }
.footer .mark-glyph { stroke: var(--footer-bg); }
.footer-note { margin-top: 14px; color: var(--footer-text-2); font-size: 0.88rem; }
/* SIREN : sur la même ligne au large, en dessous quand la place manque */
.footer-siren { white-space: nowrap; }
.footer-siren::before { content: " · "; }
@media (max-width: 420px) {
    .footer-siren { display: block; }
    .footer-siren::before { content: none; }
}
.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 18px;
}
.footer-social { display: flex; gap: 12px; }
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 999px;
    border: 1px solid var(--footer-line);
    color: var(--footer-text);
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.footer-social a:hover { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.footer-social .icon-mask { width: 17px; height: 17px; }
.footer-legal { display: flex; gap: 22px; }
.footer-legal a {
    color: var(--footer-text-2);
    text-decoration: none;
    font-size: 0.88rem;
    transition: color 0.2s ease;
}
.footer-legal a:hover { color: var(--footer-text); }

@media (max-width: 760px) {
    .footer-right { align-items: flex-start; }
    /* Liens légaux plus confortables au doigt */
    .footer-legal { gap: 8px 22px; flex-wrap: wrap; }
    .footer-legal a { display: inline-block; padding-block: 6px; }
}

/* ----- Apparition au scroll ----- */
html.js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform var(--ease-long);
    transition-delay: var(--reveal-delay, 0s);
}
/* transform: none (pas translateY(0)) : un transform résiduel fausse le
   positionnement du caret dans les champs des ancêtres transformés */
html.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ----- Mouvement réduit ----- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html.js [data-reveal],
    html.js .hero-title .word > span,
    html.js .hero-kicker, html.js .hero-lead, html.js .hero-actions,
    html.js .hero-terminal,
    html.js .page-title .word > span {
        opacity: 1;
        transform: none;
    }
    .hero-scroll span::after { animation: none; }
    .hero-glow { animation: none; }
}