/* =====================================================================
   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 officiel de la charte, celui de la maquette et des logos */
    --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(2.75rem, 5.5vw, 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); }

/* Petit titre à l'intérieur d'un bloc : il annonce une liste sans ouvrir
   une nouvelle section. */
.sous-titre {
    margin: clamp(2.25rem, 4vw, 3rem) 0 0;
    text-align: center;
    font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem);
}

/* Phrase détachée du paragraphe, à la couleur de la charte. */
.accroche {
    margin-top: 1.25rem;
    color: var(--rouge);
    font-weight: 700;
    font-size: 1.08rem;
}
.sur-fonce .accroche { color: var(--jaune); }

/* Puces « titre + explication », pour les raisons de nous rejoindre. */
.puces--raisons li strong { display: block; }
.puces--raisons li > span { color: var(--encre-douce); }

/* 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);
}

/* Pas de halo ni de voile sur l'aplat : il doit rester exactement le rouge
   officiel, comme le fond des bandeaux animés posés dessus. */

.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 --------------- */

/* Le pavé d'accroche apporte lui-même sa hauteur : la section n'ajoute
   plus de rembourrage sous le bandeau animé. */
.hero--accueil { padding-bottom: 0; }

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

/* --- Pavé d'accroche --------------------------------------------------- */

/* Aplat jaune de la charte, sans photo : le pavé se détache du bandeau
   animé rouge qui le précède, et le texte passe à l'encre. */
.hero-pave {
    background: var(--jaune);
    padding-block: clamp(2rem, 4.5vw, 3.25rem);
}

.hero-texte {
    position: relative;
    text-align: center;
    max-width: 54rem;
}
.hero-texte .chapo { margin-inline: auto; }

/* L'écart de taille entre le titre et sa phrase d'accroche était trop
   marqué : le titre descend, l'accroche monte. */
.hero-pave h1 {
    font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
    color: var(--encre);
}
.hero-pave .chapo {
    font-size: clamp(1.15rem, 1.05rem + .6vw, 1.6rem);
    color: var(--encre-douce);
}

.hero-visuel {
    border-radius: var(--arrondi-l);
    overflow: hidden;
    /* Ombre volontairement très étalée : sur le rouge plein de l'en-tête,
       une ombre courte ne se voit pas et l'image semble collée au fond. */
    box-shadow: 0 4px 10px rgba(36, 26, 28, .18), 0 34px 80px rgba(36, 26, 28, .38);
}
.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); }

/* En-tête de page sans aplat rouge : un simple bandeau crème, qui laisse
   le premier bloc de contenu porter la couleur. */
.page-tete {
    background: var(--creme-fonce);
    border-bottom: 1px solid var(--trait);
    padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}
.page-tete h1 { margin-bottom: .5rem; }

.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; }

/* Par défaut le fil se lit sur fond clair ; les en-têtes rouges le
   repassent en blanc juste en dessous. */
.fil a { color: var(--encre-douce); text-decoration: none; }
.fil a:hover { color: var(--rouge); text-decoration: underline; }
.fil [aria-current] { color: var(--encre); font-weight: 600; }

.hero .fil a,
.page-hero .fil a { color: rgba(255, 255, 255, .8); }
.hero .fil a:hover,
.page-hero .fil a:hover { color: var(--blanc); }
.hero .fil [aria-current],
.page-hero .fil [aria-current] { color: var(--blanc); }

/* ------------------------------------------------------------------ *
   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); }
/* Les cartes blanches posées sur l'aplat rouge gardent leurs titres foncés. */
.section--rouge .carte h3 { color: var(--encre); }

.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; }
/* Phrase d'introduction tenue sur une seule ligne sur grand écran : la
   colonne de lecture habituelle la couperait en deux. */
.section-tete--large { max-width: none; }

/* 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)); }

/* Grille détachée du bloc de texte qui la précède. */
.grille--detachee { margin-top: clamp(2rem, 4vw, 3rem); }

.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); }

/* Carte de service : liseré jaune en tête et picto agrandi. Le jaune de
   la charte est pâle à côté du blanc de la carte : le liseré est plus
   épais que les autres pour rester visible. */
.carte--service { border: 0; border-top: .6rem solid var(--jaune); }
.carte--service img { width: 4rem; height: 4rem; margin-bottom: .35rem; }

/* Carte coiffée d'un liseré rouge, comme les valeurs de l'accueil ;
   titre à la couleur de la charte. */
.carte--liseree { border: 0; border-top: .35rem solid var(--rouge); }
.carte--liseree h3 { color: var(--rouge); }

/* Liste de points forts, en bulles centrées.

   En flex plutôt qu'en grille : la dernière rangée, souvent incomplète,
   se centre alors sous les précédentes au lieu de s'étirer à gauche. */
.points {
    list-style: none;
    max-width: 62rem;
    margin: clamp(2rem, 4vw, 3rem) auto 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}
.sous-titre + .points { margin-top: 1.5rem; }

/* Carrés aussi petits que possible tout en restant lisibles : texte un
   peu réduit, marges intérieures et pastille resserrées. Un liseré rouge
   coiffe chaque bulle, comme les étapes du « cœur de notre métier ». */
.points li {
    flex: 1 1 13rem;
    max-width: 14.5rem;
    padding: 1rem .9rem;
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-top: .3rem solid var(--rouge);
    border-radius: var(--arrondi);
    font-size: .9rem;
    line-height: 1.45;
    text-align: center;
}

/* Le picto du point, posé au-dessus du texte. */
.points li img {
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto .6rem;
}

/* Point sans picto choisi : une coche dans une pastille rouge. */
.points-coche::before {
    content: "✓";
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin: 0 auto .6rem;
    border-radius: 50%;
    background: var(--rouge);
    color: var(--blanc);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}

/* 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);
}

/* Photo encore à fournir : un cadre en pointillés tient sa place, à la
   taille de la future photo, et dit ce qu'on attend. */
.photo-attente {
    aspect-ratio: 4 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1.25rem;
    border: 2px dashed var(--encre-douce);
    border-radius: var(--arrondi-l);
    background: var(--creme-fonce);
    color: var(--encre-douce);
    text-align: center;
}
.photo-attente-titre {
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--rouge);
}
.photo-attente-texte { max-width: 32ch; font-size: .92rem; line-height: 1.45; }
.photo-attente--video { aspect-ratio: 16 / 9; }

/* Vidéo YouTube intégrée, au format 16:9 */
.video {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--arrondi-l);
    box-shadow: var(--ombre);
    background: var(--encre);
}
.video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Galerie : une rangée de photos de même format */
.galerie {
    display: grid;
    gap: var(--gouttiere);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
}
.galerie figure { margin: 0; }
.galerie img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--arrondi-l);
}
/* Diaporama : une photo à la fois. Sans JavaScript, la piste se fait
   glisser ; site.js ajoute flèches, points et défilement automatique. */
.diaporama {
    position: relative;
    margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
}
.diaporama-piste {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    border-radius: var(--arrondi-l);
}
.diaporama-piste::-webkit-scrollbar { display: none; }
.diaporama-piste:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .diaporama-piste { scroll-behavior: auto; }
}
.diaporama-diapo {
    position: relative;
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: start;
}
.diaporama-diapo img,
.diaporama-diapo .photo-attente {
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    border-radius: 0;
}
.diaporama-diapo figcaption {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    padding: .35rem .9rem;
    border-radius: var(--arrondi-pill);
    background: var(--blanc);
    font-size: .88rem;
    font-weight: 600;
}

.diaporama-fleche {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: var(--blanc);
    color: var(--rouge);
    box-shadow: var(--ombre);
    font: inherit;
    font-size: 1.3rem;
    font-weight: 800;
    cursor: pointer;
}
.diaporama-fleche:hover { background: var(--rouge); color: var(--blanc); }
.diaporama-fleche--prec { left: .85rem; }
.diaporama-fleche--suiv { right: .85rem; }

.diaporama-points {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: .9rem;
}
.diaporama-points button {
    width: .7rem;
    height: .7rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--trait);
    cursor: pointer;
}
.diaporama-points button[aria-current="true"] { background: var(--rouge); }

.galerie figcaption {
    margin-top: .6rem;
    font-size: .9rem;
    color: var(--encre-douce);
    text-align: center;
}

/* 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); }

.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; }

/* Version resserrée : le panneau accompagne le texte sans lui disputer
   la place. */
.panneau--compact {
    justify-self: center;
    width: 100%;
    max-width: 24rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border-radius: var(--arrondi);
}
.panneau--compact .surtitre { margin-bottom: .75rem; }
.panneau--compact .panneau-liste { gap: .85rem; }
/* Le libellé tient sur deux lignes : le chiffre se centre sur lui plutôt
   que de s'aligner sur sa première ligne, et sa colonne est juste assez
   large pour « 2 700 », pour que le texte ne s'en éloigne pas. */
.panneau--compact .panneau-liste div { align-items: center; gap: .9rem; }
.panneau--compact .panneau-liste b {
    min-width: 2.9em;
    font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem);
}
.panneau--compact .panneau-liste span { font-size: .92rem; line-height: 1.35; }

/* Version en rangée : le panneau occupe toute la largeur sous les points
   forts, ses chiffres côte à côte. */
.panneau--rangee {
    margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--arrondi);
    text-align: center;
}
.panneau--rangee .surtitre { margin-bottom: 1rem; }
.panneau--rangee .panneau-liste {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 1.25rem;
}
.panneau--rangee .panneau-liste div {
    flex-direction: column;
    align-items: center;
    gap: .4rem;
}
.panneau--rangee .panneau-liste b { min-width: 0; }
.panneau--rangee .panneau-liste span { font-size: .95rem; line-height: 1.35; }

/* 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 .boutons { margin: 1.1rem 0 0; }
.encart--bleu { background: var(--bleu); }
.encart--contour {
    background: transparent;
    border: 2px dashed var(--trait);
}

/* Portail clients (« Simplifiez-vous la vie ») : texte et avantages à
   gauche, visuel à droite. Fond blanc, celui du visuel, qui s'y fond sans
   cadre. Sous 56rem, le visuel passe sous le texte. */
.portail {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
    padding: clamp(1.5rem, 4vw, 3rem);
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: var(--arrondi-l);
    box-shadow: var(--ombre);
}
@media (min-width: 56rem) {
    .portail { grid-template-columns: 1fr 1.1fr; }
}
.portail h2 { margin-bottom: .75rem; }
.portail-avantages {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    gap: .8rem;
}
.portail-avantages li {
    display: flex;
    align-items: center;
    gap: .9rem;
    font-weight: 600;
}
.portail-avantages img {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
}
.portail-visuel img { width: 100%; }

/* 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; }
/* Phrase courte, tenue sur une seule ligne tant que la place le permet. */
.bande-cta-ligne { max-width: 70ch; }

/* ------------------------------------------------------------------ *
   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);
    /* Filet jaune de la charte : la rangée des savoir-faire était la seule
       du déroulé à n'être que blanche. */
    border-top: .3rem solid var(--jaune);
    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;
}

/* Familles de produits, en pastilles. */
.gammes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
}
.gammes li {
    padding: .7rem 1.45rem;
    background: var(--blanc);
    border-radius: var(--arrondi-pill);
    font-weight: 700;
    font-size: .98rem;
}

.gammes-photo {
    max-width: 46rem;
    margin: clamp(2rem, 4vw, 3rem) auto 0;
}
.gammes-photo img {
    width: 100%;
    border-radius: var(--arrondi-l);
    box-shadow: var(--ombre);
}
.gammes-photo .photo-attente { aspect-ratio: 16 / 9; }

/* ------------------------------------------------------------------ *
   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; }
}

/* La carte à gauche, les cinq fiches à droite. Les fiches remplacent la
   liste à puces qui reprenait les mêmes cinq sites juste au-dessus. */
.carte-bloc--sites {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: start;
}

.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));
}

/* Variante posée à droite de la carte : deux colonnes, la cinquième fiche
   occupant toute la largeur pour ne pas laisser un trou. */
.sites-grille--compacte {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.sites-grille--compacte .site-carte {
    min-height: 13rem;
    padding: 1.15rem;
    border-radius: var(--arrondi);
}
.sites-grille--compacte .site-carte:last-child { grid-column: 1 / -1; min-height: 9rem; }
.sites-grille--compacte .site-carte .logo { width: 88%; max-width: 10.5rem; }
.sites-grille--compacte .lieu { font-size: 1rem; margin-top: .6rem; }
.sites-grille--compacte .aller { margin-top: .5rem; font-size: .85rem; }

@media (max-width: 900px) {
    .sites-grille--compacte {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    }
    .sites-grille--compacte .site-carte:last-child { grid-column: auto; min-height: 13rem; }
}

.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;
    /* Noir et blanc éclairci : c'est l'aplat rouge ci-dessous qui donne
       la couleur. */
    filter: grayscale(1) contrast(.55) brightness(1.7);
}

/* Photo en bichromie au rouge de la charte : l'aplat rouge, en
   « produit », teinte la photo. Ses clairs prennent exactement le rouge du
   pied de page, ses ombres un rouge plus profond : la vignette ne tire
   plus vers le brun, et le texte blanc reste lisible. */
.site-carte::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--rouge);
    mix-blend-mode: multiply;
}

.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); }

/* --- Bande du portail de commande ------------------------------------ */

/* Ce que le client vient chercher en premier sur la page de son dépôt :
   elle a sa propre bande, juste sous l'en-tête. */
.bande-portail {
    background: var(--jaune);
    padding-block: 1.35rem;
}
.bande-portail-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 2rem;
}
.bande-portail-texte {
    margin: 0;
    font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem);
    font-weight: 800;
}
.bande-portail .boutons { margin-top: 0; }

/* --- 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;
}
/* Variante pleine largeur, quand les coordonnées ne partagent plus la
   ligne avec un bloc de texte. */
.coordonnees--large {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1.5rem 2.5rem;
}
.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); }
.depot-hero .reseaux a { color: var(--blanc); border-color: rgba(255, 255, 255, .55); }
.depot-hero .reseaux a:hover { background: var(--blanc); border-color: var(--blanc); color: var(--rouge); }

/* 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
 * ------------------------------------------------------------------ */

/* Toutes les cases ont la même taille : la hauteur de la plus haute
   (grid-auto-rows), et — quand site.js a mesuré les contenus — la largeur
   de la plus large, réparties en rangées équilibrées. Sans le script, la
   grille par défaut s'applique et les chiffres longs passent à la ligne. */
.chiffres {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    grid-auto-rows: 1fr;
}
.chiffres--ajuste .chiffre b { white-space: nowrap; }

/* Chiffres calés en haut de la case, et non centrés : sinon un libellé
   sur deux lignes fait remonter son chiffre, et la rangée se désaligne. */
.chiffre {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 1.5rem 1.25rem;
    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; }

/* Photo de l'étape, au même format sur toute la frise */
.frise-photo { margin: .5rem 0 .9rem; max-width: 22rem; }
.frise-photo img,
.frise-photo .photo-attente {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--arrondi);
}
.frise-photo .photo-attente { padding: .75rem; gap: .3rem; }
.frise-photo .photo-attente-titre { font-size: .7rem; }
.frise-photo .photo-attente-texte { font-size: .8rem; }

/* 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--centre { justify-content: center; }
.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 var(--encre-douce);
}
.message--erreur {
    background: var(--jaune-clair);
    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
 * ------------------------------------------------------------------ */

/* Le rouge de la charte, et non le rouge nuit : ce dernier tirait sur le
   brun une fois posé en aplat sur toute la largeur. */
.site-footer {
    background: var(--rouge);
    color: rgba(255, 255, 255, .86);
    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, .86); text-decoration: none; }
.site-footer a:hover { color: var(--blanc); text-decoration: underline; }

/* Le bouton jaune est un lien : sans cette reprise, il héritait de la
   couleur claire des liens du pied de page et son libellé disparaissait. */
.site-footer .btn--jaune,
.site-footer .btn--jaune:hover { color: var(--encre); text-decoration: none; }

/* 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, .78);
}
.footer-bas ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

/* Message sanitaire : une ligne à part, à la taille des autres mentions
   du pied de page, en blanc plein pour contraster avec le rouge. */
.footer-sante {
    margin: 0;
    padding-top: 1.75rem;
    font-size: .87rem;
    font-weight: 600;
    color: var(--blanc);
    text-align: center;
}
.footer-sante + .footer-bas { padding-top: 1.25rem; }

/* --- Filtre d'âge ---------------------------------------------------- */

/* Tant que la question est posée, la page derrière ne défile pas. */
.filtre-age-ouvert { overflow: hidden; }

.filtre-age {
    width: min(100% - 2rem, 30rem);
    max-height: calc(100% - 2rem);
    padding: clamp(1.75rem, 5vw, 2.75rem);
    border: 0;
    border-top: .35rem solid var(--rouge);
    border-radius: var(--arrondi-l);
    background: var(--blanc);
    color: var(--encre);
    box-shadow: var(--ombre-forte);
    text-align: center;
}
.filtre-age::backdrop {
    background: rgba(36, 26, 28, .72);
    backdrop-filter: blur(6px);
}
.filtre-age-logo { width: 11rem; margin: 0 auto 1.5rem; }
.filtre-age h2 {
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
    margin-bottom: .6rem;
}
.filtre-age p { color: var(--encre-douce); }
.filtre-age .boutons { margin-top: 1.5rem; }
/* « Oui » et « Non » de même largeur : aucune réponse n'est mise en avant. */
.filtre-age .btn { min-width: 7.5rem; justify-content: center; }
.filtre-age-refus:focus { outline: none; }
.filtre-age-sante {
    margin: 1.75rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--trait);
    font-size: .85rem;
    font-weight: 600;
}
.filtre-age p.filtre-age-sante { color: var(--encre); }

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

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