/*
  Design system Kalyopa : jetons partages + styles de base (reset, typo,
  boutons, cartes, champs, focus clavier, reduced-motion, theme sombre).

  Refonte 2026-10 (cf. .claude/design-references) :
  - Wise / Intercom : fond legerement teinte (--paper) et surfaces blanches
    (--surface) posees dessus ; la profondeur vient du changement de surface,
    pas des ombres.
  - Airbnb : un seul accent (le bleu de la marque), un seul niveau d'ombre
    flottante (--ombre-flottante), formes arrondies coherentes.
  - Stripe : ombres teintees bleu nuit, chiffres tabulaires pour les donnees.

  Regle des arrondis (une seule echelle, appliquee partout) :
    --r-sm  8px   pastilles, etiquettes, petits boutons
    --r-md  12px  boutons, champs, options cliquables
    --r-lg  20px  cartes, panneaux, encadres
    --r-pill      boutons ronds, interrupteurs
*/

:root{
  color-scheme:light;
  --ink:#0F1E36;
  --ink-soft:#3D5070;
  --blue:#2B5CAD;
  --blue-deep:#1A3F7A;
  --sky:#EAF1FB;
  --paper:#F3F6FA;
  --surface:#FFFFFF;
  --surface-2:#EEF2F8;
  --coral:#FF8F66;
  --coral-deep:#E8763F;
  --coral-bg:#FFF1EA;
  --green:#2FA579;
  --green-bg:#E4F6EE;
  /* Textes sur fond clair : le vert et le corail de marque n'y atteignent que 2,2 a 2,8:1.
     Ces encres foncees (5,5:1 et 4,9:1) servent aux TEXTES/icones, les fonds restent inchanges. */
  --green-ink:#1A6F4F;
  --coral-ink:#B4491A;
  --error:#B3261E;
  --error-bg:#FCEAEA;
  --warning:#8A5300;
  --warning-bg:#FFF3E0;
  /* --line : separations decoratives ; --line-strong : contour des champs et
     options cliquables (>= 3:1, WCAG 1.4.11). */
  --line:#DCE3EE;
  --line-strong:#8193AE;
  /* Texte pose sur un fond bleu plein (bouton principal, bulle "patient"). */
  --on-blue:#FFFFFF;
  /* Texte pose sur le corail : toujours fonce (7,4:1), y compris en theme sombre. */
  --on-coral:#0F1E36;

  --font-display:'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  --r-sm:8px;
  --r-md:12px;
  --r-lg:20px;
  --r-pill:999px;

  /* Ombres teintees bleu nuit (jamais de noir pur) : --ombre-carte pour une
     surface posee, --ombre-flottante pour ce qui passe au-dessus du contenu
     (menus, en-tete colle, survol). */
  --ombre-carte:0 1px 2px rgba(15,30,54,0.05), 0 1px 0 rgba(15,30,54,0.03);
  --ombre-flottante:0 1px 2px rgba(15,30,54,0.06), 0 10px 28px -6px rgba(15,30,54,0.16);
  --anneau:0 0 0 4px rgba(43,92,173,0.16);

  --ease:cubic-bezier(.16,1,.3,1);
  --duree:.2s;
}

*{box-sizing:border-box; margin:0; padding:0;}

/* scroll-padding-top : l'en-tete colle (64 px) ne recouvre jamais une ancre
   ni l'element qui recoit le focus clavier. */
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:80px;}
/* Pas de delai de double-tape sur les elements interactifs (telephone). */
a, button, input, label, select, summary, textarea{touch-action:manipulation;}

body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv11";
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  font-weight:650;
  line-height:1.12;
  letter-spacing:-0.022em;
  text-wrap:balance;
}
h1{letter-spacing:-0.03em;}
p, li{text-wrap:pretty;}

a{color:inherit;}

img,svg{display:block; max-width:100%;}

.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 28px;
}
@media (max-width:640px){ .wrap{padding:0 16px;} }

/* Chiffres alignes pour les donnees (tableaux, compteurs, telephones). */
.chiffres, table, .stat-value{font-variant-numeric:tabular-nums;}

:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

::selection{background:var(--sky); color:var(--ink);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* ---------- Marque (logo) ---------- */
/* Partage entre landing.html (.logo), auth.css (.auth-back) et _entete.html
   (.site-brand) -- une seule definition pour rester coherent. Juste le
   logo affiche a sa taille, sans conteneur/fond autour. */
.logo-mark{
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.logo-mark img{
  width:100%; height:100%;
  object-fit:contain;
  display:block;
}
/* Variante agrandie : logo au-dessus du formulaire sur connexion/inscription
   uniquement -- meme style, juste plus grand que le logo de nav (34px). */
.logo-mark-large{
  width:64px; height:64px;
}

/* ---------- Boutons ---------- */

/* Neutralise le chrome natif du navigateur sur un <button> qui doit se
   comporter comme un lien texte ou une icone nue (fond/bordure/ombre/
   appearance par defaut du navigateur -- persistant sur certains
   navigateurs, ex. Safari, meme apres background:none/border:none seuls
   sans reset explicite de appearance). Classe partagee plutot que
   redupliquee par page : cf. .dash-session-delete (dashboard.css) et
   .chat-logout-danger (chat.css), qui gardent chacun leur propre
   couleur/espacement final par-dessus ce reset. */
.btn-suppression-discret{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:none;
  border:none;
  box-shadow:none;
  border-radius:0;
  margin:0;
  font:inherit;
  cursor:pointer;
}

/* Bouton principal : bleu de la marque, texte blanc (6,5:1 -- l'ancien blanc sur
   corail n'avait que 2,2:1). Le corail reste un ACCENT : sur corail, le
   contenu est toujours fonce (var(--ink), 7:1), cf. .mini-btn et les boutons
   ronds du chat. Pas de halo colore : un bouton plein suffit (Airbnb, Wise). */
.btn-primary{
  background:var(--blue); color:var(--on-blue); font-weight:600; font-size:16px;
  min-height:48px; padding:12px 22px; border-radius:var(--r-md); text-decoration:none;
  transition:background var(--duree) var(--ease), transform var(--duree) var(--ease);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; cursor:pointer; font-family:var(--font-body); line-height:1.2;
}
.btn-primary:hover{background:var(--blue-deep);}
.btn-primary:active{transform:scale(.98);}
.btn-primary:disabled{opacity:0.6; cursor:not-allowed; transform:none;}

.btn-secondary{
  background:var(--surface); color:var(--ink); font-weight:600; font-size:16px;
  min-height:48px; padding:12px 22px; border-radius:var(--r-md); text-decoration:none;
  border:1px solid var(--line-strong);
  transition:border-color var(--duree) var(--ease), background var(--duree) var(--ease), transform var(--duree) var(--ease);
  cursor:pointer; font-family:var(--font-body); line-height:1.2;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn-secondary:hover{border-color:var(--blue); background:var(--sky);}
.btn-secondary:active{transform:scale(.98);}

/* Lien d'action tertiaire : texte bleu souligne au survol, sans cadre. */
.btn-lien{
  display:inline-flex; align-items:center; gap:6px; min-height:44px;
  color:var(--blue); font-weight:600; text-decoration:underline;
  text-decoration-color:transparent; text-underline-offset:4px;
  transition:text-decoration-color var(--duree) var(--ease);
}
.btn-lien:hover{text-decoration-color:currentColor;}

/* ---------- Cartes ---------- */
/* Surface blanche posee sur le fond teinte : la difference de surface fait
   l'essentiel du relief, une ombre tres legere le complete. */
.card{
  background:var(--surface);
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  box-shadow:var(--ombre-carte);
}

/* ---------- Champs de formulaire (toutes pages) ---------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
select,
textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:16.5px;
  color:var(--ink);
  min-height:48px;
  padding:12px 14px;
  border-radius:var(--r-md);
  border:1px solid var(--line-strong);
  background:var(--surface);
  transition:border-color var(--duree) var(--ease), box-shadow var(--duree) var(--ease);
}
input:hover, select:hover, textarea:hover{border-color:var(--ink-soft);}
input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:var(--anneau);
}
::placeholder{color:var(--ink-soft); opacity:.75;}
input[type="checkbox"], input[type="radio"]{accent-color:var(--blue);}

/* ---------- Bulles de conversation (chat) ---------- */
/* Reutilise par la demo de landing.html et par mon_espace.html. */
.msg{
  max-width:min(88%, 620px);
  padding:12px 16px;
  border-radius:var(--r-lg);
  font-size:16px;
  line-height:1.5;
  opacity:0;
  transform:translateY(8px);
  animation:msg-rise .5s ease forwards;
  white-space:pre-wrap;
}
.msg.patient{
  align-self:flex-end;
  background:var(--blue);
  color:var(--on-blue);
  border-bottom-right-radius:6px;
}
.msg.assistant{
  align-self:flex-start;
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line);
  border-bottom-left-radius:6px;
}
@keyframes msg-rise{ to{opacity:1; transform:translateY(0);} }

.chat-empty{
  align-self:center;
  margin:auto;
  color:var(--ink-soft);
  font-size:15.5px;
  text-align:center;
}
.chat-accueil{max-width:560px; width:100%;}
.chat-accueil p{margin:0 0 12px;}
.chat-accueil-titre{font-family:var(--font-display); font-weight:650; font-size:clamp(24px, 3vw, 30px); letter-spacing:-0.025em; line-height:1.15; color:var(--ink);}
.chat-suggestions{list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px;}
@media (max-width:640px){ .chat-suggestions{grid-template-columns:minmax(0,1fr);} }
.chat-suggestion{
  width:100%; height:100%; min-height:56px; padding:12px 16px; text-align:left;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-md); cursor:pointer;
  font:inherit; font-size:15.5px; font-weight:600; line-height:1.35; color:var(--ink);
  transition:border-color var(--duree) var(--ease), background var(--duree) var(--ease), transform var(--duree) var(--ease);
}
.chat-suggestion:hover{border-color:var(--blue); background:var(--sky); color:var(--blue-deep);}
.chat-suggestion:active{transform:scale(.98);}
.chat-suggestion:focus-visible{outline:3px solid var(--blue); outline-offset:2px;}

.typing{
  align-self:flex-start; display:flex; gap:5px; padding:15px 18px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); border-bottom-left-radius:5px;
  opacity:0; animation:msg-rise .4s ease forwards;
}
.typing span{width:7px; height:7px; border-radius:50%; background:var(--ink-soft); animation:typing-bounce 1.2s infinite ease-in-out;}
.typing span:nth-child(2){animation-delay:.15s;}
.typing span:nth-child(3){animation-delay:.3s;}
@keyframes typing-bounce{ 0%,60%,100%{transform:translateY(0); opacity:.5;} 30%{transform:translateY(-4px); opacity:1;} }

/* ---------- Cartes de resultat (professionnel) ---------- */
/* Reutilise par la demo de landing.html et par les vraies cartes de
   mon_espace.html -- une seule definition pour rester coherent. */
.result-card{
  align-self:flex-start;
  width:min(100%, 600px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--ombre-carte);
  padding:18px 20px;
  opacity:0; transform:translateY(8px);
  animation:msg-rise .5s ease forwards;
}
.result-card.result-proximite{border-color:var(--coral);}
.result-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px;}
.result-top strong{display:block; font-family:var(--font-display); font-weight:600; font-size:18px; letter-spacing:-0.01em; line-height:1.25; margin-bottom:2px;}
.result-top small{display:block; color:var(--ink-soft); font-size:14px; margin-top:2px;}
.badge{
  font-family:var(--font-body);
  font-size:14px; font-weight:700;
  padding:5px 10px; border-radius:var(--r-sm);
  white-space:nowrap;
  flex-shrink:0;
}
.badge-accessible{background:var(--green-bg); color:var(--green-ink);}
.badge-non-accessible{background:var(--error-bg); color:var(--error);}
.badge-non-renseigne{background:var(--line); color:var(--ink-soft);}
.result-actions{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.favori-btn{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0;
  transition:color .15s, border-color .15s, background .15s;
}
.favori-btn:hover{border-color:var(--coral); color:var(--coral-ink);}
.favori-btn.favori-actif{border-color:var(--coral); color:var(--coral-ink); background:var(--coral-bg);}
.favori-btn:disabled{opacity:0.6; cursor:not-allowed;}
.etiquette-exemple{
  font-size:14px; font-weight:700; color:var(--blue-deep);
  background:var(--sky); padding:4px 9px; border-radius:var(--r-sm);
  margin-bottom:10px; display:inline-block;
}
.proximite-tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:700; color:var(--coral-ink);
  background:var(--coral-bg); padding:4px 9px; border-radius:var(--r-sm);
  margin-bottom:10px;
}
.tag-row{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px;}
.tag{
  /* Vert (memes tokens que .badge-accessible) : chaque tag est un critere
     d'accessibilite REELLEMENT confirme pour ce patient (cf.
     matching.py _tags_pour_profil()), donc une info positive et fiable --
     meme quand badge_plein est false (accessibilite globale non garantie a
     100%, cf. echange produit du 2026-09-02). */
  font-size:14px; font-weight:600; color:var(--green-ink);
  background:var(--green-bg); padding:5px 10px; border-radius:var(--r-sm);
}
/* Bloc deplie "Info accessibilite (source Sante.fr)" -- volontairement
   discret et neutre (gris, pas de vert comme badge-accessible) pour ne
   jamais se confondre visuellement avec le badge officiel : c'est une info
   descriptive tierce, pas une confirmation verifiee (cf. matching.py
   _info_complementaire_santefr()). */
.info-complementaire{
  margin-bottom:12px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--paper); padding:2px 12px;
}
.info-complementaire summary{
  cursor:pointer; font-size:14px; font-weight:600; color:var(--ink-soft);
  padding:8px 0; list-style:none; display:flex; align-items:center; gap:6px;
}
.info-complementaire summary::-webkit-details-marker{display:none;}
.info-complementaire summary::before{content:'ⓘ'; font-size:14px;}
.info-complementaire-item{
  font-size:14px; line-height:1.5; color:var(--ink-soft);
  padding:0 0 10px; border-top:1px solid var(--line); margin-top:2px; padding-top:8px;
}
.info-complementaire-item strong{display:block; font-size:14px; color:var(--ink); margin-bottom:3px;}
.info-complementaire-item + .info-complementaire-item{border-top:none; margin-top:0; padding-top:0;}

/* ---------- Synthese personnalisee (formulaire pro) ----------
   Bloc redige par Claude (cf. chat.py _generer_synthese_personnalisee)
   EXCLUSIVEMENT a partir des criteres du questionnaire pertinents pour CE
   patient -- complementaire, pas un badge officiel (meme esprit que
   .info-complementaire ci-dessus), mais delibrement distinct visuellement
   pour ne jamais confondre les deux sources : toujours deplie (texte court,
   2-3 phrases, vaut la peine d'etre vu sans un clic), teinte bleue (au lieu
   du gris neutre de .info-complementaire) avec une bordure d'accent a
   gauche plutot qu'un encadre complet. */
.synthese-personnalisee{
  margin-bottom:12px; padding:10px 12px; border-radius:var(--r-sm);
  background:var(--sky); border-left:3px solid var(--blue);
}
.synthese-personnalisee strong{
  display:block; font-size:14px; font-weight:700; color:var(--blue-deep);
  text-transform:uppercase; letter-spacing:.02em; margin-bottom:4px;
}
.synthese-personnalisee p{font-size:14px; line-height:1.5; color:var(--ink);}

/* Synthese a la demande (cf. cartes.js, synthese.py) : meme teinte/accent que
   .synthese-personnalisee ci-dessus, mais repliee par defaut (<details>, meme
   principe que .info-complementaire) -- le texte n'existe qu'apres le
   premier depliage. */
.synthese-a-la-demande{
  margin-bottom:12px; padding:2px 12px; border-radius:var(--r-sm);
  background:var(--sky); border-left:3px solid var(--blue);
}
.synthese-a-la-demande summary{
  cursor:pointer; padding:8px 0; list-style:none;
  font-size:14px; font-weight:700; color:var(--blue-deep);
  text-transform:uppercase; letter-spacing:.02em;
}
.synthese-a-la-demande summary::-webkit-details-marker{display:none;}
.synthese-a-la-demande summary::before{
  content:"▸"; display:inline-block; width:14px; transition:transform .15s;
}
.synthese-a-la-demande[open] summary::before{transform:rotate(90deg);}
.synthese-a-la-demande-texte{font-size:14px; line-height:1.5; color:var(--ink); padding:0 0 10px;}

/* ---------- Signalement d'erreur (carte de resultat) ----------
   Lien discret + petit formulaire inline (disclosure, meme principe que
   .info-complementaire/.synthese-personnalisee ci-dessus) -- mecanisme
   volontairement simple, pas de modale/overlay. */
.signalement-erreur{margin-top:10px;}
.signalement-erreur summary{
  cursor:pointer; font-size:14px; font-weight:600; color:var(--ink-soft);
  list-style:none; display:inline-block;
  padding:6px 0; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line);
}
.signalement-erreur summary::-webkit-details-marker{display:none;}
.signalement-erreur summary:hover, .signalement-erreur summary:focus-visible{
  color:var(--coral-ink); text-decoration:underline;
}
.signalement-erreur-form{
  margin-top:8px; padding:12px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--paper); display:flex; flex-direction:column; gap:10px;
}
.signalement-erreur-form label{
  display:flex; flex-direction:column; gap:4px;
  font-size:14px; font-weight:600; color:var(--ink-soft);
}
.signalement-erreur-form select, .signalement-erreur-form textarea{
  font-family:var(--font-body); font-size:14px; color:var(--ink);
  padding:7px 9px; border-radius:var(--r-sm); border:1.5px solid var(--line);
  background:var(--surface); resize:vertical;
}
.signalement-erreur-submit{align-self:flex-start; padding:7px 16px; font-size:14px;}
.signalement-erreur-statut{font-size:14px; color:var(--ink-soft);}

/* Retour d'experience (cf. cartes.js construireRetourExperience) : reutilise
   le style .signalement-erreur ci-dessus, en 2 temps (textarea puis
   recapitulatif). [hidden] explicite : display:flex de
   .signalement-erreur-form l'emporterait sinon sur l'attribut hidden. */
.signalement-erreur-form[hidden]{display:none;}
.retour-experience-liste{margin:0; padding-left:18px; font-size:14px; color:var(--ink);}
.retour-experience-actions{display:flex; align-items:center; gap:12px;}
.retour-experience-corriger{
  background:none; border:none; padding:0; cursor:pointer;
  font-size:14px; font-weight:600; color:var(--ink-soft); text-decoration:underline;
}

.result-foot{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.result-foot .dist{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:14px; color:var(--ink-soft);}
.result-foot .distance{font-weight:700; color:var(--ink);}
.result-foot .telephone{
  display:inline-flex; align-items:center; min-height:44px; font-weight:700; color:var(--blue);
  text-decoration:underline; text-underline-offset:3px; font-variant-numeric:tabular-nums;
}
.result-foot .telephone-absent{color:var(--ink-soft);}
.mini-btn{
  background:var(--coral); color:var(--on-coral); font-weight:700; font-size:14px;
  min-height:44px; padding:0 16px; border-radius:var(--r-md); border:none; cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  transition:transform .15s, box-shadow .15s;
}
.mini-btn:hover{transform:translateY(-1px);}

/* ---------- Messages flash ---------- */
/* Partages entre les pages auth (connexion/inscription/profil) et le
   dashboard, d'ou leur presence ici plutot que dans auth.css. */
.flash-list{margin-bottom:20px; display:flex; flex-direction:column; gap:10px;}
.flash{
  padding:12px 14px;
  border-radius:var(--r-sm);
  font-size:15px;
  font-weight:600;
}
.flash-error{background:var(--error-bg); color:var(--error);}
.flash-warning{background:var(--warning-bg); color:var(--warning);}
.flash-success{background:var(--green-bg); color:var(--green-ink);}

/* ---------- Bandeau aidant (cf. templates/_bandeau_aidant.html) ----------
   Visible en permanence quand un aidant agit pour un proche, pour ne jamais
   confondre le proche actif. */
.bandeau-aidant{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px;
  margin-bottom:20px; padding:12px 16px; border-radius:var(--r-md);
  background:var(--sky); border:1.5px solid var(--blue); color:var(--ink); font-size:15px;
}
.bandeau-aidant strong{color:var(--blue-deep);}
.bandeau-aidant a{font-weight:700; color:var(--blue); white-space:nowrap;}

/* ---------- Liens legaux (pied de page) ---------- */
.pied-legal{
  display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center;
  margin-top:24px; font-size:14px;
}
.pied-legal a{color:var(--ink-soft); text-decoration:none; font-weight:600;}
.pied-legal a:hover{color:var(--blue); text-decoration:underline;}

/* ---------- Action destructive ---------- */
.btn-danger{
  background:var(--surface); color:var(--error); font-weight:700; font-size:16px;
  padding:15px 26px; border-radius:var(--r-md);
  border:1.5px solid var(--error-bg);
  transition:border-color .15s, background .15s;
  cursor:pointer; font-family:var(--font-body);
}
.btn-danger:hover{border-color:var(--error); background:var(--error-bg);}

/* ---------- Texte reserve aux lecteurs d'ecran ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- En-tete commun des pages connectees (cf. templates/_entete.html) ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
@media (prefers-reduced-transparency: reduce){ .site-header{background:var(--surface); backdrop-filter:none; -webkit-backdrop-filter:none;} }
.site-header-inner{
  max-width:1200px; margin:0 auto; padding:10px 28px; min-height:64px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:8px 24px;
}
.site-brand{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--ink);
  font-family:var(--font-display); font-weight:650; font-size:21px; letter-spacing:-0.02em;
}
.site-brand-role{
  font-family:var(--font-body); font-size:14px; font-weight:600; letter-spacing:0;
  color:var(--blue-deep); background:var(--sky);
  padding:3px 9px; border-radius:var(--r-sm);
}
.site-nav{display:flex; align-items:center; flex-wrap:wrap; gap:4px;}
.site-nav a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 14px;
  border-radius:var(--r-sm); text-decoration:none;
  color:var(--ink-soft); font-weight:600; font-size:15px;
  transition:color var(--duree) var(--ease), background var(--duree) var(--ease);
}
.site-nav a:hover{color:var(--blue-deep); background:var(--sky);}
.site-nav a[aria-current="page"]{color:var(--blue-deep); background:var(--sky);}
.site-nav .site-nav-sortie{margin-left:8px; border:1px solid var(--line-strong); border-radius:var(--r-md);}
.site-menu-bouton{display:none;}
@media (max-width:640px){
  .site-header-inner{padding:8px 16px;}
  /* Sans JavaScript : une seule rangee defilante. */
  .site-nav{width:100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -4px; padding:0 4px 4px;}
  .site-nav::-webkit-scrollbar{display:none;}
  .site-nav a{padding:0 12px; font-size:15px; white-space:nowrap; flex-shrink:0;}
  .site-nav .site-nav-sortie{margin-left:0;}
  /* Avec JavaScript : bouton "Menu" et liste verticale depliable. */
  .site-header[data-menu] .site-menu-bouton{
    display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 14px;
    border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--surface);
    color:var(--ink); font:inherit; font-weight:600; font-size:15px; cursor:pointer;
  }
  .site-menu-icone, .site-menu-icone::before, .site-menu-icone::after{display:block; width:18px; height:2px; border-radius:2px; background:currentColor; position:relative;}
  .site-menu-icone::before, .site-menu-icone::after{content:""; position:absolute; left:0;}
  .site-menu-icone::before{top:-6px;}
  .site-menu-icone::after{top:6px;}
  .site-header[data-menu="ferme"] .site-nav{display:none;}
  .site-header[data-menu="ouvert"] .site-nav{flex-direction:column; align-items:stretch; overflow:visible; margin:4px 0 6px; padding:0; gap:2px;}
  .site-header[data-menu="ouvert"] .site-nav a{font-size:16px; padding:0 14px;}
  .site-header[data-menu="ouvert"] .site-nav .site-nav-sortie{margin-top:6px; justify-content:center;}
}

/* ---------- Lien de retour en tete de page ---------- */
.lien-retour{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--blue); font-weight:700; font-size:15px; text-decoration:none; margin-bottom:8px;
}
.lien-retour:hover{text-decoration:underline;}

/* Un attribut hidden doit toujours l'emporter sur un display de composant (.btn-primary...). */
[hidden]{display:none !important;}

/* ---------- Contraste renforce (preference systeme "prefers-contrast: more") ----------
   Textes >= 7:1 (AAA) sur tous les fonds de l'interface, bordures >= 3:1. */
@media (prefers-contrast: more){
  :root{
    --ink-soft:#1F3354;
    --blue:#173A73;
    --blue-deep:#0F2A54;
    --green-ink:#0E5236;
    --coral-ink:#7F310E;
    --error:#8C1B14;
    --warning:#6B4000;
    --line:#6F86A8;
    --line-strong:#4F6488;
  }
  .badge-non-renseigne{background:var(--sky);}
  .btn-secondary, .card, .result-card{border-color:var(--line);}
  .badge, .tag, .proximite-tag, .etiquette-exemple{border:1px solid currentColor;}
  ::placeholder{color:var(--ink-soft); opacity:1;}
}


/* Cartes de resultat : nouveaux patients et secteur (cf. cartes.js). */
.infos-pratiques{display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:6px; font-size:14px; font-weight:600;}
.nouveaux-patients-oui, .nouveaux-patients-delai{color:var(--green-ink);}
.nouveaux-patients-non{color:var(--ink-soft);}
.infos-pratiques .secteur{color:var(--ink-soft);}

/* Demande de verification (cf. cartes.js, demandes.py). */
.demande-verification{margin-top:12px;}
.demande-verification-btn{
  min-height:44px; padding:10px 14px; border-radius:var(--r-sm); cursor:pointer;
  border:1.5px solid var(--blue); background:var(--surface); color:var(--blue); font:inherit; font-size:14.5px; font-weight:700;
}
.demande-verification-btn:hover{background:var(--sky);}
.demande-verification-btn:disabled{opacity:.6; cursor:default;}
.demande-verification-statut{margin:6px 0 0; font-size:14px; color:var(--green-ink); font-weight:600;}
.demande-verification-statut:empty{display:none;}

/* Lien d'evitement : invisible tant qu'il n'a pas le focus clavier. */
.lien-evitement{position:absolute; left:16px; top:-100px; z-index:1000; padding:12px 18px; border-radius:var(--r-sm); background:var(--ink); color:var(--paper); font-weight:600; text-decoration:none;}
.lien-evitement:focus{top:12px; outline:3px solid var(--blue); outline-offset:2px;}
main[tabindex="-1"]:focus{outline:none;}

.result-liens{display:inline-flex; flex-wrap:wrap; gap:8px; justify-content:flex-end;}
.mini-btn.mini-btn-secondaire{background:var(--surface); color:var(--blue-deep); border:1.5px solid var(--line);}

/* Lecture a voix haute d'une reponse (cf. chat-render.js). */
.ecouter-btn{
  align-self:flex-start; display:inline-flex; align-items:center; gap:8px; min-height:44px;
  padding:0 16px; border:1px solid var(--line-strong); border-radius:var(--r-pill); background:var(--surface);
  color:var(--blue-deep); font:inherit; font-size:15px; font-weight:600; cursor:pointer;
}
.ecouter-btn:hover{background:var(--sky);}
.ecouter-btn.en-lecture{background:var(--blue); border-color:var(--blue); color:var(--on-blue);}
.lecture-auto{display:inline-flex; align-items:center; gap:8px; font-size:15px; color:var(--ink-soft); min-height:44px; cursor:pointer;}
.lecture-auto input{width:20px; height:20px; accent-color:var(--blue);}

.voir-plus-lien{align-self:flex-start; display:inline-flex; align-items:center; min-height:44px; padding:0 4px; font-weight:600; color:var(--blue-deep); text-underline-offset:3px;}

.favori-note{display:flex; flex-direction:column; gap:6px; margin:10px 0 4px;}
.favori-note label{font-weight:600; font-size:15px;}
.favori-note textarea{width:100%; border:1.5px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; font:inherit; font-size:16px; resize:vertical;}
.favori-note-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.favori-note-statut{font-size:15px; color:var(--green-ink);}

/* ---------- Theme sombre (preference systeme) ----------
   Bleu nuit teinte, jamais de noir pur. Le bleu de la marque s'eclaircit
   pour rester lisible en texte (>= 6,6:1 sur toutes les surfaces) ; sur un
   fond bleu plein, le texte passe en fonce (--on-blue, 8,6:1). Contrastes
   verifies par test_coherence_visuelle.py. */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --ink:#E8EDF5;
    --ink-soft:#A7B4CA;
    --blue:#8DB2F2;
    --blue-deep:#B8CFF7;
    --sky:#172743;
    --paper:#0B1322;
    --surface:#121C2F;
    --surface-2:#18233A;
    --coral-bg:#352019;
    --green-bg:#10302A;
    --green-ink:#7DD3AC;
    --coral-ink:#F4A47F;
    --error:#F4A19D;
    --error-bg:#3A1B1E;
    --warning:#EDC07A;
    --warning-bg:#33270F;
    --line:#253552;
    --line-strong:#5D7296;
    --on-blue:#0B1322;
    --ombre-carte:0 1px 0 rgba(255,255,255,0.03) inset;
    --ombre-flottante:0 12px 32px -8px rgba(0,0,0,0.55);
    --anneau:0 0 0 4px rgba(141,178,242,0.25);
  }
  /* Le logo (bleu vif sur transparent) garde son contraste sur fond nuit. */
  img[src*="logo-transparent"]{filter:brightness(1.15);}
}
@media (prefers-color-scheme: dark) and (prefers-contrast: more){
  :root{
    --ink-soft:#C9D3E3;
    --blue:#B0CBF7;
    --line:#7E93B5;
    --line-strong:#9AADCB;
  }
}


/* ---------- En-tete des pages publiques (cf. templates/_entete_public.html) ---------- */
.entete-public{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
@media (prefers-reduced-transparency: reduce){ .entete-public{background:var(--paper); backdrop-filter:none; -webkit-backdrop-filter:none;} }
.entete-public-inner{
  max-width:1200px; margin:0 auto; padding:0 28px; min-height:64px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.entete-public-actions{display:flex; align-items:center; gap:8px;}
.entete-public-lien{
  display:inline-flex; align-items:center; min-height:44px; padding:0 12px; border-radius:var(--r-sm);
  font-weight:600; font-size:15px; color:var(--ink); text-decoration:none; white-space:nowrap;
}
.entete-public-lien:hover{background:var(--sky); color:var(--blue-deep);}
.entete-public-cta{min-height:44px; padding:0 16px; font-size:15px; white-space:nowrap;}
@media (max-width:640px){
  .entete-public-inner{padding:0 16px; min-height:60px;}
  .entete-public-lien{padding:0 8px;}
}
/* Telephones : espacements resserres pour que la marque et les deux actions
   tiennent sur une ligne sans debordement horizontal. */
@media (max-width:420px){
  .entete-public-actions{gap:4px;}
  .entete-public-lien{padding:0 8px;}
  .entete-public-cta{padding:0 12px;}
  .entete-public .site-brand{gap:8px;}
}
/* Tres petits ecrans : on garde les deux actions, le nom s'efface (le logo reste). */
@media (max-width:360px){ .entete-public .site-brand > span:last-child{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);} }

/* ---------- Carte de resultat etroite (telephone, colonne du chat) ----------
   Requete de conteneur : la carte s'adapte a SA largeur, quel que soit
   l'endroit ou elle est posee (chat, recherche, favoris, demo de l'accueil). */
.result-card{container-type:inline-size;}
@container (max-width: 440px){
  .result-top{flex-direction:column-reverse; gap:12px;}
  .result-top .result-actions{width:100%; justify-content:space-between;}
  .result-top .result-actions .badge{order:-1;}
  .result-foot{flex-direction:column; align-items:stretch; gap:12px;}
  .result-liens{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
  .result-liens > *{justify-content:center; text-align:center;}
  .result-liens > :only-child{grid-column:1 / -1;}
}

/* Avis + signalement sur une ligne ; le bloc ouvert prend toute la largeur. */
.result-retours{display:flex; flex-wrap:wrap; gap:0 18px; align-items:flex-start;}
.result-retours > details[open]{flex-basis:100%;}

/* Pied de page des pages publiques hors accueil (fiche, pages legales). */
.pied-public{padding:28px 0 40px; border-top:1px solid var(--line);}
.pied-public .pied-legal{margin:0;}