/* =====================================================================
   Visio : le visage propre du site, par-dessus le moteur.

   style.css reste celui des prepas de concours, sobre et institutionnel.
   Cette feuille, liee apres lui sur chaque page de Visio, le recouvre :
   fond creme, encre profonde, corail pour agir, sarcelle pour les etudes,
   une police de titres a caractere (Bricolage Grotesque, licence OFL, dans
   assets/polices/), des cartes a bord franc et ombre portee decalee, des
   boutons en pastille. Le ton cherche est celui d'un outil qu'on a envie
   d'ouvrir, pas d'un formulaire administratif.

   Regle : on ne touche qu'aux variables et aux composants du moteur, jamais
   a leur structure HTML. Toute page du moteur doit rester lisible sans
   cette feuille.
   ===================================================================== */
@font-face{
  font-family:"Bricolage";
  src:url("polices/bricolage-grotesque.woff2") format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap;
}

:root{
  --bleu:#17203a;          /* l'encre : titres, bords, ombres */
  --bleu-clair:#0f8b8d;    /* sarcelle : liens, etudes */
  --or:#ffc94d;            /* jaune : surlignages */
  --corail:#ff6a4d;        /* action principale */
  --corail-fonce:#e4573b;
  --sarcelle:#0f8b8d;
  --lilas:#7b61ff;
  --fond:#fbf6ee;
  --carte:#fffdf8;
  --texte:#17203a;
  --gris:#5a6072;
  --bord:#17203a;
  --vert:#1a7f4b; --rouge:#c8412b; --ambre:#8a5d00;
  --r:16px;
  --ombre:5px 5px 0 var(--bleu);
  --ombre-douce:0 1px 0 rgba(23,32,58,.06);
  --titres:"Bricolage",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

body{background:var(--fond);color:var(--texte);
  background-image:radial-gradient(rgba(23,32,58,.07) 1px,transparent 1px);background-size:22px 22px}
a{color:var(--sarcelle)}
h1,h2,h3,.marque,.kpi .v,.fip-tete{font-family:var(--titres);letter-spacing:-.02em}
h1{font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.02;font-weight:800;margin:.1em 0 .45em}
h2{font-size:clamp(1.35rem,2.4vw,1.75rem);font-weight:800;border-bottom:0;padding-bottom:0;margin:2em 0 .55em}
h3{font-weight:700;font-size:1.08rem}
.chapo{color:var(--gris);font-size:1.08rem}
::selection{background:var(--or);color:var(--bleu)}

/* ---------- En-tete : clair, encre, pastilles ---------- */
body > header{background:var(--fond);color:var(--bleu);border-bottom:2px solid var(--bleu);
  backdrop-filter:saturate(1.2) blur(6px);background-color:rgba(251,246,238,.9)}
.marque{font-size:1.45rem;font-weight:800;color:var(--bleu)}
.marque a{color:var(--bleu)!important}
.marque span{color:var(--corail)}
nav a{color:var(--bleu);border:2px solid transparent;border-radius:999px;padding:6px 13px;font-weight:600;font-size:.9rem;
  transition:transform .15s,background .15s}
nav a:hover,nav a.actif{color:var(--bleu);border-bottom-color:transparent;background:#fff;border-color:var(--bleu);text-decoration:none}
nav a.actif{background:var(--or)}
.nav-connexion{background:var(--corail)!important;color:#fff!important;border:2px solid var(--bleu)!important;
  border-radius:999px!important;box-shadow:3px 3px 0 var(--bleu);font-weight:700}
.nav-connexion:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--bleu)}
.compte{background:var(--bleu);color:#fff}
.compte b{color:var(--or)}

/* ---------- Cartes, pistes, notes ---------- */
.carte{background:var(--carte);border:2px solid var(--bleu);border-radius:var(--r);box-shadow:var(--ombre);
  transition:transform .18s,box-shadow .18s}
.carte[style*="border-left"]{border-left-width:2px!important;border-left-color:var(--bleu)!important;
  background:linear-gradient(90deg,var(--or) 0,var(--or) 8px,var(--carte) 8px)}
.pistes .piste{border:2px solid var(--bleu);border-radius:var(--r);box-shadow:var(--ombre);background:var(--carte);
  transition:transform .18s,box-shadow .18s}
.pistes .piste:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--bleu);text-decoration:none}
.piste.active{border-top:10px solid var(--corail)}
.piste.verte{border-top:10px solid var(--sarcelle)}
.piste.ambre{border-top:10px solid var(--or)}
.piste .cat{color:var(--gris);letter-spacing:.08em}
.piste h3{color:var(--bleu)}
.piste .etat-piste{background:var(--bleu);color:#fff;border-radius:999px;font-weight:700}
.note{background:#fff;border:2px solid var(--bleu);border-left:10px solid var(--or);border-radius:12px}
.note.rouge{border-left-color:var(--corail);background:#fff5f2}
.kpi .v{color:var(--corail);font-size:1.6rem}
table{border:2px solid var(--bleu);border-radius:12px;overflow:hidden;background:var(--carte)}
th{background:var(--bleu);color:#fff}

/* ---------- Boutons : pastilles, bord franc, ombre decalee ---------- */
.btn{border-radius:999px;border:2px solid var(--bleu);background:var(--corail);color:#fff;font-weight:700;
  box-shadow:4px 4px 0 var(--bleu);transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{background:var(--corail-fonce);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--bleu);text-decoration:none}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--bleu)}
.btn.sec{background:#fff;color:var(--bleu)}
.btn.sec:hover{background:var(--or)}
.btn.pt{box-shadow:3px 3px 0 var(--bleu)}
.btn[style*="background:var(--or)"]{color:var(--bleu)!important}

/* ---------- Selecteurs de format (pastilles) ---------- */
.choix-concours span{color:var(--gris);font-weight:600}
.choix-concours a{border:2px solid var(--bleu);border-radius:999px;background:#fff;color:var(--bleu);font-weight:700;
  box-shadow:3px 3px 0 var(--bleu);transition:transform .15s}
.choix-concours a:hover{transform:translate(-1px,-1px);text-decoration:none;background:var(--or)}
.choix-concours a.actif,.choix-concours a.pris{background:var(--bleu);color:#fff}
.choix-concours a small{opacity:.8}

/* ---------- Formulaires ---------- */
input.ch,textarea.ch,select.ch{border:2px solid var(--bleu)!important;border-radius:12px!important;background:#fff}
input.ch:focus,textarea.ch:focus,select.ch:focus{box-shadow:3px 3px 0 var(--or);outline:none}
.choix button{border:2px solid var(--bleu)!important;border-radius:14px!important;box-shadow:3px 3px 0 var(--bleu)}
.choix button.pris{background:var(--or)!important;color:var(--bleu)!important}
.jauge i.fait{background:var(--corail)}
label.ch{color:var(--bleu)!important}

/* ---------- Pied ---------- */
footer{background:var(--bleu);color:#e9ecf5;margin-top:40px}
.pied{max-width:var(--largeur);margin:0 auto;padding:26px 20px;font-size:.9rem}
.pied a{color:var(--or)}
footer .pied b{color:#fff}

/* ---------- La salle d'entretien reste sombre : on n'y touche pas ---------- */
.salle,.salle *{--bord:#2a3350}

/* ---------- Composants propres a l'accueil Visio ---------- */
.v-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center;margin:8px 0 26px}
@media (max-width:860px){.v-hero{grid-template-columns:1fr}}
.v-hero h1{font-size:clamp(2.3rem,5.4vw,4rem)}
.v-hero .marqueur{background:linear-gradient(transparent 55%,var(--or) 55%,var(--or) 92%,transparent 92%);padding:0 .1em}
.v-hero .accroche{font-size:1.15rem;color:var(--gris);max-width:56ch}
.v-pastilles{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 22px}
.v-pastille{border:2px solid var(--bleu);border-radius:999px;padding:6px 13px;font-weight:700;font-size:.88rem;background:#fff;box-shadow:3px 3px 0 var(--bleu)}
.v-pastille.corail{background:var(--corail);color:#fff}
.v-pastille.sarcelle{background:var(--sarcelle);color:#fff}
.v-pastille.jaune{background:var(--or)}

/* Le jury : portraits en cartes qui se retournent au survol ou au clavier */
.v-jury{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin-top:14px}
.v-carte-jury{position:relative;perspective:900px;height:246px;cursor:pointer;background:transparent;border:0;padding:0;text-align:left;font:inherit}
.v-carte-jury .face{position:absolute;inset:0;border:2px solid var(--bleu);border-radius:var(--r);overflow:hidden;
  background:var(--carte);box-shadow:var(--ombre);transition:transform .55s cubic-bezier(.2,.7,.2,1);backface-visibility:hidden}
.v-carte-jury .face img{width:100%;height:170px;object-fit:cover;display:block;border-bottom:2px solid var(--bleu)}
.v-carte-jury .face .nom{padding:8px 10px 0;font-weight:800;font-family:var(--titres);font-size:1rem;line-height:1.1}
.v-carte-jury .face .role{padding:2px 10px 8px;font-size:.78rem;color:var(--gris);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v-carte-jury .dos{transform:rotateY(180deg);padding:12px;background:var(--bleu);color:#fff;font-size:.83rem;line-height:1.4}
.v-carte-jury .dos b{color:var(--or);display:block;margin-bottom:4px;font-family:var(--titres);font-size:1rem}
.v-carte-jury:hover .face.avant,.v-carte-jury:focus-visible .face.avant,.v-carte-jury.retournee .face.avant{transform:rotateY(180deg)}
.v-carte-jury:hover .dos,.v-carte-jury:focus-visible .dos,.v-carte-jury.retournee .dos{transform:rotateY(0)}
.v-carte-jury .pol{position:absolute;top:8px;left:8px;border:2px solid var(--bleu);border-radius:999px;padding:1px 8px;font-size:.7rem;font-weight:800;background:var(--or)}
.v-carte-jury .pol.doux{background:#d7f3ee}

/* Tirage du jury du jour */
.v-tirage{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin-top:14px}
@media (max-width:640px){.v-tirage{grid-template-columns:1fr}}
.v-tirage .siege{border:2px solid var(--bleu);border-radius:var(--r);background:var(--carte);box-shadow:var(--ombre);padding:12px;display:flex;gap:12px;align-items:center;min-height:120px}
.v-tirage .siege img{width:78px;height:88px;object-fit:cover;border:2px solid var(--bleu);border-radius:12px;background:#222}
.v-tirage .siege .humeur{font-size:.82rem;color:var(--gris);font-style:italic}
.v-tirage .vs{font-family:var(--titres);font-weight:800;font-size:1.6rem;text-align:center;color:var(--corail)}
@keyframes v-pop{0%{transform:scale(.92);opacity:0}100%{transform:scale(1);opacity:1}}
.v-tirage .siege.pop{animation:v-pop .35s cubic-bezier(.2,.8,.3,1.2)}

/* Le parcours en quatre pas */
.v-pas{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;counter-reset:pas}
.v-pas .pas{border:2px solid var(--bleu);border-radius:var(--r);background:var(--carte);padding:16px 16px 14px;box-shadow:var(--ombre);position:relative;counter-increment:pas}
.v-pas .pas::before{content:counter(pas);position:absolute;top:-16px;left:14px;width:32px;height:32px;border-radius:50%;background:var(--corail);color:#fff;
  border:2px solid var(--bleu);font-family:var(--titres);font-weight:800;display:flex;align-items:center;justify-content:center}
.v-pas .pas h3{margin:8px 0 4px}
.v-pas .pas p{margin:0;font-size:.92rem;color:var(--gris)}

/* Apparitions */
@media (prefers-reduced-motion:no-preference){
  .v-apparait{opacity:0;transform:translateY(14px);animation:v-monte .6s .1s forwards}
  @keyframes v-monte{to{opacity:1;transform:none}}
}