/* The Adress Kosher Club — maquette v3, socle commun aux trois variantes (a.css, b.css, c.css).
   Reprend la version 2 « noir et blanc » : noir pur, blanc pur, aucune couleur d'interface (toute la couleur
   vient des photos, des vidéos et des drapeaux), boutons rectangulaires inversés, filets fins, petites
   capitales espacées, typographie du logo, arcs de riad pour les vidéos verticales.
   Les couleurs passent par des variables (--fond, --encre…) : .clair et .sombre inversent une zone,
   la variante B inverse toute la page. */

/* Polices hébergées avec le site (SIL OFL). « Adress Titre » = Italiana avec les chiffres de Tenor Sans
   (Italiana n'a que des chiffres elzéviriens, qui font lire « 2o27 » en capitales). */
@font-face {
  font-family: 'Adress Titre';
  src: url('../media/fonts/tenor-sans-latin.woff2') format('woff2');
  unicode-range: U+0030-0039;
  font-display: swap;
}
@font-face {
  font-family: 'Adress Titre';
  src: url('../media/fonts/italiana-latin.woff2') format('woff2');
  unicode-range: U+0000-002F, U+003A-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap;
}
@font-face { font-family: 'Tenor Sans'; src: url('../media/fonts/tenor-sans-latin.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Whisper'; src: url('../media/fonts/whisper-latin.woff2') format('woff2'); font-display: swap; }

:root, .sombre {
  --fond: #000000;
  --encre: #ffffff;
  --encre-2: #d6d6d6;          /* méta discrètes */
  --filet: rgb(255 255 255 / .26);
  --filet-fort: rgb(255 255 255 / .62);
  --voile: 0 0 0;              /* couleur des voiles posés sur les images */
}
.clair {
  --fond: #ffffff;
  --encre: #000000;
  --encre-2: #4d4d4d;
  --filet: rgb(0 0 0 / .16);
  --filet-fort: rgb(0 0 0 / .55);
}
.clair, .sombre { background: var(--fond); color: var(--encre); }

:root {
  --f-titre: 'Adress Titre', Optima, Candara, serif;
  --f-libelle: 'Tenor Sans', Optima, Candara, system-ui, sans-serif;
  --f-texte: 'Tenor Sans', Optima, Candara, system-ui, sans-serif;
  --f-main: 'Whisper', 'Segoe Script', cursive;

  --marge: clamp(16px, 4vw, 48px);
  --large: 1180px;
  --section: clamp(56px, 9vw, 112px);
  --barre: 64px;

  /* arc outrepassé : la courbe déborde des montants, comme aux portes de riad */
  --arc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 160' preserveAspectRatio='none'%3E%3Cpath d='M5 160V60C5 60 0 53 0 45A45 45 0 0 1 90 45C90 53 85 60 85 60V160Z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
img { height: auto; }   /* l'attribut height ne doit pas figer la hauteur : aspect-ratio décide */
a { color: inherit; }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.evitement { position: absolute; left: 8px; top: -60px; z-index: 60; padding: 10px 16px; background: var(--encre); color: var(--fond); }
.evitement:focus { top: 8px; }

h1, h2, h3 { font-family: var(--f-titre); font-weight: 400; line-height: 1.15; margin: 0; font-synthesis: none; text-transform: uppercase; letter-spacing: .1em; overflow-wrap: break-word; }
h1 { font-size: clamp(1.9rem, 6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.35rem; }
h2 + .chapeau, h1 + .chapeau, h2 + p { margin-top: .8em; }
p { margin: 0 0 1em; }
.main-ecrite { font-family: var(--f-main); font-weight: 400; line-height: 1; text-transform: none; letter-spacing: 0; }

.conteneur { width: min(100% - 2 * var(--marge), var(--large)); margin-inline: auto; }
.section { padding-block: var(--section); }
.chapeau { max-width: 62ch; }
.note { color: var(--encre-2); font-size: .9rem; }

/* petites capitales espacées : libellés, boutons, filtres (12 px au moins) */
.libelle, .bouton, .filtre, .tuile-cat, .portes a, .faits dt, .champ label, .menu li a small, .langues .code,
.moments .libelle, .themes li, .dates time, .ariane, .lien-fleche {
  font-family: var(--f-libelle);
  text-transform: uppercase;
  letter-spacing: .2em;
}
.surtitre { margin: 0 0 10px; font-size: .75rem; }
.petit-titre { font-size: 1.15rem; margin: 28px 0 4px; }

/* ---------- Arcs ---------- */
.arche {
  position: relative; aspect-ratio: 9 / 16;
  -webkit-mask: var(--arc) center / 100% 100% no-repeat; mask: var(--arc) center / 100% 100% no-repeat;
}
.arche > .arche-vue { position: relative; width: 100%; height: 100%; overflow: hidden; background: #111; }
.arche video, .arche img { width: 100%; height: 100%; object-fit: cover; }

/* cadres pour les vidéos horizontales et les photos */
.cadre-large { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.cadre-haut { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #111; }
.cadre-large video, .cadre-haut video, .cadre-large img, .cadre-haut img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Barre du haut ---------- */
.barre {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: grid; grid-template-columns: minmax(0, 1fr) auto  minmax(0, 1fr); align-items: center; gap: 8px;
  min-height: var(--barre); padding: 10px var(--marge); padding-top: max(10px, env(safe-area-inset-top));
  color: var(--encre); transition: background .3s ease, border-color .3s ease; border-bottom: 1px solid transparent;
}
.barre.est-collee { background: var(--fond); border-bottom-color: var(--filet); }
.barre .logo { grid-column: 2; display: flex; align-items: center; min-height: 44px; }
.barre .logo img { width: clamp(112px, 15vw, 168px); height: auto; }
.barre-actions { grid-column: 3; justify-self: end; display: flex; gap: 2px; }
.bouton-rond {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
}
.bouton-rond:hover { opacity: .7; }
.bouton-rond svg { width: 22px; height: 22px; }

/* langues : drapeau + code ; la langue affichée est soulignée */
.langues { grid-column: 1; justify-self: start; display: flex; gap: 2px; margin-left: -8px; }
.langues a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; min-width: 44px; padding: 0 8px;
  text-decoration: none; opacity: .62; transition: opacity .2s ease;
}
.langues a:hover, .langues a[aria-current] { opacity: 1; }
.langues a[aria-current] .code { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.langues .code { font-size: .72rem; letter-spacing: .16em; }
.drapeau { width: 21px; height: 14px; flex: none; box-shadow: 0 0 0 1px var(--filet); }

/* menu plein écran ; il défile si l'écran est trop bas (téléphone couché) */
.menu {
  position: fixed; inset: 0; z-index: 40; display: none;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--fond); color: var(--encre); padding: 84px var(--marge) 32px;
}
.menu.est-ouvert { display: block; }
.menu ul { list-style: none; margin: 0 auto; padding: 0; max-width: 560px; }
.menu li a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0;
  font-family: var(--f-titre); font-size: 1.4rem; text-transform: uppercase; letter-spacing: .1em; text-decoration: none;
  border-bottom: 1px solid var(--filet);
}
.menu li a small { font-size: .72rem; color: var(--encre-2); white-space: nowrap; }
.menu .fermer { position: fixed; top: max(10px, env(safe-area-inset-top)); right: var(--marge); background: var(--fond); }
.langues-menu { justify-content: center; margin: 24px auto 0; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 30px;
  border-radius: 0; border: 1px solid var(--encre); background: var(--encre); color: var(--fond);
  font-size: .74rem; text-decoration: none; cursor: pointer; text-align: center; line-height: 1.3;
  transition: background .2s ease, color .2s ease;
}
.bouton:hover { background: transparent; color: var(--encre); }
.bouton svg { width: 18px; height: 18px; flex: none; }
.bouton.creux { background: transparent; color: var(--encre); border-color: var(--filet-fort); }
.bouton.creux:hover { background: var(--encre); color: var(--fond); border-color: var(--encre); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pause-videos { width: 52px; height: 52px; border-radius: 0; border: 1px solid var(--filet-fort); }
.pause-videos svg { width: 18px; height: 18px; }
.lien-fleche { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: .72rem; text-decoration: none; }
.lien-fleche svg { width: 20px; height: 20px; transition: transform .2s ease; }
.lien-fleche:hover svg { transform: translateX(4px); }

/* ---------- Accueil (commun) ---------- */
.accueil { position: relative; }
.accueil-fond { position: absolute; inset: 0; overflow: hidden; }
.accueil-fond img { width: 100%; height: 100%; object-fit: cover; }
.accueil .main-ecrite { position: relative; font-size: clamp(2.5rem, 11vw, 5rem); margin: 0 0 .22em; padding-bottom: .06em; }
.accueil-infos { margin: 0 0 24px; font-size: .95rem; max-width: 52ch; }
@media (min-width: 480px) { .accueil-infos span { white-space: nowrap; } }
/* animation douce des photos d'accueil, arrêtée par le bouton pause et par « réduire les animations » */
.est-arrete .zoom, .est-arrete .vue { animation-play-state: paused !important; }

/* rangée d'icônes au trait */
.portes ul { list-style: none; margin: 0; padding: 0 var(--marge); display: flex; overflow-x: auto; scrollbar-width: none; gap: 4px; }
.portes ul::-webkit-scrollbar { display: none; }
.portes a {
  display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 92px;
  padding: 20px 8px 18px; text-decoration: none; font-size: .72rem; white-space: nowrap;
}
.portes a:hover { opacity: .7; }
.portes svg { width: 34px; height: 34px; }

/* colonnes rétrécissables : une photo ne doit jamais élargir sa colonne au-delà de l'écran */
.club, .recit, .hotel, .table, .tarifs-grille, .entete-sejour-grille, .bande-cta-grille, .bande-grille,
.chapitre-texte, .accueil-grille, .chambres { grid-template-columns: minmax(0, 1fr); }

/* ---------- Le club, faits ---------- */
.club { display: grid; gap: 28px; }
.faits { margin: 24px 0 0; display: grid; }
.faits div { display: flex; flex-wrap: wrap; column-gap: 14px; padding: 14px 0; border-top: 1px solid var(--filet); }
.faits dt { flex: 0 0 9rem; font-size: .74rem; padding-top: .35em; }
.faits dd { flex: 1 1 12rem; min-width: 0; margin: 0; }
.club .faits { margin-top: 0; }

/* ---------- Temps forts (commun) ---------- */
.moments { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--filet); }
.moments li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 11px 0; border-bottom: 1px solid var(--filet); }
.moments .libelle { font-size: .72rem; padding-top: .3em; }
.themes { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.themes li { padding: 8px 14px; border: 1px solid var(--filet-fort); font-size: .72rem; }
.coches { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 2px; }
.coches li { position: relative; padding: 8px 0 8px 26px; border-bottom: 1px solid var(--filet); }
.coches li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 12px; height: 6px; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(-45deg); }
.photo-large { margin-top: 24px; }
.photo-large img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }

/* récit : média + texte, côte à côte sur grand écran */
.recit { display: grid; gap: 30px; align-items: center; }
.recit .arche { width: min(100%, 230px); margin-inline: auto; }

/* ---------- Galeries de vidéos ---------- */
.bloc-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 8px 24px; }
.bloc-soirees { margin-top: clamp(32px, 5vw, 56px); }
.bloc-soirees h3 { font-size: 1.15rem; }
.tuile { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.tuile .arche, .tuile .arche-vue { display: block; }
.tuile .arche, .tuile .cadre-large { transition: opacity .2s ease; }
.tuile:hover .arche, .tuile:hover .cadre-large { opacity: .85; }
.tuile-lire {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: grid; place-items: center; width: 36px; height: 36px; color: #fff;
  filter: drop-shadow(0 1px 6px rgb(0 0 0 / .7));
}
.tuile-large .tuile-lire { left: 14px; transform: none; }
.tuile-lire svg { width: 24px; height: 24px; }
.tuile-titre { display: block; margin-top: 10px; font-size: .95rem; line-height: 1.35; }
.tuile-cat { display: block; margin-top: 3px; color: var(--encre-2); font-size: .7rem; }

.galerie { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
.galerie-large { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
.film-seul { list-style: none; margin: 0; padding: 0; }

/* rangées défilantes au doigt (téléphone) */
.defile { scrollbar-width: thin; scrollbar-color: var(--filet-fort) transparent; }
.defile:focus-visible { outline-offset: -2px; }

/* filtres */
.filtres { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 22px calc(-1 * var(--marge)) 26px; padding: 0 var(--marge); }
.filtres::-webkit-scrollbar { display: none; }
.filtre {
  flex: none; min-height: 44px; padding: 0 16px; border-radius: 0; cursor: pointer;
  border: 1px solid var(--filet-fort); background: transparent; color: var(--encre); font-size: .72rem;
}
.filtre[aria-pressed="true"] { background: var(--encre); color: var(--fond); border-color: var(--encre); }
.filtre span { opacity: .7; margin-left: 6px; }

/* lecteur : la vidéo tient toujours dans l'écran, commandes et flèches comprises */
.lecteur { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; color: #fff; }
.lecteur::backdrop { background: rgb(0 0 0 / .96); }
.lecteur-cadre { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: max(10px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)); }
.lecteur-haut { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lecteur-haut p { margin: 0; font-size: .95rem; }
.lecteur-video { min-height: 0; display: grid; place-items: center; grid-template-rows: 100%; grid-template-columns: 100%; }
.lecteur-video video { width: auto; height: 100%; max-width: 100%; max-height: 100%; aspect-ratio: 9 / 16; background: #000; }
.lecteur.est-large .lecteur-video video { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.lecteur-bas { display: flex; justify-content: center; gap: 24px; padding-top: 10px; }
.lecteur :focus-visible { outline-color: #fff; }

/* ---------- Hôtel ---------- */
.hotel { display: grid; gap: 32px; }
.hotel-photos { display: grid; grid-template-columns: minmax(0, 1fr)  minmax(0, 1fr); gap: 8px; }
.hotel-photos img { width: 100%; height: 100%; object-fit: cover; }
.hp-1, .hp-4 { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.hp-2, .hp-3 { aspect-ratio: 1; }
.equipements dt { flex-basis: 8rem; }
.hotel-film { margin-top: 24px; }

/* ---------- Chambres ---------- */
.chambres { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 36px; }
.chambre-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.chambre h3 { margin-top: 18px; }
.chambre p { margin: .5em 0 0; max-width: 46ch; }
.chambre .prix { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--filet); font-family: var(--f-libelle); text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; }

/* ---------- Table ---------- */
.table { display: grid; gap: 32px; }
.brigade dt { flex-basis: 100%; padding-top: 0; }
.brigade dd { color: var(--encre-2); }
.assiettes { display: grid; grid-template-columns: minmax(0, 3fr)  minmax(0, 2fr); gap: 8px; align-content: start; }
.assiettes img { width: 100%; height: 100%; object-fit: cover; }
.as-1 { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
.as-2 { aspect-ratio: 4 / 3; }
.as-3 { aspect-ratio: 3 / 4; }
.certificat { display: flex; gap: 14px; align-items: center; margin-top: 22px; padding: 10px; border: 1px solid var(--filet); text-decoration: none; max-width: 440px; }
.certificat:hover { border-color: var(--filet-fort); }
.certificat img { width: 72px; height: 66px; object-fit: cover; flex: none; }
.certificat small { display: block; color: var(--encre-2); }

/* ---------- Marrakech ---------- */
.sorties { list-style: none; margin: 26px calc(-1 * var(--marge)) 0; padding: 0 var(--marge) 8px; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge); }
.sorties li { flex: 0 0 min(72%, 290px); scroll-snap-align: start; }
.sorties img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 150px 150px 0 0; }
/* carte sans photo (terrain de paddle) : un dessin au trait dans le même arc */
.sortie-dessin { aspect-ratio: 4 / 5; border-radius: 150px 150px 0 0; border: 1px solid var(--filet-fort); display: grid; place-items: center; color: var(--encre); }
.sortie-dessin .dessin { width: 58%; height: auto; margin-top: 12%; }
.sorties h3 { margin-top: 14px; font-size: 1.2rem; }
.sorties p { color: var(--encre-2); font-size: .95rem; margin: .35em 0 0; }

/* ---------- Programme ---------- */
.dates { margin: 6px 0 0; padding: 0; list-style: none; border-left: 1px solid var(--filet-fort); }
.dates li { position: relative; padding: 0 0 22px 22px; }
.dates li::before { content: ""; position: absolute; left: -5px; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--fond); border: 1px solid var(--encre); }
.dates li.fort::before { background: var(--encre); }
.dates time { display: block; font-size: .78rem; letter-spacing: .18em; margin-bottom: .15em; }
.dates span { color: var(--encre-2); }

/* ---------- Tarifs ---------- */
.tarifs-grille { display: grid; gap: 36px; }
.tarifs { margin: 22px 0 0; }
.tarif { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-top: 1px solid var(--filet); }
.tarif:last-child { border-bottom: 1px solid var(--filet); }
.tarif dt { min-width: 0; }
.tarif dt small { display: block; color: var(--encre-2); font-size: .85rem; }
.tarif dd { margin: 0; font-family: var(--f-titre); font-size: clamp(1.5rem, 4vw, 2.2rem); letter-spacing: .04em; white-space: nowrap; }
.options .tarifs { margin-top: 10px; }
.options .note { margin: 16px 0 22px; }

/* ---------- Cartes des séjours ---------- */
.cartes-sejours { list-style: none; margin: 26px calc(-1 * var(--marge)) 0; padding: 0 var(--marge) 8px; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge); }
.cartes-sejours > li { flex: 0 0 min(72%, 300px); scroll-snap-align: start; }
.carte-sejour a { display: block; text-decoration: none; }
.carte-visuel { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #111; border-radius: 150px 150px 0 0; }
.carte-visuel video, .carte-visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.carte-sejour a:hover .carte-visuel video, .carte-sejour a:hover .carte-visuel img { transform: scale(1.04); }
.carte-annee { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-titre); font-size: 4.2rem; letter-spacing: .06em; color: transparent; -webkit-text-stroke: 1px var(--encre); background: var(--fond); border: 1px solid var(--filet); border-bottom: 0; border-radius: inherit; }
.carte-titre { display: block; margin-top: 14px; font-size: 1.35rem; }
.carte-infos { display: block; margin-top: 6px; color: var(--encre-2); font-size: .92rem; line-height: 1.5; }
.carte-compte { display: block; margin-top: 10px; font-size: .7rem; }
.prochain .carte-compte { margin: 14px 0 -6px; }

/* ---------- Réserver ---------- */
.reserver-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.panneau { padding: clamp(22px, 4vw, 40px); }
.panneau .chapeau, .panneau .surtitre { color: var(--encre-2); }
.formulaire { display: grid; gap: 14px; margin-top: 6px; }
.champ { display: grid; gap: 7px; min-width: 0; align-content: end; }
.champ label { font-size: .7rem; line-height: 1.4; }
.champ input, .champ select, .champ textarea {
  width: 100%; min-width: 0; min-height: 48px; padding: 0 12px; border-radius: 0; border: 0; border-bottom: 2px solid #767676;
  background: color-mix(in srgb, var(--encre) 6%, var(--fond)); color: var(--encre); font: 400 1rem var(--f-texte);
}
.champ textarea { min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; border-bottom-color: var(--encre); }
.trio-champs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.case { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; font-size: .95rem; }
.case input { flex: none; width: 20px; height: 20px; margin-top: 3px; accent-color: var(--encre); }
/* formulaire envoyé par e-mail (site en ligne) */
.duo-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.form-aide { margin: -4px 0 0; font-size: .82rem; }
.formulaire .note a { color: inherit; text-underline-offset: 4px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.form-etat { margin: 0; min-height: 1.6em; font-size: .95rem; }
.form-etat:empty { display: none; }
.form-etat.ok, .form-etat.erreur { padding: 12px 14px; border-left: 2px solid var(--encre); background: color-mix(in srgb, var(--encre) 6%, var(--fond)); }
.champ [aria-invalid="true"] { border-bottom-color: #c8102e; }
/* champ piège pour les robots : hors écran, jamais vu ni annoncé */
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* mentions légales */
.legal section { max-width: 70ch; margin-top: clamp(28px, 4vw, 44px); }
.legal h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin-bottom: .4em; }
.legal p { color: var(--encre-2); margin: 0 0 .8em; }
/* demande de devis : formulaire Easy Trip dans un cadre (integrer.js) */
.devis-intro { max-width: 62ch; color: var(--encre-2); }
.devis-cadre { margin-top: clamp(24px, 4vw, 40px); max-width: 880px; min-height: 720px; }
.devis-cadre iframe { display: block; width: 100%; }
.devis-liens { margin: 22px 0 0; }
.devis-autre a { display: inline-flex; gap: 10px; align-items: center; min-height: 48px; color: var(--encre-2); }
.devis-autre svg { width: 18px; height: 18px; flex: none; }
.contacts { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.contacts a { display: flex; gap: 12px; align-items: center; min-height: 48px; text-decoration: none; overflow-wrap: anywhere; }
.contacts a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--filet-fort); }
.contacts svg { width: 20px; height: 20px; flex: none; }

/* ---------- Pages des séjours ---------- */
.entete-page, .entete-sejour { padding-top: calc(var(--barre) + clamp(28px, 6vw, 72px)); }
.ariane ol { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 0 10px; font-size: .68rem; color: var(--encre-2); }
.ariane li + li::before { content: "/"; margin-right: 10px; opacity: .6; }
.ariane a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
.ariane a:hover { color: var(--encre); }
.ariane [aria-current] { display: inline-flex; align-items: center; min-height: 32px; color: var(--encre); }
.cartes-sejours.toutes { margin-top: 36px; }
.entete-sejour-grille { display: grid; gap: 32px; align-items: center; }
.sejour-faits { margin-bottom: 18px; }
.sejour-visuel .arche { width: min(100%, 260px); margin-inline: auto; }
.sejour-visuel.annee { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 1px solid var(--filet); container-type: inline-size; }
.sejour-visuel.annee span { font-family: var(--f-titre); font-size: 26cqi; color: transparent; -webkit-text-stroke: 1px var(--encre); letter-spacing: .06em; }
.a-completer-note { margin-top: 8px; padding: 12px 16px; border: 1px dashed var(--filet-fort); font-size: .92rem; max-width: 56ch; }
.nav-sejours { display: flex; justify-content: space-between; gap: 16px; padding-block: 8px 0; border-top: 1px solid var(--filet); }
.nav-sejours a { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; text-decoration: none; min-width: 0; }
.nav-sejours .libelle { font-size: .68rem; color: var(--encre-2); }
.nav-sejours .nav-titre { font-family: var(--f-titre); font-size: 1.3rem; text-transform: uppercase; letter-spacing: .1em; }
.nav-suiv { margin-left: auto; text-align: right; }
.bande-cta { border-top: 1px solid var(--filet); margin-top: clamp(32px, 6vw, 72px); }
.bande-cta-grille { display: grid; gap: 24px; align-items: end; }

/* ---------- Pied ---------- */
.pied { padding: 0 0 calc(32px + env(safe-area-inset-bottom)); text-align: center; font-size: .95rem; }
.pied .conteneur { border-top: 1px solid var(--encre); padding-top: 44px; }
.pied img { width: 190px; height: auto; margin: 0 auto 18px; }
.pied p { margin: .3em 0; }
.pied p a { display: inline-flex; align-items: center; min-height: 44px; }
.pied .credit-2ys { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .82rem; opacity: .75; }
.pied .credit-2ys a { min-height: 40px; }
.pied .credit-wa { justify-content: center; min-width: 40px; }
.pied .credit-wa svg { width: 18px; height: 18px; }
.langues-pied { justify-content: center; margin: 8px auto 0; }
.maquette { margin-top: 18px !important; display: inline-block; padding: 6px 12px; border: 1px dashed var(--encre); font-size: .85rem; }

/* ---------- Téléphones ---------- */
@media (max-width: 759px) {
  .galerie, .galerie-large:not(.grille) {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge);
    margin-inline: calc(-1 * var(--marge)); padding: 0 var(--marge) 8px;
  }
  .galerie > li { flex: 0 0 44%; scroll-snap-align: start; }
  .galerie-large:not(.grille) > li { flex: 0 0 76%; scroll-snap-align: start; }
  .galerie-large.grille { grid-template-columns: minmax(0, 1fr); }
  .formulaire .bouton { width: 100%; }
  .duo-champs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479px) {
  /* barre : seul le drapeau de l'autre langue reste, la langue affichée se lit déjà dans la page */
  .barre .langues a[aria-current] { display: none; }
  .trio-champs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .trio-champs .champ:first-child { grid-column: 1 / -1; }
  .bouton { padding-inline: 20px; gap: 10px; letter-spacing: .15em; }
  .actions .bouton { flex: 1 1 auto; }
  .faits dt { flex-basis: 100%; }
}
@media (max-width: 379px) {
  .barre { gap: 4px; }
  .barre-actions .bouton-rond { width: 40px; }
  .langues .code { display: none; }
  .langues a { padding: 0 6px; min-width: 36px; }
  .barre .logo img { width: 104px; }
  .menu li a { font-size: 1.15rem; }
  .menu li a small { font-size: .62rem; }
  .bouton { letter-spacing: .1em; padding-inline: 14px; }
}

/* ---------- Tablettes et ordinateurs ---------- */
@media (min-width: 760px) {
  h3 { font-size: 1.5rem; }
  .menu li a { font-size: 1.6rem; }
  .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 18px; }
  .galerie-large { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .galerie-large.grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .club { grid-template-columns: minmax(0, 1fr)  minmax(0, 1fr); gap: 56px; align-items: start; }
  .recit { grid-template-columns: minmax(0, 5fr)  minmax(0, 7fr); gap: 56px; }
  .recit.inverse > :first-child { order: 2; }
  .recit .arche { width: 100%; max-width: 330px; }
  .chambres { grid-template-columns: minmax(0, 1fr)  minmax(0, 1fr); gap: 28px; }
  .tarifs-grille { grid-template-columns: minmax(0, 7fr)  minmax(0, 5fr); gap: 64px; align-items: start; }
  .reserver-grille { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: start; }
  .portes ul { justify-content: center; }
  .entete-sejour-grille { grid-template-columns: minmax(0, 7fr)  minmax(0, 5fr); gap: 56px; }
  .bande-cta-grille { grid-template-columns: minmax(0, 1fr) auto; }
  .sejour-visuel .arche { max-width: 300px; }
}
@media (min-width: 1000px) {
  .galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .galerie-large { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hotel { grid-template-columns: minmax(0, 5fr)  minmax(0, 7fr); gap: 56px; align-items: start; }
  .hotel-photos { grid-template-columns: minmax(0, 1fr)  minmax(0, 1fr)  minmax(0, 1fr); }
  .hp-1 { grid-column: 1 / 3; grid-row: 1 / 3; aspect-ratio: auto; }
  .hp-2, .hp-3 { grid-column: 3; }
  .hp-4 { grid-column: 1 / -1; aspect-ratio: 16 / 6; }
  .table { grid-template-columns: minmax(0, 6fr)  minmax(0, 5fr); gap: 56px; align-items: start; }
  .sorties, .cartes-sejours { display: grid; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .sorties { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 18px; }
  .cartes-sejours { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .cartes-sejours.toutes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .sorties { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .menu { padding-top: 60px; }
  .menu li a { padding-block: 5px; font-size: 1.15rem; }
}

/* Écrans de densité 1 : les déliés d'Italiana restent pâles sous 38 px ; un contour de 0,3 px les épaissit. */
@media (max-resolution: 1.3dppx) {
  h1, h2, h3, .menu li a, .nav-titre, .tarif dd { -webkit-text-stroke: .3px currentColor; }
  .menu li a small { -webkit-text-stroke: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* Instagram : dans la barre quand la place le permet, toujours dans le menu */
.menu-insta { text-align: center; margin: 18px 0 0; }
.menu-insta a { display: inline-flex; gap: 10px; align-items: center; min-height: 48px; color: var(--encre-2); text-decoration: none; }
.menu-insta a:hover { color: var(--encre); }
.menu-insta svg { width: 20px; height: 20px; flex: none; }
@media (max-width: 519px) { .barre-insta { display: none; } }