/* ==========================================================================
   tanah — components.css
   Boutons, liens, cartes, chiffres clés, aplats, formulaires, listes,
   accordéon, tons de section, univers ROOT / RISE, header, footer.
   Les classes .is-hover / .is-focus forcent un état (guide de style).
   ========================================================================== */

/* ==========================================================================
   Boutons
   - .bouton            principal : terracotta foncée, texte sable (5,0:1)
   - .bouton--encre     secondaire : encre pleine
   - .bouton--contour   tertiaire : contour fin
   - .bouton--clair     sur fond foncé ou terracotta
   ========================================================================== */
.bouton {
  --btn-fond: var(--terracotta-fonce);
  --btn-texte: var(--sable);
  --btn-bord: var(--terracotta-fonce);
  --btn-fond-survol: var(--terracotta-profond);
  --btn-texte-survol: var(--sable);
  --btn-bord-survol: var(--terracotta-profond);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--hauteur-controle);
  padding: 0.75rem 1.75rem;
  border: 1px solid var(--btn-bord);
  border-radius: var(--rayon-controle);
  background: var(--btn-fond);
  color: var(--btn-texte);
  font-family: var(--police-texte);
  font-size: var(--texte-sm);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.bouton:hover,
.bouton.is-hover {
  background: var(--btn-fond-survol);
  border-color: var(--btn-bord-survol);
  color: var(--btn-texte-survol);
}

.bouton--encre,
.bouton--secondaire {
  --btn-fond: var(--encre);
  --btn-texte: var(--sable);
  --btn-bord: var(--encre);
  --btn-fond-survol: transparent;
  --btn-texte-survol: var(--encre);
  --btn-bord-survol: var(--encre);
}

.bouton--contour {
  --btn-fond: transparent;
  --btn-texte: var(--texte);
  --btn-bord: currentColor;
  --btn-fond-survol: var(--texte);
  --btn-texte-survol: var(--fond);
  --btn-bord-survol: var(--texte);
}

.bouton--clair {
  --btn-fond: var(--sable);
  --btn-texte: var(--encre);
  --btn-bord: var(--sable);
  --btn-fond-survol: transparent;
  --btn-texte-survol: var(--sable);
  --btn-bord-survol: var(--sable);
}

.bouton--petit { min-height: 2.5rem; padding: 0.5rem 1.25rem; white-space: nowrap; }

.bouton--large { width: 100%; }
@media (min-width: 40rem) { .bouton--large { width: auto; } }

.bouton:disabled,
.bouton[aria-disabled="true"],
.is-disabled,
.is-disabled:hover {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  align-items: center;
}

/* ---------- Lien de section : capitales espacées, trait fin (maquette) ---------- */
.lien-trait {
  display: inline-block;
  padding-bottom: 0.55em;
  border-bottom: 1px solid currentColor;
  font-family: var(--police-texte);
  font-size: var(--texte-xs);
  font-weight: 500;
  letter-spacing: var(--interlettrage-surtitre);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition);
}
.lien-trait:hover,
.lien-trait.is-hover { color: var(--accent-texte); }

/* Bouton présenté comme un lien (ex. « Gérer mes cookies ») */
.lien-bouton {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
  text-align: left;
  cursor: pointer;
}
.lien-bouton:hover { text-decoration: underline; text-decoration-thickness: 1px; }

/* ==========================================================================
   Logotype (placeholder texte en attendant le logo définitif)
   ========================================================================== */
.logo {
  font-family: var(--police-titre);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: var(--interlettrage-logo);
  text-transform: lowercase;
  text-decoration: none;
}
.logo:hover { color: inherit; }

/* ==========================================================================
   Aplats (à la place des photos)
   ========================================================================== */
.aplat {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--aplat);
}
.aplat--paysage { aspect-ratio: 3 / 2; }

/* Photos : même cadre que les aplats qu'elles remplacent, recadrées au centre */
.photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--aplat);
}
.aplat--large { aspect-ratio: 16 / 9; }
.aplat--carre { aspect-ratio: 1 / 1; }
.aplat--portrait-long { aspect-ratio: 2 / 3; }

.aplat--sable { background: var(--aplat-2); }
.aplat--olive { background: var(--olive); }
.aplat--ocean { background: var(--ocean); }
.aplat--terracotta { background: var(--terracotta); }
.aplat--photo { background: var(--aplat-photo); }

/* Étiquette lisible sur tous les aplats */
.aplat__legende {
  position: absolute;
  left: var(--esp-3);
  bottom: var(--esp-3);
  max-width: calc(100% - 2 * var(--esp-3));
  padding: var(--esp-1) var(--esp-2);
  background: var(--fond-champ);
  color: var(--encre);
  font-size: var(--texte-xs);
  line-height: 1.4;
}

/* Compatibilité étape 1 */
.placeholder {
  display: grid;
  place-items: center;
  min-height: 12rem;
  padding: var(--esp-4);
  background: var(--aplat);
  color: var(--texte-attenue);
  font-size: var(--texte-sm);
  text-align: center;
}
.placeholder + .placeholder { margin-top: var(--esp-3); }

/* ==========================================================================
   Cartes
   ========================================================================== */
.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}
.carte .aplat { margin-bottom: var(--esp-2); }
.carte__titre {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--texte-lg);
  font-weight: 400;
  line-height: 1.3;
}
.carte__texte {
  margin: 0;
  color: var(--texte-doux);
}
.carte .surtitre { margin-bottom: 0; }

/* Carte entièrement cliquable : le lien du titre couvre la carte */
.carte__lien { text-decoration: none; }
.carte__lien::after { content: ""; position: absolute; inset: 0; }
.carte:hover .carte__lien,
.carte.is-hover .carte__lien {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.carte:hover .aplat,
.carte.is-hover .aplat { filter: brightness(0.96); }
.carte .aplat { transition: filter var(--transition); }
.carte:focus-within { outline: 2px solid var(--focus); outline-offset: 6px; }
.carte__lien:focus-visible { outline: none; }

/* ---------- Chiffres clés (faits, jamais de faux compteur) ---------- */
.chiffres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-5) var(--gouttiere-grille);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 64rem) {
  .chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.chiffre {
  padding-top: var(--esp-3);
  border-top: 1px solid var(--texte);
}
.chiffre__valeur {
  display: block;
  font-family: var(--police-titre);
  font-size: var(--texte-2xl);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}
.chiffre__libelle {
  display: block;
  margin-top: var(--esp-2);
  color: var(--texte-doux);
}

/* ==========================================================================
   Formulaires
   ========================================================================== */
.formulaire { display: grid; gap: var(--esp-4); }
@media (min-width: 40rem) {
  .formulaire--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4) var(--gouttiere-grille); }
  .formulaire--2col > .champ--plein,
  .formulaire--2col > fieldset,
  .formulaire--2col > .formulaire__actions { grid-column: 1 / -1; }
}

.champ { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }

.champ__label {
  font-size: var(--texte-sm);
  font-weight: 500;
}
.champ__facultatif { font-weight: 400; color: var(--texte-doux); }
.champ__aide { margin: 0; font-size: var(--texte-xs); color: var(--texte-doux); }

.champ__input {
  width: 100%;
  min-height: var(--hauteur-controle);
  padding: 0.75rem 1rem;
  border: 1px solid var(--trait-champ);
  border-radius: var(--rayon-controle);
  background: var(--fond-champ);
  color: var(--encre);
  font-size: 1rem;                /* ≥ 16 px : pas de zoom auto sur iPhone */
  line-height: 1.4;
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
  appearance: none;
}
.champ__input::placeholder { color: var(--texte-attenue); opacity: 1; }
.champ__input:hover { border-color: var(--encre); }
.champ__input:focus-visible,
.champ__input.is-focus {
  border-color: var(--encre);
  box-shadow: inset 0 0 0 1px var(--encre);
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
textarea.champ__input { min-height: 8rem; resize: vertical; }

/* Liste déroulante : chevron dessiné en CSS (fonctionnel, pas décoratif) */
select.champ__input {
  padding-right: 2.75rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--encre) 50%),
    linear-gradient(135deg, var(--encre) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 52%, calc(100% - 0.95rem) 52%;
  background-size: 0.32rem 0.32rem;
  background-repeat: no-repeat;
}

/* Erreur : bordure + message texte relié (aria-describedby), jamais la couleur seule */
.champ--erreur .champ__input,
.champ__input[aria-invalid="true"] { border-color: var(--terracotta-fonce); box-shadow: inset 0 0 0 1px var(--terracotta-fonce); }
.champ__erreur {
  margin: 0;
  font-size: var(--texte-xs);
  font-weight: 500;
  color: var(--terracotta-fonce);
}

/* Groupes (choix de paiement, consentements) */
fieldset.groupe { margin: 0; padding: 0; border: 0; min-width: 0; }
.groupe__legende {
  margin-bottom: var(--esp-3);
  padding: 0;
  font-size: var(--texte-sm);
  font-weight: 500;
}

/* Choix en blocs cliquables (acompte / intégral) */
.choix-liste { display: grid; gap: var(--esp-3); }
@media (min-width: 40rem) { .choix-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.choix {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--esp-1) var(--esp-3);
  align-items: start;
  padding: var(--esp-4);
  border: 1px solid var(--trait-champ);
  border-radius: var(--rayon-controle);
  background: var(--fond-champ);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.choix:hover { border-color: var(--encre); }
.choix:has(input:checked) {
  border-color: var(--terracotta-fonce);
  box-shadow: inset 0 0 0 1px var(--terracotta-fonce);
}
.choix:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.choix input { grid-row: span 2; margin: 0.2rem 0 0; }
.choix__titre { font-weight: 500; }
.choix__detail { font-size: var(--texte-sm); color: var(--texte-doux); }

/* Cases et boutons radio natifs, teintés */
.case {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--esp-3);
  align-items: start;
  font-size: var(--texte-sm);
  cursor: pointer;
}
.case input,
.choix input {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--terracotta-fonce);
  cursor: pointer;
}
.case input { margin: 0.1rem 0 0; }

.formulaire__actions { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; }
.formulaire__mention { margin: 0; font-size: var(--texte-xs); color: var(--texte-doux); }

/* Piège anti-spam (honeypot) : invisible pour les humaines */
.champ-piege {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   Listes à filets (inclus / non inclus…) — sans pictogrammes
   ========================================================================== */
.liste-filets {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--trait);
}
.liste-filets > li {
  padding: var(--esp-3) 0;
  border-top: 1px solid var(--trait);
}
.liste-filets__detail { display: block; color: var(--texte-doux); }

/* ==========================================================================
   Accordéon (FAQ) — <details> natif
   ========================================================================== */
.accordeon { border-bottom: 1px solid var(--trait); }
.accordeon__item { border-top: 1px solid var(--trait); }
.accordeon__question {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-4) 0;
  font-family: var(--police-titre);
  font-size: var(--texte-lg);
  font-weight: 400;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}
.accordeon__question::-webkit-details-marker { display: none; }
.accordeon__question::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--police-texte);
  font-weight: 300;
}
.accordeon__item[open] > .accordeon__question::after { content: "–"; }
.accordeon__question:hover { color: var(--accent-texte); }
.accordeon__reponse { padding-bottom: var(--esp-4); max-width: var(--largeur-texte); }

/* ==========================================================================
   Tons de section
   .section--encre et .section--terracotta : 1 ou 2 par page maximum.
   ========================================================================== */
.section--soutenue { --fond: var(--sable-soutenu); background: var(--fond); }

.section--encre,
.section--terracotta,
.section--olive,
.site-footer {
  --texte: var(--sable-clair);                 /* 11,6:1 sur encre */
  --texte-doux: rgba(233, 225, 214, 0.8);
  --titre: var(--sable-clair);
  --accent-texte: var(--sable-clair);
  --focus: var(--sable-clair);
  --trait: rgba(233, 225, 214, 0.22);
  background: var(--fond);
  color: var(--texte);
}
.section--encre, .site-footer { --fond: var(--encre); }
/* Grands blocs pleine couleur avant le pied de page : olive (la terracotta reste aux accents).
   Olive foncée #5A674F : le sable clair n'atteint que 3,6:1 sur l'olive #6B7A5E, 4,7:1 ici. */
.section--olive { --fond: var(--olive-fonce); }
.section--terracotta {
  --fond: var(--terracotta-fonce);
  --texte: var(--sable);                       /* 5,0:1 (le sable clair n'atteint que 4,3:1) */
  --texte-doux: var(--sable);
  --titre: var(--sable);
  --accent-texte: var(--sable);
  --focus: var(--sable);
}

/* ==========================================================================
   Univers ROOT (Ubud) / RISE (Uluwatu)
   data-univers="root|rise" sur une section ou un bloc.
   Texte toujours en encre sur les fonds pâles.
   ========================================================================== */
[data-univers="root"] {
  --fond: var(--root-pale);
  --univers-accent: var(--olive);
}
[data-univers="rise"] {
  --fond: var(--rise-pale);
  --univers-accent: var(--ocean);
}
[data-univers] {
  --accent-texte: var(--encre);
  --titre: var(--texte);
  background: var(--fond);
  border-top: 3px solid var(--univers-accent);
}



.univers__bloc { padding: var(--esp-6) var(--esp-4); }
@media (min-width: 64rem) { .univers__bloc { padding: var(--esp-7) var(--esp-6); } }

/* ==========================================================================
   Bandeau d'information (ex. « Version provisoire »)
   ========================================================================== */
.bandeau-provisoire {
  max-width: var(--largeur-texte);
  padding: var(--esp-3) var(--esp-4);
  border-left: 3px solid var(--terracotta-fonce);
  background: var(--fond-champ);
  font-size: var(--texte-sm);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--sable);
  border-bottom: 1px solid var(--trait);
  padding-top: env(safe-area-inset-top);
}

.site-header__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
  min-height: var(--hauteur-header);
}
@media (min-width: 48rem) { .site-header__barre { gap: var(--esp-4); } }

.menu-bouton {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 2.75rem;
  padding: 0 var(--esp-2);
  margin-left: var(--esp-1);
  margin-right: calc(-1 * var(--esp-2));
  border: 0;
  background: none;
  font-size: var(--texte-sm);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.menu-bouton__icone,
.menu-bouton__icone::before {
  display: block;
  width: 1.25rem;
  height: 1px;
  background: currentColor;
  transition: transform var(--transition);
}
.menu-bouton__icone { position: relative; transform: translateY(-3px); }
.menu-bouton__icone::before { content: ""; position: absolute; top: 6px; }
.menu-ouvert .menu-bouton__icone { transform: rotate(45deg); }
.menu-ouvert .menu-bouton__icone::before { top: 0; transform: rotate(-90deg); }

.nav-principale ul { margin: 0; padding: 0; list-style: none; }
.nav-principale a:not(.bouton) { text-decoration: none; letter-spacing: 0.01em; }
.nav-principale a:not(.bouton):hover { color: inherit; text-decoration: underline; }
.nav-principale a:not(.bouton)[aria-current="page"] { text-decoration: underline; }

/* Mobile : menu plein écran sous l'en-tête, « Réserver » en bouton pleine largeur */
@media (max-width: 47.99rem) {
  .nav-principale {
    position: fixed;
    inset: calc(var(--hauteur-header) + env(safe-area-inset-top)) 0 0 0;
    padding: var(--esp-6) var(--gouttiere) calc(var(--esp-6) + env(safe-area-inset-bottom));
    background: var(--sable);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--transition), visibility var(--transition);
  }
  .menu-ouvert .nav-principale { visibility: visible; opacity: 1; }
  .menu-ouvert body { overflow: hidden; }
  .nav-principale li + li { margin-top: var(--esp-4); }
  .nav-principale a:not(.bouton) {
    font-family: var(--police-titre);
    font-size: var(--texte-2xl);
    letter-spacing: -0.015em;
  }
  .nav-principale .nav-reserver { margin-top: var(--esp-6); }
  .nav-principale .nav-reserver .bouton { width: 100%; min-height: var(--hauteur-controle); font-size: var(--texte-base); }
}

/* Desktop : navigation discrète en ligne, bouton principal à droite */
@media (min-width: 48rem) {
  .menu-bouton { display: none; }
  .nav-principale ul { display: flex; align-items: center; gap: var(--esp-5); }
  .nav-principale a:not(.bouton) { font-size: var(--texte-sm); }
  .nav-principale .nav-reserver { margin-left: var(--esp-2); }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  margin-top: 0;
  padding: var(--esp-7) 0 calc(var(--esp-5) + env(safe-area-inset-bottom));
  font-size: var(--texte-sm);
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--texte); text-decoration: underline; }

/* Mobile : logo pleine largeur, « Explorer » et « Informations » côte à côte, « Contact » en dessous */
.site-footer__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-6) var(--gouttiere-grille);
}
.site-footer__marque,
.site-footer__contact { grid-column: 1 / -1; }
@media (min-width: 48rem) {
  .site-footer__grille { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .site-footer__marque,
  .site-footer__contact { grid-column: auto; }
}

.site-footer__promesse {
  margin-top: var(--esp-4);
  max-width: 18rem;
  font-family: var(--police-titre);
  font-size: var(--texte-lg);
  line-height: 1.3;
}

.site-footer__titre {
  margin-bottom: var(--esp-3);
  font-family: var(--police-texte);
  font-size: var(--texte-xs);
  font-weight: 500;
  letter-spacing: var(--interlettrage-surtitre);
  text-transform: uppercase;
  color: var(--texte-doux);
}
.site-footer ul { margin: 0; padding: 0; list-style: none; }
/* Liens du footer : zone tactile d'au moins 44 px de haut */
.site-footer li a,
.site-footer .lien-bouton { display: inline-block; padding-block: 0.75rem; line-height: 1.4; }
.site-footer .site-footer__titre { margin-bottom: var(--esp-1); }


.site-footer__bas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-4);
  margin-top: var(--esp-7);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--trait);
  font-size: var(--texte-xs);
  color: var(--texte-doux);
}

/* ==========================================================================
   5 piliers en blocs (accueil) : numéro, nom en anglais, explication.
   Mobile : liste verticale séparée par des filets fins.
   Tablette et ordinateur : 5 lignes pleine largeur (numéro | nom | texte), filet fin entre chaque ligne.
   ========================================================================== */
.piliers-blocs {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
}
.pilier { padding: var(--esp-4) 0; }
.pilier + .pilier { border-top: 1px solid var(--trait); }
.pilier__numero { margin-bottom: var(--esp-2); }
.pilier__nom {
  margin: 0 0 var(--esp-2);
  font-family: var(--police-titre);
  font-size: var(--texte-xl);
  font-weight: 400;
  line-height: 1.15;
  color: var(--texte);
}
.pilier__texte { margin: 0; max-width: 30rem; color: var(--texte-doux); }
@media (min-width: 48rem) {
  /* Tablette et ordinateur : une ligne pleine largeur par pilier (numéro | nom | texte) */
  .pilier {
    display: grid;
    grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--gouttiere-grille);
    align-items: baseline;
    padding-block: var(--esp-4);
  }
  .pilier__numero { margin: 0; }
  .pilier__nom { margin: 0; }
  .pilier__texte { max-width: 36rem; }
}
@media (min-width: 64rem) {
  .pilier { padding-block: var(--esp-5); }
  .pilier__nom { font-size: 1.5rem; }
}

/* ==========================================================================
   Bandeau des 5 piliers (toujours en anglais, texte exact — CLAUDE.md §11)
   Une ligne séparée par des traits verticaux fins ; empilé sur mobile.
   ========================================================================== */
.piliers {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--police-titre);
  font-size: var(--texte-base);
  letter-spacing: 0.08em;
  text-align: center;
}
.piliers li { position: relative; padding: var(--esp-4) var(--esp-2); }
/* Mobile : piliers empilés, séparés par un trait court centré */
.piliers li + li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2.5rem;
  height: 1px;
  background: var(--trait-champ);
  transform: translateX(-50%);
}
@media (min-width: 64rem) {
  .piliers { grid-template-columns: repeat(5, auto); justify-content: space-between; }
  .piliers li { padding: var(--esp-2) var(--esp-4); }
  .piliers li:first-child { padding-left: 0; }
  .piliers li:last-child { padding-right: 0; }
  .piliers li + li { border-left: 1px solid var(--trait); }
  .piliers li + li::before { content: none; }
}

/* ==========================================================================
   Duo ROOT / RISE (maquette) : photo en haut, aplat de couleur en bas.
   Côte à côte sur desktop, empilés sur mobile.
   ========================================================================== */
.duo {
  display: grid;
  gap: 2px;
}
@media (min-width: 48rem) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.duo__bloc { display: flex; flex-direction: column; }
.duo__bloc .aplat, .duo__bloc .photo { aspect-ratio: 4 / 3; }
@media (min-width: 48rem) { .duo__bloc .aplat, .duo__bloc .photo { aspect-ratio: 16 / 10; } }
.duo__contenu {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-5) var(--gouttiere) var(--esp-6);
  background: var(--fond);
  color: var(--texte);
}
@media (min-width: 64rem) { .duo__contenu { padding: var(--esp-6) var(--esp-6) var(--esp-7); } }
.duo__titre {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--texte-xl);
  font-weight: 400;
  line-height: 1.15;
  color: var(--texte);
}
.duo__texte { margin: 0; max-width: 30rem; }
.duo__contenu .lien-trait { margin-top: var(--esp-3); }

.duo__bloc[data-univers] { border-top: 0; }
.duo__bloc[data-univers="root"] {
  --fond: var(--olive-fonce);     /* sable clair dessus 4,7:1 */
  --texte: var(--sable-clair);
  --accent-texte: var(--sable);
  --focus: var(--sable-clair);
}
.duo__bloc[data-univers="rise"] {
  --fond: var(--ocean);           /* encre dessus 4,9:1 */
  --texte: var(--encre);
  --accent-texte: var(--encre);
  --focus: var(--encre);
}

/* ==========================================================================
   Colonnes séparées par un trait vertical fin (maquette, section « inclus »)
   ========================================================================== */
.colonnes-filet {
  display: grid;
  gap: var(--esp-6);
}
@media (min-width: 48rem) {
  .colonnes-filet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .colonnes-filet > * { padding-right: var(--esp-6); }
  .colonnes-filet > * + * { padding-left: var(--esp-6); padding-right: 0; border-left: 1px solid var(--trait); }
}
.colonnes-filet__titre {
  margin-bottom: var(--esp-4);
  font-family: var(--police-titre);
  font-size: var(--texte-lg);
  font-weight: 400;
  color: var(--accent-texte);      /* titre de 20 px : terracotta foncée (5,3:1), la terracotta (3,96:1) étant réservée aux grands titres */
}

/* Liste texte seul (inclus / à la carte) : titre + détail, filets fins, aucun pictogramme */
.liste-texte { margin: 0; padding: 0; list-style: none; }
.liste-texte > li { padding: var(--esp-3) 0; }
.liste-texte > li + li { border-top: 1px solid var(--trait); }
.liste-texte__titre { display: block; font-weight: 400; }
.liste-texte__detail { display: block; color: var(--texte-doux); }

/* ==========================================================================
   Média plein cadre avec texte clair (hero) : photo / vidéo + voile sombre
   ========================================================================== */
.media-texte {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 32rem;
  overflow: hidden;
  background: var(--aplat-photo);
  --texte: var(--sable-clair);
  --titre: var(--sable-clair);
  --focus: var(--sable-clair);
  color: var(--texte);
}
.media-texte__media,
.media-texte__voile { position: absolute; inset: 0; }
.media-texte__media { width: 100%; height: 100%; object-fit: cover; }
.media-texte__voile { background: var(--voile-photo); }
.media-texte__contenu { position: relative; padding-block: var(--esp-7); }
.media-texte__contenu .chapeau { margin-bottom: var(--esp-5); }

/* ==========================================================================
   Bouton d'inscription de l'en-tête sur mobile (à côté de « Menu »)
   ========================================================================== */
/* Mobile : bouton compact, collé à droite contre l'icône du menu, pour laisser de l'air au logo */
.site-header__cta {
  margin-left: auto;
  margin-right: 0;
  min-height: 2.25rem;            /* 36 px */
  padding: 0.35rem 0.8rem;
  font-size: var(--texte-xs);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* Menu ouvert : le bouton est déjà en bas du menu, on le masque dans l'en-tête */
.menu-ouvert .site-header__cta { visibility: hidden; }
@media (min-width: 48rem) { .site-header__cta { display: none; } }

/* ==========================================================================
   Médias photo (hero, fondatrices) : remplissent leur cadre
   ========================================================================== */
.hero-media { background: var(--aplat-photo); }
.hero-media picture,
.hero-media img,
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-media video { opacity: 0; transition: opacity 600ms ease; }
.hero-media.video-active video { opacity: 1; }

.photo-fondatrices { margin: 0; aspect-ratio: 4 / 5; background: var(--aplat); }
.photo-fondatrices img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Statut d'envoi des formulaires
   ========================================================================== */
.formulaire__statut { margin: 0; }
.formulaire__statut:empty { display: none; }
.formulaire__statut:focus { outline: none; }
.formulaire__statut--succes { font-family: var(--police-titre); font-size: var(--texte-lg); font-weight: 400; }

/* Formulaires sur fond terracotta ou olive : messages en sable clair (la terracotta foncée y serait invisible) */
.section--terracotta .champ__erreur, .section--olive .champ__erreur { color: var(--sable); font-weight: 600; }
.section--terracotta .champ__label, .section--olive .champ__label,
.section--terracotta .case, .section--olive .case { color: var(--sable); }
.section--terracotta .case a, .section--olive .case a { color: inherit; }
.section--terracotta .champ--erreur .champ__input, .section--olive .champ--erreur .champ__input,
.section--terracotta .champ__input[aria-invalid="true"], .section--olive .champ__input[aria-invalid="true"] { border-color: var(--encre); box-shadow: inset 0 0 0 2px var(--encre); }
.section--terracotta .case input, .section--olive .case input { accent-color: var(--encre); }

/* Petits écrans : en-tête compact (logo, bouton d'inscription, icône du menu) */
@media (max-width: 25.99rem) {
  .menu-bouton { min-width: 2.75rem; justify-content: center; }
  .menu-bouton__libelle { display: none; }
  .logo { font-size: 1.25rem; letter-spacing: 0.26em; }
}

/* ==========================================================================
   Logo définitif (fichiers SVG de images/logo/, jamais modifiés)
   ========================================================================== */
/* Pied de page : logo empilé */
.logo-empile { display: inline-block; }
.logo-empile img { width: auto; height: 5.5rem; }

/* En-tête : version horizontale composée (icône à gauche du mot) */
.logo--horizontal {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
}
.logo--horizontal .logo__icone { width: auto; height: 1.75rem; }
.logo--horizontal .logo__mot { width: auto; height: 1rem; }
@media (min-width: 48rem) {
  .logo--horizontal { gap: 0.75rem; }
  .logo--horizontal .logo__icone { height: 2rem; }
  .logo--horizontal .logo__mot { height: 1.15rem; }
}

/* ==========================================================================
   Mode « à compléter » : surlignage jaune de tout ce qui reste à remplir
   (texte entre crochets, valeurs [À CONFIRMER] ou non confirmées).
   Activé par config.js → site.surlignerACompleter. Une seule classe : .a-completer
   ========================================================================== */
.mode-a-completer .a-completer {
  background: #FFE45C;
  color: var(--encre);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding-inline: 0.1em;
}
.mode-a-completer .a-completer .a-completer { padding-inline: 0; }
.marque { text-transform: none; letter-spacing: 0.04em; }

/* ==========================================================================
   Consentement aux cookies (js/cookies.js) — mobile d'abord, sans pictogramme
   Les trois choix ont exactement le même style (aucune interface trompeuse).
   ========================================================================== */
.banniere-cookies {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  padding: var(--esp-4) max(var(--gouttiere), env(safe-area-inset-left)) calc(var(--esp-4) + env(safe-area-inset-bottom)) max(var(--gouttiere), env(safe-area-inset-right));
  border-top: 1px solid var(--trait);
  background: var(--fond);
  color: var(--texte);
  box-shadow: 0 -8px 24px rgba(43, 38, 33, 0.08);
  font-size: var(--texte-sm);
}
.banniere-cookies[hidden] { display: none; }
.banniere-cookies__interieur {
  display: grid;
  gap: var(--esp-3);
  max-width: var(--largeur-max);
  margin-inline: auto;
}
.banniere-cookies__titre {
  margin: 0 0 var(--esp-1);
  font-family: var(--police-texte);
  font-size: var(--texte-xs);
  font-weight: 500;
  letter-spacing: var(--interlettrage-surtitre);
  text-transform: uppercase;
  color: var(--texte);
}
.banniere-cookies p { margin: 0; max-width: 46rem; line-height: 1.5; }
.banniere-cookies__actions,
.panneau-cookies__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-2);
}
.banniere-cookies .bouton,
.panneau-cookies__actions .bouton { min-height: 2.75rem; padding: 0.5rem 0.5rem; white-space: normal; }
/* Très petits écrans : les trois choix l'un sous l'autre, toujours à égalité */
@media (max-width: 23.99rem) {
  .banniere-cookies__actions,
  .panneau-cookies__actions { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 64rem) {
  .banniere-cookies { padding-block: var(--esp-4); }
  .banniere-cookies__interieur { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--esp-6); }
  .banniere-cookies__actions { grid-template-columns: repeat(3, 10rem); }
}

/* Panneau « Personnaliser » / « Gérer mes cookies » */
.panneau-cookies {
  width: min(36rem, calc(100% - 2 * var(--gouttiere)));
  max-height: calc(100% - 2 * var(--esp-4));
  margin: auto;
  padding: var(--esp-5) var(--esp-4) var(--esp-4);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-controle);
  background: var(--fond);
  color: var(--texte);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.panneau-cookies::backdrop { background: rgba(43, 38, 33, 0.45); }
@media (max-width: 39.99rem) {
  /* Mobile : panneau ancré en bas de l'écran, à portée de pouce */
  .panneau-cookies {
    width: 100%;
    max-width: none;
    max-height: 90svh;
    margin: auto 0 0;
    padding-bottom: calc(var(--esp-4) + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: var(--rayon-controle) var(--rayon-controle) 0 0;
  }
}
.panneau-cookies__entete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-3); }
.panneau-cookies__titre { margin: 0; font-size: var(--texte-xl); color: var(--accent-texte); }
.panneau-cookies__titre:focus { outline: none; }
.panneau-cookies__fermer { min-height: 2.75rem; padding: 0 var(--esp-1); font-size: var(--texte-sm); }
.panneau-cookies__intro { margin: var(--esp-3) 0 var(--esp-3); font-size: var(--texte-sm); color: var(--texte-doux); }
.panneau-cookies__actions { margin-top: var(--esp-4); }

.categorie-cookies { padding: var(--esp-3) 0; border-top: 1px solid var(--trait); }
.categorie-cookies:last-of-type { border-bottom: 1px solid var(--trait); }
.categorie-cookies__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.categorie-cookies__titre { font-weight: 500; cursor: pointer; }
.categorie-cookies__texte { margin: var(--esp-1) 0 0; font-size: var(--texte-sm); color: var(--texte-doux); }
.categorie-cookies__texte strong { font-weight: 500; color: var(--texte); }

/* Interrupteur : case à cocher native (role="switch"), habillée */
.interrupteur { position: relative; flex: none; width: 2.75rem; height: 1.5rem; }
.interrupteur input {
  position: absolute;
  inset: -0.625rem;
  width: calc(100% + 1.25rem);
  height: calc(100% + 1.25rem);
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.interrupteur input:disabled { cursor: not-allowed; }
.interrupteur__piste {
  position: absolute;
  inset: 0;
  border: 1px solid var(--trait-champ);
  border-radius: 999px;
  background: var(--fond);
  transition: background-color var(--transition), border-color var(--transition);
}
.interrupteur__piste::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.1875rem;
  width: 1.0625rem;
  height: 1.0625rem;
  border-radius: 50%;
  background: var(--trait-champ);
  transform: translateY(-50%);
  transition: transform var(--transition), background-color var(--transition);
}
.interrupteur input:checked + .interrupteur__piste { border-color: var(--encre); background: var(--encre); }
.interrupteur input:checked + .interrupteur__piste::after { background: var(--fond); transform: translate(1.25rem, -50%); }
.interrupteur input:disabled + .interrupteur__piste { opacity: 0.55; }
.interrupteur input:focus-visible + .interrupteur__piste { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .interrupteur__piste, .interrupteur__piste::after { transition: none; }
}

/* Pied de page : logos des réseaux (une seule couleur, celle du texte du pied de page) */
.site-footer__reseaux { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-2) !important; }
.site-footer .site-footer__reseaux a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  margin-left: -0.625rem;
}
.site-footer__reseaux li + li a { margin-left: 0; }
.site-footer__reseaux svg { width: 1.5rem; height: 1.5rem; }

/* Message affiché après l'envoi du formulaire « Être prévenue » */
.formulaire__succes-message { margin: 0; font-family: var(--police-titre); font-size: var(--texte-lg); font-weight: 400; line-height: 1.4; }