/* Ajouts de l'intégration aux CSS des maquettes (arche.css, motion.css,
 * pages.css, repris tels quels sauf `.progress`, déjà pris par Bootstrap). */

/* Puces de marque en liens (<a>) plutôt qu'en boutons. */
a.chip{display:inline-flex;align-items:center}

/* Recherche de l'en-tête : panneau Bootstrap `collapse` sous la barre. */
.site-header .search-panel{background:rgba(35,35,35,.96);border-bottom:1px solid var(--arche-aube)}
.site-header .search-panel .search-big{max-width:none;margin:0;padding-block:18px}
.site-header:has(.search-panel.show, .search-panel.collapsing){background:rgba(35,35,35,.96)}

/* Pictos ArcheIcons dans les pastilles sociales du pied de page. */
.socials .arche-social-icon{width:16px;height:16px;fill:currentColor}

/* Pagination en liens (<a>) : mêmes styles que les <button> de la maquette. */
.pager a{min-width:44px;height:44px;padding:0 6px;border-radius:999px;border:1px solid transparent;display:grid;place-items:center;font:600 14px 'Archivo',sans-serif;font-variant-numeric:tabular-nums;color:var(--arche-dark);transition:transform .16s var(--ease-out),border-color .2s var(--ease-out),background-color .2s var(--ease-out),color .2s var(--ease-out)}
.pager a:active{transform:scale(.95)}
.pager a[aria-current]{background:var(--arche-dark);color:var(--arche-white)}
.pager .off{opacity:.35}
@media (hover:hover){.pager a:not([aria-current]):hover{border-color:var(--arche-aube);color:var(--arche-aube)}}

/* Focus : un seul anneau, à la forme de l'élément (la règle globale des
 * maquettes empilait plusieurs traits et carrait les pastilles). */
.chip:focus-visible,.fchip:focus-visible,.tagx:focus-visible,.pager a:focus-visible,
.btn-arche:focus-visible,.btn-admin:focus-visible,.toggle:focus-visible{outline:2px solid var(--arche-aube);outline-offset:2px;box-shadow:none;border-radius:999px}
.round:focus-visible,.icon-btn:focus-visible,.socials a:focus-visible{outline:2px solid var(--arche-aube);outline-offset:2px;border-radius:50%}
/* Place pour l'anneau de focus dans la barre de puces, qui défile. */
.fchips{padding:4px;margin:-4px}

/* Réseaux du pied de page : ronds jamais écrasés. */
.socials{flex-wrap:wrap}
.socials a{flex:none}

/* Carte à pleine largeur de sa colonne, quel que soit son titre. */
.d-flex > .card-v{flex:1 1 auto;width:100%;min-width:0}

/* Lecteur intégré : erreur lisible sur fond sombre (--err manque de contraste). */
.emb-err{margin:14px 0 0!important;color:#FF8A80!important;font-size:13px}
/* Le logo reste lisible au-dessus du voile flouté du panneau. */
.emb-panel ~ .emb-top,.emb .emb-top{z-index:5}

/* Page vidéo : tags de la vidéo, en tête de « Explorer par thématique ». */
.tagx.on{border-color:var(--arche-aube);background:rgba(194,132,0,.12)}
.about .tags a{color:var(--arche-aube)}
@media (hover:hover){.about .tags a:hover{text-decoration:underline}}

/* Menu mobile (offcanvas Bootstrap), même vocabulaire que la navigation. */
.arche-menu{--bs-offcanvas-width:min(360px,88vw);--bs-offcanvas-bg:var(--arche-dark);--bs-offcanvas-color:var(--arche-white);border-left:1px solid var(--arche-aube)!important}
.arche-menu .offcanvas-header{height:var(--header-h);justify-content:space-between;border-bottom:1px solid rgba(250,250,250,.08)}
.arche-menu .logo{height:34px;width:auto}
.arche-menu .offcanvas-body{padding-top:8px}
.m-link{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid rgba(250,250,250,.08);font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(250,250,250,.8);transition:color .2s var(--ease-out)}
.m-link.active{color:var(--arche-aube)}
.m-label{margin:28px 0 6px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--arche-aube)}
.m-sub{display:block;padding:9px 0;font-size:15px;color:rgba(250,250,250,.7);transition:color .2s var(--ease-out)}
@media (hover:hover){.m-link:hover,.m-sub:hover{color:var(--arche-aube)}}
.arche-menu .btn-admin{width:100%;justify-content:center}
.arche-menu .btn-admin span{display:inline}