/* Police servie depuis le site et pas depuis Google : aucune adresse IP de visiteur ne part chez Google. */
@font-face { font-family:"Schibsted Grotesk"; src:url(polices/schibsted-grotesk.woff2) format("woff2"); font-weight:400 900; font-display:swap; }

:root { color-scheme:only light; --papier:#f1eee8; --encre:#141414; --gris:#5f5c57; --trait:#d6d1c7; --signal:#d8431c; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--papier); color:var(--encre); font:400 18px/1.6 "Schibsted Grotesk", system-ui, sans-serif; overflow-x:clip; }
a { color:inherit; }
.page { max-width:1240px; margin:0 auto; padding:0 28px; }

/* En-tete pose sur la page, sans barre ni bordure. */
.entete { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:30px; }
.marque { text-decoration:none; font-weight:800; font-size:1.25rem; letter-spacing:-.02em; }
.marque small { font-weight:500; color:var(--gris); font-size:.88rem; letter-spacing:0; margin-left:8px; }
.entete .tel-haut { font-weight:700; text-decoration:none; white-space:nowrap; }
/* EN-TETE : logo forteresse (le nom), e-mail et telephone lisibles d'un coup d'oeil */
.marque { display:flex; align-items:center; gap:12px; }
.marque .logo { width:34px; height:34px; color:var(--encre); flex:none; }
.joindre { display:flex; align-items:center; gap:10px; }
.joindre a { display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:600; font-size:.98rem; padding:9px 16px; border-radius:999px; transition:background .2s, color .2s; }
.joindre svg { width:18px; height:18px; flex:none; }
.mail-haut { color:var(--gris); }
.mail-haut:hover { color:var(--encre); }
.entete .tel-haut { box-shadow:inset 0 0 0 1.5px var(--encre); }
.entete .tel-haut:hover { background:var(--encre); color:var(--papier); }

.bouton { display:inline-block; background:var(--encre); color:var(--papier); text-decoration:none; font:inherit; font-weight:700; padding:15px 26px; border:0; border-radius:999px; font-size:1rem; white-space:nowrap; cursor:pointer; transition:background .2s; }
.bouton:hover { background:var(--signal); }
.bouton.clair { background:transparent; color:var(--encre); box-shadow:inset 0 0 0 1.5px var(--encre); }
.bouton.clair:hover { background:var(--encre); color:var(--papier); }
.bouton:disabled { opacity:.6; cursor:wait; }

section { padding:110px 0; }
.bande { border-top:1px solid var(--trait); }
h2 { font-size:clamp(2rem, 4.2vw, 3.4rem); line-height:1.02; letter-spacing:-.03em; font-weight:800; max-width:16em; }
.intro { color:var(--gris); font-size:1.15rem; max-width:36em; margin-top:18px; }

footer { border-top:1px solid var(--trait); padding:28px 0 40px; color:var(--gris); font-size:.9rem; }
footer .page { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }

@media (max-width:900px) {
  .entete { padding-top:20px; }
  .marque small { display:none; }
  .mail-haut span { display:none; }
  .mail-haut { padding:9px; box-shadow:inset 0 0 0 1.5px var(--trait); }

  section { padding:80px 0; }
}
/* Sur telephone, la ligne ne tient pas avec le numero en clair : deux pastilles icone, un toucher suffit pour appeler. */
@media (max-width:520px) {
  .joindre .tel-haut { font-size:0; gap:0; padding:9px; }
  .marque .logo { width:28px; height:28px; }
}