:root { --paper:#fff; --ink:#000; --rule:#000; --soft:#727272; --hair:#d4d4d4; }
@media (prefers-color-scheme: dark) {
  :root { --paper:#000; --ink:#fff; --rule:#fff; --soft:#9c9c9c; --hair:#333; }
}
:root[data-theme="dark"]  { --paper:#000; --ink:#fff; --rule:#fff; --soft:#9c9c9c; --hair:#333; }
:root[data-theme="light"] { --paper:#fff; --ink:#000; --rule:#000; --soft:#727272; --hair:#d4d4d4; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 62rem; margin: 0 auto; padding: clamp(2.5rem,7vw,2.5rem) clamp(1.5rem,6vw,4.5rem) 0; }

/* identité */
.head { margin-bottom: clamp(4rem,11vw,8rem); }
.head svg { display:block; width:100%; height:auto; fill: currentColor; }
.head .home, .head .home:hover, .head .home:focus-visible {
  display:block; width:140px; max-width:44%;
  border-bottom:0; background:none; color:inherit;
}
.head .home:hover svg, .head .home:focus-visible svg { opacity:.55; }

.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* accroche */
.hero { margin: 0 0 clamp(4rem,11vw,8rem); }
h1 {
  font-size: clamp(1.9rem,5.6vw,3.4rem);
  line-height: 1.08;
  letter-spacing: -0.032em;
  font-weight: 400;
  margin: 0;
  max-width: 20ch;
}
h1 em { font-style: normal; color: var(--soft); }
.hero p {
  margin: clamp(1.6rem,3vw,2.4rem) 0 0;
  max-width: 46ch;
  font-size: clamp(1rem,1.9vw,1.15rem);
  line-height: 1.5;
}

/* grille : étiquette + contenu */
section { display:grid; grid-template-columns: 8rem 1fr; gap: 0 3rem; padding: clamp(2.2rem,4vw,3.2rem) 0; border-top:1px solid var(--rule); }
.lab { font-size:10.5px; line-height:1.45; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); padding-top:.5em; }
.lab b { display:block; font-weight:400; color:var(--ink); }
.cont { max-width: 36rem; }
.cont > :first-child { margin-top:0; }
.cont > :last-child { margin-bottom:0; }

h2 { font-size:clamp(1.28rem,2.4vw,1.55rem); font-weight:600; letter-spacing:-0.026em; line-height:1.24; margin:0 0 1em; max-width:24ch; }
h3 { font-size:15px; font-weight:400; margin:0 0 .25em; }
p { margin:0 0 1em; }
.soft { color: var(--soft); }

/* offres */
.offer { border-top:1px solid var(--hair); padding:1.15rem 0; display:grid; grid-template-columns:1fr auto; gap:.4rem 1.5rem; align-items:baseline; }
.offer:first-of-type { border-top:0; padding-top:0; }
.offer p { grid-column:1/-1; margin:0; color:var(--soft); max-width:40ch; }
.price { font-variant-numeric:tabular-nums; white-space:nowrap; }

/* chiffres */
.specs { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin:0 0 1.2em; }
.specs div { border-top:1px solid var(--hair); padding-top:.55rem; }
.specs b { display:block; font-weight:400; font-size:clamp(1.3rem,3vw,1.7rem); letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
.specs span { font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); }

ul.contact { list-style:none; margin:0 0 clamp(2rem,4vw,2.8rem); padding:0; display:flex; flex-direction:column; gap:.3rem; }
ul.contact li { margin:0; }
ul.contact a { font-size:clamp(1.05rem,2vw,1.2rem); }

dl.year { display:grid; grid-template-columns:4rem 1fr; gap:.4rem 1.5rem; margin:1.2em 0 0; }
dl.year dt { color:var(--soft); font-variant-numeric:tabular-nums; }
dl.year dd { margin:0; }

a { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ink); }
a:hover, a:focus-visible { color:var(--paper); background:var(--ink); }

/* navigation */
nav { margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:.35rem 1.4rem; }
nav a { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; border-bottom:0; color:var(--soft); }
nav a:hover, nav a:focus-visible { color:var(--ink); background:none; text-decoration:underline; text-underline-offset:.35em; }
nav a[aria-current] { color:var(--ink); text-decoration:underline; text-underline-offset:.35em; }

/* registre */
.cont.wide { max-width:none; }
.tw { overflow-x:auto; margin:0 0 clamp(2rem,4vw,3rem); }
.tw:last-child { margin-bottom:0; }
/* colonne 1 variable, toutes les autres à largeur fixe et identique d'un tableau à l'autre */
table { border-collapse:collapse; width:100%; min-width:34rem; table-layout:fixed; }
th, td { text-align:left; padding:.75rem 1.2rem .75rem 0; border-top:1px solid var(--hair); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
th:not(:first-child), td:not(:first-child) { width:7.5rem; text-align:center; padding-right:0; }
thead th { border-top:0; font-weight:400; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); padding-top:0; }
td.g { font-variant-numeric:tabular-nums; }
tbody td:last-child { color:var(--soft); font-variant-numeric:tabular-nums; }
td.soon { font-size:12.5px; letter-spacing:.02em; color:var(--soft); }
.cont.wide h2 { margin-top:clamp(1.6rem,3vw,2.2rem); }
.cont.wide > h2:first-child { margin-top:0; }

/* listes courantes */
ul.plain { list-style:none; margin:0 0 1em; padding:0; }
ul.plain li { position:relative; padding-left:1.2rem; margin-bottom:.5em; }
ul.plain li::before { content:""; position:absolute; left:0; top:.72em; width:7px; height:1px; background:currentColor; opacity:.5; }

/* étapes numérotées */
ol.steps { list-style:none; counter-reset:s; margin:0; padding:0; }
ol.steps li { counter-increment:s; border-top:1px solid var(--hair); padding:1.05rem 0 1.05rem 2.6rem; position:relative; }
ol.steps li:first-child { border-top:0; padding-top:0; }
ol.steps li::before { content:counter(s,decimal-leading-zero); position:absolute; left:0; top:1.15rem; font-size:10.5px; letter-spacing:.12em; color:var(--soft); font-variant-numeric:tabular-nums; }
ol.steps li:first-child::before { top:.1rem; }
ol.steps b { font-weight:600; display:block; }
ol.steps span { color:var(--soft); }

/* accordéon */
details { border-top:1px solid var(--hair); }
details:first-of-type { border-top:0; }
summary {
  list-style:none; cursor:pointer; padding:1.05rem 1.75rem 1.05rem 0; position:relative;
  font-size:15px; line-height:1.4;
}
summary::-webkit-details-marker { display:none; }
summary::after {
  content:"+"; position:absolute; right:0; top:1rem; color:var(--soft); font-size:15px; line-height:1;
}
details[open] summary::after { content:"–"; }
summary:hover, summary:focus-visible { color:var(--soft); }
details p { margin:0 0 1.15rem; color:var(--soft); max-width:44ch; }

/* bloc contact inversé, repris en bas de chaque page */
.invert {
  display:block;
  background:var(--ink); color:var(--paper);
  border-top:0; margin-top:clamp(2.2rem,4vw,3.2rem);
  padding:clamp(2rem,4.5vw,3rem) clamp(1.4rem,3vw,2.2rem);
}
.invert .cont { max-width:none; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.invert .col > :first-child { margin-top:0; }
.invert .col > :last-child { margin-bottom:0; }
.invert h2 { margin-bottom:.85em; max-width:22ch; }
.invert .soft { color:var(--paper); opacity:.62; }
.invert a { color:var(--paper); border-bottom-color:var(--paper); }
.invert a:hover, .invert a:focus-visible { color:var(--ink); background:var(--paper); }

footer {
  border-top:1px solid var(--rule);
  margin-top: clamp(2.2rem,4vw,3.2rem);
  padding: 1.4rem 0 2.5rem;
  display:grid; grid-template-columns:8rem 1fr; gap:1.2rem 3rem;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--soft);
}
footer nav { margin:0; gap:.5rem 1.4rem; }
footer .about { text-transform:none; letter-spacing:0; font-size:12.5px; line-height:1.5; max-width:44ch; }
footer .legal { grid-column:2; display:flex; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; }

@media (max-width:44rem) {
  section { grid-template-columns:1fr; gap:1.2rem 0; }
  .lab { padding-top:0; }
  .lab b { display:inline; }
  .lab b::after { content:" ·"; }
  .specs { grid-template-columns:1fr 1fr; }
  .invert .cont { grid-template-columns:1fr; }
  footer { grid-template-columns:1fr; }
  footer .legal { grid-column:1; }
}

/* blog */
.prose { max-width:38rem; }
.prose h2 { margin-top:2.4rem; }
.prose h3 { font-weight:600; margin:1.8rem 0 .4rem; }
.prose ul.plain { margin-bottom:1.4em; }
.meta { font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); margin:0 0 clamp(2rem,4vw,3rem); display:flex; flex-wrap:wrap; gap:.35rem 1.4rem; }
.posts { list-style:none; margin:0; padding:0; }
.posts li { border-top:1px solid var(--hair); padding:1.4rem 0; }
.posts li:first-child { border-top:0; padding-top:0; }
.posts h2 { font-size:1.2rem; margin:0 0 .35em; max-width:32ch; }
.posts h2 a { border-bottom:0; }
.posts h2 a:hover { background:none; color:var(--soft); }
.posts p { margin:0 0 .5em; color:var(--soft); max-width:44ch; }
.posts .meta { margin:0; }

/* listes de définition des mentions légales */
dl.ml { display:grid; grid-template-columns:14rem 1fr; gap:.5rem 2rem; margin:0 0 1.4em; }
dl.ml dt { color:var(--soft); }
dl.ml dd { margin:0; }
@media (max-width:44rem) { dl.ml { grid-template-columns:1fr; gap:.1rem 0; } dl.ml dd { margin-bottom:.7rem; } }

/* citations pleine largeur entre les sections */
.pull {
  display:block; border-top:1px solid var(--rule);
  padding: clamp(3rem,7vw,5rem) 0 clamp(2.6rem,6vw,4.2rem);
}
.pull p {
  font-size: clamp(1.7rem,4.6vw,2.9rem);
  line-height:1.12; letter-spacing:-0.03em;
  margin:0; max-width:46rem;
  /* première ligne au bord, lignes suivantes alignées sur la colonne des titres */
  padding-left:11rem; text-indent:-11rem;
}
@media (max-width:44rem) {
  .pull p { padding-left:0; text-indent:0; max-width:18ch; }
}