/* ==========================================================================
   GALERIE — la page de choix. Neutre, comme le comparateur : elle ne doit
   avantager aucune des quatre propositions.
   ========================================================================== */
:root{
  --g-fond:#0F1115; --g-fond2:#171A20; --g-txt:#E7E9ED; --g-txt2:#9DA5B0;
  --g-trait:#272C34; --g-vif:#FFFFFF;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
body{
  background:var(--g-fond); color:var(--g-txt);
  font:400 clamp(15px,.9rem + .2vw,17px)/1.65 'Inter',ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
ul{padding-left:1.2em}
.g-in{width:100%;max-width:78rem;margin-inline:auto;padding-inline:clamp(1.1rem,4vw,3rem)}
.saut-contenu{position:absolute;left:50%;translate:-50% -200%;z-index:99;
  background:#fff;color:#111;padding:.7rem 1.2rem;text-decoration:none;border-radius:0 0 8px 8px}
.saut-contenu:focus{translate:-50% 0}
a:focus-visible{outline:2px solid #7FB3FF;outline-offset:3px;border-radius:4px}

.g-tete{padding:clamp(3rem,8vw,7rem) 0 clamp(2rem,5vw,4rem);border-bottom:1px solid var(--g-trait)}
.g-tete__sur{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--g-txt2);margin-bottom:1.4rem}
.g-tete__titre{
  font-family:'Fraunces','Iowan Old Style',Georgia,serif;
  font-variation-settings:'opsz' 100,'wght' 500;
  font-size:clamp(2.2rem,1.3rem + 4.2vw,4.6rem);line-height:1.03;
  letter-spacing:-.02em;color:var(--g-vif);text-wrap:balance;
}
.g-tete__chapo{margin-top:1.8rem;max-width:44rem;font-size:clamp(1.02rem,.95rem + .35vw,1.25rem);color:var(--g-txt2)}
.g-tete__aide{margin-top:1rem;max-width:44rem;color:var(--g-txt2);font-size:.95em}
.g-tete__aide strong,.g-tete__chapo strong{color:var(--g-txt)}

.g-grille{
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,25rem),1fr));
  padding-block:clamp(2.5rem,6vw,5rem);
}
.g-carte{background:var(--g-fond2);border:1px solid var(--g-trait);border-radius:16px;overflow:hidden;
  transition:border-color 220ms ease,transform 220ms ease}
.g-carte:hover{border-color:#3D4450;transform:translateY(-3px)}
.g-carte__lien{display:block;text-decoration:none;color:inherit}
.g-carte__media{display:block;aspect-ratio:16/10;overflow:hidden;background:#0B0D10}
.g-carte__media img{width:100%;height:100%;object-fit:cover;transition:scale 500ms cubic-bezier(.22,1,.36,1)}
.g-carte:hover .g-carte__media img{scale:1.03}
.g-carte__corps{display:block;padding:clamp(1.2rem,3vw,1.9rem)}
.g-carte__num{display:block;font-size:12px;letter-spacing:.06em;color:var(--g-txt2);font-variant-numeric:tabular-nums}
.g-carte__nom{display:block;margin-top:.5rem;
  font-family:'Fraunces',Georgia,serif;font-variation-settings:'opsz' 48,'wght' 600;
  font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.1;color:var(--g-vif)}
.g-carte__tag{display:block;margin-top:.35rem;color:var(--g-txt2);font-size:.95em}
.g-carte__pitch{display:block;margin-top:1.1rem}
.g-carte__pour{display:block;margin-top:.9rem;color:var(--g-txt2);font-size:.94em}
.g-carte__pour strong{color:var(--g-txt)}
.g-carte__pied{display:flex;align-items:center;gap:.9rem;margin-top:1.4rem;
  padding-top:1.1rem;border-top:1px solid var(--g-trait);flex-wrap:wrap}
.g-carte__pal{display:inline-flex;gap:5px}
.g-carte__pastille{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.g-carte__pol{font-size:13px;color:var(--g-txt2)}
.g-carte__cta{display:block;margin-top:1.2rem;font-weight:600;color:var(--g-vif)}
.g-carte:hover .g-carte__cta{text-decoration:underline;text-underline-offset:4px}
.g-carte__pages{display:flex;flex-wrap:wrap;gap:.3rem;padding:0 clamp(1.2rem,3vw,1.9rem) 1.3rem}
.g-carte__pages a{font-size:12.5px;padding:.3rem .6rem;border:1px solid var(--g-trait);
  border-radius:99px;text-decoration:none;color:var(--g-txt2)}
.g-carte__pages a:hover{color:var(--g-vif);border-color:#3D4450}

.g-note{border-top:1px solid var(--g-trait);padding-block:clamp(2.5rem,5vw,4rem);max-width:52rem}
.g-note h2{font-family:'Fraunces',Georgia,serif;font-variation-settings:'opsz' 40,'wght' 600;
  font-size:clamp(1.4rem,1.2rem + .9vw,1.9rem);color:var(--g-vif);margin-bottom:1rem}
.g-note li{margin-bottom:.7rem;color:var(--g-txt2)}
.g-note li strong{color:var(--g-txt)}
.g-note p{color:var(--g-txt2)}

.g-pied{border-top:1px solid var(--g-trait);padding-block:2.5rem;color:var(--g-txt2);font-size:14px}
.g-pied__tech{margin-top:.6rem;opacity:.8}
.g-pied code{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.9em}