/*
Theme Name: Piment Vanille
Theme URI: https://pimentvanille.com
Author: Piment Vanille
Description: Thème bloc sur mesure pour Piment Vanille, villas d'hôtes à Sainte-Marie (Madagascar). Toutes les pages se modifient dans l'éditeur de blocs.
Version: 1.0.3
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: piment-vanille
Tags: block-theme, full-site-editing, one-column
*/

/* Registre relevé sur pimentvanille.com : Josefin Sans maigre + Great Vibes
   pour la marque, fond blanc pur, bandes photo bord à bord, angles droits,
   tout centré. Les classes des composants sont posées sur les blocs
   (className) : chaque règle qui surcharge un bloc core est plus spécifique
   que lui, car le CSS des blocs est imprimé après cette feuille. */

:root {
  --blanc: #ffffff;
  --encre: #000000;
  --titre: #333333;
  --gris: #666666;
  --piment: #ef3038;
  --vanille: #57b61a;
  --menu: #23261d;
  --burger: #7ebec5;
  --lien-credit: #2ea3f2;

  --sans: "Josefin Sans", Helvetica, Arial, sans-serif;
  --script: "Great Vibes", cursive;

  --largeur: min(80%, 1080px);
  --pad-section: 54px;   /* rythme vertical relevé sur la référence (≥ 1350 px) */
  --pad-rangee: 27px;
  --corps: 19px;
  --interligne: 1.25;
}

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

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

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--corps);
  line-height: var(--interligne);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; } /* height:auto : sinon l'attribut height des blocs image l'emporte */
figure { margin: 0; }
h1, h2, h3, p { margin: 0; }

/* Espacement automatique de Gutenberg : coupé à la source (theme.json, blockGap 0px)
   et, en filet de sécurité, à spécificité nulle — jamais .wp-block-group > *. */
:where(.wp-block-group) > :where(*),
:where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image { margin: 0; }

/* Les blocs de mise en page imposent margin-block (0,1,0) : l'espacement
   entre paragraphes doit être au moins aussi spécifique. */
:is(.wp-site-blocks, .editor-styles-wrapper) p + p { margin-top: 19px; }

h1, h2, h3 { hyphens: none; text-wrap: balance; }

.enveloppe {
  width: var(--largeur);
  margin-inline: auto;
}

/* ───────── En-tête (part « header » : logo + core/navigation) ───────── */

.entete-site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blanc);
}
.admin-bar .entete-site { top: 32px; }
@media (max-width: 782px) { .admin-bar .entete-site { top: 46px; } }
@media (max-width: 600px) { .admin-bar .entete-site { top: 0; } }

.entete { padding: 21px 0; background: var(--blanc); }

.entete-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  color: var(--piment);
  font-family: var(--script);
  font-size: 30px;
  line-height: 1;
  padding-bottom: 10px;
  white-space: nowrap;
}
.logo a { color: var(--piment); text-decoration: none; }
.logo em { font-style: normal; color: var(--vanille); }

.wp-block-navigation.menu { font-family: var(--sans); }
.wp-block-navigation.menu .wp-block-navigation__container {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 22px;
}
.wp-block-navigation.menu .wp-block-navigation-item__content {
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: var(--menu);
  text-decoration: none;
  padding: 4px 0;
  transition: color 300ms ease;
}
.wp-block-navigation.menu .current-menu-item > .wp-block-navigation-item__content { color: var(--vanille); }
.wp-block-navigation.menu .wp-block-navigation-item__content:hover { color: var(--piment); }

/* bouton burger : couleur de la référence */
.wp-block-navigation.menu .wp-block-navigation__responsive-container-open,
.wp-block-navigation.menu .wp-block-navigation__responsive-container-close { color: var(--burger); }
.wp-block-navigation.menu .wp-block-navigation__responsive-container-open svg { width: 32px; height: 32px; }

/* panneau mobile : le CSS du bloc est imprimé après cette feuille et pose
   ses propres couleurs — seul endroit où !important est justifié */
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--blanc) !important;
  color: var(--menu) !important;
  padding: 24px 10% 40px;
}
.wp-block-navigation.menu .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 64px; }
.wp-block-navigation.menu .is-menu-open .wp-block-navigation__container {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
}
.wp-block-navigation.menu .is-menu-open .wp-block-navigation-item { width: 100%; }
.wp-block-navigation.menu .is-menu-open .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  padding: 16px 0;
  font-size: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.wp-block-navigation.menu .is-menu-open .wp-block-navigation__responsive-container-close svg { width: 32px; height: 32px; }

/* comme la référence : burger dès 980 px (le bloc ne bascule qu'à 600 px) */
@media (max-width: 980px) {
  .wp-block-navigation.menu .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* ───────── Hero ───────── */

/* Les quatre « couvertures » sont des blocs core/cover : on neutralise
   leur marge intérieure et leur hauteur par défaut (430 px). */
.wp-block-cover.hero,
.wp-block-cover.bande-photo,
.wp-block-cover.deplacements,
.wp-block-cover.bandeau-page { padding: 0; min-height: 0; color: var(--blanc); }
body .wp-block-cover:is(.hero, .bande-photo, .deplacements, .bandeau-page) > .wp-block-cover__inner-container { width: 100%; }

.wp-block-cover.hero {
  min-height: 100vh;
  min-height: 100svh;
  align-items: flex-start;
}

.hero-bandeau {
  background: rgba(0, 0, 0, 0.81);
  padding: 60px 0;
  color: var(--blanc);
  text-align: center;
}

.hero-titre {
  font-family: var(--script);
  font-weight: 400;
  font-size: 61px;
  line-height: 1;
  padding-bottom: 10px;
}

.hero-sous-titre {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 34px;
  line-height: 1.2;
}

/* ───────── Titres de section ───────── */

.titre-section,
.wp-block-cover .deplacements-boite .titre-section {
  font-family: var(--sans);
  font-weight: 300;
  font-style: italic;
  font-size: 32px;
  line-height: 1.4;
  color: var(--titre);
  padding-bottom: 10px;
}

/* ───────── Intro ───────── */

.intro {
  padding: calc(var(--pad-section) + var(--pad-rangee)) 0;
  text-align: center;
}

/* ───────── Bande photo « Nos plus » ───────── */

.wp-block-cover.bande-photo {
  min-height: 629px;
  align-items: center;
}

.bande-photo-bandeau {
  width: 100%;
  color: var(--blanc);
  background: rgba(0, 0, 0, 0.58);
  padding: 18px 0 17px;
  text-align: center;
}

.bande-photo-titre {
  font-weight: 300;
  font-style: italic;
  font-size: 32px;
  line-height: 1;
  color: var(--blanc);
}

/* ───────── Arrivée ───────── */

.arrivee {
  padding: var(--pad-section) 0;
  text-align: center;
}

.arrivee-texte {
  font-style: italic;
  font-size: 32px;
  line-height: 1.5;
  color: var(--gris);
}

/* ───────── Atouts : texte + photo à fond perdu ───────── */

.wp-block-group.atouts {
  display: grid;
  grid-template-columns: 2fr 3fr;
}

.atouts-texte {
  padding: 100px 70px;
  text-align: center;
  align-self: center;
}

.wp-block-image.atouts-photo { position: relative; min-height: 100%; }
.wp-block-image.atouts-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ───────── Localisation : carte à fond perdu + texte ───────── */

.wp-block-group.localisation {
  padding: 100px 0;
  display: grid;
  grid-template-columns: 3fr 2fr;
  align-items: start;
}

.localisation-carte iframe,
.localisation-carte .carte-google {
  display: block;
  width: 100%;
  height: 540px;
  border: 0;
}

.localisation-texte {
  padding: 140px 70px;
  text-align: center;
}

.localisation-titre {
  font-weight: 500;
  font-size: 23px;
  line-height: 1;
  color: var(--titre);
  padding-bottom: 10px;
}

.localisation-sous-titre {
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  color: var(--titre);
  padding-bottom: 10px;
}

/* ───────── Déplacements : photo + boîte blanche ───────── */

.wp-block-cover.deplacements { padding: 250px 0; }

.deplacements-boite {
  background: rgba(255, 255, 255, 0.92);
  color: var(--encre);
  padding: 61px 0;
  text-align: center;
}

/* ───────── Pied de page ───────── */

.pied {
  border-top: 1px solid rgba(68, 68, 68, 0.21);
  padding: var(--pad-rangee) 0;
  text-align: center;
}

.pied-texte {
  width: var(--largeur);
  margin-inline: auto;
  font-size: 18px;
  line-height: 24px;
  color: var(--gris);
}
.pied-texte a { color: var(--lien-credit); text-decoration: none; white-space: nowrap; }
.pied-texte a:hover { text-decoration: underline; }

/* ═════════════ Pages intérieures ═════════════ */

/* ───────── Bandeau de titre (photo + voile 25 %) ───────── */

.wp-block-cover.bandeau-page { padding: 160px 0; }
.bandeau-page .enveloppe { color: var(--blanc); text-align: center; }

.bandeau-page-titre {
  font-weight: 500;
  font-size: 43px;
  line-height: 1;
  padding-bottom: 10px;
}

.bandeau-page-signature {
  font-family: var(--script);
  font-size: 52px;
  line-height: 23.8px;
  padding-top: 15px;
}

/* ───────── Titres des pages intérieures (droits, pas italiques) ───────── */

.titre-page {
  font-weight: 300;
  font-size: 43px;
  line-height: 1.4;
  color: var(--titre);
  padding-bottom: 10px;
}
.titre-page.titre-serre { line-height: 1; }

.sous-titre-page {
  font-weight: 300;
  font-size: 30px;
  line-height: 1;
  color: var(--titre);
  padding-bottom: 10px;
}
.sous-titre-page.sous-titre-grand { font-size: 34px; }

/* ───────── Rangées : texte à 80 %, photos à 90 % ───────── */

.villa,
.activites,
.decouverte,
.reservation { padding-top: var(--pad-section); }

.villa-texte,
.decouverte-intro,
.texte-centre,
.activites > .enveloppe {
  padding: var(--pad-rangee) 0;
  text-align: center;
}

.galerie,
.photo-large,
.duo,
.base-nautique,
.activites-liste,
.reservation {
  width: 90%;
  margin-inline: auto;
}

/* galerie (core/gallery, 4 colonnes, espacement 0) : quatre photos portrait bord à bord */
.wp-block-gallery.galerie {
  margin: 0 auto;
  padding: var(--pad-rangee) 0;
  gap: 0;
}
.wp-block-gallery.has-nested-images.galerie figure.wp-block-image.galerie-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 516;
  object-fit: cover;
}

/* grande photo panoramique */
.wp-block-image.photo-large { margin: 25px auto 0; }
.wp-block-image.photo-large img {
  width: 100%;
  height: 501px;
  object-fit: cover;
}

/* ───────── Que voir : photos et textes par paires ───────── */

.duo { display: grid; grid-template-columns: 1fr 1fr; }
.duo-photos { margin-top: 25px; }
.wp-block-image.duo-photo img { width: 100%; height: 500px; object-fit: cover; }

.duo-textes { padding: var(--pad-rangee) 0; }
.duo-texte {
  width: 90%;
  margin-inline: auto;
  padding: 34px 0 52px;
  text-align: center;
}
.wp-block-image.duo-image img { width: 100%; height: auto; }

/* ───────── Que faire : base nautique + liste d'activités ───────── */

.wp-block-group.base-nautique {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: var(--pad-rangee) 0;
}
.wp-block-image.base-nautique-photo img { width: 100%; height: auto; }
.base-nautique-texte {
  width: 90%;
  margin-inline: auto;
  text-align: center;
}

.wp-block-group.activites-liste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  padding: 100px 0 var(--pad-rangee);
}
.activites-texte p { text-align: justify; }
.wp-block-image.activites-photo { margin: 0 0 0 92px; }
.wp-block-image.activites-photo img { width: 100%; height: auto; }

/* ───────── Réservation : deux photos + formulaire ───────── */

.wp-block-group.reservation {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  align-items: start;
  padding-bottom: var(--pad-rangee);
}
.wp-block-group.reservation > * { margin-top: var(--pad-rangee); }

.wp-block-image.reservation-photo { padding-right: 16px; }
.wp-block-image.reservation-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 516;
  object-fit: cover;
}

.reservation-contact {
  padding-left: 16px;
  font-size: 14px;
  color: var(--gris);
}

.reservation-titre {
  text-wrap: wrap;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  color: var(--titre);
  padding-bottom: 10px;
}

/* formulaire Contact Form 7 : libellés visibles, champs aérés, bouton plein.
   Angles droits et palette du site conservés. */
.reservation-contact .wpcf7-form,
.formulaire {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 16px;
  margin-top: 18px;
}

.formulaire-groupe {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
p.formulaire-groupe + p.formulaire-groupe { margin-top: 0; }
.formulaire-groupe-large { grid-column: 1 / -1; }

.formulaire-label {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--titre);
}

.formulaire-champ {
  display: block;
  width: 100%;
  margin: 0;
  padding: 14px 16px 12px;
  border: 1px solid #dcdcdc;
  border-radius: 0;
  background: #fafafa;
  color: var(--encre);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 250ms ease, background-color 250ms ease, box-shadow 250ms ease;
}
.formulaire-champ::placeholder { color: #a3a3a3; opacity: 1; }
.formulaire-champ:hover { border-color: #b9b9b9; }
.formulaire-champ:focus {
  outline: none;
  border-color: var(--menu);
  background: var(--blanc);
  box-shadow: 0 0 0 3px rgba(87, 182, 26, 0.2);
}
.formulaire-champ:user-invalid,
.formulaire-champ.wpcf7-not-valid { border-color: var(--piment); }

.formulaire-message { min-height: 168px; resize: vertical; }

.formulaire-pied {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 6px 0 0;
}
p.formulaire-groupe + p.formulaire-pied { margin-top: 6px; }

.formulaire-mention {
  font-weight: 300;
  font-size: 14px;
  color: var(--gris);
}

.formulaire-envoyer {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 34px 14px;
  border: 0;
  border-radius: 0;
  background: var(--menu);
  color: var(--blanc);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background-color 300ms ease;
}
/* flèche dessinée en CSS (aucun glyphe à charger) */
.formulaire-envoyer::after {
  content: "";
  width: 18px;
  height: 12px;
  margin-top: -2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M0 6h16.5M11.5 1l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M0 6h16.5M11.5 1l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 300ms ease;
}
.formulaire-envoyer:hover { background: var(--piment); }
.formulaire-envoyer:hover::after { transform: translateX(4px); }
.formulaire-envoyer:focus-visible { outline: 2px solid var(--vanille); outline-offset: 3px; }

/* CF7 rend un <input type="submit"> : la flèche est portée par l'enveloppe */
.formulaire-envoyer-cadre { position: relative; display: inline-flex; }
.formulaire-envoyer-cadre .formulaire-envoyer { padding-right: 66px; }
.formulaire-envoyer-cadre::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 34px;
  width: 18px;
  height: 12px;
  margin-top: -7px;
  background: var(--blanc);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M0 6h16.5M11.5 1l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M0 6h16.5M11.5 1l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
  transition: transform 300ms ease;
}
.formulaire-envoyer-cadre:hover::after { transform: translateX(4px); }
input.formulaire-envoyer::after { content: none; }
.formulaire-envoyer-cadre .wpcf7-spinner { display: none; }
.wpcf7-form.submitting .formulaire-envoyer { opacity: 0.6; cursor: progress; }

.reservation-contact .hidden-fields-container { display: none; }
.reservation-contact .wpcf7-form-control-wrap { display: block; }
.reservation-contact .wpcf7-not-valid-tip { margin-top: 6px; font-size: 14px; color: var(--piment); }
.reservation-contact .wpcf7 form .wpcf7-response-output {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 16px 12px;
  border: 1px solid var(--piment);
  font-size: 15px;
  color: var(--encre);
}
.reservation-contact .wpcf7 form.sent .wpcf7-response-output { border-color: var(--vanille); }
.reservation-contact .wpcf7 form.init .wpcf7-response-output { display: none; }

/* ───────── Survol des photos : zoom lent dans le cadre ───────── */

.galerie-photo,
.photo-large,
.duo-photo,
.duo-image,
.base-nautique-photo,
.activites-photo,
.reservation-photo { overflow: hidden; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .galerie-photo img,
  .duo-photo img,
  .duo-image img,
  .base-nautique-photo img,
  .activites-photo img,
  .reservation-photo img,
  .avec-visionneuse img {
    transition: transform 900ms cubic-bezier(0.2, 0.6, 0.2, 1), filter 900ms ease;
  }
  .galerie-photo:hover img,
  .duo-photo:hover img,
  .duo-image:hover img,
  .base-nautique-photo:hover img,
  .activites-photo:hover img,
  .reservation-photo:hover img,
  .avec-visionneuse a:hover img {
    transform: scale(1.045);
    filter: saturate(1.08);
  }
}

/* ───────── Vignettes qui ouvrent la visionneuse ───────── */

.galerie-lien,
.wp-block-image .galerie-lien {
  display: block;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}
.wp-block-image.photo-large .galerie-lien img { display: block; }

/* voile + pictogramme « agrandir » au survol */
.galerie-lien::before,
.galerie-lien::after {
  content: "";
  position: absolute;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease, transform 400ms ease;
}
.galerie-lien::before { inset: 0; background: rgba(0, 0, 0, 0.18); }
.galerie-lien::after {
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  background: var(--blanc);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Ccircle cx='23' cy='23' r='22'/%3E%3Cpath d='M23 15v16M15 23h16'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Ccircle cx='23' cy='23' r='22'/%3E%3Cpath d='M23 15v16M15 23h16'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scale(0.85);
}
.galerie-lien:hover::before,
.galerie-lien:focus-visible::before,
.galerie-lien:hover::after,
.galerie-lien:focus-visible::after { opacity: 1; }
.galerie-lien:hover::after,
.galerie-lien:focus-visible::after { transform: scale(1); }
.galerie-lien:focus-visible { outline: 2px solid var(--vanille); outline-offset: -2px; }

/* la galerie montre quatre vignettes ; la visionneuse les montre toutes */
.wp-block-gallery.galerie.avec-visionneuse figure.galerie-photo:nth-child(n + 5) { display: none; }
.galerie-photo { position: relative; }
.galerie-photo[data-plus]::after {
  content: attr(data-plus);
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 9px 12px 7px;
  background: rgba(0, 0, 0, 0.6);
  color: var(--blanc);
  font-weight: 300;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* ───────── Visionneuse (lightbox) ───────── */

.visionneuse {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(12, 12, 12, 0.97);
  color: var(--blanc);
  font-family: var(--sans);
  overflow: hidden;
  opacity: 0;
  transition: opacity 300ms ease;
}
.visionneuse[open] { display: grid; grid-template-rows: auto 1fr auto; }
.visionneuse.est-visible { opacity: 1; }
.visionneuse::backdrop { background: transparent; }

.visionneuse-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
}
.visionneuse-titre {
  font-weight: 300;
  font-size: 18px;
  letter-spacing: 0.04em;
}
.visionneuse-compteur { color: rgba(255, 255, 255, 0.65); margin-left: 12px; }

.visionneuse-scene {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 88px;
  touch-action: pan-y;
}
.visionneuse-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  transition: opacity 250ms ease;
}
.visionneuse-image.est-en-transition { opacity: 0; }

.visionneuse-legende {
  padding: 16px 24px 24px;
  text-align: center;
  font-weight: 300;
  font-style: italic;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  min-height: 1.4em;
}

.visionneuse-bouton {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0;
  background: transparent;
  color: var(--blanc);
  cursor: pointer;
  transition: background-color 250ms ease, border-color 250ms ease;
}
.visionneuse-bouton:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--blanc); }
.visionneuse-bouton:focus-visible { outline: 2px solid var(--vanille); outline-offset: 2px; }
.visionneuse-bouton::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--icone) center / contain no-repeat;
  mask: var(--icone) center / contain no-repeat;
}
.visionneuse-fermer { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M3 3l14 14M17 3L3 17'/%3E%3C/svg%3E"); }
.visionneuse-precedent { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M13 2L5 10l8 8'/%3E%3C/svg%3E"); }
.visionneuse-suivant { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M7 2l8 8-8 8'/%3E%3C/svg%3E"); }

.visionneuse-precedent,
.visionneuse-suivant {
  position: absolute;
  top: 50%;
  margin-top: -24px;
}
.visionneuse-precedent { left: 24px; }
.visionneuse-suivant { right: 24px; }
.visionneuse.est-seule .visionneuse-precedent,
.visionneuse.est-seule .visionneuse-suivant,
.visionneuse.est-seule .visionneuse-compteur { display: none; }

body.visionneuse-ouverte { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .visionneuse,
  .visionneuse-image { transition: none; }
}

/* ───────── Écrans moyens : rythme proportionnel ───────── */

@media (max-width: 1349px) {
  :root { --pad-section: 4vw; --pad-rangee: 2vw; }
  .wp-block-cover.bande-photo { min-height: 588px; }
}

/* ───────── Tablette ───────── */

@media (max-width: 980px) {
  .wp-block-group.atouts,
  .wp-block-group.localisation { grid-template-columns: 1fr; }

  .wp-block-image.atouts-photo { min-height: 0; aspect-ratio: 3 / 2; }

  /* comme sur la référence, pas de parallaxe sur tablette et mobile */
  .bande-photo .wp-block-cover__image-background.has-parallax { background-attachment: scroll; }

  .wp-block-group.localisation { padding: 50px 0; }
  .localisation-texte { padding: 50px 10%; }
  .localisation-carte iframe,
.localisation-carte .carte-google { height: 420px; }

  .atouts-texte { padding: 60px 10%; }

  .wp-block-cover.deplacements { padding: 120px 0; }

  .wp-block-cover.bandeau-page { padding: 100px 0; }

  .wp-block-gallery.has-nested-images.galerie figure.wp-block-image.galerie-photo { width: 50% !important; }
  .wp-block-image.photo-large img { height: 360px; }

  .wp-block-group.duo,
  .wp-block-group.base-nautique,
  .wp-block-group.activites-liste { grid-template-columns: 1fr; }
  .wp-block-image.duo-photo img { height: 360px; }
  .base-nautique-texte { padding: 40px 0 0; }
  .wp-block-group.activites-liste { padding-top: 50px; row-gap: 30px; }
  .wp-block-image.activites-photo { margin-left: 0; }

  .wp-block-group.reservation { grid-template-columns: 1fr 1fr; }
  .wp-block-image.reservation-photo:nth-of-type(1) { padding-right: 8px; }
  .wp-block-image.reservation-photo:nth-of-type(2) { padding-right: 0; padding-left: 8px; }
  .wp-block-group.reservation { padding-bottom: 56px; }
  .wp-block-group.reservation > .wp-block-group.reservation-contact { grid-column: 1 / -1; padding-left: 0; margin-top: 36px; }
}

/* ───────── Mobile ───────── */

@media (max-width: 767px) {
  :root { --corps: 17px; }

  .hero-titre { font-size: 52px; }
  .hero-sous-titre { font-size: 28px; }

  .titre-section,
  .wp-block-cover .deplacements-boite .titre-section,
  .bande-photo-titre { font-size: 27px; }
  .arrivee-texte { font-size: 24px; text-wrap: balance; }
  .arrivee-texte br { display: none; }

  .wp-block-cover.bande-photo { min-height: 380px; }

  .wp-block-cover.deplacements { padding: 80px 0; }
  .deplacements-boite { width: 90%; padding: 40px 24px; }

  .pied-texte { font-size: 16px; }

  .wp-block-cover.bandeau-page { padding: 70px 0; }
  .bandeau-page-titre { font-size: 32px; }
  .bandeau-page-signature { font-size: 42px; line-height: 1.1; padding-top: 6px; }

  .titre-page { font-size: 32px; }
  .sous-titre-page { font-size: 24px; }
  .sous-titre-page.sous-titre-grand { font-size: 26px; }

  .wp-block-image.photo-large img,
  .wp-block-image.duo-photo img { height: 260px; }

  .activites-texte p { text-align: left; }
  .reservation-titre { font-size: 19px; }

  .reservation-contact .wpcf7-form,
  .formulaire { grid-template-columns: 1fr; }
  .formulaire-envoyer,
  .formulaire-envoyer-cadre { width: 100%; justify-content: center; }

  .visionneuse-haut { padding: 12px 16px; }
  .visionneuse-scene { padding: 0; }
  .visionneuse-precedent,
  .visionneuse-suivant {
    top: auto;
    bottom: -64px;
    margin-top: 0;
    background: rgba(10, 10, 10, 0.5);
  }
  .visionneuse-precedent { left: 16px; }
  .visionneuse-suivant { right: 16px; }
  .visionneuse-legende { padding: 16px 80px 24px; font-size: 15px; }
}

/* iOS et écrans tactiles ignorent background-attachment: fixed */
@media (hover: none) {
  .bande-photo .wp-block-cover__image-background.has-parallax { background-attachment: scroll; }
}

/* ───────── Gabarits simples (articles, 404) ───────── */

.page-simple { padding: 100px 0 120px; }
.page-simple .wp-block-post-title a { color: inherit; }
.page-simple .wp-block-post-excerpt { margin-bottom: 40px; }