/* ------------------------------------------------------------------
   Couche structurelle partagée par toutes les directions visuelles.

   Chargée APRÈS la feuille de thème (assets/css/themes/…) dans
   inc/header.php. Ne contient que de la mise en page : l'habillage
   visuel (couleurs, bordures définitives, typographie) reste du
   ressort des thèmes. Volontairement neutre — s'appuie sur
   currentColor et des unités relatives pour se fondre dans le thème
   actif tant que la direction visuelle n'est pas figée.

   Aujourd'hui : colonne latérale « actualités récentes » affichée sur
   les pages de contenu (voir inc/footer.php, $hasNewsAside).
   ------------------------------------------------------------------ */

/* --- Colonne latérale : cadre et liste --- */
.news-aside {
    border: 1px solid currentColor;
    padding: .8rem 1rem;
    margin-top: 2.5rem;
    font-size: .95rem;
    line-height: 1.5;
}

/* Titre de la colonne : on neutralise les décorations de titre propres
   aux thèmes (pastille « feuille » verte, numéro de section, filet) qui
   sinon recouvrent le texte ou décalent la numérotation des sections. */
.news-aside > h2 {
    position: static;
    counter-increment: none;
    margin: 0 0 .6rem;
    padding: 0;
    border: 0;
    font-size: 1rem;
    line-height: 1.3;
}

.news-aside > h2::before,
.news-aside > h2::after {
    content: none;
    display: none;
}

.news-aside ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.news-aside li {
    line-height: 1.35;
}

.news-aside li + li {
    margin-top: .7rem;
    padding-top: .7rem;
    border-top: 1px solid currentColor;
}

/* Titre de l'article sur sa propre ligne, puis la date en dessous,
   plus petite et discrète. */
.news-aside a {
    display: block;
}

.news-aside time {
    display: block;
    margin-top: .15rem;
    font-size: .8em;
    opacity: .7;
}

/* --- Boutons de partage, sous chaque article --- */
.news-aside-share {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .4rem;
}

.news-aside .share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: .2rem;
    color: inherit;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    opacity: .7;
}

.news-aside .share-btn:hover,
.news-aside .share-btn:focus-visible {
    opacity: 1;
}

.news-aside .share-btn svg {
    display: block;
    width: .95rem;
    height: .95rem;
    fill: currentColor;
}

.news-aside .share-btn[disabled] {
    cursor: default;
}

/* Retour visuel après copie du lien (bouton Instagram). */
.news-aside .share-btn.is-copied {
    opacity: 1;
}

.news-aside .share-btn.is-copied svg {
    display: none;
}

.news-aside .share-btn.is-copied::after {
    content: "\2713";
    font-size: .95rem;
    line-height: 1;
}

/* --- Grand écran : la colonne passe à droite du contenu --- */
:root {
    --site-content-max: 74rem;  /* largeur totale (contenu + colonne) */
    --site-aside-w: 16rem;       /* largeur de la colonne latérale */
    --site-aside-gap: 2.5rem;
}

@media (min-width: 64em) {
    body.has-news-aside main {
        max-width: var(--site-content-max);
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--site-aside-w);
        column-gap: var(--site-aside-gap);
        align-items: start;
    }

    body.has-news-aside main > .news-aside {
        margin-top: 0;
        position: sticky;
        top: 1rem;
    }

    /* Page Actualités (liste et article seul) : même largeur de texte que
       les autres pages, c.-à-d. la colonne de contenu du gabarit à colonne
       latérale (total moins la colonne moins la gouttière). */
    body.is-news main {
        max-width: calc(var(--site-content-max) - var(--site-aside-w) - var(--site-aside-gap));
    }
}

/* ------------------------------------------------------------------
   Formulaire de contact (pages/contact.php, inc/contact.php).

   Mise en page uniquement : champs alignés sur une grille, largeurs
   et rythme vertical réguliers. Aucune couleur ni typographie propre —
   currentColor, transparence et « font: inherit » pour suivre le thème
   actif. Les thèmes pourront affiner l'habillage (couleur d'erreur,
   focus, boutons) le moment venu.
   ------------------------------------------------------------------ */

.contact-form {
    max-width: 40rem;
    margin-top: 1.5rem;
}

.contact-form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;             /* laisse la grille rétrécir sous 100 % */
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem 1.25rem;
}

.contact-form legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: .4rem;
    font-size: 1.1rem;
    font-weight: 700;
}

.contact-form .cf-hint {
    margin: 0;
    font-size: .85rem;
    opacity: .7;
}

/* Un champ = libellé au-dessus, saisie en dessous, message d'erreur
   éventuel sous la saisie. */
.contact-form .cf-field {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.contact-form label {
    margin-bottom: .3rem;
    font-size: .9rem;
    font-weight: 600;
}

.contact-form .field-optional {
    font-weight: 400;
    opacity: .6;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    font: inherit;
    line-height: 1.4;
    padding: .55rem .7rem;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: .25rem;
    -webkit-appearance: none;
            appearance: none;
}

.contact-form textarea {
    resize: vertical;
    min-height: 8rem;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

/* Champ en erreur : bordure renforcée (sans couleur imposée). */
.contact-form [aria-invalid="true"] {
    border-width: 2px;
}

.contact-form .field-error {
    display: block;
    margin-top: .3rem;
    font-size: .82rem;
    font-weight: 700;
}

/* Récapitulatif d'erreur en tête de formulaire, et accusé d'envoi. */
.contact-form .form-error,
.contact-form .form-ok,
.form-ok {
    margin: 0 0 1.2rem;
    padding: .7rem .9rem;
    border: 1px solid currentColor;
    border-left-width: .25rem;
    border-radius: .2rem;
}

.contact-form .form-error {
    font-weight: 700;
}

/* Accusé d'envoi affiché seul (sans le formulaire autour). */
.form-ok {
    max-width: 40rem;
    margin-top: 1.5rem;
}

.contact-form .cf-actions {
    margin: .4rem 0 0;
}

.contact-form button {
    font: inherit;
    font-weight: 700;
    padding: .6rem 1.6rem;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: .25rem;
    cursor: pointer;
}

.contact-form button:hover,
.contact-form button:focus-visible {
    opacity: .75;
}

/* ------------------------------------------------------------------
   Bandeau de consentement aux cookies (inc/consent.php).

   Mise en page seulement. Fond opaque obligatoire pour rester lisible
   par-dessus la page : on s'appuie sur les couleurs système Canvas /
   CanvasText (suivent le mode clair/sombre, aucune couleur de marque
   décidée ici). Barre fixée en bas ; boutons « Accepter » et « Refuser »
   de poids strictement identique.
   ------------------------------------------------------------------ */
.cookie-consent {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem 1.5rem;
    padding: .9rem 1.1rem;
    background: Canvas;
    color: CanvasText;
    border-top: 1px solid currentColor;
    font-size: .9rem;
    line-height: 1.5;
}

.cookie-consent-text {
    margin: 0;
    flex: 1 1 22rem;
}

.cookie-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.cookie-consent-actions button {
    font: inherit;
    padding: .5rem 1.3rem;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: .25rem;
    cursor: pointer;
}

.cookie-consent-actions button:hover,
.cookie-consent-actions button:focus-visible {
    opacity: .75;
}

/* ------------------------------------------------------------------
   Diaporama de la photo d'en-tête (inc/hero.php + inc/header.php).

   Images empilées dans .site-header, fondu enchaîné sur l'opacité
   (1,2 s). Le script de inc/header.php amène l'image suivante par-dessus
   (.is-top) puis efface les autres une fois le fondu terminé ; sans
   script, seule la première image (.is-visible.is-top) reste affichée.

   Caché par défaut : seules les directions visuelles à en-tête plein
   cadre l'affichent (assets/css/themes/…). Le voile de lisibilité suit
   --hero-overlay, redéfini par le thème.

   Ordre d'empilement dans .site-header :
     fond du thème < images (1) < image du dessus (2) < voile (3) < contenu (4)
   ------------------------------------------------------------------ */
.hero-slideshow { display: none; }

.site-header .hero-slideshow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.site-header .hero-slideshow img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1200ms ease-in-out;
}

.site-header .hero-slideshow img.is-visible { opacity: 1; }
.site-header .hero-slideshow img.is-top { z-index: 2; }

.site-header .hero-slideshow::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: var(--hero-overlay, linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .55)));
}

/* Contenu de l'en-tête (titre, baseline, navigation) au-dessus du diaporama.
   Le sélecteur de langue est exclu : il garde son position:fixed défini par
   le thème (son z-index le place déjà au-dessus du diaporama). Sans cette
   exclusion, il retombait dans le flux de la grille en bloc pleine largeur
   — d'où une large bande sombre en haut sur grand écran. */
.site-header > :not(.hero-slideshow):not(.lang-switcher) {
    position: relative;
    z-index: 4;
}

@media (prefers-reduced-motion: reduce) {
    .site-header .hero-slideshow img { transition-duration: 1ms; }
}

/* --- À partir de la largeur tablette : deux colonnes --- */
@media (min-width: 40em) {
    .contact-form fieldset {
        grid-template-columns: 1fr 1fr;
    }

    .contact-form legend,
    .contact-form .cf-hint,
    .contact-form .cf-field-full {
        grid-column: 1 / -1;
    }
}