/* ==========================================================================
   Le Soleil en Partage — feuille de style
   Charte « Numérologie & Corbières » : ivoire, sauge, émeraude, vert forêt,
   or antique · une seule police : Cormorant Garamond (hébergée avec le site).
   Mise en page : menu latéral fixe vert forêt + contenu ivoire lu en Z
   (texte et visuels alternés gauche/droite, appel à l'action en bas à droite).
   ========================================================================== */

@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  /* Palette de la charte */
  --ivoire: #F2EBDD;        /* fond principal (60 %) */
  --ivoire-clair: #F8F4EB;  /* cartes posées sur l'ivoire */
  --sauge: #78947F;         /* fonds secondaires, encadrés */
  --sauge-voile: #E2E5D5;   /* sauge éclaircie pour les encadrés lisibles */
  --emeraude: #185844;      /* boutons, éléments interactifs */
  --emeraude-fonce: #0F4434;
  --foret: #102F27;         /* titres, texte, menu, pied de page (20 %) */
  --or: #B08A4F;            /* filets, ornements, pictos */
  --or-clair: #D3B47C;      /* or lisible sur fond forêt */
  --or-texte: #74572A;      /* or assombri pour les petits textes sur ivoire */
  --texte-doux: #38564C;
  --filet: rgba(176, 138, 79, .5);
  --filet-leger: rgba(16, 47, 39, .12);

  /* Typographie unique */
  --police: "Cormorant Garamond", "Cormorant", "EB Garamond", Garamond, "Times New Roman", serif;
  --t-h1: clamp(40px, 4.4vw, 62px);
  --t-h2: clamp(32px, 3.4vw, 44px);
  --t-h3: clamp(25px, 2.3vw, 30px);
  --t-texte: 21px;
  --t-accent: clamp(23px, 2vw, 26px);
  --t-bouton: 18px;
  --t-menu: 20px;
  --t-petit: 18px;

  /* Rythme */
  --menu-l: 296px;
  --r: 6px;
  --gouttiere: clamp(20px, 5vw, 72px);
  --section: clamp(72px, 9vw, 120px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background: var(--ivoire);
  color: var(--foret);
  font-family: var(--police);
  font-size: var(--t-texte);
  line-height: 1.55;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
figure { margin: 0; }
a { color: var(--emeraude); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--emeraude-fonce); }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 2px; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 700; }

h1, h2, h3, h4 { margin: 0; color: var(--foret); text-wrap: balance; }
h1 { font-size: var(--t-h1); font-weight: 400; line-height: 1.06; letter-spacing: -.005em; }
h1 em { font-style: italic; color: var(--emeraude); }
h2 { font-size: var(--t-h2); font-weight: 500; line-height: 1.1; }
h2 em { font-style: italic; font-weight: 500; }
h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.2; }
.accent { font-size: var(--t-accent); font-weight: 700; font-style: italic; line-height: 1.35; color: var(--foret); }
.chapeau { font-size: var(--t-accent); font-style: italic; line-height: 1.4; color: var(--texte-doux); }
.petit { font-size: var(--t-petit); color: var(--texte-doux); line-height: 1.5; }
.sourcil {
  font-size: 15px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--or-texte); line-height: 1.4;
}
.sourcil::before { content: "✦"; margin-right: .6em; color: var(--or); letter-spacing: 0; }
.nombre { font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }

.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-evitement { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--foret); color: var(--ivoire); padding: 10px 16px; border-radius: var(--r); }
.lien-evitement:focus { top: 12px; }

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--police); font-size: var(--t-bouton); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.15; text-align: center;
  padding: 16px 28px; min-height: 52px;
  border-radius: var(--r); border: 1px solid var(--emeraude);
  background: var(--emeraude); color: var(--ivoire); text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { background: var(--emeraude-fonce); border-color: var(--emeraude-fonce); color: var(--ivoire); }
.btn-ligne { background: transparent; color: var(--emeraude); }
.btn-ligne:hover { background: var(--emeraude); color: var(--ivoire); }
.btn-clair { background: var(--ivoire); color: var(--foret); border-color: var(--or); }
.btn-clair:hover { background: var(--or-clair); border-color: var(--or-clair); color: var(--foret); }
.btn-plein { width: 100%; }
.btn svg { width: 18px; height: 18px; flex: none; }
.lien-fleche { font-weight: 600; font-style: italic; font-size: var(--t-petit); text-decoration: none; color: var(--emeraude); border-bottom: 1px solid var(--filet); padding-bottom: 2px; }
.lien-fleche:hover { border-color: var(--emeraude); }

/* --------------------------------------------------------------------------
   Pictos (traits dorés fins) et ornements
   -------------------------------------------------------------------------- */
.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.picto {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--filet); color: var(--or); background: var(--ivoire-clair);
  font-size: 30px; flex: none;
}
.picto-sm { width: 44px; height: 44px; font-size: 22px; }

.ornement { display: flex; align-items: center; gap: 16px; color: var(--or); font-size: 18px; max-width: 360px; margin-inline: auto; }
.ornement::before, .ornement::after { content: ""; flex: 1; height: 1px; background: var(--filet); }

/* --------------------------------------------------------------------------
   Menu latéral
   -------------------------------------------------------------------------- */
.menu {
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  width: var(--menu-l);
  background: var(--foret); color: var(--ivoire);
  display: flex; flex-direction: column; gap: 20px;
  padding: max(26px, env(safe-area-inset-top, 0px)) 24px max(24px, env(safe-area-inset-bottom, 0px));
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  overflow-y: auto; overscroll-behavior: contain;
  border-right: 1px solid rgba(211, 180, 124, .25);
}
.marque { display: grid; justify-items: center; gap: 6px; text-align: center; text-decoration: none; color: var(--ivoire); padding-bottom: 18px; border-bottom: 1px solid rgba(211, 180, 124, .3); }
.logo-embleme { width: 128px; height: 128px; display: block; }
.logo-symbole { width: 40px; height: 40px; display: block; flex: none; }
.marque-nom { font-size: 27px; font-weight: 500; line-height: 1.1; letter-spacing: .01em; }
.marque-nom em { font-style: italic; color: var(--or-clair); font-weight: 500; }
.marque-sous { font-size: 12px; font-weight: 700; letter-spacing: .1em; white-space: nowrap; text-transform: uppercase; color: var(--or-clair); }

.nav ul { list-style: none; display: grid; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 14px;
  padding: 6px 12px; border-radius: var(--r);
  font-size: var(--t-menu); font-weight: 600; line-height: 1.2;
  color: rgba(242, 235, 221, .8); text-decoration: none;
  border-left: 1px solid transparent;
  transition: color .2s ease, background-color .2s ease;
}
.nav a .ico { font-size: 20px; color: var(--or-clair); opacity: .85; }
.nav a:hover { color: var(--ivoire); background: rgba(242, 235, 221, .06); }
.nav a[aria-current="true"] { color: var(--ivoire); background: rgba(242, 235, 221, .08); border-left-color: var(--or-clair); border-radius: 0 var(--r) var(--r) 0; }
.nav a[aria-current="true"] .ico { opacity: 1; }

.menu-pied { margin-top: auto; display: grid; gap: 18px; }
.menu-pied .btn { width: 100%; }
.menu-reseaux { display: flex; justify-content: center; gap: 10px; }
.reseau {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(211, 180, 124, .45); color: var(--or-clair); font-size: 20px; text-decoration: none;
}
.reseau:hover { background: rgba(242, 235, 221, .08); color: var(--ivoire); }
.menu-tel { text-align: center; font-size: 17px; color: rgba(242, 235, 221, .75); }
.menu-tel a { color: var(--ivoire); text-decoration: none; font-weight: 600; }

/* Barre mobile */
.barre-mobile { display: none; }
.voile { display: none; }

/* --------------------------------------------------------------------------
   Contenu principal et sections
   -------------------------------------------------------------------------- */
.contenu { margin-left: var(--menu-l); min-width: 0; }
.section { padding-block: var(--section); scroll-margin-top: 0; }
.section + .section { border-top: 1px solid var(--filet-leger); }
.section-teinte { background: var(--ivoire-clair); }
.conteneur {
  width: 100%; max-width: 1140px; margin-inline: auto;
  padding-left: max(var(--gouttiere), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gouttiere), env(safe-area-inset-right, 0px));
}
.conteneur-etroit { max-width: 900px; }

/* En-tête de section : picto doré avant le titre, ancré à gauche (début du Z) */
.sec-tete { display: grid; grid-template-columns: auto 1fr; column-gap: 22px; row-gap: 6px; align-items: center; margin-bottom: clamp(36px, 5vw, 56px); max-width: 860px; }
.sec-tete .picto { grid-row: span 2; }
.sec-tete .sourcil { align-self: end; }
.sec-tete h2 { align-self: start; }
.sec-tete-intro { grid-column: 1 / -1; margin-top: 18px; max-width: 760px; display: grid; gap: 14px; }

/* Grille en Z : deux colonnes, la seconde peut être inversée */
.z { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.z > * { min-width: 0; }
.z-inverse > :first-child { order: 2; }
.z-haut { align-items: start; }
.texte-flux { display: grid; gap: 18px; max-width: 62ch; }

/* Visuels */
.photo { border-radius: var(--r); overflow: hidden; background: var(--sauge-voile); position: relative; }
.photo img { width: 100%; height: 100%; object-fit: cover; color: transparent; }
.photo figcaption { font-size: 16px; font-style: italic; color: var(--texte-doux); padding-top: 10px; background: var(--ivoire); }
.arche { border-radius: 999px 999px var(--r) var(--r); }
.cadre-or { position: relative; }
.cadre-or::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(248, 244, 235, .7); border-radius: inherit; pointer-events: none; }

/* --------------------------------------------------------------------------
   1. Accueil
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(48px, 7vw, 96px) var(--section); }
.hero-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  grid-template-areas:
    "texte   visuel"
    "faits   actions";
  column-gap: clamp(32px, 5vw, 72px); row-gap: clamp(28px, 4vw, 44px);
  align-items: center;
}
.hero-grille > * { min-width: 0; }
.hero .sourcil { grid-area: sourcil; }
.hero-logo { display: none; grid-area: logo; width: 100%; max-width: 440px; height: auto; }
.hero-prochain { grid-area: prochain; justify-self: end; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; justify-content: flex-end; font-size: var(--t-petit); padding: 8px 16px; border: 1px solid var(--filet); border-radius: 999px; background: var(--ivoire-clair); }
.hero-prochain span { font-style: italic; color: var(--texte-doux); }
.hero-texte { grid-area: texte; display: grid; gap: 26px; }
.hero-visuel { grid-area: visuel; position: relative; width: 100%; max-width: 440px; justify-self: end; }
.hero-photo { aspect-ratio: 4 / 5; width: 100%; }
.medaillon {
  position: absolute; left: -15%; bottom: 7%; width: 42%; aspect-ratio: 1;
  border-radius: 50%; background: var(--ivoire-clair); border: 1px solid var(--filet);
  padding: 5%; box-shadow: 0 10px 30px rgba(16, 47, 39, .14); z-index: 2;
}
.medaillon svg { width: 100%; height: 100%; display: block; }
.medaillon::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px dashed var(--or); opacity: .7; }

/* Bannière d'accueil */
.banniere { position: relative; overflow: hidden; background: var(--foret); color: var(--ivoire); border-bottom: 1px solid rgba(211, 180, 124, .35); }
.banniere::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 6% 50%, rgba(211, 180, 124, .09) 0deg 1.5deg, transparent 1.5deg 20deg);
}
.banniere-inner { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 22px; align-items: center; padding-block: 20px; }
.banniere-soleil { width: 58px; height: 58px; display: block; }
.banniere-texte { display: grid; gap: 4px; min-width: 0; }
.banniere-titre { font-size: 15px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--or-clair); }
.banniere-titre span { margin-inline: .4em; letter-spacing: 0; }
.banniere-info { font-size: 20px; line-height: 1.4; color: rgba(242, 235, 221, .88); }
.banniere-info strong { color: var(--ivoire); font-weight: 700; }
.banniere-compte {
  display: grid; justify-items: center; align-content: center; gap: 2px; text-decoration: none;
  min-width: 108px; padding: 10px 16px; border-radius: 14px;
  background: var(--or-clair); color: var(--foret); border: 1px solid var(--ivoire);
  box-shadow: 0 0 0 4px rgba(211, 180, 124, .22);
}
.banniere-compte:hover { color: var(--foret); background: var(--ivoire); }
.banniere-compte strong { font-size: 38px; font-weight: 700; line-height: .95; letter-spacing: .02em; font-variant-numeric: lining-nums; }
.banniere-compte span { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hero-faits { grid-area: faits; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.hero-faits li { padding: 16px 14px; display: grid; gap: 2px; align-content: start; }
.hero-faits li + li { border-left: 1px solid var(--filet-leger); }
.hero-faits strong { font-size: 30px; font-weight: 500; line-height: 1; color: var(--emeraude); }
.hero-faits span { font-size: 16px; line-height: 1.3; color: var(--texte-doux); }
.hero-actions { grid-area: actions; display: grid; gap: 14px; justify-items: end; text-align: right; }

/* --------------------------------------------------------------------------
   2. Le cycle
   -------------------------------------------------------------------------- */
.raisons { list-style: none; display: grid; gap: 26px; }
.raison { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.raison h3 { font-size: 26px; margin-bottom: 4px; }
.encadre {
  background: var(--sauge-voile); border-radius: var(--r);
  padding: clamp(24px, 3.5vw, 40px);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center;
  margin-top: clamp(40px, 6vw, 72px);
  border: 1px solid rgba(120, 148, 127, .45);
}
.encadre .picto { background: var(--ivoire); }
.encadre > div { display: grid; gap: 6px; min-width: 0; }

/* --------------------------------------------------------------------------
   3. Programme — les quatre éléments (lecture en Z naturelle du 2 × 2)
   -------------------------------------------------------------------------- */
.elements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; list-style: none; }
.element {
  background: var(--ivoire); border: 1px solid var(--filet); border-radius: var(--r);
  padding: clamp(24px, 3vw, 36px); display: grid; gap: 14px; align-content: start; position: relative;
}
.element-tete { display: flex; align-items: center; gap: 16px; }
.element-symbole { width: 52px; height: 52px; color: var(--or); flex: none; }
.element-symbole svg { width: 100%; height: 100%; }
.element .sourcil::before { content: none; }
.element-badge { position: absolute; top: 18px; right: 18px; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--emeraude); background: var(--sauge-voile); padding: 4px 10px; border-radius: 999px; }
.element-date { font-weight: 700; font-size: 20px; line-height: 1.35; }
.element-date span { font-weight: 400; font-style: italic; color: var(--texte-doux); }
.element ul { list-style: none; display: grid; gap: 6px; }
.element li, .liste-or li { position: relative; padding-left: 26px; }
.element li::before, .liste-or li::before { content: "✧"; position: absolute; left: 0; top: 0; color: var(--or); }
.deroule summary { cursor: pointer; font-weight: 600; font-style: italic; color: var(--emeraude); list-style: none; display: inline-flex; align-items: center; gap: 8px; font-size: 19px; }
.deroule summary::-webkit-details-marker { display: none; }
.deroule summary::after { content: "+"; font-style: normal; font-weight: 500; font-size: 22px; line-height: 1; color: var(--or); }
.deroule[open] summary::after { content: "–"; }
.deroule dl { margin: 14px 0 0; display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 10px 16px; font-size: 18px; line-height: 1.45; border-top: 1px solid var(--filet-leger); padding-top: 14px; }
.deroule dt { font-weight: 700; font-style: italic; color: var(--or-texte); }
.deroule dd { margin: 0; }

.acquis { margin-top: clamp(40px, 6vw, 64px); }
.liste-or { list-style: none; display: grid; gap: 10px; }
.carte-pdf { background: var(--foret); color: var(--ivoire); border-radius: var(--r); padding: clamp(28px, 4vw, 44px); display: grid; gap: 16px; justify-items: start; }
.carte-pdf h3 { color: var(--ivoire); }
.carte-pdf p { color: rgba(242, 235, 221, .82); }
.carte-pdf .picto { background: transparent; color: var(--or-clair); border-color: rgba(211, 180, 124, .5); }

/* --------------------------------------------------------------------------
   4. Un week-end type
   -------------------------------------------------------------------------- */
.horaires { list-style: none; display: grid; gap: 0; border-left: 1px solid var(--filet); margin-left: 8px; }
.horaires li { position: relative; padding: 0 0 20px 28px; display: grid; gap: 2px; }
.horaires li::before { content: ""; position: absolute; left: -6px; top: 9px; width: 11px; height: 11px; border-radius: 50%; background: var(--ivoire); border: 1px solid var(--or); }
.horaires li:last-child { padding-bottom: 0; }
.horaires .quand { font-weight: 700; font-size: 19px; color: var(--emeraude); letter-spacing: .02em; }
.photo-paysage { aspect-ratio: 4 / 3; }

/* --------------------------------------------------------------------------
   5. Thérèse
   -------------------------------------------------------------------------- */
.citation { margin: 6px 0 0; padding: 22px 0 0; border-top: 1px solid var(--filet); display: grid; gap: 10px; }
.citation blockquote { margin: 0; font-size: clamp(25px, 2.4vw, 31px); font-style: italic; line-height: 1.3; color: var(--emeraude); }
.citation blockquote::before { content: "« "; color: var(--or); }
.citation blockquote::after { content: " »"; color: var(--or); }
.citation figcaption { font-size: var(--t-petit); }
.citation figcaption strong { font-size: 21px; }
.portrait { aspect-ratio: 4 / 5; max-width: 440px; justify-self: center; width: 100%; }
.portrait img { object-position: 50% 24%; }

/* --------------------------------------------------------------------------
   6. Le domaine & accès
   -------------------------------------------------------------------------- */
.mosaique { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; aspect-ratio: 5 / 4; }
.mosaique .photo:first-child { grid-row: span 2; }
.atouts { list-style: none; display: grid; gap: 14px; }
.atouts li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.atouts .ico { font-size: 24px; color: var(--or); }

.acces { margin-top: clamp(56px, 7vw, 96px); }
.acces-titre { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.carte {
  aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; position: relative;
  border: 1px solid var(--filet); background: var(--sauge-voile);
}
.carte iframe { width: 100%; height: 100%; border: 0; display: block; }
.carte-fond { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--sauge); }
.carte-bloc { display: grid; gap: 12px; min-width: 0; }
.carte-voile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.carte-voile .btn { min-height: 42px; padding: 8px 16px; font-size: 15px; }
.carte-voile p { font-size: 15px; font-style: italic; color: var(--texte-doux); max-width: 34ch; line-height: 1.35; }
.adresse { font-style: normal; display: grid; gap: 2px; }
.adresse strong { font-size: 24px; font-weight: 600; }
.distances { list-style: none; display: grid; gap: 10px; border-top: 1px solid var(--filet); padding-top: 18px; }
.distances li { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px dotted var(--filet-leger); padding-bottom: 8px; }
.distances li span:last-child { font-weight: 700; white-space: nowrap; }
.boutons { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   7. Tarifs & réservation
   -------------------------------------------------------------------------- */
.etapes { list-style: none; counter-reset: etape; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-bottom: clamp(36px, 5vw, 56px); border: 1px solid var(--filet); border-radius: var(--r); background: var(--ivoire); }
.etapes li { counter-increment: etape; padding: 22px 24px; display: grid; gap: 4px; align-content: start; }
.etapes li + li { border-left: 1px solid var(--filet); }
.etapes li::before { content: counter(etape); font-size: 40px; font-weight: 500; font-style: italic; line-height: 1; color: var(--or); }
.etapes strong { font-size: 21px; }
.etapes span { font-size: 17px; color: var(--texte-doux); line-height: 1.45; }

.onglets { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--filet); margin-bottom: 32px; }
.onglet {
  font-family: var(--police); font-size: 21px; font-weight: 600; color: var(--texte-doux);
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 10px 6px 12px; margin-right: 22px; cursor: pointer; text-align: left;
}
.onglet small { display: block; font-size: 15px; font-weight: 400; font-style: italic; }
.onglet[aria-selected="true"] { color: var(--foret); border-bottom-color: var(--emeraude); }
.onglet:hover { color: var(--foret); }

.resa { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 48px); align-items: start; }
.resa-choix { display: grid; gap: 34px; min-width: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; font-size: var(--t-h3); font-weight: 600; margin-bottom: 14px; display: flex; align-items: baseline; gap: 12px; }
legend .num { font-style: italic; font-weight: 500; color: var(--or); }
.legende-aide { font-size: 17px; font-style: italic; color: var(--texte-doux); margin: -6px 0 14px; }

.options { display: grid; gap: 12px; }
.options-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.options-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.option { position: relative; display: block; cursor: pointer; }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option-corps {
  display: grid; gap: 4px; height: 100%;
  padding: 16px 18px 16px 50px; border-radius: var(--r);
  border: 1px solid rgba(16, 47, 39, .22); background: var(--ivoire);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
  position: relative;
}
.option-corps::before { content: ""; position: absolute; left: 18px; top: 21px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--sauge); background: var(--ivoire-clair); }
.option:hover .option-corps { border-color: var(--emeraude); }
.option input:checked + .option-corps { border-color: var(--emeraude); background: var(--ivoire-clair); box-shadow: inset 0 0 0 1px var(--emeraude); }
.option input:checked + .option-corps::before { border-color: var(--emeraude); background: radial-gradient(circle, var(--emeraude) 0 4.5px, var(--ivoire-clair) 5px); }
.option input:focus-visible + .option-corps { outline: 2px solid var(--or); outline-offset: 2px; }
.option input:disabled + .option-corps { opacity: .5; cursor: not-allowed; background: transparent; }
.option-titre { font-weight: 700; font-size: 21px; line-height: 1.25; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.option-titre .prix { font-weight: 600; color: var(--emeraude); white-space: nowrap; }
.option-note { font-size: 16px; line-height: 1.4; color: var(--texte-doux); font-style: italic; }
.option-etiquette { justify-self: start; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--emeraude); background: var(--sauge-voile); padding: 2px 8px; border-radius: 999px; margin-top: 4px; }

.champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.champ { display: grid; gap: 6px; min-width: 0; }
.champ-large { grid-column: 1 / -1; }
.champ label { font-size: 18px; font-weight: 600; }
.champ label .facultatif { font-weight: 400; font-style: italic; color: var(--texte-doux); }
.champ input, .champ select, .champ textarea {
  font-family: var(--police); font-size: 20px; color: var(--foret);
  padding: 11px 14px; border-radius: var(--r); width: 100%;
  border: 1px solid rgba(16, 47, 39, .3); background: var(--ivoire-clair);
}
.champ textarea { min-height: 96px; resize: vertical; line-height: 1.4; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--emeraude); box-shadow: 0 0 0 2px rgba(24, 88, 68, .18); }
.champ input:user-invalid { border-color: #9B3B2E; }
.case { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 17px; line-height: 1.45; grid-column: 1 / -1; }
.case input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--emeraude); }
.piege { position: absolute; left: -9999px; }

.recap {
  position: sticky; top: 24px;
  background: var(--foret); color: var(--ivoire); border-radius: var(--r);
  padding: 28px 26px; display: grid; gap: 16px;
}
.recap .sourcil { color: var(--or-clair); }
.recap .sourcil::before { color: var(--or-clair); }
.recap-lignes { display: grid; gap: 6px; font-size: 18px; color: rgba(242, 235, 221, .85); }
.recap-lignes strong { color: var(--ivoire); font-weight: 600; }
.recap-prix { display: flex; align-items: baseline; gap: 10px; border-top: 1px solid rgba(211, 180, 124, .35); padding-top: 16px; }
.recap-prix .montant { font-size: 50px; font-weight: 500; line-height: 1; color: var(--ivoire); }
.recap-prix .unite { font-style: italic; color: var(--or-clair); font-size: 18px; }
.recap-inclus { font-size: 16px; line-height: 1.45; color: rgba(242, 235, 221, .75); }
.recap-suite { font-size: 16px; line-height: 1.45; background: rgba(242, 235, 221, .06); border: 1px solid rgba(211, 180, 124, .25); border-radius: var(--r); padding: 12px 14px; color: rgba(242, 235, 221, .85); }
.recap-suite strong { color: var(--ivoire); }
.recap .btn { background: var(--ivoire); color: var(--foret); border-color: var(--ivoire); }
.recap .btn:hover { background: var(--or-clair); border-color: var(--or-clair); }
.recap-rassure { font-size: 15px; font-style: italic; color: rgba(242, 235, 221, .7); text-align: center; line-height: 1.4; }
.barre { text-decoration: line-through; opacity: .7; }

.confirmation { background: var(--sauge-voile); border: 1px solid rgba(120, 148, 127, .5); border-radius: var(--r); padding: clamp(24px, 4vw, 40px); display: grid; gap: 14px; }
.confirmation textarea { width: 100%; min-height: 220px; font-family: var(--police); font-size: 17px; padding: 12px; border-radius: var(--r); border: 1px solid rgba(16, 47, 39, .25); background: var(--ivoire-clair); color: var(--foret); }

.grille-tarifs { margin-top: clamp(40px, 5vw, 56px); border-top: 1px solid var(--filet); padding-top: 18px; }
.grille-tarifs > summary { cursor: pointer; font-size: 22px; font-weight: 600; font-style: italic; color: var(--emeraude); list-style: none; display: flex; align-items: center; gap: 10px; }
.grille-tarifs > summary::-webkit-details-marker { display: none; }
.grille-tarifs > summary::after { content: "+"; font-style: normal; color: var(--or); font-size: 26px; line-height: 1; }
.grille-tarifs[open] > summary::after { content: "–"; }
.tableau-defile { overflow-x: auto; margin-top: 18px; }
table { width: 100%; border-collapse: collapse; font-size: 18px; min-width: 640px; font-variant-numeric: lining-nums tabular-nums; }
th, td { padding: 12px 14px; text-align: right; border-bottom: 1px solid var(--filet-leger); }
th:first-child, td:first-child { text-align: left; }
thead th { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--or-texte); font-weight: 700; vertical-align: bottom; border-bottom: 1px solid var(--filet); }
tbody th { font-weight: 600; }
td small { display: block; font-size: 14px; color: var(--texte-doux); font-style: italic; }

.dates-cles { margin-top: clamp(40px, 5vw, 56px); }
.frise { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border-top: 1px solid var(--filet); }
.frise li { padding: 18px 16px 4px 0; position: relative; display: grid; gap: 2px; align-content: start; }
.frise li::before { content: ""; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--ivoire); border: 1px solid var(--or); }
.frise .quand { font-weight: 700; font-size: 19px; color: var(--emeraude); }
.frise span { font-size: 16px; line-height: 1.4; color: var(--texte-doux); }
.mentions-prix { margin-top: 28px; font-size: 16px; color: var(--texte-doux); line-height: 1.5; max-width: 80ch; }

/* Barre de prix collante : téléphones et tablettes uniquement */
.barre-prix { display: none; }
@media (max-width: 1180px) {
  .barre-prix {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    position: sticky; bottom: 0; z-index: 5;
    margin-inline: calc(-1 * max(var(--gouttiere), env(safe-area-inset-left, 0px)));
    padding: 12px max(var(--gouttiere), env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(var(--gouttiere), env(safe-area-inset-left, 0px));
    background: var(--foret); color: var(--ivoire);
    border-top: 1px solid rgba(211, 180, 124, .4);
  }
  .barre-prix span { display: grid; min-width: 0; line-height: 1.2; }
  .barre-prix strong { font-size: 28px; font-weight: 500; }
  .barre-prix small { font-size: 15px; font-style: italic; color: rgba(242, 235, 221, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .barre-prix .btn { background: var(--ivoire); color: var(--foret); border-color: var(--ivoire); flex: none; min-height: 46px; padding: 10px 18px; }
}

/* --------------------------------------------------------------------------
   8. Questions fréquentes + recherche
   -------------------------------------------------------------------------- */
.recherche { background: var(--sauge-voile); border-radius: var(--r); padding: clamp(18px, 3vw, 28px); display: grid; gap: 14px; border: 1px solid rgba(120, 148, 127, .45); margin-bottom: 32px; }
.recherche label { font-weight: 600; font-size: 19px; }
.recherche-champ { position: relative; }
.recherche-champ .ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--sauge); pointer-events: none; }
.recherche-champ input {
  width: 100%; font-family: var(--police); font-size: 21px; color: var(--foret);
  padding: 14px 52px 14px 50px; border-radius: 999px;
  border: 1px solid rgba(16, 47, 39, .25); background: var(--ivoire-clair);
}
.recherche-champ input:focus { outline: none; border-color: var(--emeraude); box-shadow: 0 0 0 3px rgba(24, 88, 68, .15); }
.recherche-champ input::-webkit-search-cancel-button { display: none; }
.effacer { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--texte-doux); font-size: 24px; cursor: pointer; display: grid; place-items: center; }
.effacer:hover { background: var(--sauge-voile); }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.filtre { font-family: var(--police); font-size: 17px; font-weight: 600; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(16, 47, 39, .25); background: var(--ivoire-clair); color: var(--foret); cursor: pointer; }
.filtre[aria-pressed="true"] { background: var(--emeraude); color: var(--ivoire); border-color: var(--emeraude); }
.resultat { font-size: 16px; font-style: italic; color: var(--texte-doux); min-height: 1.4em; }

.faq-groupe { display: grid; gap: 0; margin-bottom: 30px; }
.faq-groupe h3 { font-size: 15px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--or-texte); padding-bottom: 10px; border-bottom: 1px solid var(--filet); }
.question { border-bottom: 1px solid var(--filet-leger); }
.question summary { cursor: pointer; list-style: none; padding: 18px 44px 18px 0; position: relative; font-size: 22px; font-weight: 600; line-height: 1.3; }
.question summary::-webkit-details-marker { display: none; }
.question summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font-size: 28px; font-weight: 400; color: var(--or); }
.question[open] summary::after { content: "–"; }
.question summary:hover { color: var(--emeraude); }
.reponse { padding: 0 0 22px; display: grid; gap: 10px; max-width: 70ch; color: #1E3D34; }
mark { background: rgba(211, 180, 124, .45); color: inherit; border-radius: 2px; padding: 0 1px; }
.faq-vide { text-align: center; padding: 32px 16px; display: grid; gap: 10px; justify-items: center; }

/* --------------------------------------------------------------------------
   9. Contact & réseaux
   -------------------------------------------------------------------------- */
.cartes-contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.carte-contact { background: var(--ivoire); border: 1px solid var(--filet); border-radius: var(--r); padding: 28px; display: grid; gap: 14px; align-content: start; }
.carte-contact h3 { font-size: 26px; }
.ligne-contact { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.ligne-contact > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.ligne-contact .ico { font-size: 20px; color: var(--or); }
.ligne-contact a { font-weight: 600; text-decoration: none; overflow-wrap: break-word; min-width: 0; }
.ligne-contact a[href^="mailto"] { font-size: 19px; }
.copier { font-family: var(--police); font-size: 15px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--filet); background: transparent; color: var(--emeraude); cursor: pointer; }
.copier:hover { background: var(--sauge-voile); }
.reseau-ligne { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--foret); padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--filet-leger); }
.reseau-ligne:hover { border-color: var(--emeraude); color: var(--emeraude); }
.reseau-ligne .ico { font-size: 26px; color: var(--or); }
.reseau-ligne span { display: grid; line-height: 1.25; }
.reseau-ligne small { font-size: 15px; font-style: italic; color: var(--texte-doux); }

/* Formulaire d'avis */
.avis { margin-top: 28px; background: var(--ivoire-clair); border: 1px solid var(--filet); border-radius: var(--r); padding: clamp(22px, 4vw, 40px); }
.avis-form { display: grid; gap: 22px; }
.avis .acces-titre { margin-bottom: 0; }
.legende-petite { font-size: 18px; font-weight: 600; margin-bottom: 8px; display: block; }
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.pastilles label { position: relative; cursor: pointer; }
.pastilles input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pastilles span { display: inline-block; padding: 7px 18px; border-radius: 999px; border: 1px solid rgba(16, 47, 39, .3); background: var(--ivoire); font-size: 18px; font-weight: 600; }
.pastilles input:checked + span { background: var(--emeraude); border-color: var(--emeraude); color: var(--ivoire); }
.pastilles input:focus-visible + span { outline: 2px solid var(--or); outline-offset: 2px; }
.lien-retour { font-family: var(--police); font-size: 17px; font-style: italic; font-weight: 600; color: var(--emeraude); background: none; border: 0; padding: 0; cursor: pointer; justify-self: start; text-decoration: underline; text-underline-offset: .2em; }

/* Panneau « Écrire à Thérèse » (remplace les liens e-mail directs) */
.choix-mail {
  position: fixed; z-index: 60; right: max(24px, env(safe-area-inset-right, 0px)); bottom: max(24px, env(safe-area-inset-bottom, 0px));
  width: min(420px, calc(100vw - 32px)); background: var(--ivoire-clair); border: 1px solid var(--filet); border-radius: var(--r);
  padding: 22px 24px; display: grid; gap: 10px; box-shadow: 0 18px 44px rgba(16, 47, 39, .22);
}
.choix-mail-adresse { font-size: 22px; font-weight: 600; overflow-wrap: anywhere; }
.choix-mail .boutons .btn { min-height: 44px; padding: 10px 16px; font-size: 15px; }
.choix-mail-fermer { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; border: 0; background: none; font-size: 26px; color: var(--texte-doux); cursor: pointer; border-radius: 50%; }
.choix-mail-fermer:hover { background: var(--sauge-voile); }
@media (max-width: 600px) { .choix-mail { left: 16px; right: 16px; width: auto; bottom: max(16px, env(safe-area-inset-bottom, 0px)); } }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.pied { background: var(--foret); color: rgba(242, 235, 221, .82); padding-block: 56px 40px; font-size: 18px; }
.pied-grille { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; align-items: start; }
.pied a { color: var(--ivoire); text-decoration: none; }
.pied a:hover { color: var(--or-clair); }
.pied h2 { font-size: 15px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--or-clair); margin-bottom: 12px; }
.pied ul { list-style: none; display: grid; gap: 6px; }
.pied-logo { width: 100%; max-width: 360px; height: auto; margin-bottom: 14px; }
.pied-marque { font-size: 30px; font-weight: 500; color: var(--ivoire); line-height: 1.1; margin-bottom: 10px; }
.pied-marque em { color: var(--or-clair); }
.pied-bas { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(211, 180, 124, .25); font-size: 15px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Pages juridiques
   -------------------------------------------------------------------------- */
.page-simple .contenu { margin-left: 0; }
.entete-simple { background: var(--foret); color: var(--ivoire); }
.entete-simple .conteneur { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 18px; flex-wrap: wrap; }
.entete-simple .marque { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; text-align: left; }
.entete-simple .marque svg { width: 40px; height: 40px; }
.entete-simple .marque-nom { font-size: 24px; }
.entete-simple a.retour { color: var(--ivoire); font-size: 18px; text-decoration: none; border-bottom: 1px solid rgba(211, 180, 124, .5); }
.juridique { padding-block: clamp(48px, 7vw, 88px); }
.juridique h1 { font-size: clamp(36px, 4vw, 52px); margin: 10px 0 12px; }
.juridique h2 { font-size: clamp(26px, 2.6vw, 32px); margin: 44px 0 12px; padding-top: 22px; border-top: 1px solid var(--filet-leger); }
.juridique p + p, .juridique p + ul, .juridique ul + p, .juridique p + ol, .juridique ol + p, .juridique div + p { margin-top: 12px; }
.juridique ul, .juridique ol { padding-left: 1.3em; display: grid; gap: 6px; }
.juridique ul ul { margin-top: 6px; }
.juridique .maj { font-style: italic; color: var(--texte-doux); font-size: 18px; }
.juridique .cadre { background: var(--sauge-voile); border-radius: var(--r); padding: 18px 22px; margin-top: 12px; }
.a-completer { background: rgba(211, 180, 124, .4); padding: 0 4px; border-radius: 3px; font-style: italic; }


/* --------------------------------------------------------------------------
   Dynamisme : survol des photos et des cartes, apparition au défilement
   (désactivé si le visiteur a demandé moins d'animations)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .photo { transition: box-shadow .5s ease; }
  .photo img { transition: transform .6s ease, filter .5s ease; }
  .photo:hover { box-shadow: 0 14px 34px rgba(16, 47, 39, .16); }
  .photo:hover img { transform: scale(1.04); filter: saturate(1.08); }

  .element, .carte-contact, .carte-pdf, .raison, .etapes li, .encadre, .reseau-ligne, .option-corps {
    transition: transform .35s ease, box-shadow .35s ease, border-color .2s ease, background-color .2s ease;
  }
  .element:hover, .carte-contact:hover, .carte-pdf:hover, .encadre:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(16, 47, 39, .10); }
  .raison:hover, .reseau-ligne:hover { transform: translateX(4px); }
  .etapes li:hover { background: var(--ivoire-clair); }
  .option:hover .option-corps { transform: translateY(-2px); }
  .raison .picto, .sec-tete .picto, .carte-contact .picto { transition: transform .5s ease, background-color .3s ease; }
  .raison:hover .picto, .sec-tete:hover .picto, .carte-contact:hover .picto { transform: rotate(18deg); background: var(--sauge-voile); }
  .element-symbole { transition: transform .6s ease; }
  .element:hover .element-symbole { transform: rotate(180deg); }
  .btn svg { transition: transform .25s ease; }
  .btn:hover svg { transform: translateX(3px); }
  .logo-embleme { transition: transform 1.2s ease; }
  .marque:hover .logo-embleme { transform: rotate(40deg); }

  .banniere-soleil { animation: tourner 40s linear infinite; }
  .banniere-compte { animation: pulsation 2.8s ease-in-out infinite; }
  .medaillon::before { animation: tourner 60s linear infinite; }
  .medaillon { transition: transform .8s ease; }
  .hero-visuel:hover .medaillon { transform: rotate(40deg); }
  .apparition { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
  .apparition.visible { opacity: 1; transform: none; }
}

@keyframes tourner { to { transform: rotate(360deg); } }
@keyframes pulsation { 0%, 100% { box-shadow: 0 0 0 4px rgba(211, 180, 124, .22); } 50% { box-shadow: 0 0 0 10px rgba(211, 180, 124, .08); } }

/* --------------------------------------------------------------------------
   Tablettes et mobiles
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .resa { grid-template-columns: minmax(0, 1fr); }
  .recap { position: static; }
  .hero-faits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-faits li:nth-child(3) { border-left: 0; }
  .hero-faits li:nth-child(n + 3) { border-top: 1px solid var(--filet-leger); }
}

@media (max-width: 1024px) {
  :root { --t-texte: 20px; --t-menu: 21px; }
  .contenu { margin-left: 0; }
  .barre-mobile {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
    background: var(--foret); color: var(--ivoire);
    padding-block: 10px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 31; background: var(--foret); }
  .barre-mobile .marque { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; text-align: left; min-width: 0; }
  .barre-mobile .logo-symbole { width: 34px; height: 34px; }
  .barre-mobile .marque-nom { font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .barre-actions { display: flex; align-items: center; gap: 8px; flex: none; }
  .barre-actions .btn { min-height: 40px; padding: 8px 14px; font-size: 15px; }
  .burger { width: 44px; height: 44px; border-radius: var(--r); border: 1px solid rgba(211, 180, 124, .5); background: transparent; color: var(--ivoire); display: grid; place-items: center; cursor: pointer; font-size: 24px; }
  .menu { transform: translateX(-102%); transition: transform .28s ease; width: min(86vw, 330px); z-index: 50; box-shadow: none; }
  body.menu-ouvert .menu { transform: none; }
  .voile { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(16, 47, 39, .45); opacity: 0; pointer-events: none; transition: opacity .28s ease; }
  body.menu-ouvert .voile { opacity: 1; pointer-events: auto; }
  body.menu-ouvert { overflow: hidden; }
  .menu-fermer { display: grid !important; }
}
.menu-fermer { display: none; position: absolute; top: max(12px, env(safe-area-inset-top, 0px)); right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(211, 180, 124, .45); background: transparent; color: var(--ivoire); font-size: 22px; place-items: center; cursor: pointer; }

@media (max-width: 860px) {
  .z, .hero-grille, .elements, .cartes-contact, .pied-grille { grid-template-columns: minmax(0, 1fr); }
  .z-inverse > :first-child { order: 0; }
  .hero-grille { grid-template-areas: "logo" "texte" "visuel" "faits" "actions"; }
  .hero-logo { display: block; }
  .hero-prochain { justify-self: start; }
  .hero-actions { justify-items: stretch; text-align: left; }
  .hero-visuel { max-width: none; justify-self: stretch; margin-bottom: 10%; }
  .hero-photo { aspect-ratio: 4 / 3; }
  .arche.hero-photo { border-radius: 220px 220px var(--r) var(--r); }
  .medaillon { left: 4%; bottom: -12%; width: 34%; }
  .banniere-inner { grid-template-columns: 42px auto minmax(0, 1fr); gap: 14px 14px; }
  .banniere-texte { grid-column: 2 / 4; }
  .banniere-compte { grid-column: 1 / 3; justify-self: start; }
  .banniere-inner .btn { grid-column: 3; align-self: stretch; }
  .banniere-compte { min-width: 0; padding: 8px 12px; }
  .banniere-compte strong { font-size: 30px; }
  .banniere-compte span { font-size: 11px; letter-spacing: .06em; }
  .banniere-soleil { width: 42px; height: 42px; }
  .banniere-titre { font-size: 13px; letter-spacing: .14em; }
  .banniere-info { font-size: 18px; }
  .etapes { grid-template-columns: minmax(0, 1fr); }
  .etapes li + li { border-left: 0; border-top: 1px solid var(--filet); }
  .encadre { grid-template-columns: minmax(0, 1fr); }
  .encadre .picto { display: none; }
  .encadre .btn { justify-self: start; }
  .portrait { max-width: 360px; }
}

@media (max-width: 600px) {
  :root { --t-texte: 20px; --t-h1: 40px; --t-h2: 32px; --t-h3: 25px; --gouttiere: 18px; }
  .sec-tete { grid-template-columns: minmax(0, 1fr); }
  .sec-tete .picto { grid-row: auto; width: 52px; height: 52px; font-size: 24px; }
  .options-2, .options-4, .champs { grid-template-columns: minmax(0, 1fr); }
  .hero-faits strong { font-size: 26px; }
  .deroule dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .deroule dd { margin-bottom: 10px; }
  .mosaique { aspect-ratio: 1 / 1; }
  .question summary { font-size: 21px; }
  .onglet { margin-right: 8px; font-size: 19px; }
}
@media (max-width: 440px) {
  .barre-mobile .marque-nom { font-size: 18px; }
  .barre-actions .btn { padding: 8px 10px; letter-spacing: .05em; }
}
@media (max-width: 600px) {
  .frise { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 1px solid var(--filet); margin-left: 6px; }
  .frise li { padding: 0 0 16px 24px; }
  .frise li::before { top: 8px; left: -6px; }
}
@media (max-width: 370px) {
  .barre-mobile .marque-nom em { display: none; }
}