/* Zihma — fiche de details : precommande, filtres de menu, envies.
   Charge APRES app.css, dont elle ne fait que completer les regles.
   (`[hidden]{display:none !important}` est pose une fois pour tout le site
   dans app.css : aucune rustine par element ici.) */

/* ------------------------------------------------------- precommande d'un plat
   Le compteur d'un plat et celui d'une chambre prennent le DESSIN du
   compteur partage (.compteur, .compteur__b, .compteur__v — app.css) ; seule
   leur logique reste a fiche.js. Rien a redessiner. */

/* le recapitulatif de l'encadre quand rien n'est encore choisi */
.encadre__vide{margin:0 0 var(--e3);font-size:var(--t3);color:var(--gris-texte)}
/* « Plats souhaités » est un <details> replie par defaut : sa tete est le
   summary, cliquable sur toute sa hauteur (44 px), sans triangle natif. */
.recap--repli > summary{list-style:none;display:flex;align-items:center;gap:var(--e2);
  min-height:var(--tactile);cursor:pointer;margin:0}
.recap--repli > summary::-webkit-details-marker{display:none}
.recap--repli > summary .accordeon__chevron{margin-left:auto}
.recap--repli[open] > summary .accordeon__chevron{transform:rotate(180deg)}

/* ------------------------------------------------- filtre de menu sans resultat */
.items__vide{margin:var(--e4) 0 0;padding:var(--e5);border:1px dashed var(--bord);
  border-radius:var(--r-carte);background:var(--surface);color:var(--gris-texte);
  font-size:var(--t4);text-align:center}

/* ------------------------------------------------------------ erreur de saisie */
.encadre__erreur{margin:var(--e4) 0 0;padding:var(--e3) var(--e4);
  border-radius:var(--r-champ);border:1px solid var(--brun);
  background:var(--carte-chaud);color:var(--brun);font-size:var(--t3);line-height:1.4}

/* --------------------------------------------------------------------- envies */
.fiche__envies{flex-basis:100%;margin:var(--e3) 0 0;font-size:var(--t2);
  color:var(--gris-texte);text-align:right}

@media (max-width:640px){
  .fiche__envies{text-align:left}
}

/* ECR-C18 : la demande de confirmation d'un signalement. `<dialog>` natif —
   capture du focus, Échap et arrière-plan inerte, comme les autres commandes
   sensibles du dépôt (espace.js, pro.js). */
.fiche__signal{border:1px solid var(--bord);border-radius:var(--r5);padding:26px 28px;
  max-width:420px;background:var(--surface);color:var(--encre)}
.fiche__signal::backdrop{background:rgba(14,14,14,.42)}
.fiche__signal p{margin:0 0 20px;font-size:var(--t5);line-height:1.5}
.fiche__signal p[data-ton="alerte"]{color:var(--brun)}
.fiche__signal__actions{display:flex;gap:var(--e3);justify-content:flex-end;flex-wrap:wrap}
/* `.galerie-tout__actions` est monte dans app.css, aupres de `.galerie-tout` :
   les pages de galerie ne chargent que la feuille commune. */

/* ---- Lot 4 : fiche calculee depuis le catalogue -------------------------
   Les groupes « A propos » (caracteristiques du referentiel), le resume des
   avis, la selection des modules et les nouveaux gabarits d'elements
   (service, vehicule, galerie) reprennent les jetons et les composants deja
   valides : pastilles d'equipement, lignes de recapitulatif, boutons. */
.carac__titre{margin:0 0 var(--e2);font-size:var(--t7);font-weight:700;color:var(--encre)}
.bloc--carac{margin-top:var(--e5)}
/* les groupes se suivent au rythme d'une sous-section (24 px), pas d'un bloc (56 px) */
.fiche__ancre:has(> .bloc--carac) + .fiche__ancre:has(> .bloc--carac){margin-top:var(--e5)}
.bloc--carac .equipement{padding:var(--e2) 0}
/* Pictogrammes des listes de caracteristiques : 20 px, discrets, alignes sur
   le texte, quelle que soit la taille posee par le gabarit ou clonee par
   fiche-vue.js (decision client du 17/09/2026). */
.equipement .ic{flex:0 0 20px;width:20px;height:20px}
.bloc--compact{margin-top:var(--e4)}
.bloc--compact + .bloc--compact{margin-top:0}
.carac{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--e5);max-width:812px}
.carac__ligne{display:flex;flex-direction:column;gap:2px;padding:var(--e3) 0;border-bottom:1px solid var(--bord)}
.carac__ligne dt{font-size:var(--t2);color:var(--gris-texte)}
.carac__ligne dd{margin:0;font-size:var(--t4);color:var(--encre);font-weight:500;line-height:1.5}
.bloc .equipements + .carac{margin-top:var(--e3)}
.items__note{margin:0 0 var(--e4);font-size:var(--t3);color:var(--gris-texte);max-width:812px;line-height:1.55}
.item__selection{display:flex;align-items:center;gap:var(--e2);margin-top:auto;padding-top:var(--e3);flex-wrap:wrap}
/* Geometrie : la regle de format d'app.css, comme tout bouton du site. Ces
   deux variantes declaraient leur propre rayon (12 px) et leur propre hauteur
   alors que `.item__bouton` nu suivait la pilule : le meme composant avait
   deux formes selon qu'il etait selectionnable ou non. Ne reste que la taille
   compacte (une action dans une carte d'item) et la couleur. */
.item__bouton--sel,.item__bouton--contour{--b-haut:var(--b-haut-petit);
  --b-marge:var(--b-marge-petit);--b-texte:var(--b-texte-petit)}
.item__bouton--sel{background:var(--vert);color:var(--texte-inverse);border:1px solid var(--vert)}
.item__bouton--sel:hover:not(:disabled){background:var(--vert-sombre)}
.item__bouton--sel:disabled{opacity:.45;cursor:not-allowed}
.item__bouton--contour{background:var(--surface);color:var(--vert);border:1px solid var(--vert)}
.item__bouton--contour:hover{background:var(--menthe)}
.item__selection[data-choisi="oui"] .item__bouton--sel{background:var(--vert-sombre)}
.item__indispo{font-size:var(--t2);color:var(--erreur);font-weight:600}
.item__galerie:hover .item__img{opacity:.92}
.recap__caution span:first-child{text-decoration:none;color:var(--gris-texte)}
.recap__caution span:last-child{font-weight:600;color:var(--encre)}
.recap[data-selection-recap] .recap__ligne + .recap__ligne{margin-top:0}
.avis__resume{max-width:812px;margin:0 0 var(--e5);padding:var(--e4);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e3) var(--e5)}
.avis__synthese{grid-column:1 / -1;margin:0;font-size:var(--t4);color:var(--gris-fort)}
.avis__globale{font-size:var(--t12);color:var(--vert);font-weight:700;letter-spacing:-.02em}
.avis__repartition,.avis__criteres{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.avis__rep{display:grid;grid-template-columns:32px minmax(0,1fr) 28px;align-items:center;gap:var(--e2);font-size:var(--t2);color:var(--gris-texte)}
.avis__barre{display:block;height:6px;border-radius:var(--r1);background:var(--fond-creux);overflow:hidden}
.avis__barre i{display:block;height:100%;background:var(--vert)}
.avis__critere{display:flex;justify-content:space-between;gap:var(--e3);font-size:var(--t3);color:var(--gris-fort)}
.avis__critere b{color:var(--vert)}
.avis__verifie{display:inline-flex;align-items:center;gap:4px;margin-left:var(--e2);font-size:var(--t1);font-weight:600;color:var(--vert);
  background:var(--menthe);border-radius:var(--r-pilule);padding:2px 8px}
.avis__meta{margin:2px 0 0;font-size:var(--t2);color:var(--gris-texte)}
.avis__reponse{margin:var(--e2) 0 0;padding:var(--e3);background:var(--fond-creux);border-radius:var(--r3);font-size:var(--t3);color:var(--gris-fort)}
.avis__regle{margin:var(--e5) 0 0;font-size:var(--t2);color:var(--gris-texte);max-width:812px}
.plan__reperes{list-style:none;margin:var(--e3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--e2) var(--e4);font-size:var(--t3);color:var(--gris-fort)}
.plan__reperes li{display:inline-flex;align-items:center;gap:6px}
.plan__acces{margin:var(--e2) 0 0;font-size:var(--t3);color:var(--gris-texte)}
.partenaire__autres{margin:var(--e3) 0 0;font-size:var(--t3);color:var(--gris-fort);line-height:1.6}
.partenaire__autres a{color:var(--vert);text-decoration:underline}
@media (max-width:640px){
  .carac{grid-template-columns:minmax(0,1fr)}
  .avis__resume{grid-template-columns:minmax(0,1fr)}
}

/* ---- Audit du 16/09 (D.4, I) : la fiche se lit, elle ne s'exporte plus ----
   1. introduction (accroche + description) ; 2. « L'essentiel » en icones ;
   3. ce que l'on reserve ; 4. equipements en grilles par theme ; … ;
   8. « Toutes les caracteristiques » repliees. */

/* l'accroche ouvre l'introduction : un chapo, pas un corps de texte de plus */
.bloc > .bloc__accroche{font-size:var(--t6);line-height:1.55;font-weight:500;color:var(--encre);max-width:640px}

/* L'essentiel : 6 a 8 faits, la valeur en avant, l'etiquette dessous. Deux
   colonnes des 480 px, trois a partir de 900 ; jamais une liste de paires. */
.essentiel{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);
  gap:var(--e3) var(--e5);max-width:812px}
.essentiel__f{display:flex;align-items:flex-start;gap:var(--e3);min-width:0;padding:var(--e2) 0}
.essentiel__ic{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:var(--menthe);
  color:var(--vert);display:grid;place-items:center}
/* meme taille pour le SVG genere (fiche.py, 20) et le clone de l'apercu Pro (16) */
.essentiel__ic .ic{width:20px;height:20px}
.essentiel__texte{display:flex;flex-direction:column;gap:2px;min-width:0;padding-top:2px}
.essentiel__val{font-size:var(--t5);font-weight:600;color:var(--encre);line-height:1.35;overflow-wrap:anywhere}
.essentiel__eti{font-size:var(--t2);color:var(--gris-texte);line-height:1.3}
@media (min-width:480px){.essentiel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.essentiel{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* equipements par theme : un h3 par groupe du referentiel, la grille dessous */
.equipements__theme{max-width:812px}
.equipements__theme + .equipements__theme{margin-top:var(--e5)}
.equipements__theme .equipements{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--e5)}
@media (max-width:900px){.equipements__theme .equipements{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.equipements__theme .equipements{grid-template-columns:minmax(0,1fr)}}

/* toutes les caracteristiques : un <details> a la maniere de l'accordeon du
   site (accordeon__item : filet, chevron qui tourne, focus visible) */
.bloc--details{max-width:812px;border-top:1px solid var(--bord)}
.bloc--details > .details__titre{font-size:var(--t7);color:var(--vert)}
.bloc--details[open] > .details__titre{color:var(--vert)}
.details__corps{padding:var(--e3) 0 var(--e4)}
.details__groupe + .details__groupe{margin-top:var(--e5)}
/* le meme contenu, replie : les lignes prennent la disposition des groupes */
.details__groupe .carac{max-width:none}

/* l'estimation de l'encadre : trois lignes chiffrees, le total en tete de
   lecture, la reserve en dessous — plus une phrase a decoder */
.encadre__estimation{display:grid;gap:4px}
.estimation__l{display:flex;justify-content:space-between;gap:var(--e3);font-variant-numeric:tabular-nums}
.estimation__l > span:first-child{color:var(--gris-texte)}
.estimation__t{margin-top:2px;padding-top:6px;border-top:1px solid var(--bord);font-weight:700;color:var(--vert)}
.estimation__t > span:first-child{color:var(--vert)}
.estimation__note{margin-top:2px;font-size:var(--t1);color:var(--gris-faible)}

/* l'etoile de note est PLEINE et or partout sur la fiche (en-tete, encadre,
   prestataire, avis), comme sur la carte (.carte__note) */
.fiche__etoile,.encadre__note > .ic,.partenaire__note > .ic,.avis__note .ic{color:var(--or);fill:currentColor}

/* les onglets : sous 640 px la barre defile a l'horizontale au lieu de
   passer a la ligne (l'onglet actif est ramene dans la bande par fiche.js) ;
   le repli du decalage d'ancre compte la barre, en attendant sa mesure */
.fiche__ancre{scroll-margin-top:var(--ancre-decalage,calc(var(--haut-entete,80px) + var(--tactile) + 14px + var(--e3)))}
@media (max-width:640px){
  .onglets{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .onglets::-webkit-scrollbar{display:none}
  .onglet{flex:0 0 auto;white-space:nowrap}
}

/* galerie sans photo : le visuel neutre de l'univers, en entier sur fond
   ivoire, et la mention qui dit ce qu'il est — ni zoom ni compteur */
.galerie[data-sans-photo]{height:auto}
/* la rangee prend toute la hauteur : sans cela le visuel (4:3) gardait sa
   hauteur propre, debordait, et son icone centree tombait sous la mention */
.galerie__attente{height:min(45cqw,400px);margin:0;cursor:default;background:var(--fond-creux);display:grid;
  grid-template-rows:minmax(0,1fr)}
.galerie__attente img{width:100%;height:100%;object-fit:contain;padding:var(--e6)}
.galerie__attente:hover img{transform:none}
.galerie__attente figcaption{position:absolute;left:0;right:0;bottom:0;padding:var(--e3) var(--e4);
  text-align:center;font-size:var(--t3);font-weight:600;color:var(--gris-fort);background:var(--surface)}

/* localisation : le fond Leaflet se pose PAR-DESSUS le trace de repli, le
   repere CSS reste au-dessus du fond ; la mention legale, sobre, sous le plan */
.plan__vue > .plan__osm{position:absolute;inset:0;height:100%;z-index:1;background:var(--fond-creux)}
.plan__vue > .plan__repere{z-index:2}
.plan__attribution{flex-basis:100%;margin:0;font-size:var(--t1);color:var(--gris-faible)}
.plan__attribution a{color:inherit;text-decoration:underline}

/* ---- Finition de la page detail (decision client du 17/09/2026) ----------
   Meme page, memes textes, meme ordre : seule la TENUE change. Trois niveaux
   de lecture (titre de section / information / metadonnee) portes par des
   surfaces legeres et l'espace, plus seulement par des traits. Rayons de
   l'echelle : petits elements --r3 (10), surfaces de lecture --r4 (16),
   cartes --r-carte (18). Les CADRES de la page (plan, prestataire, encadre,
   cartes de biens) gardent le format commun de app.css ; ce qui suit ne
   dessine que des surfaces de lecture au filet --bord, plus fin que le filet
   des cartes — jamais une carte de plus. Aucune ombre au repos. */

/* A. « A propos » : le texte est pose dans une surface ivoire, a largeur
   de lecture (70 caracteres) ; le titre reste au-dessus, sur le papier. */
.apropos__corps{max-width:720px;padding:var(--e5) var(--e6);border:1px solid var(--bord);
  border-radius:var(--r4);background:var(--surface)}
.apropos__corps > p,.apropos__corps .bloc__suite > p{margin:0 0 var(--e4);max-width:70ch;
  font-size:var(--t4);line-height:1.6;color:var(--gris-fort)}
.apropos__corps > p:last-child,.apropos__corps .bloc__suite > p:last-child{margin-bottom:0}
.apropos__corps > .bloc__accroche{font-size:var(--t6);line-height:1.55;font-weight:500;color:var(--encre)}
.bloc--chapo .apropos__corps > p{font-size:var(--t6);line-height:1.6}
.apropos__corps > .bloc__suite:not([hidden]){margin-top:var(--e4)}
.apropos__corps > .bloc__plus{margin:var(--e1) 0 calc(-1 * var(--e2));padding-left:0;padding-right:0}

/* B. informations et caracteristiques : chaque paire intitule / valeur est
   une petite cellule sur fond a peine creuse (--fond-creux), sans filet ;
   l'intitule en metadonnee, la valeur en information. Memes donnees, meme
   ordre, deux colonnes des 641 px. */
.carac{gap:var(--e2) var(--e3)}
.carac__ligne{gap:3px;padding:var(--e3) var(--e4);border-bottom:0;border-radius:var(--r3);
  background:var(--fond-creux)}
.carac__ligne dt{line-height:1.3}
.carac__ligne dd{font-weight:600;line-height:1.45}
.carac__titre{margin:0 0 var(--e4)}
.bloc--carac{margin-top:var(--e5)}
.bloc--carac .equipements + .carac{margin-top:var(--e4)}
/* les groupes de conditions se suivent au rythme d'une sous-section, avec
   un peu plus d'air qu'une simple liste */
.fiche__ancre:has(> .bloc--carac) + .fiche__ancre:has(> .bloc--carac){margin-top:var(--e6)}

/* « Toutes les caracteristiques » : le repli devient une surface de lecture
   fermee sur elle-meme, plutot qu'un filet perdu entre deux sections */
.bloc--details{border:1px solid var(--bord);border-radius:var(--r4);background:var(--surface);
  padding:0 var(--e5)}
.bloc--details > .details__titre{min-height:60px}
.bloc--details > .details__titre:hover{color:var(--vert-sombre)}
.bloc--details > .details__titre:focus-visible{outline-offset:-4px}
.details__corps{padding:var(--e2) 0 var(--e5)}
.details__groupe + .details__groupe{margin-top:var(--e6)}
@media (max-width:640px){
  .apropos__corps{padding:var(--e4)}
  .bloc--details{padding:0 var(--e4)}
}

/* C. equipements et services : le pictogramme (20 px, table centralisee)
   reste discret, le libelle domine. Les themes se suivent au rythme d'une
   sous-section, chacun separe du precedent par un filet leger. */
.equipement{gap:var(--e3);padding:10px 0;font-weight:500;color:var(--encre)}
.equipement .ic{color:var(--vert);opacity:.85}
.equipements__theme + .equipements__theme{margin-top:var(--e5);padding-top:var(--e5);
  border-top:1px solid var(--bord)}
.equipements__theme .carac__titre{margin-bottom:var(--e2)}

/* D. avis : chaque avis est une petite carte de lecture — initiales, nom,
   note, date, texte. Les initiales sont peintes depuis `data-initiales`
   (content:attr), deduites du nom deja affiche : rien ne s'ajoute au texte.
   Deux colonnes des que la colonne de gauche depasse 620 px (container
   query sur .fiche__gauche), une seule au-dessous. */
.avis__liste{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e4);max-width:812px}
@container (min-width:620px){.avis__liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
.avis__liste .avis{margin:0}
.avis{padding:var(--e5);border:1px solid var(--bord);border-radius:var(--r4);background:var(--surface)}
.avis::before{content:none}
.avis__tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--e1) var(--e3)}
.avis__tete::before{content:attr(data-initiales);flex:0 0 40px;width:40px;height:40px;
  display:grid;place-items:center;border-radius:50%;background:var(--menthe);color:var(--vert);
  font-size:var(--t3);font-weight:700;letter-spacing:.02em}
.avis__tete[data-initiales=""]::before{content:none}
.avis__auteur{font-size:var(--t5);line-height:1.2}
.avis__tete .avis__verifie{margin-left:0}
.avis__tete .avis__note{margin-left:auto;font-size:var(--t4);color:var(--encre)}
/* colonne etroite : la note reste sur la ligne du nom, le badge « Réservation
   vérifiée » passe dessous, aligne sur le nom (retour force par ::after) */
@container (max-width:460px){
  .avis__tete .avis__note{order:1}
  .avis__tete::after{content:"";order:2;flex-basis:100%;height:0}
  .avis__tete .avis__verifie{order:3;margin-left:52px}
}
.avis__meta{margin:var(--e1) 0 0;padding-left:52px}
.avis__texte{margin:var(--e3) 0 0;font-size:var(--t4);line-height:1.6;color:var(--gris-fort)}
.avis__reponse{margin:var(--e3) 0 0;padding:var(--e3) var(--e4);border-radius:var(--r3);line-height:1.5}
.avis__reponse b{color:var(--encre)}
.avis__compte{margin:var(--e4) 0 0}
.avis__tous{margin-top:var(--e4)}
/* la note globale et la repartition : une carte de synthese mieux aeree,
   les barres plus douces — memes chiffres, aucune statistique ajoutee */
.avis__resume{padding:var(--e5);gap:var(--e4) var(--e6)}
.avis__synthese{display:flex;align-items:baseline;gap:var(--e2);color:var(--gris-texte)}
.avis__globale{font-size:var(--t13);line-height:1}
.avis__repartition{gap:var(--e2)}
.avis__rep{grid-template-columns:30px minmax(0,1fr) 24px;font-variant-numeric:tabular-nums}
.avis__rep > span:last-child{text-align:right;color:var(--gris-fort)}
.avis__barre{height:8px;border-radius:var(--r1)}
.avis__barre i{border-radius:var(--r1)}
.avis__criteres{gap:var(--e2);align-self:start}
.avis__critere{padding:6px 0;border-bottom:1px solid var(--bord)}
.avis__critere:last-child{border-bottom:0}
.avis__critere b{font-variant-numeric:tabular-nums}

/* E. localisation : les reperes en petites pilules, l'acces et la reserve en
   metadonnees sous le plan ; le plan et le prestataire gardent leur cadre */
.plan__reperes{margin-top:var(--e4);gap:var(--e2)}
.plan__reperes li{padding:5px 12px;border-radius:var(--r-pilule);background:var(--fond-creux);
  color:var(--gris-fort);font-size:var(--t2);font-weight:500}
.plan__reperes .ic{color:var(--vert);width:14px;height:14px}
.plan__acces{margin-top:var(--e3);line-height:1.55}
.plan__reserve{margin-top:var(--e2)}
.partenaire__autres{padding-top:var(--e3);border-top:1px solid var(--bord)}

/* F. cartes d'element (demande client du 17/09/2026 : « ajuste et embellis
   les sections menu, chambre, flotte, portfolio et services »). La famille
   commune est dans app.css (.item*) ; ici, ce qui distingue chaque gabarit.
   Memes textes, meme ordre, memes commandes. */

/* chambres et flotte : la photo remplit toute la hauteur (colonne 260),
   les commandes alignees en bas ; le lien de galerie reste cliquable */
.item__selection{padding-top:var(--e4)}
@media (max-width:640px){
  .item__selection > .item__bouton{flex:1 1 auto}
}

/* menu : vignette 140 px arrondie (--r3), prix a droite, compteur centre a
   droite ; cartes de meme hauteur par rangee (grid + stretch) */
.item--plat{--plat-vignette:140px;grid-template-columns:var(--plat-vignette) minmax(0,1fr);align-items:center;column-gap:var(--e4);
  padding:var(--e4);min-height:0}
/* 17/09 (client) : le plat doit etre bien visible — vignette 140 px sur
   bureau et tablette, 112 px sous 640 px ; une seule variable la regle. */
.item--plat:has(> .compteur){grid-template-columns:var(--plat-vignette) minmax(0,1fr) auto}
.item--plat .item__img{width:var(--plat-vignette);height:var(--plat-vignette);aspect-ratio:1;border-radius:var(--r3);align-self:center}
/* 17/09/2026 : la vignette est un lien vers la visionneuse du plat ; le lien
   prend la place et la forme de la vignette, l'image le remplit */
.item--plat .item__galerie{width:var(--plat-vignette);height:var(--plat-vignette);aspect-ratio:1;border-radius:var(--r3);overflow:hidden;align-self:center}
.item--plat .item__galerie .item__img{width:100%;height:100%;border-radius:0}
.item__galerie:focus-visible{outline:3px solid var(--vert);outline-offset:-3px}
.item--plat .item__corps{padding:0;gap:6px;justify-content:center}
/* titre et prix sur une ligne ; quand la carte est etroite (deux colonnes a
   1024, mobile), le prix passe dessous, toujours cale a droite */
.item--plat .item__tete{flex-wrap:wrap;gap:2px var(--e3)}
.item--plat .item__titre{flex:1 1 auto}
.item--plat .item__prix{margin-left:auto}
/* Deux lignes de description au plus : sans cela une carte de plat plus
   bavarde que ses voisines cassait l'alignement de la grille. */
.item--plat .item__texte{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.item--plat > .compteur{align-self:center}
/* compteur ouvert (− / n / +, 168 px) : il passe sous le corps, cale a
   droite, au lieu d'ecraser le titre et les puces dans la 3e colonne */
@media (min-width:641px){
  .item--plat:has(> .compteur > .compteur__v:not([hidden])){grid-template-columns:var(--plat-vignette) minmax(0,1fr)}
  .item--plat:has(> .compteur > .compteur__v:not([hidden])) > .compteur{grid-column:1 / -1;justify-self:end;margin-top:var(--e2)}
}
.item--plat .item__badge{top:10px;left:10px}
/* les puces de categorie ne touchent pas la premiere rangee de cartes */
.pastilles[data-menu] + .items{margin-top:var(--e3)}

/* services : cartes moins hautes, visuel ou repli 220 px, l'icone du
   sous-type (bouclier, restauration, enceinte…) sur ivoire */
.item--service{grid-template-columns:220px minmax(0,1fr)}

/* portfolio : grille de series, vignette 4:3 en haut, hauteurs uniformes */
.items--galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--e4);
  align-items:stretch}
.items--galerie .item{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);min-height:0}
.items--galerie .item__galerie,.items--galerie .item__repli{aspect-ratio:4/3;height:auto}
.items--galerie .item__img{height:100%}
.items--galerie .item__corps{padding:var(--e4) var(--e4) 18px}

/* 768 : image 200 px ; 640 et moins : carte empilee (app.css), vignette
   de plat conservee a 96 px a cote du texte */
@media (max-width:900px) and (min-width:641px){
  .item,.item--service{grid-template-columns:200px minmax(0,1fr)}
  .item--plat{grid-template-columns:var(--plat-vignette) minmax(0,1fr)}
  .item--plat:has(> .compteur){grid-template-columns:var(--plat-vignette) minmax(0,1fr) auto}
}
@media (max-width:640px){
  /* carte empilee (app.css) : la colonne des services suit aussi ; le repli
     sans photo reste une bande courte ; un long titre laisse le prix passer
     dessous, cale a droite */
  .item--service{grid-template-columns:minmax(0,1fr)}
  .item__repli{aspect-ratio:auto;height:120px}
  .item__tete{flex-wrap:wrap;gap:2px var(--e3)}
  .item__titre{flex:1 1 auto}
  .item__prix{margin-left:auto}
  /* plat : vignette 80 px a cote du texte, le compteur sous le corps, a droite */
  .item--plat,.item--plat:has(> .compteur){--plat-vignette:112px;grid-template-columns:var(--plat-vignette) minmax(0,1fr)}
  .item--plat .item__img{width:var(--plat-vignette);height:var(--plat-vignette);aspect-ratio:1;align-self:start}
  .item--plat .item__galerie{width:var(--plat-vignette);height:var(--plat-vignette);aspect-ratio:1;align-self:start}
  .item--plat .item__corps{padding:0}
  .item--plat > .compteur{grid-column:1 / -1;justify-self:end;margin-top:var(--e2)}
  .items--galerie .item__galerie{aspect-ratio:4/3}
}

/* ---- Prix unitaire ≠ total (demande client du 17-18/09/2026) ------------
   Le prix « À partir de » a quitte le haut de l'encadre : il vit dans un
   petit bloc compact IMMEDIATEMENT sous la galerie, cale a droite (sur
   telephone : juste apres la photo, a droite tant que la place le permet),
   fond blanc, filet leger, rayon --r4, sans recouvrir la galerie ni la
   pilule « Voir toutes les photos ». La bande de prix est celle des cartes
   (.carte__prix : montant, devise, unite, ancien prix barre, badge) pour
   qu'une promotion se peigne par la meme regle (Z.peindrePrixPromo). */
.fiche__prix{display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  width:fit-content;max-width:100%;margin:var(--e3) 0 0 auto;padding:10px 14px;
  border:1px solid var(--bord);border-radius:var(--r4);background:var(--surface)}
.fiche__prix-sur{font-size:var(--t2);font-weight:500;color:var(--gris-texte);line-height:1.2}
.fiche__prix .carte__prix{margin:0;justify-content:flex-end;gap:2px 5px;text-align:right}
.fiche__prix .carte__prix b{font-size:var(--t9);line-height:1.1}
.fiche__prix .carte__devise{font-size:var(--t3)}
.fiche__prix .carte__unite{font-size:var(--t2)}
.fiche__prix .carte__ancien{text-align:right;font-size:var(--t2)}
.fiche__prix .carte__promo-badge{margin-left:2px}
.fiche__prix-periode{font-size:var(--t1);color:var(--gris-texte);line-height:1.2}
/* la note de galerie ne sert que de marge : elle suit le bloc, plus la galerie */
.fiche__prix + .fiche__photos-note{margin-top:0}
@media (max-width:360px){.fiche__prix .carte__prix b{font-size:var(--t8)}}

/* L'encadre = parametres → calcul → total : le total domine, les lignes se
   lisent en tableau (chiffres alignes) ; le refus d'une saisie (plus de
   convives que la table n'en accueille) est un message, jamais une couleur seule. */
.encadre__estimation{margin-top:var(--e4)}
.estimation__l{font-size:var(--t3);line-height:1.45}
.estimation__l > span:last-child{white-space:nowrap}
.estimation__t{margin-top:var(--e2);padding-top:var(--e2);font-size:var(--t4)}
.estimation__t > span:last-child{font-size:var(--t7);letter-spacing:-.01em}

/* ---- Disponibilite (lot C, 21/09/2026) ----------------------------------
   Ce que la fiche montre du moteur (fiche.js › disponibilite) : l'etiquette
   de la selection sous les champs (Disponible / Plus que 2 disponibles /
   Complet), l'etat d'une chambre ou d'un vehicule dans sa carte, la note
   d'un champ sans creneau, les tarifs par personne d'un brunch, une date
   fixe qui ne se modifie pas. Jetons seulement ; le bouton refuse par
   aria-disabled et garde son format (app.css) : seule sa peinture change. */
.encadre__dispo{display:flex;align-items:center;gap:var(--e2);margin:var(--e4) 0 0;
  font-size:var(--t3);font-weight:600;line-height:1.35;color:var(--vert)}
.encadre__dispo::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:currentColor}
.encadre__dispo--peu{color:var(--or-texte)}
.encadre__dispo--complet{color:var(--erreur)}
.encadre__bouton[aria-disabled="true"]{background:var(--gris-faible);cursor:not-allowed}
.encadre__bouton[aria-disabled="true"]:hover{background:var(--gris-faible)}
.encadre__note-champ{margin:var(--e1) 0 0;font-size:var(--t1);line-height:1.4;color:var(--erreur)}
.encadre__fixe{flex:1 1 auto;font-size:var(--t4);font-weight:500;color:var(--encre)}
.item__dispo{flex-basis:100%;font-size:var(--t2);font-weight:600;color:var(--or-texte)}
.item__dispo--complet{color:var(--erreur)}
.encadre__tarifs{display:grid;gap:var(--e2)}
.tarif__ligne{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);flex-wrap:wrap}
.tarif__libelle{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:var(--t3);font-weight:600;color:var(--encre)}
.tarif__prix{font-size:var(--t2);font-weight:500;color:var(--gris-texte)}
.encadre__tarifs .compteur__v{width:48px}
.encadre__tarifs-note{margin:var(--e2) 0 0;font-size:var(--t1);color:var(--gris-texte)}