/* =====================================================================
   Les pages en blocs — fonds alternés, courbe douce, repères
   =====================================================================
   L'organisation essayée dans la maquette WebDesign/site, reprise sur
   le site réel avec les couleurs de salle-de-reception.html : le vert
   bocage et ses deux fonds clairs (Hervé, 26/10/2026). Un premier essai
   aux couleurs de la charte — blanc, lin, turquoise foncé en grands
   aplats — a été jugé lourd et terne à l'écran. La salle est la
   première page à s'en servir ; les autres l'adopteront en chargeant
   cette feuille.

   Trois fonds, et pas plus : la rosée (un blanc à peine vert), le foin
   pour la bande moyenne, et pour les sections qui doivent s'imposer le
   noir doux du sous-menu déroulé (le bocage, essayé d'abord, ne reste
   que dans les titres et les chiffres). Un quatrième fond diluerait l'alternance au lieu de la
   rythmer. Les couleurs sont nommées ici, en variables `--bloc-*` : la
   feuille n'étant chargée que par les pages en blocs, elles ne
   débordent pas sur le reste du site.

   Les sections ne se touchent pas en ligne droite : une courbe douce,
   dans la couleur de la section suivante, mord sur le bas de la
   précédente (le `<svg class="vague">` posé entre les deux). La vague
   est en `currentColor` : sa classe ne fait que choisir la couleur.
   ===================================================================== */

:root {
  --bloc-clair: var(--rosee);       /* rosée : le fond clair, pas du blanc pur */
  --bloc-foin: var(--foin);        /* foin : la bande moyenne */
  --bloc-sombre: var(--turquoise-fonce); /* les fonds foncés colorés :
                                  coches des pastilles, bouton plein. Était
                                  le vert bocage #1F3A2B (Hervé, 28/10/2026) */
  --bloc-titre: var(--noir-doux);       /* le texte foncé sur fond clair — titres,
                                  chiffres, liens, sommaire : le noir doux
                                  du fond sombre, et non plus le vert bocage
                                  (Hervé, 27/10/2026) */
  --bloc-fond-sombre: var(--noir-doux); /* les sections foncées : le fond du sous-menu
                                  déroulé du menu principal (Hervé, 26/10/2026),
                                  à la place du bocage essayé d'abord */
  --bloc-texte: var(--noir-doux);       /* le texte courant (était le vert « terre »
                                  #2B3328 de la maquette) */
  --bloc-texte-doux: var(--gris-bocage);  /* le texte secondaire, les légendes */
  --bloc-sur-sombre: var(--blanc);  /* le texte sur le fond sombre */
  --bloc-sur-sombre-doux: var(--texte-sur-sombre); /* celui du sous-menu */
  --bloc-accent-sombre: var(--turquoise-clair); /* les petits titres du fond
                                    sombre seulement (Hervé, 27/10/2026). Le
                                    turquoise de la charte n'allait pas pour
                                    eux ; il reste aux liens et au bouton. */
  --bloc-filet: rgba(43, 51, 40, .16);
  --bloc-filet-sombre: rgba(243, 245, 236, .18);
}

.bloc {
  padding: 4.5rem 0 5.5rem;
  background-color: var(--bloc-clair);
  color: var(--bloc-texte);
}

.bloc_foin {
  background-color: var(--bloc-foin);
}

.bloc_sombre {
  background-color: var(--bloc-fond-sombre);
  color: var(--bloc-sur-sombre);
}

/* La première section suit le bandeau photo : elle n'a pas besoin d'un
   grand vide au-dessus de ses repères. */
.bloc_ouverture {
  padding-top: 3rem;
}

@media (max-width: 767.98px) {
  .bloc {
    padding: 3rem 0 3.75rem;
  }

  .bloc_ouverture {
    padding-top: 2.25rem;
  }
}

/* --- Le bandeau de la page -----------------------------------------

   Une page peut avoir sa propre photo (Page::$bandeau) : elle arrive
   par deux variables posées en ligne par breadcrumb.php, l'une pour
   l'ordinateur, l'autre, en hauteur, pour le téléphone. Elle paraît
   telle quelle, sans voile, comme la photo commune : un voile vert
   essayé le 26/10 a été retiré à la demande d'Hervé. */

/* Le cadrage vient de la page quand elle le précise
   (Page::$bandeauCadrage, la carte de la page Accès, centrée sur
   Coron) ; sinon le centre, un peu bas sur ordinateur. */
.bandeau_page {
  background-image: var(--bandeau);
  background-position: var(--bandeau-cadrage, center 60%);
}

@media (max-width: 899.98px) {
  .bandeau_page {
    background-image: var(--bandeau-mobile);
    background-position: var(--bandeau-cadrage, center);
  }
}

/* --- La vague ------------------------------------------------------- */

.vague {
  display: block;
  width: 100%;
  height: 40px;
  margin-top: -39px;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

@media (min-width: 992px) {
  .vague {
    height: 64px;
    margin-top: -63px;
  }
}

/* Au-dessus du pied de page, la vague ne peut pas prendre la couleur
   de la section suivante : le pied est une photo. Elle est donc
   retournée et prend celle de la dernière section, qu'elle prolonge en
   débordant sur le haut du pied. Le pied (.deco_wrap) est au niveau 1 :
   la vague passe au-dessus. */
.vague_pied {
  margin-top: 0;
  margin-bottom: -39px;
  transform: scaleY(-1);
  z-index: 2;
}

@media (min-width: 992px) {
  .vague_pied {
    margin-top: 0;
    margin-bottom: -63px;
  }
}

.vague_clair  { color: var(--bloc-clair); }
.vague_foin   { color: var(--bloc-foin); }
.vague_sombre { color: var(--bloc-fond-sombre); }

/* --- Les titres de section ------------------------------------------

   Les classes du site (`section_title`, `small_title`, `big_title`)
   gardent leur dessin ; on les aligne à gauche quand le titre est à
   côté d'une photo, et on éclaircit tout sur le vert. */

.bloc .section_title {
  margin-bottom: 1.6rem;
}

.bloc .section_title.text-center {
  margin-bottom: 2.4rem;
}

/* Les petits titres, avec leur icône, un cran plus grands que sur le
   reste du site (.9rem), pour mieux annoncer chaque section (Hervé,
   28/10/2026). */
.bloc .section_title .small_title {
  font-size: 1.1rem;
}

.bloc .section_title .small_title i {
  font-size: 1.25em;
  vertical-align: -.12em;
}

/* Une icône dessinée en SVG (absente de la police d'icônes du site) se
   pose comme les autres : même taille, même marge, même couleur. */
.bloc .section_title .small_title svg.bi {
  width: 1.25em;
  height: 1.25em;
  margin-right: 10px;
  vertical-align: -.2em;
}

.bloc h4,
.bloc .section_title .big_title {
  color: var(--bloc-titre);
}

/* Les petits titres (des `h2`) gardent la couleur de tous les titres
   du site, le turquoise foncé de style.css, et leurs icônes le vert
   prairie : eux seuls ne passent pas au noir doux (Hervé, 27/10/2026).
   Aucune règle ici, donc. */

/* Les icônes des petits titres prennent la couleur de leur texte
   (Hervé, 28/10/2026) : style.css les met en turquoise partout, il faut
   donc le dire. */
.bloc .section_title .small_title i,
.bloc .section_title .small_title svg.bi {
  color: inherit;
}

/* Les liens de texte des fonds clairs : le dessin du site (souligné,
   socle.css), dans le noir doux du texte. Paragraphes et coordonnées
   ensemble : ils étaient de deux couleurs, noir et turquoise foncé. */
main .bloc p a:not(.btn),
main .bloc dd a:not(.btn),
main .bloc td a:not(.btn),
main .bloc figcaption a:not(.btn) {
  color: var(--bloc-titre);
}

.bloc_sombre .section_title .big_title,
.bloc_sombre h4 {
  color: var(--bloc-sur-sombre);
}

.bloc_sombre .section_title .small_title,
.bloc_sombre .section_title .small_title i {
  color: var(--bloc-accent-sombre);
}

/* Sur la page, le turquoise clair remplace le turquoise de la charte
   (Hervé, 28/10/2026) : liens et bouton du fond sombre. */
main .bloc_sombre p a:not(.btn),
main .bloc_sombre td a:not(.btn) {
  color: var(--turquoise-clair);
}

main .bloc_sombre p a:not(.btn):hover {
  color: var(--bloc-sur-sombre);
}

/* --- Les repères : quatre chiffres sous le bandeau ------------------ */

.reperes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
}

.reperes li {
  padding: 18px 16px;
  border-radius: 12px;
  background: var(--blanc);
  border: 1px solid var(--bloc-filet);
}

.reperes b {
  display: block;
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1.05;
  color: var(--bloc-titre);
}

.reperes span {
  color: var(--bloc-texte-doux);
  font-size: .92rem;
}

@media (max-width: 767.98px) {
  .reperes {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- L'essentiel : les réponses avant les questions ----------------- */

.essentiel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
}

.essentiel li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: var(--bloc-foin);
  color: var(--bloc-texte);
  font-size: .95rem;
  line-height: 1.25;
}

/* La coche est un dessin, pas un mot : elle n'a rien à dire aux
   lecteurs d'écran, d'où le pseudo-élément. */
.essentiel li::before {
  content: "";
  flex: 0 0 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bloc-sombre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}

/* --- Le sommaire ----------------------------------------------------

   De la navigation, pas du texte : il ne prend pas le soulignement des
   liens de paragraphe (socle.css), mais une bordure qui s'allume au
   survol, en turquoise foncé : le turquoise clair se perdait sur le
   fond clair (Hervé, 28/10/2026). */

.sommaire {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin: 0 0 3.5rem;
  padding: 14px 0 0;
  list-style: none;
  border-top: 1px solid var(--bloc-filet);
}

/* `li a:not(.btn)` : aussi précis que la règle commune des liens de
   socle.css, sans quoi celle-ci l'emportait. Le sommaire était alors
   souligné en turquoise, virait à l'ocre au survol, et prenait en plus
   la bordure d'ici : deux styles l'un sur l'autre. */
main .sommaire li a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--bloc-titre);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

main .sommaire li a:not(.btn):hover,
main .sommaire li a:not(.btn):focus-visible {
  color: var(--bloc-titre);
  text-decoration: none;
  border-bottom-color: var(--turquoise-fonce);
}

/* Le saut vers une ancre ne doit pas glisser le titre sous l'en-tête
   collant du site. */
.bloc[id] {
  scroll-margin-top: 90px;
}

/* --- Le texte à côté de sa photo ------------------------------------ */

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 3.5rem;
  align-items: center;
}

.duo_inverse > figure {
  order: -1;
}

.duo_contact,
.duo_haut {
  align-items: start;
}

.duo figure {
  margin: 0;
}

/* La photo à côté du texte se termine en arche : le haut arrondi
   rappelle la fenêtre en arc de la grande salle, le bas reste presque
   droit pour se poser sur la ligne (repris de la maquette). */
.duo figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 200px 200px 20px 20px;
}

/* Une photo déjà détourée en rond sur fond transparent (les photos
   anciennes de la page du moulin), ou une carte qu'un recadrage
   priverait des villes qu'elle situe (page Accès), se pose telle
   quelle, sans arche. */
.duo figure.photo_ronde img,
.duo figure.sans_arche img {
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
}

/* Deux couples texte et photo dans une même section (pages des
   événements) : le second se détache du premier. */
.duo + .duo {
  margin-top: 4.5rem;
}

@media (max-width: 991.98px) {
  .duo {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .duo_inverse > figure {
    order: 0;
  }

  .duo figure {
    max-width: 420px;
  }
}

/* --- Les légendes --------------------------------------------------- */

.bloc figcaption {
  margin-top: .6rem;
  color: var(--bloc-texte-doux);
  font-size: .9rem;
  font-style: italic;
}

.bloc_sombre figcaption {
  color: var(--bloc-sur-sombre-doux);
}

/* --- Les capacités : le chiffre d'abord ----------------------------- */

.capacites {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

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

.capacites > div {
  padding: 26px 24px 22px;
  border-radius: 14px;
  background: var(--blanc);
  border: 1px solid var(--bloc-filet);
}

.capacites .n {
  display: block;
  font-family: var(--police-titre);
  font-size: clamp(3.2rem, 9vw, 4.8rem);
  line-height: .95;
  color: var(--bloc-titre);
}

.capacites .n small {
  margin-left: .15em;
  font-size: .4em;
}

.capacites h4 {
  margin: .5rem 0 .4rem;
  font-size: 1.2rem;
}

.capacites p {
  margin: 0;
  color: var(--bloc-texte-doux);
}

@media (max-width: 991.98px) {
  .capacites_trois {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575.98px) {
  .capacites {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Deux paragraphes dans une même carte (hébergement : la répartition,
   puis la description ; accès : se garer, accessibilité). */
.capacites p + p,
.compris p + p {
  margin-top: .5rem;
}

/* Une section faite d'un titre et d'un paragraphe, sans photo : elle
   garde une ligne de lecture confortable. */
.texte_seul {
  max-width: 760px;
}

/* Le déroulé d'un séjour (page Mariage) : trois temps dans l'ordre,
   de gauche à droite, chacun ouvert par son jour et son heure en
   grand. Une liste ordonnée, puisque c'est une suite. */
.deroule {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 2.4rem;
  padding: 0;
  list-style: none;
}

.deroule li {
  padding: 22px 22px 20px;
  border-radius: 14px;
  border: 1px solid var(--bloc-filet-sombre);
}

.deroule_quand {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--police-titre);
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--bloc-accent-sombre);
}

.deroule p {
  margin: 0;
}

@media (max-width: 991.98px) {
  .deroule {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Un texte seul, centré sous ce qui précède. */
.texte_centre {
  margin: 0 auto;
}

/* Ce qui précise sans être l'essentiel. */
.note {
  max-width: 760px;
  margin: 1.4rem 0 0;
  color: var(--bloc-texte-doux);
  font-size: .95rem;
}

.bloc .text-center + .capacites + .note {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.bloc_sombre .note {
  color: var(--bloc-sur-sombre-doux);
}

/* --- Les fiches : de vrais tableaux, lus comme tels ----------------- */

.fiche {
  width: 100%;
  border-collapse: collapse;
}

.fiche caption {
  caption-side: top;
  padding: 0 0 .6rem;
  color: var(--bloc-texte-doux);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.fiche th,
.fiche td {
  padding: 13px 0;
  border-bottom: 1px solid var(--bloc-filet);
  vertical-align: baseline;
}

.fiche th {
  font-weight: 400;
  padding-right: 16px;
}

.fiche td {
  text-align: right;
  color: var(--bloc-texte-doux);
  white-space: nowrap;
}

.fiche td b {
  margin-right: .3em;
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--bloc-titre);
}

.bloc_sombre .fiche caption,
.bloc_sombre .fiche td {
  color: var(--bloc-sur-sombre-doux);
}

.bloc_sombre .fiche th {
  color: var(--bloc-sur-sombre);
}

.bloc_sombre .fiche th,
.bloc_sombre .fiche td {
  border-bottom-color: var(--bloc-filet-sombre);
}

/* Une fiche à trois colonnes (les temps de route de la page Accès) :
   en-têtes discrets, la colonne du milieu alignée à gauche, le tout
   dans une largeur de lecture. */
.fiche_cadre {
  max-width: 760px;
  margin: 0 auto;
}

.fiche_trois thead th {
  padding-top: 0;
  color: var(--bloc-texte-doux);
  font-size: .85rem;
  font-weight: 600;
}

.fiche_trois thead th:last-child,
.fiche_trois td:last-child {
  text-align: right;
}

.fiche_trois td:nth-child(2) {
  text-align: left;
}

/* La ligne repérée de style.css (la sortie d'autoroute) pose un filet
   turquoise sur le bord de sa première cellule : la fiche n'ayant pas
   de marge latérale, il faut lui en donner une. */
.fiche .ligne_reperee > th {
  padding-left: 12px;
}

.coordonnees_gps {
  font-size: 1.35rem;
}

/* La ligne de total d'une fiche : un filet plus marqué au-dessus. */
.fiche .fiche_total th,
.fiche .fiche_total td {
  font-weight: 600;
  border-top: 2px solid currentColor;
  border-bottom: 0;
}

.bloc_sombre .fiche td b {
  color: var(--bloc-sur-sombre);
}

@media (max-width: 575.98px) {
  .fiche td {
    white-space: normal;
  }
}

/* --- Les photos ----------------------------------------------------- */

.diptyque {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 2.6rem 0 0;
}

.diptyque img {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 14px;
}

.diptyque figcaption {
  grid-column: 1 / -1;
  margin-top: 0;
}

.photo_large {
  margin: 2.6rem 0 0;
}

.photo_large img {
  display: block;
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: 14px;
}

@media (max-width: 767.98px) {
  .diptyque img {
    height: 260px;
  }

  .photo_large img {
    height: 300px;
  }
}

/* La planche des décors : des photos de formats mêlés, posées en
   colonnes à leur propre hauteur. Une grille à cases égales les aurait
   toutes recadrées, ou laissé des trous. */
.planche {
  margin: 2.8rem 0 0;
}

.planche_photos {
  columns: 3 220px;
  column-gap: 14px;
}

.planche_photos img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 14px;
  border-radius: 12px;
  break-inside: avoid;
}

/* --- Ce qui est compris --------------------------------------------- */

.compris {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.compris li {
  padding: 22px 20px;
  border-radius: 14px;
  background: var(--blanc);
  border: 1px solid var(--bloc-filet);
}

.compris h4 {
  margin: 0 0 .5rem;
  font-size: 1.15rem;
  color: var(--bloc-titre);
}

.compris p {
  margin: 0;
  color: var(--bloc-texte-doux);
  font-size: .95rem;
}

/* Trois cartes au lieu de quatre (page du parc). */
.compris.compris_trois {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Deux cartes côte à côte (page Anniversaire : les deux salles). */
.compris.compris_deux {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
  .compris,
  .compris.compris_trois,
  .compris.compris_deux {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .compris,
  .compris.compris_trois,
  .compris.compris_deux {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Les boutons -------------------------------------------------

   La forme de la maquette : en pilule, sans capitales. Sur le fond
   sombre, le principal en turquoise clair, texte noir doux, les
   autres en contour clair ; sur un fond
   clair, bouton d'or ou turquoise foncé plein. Ils ne s'appliquent
   qu'aux boutons des blocs (`.bloc .btn`) : le reste du site garde les
   siens, aux couleurs de la charte. */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 1.6rem;
}

.bloc .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: var(--police-texte);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}

/* Le bouton principal en turquoise clair (Hervé, 28/10/2026), texte noir
   doux : le blanc n'y contrasterait qu'à 1,6 contre 1 (il faut 4,5), le
   noir y atteint 10,6. Au survol, turquoise foncé et texte blanc (8,7). */
.bloc .btn.btn_turquoise {
  background-color: var(--turquoise-clair);
  color: var(--bloc-titre);
}

.bloc .btn.btn_turquoise:hover {
  background-color: var(--turquoise-fonce);
  color: var(--blanc);
}

.bloc .btn.btn_clair {
  background-color: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(243, 245, 236, .6);
  color: var(--bloc-sur-sombre);
}

.bloc .btn.btn_clair:hover {
  background-color: rgba(255, 255, 255, .12);
  color: var(--bloc-sur-sombre);
}

.bloc .btn.btn_bocage {
  background-color: var(--bloc-sombre);
  color: var(--bloc-sur-sombre);
}

.bloc .btn.btn_bocage:hover {
  background-color: var(--turquoise-nuit);
  color: var(--bloc-sur-sombre);
}

.bloc .btn:focus-visible {
  outline: 2px solid var(--bloc-accent-sombre);
  outline-offset: 3px;
}

/* --- Les coordonnées ------------------------------------------------ */

.coordonnees {
  display: grid;
  gap: 12px;
  margin: 0;
}

.coordonnees > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--bloc-filet);
}

.coordonnees dt {
  color: var(--bloc-texte-doux);
  font-weight: 400;
}

.coordonnees dd {
  margin: 0;
  color: var(--bloc-texte);
}

@media (max-width: 575.98px) {
  .coordonnees > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* --- En images : la galerie et la visite 3D ------------------------- */

/* Le menu des albums (gallery-menu.php), en pilules : l'album affiché
   est plein, en noir doux. Il remplace les gros boutons carrés de
   l'ancienne galerie (.btn-gallery). */
.albums {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 2.4rem;
}

main .albums a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--bloc-filet);
  background: var(--blanc);
  color: var(--bloc-titre);
  font-weight: 500;
  text-decoration: none;
  transition: border-color .2s, background-color .2s, color .2s;
}

main .albums a:hover,
main .albums a:focus-visible {
  border-color: var(--turquoise-fonce);
  color: var(--bloc-titre);
}

main .albums a[aria-current="page"] {
  border-color: var(--bloc-fond-sombre);
  background: var(--bloc-fond-sombre);
  color: var(--bloc-sur-sombre);
}

/* Le sommaire de la galerie : une carte par album, trois par ligne. */
.albums_cartes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 2rem;
}

.albums_cartes .galerie_carte {
  border-color: var(--bloc-filet);
  border-radius: 14px;
}

.albums_cartes .galerie_carte_titre {
  color: var(--bloc-titre);
}

@media (max-width: 991.98px) {
  .albums_cartes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .albums_cartes {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* La visite 3D : la vidéo d'aperçu de mariages.net en grand, coins
   arrondis comme les photos, et le lien « Lancer la visite » dessous. */
.visite_3d {
  max-width: 900px;
  margin: 2.6rem auto 0;
  text-align: center;
}

.visite_3d video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

main .visite_3d a {
  display: block;
  font-weight: 600;
  color: var(--turquoise-fonce);
}

main .visite_3d a:hover {
  color: var(--bloc-titre);
}

.visite_3d .weddingwireWidgetVideo3dTour {
  margin-bottom: .9rem;
}

/* Les cartes d'avis posées sur le fond clair des blocs : même filet et
   même arrondi que les autres cartes. */
.bloc .avis_carte {
  border-color: var(--bloc-filet);
  border-radius: 14px;
}

/* Le catalogue passe au fond clair des blocs : le crème de
   .catalog_section (catalog.css) ne s'applique plus. */
.bloc.catalog_section {
  background-color: var(--bloc-clair);
}

/* Le formulaire de contact des pages Tarifs et Disponibilités
   (contact-form.php), posé sur le foin : sa section perd son fond gris
   et sa grande marge, la carte blanche reste. */
.bloc_contact .contact_section {
  padding: 0;
  background: transparent;
}

/* La carte du formulaire, arrondie et ombrée comme les encadrés des
   tarifs : à angles droits et sans ombre, elle se perdait sur le fond
   (Hervé, 29/10/2026). */
.bloc_contact .contact_form {
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(26, 26, 26, .10);
}

/* --- Les tarifs (Hervé, 29/10/2026) --------------------------------

   Chaque rubrique garde son encadré blanc (.service-block4, style.css),
   une section par rubrique, fonds clair et foin en alternance. Seul
   ajustement : le filet entre deux lignes de prix, presque blanc dans
   tarifs.css, est celui des cartes des blocs. */
.tarif_section .tarif_row {
  border-bottom-color: var(--bloc-filet);
}

/* L'encadré lui-même : son arrondi de 5 px se voyait à peine (Hervé,
   29/10/2026). Celui des cartes du formulaire, et l'ombre douce. */
.tarif_section .service-block4 {
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(26, 26, 26, .10);
}

/* --- La page d'accueil (Hervé, 29/10/2026) --------------------------- */

/* Les titres des cartes mènent à leur page : noir doux comme les
   autres titres, le trait turquoise foncé au survol seulement. */
main .compris h4 a:not(.btn) {
  color: var(--bloc-titre);
  text-decoration: none;
  border-bottom: 1px solid var(--bloc-filet);
}

main .compris h4 a:not(.btn):hover,
main .compris h4 a:not(.btn):focus-visible {
  color: var(--bloc-titre);
  border-bottom-color: var(--turquoise-fonce);
}

/* Les grands titres liés (la salle, les hébergements, le parc). */
main .big_title a {
  color: inherit;
  text-decoration: none;
}

main .big_title a:hover {
  color: var(--turquoise-fonce);
}

/* Les questions : l'accordéon de Bootstrap en cartes arrondies, comme
   les autres cartes des blocs. */
.questions {
  max-width: 860px;
  margin: 2.4rem auto 0;
}

.questions .accordion-item {
  margin-bottom: 10px;
  border: 1px solid var(--bloc-filet);
  border-radius: 14px;
  overflow: hidden;
}

.questions .accordion-button {
  font-weight: 400;
  color: var(--bloc-titre);
  background-color: var(--blanc);
  box-shadow: none;
}

.questions .accordion-button:not(.collapsed) {
  color: var(--bloc-titre);
  background-color: var(--blanc);
  border-bottom: 1px solid var(--bloc-filet);
}

.questions .accordion-body p:last-child {
  margin-bottom: 0;
}

/* Autour du domaine : des liens en pilules, sur trois colonnes. */
.alentours {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 960px;
  margin: 2.4rem auto 0;
  padding: 0;
  list-style: none;
}

main .alentours a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--bloc-filet);
  background: var(--blanc);
  color: var(--bloc-titre);
  text-decoration: none;
}

main .alentours a:hover,
main .alentours a:focus-visible {
  border-color: var(--turquoise-fonce);
  color: var(--bloc-titre);
}

@media (max-width: 991.98px) {
  .alentours {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .alentours {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Le bouton sous les avis, centré. */
.bloc .actions.justify-content-center {
  justify-content: center;
}