/* ═══════════════════════════════════════
   LANDING « LE CERVEAU DE MARQUE » (/cockpit-marketing/ateliers/cerveau-de-marque/, FR et EN)
   Mise au niveau des landings récentes le 2026-10-26. La page charge aussi marketeur-full-stack.css,
   qui lui apporte, comme aux landings full stack et opticiens : le mur de réalisations en pleine largeur,
   « pour qui » et la FAQ resserrés (bloc « RYTHME DES SECTIONS »), et Jessy en pixel art, la mascotte
   qui suit la visite et répond aux questions (script : cerveau-de-marque.js).
   Cette feuille règle le rythme des sections propres à la page, selon la même règle :
   - élargies, à mi-chemin du bord de l'écran : la méthode en 3 temps et le programme (ce qui se regarde) ;
   - resserrée : « Changez d'agent » (ce qui se lit) ;
   - courantes : le problème, le démonstrateur (titre centré), les avis, l'installation en 5 gestes
     (scène qui reste à l'écran au défilement, kit-anim.css) ;
   - titres : au bord gauche du bloc qui déborde dans les sections élargies, centrés dans les resserrées,
     au bord de la grille ailleurs et sous 900 px ;
   - souffles : amples autour des grands blocs visuels, serrés pour ce qui se lit.
   Aucune largeur fixe ; aucun défilement horizontal de 390 à 2 560 px (html { overflow-x: clip }).
   ═══════════════════════════════════════ */

/* les largeurs se posent sur la section : le bloc qui déborde et son titre lisent la même variable */
#methode, .ap-programme {
    --gout: clamp(1rem, 2.5vw, 2.5rem);
    --c: min(1224px, 100vw - 2 * clamp(1.5rem, 4vw, 3rem));
    --l: min(1560px, (var(--c) + 100vw - 2 * var(--gout)) / 2);
}
#methode .ap-steps, .ap-programme .ap-panel {
    width: var(--l);
    max-width: none;
    margin-inline: calc(50% - var(--l) / 2);
}
#liberte > .container { max-width: 1120px; }

/* les lignes de départ des titres */
@media (min-width: 900px) {
    #methode > .container > .section-title,
    .ap-programme > .container > :is(.section-title, .ap-tabs) { margin-left: calc(50% - var(--l) / 2); }
}

/* les souffles verticaux */
#methode, .ap-programme { padding-block: clamp(5rem, 9vw, 8.5rem); }
#liberte { padding-block: clamp(3rem, 5.5vw, 4.5rem); }

/* fonds continus en mobile : la dernière rangée de pastilles du démonstrateur débordait de quelques pixels
   sur « Changez d'agent » (coupure relevée par controle-fonds.py en 390 px, déjà en ligne) : un souffle bas la retient */
@media (max-width: 760px) {
    .ap-produirez { padding-bottom: 3.5rem; }
}

/* ═══════════════════════════════════════
   OFFERTE AVEC LA COLLAB (jusqu'au 31 décembre 2026) ET REEL DU HÉROS (ajouts du 2026-10-29)
   Le mode « collab » est posé dans le <head> de la page tant que la date n'est pas passée :
   [data-si="collab"] ne paraît qu'en ce mode, [data-si="hors-collab"] et les blocs vente / préinscription s'effacent.
   ═══════════════════════════════════════ */
html:not([data-mode="collab"]) [data-si="collab"],
html[data-mode="collab"] [data-si="hors-collab"],
html[data-mode="collab"] [data-si="vente"],
html[data-mode="collab"] [data-si="attente"] { display: none !important; }

/* sous les boutons du héros : le prix offert et le logo de La Collab */
.ap-collab-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.55rem; margin: 1.1rem 0 0; font-size: 0.92rem; color: var(--light-blue); opacity: 0; animation: fadeUp 0.9s 0.35s forwards; }
.ap-collab-hero b { color: var(--golden); font-weight: 800; }
.ap-collab-hero a { display: inline-flex; padding: 0.2rem 0; }
.ap-collab-hero img { height: 0.82rem; width: auto; filter: brightness(0) invert(1); opacity: 0.9; }
@media (max-width: 899px) { .ap-collab-hero { justify-content: center; } }

/* l'offre : la présentation de La Collab, le prix barré */
.ap-collab { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem 2.2rem; align-items: center; max-width: 1000px; margin: 0 auto 2.2rem; padding: 1.6rem clamp(1.4rem, 3vw, 2.2rem); border: 1px solid rgba(124, 152, 179, 0.18); background: rgba(13, 27, 42, 0.5); }
.ap-collab > img { width: clamp(150px, 16vw, 200px); height: auto; filter: brightness(0) invert(1); }
.ap-collab-titre { margin: 0 0 0.45rem; font-size: 1.05rem; font-weight: 700; color: var(--off-white); }
.ap-collab p:not(.ap-collab-titre) { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--light-blue); }
.ap-collab p a { color: var(--golden); text-underline-offset: 3px; }
@media (max-width: 700px) { .ap-collab { grid-template-columns: 1fr; } }
.ap-price-barre { margin-right: 0.9rem; font-size: 0.42em; font-weight: 600; letter-spacing: 0; color: var(--soft-blue, #7C98B3); text-decoration-thickness: 2px; vertical-align: middle; }
.ap-offer .ap-form-note a { color: var(--golden); }

/* le héros : le reel vertical, seul et centré dans sa colonne ; en mobile, il passe avant le texte (demande de Jessy du 2026-10-29) */
.ap-scene.ap-scene--reel { display: flex; justify-content: center; align-items: center; margin: 0.5rem 0 1.5rem; }
.ap-reel { position: relative; width: clamp(250px, 24vw, 320px); }
.ap-reel .lecteur-video { aspect-ratio: 9 / 16; border: 1px solid rgba(124, 152, 179, 0.18); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45); }
.ap-reel .lecteur-video .lv-video { width: 100%; height: 100%; }
.ap-reel .dm-float { z-index: 3; }
.ap-reel > .corner-plus { z-index: 4; }
.ap-reel .dm-float.f1 { top: 7%; left: -23px; }
.ap-reel .dm-float.f2 { top: 34%; right: -23px; }
.ap-reel .dm-float.f4 { bottom: 26%; right: -23px; }
@media (max-width: 899px) {
    .ap-scene.ap-scene--reel { order: -1; margin: 0 auto 0.5rem; animation-delay: 0.1s; }
    .ap-reel { width: min(300px, 72vw); }
}