/* TATEA — landing : alternance bleu marine / clair (2026-10-19, « alterner entre le bleu marine et le #edf0f4 »).
   clair : hero + S02, S04 niveaux, S06 intervenants, S08 tarifs, S10 FAQ ; bleu marine : S03 académies, S05 méthode, S07 témoignages, S09 cohortes, S11 inscription.
   Dans une section bleu marine, --ink / --text passent en blanc ; les cartes blanches les remettent en foncé. */
html :is(.acb, .cvb, .tmb, .cob, .ins):not(#x) { background: var(--night); color: #fff; --ink: #fff; --text: rgb(255 255 255 / .74); }
:is(.acb, .cvb, .tmb, .cob, .ins) :is(.tmx__card, .cox__card, .p12__card) { --ink: #16213d; --text: #3d4862; color: var(--ink); }
.cvb .mtx__card { background: #0f3a66; }
.ins .ins__wa { background: #fff; color: #16213d; }
/* textes pensés pour le clair (encre à faible opacité) → blanc à faible opacité */
.acb .why__out.is-read .rd, .cvb .why__out.is-read .rd { color: rgb(255 255 255 / .22); }
.acb .why__out.is-read .rd.on, .cvb .why__out.is-read .rd.on { color: #fff; }
.acb .acx--f .acx__ks button { color: rgb(255 255 255 / calc(.22 + .78 * var(--p, 0))); }
.acb .acx--f .acx__ks button:hover { color: rgb(255 255 255 / .75); }
.acb .acx--d .acx__dots button { background: rgb(255 255 255 / .2); }
.tmb .tmx__side li { border-top-color: rgb(255 255 255 / .14); }
.tmb .tmx__side button { color: rgb(255 255 255 / .45); }
.tmb .tmx__side li.on button { color: #fff; }
.acb .acx--f .acx__bl { background: var(--night); box-shadow: 0 -26px 22px var(--night); } /* mobile : le fondu sous la photo prend le bleu marine */
.acb .acx--f :is(.acx__nav, .acx__acts) { background: var(--night); border-top-color: rgb(255 255 255 / .14); box-shadow: none; }

/* ---------- 2026-10-19 (2) : l'alternance part du héros, en bleu nuit H&C (#0b1626) ; barre du haut en bleu nuit, logo blanc ----------
   (feuille chargée aussi par les pages académies) */
.bar, html[data-e~="8"] .bar, html[data-e~="8"] .bar.is-solid { background: var(--night); color: #fff; }
.bar__logo img { content: url("../img/tatea/logo-tatea.png"); }
.bar__nav a:hover { color: var(--gold); }
.bar__menu span { background: #fff; }
.bar__menu:hover { background: rgb(255 255 255 / .1); }
.hero { background: var(--night); border-bottom-color: rgb(255 255 255 / .2); }
.hero__title, .hero__more, .hero__place { color: #fff; }
.hero__lead { color: rgb(255 255 255 / .74); }
.map__c--hc, .js .is-in .map__c--hc { fill: var(--sky); }
@keyframes hc-in { 0% { fill: transparent; } 26% { fill: var(--gold); } 82% { fill: var(--gold); } 100% { fill: var(--sky); } }

/* 2026-10-20 : « logo trop petit, afficher clairement The African Top Executive Academy » → logo plus grand + nom écrit en vrai texte */
.bar__logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.bar__logo img, .bar .bar__logo img { width: 152px; }
.bar__tag { padding-left: 14px; border-left: 1px solid rgb(255 255 255 / .28); font-size: 12px; font-weight: 600; line-height: 1.25; letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .86); white-space: nowrap; }
@media (max-width: 1180px) { .bar__logo img, .bar .bar__logo img { width: 128px; } }
@media (max-width: 600px) {
  .bar__logo { gap: 10px; }
  .bar__logo img, .bar .bar__logo img { width: 108px; }
  .bar__tag { padding-left: 10px; font-size: 9.5px; letter-spacing: .08em; }
}

/* 2026-10-20 : fin de barre = « Un programme H&C » (retour sur le site H&C) ; le ☰ seulement sous 1180 px, il ouvre .tmenu */
.bar__end { justify-self: end; display: flex; align-items: center; gap: 14px; }
.bar__hc { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: rgb(255 255 255 / .08); color: rgb(255 255 255 / .78); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.bar__hc img { width: 74px; height: auto; }
.bar__hc:hover { background: rgb(255 255 255 / .16); color: #fff; }
.bar .bar__end .bar__menu { display: none; }
@media (max-width: 1180px) {
  .bar__hc { display: none; }
  .bar .bar__end .bar__menu { display: grid; }
}

.tmenu { width: min(440px, 100vw); max-width: none; height: 100dvh; max-height: none; margin: 0 0 0 auto; padding: 0; border: 0; background: var(--night, #0b1626); color: #fff; overflow: auto; }
.tmenu::backdrop { background: rgb(11 22 38 / .55); backdrop-filter: blur(3px); }
.tmenu[open] { animation: tmenu-in .32s cubic-bezier(.2, .7, .2, 1); }
@keyframes tmenu-in { from { translate: 40px 0; opacity: 0; } }
.tmenu__in { display: flex; flex-direction: column; gap: 22px; min-height: 100%; padding: 22px 24px 28px; }
.tmenu__head { display: flex; align-items: center; justify-content: space-between; }
.tmenu__home img { width: 120px; height: auto; }
.tmenu__x { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .1); color: #fff; cursor: pointer; }
.tmenu__x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tmenu__x:hover { background: rgb(255 255 255 / .18); }
.tmenu__nav { display: flex; flex-direction: column; }
.tmenu__nav a { padding: 12px 0; border-bottom: 1px solid rgb(255 255 255 / .12); font-size: 22px; font-weight: 400; color: #fff; text-decoration: none; }
.tmenu__nav a:hover { color: var(--gold); }
.tmenu__k { margin: 6px 0 -10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.tmenu__ac { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tmenu__ac a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 12px; color: #fff; text-decoration: none; }
.tmenu__ac a:hover, .tmenu__ac a[aria-current] { background: rgb(255 255 255 / .08); }
.tmenu__ac b { font-weight: 500; font-size: 16px; }
.tmenu__ac span { font-size: 13px; color: rgb(255 255 255 / .6); }
.tmenu__hc { display: flex; align-items: center; gap: 14px; margin-top: auto; padding: 16px 18px; border-radius: 16px; background: rgb(255 255 255 / .07); color: rgb(255 255 255 / .8); font-size: 14px; line-height: 1.35; text-decoration: none; }
.tmenu__hc img { width: 92px; height: auto; flex: none; }
.tmenu__hc b { display: block; font-weight: 500; color: #fff; }
.tmenu__hc:hover { background: rgb(255 255 255 / .13); }
@media (prefers-reduced-motion: reduce) { .tmenu[open] { animation: none; } }
.tmenu__x:focus:not(:focus-visible) { outline: none; }

/* 2026-10-20 : barre affinée (« elle prend trop de place ») : ~56 px au lieu de 80 */
.bar, html[data-e~="8"] .bar { padding-top: 10px; padding-bottom: 10px; }
.bar__logo { gap: 12px; }
.bar__logo img, .bar .bar__logo img { width: 112px; }
.bar__tag { padding-left: 12px; font-size: 10px; letter-spacing: .1em; }
.bar__nav { font-size: 13px; gap: clamp(16px, 2.2vw, 30px); }
.bar__hc { padding: 6px 12px; font-size: 10.5px; gap: 8px; }
.bar__hc img { width: 62px; }
.bar .bar__end .bar__menu { width: 38px; height: 38px; }
@media (max-width: 1180px) { .bar__logo img, .bar .bar__logo img { width: 104px; } }
@media (max-width: 600px) {
  .bar, html[data-e~="8"] .bar { padding-top: 8px; padding-bottom: 8px; }
  .bar__logo img, .bar .bar__logo img { width: 92px; }
  .bar__tag { font-size: 8.5px; padding-left: 9px; }
}

/* 2026-10-20 : S05 sur la nuit — les pastilles 01–05 de la méthode étaient en bleu sur bleu (invisibles hors étape active) */
.cvb .mtx__dots button { background: rgb(255 255 255 / .1); color: rgb(255 255 255 / .72); cursor: pointer; }
.cvb .mtx__dots button:hover { background: rgb(255 255 255 / .18); color: #fff; }
.cvb .mtx__dots button.on { background: var(--gold); color: var(--ink); }