/* Samaritains de Versoix — feuille de style du site
   Modifie par : Claude Code — une seule feuille, pas de preprocesseur. */

:root{
  --encre:#14161A;
  --encre-doux:#4C525A;
  --rouge:#C0122B;
  --rouge-sombre:#6E0A1B;
  --papier:#FFFFFF;
  --papier-alt:#ECEFF0;
  --trait:#D5DADC;
  --bord:2px;
  /* réservé à l'administration */
  --admin-doux:#5A6068;
  --admin-fond:#F4F6F7;
  --gouttiere:clamp(20px, 5vw, 64px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* la barre haute est collante : on decale la cible des ancres pour ne pas la passer dessous */
section[id]{scroll-margin-top:84px}
body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:"Source Serif 4", Georgia, "Times New Roman", serif;
  font-size:clamp(17px,1.05vw + 14px,19px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- typographie ---------- */
.eyebrow, .cadence, .label, .btn, nav a, .wordmark, .stat-nb, footer .meta{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:"wdth" 112;
}
h1,h2,h3{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:"wdth" 118;
  font-weight:800;
  line-height:0.98;
  letter-spacing:-0.015em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{
  font-family:"Source Serif 4", Georgia, serif;
  font-variation-settings:normal;
  font-weight:500;
  font-size:clamp(1.95rem,3.4vw,3rem);
  line-height:1.18;
  letter-spacing:-.012em;
  text-transform:none;
  max-width:20ch;
}
h2{font-size:clamp(1.9rem,4vw,3rem);text-transform:uppercase}
h3{font-size:clamp(1.15rem,1.6vw,1.35rem);text-transform:uppercase;letter-spacing:0}
p{margin:0 0 1em;max-width:60ch}
.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 1.4rem;color:var(--rouge);
}
.cadence{
  display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;padding:.42em .8em;border:1px solid currentColor;
  border-radius:2px;opacity:.85;
}
.label{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;opacity:.6;margin-bottom:.35rem;
}

/* ---------- mise en page ---------- */
.wrap{max-width:1140px;margin:0 auto;padding-inline:var(--gouttiere)}
section{padding-block:clamp(56px,8vw,104px)}

/* ---------- barre haute ---------- */
header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--trait);
}
.bar{display:flex;align-items:center;gap:1.5rem;padding-block:.85rem}
.wordmark{
  font-weight:800;font-size:.95rem;letter-spacing:-.01em;text-transform:uppercase;
  text-decoration:none;line-height:1.1;margin-right:auto;
}
.wordmark span{display:block;font-weight:500;font-size:.66rem;letter-spacing:.14em;opacity:.55}
nav{display:flex;gap:1.4rem}
nav a{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent}
nav a:hover{border-bottom-color:var(--rouge)}
@media(max-width:760px){
  .bar{flex-wrap:wrap;gap:.5rem 1rem}
  nav{order:3;width:100%;gap:1.2rem;overflow-x:auto;padding-bottom:.1rem;scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  nav a{white-space:nowrap;font-size:.74rem}
  .bar .btn{padding:.62em 1em;font-size:.72rem}
  section[id]{scroll-margin-top:118px}
}

.btn{
  display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;padding:.85em 1.5em;
  background:var(--rouge);color:#fff;border:var(--bord) solid var(--rouge);border-radius:2px;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.btn:hover{background:var(--rouge-sombre);border-color:var(--rouge-sombre);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--encre);border-color:var(--encre)}
.btn--ghost:hover{background:var(--encre);color:#fff;border-color:var(--encre)}
.btn--clair{background:#fff;color:var(--rouge-sombre);border-color:#fff}
.btn--clair:hover{background:transparent;color:#fff;border-color:#fff}
.btn--contour-clair{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--contour-clair:hover{background:#fff;color:var(--rouge-sombre);border-color:#fff}
.bar .btn{padding:.7em 1.2em}

/* ---------- hero ---------- */
.hero{padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(40px,5vw,64px)}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,5vw,72px);align-items:start}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero h1 .rouge{color:var(--rouge);font-weight:600}
.chapo{font-size:1.12em;color:var(--encre-doux);max-width:46ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}

/* ticket de rendez-vous — élément signature */
.ticket{
  position:relative;background:var(--papier);border:var(--bord) solid var(--encre);
  border-radius:3px;overflow:hidden;box-shadow:10px 10px 0 var(--papier-alt);
}
.ticket-haut{background:var(--rouge);color:#fff;padding:1rem 1.4rem}
.ticket-haut .label{opacity:.8;margin:0;color:#fff}
.ticket-corps{padding:1.4rem;position:relative}
.ticket-corps::before{
  content:"";position:absolute;top:0;left:0;right:0;
  border-top:2px dashed var(--encre);opacity:.35;
}
.date-jour{
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 122;
  font-weight:800;font-size:clamp(3.2rem,7vw,4.4rem);line-height:.85;letter-spacing:-.03em;
}
.date-mois{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:1rem;
  letter-spacing:.18em;text-transform:uppercase;margin-top:.5rem;
}
.ticket dl{margin:1.3rem 0 0;display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;font-size:.9rem}
.ticket dt{font-family:"Archivo",sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.55;padding-top:.28em}
.ticket dd{margin:0}
.ticket .btn{margin-top:1.4rem;width:100%;text-align:center}

/* ---------- ligne ECG ---------- */
.ecg{display:block;width:100%;height:38px;color:var(--rouge)}
.ecg path{
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1400;stroke-dashoffset:1400;animation:trace 2.6s ease-out .3s forwards;
}
@keyframes trace{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .ecg path{animation:none;stroke-dashoffset:0}
  html{scroll-behavior:auto}
  .btn{transition:none}
}

/* ---------- bandes ---------- */
.bande-sang{background:var(--rouge-sombre);color:#fff}
.bande-sang .cadence{color:#fff}
.bande-sang .eyebrow{color:#F0B8C0}
.bande-claire{background:var(--papier-alt)}
.bande-rouge{background:var(--rouge);color:#fff}
.bande-rouge .eyebrow{color:#FFE1E6}
.bande-rouge .cadence{color:#fff}

.tete{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap;margin-bottom:2.2rem}
.duo{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:start}
@media(max-width:860px){.duo{grid-template-columns:1fr}}

.fiche{border:1px solid rgba(255,255,255,.28);border-radius:3px;padding:1.5rem}
.fiche h3{margin-bottom:.7rem}
.fiche p:last-child{margin-bottom:0}
.fiche--sombre{border-color:var(--trait);background:#fff}

.stat{border-left:var(--bord) solid var(--rouge);padding-left:1.2rem;margin:2rem 0 0}
.bande-sang .stat{border-left-color:#fff}
.stat-nb{font-weight:800;font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;font-variation-settings:"wdth" 120}
.stat p{margin:.4rem 0 0;font-size:.95rem;opacity:.9}

.liste{list-style:none;margin:0 0 1.4rem;padding:0}
.liste li{padding:.7rem 0 .7rem 1.6rem;border-bottom:1px solid var(--trait);position:relative}
.bande-sang .liste li,.bande-rouge .liste li{border-bottom-color:rgba(255,255,255,.25)}
.liste li::before{
  content:"";position:absolute;left:0;top:1.15em;width:9px;height:9px;
  background:var(--rouge);border-radius:1px;
}
.bande-sang .liste li::before,.bande-rouge .liste li::before{background:#fff}

.dates{list-style:none;margin:1.2rem 0 0;padding:0}
.dates li{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.25);
  font-family:"Archivo",sans-serif;font-size:.95rem;
}
.dates li span:last-child{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;opacity:.7}

.mail{font-family:"Archivo",sans-serif;font-weight:600;text-decoration-thickness:1px;text-underline-offset:3px}

/* ---------- pied de page ---------- */
footer{background:var(--encre);color:#fff;padding-block:clamp(48px,6vw,72px)}
footer a{color:#fff}
.pied{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2.4rem}
footer .meta{font-size:.9rem;line-height:1.75}
footer .label{opacity:.5}
.fin{margin-top:3rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.2);font-family:"Archivo",sans-serif;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;opacity:.55}

:focus-visible{outline:3px solid var(--rouge);outline-offset:3px}
.bande-sang :focus-visible,.bande-rouge :focus-visible,footer :focus-visible{outline-color:#fff}
.saut{position:absolute;left:-9999px}
.saut:focus{left:1rem;top:1rem;position:fixed;background:#fff;padding:.8rem 1.2rem;z-index:99}

/* ---------- encart evenement ----------
   Place tout en haut de la page, sous la barre collante. Volontairement sobre :
   la bande « Don du sang » doit rester le bloc le plus visible. */
.encart{background:var(--papier-alt);border-bottom:1px solid var(--trait);
  padding-block:clamp(30px,4.5vw,48px)}
.encart-in{display:flex;gap:clamp(18px,3vw,40px);align-items:center;flex-wrap:wrap}
.encart-txt{flex:1 1 400px;border-left:3px solid var(--rouge);padding-left:clamp(16px,2vw,26px)}
.encart .label{display:inline-block;background:var(--rouge);color:#fff;opacity:1;
  padding:.4em .75em;border-radius:2px;margin-bottom:.75rem;letter-spacing:.13em}
.encart h2{font-size:clamp(1.5rem,2.8vw,2.15rem);text-transform:none;
  font-variation-settings:"wdth" 110;letter-spacing:-.012em;margin-bottom:.35em}
.encart p{margin:0;max-width:62ch}
.encart .quand{font-family:"Archivo",sans-serif;font-weight:700;font-size:.86rem;
  letter-spacing:.05em;text-transform:uppercase;margin-top:.75rem;color:var(--rouge)}
.encart .btn{flex:0 0 auto}

/* ---------- impression ---------- */
@media print{
  header,.ecg,.saut,.btn,.hero-actions{display:none!important}
  body{font-size:10.5pt;line-height:1.45;color:#000;background:#fff}
  .bande-sang,.bande-rouge,.bande-claire,footer{background:#fff!important;color:#000!important}
  .bande-sang .eyebrow,.bande-rouge .eyebrow{color:#000!important}
  .cadence,footer .label,footer a,.fin{color:#000!important;opacity:1}
  .fiche{border:1px solid #000!important;background:#fff!important}
  .liste li::before{background:#000!important}
  .dates li,.liste li{border-bottom-color:#BBB!important}
  .stat{border-left-color:#000!important}
  .ticket{box-shadow:none;border-color:#000}
  section{padding-block:16pt;break-inside:avoid}
  .hero-grid,.duo,.pied{display:block}
  h2{font-size:16pt}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:7.5pt;word-break:break-all;opacity:.7}
}


/* =====================================================================
   ADMINISTRATION (admin.php)
   Tout est porté par body.admin : aucune de ces règles ne peut déborder
   sur la page publique, et l'inverse est vrai aussi.
   ===================================================================== */
body.admin{
  margin:0;background:var(--admin-fond);color:var(--encre);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.admin header{
  position:static;background:var(--encre);color:#fff;padding:1.1rem 0;
  border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;
}
.admin header strong{font-size:1.05rem;letter-spacing:.02em}
.admin header span{display:block;font-size:.82rem;opacity:.6;margin-top:.15rem}
.admin .wrap{max-width:920px;margin:0 auto;padding:0 1.2rem}
.admin main{padding:1.8rem 0 3rem}
.admin section{
  background:#fff;border:1px solid var(--trait);border-radius:4px;
  padding:1.4rem;margin-bottom:1.4rem;
}
.admin h2{
  font-family:inherit;font-variation-settings:normal;font-weight:600;
  font-size:1.05rem;line-height:1.3;letter-spacing:.01em;text-transform:none;
  margin:0 0 .3rem;
}
/* Les trois blocs du formulaire : en-tête sombre numéroté, volets séparés par un filet. */
.admin .bloc{
  background:#fff;border:1px solid var(--trait);border-radius:4px;
  padding:0;margin:0 0 2.2rem;overflow:hidden;
}
.admin .bloc:last-of-type{margin-bottom:1.6rem}
.admin .bloc-tete{
  display:flex;gap:1rem;align-items:flex-start;
  padding:1.15rem 1.4rem;background:var(--encre);color:#fff;
}
.admin .bloc-no{
  flex:0 0 auto;width:1.95rem;height:1.95rem;border-radius:50%;
  background:var(--rouge);color:#fff;font-weight:700;font-size:.92rem;
  display:flex;align-items:center;justify-content:center;margin-top:.1rem;
}
.admin .bloc-tete h2{color:#fff;margin:.12rem 0 .3rem}
.admin .bloc-tete .aide{color:rgba(255,255,255,.72);margin:0;font-size:.86rem}
.admin .volet{padding:1.4rem}
.admin .volet + .volet{border-top:1px solid var(--trait);background:#FAFBFB}
.admin .volet > h3{
  font-family:inherit;font-variation-settings:normal;font-weight:700;
  font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--rouge);line-height:1.3;margin:0 0 .45rem;
}
@media(max-width:720px){
  .admin .bloc-tete{padding:1rem}
  .admin .volet{padding:1.1rem}
}
.admin .aide{color:var(--admin-doux);font-size:.88rem;margin:0 0 1.1rem;max-width:70ch}
.admin label{
  display:block;font-size:.75rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--admin-doux);margin-bottom:.28rem;
}
.admin input[type=text],.admin input[type=date],.admin input[type=time],
.admin input[type=number],.admin textarea{
  width:100%;padding:.55rem .65rem;border:1px solid var(--trait);border-radius:3px;
  font:inherit;font-size:.95rem;background:#fff;color:inherit;
}
.admin textarea{min-height:5.5em;resize:vertical}
.admin input:focus,.admin textarea:focus{border-color:var(--rouge)}
.admin .grille{display:grid;gap:.9rem}
.admin .champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.9rem}
.admin .rangee{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr auto;gap:.7rem;align-items:end;
  padding:.85rem 0;border-bottom:1px solid var(--trait);
}
.admin .rangee:last-of-type{border-bottom:0}
@media(max-width:720px){
  .admin .rangee{grid-template-columns:1fr 1fr;padding:1rem 0}
}
.admin .suppr{
  display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--admin-doux);
  text-transform:none;letter-spacing:0;font-weight:500;white-space:nowrap;padding-bottom:.62rem;
}
.admin .suppr input{width:1.05rem;height:1.05rem;accent-color:var(--rouge)}
.admin .bascule{
  display:flex;align-items:center;gap:.6rem;margin-bottom:1.1rem;font-size:.95rem;
  text-transform:none;letter-spacing:0;color:var(--encre);font-weight:500;
}
.admin .bascule input{width:1.15rem;height:1.15rem;accent-color:var(--rouge)}
.admin .neuf{margin-top:1.2rem;padding-top:1.1rem;border-top:2px dashed var(--trait)}
.admin .neuf > p{font-size:.85rem;color:var(--admin-doux);margin:0 0 .4rem;max-width:70ch}
.admin button{
  font:inherit;font-weight:600;background:var(--rouge);color:#fff;border:0;
  padding:.8rem 1.6rem;border-radius:3px;cursor:pointer;letter-spacing:.02em;
}
.admin button:hover{background:#8E0E20}
.admin .barre{
  position:sticky;bottom:0;background:var(--admin-fond);padding:1rem 0;
  border-top:1px solid var(--trait);display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;
}
.admin .barre a{color:var(--admin-doux);font-size:.88rem}
.admin .avis{padding:.85rem 1rem;border-radius:3px;margin:0 0 1.4rem;max-width:none;font-size:.93rem}
.admin .avis--ok{background:#E8F4EC;border:1px solid #9CC9AC;color:#1D5B33}
.admin .avis--erreur{background:#FBEAEC;border:1px solid #E0A3AC;color:#8E0E20}
.admin .avis--info{background:#FFF6E3;border:1px solid #E6CE93;color:#6B5310}
.admin code{background:#F0F2F3;padding:.1em .35em;border-radius:2px;font-size:.9em}