/* =========================================================================
   LidTech Design — Walid Benjib
   Lane : fiche technique d'atelier. Papier machine, encre, oxyde.
   Toutes les paires de couleurs sont validees par calcul (RGAA 4.1 / WCAG AA).
   ========================================================================= */

/* --- Polices auto-hebergees (aucun appel tiers, RGPD) -------------------- */
@font-face {
    font-family: 'Archivo';
    src: url('../fonts/archivo-var.woff2') format('woff2-variations');
    font-weight: 400 900;
    font-stretch: 100%;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Azeret Mono';
    src: url('../fonts/azeret-mono-var.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metriques de repli calees sur Archivo : evite le saut de texte au chargement */
@font-face {
    font-family: 'Archivo Fallback';
    src: local('Arial'), local('Helvetica'), local('Liberation Sans');
    size-adjust: 101%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
}

/* --- Jetons -------------------------------------------------------------- */
:root {
    /* Couleur : strategie Committed. Le papier porte la surface, l'oxyde est
       porteur de sens (reperes, actions), jamais decoratif. */
    --paper: oklch(0.962 0.012 85);
    --paper-tint: oklch(0.935 0.015 84);
    --plate: oklch(0.985 0.005 85);
    --ink: oklch(0.245 0.014 62);
    --ink-soft: oklch(0.455 0.014 62);
    --oxide: oklch(0.495 0.152 34);
    --oxide-deep: oklch(0.395 0.130 33);
    --oxide-light: oklch(0.720 0.145 42);
    --paper-soft: oklch(0.800 0.012 80);
    --rule: oklch(0.845 0.014 84);
    --rule-strong: oklch(0.700 0.016 84);
    --rule-ui: oklch(0.585 0.018 70);
    --grid-line: oklch(0.930 0.010 85);

    /* Type : Archivo (grotesque utilitaire) + Azeret Mono (annotation de plan).
       Echelle quarte juste, bornee a 1,9x entre min et max. */
    --sans: 'Archivo', 'Archivo Fallback', system-ui, sans-serif;
    --mono: 'Azeret Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
    --t-hero: clamp(2.6rem, 1.55rem + 4.4vw, 5rem);
    --t-h2: clamp(1.8rem, 1.35rem + 1.9vw, 2.75rem);
    --t-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem);
    --t-h4: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
    --t-lead: clamp(1.1rem, 1.03rem + 0.35vw, 1.35rem);
    --t-body: 1.0625rem;
    --t-sm: 0.9375rem;
    --t-label: 0.75rem;

    /* Espace : base 4pt */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-6: 1.5rem;
    --s-8: 2rem;
    --s-12: 3rem;
    --s-16: 4rem;
    --s-24: 6rem;
    --s-section: clamp(4rem, 2.5rem + 6vw, 7.5rem);

    --marge: 8.5rem;
    /* colonne de reperage, comme la zone d'un plan */
    --sheet: 76rem;

    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
    --dur-fast: 130ms;
    --dur: 260ms;
    --dur-slow: 620ms;
}

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

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 6.5rem;
}

body {
    background-color: var(--paper);
    /* papier millimetre : trame de fond, purement decorative */
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 2.5rem 2.5rem;
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--t-body);
    line-height: 1.6;
    font-kerning: normal;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
}

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

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

a:hover {
    color: var(--oxide-deep);
}

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

::selection {
    background: var(--oxide);
    color: var(--paper);
}

/* --- Typographie --------------------------------------------------------- */
h1,
h2,
h3,
h4 {
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

h1 {
    font-size: var(--t-hero);
    letter-spacing: -0.03em;
}

h2 {
    font-size: var(--t-h2);
    letter-spacing: -0.02em;
}

h3 {
    font-size: var(--t-h3);
}

h4 {
    font-size: var(--t-h4);
    font-weight: 700;
    letter-spacing: -0.005em;
}

p {
    text-wrap: pretty;
}

.lead {
    font-size: var(--t-lead);
    line-height: 1.5;
    max-width: 34ch;
    font-weight: 500;
}

.prose {
    max-width: 62ch;
}

.prose>*+* {
    margin-top: var(--s-4);
}

.prose strong {
    font-weight: 700;
}

/* Label monospace : l'annotation de plan. Capitales -> interlettrage obligatoire. */
.label {
    font-family: var(--mono);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.label--oxide {
    color: var(--oxide);
}

.num {
    font-variant-numeric: tabular-nums;
}

/* --- Trame : la feuille et sa colonne de reperage ------------------------ */
.sheet {
    width: min(100% - 2.5rem, var(--sheet));
    margin-inline: auto;
}

.zone {
    padding-block: var(--s-section);
    border-top: 1px solid var(--rule-strong);
}

.zone--flush {
    border-top: 0;
}

.zone__grid {
    display: grid;
    gap: var(--s-8) var(--s-12);
}

@media (min-width: 62rem) {
    .zone__grid {
        grid-template-columns: var(--marge) minmax(0, 1fr);
    }
}

/* Le repere de zone : numero + intitule, dans la marge, comme sur un plan */
.zone__mark {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    position: sticky;
    top: 7rem;
    align-self: start;
    height: max-content;
}

.zone__mark .num {
    font-family: var(--mono);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--oxide);
}

.zone__mark .label {
    line-height: 1.3;
}

@media (max-width: 61.999rem) {
    .zone__mark {
        position: static;
    }
}

/* --- En-tete ------------------------------------------------------------- */
.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--ink);
    color: var(--paper);
    padding: var(--s-3) var(--s-6);
    font-weight: 600;
}

.skip:focus {
    left: 0;
}

.masthead {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in oklab, var(--paper) 92%, transparent);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--rule-strong);
}

.masthead__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    min-height: 4.25rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    text-decoration: none;
    color: var(--ink);
    padding-block: var(--s-2);
}

.brand__plate {
    width: 2.25rem;
    height: 2.25rem;
    object-fit: cover;
    border: 1px solid var(--rule-strong);
    background: var(--ink);
}

.brand__name {
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.brand__role {
    display: block;
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.nav {
    display: flex;
    align-items: center;
    gap: var(--s-6);
}

/* `:not(.btn)` est indispensable : sans lui, `.nav a` (0,1,1) ecrase `.btn`
   (0,1,0) et le bouton perd son padding et sa couleur de texte. */
.nav a:not(.btn) {
    color: var(--ink);
    text-decoration: none;
    font-size: var(--t-sm);
    font-weight: 500;
    padding: var(--s-3) 0;
    position: relative;
}

.nav a:not(.btn)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.55rem;
    height: 2px;
    background: var(--oxide);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease-out);
}

.nav a:not(.btn):hover::after,
.nav a:not(.btn)[aria-current='page']::after {
    transform: scaleX(1);
}

.nav a:not(.btn)[aria-current='page'] {
    font-weight: 700;
}

.burger {
    display: none;
    align-items: center;
    gap: var(--s-2);
    min-height: 2.75rem;
    padding: var(--s-2) var(--s-3);
    background: transparent;
    border: 1px solid var(--rule-ui);
    color: var(--ink);
    font-family: var(--mono);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
}

.burger__bars {
    display: grid;
    gap: 3px;
    width: 1rem;
}

.burger__bars span {
    height: 2px;
    background: currentColor;
    transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) linear;
}

.burger[aria-expanded='true'] .burger__bars span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

.burger[aria-expanded='true'] .burger__bars span:nth-child(2) {
    opacity: 0;
}

.burger[aria-expanded='true'] .burger__bars span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}

@media (max-width: 52rem) {
    .burger {
        display: inline-flex;
    }

    .nav {
        position: fixed;
        inset: 4.25rem 0 auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--paper);
        border-bottom: 1px solid var(--rule-strong);
        padding: var(--s-2) 1.25rem var(--s-6);
        max-height: calc(100dvh - 4.25rem);
        overflow-y: auto;
    }

    .nav[hidden] {
        display: none;
    }

    .nav a:not(.btn) {
        padding: var(--s-4) 0;
        border-bottom: 1px solid var(--rule);
        font-size: 1.1rem;
    }

    .nav a:not(.btn)::after {
        bottom: 0.9rem;
    }

    .nav .btn {
        margin-top: var(--s-4);
        justify-content: center;
    }
}

/* --- Actions ------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 2.875rem;
    padding: var(--s-3) var(--s-6);
    font-family: var(--sans);
    font-size: var(--t-sm);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--dur-fast) linear, color var(--dur-fast) linear,
        border-color var(--dur-fast) linear;
}

.btn--solid {
    background: var(--ink);
    color: var(--paper);
}

.btn--solid:hover {
    background: var(--oxide-deep);
    color: var(--paper);
}

.btn--outline {
    background: transparent;
    color: var(--ink);
    border-color: var(--rule-ui);
}

.btn--outline:hover {
    color: var(--oxide-deep);
    border-color: var(--oxide);
    background: color-mix(in oklab, var(--oxide) 7%, transparent);
}

.btn__arrow {
    transition: transform var(--dur) var(--ease-out);
}

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

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
}

/* --- 01 Identification --------------------------------------------------- */
.ident {
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--s-section);
}

.ident__grid {
    display: grid;
    gap: var(--s-12);
    align-items: end;
}

@media (min-width: 56rem) {
    .ident__grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
        gap: var(--s-16);
    }
}

.ident__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-6);
}

.ident__eyebrow .bar {
    flex: 1 1 2rem;
    height: 1px;
    background: var(--rule-strong);
    min-width: 2rem;
}

.ident h1 {
    margin-bottom: var(--s-6);
}

.ident h1 .fn {
    display: block;
}

.ident h1 .ln {
    display: block;
    color: var(--oxide);
}

.ident__lead {
    max-width: 44ch;
    margin-bottom: var(--s-8);
}

/* Fiche d'identification : liste de definitions, pas des cartes */
.specs {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--rule-strong);
    margin: 0;
}

.specs>div {
    display: grid;
    grid-template-columns: minmax(7.5rem, 12rem) minmax(0, 1fr);
    gap: var(--s-4);
    padding-block: var(--s-3);
    border-bottom: 1px solid var(--rule);
    align-items: baseline;
}

.specs dt {
    font-family: var(--mono);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.specs dd {
    margin: 0;
    font-size: var(--t-sm);
    font-weight: 500;
    /* une adresse e-mail est un jeton insecable : sans ceci elle deborde
       de sa colonne sur les petits ecrans */
    overflow-wrap: anywhere;
}

.specs--tight>div {
    grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr);
}

/* Sous 30rem, la paire libelle/valeur s'empile : deux colonnes deviennent
   illisibles a cette largeur. */
@media (max-width: 30rem) {

    .specs>div,
    .specs--tight>div {
        grid-template-columns: 1fr;
        gap: var(--s-1);
    }
}

/* --- Plaque d'illustration (le rendu comme planche de dossier) ----------- */
.plate {
    margin: 0;
}

.plate__frame {
    background: var(--plate);
    border: 1px solid var(--rule-strong);
    padding: var(--s-3);
    position: relative;
}

.plate__frame img {
    width: 100%;
}

.plate figcaption,
.plate__caption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-3);
    margin-top: var(--s-3);
    font-size: var(--t-sm);
    color: var(--ink-soft);
}

.plate figcaption .rep,
.plate__caption .rep {
    font-family: var(--mono);
    font-size: var(--t-label);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--oxide);
    white-space: nowrap;
}

.plate--portrait .plate__frame {
    padding: var(--s-2);
}

/* Marques de coin : le cadrage d'une photo de dossier */
.plate--portrait .plate__frame::before,
.plate--portrait .plate__frame::after {
    content: '';
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--oxide);
}

.plate--portrait .plate__frame::before {
    top: -1px;
    left: -1px;
    border-right: 0;
    border-bottom: 0;
}

.plate--portrait .plate__frame::after {
    bottom: -1px;
    right: -1px;
    border-left: 0;
    border-top: 0;
}

/* --- Lignes de prestation (pas de grille de cartes) ---------------------- */
.rows {
    border-top: 1px solid var(--rule-strong);
}

.row {
    display: grid;
    gap: var(--s-2) var(--s-8);
    padding-block: var(--s-6);
    border-bottom: 1px solid var(--rule);
    align-items: baseline;
}

@media (min-width: 48rem) {
    .row {
        grid-template-columns: 3.5rem minmax(0, 16rem) minmax(0, 1fr);
        padding-block: var(--s-8);
    }
}

.row__num {
    font-family: var(--mono);
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--oxide);
    letter-spacing: 0.06em;
}

.row__title {
    font-size: var(--t-h4);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.row__body {
    color: var(--ink-soft);
    max-width: 58ch;
}

.row__body strong {
    color: var(--ink);
    font-weight: 600;
}

/* --- Dossiers (les deux etudes de cas) ---------------------------------- */
.dossiers {
    display: grid;
    gap: var(--s-16);
}

.dossier {
    display: grid;
    gap: var(--s-6);
}

@media (min-width: 56rem) {
    .dossier {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: var(--s-12);
        align-items: center;
    }

    .dossier:nth-child(even) .dossier__plate {
        order: -1;
    }
}

.dossier__ref {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}

.dossier__ref .bar {
    flex: 1;
    height: 1px;
    background: var(--rule-strong);
}

.dossier h3 {
    margin-bottom: var(--s-4);
    max-width: 24ch;
}

.dossier__body {
    color: var(--ink-soft);
    max-width: 52ch;
    margin-bottom: var(--s-6);
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s-6);
}

.tags li {
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    border: 1px solid var(--rule-strong);
    padding: var(--s-1) var(--s-3);
    background: var(--paper-tint);
}

/* --- Colonnes de reference (moyens, normes, procedes) ------------------- */
.columns {
    display: grid;
    gap: var(--s-8);
}

@media (min-width: 48rem) {
    .columns {
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
        gap: var(--s-12);
    }
}

.column h3 {
    font-size: var(--t-h4);
    padding-bottom: var(--s-3);
    border-bottom: 2px solid var(--ink);
    margin-bottom: var(--s-4);
}

.list-plain {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-plain li {
    padding-block: var(--s-2);
    border-bottom: 1px solid var(--rule);
    font-size: var(--t-sm);
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    align-items: baseline;
}

.list-plain .meta {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    text-align: right;
    white-space: nowrap;
}

/* --- Methode ------------------------------------------------------------- */
.phases {
    display: grid;
    gap: var(--s-8);
    counter-reset: phase;
}

@media (min-width: 48rem) {
    .phases {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--s-8);
    }
}

.phase {
    border-top: 2px solid var(--ink);
    padding-top: var(--s-4);
}

.phase__step {
    font-family: var(--mono);
    font-size: var(--t-label);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--oxide);
    display: block;
    margin-bottom: var(--s-2);
}

.phase h3 {
    font-size: var(--t-h4);
    margin-bottom: var(--s-3);
}

.phase ul {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--ink-soft);
    font-size: var(--t-sm);
}

.phase li+li {
    margin-top: var(--s-2);
}

/* --- Bloc contact (surface encre) --------------------------------------- */
.contact {
    background: var(--ink);
    color: var(--paper);
    padding: clamp(2rem, 1.2rem + 3.5vw, 4rem);
    /* texte clair sur fond sombre : interligne et interlettrage compenses */
    line-height: 1.68;
    letter-spacing: 0.008em;
}

.contact h2 {
    color: var(--paper);
    max-width: 18ch;
    margin-bottom: var(--s-4);
}

.contact p {
    color: var(--paper-soft);
    max-width: 46ch;
    margin-bottom: var(--s-8);
}

.contact .label {
    color: var(--oxide-light);
}

.contact__grid {
    display: grid;
    gap: var(--s-8);
}

@media (min-width: 52rem) {
    .contact__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
        gap: var(--s-16);
        align-items: end;
    }
}

.contact .btn--solid {
    background: var(--paper);
    color: var(--ink);
}

.contact .btn--solid:hover {
    background: var(--oxide-light);
    color: var(--ink);
}

.contact .btn--outline {
    color: var(--paper);
    border-color: color-mix(in oklab, var(--paper) 45%, transparent);
}

.contact .btn--outline:hover {
    color: var(--ink);
    background: var(--paper);
    border-color: var(--paper);
}

.contact .specs {
    border-top-color: color-mix(in oklab, var(--paper) 40%, transparent);
}

.contact .specs>div {
    border-bottom-color: color-mix(in oklab, var(--paper) 20%, transparent);
}

.contact .specs dt {
    color: var(--paper-soft);
}

.contact .specs dd {
    color: var(--paper);
}

.contact a {
    color: var(--oxide-light);
}

.contact a:hover {
    color: var(--paper);
}

.contact :focus-visible {
    outline-color: var(--oxide-light);
}

/* --- Cartouche (le pied de plan) ---------------------------------------- */
.cartouche {
    border: 1px solid var(--rule-strong);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    margin-block: var(--s-12) var(--s-8);
}

.cartouche>div {
    padding: var(--s-4);
    border-right: 1px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule-strong);
}

.cartouche>div:last-child {
    border-right: 0;
}

.cartouche dt {
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: var(--s-1);
}

.cartouche dd {
    margin: 0;
    font-size: var(--t-sm);
    font-weight: 600;
}

.colophon {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-4);
    padding-bottom: var(--s-12);
    font-size: var(--t-sm);
    color: var(--ink-soft);
}

.colophon nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-6);
}

.colophon a {
    color: var(--ink-soft);
}

.colophon a:hover {
    color: var(--oxide-deep);
}

/* --- Pages etude de cas -------------------------------------------------- */
.breadcrumb {
    padding-block: var(--s-6) 0;
    font-size: var(--t-sm);
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--ink-soft);
}

.breadcrumb li+li::before {
    content: '/';
    margin-right: var(--s-3);
    color: var(--rule-strong);
}

.case-head {
    padding-block: var(--s-8) var(--s-12);
}

.case-head h1 {
    font-size: clamp(2.1rem, 1.4rem + 3vw, 3.9rem);
    max-width: 18ch;
    margin-block: var(--s-4) var(--s-6);
}

.case-head .lead {
    max-width: 54ch;
}

/* Tableaux techniques : nomenclature, contraintes, proprietes materiau */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--rule-strong);
    background: var(--plate);
}

table {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--t-sm);
    font-variant-numeric: tabular-nums;
}

caption {
    text-align: left;
    padding: var(--s-3) var(--s-4);
    background: var(--paper-tint);
    border-bottom: 1px solid var(--rule-strong);
    font-family: var(--mono);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
}

th,
td {
    text-align: left;
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}

thead th {
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--rule-strong);
    white-space: nowrap;
}

tbody tr:last-child td {
    border-bottom: 0;
}

tbody th {
    font-weight: 600;
}

td.num,
th.num {
    text-align: right;
    font-family: var(--mono);
    font-size: 0.85rem;
}

/* Sous-ensembles : alternance plaque / texte */
.subassembly {
    display: grid;
    gap: var(--s-6);
    padding-block: var(--s-12);
    border-bottom: 1px solid var(--rule);
}

@media (min-width: 52rem) {
    .subassembly {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: var(--s-12);
        align-items: start;
    }

    .subassembly:nth-of-type(even) .subassembly__plate {
        order: -1;
    }
}

.subassembly h3 {
    margin-bottom: var(--s-3);
}

.subassembly__body {
    color: var(--ink-soft);
    margin-bottom: var(--s-6);
    max-width: 52ch;
}

.callout {
    border-left: 0;
    border-top: 2px solid var(--oxide);
    background: var(--paper-tint);
    padding: var(--s-6);
    max-width: 62ch;
}

.callout .label {
    display: block;
    margin-bottom: var(--s-2);
    color: var(--oxide);
}

/* Champ legal non renseigne : volontairement impossible a manquer.
   Aucune occurrence ne doit subsister a la mise en ligne. */
.to-complete {
    display: inline-block;
    background: var(--oxide);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.15em 0.5em;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-4);
    padding-block: var(--s-12);
    border-top: 1px solid var(--rule-strong);
}

/* --- Mouvement ----------------------------------------------------------- */
/* L'etat masque n'existe que si JS a pris la main : sans JS, tout est visible. */
.js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-slow) var(--ease-out),
        transform var(--dur-slow) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
}

.js .reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Le trait de construction qui se trace */
.js .zone {
    background-image: linear-gradient(var(--oxide), var(--oxide));
    background-repeat: no-repeat;
    background-size: 0 2px;
    background-position: left top;
    transition: background-size 900ms var(--ease-out);
}

.js .zone.is-in {
    background-size: 100% 2px;
}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto !important;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .js .zone {
        background-image: none;
        transition: none;
    }

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

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* --- Impression : la page redevient une fiche ---------------------------- */
@media print {
    @page {
        margin: 14mm;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 10.5pt;
    }

    .masthead,
    .burger,
    .nav,
    .skip,
    .pagination,
    .actions {
        display: none !important;
    }

    .js .reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    .zone {
        padding-block: 12pt;
        break-inside: avoid;
    }

    .plate__frame,
    .table-wrap,
    .cartouche {
        border-color: #999;
    }

    .contact {
        background: #fff;
        color: #000;
        border: 1pt solid #999;
    }

    .contact h2,
    .contact p,
    .contact .specs dd,
    .contact a {
        color: #000;
    }

    a[href^='http']::after,
    a[href$='.pdf']::after {
        content: ' (' attr(href) ')';
        font-size: 8pt;
        color: #555;
        word-break: break-all;
    }

    .subassembly,
    .dossier,
    .phase {
        break-inside: avoid;
    }
}