/* n40.pro — styles communs aux pages de guide, zone et villes.
   Extrait le 16/09/2026 : 123 regles qui etaient recopiees dans 37 fichiers.
   Toute modification ici s'applique partout. */

:root{
    --paper:#ffffff; --wash:#faf8f2; --ink:#16150f; --ink-soft:#5c584c;
    --gold:#f5c518; --gold-deep:#c8930a; --night:#0f0e0b; --line:#e9e4d6; --max:1120px;
  }
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{ margin:0; background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}
h1,h2,h3{font-family:'Big Shoulders Display',sans-serif; font-weight:800; line-height:0.98; margin:0;}
a{color:inherit;}
img{max-width:100%; display:block;}
.site-head{ border-bottom:2px solid var(--ink); }
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:16px; padding-bottom:16px; }
.brand{ display:flex; align-items:center; gap:13px; text-decoration:none; }
.brand-mark{ width:46px; height:46px; flex:0 0 auto; }
.brand-mark svg{ width:100%; height:100%; }
.brand-word{ font-family:'Big Shoulders Display',sans-serif; font-weight:900; font-size:23px; letter-spacing:0.02em; color:var(--ink); line-height:1; }
.brand-word small{ display:block; font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:10px; letter-spacing:0.34em; color:var(--gold-deep); margin-top:3px; }
.head-right{ display:flex; align-items:center; gap:12px; }
.lang-switch{ display:inline-flex; border:1.5px solid var(--ink); border-radius:2px; overflow:hidden; }
.lang-switch button{ font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; letter-spacing:0.06em; padding:8px 11px; background:var(--paper); color:var(--ink); border:none; border-left:1.5px solid var(--ink); cursor:pointer; }
.lang-switch button:first-child{ border-left:none; }
.lang-switch button.active{ background:var(--gold); }
.head-back{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; text-decoration:none; color:var(--ink); border:1.5px solid var(--ink); padding:9px 15px; border-radius:2px; white-space:nowrap; transition:background .18s,color .18s; }
.head-back:hover{ background:var(--ink); color:var(--paper); }
.hero{ padding:36px 0 0; }
.eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.32em; text-transform:uppercase; color:var(--gold-deep); margin:0 0 16px; }
.eyebrow::before{ content:'▸ '; }
.hero h1{ font-size:clamp(44px,8vw,88px); text-transform:uppercase; letter-spacing:-0.01em; line-height:1.1; }
.hero h1 .hl{ background:var(--gold); padding:0 .12em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.hero h1 .hl-dark{ background:var(--ink); color:var(--gold); padding:0 .12em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.hero p.lead{ font-size:clamp(17px,2.2vw,21px); max-width:640px; color:var(--ink-soft); margin:22px 0 0; }
.hero p.lead b{ color:var(--ink); }
.plate{ margin:0 0 8px; }
.plate figure{ margin:0; border:2px solid var(--ink); background:var(--paper); padding-bottom:16px; }
.plate img{ width:100%; }
.plate-fig{ position:relative; }
.plate-info{ position:relative; height:96px; margin-top:4px; }
.plate-info .u{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:142px; text-align:center; }
.plate-info .u b.uname{ display:flex; align-items:flex-end; justify-content:center; min-height:36px; font-family:'Big Shoulders Display',sans-serif; font-weight:700; font-size:clamp(11px,1.3vw,16px); line-height:1.02; text-transform:uppercase; letter-spacing:0.01em; color:var(--ink); margin-bottom:3px; }
.plate-info .u b.uname.pulse-red{ color:#cc2222; font-size:clamp(12.6px,1.5vw,18.4px); animation:pulseRed 1.9s ease-in-out infinite; }
@keyframes pulseRed{ 0%,100%{ opacity:1; text-shadow:0 0 0 rgba(204,34,34,0); } 50%{ opacity:.8; text-shadow:0 0 7px rgba(204,34,34,.4); } }
@media (prefers-reduced-motion:reduce){ .plate-info .u b.uname.pulse-red{ animation:none; } }
.plate-info .u i{ display:block; font-family:'IBM Plex Mono',monospace; font-style:normal; font-size:11px; color:var(--ink-soft); margin-bottom:6px; }
.plate-info .u .st{ display:flex; align-items:center; justify-content:center; text-align:center; width:136px; min-height:36px; margin:0 auto; box-sizing:border-box; }
.plate-info .u .st.u-status{ display:none; }
.plate-info .st-group{ position:absolute; top:59px; left:81.5%; transform:translateX(-50%); width:25%; height:38px; display:flex; align-items:center; justify-content:center; text-align:center; box-sizing:border-box; font-size:13px; line-height:1; white-space:nowrap; padding:0 10px; }
.st{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-style:normal; font-size:10px; letter-spacing:0.02em; text-transform:uppercase; padding:3px 7px; border-radius:2px; line-height:1.2; }
.st.bad{ background:#fdeaea; color:#a12020; border:1px solid #e7b7b7; }
.st.good{ background:#eaf5ec; color:#1f6b32; border:1px solid #b7dcc0; }
.st.watch{ background:#fff3d6; color:#8a5a00; border:1px solid #eccf8a; }
.st.absent,.st.ref{ background:#efefe9; color:#6a675c; border:1px solid #d8d4c6; }
.card .status.absent{ background:#efefe9; color:#6a675c; border:1px solid #d8d4c6; }
.card .status.watch{ background:#fff3d6; color:#8a5a00; border:1px solid #eccf8a; }
.g-intro{ font-size:16px; color:var(--ink-soft); max-width:720px; margin:0 0 22px; }
.g-note{ margin-top:20px; padding:16px 20px; border-left:5px solid var(--gold); background:var(--wash); font-size:14.5px; color:var(--ink-soft); }
.g-note b{ color:var(--ink); }
#geants .compare{ align-items:stretch; }
.verdict .tag{ font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:12px; letter-spacing:0.2em; text-transform:uppercase; background:var(--gold); color:var(--ink); padding:6px 12px; border-radius:2px; white-space:nowrap; }
section{ padding:26px 0; }
.sec-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:24px; border-bottom:2px solid var(--ink); padding-bottom:12px; }
.sec-head h2{ font-size:clamp(28px,5vw,44px); text-transform:uppercase; }
.sec-head .num{ font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:0.2em; color:var(--gold-deep); }
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.card{ border:2px solid var(--ink); background:var(--paper); display:flex; flex-direction:column; }
.card .ph{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--wash); }
.card .ph img{ width:100%; height:100%; object-fit:cover; }
.card .badge{ position:absolute; top:0; left:0; font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; padding:7px 13px; }
.card.asia .badge{ background:var(--ink); color:var(--gold); }
.card.euro .badge{ background:var(--gold); color:var(--ink); }
.card .body{ padding:20px 22px 24px; }
.card h3{ font-size:30px; text-transform:uppercase; }
.card .latin{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.08em; color:var(--ink-soft); margin:2px 0 4px; }
.card .status{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; padding:4px 9px; border-radius:2px; margin:8px 0 16px; }
.card.asia .status{ background:#fdeaea; color:#a12020; border:1px solid #e7b7b7; }
.card.euro .status{ background:#eaf5ec; color:#1f6b32; border:1px solid #b7dcc0; }
ul.crit{ list-style:none; margin:0; padding:0; }
ul.crit li{ position:relative; padding:9px 0 9px 30px; border-top:1px solid var(--line); font-size:15.5px; }
ul.crit li:first-child{ border-top:none; }
ul.crit li::before{ content:''; position:absolute; left:2px; top:15px; width:11px; height:11px; background:var(--gold); border:1.5px solid var(--ink); border-radius:50%; }
ul.crit li b{ font-weight:600; }
ul.crit li.king{ background:var(--gold); margin:6px -22px 0; padding-left:52px; padding-right:22px; border-top:2px solid var(--ink); font-weight:600; }
ul.crit li.king::before{ left:24px; background:var(--ink); border-color:var(--ink); }
.nests{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.nest{ border:2px solid var(--ink); }
.nest .ph{ aspect-ratio:4/3; overflow:hidden; background:var(--wash); position:relative; }
.nest .ph img{ width:100%; height:100%; object-fit:cover; }
.nest .body{ padding:18px 20px 22px; }
.nest h3{ font-size:24px; text-transform:uppercase; }
.nest .key{ display:inline-block; background:var(--gold); border:1.5px solid var(--ink); font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; letter-spacing:0.06em; padding:5px 10px; margin:10px 0 8px; }
.nest p{ margin:6px 0 0; font-size:15px; color:var(--ink-soft); }
.myths{ background:var(--wash); border:2px solid var(--ink); padding:28px 30px; }
.myths h2{ font-size:clamp(24px,4vw,34px); text-transform:uppercase; margin-bottom:6px; }
.myths .row{ display:flex; gap:16px; padding:16px 0; border-top:1.5px solid var(--line); }
.myths .row:first-of-type{ border-top:none; }
.myths .x{ flex:0 0 auto; width:26px; height:26px; background:var(--ink); color:var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-family:'Big Shoulders Display',sans-serif; }
.myths .row div b{ display:block; margin-bottom:2px; }
.myths .row div span{ color:var(--ink-soft); font-size:15.5px; }
.protect{ display:flex; gap:18px; align-items:flex-start; margin:30px 0 0; padding:22px 24px; border-left:6px solid var(--gold); background:var(--wash); }
.protect .lead-word{ font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:20px; text-transform:uppercase; }
.protect p{ margin:4px 0 0; font-size:15.5px; color:var(--ink-soft); }
.cta{ background:var(--night); color:var(--paper); margin-top:44px; }
.cta .wrap{ padding:48px 24px; display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; }
.cta h2{ font-size:clamp(26px,4vw,40px); text-transform:uppercase; color:#fff; }
.cta h2 span{ color:var(--gold); }
.cta p{ margin:8px 0 0; color:#b9b3a3; font-size:15.5px; }
.cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{ font-family:'IBM Plex Mono',monospace; font-size:14px; font-weight:600; letter-spacing:0.06em; text-decoration:none; padding:14px 22px; border-radius:2px; display:inline-flex; align-items:center; gap:9px; }
.btn-gold{ background:var(--gold); color:var(--ink); }
.btn-gold:hover{ background:#ffd63d; }
.btn-ghost{ border:1.5px solid #4a463c; color:#fff; }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
footer.doc{ padding:30px 0 60px; }
footer.doc .wrap{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:baseline; }
.sources{ font-size:13px; color:var(--ink-soft); max-width:660px; }
.sources b{ color:var(--ink); font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; display:block; margin-bottom:6px; }
.sources a{ color:var(--gold-deep); text-decoration:none; }
.sources a:hover{ text-decoration:underline; }
.copyright{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em; color:var(--ink-soft); }
@media (max-width:760px){
    .compare, .nests{ grid-template-columns:1fr; }
    .plate-info{ position:static; height:auto; display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
    .plate-info .u{ position:static; transform:none; left:auto; width:auto; text-align:left; }
    .plate-info .u b.uname{ display:block; min-height:0; font-size:16px; line-height:1.1; margin-bottom:2px; }
    .plate-info .u .st{ display:inline-flex; width:auto; min-height:0; margin:0; }
    .plate-info .u .st.u-status{ display:inline-flex; }
    .plate-info .st-group{ display:none; }
    .brand-word{ font-size:20px; }
    .head-back{ padding:8px 11px; font-size:11px; }
    .verdict{ padding:20px; }
    .cta .wrap{ flex-direction:column; align-items:flex-start; }
  }
@media (max-width:520px){ .head-back{ display:none; } }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
/* --- Hub wiki --- */
.crumb{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.06em; color:var(--ink-soft); padding-top:22px; }
.crumb a{ color:var(--gold-deep); text-decoration:none; }
.crumb a:hover{ text-decoration:underline; }
.crumb span{ color:var(--ink); }

/* ---- Bouton d'appel en en-tete (repris des pages communes) ---- */
.head-call{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.06em; text-decoration:none;
  color:var(--ink); background:var(--gold); border:1.5px solid var(--gold-deep); padding:9px 15px;
  border-radius:2px; white-space:nowrap; font-weight:600; transition:filter .18s; }
.head-call:hover{ filter:brightness(1.06); }
@media(max-width:600px){ .head-call{ padding:8px 11px; font-size:11px; } .head-call .hc-txt{ display:none; } }

/* ---- Rappel d'appel en milieu de page (repris des pages communes) ---- */
.focus-call{ margin:20px 0 2px; display:flex; justify-content:center; }
.focus-call-btn{ position:relative; overflow:hidden; isolation:isolate;
  font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:clamp(17px,2vw,20px);
  background:var(--gold); color:var(--ink); text-decoration:none; padding:15px 26px; border-radius:3px;
  display:inline-flex; align-items:center; justify-content:center; gap:12px; white-space:nowrap; width:66%;
  box-shadow:0 3px 0 var(--gold-deep);
  transition:background .12s ease, transform .12s ease, box-shadow .12s ease; }
.focus-call-btn .fc-ico{ filter:grayscale(1) brightness(3); }
.focus-call-btn::before{ content:""; position:absolute; top:0; left:0; height:100%; width:60%;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.15) 35%, rgba(255,255,255,.85) 50%, rgba(255,255,255,.15) 65%, transparent 100%);
  transform:translateX(-180%) skewX(-18deg); pointer-events:none; z-index:1;
  animation:fcShine 9s linear infinite; }
.focus-call-btn > *{ position:relative; z-index:2; }
@keyframes fcShine{ 0%{ transform:translateX(-180%) skewX(-18deg);} 45%{ transform:translateX(260%) skewX(-18deg);} 100%{ transform:translateX(260%) skewX(-18deg);} }
.focus-call-btn:hover{ background:#ffd63d; transform:translateY(-2px); box-shadow:0 5px 0 var(--gold-deep); }
.focus-call-btn:hover::before{ animation-duration:2.2s; }
.focus-call-btn:active{ transform:translateY(1px); box-shadow:0 2px 0 var(--gold-deep); }
@media (prefers-reduced-motion: reduce){ .focus-call-btn::before{ animation:none; opacity:0; } }
@media (max-width:640px){ .focus-call-btn{ width:100%; font-size:17px; padding:15px 16px; } }

/* ---- Entete tres etroite : le groupe de droite passe a la ligne au lieu
   de deborder horizontalement. Corrige aussi les pages communes. ---- */
@media (max-width:480px){
  .site-head .wrap{ flex-wrap:wrap; row-gap:10px; }
  .site-head .head-right{ width:100%; justify-content:space-between; }
}