/* ═══════════════════════════════════════════════════════════════════════════
   CHROME COMMUN DE LA VITRINE : barre de verre et méga-menus, tiroir mobile,
   pied de page (sélecteurs de langue et de thème), jetons de couleur.

   Chargé par la page d'accueil (avant accueil.css) et par TOUTES les autres
   pages (après site.css), qui reçoivent exactement la même barre et le même
   pied : chrome_accueil.py les recopie depuis l'accueil de chaque langue.
   Thème : data-theme vaut toujours « light » ou « dark », posé avant le
   premier rendu (choix enregistré sous twa-theme, sinon le système).
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Inter var";
  src:url("/fonts/inter-latin.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
:root{
  color-scheme:dark;
  --fond:#0b0b0d;
  --encre:#f7f7f8;
  --doux:#9d9da6;
  --pale:#6b6b74;
  --liseré:rgba(255,255,255,.08);
  --liseré-fort:rgba(255,255,255,.14);
  --verre:linear-gradient(rgba(247,247,248,.05),rgba(247,247,248,.02));
  --verre-fort:linear-gradient(rgba(247,247,248,.1),rgba(247,247,248,.05));
  --lueur:#d6d6dc;
  --lueur-2:#77777f;
  --ombre-xl:0 20px 25px -5px rgba(0,0,0,.125),0 8px 10px -6px rgba(0,0,0,.125);
  --ombre-maquette:-12px 16px 48px rgba(0,0,0,.6);
  --r:12px;
  --conteneur:1280px;
  --police:"Inter var","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,monospace;
  --courbe:cubic-bezier(0,0,.2,1);
  /* Valeurs qui changent avec le thème (sombre par défaut) */
  --texte-2:#d4d4d8;
  --survol:rgba(255,255,255,.05);
  --bord-verre:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 60%,rgba(255,255,255,.06));
  --titre-de:#fafafa;--titre-a:#9a9aa3;
  --bouton-fort:linear-gradient(#fafafa,rgba(250,250,250,.72));--bouton-fort-survol:linear-gradient(rgba(250,250,250,.85),rgba(250,250,250,.62));--bouton-fort-encre:#121214;
  --bouton-verre-survol:linear-gradient(rgba(247,247,248,.15),rgba(247,247,248,.08));
  --barre-fond:rgba(11,11,13,.3);--barre-bord:rgba(255,255,255,.1);
  --halo-1:rgba(130,130,140,.5);--halo-2:rgba(220,220,226,.3);
  --planete-fond:rgba(11,11,13,.92);
  --filtre-logo:brightness(0) invert(1);
  --lueur-chiffre:0 0 24px rgba(255,255,255,.18);
  --vedette:linear-gradient(rgba(247,247,248,.12),rgba(247,247,248,.04));--vedette-lueur:0 0 48px -8px rgba(255,255,255,.12);
  --final-lueur:radial-gradient(closest-side,rgba(255,255,255,.28),rgba(255,255,255,.08) 55%,transparent);
  --fr-centre:#fff;--fr-centre-flou:#f2f2f7;
  --offert-fond:#d9f99d;--offert-encre:#0b0b0d;--offert-fond-doux:rgba(217,249,157,.14);--offert-encre-doux:#d9f99d;
  --panneau:rgba(17,17,20,.86);--panneau-ombre:0 24px 64px -12px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08);
}
.evitement{position:absolute;left:-9999px}
.evitement:focus{left:16px;top:16px;z-index:100;padding:10px 14px;background:var(--encre);color:var(--fond);border-radius:8px}
.conteneur{max-width:var(--conteneur);margin:0 auto;padding:0 clamp(16px,4vw,32px)}
/* ── Boutons ──────────────────────────────────────────────────────────── */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 20px;border-radius:6px;font-size:14px;font-weight:500;
  white-space:nowrap;transition:background .15s,box-shadow .15s,opacity .15s}
.bouton-sm{height:36px;padding:0 16px}
.bouton-clair{color:var(--bouton-fort-encre);background:var(--bouton-fort);box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)}
.bouton-clair:hover{background:var(--bouton-fort-survol)}
.bouton-verre{color:var(--encre);background:var(--verre-fort);box-shadow:inset 0 0 0 1px var(--liseré-fort),0 4px 6px -1px rgba(0,0,0,.125)}
.bouton-verre:hover{background:var(--bouton-verre-survol)}
.bouton-plein-largeur{width:100%}
/* ── Barre flottante ──────────────────────────────────────────────────── */
.barre{position:fixed;inset:12px 0 auto;z-index:50}
.barre-in{display:flex;align-items:center;gap:28px;padding:8px 8px 8px 14px;border-radius:16px;background:var(--barre-fond);
  box-shadow:inset 0 0 0 1px var(--barre-bord);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.marque{display:inline-flex;align-items:center;gap:9px;font-size:18px;font-weight:700;letter-spacing:-0.02em}
.marque-signe{width:20px;height:20px;border-radius:50%;background:linear-gradient(90deg,currentColor 50%,transparent 50%),repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px);
  box-shadow:inset 0 0 0 1.5px currentColor}
.barre-liens{display:flex;gap:4px;font-size:14px;font-weight:500;color:var(--doux)}
.barre-liens a{padding:6px 12px;border-radius:6px;transition:color .15s,background .15s}
.barre-liens a:hover{color:var(--encre);background:var(--survol)}
.barre-actions{margin-left:auto;display:flex;align-items:center;gap:16px}
.lien-barre{font-size:14px;font-weight:500}
@media (max-width:900px){.barre-liens{display:none}}
@media (max-width:480px){.masque-mobile{display:none}}
.badge-petit{margin-bottom:18px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:500;color:var(--doux);box-shadow:inset 0 0 0 1px var(--liseré-fort)}
/* Pied */
.pied{padding:48px 0 32px;border-top:1px solid var(--liseré)}
.pied-in{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:28px}
.pied-in > div p{margin-top:14px;color:var(--doux);font-size:14px}
.pied nav{display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--doux)}
.pied nav p{color:var(--encre);font-weight:600;margin-bottom:2px}
.pied nav a:hover,.pied-bas a:hover{color:var(--encre)}
.pied-bas{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:40px;font-size:13px;color:var(--doux)}
.pied-marques{margin-top:12px;font-size:12px;color:var(--pale)}
@media (max-width:800px){.pied-in{grid-template-columns:1fr 1fr}.pied-in > div:first-child{grid-column:1/-1}}
/* ═══ Thème clair ═══════════════════════════════════════════════════════
   Le thème suit le système, ou le choix fait dans le pied de page
   (data-theme posé avant le premier rendu par le script de <head>). */
:root[data-theme="light"]{
  color-scheme:light;
  --fond:#fbfbfc;
  --encre:#0b0b0d;
  --doux:#5f5f69;
  --pale:#8a8a94;
  --liseré:rgba(9,9,11,.08);
  --liseré-fort:rgba(9,9,11,.13);
  --verre:linear-gradient(rgba(255,255,255,.95),rgba(255,255,255,.72));
  --verre-fort:linear-gradient(rgba(9,9,11,.045),rgba(9,9,11,.02));
  --lueur:#a9abb8;
  --lueur-2:#d3d5e0;
  --ombre-xl:0 1px 2px rgba(9,9,11,.04),0 12px 28px -10px rgba(9,9,11,.1);
  --ombre-maquette:-12px 16px 48px rgba(24,24,40,.13);
  --texte-2:#3f3f46;
  --survol:rgba(9,9,11,.045);
  --bord-verre:linear-gradient(180deg,rgba(9,9,11,.1),rgba(9,9,11,.05) 60%,rgba(9,9,11,.08));
  --titre-de:#0b0b0d;--titre-a:#6b6b76;
  --bouton-fort:linear-gradient(#2a2a2f,#0b0b0d);--bouton-fort-survol:linear-gradient(#3f3f46,#18181b);--bouton-fort-encre:#fafafa;
  --bouton-verre-survol:linear-gradient(rgba(9,9,11,.07),rgba(9,9,11,.035));
  --barre-fond:rgba(255,255,255,.72);--barre-bord:rgba(9,9,11,.08);
  --halo-1:rgba(170,172,190,.32);--halo-2:rgba(205,208,224,.45);
  --planete-fond:rgba(251,251,252,.95);
  --filtre-logo:brightness(0);
  --lueur-chiffre:none;
  --vedette:linear-gradient(#fff,#f3f3f6);--vedette-lueur:0 24px 48px -18px rgba(9,9,11,.2);
  --final-lueur:radial-gradient(closest-side,rgba(150,155,185,.32),rgba(150,155,185,.1) 55%,transparent);
  --fr-centre:#c4c6d2;--fr-centre-flou:#d4d6e2;
  --offert-fond:#0b0b0d;--offert-encre:#d9f99d;--offert-fond-doux:#ecfccb;--offert-encre-doux:#3f6212;
  --panneau:rgba(255,255,255,.9);--panneau-ombre:0 28px 64px -18px rgba(24,24,40,.24),0 0 0 1px rgba(9,9,11,.07);
}
/* Captures : une version par thème, seule celle du thème courant se charge
   (les images masquées en loading="lazy" ne sont pas téléchargées). */
.si-clair{display:none}
:root[data-theme="light"] .si-clair{display:block}
:root[data-theme="light"] .si-sombre{display:none}
/* Bascule douce au changement de thème (pas au premier rendu). */
.theme-bascule,.theme-bascule *{transition:background-color .35s var(--courbe),color .35s var(--courbe),border-color .35s var(--courbe) !important}

/* Choix du thème, dans le pied de page */
.theme-choix{position:relative;display:inline-flex;padding:3px;border-radius:999px;background:var(--verre);box-shadow:inset 0 0 0 1px var(--liseré-fort)}
html:not(.js) .theme-choix{display:none}
.theme-choix button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:0;border-radius:999px;background:none;
  font:inherit;font-size:13px;font-weight:500;color:var(--doux);cursor:pointer;transition:color .25s var(--courbe)}
.theme-choix button:hover{color:var(--encre)}
.theme-choix button[aria-checked="true"]{color:var(--encre)}
.theme-choix svg{width:15px;height:15px}
.theme-choix .curseur{position:absolute;top:3px;bottom:3px;left:0;border-radius:999px;background:var(--verre-fort);
  box-shadow:inset 0 0 0 1px var(--liseré-fort),0 1px 3px rgba(0,0,0,.12);transition:transform .4s var(--courbe),width .4s var(--courbe)}
.pied-bas{align-items:center}
.pied-droite{display:flex;align-items:center;gap:20px;flex-wrap:wrap}

/* Icônes au trait (sprite en tête de <body>) */
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ═══ Méga-menus ═══════════════════════════════════════════════════════
   Un seul panneau flottant sous la barre : il glisse sous l'entrée
   survolée et prend la taille du contenu (largeur et hauteur animées),
   le contenu glisse dans le sens du déplacement. */
.barre-in{position:relative}
.menu{display:flex;gap:2px}
.menu-entree{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 12px;border:0;border-radius:8px;background:none;font:inherit;font-size:14px;font-weight:500;
  color:var(--doux);cursor:pointer;transition:color .15s,background .15s}
.menu-entree:hover,.menu-entree[aria-expanded="true"]{color:var(--encre);background:var(--survol)}
.menu-entree .ic{width:14px;height:14px;transition:transform .3s var(--courbe)}
.menu-entree[aria-expanded="true"] .ic{transform:rotate(180deg)}
.barre-liens{align-items:center}
.barre-liens a.menu-entree{display:inline-flex}

.mega{position:absolute;top:calc(100% + 10px);left:0;width:var(--l,600px);height:var(--h,300px);transform:translateX(var(--x,0)) translateY(-6px) scale(.98);transform-origin:top center;
  opacity:0;visibility:hidden;pointer-events:none;border-radius:18px;background:var(--panneau);box-shadow:var(--panneau-ombre);
  backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);overflow:hidden;
  transition:opacity .2s var(--courbe),transform .3s var(--courbe),visibility 0s .3s}
.mega.ouvert{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(var(--x,0));transition:opacity .2s var(--courbe),transform .3s var(--courbe),visibility 0s}
.mega.place{transition:opacity .2s var(--courbe),transform .38s var(--courbe),width .38s var(--courbe),height .38s var(--courbe),visibility 0s}
/* Liseré en dégradé et reflet en haut du panneau */
.mega::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;background:var(--bord-verre);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.mega::after{content:"";position:absolute;top:0;left:15%;right:15%;height:1px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--titre-a),transparent);opacity:.6}
.mega-panneau{position:absolute;top:0;left:0;width:max-content;padding:20px;opacity:0;pointer-events:none;
  transition:opacity .25s var(--courbe),transform .38s var(--courbe)}
.mega-panneau.actif{opacity:1;pointer-events:auto;transform:none}
.mega-panneau.vers-gauche{transform:translateX(-40px)}
.mega-panneau.vers-droite{transform:translateX(40px)}
.mega-titre-mobile{display:none}

.mega-grille{display:grid;grid-template-columns:repeat(2,264px);gap:4px 12px}
.mega-col p.mega-rubrique{margin:4px 10px 8px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--pale)}
.mega-item{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:10px;transition:background .15s}
.mega-item:hover{background:var(--survol)}
.mega-icone{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:9px;background:var(--verre-fort);box-shadow:inset 0 0 0 1px var(--liseré);color:var(--encre);
  transition:transform .3s var(--courbe),box-shadow .3s}
.mega-item:hover .mega-icone{transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--liseré-fort),0 6px 16px -6px rgba(0,0,0,.35)}
.mega-icone .ic{width:17px;height:17px}
.mega-item b{display:block;font-size:14px;font-weight:600;color:var(--encre);line-height:1.3}
.mega-item small{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--doux)}

.mega-produit{display:flex;gap:16px}
.mega-carte{position:relative;display:flex;flex-direction:column;width:250px;padding:14px;border-radius:14px;overflow:hidden;
  background:var(--verre-fort);box-shadow:inset 0 0 0 1px var(--liseré)}
.mega-carte figure{border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px var(--liseré),0 10px 24px -10px rgba(0,0,0,.45);aspect-ratio:16/10}
.mega-carte figure img{width:100%;height:100%;object-fit:cover;object-position:left top;transition:transform .6s var(--courbe)}
.mega-carte:hover figure img{transform:scale(1.04)}
.mega-carte .badge-petit{align-self:flex-start;margin:14px 0 8px}
.mega-carte b{font-size:14.5px;font-weight:600}
.mega-carte small{margin-top:4px;font-size:12.5px;color:var(--doux);line-height:1.45}
.mega-carte .fleche{margin-top:auto;padding-top:12px;font-size:13px;font-weight:500;color:var(--encre);display:inline-flex;align-items:center;gap:6px}
.mega-carte .fleche .ic{width:14px;height:14px;transition:transform .25s var(--courbe)}
.mega-carte:hover .fleche .ic{transform:translateX(3px)}

.mega-integrations{width:640px}
.mega-familles{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.famille{padding:12px;border-radius:12px;transition:background .15s}
.famille:hover{background:var(--survol)}
.famille b{font-size:13.5px;font-weight:600}
.famille small{display:block;margin-top:2px;font-size:12px;color:var(--doux)}
/* Logos des outils, d'une seule teinte (--filtre-logo) ; un outil sans logo
   repris est écrit en toutes lettres dans sa tuile. */
.famille .logos{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.famille .logos>span{display:grid;place-items:center;width:auto;min-width:34px;height:34px;padding:0 8px;border-radius:9px;background:var(--verre-fort);
  box-shadow:inset 0 0 0 1px var(--liseré);transition:transform .3s var(--courbe)}
.famille:hover .logos>span{transform:translateY(-2px)}
.famille:hover .logos>span:nth-child(2){transition-delay:.04s}.famille:hover .logos>span:nth-child(3){transition-delay:.08s}.famille:hover .logos>span:nth-child(4){transition-delay:.12s}
.famille .logos img{width:18px;height:18px;object-fit:contain;filter:var(--filtre-logo);opacity:.85}
.famille .logos img.mot{width:auto;height:13px;max-width:64px}
.famille .logos img.dense{height:10px}
.famille .logos .nom{font-size:11.5px;font-weight:600;color:var(--texte-2);white-space:nowrap;opacity:.9}
.mega-pied{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px -20px -20px;padding:14px 20px;font-size:13px;color:var(--doux);
  border-top:1px solid var(--liseré);background:var(--verre-fort)}
.mega-pied a{display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--encre)}
.mega-pied a .ic{width:14px;height:14px;transition:transform .25s var(--courbe)}
.mega-pied a:hover .ic{transform:translateX(3px)}

.mega-ressources .mega-grille{grid-template-columns:repeat(2,250px)}

/* Bouton menu (mobile) */
.bouton-menu{display:none;place-items:center;width:38px;height:38px;border:0;border-radius:10px;background:var(--verre-fort);color:var(--encre);cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--liseré-fort)}
.bouton-menu .ic-fermer{display:none}
.barre.menu-ouvert .bouton-menu .ic-ouvrir{display:none}
.barre.menu-ouvert .bouton-menu .ic-fermer{display:block}

@media (max-width:900px){
  .bouton-menu{display:grid}
  .barre-liens{display:none}
  .mega{position:fixed;top:76px;left:12px;right:12px;width:auto;height:auto;max-height:calc(100dvh - 92px);overflow-y:auto;transform:translateY(-8px);
    transition:opacity .2s var(--courbe),transform .3s var(--courbe),visibility 0s .3s}
  .barre.menu-ouvert .mega{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .2s var(--courbe),transform .3s var(--courbe),visibility 0s}
  .mega-panneau{position:static;width:auto;opacity:1;transform:none;pointer-events:auto;padding:8px 12px}
  .mega-panneau + .mega-panneau{border-top:1px solid var(--liseré)}
  .mega-titre-mobile{display:block;margin:10px 10px 6px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--pale)}
  .mega-produit{display:block}
  .mega-grille,.mega-ressources .mega-grille{grid-template-columns:1fr}
  .mega-col p.mega-rubrique,.mega-carte,.mega-item small{display:none}
  .mega-integrations{width:auto}
  .mega-familles{grid-template-columns:1fr}
  .famille small{display:none}
  .mega-pied{margin:8px -12px -8px;padding:12px}
  .mega-liens-mobile{display:flex;flex-direction:column;padding:8px 12px 12px;border-top:1px solid var(--liseré)}
  .mega-liens-mobile a{padding:10px;font-weight:600;font-size:15px}
}
.mega-liens-mobile{display:none}
@media (max-width:900px){.mega-liens-mobile{display:flex}}

/* Le flou de la barre passe sur un pseudo-élément : un backdrop-filter sur
   .barre-in empêcherait celui du méga-menu (et du tiroir mobile) de flouter
   la page. */
.barre-in{backdrop-filter:none;-webkit-backdrop-filter:none;background:none;isolation:isolate}
.barre-in::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--barre-fond);box-shadow:inset 0 0 0 1px var(--barre-bord);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
@media (max-width:900px){
  .barre-in{gap:12px}
  .mega-item{align-items:center}
  .mega-liens-mobile .bouton{margin-top:8px;height:44px;font-size:15px;color:var(--bouton-fort-encre)}
}
@media (max-width:420px){.barre-actions .bouton-sm{display:none}}

/* Sélecteur de langue, dans le pied de page : un bouton (langue courante)
   qui déplie vers le haut la liste des langues, au lieu des sept codes
   affichés d'un coup. */
.langues{position:relative}
.langues summary{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:999px;cursor:pointer;list-style:none;
  font-size:13px;font-weight:500;color:var(--doux);background:var(--verre);box-shadow:inset 0 0 0 1px var(--liseré-fort);transition:color .15s}
.langues summary::-webkit-details-marker{display:none}
.langues summary:hover,.langues[open] summary{color:var(--encre)}
.langues summary .ic{width:15px;height:15px}
.langues .ic-chevron{width:13px;height:13px;transition:transform .25s var(--courbe)}
.langues[open] .ic-chevron{transform:rotate(180deg)}
.langues-menu{position:absolute;right:0;bottom:calc(100% + 8px);z-index:20;display:grid;min-width:170px;padding:6px;border-radius:14px;
  background:var(--panneau);box-shadow:var(--panneau-ombre);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  animation:langues-in .2s var(--courbe)}
@keyframes langues-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.langues-menu a{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:8px;font-size:13.5px;color:var(--doux);transition:background .15s,color .15s}
.langues-menu a:hover{background:var(--survol);color:var(--encre)}
.langues-menu a[aria-current]{color:var(--encre);font-weight:600}
.langues-menu a[aria-current]::after{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
/* Logo de l'administration (wordmark clair ou sombre selon le thème) ;
   le texte ne s'affiche que si l'image ne charge pas. */
.marque img{display:block;height:24px;width:auto}
.marque .logo-clair{display:none}
:root[data-theme="light"] .marque .logo-clair{display:block}
:root[data-theme="light"] .marque .logo-sombre{display:none}
.marque-texte{display:none;align-items:center;gap:9px}
.marque.sans-logo img{display:none !important}
.marque.sans-logo .marque-texte{display:inline-flex}

/* Remises à zéro limitées au chrome : sur les pages qui chargent site.css, ces
   éléments ne doivent hériter ni de ses listes, ni de ses liens, ni de ses
   marges de paragraphe. */
.barre,.pied{font-family:var(--police);line-height:1.5;-webkit-font-smoothing:antialiased}
/* Spécificité nulle (:where) : ces remises ne doivent jamais passer devant
   une règle du chrome (couleur d'un bouton, hauteur du logo…). */
:where(.barre,.pied) *{box-sizing:border-box}
:where(.barre,.pied) :where(ul){margin:0;padding:0;list-style:none}
:where(.barre,.pied) :where(p,figure){margin:0}
:where(.barre,.pied) :where(img){display:block;max-width:100%}
:where(.barre,.pied) :where(a,button):focus-visible{outline:1px solid var(--lueur);outline-offset:3px;border-radius:6px}
.lien-barre{white-space:nowrap}


/* Hors de l'accueil, la barre suit le flux de la page (collante) au lieu de
   flotter au-dessus d'un en-tête qui lui réserve sa place. */
.barre-site{position:sticky;top:12px;margin-top:12px}

/* ═══ Appel à l'action ═══════════════════════════════════════════════════
   Le bandeau de fin de l'accueil, repris sur toutes les pages qui ont un
   appel (cta_accueil.py) : boîte de verre, lueur basse, badge, titre adapté
   à la page, et un champ e-mail qui pré-remplit l'inscription
   (/register?email=…, lu par l'application). */
.appel-section{padding:clamp(56px,8vw,112px) 0}
.appel{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(56px,8vw,96px) clamp(20px,4vw,48px);border-radius:var(--r);background:var(--verre);box-shadow:var(--ombre-xl);
  font-family:var(--police);color:var(--encre)}
.appel::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--bord-verre);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.appel-lueur{position:absolute;left:50%;bottom:-60%;width:120%;height:100%;transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:var(--final-lueur)}
.appel>*{position:relative}
.appel-badge{margin-bottom:18px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:500;color:var(--doux);box-shadow:inset 0 0 0 1px var(--liseré-fort)}
.appel .appel-titre{margin:0;max-width:22ch;font-size:clamp(28px,3.6vw,48px);line-height:1.2;font-weight:600;letter-spacing:-0.015em;color:var(--encre);text-wrap:balance}
.appel .appel-texte{margin:16px auto 0;max-width:560px;font-size:clamp(16px,1.4vw,19px);line-height:1.45;font-weight:500;color:var(--doux)}
.appel-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:32px;width:100%}
.appel-form{display:flex;align-items:center;gap:6px;flex:0 1 470px;padding:4px;border-radius:10px;background:var(--verre-fort);
  box-shadow:inset 0 0 0 1px var(--liseré-fort);transition:box-shadow .2s}
.appel-form:focus-within{box-shadow:inset 0 0 0 1px var(--doux),0 0 0 4px var(--liseré)}
.appel-form input{flex:1;min-width:0;height:40px;padding:0 12px;border:0;background:transparent;color:var(--encre);font:inherit;font-size:15px;outline:none}
.appel-form input::placeholder{color:var(--pale)}
.appel-form .bouton{flex:none;cursor:pointer;border:0;font-family:inherit}
.appel-actions>.bouton{height:48px}
.appel-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.appel-note{margin:16px 0 0;font-size:12.5px;color:var(--pale)}
@media (max-width:600px){
  .appel-form{flex-basis:100%;flex-wrap:wrap;padding:6px}
  .appel-form input{flex-basis:100%;height:44px}
  .appel-form .bouton{width:100%;height:44px}
  .appel-actions>.bouton{width:100%}
}

/* Méga-menu « Patch management » : une carte de présentation et quatre
   points qui mènent à la page. */
.mega-patch{display:flex;gap:16px}
.mega-patch .mega-col{display:grid;width:290px;align-content:start}
.mega-carte-patch{width:270px;justify-content:flex-start;background:radial-gradient(120% 90% at 0% 0%,var(--liseré-fort),transparent 60%),var(--verre-fort)}
.mega-carte-patch .badge-petit{margin:0 0 12px}
.mega-carte-patch b{font-size:17px;line-height:1.3}
.mega-carte-patch small{margin-top:8px;font-size:13px}
@media (max-width:900px){.mega-patch{display:block}.mega-patch .mega-col{width:auto}}

/* Accueil, petits écrans : la carte « Agent » (trois logos) et la lueur
   tricolore de la section « Français » ne dépassent plus de l'écran. Ici
   plutôt que dans accueil.css : le numéro de version de chrome.css est tenu
   par chrome_accueil.py et posé sur toutes les pages. */
.francais .flou-fr{max-width:100%}
@media (max-width:560px){.chiffres .chiffres-grille{grid-template-columns:1fr}}