/* Fiche d'une formule (excursion.html?id=journee|privatisation) : une seule forme pour les deux.
   Téléphone : mosaïque bord à bord, titre, demande (prix + bouton dans le premier écran), puis le contenu.
   Bureau (1 080 px et plus) : titre, mosaïque et contenu à gauche ; demande collante à droite.
   Valeurs : tokens.css (= DESIGN.md). */

/* Formule posée par le script de <head> avant le premier rendu ; excursion.js retire ensuite l'autre formule */
html[data-formule="journee"] [data-pour="privatisation"],
html[data-formule="privatisation"] [data-pour="journee"] { display: none; }

/* Grille de la fiche */
.fiche__grille {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "galerie" "tete" "demande" "faits" "contenu";
}
.fiche__tete { grid-area: tete; display: grid; gap: var(--s2); padding-top: var(--s5); }
.fiche__galerie { grid-area: galerie; }
.demande { grid-area: demande; }
.fiche__faits { grid-area: faits; }
.fiche__contenu { grid-area: contenu; min-width: 0; }
.fiche h1 { font-size: var(--t-h2); line-height: 1.1; font-variation-settings: "opsz" 60; }
.fiche__accroche { font-size: var(--t-texte); color: var(--ardoise); max-width: 32em; }

@media (min-width: 768px) {
  .fiche__grille {
    grid-template-columns: minmax(0, 1fr) 340px; column-gap: var(--s6); padding-top: var(--s5);
    grid-template-areas: "galerie galerie" "tete demande" "faits demande" "contenu contenu";
  }
  .fiche__accroche { font-size: var(--t-chapeau); line-height: 1.45; }
}
@media (min-width: 1080px) {
  .fiche__grille {
    grid-template-columns: minmax(0, 1fr) 360px; column-gap: var(--s7); padding-top: var(--s6);
    grid-template-areas: "tete demande" "galerie demande" "faits demande" "contenu demande";
    grid-template-rows: auto auto auto 1fr;
  }
  .fiche__tete { padding-top: 0; margin-bottom: var(--s5); }
}

/* Mosaïque 1 + 2 : une grande case, deux petites, même structure pour les deux fiches.
   Largeur bornée par la grille : la grande case ne dépasse jamais 560 px (photo principale de la journée : 800 px). */
.mosaique {
  position: relative; display: grid; gap: 4px;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  height: 46vw; margin-inline: calc(-1 * var(--gouttiere)); background: var(--blanc);
}
@media (min-width: 768px) { .mosaique { margin-inline: 0; height: calc((100vw - 80px) * 0.5); } }
@media (min-width: 1080px) { .mosaique { height: clamp(340px, calc(100svh - var(--entete) - 230px), 540px); } }
.mosaique__case {
  position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0;
  background: var(--voile); overflow: hidden; cursor: zoom-in;
}
.mosaique__case:first-child { grid-row: 1 / 3; }
.mosaique__case img { width: 100%; height: 100%; object-fit: cover; transition: filter .16s var(--courbe); }
.mosaique__case:hover img { filter: brightness(0.92); }
.mosaique__case:focus-visible { outline-offset: -4px; outline-color: var(--blanc); box-shadow: inset 0 0 0 6px var(--magenta-fonce); }
.mosaique__infos {
  position: absolute; left: var(--s3); right: var(--s3); bottom: var(--s3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2); pointer-events: none;
}
.mosaique__infos > * { pointer-events: auto; }
.mosaique__compteur {
  padding: 4px 10px; border-radius: var(--r-bouton); background: rgba(15, 51, 64, 0.72); color: var(--blanc);
  font: 500 var(--t-petit)/1.3 var(--sans);
}
.mosaique__tout { min-height: 40px; padding: 8px 14px; font-size: var(--t-petit); }
.mosaique__tout:focus-visible { outline: 2px solid var(--blanc); outline-offset: 2px; box-shadow: 0 0 0 5px var(--chenal); }

/* Demande : prix, date, nombre, total, bouton. Bande grise sur téléphone, panneau collant sur bureau. */
.demande {
  display: grid; gap: var(--s3); align-content: start;
  margin: var(--s5) calc(-1 * var(--gouttiere)) 0; padding: var(--s4) var(--gouttiere) var(--s5);
  background: var(--voile);
}
.demande__prix { font-size: var(--t-petit); color: var(--ardoise); max-width: none; }
.demande__prix strong { font: 400 var(--t-prix)/1.1 var(--serif); color: var(--chenal); }
.champ { display: grid; gap: var(--s1); }
.champ__aide { min-height: 20px; font-size: var(--t-mention); line-height: 1.5; color: var(--ardoise); max-width: none; }
.champ__aide .badge { margin-left: 4px; }
.champ__aide--erreur { color: var(--erreur); font-weight: 500; }
.demande__avis { margin-top: -4px; font-size: var(--t-petit); max-width: none; }
.demande__avis a { color: var(--chenal); text-decoration-color: var(--magenta); }
.visuellement-cache { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.champ label, .compteur label { font: 500 var(--t-petit)/1.4 var(--sans); }
.champ input {
  width: 100%; min-height: 48px; padding: 0 var(--s3); border: 1px solid var(--ardoise); border-radius: var(--r-bouton);
  background: var(--blanc); color: var(--chenal); font: 400 var(--t-ui)/1.3 var(--sans); font-variant-numeric: tabular-nums;
}
.champ input:hover { border-color: var(--chenal); }
.champ input[aria-invalid="true"] { border-color: var(--erreur); box-shadow: inset 0 0 0 1px var(--erreur); }
.champ input:focus-visible { border-color: var(--chenal); }
.compteurs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); }
.compteurs--un { grid-template-columns: minmax(0, 1fr); }
.compteur { display: grid; gap: var(--s1); align-content: start; }
.compteurs--un .compteur { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.compteur__aide { display: block; font-weight: 400; color: var(--ardoise); }
.compteur__ctrl {
  display: inline-grid; grid-template-columns: 44px minmax(36px, 1fr) 44px; align-items: center; justify-self: start;
  border: 1px solid var(--ardoise); border-radius: var(--r-bouton); background: var(--blanc);
}
.compteur__ctrl button {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none;
  color: var(--chenal); cursor: pointer; border-radius: var(--r-bouton); transition: background-color .16s var(--courbe);
}
.compteur__ctrl button:hover { background: var(--voile); }
.compteur__ctrl button[aria-disabled="true"] { color: var(--filet); cursor: default; background: none; }
.compteur__ctrl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.compteur__ctrl input {
  width: 100%; min-width: 0; height: 44px; padding: 0; border: 0; background: none; text-align: center;
  font: 500 var(--t-ui)/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--chenal); -moz-appearance: textfield;
}
.compteur__ctrl input::-webkit-inner-spin-button, .compteur__ctrl input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.compteur__ctrl input:focus-visible { outline-offset: -2px; }
.demande__total { display: grid; gap: 2px; padding-top: var(--s3); border-top: 1px solid var(--filet); font-size: var(--t-petit); color: var(--ardoise); }
.demande__total p { max-width: none; }
.demande__somme { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); color: var(--chenal); font: 500 var(--t-ui)/1.3 var(--sans); }
.demande__somme output { font: 400 var(--t-prix)/1.1 var(--serif); }
.demande__envoyer { width: 100%; }
.demande__conditions { list-style: none; margin: var(--s1) 0 0; padding: 0; display: grid; gap: var(--s2); font-size: var(--t-mention); line-height: 1.4; color: var(--ardoise); }
.demande__conditions strong { font-weight: 600; color: var(--chenal); }
.demande__conditions a { font-weight: 500; }
.demande__question { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s1) var(--s2); font-size: var(--t-petit); color: var(--ardoise); }
.demande__question > span:first-child { grid-column: 1 / -1; }
.demande__contact { min-height: 40px; padding: 6px 10px; font-size: var(--t-petit); font-weight: 500; }
.demande__contact .badge { margin-left: 2px; vertical-align: 0; }

@media (max-width: 767px) {
  .mosaique__infos { justify-content: flex-start; left: calc(var(--gouttiere) - 8px); }
  .mosaique__tout { min-height: 44px; }
  /* Premier écran du téléphone : titre, prix et bouton au-dessus du pli dès 360 × 800 */
  .fiche__tete { padding-top: var(--s4); }
  .demande { margin-top: var(--s4); gap: var(--s2); }
  .champ input { min-height: 44px; }
  .demande__question { font-size: var(--t-mention); }
}


@media (min-width: 768px) {
  .demande { margin: var(--s5) 0 0; padding: var(--s5); }
}
@media (min-width: 1080px) {
  .demande {
    margin: 0; align-self: start;
    background: var(--blanc); border: 1px solid var(--filet); box-shadow: var(--ombre);
  }
}
/* Collant seulement si le panneau tient dans la hauteur de l'écran */
@media (min-width: 1080px) {
  .demande { position: sticky; top: calc(var(--entete) + var(--s5)); }
  .demande.demande--libre { position: static; }
}

/* Faits clés sous la mosaïque */
.faits { margin: 0; display: grid; gap: var(--s4); }
.faits div { border-top: 1px solid var(--filet); padding-top: var(--s3); }
.faits dt { font: 500 20px/1.25 var(--serif); }
.faits dd { margin: var(--s1) 0 0; color: var(--ardoise); font-size: var(--t-petit); line-height: 1.45; }
.fiche__faits { margin-top: var(--s7); }
@media (min-width: 560px) and (max-width: 767px), (min-width: 1080px) {
  .fiche__faits { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); }
}
@media (min-width: 768px) { .fiche__faits { margin-top: var(--s6); align-self: start; } }

/* Contenu : sections espacées comme partout (64 / 112 px) */
.bloc-fiche { padding-top: var(--section); display: grid; gap: var(--s4); align-content: start; }
.bloc-fiche:last-child { padding-bottom: var(--section); }
.bloc-fiche > .carte, .bloc-fiche > .compris, .bloc-fiche > .ilets, .bloc-fiche > .liste, .bloc-fiche > .occasions, .bloc-fiche > .faits { margin-top: var(--s4); }
.bloc-fiche > .deroule { margin-top: var(--s5); }
@media (min-width: 1080px) { .bloc-fiche { padding-top: var(--s9); } .bloc-fiche:last-child { padding-bottom: var(--s9); } }

.liste { margin: 0; padding-left: 1.1em; display: grid; gap: var(--s2); max-width: 36em; }
.liste li::marker { color: var(--magenta); }
@media (min-width: 768px) { .liste--deux { grid-template-columns: 1fr 1fr; column-gap: var(--s6); max-width: none; } }

.compris { display: grid; gap: var(--s7); }
.compris__col { display: grid; gap: var(--s3); align-content: start; }
.compris h3 { font-size: 22px; }
@media (min-width: 768px) { .compris { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); } }
.menu-du-jour { list-style: none; margin: var(--s1) 0; padding: 0; display: grid; }
.menu-du-jour li { font: 400 20px/1.35 var(--serif); padding-block: var(--s3); border-top: 1px solid var(--filet); }
.menu-du-jour li:last-child { border-bottom: 1px solid var(--filet); }

/* Les trois îlets : même recadrage (3:2), photo puis texte ; côte à côte dès 768 px */
.ilets { display: grid; gap: var(--s7); }
.ilet { display: grid; gap: var(--s4); align-items: start; }
.ilet__photo { aspect-ratio: 3 / 2; overflow: hidden; background: var(--voile); }
.ilet__photo img { width: 100%; height: 100%; object-fit: cover; }
.ilet__texte { display: grid; gap: var(--s2); }
.ilet h3 { font-weight: 400; font-size: var(--t-h3); }
@media (min-width: 768px) {
  .ilets { gap: var(--s6); }
  .ilet { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s6); }
}

.occasions { list-style: none; margin: 0; padding: 0; display: grid; }
.occasions li { font: 400 20px/1.35 var(--serif); padding-block: var(--s3); border-top: 1px solid var(--filet); }
.occasions li:last-child { border-bottom: 1px solid var(--filet); }

.faits--avant dd { font-size: var(--t-texte); line-height: 1.55; max-width: 34em; }
@media (min-width: 768px) { .faits--avant { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s6); } }
.fiche__liens { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin-top: var(--s5); max-width: none; }
.fiche__liens a { font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }

/* Visionneuse plein écran : chaque photo entière, jamais sous la barre ni sous les flèches, jamais agrandie
   (taille calculée par excursion.js). Téléphone : flèches dans la barre du bas. Dès 768 px : flèches sur les côtés. */
html:has(dialog[open]) { overflow: hidden; }
dialog.galerie {
  margin: 0; width: 100%; max-width: none; height: 100%; max-height: none; padding: 0; border: 0;
  border-radius: var(--r-feuille) var(--r-feuille) 0 0; background: var(--chenal); color: var(--blanc); overflow: hidden;
}
dialog.galerie[open] {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; grid-template-rows: 56px minmax(0, 1fr) auto;
  grid-template-areas: "haut haut haut" "scene scene scene" "prec barre suiv";
  animation: galerie-ouvre .24s var(--courbe);
}
dialog.galerie::backdrop { background: rgba(15, 51, 64, 0.6); }
@keyframes galerie-ouvre { from { opacity: 0; transform: translateY(12px); } }
.galerie :focus-visible { outline-color: var(--blanc); }
.galerie__haut { grid-area: haut; display: flex; justify-content: flex-end; align-items: center; padding-inline: var(--s2); }
.galerie__fermer {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--s2);
  background: none; border: 0; border-radius: var(--r-bouton); color: var(--blanc); font: 500 var(--t-ui)/1 var(--sans); cursor: pointer;
}
.galerie__scene { grid-area: scene; margin: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; touch-action: pan-y; }
.galerie__scene img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.galerie__fleche {
  align-self: center; justify-self: center; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  background: none; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: var(--r-bouton); color: var(--blanc); cursor: pointer;
  transition: background-color .16s var(--courbe);
}
.galerie__fleche:hover { background: rgba(255, 255, 255, 0.12); }
.galerie__fleche svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.galerie__fleche--prec { grid-area: prec; }
.galerie__fleche--suiv { grid-area: suiv; }
.galerie__barre {
  grid-area: barre; display: grid; gap: 2px; align-content: center; min-height: 64px;
  padding: var(--s2) var(--s2) calc(var(--s2) + env(safe-area-inset-bottom)); text-align: center;
}
.galerie__compteur { font: 500 var(--t-petit)/1.3 var(--sans); }
.galerie__legende { font-size: var(--t-petit); line-height: 1.4; color: #C9D6DA; }
@media (min-width: 768px) {
  dialog.galerie[open] {
    grid-template-columns: 80px minmax(0, 1fr) 80px; grid-template-rows: 64px minmax(0, 1fr) auto;
    grid-template-areas: "haut haut haut" "prec scene suiv" ". barre .";
  }
  .galerie__haut { padding-inline: var(--s5); }
  .galerie__fleche { width: 52px; height: 52px; }
  .galerie__barre { min-height: 72px; }
}