/* ===================================================
   PORTFOLIO — LILIANA KOLMAKOVA
   Feuille de style unique, partagée par toutes les pages.

   Direction artistique « Editorial intelligence » :
   serif éditoriale (DM Serif Display) + grotesque (Inter),
   blanc cassé, noir et un seul rouge utilisé comme signal.

   Organisation du fichier :
   1. Variables (couleurs, typographies, mesures) et base
   2. Composants partagés (boutons, liens, curseur)
   3. Header et menu mobile
   4. Accueil (hero, travaux, qui je suis, contact) et pied de page
   5. Page À propos et études de cas
   6. Hauteur d'écran, cartes projets et frise
   7. Responsive (< 1024px, < 768px)

   RÈGLE DE HAUTEUR : chaque section doit tenir dans la hauteur de l'écran.
   Quand une section contient plusieurs éléments (liste de projets, captures),
   c'est chacun de ces éléments qui doit tenir dans un écran.
   → titres, marges et médias sont dimensionnés avec min(…vw, …svh) :
     ils suivent la largeur ET la hauteur de l'écran.
   → aucun média ne dépasse --screen-h (hauteur de l'écran sous le header).
   Voir le bloc « HAUTEUR D'ÉCRAN » avant la partie responsive.
   =================================================== */

:root {
    /* =================================================
       COULEURS — 4 couleurs pour tout le site.
       Règle : 90 % neutre, 10 % rouge. Le rouge est un signal.
       Aucune autre valeur de couleur n'est écrite dans ce fichier
       (seul le mot-clé "transparent" est utilisé directement).
       ================================================= */

    /* BLANC CASSÉ — fond
       → fond des pages, header, tiroir du menu mobile, champs du formulaire,
         texte posé sur les sections noires, les visuels noirs et le rouge */
    /* Les deux neutres de base. Le site est en mode sombre :
       --bg prend le noir, --text prend le blanc cassé. */
    --light: #F5F2ED;
    --dark: #111111;

    --bg: var(--dark);

    /* NOIR — texte
       → titres, paragraphes, menu, noms de projets, filets forts,
         fond de la frise « Mon parcours » (À propos),
         des visuels de projets et du cadre de la photo du hero */
    --text: var(--light);

    /* ROUGE FRAMBOISE — accent (signal, jamais dominant)
       → « × » du pied de page, numéros de projets et de sections,
         chiffre « +40 % », disponibilité, point de l'étape en cours
         de la frise, survol des boutons et des liens, soulignement du menu,
         curseur personnalisé au survol d'un lien, marqueurs [À compléter] */
    --accent: #E5234F;

    /* GRIS — métadonnées et textes secondaires
       (assombri depuis #8A8783 pour être lisible en petit : contraste 4.7:1)
       → libellés en petites capitales, légendes, statuts des projets,
         notes du formulaire, filets fins, curseur personnalisé,
         emplacements [À compléter] des études de cas */
    --muted: #A19D98;

    /* --- Typographies --- */
    --serif: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif;   /* titres, noms, phrases */
    --body: 'Inter', 'Helvetica Neue', Arial, sans-serif;               /* texte, navigation, métadonnées */

    /* --- Mesures --- */
    --header-h: 64px;
    --gutter: clamp(16px, 4vw, 64px);
    /* Hauteur utile de l'écran (sous le header) : référence de toutes les tailles verticales */
    --screen-h: calc(100svh - var(--header-h));
    --section-y: clamp(40px, min(6vw, 8svh), 104px);
    --max-w: 1440px;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h);
}

body {
    background-color: var(--bg);
    font-family: var(--body);
    font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
    line-height: 1.65;
    color: var(--text);
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

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

.skip-link {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 200;
    background: var(--text);
    color: var(--bg);
    padding: 0.6rem 1rem;
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus {
    top: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Conteneur centré */

.wrap {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ===================================================
   COMPOSANTS PARTAGÉS
   =================================================== */

/* Métadonnées / petites capitales */

.kicker,
.label {
    font-family: var(--body);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
}

.kicker {
    margin-bottom: 1.2rem;
}

/* Signal rouge : « × », numéros, mots-clés */

.x {
    color: var(--accent);
}

/* Boutons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 48px;
    padding: 0.75rem 1.6rem;
    font-family: var(--body);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid var(--text);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn:hover {
    background-color: var(--text);
    color: var(--bg);
}

.btn-primary {
    background-color: var(--text);
    color: var(--bg);
}

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

.btn-secondary {
    background-color: transparent;
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

/* Lien d'action : « → » devient « ↗ » au survol */

.text-link {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    align-self: flex-start;
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid var(--text);
    padding-bottom: 0.3rem;
}

.arrow::after {
    content: '→';
    display: inline-block;
    transition: transform 0.25s ease;
}

.text-link:hover .arrow::after {
    content: '↗';
}

/* Curseur personnalisé (desktop uniquement, ajouté par js/main.js) */

.cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 300;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 1px solid var(--muted);
    border-radius: 50%;
    pointer-events: none;
    transition: width 0.25s ease, height 0.25s ease, margin 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.cursor.is-link {
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-color: var(--accent);
}

.cursor.is-hidden {
    opacity: 0;
}

/* ===================================================
   HEADER
   =================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-h);
    background-color: var(--bg);
    border-bottom: 1px solid var(--text);
}

.site-header-inner {
    height: 100%;
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.brand {
    font-family: var(--body);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
}

.main-nav {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.nav-links {
    display: flex;
    gap: clamp(1.2rem, 2.5vw, 2.5rem);
    list-style: none;
}

.nav-link {
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 1px;
    background-color: var(--accent);
    transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
    width: 100%;
}

/* Sélecteur de langue FR / EN (masqué tant qu'aucune traduction n'est prête) */

.lang-switch {
    display: flex;
    border: 1px solid var(--muted);
}

.lang-switch[hidden] {
    display: none;
}

.lang-switch button {
    font-family: var(--body);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    min-width: 40px;
    min-height: 36px;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
}

.lang-switch button[aria-pressed="true"] {
    background-color: var(--text);
    color: var(--bg);
}

/* Bouton hamburger */

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 28px;
    height: 1.5px;
    margin-inline: auto;
    background-color: var(--text);
    transition: transform 0.35s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    transform: translateY(-4px) rotate(-45deg);
}

/* Tiroir mobile */

.drawer {
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    width: min(380px, 100%);
    z-index: 99;
    background-color: var(--bg);
    border-left: 1px solid var(--text);
    padding: 2.5rem var(--gutter) calc(2.5rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.4s ease, visibility 0s linear 0.4s;
}

.drawer.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.4s ease;
}

.drawer .nav-link {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 2.4rem;
    letter-spacing: 0;
    text-transform: none;
}

.drawer-backdrop {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 98;
    background: transparent;
    pointer-events: none;
}

.drawer-backdrop.open {
    pointer-events: auto;
}

/* ===================================================
   ACCUEIL — HERO
   =================================================== */

.home-hero {
    min-height: calc(100svh - var(--header-h));
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 1fr auto;
    column-gap: var(--gutter);
    padding-block: clamp(40px, 6vw, 88px) clamp(24px, 3vw, 40px);
}

.home-hero-text {
    grid-column: 1 / span 8;
    grid-row: 1;
    align-self: center;
}

.home-title {
    font-family: var(--serif);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: -0.01em;
}

.home-title-main {
    display: block;
    font-size: clamp(2.6rem, 5.4vw, 6rem);
    line-height: 1;
    text-wrap: balance;
}

.home-lede {
    font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.35rem);
    line-height: 1.5;
    max-width: 40ch;
    margin-top: clamp(2rem, 4vw, 3.5rem);
}

/* Emplacement photo : signature visuelle du hero */

.home-visual {
    grid-column: 9 / span 4;
    grid-row: 1;
    align-self: center;
    position: relative;
}

.photo-slot {
    position: relative;
    aspect-ratio: 4 / 5;
    background-color: var(--text);
    overflow: hidden;
    display: grid;
    place-items: center;
}

.photo-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.scroll-cue {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: end;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text);
}

.scroll-cue:hover {
    color: var(--accent);
}

/* ===================================================
   SECTIONS
   =================================================== */

.section {
    padding-block: var(--section-y);
    border-top: 1px solid var(--text);
    scroll-margin-top: var(--header-h);
}

.section-head {
    margin-bottom: clamp(3rem, 6vw, 6rem);
}

.section-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(3rem, 7.4vw, 8rem);
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.section-intro {
    font-size: clamp(1rem, 0.95rem + 0.35vw, 1.25rem);
    line-height: 1.55;
    max-width: 44ch;
    margin-top: 1.5rem;
}

/* Section inversée : fond noir */

/* Mode sombre : ces blocs restent noirs avec un texte clair,
   on y rétablit donc les valeurs d'origine des deux variables. */
.section--dark,
.lightbox {
    --bg: var(--light);
    --text: var(--dark);
}

.section--dark {
    background-color: var(--text);
    color: var(--bg);
    border-top: none;
}

.section--dark .kicker {
    color: var(--bg);
}

/* ===================================================
   ACCUEIL — TRAVAUX CHOISIS (en-tête et visuels)
   =================================================== */

.works-head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: end;
    margin-bottom: clamp(4rem, 8vw, 8rem);
}

.works-head .section-title {
    grid-column: 1 / span 7;
}

.works-head .section-intro {
    grid-column: 8 / span 5;
    margin: 0;
}

.work-visual {
    grid-column: 1 / span 8;
    grid-row: 1;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--text);
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.work-visual > img,
.work-visual > svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.work-number {
    font-family: var(--body);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
    color: var(--accent);
}

/* Image très large affichée en entier */

.work-visual--contain > img {
    object-fit: contain;
}

/* --- Visuels provisoires des projets (compositions en attendant les images) --- */

.work-visual--light {
    background-color: var(--bg);
    border: 1px solid var(--text);
}

.visual-type {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--bg);
    text-align: center;
    padding: 2rem;
}

.visual-type .wordmark {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(3.2rem, 7.5vw, 8.5rem);
    line-height: 0.9;
}

/* ===================================================
   ACCUEIL — QUI JE SUIS
   =================================================== */

.about-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: clamp(2.5rem, 5vw, 4rem);
}

.about-grid .section-title {
    grid-column: 1 / -1;
}

/* ===================================================
   ACCUEIL — CONTACT
   =================================================== */

.contact-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: clamp(3rem, 6vw, 5rem);
}

.contact-links {
    grid-column: 1 / span 6;
    list-style: none;
    border-top: 1px solid var(--text);
}

.contact-links li {
    border-bottom: 1px solid var(--text);
}

.contact-links a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    overflow-wrap: anywhere;
    padding: 1.2rem 0;
    font-family: var(--serif);
    font-size: clamp(1.5rem, 1rem + 1.6vw, 2.4rem);
    line-height: 1.1;
    text-decoration: none;
    transition: padding 0.3s ease;
}

.contact-links a:hover {
    padding-left: 0.6rem;
}

.contact-links a:hover .arrow::after {
    content: '↗';
}

/* Formulaire de contact */

.contact-form {
    grid-column: 8 / span 5;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.field label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.field input,
.field textarea {
    width: 100%;
    font: inherit;
    color: var(--text);
    background-color: var(--bg);
    border: none;
    border-bottom: 1px solid var(--text);
    padding: 0.6rem 0;
    resize: vertical;
}

.field input:focus,
.field textarea:focus {
    outline: none;
    border-bottom: 2px solid var(--accent);
}

.contact-form .btn {
    align-self: flex-start;
    margin-top: 0.5rem;
}

.form-note {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--muted);
}

.form-status:empty {
    display: none;
}

.form-status {
    font-weight: 600;
    border-left: 2px solid var(--accent);
    padding-left: 0.8rem;
}

/* ===================================================
   FOOTER
   =================================================== */

.site-footer {
    border-top: 1px solid var(--text);
}

.site-footer-inner {
    max-width: var(--max-w);
    margin-inline: auto;
    padding: 2rem var(--gutter);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
}

.site-footer a {
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--accent);
}

/* ===================================================
   PAGE À PROPOS ET ÉLÉMENTS COMMUNS
   =================================================== */

.hero {
    position: relative;
    overflow: hidden;
    max-width: var(--max-w);
    margin-inline: auto;
    padding: var(--section-y) var(--gutter);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
}

.hero-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(3.2rem, 8.6vw, 9.6rem);
    line-height: 0.92;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.hero-title--long {
    font-size: clamp(2.4rem, 5vw, 5.6rem);
    line-height: 1;
}

.hero .btn-group {
    margin-top: 0.5rem;
}

.section > .section-head,
.section > .timeline,
.section > .timeline-cols,
.section > .screens-grid {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section > .section-head {
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

/* Frise du parcours (page À propos, section noire) */

.timeline {
    list-style: none;
    position: relative;
}

.timeline-item {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 2.5rem;
    padding-bottom: 4rem;
    position: relative;
    max-width: 900px;
    scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

/* Trait vertical entre les points */

.timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 3.5rem;
    top: 0.5rem;
    bottom: -0.5rem;
    width: 1px;
    background: var(--muted);
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: calc(3.5rem - 5px);
    top: 0.55rem;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: var(--text);
    border: 1px solid var(--bg);
    z-index: 1;
}

.timeline-item.active-sem::before {
    background-color: var(--accent);
    border-color: var(--accent);
}

.timeline-label {
    font-family: var(--serif);
    font-size: 1.5rem;
    text-align: right;
    padding-right: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

.timeline-content h4 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: 0.8rem;
}

.timeline-content p {
    margin-bottom: 1.2rem;
    max-width: 62ch;
}

.screens-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem var(--gutter);
    list-style: none;
}

.screen {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.screen img {
    width: 100%;
    height: auto;
    max-height: 64vh;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.screen:hover img {
    transform: translateY(-6px);
}

.screen figcaption {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.screen figcaption strong {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 400;
}

.screen figcaption span {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--muted);
}

/* Liens de fin de page */

.bridge {
    border-top: 1px solid var(--text);
}

.bridge-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: var(--max-w);
    margin-inline: auto;
    padding: clamp(2rem, 4vw, 3.5rem) var(--gutter);
    border-bottom: 1px solid var(--text);
    text-decoration: none;
    transition: color 0.3s ease;
}

.bridge-link:hover {
    color: var(--accent);
}

.bridge-label,
.bridge-arrow {
    font-family: var(--serif);
    font-size: clamp(2.2rem, 5vw, 5rem);
    line-height: 1;
}

.bridge-arrow {
    transition: transform 0.35s ease;
}

.bridge-link:hover .bridge-arrow {
    transform: translateX(12px);
}

/* ===================================================
   ÉTUDES DE CAS
   =================================================== */

/* --- Hero --- */

.cs-hero {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: 3rem;
    align-items: end;
    padding-block: clamp(48px, 7vw, 110px);
}

.cs-hero-text {
    grid-column: 1 / span 7;
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 3.5rem);
}

.cs-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2.8rem, 5.6vw, 6.4rem);
    line-height: 1;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.cs-hero-visual {
    grid-column: 8 / span 5;
}

/* --- Emplacement pour une preuve réelle [À COMPLÉTER] --- */

.placeholder {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    min-height: 220px;
    padding: 1.5rem;
    border: 1px dashed var(--muted);
    text-align: center;
    color: var(--muted);
}

.placeholder strong {
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text);
}

.placeholder span {
    font-size: 0.875rem;
    line-height: 1.5;
    max-width: 32ch;
}

.placeholder--tall {
    aspect-ratio: 4 / 5;
}

.placeholder--wide {
    aspect-ratio: 16 / 9;
}

.placeholder--shot {
    aspect-ratio: 4 / 3;
}

.placeholder img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Titre de chapitre « 01 — Comprendre » --- */

.cs-chapter {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}

.cs-chapter .work-number {
    font-size: 0.8125rem;
}

.cs-subtitle {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2.2rem, 1.4rem + 3vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

/* Grille texte (étroit) + contenu (large) */

.cs-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
}

.cs-grid > .cs-side {
    grid-column: 1 / span 5;
}

.cs-grid > .cs-main {
    grid-column: 7 / span 6;
}

.cs-grid > .cs-full {
    grid-column: 1 / -1;
}

.cs-body {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    max-width: 60ch;
}

.shot {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: 1.5rem;
}

.shot + .shot {
    margin-top: clamp(4rem, 7vw, 6rem);
}

.shot-title {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--text);
}

.shot-title h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem);
}

.shot-before {
    grid-column: 1 / span 6;
}

.shot-after {
    grid-column: 7 / span 6;
}

.todo {
    color: var(--muted);
    font-style: italic;
}

/* --- Impact --- */

.cs-impact {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: 2.5rem;
    align-items: end;
}

.cs-impact-figure {
    grid-column: 1 / span 7;
}

.cs-impact-figure strong {
    display: block;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(5.5rem, 16vw, 17rem);
    white-space: nowrap;
    line-height: 0.82;
    letter-spacing: -0.03em;
    color: var(--accent);
}

.cs-impact-figure .label {
    display: block;
    margin-top: 1rem;
    color: var(--text);
}

.cs-impact-text {
    grid-column: 8 / span 5;
    font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
    line-height: 1.55;
}

/* --- Fin de page --- */

.cs-end {
    padding-block: 0;
}

.next-project {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    padding-block: clamp(2rem, 4vw, 3.5rem);
    border-top: 1px solid var(--text);
    text-decoration: none;
}

.next-project-name {
    font-family: var(--serif);
    font-size: clamp(3.5rem, 12vw, 12rem);
    line-height: 0.9;
    transition: transform 0.4s ease;
}

.next-project:hover .next-project-name {
    transform: translateX(12px);
}

.next-project:hover .arrow::after {
    content: '↗';
}

/* --- Étude de cas : compléments (règle « 1 idée = 1 titre + 1 explication + 1 preuve ») --- */

/* Intro du hero */

.cs-intro {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 58ch;
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
    line-height: 1.6;
}

/* Preuve visuelle d'une section */

.cs-proof {
    grid-column: 1 / -1;
}

/* Liste de définitions : libellé à gauche, texte à droite */

.cs-rows {
    list-style: none;
    border-top: 1px solid var(--text);
}

.cs-rows > li {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: 0.4rem;
    padding: 1.3rem 0;
    border-bottom: 1px solid var(--muted);
}

.cs-rows .cs-row-term {
    grid-column: 1 / span 4;
    font-family: var(--serif);
    font-size: clamp(1.4rem, 1.1rem + 1vw, 2.1rem);
    line-height: 1.1;
}

.cs-rows .cs-row-term.label {
    font-family: var(--body);
    font-size: 0.8125rem;
    color: var(--text);
    padding-top: 0.35rem;
}

.cs-rows .cs-row-text {
    grid-column: 5 / -1;
    max-width: 62ch;
}

/* Liste à puces éditoriale */

.cs-bullets {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.cs-bullets li {
    position: relative;
    padding-left: 1.6rem;
}

.cs-bullets li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--accent);
}

.shot-label {
    margin-bottom: 0.6rem;
    color: var(--text);
}

.next-project-text {
    flex-basis: 100%;
    text-align: right;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.2rem, 1rem + 0.7vw, 1.7rem);
}

/* Capture réelle avec légende */

.cs-shot {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.cs-shot img {
    width: 100%;
    border: 1px solid var(--text);
}

.cs-shot figcaption {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

/* Fin de page avec plusieurs liens */

.cs-end-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    padding-block: 1.6rem;
    border-top: 1px solid var(--muted);
}

/* Bloc pleine largeur d'un chapitre */

.cs-body-full {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.cs-body-full > p:not([class]) {
    max-width: 62ch;
}

/* Cadre recadrant une capture très haute */

.cs-frame {
    overflow: hidden;
    border: 1px solid var(--text);
}

.cs-frame--tall {
    aspect-ratio: 4 / 5;
}

.cs-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.cs-hero-caption {
    margin-top: 0.8rem;
}

/* ===================================================
   ÉTUDES DE CAS : FICHE, MARQUEURS [À COMPLÉTER], DISPONIBILITÉ
   =================================================== */

/* Information que seule Liliana peut donner : visible, à remplir avant publication */

.todo {
    font-style: italic;
    color: var(--text);
    border-bottom: 1px dashed var(--accent);
}

.todo-block {
    border: 1px dashed var(--accent);
    padding: 1.2rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.todo-block strong {
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.todo-block ul {
    padding-left: 1.2rem;
}

/* Fiche en tête d'étude de cas */

.cs-fiche {
    display: grid;
    grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
    border-top: 1px solid var(--text);
}

.cs-fiche dt,
.cs-fiche dd {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--muted);
}

.cs-fiche dt {
    padding-right: 1.5rem;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

.cs-fiche dd {
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Disponibilité (hero de l'accueil) */

.availability {
    margin-top: 1.4rem;
    font-weight: 600;
    max-width: 48ch;
}

.availability::before {
    content: '';
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    margin-right: 0.7rem;
    background-color: var(--accent);
    vertical-align: 0.05em;
}

.home-hero .btn-group {
    margin-top: 2rem;
}

/* Encadré « Ce que je cherche » */

.seek {
    grid-column: 1 / -1;
    border: 1px solid var(--text);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.seek-title {
    font-family: var(--serif);
    font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
    line-height: 1.1;
}

.seek dt {
    margin-bottom: 0.4rem;
}

.seek dd {
    font-size: 0.9375rem;
    line-height: 1.55;
}

/* Bloc « Vous voulez en parler ? » en fin d'étude de cas */

.cs-talk {
    padding-block: clamp(3rem, 6vw, 5rem);
    border-top: 1px solid var(--text);
}

.cs-talk p {
    font-family: var(--serif);
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.8rem);
    line-height: 1.15;
}

.cs-talk a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.cs-talk a:hover {
    color: var(--accent);
}

/* Liste « Ce que je sais faire » : preuve par projet */

.used-in {
    margin-top: 0.4rem;
}

.used-in a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Pied de page sur deux lignes */

.site-footer-inner {
    flex-direction: column;
    gap: 0.4rem;
}

.site-footer-inner .label a:hover {
    color: var(--accent);
}

/* Interventions (LK Boutique) */

.shot-block {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.shot-block + .shot-block {
    margin-top: clamp(3rem, 6vw, 5rem);
}

.contact-head {
    grid-column: 1 / -1;
}

/* Écran d'application dans le hero (NaturaQuest) */

.cs-hero-screen {
    max-height: 72vh;
    width: auto;
    margin-inline: auto;
}

/* ===================================================
   ÉTUDES DE CAS : DOSSIERS PDF, IMAGES, TABLEAU
   =================================================== */

/* Bouton « Découvrir le dossier complet » (ouvre le PDF dans un nouvel onglet) */

.cs-dossier {
    margin-top: 0.4rem;
}

/* Image large dans le hero (schéma, capture) */

.cs-hero-wide {
    width: 100%;
    height: auto;
    max-height: calc(var(--screen-h) - 8svh - 4rem);
    object-fit: contain;
    border: 1px solid var(--text);
}

/* Images avant / après */

.shot-img {
    width: 100%;
    height: auto;
    max-height: calc(var(--screen-h) * 0.55);
    object-fit: contain;
    border: 1px solid var(--text);
}

/* Tableau comparatif */

.cs-table-wrap {
    overflow-x: auto;
}

.cs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.cs-table caption {
    text-align: left;
    padding-bottom: 0.8rem;
}

.cs-table th,
.cs-table td {
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--muted);
    text-align: right;
    white-space: nowrap;
}

.cs-table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--text);
}

.cs-table th[scope="row"],
.cs-table thead th:first-child {
    text-align: left;
}

/* Colonne de l'entreprise analysée mise en avant */

.cs-table td:nth-child(2),
.cs-table thead th:nth-child(2) {
    font-weight: 600;
}

/* Intertitre dans le texte d'une section */

.cs-h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.7rem);
    line-height: 1.15;
    margin-top: 0.8rem;
}

/* Visuel ou tableau placé sous le titre d'une section, à côté du texte */

.cs-side .cs-proof {
    margin-top: 1.6rem;
}

.cs-side .cs-shot img {
    max-height: calc(var(--screen-h) * 0.5);
}

.cs-side .cs-table {
    font-size: 0.8125rem;
}

.cs-side .cs-table th,
.cs-side .cs-table td {
    padding: 0.45rem 0.5rem;
}

/* ===================================================
   HAUTEUR D'ÉCRAN
   Ajustements qui font tenir chaque section (ou chaque élément
   d'une section longue) dans la hauteur de l'écran.
   Ils complètent les règles ci-dessus et passent avant elles.
   =================================================== */

/* --- Accueil --- */

.home-hero {
    min-height: var(--screen-h);
    padding-block: clamp(20px, 4svh, 56px) clamp(16px, 3svh, 32px);
}

.home-title-main {
    font-size: clamp(2.2rem, min(5.2vw, 8svh), 6rem);
}

.home-lede {
    margin-top: clamp(1rem, 3svh, 2.5rem);
}

.photo-slot {
    max-height: calc(var(--screen-h) - 8rem);
}

.works-head {
    margin-bottom: clamp(2rem, min(6vw, 7svh), 5rem);
}

.work-visual {
    max-height: calc(var(--screen-h) - 4rem);
}

.about-grid .section-title {
    grid-column: 1 / span 4;
}

.contact-grid {
    row-gap: clamp(1.5rem, min(4vw, 4svh), 3.5rem);
}

.field textarea {
    height: 5.5rem;
}

.seek {
    padding: clamp(1.2rem, 3svh, 2rem);
}

/* --- Titres communs --- */

.section-head {
    margin-bottom: clamp(1.5rem, min(5vw, 5svh), 4rem);
}

.section-title {
    font-size: clamp(2.4rem, min(6vw, 9svh), 7rem);
}

/* --- Études de cas : hero --- */

.cs-hero {
    align-items: center;
    padding-block: clamp(24px, 5svh, 72px);
    row-gap: 2rem;
}

.cs-hero-text {
    gap: clamp(1.2rem, 3svh, 2.2rem);
}

.cs-title {
    font-size: clamp(2rem, min(4.2vw, 6.5svh), 4.8rem);
}

.cs-fiche dt,
.cs-fiche dd {
    padding-block: 0.45rem;
}

.cs-fiche dd {
    font-size: 0.875rem;
}

.cs-intro {
    font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
}

.cs-hero-visual .placeholder,
.cs-hero-visual .cs-frame {
    aspect-ratio: auto;
    height: min(calc(var(--screen-h) - 6rem), 760px);
}

.cs-hero-screen {
    max-height: calc(var(--screen-h) - 6rem);
}

/* --- Études de cas : contenu --- */

.cs-subtitle {
    font-size: clamp(1.8rem, min(1.2rem + 2.6vw, 6svh), 4rem);
}

.cs-rows > li {
    padding-block: 0.9rem;
}

.cs-rows .cs-row-term {
    font-size: clamp(1.2rem, 1rem + 0.7vw, 1.7rem);
}

/* Médias : jamais plus hauts que l'écran */

.placeholder--wide {
    max-height: calc(var(--screen-h) - 8rem);
}

.placeholder--shot {
    max-height: calc(var(--screen-h) * 0.55);
}

.cs-shot img {
    width: auto;
    max-width: 100%;
    max-height: calc(var(--screen-h) - 6rem);
    align-self: center;
}

.screen img {
    max-height: min(64vh, calc(var(--screen-h) - 10rem));
}

.cs-impact-figure strong {
    font-size: clamp(4.5rem, min(14vw, 22svh), 15rem);
}

.cs-talk {
    padding-block: clamp(1.8rem, 5svh, 3.5rem);
}

.cs-talk p {
    font-size: clamp(1.4rem, min(1.1rem + 1.2vw, 4.5svh), 2.4rem);
}

.next-project {
    padding-block: clamp(1.2rem, 3svh, 2.5rem);
}

.next-project-name {
    font-size: clamp(2.6rem, min(10vw, 15svh), 10rem);
}

/* --- Page À propos --- */

.hero {
    padding-block: clamp(40px, 8svh, 120px);
}

.hero-title {
    font-size: clamp(2.4rem, min(7vw, 10svh), 8rem);
}

.hero-title--long {
    font-size: clamp(2rem, min(4.6vw, 7svh), 5rem);
}

.bridge-link {
    padding-block: clamp(1.2rem, 3svh, 2.5rem);
}

.bridge-label,
.bridge-arrow {
    font-size: clamp(1.8rem, min(4.5vw, 7svh), 4.5rem);
}

@media (max-width: 1023px) {
    .about-grid .section-title {
        grid-column: 1 / -1;
    }

    .cs-hero-visual .placeholder,
    .cs-hero-visual .cs-frame {
        height: min(60svh, 560px);
    }
}

/* Titres à côté du contenu plutôt qu'au-dessus */

.home-title-main {
    font-size: clamp(2.2rem, min(5vw, 7.2svh), 6rem);
}

.home-lede {
    max-width: 54ch;
    font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem);
}

.about-grid {
    row-gap: clamp(1.5rem, 4svh, 3rem);
}

/* Contact : titre et liens à gauche, formulaire à droite */

.contact-head {
    grid-column: 1 / span 6;
}

.contact-form {
    grid-row: 1 / span 2;
    align-self: end;
}

/* Preuve placée sous un texte : moitié de l'écran au maximum */

.cs-body-full .cs-proof .placeholder--wide,
.cs-grid > .cs-full.cs-body-full .placeholder--wide {
    max-height: calc(var(--screen-h) * 0.45);
    aspect-ratio: auto;
    height: calc(var(--screen-h) * 0.45);
}

.cs-title {
    font-size: clamp(2rem, min(4vw, 6svh), 4.6rem);
}

/* Page À propos : titres de section à gauche, contenu à droite */

#competences > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--gutter);
    align-items: center;
}

#competences .section-title {
    font-size: clamp(2rem, min(4vw, 7svh), 4.6rem);
}

@media (max-width: 1023px) {
    .contact-head {
        grid-column: 1 / -1;
    }

    .contact-form {
        grid-row: auto;
    }

    #competences > .wrap {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Ajustements fins */

.cs-hero {
    padding-block: clamp(20px, 4svh, 56px);
}

.cs-hero-visual .placeholder,
.cs-hero-visual .cs-frame {
    height: min(calc(var(--screen-h) - 8svh - 4rem), 760px);
}

.cs-hero-screen {
    max-height: calc(var(--screen-h) - 8svh - 4rem);
}

.cs-body-full .cs-proof .placeholder--wide,
.cs-grid > .cs-full.cs-body-full .placeholder--wide {
    max-height: calc(var(--screen-h) * 0.38);
    height: calc(var(--screen-h) * 0.38);
}

/* Écrans d'application (NaturaQuest) : une seule rangée sur grand écran */

#construit .screens-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.2rem;
}

#construit .screen img {
    max-height: max(12rem, calc(var(--screen-h) - 26rem));
    width: auto;
    max-width: 100%;
    margin-inline: auto;
}

#construit .screen figcaption strong {
    font-size: 1.1rem;
}

#construit .screen figcaption span {
    font-size: 0.8125rem;
}

.seek dd {
    font-size: 0.875rem;
}

.cs-rows > li {
    padding-block: 0.75rem;
}

@media (max-width: 1023px) {
    #construit .screens-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Écrans peu hauts (ordinateurs portables) : on resserre encore */

@media (max-height: 850px) and (min-width: 1024px) {
    .cs-body-full .cs-proof .placeholder--wide,
    .cs-grid > .cs-full.cs-body-full .placeholder--wide {
        max-height: calc(var(--screen-h) * 0.3);
        height: calc(var(--screen-h) * 0.3);
    }

    .cs-rows > li {
        padding-block: 0.55rem;
    }

    .cs-fiche dt,
    .cs-fiche dd {
        padding-block: 0.35rem;
    }

    .seek {
        gap: 1rem;
    }
}

/* ===================================================
   ACCUEIL : CARTES PROJETS ET « QUI JE SUIS »
   =================================================== */

/* Grille de cartes : 2 grandes puis 3 plus petites */

.card-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: clamp(2rem, 5svh, 3.5rem);
}

.card {
    grid-column: span 2;
}

.card:nth-child(1),
.card:nth-child(2) {
    grid-column: span 3;
}

.card-link {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    height: 100%;
    text-decoration: none;
}

.card .work-visual {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 16 / 10;
    max-height: 34svh;
    margin-bottom: 0.4rem;
}

.card:nth-child(n + 3) .work-visual {
    aspect-ratio: 4 / 3;
}

.card:hover .work-visual {
    transform: translateY(-6px);
}

.card-meta {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
}

.card-name {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.6rem, min(2.4vw, 4.5svh), 2.6rem);
    line-height: 1;
}

.card-text {
    font-size: 0.9375rem;
    line-height: 1.5;
}

.card-fact {
    font-family: var(--serif);
    font-size: clamp(1.1rem, 1rem + 0.4vw, 1.4rem);
    line-height: 1.2;
}

.card-cta {
    margin-top: auto;
}

.card:hover .card-cta .arrow::after {
    content: '↗';
}

/* « Qui je suis » */

.who {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: 1.5rem;
    align-items: center;
}

.who .section-title {
    grid-column: 1 / span 5;
}

.who-text {
    grid-column: 7 / -1;
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
}

/* Frise du parcours (page À propos) */

.timeline-org {
    margin-bottom: 0.6rem;
    color: var(--bg);
    opacity: 0.8;
}

.timeline-content p {
    margin-bottom: 0.6rem;
}

.timeline-item {
    padding-bottom: clamp(1.4rem, 3.5svh, 2.6rem);
}

.timeline-content h4 {
    font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
}

.section--dark .text-link {
    color: var(--bg);
    border-color: var(--bg);
}

.timeline-end {
    margin-top: clamp(1.5rem, 4svh, 3rem);
}

.section--dark .btn-light {
    background-color: var(--bg);
    border-color: var(--bg);
    color: var(--text);
}

.section--dark .btn-light:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
}

@media (max-width: 1023px) {
    .card,
    .card:nth-child(1),
    .card:nth-child(2) {
        grid-column: span 3;
    }

    .card:nth-child(5) {
        grid-column: 1 / -1;
    }

    .who .section-title,
    .who-text {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .card-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .card,
    .card:nth-child(n) {
        grid-column: 1 / -1;
    }

    .card .work-visual,
    .card:nth-child(n + 3) .work-visual {
        aspect-ratio: 16 / 10;
        max-height: 30svh;
    }
}

/* Frise : trait et points entre les dates et le texte, version compacte */

#parcours {
    padding-block: clamp(28px, 5svh, 64px);
}

#parcours .section-head {
    margin-bottom: clamp(1rem, 2.5svh, 2rem);
}

#parcours .timeline-end {
    margin-top: clamp(0.8rem, 2svh, 1.5rem);
}

#parcours .section-title {
    font-size: clamp(2rem, min(4.5vw, 7svh), 4.6rem);
}

#parcours .timeline-item {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    column-gap: 2.5rem;
    padding-bottom: clamp(0.8rem, 2.2svh, 1.6rem);
    max-width: 980px;
}

#parcours .timeline-label {
    font-size: 1.05rem;
    white-space: nowrap;
    padding-right: 0;
    padding-top: 0.2rem;
}

#parcours .timeline-item::before {
    left: calc(7.5rem + 1.25rem - 5px);
}

#parcours .timeline-item:not(:last-child)::after {
    left: calc(7.5rem + 1.25rem);
}

#parcours .timeline-content h4 {
    font-size: clamp(1.25rem, 1rem + 0.8vw, 1.7rem);
    margin-bottom: 0.2rem;
}

#parcours .timeline-org {
    margin-bottom: 0.25rem;
}

#parcours .timeline-content p {
    margin-bottom: 0.25rem;
}

/* Frise en deux colonnes : expérience à gauche, formation à droite,
   du plus récent au plus ancien. Sur petit écran, l'une sous l'autre. */

.timeline-cols {
    display: grid;
    gap: clamp(2rem, 5svh, 3.5rem) var(--gutter);
}

.timeline-col-title {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding-bottom: 0.7rem;
    margin-bottom: clamp(1rem, 2.5svh, 1.6rem);
    border-bottom: 1px solid var(--muted);
}

@media (min-width: 1024px) {
    .timeline-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

@media (max-width: 767px) {
    #parcours .timeline-item {
        grid-template-columns: 5.5rem minmax(0, 1fr);
        column-gap: 1.5rem;
    }

    #parcours .timeline-label {
        font-size: 0.95rem;
    }

    #parcours .timeline-item::before {
        left: calc(5.5rem + 0.75rem - 5px);
    }

    #parcours .timeline-item:not(:last-child)::after {
        left: calc(5.5rem + 0.75rem);
    }
}

/* ===================================================
   HAUTEUR D'ÉCRAN — MOBILE (< 768px)
   Même règle : chaque section, ou chaque élément d'une section longue,
   doit tenir dans la hauteur du téléphone. Les visuels empilés sous
   le texte sont donc plafonnés en hauteur.
   =================================================== */

@media (max-width: 767px) {
    :root {
        --section-y: clamp(32px, 6svh, 56px);
    }

    /* Accueil */

    .home-hero {
        min-height: auto;
        padding-block: 1.2rem 1rem;
    }

    .home-title-main {
        font-size: clamp(1.9rem, min(8vw, 5.2svh), 2.8rem);
    }

    .home-lede {
        font-size: 0.9375rem;
        margin-top: 1rem;
    }

    .availability {
        font-size: 0.875rem;
    }

    .home-hero .btn-group {
        margin-top: 1.2rem;
    }

    .home-visual {
        margin-top: 1.5rem;
    }

    .photo-slot {
        aspect-ratio: 4 / 3;
        height: 32svh;
        width: calc(32svh * 3 / 4);
    }

    .work-visual {
        max-height: 38svh;
        aspect-ratio: 4 / 3;
    }

    /* Études de cas : haut de page */

    .cs-hero {
        padding-block: 1.2rem 1.5rem;
        row-gap: 1.2rem;
    }

    .cs-title {
        font-size: clamp(1.7rem, 7vw, 2.4rem);
    }

    .cs-fiche dt,
    .cs-fiche dd {
        padding-block: 0.3rem;
    }

    .cs-fiche dd {
        font-size: 0.8125rem;
    }

    .cs-intro {
        font-size: 0.9375rem;
    }

    .cs-hero-visual {
        max-width: none;
    }

    .cs-hero-visual .placeholder,
    .cs-hero-visual .cs-frame {
        height: 30svh;
        min-height: 0;
    }

    .cs-hero-screen,
    .cs-hero-wide {
        max-height: 34svh;
    }

    /* Études de cas : titres et médias */

    .cs-subtitle {
        font-size: clamp(1.6rem, 7vw, 2.2rem);
    }

    .section-title {
        font-size: clamp(2rem, 9vw, 3rem);
    }

    .cs-shot img,
    .cs-side .cs-shot img {
        max-height: 42svh;
    }

    /* Avant / après côte à côte pour tenir dans un écran */

    .shot {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 0.8rem;
    }

    .shot-before {
        grid-column: 1;
    }

    .shot-after {
        grid-column: 2;
    }

    .shot-img,
    .placeholder--shot {
        max-height: 34svh;
    }

    .placeholder,
    .cs-body-full .cs-proof .placeholder--wide,
    .cs-grid > .cs-full.cs-body-full .placeholder--wide {
        min-height: 0;
        height: 26svh;
        max-height: 26svh;
    }

    .screen img,
    #construit .screen img {
        max-height: 48svh;
    }

    .cs-impact-figure strong {
        font-size: clamp(3.6rem, 18vw, 5.5rem);
    }

    .cs-rows > li {
        padding-block: 0.55rem;
    }

    .cs-rows .cs-row-term {
        font-size: 1.15rem;
    }

    .cs-side .cs-shot img {
        max-height: 26svh;
    }

    .cs-side .cs-proof {
        margin-top: 1rem;
    }

    .cs-hero-visual .placeholder,
    .cs-hero-visual .cs-frame {
        height: 24svh;
    }

    .cs-hero-screen,
    .cs-hero-wide {
        max-height: 26svh;
    }

    .contact-links a {
        padding-block: 0.8rem;
    }

    .field textarea {
        height: 4rem;
    }
}

/* ===================================================
   RESPONSIVE — < 1024px
   =================================================== */

@media (max-width: 1023px) {
    .main-nav {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .home-hero {
        grid-template-rows: auto auto auto;
    }

    .home-hero-text {
        grid-column: 1 / -1;
    }

    .home-visual {
        grid-column: 5 / span 8;
        grid-row: 2;
        margin-top: 3rem;
    }

    .scroll-cue {
        grid-row: 3;
        margin-top: 2rem;
    }

    .works-head .section-title,
    .works-head .section-intro,
    .contact-links,
    .contact-form {
        grid-column: 1 / -1;
    }

    .works-head .section-intro {
        margin-top: 1.5rem;
    }

    /* Projets : image pleine largeur, texte en dessous */

    .work-visual {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    /* Études de cas */

    .cs-hero-text,
    .cs-hero-visual,
    .cs-grid > .cs-side,
    .cs-grid > .cs-main,
    .cs-impact-figure,
    .cs-impact-text {
        grid-column: 1 / -1;
    }

    .cs-hero-visual {
        max-width: 560px;
    }
}

/* ===================================================
   RESPONSIVE — < 768px : une colonne simple
   =================================================== */

@media (max-width: 767px) {
    .home-hero {
        min-height: auto;
    }

    .home-visual {
        grid-column: 1 / -1;
    }

    .hero .btn-group .btn {
        flex: 1 1 100%;
    }

    .screens-grid,
    #construit .screens-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 66%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 1rem;
        padding-bottom: 1rem;
    }

    .screen {
        scroll-snap-align: start;
    }

    .timeline-item {
        grid-template-columns: 5rem minmax(0, 1fr);
        gap: 1.5rem;
        padding-bottom: 3rem;
    }

    .timeline-item::before {
        left: calc(2.5rem - 5px);
    }

    .timeline-item:not(:last-child)::after {
        left: 2.5rem;
    }

    .timeline-content h4 {
        font-size: 1.7rem;
    }

    .shot-before,
    .shot-after {
        grid-column: 1 / -1;
    }

    .cs-fiche {
        grid-template-columns: minmax(0, 1fr);
    }

    .cs-fiche dt {
        border-bottom: none;
        padding-bottom: 0;
    }

    .cs-rows .cs-row-term,
    .cs-rows .cs-row-text {
        grid-column: 1 / -1;
    }
}

/* ===================================================
   ACCUEIL MOBILE : photo à côté du titre
   Le bloc texte « s'efface » (display: contents) pour que le titre
   et la photo partagent une même ligne ; le reste passe en dessous.
   =================================================== */
@media (max-width: 767px) {
    .home-hero {
        grid-template-columns: minmax(0, 1fr) 36%;
        grid-template-rows: none;
        column-gap: 1rem;
        align-items: start;
    }

    .home-hero-text {
        display: contents;
    }

    .home-hero .kicker {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-bottom: 1rem;
    }

    .home-title {
        grid-column: 1;
        grid-row: 2;
        align-self: center;
    }

    .home-title-main {
        font-size: clamp(1.4rem, 6.2vw, 2.1rem);
        line-height: 1.04;
    }

    .home-visual {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
        margin-top: 0;
    }

    .photo-slot {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 4;
    }

    .home-lede {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: 1.4rem;
    }

    .availability {
        grid-column: 1 / -1;
        grid-row: 4;
    }

    .home-hero .btn-group {
        grid-column: 1 / -1;
        grid-row: 5;
    }

    .scroll-cue {
        grid-column: 1 / -1;
        grid-row: 6;
        margin-top: 1.5rem;
    }
}

/* Écrans tactiles : pas d'état « survol » qui reste collé après un appui */
@media (hover: none) {
    .btn:hover {
        background-color: transparent;
        color: var(--text);
    }

    .btn-primary:hover {
        background-color: var(--text);
        border-color: var(--text);
        color: var(--bg);
    }
}

/* ===================================================
   PROJETS : GRILLE, FILTRES, GALERIE, FICHES COURTES
   (structure « Projets / Parcours »)
   =================================================== */

/* Grille de cartes : 3 colonnes, 2 en tablette, 1 sur mobile */

.card-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-grid--3 > .card,
.card-grid--3 > .card:nth-child(1),
.card-grid--3 > .card:nth-child(2) {
    grid-column: auto;
}

.card-grid--3 .card .work-visual,
.card-grid--3 .card:nth-child(n + 3) .work-visual {
    aspect-ratio: 4 / 3;
    max-height: 30svh;
}

.card-grid--3 .card-meta {
    flex-wrap: wrap;
    justify-content: space-between;
}

.card-skill {
    color: var(--accent);
}

.badge {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--text);
}

.card-grid--3 .visual-type .wordmark {
    font-size: clamp(2.4rem, 4.2vw, 5rem);
}

/* Quatre cartes par rangée sur grand écran :
   les 4 projets principaux, puis les 4 secondaires */

@media (min-width: 1200px) {
    .card-grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Projets principaux : deux cartes par rangée au maximum, image plus grande */

@media (min-width: 640px) {
    .card-grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.card-grid--2 .card .work-visual,
.card-grid--2 .card:nth-child(n + 3) .work-visual {
    aspect-ratio: 16 / 10;
    max-height: 46svh;
}

.card-grid--2 .card-text {
    max-width: 60ch;
}

/* Page Projets : titres « Projets principaux » / « Projets secondaires » */

.project-group + .project-group {
    margin-top: clamp(3rem, 8svh, 6rem);
}

.project-group[hidden] {
    display: none;
}

.project-group-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem);
    line-height: 1.1;
    padding-bottom: 0.8rem;
    margin-bottom: clamp(1.5rem, 4svh, 2.5rem);
    border-bottom: 1px solid var(--muted);
}

.works-all {
    margin-top: clamp(2rem, 5svh, 3.5rem);
}

@media (max-width: 1023px) {
    .card-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 639px) {
    .card-grid--3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Carte sans image : le nom du site en typographie */

.work-visual--type {
    display: grid;
    place-items: center;
    background-color: var(--text);
    color: var(--bg);
}

.work-visual--type span {
    font-family: var(--serif);
    font-size: clamp(1.5rem, 2.4vw, 2.25rem);
}

.work-visual--type span em {
    font-style: normal;
    color: var(--accent);
}

/* Emplacements d'images à venir */

.work-visual--slot {
    display: grid;
    place-items: center;
    background-color: transparent;
    border: 1px dashed var(--muted);
}

.slot-note {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

.img-slot {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
    border: 1px dashed var(--muted);
    text-align: center;
    color: var(--muted);
    max-height: 70svh;
}

.img-slot strong {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text);
}

.img-slot span {
    font-size: 0.875rem;
    max-width: 32ch;
}

.img-slot--wide { aspect-ratio: 16 / 9; }
.img-slot--shot { aspect-ratio: 4 / 3; }
.img-slot--tall { aspect-ratio: 4 / 5; }

.slot-pair,
.fiche-media {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gutter);
    margin-block: 2rem;
}

/* Page « Tous les projets » */

.hero--compact {
    padding-bottom: 1rem;
}

.hero-lede {
    max-width: 58ch;
    font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
}

.section--projects {
    padding-top: 1rem;
    border-top: none;
}

.filters {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.filter-toggle,
.filter {
    font-family: var(--body);
    font-size: 0.8125rem;
    font-weight: 600;
    min-height: 40px;
    padding: 0.4rem 0.9rem;
    background: none;
    border: 1px solid var(--text);
    color: var(--text);
    cursor: pointer;
}

.filter-count {
    color: var(--muted);
    font-weight: 400;
}

.filter[aria-pressed="true"] {
    background-color: var(--text);
    color: var(--bg);
}

.filter[aria-pressed="true"] .filter-count {
    color: var(--bg);
}

.filter-toggle {
    margin-bottom: 1rem;
}

.filter-toggle::after {
    content: ' +';
}

.filter-toggle[aria-expanded="true"]::after {
    content: ' −';
}

.filters[hidden],
.filter-toggle[hidden] {
    display: none;
}

.filter-toggle:hover,
.filter:hover {
    border-color: var(--accent);
}

.filters-status {
    min-height: 1.5em;
    margin-bottom: clamp(1.5rem, 4svh, 2.5rem);
}

.project-grid > .card[hidden] {
    display: none;
}

/* Galerie */

.gallery-thumb {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: zoom-in;
}

.gallery-thumb .work-visual {
    display: grid;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 30svh;
}

.gallery-caption {
    font-size: 0.9375rem;
    line-height: 1.5;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: 4rem var(--gutter);
    background-color: var(--text);
    color: var(--bg);
}

.lightbox[hidden] {
    display: none;
}

.lightbox-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: min(1100px, 100%);
}

.lightbox-media img {
    max-height: 75svh;
    width: auto;
}

.lightbox-media .img-slot {
    width: min(720px, 80vw);
    aspect-ratio: 4 / 3;
    border-color: var(--bg);
    color: var(--bg);
}

.lightbox-media .img-slot strong {
    color: var(--bg);
}

.lightbox-btn {
    position: absolute;
    min-width: 48px;
    min-height: 48px;
    font-size: 1.5rem;
    background: none;
    border: 1px solid var(--bg);
    color: var(--bg);
    cursor: pointer;
}

.lightbox-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-prev { left: 1rem; top: 50%; }
.lightbox-next { right: 1rem; top: 50%; }

/* Étude de cas : titre + accroche, « En bref » */

.cs-head {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cs-accroche {
    font-family: var(--serif);
    font-size: clamp(1.3rem, 1rem + 1vw, 2rem);
    line-height: 1.2;
    max-width: 36ch;
}

.cs-brief {
    list-style: none;
    display: grid;
    gap: 0.6rem;
    max-width: 62ch;
    padding-left: 1rem;
    border-left: 2px solid var(--accent);
}

.cs-brief li {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    column-gap: 1rem;
    align-items: baseline;
}

.cs-h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem);
    margin-top: 2rem;
}

.cs-links {
    margin-top: 1rem;
}

/* Étude de cas : images réelles, texte + image côte à côte, chiffres */

.cs-hero-photo img {
    width: 100%;
    max-height: 72svh;
    object-fit: cover;
}

.cs-figure {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.cs-figure img {
    width: 100%;
    max-height: 70svh;
    object-fit: contain;
    object-position: left top;
}

.cs-split {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: 1.5rem;
    align-items: center;
    margin-bottom: clamp(2.5rem, 6svh, 4rem);
}

.cs-split > .cs-body {
    grid-column: 1 / span 5;
}

.cs-split > .cs-figure {
    grid-column: 6 / -1;
}

.cs-body-text {
    max-width: 62ch;
}

.photo-row {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gutter);
    margin-top: 2rem;
}

.photo-row .cs-figure img {
    aspect-ratio: 2 / 3;
    max-height: 60svh;
    object-fit: cover;
}

.cs-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gutter);
    margin-bottom: 2.5rem;
}

.cs-stats dt {
    font-family: var(--serif);
    font-size: clamp(2.6rem, min(5vw, 9svh), 5.5rem);
    line-height: 1;
    color: var(--accent);
}

.cs-stats dd {
    margin-top: 0.8rem;
    max-width: 34ch;
}

/* Outils, rangés par catégorie */

.tool-list {
    list-style: none;
    display: grid;
    gap: 0.3rem;
}

.tool-list li {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    column-gap: 0.8rem;
    align-items: baseline;
}

/* Image sous le titre d'une section (colonne de gauche) */

.cs-side-figure {
    margin-top: clamp(1.5rem, 4svh, 2.5rem);
    max-width: 280px;
}

.cs-side-figure img {
    max-height: 48svh;
    width: auto;
}

.cs-figure--narrow {
    max-width: 340px;
}

/* Captures d'écran : deux côte à côte, ou trois captures hautes en entier */

.shot-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gutter);
    align-items: start;
    margin-block: 2rem;
}

.shot-pair .cs-figure img {
    object-fit: contain;
    max-height: 60svh;
}

.photo-row--screens {
    align-items: start;
    margin-bottom: 2rem;
}

/* Même hauteur pour les trois captures ; la légende démarre au bord gauche de l'image */
.photo-row--screens > li {
    display: flex;
    justify-content: center;
}

.photo-row--screens .cs-figure {
    width: fit-content;
    max-width: 100%;
}

.photo-row--screens .cs-figure img {
    aspect-ratio: auto;
    height: min(68svh, 760px);
    max-height: none;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.cs-figure a {
    display: block;
    cursor: zoom-in;
}

@media (max-width: 767px) {
    .shot-pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .cs-brief li {
        grid-template-columns: minmax(0, 1fr);
    }

    .cs-split > .cs-body,
    .cs-split > .cs-figure {
        grid-column: 1 / -1;
    }

    .photo-row,
    .cs-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .photo-row .cs-figure img {
        max-height: 70svh;
    }
}

/* Site intégré dans la page (iframe) */

.site-embed {
    position: relative;
    aspect-ratio: 16 / 10;
    max-height: 78svh;
    width: 100%;
    margin-block: 1.5rem 0.8rem;
    border: 1px solid var(--text);
    background-color: var(--text);
}

.site-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Image du hero en format paysage */

.cs-hero-photo--wide img {
    max-height: 60svh;
    object-fit: contain;
    object-position: center;
}

/* Liste à puces dans une étude de cas */

.cs-list {
    display: grid;
    gap: 0.5rem;
    padding-left: 1.2rem;
}

/* Image large sous le titre d'une section */

.cs-side-figure--wide {
    max-width: none;
}

.cs-side-figure--wide img {
    width: 100%;
    height: auto;
    max-height: none;
}

/* Petite frise (années + événement) */

.mini-timeline {
    list-style: none;
    display: grid;
    gap: 0.55rem;
}

.mini-timeline li {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: 1rem;
    align-items: baseline;
}

.mini-timeline strong {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.25rem;
    color: var(--accent);
}

/* Vidéos intégrées (YouTube, sans cookies) */

.video-row {
    grid-column: 6 / -1;
    display: flex;
    justify-content: center;
    gap: var(--gutter);
}

.video-row .video-figure {
    width: min(100%, calc(66svh * 9 / 16));
}

.video.video--vertical {
    aspect-ratio: 9 / 16;
}


.video-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gutter);
    margin-top: 1.5rem;
}

.video {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: var(--text);
}

.video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.cs-h3--first {
    margin-top: 0;
    margin-bottom: 1rem;
}

@media (max-width: 767px) {
    .video-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Rangée de visuels au même format (cartes, stories, carrousel) */

.visual-row {
    list-style: none;
    display: grid;
    gap: clamp(0.6rem, 1.5vw, 1.2rem);
    align-items: start;
    margin-top: 1.2rem;
}

.visual-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.visual-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.visual-row img {
    width: 100%;
    height: auto;
    max-height: 62svh;
    object-fit: contain;
    object-position: center top;
}

@media (max-width: 767px) {
    .visual-row--3,
    .visual-row--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Deux paragraphes côte à côte (desktop) */

.cs-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gutter);
    max-width: none;
}

@media (max-width: 767px) {
    .cs-cols {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cs-cols--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Recommandations numérotées */

.reco-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gutter);
    align-items: start;
}

.reco {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding-top: 1rem;
    border-top: 1px solid var(--text);
}

.reco-num {
    font-family: var(--serif);
    font-size: clamp(2.4rem, min(4vw, 7svh), 3.6rem);
    line-height: 1;
    color: var(--accent);
}

.reco-base {
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8125rem;
}

.reco-note {
    margin-top: 1rem;
    max-width: 34ch;
    color: var(--muted);
}

@media (max-width: 1023px) {
    .cs-cols--3,
    .reco-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Haut de page resserré : titre, accroche, boutons et image moins haute */

.cs-hero--compact {
    padding-block: clamp(32px, 5svh, 64px);
    align-items: center;
}

.cs-hero--compact .cs-hero-photo img {
    max-height: 54svh;
}

.cs-hero--compact .cs-hero-visual .cs-frame {
    height: 54svh;
}

.cs-hero--compact .cs-hero-visual .cs-frame img {
    height: 100%;
    width: auto;
    margin-inline: auto;
    object-fit: contain;
}

/* Flèche d'invitation à faire défiler, en bas du haut de page */

.cs-scroll-cue {
    grid-column: 1 / -1;
    justify-self: center;
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    margin-top: -1rem;
    color: var(--text);
    text-decoration: none;
    font-size: 1.5rem;
    line-height: 1;
    transition: color 0.2s ease;
}

.cs-scroll-cue:hover {
    color: var(--accent);
}

.cs-scroll-arrow {
    animation: cs-nudge 1.8s ease-in-out infinite;
}

@keyframes cs-nudge {
    0%, 100% { transform: translateY(-2px); }
    50%      { transform: translateY(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .cs-scroll-arrow { animation: none; }
}

/* « Le projet en bref » : les outils sous le titre */

.cs-brief-title {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-top: 0.4rem;
}

.cs-brief-tools {
    margin-top: clamp(2.5rem, 8svh, 4.5rem);
    max-width: 30rem;
}

.cs-brief-tools .tool-list {
    margin-top: 0.6rem;
}

.tool-list--brief li {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    column-gap: 1rem;
}

/* Deux boutons côte à côte */

.cs-links-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.tool-list--wide {
    max-width: 62ch;
    margin-block: 1rem;
}

.tool-list--wide li {
    grid-template-columns: 7rem minmax(0, 1fr);
}

.fiche .fiche-media.fiche-media--stack {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.2rem;
}

.fiche-media--stack .cs-figure img {
    max-height: 36svh;
    width: auto;
    max-width: 100%;
}

/* Fiche courte : titre en haut, images à gauche, texte à droite */

.fiche {
    padding-block: var(--section-y);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: clamp(1.5rem, 4svh, 2.5rem);
    align-items: center;
}

.fiche-head {
    grid-column: 1 / -1;
}

.fiche .fiche-media,
.fiche .fiche-screens {
    grid-column: 1 / span 7;
}

.fiche-text {
    grid-column: 8 / -1;
}

/* Fiche sans image : le texte se place sous le titre */
.fiche-head + .fiche-text {
    grid-column: 1 / span 7;
}

.cs-summary .cs-body {
    gap: clamp(1rem, 2.4svh, 1.6rem);
}

.cs-brief {
    gap: clamp(0.3rem, 1svh, 0.6rem);
}

#enseignements .cs-body {
    gap: clamp(0.9rem, 2svh, 1.4rem);
}

.cs-summary .cs-intro {
    max-width: none;
}

.fiche-head {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.fiche .fiche-media {
    margin: 0;
}

.fiche .img-slot {
    max-height: 58svh;
}

.fiche-screens .screen img {
    max-height: 48svh;
    width: auto;
}

.fiche-text {
    max-width: 62ch;
}

.fiche-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

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

.tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--muted);
}

.tag:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Parcours : libellés « Ce que j'y ai fait / appris » */

.timeline-key {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.7;
}

.section--dark .todo {
    color: var(--bg);
    opacity: 0.75;
}

/* Accueil : ligne des langues */

.home-langs {
    font-size: 0.875rem;
    color: var(--muted);
}

/* Anti-spam du formulaire : invisible pour les personnes */

.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

@media (max-width: 767px) {
    .slot-pair,
    .fiche-media {
        grid-template-columns: minmax(0, 1fr);
    }

    .fiche .fiche-media,
    .fiche .fiche-screens,
    .fiche-text,
    .fiche-head + .fiche-text {
        grid-column: 1 / -1;
    }

    .fiche .img-slot {
        max-height: 30svh;
    }

    .home-langs { grid-column: 1 / -1; grid-row: 5; }
    .home-hero .btn-group { grid-row: 6; }
    .scroll-cue { grid-row: 7; }

    .lightbox-prev,
    .lightbox-next {
        top: auto;
        bottom: 1rem;
    }
}

/* Accueil : ligne de preuve sous le paragraphe */
.home-proof {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.5;
}

/* Mobile : les boutons longs passent à la ligne, les vidéos verticales s'empilent */
@media (max-width: 600px) {
    .btn {
        white-space: normal;
        text-align: center;
    }

    .video-row {
        flex-direction: column;
        align-items: center;
    }

    .video-row .video-figure {
        width: 100%;
        max-width: 320px;
    }
}

/* Accueil : la phrase sous les trois domaines, plus petite que le titre */
.home-lede--phrase {
    font-family: var(--serif);
    font-size: clamp(1.2rem, 1rem + 0.8vw, 1.7rem);
    line-height: 1.25;
    max-width: 40ch;
    text-wrap: balance;
}

.home-lede--phrase .x {
    white-space: nowrap;
}

/* Accueil : les trois domaines sur une seule ligne, sans empattements */
.home-title {
    font-family: var(--body);
    font-weight: 600;
    letter-spacing: 0;
}

.home-title .home-title-main {
    display: inline;
    font-size: clamp(1.05rem, 1.75vw, 1.75rem);
    line-height: 1.3;
}

.home-title .home-title-main + .home-title-main::before {
    content: '· ';
    color: var(--accent);
}

@media (min-width: 1024px) {
    .home-title {
        white-space: nowrap;
    }
}

/* Accueil : domaines en majuscules, phrase sur deux lignes, éléments plus espacés */
.home-title .home-title-main {
    font-size: clamp(0.85rem, 1.2vw, 1.2rem);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.home-lede--phrase {
    max-width: none;
    margin-top: clamp(1.8rem, 5svh, 3rem);
}

.home-hero .btn-group {
    margin-top: clamp(2.2rem, 6svh, 3.5rem);
}

/* Première section d'une page : pas de filet au-dessus */
.section--plain {
    border-top: none;
}

.who-text .btn-group {
    margin-top: 2rem;
}

/* ===================================================
   CONTACT (fin de chaque page) : titre et réseaux à gauche,
   formulaire à droite
   =================================================== */

.contact-grid--simple .contact-head {
    align-self: start;
}

.contact-grid--simple .contact-form {
    grid-row: 1;
    align-self: start;
}

.social-links {
    list-style: none;
    display: flex;
    gap: 1.2rem;
    margin-top: clamp(1.5rem, 4svh, 2.5rem);
}

.social-links a {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--text);
    color: var(--text);
}

.social-links a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

@media (max-width: 1023px) {
    .contact-grid--simple .contact-form {
        grid-row: auto;
    }
}

/* ===================================================
   PIED DE PAGE : une ligne discrète, nom à gauche, liens à droite
   =================================================== */

.site-footer-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem 2rem;
    padding-block: 1.6rem;
    font-size: 0.875rem;
}

.footer-id {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    color: var(--muted);
}

.footer-id strong {
    font-weight: 700;
    color: var(--text);
}

.footer-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.6rem;
}

.footer-links a {
    text-decoration: none;
    color: var(--text);
}

.footer-links a:hover {
    color: var(--accent);
}

/* Contact : logos des réseaux sans cadre */

.social-links a {
    width: auto;
    height: auto;
    border: none;
    padding: 0.4rem;
    margin-left: -0.4rem;
}

/* ===================================================
   PIED DE PAGE en colonnes : nom (comme dans le menu),
   navigation, réseaux, informations
   =================================================== */

.site-footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 2rem var(--gutter);
    padding-block: clamp(2rem, 5svh, 3rem);
    font-size: 0.875rem;
}

.footer-id {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
}

.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.footer-col a {
    text-decoration: none;
    color: var(--text);
}

.footer-col a:hover,
.site-footer .brand:hover {
    color: var(--accent);
}

@media (max-width: 767px) {
    .site-footer-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-id {
        grid-column: 1 / -1;
    }
}

/* ===================================================
   ACCUEIL — hero sans photo : le texte respire
   =================================================== */

.home-hero--text .home-hero-text {
    grid-column: 1 / -1;
}

.home-hero--text .home-lede--phrase {
    font-size: clamp(1.3rem, 1rem + 1.3vw, 2.2rem);
    line-height: 1.15;
    max-width: none;
    margin-top: clamp(2.5rem, 7svh, 4.5rem);
}

.home-hero--text .btn-group {
    margin-top: clamp(3rem, 8svh, 5rem);
}

@media (max-width: 767px) {
    .home-hero--text {
        display: block;
    }

    .home-hero--text .home-hero-text {
        display: block;
    }

    .home-hero--text .scroll-cue {
        display: inline-block;
    }
}

/* « Qui je suis » (accueil) : le portrait sous le titre, le texte à droite */

.who--photo {
    align-items: start;
}

.who-photo {
    grid-column: 1 / span 4;
    grid-row: 2;
}

.who-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 30%;
}

.who--photo .who-text {
    grid-row: 1 / span 2;
}

@media (max-width: 1023px) {
    .who-photo {
        grid-column: 1 / -1;
        grid-row: auto;
        max-width: 320px;
    }

    .who--photo .who-text {
        grid-row: auto;
    }
}

/* Accueil : « Qui je suis » en version courte (une phrase, trois mots, un lien) */

.who-short {
    align-self: center;
}

.who-words {
    font-family: var(--serif);
    font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.4rem);
    line-height: 1.1;
}

/* Parcours : la frise commence sans titre de section */

#parcours .timeline-cols {
    padding-top: clamp(0.5rem, 2svh, 1.5rem);
}

/* Parcours — compétences : lignes plus aérées, noms de catégories en rouge */

#competences .cs-rows li {
    padding-block: clamp(1.4rem, 3.5svh, 2.2rem);
}

#competences .cs-row-term {
    color: var(--accent);
}

@media (max-width: 767px) {
    #competences .cs-row-term {
        margin-bottom: 0.5rem;
    }
}

/* Parcours — langues : une ligne par langue, le niveau à côté */

.lang-list {
    list-style: none;
    border-top: 1px solid var(--text);
    max-width: 34rem;
}

.lang-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--muted);
}

.lang-name {
    font-family: var(--serif);
    font-size: clamp(1.2rem, 1rem + 0.6vw, 1.6rem);
    line-height: 1.1;
    color: var(--accent);
}