/* ═══ Nouvelle charte des écrans de réservation et des formulaires (demande d'Alex, 12/10/2026) ═══
   Les COMPOSANTS de l'espace élève v2 de l'Académie (BLMHA-academie, app/login « cnx-* »,
   components/family/styles.ts) posés sur la palette Riviera 76 du site, qui ne bouge pas :
   fond sable, crème des cartes, rayons du site, dégradé des CTA, mauve Académie.
     • carte « en relief » : filet sable, liseré de lumière en haut, biseau en bas, rebord chaud ;
     • champ crème #FBF4E6 au filet sable, Outfit 16 px, focus rouille avec un halo ;
     • bouton plein = le CTA du site (dégradé + relief) ;
     • pastille #F4E7D3, icône rouille Solar Bold Duotone (masque CSS : le duotone est gardé).
   Aucun texte changé, aucun bloc déplacé.

   PÉRIMÈTRE — seuls les écrans liés depuis le site (relevé PROD du 12/10/2026). Cette feuille
   n'est chargée QUE par les quatre /reserver/<prestation>/ et la page canonique de l'atelier
   (le cadre de l'assistant de /reserver/ est réglé dans son style en ligne). Pourquoi une feuille à part et pas site.css, ni le <style> du bloc des dates :
   le bloc « dates + alerte » est RECOPIÉ par tools/gen-rdv.mjs dans /atelier/ et lu au build par
   le funnel go…/atelier-sunkissed-lyon/ — deux pages qui ne sont liées nulle part sur le site.
   Ici, elles ne bougent pas. Les étendre un jour = ajouter le <link> à leur gabarit.
   Ne touche pas à l'iframe Simplify (/reserver/). Le module Planity des quatre pages prestation
   n'est réglé qu'en largeur, en description de catégorie et en vide du bas (bloc « Module Planity »). */

:root{
  --fx-filet:rgba(201,164,122,.55);
  --fx-relief:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -3px 0 rgba(201,164,122,.28),
    0 6px 0 -3px rgba(201,164,122,.38), 0 16px 28px -18px rgba(42,30,26,.5);
  --fx-champ:#FBF4E6;
  --fx-pastille:#F4E7D3;
  --fx-anneau:0 0 0 3px rgba(196,87,46,.16);
}

/* ── /reserver/<prestation>/ : la carte qui porte le module Planity ─────────────────────────── */
/* Toute la largeur du contenu (1 116 px à 1 440, celle du .wrap), et non plus 860 px : le module
   doit avoir de la place pour que ses lignes ne s'empilent pas (demande d'Alex, 12/10/2026). */
.resa-carte{
  margin:0 auto; background:#FFF6E8;
  border:1px solid var(--fx-filet); border-radius:30px;
  padding:clamp(14px,1.8vw,24px);
  box-shadow:var(--fx-relief);
}
/* Téléphone : la carte ne garde que 10 px de chaque côté de l'écran (le .wrap en laisse 16 à
   24, voir site.css « ESPACEMENTS MOBILE » : même clamp, retranché ici). */
@media (max-width:560px){
  .resa-carte{margin-left:calc(10px - clamp(16px,5vw,24px)); margin-right:calc(10px - clamp(16px,5vw,24px))}
}

/* ── Module Planity (les quatre /reserver/<prestation>/) ──────────────────────────────────────
   Le widget est monté DANS .booking : il garde la classe et remplace l'id (#booking → #planity),
   d'où le scope .resa-carte .booking (spécificité 0,3,0 : devant les règles de Planity, sans
   !important). Classes de CSS modules hachées (« service_set-module_card-TuyMd ») : on vise le
   PRÉFIXE, jamais le suffixe. Si Planity renomme ses modules, ces règles cessent de
   s'appliquer et le module revient à son rendu d'origine : l'échec est visible, jamais cassant.
   Aucune option du widget ne masque la description (relevé du bundle app.latest.js, 12/10/2026 :
   key, primaryColor, container, options = serviceSetsWhitelist, servicesWhitelist,
   servicesNotCollapsed, headerWidth, titleClassName, callbacks de redirection) — d'où la CSS.

   1. Plus de second cadre crème autour du module : la carte en relief suffit. */
.resa-carte .booking{padding:0; border:0; border-radius:0; background:transparent; overflow:visible}
/* Planity se croit seul dans la page : sa racine plafonne à 976 px (centrée) et fait au moins la
   hauteur de l'écran (min-height:100vh), d'où un grand vide en bas de la carte. On lève les deux,
   comme le fait l'assistant Simplify de /reserver/ ([class*="planityWidget"] > div). Les autres
   enfants directs (galeries, modale : position fixe) n'ont ni l'un ni l'autre : sans effet. */
.resa-carte .booking .planityWidget > div{max-width:none; min-height:0}
/* 2. La description de la catégorie (le long texte sous « 🫧 Soins Profonds ») : Planity l'écrit
   deux fois, une version ordinateur et une version téléphone. Les deux sont masquées. Restent le
   titre de la catégorie, et pour chaque prestation : nom, accroche + « Plus de détails », durée,
   prix, bouton « Choisir ». Même choix que l'accès direct de l'assistant Simplify. */
.resa-carte .booking [class*="service_set-module_description"],
.resa-carte .booking [class*="service_set-module_mobileDescription"]{display:none}
/* 3. Ordinateur et tablette (≥ 768 px, le seuil de Planity) : la liste des prestations est un
   encadré. Planity le dessine avec SES variables (border:1px solid var(--grey-200), rayon
   var(--border-radius-large), ombre var(--shadow-regular)) et lui pose en ligne une transition
   de 600 ms sur TOUTES les propriétés. Au moindre recalcul du rendu (capture, redimensionnement),
   l'encadré repart de l'état sans règle — filet sur currentColor, le brun du texte, coins droits,
   marge intérieure nulle (texte à 4 px du filet) — et la transition étire cet état sur plus d'une
   demi-seconde (relevé Playwright PROD, 13/10/2026, balayage-airtouch à 1 280).
   L'encadré ne dépend donc plus de Planity : filet sable clair de la charte, coins arrondis,
   marge intérieure de 24 px (celle de la carte qui l'entoure à partir de 1 280 px), aucune
   transition (Planity n'anime l'encadré qu'au téléphone, par grid-template-rows). Pas moins de
   24 px : chaque ligne déborde de 12 px de chaque côté (marges négatives de Planity) pour son
   survol. */
@media (min-width:768px){
  .resa-carte .booking [class*="service_set-module_card-"]{
    padding-left:24px; padding-right:24px;
    border:1px solid rgba(201,164,122,.42); border-radius:18px;
    box-shadow:0 6px 16px -12px rgba(58,34,24,.22);
    transition-property:none;
  }
}
/* 4. Téléphone (< 768 px) : Planity pose chaque catégorie sur un pavé blanc à ombre qui sort de
   16 px de chaque côté (marges négatives de la « gouttière »). Dans la carte, c'était un troisième
   cadre et 32 px perdus : le pavé se fond dans la carte et prend toute sa largeur. Les filets
   entre prestations restent. */
@media (max-width:767px){
  .resa-carte .booking [class*="service_set-module_businessServices"]{
    margin-left:0; margin-right:0; width:auto; padding-left:0; padding-right:0;
    background:transparent; border:0; box-shadow:none;
  }
}
/* 5. Plus de vide sous la dernière prestation (≈ 150 px, demande d'Alex du 12/10/2026). Relevé
   Playwright sur la PROD, trois causes cumulées :
   a) Planity clôt sa colonne d'étapes par une cale VIDE de 120 px (150 px ≥ 1 080 px), classe
      emotion hachée (« css-23e715 ») : on la vise par sa place — dernier frère, vide, de la liste
      des prestations. Elle reste vide à chaque étape. Le calendrier ouvert par « Choisir » se monte
      dans un AUTRE frère (le premier), qui n'est alors plus vide : il n'est jamais masqué.
   b) site.css réserve 520 px à .booking (min-height) : gardée tant que le module n'est pas monté
      (:empty, rien ne saute au chargement), levée ensuite — sinon une liste courte, sur
      ordinateur, laisse le reste de la réserve vide sous elle.
   c) le remplissage du bas de la dernière catégorie (22 px ; 16 px + 12 px de marge au
      téléphone) : la mention porte seule l'espacement (24 px, ci-dessous). */
.resa-carte .booking:not(:empty){min-height:0}
.resa-carte .booking [class*="step-module_services"] ~ div:last-child:empty{display:none}
.resa-carte .booking [class*="service_set-module_businessServices"]:last-child{padding-bottom:0; margin-bottom:0}
/* 6. « Supprimer » (étape 1 du calendrier, sous la prestation choisie). Planity le rend en lien
   souligné (button-module_underlined) MAIS lui donne aussi la classe planity_ui_action_button_root :
   site.css (« Widget Planity : boutons aux couleurs de la charte ») lui pose donc le dégradé, le
   relief et les majuscules des CTA, tandis que la règle des liens soulignés garde son texte
   rouille et son soulignement — rouille sur dégradé rouille, illisible. Il prend ici le bouton
   secondaire du site (.btn.ghost) : gélule transparente, filet rouille, texte brique ; au survol,
   fond rouille et texte crème. !important : les règles de site.css qu'il faut défaire le sont. */
.resa-carte .booking [class*="booking_service-module_remove"]{
  background:transparent !important; color:var(--brique,#8F3517) !important;
  border:1.5px solid var(--rouille,#C4572E) !important; border-radius:999px !important;
  box-shadow:none !important; text-shadow:none !important; filter:none !important;
  padding:8px 16px !important; min-height:36px; height:auto;
  font-family:var(--sans) !important; font-weight:500 !important; font-size:12px !important;
  letter-spacing:.7px !important; text-transform:uppercase !important;
  transition:background-color .25s ease, color .25s ease !important; transform:none !important;
}
.resa-carte .booking [class*="booking_service-module_remove"] [class*="button-module_label"]{
  color:inherit !important; text-decoration:none !important; text-shadow:none !important;
  font:inherit !important; letter-spacing:inherit !important;
}
/* Le soulignement de Planity est un trait dessiné en ::after sous le libellé. */
.resa-carte .booking [class*="booking_service-module_remove"] [class*="button-module_label"]::after{display:none}
.resa-carte .booking [class*="booking_service-module_remove"]:hover{
  background:var(--rouille,#C4572E) !important; color:var(--cream,#FFF6E8) !important;
}
.resa-carte .booking [class*="booking_service-module_remove"]:focus-visible{
  outline:2px solid var(--ink,#3A2218); outline-offset:3px;
}
/* La ligne de réassurance : le bouclier Solar dans sa pastille, le texte à côté, l'ensemble
   centré sous l'encadré. Réduite à « Réservation en ligne sécurisée » le 12/10/2026 (demande
   d'Alex) : l'imprévu reste traité par la FAQ de la page. */
.resa-carte .bnote{
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:fit-content; max-width:100%; margin:24px auto 0;
  font-size:14px; line-height:1.5; color:var(--muted,#735335); opacity:1; text-align:center;
}
.resa-carte .bnote::before{
  content:""; flex:none; width:30px; height:30px; border-radius:50%;
  background:var(--fx-pastille) center/18px 18px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%239C3D1A'%3E%3Cpath opacity='.5' d='M3.37752 5.08241C3 5.62028 3 7.21907 3 10.4167V11.9914C3 17.6294 7.23896 20.3655 9.89856 21.5273C10.62 21.8424 10.9807 22 12 22C13.0193 22 13.38 21.8424 14.1014 21.5273C16.761 20.3655 21 17.6294 21 11.9914V10.4167C21 7.21907 21 5.62028 20.6225 5.08241C20.245 4.54454 18.7417 4.02996 15.7351 3.00079L15.1623 2.80472C13.595 2.26824 12.8114 2 12 2C11.1886 2 10.405 2.26824 8.83772 2.80472L8.26491 3.00079C5.25832 4.02996 3.75503 4.54454 3.37752 5.08241Z'/%3E%3Cpath d='M15.0595 10.4995C15.3353 10.1905 15.3085 9.71643 14.9995 9.44055C14.6905 9.16468 14.2164 9.19152 13.9406 9.5005L10.9286 12.8739L10.0595 11.9005C9.78359 11.5915 9.30947 11.5647 9.0005 11.8406C8.69152 12.1164 8.66468 12.5905 8.94055 12.8995L10.3691 14.4995C10.5114 14.6589 10.7149 14.75 10.9286 14.75C11.1422 14.75 11.3457 14.6589 11.488 14.4995L15.0595 10.4995Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Page canonique de l'atelier : la carte « Pas disponible ? » (alerte de nouvelles dates) ────
   Les règles du bloc vivent dans un <style> placé APRÈS cette feuille, à spécificité (0,1,1) :
   l'identifiant de la carte fait passer celles-ci devant, sans !important. */
#atelier-alert{border-color:rgba(196,87,46,.45) !important}
/* Pastille cloche, en écho au soleil posé entre la photo et le corps des cartes de date. */
#atelier-alert::before{
  content:""; display:block; width:44px; height:44px; margin:0 auto -2px; border-radius:50%;
  background:var(--fx-pastille) center/22px 22px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%239C3D1A'%3E%3Cpath opacity='.5' d='M18.7491 9V9.7041C18.7491 10.5491 18.9903 11.3752 19.4422 12.0782L20.5496 13.8012C21.5612 15.3749 20.789 17.5139 19.0296 18.0116C14.4273 19.3134 9.57274 19.3134 4.97036 18.0116C3.21105 17.5139 2.43882 15.3749 3.45036 13.8012L4.5578 12.0782C5.00972 11.3752 5.25087 10.5491 5.25087 9.7041V9C5.25087 5.13401 8.27256 2 12 2C15.7274 2 18.7491 5.13401 18.7491 9Z'/%3E%3Cpath d='M7.24316 18.5454C7.8941 20.5506 9.77767 22.0002 11.9998 22.0002C14.222 22.0002 16.1055 20.5506 16.7565 18.5454C13.611 19.1357 10.3886 19.1357 7.24316 18.5454Z'/%3E%3C/g%3E%3C/svg%3E");
  box-shadow:inset 0 1px 0 #fff, 0 3px 0 -1px rgba(201,164,122,.45);
}
#atelier-alert .atelier-alert__eyebrow{font-size:11px; font-weight:700; letter-spacing:.18em; color:var(--rouille-text,#9C3D1A)}
#atelier-alert .atelier-alert__form{gap:10px}
#atelier-alert .atelier-alert__form input{
  min-height:48px; padding:12px 14px; border:1px solid var(--fx-filet); border-radius:12px;
  background:var(--fx-champ); color:var(--ink,#3A2218); box-shadow:inset 0 1px 2px rgba(58,34,24,.06);
  font:400 16px/1.25 'Outfit',system-ui,sans-serif; text-align:left;
  transition:border-color .2s ease, box-shadow .2s ease;
}
#atelier-alert .atelier-alert__form input::placeholder{color:#806652; opacity:1}
#atelier-alert .atelier-alert__form input:focus,
#atelier-alert .atelier-alert__form input:focus-visible{outline:none; border-color:var(--rouille,#C4572E); box-shadow:var(--fx-anneau)}
/* « Préviens-moi → » : le CTA du site (même dégradé, même relief que « Réserver ma place »). */
#atelier-alert .atelier-alert__form button{
  min-height:50px; padding:0 20px; border:0; border-radius:999px;
  background:var(--cta-degrade); color:#FFF9EE;
  font:500 12.5px/1 'Outfit',system-ui,sans-serif; letter-spacing:.7px; text-transform:uppercase;
  text-shadow:0 1px 0 rgba(96,34,10,.28); box-shadow:var(--cta-relief);
  transition:transform .18s ease, box-shadow .25s ease, filter .25s ease;
}
#atelier-alert .atelier-alert__form button:hover{transform:translateY(-1px); filter:brightness(1.04); box-shadow:var(--cta-relief-survol)}
#atelier-alert .atelier-alert__form button:active{transform:translateY(1px); box-shadow:var(--cta-relief-appui)}
#atelier-alert .atelier-alert__form button:focus-visible{outline:2px solid var(--ink,#3A2218); outline-offset:3px}
#atelier-alert .atelier-alert__form button:disabled{opacity:.7; cursor:default; transform:none}
#atelier-alert .atelier-alert__err{color:#B3261E}
#atelier-alert .atelier-alert__fine{font-size:12.5px; color:var(--muted,#735335)}

@media (prefers-reduced-motion:reduce){
  #atelier-alert .atelier-alert__form button{transition:none}
  #atelier-alert .atelier-alert__form button:hover,
  #atelier-alert .atelier-alert__form button:active{transform:none}
}