/* scores.css — Pages "Score [TEST] requis pour [ÉCOLE]"
   Calqué sur pricing-tests-langues.css (mêmes variables, cards, boutons)
   pour rester cohérent avec l'habillage natif d'Erosophia. */

:root{
  --ink:#0a1628;--ink-mid:#3d4f6b;--ink-light:#6b7f9e;
  --border:#cdd5e0;--border-hover:#8fa3c0;
  --bg-page:#f4f6f9;--bg-card:#fff;--bg-row:#f7f9fc;
  --accent:#1a56db;--accent-dk:#1340b0;--accent-bg:#eef3fd;
  --radius-card:10px;--radius-btn:5px;
  --shadow-card:0 1px 2px rgba(10,22,40,.05),0 3px 12px rgba(10,22,40,.06);
  --font-ui:system-ui,-apple-system,'Segoe UI',sans-serif;
}

main{background:var(--bg-page)}

.score-wrap{
  max-width:760px;margin:0 auto;
  padding:clamp(2rem,4vw,3rem) clamp(1.5rem,5vw,3rem) clamp(3rem,6vw,5rem);
  font-family:var(--font-ui);color:var(--ink-mid);
}

/* En-tête : H1 + sous-titre établissement */
.score-head{margin-bottom:1.75rem}
.score-head h1{
  font-size:clamp(1.4rem,3vw,2rem);font-weight:700;color:var(--ink);
  line-height:1.25;letter-spacing:-.015em;margin:0 0 .5rem;
}
.score-head .score-sub{font-size:.95rem;color:var(--ink-light);margin:0}

/* Fil d'Ariane (20/09/2026). Discret : il sert la navigation et le balisage
   BreadcrumbList, pas la mise en avant. Separateur en ::before pour qu'il ne
   soit pas selectionne a la copie ni lu par les lecteurs d'ecran. */
.score-fil{margin:0 0 1.25rem;font-size:.82rem;line-height:1.5}
.score-fil ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .45rem;
}
.score-fil li{display:flex;align-items:center;gap:.45rem;min-width:0}
.score-fil li+li::before{content:"/";color:var(--border-hover);font-weight:400}
.score-fil a{color:var(--ink-light);text-decoration:none;transition:color .15s}
.score-fil a:hover,.score-fil a:focus-visible{color:var(--accent);text-decoration:underline}
.score-fil [aria-current="page"]{
  color:var(--ink);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}

/* Phrase de reponse directe, sous la carte. Redondante avec le chiffre, et
   c'est voulu : les extraits en vedette et les AI Overviews reprennent des
   phrases, pas des nombres isoles. */
.score-answer{
  font-size:1.02rem;line-height:1.65;color:var(--ink);
  margin:0 0 1.5rem;padding:0 .25rem;text-align:center;
}

/* Carte score principale */
.score-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-card);box-shadow:var(--shadow-card);
  padding:1.75rem;margin-bottom:1.5rem;text-align:center;
}
.score-card .score-label{
  font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-light);margin:0 0 .5rem;
}
.score-card .score-value{
  font-size:clamp(2.4rem,7vw,3.4rem);font-weight:800;color:var(--accent);
  letter-spacing:-.03em;line-height:1;
}
.score-card .score-max{font-size:1.1rem;font-weight:600;color:var(--ink-light)}

/* Grille de métadonnées (recommandé, CECRL, programme, lieu) */
.score-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.75rem;margin-bottom:1.75rem;
}
.score-meta .meta-item{
  background:var(--bg-row);border:1px solid var(--border);
  border-radius:7px;padding:.75rem .9rem;
}
.score-meta .meta-item span{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-light);margin-bottom:.2rem;
}
.score-meta .meta-item strong{font-size:.95rem;color:var(--ink);font-weight:600}

/* Paragraphe de contexte unique */
.score-context{font-size:.95rem;line-height:1.7;color:var(--ink-mid);margin:0 0 1.5rem}

/* Contact admissions (ecoles sans score chiffre publie) */
.score-contact{font-size:.92rem;color:var(--ink-mid);margin:0 0 1.5rem;padding:.75rem 1rem;background:var(--bg-row-hover,#edf1f8);border-radius:8px;line-height:1.6}
.score-contact a{color:var(--accent);text-decoration:none;font-weight:600}
.score-contact a:hover{color:var(--accent-dk);text-decoration:underline}

/* Tests alternatifs */
.score-alts{font-size:.9rem;color:var(--ink-mid);margin:0 0 1.75rem}
.score-alts a{color:var(--accent);text-decoration:none;font-weight:600}
.score-alts a:hover{color:var(--accent-dk);text-decoration:underline}

/* Bloc CTA (préparation) */
.score-cta{
  background:var(--accent-bg);border:1px solid #d4e0f7;
  border-radius:var(--radius-card);
  padding:1.5rem 1.75rem;margin-bottom:1.75rem;
  display:flex;flex-direction:column;align-items:center;
}
.score-cta p{font-size:.95rem;color:var(--ink-mid);line-height:1.6;margin:0 0 1rem;text-align:center}
.score-cta .cta-btn{
  display:inline-block;padding:.7rem 1.4rem;background:var(--accent);color:#fff;
  border:1px solid var(--accent);border-radius:var(--radius-btn);
  font-size:.9rem;font-weight:600;text-decoration:none;letter-spacing:.01em;
  transition:background .2s,border-color .2s;
}
.score-cta .cta-btn:hover{background:var(--accent-dk);border-color:var(--accent-dk);color:#fff}

/* Source officielle */
.score-source{font-size:.82rem;color:var(--ink-light);margin:0;line-height:1.5}
.score-source a{color:var(--accent)}

@media(max-width:480px){
  .score-wrap{padding:1.5rem 1rem 3rem}
  .score-card{padding:1.4rem}
  .score-fil{font-size:.76rem}
  .score-answer{font-size:.95rem;text-align:left}
}

/* ── Pages index (hub + par test) ─────────────────────────────── */
.score-index-section{margin:0 0 2rem}
.score-index-title{
  font-size:1.15rem;font-weight:700;color:var(--ink);margin:0 0 .75rem;
  letter-spacing:-.01em;
}
.score-index-title a{color:var(--accent);text-decoration:none}
.score-index-title a:hover{color:var(--accent-dk);text-decoration:underline}

.score-table{
  border:1px solid var(--border);border-radius:var(--radius-card);
  overflow:hidden;background:var(--bg-card);box-shadow:var(--shadow-card);
}
.score-table-head,.score-table-row{
  display:grid;grid-template-columns:1fr auto auto;
  gap:1rem;align-items:center;padding:.8rem 1.1rem;
}
.score-table-head{
  background:var(--bg-row);border-bottom:1px solid var(--border);
  font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-light);
}
.score-table-head span:not(:first-child),
.score-table-row span:not(:first-child){text-align:right;white-space:nowrap}
.score-table-row{
  text-decoration:none;border-bottom:1px solid var(--border);
  transition:background .15s;
}
.score-table-row:last-child{border-bottom:none}
.score-table-row:hover{background:var(--bg-row-hover,#edf1f8)}
.score-table-row .st-school{color:var(--ink);font-weight:600;font-size:.95rem}
.score-table-row .st-score{color:var(--accent);font-weight:800;font-size:1rem}
.score-table-row .st-level{color:var(--ink-light);font-weight:600;font-size:.85rem}

@media(max-width:480px){
  .score-table-head{display:none}
  .score-table-row{grid-template-columns:1fr auto;gap:.4rem 1rem;padding:.75rem .9rem}
  .score-table-row .st-level{grid-column:1;text-align:left;font-size:.8rem}
  .score-table-row .st-score{grid-row:1;grid-column:2}
}

/* ─── Carte interactive des régions (filtrage des fiches) ─────────────────── */
.score-map-block{margin:0 0 2rem}
.score-map-hint{
  font-size:.85rem;color:var(--ink-light);text-align:center;margin:0 0 .75rem;
}
.fr-map-wrap{
  max-width:380px;margin:0 auto;
}
.fr-map{
  display:block;width:100%;height:auto;
  /* le SVG hérite de ces couleurs via currentColor non utilisé ; on style les paths */
}
.fr-region{
  fill:var(--border);
  stroke:var(--bg-card);
  stroke-width:1.5;
  stroke-linejoin:round;
  transition:fill .15s ease;
  outline:none;
}
/* Régions cliquables (avec fiches) */
.fr-region[role="button"]{
  fill:var(--accent);
  fill-opacity:.55;
  cursor:pointer;
}
.fr-region[role="button"]:hover,
.fr-region[role="button"]:focus-visible{
  fill:var(--accent);
  fill-opacity:.8;
}
.fr-region[role="button"]:focus-visible{
  stroke:var(--accent);
  stroke-width:2.5;
}
.fr-region.is-active{
  fill:var(--accent);
  fill-opacity:1;
  stroke:var(--bg-card);
}
.fr-region.is-active:hover{
  fill:var(--accent-dk);
  fill-opacity:1;
}
/* Régions sans fiche : visibles mais en retrait (silhouette de la France lisible) */
.fr-region.is-empty{
  fill:var(--border);
  cursor:default;
}

/* Encarts outre-mer (DROM) : cartouches rectangulaires à gauche de la métropole.
   Héritent de .fr-region (couleurs/états actif/empty) ; on ajuste le trait et le
   libellé qui les accompagne. */
.fr-drom{
  stroke:var(--bg-card);
  stroke-width:1.5;
}
.fr-drom-label{
  font-family:var(--font-ui);
  font-size:15px;
  font-weight:600;
  fill:var(--ink);
  pointer-events:none;
  user-select:none;
}
/* rect et text sont freres dans <g> : on cible le libellé via ~ */
.fr-drom.is-empty ~ .fr-drom-label{
  fill:var(--ink-light);
}
/* Cartouche cliquable et actif : libellé lisible sur fond accentué. */
.fr-drom.is-active ~ .fr-drom-label{
  fill:var(--bg-card);
}

.fr-map-controls{
  text-align:center;margin-top:.75rem;
}
.fr-map-reset{
  font-family:var(--font-ui);font-size:.85rem;font-weight:600;
  color:var(--accent);background:var(--accent-bg);
  border:1px solid var(--border);border-radius:var(--radius-btn);
  padding:.4rem .9rem;cursor:pointer;transition:background .15s,border-color .15s;
}
.fr-map-reset:hover{background:var(--bg-card);border-color:var(--border-hover)}
.fr-map-reset[hidden]{display:none}

.score-map-status{
  text-align:center;font-size:.85rem;font-weight:600;color:var(--ink);
  margin:.75rem 0 0;
}
.score-map-status[hidden]{display:none}

/* Le filtrage JS masque les lignes/sections via l'attribut hidden ; on s'assure
   que rien ne le surcharge (certaines règles grid pourraient réafficher). */
.score-table-row[hidden],
[data-region-section][hidden]{display:none !important}

@media(max-width:480px){
  .fr-map-wrap{max-width:300px}
}