/* =========================================================================
   SUN N MOON · feuille de style du site
   Direction retenue par Caroline : la mise en page éditoriale (maquette A)
   avec l'épure de la maquette B.

   Ses retours, appliqués ici :
     - images plus petites dans les sections d'offre, « plus lisible »
     - vignettes type « ce que la MTE peut t'aider à soulager »
     - présentation des voyages plus claire
     - titres avec une police liée (Allura) pour les sous-titres
       (« Un art de vivre »), côté épuré

   Charte 2026 (Madigraphie) : Open Sans, Allura en exergue,
   nuancier F7F1E8 · E5E1D8 · E1DBCA · B4B99D · DABC59 · 393939.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400&family=Allura&display=swap');

:root{
  --c-creme:#F7F1E8;
  --c-creme-2:#E5E1D8;
  --c-sable:#E1DBCA;
  --c-sauge:#B4B99D;
  --c-or:#DABC59;
  --c-anthracite:#393939;

  --c-blanc:#FFFDF9;
  --c-texte:#393939;
  --c-texte-2:#615F59;
  /* Deux teintes assombries pour le texte seul : la charte garde son or
     #DABC59 et sa sauge #B4B99D pour les aplats. Les valeurs d'origine
     (#B3963C, #8C9376) ne passaient pas le contraste sur les fonds sable. */
  --c-or-fonce:#6B5A1C;
  --c-sauge-fonce:#78805F;
  --c-trait:rgba(57,57,57,.14);

  --page:1180px;
  --entete:104px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
img{display:block;max-width:100%}
picture{display:contents}
picture>source{display:none}
a{color:inherit;text-decoration:none}
.logo{display:block;width:auto;height:auto;max-width:100%}

body{
  font-family:"Open Sans",system-ui,sans-serif;
  font-size:17px;line-height:1.6;color:var(--c-texte);
  background:var(--c-creme);-webkit-font-smoothing:antialiased;
}

/* pas de barre de défilement visible sur téléphone */
@media (max-width:900px){
  html{scrollbar-width:none;-ms-overflow-style:none}
  html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
}

.wrap{width:min(100% - 56px, var(--page));margin-inline:auto}
.wrap-etroit{width:min(100% - 56px, 840px);margin-inline:auto}

/* ---------- typographie ---------- */
h1,h2,h3,h4{font-weight:400;line-height:1.25}

.sur-titre{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--c-or-fonce);margin-bottom:14px;
}
.titre{
  font-size:clamp(1.45rem,2.6vw,1.95rem);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;line-height:1.28;
}
.titre-page{
  font-size:clamp(2rem,4.2vw,3.1rem);font-weight:300;
  text-transform:uppercase;letter-spacing:.12em;line-height:1.18;
}
.titre-mini{font-size:1.02rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* le sous-titre en script : c'est le détail qu'elle a retenu */
.script{
  font-family:"Allura",cursive;letter-spacing:0;line-height:1.25;
  font-size:clamp(1.7rem,2.8vw,2.15rem);color:var(--c-sauge-fonce);
}
.script-or{color:var(--c-or-fonce)}

.chapeau{font-size:1.14rem;color:var(--c-texte-2)}
p{margin-bottom:1em;max-width:70ch}
p:last-child{margin-bottom:0}
.centre{text-align:center}
.centre p,.centre .chapeau{margin-inline:auto}

/* ---------- boutons ---------- */
.btn{
  display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:15px 30px;border:1px solid transparent;
  transition:.2s ease;cursor:pointer;
}
.btn-or{background:var(--c-or);color:var(--c-texte)}
.btn-or:hover{background:#c9a63f;color:var(--c-texte)}
.btn-contour{border-color:var(--c-or);color:var(--c-or-fonce);background:none}
.btn-contour:hover{background:var(--c-or);color:#fff}
.btn-blanc{border-color:#fff;color:#fff;background:none}
.btn-blanc:hover{background:#fff;color:var(--c-or-fonce)}
.btn-pill{border-radius:999px}
.btn .court{display:none}
.lien{
  display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-or-fonce);
  border-bottom:1px solid var(--c-or);padding-bottom:4px;transition:.2s;
}
.lien:hover{color:var(--c-texte);border-color:var(--c-texte)}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}

/* ---------- bandeau d'annonce ---------- */
.annonce{
  background:var(--c-sauge);color:var(--c-texte);text-align:center;padding:10px 20px;
  font-size:.86rem;font-weight:600;position:relative;z-index:60;
}
.annonce a{color:var(--c-texte);border-bottom:1px solid rgba(57,57,57,.45)}

/* ---------- en-tête ---------- */
header{
  position:sticky;top:0;z-index:50;background:rgba(255,253,249,.95);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--c-trait);
}
.nav{display:flex;align-items:center;gap:26px;height:var(--entete);
  width:min(100% - 56px, 1420px)}
.nav .marque{flex:0 0 auto}
.nav .marque img{flex:none}
.nav .marque img{width:236px}
.menu{display:flex;gap:22px;list-style:none;margin-inline:auto;align-items:center}
.menu>li{position:relative}
.menu>li>a{
  display:block;padding:6px 0;font-size:.8rem;font-weight:600;letter-spacing:.06em;
  color:var(--c-texte-2);border-bottom:1.5px solid transparent;transition:.2s;white-space:nowrap;
}
.menu>li>a:hover{color:var(--c-texte);border-color:var(--c-or)}
.menu>li.actif>a{color:var(--c-texte);border-color:var(--c-or)}
.menu .fleche{font-size:.6em;margin-left:5px;vertical-align:middle;opacity:.6}

/* sous-menus : la navigation de Caroline compte 11 entrées, on les regroupe */
.sous-menu{
  position:absolute;top:100%;left:-16px;min-width:230px;list-style:none;
  background:var(--c-blanc);border:1px solid var(--c-trait);
  box-shadow:0 16px 34px -22px rgba(57,57,57,.5);padding:8px 0;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s ease;
}
.menu>li:hover .sous-menu,.menu>li:focus-within .sous-menu{opacity:1;visibility:visible;transform:none}
.sous-menu a{display:block;padding:10px 18px;font-size:.9rem;color:var(--c-texte-2);transition:.15s}
.sous-menu a:hover{background:var(--c-creme);color:var(--c-texte)}
/* Le menu compte neuf entrées : sans consigne, « Réservation en ligne »
   se coupait en deux lignes. Le bouton garde sa ligne, c'est le menu qui
   se resserre. */
.nav .btn{padding:12px 22px;font-size:.68rem;white-space:nowrap;flex:0 0 auto}
@media (max-width:1500px){
  :root{--entete:96px}
  .menu{gap:16px}
  .menu>li>a{font-size:.75rem;letter-spacing:.03em}
  .nav{gap:18px}
  .nav .marque img{width:196px}
  .nav .btn{padding:11px 18px;font-size:.64rem;letter-spacing:.1em}
}
.burger{display:none;margin-left:auto;background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--c-texte)}

/* ---------- hero de l'accueil ----------
   La mise en page retenue : le texte tient la colonne de gauche sur fond crème,
   la photo occupe la droite. C'est le hero de la maquette éditoriale. */
.hero{display:grid;grid-template-columns:1.05fr 1fr;background:var(--c-creme)}
.hero-txt{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,4.4vw,68px) clamp(28px,4vw,64px) clamp(40px,4.4vw,68px)
          max(28px,calc((100vw - var(--page))/2));
}
.hero-txt h1{font-size:clamp(2.6rem,5.4vw,4.2rem);font-weight:300;letter-spacing:.02em;margin-bottom:16px}
.hero-txt .bl{font-size:clamp(1rem,1.4vw,1.16rem);font-weight:700;letter-spacing:.04em;line-height:1.5;margin:0}
.hero-txt .bl span{color:var(--c-or-fonce)}
.hero-txt .intro{margin-top:16px;color:var(--c-texte-2);max-width:46ch;font-size:.98rem}
.hero-img{position:relative;background:var(--c-sable)}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:50% 26%}
.note-google{
  position:absolute;left:-40px;bottom:44px;background:var(--c-blanc);padding:16px 22px;
  box-shadow:0 16px 34px -20px rgba(57,57,57,.42);display:flex;align-items:center;gap:16px;
}
.note-google .etoiles{color:var(--c-or);letter-spacing:2px;font-size:.9rem}
.note-google .n{font-size:1.7rem;font-weight:300;line-height:1}
.note-google small{display:block;font-size:.74rem;color:var(--c-texte-2)}

/* ---------- bandeau de mentions ---------- */
.mentions{background:var(--c-creme-2);border-top:1px solid var(--c-trait);border-bottom:1px solid var(--c-trait)}
.mentions ul{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;list-style:none;
  padding:16px 0;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c-texte-2)}
.mentions li{display:flex;align-items:center;gap:9px}
.mentions li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c-or);flex:none}

/* ---------- bandeau de tête de page ---------- */
.tete{position:relative;overflow:hidden;background:var(--c-sable)}
.tete img{width:100%;aspect-ratio:21/8;object-fit:cover;display:block}
.tete.haut img{aspect-ratio:21/9}
.tete::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(30,27,20,.78) 0%,rgba(30,27,20,.42) 55%,rgba(30,27,20,.2) 100%)}
.tete-txt{position:absolute;inset:auto 0 0 0;z-index:2;padding-bottom:clamp(26px,3.4vw,48px)}
.tete-txt .sur-titre{color:#fff}
.tete-txt h1{color:#fff;font-weight:300;text-transform:uppercase;letter-spacing:.12em;
  font-size:clamp(1.8rem,3.6vw,2.8rem)}
.tete-txt .script{color:#fff;margin-top:6px}

/* ---------- sections ---------- */
section{padding:clamp(44px,4.4vw,68px) 0}
.f-creme{background:var(--c-creme)}
.f-creme2{background:var(--c-creme-2)}
.f-sable{background:var(--c-sable)}
.f-blanc{background:var(--c-blanc)}
.entete-sect{max-width:640px;margin-bottom:30px}
.entete-sect.centre{margin-inline:auto}

/* ---------- texte + image ----------
   Images volontairement contenues : « les images sont un peu plus petites,
   je trouve plus lisible ». */
.duo{display:grid;grid-template-columns:minmax(0,1fr) 40%;gap:clamp(28px,3.4vw,52px);align-items:center}
/* Bloc inversé : on échange AUSSI les largeurs de colonnes. Avec le seul
   `order`, l'image se retrouvait dans la colonne large (46 %) et le texte
   dans l'étroite, l'inverse de ce qui est voulu. */
.duo.inv{grid-template-columns:40% minmax(0,1fr)}
.duo.inv figure{order:1}
.duo.inv .col-txt{order:2}
.duo figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
.duo.carre figure img{aspect-ratio:1/1}
.duo p{color:var(--c-texte-2)}

/* ---------- cartes ---------- */
.grille{display:grid;gap:22px}
.grille-2{grid-template-columns:repeat(2,1fr)}
.grille-3{grid-template-columns:repeat(3,1fr)}
.grille-4{grid-template-columns:repeat(4,1fr)}
.carte{background:var(--c-blanc);border:1px solid var(--c-trait);display:flex;flex-direction:column;transition:.22s}
.carte:hover{transform:translateY(-4px);box-shadow:0 18px 34px -24px rgba(57,57,57,.45)}
.carte figure{overflow:hidden;aspect-ratio:3/2}
.carte-large{flex-direction:row;align-items:stretch}
.carte-large figure{flex:0 0 44%;aspect-ratio:auto}
.carte-large .carte-corps{justify-content:center}
@media (max-width:760px){.carte-large{flex-direction:column}
  .carte-large figure{flex:none;aspect-ratio:3/2}}
.carte figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.carte:hover figure img{transform:scale(1.04)}
.carte-corps{padding:22px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.carte-corps h3{font-size:1.02rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.35}
.carte-corps .script{font-size:1.35rem;margin-top:-4px}
.carte-corps p{font-size:.92rem;color:var(--c-texte-2);flex:1;margin:0}
.carte-corps .lien{align-self:flex-start;margin-top:6px}
.etiq{
  display:inline-block;align-self:flex-start;background:var(--c-or);color:var(--c-texte);
  font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:5px 11px;
}

/* ---------- vignettes ----------
   Le format qu'elle a retenu : « ça rend la page lisible et dynamique ». */
.vignettes{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px;list-style:none}
.vignettes li{
  font-size:.86rem;padding:8px 16px;border:1px solid var(--c-trait);
  background:rgba(255,255,255,.6);color:var(--c-texte-2);border-radius:999px;
}

/* ---------- listes d'offres ---------- */
.offres{list-style:none;border-top:1px solid var(--c-trait);margin-top:22px}
.offres li{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 24px;
  padding:15px 0;border-bottom:1px solid var(--c-trait);align-items:baseline;
}
.offres b{font-weight:700;font-size:1rem}
.offres span{grid-column:1;font-size:.9rem;color:var(--c-texte-2)}
.offres em{grid-row:1 / span 2;grid-column:2;align-self:center;font-style:normal;font-weight:700;white-space:nowrap}

/* ---------- encadré ---------- */
.encadre{
  background:var(--c-blanc);border:1px solid var(--c-trait);
  padding:clamp(22px,2.4vw,32px);margin-top:28px;
}
.encadre.or{border-left:3px solid var(--c-or)}
.encadre p{font-size:.94rem;color:var(--c-texte-2)}
.bandeau-cta{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:var(--c-blanc);border:1px solid var(--c-trait);padding:24px 28px;margin-top:30px;
}
.bandeau-cta p{font-size:.94rem;color:var(--c-texte-2);margin:0}
.bandeau-cta b{color:var(--c-texte)}

/* ---------- étapes numérotées ---------- */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:e}
.etape{background:var(--c-blanc);border:1px solid var(--c-trait);padding:26px 24px}
.etape::before{
  counter-increment:e;content:"0" counter(e);
  display:block;font-size:1.9rem;font-weight:300;color:var(--c-sauge);line-height:1;margin-bottom:10px;
}
.etape h3{font-size:1rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px}
.etape p{font-size:.92rem;color:var(--c-texte-2);margin:0}

/* ---------- planning ---------- */
.planning{border-top:1px solid var(--c-trait)}
.pl-ligne{display:grid;grid-template-columns:190px 1fr;gap:26px;padding:20px 0;
  border-bottom:1px solid var(--c-trait);align-items:start}
.pl-jour{font-size:1.12rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.pl-jour small{display:block;font-size:.64rem;font-weight:700;letter-spacing:.2em;
  color:var(--c-or-fonce);margin-top:7px}
.pl-creneaux{display:flex;flex-wrap:wrap;gap:12px 36px}
.pl-c{min-width:200px}
.pl-c b{display:block;font-weight:700;font-size:.96rem;font-variant-numeric:tabular-nums}
.pl-c span{font-size:.88rem;color:var(--c-texte-2)}

/* ---------- voyages ----------
   « la partie voyage est bien plus claire dans cette présentation » */
.voyages{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.voyage{background:var(--c-blanc);border:1px solid var(--c-trait);display:flex;flex-direction:column;transition:.22s}
.voyage:hover{transform:translateY(-4px);box-shadow:0 18px 34px -24px rgba(57,57,57,.45)}
.voyage figure{aspect-ratio:3/2;overflow:hidden}
.voyage figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.voyage:hover figure img{transform:scale(1.04)}
.voyage-corps{padding:20px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.voyage .dates{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-or-fonce)}
.voyage h3{font-size:1rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.35}
.voyage p{font-size:.88rem;color:var(--c-texte-2);margin:0;flex:1}
.voyage .places{font-size:.78rem;color:var(--c-texte-2)}
.voyage .tarif{margin-top:auto;padding-top:11px;border-top:1px solid var(--c-trait);font-weight:700;font-size:.94rem}

/* ---------- article de blog ---------- */
.article p{font-size:1.05rem;line-height:1.75;margin-bottom:1.1em;max-width:none}
.article h2{color:var(--c-texte);text-transform:none;letter-spacing:.02em}
.article-nav{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:26px;border-bottom:1px solid var(--c-trait);margin-bottom:26px}
.date-article{display:block;font-size:.76rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--c-texte-2);margin-top:10px}

.article h2{margin:36px 0 12px;font-size:clamp(1.15rem,1.9vw,1.4rem)}
.article h2:first-child{margin-top:0}
.article .illu{margin:30px 0}
/* les photos verticales de Caroline font parfois 1100x1600 : sans plafond de
   hauteur, une seule image occupe plus d'un écran et coupe la lecture */
.article .illu img{max-width:100%;max-height:74vh;width:auto;height:auto;
  border-radius:2px;display:block;margin:0 auto}
.article .galerie{display:grid;gap:12px;margin:30px 0;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));align-items:start}
.article .galerie img{width:100%;height:auto;border-radius:2px;display:block}
.article .legende{font-size:.86rem;color:var(--c-texte-2);font-style:italic;
  text-align:center;margin:-18px 0 30px}
.article blockquote{border-left:2px solid var(--c-or);padding-left:20px;margin:26px 0;
  font-style:italic;color:var(--c-texte-2)}
@media (max-width:640px){.article .galerie{grid-template-columns:1fr 1fr;gap:8px}}

/* ---------- listes à puces et tarifs ---------- */
.puces{margin:12px 0 0;padding:0;list-style:none}
.puces li{position:relative;padding-left:18px;margin-bottom:6px;color:var(--c-texte-2)}
.puces li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--c-or)}
.prix{margin-top:18px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  font-size:.9rem;color:var(--c-texte)}

.f-legal{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end}

/* Sur la rangée de quatre, « Médecine traditionnelle européenne et nutrition »
   court sur trois lignes là où les autres en tiennent une. Plutôt que de
   réserver une hauteur au jugé, on laisse le titre respirer en haut et on
   ancre le sous-titre en Allura et le lien en bas : ils s'alignent d'eux-mêmes
   quelle que soit la longueur du titre. */
.grille-4 .carte-corps h3{font-size:1rem;line-height:1.28}
.grille-4 .carte-corps .script{flex:0 0 auto;margin-top:auto;padding-top:10px}

/* ---------- tête à deux colonnes ----------
   Pour les pages dont la photo est en portrait : la bannière panoramique
   n'en montrait qu'une bande, coupée au visage. Ici la photo reste entière. */
.tete-duo{display:grid;grid-template-columns:1fr 42%;background:var(--c-creme);
  align-items:center;gap:clamp(24px,3vw,48px);
  padding-left:max(28px,calc((100vw - var(--page))/2));padding-right:0}
.tete-duo-txt{padding:clamp(44px,5vw,76px) 0}
.tete-duo-txt h1{font-size:clamp(2.1rem,4.2vw,3.2rem);font-weight:300;
  letter-spacing:.06em;text-transform:uppercase;margin:8px 0 6px}
.tete-duo-txt .intro{margin-top:16px;color:var(--c-texte-2);max-width:44ch;font-size:.98rem}
.tete-duo figure{margin:0;height:100%}
.tete-duo figure img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
@media (max-width:860px){
  .tete-duo{grid-template-columns:1fr;padding:0;gap:0}
  .tete-duo-txt{padding:clamp(32px,6vw,48px) 28px}
  .tete-duo figure{order:-1;aspect-ratio:3/2}
}

/* lu par les lecteurs d'écran, invisible à l'œil */
.hors-ecran{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- galerie de voyage ---------- */
.galerie-voyage{display:grid;gap:clamp(10px,1.4vw,16px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.galerie-voyage figure{margin:0;overflow:hidden;aspect-ratio:3/2}
.galerie-voyage img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s ease}
.galerie-voyage figure:hover img{transform:scale(1.04)}
@media (max-width:620px){.galerie-voyage{grid-template-columns:1fr 1fr;gap:8px}}

/* ---------- ateliers, rendus depuis le studio en ligne ---------- */
.ateliers{display:grid;gap:clamp(18px,2.2vw,26px);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-top:clamp(24px,3vw,36px)}
.atelier{background:var(--c-blanc);border:1px solid var(--c-trait);
  display:flex;flex-direction:column;transition:.22s}
.atelier:hover{transform:translateY(-3px);box-shadow:0 16px 30px -22px rgba(57,57,57,.4)}
.atelier figure{aspect-ratio:3/2;overflow:hidden}
.atelier figure img{width:100%;height:100%;object-fit:cover}
.atelier-corps{padding:clamp(20px,2.2vw,26px);display:flex;flex-direction:column;flex:1}
.atelier-corps h3{font-size:1.06rem;letter-spacing:.03em;margin-bottom:10px}
.atelier-dates{list-style:none;margin:0 0 12px;padding:0}
.atelier-dates li{font-size:.85rem;font-weight:600;color:var(--c-or-fonce);
  padding-left:16px;position:relative;margin-bottom:3px}
.atelier-dates li::before{content:'';position:absolute;left:0;top:.55em;
  width:6px;height:6px;border-radius:50%;background:var(--c-or)}
.atelier-corps p{font-size:.92rem;color:var(--c-texte-2);margin:0 0 12px}
.atelier-note{font-style:italic;font-size:.86rem !important}
.atelier-pied{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:auto;padding-top:14px;border-top:1px solid var(--c-trait)}
.atelier-meta{font-size:.78rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--c-texte-2)}
.atelier-prix{font-size:1.15rem;font-weight:300}
.atelier .btn{margin-top:16px;text-align:center}
.atelier-vide{grid-column:1/-1;color:var(--c-texte-2)}

/* ---------- bandeau abonnement flex ---------- */
/* la règle vaut pour tous les abonnements : elle court sous les deux cartes */
.bandeau-flex{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,44px);
  align-items:center;margin-top:22px;padding:clamp(22px,2.6vw,32px);
  background:var(--c-blanc);border:1px solid var(--c-trait);border-left:3px solid var(--c-or)}
.flex-tarif{text-align:right;border-left:1px solid var(--c-trait);padding-left:clamp(20px,3vw,40px)}
.flex-tarif span{display:block;font-size:.76rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-texte-2)}
.flex-tarif b{display:block;font-size:1.6rem;font-weight:300;margin:4px 0 2px}
.flex-tarif small{font-size:.8rem;color:var(--c-texte-2)}
@media (max-width:700px){.bandeau-flex{grid-template-columns:1fr}
  .flex-tarif{text-align:left;border-left:0;border-top:1px solid var(--c-trait);
    padding:16px 0 0}}

/* ---------- exergue à filets ---------- */
.exergue{text-align:center;padding:clamp(40px,4.4vw,64px) 0;
  width:min(100%, 980px);margin-inline:auto}
.exergue .filet{width:190px;margin:0 auto}
.exergue p{
  font-family:"Allura",cursive;font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.35;
  color:var(--c-sauge-fonce);max-width:40ch;margin:26px auto;
}

/* ---------- avis ---------- */
.avis{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.avi{background:var(--c-blanc);border:1px solid var(--c-trait);padding:26px 24px;display:flex;flex-direction:column}
.avi .etoiles{color:var(--c-or);letter-spacing:3px;margin-bottom:13px;font-size:.88rem}
.avi p{font-size:.92rem;color:var(--c-texte-2);flex:1;line-height:1.62}
.avi cite{font-style:normal;font-weight:700;font-size:.88rem;margin-top:16px}

/* ---------- bandeau blog ---------- */
.blog{display:grid;grid-template-columns:40% 60%;background:var(--c-or)}
.blog img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.blog-txt{color:var(--c-texte);display:flex;flex-direction:column;justify-content:center;padding:clamp(34px,4vw,60px)}
.blog-txt h2{font-size:clamp(1.9rem,3.4vw,2.8rem);font-weight:300;line-height:1.16}
.blog-txt p{margin:16px 0 24px;font-size:1.04rem}
.blog-txt .sur-titre{color:var(--c-texte) !important}
.blog-txt .btn-blanc{border-color:var(--c-texte);color:var(--c-texte)}
.blog-txt .btn-blanc:hover{background:var(--c-texte);color:#fff}

/* ---------- formulaire ---------- */
.contact-grille{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,4vw,60px)}
.coord dl{display:flex;flex-direction:column;gap:18px;margin-top:22px}
.coord dt{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--c-or-fonce);margin-bottom:5px}
.coord dd{font-size:1rem}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
form .large{grid-column:1/-1}
label{display:block;font-size:.82rem;color:var(--c-texte-2);margin-bottom:7px}
input,textarea{width:100%;background:var(--c-blanc);border:1px solid var(--c-trait);
  padding:13px 15px;font:400 1rem "Open Sans",sans-serif;color:var(--c-texte)}
input:focus,textarea:focus{outline:0;border-color:var(--c-or)}
textarea{min-height:130px;resize:vertical}
.case{display:flex;align-items:center;gap:11px;font-size:.92rem;color:var(--c-texte-2)}
.case input{width:19px;height:19px;accent-color:var(--c-sauge)}

/* ---------- pied de page ---------- */
footer{background:var(--c-creme-2);padding:clamp(42px,4.4vw,64px) 0 28px;font-size:.9rem;color:var(--c-texte-2)}
.f-haut{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:38px;padding-bottom:36px;
  border-bottom:1px solid var(--c-trait)}
footer .logo-pied{width:196px;margin-bottom:18px}
footer .f-titre{font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-or-fonce);margin-bottom:15px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:9px}
footer a:hover{color:var(--c-texte)}
.f-labels{display:flex;gap:14px;align-items:center;margin-top:18px}
.f-labels img{width:44px;height:auto}
.f-labels .asca{width:84px}
.f-bas{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:22px;font-size:.78rem}

/* ---------- responsive ---------- */
@media (max-width:1220px){
  .menu{display:none}
  .burger{display:block;order:3}
  .nav .btn{margin-left:auto;order:2}
  header.ouvert .menu{
    display:flex;flex-direction:column;gap:0;align-items:stretch;margin:0;
    position:absolute;left:0;right:0;top:100%;background:var(--c-blanc);
    border-bottom:1px solid var(--c-trait);padding:6px 28px 18px;
    box-shadow:0 18px 30px -22px rgba(57,57,57,.5);max-height:74vh;overflow:auto;
  }
  header.ouvert .menu>li>a{padding:14px 0;font-size:.98rem;color:var(--c-texte);
    border-bottom:1px solid var(--c-trait);border-top:0}
  header.ouvert .sous-menu{
    position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;
    background:none;padding:0 0 8px 16px;min-width:0;
  }
  header.ouvert .sous-menu a{padding:9px 0;font-size:.92rem}
  header.ouvert .menu .fleche{display:none}

  .hero{grid-template-columns:1fr}
  .hero-txt{order:2;padding:38px 28px 42px}
  .hero-img{order:1;aspect-ratio:3/2}
  .note-google{left:auto;right:14px;bottom:14px;padding:12px 16px;gap:13px}
  .note-google .n{font-size:1.4rem}
  .duo,.duo.inv{grid-template-columns:1fr}
  .duo.inv .col-txt,.duo.inv figure{order:0}
  .duo figure{order:-1}
  .grille-3,.grille-4,.etapes,.avis{grid-template-columns:repeat(2,1fr)}
  .voyages{grid-template-columns:repeat(2,1fr)}
  .contact-grille,.blog{grid-template-columns:1fr}
  .blog img{aspect-ratio:3/2}
  .f-haut{grid-template-columns:1fr 1fr}
  .tete img{aspect-ratio:3/2}
}
@media (max-width:620px){
  .wrap,.wrap-etroit{width:min(100% - 40px, var(--page))}
  .nav{height:82px}
  .nav .marque img{width:172px}
  .nav .btn{padding:11px 16px;font-size:.62rem;white-space:nowrap}
  .btn .long{display:none}
  .btn .court{display:inline}
  .annonce{font-size:.78rem;line-height:1.4}

  .hero-txt{padding:32px 20px 36px}
  .hero-img{aspect-ratio:4/3}
  .mentions ul{flex-direction:column;gap:9px;padding:14px 0;font-size:.72rem}
  .grille-2,.grille-3,.grille-4,.etapes,.avis{grid-template-columns:1fr}
  .voyages{grid-template-columns:1fr 1fr;gap:12px}
  .voyage-corps{padding:14px 13px 16px}
  .voyage h3{font-size:.9rem}
  .voyage p{font-size:.8rem}
  .voyage .dates{font-size:.62rem}
  .avis .avi:nth-child(n+2){display:none}
  .offres li{grid-template-columns:minmax(0,1fr)}
  .offres em{grid-row:auto;grid-column:1;align-self:start;margin-top:2px}
  .bandeau-cta{flex-direction:column;align-items:stretch}
  .bandeau-cta .btn{text-align:center}
  .actions .btn{flex:1 1 100%;text-align:center}
  .pl-ligne{grid-template-columns:1fr;gap:11px}
  form{grid-template-columns:1fr}
  .tete img{aspect-ratio:4/3}
  .f-haut{grid-template-columns:1fr;gap:26px}
  .f-bas{flex-direction:column;gap:9px}
}