/* ==========================================================================
   VANILLA - les pages carte et mentions legales
   Meme charte que la scene d'accueil (css/scene.css) : memes jetons, memes
   regles de forme, meme police unique. Ce fichier ne porte que ce qui est
   propre a ces deux pages ; les boutons, l'appel et le pied vivent dans
   css/base.css.

   Rappel : le site n'a qu'un scripte lie. Aucune capitale, aucun
   interlettrage large, aucune graisse : la hierarchie se fait par la
   TAILLE et par la couleur.
   ========================================================================== */

/* ========================================================== PAGE CARTE */

.carte-entete { position: relative; overflow: clip; padding-block: calc(var(--entete-h) + 1rem) clamp(1.4rem, 3vw, 2.4rem); }
/* Pas de `max-width` ici : cet element PORTE `.enveloppe`, donc son
   `margin-inline: auto` le recentrerait au lieu de le caler a gauche.
   La contrainte de mesure vit sur le paragraphe. */
.carte-entete__grille { position: relative; z-index: 1; display: grid; gap: .8rem; padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.carte-entete__grille .chapeau { max-width: 46ch; }

/* Un sommaire colle en haut de l'ecran : sur une carte de soixante
   articles, remonter en haut a chaque fois est le vrai defaut d'usage.
   Il peut se coller a `top: 0` puisque la navigation vit desormais en bas. */
.sommaire {
  position: sticky;
  top: var(--entete-h);
  z-index: 20;
  background: var(--blanc);
  border-block: 1px solid var(--filet-c);
  padding-block: .6rem;
}
.sommaire__piste { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.sommaire__piste::-webkit-scrollbar { display: none; }
.sommaire a {
  flex: none;
  scroll-snap-align: start;
  padding: .3em .9em;
  border-radius: var(--r-pilule);
  font-size: 1rem;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--encre-douce);
  transition: background var(--duree) var(--sortie), color var(--duree) var(--sortie);
}
.sommaire a:hover { background: var(--gris); color: var(--encre); }
.sommaire a[aria-current='true'] { background: var(--encre); color: var(--blanc); }

.categorie { padding-block: clamp(2.2rem, 4.5vw, 3.6rem); border-top: 1px solid var(--filet-c); }
.categorie:first-of-type { border-top: 0; }
.categorie__entete { display: grid; gap: .5rem; margin-bottom: clamp(1.2rem, 2.6vw, 2rem); }
.categorie__entete h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.3; }
.categorie__prixunique { color: var(--terra-txt); font-size: 1rem; }

/* Le contenu coule en colonnes de journal : une grille a deux colonnes
   laisse des trous des que les blocs sont de hauteurs inegales. */
.plats { columns: 2; column-gap: clamp(2rem, 5vw, 4.5rem); }
.plat { break-inside: avoid; padding-block: .7rem; border-bottom: 1px solid var(--filet-c); }
.plat__ligne { display: flex; align-items: baseline; gap: .8rem; }
.plat__nom { font-size: 1.25rem; line-height: 1.35; }
.plat__points { flex: 1; border-bottom: 1px dotted var(--filet-fort); translate: 0 -.25em; }
.plat__desc { margin-top: .15rem; font-size: 1rem; color: var(--encre-douce); max-width: 44ch; }
.plat__marque {
  display: inline-block; margin-left: .5em;
  padding: .05em .6em;
  border-radius: var(--r-pilule);
  background: var(--peche-f);
  font-size: .92rem;
  vertical-align: .1em;
}

@media (max-width: 760px) { .plats { columns: 1; } }

.bases { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.base-carte { background: var(--gris); border-radius: var(--r-surface); padding: clamp(1rem, 2.2vw, 1.5rem); display: grid; gap: .2rem; }
.base-carte__nom { font-size: 1.25rem; line-height: 1.3; }

.grille-choix { display: grid; }
.grille-choix__bloc { display: grid; gap: .5rem; padding-block: 1rem; border-top: 1px solid var(--filet-c); }
.grille-choix__entete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.grille-choix__nom { font-size: 1.3rem; line-height: 1.3; }
.grille-choix__liste { display: flex; flex-wrap: wrap; gap: .2rem .8rem; color: var(--encre-douce); font-size: 1.02rem; }
.grille-choix__liste li { display: flex; align-items: center; gap: .8rem; }
.grille-choix__liste li:not(:last-child)::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--secondaire); }

.mentions-carte {
  padding-block: clamp(2rem, 4vw, 3rem);
  display: grid; gap: .5rem;
  font-size: 1rem;
  color: var(--encre-douce);
  border-top: 1px solid var(--filet-c);
}

/* ========================================================== PAGE LEGAL */

.legal { padding-block: calc(var(--entete-h) + 1rem) var(--section); }
.legal__grille {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: clamp(1.8rem, 4.5vw, 4rem);
  align-items: start;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
.legal__sommaire { position: sticky; top: calc(var(--entete-h) + 1rem); display: grid; gap: .4rem; font-size: 1.02rem; }
.legal__sommaire a { color: var(--encre-douce); transition: color var(--duree) var(--sortie), translate var(--duree) var(--sortie); }
.legal__sommaire a:hover { color: var(--encre); translate: .3rem 0; }

.legal__corps { display: grid; gap: clamp(2rem, 4vw, 3.2rem); max-width: 64ch; }
.legal__corps section { display: grid; gap: .8rem; }
.legal__corps h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.3; }
.legal__corps h3 { font-size: 1.2rem; line-height: 1.3; margin-top: .5rem; color: var(--terra-txt); }
.legal__corps p, .legal__corps li { color: var(--encre-douce); }
.legal__corps ul { display: grid; gap: .35rem; padding-left: 1.1rem; list-style: disc; }
.legal__corps dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.4rem; }
.legal__corps dt { color: var(--encre-tenue); }

@media (max-width: 860px) {
  .legal__grille { grid-template-columns: 1fr; }
  .legal__sommaire { position: static; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; }
}

/* ==========================================================================
   LA GALERIE
   Une grille reguliere se lit comme un catalogue : une photo sur trois
   prend deux colonnes. Le rythme est FIXE, jamais tire au sort -- deux
   visiteurs doivent voir la meme page.
   ========================================================================== */

.galerie__tete { position: relative; overflow: clip; padding-block: calc(var(--entete-h) + 2rem) var(--section); }
.galerie__tete > .enveloppe { position: relative; z-index: 1; display: grid; gap: .8rem; }
.galerie__tete .chapeau { max-width: 52ch; }

.galerie__grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.6rem, 1.4vw, 1.1rem);
}
.galerie__vue { grid-column: span 2; aspect-ratio: 4 / 3; border-radius: var(--r-surface); }
.galerie__vue--large { grid-column: span 4; aspect-ratio: 16 / 9; }
.galerie__vue img { transition: scale 1.2s var(--sortie); }
.galerie__vue:hover img { scale: 1.05; }
.galerie__vide { color: var(--encre-douce); }

@media (max-width: 720px) {
  .galerie__grille { grid-template-columns: 1fr 1fr; }
  .galerie__vue { grid-column: span 1; }
  .galerie__vue--large { grid-column: span 2; }
}
/* ==========================================================================
   LES TROIS FLUX (page « Socials »)
   --------------------------------------------------------------------------
   Trois colonnes, trois vrais fils. Facebook et TikTok se mettent a jour
   tout seuls. Instagram interdit l'integration d'un profil : sa colonne
   affiche les publications listees dans VA.INFOS.reseaux.instagramPosts,
   et rien tant que la liste est vide.
   ========================================================================== */

.flux {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.8rem);
  align-items: start;
}
.flux__carte {
  display: grid;
  gap: 0;
  background: var(--blanc);
  border-radius: clamp(14px, 1.8vw, 22px);
  overflow: clip;
  border: 1px solid var(--filet-c);
}
.flux__tete {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--filet-c);
}
.flux__bulle {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--vanille);
  color: var(--secondaire);
}
.flux__bulle .ico { width: 19px; height: 19px; }
.flux__qui { display: grid; line-height: 1.25; min-width: 0; }
.flux__qui b { font-weight: 400; color: var(--secondaire); }
.flux__qui span {
  color: var(--encre-douce); font-size: .82rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flux__ouvrir {
  margin-left: auto; flex: none;
  padding: .35em .9em;
  border-radius: var(--r-pilule);
  background: var(--vanille);
  color: var(--secondaire);
  font-size: .82rem;
  transition: background .25s var(--sortie), color .25s var(--sortie);
}
.flux__ouvrir:hover { background: var(--secondaire); color: var(--vanille); }

/* ⚠️ LA HAUTEUR EST FIXEE ICI, PAS PAR LE CADRE INTEGRE. Un iframe sans
   hauteur declaree retombe a 150 px (valeur par defaut du navigateur) : les
   trois colonnes arrivaient en timbres-poste. Et comme chaque reseau rend sa
   propre mise en page, seule une hauteur commune les aligne. */
.flux__cadre { height: clamp(460px, 62vh, 700px); background: var(--blanc); }
.flux__cadre iframe { width: 100%; height: 100%; border: 0; display: block; }

/* La colonne Instagram empile ses publications et defile. */
.flux__cadre--insta { overflow-y: auto; scrollbar-width: thin; }
.flux__cadre--insta iframe { height: auto; min-height: 560px; }

.flux__cadre--vide {
  display: grid; align-content: center; justify-items: center; gap: 1rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  text-align: center;
  background: color-mix(in srgb, var(--vanille) 32%, var(--blanc));
}
.flux__vide { color: var(--encre-douce); line-height: 1.6; max-width: 26ch; }

@media (max-width: 980px) {
  .flux { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}
/* ==========================================================================
   LA GALERIE, REAGENCEE (03/08/2026)
   --------------------------------------------------------------------------
   Douze colonnes, des photos par PAIRES qui remplissent la rangee (7+5 puis
   5+7), et une legende posee sur l'image comme les paves du heros.
   ⚠️ La portee est calculee par js/galerie.js et arrive dans --n : la grille
   doit rester juste quand le client ajoutera ses photos, sans qu'on
   retouche le CSS.
   ⚠️ La hauteur de rangee est FIXE (grid-auto-rows) et non un aspect-ratio
   par photo : dans une rangee, une image 7 colonnes et une image 5 colonnes
   n'auraient jamais la meme hauteur, et la rangee se serait decalee.
   ========================================================================== */

.galerie__grille {
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(200px, 24vw, 340px);
}
/* ⚠️ La portee arrive de js/galerie.js, ecrite en dur dans l'attribut style
   (« grid-column:auto/span 7 ») : une variable CSS ne passe PAS dans une ligne
   de grille, Chrome rejette la declaration et l'element retombe a une colonne,
   en silence. C'est aussi pour ca que la regle mobile ci-dessous doit porter
   un !important : elle doit battre un style en ligne. */
.galerie__vue {
  aspect-ratio: auto;
  position: relative;
  border-radius: var(--r-surface);
}
.galerie__vue img { width: 100%; height: 100%; object-fit: cover; }

/* LA LEGENDE, posee sur la photo -- meme pave que le heros. */
.galerie__pave {
  position: absolute;
  left: clamp(.7rem, 1.4vw, 1.1rem);
  bottom: clamp(.7rem, 1.4vw, 1.1rem);
  right: clamp(.7rem, 1.4vw, 1.1rem);
  z-index: 2;
  display: grid; gap: .1rem;
  width: fit-content; max-width: min(100%, 34ch);
  padding: .6rem .95rem;
  border-radius: 4px;
  background: var(--vanille);
  color: var(--encre);
  line-height: 1.35;
}
.galerie__pave b { font-weight: 400; color: var(--secondaire); }
.galerie__pave em { font-style: normal; font-size: .88rem; color: var(--encre-douce); }

@media (max-width: 860px) {
  /* Deux photos par rangee ne tiennent plus : une seule, pleine largeur. */
  .galerie__grille { grid-template-columns: 1fr; grid-auto-rows: clamp(220px, 58vw, 340px); }
  .galerie__vue { grid-column: auto / span 1 !important; }
}

/* ==========================================================================
   LA CARTE, REAGENCEE (03/08/2026) : VIGNETTE + DESCRIPTION PAR ARTICLE
   --------------------------------------------------------------------------
   Chaque article devient une fiche : vignette a gauche, nom et description
   au milieu, prix a droite. Plusieurs fiches par rangee selon la place.
   ⚠️ La vignette est une ICONE DE FAMILLE tant que la maison n'a pas la
   photo de l'article. Voir le commentaire en tete de js/carte.js.
   ========================================================================== */

.plats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: clamp(.5rem, 1.2vw, .9rem);
}
.plat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(.7rem, 1.4vw, 1rem);
  padding: clamp(.7rem, 1.4vw, 1rem);
  border-radius: clamp(12px, 1.4vw, 18px);
  background: var(--blanc);
  border: 1px solid var(--filet-c);
}
.plat__vignette {
  display: grid; place-items: center;
  width: clamp(44px, 5vw, 56px); aspect-ratio: 1;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ocre-logo) 26%, var(--blanc));
  color: var(--secondaire);
  overflow: clip;
}
/* ⚠️ Sans taille explicite, une icone SVG en ligne prend 100 % de son
   conteneur et peut recouvrir la fiche entiere -- sans la moindre erreur. */
.plat__vignette .ico { width: 24px; height: 24px; }
.plat__vignette--photo img { width: 100%; height: 100%; object-fit: cover; }

.plat__mot { display: grid; gap: .18rem; min-width: 0; }
.plat__nom {
  display: flex; align-items: baseline; gap: .5em; flex-wrap: wrap;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.25;
  color: var(--secondaire);
}
.plat__desc { color: var(--encre-douce); font-size: .88rem; line-height: 1.5; }
.plat__prix { white-space: nowrap; align-self: center; }
.plat__points { display: none; }   /* les pointilles n'ont plus de sens en fiches */

@media (max-width: 520px) {
  .plat { gap: .6rem; padding: .7rem; }
  .plat__vignette { width: 40px; }
}

/* ==========================================================================
   LES TROIS FLUX : REGLAGES FINS (03/08/2026)
   --------------------------------------------------------------------------
   Demande client : cacher les barres de defilement, et faire disparaitre de
   TikTok le bandeau du bas (logotype + bouton rose).
   ⚠️ ON NE PEUT RIEN STYLER A L'INTERIEUR D'UN CADRE D'UN AUTRE DOMAINE.
   Aucune regle CSS d'ici n'atteint le contenu de Facebook, de TikTok ou
   d'Instagram. La seule prise possible est GEOMETRIQUE : donner au cadre une
   taille plus grande que sa fenetre et rogner ce qui depasse.
   ========================================================================== */

.flux__cadre {
  position: relative;
  height: 417px;                 /* la meme pour les trois colonnes */
  overflow: clip;                /* c'est lui qui rogne */
}

/* ------------------------------------------------------------- TIKTOK
   ⚠️ MESURE, PAS ESTIME. Le document de l'integration TikTok fait 493 px de
   haut, et cette hauteur NE DEPEND PAS de la largeur (verifie a 504 et
   582 px : identique). Sa composition :
     0   -> 181  l'entete (photo, nom, chiffres, description)
     181 -> 432  la rangee de videos, sa barre de defilement comprise
     432 -> 493  le bandeau « TikTok · politique » et le bouton rose
   La fenetre est donc calee a 417 px : le bandeau du bas disparait (61 px)
   et la barre de defilement horizontale avec (les 15 derniers px de la
   rangee). Les vignettes, elles, restent entieres.
   ⚠️ Le cadre est declare a 900 px de haut alors que le contenu en fait 493 :
   c'est ce qui repousse la banniere de cookies de TikTok -- elle est collee
   au BAS DE LA FENETRE du cadre -- tres au-dela de la zone visible. A 493 px,
   elle recouvrait les videos. */
.flux__cadre--tiktok iframe { height: 900px; }

/* --------------------------------------------------------- FACEBOOK
   Le fil garde sa barre de defilement verticale : on elargit le cadre de
   20 px et le rognage l'emporte hors champ. Le defilement fonctionne
   toujours (molette et doigt), seule la barre disparait. */
#flux-fb iframe { width: calc(100% + 20px); }

/* -------------------------------------------------------- INSTAGRAM
   Ici la colonne est A NOUS : on peut masquer sa barre proprement.
   Chaque publication garde sa hauteur propre, la colonne defile. */
.flux__cadre--insta {
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.flux__cadre--insta::-webkit-scrollbar { display: none; }
.flux__cadre--insta iframe {
  width: 100%;
  height: auto;
  min-height: 620px;
  border: 0;
  display: block;
}
.flux__cadre--insta iframe + iframe { margin-top: .6rem; }

/* Un cadre qui n'a jamais repondu cede la place au panneau : la regle de
   hauteur ci-dessus doit alors laisser le contenu se centrer. */
.flux__cadre--vide { overflow: auto; }

/* ==========================================================================
   LES MURS INSTAGRAM ET TIKTOK (03/08/2026)
   --------------------------------------------------------------------------
   Une galerie, comme quand on arrive sur le compte : trois colonnes de
   vignettes carrees, chacune ouvrant la vraie publication.
   ⚠️ Ce ne sont PAS des cadres integres mais des images locales, rapatriees
   par outils/reseaux.mjs. Rien ici ne depend d'un bloqueur, d'un cookie
   tiers ou d'une banniere -- et rien ne peut « charger a l'infini ».
   ========================================================================== */

.flux__cadre--mur {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 3px;
  overflow: clip;
  background: var(--blanc);
}
.mur__vue {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: clip;
  background: color-mix(in srgb, var(--ocre-logo) 20%, var(--blanc));
}
.mur__vue img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: scale .6s var(--sortie);
}
.mur__vue:hover img { scale: 1.06; }
.mur__play {
  position: absolute; right: 6px; top: 6px;
  width: 18px; height: 18px;
  color: var(--blanc);
  pointer-events: none;
}
/* ⚠️ Une icone SVG sans taille prend 100 % de son conteneur : les deux
   dimensions sont donc posees ici ET sur le parent. */
.mur__play svg { width: 100%; height: 100%; fill: currentColor; }

/* ---------------------------------------------------- UN PEU D'AIR AU PIED
   Demande client : les pages Socials et Galerie collaient au pied. La vague
   appartient au pied, donc c'est la SECTION du dessus qu'on desserre. */
main.socials > section:last-of-type,
main.galerie > section:last-of-type { padding-bottom: clamp(2.4rem, 5vw, 4.5rem); }

/* La rubrique en cours dans le sommaire portait l'encre du site, presque
   noire : elle sortait de la palette. Elle prend la couleur secondaire du
   logotype, comme tous les autres aplats pleins du site. */
.sommaire a[aria-current='true'] { background: var(--secondaire); color: var(--vanille); }

/* ⚠️ min-width: 0 EST INDISPENSABLE, ET C'EST LE PIEGE DU JOUR.
   Un element de grille a « min-width: auto » : il refuse de descendre sous
   la largeur minimale de son contenu. Les vignettes Facebook etant bien
   plus grandes (526 px de large) que celles d'Instagram, la colonne
   Facebook s'est mise a 624 px alors que sa carte en fait 417 -- elle
   debordait de sa propre carte, sans provoquer le moindre debordement de
   page, donc sans rien signaler. */
.flux__cadre, .mur__vue { min-width: 0; }