@font-face {
  font-family: "Josefin Sans";
  src: url("fonts/josefin-sans.woff") format("woff");
  font-weight: 100 700;
  font-display: swap;
}

:root {
  --noir: #0a0a0a;
  --blanc: #fff;
  --gris: #c4c4c4;
  --trait: rgb(255 255 255 / .14);
  --ligne: rgb(255 255 255 / .6);
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* La page est une planche : papier quadrillé (propagé au canevas) et cadre de 1 px.
   Ni isolation ni z-index sur body ou les blocs, sinon le fondu « lighten » de la vidéo ne voit plus le quadrillage. */
body {
  position: relative;
  margin: 0;
  padding-block: .75rem;
  background:
    linear-gradient(rgb(255 255 255 / .05) 1px, transparent 0) 0 0 / 100% 2.5rem,
    linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 0) 0 0 / 2.5rem 100%,
    linear-gradient(rgb(255 255 255 / .02) 1px, transparent 0) 0 0 / 100% .5rem,
    linear-gradient(90deg, rgb(255 255 255 / .02) 1px, transparent 0) 0 0 / .5rem 100%,
    var(--noir);
  color: var(--gris);
  font: 1.0625rem/1.6 "Josefin Sans", system-ui, sans-serif;
  text-wrap: pretty;
}
body::before { content: ""; position: absolute; inset: .75rem; z-index: -1; border: 1px solid var(--ligne); }
/* Le contenu reste dans le cadre, centré sur 72rem */
body > :not(main), main > * { margin-inline: .75rem; padding-inline: max(1rem, (100% - 72rem) / 2 - .75rem); }

img, video { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
p, ul, ol, dl { margin: 0 0 1.25rem; }
:is(p, ul, ol, dl):last-child { margin-bottom: 0; }
ul, ol { padding: 0; list-style: none; }
dd { margin: 0; }
a { color: var(--blanc); }
strong { color: var(--blanc); font-weight: 600; }

h1, h2, h3 { color: var(--blanc); text-transform: uppercase; text-wrap: balance; overflow-wrap: break-word; }
h1 { margin: 0 0 1.5rem; font-size: clamp(2rem, 5vw, 3.75rem); font-weight: 300; line-height: 1.05; letter-spacing: .04em; }
h2 { margin: 0 0 1.25rem; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 300; line-height: 1.15; letter-spacing: .04em; }
h3 { margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 600; letter-spacing: .12em; }
h3 em { margin-left: .5rem; padding: .25em .5em .15em; border: 1px solid; font: 600 .6rem var(--mono); letter-spacing: .1em; vertical-align: .3em; }

/* Écritures de plan */
.label, .onglets, dt, figcaption, .cote, .nom-tete, .format, .cartouche span { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.label { margin-bottom: 1rem; color: var(--ligne); font-weight: 400; }

.btn { display: inline-block; padding: .8em 1.25em .65em; border: 1px solid var(--blanc); background: var(--blanc); color: var(--noir); font-size: .85rem; font-weight: 600; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.btn:hover, .btn.ligne { background: transparent; color: var(--blanc); }
.btn.ligne:hover { background: var(--blanc); color: var(--noir); }
.actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* En-tête et onglets des prestations */
.entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: 1.25rem; border-bottom: 1px solid var(--trait); }
.marque { display: flex; align-items: center; gap: .75rem; color: var(--blanc); font-weight: 300; letter-spacing: .2em; text-decoration: none; text-transform: uppercase; }
.marque img { width: auto; height: 2rem; }
@media (max-width: 41.99rem) {
  .entete .actions { flex-basis: 100%; gap: .5rem; }
  .entete .btn { flex: auto; padding-inline: .75em; font-size: .72rem; letter-spacing: .05em; text-align: center; }
}
.onglets { display: grid; grid-template-columns: 1fr 1fr; padding-inline: 0; border-bottom: 1px solid var(--trait); }
.onglets a { display: grid; place-content: center; padding: .7rem .5rem .6rem; color: var(--gris); text-align: center; text-decoration: none; }
.onglets a:nth-child(even) { border-left: 1px solid var(--trait); }
.onglets a:nth-child(n+3) { border-top: 1px solid var(--trait); }
@media (min-width: 48rem) {
  .onglets { grid-template-columns: repeat(4, 1fr); }
  .onglets a + a { border-left: 1px solid var(--trait); }
  .onglets a:nth-child(n+3) { border-top: 0; }
}
.onglets a:hover, .onglets [aria-current] { color: var(--blanc); }
.onglets [aria-current] { box-shadow: inset 0 -2px var(--blanc); }

/* Blocs */
.hero, .bloc, .texte { padding-block: 4.5rem; }
.bloc { border-top: 1px solid var(--trait); }
.hero, .duo, .fiche { display: grid; gap: 2.5rem 3rem; }
@media (min-width: 56rem) {
  .hero, .duo { grid-template-columns: 7fr 5fr; align-items: center; }
  .fiche { grid-template-columns: 4fr 8fr; }
}
.chapo { max-width: 36rem; color: #e8e8e8; font-size: 1.25rem; }
.notes { display: grid; gap: 1rem; max-width: 36rem; margin-block: 2rem 2.5rem; }
.notes div { padding-left: 1rem; border-left: 1px solid var(--blanc); }
.notes dt { color: var(--blanc); }

/* Figures : repères de coupe, cote et cadre */
.fig { margin: .75rem; }
.reperes { position: relative; }
.reperes::after { --c: linear-gradient(var(--ligne) 0 0); content: ""; position: absolute; inset: -.75rem; pointer-events: none;
  background: var(--c) 0 0 / 1rem 1px, var(--c) 0 0 / 1px 1rem, var(--c) 100% 0 / 1rem 1px, var(--c) 100% 0 / 1px 1rem,
              var(--c) 0 100% / 1rem 1px, var(--c) 0 100% / 1px 1rem, var(--c) 100% 100% / 1rem 1px, var(--c) 100% 100% / 1px 1rem;
  background-repeat: no-repeat; }
/* « lighten » efface le fond presque noir de la vidéo : seul le logo reste, posé sur le quadrillage */
.reperes video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; mix-blend-mode: lighten; }
.logo-fixe { display: none; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: 12%; }
@media (prefers-reduced-motion: reduce) {
  .reperes video { display: none; }
  .logo-fixe { display: block; }
}
figcaption { margin-top: 1rem; }
.fig figcaption { margin-top: 1.75rem; color: var(--ligne); text-align: center; }
.cote { display: flex; align-items: center; gap: .75rem; height: 1.25rem; margin-bottom: .75rem; border-inline: 1px solid var(--ligne); color: var(--blanc); }
.cote::before, .cote::after { content: ""; flex: 1; height: .5rem;
  background: conic-gradient(from 70deg at 0 50%, var(--blanc) 40deg, transparent 0) 0 50% / .7rem 100% no-repeat,
              linear-gradient(var(--blanc) 0 0) 0 50% / 100% 1px no-repeat; }
.cote::after { scale: -1 1; }
.cadre { padding: .5rem; border: 1px solid var(--ligne); }
.cadre img, .cadre video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cadre .tableau { margin: 1rem; }
.cadre .tableau div { grid-template-columns: none; }

/* Tableaux et listes */
.tableau { border-top: 1px solid var(--blanc); }
.tableau div { display: grid; gap: .25rem 2rem; align-items: baseline; padding-block: 1rem .9rem; border-bottom: 1px solid var(--trait); }
@media (min-width: 40rem) { .tableau div { grid-template-columns: 11rem 1fr; } }
.tableau dt { color: var(--blanc); }
.coords a { font-size: 1.5rem; text-decoration: none; }
.coords a:hover { text-decoration: underline; }
/* Logos clients : grille à traits fins, comme le cartouche */
.clients { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; padding: 1px; background: var(--trait); }
.clients li { display: grid; place-items: center; background: var(--noir); }
div:has(> .clients) { container-type: inline-size; }
@container (min-width: 28rem) { .clients { grid-template-columns: repeat(4, 1fr); } }
.lignes { border-top: 1px solid var(--blanc); }
.lignes li { position: relative; display: grid; gap: .5rem 2rem; align-items: baseline; padding-block: 1.5rem; border-bottom: 1px solid var(--trait); }
.nom-tete { display: none; gap: .5rem 2rem; padding-bottom: .5rem; color: var(--ligne); }
@media (min-width: 56rem) {
  .nomenclature li, .nom-tete { display: grid; grid-template-columns: 4rem 1fr 11rem 7rem; }
}
.rep { color: var(--blanc); font-size: 2.5rem; font-weight: 100; line-height: 1; }
/* Toute la ligne de nomenclature est cliquable */
.lignes h3 a { color: inherit; text-decoration: none; }
.lignes h3 a::after { content: ""; position: absolute; inset: 0; }
.nomenclature li:hover { background: rgb(255 255 255 / .04); }
.voir { justify-self: start; border-bottom: 1px solid; color: var(--blanc); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; }
.revision { outline: 1px dashed var(--ligne); outline-offset: .75rem; }

.chiffre { text-align: center; }
.chiffre strong { display: block; font-size: clamp(4rem, 12vw, 6.5rem); font-weight: 100; line-height: 1; }
.chiffre p + .cote { margin-top: 3rem; }

/* Texte courant : mentions légales, 404 */
.texte > * { max-width: 46rem; }
.texte h2 { margin-top: 2.5rem; font-size: 1.25rem; font-weight: 600; letter-spacing: .12em; }

/* Cartouche, calé dans le coin inférieur droit du cadre */
.cartouche { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; gap: 1px; width: min(44rem, 100% - 1.5rem); margin: 2.5rem .75rem 0 auto; padding: 0; border: 1px solid var(--ligne); background: var(--ligne); }
@media (min-width: 44rem) { .cartouche { grid-template-columns: 1.3fr 1fr 1fr .5fr; } }
.cartouche div { padding: .45rem .75rem .35rem; background: var(--noir); color: var(--blanc); font-size: .95rem; }
.cartouche .large { grid-column: span 2; }
.cartouche span { display: block; color: rgb(255 255 255 / .5); font-size: .6rem; }
.cartouche a { color: inherit; }