/* Noval — la page de démonstration. Même système que le site (styles.css : grille, espacements, typographie,
   couleurs, arrondis, boutons) ; ici, seulement ce qui est propre à la page. */

/* la page est claire du haut jusqu'au pied : le fond crème évite tout liseré sombre entre deux sections */
body { background: var(--paper); }

/* ---------- Titre et consigne ---------- */
/* le titre (taille des titres de section, .h-sec) et sa consigne, serrés sous le header : l'appel et la fiche tiennent dans l'écran (1440 × 800) */
.dhead { padding-top: calc(80px + var(--s4)); padding-bottom: var(--s5); }
.dhead .sec-p { margin-top: var(--s2); color: var(--ink); max-width: none; }   /* sur une ligne en desktop */

/* ---------- Grille : le panneau d'appel (colonnes 1 à 7) à la hauteur de la fiche (8 à 12), les idées de questions sous l'appel ---------- */
.dmain { padding-top: 0; padding-bottom: var(--s6); }
.dmain__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s5); align-items: start; }
.dcall { grid-column: 1 / span 7; grid-row: 1; align-self: stretch; }
.dmain .menu-card { grid-column: 8 / -1; grid-row: 1; }   /* sur le site, la fiche occupe les colonnes 1 à 5 de sa section */
.dideas { grid-column: 1 / span 7; grid-row: 2; }

/* ---------- Le panneau d'appel : sur le prune du premier écran, avec son onde ---------- */
.dcall {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  padding: var(--s5) var(--s6) var(--s6); border-radius: var(--r-card); color: var(--cream);
  background: radial-gradient(120% 90% at 72% 0%, #33152a 0%, var(--night) 62%), var(--night);
}
.dcall__wave { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.js .dcall__wave { opacity: 0; transition: opacity var(--t-slow) var(--ease-out); }
.js .dcall__wave.is-lit { opacity: 1; }
.dcall > :not(.dcall__wave) { position: relative; z-index: 1; }
.dcall [hidden] { display: none !important; }

.dcall__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--cream-4); }
.dcall__name { font: 560 var(--fs-h3)/var(--lh-snug) var(--solid); font-variation-settings: "opsz" 24, "SOFT" 50, "WONK" 0; color: var(--cream); }
.dcall__line { display: block; margin-top: 2px; font-size: var(--fs-meta); color: var(--cream-2); }
.dcall__status { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-small); color: var(--cream-2); white-space: nowrap; }
.dcall__timer { font-variant-numeric: tabular-nums; color: var(--cream); }
.dcall__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cream-3); }
.dcall[data-state="asking"] .dcall__dot, .dcall[data-state="connecting"] .dcall__dot { background: var(--peach); }
.dcall[data-state="live"] .dcall__dot { background: var(--peach); animation: dot 2s ease-out infinite; }

/* les sous-titres : une zone de hauteur fixe (rien ne bouge pendant l'appel). En haut, la dernière phrase de la cliente,
   petite et discrète (2 lignes au plus) ; dessous, seule la réplique en cours de Sophie, en grand, remplacée par la suivante
   avec un fondu court (demo.js). Une longue réplique est réduite pour tenir dans la zone (demo.js, fitNow). */
.dcall__subs { --subs-h: 172px; margin-top: var(--s5); height: var(--subs-h); display: grid; grid-template-rows: calc(2 * 1.3 * var(--fs-small)) auto minmax(0, 1fr); row-gap: var(--s1); }
.dcall__you { font-size: var(--fs-small); line-height: 1.3; color: var(--cream-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dcall__who { font: 600 var(--fs-meta)/var(--lh-snug) var(--sans); color: var(--cream-2); }
.dcall__now { --now-fs: 1.625rem; --now-min: 17px; min-height: 0; overflow: hidden; max-width: 39rem; font: 440 var(--now-fs)/1.3 var(--solid); font-variation-settings: "opsz" 48, "SOFT" 30, "WONK" 0; letter-spacing: -.012em; color: var(--cream); text-wrap: balance; }
.dcall__now.is-preview { color: var(--cream-2); }

.dcall__band { flex: 1; min-height: 110px; }

.dcall__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.dcall__start, .dcall__hang { height: var(--btn-h-main); }
.dcall__start:disabled { cursor: default; background: rgba(248, 236, 230, .14); color: var(--cream-2); box-shadow: inset 0 0 0 1px var(--cream-4); }
.dcall__hang { background: #c8475f; color: #fff; }
.dcall__hang:hover { background: #b23a51; }
.dcall__hang svg { width: 20px; fill: currentColor; }
.dcall .btn:focus-visible { outline-color: var(--peach); }
.dcall__note { margin-top: var(--s3); font-size: var(--fs-meta); color: var(--cream-2); }
.dcall__msg { margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-ctl); background: rgba(248, 236, 230, .07); box-shadow: inset 0 0 0 1px var(--cream-4); font-size: var(--fs-small); line-height: var(--lh-text); color: var(--cream); }
.dcall__msg a, .dcall__inapp a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--cream-3); }

/* navigateur d'Instagram : un message à la place du bouton */
.dcall__inapp { display: grid; gap: var(--s3); justify-items: start; }
.dcall__inapp p { max-width: 32em; font-size: var(--fs-body); line-height: var(--lh-text); color: var(--cream); }
.dcall__inapp .dcall__alt { font-size: var(--fs-small); color: var(--cream-2); }

/* ---------- Après l'appel : ce que la gérante aurait reçu, à la place du panneau (même case de la grille) ---------- */
.dres { grid-column: 1 / span 7; grid-row: 1; align-self: start; outline: none; }
.dres[hidden] { display: none; }
.dres__t { font: 560 var(--fs-h3)/var(--lh-snug) var(--solid); font-variation-settings: "opsz" 24, "SOFT" 50, "WONK" 0; color: var(--ink); }
.dres__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s4); align-items: start; margin-top: var(--s4); }
/* les cartes SMS et e-mail : à plat, filet de 1 px, arrondi des cartes (12 px) */
.dmsg { padding: var(--s4) var(--s5) var(--s5); border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.dmsg__top { display: flex; align-items: center; gap: var(--s3); }
.dmsg__app { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--night); }
.dmsg__app svg { width: 17px; fill: none; stroke: var(--cream); stroke-width: 1.7; stroke-linejoin: round; }
.dmsg__app--sms svg { fill: var(--cream); stroke: none; }
.dmsg__from { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.dmsg__when { margin-left: auto; font-size: var(--fs-meta); color: var(--ink-3); }
.dmsg__body { margin-top: var(--s3); font-size: var(--fs-body); line-height: var(--lh-text); color: var(--ink); overflow-wrap: anywhere; }
.dmail__subj { margin-top: var(--s3); font: 560 var(--fs-h3)/var(--lh-snug) var(--solid); font-variation-settings: "opsz" 24, "SOFT" 50, "WONK" 0; color: var(--ink); }
.dmail dl { margin-top: var(--s2); }
.dmail dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); padding: var(--s2) 0; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.dmail dt { color: var(--ink-2); }
.dmail dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.dmail__sum { padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--fs-small); line-height: var(--lh-text); color: var(--ink-2); }
.dres__note { margin-top: var(--s3); font-size: var(--fs-meta); color: var(--ink-3); }
.dres__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s4); }

/* ---------- La fiche (celle du site), plus serrée ici, sans passer sous l'échelle de texte ---------- */
.dmain .menu-card { padding: var(--s4) var(--s5); }
.dmain .menu-card__h { padding-bottom: var(--s2); }
.dmain .menu-card__sec { padding-top: var(--s2); }
.dmain .menu-card li { padding: 2px 0; }
.dmain .menu-card__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }   /* Horaires et Consignes côte à côte, même dans la colonne étroite */
.dmain .menu-card__plan { margin-top: var(--s3); padding-top: var(--s2); }

/* ---------- Sous l'appel : des idées de questions ---------- */
.dideas__t { font: 560 var(--fs-h3)/var(--lh-snug) var(--solid); font-variation-settings: "opsz" 24, "SOFT" 50, "WONK" 0; color: var(--ink); }
.dideas ul { margin-top: var(--s3); border-bottom: 1px solid var(--line); }
.dideas li { padding: var(--s3) 0; border-top: 1px solid var(--line); font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--ink-2); }

/* ---------- La suite ---------- */
.dnext { padding-top: 0; }   /* directement après le contenu */
.dnext .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); padding-top: var(--s5); border-top: 1px solid var(--line-2); }

/* ---------- Tablette : une colonne ---------- */
@media (max-width: 900px) {
  /* l'appel, la fiche, puis les idées de questions (l'ordre du HTML) */
  .dmain__grid { grid-template-columns: minmax(0, 1fr); }
  .dcall, .dres, .dmain .menu-card, .dideas { grid-column: 1 / -1; grid-row: auto; }
  .dcall { min-height: 540px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .dhead { padding-top: calc(64px + var(--s5)); padding-bottom: var(--s5); }
  .dcall { padding: var(--s4) var(--s5) var(--s5); }
  .dcall__subs { --subs-h: 236px; margin-top: var(--s4); }
  .dmain .menu-card__cols { grid-template-columns: minmax(0, 1fr); }   /* sur mobile, Horaires puis Consignes, l'un sous l'autre */
  .dcall__now { --now-fs: 1.375rem; --now-min: 15px; }
  .dcall__band { min-height: 130px; }
  .dcall__ctl, .dcall__ctl .btn, .dcall__inapp .btn { width: 100%; }
  .dcall__inapp { justify-items: stretch; }
  .dres__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .dres__ctl, .dres__ctl .btn { width: 100%; }
  .dnext .wrap { flex-direction: column; align-items: stretch; }
  .dnext .btn { width: 100%; }
}