/* Surface Brute — styles minimalistes, accessibles et responsives */
:root{
  /* Palette minérale */
  --bg: #F6F4F2;
  --ink: #151515;
  --stone: #D6D3CF;
  --sand: #C4B59A;
  --graphite: #2A2A2A;
  --muted: #5A5A5A;

  /* Typo */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  --font-head: var(--font-body);
  --focus: var(--sand);
  --link: var(--ink);
  --link-hover: #000000;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
a{color:inherit}
a:focus,button:focus,input:focus,textarea:focus{outline:2px solid var(--sand);outline-offset:2px}
.container{max-width:var(--max);margin-inline:auto;padding:clamp(12px,2vw,24px)}
header{position:sticky;top:0;background:rgba(247,245,242,.9);backdrop-filter:saturate(1.1) blur(6px);border-bottom:1px solid #e9e2db;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:36px;width:auto}
nav ul{display:flex;gap:14px;list-style:none;margin:0;padding:0}
nav a{padding:10px 12px;border-radius:999px;text-decoration:none}
nav a:hover{background:#ece7e0}
footer{background:#111;color:#eee}
footer a{color:#eee}
h1{font-size:clamp(1.8rem,3.4vw,3rem);line-height:1.1;margin:.25rem 0 .75rem}
h2{font-size:clamp(1.4rem,2.2vw,2rem)}
.card{background:#fff;border:1px solid #ece7e0;border-radius:16px;padding:16px}
.btn{appearance:none;border:1px solid #000;background:#000;color:#fff;padding:.75rem 1rem;border-radius:12px;cursor:pointer;text-decoration:none}
/*.btn.alt{background:transparent;color:#000}*/
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cols{display:grid;grid-template-columns:2fr 1fr;gap:24px}
/*@media (max-width:900px){
  nav ul{display:none}
  .grid-3{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr}
}*/
@media (max-width:900px){
  .nav{flex-wrap:wrap}
  nav ul{display:flex;flex-wrap:wrap;gap:10px}
  nav a{padding:8px 10px}
}
.hero-full{min-height:100vh;display:grid;place-items:center;position:relative;color:#fff;background:#000}
.hero-full img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.75)}
.hero-full .overlay{position:relative;z-index:2;text-align:center;padding:24px}
.hero-full .overlay h1{color:#fff;margin-bottom:.25rem}
.hero-full .overlay p{max-width:780px;margin:0 auto 1rem auto;color:#f1f1f1}
.badge{display:inline-block;background:rgba(212,206,198,.85);color:#000;padding:.35rem .6rem;border-radius:999px;font-size:.9rem}
figure.media{border-radius:12px;overflow:hidden}
figure.media img{width:100%;height:auto;display:block}
.main{min-height:60vh}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.small{font-size:.92rem;color:#444}
ul.clean{margin:0;padding-left:1.1rem}
/* --- Réalisations : grille responsive --- */

/* Tablette : 2 colonnes */
@media (max-width: 1100px){
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* Smartphone : 1 colonne */
@media (max-width: 900px){
  .grid-3 { grid-template-columns: 1fr; }
  /* Pour que les images ne rétrécissent pas trop en hauteur sur mobile */
  /*.media img { height: auto; max-height: none; }*/
}
.to-top { text-decoration:none }
.to-top:hover { text-decoration:underline }
html { scroll-behavior: smooth; }
#top { scroll-margin-top: 80px; }

/* =========================================
   SURFACE BRUTE — Overrides palette, typo, nav, grille
   ========================================= */

/* Typo & fond */
html,body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
}

/* Liens */
a{ color: var(--link); }
a:hover{ color: var(--link-hover); }

/* Focus visible et cohérent */
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

/* Boutons */
.btn{
  background: var(--graphite);
  color:#fff;
  border:1px solid var(--graphite);
}
.btn.alt{
  background:transparent;
  color:var(--graphite);
  border:1px solid var(--graphite);
}

/* Cartes & badges */
.card{ background:#fff; border:1px solid var(--stone); }
.badge{ background: var(--stone); color:#000; }

/* Navigation Option A: garder le menu visible en mobile */
@media (max-width:900px){
  .nav{ flex-wrap: wrap; }
  nav ul{ display:flex; flex-wrap: wrap; gap:10px; }
  nav a{ padding:8px 10px; }
}

/* Grille des réalisations — responsive */
@media (max-width:1100px){
  .grid-3{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width:900px){
  .grid-3{ grid-template-columns: 1fr; }
  /* Images plus confortables en mobile */
  .media img{ height:auto; max-height:none; }
}

/* Confort d'usage */
html{ scroll-behavior:smooth; }
.to-top{ text-decoration:none; }
.to-top:hover{ text-decoration:underline; }

/* (Optionnel) mode sombre respectueux des préférences système */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#111213; --ink:#EDEDED; --graphite:#F0F0F0; --stone:#2A2A2A; --muted:#B8B8B8;
    --link:#EDEDED; --link-hover:#FFFFFF; --focus:#C4B59A;
  }
  .card{ background:#1A1B1C; border-color:#2A2A2A; }
  .badge{ background:#2A2A2A; color:#fff; }
  .btn.alt{ color:var(--ink); border-color:var(--ink); }
}
/* --- Contraste des boutons sur le hero (page d’accueil) --- */
.hero-full .overlay .btn{
  background: #000;          /* fond noir franc */
  border-color: #000;
  color: #fff;               /* texte blanc → contraste AAA */
}
.hero-full .overlay .btn.alt{
  background: rgba(0,0,0,.6);/* fond semi-opaque pour garder la lisibilité sur l’image */
  border-color: #fff;        /* bord blanc visible sur sombre */
  color: #fff;
}
.hero-full .overlay .btn:hover,
.hero-full .overlay .btn.alt:hover{
  filter: brightness(1.05);
}

/* --- Contraste du menu du haut (header) --- */
header{
  background: #F6F4F2;       /* fond opaque (plus lisible que translucide) */
  border-bottom: 1px solid #D6D3CF;
}
nav a{
  color: #111;               /* plus sombre que #151515 */
  font-weight: 600;          /* un peu plus de présence */
  text-decoration: none;
}
@media (hover:hover){
  nav a:hover{
    color: #000;
    text-decoration: underline;      /* signal clair au survol */
    text-underline-offset: 2px;
    background: transparent;         /* évite les pills trop clairs */
  }
}

/* --- Variante dark mode pour rester lisible quand l’OS est en sombre --- */
@media (prefers-color-scheme: dark){
  header{
    background: #111213;
    border-bottom: 1px solid #2A2A2A;
  }
  nav a{
    color: #EDEDED;
  }
  @media (hover:hover){
    nav a:hover{
      color: #FFFFFF;
      background: #1A1B1C;
      text-decoration: underline;
    }
  }
}
/* Décalage d’ancre pour header fixe */
[id] { scroll-margin-top: 80px; } /* ajuste 80px à la hauteur de ton header */