/*
 * Feuille de style — charte graphique « Rencontre des collaborateurs 2026 »
 * Palette, Archivo, compositions épurées. Aucune bibliothèque externe.
   Fichier statique : aucun balisage PHP ici (il serait servi tel quel au navigateur).
*/

@font-face{
  font-family:Archivo;
  src:url('Archivo-var.woff2') format('woff2-variations'),
      url('Archivo-var.woff2') format('woff2');
  font-weight:400 850;
  font-style:normal;
  font-display:swap;
}

:root{
  --rouge:#DA2128; --vert:#126535; --nuit:#16191E; --neige:#F5F6F4;
  --mer:#DCE2E8; --aube:#F2B66A; --roche:#7A5E4B;
  --ligne:rgba(220,226,232,.16); --voile:rgba(22,25,30,.72);
  --r:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--nuit); color:var(--neige);
  font-family:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--aube);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1180px;margin:0 auto;padding:28px 24px 120px}
.surtitre{font-weight:650;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--mer)}
h1{font-weight:850;font-size:clamp(30px,4.2vw,54px);line-height:1.05;letter-spacing:-.015em;margin:.28em 0 .2em}
h2{font-weight:850;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.01em;margin:0 0 .5em}
h3{font-weight:650;font-size:16px;letter-spacing:.01em;margin:0 0 .35em}
p{margin:0 0 .9em;color:var(--mer);max-width:74ch}
.lead{font-size:clamp(16px,1.5vw,19px);color:var(--mer)}
.sig{font-weight:650;font-size:15px;margin:14px 0 0;color:var(--neige)}
.sig .v{color:var(--vert)} .sig .r{color:var(--rouge)}
.barre{display:flex;gap:6px;margin:14px 0 0}
.barre i{display:block;width:52px;height:5px}
.barre .v{background:var(--vert)} .barre .r{background:var(--rouge)}

/* ---------- cartes ---------- */
.carte{background:#1B1F26;border:1px solid var(--ligne);border-radius:var(--r);padding:22px 22px}
.carte.claire{background:var(--neige);color:var(--nuit);border:0}
.carte.claire p,.carte.claire .mer{color:#4A5058}
.grille{display:grid;gap:16px}
@media(min-width:820px){.grille.d2{grid-template-columns:1fr 1fr}.grille.d3{grid-template-columns:repeat(3,1fr)}}

/* ---------- logo officiel : lettrage Nuit, donc sur carton clair ---------- */
.logo-carton{background:var(--neige);border-radius:6px;padding:18px 22px;display:inline-block}
.logo-carton img{display:block;height:74px;width:auto}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:inherit;font-weight:650;font-size:15px;letter-spacing:.02em;
  padding:14px 26px;border-radius:8px;border:1px solid transparent;
  cursor:pointer;transition:transform .08s ease,background .18s ease,opacity .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primaire{background:var(--vert);color:var(--neige)}
.btn-primaire:hover{background:#157a40}
.btn-aube{background:var(--aube);color:#2A2013}
.btn-aube:hover{background:#F7C784}
.btn-fantome{background:transparent;color:var(--neige);border-color:var(--ligne)}
.btn-fantome:hover{border-color:var(--mer)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn-large{width:100%;padding:17px 26px;font-size:16px}

/* ---------- barre de progression ---------- */
.jauge{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(22,25,30,.96);
  border-top:1px solid var(--ligne);backdrop-filter:blur(8px)}
.jauge-in{max-width:1180px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.compteur{font-weight:850;font-size:20px;letter-spacing:-.01em;white-space:nowrap}
.compteur small{font-weight:650;font-size:13px;color:var(--mer);letter-spacing:.02em}
.piste{flex:1 1 220px;height:6px;background:rgba(220,226,232,.14);border-radius:99px;overflow:hidden;min-width:140px}
.piste i{display:block;height:100%;background:var(--vert);width:0;transition:width .35s ease}
.piste i.complet{background:var(--vert)}
.jauge .btn{flex:0 0 auto}

/* ---------- lignes du bulletin ---------- */
.ligne{display:grid;grid-template-columns:1fr;gap:14px;align-items:center;
  padding:16px 18px;border:1px solid var(--ligne);border-radius:var(--r);background:#1B1F26;margin-bottom:12px}
@media(min-width:760px){.ligne{grid-template-columns:1fr 380px}}
.fil{display:flex;align-items:center;gap:14px;min-width:0}
.pastille{width:14px;height:14px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.fil .num{font-weight:850;font-size:14px;color:var(--mer);width:22px;flex:0 0 auto}
.fil .nom{font-weight:650;font-size:17px;letter-spacing:-.005em;min-width:0;overflow-wrap:anywhere}
.fil .cou{font-size:12px;color:var(--mer);letter-spacing:.06em;text-transform:uppercase}
select{font-family:inherit;font-size:15px;font-weight:400;color:var(--neige);background:#22272F;
  border:1px solid var(--ligne);border-radius:8px;padding:13px 38px 13px 14px;width:100%;
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23DCE2E8' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center}
select:focus{outline:2px solid var(--aube);outline-offset:1px}
select.rempli{border-color:rgba(18,101,53,.9);background-color:#1D2A22}
option[disabled]{color:#6B7480}
.note{font-size:13px;color:var(--mer)}
.alerte{display:none;margin-top:8px;font-size:13.5px;color:#FF9A9A}
.alerte.visible{display:block}

/* ---------- fiche critères ---------- */
.fiche{border:1px solid var(--ligne);border-radius:var(--r);padding:18px 20px;background:#1B1F26}
.fiche .t{font-weight:850;font-size:17px;margin:0 0 6px}
.fiche .acc{font-size:13px;color:var(--aube);margin:0 0 8px}
.fiche ul{margin:8px 0 0;padding-left:0;list-style:none}
.fiche li{font-size:14px;color:var(--mer);padding-left:18px;position:relative;margin-bottom:4px}
.fiche li:before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--vert)}

/* ---------- récapitulatif ---------- */
.recap{width:100%;border-collapse:collapse;font-size:15px}
.recap th{text-align:left;font-weight:650;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mer);padding:0 0 10px;border-bottom:1px solid var(--ligne)}
.recap td{padding:11px 0;border-bottom:1px solid var(--ligne);vertical-align:middle}
.recap td:last-child{text-align:right;white-space:nowrap}

/* ---------- divers ---------- */
.centre{text-align:center}
.mt{margin-top:26px}.mt-s{margin-top:14px}.mb{margin-bottom:26px}
.tres-petit{font-size:12px;color:#8A939E}
.sep{height:1px;background:var(--ligne);margin:34px 0}
.pill{display:inline-block;font-size:11px;font-weight:650;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 10px;border-radius:99px;border:1px solid var(--ligne);color:var(--mer)}
.pill.vert{color:#7FD3A2;border-color:rgba(18,101,53,.6)}
.pill.rouge{color:#FF9095;border-color:rgba(218,33,40,.55)}
@media print{body{background:#fff;color:#000}.jauge{display:none}}