/* =====================================================================
   Histoires éternelles — réservation d'ateliers
   Feuille de style de l'espace client.

   Les couleurs et les polices reprennent exactement celles du site
   principal (assets/css/style.css) pour que le passage de l'un à
   l'autre soit invisible.

   Écrit « mobile d'abord » : les règles de base valent pour le
   téléphone, les @media (min-width) ajoutent ce qu'il faut au-delà.
   ===================================================================== */

:root{
  /* --- identité du site --- */
  --corail:       #ec6a5c;
  --corail-fonce: #d9574a;
  --corail-doux:  #e5a49e;
  --rose:         #f4d8dc;
  --rose-fonce:   #eec6cb;
  --encre:        #3f3f3f;
  --gris:         #8d8d8d;
  --ligne:        #e2dedd;
  --creme:        #f5f3f2;
  --blanc:        #fff;

  /* --- code couleur des disponibilités --- */
  --vert:         #5f7f5a;   /* places disponibles */
  --vert-clair:   #e8efe5;
  --ambre:        #b5762c;   /* dernières places  */
  --ambre-clair:  #f9eddc;
  --rouge:        #c0544a;   /* complet            */
  --rouge-clair:  #fae5e2;

  --f-script: "Yellowtail", cursive;
  --f-serif:  "EB Garamond", Georgia, "Times New Roman", serif;
  --f-sans:   "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --largeur: 1080px;
  --rayon: 3px;
  --ombre: 0 2px 14px rgba(63,63,63,.07);
  --transition: .25s cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

body{
  margin:0;
  background:var(--blanc);
  color:var(--gris);
  font-family:var(--f-serif);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}

img{ max-width:100%; display:block; }
a{ color:var(--corail); text-decoration:none; }
a:hover{ text-decoration:underline; }
p{ margin:0 0 1.1em; }

.conteneur{
  width:100%;
  max-width:var(--largeur);
  margin-inline:auto;
  padding-inline:20px;
}

.section{ padding-block:36px 56px; }
.section--etroite{ max-width:660px; }

/* Rend les zones cliquables confortables au doigt (recommandation
   d'accessibilité : 44 px minimum). */
button, .bouton, input, select, textarea{ font-family:inherit; font-size:inherit; }

/* =====================================================================
   BANDEAU « SITE EN COURS DE CRÉATION »
   (se retire dans Réglages › Ouverture du site)
   ===================================================================== */
.bandeau-construction{
  display:flex; flex-wrap:wrap; justify-content:center; gap:2px 10px;
  padding:10px 16px; text-align:center;
  background:var(--rose); color:var(--corail-fonce);
  font-size:14.5px; line-height:1.45;
}
.bandeau-construction strong{
  font-family:var(--f-sans); font-size:11.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
}
.bandeau-construction a{ color:var(--corail-fonce); text-decoration:underline; white-space:nowrap; }

/* Filigrane en diagonale sur toute la page, fixe pendant le défilement.
   « pointer-events:none » : il ne gêne aucun clic ni aucune saisie. */
.filigrane-test{
  /* 55 : au-dessus du contenu, mais SOUS l'en-tête du site (60), pour
     que le menu déroulant reste parfaitement lisible. */
  position:fixed; inset:0; z-index:55;
  pointer-events:none;
  background-repeat:repeat; background-position:center;
  opacity:.2;
}
/* Sur téléphone, motif réduit pour que la phrase tienne dans l'écran. */
@media (max-width:600px){ .filigrane-test{ background-size:340px 219px; } }
@media print{ .filigrane-test{ opacity:.12; } }

/* =====================================================================
   INTÉGRATION AU SITE
   L'en-tête, le menu et le pied de page viennent du site principal
   (assets/css/style.css). L'en-tête du site est fixe : le contenu des
   réservations commence donc sous lui.
   ===================================================================== */
.reservations-contenu{ padding-top:var(--header-h, 68px); }

/* Les liens de l'en-tête et du pied de page gardent le style du site :
   la règle « a » d'app.css (liens corail, soulignés au survol) ne doit
   pas s'y appliquer. « :where() » ne pèse rien : les règles précises du
   site (.nav-list a, .footer-col a:hover…) gardent donc la priorité. */
:where(.site-header, .site-footer) a{ color:inherit; }
:where(.site-header, .site-footer) a:hover{ text-decoration:none; }

/* =====================================================================
   BANNIÈRE D'ACCUEIL
   ===================================================================== */
.banniere{
  background:var(--creme);
  text-align:center;
  padding-block:38px 34px;
}
.sur-titre{
  font-family:var(--f-sans); font-weight:300;
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--corail-doux); margin:0 0 4px;
}
.titre-script{
  font-family:var(--f-script);
  font-size:46px; line-height:1.1; font-weight:400;
  color:var(--corail); margin:0 0 10px;
}
.banniere-texte{
  max-width:540px; margin:0 auto; color:var(--gris);
}
@media (min-width:700px){
  .banniere{ padding-block:56px 50px; }
  .titre-script{ font-size:62px; }
}

.titre-section{
  font-family:var(--f-sans); font-weight:400;
  font-size:13px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--encre); text-align:center; margin:0 0 30px;
}

/* =====================================================================
   BOUTONS
   ===================================================================== */
.bouton{
  display:inline-block; text-align:center;
  background:var(--corail); color:var(--blanc);
  border:1px solid var(--corail); border-radius:var(--rayon);
  padding:13px 26px; min-height:46px;
  font-family:var(--f-serif); font-size:15px; letter-spacing:.09em;
  cursor:pointer; transition:background var(--transition), color var(--transition);
}
.bouton:hover{ background:var(--corail-fonce); border-color:var(--corail-fonce);
               color:var(--blanc); text-decoration:none; }
.bouton--fantome{ background:transparent; color:var(--corail); }
.bouton--fantome:hover{ background:var(--rose); color:var(--corail-fonce); }
.bouton--large{ display:block; width:100%; }

/* =====================================================================
   MESSAGES
   ===================================================================== */
.flash{
  margin:18px 0 0; padding:13px 16px; border-radius:var(--rayon);
  border-left:3px solid var(--vert); background:var(--vert-clair); color:#3f5a3b;
}
.flash--erreur{ border-left-color:var(--rouge); background:var(--rouge-clair); color:#8a3b33; }

/* =====================================================================
   LISTE DES ATELIERS
   ===================================================================== */
.grille-ateliers{
  display:grid; gap:26px; grid-template-columns:1fr;
}
@media (min-width:640px){ .grille-ateliers{ grid-template-columns:repeat(2,1fr); gap:30px; } }
@media (min-width:980px){ .grille-ateliers{ grid-template-columns:repeat(3,1fr); } }

.carte{
  background:var(--blanc);
  border:1px solid var(--ligne); border-radius:var(--rayon);
  overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow var(--transition), transform var(--transition);
}
.carte:hover{ box-shadow:var(--ombre); transform:translateY(-2px); }

/* La photo occupe un rectangle 4/3 quelle que soit sa forme d'origine.
   L'image est positionnée en absolu : sans cela, sa hauteur réelle
   étirerait le cadre et les cartes n'auraient plus la même taille. */
.carte-photo{
  position:relative; display:block; aspect-ratio:4/3;
  overflow:hidden; background:var(--creme);
}
.carte-photo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.photo-absente{
  position:absolute; inset:0;
  background:linear-gradient(135deg, var(--creme), var(--rose));
}

.carte-corps{ padding:18px 20px 22px; display:flex; flex-direction:column; flex:1; }
.carte-date{
  font-family:var(--f-sans); font-size:11px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase; color:var(--corail-doux);
  margin:0 0 6px;
}
.carte-titre{ margin:0 0 8px; font-size:22px; font-weight:400; line-height:1.25; }
.carte-titre a{ color:var(--encre); }
.carte-titre a:hover{ color:var(--corail); text-decoration:none; }
.carte-texte{ margin:0 0 14px; font-size:15.5px; }
.carte-infos{
  display:flex; justify-content:space-between; align-items:baseline;
  margin:auto 0 16px; padding-top:12px; border-top:1px solid var(--ligne);
  font-size:15px;
}
.carte-prix{ color:var(--encre); font-size:19px; }

/* --- pastilles de disponibilité (le code couleur) ---
   Par défaut, la pastille est une simple étiquette dans le flux : elle
   sert aussi bien dans les tableaux de l'espace fleuriste que sur les
   cartes. Le variante « sur-photo » la pose par-dessus l'image. */
.pastille{
  display:inline-block; white-space:nowrap;
  font-family:var(--f-sans); font-size:11px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  padding:6px 11px; border-radius:100px;
  background:var(--creme); color:var(--encre);
}
.pastille--libre  { background:var(--vert-clair);  color:var(--vert); }
.pastille--tension{ background:var(--ambre-clair); color:var(--ambre); }
.pastille--complet{ background:var(--rouge-clair); color:var(--rouge); }
.pastille--annule { background:var(--creme);       color:var(--gris); }

/* Posée dans le coin de la photo d'une carte. */
.pastille--sur-photo{
  position:absolute; top:12px; left:12px; z-index:2;
  box-shadow:0 1px 6px rgba(0,0,0,.14);
}
/* Pleine largeur, dans l'encadré de réservation. */
.pastille--bloc{
  display:block; text-align:center; margin:0 0 14px; padding:9px 11px;
}

/* --- encart « atelier privé » sous la liste --- */
.encart-groupe{
  margin-top:48px; padding:32px 24px; text-align:center;
  background:var(--creme); border-radius:var(--rayon);
}
.encart-groupe h2{
  font-family:var(--f-script); font-weight:400; font-size:30px;
  color:var(--corail); margin:0 0 10px;
}
.encart-groupe p{ max-width:520px; margin:0 auto 20px; }

/* --- aucun atelier programmé --- */
.vide{ text-align:center; padding:40px 0; }
.vide .titre-script{ font-size:52px; }

/* =====================================================================
   FICHE D'UN ATELIER
   ===================================================================== */
.fiche-photo{ background:var(--creme); }
.fiche-photo img{ width:100%; height:auto; max-height:52vh; object-fit:cover; }

.fiche-grille{ padding-block:26px 50px; display:grid; gap:26px; grid-template-columns:1fr; }

/* Sur téléphone : titre, puis encadré de réservation, puis description.
   Le prix et le bouton « Réserver » sont ainsi visibles tout de suite. */
.fiche-entete   { order:1; }
.fiche-resa     { order:2; }
.fiche-principal{ order:3; }

@media (min-width:900px){
  /* Sur grand écran, la grille reprend la main : le texte à gauche,
     l'encadré à droite, qui suit le défilement. */
  .fiche-grille{ grid-template-columns:1fr 330px; column-gap:50px; row-gap:0; align-items:start; }
  .fiche-entete   { grid-column:1; grid-row:1; }
  .fiche-principal{ grid-column:1; grid-row:2; }
  .fiche-resa     { grid-column:2; grid-row:1 / span 2; position:sticky; top:96px; }
}

.fil-ariane{ font-family:var(--f-sans); font-size:12px; letter-spacing:.1em; margin:0 0 14px; }
.fil-ariane a{ color:var(--gris); }
.fil-ariane a:hover{ color:var(--corail); }

.fiche-titre{
  font-family:var(--f-serif); font-weight:400; font-size:34px; line-height:1.2;
  color:var(--encre); margin:0 0 14px;
}
@media (min-width:700px){ .fiche-titre{ font-size:40px; } }
.fiche-chapeau{ font-size:19px; font-style:italic; color:var(--corail-doux); margin:0 0 20px; }
.fiche-texte{ font-size:17px; }

.fiche-details{ margin:28px 0 0; padding:24px 0 0; border-top:1px solid var(--ligne); }
.fiche-details dt{
  font-family:var(--f-sans); font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--corail);
  margin:18px 0 5px;
}
.fiche-details dt:first-child{ margin-top:0; }
.fiche-details dd{ margin:0; }

/* --- encadré de réservation --- */
.resa-carte{
  background:var(--creme); border:1px solid var(--ligne);
  border-radius:var(--rayon); padding:24px 22px;
}
.resa-date{
  font-family:var(--f-sans); font-size:12px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--encre); margin:0 0 3px;
}
.resa-heure{ margin:0 0 14px; font-size:16px; }
.resa-duree{ color:var(--gris); }
.resa-prix{
  font-size:32px; color:var(--corail); line-height:1.1; margin:0 0 4px;
}
.resa-prix-unite{ display:block; font-size:14px; color:var(--gris); }
.resa-indispo{ text-align:center; font-style:italic; margin:0 0 14px; }
.resa-aide{
  margin:14px 0 0; text-align:center; font-size:14px; color:var(--gris);
}
.resa-jauge-texte{ margin:6px 0 16px; font-size:13.5px; color:var(--gris); text-align:center; }

/* --- jauge de remplissage --- */
.jauge{
  height:7px; border-radius:100px; background:var(--ligne);
  overflow:hidden; margin-top:16px;
}
.jauge-remplie{ display:block; height:100%; border-radius:100px; transition:width var(--transition); }
.jauge--libre  { background:var(--vert); }
.jauge--tension{ background:var(--ambre); }
.jauge--complet{ background:var(--rouge); }
.jauge--annule { background:var(--gris); }

/* =====================================================================
   FORMULAIRES
   ===================================================================== */
.rappel-atelier{
  background:var(--creme); border-left:3px solid var(--rose);
  padding:16px 18px; margin:0 0 28px; border-radius:var(--rayon);
  color:var(--encre);
}

.formulaire{ margin:0; }
.champ{ margin:0 0 20px; display:block; }
.champ label{
  display:block; margin-bottom:6px;
  font-family:var(--f-sans); font-size:12px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--encre);
}
.champ input[type=text], .champ input[type=email], .champ input[type=tel],
.champ input[type=date], .champ input[type=time], .champ input[type=number],
.champ input[type=password], .champ select, .champ textarea{
  width:100%; padding:12px 14px; min-height:46px;
  border:1px solid var(--ligne); border-radius:var(--rayon);
  background:var(--blanc); color:var(--encre);
  font-family:var(--f-serif); font-size:16px;  /* 16 px : évite le zoom sur iPhone */
  transition:border-color var(--transition);
}
.champ textarea{ min-height:110px; resize:vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus{
  outline:none; border-color:var(--corail-doux);
  box-shadow:0 0 0 3px var(--rose);
}
.champ--court select{ max-width:320px; }
.champ .aide{ display:block; margin-top:5px; font-size:13.5px; color:var(--gris); }
.champ .erreur{ display:block; margin-top:5px; font-size:14px; color:var(--rouge); }
.champ--erreur input, .champ--erreur select, .champ--erreur textarea{ border-color:var(--rouge); }
.facultatif{ text-transform:none; letter-spacing:0; color:var(--gris); font-size:12px; }

.champs-deux{ display:grid; gap:0 18px; grid-template-columns:1fr; }
@media (min-width:600px){ .champs-deux{ grid-template-columns:1fr 1fr; } }

fieldset.champ{ border:none; padding:0; margin:0 0 20px; }
fieldset.champ legend{
  padding:0; margin-bottom:8px;
  font-family:var(--f-sans); font-size:12px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--encre);
}
/* Les intitulés de cases à cocher et de boutons radio restent en
   minuscules : ce sont des phrases, pas des étiquettes de champ.
   Le sélecteur est volontairement plus précis que « .champ label »,
   qui met sinon tout en capitales. */
.champ label.choix,
.choix{
  display:flex; gap:11px; align-items:flex-start;
  padding:11px 0; margin-bottom:0; cursor:pointer;
  font-family:var(--f-serif); font-size:16px; text-transform:none;
  letter-spacing:0; color:var(--gris); font-weight:400; line-height:1.6;
}
.choix input{ margin-top:5px; width:18px; height:18px; accent-color:var(--corail); flex:0 0 auto; }
.champ--case .choix{ font-size:14.5px; line-height:1.55; }

/* Le pot de miel doit être invisible sans être « display:none », que
   certains robots détectent. */
.pot-de-miel{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}

.mention-fin{ margin-top:18px; font-size:13.5px; color:var(--gris); }

/* =====================================================================
   CONFIRMATION ET RÉCAPITULATIF
   ===================================================================== */
.confirmation{
  text-align:center; background:var(--creme);
  padding:34px 24px; border-radius:var(--rayon); margin-bottom:30px;
}
.confirmation-pictogramme{ font-size:34px; color:var(--rose-fonce); margin:0 0 6px; }
.confirmation h1{
  font-family:var(--f-serif); font-weight:400; font-size:28px;
  color:var(--corail); margin:0 0 12px;
}
.confirmation-aide{ font-size:14px; color:var(--gris); margin:0; }

.recap{ border:1px solid var(--ligne); border-radius:var(--rayon); padding:24px 22px; }
.recap h2{
  font-family:var(--f-serif); font-weight:400; font-size:25px;
  color:var(--encre); margin:0 0 16px;
}
.recap-statut{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  justify-content:space-between; margin:0 0 14px;
}
.recap-reference{ font-family:var(--f-sans); font-size:12px; letter-spacing:.1em; color:var(--gris); }
.recap dl{ margin:0; }
.recap dt{
  font-family:var(--f-sans); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--corail);
  margin:16px 0 4px;
}
.recap dt:first-child{ margin-top:0; }
.recap dd{ margin:0; color:var(--encre); }

.etiquette{
  display:inline-block; padding:5px 12px; border-radius:100px;
  font-family:var(--f-sans); font-size:11px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
}
.st-attente  { background:var(--ambre-clair); color:var(--ambre); }
.st-confirmee{ background:var(--vert-clair);  color:var(--vert); }
.st-payee    { background:#e4edf3;            color:#3d6b88; }
.st-annulee  { background:var(--creme);       color:var(--gris); }

.encadre{
  margin-top:20px; padding:16px 18px;
  background:var(--creme); border-radius:var(--rayon);
}
.encadre h3{
  font-family:var(--f-sans); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--encre); margin:0 0 8px;
}
.encadre p:last-child{ margin-bottom:0; }
/* Mise en garde « faux IBAN », sous les coordonnées bancaires. */
.avertissement-iban{
  padding:10px 14px; border-left:3px solid var(--corail);
  background:var(--blanc); font-size:14.5px; line-height:1.5;
}

.formulaire-annuler{ margin-top:24px; text-align:center; }
.lien-danger{
  background:none; border:none; padding:6px 0; cursor:pointer;
  color:var(--rouge); font-size:15px; text-decoration:underline;
}
.formulaire-annuler .aide{ display:block; margin-top:4px; font-size:13.5px; color:var(--gris); }

/* =====================================================================
   ÉTAPE 2 : LISTE D'ATTENTE ET ATELIER PRIVÉ
   ===================================================================== */

/* Petite explication numérotée (liste d'attente) */
.etapes{
  list-style:none; counter-reset:etape; margin:0 0 28px; padding:0;
}
.etapes li{
  counter-increment:etape; position:relative;
  padding:0 0 12px 42px; margin:0; min-height:30px;
}
.etapes li::before{
  content:counter(etape);
  position:absolute; left:0; top:0;
  width:28px; height:28px; border-radius:50%;
  background:var(--rose); color:var(--corail-fonce);
  font-family:var(--f-sans); font-size:13px; font-weight:500;
  display:flex; align-items:center; justify-content:center;
}

/* Rang sur la liste d'attente */
.rang{ display:flex; align-items:center; gap:14px; margin:18px 0; }
.rang-chiffre{
  font-family:var(--f-serif); font-size:52px; line-height:1; color:var(--corail);
}
.rang-texte{
  font-family:var(--f-sans); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gris); line-height:1.5;
}

.encadre--alerte{ background:var(--ambre-clair); border-left:3px solid var(--ambre); }
.encadre--alerte h3{ color:var(--ambre); }

.pastille--prive{ background:var(--vert-clair); color:var(--vert); }

/* Bannière plus basse pour les pages de formulaire */
.banniere--courte{ padding-block:32px 28px; }
.banniere--courte .banniere-texte{ max-width:600px; }

/* Choix de l'occasion en « puces » cliquables */
.puces{ display:flex; flex-wrap:wrap; gap:8px; }
.puce{ position:relative; cursor:pointer; }
.puce input{ position:absolute; opacity:0; width:1px; height:1px; }
.champ .puce span,
.puce span{
  display:inline-block; padding:10px 16px; min-height:44px;
  border:1px solid var(--ligne); border-radius:100px; background:var(--blanc);
  font-family:var(--f-serif); font-size:15.5px; letter-spacing:0;
  text-transform:none; color:var(--encre);
  transition:background var(--transition), border-color var(--transition);
}
.puce input:checked + span{
  background:var(--rose); border-color:var(--corail-doux); color:var(--corail-fonce);
}
.puce input:focus-visible + span{ outline:2px solid var(--corail); outline-offset:2px; }

.champ--imbrique{ margin:6px 0 0 29px; }

/* Champs courts (nombre, liste) : pas besoin de toute la largeur. */
.champ--court input, .champ--court select{ max-width:320px; }

/* Trois champs côte à côte (dates souhaitées), empilés sur téléphone. */
.champs-trois{ display:grid; gap:0 16px; grid-template-columns:1fr; }
@media (min-width:600px){ .champs-trois{ grid-template-columns:repeat(3,1fr); } }
.aide--haut{ margin:-2px 0 12px; font-size:14px; color:var(--gris); }

/* Champs côte à côte : les cases de saisie restent alignées même quand un
   intitulé passe sur deux lignes. Chaque champ (intitulé, case, aide,
   erreur) partage les lignes de la grille de ses voisins (« subgrid »).
   Sur un navigateur trop ancien, l'affichage reste simplement l'actuel. */
@supports (grid-template-rows:subgrid){
  @media (min-width:600px){
    .champs-deux > p.champ, .champs-trois > p.champ{
      display:grid; grid-row:span 4; grid-template-rows:subgrid;
      align-content:start; row-gap:0;
    }
    .champs-deux > p.champ > label, .champs-trois > p.champ > label{ align-self:end; }
  }
}

/* =====================================================================
   ACCESSIBILITÉ
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}
:focus-visible{ outline:2px solid var(--corail); outline-offset:2px; }