/*
Theme Name: Saint-Ange
Theme URI: https://www.chateausaintange.com
Author: Château Saint Ange
Description: Thème bloc du Château Saint Ange. Reprend la charte du site historique
  (or #bf9729, Rosarivo en titrage, Open Sans en labeur) sur un balisage
  sémantique propre : aucun code, aucune grille ni aucun visuel du prestataire
  précédent n'est repris — seuls les jetons de style le sont, sur décision du client.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: saint-ange
*/

/* ------------------------------------------------------------------ socle */

:root {
  --sa-header-h: 132px;
  --sa-trait: #e8e4da;
  /* Gouttière latérale des composants pleine largeur, mesurée sur la référence :
     15px en desktop, 10px sous 1024px. */
  --sa-bord: 10px;
}

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.sa-serif { font-family: var(--wp--preset--font-family--titre); }

/* ---------------------------------------------------------------- en-tête */

/* Aucun filet sous l'en-tête, à aucune largeur : la référence n'en a pas — chez
   elle ce trait est porté par la bannière, et seulement quand la page est sans
   photo. Le filet était neutralisé en desktop et oublié en mobile, où il
   repoussait la bannière d'un pixel. */
.sa-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
}

/* Bandeau supérieur : réservation · réseaux · logo · avis · langues */
.sa-header__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.5rem 0.6rem;
  max-width: 1400px;
  margin-inline: auto;
}

.sa-header__left,
.sa-header__right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.sa-header__right { justify-content: flex-end; }

.sa-header__logo img,
.sa-header__logo svg { display: block; width: 260px; height: auto; }

/* « Réservation », sans le numéro — et c'est conforme à la référence.
   Son balisage porte bien `Réservation<span class="show-for-medium"> : 04 94 68
   06 18</span>`, mais sa propre feuille de style se termine par
   `.show-for-medium{display:none!important}` **sans requête média**, doublée d'un
   `@media (max-width:1800px)` au même effet : le numéro n'est rendu à aucune
   largeur. Mesuré à 0x0, et invisible sur capture à 1440 comme à 800.
   Ne pas « corriger » en ajoutant le numéro : ce serait une divergence, pas une
   convergence. Le pied de page l'affiche, lui (parts/footer.html). */
.sa-reservation {
  font-family: var(--wp--preset--font-family--titre);
  font-size: 0.95rem;
  color: var(--wp--preset--color--or);
  text-decoration: none;
  white-space: nowrap;
}
.sa-reservation:hover { color: var(--wp--preset--color--or-fonce); }

/* Réseaux sociaux : anneau d'or fin cerclant un petit glyphe, comme la référence.
   Mesuré chez elle : ancre de 24x20, anneau VISIBLE de 20px, quatre icônes au pas
   de 40px. Son anneau fait partie du tracé de l'icône, qui lui appartient ; le
   nôtre est donc dessiné en CSS et le glyphe redessiné (voir
   `saint_ange_reseaux()`), de sorte qu'aucun visuel du prestataire n'est repris.

   L'anneau est posé en pseudo-élément pour que la boîte de l'ancre reste aux
   24x20 mesurés tandis que le cercle visible fait bien 20x20. Le glyphe, lui, est
   ramené à 11px : les icônes de `core/social-links` employées jusqu'au 07/08/2026
   étaient des aplats de 24px — leur feuille les impose en `1em` avec trois
   classes de spécificité, qui l'emportaient — et débordaient donc de l'anneau,
   donnant quatre pastilles pleines là où la référence montre quatre anneaux. */
.sa-social { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
.sa-social__item { margin: 0; }
.sa-social__lien {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 20px;
  color: var(--wp--preset--color--or);
  text-decoration: none;
  line-height: 1;
  transition: color 0.2s ease;
}
.sa-social__lien::before {
  content: "";
  position: absolute;
  inset: 0 4px 0 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}
.sa-social__lien:hover::before { background: var(--wp--preset--color--or); }
.sa-social__lien:hover { color: #fff; }
/* Le retrait droit de 4px recentre le glyphe sur l'anneau, que l'`inset` de
   celui-ci décale de la même valeur. */
.sa-social__glyphe {
  position: relative;
  width: 11px;
  height: 11px;
  margin-right: 4px;
  fill: currentColor;
}

/* Sélecteur de langue (Polylang).

   `font-size: 0` est mesuré, aux deux largeurs : la boîte de la référence rend
   `font-size: 0px / line-height: 0px`. Ce n'est pas une coquetterie — c'est ainsi
   qu'elle masque les libellés « FR / EN / IT / DE » qui doublent les drapeaux
   dans son balisage. Sans lui, la mesure signale quatre écarts de typographie
   (deux à 1440, deux à 500) sur une boîte qui ne montre pourtant que des images.

   Les 5px de marge haute sont mesurés aussi, et ils comptent : dans un conteneur
   `align-items: center`, la marge entre dans le centrage et décale la boîte de
   2,5px — c'est ce qui place les drapeaux à y=41 et non 39. */
.sa-langs { font-size: 0; }
/* La marge est posée sur le sélecteur descendant parce que la remise à zéro des
   gouttières (`.sa-header__right > *`) l'emporterait sinon sur une règle de
   classe simple, et les drapeaux retomberaient à y=39. */
.sa-header__right > .sa-langs { margin-top: 5px; }
/* Drapeaux jointifs : 4 × 25px = les 100px mesurés, aux deux largeurs. */
.sa-langs ul { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
/* Les quatre drapeaux sont rendus à pleine opacité, comme la référence : le
   demi-ton appliqué aux langues non courantes les faisait paraître désactivées. */
.sa-langs a { display: block; line-height: 0; }
/* Drapeaux : boîte de 25x20 — mesurée, et identique des deux côtés — mais le
   drapeau VISIBLE de la référence n'en fait que 19x14, laissant 6px d'air entre
   deux voisins. Ses PNG portent une marge transparente que ceux de Polylang n'ont
   pas : à taille de boîte égale, les nôtres se touchaient bord à bord et
   paraissaient nettement plus gros.

   On reproduit le retrait par un remplissage de 3px plutôt qu'en reprenant ses
   fichiers : la boîte reste aux 25x20 mesurés, le contenu tombe à 19x14, et
   aucun visuel n'est repris. */
.sa-langs img {
  box-sizing: border-box;
  width: 25px;
  height: 20px;
  padding: 3px;
}

/* Les groupes du thème pilotent leur propre mise en page : on neutralise les
   marges verticales que WordPress applique aux enfants d'un layout « flow ». */
.sa-header__top > *,
.sa-header__left > *,
.sa-header__right > *,
.sa-footer__bar > * { margin-block: 0; }

/* Menus classiques (wp_nav_menu) — voir functions.php pour le choix des
   emplacements plutôt que du bloc Navigation. */
.sa-menu__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sa-menu__list a {
  font-family: var(--wp--preset--font-family--titre);
  color: var(--wp--preset--color--encre);
  text-decoration: none;
  display: block;
}

/* Bandeau de navigation principal */
.sa-header__nav { border-top: 1px solid var(--sa-trait); }
/* Le gabarit intercale 24px de gouttière de bloc entre les enfants d'un groupe.
   La barre repliée et le panneau posent leur géométrie au pixel : il faut la
   remise à zéro à CHAQUE niveau, y compris à l'intérieur de la barre. Sans elle
   le logo héritait de 24px de marge haute, et comme un conteneur
   `align-items: center` centre la boîte AVEC sa marge, il descendait à y=27 au
   lieu des 15px mesurés. */
.sa-header__nav > *,
.sa-barre > *,
.sa-panneau > * { margin-block: 0; }
.sa-nav {
  max-width: 1400px;
  margin-inline: auto;
  padding: 0.4rem 1.5rem;
}
.sa-nav .sa-menu__list { justify-content: center; gap: 0 clamp(0.75rem, 1.8vw, 1.9rem); }
.sa-nav .sa-menu__list > li { position: relative; }
.sa-nav .sa-menu__list > li > a { font-size: 1.05rem; padding: 0.5rem 0; }
.sa-nav .sa-menu__list a:hover,
.sa-nav .current-menu-item > a,
.sa-nav .current-menu-ancestor > a { color: var(--wp--preset--color--or); }

/* Chevron de sous-menu. La référence EN A UN — un triangle CSS de 12x6, bordures
   de 6px, en or, pointant vers le bas.

   Il est posé en `position: absolute`, et c'est tout l'enjeu : il ne compte donc
   pas dans la largeur du lien, qui mesure exactement son texte plus son
   remplissage. C'est ce qui m'avait fait conclure à tort qu'il n'existait pas et
   le supprimer. La place qu'il occupe est réservée autrement : le remplissage du
   lien est ASYMÉTRIQUE, 16px à gauche contre 24px à droite, et le chevron loge
   dans ces 8px de plus.

   La version précédente était en `inline-block`, ce qui ajoutait 14,4px à chaque
   lien parent — assez pour faire passer la rangée sur deux lignes et porter
   l'en-tête à 212px. D'où la suppression, puis ce retour en absolu.

   Dans le panneau replié, c'est le bouton `.sa-deplier` qui joue ce rôle. */
.sa-nav .menu-item-has-children > a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 5px;
  margin-top: -3px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-bottom: 0;
  border-top-color: var(--wp--preset--color--or);
}

/* Sous-menus déroulants. Toutes les valeurs sont mesurées sur la référence, le
   sous-menu forcé ouvert :

     boîte        300x131 à `left: 0` du lien parent, sous lui, 7,5px plus bas
     fond         blanc, bordure 1px #b2b2b2, remplissage 20px
     ombre        deux couches, 50/50/93 à 25% et noir à 30%
     empilement   z-index 1000
     lien         14,4px / 28,8px Rosarivo poids 100, #333, sans remplissage,
                  filet bas 1px #c4c4c4 — y compris sur le dernier

   Le panneau était centré sur le lien (`left: 50%` et translation), large de
   240px, avec 0,4rem de remplissage et la bordure crème du thème : quatre écarts
   visibles d'un coup. */
.sa-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 300px;
  list-style: none;
  margin: 7.5px 0 0;
  padding: 20px;
  background: #fff;
  border: 1px solid #b2b2b2;
  box-shadow: rgba(50, 50, 93, 0.25) 0 6px 12px -2px, rgba(0, 0, 0, 0.3) 0 3px 7px -3px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease;
  z-index: 1000;
}
.sa-nav .sa-menu__list > li:hover > .sub-menu,
.sa-nav .sa-menu__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; }

/* Pointe du panneau, dirigée vers le lien parent : DEUX triangles superposés,
   mesurés à 18x10 et posés à `left: 15px`. Le gris #777 est 1px plus haut que le
   blanc, si bien qu'il ne dépasse que d'un pixel tout autour et dessine le
   contour ; le blanc, par-dessus, masque le filet haut du panneau. C'est la
   pointe de bulle classique, et c'est le dernier détail qui distinguait les deux
   panneaux à l'œil.

   La hauteur de 10px n'est pas décorative : 9px de bordure plus 1px de contenu.
   Un triangle de 9px laisserait un pixel de jour entre sa base et le filet du
   panneau, par lequel le fond de page transparaîtrait. */
.sa-nav .sub-menu::before,
.sa-nav .sub-menu::after {
  content: " ";
  position: absolute;
  left: 15px;
  width: 0;
  height: 1px;
  border: 9px solid transparent;
  border-top: 0;
}
.sa-nav .sub-menu::after  { top: -11px; border-bottom-color: #777; z-index: 1010; }
.sa-nav .sub-menu::before { top: -10px; border-bottom-color: #fff; z-index: 1012; }

.sa-nav .sub-menu li { margin: 0; }
.sa-nav .sub-menu a {
  display: block;
  padding: 0;
  font-size: 14.4px;
  line-height: 28.8px;
  font-weight: 100;
  color: #333;
  text-align: left;
  border-bottom: 1px solid #c4c4c4;
}
/* La référence ne montre pas d'état de survol mesurable ici ; on garde l'or du
   thème, cohérent avec le reste de la navigation. */
.sa-nav .sub-menu a:hover { color: var(--wp--preset--color--or); }

/* Menu « Avis clients » du bandeau supérieur */
.sa-avis-menu .sa-menu__list { gap: 1rem; }
/* La taille est fixée dans le bloc de convergence, en pixels mesurés : ce menu
   est masqué sous 901px, il n'a donc pas besoin d'une taille fluide. */
/* Sans interlettrage : la référence n'en a pas, et celui posé ici compensait la
   police de substitution sur laquelle la mesure portait avant le 07/08/2026. */
.sa-avis-menu .sa-menu__list a {
  text-transform: uppercase;
  white-space: nowrap;
}
.sa-avis-menu .sa-menu__list a:hover { color: var(--wp--preset--color--or); }

/* ------------------------------------------------- en-tête replié (hamburger) */

/* Au-dessus de 1024px la barre repliée n'existe pas, et « Avis clients » est
   rendu par le bandeau supérieur : le double du panneau est donc masqué. La
   géométrie repliée, elle, est dans la requête `max-width: 1023px`. */
.sa-barre { display: none; }
.sa-nav-avis { display: none; }
/* Le script pose un bouton de dépliage sur chaque parent, à toutes les largeurs.
   Il n'a de sens que dans l'accordéon replié : au-dessus de 1024px il restait
   dans le flux et ajoutait une ligne de 21px au premier lien, ce qui portait la
   bande de navigation à 115px et l'en-tête à 212. */
.sa-deplier { display: none; }

@media (max-width: 1023px) {

  /* En-tête replié — toutes les valeurs mesurées sur la référence à 500px :

       en-tête          500x70    (`min-height` : il grandit quand le panneau s'ouvre)
       logo             250x45 à (118,15)
       bande de nav     480x0  à x=10     ← hauteur NULLE, la barre la survole
       drapeaux         100x20 à (390,25)
       bannière         y=70
       panneau ouvert   480x328 à (10,70) — en-tête à 398

     La hauteur nulle de la bande n'est pas un artefact de mesure : chez la
     référence la barre est hors flux, et c'est le panneau qui, en s'ouvrant,
     donne ses 398px à l'en-tête (70 + 328). Reproduire cette mécanique plutôt
     que la seule hauteur est ce qui fait que l'ouverture POUSSE la bannière au
     lieu de la recouvrir — comportement mesuré, `#banner` passant de y=70 à
     y=398.

     1023px et non 900 : c'est la borne de la référence (`hide-for-large` de
     Foundation replie sous 1024). Les anciennes requêtes à 900 et 901px
     repliaient l'en-tête 124px trop tôt. */
  .sa-header { min-height: 70px; box-sizing: border-box; }

  /* Le bandeau supérieur se replie à zéro. Réservation, réseaux sociaux et
     « Avis clients » sont masqués — la référence les masque aussi, et la mesure
     les compte « masqués des deux côtés ». Seuls les drapeaux restent, posés en
     absolu : c'est ce qui donne au bandeau sa hauteur nulle. */
  .sa-header__top { display: block; padding: 0; }
  .sa-header__left,
  .sa-header__logo { display: none; }
  .sa-header__right { display: block; height: 0; }
  /* Le conteneur de référence est l'en-tête lui-même, déjà positionné par son
     `position: sticky`. `top: 20px` plus les 5px de marge haute donnent y=25. */
  .sa-langs { position: absolute; top: 20px; right: 10px; z-index: 2; }

  /* Bande de navigation : 480x0 à x=10, fond #f6f6f6 — ce gris ne se voit que
     panneau ouvert, la bande étant plate le reste du temps. */
  .sa-header__nav {
    position: relative;
    margin: 0 10px;
    border-top: 0;
    background: #f6f6f6;
  }

  /* Barre : 432x70 à x=10, soit 90% de la bande, en `space-between`.
     Hors flux, pour que la bande garde sa hauteur nulle. */
  .sa-barre {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 90%;
    height: 70px;
    padding: 15px 15px 10px;
  }

  /* Hamburger : 45x36 à (25,20), remplissage 10px 15px 0 0. Trois traits de
     30x2 dans une boîte de 30x20, aux ordonnées 30, 38 et 46. */
  .sa-burger {
    box-sizing: border-box;
    width: 45px;
    height: 36px;
    padding: 10px 15px 0 0;
    border: 0;
    background: none;
    color: #363636;
    cursor: pointer;
  }
  .sa-burger__boite { position: relative; display: block; width: 30px; height: 20px; }
  .sa-burger__trait,
  .sa-burger__trait::before,
  .sa-burger__trait::after {
    position: absolute;
    left: 0;
    width: 30px;
    height: 2px;
    background: currentColor;
  }
  .sa-burger__trait { top: 8px; }
  .sa-burger__trait::before { content: ""; top: -8px; }
  .sa-burger__trait::after  { content: ""; top: 8px; }

  /* Logo de la barre : 250x45. `contain` plutôt que `fill` — la référence rend
     249,9x45 parce que la proportion de son fichier tombe juste ; la nôtre est
     différente et l'étirer la déformerait. */
  .sa-barre__logo,
  .sa-barre__logo .wp-block-site-logo,
  .sa-barre__logo .custom-logo-link { display: block; width: 250px; }
  .sa-barre__logo img {
    display: block;
    width: 250px;
    height: 45px;
    object-fit: contain;
  }

  /* Cale de droite : boîte de 31px **avec un retrait négatif de 10px de chaque
     côté**. Ce retrait est mesuré, et il n'est pas décoratif : c'est lui qui place
     le logo à x=118. Sans lui, `space-between` répartirait 96px en deux fois 48 et
     le logo tomberait à 108 — les 10px d'écart tiennent entièrement à cette marge.
     La référence y met un lien téléphonique, que ses propres drapeaux recouvrent
     et rendent inatteignable ; on garde donc la boîte, pas le lien. */
  .sa-barre__cale {
    display: block;
    box-sizing: border-box;
    width: 31px;
    height: 21px;
    margin-inline: -10px;
  }

  /* Panneau : 480x328 à (10,70) — 20px de dégagement et 8 liens de 36px
     (25px d'interligne, 5px de remplissage haut et bas, 1px de filet).
     Il reste DANS le flux, comme la référence.

     Les listes font 83,333% de la bande — 400px sur 480 mesurés, soit dix
     douzièmes, la largeur de colonne de la grille d'origine. En proportion et
     non en pixels, pour que le panneau suive la largeur de l'écran. */
  /* Les 70px du haut dégagent la barre, qui est hors flux : sans eux le panneau
     se déplie par-dessus le hamburger et le logo. C'est aussi ce qui donne à
     l'en-tête ouvert ses 398px mesurés (70 + 20 + 8×36 + 20).

     En REMPLISSAGE et non en marge : la bande de navigation n'a ni bordure ni
     remplissage, une marge haute s'en échapperait donc par recollement et
     descendrait la bande entière — barre comprise, puisqu'elle s'y positionne.
     C'est exactement ce qui arrivait : l'en-tête complet glissait de 70px. */
  .sa-header__nav > .sa-panneau { padding: 90px 0 20px; }
  .sa-panneau .sa-menu__list {
    display: block;
    box-sizing: border-box;
    width: 83.333%;
    padding: 0 20px;
  }
  .sa-panneau .sa-menu__list > li { display: list-item; }
  /* `> li > a` et non ` a` : la règle de base de la bande horizontale
     (`.sa-nav .sa-menu__list > li > a`) compte deux classes et deux éléments et
     l'emportait sur un sélecteur plus court. Les liens du panneau rendaient donc
     16,8px avec 8px de remplissage au lieu des 15px / 5px mesurés — invisible à
     la comparaison, qui saute la typographie d'une boîte masquée des deux côtés. */
  .sa-panneau .sa-menu__list > li > a {
    display: block;
    padding: 5px 0;
    font-size: 15px;
    line-height: 25px;
    font-weight: 100;
    color: #333;
    text-transform: none;
    letter-spacing: normal;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
  .sa-nav { max-width: none; margin-inline: 0; padding: 0; }
  .sa-nav-avis { display: block; }

  /* Le panneau ne se replie que si le script a pris la main (`is-pilote`) : sans
     JavaScript, la navigation se déroule en entier plutôt que de devenir
     inatteignable derrière un hamburger inerte. */
  .sa-header__nav.is-pilote .sa-panneau { display: none; }
  .sa-header__nav.is-pilote.is-ouvert .sa-panneau { display: block; }

  /* Sous-menus : accordéon replié, dépliés par leur propre bouton. La référence
     sacrifie le lien du parent au dépliage ; ici les deux coexistent. */
  .sa-panneau .sub-menu {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    translate: none;
    min-width: 0;
    margin: 0;
    padding: 0 0 0 1rem;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .sa-panneau .is-deplie > .sub-menu { display: block; }
  .sa-panneau .sub-menu a { padding: 5px 0; font-size: 14px; }

  /* Le chevron du bandeau horizontal n'a pas de sens dans l'accordéon : c'est le
     bouton qui l'indique. */
  .sa-panneau .menu-item-has-children > a::after { content: none; }
  .sa-panneau .menu-item-has-children { position: relative; }
  .sa-deplier {
    display: block;
    position: absolute;
    top: 0;
    right: 20px;
    width: 36px;
    height: 36px;
    border: 0;
    background: none;
    color: #333;
    cursor: pointer;
  }
  .sa-deplier::after {
    content: "";
    position: absolute;
    top: 14px;
    left: 13px;
    border: 5px solid transparent;
    border-top-color: currentColor;
  }
  .sa-deplier[aria-expanded="true"]::after { rotate: 180deg; top: 11px; }
}

/* --------------------------------------------------------------- bannière */

.sa-banner {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(280px, 42vw, 470px);
  padding: 4.5rem 1.5rem 3.5rem;
  text-align: center;
  color: #fff;
  background: var(--wp--preset--color--encre) center / cover no-repeat;
  overflow: hidden;
}
.sa-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(33, 33, 42, 0.42) 0%, rgba(33, 33, 42, 0.28) 45%, rgba(33, 33, 42, 0.5) 100%);
}
.sa-banner > * { position: relative; z-index: 1; }

.sa-banner__inner { max-width: 1000px; }

.sa-banner h1 {
  font-family: var(--wp--preset--font-family--titre);
  font-size: var(--wp--preset--font-size--banniere);
  font-weight: 400;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 1rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}

.sa-banner__resume {
  font-family: var(--wp--preset--font-family--titre);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 760px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

/* Fil d'Ariane, posé en haut à gauche de la bannière */
.sa-breadcrumb {
  position: absolute;
  top: 1.1rem;
  left: 0;
  right: 0;
  z-index: 2;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  font-family: var(--wp--preset--font-family--titre);
  font-size: 0.82rem;
  text-align: left;
  color: rgba(255, 255, 255, 0.85);
}
.sa-breadcrumb a { color: inherit; text-decoration: none; }
.sa-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.sa-breadcrumb span[aria-current] { color: #fff; }
.sa-breadcrumb .sep { margin-inline: 0.5rem; opacity: 0.6; }

/* Chevron d'invitation au défilement */
.sa-scroll {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-right: 1.5px solid rgba(255, 255, 255, 0.85);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.85);
  rotate: 45deg;
  animation: sa-bob 2.4s ease-in-out infinite;
}
@keyframes sa-bob {
  0%, 100% { transform: translateY(0); opacity: 0.75; }
  50%      { transform: translateY(7px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .sa-scroll { animation: none; } }

/* ---------------------------------------------------------------- contenu */

/* Rythme vertical du contenu, mesuré sur la référence :
     h2   16px / 1,2 — marge 0 0 8px
     h3   28px / 1,2 — marge 0 0 8px
     p    16px / 1,6 — marge 0 0 16px
   Un h2 à la taille du corps et un h3 deux fois plus gros n'est pas une
   coquille : c'est l'échelle de la référence, où h2 sert de surtitre et h3 de
   vrai titre — d'où aussi l'or et les capitales sur h3 seulement. Les tailles
   sont dans `theme.json`, qui ne peut pas porter de commentaire.

   Les marges hautes de 2,5rem posées ici auparavant décalaient tout le contenu :
   sur l'accueil, le premier paragraphe tombait 31px trop bas. La référence
   n'attaque JAMAIS un titre avec une marge haute ; c'est le remplissage de la
   section qui dégage. */
.sa-main p { margin-block: 0 16px; }
.sa-main h2 { margin-block: 0 8px; }
.sa-main h3 {
  margin-block: 0 8px;
  color: var(--wp--preset--color--or);
  text-transform: uppercase;
}
/* Appel à l'action éditorial. Mesuré sur la référence : 16px / interligne 16px,
   poids 900, #333, remplissage 14,4px 25px 14,4px 0 — donc entièrement à droite,
   comme le CTA du carrousel — et marge 8px 0 16px, pour une boîte de 47px de
   haut. Ces 47px comptent dans le rythme vertical de chaque section qui en
   porte un. */
.sa-main .sa-cta {
  display: inline-block;
  font-family: var(--wp--preset--font-family--titre);
  font-size: 16px;
  line-height: 16px;
  font-weight: 900;
  color: #333;
  text-decoration: none;
  padding: 14.4px 25px 14.4px 0;
  margin: 8px 0 16px;
}
.sa-main .sa-cta:hover { color: var(--wp--preset--color--or); }

.sa-main ul, .sa-main ol { padding-left: 1.35rem; margin-block: 0 1.15rem; }
.sa-main li { margin-block: 0.35rem; }
.sa-main li::marker { color: var(--wp--preset--color--or); }

.sa-main :where(figure.wp-block-image) img { display: block; width: 100%; height: auto; }

/* Blocs de contenu posés sur crème, repris de la charte historique */
.sa-main .wp-block-group.has-creme-background-color { padding: clamp(1.5rem, 3vw, 2.75rem); }

/* --------------------------------------------------------- listes d'actus */

.sa-cards { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.sa-card { display: flex; flex-direction: column; }
.sa-card img { width: 100%; height: 220px; object-fit: cover; }
.sa-card__title {
  font-family: var(--wp--preset--font-family--titre);
  font-size: 1.3rem;
  line-height: 1.25;
  margin: 1rem 0 0.5rem;
}
.sa-card__title a { color: var(--wp--preset--color--encre); text-decoration: none; }
.sa-card__title a:hover { color: var(--wp--preset--color--or); }
.sa-card__meta { font-size: 0.85rem; color: var(--wp--preset--color--gris); }

/* ----------------------------------------------------------- pied de page */

/* Pied de page, entièrement mesuré sur la référence le 08/08/2026 — il n'avait
   jamais été comparé et concentrait le plus d'écarts de la page :

     #footer          padding 30px 0 0
     #footer-main     padding 30px
     logo             317x57, centré
     slogan           16px / 19,2px Open Sans, centré      ← absent du thème
     liens du menu    14px / 20,8px Rosarivo, gris #777
     bandeau du bas   14px / 18,2px Source Sans Pro, #777  ← était en Rosarivo 14,4px */
.sa-footer {
  border-top: 1px solid var(--sa-trait);
  background: #fff;
  padding: 30px 0 0;
  text-align: center;
}
.sa-footer__logo { padding-top: 30px; }
.sa-footer__logo img { width: 317px; height: 57px; object-fit: contain; margin-inline: auto; }

.sa-footer__slogan {
  margin: 0;
  font-family: var(--wp--preset--font-family--paragraphe);
  font-size: 16px;
  line-height: 1.2;
  color: var(--wp--preset--color--texte);
}

.sa-footer__nav { margin-top: 60px; }
/* Les règles visant `.wp-block-navigation-*` ont été retirées : le thème ne pose
   plus le bloc Navigation nulle part, les menus passent par des emplacements
   classiques (voir functions.php). Elles ne s'appliquaient donc à rien, et
   dupliquaient en silence la mise en forme des liens du pied — avec des valeurs
   différentes de celles qui, elles, s'appliquaient vraiment. */

/* Bandeau du bas : 14px / 18,2px en Source Sans Pro, et non 14,4px en Rosarivo.
   La référence garde son sans ici — c'est le seul bloc du pied de page qui n'est
   pas en Rosarivo. */
.sa-footer__bar {
  margin-top: 2.25rem;
  border-top: 1px solid var(--sa-trait);
  padding: 1.1rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  font-family: var(--wp--preset--font-family--texte);
  font-size: 14px;
  line-height: 1.3;
  color: var(--wp--preset--color--texte);
}
.sa-footer__bar a { color: inherit; text-decoration: none; }
.sa-footer__bar a:hover { color: var(--wp--preset--color--or); }

/* -------------------------------------------------------------- responsive */

@media (max-width: 1023px) {
  /* `.sa-avis` était une classe morte : l'en-tête rend `.sa-avis-menu` depuis que
     le lien passe par un emplacement de menu. La règle ne masquait donc rien, et
     « Avis clients » restait affiché sur téléphone alors que la référence le
     masque. Il reparaît dans le panneau replié, où la référence le range aussi. */
  .sa-avis-menu, .sa-reservation-boite, .sa-social { display: none; }
  .sa-footer__bar { justify-content: center; text-align: center; }
}

@media (max-width: 600px) {
  /* Le logo du bandeau supérieur est masqué sous 1024px : c'est celui de la barre
     repliée qui est rendu, et la référence le tient à 250x45 jusqu'en bas. Les
     règles qui le rétrécissaient à 200 puis 170px visaient un en-tête déroulé
     qui n'existe plus. */
  .sa-banner { min-height: 240px; padding-block: 3.5rem 3rem; }
}

/* Accueil : bannière pleine hauteur, comme sur le site historique */
.sa-banner--home { min-height: min(760px, calc(100vh - var(--sa-header-h))); }
.sa-banner--home h1 { font-size: clamp(2rem, 4.4vw, 3.5rem); }
.sa-banner--home .sa-banner__inner { max-width: 1180px; }

/* ------------------------------------------------- carrousel d'accueil */

/* Sans JavaScript la piste défile horizontalement : une seule diapositive tient
   dans la fenêtre, les autres s'atteignent par les ancres des pastilles. Le
   script pose `is-pilote` et prend alors la main par superposition et fondu. */
.sa-heros {
  position: relative;
  overflow: hidden;
  background: var(--wp--preset--color--encre);
}
.sa-heros__piste {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.sa-heros__piste::-webkit-scrollbar { display: none; }
.sa-heros__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
}
.sa-heros__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pilotage par le script : les diapositives se superposent et s'échangent en
   fondu. `animateIn: 'fade'` mesuré sur la référence. */
.sa-heros.is-pilote .sa-heros__piste { display: block; overflow: hidden; }
.sa-heros.is-pilote .sa-heros__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
}
.sa-heros.is-pilote .sa-heros__slide.is-active { opacity: 1; visibility: visible; }

/* L'assombrissement est celui de la bannière de page : même dégradé, même aplat. */
.sa-heros__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(21deg, rgba(0, 0, 0, 0.64) 0%, rgba(255, 255, 255, 0) 36%),
    rgba(33, 33, 42, 0.5);
}

.sa-heros__legende {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  color: #fff;
  text-align: left;
}
.sa-heros__legende > * { margin: 0; color: #fff; }
.sa-heros__titre,
.sa-heros__sous-titre,
.sa-heros__cta {
  font-family: var(--wp--preset--font-family--titre);
  font-weight: 100;
  text-transform: uppercase;
}
.sa-heros__texte { font-family: var(--wp--preset--font-family--paragraphe); }
.sa-heros__cta { display: inline-block; text-decoration: none; text-transform: none; }
.sa-heros__cta:hover { color: var(--wp--preset--color--or); }

/* Pastilles : cerclées, pleines pour la diapositive courante. La bande occupe
   toute la largeur mais les pastilles sont rangées à DROITE — au centre elles se
   superposaient au chevron de défilement, qui y est déjà. */
.sa-heros__pastilles {
  position: absolute;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding-right: 40px;
  box-sizing: border-box;
}
.sa-heros__pastille {
  width: 10px;
  height: 10px;
  border: 1px solid #fff;
  border-radius: 50%;
  opacity: 0.7;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.sa-heros__pastille.is-active,
.sa-heros__pastille:hover { background: var(--wp--preset--color--or); border-color: var(--wp--preset--color--or); opacity: 1; }

/* ------------------------------------------------- grilles de cartes */

/* Mesuré sur la référence : carte de 353x431 à x=15, titre en Rosarivo 24px/28,8px
   BLANC en capitales, posé sur la photo. Le nombre de colonnes vient du bloc. */
.sa-cartes {
  display: grid;
  grid-template-columns: repeat(var(--sa-colonnes, 3), minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Ces composants sortent de la colonne de texte : la référence les pose sur
   toute la largeur, à 15px des bords. Sans cela, la grille de l'accueil restait
   enfermée dans les 1210px du contenu, à x=137 au lieu de x=15.

   `alignfull` seul n'y suffit pas, et la raison est instructive : `post-content`
   porte lui aussi `has-global-padding`, or WordPress émet alors
   `… > .alignfull { margin-left: 0; margin-right: 0 }`, qui **annule**
   l'échappement. Le bloc reste donc borné aux 1210px de la colonne de texte.

   D'où la sortie explicite ci-dessous. Le `!important` répond à celui que la
   mise en page « constrained » applique elle-même (`margin-inline: auto
   !important`) : à spécificité égale, sans lui, le résultat dépendrait de
   l'ordre des feuilles.

   Deux pièges relevés à la mesure des valeurs calculées, plutôt qu'au
   raisonnement :

   — `margin-inline: auto` ne peut pas devenir négatif. Une boîte de 1410px dans
     un conteneur de 1210 est sur-contrainte : le navigateur met la marge de
     début à 0 et laisse déborder à droite. Il faut donc une marge négative
     explicite.
   — un `padding-left` de 21,6px (le remplissage global du thème) s'applique à
     ces blocs et l'emportait sur le `padding: 0` de la règle de base. C'est lui,
     et non la marge, qui décalait les cartes de 22px.

   La marge latérale n'est pas la même aux deux largeurs : la référence pose des
   gouttières de 15px en desktop et de 10px sous 1024px (les cartes sont mesurées
   à x=15 puis x=10). D'où `--sa-bord`, plutôt que le 15px figé qui laissait les
   cartes 5px trop à droite et 10px trop étroites sur téléphone. */
.sa-focus,
.sa-cartes,
.sa-galerie,
.sa-zoning {
  width: calc(100vw - 2 * var(--sa-bord)) !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw + var(--sa-bord)) !important;
  margin-right: 0 !important;
  padding-inline: 0 !important;
}

/* Séparation entre sections. Chez la référence chaque section porte son propre
   remplissage et les sections sont JOINTIVES — le texte d'introduction est
   enveloppé de 100px, si bien que la grille qui le suit commence exactement
   100px après lui. Le gabarit intercalait sa gouttière de bloc de 24px, d'où une
   grille 76px trop haute et tout l'empilement décalé d'autant. */
.sa-focus,
.sa-cartes,
.sa-galerie,
.sa-zoning { margin-block: 100px 0 !important; }
@media (max-width: 1023px) {
  .sa-focus,
  .sa-cartes,
  .sa-galerie,
  .sa-zoning { margin-block: 40px 0 !important; }
}

/* `100vw` compte la barre de défilement, qui déborderait de la largeur utile.
   `clip` plutôt que `hidden` : `hidden` créerait un conteneur de défilement et
   casserait le `position: sticky` de l'en-tête.

   La gouttière de bloc est reprise à zéro : chez la référence le contenu touche
   la bannière (`#main` commence exactement où finit `#banner`), alors que le
   gabarit intercalait 24px. */
.sa-main { overflow-x: clip; margin-block-start: 0; }

/* Dégagement de la première section, mesuré : la référence enveloppe son texte
   d'introduction dans 100px de remplissage en desktop, 40px de haut et 45px de
   côté sous 1024px (15px de section + 20px de contenu + 10px de gouttière). Le
   `clamp` précédent rendait 64px, d'où un paragraphe 36px trop haut en desktop
   et une colonne de texte 50px trop large sur téléphone. */
.sa-main { padding-block: 40px; padding-inline: 45px; }
@media (min-width: 1024px) {
  .sa-main { padding-block: 100px; padding-inline: 20px; }
}
/* Rangée jointive : les 4 cartes de 353px couvrent exactement les 1410px
   disponibles, donc sans gouttière — la référence pose `collapse` sur sa rangée. */
.sa-focus .sa-cartes { gap: 0; }
.sa-cartes__item {
  position: relative;
  overflow: hidden;
  /* 353x431 mesuré : la carte est une boîte de proportion fixe, le texte se
     posant par-dessus la photo. */
  aspect-ratio: 353 / 431;
}
.sa-cartes__lien { display: block; height: 100%; text-decoration: none; color: #fff; }
.sa-cartes__media { display: block; }
.sa-cartes__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.sa-cartes__item:hover .sa-cartes__image { transform: scale(1.05); }

/* Le texte est posé sur la photo, lisible grâce au même dégradé que la bannière. */
/* Remplissage mesuré : 30px de côté en desktop (titre à x=45 pour une carte à
   x=15), 15px sous 1024px (titre à x=25 pour une carte à x=10). */
.sa-cartes__texte {
  position: absolute;
  inset: auto 0 0 0;
  display: block;
  padding: 20px 15px 30px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0) 100%);
  color: #fff;
}
.sa-cartes__texte > * { margin: 0; color: #fff; }
/* La spécificité est nécessaire : `main p { line-height: 1.6 }` du bloc de
   convergence l'emportait sur une règle de classe simple et donnait 38,4px au
   lieu des 28,8 mesurés, ce qui faisait passer le titre sur deux lignes. */
.sa-cartes .sa-cartes__titre {
  font-family: var(--wp--preset--font-family--titre);
  font-weight: 100;
  text-transform: uppercase;
  font-size: 24px;
  line-height: 1.2;
  /* Le titre de la référence s'ajuste à son texte (184px mesurés), il ne s'étale
     pas sur la largeur de la carte. */
  display: inline-block;
}
.sa-cartes__chapo {
  font-family: var(--wp--preset--font-family--paragraphe);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-top: 0.5rem;
}
.sa-cartes__plus {
  display: inline-block;
  margin-top: 0.75rem;
  font-family: var(--wp--preset--font-family--titre);
  font-size: 0.9rem;
  color: var(--wp--preset--color--or-clair);
}

/* ------------------------------------------------- grille « focus » */

/* Le grand visuel de fond bascule au survol d'une carte. Tout en CSS : chaque
   fond est révélé par la carte de même rang. Sans survol — écran tactile — le
   premier fond reste affiché et les cartes restent utilisables. */
.sa-focus { position: relative; }
.sa-focus__fonds { position: absolute; inset: 0; overflow: hidden; }
.sa-focus__fond {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.sa-focus__fond[data-rang="1"] { opacity: 1; }
.sa-focus__fond-image { width: 100%; height: 100%; object-fit: cover; }
.sa-focus__grille { position: relative; }

.sa-focus:has(.sa-cartes__item[data-rang="1"]:hover) .sa-focus__fond { opacity: 0; }
.sa-focus:has(.sa-cartes__item[data-rang="2"]:hover) .sa-focus__fond,
.sa-focus:has(.sa-cartes__item[data-rang="3"]:hover) .sa-focus__fond,
.sa-focus:has(.sa-cartes__item[data-rang="4"]:hover) .sa-focus__fond { opacity: 0; }
.sa-focus:has(.sa-cartes__item[data-rang="1"]:hover) .sa-focus__fond[data-rang="1"],
.sa-focus:has(.sa-cartes__item[data-rang="2"]:hover) .sa-focus__fond[data-rang="2"],
.sa-focus:has(.sa-cartes__item[data-rang="3"]:hover) .sa-focus__fond[data-rang="3"],
.sa-focus:has(.sa-cartes__item[data-rang="4"]:hover) .sa-focus__fond[data-rang="4"],
.sa-focus:has(.sa-cartes__item[data-rang="1"]:focus-within) .sa-focus__fond[data-rang="1"],
.sa-focus:has(.sa-cartes__item[data-rang="2"]:focus-within) .sa-focus__fond[data-rang="2"],
.sa-focus:has(.sa-cartes__item[data-rang="3"]:focus-within) .sa-focus__fond[data-rang="3"],
.sa-focus:has(.sa-cartes__item[data-rang="4"]:focus-within) .sa-focus__fond[data-rang="4"] { opacity: 1; }

/* ------------------------------------------------- galerie et témoignages */

.sa-galerie {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sa-galerie__image { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Section « témoignages » à deux colonnes. Géométrie mesurée à 1440 :

     section        1440x500 à y=3244, remplissage 50px
     colonnes       2 × 670  — texte à gauche, avis à droite
     texte          540 de large à x=115  (colonne 15px + boîte 50px)
     avis           610x281  à x=750      (colonne 15px + liste 15px)

   et à 500px : remplissage 40px 20px, colonnes empilées, gouttières de 10px,
   boîte de texte à 20px, avis 420x313 à x=40.

   La section occupe TOUTE la largeur — elle porte son propre remplissage, à la
   différence des autres composants qui s'arrêtent à la gouttière. D'où un
   échappement à `100vw` et non `100vw - 2 × --sa-bord`. */
.sa-avis {
  display: grid;
  grid-template-columns: 1fr;
  box-sizing: border-box;
  width: 100vw !important;
  max-width: none !important;
  margin: 0 0 0 calc(50% - 50vw) !important;
  padding: 40px 20px !important;
}
/* `min-width: 0` : sans lui une colonne de grille refuse de descendre sous la
   largeur intrinsèque de son contenu, et une longue citation la faisait déborder. */
.sa-avis__col { box-sizing: border-box; min-width: 0; padding-inline: var(--sa-bord); }
.sa-avis__texte { padding: 20px; }
.sa-avis__texte > :first-child { margin-top: 0; }

/* `!important` sur le remplissage pour la même raison que les autres composants
   pleine largeur : le remplissage global du thème (21,6px) s'applique à ce `ul`
   et l'emportait sur une déclaration simple, ce qui poussait la boîte d'avis de
   x=750 à 757 et la rétrécissait d'autant. */
.sa-avis-liste {
  list-style: none;
  display: grid;
  gap: 30px;
  margin: 0 !important;
  padding-inline: var(--sa-bord) !important;
}
.sa-avis-item { padding: 50px; margin: 0; background: var(--wp--preset--color--gris-clair); }
/* La marge basse du DERNIER enfant compte : chez la référence elle ne se replie
   pas dans le remplissage de la boîte, et ses 16px font partie des 281px. */
.sa-avis-item > * { margin: 0 0 16px; }
/* Note, citation et auteur sont mesurés en Rosarivo ITALIQUE, interligne 2 :
   note 32px/64px en or, citation 16px/32px en encre, auteur 16px/32px en or.
   C'est cet interligne 2 qui donne à la boîte sa hauteur.

   Le sélecteur descend d'un cran (`.sa-avis-item > …`) parce que
   `.entry-content p` du bloc de convergence, à une classe et un élément,
   l'emportait sur une classe seule : la note et l'auteur retombaient en
   interligne 1,6 et la boîte perdait 21px. */
.sa-avis-item > .sa-avis-item__note,
.sa-avis-item > .sa-avis-item__texte,
.sa-avis-item > .sa-avis-item__auteur {
  font-family: var(--wp--preset--font-family--titre);
  font-style: italic;
  line-height: 2;
}
.sa-avis-item > .sa-avis-item__note {
  font-size: 32px;
  color: var(--wp--preset--color--or);
  font-weight: 100;
}
.sa-avis-item > .sa-avis-item__texte { font-size: 16px; border: 0; padding: 0; }
.sa-avis-item > .sa-avis-item__auteur { font-size: 16px; color: var(--wp--preset--color--or); }

/* ------------------------------------------------- bandes image et texte */

.sa-zoning { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; }
.sa-zoning--inverse .sa-zoning__media { order: 2; }
.sa-zoning__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.sa-zoning__texte { padding: 30px; }
.sa-zoning__texte > :first-child { margin-top: 0; }

@media (max-width: 1023px) {
  .sa-cartes, .sa-galerie { grid-template-columns: 1fr; }
  .sa-zoning { grid-template-columns: 1fr; }
  .sa-zoning--inverse .sa-zoning__media { order: 0; }
}

/* Le pied de page reprend le filet de séparation du bandeau supérieur */
.sa-footer__nav .sa-menu__list { justify-content: center; gap: 0.4rem clamp(1.25rem, 3vw, 2.75rem); }
/* Liens du pied : 14px / 20,8px Rosarivo, gris #777, en capitales et sans
   interlettrage — mesuré. Les 0,92rem rendaient 14,72px, et l'interlettrage de
   0,08em élargissait chaque libellé. */
.sa-footer__nav .sa-menu__list a {
  font-size: 14px;
  line-height: 20.8px;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--wp--preset--color--gris);
}
.sa-footer__nav .sa-menu__list a:hover { color: var(--wp--preset--color--or); }

/* ==================================================================
   Convergence avec le rendu du site historique
   Décision du client du 06/08/2026 (voir AVANT_PROD.md, section 4).

   Chaque valeur est MESURÉE dans le navigateur sur le rendu d'origine
   (`tools/mesure_rendu.py`), puis réimplémentée ici. Aucune feuille de
   style, aucun script, aucun visuel du prestataire n'est reproduit :
   les contrôles PI restent à zéro, `tools/verify.sh` les vérifie.

   Ce qui est global vaut à tous les viewports parce que la référence
   l'applique globalement. Tout ce qui est une DIMENSION EN PIXELS est
   enfermé dans la requête desktop ci-dessous : la première version de
   ce bloc, posée après les `@media`, les neutralisait et faisait
   déborder l'en-tête sur téléphone.
   ================================================================== */

/* Interlignes de la référence : body 1.3, titres 1.2 avec 0.5rem de marge
   basse, paragraphes 1.6. Les trois coexistent chez elle — les listes et
   tableaux héritent donc bien de 1.3, ce n'est pas un oubli. */
body { line-height: 1.3; }
h1, h2, h3, h4, h5, h6 { line-height: 1.2; margin-bottom: 0.5rem; }
.entry-content p, main p { line-height: 1.6; }

/* Les tailles de h2 et h3 sont ici, en pixels fermes, et NON dans `theme.json` :
   `settings.typography.fluid` étant actif, WordPress convertit toute taille
   déclarée en `clamp()`. Un `16px` posé dans `theme.json` rendait donc 16px à
   1440 mais 14,3px à 500 — d'où un surtitre 20px trop court, un h3 qui ne passait
   plus sur deux lignes, et le paragraphe d'introduction 49px trop haut sur
   téléphone. La référence, elle, tient ses deux tailles à toutes les largeurs.
   Un sélecteur d'élément suffit à l'emporter : les styles de `theme.json`
   s'appliquent via `:where()`, de spécificité nulle. */
h2 { font-size: 16px; }
h3 { font-size: 28px; }

/* La référence emploie DEUX sans : `source-sans-pro` par défaut sur le corps, et
   Open Sans sur les seuls paragraphes — sa feuille ne contient qu'une règle,
   `p { font-family: OpenSans-Regular, sans-serif }`. Les listes, les cellules de
   tableau et les libellés restent donc en Source Sans Pro. La mesure le
   confirmait : `corps` en source-sans-pro et `paragraphe` en OpenSans-Regular.
   Les deux familles sont libres — Source Sans Pro et Rosarivo sous SIL OFL,
   Open Sans sous Apache 2.0. */
p { font-family: var(--wp--preset--font-family--paragraphe); }

/* Assombrissement de la bannière — mesuré en deux couches superposées :
   un fond #21212A sous une image à opacity .5, plus un dégradé à 21deg
   passant de noir 64 % à transparent à 36 %. */
.sa-banner::after {
  background:
    linear-gradient(21deg, rgba(0, 0, 0, 0.64) 0%, rgba(255, 255, 255, 0) 36%),
    rgba(33, 33, 42, 0.5);
}

/* Le gabarit intercale 24px de gouttière de bloc entre l'en-tête et le
   carrousel ; la référence n'en a pas, son en-tête touche la photo. La remise à
   zéro était enfermée dans la requête desktop, si bien que sur téléphone la
   bannière descendait à y=94 au lieu de 70 et entraînait avec elle les quatre
   mesures du héros. */
.sa-heros { margin-block-start: 0; }

/* La légende du carrousel : la référence emploie le MÊME modèle de boîte aux deux
   largeurs, seules les tailles du titre et du sous-titre changent. Ces règles
   étaient enfermées dans la requête desktop, et les surcharges mobiles
   divergeaient — à 500px le CTA retombait à 152x21 en 16px, les pastilles à 12px
   de haut, et le paragraphe passait en Open Sans 17,6px au lieu de Rosarivo
   22,4px, ce qui décalait tout l'empilement de 57px.

   Chaîne verticale mesurée, identique aux deux largeurs (de haut en bas) :
     titre        interligne 1,2 + 10px de remplissage bas
     sous-titre   interligne 1,2 + 8px de marge basse
     paragraphe   22,4px / 1,6 Rosarivo (3 lignes = 108px) + 16px de marge basse
     CTA          15px de marge haute, boîte de 233x58 */
.sa-heros__legende .sa-heros__titre { padding-bottom: 10px; }
.sa-heros__legende .sa-heros__sous-titre { margin-bottom: 8px; }
.sa-heros__legende .sa-heros__texte {
  font-family: var(--wp--preset--font-family--titre);
  font-size: 1.4em;
  line-height: 1.6;
  margin: 0 0 16px;
}
.sa-heros__cta {
  /* 20,16px = 1,26em de la légende à 16px, la chaîne d'`em` de la référence.
     Le remplissage est mesuré, et il est ENTIÈREMENT À DROITE : le texte fait
     204,55px pour une boîte de 232,75, et il commence exactement à x=92 comme la
     boîte. La lecture précédente — « 20,5px de chaque côté, le texte est rentré »
     — était fausse et décalait le libellé de 20px vers l'intérieur ; elle venait
     d'une mesure faite en police de substitution, où le texte paraissait 13px
     plus court. */
  font-size: 1.26em;
  line-height: 1;
  padding: 19px 28.2px 19px 0;
  margin: 15px 0 0;
}
.sa-heros__pastilles { bottom: 0; height: 26px; align-items: center; }

/* ------------------------------------------------- desktop uniquement */
/* 1024px : la borne de la référence, qui replie sa navigation sous `large`. Ce
   bloc valait auparavant dès 901px et déroulait donc l'en-tête complet sur les
   123px où la référence montre déjà un hamburger. */
@media (min-width: 1024px) {

  /* Hauteur réelle de l'en-tête de référence, mesurée à 191px. Elle sert
     aussi au calcul de la hauteur de bannière juste en dessous. */
  :root { --sa-header-h: 191px; --sa-bord: 15px; }

  /* Bandeau supérieur : pleine largeur, 15px de marge latérale — « Réservation »
     commence à x=15 et le sélecteur de langue finit à 1425, soit 1440−15.
     Hauteur mesurée à 97px = 15 + 67 (logo) + 15, le logo étant le plus haut.

     Trois colonnes ÉGALES, et non `1fr auto 1fr` : la référence pose une grille
     en tiers (les `large-4` de Foundation). C'est ce qui place « Avis clients »
     à x=975 — soit 955, début du tiers droit, plus 20px de gouttière — et non
     collé à droite. Avec des tiers, le logo tombe de lui-même à x=561. */
  /* `gap: 0` : les tiers de la référence sont exacts, 470px chacun sur les
     1410 utiles. La gouttière de 1rem héritée du socle les ramenait à 459,33 et
     décalait « Avis clients » de 975 à 986. */
  .sa-header__top {
    max-width: none;
    padding: 15px;
    gap: 0;
    grid-template-columns: repeat(3, 1fr);
  }
  .sa-header__left { justify-content: space-between; }
  .sa-header__logo { justify-self: center; }
  /* Les deux éléments du tiers droit ont leur boîte de marge alignée en haut, à
     21px du bord du bandeau — « Avis clients » sans marge tombe donc à y=36, et
     les drapeaux, avec leurs 5px, à y=41. Un centrage vertical les mettait tous
     deux 5px trop haut. */
  /* `align-self: stretch` est indispensable : le bandeau centre ses colonnes, et
     sans lui le remplissage haut de 21px grandissait la colonne, que le centrage
     redescendait ensuite de 6px. Étirée sur toute la hauteur du bandeau, la
     colonne compte ses 21px depuis le bord. */
  .sa-header__right {
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    padding-left: 20px;
    padding-top: 21px;
  }

  /* « Avis clients » : le lien de la référence fait 121x35 pour un texte de 85px
     de large sur 12,195px de haut — donc 18px de remplissage horizontal et 11px
     de vertical. */

  /* Logo : 317x67 à x=561, donc centré. La règle de leur CSS qui annonce
     180x40 vise la variante « sticky » de leur en-tête, pas celle-ci. */
  .sa-header__logo img,
  .sa-header__logo svg { width: 317px; height: 67px; object-fit: contain; }

  /* Navigation : Rosarivo 16px, interligne 1 (16px), lien de 190x38 — donc 11px
     de remplissage vertical et 16px de chaque côté. Encre #333, et non l'encre
     du thème #21212A : la référence emploie les deux teintes, #333 dans la
     navigation et #363636 dans le bandeau supérieur.
     Le poids 100 est celui que la référence déclare. Rosarivo n'existe qu'en
     400, donc le rendu est identique — mais la mesure compare les valeurs
     calculées, et sans cette déclaration elle signale un écart de poids. */
  /* La bande de navigation est mesurée à 1410x94 en x=15, y=97 : elle touche
     donc le bandeau supérieur, sans filet de séparation ni gouttière.

     Deux causes se compensaient et donnaient un faux 191 : le gabarit intercale
     24px de gouttière de bloc entre les deux bandeaux, et la bande était trop
     courte de 27px. Total juste, décomposition fausse — dès que la bande a pris
     sa vraie hauteur, l'en-tête est passé à 217. La référence n'a ni l'un ni
     l'autre : ni gouttière, ni filet. */
  .sa-header__nav {
    margin-block-start: 0;
    margin-inline: 15px;
    border-top: 0;
  }
  .sa-nav { max-width: none; padding: 28px 0; }
  .sa-nav .sa-menu__list { gap: 0; }
  /* Remplissage mesuré, et il est ASYMÉTRIQUE : 16px à gauche, 24px à droite.
     Le texte fait 149,84px, la boîte 189,84 — les 40px se répartissent ainsi et
     pas en deux fois 20. Les 17px symétriques posés ici avant le 07/08/2026
     avaient été calés sur une mesure faite en police de substitution. */
  .sa-nav .sa-menu__list > li > a {
    font-family: var(--wp--preset--font-family--titre);
    font-size: 16px;
    line-height: 16px;
    font-weight: 100;
    color: #333;
    padding: 11.2px 24px 11.2px 16px;
  }

  /* « Avis clients » : **1,5vh**, interligne 1, capitales, #363636. C'est le plus
     visible des écarts signalés — le thème rendait 30,4px, deux fois et demie la
     référence.

     La taille est en unités de hauteur visible, pas en pixels : mesurée à
     12,195px sur une fenêtre de 813px de haut et à 24,195px sur 1613px, soit
     1,500vh dans les deux cas. Figer 12,195px aurait donné un rendu juste sur
     une seule hauteur de fenêtre — exactement le genre de faux vert que ce
     projet a déjà payé une fois. Le remplissage, lui, ne varie pas : 22,8px de
     haut et 36px de large dans les deux mesures. */
  .sa-avis-menu .sa-menu__list a {
    font-size: 1.5vh;
    line-height: 1;
    padding: 11.2px 16px;
    color: #363636;
  }

  /* « Réservation » : 12,8px / 16,64px, soit l'interligne 1,3 du corps, pour une
     boîte de 71x18. Sans interlettrage — celui posé ici jusqu'au 07/08/2026
     rattrapait les 3px que la police de substitution faisait perdre à la mesure ;
     avec la vraie Rosarivo il fabriquait 2px de trop. */
  .sa-reservation { font-size: 12.8px; line-height: 1.3; }

  /* Bannière d'accueil : la hauteur mesurée est **622px**, soit la hauteur
     visible MOINS l'en-tête (191 + 622 = 813). La valeur de 100vh inscrite ici
     jusqu'au 07/08/2026 venait d'une référence fausse — le carrousel de la
     référence ne se chargeait pas sous la mesure et sa boîte restait sur
     l'image de chargement, en `height: 100vh`. La bannière dépassait donc le
     pli de 191px sans raison. Voir AVANT_PROD.md.

     Le contenu est bien collé en bas : mesuré entre y=426 et y=751 dans une
     boîte 191..813, soit 62px de dégagement sous le dernier élément. Aligné à
     gauche à 90px. */
  .sa-banner--home {
    box-sizing: border-box;
    height: calc(100vh - var(--sa-header-h));
    min-height: 0;
    place-items: end start;
    padding: 0 90px 62px;
    text-align: left;
    /* Le gabarit intercale 24px de gouttière de bloc entre l'en-tête et la
       bannière : la référence n'en a pas, l'en-tête y touche la photo. */
    margin-block-start: 0;
  }
  .sa-banner--home .sa-banner__inner { max-width: none; }
  .sa-banner--home h1 { font-size: 36px; line-height: 1.2; }

  /* Carrousel d'accueil, toutes valeurs mesurées à 1440x813 :
       bannière        y=191, 1440x622  (hauteur visible moins l'en-tête)
       titre           587x30  à (92,426)   16,26px / 19,512px   poids 100
       sous-titre      587x91  à (92,455)   38px    / 45,6px     poids 100
       CTA             233x58  à (92,693)   20,16px / 20,16px
       pastilles       1440x26 à y=788

     Les tailles ne sont pas rondes parce que la référence les exprime en `vh` :
     le titre est à `2vh`, soit 16,26px pour 813px de hauteur visible. On garde
     `vh` plutôt que la valeur figée, sinon la proportion casse dès que la
     fenêtre change de hauteur. */
  .sa-heros {
    height: calc(100vh - var(--sa-header-h));
    margin-block-start: 0;
  }
  /* La colonne de légende est mesurée à 587px de large, posée à x=92, et son
     dernier élément s'arrête 62px avant le bas. Cette largeur compte autant que
     la position : c'est elle qui fait passer le sous-titre sur deux lignes, donc
     qui donne ses 91px de haut et remonte tout le bloc. À 800px il tenait sur
     une ligne et le texte descendait de 130px. */
  .sa-heros__legende {
    left: 92px;
    width: 587px;
    max-width: none;
    padding: 0 0 62px;
  }
  /* `2vh` et non 16,26px : la référence exprime ce titre en unités de hauteur
     visible. Figer la valeur casserait la proportion sur une fenêtre plus basse. */
  /* 30px de haut pour un interligne de 19,512 : les 10px qui manquent sont un
     remplissage bas, pas de l'interligne. La distinction se voit à la mesure et
     compte, parce que l'interligne écarterait les lignes d'un titre sur deux
     lignes alors que le remplissage ne joue qu'une fois. */
  .sa-heros__titre { font-size: 2vh; line-height: 1.2; }
  .sa-heros__sous-titre { font-size: 38px; line-height: 1.2; }

  /* Témoignages : deux colonnes, et le remplissage de la section passe de
     40px 20px à 50px, celui de la boîte de texte de 20 à 50px. */
  .sa-avis { grid-template-columns: 1fr 1fr; padding: 50px !important; }
  .sa-avis__texte { padding: 50px; }

  .sa-cartes__texte { padding: 20px 30px 30px; }
}

@media (max-width: 1023px) {
  /* Mesuré à 500px : bannière de 655px sous un en-tête de 70px, colonne de
     légende de 450px posée à x=15 — soit 90% de la bannière, la proportion de la
     référence — et 77px de dégagement sous le CTA. */
  .sa-heros { height: calc(100vh - 70px); }
  .sa-heros__legende { left: 15px; width: 90%; max-width: none; padding: 0 0 77px; }
  .sa-heros__titre { font-size: 14.5px; line-height: 1.2; }
  .sa-heros__sous-titre { font-size: 20px; line-height: 1.2; }
}