/* public-rdv/assets/style.css — page publique rdv.be-web.be (chantier « Rendez-vous
   depuis le CRM », 14/09/2026). Fichier AUTONOME (ce dossier est servi par nginx depuis
   /var/www/rdv, un serveur physiquement distinct du portail) : mêmes tokens/couleurs que
   public/assets/style.css du portail (charte BE WEB, sombre), mais rien n'est partagé au
   chargement — CSP stricte de ce sous-domaine (voir deploy/nginx-rdv.conf), aucune
   ressource externe, polices auto-hébergées (copiées ici, voir @font-face plus bas). */
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
:root{
  --bg:#0b0b0b;--card:#161616;--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.16);
  --txt:#fff;--dim:#9a9a9a;--dim2:#6a6a6a;
  --blue:#0099ff;--blue2:#1aa6ff;--ok:#39d98a;--warn:#f5b840;--danger:#ff5c5c;
  --mono:'Fragment Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Mona Sans','Archivo',system-ui,-apple-system,sans-serif;
}
/* Polices : mêmes fichiers que le portail (public/assets/fonts/), copiés ici tels quels
   (licence OFL jointe, fonts/OFL-MonaSans.txt) — repli système si jamais absentes. */
@font-face{font-family:'Mona Sans';src:url(fonts/MonaSans.woff2) format('woff2');font-weight:200 900;font-stretch:75% 125%;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(fonts/InstrumentSerif-Italic.woff2) format('woff2');font-style:italic;font-display:swap}
@font-face{font-family:'Fragment Mono';src:url(fonts/FragmentMono.woff2) format('woff2');font-display:swap}

html{-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--txt);font-family:var(--sans);font-size:16px;line-height:1.5;min-height:100vh}
a{color:var(--txt);text-decoration:none}a:hover{color:var(--blue)}
button{font:inherit;color:inherit}
h1{font-weight:800;font-stretch:112%;letter-spacing:-.04em;line-height:1;font-size:clamp(26px,5vw,34px)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.dim{color:var(--dim)}.small{font-size:14px}
.hidden{display:none!important}
.stack{display:flex;flex-direction:column;gap:16px}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* « Ajouter à mon agenda » : les trois agendas, le plus probable en premier selon l'appareil */
.agenda{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
/* « Qui je suis » (14/09 soir) : la carte Quentin remplace le pied « BE WEB — Tournai » */
.qui{display:flex;gap:14px;align-items:center;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.qui img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid var(--blue);flex-shrink:0}
.qui b{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em}
.qui span{display:block;font-size:13px;color:var(--dim)}
.qui em{display:block;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--dim);margin:2px 0 8px}
.qui .contacts{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;margin:0}
.qui .contacts a{white-space:nowrap;color:var(--txt)}.qui .contacts a:hover{color:var(--blue)}

/* boutons (mêmes classes que public/assets/style.css : .btn .ghost .sm .full .big) */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--blue);color:#fff;font-weight:600;font-size:15px;padding:13px 20px;min-height:46px;border-radius:999px;letter-spacing:-.01em;transition:.3s cubic-bezier(.22,1,.36,1);border:0;cursor:pointer;font-family:var(--sans)}
.btn:hover{color:#fff;background:var(--blue2);box-shadow:0 12px 34px -10px rgba(0,153,255,.7)}
.btn.ghost{background:rgba(255,255,255,.06);border:1px solid var(--line2)}.btn.ghost:hover{background:rgba(255,255,255,.11);box-shadow:none}
.btn.sm{padding:8px 14px;min-height:38px;font-size:14px}
.btn.full{width:100%}.btn.big{padding:16px 26px;min-height:54px;font-size:16px}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.link{background:none;border:0;padding:0;color:var(--blue);cursor:pointer;font-size:inherit;font-family:inherit}
.link:hover{text-decoration:underline}

/* carte centrale (mêmes classes .auth .glow .box que public/assets/style.css) */
.auth{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;position:relative;overflow:hidden}
.auth .glow{position:absolute;inset:auto 0 -40% 0;height:70vh;background:radial-gradient(50% 60% at 50% 100%,rgba(0,153,255,.25),transparent 70%);pointer-events:none}
.auth .box{position:relative;width:min(440px,100%);background:var(--card);border:1px solid var(--line);border-radius:24px;padding:28px 22px}
@media(min-width:520px){.auth .box{padding:36px}}
.auth h1{margin-bottom:6px}.auth h1 .emo{margin-right:8px}
.auth .sub{color:var(--dim);font-size:15px;margin-bottom:18px}
.auth .foot{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);text-align:center;font-size:13px;color:var(--dim)}

/* clé/valeur (récap du rendez-vous) */
.kv{display:grid;grid-template-columns:1fr;gap:0;margin-bottom:18px}
.kv div{display:flex;justify-content:flex-start;gap:10px;padding:13px 0;border-top:1px solid var(--line);font-size:15px;text-align:left}
.kv div:first-child{border-top:0}
/* Addendum du 17/09/2026 (§10) : seule l'ICÔNE (toujours le premier enfant d'une ligne
   .kv, ex. « ⏳ », « 📝 ») ne doit jamais rétrécir — un `.kv span` générique s'appliquait
   aussi au TEXTE quand il vivait dans un <span> (ex. l'attente du lien visio),
   l'empêchant de rétrécir/passer à la ligne (`flex:0 0 auto` sur un span sans largeur
   fixe) : débordait hors de la carte sur mobile, repéré sur la capture du 17/09/2026
   (r-jeton-motif-mobile.png) en ajoutant le motif juste en dessous, qui lui est dans un
   <b> et n'a jamais eu ce souci. */
.kv div>span:first-child{color:var(--dim);flex:0 0 auto}
.kv b{font-weight:600}
.kv b a{color:var(--blue);text-decoration:underline}

/* alertes (mêmes classes .alert .info .ok .warn .danger) */
.alert{border-radius:14px;padding:13px 16px;font-size:14.5px;display:flex;gap:10px;align-items:flex-start;border:1px solid}
.alert.info{background:rgba(0,153,255,.08);border-color:rgba(0,153,255,.35)}
.alert.ok{background:rgba(57,217,138,.08);border-color:rgba(57,217,138,.35)}
.alert.warn{background:rgba(245,184,64,.08);border-color:rgba(245,184,64,.4)}
.alert.danger{background:rgba(255,92,92,.08);border-color:rgba(255,92,92,.4)}
.alert b{display:block}

/* chargement */
.loading{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:14.5px;padding:26px 0;justify-content:center}
.loading i{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.15);border-top-color:var(--blue);animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* formulaire (refus, commentaire, et depuis le lot C — prendre.html : coordonnées, code) */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-size:14px;font-weight:600;color:var(--txt)}
.input{width:100%;background:#0e0e0e;border:1px solid var(--line2);border-radius:12px;padding:13px 15px;color:#fff;font:inherit;font-size:16px;min-height:50px;outline:0;transition:.2s}
.input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,153,255,.18)}
.input::placeholder{color:var(--dim2)}
textarea.input{min-height:100px;resize:vertical;line-height:1.5}

/* créneaux de repli (mêmes classes .radios .radio) — encore utilisées par le refus,
   plus par la replanification (voir .jours-creneaux/.heures-creneaux plus bas) */
.radios{display:grid;gap:8px;margin-bottom:4px}
.radio{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line);border-radius:12px;cursor:pointer;font-size:14.5px}
.radio:has(input:checked){border-color:var(--blue);background:rgba(0,153,255,.07)}
.radio input{accent-color:var(--blue);width:18px;height:18px}

/* calendrier mensuel (chantier « calendrier », 17/09/2026 — assets/creneaux.js, partagé
   entre /r/<jeton> et /prendre.html). Mobile-first : calendrier puis heures empilés ;
   côte à côte à partir de 720px (.cal-corps). */
.cal{display:flex;flex-direction:column;gap:16px}
.cal-corps{display:flex;flex-direction:column;gap:20px} /* pleine largeur partout : le côte à côte desktop écrasait la grille (17/09) */
.cal-calendrier{min-width:0}
.cal-entete{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.cal-mois{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--txt);font-weight:600}
.cal-nav{width:36px;height:36px;flex-shrink:0;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--txt);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cal-nav:hover{background:rgba(255,255,255,.09)}
.cal-nav:disabled{opacity:.3;cursor:not-allowed}
.cal-jours-sem{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.cal-jours-sem span{text-align:center;font-size:10.5px;color:var(--dim2);text-transform:uppercase;letter-spacing:.06em}
.cal-grille{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-jour{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--dim2);font-size:14px;font:inherit}
.cal-jour.hors-mois{visibility:hidden}
.cal-jour:disabled{cursor:not-allowed}
.cal-jour.a-des-creneaux{color:var(--txt);background:rgba(0,153,255,.1);border-color:rgba(0,153,255,.3);cursor:pointer;font-weight:600}
.cal-jour.a-des-creneaux:hover{background:rgba(0,153,255,.18)}
.cal-jour.a-des-creneaux.aujourdhui{box-shadow:inset 0 0 0 2px var(--blue2)}
.cal-jour.aujourdhui{box-shadow:inset 0 0 0 1px var(--dim2)}
.cal-jour.actif{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:none}
.cal-heures{min-width:0}
/* Dates en minuscules (convention du dépôt) : « jeudi 17 septembre », « septembre 2026 »
   — aucun text-transform ici, le texte produit par creneaux.js est déjà la forme voulue. */
.cal-heures-titre{font-size:14.5px;font-weight:700;margin-bottom:10px}
.cal-heures-vide{padding-top:2px}
.cal-recap{font-size:14.5px;color:var(--txt);background:rgba(0,153,255,.09);border:1px solid rgba(0,153,255,.32);border-radius:12px;padding:12px 14px}
/* Une journée large (ex. 8h-20h, pas 30 min) peut aligner ~20 heures : sans borne, la
   liste pousse les boutons Continuer/Retour hors écran (vu sur les captures desktop ET
   mobile du 17/09/2026 — la colonne "heures" du calendrier ne fait qu'une chip de large
   sur desktop, donc une liste plein écran). Défilement INTERNE plutôt qu'illimité. */
.heures-creneaux{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-bottom:4px}
.chip-heure{padding:11px 8px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--txt);font-size:14px;cursor:pointer;text-align:center;font:inherit}
.chip-heure:hover{border-color:var(--line2);background:rgba(255,255,255,.07)}
.chip-heure.actif{border-color:var(--blue);background:rgba(0,153,255,.16);color:#fff}

/* barre de progression (prendre.html, retour de Wakny 17/09/2026 — remplace l'ancienne
   ligne « 1 · 2 · 3 · … · 9 »). Largeur posée en JS via .style.width (assets/prendre.js,
   majEtapes()) : jamais de style= dans le HTML, CSP stricte de ce sous-domaine. */
.progression{margin-bottom:16px}
.progression-barre{height:4px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden}
.progression-barre>span{display:block;height:100%;width:0;background:var(--blue);border-radius:999px;transition:width .3s cubic-bezier(.22,1,.36,1)}

.foot{font-size:13.5px;color:var(--dim);margin-top:6px}

/* ---------------------------------------------------------------------------------
   Chantier « pas à pas » (17/09/2026 fin d'après-midi, §11, décisions #52/#53) — page
   prendre.html scindée en neuf écrans (un par question). Règles ajoutées EN FIN de
   fichier uniquement (convention du chantier) : rien ci-dessus n'est modifié.
   --------------------------------------------------------------------------------- */

/* Écrans ④/⑤ : LE MÊME calendrier mensuel (assets/creneaux.js, jamais modifié) scindé
   en deux phases par prendre.js — une classe posée sur le bloc [data-etape="creneau"]
   masque la moitié qui ne correspond pas à la phase active (④ jour / ⑤ heure). */
[data-etape="creneau"].phase-jour .cal-heures,
[data-etape="creneau"].phase-jour .cal-recap{display:none}
[data-etape="creneau"].phase-heure .cal-calendrier{display:none}

/* Écran ① (« Vous êtes ») : deux grands carrés cliquables, role="radio" (voir
   prendre.js pour le clavier). Le motif (écran ③) est passé en liste déroulante (retour
   de Wakny, 17/09/2026, voir .input/select plus haut dans ce fichier) : `.carres-motifs`
   et `.carre-emo` (grille et emoji des anciens carrés de motif) sont donc RETIRÉS ici —
   plus aucune référence dans prendre.html/prendre.js. */
.carres{display:grid;gap:10px;margin-bottom:4px}
.carres-2{grid-template-columns:1fr 1fr}
.carre{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:20px 12px;min-height:92px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03);color:var(--txt);cursor:pointer;font:inherit;font-size:14.5px;font-weight:600}
.carres-2 .carre{min-height:120px;font-size:15.5px}
.carre:hover{border-color:var(--line2);background:rgba(255,255,255,.07)}
.carre:focus-visible{outline:2px solid var(--blue2);outline-offset:2px}
.carre[aria-checked="true"]{border-color:var(--blue);background:rgba(0,153,255,.14);box-shadow:0 0 0 1px var(--blue) inset}

/* Étape « heure » en deux temps (retour de Wakny, 17/09/2026) : Matin/Après-midi/Soir
   empilés pleine largeur (assets/creneaux.js, `groupePeriodes`) — lisibles sur un mobile
   étroit, jamais de mur de chips d'un coup pour une plage large (ex. 8h-20h, pas 20 min). */
.periodes{display:flex;flex-direction:column;gap:10px}
.periode{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03);color:var(--txt);cursor:pointer;font:inherit;text-align:left}
.periode:hover{border-color:var(--line2);background:rgba(255,255,255,.07)}
.periode:focus-visible{outline:2px solid var(--blue2);outline-offset:2px}
.periode:disabled{opacity:.4;cursor:not-allowed}
.periode:disabled:hover{border-color:var(--line);background:rgba(255,255,255,.03)}
.periode-titre{font-size:15.5px;font-weight:700}
.periode-compte{font-size:13px;color:var(--dim)}
.cal-retour-periode{display:inline-block;margin-bottom:10px}
.cal-periode-titre{margin-bottom:10px}

/* ---------------------------------------------------------------------------------
   Direction B validée par Wakny (17/09/2026, retours sur la page publique testée sur
   téléphone) : bandeau « qui » compact EN HAUT de la carte (remplace <h1>), signature du
   bas réduite à une ligne de contacts. Règles ajoutées EN FIN de fichier (même
   convention que le chantier « pas à pas » ci-dessus) : rien au-dessus n'est modifié.
   --------------------------------------------------------------------------------- */

/* `.qui.top` = variante compacte de `.qui` (photo/nom/accroche, base commune inchangée,
   voir plus haut dans ce fichier — `.qui` reste utilisée telle quelle par
   index.html/indisponible.html, jamais modifiée). Pas de filet du haut (elle ouvre la
   carte), photo plus petite pour tenir sur 360px sans repousser la question sous la
   ligne de flottaison. */
.qui.top{margin:0 0 16px;padding:0 0 16px;border-top:0;border-bottom:1px solid var(--line)}
.qui.top img{width:56px;height:56px}
.qui.top em{margin:2px 0 0}

/* Ligne de contacts du bas, seule (photo/nom remontés dans `.qui.top`) — volontairement
   HORS de tout `.qui` : un `.contacts` nu ici, pas `.qui .contacts` (13px, réservé à
   index.html/indisponible.html — plus spécifique, continue à s'appliquer là-bas telle
   quelle même si ce fichier est partagé). */
.contacts{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;font-size:12px;color:var(--dim);margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.contacts a{color:var(--dim)}
.contacts a:hover{color:var(--blue)}