/* brandmanager.kakojar.com — maquette. Charte KAKOJAR : jaune #FDC11B, noir, blanc ; Bebas Neue + Open Sans. Mobile d'abord. */
:root{
  --jaune:#FDC11B; --noir:#0b0b0b; --nuit:#141414; --blanc:#fff; --papier:#f6f4ee;
  --encre:#111; --gris:#5c5c5c; --gris-clair:#a9a9a9; --trait:#dcd8cc; --trait-sombre:#2c2c2c;
  --titre:'Bebas Neue',Impact,sans-serif; --texte:'Open Sans',Arial,sans-serif;
  --marge:20px; --max:1240px; --rayon:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;font-family:var(--texte);font-size:16px;line-height:1.6;color:var(--encre);background:var(--papier);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--titre);font-weight:400;letter-spacing:.01em;line-height:.95;margin:0}
h2{font-size:clamp(44px,8vw,84px)}
h3{font-size:clamp(28px,4vw,38px)}
em{font-style:normal;color:var(--gris)}
.noir em,.heros em{color:var(--jaune)}
.jaune em{color:var(--encre)}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--marge)}
.evitement{position:absolute;left:-999px;top:8px;background:var(--jaune);color:var(--noir);padding:10px 14px;z-index:100;font-weight:700}
.evitement:focus{left:8px}
:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px var(--blanc),0 0 0 5px var(--noir),0 0 0 8px var(--jaune)}
.bandeau-maquette{background:var(--jaune);color:var(--noir);font-size:13px;text-align:center;padding:6px 12px;font-weight:600}
.a-valider{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.02em;color:#7a5a00;background:#fff3cf;border:1px dashed #d9a20a;border-radius:6px;padding:1px 7px;line-height:1.5}
.a-valider.clair{color:var(--jaune);background:transparent;border-color:#6b5512}

/* surtitres */
.surtitre{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.surtitre i{width:28px;height:2px;background:var(--jaune);flex:none}
.surtitre.clair{color:#cfcfcf}
.intro{max-width:520px;color:var(--gris);margin:18px 0 0}
.intro.clair{color:#bdbdbd}

/* boutons */
.bouton{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:52px;padding:0 24px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;border:0;cursor:pointer;font-family:var(--texte);transition:transform .25s,background .25s,box-shadow .25s}
.bouton:hover{transform:translateY(-3px)}
.bouton:active{transform:translateY(0) scale(.98)}
.bouton-jaune{background:var(--jaune);color:var(--noir)}
.bouton-jaune:hover{box-shadow:0 10px 24px rgba(253,193,27,.28)}
.bouton-noir{background:var(--noir);color:var(--blanc)}
.bouton.petit{min-height:44px;padding:0 18px;font-size:14px}
.lien-texte{display:inline-flex;gap:10px;align-items:center;min-height:44px;font-weight:700;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .3s}
.lien-texte:hover{background-size:100% 2px}
.lien-texte.clair{color:var(--blanc)}

/* en-tête */
.entete{position:sticky;top:0;z-index:50;background:rgba(11,11,11,.92);backdrop-filter:blur(10px);color:var(--blanc);border-bottom:1px solid transparent;transition:border-color .3s}
.entete.defile{border-color:var(--trait-sombre)}
.entete-in{display:flex;align-items:center;gap:24px;min-height:68px}
.marque{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--blanc);font-family:var(--titre);font-size:24px;letter-spacing:.04em}
.marque b{font-weight:400;color:var(--jaune)}
.nav,.nav-cta{display:none}
.burger{margin-left:auto;width:44px;height:44px;background:none;border:0;display:grid;place-content:center;gap:7px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--blanc);transition:transform .2s}
.burger[aria-expanded=true] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.menu-mobile{display:flex;flex-direction:column;padding:8px var(--marge) 28px;background:var(--noir)}
.menu-mobile[hidden]{display:none}
.menu-mobile a{font-family:var(--titre);font-size:34px;text-decoration:none;padding:6px 0;border-bottom:1px solid var(--trait-sombre)}
.menu-mobile a:last-child{color:var(--jaune)}

/* premier écran — mobile : photo en haut, texte dessous */
.heros{background:var(--noir);color:var(--blanc);position:relative;overflow:hidden}
.heros-photo{margin:0;height:42vh;min-height:280px;max-height:460px;position:relative}
.heros-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.heros-photo::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,var(--noir))}
.heros-in{position:relative;padding-bottom:48px;margin-top:-56px}
h1{font-size:clamp(56px,14vw,128px)}
.chapo{color:#d6d6d6;max-width:540px;margin:22px 0 0}
.chapo strong{color:var(--blanc)}
.actions{display:flex;flex-direction:column;gap:14px;margin-top:28px}
.actions .bouton{width:100%}
.preuves{list-style:none;padding:24px 0 0;margin:30px 0 0;border-top:1px solid var(--trait-sombre);display:grid;gap:10px;font-size:14px;color:#bdbdbd}
.preuves b{font-family:var(--titre);font-weight:400;font-size:30px;color:var(--jaune);margin-right:8px;vertical-align:-3px}

/* sections */
.section{padding:84px 0}
.fond-clair{background:var(--papier)}
.blanc{background:var(--blanc)}
.noir{background:var(--noir);color:var(--blanc)}
.jaune{background:var(--jaune);color:var(--noir)}
.jaune .surtitre{color:var(--noir)}
.jaune .surtitre i{background:var(--noir)}
.tete{margin-bottom:44px}
.num{font-family:var(--titre);font-size:22px;color:var(--gris);letter-spacing:.06em}

/* méthode */
.trio{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.trio li{background:var(--blanc);border-radius:var(--rayon);padding:28px;border-top:4px solid var(--jaune);transition:transform .3s}
.trio li:hover{transform:translateY(-2px)}
.trio h3{margin:14px 0 10px}
.trio p{margin:0;color:var(--gris)}

/* services */
.liste-services{list-style:none;margin:0;padding:0;border-top:1px solid var(--trait)}
.liste-services li{border-bottom:1px solid var(--trait)}
.liste-services a{display:grid;grid-template-columns:44px 1fr 28px;gap:12px;padding:26px 0;text-decoration:none;transition:padding .25s,background .25s}
.liste-services a:hover{padding-left:12px;background:linear-gradient(90deg,rgba(253,193,27,.16),transparent 70%)}
.liste-services h3{font-size:32px}
.liste-services p{margin:6px 0 12px;color:var(--gris)}
.etiquettes{display:flex;flex-wrap:wrap;gap:6px}
.etiquettes span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--trait);border-radius:999px;padding:3px 10px;color:var(--gris)}
.fleche{font-size:22px;transition:transform .25s}
.liste-services a:hover .fleche{transform:translate(3px,-3px)}

/* études de cas */
.cas{display:grid;gap:28px;padding:44px 0;border-top:1px solid var(--trait-sombre)}
.cas-visuel{margin:0;border-radius:var(--rayon);overflow:hidden;background:var(--nuit);aspect-ratio:4/3}
.cas-visuel img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.cas:hover .cas-visuel img{transform:scale(1.03)}
.cas-visuel.duo{display:grid;grid-template-columns:1.1fr 1fr;gap:8px;background:transparent}
.cas-visuel.duo img{border-radius:10px}
.cas-meta{display:flex;align-items:baseline;gap:14px;margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#bdbdbd}
.grand-num{font-family:var(--titre);font-size:56px;line-height:1;color:var(--jaune);letter-spacing:0}
.cas h3{font-size:clamp(32px,4.4vw,48px);max-width:16ch}
.cas-grille{display:grid;gap:18px;margin:26px 0 0}
.cas-grille div{border-top:1px solid var(--trait-sombre);padding-top:12px}
.cas-grille dt{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--jaune)}
.cas-grille dd{margin:6px 0 0;color:#d0d0d0;font-size:15px}
.resultat{margin:24px 0 0;padding:16px 18px;background:var(--nuit);border-left:3px solid var(--jaune);border-radius:0 10px 10px 0;color:#e8e8e8}
.resultat b{display:block;font-family:var(--titre);font-weight:400;font-size:22px;color:var(--jaune);letter-spacing:.04em}
.resultat .a-valider{margin-top:8px}

/* podcast */
.podcast-grille{display:grid;gap:36px}
.podcast-visuel{margin:0;border-radius:var(--rayon);overflow:hidden;aspect-ratio:4/3}
.podcast-visuel img{width:100%;height:100%;object-fit:cover;object-position:28% 50%;transition:transform .7s}
.podcast-visuel:hover img{transform:scale(1.03)}
.episodes{list-style:none;margin:28px 0 18px;padding:0;border-top:1px solid var(--trait)}
.episodes li{border-bottom:1px solid var(--trait)}
.episodes a{display:flex;gap:16px;align-items:center;padding:16px 0;text-decoration:none;min-height:64px}
.lecture{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-content:center;background:var(--noir);color:var(--jaune);font-size:14px;transition:transform .25s}
.episodes a:hover .lecture{transform:scale(1.08)}
.episodes b{display:block;font-weight:700;line-height:1.35}
.episodes small{display:inline-block;margin-top:4px;font-size:12px;color:var(--gris)}

/* témoignages */
.avis-grille{display:grid;gap:14px}
.avis{margin:0;background:var(--blanc);border-radius:var(--rayon);padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;transition:transform .3s}
.avis:hover{transform:translateY(-2px)}
.avis blockquote{margin:0;font-size:17px;line-height:1.55;color:var(--gris);font-style:italic}
.avis figcaption{border-top:1px solid var(--trait);padding-top:14px;font-size:14px}
.avis figcaption b{display:block}
.avis figcaption span{color:var(--gris)}
.note-maquette{margin:24px 0 0;font-size:13px;font-weight:600}

/* parcours */
.parcours-grille{display:grid;gap:36px}
.parcours-photo{margin:0;border-radius:var(--rayon);overflow:hidden;aspect-ratio:4/5}
.parcours-photo img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.lecons{margin:28px 0 12px;padding:0;list-style:none;counter-reset:l;display:grid;gap:16px}
.lecons li{counter-increment:l;padding-left:46px;position:relative;color:#cfcfcf}
.lecons li::before{content:"0" counter(l);position:absolute;left:0;top:-2px;font-family:var(--titre);font-size:26px;color:var(--jaune)}
.lecons b{color:var(--blanc)}
.formation{list-style:none;margin:28px 0 20px;padding:0;display:grid;gap:8px;font-size:14px;color:#bdbdbd}
.formation li{border-top:1px solid var(--trait-sombre);padding-top:8px}
.formation b{color:var(--blanc);margin-right:6px}

/* contact */
.contact-grille{display:grid;gap:36px}
.contact-liens{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:10px;font-weight:700}
.contact-liens a{display:inline-flex;align-items:center;min-height:44px}
.formulaire{background:var(--blanc);border-radius:var(--rayon);padding:24px;display:grid;gap:16px}
.champ label{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
.champ input,.champ textarea{width:100%;font:inherit;padding:12px 14px;border:1.5px solid var(--trait);border-radius:10px;background:var(--papier);min-height:48px}
.champ input:focus,.champ textarea:focus{border-color:var(--noir);outline:none;box-shadow:0 0 0 3px rgba(253,193,27,.5)}
.consentement{display:flex;gap:10px;font-size:13px;color:var(--gris);align-items:flex-start}
.consentement input{width:20px;height:20px;margin-top:2px;accent-color:var(--noir)}
.formulaire .bouton{width:100%}
.message-ok{display:none;margin:0;font-weight:700;background:var(--jaune);padding:12px 14px;border-radius:10px}
.message-ok.vu{display:block}

/* pied */
.pied{background:var(--noir);color:#bdbdbd;padding:40px 0;font-size:14px}
.pied-in{display:grid;gap:20px}
.portes{display:flex;flex-wrap:wrap;gap:6px 22px}
.portes a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.portes a:hover,.portes [aria-current]{color:var(--jaune)}
.mentions{margin:0}
.bientot{border:0;border-radius:var(--rayon);padding:26px;max-width:340px}
.bientot::backdrop{background:rgba(0,0,0,.6)}
.bientot p{margin:0 0 16px}

/* apparitions */
.entree{animation:entree .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes entree{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.js .apparait{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .apparait.vu{opacity:1;transform:none}

/* tablette */
@media (min-width:768px){
  :root{--marge:40px}
  .actions{flex-direction:row;align-items:center}
  .actions .bouton{width:auto}
  .trio{grid-template-columns:repeat(3,1fr)}
  .avis-grille{grid-template-columns:repeat(3,1fr)}
  .cas-grille{grid-template-columns:repeat(3,1fr)}
  .formulaire .bouton{width:auto;justify-self:start}
}
/* ordinateur */
@media (min-width:1024px){
  :root{--marge:56px}
  .nav{display:flex;gap:26px;margin-left:auto;font-size:14px;font-weight:600}
  .nav a{text-decoration:none;opacity:.78;transition:opacity .2s;min-height:44px;display:inline-flex;align-items:center}
  .nav a:hover{opacity:1;color:var(--jaune)}
  .nav-cta{display:inline-flex}
  .burger,.menu-mobile{display:none!important}
  .heros{min-height:calc(100vh - 100px);display:flex;align-items:center}
  .heros-photo{position:absolute;right:0;top:0;bottom:0;width:46%;height:auto;max-height:none}
  .heros-photo::after{inset:0 auto 0 0;width:40%;height:auto;background:linear-gradient(90deg,var(--noir),transparent)}
  .heros-in{margin-top:0;padding:72px var(--marge)}
  .heros-texte{max-width:60%}
  .preuves{grid-template-columns:1fr 1fr;max-width:620px}
  .section{padding:120px 0}
  .services-grille{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
  .services-grille .tete{position:sticky;top:110px}
  .liste-services a{grid-template-columns:60px 1fr 32px;padding:30px 0}
  .cas{grid-template-columns:7fr 5fr;gap:56px;align-items:center;padding:64px 0}
  .cas.inverse .cas-visuel{order:2}
  .cas-grille{grid-template-columns:1fr}
  .podcast-grille,.parcours-grille{grid-template-columns:1fr 1fr;gap:72px;align-items:center}
  .contact-grille{grid-template-columns:5fr 6fr;gap:72px;align-items:start}
  .formulaire{padding:36px}
  .pied-in{grid-template-columns:auto 1fr auto;align-items:center}
  .portes{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .apparait{opacity:1;transform:none}
}
/* ordinateur : titre du premier écran un peu plus petit, pour que les preuves restent visibles */
@media (min-width:1024px){h1{font-size:clamp(72px,7vw,104px)}.heros-in{padding-top:56px;padding-bottom:56px}.preuves{margin-top:26px}}
/* Mobile : le bouton principal remonte sous le titre pour rester dans le premier écran (audit du 14/11) */
@media (max-width:767px){.heros-texte{display:flex;flex-direction:column}.heros-texte>*{order:5}.heros-texte .surtitre{order:1}.heros-texte h1{order:2}.heros-texte .actions{order:3;margin-top:24px}.heros-texte .chapo{order:4}}