/* ===========================================================
   Site Ugo Mazier · styles partagés
   =========================================================== */
:root {
    -webkit-font-smoothing: antialiased;
    --header-h: 4rem; /* h-16 */
}
@media (min-width: 768px) {
    :root { --header-h: 5rem; } /* h-20 */
}
html { overflow-x: clip; }
body {
    font-family: 'Inter', sans-serif;
    background-color: #FAF8F3;
    overflow-x: clip;
    /* Espace sous la nav fixed pour que le contenu ne passe pas dessous */
    padding-top: var(--header-h);
}
.font-serif { font-family: 'Fraunces', serif; }

/* Ordinal « 1ᵉʳ » : empêche le sup de gonfler la hauteur de ligne / de se détacher sur mobile */
sup { font-size: 0.6em; line-height: 0; vertical-align: super; }

/* Halo dégradé du hero */
.hero-glow {
    background:
        radial-gradient(60% 50% at 50% 0%, rgba(41,82,204,0.10) 0%, rgba(41,82,204,0) 70%),
        radial-gradient(40% 40% at 85% 20%, rgba(197,160,89,0.10) 0%, rgba(197,160,89,0) 70%);
}
/* Papier quadrillé (univers cahier de maths) */
.grid-paper {
    background-image:
        linear-gradient(rgba(27,58,150,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27,58,150,0.05) 1px, transparent 1px);
    background-size: 28px 28px;
}
.card-hover { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.card-hover:hover { transform: translateY(-4px); }

@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.floaty { animation: floaty 5s ease-in-out infinite; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

.pdf-row { transition: background-color .2s, border-color .2s, transform .15s; }
.pdf-row:active { transform: scale(.99); }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Nav active */
.nav-link.active { color: #1b3a96; font-weight: 700; }

/* Header fixed (pas sticky) : overflow-x sur body cassait sticky.
   Desktop = toujours à l'écran. Mobile = hide/show au scroll. */
#site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
#header-inner {
    background: rgba(250, 248, 243, 0.60);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(15, 29, 77, 0.06);
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
#site-header.is-scrolled #header-inner {
    background: rgba(250, 248, 243, 0.78);
    border-bottom-color: rgba(15, 29, 77, 0.1);
    box-shadow: 0 8px 24px -16px rgba(23, 43, 107, 0.22);
}
/* Masquage au scroll : mobile uniquement */
@media (max-width: 767px) {
    #site-header.header-hidden { transform: translateY(-100%); }
    /* Sessions « Arrive bientôt » masquées sur mobile (conservées sur PC) */
    .session-coming-soon { display: none !important; }
}
@media (min-width: 768px) {
    #site-header.header-hidden { transform: none; }
}

.font-serif .amp, nav .amp, footer .amp { font-family: 'Inter', sans-serif; font-weight: 600; }

/*
  copy-short / copy-long : on ne fait que CACHER la mauvaise version
  (jamais forcer un display), sinon conflits avec les utilitaires Tailwind.
*/
@media (max-width: 767px) {
    .copy-long { display: none !important; }
}
@media (min-width: 768px) {
    .copy-short { display: none !important; }
}
ul.copy-short, ul.copy-long { list-style: none; padding: 0; margin: 0; }

/*
  Footer SEO : même contenu, deux rendus.
  Mobile  = une entrée par ligne (dans les <details> dépliants).
  Desktop = tout sur une ligne, séparé par des « · » générés en CSS.
*/
.footer-list { list-style: none; padding: 0; }
@media (max-width: 767px) {
    .footer-list > li + li { margin-top: .25rem; }
}
@media (min-width: 768px) {
    .footer-list > li { display: inline; }
    .footer-list > li:not(:last-child)::after { content: ' · '; }
}

/*
  Hero H1 : sur desktop la ligne longue tient sur UNE seule ligne
  (md:whitespace-nowrap) et fait ~24em de large, donc plus que le
  max-w-5xl du conteneur. On sort le titre de cette contrainte
  (full-bleed) pour qu'il se centre sur le viewport, et la taille
  suit la largeur d'écran (plafond 3.75rem = text-6xl) pour ne
  jamais déborder. !important : cf. copy-short / copy-long.
*/
@media (min-width: 768px) {
    .hero-title {
        font-size: min(3.75rem, 3.6vw) !important;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
}

.acc-body { display: none; }
.acc-item.open .acc-body { display: block; }
.acc-item.open .acc-arrow { transform: rotate(180deg); }
.acc-arrow { transition: transform .3s; }

.error-message { color: #dc2626; font-size: 0.875rem; margin-top: 0.75rem; display: none; }
.error-message.show { display: block; }