/* ==========================================================================
   Refonte « carnet de voyage » — pages intérieures (chargée après site.css et pied.css)
   ========================================================================== */
:root{
  --fond: #F3EBDC; --carte-p: #FFFDF8; --rouge: #B8462B; --rouge-fonce: #9A3820;
  --ombre-carte: 0 18px 40px -20px rgba(60,38,18,.45), 0 2px 6px rgba(60,38,18,.10);
}
body{ background:#F3EBDC; }
h1{ font-weight:300; letter-spacing:-.035em; line-height:1; }
h1 { font-size:clamp(2.3rem, 1.5rem + 3vw, 3.8rem); }
h2{ letter-spacing:-.025em; font-weight:400; }
.entete{ background:rgba(243,235,220,.86); }

/* --- bandeau de ville : une carte postale avec son cachet ----------------- */
.bandeau-ville{ border-radius:6px; padding:12px !important; background:var(--carte-p); box-shadow:var(--ombre-carte); color:var(--noir); min-height:auto; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:0; overflow:visible; }
.bandeau-ville::after{ display:none; }
.bandeau-ville__photo{ position:relative !important; inset:auto !important; z-index:0 !important; grid-row:1 / span 3; height:clamp(220px,26vw,340px) !important; border-radius:3px; }
.bandeau-ville h1, .bandeau-ville .chapo{ color:var(--noir) !important; text-shadow:none !important; padding-inline:clamp(16px,3vw,40px); }
.bandeau-ville h1{ align-self:end; margin-top:24px; }
.bandeau-ville .chapo{ color:var(--gris-texte) !important; align-self:start; margin-top:.8rem !important; }
.bandeau-ville__credit{ top:auto !important; bottom:20px; left:24px; right:auto !important; text-align:left !important; }
.bandeau-ville::before{ content:attr(data-cachet); position:absolute; z-index:3; left:-16px; top:-20px; width:92px; height:92px; border-radius:50%;
  display:grid; place-items:center; text-align:center; padding:10px; rotate:-12deg;
  border:2px solid rgba(184,70,43,.85); box-shadow:inset 0 0 0 4px #FFFDF8, inset 0 0 0 5.5px rgba(184,70,43,.85);
  background:rgba(255,253,248,.92); color:#B8462B; font:700 .62rem/1.25 var(--police); letter-spacing:.14em; text-transform:uppercase; white-space:pre-line; }

/* --- cartes d'annonce : des cartes postales ------------------------------- */
.annonce{ border:0 !important; border-radius:6px !important; background:var(--carte-p) !important; box-shadow:0 1px 0 rgba(34,25,15,.05), 0 14px 32px -24px rgba(60,38,18,.55); }
.annonce__visuel{ border-radius:3px !important; }
.annonce__titre{ font-family:var(--display); font-weight:400; font-size:1.18rem !important; letter-spacing:-.01em; line-height:1.2; }
.annonce__lieu{ font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--rouge); }
.annonce__prix{ color:var(--noir); }
/* L'ombre du survol vit sur un pseudo-élément dont on anime l'opacité :
   animer box-shadow repeignait des dizaines de cartes à chaque image. */
.annonce{ position:relative; }
.annonce::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:var(--ombre-carte); opacity:0; pointer-events:none; transition:opacity .2s ease; }
@media (hover:hover) and (pointer:fine){
  .annonce{ transition:transform .2s cubic-bezier(.23,1,.32,1), rotate .2s cubic-bezier(.23,1,.32,1); }
  .annonce:hover{ rotate:-.6deg; transform:translateY(-3px); box-shadow:0 1px 0 rgba(34,25,15,.05), 0 14px 32px -24px rgba(60,38,18,.55); }
  .annonce:hover::after{ opacity:1; }
  .grille-annonces .annonce:nth-child(even):hover{ rotate:.6deg; }
}
.barre-recherche{ border:0; box-shadow:var(--ombre-carte); border-radius:10px; background:var(--carte-p); }

/* --- fiche : la galerie en tirages, la réservation en billet -------------- */
.galerie{ gap:10px !important; }
.galerie__element{ border-radius:3px !important; box-shadow:0 0 0 6px var(--carte-p), 0 16px 30px -22px rgba(60,38,18,.6); }
.titre-et-partage h1{ font-size:clamp(2.2rem,1.5rem + 2.6vw,3.6rem); }
.reservation__carte{ border:0 !important; border-radius:10px !important; background:var(--carte-p) !important; box-shadow:var(--ombre-carte) !important; position:relative; overflow:visible !important;
}
.reservation__carte::before{ content:"BILLET · ACCROMAROC"; position:absolute; top:-11px; left:20px; padding:3px 10px; background:#123E30; color:#F3EBDC; font:700 .6rem var(--police); letter-spacing:.18em; border-radius:3px; }
.reservation__prix{ position:relative; padding-bottom:22px; margin-bottom:18px !important; border-bottom:2px dashed rgba(34,25,15,.18); }
/* Les deux encoches du billet, posées sur la ligne de découpe. */
.reservation__prix::before, .reservation__prix::after{ content:""; position:absolute; bottom:-13px; width:24px; height:24px; border-radius:50%; background:#F3EBDC; box-shadow:inset 0 2px 4px rgba(60,38,18,.12); }
.reservation__prix::before{ left:calc(-1 * var(--p5) - 12px); }
.reservation__prix::after{ right:calc(-1 * var(--p5) - 12px); }
.reservation__montant{ font-family:var(--display); font-weight:400; font-size:38px !important; letter-spacing:-.02em; }

/* --- titres de section avec le trait à la main ---------------------------- */
.fiche__section > h2::after, .croisement h2::after, .ville__maillage h2::after{
  content:""; display:block; width:96px; height:10px; margin-top:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2 8 C 30 2, 60 2, 80 6 S 110 10, 118 4' fill='none' stroke='%23B8462B' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%; }

@media (max-width:760px){
  .bandeau-ville{ grid-template-columns:minmax(0,1fr); }
  .bandeau-ville__photo{ grid-row:auto; height:220px !important; }
  .bandeau-ville h1{ margin-top:16px; padding-inline:6px; }
  .bandeau-ville .chapo{ padding-inline:6px; margin-bottom:6px; }
  .bandeau-ville::before{ left:-8px; top:-14px; width:76px; height:76px; font-size:.54rem; }
  .bandeau-ville__credit{ top:auto !important; bottom:auto; left:auto; right:22px !important; top:192px !important; }
}