/* ============================================================
   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(--couleur-fond);
  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;
}
.nav { display: flex; gap: var(--espace-5); margin-left: var(--espace-5); }
.nav a { color: var(--couleur-texte-secondaire); text-decoration: none; font-size: var(--taille-petit); }
.nav a:hover { color: var(--couleur-texte); }
.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(--couleur-fond); 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; }

.accroche { padding: 72px var(--espace-6) 64px; text-align: center; }
.accroche h1 {
  margin: 0 0 var(--espace-4);
  font-size: 44px; line-height: 1.15; font-weight: var(--graisse-forte);
  letter-spacing: -0.02em;
}
.accroche .sous-titre {
  margin: 0 auto var(--espace-5); max-width: 680px;
  font-size: 18px; color: var(--couleur-texte-secondaire);
}
.accroche-boutons { display: flex; gap: var(--espace-3); justify-content: center; flex-wrap: wrap; }

.bande-douce { background: var(--fond-principale-doux); }

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); }
.centre { text-align: center; }

/* --- Grilles de cartes --- */
.grille { display: grid; gap: var(--espace-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.carte {
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: var(--espace-5);
}
.carte h3 { margin: 0 0 6px; font-size: var(--taille-texte); font-weight: var(--graisse-forte); }
.carte p { margin: 0; color: var(--couleur-texte-secondaire); font-size: var(--taille-petit); }
.pictogramme { font-size: 22px; margin-bottom: var(--espace-2); }

/* Les étapes numérotées */
.etape { display: flex; gap: var(--espace-4); align-items: flex-start; }
.etape .numero {
  flex: none; width: 30px; height: 30px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--couleur-principale); color: var(--couleur-principale-texte);
  font-size: var(--taille-petit); font-weight: var(--graisse-forte);
}

/* --- 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; }

/* --- 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); }
.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; }

.avis-simulation {
  margin: var(--espace-5) 0;
  padding: 14px 16px;
  border-radius: var(--rayon);
  background: var(--fond-principale-doux);
  border: 1px solid var(--couleur-bordure);
  color: var(--couleur-texte);
  font-size: var(--taille-petit);
  line-height: 1.5;
}
.avis-simulation strong { color: var(--couleur-principale); }

@media (max-width: 640px) {
  .accroche h1 { font-size: 32px; }
  .nav { display: none; }
}

/* 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: 8px;
  overflow: hidden;
}
@media (max-width: 620px) {
  /* Sur un téléphone, les deux colonnes se mettent l'une sous l'autre : une
     grille de sept jours à 300 px ne tient pas à côté d'une liste. */
  .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;
}
.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: 8px; border: 0; background: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-family: inherit;
}
/* 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: inherit; text-align: left;
  border: 1px solid var(--couleur-bordure); border-radius: 8px; 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); }