/* Inertys · feuille de style du site
   Design system Inertys v1 (4 novembre 2026) : fond blanc cassé, anthracite dominant, laiton accent unique,
   IBM Plex Sans partout, IBM Plex Mono pour les valeurs et les coordonnées, angles droits, ni ombre ni dégradé.
   Couleurs d'état (marche, alerte, arrêt) : réservées à l'état des machines, proposées en ajout au design system. */

@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/plex-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/plex-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/plex-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/plex-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/plex-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  /* jetons du design system */
  --fond:#FAFAF8;
  --anthracite:#2A2D2A;
  --surface:#E6E7E3;
  --gris-texte:#565B57;
  --filet:#CFD0CB;
  --texte-sur-sombre:#FAFAF8;
  --gris-sur-sombre:#C4C5C0;
  --laiton:#A3814F;
  /* états de machine, sur fond clair */
  --etat-marche:#2E7D4F;
  --etat-alerte:#8A5A00;
  --etat-arret:#B3362B;
  /* espacements */
  --esp-1:8px; --esp-2:16px; --esp-3:24px; --esp-4:32px; --esp-5:56px;
  --largeur:1120px;
  --sans:"IBM Plex Sans",Arial,sans-serif;
  --mono:"IBM Plex Mono",Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--anthracite);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
[hidden]{display:none!important}
a{color:inherit;text-decoration-color:var(--filet);text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--laiton);outline-offset:3px}
::selection{background:var(--laiton);color:var(--anthracite)}
h1,h2,h3{font-weight:600;line-height:1.15;letter-spacing:-.01em;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:var(--largeur);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px;top:0;background:var(--anthracite);color:var(--fond);padding:8px 12px;z-index:50}
.skip:focus{left:16px}

/* En-tête */
.site-head{border-bottom:1px solid var(--filet);background:var(--fond);position:sticky;top:0;z-index:20}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-3);min-height:64px}
.logo{display:block;line-height:0}
.logo img{height:30px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:var(--esp-3);font-size:15px}
.nav a{text-decoration:none;color:var(--gris-texte)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--anthracite)}
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--laiton);text-decoration-thickness:2px;text-underline-offset:6px}
.menu{display:none}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:1px solid var(--anthracite);background:var(--anthracite);color:var(--fond);font:500 15px/1.2 var(--sans);text-decoration:none;cursor:pointer}
.btn:hover{background:#3B3F3B;border-color:#3B3F3B}
.btn.ligne{background:transparent;color:var(--anthracite)}
.btn.ligne:hover{background:var(--surface)}
.sombre .btn{background:var(--fond);color:var(--anthracite);border-color:var(--fond)}
.sombre .btn:hover{background:var(--surface);border-color:var(--surface)}
.sombre .btn.ligne{background:transparent;color:var(--texte-sur-sombre);border-color:var(--gris-sur-sombre)}
.sombre .btn.ligne:hover{background:#3B3F3B}
.nav .btn{color:var(--fond);padding:8px 14px;font-size:14px}

/* Bandes */
.bande{padding-block:clamp(56px,8vw,96px)}
.bande + .bande{border-top:1px solid var(--filet)}
.sombre{background:var(--anthracite);color:var(--texte-sur-sombre)}
.sombre + .bande,.bande + .sombre{border-top:0}
.relief{background:var(--surface)}
.surtitre{font-size:14px;color:var(--gris-texte);margin-bottom:var(--esp-1)}
.sombre .surtitre{color:var(--gris-sur-sombre)}
.titre-section{font-size:clamp(26px,3vw,34px);margin-bottom:var(--esp-2);max-width:26ch}
.titre-section.trait{padding-bottom:12px;border-bottom:2px solid var(--anthracite);max-width:none}
.chapeau{font-size:18px;color:var(--gris-texte);max-width:60ch}
.sombre .chapeau{color:var(--gris-sur-sombre)}

/* Ouverture */
.ouverture .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--esp-5);align-items:center}
.ouverture h1{font-size:clamp(36px,4.6vw,52px);line-height:1.08;letter-spacing:-.015em}
.ouverture h1 span{display:block;color:var(--laiton)}
.ouverture .chapeau{margin-top:var(--esp-3);font-size:18px;line-height:1.55}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--esp-4)}
.vue{display:block;border:1px solid #4E534E;background:#323632;line-height:0;text-decoration:none}
.vue img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.vue figcaption{line-height:1.45;font-size:14px;color:var(--gris-sur-sombre);padding:10px 14px}
video.vue{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.visite figure>figcaption{line-height:1.45;font-size:14px;color:var(--gris-sur-sombre);padding:10px 0 0}

/* Constat */
.constat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--esp-5);align-items:start}
.citation{font-size:clamp(24px,2.6vw,30px);font-weight:600;line-height:1.25;border-top:2px solid var(--laiton);padding-top:var(--esp-2)}
.citation small{display:block;margin-top:10px;font-size:15px;font-weight:400;color:var(--gris-texte)}
.points{list-style:none;margin:0;padding:0;display:grid;gap:var(--esp-3)}
.points li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px}
.points li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--laiton);margin-top:10px}

/* Systèmes lus */
.systemes{list-style:none;margin:var(--esp-4) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--filet);border:1px solid var(--filet)}
.systemes li{background:var(--fond);padding:20px 22px 22px;display:grid;gap:6px;align-content:start}
.systemes b{font-size:19px;font-weight:600}
.systemes span{font-size:15px;color:var(--gris-texte)}
.note{margin-top:var(--esp-3);font-size:15px;color:var(--gris-texte)}
.note strong{color:var(--anthracite);font-weight:600}

/* Rôles */
.roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--esp-3);margin-top:var(--esp-4)}
.role{border-top:2px solid var(--anthracite);padding-top:14px;display:grid;gap:8px;align-content:start}
.role h3{font-size:18px}
.role ul{margin:0;padding-left:18px;color:var(--gris-texte);font-size:15px;display:grid;gap:4px}
.role .appareil{font-size:14px;color:var(--gris-texte)}

/* Étapes */
.etapes{list-style:none;margin:var(--esp-4) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--esp-3)}
.etapes li{display:grid;gap:8px;align-content:start}
.etapes .num{font-size:24px;font-weight:600;line-height:1;color:var(--laiton);font-variant-numeric:tabular-nums}
.etapes h3{font-size:18px}
.etapes p{font-size:15px;color:var(--gris-texte)}
.sombre .etapes p{color:var(--gris-sur-sombre)}

/* Visite */
.visite .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--esp-5);align-items:center}
.visite h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:var(--esp-2)}
.chiffres{list-style:none;margin:var(--esp-3) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--esp-2)}
.chiffres b{display:block;font-size:30px;font-weight:600;line-height:1;color:var(--laiton);font-variant-numeric:tabular-nums}
.chiffres span{font-size:14px;color:var(--gris-sur-sombre)}

/* Qui */
.qui{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--esp-5);align-items:start}
.qui p + p{margin-top:var(--esp-2)}

/* Contact */
.contact .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--esp-5);align-items:end}
.contact h2{font-size:clamp(32px,4.4vw,50px);line-height:1.08;color:var(--laiton)}
.coord{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-family:var(--mono);font-size:16px}
.coord a{text-decoration:none;color:var(--texte-sur-sombre);border-bottom:1px solid #4E534E}
.coord a:hover{border-bottom-color:var(--laiton)}
.coord span{display:block;font-family:var(--sans);font-size:13px;color:var(--gris-sur-sombre)}

/* Pages intérieures */
.entete-page{padding-block:clamp(48px,7vw,80px) clamp(32px,4vw,48px);border-bottom:1px solid var(--filet)}
.entete-page h1{font-size:clamp(34px,4.4vw,50px);line-height:1.08;letter-spacing:-.015em;margin-bottom:var(--esp-2);max-width:20ch}
.tableau-wrap{overflow-x:auto;margin-top:var(--esp-3)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:15px}
th,td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--filet)}
th{font-weight:600;border-bottom:2px solid var(--anthracite)}
td:first-child{font-weight:600;white-space:nowrap}
.fonctions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-3);margin-top:var(--esp-4)}
.fonction{border:1px solid var(--filet);background:var(--fond);padding:18px 20px 20px;display:grid;gap:10px;align-content:start}
.fonction h3{font-size:18px}
.fonction .pour{font-size:14px;color:var(--gris-texte)}
.fonction dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0;font-size:15px}
.fonction dt{color:var(--gris-texte);font-size:14px;padding-top:1px}
.fonction dd{margin:0}
.lit{display:flex;flex-wrap:wrap;gap:4px}
.lit span{font-size:13px;padding:1px 7px;border:1px solid var(--filet);color:var(--gris-texte)}
.lit span.on{background:var(--anthracite);border-color:var(--anthracite);color:var(--fond)}
.groupe{margin-top:var(--esp-5)}
.groupe:first-of-type{margin-top:var(--esp-4)}
.regles{list-style:none;margin:var(--esp-3) 0 0;padding:0;display:grid;gap:var(--esp-2);max-width:70ch}
.regles li{border-left:0;padding:14px 18px;background:var(--surface)}
.regles b{display:block;margin-bottom:4px}
.texte{max-width:72ch}
.texte h2{font-size:22px;margin:var(--esp-5) 0 var(--esp-2)}
.texte h2:first-child{margin-top:0}
.texte p + p,.texte ul + p,.texte p + ul{margin-top:var(--esp-2)}
.texte ul{padding-left:20px}
.a-completer{font-family:var(--mono);font-size:.9em;background:var(--surface);padding:0 4px;color:var(--etat-arret)}
.alerte{border:1px solid var(--etat-alerte);padding:14px 18px;margin-bottom:var(--esp-4);font-size:15px}

/* Pied */
.site-pied{border-top:1px solid var(--filet);padding-block:var(--esp-4);font-size:14px;color:var(--gris-texte)}
.site-pied .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--esp-2)}
.site-pied img{height:22px;width:auto;display:block}
.site-pied nav{display:flex;flex-wrap:wrap;gap:var(--esp-3)}
.site-pied a{text-decoration:none}
.site-pied a:hover{text-decoration:underline}

@media (max-width:900px){
  .ouverture .wrap,.constat,.visite .wrap,.qui,.contact .wrap{grid-template-columns:minmax(0,1fr);gap:var(--esp-4)}
  .systemes,.roles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .etapes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fonctions{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav{display:none}
  .menu{display:block;position:relative}
  .menu summary{list-style:none;cursor:pointer;padding:8px 12px;border:1px solid var(--anthracite);font-size:15px}
  .menu summary::-webkit-details-marker{display:none}
  .menu[open] summary{background:var(--anthracite);color:var(--fond)}
  .menu nav{position:absolute;right:0;top:calc(100% + 8px);width:min(300px,calc(100vw - 32px));background:var(--fond);border:1px solid var(--anthracite);display:grid}
  .menu nav a{padding:12px 16px;text-decoration:none;border-bottom:1px solid var(--filet)}
  .menu nav a:last-child{border-bottom:0}
}
@media (max-width:560px){
  .systemes,.roles,.etapes{grid-template-columns:minmax(0,1fr)}
  .chiffres{grid-template-columns:minmax(0,1fr)}
  .logo img{height:26px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}