/* survols extraits des style-hover du design — genere, ne pas editer */
.hv-0ee37d{transition:all .25s ease}.hv-0ee37d:hover{background:#14201a}
.hv-3631b8{transition:all .25s ease}.hv-3631b8:hover{background:#c3ce9d}
.hv-4c733a{transition:all .25s ease}.hv-4c733a:hover{filter:grayscale(0); transform:scale(1.03)}
.hv-626a2d{transition:all .25s ease}.hv-626a2d:hover{background:#1a3a2e; color:#f6f4ef; border-color:#1a3a2e}
.hv-81fdec{transition:all .25s ease}.hv-81fdec:hover{color:#c3ce9d}
.hv-820ef9{transition:all .25s ease}.hv-820ef9:hover{filter:grayscale(0); transform:scale(1.02)}
.hv-8756d8{transition:all .25s ease}.hv-8756d8:hover{background:#1a3a2e; color:#f6f4ef}
.hv-b52de5{transition:all .25s ease}.hv-b52de5:hover{background:rgba(230,227,217,0.12)}
.hv-c31e4d{transition:all .25s ease}.hv-c31e4d:hover{background:#f6f4ef; color:#14201a; border-color:#f6f4ef}
.hv-d55ef6{transition:all .25s ease}.hv-d55ef6:hover{background:#efece4}

/* --- Entete qui reste lisible au defilement ---------------------------
   Seule la page d'accueil a une entete fixe en texte clair, posee sur le
   grand visuel sombre : des qu'on descend dans le contenu clair, elle
   devenait invisible. Les autres pages ont deja un fond opaque.
   La classe est posee par site.js au-dela de 80 px de defilement. --- */
.rsp-entete { transition: background-color 0.3s ease, color 0.3s ease,
              border-color 0.3s ease; }
.entete-defilee { background: rgba(246,244,239,0.92) !important;
                  backdrop-filter: blur(10px);
                  border-bottom: 1px solid rgba(20,32,26,0.1); }
.entete-defilee, .entete-defilee a { color: #14201a !important; }
.entete-defilee > a:last-of-type { border-color: rgba(20,32,26,0.3) !important; }
.entete-defilee .rsp-burger { color: #14201a !important;
                              border-color: rgba(20,32,26,0.3) !important; }
/* --- Adaptation aux petits ecrans -------------------------------------
   La maquette Claude Design est dessinee en largeur fixe. Les styles sont en
   ligne, donc !important est necessaire pour les surcharger. --- */
@media (min-width: 901px) {
  .rsp-burger { display: none !important; }
}
@media (max-width: 900px) {
  .rsp-col   { grid-template-columns: 1fr !important; }
  .rsp-pad   { padding-left: 22px !important; padding-right: 22px !important; }
  .rsp-haut  { padding-top: 64px !important; padding-bottom: 64px !important; }
  /* --- Entete telephone : logo + burger seulement -----------------------
     Sur 412 px de large, le nom complet, la pastille d'essai et le burger ne
     tiennent pas sur une ligne : le logo se repliait sur trois lignes et
     l'entete montait a ~105 px, qui recouvraient le titre du hero. La
     pastille descend donc dans le menu deplie (choix David, 25/08/2026 :
     le hero porte deja un bouton d'essai plein format juste dessous). --- */
  .rsp-entete { grid-template-columns: 1fr auto !important; row-gap: 8px !important;
                padding: 12px 20px !important; }
  .rsp-entete > a:first-of-type { grid-column: 1 !important; grid-row: 1 !important; }
  .rsp-entete > a:first-of-type span:first-child {
                font-size: clamp(14px, 4.4vw, 19px) !important; }
  .rsp-burger { display: inline-flex !important; align-items: center;
                justify-content: center;
                grid-column: 2 !important; grid-row: 1 !important; }
  /* navigation repliee derriere le bouton burger */
  .rsp-entete nav { display: none !important; }
  .rsp-entete.menu-ouvert nav { display: flex !important;
                                grid-column: 1 / -1 !important; grid-row: 2 !important;
                                flex-direction: column !important; align-items: flex-start !important;
                                row-gap: 14px !important; padding: 14px 0 6px !important;
                                font-size: 15px !important; }
  /* la pastille d'essai n'apparait qu'une fois le menu ouvert */
  .rsp-entete > a:last-of-type { display: none !important; }
  .rsp-entete.menu-ouvert > a:last-of-type {
                display: inline-flex !important; justify-content: center !important;
                grid-column: 1 / -1 !important; grid-row: 3 !important;
                margin: 2px 0 6px !important;
                font-size: 14px !important; padding: 12px 18px !important; }
  /* --- Hero remis dans le flux -----------------------------------------
     La maquette pose le bloc de texte en absolu, cale en bas d'une section
     de 100vh, sans reserve en haut : il remontait sous l'entete fixe. En
     colonne justifiee en bas le rendu est identique, mais la section
     grandit si le texte deborde au lieu de passer sous l'entete. --- */
  #top { height: auto !important;
         min-height: 100vh !important;
         min-height: 100svh !important;
         display: flex !important; flex-direction: column !important;
         justify-content: flex-end !important; }
  #top > div:last-of-type { position: static !important;
         padding: 104px 22px 52px !important; }
  #top > div:last-of-type > div { gap: 26px !important; margin-top: 30px !important; }
  figure, img { max-width: 100% !important; }
  blockquote { min-height: 0 !important; }
}
@media (max-width: 560px) {
  .rsp-col  { gap: 20px !important; }
  .rsp-haut { padding-top: 48px !important; padding-bottom: 48px !important; }
  .rsp-entete nav { column-gap: 12px !important; }
  #top h1 { font-size: clamp(34px, 9.4vw, 58px) !important; }
  #top > div:last-of-type > p:first-of-type { margin-bottom: 16px !important; }
}

/* --- Agenda : la ligne d'un evenement a venir ------------------------------
   Quatre colonnes sur grand ecran (vignette, date, titre, lieu). Sous 900 px
   la vignette passe au-dessus, contrainte en largeur : en pleine largeur une
   affiche A4 mange tout l'ecran avant qu'on ait lu le titre. --- */
@media (max-width: 900px) {
  .rsp-agenda { grid-template-columns: 1fr !important; gap: 18px !important; }
  .rsp-agenda .rsp-vignette { max-width: 190px; }
  /* un cadre vide en pleine colonne, c'est du vide : il ne sert qu'a aligner
     les lignes sur grand ecran, il n'a plus de role une fois empilees */
  .rsp-agenda .rsp-vide { display: none !important; }
}

/* --- Fiche evenement : l'affiche remonte en mobile -------------------------
   La colonne de droite (affiche + bloc « Participer ») tombait sous tout le
   texte : sur telephone on arrivait au visuel et au bouton d'inscription
   apres deux ecrans de lecture. En colonne unique, elle passe devant. --- */
@media (max-width: 900px) {
  .rsp-col > .rsp-cote { order: -1; }
  .rsp-cote > a > img { max-width: 340px; margin: 0 auto; }
}