/** * 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); } .container-on-dark a:not(.btn):not([class*="izi-social"]) { 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(--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(--color-primary); background: #ffffff; } .container-on-dark .btn-primary:hover, .container-on-dark .btn-primary:focus-visible { background: var(--primitive-gray-100); } /* ============================================================ APPARITION AU DÉFILEMENT ============================================================ */ /* L'animation n'est armée que si le script a pris la main (classe posée sur ). 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. */ .izi-banner--gradient { background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-secondary) 100%); color: #ffffff; } .izi-banner--solid { background: var(--color-primary); color: #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(--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 { 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; }