/* =========================================================
   ASSO DES 2 EQUI-LIBRES — CSS personnalisé Yapla
   Palette : bleu nuit #003053

   Se colle EN ENTIER dans Admin Yapla > CSS personnalisé.
   Organisation du projet : voir README.md
   Méthode, pièges et décisions : voir CLAUDE.md

   SOMMAIRE
     TRANSVERSAL (toutes les pages)
       1   Header mobile — une seule ligne
       2   Pied de page — compactage
       3   Bandeau « Propulsé par Yapla »
       4   Pied de page — version mobile
       11  Emojis (jamais dans le HTML !)
       12  Palette — liens et accent ocre
     PAR PAGE
       5   Événements — cartes homogènes
       6   Accueil — bandeau d'aiguillage, accroche, image
       7   Accueil — les deux portes
       8   Accueil — accès rapide (4 tuiles)
       9   Accueil — « Où trouver quoi »
       10  Pages de texte long (Nous découvrir, et réutilisable)

   HISTORIQUE : une première tentative de typographie et de couleurs
   globales a été retirée le 17/08/2026 (rendu mauvais en prod).
   Depuis, tout passe par des classes `.d2e-*` propres au projet,
   jamais par une surcharge globale de `a`, `h1` ou `body`.
   ========================================================= */


/* =========================================================
   1. HEADER MOBILE — une seule ligne propre
      Logo à gauche · bouton Connexion + burger à droite

   Contexte : par défaut Yapla met .mod-header-container en
   `flex-direction: column-reverse`, donc le bouton Connexion se
   retrouve CENTRÉ AU-DESSUS du logo, et le burger (positionné en
   absolu via .navbar-header { top: -95px }) flotte par-dessus.
   D'où le rendu désordonné.

   /!\ La hauteur du header mobile est fixée à 60px, et
   .navbar-header doit garder EXACTEMENT la même valeur en négatif
   (top: -60px) pour que le burger reste centré. Si tu changes 60px,
   change les deux.
   ========================================================= */
@media (max-width: 767px) {
  /* --- Rendre visible le conteneur droit du header et le bouton connexion --- */
  .mod-header-part__right,
  .mod-header-part__right .mod-header-wrapper,
  .header-ext.header-ext-login,
  .header-ext-login .member-login {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
  }

  /* --- Header remis en une seule ligne horizontale, hauteur 60px --- */
  .mod-header-container {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 60px !important;
    min-height: 60px !important;
  }

  /* Bloc gauche : le <a> du logo porte un height:95px + padding-right:45px
     hérité du thème, qu'il faut neutraliser */
  .mod-header-part__left {
    flex: 0 1 auto !important;
    width: auto !important;
    height: auto !important;
  }
  .mod-header-part__left a {
    height: auto !important;
    padding: 0 !important;
    align-items: center !important;
  }
  .mod-header-logo {
    max-height: 42px !important;
    width: auto !important;
  }

  /* Bloc droit : collé à droite, avec 38px réservés pour le burger */
  .mod-header-part__right {
    flex: 0 0 auto !important;
    height: auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    padding-right: 38px !important;
  }
  .mod-header.mod-header-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .header-ext.header-ext-login {
    align-items: center !important;
    margin: 0 !important;
  }

  /* --- Bouton Connexion : pilule pleine (par défaut c'est du texte bleu nu) --- */
  .header-ext-login .member-login.btn {
    background: #003053 !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    padding: 9px 16px !important;
    white-space: nowrap !important;
    height: auto !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* --- Burger : recentré verticalement dans le header, couleur charte --- */
  .line-menu .navbar-header {
    top: -60px !important;   /* = hauteur du header ci-dessus */
    height: 60px !important;
  }
  .line-menu .navbar-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 9px 0 !important;
  }
  .navbar-toggle .icon-bar {
    background-color: #003053 !important;
  }
}


/* =========================================================
   2. FOOTER — compactage
   Avant : 90px de padding vertical => 289px de hauteur
   Après : ~40px de padding => ~148px
   ========================================================= */
.line-footer {
  padding: 40px 0 28px !important;
  /* séparation nette avec la section au-dessus (même fond #003053) */
  border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* Titres de colonnes : plus petits, en capitales, plus resserrés */
.footer-classic h3 {
  font-size: 14px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0 0 10px !important;
  opacity: 0.75;
}

/* Texte des colonnes */
.footer-classic p {
  font-size: 15px !important;
  line-height: 1.55 !important;
  margin: 0 0 2px !important;
}

.footer-classic a {
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.footer-classic a:hover {
  opacity: 0.7;
}

/* Icônes réseaux sociaux : alignées à gauche comme le reste, pas centrées */
.footer-social .social-link {
  margin: 0 16px 0 0 !important;
  font-size: 20px !important;
  display: inline-block;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.footer-social .social-link:hover {
  transform: translateY(-2px);
  opacity: 0.8;
}


/* =========================================================
   3. BANDEAU « Propulsé par Yapla »
   Mention conservée (obligatoire) mais fondue dans le footer
   Avant : bande blanche de 43px — Après : ~35px, même fond
   ========================================================= */
.poweredBy-wrapper,
.poweredBy-container {
  background: #003053 !important;
}

.poweredBy {
  padding: 3px 15px 8px !important;
  text-align: center !important;
}

.poweredBy-link {
  font-size: 10px !important;
  opacity: 0.35;
  transition: opacity 0.2s ease;
}
.poweredBy-link:hover {
  opacity: 0.7;
}

.poweredBy-link img {
  height: 11px !important;
}


/* =========================================================
   4. FOOTER — version mobile
   ========================================================= */
@media (max-width: 767px) {
  .line-footer {
    padding: 28px 0 20px !important;
  }
  /* Les 3 colonnes s'empilent : on les espace un peu et on centre */
  .footer-classic > div[class*="footer-"] {
    text-align: center !important;
    margin-bottom: 22px !important;
  }
  .footer-classic > div[class*="footer-"]:last-child {
    margin-bottom: 0 !important;
  }
  .footer-social .social-link {
    margin: 0 10px !important;
    font-size: 22px !important;
  }
  .footer-classic h3 {
    margin-bottom: 6px !important;
  }
}


/* =========================================================
   5. ÉVÉNEMENTS — cartes homogènes
   Page /fr/evenements (module « events-mosaic »)

   Problème d'origine : les affiches sont téléversées à des tailles
   différentes (500×900, 248×447…) et Yapla les affiche en taille
   brute. Résultat : une carte de 925px à côté d'une de 368px, une
   image à 248px de large à côté d'une à 345px.

   Choix assumé : `object-fit: contain`, JAMAIS `cover`. Les affiches
   sont des posters dont le texte touche les bords haut et bas
   (titre en haut, mention en bas) — un recadrage les décapiterait.
   On les inscrit donc dans un cadre au format fixe, avec un fond
   neutre qui joue le rôle de passe-partout.
   ========================================================= */

/* Cartes de hauteur égale, boutons alignés en bas de chaque ligne */
.events-mosaic .row {
  display: flex !important;
  flex-wrap: wrap !important;
}
.events-mosaic .row > [class*="col-"] {
  display: flex !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
  margin-bottom: 24px !important;
}
@media (min-width: 768px) {
  /* grille Yapla en 24 colonnes : col-sm-8 = un tiers */
  .events-mosaic .row > .col-sm-8 {
    flex: 0 0 33.3333% !important;
    max-width: 33.3333% !important;
  }
}
.events-mosaic .item {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  background: #fff;
  border: 1px solid rgba(0, 48, 83, 0.12);
  border-radius: 12px;
  padding: 14px;
  overflow: hidden;
}

/* Visuel : même format pour toutes les cartes, rien n'est coupé.
   Pour supprimer les bandes latérales (affiches en 9:16), remplacer
   `aspect-ratio: 3 / 4` par `aspect-ratio: 9 / 16` — cartes plus
   hautes, mais affiche pleine largeur.
   /!\ .e-thumbnail EST l'image (<img class="thumb e-thumbnail">),
   il n'y a pas d'<img> à l'intérieur : ne pas écrire
   `.e-thumbnail img`, ça ne cible rien. */
.events-mosaic .item > a {
  display: block;
  margin-bottom: 14px;
}
.events-mosaic .e-thumbnail {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 4;
  object-fit: contain !important;
  background: rgba(0, 48, 83, 0.06);
  border-radius: 8px;
  display: block;
}

/* Titre, date, filet */
.events-mosaic .item h3 {
  font-size: 19px !important;
  line-height: 1.25 !important;
  margin: 0 0 6px !important;
}
.events-mosaic .item .e-date {
  font-size: 14px !important;
  margin: 0 0 10px !important;
  opacity: 0.75;
}
.events-mosaic .item hr {
  margin: 10px 0 !important;
  border-color: rgba(0, 48, 83, 0.12) !important;
}

/* Boutons : les pilules du thème font 15px 30px, trop larges pour
   une carte d'un tiers de page. Compactés et collés en bas. */
.events-mosaic .item .actions {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.events-mosaic .item .actions .btn {
  padding: 10px 18px !important;
  font-size: 14px !important;
  flex: 1 1 auto !important;
  text-align: center !important;
}


/* =========================================================
   6. ACCUEIL — bandeau d'aiguillage + accroche

   /!\ CONTRAIREMENT à l'ancienne section 6 retirée, TOUT ici est
   porté par des classes `.d2e-*` qui n'existent QUE dans le HTML
   collé à la main dans l'éditeur. Aucune de ces règles ne peut
   toucher une autre page ni un élément du thème. C'est la façon
   sûre de styler : on ne surcharge rien, on ajoute.

   HTML correspondant : voir pages/1-accueil/bloc-1-accroche.html

   Volontairement : AUCUN changement de police. Tout hérite du
   thème. Voir la règle optionnelle commentée en fin de section.

   COULEURS AUTO-ADAPTATIVES : le bloc détecte la bande qui
   l'accueille. Sur fond clair il écrit en marine, sur une bande
   marine (.line-secondary / .line-footer) il bascule en blanc.
   Aucune action nécessaire selon l'endroit où on le colle.
   Contrastes vérifiés au navigateur : de 7,03 à 13,57 sur marine,
   de 4,53 à 12,04 sur fond clair (seuil AA = 4,5).
   ========================================================= */

/* --- Jetons de couleur : valeurs par défaut = bande à fond clair --- */
.d2e-bandeau,
.d2e-accroche {
  --d2e-titre: #003053;
  --d2e-texte: #3F5468;
  --d2e-discret: #5A7089;          /* assombri : #6C8095 ne passait qu'à 3,61 */
  --d2e-fond: rgba(0, 48, 83, 0.05);
}

/* --- Bascule automatique sur les bandes à fond marine --- */
.line-secondary .d2e-bandeau,
.line-secondary .d2e-accroche,
.line-footer .d2e-bandeau,
.line-footer .d2e-accroche {
  --d2e-titre: #FFFFFF;
  --d2e-texte: rgba(255, 255, 255, 0.88);
  --d2e-discret: rgba(255, 255, 255, 0.68);
  --d2e-fond: rgba(255, 255, 255, 0.08);
}

/* --- Bandeau d'aiguillage (les deux publics en une phrase chacun) --- */
.d2e-bandeau {
  margin: 0 0 30px !important;
  padding: 14px 20px !important;
  background: var(--d2e-fond) !important;
  border-left: 3px solid #C8A97E;   /* le kraft passe sur les deux fonds */
  border-radius: 0 6px 6px 0;
}
.d2e-bandeau p {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--d2e-texte) !important;
}
.d2e-bandeau p + p {
  margin-top: 4px !important;
}
.d2e-bandeau strong {
  color: var(--d2e-titre) !important;
}

/* --- Accroche : titre + paragraphe --- */
/* /!\ LE `h1` EST VOLONTAIRE. Ajoute en prod le 07/10/2026 pour le
   referencement : l'accueil doit porter un <h1>, et il partage la
   regle de `h2` pour que le rendu ne bouge pas (38px / 27px, verifie).
   Cette ligne avait ete oubliee dans ce fichier et n'a ete retrouvee
   que le 15/10/2026, en diffant la prod avant de republier. */
.d2e-accroche h1,
.d2e-accroche h2 {
  font-size: 38px !important;
  line-height: 1.15 !important;
  margin: 0 0 14px !important;
  color: var(--d2e-titre) !important;
}
.d2e-accroche > p {
  font-size: 19px !important;
  line-height: 1.6 !important;
  margin: 0 0 26px !important;
  color: var(--d2e-texte) !important;
  max-width: 52ch;   /* borne la longueur de ligne, confort de lecture */
}

/* --- Les trois chiffres clés --- */
.d2e-chiffres {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px 34px !important;
}
.d2e-chiffres > li {
  margin: 0 !important;
  padding: 2px 0 2px 14px !important;
  border-left: 2px solid #C8A97E;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.d2e-chiffres strong {
  font-size: 20px !important;
  line-height: 1.15 !important;
  color: var(--d2e-titre) !important;
}
.d2e-chiffres span {
  font-size: 14px !important;
  line-height: 1.3 !important;
  color: var(--d2e-discret) !important;
}

@media (max-width: 767px) {
  .d2e-accroche h1, .d2e-accroche h2 { font-size: 27px !important; }
  .d2e-accroche > p {
    font-size: 17px !important;
    margin-bottom: 22px !important;
  }
  .d2e-bandeau {
    padding: 12px 16px !important;
    margin-bottom: 24px !important;
  }
  .d2e-bandeau p { font-size: 14px !important; }
  /* Grille 2 colonnes : sinon les 3 chiffres tombent en 2 + 1 avec
     le dernier étiré sur toute la largeur, ce qui est déséquilibré */
  .d2e-chiffres {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 18px !important;
  }
}

/* --- Image de la bande d'accueil ---
   Le recadrage se fait désormais dans le FICHIER, plus en CSS :
   téléverser `images/accueil/cavaliers-4x3.jpg` (1200×900) dans le
   bloc image de Yapla, à la place du carré d'origine.

   Pourquoi : le carré 1440×1440 imposait sa hauteur à la bande et
   écrasait la colonne texte. Le recadrage 4/3 retire 198px de ciel
   en haut et 162px d'herbe en bas, sans toucher à la file de
   cavaliers ni au poney de premier plan.

   Le CSS ne fait donc plus que deux choses : empêcher toute
   déformation, et arrondir les coins comme les cartes.

   /!\ NE PAS remettre d'`aspect-ratio` ici : le fichier a déjà le
   bon format, un rapport en CSS recadrerait une seconde fois.
   Et pas de `display:flex` sur la zone non plus — l'image, devenue
   élément flex, se ferait étirer en hauteur.

   Portée au maximum : la zone image d'une bande marine de la page
   d'accueil uniquement (`body.pageid-325339`). */
body.pageid-325339 .line-secondary .zone-image img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 8px;
  display: block;
}


/* =========================================================
   7. ACCUEIL — les deux portes

   HTML correspondant : pages/1-accueil/bloc-2-deux-portes.html
   À coller dans UNE SEULE zone HTML pleine largeur (col-sm-24).
   La grille à deux colonnes est faite ici, pas par Yapla : ça évite
   de dépendre du découpage de zones et ça marche partout.

   Boutons : classes `.d2e-btn` maison, PAS le `.btn` du thème.
   Raison technique : le `.btn` de Yapla s'est révélé impossible à
   surcharger (même un style inline !important reste sans effet,
   cf. section « Pièges » de CLAUDE.md). En passant par nos propres
   classes on contourne complètement le problème.

   Couleurs auto-adaptatives, même principe que la section 6.
   Contrastes vérifiés sur bande marine :
     bouton blanc        13,57 (fond) / 13,57 (texte)
     bouton kraft         6,09 (fond) /  6,84 (texte)
     bouton contour      bordure et texte blancs, 13,57
   Le vert #195E37 a été écarté : seulement 1,74 contre le marine,
   il aurait été invisible comme forme.
   ========================================================= */

.d2e-portes {
  /* jetons par défaut : bande à fond clair */
  --p-titre: #003053;
  --p-texte: #3F5468;
  --p-sur: #5A7089;
  --p-fond: #fff;
  --p-bord: rgba(0, 48, 83, 0.14);
  --b-fond: #003053;
  --b-texte: #fff;
  --b-ligne: #003053;

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
  align-items: stretch !important;
}

/* Bascule sur les bandes à fond marine */
.line-secondary .d2e-portes,
.line-footer .d2e-portes {
  --p-titre: #fff;
  --p-texte: rgba(255, 255, 255, 0.88);
  --p-sur: rgba(255, 255, 255, 0.62);
  --p-fond: rgba(255, 255, 255, 0.07);
  --p-bord: rgba(255, 255, 255, 0.18);
  --b-fond: #fff;
  --b-texte: #003053;
  --b-ligne: #fff;
}

.d2e-porte {
  background: var(--p-fond);
  border: 1px solid var(--p-bord);
  border-radius: 8px;
  padding: 28px 26px;
  display: flex !important;
  flex-direction: column !important;
}
/* La porte adhérent se signale par le filet kraft */
.d2e-porte--adherent {
  border-left: 3px solid #C8A97E;
}

.d2e-porte__sur {
  margin: 0 0 8px !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--p-sur) !important;
}
.d2e-porte h3 {
  margin: 0 0 12px !important;
  font-size: 25px !important;
  line-height: 1.2 !important;
  color: var(--p-titre) !important;
  /* le thème met les h3 en petites capitales : on annule ici */
  text-transform: none !important;
  letter-spacing: normal !important;
}
.d2e-porte > p:not(.d2e-porte__sur):not(.d2e-actions) {
  margin: 0 0 22px !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--p-texte) !important;
}

/* `margin: auto 0 0` pousse les boutons en bas : les deux cartes ont
   des textes de longueur différente, mais les boutons restent alignés */
.d2e-actions {
  margin: auto 0 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

/* Jetons des boutons déclarés au niveau de la BANDE, pas seulement
   de `.d2e-portes` : sans ça, un bouton posé dans une page de texte
   n'aurait aucun fond (variable non définie = déclaration invalide).
   Les valeurs de repli dans var(...) sont la deuxième ceinture. */
.line-secondary,
.line-footer {
  --b-fond: #fff;
  --b-texte: #003053;
  --b-ligne: #fff;
}

.d2e-btn {
  display: inline-block !important;
  padding: 13px 24px !important;
  border-radius: 300px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  border: 1.5px solid transparent !important;
  background: var(--b-fond, #003053) !important;
  color: var(--b-texte, #fff) !important;
  transition: opacity 0.2s ease;
}
.d2e-btn:hover {
  opacity: 0.85;
  text-decoration: none !important;
}
.d2e-btn--ligne {
  background: transparent !important;
  color: var(--b-ligne, #003053) !important;
  border-color: var(--b-ligne, #003053) !important;
}
.d2e-btn--kraft {
  background: #C8A97E !important;
  color: #2E2415 !important;
  border-color: #C8A97E !important;
}

@media (max-width: 767px) {
  .d2e-portes {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .d2e-porte { padding: 22px 18px; }
  .d2e-porte h3 { font-size: 22px !important; }
  .d2e-porte > p:not(.d2e-porte__sur):not(.d2e-actions) {
    font-size: 16px !important;
    margin-bottom: 18px !important;
  }
  /* Boutons empilés et pleine largeur : cible tactile de 48px */
  .d2e-actions { flex-direction: column !important; }
  .d2e-btn {
    text-align: center !important;
    padding: 14px 20px !important;
  }
}


/* =========================================================
   8. ACCUEIL — accès rapide (4 tuiles)

   HTML correspondant : pages/1-accueil/bloc-3-acces-rapide.html
   À coller dans UNE zone HTML pleine largeur.

   /!\ NON VÉRIFIÉ AU NAVIGATEUR (connecteur déconnecté).
   Reprend toutefois le patron exact de la section 7, lui mesuré en
   375 / 1280 px : mêmes jetons de couleur, même grille, mêmes
   cartes. Le risque est faible mais il est réel — à remesurer.

   Le `ul` est scopé par `.d2e-rapide`, jamais par `.content ul` :
   aucune autre liste du site ne peut être touchée.
   ========================================================= */

.d2e-rapide {
  /* jetons par défaut : bande à fond clair */
  --r-titre: #003053;
  --r-texte: #5A7089;
  --r-sur: #5A7089;
  --r-fond: #fff;
  --r-bord: rgba(0, 48, 83, 0.14);
  --r-survol: rgba(0, 48, 83, 0.30);
}
/* Bascule sur les bandes à fond marine */
.line-secondary .d2e-rapide,
.line-footer .d2e-rapide {
  --r-titre: #fff;
  --r-texte: rgba(255, 255, 255, 0.72);
  --r-sur: rgba(255, 255, 255, 0.62);
  --r-fond: rgba(255, 255, 255, 0.07);
  --r-bord: rgba(255, 255, 255, 0.18);
  --r-survol: rgba(255, 255, 255, 0.45);
}

.d2e-rapide__sur {
  margin: 0 0 16px !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--r-sur) !important;
}

.d2e-rapide ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 14px !important;
  /* auto-fit : 4 colonnes sur bureau, 2 sur tablette, 1 sur mobile,
     sans avoir à écrire les paliers */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

.d2e-rapide ul > li {
  margin: 0 !important;
  padding: 20px 18px !important;
  background: var(--r-fond);
  border: 1px solid var(--r-bord);
  border-radius: 8px;
  position: relative;          /* ancre la zone cliquable ci-dessous */
  transition: border-color 0.2s ease;
}
.d2e-rapide ul > li:hover {
  border-color: var(--r-survol);
}

.d2e-rapide ul > li > a {
  display: block;
  margin-bottom: 6px;
  font-size: 17px;
  line-height: 1.25;
  color: var(--r-titre) !important;
  text-decoration: none !important;
}
/* Toute la tuile devient cliquable, pas seulement le titre */
.d2e-rapide ul > li > a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
}

.d2e-rapide ul > li > span {
  display: block;
  font-size: 15px;
  line-height: 1.45;
  color: var(--r-texte);
}

@media (max-width: 767px) {
  .d2e-rapide ul {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .d2e-rapide ul > li { padding: 16px 16px !important; }
  .d2e-rapide ul > li > a { font-size: 16px; }
  .d2e-rapide ul > li > span { font-size: 14px; }
}


/* --- RÉSERVER L'ACCÈS RAPIDE AUX ADHÉRENTS ---
   PAS ACTIVÉ : il manque le point d'accroche. Il faut savoir ce que
   devient l'en-tête une fois connecté (le bouton `.member-login`
   disparaît-il ? une classe change-t-elle sur le <body> ?).

   Écrit en « échec fermé » : le bloc est caché par défaut et ne se
   révèle que si la connexion est détectée. Si la détection rate,
   rien ne fuite — l'inverse serait le mauvais sens.

   /!\ RAPPEL : ce masquage est COSMÉTIQUE. Le contenu reste dans le
   source HTML de la page, lisible par un clic droit « Code source ».
   Les liens WhatsApp et Google Drive resteraient donc accessibles à
   qui regarde. Ne jamais compter là-dessus pour du confidentiel.

.d2e-rapide { display: none; }
body:not(:has(.header-ext-login .member-login)) .d2e-rapide { display: block; }
*/


/* =========================================================
   9. ACCUEIL — « Où trouver quoi »

   HTML correspondant : pages/1-accueil/bloc-4-ou-trouver-quoi.html
   À coller dans UNE zone HTML pleine largeur.

   /!\ NON VÉRIFIÉ AU NAVIGATEUR (connecteur déconnecté).
   Reprend les jetons et le patron des sections 7 et 8.

   Construit en `div` plutôt qu'en `table` : sur mobile un tableau
   demande de repasser tr/td en `display:block`, ce qui multiplie
   les cas tordus. Ici une grille CSS suffit et se retourne
   proprement.

   Aucun nombre n'est écrit (ni dans le HTML ni ici) : la liste peut
   s'allonger sans rien mettre à jour ailleurs.
   ========================================================= */

.d2e-ou {
  /* jetons par défaut : bande à fond clair */
  --o-titre: #003053;
  --o-texte: #1B2A33;
  --o-sur: #5A7089;
  --o-filet: rgba(0, 48, 83, 0.14);
  --o-filetFort: #003053;
  --o-zebre: rgba(0, 48, 83, 0.03);

  display: grid !important;
  grid-template-columns: 300px 1fr !important;
  gap: 56px !important;
  align-items: start !important;
}
/* Bascule sur les bandes à fond marine */
.line-secondary .d2e-ou,
.line-footer .d2e-ou {
  --o-titre: #fff;
  --o-texte: rgba(255, 255, 255, 0.88);
  --o-sur: rgba(255, 255, 255, 0.62);
  --o-filet: rgba(255, 255, 255, 0.16);
  --o-filetFort: rgba(255, 255, 255, 0.55);
  --o-zebre: rgba(255, 255, 255, 0.05);
}

.d2e-ou__intro h3 {
  margin: 0 0 10px !important;
  font-size: 28px !important;
  line-height: 1.2 !important;
  color: var(--o-titre) !important;
  /* le thème met les h3 en petites capitales : on annule ici */
  text-transform: none !important;
  letter-spacing: normal !important;
}
.d2e-ou__intro p {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: var(--o-sur) !important;
}

/* Filet fort en haut du tableau, comme une ligne d'en-tête */
.d2e-ou__table {
  border-top: 1.5px solid var(--o-filetFort);
}

.d2e-ou__ligne {
  display: grid !important;
  grid-template-columns: 34% 1fr !important;
  gap: 0 18px !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--o-filet);
}
.d2e-ou__ligne:nth-child(odd) {
  background: var(--o-zebre);
}

.d2e-ou__ligne > strong {
  font-size: 16px;
  line-height: 1.5;
  color: var(--o-titre);
  padding-left: 12px;
}
.d2e-ou__ligne > strong a {
  color: var(--o-titre) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--o-filet);
}
.d2e-ou__ligne > strong a:hover {
  border-bottom-color: var(--o-titre);
}

.d2e-ou__ligne > span {
  font-size: 16px;
  line-height: 1.5;
  color: var(--o-texte);
  padding-right: 12px;
}

/* L'info critique surlignée en kraft. Scopé à .d2e-ou : ne touche
   aucun autre <em> du site. */
.d2e-ou__ligne em {
  font-style: normal !important;
  color: var(--o-titre) !important;
  background: rgba(200, 169, 126, 0.32);
  box-shadow: 0 0 0 3px rgba(200, 169, 126, 0.32);
}

@media (max-width: 767px) {
  /* Une seule colonne, et l'intro passe au-dessus */
  .d2e-ou {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  .d2e-ou__intro h3 { font-size: 24px !important; }

  /* Chaque ligne s'empile : nom de l'outil en petites capitales
     au-dessus de sa description */
  .d2e-ou__ligne {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 14px 0 !important;
  }
  .d2e-ou__ligne > strong {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-left: 0;
  }
  .d2e-ou__ligne > span {
    font-size: 16px;
    padding-right: 0;
  }
  /* Le zébrage passe mal en empilé : on l'enlève, les filets suffisent */
  .d2e-ou__ligne:nth-child(odd) { background: none; }
}


/* =========================================================
   10. PAGES DE TEXTE LONG — composant réutilisable

   HTML : pages/2-nous-decouvrir/page-complete.html (page /fr/nous-d-couvrir)
   Réutilisable tel quel pour Actualités, Contacts, ou toute autre
   page de texte suivi : il suffit d'envelopper le contenu dans
   <div class="d2e-texte">.

   /!\ NON VÉRIFIÉ AU NAVIGATEUR (connecteur déconnecté).

   Le réglage qui compte pour du texte long est la LARGEUR DE LIGNE.
   Au-delà de ~75 caractères l'œil perd la ligne en revenant à la
   gauche. On borne donc à 68ch et on centre la colonne, au lieu de
   laisser le texte courir sur 1150px de large.
   ========================================================= */

.d2e-texte {
  /* jetons par défaut : bande à fond clair */
  --t-titre: #003053;
  --t-texte: #1B2A33;
  --t-chapo: #3F5468;
  --t-lien: #00558F;
  --t-filet: rgba(0, 48, 83, 0.14);

  /* Largeur de lecture ET taille du corps : les deux vont ensemble.
     Historique : 68ch puis 78ch donnaient une colonne étroite au
     milieu d'un grand écran. En cause, l'unité `ch` — elle se
     calcule sur la largeur du « 0 » de la police, or Times New
     Roman est très étroite : 78ch ne faisait que ~624px. Et comme
     les mots français sont longs, ça tombait à 9-11 mots par ligne.

     Corrigé en deux temps, parce que juste élargir aurait donné des
     lignes de 110 caractères, illisibles :
       - largeur en PIXELS, prévisible quelle que soit la police ;
       - corps du texte agrandi de 17 à 19px sur grand écran.
     Le nombre de caractères par ligne reste dans la zone
     confortable (~90), mais le bloc occupe bien plus de page et se
     lit plus gros. C'est ça qui enlève l'effet « colonne de
     téléphone ».

     Pour ajuster : ces deux variables, rien d'autre. */
  --t-mesure: 780px;
  --t-corps: 19px;

  max-width: var(--t-mesure);
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Bascule sur les bandes à fond marine */
.line-secondary .d2e-texte,
.line-footer .d2e-texte {
  --t-titre: #fff;
  --t-texte: rgba(255, 255, 255, 0.90);
  --t-chapo: rgba(255, 255, 255, 0.78);
  --t-lien: #fff;
  --t-filet: rgba(255, 255, 255, 0.22);
}

.d2e-texte h1 {
  margin: 0 0 16px !important;
  font-size: 40px !important;
  line-height: 1.12 !important;
  color: var(--t-titre) !important;
}

/* Chapô : le sous-titre juste sous le titre principal */
.d2e-texte__chapo {
  margin: 0 0 32px !important;
  font-size: 21px !important;
  line-height: 1.5 !important;
  color: var(--t-chapo) !important;
}

/* Marge haute généreuse : c'est ce qui découpe visiblement les
   chapitres dans un texte long */
.d2e-texte h2 {
  margin: 48px 0 14px !important;
  font-size: 27px !important;
  line-height: 1.2 !important;
  color: var(--t-titre) !important;
  padding-top: 22px;
  border-top: 1px solid var(--t-filet);
}

.d2e-texte h3 {
  margin: 32px 0 10px !important;
  font-size: 19px !important;
  line-height: 1.3 !important;
  color: var(--t-titre) !important;
  /* le thème met les h3 en petites capitales : on annule ici */
  text-transform: none !important;
  letter-spacing: normal !important;
}

.d2e-texte p {
  margin: 0 0 18px !important;
  font-size: var(--t-corps) !important;
  line-height: 1.7 !important;
  color: var(--t-texte) !important;
}
.d2e-texte p:last-child { margin-bottom: 0 !important; }

/* /!\ Le `:not(.d2e-btn)` est indispensable.
   `.d2e-texte a` a une spécificité de 0-1-1, `.d2e-btn` de 0-1-0 :
   les deux étant en !important, la règle des liens gagnait et les
   boutons posés dans une page de texte héritaient du bleu clair des
   liens, plus un soulignement. */
.d2e-texte a:not(.d2e-btn) {
  color: var(--t-lien) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--t-filet);
}
.d2e-texte a:not(.d2e-btn):hover {
  border-bottom-color: var(--t-lien);
}
/* Deuxième ceinture : aucun filet sous un bouton, où qu'il soit */
.d2e-texte a.d2e-btn {
  border-bottom: none !important;
  text-decoration: none !important;
}

.d2e-texte ul,
.d2e-texte ol {
  margin: 0 0 18px !important;
  padding-left: 22px !important;
}
.d2e-texte li {
  margin: 0 0 6px !important;
  font-size: var(--t-corps) !important;
  line-height: 1.7 !important;
  color: var(--t-texte) !important;
}

/* --- Encadré d'information (blockquote) --- */
.d2e-texte blockquote {
  margin: 26px 0 !important;
  padding: 20px 22px !important;
  background: var(--t-encadre, rgba(0, 48, 83, 0.05));
  border-left: 3px solid #976519 !important;
  border-radius: 0 6px 6px 0;
}
.line-secondary .d2e-texte blockquote,
.line-footer .d2e-texte blockquote {
  background: rgba(255, 255, 255, 0.08);
  border-left-color: #C8A97E !important;
}
.d2e-texte blockquote p {
  margin: 0 0 8px !important;
  font-size: 17px !important;
}
.d2e-texte blockquote p:last-child { margin-bottom: 0 !important; }

/* --- Prix mis en avant --- */
.d2e-prix {
  display: block !important;
  margin: 0 0 18px !important;
  font-size: 26px !important;
  line-height: 1.2 !important;
  color: var(--t-titre) !important;
}
.d2e-prix small {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  color: var(--t-chapo);
}

/* --- Tableau de tarifs (2 colonnes courtes : lisible tel quel
       même sur mobile, pas besoin de le convertir en cartes) --- */
.d2e-tarifs {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 0 22px !important;
}
.d2e-tarifs th {
  text-align: left;
  padding: 0 0 10px !important;
  font-size: 12px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-chapo) !important;
  border-bottom: 1.5px solid var(--t-titre);
}
.d2e-tarifs th:last-child { text-align: right; }
.d2e-tarifs td {
  padding: 13px 0 !important;
  font-size: var(--t-corps) !important;
  color: var(--t-texte) !important;
  border-bottom: 1px solid var(--t-filet);
}
.d2e-tarifs td:last-child {
  text-align: right;
  color: var(--t-titre) !important;
  white-space: nowrap;
}

/* Image intercalée dans le texte (voir le modèle en fin de HTML) */
.d2e-texte__image {
  margin: 32px 0 !important;
}
.d2e-texte__image img {
  width: 100% !important;
  height: auto !important;
  border-radius: 8px;
  display: block;
}
.d2e-texte__image figcaption {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--t-chapo);
}

@media (max-width: 767px) {
  .d2e-texte {
    /* sur mobile la largeur est celle de l'écran, et 16px suffit */
    --t-mesure: 100%;
    --t-corps: 16px;
  }
  .d2e-texte h1 { font-size: 29px !important; }
  .d2e-texte__chapo {
    font-size: 18px !important;
    margin-bottom: 26px !important;
  }
  .d2e-texte h2 {
    font-size: 23px !important;
    margin-top: 36px !important;
    padding-top: 18px;
  }
  .d2e-prix { font-size: 22px !important; }
  .d2e-texte blockquote { padding: 16px 18px !important; }
  .d2e-texte blockquote p { font-size: 16px !important; }
}


/* =========================================================
   11. EMOJIS — déclarés ici, jamais dans le HTML

   POURQUOI : l'éditeur Yapla EFFACE LE TEXTE dès qu'il rencontre un
   caractère emoji collé dans le HTML (ce sont des caractères sur
   4 octets, son filtre les rejette et tronque le contenu).

   La parade : l'emoji n'existe que dans ce fichier, écrit en
   séquence d'échappement CSS — donc en ASCII pur, indigeste pour
   personne. Le HTML ne porte qu'une classe.

   USAGE
     sur un titre :   <h2 class="d2e-emo d2e-emo--coeur">Mon titre</h2>
     dans du texte :  <span class="d2e-emo d2e-emo--fete"></span>

   Pour retirer un emoji : enlever ses deux classes. Pour en ajouter
   un nouveau : chercher son code sur emojipedia (« U+1F40E »), et
   écrire `\1F40E` ici.

   `display: inline-block` sur le pseudo-élément évite que l'emoji
   fasse grandir la hauteur de ligne du titre.
   ========================================================= */

.d2e-emo::after {
  margin-left: 0.35em;
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  /* couleur neutralisée : les emojis ont leurs propres couleurs,
     ils ne doivent pas hériter du bleu d'un titre ou d'un lien */
  color: initial;
}

.d2e-emo--cheval::after  { content: "\1F40E"; }        /* cheval */
.d2e-emo--poney::after   { content: "\1F434"; }        /* tête de cheval */
.d2e-emo--coeur::after   { content: "\2764\FE0F"; }    /* coeur rouge */
.d2e-emo--feuille::after { content: "\1F33F"; }        /* feuillage */
.d2e-emo--mains::after   { content: "\1F91D"; }        /* poignée de main */
.d2e-emo--fete::after    { content: "\1F389"; }        /* cotillon */

/* Page Activités & Tarifs */
.d2e-emo--cavalier::after  { content: "\1F3C7"; }      /* jockey */
.d2e-emo--maison::after    { content: "\1F3E1"; }      /* maison */
.d2e-emo--outils::after    { content: "\1F528"; }      /* marteau */
.d2e-emo--etoile::after    { content: "\1F31F"; }      /* etoile brillante */
.d2e-emo--arbre::after     { content: "\1F333"; }      /* arbre */
.d2e-emo--gateau::after    { content: "\1F382"; }      /* gateau */
.d2e-emo--chapiteau::after { content: "\1F3AA"; }      /* chapiteau */
.d2e-emo--groupe::after    { content: "\1F465"; }      /* deux silhouettes */
.d2e-emo--telephone::after { content: "\1F4DE"; }      /* telephone */

/* Page Contacts */
.d2e-emo--enveloppe::after { content: "\2709\FE0F"; }  /* enveloppe */
.d2e-emo--mobile::after    { content: "\1F4F1"; }      /* telephone mobile */

/* Divers, prêts à l'emploi */
.d2e-emo--calendrier::after { content: "\1F5D3\FE0F"; }
.d2e-emo--message::after    { content: "\1F4AC"; }
.d2e-emo--document::after   { content: "\1F4C4"; }
.d2e-emo--info::after       { content: "\2139\FE0F"; }
.d2e-emo--trophee::after    { content: "\1F3C6"; }

/* Page Actualités — le calendrier de la saison (section 20) */
.d2e-emo--dates::after     { content: "\1F4C5"; }      /* calendrier */
.d2e-emo--etincelles::after{ content: "\2728"; }       /* etincelles */
.d2e-emo--automne::after   { content: "\1F342"; }      /* feuille morte */
.d2e-emo--printemps::after { content: "\1F338"; }      /* fleur de cerisier */
.d2e-emo--ete::after       { content: "\2600\FE0F"; }  /* soleil */
.d2e-emo--bravo::after     { content: "\1F64C"; }      /* mains levees */

/* En cours de texte, le span est vide : pas de marge à gauche
   quand il suit déjà une espace */
span.d2e-emo::after {
  margin-left: 0;
}


/* =========================================================
   12. PALETTE — liens plus vifs, accent ocre au lieu du vert

   /!\ NON VÉRIFIÉ AU NAVIGATEUR (connecteur déconnecté), mais tous
   les contrastes ci-dessous sont CALCULÉS, pas estimés.

   Aucune règle globale sur `a` : cette section ne touche que nos
   propres composants et les boutons des cartes d'événements. C'est
   précisément la règle globale sur `a` qui avait rendu les liens du
   pied de page illisibles la première fois.

   LIENS — #00558F donnait 7,79 sur blanc : très lisible mais très
   foncé, donc terne. #0E6BA8 donne 5,70, plus vif, marge encore
   confortable au-dessus du seuil de 4,5.

   ACCENT — le vert du thème #195E37 ne donnait que 1,74 contre le
   marine : invisible comme forme. Remplacé par de l'ocre. Mais un
   ocre foncé disparaît sur le marine (2,37) et le kraft clair
   disparaît sur le blanc (2,23) : on utilise donc DEUX TONS de la
   même famille, permutés selon le fond de bande.
     fond clair   -> #976519, texte blanc dessus     (5,01)
     fond marine  -> #C8A97E, texte marine dessus    (6,09)
   ========================================================= */

/* --- Liens du texte long : bleu plus vif sur fond clair --- */
.d2e-texte {
  --t-lien: #0E6BA8;
}
/* sur bande marine le lien reste blanc : inchangé, déjà lisible */

/* --- Bouton d'accent : ocre foncé, texte blanc, PARTOUT ---
   Choix simplifié à la demande de l'utilisateur : le texte du
   bouton d'accent est blanc sur toutes les bandes.

   Auparavant l'ocre existait en deux tons (foncé sur fond clair,
   kraft clair sur fond marine), ce qui imposait du texte sombre sur
   le kraft — le blanc n'y tient pas (2,23 de contraste).
   Un seul ton ocre foncé + texte blanc = 5,01, lisible partout.

   Contrepartie : sur une bande marine, l'ocre foncé ne se détache
   que faiblement du fond (2,37). D'où la bordure claire ajoutée
   ci-dessous, qui redessine la pilule. */
.d2e-btn--kraft {
  background: #976519 !important;
  color: #fff !important;
  border-color: #976519 !important;
}
.line-secondary .d2e-btn--kraft,
.line-footer .d2e-btn--kraft {
  border-color: rgba(255, 255, 255, 0.45) !important;
}

/* --- Filets kraft : le ton clair ne tient pas sur fond blanc --- */
.d2e-porte--adherent { border-left-color: #976519; }
.line-secondary .d2e-porte--adherent,
.line-footer .d2e-porte--adherent { border-left-color: #C8A97E; }

.d2e-bandeau { border-left-color: #976519; }
.line-secondary .d2e-bandeau,
.line-footer .d2e-bandeau { border-left-color: #C8A97E; }

/* Cercles numérotés des étapes, si la section « Comment ça marche »
   revient un jour */
.d2e-etapes li::before { border-color: #976519; }
.line-secondary .d2e-etapes li::before,
.line-footer .d2e-etapes li::before { border-color: #C8A97E; }

/* --- Cartes d'événements : « M'inscrire » passe du vert à l'ocre ---
   Les cartes sont sur fond blanc, donc c'est le ton foncé.
   Portée aux seules cartes du module : le `.btn-primary` du thème
   n'est pas touché ailleurs. */
.events-mosaic .item .actions .btn-primary {
  background: #976519 !important;
  border-color: #976519 !important;
  color: #fff !important;
}
.events-mosaic .item .actions .btn-primary:hover {
  background: #7E5314 !important;
  border-color: #7E5314 !important;
}


/* --- OPTIONNEL : la seule ligne qui touche à la police. ---
   Portée aux classes .d2e-* uniquement, donc sans risque pour le
   reste du site. Décommenter pour essayer de sortir du Times New
   Roman sur ce seul bloc, et juger à l'œil.
   Muli est la seule police web réellement chargée par le thème
   (graisse 400 uniquement — ne pas compter sur le gras).

.d2e-bandeau,
.d2e-accroche {
  font-family: "Muli", Arial, sans-serif !important;
}
*/


/* =========================================================
   13. AFFICHAGE SELON L'ETAT DE CONNEXION

   HTML : pages/7-espace-membre/bloc-1-presentation.html

   Deux blocs sont collés dans la page, un seul s'affiche :
     .d2e-si-deconnecte  -> visiteur non connecté
     .d2e-si-connecte    -> adhérent connecté

   MECANISME : l'en-tête contient le bouton `.member-login`
   uniquement quand personne n'est connecté. On s'appuie donc sur sa
   présence via `:has()`.

   /!\ ECRIT EN « ECHEC FERME » : par défaut on montre la version
   « non connecté », qui ne contient rien de sensible. La version
   connectée n'apparaît que si l'absence du bouton est effectivement
   détectée. Si la détection rate, rien ne fuite.

   /!\ CE MASQUAGE EST COSMETIQUE. Les deux textes restent présents
   dans le code source de la page, lisibles par un clic droit
   « Code source ». Ne jamais s'en servir pour du confidentiel.

   /!\ A VERIFIER APRES COLLAGE : connecte-toi et regarde si le
   bouton « Connexion » disparaît bien de l'en-tête. S'il est
   seulement remplacé par un autre libellé, dis-le-moi : il faudra
   changer le sélecteur d'accroche.
   ========================================================= */

/* par défaut : version non connectée visible, version connectée cachée */
.d2e-si-connecte { display: none; }
.d2e-si-deconnecte { display: block; }

/* connecté = le bouton Connexion n'est plus dans l'en-tête */
body:not(:has(.header-ext-login .member-login)) .d2e-si-connecte { display: block; }
body:not(:has(.header-ext-login .member-login)) .d2e-si-deconnecte { display: none; }

/* ---------------------------------------------------------------
   ACCROCHE PLUS FIABLE, relevee le 19/08/2026 sur une session
   reellement connectee : Yapla pose une classe sur le <body>.

     body.pageid-325336 member--isConnected template-00050 ...

   C'est plus solide que le `:has()` ci-dessus (qui depend de la
   presence d'un bouton, donc du theme) et ca marche aussi sur les
   navigateurs sans `:has()`. Les deux accroches cohabitent : la
   premiere qui repond suffit, et le defaut reste « non connecte ».
   --------------------------------------------------------------- */
body.member--isConnected .d2e-si-connecte { display: block; }
body.member--isConnected .d2e-si-deconnecte { display: none; }

/* Corollaire utile : un bloc visible UNIQUEMENT par les visiteurs
   non connectes, par exemple l'avis « pensez a vous connecter pour
   vos tarifs membres » en tete de la page Evenements.
   Le defaut est « visible » : si la detection rate, l'avis reste
   affiche — un avis vu en trop ne coute rien, un tarif rate si. */
.d2e-si-visiteur { display: block; }
body.member--isConnected .d2e-si-visiteur { display: none; }


/* =========================================================
   14. CORRECTIFS MESURES SUR LE SITE (18/08/2026)

   Trois problemes constates par l'utilisateur, diagnostiques au
   navigateur sur /fr/membres.
   ========================================================= */

/* --- 14.1  BORDURE DU BAS DES BOUTONS, ABSENTE ---------------
   Constat : `border-width` calcule valait
   « 0.909px 0.909px 0px » sur les boutons `.d2e-btn`, donc
   la bordure du BAS n'etait pas dessinee du tout. D'ou l'impression
   que « le bout est un peu mange ».

   Cause : la regle `.d2e-texte a` de la section 10 (specificite
   0-1-1) pose un `border-bottom` que le thème remet ensuite a zero,
   et `.d2e-btn` (0-1-0) ne pouvait pas reprendre la main.

   Correctif : on remonte la specificite en qualifiant la balise.
   Verifie : bordure uniforme sur les quatre cotes apres application. */
.d2e-texte a.d2e-btn,
.d2e-actions a.d2e-btn {
  border-width: 1.5px !important;
  border-style: solid !important;
}

/* --- 14.2  LARGEUR DE L'ESPACE MEMBRE ------------------------
   La mesure de lecture de 780px est bonne pour du texte long
   (Nous decouvrir), mais sur l'Espace membre le contenu est fait de
   listes, de tuiles et de boutons : 780px dans un conteneur de
   1200px laissait 420px de vide.
   Mesure apres correctif : 1170px. */
body.pageid-325336 .d2e-texte {
  --t-mesure: 100%;
}

/* --- 14.3  CARTES D'EVENEMENTS -------------------------------
   /!\ NON VERIFIE : la page Evenements a disparu du site entre-temps,
   impossible de mesurer.

   `overflow: hidden` combine a `border-radius: 12px` sur `.item`
   rognait le bas des boutons pleine largeur au niveau des coins
   arrondis. Rien ne debordait de la carte, donc le masquage etait
   inutile : on le retire. A remesurer si la page revient. */
.events-mosaic .item {
  overflow: visible !important;
}


/* --- 14.4  TUILES DECALEES DANS UNE PAGE DE TEXTE ------------
   Constat (mesure a 375px, page Espace membre) : les tuiles
   `.d2e-rapide` posees a l'interieur d'un `.d2e-texte` partaient a
   x=37 avec 323px de large, alors que les paragraphes voisins
   partaient a x=15 avec 345px. Decalage de 22px vers la droite,
   invisible sur grand ecran, franchement visible sur telephone.

   Cause : ENCORE le piege de specificite.
     .d2e-rapide ul  (section 8)  = 0-1-1
     .d2e-texte ul   (section 10) = 0-1-1  <- egalite
   A specificite egale, c'est l'ordre du fichier qui tranche, et la
   section 10 vient apres : son `padding-left: 22px` ecrasait le
   `padding: 0` des tuiles.

   Correctif : on qualifie le contexte pour passer a 0-2-1.
   Verifie : tuile a x=15, 345px de large, alignee au paragraphe. */
.d2e-texte .d2e-rapide ul {
  padding-left: 0 !important;
  list-style: none !important;
}


/* --- 14.5  LES TROIS CHIFFRES SUR MOBILE ---------------------
   Constat (capture a 375px) : la grille 2 colonnes de la section 6
   laissait « des 6 ans » seul sur une deuxieme ligne, et le bloc
   touchait la photo qui suit, sans respiration.

   Correctif : trois lignes empilees, alignees, plus d'orphelin, et
   une marge basse pour degager la photo.
   Cout : environ 50px de defilement en plus, assume. */
@media (max-width: 767px) {
  .d2e-chiffres {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }
}


/* =========================================================
   15. ACTUALITES — fil Facebook integre, pleine largeur

   HTML : pages/3-actualites/bloc-reseaux.html

   Instagram est ecarte : `X-Frame-Options: DENY`, Meta interdit
   l'iframe. Verifie au navigateur, la page s'affiche en carre gris.

   /!\ POURQUOI UNE MISE A L'ECHELLE ET PAS UNE LARGEUR FLUIDE
   Le plugin Facebook se rend a la largeur passee dans son URL, PAS
   a celle de son conteneur (`adapt_container_width` ne le retrecit
   pas : verifie, a 500 le contenu etait coupe a droite sur 375px).
   On le rend donc a 500px — son maximum — et on le met a l'echelle
   sur mobile. Une seule iframe, donc un seul chargement Facebook.

   Les facteurs sont calcules sur la largeur disponible, soit la
   fenetre moins les 2 x 15px de marge du conteneur Yapla :
     375px d'ecran -> 345 dispo -> 345/500 = 0,69
     320px d'ecran -> 290 dispo -> 290/500 = 0,56
   Si tu changes la hauteur de l'iframe, recalcule les hauteurs de
   cadre : hauteur x facteur.
   ========================================================= */

.d2e-fb {
  max-width: 500px;
  margin: 0 auto 24px !important;
}
.d2e-fb__cadre {
  position: relative;
  overflow: hidden;
  height: 760px;
  border: 1px solid rgba(0, 48, 83, 0.14);
  border-radius: 8px;
  background: #fff;
}
.line-secondary .d2e-fb__cadre,
.line-footer .d2e-fb__cadre {
  border-color: rgba(255, 255, 255, 0.18);
}
.d2e-fb__cadre iframe {
  width: 500px;
  height: 760px;
  border: 0;
  display: block;
  transform-origin: top left;
}

@media (max-width: 767px) {
  .d2e-fb { max-width: 100%; }
  .d2e-fb__cadre { height: 524px; }              /* 760 x 0,69 */
  .d2e-fb__cadre iframe { transform: scale(0.69); }
}
@media (max-width: 374px) {
  .d2e-fb__cadre { height: 426px; }              /* 760 x 0,56 */
  .d2e-fb__cadre iframe { transform: scale(0.56); }
}


/* =========================================================
   16. ACCUEIL — appel aux visiteurs

   HTML : pages/1-accueil/bloc-2-deux-portes.html, bloc place APRES
   le conteneur `.d2e-portes`.

   Pleine largeur sous les deux portes : c'est une troisieme porte,
   pour ceux qui ne sont ni membres ni encore decides. Filet kraft a
   gauche pour la distinguer des deux autres sans la mettre au meme
   niveau hierarchique.
   ========================================================= */

.d2e-appel {
  --e-titre: #003053;
  --e-texte: #3F5468;
  --e-sur: #5A7089;
  --e-fond: #F7F3EB;
  --e-bord: rgba(0, 48, 83, 0.14);

  background: var(--e-fond);
  border: 1px solid var(--e-bord);
  border-left: 3px solid #976519;
  border-radius: 8px;
  padding: 26px 28px;
  margin: 18px 0 0 !important;
}
.line-secondary .d2e-appel,
.line-footer .d2e-appel {
  --e-titre: #fff;
  --e-texte: rgba(255, 255, 255, 0.88);
  --e-sur: rgba(255, 255, 255, 0.62);
  --e-fond: rgba(255, 255, 255, 0.07);
  --e-bord: rgba(255, 255, 255, 0.18);
  border-left-color: #C8A97E;
}

.d2e-appel__sur {
  margin: 0 0 8px !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--e-sur) !important;
}
.d2e-appel h3 {
  margin: 0 0 10px !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  color: var(--e-titre) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.d2e-appel p:not(.d2e-appel__sur):not(.d2e-actions) {
  margin: 0 0 18px !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--e-texte) !important;
}
.d2e-appel .d2e-actions {
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

@media (max-width: 767px) {
  .d2e-appel { padding: 22px 18px; }
  .d2e-appel h3 { font-size: 21px !important; }
  .d2e-appel p:not(.d2e-appel__sur):not(.d2e-actions) { font-size: 16px !important; }
  .d2e-appel .d2e-actions { flex-direction: column !important; }
  .d2e-appel .d2e-btn { text-align: center !important; }
}


/* =========================================================
   17. PAGE DE MAINTENANCE

   HTML : deja en ligne sur /fr/maintenance (pageid-422316).

   /!\ POURQUOI CETTE SECTION EXISTE
   La page avait ete ecrite avec un composant `.d2e-maintenance`
   complet, mais la section CSS correspondante n'avait jamais ete
   ecrite : les six classes `d2e-maintenance*` n'existaient nulle
   part. Le CSS ne « ne s'appliquait pas », il n'existait pas.
   Verifie : le fichier CSS personnalise EST bien charge sur cette
   page, meme template et memes 9 feuilles que les autres.

   Couleurs auto-adaptatives, meme principe que les autres sections :
   la page fonctionne sur bande claire comme sur bande marine.
   ========================================================= */

.d2e-maintenance {
  --m-titre: #003053;
  --m-texte: #3F5468;
  --m-sur: #5A7089;
  --m-fond: #F7F3EB;
  --m-carte: #fff;
  --m-bord: rgba(0, 48, 83, 0.14);

  max-width: 760px;
  margin: 0 auto !important;
  text-align: center;
}
.line-secondary .d2e-maintenance,
.line-footer .d2e-maintenance {
  --m-titre: #fff;
  --m-texte: rgba(255, 255, 255, 0.88);
  --m-sur: rgba(255, 255, 255, 0.62);
  --m-fond: rgba(255, 255, 255, 0.07);
  --m-carte: rgba(255, 255, 255, 0.07);
  --m-bord: rgba(255, 255, 255, 0.18);
}

/* --- En-tete : surtitre, titre, message --- */
.d2e-maintenance__sur {
  margin: 0 0 14px !important;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--m-sur) !important;
}
.d2e-maintenance h1 {
  margin: 0 0 18px !important;
  font-size: 38px !important;
  line-height: 1.15 !important;
  color: var(--m-titre) !important;
}
.d2e-maintenance__msg {
  margin: 0 auto 40px !important;
  max-width: 56ch;
  font-size: 19px !important;
  line-height: 1.65 !important;
  color: var(--m-texte) !important;
}

/* --- Bloc de contact --- */
.d2e-maintenance__contact {
  background: var(--m-fond);
  border: 1px solid var(--m-bord);
  border-left: 3px solid #976519;
  border-radius: 8px;
  padding: 28px 26px;
  text-align: left;
}
.line-secondary .d2e-maintenance__contact,
.line-footer .d2e-maintenance__contact {
  border-left-color: #C8A97E;
}
.d2e-maintenance__contact h2 {
  margin: 0 0 10px !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  color: var(--m-titre) !important;
}
.d2e-maintenance__contact p {
  margin: 0 0 18px !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--m-texte) !important;
}

/* --- Les trois moyens de contact, en tuiles --- */
.d2e-maintenance__moyens {
  list-style: none !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
}
.d2e-maintenance__moyens > li {
  margin: 0 !important;
  padding: 16px 18px !important;
  background: var(--m-carte);
  border: 1px solid var(--m-bord);
  border-radius: 6px;
}
.d2e-maintenance__moyens > li > strong {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--m-sur);
}
.d2e-maintenance__moyens > li > a {
  display: block;
  margin-bottom: 4px;
  font-size: 18px;
  line-height: 1.3;
  color: var(--m-titre) !important;
  text-decoration: none !important;
  word-break: break-word;
}
.d2e-maintenance__moyens > li > span {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  color: var(--m-texte);
}

/* --- Pied de page du message --- */
.d2e-maintenance__pied {
  margin: 34px 0 0 !important;
  font-size: 15px !important;
  color: var(--m-sur) !important;
}

@media (max-width: 767px) {
  .d2e-maintenance h1 { font-size: 28px !important; }
  .d2e-maintenance__msg {
    font-size: 17px !important;
    margin-bottom: 28px !important;
  }
  .d2e-maintenance__contact { padding: 22px 18px; }
  .d2e-maintenance__contact h2 { font-size: 21px !important; }
  .d2e-maintenance__moyens {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .d2e-maintenance .d2e-actions { flex-direction: column !important; }
  .d2e-maintenance .d2e-btn { text-align: center !important; }
}


/* =========================================================
   18. CONTRIBUTION SUGGEREE YAPLA — la rendre visible

   PROBLEME : sur l'ecran de recapitulatif d'un paiement, Yapla
   ajoute de lui-meme une ligne « Contribution suggeree » qui gonfle
   le total. Cette somme va a YAPLA, pas a l'association. Constate en
   prod : 40,00 EUR d'inscription -> 45,30 EUR a payer. La ligne est
   discrete et le lien « Modifier » qui permet de la remettre a zero
   passe inapercu. Des adherents paient ce supplement sans le voir.

   ON NE PEUT PAS toucher au HTML de cet ecran (module Yapla). Mais
   les classes sont stables et documentees dans la feuille du theme
   (templates/cms/00050/css/main.css), verifiees le 19/08/2026 :

     .zone-event .payment-form-cms .payment-tip   le bloc entier
     .js-payment-tip                              la ligne
     .js-payment-tip-amount                       le montant
     .js-tip-edit                                 le lien « Modifier »
     .tip-explanation                             « Pourquoi... ? »

   CE QUE FAIT CETTE SECTION : elle encadre le bloc, le colore, y
   ajoute une phrase d'avertissement en CSS, et transforme le lien
   « Modifier » en bouton visible. Rien n'est masque : on rend plus
   lisible, on ne cache aucune information de Yapla.

   VERIFIE EN PROD le 19/08/2026, capture a l'appui : sur une
   inscription reelle a 45,00 EUR, le bloc s'affiche encadre, la phrase
   d'avertissement apparait bien et « Modifier » est devenu un bouton.
   Le total annonce 50,65 EUR avec 5,65 EUR de contribution : c'est
   exactement le cas que cette section rend visible.

   /!\ NE JAMAIS MASQUER CE BLOC. Le montant est calcule par Yapla,
   cote serveur : le cacher ne l'enleverait pas du total, il le rendrait
   invisible. On rend plus lisible, on ne cache rien.

   /!\ ON NE PEUT PAS LE METTRE A ZERO EN CSS. Le CSS ne change pas la
   valeur d'un champ. Le seul levier serait un reglage cote Yapla.

   /!\ Les accents sont ecrits en echappements ASCII (\0000E9 = e
   accent aigu, etc.). Raison : la feuille de prod est servie sans
   charset, un accent ecrit en clair dans un `content` peut sortir en
   mojibake. Meme logique que les emojis en section 11.

   /!\ PIEGE MESURE, pas devine : un espace qui suit un echappement est
   AVALE par le parseur CSS. Ecrit `\0000E0 l`, le rendu donnait
   « va àl'hebergeur ». Les espaces qui suivent un accent sont donc
   ecrits en dur : `\000020`.
   ========================================================= */

/* le bloc, mis en evidence */
.payment-tip {
    background: #FDF6E9 !important;
    border: 2px solid #976519 !important;
    border-radius: 6px !important;
    padding: 14px 16px !important;
}

/* la phrase d'avertissement, ajoutee avant la ligne */
.payment-tip::before {
    content: "Attention\0000A0: cette somme va \0000E0\000020l\002019h\0000E9bergeur du site, pas \0000E0\000020l\002019association. Vous pouvez la mettre \0000E0\000020z\0000E9ro avec le lien Modifier." !important;
    display: block !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(151, 101, 25, .3) !important;
    color: #7A2018 !important;
    font-weight: 700 !important;
    font-size: .95em !important;
    line-height: 1.45 !important;
}

/* le montant ajoute : qu'on le voie */
.payment-tip .js-payment-tip-amount {
    font-weight: 700 !important;
    color: #7A2018 !important;
}

/* « Modifier » : de lien discret a bouton evident */
.payment-tip .js-tip-edit {
    display: inline-block !important;
    margin-top: 4px !important;
    padding: 6px 14px !important;
    background: #976519 !important;
    border-radius: 999px !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* mobile : le bloc respire, le bouton passe en pleine largeur */
@media (max-width: 767px) {
    .payment-tip { padding: 12px !important; }
    .payment-tip .js-tip-edit {
        display: block !important;
        text-align: center !important;
    }
}


/* =========================================================
   19. LIEN « MOT DE PASSE OUBLIE » — un piege corrige

   PROBLEME signale par l'utilisateur, verifie en prod : sous le
   formulaire de connexion, le lien s'appelle

       Mot de passe oublie / Premiere connexion

   Or il ne fait qu'une chose : envoyer un lien de reinitialisation a
   une adresse DEJA enregistree. Quelqu'un qui n'a pas encore de
   compte clique sur « Premiere connexion », saisit son adresse... et
   rien ne se passe, sans explication. Le libelle promet ce que la
   page ne fait pas. (Il resterait juste si l'association creait les
   comptes elle-meme : le membre n'aurait alors pas de mot de passe et
   utiliserait bien ce lien. Ce n'est pas le fonctionnement retenu.)

   RELEVE le 20/08/2026 sur /fr/membres/authentication :
     <a href="/fr/membres/forgetpassword/" class="reset-password"
        id="reset_password">Mot de passe oublie / Premiere connexion</a>
     - porte un id : accroche stable
     - 16px, poids 600, couleur rgb(201,154,87), display inline-flex
     - parent : un <div> SANS CLASSE, enfant direct de dl.zend_form
     - presence : cette page UNIQUEMENT (verifie sur accueil, membres,
       forgetpassword, adhesion, evenements et l'inscription evenement)

   CE QUE FAIT CETTE SECTION
     1. remplace le libelle par « Mot de passe oublie », ce que le
        lien fait reellement ;
     2. ajoute SOUS le lien, et HORS du lien, la phrase qui manquait :
        « Pas encore de compte ? ... Devenir membre ... ». Hors du
        lien, sinon cliquer la phrase enverrait vers la
        reinitialisation, soit l'inverse de ce qu'elle conseille.

   /!\ POURQUOI `font-size: 0` : on ne peut pas supprimer un noeud de
   texte en CSS. On l'ecrase donc a taille nulle et on ecrit le
   nouveau libelle dans le `::after`, qui porte sa propre taille. Le
   lien est en `inline-flex`, le pseudo devient donc un element flex
   et se pose naturellement a la place du texte.

   /!\ ECHEC OUVERT : la phrase du point 2 passe par `:has()`. Si le
   navigateur ne le gere pas, elle ne s'affiche pas — mais le libelle
   corrige, lui, s'applique quand meme. Aucun cas ou l'on se retrouve
   avec un libelle vide.

   /!\ Accents en echappements ASCII, et espace ecrit `\000020` quand
   il suit un echappement (le parseur avale sinon l'espace).
   Meme regle qu'en section 18.
   ========================================================= */

/* 1. le libelle dit ce que le lien fait */
#reset_password {
    font-size: 0 !important;
}

#reset_password::after {
    content: "Mot de passe oubli\0000E9" !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
}

/* 2. la precision qui manquait, sous le lien et hors du lien */
.zend_form > div:has(> #reset_password) {
    margin-bottom: 6px !important;
}

.zend_form > div:has(> #reset_password)::after {
    content: "Pas encore de compte ? Cr\0000E9ez-le avec \0000AB\0000A0Devenir\0000A0membre\0000A0\0000BB, juste en dessous." !important;
    display: block !important;
    margin-top: 5px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    color: #5A7089 !important;
    max-width: 62ch !important;
}

/* mobile : la phrase respire un peu plus */
@media (max-width: 767px) {
    .zend_form > div:has(> #reset_password)::after {
        font-size: 13.5px !important;
        max-width: none !important;
    }
}


/* ---------------------------------------------------------
   BLOC 3 — LE MEME PIEGE, AILLEURS : les autres modules
   (sous-bloc de la section 19, pas une section a part)

   Ajoute le 16/09/2026. Le lien de reinitialisation n'existe pas qu'au
   bas de la page de connexion : il reapparait dans le formulaire
   d'identification d'un EVENEMENT (« Etes-vous membre de... ? » ->
   « Je suis membre »), avec le meme libelle trompeur.

   /!\ CELUI-LA N'A NI ID NI CLASSE. Releve le 16/09/2026 sur
   /fr/evenements/authentication/... :

       <p><a href="/fr/membres/forgetpassword/">Mot de passe oublie /
          Premiere connexion</a></p>
       18px, graisse 500, dans un <p>, sous
       div.event-authentication.type-identification-slave-member

   L'accroche retenue est donc le `href`, seule chose stable. Compte des
   elements touches, page par page : 1 sur l'authentification d'un
   evenement, 1 sur /fr/membres/authentication (deja traite plus haut,
   donc exclu), 0 sur la reinitialisation, 0 sur Devenir membre, 0 sur
   la liste des evenements. Le jour ou un autre module affiche ce lien,
   la regle le corrigera aussi — c'est voulu.

   /!\ ON N'UTILISE PAS `font-size: 0` ICI, contrairement au bloc 1.
   Raison : le libelle ne fait pas la meme taille selon le module (18px
   dans l'evenement, 16px sur la page de connexion), et un `::after` a
   taille figee finirait par jurer quelque part. `visibility` laisse le
   pseudo-element heriter de la taille, de la graisse et de la couleur
   du lien : il ressemble donc exactement a l'original, en plus court.

   /!\ Le lien garde la largeur de l'ancien texte, donc une zone
   cliquable un peu large et un blanc a sa droite. Sans consequence : il
   est seul sur sa ligne, et mene de toute facon au meme endroit.
   --------------------------------------------------------- */

a[href*="/membres/forgetpassword"]:not(#reset_password) {
    visibility: hidden !important;
    position: relative !important;
}

a[href*="/membres/forgetpassword"]:not(#reset_password)::after {
    content: "Mot de passe oubli\0000E9" !important;
    visibility: visible !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    white-space: nowrap !important;
}


/* =========================================================
   20. ACTUALITES — le calendrier de la saison

   HTML : pages/3-actualites/bloc-dates-saison.html
   A coller dans une zone pleine largeur SOUS le fil Facebook
   (section 15).

   A QUOI CA SERT : le message de rentree annonce une trentaine de
   dates sur un an. Colle tel quel, c'est un mur de texte que
   personne ne lit jusqu'au bout. On le decoupe donc en cartes par
   periode, avec les dates alignees en colonne pour qu'on puisse
   balayer la liste au lieu de la lire.

   STRUCTURE
     .d2e-saison               conteneur, porte les jetons
     .d2e-saison__intro        titre + chapo
     .d2e-saison__grille       les cartes, 2 colonnes sur bureau
     .d2e-saison__bloc         une carte = une periode
     .d2e-saison__bloc--large  carte pleine largeur, dates sur 2 colonnes
     .d2e-saison__dates        la liste des dates
     .d2e-saison__quoi         le libelle, a droite de la date
     .d2e-saison__desc         precision sous un libelle
     .d2e-saison__note         remarque en pied de carte
     .d2e-saison__fin          le mot de la fin et le post-scriptum

   ALIGNEMENT DES DATES : chaque `li` est une petite boite flex a deux
   elements — la date, de largeur fixe, et le libelle, qui prend le
   reste. C'est ce qui aligne les dates en colonne d'une ligne a
   l'autre sans grille, et sans dependre du nombre de lignes.

   /!\ AUCUN EMOJI DANS LE HTML : les pictogrammes des titres viennent
   des classes `.d2e-emo--dates`, `--etincelles`, `--automne`,
   `--printemps`, `--ete`, `--bravo`, ajoutees en section 11.

   /!\ Les jetons basculent sur fond marine, comme les autres
   composants : la carte devient translucide et le texte blanc.
   ========================================================= */

/* --- Jetons : valeurs par defaut = bande a fond clair --- */
.d2e-saison {
    --s-titre:   #003053;
    --s-texte:   #1B2A33;
    --s-discret: #5A7089;
    --s-date:    #003053;
    --s-fond:    #FFFFFF;
    --s-bord:    rgba(0, 48, 83, .14);
    --s-filet:   #976519;
    --s-sur:     #976519;

    max-width: 1100px !important;
    margin: 0 auto !important;
    color: var(--s-texte) !important;
}

/* --- Bascule automatique sur les bandes a fond marine --- */
.line-secondary .d2e-saison,
.line-footer .d2e-saison {
    --s-titre:   #FFFFFF;
    --s-texte:   #FFFFFF;
    --s-discret: rgba(255, 255, 255, .78);
    --s-date:    #C8A97E;
    --s-fond:    rgba(255, 255, 255, .06);
    --s-bord:    rgba(255, 255, 255, .22);
    --s-filet:   #C8A97E;
    --s-sur:     #C8A97E;
}

/* --- Introduction --- */
.d2e-saison__intro {
    text-align: center !important;
    max-width: 760px !important;
    margin: 0 auto 32px auto !important;
}

.d2e-saison__intro h2 {
    color: var(--s-titre) !important;
    font-size: 1.7rem !important;
    line-height: 1.25 !important;
    margin: 0 0 12px 0 !important;
}

.d2e-saison__intro p {
    color: var(--s-texte) !important;
    font-size: 1.02rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* --- La grille de cartes --- */
.d2e-saison__grille {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
    align-items: start !important;
}

.d2e-saison__bloc {
    background: var(--s-fond) !important;
    border: 1px solid var(--s-bord) !important;
    border-radius: 10px !important;
    padding: 22px 24px 18px 24px !important;
}

.d2e-saison__bloc--large {
    grid-column: 1 / -1 !important;
}

.d2e-saison__bloc h3 {
    color: var(--s-titre) !important;
    font-size: .82rem !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    margin: 0 0 14px 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--s-filet) !important;
}

/* --- Les dates --- */
.d2e-saison__dates {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.d2e-saison__bloc--large .d2e-saison__dates {
    /* COLONNES CSS et non grille : une grille remplit en ligne
       (1|2 puis 3|4), donc les dates se liraient de gauche a droite et
       on saute une date sur deux en balayant une colonne. Les colonnes
       CSS remplissent de haut en bas, et s'adaptent au nombre de dates
       sans qu'on ait a l'ecrire nulle part. */
    columns: 2 !important;
    column-gap: 40px !important;
}

.d2e-saison__bloc--large .d2e-saison__dates > li {
    break-inside: avoid !important;
}

.d2e-saison__dates > li {
    /* DEUX COLONNES EN FLEX : la date est un element flex de largeur
       fixe, le libelle un element flex qui prend le reste et se replie
       DANS sa propre boite — donc ses lignes suivantes restent alignees
       sous la premiere.

       /!\ NE PAS retenter le retrait pendant (padding-left + text-indent
       negatif) : la date porte deja sa largeur, les deux se cumulaient et
       les dates sortaient de la carte par la gauche. Vu sur capture. */
    display: flex !important;
    flex-wrap: wrap !important;
    column-gap: 14px !important;
    margin: 0 0 11px 0 !important;
    padding: 0 !important;
    line-height: 1.45 !important;
}

.d2e-saison__dates > li:last-child {
    margin-bottom: 0 !important;
}

.d2e-saison__dates b {
    flex: 0 0 10.5em !important;
    color: var(--s-date) !important;
    font-weight: 700 !important;
}

.d2e-saison__quoi {
    /* LE LIBELLE DOIT ETRE NOMME. Laisse en noeud de texte anonyme, il
       devient un element flex qu'on ne peut pas selectionner : sa taille
       de base vaut sa longueur, donc un libelle long ne rentrait pas sur
       la ligne et sautait entierement a la ligne suivante, a la marge
       gauche. `flex: 1 1 0` le force a partager la ligne et a se replier
       dans sa propre colonne. Vu sur capture, deux fois. */
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

.d2e-saison__desc {
    /* sur sa propre ligne, alignee sous le libelle */
    flex: 0 0 100% !important;
    margin-left: calc(10.5em + 14px) !important;
    margin-top: 3px !important;
    color: var(--s-discret) !important;
    font-size: .92rem !important;
    line-height: 1.5 !important;
}

/* --- Remarque en pied de carte --- */
.d2e-saison__note {
    margin: 16px 0 0 0 !important;
    padding-top: 13px !important;
    border-top: 1px solid var(--s-bord) !important;
    color: var(--s-discret) !important;
    font-size: .93rem !important;
    line-height: 1.55 !important;
}

.d2e-saison__note + .d2e-saison__note {
    margin-top: 8px !important;
    padding-top: 0 !important;
    border-top: none !important;
}

.d2e-saison__note strong {
    color: var(--s-texte) !important;
}

/* --- Le mot de la fin --- */
.d2e-saison__fin {
    max-width: 780px !important;
    margin: 30px auto 0 auto !important;
    text-align: center !important;
}

.d2e-saison__fin p {
    color: var(--s-texte) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin: 0 0 12px 0 !important;
}

.d2e-saison__fin .d2e-saison__ps {
    color: var(--s-discret) !important;
    font-size: .93rem !important;
    margin-bottom: 0 !important;
}

/* --- MOBILE : une colonne, la date passe au-dessus du libelle --- */
@media (max-width: 767px) {
    .d2e-saison__grille {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* la carte large repasse sur une seule colonne : c'est `columns`
       qu'il faut ramener a 1, pas `grid-template-columns` */
    .d2e-saison__bloc--large .d2e-saison__dates {
        columns: 1 !important;
    }

    .d2e-saison__bloc {
        padding: 18px 18px 15px 18px !important;
    }

    .d2e-saison__intro h2 { font-size: 1.42rem !important; }
    .d2e-saison__intro    { margin-bottom: 24px !important; }

    /* la date passe au-dessus du libelle, tout revient a la marge */
    .d2e-saison__dates b { flex: 0 0 100% !important; }

    .d2e-saison__desc { margin-left: 0 !important; }

    .d2e-saison__dates > li { margin-bottom: 14px !important; }
}


/* =========================================================
   21. EVENEMENTS — vignettes : un seul bouton, description compacte

   DEUX DEMANDES
     1. retirer « M'inscrire » de la vignette pour que tout le monde
        passe par « Details » et lise les informations avant de payer ;
     2. rendre la description compacte et lisible, sans que la vignette
        devienne enorme des que le texte s'allonge.

   RELEVE SUR LE SITE le 20/08/2026, pas devine :

     vignette (/fr/evenements)
       p.actions > a.btn.btn-default « Details »
                 + a.btn.btn-primary « M'inscrire »
       texte : div.events-mosaic__short-description, 18px, et chaque <p>
               porte un `style="text-align: center;"` en ligne — d'ou les
               `!important` pour reprendre la main dessus.

     page Details (/fr/evenements/detail/...)
       a.btn.btn-primary « S'inscrire », dans
       div.event-detail__nav__cta — AUCUN `.actions`, AUCUN
       `.events-mosaic` au-dessus.

   /!\ C'EST CE QUI REND LE MASQUAGE SUR : le selecteur
   `.events-mosaic .item .actions .btn-primary` touche exactement un
   element sur la liste, et ZERO sur la page Details. Verifie en
   comptant les elements touches sur les deux pages. Ne jamais
   raccourcir ce selecteur en `.btn-primary` : ca masquerait le vrai
   bouton d'inscription et personne ne pourrait plus s'inscrire.

   /!\ MASQUAGE COSMETIQUE : le lien « M'inscrire » reste dans le code
   source de la page. Quelqu'un qui sait lire le HTML peut encore
   l'atteindre. C'est un guidage, pas un verrou.

   LE VRAI LEVIER COTE CONTENU : la vignette affiche le champ
   « description courte » de l'evenement, pas le descriptif long. Une
   description courte breve suffit donc — le texte complet vit sur la
   page Details. Textes proposes dans pages/5-evenements/.
   ========================================================= */

/* --- 1. la vignette n'a plus qu'une action --- */
.events-mosaic .item .actions .btn-primary {
    display: none !important;
}

/* « Details » devient l'action principale : il prend l'accent ocre et
   toute la largeur, puisqu'il est desormais seul. */
.events-mosaic .item .actions .btn-default {
    display: block !important;
    width: 100% !important;
    background: #976519 !important;
    border-color: #976519 !important;
    color: #FFFFFF !important;
}

.events-mosaic .item .actions .btn-default:hover,
.events-mosaic .item .actions .btn-default:focus {
    background: #7A5114 !important;
    border-color: #7A5114 !important;
    color: #FFFFFF !important;
}

/* --- 2. la description : on ne touche QUE ce que le HTML ne peut pas --
   Les descriptions d'evenement portent desormais tout leur style EN
   LIGNE (voir pages/5-evenements/). Ne restent ici que deux choses
   qu'un attribut `style` ne peut pas faire :

     - fixer la taille de reference de la vignette, dont heritent les
       `em` du gabarit : c'est ce qui garde le texte compact ici et le
       laisse respirer sur la page Details ;
     - neutraliser le centrage herite des anciens textes, qui portaient
       un `style="text-align: center;"` en ligne sur chaque <p>.

   /!\ NE PAS remettre ici de taille, de couleur ni de marge sur les
   `p` de la vignette. Une version precedente le faisait, et ses
   `!important` ECRASAIENT le style en ligne des gabarits : le
   paragraphe d'accroche perdait sa graisse et son marquage. */
.events-mosaic__short-description {
    font-size: 15px !important;
}

.events-mosaic__short-description p {
    text-align: left !important;
}

/* --- 3. FILET DE SECURITE : une vignette ne peut plus s'emballer ---
   Si une description courte est rallongee un jour, la vignette est
   ecretee au lieu de doubler de hauteur. Le texte complet reste
   integralement lisible sur la page Details, qui affiche le meme champ
   sans cette limite.

   /!\ LE PLAFOND EST LARGE EXPRES. Premier essai a 9.5em : il coupait
   deja le texte court propose (mesure : il lui faut ~175px, le plafond
   en donnait 142). Un filet doit attraper les debordements, pas le
   contenu prevu. */
.events-mosaic .item .events-mosaic__short-description {
    max-height: 15em !important;
    overflow: hidden !important;
    position: relative !important;
}

/* /!\ PAS DE DEGRADE DE FIN. Un `::after` en fondu avait ete pose pour
   signaler l'ecretage : il delavait la derniere ligne MEME quand il n'y
   avait rien a ecreter — le CSS ne sait pas si le texte deborde. Vu sur
   capture : « au 06 34 08 15 11. » a moitie efface. La coupe franche ne
   ment pas, et le cas est rare. */

/* --- MOBILE : la carte est deja pleine largeur, on respire un peu --- */
@media (max-width: 767px) {
    .events-mosaic__short-description {
        font-size: 15.5px !important;
    }
    .events-mosaic .item .events-mosaic__short-description {
        max-height: 18em !important;
    }
}


/* --- 4. le bouton dit ou il mene ---------------------------------
   « Details » seul laissait croire qu'on ne s'inscrit pas de la, alors
   que c'est desormais le SEUL chemin vers l'inscription. Le libelle est
   donc reecrit. Meme technique qu'en section 19 : taille nulle sur le
   texte d'origine, nouveau libelle dans le `::after`. */
.events-mosaic .item .actions .btn-default {
    font-size: 0 !important;
}

.events-mosaic .item .actions .btn-default::after {
    content: "D\0000E9tails et inscription" !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}


/* =========================================================
   22. EVENEMENTS — la page Details : le strict necessaire

   HTML : pages/5-evenements/_template-description-courte.html
          pages/5-evenements/_template-description-base.html

   /!\ CETTE SECTION EST VOLONTAIREMENT MAIGRE. Les deux descriptions
   d'evenement portent desormais TOUT leur style EN LIGNE, dans les
   attributs `style` du HTML. Raison : l'editeur Yapla affiche alors le
   rendu au lieu du code, et quelqu'un qui ne connait pas le HTML peut
   modifier le texte sans risque et sans dependre de ce fichier.

   Ce qui reste ici ne fait que deux choses, que le style en ligne ne
   peut pas faire : neutraliser un heritage du theme, et borner une
   largeur. Tout le reste appartient au HTML.

   /!\ NE PAS RAJOUTER DE REGLES `.d2e-ev*` ICI. Une version precedente
   en avait tout un jeu ; elles sont devenues du CSS mort le jour ou les
   descriptions sont passees en style en ligne. Pire, leurs `!important`
   ECRASAIENT le style en ligne des gabarits — notamment les marges des
   paragraphes. Si un gabarit ne se comporte pas comme attendu, la cause
   est probablement une regle trop large ajoutee ici.

   OU VA QUOI, releve le 20/08/2026, CORRIGE le 06/10/2026 :
     .event-jumbotron__short-description  la description courte.
        /!\ ELLE N'EST PLUS AFFICHEE : mesure le 06/10/2026 sur quatre
        evenements, elle est en `display:none` partout. Yapla a change
        son gabarit. La description courte ne sort donc QUE dans la
        vignette de la page Evenements, via
        `.events-mosaic__short-description`. Les regles ci-dessous sur
        `.event-jumbotron__short-description` sont sans effet tant que
        ca dure : les garder ne coute rien, elles reprendront si Yapla
        reaffiche le chapo, mais NE PAS compter dessus pour mettre un
        texte en avant.
     .event-detail__description-wrapper   la description de base
   ========================================================= */

/* Largeur de lecture du chapo, et taille de reference dont heritent les
   `em` du gabarit. Pas de marge ni d'alignement ici : c'est au gabarit. */
.event-jumbotron__short-description {
    max-width: 62ch !important;
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    color: #1B2A33 !important;
}

/* Neutralise l'heritage des anciens textes, qui portaient un
   `style="text-align: center;"` en ligne sur chaque <p> : un texte
   centre sur cinq lignes dans une colonne etroite se lit mal.
   On ne touche QUE l'alignement — surtout pas les marges, sinon on
   reprend la main sur ce que le gabarit decide. */
.event-jumbotron__short-description p,
.event-detail__description-wrapper p {
    text-align: left !important;
}


/* =========================================================
   23. MOT DE PASSE OUBLIE — LE PIEGE DES DEUX BOUTONS

   LE PROBLEME, rapporte le 15/10/2026 et verifie ensuite.
   La page de reinitialisation presente DEUX boutons cote a cote :
     - `input#submitform.btn.btn-primary` = « Envoyer », fond ocre ;
     - `a#login_link.btn.btn-link`        = « Connexion », fond MARINE.
   Les deux ressemblent a l'action principale, et « Connexion » est
   place A GAUCHE d'« Envoyer » (x=79 contre x=225 sur bureau), donc
   sous l'oeil en premier. Sur mobile il est carrement AU-DESSUS
   (y=2358 contre 2430).
   Resultat : on clique « Connexion », rien ne part, et on conclut
   que le site est casse. Au moins deux personnes sont tombees dedans,
   dont un administrateur. Ce n'etait pas un bug d'envoi : le serveur
   repond 200 et envoie bien le courriel quand on clique « Envoyer ».

   DEUXIEME PROBLEME, le meme jour. Le formulaire etait a 1801 px du
   haut sur bureau et 2247 px sur mobile, sous une bande d'intro de
   1439 px (« Connectez-vous a votre espace », « Vous n'etes pas
   adherent ? »...). Apres envoi, la page se recharge EN HAUT et le
   message de confirmation reste tout en bas, invisible sans defiler.
   D'ou l'impression que rien ne s'est passe.

   /!\ CETTE SECTION NE S'APPLIQUE QU'A LA VUE REINITIALISATION,
   via `body:has(#forget_password_form)`. Ce formulaire n'existe que
   la. NE PAS retomber sur `body.pageid-325336` : cet identifiant
   couvre TOUTE l'espace membres, y compris la page de connexion ou
   le texte d'intro est utile.
   ========================================================= */

/* 23.1 — La page de reinitialisation ne garde que ce qui sert a
   reinitialiser. On masque la bande d'intro, et elle seule : les
   bandes d'en-tete, de menu et de pied sont exclues nommement, et
   la bande QUI CONTIENT le formulaire est protegee par
   `:not(:has(...))`. Si Yapla fusionne un jour les deux bandes,
   cette protection evite de tout faire disparaitre. */
body:has(#forget_password_form) .line.site_line__item:not(.line-header):not(.line-menu):not(.line-footer):not(:has(#forget_password_form)) {
    display: none !important;
}

/* 23.2 — « Envoyer » repasse devant. Le parent `dl.zend_form` est
   deja en `display:flex`, donc `order` suffit. */
body:has(#forget_password_form) #submitform { order: 1 !important; }
body:has(#forget_password_form) #login_link  { order: 2 !important; }

/* 23.3 — « Connexion » cesse d'etre un bouton. Un lien souligne ne
   se confond pas avec l'action principale. */
body:has(#forget_password_form) #login_link {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-left: 20px !important;
    align-self: center !important;
    font-weight: 400 !important;
    color: #0E6BA8 !important;
    text-decoration: underline !important;
}

/* 23.4 — ...et il dit ou il mene.
   /!\ Technique `font-size: 0` + `::after`, PAS `visibility:hidden`
   + `position:absolute` : dans un conteneur flex, l'element garderait
   la largeur de « Connexion » pendant que le texte absolu, plus long,
   deborderait. Avec `font-size: 0` l'element se dimensionne sur son
   `::after`.
   /!\ AUCUN CARACTERE ACCENTUE dans ce `content` : un echappement
   avale l'espace qui le suit (« \0000E0 la » donne « àla »). La
   formule a ete choisie pour n'avoir besoin d'aucun accent. */
body:has(#forget_password_form) #login_link {
    font-size: 0 !important;
}
body:has(#forget_password_form) #login_link::after {
    content: "Revenir au formulaire de connexion" !important;
    font-size: .95rem !important;
    font-weight: 400 !important;
    text-decoration: underline !important;
}