/* La page « Satisfaction des apprenants ».
   Reprend les jetons de hf-regions.css, chargée juste avant. */

.hf-sat{
  --navy:var(--e-global-color-primary,#1B2140);
  --or:var(--e-global-color-secondary,#C9A96E);
  --or-fonce:var(--e-global-color-hforfon,#A9884D);
  --texte:var(--e-global-color-text,#4A4F63);
  --sable:var(--e-global-color-hfsable,#F6F1E7);
  --creme:var(--e-global-color-hfcreme,#FBF6EC);
  --filet:rgba(27,33,64,.13);
}

/* ── Le bandeau de synthèse ───────────────────────────────────────────────
   La note est le seul élément que la page doit livrer en une seconde. */
.hf-sat__resume{background:var(--sable);padding:56px 0}
.hf-sat__resume .hf-region__cadre{
  display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:44px;align-items:center;
}
.hf-sat__note{
  background:var(--navy);color:#fff;padding:32px 28px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.hf-sat__note strong{
  font-family:"Bodoni Moda",Georgia,serif;font-weight:500;font-size:clamp(52px,7vw,74px);
  line-height:.92;color:var(--or);font-variant-numeric:tabular-nums;
}
.hf-sat__note strong small{font-size:.4em;opacity:.75;font-weight:400}
.hf-sat__note > span{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.78);
}

/* Les étoiles : un fond gris, un calque doré rogné à la largeur de la note.
   Une seule graduation possible, donc aucune approximation d'arrondi. */
.hf-sat__etoiles{position:relative;display:inline-block;line-height:1;white-space:nowrap;
  font-size:19px;letter-spacing:.14em}
.hf-sat__etoiles-vides{color:rgba(255,255,255,.24)}
.hf-sat__etoiles-pleines{
  position:absolute;left:0;top:0;overflow:hidden;color:var(--or);
}
.hf-sat__detail .hf-sat__etoiles{font-size:15px}
.hf-sat__detail .hf-sat__etoiles-vides{color:rgba(27,33,64,.18)}
.hf-sat__detail .hf-sat__etoiles-pleines{color:var(--or-fonce)}

.hf-sat__reperes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--filet);border:1px solid var(--filet);margin:0}
.hf-sat__reperes > div{background:#fff;padding:20px 20px;display:flex;flex-direction:column;gap:4px}
.hf-sat__reperes dt{order:2;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texte);opacity:.8}
.hf-sat__reperes dd{order:1;margin:0;font-family:"Bodoni Moda",Georgia,serif;font-weight:500;
  font-size:28px;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}

/* ── Le tableau ───────────────────────────────────────────────────────────
   Long par nature : il défile dans son propre cadre plutôt que de pousser
   la page de côté sur téléphone. */
.hf-sat__detail{padding:70px 0}
.hf-sat__tableau-cadre{overflow-x:auto;border:1px solid var(--filet);background:#fff}
.hf-sat__tableau{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.hf-sat__tableau th{
  text-align:left;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--or-fonce);font-weight:700;padding:15px 20px;
  border-bottom:1px solid var(--filet);background:var(--creme);
  position:sticky;top:0;
}
.hf-sat__tableau td{padding:13px 20px;border-bottom:1px solid rgba(27,33,64,.07);vertical-align:middle}
.hf-sat__tableau tbody tr:last-child td{border-bottom:none}
.hf-sat__tableau tbody tr:hover td{background:var(--creme)}
.hf-sat__cell-etoiles{width:150px;white-space:nowrap}
.hf-sat__cell-note{
  width:90px;text-align:right;font-family:"DM Mono",ui-monospace,monospace;
  font-size:14px;font-variant-numeric:tabular-nums;color:var(--navy);font-weight:500;
}
.hf-sat__mention{margin-top:18px !important;font-size:13.5px;opacity:.8}

/* ── Les verbatims ────────────────────────────────────────────────────
   Des retours de questionnaires, pas des témoignages signés : pas de photo,
   pas de nom inventé, pas d'étoiles. Le guillemet ouvrant fait la citation. */
.hf-sat__verbatims{padding:70px 0}
.hf-sat__intro{max-width:56ch;margin:0 0 34px !important;opacity:.85}
.hf-sat__citations{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;
  background:var(--filet);border:1px solid var(--filet);
}
.hf-sat__citations blockquote{
  margin:0;background:#fff;padding:30px 28px 28px;position:relative;
}
.hf-sat__citations blockquote::before{
  content:"«";position:absolute;top:8px;left:20px;
  font-family:"Bodoni Moda",Georgia,serif;font-size:52px;line-height:1;
  color:var(--or);opacity:.42;
}
.hf-sat__citations blockquote p{
  margin:0;font-size:15.5px;line-height:1.62;color:var(--navy);
  text-wrap:pretty;position:relative;
}
.hf-sat__detail--seule{padding-top:0}

@media (max-width:820px){
  .hf-sat__resume .hf-region__cadre{grid-template-columns:1fr;gap:24px}
}
@media (max-width:620px){
  .hf-sat__resume,.hf-sat__detail,.hf-sat__verbatims{padding:44px 0}
  .hf-sat__tableau th{position:static}
}