/* Masterclass Aligneurs Expert — couleurs de la campagne imprimée (roll-ups et affiches A2).
   Se charge APRÈS styles.css : ne fait que recolorer, la mise en page reste celle de styles.css.
   Palette : bleu Ryze #1180BE, bleu nuit #0B1933, nuit profond #14284D, bleu glacier #9FD3F3, ciel #EAF4FB.
   Signature : le surligneur bleu glacier sous le mot clé de chaque titre, tracé à l'apparition. */
:root {
  --soleil: #9fd3f3; --soleil-fonce: #7cc2ee;   /* accent : bleu glacier (le jaune est retiré à la demande de Sara) */ --ciel: #eaf4fb; --nuit3: #14284d;
  --fond: var(--ciel);                       /* tout le « gris clair » devient bleu ciel */
  --filet: #d6e6f2; --bord: #c4d8e8;
  --manifeste-allume: #ffffff;             /* le manifeste est sur fond nuit : les mots s'allument en blanc */
}

/* ---- le surligneur ---- */
.surligne { position: relative; white-space: nowrap; }
.surligne::after { content: ""; position: absolute; z-index: -1; left: -.04em; right: -.04em; bottom: .04em; height: .32em; border-radius: .2em; background: var(--soleil); transform: scaleX(0); transform-origin: left center; transition: transform .9s var(--ease) .35s; }
.vu .surligne::after, .vu.surligne::after, :not(.anime) .surligne::after { transform: scaleX(1); }
h1 .surligne::after { height: .2em; bottom: .02em; }
h2 { position: relative; z-index: 0; }
h1 { position: relative; z-index: 0; }

/* ---- accroche : ciel lumineux, l'aligneur posé dessus ---- */
.hero { background: radial-gradient(120% 70% at 50% 0%, #ffffff 0%, var(--ciel) 55%, #d9ecf8 100%); }
.hero-scene { mix-blend-mode: multiply; }   /* le fond clair de la photo disparaît dans le ciel */
.compte-cases span { box-shadow: 0 12px 30px -16px rgba(17, 128, 190, .45); }
.compte-cases b { color: var(--ryze); }

/* ---- bandeau des chiffres : plein bleu Ryze, comme le roll-up « Venez avec vos cas » ---- */
.chiffres { background: var(--ryze); color: var(--blanc); }
.chiffre strong { background: none; color: var(--blanc); -webkit-background-clip: border-box; background-clip: border-box; font-weight: 200; }
.chiffre span { color: rgba(255, 255, 255, .82); }
.chiffre span::before { content: ""; display: block; width: 28px; height: 3px; margin: 0 auto 10px; border-radius: 3px; background: var(--soleil); }

/* ---- film : sur blanc, cadre souligné de bleu ---- */
.film { background: var(--blanc); }
.film-cadre { box-shadow: 0 50px 100px -45px rgba(17, 128, 190, .55); }

/* ---- manifeste : bleu nuit, les mots s'allument en blanc ---- */
.manifeste { background: var(--nuit); }
.manifeste-texte .m { color: rgba(255, 255, 255, .16); }

/* ---- modules : tuiles ciel, pastille et bouton bleus ---- */
.module { background: var(--ciel); border: 1px solid var(--filet); }
.module::after { background: radial-gradient(circle, rgba(17, 128, 190, .16), transparent 70%); }
.module .num { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--ryze); color: var(--blanc); letter-spacing: .12em; }
.module .dates { color: var(--nuit); }
.module .ateliers li::before { background: var(--ryze); }
.module .prix { color: var(--nuit); }
.module .choisir { padding: 0 18px; border-radius: 999px; background: var(--ryze); color: var(--blanc); font-weight: 600; transition: background .2s, transform .3s var(--ease); }
.module .choisir:hover { background: #0d6aa0; text-decoration: none; transform: translateY(-2px); }

/* ---- conférenciers : nuit profond, cartes blanches, ville en blanc ---- */
.experts-bloc { background: var(--nuit3); color: var(--blanc); }
.experts-bloc h2 { color: var(--blanc); }
.experts-bloc .surtitre { color: var(--soleil); }
.experts-bloc .carte { color: var(--encre); }
.carte .ville { background: rgba(255, 255, 255, .9); color: var(--nuit); font-weight: 500; }
.fleche { background: rgba(255, 255, 255, .1); color: var(--blanc); box-shadow: none; }
.fleche:hover { background: var(--blanc); color: var(--nuit); }

/* ---- programme : onglet actif bleu, ateliers en bleu ---- */
.prog-nav button:hover { background: var(--ciel); }
.etiquette.atelier { background: var(--ryze); color: var(--blanc); font-weight: 600; }
.session.atelier { background: linear-gradient(90deg, var(--ciel), transparent 75%); }
.etiquette.invite { background: var(--ciel); box-shadow: inset 0 0 0 1px var(--bord); }

/* ---- infos pratiques et questions : ciel ---- */
.bloc-gris { background: var(--ciel); }
.infos > div { border-top: 4px solid var(--ryze); box-shadow: 0 16px 34px -26px rgba(17, 128, 190, .5); }
.infos > div:nth-child(3) { border-top-color: var(--nuit3); }
.faq details { border-top-color: var(--bord); }
.faq details:last-child { border-bottom-color: var(--bord); }

/* ---- inscription : plein bleu, formulaire blanc, bouton bleu ---- */
.inscription { background: linear-gradient(160deg, var(--ryze) 0%, #0d5f95 55%, var(--nuit3) 100%); color: var(--blanc); }
.inscription::before { background: radial-gradient(circle, rgba(159, 211, 243, .22), transparent 65%); }
.inscription h2, .inscription .chapeau { color: var(--blanc); }
.inscription .surtitre { color: var(--soleil); }
.inscription .chapeau { color: rgba(255, 255, 255, .85); }
.inscription form { background: var(--blanc); box-shadow: 0 40px 90px -40px rgba(4, 16, 38, .7); }
.inscription .bouton-bleu.envoyer { background: var(--ryze); color: var(--blanc); font-weight: 600; box-shadow: 0 14px 30px -14px rgba(17, 128, 190, .7); }
.inscription .bouton-bleu.envoyer:hover { background: #0d6aa0; filter: none; }

/* ---- pied : bleu nuit, logo en blanc ---- */
.pied { background: var(--nuit); color: rgba(255, 255, 255, .72); border-top: 0; }
.pied img { filter: brightness(0) invert(1); }
.pied .petit { color: rgba(255, 255, 255, .5); }
.pied a { color: var(--soleil); }

/* ---- barre mobile ---- */
@media (max-width: 600px) {
  .barre-mobile .bouton-bleu { font-weight: 600; }
}
@media (prefers-reduced-motion: reduce) { .surligne::after { transform: scaleX(1); } }
/* cartes de module : prix et bouton toujours sur une ligne */
.module .prix, .module .choisir { white-space: nowrap; }
.module .bas { flex-wrap: wrap; }
/* la photo de l'aligneur a un fond gris très clair : ses bords se fondent dans le ciel */
.hero-video { -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 62% 58% at 50% 46%, #000 58%, transparent 100%); }