/* assets/rdv.css, pages publiques de prise de rendez-vous (rdv.php, rdv_gerer.php).
   Direction « Atelier de précision » : encre marine et porcelaine, un bleu de cobalt, une menthe pour ce qui va bien.
   Fraunces pour les titres (l'italique en accent : le grand titre et une date par carte), Manrope pour le texte et les
   heures, JetBrains Mono pour les mesures (étapes, calendrier, repères, cotes). */

@font-face { font-family:'Fraunces DIS'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('fonts/fraunces-wght-normal.woff2') format('woff2-variations'), url('fonts/fraunces-wght-normal.woff2') format('woff2'); }
@font-face { font-family:'Fraunces DIS'; font-style:italic; font-weight:100 900; font-display:swap;
  src:url('fonts/fraunces-wght-italic.woff2') format('woff2-variations'), url('fonts/fraunces-wght-italic.woff2') format('woff2'); }
@font-face { font-family:'Manrope DIS'; font-style:normal; font-weight:200 800; font-display:swap;
  src:url('fonts/manrope-wght-normal.woff2') format('woff2-variations'), url('fonts/manrope-wght-normal.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono DIS'; font-style:normal; font-weight:100 800; font-display:swap;
  src:url('fonts/jetbrains-mono-wght-normal.woff2') format('woff2-variations'), url('fonts/jetbrains-mono-wght-normal.woff2') format('woff2'); }

:root {
  --f-titre:'Fraunces DIS', Georgia, 'Times New Roman', serif;
  --f-texte:'Manrope DIS', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --f-mono:'JetBrains Mono DIS', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* encre (bandeau) */
  --encre:#0c1830; --encre-2:#16294b; --encre-txt:#e9eef7; --encre-doux:#a3b3cf; --encre-trait:rgba(170,190,225,.24);
  /* page */
  --bg:#f3f5f9; --carte:#ffffff; --carte-2:#f7f9fc; --texte:#0e1a2f; --doux:#5a6880; --ligne:#e1e6ee; --ligne-2:#c9d2df;
  --bord:#aab5c7; --bord-champ:#8592a8;
  --champ:#ffffff; --champ-ro:#eef1f6; --champ-txt-ro:#3d4a60; --place:#687489;
  --accent:#2253b4; --accent-fonce:#1b4598; --accent-clair:#eef3fd; --accent-pale:#d3dff7; --accent-txt:#1b3a80;
  --primaire:#1a355c; --primaire-fonce:#10244a; --sur-primaire:#ffffff;
  --ok:#0a7a63; --ok-clair:#e7f6f1; --ok-ligne:#bfe7da; --menthe:#2fd3a7;
  --attente:#4b45c9; --attente-clair:#eeedfd; --attente-ligne:#cfcaf6;
  --err:#c22a32; --err-clair:#fdf1f1; --err-ligne:#f1c3c6;
  --neutre:#3d4a60; --neutre-clair:#edf0f5;
  --hachure:#e2e7ef; --vide:#fafbfc;
  --ombre:0 1px 2px rgba(12,24,48,.05), 0 16px 36px -24px rgba(12,24,48,.38);
  --focus:0 0 0 3px rgba(34,83,180,.22);
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--texte); font-family:var(--f-texte); font-size:16px; line-height:1.55; }
body { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a { color:var(--accent); text-underline-offset:3px; text-decoration-thickness:1px; }
button { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
[hidden] { display:none !important; }
.nw, a[href^="tel:"] { white-space:nowrap; }
.sr { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.wrap { max-width:680px; margin:0 auto; padding:14px max(14px, env(safe-area-inset-right)) 40px max(14px, env(safe-area-inset-left)); }

/* ─── Bandeau : encre marine, quadrillage d'ingénieur, réglet gradué, cadran ─── */
.top { position:relative; overflow:hidden; isolation:isolate; margin:0 0 14px; padding:15px 20px 30px; border-radius:18px;
  color:var(--encre-txt); background:radial-gradient(130% 120% at 100% 0%, var(--encre-2) 0%, var(--encre) 58%);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 20px 40px -26px rgba(12,24,48,.7); }
.top::before { content:''; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background-image:linear-gradient(rgba(150,175,225,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(150,175,225,.13) 1px, transparent 1px),
                   linear-gradient(rgba(150,175,225,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(150,175,225,.055) 1px, transparent 1px);
  background-size:64px 64px, 64px 64px, 16px 16px, 16px 16px; background-position:-1px -1px;
  -webkit-mask-image:linear-gradient(200deg, #000 10%, rgba(0,0,0,.35) 55%, transparent 90%); mask-image:linear-gradient(200deg, #000 10%, rgba(0,0,0,.35) 55%, transparent 90%); }
.top::after { content:''; position:absolute; left:20px; right:20px; bottom:10px; height:10px; pointer-events:none;
  background:linear-gradient(var(--encre-trait), var(--encre-trait)) 0 100% / 100% 1px no-repeat,
             linear-gradient(90deg, rgba(185,200,230,.42) 1px, transparent 1px) 0 100% / 8px 5px repeat-x,
             linear-gradient(90deg, rgba(200,214,240,.8) 1px, transparent 1px) 0 100% / 40px 10px repeat-x; }
.top-ligne { display:flex; justify-content:space-between; align-items:center; gap:12px; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.02em; }
.top .marque { min-width:0; overflow:hidden; text-overflow:ellipsis; color:var(--encre-doux); white-space:nowrap; }
.etat { display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; color:#c6f1e4; white-space:nowrap; }
.led { display:inline-block; flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--menthe);
  box-shadow:0 0 0 3px rgba(47,211,167,.16), 0 0 10px rgba(47,211,167,.75); animation:led 2.8s ease-in-out infinite; }
.etat.veille { color:var(--encre-doux); }
.etat.veille .led { background:#7d8aa3; box-shadow:0 0 0 3px rgba(125,138,163,.18); animation:none; }
.etat.alerte { color:#ffc9cc; }
.etat.alerte .led { background:#ff5a64; box-shadow:0 0 0 3px rgba(255,90,100,.18), 0 0 10px rgba(255,90,100,.7); }
@keyframes led { 0%, 100% { opacity:1; } 50% { opacity:.45; } }
.top h1 { margin:15px 0 10px; padding-right:100px; font-family:var(--f-titre); font-style:italic; font-weight:440; font-size:clamp(34px, 10vw, 44px); line-height:1.02; letter-spacing:-.012em; color:#fff; }
.top-sous { margin:0; color:#bcc8dc; font-size:15px; line-height:1.5; max-width:34ch; }
.specs { display:flex; flex-wrap:wrap; margin:14px 0 0; padding:0; font-family:var(--f-mono); }
.specs > div { padding:0 14px 0 0; margin:0 14px 0 0; border-right:1px solid var(--encre-trait); }
.specs > div:last-child { border-right:0; margin-right:0; padding-right:0; }
.specs dt { font-size:10.5px; color:var(--encre-doux); letter-spacing:.03em; }
.specs dd { margin:1px 0 0; font-size:12.5px; color:#fff; white-space:nowrap; }
.specs .large { display:none; }
.niveau { display:inline-flex; gap:4px; vertical-align:1px; }
.niveau i { width:7px; height:7px; border-radius:50%; border:1px solid rgba(200,214,240,.7); }
.niveau i.plein { background:var(--menthe); border-color:var(--menthe); }
@media (min-width:560px) { .specs .large { display:block; } }

/* Cadran : décor. Aiguilles à l'heure de Paris sur rdv.php (trotteuse en balayage), arrêtées sur l'heure du rendez-vous
   sur rdv_gerer.php. Les inscriptions et le guichet de date ne se montrent que sur grand écran. */
.cadran { position:absolute; z-index:0; right:18px; top:46px; width:86px; aspect-ratio:1; pointer-events:none; filter:drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.cadran text, .cadran .c-date { display:none; }
.cadran svg { display:block; width:100%; height:100%; fill:none; }
.c-lunette { stroke:rgba(190,205,235,.3); stroke-width:1; }
.c-fond { fill:url(#cadran-fond); stroke:rgba(190,205,235,.16); stroke-width:1; }
.c-min { stroke:rgba(200,214,240,.5); stroke-width:5; stroke-dasharray:.9 9.886; stroke-dashoffset:.45; }
.c-heures { stroke:#dfe7f5; stroke-width:11; stroke-dasharray:2.4 49.96; stroke-dashoffset:1.2; }
.c-marque { fill:#eef2f9; font-family:var(--f-titre); font-style:italic; font-weight:500; font-size:21px; text-anchor:middle; }
.c-sous { fill:#c3cee2; font-family:var(--f-mono); font-size:8.4px; letter-spacing:.05em; text-anchor:middle; }
.c-sous.bas { fill:#93a3c0; font-size:7.6px; }
.c-date rect { fill:#eef2f9; stroke:rgba(10,20,40,.6); stroke-width:1; }
.c-date text { fill:#0c1830; font-family:var(--f-mono); font-size:12px; font-weight:600; text-anchor:middle; }
.aig { position:absolute; inset:0; transform:rotate(var(--a)); }
.aig::before { content:''; position:absolute; left:50%; bottom:50%; transform:translateX(-50%); border-radius:4px; background:#eef2f9; box-shadow:0 0 0 .5px rgba(12,24,48,.5); }
.aig-h { --a:305deg; } .aig-h::before { width:2.6%; height:27%; margin-bottom:-3%; }
.aig-m { --a:60deg; } .aig-m::before { width:1.6%; height:40%; margin-bottom:-4%; }
.aig-s { --a:0deg; } .aig-s::before { width:max(1px, .7%); height:47%; margin-bottom:-10%; background:#6f95ff; box-shadow:none; }
.aig-s::after { content:''; position:absolute; left:50%; top:54.5%; width:3.2%; aspect-ratio:1; transform:translateX(-50%); border-radius:50%; background:#6f95ff; }
.cadran .axe { position:absolute; left:50%; top:50%; width:4.4%; aspect-ratio:1; transform:translate(-50%, -50%); border-radius:50%; background:#eef2f9; box-shadow:0 0 0 1.5px #6f95ff; }
.cadran.arrete .aig-s { display:none; }
.cadran.vivant .aig-s { animation:tour 60s linear infinite; }
.cadran.vivant .aig-m { animation:tour 3600s linear infinite; }
.cadran.vivant .aig-h { animation:tour 43200s linear infinite; }
@keyframes tour { to { transform:rotate(calc(var(--a) + 360deg)); } }

/* Après la première étape, sur téléphone : le bandeau se replie en bandeau courant (titre sur une ligne, voyant). */
@media (max-width:999px) {
  html[data-etape="suite"] .top { padding:12px 16px 25px; border-radius:16px; }
  html[data-etape="suite"] .top::after { left:16px; right:16px; bottom:8px; height:8px; }
  html[data-etape="suite"] .top h1 { margin:7px 0 0; padding-right:0; font-size:27px; line-height:1.12; }
  html[data-etape="suite"] .top .top-sous, html[data-etape="suite"] .top .specs { display:none; }
  /* Cadran replié : caché sans display:none, qui remettrait ses aiguilles à l'heure du chargement au retour. */
  html[data-etape="suite"] .top .cadran { visibility:hidden; }
}

/* ─── Aperçu (module fermé au public) ─── */
.apercu { position:relative; margin:0 0 14px; padding:12px 14px 12px 46px; border:1px dashed #8aa6e6; border-radius:14px; background:var(--accent-clair); color:var(--accent-txt); font-size:14px; line-height:1.5; }
.apercu svg { position:absolute; left:14px; top:13px; width:20px; height:20px; fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.apercu b { font-weight:700; }

/* ─── Étapes : trois segments de réglet ─── */
.etapes { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin:6px 0 14px; padding:0; list-style:none; }
.etapes li { position:relative; display:flex; align-items:baseline; gap:7px; min-width:0; padding:9px 0 0; border-top:2px solid var(--ligne-2); color:var(--doux); font-size:13px; white-space:nowrap; transition:border-color .25s, color .25s; }
.etapes li::before { content:''; position:absolute; left:0; top:-7px; width:2px; height:9px; border-radius:1px; background:var(--ligne-2); transition:background .25s; }
.etapes .n { font-family:var(--f-mono); font-size:11.5px; font-weight:600; letter-spacing:.02em; }
.etapes .t { overflow:hidden; text-overflow:ellipsis; }
.etapes li.actif { border-top-color:var(--accent); color:var(--texte); font-weight:700; }
.etapes li.actif::before { background:var(--accent); }
.etapes li.actif .n { color:var(--accent); }
.etapes li.fait { border-top-color:var(--ok); color:var(--texte); }
.etapes li.fait::before { background:var(--ok); }
.etapes li.fait .n { color:var(--ok); }

/* ─── Cartes ─── */
.carte { position:relative; margin:0 0 14px; padding:20px 18px; border:1px solid var(--ligne); border-radius:18px; background:var(--carte); box-shadow:var(--ombre); animation:entree .32s cubic-bezier(.2,.7,.2,1) both; }
@keyframes entree { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.carte h2 { margin:0 0 12px; font-family:var(--f-titre); font-style:normal; font-weight:520; font-size:25px; line-height:1.18; letter-spacing:-.012em; color:var(--texte); }
.k { display:flex; align-items:center; gap:10px; margin:0 0 8px; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.03em; color:var(--doux); }
.k::after { content:''; flex:1; height:9px; background:linear-gradient(var(--ligne-2), var(--ligne-2)) 0 50% / 100% 1px no-repeat, linear-gradient(var(--ligne-2), var(--ligne-2)) 100% 0 / 1px 100% no-repeat; }
.k b { color:var(--accent); font-weight:600; }
.sous { margin:-4px 0 16px; color:var(--doux); font-size:14.5px; line-height:1.5; }
.entete { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; }
.entete h2 { margin:0; min-width:0; padding-top:4px; }
.entete + .sous { margin-top:2px; }
/* Fiche : un statut long (« En attente de l'avis du technicien ») passe sous le titre au lieu de l'écraser. */
.fiche .entete { flex-wrap:wrap; row-gap:8px; }
.fiche .entete h2 { flex:1 1 12ch; }
@media (max-width:359px) { .fiche .statut { flex-shrink:1; white-space:normal; } }

/* ─── Types de rendez-vous ─── */
.types { display:grid; gap:10px; }
.type { position:relative; display:grid; grid-template-columns:46px minmax(0, 1fr) 16px; gap:14px; align-items:start; width:100%; padding:16px 14px 16px 16px; border:1px solid var(--ligne-2); border-radius:14px; background:var(--carte); color:inherit; font:inherit; text-align:left; cursor:pointer;
  transition:border-color .18s, box-shadow .18s, background-color .18s; }
.type:hover { border-color:#9fb3e3; box-shadow:0 10px 24px -18px rgba(34,83,180,.7); }
.type[aria-pressed="true"] { border-color:var(--accent); background:linear-gradient(180deg, var(--carte), var(--accent-clair)); box-shadow:0 0 0 3px rgba(34,83,180,.13); }
.type b { display:block; font-size:16.5px; font-weight:700; line-height:1.35; color:var(--texte); }
.type .desc { display:block; margin-top:4px; color:var(--doux); font-size:14px; line-height:1.5; }
.type .chev { width:16px; height:16px; margin-top:3px; fill:none; stroke:var(--bord); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s, stroke .18s; }
.type:hover .chev, .type[aria-pressed="true"] .chev { stroke:var(--accent); transform:translateX(2px); }
/* Durée dessinée à l'échelle, en cote : 1 minute vaut 1,1 px (15 min, 45 min et 60 min se voient d'un coup d'œil). */
.duree { display:flex; align-items:center; gap:8px; width:max-content; margin:6px 0 1px; color:var(--accent); font-family:var(--f-mono); font-size:12px; font-weight:600; line-height:1.3; white-space:nowrap; }
.duree::before { content:''; flex:0 0 auto; width:calc(min(var(--d, 15), 120) * 1.1px); min-width:14px; height:9px;
  background:linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) 0 0 / 1px 100% no-repeat, linear-gradient(currentColor, currentColor) 100% 0 / 1px 100% no-repeat; }
.duree:empty { display:none; }
/* Icône dans une lunette fine à un seul index, qui tourne d'un cran au survol */
.ico { position:relative; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:1px solid var(--ligne-2); background:radial-gradient(circle at 50% 30%, var(--carte), var(--carte-2) 70%); }
.ico::before { content:''; position:absolute; inset:-5px; border-radius:50%; border:1px solid var(--ligne); background:linear-gradient(var(--bord), var(--bord)) 50% 0 / 1.5px 4px no-repeat; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.ico svg { width:22px; height:22px; fill:none; stroke:var(--texte); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.type:hover .ico::before { transform:rotate(30deg); }
.type[aria-pressed="true"] .ico { border-color:var(--accent); background:var(--accent-clair); }
.type[aria-pressed="true"] .ico::before { border-color:var(--accent-pale); background-image:linear-gradient(var(--accent), var(--accent)); }
.type[aria-pressed="true"] .ico svg { stroke:var(--accent); }

/* ─── Champs ─── */
label { display:block; margin:14px 0 6px; font-size:14px; font-weight:650; color:var(--texte); }
input[type=text], input[type=email], input[type=tel], textarea { display:block; width:100%; min-height:48px; padding:11px 13px; border:1px solid var(--bord-champ); border-radius:11px; background:var(--champ); color:var(--texte); font:inherit; font-size:16px; line-height:1.4;
  transition:border-color .15s, box-shadow .15s; -webkit-appearance:none; appearance:none; }
input:hover, textarea:hover { border-color:#66748c; }
input:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:var(--focus); }
::placeholder { color:var(--place); opacity:1; }
textarea { min-height:120px; resize:vertical; }
input[readonly] { background:var(--champ-ro); color:var(--champ-txt-ro); border-style:dashed; }
.ligne2 { display:grid; grid-template-columns:118px minmax(0, 1fr); gap:10px; }
.aide { margin-top:6px; font-size:13px; line-height:1.5; color:var(--doux); }
.aide + .aide { margin-top:4px; }
.champ-err input, .champ-err textarea { border-color:var(--err); background:var(--err-clair); }
.champ-err label { color:var(--err); }
.ac { position:relative; }
.ac ul { position:absolute; z-index:5; left:0; right:0; top:100%; margin:6px 0 0; padding:5px; list-style:none; border:1px solid var(--ligne); border-radius:12px; background:var(--carte); box-shadow:0 18px 40px -18px rgba(12,24,48,.35); }
.ac li button { display:block; width:100%; min-height:44px; padding:10px 11px; border:0; border-radius:8px; background:none; color:inherit; font:inherit; font-size:15px; text-align:left; cursor:pointer; }
.ac li button:hover, .ac li button:focus { outline:none; background:var(--accent-clair); color:var(--accent-txt); }
.piege { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

/* ─── Boutons : l'action principale à l'encre marine de dis21, le reste au trait ─── */
.btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:52px; margin-top:18px; padding:12px 20px; border:0; border-radius:12px; background:var(--primaire); color:var(--sur-primaire); font:inherit; font-size:16.5px; font-weight:700; letter-spacing:.005em; text-align:center; text-decoration:none; cursor:pointer;
  background-image:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 60%);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 12px 24px -14px rgba(16,36,74,.85); transition:background-color .15s, box-shadow .15s, transform .15s; }
.btn:hover { background-color:var(--primaire-fonce); }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.65; cursor:progress; }
.btn svg { width:18px; height:18px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.btn.second { width:auto; min-height:44px; margin-top:0; padding:8px 14px; border:1px solid var(--bord); background:var(--carte); color:var(--texte); font-size:14px; font-weight:600; box-shadow:none; white-space:nowrap; flex:0 0 auto; }
.btn.second:hover { border-color:var(--accent); color:var(--accent); background-color:var(--accent-clair); }
.btn.clair { border:1px solid var(--accent-pale); background:var(--carte); color:var(--accent); box-shadow:none; }
.btn.clair:hover { border-color:var(--accent); background-color:var(--accent-clair); }
.btn.danger { border:1px solid var(--err-ligne); background:var(--carte); color:var(--err); box-shadow:none; }
.btn.danger:hover { border-color:var(--err); background-color:var(--err-clair); }
.btn.danger.plein { border-color:var(--err); background-color:var(--err); color:#fff; box-shadow:0 12px 24px -14px rgba(194,42,50,.8); }
.btn.danger.plein:hover { background-color:#a81f27; }
.lien { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0; border:0; background:none; color:var(--accent); font:inherit; font-size:14.5px; font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; cursor:pointer; }
.aide .lien { display:inline; min-height:0; font-size:inherit; }
.lien svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ─── Notes ─── */
.note { position:relative; margin:12px 0; padding:12px 14px 12px 34px; border:1px solid; border-radius:12px; font-size:14.5px; line-height:1.5; }
.note::before { content:''; position:absolute; left:14px; top:19px; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px var(--halo, transparent); }
.note.info { --halo:rgba(34,83,180,.14); border-color:var(--accent-pale); background:var(--accent-clair); color:var(--accent-txt); }
.note.err { --halo:rgba(194,42,50,.14); border-color:var(--err-ligne); background:var(--err-clair); color:var(--err); }
.note a { color:inherit; font-weight:700; }

/* ─── Chargement : balancier de montre, messages qui défilent et calendrier fantôme (la carte garde sa hauteur) ─── */
.chargement { padding:12px 0 2px; color:var(--doux); }
.charge-l { display:flex; align-items:center; gap:14px; min-width:0; }
.balancier { position:relative; flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:1.5px solid var(--accent); animation:balancier 1.1s ease-in-out infinite alternate; }
.balancier::before { content:''; position:absolute; left:50%; top:2px; bottom:2px; width:1.5px; margin-left:-.75px; background:var(--accent); border-radius:1px; }
.balancier::after { content:''; position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:var(--accent); }
@keyframes balancier { from { transform:rotate(-140deg); } to { transform:rotate(140deg); } }
/* Messages de chargement sur deux lignes au besoin (jamais coupés), hauteur fixe : le cadre ne saute pas. */
.charge-txt { min-width:0; overflow:hidden; white-space:normal; line-height:1.35; min-height:2.7em; display:flex; align-items:center; font-family:var(--f-mono); font-size:12.5px; letter-spacing:.01em; }
.fantome { position:relative; display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); margin-top:16px; overflow:hidden; border:1px dashed var(--ligne-2); border-radius:13px; }
.fantome i { height:50px; border-right:1px dashed var(--ligne); border-bottom:1px dashed var(--ligne); }
.fantome i:nth-child(-n+7) { height:28px; background:var(--carte-2); }
.fantome i:nth-child(7n) { border-right:0; }
.fantome i:nth-last-child(-n+7) { border-bottom:0; }
@media (prefers-reduced-motion:no-preference) {
  .fantome::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(34,83,180,.07) 50%, transparent); transform:translateX(-100%); animation:balayage 1.8s ease-in-out infinite; }
}
@keyframes balayage { to { transform:translateX(100%); } }

/* ─── Calendrier (assets/rdv_jours.js) : quadrillage à traits fins, jours sans créneau hachurés comme sur un plan ─── */
.jours { display:flex; gap:8px; }
.jours.calendrier { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:1px; margin:4px 0 0; padding:0; overflow:hidden; border:1px solid var(--ligne-2); border-radius:13px; background:var(--ligne); }
.calendrier .jsem { padding:7px 0 6px; background:var(--carte-2); color:var(--doux); font-family:var(--f-mono); font-size:11px; text-align:center; letter-spacing:.02em; }
.calendrier .jour { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; min-width:0; min-height:50px; margin:0; padding:9px 0 4px; border:0; border-radius:0; background:var(--carte); color:var(--texte); font-family:var(--f-mono); cursor:pointer; transition:background-color .12s, color .12s; }
.calendrier .jour b { font-size:16px; font-weight:600; line-height:1.15; font-variant-numeric:tabular-nums; }
.calendrier .jour small { margin-top:2px; font-size:9.5px; line-height:1; color:var(--accent); letter-spacing:.02em; }
.calendrier button.jour:hover { background:var(--accent-clair); color:var(--accent-txt); }
.calendrier button.jour:focus-visible { outline:2px solid var(--accent); outline-offset:-4px; border-radius:6px; }
.calendrier .jour[aria-pressed="true"], .calendrier .jour[aria-pressed="true"]:hover { background:var(--accent); color:#fff; }
.calendrier .jour[aria-pressed="true"] small { color:#dce6ff; }
.calendrier .jour[aria-pressed="true"]:focus-visible { outline-color:#fff; }
.calendrier .jour.vide { background:repeating-linear-gradient(135deg, var(--vide) 0 5px, var(--hachure) 5px 6px); color:#949fb2; cursor:default; }
.calendrier .jour.vide b { font-weight:500; }
.legende { display:flex; align-items:center; justify-content:flex-end; gap:7px; margin:8px 2px 0; font-family:var(--f-mono); font-size:12px; letter-spacing:.01em; color:var(--doux); }
.legende i { flex:0 0 auto; width:16px; height:11px; border:1px solid var(--ligne-2); border-radius:3px; background:repeating-linear-gradient(135deg, var(--vide) 0 2px, var(--ligne-2) 2px 3px); }
.jours:empty + .legende { display:none; }
.jour-titre { display:flex; align-items:center; gap:10px; margin:18px 0 0; font-size:15.5px; font-weight:700; color:var(--texte); }
.jour-titre::before { content:''; flex:0 0 auto; width:3px; height:16px; border-radius:2px; background:var(--accent); }
.jour-titre::after { content:''; flex:1; height:1px; background:var(--ligne); }
.jour-titre:empty { display:none; }

/* ─── Heures : chiffres tabulaires, lisibles d'un coup d'œil ─── */
.heures { display:grid; grid-template-columns:repeat(auto-fill, minmax(94px, 1fr)); gap:8px; margin-top:10px; }
.heure { display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:8px 6px; border:1px solid var(--bord); border-radius:11px; background:var(--carte); color:var(--texte); font-family:var(--f-texte); font-size:16px; font-weight:700; font-variant-numeric:tabular-nums lining-nums; letter-spacing:.005em; cursor:pointer;
  transition:border-color .12s, background-color .12s, color .12s; }
.heure:hover { border-color:var(--accent); background:var(--accent-clair); color:var(--accent-txt); }
.heure[aria-pressed="true"], .heure[aria-pressed="true"]:hover { border-color:var(--accent); background:var(--accent); color:#fff; }

/* ─── Encart « Aucun horaire ne vous convient ? » : l'accueil en second choix ─── */
.alt { position:relative; margin-top:24px; padding:18px 16px 8px; border:1px solid var(--ligne); border-radius:16px; background:linear-gradient(180deg, var(--carte-2), var(--carte) 80%); }
.alt h3 { margin:0 0 3px; font-family:var(--f-titre); font-weight:540; font-size:20px; line-height:1.22; letter-spacing:-.01em; }
.alt-intro { margin:0 0 14px; color:var(--doux); font-size:14px; }
.alt-qui { display:flex; gap:14px; align-items:flex-start; padding:14px 14px 14px 15px; border:1px solid var(--ligne); border-radius:13px; background:var(--carte); }
.alt-qui .ico { flex:0 0 46px; margin-top:3px; }
.alt-qui b { display:block; font-size:15.5px; font-weight:700; line-height:1.35; }
.alt-qui .duree { margin-top:5px; }
.alt-qui .desc { display:block; margin-top:4px; color:var(--doux); font-size:13.5px; line-height:1.45; }
.alt-sous { display:flex; align-items:center; gap:10px; margin:20px 0 0; font-family:var(--f-mono); font-size:12px; letter-spacing:.02em; color:var(--doux); }
.alt-sous::after { content:''; flex:1; height:1px; background:var(--ligne); }
.alt-heures { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.alt-heures .heure { flex-direction:column; gap:0; min-height:58px; padding:7px 4px; }
.alt-j { font-size:12.5px; font-weight:600; color:var(--doux); }
.alt-h { font-size:16px; }
@media (min-width:440px) { .alt-heures { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.alt-heures .heure:hover .alt-j { color:inherit; }
.alt .lien { margin-top:6px; }

/* ─── Récapitulatif : un ticket d'atelier, encoches comprises ─── */
.ticket { position:relative; margin:4px 0 6px; padding:12px 18px 14px 20px; border:1px solid var(--accent-pale); border-radius:14px; background:var(--accent-clair); }
.ticket::before, .ticket::after { content:''; position:absolute; top:50%; width:12px; height:22px; margin-top:-11px; background:var(--carte); border:1px solid var(--accent-pale); }
.ticket::before { left:-1px; border-left:0; border-radius:0 12px 12px 0; }
.ticket::after { right:-1px; border-right:0; border-radius:12px 0 0 12px; }
.ticket-k { margin:0 0 4px; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.03em; color:var(--accent); }
.recap { font-size:15px; color:var(--texte); }
.recap b { display:block; font-family:var(--f-titre); font-style:italic; font-weight:540; font-size:21px; line-height:1.25; letter-spacing:-.005em; }
.recap span { display:block; margin-top:2px; color:var(--doux); font-size:14px; }
#dp_recap { font-family:var(--f-titre); font-style:italic; font-weight:540; font-size:20px; }
.prive { display:flex; justify-content:center; align-items:flex-start; gap:8px; text-align:left; }
.prive svg { flex:0 0 auto; width:14px; height:14px; margin-top:2px; fill:none; stroke:var(--doux); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ─── Pied ─── */
.pied { margin:26px 0 0; color:var(--doux); font-size:13px; line-height:1.7; text-align:center; }
.pied a { color:inherit; }
.pied .coord { display:block; margin-top:6px; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.02em; }
.pied .coord + .coord { margin-top:0; }

/* ─── Mon rendez-vous ─── */
.statut { display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; margin-top:4px; padding:4px 11px 4px 9px; border-radius:999px; font-family:var(--f-mono); font-size:12px; font-weight:600; white-space:nowrap; }
.statut::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.statut.confirme { background:var(--ok-clair); color:var(--ok); }
.statut.confirme::before { background:var(--menthe); box-shadow:0 0 0 2px rgba(47,211,167,.22), 0 0 7px rgba(47,211,167,.8); }
.statut.attente { background:var(--attente-clair); color:var(--attente); }
.statut.attente::before { animation:led 2.8s ease-in-out infinite; }
.statut.refuse { background:var(--err-clair); color:var(--err); }
.statut.annule, .statut.passe { background:var(--neutre-clair); color:var(--neutre); }
.statut.annule::before, .statut.passe::before { background:#8a95a8; }
/* La cote : début et fin reliés par une ligne de cote, la durée au milieu, comme sur un plan coté */
.cote-date { margin:12px 0 0; font-family:var(--f-titre); font-style:italic; font-weight:500; font-size:21px; line-height:1.25; color:var(--texte); }
.cote { display:flex; align-items:center; gap:10px; margin:8px 0 4px; font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.cote-h { font-size:17px; font-weight:600; color:var(--texte); white-space:nowrap; word-spacing:-.3em; }
.cote-l { position:relative; flex:1; height:20px; }
.cote-l::before { content:''; position:absolute; left:0; right:0; top:50%; height:11px; margin-top:-5.5px;
  background:linear-gradient(var(--accent), var(--accent)) 0 50% / 100% 1px no-repeat, linear-gradient(var(--accent), var(--accent)) 0 0 / 1px 100% no-repeat, linear-gradient(var(--accent), var(--accent)) 100% 0 / 1px 100% no-repeat; }
.cote-l span { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); padding:0 6px; background:var(--carte); color:var(--accent); font-size:11.5px; font-weight:600; white-space:nowrap; }
.annule-vue .cote, .annule-vue .cote-date { color:var(--doux); text-decoration:line-through; text-decoration-thickness:1px; }
.annule-vue .cote-h, .annule-vue .cote-l span { color:var(--doux); }
.annule-vue .cote-l::before { filter:grayscale(1); }
.details { margin:16px 0 0; border-top:1px solid var(--ligne); }
.details div { display:grid; grid-template-columns:118px minmax(0, 1fr); gap:12px; padding:11px 0; border-bottom:1px dashed var(--ligne-2); font-size:15px; }
.details div:last-child { border-bottom:0; }
.details dt { padding-top:2px; color:var(--doux); font-family:var(--f-mono); font-size:12px; letter-spacing:.02em; }
.details dd { margin:0; min-width:0; font-weight:600; overflow-wrap:anywhere; }
.actions { display:grid; gap:10px; margin-top:16px; }
.actions .btn { margin-top:0; }
@media (min-width:640px) {
  .actions { display:flex; flex-wrap:wrap; }
  .actions .btn { flex:1 1 auto; width:auto; min-height:50px; gap:8px; padding:10px 12px; font-size:14.5px; }
}

/* Bandeaux de fin (merci, déplacé, annulé) : une médaille à lunette gravée */
.merci { text-align:center; padding:24px 20px 22px; }
.medaille { position:relative; width:104px; height:104px; margin:0 auto 12px; color:var(--ton, var(--neutre)); }
.medaille .m-anneau { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.m-anneau circle { fill:none; stroke:var(--ton-ligne, var(--ligne-2)); stroke-width:1; }
.m-anneau .m-int { stroke:var(--ton, var(--neutre)); stroke-opacity:.4; stroke-dasharray:.6 2.699; stroke-width:3; }
.m-anneau text { fill:currentColor; font-family:var(--f-mono); font-size:8px; font-weight:600; }
.m-coeur { position:absolute; left:50%; top:50%; display:grid; place-items:center; width:50px; height:50px; margin:-25px 0 0 -25px; border-radius:50%; border:1px solid var(--ton-ligne, var(--ligne-2)); background:var(--ton-fond, var(--carte-2)); }
.m-coeur svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.merci.ton-ok .medaille::before { content:''; position:absolute; inset:-26px; z-index:-1; border-radius:50%; background:radial-gradient(closest-side, rgba(47,211,167,.2), rgba(47,211,167,.07) 55%, transparent); }
.merci.ton-ok { --ton:var(--ok); --ton-fond:var(--ok-clair); --ton-ligne:var(--ok-ligne); isolation:isolate; }
.merci.ton-attente { --ton:var(--attente); --ton-fond:var(--attente-clair); --ton-ligne:var(--attente-ligne); }
@media (prefers-reduced-motion:no-preference) {
  .m-anneau { animation:lunette 1.1s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes lunette { from { transform:rotate(-50deg); opacity:0; } to { transform:none; opacity:1; } }
.merci h2 { margin:0 0 6px; font-size:26px; }
.carte.merci p { margin:0 auto; max-width:36ch; color:var(--doux); overflow-wrap:anywhere; }
.carte.merci .clin { margin-top:14px; padding-top:12px; border-top:1px dashed var(--ligne-2); max-width:40ch; font-size:14px; }

/* Page introuvable : figure au trait, un cadran arrêté à 4 h 04 */
.fig404 { margin:2px 0 14px; text-align:center; }
.fig404 svg { display:block; width:118px; height:118px; margin:0 auto; overflow:visible; }
.fig404 .f-l { fill:none; stroke:var(--ligne-2); stroke-width:1; }
.fig404 .f-min { fill:none; stroke:var(--bord); stroke-width:3; stroke-dasharray:.5 4.736; stroke-dashoffset:.25; }
.fig404 .f-h { fill:none; stroke:var(--doux); stroke-width:7; stroke-dasharray:1.4 23.21; stroke-dashoffset:.7; }
.fig404 .f-aig { stroke:var(--texte); stroke-linecap:round; }
.fig404 .f-axe { fill:var(--carte); stroke:var(--accent); stroke-width:1.5; }
.fig404 figcaption { margin-top:8px; font-family:var(--f-mono); font-size:12px; letter-spacing:.02em; color:var(--doux); }
:where(.carte) p { margin:0 0 12px; }
:where(.carte) p:last-child { margin-bottom:0; }

/* ─── Petits écrans ─── */
@media (max-width:420px) {
  .carte { padding:18px 15px; border-radius:16px; }
  .carte h2 { font-size:23px; }
  .ligne2 { grid-template-columns:104px minmax(0, 1fr); }
  .type { gap:12px; padding:15px 12px 15px 14px; grid-template-columns:44px minmax(0, 1fr) 14px; }
  .ico { width:44px; height:44px; }
  .details div { grid-template-columns:1fr; gap:2px; }
  .details dt { padding-top:0; }
  .specs > div { padding-right:11px; margin-right:11px; }
}
/* Seuils mesurés au pixel (320 à 430 px) : rien n'est coupé par des points de suspension. */
@media (max-width:413px) { .top-ligne.long .m-at { display:none; } }
@media (max-width:399px) { .top-ligne { gap:8px; font-size:11px; letter-spacing:0; } .etat { gap:6px; } }
@media (max-width:389px) { .top-ligne .m-at { display:none; } }
@media (max-width:379px) { .etapes { gap:6px; } .etapes li { gap:5px; font-size:12px; } .etapes .n { font-size:10.5px; } }
@media (max-width:359px) {
  .specs > div:last-child { display:none; }
  .cadran { width:70px; right:14px; }
  .top h1 { padding-right:80px; }
  .specs > div:nth-child(2) { border-right:0; margin-right:0; padding-right:0; }
}
@media (max-width:339px) { .etapes { gap:4px; } .etapes li { gap:3px; } }
/* « Mon rendez-vous » : ses trois mesures sont plus longues, la troisième s'efface dès 389 px au lieu de passer à la ligne. */
@media (max-width:389px) { .specs.longue > div:last-child { display:none; } .specs.longue > div:nth-child(2) { border-right:0; margin-right:0; padding-right:0; } }

/* ─── Grand écran : le bandeau devient un panneau, le parcours à côté ─── */
@media (min-width:1000px) {
  html:not(.cadre) .wrap { display:grid; grid-template-columns:minmax(0, 390px) minmax(0, 1fr); gap:0 40px; align-items:start; max-width:1140px; padding:40px 32px 56px; }
  html:not(.cadre) .top { position:sticky; top:32px; margin:0; padding:26px 30px 52px; border-radius:24px; }
  html:not(.cadre) .top h1 { margin-top:40px; font-size:52px; }
  html:not(.cadre) .top-sous { font-size:16px; }
  html:not(.cadre) .specs { display:block; margin-top:24px; border-top:1px solid var(--encre-trait); }
  html:not(.cadre) .specs > div { display:flex; align-items:baseline; gap:10px; margin:0; padding:9px 0; border-right:0; border-bottom:1px solid var(--encre-trait); }
  html:not(.cadre) .specs > div::after { content:''; order:1; flex:1; border-bottom:1px dotted rgba(170,190,225,.35); transform:translateY(-3px); }
  html:not(.cadre) .specs dt { order:0; font-size:12px; }
  html:not(.cadre) .specs dd { order:2; font-size:13px; margin:0; }
  html:not(.cadre) .top h1 { padding-right:0; }
  html:not(.cadre) .cadran { position:relative; right:auto; top:auto; display:block; width:240px; margin:32px auto 0; filter:none; }
  html:not(.cadre) .cadran text { display:inline; }
  html:not(.cadre) .cadran .c-date { display:inline; }
  html:not(.cadre) .corps { min-width:0; }
  html:not(.cadre) .top-ligne.long .m-at { display:none; }
  html:not(.cadre) .carte { padding:26px 28px; }
}
@media (min-width:1000px) and (max-height:860px) {
  html:not(.cadre) .cadran { width:190px; margin-top:24px; }
  html:not(.cadre) .top h1 { margin-top:28px; }
}
@media (min-width:1000px) and (max-height:700px) { html:not(.cadre) .top { position:relative; top:auto; } }

/* ─── Intégrée à dis21.fr (rdv.php?embed=1) : carte blanche, compacte, toujours claire, à l'encre de dis21.fr ─── */
html.cadre { color-scheme:light; --accent:#2256a0; --accent-fonce:#1b4682; --accent-txt:#1a3f78; --primaire:#1a355c; --primaire-fonce:#12284a; --focus:0 0 0 3px rgba(34,86,160,.2); }
html.cadre, html.cadre body { background:#fff; }
.cadre .wrap { max-width:none; padding:20px 22px 14px; }
.tete-cadre { margin:0 0 14px; }
.tete-k { display:flex; align-items:center; gap:8px; margin:0 0 6px; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.02em; color:var(--doux); }
.tete-k .led { animation:none; }
.tete-k.veille .led { background:#7d8aa3; box-shadow:0 0 0 3px rgba(125,138,163,.18); }
.tete-k.alerte .led { background:var(--err); box-shadow:0 0 0 3px rgba(194,42,50,.15); }
.tete-cadre h1 { margin:0; font-family:var(--f-titre); font-style:italic; font-weight:480; font-size:29px; line-height:1.12; letter-spacing:-.012em; color:var(--texte); }
.tete-cadre p { margin:5px 0 0; color:var(--doux); font-size:14.5px; }
.cadre .carte { margin-bottom:12px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.cadre .carte + .carte { margin-top:20px; }
.cadre .merci { padding:8px 0 16px; border-bottom:1px dashed var(--ligne-2); border-radius:0; }
.cadre .medaille { width:92px; height:92px; }
.cadre .btn { box-shadow:none; }
.cadre .pied { margin-top:16px; }
@media (max-width:420px) { .cadre .wrap { padding:16px 14px 12px; } }

/* ─── Mode sombre (hors du cadre de dis21.fr) : cadran de nuit ─── */
@media (prefers-color-scheme:dark) {
  html:not(.cadre) {
    color-scheme:dark;
    --bg:#08101f; --carte:#0f1a2e; --carte-2:#132039; --texte:#e7ecf5; --doux:#9aa8c0; --ligne:#1f2d48; --ligne-2:#2d3d5e;
    --bord:#3d4f74; --bord-champ:#5f7296;
    --champ:#0b1527; --champ-ro:#121e34; --champ-txt-ro:#b4c0d4; --place:#8592aa;
    --accent:#7d9bff; --accent-fonce:#9bb2ff; --accent-clair:#15244a; --accent-pale:#2b3f74; --accent-txt:#c3d2ff;
    --primaire:#8aa6ff; --primaire-fonce:#a6bcff; --sur-primaire:#08101f;
    --ok:#5ee0c0; --ok-clair:#0e2b2a; --ok-ligne:#1d5148;
    --attente:#b2acff; --attente-clair:#1d1c45; --attente-ligne:#36337a;
    --err:#ff8a90; --err-clair:#2c1219; --err-ligne:#5a2530;
    --neutre:#b4c0d4; --neutre-clair:#1a253b;
    --hachure:#1a263e; --vide:#0c1628;
    --ombre:0 1px 0 rgba(255,255,255,.03) inset, 0 20px 40px -28px rgba(0,0,0,.9);
    --focus:0 0 0 3px rgba(125,155,255,.28);
  }
  html:not(.cadre) .top { box-shadow:0 0 0 1px #1c2b48, 0 20px 40px -26px rgba(0,0,0,.9); }
  html:not(.cadre) .btn { background-image:none; box-shadow:0 12px 24px -16px rgba(125,155,255,.55); }
  html:not(.cadre) .btn.second, html:not(.cadre) .btn.clair, html:not(.cadre) .btn.danger { box-shadow:none; }
  html:not(.cadre) .btn.danger.plein { background-color:#d6434b; border-color:#d6434b; color:#fff; box-shadow:none; }
  html:not(.cadre) .apercu { border-color:#3c58a8; }
  html:not(.cadre) .calendrier .jour[aria-pressed="true"], html:not(.cadre) .heure[aria-pressed="true"] { color:#08101f; }
  html:not(.cadre) .calendrier .jour[aria-pressed="true"] small { color:#1b2b55; }
  html:not(.cadre) .calendrier .jour.vide { color:#56637c; }
  html:not(.cadre) input:hover, html:not(.cadre) textarea:hover { border-color:#7385a8; }
  html:not(.cadre) .merci.ton-ok .medaille::before { background:radial-gradient(closest-side, rgba(94,224,192,.16), rgba(94,224,192,.05) 55%, transparent); }
}

/* ─── Mouvement réduit : rien ne bouge ─── */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}