/**
 * Restor'Cars — en-tête de page et header sticky.
 *
 * Chargé sur toutes les pages du site (contrairement à blocks.css, qui est
 * conditionnel). Contient uniquement ce qui touche à la charpente.
 *
 * @package RestorCars
 */

/* ==========================================================================
   1. En-tête de page unifié
   --------------------------------------------------------------------------
   Kadence produit sa propre zone de titre (.entry-hero). Plutôt que de la
   remplacer par un template maison — ce qui obligerait à surcharger chaque
   type de contenu — on l'habille pour qu'elle reprenne le traitement de
   l'archive Projets : fond beige, titre serif centré, filet, liseré orange.

   Avantage : ça s'applique automatiquement aux pages, aux fiches projets et
   à tout contenu futur, sans écrire un seul template.
   ========================================================================== */

/*
 * Kadence pose son propre fond sur un conteneur intérieur, plus spécifique que
 * la section. Il faut donc neutraliser à chaque niveau, sinon le beige est
 * écrasé par le gris-bleu du thème parent.
 *
 * Le bloc est CONTENU (et non pleine largeur) pour reproduire exactement
 * l'en-tête de l'archive Projets, qui vit à l'intérieur du conteneur de contenu.
 */
.entry-hero.page-hero-section,
.entry-hero-layout-standard,
.entry-hero .entry-hero-container-inner {
    background: none;
    background-color: transparent;
    border: 0;
    padding-block: 0;
}

/*
 * `flow-root` sur les deux parents directs.
 *
 * L'en-tête des pages est imbriqué deux niveaux plus profond que celui de
 * l'archive. Sans cela, sa marge haute fusionne avec celle de ses ancêtres
 * d'un côté mais pas de l'autre, et les deux blocs ne démarrent pas à la même
 * hauteur — quel que soit le soin apporté aux valeurs.
 */
.entry-hero .entry-hero-container-inner,
.rc-projets-archive {
    display: flow-root;
}

.entry-hero .hero-section-overlay {
    display: none;
}

/*
 * UNE SEULE RÈGLE POUR LES DEUX EN-TÊTES.
 *
 * L'archive Projets et les pages vivent dans deux conteneurs différents —
 * `.content-container` pour l'une, `.hero-container` pour l'autre — qui n'ont
 * ni la même largeur ni les mêmes marges. Les habiller séparément produisait
 * deux blocs proches mais jamais identiques.
 *
 * On leur impose donc les mêmes dimensions, indépendamment de ce dont ils
 * héritent. C'est la seule façon de garantir qu'ils resteront alignés.
 */
.entry-hero .hero-container,
.rc-projets-archive__header {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--header-width);
    margin-inline: auto;
    margin-block: var(--space-xl);
    padding-inline: var(--space-md);
    background-color: var(--color-bg-warm);
    border-bottom: 3px solid var(--color-accent);
}

.entry-hero .entry-header.page-title,
.entry-hero .entry-header,
.rc-projets-archive__header > * {
    padding-block: 0;
    text-align: center;
}

.entry-hero .entry-header.page-title,
.entry-hero .entry-header {
    padding-block: clamp(var(--space-lg), 6vw, var(--space-2xl));
}

/*
 * LES DEUX TITRES D'EN-TÊTE, UNE SEULE DÉCLARATION.
 *
 * Chaque valeur compte pour l'alignement du filet : la taille de police et la
 * hauteur de ligne déterminent où finit le texte, le remplissage bas où se
 * pose le trait. Les séparer, c'est se condamner à des écarts.
 */
.entry-hero .entry-title,
.rc-projets-archive__title {
    margin: 0;
    padding-bottom: var(--space-md);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.1;
    text-wrap: balance;
}

/* Le fil d'Ariane, quand Rank Math sera configuré */
.entry-hero .rank-math-breadcrumb {
    margin-bottom: var(--space-sm);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* Le remplissage vertical de l'archive suit la même échelle que les pages. */
.rc-projets-archive__header {
    padding-block: clamp(var(--space-lg), 6vw, var(--space-2xl));
}

/*
 * Kadence applique un remplissage vertical à `#primary` — un sélecteur
 * d'identifiant, donc plus fort qu'une simple classe. C'est lui qui ajoutait
 * 24 px au-dessus de l'archive et la décalait par rapport aux pages.
 * Il faut donc reprendre l'identifiant pour l'emporter.
 */
#primary.rc-projets-archive {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
}

/* L'introduction et les filtres n'existent que sur l'archive : ils sont styés
   dans projets.css, chargé uniquement là. Ne pas les redéclarer ici. */

/* ==========================================================================
   2. En-tête collant, avec logo débordant — ordinateur uniquement
   --------------------------------------------------------------------------
   Au repos, le logo est grand et déborde sous la barre de navigation, comme un
   écusson posé sur la page. Dès que le visiteur descend, il rentre dans la
   barre et l'en-tête se resserre.

   Sur mobile, rien de tout cela : un en-tête fixe mangerait 60 px en
   permanence sur un écran de 667 px, et un logo débordant recouvrirait le
   contenu. La navigation reste en haut de page, accessible d'un retour rapide.

   TROIS NOMBRES pilotent tout le comportement. Le débordement est exprimé en
   proportion de la largeur pour rester juste si on change celle-ci : ce logo
   fait 1356 × 1634 px, soit un rapport hauteur/largeur de 1,205.
   ========================================================================== */

:root {
    /*
     * Le logo fait 1356 × 1634 px, soit un rapport hauteur/largeur de 1,205.
     * Les trois valeurs ci-dessous se règlent librement, la hauteur de la barre
     * suit toute seule (voir `min-height` plus bas).
     */
    --rc-logo-repos:   132px;  /* largeur en haut de page  → 159 px de haut */
    --rc-logo-defile:   84px;  /* largeur une fois défilé  → 101 px de haut */
    --rc-logo-debord:   42px;  /* ce qui dépasse SOUS la barre */

    /*
     * Décalage vers la gauche, hors du conteneur.
     *
     * Le badge mord sur la marge au lieu de s'aligner sagement sur le contenu :
     * c'est ce qui lui donne l'air d'être posé sur la page plutôt qu'inséré
     * dedans. Le décalage est annulé sous 1024 px, où il n'y a plus de marge à
     * mordre — il sortirait de l'écran.
     */
    --rc-logo-decalage: 28px;

    /*
     * Hauteur utile de la barre, déduite : ce que le logo occupe réellement
     * dans la mise en page une fois retiré ce qui déborde.
     */
    --rc-barre-hauteur: calc(var(--rc-logo-repos) * 1.205 - var(--rc-logo-debord));
}

@media (min-width: 1024px) {
    /*
     * Kadence pose `#masthead { position: relative }` — un sélecteur
     * d'identifiant, plus fort qu'une simple classe. La règle `.site-header`
     * écrite jusqu'ici perdait donc en silence : l'en-tête n'a jamais été
     * collant, il défilait avec la page. Il faut reprendre l'identifiant.
     */
    #masthead.site-header {
        position: sticky;
        top: 0;
        /* Au-dessus du contenu : c'est ce qui permet au logo de déborder
           par-dessus la page au lieu de passer dessous. */
        z-index: 100;
        background-color: var(--color-bg-light);
        /*
         * L'ombre est posée EN HAUT DE PAGE aussi, et pas seulement une fois
         * défilé. Elle détache la barre du contenu et donne au logo une surface
         * sur laquelle reposer : sans elle, l'écusson flotte dans le vide.
         *
         * Le logo, descendant de la barre, se peint par-dessus cette ombre :
         * il passe donc devant la ligne d'ombre au lieu d'être coupé par elle,
         * ce qui est exactement la lecture voulue — un badge posé sur la barre.
         */
        box-shadow: var(--shadow-md);
        transition:
            box-shadow var(--transition),
            background-color var(--transition);
    }

    #masthead.site-header.is-scrolled {
        /*
         * Opaque, et non presque opaque.
         *
         * La version précédente était à 97 % : les 3 % restants laissaient le
         * texte de la page transparaître sous la barre pendant le défilement.
         * Ce n'était pas un effet de verre dépoli, c'était illisible — on
         * croyait à un défaut d'affichage.
         *
         * Le repère visuel du défilement ne repose donc pas sur la transparence
         * mais sur le logo qui se resserre et l'ombre qui s'accentue.
         */
        background-color: var(--color-bg-light);
        box-shadow: var(--shadow-lg);
    }

    /*
     * HAUTEUR DE BARRE CONSTANTE.
     *
     * Sans ce `min-height`, la barre se réglait sur la taille du logo : elle
     * changeait donc de hauteur au moment où le logo se resserre, et toute la
     * page sautait d'autant. En réservant la place, la barre garde la même
     * hauteur au repos et une fois défilée, quelle que soit la taille du logo.
     * Les deux valeurs deviennent indépendantes.
     */
    #masthead .site-branding a.brand {
        min-height: var(--rc-barre-hauteur);
    }

    /*
     * Le badge sort du conteneur par la gauche.
     *
     * `margin-left` négatif et non `transform` : la marge décale aussi la boîte
     * de la mise en page, donc rien ne se chevauche à droite du logo. Un
     * `transform` aurait laissé un trou de 28 px derrière lui.
     *
     * `overflow: visible` sur les conteneurs de Kadence, sans quoi ce qui sort
     * est coupé net.
     */
    #masthead .site-header-row-container-inner,
    #masthead .site-container,
    #masthead .site-header-section,
    #masthead .site-branding {
        overflow: visible;
    }

    #masthead .site-branding {
        margin-left: calc(var(--rc-logo-decalage) * -1);
    }

    /*
     * Le débordement.
     *
     * Une marge basse négative retire de la mise en page la part du logo qui
     * doit dépasser : l'image continue de s'afficher en entier, mais elle
     * n'occupe dans la barre que la hauteur réservée. Le reste passe par-dessus
     * la page.
     *
     * `#masthead` en tête du sélecteur : la largeur du logo est aussi posée par
     * la feuille dynamique de Kadence, avec `.site-branding a.brand img`.
     */
    #masthead .site-branding a.brand img {
        max-width: var(--rc-logo-repos);
        margin-bottom: calc(var(--rc-logo-debord) * -1);

        /*
         * `drop-shadow` et non `box-shadow` : le logo est un PNG détouré, et
         * `box-shadow` dessinerait l'ombre d'un RECTANGLE autour de l'image, y
         * compris dans les coins transparents. `drop-shadow` suit le canal
         * alpha et épouse la découpe de l'écusson.
         *
         * Deux ombres superposées : une courte et dense qui décolle le badge de
         * la barre, une longue et diffuse qui lui donne sa hauteur.
         */
        filter:
            drop-shadow(0 2px 3px rgba(4, 59, 88, 0.30))
            drop-shadow(0 10px 18px rgba(4, 59, 88, 0.22));

        transition:
            max-width var(--transition),
            margin-bottom var(--transition),
            filter var(--transition);
    }

    /* Rentré dans la barre, le badge n'a plus à flotter : l'ombre s'allège. */
    #masthead.is-scrolled .site-branding a.brand img {
        filter: drop-shadow(0 2px 4px rgba(4, 59, 88, 0.28));
    }

    /* Une fois la page défilée, le logo rentre dans la barre. */
    #masthead.is-scrolled .site-branding a.brand img {
        max-width: var(--rc-logo-defile);
        margin-bottom: 0;
    }

    /* Une ancre ne doit pas passer sous l'en-tête collé */
    :target {
        scroll-margin-top: calc(var(--header-height) + var(--space-sm));
    }
}

/* Respect du réglage système « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
    #masthead.site-header,
    #masthead .site-branding a.brand img {
        transition: none;
    }
}

/* ==========================================================================
   3. Pied de page
   --------------------------------------------------------------------------
   Trois rangées centrées : réseaux, liens obligatoires, mention. Volontairement
   discret — le pied de page n'est pas un endroit où l'on veut retenir qui que
   ce soit, mais les liens légaux doivent rester trouvables et cliquables.
   ========================================================================== */

.rc-pied {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs, 0.625rem);
    text-align: center;
}

.rc-pied ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm, 1rem) var(--space-md, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rc-pied a {
    /* 44 px de haut : la cible tactile recommandée, même dans un pied de page */
    display: inline-block;
    padding-block: 0.375rem;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.rc-pied a:hover,
.rc-pied a:focus-visible {
    color: var(--color-accent, #EE5C2B);
}

.rc-pied__reseaux {
    font-weight: 600;
}

/*
 * Le bouton de préférences doit se lire comme les liens voisins, et pas
 * seulement au repos.
 *
 * Kadence habille les `button` du site : fond, bordure, ombre, et un état
 * pressé qui restait affiché après le clic. Résultat, un bouton gris apparu au
 * milieu d'une rangée de liens. Il faut donc neutraliser TOUS les états, pas
 * seulement l'état normal.
 */
.rc-pied__preferences,
.rc-pied__preferences:hover,
.rc-pied__preferences:focus,
.rc-pied__preferences:focus-visible,
.rc-pied__preferences:active {
    padding: 0.375rem 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-transform: none;
    letter-spacing: inherit;
    transform: none;
    cursor: pointer;
}

.rc-pied__preferences:hover,
.rc-pied__preferences:focus-visible {
    color: var(--color-accent, #EE5C2B);
}

/* Le contour de mise au point reste : c'est le repère du clavier. */
.rc-pied__preferences:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.rc-pied__mention {
    margin: 0;
    font-size: 0.875rem;
    opacity: 0.85;
}

/* ==========================================================================
   4. Boutons — un seul style pour tout le site
   ========================================================================== */

/*
 * Un seul orange, deux tons.
 *
 * Du blanc sur l'orange de marque (#EE5C2B) donne 3,39:1 — sous le seuil
 * WCAG AA de 4,5:1. Assombri de 15 % (#CA4E24), il atteint 4,54:1 : l'œil ne
 * fait pas la différence, mais le texte devient lisible pour tout le monde.
 *
 * La bâche esquive le même écueil : son bandeau orange porte du texte crème,
 * et le rouge y est toujours posé sur le parchemin, jamais sur l'orange.
 */
.rc-button,
.rc-button--accent {
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    min-height: 3rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-action);
    color: #fff;
    font: inherit;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition), transform var(--transition);
}

.rc-button:hover,
.rc-button:focus-visible,
.rc-button--accent:hover,
.rc-button--accent:focus-visible {
    background: var(--color-action-survol, #A83814);
    color: #fff;
    transform: translateY(-1px);
}

.rc-button:focus-visible,
.rc-button--accent:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.rc-button:active,
.rc-button--accent:active {
    transform: translateY(0);
}

/* ==========================================================================
   5. Respiration — la correction demandée
   --------------------------------------------------------------------------
   Tout bouton isolé sous une image, une galerie ou un texte reçoit la même
   marge haute. Plus besoin de la régler bloc par bloc.
   ========================================================================== */

.rc-hero__cta,
.rc-cta__actions,
.rc-derniers-projets__lien,
.rc-pdf-embed__link,
.rc-avis__cta,
.rc-section__texte > .rc-button {
    margin-top: var(--space-lg);
}

.rc-pdf-embed,
.rc-section__image {
    margin-block: var(--space-md);
}