/* Tous Photogéniques : feuille de style de l'aperçu privé (site de formation) */
:root{
  --papier:#FFFFFF; --encre:#000000; --encre-2:#333333; --gris:#5C5C5C; --trait:#E6E6E6;
  --surface:#FFFFFF; --creme:#F3F3F1; --ambre:#FFC400; --ambre-clair:#FFE36B; --bleu:#1F3BFF;
  --rayon:14px; --max:1160px;
  --titre:'Big Shoulders Display','Arial Narrow',sans-serif; --texte:'Hanken Grotesk',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--encre);font-family:var(--texte);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:var(--bleu)}
h1,h2{font-family:var(--titre);line-height:.92;letter-spacing:0;margin:0;text-wrap:balance}
h3{font-family:var(--texte);line-height:1.2;margin:0}
h1{font-size:clamp(48px,7vw,110px);font-weight:900}
h2{font-size:clamp(38px,5vw,72px);font-weight:900}
h3{font-size:21px;font-weight:700;letter-spacing:-.01em}
p{margin:0}
.conteneur{max-width:var(--max);margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.surtitre{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bleu);margin-bottom:14px}
.chapo{font-size:20px;color:var(--encre-2);max-width:640px}
.surligne{background:linear-gradient(transparent 58%,var(--ambre) 58%,var(--ambre) 92%,transparent 92%);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Bandeau d'aperçu privé */
.bandeau-prive{background:var(--encre);color:#D9DCE2;font-size:13px;text-align:center;padding:8px 16px}

/* En-tête */
.entete{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--trait)}
.entete .conteneur{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;flex-wrap:wrap}
.logo{font-family:var(--titre);font-weight:900;font-size:26px;letter-spacing:.01em;color:var(--encre);text-decoration:none;display:flex;align-items:center;gap:10px}
.logo i{width:20px;height:20px;display:inline-block;background:linear-gradient(var(--encre),var(--encre)) left bottom/7px 7px no-repeat,linear-gradient(var(--encre),var(--encre)) center bottom/7px 13px no-repeat,linear-gradient(var(--encre),var(--encre)) right bottom/7px 20px no-repeat}
.nav{display:flex;align-items:center;gap:6px 26px;flex-wrap:wrap}
.nav a{font-size:15px;font-weight:600;color:var(--encre);text-decoration:none;padding:12px 0}
.nav a:hover{color:var(--bleu)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border-radius:999px;font:700 16px var(--texte);text-decoration:none;border:2px solid var(--encre);background:var(--encre);color:var(--papier);cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px);background:#000;color:#fff}
.btn.clair{background:transparent;color:var(--encre)}
.btn.clair:hover{background:var(--encre);color:var(--papier)}
.btn.ambre{background:var(--ambre);border-color:var(--ambre);color:var(--encre)}
.btn.ambre:hover{background:#F2B544;color:var(--encre)}
.nav .btn{min-height:44px;padding:10px 20px;font-size:15px;color:var(--papier)}

/* Héros */
.heros{padding:64px 0 72px;overflow:hidden}
.heros .grille{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.heros p.chapo{margin:24px 0 32px}
.actions{display:flex;gap:14px;flex-wrap:wrap}
.preuves{display:flex;gap:10px 28px;flex-wrap:wrap;margin-top:28px;font-size:14px;color:var(--gris);font-weight:600}
.preuves span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ambre);margin-right:9px;vertical-align:middle}
.mosaique{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative}
.mosaique figure{margin:0;border-radius:var(--rayon);overflow:hidden;background:var(--creme)}
.mosaique img{width:100%;height:100%;object-fit:cover}
.mosaique .grand{grid-row:span 2;height:100%}
.mosaique .petit{aspect-ratio:1/1.12}
.mosaique figcaption{position:absolute;left:0;bottom:-30px;font-size:13px;color:var(--gris)}
.pastille{position:absolute;right:-10px;top:-18px;background:var(--ambre);color:var(--encre);font:800 15px/1.15 var(--titre);padding:16px 18px;border-radius:50%;width:112px;height:112px;display:flex;align-items:center;justify-content:center;text-align:center;transform:rotate(8deg)}

/* Bande de chiffres */
.chiffres{background:var(--encre);color:var(--papier)}
.chiffres .conteneur{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-top:36px;padding-bottom:36px}
.chiffres b{display:block;font:800 clamp(30px,4vw,46px)/1 var(--titre);letter-spacing:0}
.chiffres span{font-size:14px;color:#B9BEC8}

/* Cartes */
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:44px}
.carte{background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon);padding:28px;display:flex;flex-direction:column;gap:10px}
.carte .num{font:800 15px var(--titre);color:var(--bleu)}
.carte p{font-size:16px;color:var(--encre-2)}
.fond-creme{background:var(--creme)}

/* Extrait vidéo */
.extrait{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center}
.lecteur{border-radius:18px;overflow:hidden;background:var(--encre);box-shadow:0 30px 60px -30px rgba(21,23,28,.45)}
.lecteur video{width:100%;aspect-ratio:16/9}
.liste-coches{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:10px}
.liste-coches li{padding-left:30px;position:relative;color:var(--encre-2)}
.liste-coches li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:9px;border-left:3px solid var(--bleu);border-bottom:3px solid var(--bleu);transform:rotate(-45deg)}

/* Méthode */
.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;margin-top:44px;counter-reset:etape}
.etape{border-top:4px solid var(--encre);padding-top:20px;display:flex;flex-direction:column;gap:10px}
.etape::before{counter-increment:etape;content:"0" counter(etape);font:800 54px/1 var(--titre);color:var(--ambre);letter-spacing:0}
.etape p{font-size:16px;color:var(--encre-2)}
.etape small{font-size:14px;font-weight:700;color:var(--gris)}

/* Programme en accordéon */
.programme{background:var(--encre);color:var(--papier)}
.programme .surtitre{color:var(--ambre)}
.programme .chapo{color:#B9BEC8}
.modules{margin-top:40px;border-top:1px solid #343944}
.modules details{border-bottom:1px solid #343944}
.modules summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:56px minmax(0,1fr) auto 24px;gap:16px;align-items:center;padding:22px 0}
.modules summary::-webkit-details-marker{display:none}
.modules summary .n{font:800 15px var(--titre);color:var(--ambre)}
.modules summary h3{color:var(--papier)}
.modules summary small{font-size:14px;color:#B9BEC8;font-weight:600}
.modules summary::after{content:"+";font:400 26px/1 var(--titre);color:var(--ambre);text-align:center}
.modules details[open] summary::after{content:"\2212"}
.modules .contenu{padding:0 0 24px 72px;color:#C9CDD5;font-size:16px}
.modules .contenu ul{margin:10px 0 0;padding-left:18px;display:grid;gap:6px}
.modules .livrable{display:inline-block;margin-top:14px;background:#23272F;border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600;color:var(--ambre-clair)}

/* Formateur */
.formateur{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:56px;align-items:center}
.formateur img{border-radius:var(--rayon);width:100%;aspect-ratio:4/5;object-fit:cover}
.formateur p{color:var(--encre-2);margin-top:16px}

/* Tarif */
.tarif{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:56px;align-items:start}
.offre{background:var(--surface);border:2px solid var(--encre);border-radius:22px;padding:36px;display:flex;flex-direction:column;gap:18px;box-shadow:10px 10px 0 var(--ambre)}
.offre .prix{font:900 96px/1 var(--titre)}
.offre .prix small{font:600 15px var(--texte);color:var(--gris);letter-spacing:0;margin-left:8px}
.offre ul{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--encre-2);font-size:16px}
.note{font-size:14px;color:var(--gris)}
.a-definir{background:var(--ambre-clair);border-radius:6px;padding:1px 6px;font-size:.92em}

/* Catalogue à venir */
.avenir{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:40px}
.avenir .carte{background:transparent;border-style:dashed}
.etiquette{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--encre);color:var(--papier);border-radius:999px;padding:5px 12px}
.etiquette.ok{background:var(--ambre);color:var(--encre)}

/* FAQ */
.faq{max-width:820px}
.faq details{border-top:1px solid var(--trait);padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--trait)}
.faq summary{cursor:pointer;font:700 19px var(--titre);list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--bleu);font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin-top:10px;color:var(--encre-2)}

/* Pied */
.pied{background:var(--encre);color:#B9BEC8;padding:44px 0;font-size:14px}
.pied .conteneur{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.pied a{color:var(--papier)}
.pied .logo{color:var(--papier)}
.pied .logo i{filter:invert(1)}

/* ---------- Espace élève ---------- */
.espace{display:grid;grid-template-columns:320px minmax(0,1fr);gap:32px;align-items:start;padding:32px 0 72px}
.sommaire{position:sticky;top:92px;background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon);padding:14px;max-height:calc(100vh - 110px);overflow:auto}
.progression{padding:8px 8px 14px}
.progression .barre{height:8px;background:var(--creme);border-radius:4px;overflow:hidden;margin-top:8px}
.progression .barre i{display:block;height:100%;background:var(--ambre);width:0;transition:width .3s}
.progression small{font-size:13px;font-weight:700;color:var(--gris)}
.sommaire h4{font:700 15px var(--titre);margin:14px 8px 6px}
.sommaire button{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:11px 10px;font:600 14px var(--texte);color:var(--encre-2);cursor:pointer;min-height:44px;align-items:center}
.sommaire button:hover{background:var(--creme)}
.sommaire button[aria-current="true"]{background:var(--encre);color:var(--papier)}
.sommaire button .etat{font-size:12px;color:var(--gris);white-space:nowrap}
.sommaire button[aria-current="true"] .etat{color:var(--ambre-clair)}
.sommaire .verrou{opacity:.55}
.lecon{display:flex;flex-direction:column;gap:26px;min-width:0}
.lecon h1{font-size:clamp(40px,5vw,72px)}
.lecon h2{font:700 24px/1.2 var(--texte)}
.bloc{background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon);padding:26px}
.bloc h2{margin-bottom:14px}
.bloc ul,.bloc ol{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--encre-2)}
.objectif{background:var(--ambre-clair);border-color:transparent}
.tableau{width:100%;border-collapse:collapse;font-size:15px}
.tableau th{text-align:left;font:700 13px var(--texte);letter-spacing:.06em;text-transform:uppercase;color:var(--gris);padding:10px 12px;border-bottom:2px solid var(--encre)}
.tableau td{padding:12px;border-bottom:1px solid var(--trait);vertical-align:top;color:var(--encre-2)}
.tableau td:first-child{font-weight:700;color:var(--encre)}
.defile{overflow-x:auto}
.poster{aspect-ratio:16/9;background:var(--encre);color:#B9BEC8;border-radius:18px;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font-weight:600}
.pied-lecon{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* Grilles de notation interactives */
.grille-note{display:grid;gap:14px}
.critere{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:center}
.critere label{font-weight:700}
.critere small{grid-column:1/-1;color:var(--gris);font-size:14px}
.critere input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--bleu);height:28px}
.critere output{font:800 22px var(--titre);min-width:54px;text-align:right}
.resultat{margin-top:8px;background:var(--encre);color:var(--papier);border-radius:var(--rayon);padding:22px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.resultat b{font:800 54px/1 var(--titre);color:var(--ambre);letter-spacing:0}
.resultat p{flex:1 1 240px;color:#D9DCE2}
/* Quiz */
.question{border-top:1px solid var(--trait);padding:18px 0}
.question:first-of-type{border-top:0;padding-top:0}
.question p{font-weight:700;margin-bottom:10px}
.question .choix{display:grid;gap:8px}
.question button{text-align:left;background:var(--papier);border:2px solid var(--trait);border-radius:10px;padding:12px 14px;font:500 16px var(--texte);color:var(--encre);cursor:pointer;min-height:48px}
.question button:hover:not(:disabled){border-color:var(--encre)}
.question button.juste{border-color:#1F7A4D;background:#E5F4EC}
.question button.faux{border-color:#B3261E;background:#FBE9E7}
.question .explication{margin-top:10px;font-size:15px;color:var(--encre-2);font-weight:500}
.coches{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.coches label{display:flex;gap:12px;align-items:center;padding:10px 4px;cursor:pointer;min-height:44px;color:var(--encre-2)}
.coches input{width:22px;height:22px;accent-color:var(--bleu);flex:none}

@media (max-width:900px){
  .section{padding:64px 0}
  .heros .grille,.extrait,.formateur,.tarif,.espace{grid-template-columns:minmax(0,1fr)}
  .chiffres .conteneur{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sommaire{position:static;max-height:none}
  .modules summary{grid-template-columns:40px minmax(0,1fr) 24px}
  .modules summary small{display:none}
  .modules .contenu{padding-left:0}
  .pastille{right:6px}
  .nav a:not(.btn){display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- École multi-secteurs : catalogue et page formation ---------- */
.catalogue{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:22px;margin-top:44px}
.fiche{background:var(--surface);border:1px solid var(--trait);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--encre);transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden}
.fiche::before{content:"";position:absolute;left:0;top:0;right:0;height:8px;background:var(--c,var(--encre))}
.fiche:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(21,23,28,.5)}
.fiche .secteur{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c,var(--bleu));margin-top:6px}
.fiche h3{font-size:26px;letter-spacing:-.02em}
.fiche p{color:var(--encre-2);font-size:16px;flex:1}
.fiche .meta{display:flex;gap:8px 16px;flex-wrap:wrap;font-size:14px;font-weight:600;color:var(--gris);border-top:1px solid var(--trait);padding-top:14px}
.fiche .lien{font-weight:700;color:var(--encre)}
.format{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:40px}
.format .carte b{font:800 34px/1 var(--titre);color:var(--ambre);letter-spacing:0}
.heros-formation{padding:56px 0 64px;border-bottom:1px solid var(--trait)}
.heros-formation .fil{font-size:14px;font-weight:600;color:var(--gris);margin-bottom:22px}
.heros-formation .fil a{color:var(--gris)}
.heros-formation h1{font-size:clamp(56px,10vw,180px);max-width:1200px;line-height:.86}
.heros-formation.teinte{border-bottom:0}
.heros-formation.teinte .fil,.heros-formation.teinte .fil a,.heros-formation.teinte .chapo,.heros-formation.teinte .surtitre{color:inherit}
.heros-formation.teinte .puce{background:transparent;border:2px solid currentColor}
.heros-formation.teinte .btn{border-color:currentColor;background:transparent;color:inherit}
.heros-formation.teinte .btn.ambre{background:#000;color:#fff;border-color:#000}
.heros-formation .puces{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 30px}
.puce{background:var(--surface);border:1px solid var(--trait);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:700}
.deux{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.deux .carte h3{font-size:19px}
.comparatif{width:100%;border-collapse:collapse;margin-top:32px;font-size:16px}
.comparatif th,.comparatif td{padding:14px 12px;border-bottom:1px solid var(--trait);text-align:left;vertical-align:top}
.comparatif th{font:700 13px var(--texte);letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.comparatif td:first-child{font-weight:700}
.comparatif .nous{background:var(--ambre-clair);font-weight:600}

/* Petits écrans : en-tête sur une seule ligne, titres qui tiennent dans la largeur */
.logo,.nav .btn{white-space:nowrap}
@media (max-width:520px){
  .entete .conteneur{flex-wrap:nowrap;min-height:56px;padding:0 16px}
  .logo{font-size:21px;gap:7px}.logo i{width:16px;height:16px;background-size:5px 6px,5px 11px,5px 16px}
  .nav .btn{min-height:40px;padding:8px 14px;font-size:14px}
  .heros-formation h1{font-size:clamp(40px,13.5vw,96px);overflow-wrap:anywhere}
  .conteneur{padding:0 16px}
  .offre{padding:24px;box-shadow:6px 6px 0 var(--ambre)}.offre .prix{font-size:72px}
}