/* ==========================================================================
   Vallée des Rocs — feuille de style unique
   Palette tirée du logo (dessin à l'encre) et de l'aquarelle de la vallée.
   Principe directeur : gros texte, fort contraste, grandes zones cliquables.
   ========================================================================== */

:root {
  /* Couleurs */
  --papier:        #FAF7F0;   /* fond général, ton parchemin */
  --surface:       #FFFFFF;
  --surface-creme: #F3EEE2;
  --encre:         #1C1A17;   /* texte principal — contraste 15:1 sur papier */
  --encre-douce:   #574F44;   /* texte secondaire — contraste 7.4:1, niveau AAA */
  --trait:         #E1D9C9;
  --riviere:       #2E5E4E;   /* vert d'eau — couleur d'accent principale */
  --riviere-clair: #E6EFEA;
  --ocre:          #B5502E;   /* terre cuite — alertes, messages épinglés */
  --ocre-clair:    #FBEDE7;
  --or:            #C08A2E;

  /* Les couleurs des types (colonne « Type » du classeur). Chacune tient 7:1
     de contraste — niveau AAA — sur son propre fond clair comme sur le papier,
     ce qui est plus sombre que l'instinct ne le suggère : un vert « joli » sur
     fond pâle tombe vers 5:1, illisible au soleil pour un œil de soixante ans.
     Mesuré pour les cinq, et à remesurer avant d'en changer une. */
  --type-musique:            #6B2D6B;   /* prune */
  --type-musique-clair:      #F6EAF5;
  --type-sport:              #35551B;   /* vert mousse — distinct du vert rivière */
  --type-sport-clair:        #EDF3E1;
  --type-culture:            #1B4C75;   /* bleu d'encre */
  --type-culture-clair:      #E7F0F8;
  --type-convivialite:       #6F4409;   /* terre */
  --type-convivialite-clair: #FAEFDC;
  --type-autre:              #4A4339;   /* gris-brun : un type que le site ne connaît pas */
  --type-autre-clair:        #EFEAE0;

  /* Typographie */
  --titre: "Spectral", Georgia, "Times New Roman", serif;
  --corps: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Rythme */
  --largeur: 1120px;
  --rayon: 10px;
  --ombre: 0 1px 2px rgba(28,26,23,.06), 0 4px 16px rgba(28,26,23,.06);
}

*, *::before, *::after { box-sizing: border-box; }

/* Sans cette ligne, `hidden` ne masquerait rien : les cartes sont en display
   grid, flex ou block, qui l'emportent sur le display: none du navigateur.
   C'est ainsi que les boutons de filtre écartent une carte. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--corps);
  /* 19px de base : lisible sans lunettes de lecture. C'est probablement la
     ligne la plus importante de tout ce fichier pour le public de l'asso. */
  font-size: 19px;
  line-height: 1.65;
  color: var(--encre);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--titre); line-height: 1.2; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: clamp(2rem, 5vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1em; }
a  { color: var(--riviere); text-underline-offset: 3px; }
a:hover { color: var(--ocre); }

/* Toujours visible au clavier — indispensable, et souvent oublié. */
:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; border-radius: 4px; }

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

.contenu { max-width: var(--largeur); margin: 0 auto; padding: 0 20px; }

.saut-contenu {
  position: absolute; left: -9999px;
  background: var(--encre); color: #fff; padding: 12px 20px; z-index: 100;
}
.saut-contenu:focus { left: 12px; top: 12px; }

/* ---------- Bandeau d'information épinglé ---------------------------------
   Alimenté par la colonne « Épinglé » du Google Sheets. Masqué si vide.    */
.bandeau { background: var(--ocre); color: #fff; padding: 14px 0; font-size: 1.05rem; }
.bandeau a { color: #fff; text-decoration: underline; }
.bandeau strong { display: block; font-family: var(--titre); font-size: 1.15rem; }

/* ---------- En-tête et navigation ------------------------------------------ */
.entete { background: var(--surface); border-bottom: 1px solid var(--trait); }
.entete-int {
  max-width: var(--largeur); margin: 0 auto; padding: 16px 20px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.marque { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.marque img { width: 66px; height: 66px; }
.marque-nom { font-family: var(--titre); font-size: 1.45rem; font-weight: 600; line-height: 1.1; }
.marque-lieu { font-size: .82rem; color: var(--encre-douce); letter-spacing: .09em; text-transform: uppercase; }

.nav { margin-left: auto; }
.nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav a {
  display: block; padding: 12px 16px;   /* ≥ 44px de haut : confortable au doigt */
  text-decoration: none; color: var(--encre); border-radius: var(--rayon); font-weight: 500;
}
.nav a:hover { background: var(--riviere-clair); color: var(--riviere); }
.nav a[aria-current="page"] { background: var(--riviere); color: #fff; }

/* ---------- Bandeau paysage -------------------------------------------------- */
.paysage { height: 190px; overflow: hidden; background: var(--surface-creme); }
.paysage img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }

/* ---------- Titre de page ---------------------------------------------------- */
.titre-page { padding: 44px 0 8px; }
.titre-page p { color: var(--encre-douce); font-size: 1.12rem; max-width: 60ch; }

/* ---------- Sections --------------------------------------------------------- */
.section { padding: 40px 0; }
.section + .section { border-top: 1px solid var(--trait); }
.section-tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.section-tete h2 { margin: 0; }
.lien-suite { font-weight: 600; text-decoration: none; white-space: nowrap; }
.lien-suite:hover { text-decoration: underline; }

/* ---------- Les types : une couleur, un mot ----------------------------------
   Chaque carte porte une classe `type-…` qui pose deux variables locales,
   --teinte et --teinte-clair. L'étiquette, le liseré de la carte, le bloc de
   date et les boutons de filtre les lisent toutes les deux : une couleur de
   plus ne demande donc qu'une ligne ici, et rien ailleurs.

   Une carte sans type ne reçoit aucune de ces classes. Les variables restent
   indéfinies, les valeurs de repli s'appliquent, et le site garde exactement
   l'apparence qu'il avait avant l'arrivée de la colonne Type. Un classeur où
   personne ne remplit cette colonne ne s'en trouve donc pas abîmé. */
.type-musique      { --teinte: var(--type-musique);      --teinte-clair: var(--type-musique-clair); }
.type-sport        { --teinte: var(--type-sport);        --teinte-clair: var(--type-sport-clair); }
.type-culture      { --teinte: var(--type-culture);      --teinte-clair: var(--type-culture-clair); }
.type-convivialite { --teinte: var(--type-convivialite); --teinte-clair: var(--type-convivialite-clair); }
.type-autre        { --teinte: var(--type-autre);        --teinte-clair: var(--type-autre-clair); }

/* L'étiquette porte toujours le mot à côté de la couleur — voir le commentaire
   d'app.js : la couleur seule ne classe rien pour qui la distingue mal. */
.etiquette {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--teinte, var(--encre-douce));
  font-size: .9rem; font-weight: 600; line-height: 1.3;
}
.point-type {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  background: var(--teinte, currentColor);
}

/* Les boutons de filtre. Ce sont de vrais <button> : la navigation au clavier,
   l'annonce de l'état pressé et le retour du focus sont ceux du navigateur,
   qu'aucune imitation ne rattrape. */
.filtres-bloc { margin: 0 0 22px; }
.filtres { display: flex; flex-wrap: wrap; gap: 10px; }
.filtre {
  display: inline-flex; align-items: center; gap: 9px;
  /* 48 px : ces boutons sont pris au doigt, souvent par une main qui tremble
     un peu. C'est la première chose qu'on touche sur la page. */
  min-height: 48px; padding: 8px 18px;
  font-family: var(--corps); font-size: 1rem; font-weight: 600;
  color: var(--encre); background: var(--surface);
  border: 2px solid var(--trait); border-radius: 999px;
  cursor: pointer;
}
.filtre:hover { border-color: var(--teinte, var(--riviere)); }
.filtre[aria-pressed="true"] {
  background: var(--teinte, var(--riviere));
  border-color: var(--teinte, var(--riviere));
  color: #fff;
}
.filtre[aria-pressed="true"] .point-type { background: #fff; }
.filtre-nb { font-weight: 500; opacity: .8; font-variant-numeric: tabular-nums; }

/* Ce qu'un filtre a écarté ne doit pas passer pour une panne : la ligne dit
   combien de cartes restent, sur combien. Vide tant qu'on affiche tout. */
.filtres-etat { margin: 12px 0 0; color: var(--encre-douce); font-size: .95rem; }

/* ---------- Prochains rendez-vous (source : onglet Événements) --------------- */
.rdv-liste { display: grid; gap: 14px; }
.rdv {
  display: grid; grid-template-columns: 1fr;
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 18px 20px; box-shadow: var(--ombre);
}

/* Le feuillet de texte : le bloc de date, puis le corps. Sur un événement sans
   affiche, c'est tout ce que contient la carte, et elle a exactement la forme
   qu'elle avait avant le livre ouvert. */
.rdv-feuillet-texte {
  display: grid; grid-template-columns: 88px 1fr; gap: 20px; align-items: start;
}

/* ---------- La carte « livre ouvert » ----------------------------------------
   Un événement qui a une affiche s'ouvre en deux pages : le texte à gauche,
   l'affiche à droite. C'est la forme que demandaient les bénévoles, et elle
   dit quelque chose de juste — l'affiche et son annonce sont une seule chose,
   alors que le site les montrait dans deux sections éloignées.

   Le pli n'est pas dessiné au milieu de la carte mais à la frontière réelle
   des deux colonnes, par une ombre intérieure posée sur chaque page. C'est ce
   qui permet de changer la largeur des colonnes — ou de les empiler sur
   téléphone — sans que la reliure se retrouve en travers d'une page.

   Une carte sans affiche ne prend JAMAIS cette forme : pas de cadre vide, pas
   de demi-page blanche. C'est la condition pour que le livre ouvert cohabite
   avec le reste de la liste, où la plupart des lignes n'ont pas d'affiche.
   ---------------------------------------------------------------------------- */
/* La page de droite est dimensionnée par l'affiche, pas par un pourcentage de
   la carte : sinon elle s'élargit avec l'écran et l'affiche finit seule au
   milieu d'une grande page crème. Une largeur fixe la fait tenir juste autour
   de son affiche, comme une page de droite tient autour de son illustration,
   et la page de texte prend tout le reste. */
.rdv-livre {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0; padding: 0; overflow: hidden;
}
/* La hauteur de la carte est celle de l'affiche, pas celle du texte : une
   annonce de trois lignes laisserait sans cela 200 px de blanc sous elle, et
   la carte aurait l'air cassée plutôt que composée. Le texte se centre donc en
   regard de son affiche, comme un paragraphe en face d'une illustration. */
.rdv-livre .rdv-feuillet-texte {
  align-content: center;
  padding: 20px 30px 20px 22px;
  box-shadow: inset -18px 0 22px -18px rgba(28, 26, 23, .2);
}

/* La page de droite, partagée par les événements et les activités — c'est la
   même colonne du classeur, elle mérite la même page. */
.page-affiche {
  width: 258px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 6px;
  padding: 20px 24px 20px 30px;
  background: var(--surface-creme);
  border-left: 1px solid var(--trait);
  box-shadow: inset 18px 0 22px -18px rgba(28, 26, 23, .2);
  color: var(--encre);
}
/* L'affiche réutilise le cadre du mur d'affiches : même mesure du fichier,
   même fond flou pour les formats inattendus, même message si le lien est
   mort (voir ajusterAffiche() dans app.js). Seule la taille change. */
.page-affiche-vignette { display: block; width: 100%; }
.page-affiche .affiche-cadre { width: 100%; }
.page-affiche-vignette:hover .affiche-cadre {
  transform: translateY(-3px); box-shadow: 0 8px 24px rgba(28, 26, 23, .14);
}

/* Voir et télécharger sont deux gestes, donc deux liens. Ils sont écrits en
   toutes lettres, jamais réduits à une icône : une flèche vers le bas ne dit
   « télécharger » qu'à qui le sait déjà.

   Les 44 px de hauteur ne sont pas décoratifs. Une ligne de texte nue en fait
   24, trop fin à viser au doigt — et une bonne part des adhérents a passé
   soixante ans. C'est la même règle que sur les adresses des responsables. */
.page-affiche-actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  column-gap: 16px; margin: 0; text-align: center;
}
.page-affiche-actions a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .88rem; font-weight: 500; color: var(--riviere);
}
/* Le bloc de date est la tache de couleur la plus visible de la liste : c'est
   lui qui porte le type. Sans type, il reste au vert rivière d'origine. */
.rdv-date {
  text-align: center; border-radius: 8px; padding: 8px 4px;
  background: var(--teinte-clair, var(--riviere-clair));
  color: var(--teinte, var(--riviere));
}
.rdv-jour { font-family: var(--titre); font-size: 1.9rem; font-weight: 600; line-height: 1; }
.rdv-mois { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; }
.rdv-corps .etiquette { margin-bottom: 4px; }
.rdv-corps h3 { margin: 0 0 4px; }
.rdv-meta { color: var(--encre-douce); font-size: .97rem; margin: 0; }
.rdv-meta span + span::before { content: " · "; }
.rdv-desc { margin: 8px 0 0; font-size: .97rem; }

/* ---------- Mur d'affiches (source : Google Drive) --------------------------- */
.affiches { display: grid; gap: 26px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.affiche { display: block; text-decoration: none; color: inherit; }
.affiche-cadre {
  position: relative;
  aspect-ratio: 1 / 1.414;           /* format A4/A3 portrait */
  background: var(--surface-creme);
  border: 1px solid var(--trait); border-radius: var(--rayon);
  overflow: hidden; box-shadow: var(--ombre);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Les deux images se superposent : le fond flou occupe tout le cadre, l'affiche
   se pose dessus. Tant que les dimensions du fichier ne sont pas connues, on
   remplit — c'est le comportement juste pour une affiche au format habituel,
   et le plus fréquent. */
.affiche-cadre img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

/* Le fond n'apparaît que lorsqu'on montre l'affiche en entier. */
.affiche-fond { opacity: 0; }

/* Image proche du format affiche : on remplit, le rognage est imperceptible. */
.cadre-rempli .affiche-image { object-fit: cover; }

/* Image carrée, panoramique ou de proportions inattendues : on la montre en
   entier, et sa propre version floutée comble le cadre. L'agrandissement du
   fond évite les bords translucides que le flou laisse sur les arêtes. */
.cadre-entier .affiche-image { object-fit: contain; }
.cadre-entier .affiche-fond {
  opacity: .55;
  filter: blur(18px) saturate(.75);
  transform: scale(1.2);
}

/* Lien mort ou fichier repassé en privé. */
.cadre-absent {
  display: flex; align-items: center; justify-content: center;
  padding: 16px; text-align: center;
  color: var(--encre-douce); font-style: italic; font-size: .93rem;
  background: var(--surface-creme);
}
.affiche:hover .affiche-cadre { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(28,26,23,.14); }
.affiche-nom { margin: 12px 0 2px; font-family: var(--titre); font-size: 1.05rem; font-weight: 600; }
.affiche .etiquette { margin-top: 3px; font-size: .85rem; }
.affiche-pdf { font-size: .9rem; color: var(--encre-douce); }

/* Une affiche passée, montrée sur l'accueil pour que le mur ne reste pas vide
   entre deux annonces. Le mot « déjà passé » est écrit sur la carte (voir
   afficherAffiches) ; la teinte seule ne dirait rien à personne. */
.affiche-passee { font-style: italic; }

/* ---------- Le mur d'affiches qui défile (accueil) ---------------------------
   Le défilement est celui du navigateur : le doigt, la molette et la barre le
   commandent déjà. Les deux flèches n'existent que pour le dire à qui n'a pas
   d'écran tactile — voir poserDefilement() dans app.js.
   ---------------------------------------------------------------------------- */
.mur-cadre { position: relative; }

.affiches-defilantes {
  display: flex;
  overflow-x: auto;
  /* `proximity` et non `mandatory` : le navigateur doit rester libre d'amener
     une affiche entière à l'écran quand on l'atteint au clavier. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  /* La barre de défilement reste visible : c'est elle qui dit qu'il y a autre
     chose à droite, y compris pendant que les flèches sont masquées. */
  padding-bottom: 10px;
}
.affiches-defilantes > .affiche { flex: 0 0 230px; scroll-snap-align: start; }

.mur-fleche {
  position: absolute;
  /* À hauteur de l'affiche, non du bloc entier : le nom et la date qui la
     suivent tireraient la flèche vers le bas. 230 px de large × 1,414 de haut,
     donc son milieu est à 163 px, moins la moitié du bouton. */
  top: 139px;
  width: 48px; height: 48px; padding: 0;
  border-radius: 50%; border: 1px solid var(--trait);
  background: var(--surface); color: var(--riviere);
  box-shadow: 0 2px 12px rgba(28, 26, 23, .2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.mur-fleche:hover { background: var(--riviere); color: #fff; border-color: var(--riviere); }
.mur-fleche-arriere { left: -16px; }
.mur-fleche-avant { right: -16px; }

/* ---------- Galerie de souvenirs (source : Google Drive) --------------------- */

/* Le choix de l'album commande ce qui est téléchargé : il est donc en tête,
   large et clairement étiqueté, et non relégué dans un coin de la page. */
.galerie-choix {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-bottom: 22px;
}
.galerie-choix label {
  font-family: var(--titre); font-size: 1.1rem; font-weight: 600;
}
.galerie-choix select {
  font-family: var(--corps); font-size: 1.05rem; color: var(--encre);
  background: var(--surface);
  border: 2px solid var(--riviere); border-radius: var(--rayon);
  /* Hauteur au-delà de 44 px : la cible d'un doigt, pas d'une souris. */
  padding: 12px 16px;
  max-width: 100%; cursor: pointer;
}

.galerie-intro p {
  max-width: 65ch; color: var(--encre-douce);
  border-left: 4px solid var(--trait); padding-left: 16px;
}

/* Le mur est servi par Google dans un cadre. On en maîtrise la taille, la
   bordure et la place dans la page — pas l'intérieur : le fond gris, la grille
   et le nom du fichier sous chaque vignette sont les siens. C'est le prix d'un
   seul lien à coller par album au lieu d'un par photo, et de photos qui
   paraissent d'elles-mêmes dès qu'on les dépose dans le dossier. */
/* Le cadre est réduit sur téléphone (voir ajusterCadre() dans app.js) : le
   conteneur masque ce qui dépasse et reçoit la hauteur réduite. */
.galerie-mur { margin-top: 4px; overflow: hidden; position: relative; }

/* Le temps que Google peigne sa grille — plusieurs secondes sur un réseau
   mobile — le cadre n'est qu'un rectangle blanc. On dit ce qui se passe. */
.galerie-mur:not(.galerie-chargee)::after {
  content: "Chargement des photos…";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--encre-douce); font-style: italic;
  background: var(--surface-creme);
  border-radius: var(--rayon);
  pointer-events: none;
}
.galerie-cadre {
  display: block; width: 100%;
  /* Assez haut pour montrer plusieurs rangées sans que le défilement interne
     ne devienne le seul moyen de voir l'album. */
  height: clamp(420px, 68vh, 720px);
  transform-origin: top left;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--surface); box-shadow: var(--ombre);
}

/* Le lien vers le visualiseur plein écran de Drive : discret, sous le mur —
   c'est un prolongement de l'album, pas l'action principale de la page. */
.galerie-lien {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin: 18px 0 0;
}
.galerie-lien-note { color: var(--encre-douce); font-size: .93rem; }

/* ---------- Actualités (source : Google Sheets) ------------------------------ */
.actus { display: grid; gap: 16px; }
.actu {
  background: var(--surface); border: 1px solid var(--trait);
  border-left: 4px solid var(--or); border-radius: var(--rayon); padding: 18px 22px;
}
.actu-date { font-size: .87rem; color: var(--encre-douce); text-transform: uppercase; letter-spacing: .05em; }
.actu h3 { margin: 2px 0 6px; }
.actu p:last-child { margin-bottom: 0; }

/* ---------- Fiches d'activité (source : Google Sheets) ----------------------- */
.activites { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
.activite {
  background: var(--surface); border: 1px solid var(--trait);
  /* Le liseré de gauche est le repère qu'on suit des yeux en descendant la
     grille ; sans type, il reste de la couleur du trait, donc invisible. */
  border-left: 5px solid var(--teinte, var(--trait));
  border-radius: var(--rayon); box-shadow: var(--ombre);
  display: grid; grid-template-columns: 1fr; overflow: hidden;
}
/* Le contenu de la fiche. Il porte le rembourrage, que la carte avait avant :
   sur une fiche à deux pages, la page d'affiche a le sien. Il reste une
   colonne flex, sans quoi `.responsables { margin-top: auto }` cesserait de
   pousser les contacts en bas de carte. */
.activite-feuillet { display: flex; flex-direction: column; padding: 24px; }

/* Une activité dont le classeur donne une affiche s'ouvre comme une carte
   d'événement — le programme trimestriel des sorties, le flyer d'un atelier.
   Elle prend alors DEUX colonnes de la grille : dans les 310 px d'une colonne,
   les deux pages seraient illisibles l'une comme l'autre. La fiche devient de
   ce fait la plus visible de la page, ce qui est juste : c'est la seule qui
   apporte un document. */
.activite-livre { grid-column: span 2; grid-template-columns: minmax(0, 1fr) auto; }

/* Le type et l'état de l'activité tiennent sur la même ligne, au-dessus du
   nom : deux informations courtes qui se lisent d'un coup d'œil. */
.activite-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 12px; }
.activite-tete .badge { margin-bottom: 0; }
.activite h3 { font-size: 1.35rem; margin-bottom: 12px; }
.activite dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .97rem; }
.activite dt { color: var(--encre-douce); }
.activite dd { margin: 0; font-weight: 500; }
.badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600; margin-bottom: 12px; align-self: flex-start; }
.badge-actif { background: var(--riviere-clair); color: var(--riviere); }
.badge-pause { background: var(--ocre-clair); color: var(--ocre); }

/* Responsable(s) de l'activité — poussé en bas de la carte pour que toutes
   les cartes d'une même rangée alignent leur bloc de contact. */
.responsables { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--trait); }
.responsables-titre {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--encre-douce); margin-bottom: 6px;
}
.responsable + .responsable { margin-top: 8px; }
.responsable-nom { display: block; font-weight: 600; }
/* L'adresse est le lien que les gens cherchent en premier sur cette page.
   Hauteur forcée à 44 px : une ligne de texte nue fait ~24 px, trop fin à
   viser au doigt — et une bonne part des visiteurs a passé soixante ans. */
.responsable a {
  display: flex; align-items: center; min-height: 44px;
  font-size: .95rem; word-break: break-word;
}

/* ---------- Séance déplacée (fiche d'activité) --------------------------------
   Un cours reporté est l'information la plus périssable et la plus urgente de
   la page : elle est traitée comme une alerte, pas comme un détail. */
.deplacement {
  background: var(--ocre-clair); border-left: 4px solid var(--ocre);
  border-radius: 6px; padding: 12px 16px; margin: 0 0 14px;
}
.deplacement-titre {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ocre); font-weight: 600; margin-bottom: 4px;
}
.deplacement-ligne + .deplacement-ligne { margin-top: 10px; padding-top: 10px; border-top: 1px solid #F0D9CE; }
.deplacement-ligne strong { display: block; }
.deplacement-ligne span { display: block; font-size: .93rem; color: var(--encre-douce); }

/* ---------- « Ajouter à mon agenda » ------------------------------------------ */
.ajout-agenda { margin: 10px 0 0; font-size: .92rem; color: var(--encre-douce); }
/* 44 px de haut : ces liens sont souvent pris au doigt, sur un téléphone,
   juste après avoir lu la date. */
.ajout-agenda a { display: inline-flex; align-items: center; min-height: 44px; }
.activite .ajout-agenda { margin-top: 14px; }

/* ---------- Pastilles d'activités (accueil) ---------------------------------- */
.pastilles { display: flex; flex-wrap: wrap; gap: 10px; }
.pastille {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--trait); border-radius: 999px;
  padding: 11px 20px; text-decoration: none; color: var(--encre); font-weight: 500;
}
.pastille:hover { background: var(--riviere); color: #fff; border-color: var(--riviere); }
.pastille:hover .point-type { background: #fff; }

/* ---------- Blocs de texte et encadrés --------------------------------------- */
.prose { max-width: 68ch; }
.prose ul { padding-left: 1.3em; }
.prose li { margin-bottom: .45em; }
.encadre {
  background: var(--surface-creme); border-radius: var(--rayon);
  padding: 24px 28px; margin: 24px 0; border: 1px solid var(--trait);
}
.encadre h3 { margin-top: 0; }
.deux-col { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }

.bouton {
  display: inline-block; background: var(--riviere); color: #fff;
  padding: 14px 26px; border-radius: var(--rayon); text-decoration: none;
  font-weight: 600; border: 2px solid var(--riviere);
}
.bouton:hover { background: #24483C; color: #fff; }
.bouton-clair { background: transparent; color: var(--riviere); }
.bouton-clair:hover { background: var(--riviere); color: #fff; }

.tarifs { width: 100%; border-collapse: collapse; margin: 8px 0 20px; }
.tarifs th, .tarifs td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--trait); }
.tarifs th { font-family: var(--titre); }
.tarifs td:last-child { font-weight: 600; white-space: nowrap; }

/* ---------- États : chargement, vide ----------------------------------------- */
.etat { color: var(--encre-douce); font-style: italic; padding: 20px 0; }
.etat-vide {
  background: var(--surface-creme); border-radius: var(--rayon);
  padding: 32px; text-align: center; color: var(--encre-douce);
}

/* ---------- Pied de page ------------------------------------------------------ */
.pied { background: var(--encre); color: #D8D2C7; margin-top: 56px; padding: 40px 0 28px; font-size: .95rem; }
.pied a { color: #F0EBE0; }
.pied-grille { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pied h3 { color: #fff; font-size: 1.05rem; margin-bottom: .4em; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 6px; }
.pied-bas { border-top: 1px solid #38342E; margin-top: 28px; padding-top: 18px; color: #9C9486; font-size: .87rem; }

/* ---------- Bandeau « mode démonstration » ------------------------------------ */
.demo { background: #FFF6D9; border-bottom: 1px solid #E8D28A; color: #6B5310; padding: 10px 0; font-size: .93rem; text-align: center; }

/* ---------- Téléphone ---------------------------------------------------------- */
@media (max-width: 760px) {
  body { font-size: 18px; }
  .entete-int { gap: 12px; }
  .marque img { width: 54px; height: 54px; }
  .marque-nom { font-size: 1.2rem; }
  .nav { margin-left: 0; width: 100%; }
  .nav ul { justify-content: center; }
  .nav a { padding: 11px 13px; font-size: .95rem; }
  .paysage { height: 130px; }
  .rdv { padding: 15px; }
  .rdv-feuillet-texte { grid-template-columns: 70px 1fr; gap: 14px; }

  /* Le livre se referme : les deux pages s'empilent, et la reliure passe à
     l'horizontale. Une affiche posée à côté de son texte dans 360 px de large
     ne laisserait de place ni à l'une ni à l'autre. */
  .rdv-livre { grid-template-columns: 1fr; padding: 0; }
  .rdv-livre .rdv-feuillet-texte { padding: 16px 16px 8px; box-shadow: none; }
  .page-affiche {
    width: auto; padding: 14px 16px 18px;
    border-left: 0; border-top: 1px solid var(--trait);
    box-shadow: inset 0 16px 20px -16px rgba(28, 26, 23, .15);
  }
  .page-affiche .affiche-cadre { max-width: 210px; }

  /* La grille des activités n'a plus qu'une colonne : une fiche qui en
     réclamerait deux en inventerait une seconde et déborderait de l'écran. */
  .activite-livre { grid-column: span 1; grid-template-columns: 1fr; }
  .activite-livre .activite-feuillet { padding-bottom: 16px; }
  .affiches { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
  .affiches-defilantes > .affiche { flex: 0 0 150px; }
  /* 150 px × 1,414 = 212 px de haut, milieu à 106. */
  .mur-fleche { top: 82px; width: 44px; height: 44px; }
  .mur-fleche-arriere { left: -6px; }
  .mur-fleche-avant { right: -6px; }
  .filtre { font-size: .95rem; padding: 8px 15px; gap: 8px; }
  .galerie-choix { gap: 8px; }
  .galerie-choix select { width: 100%; }
  .section { padding: 30px 0; }
}

/* ---------- Impression ---------------------------------------------------------- */
@media print {
  .nav, .paysage, .pied, .demo, .filtres-bloc { display: none; }
  body { font-size: 12pt; background: #fff; }
}