/*
 * ateliertitane.fr — feuille différée.
 *
 * CE FICHIER NE CONTIENT AUCUNE RÈGLE QUI POSE UNE DIMENSION.
 *
 * Le partage avec le style critique en ligne dans layout.html.twig n'est pas
 * arbitraire : la coquille (conteneur, bandeau, navigation, grilles, hauteurs
 * de champs) est inline, donc appliquée dès le premier octet de HTML ; ici ne
 * restent que couleurs, bordures, ombres, survols et compatibilité UIkit. Ce
 * fichier arrive après le premier rendu, et comme il ne déplace aucune boîte,
 * son arrivée ne produit pas de saut de page.
 *
 * Corollaire à ne pas oublier : une règle ajoutée ici qui changerait une
 * largeur, une hauteur ou une marge réintroduirait du CLS, c'est-à-dire
 * exactement ce que la mise en page inline sert à empêcher. Une telle règle va
 * dans le style critique.
 *
 * Les couleurs viennent TOUTES des variables de charte.css. Trois valeurs du
 * thème d'origine ne sont volontairement pas reprises telles quelles :
 *   - le rose #d9415c des h4 : 2,77:1 sur le fond, échec AA franc ;
 *   - le gris #7c8290 des méta et du pied : 3,11:1, échec ;
 *   - le blanc sur l'orange des alertes : 2,64:1, échec.
 * Chacune est remplacée par la teinte de la charte qui tient AA. C'est la même
 * décision « contraste remonté d'un cran » que celle actée le 18/08/2026, pas
 * un choix nouveau.
 */

/* ── Zone haute de l'accueil ────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   UNE RÈGLE À NE PAS DÉFAIRE : sur toute surface PLUS CLAIRE que le fond de
   page, le texte monte d'un cran.
   Mesuré : le gris courant --texte donne 4,52:1 sur --fond-page, mais 3,58:1
   sur --fond-secondaire et 3,16:1 sur --separation-sombre — soit un échec AA
   sur les cartes, les panneaux, et une ligne sur deux des 52 tables de tarifs.
   Le fond, lui, reste EXACTEMENT celui du site actuel : c'est le texte qui
   bouge, pas la couleur qu'on voit.

   ⚠ EXCEPTION, ARBITRÉE PAR BJORN LE 31/08/2026 : les LIENS des panneaux ne
   montent PAS d'un cran. Ils gardent --lien, le bleu de la charte, parce que
   le bleu pâle --lien-survol s'écartait trop du site actuel dans la colonne de
   droite et dans les boîtes du pied. Le prix est chiffré et assumé : --lien
   donne 3,63:1 sur --fond-secondaire, donc AA pour du texte large seulement,
   là où --lien-survol tenait 6,25:1. Bjorn a tranché en connaissance de cause.
   Ne pas « re-corriger » cela sans le lui redemander.
   Si l'on veut un jour les deux, la sortie n'est pas de repasser au bleu pâle
   mais de monter --lien de huit points de luminosité, à teinte et saturation
   inchangées : #78baec donne 4,52:1 sur le panneau et 5,71:1 sur la page.

   Le texte courant, lui, monte toujours : c'est la règle ci-dessus.
   ══════════════════════════════════════════════════════════════════════════ */

/* Le panneau bleu de tête. Son apparence vient de `.uk-panel-box-primary`,
   défini plus bas avec le reste de la compatibilité UIkit — ici, seulement sa
   place dans la page. */
.panneau-intro { margin-bottom: 20px; }

/* ── Corps d'article migré ──────────────────────────────────────────────── */

/* Reprise de la surcharge `#content img` du site actuel : les images du HTML
   Joomla portent des largeurs fixes en attribut, qui débordent sur mobile. */
.corps-migre img { max-width: 100%; height: auto; }

.article-meta { font-size: 14px; line-height: 21px; color: var(--texte); }

/* ── Listes d'articles (catégorie, blog, accueil) ───────────────────────────
   Aucun fond, aucune bordure, aucune ombre : un article de liste repose à même
   le fond de page. C'est ce que fait le site actuel, et c'est aussi ce qui
   permet au texte courant de garder le gris de la charte — sur une surface
   plus claire il faudrait le remonter d'un cran (voir l'encadré ci-dessus). */

.article-illustration { background: var(--fond-secondaire); }

/* Le filet vertical qui sépare la date du titre, et son gris. Le #7c8290 du
   thème donne 3,11:1 : on sert le gris de la charte, qui est la même teinte
   un cran plus haut. */
.tm-article-date {
    border-right: 2px solid rgba(255, 255, 255, .07);
    color: var(--texte);
}

/* La couleur du titre de liste n'est PAS ici : elle contredit la règle
   générique `a`, donc elle vit dans le style critique du gabarit. La laisser
   dans cette feuille différée rendait les titres bleus, et soulignés au
   survol, tant qu'elle n'était pas arrivée. */

/* Le lien de la méta — « Publié dans Blog » — n'a AUCUNE règle à lui : il
   prend le bleu générique des liens, non souligné, comme sur le site actuel
   (le thème n'écrit rien pour lui non plus). Arbitrage de Bjorn du 20/08/2026.

   Ce qu'on y perd, et qu'il ne faut pas redécouvrir : ce bleu et le gris qui
   l'entoure ont 1,01:1 ENTRE EUX. Chacun est lisible sur le fond de page, mais
   rien ne distingue le lien de son voisinage sinon la teinte — ce que WCAG
   1.4.1 refuse. Le soulignement posé ici jusqu'au 20/08 corrigeait cela ; il a
   été retiré parce que la fidélité au site actuel prime sur ce point. Le jour
   où on veut les deux, la sortie n'est pas de re-souligner mais de trouver une
   teinte de lien qui tienne 3:1 avec le gris de la méta. */
.uk-article-meta { color: var(--texte); }

/* Sur les surfaces plus claires que le fond de page, la méta et le texte
   discret remontent au gris clair : le gris courant y tombe sous 4,5:1. */
.uk-panel-box .article-meta, .uk-panel-box .uk-article-meta, .uk-panel-box .uk-text-muted,
.uk-table-striped tbody .uk-text-muted, .uk-list-striped .uk-text-muted { color: var(--texte-clair); }

.categorie-intro { margin-bottom: 20px; }

/* ── Article, vue détail ────────────────────────────────────────────────── */

.article-detail figure img { width: 100%; height: auto; background: var(--fond-secondaire); }

/* ── Formulaire ─────────────────────────────────────────────────────────── */

.formulaire input, .formulaire select, .formulaire textarea {
    padding: 4px 8px;
    border: 1px solid var(--separation);
    background: var(--fond-secondaire);
    /* Le thème d'origine met le gris du texte courant dans les champs. On
       monte au gris clair : sur le fond du champ, plus clair que celui de la
       page, le gris courant redescend sous 4,5:1. */
    color: var(--texte-clair);
    font-family: inherit;
    font-size: 1rem;
    font-weight: inherit;
}

.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus {
    border-color: var(--lien);
}

.champ label { color: var(--texte-clair); }
.obligatoire { color: var(--alerte); }

/* L'aide d'un champ : ce qu'il faut savoir AVANT de saisir. Sur la demande de
   devis, c'est elle qui porte les quatre champs qu'on n'a pas créés (marque,
   modèle, année, kilométrage) et les formats de photo acceptés.
   Couleur `--texte` et non un gris plus pâle : à 14 px, tout ce qui descend
   sous 4,5:1 sur `--fond-page` échoue AA, et une aide illisible ne sert rien. */
.aide-champ {
    display: block;
    max-width: 46em;
    margin: 2px 0 5px;
    font-size: 14px;
    line-height: 21px;
    color: var(--texte);
}

.champ-en-erreur input, .champ-en-erreur select, .champ-en-erreur textarea {
    border-color: var(--danger);
}

.erreur-champ {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    line-height: 21px;
    color: var(--alerte); /* le rouge de la charte échoue AA sur ce fond */
}

.message { padding: 10px; margin-bottom: 20px; }
.message-succes { background: var(--succes); color: var(--fond-sombre); }
.message-erreur { background: var(--alerte); color: var(--fond-sombre); }

/* ── Boutons ────────────────────────────────────────────────────────────── */

.bouton {
    display: inline-block;
    min-height: 35px;
    padding: 0 12px;
    border: 0;
    background: var(--separation);
    color: var(--texte-clair);
    font-family: inherit;
    font-size: 1rem;
    font-weight: inherit;
    line-height: 35px;
    text-align: center;
    cursor: pointer;
}

.bouton:hover, .bouton:focus { background: var(--separation-claire); color: #fff; text-decoration: none; }
.bouton-primaire { background: var(--primaire); color: #fff; }
.bouton-primaire:hover, .bouton-primaire:focus { background: var(--primaire-ombre); color: #fff; }

/* « Lire la suite », sous les extraits des listes. Discret au repos, bleu au
   survol : c'est le comportement du bouton du thème. Ses dimensions sont dans
   le style critique, ici seulement son habillage. */
.uk-button {
    background: var(--fond-sombre);
    border: 1px solid rgba(255, 255, 255, .1);
    color: var(--texte-clair);
    text-decoration: none;
}

.uk-button:hover, .uk-button:focus {
    background: var(--primaire);
    border-color: var(--primaire);
    color: #fff;
    text-decoration: none;
}

/* ── Navigation : le fond qui bascule au survol ─────────────────────────────
   Le thème anime un pseudo-élément posé derrière le lien : il part couché
   (`rotateX(-70deg)`, invisible) et se redresse en deux dixièmes de seconde.
   C'est un effet purement décoratif, donc il vit ici et non dans le style
   critique — au pire, il manque pendant les quelques millisecondes qui
   précèdent l'arrivée de cette feuille, et personne ne survole si tôt.
   L'ombre interne haute reproduit le dégradé du thème sans dégradé.
   La règle globale `prefers-reduced-motion`, en fin de fichier, désactive la
   bascule pour qui l'a demandé — le fond, lui, reste. */
@media (min-width: 960px) {
    .nav-liste > li > a::before {
        content: "";
        display: block;
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        z-index: -1;
        opacity: 0;
        transform: rotateX(-70deg);
        transform-style: preserve-3d;
        transition: all .2s linear;
    }

    .nav-liste > li:hover > a::before,
    .nav-liste > li:focus-within > a::before {
        background: var(--primaire);
        box-shadow: inset 0 8px 12px -2px var(--primaire-ombre);
        opacity: 1;
        transform: rotateX(0deg);
    }

    /* Le menu déroulant reprend l'ombre interne du thème, en bas cette fois :
       c'est ce qui donne au panneau son fond légèrement dégradé. */
    .nav-liste > li > ul { box-shadow: inset 0 -8px 16px -4px var(--primaire-ombre), 0 2px 6px rgba(0, 0, 0, .45); }
    .nav-liste > li > ul a:hover, .nav-liste > li > ul a:focus { background: rgba(255, 255, 255, .12); color: #fff; }
}

/* ── Mosaïques ──────────────────────────────────────────────────────────────
   Ce que produit la migration des six galeries Widgetkit :
   <div class="mosaique"><figure><img …></figure>…</div>
   Aucun JavaScript, donc aucune visionneuse : le clic ouvre l'image, ce qui
   est le comportement que tous les navigateurs savent déjà rendre. La grille
   est posée dans le style critique ; ici, seulement l'habillage.
   Le rapport 1/1 imposé aux vignettes évite d'avoir à connaître les dimensions
   de chaque fichier — la place est réservée avant même l'arrivée de l'image. */

.mosaique figure {
    margin: 0;
    background: var(--fond-secondaire);
    box-shadow: 0 2px 6px rgba(45, 48, 53, .5);
}

.mosaique img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.mosaique figcaption {
    padding: 5px 8px;
    text-align: center;
    font-size: 13px;
    line-height: 20px;
    color: var(--texte-clair);
}

/* ── Visionneuse d'images ───────────────────────────────────────────────────
   Tout ce bloc est dans la feuille DIFFÉRÉE, et sans exception : la fenêtre
   est en position fixe et fermée au chargement, donc elle ne pose aucune boîte
   dans le flux. Ses dimensions sont d'ailleurs calculées en JavaScript, la
   fenêtre devant épouser l'image affichée.

   Le pilotage vient de `public/js/visionneuse.js`. Un visiteur sans JavaScript
   n'a rien de cassé : les images restent des liens vers le fichier, que le
   navigateur ouvre lui-même. */

.vignette-agrandissable { display: inline-block; cursor: zoom-in; }
.mosaique .vignette-agrandissable { display: block; }
.vignette-agrandissable:hover img { opacity: .85; }

#visionneuse-voile {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(45, 48, 53, .85);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s linear;
}
#visionneuse-voile.ouverte { opacity: 1; visibility: visible; }

#visionneuse {
    position: fixed;
    z-index: 1101;
    padding: 10px;
    background: var(--fond-secondaire);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .6);
}

#visionneuse img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    cursor: zoom-out;
}

#visionneuse button {
    position: absolute;
    border: 0;
    background: var(--fond-sombre);
    color: var(--texte-clair);
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}

#visionneuse button:hover, #visionneuse button:focus { background: var(--primaire); color: #fff; }

/* La croix de fermeture est le caractère « × » du bouton, jamais une image de
   fond : sur grade9, une icône de fond a pointé un fichier absent pendant des
   mois et produit 7 891 requêtes en 404, le premier 404 du site. */
#visionneuse-fermer {
    top: -17px; right: -17px;
    width: 34px; height: 34px;
    border-radius: 50%;
    font-size: 22px;
}

#visionneuse-precedent, #visionneuse-suivant {
    top: 50%;
    width: 34px; height: 44px;
    margin-top: -22px;
    font-size: 26px;
}
#visionneuse-precedent { left: -17px; }
#visionneuse-suivant   { right: -17px; }

#visionneuse-titre {
    position: absolute;
    left: 10px; bottom: -18px;
    max-width: calc(100% - 20px);
    margin: 0;
    padding: 2px 8px;
    background: var(--fond-sombre);
    color: var(--texte-clair);
    font-size: 12px;
    line-height: 18px;
}

/* ── Fil d'Ariane ───────────────────────────────────────────────────────── */

.fil-ariane { color: var(--texte); }
.fil-ariane li + li::before { color: var(--separation-claire); }
/* Le dernier maillon est la page courante : il se distingue par la teinte des
   titres, pas par une graisse — la police du site n'a que trois graisses, et
   celle des titres est déjà la plus légère. */
.fil-ariane span { color: var(--texte-clair); }

/* ── Colonne de droite ──────────────────────────────────────────────────────
   Les panneaux sont des `.uk-panel-box`, habillés plus bas avec le reste de la
   compatibilité UIkit : rien à écrire pour eux ici. Ne restent que le menu
   accordéon et les listes à vignette, dont les couleurs suivent la règle du
   haut de ce fichier — sur une surface plus claire que le fond de page, le
   texte et les liens montent d'un cran. */

.menu-lateral a { color: var(--lien); }
.menu-lateral a:hover, .menu-lateral a:focus { color: #fff; text-decoration: none; }
.menu-lateral li.ouvert > a, .menu-lateral a[aria-current="page"] { color: #fff; }
.menu-lateral li + li { border-top: 1px solid rgba(255, 255, 255, .07); }
.menu-lateral ul li:first-child { border-top: 0; }

.bloc-liens li + li { border-top: 1px solid rgba(255, 255, 255, .07); }
.bloc-liens h3 a { color: var(--lien); }
.bloc-liens h3 a:hover, .bloc-liens h3 a:focus { color: #fff; text-decoration: none; }

/* ── Pagination ─────────────────────────────────────────────────────────────
   La page courante est une pastille pleine, les maillons inactifs sont gris :
   c'est ce que rend la pagination de Joomla, et c'est aussi le seul repère non
   coloré qui distingue les trois états. */

.pagination a { color: var(--lien); }
.pagination a:hover, .pagination a:focus { color: var(--lien-survol); text-decoration: none; background: var(--fond-secondaire); }
.pagination .page-courante { background: var(--primaire); color: #fff; }
.pagination .page-inactive { color: var(--separation-claire); }

/* ── Pied ───────────────────────────────────────────────────────────────── */

.pied { color: var(--texte); }
/* Les titres des quatre boîtes gardent la taille du thème — `.uk-panel-title`,
   28 px / 34 px. Une règle `.pied h2` les ramenait à 15 px : plus spécifique,
   elle gagnait sans qu'on la voie, et les boîtes n'avaient plus de tête.
   Corrigé le 31/08/2026 sur relevé de Bjorn. */
.pied a { color: var(--texte); }
.pied a:hover, .pied a:focus { color: #fff; }
.pied .uk-panel-box a { color: var(--lien); }
.pied .uk-panel-box a:hover, .pied .uk-panel-box a:focus { color: var(--lien-survol); }
.pied-liste li + li { margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, .07); }
.pied p { margin: 0 0 10px; }
.pied .panneau-centre img { margin-bottom: 10px; }

/* Le pied ne sert que le premier niveau : les entrées du menu de pied sont
   plates en base, et un sous-niveau qui apparaîtrait là serait une erreur de
   saisie plutôt qu'une intention. On le rend lisible sans le mettre en avant. */
.pied-liste ul { padding-left: 15px; }

/* Les logos des sites frères reposent sur un aplat plus clair : les fichiers
   d'origine sont dessinés sur fond sombre, l'aplat de `uk-panel-box-third`
   leur redonne le contraste qu'ils avaient dans le thème. */
.pied-logos a:hover img, .pied-logos a:focus img { opacity: .8; }

/* Les pastilles des réseaux sociaux : fond gris du thème (#42464e, notre
   --fond-secondaire), pictogramme dans le gris du TEXTE — c'est `.tm-footer a`
   du thème qui le décide, pas `.uk-icon-button`. Voir le style critique du
   gabarit pour la cascade complète.
   Le gris courant y donne 3,58:1, sous le seuil de 4,5:1 du texte mais au-dessus
   des 3:1 qu'exige WCAG 1.4.11 pour un objet graphique — et c'en est un : un
   pictogramme de 30 px, doublé d'un intitulé en texte masqué. */
.pied-reseaux a { background: var(--fond-secondaire); color: var(--texte); }
.pied-reseaux a:hover, .pied-reseaux a:focus { background: var(--primaire); color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   Compatibilité UIkit
   ─────────────────────────────────────────────────────────────────────────
   Le corps des articles migrés porte encore les classes du thème Joomla. Le
   relevé sur les 41 articles publiés donne exactement ceci, et rien d'autre :
     52 tables uk-table (+striped, +condensed, +hover)
     28 barres uk-progress
     21+ largeurs uk-width-large-*
     15 uk-text-warning, 11 uk-text-info
      4 uk-badge,  3 uk-alert-warning
      1 uk-panel-box-primary
   On écrit ce minimum-là. Embarquer UIkit pour ça coûterait 200 Ko et la
   moitié du budget de performance ; réécrire le HTML de 41 articles coûterait
   une session et un risque de régression sur du contenu figé depuis 2021.
   ══════════════════════════════════════════════════════════════════════════ */

.uk-table { width: 100%; border-collapse: collapse; }
.uk-table th, .uk-table td { padding: 8px; }
.uk-table th { text-align: left; color: var(--texte-clair); font-weight: var(--graisse-appuyee); }
.uk-table td { vertical-align: top; }
.uk-table thead th { vertical-align: bottom; }
.uk-table caption { text-align: left; font-size: 13px; font-style: italic; color: var(--texte); }
/* Le texte est monté sur TOUT le corps du tableau, pas seulement sur les
   lignes teintées : une ligne sur deux plus claire que l'autre se lit comme
   un défaut d'affichage. */
.uk-table-striped tbody, .uk-table-hover tbody { color: var(--texte-clair); }
.uk-table-striped tbody a, .uk-table-hover tbody a { color: var(--lien-survol); }
.uk-table-striped tbody tr:nth-of-type(odd) { background: var(--fond-secondaire); }
.uk-table-condensed td { padding: 4px 8px; }
.uk-table-hover tbody tr:hover { background: var(--separation-sombre); }

/* Les tables de tarifs ont deux colonnes de texte long : sur un téléphone,
   elles débordent. On les fait défiler DANS leur boîte plutôt que de laisser
   la page entière partir en travers. */
@media (max-width: 767px) {
    .uk-table { display: block; overflow-x: auto; }
}

.uk-alert { padding: 10px; margin-bottom: 20px; background: var(--primaire); color: #fff; }
.uk-alert > :last-child { margin-bottom: 0; }
.uk-alert h1, .uk-alert h2, .uk-alert h3, .uk-alert h4, .uk-alert h5, .uk-alert h6 { color: inherit; }
.uk-alert a { color: #fff; text-decoration: underline; }
.uk-alert-warning { background: var(--alerte); color: var(--fond-sombre); }
.uk-alert-warning a { color: var(--fond-sombre); }
.uk-alert-success { background: var(--succes); color: var(--fond-sombre); }
.uk-alert-success a { color: var(--fond-sombre); }
.uk-alert-danger { background: var(--danger); color: #fff; }

.uk-progress { height: 20px; margin-bottom: 20px; background: var(--fond-secondaire); overflow: hidden; line-height: 20px; }
.uk-progress-bar { width: 0; height: 100%; float: left; background: var(--primaire); color: #fff; font-size: 13px; text-align: center; }
.uk-progress-mini { height: 6px; }
.uk-progress-small { height: 12px; }
.uk-progress-success .uk-progress-bar { background: var(--succes); color: var(--fond-sombre); }
.uk-progress-warning .uk-progress-bar { background: var(--alerte); color: var(--fond-sombre); }
.uk-progress-danger .uk-progress-bar { background: var(--danger); color: #fff; }

.uk-list { padding: 0; list-style: none; }
.uk-list-line > li:nth-child(n+2) { margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, .07); }
.uk-list-striped { color: var(--texte-clair); }
.uk-list-striped a { color: var(--lien-survol); }
.uk-list-striped > li { padding: 5px; }
.uk-list-striped > li:nth-of-type(odd) { background: var(--fond-secondaire); }
.uk-list-space > li:nth-child(n+2) { margin-top: 10px; }

.uk-thumbnail {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--fond-secondaire);
    box-shadow: 0 2px 6px rgba(45, 48, 53, .5);
}
a.uk-thumbnail:hover, a.uk-thumbnail:focus {
    background: var(--separation);
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(45, 48, 53, .9);
}
.uk-thumbnail-caption { margin: 5px auto; text-align: center; color: var(--texte-clair); }
.uk-thumbnail-expand, .uk-thumbnail-expand > img { width: 100%; }

.uk-panel { display: block; position: relative; }
.uk-panel::after { content: ""; display: table; clear: both; }
.uk-panel > :not(.uk-panel-title):last-child { margin-bottom: 0; }
.uk-panel-title { margin: 0 0 20px; font-size: 28px; line-height: 34px; font-weight: var(--graisse-normale); color: var(--texte-clair); }
/* padding 10px, et non les 20 de UIkit : c'est la surcharge de custom.css. */
.uk-panel-box { padding: 10px; background: var(--fond-secondaire); color: var(--texte-clair); }
.uk-panel-box a { color: var(--lien); }
.uk-panel-box-primary {
    background: var(--primaire);
    color: #fff;
    box-shadow: inset 0 0 40px var(--primaire-ombre);
    min-height: 101px;
}
.uk-panel-box-primary .uk-panel-title, .uk-panel-box-primary a { color: #fff; }
.uk-panel-box-primary a:hover, .uk-panel-box-primary a:focus { color: var(--bleu-pale); }
.uk-panel-box-secondary { padding: 0; background: var(--fond-sombre); box-shadow: inset 0 0 40px var(--fond-page); }
.uk-panel-box-third { padding: 10px; background: var(--fond-page); }

.uk-badge {
    display: inline-block;
    padding: 0 5px;
    background: var(--primaire);
    color: #fff;
    font-size: 12px;
    font-weight: var(--graisse-appuyee);
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    border-radius: 1px;
}

/* Le thème d'origine sert #4596d5 pour uk-text-info et #7c8290 pour
   uk-text-muted : 3,9:1 et 3,1:1. On sert les teintes de la charte.
   uk-text-danger n'est volontairement PAS repris : #d13f3c donne 2,56:1 sur le
   fond de page, et aucun article ne l'emploie — sans règle, le texte garde la
   couleur du corps, qui est conforme. */
.uk-text-muted { color: var(--texte); }
.uk-text-info { color: var(--lien); }
.uk-text-success { color: var(--succes); }
.uk-text-warning { color: var(--alerte); }

.uk-align-left, .uk-align-right, .uk-align-center { display: block; margin-bottom: 20px; max-width: 100%; }
.uk-align-left { float: left; margin-right: 20px; }
.uk-align-right { float: right; margin-left: 20px; }
.uk-align-center { margin-left: auto; margin-right: auto; }
/* Sous 480 px, une image flottante ne laisse plus la place à une ligne de
   texte : elle reprend le flux. */
@media (max-width: 479px) {
    .uk-align-left, .uk-align-right { float: none; margin-left: 0; margin-right: 0; }
}

.uk-clearfix::after { content: ""; display: table; clear: both; }
.uk-margin-remove { margin: 0; }
.uk-margin-bottom-remove { margin-bottom: 0; }
.uk-h5 { font-size: 15px; line-height: 22px; }
/* `uk-article-title` et `uk-article-meta` sont posés dans le style critique :
   ce sont des tailles, donc des dimensions, et une taille qui n'arriverait
   qu'avec la feuille différée réarrangerait la page en cours de chargement.
   Seules leurs couleurs vivent ici, plus haut dans ce fichier. */
.uk-article-lead { font-size: 19px; line-height: 25px; font-weight: var(--graisse-appuyee); }

/* Les largeurs `uk-width-large-*` enveloppent les tables de tarifs. Elles sont
   employées SANS conteneur `uk-grid` dans le contenu migré : ce sont donc de
   simples blocs, et il ne faut surtout pas leur ajouter de flottement. */
@media (min-width: 960px) {
    .uk-width-large-1-1, .uk-width-large-1 { width: 100%; }
    .uk-width-large-1-2 { width: 50%; }
    .uk-width-large-2-3 { width: 66.6%; }
    .uk-width-large-3-4 { width: 75%; }
}

/* ── Section d'archives ────────────────────────────────────────────────────
   Une liste de liens, et rien d'autre : ces pages ne sont plus des offres, les
   mettre en vignettes comme les articles vivants les remettrait en avant.

   L'indentation vient de `Contenu::pagesArchivees()`, qui compte les ancêtres
   RÉELLEMENT listés et non les segments du chemin. Les classes sont préfixées
   `archives-` : `niveau-1` appartient déjà aux menus, et deux listes sans
   rapport qui partagent une classe finissent par bouger ensemble. */
.archives-intro { margin-bottom: 25px; }
.archives-groupe + .archives-groupe { margin-top: 30px; }
.archives-groupe h2 { margin-bottom: 10px; }
.archives-liste { margin: 0; padding: 0; list-style: none; }
.archives-liste li { padding: 4px 0; }
.archives-liste li + li { border-top: 1px solid rgba(255, 255, 255, .07); }
.archives-niveau-1 { padding-left: 20px; }
.archives-niveau-2 { padding-left: 40px; }

/* ── Bandeau de consentement aux cookies ───────────────────────────────────
   Position et proportions reprises de grade9, couleurs de la charte. Caché
   par l'attribut `hidden`, que public/js/mesure.js retire. Il vit dans la
   feuille différée et non dans le style critique : il est inséré en fin de
   page, donc hors du premier écran s'il s'affiche avant elle. */
.bandeau-cookies {
    position: fixed; right: 24px; bottom: 24px; z-index: 9000;
    max-width: 340px; padding: 18px 22px 16px;
    background: var(--fond-sombre); color: var(--texte-clair);
    border: 1px solid var(--separation); border-radius: 6px;
    box-shadow: 0 2px 18px rgba(0, 0, 0, .45);
    font-size: 14px; line-height: 1.5;
}
.bandeau-cookies[hidden] { display: none; }
.bandeau-cookies-titre { margin: 0 0 8px; font-weight: var(--graisse-forte); }
.bandeau-cookies-texte { margin: 0 0 14px; }
.bandeau-cookies-actions { display: flex; gap: 10px; }
.bandeau-cookies-actions button {
    flex: 1; padding: 8px 12px; border: 0; border-radius: 4px; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: var(--graisse-forte);
}
.bandeau-cookies-accepter { background: var(--primaire); color: #fff; }
.bandeau-cookies-accepter:hover { background: var(--primaire-ombre); }
.bandeau-cookies-refuser { background: var(--separation); color: var(--texte-clair); }
.bandeau-cookies-refuser:hover { background: var(--separation-claire); }
@media (max-width: 480px) {
    .bandeau-cookies { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}

/* ── Mouvement réduit ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}