/* ============================================================
   instanta — le PARCOURS d'achat : s'inscrire, payer, revenir
   ============================================================
   ⚑ CE FICHIER EXISTE POUR NE PAS AVOIR TOUCHÉ À L'HABILLAGE DE CES TROIS
   PAGES, et c'est une consigne explicite du lot V : `inscription.html`,
   `paiement.html` et `paiement-retour.html` ne devaient recevoir QUE le
   nouveau nom, « pas leur habillage ni leurs scripts ».

   Or la réécriture de `vitrine.css` (V2) leur retirait TRENTE classes —
   `creneau-colonne`, `recap-ligne`, `verdict`, `consentement`… Elles auraient
   perdu leur mise en page sans qu'une seule ligne de leur HTML ait changé.
   Le défaut était invisible : les pages s'affichaient, en désordre.

   Leurs règles sont donc extraites ici, TELLES QU'ELLES ÉTAIENT. Aucune
   couleur en dur — l'ancienne feuille n'en avait déjà pas, elle nommait
   directement les jetons `--couleur-…` de `theme.css`.

   ⚠️ CE FICHIER N'EST PAS UNE COPIE DE L'ANCIEN : les règles du vieil accueil
   (`.accroche`, `.bande`, `.etape`…) n'y sont pas, puisque les quatre pages
   refaites ont les leurs. Ce qui reste est exactement ce que ces trois pages
   emploient, vérifié classe par classe par un test.
   ============================================================ */

/* ============================================================
   instanta — la vitrine publique
   ============================================================
   Format simple : un fichier de style pour le site public.
   Les COULEURS viennent de theme.css (variables --couleur-…) : on n'écrit
   jamais une couleur en dur ici (DEC-013). Le site public reste donc cohérent
   avec l'espace client, et suit le mode clair/sombre.
   ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: var(--taille-texte);
  color: var(--couleur-texte);
  background: var(--fond-page);
  line-height: 1.55;
}

a { color: var(--couleur-principale); }

/* --- En-tête --- */

.entete {
  position: sticky; top: 0; z-index: 10;
  height: var(--hauteur-entete);
  display: flex; align-items: center; gap: var(--espace-4);
  padding: 0 var(--espace-6);
  background: var(--couleur-surface);
  border-bottom: 1px solid var(--couleur-bordure);
}

.marque {
  font-weight: var(--graisse-forte);
  font-size: var(--taille-sous-titre);
  color: var(--couleur-principale);
  text-decoration: none;
}

.entete .pousser { margin-left: auto; }

.entete-actions { display: flex; gap: var(--espace-3); align-items: center; }

/* --- Boutons --- */

.bouton-plein, .bouton-clair {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--hauteur-controle); padding: 0 var(--espace-5);
  border-radius: var(--rayon);
  font-family: var(--police); font-size: var(--taille-petit);
  font-weight: var(--graisse-moyenne); cursor: pointer; text-decoration: none;
}

.bouton-plein {
  border: 0;
  background: var(--couleur-principale); color: var(--couleur-principale-texte);
}

.bouton-plein:hover { opacity: 0.92; }

.bouton-plein[disabled] { opacity: 0.5; cursor: default; }

.bouton-clair {
  border: 1px solid var(--couleur-bordure);
  background: var(--fond-page); color: var(--couleur-texte-secondaire);
}

.bouton-clair:hover { color: var(--couleur-texte); }

.bouton-grand { height: 48px; padding: 0 var(--espace-6); font-size: var(--taille-texte); }

/* --- Blocs de page --- */

.bande { padding: var(--espace-6) var(--espace-6); }

.dedans { max-width: 1040px; margin: 0 auto; }

h2 { margin: 0 0 var(--espace-2); font-size: 28px; font-weight: var(--graisse-forte); letter-spacing: -0.01em; }

.chapo { margin: 0 auto var(--espace-6); max-width: 680px; color: var(--couleur-texte-secondaire); }

/* --- Pied de page --- */

.pied {
  padding: var(--espace-5) var(--espace-6);
  border-top: 1px solid var(--couleur-bordure);
  color: var(--couleur-texte-secondaire); font-size: var(--taille-petit);
}

.pied .dedans { display: flex; gap: var(--espace-4); flex-wrap: wrap; align-items: center; }

.pied .pousser { margin-left: auto; }

/* Les liens légaux, sur leur propre ligne (27/09/2026). */
.pied .pied-legal { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px var(--espace-4); }

/* --- Formulaires (inscription / contact) --- */

.colonne-etroite { max-width: 620px; margin: 0 auto; }

.champ-bloc { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--espace-4); }

/* Q-B2-4 (Jibril, 06/10) : un bloc caché par la page (`hidden`) reste caché. Défaut de l'ancien :
   `display: flex` l'emportait, et le calendrier « Quand peut-on vous rappeler ? » paraissait
   même pour un petit volume. */
.champ-bloc[hidden] { display: none; }

.champ-bloc label { font-size: var(--taille-petit); color: var(--couleur-texte-secondaire); }

.champ-bloc input, .champ-bloc select, .champ-bloc textarea {
  height: var(--hauteur-controle); padding: 0 var(--espace-3);
  border: 1px solid var(--couleur-bordure); border-radius: var(--rayon);
  background: var(--couleur-surface); color: var(--couleur-texte);
  font-family: var(--police); font-size: var(--taille-texte);
}

.champ-bloc textarea { height: auto; min-height: 90px; padding: var(--espace-3); resize: vertical; }

.deux-colonnes { display: grid; gap: var(--espace-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Le bandeau qui change selon le volume déclaré : c'est lui qui dit au visiteur
   s'il achète en ligne ou si instanta le rappelle (claude.md §2bis). */

.verdict {
  margin: var(--espace-4) 0 var(--espace-5);
  padding: var(--espace-4) var(--espace-5);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  background: var(--fond-principale-doux);
}

.verdict h3 { margin: 0 0 4px; font-size: var(--taille-texte); }

.verdict p { margin: 0; font-size: var(--taille-petit); color: var(--couleur-texte-secondaire); }

/* Titres de section à l'intérieur d'un formulaire long : sans eux, quinze
   champs d'affilée deviennent illisibles. */

.titre-section {
  margin: var(--espace-6) 0 var(--espace-3);
  font-size: var(--taille-petit);
  font-weight: var(--graisse-forte);
  color: var(--couleur-texte-secondaire);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.titre-section:first-of-type { margin-top: var(--espace-4); }

.choix-ligne { display: flex; gap: var(--espace-5); flex-wrap: wrap; }

.choix { display: inline-flex; align-items: center; gap: 8px; font-size: var(--taille-texte); color: var(--couleur-texte); cursor: pointer; }

.facultatif { color: var(--couleur-texte-secondaire); font-weight: 400; }

/* L'inverse du précédent : ce qu'il FAUT remplir se dit, il ne se devine pas.
   Le SIRET est obligatoire pour une société (A1) ; l'annoncer sur l'étiquette
   évite un refus après coup, une fois le formulaire entièrement rempli. */

.obligatoire { color: var(--couleur-texte-secondaire); font-weight: 400; }

.message { margin: var(--espace-4) 0 0; font-size: var(--taille-petit); color: var(--couleur-texte-secondaire); }

.message.ok { color: var(--couleur-principale); }

.message.alerte { color: var(--couleur-alerte); }

/* L'écran de remerciement, une fois la demande envoyée. */

.merci { text-align: center; padding: var(--espace-6) 0; }

.merci .pictogramme { font-size: 40px; }

/* La page de paiement : le récap de la commande et le bandeau de simulation. */

.recap {
  margin: var(--espace-5) 0;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  overflow: hidden;
}

.recap-ligne {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espace-4);
  padding: 14px 16px;
  border-bottom: 1px solid var(--couleur-bordure);
}

.recap-ligne:last-child { border-bottom: 0; }

.recap-ligne span { color: var(--couleur-texte-secondaire); font-size: var(--taille-petit); }

.recap-ligne strong { color: var(--couleur-texte); font-weight: var(--graisse-forte); text-align: right; }

/* La case « j'accepte les conditions » sur la page de paiement. */

.consentement {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: var(--espace-4) 0;
  font-size: var(--taille-petit);
  color: var(--couleur-texte);
  line-height: 1.5;
  cursor: pointer;
}

.consentement input { margin-top: 3px; }

/* Le lien « définir mon mot de passe » renvoyé après l'achat d'un pack. */

.lien-secours {
  margin: var(--espace-4) auto 0;
  max-width: 520px;
  padding: 10px 12px;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  font-size: var(--taille-petit);
  word-break: break-all;
  user-select: all;
  text-align: left;
}

/* ============================================================
   « On vous rappelle » — le calendrier des créneaux libres
   (SiteCreneau.dc.html). Deux colonnes : le mois, puis les
   créneaux du jour retenu.
   ============================================================ */

.creneau-cadre {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  overflow: hidden;
}

@media (max-width: 620px) {
  .creneau-cadre { grid-template-columns: minmax(0, 1fr); }
  .creneau-mois { border-right: 0; border-bottom: 1px solid var(--couleur-bordure); }
}

.creneau-mois { padding: 12px 14px; border-right: 1px solid var(--couleur-bordure); }

.creneau-mois-barre {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; font-weight: 600;
}

.creneau-fleche {
  border: 0; background: none; cursor: pointer;
  color: var(--couleur-texte-secondaire); font-size: 16px; line-height: 1; padding: 4px 8px;
}

/* Q-B2-4 (Jibril, 06/10) : la grille des jours de la maquette (SiteCreneau.dc.html), reprise de
   l'ancienne feuille de la vitrine (`vitrine.css`, sauvegarde du 28/09). Sans elle, les jours
   s'affichaient à la suite (« LMMJVSD » puis les numéros). */
.creneau-entete-jours,
.creneau-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }

.creneau-entete-jours {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--couleur-texte-secondaire); text-align: center; margin-bottom: 4px;
}

.creneau-grille { justify-items: center; }

.jour-case {
  width: 38px; height: 38px; border-radius: var(--rayon); border: 0; background: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-family: var(--police);
}

/* Hors de la plage proposée : visible, mais pas cliquable. */
.jour-case.jour-hors { color: var(--couleur-texte-secondaire); }

/* Dans la plage, mais plus un seul trou : barré, comme dans la maquette. */
.jour-case.jour-plein { color: var(--couleur-texte-secondaire); text-decoration: line-through; }

/* Il reste des créneaux. */
.jour-case.jour-libre {
  color: var(--couleur-texte); font-weight: 500;
  background: var(--fond-principale-doux); cursor: pointer;
}

.jour-case.jour-libre:hover { background: var(--fond-principale-doux); }

.jour-case.jour-choisi {
  background: var(--couleur-principale); color: var(--couleur-surface); font-weight: 600; cursor: pointer;
}

.creneau-colonne { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }

.creneau-jour-titre { font-size: 13px; color: var(--couleur-texte-secondaire); margin-bottom: 2px; }

.creneau-vide { font-size: 14px; color: var(--couleur-texte-secondaire); margin: 0; }

.creneau {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; font-size: 15px; font-family: var(--police); text-align: left;
  border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); background: var(--couleur-surface);
  cursor: pointer; width: 100%;
}

.creneau:hover { border-color: var(--couleur-principale); }

.creneau.choisi {
  background: var(--fond-principale-doux); color: var(--couleur-principale); font-weight: 600;
  border-color: var(--couleur-principale);
}

.creneau-coche { color: var(--couleur-principale); font-weight: 700; }

.creneau-peu-importe {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--couleur-texte-secondaire); margin-top: 6px; cursor: pointer;
}

.ligne-envoi { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.note-envoi { font-size: 13px; color: var(--couleur-texte-secondaire); }