/*
Theme Name: AIMES ESTHETIC
Theme URI: https://aimesthetics.naturalink.net
Author: EdenALOS
Description: Theme sur mesure reprenant le visuel du projet vanilla aimesthetics (cabinet du Dr Stephanie Malo, Morges). Palette espresso / creme / dore, titres serif, entierement responsive.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: aimesthetic
*/

/* ==========================================================================
   1. Jetons de design (charte AIMES ESTHETIC)
   ========================================================================== */
/* --------------------------------------------------------------------------
   Les trois propositions du projet vanilla. Le vert profond, la creme et le
   dore sont CONSTANTS : seule l'« ancre » change, c'est-a-dire la troisieme
   couleur qui porte les fonds sombres. Valeurs reprises telles quelles du
   projet vanilla aimesthetics (styles.css, :root[data-prop]).
     1. Velours   bordeaux    2. Argile   terracotta    3. Nuit   anthracite
   -------------------------------------------------------------------------- */
:root,

:root {
  --espresso: #3B2E25;
  --espresso-clair: #4A3A2F;
  --creme: #FAE8D1;
  --creme-clair: #FDF4E8;
  --teal: #004D51;
  --bordeaux: #5E2139;
  --sauge: #6F896C;
  --foret: #233326;
  --dore: #ECCEA1;
  --dore-fonce: #A98A5B;

  /* L'ACCENT DU SITE : le vert profond de la charte (proposition Lagune).
     Le choix de palette a ete retire du menu le 09/09 : la cliente a tranche,
     un selecteur laisse en place aurait laisse un visiteur defaire ce choix. */
  --anchor: #004D51;
  --anchor-2: #0A6A6F;

  /* Bradent est la police de titres de la charte. Elle n'est pas libre de
     diffusion : si le fichier n'est pas depose dans assets/fonts/, la pile
     retombe sur des serif proches, ce qui preserve l'allure. */
  --font-titre: "Bradent", "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-corps: "Red Hat Display", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --largeur: 1240px;
  --gouttiere: 24px;
  --rayon: 14px;
  --rayon-pilule: 999px;
  --transition: 200ms ease;
}

/* ==========================================================================
   2. Reinitialisation et base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-corps);
  font-size: 17px;
  line-height: 1.65;
  color: var(--espresso);
  background: var(--creme-clair);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-titre);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
p  { margin: 0 0 1.1em; }

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* Lien d'evitement : accessibilite clavier */
.saut-contenu {
  position: absolute; left: -9999px;
  background: var(--espresso); color: var(--creme);
  padding: 12px 20px; z-index: 999;
}
.saut-contenu:focus { left: 12px; top: 12px; }

/* Surtitre dore en petites capitales espacees (reprend la maquette) */
.surtitre {
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  /* ⛔ TON SUR TON : le dore #ECCEA1 sur la creme #FAE8D1 du heros etait
     illisible (constat de Kevin le 09/09). Le surtitre prend donc l'accent
     vert sur fond clair, et garde le dore sur les fonds sombres, ou c'est
     lui qui porte le contraste. */
  color: var(--anchor);
  margin-bottom: 1.1em;
  display: block;
}
.section--claire .surtitre { color: var(--anchor); }
/* Sur fond sombre, l accent EST le fond : le surtitre repasse au dore. */
.section--sombre .surtitre { color: var(--dore); }

/* ==========================================================================
   3. Boutons
   ========================================================================== */
.bouton {
  display: inline-block;
  padding: 15px 32px;
  border-radius: var(--rayon-pilule);
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.bouton:hover { transform: translateY(-1px); }
.bouton--principal { background: var(--dore); color: var(--espresso); }
.bouton--principal:hover { background: #F3DDBB; }
.bouton--fantome {
  background: transparent;
  color: var(--espresso);
  border-color: rgba(59, 46, 37, .35);
}
.section--sombre .bouton--fantome { color: var(--creme); border-color: rgba(250, 232, 209, .4); }
.bouton--fantome:hover { border-color: currentColor; }

/* ==========================================================================
   4. En-tete
   ========================================================================== */
.entete {
  background: var(--anchor);
  color: var(--creme);
  position: sticky; top: 0; z-index: 100;
}
.entete__inner {
  display: flex; align-items: center; gap: 28px;
  min-height: 86px;
}
.entete__logo img { height: 46px; width: auto; }
.entete__logo .texte { font-family: var(--font-titre); font-size: 1.5rem; color: var(--creme); }

.nav { margin-left: 18px; }
.nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav a { font-size: .95rem; opacity: .9; padding: 6px 0; border-bottom: 1px solid transparent; }
.nav a:hover, .nav .current-menu-item > a { opacity: 1; border-bottom-color: var(--dore); }

.entete__droite { margin-left: auto; display: flex; align-items: center; gap: 22px; }

.langues { display: flex; align-items: center; gap: 8px; font-size: .9rem; letter-spacing: .06em; }
.langues .actif { color: var(--creme); border-bottom: 1px solid var(--dore); }
.langues .inactif { color: rgba(250, 232, 209, .45); transition: color var(--transition); }
a.langues__lien:hover, .langues a.inactif:hover { color: var(--creme); }

/* Selecteur de proposition colorimetrique (Velours / Argile / Nuit) */
.themes { position: relative; }
.themes__bouton {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer;
  color: rgba(250, 232, 209, .75);
  font: inherit; font-size: .9rem; letter-spacing: .06em;
  padding: 6px 2px;
  transition: color var(--transition);
}
.themes__bouton:hover, .themes__bouton[aria-expanded="true"] { color: var(--creme); }
.themes__pastille {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(250, 232, 209, .5);
  background: var(--anchor-2);
  flex: none;
}
.themes__liste {
  position: absolute; right: 0; top: calc(100% + 10px);
  min-width: 232px;
  background: var(--creme-clair);
  color: var(--espresso);
  border: 1px solid rgba(59, 46, 37, .16);
  border-radius: var(--rayon);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
  padding: 6px;
  list-style: none; margin: 0;
  display: none;
  z-index: 200;
}
.themes__liste.ouvert { display: block; }
.themes__item { width: 100%; }
.themes__choix {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit;
  padding: 10px 12px; border-radius: 9px;
}
.themes__choix:hover { background: rgba(59, 46, 37, .07); }
.themes__choix[aria-current="true"] { background: rgba(59, 46, 37, .1); font-weight: 600; }
.themes__echantillon {
  width: 20px; height: 20px; border-radius: 6px; flex: none;
  border: 1px solid rgba(59, 46, 37, .18);
}
.themes__nom { display: block; }
.themes__note { display: block; font-size: .78rem; color: var(--muted, #6f6357); }

/* Bouton hamburger : masque au-dessus de 900px */
.burger {
  display: none;
  background: none; border: 0; cursor: pointer;
  padding: 10px; margin-left: 4px;
}
/* Cible uniquement les barres, pas le libelle lecteur d'ecran. */
.burger span[aria-hidden] {
  display: block; width: 24px; height: 2px;
  background: var(--creme); margin: 5px 0;
  transition: transform var(--transition), opacity var(--transition);
}
.burger[aria-expanded="true"] span[aria-hidden]:nth-of-type(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span[aria-hidden]:nth-of-type(2) { opacity: 0; }
.burger[aria-expanded="true"] span[aria-hidden]:nth-of-type(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   5. Sections
   ========================================================================== */
.section { padding: clamp(56px, 9vw, 112px) 0; }
.section--sombre { background: var(--anchor); color: var(--creme); }
.section--claire { background: var(--creme); color: var(--espresso); }
.section--tres-claire { background: var(--creme-clair); }

.section__intro { max-width: 780px; }
.section--sombre .section__intro p { color: rgba(250, 232, 209, .82); }

/* Heros : degrade creme, texte centre (identique a la maquette mobile) */
.hero {
  background: linear-gradient(170deg, var(--creme) 0%, var(--creme-clair) 62%);
  text-align: center;
  padding: clamp(64px, 11vw, 132px) 0 clamp(56px, 9vw, 104px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* LA VIDEO DE FOND, ET LE VOILE QUI REND LE TEXTE LISIBLE.
   ⛔ Le voile n'est pas une coquetterie : sans lui, un texte espresso sur une
   eau claire devient illisible des que l'image bouge. La creme du voile garde
   l'identite du site, et la video reste perceptible dessous. */
.hero__fond {
  position: absolute; inset: 0; z-index: -1;
}
.hero__fond video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero__fond::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(170deg, rgba(250, 232, 209, .86) 0%, rgba(253, 244, 232, .92) 62%);
}
/* Qui demande moins d'animation ne la subit pas : l'image de repli suffit. */
@media (prefers-reduced-motion: reduce) {
  .hero__fond video { display: none; }
  .hero__fond { background: url("../uploads/aimes-medias/lac-fond.jpg") center/cover no-repeat; }
}
.hero__contenu { max-width: 860px; margin-inline: auto; }
.hero h1 { color: var(--espresso); }
.hero__accroche {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--teal);
  max-width: 620px;
  margin-inline: auto;
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center; margin-top: 34px;
}

/* ==========================================================================
   6. Cartes numerotees (bloc « Amont, pendant, aval »)
   ========================================================================== */
.grille { display: grid; gap: 22px; }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--2 { grid-template-columns: repeat(2, 1fr); }

.carte {
  border: 1px solid rgba(250, 232, 209, .18);
  border-radius: var(--rayon);
  padding: 34px 30px 38px;
  background: rgba(250, 232, 209, .03);
}
.section--claire .carte {
  border-color: rgba(59, 46, 37, .16);
  background: rgba(255, 255, 255, .4);
}
.carte__numero {
  font-family: var(--font-titre);
  font-size: 1.7rem;
  color: var(--dore);
  display: block;
  margin-bottom: 18px;
}
.section--claire .carte__numero { color: #A98A5B; }
.carte h3 { margin-bottom: .6em; }
.carte p:last-child { margin-bottom: 0; }

/* ==========================================================================
   7. Pied de page
   ========================================================================== */
.pied {
  background: var(--anchor);
  color: rgba(250, 232, 209, .8);
  padding: 64px 0 34px;
  font-size: .93rem;
}
.pied a:hover { color: var(--dore); }
.pied__grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.pied h4 {
  font-family: var(--font-corps);
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dore); margin-bottom: 1.1em;
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: .5em; }
.pied__bas {
  margin-top: 48px; padding-top: 22px;
  border-top: 1px solid rgba(250, 232, 209, .14);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: .85rem; color: rgba(250, 232, 209, .55);
}

/* ==========================================================================
   7bis. Contenu construit avec l'editeur de blocs
   --------------------------------------------------------------------------
   Le contenu des pages est edite dans WordPress, pas code dans le theme.
   Ces regles donnent aux blocs natifs l'allure de la charte, pour que
   l'ajout d'une section depuis l'editeur soit deja au bon format.
   ========================================================================== */

/* Largeur de lecture par defaut ; « pleine largeur » deborde volontairement. */
.entree-contenu > * {
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.entree-contenu > .alignfull {
  max-width: none;
  padding-inline: 0;
}
.entree-contenu > .alignwide { max-width: 1400px; }

/* Un groupe pleine largeur = une section : il reprend les fonds de la charte. */
.wp-block-group.alignfull > .wp-block-group__inner-container,
.wp-block-group.alignfull > :where(:not(.alignfull)) {
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.wp-block-group.alignfull {
  padding-block: clamp(56px, 9vw, 112px);
}

/* Fonds : utilisables depuis l'editeur via les couleurs de la palette. */
.wp-block-group.has-espresso-background-color { background-color: var(--anchor) !important; color: var(--creme); }
.wp-block-group.has-espresso-background-color .surtitre { color: var(--dore); }
.wp-block-group.has-espresso-background-color a { color: var(--dore); }
.wp-block-group.has-creme-background-color,
.wp-block-group.has-creme-clair-background-color { color: var(--espresso); }

/* Le bandeau d'accueil. */
.wp-block-group.hero {
  background: linear-gradient(170deg, var(--creme) 0%, var(--creme-clair) 62%);
  text-align: center;
}
/* Specificite renforcee : sinon la largeur de section (1240px) l'emporte. */
.entree-contenu .wp-block-group.hero > * { max-width: 860px; margin-inline: auto; }
.wp-block-group.hero .wp-block-buttons { justify-content: center; }

/* Colonnes utilisees en cartes : on ajoute la classe « carte » a la colonne. */
.wp-block-column.carte {
  border: 1px solid rgba(59, 46, 37, .16);
  border-radius: var(--rayon);
  padding: 34px 30px 38px;
  background: rgba(255, 255, 255, .4);
}
.has-espresso-background-color .wp-block-column.carte {
  border-color: rgba(250, 232, 209, .18);
  background: rgba(250, 232, 209, .03);
}
.wp-block-column.carte > *:last-child { margin-bottom: 0; }

/* Boutons de l'editeur alignes sur ceux du theme. */
.wp-block-button__link {
  border-radius: var(--rayon-pilule);
  padding: 15px 32px;
  font-size: .95rem;
  font-weight: 500;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  border-width: 1px;
}

/* Espacement vertical du contenu edite. */
.entree-contenu > * + * { margin-top: 0; }
.wp-block-group.alignfull > .wp-block-group__inner-container > * { margin-bottom: 1.1em; }

/* Sur mobile les colonnes de l'editeur s'empilent : on garde l'ecart. */
@media (max-width: 781px) {
  .wp-block-columns { gap: 22px; }
}

/* ==========================================================================
   8. Contenu editorial (articles et pages WordPress)
   ========================================================================== */
.contenu { max-width: 780px; margin-inline: auto; }
.contenu img { border-radius: var(--rayon); margin-block: 1.5em; }
.contenu blockquote {
  border-left: 3px solid var(--dore);
  margin: 1.6em 0; padding-left: 22px;
  font-family: var(--font-titre); font-size: 1.25rem;
}
.contenu ul, .contenu ol { padding-left: 1.3em; }
.contenu a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }

.pagination { display: flex; gap: 10px; justify-content: center; margin-top: 40px; }
.pagination .page-numbers {
  padding: 9px 15px; border-radius: var(--rayon-pilule);
  border: 1px solid rgba(59, 46, 37, .2);
}
.pagination .current { background: var(--espresso); color: var(--creme); border-color: var(--espresso); }

/* ==========================================================================
   9. Responsive
   ========================================================================== */

/* Tablette */
@media (max-width: 1000px) {
  .grille--3 { grid-template-columns: repeat(2, 1fr); }
  .pied__grille { grid-template-columns: 1fr 1fr; }
}

/* Mobile : la nav passe en panneau deroulant, comme sur la maquette */
@media (max-width: 900px) {
  .entete__inner { min-height: 72px; }
  .entete__logo img { height: 38px; }
  .burger { display: block; order: 3; }
  .entete__droite { gap: 14px; }

  /* Le CTA du header se comprimerait en pastille multiligne : on le retire,
     il reste presente dans le hero et dans le menu deroulant. Conforme a la
     maquette mobile, qui ne garde que le logo et le selecteur de langue. */
  .entete__droite .bouton--principal { display: none; }

  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--espresso);
    margin: 0;
    max-height: 0; overflow: hidden;
    transition: max-height 260ms ease;
    border-top: 1px solid rgba(250, 232, 209, .12);
  }
  .nav.ouvert { max-height: 70vh; overflow-y: auto; }
  .nav ul { flex-direction: column; gap: 0; padding: 6px 0 14px; }
  .nav li { border-bottom: 1px solid rgba(250, 232, 209, .07); }
  .nav a { display: block; padding: 15px var(--gouttiere); border-bottom: 0; }
}

/* Telephone */
@media (max-width: 640px) {
  body { font-size: 16px; }
  :root { --gouttiere: 20px; }
  .grille--3, .grille--2 { grid-template-columns: 1fr; }
  .pied__grille { grid-template-columns: 1fr; gap: 30px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .bouton { width: 100%; text-align: center; }
  .carte { padding: 28px 24px 30px; }
  .pied__bas { flex-direction: column; }
}

/* Respect de la preference de mouvement reduit */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .bouton:hover { transform: none; }
}

/* Classes WordPress requises pour la validation du theme */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.alignleft { float: left; margin-right: 1.5em; }
.alignright { float: right; margin-left: 1.5em; }
.aligncenter { margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: .85rem; opacity: .75; }
.sticky, .gallery-caption, .bypostauthor { }

/* ==========================================================================
   10. Formes organiques
   --------------------------------------------------------------------------
   ⭐ D'OU CELA VIENT. Kevin a demande de s'inspirer de u-stryv.com, dont le
   vocabulaire a ete RELEVE dans la page plutot que devine a l'oeil :
     - des « blobs » : un border-radius a huit valeurs, entre 24 % et 60 % ;
     - des vagues entre les sections : un SVG en viewBox 0 0 1440 90 ;
     - de fins traits serpentins en decor.
   On en reprend les deux premiers. Le troisieme est ecarte pour l'instant :
   sur un site medical, un trait qui traverse le contenu se remarque plus qu'il
   n'accompagne.

   ⛔ AUCUN CONTENU N'EST TOUCHE. La regle du theme est que le texte vit dans
   des pages WordPress editables ; ces formes se posent donc sur les blocs
   NATIFS, par des pseudo-elements. Ajouter une section depuis l'editeur
   continue de marcher, et la vague apparait toute seule.
   ========================================================================== */

:root {
  /* La vague, en masque : le blanc est ce qui reste visible. */
  --vague: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,54 C240,18 480,90 720,54 C960,18 1200,90 1440,54 L1440,90 L0,90 Z' fill='%23fff'/%3E%3C/svg%3E");
  --vague-hauteur: clamp(28px, 4vw, 54px);
}

/* --------------------------------------------------------------------------
   La vague entre deux sections.
   ⭐ ELLE PREND LA COULEUR DE SA PROPRE SECTION (`background: inherit`), et
   c'est ce qui la rend juste dans les TROIS variantes de theme et pour
   n'importe quelle couleur choisie dans l'editeur. Une vague peinte en dur
   serait fausse au premier changement de palette.
   ⚠ `preserveAspectRatio='none'` : la vague s'etire sur toute la largeur au
   lieu de se recadrer, sinon elle se coupe sur un ecran etroit.
   -------------------------------------------------------------------------- */
.entree-contenu > .alignfull.has-background { position: relative; }

.entree-contenu > .alignfull.has-background::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(-1 * var(--vague-hauteur) + 1px);   /* 1px de recouvrement : pas de filet clair */
  height: var(--vague-hauteur);
  background: inherit;
  -webkit-mask: var(--vague) no-repeat center bottom / 100% 100%;
          mask: var(--vague) no-repeat center bottom / 100% 100%;
  pointer-events: none;
}

/* ⛔ PAS DE VAGUE SUR LA PREMIERE SECTION : elle mordrait sur l'en-tete. */
.entree-contenu > .alignfull.has-background:first-child::before { display: none; }

/* --------------------------------------------------------------------------
   Les cartes, en feuille.
   ⚠ ON NE REPREND PAS LE BLOB COMPLET DE u-stryv. Leurs cartes portent trois
   lignes centrees ; les notres portent un paragraphe justifie a gauche, et une
   courbe forte sur les quatre coins viendrait manger le texte. Deux coins
   opposes fortement arrondis donnent la meme parente visuelle sans rien
   coincer — et la diagonale ainsi creee reprend le mouvement des vagues.
   -------------------------------------------------------------------------- */
/* ⛔ LA SPECIFICITE COMPTE, ET ELLE M'A EU. La section 8 pose deja
   `.wp-block-column.carte { border-radius: var(--rayon) }` — deux classes,
   donc plus fort qu'un simple `.carte`, meme ecrit plus bas dans le fichier.
   Ma premiere version n'avait aucun effet et rien ne le disait : la page
   s'affichait, simplement inchangee. On reprend donc les deux ecritures. */
/* ⭐ UN VRAI GALET, PAS DEUX COINS ARRONDIS. Les quatre coins different, et
   chacun a son rayon horizontal ET vertical — c'est la syntaxe a huit valeurs
   de u-stryv, celle qui donne une forme dessinee a la main plutot qu'un
   rectangle adouci.
   ⛔ MAIS EN PIXELS, PAS EN POURCENTS. u-stryv les ecrit en pourcents parce que
   ses cartes sont presque carrees ; les notres font 440 px de large sur 250 de
   haut, et 50 % y vaudrait 220 px de courbe horizontale — la carte deviendrait
   une lentille et le texte n'aurait plus de place. Les pixels tiennent la meme
   forme quelle que soit la largeur de la colonne.
   ⚠ LE REMBOURRAGE SUIT LA COURBE : ce que le galet prend a l'angle, on le rend
   au texte, sinon la premiere ligne du titre vient toucher le bord. */
.carte,
.wp-block-column.carte {
  border-radius: 96px 34px 78px 42px / 62px 26px 54px 34px;
  padding: 52px 44px 50px;
}
/* Alterner le sens evite l'effet de gabarit repete.
   ⚠ Les cartes du site sont des COLONNES WordPress, pas la grille du theme :
   on vise les deux, sinon l'alternance ne joue que sur les pages codees. */
/* ⛔ TROIS FORMES QUI TOURNENT, ET NON « UNE SUR DEUX ». Premiere version :
   `nth-child(even)` pour la forme miroir, plus une troisieme forme sur
   `nth-child(3n+2)`. Mesure a l'ecran : dans une rangee de TROIS, les cartes 1
   et 3 recevaient la meme forme et se repondaient d'un bout a l'autre de la
   rangee — exactement l'effet de gabarit repete qu'on voulait eviter. Un cycle
   de trois donne trois formes differentes dans une rangee de trois, et deux
   dans une rangee de deux. */
.carte:nth-child(3n+2),
.wp-block-columns > .wp-block-column.carte:nth-child(3n+2) {
  /* Le galet miroir. */
  border-radius: 34px 96px 42px 78px / 26px 62px 34px 54px;
}
.carte:nth-child(3n+3),
.wp-block-columns > .wp-block-column.carte:nth-child(3n+3) {
  /* Le galet couche : sa masse est en bas, il pose la rangee. */
  border-radius: 46px 82px 96px 38px / 34px 52px 60px 30px;
}

/* Les images des pages prennent la meme parente, en plus libre. */
.entree-contenu figure.wp-block-image img,
.entree-contenu .wp-block-image.est-organique img {
  border-radius: 52% 48% 46% 54% / 44% 42% 58% 56%;
}

@media (max-width: 640px) {
  /* Sur mobile la carte est etroite : une courbe de 72px la deformerait. */
  /* Sur une carte etroite, une courbe de 96 px mangerait la moitie de la
     largeur : on garde les TROIS formes, a l'echelle.
     ⛔ UNE SEULE FORME POUR TOUTES ETAIT UNE FAUTE, et mesuree : sur telephone
     les cartes s'empilent en colonne, donc trois galets identiques se suivent
     verticalement — l'effet de gabarit repete que le cycle de trois existe
     justement pour eviter, et il se voit MIEUX empile que cote a cote. */
  .carte, .wp-block-column.carte {
    border-radius: 52px 20px 44px 24px / 40px 18px 34px 22px;
    padding: 40px 30px 38px;
  }
  .carte:nth-child(3n+2),
  .wp-block-columns > .wp-block-column.carte:nth-child(3n+2) {
    border-radius: 20px 52px 24px 44px / 18px 40px 22px 34px;
  }
  .carte:nth-child(3n+3),
  .wp-block-columns > .wp-block-column.carte:nth-child(3n+3) {
    border-radius: 26px 44px 52px 22px / 22px 34px 40px 18px;
  }
}

/* ⚠ Qui demande moins d'animation demande aussi moins de fantaisie de forme :
   on garde la vague, qui est structurelle, et on calme les blobs. */
@media (prefers-reduced-motion: reduce) {
  .entree-contenu figure.wp-block-image img { border-radius: var(--rayon); }
}

/* ==========================================================================
   11. La croix, a la suite du texte des boutons
   --------------------------------------------------------------------------
   ⭐ LA FORME EST CELLE DU DRAPEAU SUISSE, LES COULEURS SONT CELLES DU SITE.
   Le cabinet est a Morges, dans le canton de Vaud : c'est un clin d'oeil au
   pays, pas une reprise du drapeau. Ni rouge ni blanc n'apparaissent.

   ⭐ LES PROPORTIONS SONT LES VRAIES. Decret federal de 1889 : les branches
   sont « d'un sixieme plus longues que larges ». Sur un carre de 32, une
   branche large de 6 et longue de 7 de part et d'autre du centre. Le SVG etant
   carre, toute echelle uniforme conserve ce rapport.

   ⛔ ELLE EST DANS LE FLUX, PAS EN CALQUE ABSOLU, ET C'EST UNE CORRECTION.
   Trois versions l'ont posee en `position: absolute` : centree, puis en bas a
   gauche, puis a droite. Dans les trois cas elle passait DERRIERE le texte —
   mesure a l'ecran : 14 px de chevauchement sur la fin de « rendez-vous ». Un
   calque absolu ne prend pas de place, donc rien ne pousse le texte : le
   recouvrement est inevitable. Un pseudo-element EN LIGNE, lui, occupe sa
   place et le bouton s'elargit d'autant. La croix vient alors reellement A LA
   SUITE du mot, jamais dessous.

   ⚠ ET ON REND CE QU'ON PREND : le rembourrage droit passe de 32 a 14 px, pour
   que le bouton ne grossisse que de quelques pixels. Sans cela celui de
   l'en-tete repasse sur deux lignes et casse le menu — c'est arrive.
   ========================================================================== */

:root {
  --croix: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M13 9h6v4h4v6h-4v4h-6v-4H9v-6h4z' fill='%23fff'/%3E%3C/svg%3E");
  --croix-cote: 18px;
  --croix-ecart: 9px;      /* l'air entre le mot et la croix */
  --croix-repos: .42;
  --croix-survol: 1;
}

.bouton,
.wp-block-button__link {
  /* Le mot et la croix sur une seule ligne, alignes par leur milieu. */
  display: inline-flex;
  align-items: center;
  gap: var(--croix-ecart);
  padding-right: 14px;
  /* ⛔ SANS CECI, LE BOUTON DE L'EN-TETE SE CASSE EN DEUX. La croix prise dans
     le flux elargit le bouton ; dans l'en-tete, la place manque et le
     navigateur coupe « Prendre rendez-vous » entre deux mots. Mesure : 82 px de
     haut au lieu de 57. On interdit la coupure : le bouton reste d'un bloc et
     c'est la barre qui se resserre. */
  white-space: nowrap;
}
/* Les entrees de menu se cassaient de la meme facon, par ricochet. */
.entete nav a { white-space: nowrap; }

.bouton::after,
.wp-block-button__link::after {
  content: "";
  flex: none;
  width: var(--croix-cote);
  height: var(--croix-cote);
  background-color: var(--espresso);
  opacity: var(--croix-repos);
  -webkit-mask: var(--croix) no-repeat center / contain;
          mask: var(--croix) no-repeat center / contain;
  transition: opacity 260ms ease;
}

.bouton:hover::after,
.wp-block-button__link:hover::after,
.bouton:focus-visible::after,
.wp-block-button__link:focus-visible::after { opacity: var(--croix-survol); }

/* Sur fond sombre et sur le bouton fantome, l'or : il colore sans assombrir. */
.bouton--fantome::after,
.wp-block-button.is-style-outline > .wp-block-button__link::after,
.section--sombre .bouton::after { background-color: var(--dore-fonce); }
.section--sombre .bouton--principal::after { background-color: var(--espresso); }

/* ⛔ LE BOUTON FANTOME GARDE LE GABARIT DU THEME. WordPress core impose
   `0.667em/1.333em` aux boutons « contour » par une regle de meme specificite
   mais placee plus loin ; sans ceci il est plus petit que le dore. */
.bouton--fantome,
.wp-block-button.is-style-outline > .wp-block-button__link {
  padding: 15px 14px 15px 32px;
}

@media (max-width: 480px) {
  :root { --croix-cote: 15px; --croix-ecart: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .bouton::after, .wp-block-button__link::after { transition: none; }
}


/* ==========================================================================
   Bandes d'images
   ========================================================================== */
/* ⚠ UNE HAUTEUR BORNEE, ET UN RECADRAGE PAR LE CENTRE. Une photo de 1800 px
   posee pleine largeur pousserait tout le reste de la page sous la ligne de
   flottaison ; on en montre une bande, comme dans la maquette. */
/* ⛔ LA VAGUE DE LA SECTION SUIVANTE REMONTE DE `--vague-hauteur` et venait
   mordre sur la legende (constat de Kevin le 09/09). On lui laisse sa place
   sous le texte, plutot que de deplacer la vague, qui est structurelle. */
.image-bande { margin: 0; padding-bottom: var(--vague-hauteur); }
.image-bande img {
  width: 100%;
  height: clamp(220px, 38vw, 460px);
  object-fit: cover;
  display: block;
}
.image-bande figcaption {
  text-align: center;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--anchor);
  padding: 12px 16px 0;
}


/* ⛔ DEUX CORRECTIONS MESUREES A L'ECRAN LE 09/09.
   1. La mise en page « contrainte » de Gutenberg impose une largeur maximale a
      TOUS les enfants du groupe, y compris a un element positionne en absolu :
      le fond video restait au milieu, avec des bandes grises de chaque cote.
   2. La courbe organique des images de contenu est faite pour un portrait dans
      une carte. Appliquee a une bande panoramique, elle la transformait en
      ellipse geante. La bande garde donc une courbe douce, pas un blob. */
.hero > .hero__fond {
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
}
.entree-contenu figure.wp-block-image.image-bande img {
  border-radius: var(--rayon);
}