/* Entonnoir de réservation : un sélecteur de convives, trois destinations.
   Feuille de base à copier puis habiller aux couleurs du site. Elle s'appuie sur les jetons de la page :
   --vert (couleur principale), --vert-doux (survol), --creme (fond clair), --sable (fond secondaire),
   --citron (accent clair), --orange (accent fort, palier privatisation), --ligne (bordures), --gris (texte doux),
   --display (police de titre), --ease, --r (rayon). .eyebrow et .btn viennent de la page.
   .logo-ent affiche sur la photo de la modale le logo donné par --logo-ent, déclarée dans cette feuille
   (:root{--logo-ent:url(logo-creme.png)}, chemin lu depuis assets/) : une URL relative dans une variable déclarée
   ailleurs ne se résout pas de la même façon selon les navigateurs. Le filtre le blanchit : adapte-le au logo.
   Sans --logo-ent, rien ne s'affiche. */

:root{--logo-ent:url(logo-coucoo-cafe-640.png)}

/* sélecteur */
.sel{display:flex;flex-direction:column;gap:18px;color:var(--vert)}
.sel-compteur{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sel-pm{width:56px;height:56px;border-radius:6px;border:1.5px solid var(--encre);display:grid;place-items:center;font-size:1.6rem;line-height:1;color:var(--vert);transition:background .2s,border-color .2s,color .2s,transform .15s;flex:none;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.sel-pm:active{transform:scale(.92)}
.sel-pm:disabled{opacity:.3;pointer-events:none}
.sel-nb{display:flex;flex-direction:column;align-items:center;min-width:0}
.sel-nb input{width:3.2ch;border:0;background:none;text-align:center;font-family:var(--texte);font-weight:400;font-size:clamp(3.8rem,8vw,5.2rem);line-height:.95;color:var(--vert);padding:0;-moz-appearance:textfield;appearance:textfield;caret-color:var(--orange)}
.sel-nb input::-webkit-outer-spin-button,.sel-nb input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sel-nb input:focus{outline:none}
.sel-nb span{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);margin-top:4px;margin-right:-.2em}
.sel-nb.saute input{animation:saute .32s var(--ease)}
@keyframes saute{40%{transform:scale(1.12)}}

/* pastilles rapides : huit sur une ligne, sinon deux lignes de quatre (requête de conteneur plus bas) ; cibles de 44 px au moins */
.sel--modale{container-type:inline-size}
.sel-rapides{display:flex;gap:6px;justify-content:center}
.sel-rapides button{min-width:46px;min-height:44px;padding:8px 12px;border-radius:999px;border:1.5px solid var(--ligne);font-weight:700;font-size:.86rem;transition:all .2s}
.sel-rapides button[aria-pressed="true"]{background:var(--vert);border-color:var(--vert);color:var(--creme)}

.sel-paliers{list-style:none;display:grid;grid-template-columns:9fr 31fr 14fr;gap:4px}
.sel-paliers li{display:flex;flex-direction:column;gap:7px;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.4;transition:opacity .3s;cursor:pointer;min-width:0}
.sel-paliers li::before{content:"";height:5px;border-radius:5px;background:var(--ligne);transition:background .3s}
.sel-paliers li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sel-paliers li.actif{opacity:1}
.sel-paliers li.actif::before{background:var(--vert)}
.sel-paliers li[data-p="privatisation"].actif::before{background:var(--orange)}
.sel-paliers li[data-p="groupe"].actif::before{background:linear-gradient(90deg,var(--vert),var(--vert-doux))}

.sel-indice{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 14px;align-items:start;background:var(--sable);border-radius:16px;padding:16px 18px;min-height:96px}
.sel-indice b{font-family:var(--display);font-weight:400;font-size:1.3rem;line-height:1.1}
.sel-indice p{font-size:.88rem;color:var(--gris);line-height:1.5}
.sel-indice.change{animation:indice .45s var(--ease)}
@keyframes indice{from{opacity:.2;transform:translateY(6px)}}

.sel-go{width:100%;justify-content:center;padding:.95em 1.3em;font-size:1.17rem;font-weight:700;height:auto;white-space:normal;text-wrap:balance;text-align:center;background:var(--encre);color:#fff;box-shadow:0 14px 26px -14px rgba(0,0,0,.5)}
.sel-go svg{flex:none}

/* variante hero : une ligne, couverts + bouton ; le bouton passe sur deux lignes plutôt que de déborder */
.sel--hero{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:center}
.sel--hero .sel-compteur{justify-content:center;gap:20px}
.sel--hero .sel-pm{width:44px;height:44px;font-size:1.3rem}
.sel--hero .sel-nb{padding:0 2px}
.sel--hero .sel-nb input{font-size:2.5rem;width:3.2ch;line-height:1}
.sel--hero .sel-nb span{margin:2px -.14em 0 0;letter-spacing:.14em;font-size:.62rem}
.sel--hero .sel-go{min-width:0}
.sel--hero .sel-indice{display:none}
.sel-astuce{grid-column:1 / -1;font-size:.86rem;font-style:italic;color:var(--gris);text-align:center}

/* hero sans valeur choisie : pas de flèche, et un clic sur le bouton désigne le compteur, mouvement réduit compris */
.sel-go[data-p="vide"] svg{display:none}
.sel--hero .sel-nb input::placeholder{color:var(--encre);opacity:.4}
.sel--hero.a-choisir .sel-compteur{outline:2px solid var(--cuivre-fonce);outline-offset:5px;border-radius:6px}
.sel--hero.a-choisir .sel-nb span,.sel--hero.a-choisir .sel-astuce{color:var(--cuivre-texte);font-weight:700}
@media (prefers-reduced-motion:no-preference){
  .sel--hero.a-choisir .sel-compteur{animation:a-choisir .42s var(--ease)}
}
@keyframes a-choisir{25%{transform:translateX(-5px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}

/* variante carte (section groupes) */
.sel--carte{background:var(--creme);border-radius:var(--r);padding:26px;box-shadow:0 40px 70px -30px rgba(0,0,0,.5)}
.sel--carte .sel-titre{font-family:var(--display);font-size:1.6rem;line-height:1.1}
.sel--carte .sel-nb input{font-size:4.4rem}

/* modale */
.ent{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;pointer-events:none}
.ent-voile{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .45s var(--ease)}
.ent-boite{position:relative;width:min(940px,100%);max-height:calc(100dvh - 48px);background:var(--creme);border-radius:28px;overflow:hidden;box-shadow:0 60px 120px -40px rgba(0,0,0,.7);opacity:0;transform:translateY(24px) scale(.97);transition:opacity .45s var(--ease),transform .55s var(--ease),width .5s var(--ease)}
.ent.ouverte{pointer-events:auto}
.ent-boite:focus{outline:none}
.ent.ouverte .ent-voile{opacity:1}
.ent.ouverte .ent-boite{opacity:1;transform:none}
.ent-fermer{position:absolute;top:16px;right:16px;z-index:3;width:44px;height:44px;border-radius:50%;background:var(--creme);border:1.5px solid var(--ligne);display:grid;place-items:center;color:var(--vert);transition:background .2s,transform .3s var(--ease)}
.ent-fermer svg{width:18px;height:18px}

.ent-choix{display:grid;grid-template-columns:.92fr 1.08fr;min-height:600px}
.ent-photo{position:relative;overflow:hidden;background:var(--vert);color:var(--creme)}
.ent-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .7s var(--ease),transform 1.4s var(--ease)}
.ent-photo img.vue{opacity:1;transform:none}
/* ombre du haut : le logo blanc reste net quelle que soit la photo du palier */
.ent-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,10,6,.72) 0,rgba(14,10,6,.5) 15%,rgba(14,10,6,.08) 32%,rgba(0,0,0,.1) 45%,rgba(0,0,0,.8))}
.ent-photo .legende{position:absolute;left:28px;right:28px;bottom:28px;z-index:1}
.ent-photo .legende small{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;background:var(--citron);color:var(--vert);padding:6px 11px;border-radius:999px;margin-bottom:14px}
.ent-photo .legende p{font-family:var(--display);font-size:1.9rem;line-height:1.08}
.ent-photo .logo-ent{position:absolute;top:24px;left:26px;z-index:1;width:116px;height:58px;background:var(--logo-ent,none) left center/contain no-repeat;filter:brightness(0) invert(97%) sepia(9%) saturate(380%) hue-rotate(1deg)}
.ent-droite{padding:44px 44px 34px;display:flex;flex-direction:column;justify-content:center;gap:6px;overflow-y:auto}
.ent-droite .eyebrow{color:var(--orange)}
.ent-droite h2{font-family:var(--display);font-weight:400;font-size:clamp(2rem,3.4vw,2.7rem);line-height:1;color:var(--vert);margin:8px 0 18px}
.ent-droite h2 em{color:var(--vert)}
.ent-preuve{display:flex;justify-content:center;gap:16px;font-size:.76rem;color:var(--gris);margin-top:4px}
.ent-preuve span{color:var(--orange)}

/* vue outil */
.ent-outil{display:none;flex-direction:column;height:min(860px,calc(100dvh - 48px))}
.ent.outil .ent-choix{display:none}
.ent.outil .ent-outil{display:flex}
.ent.outil .ent-boite{width:min(var(--largeur-outil,760px),100%)}
.ent.outil .ent-fermer{top:12px;right:12px;width:44px;height:44px}
.ent-barre{display:flex;align-items:center;gap:14px;padding:12px 64px 12px 14px;border-bottom:1px solid var(--ligne);background:var(--creme);color:var(--vert);flex:none}
.ent-retour[hidden]{display:none}
.ent-retour{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.84rem;padding:8px 12px 8px 8px;border-radius:999px;transition:background .2s;white-space:nowrap}
.ent-retour svg{width:16px;height:16px}
.ent-barre .titre{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.ent-barre .titre b{font-family:var(--display);font-weight:400;font-size:1.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ent-barre .titre span{font-size:.76rem;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ent-externe{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;white-space:nowrap;padding:8px 12px;border-radius:999px;border:1.5px solid var(--ligne);transition:background .2s}
.ent-externe[hidden]{display:none}
.ent-externe svg{width:14px;height:14px}
.ent-cadre{position:relative;flex:1;background:var(--encre)}
.ent-cadre iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .4s}
.ent-cadre.pret iframe{opacity:1}
.ent-charge{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:14px;color:var(--gris);font-size:.86rem}
.ent-charge i{width:34px;height:34px;border-radius:50%;border:3px solid var(--ligne);border-top-color:var(--vert);animation:ent-tourne .9s linear infinite}
@keyframes ent-tourne{to{transform:rotate(360deg)}}
.ent-cadre.pret .ent-charge{display:none}

/* vue outil sans iframe : invitation à ouvrir un onglet, ou formulaire de demande envoyé par e-mail */
.ent-panneau{display:none;position:absolute;inset:0;overflow-y:auto;background:var(--creme);color:var(--vert)}
.ent-cadre[data-mode="onglet"] .ent-panneau,.ent-cadre[data-mode="formulaire"] .ent-panneau{display:block}
.ent-cadre[data-mode="onglet"] iframe,.ent-cadre[data-mode="formulaire"] iframe,.ent-cadre[data-mode="onglet"] .ent-charge,.ent-cadre[data-mode="formulaire"] .ent-charge{display:none}
.ent-onglet{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:40px 32px}
.ent-onglet b{font-family:var(--display);font-weight:400;font-size:1.7rem;line-height:1.1}
.ent-onglet p{max-width:38ch;color:var(--gris);line-height:1.55}
.ent-onglet .sel-go{width:auto;margin-top:8px}
.ent-form{display:flex;flex-direction:column;gap:16px;padding:26px 28px 30px}
.ent-form-intro{color:var(--gris);line-height:1.5}
.ent-form-grille{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.ent-form-grille label{display:flex;flex-direction:column;gap:6px;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ent-form-grille .large{grid-column:1 / -1}
.ent-form-grille input,.ent-form-grille select,.ent-form-grille textarea{font:inherit;font-size:.95rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--vert);background:#fff;border:1.5px solid var(--ligne);border-radius:12px;padding:12px 14px;transition:border-color .2s}
.ent-form-grille :is(input,select,textarea):focus{outline:none;border-color:var(--vert)}
.ent-form-grille [aria-invalid="true"]{border-color:var(--orange)}
fieldset.ent-form-grille{border:0;margin:0;padding:0;min-width:0}
.ent-form-grille[hidden]{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ent-form-tete{display:flex;flex-direction:column;gap:14px}
.ent-form-etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ent-form-etapes li{display:flex;align-items:center;gap:8px;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding-top:10px;border-top:4px solid var(--ligne);opacity:.45;transition:opacity .3s,border-color .3s}
.ent-form-etapes li.actif{opacity:1;border-color:var(--orange)}
.ent-form-etapes i{font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--ligne);font-size:.72rem}
.ent-form-etapes li.actif i{background:var(--orange);color:var(--creme)}
.ent-form-choix{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ent-form-choix>span{flex-basis:100%}
.ent-form-choix label{display:inline-flex;flex-direction:row;align-items:center;gap:8px;font-size:.95rem;font-weight:400;letter-spacing:0;text-transform:none;cursor:pointer}
.ent-form-choix input{accent-color:var(--orange);width:18px;height:18px}
.ent-form-actions{display:flex;gap:10px;align-items:center}
.ent-form-actions .sel-go{flex:1}
.ent-form-prec{font-weight:700;font-size:.9rem;padding:1em 1.3em;border-radius:999px;border:1.5px solid var(--ligne);transition:background .2s}
.ent-recap{display:grid;gap:8px;width:min(100%,420px);margin:6px 0;text-align:left}
.ent-recap div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:10px 14px;background:var(--sable);border-radius:12px;font-size:.9rem}
.ent-recap dt{font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7;padding-top:2px}
.ent-recap dd{margin:0}
.ent-form-erreur{color:var(--orange);font-size:.86rem;font-weight:700}
.ent-form-note{font-size:.78rem;color:var(--gris);text-align:center}
@media (max-width:760px){
  .ent-form{padding:20px 18px 26px}
  .ent-form-grille{grid-template-columns:1fr}
}

@media (max-width:760px){
  .ent{padding:0;place-items:end stretch}
  /* la feuille défile : sur un écran bas (iPhone avec les barres de Safari), le bouton doit rester atteignable */
  .ent-boite{width:100%;max-height:94dvh;border-radius:26px 26px 0 0;transform:translateY(100%);overflow-y:auto;overscroll-behavior:contain}
  .ent-fermer{position:sticky;float:right;margin:12px 12px -56px 0}
  .ent.ouverte .ent-boite{transform:none}
  .ent-choix{grid-template-columns:1fr;min-height:0}
  .ent-photo{height:150px}
  .ent-photo .legende{left:20px;right:70px;bottom:16px}
  .ent-photo .legende small{margin-bottom:8px}
  .ent-photo .legende p{font-size:1.3rem}
  .ent-photo .logo-ent{display:none}
  .ent-droite{padding:22px 18px 22px;gap:4px}
  .ent-droite h2{margin:4px 0 10px}
  .sel{gap:14px}
  .sel-pm{width:50px;height:50px}
  .sel-rapides{gap:4px}
  .sel-rapides button{flex:1 1 0;padding:9px 0;font-size:.8rem}
  .ent.outil .ent-boite{width:100%}
  .ent-outil{height:94dvh}
  .sel--hero{grid-template-columns:minmax(0,1fr);padding:12px}
  .sel--hero .sel-compteur{justify-content:space-between}
}
/* huit pastilles de 46 px et leurs écarts demandent un peu plus de 410 px : sous 420 px de conteneur (largeur de la
   modale à 940 px), deux lignes de quatre, jamais « 41+ » seul ; à ajuster si l'habillage change la taille des pastilles */
@container (max-width:419px){
  .sel-rapides{display:grid;grid-template-columns:repeat(4,minmax(44px,1fr))}
}

@media (prefers-reduced-motion:reduce){
  .ent-boite,.ent-voile,.ent-photo img{transition:none}
}
@media (max-width:760px) and (max-height:760px){
  .ent-photo{height:96px}
  .ent-droite{padding:16px 16px 18px}
  .ent-droite h2{font-size:1.7rem;margin:2px 0 6px}
  .sel{gap:10px}
  .sel-nb input{font-size:3.4rem}
  .sel-indice{min-height:0;padding:12px 14px}
}
/* survol réservé aux appareils à pointeur : sur écran tactile, l'état survolé resterait affiché après le toucher */
@media (hover:hover){
  .sel-pm:hover{background:var(--vert);border-color:var(--vert);color:var(--creme)}
  .sel-rapides button:hover{border-color:var(--vert)}
  .sel-go:hover{background:var(--cuivre-fonce)}
  .ent-fermer:hover{background:var(--sable);transform:rotate(90deg)}
  .ent-retour:hover{background:var(--sable)}
  .ent-externe:hover{background:var(--sable)}
  .ent-form-prec:hover{background:var(--sable)}
}