/* ============================================================
   ACCUEIL
   Chargé par index.html : hero, récit, concept, histoire.
   ============================================================ */

/* la collection : c'est elle le visuel de la page */
.collection-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ligne);
  border:1px solid var(--ligne);margin-top:clamp(34px,4vw,54px)}
@media(max-width:900px){.collection-grille{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.collection-grille{grid-template-columns:1fr}}
.destination{position:relative;display:flex;flex-direction:column;gap:12px;text-align:left;
  background:var(--ivoire);border:none;padding:clamp(24px,2.8vw,36px);cursor:pointer;
  transition:background .3s}
.destination:hover{background:var(--ivoire-2)}
.destination::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--couleur);
  transform:scaleY(.22);transform-origin:top;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.destination:hover::before{transform:scaleY(1)}
.destination .vue{width:88px;height:88px;object-fit:contain;margin-bottom:4px}
.destination .num{font-size:19px;color:var(--couleur);line-height:1}
.destination .nom{font-family:var(--serif);font-size:clamp(28px,3vw,40px);line-height:1;color:var(--couleur)}
.destination .quoi{font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--kaki);max-width:26em}
.destination .aller{margin-top:auto;padding-top:18px;font-family:var(--sans);font-size:10.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--kaki);display:flex;align-items:center;gap:9px}
.destination .aller .fl{color:var(--couleur);transition:transform .3s}
.destination:hover .aller .fl{transform:translateX(5px)}
.destination[data-carnet="vide"] .aller{color:rgba(88,98,70,.5)}
.destination .statut{position:absolute;top:clamp(24px,2.8vw,36px);right:clamp(24px,2.8vw,36px);
  font-family:var(--sans);font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--couleur);border:1px solid currentColor;padding:4px 8px}

/* les deux façons de commander */
.offres{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);margin-top:clamp(34px,4vw,52px)}
@media(max-width:860px){.offres{grid-template-columns:1fr}}
.offre{border:1px solid var(--ligne);background:var(--ivoire);display:flex;flex-direction:column}
.offre img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--ivoire-2)}
.offre .dedans{padding:clamp(24px,2.8vw,36px);display:flex;flex-direction:column;gap:14px;flex:1 1 auto}
.offre h3{font-size:clamp(26px,2.8vw,36px);line-height:1.06}
.offre .rythme{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--or)}
.offre p{font-size:19px;line-height:1.6;color:rgba(33,48,31,.86)}
.offre .btn{align-self:flex-start;margin-top:auto}

/* bandeau de départ */
.bandeau{background:var(--vert);color:var(--ivoire);
  max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.22,.61,.36,1)}
.bandeau.on{max-height:120px}
.bandeau .dedans{max-width:var(--max);margin:0 auto;padding:16px var(--gouttiere);
  display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);flex-wrap:wrap}
.bandeau .quand{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--or)}
.bandeau .quoi{font-size:clamp(19px,1.9vw,24px);line-height:1.2}
.bandeau .quoi .x{color:var(--or);font-style:italic;padding:0 .12em}
.bandeau .btn{margin-left:auto}
.bandeau .fermer-b{background:none;border:none;cursor:pointer;color:rgba(239,232,219,.6);
  font-family:var(--sans);font-size:18px;line-height:1;padding:10px}
.bandeau .fermer-b:hover{color:var(--ivoire)}
@media(max-width:700px){
  .bandeau.on{max-height:220px}
  .bandeau .dedans{padding-top:14px;padding-bottom:16px;gap:10px}
  .bandeau .quand{flex:1 1 auto}
  .bandeau .quoi{flex:1 1 100%;font-size:19px}
  .bandeau .btn{margin-left:0;flex:1 1 100%;text-align:center;padding:15px 20px}
  .bandeau .fermer-b{order:9;margin-left:auto;padding:4px 0 4px 10px;position:absolute;right:16px;top:10px}
  .bandeau .dedans{position:relative;padding-right:44px}
}

/* popin de départ */
.popin-voile{position:fixed;inset:0;z-index:96;background:rgba(33,48,31,.5);
  opacity:0;visibility:hidden;transition:opacity .34s,visibility .34s}
.popin-voile.on{opacity:1;visibility:visible}
.popin{position:fixed;z-index:97;left:50%;top:50%;transform:translate(-50%,-46%) scale(.98);
  width:min(560px,92vw);background:var(--ivoire);border:1px solid var(--vert);
  opacity:0;visibility:hidden;transition:opacity .34s,transform .34s cubic-bezier(.22,.61,.36,1),visibility .34s}
.popin.on{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
@media(prefers-reduced-motion:reduce){.popin,.popin-voile{transition:none}}
.popin-dedans{padding:clamp(30px,4vw,48px)}
.popin .quand{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--kaki)}
.popin h2{font-size:clamp(30px,3.6vw,46px);line-height:1.06;margin-top:14px}
.popin h2 .x{color:var(--or);font-style:italic;padding:0 .1em}
.popin .plats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:clamp(22px,2.6vw,30px)}
/* Les packshots sont des assiettes rondes détourées : « cover » dans un cadre 4/3
   leur coupait le haut et le bas, et deux assiettes de compositions différentes
   paraissaient alors de tailles différentes. Cadre carré + « contain » : chaque
   assiette est entière et toutes ont le même diamètre apparent. */
.popin .plats img{width:100%;aspect-ratio:1/1;object-fit:contain;background:var(--ivoire-2)}
.popin .lede{margin-top:clamp(20px,2.4vw,28px);font-size:19px}
.popin .actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:clamp(24px,2.8vw,32px)}
.popin .plus-tard{background:none;border:none;cursor:pointer;font-family:var(--sans);font-size:11.5px;
  letter-spacing:.06em;color:var(--kaki);border-bottom:1px dotted var(--kaki);padding:0 0 3px}
.popin .plus-tard:hover{color:var(--vert);border-color:var(--vert)}
.popin .croix{position:absolute;top:14px;right:14px;background:none;border:none;cursor:pointer;
  font-family:var(--sans);font-size:20px;line-height:1;color:var(--kaki);padding:8px 10px}
.popin .croix:hover{color:var(--vert)}

/* sélecteur de démonstration */
  padding:9px 13px 7px;color:var(--kaki);border-bottom:1px solid var(--ligne-f)}
  background:none;border:none;border-top:1px solid var(--ligne-f);cursor:pointer;color:var(--vert)}

/* ---------- récit de l'accueil ---------- */
.citation{margin:clamp(34px,4.4vw,60px) 0 0;font-size:clamp(28px,3.6vw,50px);line-height:1.14;
  font-style:italic;color:var(--kaki);max-width:15em}
.citation .sig{display:block;margin-top:18px;font-family:var(--sans);font-style:normal;font-size:11px;
  font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--or)}
.anatomie{list-style:none;counter-reset:a;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin-top:clamp(32px,4vw,50px);border-top:1px solid var(--ligne)}
.anatomie li{counter-increment:a;padding:26px 26px 30px 0;border-right:1px solid var(--ligne-f)}
.anatomie li:last-child{border-right:none;padding-right:0}
.anatomie li::before{content:counter(a,decimal-leading-zero);display:block;font-size:21px;color:var(--or);margin-bottom:14px}
.anatomie h3{font-size:23px;line-height:1.2}
.anatomie p{font-family:var(--sans);font-size:13px;line-height:1.62;color:var(--kaki);margin-top:10px}
@media(max-width:900px){.anatomie{grid-template-columns:1fr 1fr}.anatomie li{border-right:none;border-bottom:1px solid var(--ligne-f);padding-right:26px}
  .anatomie li:nth-child(odd){border-right:1px solid var(--ligne-f)}}
@media(max-width:560px){.anatomie{grid-template-columns:1fr}.anatomie li,.anatomie li:nth-child(odd){border-right:none}}

.vivante{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,34px);margin-top:clamp(32px,4vw,48px)}
@media(max-width:820px){.vivante{grid-template-columns:1fr}}
.vivante article{border-top:1px solid var(--ligne);padding-top:22px}
.vivante article{display:flex;flex-direction:column}
.vivante article .media{display:flex;align-items:flex-end;height:150px;margin-bottom:16px}
.vivante article .media img{max-height:150px;max-width:100%;width:auto;opacity:.9}
.vivante h3{font-size:clamp(21px,2vw,26px);line-height:1.2}
.vivante p{font-size:18px;line-height:1.6;color:rgba(33,48,31,.86);margin-top:12px}
.vivante .marque-v{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--or)}

.histoire-grid{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:clamp(28px,4vw,68px);align-items:start}
@media(max-width:900px){.histoire-grid{grid-template-columns:1fr;gap:30px}}
.pull{margin:clamp(28px,3.2vw,40px) 0;padding-left:24px;border-left:1px solid var(--or);
  font-size:clamp(21px,2.2vw,28px);line-height:1.3;font-style:italic;color:var(--kaki)}

/* Le hero de page vit désormais dans socle.css (partagé accueil + escales). */

/* ---------- le concept en trois temps ---------- */
.concept{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:clamp(30px,3.6vw,48px);
  background:var(--ligne);border:1px solid var(--ligne)}
@media(max-width:820px){.concept{grid-template-columns:1fr}}
.concept article{background:var(--ivoire);padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;gap:12px}
.concept .media{display:flex;align-items:center;justify-content:flex-start;height:134px;margin-bottom:6px}
.concept .media img{max-height:134px;max-width:100%;width:auto}
.concept .n{font-size:19px;color:var(--or);line-height:1}
.concept h3{font-size:clamp(22px,2.2vw,28px);line-height:1.14}
.concept p{font-size:17.5px;line-height:1.58;color:rgba(33,48,31,.86)}

/* ---------- le départ de la semaine sur l'accueil ---------- */
.depart-deux{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,36px);margin-top:clamp(28px,3.4vw,44px)}
@media(max-width:760px){.depart-deux{grid-template-columns:1fr}}
.depart-carte{position:relative;border:1px solid var(--ligne);background:var(--ivoire);padding:clamp(18px,2.2vw,26px);overflow:hidden}
.depart-carte .fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:.20;z-index:0}
.depart-carte .dedans{position:relative;z-index:1}
.depart-carte .lieu{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--kaki)}
.depart-carte h3{font-size:clamp(26px,2.8vw,38px);line-height:1;color:var(--couleur);margin-top:6px}
.depart-carte .quoi{font-family:var(--sans);font-size:13px;line-height:1.6;color:var(--kaki);margin-top:12px}
.depart-carte img.plat{width:100%;margin-top:14px}
.decouverte-ligne{display:flex;align-items:center;gap:clamp(18px,2.6vw,32px);flex-wrap:wrap;
  margin-top:clamp(26px,3vw,38px);border:1px solid var(--ligne);background:var(--ivoire);padding:clamp(18px,2.4vw,28px)}
.decouverte-ligne img{width:104px;height:104px;object-fit:contain;flex:0 0 auto}
.decouverte-ligne .txt{flex:1 1 320px}
.decouverte-ligne .txt p{font-size:19px;line-height:1.55}
.decouverte-ligne .txt .sur{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--or);margin-bottom:8px}

/* ---------- l'histoire, mise en forme de production ---------- */
.histoire-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(36px,6vw,100px);align-items:start}
.histoire-visual{position:sticky;top:120px}
.histoire-visual img{display:block;width:min(78%,340px);margin:0 auto;opacity:.9}
.histoire-visual figcaption{text-align:center;font-family:var(--sans);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--kaki);margin-top:20px;line-height:1.7}
.histoire-txt p{margin-bottom:1.3em;font-size:19px;line-height:1.8;color:rgba(33,48,31,.86);max-width:36em}
.histoire-txt .devise{font-size:clamp(26px,2.8vw,38px);line-height:1.3;margin:48px 0 40px;color:var(--vert)}
@media(max-width:900px){
  .histoire-grid{grid-template-columns:1fr}
  .histoire-visual{position:static}
}


/* ---------- où nous trouver ---------- */
.lieu-adresse{font-style:normal;font-family:var(--serif);font-size:clamp(20px,2vw,25px);
  line-height:1.45;color:var(--vert);margin-top:clamp(24px,3vw,34px)}
.lieu-retrait{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--ligne)}
.lieu-retrait .quoi{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--kaki)}
.lieu-retrait .quel{font-family:var(--serif);font-size:18px;color:var(--vert)}
.lieu-contact{margin-top:20px;font-family:var(--serif);font-size:18px;line-height:1.7}
.lieu-contact a{color:var(--kaki);text-decoration:none;border-bottom:1px solid var(--ligne);
  transition:color .3s,border-color .3s}
.lieu-contact a:hover{color:var(--vert);border-color:var(--vert)}
/* L'espacement est porté par .lieu-actions, plus par le bouton lui-même. */

.lieu-intro{font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.5vw,21px);
  line-height:1.6;color:var(--kaki);max-width:30em}
.trajets{list-style:none;margin-top:clamp(26px,3vw,38px);border-top:1px solid var(--ligne)}
.trajets li{display:flex;align-items:baseline;gap:16px;padding:15px 0;
  border-bottom:1px solid var(--ligne)}
.trajets .d{font-family:var(--serif);font-size:clamp(19px,1.7vw,23px);color:var(--vert)}
/* la ligne pointillée reprend le motif d'itinéraire du site */
.trajets li::after{content:'';flex:1;order:1;height:1px;
  background-image:radial-gradient(circle,var(--kaki) 1px,transparent 1px);
  background-size:7px 1px;background-repeat:repeat-x;opacity:.5;align-self:center}
.trajets .t{order:2;font-family:var(--sans);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--kaki);white-space:nowrap}
/* Les boutons portent une marge haute par défaut : dans ce groupe,
   c'est l'écart de la grille qui doit gouverner, pas la leur. */
.lieu-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(24px,3vw,34px)}
@media(max-width:560px){.lieu-actions{flex-direction:column;align-items:stretch}
  .lieu-actions .btn{text-align:center}}
.lieu-pro{margin-top:26px;padding-top:20px;border-top:1px solid var(--ligne);
  font-family:var(--serif);font-size:17px;line-height:1.65;color:var(--kaki);max-width:34em}
.lieu-pro a{color:var(--vert);text-decoration:none;border-bottom:1px solid var(--ligne)}
.lieu-pro a:hover{border-color:var(--vert)}

/* ---------- le départ en cours, colonne de titre ---------- */
.depart-quand{margin-top:clamp(26px,3vw,36px);padding-top:clamp(20px,2.2vw,26px);
  border-top:1px solid var(--ligne);font-family:var(--sans);font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--kaki)}
.depart-duo{list-style:none;margin-top:16px}
.depart-duo li{display:flex;align-items:center;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--ligne)}
.depart-duo img{width:56px;height:56px;object-fit:contain;flex:0 0 auto}
.depart-duo .d{font-family:var(--serif);font-size:clamp(19px,1.7vw,23px);color:var(--vert);flex:1}
.depart-duo .t{font-family:var(--sans);font-size:12px;letter-spacing:.14em;color:var(--kaki);
  white-space:nowrap}
.depart-note{margin-top:16px;font-family:var(--sans);font-size:11.5px;line-height:1.6;color:var(--kaki)}