/* Aucune requête vers un tiers : polices système, images locales. Un poste d'agence
   n'émet rien vers l'extérieur pendant qu'un dossier client est ouvert. */
:root{
  --ardoise:#22282e; --encre:#2f3740; --gris:#5d6773; --gris-clair:#8b95a1;
  --brique:#c9622f; --brique-fonce:#a8471f;
  --papier:#ffffff; --creme:#f6f4f1; --filet:#e2e5e8;
  --max:1120px;
}
*{box-sizing:border-box}
/* Pas de `scroll-behavior:smooth` : l'animation se fait annuler et l'ancre retombe en
   haut de page — constaté en Chrome, saut instantané à 2825 px contre 0 en animé.
   Un défilement joli qui rate sa cible vaut moins qu'un saut sec qui l'atteint. */
body{
  margin:0; background:var(--papier); color:var(--encre);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--brique-fonce)}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}

/* ── barre ── */
.barre{background:var(--ardoise); color:#fff; position:sticky; top:0; z-index:10}
.barre .wrap{display:flex; align-items:center; justify-content:space-between; height:58px; gap:16px}
.marque{font-weight:700; letter-spacing:.02em; font-size:15px}
.marque span{color:var(--brique); font-weight:400}
.barre nav{display:flex; gap:22px; font-size:14px}
.barre nav a{color:#cfd5dc; text-decoration:none}
.barre nav a:hover{color:#fff}
@media(max-width:720px){.barre nav{display:none}}

/* ── hero ── */
.hero{padding:76px 0 60px; border-bottom:1px solid var(--filet)}
.hero h1{
  font-size:clamp(34px,5.4vw,58px); line-height:1.06; letter-spacing:-.022em;
  margin:0 0 20px; color:var(--ardoise); font-weight:700; max-width:15ch;
}
.hero .chapeau{font-size:clamp(17px,2vw,20px); color:var(--gris); max-width:60ch; margin:0 0 30px}
.hero .chapeau b{color:var(--encre); font-weight:600}
.actions{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.bouton{
  display:inline-block; background:var(--brique-fonce); color:#fff; text-decoration:none;
  padding:14px 26px; border-radius:3px; font-weight:600; font-size:16px;
}
.bouton:hover{background:#8f3c19}
.bouton.creux{background:transparent; color:var(--ardoise); border:1px solid #c3c9d0}
.bouton.creux:hover{background:var(--creme)}
.visuel{margin-top:52px; border:1px solid var(--filet); width:100%; height:clamp(240px,34vw,420px); object-fit:cover; object-position:center 62%}

/* ── sections ── */
section{padding:66px 0; scroll-margin-top:58px}
header.hero{scroll-margin-top:58px}
section+section{border-top:1px solid var(--filet)}
.etiquette{
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brique-fonce); margin:0 0 12px;
}
h2{font-size:clamp(26px,3.4vw,36px); line-height:1.16; letter-spacing:-.015em; color:var(--ardoise); margin:0 0 18px; font-weight:700; max-width:22ch}
h3{font-size:19px; margin:0 0 7px; color:var(--ardoise); font-weight:650}
p{margin:0 0 16px}
.intro{font-size:19px; color:var(--gris); max-width:62ch}
.fond{background:var(--creme)}

.grille{display:grid; gap:34px; margin-top:38px}
.grille-2{grid-template-columns:repeat(2,1fr)}
.grille-3{grid-template-columns:repeat(3,1fr)}
.grille-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.grille-3,.grille-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grille-2,.grille-3,.grille-4{grid-template-columns:1fr}}
.carte p{color:var(--gris); font-size:16px; margin:0}
.num{font-size:13px; font-weight:700; color:var(--brique); letter-spacing:.08em; display:block; margin-bottom:9px}

/* ── deux colonnes texte + visuel ── */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center}
@media(max-width:860px){.duo{grid-template-columns:1fr; gap:32px}}
.duo img{border:1px solid var(--filet)}
.duo .cadree{height:clamp(220px,26vw,340px); object-fit:cover; width:100%}
/* Les deux visuels d'exemple partagent la même hauteur pour s'aligner. La volumétrie
   est en `contain` : rogner un dessin au trait le rendrait faux. */
.exemple{height:clamp(230px,25vw,330px); width:100%; background:#fff}
.exemple.trait{object-fit:contain; padding:14px}
.exemple.photo{object-fit:cover}
.legende{font-size:14px; color:var(--gris-clair); margin-top:10px}

/* ── tableau métré ── */
.cadre{overflow-x:auto; border:1px solid var(--filet); margin-top:30px; background:#fff}
table{border-collapse:collapse; width:100%; min-width:620px; font-size:14.5px}
thead th{background:var(--ardoise); color:#fff; text-align:left; font-weight:600; padding:11px 14px; font-size:13px; letter-spacing:.02em}
td{padding:11px 14px; border-bottom:1px solid var(--filet)}
tbody tr:nth-child(even){background:#fbfaf9}
td.q{text-align:right; font-variant-numeric:tabular-nums; font-weight:600}
td.vide{color:var(--brique-fonce); background:#fdf6f2}
td.src{color:var(--gris-clair); font-size:13px}

/* ── citation / règle ── */
.regle{border-left:3px solid var(--brique); background:var(--creme); padding:26px 30px; margin-top:34px}
.regle p{margin:0; font-size:18px; color:var(--encre)}
.regle p+p{margin-top:12px; font-size:16px; color:var(--gris)}

/* ── liste sorties ── */
.flux{list-style:none; padding:0; margin:26px 0 0}
.flux li{padding:14px 0; border-top:1px solid var(--filet); display:grid; grid-template-columns:210px 1fr; gap:20px; font-size:16px}
.flux li:last-child{border-bottom:1px solid var(--filet)}
.flux b{color:var(--ardoise); font-weight:650}
.flux span{color:var(--gris)}
@media(max-width:620px){.flux li{grid-template-columns:1fr; gap:4px}}

/* ── final ── */
.final{background:var(--ardoise); color:#fff; padding:74px 0}
.final h2{color:#fff; max-width:20ch}
.final p{color:#c3cbd4; max-width:58ch; font-size:18px}
.final .bouton{background:var(--brique)}
.final .bouton:hover{background:#e0713a}
/* Le secondaire reste creux : deux boutons pleins côte à côte n'indiquent plus de priorité. */
.final .bouton.creux{background:transparent; color:#fff; border:1px solid #4a545f}
.final .bouton.creux:hover{background:#2c333a}
footer{background:#1a1f24; color:#8b95a1; font-size:14px; padding:26px 0}
footer .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
footer a{color:#b6bec7; text-decoration:none}

/* ── bascule de langue ── */
.langues{display:flex; gap:2px; align-items:center; font-size:13px; margin-left:auto; margin-right:18px}
.langues a{
  color:#8b95a1; text-decoration:none; padding:4px 9px; border-radius:3px;
  letter-spacing:.04em; font-weight:600;
}
.langues a:hover{color:#fff; background:#2c333a}
.langues a[aria-current="true"]{color:#fff; background:#39424c}
.langues span{color:#4a545f}
@media(max-width:720px){.langues{margin-right:10px}}