/* Thème « magazine moderne » du site public */

:root {
    --ink: #111827;
    --muted: #6b7280;
    --accent: #1d4ed8;        /* bleu */
    --accent-dark: #1e3a8a;
    --bg: #f8f7f5;
    --card: #ffffff;
    --line: #e7e5e4;
    --radius: 12px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }

/* ---------- Header ---------- */

.site-header {
    background: var(--card);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 50;
}

.site-header .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 0;
    flex-wrap: wrap;
}

.brand {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
}
.site-header .brand { margin-left: .5rem; }

.nav-toggle { display: none; }
.brand:hover { text-decoration: none; }
.brand .dot { color: var(--accent); }

.main-nav {
    display: flex;
    gap: .25rem;
}

.nav-item { position: relative; }

.nav-item > a {
    display: inline-block;
    white-space: nowrap;
    color: var(--ink);
    font-size: .9rem;
    font-weight: 600;
    padding: .4rem .8rem;
    border-radius: 999px;
    transition: background .15s, color .15s;
}
.nav-item > a:hover,
.nav-item:focus-within > a {
    background: var(--accent);
    color: #fff;
    text-decoration: none;
}

/* Indicateur de sous-menu : chevron tracé en CSS, pas un caractère.
   Un glyphe (▾) dépend de la police installée — souvent un triangle plein
   trop lourd —, se cale sur la ligne de base plutôt que sur le milieu du
   texte, et ne peut pas s'animer. Ici deux bordures d'un carré vide pivoté :
   l'épaisseur est maîtrisée, la couleur suit celle du texte (donc blanche
   sur la pastille de survol), et le chevron bascule vers le haut quand le
   panneau est ouvert — l'état du menu devient lisible d'un coup d'œil. */
.nav-item.has-children > a::after {
    content: '';
    display: inline-block;
    width: .32em;
    height: .32em;
    margin-left: .5em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    /* translateY recentre le carré sur le texte : posé sur la ligne de base,
       son centre optique tomberait trop bas une fois pivoté. */
    transform: translateY(-.18em) rotate(45deg);
    transition: transform .18s ease;
}
.nav-item.has-children:hover > a::after,
.nav-item.has-children:focus-within > a::after {
    transform: translateY(-.06em) rotate(-135deg);
}

/* Respect du réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
    .nav-item.has-children > a::after { transition: none; }
}

.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgb(0 0 0 / .12);
    padding: .4rem;
    z-index: 60;
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
    display: block;
}

.dropdown a {
    display: block;
    color: var(--ink);
    font-size: .88rem;
    font-weight: 500;
    padding: .45rem .75rem;
    border-radius: 6px;
    white-space: nowrap;
}
.dropdown a:hover {
    background: var(--bg);
    color: var(--accent);
    text-decoration: none;
}

/* Mobile : menu hamburger — panneau vertical avec sous-rubriques indentées */
@media (max-width: 800px) {
    .nav-toggle {
        display: block;
        background: none;
        border: none;
        font-size: 1.75rem;
        line-height: 1;
        padding: .25rem .4rem;
        cursor: pointer;
        color: var(--ink);
    }

    .main-nav {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: .1rem;
        padding: .5rem 0 .25rem;
    }
    .main-nav.open {
        display: flex;
        /* Menu long : défilement interne (l'en-tête sticky ne défile pas avec la page) */
        max-height: calc(100vh - 90px);
        max-height: calc(100dvh - 90px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .nav-item > a {
        display: block;
        padding: .5rem .8rem;
        border-radius: 8px;
    }
    /* Panneau hamburger : les sous-rubriques sont déjà dépliées, le chevron
       n'indiquerait rien. */
    .nav-item.has-children > a::after { display: none; }

    .dropdown {
        display: block !important;
        position: static;
        min-width: 0;
        background: none;
        border: none;
        box-shadow: none;
        padding: 0 0 .35rem 1.4rem;
    }
    .dropdown a {
        padding: .4rem .75rem;
        color: var(--muted);
    }
}

/* ---------- Structure ---------- */

main { padding: 2.5rem 0 3rem; }

.section-title {
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent);
    margin: 0 0 1.25rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.section-title::after {
    content: '';
    flex: 1;
    height: 2px;
    background: var(--line);
}

/* ---------- Diaporama d'accueil ---------- */

.slideshow {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 2.5rem;
    height: 420px;
}

.slideshow .slide {
    position: absolute;
    inset: 0;
    /* L'image vient de la vue (--slide-image) ; le voile sombre est à la main
       du thème (--slide-overlay), sauge.css l'enlève pour son panneau clair. */
    --slide-overlay: rgb(0 0 0 / .35);
    background-image: linear-gradient(var(--slide-overlay), var(--slide-overlay)), var(--slide-image, none);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity .7s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 2rem 3.5rem;
    pointer-events: none;
    box-sizing: border-box;
}
.slideshow .slide.active {
    opacity: 1;
    pointer-events: auto;
}

.slideshow .slide-content { max-width: 680px; }

/* Alignement du contenu par diapositive */
.slideshow .slide.align-left {
    justify-content: flex-start;
    text-align: left;
}
.slideshow .slide.align-left .slide-content p { margin-left: 0; }

.slideshow .slide.align-right {
    justify-content: flex-end;
    text-align: right;
}
.slideshow .slide.align-right .slide-content p { margin-right: 0; }

.slideshow .slide-content h2 {
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    letter-spacing: -.02em;
    margin: 0 0 .75rem;
    text-shadow: 0 2px 12px rgb(0 0 0 / .4);
}

.slideshow .slide-content p {
    margin: 0 auto 1.25rem;
    opacity: .95;
    text-shadow: 0 1px 8px rgb(0 0 0 / .4);
}

.slideshow .slide-content .btn-primary {
    display: inline-block;
    background: #fff;
    color: var(--accent-dark);
    text-decoration: none;
}
.slideshow .slide-content .btn-primary:hover { background: var(--bg); }

.slide-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgb(0 0 0 / .35);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 2;
    transition: background .15s;
}
.slide-arrow:hover { background: rgb(0 0 0 / .6); }
.slide-arrow.prev { left: .75rem; }
.slide-arrow.next { right: .75rem; }

.slide-dots {
    position: absolute;
    bottom: .9rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: .5rem;
    z-index: 2;
}
.slide-dots button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgb(255 255 255 / .5);
    cursor: pointer;
    padding: 0;
    transition: background .15s, transform .15s;
}
.slide-dots button.active {
    background: #fff;
    transform: scale(1.25);
}

@media (max-width: 700px) {
    .slideshow { height: 320px; }
    .slideshow .slide { padding: 1.5rem 3rem; }
}

/* ---------- Bandeau d'accueil (hero paramétrable) ---------- */

.hero-banner {
    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
    background-size: cover;
    background-position: center;
    border-radius: var(--radius);
    color: #fff;
    text-align: center;
    padding: 3.5rem 2rem;
    margin-bottom: 2.5rem;
}

.hero-banner h2 {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    letter-spacing: -.02em;
    margin: 0 0 .75rem;
}

.hero-banner p {
    max-width: 620px;
    margin: 0 auto 1.25rem;
    opacity: .92;
}

.hero-banner .btn-primary {
    display: inline-block;
    background: #fff;
    color: var(--accent-dark);
    text-decoration: none;
}
.hero-banner .btn-primary:hover { background: var(--bg); }

/* ---------- Footer : colonnes ---------- */

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 1rem;
}
@media (max-width: 700px) {
    .footer-grid { grid-template-columns: 1fr; gap: 1rem; }
}

.footer-contact p { margin: .2rem 0; }

.footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-content: flex-start;
}
.footer-socials a { opacity: .85; }
.footer-socials a:hover { opacity: 1; }

/* ---------- Hero (article à la une) ---------- */

.hero {
    display: grid;
    /* minmax(0, …) : sans lui, un titre à mot long impose sa largeur min-content
       à la colonne et fait déborder la grille à droite */
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 2.5rem;
}

.hero .thumb { min-height: 320px; }

.hero .body {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero h2 {
    font-size: 1.75rem;
    line-height: 1.25;
    letter-spacing: -.01em;
    margin: .5rem 0 .75rem;
    overflow-wrap: break-word;
}
.hero h2 a { color: var(--ink); }

.hero p.excerpt { color: var(--muted); margin: 0 0 1rem; }

/* ---------- Grille de cartes ---------- */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .15s, box-shadow .15s;
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgb(0 0 0 / .08);
}

.thumb {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
    background-size: cover;
    background-position: center;
    display: block;
}

.card .body { padding: 1.1rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }

.card h3 {
    font-size: 1.1rem;
    line-height: 1.35;
    margin: .4rem 0 .5rem;
    overflow-wrap: break-word;
}
.card h3 a { color: var(--ink); }

.card p.excerpt {
    color: var(--muted);
    font-size: .92rem;
    margin: 0;
}

.kicker {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--accent);
}
.kicker a { color: inherit; }

.meta { color: var(--muted); font-size: .85rem; }

/* ---------- Breadcrumbs ---------- */

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    color: var(--muted);
    margin: 0 0 1.25rem;
}
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs .sep { opacity: .6; }
.breadcrumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- Page article ---------- */

/* Pleine largeur du conteneur (alignée sur la barre de menu) */
.article-page { max-width: none; margin: 0; }

.article-page h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.2;
    letter-spacing: -.02em;
    margin: .5rem 0 .75rem;
    overflow-wrap: break-word;
}

.article-page .lead-image {
    border-radius: var(--radius);
    margin: 1.5rem 0;
    width: 100%;
    object-fit: cover;
}

.article-body {
    font-size: 1.08rem;
}
.article-body img {
    border-radius: var(--radius);
    margin: 1rem 0;
}
.article-body iframe { max-width: 100%; }

/* ---------- Tags ---------- */

.tags { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.tags a, .tags span {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .2rem .85rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
}

/* ---------- Boutons de partage ---------- */

.share-buttons {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.share-label {
    font-size: .85rem;
    font-weight: 700;
    color: var(--muted);
    margin-right: .25rem;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .35rem .9rem;
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.share-btn svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
    flex-shrink: 0;
}
.share-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    text-decoration: none;
}
.share-btn[hidden] { display: none; }

/* ---------- Sous-rubriques ---------- */

.subcats { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; }
.subcats a {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .35rem 1rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink);
    transition: background .15s, color .15s;
}
.subcats a:hover { background: var(--accent); color: #fff; text-decoration: none; }

/* ---------- Formulaires (contact) ---------- */

.contact-form { max-width: 560px; }

.form-field { margin-bottom: 1.1rem; }

.form-field label {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: .35rem;
}

.form-field input,
.form-field textarea {
    width: 100%;
    padding: .65rem .85rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    background: var(--card);
    color: var(--ink);
}
.form-field input:focus,
.form-field textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.error-text {
    display: block;
    color: #dc2626;
    font-size: .82rem;
    margin-top: .3rem;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: .65rem 1.6rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.btn-primary:hover { background: var(--accent-dark); }

.alert {
    border-radius: 8px;
    padding: .8rem 1rem;
    font-size: .95rem;
}
.alert-success { background: #dcfce7; color: #166534; }
.alert-error { background: #fee2e2; color: #991b1b; }

/* Honeypot : hors écran (les robots le remplissent, pas les humains) */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Emplacements publicitaires ---------- */

.ad-slot {
    margin: 1.5rem 0;
    text-align: center;
    overflow: hidden;
}

.card.ad-card {
    /* Surtout pas de flex ici : AdSense a besoin d'une largeur de bloc définie */
    display: block;
    padding: 1rem;
    min-height: 200px;
    overflow: hidden;
}
.card.ad-card ins,
.card.ad-card > div {
    display: block;
    width: 100%;
}

/* ---------- Cadres (blocs de contenu des pages) ---------- */

.cards-grid {
    margin: 2rem 0;
    /* auto-fit : les colonnes vides se replient, deux cartes occupent donc la
       moitié chacune. La grille d'articles (.grid) garde auto-fill pour qu'un
       article seul ne s'étire pas sur toute la largeur. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
@media (max-width: 900px) {
    .cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .cards-grid { grid-template-columns: 1fr; }
}

.cards-grid .card .body h3 { margin-top: 0; }

.cards-grid .card-link { margin: .75rem 0 0; }
.cards-grid .card-link a { font-weight: 600; font-size: .92rem; }

/* ---------- Page 404 ---------- */

.error-page {
    text-align: center;
    padding: 3rem 1rem 4rem;
    max-width: 560px;
    margin: 0 auto;
}

.error-page .error-code {
    font-size: 6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--accent);
    margin: 0 0 .5rem;
    letter-spacing: -.04em;
}

.error-page h1 { margin: 0 0 .75rem; }

.error-page .error-text-lead { color: var(--muted); }

.error-page .error-actions {
    display: flex;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1.75rem;
}

.btn-secondary {
    display: inline-block;
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .65rem 1.6rem;
    font-weight: 600;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

.error-page .btn-primary { text-decoration: none; }

/* ---------- Pagination ---------- */

.pager {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
}
.pager a {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .5rem 1.25rem;
    font-weight: 600;
    font-size: .92rem;
}
.pager a:hover { background: var(--accent); color: #fff; text-decoration: none; }

/* ---------- Footer ---------- */

.site-footer {
    background: var(--ink);
    color: #d1d5db;
    padding: 2.5rem 0;
    margin-top: 3rem;
    font-size: .9rem;
}
.site-footer a { color: #fff; }
.site-footer .brand { color: #fff; font-size: 1.2rem; margin-left: 0; }
.site-footer .footer-links { margin-top: .5rem; }
.site-footer .footer-links a { margin-right: .25rem; opacity: .85; }
.site-footer .footer-links a:hover { opacity: 1; }

/* ---------- Responsive ---------- */

@media (max-width: 800px) {
    .hero { grid-template-columns: minmax(0, 1fr); }
    /* Hauteur explicite : l'aspect-ratio 16/9 hérité de .thumb transformait
       min-height: 220px en largeur minimale de 391px (220 × 16/9), ce qui
       faisait déborder la colonne — et donc le titre — sur les petits écrans */
    .hero .thumb { aspect-ratio: auto; height: 220px; min-height: 0; }
    .hero .body { padding: 1.5rem; }
}

/* ---------- Éléments de site vitrine (facultatifs, pilotés par les réglages) ---------- */

/* Pictogrammes inline (App\Support\Icons) : taille du texte, alignés sur lui */
.icon {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -.2em;
    flex: none;
}

/* Barre « Appelez-nous » au-dessus de l'en-tête */
.top-bar {
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    font-size: .85rem;
    text-align: right;
}
.top-bar a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem 0;
    color: var(--muted);
}
.top-bar a:hover { color: var(--accent); text-decoration: none; }
.top-bar strong { color: var(--ink); font-weight: 600; }

/* Logo + slogan */
.brand-block {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}
.brand-block .tagline {
    color: var(--muted);
    font-size: .9rem;
    border-left: 1px solid var(--line);
    padding-left: 1rem;
    white-space: nowrap;
}

/* Réseaux sociaux en pictogrammes (en-tête) */
.header-socials {
    display: flex;
    gap: .35rem;
    margin-left: auto;
}
.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: var(--muted);
    font-size: .8rem;
}
.social-link:hover { color: #fff; background: var(--accent); text-decoration: none; }
.social-link .icon { width: 1rem; height: 1rem; vertical-align: 0; }

/* Page courante dans le menu */
.nav-item > a[aria-current="page"] {
    background: var(--accent);
    color: #fff;
}

@media (max-width: 800px) {
    .brand-block .tagline { display: none; }
    .header-socials { margin-left: 0; }
}

/* Bandeau d'en-tête de page (photo et/ou phrase d'accroche) */
.page-banner {
    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
    background-size: cover;
    background-position: center;
    border-radius: var(--radius);
    color: #fff;
    padding: 2.5rem 2rem;
    margin-bottom: 1.5rem;
}
.page-banner.has-image {
    /* La vue fournit --banner-image ; le voile (--banner-overlay) est au thème */
    --banner-overlay: rgb(0 0 0 / .45);
    background-image: linear-gradient(var(--banner-overlay), var(--banner-overlay)), var(--banner-image, none);
    min-height: 220px;
    display: flex;
    align-items: center;
}
.page-banner .lead {
    font-size: 1.25rem;
    line-height: 1.5;
    max-width: 760px;
    margin: 0;
}

/* Contenu de l'accueil (page statique) */
.home-page { margin-bottom: 2.5rem; }
.home-page .article-body { max-width: 800px; margin: 0 auto 2rem; text-align: center; }

/* Cartes : variantes de présentation */
.card .card-subtitle {
    margin: -.25rem 0 .6rem;
    color: var(--muted);
    font-size: .9rem;
}

.card-icon .icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    margin: 1.5rem auto 0;
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    color: var(--accent);
}
.card-icon .icon-circle .icon { width: 2rem; height: 2rem; vertical-align: 0; }
.card-icon .icon-circle img { width: 2.5rem; height: 2.5rem; object-fit: contain; }
.card-icon .body { text-align: center; }
.card-icon .body h3 { margin-top: .4rem; }

.card-person .portrait {
    display: block;
    aspect-ratio: 4 / 5;
    background: var(--bg);
    background-size: cover;
    background-position: center top;
}
.card-person .portrait-empty {
    background: repeating-linear-gradient(135deg, var(--line) 0 10px, var(--bg) 10px 20px);
}
.card-person .card-subtitle {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .75rem;
    font-weight: 600;
}

.card-logo .logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    /* Hauteur fixe = padding + max-height de l'image : les titres restent
       alignés quelle que soit la forme des logos */
    height: calc(110px + 3rem);
    background: #fff;
}
.card-logo .logo-box img { max-height: 110px; max-width: 85%; width: auto; object-fit: contain; }
.card-logo .body { text-align: center; }
.cards-logo { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* Carte « image » : l'image entière, dans son format, sur la largeur de la carte */
.card-image .image-box { display: block; background: #fff; }
.card-image .image-box img { display: block; width: 100%; height: auto; }
.card-image .body { text-align: center; }

/* Page contact : coordonnées, horaires, carte */
.contact-header {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
}
.contact-header .lead { margin: 0 0 1.25rem; }
.contact-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}
.contact-info h3 {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    margin: 0 0 .5rem;
}
.contact-info p { margin: .2rem 0; }
.contact-map {
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 2rem;
}
.contact-page .section-title { margin-top: 1rem; }

/* Pied de page : bloc d'informations à quatre colonnes */
.footer-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgb(255 255 255 / .15);
}
.footer-info h3 { font-size: 1rem; margin: 0 0 .5rem; }
.footer-info p { margin: .2rem 0; }

/* Retour en haut */
.to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 2.6rem;
    height: 2.6rem;
    border: none;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgb(0 0 0 / .2);
    z-index: 40;
}
.to-top:hover { background: var(--accent-dark); }
.to-top[hidden] { display: none; }