/*
 * Le socle commun à toutes les pages : texte, titres, liens, boutons,
 * en-tête, titre de page, pied de page, menu mobile.
 */

body {
  font-family: var(--soleil-texte);
  font-size: 17px;
  line-height: 1.6;
  background: #ffffff;
  color: var(--soleil-encre);
}

h1, h2, h3,
.card-title,
.section-heading h2 {
  font-family: var(--soleil-titre);
  font-weight: 600;
  color: var(--soleil-marine);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Où la ligne se coupe. Un titre se répartit en lignes égales au lieu de
   laisser un mot seul en bas (« S'inscrire, en trois / temps ») ; un
   paragraphe fait remonter un mot sur sa dernière ligne quand il y resterait
   seul. Un navigateur qui ne connaît pas ces règles coupe comme avant. */
h1, h2, h3, h4,
.card-title,
figcaption { text-wrap: balance; }
p, li, dd, dt, blockquote, td, th, label, small { text-wrap: pretty; }

/* Un mot composé ne se coupe pas à son trait d'union (inc/typographie.php).
   `display: contents` : l'enveloppe ne fait pas de boîte. Dans un lien ou un
   bouton en flex, elle serait devenue un élément à part, écarté du reste du
   texte (« Bien-être     aquatique ») ; ainsi le texte reste d'un seul
   tenant, et garde l'interdiction de couper.

   `!important`, ET C'EST LE SEUL SENS DE CETTE CLASSE : l'enveloppe est posée
   après coup sur n'importe quel texte, donc dans des blocs dont le CSS vise
   « tout span du bloc ». `.site-footer .footer-adresse span { display: block }`
   la mettait à la ligne (« 13610 Le » / « Puy-Sainte-Réparade », sur toutes
   les pages), `.boutique-achat__points span` la passait en gris sous son
   titre. Elle ne doit rien changer à l'affichage : ni boîte, ni couleur, ni
   police — tout vient du parent. */
.insecable-mot {
  display: contents !important;
  white-space: nowrap;
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

a { color: #0a6fb2; }
a:hover { color: var(--soleil-marine); }

/* Une ancre arrive SOUS l'en-tête collant, pas dessous : sans cette marge, le
   titre visé (une activité, une question) finissait caché derrière lui. */
[id] { scroll-margin-top: var(--cnpr-decalage-haut, 110px); }

/* Lu par un lecteur d'écran, invisible à l'œil (la classe de WordPress). */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--soleil-jaune-fonce);
  outline-offset: 3px;
}

/* --- Boutons --------------------------------------------------------------
   Le jaune = agir. Le contour marine = s'informer. Formes de galet (999px),
   la seule forme arrondie franche du site avec l'astre. */
.btn {
  border-radius: 999px;
  padding: 13px 22px;
  font-family: var(--soleil-texte);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn:hover { transform: none; }
.btn-primary,
.btn-soleil {
  background: var(--soleil-jaune);
  color: var(--soleil-marine);
  border: 2px solid var(--soleil-jaune);
  box-shadow: none;
}
.btn-primary:hover,
.btn-soleil:hover {
  background: var(--soleil-jaune-fonce);
  border-color: var(--soleil-jaune-fonce);
  color: var(--soleil-marine);
}
.btn-secondary {
  background: transparent;
  color: var(--soleil-marine);
  border: 2px solid var(--soleil-marine);
}
.btn-secondary:hover {
  background: var(--soleil-marine);
  color: #ffffff;
}

/* --- En-tête ------------------------------------------------------------- */
header.site-header {
  /* Opaque : à .96 le texte de la page transparaissait sous le menu collant. */
  background: #ffffff;
  border-bottom: 1px solid var(--soleil-eau-2);
  padding: 4px 0;
}
.brand { gap: 10px; }
.brand-logo {
  width: 48px;
  height: 46px;
  padding: 0;
  border-radius: 0;
  background: none;
}
.brand-text {
  font-family: var(--soleil-titre);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--soleil-marine);
  line-height: 1.1;
}
.brand-text small {
  display: block;
  font-family: var(--soleil-texte);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--soleil-gris);
}
nav.primary-nav a {
  font-size: 15px;
  font-weight: 600;
  color: var(--soleil-encre);
  border-radius: 999px;
  padding: 9px 13px;
}
nav.primary-nav a:hover,
nav.primary-nav .current-menu-item > a,
nav.primary-nav .current-menu-ancestor > a {
  background: var(--soleil-eau);
  color: var(--soleil-marine);
}
nav.primary-nav .sub-menu {
  border-radius: 16px;
  border-color: var(--soleil-eau-2);
  box-shadow: 0 14px 30px rgba(22, 40, 79, .10);
}
nav.primary-nav .sub-menu a { border-radius: 10px; font-weight: 500; }
nav.primary-nav .sub-menu a:hover { background: var(--soleil-eau); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-actions .btn { padding: 10px 18px; font-size: 15px; }
/* « S'inscrire » ne quitte l'en-tête que lorsque le bouton Menu le remplace
   (860 px) : il se retrouve alors en tête du menu ouvert. Entre les deux, on
   resserre la navigation plutôt que de perdre l'action principale. */
@media (max-width: 1080px) and (min-width: 861px) {
  nav.primary-nav ul { gap: 0; }
  nav.primary-nav a { padding: 9px 9px; font-size: 14.5px; }
  .nav-actions .btn { padding: 9px 14px; }
}
@media (max-width: 860px) {
  .nav-actions .btn-inscrire { display: none; }
}
/* L'action principale en tête du menu ouvert : la règle générique des liens
   du menu (fond neutre, texte encre) ne doit pas l'éteindre. */
.mobile-menu__inscrire { display: none; }
@media (max-width: 860px) {
  .mobile-menu a.mobile-menu__inscrire {
    display: flex;
    justify-content: center;
    margin: 0 0 8px;
    padding: 14px 18px;
    border-radius: 999px;
    background: var(--soleil-jaune);
    color: var(--soleil-marine);
  }
}
.menu-toggle {
  border-radius: 999px;
  border: 2px solid var(--soleil-marine);
  color: var(--soleil-marine);
  font-weight: 700;
  padding: 8px 16px;
}

/* --- Pages intérieures ----------------------------------------------------
   Le titre de page se pose sur un aplat d'eau claire, fermé en bas par la
   ligne de bouées. La carte blanche qui suit n'a plus d'ombre. */
.page-standard,
.calendar-page { padding-top: 0; }
.calendar-hero {
  position: relative;
  margin: 28px 0 28px;
  padding: 40px 44px 46px;
  border-radius: 28px;
  background: var(--soleil-eau);
  overflow: hidden;
}
.calendar-hero h1 {
  margin: 0;
  font-size: clamp(30px, 4.2vw, 48px);
  max-width: 20ch;
}
.calendar-hero .lead {
  margin: 14px 0 0;
  max-width: 60ch;
  font-size: 19px;
  color: var(--soleil-gris);
}
.calendar-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background: var(--bouees);
}
/* Avec une photo : le texte à gauche, la photo à droite jusqu'aux bords de
   l'aplat, et la ligne de bouées qui passe dessous comme le bord du bassin. */
.calendar-hero--photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  gap: 40px;
  padding: 0;
}
.calendar-hero__texte { align-self: center; padding: 40px 0 46px 44px; }
.calendar-hero__photo { position: relative; min-height: 280px; }
.calendar-hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.calendar-hero--photo::after { z-index: 1; }
.calendar-hero__credit {
  position: absolute;
  right: 12px;
  bottom: 18px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  color: #ffffff;
  background: rgba(0, 0, 0, .45);
}

.card {
  border: 1px solid var(--soleil-eau-2);
  border-radius: 24px;
  box-shadow: none;
}
.page-content h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  margin-top: 1.6em;
}
.page-content h3 { font-size: 20px; }


.bouees {
  height: 10px;
  background: var(--bouees);
  border: 0;
  margin: 0;
}

/* --- Pied de page -------------------------------------------------------- */
/* footer.site-footer : style.css pose déjà ce sélecteur (0,1,1), une seule
   classe ici perdrait le fond. */
footer.site-footer {
  margin-top: 80px;
  padding: 56px 0 30px;
  background: var(--soleil-marine);
  color: #dbe7ff;
  border-top: 0;
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
  background: var(--bouees);
}
.site-footer strong { color: #ffffff; font-family: var(--soleil-titre); font-weight: 600; font-size: 15px; }
.site-footer a { color: #ffffff; }
.site-footer .footer-links a { color: #dbe7ff; }
.site-footer .footer-adresse {
  margin: 12px 0 0;
  font-style: normal;
  line-height: 1.55;
  color: #b9cbf0;
}
.site-footer .footer-adresse span { display: block; }
.site-footer .footer-joindre { list-style: none; margin: 10px 0 0; padding: 0; line-height: 1.8; }
.site-footer .footer-joindre a { font-weight: 600; text-decoration: none; }
.site-footer .footer-joindre a:hover { color: var(--soleil-jaune); }
.site-footer .footer-links a:hover { color: var(--soleil-jaune); }
.site-footer .pill {
  background: none;
  padding: 0;
  font-family: var(--soleil-titre);
  font-size: 20px;
  color: #ffffff;
}
.site-footer p,
.site-footer .layout[style] { color: #b9cbf0 !important; }
.site-footer .social a {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #ffffff;
  border-radius: 999px;
}
.site-footer .social a:hover { background: rgba(255, 255, 255, .16); }
.site-footer .social svg { fill: currentColor; }


@media (max-width: 860px) {
  .calendar-hero { padding: 28px 24px 34px; border-radius: 22px; }
  .calendar-hero--photo { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; }
  .calendar-hero__texte { padding: 28px 24px 24px; }
  .calendar-hero__photo { min-height: 0; aspect-ratio: 16 / 9; }
}

/* Les boutons de l'éditeur de blocs (« S'inscrire en ligne » sur la page des
   tarifs) parlent la même langue que ceux du thème. */
.page-content .wp-block-button__link {
  border-radius: 999px;
  padding: 13px 24px;
  background: var(--soleil-jaune);
  color: var(--soleil-marine);
  font-weight: 700;
}
.page-content .wp-block-button__link:hover { background: var(--soleil-jaune-fonce); color: var(--soleil-marine); }
.page-content h4 { font-family: var(--soleil-titre); font-size: 17px; color: var(--soleil-marine); }

/* =========================================================================
   Menu mobile fermé : il attend hors écran, à droite. Son ombre portée,
   elle, débordait dans la page et posait une bande grise sur le bord droit
   de tous les écrans — le contenu paraissait décentré. Fermé, il n'a ni
   ombre ni présence (visibility : ses liens ne se tabulent plus non plus).
   ========================================================================= */
@media (max-width: 1024px) {
  body .mobile-menu:not(.open) {
    box-shadow: none;
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  body .mobile-menu.open { visibility: visible; }
}