@charset "UTF-8";

/* ============================================================
   SurMesure IT — feuille de style principale
   DA « atelier / plan de coupe » : trame blueprint, coutures
   pointillées, accent ambre. Aucun framework.
   ============================================================ */

@font-face {
    font-family: "Space Grotesk";
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/space-grotesk-500.woff2") format("woff2");
}

@font-face {
    font-family: "Space Grotesk";
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/space-grotesk-700.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter-400.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter-600.woff2") format("woff2");
}

:root {
    --bleu-nuit: #0b1626;
    --bleu-fonce: #122238;
    --bleu-moyen: #1f3a5c;
    --ambre: #f5a623;
    --ambre-fonce: #d98e0f;

    /* Déclinaison lisible de l'ambre pour du TEXTE sur fond clair
       (contraste ≥ 4,5:1 — WCAG AA — sur blanc comme sur --gris-clair). */
    --ambre-texte: #8f5a00;
    --ambre-pale: #ffd58a;
    --blanc: #fff;
    --gris-clair: #f4f6f9;
    --gris-bordure: #dde3ea;
    --texte: #24303e;
    --texte-attenue: #5b6b7c;
    --texte-sur-sombre: #c9d4e0;
    --erreur: #c0392b;
    --succes-fond: #e8f6ee;
    --succes-bord: #2e9e5b;
    --rayon: 12px;
    --ombre: 0 10px 30px rgb(11 22 38 / 10%);
    --largeur-max: 1120px;
    --police-titres: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
    --police-texte: "Inter", "Segoe UI", system-ui, sans-serif;

    /* Trame « plan de coupe » posée sur les fonds sombres. */
    --trame-blueprint:
        linear-gradient(rgb(201 212 224 / 5%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(201 212 224 / 5%) 1px, transparent 1px);
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--police-texte);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--texte);
    background: var(--blanc);
}

::selection { background: var(--ambre); color: var(--bleu-nuit); }

h1, h2, h3, h4 {
    font-family: var(--police-titres);
    line-height: 1.15;
    margin: 0 0 0.6em;
    letter-spacing: -0.015em;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; }
a { color: var(--bleu-moyen); }
a:hover { color: var(--ambre-texte); }

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

.container-narrow { max-width: 760px; }

.actions-centre { text-align: center; margin-top: 1.5rem; }

/* Section sombre collée à la précédente (stats + arguments enchaînés). */
.section-suite { padding-top: 0; }

.section { padding: 5rem 0; }
.section-alt { background: var(--gris-clair); }

.section-dark {
    background:
        var(--trame-blueprint),
        var(--bleu-nuit);
    background-size: 36px 36px, 36px 36px, auto;
    color: var(--texte-sur-sombre);
}
.section-dark h2 { color: var(--blanc); }

/* Étiquette de section, façon annotation de plan : « 01 — Services ». */
.kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--police-titres);
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ambre-texte);
    margin-bottom: 0.9rem;
}
.kicker-centre { justify-content: center; }

.kicker::before {
    content: "";
    width: 2.2rem;
    height: 0;
    border-top: 2px dashed var(--ambre);
}
.section-dark .kicker { color: var(--ambre); }

.section-intro {
    max-width: 680px;
    margin: 0 auto 3rem;
    text-align: center;
    color: var(--texte-attenue);
}
.section-intro .kicker { justify-content: center; }

.section-intro .kicker::after {
    content: "";
    width: 2.2rem;
    height: 0;
    border-top: 2px dashed var(--ambre);
}
.section-intro h2 { color: var(--texte); }
.section-dark .section-intro h2 { color: var(--blanc); }
.section-dark .section-intro { color: var(--texte-sur-sombre); }

.lead { font-size: 1.2rem; color: var(--texte-attenue); }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ambre);
    color: var(--bleu-nuit);
    padding: 0.5rem 1rem;
    z-index: 100;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------
   Apparition au défilement (classe posée par site.js)
   ------------------------------------------------------------ */

/* Gaté par html.js : sans JavaScript, tout reste visible. */
html.js .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
html.js .reveal.visible { opacity: 1; transform: none; }
.reveal-delai-1 { transition-delay: 0.1s; }
.reveal-delai-2 { transition-delay: 0.2s; }
.reveal-delai-3 { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .btn:hover { transform: none; }
    .mot-rotatif .mot { animation: none !important; }
    .marquee-piste { animation: none !important; }
}

/* ------------------------------------------------------------
   Boutons
   ------------------------------------------------------------ */
.btn {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    border-radius: 999px;
    font-family: var(--police-titres);
    font-weight: 700;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 1rem;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
    background: var(--ambre);
    color: var(--bleu-nuit) !important;
    box-shadow: 0 6px 18px rgb(245 166 35 / 35%);
}
.btn-primary:hover { background: var(--ambre-pale); box-shadow: 0 10px 24px rgb(245 166 35 / 45%); }

.btn-outline {
    border-style: dashed;
    border-color: var(--texte-sur-sombre);
    color: var(--blanc) !important;
    background: transparent;
}
.btn-outline:hover { border-color: var(--ambre); color: var(--ambre) !important; }

.btn-lg { padding: 0.95rem 2.3rem; font-size: 1.1rem; }

/* ------------------------------------------------------------
   En-tête & navigation
   ------------------------------------------------------------ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgb(11 22 38 / 92%);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgb(0 0 0 / 25%);
    border-bottom: 1px solid rgb(245 166 35 / 25%);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 70px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--police-titres);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--blanc);
    text-decoration: none;
}
.logo span { color: var(--ambre); }
.logo:hover { color: var(--blanc); }
.logo-marque { flex: none; }

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.7rem;
}

.site-nav a {
    color: var(--texte-sur-sombre);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.98rem;
}
.site-nav a:hover { color: var(--ambre); }

.nav-toggle { display: none; }
.nav-burger { display: none; }

@media (width <= 820px) {
    .nav-burger {
        display: flex;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        padding: 0.5rem;
    }

    .nav-burger span {
        width: 26px;
        height: 3px;
        background: var(--blanc);
        border-radius: 2px;
    }

    .site-nav {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--bleu-fonce);
        padding: 1rem 1.25rem 1.5rem;
        gap: 1rem;
        box-shadow: 0 12px 20px rgb(0 0 0 / 30%);
    }
    .site-nav a { padding: 0.35rem 0; }
    .site-nav .btn { text-align: center; }
    .nav-toggle:checked ~ .site-nav { display: flex; }
}

/* ------------------------------------------------------------
   Héros — plan de coupe : trame millimétrée + règle graduée
   ------------------------------------------------------------ */
.hero {
    position: relative;
    background:
        radial-gradient(1100px 550px at 85% -10%, rgb(245 166 35 / 16%), transparent 60%),
        var(--trame-blueprint),
        linear-gradient(160deg, var(--bleu-nuit) 55%, var(--bleu-fonce));
    background-size: auto, 36px 36px, 36px 36px, auto;
    color: var(--texte-sur-sombre);
    padding: 6.5rem 0 6rem;
    overflow: hidden;
}

/* Règle graduée le long du bord supérieur, clin d'œil au mètre de couturier. */
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 14px;
    background: repeating-linear-gradient(
        90deg,
        rgb(245 166 35 / 55%) 0 2px,
        transparent 2px 24px
    );
    mask-image: linear-gradient(180deg, #000 40%, transparent);
    -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent);
}
.hero h1 { color: var(--blanc); max-width: 780px; }
.hero .lead { color: var(--texte-sur-sombre); max-width: 620px; margin-bottom: 2.2rem; }

/* Mot rotatif de la promesse : « stocks / planning / factures… ». */
.mot-rotatif {
    display: inline-grid;
    vertical-align: bottom;
    color: var(--ambre);
    position: relative;
}

.mot-rotatif .mot {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(0.6em);
    transition: opacity 0.4s ease, transform 0.4s ease;
    white-space: nowrap;
}
.mot-rotatif .mot.actif { opacity: 1; transform: none; }

/* Sans JavaScript, le premier mot reste affiché. */
html:not(.js) .mot-rotatif .mot:first-child { opacity: 1; transform: none; }

.mot-rotatif::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.05em;
    border-bottom: 3px dashed rgb(245 166 35 / 55%);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.6rem;
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.8rem;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 0.95rem;
}
.hero-badges li::before { content: "\2714\20"; color: var(--ambre); font-weight: 700; } /* ✔ */

.page-hero {
    position: relative;
    background:
        var(--trame-blueprint),
        linear-gradient(160deg, var(--bleu-nuit) 55%, var(--bleu-fonce));
    background-size: 36px 36px, 36px 36px, auto;
    color: var(--texte-sur-sombre);
    padding: 3.75rem 0;
}
.page-hero h1 { color: var(--blanc); }
.page-hero .lead { max-width: 640px; }

/* ------------------------------------------------------------
   Bandeau défilant — les douleurs que le prospect reconnaît
   ------------------------------------------------------------ */
.marquee {
    background: var(--ambre);
    color: var(--bleu-nuit);
    overflow: hidden;
    padding: 0.7rem 0;
    transform: rotate(-1.2deg) scale(1.02);
    margin: -1.4rem 0;
    position: relative;
    z-index: 2;
    border-top: 3px dashed rgb(11 22 38 / 35%);
    border-bottom: 3px dashed rgb(11 22 38 / 35%);
}

.marquee-piste {
    display: flex;
    width: max-content;
    gap: 2.5rem;
    animation: defilement 28s linear infinite;
    font-family: var(--police-titres);
    font-weight: 700;
    font-size: 1.02rem;
    white-space: nowrap;
}
.marquee-piste span { display: inline-flex; align-items: center; gap: 2.5rem; }
.marquee-piste span::after { content: "\2702"; font-size: 0.9em; opacity: 0.7; } /* ✂ */

@keyframes defilement {
    to { transform: translateX(-50%); }
}

/* ------------------------------------------------------------
   Bandeau de chiffres (compteurs animés)
   ------------------------------------------------------------ */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 2rem;
    text-align: center;
}

.stat .chiffre {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.45rem;
    font-family: var(--police-titres);
    font-weight: 700;
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    color: var(--blanc);
    line-height: 1.1;
    white-space: nowrap;
    margin: 0;
}

.stat .chiffre em {
    font-style: normal;
    color: var(--ambre);
}

/* L'unité (« ans », « plateformes »…) reste discrète à côté du chiffre. */
.stat .chiffre .unite {
    font-size: 0.42em;
    letter-spacing: 0;
}

.stat .legende {
    color: var(--texte-sur-sombre);
    font-size: 0.98rem;
    margin: 0.3rem 0 0;
}

/* ------------------------------------------------------------
   Cartes de services
   ------------------------------------------------------------ */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.card {
    position: relative;
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-radius: var(--rayon);
    padding: 2.1rem 1.75rem;
    box-shadow: var(--ombre);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Liseré ambre qui se déploie au survol. */
.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    width: 0;
    background: linear-gradient(90deg, var(--ambre), var(--ambre-pale));
    transition: width 0.35s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgb(11 22 38 / 16%); }
.card:hover::before { width: 100%; }

.card .card-icone {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    margin-bottom: 1rem;
    border: 2px dashed rgb(245 166 35 / 65%);
    border-radius: 10px;
    background: rgb(245 166 35 / 8%);
}
.card p { color: var(--texte-attenue); flex-grow: 1; }

.card ul {
    padding-left: 1.1rem;
    margin: 0 0 1.25rem;
    color: var(--texte-attenue);
}
.card .card-lien { font-weight: 600; text-decoration: none; }
.card .card-lien::after { content: "\20\2192"; transition: margin-left 0.2s ease; } /* → */
.card:hover .card-lien::after { margin-left: 0.3rem; }

/* ------------------------------------------------------------
   Arguments / pourquoi moi
   ------------------------------------------------------------ */
.arguments {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
}
.argument h3 { color: var(--blanc); }
.argument h3::before { content: "\2014\20"; color: var(--ambre); } /* — */
.argument p { color: var(--texte-sur-sombre); margin: 0; }

/* ------------------------------------------------------------
   Étapes du process, reliées par une couture pointillée
   ------------------------------------------------------------ */
.etapes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.5rem;
    counter-reset: etape;
    position: relative;
}

.etape {
    position: relative;
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-radius: var(--rayon);
    padding: 1.85rem 1.5rem;
    counter-increment: etape;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.etape:hover { transform: translateY(-4px); box-shadow: var(--ombre); }

.etape::before {
    content: counter(etape, decimal-leading-zero);
    display: block;
    font-family: var(--police-titres);
    font-size: 2.1rem;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--ambre);
    margin-bottom: 0.5rem;
}

/* Couture reliant chaque étape à la suivante. */
.etape:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1.5rem;
    width: 1.5rem;
    border-top: 2px dashed var(--ambre);
}

@media (width <= 1020px) {
    .etape:not(:last-child)::after { display: none; }
}
.etape p { color: var(--texte-attenue); margin: 0; }

/* ------------------------------------------------------------
   Réalisations
   ------------------------------------------------------------ */
.realisation {
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-radius: var(--rayon);
    padding: 2rem 1.75rem;
    box-shadow: var(--ombre);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.realisation:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgb(11 22 38 / 14%); }
.realisation + .realisation { margin-top: 1.5rem; }
.realisation .contexte { color: var(--texte-attenue); }

.realisation .resultat {
    font-weight: 600;
    color: var(--texte);
    border-left: 4px solid var(--ambre);
    padding-left: 1rem;
    margin: 1rem 0 0;
}

/* Types de missions — liste à deux colonnes, coche ambre. */
.missions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2rem;
}
@media (max-width: 640px) {
    .missions { grid-template-columns: 1fr; }
}
.missions li {
    position: relative;
    padding-left: 2rem;
    color: var(--texte-attenue);
    line-height: 1.55;
}
.missions li::before {
    content: "\2714"; /* ✔ */
    position: absolute;
    left: 0;
    top: 0.05em;
    width: 1.3rem;
    height: 1.3rem;
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    color: var(--ambre-texte);
    border: 2px dashed rgba(245, 166, 35, 0.6);
    border-radius: 6px;
}

/* Témoignage — grande citation cousue main. */
.temoignage {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding: 2.5rem 2rem 2rem;
    text-align: center;
}

.temoignage::before {
    content: "\201C"; /* “ */
    position: absolute;
    top: -0.4rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--police-titres);
    font-size: 5rem;
    line-height: 1;
    color: var(--ambre);
}

.temoignage blockquote {
    margin: 0 0 1rem;
    font-family: var(--police-titres);
    font-size: clamp(1.2rem, 2.4vw, 1.55rem);
    font-weight: 500;
    color: var(--texte);
    line-height: 1.45;
}
.section-dark .temoignage blockquote { color: var(--blanc); }

.temoignage cite {
    font-style: normal;
    color: var(--texte-attenue);
    font-size: 0.98rem;
}
.section-dark .temoignage cite { color: var(--texte-sur-sombre); }

/* ------------------------------------------------------------
   FAQ
   ------------------------------------------------------------ */
.faq details {
    background: var(--blanc);
    border: 1px solid var(--gris-bordure);
    border-radius: var(--rayon);
    padding: 1rem 1.4rem;
    margin-bottom: 0.9rem;
    transition: border-color 0.2s ease;
}
.faq details[open] { border-color: var(--ambre); }

.faq summary {
    font-family: var(--police-titres);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--ambre); transition: transform 0.2s ease; }
.faq details[open] summary::after { content: "+"; transform: rotate(45deg); }
.faq details p { margin: 0.9rem 0 0.2rem; color: var(--texte-attenue); }

/* ------------------------------------------------------------
   Bandeau d'appel à l'action
   ------------------------------------------------------------ */
.cta-bandeau { text-align: center; }
.cta-bandeau h2 { color: var(--blanc); }
.cta-bandeau p { max-width: 560px; margin: 0 auto 2rem; }

/* ------------------------------------------------------------
   Formulaire de contact
   ------------------------------------------------------------ */
.contact-form { margin-top: 1rem; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

@media (width <= 640px) {
    .form-row { grid-template-columns: 1fr; }
}

.form-group { margin-bottom: 1.25rem; }

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--gris-bordure);
    border-radius: 8px;
    font: inherit;
    color: var(--texte);
    background: var(--blanc);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: 2px solid var(--ambre);
    outline-offset: 1px;
    border-color: var(--ambre);
}
.form-group textarea { resize: vertical; }

.form-group .field-validation-error,
.form-consent .field-validation-error {
    display: block;
    color: var(--erreur);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}
.form-group .input-validation-error { border-color: var(--erreur); }

.form-errors { color: var(--erreur); margin-bottom: 1rem; }
.form-errors ul { margin: 0; padding-left: 1.2rem; }

.form-consent label {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--texte-attenue);
}
.form-consent input { margin-top: 0.3rem; }

.form-note {
    margin-top: 0.9rem;
    font-size: 0.92rem;
    color: var(--texte-attenue);
}

/* Piège anti-spam : hors écran, jamais affiché aux humains. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Formulaire posé sur une section sombre (landing). */
.section-dark .form-consent label { color: var(--texte-sur-sombre); }
.section-dark .form-consent a { color: var(--ambre); }
.section-dark .form-note { color: #8a99ab; }
.section-dark .field-validation-error { color: #ff9d8a; }

.alert-success {
    background: var(--succes-fond);
    border: 1px solid var(--succes-bord);
    border-radius: var(--rayon);
    padding: 1.5rem 1.75rem;
}
.alert-success p { margin: 0.5rem 0 0; }

.contact-alt {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 2px dashed var(--gris-bordure);
    color: var(--texte-attenue);
    text-align: center;
}
.contact-alt p { margin: 0.2rem 0; }

/* ------------------------------------------------------------
   Page « site en préparation »
   ------------------------------------------------------------ */
.construction {
    min-height: 100vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 2rem;
    background:
        radial-gradient(1000px 500px at 85% -10%, rgb(245 166 35 / 16%), transparent 60%),
        var(--trame-blueprint),
        linear-gradient(160deg, var(--bleu-nuit) 55%, var(--bleu-fonce));
    background-size: auto, 36px 36px, 36px 36px, auto;
    color: var(--texte-sur-sombre);
}
.construction > div { max-width: 34rem; }
.construction .logo { font-size: 1.8rem; margin-bottom: 2.5rem; justify-content: center; }
.construction .kicker { color: var(--ambre); }
.construction h1 { color: var(--blanc); margin-bottom: 1rem; }
.construction p:last-child { color: var(--texte-sur-sombre); font-size: 1.1rem; margin: 0; }

/* ------------------------------------------------------------
   Contenu éditorial (pages légales, à propos…)
   ------------------------------------------------------------ */
.prose h2 { margin-top: 2.2rem; }
.prose h3 { margin-top: 1.6rem; }
.prose ul { color: var(--texte); }

/* ------------------------------------------------------------
   Pied de page
   ------------------------------------------------------------ */
.site-footer {
    background:
        var(--trame-blueprint),
        var(--bleu-nuit);
    background-size: 36px 36px, 36px 36px, auto;
    color: var(--texte-sur-sombre);
    padding: 3.5rem 0 1.5rem;
    font-size: 0.95rem;
    border-top: 3px dashed rgb(245 166 35 / 40%);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
}

@media (width <= 820px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (width <= 520px) {
    .footer-grid { grid-template-columns: 1fr; }
}
.logo-footer { font-size: 1.2rem; margin-bottom: 0.6rem; }

.site-footer h3 {
    color: var(--blanc);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.45rem; }
.site-footer a { color: var(--texte-sur-sombre); text-decoration: none; }
.site-footer a:hover { color: var(--ambre); }

.footer-bottom {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bleu-moyen);
    text-align: center;
    color: #8a99ab;
}