/* =====================================================================
   Les Ravitailleurs — feuille de style du site public
   ---------------------------------------------------------------------
   Le menu déroulant, le menu mobile et la carte cliquable sont obtenus
   uniquement en CSS et en HTML — aucun script n'intervient dans la
   navigation. Le seul JavaScript du site (site.js) se contente d'animer
   les chiffres, et la page est complète sans lui.

   Sommaire
     1. Charte et variables
     2. Réglages généraux
     3. Titres, textes, listes
     4. Boutons
     5. En-tête et navigation
     6. Bandeaux
     7. Sections et blocs
     8. Le cœur de notre métier
     9. Carte des sites et fiches de dépôt
    10. Chiffres, valeurs, frise
    11. Formulaire de contact
    12. Pied de page
    13. Impression
   ===================================================================== */

/* ------------------------------------------------------------------ *
   1. Charte et variables
 * ------------------------------------------------------------------ */

:root {
    /* Couleurs de la charte */
    --rouge:        #ae1f2f;
    --rouge-fonce:  #8a1826;
    --rouge-nuit:   #5e1019;
    --jaune:        #ffe7ac;
    --jaune-clair:  #fff4d8;
    --bleu:         #c9e4f8;
    --orange:       #f7ae83;

    /* Neutres, réchauffés pour s'accorder au jaune de la charte */
    --encre:        #241a1c;
    --encre-douce:  #5b4f51;
    --creme:        #fdfaf4;
    --creme-fonce:  #f6efe2;
    --blanc:        #ffffff;
    --trait:        #e7ddcb;

    /* Rythme vertical */
    --pas:          clamp(3.5rem, 7vw, 6.5rem);
    --gouttiere:    clamp(1.25rem, 3vw, 2.5rem);

    /* Arrondis, empruntés aux formes du logo */
    --arrondi:      1.25rem;
    --arrondi-l:    2rem;
    --arrondi-pill: 999px;

    --ombre:        0 1px 2px rgba(36, 26, 28, .04), 0 8px 24px rgba(36, 26, 28, .06);
    --ombre-forte:  0 2px 4px rgba(36, 26, 28, .06), 0 18px 44px rgba(36, 26, 28, .12);

    --largeur:      1200px;
    --largeur-texte: 68ch;

    --police: "Segoe UI Variable Display", "Segoe UI", -apple-system,
              BlinkMacSystemFont, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ------------------------------------------------------------------ *
   2. Réglages généraux
 * ------------------------------------------------------------------ */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--police);
    font-size: clamp(1rem, .96rem + .2vw, 1.09rem);
    line-height: 1.65;
    color: var(--encre);
    background: var(--creme);
    -webkit-font-smoothing: antialiased;
}

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

.container {
    width: min(100% - 2.5rem, var(--largeur));
    margin-inline: auto;
}

.container--etroit { width: min(100% - 2.5rem, 860px); }

/* Cible de saut clavier, visible seulement au focus. */
.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: .75rem 1.25rem;
    background: var(--rouge);
    color: var(--blanc);
    border-radius: 0 0 var(--arrondi) 0;
}
.skip:focus { left: 0; }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--rouge);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ------------------------------------------------------------------ *
   3. Titres, textes, listes
 * ------------------------------------------------------------------ */

h1, h2, h3, h4 {
    margin: 0 0 .6em;
    line-height: 1.08;
    letter-spacing: -.02em;
    font-weight: 800;
    text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 2.1vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); }
h4 { font-size: 1.05rem; letter-spacing: 0; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--rouge); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--rouge-fonce); }

strong, b { font-weight: 700; }

.surtitre {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--rouge);
}
.sur-fonce .surtitre { color: var(--jaune); }

.chapo {
    font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
    line-height: 1.55;
    color: var(--encre-douce);
    max-width: var(--largeur-texte);
}
.sur-fonce .chapo { color: rgba(255, 255, 255, .88); }

.texte { max-width: var(--largeur-texte); }

/* Liste à puces maison : la puce reprend le rouge de la charte. */
.puces {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    gap: .85rem;
}
.puces li {
    position: relative;
    padding-left: 2rem;
}
.puces li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: var(--rouge);
}
.sur-fonce .puces li::before { background: var(--jaune); }

/* Variante compacte, à l'intérieur d'une carte. */
.puces--serre {
    margin-bottom: 0;
    gap: .6rem;
    font-size: .97rem;
    color: var(--encre-douce);
}
.puces--serre li { padding-left: 1.35rem; }
.puces--serre li::before { width: .45rem; height: .45rem; top: .68em; }
.carte--jaune .puces--serre,
.carte--bleu .puces--serre,
.carte--orange .puces--serre { color: var(--encre); }

/* Filet décoratif sous un titre de section. */
.filet {
    width: 3.5rem;
    height: .3rem;
    border-radius: var(--arrondi-pill);
    background: var(--rouge);
    margin: 0 0 1.5rem;
}
.sur-fonce .filet { background: var(--jaune); }

/* ------------------------------------------------------------------ *
   4. Boutons
 * ------------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1.7rem;
    border: 2px solid transparent;
    border-radius: var(--arrondi-pill);
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease,
                color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primaire {
    background: var(--rouge);
    color: var(--blanc);
    box-shadow: var(--ombre);
}
.btn--primaire:hover { background: var(--rouge-fonce); color: var(--blanc); }

.btn--jaune {
    background: var(--jaune);
    color: var(--encre);
}
.btn--jaune:hover { background: var(--jaune-clair); color: var(--encre); }

.btn--contour {
    border-color: currentColor;
    color: var(--rouge);
    background: transparent;
}
.btn--contour:hover { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }

.sur-fonce .btn--contour { color: var(--blanc); }
.sur-fonce .btn--contour:hover { background: var(--blanc); border-color: var(--blanc); color: var(--rouge); }

.btn--petit { padding: .6rem 1.2rem; font-size: .92rem; }

.boutons {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 1.75rem;
}
.boutons--centre { justify-content: center; }

/* Lien fléché discret, pour les cartes. */
.lien-fleche {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    text-decoration: none;
}
.lien-fleche::after {
    content: "→";
    transition: transform .15s ease;
}
.lien-fleche:hover::after { transform: translateX(4px); }

/* ------------------------------------------------------------------ *
   5. En-tête et navigation
 * ------------------------------------------------------------------ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(253, 250, 244, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--trait);
}

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

/* flex-shrink: 0 — sans lui, le menu comprime la marque quand la place
   manque, et le logo se retrouve écrasé au lieu de déclencher le passage
   au menu mobile. */
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
/* Calibré pour que, juste au-dessus du point de bascule (1200 px), le logo
   et le menu déployé tiennent ensemble dans le conteneur. */
.brand img { width: clamp(9rem, 13vw, 11.5rem); }

/* --- Bouton du menu mobile (case à cocher masquée) ------------------ */

/* Case à cocher du menu mobile : invisible, mais bien réelle — c'est elle
   qui ouvre le menu, sans JavaScript. Sur grand écran elle est retirée de
   l'arbre d'accessibilité : son libellé y est masqué, la laisser dans l'ordre
   de tabulation ferait tomber le clavier sur une commande sans effet. */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

@media (min-width: 1201px) {
    .nav-toggle { display: none; }
}

.nav-toggle-label {
    display: none;
    align-items: center;
    gap: .55rem;
    padding: .55rem .95rem;
    border: 2px solid var(--rouge);
    border-radius: var(--arrondi-pill);
    color: var(--rouge);
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    user-select: none;
}
.nav-toggle-label .barres {
    display: block;
    width: 1.1rem;
    height: 2px;
    background: currentColor;
    position: relative;
}
.nav-toggle-label .barres::before,
.nav-toggle-label .barres::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
}
.nav-toggle-label .barres::before { top: -6px; }
.nav-toggle-label .barres::after  { top: 6px; }

.nav-toggle:focus-visible + .nav-toggle-label {
    outline: 3px solid var(--rouge);
    outline-offset: 3px;
}

/* --- Menu principal ------------------------------------------------- */

.nav-liste {
    display: flex;
    align-items: center;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-liste > li { position: relative; }

.nav-liste a {
    display: block;
    padding: .6rem .8rem;
    border-radius: var(--arrondi-pill);
    color: var(--encre);
    font-weight: 600;
    font-size: .96rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.nav-liste a:hover { background: var(--creme-fonce); color: var(--rouge); }

.nav-liste a[aria-current] {
    color: var(--rouge);
    background: var(--jaune);
}

.nav-cta a {
    background: var(--rouge);
    color: var(--blanc);
    padding-inline: 1.25rem;
}
.nav-cta a:hover,
.nav-cta a[aria-current] { background: var(--rouge-fonce); color: var(--blanc); }

/* Le chevron indique qu'un sous-menu existe. */
.a-sous-menu > a::after {
    content: "";
    display: inline-block;
    margin-left: .45rem;
    border: .3rem solid transparent;
    border-top-color: currentColor;
    transform: translateY(.15rem);
}

.sous-menu {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    min-width: 19rem;
    padding: .5rem;
    margin: 0;
    list-style: none;
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: var(--arrondi);
    box-shadow: var(--ombre-forte);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-.4rem);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

/* Ouverture au survol ET au clavier : :focus-within couvre la tabulation. */
.a-sous-menu:hover > .sous-menu,
.a-sous-menu:focus-within > .sous-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sous-menu a {
    padding: .65rem .85rem;
    border-radius: .75rem;
    font-weight: 600;
}
.sous-menu a span {
    display: block;
    font-weight: 500;
    font-size: .84rem;
    color: var(--encre-douce);
}
.sous-menu a:hover span { color: var(--rouge); }

@media (max-width: 1200px) {
    .nav-toggle-label { display: inline-flex; }

    .nav-liste {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: .15rem;
        padding: 1rem;
        background: var(--creme);
        border-bottom: 1px solid var(--trait);
        box-shadow: var(--ombre-forte);
        max-height: calc(100vh - 4.75rem);
        overflow-y: auto;
    }
    .nav-toggle:checked ~ .nav-liste { display: flex; }

    .nav-liste a { padding: .8rem 1rem; font-size: 1.02rem; }
    .a-sous-menu > a::after { display: none; }

    /* Sur mobile le sous-menu est simplement décalé, jamais superposé. */
    .sous-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        margin: .1rem 0 .4rem .75rem;
        padding: .25rem;
        border: 0;
        border-left: 3px solid var(--jaune);
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }
    .nav-cta a { text-align: center; margin-top: .35rem; }
}

/* ------------------------------------------------------------------ *
   6. Bandeaux
 * ------------------------------------------------------------------ */

.hero {
    position: relative;
    overflow: hidden;
    background: var(--rouge);
    color: var(--blanc);
}

/* Halo discret : donne du relief au rouge plein. */
.hero::before {
    content: "";
    position: absolute;
    inset: -30% -10% auto auto;
    width: 46rem;
    height: 46rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 231, 172, .18), transparent 62%);
    pointer-events: none;
}

.hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
    padding-block: clamp(3rem, 6vw, 5rem);
}

.hero h1 { color: var(--blanc); }
.hero p { color: rgba(255, 255, 255, .9); }

/* --- Accueil : le bandeau animé occupe toute la largeur --------------- */

.hero--accueil { padding-bottom: clamp(3rem, 6vw, 5rem); }

.hero-bandeau img {
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
}

.hero-texte {
    position: relative;
    text-align: center;
    max-width: 54rem;
    margin-top: clamp(1.5rem, 4vw, 3rem);
}
.hero-texte .chapo { margin-inline: auto; }

.hero-visuel {
    border-radius: var(--arrondi-l);
    overflow: hidden;
    box-shadow: var(--ombre-forte);
}
.hero-visuel img { width: 100%; }

@media (max-width: 900px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-visuel { order: -1; }
}

/* --- Bandeau des pages intérieures ---------------------------------- */

.page-hero {
    background: var(--rouge);
    color: var(--blanc);
    padding-block: clamp(2.5rem, 5vw, 4rem);
}
.page-hero h1 { color: var(--blanc); margin-bottom: .5rem; }
.page-hero .chapo { color: rgba(255, 255, 255, .88); }

.page-hero--jaune { background: var(--jaune); color: var(--encre); }
.page-hero--jaune h1 { color: var(--encre); }
.page-hero--jaune .chapo { color: var(--encre-douce); }
.page-hero--jaune .fil a { color: var(--encre-douce); }
.page-hero--jaune .fil [aria-current] { color: var(--encre); }

/* Fil d'Ariane */
.fil {
    margin-bottom: 1.25rem;
    font-size: .85rem;
}
.fil ol {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.fil li + li::before { content: "›"; margin-right: .4rem; opacity: .6; }
.fil a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.fil a:hover { color: var(--blanc); text-decoration: underline; }
.fil [aria-current] { color: var(--blanc); font-weight: 600; }

/* ------------------------------------------------------------------ *
   7. Sections et blocs
 * ------------------------------------------------------------------ */

.section { padding-block: var(--pas); }
.section--creme  { background: var(--creme-fonce); }
.section--blanc  { background: var(--blanc); }
.section--jaune  { background: var(--jaune); }
.section--bleu   { background: var(--bleu); }

.section--rouge {
    background: var(--rouge);
    color: var(--blanc);
}
.section--rouge h2, .section--rouge h3 { color: var(--blanc); }

.sur-fonce { color: var(--blanc); }
.sur-fonce h2, .sur-fonce h3 { color: var(--blanc); }

.section-tete {
    max-width: var(--largeur-texte);
    margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.section-tete--centre {
    margin-inline: auto;
    text-align: center;
}
.section-tete--centre .filet { margin-inline: auto; }

/* Grille de cartes générique */
.grille {
    display: grid;
    gap: var(--gouttiere);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }

.carte {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: var(--arrondi);
    box-shadow: var(--ombre);
}
.carte h3 { margin-bottom: .25rem; }
.carte p { color: var(--encre-douce); }

.carte--jaune { background: var(--jaune); border-color: transparent; }
.carte--bleu  { background: var(--bleu);  border-color: transparent; }
.carte--orange{ background: var(--orange);border-color: transparent; }
.carte--jaune p, .carte--bleu p, .carte--orange p { color: var(--encre); }

/* Liste de points forts, en cartes compactes */
.points {
    list-style: none;
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.points li {
    position: relative;
    padding: 1.15rem 1.35rem 1.15rem 2.9rem;
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: var(--arrondi);
    font-size: .98rem;
}
.points li::before {
    content: "";
    position: absolute;
    left: 1.35rem;
    top: 1.7em;
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background: var(--rouge);
}

/* Deux colonnes texte + visuel */
.duo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.duo-visuel img {
    width: 100%;
    border-radius: var(--arrondi-l);
    box-shadow: var(--ombre);
}

/* Panneau de chiffres clés, à la place d'une photo absente */
.panneau {
    position: relative;
    overflow: hidden;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    border-radius: var(--arrondi-l);
    background: var(--jaune);
}
.panneau--bleu   { background: var(--bleu); }
.panneau--orange { background: var(--orange); }

/* Le « R » du logo, en filigrane. */
.panneau-monogramme {
    position: absolute;
    right: -2.5rem;
    bottom: -3rem;
    width: 15rem;
    opacity: .13;
    pointer-events: none;
}

.panneau-liste {
    position: relative;
    display: grid;
    gap: 1.1rem;
}
.panneau-liste div {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}
.panneau-liste b {
    flex: 0 0 auto;
    min-width: 5.5ch;
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--rouge);
}
.panneau-liste span { font-weight: 600; }

/* Encart mis en avant */
.encart {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--jaune);
    border-radius: var(--arrondi);
    font-size: 1.05rem;
}
.encart + .encart { margin-top: var(--gouttiere); }
.encart h2 {
    font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem);
    letter-spacing: -.01em;
}
.encart--bleu { background: var(--bleu); }
.encart--contour {
    background: transparent;
    border: 2px dashed var(--trait);
}

/* Bande d'appel à l'action */
.bande-cta {
    background: var(--rouge);
    color: var(--blanc);
    border-radius: var(--arrondi-l);
    padding: clamp(2rem, 5vw, 3.5rem);
    text-align: center;
}
.bande-cta h2 { color: var(--blanc); }
.bande-cta p { color: rgba(255, 255, 255, .9); margin-inline: auto; max-width: 60ch; }
.bande-cta .boutons { justify-content: center; }

/* ------------------------------------------------------------------ *
   8. Le cœur de notre métier
 * ------------------------------------------------------------------ */

.metier {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: 1rem;
    counter-reset: etape;
}

.metier-etape {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .85rem;
    padding: 1.5rem .85rem 1.25rem;
    text-align: center;
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: var(--arrondi);
}

.metier-etape img { width: 3rem; height: 3rem; }

.metier-etape span {
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.3;
}

/* Numéro d'étape en pastille. */
.metier-etape::before {
    counter-increment: etape;
    content: counter(etape);
    position: absolute;
    top: -.7rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5rem;
    height: 1.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--rouge);
    color: var(--blanc);
    font-size: .75rem;
    font-weight: 800;
}

/* ------------------------------------------------------------------ *
   9. Carte des sites et fiches de dépôt
 * ------------------------------------------------------------------ */

.carte-bloc {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
}

@media (max-width: 900px) {
    .carte-bloc { grid-template-columns: 1fr; }
}

.carte-hdf {
    width: 100%;
    height: auto;
    max-height: 34rem;
}

.carte-hdf .contour {
    fill: var(--blanc);
    stroke: var(--rouge);
    stroke-width: 2;
    stroke-linejoin: round;
}
/* Les noms de départements restent secondaires par la taille et
   l'interlettrage, pas par la transparence : à 45 % ils tombaient à 2,1:1,
   sous le minimum lisible. La hiérarchie tient au contraste avec les
   étiquettes des pointeurs, plus grandes et presque noires. */
.carte-hdf .departement {
    fill: var(--encre-douce);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    opacity: .85;
}

/* Un pointeur = un lien. Le halo grossit au survol et au focus. */
.point { cursor: pointer; }
.point .halo {
    fill: var(--rouge);
    opacity: .18;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .18s ease, opacity .18s ease;
}
.point .broche { fill: var(--rouge); transition: fill .18s ease; }
.point .perle  { fill: var(--blanc); }
.point .etiquette {
    font-size: 15px;
    font-weight: 800;
    fill: var(--encre);
}
.point .ville {
    font-size: 12.5px;
    font-weight: 600;
    fill: var(--encre-douce);
}

.point:hover .halo,
.point:focus-visible .halo { transform: scale(1.6); opacity: .28; }
.point:hover .broche,
.point:focus-visible .broche { fill: var(--rouge-fonce); }
.point:hover .etiquette { fill: var(--rouge); }
.point:focus-visible .perle { fill: var(--jaune); }

/* --- Fiches des sites ------------------------------------------------ */

/* Les cinq fiches tiennent sur une seule ligne sur grand écran.
   auto-fit supprime les colonnes vides : la même grille reste équilibrée
   quand une fiche est retirée (page d'un dépôt, qui n'affiche que les
   quatre autres). */
.sites-grille {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.site-carte {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Deux blocs seulement : le logo en haut, le texte en bas. */
    justify-content: space-between;
    min-height: 21rem;
    padding: 1.5rem;
    border-radius: var(--arrondi-l);
    overflow: hidden;
    color: var(--blanc);
    text-decoration: none;
    isolation: isolate;
    transition: transform .2s ease, box-shadow .2s ease;
}
.site-carte:hover,
.site-carte:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--ombre-forte);
    color: var(--blanc);
}

.site-carte-fond {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.site-carte-fond img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Voile rouge semi-transparent : le texte reste lisible quelle que soit
   la photo, et la teinte de la charte est conservée. */
.site-carte::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
        rgba(174, 31, 47, .62) 0%,
        rgba(174, 31, 47, .78) 45%,
        rgba(94, 16, 25, .94) 100%);
}

.site-carte .logo {
    width: 82%;
    max-width: 13rem;
}
.site-carte-texte { display: block; }
.site-carte .lieu {
    display: block;
    font-weight: 800;
    font-size: 1.15rem;
    margin-top: 1rem;
}
.site-carte .zone {
    display: block;
    font-size: .9rem;
    color: rgba(255, 255, 255, .82);
}
.site-carte .aller {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .9rem;
    font-weight: 700;
    font-size: .92rem;
    color: var(--jaune);
}
.site-carte .aller::after { content: "→"; transition: transform .15s ease; }
.site-carte:hover .aller::after { transform: translateX(4px); }

/* --- En-tête d'une page de dépôt ------------------------------------- */

.depot-hero { background: var(--rouge); color: var(--blanc); }
.depot-hero .hero-inner { align-items: center; }

.depot-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    margin-top: 1.75rem;
}
.depot-contacts a { color: var(--jaune); font-weight: 700; }

/* Bloc coordonnées */
.coordonnees {
    display: grid;
    gap: 1.25rem;
}
.coordonnees dt {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--rouge);
    margin-bottom: .2rem;
}
.coordonnees dd { margin: 0; }

.reseaux {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .35rem;
}
.reseaux a {
    display: inline-flex;
    padding: .4rem .95rem;
    border: 1.5px solid var(--trait);
    border-radius: var(--arrondi-pill);
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
}
.reseaux a:hover { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }

/* Avis clients */
.avis {
    display: grid;
    gap: var(--gouttiere);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.avis figure {
    margin: 0;
    padding: clamp(1.35rem, 3vw, 2rem);
    background: var(--blanc);
    border-radius: var(--arrondi);
    border: 1px solid var(--trait);
}
.avis blockquote { margin: 0 0 .9rem; font-size: 1.05rem; }
.avis blockquote::before { content: "« "; color: var(--rouge); }
.avis blockquote::after  { content: " »"; color: var(--rouge); }
.avis figcaption { font-weight: 700; font-size: .92rem; color: var(--encre-douce); }

/* ------------------------------------------------------------------ *
   10. Chiffres, valeurs, frise
 * ------------------------------------------------------------------ */

.chiffres {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.chiffre {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem 1rem;
    border-radius: var(--arrondi);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    text-align: center;
}
.chiffre b {
    display: block;
    font-size: clamp(1.7rem, 1.1rem + 2vw, 2.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.03em;
    color: var(--jaune);
    text-wrap: balance;
    /* Chiffres de largeur constante : pendant le décompte, le nombre ne
       tressaute pas d'une image à l'autre. */
    font-variant-numeric: tabular-nums;
}
.chiffre span {
    display: block;
    margin-top: .4rem;
    font-size: .95rem;
    color: rgba(255, 255, 255, .88);
}

/* Variante sur fond clair */
.chiffres--clair .chiffre {
    background: var(--blanc);
    border-color: var(--trait);
}
.chiffres--clair .chiffre b { color: var(--rouge); }
.chiffres--clair .chiffre span { color: var(--encre-douce); }

/* Valeurs */
.valeurs {
    display: grid;
    gap: var(--gouttiere);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.valeur {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--arrondi);
    background: var(--blanc);
    border-top: .35rem solid var(--rouge);
    box-shadow: var(--ombre);
}
.valeur:nth-child(2) { border-top-color: var(--orange); }
.valeur:nth-child(3) { border-top-color: var(--bleu); }
.valeur h3 { margin-bottom: .4rem; }
.valeur p { color: var(--encre-douce); }

/* --------------------------------------------------------------------- *
   Frise chronologique

   L'axe est porté par le conteneur, en un seul trait : posé sur chaque
   étape, les gouttières de la grille le découpaient en tronçons et la frise
   se lisait comme une suite de soulignements.

   Verticale par défaut — c'est la seule disposition qui tienne sur un
   téléphone, et elle reste juste quel que soit le nombre d'étapes — puis
   horizontale sur grand écran, sur une seule rangée.

   --frise-fond : la couleur du fond de la section, reprise par l'anneau des
   pastilles pour qu'elles semblent posées sur l'axe. À redéfinir si la frise
   déménage sur un autre fond.
 * --------------------------------------------------------------------- */

.frise {
    --frise-fond: var(--creme-fonce);
    --frise-axe: rgba(174, 31, 47, .22);
    --frise-pastille: 1.05rem;

    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 0 2.5rem;
    display: grid;
    gap: 2.25rem;
}

/* L'axe, d'un seul tenant. */
.frise::before {
    content: "";
    position: absolute;
    left: calc((var(--frise-pastille) - 3px) / 2);
    top: .4rem;
    bottom: .4rem;
    width: 3px;
    border-radius: var(--arrondi-pill);
    background: var(--frise-axe);
}

.frise-etape { position: relative; }

.frise-etape::before {
    content: "";
    position: absolute;
    top: .35rem;
    left: -2.5rem;
    width: var(--frise-pastille);
    height: var(--frise-pastille);
    border-radius: 50%;
    background: var(--rouge);
    /* Anneau en box-shadow plutôt qu'en bordure : il ne compte pas dans la
       taille de la pastille, qui reste donc centrée sur l'axe. */
    box-shadow: 0 0 0 4px var(--frise-fond);
}

.frise-etape b {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--rouge);
    margin-bottom: .35rem;
}
.frise-etape p { color: var(--encre-douce); font-size: .96rem; }

/* Sur grand écran, la frise se déploie horizontalement. `grid-auto-flow:
   column` garantit une seule rangée : c'est ce qui permet à l'axe unique
   de rester aligné sur toutes les pastilles. */
@media (min-width: 62rem) {
    .frise {
        padding: 2.75rem 0 0;
        gap: var(--gouttiere);
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }
    .frise::before {
        left: 0;
        right: 0;
        top: calc((var(--frise-pastille) - 3px) / 2);
        bottom: auto;
        width: auto;
        height: 3px;
    }
    .frise-etape::before {
        top: calc(-2.75rem);
        left: 0;
    }
}

/* Logos partenaires */
.partenaires {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem 3rem;
}
.partenaires img { max-height: 4.5rem; width: auto; }
.partenaires a { font-weight: 700; }

/* ------------------------------------------------------------------ *
   11. Formulaire de contact
 * ------------------------------------------------------------------ */

.contact-bloc {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: start;
}
@media (max-width: 900px) {
    .contact-bloc { grid-template-columns: 1fr; }
}

.formulaire {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: var(--arrondi-l);
    box-shadow: var(--ombre);
}

.champ { margin-bottom: 1.15rem; }
.champ label {
    display: block;
    margin-bottom: .35rem;
    font-weight: 700;
    font-size: .93rem;
}
.champ .aide {
    margin: .3rem 0 0;
    font-size: .84rem;
    color: var(--encre-douce);
}

.champ input,
.champ select,
.champ textarea {
    width: 100%;
    padding: .8rem 1rem;
    font: inherit;
    color: var(--encre);
    background: var(--creme);
    border: 1.5px solid var(--trait);
    border-radius: .8rem;
    transition: border-color .15s ease, background-color .15s ease;
}
.champ textarea { resize: vertical; min-height: 9rem; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
    background: var(--blanc);
    border-color: var(--rouge);
}

.champ--requis label::after {
    content: " *";
    color: var(--rouge);
}

/* Piège à robots : invisible à l'écran, ignoré par les lecteurs d'écran. */
.piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.message {
    padding: 1rem 1.25rem;
    border-radius: var(--arrondi);
    margin-bottom: 1.5rem;
    font-weight: 600;
}
.message--ok {
    background: var(--bleu);
    color: var(--encre);
    border-left: .3rem solid #2f6f9e;
}
.message--erreur {
    background: #fdeaec;
    color: var(--rouge-nuit);
    border-left: .3rem solid var(--rouge);
}
.message ul { margin: .5rem 0 0; padding-left: 1.2rem; font-weight: 500; }

/* ------------------------------------------------------------------ *
   12. Pied de page
 * ------------------------------------------------------------------ */

.site-footer {
    background: var(--rouge-nuit);
    color: rgba(255, 255, 255, .82);
    padding-block: clamp(3rem, 5vw, 4.5rem) 2rem;
    font-size: .95rem;
}

.footer-grille {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.site-footer h2 {
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--jaune);
    margin-bottom: 1rem;
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .55rem;
}
.site-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.site-footer a:hover { color: var(--blanc); text-decoration: underline; }

/* Cible tactile : un lien en ligne fait la hauteur de ses lettres, soit une
   vingtaine de pixels. Dans une liste de navigation — au doigt, sans phrase
   autour pour guider — c'est trop peu (WCAG 2.5.8 demande 24 px). Le passage
   en inline-block leur donne enfin une hauteur de boîte. */
.site-footer li a,
.footer-bas li a,
.fil a,
.fil [aria-current],
.coordonnees dd a {
    display: inline-block;
    padding-block: .2rem;
}

.footer-logo { width: 12.5rem; margin-bottom: 1.25rem; }
.footer-slogan { max-width: 26ch; }

.footer-bas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.75rem;
    font-size: .87rem;
    color: rgba(255, 255, 255, .6);
}
.footer-bas ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

/* ------------------------------------------------------------------ *
   13. Impression
 * ------------------------------------------------------------------ */

@media print {
    .site-header, .site-footer, .boutons,
    .hero-visuel, .hero-bandeau { display: none; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .section { padding-block: 1rem; }
    a::after { content: " (" attr(href) ")"; font-size: .85em; }
}