/*
 * Le systeme v4 de la vitrine (DEC-31, DEC-32), porte depuis
 * maquettes/vitrine-commun.css qui fait foi. Cette feuille porte le
 * chrome (en-tete, pied de page) et les blocs partages des pages
 * publiques ; plateforme.css garde les composants du catalogue et des
 * fiches (tranche 1.2) ainsi que le chrome de l'application.
 */
:root{
  --mark:url("/images/logo-masque.png");
  --paper:#fffdf9;
  --paper-2:#f7f5ef;
  --ink:#171410;
  --slate:#5a5344;
  --rouge:#b3261e;
  --vert-ok:#20602c;
  --max:1320px;
}
html{scroll-behavior:smooth}

.mk{-webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat;background:var(--ink);display:block}
.mk.blanc{background:var(--paper)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(24px,4vw,56px)}
/* Le rythme vertical commun. Une seule classe, declaree avant les sections :
   chacune peut ainsi imposer son propre padding, comme dans la maquette ou la
   regle generique portait sur l'element nu. Ecrite section.v4, elle aurait
   gagne sur toutes les classes de section et ecrase leurs paddings. */
.v4{padding:112px 0;position:relative}
p.sous{color:var(--slate);max-width:600px;font-size:1.08rem}
.centre{text-align:center}
.centre p.sous{margin-inline:auto}
.tete-sec{margin-bottom:52px}

/* Doodles decoratifs de section : poses aux angles, jamais genants. */
.deco{position:absolute;pointer-events:none;color:var(--ambre);opacity:.75;z-index:0}
.deco.accent{color:var(--accent-texte)}
.deco.violet{color:var(--t2)}
.deco.craie{color:rgba(255,253,249,.4)}
.deco.encre{color:var(--ink)}
.deco svg{width:100%;height:100%}
.v4>.wrap{position:relative;z-index:1}

.btn{display:inline-flex;align-items:center;gap:9px;border-radius:14px;white-space:nowrap;
  padding:15px 30px;font-weight:800;font-size:1.02rem;text-decoration:none;cursor:pointer;
  border:2px solid transparent;transition:transform .12s;font-family:inherit}
.btn:hover{transform:translateY(-2px)}
.btn.primaire{background:var(--accent);color:var(--sur-accent);box-shadow:0 6px 0 rgba(23,20,16,.14)}
.btn.primaire:hover{background:var(--accent-fonce)}
.btn.secondaire{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.btn.secondaire:hover{background:var(--paper-2)}
.pastille-v4{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 15px;font-size:.85rem;font-weight:700;transition:transform .12s}
.pastille-v4:hover{transform:translateY(-1px) rotate(-1deg)}

/* En-tete commun (DEC-32 : cinq entrees et l'appel unique) */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,253,249,.88);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--ligne)}
header.site .wrap{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand .logo{width:40px;height:40px}
.brand b{font-size:1.12rem;font-weight:900;white-space:nowrap}
.brand small{display:block;color:var(--slate);font-size:.72rem;font-weight:600;line-height:1}
nav.main{display:flex;gap:4px;flex:1;justify-content:center}
nav.main a{color:var(--slate);text-decoration:none;font-weight:700;font-size:.95rem;
  padding:8px 14px;border-radius:999px;white-space:nowrap}
nav.main a:hover{color:var(--ink);background:var(--paper-2)}
nav.main a.actif{color:var(--accent-texte);background:var(--accent-p)}
.h-actions{display:flex;align-items:center;gap:16px}
.h-actions .lien{color:var(--slate);text-decoration:none;font-weight:700;font-size:.95rem;white-space:nowrap}

/* Le menu deroulant du telephone (docs/06 section 5.1). Absent au bureau, ou la
   navigation complete tient dans la barre. */
.menu-poche{display:none;position:relative}
.menu-poche > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;
  font-weight:700;font-size:.85rem;color:var(--ink);padding:10px 8px;border-radius:10px;
  /* 44 px de haut au moins : c'est la cible minimale d'un pouce. */
  min-height:44px}
.menu-poche > summary::-webkit-details-marker{display:none}
.menu-poche > summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Les trois barres, dessinees en degrade : aucune image a charger. */
.menu-poche .barres{width:20px;height:14px;flex:0 0 20px;
  background:linear-gradient(var(--ink),var(--ink)) top/100% 2px no-repeat,
             linear-gradient(var(--ink),var(--ink)) center/100% 2px no-repeat,
             linear-gradient(var(--ink),var(--ink)) bottom/100% 2px no-repeat}
.menu-poche[open] .barres{background:linear-gradient(var(--ink),var(--ink)) center/100% 2px no-repeat,
             linear-gradient(var(--ink),var(--ink)) center/2px 100% no-repeat;transform:rotate(45deg)}
.menu-poche-panneau{position:absolute;inset-inline-start:0;top:calc(100% + 10px);z-index:60;
  min-width:min(78vw,300px);background:var(--paper);border-radius:16px;padding:8px;
  box-shadow:0 18px 44px rgba(23,20,16,.18);border:1px solid rgba(23,20,16,.08);
  display:flex;flex-direction:column;gap:2px}
.menu-poche-panneau a{display:block;padding:14px 14px;border-radius:11px;text-decoration:none;
  color:var(--ink);font-weight:700;font-size:1rem;min-height:48px}
.menu-poche-panneau a:hover,.menu-poche-panneau a:focus-visible{background:var(--paper-2)}
.menu-poche-panneau a.actif{background:var(--paper-2);color:var(--accent-fonce)}
.menu-poche-panneau .menu-essai{margin-top:6px;justify-content:center;color:var(--sur-accent)}
.h-actions .lien:hover{color:var(--ink)}
.lang-sw{display:inline-block;border:2px solid var(--ligne);background:var(--paper);border-radius:999px;
  padding:6px 14px;font-weight:800;font-size:.85rem;cursor:pointer;color:var(--ink);
  font-family:Cairo,Inter,sans-serif;text-decoration:none}
.lang-sw:hover{border-color:var(--ink)}

/* Bandeau de page interieure : pastel plein termine par une vague. */
.hero-page{padding:76px 0 104px;background:var(--accent-p);position:relative;overflow:hidden}
.hero-page::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:48px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60C150 12 350 54 600 32 850 10 1050 50 1200 22L1200 60Z' fill='%23fffdf9'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.hero-page .wrap{position:relative;z-index:1}
.hero-page .kicker{display:inline-flex;align-items:center;gap:8px;background:var(--paper);
  border:1.5px solid var(--ligne);border-radius:999px;padding:7px 16px;
  color:var(--accent-texte);font-weight:800;font-size:.88rem;margin-bottom:18px}
.hero-page h1{font-size:clamp(2.2rem,5.2vw,3.5rem);font-weight:900}
.hero-page p.sous{margin-top:16px;font-size:1.1rem}

/* Lecteur illustratif, partage entre l'accueil et les fiches profs */
.lecteur-v4{background:var(--ink);border-radius:var(--r-carte);aspect-ratio:16/10;position:relative;
  overflow:hidden;box-shadow:var(--ombre-douce)}
.lecteur-v4 .scene-v{position:absolute;inset:0;background:
  radial-gradient(70% 90% at 30% 20%,rgba(223,241,230,.16),transparent 60%)}
.lecteur-v4 .craie{position:absolute;top:14%;inset-inline-start:8%;width:38%;opacity:.5;color:#fffdf9}
.lecteur-v4 .play{position:absolute;inset:0;margin:auto;width:68px;height:68px;border-radius:999px;
  background:var(--accent);display:grid;place-items:center;color:var(--sur-accent);font-size:1.3rem;
  box-shadow:0 6px 24px rgba(0,0,0,.35);transition:transform .15s}
.lecteur-v4:hover .play{transform:scale(1.09)}
.lecteur-v4 .barre{position:absolute;bottom:0;left:0;right:0;padding:12px 16px;display:flex;align-items:center;gap:10px}
.lecteur-v4 .piste{flex:1;height:5px;border-radius:99px;background:rgba(255,253,249,.25);overflow:hidden}
.lecteur-v4 .piste i{display:block;height:100%;width:38%;background:var(--paper);border-radius:99px}
.lecteur-v4 .temps{color:rgba(255,253,249,.85);font-size:.78rem;font-variant-numeric:tabular-nums}
.lecteur-v4 .filigrane{position:absolute;top:16%;inset-inline-end:10%;color:rgba(255,253,249,.32);font-size:.72rem;letter-spacing:.04em}

/* Temoignages */
.temoin{background:var(--paper);border:1.5px solid var(--ligne);border-radius:var(--r-carte);padding:24px;
  display:flex;gap:16px;transition:transform .18s,border-color .18s}
.temoin:hover{transform:translateY(-3px);border-color:var(--ink)}
.temoin .guill{width:24px;height:24px;color:var(--accent-texte);flex-shrink:0;opacity:.9}
.temoin p{color:var(--ink);font-size:.96rem;margin-bottom:10px}
.temoin .qui{color:var(--slate);font-size:.83rem;font-weight:600}

/* Questions depliantes */
.faq-liste{display:grid;gap:12px}
.faq-liste details{background:var(--paper);border:1.5px solid var(--ligne);border-radius:16px;padding:0 22px;transition:border-color .15s}
.faq-liste details:hover,.faq-liste details[open]{border-color:var(--ink)}
.faq-liste summary{cursor:pointer;font-weight:800;padding:17px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq-liste summary::after{content:"+";font-size:1.35rem;color:var(--slate);font-weight:400}
.faq-liste details[open] summary::after{content:"\2212"}
.faq-liste details p{color:var(--slate);padding:0 0 18px;font-size:.96rem}

/* Bloc de sortie sombre avec les rayons du logo */
.sortie{background:var(--ink);color:var(--paper);border-radius:30px;
  max-width:var(--max);margin:0 auto;padding:72px 24px;text-align:center;position:relative;overflow:hidden}
.sortie::before{content:"";position:absolute;inset:auto -20% -55% -20%;height:120%;
  background:repeating-conic-gradient(from 197deg at 50% 100%,rgba(246,236,217,.10) 0deg 1.4deg,transparent 1.4deg 6deg);
  -webkit-mask:radial-gradient(closest-side at 50% 100%,#000 15%,transparent 78%);
  mask:radial-gradient(closest-side at 50% 100%,#000 15%,transparent 78%)}
.sortie>*{position:relative}
/* Les doodles du bloc de sortie gardent leur positionnement libre : la regle
   ci-dessus, qui remonte le contenu au-dessus des rayons, les rendrait inline
   et leur largeur explicite serait ignoree. */
.sortie>.deco{position:absolute}
.sortie h2{color:var(--paper)}
.sortie p{color:rgba(255,253,249,.78);max-width:540px;margin:0 auto 30px}
.sortie .logo-s{width:56px;height:56px;margin:0 auto 22px}

/* Pied de page commun : sombre, structure, avec les rayons du logo */
footer.site{background:var(--ink);color:rgba(255,253,249,.74);font-size:.93rem;
  margin-top:76px;position:relative;overflow:hidden}
footer.site::before{content:"";position:absolute;inset:auto -25% -70% -25%;height:130%;
  background:repeating-conic-gradient(from 197deg at 50% 100%,rgba(246,236,217,.07) 0deg 1.4deg,transparent 1.4deg 6deg);
  -webkit-mask:radial-gradient(closest-side at 50% 100%,#000 15%,transparent 78%);
  mask:radial-gradient(closest-side at 50% 100%,#000 15%,transparent 78%)}
.f-haut{display:grid;grid-template-columns:1.3fr .9fr .9fr .9fr 1.1fr;gap:40px;
  padding-top:60px;padding-bottom:44px;position:relative}
.f-haut>*{min-width:0}
.f-marque .logo-f{width:50px;height:50px;margin-bottom:14px}
.f-marque .nom{color:var(--paper);font-size:1.25rem;font-weight:900;display:block;margin-bottom:8px}
.f-marque p{max-width:290px;margin-bottom:20px;color:rgba(255,253,249,.74)}
.f-col{display:grid;gap:11px;align-content:start}
.f-col b{color:var(--paper);font-weight:800;margin-bottom:5px;font-size:.98rem}
.f-col a{color:rgba(255,253,249,.74);text-decoration:none}
.f-col a:hover{color:var(--paper)}
.f-bas{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid rgba(255,253,249,.16);padding-top:22px;padding-bottom:28px;position:relative}
/* La mini-carte dessinee : Constantine au trait, cliquable vers Maps */
.f-carte{display:block;text-decoration:none;color:inherit;border:1.5px solid rgba(255,253,249,.28);
  border-radius:16px;overflow:hidden;transition:border-color .15s,transform .15s;align-self:start}
.f-carte:hover{border-color:var(--paper);transform:translateY(-2px)}
.f-carte svg{display:block;width:100%;height:auto;background:rgba(255,253,249,.05)}
.f-carte .legende-c{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 14px;border-top:1.5px solid rgba(255,253,249,.28)}
.f-carte .legende-c b{color:var(--paper);font-size:.9rem}
.f-carte .legende-c span{color:rgba(255,253,249,.74);font-size:.78rem;font-weight:700}
.f-carte:hover .legende-c span{color:var(--paper)}
@keyframes pin-saute{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.f-carte .pin{animation:pin-saute 2.2s ease-in-out infinite}

/* Les enfants des duos et grilles doivent pouvoir retrecir sous leur contenu */
.duo>*,[class*="grille"]>*{min-width:0}

/* Responsive commun : le telephone est l'appareil principal du public. */
@media(max-width:1000px){
  .f-haut{grid-template-columns:1fr 1fr 1fr;gap:32px}
  .f-marque{grid-column:1/-1}
  .f-carte{grid-column:1/-1;max-width:380px}
}
@media(max-width:1080px){
  nav.main{display:none}
}
@media(max-width:900px){
  .v4{padding:68px 0}
}
@media(max-width:600px){
  .wrap{padding:0 18px}
  /* Les filtres debordants de plateforme.css sont calibres sur la gouttiere de
     20px du catalogue ; le wrap v4 en a 18. Deux pixels de debord sinon. */
  .wrap .filtres{margin-inline:-18px;padding-inline:18px}
  .v4{padding:52px 0}
  .tete-sec{margin-bottom:32px}
  p.sous{font-size:1rem}
  header.site .wrap{gap:10px;height:60px;padding:0 14px}
  .brand{gap:8px}
  .brand .logo{width:32px;height:32px}
  .brand b{font-size:.98rem}
  .brand small{display:none}
  .h-actions{gap:7px;margin-inline-start:auto}
  /* « Se connecter » etait masque ici, et le telephone n'avait alors AUCUNE porte
     d'entree : ni connexion, ni acces a son espace une fois connecte, alors que
     DEC-08 fait de cette fenetre la seule porte. Il revient, et l'essai descend
     dans le menu deroulant pour lui rendre la place. */
  .h-actions .lien{font-size:.82rem}
  .h-actions .cta-barre{display:none}
  .menu-poche{display:block}
  .h-actions .btn{padding:8px 11px;font-size:.84rem}
  .lang-sw{padding:4px 9px;font-size:.8rem}
  .hero-page{padding:44px 0 72px}
  .hero-page::after{height:30px}
  .temoin{padding:20px;gap:12px}
  .sortie{padding:52px 20px;border-radius:24px}
  .sortie .btn{width:100%;justify-content:center}
  footer.site{margin-top:48px}
  .f-haut{grid-template-columns:1fr 1fr;gap:30px;padding-top:40px;padding-bottom:32px}
  .f-marque{grid-column:1/-1}
  .f-carte{grid-column:1/-1;max-width:340px}
  .f-bas{flex-direction:column;gap:6px;padding-bottom:22px}
}
/* Sur mobile, un doodle flottant tombe forcement sur du texte : ils
   s'effacent tous sous 700 px. Ceux des composants restent. */
@media(max-width:700px){
  .deco,.hv-video .flotte{display:none}
}
/* Tres petits ecrans : le logo porte la marque a lui seul */
@media(max-width:380px){
  header.site .wrap{gap:8px;padding:0 12px}
  .brand b{display:none}
  .h-actions{gap:6px}
  .f-marque .btn,.hero .ctas .btn{white-space:normal;text-align:center}
}

/* ----- L'accueil en six sections (vitrine-v4.html fait foi) ----- */
.hero{padding:88px 0 118px;overflow:hidden;position:relative;background:
  radial-gradient(52% 72% at 88% 10%,var(--accent-p),transparent 70%),
  radial-gradient(44% 60% at 2% 94%,var(--peche),transparent 72%)}
.hero::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:48px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60C150 12 350 54 600 32 850 10 1050 50 1200 22L1200 60Z' fill='%23f7f5ef'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.hero>.wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(48px,5vw,84px);align-items:start;position:relative;z-index:1}
.hero .kicker{display:inline-flex;align-items:center;gap:8px;background:var(--paper);
  border:1.5px solid var(--ligne);border-radius:999px;padding:7px 16px;
  color:var(--accent-texte);font-weight:800;font-size:.88rem;margin-bottom:22px}
.hero h1{font-size:clamp(2.3rem,5.4vw,3.7rem);font-weight:900;line-height:1.16}
.hero h1 .marque-mot{position:relative;white-space:nowrap;color:var(--accent-texte)}
.hero h1 .marque-mot svg{position:absolute;left:0;right:0;bottom:-.18em;width:100%;height:.34em;color:var(--accent-texte);opacity:.85}
.hero p.sous{margin:20px 0 32px}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .sans-carte{display:flex;align-items:center;gap:9px;color:var(--slate);font-size:.92rem;margin-top:20px;font-weight:600}
.hv-video{position:relative;padding:34px 10px;margin-top:26px}
.hv-video .flotte{position:absolute;z-index:1;color:var(--accent-texte)}
.hv-video .flotte.ambre{color:var(--ambre)}
.hv-video .flotte.violet{color:var(--t2)}
.hv-video .flotte svg{width:100%;height:100%}
.fl-atome{width:76px;height:76px;top:-14px;inset-inline-start:-6px;transform:rotate(-12deg)}
.fl-fiole{width:60px;height:60px;bottom:34px;inset-inline-end:-12px;transform:rotate(9deg)}
.fl-pendule{width:52px;height:70px;top:-20px;inset-inline-end:34px;transform:rotate(6deg)}
.fl-onde{width:96px;height:36px;bottom:-4px;inset-inline-start:8px;transform:rotate(-7deg)}
.hv-video .cadre{position:relative;z-index:2;background:var(--ink);border-radius:var(--r-carte);aspect-ratio:16/10;
  overflow:hidden;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--accent-p);transform:rotate(1deg)}
.hv-video .cadre video,.hv-video .cadre iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hv-video .scene-v{position:absolute;inset:0;background:
  radial-gradient(70% 90% at 28% 22%,rgba(223,241,230,.16),transparent 60%),
  radial-gradient(60% 70% at 85% 80%,rgba(246,236,217,.12),transparent 60%)}
.hv-video .craie{position:absolute;top:12%;inset-inline-start:8%;width:44%;opacity:.5;color:#fffdf9}
.hv-video .titre-craie{position:absolute;bottom:24%;inset-inline-end:10%;color:rgba(255,253,249,.7);font-size:1.02rem}
.hv-video .badge-extrait{position:absolute;top:14px;inset-inline-start:14px;background:var(--paper);
  color:var(--ink);border-radius:999px;padding:6px 14px;font-weight:800;font-size:.82rem;z-index:3}
.hv-video .legende{margin-top:22px;color:var(--slate);font-size:.95rem;text-align:center;font-weight:600}

.reassure{padding:0 0 8px;background:var(--paper-2)}
.reassure .grille{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;transform:translateY(-40px);margin-bottom:-32px}
.reassure .item{background:var(--paper);border:1.5px solid var(--ligne);border-radius:18px;
  padding:20px;display:flex;gap:13px;align-items:flex-start;box-shadow:var(--ombre-douce)}
.reassure .ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex-shrink:0}
.reassure .ico svg{width:24px;height:24px}
.reassure b{font-size:.96rem;display:block}
.reassure span{color:var(--slate);font-size:.85rem;line-height:1.45;display:block}

.apercu{background:var(--paper-2);padding-top:64px}
.apercu .duo{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center}
.apercu .lecteur-v4{transform:rotate(1deg)}
.apercu .lecon-liste{margin-top:28px}

.programme .filtres{justify-content:center;margin-bottom:32px}
.pack-appel{margin-top:30px;background:var(--accent-p);border:2px solid var(--ink);border-radius:var(--r-carte);padding:28px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;box-shadow:8px 8px 0 var(--sable)}
.pack-appel b{font-size:1.12rem}
.pack-appel span{color:var(--slate);display:block;font-size:.93rem;margin-top:4px}

.confiance{background:var(--paper-2)}
.confiance .duo{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.prof-carte-v4{background:var(--paper);border:2px solid var(--ink);border-radius:var(--r-carte);
  padding:32px;box-shadow:8px 8px 0 var(--sable);transform:rotate(-1deg)}
.prof-carte-v4 .portrait{width:96px;height:96px;border-radius:24px;background:var(--sable);
  display:grid;place-items:center;margin-bottom:18px}
.prof-carte-v4 .portrait svg{width:54px;height:54px;color:var(--ink)}
.prof-carte-v4 h3{font-size:1.3rem;margin-bottom:8px}
.prof-carte-v4 p{color:var(--slate);font-size:.96rem}
.prof-carte-v4 .badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.chiffres-ligne{display:flex;gap:26px;margin:26px 0 30px;flex-wrap:wrap}
.chiffres-ligne .c b{display:block;font-size:1.9rem;font-weight:900;color:var(--accent-texte);line-height:1.1}
.chiffres-ligne .c span{color:var(--slate);font-size:.85rem;font-weight:600}
.temoins{display:grid;gap:16px}
.temoins .temoin:nth-child(2){transform:rotate(.5deg)}

.final .garantie{max-width:720px;margin:0 auto 40px;background:var(--menthe);border:1.5px solid var(--ink);
  border-radius:var(--r-carte);padding:24px 28px;display:flex;gap:16px;align-items:flex-start;transform:rotate(-.5deg)}
.final .garantie .ico{width:38px;height:38px;color:var(--vert-ok);flex-shrink:0}
.final .garantie b{display:block;margin-bottom:3px}
.final .garantie span{color:var(--slate);font-size:.94rem}
.final .faq-liste{max-width:720px;margin:0 auto 64px}

@media(max-width:900px){
  .hero>.wrap,.apercu .duo,.confiance .duo{grid-template-columns:1fr}
  .hero>.wrap{gap:40px}
  .hv-video{margin-top:0}
  .reassure .grille{grid-template-columns:1fr 1fr}
  .apercu .duo{gap:32px}
  .apercu .duo .lecteur-v4{order:-1}
}
@media(max-width:600px){
  .hero{padding:44px 0 76px}
  .hero::after{height:30px}
  .hero .kicker{font-size:.8rem;padding:6px 13px}
  .hero p.sous{margin:16px 0 24px}
  .hero .ctas{flex-direction:column;align-items:stretch}
  .hero .ctas .btn{justify-content:center}
  .hero .sans-carte{font-size:.85rem;align-items:flex-start}
  .hv-video{padding:26px 6px 12px}
  .hv-video .cadre{box-shadow:6px 6px 0 var(--accent-p)}
  .hv-video .legende{font-size:.87rem}
  .fl-atome{width:56px;height:56px;top:-12px}
  .fl-pendule{width:40px;height:54px;top:-16px;inset-inline-end:16px}
  .fl-fiole{width:46px;height:46px;inset-inline-end:-4px;bottom:44px}
  .fl-onde{width:72px;height:28px;bottom:2px}
  .reassure .grille{grid-template-columns:1fr;gap:10px;transform:translateY(-24px)}
  .reassure .item{padding:14px 16px}
  .reassure .ico{width:36px;height:36px}
  .pack-appel{padding:22px;box-shadow:5px 5px 0 var(--sable)}
  .pack-appel .btn{width:100%;justify-content:center}
  .prof-carte-v4{padding:24px;box-shadow:6px 6px 0 var(--sable)}
  .chiffres-ligne{gap:18px;margin:22px 0 24px}
  .chiffres-ligne .c b{font-size:1.6rem}
  .final .garantie{padding:20px 22px}
  .final .faq-liste{margin-bottom:44px}
}

/* ----- Les profs : liste et fiche (vitrine-profs, vitrine-prof) ----- */
.profs-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.prof-c{background:var(--paper);border:1.5px solid var(--ligne);border-radius:var(--r-carte);padding:28px;
  display:flex;flex-direction:column;gap:12px;transition:box-shadow .15s,transform .15s,border-color .15s}
.prof-c:hover{box-shadow:var(--ombre-douce);transform:translateY(-3px);border-color:var(--ink)}
.prof-c .portrait{width:84px;height:84px;border-radius:22px;display:grid;place-items:center}
.prof-c .portrait svg{width:46px;height:46px;color:var(--ink)}
.prof-c h3{font-size:1.2rem}
.prof-c .matiere{color:var(--accent-texte);font-weight:800;font-size:.88rem}
.prof-c p{color:var(--slate);font-size:.93rem;flex:1}
.prof-c .chiffres{display:flex;gap:18px;padding-top:12px;border-top:1px solid var(--ligne)}
.prof-c .chiffres b{display:block;font-weight:900;font-size:1.15rem}
.prof-c .chiffres span{color:var(--slate);font-size:.76rem;font-weight:600}
.prof-c .voir{color:var(--accent-texte);font-weight:800;font-size:.9rem;text-decoration:none;margin-top:6px}
.appel-prof{background:var(--paper-2)}
.appel-prof .carte{max-width:760px;margin:0 auto;background:var(--paper);border:2px solid var(--ink);
  border-radius:var(--r-carte);padding:32px;box-shadow:8px 8px 0 var(--sable);text-align:center}
.appel-prof .carte p{color:var(--slate);max-width:520px;margin:8px auto 22px}

.fil-v4{padding:18px 0 0;color:var(--slate);font-size:.88rem;font-weight:600}
.fil-v4 a{color:var(--slate);text-decoration:none}
.fil-v4 a:hover{color:var(--ink)}
.entete-prof{padding:44px 0 64px}
.entete-prof .duo{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center}
.entete-prof .portrait{width:180px;height:180px;border-radius:26px;
  border:2px solid var(--ink);display:grid;place-items:center;box-shadow:8px 8px 0 var(--accent-p);transform:rotate(-2deg)}
.entete-prof .portrait svg{width:96px;height:96px;color:var(--ink)}
.entete-prof .matiere{color:var(--accent-texte);font-weight:800;margin-bottom:8px;display:block}
.entete-prof h1{font-size:clamp(2rem,4.6vw,3.1rem);font-weight:900}
.entete-prof p.sous{margin-top:12px}
.entete-prof .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.bande-chiffres{background:var(--paper-2);padding:44px 0}
.bande-chiffres .chiffres-ligne{justify-content:center;margin:0}
.bande-chiffres .c{text-align:center}
.bande-chiffres .c b{font-size:2rem}
.prochain-live{display:flex;align-items:center;gap:18px;background:var(--paper);border:2px solid var(--ink);
  border-radius:var(--r-carte);padding:24px 28px;max-width:760px;margin:0 auto;box-shadow:8px 8px 0 var(--menthe)}
.prochain-live .point{width:12px;height:12px;border-radius:999px;background:var(--err);flex-shrink:0;
  animation:pulse-live 1.6s infinite}
@keyframes pulse-live{0%,100%{opacity:1}50%{opacity:.35}}
.prochain-live b{display:block}
.prochain-live span{color:var(--slate);font-size:.9rem}
.prochain-live a{margin-inline-start:auto;white-space:nowrap}
.temoins-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:900px;margin:0 auto}

/* ----- Les lives (vitrine-lives) ----- */
.hero-live{background:var(--ink);color:#fffdf9;padding:84px 0 96px;position:relative;overflow:hidden}
.hero-live::before{content:"";position:absolute;inset:auto -20% -60% -20%;height:130%;
  background:repeating-conic-gradient(from 197deg at 50% 100%,rgba(246,236,217,.09) 0deg 1.4deg,transparent 1.4deg 6deg);
  -webkit-mask:radial-gradient(closest-side at 50% 100%,#000 15%,transparent 78%);
  mask:radial-gradient(closest-side at 50% 100%,#000 15%,transparent 78%)}
.hero-live>.wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(48px,5vw,84px);align-items:center;position:relative;z-index:1}
.badge-direct{display:inline-flex;align-items:center;gap:9px;background:rgba(255,92,77,.16);
  border:1.5px solid rgba(255,92,77,.55);color:#ffb4ac;border-radius:999px;padding:7px 16px;
  font-weight:900;font-size:.85rem;letter-spacing:.08em;margin-bottom:22px}
html[lang="ar"] .badge-direct{letter-spacing:0}
.badge-direct .point{width:10px;height:10px;border-radius:999px;background:#ff5c4d;animation:pulse-live 1.6s infinite}
.hero-live h1{color:#fffdf9;font-size:clamp(2.1rem,4.8vw,3.3rem);font-weight:900;line-height:1.16}
.hero-live h1 .accent-live{color:var(--menthe)}
.hero-live p.sous{color:rgba(255,253,249,.75);margin:18px 0 30px}
.hero-live .ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-live .flotte{position:absolute;color:rgba(255,253,249,.35)}
.hero-live .flotte svg{width:100%;height:100%}
.fl-onde-l{width:110px;height:40px;bottom:-8%;inset-inline-start:-4%;transform:rotate(-8deg)}
.fl-eclair-l{width:52px;height:66px;top:-10%;inset-inline-end:8%;transform:rotate(10deg)}
.btn.fantome{background:transparent;color:#fffdf9;border-color:rgba(255,253,249,.5)}
.btn.fantome:hover{border-color:#fffdf9;background:rgba(255,253,249,.08)}
.carte-direct{background:var(--paper);color:var(--ink);border-radius:var(--r-carte);padding:28px;
  box-shadow:10px 10px 0 rgba(223,241,230,.28);transform:rotate(1.2deg);position:relative}
.carte-direct .etiq{position:absolute;top:-14px;inset-inline-start:20px;background:var(--menthe);color:var(--ok);
  border:1.5px solid var(--ink);border-radius:999px;padding:4px 14px;font-size:.78rem;font-weight:900}
.carte-direct .etiq.res{background:var(--paper-2);color:var(--slate)}
.carte-direct .date-b{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.carte-direct .date-b b{font-size:2.6rem;font-weight:900;line-height:1}
.carte-direct .date-b span{color:var(--slate);font-weight:800}
.carte-direct h3{font-size:1.15rem;margin-bottom:6px}
.carte-direct .qui-q{color:var(--slate);font-size:.92rem;margin-bottom:18px}
.carte-direct .compte-m{display:flex;gap:8px;margin-bottom:18px}
.carte-direct .compte-m .b{flex:1;background:var(--paper-2);border-radius:12px;padding:10px 4px;text-align:center}
.carte-direct .compte-m b{display:block;font-size:1.5rem;font-weight:900;font-variant-numeric:tabular-nums}
.carte-direct .compte-m span{color:var(--slate);font-size:.72rem;font-weight:700}
.carte-direct .btn{width:100%;justify-content:center}
.etapes-live{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.etape-live{background:var(--paper);border:1.5px solid var(--ligne);border-radius:var(--r-carte);padding:28px;position:relative}
.etape-live .num{position:absolute;top:-16px;inset-inline-start:22px;width:34px;height:34px;border-radius:999px;
  background:var(--ink);color:var(--paper);display:grid;place-items:center;font-weight:900;font-size:.95rem}
.etape-live .ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:14px}
.etape-live .ico svg{width:27px;height:27px}
.etape-live b{display:block;font-size:1.05rem;margin-bottom:6px}
.etape-live span{color:var(--slate);font-size:.93rem}
.agenda{display:grid;gap:12px;max-width:820px;margin:0 auto}
.seance{display:flex;align-items:center;gap:16px;background:var(--paper);border:1.5px solid var(--ligne);
  border-radius:16px;padding:16px 20px}
.seance .date{text-align:center;background:var(--paper-2);border-radius:12px;padding:8px 14px;flex-shrink:0}
.seance .date b{display:block;font-size:1.2rem;font-weight:900;line-height:1.1}
.seance .date span{color:var(--slate);font-size:.72rem;font-weight:700;text-transform:uppercase}
html[lang="ar"] .seance .date span{text-transform:none}
.seance .txt{flex:1;min-width:0}
.seance .txt b{display:block;font-size:.98rem}
.seance .txt span{color:var(--slate);font-size:.84rem}
.seance .portee{border-radius:999px;padding:4px 12px;font-size:.76rem;font-weight:900;white-space:nowrap;flex-shrink:0}
.seance .portee.pub{background:var(--menthe);color:var(--ok)}
.seance .portee.res{background:var(--paper-2);color:var(--slate)}
.agenda-vide{color:var(--slate);text-align:center;padding:12px 0}
.rediffs{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin:0 auto}
.rediff .lecteur-v4{aspect-ratio:16/9}
.rediff .lecteur-v4 .play{width:56px;height:56px;font-size:1.1rem}
.rediff b{display:block;margin-top:14px}
.rediff span{color:var(--slate);font-size:.88rem}
/* La carte devient un lien quand la rediffusion est gardee en acces libre. */
a.rediff{display:block;color:inherit;text-decoration:none}
a.rediff:hover .lecteur-v4{transform:translateY(-2px)}
a.rediff:hover b{text-decoration:underline}
a.rediff .lecteur-v4{transition:transform .18s ease}
@media (prefers-reduced-motion:reduce){a.rediff .lecteur-v4{transition:none}a.rediff:hover .lecteur-v4{transform:none}}

/* La page d'une rediffusion en acces libre (RG-73). */
.rediff-page .wrap{max-width:860px}
.rediff-page h1{margin:4px 0 10px}
.rediff-qui{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.rediff-qui a{color:var(--ink);font-weight:700;text-decoration:none}
.rediff-qui a:hover{text-decoration:underline}
.rediff-date{color:var(--slate);font-size:.9rem}
.rediff-desc{margin:18px 0 0}
.rediff-suite{margin-top:28px;text-align:center}
.rediff-suite p{margin:0 0 14px}

/* ----- Comment ca marche (vitrine-methode) ----- */
.serpent{max-width:1000px;margin:0 auto}
.pas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.pas.inverse .scene-m{order:2}
.pas .texte .num{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;
  font-weight:900;font-size:1.1rem;border:2px solid var(--ink);margin-bottom:14px}
.pas b.titre{display:block;font-size:1.3rem;font-weight:900;margin-bottom:8px}
.pas p{color:var(--slate);font-size:.98rem;max-width:460px}
.courbe{height:84px;position:relative}
.courbe svg{position:absolute;inset:0;width:100%;height:100%}
.courbe path{stroke:var(--slate);stroke-width:2.5;fill:none;stroke-dasharray:2 9;stroke-linecap:round;opacity:.55}
.scene-m{border:2px solid var(--ink);border-radius:var(--r-carte);padding:28px;position:relative;
  min-height:230px;display:grid;place-items:center;overflow:visible;transition:transform .25s}
.scene-m .flotte{position:absolute;color:var(--ambre)}
.scene-m .flotte.accent{color:var(--accent-texte)}
.scene-m .flotte svg{width:100%;height:100%}
.mini-lecteur{background:var(--ink);border-radius:14px;width:min(240px,80%);aspect-ratio:16/10;position:relative;
  box-shadow:6px 6px 0 rgba(23,20,16,.15);transform:rotate(-2deg);transition:transform .25s}
.mini-lecteur .play{position:absolute;inset:0;margin:auto;width:48px;height:48px;border-radius:999px;
  background:var(--accent);color:var(--sur-accent);display:grid;place-items:center;font-size:.95rem}
.mini-lecteur .b5{position:absolute;top:10px;inset-inline-start:10px;background:var(--paper);border-radius:999px;
  padding:3px 10px;font-size:.7rem;font-weight:900}
.mini-cartes{position:relative;width:min(250px,84%);height:170px}
.mini-carte{position:absolute;background:var(--paper);border:2px solid var(--ink);border-radius:12px;
  width:150px;padding:12px;box-shadow:5px 5px 0 rgba(23,20,16,.12);transition:transform .25s}
.mini-carte .bd{height:5px;border-radius:99px;margin-bottom:8px}
.mini-carte .l1{height:8px;border-radius:99px;background:var(--paper-2);margin-bottom:6px}
.mini-carte .l2{height:8px;border-radius:99px;background:var(--paper-2);width:60%}
.mini-carte:nth-child(1){top:6px;inset-inline-start:0;transform:rotate(-4deg)}
.mini-carte:nth-child(2){top:34px;inset-inline-end:0;transform:rotate(3deg)}
.mini-pack{position:absolute;bottom:0;inset-inline-start:24%;background:var(--menthe);color:var(--ok);
  border:2px solid var(--ink);border-radius:999px;padding:5px 14px;font-weight:900;font-size:.82rem;transform:rotate(-2deg)}
.mini-tel{background:var(--ink);border-radius:22px;padding:8px;width:132px;transform:rotate(2deg);
  box-shadow:6px 6px 0 rgba(23,20,16,.15);transition:transform .25s}
.mini-tel .ecr{background:var(--paper);border-radius:16px;padding:12px 10px;display:grid;gap:7px}
.mini-tel .mont{font-weight:900;font-size:1.05rem;text-align:center}
.mini-tel .lg{height:7px;border-radius:99px;background:var(--paper-2)}
.mini-tel .ok{background:var(--accent);color:var(--sur-accent);border-radius:9px;text-align:center;
  font-weight:900;font-size:.72rem;padding:6px 0}
.mini-code{position:absolute;bottom:18px;inset-inline-end:14px;background:var(--paper);border:2px solid var(--ink);
  border-radius:10px;padding:6px 11px;font-weight:900;font-size:.72rem;letter-spacing:.05em;transform:rotate(-3deg)}
.mini-liste{display:grid;gap:8px;width:min(240px,84%)}
.mini-lecon{display:flex;align-items:center;gap:9px;background:var(--paper);border:2px solid var(--ink);
  border-radius:11px;padding:9px 12px}
.mini-lecon .ck{width:20px;height:20px;border-radius:999px;display:grid;place-items:center;
  font-size:.7rem;font-weight:900;background:var(--menthe);color:var(--ok);flex-shrink:0}
.mini-lecon .ck.off{background:var(--paper-2);color:var(--slate)}
.mini-lecon .lg{flex:1;height:8px;border-radius:99px;background:var(--paper-2)}
.mini-quiz{position:absolute;top:20px;inset-inline-end:16px;background:var(--t2-p);color:var(--t2);
  border:2px solid var(--ink);border-radius:999px;padding:4px 13px;font-weight:900;font-size:.78rem;transform:rotate(4deg)}
.mini-direct{position:relative;width:min(250px,84%);display:grid;gap:9px}
.bulle-t{background:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:9px 13px;
  font-size:.8rem;font-weight:700;width:fit-content;max-width:88%}
.bulle-t.moi{background:var(--accent-p);margin-inline-start:auto}
.badge-live-m{position:absolute;top:-30px;inset-inline-start:-8px;display:inline-flex;align-items:center;gap:7px;
  background:var(--ink);color:var(--paper);border-radius:999px;padding:6px 14px;font-weight:900;font-size:.75rem;transform:rotate(-3deg)}
.badge-live-m i{width:8px;height:8px;border-radius:99px;background:#ff5c4d;animation:pulse-live 1.6s infinite}
.pas:hover .mini-lecteur,.pas:hover .mini-tel{transform:rotate(0)}
.pas:hover .mini-carte:nth-child(1){transform:rotate(-7deg)}
.pas:hover .mini-carte:nth-child(2){transform:rotate(6deg)}
.paiement-m{background:var(--paper-2)}
.moyens{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.moyen{background:var(--paper);border:1.5px solid var(--ligne);border-radius:var(--r-carte);padding:26px;
  transition:transform .18s,border-color .18s}
.moyen:hover{transform:translateY(-3px);border-color:var(--ink)}
.moyen .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:14px}
.moyen .ico svg{width:26px;height:26px}
.moyen b{display:block;margin-bottom:6px}
.moyen p{color:var(--slate);font-size:.92rem}
.moyen .delai{display:inline-block;margin-top:12px;border-radius:999px;padding:4px 12px;
  font-size:.78rem;font-weight:900;background:var(--paper-2);color:var(--slate)}
.regles{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:900px;margin:0 auto}
.regle{display:flex;gap:14px;background:var(--paper);border:1.5px solid var(--ligne);border-radius:16px;padding:20px;
  transition:border-color .15s,box-shadow .15s}
.regle:hover{border-color:var(--ink);box-shadow:var(--ombre-douce)}
.regle .ico{width:38px;height:38px;color:var(--accent-texte);flex-shrink:0}
.regle b{display:block;font-size:.98rem}
.regle span{color:var(--slate);font-size:.88rem}

/* ----- Contact (vitrine-contact) ----- */
.contact-grille{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:start}
.canaux{display:grid;gap:16px}
.canal{display:flex;gap:16px;align-items:flex-start;background:var(--paper);border:1.5px solid var(--ligne);
  border-radius:var(--r-carte);padding:24px;min-width:0}
.canal.principal{border:2px solid var(--ink);box-shadow:8px 8px 0 var(--menthe)}
.canal .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex-shrink:0}
.canal .ico svg{width:26px;height:26px}
.canal>div{min-width:0}
.canal b{display:block;margin-bottom:3px}
.canal p{color:var(--slate);font-size:.92rem;margin-bottom:10px}
.canal .valeur{font-weight:800;color:var(--accent-texte);text-decoration:none;font-size:1.02rem;overflow-wrap:anywhere}
.note-delai{color:var(--slate);font-size:.88rem;display:flex;gap:9px;align-items:flex-start}
.note-delai svg{flex-shrink:0;margin-top:2px}
.formulaire-c{background:var(--paper);border:1.5px solid var(--ligne);border-radius:var(--r-carte);padding:32px}
.formulaire-c h2{font-size:1.4rem;margin-bottom:20px}
.formulaire-c .champ-c{margin-bottom:18px}
.formulaire-c label{display:block;font-weight:800;font-size:.9rem;margin-bottom:7px}
.formulaire-c input,.formulaire-c select,.formulaire-c textarea{width:100%;border:2px solid var(--ligne);border-radius:12px;
  padding:12px 14px;font-family:inherit;font-size:.98rem;background:var(--paper);color:var(--ink)}
.formulaire-c input:focus,.formulaire-c select:focus,.formulaire-c textarea:focus{outline:none;border-color:var(--accent)}
.formulaire-c textarea{min-height:120px;resize:vertical}
.formulaire-c .aide{color:var(--slate);font-size:.82rem;margin-top:5px}
.formulaire-c .btn{width:100%;justify-content:center;margin-top:6px}

@media(max-width:900px){
  .profs-grille{grid-template-columns:1fr}
  .entete-prof .duo{grid-template-columns:1fr;justify-items:start}
  .temoins-2{grid-template-columns:1fr}
  .hero-live>.wrap{grid-template-columns:1fr;gap:44px}
  .etapes-live{grid-template-columns:1fr;gap:26px}
  .rediffs{grid-template-columns:1fr}
  .moyens{grid-template-columns:1fr}
  .regles{grid-template-columns:1fr}
  .contact-grille{grid-template-columns:1fr}
  .pas{grid-template-columns:1fr;gap:16px}
  .pas.inverse .scene-m{order:0}
  .scene-m{width:min(320px,86%);min-height:170px;padding:20px}
  .pas:not(.inverse) .scene-m{justify-self:start;transform:rotate(-1.2deg)}
  .pas.inverse .scene-m{justify-self:end;transform:rotate(1.2deg)}
  .courbe{height:52px}
  .mini-lecteur{width:min(200px,84%)}
  .mini-cartes{height:150px;width:min(220px,88%)}
  .mini-carte{width:128px}
  .mini-liste,.mini-direct{width:min(210px,88%)}
}
@media(max-width:600px){
  .prof-c{padding:22px}
  .appel-prof .carte{padding:24px;box-shadow:5px 5px 0 var(--sable)}
  .appel-prof .btn{width:100%;justify-content:center}
  .entete-prof{padding:28px 0 44px}
  .entete-prof .portrait{width:120px;height:120px;box-shadow:5px 5px 0 var(--accent-p)}
  .entete-prof .portrait svg{width:64px;height:64px}
  .prochain-live{flex-wrap:wrap;padding:20px;box-shadow:5px 5px 0 var(--menthe)}
  .prochain-live a{margin-inline-start:0;width:100%}
  .prochain-live .btn{width:100%;justify-content:center}
  .hero-live{padding:48px 0 64px}
  .hero-live .ctas{flex-direction:column;align-items:stretch}
  .hero-live .ctas .btn{justify-content:center}
  .carte-direct{padding:22px;box-shadow:6px 6px 0 rgba(223,241,230,.28)}
  .seance{flex-wrap:wrap}
  .etape-live{padding:22px}
  .moyen{padding:22px}
  .scene-m{padding:20px}
  .canal{padding:20px}
  .canal.principal{box-shadow:5px 5px 0 var(--menthe)}
  .formulaire-c{padding:22px}
}