/*
Theme Name: NC Portal
Description: Canevas "portail actualités" — bandeau + nav catégories, étiquettes colorées par rubrique, grille dense de cartes. Un des canevas de la fabrique de sites NC ECOM.
Author: NC ECOM
Version: 1.0
Text Domain: nc-portal
*/

/* ==========================================================================
   Variables (repli par défaut ; surchargées par site via functions.php)
   ========================================================================== */
:root {
    --color-primary: #D32B2B;
    --color-primary-hover: #B32222;
    --color-heading: #26262A;
    --color-text: #3F3F42;
    --color-background: #F4F4F2;
    --color-secondary-background: #FFFFFF;
    --color-border: #26262A;
    --color-secondary-border: #E0DFDB;
    --color-accent: #3E7CB1;
    --font-heading: 'Barlow Condensed', sans-serif;
    --font-body: 'PT Sans', sans-serif;

    --container-width: 1200px;
    --radius: 4px;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
    --shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.12);

    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 3rem;
    --space-xl: 4rem;

    --bp-mobile: 900px;

    /* Rotation des étiquettes de catégorie : la même couleur pour la même
       catégorie partout sur le site (nav, cartes, sidebar) — un vrai repère
       d'information, pas une décoration. 5 teintes qui restent lisibles en
       blanc sur texte dessus. */
    --tag-1: #E36F9E;
    --tag-2: #C99A2E;
    --tag-3: #3E7CB1;
    --tag-4: #4C8C6B;
    --tag-5: #7B5EA7;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-background);
    line-height: 1.6;
    font-size: 1rem;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-heading);
    font-weight: 600;
    line-height: 1.1;
    margin: 0 0 0.6rem;
    letter-spacing: -0.01em;
}
/* Display condensé, plus dense qu'un serif éditorial classique — la
   personnalité "presse" vient de la compression du type, pas de sa taille.
   Seul le vrai titre principal (H1 : gros titre à la une, titre d'article,
   titre de page) reste en 700 — tout le reste (nav, cartes, boutons,
   étiquettes) est en 600 pour éviter l'effet "tout en gras" qui aplatit
   la hiérarchie au lieu de la révéler. */
h1 { font-size: clamp(2.4rem, 5.5vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.3rem); }
h3 { font-size: 1.3rem; line-height: 1.25; }
p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

/* ==========================================================================
   Étiquette de catégorie — signature du canevas
   ========================================================================== */
.tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    border-radius: 2px;
}
.tag--1 { background: var(--tag-1); }
.tag--2 { background: var(--tag-2); }
.tag--3 { background: var(--tag-3); }
.tag--4 { background: var(--tag-4); }
.tag--5 { background: var(--tag-5); }

/* ==========================================================================
   Boutons
   ========================================================================== */
.btn {
    display: inline-block;
    padding: 0.8rem 1.8rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); text-decoration: none; }
.btn--accent { background: var(--color-accent); color: #fff; }
.btn--accent:hover { color: #fff; }
.btn--light {
    background: color-mix(in srgb, var(--color-primary) 20%, #fff);
    color: var(--color-heading);
}
.btn--light:hover {
    color: var(--color-heading);
    background: color-mix(in srgb, var(--color-primary) 32%, #fff);
}

/* ==========================================================================
   En-tête — bandeau + nav catégories
   ========================================================================== */
.site-header {
    background: #fff;
    border-bottom: 3px solid var(--color-primary);
    position: sticky;
    top: 0;
    z-index: 100;
}
/* Logo + menu + recherche tiennent sur UNE seule ligne blanche (pas de
   deuxième bandeau sombre en dessous) : le menu absorbe l'espace restant
   entre le logo et le bloc recherche via flex:1, au lieu d'être relégué à
   une barre séparée. */
.site-header__masthead {
    padding: 0.9rem 1.5rem;
    max-width: var(--container-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}
.site-branding {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    flex: 0 0 auto;
}
.site-branding img { max-height: 44px; width: auto; }
.site-branding__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: -0.01em;
    color: var(--color-heading);
    white-space: nowrap;
}

.site-header__tools { flex: 0 0 auto; display: flex; align-items: center; gap: 0.25rem; }
.header-search { position: relative; }
.header-search__toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-heading);
    padding: 0.4rem;
    display: flex;
    align-items: center;
}
.header-search__toggle svg { width: 20px; height: 20px; }
.header-search__form {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: #fff;
    box-shadow: var(--shadow-hover);
    border-radius: var(--radius);
    padding: 0.75rem;
    width: 280px;
    z-index: 10;
}
.header-search__form.is-open { display: flex; gap: 0.5rem; }
.header-search__form input[type="search"] {
    flex: 1;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--color-secondary-border);
    border-radius: 4px;
    font-family: inherit;
}
.header-search__form button {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0 1rem;
    cursor: pointer;
}

/* Bandeau d'actualités (front-page.php uniquement) : les tout derniers
   titres défilent en continu, comme un vrai bandeau d'actu — donne tout de
   suite une impression "ça bouge" avant même d'arriver au contenu. Piste
   dupliquée deux fois + translateX(-50%) en boucle = défilement continu
   sans à-coup au reset (pas de scrollbar : overflow:hidden partout, le
   déroulement remplace l'ancien overflow-x:auto qui affichait la vraie
   barre de défilement du navigateur — moche et pas du tout "bandeau
   d'actu"). Pause au survol pour laisser le temps de cliquer/lire. */
.news-ticker {
    background: var(--color-primary);
    color: #fff;
}
.news-ticker__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1.5rem;
    overflow: hidden;
}
.news-ticker__label {
    flex: 0 0 auto;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.25rem 0.6rem;
    border-radius: 2px;
}
.news-ticker__viewport {
    flex: 1 1 auto;
    overflow: hidden;
}
.news-ticker__track {
    display: flex;
    width: max-content;
    animation: nc-ticker-scroll var(--nc-ticker-duration, 30s) linear infinite;
}
.news-ticker__inner:hover .news-ticker__track { animation-play-state: paused; }
.news-ticker ul {
    display: flex;
    flex: 0 0 auto;
    gap: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0 1.75rem 0 0;
    white-space: nowrap;
}
.news-ticker a { color: #fff; text-decoration: none; font-size: 0.9rem; opacity: 0.92; }
.news-ticker a:hover { text-decoration: underline; opacity: 1; }

@keyframes nc-ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .news-ticker__track { animation: none; }
    .news-ticker__track ul[aria-hidden="true"] { display: none; }
    .news-ticker__viewport { overflow-x: auto; scrollbar-width: none; }
    .news-ticker__viewport::-webkit-scrollbar { display: none; }
}

/* Menu : vit directement dans la ligne blanche du header (plus de bandeau
   sombre séparé). flex:1 pour absorber l'espace entre logo et recherche ;
   couleur de texte sombre au repos, couleur DE LA RUBRIQUE elle-même (pas
   blanc) au survol/actif — même logique de repère que les étiquettes,
   adaptée à un fond clair. */
.primary-nav { flex: 1 1 auto; min-width: 0; }
.primary-nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
}
.primary-nav a {
    display: block;
    color: var(--color-heading);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap;
    padding: 0.6rem 0.9rem;
    border-bottom: 3px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.primary-nav li:nth-child(5n+1) a:hover { color: var(--tag-1); border-color: var(--tag-1); }
.primary-nav li:nth-child(5n+2) a:hover { color: var(--tag-2); border-color: var(--tag-2); }
.primary-nav li:nth-child(5n+3) a:hover { color: var(--tag-3); border-color: var(--tag-3); }
.primary-nav li:nth-child(5n+4) a:hover { color: var(--tag-4); border-color: var(--tag-4); }
.primary-nav li:nth-child(5n+5) a:hover { color: var(--tag-5); border-color: var(--tag-5); }

.mobile-nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.4rem; }
.mobile-nav-toggle svg { width: 26px; height: 26px; color: var(--color-heading); }
.primary-nav__close { display: none; }

@media (max-width: 900px) {
    .primary-nav {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 300;
        background: var(--color-heading);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }
    .primary-nav.is-open { display: flex; }
    .primary-nav__close {
        display: flex;
        position: absolute;
        top: 1.25rem;
        right: 1.25rem;
        background: none;
        border: none;
        color: #fff;
        padding: 0.5rem;
    }
    .primary-nav__close svg { width: 26px; height: 26px; }
    .primary-nav ul { flex-direction: column; gap: 0.25rem; padding: 0; text-align: center; overflow: visible; }
    .primary-nav a { font-size: 1.5rem; padding: 0.85rem 0; color: #fff; }
    .primary-nav li:nth-child(5n+1) a:hover, .primary-nav li:nth-child(5n+2) a:hover,
    .primary-nav li:nth-child(5n+3) a:hover, .primary-nav li:nth-child(5n+4) a:hover,
    .primary-nav li:nth-child(5n+5) a:hover { color: #fff; }
    .site-header__masthead { flex-wrap: nowrap; gap: 0.75rem; padding: 0.85rem 1rem; }
    .site-branding img { max-height: 34px; }
    .site-branding__title { font-size: 1.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-nav-toggle { display: flex; }
    body.nav-is-open { overflow: hidden; }
}

/* ==========================================================================
   Sections — bandes plates séparées par un filet, pas de diagonale (le
   ton "presse" appelle des ruptures nettes, pas des formes décoratives).
   ========================================================================== */
.section { padding: var(--space-xl) 0; border-top: 1px solid var(--color-secondary-border); }
main > .section:first-child { border-top: none; }
.section-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    padding-bottom: 0.6rem;
    border-bottom: 4px solid var(--color-primary);
    display: inline-block;
    margin-bottom: 2rem;
}
main > .section.page-title { padding-bottom: var(--space-md); }

.hero {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    color: #fff;
    background-color: var(--color-heading);
    background-size: cover;
    background-position: center;
}
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.15) 100%);
}
/* max-width:var(--container-width) + margin:auto : aligne la boîte comme
   .container (même bug corrigé sur un autre canevas — texte "giga à
   gauche" sinon). Largeur de lecture bornée sur les enfants, pas la boîte. */
.hero__content { position: relative; z-index: 1; max-width: var(--container-width); margin: 0 auto; padding: var(--space-lg) 1.5rem; }
.hero__content h1, .hero__content p { max-width: 620px; }
.hero h1 { color: #fff; font-size: clamp(2.2rem, 5.5vw, 3.4rem); margin-bottom: 0.75rem; }
.hero p { color: rgba(255,255,255,0.9); font-size: clamp(1rem, 1.6vw, 1.2rem); margin-bottom: 1.5rem; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center; }
.split img { border-radius: var(--radius); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ==========================================================================
   Page d'accueil du portail (front-page.php) : article à la une + colonne
   "À la une", puis grille des derniers articles — tout interrogé en
   direct, aucune section marketing générée par l'IA.
   ========================================================================== */
.featured-layout { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-lg); align-items: start; }
@media (max-width: 900px) { .featured-layout { grid-template-columns: 1fr; } }

.featured-story__image { display: block; margin-bottom: 1.2rem; }
.featured-story__image img { width: 100%; height: 380px; object-fit: cover; border-radius: var(--radius); }
.featured-story h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 0.6rem 0 0.3rem; }
.featured-story h1 a { color: var(--color-heading); text-decoration: none; }
.featured-story h1 a:hover { color: var(--color-primary); }

.headlines-sidebar {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.4rem;
}
.headlines-sidebar .section-title { font-size: 1.2rem; margin-bottom: 1rem; }
.headlines-sidebar ul { list-style: none; margin: 0; padding: 0; }
.headlines-sidebar li {
    padding: 0.8rem 0;
    border-top: 1px solid var(--color-secondary-border);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.headlines-sidebar li:first-child { border-top: none; padding-top: 0; }
.headlines-sidebar .tag { font-size: 0.65rem; padding: 0.15rem 0.5rem; align-self: flex-start; }
.headlines-sidebar a {
    color: var(--color-heading);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    line-height: 1.25;
}
.headlines-sidebar a:hover { color: var(--color-primary); }

/* ==========================================================================
   Grilles de cartes — dense, façon portail d'actu
   ========================================================================== */
.card-grid {
    /* justify-content:center (pas flex-start) : sans ça, la dernière rangée
       incomplète (ou une grille à un seul item par ligne aux largeurs
       étroites) reste collée à gauche au lieu d'être centrée — même
       correctif que nc-canvas, jamais porté ici quand nc-portal a été créé
       comme canevas séparé (remarque utilisateur : "pas centrée"). */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
}
.card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    flex: 0 1 300px;
    min-width: 260px;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.card img { width: 100%; height: 190px; object-fit: cover; }
.card__body { padding: 1.1rem 1.3rem 1.4rem; }
.card__tag { margin-bottom: 0.6rem; }
.card__title { margin: 0.4rem 0 0.3rem; font-size: 1.15rem; line-height: 1.25; }
.card__title a { color: var(--color-heading); text-decoration: none; }
.card__title a:hover { color: var(--color-primary); }
.card__meta { font-size: 0.8rem; opacity: 0.6; margin: 0; font-family: var(--font-body); }
.card__text { font-size: 0.92rem; margin: 0.5rem 0 0; }
/* Cartes "Parcourir par rubrique" (front-page.php) : fond blanc + liseré
   supérieur dans la couleur de la rubrique (même repère que les
   étiquettes), PAS un bloc plein coloré aux coins arrondis — ce dernier
   lisait comme un pattern générique "carte IA" plutôt qu'un vrai repère de
   presse (retour utilisateur). Le survol fonce légèrement le fond dans
   cette même couleur au lieu d'inverser tout le bloc. */
.card--solid {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 100px;
    text-decoration: none;
    background: #fff;
    border-radius: 0;
    border-top: 4px solid var(--color-secondary-border);
    box-shadow: none;
}
.card--solid:hover { transform: none; box-shadow: none; }
.card--solid .card__body { padding: 1.1rem 1.3rem; text-align: left; }
.card--solid .card__title { color: var(--color-heading); }
.card--solid .card__meta { opacity: 0.55; }
.card--solid.tag--1 { border-top-color: var(--tag-1); }
.card--solid.tag--2 { border-top-color: var(--tag-2); }
.card--solid.tag--3 { border-top-color: var(--tag-3); }
.card--solid.tag--4 { border-top-color: var(--tag-4); }
.card--solid.tag--5 { border-top-color: var(--tag-5); }
.card--solid.tag--1:hover { background: color-mix(in srgb, var(--tag-1) 10%, #fff); }
.card--solid.tag--2:hover { background: color-mix(in srgb, var(--tag-2) 10%, #fff); }
.card--solid.tag--3:hover { background: color-mix(in srgb, var(--tag-3) 10%, #fff); }
.card--solid.tag--4:hover { background: color-mix(in srgb, var(--tag-4) 10%, #fff); }
.card--solid.tag--5:hover { background: color-mix(in srgb, var(--tag-5) 10%, #fff); }

.card-grid--n2 > .card { flex: 1 1 380px; max-width: 500px; }
/* max-width réduit (330px → 250px) : 4 cartes à 330px + 3 espacements ne
   tiennent jamais sur une rangée dans ce container (retour utilisateur —
   "3 puis 1... très laid" sur un autre canevas, même bug latent ici). */
.card-grid--n4 > .card, .card-grid--n4 > li { flex: 1 1 220px; max-width: 250px; min-width: 0; }

/* ==========================================================================
   Bloc "Derniers articles" (core/latest-posts)
   ========================================================================== */
.wp-block-latest-posts.wp-block-latest-posts__list {
    /* Même logique flex-centré que .card-grid (rangée orpheline centrée). */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    list-style: none;
    margin: 0;
    padding: 0;
}
.wp-block-latest-posts__list > li {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    padding-bottom: 1.1rem;
    flex: 0 1 300px;
    min-width: 260px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wp-block-latest-posts__list > li:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.wp-block-latest-posts__featured-image { margin: 0 0 1rem; overflow: hidden; }
.wp-block-latest-posts__featured-image img { width: 100%; height: 190px; object-fit: cover; }
.wp-block-latest-posts__post-title {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.15rem;
    text-decoration: none;
    color: var(--color-heading);
    margin: 0 1.3rem 0.3rem;
}
.wp-block-latest-posts__post-date { display: block; font-size: 0.8rem; opacity: 0.6; margin: 0 1.3rem; }

/* ==========================================================================
   Formulaire de contact (Contact Form 7)
   ========================================================================== */
.wpcf7-form p { margin-bottom: 1.3rem; }
.wpcf7-form label { display: block; font-weight: 600; margin-bottom: 0.4rem; color: var(--color-heading); font-family: var(--font-heading); }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--color-secondary-border);
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
}
.wpcf7-form textarea { min-height: 160px; resize: vertical; }
.wpcf7-form input[type="submit"] {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.85rem 2.1rem;
    font-weight: 600;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.wpcf7-form input[type="submit"]:hover { transform: translateY(-2px); }
.wpcf7-not-valid-tip { color: #c0392b; font-size: 0.85rem; margin-top: 0.3rem; }
.wpcf7-response-output { border-radius: 4px; padding: 1rem; margin-top: 1.5rem; }
.nc-hp-field { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; margin: 0; }

/* ==========================================================================
   Contenu générique (pages, articles)
   ========================================================================== */
.single-content, .archive-results, .no-results { padding: var(--space-lg) 0; }
.entry-title { font-size: 2.3rem; margin-bottom: 0.4rem; }
.entry-meta { margin-bottom: var(--space-md); display: flex; align-items: center; gap: 0.75rem; }
.entry-meta span { color: var(--color-text); opacity: 0.65; font-size: 0.9rem; }
.entry-featured-image { margin-bottom: var(--space-md); border-radius: var(--radius); overflow: hidden; }
.entry-featured-image img { width: 100%; }
.entry-content :is(h2, h3) { margin-top: 2rem; }
.container > :is(h2, h3):not(:first-child) { margin-top: 2rem; }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.site-footer {
    background: var(--color-heading);
    color: rgba(255, 255, 255, 0.82);
    padding: var(--space-lg) 0 var(--space-md);
    border-top: 4px solid var(--color-primary);
}
.footer-menu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 2rem;
    list-style: none;
    margin: 0 0 var(--space-md);
    padding: 0;
}
.footer-menu a { color: #fff; opacity: 0.85; text-decoration: none; font-family: var(--font-heading); font-weight: 600; }
.footer-menu a:hover { opacity: 1; text-decoration: underline; }
.site-footer__copyright { text-align: center; font-size: 0.85rem; opacity: 0.6; }

/* ==========================================================================
   Recherche / archives / 404
   ========================================================================== */
.archive-header, .search-header { padding: var(--space-lg) 0 var(--space-sm); }
.no-results { text-align: center; }

/* ==========================================================================
   Apparition au scroll
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}