/* Arborescence du site : fil d'ariane et « Voir aussi » (DESIGN.md §10, 01/11/2026).
   Générés par outils/construire.py depuis src/_arbre.json (arbre des pages de Web-Adns) et liés par le build sur les seules
   pages qui ont une arbo (fille d'une autre page que l'accueil, ou mère d'une telle page).
   Classes sans préfixe ad- : EasyList et AdGuard Base masquent .ad-wrap, .ad-btn, .ad-point (incident du 27/10/2026). */

/* Fil d'ariane : une ligne sous l'en-tête, au-dessus du haut de page, quelle que soit sa composition. */
.fil-ariane { background: var(--ad-fond); border-bottom: 1px solid var(--ad-filet); font-size: var(--ad-t-legende);
              line-height: var(--ad-il-legende); color: var(--ad-texte-doux); }
.fil-ariane__cadre { list-style: none; margin: 0 auto; width: 100%; max-width: calc(var(--ad-max) + 2 * var(--ad-gouttiere));
                     padding: 6px var(--ad-gouttiere); display: flex; flex-wrap: wrap; align-items: center; }
.fil-ariane li { display: inline-flex; align-items: center; min-width: 0; }
.fil-ariane li + li::before { content: "›"; content: "›" / ""; margin-inline: .6em; color: var(--ad-texte-discret); }
.fil-ariane a { min-height: 32px; display: inline-flex; align-items: center; color: var(--ad-texte-doux);
                text-decoration: underline; text-decoration-color: var(--ad-lien-trait); text-underline-offset: .22em; }
@media (hover: hover) { .fil-ariane a:hover { color: var(--ad-texte); text-decoration-color: currentColor; } }
.fil-ariane [aria-current="page"] { color: var(--ad-texte); font-weight: 560; }
@media (pointer: coarse) { .fil-ariane a { min-height: 44px; } }
/* Pages au squelette gp2 (mises en scène) : ad-gipco-v3.css pose l'en-tête en absolu sur la photo du haut de page. Le fil
   s'y pose juste sous l'en-tête, sur la photo, en clair : barre du téléphone (36 + 1 px) + rangée principale (72 px) au-delà
   de 1 179 px ; rangée seule (64 px) en dessous (ad-entete-v2.css et ad-socle.css cachent la barre). Le menu mobile ouvert
   (en-tête plein, z-index 10) le recouvre. */
body:has(main.gp2) .fil-ariane { position: absolute; top: 109px; left: 0; right: 0; z-index: 3; background: none; border: 0;
                                 color: rgba(255, 255, 255, .8); }
/* Pastille d'encre à 62 % : le fil se lit sur n'importe quelle photo (pire cas, photo blanche : fond ≈ #6a6a6a, blanc à 5,3:1).
   Le texte reste aligné sur celui du haut de page (la pastille déborde de 12 px à gauche). */
body:has(main.gp2) .fil-ariane__cadre { width: fit-content; max-width: calc(100% - 2 * var(--ad-gouttiere) + 24px);
  margin: 0 auto 0 calc(max(0px, (100% - var(--ad-max) - 2 * var(--ad-gouttiere)) / 2) + var(--ad-gouttiere) - 12px);
  padding: 0 12px; border-radius: 999px; background: rgba(14, 13, 12, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body:has(main.gp2) .fil-ariane a { color: rgba(255, 255, 255, .86); text-decoration-color: rgba(255, 255, 255, .45); }
body:has(main.gp2) .fil-ariane li + li::before { color: rgba(255, 255, 255, .6); }
body:has(main.gp2) .fil-ariane [aria-current="page"] { color: #fff; }
@media (hover: hover) { body:has(main.gp2) .fil-ariane a:hover { color: #fff; text-decoration-color: currentColor; } }
@media (max-width: 1179px) { body:has(main.gp2) .fil-ariane { top: 64px; } }

/* Voir aussi : la racine et les sœurs d'une page fille, ou les filles d'une racine. Liens texte en cartes, sans vignette
   (règle du 30/10/2026 : jamais un bloc de vignettes générique) ; toute la carte est le lien (doctrine d'affordance). */
.voir-aussi { background: var(--ad-fond); border-top: 1px solid var(--ad-filet); padding-block: 40px 48px; }
.voir-aussi__cadre { width: 100%; max-width: calc(var(--ad-max) + 2 * var(--ad-gouttiere)); margin-inline: auto; padding-inline: var(--ad-gouttiere); }
/* Spécificité 0,2,0 : passe devant « main.gp2 h2 » (0,1,2) des pages mises en scène. */
.voir-aussi .voir-aussi__titre { font-family: var(--ad-police-titre); font-size: var(--ad-t-legende); line-height: var(--ad-il-legende);
                                 font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-wrap: wrap; max-width: none;
                                 color: var(--ad-texte-doux); margin: 0 0 16px; }
.voir-aussi__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
                     grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.voir-aussi__carte { border: 1px solid var(--ad-filet); border-radius: 12px; background: var(--ad-fond-alt);
                     padding: 18px 52px 20px 20px; transition: border-color .15s ease-out, background-color .15s ease-out; }
.voir-aussi__carte a { font-family: var(--ad-police-titre); font-size: 1.0625rem; font-weight: 600; line-height: 1.3;
                       color: var(--ad-texte); text-decoration: none; }
.voir-aussi__carte p { margin: 6px 0 0; font-size: var(--ad-t-petit); line-height: var(--ad-il-petit); color: var(--ad-texte-doux);
                       text-wrap: pretty; }
.voir-aussi__carte .bi { position: absolute; top: 20px; right: 20px; color: var(--ad-texte-discret); transition: transform .15s ease-out, color .15s ease-out; }
@media (hover: hover) {
  .voir-aussi__carte:hover { border-color: var(--ad-texte-discret); background: var(--ad-fond); }
  .voir-aussi__carte:hover a { text-decoration: underline; text-decoration-color: var(--ad-lien-trait); text-underline-offset: .2em; }
  .voir-aussi__carte:hover .bi { color: var(--ad-texte); transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { .voir-aussi__carte, .voir-aussi__carte .bi { transition: none; } }