/* En-tête commun aux gabarits (site, connexion, guides, administration) :
   logo et fenêtre de choix de la langue. Chargé juste après app.css, avec des
   valeurs de secours, car le gabarit des guides n'a pas les variables de
   maquette.css. */

.logo-img {display:block;width:42px;height:42px;flex-shrink:0}
.g-brand .logo-img {width:32px;height:32px}
@media (max-width:600px) {.logo-img {width:38px;height:38px}}

/* Un <details> natif : il s'ouvre au clavier et sans JavaScript, et ses liens
   restent visibles des robots. Ouvert, son <summary> s'étend en voile plein
   écran : un clic sur le voile referme la fenêtre, sans script. */
.language-switch {position:relative}
.language-switch > summary {list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line,#dfe6f1);border-radius:99px;padding:8px 12px;white-space:nowrap;font-size:13px;font-weight:700;color:var(--text,#0b1b3a);background:var(--surface3,#f4f7fb)}
.language-switch > summary::-webkit-details-marker {display:none}
.language-switch > summary:focus-visible {outline:2px solid var(--accent,#087aff);outline-offset:2px}
.language-switch[open] > summary::before {content:"";position:fixed;inset:0;z-index:90;background:rgba(6,19,45,.5);cursor:default}

.flag {display:block;width:22px;height:16px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(6,27,63,.16);flex-shrink:0}

.language-popup {position:fixed;z-index:91;top:50%;left:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto;padding:22px;border-radius:20px;background:var(--surface,#fff);color:var(--text,#0b1b3a);box-shadow:0 30px 80px rgba(6,27,63,.35);text-align:start;white-space:normal}
.language-popup-head {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.language-popup-head strong {font-size:19px;letter-spacing:-.02em}
.language-close {display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line,#dfe6f1);background:var(--surface3,#f4f7fb);color:var(--text,#0b1b3a);font-size:16px;cursor:pointer}
.language-close:focus-visible {outline:2px solid var(--accent,#087aff);outline-offset:2px}

.language-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.language-grid a {display:flex;align-items:center;gap:12px;min-height:62px;padding:10px 14px;border:1px solid var(--line,#dfe6f1);border-radius:14px;color:var(--text,#0b1b3a);text-decoration:none}
.language-grid a:hover {border-color:var(--accent,#087aff);background:var(--accentTint,#eef5ff)}
.language-grid a:focus-visible {outline:2px solid var(--accent,#087aff);outline-offset:2px}
.language-grid a[aria-current="true"] {border-color:var(--accent,#087aff);background:var(--accentSoft,#e3efff)}
.language-grid .flag {width:38px;height:27px;border-radius:5px}
.language-text {display:grid;gap:2px;min-width:0}
.language-text strong {font-size:15px;font-weight:750}
.language-check {margin-inline-start:auto;color:var(--accent,#087aff);font-weight:800;visibility:hidden}
.language-grid a[aria-current="true"] .language-check {visibility:visible}

@media (max-width:420px) {
  .language-grid {grid-template-columns:1fr}
  .language-popup {padding:18px}
}
@media (prefers-reduced-motion:no-preference) {
  .language-switch[open] .language-popup {animation:language-pop .16s ease-out}
}
@keyframes language-pop {from {opacity:0;transform:translate(-50%,-47%)}}

/* L'en-tête est collant avec z-index:50 : sans cela, la barre du bas sur
   mobile passerait au-dessus du voile de la fenêtre ouverte. */
.topbar:has(.language-switch[open]),
.g-topbar:has(.language-switch[open]) {z-index:1000}

/* Bouton « Continuer avec Google » des pages de connexion et d'inscription.
   Le G reprend les quatre couleurs de la marque, sans image a charger. */
.google-btn {display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;text-decoration:none}
.google-mark {display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--line,#dfe6f1);font-weight:800;font-size:13px;color:#4285f4}