/* =========================================================================
   AOP FIGUE DE SOLLIÈS — feuille de style unique
   Clone du site WordPress d'origine, reconstruit sur CodeIgniter 4.
   Aucune dépendance externe : polices auto-hébergées, icônes en SVG inline.

   Sommaire
     1. Polices
     2. Variables
     3. Reset et base
     4. Utilitaires
     5. Boutons
     6. En-tête et navigation
     7. Héros, bandeaux et séparateurs
     8. Sections et grilles
     9. Composants (cartes, volets, documents, recettes, vidéos…)
    10. Partenaires
    11. Formulaire
    12. Pied de page
    13. Responsive et impression
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. POLICES
   Titres : Libre Baskerville · Corps : Montserrat · Navigation : Lora
   Fichiers dans /public/assets/fonts/, donc ../fonts/ depuis ce CSS.
   ------------------------------------------------------------------------- */
@font-face {
    font-family: 'Libre Baskerville';
    src: url('../fonts/libre-baskerville-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Libre Baskerville';
    src: url('../fonts/libre-baskerville-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lora';
    src: url('../fonts/lora-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lora';
    src: url('../fonts/lora-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* -------------------------------------------------------------------------
   2. VARIABLES
   Toute la charte tient dans ce bloc : le modifier suffit à redéfinir
   l'apparence du site sans toucher au reste de la feuille.
   ------------------------------------------------------------------------- */
:root {
    /* Couleurs reprises du site d'origine */
    --c-brand:        #7A2A72;   /* violet figue : titres, boutons principaux */
    --c-brand-fonce:  #5C1F56;
    --c-cyan:         #00B1E6;   /* boutons secondaires */
    --c-vert:         #7AB51D;   /* bouton téléphone */
    --c-noir:         #111111;
    --c-texte:        #444444;
    --c-texte-doux:   #6B6B6B;
    --c-titre:        #1F1F1F;
    --c-fond:         #FFFFFF;
    --c-fond-clair:   #F5F5F5;
    --c-bordure:      #E3E3E3;

    /* Typographie */
    --f-titre:  'Libre Baskerville', Georgia, 'Times New Roman', serif;
    --f-corps:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --f-nav:    'Lora', Georgia, serif;

    --taille-base: 1rem;
    --interligne:  1.75;

    /* Mise en page */
    --conteneur:   1170px;
    --gouttiere:   20px;
    --rayon:       6px;
    --ombre:       0 0 40px rgba(0, 0, 0, 0.15);
    --transition:  0.2s ease;

    --z-entete: 1000;
}

/* -------------------------------------------------------------------------
   3. RESET ET BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--c-fond);
    color: var(--c-texte);
    font-family: var(--f-corps);
    font-size: var(--taille-base);
    line-height: var(--interligne);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

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

a {
    color: var(--c-brand);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--transition);
}
a:hover, a:focus { color: var(--c-brand-fonce); }

h1, h2, h3, h4 {
    font-family: var(--f-titre);
    color: var(--c-titre);
    line-height: 1.3;
    margin: 0 0 0.6em;
    font-weight: 700;
}
h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
h3 { font-size: 1.15rem; }

p, ul, ol { margin: 0 0 1.2em; }
li { margin-bottom: 0.4em; }

blockquote { margin: 0; }

strong { font-weight: 600; }

:focus-visible {
    outline: 3px solid var(--c-cyan);
    outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   4. UTILITAIRES
   ------------------------------------------------------------------------- */
.conteneur {
    width: 100%;
    max-width: var(--conteneur);
    margin-inline: auto;
    padding-inline: var(--gouttiere);
}

.visuellement-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.lien-evitement {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--c-brand);
    color: #fff;
    padding: 12px 20px;
    text-decoration: none;
}
.lien-evitement:focus {
    left: 0;
    color: #fff;
}

.centre { text-align: center; }

.surtitre {
    font-family: var(--f-corps);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-cyan);
    margin-bottom: 0.6em;
}

.ombre { box-shadow: var(--ombre); border-radius: var(--rayon); }

.prose { max-width: 46rem; }
.prose.centre { margin-inline: auto; }

/* -------------------------------------------------------------------------
   5. BOUTONS
   ------------------------------------------------------------------------- */
.bouton {
    display: inline-block;
    padding: 13px 30px;
    border: 2px solid transparent;
    border-radius: 30px;
    background: var(--c-brand);
    color: #fff;
    font-family: var(--f-corps);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.bouton:hover, .bouton:focus { background: var(--c-noir); color: #fff; }

.bouton--violet { background: var(--c-brand); }
.bouton--cyan   { background: var(--c-cyan); }
.bouton--vert   { background: var(--c-vert); }
.bouton--large  { padding: 15px 38px; font-size: 0.95rem; }

.bouton--fantome {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
}
.bouton--fantome:hover, .bouton--fantome:focus {
    background: #fff;
    border-color: #fff;
    color: var(--c-noir);
}

/* -------------------------------------------------------------------------
   6. EN-TÊTE ET NAVIGATION
   ------------------------------------------------------------------------- */
.barre-contact {
    background: var(--c-noir);
    color: #fff;
    font-size: 0.85rem;
}
.barre-contact__inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
    min-height: 40px;
}
.barre-contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
}
.barre-contact a:hover, .barre-contact a:focus { color: var(--c-cyan); }

.entete {
    position: sticky;
    top: 0;
    z-index: var(--z-entete);
    background: #fff;
    border-bottom: 1px solid var(--c-bordure);
}
.entete__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 96px;
}
.entete__logo img { width: auto; height: 66px; }

.entete__bascule {
    display: none;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--c-bordure);
    border-radius: var(--rayon);
    background: #fff;
    cursor: pointer;
}
.entete__bascule-barres,
.entete__bascule-barres::before,
.entete__bascule-barres::after {
    display: block;
    width: 22px;
    height: 2px;
    margin-inline: auto;
    background: var(--c-titre);
    transition: transform var(--transition), background-color var(--transition);
}
.entete__bascule-barres::before,
.entete__bascule-barres::after {
    content: '';
    position: relative;
}
.entete__bascule-barres::before { top: -7px; }
.entete__bascule-barres::after  { top: 5px; }

.entete__bascule[aria-expanded="true"] .entete__bascule-barres { background: transparent; }
.entete__bascule[aria-expanded="true"] .entete__bascule-barres::before { transform: translateY(7px) rotate(45deg); }
.entete__bascule[aria-expanded="true"] .entete__bascule-barres::after  { transform: translateY(-5px) rotate(-45deg); }

.navigation__liste {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.navigation__item { margin: 0; }
.navigation__lien {
    display: block;
    padding: 6px 0;
    font-family: var(--f-nav);
    font-size: 0.98rem;
    color: var(--c-titre);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.navigation__lien:hover,
.navigation__lien:focus,
.navigation__lien.est-actif {
    color: var(--c-brand);
    border-bottom-color: var(--c-brand);
}

/* -------------------------------------------------------------------------
   7. HÉROS, BANDEAUX ET SÉPARATEURS
   ------------------------------------------------------------------------- */
.heros,
.bandeau {
    position: relative;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    color: #fff;
    isolation: isolate;
}
.heros   { background-image: var(--heros-image);   min-height: min(78vh, 620px); padding: 110px 0 130px; }
.bandeau { background-image: var(--bandeau-image); min-height: 340px;            padding: 80px 0 110px; }

.heros__voile,
.bandeau__voile,
.section__voile {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
}

.heros__contenu,
.bandeau__contenu { position: relative; }

.heros__surtitre {
    color: #fff;
    opacity: 0.85;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 0.8em;
}
.heros__titre,
.bandeau__titre {
    color: #fff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
    margin-bottom: 0.4em;
}
.heros__titre   { font-size: clamp(2.1rem, 5.5vw, 3.6rem); max-width: 18ch; }
.bandeau__titre { font-size: clamp(1.9rem, 4.5vw, 3rem);   max-width: 24ch; }

.heros__chapo,
.bandeau__chapo {
    max-width: 46ch;
    font-size: 1.08rem;
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
.heros__actions { margin-top: 1.8em; margin-bottom: 0; }

.fil-ariane { margin-bottom: 1.2em; font-size: 0.82rem; }
.fil-ariane ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.fil-ariane li { margin: 0; }
.fil-ariane li + li::before { content: '›'; margin-right: 8px; opacity: 0.7; }
.fil-ariane a { color: rgba(255, 255, 255, 0.9); }
.fil-ariane a:hover { color: #fff; }
.fil-ariane span { color: rgba(255, 255, 255, 0.75); }

.separateur {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    line-height: 0;
    z-index: 1;
}
.separateur svg {
    display: block;
    width: 100%;
    height: 60px;
    fill: var(--c-fond);
    /* Le tracé d'origine a sa partie pleine en haut : il est prévu pour un
       séparateur de haut de section. Retourné à 180°, le plein se retrouve en
       bas et vient donc bien mordre sur la section suivante. */
    transform: rotate(180deg);
}

/* -------------------------------------------------------------------------
   8. SECTIONS ET GRILLES
   ------------------------------------------------------------------------- */
.section { padding: 80px 0; }
.section--claire { background: var(--c-fond-clair); }
.section--sans-marge-haute { padding-top: 0; }
.section--erreur { padding: 110px 0; }

.section--sombre {
    position: relative;
    background-image: var(--section-image);
    background-size: cover;
    background-position: center;
    color: #fff;
    isolation: isolate;
    padding: 100px 0;
}
.section--sombre .section__voile { background: rgba(0, 0, 0, 0.62); }
.section--sombre h2, .section--sombre h3 { color: #fff; }
.section__contenu { position: relative; }

.section__titre { margin-bottom: 1.2em; }
.section--sombre .section__titre,
.section--claire .section__titre { text-align: center; }

.grille-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.grille-2--serree { gap: 40px; align-items: start; }
.grille-2--inversee .grille-2__visuel { order: -1; }
.grille-2__texte > :last-child,
.grille-2__visuel > :last-child { margin-bottom: 0; }

/* Bloc image pleine hauteur / texte, repris de la page d'accueil d'origine */
.duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}
.duo__visuel img { width: 100%; height: 100%; object-fit: cover; }
.duo__texte {
    display: flex;
    align-items: center;
    background: var(--c-fond-clair);
    padding: 70px 0;
}
.duo__texte-inner {
    max-width: calc(var(--conteneur) / 2);
    padding-inline: clamp(24px, 5vw, 60px);
}
.duo__texte-inner > :last-child { margin-bottom: 0; }

/* Chiffres clés */
.chiffres { padding: 50px 0; border-bottom: 1px solid var(--c-bordure); }
.chiffres__liste {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
.chiffres__item { margin: 0; }
.chiffres__item strong {
    display: block;
    font-family: var(--f-titre);
    font-size: clamp(1.7rem, 3.6vw, 2.4rem);
    font-weight: 700;
    color: var(--c-brand);
    line-height: 1.1;
}
.chiffres__item span {
    display: block;
    margin-top: 6px;
    font-size: 0.86rem;
    color: var(--c-texte-doux);
    line-height: 1.5;
}

/* -------------------------------------------------------------------------
   9. COMPOSANTS
   ------------------------------------------------------------------------- */

/* Cartes */
.cartes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 26px;
    margin-bottom: 40px;
}
.cartes--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.carte {
    background: #fff;
    border: 1px solid var(--c-bordure);
    border-radius: var(--rayon);
    padding: 28px;
}
.carte > :last-child { margin-bottom: 0; }
.carte h3 { color: var(--c-brand); }
.carte--liste ul { margin-bottom: 0; padding-left: 1.2em; }

.pile { display: grid; gap: 26px; align-content: start; }

.citation {
    margin: 1.6em 0;
    padding: 4px 0 4px 24px;
    border-left: 3px solid var(--c-brand);
    font-family: var(--f-titre);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--c-titre);
}
.citation p { margin-bottom: 0.4em; }
.citation footer {
    font-family: var(--f-corps);
    font-size: 0.82rem;
    font-style: normal;
    color: var(--c-texte-doux);
}

.figure { margin: 0; }
.figure figcaption {
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--c-texte-doux);
    text-align: center;
}

.liste-communes {
    columns: 2;
    column-gap: 30px;
    padding-left: 1.2em;
}

/* Volets d'engagement */
.volets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.volet {
    display: flex;
    flex-direction: column;
    margin: 0;
    background: #fff;
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.08);
}
.volet__image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.volet__corps { padding: 24px; flex: 1; }
.volet__corps > :last-child { margin-bottom: 0; }
.volet__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--c-brand);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
}
.volet__titre { font-size: 1.05rem; }

/* Documents à télécharger */
.documents {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 26px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}
.document {
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 30px;
    background: var(--c-fond-clair);
    border-radius: var(--rayon);
}
.document__icone { flex: none; color: var(--c-brand); }
.document__corps > :last-child { margin-bottom: 0; }
.document__titre { font-size: 1.2rem; }

/* Traitements de données (mentions légales) */
.traitement { margin-bottom: 40px; }
.traitement__finalite {
    margin-bottom: 0.3em;
    font-size: 1.1rem;
    color: var(--c-brand);
}
.traitement__sous-finalite {
    margin-bottom: 0.6em;
    font-size: 0.86rem;
    color: var(--c-texte-doux);
}

/* Un tableau large ne doit jamais élargir la page : il défile dans sa boîte. */
.tableau-defilant {
    overflow-x: auto;
    border-radius: var(--rayon);
    border: 1px solid var(--c-bordure);
    background: #fff;
}
.tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
    line-height: 1.6;
}
.tableau th,
.tableau td {
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--c-bordure);
}
.tableau th {
    background: var(--c-fond-clair);
    font-family: var(--f-corps);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-titre);
    white-space: nowrap;
}
.tableau tbody tr:last-child td { border-bottom: 0; }

/* Sous 780 px, cinq colonnes deviennent illisibles même en défilement :
   chaque cellule passe en ligne, précédée de son intitulé de colonne. */
@media (max-width: 780px) {
    .tableau-defilant { overflow-x: visible; }
    .tableau,
    .tableau tbody,
    .tableau tr,
    .tableau td { display: block; width: 100%; }
    .tableau thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
    }
    .tableau td { padding: 14px 16px; }
    .tableau td::before {
        content: attr(data-colonne);
        display: block;
        margin-bottom: 4px;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--c-texte-doux);
    }
}

/* Recettes */
.recettes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.recette-carte { margin: 0; }
.recette-carte__lien {
    display: block;
    height: 100%;
    background: #fff;
    border: 1px solid var(--c-bordure);
    border-radius: var(--rayon);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: box-shadow var(--transition), transform var(--transition);
}
.recette-carte__lien:hover,
.recette-carte__lien:focus-visible {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
}
.recette-carte__image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.recette-carte__corps { padding: 22px; }
.recette-carte__categorie {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-cyan);
}
.recette-carte__titre { font-size: 1.1rem; margin-bottom: 0.3em; }
.recette-carte__meta { margin: 0; font-size: 0.85rem; color: var(--c-texte-doux); }

.recette {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 50px;
    align-items: start;
}
.recette__visuel { margin: 0; position: sticky; top: 120px; }
.recette__infos {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin: 0 0 2em;
    padding: 20px 24px;
    list-style: none;
    background: var(--c-fond-clair);
    border-radius: var(--rayon);
}
.recette__infos li { margin: 0; }
.recette__infos span {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-texte-doux);
}
.recette__ingredients { padding-left: 1.2em; }
.recette__etapes { padding-left: 1.4em; }
.recette__etapes li { margin-bottom: 0.9em; }

.pagination-articles {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 40px;
}
.pagination-articles__lien {
    flex: 1 1 260px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--c-bordure);
    border-radius: var(--rayon);
    text-decoration: none;
    color: inherit;
}
.pagination-articles__lien--suivant { text-align: right; }
.pagination-articles__lien span {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-texte-doux);
}
.pagination-articles__lien strong { font-family: var(--f-titre); color: var(--c-brand); }

/* Vidéos : vignette locale, iframe YouTube chargée seulement au clic */
.videos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}
.video { position: relative; }
.video--fichier { margin-top: 40px; }
.video__titre { margin-bottom: 0.6em; font-size: 1.1rem; }

.video__declencheur {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--rayon);
    overflow: hidden;
    background: #000;
    cursor: pointer;
    aspect-ratio: 16 / 9;
}
.video__vignette {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: opacity var(--transition), transform var(--transition);
}
.video__declencheur:hover .video__vignette,
.video__declencheur:focus-visible .video__vignette { opacity: 1; transform: scale(1.03); }

/* Neutralisé le temps de la demande de consentement : plus de survol ni de
   curseur main, mais la boîte reste en place sous le panneau. */
.video__declencheur:disabled { cursor: default; }
.video__declencheur:disabled .video__vignette { opacity: 0.85; transform: none; }

.video__lecture {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--c-brand);
    box-shadow: 0 6px 26px rgba(0, 0, 0, 0.4);
    transition: background-color var(--transition);
}
.video__lecture::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #fff;
}
.video__declencheur:hover .video__lecture { background: var(--c-cyan); }

.video__libelle {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px 20px 16px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
    color: #fff;
    font-size: 0.9rem;
    text-align: left;
}

.video__cadre {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--rayon);
}

/* La vidéo auto-hébergée est en preload="none" : sans métadonnées, le
   navigateur dimensionne le lecteur d'après la vignette. On impose donc le
   ratio, sinon une vignette au mauvais format étire tout le bloc. La largeur
   est plafonnée pour rester cohérente avec les deux lecteurs YouTube au-dessus. */
.video--fichier {
    max-width: 860px;
    margin-inline: auto;
}
.video__enveloppe { position: relative; }

.video--fichier video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--rayon);
    background: #000;
}

/* Bouton de lecture superposé au lecteur natif : les contrôles du navigateur
   ne sont pas stylables de façon fiable, on pose donc le même bouton que sur
   les vignettes YouTube. Il est ajouté par main.js et disparaît au clic. */
.video__declencheur--local {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    aspect-ratio: auto;
}
.video__declencheur--local:hover .video__lecture { background: var(--c-cyan); }

/* Panneau de consentement affiché avant tout appel à YouTube */
.video__consentement {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    border-radius: var(--rayon);
    background: rgba(17, 17, 17, 0.94);
    color: #fff;
    text-align: center;
}
.video__consentement-texte {
    max-width: 46ch;
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
}
.video__consentement-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.video__consentement-actions .bouton { padding: 11px 24px; font-size: 0.78rem; }
.video__consentement-lien {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.78rem;
}
.video__consentement-lien:hover,
.video__consentement-lien:focus { color: #fff; }

/* Sur les vignettes très basses, le panneau prend le pas sur la lisibilité :
   on réduit le texte plutôt que de laisser déborder. */
@media (max-width: 480px) {
    .video__consentement { gap: 10px; padding: 16px; }
    .video__consentement-texte { font-size: 0.78rem; line-height: 1.45; }
    .video__consentement-lien { font-size: 0.72rem; }
}

/* Appel au contact */
.appel {
    position: relative;
    background-image: var(--section-image);
    background-size: cover;
    background-position: center;
    color: #fff;
    isolation: isolate;
    padding: 110px 0;
    text-align: center;
}
.appel--compact { padding: 80px 0; }
.appel .section__voile { background: rgba(0, 0, 0, 0.62); }
.appel__contenu { position: relative; }
.appel__logo { margin: 0 auto 26px; width: auto; height: 80px; }
.appel__titre { color: #fff; }
.appel__texte { color: rgba(255, 255, 255, 0.9); max-width: 52ch; margin-inline: auto; }
/* align-items: center plutôt que le « stretch » par défaut : sans cela, un
   bouton plus petit que son voisin voit sa boîte étirée à la hauteur du plus
   grand sans que son padding suive, et son libellé se retrouve décentré. */
.appel__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 1.8em 0 0;
}

.liens-secours {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 24px;
    margin: 1.5em 0 2em;
    padding: 0;
    list-style: none;
}
.liens-secours li { margin: 0; }

/* -------------------------------------------------------------------------
   10. PARTENAIRES
   L'ordre d'affichage est celui défini dans la vue : ne pas le modifier ici.
   ------------------------------------------------------------------------- */
.partenaires {
    padding: 60px 0;
    background: #fff;
    border-top: 1px solid var(--c-bordure);
}
.partenaires__titre {
    margin-bottom: 1.6em;
    font-size: 0.82rem;
    font-family: var(--f-corps);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-texte-doux);
    text-align: center;
}
.partenaires__liste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 30px 50px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.partenaires__item { margin: 0; }
.partenaires__item img {
    width: auto;
    max-height: 74px;
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter var(--transition), opacity var(--transition);
}
.partenaires__item a:hover img,
.partenaires__item a:focus-visible img { filter: none; opacity: 1; }

/* -------------------------------------------------------------------------
   11. FORMULAIRE
   ------------------------------------------------------------------------- */
.grille-contact {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 60px;
    align-items: start;
}

.coordonnees__adresse { font-style: normal; margin-bottom: 1.4em; }
.coordonnees__ligne { margin-bottom: 0.9em; }
.coordonnees__label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-texte-doux);
}

.formulaire__intro { color: var(--c-texte-doux); }

.champ { margin-bottom: 20px; }
.champ label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 600;
}
.champ__option { font-weight: 400; color: var(--c-texte-doux); }
.champ input,
.champ textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--c-bordure);
    border-radius: var(--rayon);
    background: #fff;
    color: var(--c-texte);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color var(--transition);
}
.champ input:focus,
.champ textarea:focus { border-color: var(--c-brand); }
.champ [aria-invalid="true"] { border-color: #C0392B; }
.champ textarea { resize: vertical; min-height: 160px; }

/* Champ leurre : jamais visible, jamais annoncé aux lecteurs d'écran */
.champ-leurre {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.formulaire__mention { font-size: 0.82rem; color: var(--c-texte-doux); }

/* Question anti-spam : détachée du reste pour qu'on ne la remplisse pas
   machinalement comme un champ ordinaire. */
.champ--antispam {
    padding: 18px 20px;
    background: var(--c-fond-clair);
    border-radius: var(--rayon);
    border-left: 3px solid var(--c-cyan);
}
.champ--antispam input { max-width: 140px; }
.champ__aide {
    margin: 8px 0 0;
    font-size: 0.78rem;
    color: var(--c-texte-doux);
}

.alerte {
    padding: 16px 20px;
    margin-bottom: 24px;
    border-radius: var(--rayon);
    border-left: 4px solid;
}
.alerte > :last-child { margin-bottom: 0; }
.alerte--succes { background: #EEF7E4; border-color: var(--c-vert); color: #3E5C12; }
.alerte--erreur { background: #FDECEA; border-color: #C0392B; color: #8B2A20; }

/* -------------------------------------------------------------------------
   12. PIED DE PAGE
   ------------------------------------------------------------------------- */
.pied { background: var(--c-noir); color: #D8D8D8; }
.pied__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 44px;
    padding-block: 64px;
}
.pied__bloc > :last-child { margin-bottom: 0; }
.pied__logo { width: auto; height: 78px; margin-bottom: 18px; }
.pied__baseline { font-size: 0.92rem; color: #A9A9A9; max-width: 34ch; }
.pied__titre {
    color: #fff;
    font-size: 1rem;
    letter-spacing: 0.04em;
    margin-bottom: 1em;
}
.pied__adresse { font-style: normal; margin-bottom: 1em; line-height: 1.9; }
.pied a { color: #D8D8D8; text-decoration: none; }
.pied a:hover, .pied a:focus { color: #fff; text-decoration: underline; }

.pied__liens, .pied__legal {
    margin: 0;
    padding: 0;
    list-style: none;
}
.pied__liens li { margin-bottom: 0.5em; }

.pied__reseau {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    font-size: 0.85rem;
}

.pied__copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: #0A0A0A;
    font-size: 0.83rem;
}
.pied__copyright-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px 24px;
    padding-block: 20px;
}
.pied__copyright p { margin: 0; color: #9A9A9A; }
.pied__legal { display: flex; gap: 20px; }
.pied__legal li { margin: 0; }

/* -------------------------------------------------------------------------
   13. RESPONSIVE ET IMPRESSION
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .grille-2, .grille-contact { gap: 40px; }
    .chiffres__liste { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .entete__bascule { display: block; }

    .navigation {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid var(--c-bordure);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
        display: none;
    }
    .navigation.est-ouvert { display: block; }
    .navigation__liste {
        flex-direction: column;
        gap: 0;
        padding: 8px var(--gouttiere) 16px;
    }
    .navigation__lien {
        padding: 12px 0;
        border-bottom: 1px solid var(--c-bordure);
    }
    .navigation__lien:hover,
    .navigation__lien:focus,
    .navigation__lien.est-actif { border-bottom-color: var(--c-brand); }

    .entete__inner { min-height: 78px; }
    .entete__logo img { height: 54px; }

    .grille-2,
    .grille-contact,
    .duo,
    .recette { grid-template-columns: 1fr; }

    .grille-2--inversee .grille-2__visuel { order: 0; }
    .duo__visuel img { aspect-ratio: 16 / 9; }
    .duo__texte-inner { max-width: var(--conteneur); margin-inline: auto; padding-inline: var(--gouttiere); }
    .recette__visuel { position: static; }
}

@media (max-width: 600px) {
    .section { padding: 56px 0; }
    .heros { padding: 80px 0 100px; min-height: 60vh; }
    .bandeau { padding: 60px 0 90px; min-height: 260px; }
    .separateur svg { height: 36px; }
    .chiffres__liste { grid-template-columns: repeat(2, 1fr); gap: 22px; }
    .barre-contact__inner { justify-content: center; gap: 18px; }
    .appel__actions { flex-direction: column; align-items: stretch; }
    .pagination-articles__lien--suivant { text-align: left; }
    .liste-communes { columns: 1; }
    .partenaires__liste { gap: 24px 34px; }
    .partenaires__item img { max-height: 56px; }
}

/* Respect de la préférence système « moins d'animations » */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    .barre-contact,
    .entete__bascule,
    .navigation,
    .separateur,
    .appel,
    .partenaires,
    .pied__copyright,
    .video { display: none !important; }

    body { color: #000; font-size: 11pt; }
    .heros, .bandeau { min-height: auto; padding: 0 0 20px; color: #000; background: none; }
    .heros__voile, .bandeau__voile { display: none; }
    .heros__titre, .bandeau__titre, .heros__chapo, .bandeau__chapo { color: #000; text-shadow: none; }
    a::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}