/* PLIGO — en-tête et pied de page COMMUNS à toutes les pages publiques
   (S26.330, 08/10) : / (accueil), /telecharger/, /legal/*, /packs/. Une seule
   feuille, servie depuis /telecharger/site.css (même dossier que le logo et
   les icônes). Autonome : ses couleurs ne dépendent d'aucune autre feuille.
   Seules l'accueil et /telecharger/ ont un script (site.js : « Version web »
   pour les personnes connectées, bouton clair / sombre, améliorations du menu).
   Le balisage commun (à garder identique d'une page à l'autre) est vérifié
   par tools/serveur/verifier_liens_site.py
   (test : python server/tests/pligo_liens_site_test.py).
   23/10 — Refonte du site (esprit Raycast) : barre vitrée flottante et
   collante, polices du site (hébergées dans /accueil/, licence OFL).
   29/10 — Navigation : liens vers les sections de l'accueil, bouton
   « Télécharger » mis en avant, menu smartphone en <details> (sans script),
   lien d'évitement, pied de page en colonnes + les applis SDI Dépannage. */
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800;
  font-stretch: 100%; font-display: swap; src: url(/accueil/bricolage.woff2) format("woff2");
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url(/accueil/figtree.woff2) format("woff2");
}
:root {
  --site-rouge: #c4262c;
  --site-texte: #1d1416;
  --site-doux: #6b5f60;
  --site-barre: rgba(255, 255, 255, .72);
  --site-barre-haut: rgba(255, 255, 255, .45);
  --site-panneau: rgba(255, 255, 255, .97);
  --site-ligne: rgba(60, 20, 22, .10);
  --site-ligne2: rgba(60, 20, 22, .18);
  --site-survol: rgba(60, 20, 22, .06);
  --site-bouton: #1d1416;
  --site-bouton-texte: #fff;
  --site-pied-texte: #6b5f60;
  --site-pied-fond: rgba(60, 20, 22, .035);
  --site-titre: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --site-police: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --site-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
/* Sombre par défaut ; clair seulement si choisi (27/10). */
  :root:not([data-theme="clair"]) {
    --site-rouge: #ff8e91;
    --site-texte: #f4eeee;
    --site-doux: #a39a9b;
    --site-barre: rgba(20, 17, 18, .62);
    --site-barre-haut: rgba(20, 17, 18, .30);
    --site-panneau: rgba(22, 19, 20, .97);
    --site-ligne: rgba(255, 255, 255, .09);
    --site-ligne2: rgba(255, 255, 255, .16);
    --site-survol: rgba(255, 255, 255, .07);
    --site-bouton: #f4eeee;
    --site-bouton-texte: #140e0f;
    --site-pied-texte: #a39a9b;
    --site-pied-fond: rgba(255, 255, 255, .02);
  }

body { font-family: var(--site-police); }
[hidden] { display: none !important; }
/* 29/10 — L'en-tête collant ne cache pas les titres visés par un lien (#…). */
main [id] { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.site-invisible {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Lien d'évitement : invisible tant qu'il n'a pas le focus clavier. */
.site-evitement {
  position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; border-radius: 12px;
  background: var(--site-bouton); color: var(--site-bouton-texte); font: 600 .95rem var(--site-police);
  text-decoration: none; transition: top .2s;
}
.site-evitement:focus { top: 12px; outline: 2px solid var(--site-rouge); outline-offset: 2px; }
main:focus { outline: none; }

/* En-tête : barre vitrée qui flotte au-dessus du contenu (collante).
   Logo + nom (→ /) · liens (sections de l'accueil, informations légales) ·
   thème, compte, « Télécharger » · menu (smartphone). */
.site-entete {
  position: sticky; top: 0; z-index: 50; padding: 12px 16px 0;
  color: var(--site-texte); font-family: var(--site-police);
}
.site-entete-int {
  position: relative; max-width: 1160px; margin: 0 auto; padding: 6px 6px 6px 10px; box-sizing: border-box;
  display: flex; align-items: center; gap: 8px;
  background: var(--site-barre); border: 1px solid var(--site-ligne); border-radius: 16px;
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .35);
  transition: background .3s, border-color .3s, box-shadow .3s;
}
/* Avec script (site.js) : barre plus légère tout en haut de la page, la
   bordure et l'ombre apparaissent dès qu'on fait défiler. */
.site-js:not(.site-defile) .site-entete-int { background: var(--site-barre-haut); border-color: transparent; box-shadow: none; }
.site-marque {
  display: flex; align-items: center; gap: 10px; color: var(--site-texte); text-decoration: none;
  min-width: 0; flex: none; padding: 2px 4px 2px 0; border-radius: 12px;
}
.site-marque img { width: 34px; height: 34px; border-radius: 9px; flex: none; background: #fff; }
/* 23/10 : l'assiette du logo tourne au survol et entre en tournant au chargement. */
.site-marque img { animation: site-logo-entre .9s cubic-bezier(.2, 1.4, .4, 1) backwards; transition: transform .9s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.site-marque:hover img, .site-marque:focus-visible img { transform: rotate(360deg) scale(1.08); box-shadow: 0 0 0 3px rgba(226, 57, 63, .25), 0 6px 18px -4px rgba(226, 57, 63, .55); }
@keyframes site-logo-entre { from { transform: rotate(-180deg) scale(.5); opacity: 0; } }
.site-marque-txt { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.site-marque-nom { font-family: var(--site-titre); font-size: 1.15rem; font-weight: 800; letter-spacing: .03em; }
.site-marque-sous { font-size: .72rem; color: var(--site-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Liens (PC). La section visible de l'accueil est surlignée (accueil.js). */
.site-nav { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 2px; }
.site-nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 40px;
  color: var(--site-doux); text-decoration: none; font-size: .92rem; font-weight: 500;
  padding: 0 12px; border-radius: 10px; white-space: nowrap; transition: color .2s, background .2s;
}
.site-nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 2px;
  background: var(--site-rouge); transform: scaleX(0); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--site-texte); background: var(--site-survol); }
.site-nav a[aria-current] { color: var(--site-texte); font-weight: 600; }
.site-nav a[aria-current]::after { transform: scaleX(1); }
/* 08/10 — « Version web » : bouton DIFFÉRENT (plein), affiché seulement aux
   personnes connectées (site.js, attribut data-si-connecte). */
.site-nav a.site-nav-web { background: var(--site-rouge); color: #fff; font-weight: 600; margin-left: 4px; }
.site-nav a.site-nav-web::after { display: none; }
:where(html:not([data-theme="clair"])) .site-nav a.site-nav-web { color: #140e0f; }
.site-nav a.site-nav-web:hover, .site-nav a.site-nav-web:focus-visible { filter: brightness(1.08); }

/* Zone compte : bouton thème (site.js), « Se connecter » (discret). */
.site-entete .compte-entete {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  min-width: 0; flex: none; margin-left: auto;
}
.site-nav + .compte-entete { margin-left: 0; }
.site-entete .entete-pseudo {
  font-size: .85rem; color: var(--site-doux); min-width: 0; max-width: 14em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.site-entete .btn-entete {
  display: inline-flex; align-items: center; min-height: 40px; box-sizing: border-box;
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--site-texte);
  background: transparent; border: 1px solid var(--site-ligne2); border-radius: 11px; padding: 0 14px;
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s, transform .2s;
}
.site-entete .btn-entete:hover, .site-entete .btn-entete:focus-visible { background: var(--site-survol); border-color: var(--site-rouge); }

/* Bouton principal « Télécharger », mis en avant sur toutes les pages. */
.site-cta {
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; box-sizing: border-box;
  padding: 0 16px; border-radius: 11px; color: #fff; text-decoration: none; white-space: nowrap;
  font-size: .92rem; font-weight: 700; background: linear-gradient(180deg, #c92b31, #a91f23);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 8px 22px -10px rgba(226, 57, 63, .9);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.site-cta svg { width: 16px; height: 16px; flex: none; }
.site-cta:hover, .site-cta:focus-visible { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset, 0 12px 28px -10px rgba(226, 57, 63, 1); }
.site-cta[aria-current] { box-shadow: 0 0 0 2px var(--site-rouge), 0 8px 22px -10px rgba(226, 57, 63, .9); }
.site-entete a:focus-visible, .site-entete button:focus-visible, .site-entete summary:focus-visible {
  outline: 2px solid var(--site-rouge); outline-offset: 2px;
}

/* Menu smartphone : <details>/<summary>, marche sans script ; site.js le
   ferme au clic sur un lien, à la touche Échap et au clic à l'extérieur. */
.site-menu { display: none; flex: none; }
.site-menu > summary {
  list-style: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px;
  box-sizing: border-box; border-radius: 12px; border: 1px solid var(--site-ligne2); color: var(--site-texte);
  transition: background .2s, border-color .2s;
}
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu > summary:hover { background: var(--site-survol); }
.site-menu[open] > summary { background: var(--site-survol); border-color: var(--site-rouge); }
/* Icône ☰ dessinée en CSS, qui devient une croix à l'ouverture. */
.site-menu-icone, .site-menu-icone::before, .site-menu-icone::after {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), background .2s;
}
.site-menu-icone { position: relative; }
.site-menu-icone::before, .site-menu-icone::after { content: ""; position: absolute; left: 0; }
.site-menu-icone::before { transform: translateY(-6px); }
.site-menu-icone::after { transform: translateY(6px); }
.site-menu[open] .site-menu-icone { background: transparent; }
.site-menu[open] .site-menu-icone::before { transform: rotate(45deg); }
.site-menu[open] .site-menu-icone::after { transform: rotate(-45deg); }
.site-menu-panneau {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 2;
  display: grid; gap: 2px; padding: 8px; max-height: calc(100vh - 100px); overflow-y: auto;
  background: var(--site-panneau); border: 1px solid var(--site-ligne2); border-radius: 16px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  animation: site-menu-ouvre .25s cubic-bezier(.2, .8, .2, 1);
}
@keyframes site-menu-ouvre { from { opacity: 0; transform: translateY(-6px); } }
.site-menu-panneau a {
  display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 10px;
  color: var(--site-texte); text-decoration: none; font-size: 1rem; font-weight: 600;
  transition: background .2s;
}
.site-menu-panneau a:hover, .site-menu-panneau a:focus-visible { background: var(--site-survol); }
.site-menu-panneau a[aria-current] { color: var(--site-rouge); background: var(--site-survol); }
.site-menu-panneau a.site-nav-web { color: var(--site-rouge); }
.site-menu-panneau .site-menu-compte { border-top: 1px solid var(--site-ligne); border-radius: 0 0 10px 10px; margin-top: 4px; }

/* Bouton « Haut de page » (site.js ; absent sans script). */
.site-haut {
  position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center; cursor: pointer; border-radius: 50%;
  color: var(--site-texte); background: var(--site-panneau); border: 1px solid var(--site-ligne2);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s, transform .3s, visibility .3s, border-color .2s;
}
.site-haut svg { width: 18px; height: 18px; }
.site-haut.site-haut-visible { opacity: 1; visibility: visible; transform: none; }
.site-haut:hover { border-color: var(--site-rouge); }
.site-haut:focus-visible { outline: 2px solid var(--site-rouge); outline-offset: 2px; }

/* Pied : présentation, colonnes de liens, contact, les applis SDI Dépannage. */
.site-pied {
  color: var(--site-pied-texte); font-family: var(--site-police); font-size: .92rem; line-height: 1.55;
  padding: 56px 16px 32px; margin-top: 96px; border-top: 1px solid var(--site-ligne);
  background: linear-gradient(180deg, var(--site-pied-fond), transparent 70%);
}
.site-pied-int {
  max-width: 1160px; margin: 0 auto; display: grid; gap: 32px 28px;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
}
.site-pied h2 {
  margin: 0 0 10px; font: 600 .74rem var(--site-mono); text-transform: uppercase; letter-spacing: .14em;
  color: var(--site-texte);
}
.site-pied p { margin: 0; }
.site-pied-marque { display: grid; gap: 12px; align-content: start; max-width: 32ch; }
.site-pied a.site-pied-logo {
  display: inline-flex; align-items: center; gap: 10px; justify-self: start;
  font-family: var(--site-titre); font-size: 1.2rem; font-weight: 800; letter-spacing: .03em; color: var(--site-texte);
}
.site-pied-logo img { width: 36px; height: 36px; border-radius: 10px; background: #fff; }
.site-pied-col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.site-pied-col a { padding: 5px 0; }
.site-pied-col p { font-size: .85rem; margin-top: 6px; }
.site-pied a { color: var(--site-pied-texte); text-decoration: none; overflow-wrap: anywhere; transition: color .2s; }
.site-pied a:hover, .site-pied a:focus-visible { color: var(--site-texte); text-decoration: underline; text-underline-offset: 3px; }
.site-pied a:focus-visible { outline: 2px solid var(--site-rouge); outline-offset: 2px; border-radius: 4px; }
.site-pied a[aria-current="page"] { font-weight: 700; color: var(--site-texte); }
.site-pied-applis { max-width: 1160px; margin: 40px auto 0; padding-top: 28px; border-top: 1px solid var(--site-ligne); }
.site-pied-applis ul {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.site-pied-applis li {
  display: grid; gap: 2px; align-content: start; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--site-ligne); transition: border-color .2s, background .2s;
}
.site-pied-applis li:hover { border-color: var(--site-ligne2); background: var(--site-survol); }
.site-pied-applis li a { font-weight: 700; color: var(--site-texte); }
.site-pied-applis li span { font-size: .85rem; }
.site-copyright { max-width: 1160px; margin: 28px auto 0 !important; font-size: .85rem; }

/* PC moyen : sous-titre du logo et pseudo masqués pour laisser la place aux liens. */
@media (max-width: 1099px) {
  .site-marque-sous, .site-entete .entete-pseudo { display: none; }
  .site-nav { gap: 0; }
  .site-nav a { padding: 0 8px; }
  .site-nav a::after { left: 8px; right: 8px; }
}
/* Tablette et smartphone : les liens passent dans le menu ☰. */
@media (max-width: 979px) {
  .site-nav { display: none; }
  .site-menu { display: block; }
  .site-entete .compte-entete { margin-left: auto; }
  .site-entete .site-theme { width: 44px; height: 44px; }
  .site-pied-int { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-pied-marque { grid-column: 1 / -1; max-width: 46ch; }
  .site-pied-applis ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Smartphone : « Se connecter » passe dans le menu ; cibles tactiles ≥ 44 px. */
@media (max-width: 599px) {
  .site-entete { padding: 8px 10px 0; }
  .site-entete-int { gap: 6px; padding: 5px 5px 5px 8px; }
  .site-entete .compte-entete .btn-entete { display: none; }
  .site-cta { min-height: 44px; padding: 0 13px; }
  .site-pied { padding-top: 44px; margin-top: 72px; }
  .site-pied-col a { padding: 11px 0; }
  .site-pied-applis li a { padding: 6px 0; }
}
@media (max-width: 359px) {
  .site-marque-txt { display: none; }
}
@media (max-width: 479px) {
  .site-pied-applis ul { grid-template-columns: minmax(0, 1fr); }
  .site-pied-int { gap: 28px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav a, .site-nav a::after, .site-entete .btn-entete, .site-marque img, .site-cta, .site-entete-int,
  .site-menu-icone, .site-menu-icone::before, .site-menu-icone::after, .site-menu-panneau, .site-haut,
  .site-evitement, .site-theme {
    transition: none; animation: none;
  }
}

/* 27/10 — Sombre par défaut sur tout le site ; clair seulement si la personne
   le choisit (bouton soleil / lune de l'en-tête, site.js, retenu dans le
   navigateur). Les pages sans script (légales, /packs/) restent en sombre. */
:root { color-scheme: dark; }
:root[data-theme="clair"] { color-scheme: light; }
.site-theme {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; cursor: pointer; flex: none;
  color: var(--site-texte); background: transparent; border: 1px solid var(--site-ligne2); border-radius: 11px;
  transition: background .2s, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.site-theme:hover { background: var(--site-survol); transform: rotate(25deg); }
.site-theme svg { width: 18px; height: 18px; }
.site-theme .site-theme-soleil { display: none; }
:root[data-theme="clair"] .site-theme .site-theme-lune { display: none; }
:root[data-theme="clair"] .site-theme .site-theme-soleil { display: block; }