/* ==========================================================================
   EXPLOR'ACTION - feuille de style unique
   Palette fermee de la charte : #92A772  #DCB48C  #768E56  #CA6846
   Les neutres et les deux nuances foncees d'olive sont DERIVES de ces quatre
   teintes, uniquement pour tenir le contraste AA. Aucune autre couleur.
   ========================================================================== */

/* ----------------------------------------------------------------- jetons */
:root {
  /* charte, telle quelle */
  --vert-clair: #92A772;
  --sable:      #DCB48C;
  --olive:      #768E56;
  --terracotta: #CA6846;

  /* derives, pour le contraste et la profondeur */
  --olive-fonce: #5E7345;   /* boutons et bandeaux : blanc dessus = AA */
  --olive-nuit:  #46552F;   /* pied de page */
  --terre-foncee:#A9502F;   /* liens en corps de texte : AA sur creme */
  --or:          #D8A657;   /* les etoiles du logo */
  --sable-clair: #EFE3D2;
  --sable-pale:  #F6ECDE;
  --sable-lumiere: #E8CDAE;  /* 5,2:1 sur olive-nuit */
  --sable-ombre: #E6D3BB;    /* bord des ronds d icone */

  /* papiers */
  --papier:   #FBF7F1;
  --papier-2: #F5EDE3;
  --blanc:    #FFFFFF;

  /* encres */
  --encre:        #2E2A24;
  --encre-douce:  #5C554B;
  --encre-legere: #6B6357;   /* 5,6:1 sur papier, 5,1:1 sur creme */
  --encre-eteinte:#9C9483;   /* jours fermes : 3:1, lisible mais clairement inactif */
  --nuit:         28, 32, 20;    /* le voile des heros sombres, en canaux */
  --nuit-dense:   20, 24, 14;    /* l ombre portee sur photo, en canaux */

  /* polices */
  --titre: "Cormorant Garamond", "Myster", Georgia, "Times New Roman", serif;
  --texte: "Lora", Georgia, "Times New Roman", serif;
  --main:  "Caveat", "Segoe Script", cursive;

  /* rythme */
  --large: 1200px;
  --etroit: 760px;
  --gouttiere: clamp(20px, 5vw, 56px);
  --section: clamp(64px, 9vw, 118px);
  --rayon: 5px;        /* cartes, encadres, boutons */
  --rayon-menu: 3px;   /* petits objets : pastilles, cases, champs */
  --rayon-photo: 2px;  /* les cadres photo restent presque droits */
  --ombre-douce: 0 1px 2px rgba(46, 42, 36, .04), 0 10px 30px rgba(46, 42, 36, .06);
  --ombre-carte: 0 1px 2px rgba(46, 42, 36, .05), 0 18px 44px rgba(46, 42, 36, .08);
}

/* ------------------------------------------------------------------ socle */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.78;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--terre-foncee); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--terre-foncee); text-decoration-color: var(--terracotta); }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 2px;
}

.saut-contenu {
  position: absolute; left: -9999px;
  background: var(--olive-nuit); color: #fff;
  padding: 12px 18px; z-index: 200;
}
.saut-contenu:focus { left: 12px; top: 12px; }

/* --------------------------------------------------------------- gabarits */
.enveloppe { width: 100%; max-width: var(--large); margin-inline: auto; padding-inline: var(--gouttiere); }
.etroit    { max-width: var(--etroit); margin-inline: auto; }
.section   { padding-block: var(--section); }
.section--serree { padding-block: clamp(46px, 6vw, 78px); }
.section--creme  { background: var(--papier-2); }
.section--sable  { background: var(--sable-pale); }
.centre { text-align: center; }

/* ----------------------------------------------------------- typographie */
h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 400;
  color: var(--encre);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -.005em;
}
h1 { font-size: clamp(2.35rem, 5.1vw, 3.7rem); }
.t-heros { font-size: clamp(2.6rem, 6.4vw, 4.55rem); line-height: 1.04; }
h2 { font-size: clamp(1.85rem, 3.5vw, 2.6rem); }
h3, .carte__corps h2 { font-size: clamp(1.3rem, 1.9vw, 1.55rem); line-height: 1.24; }
h4 { font-size: 1.14rem; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.surtitre {
  font-family: var(--texte);
  font-size: .715rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--olive-nuit);
  line-height: 1.7;
  margin: 0 0 1.1em;
}
.surtitre--clair { color: var(--sable-lumiere); }

.manuscrit {
  font-family: var(--main);
  font-weight: 500;
  font-size: clamp(1.95rem, 3.9vw, 2.9rem);
  line-height: 1.12;
  color: var(--encre);
  letter-spacing: .004em;
}
.manuscrit--terre { color: var(--terracotta); }
.signature {
  font-family: var(--main);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.3vw, 1.62rem);
  line-height: 1.35;
  color: var(--terre-foncee);
}

.chapeau {
  font-size: clamp(1.04rem, 1.35vw, 1.17rem);
  line-height: 1.72;
  color: var(--encre-douce);
}
.menu-texte { color: var(--encre-douce); }
.petit { font-size: .875rem; line-height: 1.62; color: var(--encre-legere); }
.terre { color: var(--terracotta); }
/* Sur une photo, l'accent du grand titre passe a la nuance foncee : le
   terracotta pur descendait sous 3:1 par endroits. */
.heros .terre { color: var(--terre-foncee); }
em, .italique { font-style: italic; }

/* filet ornemental court sous un titre */
.filet { width: 62px; height: 1px; background: var(--terracotta); border: 0; margin: 22px 0 26px; }
.filet--centre { margin-inline: auto; }
.filet--long { width: 100px; }

/* filet portant un intitule en son centre */
.ruban {
  display: flex; align-items: center; gap: 18px;
  margin-block: clamp(38px, 5vw, 62px);
}
.ruban::before, .ruban::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: .34;
}
.ruban span, .ruban h2 {
  font-family: var(--texte); font-size: .7rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
  margin: 0; line-height: inherit; color: inherit;
}
@media (max-width: 620px) {
  .ruban { gap: 12px; }
  .ruban span, .ruban h2 { white-space: normal; letter-spacing: .14em; font-size: .66rem; text-align: center; }
}

/* ornement botanique de separation */
.ornement { display: block; width: 58px; margin: 0 auto 22px; color: var(--vert-clair); }
.ornement svg { width: 100%; height: auto; }

/* ------------------------------------------------------------- ancres/CTA */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px;
  background: var(--olive-fonce); color: #fff;
  font-family: var(--texte); font-size: .875rem; font-weight: 500;
  letter-spacing: .055em;
  border: 1px solid var(--olive-fonce); border-radius: var(--rayon);
  text-decoration: none; cursor: pointer;
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.bouton:hover { background: var(--olive-nuit); border-color: var(--olive-nuit); color: #fff; transform: translateY(-1px); box-shadow: var(--ombre-douce); }
.bouton:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.bouton--ligne { background: transparent; color: var(--terre-foncee); border-color: rgba(202, 104, 70, .45); }
.bouton--ligne:hover { background: var(--terre-foncee); border-color: var(--terre-foncee); color: #fff; }
/* Dans un heros, le bouton contour repose sur la photo : il lui faut un fond,
   sinon son libelle se dissout dans l'image entre 950 et 1150 px de large. */
.heros .bouton--ligne { background: rgba(251, 247, 241, .93); border-color: rgba(169, 80, 47, .5); }
.heros .bouton--ligne:hover { background: var(--terre-foncee); border-color: var(--terre-foncee); color: #fff; }

.bouton--clair { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); color: #fff; }
.bouton--clair:hover { background: #fff; border-color: #fff; color: var(--olive-nuit); }

.lien-fleche {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .9rem; font-weight: 500; color: var(--terre-foncee);
  text-decoration: none;
  padding-block: 8px;   /* une cible de 42 px de haut, confortable au pouce */
}
.lien-fleche::after { content: "\2192"; transition: transform .22s ease; }
.lien-fleche:hover::after { transform: translateX(5px); }
.lien-fleche:hover { color: var(--terre-foncee); text-decoration: underline; }

/* ---------------------------------------------------------------- entete */
.entete {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.4) blur(9px);
  border-bottom: 1px solid rgba(46,42,36,.07);
}
.entete__barre {
  display: grid; align-items: center; gap: 16px;
  grid-template-columns: auto 1fr auto;
  min-height: 78px;
}

.marque { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.marque__signe { width: 40px; flex: 0 0 40px; }
.marque__mots { display: flex; flex-direction: column; gap: 2px; }
.marque__nom {
  font-family: var(--titre); font-size: 1.28rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; line-height: 1;
  color: var(--encre);
}
.marque__sous {
  font-family: var(--texte); font-size: .535rem; font-weight: 500;
  letter-spacing: .245em; text-transform: uppercase; color: var(--encre-legere);
  line-height: 1;
}

.nav { display: flex; align-items: center; justify-content: center; gap: clamp(11px, 1.6vw, 26px); }
.nav a {
  position: relative;
  font-family: var(--texte); font-size: .875rem; font-weight: 400;
  color: var(--encre-douce); text-decoration: none; padding: 6px 0;
  white-space: nowrap;
}
.nav a:hover { color: var(--terre-foncee); }
.nav a[aria-current="page"] { color: var(--terre-foncee); font-weight: 500; }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: var(--terracotta);
}
.entete__cta { padding: 12px 22px; font-size: .82rem; white-space: nowrap; }

.burger {
  display: none; width: 44px; height: 44px; grid-column: 3;
  background: none; border: 1px solid rgba(46,42,36,.42); border-radius: var(--rayon-menu);
  cursor: pointer; align-items: center; justify-content: center;
}
.burger span { display: block; width: 19px; height: 1.5px; background: var(--encre); position: relative; transition: transform .2s ease; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 19px; height: 1.5px; background: var(--encre);
  transition: transform .2s ease, opacity .2s ease;
}
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(-90deg); }
.burger[aria-expanded="true"] span::after { opacity: 0; }

@media (max-width: 1000px) {
  .burger { display: flex; }
  .nav, .entete__cta { display: none; }
  .entete__barre { grid-template-columns: 1fr auto; min-height: 68px; }
  .panneau {
    position: fixed; inset: 0; z-index: 89;
    background: var(--papier);
    /* le haut est laisse libre pour l'en-tete, qui reste visible par-dessus */
    padding: 88px var(--gouttiere) 46px;
    display: flex; flex-direction: column; gap: 2px;
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .panneau[hidden] { display: none !important; }
  .panneau a {
    font-family: var(--titre); font-size: 1.7rem; color: var(--encre);
    text-decoration: none; padding: 16px 2px; border-bottom: 1px solid rgba(46,42,36,.09);
  }
  .panneau a:active { color: var(--terre-foncee); }
  .panneau a[aria-current="page"] { color: var(--terre-foncee); }
  .panneau .bouton {
    margin-top: 28px; border-bottom: 0; padding: 17px 30px;
    font-family: var(--texte); font-size: .92rem; color: #fff;
  }
  .panneau .bouton:active { color: #fff; }
}
@media (min-width: 1001px) { .panneau { display: none !important; } }

/* Des que le menu passe en burger, le bloc de marque se resserre : son
   sous-titre tombait a 8,5 px, illisible. */
@media (max-width: 1000px) {
  .marque { gap: 10px; }
  .marque__nom { font-size: 1.1rem; letter-spacing: .085em; }
  .marque__sous { font-size: .665rem; letter-spacing: .115em; white-space: nowrap; }
  .marque__signe { width: 36px; flex: 0 0 36px; }
}

/* Sous 360 px, la marque et le burger ne tiennent plus cote a cote : on
   resserre la gouttiere et l'interlettrage du sous-titre plutot que de le
   reduire jusqu'a l'illisible. */
@media (max-width: 370px) {
  :root { --gouttiere: 16px; }
  .marque { gap: 8px; }
  .marque__nom { font-size: 1.04rem; letter-spacing: .06em; }
  .marque__sous { font-size: .625rem; letter-spacing: .07em; }
  .marque__signe { width: 32px; flex: 0 0 32px; }
  .entete__barre { gap: 10px; }
}

/* ----------------------------------------------------------------- heros */
.heros { position: relative; isolation: isolate; min-height: clamp(520px, 72vh, 720px); display: flex; align-items: center; }
.heros__fond { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.heros__fond img { width: 100%; height: 100%; object-fit: cover; }
.heros__voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(251,247,241,.96) 0%, rgba(251,247,241,.9) 36%, rgba(251,247,241,.58) 60%, rgba(251,247,241,.12) 84%),
    linear-gradient(0deg, rgba(70,85,47,.16), rgba(70,85,47,0) 42%);
}
.heros__texte { max-width: 620px; padding-block: clamp(56px, 9vw, 96px); }
.heros__texte .chapeau { max-width: 470px; }
.heros p.chapeau { margin-bottom: 34px; }

@media (max-width: 760px) {
  .heros { min-height: 0; }
  .heros__voile {
    background:
      linear-gradient(180deg, rgba(251,247,241,.92) 0%, rgba(251,247,241,.86) 55%, rgba(251,247,241,.93) 100%),
      linear-gradient(0deg, rgba(70,85,47,.12), rgba(70,85,47,0) 50%);
  }
}

/* heros sombre, pour la page immersions */
.heros--sombre {
  min-height: clamp(600px, 88vh, 860px); color: #fff; text-align: center;
  flex-direction: column; justify-content: center; align-items: stretch;
}
.heros--sombre > .enveloppe, .heros--sombre > .pied-capitales { width: 100%; }
.heros--sombre h1, .heros--sombre .manuscrit { color: #fff; }
.heros--sombre .chapeau { color: rgba(255,255,255,.9); }
.heros--sombre .heros__voile {
  background:
    linear-gradient(180deg, rgba(var(--nuit),.7) 0%, rgba(var(--nuit),.6) 40%, rgba(var(--nuit),.78) 100%);
}
.heros--sombre .heros__texte { max-width: 1020px; margin-inline: auto; padding-block: clamp(72px, 10vw, 116px); }
.titre-espace {
  font-family: var(--titre); font-weight: 400;
  font-size: clamp(1.62rem, 6vw, 4.3rem); line-height: 1.08;
  letter-spacing: clamp(.03em, .55vw, .13em); text-transform: uppercase;
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------- piliers */
.piliers {
  display: grid; gap: clamp(26px, 3.4vw, 44px);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-top: clamp(42px, 5.5vw, 68px);
}
.pilier { text-align: center; }
.pilier__rond {
  width: 74px; height: 74px; margin: 0 auto 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, var(--sable-pale), var(--sable-clair) 66%, var(--sable-ombre));
  display: grid; place-items: center;
  color: var(--olive-fonce);
}
.pilier__rond svg { width: 31px; height: 31px; }
.pilier h3 { font-size: 1.24rem; margin-bottom: 11px; }
.pilier p { font-size: .905rem; line-height: 1.68; color: var(--encre-legere); }

/* ----------------------------------------------------------------- cartes */
.grille-cartes {
  display: grid; gap: clamp(24px, 3vw, 38px);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  margin-top: clamp(44px, 5.5vw, 70px);
}
.carte {
  background: var(--blanc); border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  display: flex; flex-direction: column;
}
.carte__image { position: relative; background: var(--sable-clair); }
.carte__cadre {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--rayon-photo) var(--rayon-photo) 0 0;
}
.carte__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.carte:hover .carte__image img { transform: scale(1.035); }
.carte__medaille {
  position: absolute; left: 50%; bottom: -25px; transform: translateX(-50%);
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--olive-fonce); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 3px 12px rgba(46,42,36,.2);
  z-index: 2;
}
.carte__medaille svg { width: 23px; height: 23px; }
.carte__corps { padding: 42px clamp(22px, 2.4vw, 30px) clamp(26px, 2.6vw, 32px); display: flex; flex-direction: column; flex: 1; text-align: center; }
.carte__corps h2, .carte__corps h3 { margin-bottom: 12px; }
.carte__corps p { font-size: .925rem; line-height: 1.7; color: var(--encre-legere); }
.carte__corps .lien-fleche { margin-top: auto; padding-top: 20px; align-self: center; }
.carte--nue { box-shadow: none; background: transparent; }

/* carte de formule (page accompagnement) */
.formule {
  background: var(--blanc); border-radius: var(--rayon);
  box-shadow: var(--ombre-douce);
  border-top: 3px solid var(--sable);
  padding: clamp(28px, 3vw, 40px);
  display: flex; flex-direction: column;
}
.formule--phare { border-top-color: var(--terracotta); }
.formule__compte {
  font-family: var(--texte); font-size: .7rem; font-weight: 500;
  letter-spacing: .19em; text-transform: uppercase; color: var(--olive-nuit);
  margin-bottom: 13px;
}
.formule h3 { font-size: clamp(1.45rem, 2.1vw, 1.75rem); margin-bottom: 10px; }
.formule__pourqui { font-size: .93rem; font-style: italic; color: var(--terre-foncee); margin-bottom: 20px; }
.formule p { font-size: .935rem; color: var(--encre-douce); }

.seances { list-style: none; margin: 22px 0 0; padding: 0; }
.seances li {
  position: relative; padding: 9px 0 9px 26px;
  font-size: .915rem; line-height: 1.6; color: var(--encre-douce);
  border-bottom: 1px solid rgba(46,42,36,.06);
}
.seances li:last-child { border-bottom: 0; }
.seances li::before {
  content: ""; position: absolute; left: 3px; top: 18px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--vert-clair);
}
.seances li b { font-weight: 600; color: var(--encre); }
.seances--offert li::before { background: var(--terracotta); }
.seances--offert li { color: var(--encre); }

.cadeau {
  margin-top: 22px; padding: 18px 20px;
  background: var(--sable-pale); border-radius: 3px 3px 6px 6px;
  border-top: 2px solid var(--terracotta);
}
.cadeau p { font-size: .89rem; margin: 0; color: var(--encre-douce); }
.cadeau p + p { margin-top: 8px; }
.cadeau b { color: var(--terre-foncee); font-weight: 600; }

/* --------------------------------------------------------------- deux colonnes */
.duo {
  display: grid; gap: clamp(34px, 5vw, 82px);
  grid-template-columns: 1fr 1fr; align-items: center;
}
.duo--texte-droite { grid-template-columns: .92fr 1.08fr; }
.duo--serre { gap: clamp(28px, 3.6vw, 56px); }
@media (max-width: 880px) { .duo, .duo--texte-droite { grid-template-columns: 1fr; } }

/* tirage papier : la photo montee comme un tirage colle */
.tirage { position: relative; margin-inline: auto; max-width: 430px; }
.tirage__cadre {
  background: var(--blanc); padding: 15px 15px 58px;
  box-shadow: 0 2px 6px rgba(46,42,36,.08), 0 22px 48px rgba(46,42,36,.13);
  transform: rotate(-2.1deg);
}
.tirage__cadre img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.tirage__legende {
  position: absolute; left: 0; right: 0; bottom: 20px;
  text-align: center; font-family: var(--main); font-size: 1.25rem;
  color: var(--encre-legere); transform: rotate(-2.1deg);
}
.tirage__ruban {
  position: absolute; width: 96px; height: 27px;
  background: rgba(220,180,140,.52);
  box-shadow: inset 0 0 0 1px rgba(220,180,140,.3);
}
.tirage__ruban--hg { top: -12px; left: -18px; transform: rotate(-33deg); }
.tirage__ruban--bd { bottom: 26px; right: -20px; transform: rotate(-29deg); }
.tirage__brin { position: absolute; color: var(--vert-clair); opacity: .8; z-index: -1; }
.tirage__brin--g { width: 86px; left: -58px; bottom: 8%; transform: rotate(6deg); }
.tirage__brin--d { width: 66px; right: -40px; top: -22px; transform: rotate(-150deg); }

/* --------------------------------------------------------- liste a fleches */
.fleches { list-style: none; margin: 0; padding: 0; }
.fleches li {
  position: relative; padding: 0 0 17px 34px;
  color: var(--encre-douce); line-height: 1.7;
}
.fleches li:last-child { padding-bottom: 0; }
.fleches li::before {
  content: "\2192"; position: absolute; left: 0; top: -1px;
  color: var(--terracotta); font-size: 1.05rem;
}
.fleches--serree li { padding-bottom: 11px; font-size: .95rem; }

/* pastilles d'information */
.pastilles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; padding: 0; list-style: none; }
.pastilles li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 100px;
  background: var(--blanc); border: 1px solid rgba(118,142,86,.55);
  font-size: .83rem; color: var(--encre-douce);
}
.pastilles li svg { width: 15px; height: 15px; color: var(--olive-fonce); flex: 0 0 15px; }
.pastilles--claires li { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.35); color: #fff; }
.pastilles--claires li svg { color: var(--sable); }

/* ------------------------------------------------------------- citations */
.bandeau {
  background: var(--olive-fonce); color: var(--papier);
  padding-block: clamp(48px, 6.2vw, 82px);
  text-align: center;
}
.bandeau p {
  font-family: var(--titre); font-style: italic;
  font-size: clamp(1.3rem, 2.7vw, 1.95rem); line-height: 1.5;
  max-width: 820px; margin-inline: auto; color: var(--papier);
}
.bandeau__guillemet { display: block; font-size: 2.4rem; line-height: .6; color: var(--sable); margin-bottom: 18px; font-family: var(--titre); }

.bande-signature {
  background: var(--papier-2); padding-block: clamp(34px, 4.4vw, 56px); text-align: center;
  position: relative; overflow: hidden;
}
.bande-signature .signature { position: relative; z-index: 1; }
.bande-signature__coeur { display: inline-block; width: 19px; margin-left: 11px; color: var(--terracotta); vertical-align: -2px; }
.bande-signature__photo {
  position: absolute; right: 0; top: 0; bottom: 0; width: 34%;
  opacity: .2; z-index: 0;
  /* Le noir d'un masque n'est pas une couleur affichee : c'est le canal
     d'opacite. Il ne compte pas dans la palette. */
  mask-image: radial-gradient(120% 130% at 100% 50%, #000 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 130% at 100% 50%, #000 20%, transparent 72%);
}
.bande-signature__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------- cartes de verre */
.verres {
  display: grid; gap: clamp(18px, 2.2vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  margin-top: clamp(38px, 5vw, 58px);
}
.verre {
  background: rgba(var(--nuit),.42);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(7px);
  border-radius: var(--rayon);
  padding: clamp(24px, 2.6vw, 32px) clamp(18px, 2vw, 24px);
  text-align: center; color: #fff;
}
.verre__rond {
  width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
}
.verre__rond svg { width: 26px; height: 26px; }
.verre__rond--olive { background: var(--olive); }
.verre__rond--sable { background: var(--sable); color: #6B4A28; }
.verre__rond--terre { background: var(--terracotta); }
.verre h2 {
  font-family: var(--texte); font-size: .8rem; font-weight: 600;
  letter-spacing: .19em; text-transform: uppercase; margin-bottom: 13px; color: #fff;
}
.verre--olive h2 { color: #CFE0B2; }
.verre--sable h2 { color: #F2DCBE; }
.verre--terre h2 { color: #F4BFA7; }
.verre p { font-size: .895rem; line-height: 1.68; color: rgba(255,255,255,.93); }

/* rangee d'outils au trait, sur fond sombre */
.outils {
  display: grid; gap: clamp(22px, 3vw, 38px);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  text-align: center; color: #fff;
}
.outil svg { width: 38px; height: 38px; margin: 0 auto 16px; color: #fff; }
.outil h3 {
  font-family: var(--texte); font-size: .715rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; margin-bottom: 10px; color: #fff;
}
.outil p { font-size: .82rem; line-height: 1.62; color: rgba(255,255,255,.92);
  text-shadow: 0 1px 3px rgba(var(--nuit-dense),.6); }

.pied-capitales {
  font-family: var(--texte); font-size: .715rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; text-align: center;
  color: rgba(255,255,255,.94); line-height: 1.8;
  text-shadow: 0 1px 3px rgba(var(--nuit-dense),.6);
  padding-block: clamp(30px, 4vw, 48px);
}

/* ------------------------------------------------------------ formulaires */
.carte-form {
  background: var(--papier-2); border-radius: var(--rayon);
  padding: clamp(28px, 3.4vw, 44px);
  box-shadow: var(--ombre-douce);
}
.champ { margin-bottom: 26px; }
.champ label {
  display: block; font-size: .78rem; font-weight: 500; letter-spacing: .04em;
  color: var(--encre-legere); margin-bottom: 7px;
}
.champ label .obligatoire { color: var(--terre-foncee); }
.champ input, .champ textarea, .champ select {
  width: 100%; padding: 9px 2px; background: transparent;
  /* WCAG 1.4.11 demande 3:1 pour la bordure d'un controle : la valeur
     precedente, rgba(202,104,70,.38), tenait 1,5:1 sur la carte creme. */
  border: 0; border-bottom: 1.5px solid rgba(169,80,47,.85);
  font-family: var(--texte); font-size: 1rem; color: var(--encre);
  border-radius: 0;
}
.champ textarea { min-height: 118px; resize: vertical; line-height: 1.65; }
/* On ne supprime jamais l'anneau de focus : on le rend seulement discret et
   assorti. « outline: none » privait la navigation au clavier de tout repere. */
.champ input:focus-visible, .champ textarea:focus-visible, .champ select:focus-visible {
  outline: 2px solid var(--terre-foncee);
  outline-offset: 3px;
  border-bottom-color: var(--terre-foncee); border-bottom-width: 2px;
}
.champ input:focus, .champ textarea:focus, .champ select:focus {
  border-bottom-color: var(--terre-foncee); border-bottom-width: 2px;
}
.champ--erreur input, .champ--erreur textarea { border-bottom-color: #B3402A; }
.champ__erreur { display: none; font-size: .8rem; color: #B3402A; margin-top: 6px; }
.champ--erreur .champ__erreur { display: block; }
.leurre { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-message {
  margin-top: 22px; padding: 16px 20px; border-radius: var(--rayon);
  font-size: .92rem; line-height: 1.65;
}
.form-message[hidden] { display: none !important; }
.form-message--ok { background: rgba(146,167,114,.2); border-top: 2px solid var(--olive); color: var(--encre); }
.form-message--ko { background: rgba(202,104,70,.14); border-top: 2px solid var(--terracotta); color: var(--encre); }

/* coordonnees */
.coordonnees { list-style: none; margin: 30px 0 0; padding: 0; }
.coordonnees li { display: flex; gap: 15px; align-items: flex-start; margin-bottom: 20px; }
.coordonnees svg { width: 19px; height: 19px; flex: 0 0 19px; margin-top: 5px; color: var(--olive-fonce); }
.coordonnees a { color: var(--encre); text-decoration: none; }
.coordonnees a:hover { color: var(--terre-foncee); text-decoration: underline; }
.coordonnees span { color: var(--encre-douce); }

/* ------------------------------------------------------------- calendrier */
.rdv-grille { display: grid; gap: clamp(26px, 3.4vw, 46px); grid-template-columns: 1.05fr .95fr; align-items: start; }
@media (max-width: 900px) { .rdv-grille { grid-template-columns: 1fr; } }

.calendrier { background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre-carte); padding: clamp(20px, 2.4vw, 30px); }
.calendrier__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.calendrier__mois { font-family: var(--titre); font-size: 1.3rem; text-transform: capitalize; }
.calendrier__fleche {
  width: 42px; height: 42px; border: 1px solid rgba(46,42,36,.42); border-radius: var(--rayon-menu);
  background: none; cursor: pointer; display: grid; place-items: center; color: var(--encre-douce);
}
.calendrier__fleche:hover:not(:disabled) { border-color: var(--terre-foncee); color: var(--terre-foncee); }
.calendrier__fleche:disabled { opacity: .3; cursor: not-allowed; }
.calendrier__jours, .calendrier__cases { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendrier__jours span {
  text-align: center; font-size: .66rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-legere); padding-bottom: 8px;
}
.case {
  aspect-ratio: 1; border: 1px solid transparent; border-radius: var(--rayon-menu);
  background: none; cursor: pointer; font-family: var(--texte); font-size: .9rem;
  color: var(--encre); display: grid; place-items: center; position: relative;
}
.case--vide { visibility: hidden; }
.case--fermee { color: var(--encre-eteinte); cursor: not-allowed; }
.case--libre { background: var(--sable-pale); color: var(--encre); font-weight: 500; }
.case--libre:hover { background: var(--sable-clair); }
.case--libre::after {
  content: ""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--olive);
}
.case[aria-pressed="true"] { background: var(--olive-fonce); color: #fff; }
.case[aria-pressed="true"]::after { background: var(--sable); }
.calendrier__legende { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; font-size: .76rem; color: var(--encre-legere); }
.calendrier__legende i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

.creneaux { margin-top: 28px; }
.creneaux__titre { font-family: var(--titre); font-size: 1.16rem; margin-bottom: 14px; }
.creneaux__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; }
.creneau {
  padding: 11px 6px; text-align: center;
  /* 3,64:1 sur blanc : un bouton doit se voir (WCAG 1.4.11). */
  border: 1px solid var(--olive); border-radius: var(--rayon-menu);
  background: var(--blanc); cursor: pointer; font-size: .875rem; color: var(--encre);
}
.creneau:hover:not(:disabled) { border-color: var(--olive-fonce); background: var(--sable-pale); }
.creneau[aria-pressed="true"] { background: var(--olive-fonce); border-color: var(--olive-fonce); color: #fff; }
.creneau:disabled { opacity: .38; cursor: not-allowed; text-decoration: line-through; }
.creneaux__vide { font-size: .9rem; color: var(--encre-legere); font-style: italic; }

.recap {
  padding: 16px 20px; background: var(--sable-pale);
  border-radius: 3px 3px 6px 6px; font-size: .92rem;
  border-top: 2px solid var(--sable);
  color: var(--encre-douce);
}
.recap--pret { border-top-color: var(--olive); color: var(--encre); }
.recap [hidden] { display: none !important; }
.recap b { color: var(--terre-foncee); }

/* ------------------------------------------------------------------- pied */
.pied { background: var(--olive-nuit); color: rgba(255,255,255,.78); padding-block: clamp(52px, 6vw, 76px) 0; }
.pied__grille { display: grid; gap: clamp(30px, 4vw, 54px); grid-template-columns: 1.4fr 1fr 1fr 1.1fr; }
@media (max-width: 900px) { .pied__grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pied__grille { grid-template-columns: 1fr; } }
.pied__marque { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; color: #fff; }
.pied__marque .marque__signe { width: 46px; flex: 0 0 46px; }
.pied__marque .marque__nom { color: #fff; }
.pied__marque .marque__sous { color: rgba(255,255,255,.74); }
.pied h2 {
  font-family: var(--texte); font-size: .715rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sable-lumiere); margin-bottom: 18px;
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 11px; }
.pied a { color: rgba(255,255,255,.78); text-decoration: none; font-size: .9rem; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied p { font-size: .9rem; color: rgba(255,255,255,.78); }
.pied__bas {
  margin-top: clamp(38px, 5vw, 58px); padding-block: 24px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between;
  font-size: .8rem; color: rgba(255,255,255,.74);
}
.pied__bas a { font-size: .8rem; }

/* --------------------------------------------------------- apparitions */
/* Les apparitions au defilement ne sont posees que si le JavaScript tourne :
   la classe « js » est ajoutee a <html> par un script en tete de page. Sans
   elle, tout le contenu reste visible. Une premiere version cachait ces blocs
   par defaut : sans JavaScript, de 39 a 77 % du texte de chaque page restait
   invisible, formulaire de contact compris. */
.js .apparait { opacity: 0; transform: translateY(17px); transition: opacity .7s ease, transform .7s ease; }
.js .apparait.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .apparait { opacity: 1; transform: none; transition: none; }
  .carte:hover .carte__image img { transform: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --------------------------------------------------------------- divers */
.media-cadre { border-radius: var(--rayon-photo); overflow: hidden; box-shadow: var(--ombre-carte); }
.media-cadre img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.media-cadre--haut img { aspect-ratio: 3 / 4; }
.media-cadre--large img { aspect-ratio: 16 / 9; }

.volet { padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid rgba(46,42,36,.08); }
.volet:first-of-type { border-top: 0; padding-top: 0; }

.tableau-simple { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tableau-simple th, .tableau-simple td { text-align: left; padding: 13px 14px; border-bottom: 1px solid rgba(46,42,36,.1); }
.tableau-simple th { font-family: var(--texte); font-weight: 600; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--olive-nuit); }
.defile-x { overflow-x: auto; }


.prose h2 { margin-top: clamp(38px, 4.4vw, 56px); margin-bottom: 16px; font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.prose h3 { margin-top: 30px; margin-bottom: 10px; font-size: 1.16rem; }
.prose ul { padding-left: 20px; color: var(--encre-douce); }
.prose li { margin-bottom: 8px; }
.prose .apreciser { background: rgba(216,166,87,.2); padding: 1px 6px; border-radius: 3px; }

.bloc-vide {
  padding: clamp(30px, 4vw, 48px); text-align: center;
  background: var(--papier-2); border: 1px dashed rgba(118,142,86,.4); border-radius: var(--rayon);
}

/* ------------------------------------------------------- boutons de heros */
.heros__boutons { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------- etapes de la prise de rdv */
.rdv-etapes { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 18px; }
@media (min-width: 700px) { .rdv-etapes { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
.rdv-etapes li { display: flex; gap: 14px; align-items: flex-start; }
.rdv-etape__num {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--sable-pale); color: var(--olive-nuit);
  display: grid; place-items: center;
  font-family: var(--titre); font-size: .95rem; font-weight: 600;
  margin-top: 2px;
}
.rdv-etapes b { font-weight: 600; font-size: .95rem; }
.rdv-etapes .menu-texte { font-size: .885rem; line-height: 1.6; }

/* Le sous-titre d'une carte d'offre : « En presentiel », « 2 jours »... */
.carte__sous {
  display: block; font-family: var(--texte); font-size: .68rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--olive-nuit);
  margin: -4px 0 12px;
}

/* Sur telephone, le tirage occupe toute la largeur : ses brins et ses rubans
   depassaient de l'ecran. On les rentre. */
@media (max-width: 620px) {
  .tirage { max-width: 100%; }
  .tirage__brin { display: none; }
  .tirage__ruban--hg { left: -6px; top: -10px; width: 76px; }
  .tirage__ruban--bd { right: -6px; bottom: 30px; width: 76px; }
}

/* Tres petits ecrans : on rend de la place aux cases du calendrier et au
   grand titre des immersions, qui debordaient sous 360 px. */
@media (max-width: 400px) {
  .calendrier { padding: 16px 10px; }
  .calendrier__jours, .calendrier__cases { gap: 2px; }
  .calendrier__jours span { font-size: .6rem; letter-spacing: .04em; }
  .case { font-size: .84rem; }
  .creneaux__liste { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .pied-capitales { letter-spacing: .12em; font-size: .66rem; }
  .heros--sombre .heros__texte { padding-block: clamp(56px, 12vw, 90px); }
}

/* ==========================================================================
   Telephone : plancher de lisibilite.
   Plusieurs intitules en petites capitales tombaient sous 11 px sur un
   ecran de 390 px, ou ils deviennent illisibles. On les remonte, et on
   detend les cibles tactiles trop serrees.
   ========================================================================== */
@media (max-width: 760px) {
  .surtitre { font-size: .76rem; letter-spacing: .17em; }
  .carte__sous { font-size: .74rem; letter-spacing: .15em; }
  .formule__compte { font-size: .74rem; letter-spacing: .16em; }
  .verre h2 { font-size: .84rem; letter-spacing: .16em; }
  .outil h3 { font-size: .78rem; letter-spacing: .14em; }
  .pied h2 { font-size: .78rem; letter-spacing: .15em; }
  .pied-capitales { font-size: .72rem; letter-spacing: .13em; }
  .ruban span, .ruban h2 { font-size: .72rem; }
  .calendrier__jours span { font-size: .68rem; }
  .pastilles li { font-size: .875rem; padding: 10px 16px; }
  .petit { font-size: .9rem; }
  .pilier p, .carte__corps p { font-size: .95rem; }
  .outil p { font-size: .875rem; }
  .verre p { font-size: .925rem; }

  /* des liens de pied de page vraiment tapables */
  .pied li { margin-bottom: 2px; }
  .pied li a { display: inline-block; padding: 9px 0; font-size: .95rem; }
  .pied__bas { gap: 12px 18px; }
  .pied__bas a { display: inline-block; padding: 6px 0; font-size: .85rem; }
  .coordonnees li { margin-bottom: 14px; }
  .coordonnees a { display: inline-block; padding: 7px 0; }

  /* les boutons prennent toute la largeur : plus simples a viser au pouce */
  .heros__boutons .bouton,
  .carte-form .bouton { width: 100%; }
  .bouton { padding: 16px 26px; }

  /* champs de saisie a 46 px de haut : sous 44 px, on vise mal au pouce et
     iOS zoome tout seul si la police descend sous 16 px */
  .champ input, .champ select { padding: 12px 2px; font-size: 1rem; }
  .champ textarea { padding: 12px 2px; min-height: 132px; }
  .champ { margin-bottom: 22px; }
  .champ label { font-size: .82rem; margin-bottom: 8px; }
}

/* ==========================================================================
   Fort grossissement de police (200 % et plus).
   La barre d'en-tete se replie plutot que de pousser le bouton de menu hors
   de l'ecran : body { overflow-x: hidden } rendait alors le menu inatteignable.
   ========================================================================== */
@media (max-width: 1000px) {
  .entete__barre { grid-template-columns: minmax(0, 1fr) auto; }
  .marque { min-width: 0; }
  .marque__mots { min-width: 0; }
  .marque__nom, .marque__sous { overflow-wrap: anywhere; }
}

/* ==========================================================================
   Espacements nommes.
   Ils remplacent les attributs style="margin-top:..." qui parsemaient les
   gabarits : une mise en forme qui vit dans des attributs en ligne est une
   odeur de page generee, et huit repetitions de la meme valeur ne sont de
   toute facon pas un systeme.
   ========================================================================== */
.apres-texte   { margin-top: 26px; }
.apres-bloc    { margin-top: 30px; }
.apres-filet   { margin-top: 18px; }
.avant-bouton  { margin-bottom: 22px; }
.sans-marge    { margin: 0; }
.a-suivre      { margin-left: 10px; }
.serre-haut    { padding-top: 0; }
.centre-ligne  { display: flex; justify-content: center; }
.grille-apres  { margin-top: clamp(36px, 4.6vw, 58px); }
.ruban-apres   { margin-top: clamp(34px, 4.4vw, 52px); }
.chapeau-heros { max-width: 660px; margin: 26px auto 0; }
.insecable     { white-space: nowrap; }

.bloc-vide--gauche  { text-align: left; margin: 30px 0; }
.section--rapprochee { padding-top: clamp(46px, 6vw, 78px); }
.section--suite     { padding: 0 0 clamp(40px, 5vw, 64px); }
.ruban--clair       { color: #fff; }
.legende-sable      { background: var(--sable-clair); }
.legende-olive      { background: var(--olive-fonce); }

/* Deux blocs de prose en regard s'alignent en tete : centres, leurs
   sur-titres se decalent de quelques pixels parce que les deux colonnes
   n'ont pas la meme hauteur. */
.duo--tete { align-items: start; }