/* ============================================================
   Français avec Fred — Offre élèves (pages de vente)
   Palette : encre #10243E · papier #F7F9FC · bleu Fred #1673E2
             rouge CTA #D0342C · or #F2C94C
   Typo : Fraunces (display) · system-ui (body)
   ============================================================ */

:root{
  --encre:#10243E;
  --encre-70:#3D5068;
  --encre-50:#64748B;
  --papier:#F7F9FC;
  --bleu:#1673E2;
  --bleu-pale:#EAF2FD;
  --rouge:#D0342C;
  --rouge-vif:#E0432F;
  --or:#F2C94C;
  --blanc:#FFFFFF;
  --ligne:#E4EAF2;
  --radius:16px;
  --ombre:0 10px 34px rgba(16,36,62,.10);
  --ombre-douce:0 4px 18px rgba(16,36,62,.07);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--papier);
  color:var(--encre);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.display{
  font-family:"Fraunces",Georgia,"Times New Roman",serif;
  font-weight:700;
  line-height:1.15;
  letter-spacing:-0.01em;
  color:var(--encre);
}

img{max-width:100%;height:auto;display:block}
a{color:var(--bleu)}

/* ---------- Bandeau urgence sticky ---------- */
.bandeau{
  position:sticky;top:0;z-index:50;
  background:var(--encre);color:#fff;
  padding:9px 14px;
  display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:14px;text-align:center;
}
.bandeau b{color:#FFD9D6}
.bandeau .compte{
  font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.12);
  border-radius:8px;padding:3px 10px;
  font-weight:700;font-size:13.5px;letter-spacing:.5px;white-space:nowrap;
}

/* ---------- Structure ---------- */
.section{padding:52px 22px}
.inner{max-width:700px;margin:0 auto}
.inner-large{max-width:960px;margin:0 auto}
.sur-blanc{background:var(--blanc)}

.eyebrow{
  display:inline-block;
  font-size:12.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--bleu);
  background:var(--bleu-pale);
  border-radius:100px;padding:6px 16px;
  margin-bottom:20px;
}

/* ---------- Hero ---------- */
.hero{padding:56px 22px 40px;text-align:center;background:var(--blanc)}
.hero h1{font-size:clamp(34px,6vw,54px);margin-bottom:16px}
.hero h1 .dia{color:var(--rouge)}
.hero .sous{
  font-size:clamp(17px,2.6vw,20px);color:var(--encre-70);
  max-width:560px;margin:0 auto 26px;
}
.par-fred{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:14.5px;color:var(--encre-50);margin-bottom:30px;
}
.par-fred img{width:34px;height:34px;border-radius:50%}
.par-fred b{color:var(--encre)}

/* Échelle CECRL */
.cecrl{
  display:flex;justify-content:center;align-items:center;gap:0;
  margin:0 auto 34px;max-width:420px;
}
.cecrl .niv{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;color:var(--encre-50);
  background:var(--papier);border:2px solid var(--ligne);
  position:relative;flex-shrink:0;
}
.cecrl .lien{height:2px;background:var(--ligne);flex:1;min-width:10px}
.cecrl .lien.fait{background:var(--bleu)}
.cecrl .niv.fait{border-color:var(--bleu);color:var(--bleu);background:var(--bleu-pale)}
.cecrl .niv.ici{
  background:linear-gradient(135deg,#3F8EF0,#1259C4);
  border-color:transparent;color:#fff;
  width:56px;height:56px;font-size:18px;
  box-shadow:0 6px 20px rgba(22,115,226,.38);
}
.cecrl .niv.ici::after{
  content:attr(data-l);position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  font-size:11px;font-weight:700;color:var(--bleu);white-space:nowrap;letter-spacing:.3px;text-transform:uppercase;
}

.prix-teaser{font-size:19px;margin-bottom:22px;color:var(--encre-70)}
.prix-teaser s{color:var(--encre-50)}
.prix-teaser b{color:var(--rouge);font-size:26px;font-family:"Fraunces",serif}

.cta,.cta:visited{
  display:inline-block;background:var(--rouge);color:#fff!important;
  font-size:17px;font-weight:800;text-decoration:none;
  padding:17px 40px;border-radius:12px;
  box-shadow:0 8px 24px rgba(208,52,44,.35);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.cta:hover{background:var(--rouge-vif);transform:translateY(-2px);box-shadow:0 12px 28px rgba(208,52,44,.42)}
.cta:focus-visible{outline:3px solid var(--encre);outline-offset:3px}
.cta-note{font-size:13.5px;color:var(--encre-50);margin-top:12px}

.hero .mockup{margin:44px auto 0;max-width:760px}
.hero .mockup img{filter:drop-shadow(0 18px 40px rgba(16,36,62,.16))}

/* ---------- Vidéo ---------- */
.bloc-video{max-width:760px;margin:0 auto}
.bloc-video video{
  width:100%;border-radius:var(--radius);
  box-shadow:var(--ombre);background:#000;
}
.legende-video{text-align:center;font-size:14.5px;color:var(--encre-50);margin-top:14px}

/* ---------- Titres de section ---------- */
.titre-section{font-size:clamp(26px,4.5vw,36px);text-align:center;margin-bottom:14px}
.chapo{text-align:center;color:var(--encre-70);max-width:560px;margin:0 auto 38px;font-size:17px}

/* ---------- Ce que vous obtenez ---------- */
.obtenez{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;max-width:760px;margin:0 auto}
.obtenez .item{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:14px;
  padding:18px 20px;display:flex;gap:14px;align-items:flex-start;
  box-shadow:var(--ombre-douce);
}
.obtenez .item .ico{
  width:38px;height:38px;border-radius:10px;background:var(--bleu-pale);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  color:var(--bleu);
}
.obtenez .item b{display:block;font-size:15.5px}
.obtenez .item span{font-size:13.8px;color:var(--encre-50);line-height:1.5;display:block;margin-top:2px}

/* ---------- Copy / à qui ---------- */
.copy p{margin-bottom:18px;color:var(--encre-70);font-size:17px}
.copy p b{color:var(--encre)}

/* ---------- Témoignages ---------- */
.temoins{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.temoin{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--radius);
  padding:26px 24px;box-shadow:var(--ombre-douce);
  display:flex;flex-direction:column;gap:14px;
}
.temoin .etoiles{color:var(--or);font-size:16px;letter-spacing:2px}
.temoin p{font-size:15px;color:var(--encre-70);line-height:1.6;flex:1}
.temoin .qui{display:flex;align-items:center;gap:12px}
.temoin .qui img{width:44px;height:44px;border-radius:50%}
.temoin .qui b{font-size:14.5px;display:block}
.temoin .qui span{font-size:12.5px;color:var(--encre-50)}

/* ---------- Garantie ---------- */
.garantie{
  max-width:700px;margin:0 auto;
  background:var(--blanc);
  border:2px solid var(--bleu);border-radius:var(--radius);
  padding:34px 32px;display:flex;gap:24px;align-items:center;
  box-shadow:var(--ombre-douce);
}
.garantie .badge{
  flex-shrink:0;width:88px;height:88px;border-radius:50%;
  background:linear-gradient(135deg,#3F8EF0,#1259C4);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-weight:900;box-shadow:0 8px 22px rgba(22,115,226,.32);
}
.garantie .badge .n{font-size:30px;font-family:"Fraunces",serif;line-height:1}
.garantie .badge .l{font-size:10px;letter-spacing:1px;text-transform:uppercase;margin-top:3px}
.garantie h3{font-size:20px;margin-bottom:8px}
.garantie p{font-size:15px;color:var(--encre-70)}
@media (max-width:560px){.garantie{flex-direction:column;text-align:center;padding:30px 22px}}

/* ---------- Tarifs ---------- */
.tarifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;max-width:860px;margin:0 auto}
.carte-prix{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:20px;
  padding:34px 30px;box-shadow:var(--ombre-douce);
  display:flex;flex-direction:column;position:relative;
}
.carte-prix.premium{border:2px solid var(--bleu);box-shadow:var(--ombre)}
.tag-populaire{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--bleu);color:#fff;font-size:12px;font-weight:800;
  letter-spacing:1px;text-transform:uppercase;
  border-radius:100px;padding:5px 16px;white-space:nowrap;
}
.carte-prix .nom{font-size:13px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--encre-50);margin-bottom:14px}
.carte-prix .prix{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.carte-prix .prix s{font-size:20px;color:var(--encre-50)}
.carte-prix .prix .maintenant{font-size:44px;font-family:"Fraunces",serif;font-weight:700;color:var(--rouge)}
.carte-prix .economie{font-size:13.5px;font-weight:700;color:#1B7F4D;background:#E7F6EE;border-radius:100px;padding:3px 12px;display:inline-block;margin-bottom:20px;align-self:flex-start}
.carte-prix ul{list-style:none;margin:0 0 26px;flex:1}
.carte-prix li{
  padding:8px 0 8px 30px;font-size:15px;color:var(--encre-70);
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%231673E2" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') no-repeat left 11px;
}
.carte-prix li.plus{font-weight:600;color:var(--encre)}
.carte-prix .cta{display:block;text-align:center;padding:16px 20px}
.carte-prix .en3fois{text-align:center;font-size:14px;color:var(--encre-70);margin-top:14px}
.carte-prix .en3fois a{font-weight:700}
.carte-prix .en3fois s{color:var(--encre-50)}
.note-tarifs{text-align:center;font-size:13.5px;color:var(--encre-50);margin-top:26px}
.note-tarifs b{color:var(--encre-70)}

/* ---------- FAQ ---------- */
.faq{max-width:700px;margin:0 auto}
.faq details{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:12px;
  padding:0;margin-bottom:12px;overflow:hidden;
}
.faq summary{
  cursor:pointer;font-weight:700;font-size:16px;padding:18px 22px;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--bleu);font-weight:400;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 22px 18px;font-size:15px;color:var(--encre-70)}

/* ---------- Footer ---------- */
.pied{
  background:var(--encre);color:#B9C8D9;
  padding:52px 22px 40px;text-align:center;font-size:14.5px;
}
.pied img.fred{width:84px;height:84px;border-radius:24px;margin:0 auto 16px}
.pied .nom-fred{color:#fff;font-weight:700;font-size:17px}
.pied .yt{margin:6px 0 22px;color:#8FA3B8}
.pied a{color:#D6E4F5}
.pied .copyright{margin-top:22px;font-size:12.5px;color:#64748B}

/* ---------- Index : grille des cours ---------- */
.grille-cours{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px;max-width:780px;margin:0 auto}
.carte-cours{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:20px;
  overflow:hidden;box-shadow:var(--ombre-douce);display:flex;flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease;
}
.carte-cours:hover{transform:translateY(-3px);box-shadow:var(--ombre)}
.carte-cours .visuel{background:#fff;border-bottom:1px solid var(--ligne);padding:18px;display:flex;align-items:center;justify-content:center;height:190px}
.carte-cours .visuel img{max-height:100%;object-fit:contain}
.carte-cours .corps{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.carte-cours .niveau-tag{display:inline-block;align-self:flex-start;background:var(--bleu-pale);color:var(--bleu);font-weight:800;font-size:12px;letter-spacing:1px;border-radius:100px;padding:4px 12px;margin-bottom:12px;text-transform:uppercase}
.carte-cours h3{font-size:21px;margin-bottom:6px}
.carte-cours .desc{font-size:14.5px;color:var(--encre-70);flex:1;margin-bottom:16px}
.carte-cours .ligne-prix{font-size:15px;margin-bottom:16px}
.carte-cours .ligne-prix s{color:var(--encre-50)}
.carte-cours .ligne-prix b{color:var(--rouge);font-size:23px;font-family:"Fraunces",serif;margin-left:6px}
.carte-cours .cta{text-align:center;padding:13px 20px;font-size:15.5px}

/* ---------- Reveal au scroll (uniquement si JS actif : html.js) ---------- */
html.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
html.js .reveal.vu{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){html.js .reveal{opacity:1;transform:none}}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .section{padding:40px 18px}
  .hero{padding:42px 18px 34px}
  .cecrl .niv{width:36px;height:36px;font-size:12px}
  .cecrl .niv.ici{width:48px;height:48px;font-size:16px}
  .carte-prix .prix .maintenant{font-size:38px}
  .bandeau{padding:7px 10px;gap:8px;font-size:12.5px}
  .bandeau .txt-long{display:none}
  .bandeau .compte{font-size:12px;padding:2px 8px}
}