@charset "UTF-8";
/* ==========================================================================
 *  Les Fermes AMAP'orte — Feuille de style principale
 *  --------------------------------------------------------------------------
 *  Fichier : public/css/style.css
 *  Approche : mobile d'abord (une seule colonne), puis media queries.
 *  Palette : vert forêt #4A7C59 · crème #F4E9CD · terre #A67C52
 *            texte foncé #2C3E2E
 * ========================================================================== */

/* --------------------------------------------------------------------------
 *  1. Variables
 * ------------------------------------------------------------------------ */
:root {
    --vert:          #4A7C59;
    --vert-fonce:    #375B44;
    --vert-clair:    #6E9C7A;
    --vert-pale:     #E7F0E6;

    --creme:         #F4E9CD;
    --creme-clair:   #FBF6E7;
    --creme-fonce:   #E6D8B4;

    --terre:         #A67C52;
    --terre-fonce:   #855F3C;
    --terre-pale:    #F1E6D8;

    --texte:         #2C3E2E;
    --texte-doux:    #5C6E5E;
    --texte-clair:   #7C8B7E;

    --fond:          #FDFBF5;
    --blanc:         #FFFFFF;
    --bordure:       #E4DCC6;

    --danger:        #A33A2E;
    --danger-pale:   #FBEDEB;
    --succes:        #37693F;
    --succes-pale:   #EAF3E9;

    --rayon:         16px;
    --rayon-petit:   10px;
    --rayon-rond:    999px;

    --ombre:         0 4px 18px rgba(44, 62, 46, 0.08);
    --ombre-forte:   0 12px 30px rgba(44, 62, 46, 0.16);

    --police-titre:  'Fraunces', Georgia, 'Times New Roman', serif;
    --police-texte:  'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --largeur:       1180px;
    --transition:    0.25s ease;
}

/* --------------------------------------------------------------------------
 *  2. Réinitialisation et base
 * ------------------------------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--police-texte);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--texte);
    background: var(--fond);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

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

a {
    color: var(--vert-fonce);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--transition);
}

a:hover {
    color: var(--terre);
}

h1, h2, h3, h4 {
    font-family: var(--police-titre);
    font-weight: 600;
    line-height: 1.2;
    color: var(--texte);
}

ul, ol {
    list-style-position: inside;
}

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

/* --------------------------------------------------------------------------
 *  3. Utilitaires de mise en page
 * ------------------------------------------------------------------------ */
.conteneur {
    width: 100%;
    max-width: var(--largeur);
    margin-inline: auto;
    padding-inline: 1.1rem;
}

.conteneur--etroit {
    max-width: 780px;
}

.contenu {
    flex: 1 1 auto;
}

.centre {
    text-align: center;
}

.lien-evitement {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--vert-fonce);
    color: var(--blanc);
    padding: 0.7rem 1.2rem;
    z-index: 999;
    border-radius: 0 0 var(--rayon-petit) 0;
}

.lien-evitement:focus {
    left: 0;
}

/* --------------------------------------------------------------------------
 *  4. Boutons
 * ------------------------------------------------------------------------ */
.bouton {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1.5rem;
    border: 2px solid transparent;
    border-radius: var(--rayon-rond);
    font-family: var(--police-texte);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), transform var(--transition);
}

.bouton--principal {
    background: var(--vert);
    border-color: var(--vert);
    color: var(--blanc);
}

.bouton--principal:hover {
    background: var(--vert-fonce);
    border-color: var(--vert-fonce);
    color: var(--blanc);
    transform: translateY(-2px);
}

.bouton--contour {
    background: transparent;
    border-color: var(--vert);
    color: var(--vert-fonce);
}

.bouton--contour:hover {
    background: var(--vert-pale);
    color: var(--vert-fonce);
}

.bouton--clair {
    background: var(--creme);
    border-color: var(--creme);
    color: var(--vert-fonce);
}

.bouton--clair:hover {
    background: var(--blanc);
    border-color: var(--blanc);
    color: var(--vert-fonce);
}

.bouton--discret {
    background: var(--blanc);
    border-color: var(--terre);
    color: var(--terre-fonce);
    font-size: 0.9rem;
    padding: 0.55rem 1.1rem;
}

.bouton--discret:hover {
    background: var(--terre-pale);
    color: var(--terre-fonce);
}

.bouton:disabled {
    opacity: 0.55;
    cursor: progress;
    transform: none;
}

.bouton.est-pret:not(:disabled) {
    animation: pulse-doux 0.6s ease 1;
}

@keyframes pulse-doux {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
 *  5. En-tête et navigation
 * ------------------------------------------------------------------------ */
.entete {
    background: var(--blanc);
    border-bottom: 1px solid var(--bordure);
    position: sticky;
    top: 0;
    z-index: 500;
    box-shadow: 0 2px 10px rgba(44, 62, 46, 0.05);
}

.entete__barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.7rem;
}

.logo {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    line-height: 1.15;
}

.logo__marque {
    font-family: var(--police-titre);
    font-size: 1.15rem;
    color: var(--texte);
}

.logo__marque strong {
    color: var(--vert);
    font-weight: 600;
}

.logo__ville {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--terre);
}

.burger {
    background: none;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
    font-size: 1.3rem;
    line-height: 1;
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    color: var(--texte);
}

.nav {
    display: none;
}

.nav.est-ouvert {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--blanc);
    border-bottom: 1px solid var(--bordure);
    box-shadow: var(--ombre);
    padding: 0.8rem 1.1rem 1.2rem;
}

.nav__liste {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.nav__liste a {
    display: block;
    padding: 0.6rem 0.2rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--texte);
    border-bottom: 2px solid transparent;
}

.nav__liste a:hover {
    color: var(--vert);
}

.nav__liste a.active {
    color: var(--vert-fonce);
    border-bottom-color: var(--vert);
    font-weight: 600;
}

/* Signe discret signalant un lien vers un autre site (ex. AmapJ) */
.nav__externe {
    margin-left: 0.2rem;
    font-size: 0.85em;
    color: var(--texte-clair);
}

.nav__liste a:hover .nav__externe {
    color: var(--vert);
}

/* --------------------------------------------------------------------------
 *  6. Messages flash
 * ------------------------------------------------------------------------ */
.zone-flash {
    padding-block: 0.8rem 0;
}

.flash {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--rayon-petit);
    border-left: 5px solid var(--vert);
    background: var(--vert-pale);
    margin-bottom: 0.6rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.flash--erreur {
    border-left-color: var(--danger);
    background: var(--danger-pale);
}

.flash--info {
    border-left-color: var(--terre);
    background: var(--terre-pale);
}

.flash--sortie {
    opacity: 0;
    transform: translateY(-6px);
}

.flash__fermer {
    background: none;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    padding: 0 0.2rem;
}

/* --------------------------------------------------------------------------
 *  7. Pied de page
 * ------------------------------------------------------------------------ */
.pied {
    background: var(--texte);
    color: var(--creme);
    margin-top: 3rem;
    padding-top: 2.2rem;
}

.pied a {
    color: var(--creme);
}

.pied a:hover {
    color: var(--blanc);
}

.pied__grille {
    display: grid;
    gap: 1.8rem;
    padding-bottom: 1.8rem;
}

.pied__bloc p {
    font-size: 0.92rem;
    color: rgba(244, 233, 205, 0.85);
}

.pied__titre {
    font-family: var(--police-titre);
    font-size: 1.1rem;
    color: var(--blanc);
    margin-bottom: 0.6rem;
}

.pied__liens {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.92rem;
}

.pied__affiche strong {
    color: var(--blanc);
}

.pied__bas {
    border-top: 1px solid rgba(244, 233, 205, 0.2);
    padding-block: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: rgba(244, 233, 205, 0.7);
}

/* --------------------------------------------------------------------------
 *  8. Sections et titres
 * ------------------------------------------------------------------------ */
.section {
    padding-block: 2.4rem;
}

.section--alternee {
    background: var(--creme-clair);
    border-block: 1px solid var(--bordure);
}

.section--appel {
    background: linear-gradient(160deg, var(--vert-pale), var(--creme));
    border-top: 1px solid var(--bordure);
}

.section__titre {
    font-size: 1.6rem;
    margin-bottom: 0.7rem;
}

.section__titre--page {
    font-size: 2rem;
}

.section__intro {
    color: var(--texte-doux);
    max-width: 62ch;
    margin-bottom: 1.4rem;
    text-wrap: pretty;
}

.section__note {
    margin-top: 1rem;
    font-size: 0.88rem;
    color: var(--texte-clair);
}

.fil-ariane {
    font-size: 0.85rem;
    color: var(--texte-clair);
    margin-bottom: 0.8rem;
}

.fil-ariane a {
    text-decoration: none;
    color: var(--texte-doux);
}

.fil-ariane a:hover {
    color: var(--vert);
}

/* --------------------------------------------------------------------------
 *  9. Bandeau d'accueil (hero)
 * ------------------------------------------------------------------------ */
.hero {
    background:
        radial-gradient(circle at 12% 20%, rgba(74, 124, 89, 0.18), transparent 55%),
        linear-gradient(150deg, var(--vert-pale), var(--creme));
    border-bottom: 1px solid var(--bordure);
    padding-block: 3rem;
    text-align: center;
}

.hero__lieu {
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: var(--terre-fonce);
    margin-bottom: 0.7rem;
}

.hero__titre {
    font-size: clamp(2.1rem, 7vw, 3.4rem);
    color: var(--vert-fonce);
    margin-bottom: 0.9rem;
}

.hero__texte {
    max-width: 58ch;
    margin: 0 auto 1.6rem;
    color: var(--texte-doux);
    font-size: 1.05rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: center;
}

/* --------------------------------------------------------------------------
 * 10. Bloc deux colonnes
 * ------------------------------------------------------------------------ */
.duo {
    display: grid;
    gap: 1.8rem;
    align-items: center;
}

.duo__visuel img {
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    width: 100%;
    object-fit: cover;
}

.duo--colonnes,
.duo--contact {
    align-items: start;
}

/* --------------------------------------------------------------------------
 * 11. Statistiques
 * ------------------------------------------------------------------------ */
.statistiques {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
    margin-top: 2rem;
}

.statistiques li {
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 1rem 0.8rem;
    text-align: center;
    box-shadow: var(--ombre);
}

.statistiques strong {
    display: block;
    font-family: var(--police-titre);
    font-size: 1.8rem;
    color: var(--vert);
    line-height: 1.1;
}

.statistiques span {
    font-size: 0.85rem;
    color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
 * 12. Listes (coches, puces, dates, étiquettes)
 * ------------------------------------------------------------------------ */
.liste-coches,
.liste-puces {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.liste-coches {
    list-style: none;
}

.liste-coches li::before {
    content: "✓";
    color: var(--vert);
    font-weight: 700;
    margin-right: 0.5rem;
}

.liste-puces li::marker {
    color: var(--vert);
}

/* Les styles de l'ancien calendrier des distributions (.liste-dates)
   ont été retirés avec la fonctionnalité : les horaires sont désormais
   de simples réglages affichés dans une carte (.encart--horaire). */

.liste-etiquettes {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.etiquette {
    display: inline-block;
    background: var(--vert-pale);
    color: var(--vert-fonce);
    border-radius: var(--rayon-rond);
    padding: 0.15rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.etiquette--lien {
    text-decoration: none;
}

.etiquette--lien:hover {
    background: var(--vert);
    color: var(--blanc);
}

/* --------------------------------------------------------------------------
 * 13. Étapes numérotées
 * ------------------------------------------------------------------------ */
.etapes {
    list-style: none;
    display: grid;
    gap: 1rem;
}

.etape {
    background: var(--blanc);
    border-radius: var(--rayon);
    border: 1px solid var(--bordure);
    box-shadow: var(--ombre);
    padding: 1.3rem 1.2rem;
}

.etape__numero {
    display: block;
    font-family: var(--police-titre);
    font-size: 1.7rem;
    color: var(--terre);
    line-height: 1;
    margin-bottom: 0.4rem;
}

.etape__titre {
    font-size: 1.15rem;
    margin-bottom: 0.3rem;
}

.etape p {
    font-size: 0.94rem;
    color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
 * 14. (réservé)
 *     La note « pourquoi les coordonnées sont protégées » a été retirée avec
 *     l'affichage des coordonnées des tuteurs : aucune donnée personnelle
 *     n'est publiée (voir README § 9).
 * ------------------------------------------------------------------------ */

/* --------------------------------------------------------------------------
 * 15. Pages d'erreur
 * ------------------------------------------------------------------------ */
.section--erreur {
    text-align: center;
    padding-block: 4rem;
}

.erreur__code {
    font-family: var(--police-titre);
    font-size: clamp(3rem, 14vw, 6rem);
    color: var(--vert-pale);
    line-height: 1;
}

.erreur__titre {
    font-size: 1.7rem;
    margin-bottom: 0.6rem;
}

.erreur__texte {
    color: var(--texte-doux);
    margin-bottom: 1.6rem;
}

.erreur__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: center;
}

/* --------------------------------------------------------------------------
 * 16. Grilles
 * ------------------------------------------------------------------------ */
.grille {
    display: grid;
    gap: 1.3rem;
}

.grille--cartes,
.grille--tuteurs,
.grille--bureau,
.grille--valeurs {
    grid-template-columns: 1fr;
}

/* --------------------------------------------------------------------------
 * 17. Cartes génériques (producteur)
 * ------------------------------------------------------------------------ */
.carte {
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}

.carte:hover {
    transform: translateY(-4px);
    box-shadow: var(--ombre-forte);
}

.carte__lien {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.carte__image {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--creme);
}

.carte__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.carte:hover .carte__image img {
    transform: scale(1.05);
}

.carte__corps {
    padding: 1.1rem 1.2rem 1.4rem;
}

.carte__titre {
    font-size: 1.2rem;
    margin: 0.5rem 0 0.2rem;
}

.carte__sous-titre {
    font-size: 0.88rem;
    color: var(--terre-fonce);
    margin-bottom: 0.5rem;
}

.carte__texte {
    font-size: 0.93rem;
    color: var(--texte-doux);
}

.carte__plus {
    display: inline-block;
    margin-top: 0.8rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--vert);
}

/* --------------------------------------------------------------------------
 * 18. Carte tuteur et bloc de contact protégé
 * ------------------------------------------------------------------------ */
.carte--tuteur {
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.carte-tuteur__entete {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.carte-tuteur__photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--vert-pale);
    flex: 0 0 auto;
}

.carte-tuteur__nom {
    font-size: 1.1rem;
}

.carte-tuteur__role {
    font-size: 0.85rem;
    color: var(--terre-fonce);
    font-weight: 600;
}

.carte-tuteur__texte {
    font-size: 0.92rem;
    color: var(--texte-doux);
}

.carte-tuteur__label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--texte-clair);
    margin-bottom: 0.35rem;
}

.carte-tuteur__note {
    margin-top: auto;
}

/* --------------------------------------------------------------------------
 * 18. Contact d'un tuteur (affiché à la demande)
 * ------------------------------------------------------------------------ */
.contact-tuteur {
    border-top: 1px solid var(--bordure);
    padding-top: 0.9rem;
    margin-top: auto;
}

.contact-tuteur--fiche {
    background: var(--creme-clair);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 1.1rem;
    margin-top: 1.4rem;
}

.contact-tuteur__titre {
    font-family: var(--police-titre);
    font-size: 1.05rem;
    margin-bottom: 0.6rem;
}

.contact-tuteur__sortie {
    margin-top: 0.7rem;
}

.contact-tuteur__liste {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.contact-tuteur__liste a {
    font-weight: 600;
    word-break: break-word;
}

.contact-tuteur__note {
    margin-top: 0.6rem;
    font-size: 0.82rem;
    color: var(--texte-clair);
}

.contact-tuteur__indispo {
    font-size: 0.88rem;
    color: var(--texte-doux);
}

.contact-tuteur__erreur {
    font-size: 0.9rem;
    color: var(--danger);
}

/* --------------------------------------------------------------------------
 * 19. Bureau et valeurs
 * ------------------------------------------------------------------------ */
.carte-membre {
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 1.3rem 1.1rem;
    text-align: center;
}

.carte-membre__photo {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 0.7rem;
    border: 3px solid var(--vert-pale);
}

.carte-membre__nom {
    font-size: 1.05rem;
}

.carte-membre__fonction {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--terre-fonce);
    margin-bottom: 0.4rem;
}

.carte-membre__texte {
    font-size: 0.9rem;
    color: var(--texte-doux);
}

.carte-valeur {
    background: var(--blanc);
    border-radius: var(--rayon);
    border: 1px solid var(--bordure);
    box-shadow: var(--ombre);
    padding: 1.3rem 1.2rem;
}

.carte-valeur__icone {
    font-size: 1.9rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.carte-valeur h3 {
    font-size: 1.1rem;
    margin-bottom: 0.35rem;
}

.carte-valeur p {
    font-size: 0.92rem;
    color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
 * 20. (réservé)
 *     Les styles des actualités et de l'ancien calendrier des distributions
 *     ont été retirés avec ces fonctionnalités. Les publications de la
 *     newsletter sont désormais affichées par la modale (.liste-news, §31).
 * ------------------------------------------------------------------------ */

/* --------------------------------------------------------------------------
 * 21. Texte riche (contenu d'article)
 * ------------------------------------------------------------------------ */
.texte-riche p {
    margin-bottom: 0.9rem;
}

.texte-riche h2,
.texte-riche h3,
.texte-riche h4 {
    margin: 1.4rem 0 0.6rem;
    color: var(--vert-fonce);
}

.texte-riche ul,
.texte-riche ol {
    margin: 0 0 0.9rem 1.2rem;
}

.texte-riche li {
    margin-bottom: 0.25rem;
}

.texte-riche blockquote {
    border-left: 4px solid var(--vert);
    padding-left: 1rem;
    color: var(--texte-doux);
    font-style: italic;
}

/* --------------------------------------------------------------------------
 * 22. Fiche détaillée (producteur / tuteur) et listes d'infos
 * ------------------------------------------------------------------------ */
.fiche {
    display: grid;
    gap: 1.6rem;
    align-items: start;
}

.fiche__image {
    width: 100%;
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.fiche__image--portrait {
    aspect-ratio: 1 / 1;
    max-width: 320px;
}

.fiche__titre {
    font-size: clamp(1.7rem, 5vw, 2.3rem);
    color: var(--vert-fonce);
    margin: 0.5rem 0 0.2rem;
}

.fiche__ferme {
    font-size: 1rem;
    font-weight: 600;
    color: var(--terre-fonce);
    margin-bottom: 0.6rem;
}

.fiche__accroche {
    font-size: 1.05rem;
    color: var(--texte-doux);
    margin-bottom: 0.9rem;
}

.infos {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1rem;
    margin-top: 1.3rem;
    font-size: 0.94rem;
}

.infos dt {
    font-weight: 600;
    color: var(--vert-fonce);
}

.infos dd {
    color: var(--texte-doux);
    word-break: break-word;
}

.liste-producteurs {
    list-style: none;
    display: grid;
    gap: 0.6rem;
}

.liste-producteurs__lien {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 1rem;
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
    text-decoration: none;
    color: var(--texte);
    box-shadow: var(--ombre);
}

.liste-producteurs__lien:hover {
    border-color: var(--vert);
    color: var(--texte);
}

.liste-producteurs__nom {
    font-weight: 600;
}

/* --------------------------------------------------------------------------
 * 23. Filtres par catégorie
 * ------------------------------------------------------------------------ */
.filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.6rem;
}

.filtre {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-rond);
    background: var(--blanc);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--texte-doux);
    transition: background var(--transition), color var(--transition);
}

.filtre:hover {
    border-color: var(--vert);
    color: var(--vert-fonce);
}

.filtre--actif {
    background: var(--vert);
    border-color: var(--vert);
    color: var(--blanc);
}

.filtre--actif:hover {
    color: var(--blanc);
}

/* --------------------------------------------------------------------------
 * 24. Encarts et liens fléchés
 * ------------------------------------------------------------------------ */
.encart {
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 1.3rem 1.2rem;
}

.encart__titre {
    font-size: 1.15rem;
    margin-bottom: 0.7rem;
}

.encart--coordonnees {
    background: var(--creme-clair);
}

.encart__note {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--texte-clair);
}

.encart-vide {
    background: var(--creme-clair);
    border: 1px dashed var(--bordure);
    border-radius: var(--rayon);
    padding: 1.4rem;
    text-align: center;
    color: var(--texte-doux);
}

.lien-fleche {
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--vert);
    margin-top: auto;
}

.lien-fleche:hover {
    color: var(--terre);
}

/* --------------------------------------------------------------------------
 * 25. Formulaire de contact
 * ------------------------------------------------------------------------ */
.formulaire {
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 1.4rem 1.2rem;
}

.champ {
    margin-bottom: 1.1rem;
}

.champ label {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 0.35rem;
    color: var(--vert-fonce);
}

.champ input,
.champ textarea {
    width: 100%;
    font-family: var(--police-texte);
    font-size: 1rem;
    color: var(--texte);
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
    padding: 0.65rem 0.8rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.champ textarea {
    resize: vertical;
    min-height: 140px;
}

.champ input:focus,
.champ textarea:focus {
    border-color: var(--vert);
    box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.18);
    outline: none;
}

.champ--erreur input,
.champ--erreur textarea {
    border-color: var(--danger);
    background: var(--danger-pale);
}

.champ__erreur {
    margin-top: 0.3rem;
    font-size: 0.85rem;
    color: var(--danger);
    font-weight: 500;
}

.champ__note {
    font-size: 0.82rem;
    color: var(--texte-clair);
    margin-bottom: 1rem;
}

.obligatoire {
    color: var(--danger);
}

/* Piège à robots : invisible pour les humains, mais présent dans le formulaire. */
.champ-piege {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.bouton.est-chargement {
    opacity: 0.7;
    cursor: progress;
}

/* --------------------------------------------------------------------------
 * 26. Adaptations tablette (≥ 620 px)
 * ------------------------------------------------------------------------ */
@media (min-width: 620px) {
    .section {
        padding-block: 3rem;
    }

    .statistiques {
        grid-template-columns: repeat(4, 1fr);
    }

    .grille--cartes,
    .grille--tuteurs,
    .grille--bureau,
    .grille--valeurs {
        grid-template-columns: repeat(2, 1fr);
    }

    .etapes {
        grid-template-columns: repeat(3, 1fr);
    }

    .pied__grille {
        grid-template-columns: repeat(3, 1fr);
    }

    .pied__bas {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .fiche {
        grid-template-columns: 1fr 1.2fr;
    }

    .duo {
        grid-template-columns: 1fr 1fr;
    }

    .duo--colonnes {
        grid-template-columns: 1fr 1fr;
    }

    .duo--contact {
        grid-template-columns: 1.4fr 1fr;
    }
}

/* --------------------------------------------------------------------------
 * 27. Adaptations bureau (≥ 900 px) : navigation horizontale
 * ------------------------------------------------------------------------ */
@media (min-width: 900px) {
    .burger {
        display: none;
    }

    .nav {
        display: block;
        position: static;
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
    }

    .nav__liste {
        flex-direction: row;
        align-items: center;
        gap: 1.4rem;
    }

    .nav__liste a {
        padding: 0.4rem 0;
        font-size: 0.95rem;
    }

    .conteneur {
        padding-inline: 1.6rem;
    }

    .hero {
        padding-block: 4.4rem;
    }

    .grille--cartes {
        grid-template-columns: repeat(3, 1fr);
    }

    .grille--tuteurs {
        grid-template-columns: repeat(2, 1fr);
    }

    .grille--bureau {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .grille--valeurs {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --------------------------------------------------------------------------
 * 28. Grands écrans (≥ 1200 px)
 * ------------------------------------------------------------------------ */
@media (min-width: 1200px) {
    .grille--cartes {
        grid-template-columns: repeat(3, 1fr);
    }

    .carte--tuteur {
        padding: 1.5rem;
    }
}

/* --------------------------------------------------------------------------
 * 30. Tableau simple (page de diagnostic)
 * ------------------------------------------------------------------------ */
.tableau-simple {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    overflow: hidden;
    margin-top: 1.2rem;
}

.tableau-simple th,
.tableau-simple td {
    padding: 0.65rem 0.8rem;
    text-align: left;
    border-bottom: 1px solid var(--bordure);
    vertical-align: top;
}

.tableau-simple thead th {
    background: var(--creme-clair);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--texte-doux);
}

.tableau-simple tbody tr:last-child td {
    border-bottom: none;
}

.etiquette--alerte {
    background: #FBEDEB;
    color: #A33A2E;
}

.flash--succes {
    border-left-color: var(--succes);
    background: var(--succes-pale);
}

/* --------------------------------------------------------------------------
 * 29. Accessibilité : respect des préférences de mouvement réduit
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
 * 31. Modale (fenêtre « dernières nouvelles » de la newsletter)
 * ------------------------------------------------------------------------ */
body.sans-defilement {
    overflow: hidden;
}

.modale {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modale[hidden] {
    display: none;
}

.modale__fond {
    position: absolute;
    inset: 0;
    background: rgba(27, 43, 29, 0.55);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.modale.est-ouverte .modale__fond {
    opacity: 1;
}

.modale__boite {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 620px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--blanc);
    border-radius: var(--rayon);
    box-shadow: 0 24px 60px rgba(27, 43, 29, 0.35);
    padding: 1.6rem 1.4rem;
    transform: translateY(12px);
    opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease;
}

.modale.est-ouverte .modale__boite {
    transform: translateY(0);
    opacity: 1;
}

.modale__fermer {
    position: absolute;
    top: 0.6rem;
    right: 0.8rem;
    background: none;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    color: var(--texte-doux);
    padding: 0.2rem 0.4rem;
    border-radius: var(--rayon-petit);
}

.modale__fermer:hover {
    background: var(--vert-pale);
    color: var(--vert-fonce);
}

.modale__titre {
    font-size: 1.4rem;
    color: var(--vert-fonce);
    margin-bottom: 0.3rem;
}

.modale__intro {
    color: var(--texte-doux);
    margin-bottom: 1.1rem;
    font-size: 0.95rem;
}

.modale__pied {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bordure);
    text-align: center;
}

/* --- Publications de la newsletter -------------------------------------- */
.liste-news {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.liste-news__item {
    background: var(--creme-clair);
    border: 1px solid var(--bordure);
    border-left: 5px solid var(--vert);
    border-radius: var(--rayon-petit);
    padding: 0.85rem 1rem;
}

.liste-news__date {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--terre);
    margin-bottom: 0.15rem;
}

.liste-news__titre {
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
}

.liste-news__titre a {
    text-decoration: none;
    color: var(--texte);
}

.liste-news__titre a:hover {
    color: var(--vert);
}

.liste-news__extrait {
    font-size: 0.9rem;
    color: var(--texte-doux);
}

/* Lien « Newsletter » du menu principal */
.nav__newsletter {
    cursor: pointer;
}

/* --- Accordéon des publications (modale newsletter) ---------------------- */
.news__bascule {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--texte);
}

.news__bascule:hover,
.news__bascule:focus-visible {
    color: var(--vert);
}

.news__chevron {
    flex: 0 0 auto;
    font-size: 0.7rem;
    line-height: 1.6;
    color: var(--vert);
    transition: transform var(--transition);
}

.news__bascule[aria-expanded="true"] .news__chevron {
    transform: rotate(180deg);
}

.news__panneau {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--bordure);
    font-size: 0.97rem;
    overflow-x: auto;
}

.news__panneau img {
    max-width: 100%;
    height: auto;
    border-radius: var(--rayon-petit);
}

.news__panneau table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
    margin-bottom: 0.9rem;
}

.news__panneau th,
.news__panneau td {
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--bordure);
    text-align: left;
    vertical-align: top;
}

.news__panneau h2,
.news__panneau h3,
.news__panneau h4 {
    font-family: var(--police-titre);
    color: var(--vert-fonce);
    margin: 1rem 0 0.5rem;
    font-size: 1.15rem;
}

.news__panneau p {
    margin-bottom: 0.8rem;
}

.news__panneau ul,
.news__panneau ol {
    margin: 0 0 0.9rem 1.2rem;
}

.news__panneau a {
    color: var(--vert);
}

.news__attente,
.news__erreur {
    font-size: 0.9rem;
    color: var(--texte-doux);
    font-style: italic;
}

.news__erreur {
    color: #A33A2E;
    font-style: normal;
}

.news__source {
    margin-top: 0.6rem;
    font-size: 0.82rem;
}

.news__source a {
    color: var(--terre);
}

/* --- Carte des horaires de distribution --------------------------------- */
.encart--horaire {
    background: var(--vert-pale);
    border-color: var(--vert-clair);
}

.encart__icone {
    font-size: 1.8rem;
    line-height: 1;
    margin-bottom: 0.4rem;
}

.encart__valeur {
    font-family: var(--police-titre);
    font-size: 1.25rem;
    color: var(--vert-fonce);
}

.encart__precision {
    font-size: 0.9rem;
    color: var(--texte-doux);
}

@media (max-width: 620px) {
    .modale__boite {
        max-height: 90vh;
        padding: 1.2rem 1rem;
    }

    .modale__titre {
        font-size: 1.2rem;
    }
}

/* --------------------------------------------------------------------------
 * 32. Liens de carte, actions de section et notes
 * ------------------------------------------------------------------------ */

/* Logo téléversé dans l'en-tête (remplace le nom en texte) */
.logo__image {
    display: block;
    height: 46px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
}

/* Lien discret vers la carte du lieu de distribution */
.lien-carte {
    display: inline-block;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--vert-fonce);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.lien-carte:hover {
    color: var(--terre);
}

.lien-carte span {
    font-size: 0.85em;
}

/* Dans une section centrée, le texte d'introduction est centré lui aussi :
   sans cela, le bloc de 62ch restait collé à gauche et les fins de ligne
   tombaient au milieu d'une phrase. */
.centre .section__intro,
.section--appel .section__intro {
    margin-inline: auto;
    text-wrap: balance;
}

/* Boutons d'une section : détachés du bloc qui précède */
.section__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 2rem;
}

/* Deux paragraphes dans une carte d'étape (texte + lien) */
.etape p + p {
    margin-top: 0.5rem;
}

/* Lien « Voir la fiche » au bas d'une carte de tuteur */
.carte-tuteur__suite {
    margin-top: 0.9rem;
}