/* ============================================================
   PAGE PUBLIQUE de disponibilités (templates/public/page.html.twig).
   Couche chargée par CETTE page seule, après tokens → composants →
   entete-publique. Reprise de la maquette validée
   design/maquettes/page-publique/page.html.

   Règles d'architecture (direction-v2.md) respectées ici :
   - aucune valeur brute hors tokens (les rares exceptions sont commentées) ;
   - tout est préfixé .page-publique quand la règle élargit ou corrige un
     composant partagé, pour ne jamais déborder sur le reste du site ;
   - le sélecteur de dates (.dp*) est RECOPIÉ de portail.css : cette page ne
     charge pas portail.css (500 lignes de chrome applicatif). Un futur
     assets/datepicker.css partagé remplacera les deux copies.
   ============================================================ */

/* ---------- Gabarit : une page de lecture, pas un tableau de bord ---------- */
.page-publique .wrap { max-width: 880px; }
.page-publique img { max-width: 100%; display: block; }

/* Le .btn-small du produit descend à 34 px : sur une page grand public on
   garde la cible tactile de 44 px (règle d'or n° 4). */
.page-publique .btn-small { padding: 8px 15px; font-size: 0.75rem; min-height: var(--touch-target); }
.page-publique .btn { justify-content: center; }

/* ---------- En-tête sobre ----------
   La page appartient au logement : le logo 1calendrier est présent mais
   discret (la marque se rappelle en pied de page, mention non retirable). */
header.pp {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
header.pp .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
header.pp .logo .wordmark { height: 17px; opacity: 0.72; }
header.pp .logo:hover .wordmark { opacity: 1; }

/* ---------- Titre du logement (typographie éditoriale) ---------- */
.pp-head { padding: var(--space-7) 0 var(--space-5); }
.pp-eyebrow {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent-ink); margin-bottom: 14px;
}
.pp-head h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.2rem); font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display); line-height: 1.06; text-wrap: balance;
}
.pp-head .intro { margin-top: 16px; color: var(--ink-soft); font-size: 1.05rem; max-width: 46ch; }
.pp-maj { margin-top: 18px; display: flex; align-items: center; gap: 9px; font-size: 0.85rem; color: var(--ink-faint); }
.pp-maj .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }

/* ============================================================
   CŒUR DE PAGE : la carte « Vos dates sont libres ? »
   Titre → promesse → sélecteur de dates → réponse → bouton.
   ============================================================ */
.carte-reserver {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: var(--space-6);
  margin-bottom: var(--space-5);
}
.carte-reserver h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 6px; }
.carte-reserver .pitch { color: var(--ink-soft); font-size: 0.95rem; max-width: 46ch; margin-bottom: var(--space-5); }
.carte-reserver .btn-primary { min-width: 260px; }
.note-cal { margin-top: var(--space-4); font-size: 0.85rem; color: var(--ink-faint); }
.note-cal strong { color: var(--ink-soft); font-weight: 700; }
.note-cal s { text-decoration-thickness: 1px; }

/* La réponse du calendrier. Vert = ÉTAT (jamais un CTA, direction-v2). */
.verdict {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  margin: 0 0 var(--space-5); font-size: 0.95rem; min-height: 24px;
}
.verdict .marque { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 7px; }
.verdict .titre { font-weight: 700; }
.verdict .detail { color: var(--ink-soft); flex: 1 1 100%; font-size: 0.88rem; }
.verdict[data-etat="vide"], .verdict[data-etat="partiel"] { color: var(--ink-faint); }
.verdict[data-etat="libre"] .marque { background: var(--accent); }
.verdict[data-etat="libre"] .titre { color: var(--accent-ink); }
.verdict[data-etat="conflit"] .marque { background: color-mix(in srgb, var(--ink) 40%, var(--surface)); }
.verdict[data-etat="conflit"] .titre { color: var(--ink); }

/* ============================================================
   Sélecteur de plage de dates — mêmes classes et même rendu que la zone
   connectée (règles .dp* de portail.css). Seul l'ancrage change : ici le
   popover se cale sous le champ via .dp-ancre (position: relative) au lieu
   du .block-form du portail, et il s'aligne exactement sur le champ.
   ============================================================ */
.dp-ancre { position: relative; margin-bottom: var(--space-4); }
.dp-champ {
  font: inherit; font-size: 1rem; font-weight: 600; text-align: left;
  padding: 9px 14px; min-height: var(--touch-target); cursor: pointer; width: 100%;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-field); color: var(--ink);
}
.dp-champ:hover { border-color: color-mix(in srgb, var(--ink-faint) 60%, var(--line)); }
.dp-champ:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.dp {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop); padding: 16px;
}
.dp[hidden] { display: none; }
.dp-nav { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; pointer-events: none; }
.dp-nav button { pointer-events: auto; width: 36px; height: 36px; border: 1px solid var(--line); background: var(--surface); border-radius: 50%; cursor: pointer; font-size: 1rem; color: var(--ink); }
.dp-nav button:hover { border-color: var(--ink-faint); }
.dp-nav button[disabled] { opacity: 0.35; cursor: default; }
.dp-corps { display: flex; gap: 24px; }
.dp-mois { flex: 1; min-width: 0; }
.dp-titre { text-align: center; font-weight: 700; font-size: 0.95rem; margin-bottom: 10px; line-height: 36px; }
.dp-jours-noms, .dp-grille { display: grid; grid-template-columns: repeat(7, 1fr); }
.dp-jours-noms span { text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--ink-faint); padding-bottom: 6px; text-transform: uppercase; }
.dp-jour {
  font: inherit; font-size: 0.88rem; font-weight: 500; color: var(--ink);
  aspect-ratio: 1; min-height: 38px; border: none; background: transparent; cursor: pointer;
  font-variant-numeric: tabular-nums; border-radius: 0;
}
.dp-jour:not([disabled]):hover { box-shadow: inset 0 0 0 1.5px var(--ink); border-radius: 50%; }
.dp-jour.passe, .dp-jour.occupe { color: var(--ink-faint); cursor: default; }
.dp-jour.occupe { text-decoration: line-through; }
.dp-jour.plage { background: var(--accent-soft); }
.dp-jour.debut, .dp-jour.fin { background: var(--ink); color: var(--surface); font-weight: 700; }
.dp-jour.debut { border-radius: 50% 0 0 50%; }
.dp-jour.fin { border-radius: 0 50% 50% 0; }
.dp-jour.debut.fin { border-radius: 50%; }
/* Un départ le matin tombe sur une nuit prise : une fois choisi, il ne doit
   plus se lire comme « annulé ». La barre disparaît, le récapitulatif dit
   le nombre de nuits. */
.dp-jour.debut.occupe, .dp-jour.fin.occupe { text-decoration: none; }
.dp-pied { margin-top: 12px; font-size: 0.82rem; color: var(--ink-faint); text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.dp-pied span { font-weight: 600; color: var(--ink-soft); }
/* Légende propre à la page publique : le visiteur doit comprendre en une
   seconde ce que veut dire une date barrée. */
.dp-legende {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 0.8rem; color: var(--ink-faint); text-align: center;
}
.dp-legende s { color: var(--ink-faint); font-weight: 700; }
@media (max-width: 700px) {
  .dp-corps { display: block; }
  .dp-mois + .dp-mois { display: none; } /* un seul mois sur téléphone */
}

/* ---------- Section « Demander une réservation » ---------- */
.form-sec { padding-bottom: var(--space-8); }
.form-sec[hidden] { display: none; }
.form-sec h2 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); font-weight: var(--weight-display); letter-spacing: var(--tracking-h2); line-height: 1.14; }
.form-sec .sec-sub { color: var(--ink-soft); margin: 12px 0 var(--space-5); max-width: 52ch; }
/* Les cartes de formulaire du produit sont des colonnes de 460 px (pages
   d'authentification) : ici la carte occupe toute la largeur de lecture. */
.page-publique .form-sec .form-card { max-width: none; }

/* Dates reportées du sélecteur : une seule vérité, on ne ressaisit pas.
   Les cases ont la silhouette d'un champ, déjà remplies. */
.recap-dates { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: stretch; }
.recap-case {
  border: 1.5px solid var(--line); border-radius: var(--radius-field); background: var(--surface);
  padding: 6px 14px; min-height: var(--touch-target); display: flex; flex-direction: column; justify-content: center; min-width: 0;
}
.recap-case .lab { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); }
.recap-case strong { font-size: 0.95rem; font-weight: 700; line-height: 1.3; }
.recap-dates .btn { align-self: stretch; }
.recap-nuits { font-size: 0.85rem; color: var(--ink-faint); margin: 10px 0 var(--space-5); }
@media (max-width: 560px) {
  .recap-dates { grid-template-columns: 1fr 1fr; }
  .recap-dates .btn { grid-column: 1 / -1; }
}

/* « Facultatif » posé DANS l'étiquette : le visiteur sait avant de lire le
   champ qu'il peut le sauter (règle 7-77 ans). */
.hint-inline {
  font-weight: 500; font-size: 0.8rem; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.08em; margin-left: 6px;
}
/* Le nombre de voyageurs n'a pas besoin de toute la largeur. */
.champ-voyageurs input { max-width: 140px; }

/* La réassurance sous le bouton : la phrase qui évite l'abandon (« vous ne
   payez rien, vous ne réservez pas encore »). */
.reassurance {
  margin-top: 14px; font-size: 0.88rem; color: var(--ink-soft);
  max-width: 52ch; line-height: 1.5;
}

/* ---------- Écrans « d'un seul message » (boîte mail, confirmation) ---------- */
.pp-message, .pp-suivi { padding: var(--space-7) 0 var(--space-8); max-width: 640px; }
.pp-message h1, .pp-suivi h1 {
  font-size: clamp(1.9rem, 4.4vw, 2.6rem); font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display); line-height: 1.1;
}
.pp-message-texte { margin-top: var(--space-4); font-size: 1.05rem; color: var(--ink); max-width: 52ch; }
.pp-message-detail { margin-top: 14px; font-size: 0.92rem; color: var(--ink-soft); max-width: 52ch; }
.pp-etapes { margin-top: var(--space-5); display: grid; gap: 10px; padding-left: 20px; }
.pp-etapes li { font-size: 0.92rem; color: var(--ink-soft); max-width: 52ch; }
.pp-message-action { margin-top: var(--space-6); }

/* ---------- Empreinte de carte (mode « Blocage immédiat ») ----------
   Un écran de message, avec un formulaire en bas. On ne cherche pas à faire
   « riche » : la confiance vient du texte, pas de la décoration. */
.pp-empreinte { max-width: 660px; }
.empreinte-recap {
  margin-top: var(--space-6); display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border: 1.5px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface); padding: var(--space-5);
}
.empreinte-recap .lab {
  display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-faint);
}
.empreinte-recap strong { display: block; margin-top: 4px; font-size: 0.95rem; }

.page-publique .empreinte-carte { max-width: none; margin-top: var(--space-6); }
/* Le Payment Element vit dans une iframe servie par Stripe : on lui réserve
   une hauteur de départ pour que la page ne saute pas à son arrivée. */
.empreinte-champ { min-height: 210px; }
.empreinte-attente { font-size: 0.9rem; color: var(--ink-faint); }
.empreinte-carte .error-text { display: block; margin-top: 14px; }
.empreinte-carte .error-text[hidden] { display: none; }

/* ---------- Suivi d'une demande (magic link) ---------- */
.suivi-etat {
  margin-top: var(--space-5); border: 1.5px solid var(--line);
  border-radius: var(--radius-card); background: var(--surface); padding: var(--space-5);
}
.suivi-titre { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; }
.suivi-titre .marque { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--ink-faint); }
.suivi-etat[data-ton="attente"] .marque { background: var(--accent); }
.suivi-etat[data-ton="oui"] .marque { background: var(--accent); }
.suivi-etat[data-ton="oui"] .suivi-titre { color: var(--accent-ink); }
.suivi-etat[data-ton="non"] .marque { background: color-mix(in srgb, var(--ink) 40%, var(--surface)); }
.suivi-texte { margin-top: 10px; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }

.suivi-faits { margin-top: var(--space-5); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.suivi-faits dt { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); }
.suivi-faits dd { margin-top: 4px; font-weight: 700; font-size: 0.95rem; }
@media (max-width: 480px) { .suivi-faits { grid-template-columns: 1fr; } }

.suivi-annuler { margin-top: var(--space-6); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.suivi-aide { font-size: 0.85rem; color: var(--ink-faint); max-width: 34ch; }
.suivi-note { margin-top: var(--space-6); font-size: 0.85rem; color: var(--ink-faint); max-width: 56ch; }

/* ---------- Pied de page : mention non retirable ---------- */
footer.pp { border-top: 1px solid var(--line); padding: var(--space-7) 0 var(--space-8); }
.pp-marque { display: flex; align-items: center; gap: 11px; font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.pp-marque .tuile { width: 26px; height: 26px; flex: none; }
.pp-marque a { color: inherit; }
.pp-pitch { margin-top: 12px; font-size: 0.9rem; color: var(--ink-soft); max-width: 56ch; }
.pp-pitch a { color: var(--accent-ink); font-weight: 700; }
.pp-legal { margin-top: var(--space-5); display: flex; gap: 20px; flex-wrap: wrap; font-size: 0.85rem; }
.pp-legal a { color: var(--ink-faint); text-decoration: none; }
.pp-legal a:hover { color: var(--ink); }

/* ---------- Téléphone ---------- */
@media (max-width: 640px) {
  .page-publique .wrap { padding: 0 16px; }
  .pp-head { padding: var(--space-6) 0 var(--space-5); }
  .carte-reserver { padding: var(--space-5); }
  .carte-reserver .btn-primary { width: 100%; min-width: 0; }
}