/* Masterclass Aligneurs Expert — thème clair façon configurateur Apple : blanc, gris clair, touches de bleu en dégradé (bleu Ryze → bleu nuit du livret)
   La version sombre d'origine est conservée dans styles-nuit.css (index-nuit.html). */
:root {
  --nuit: #0b1933; --nuit2: #13244a; --ryze: #1180be; --glacier: #e0f1fb; --encre: #0b1933;
  --gris: #6a6f82; --gris2: #3c4360; --fond: #f5f5f7; --blanc: #fff; --filet: #e3e5ea; --bord: #d2d4dc;
  --degrade: linear-gradient(120deg, var(--ryze) 0%, var(--nuit2) 100%);
  --degrade-texte: linear-gradient(100deg, var(--ryze) 5%, var(--nuit) 95%);
  --ombre: 0 24px 60px -32px rgba(11, 25, 51, .35);
  --manifeste-allume: #0b1933;
  --rayon: 26px; --large: 1180px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; font-family: Poppins, system-ui, sans-serif; color: var(--encre); background: var(--blanc); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-kerning: normal; }
img, video { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
/* écriture : titres équilibrés sur leurs lignes, pas de mot orphelin en fin de paragraphe */
h1, h2, h3, h4, .dates, .manifeste-texte { text-wrap: balance; }
p, li, .session > span, .carte .titre, .chapeau { text-wrap: pretty; }
.surtitre { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ryze); }
h2 { margin-top: 10px; font-size: clamp(30px, 3.8vw, 50px); font-weight: 600; line-height: 1.06; letter-spacing: -.03em; }
.texte-bleu { background: var(--degrade-texte); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chapeau { margin-top: 16px; max-width: 680px; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.5; color: var(--gris); }
.chapeau.clair { margin-left: auto; margin-right: auto; }
.a-venir { color: var(--gris); font-style: italic; }

/* ---- boutons ---- */
.bouton { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; padding: 15px 30px; font: 500 16px Poppins, sans-serif; text-decoration: none; cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s var(--ease), filter .2s; }
.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: scale(.98); }
.bouton-bleu { background: var(--degrade); color: var(--blanc); box-shadow: 0 12px 30px -12px rgba(17, 128, 190, .65); }
.bouton-bleu:hover { filter: brightness(1.08); box-shadow: 0 18px 38px -14px rgba(17, 128, 190, .75); }
.bouton.petit { padding: 9px 18px; font-size: 14px; box-shadow: none; }
.lien-fleche { color: var(--ryze); text-decoration: none; font-size: 16px; font-weight: 500; display: inline-flex; gap: 8px; align-items: center; }
.lien-fleche span { transition: transform .35s var(--ease); }
.lien-fleche:hover span { transform: translateX(5px); }
:focus-visible { outline: 3px solid var(--ryze); outline-offset: 3px; }

/* ---- barre du haut : verre dépoli clair ---- */
.nav { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; gap: 28px; padding: 14px clamp(16px, 4vw, 44px); transition: background .4s, box-shadow .4s, padding .4s; }
.nav.solide { background: rgba(255, 255, 255, .78); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); box-shadow: 0 1px 0 rgba(11, 25, 51, .08); padding-top: 10px; padding-bottom: 10px; }
.nav-logo img { height: 30px; width: auto; }
.nav-liens { display: flex; gap: 28px; margin-left: auto; }
.nav-liens a { color: var(--gris2); text-decoration: none; font-size: 14px; transition: color .2s; }
.nav-liens a:hover { color: var(--ryze); }

/* ---- accroche : le produit au centre, comme une page de configuration ---- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; background: var(--fond); overflow: hidden; padding: clamp(96px, 12vh, 128px) clamp(16px, 4vw, 44px) clamp(40px, 7vh, 72px); }
.hero-contenu { position: relative; z-index: 1; max-width: 1180px; }
h1 { margin-top: 14px; font-size: clamp(40px, 5.4vw, 80px); font-weight: 300; line-height: 1; letter-spacing: -.045em; color: var(--encre); }
h1 .mot { display: inline-block; }
.anime h1 .mot { animation: monte 1.1s var(--ease) both; }
.anime h1 .mot:nth-child(2) { animation-delay: .12s; } .anime h1 .mot:nth-child(3) { animation-delay: .24s; } .anime h1 .mot:nth-child(4) { animation-delay: .36s; }
@keyframes monte { from { opacity: 0; transform: translateY(55%) rotate(3deg); } to { opacity: 1; transform: none; } }
.insecable { white-space: nowrap; }
h1 .fort { font-weight: 600; letter-spacing: -.05em; background: var(--degrade-texte); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .02em .08em 0; }
.hero-sous { margin: 22px auto 0; max-width: 520px; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; color: var(--gris); }
.hero-actions { margin-top: 30px; display: flex; gap: 28px; align-items: center; justify-content: center; flex-wrap: wrap; }
.hero-scene { position: relative; z-index: 0; width: min(760px, 100%); margin-top: clamp(4px, 1.5vw, 16px); animation: flotte 7s ease-in-out infinite; }
.hero-video { width: 100%; height: auto; transform-origin: 50% 40%; }
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.compte { position: relative; z-index: 2; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--gris); letter-spacing: .06em; }
.compte-cases { display: flex; gap: 10px; }
.compte-cases span { display: flex; flex-direction: column; align-items: center; min-width: 74px; padding: 10px 12px; border-radius: 16px; background: var(--blanc); box-shadow: 0 10px 30px -18px rgba(11, 25, 51, .35); font-size: 12px; }
.compte-cases b { font-size: 26px; font-weight: 500; color: var(--encre); letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* ---- chiffres ---- */
.chiffres { background: var(--blanc); display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: clamp(50px, 8vw, 110px) clamp(16px, 4vw, 44px); text-align: center; }
.chiffre strong { display: block; font-weight: 200; font-size: clamp(52px, 6.4vw, 88px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; background: var(--degrade-texte); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chiffre span { display: block; margin-top: 10px; font-size: clamp(13px, 1.5vw, 16px); color: var(--gris); }

/* ---- le film ---- */
.film { background: var(--fond); text-align: center; padding: clamp(60px, 9vw, 120px) clamp(16px, 4vw, 44px); }
.film-cadre { position: relative; max-width: 1080px; margin: 40px auto 0; border-radius: var(--rayon); overflow: hidden; box-shadow: 0 50px 100px -45px rgba(11, 25, 51, .45); }
.film-cadre video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--fond); }
.film-son { position: absolute; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .86); color: var(--encre); font: 500 14px Poppins, sans-serif; cursor: pointer; box-shadow: 0 10px 26px -12px rgba(11, 25, 51, .45); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); transition: transform .3s var(--ease), background .2s; }
.film-son:hover { transform: translateY(-2px); background: #fff; }
.film-son .onde { display: none; }
.film-son[aria-pressed="true"] .onde { display: inline; }
.film-son[aria-pressed="true"] .barre { display: none; }
@media (max-width: 600px) {
  .film-son { right: 10px; bottom: 10px; padding: 8px 14px; font-size: 13px; }
  /* film vertical : il tient dans l'écran, barre d'inscription comprise */
  .film-cadre { width: min(100%, calc(72svh * 9 / 16)); margin-top: 28px; }
  .film-cadre video { aspect-ratio: 9 / 16; }
}

/* ---- manifeste : le texte s'allume au défilement ---- */
.manifeste { background: var(--blanc); padding: clamp(70px, 11vw, 160px) clamp(16px, 4vw, 44px); }
.manifeste-texte { max-width: 1040px; margin: 0 auto; font-size: clamp(22px, 3vw, 40px); font-weight: 500; line-height: 1.22; letter-spacing: -.015em; color: var(--encre); }
.manifeste-texte .m { color: rgba(11, 25, 51, .14); transition: color .1s; }

/* ---- blocs ---- */
.bloc { padding: clamp(70px, 10vw, 140px) clamp(16px, 4vw, 44px); max-width: calc(var(--large) + 88px); margin: 0 auto; }
.bloc-gris { max-width: none; background: var(--fond); }
.bloc-gris > * { max-width: var(--large); margin-left: auto; margin-right: auto; }

/* ---- modules : tuiles d'option ---- */
.modules { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.module { position: relative; background: var(--fond); border-radius: var(--rayon); padding: 32px 30px 30px; display: flex; flex-direction: column; overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.module::after { content: ""; position: absolute; inset: auto -30% -60% auto; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(17, 128, 190, .16), transparent 70%); transition: transform .6s var(--ease); }
.module:hover { transform: translateY(-6px); box-shadow: var(--ombre); }
.module:hover::after { transform: scale(1.5); }
.module .num { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ryze); }
.module .dates { margin-top: 10px; font-size: 28px; font-weight: 600; line-height: 1.12; }
.module .themes { margin: 14px 0 0; padding: 0; list-style: none; font-size: 16px; font-weight: 500; }
.module .themes li + li { margin-top: 4px; }
.module h4 { margin: 24px 0 8px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.module .ateliers { margin: 0; padding: 0; list-style: none; font-size: 14.5px; color: #4a5068; }
.module .ateliers li { padding-left: 18px; position: relative; }
.module .ateliers li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--degrade); }
.module .ateliers li + li { margin-top: 6px; }
.module .bas { margin-top: auto; padding-top: 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.module .prix { font-size: 32px; font-weight: 600; line-height: 1; }
.module .prix small { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 400; color: var(--gris); }
.module .choisir { font-size: 14px; font-weight: 500; color: var(--ryze); text-decoration: none; }
.module .choisir:hover { text-decoration: underline; }

/* ---- conférenciers ---- */
.experts-bloc { background: var(--fond); padding: clamp(70px, 10vw, 140px) 0; overflow: hidden; }
.experts-tete { max-width: calc(var(--large) + 88px); margin: 0 auto; padding: 0 clamp(16px, 4vw, 44px); display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.fleches { display: flex; gap: 10px; }
.fleche { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--blanc); color: var(--encre); font-size: 20px; cursor: pointer; box-shadow: 0 6px 18px -8px rgba(11, 25, 51, .35); transition: transform .3s var(--ease), color .2s; }
.fleche:hover { transform: scale(1.06); color: var(--ryze); }
.bande { margin-top: 40px; scroll-padding-inline: max(16px, calc((100vw - var(--large)) / 2)); display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px max(16px, calc((100vw - var(--large)) / 2)) 24px; scrollbar-width: none; }
.bande::-webkit-scrollbar { display: none; }
.carte { flex: 0 0 clamp(240px, 24vw, 300px); scroll-snap-align: start; background: var(--blanc); border: 0; border-radius: var(--rayon); padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.carte:hover { transform: translateY(-8px); box-shadow: var(--ombre); }
.carte .photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #dde3ea; }
.carte .photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform .8s var(--ease); }
.carte:hover .photo img { transform: scale(1.08); }
.carte .ville { position: absolute; left: 14px; bottom: 14px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .82); color: var(--encre); font-size: 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.carte .txt { padding: 18px 20px 22px; }
.carte .nom { display: block; font-size: 18px; font-weight: 600; line-height: 1.2; }
.carte .titre { display: block; margin-top: 4px; font-size: 13.5px; color: var(--gris); }
.carte .plus { display: block; margin-top: 12px; font-size: 13.5px; font-weight: 500; color: var(--ryze); }

/* ---- fiche conférencier (fenêtre) ---- */
.fiche { width: min(880px, calc(100vw - 32px)); max-height: calc(100svh - 40px); border: 0; border-radius: var(--rayon); padding: 0; overflow: auto; color: var(--encre); box-shadow: 0 40px 100px -30px rgba(11, 25, 51, .45); }
.fiche::backdrop { background: rgba(245, 245, 247, .7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.fiche-grille { display: grid; grid-template-columns: 300px 1fr; }
.fiche-grille img { width: 100%; height: 100%; object-fit: cover; min-height: 360px; }
.fiche-grille > div { padding: 34px 36px 36px; }
.fiche-axe { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ryze); }
.fiche h3 { margin-top: 8px; font-size: 28px; font-weight: 600; line-height: 1.15; }
.fiche-titre { margin-top: 4px; color: var(--gris); }
.fiche ul { margin: 18px 0 0; padding-left: 18px; font-size: 14.5px; color: var(--gris2); }
.fiche li + li { margin-top: 7px; }
.fiche-apport { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--glacier); font-size: 14.5px; }
.fermer { position: sticky; float: right; top: 12px; margin: 12px 12px 0 0; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--fond); color: var(--encre); font-size: 24px; line-height: 1; cursor: pointer; z-index: 2; }

/* ---- programme : navigation collée à gauche ---- */
.prog { margin-top: 44px; display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: start; }
.prog-nav { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 6px; }
.prog-nav button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border: 0; background: none; padding: 12px 16px; border-radius: 16px; font: inherit; color: var(--gris); cursor: pointer; transition: background .3s, color .3s; }
.prog-nav button b { font-size: 15px; font-weight: 600; color: var(--encre); }
.prog-nav button small { font-size: 12.5px; line-height: 1.35; }
.prog-nav button:hover { background: var(--fond); }
.prog-nav button[aria-selected="true"] { background: var(--degrade); color: rgba(255, 255, 255, .78); box-shadow: 0 12px 26px -14px rgba(17, 128, 190, .7); }
.prog-nav button[aria-selected="true"] b { color: var(--blanc); }
.journee h3 { font-size: clamp(24px, 3vw, 34px); font-weight: 600; line-height: 1.15; }
.journee .meta { margin-top: 6px; color: var(--ryze); font-size: 14px; font-weight: 500; }
.demi { margin-top: 30px; }
.demi h4 { margin: 0 0 4px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.session { display: grid; grid-template-columns: 118px 1fr; gap: 18px; padding: 15px 0; border-top: 1px solid var(--filet); font-size: 15.5px; }
.session .heure { color: var(--gris); font-variant-numeric: tabular-nums; font-size: 14.5px; padding-top: 1px; }
.session.atelier { background: linear-gradient(90deg, var(--glacier), transparent 75%); border-radius: 0 12px 12px 0; }
.etiquette { display: inline-block; margin-right: 8px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; vertical-align: 1px; }
.etiquette.atelier { background: var(--degrade); color: var(--blanc); }
.etiquette.invite { background: var(--fond); color: var(--ryze); box-shadow: inset 0 0 0 1px var(--bord); }

/* ---- infos pratiques ---- */
.infos { margin-top: 44px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.infos > div { background: var(--blanc); border-radius: var(--rayon); padding: 26px 24px 28px; }
.infos h3 { font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ryze); margin-bottom: 10px; }
.infos p + p { margin-top: 8px; }

/* ---- inscription : le configurateur ---- */
.inscription { position: relative; background: var(--blanc); padding: clamp(70px, 10vw, 140px) clamp(16px, 4vw, 44px); text-align: center; overflow: hidden; }
.inscription::before { content: ""; position: absolute; width: 900px; height: 900px; left: 50%; top: -480px; margin-left: -450px; border-radius: 50%; background: radial-gradient(circle, rgba(17, 128, 190, .10), transparent 65%); pointer-events: none; }
.inscription > * { position: relative; }
.inscription form { max-width: 740px; margin: 44px auto 0; text-align: left; padding: clamp(22px, 4vw, 40px); border-radius: var(--rayon); background: var(--fond); }
fieldset { border: 0; padding: 0; margin: 0; }
legend, label { font-size: 13.5px; color: var(--gris2); }
legend { padding: 0; margin-bottom: 10px; font-weight: 500; }
#cases-modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.case-module { position: relative; display: block; cursor: pointer; }
.case-module input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.case-module span { display: block; height: 100%; border: 1.5px solid var(--bord); border-radius: 16px; padding: 14px 16px; background: var(--blanc); color: var(--encre); font-size: 15px; transition: border-color .2s, box-shadow .2s, transform .3s var(--ease); }
.case-module span b { display: block; font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin-bottom: 4px; }
.case-module:hover span { border-color: #a9b4c6; }
.case-module input:checked + span { border-color: var(--ryze); box-shadow: 0 0 0 1px var(--ryze), 0 14px 30px -18px rgba(17, 128, 190, .6); transform: translateY(-2px); }
.case-module input:checked + span b { color: var(--ryze); }
.case-module input:focus-visible + span { outline: 3px solid var(--ryze); outline-offset: 2px; }
.total { margin-top: 12px; min-height: 24px; font-size: 16px; font-weight: 600; color: var(--ryze); }
.grille-champs { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grille-champs .large { grid-column: 1 / -1; }
label { display: block; }
input:not([type=checkbox]), select { display: block; width: 100%; margin-top: 6px; padding: 13px 14px; border-radius: 12px; border: 1.5px solid var(--bord); background: var(--blanc); color: var(--encre); font: 400 16px Poppins, sans-serif; transition: border-color .2s, box-shadow .2s; }
input:focus, select:focus { outline: none; border-color: var(--ryze); box-shadow: 0 0 0 4px rgba(17, 128, 190, .14); }
.erreur input:not([type=checkbox]), .erreur select { border-color: #e81b3a; }
.consentement { margin-top: 18px; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--gris2); }
.consentement input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--ryze); flex: none; }
.envoyer { margin-top: 24px; width: 100%; font-size: 17px; padding: 16px; }
.envoyer[disabled] { opacity: .6; cursor: wait; }
.message { margin-top: 14px; min-height: 24px; text-align: center; font-size: 15.5px; }
.message.ok { color: #1a7f45; } .message.ko { color: #e81b3a; }

/* ---- pied et barre mobile ---- */
.pied { background: var(--fond); color: var(--gris); text-align: center; padding: 48px 20px 56px; font-size: 14px; border-top: 1px solid var(--filet); }
.pied img { height: 32px; width: auto; margin: 0 auto 16px; }
.pied .petit { margin-top: 6px; font-size: 12.5px; color: #8a8fa0; }
.barre-mobile { display: none; }

/* ---- zones à toucher d'au moins 44 px (confort au doigt) ---- */
.lien-fleche { min-height: 44px; }
.module .choisir { display: inline-flex; align-items: center; min-height: 44px; }
.bouton.petit { min-height: 44px; }

/* ---- apparitions (état de départ posé par JS seulement si les animations sont actives) ---- */
.anime .revele, .anime .carte { opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease), transform .9s var(--ease), box-shadow .5s var(--ease); }
.anime .carte { transform: translateX(80px); }
.anime .revele.vu, .anime .carte.vu { opacity: 1; transform: none; }
.anime .carte.vu:hover { transform: translateY(-8px); }

/* ---- tablette et téléphone ---- */
@media (min-width: 760px) { h1 { white-space: nowrap; } }
@media (max-width: 960px) {
  .nav-liens { display: none; } .nav .bouton { margin-left: auto; }
  .modules { grid-template-columns: 1fr; }
  .infos { grid-template-columns: 1fr 1fr; }
  .prog { grid-template-columns: 1fr; gap: 24px; }
  /* onglets des jours : collés sous l'en-tête pendant toute la lecture du programme */
  .prog-nav { position: sticky; top: 62px; z-index: 5; flex-direction: row; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * clamp(16px, 4vw, 44px)); padding: 8px clamp(16px, 4vw, 44px); background: rgba(255, 255, 255, .95); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); box-shadow: 0 1px 0 rgba(11, 25, 51, .06); }
  .prog-nav::-webkit-scrollbar { display: none; }
  #journee { scroll-margin-top: 140px; }
  .prog-nav button { flex: 0 0 auto; }
  .prog-nav button small { display: none; }
  .fiche-grille { grid-template-columns: 1fr; }
  .fiche-grille img { min-height: 0; aspect-ratio: 1; max-height: 320px; }
}
@media (max-width: 600px) {
  .hero { min-height: auto; }
  .chiffres { grid-template-columns: repeat(2, 1fr); gap: 32px 12px; }
  .infos, #cases-modules, .grille-champs { grid-template-columns: 1fr; }
  .session { grid-template-columns: 1fr; gap: 2px; }
  .experts-tete .fleches { display: none; }
  .compte-cases span { min-width: 64px; }
  .barre-mobile { position: fixed; z-index: 40; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, .86); color: var(--encre); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); box-shadow: 0 12px 34px -12px rgba(11, 25, 51, .35); transform: translateY(140%); transition: transform .5s var(--ease); }
  .barre-mobile.visible { transform: none; }
  .barre-mobile b { display: block; font-size: 14px; font-weight: 600; }
  .barre-mobile span { display: block; font-size: 12px; color: var(--gris); }
  .pied { padding-bottom: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.pied a, .consentement a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }