/* =========================================================
   EDUCFR — PAGE D'ARTICLE
   ---------------------------------------------------------
   Complète educfr-home.css et educfr-guide.css. Mise en page
   de lecture : une colonne de texte à mesure confortable, une
   colonne latérale légère, et des tableaux qui restent
   lisibles sur mobile.
   ========================================================= */

/* =========================================================
   EN-TÊTE DE L'ARTICLE
   ========================================================= */
.educfr-home .edu-art-head{
  position:relative;padding:44px 0 30px;
  background:
    radial-gradient(760px 420px at 82% -12%, rgba(33,87,232,.09), transparent 62%),
    linear-gradient(180deg,#fbfdff 0%,#f4f8ff 100%);
}
.educfr-home .edu-art-crumb{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:22px;
  font-size:13px;color:#93a5c0;
}
.educfr-home .edu-art-crumb a{color:#7a8dab;font-weight:650}
.educfr-home .edu-art-crumb a:hover{color:var(--edu-blue)}
.educfr-home .edu-art-crumb a + a::before,
.educfr-home .edu-art-crumb span::before{
  content:"/";margin-right:10px;color:#c2d0e4;
}
.educfr-home .edu-art-head h1{
  margin:14px 0 16px;max-width:24ch;
  font-size:clamp(28px,3.4vw,46px);line-height:1.1;
  letter-spacing:-.04em;font-weight:800;color:var(--edu-navy-strong);
}
.educfr-home .edu-art-lead{
  margin:0 0 18px;max-width:62ch;
  font-size:17.5px;line-height:1.62;color:var(--edu-muted);
}
.educfr-home .edu-art-meta{
  margin:0;display:flex;gap:16px;flex-wrap:wrap;
  font-size:13.5px;color:#93a5c0;
}

.educfr-home .edu-art-cover{
  margin:0;border-radius:26px;overflow:hidden;
  border:1px solid rgba(230,237,247,.9);
  box-shadow:0 34px 74px -36px rgba(8,38,84,.4);
}
/* La couverture pleine largeur écrasait le début de l'article. Elle est
   maintenant calée sur la largeur de la colonne de lecture, en 16/9 :
   l'image respire, et le texte commence plus haut dans la page. */
.educfr-home .edu-art-cover{
  aspect-ratio:16/9;max-width:820px;margin-inline:auto;border-radius:22px;
}
.educfr-home .edu-art-cover picture{display:contents}
.educfr-home .edu-art-cover img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:center 42%;
}

/* =========================================================
   CORPS
   ========================================================= */
.educfr-home .edu-art-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,320px);
  gap:52px;align-items:start;padding:52px 0 20px;
}

.educfr-home .edu-art-body{max-width:70ch;min-width:0}
.educfr-home .edu-art-body h2{
  margin:44px 0 14px;font-size:clamp(22px,2.2vw,30px);
  line-height:1.2;letter-spacing:-.035em;font-weight:800;color:var(--edu-navy-strong);
}
.educfr-home .edu-art-body h2:first-child{margin-top:0}
.educfr-home .edu-art-body h3{
  margin:30px 0 10px;font-size:18.5px;line-height:1.3;
  letter-spacing:-.025em;font-weight:750;color:var(--edu-navy);
}
.educfr-home .edu-art-body p{
  margin:0 0 17px;font-size:16.5px;line-height:1.75;color:var(--edu-text);
}
.educfr-home .edu-art-body strong{font-weight:750;color:var(--edu-navy-strong)}

.educfr-home .edu-art-body ul,
.educfr-home .edu-art-body ol{margin:0 0 20px;padding:0;display:grid;gap:11px}
.educfr-home .edu-art-body li{
  position:relative;padding-left:30px;
  font-size:16.5px;line-height:1.65;color:var(--edu-text);
}
.educfr-home .edu-art-body ul li::before{
  content:"";position:absolute;left:6px;top:.62em;
  width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,var(--edu-blue),var(--edu-cyan));
}
.educfr-home .edu-art-body ol{counter-reset:edu-art}
.educfr-home .edu-art-body ol li{counter-increment:edu-art}
.educfr-home .edu-art-body ol li::before{
  content:counter(edu-art);position:absolute;left:0;top:.1em;
  width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;
  font-size:11.5px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--edu-blue),var(--edu-blue-2));
}

/* Encadrés « À retenir », « Conseil Educfr »… */
.educfr-home .edu-art-callout{
  margin:26px 0;padding:20px 22px;border-radius:18px;
  background:linear-gradient(160deg,rgba(33,87,232,.06),rgba(34,187,231,.06));
  border:1px solid rgba(33,87,232,.16);
  border-left:4px solid var(--edu-blue);
}
.educfr-home .edu-art-callout strong{
  display:block;margin-bottom:7px;
  font-size:12.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--edu-blue);
}
.educfr-home .edu-art-callout p{margin:0;font-size:15.5px;line-height:1.65;color:var(--edu-text)}

/* Bandeau de repères chiffrés */
.educfr-home .edu-art-keys{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:0;margin:26px 0;padding:0;
  border-radius:18px;overflow:hidden;background:#fff;
  border:1px solid rgba(230,237,247,.95);box-shadow:var(--edu-shadow-soft);
}
.educfr-home .edu-art-keys li{
  padding:18px 20px;text-align:center;
  border-left:1px solid rgba(233,240,250,.95);
}
.educfr-home .edu-art-keys li::before{content:none}
.educfr-home .edu-art-keys li:first-child{border-left:0}
.educfr-home .edu-art-keys span{
  display:block;font-size:11.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#93a5c0;
}
.educfr-home .edu-art-keys strong{
  display:block;margin-top:6px;font-size:21px;line-height:1.1;
  letter-spacing:-.03em;font-weight:800;color:var(--edu-blue);
}

/* Tableaux — défilables plutôt que compressés sur petit écran */
.educfr-home .edu-art-table{
  margin:26px 0;border-radius:18px;overflow:hidden;
  border:1px solid rgba(230,237,247,.95);
}
.educfr-home .edu-art-table > table{
  width:100%;border-collapse:collapse;background:#fff;
}
.educfr-home .edu-art-table th,
.educfr-home .edu-art-table td{
  padding:13px 16px;text-align:left;vertical-align:top;
  font-size:14.5px;line-height:1.5;
  border-top:1px solid rgba(233,240,250,.95);
}
.educfr-home .edu-art-table th{
  background:#f7fafe;font-weight:750;color:var(--edu-navy-strong);
  border-top:0;
}
.educfr-home .edu-art-table td{color:var(--edu-text)}
.educfr-home .edu-art-table tbody tr:nth-child(even) td{background:#fbfdff}

/* Note simple issue d'un encadré sans intitulé */
.educfr-home .edu-art-note{
  margin:22px 0;padding:16px 18px;border-radius:14px;
  background:#f7fafe;border:1px solid rgba(230,237,247,.95);
  font-size:15px;line-height:1.6;color:var(--edu-muted);
}

/* =========================================================
   COLONNE LATÉRALE
   ========================================================= */
.educfr-home .edu-art-side{position:sticky;top:104px}
.educfr-home .edu-art-tool{
  padding:26px 24px;border-radius:24px;text-align:center;
  background:linear-gradient(180deg,#f7fafe,#eef5ff);
  border:1px solid rgba(230,237,247,.95);
}
.educfr-home .edu-art-tool-icon{
  display:grid;place-items:center;width:52px;height:52px;margin:0 auto 14px;
  border-radius:16px;color:var(--edu-blue);background:rgba(33,87,232,.10);
}
.educfr-home .edu-art-tool-icon svg{width:24px;height:24px}
.educfr-home .edu-art-tool strong{
  display:block;font-size:17px;font-weight:800;
  letter-spacing:-.025em;color:var(--edu-navy-strong);
}
.educfr-home .edu-art-tool p{
  margin:8px 0 18px;font-size:14px;line-height:1.55;color:var(--edu-muted);
}
.educfr-home .edu-art-tool .edu-h-cta{width:100%;min-height:50px;font-size:15px}

/* =========================================================
   À LIRE AUSSI
   ========================================================= */
.educfr-home .edu-art-more{
  padding:16px 0 76px;
}
.educfr-home .edu-art-more h2{
  margin:0 0 22px;font-size:clamp(22px,2.2vw,30px);
  letter-spacing:-.035em;font-weight:800;color:var(--edu-navy-strong);
}
.educfr-home .edu-art-next-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:22px;
}
.educfr-home .edu-art-next{
  display:flex;align-items:center;gap:18px;
  padding:16px;border-radius:20px;background:#fff;
  border:1px solid rgba(230,237,247,.9);box-shadow:var(--edu-shadow-soft);
  transition:border-color .22s ease, transform .26s ease;
}
.educfr-home .edu-art-next:hover{border-color:rgba(33,87,232,.32);transform:translateY(-3px)}
.educfr-home .edu-art-next picture{display:contents}
.educfr-home .edu-art-next img{
  flex:0 0 auto;width:104px;height:70px;object-fit:cover;border-radius:13px;
}
.educfr-home .edu-art-next span{min-width:0}
.educfr-home .edu-art-next small{
  display:block;font-size:11.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--edu-blue);
}
.educfr-home .edu-art-next strong{
  display:block;margin-top:6px;font-size:15px;line-height:1.35;
  letter-spacing:-.02em;font-weight:750;color:var(--edu-navy-strong);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (min-width:1061px) and (max-width:1600px){
  .educfr-home .edu-art-head{padding:34px 0 26px}
  .educfr-home .edu-art-grid{gap:40px;padding-top:42px}
  .educfr-home .edu-art-lead{font-size:16.5px}
  .educfr-home .edu-art-body p,
  .educfr-home .edu-art-body li{font-size:16px}
}

@media (max-width:1060px){
  .educfr-home .edu-art-grid{grid-template-columns:minmax(0,1fr);gap:34px;padding-top:38px}
  .educfr-home .edu-art-side{position:static;max-width:420px}
}

@media (max-width:760px){
  .educfr-home .edu-art-head{padding:26px 0 22px}
  .educfr-home .edu-art-cover{border-radius:18px;aspect-ratio:4/3}
  .educfr-home .edu-art-body p,
  .educfr-home .edu-art-body li{font-size:16px;line-height:1.7}
  .educfr-home .edu-art-body h2{margin-top:34px}
  .educfr-home .edu-art-next-grid{grid-template-columns:minmax(0,1fr)}
  .educfr-home .edu-art-more{padding-bottom:58px}

  /* Un tableau serré devient illisible : on le laisse défiler
     horizontalement plutôt que d'écraser les colonnes. */
  .educfr-home .edu-art-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .educfr-home .edu-art-table > table{min-width:520px}
  .educfr-home .edu-art-keys li{border-left:0;border-top:1px solid rgba(233,240,250,.95)}
  .educfr-home .edu-art-keys li:first-child{border-top:0}
}

@media (prefers-reduced-motion:reduce){
  .educfr-home .edu-art-next{transition:none}
  .educfr-home .edu-art-next:hover{transform:none}
}

/* Mention de source en fin d'actualité */
.educfr-home .edu-art-source{
  margin-top:26px;padding-top:16px;border-top:1px solid rgba(230,237,247,.95);
  font-size:13px;line-height:1.6;color:#93a5c0;
}
.educfr-home .edu-art-source a{color:var(--edu-blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}