/* Le carnet vivant — habillage de la page publique.
   Feuille SEPAREE et versionnee : elle se met en cache chez le visiteur. Sur un
   site deja a 5,1 Mo, un <style> en ligne re-telecharge a chaque page est une
   depense qu'on ne voit pas. Toutes les couleurs passent par des variables :
   le salon change de teinte en une ligne, sans toucher au reste. */
.fgc{--fgc-encre:#141F2A;--fgc-fond:#FFF;--fgc-fond2:#F6F8FA;--fgc-trait:#D2DAE1;
  --fgc-gris:#7A8B99;--fgc-gris2:#495A69;--fgc-or:#9E6C1F;--fgc-or-voile:#F2E7D3;
  --fgc-libre:#12704C;--fgc-libre-voile:#DCEFE6;--fgc-rouge:#8E362D;--fgc-rouge-voile:#F5E2DF;
  --fgc-ambre:#7D611A;--fgc-ambre-voile:#F4EBD4;--fgc-r:14px;
  /* ⚠️ LE BLOC EST UN PANNEAU, PAS UN TEXTE POSE SUR LA PAGE. Mesure du 02/09 en production :
     le site est noir, et ces couleurs sont pensees pour un fond clair — l'accroche sortait en
     gris fonce sur noir, quasi illisible, et le bloc flottait sans limite avec le texte du
     site colle dessous. Un panneau clair regle le contraste, la separation et l'espacement
     d'un seul geste, et il fonctionne quel que soit le theme du site autour. */
  max-width:720px;margin:0 auto 56px;color:var(--fgc-encre);
  background:var(--fgc-fond2);border:1px solid var(--fgc-trait);border-radius:18px;
  padding:26px 24px;box-shadow:0 2px 6px rgba(0,0,0,.18),0 24px 48px -28px rgba(0,0,0,.5);
  font:400 16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.fgc *{box-sizing:border-box}
.fgc :focus-visible{outline:2px solid var(--fgc-or);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){.fgc *{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* Le rappel de l'accueil est plus compact que la page complete, mais c'est le MEME panneau :
   deux habillages differents pour le meme objet finiraient par diverger. */
.fgc-compact{max-width:640px;padding:22px 22px 20px}
.fgc-tete{display:flex;align-items:center;gap:10px;margin-bottom:14px}

/* ⚠️ LE BANDEAU DE TEST. Rouge franc, en tete, avant tout le reste — pas en pied de bloc ou
   personne ne descend. Il dit ce qu'il faut faire A LA PLACE : un avertissement qui ferme une
   porte sans en ouvrir une autre fait perdre le client au lieu de le proteger. */
.fgc-test{background:#FDECEA;border:1px solid #E5A199;border-left:4px solid #C0392B;
  color:#8E241A;border-radius:10px;padding:12px 14px;margin-bottom:16px;font-size:13.5px;
  line-height:1.5}
.fgc-test b{color:#A32B1F;font-weight:600}
.fgc-test a{color:#8E241A;font-weight:600}

/* LA SECONDE PORTE : discrete mais toujours visible. Un bloc qui ne montre qu'une heure
   laisse croire que c'est la seule, et quelqu'un qui n'est pas libre a 11:15 renonce. */
.fgc-autre{display:block;margin-top:11px;padding:11px 8px;min-height:44px;text-align:center;
  border-radius:10px;border:1px dashed var(--fgc-trait);color:var(--fgc-gris2);
  font:500 13.5px inherit;text-decoration:none;transition:.15s}
.fgc-autre:hover{border-color:var(--fgc-or);border-style:solid;color:var(--fgc-or);
  background:var(--fgc-or-voile)}


/* ⚠️ LE THEME DU SITE GAGNE SI ON NE DIT RIEN. Mesure du 02/09 en production : le titre
   « Prendre rendez-vous » sortait en BLANC sur notre panneau clair — invisible. Le theme
   blaxcut impose sa couleur a tous les h2, et un module pose sur un site qu'on ne maitrise
   pas doit affirmer ses couleurs de texte au lieu d'esperer en heriter de bonnes.
   Meme raison pour la casse et la graisse : le theme rend ses titres en majuscules
   condensees, ce qui ecrase un titre de bloc. */
.fgc h2,.fgc h3,.fgc p,.fgc span,.fgc small,.fgc label,.fgc div{color:var(--fgc-encre)}
.fgc-tete h2{margin:0;flex:1;font-size:23px;font-weight:700;letter-spacing:-.02em;
  color:var(--fgc-encre)!important;text-transform:none;font-family:inherit;line-height:1.2;
  padding:0;border:0;background:none}
.fgc-direct{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--fgc-libre);
  font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.fgc-pastille{width:7px;height:7px;border-radius:50%;background:var(--fgc-libre);position:relative}
.fgc-pastille::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid var(--fgc-libre);opacity:0;animation:fgc-onde 2.4s ease-out infinite}
@keyframes fgc-onde{0%{transform:scale(.55);opacity:.85}100%{transform:scale(1.5);opacity:0}}

.fgc-lbl{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--fgc-gris);
  font-weight:600;margin:16px 0 8px}
/* ⚠️ LE DEBORDEMENT VU EN PRODUCTION (capture du 02/09) : « Dégradé n… » coupe a droite sur
   grand ecran. La rangee defile, mais le voile de fin de course se lit comme une COUPURE quand
   rien n'indique qu'on peut faire glisser. Sur un ecran qui a la place, on ne fait donc plus
   defiler du tout : les prestations passent a la ligne. Le defilement reste sur telephone, ou
   il est attendu et ou le doigt le decouvre tout seul. */
/* ⚠️ EN GRILLE, PAS EN RANGEE SOUPLE. Mesure du 02/09 : « Barbe à l'ancienne avec soin » est
   bien plus large que les autres, elle cassait la rangee au bout de trois vignettes et
   laissait un trou a droite — puis « Massage de la tête » tombait seule sur sa ligne. Une
   grille donne a toutes la meme largeur : elles se rangent d'elles-memes, sans trou ni
   orpheline, quel que soit le nombre de prestations qu'Abdel ajoutera. */
@media (min-width:640px){
  .fgc-rang{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
    gap:8px;overflow-x:visible;
    -webkit-mask-image:none!important;mask-image:none!important}
  .fgc-rang .fgc-chip,.fgc-rang .fgc-jour{flex:initial;width:auto}
}
.fgc-rang{display:flex;gap:7px;overflow-x:auto;padding-bottom:5px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
.fgc-rang::-webkit-scrollbar{display:none}
.fgc-chip{flex:none;border:1px solid var(--fgc-trait);background:var(--fgc-fond);color:inherit;
  border-radius:11px;padding:9px 12px;min-height:46px;cursor:pointer;text-align:left;
  font:500 14px/1.25 inherit;transition:border-color .15s,background .15s}
.fgc-chip small{display:block;color:var(--fgc-gris);font-size:12px;font-weight:500;margin-top:2px}
.fgc-chip[aria-pressed="true"]{border-color:var(--fgc-or);background:var(--fgc-or-voile);
  box-shadow:inset 0 0 0 1px var(--fgc-or)}
.fgc-chip[aria-pressed="true"] small{color:var(--fgc-or)}

.fgc-jour{flex:none;width:62px;min-height:70px;border:1px solid var(--fgc-trait);background:var(--fgc-fond);
  border-radius:11px;padding:8px 4px;cursor:pointer;text-align:center;transition:.15s}
.fgc-jour span{display:block}
.fgc-jour .n{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--fgc-gris);font-weight:600}
.fgc-jour .c{font-weight:700;font-size:20px;line-height:1.25;font-variant-numeric:tabular-nums}
.fgc-jour .d{font-size:10.5px;font-weight:600;margin-top:1px;color:var(--fgc-libre)}
.fgc-jour.plein .d{color:var(--fgc-rouge)}
.fgc-jour.ferme{opacity:.5}.fgc-jour.ferme .d{color:var(--fgc-gris)}
.fgc-jour[aria-pressed="true"]{border-color:var(--fgc-encre);background:var(--fgc-fond2);
  box-shadow:inset 0 0 0 1px var(--fgc-encre)}

.fgc-prochain{border:1px solid var(--fgc-trait);border-radius:var(--fgc-r);background:var(--fgc-fond);
  padding:15px;box-shadow:0 1px 2px rgba(20,31,42,.06),0 8px 24px -14px rgba(20,31,42,.2)}
.fgc-prochain .l{font-size:11.5px;color:var(--fgc-gris);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.fgc-prochain .h{font-weight:700;font-size:30px;letter-spacing:-.025em;margin:4px 0 2px;line-height:1.1}
.fgc-prochain .d{font-size:13.5px;color:var(--fgc-gris2)}
.fgc-cta{display:block;text-align:center;line-height:48px;text-decoration:none;
  margin-top:12px;width:100%;min-height:48px;border:0;border-radius:11px;
  background:var(--fgc-encre);color:#FFF;font:600 15.5px inherit;cursor:pointer;transition:filter .15s,transform .12s}
.fgc-cta:hover{filter:brightness(1.18)}.fgc-cta:active{transform:scale(.985)}
.fgc-cta[disabled]{opacity:.42;cursor:not-allowed}

.fgc-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:12px}
.fgc-h{min-height:48px;border:1px solid var(--fgc-trait);background:var(--fgc-fond);color:inherit;
  border-radius:10px;cursor:pointer;font:600 15px ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;transition:.15s}
.fgc-h:hover{border-color:var(--fgc-or);background:var(--fgc-or-voile)}
.fgc-h:active{transform:scale(.96)}
.fgc-h.pris{background:repeating-linear-gradient(135deg,var(--fgc-fond2) 0 5px,#FFF 5px 10px);
  color:var(--fgc-gris);cursor:not-allowed;border-style:dashed;font-weight:500}
.fgc-h.pris:hover{border-color:var(--fgc-trait)}
.fgc-h.neuf{animation:fgc-neuf .55s ease-out}
@keyframes fgc-neuf{from{opacity:0;transform:translateY(-5px) scale(.94);background:var(--fgc-libre-voile)}to{opacity:1}}

.fgc-intro{margin:0 0 4px;font-size:14.5px;color:var(--fgc-gris2);line-height:1.5}
.fgc-intro::first-line{font-weight:500}
/* Le plafond du comptoir n'est PAS un « complet » : il se distingue a l'oeil autant que
   dans les mots — vert d'invitation, pas rouge de porte fermee. */
.fgc-comptoir{border-style:solid;border-color:var(--fgc-libre);background:var(--fgc-libre-voile);
  color:var(--fgc-libre);font-weight:500}
.fgc-vide{padding:24px 16px;text-align:center;color:var(--fgc-gris2);font-size:14.5px;
  border:1px dashed var(--fgc-trait);border-radius:var(--fgc-r);margin-top:12px}
.fgc-msg{display:flex;gap:9px;align-items:flex-start;padding:12px;border-radius:11px;font-size:13.5px;
  margin-bottom:14px;line-height:1.45}
.fgc-msg i{flex:none;width:8px;height:8px;border-radius:50%;margin-top:6px;font-style:normal}
.fgc-msg.info{background:var(--fgc-ambre-voile);color:var(--fgc-ambre)}.fgc-msg.info i{background:currentColor}
.fgc-msg.stop{background:var(--fgc-rouge-voile);color:var(--fgc-rouge)}.fgc-msg.stop i{background:currentColor}
.fgc-msg.ok{background:var(--fgc-libre-voile);color:var(--fgc-libre)}.fgc-msg.ok i{background:currentColor}

.fgc-forme{margin-top:16px;border:1px solid var(--fgc-trait);border-radius:var(--fgc-r);
  background:var(--fgc-fond2);padding:16px}
.fgc-forme h3{margin:0 0 3px;font-size:19px;font-weight:700;letter-spacing:-.015em}
.fgc-forme .s{font-size:13.5px;color:var(--fgc-gris2);margin-bottom:14px}
.fgc-recap{display:flex;justify-content:space-between;gap:10px;padding:12px;background:var(--fgc-fond);
  border:1px solid var(--fgc-trait);border-radius:10px;margin-bottom:14px;font-size:14px}
.fgc-recap b{font-family:ui-monospace,Menlo,monospace}
.fgc-champ{margin-bottom:11px}
.fgc-champ label em{font-style:normal;color:var(--fgc-rouge);letter-spacing:0;text-transform:none;
  font-size:11px;margin-left:5px}
.fgc-champ label{display:block;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--fgc-gris);font-weight:600;margin-bottom:5px}
.fgc-champ input{width:100%;min-height:48px;border:1px solid var(--fgc-trait);border-radius:10px;
  background:var(--fgc-fond);color:inherit;padding:0 13px;font:400 16px inherit}
.fgc-champ input:focus{border-color:var(--fgc-or);outline:none;box-shadow:0 0 0 3px var(--fgc-or-voile)}
.fgc-lien{width:100%;min-height:44px;border:0;background:none;color:var(--fgc-gris);
  font:500 13.5px inherit;cursor:pointer;margin-top:8px}
.fgc-coche{width:54px;height:54px;border-radius:50%;background:var(--fgc-libre-voile);color:var(--fgc-libre);
  display:flex;align-items:center;justify-content:center;font-size:27px;margin:0 auto 12px}

/* ⚠️ CES DEUX REGLES SONT EN FIN DE FEUILLE, ET CE N'EST PAS UN RANGEMENT.
   Elles portent la meme specificite que .fgc-cta (une seule classe) : c'est donc l'ORDRE
   qui tranche, et ecrites plus haut elles perdaient en silence. Mesure a l'appui — la page
   rendue montrait les deux boutons en gris sombre, alors que le CSS avait l'air juste.
   Un bouton qui ouvre une AUTRE application doit se reconnaitre avant d'etre lu : le vert
   de WhatsApp fait la moitie du travail a lui seul. */
.fgc-ag{background:var(--fgc-or);color:#FFF}
.fgc-ag:hover{background:#8A5C18}
.fgc-wa{background:#1EA952;color:#FFF}
.fgc-wa:hover{background:#188F45}
.fgc-note{margin:9px 0 2px;font-size:12.5px;color:var(--fgc-gris);text-align:center}