/* G3 — chrome (header 1 ligne + footer) */

.g3-skip-link{position:absolute;left:-9999px;top:0;background:var(--g3-ink);color:var(--g3-paper);padding:10px 16px;font-family:var(--g3-font-fat);z-index:100}
.g3-skip-link:focus{left:8px;top:8px}
/* Texte masqué à l'écran, lu par les lecteurs d'écran. */
.g3-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.g3-accent{color:var(--g3-accent)}
.g3-accent2{color:var(--g3-accent2)}

/* ===== HEADER ===== */
.g3-header{position:relative;z-index:40;background:var(--g3-paper);border-bottom:2px solid var(--g3-ink)}
.g3-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:8px 56px;min-height:72px}
.g3-brand{display:flex;align-items:center;gap:14px;min-width:0;color:var(--g3-ink);text-decoration:none}
.g3-brand img{height:54px;width:auto;display:block;flex-shrink:0;transform:rotate(-6deg)}
.g3-brand span{font-family:var(--g3-font-display);font-size:38px;line-height:1;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap}
.g3-nav{display:flex;align-items:center;gap:10px}
.g3-nav__link{padding:9px 16px;background:var(--g3-paper);color:var(--g3-ink);border:2px solid var(--g3-ink);text-decoration:none;font-family:var(--g3-font-fat);font-size:13px;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;transition:transform .12s,box-shadow .12s}
.g3-nav__link:hover{transform:translate(-2px,-2px);box-shadow:var(--g3-shadow-4)}
.g3-nav__link--hot{background:var(--g3-accent);color:var(--g3-paper)}
/* Sélecteur de langue : déroulant à drapeaux (details/summary) au-dessus de 900px, rangée de drapeaux dans le menu replié en dessous. */
.g3-header__lang{display:flex;align-self:stretch;margin-left:8px}
.g3-header__lang:empty{display:none}
/* max-width:none : sinon le img{max-width:100%} de main.css fait compter le drapeau pour 0 à Firefox et Safari, et le panneau sort trop étroit de 24px (le nom déborde). */
/* Drapeaux discrets (choix de Merlin, 12/10/2026) : petits, cernés d'un filet léger pour que le blanc ne se perde pas sur le papier. */
.g3-flag{flex-shrink:0;max-width:none;box-shadow:0 0 0 1px rgba(10,10,10,.3)}
.g3-flag--code{display:flex;align-items:center;justify-content:center;min-width:21px;height:14px;padding:0 3px;font-family:var(--g3-font-mono);font-size:10px;font-weight:700;line-height:1;letter-spacing:.04em}
.g3-langsel{position:relative}
/* Bouton sans contour ni fond (choix de Merlin, 12/10/2026) : le drapeau courant et le chevron, posés dans la barre. Survolé ou ouvert, le chevron passe au vermillon. */
.g3-langsel__btn{display:flex;align-items:center;gap:8px;height:100%;min-height:36px;padding:0 0 0 6px;color:var(--g3-ink);font-family:var(--g3-font-fat);font-size:13px;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;cursor:pointer;list-style:none;transition:color .12s}
.g3-langsel__btn::-webkit-details-marker{display:none}
.g3-langsel__btn:hover,.g3-langsel[open] .g3-langsel__btn{color:var(--g3-accent)}
.g3-langsel__chev{width:8px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .12s}
.g3-langsel[open] .g3-langsel__chev{transform:translateY(2px) rotate(225deg)}
.g3-langsel__list{position:absolute;top:calc(100% + 8px);right:0;z-index:50;margin:0;padding:0;list-style:none;background:var(--g3-paper);border:2px solid var(--g3-ink);box-shadow:var(--g3-shadow-4)}
.g3-langsel__list li+li{border-top:2px solid var(--g3-ink)}
.g3-langsel__item{display:flex;align-items:center;gap:10px;padding:11px 18px 11px 12px;color:var(--g3-ink);text-decoration:none;font-family:var(--g3-font-fat);font-size:13px;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.g3-langsel__item[aria-current]{background:var(--g3-accent2)}
a.g3-langsel__item:hover,a.g3-langsel__item:focus-visible{background:var(--g3-ink);color:var(--g3-paper)}
.g3-langrow{display:none;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.g3-langrow__item{position:relative;display:flex;align-items:center;justify-content:center;min-width:56px;min-height:44px;background:var(--g3-paper);color:var(--g3-ink);border:2px solid var(--g3-ink);text-decoration:none;transition:transform .12s,box-shadow .12s}
.g3-langrow__item[aria-current]{background:var(--g3-accent2)}
.g3-langrow .g3-flag--code{min-width:24px;height:16px;font-size:11px}
a.g3-langrow__item:hover{transform:translate(-2px,-2px);box-shadow:var(--g3-shadow-4)}
.g3-langsel__btn:focus-visible,a.g3-langrow__item:focus-visible{outline:3px solid var(--g3-accent);outline-offset:2px}
a.g3-langsel__item:focus-visible{outline:3px solid var(--g3-accent);outline-offset:-3px}
.g3-burger{display:none;min-width:44px;min-height:44px;padding:0 14px;background:var(--g3-paper);color:var(--g3-ink);border:2px solid var(--g3-ink);border-radius:0;font-family:var(--g3-font-fat);font-size:13px;text-transform:uppercase;cursor:pointer}
.g3-header--open .g3-burger{background:var(--g3-ink);color:var(--g3-paper)}
/* Nav repliée dès 900px : en FR (3 boutons + sélecteur de langue) elle serre le wordmark sous ~893px. */
@media (max-width:900px){
  .g3-burger{display:block}
  .g3-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--g3-paper);border-bottom:2px solid var(--g3-ink);padding:14px 56px;flex-direction:column;align-items:stretch}
  .g3-header--open .g3-nav{display:flex}
  .g3-nav__link{padding:14px 18px;font-size:15px}
  .g3-header__lang{margin:6px 0 0}
  .g3-langsel{display:none}
  .g3-langrow{display:flex}
}

/* ===== FOOTER ===== */
.g3-footer{background:var(--g3-ink);color:var(--g3-paper);font-family:var(--g3-font-body)}
.g3-footer__brand-block{padding:120px 56px 64px;border-bottom:2px solid rgba(255,255,255,.18)}
.g3-footer__wordmark{font-family:var(--g3-font-display);font-size:120px;line-height:.82;text-transform:uppercase;letter-spacing:-.02em}
.g3-footer__tagline{font-family:var(--g3-font-mono);font-size:15px;line-height:1.5;color:rgba(255,255,255,.75);margin:20px 0 0;max-width:460px;letter-spacing:.04em;text-transform:uppercase}
.g3-footer__top3{padding:64px 56px 8px}
.g3-footer__eyebrow{font-family:var(--g3-font-mono);font-size:12px;color:var(--g3-accent2);letter-spacing:.18em;text-transform:uppercase;margin-bottom:20px}
.g3-footer__top3-title{font-family:var(--g3-font-display);font-size:64px;line-height:.9;text-transform:uppercase;letter-spacing:-.015em;margin:0 0 36px;color:var(--g3-paper)}
.g3-footer__top3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.g3-footer__top3-card{display:flex;flex-direction:column;background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.18);text-decoration:none;transition:border-color .15s,background .15s}
.g3-footer__top3-card:hover{border-color:var(--g3-accent);background:rgba(238,40,24,.10)}
.g3-footer__top3-img{position:relative;display:block;border-bottom:2px solid rgba(255,255,255,.18)}
.g3-footer__top3-img img{width:100%;height:150px;object-fit:cover;display:block}
.g3-footer__top3-rank{position:absolute;top:10px;left:12px;font-family:var(--g3-font-display);font-size:44px;line-height:.8;color:var(--g3-accent2);text-shadow:2px 2px 0 var(--g3-ink)}
.g3-footer__top3-meta{display:flex;align-items:center;justify-content:space-between;padding:18px 22px}
.g3-footer__top3-name{font-family:var(--g3-font-fat);font-size:22px;color:var(--g3-paper);text-transform:uppercase;letter-spacing:.01em}
.g3-footer__top3-arrow{font-family:var(--g3-font-mono);font-size:11px;color:var(--g3-accent);letter-spacing:.08em;white-space:nowrap}
.g3-footer__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:48px;padding:56px 56px 48px}
.g3-footer__col-head{font-family:var(--g3-font-fat);font-size:13px;color:var(--g3-accent2);letter-spacing:.08em;margin-bottom:22px;text-transform:uppercase}
.g3-footer__col-list{list-style:none;padding:0;margin:0;font-size:15.5px;line-height:2.1;color:rgba(255,255,255,.85);display:flex;flex-direction:column;gap:4px}
.g3-footer__col-list a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s,color .15s}
.g3-footer__col-list a:hover{color:var(--g3-paper);border-bottom-color:var(--g3-accent2)}
.g3-footer__bottom{border-top:2px solid rgba(255,255,255,.18);padding:22px 56px;display:flex;flex-wrap:wrap;justify-content:space-between;font-family:var(--g3-font-mono);font-size:10.5px;color:rgba(255,255,255,.5);letter-spacing:.12em}

@media (max-width:760px){
  .g3-bar{padding:6px 14px;min-height:60px}
  .g3-nav{padding:14px}
  .g3-brand{gap:10px}
  .g3-brand img{height:40px}
  .g3-brand span{font-size:26px}
  .g3-footer__brand-block{padding:64px 20px 40px}
  .g3-footer__wordmark{font-size:clamp(48px,14vw,84px)}
  .g3-footer__tagline{font-size:13px}
  .g3-footer__top3{padding:44px 20px 8px}
  .g3-footer__top3-title{font-size:40px;margin-bottom:28px}
  .g3-footer__top3-grid{grid-template-columns:1fr;gap:18px}
  .g3-footer__cols{grid-template-columns:1fr;gap:36px;padding:44px 20px 40px}
  .g3-footer__bottom{padding:20px;justify-content:flex-start;gap:10px}
}