/* =============================================================================
   DESIGN SYSTEM — « Le dossier de production »
   L'esthétique des documents d'ingénierie : fiche d'intervenant, bordereau de
   livraison, tampon de recette. Papier blanc-froid teinté de vert, vert
   bancaire structurel, bronze (hérité du logo) réservé aux accents.

   Type    display  Bricolage Grotesque   titres
           accent   Instrument Serif ital mots soulignés (em.serif)
           corps    Instrument Sans
           utilitaire JetBrains Mono      eyebrows, prix, méta, réf.
   ============================================================================= */

:root {
    /* --- Papier & encres --------------------------------------------------- */
    --paper:        #F6F7F4;   /* fond général — blanc froid, pointe de vert  */
    --paper-2:      #EDF0EA;   /* bandes alternées                            */
    --card:         #FFFFFF;
    --ink:          #152019;   /* vert-noir, jamais de noir pur               */
    --ink-2:        #3E4C43;
    --muted:        #6D7B70;
    --line:         #DCE1D8;
    --line-strong:  #C2CABD;

    /* --- Marque ------------------------------------------------------------ */
    --green:        #1B4A3B;   /* vert bancaire — structurel, boutons, liens  */
    --green-deep:   #0E2E24;   /* section contact inversée, footer            */
    --green-soft:   #E2EBE4;
    --bronze:       #96671B;   /* l'or du logo, assombri pour le contraste    */
    --bronze-deep:  #7A5314;
    --bronze-soft:  #F2E8D2;
    --alert:        #A3403F;

    /* --- Compat (pages légales & anciens composants) ----------------------- */
    --accent:       var(--bronze);
    --accent-light: var(--bronze-soft);
    --accent-dark:  var(--bronze-deep);
    --text-primary: var(--ink);
    --text-body:    var(--ink-2);
    --mid-gray:     var(--muted);
    --dim-gray:     var(--muted);
    --warm-gray:    var(--ink-2);
    --bg-color:     var(--paper);
    --bg-1:         var(--paper);
    --bg-2:         var(--card);
    --bg-3:         var(--paper-2);
    --black:        var(--ink);
    --black-4:      var(--line-strong);
    --white:        var(--ink);      /* les anciens titres clairs deviennent encre */
    --ivory:        var(--ink-2);
    --cream:        var(--ink-2);

    /* --- Typographie ------------------------------------------------------- */
    --f-display: "Bricolage Grotesque", "Segoe UI", Arial, sans-serif;
    --f-serif:   "Instrument Serif", Georgia, serif;
    --f-body:    "Instrument Sans", "Segoe UI", Arial, sans-serif;
    --f-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

    --font-6xl: clamp(2.6rem, 5.4vw, 4.1rem);
    --font-5xl: clamp(2rem, 3.6vw, 2.7rem);
    --font-4xl: 1.6rem;
    --font-3xl: 1.3rem;
    --font-2xl: 1.15rem;

    /* --- Rythme ------------------------------------------------------------ */
    --container: 1140px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --section-y: clamp(4.5rem, 9vw, 7.5rem);
    --spacing-xxl: var(--section-y);

    /* --- Matière ----------------------------------------------------------- */
    --radius: 14px;
    --radius-sm: 8px;
    --shadow: 0 1px 2px rgba(21, 32, 25, .05), 0 14px 34px -22px rgba(21, 32, 25, .28);
    --shadow-lift: 0 2px 4px rgba(21, 32, 25, .06), 0 22px 46px -20px rgba(21, 32, 25, .34);

    /* Quadrillage millimétré — la texture du papier technique */
    --grid-paper:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink-2);
    font-family: var(--f-body);
    font-size: 16.5px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--bronze-soft); color: var(--ink); }

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

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--bronze); }

h1, h2, h3, h4 {
    font-family: var(--f-display);
    color: var(--ink);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0;
    text-wrap: balance;
    font-weight: 700;
}

p { margin: 0 0 1rem; }

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

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

/* Les mots à l'italique serif — la respiration humaine dans le technique */
em.serif, .serif {
    font-family: var(--f-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--bronze);
    letter-spacing: 0;
}

.gold-text { color: var(--bronze); }

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

section { position: relative; }

/* =============================================================================
   EN-TÊTE DE SECTION — la ligne de registre
   ============================================================================= */
.section-header {
    max-width: 720px;
    margin-bottom: clamp(2.2rem, 5vw, 3.4rem);
}

.section-eyebrow {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-family: var(--f-mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bronze);
    margin-bottom: 1.1rem;
}

.section-eyebrow::before {
    content: "";
    width: 2.2rem;
    height: 1px;
    background: var(--bronze);
    flex: 0 0 auto;
}

.section-title {
    font-size: var(--font-5xl);
    font-weight: 750;
    margin-bottom: .9rem;
}

.section-subtitle {
    color: var(--muted);
    font-size: 1.02rem;
    max-width: 58ch;
    margin: 0;
}

/* =============================================================================
   BOUTONS
   ============================================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--f-display);
    font-size: .95rem;
    font-weight: 650;
    letter-spacing: .01em;
    padding: .78rem 1.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease,
                background .18s ease, color .18s ease, border-color .18s ease;
    text-decoration: none;
}

.btn-primary {
    background: var(--green);
    color: #F4F6F1;
    box-shadow: var(--shadow);
}
.btn-primary:hover {
    background: var(--green-deep);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
}

.btn-secondary {
    background: transparent;
    color: var(--ink);
    border-color: var(--line-strong);
}
.btn-secondary:hover {
    border-color: var(--bronze);
    color: var(--bronze-deep);
    transform: translateY(-2px);
}

.btn i { font-size: .85em; }

/* =============================================================================
   ÉTIQUETTES
   ============================================================================= */
.tag {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--ink-2);
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .22rem .65rem;
    white-space: nowrap;
}

/* =============================================================================
   LE TAMPON — la signature du site. À n'apposer que sur ce qui est vrai.
   ============================================================================= */
.stamp {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--bronze-deep);
    border: 2px solid currentColor;
    border-radius: 6px;
    padding: .34rem .8rem .3rem;
    box-shadow: inset 0 0 0 2px var(--card), inset 0 0 0 3px currentColor;
    transform: rotate(-5deg);
    opacity: .92;
    pointer-events: none;
    user-select: none;
}

/* =============================================================================
   APPARITIONS AU DÉFILEMENT (pilotées par main.js : data-reveal)
   ============================================================================= */
.reveal-hidden { opacity: 0; transform: translateY(22px); }
.revealed {
    opacity: 1;
    transform: none;
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .25, 1);
}

/* =============================================================================
   ACCESSIBILITÉ & DIVERS
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
    .reveal-hidden { opacity: 1; transform: none; }
}

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 8px;
    border: 3px solid var(--paper-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

@media (max-width: 576px) {
    body { font-size: 15.5px; }
}