/* ============================================================
   CARNET D'ESCALE
   Chargé par carnet-*.html.
   ============================================================ */

/* ---------- Hero du Carnet ---------- */
.hero{padding-top:clamp(48px,6vw,84px);padding-bottom:clamp(56px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.hero-num{display:flex;align-items:baseline;gap:16px;margin-bottom:26px}
.hero-num .chiffre{font-size:clamp(58px,6vw,86px);line-height:.86;color:var(--or)}
.hero-num .lieu{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.30em;text-transform:uppercase;color:var(--kaki)}
.hero h1{margin-bottom:14px}
.titre-edito{font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.5vw,33px);line-height:1.28;color:var(--kaki);max-width:22em}
.hero .lede{margin-top:26px;max-width:30em}
/* Ouverture du Carnet : la gravure porte le lieu, l'assiette se pose dessus.
   Même dispositif que .intuition-visual, à une autre échelle. */
.hero-visuel{position:relative}
.hero-visuel .fond{position:absolute;left:-16%;top:-6%;
  width:106%;max-width:none;opacity:.42;z-index:0;pointer-events:none}
.hero-visuel .photo{position:relative;z-index:1;width:min(100%,520px);margin:0 auto;display:block}
@media(max-width:900px){.hero-visuel .fond{left:-10%;top:-4%;width:104%;opacity:.32}}
.legende{margin-top:12px;font-family:var(--sans);font-size:11.5px;letter-spacing:.04em;color:var(--kaki)}

/* ---------- Bandeau disponibilité ---------- */
.dispo{background:var(--vert);color:var(--ivoire);padding:0}
.dispo .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-top:30px;padding-bottom:30px;flex-wrap:wrap}
.dispo p{font-size:clamp(21px,2vw,27px);line-height:1.34}
.dispo .quand{display:block;font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--or);margin-bottom:9px}

/* ---------- Registre ---------- */
.registre{display:inline-flex;align-items:center;gap:11px;font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--kaki);border:1px solid var(--ligne);padding:8px 14px;margin-bottom:30px}
.registre::before{content:'';width:5px;height:5px;background:var(--sepia);flex:0 0 auto}

/* ---------- Deux colonnes éditoriales ---------- */
.duo{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);gap:clamp(28px,5vw,76px);align-items:start}
.duo-inv{grid-template-columns:minmax(0,.64fr) minmax(0,.36fr)}
/* socle.css passe déjà .duo en une colonne sous 1000px, mais carnet.css est chargé
   après : sans cette reprise, la règle du socle ne s'appliquait jamais. */
@media(max-width:1000px){
  .duo,.duo-inv,.hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-visuel{order:-1}
}
.col-titre h2{margin-top:18px}
/* le visuel du bloc « À l'atelier » tient dans la colonne du titre :
   sans lui, cette colonne se vidait sous le h2. */
.atelier-visuel{width:min(100%,340px);margin-top:clamp(30px,4vw,52px)}
@media(max-width:900px){.atelier-visuel{width:min(100%,280px);margin-top:26px}}

/* ---------- Marqueurs gustatifs ---------- */
.marqueurs{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:26px;list-style:none}
.marqueurs li{font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--kaki);padding:9px 15px;border:1px solid var(--ligne)}
.specialite{margin-top:30px;border-top:1px solid var(--ligne);padding-top:26px}
.specialite .nom{font-size:clamp(28px,3vw,38px);line-height:1.1}
.specialite .quoi{margin-top:10px;color:rgba(33,48,31,.8)}

/* ---------- Composition du plat ---------- */
.compo{list-style:none;margin-top:8px;border-top:1px solid var(--ligne)}
.compo li{display:grid;grid-template-columns:minmax(96px,.24fr) 1fr;gap:clamp(16px,3vw,44px);padding:19px 0;border-bottom:1px solid var(--ligne-f)}
.compo .quoi{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--kaki);padding-top:7px}
.compo .quel{font-size:20.5px;line-height:1.5}
.allerg{margin-top:40px;border:1px solid var(--ligne);padding:clamp(22px,3vw,32px)}
.allerg h3{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--kaki)}
.allerg ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:18px}
.allerg li{font-family:var(--sans);font-size:12.5px;letter-spacing:.04em;padding:7px 13px;background:var(--ivoire-2);color:var(--vert)}
.sur-kraft .allerg li{background:rgba(239,232,219,.66)}
.mentions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;list-style:none}
.mentions li{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--sepia);border-bottom:1px dotted var(--sepia);padding-bottom:3px}

/* ---------- Galerie ---------- */
/* Flex plutôt que grid : une dernière rangée incomplète se centre au lieu
   de laisser un trou. Le nombre de colonnes est un jeton, --col. */
.galerie{--col:3;--ecart:clamp(20px,3vw,44px);display:flex;flex-wrap:wrap;
  justify-content:center;gap:var(--ecart);margin-top:52px}
.galerie figure{flex:0 1 calc((100% - (var(--col) - 1) * var(--ecart)) / var(--col))}
/* Polaroïd : carte claire, marge basse généreuse, filet fin.
   Ni coin arrondi ni ombre portée – la charte l'interdit. */
.galerie figure{background:#F7F3EA;border:1px solid var(--ligne);padding:13px 13px 0;transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.galerie figure:nth-child(odd){transform:rotate(-1.1deg)}
.galerie figure:nth-child(even){transform:rotate(.8deg)}
.galerie figure:hover{transform:rotate(0)}
.galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--ivoire)}
.galerie figcaption{padding:20px 4px 36px;font-family:var(--sans);font-size:11.5px;line-height:1.5;letter-spacing:.08em;color:var(--kaki);text-align:center}
@media(prefers-reduced-motion:reduce){.galerie figure{transform:none}}

/* ---------- Bloc facultatif ---------- */
.facultatif{border-left:1px solid var(--sepia);padding-left:clamp(20px,3vw,34px)}

/* ---------- Collection ---------- */
.collection{list-style:none;margin-top:44px;border-top:1px solid var(--ligne)}
.collection li{border-bottom:1px solid var(--ligne-f)}
.collection a{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3vw,40px);align-items:center;padding:22px 4px;transition:padding-left .35s,background .35s}
.collection a:hover{padding-left:18px;background:rgba(33,48,31,.03)}
.collection .n{font-size:23px;color:var(--or);min-width:34px}
.collection .d{font-size:clamp(24px,2.4vw,31px)}
.collection .t{font-family:var(--sans);font-size:11.5px;letter-spacing:.05em;color:var(--kaki);text-align:right}
.collection li[aria-current] .d{color:var(--sepia)}
.collection li[aria-current] .t{color:var(--sepia)}

/* ---------- Responsive du Carnet ---------- */
@media(max-width:1000px){ .galerie{--col:2} }
@media(max-width:760px){
  .galerie{--col:1}
  .compo li{grid-template-columns:1fr;gap:7px}
  .compo .quoi{padding-top:0}
  .collection a{grid-template-columns:auto 1fr;row-gap:5px}
  .collection .t{grid-column:2;text-align:left}
  .dispo .wrap{flex-direction:column;align-items:flex-start}
}


/* ---------- le carnet des voyageurs ----------
   Pas d'étoiles ni de notes : une mention portée en marge,
   comme dans un carnet de voyage. */
.avis-liste{margin-top:clamp(28px,3.4vw,42px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(20px,2.6vw,34px)}
.avis{border-top:1px solid var(--ligne);padding-top:22px}
.avis blockquote{font-family:var(--serif);font-size:clamp(18px,1.7vw,21px);line-height:1.62;
  color:var(--vert)}
.avis figcaption{margin-top:16px;display:flex;flex-direction:column;gap:5px}
.avis .qui{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--vert)}
.avis .ou{color:var(--kaki);font-weight:400}
.avis .quand{font-family:var(--sans);font-size:11px;line-height:1.5;color:var(--kaki)}
.avis-reponse{margin-top:18px;padding:15px 17px;background:var(--ivoire);border-left:2px solid var(--or)}
.avis-reponse p{font-family:var(--serif);font-size:16px;line-height:1.6;color:var(--kaki);margin-top:8px}
.avis-pied{margin-top:clamp(26px,3vw,38px);max-width:44em}