/**
 * Rythme et mise en scène des sections
 *
 * Deux manques rendaient les pages plates : toutes les sections sortaient sur
 * fond transparent, et rien n'accompagnait le défilement. Ce fichier traite les
 * deux, plus la lisibilité du texte sur les sections à fond sombre.
 */

/* ============================================================
   TEXTE SUR FOND SOMBRE
   ============================================================ */

/* Posée par containers/container.html.twig quand la section reçoit un fond
   sombre ou une image : sans cela le corps de texte, qui hérite d'une couleur
   foncée, devient illisible. */
.izibrick-container.container-on-dark {
    color: var(--primitive-gray-100);
}

.container-on-dark h1,
.container-on-dark h2,
.container-on-dark h3,
.container-on-dark h4,
.container-on-dark h5,
.container-on-dark h6,
.container-on-dark strong {
    color: #ffffff;
}

.container-on-dark p,
.container-on-dark li,
.container-on-dark .wysiwyg-content {
    color: var(--primitive-gray-200);
}

/* Les liens de texte seulement : un lien habillé en bouton (« card-button… »,
   « …__cta », « …__button ») porte son propre fond, souvent blanc — repeint en
   blanc, son libellé disparaissait (mesuré à 1:1 sur les cartes). */
.container-on-dark a:not(.btn):not([class*="izi-social"]):not([class*="button"]):not([class*="cta"]) {
    color: #ffffff;
    text-decoration-color: rgba(255, 255, 255, 0.5);
}

/* Les cartes gardent leur fond clair : on ne les repeint pas, on rétablit
   seulement la couleur de texte à l'intérieur. */
.container-on-dark .card,
.container-on-dark [class*="-card"] {
    color: var(--color-text);
}

/* Les boutons secondaires et fantômes tirent leur couleur de --color-primary.
   Posés sur une section qui utilise cette même couleur en fond, ils devenaient
   littéralement invisibles — texte et fond au même code. Sur fond sombre ils
   basculent donc en contour clair. */
.container-on-dark .btn-secondary,
.container-on-dark .btn-ghost {
    color: #ffffff;
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.65);
}

.container-on-dark .btn-secondary:hover,
.container-on-dark .btn-ghost:hover,
.container-on-dark .btn-secondary:focus-visible,
.container-on-dark .btn-ghost:focus-visible {
    color: var(--primary-text, var(--color-primary));
    background-color: #ffffff;
    border-color: #ffffff;
}

/* Le bouton plein reprend la logique inverse : fond clair, texte coloré. */
.container-on-dark .btn-primary {
    color: var(--primary-text, var(--color-primary));
    background: #ffffff;
}

.container-on-dark .btn-primary:hover,
.container-on-dark .btn-primary:focus-visible {
    background: var(--primitive-gray-100);
    color: var(--primary-text, var(--color-primary));
}

/* ============================================================
   BANDE À LA COULEUR DU SITE
   ============================================================ */

/* Posée en plus de `container-on-dark` quand le fond du bloc est la couleur
   du site (containers/container.html.twig). Le gabarit ne connaît que le nom
   de la variable : la bande passait pour sombre même quand le site est jaune
   pâle ou citron, et ses textes et boutons contour viraient au blanc sur
   clair. On reprend le texte calculé pour la couleur, --primary-contrast
   (blanc sur une couleur foncée, noir sur une claire). Les sélecteurs sont un
   cran plus spécifiques que ceux de `container-on-dark`, qu'ils remplacent. */
.izibrick-container.container-on-primary {
    color: var(--primary-contrast, #ffffff);
}

.container-on-primary :is(h1, h2, h3, h4, h5, h6, strong, p, li, .wysiwyg-content) {
    color: var(--primary-contrast, #ffffff);
}

.izibrick-container.container-on-primary a:not(.btn):not([class*="izi-social"]):not([class*="button"]):not([class*="cta"]) {
    color: var(--primary-contrast, #ffffff);
    text-decoration-color: color-mix(in srgb, var(--primary-contrast, #ffffff) 50%, transparent);
}

.izibrick-container.container-on-primary :is(.btn-secondary, .btn-ghost) {
    color: var(--primary-contrast, #ffffff);
    border-color: color-mix(in srgb, var(--primary-contrast, #ffffff) 65%, transparent);
}

/* Au survol, le bouton s'emplit du texte de la bande et prend sa couleur :
   le noir et le blanc ont été choisis pour se lire sur elle, donc l'inverse aussi. */
.izibrick-container.container-on-primary :is(.btn-secondary, .btn-ghost):is(:hover, :focus-visible) {
    color: var(--primary-color, var(--color-primary));
    background-color: var(--primary-contrast, #ffffff);
    border-color: var(--primary-contrast, #ffffff);
}

/* ============================================================
   APPARITION AU DÉFILEMENT
   ============================================================ */

/* L'animation n'est armée que si le script a pris la main (classe posée sur
   <html>). Sans JavaScript, ou si le script échoue, le contenu reste visible :
   on n'accepte pas de masquer du contenu derrière une animation. */
.js-reveal .izi-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--transition-duration-slow) var(--transition-easing-out),
        transform var(--transition-duration-slow) var(--transition-easing-out);
    will-change: opacity, transform;
}

.js-reveal .izi-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Décalage léger entre colonnes voisines : l'entrée paraît vivante sans virer
   au diaporama. */
.js-reveal .izi-reveal[data-reveal-delay="1"] { transition-delay: 90ms; }
.js-reveal .izi-reveal[data-reveal-delay="2"] { transition-delay: 180ms; }
.js-reveal .izi-reveal[data-reveal-delay="3"] { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
    .js-reveal .izi-reveal,
    .js-reveal .izi-reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================================
   BANDEAU DE PAGE
   ============================================================ */

/* Remplace l'ancien héro photo des pages internes. Une bande de 150 px découpait
   une photo panoramique en une tranche illisible ; ici la couleur du site porte
   le bandeau, et la place revient au titre et au fil d'Ariane. */
.izi-banner {
    position: relative;
    display: flex;
    align-items: center;
    padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
    overflow: hidden;
}

.izi-banner__inner {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.izi-banner--compact { padding-block: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
.izi-banner--large   { padding-block: clamp(3rem, 2rem + 5vw, 5.5rem); }

.izi-banner--align-center { text-align: center; }
.izi-banner--align-center .izi-banner__breadcrumb ol { justify-content: center; }

/* ─── Déclinaisons ─── */

/* Dégradé de la couleur du site vers sa version foncée. Les deux viennent des
   tokens : le bandeau suit la charte sans valeur en dur. */
/* Le texte est celui calculé pour la couleur du site (--primary-contrast), et
   le dégradé finit sur --primary-gradient-end, la secondaire quand elle porte
   ce même texte : en blanc fixe, un bandeau jaune pâle était illisible. */
.izi-banner--gradient {
    background: linear-gradient(120deg, var(--color-primary) 0%, var(--primary-gradient-end, var(--color-secondary)) 100%);
    color: var(--primary-contrast, #ffffff);
}

.izi-banner--solid {
    background: var(--color-primary);
    color: var(--primary-contrast, #ffffff);
}

.izi-banner--surface {
    background: var(--color-surface);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}

/* Nuance discrète qui évite l'aplat parfaitement plat, sans image à charger. */
.izi-banner--gradient::after,
.izi-banner--solid::after {
    content: "";
    position: absolute;
    inset-block: -60%;
    inset-inline-end: -10%;
    width: 45%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, transparent 65%);
    pointer-events: none;
}

/* ─── Contenu ─── */
.izi-banner__breadcrumb {
    margin-bottom: 0.75rem;
    font-size: var(--text-sm);
}

.izi-banner__breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.izi-banner__breadcrumb li + li::before {
    content: "›";
    margin-right: 0.5rem;
    opacity: 0.6;
}

.izi-banner__breadcrumb a {
    color: inherit;
    text-decoration: none;
    opacity: 0.85;
}

.izi-banner__breadcrumb a:hover,
.izi-banner__breadcrumb a:focus-visible {
    opacity: 1;
    text-decoration: underline;
}

.izi-banner__breadcrumb li[aria-current] {
    opacity: 0.75;
}

.izi-banner__title {
    margin: 0;
    font-size: var(--heading-h1);
    line-height: var(--leading-tight);
    color: inherit;
}

.izi-banner__subtitle {
    max-width: var(--measure);
    margin: 0.625rem 0 0;
    font-size: var(--text-lead);
    line-height: var(--leading-normal);
    opacity: 0.9;
}

.izi-banner--align-center .izi-banner__subtitle {
    margin-inline: auto;
}

/* Le bandeau touche l'en-tête : on annule le rythme vertical du conteneur qui
   le porte, sinon une bande blanche s'intercale. */
.izibrick-container:has(> .container-inner .izi-banner) > .container-inner {
    padding-block: 0;
}

/* ============================================================
   TITRES ÉDITORIALISÉS
   ============================================================ */

/* Sur-titre court au-dessus d'un titre de section. C'est le signal le plus
   économique pour qu'une page cesse de ressembler à un document : il annonce la
   section et pose un repère coloré. */
.izi-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--primary-text, var(--color-primary));
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

.izi-eyebrow::before {
    content: "";
    width: 1.75rem;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.container-on-dark .izi-eyebrow,
.container-on-dark .section-eyebrow {
    color: #ffffff;
    opacity: 0.85;
}

/* Chapô : le paragraphe d'introduction d'une section, plus grand que le corps
   de texte et borné en largeur pour rester confortable à lire. */
.izi-lead {
    max-width: var(--measure);
    color: var(--color-text-light);
    font-size: var(--text-lead);
    line-height: var(--leading-normal);
}

.izi-section-heading {
    margin-bottom: var(--section-gap);
}

/* Les titres héritent d'une marge haute du CSS général : elle desserre le lien
   entre le sur-titre et le titre, qui doivent se lire comme un seul bloc. */
.izi-section-heading > h1,
.izi-section-heading > h2,
.izi-section-heading > h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.izi-section-heading > .izi-lead:last-child {
    margin-bottom: 0;
}

.izi-section-heading--center {
    text-align: center;
}

.izi-section-heading--center .izi-lead {
    margin-inline: auto;
}

.izi-section-heading--center .izi-eyebrow {
    justify-content: center;
}