/* Énergies Fluides Pro — proposition de refonte.
   Papier, encre, et deux couleurs réservées au fluide : rouge départ, bleu retour. */

@font-face { font-family: "Instrument Serif"; src: url(fonts/instrument-serif.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(fonts/instrument-serif-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(fonts/instrument-sans.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(fonts/plex-mono.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(fonts/plex-mono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --papier: #F3F0E8;
  --papier-2: #ECE7DC;
  --papier-3: #E3DDCF;
  --encre: #0E1726;
  --encre-2: #182235;
  --texte: #2A3446;
  --gris: #5C6576;
  --filet: rgba(14, 23, 38, .13);
  --filet-fort: rgba(14, 23, 38, .3);
  --rouge: #D93A2B;
  --bleu: #2459C8;
  --clair: #E8ECF3;
  --serif: "Instrument Serif", "Iowan Old Style", "Times New Roman", serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --marge: clamp(20px, 4.2vw, 72px);
  --gouttiere: clamp(16px, 2vw, 32px);
  --max: 1260px;
  --entete: 76px;
  --courbe: cubic-bezier(.2, .7, .15, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--entete) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--papier); color: var(--texte);
  font: 400 16px/1.62 var(--sans); font-kerning: normal;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
/* grain du papier, à peine perceptible */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 400; color: var(--encre); }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
strong { font-weight: 600; color: var(--encre); }
::selection { background: var(--encre); color: var(--papier); }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; border-radius: 2px; }

.cadre { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--marge); }
.grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); }
.mono { font: 500 11.5px/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; }

.evitement { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--encre); color: var(--papier); padding: 10px 16px; border-radius: 6px; }
.evitement:focus { top: 12px; }

/* ---------- bandeau « concept » ---------- */
.concept { background: var(--encre); color: rgba(243, 240, 232, .72); font: 400 11px/1.4 var(--mono); letter-spacing: .05em; }
.concept .cadre { padding-top: 7px; padding-bottom: 7px; }
.concept a { color: var(--papier); border-bottom: 1px solid rgba(243, 240, 232, .35); }

/* ---------- en-tête ---------- */
.entete { position: sticky; top: 0; z-index: 40; height: var(--entete); transition: transform .45s var(--courbe), background-color .3s, box-shadow .3s; }
.entete.defile { background: rgba(243, 240, 232, .96); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--filet); }
.entete.cache { transform: translateY(-100%); }
.entete-in { height: 100%; display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px); }
.logo { display: inline-flex; align-items: center; gap: 11px; color: var(--encre); flex: none; }
.logo-efp { height: 27px; width: auto; aspect-ratio: 455 / 150; flex: none; color: #0E0DEC; }
.logo-nom { font: 400 19px/1 var(--serif); letter-spacing: -.005em; white-space: nowrap; padding-left: 12px; border-left: 1px solid var(--filet-fort); }
.pied .logo-efp { color: #fff; } .pied .logo-nom { border-left-color: rgba(232, 236, 243, .3); }
.logo-pro { font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; border: 1px solid currentColor; padding: 3px 5px 2px; border-radius: 3px; opacity: .8; }
.nav { display: flex; gap: clamp(18px, 2.2vw, 34px); margin-left: auto; }
.nav a { font-size: 14.5px; color: var(--texte); position: relative; padding: 6px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--courbe); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.tel { font: 500 13px/1 var(--mono); letter-spacing: .04em; color: var(--encre); white-space: nowrap; }
.tel-lib { color: var(--gris); margin-right: 2px; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: 999px; font: 500 15px/1 var(--sans); letter-spacing: .005em; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--encre); transition: background-color .3s, color .3s, transform .3s var(--courbe);
}
.bouton-plein { background: var(--encre); color: var(--papier); }
.bouton-plein:hover { background: var(--encre-2); transform: translateY(-1px); }
.bouton-plein::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rouge); box-shadow: 9px 0 0 var(--bleu); margin-right: 9px; }
.bouton-entete { min-height: 42px; padding: 0 18px; font-size: 14px; }

.burger { display: none; width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--filet-fort); border-radius: 50%; background: transparent; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--encre); transition: transform .4s var(--courbe), top .4s var(--courbe); }
.burger span:first-child { top: 17px; } .burger span:last-child { top: 25px; }
.menu-ouvert .burger span:first-child { top: 21px; transform: rotate(45deg); }
.menu-ouvert .burger span:last-child { top: 21px; transform: rotate(-45deg); }
.menu-mobile { position: fixed; inset: 0; z-index: 35; background: var(--papier); padding-top: calc(var(--entete) + 76px); overflow-y: auto; visibility: hidden; opacity: 0; transition: opacity .35s, visibility 0s .35s; }
.menu-ouvert .menu-mobile { visibility: visible; opacity: 1; transition: opacity .35s; }
.menu-mobile nav { display: flex; flex-direction: column; }
.menu-mobile nav > a { font: 400 clamp(34px, 9vw, 52px)/1.15 var(--serif); color: var(--encre); padding: 6px 0; border-bottom: 1px solid var(--filet); }
.menu-pied { display: flex; flex-direction: column; gap: 8px; margin-top: 28px; font: 500 14px/1.4 var(--mono); }

/* ---------- typographie ---------- */
.titre-xl { font: 400 clamp(44px, 1rem + 3.9vw, 88px)/.96 var(--serif); letter-spacing: -.022em; max-width: 14ch; text-wrap: balance; }
.titre-l { font: 400 clamp(34px, 1rem + 2.5vw, 60px)/1.02 var(--serif); letter-spacing: -.018em; text-wrap: balance; }
.titre-m { font: 400 clamp(28px, 1rem + 1.1vw, 38px)/1.06 var(--serif); letter-spacing: -.01em; }
.chapo { font-size: clamp(18px, 1rem + .25vw, 20.5px); line-height: 1.5; color: var(--encre); max-width: 38ch; text-wrap: pretty; }
.surtitre { font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); display: flex; align-items: center; gap: 12px; margin-bottom: clamp(22px, 3vw, 40px); }
.surtitre::before { content: ""; width: 26px; height: 2px; background: linear-gradient(90deg, var(--rouge) 50%, var(--bleu) 50%); }
.etiquette-section { grid-column: 1 / 4; font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); padding-top: .9em; margin: 0; }
.etiquette-section span { color: var(--rouge); margin-right: 10px; }
.col-titre { grid-column: 4 / 13; }
.col-texte { grid-column: 4 / 10; margin-top: clamp(28px, 3.5vw, 52px); }

/* « circule » : le mot est parcouru comme un tube */
.circule { font-style: italic; position: relative; white-space: nowrap; }
.circule::after {
  content: ""; position: absolute; left: .03em; right: .08em; bottom: .14em; height: max(2px, .026em);
  background: repeating-linear-gradient(90deg, var(--rouge) 0 .3em, transparent .3em .42em); background-size: .42em 100%;
}
@media (prefers-reduced-motion: no-preference) { .circule::after { animation: courant 1.6s linear infinite; } }
@keyframes courant { to { background-position: .42em 0; } }

.lien-fleche { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: var(--encre); border-bottom: 1px solid var(--filet-fort); padding: 6px 0; transition: border-color .3s; }
.lien-fleche::after { content: "→"; transition: transform .4s var(--courbe); }
.lien-fleche:hover { border-color: var(--encre); }
.lien-fleche:hover::after { transform: translateX(4px); }

/* ---------- héros ---------- */
.hero { padding: clamp(32px, 4vw, 60px) 0 clamp(56px, 6vw, 96px); position: relative; overflow-x: clip; }
.hero-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); align-items: center; }
.hero-gauche { grid-column: 1 / 8; grid-row: 1; position: relative; z-index: 1; }
.hero-texte { margin-top: clamp(28px, 3.4vw, 48px); }
.hero-texte .chapo { font-size: clamp(17px, 1rem + .2vw, 19px); color: var(--texte); max-width: 40ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 30px; }
.hero-dessin { grid-column: 8 / 13; grid-row: 1; margin: 0 calc(var(--marge) * -.6) 0 calc(var(--gouttiere) * -2); }
.hero-grille .chiffres, .hero-grille .references { grid-column: 1 / -1; }
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(44px, 5vw, 76px) 0 0; border-top: 1px solid var(--filet-fort); }
.chiffres > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 22px 24px 0 0; border-right: 1px solid var(--filet); }
.chiffres > div + div { padding-left: 24px; }
.chiffres > div:last-child { border-right: 0; }
.chiffres dd { margin: 0; font: 400 clamp(50px, 1rem + 3.2vw, 80px)/.9 var(--serif); color: var(--encre); letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.chiffres dd .plus { font-size: .5em; vertical-align: .9em; margin-left: .04em; color: var(--rouge); }
.chiffres dt { font-size: 14.5px; line-height: 1.4; color: var(--gris); margin-top: 12px; max-width: 18ch; }
.references { margin: clamp(32px, 4vw, 52px) 0 0; color: var(--gris); font-size: 16px; }
.references .mono { color: var(--encre); margin-right: 16px; }
.references strong { font: 400 1.3em/1 var(--serif); color: var(--encre); letter-spacing: 0; }

/* ---------- sections ---------- */
.section { padding: clamp(72px, 8vw, 128px) 0; border-top: 1px solid var(--filet); }
.section-tete { margin-bottom: clamp(40px, 5vw, 80px); }
.principes { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); margin-top: clamp(56px, 7vw, 104px); }
.principes li { border-top: 1px solid var(--filet-fort); padding-top: 20px; }
.principes .mono { color: var(--gris); }
.principes h3 { font: 400 clamp(25px, 1rem + .9vw, 32px)/1.1 var(--serif); margin: 14px 0 12px; }
.principes p { color: var(--texte); font-size: 16px; }

/* expertises */
.expertise { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); align-items: center; padding: clamp(40px, 6vw, 88px) 0; border-top: 1px solid var(--filet); }
.expertise:last-child { padding-bottom: 0; }
.expertise-texte { grid-column: 1 / 6; }
.expertise-dessin { grid-column: 7 / 13; background: var(--papier-2); border-radius: 4px; padding: clamp(16px, 2.4vw, 34px); box-shadow: inset 0 0 0 1px var(--filet); }
.expertise.inverse .expertise-texte { grid-column: 8 / 13; grid-row: 1; }
.expertise.inverse .expertise-dessin { grid-column: 1 / 7; grid-row: 1; }
.numero { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rouge); margin-bottom: 20px; }
.expertise h3 { margin-bottom: 22px; max-width: 14ch; }
.expertise-texte > p:not(.numero) { max-width: 46ch; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.puces li { font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--encre); padding: 8px 11px 7px; border: 1px solid var(--filet-fort); border-radius: 999px; }

/* section sombre : le bureau d'études, sur fond de calque */
.sombre {
  background-color: var(--encre); color: rgba(232, 236, 243, .78); border-top: 0;
  background-image: linear-gradient(rgba(232, 236, 243, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(232, 236, 243, .045) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px;
}
.sombre .titre-l, .sombre h3, .sombre .chapo { color: var(--clair); }
.sombre .etiquette-section { color: rgba(232, 236, 243, .55); }
.sombre .etiquette-section span { color: #F06A5B; }
.plan-grand { grid-column: 1 / 13; margin: clamp(56px, 7vw, 104px) 0 clamp(40px, 5vw, 72px); }
.trois { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }
.trois li { border-top: 1px solid rgba(232, 236, 243, .25); padding-top: 20px; }
.trois .mono { color: #F06A5B; }
.trois h3 { font: 400 clamp(25px, 1rem + .9vw, 32px)/1.1 var(--serif); margin: 14px 0 10px; }
.trois p { font-size: 16px; margin: 0; }

/* restauration */
.resto-texte { grid-column: 4 / 8; }
.resto-texte .chapo { margin-top: clamp(28px, 3vw, 44px); }
.resto-dessin { grid-column: 8 / 13; grid-row: 1 / span 2; align-self: center; background: var(--papier-2); border-radius: 4px; padding: clamp(14px, 2vw, 28px); box-shadow: inset 0 0 0 1px var(--filet); }
#restauration .etiquette-section { grid-row: 1; }
.jalons { margin-top: 36px; border-top: 1px solid var(--filet-fort); }
.jalons li { display: grid; grid-template-columns: 48px 1fr; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--filet); font: 400 24px/1.2 var(--serif); color: var(--encre); }
.jalons .mono { color: var(--rouge); grid-row: span 2; }
.jalons em { font: 400 15px/1.45 var(--sans); font-style: normal; color: var(--gris); grid-column: 2; margin-top: 4px; }

/* méthode : une conduite relie les étapes */
.etapes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gouttiere); position: relative; padding-top: 38px; }
.etapes::before {
  content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--rouge), var(--bleu));
}
.etapes::after {
  content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 3px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .75) 0 3px, transparent 3px 46px); background-size: 46px 3px;
}
@media (prefers-reduced-motion: no-preference) { .etapes.vu::after { animation: conduite 1.4s linear infinite; } }
@keyframes conduite { to { background-position: 46px 0; } }
.etapes li { position: relative; }
.etapes li::before { content: ""; position: absolute; top: -38px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--papier); border: 1.5px solid var(--encre); }
.etapes .mono { color: var(--gris); }
.etapes h3 { font: 400 clamp(26px, 1rem + 1vw, 34px)/1.05 var(--serif); margin: 10px 0 12px; }
.etapes p { font-size: 15.5px; margin: 0; max-width: 24ch; }

/* bandeau photo */
.bandeau { position: relative; height: clamp(380px, 62vh, 620px); overflow: hidden; background: var(--encre); }
.bandeau img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.95); }
.bandeau::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 23, 38, .15) 30%, rgba(14, 23, 38, .82)), rgba(29, 54, 110, .38); mix-blend-mode: multiply; }
.bandeau blockquote { position: absolute; left: 0; right: 0; bottom: clamp(32px, 6vw, 80px); margin: 0 auto; z-index: 1; }
.bandeau blockquote p { font: 400 clamp(30px, 1rem + 2.3vw, 54px)/1.04 var(--serif); color: var(--papier); max-width: 18ch; letter-spacing: -.015em; margin: 0; text-wrap: balance; }

/* réalisations : photos de chantier en bichromie, la couleur revient au survol */
.mosaique { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: var(--gouttiere); align-items: start; }
.pile { display: grid; gap: var(--gouttiere); }
.mosaique figure { position: relative; }
.mosaique picture { display: block; position: relative; overflow: hidden; border-radius: 3px; background: var(--encre); }
.mosaique img { width: 100%; height: auto; filter: grayscale(1) contrast(1.06); transform: scale(1.001); transition: filter .9s var(--courbe), transform 1.2s var(--courbe); }
.mosaique picture::after { content: ""; position: absolute; inset: 0; background: #1F3A78; mix-blend-mode: color; opacity: .55; transition: opacity .9s var(--courbe); pointer-events: none; }
.mosaique figure:hover img { filter: none; transform: scale(1.025); }
.mosaique figure:hover picture::after { opacity: 0; }
.mosaique figcaption { display: flex; gap: 10px; align-items: baseline; margin-top: 12px; font-size: 14.5px; color: var(--encre); }
.mosaique figcaption .mono { color: var(--rouge); }
.m-b { margin-top: clamp(48px, 9vw, 150px); }
.pile { margin-top: clamp(16px, 3vw, 48px); }

/* questions */
.faq { grid-column: 4 / 13; margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--filet-fort); }
.faq details { border-bottom: 1px solid var(--filet-fort); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 22px 0; font: 400 clamp(21px, 1rem + .5vw, 26px)/1.2 var(--serif); color: var(--encre); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 26px/1 var(--sans); color: var(--gris); transition: transform .4s var(--courbe); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 62ch; padding: 0 0 26px; margin: 0; }

/* contact */
.contact { background: var(--papier-2); }
.contact .etiquette-section { grid-row: 1; }
.contact-gauche { grid-column: 4 / 8; grid-row: 1; }
.contact-gauche .chapo { margin-top: 28px; }
.coordonnees { margin-top: 40px; border-top: 1px solid var(--filet-fort); }
.coordonnees li { display: grid; grid-template-columns: 112px 1fr; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--filet); color: var(--encre); }
.coordonnees .mono { color: var(--gris); }
.coordonnees a { transition: color .3s; }
.coordonnees a:hover { color: var(--bleu); }
.coordonnees .grand { font: 400 clamp(30px, 1rem + 1.6vw, 42px)/1 var(--serif); letter-spacing: -.01em; }
.formulaire { grid-column: 8 / 13; grid-row: 1 / span 2; background: var(--papier); border-radius: 6px; padding: clamp(24px, 3vw, 44px); box-shadow: 0 1px 0 var(--filet), 0 24px 60px -36px rgba(14, 23, 38, .35); align-self: start; }
.nature { border: 0; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.nature legend { font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-bottom: 14px; padding: 0; }
.nature label { cursor: pointer; }
.nature input { position: absolute; opacity: 0; pointer-events: none; }
.nature span { display: inline-block; font-size: 14px; padding: 9px 14px; border: 1px solid var(--filet-fort); border-radius: 999px; transition: background-color .25s, color .25s, border-color .25s; }
.nature input:checked + span { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.nature input:focus-visible + span { outline: 2px solid var(--bleu); outline-offset: 2px; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; }
.champ { display: flex; flex-direction: column; }
.champ.large { grid-column: 1 / -1; }
.champ > span { font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-top: 16px; }
.champ i { font-style: normal; color: var(--rouge); }
.champ input, .champ textarea {
  font: 400 17px/1.4 var(--sans); color: var(--encre); background: transparent; border: 0; border-bottom: 1px solid var(--filet-fort);
  border-radius: 0; padding: 10px 0 9px; outline: none; transition: border-color .3s; resize: vertical; -webkit-appearance: none; appearance: none;
}
.champ input:focus, .champ textarea:focus { border-bottom-color: var(--encre); box-shadow: 0 1px 0 var(--encre); }
.champ input[aria-invalid="true"], .champ textarea[aria-invalid="true"] { border-bottom-color: var(--rouge); }
.envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 30px; }
.envoi .aide { font-size: 13px; line-height: 1.45; color: var(--gris); margin: 0; flex: 1 1 220px; }
.erreur { color: var(--rouge); font-size: 14px; margin: 14px 0 0; }

/* pied de page */
.pied { background: var(--encre); color: rgba(232, 236, 243, .7); padding: clamp(64px, 8vw, 112px) 0 32px; font-size: 15px; }
.pied .logo { color: var(--clair); }
.pied-haut { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 48px; border-bottom: 1px solid rgba(232, 236, 243, .14); }
.pied-accroche { font: 400 clamp(24px, 1rem + 1.2vw, 34px)/1.15 var(--serif); color: var(--clair); max-width: 26ch; margin: 0; }
.pied-colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); padding: 40px 0; }
.pied-colonnes div { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.pied-colonnes .mono { color: rgba(232, 236, 243, .45); margin-bottom: 8px; }
.pied-colonnes a { transition: color .3s; }
.pied-colonnes a:hover { color: var(--clair); }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 24px; border-top: 1px solid rgba(232, 236, 243, .14); font: 400 11.5px/1.5 var(--mono); letter-spacing: .04em; color: rgba(232, 236, 243, .45); }

/* barre d'appel, mobile seulement */
.barre-mobile { display: none; }

/* ---------- tracés techniques ---------- */
.dessin { width: 100%; height: auto; overflow: visible; color: var(--encre); }
.dessin .trame { stroke: var(--encre); stroke-opacity: .07; stroke-width: .8; }
.dessin .f-haut, .dessin .f-cote, .dessin .f-face { stroke: var(--encre); stroke-width: 1.05; stroke-linejoin: round; }
.dessin .f-haut { fill: #F8F6F0; } .dessin .f-cote { fill: #E4DED1; } .dessin .f-face { fill: #EEEAE0; }
.dessin .fin { fill: none; stroke: var(--encre); stroke-opacity: .55; stroke-width: .85; }
.dessin .moyen { fill: none; stroke: var(--encre); stroke-width: 1.05; }
.dessin .cable { fill: none; stroke: var(--encre); stroke-width: 1.3; stroke-dasharray: none; }
.dessin .trait { fill: none; stroke: var(--encre); stroke-width: 1.35; stroke-linejoin: round; stroke-linecap: round; }
.dessin .barre { fill: none; stroke: var(--encre); stroke-width: 4.5; stroke-linecap: round; }
.dessin .tube { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dessin .tube.chaud { stroke: var(--rouge); } .dessin .tube.froid { stroke: var(--bleu); }
.dessin .flux { fill: none; stroke: #fff; stroke-opacity: .9; stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: .004 .028; }
.dessin .flux-air { fill: none; stroke: var(--encre); stroke-width: 1.3; stroke-dasharray: 5 5; }
.dessin .pointe { fill: var(--encre); }
.dessin .soudure { fill: var(--encre); }
.dessin .vanne, .dessin .pompe, .dessin .appareil { fill: var(--papier); stroke: var(--encre); stroke-width: 1.15; }
.dessin .pompe-fleche { fill: var(--encre); }
.dessin .etiquette polyline { fill: none; stroke: var(--encre); stroke-width: .75; stroke-opacity: .6; }
.dessin .etiquette circle { fill: var(--encre); }
.dessin text { font-family: var(--mono); font-size: 9.6px; font-weight: 500; letter-spacing: .07em; fill: var(--encre); fill-opacity: .86;
  paint-order: stroke; stroke: var(--halo, var(--papier)); stroke-width: 3.2px; stroke-linejoin: round; }
.expertise-dessin, .resto-dessin { --halo: var(--papier-2); }
.dessin .cadre-plan path { fill: none; stroke: var(--encre); stroke-opacity: .45; stroke-width: 1.1; }
.dessin .cadre-plan text { fill-opacity: .5; }
.dessin .mur { fill: none; stroke: var(--encre); stroke-width: 2.2; stroke-linejoin: miter; }
.dessin .mur-int { fill: none; stroke: var(--encre); stroke-width: 1; stroke-opacity: .5; }
.dessin .pointille { fill: none; stroke: var(--encre); stroke-width: 1.1; stroke-dasharray: 5 4; }
.dessin .gaine-b { fill: none; stroke: var(--encre); stroke-width: 1.4; }
.dessin .fin-plan { fill: none; stroke: var(--encre); stroke-width: .9; stroke-opacity: .6; }
.dessin .porte { fill: none; stroke: var(--encre); stroke-opacity: .45; stroke-dasharray: 3 3; }
/* planches générées par outils/dessins.py : les couleurs suivent le fond (papier ou calque sombre) */
.dessin { --trait: var(--encre); --fond: var(--papier-2); --halo: var(--fond); --mur: var(--encre); --cloison: #4A5468; --souf: var(--rouge); --rep: var(--bleu); --an: #7A8292; }
.sombre .dessin, .dessin.sur-sombre { --trait: var(--clair); --fond: var(--encre); --mur: #E8ECF3; --cloison: #A3ACBD; --souf: #F26B5C; --rep: #82A6F7; --an: #8F99AD; }
.dessin text { fill: var(--trait); }
.dessin .mur-ext { fill: var(--mur); }
.dessin .mur-cl { fill: var(--cloison); }
.dessin .baie { fill: var(--fond); stroke: var(--trait); stroke-width: .6; }
.dessin .vitrage { fill: none; stroke: var(--trait); stroke-width: .55; }
.dessin .vantail { stroke: var(--trait); stroke-width: 1.15; stroke-linecap: square; }
.dessin .debattement { fill: none; stroke: var(--trait); stroke-width: .6; stroke-opacity: .5; stroke-dasharray: 2.2 2; }
.dessin .gt { fill: var(--fond); stroke: var(--trait); stroke-width: .7; }
.dessin .g-s, .dessin .g-r, .dessin .g-an { fill: none; stroke-linejoin: miter; stroke-linecap: butt; }
.dessin .g-s { stroke: var(--souf); } .dessin .g-r { stroke: var(--rep); } .dessin .g-an { stroke: var(--an); }
.dessin .g-int { fill: none; stroke: var(--fond); stroke-linejoin: miter; stroke-linecap: butt; }
.dessin .leg-g { stroke-width: 6px; } .dessin .leg-i { stroke-width: 4.2px; }
.dessin .chev { fill: none; stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; }
.dessin .chev-s { stroke: var(--souf); } .dessin .chev-r { stroke: var(--rep); }
.dessin .diffuseur, .dessin .grille { fill: var(--fond); stroke: var(--trait); stroke-width: .85; }
.dessin .diff-x { fill: none; stroke: var(--trait); stroke-width: .5; stroke-opacity: .75; }
.dessin .equipement { fill: color-mix(in srgb, var(--trait) 7%, var(--fond)); stroke: var(--trait); stroke-width: 1; }
.dessin .fin-plan { fill: none; stroke: var(--trait); stroke-width: .7; stroke-opacity: .6; }
.dessin .renvoi { fill: none; stroke: var(--trait); stroke-width: .5; stroke-opacity: .6; }
.dessin .cote { fill: none; stroke: var(--trait); stroke-width: .55; stroke-opacity: .7; }
.dessin .attache { fill: none; stroke: var(--trait); stroke-width: .4; stroke-opacity: .35; }
.dessin .tic { fill: none; stroke: var(--trait); stroke-width: .95; }
.dessin .cart { fill: none; stroke: var(--trait); stroke-width: .6; stroke-opacity: .6; }
.dessin .nord-c { fill: none; stroke: var(--trait); stroke-width: .6; stroke-opacity: .6; }
.dessin .nord path { fill: var(--trait); }
.dessin .ech-p { fill: var(--trait); } .dessin .ech-v { fill: none; stroke: var(--trait); stroke-width: .5; }
.dessin text.petit { font-size: 7.2px; letter-spacing: .045em; }
.dessin text.piece { font-size: 8.4px; fill-opacity: 1; }
.dessin text.debit, .dessin text.diam { fill-opacity: 1; }
.dessin text.note { fill-opacity: .7; }
.dessin text.cart-l { font-size: 5.4px; fill-opacity: .55; letter-spacing: .08em; }
.dessin text.cart-v { font-size: 7.2px; letter-spacing: .03em; }
.dessin .masque { display: none; }

/* dessin progressif à l'apparition (seulement si JS, et si le mouvement est permis) */
@media (prefers-reduced-motion: no-preference) {
  .js .dessin .trace { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .dessin .f-haut, .js .dessin .f-cote, .js .dessin .f-face { fill-opacity: 0; }
  .js .dessin.vu .trace { animation: tracer 1.25s var(--courbe) forwards; animation-delay: calc(var(--i, 0) * 28ms); }
  .js .dessin.vu .f-haut, .js .dessin.vu .f-cote, .js .dessin.vu .f-face { animation: tracer 1.25s var(--courbe) forwards, remplir .8s ease forwards; animation-delay: calc(var(--i, 0) * 28ms), calc(var(--i, 0) * 28ms + .6s); }
  .js .dessin .flux, .js .dessin .soudure, .js .dessin .vanne, .js .dessin .pompe, .js .dessin .pompe-fleche, .js .dessin .etiquette, .js .dessin .appareil, .js .dessin text, .js .dessin .diffuseur, .js .dessin .equipement, .js .dessin .cartouche, .js .dessin .nord, .js .dessin .cote, .js .dessin .pointe { opacity: 0; transition: opacity .9s ease 1.2s; }
  .js .dessin.vu .flux, .js .dessin.vu .soudure, .js .dessin.vu .vanne, .js .dessin.vu .pompe, .js .dessin.vu .pompe-fleche, .js .dessin.vu .etiquette, .js .dessin.vu .appareil, .js .dessin.vu text, .js .dessin.vu .diffuseur, .js .dessin.vu .equipement, .js .dessin.vu .cartouche, .js .dessin.vu .nord, .js .dessin.vu .cote, .js .dessin.vu .pointe { opacity: 1; }
  .js .dessin.vu .flux { animation: flux 5s linear infinite; }
  .js .dessin.vu .flux.froid { animation-direction: reverse; }
  .js [data-apparait] { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--courbe), transform 1.1s var(--courbe); transition-delay: var(--retard, 0s); }
  .js [data-apparait].vu { opacity: 1; transform: none; }
}
@keyframes tracer { to { stroke-dashoffset: 0; } }
@keyframes remplir { to { fill-opacity: 1; } }
@keyframes flux { to { stroke-dashoffset: -.064; } }

/* ---------- adaptations ---------- */
@media (max-width: 1180px) {
  .nav { display: none; }
  .burger { display: block; margin-left: 0; }
  .tel { margin-left: auto; }
}
@media (max-width: 960px) {
  :root { --entete: 66px; }
  .grille > *, .hero-grille > *, .expertise > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .col-texte { margin-top: 26px; }
  .etiquette-section { margin-bottom: 18px; padding-top: 0; }
  .hero-dessin { margin: 40px -4% 0; }
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres > div { padding: 20px 16px 22px 0; border-bottom: 1px solid var(--filet); }
  .chiffres > div:nth-child(2n) { border-right: 0; padding-left: 16px; }
  .chiffres > div:nth-child(2n+1) { padding-left: 0; }
  .principes, .trois { grid-template-columns: 1fr; gap: 28px; }
  .expertise { gap: 32px; }
  .expertise h3 { max-width: none; }
  .resto-dessin { margin: 40px 0 0; }
  .etapes { grid-template-columns: 1fr; padding: 0 0 0 38px; gap: 34px; }
  .etapes::before, .etapes::after { top: 0; bottom: 0; left: 6px; right: auto; width: 3px; height: auto; }
  .etapes::before { background: linear-gradient(180deg, var(--rouge), var(--bleu)); }
  .etapes::after { background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .75) 0 3px, transparent 3px 46px); background-size: 3px 46px; }
  .etapes li::before { top: 4px; left: -38px; }
  @keyframes conduite { to { background-position: 0 46px; } }
  .mosaique { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaique .m-b, .mosaique .pile { margin-top: 0; }
  .pile { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .contact-gauche, .formulaire { grid-row: auto; }
  .formulaire { margin-top: 44px; }
  .pied-colonnes { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .bouton-entete, .tel { display: none; }
  .burger { margin-left: auto; }
  .logo-nom { font-size: 21px; }
  .concept { font-size: 10px; }
  .champs { grid-template-columns: 1fr; }
  .mosaique { gap: 14px; }
  .mosaique figcaption { font-size: 13px; }
  .bandeau { height: 64vh; }
  .barre-mobile {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 30;
    transform: translateY(160%); visibility: hidden; transition: transform .5s var(--courbe), visibility 0s .5s;
  }
  .barre-mobile.visible { transform: none; visibility: visible; transition: transform .5s var(--courbe); }
  .barre-mobile a { min-height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 600; font-size: 15px; box-shadow: 0 10px 30px -10px rgba(14, 23, 38, .5); }
  .barre-mobile a:first-child { background: var(--encre); color: var(--papier); }
  .barre-mobile a:last-child { background: var(--papier); color: var(--encre); border: 1px solid var(--filet-fort); }
  .pied { padding-bottom: 96px; }
  .axo .etiquette { display: none; }
}

/* ---------- page des mentions légales ---------- */
.page-legale .entete-in { justify-content: space-between; }
.legal { max-width: 860px; padding-top: clamp(56px, 8vw, 112px); padding-bottom: clamp(72px, 9vw, 128px); }
.legal .etiquette-section { padding: 0; margin-bottom: 18px; }
.legal h2 { font: 400 clamp(26px, 1rem + 1vw, 34px)/1.1 var(--serif); margin: 56px 0 18px; padding-top: 22px; border-top: 1px solid var(--filet-fort); }
.legal dl { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; margin: 0; }
.legal dt, .legal dd { padding: 12px 0; border-bottom: 1px solid var(--filet); margin: 0; }
.legal dt { font: 500 11.5px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); padding-top: 15px; }
.legal dd { color: var(--encre); }
.legal a { border-bottom: 1px solid var(--filet-fort); }
.note-legale { margin-top: 48px; padding: 18px 20px; background: var(--papier-2); border-left: 3px solid var(--rouge); font-size: 15px; color: var(--texte); }
.pied-court { padding: 0 0 28px; }
.pied-court .pied-bas { border-top: 0; }
@media (max-width: 640px) { .legal dl { grid-template-columns: 1fr; } .legal dt { border-bottom: 0; padding-bottom: 0; } }

/* ---------- symboles des schémas (outils/dessins.py) ---------- */
.dessin .trait-s { fill: none; stroke: var(--trait); stroke-width: .9; stroke-linejoin: round; }
.dessin .vanne, .dessin .pompe, .dessin .appareil { fill: var(--fond); stroke: var(--trait); stroke-width: 1; }
.dessin .pompe-fleche, .dessin .clapet, .dessin .pointe, .dessin .cadenas { fill: var(--trait); }
.dessin .repere { fill: var(--trait); }
.dessin .repere + text, .dessin text.sym-t { font-size: 6.4px; letter-spacing: 0; }
.dessin .repere + text { fill: var(--fond); stroke: none; }
.dessin .baffle { fill: color-mix(in srgb, var(--trait) 16%, var(--fond)); stroke: var(--trait); stroke-width: .8; }
.dessin .gaz { fill: none; stroke: #C9A227; stroke-width: 2.2; }
.dessin .tore { fill: none; stroke: var(--trait); stroke-width: .9; }
.dessin .liaison { fill: none; stroke: var(--trait); stroke-width: .7; stroke-dasharray: 2 1.6; }
.dessin .pe { fill: none; stroke: #2E8B57; stroke-width: 1.6; stroke-dasharray: 7 2.5 1.5 2.5; }
.dessin .flux-air { fill: none; stroke-width: 1.4; stroke-dasharray: 5 4; }
.dessin .flux-an { stroke: var(--an); } .dessin .flux-s { stroke: var(--souf); } .dessin .flux-r { stroke: var(--rep); }
.dessin .flux-int { fill: none; stroke: var(--trait); stroke-opacity: .16; stroke-width: 1; stroke-dasharray: 3 5; }
.dessin .pointe-an { fill: var(--an); } .dessin .pointe-s { fill: var(--souf); } .dessin .pointe-r { fill: var(--rep); }
.dessin .mobilier { fill: none; stroke: var(--trait); stroke-width: .6; stroke-opacity: .55; }
.dessin .hotte { fill: none; stroke: var(--trait); stroke-width: .8; stroke-dasharray: 4 2.5; }
.dessin .passe { fill: color-mix(in srgb, var(--trait) 10%, var(--fond)); stroke: var(--trait); stroke-width: .8; }
.dessin .lave-mains { fill: var(--fond); stroke: var(--trait); stroke-width: .8; }
.dessin .panneau { fill: none; stroke: var(--trait); stroke-width: .6; stroke-opacity: .7; }
.dessin .flux-r.denrees, .dessin .flux-r.sale, .dessin .flux-r.dechets { fill: none; stroke-width: 1.7; stroke-linejoin: round; }
.dessin .flux-r.denrees { stroke: var(--souf); }
.dessin .flux-r.sale { stroke: var(--rep); stroke-dasharray: 5 3; }
.dessin .flux-r.dechets { stroke: var(--an); stroke-dasharray: 1.5 3; stroke-linecap: round; }
.dessin .pointe-denrees { fill: var(--souf); } .dessin .pointe-sale { fill: var(--rep); } .dessin .pointe-dechets { fill: var(--an); }
.dessin .ventil { fill: none; stroke: var(--trait); stroke-width: 1.1; stroke-linejoin: round; }

/* =========================================================================================
   Pages d'expertise et planches — v1
   ========================================================================================= */

/* liens d'expertise sur l'accueil */
.expertise .lien-fleche { margin-top: 30px; }
.voir-plus { margin-top: clamp(32px, 4vw, 52px); }
.sombre .lien-fleche { color: var(--clair); border-bottom-color: rgba(232, 236, 243, .35); }
.sombre .lien-fleche:hover { border-color: var(--clair); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

/* en-tête de page */
.page-tete { padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 7vw, 104px); }
.fil { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; font: 500 11.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); margin-bottom: clamp(36px, 5vw, 72px); }
.fil a { border-bottom: 1px solid var(--filet-fort); }
.fil a:hover { color: var(--encre); border-color: var(--encre); }
.fil span[aria-hidden] { opacity: .5; }
.page-tete .titre-xl { grid-column: 4 / 13; max-width: 16ch; }
.page-tete .chapo { grid-column: 4 / 10; margin-top: clamp(28px, 3.4vw, 48px); max-width: 44ch; }
.fiche { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); margin: clamp(44px, 6vw, 80px) 0 0; }
.fiche > div { border-top: 1px solid var(--filet-fort); padding-top: 16px; }
.fiche dt { font: 500 11.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.fiche dd { margin: 10px 0 0; color: var(--encre); font-size: 16px; line-height: 1.5; }

/* planche : le dessin, présenté comme une feuille */
.planche { padding: clamp(48px, 6vw, 96px) 0; }
.planche-feuille { background: var(--papier-2); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--filet); padding: clamp(14px, 2.4vw, 40px); }
.sombre .planche-feuille, .planche-feuille.sur-sombre { background: transparent; box-shadow: inset 0 0 0 1px rgba(232, 236, 243, .16); }
.planche-entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 24px; margin-bottom: 18px; }
.planche-entete .mono { color: var(--gris); }
.sombre .planche-entete .mono { color: rgba(232, 236, 243, .55); }
.planche-entete h2 { font: 400 clamp(26px, 1rem + 1.2vw, 38px)/1.1 var(--serif); }
.planche-note { font-size: 14px; color: var(--gris); margin: 16px 0 0; max-width: 80ch; }
.sombre .planche-note { color: rgba(232, 236, 243, .6); }

/* lecture de la planche */
.lecture { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin-top: clamp(40px, 5vw, 72px); }
.lecture > div { border-top: 1px solid var(--filet-fort); padding-top: 18px; }
.sombre .lecture > div { border-top-color: rgba(232, 236, 243, .25); }
.lecture h3 { font: 400 clamp(22px, 1rem + .6vw, 27px)/1.15 var(--serif); margin: 12px 0 10px; }
.lecture .mono { color: var(--rouge); }
.sombre .lecture .mono { color: #F06A5B; }
.lecture p { font-size: 15.5px; margin: 0; }

/* calques du plan, comme dans un logiciel de dessin */
.calques { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
.calques .mono { color: rgba(232, 236, 243, .55); margin-right: 6px; }
.calques button { font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--clair); background: transparent; border: 1px solid rgba(232, 236, 243, .3); border-radius: 999px; padding: 9px 13px 8px; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; display: inline-flex; align-items: center; gap: 8px; }
.calques button::before { content: ""; width: 8px; height: 8px; border-radius: 2px; border: 1px solid currentColor; }
.calques button[aria-pressed="true"]::before { background: currentColor; }
.calques button[aria-pressed="false"] { color: rgba(232, 236, 243, .5); }
.calques button:hover { border-color: var(--clair); }
.sans-js .calques { display: none; }

/* prestations */
.prestations { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gouttiere); margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--filet-fort); }
.prestations li { display: grid; grid-template-columns: 52px 1fr; gap: 0 8px; padding: 24px 0 26px; border-bottom: 1px solid var(--filet); }
.prestations .mono { color: var(--rouge); padding-top: 9px; }
.prestations h3 { font: 400 clamp(24px, 1rem + .8vw, 30px)/1.12 var(--serif); margin: 0 0 8px; }
.prestations p { grid-column: 2; margin: 0; font-size: 16px; max-width: 46ch; }

/* contrôles : ce que l'on vérifie avant de livrer */
.controles { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gouttiere); margin-top: clamp(40px, 5vw, 72px); counter-reset: ctl; }
.controles li { position: relative; padding: 20px 0 20px 44px; border-top: 1px solid rgba(232, 236, 243, .18); font-size: 16.5px; line-height: 1.5; color: var(--clair); }
.controles li::before { content: ""; position: absolute; left: 2px; top: 24px; width: 18px; height: 18px; border: 1.5px solid #F06A5B; border-radius: 50%; }
.controles li::after { content: ""; position: absolute; left: 8px; top: 28px; width: 5px; height: 9px; border: solid #F06A5B; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.controles li span { display: block; font-size: 14.5px; color: rgba(232, 236, 243, .62); margin-top: 4px; }

/* référentiels */
.referentiels { grid-column: 4 / 13; margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--filet-fort); }
.referentiels div { display: grid; grid-template-columns: minmax(200px, 5fr) 7fr; gap: 6px var(--gouttiere); padding: 18px 0; border-bottom: 1px solid var(--filet); }
.referentiels dt { font: 500 13px/1.5 var(--mono); letter-spacing: .02em; color: var(--encre); }
.referentiels dd { margin: 0; font-size: 15.5px; }
.avertissement { grid-column: 4 / 13; font-size: 14px; color: var(--gris); margin: 22px 0 0; max-width: 72ch; }

/* appel à projet, bas de page */
.appel { background: var(--encre); color: rgba(232, 236, 243, .75); padding: clamp(64px, 7vw, 112px) 0; position: relative; overflow: hidden; }
.appel::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(232, 236, 243, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(232, 236, 243, .045) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; }
.appel .cadre { position: relative; }
.appel .titre-l { color: var(--clair); grid-column: 4 / 12; }
.appel p:not(.etiquette-section) { grid-column: 4 / 10; margin: 26px 0 0; font-size: clamp(18px, 1rem + .3vw, 21px); }
.appel .actions { grid-column: 4 / 13; margin-top: 36px; }
.appel .bouton-plein { background: var(--clair); color: var(--encre); border-color: var(--clair); }
.appel .bouton-plein:hover { background: #fff; }
.appel .tel-grand { font: 400 clamp(28px, 1rem + 1.4vw, 40px)/1 var(--serif); color: var(--clair); border-bottom: 1px solid rgba(232, 236, 243, .3); padding-bottom: 4px; }
.appel .etiquette-section span { color: #F06A5B; }
.appel .etiquette-section { color: rgba(232, 236, 243, .55); }

/* autres expertises */
.suite { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gouttiere); margin-top: clamp(40px, 5vw, 64px); }
.suite a { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 190px; padding: 20px 22px 22px; border: 1px solid var(--filet-fort); border-radius: 4px; transition: background-color .35s, border-color .35s, color .35s; }
.suite a .mono { color: var(--rouge); }
.suite a strong { font: 400 clamp(25px, 1rem + .8vw, 31px)/1.1 var(--serif); font-weight: 400; display: block; }
.suite a span:last-child { font-size: 14.5px; color: var(--gris); }
.suite a:hover { background: var(--encre); border-color: var(--encre); }
.suite a:hover strong { color: var(--clair); }
.suite a:hover span:last-child { color: rgba(232, 236, 243, .65); }

@media (max-width: 960px) {
  .page-tete .titre-xl, .page-tete .chapo, .fiche, .prestations, .controles, .referentiels, .avertissement, .appel .titre-l, .appel p, .appel .actions { grid-column: 1 / -1; }
  .fiche { grid-template-columns: 1fr; gap: 0; }
  .fiche > div { padding: 14px 0 16px; }
  .lecture { grid-template-columns: 1fr; }
  .prestations, .controles { grid-template-columns: 1fr; }
  .suite { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .referentiels div { grid-template-columns: 1fr; }
  .suite { grid-template-columns: 1fr; }
  .suite a { min-height: 0; gap: 18px; }
  .prestations li { grid-template-columns: 40px 1fr; }
}

/* accueil v1 : le plan de cuisine passe en pleine largeur sous le texte */
#restauration .resto-texte { grid-column: 4 / 11; }
#restauration .resto-dessin { grid-column: 1 / 13; grid-row: auto; margin-top: clamp(48px, 6vw, 88px); }
.plan-grand .calques { margin-bottom: 18px; }
.plan-grand .planche-feuille { padding: clamp(10px, 1.6vw, 24px); }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* planches : les calques apparaissent dans l'ordre du dessin (architecture, réseaux, terminaux, cotes, annotations) */
@media (prefers-reduced-motion: no-preference) {
  .js .dessin .c-archi, .js .dessin .c-equip, .js .dessin .c-terminaux, .js .dessin .c-cotes, .js .dessin .c-annot, .js .dessin .c-flux, .js .dessin .c-rep, .js .dessin .c-sym, .js .dessin .c-app { opacity: 0; transition: opacity 1s ease; }
  .js .dessin.vu .c-archi, .js .dessin.vu .c-equip { opacity: 1; }
  .js .dessin.vu .c-sym, .js .dessin.vu .c-app { opacity: 1; transition-delay: .5s; }
  .js .dessin.vu .c-flux { opacity: 1; transition-delay: 1.1s; }
  .js .dessin.vu .c-terminaux { opacity: 1; transition-delay: 1.3s; }
  .js .dessin.vu .c-cotes { opacity: 1; transition-delay: .6s; }
  .js .dessin.vu .c-annot, .js .dessin.vu .c-rep { opacity: 1; transition-delay: 1.5s; }
  .js .dessin.vu .c-reseaux .trace { animation-duration: 1.6s; animation-delay: calc(.5s + var(--i, 0) * 45ms); }
}
.sombre .planche-entete h2 { color: var(--clair); }
.prestations li { align-content: start; }
.appel .etiquette-section { grid-column: 1 / 4; font-size: 12px; margin: 0; }
.suite a { justify-content: flex-start; gap: 14px; }
.suite a span:last-child { margin-top: auto; padding-top: 24px; }
.hero-dessin .dessin { --fond: var(--papier); }
/* en-tête v1 : cinq rubriques, jamais sur deux lignes */
.nav a { white-space: nowrap; }
@media (max-width: 1440px) { .entete-in .tel { display: none; } }
@media (max-width: 1280px) { .nav { display: none; } .bouton-entete { margin-left: auto; } .burger { display: block; margin-left: 0; } }
@media (max-width: 720px) { .burger { margin-left: auto; } }

/* une planche tient toujours entière dans la hauteur de l'écran : sa largeur est plafonnée
   par la hauteur disponible × son rapport largeur / hauteur (--ratio, écrit par outils/dessins.py) */
.planche-feuille > .dessin { margin-inline: auto; max-width: min(100%, 1120px, calc((100vh - 230px) * var(--ratio, 2))); }
@supports (height: 100svh) { .planche-feuille > .dessin { max-width: min(100%, 1120px, calc((100svh - 230px) * var(--ratio, 2))); } }
/* la feuille épouse le dessin : fond, filet et marges portés par le SVG lui-même */
.planche-feuille, .sombre .planche-feuille, .plan-grand .planche-feuille { background: none; box-shadow: none; padding: 0; }
.planche-feuille > .dessin { box-sizing: border-box; background: var(--papier-2); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--filet); padding: clamp(10px, 2vw, 32px); }
.sombre .planche-feuille > .dessin { background: transparent; box-shadow: inset 0 0 0 1px rgba(232, 236, 243, .16); }

/* ---------- planches sur mobile : entières dans la largeur, et une visionneuse plein écran ----------
   Plus de défilement horizontal dans la page. Le bouton « Agrandir » (ajouté par app.js) ouvre la
   planche en grand dans une fenêtre où l'on se déplace librement pour lire les cotes. */
.agrandir { display: none; }
@media (max-width: 960px) {
  .agrandir { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--encre); background: var(--papier); border: 1px solid var(--filet-fort); border-radius: 999px; padding: 10px 14px 9px; cursor: pointer; }
  .agrandir::before { content: ""; width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 2px; box-shadow: inset 0 0 0 2px var(--papier), inset 0 0 0 4px currentColor; }
  .sombre .agrandir { color: var(--clair); background: transparent; border-color: rgba(232, 236, 243, .35); }
  .sombre .agrandir::before { box-shadow: none; }
}
.visionneuse { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--papier); color: var(--encre); }
.visionneuse::backdrop { background: rgba(14, 23, 38, .6); }
.visionneuse.sur-sombre { background: var(--encre); }
.visionneuse-barre { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: max(10px, env(safe-area-inset-top)) 14px 10px; background: inherit; border-bottom: 1px solid var(--filet); }
.visionneuse-barre p { margin: 0; font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.visionneuse.sur-sombre .visionneuse-barre { border-bottom-color: rgba(232, 236, 243, .16); }
.visionneuse.sur-sombre .visionneuse-barre p { color: rgba(232, 236, 243, .6); }
.visionneuse-fermer { flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--encre); background: var(--encre); color: var(--papier); font: 500 14px/1 var(--sans); cursor: pointer; }
.visionneuse.sur-sombre .visionneuse-fermer { background: var(--clair); color: var(--encre); border-color: var(--clair); }
.visionneuse-zone { position: absolute; inset: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 72px 16px max(24px, env(safe-area-inset-bottom)); }
.visionneuse-zone .dessin { width: max(900px, 230vw); max-width: none; height: auto; }
.visionneuse.sur-sombre .dessin { --trait: var(--clair); --fond: var(--encre); --mur: #E8ECF3; --cloison: #A3ACBD; --souf: #F26B5C; --rep: #82A6F7; --an: #8F99AD; }
html.visionneuse-ouverte { overflow: hidden; }