@charset "UTF-8";
/* =====================================================================
   NERIUM PATRIMOINE — système visuel « Relevé »
   Conçu pour ce site uniquement. Rien n'est repris d'un autre projet.
   Référence : le logo réel du client — un sceau circulaire noir, gravé,
   pure bichromie noir/blanc. Le système en tire sa discipline : papier
   froid, encre noire, graphite, filets fins, petites capitales espacées,
   sections numérotées. L'unique accent est le bleu du plan d'exécution
   (relevé, devis poste par poste, planning daté) — aucune terre cuite,
   aucun beige : le sujet est le trait, pas la couleur.
   Palette révisée le 2026-09-05 à la demande du client.
   ===================================================================== */

/* ---------------------------------------------------------- 1. jetons */
:root {
  /* matière — papier de bureau d'études, froid, jamais crème */
  --papier:        #FAFBFD;   /* fond de page                              */
  --papier-creux:  #EDF1F5;   /* fond en creux                             */
  --blanc:         #FFFFFF;
  --encre:         #0E1319;   /* le noir du sceau, légèrement bleuté       */
  --encre-douce:   #1A222B;
  --graphite:      #454E59;   /* texte secondaire — 8,6:1 sur le papier    */
  --graphite-clair:#646E7A;   /* texte tertiaire — 5,3:1                   */
  --trait:         #D2D9E1;   /* filet                                     */
  --trait-fonce:   #28303A;   /* filet sur fond sombre                     */

  /* accent unique — le bleu du plan d'exécution */
  --bleu:          #14508C;   /* 7,7:1 sur le papier                       */
  --bleu-vif:      #1E6BB5;
  --bleu-sourd:    #E6EFF8;
  --bleu-clair:    #9CC2E8;   /* accent sur fond encre                     */
  --vert:          #136B45;   /* confirmation                              */
  --vert-nuit:     #0F3A28;

  /* typographie */
  --gravure: "Prata", "Times New Roman", Georgia, serif;
  --courant: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* mesures */
  --colonne: 1180px;
  --marge: clamp(1.15rem, 4vw, 2.75rem);
  --respire: clamp(3.5rem, 8vw, 7rem);
  --filet: 1px;
  --coin: 2px;                /* presque pas d'arrondi : c'est gravé      */
  --glisse: 260ms cubic-bezier(.22,.61,.36,1);

  /* respiration interne des cellules de tableau gravé (voir § 3 bis) */
  --cellule: clamp(.95rem, 1.6vw, 1.45rem);
}

/* ---------------------------------------------------------- 2. socle */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--courant);
  font-size: clamp(1rem, .97rem + .18vw, 1.075rem);
  line-height: 1.68;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--gravure);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.012em;
  margin: 0 0 .55em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 1.5rem + 3.1vw, 4.05rem); line-height: 1.1; }
h2 { font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.7rem); }
h3 { font-size: clamp(1.22rem, 1.08rem + .62vw, 1.55rem); }
h4 { font-size: 1.12rem; font-family: var(--courant); font-weight: 600; letter-spacing: -.01em; }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }

.enveloppe { width: 100%; max-width: var(--colonne); margin-inline: auto; padding-inline: var(--marge); }
.enveloppe--large { max-width: 1420px; }
.enveloppe--etroite { max-width: 760px; }
.section { padding-block: var(--respire); }
.section--creuse { background: var(--papier-creux); }
.section--nuit { background: var(--encre); color: #E8ECF1; }
.section--nuit h2, .section--nuit h3 { color: var(--papier); }
.section--serree { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* saut au contenu */
.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--encre); color: var(--papier);
  padding: .8rem 1.2rem; text-decoration: none;
}
.evitement:focus { left: .5rem; top: .5rem; }

/* -------------------------------------------------- 3. micro-éléments */
/* petite capitale espacée : l'inscription « PATRIMOINE » du sceau */
.inscription {
  font-family: var(--courant);
  font-size: .705rem;
  font-weight: 600;
  letter-spacing: .215em;
  text-transform: uppercase;
  color: var(--bleu);
  margin: 0 0 1.1rem;
  display: flex; align-items: center; gap: .7rem;
}
.inscription::before {
  content: ""; inline-size: 2.1rem; block-size: 0;
  border-top: var(--filet) solid currentColor; flex: none; opacity: .55;
}
.inscription--nuit { color: var(--bleu-clair); }
.inscription--seule::before { display: none; }

/* filet double : les deux cercles concentriques du sceau */
.filet-double {
  border: 0; height: 4px; margin: 0;
  border-top: var(--filet) solid var(--trait);
  border-bottom: var(--filet) solid var(--trait);
  background: none;
}
.section--nuit .filet-double { border-color: var(--trait-fonce); }

/* numéro gravé */
.chiffre {
  font-family: var(--gravure);
  font-size: clamp(2.2rem, 4.4vw, 3.2rem);
  font-weight: 400;
  line-height: .8;
  color: var(--trait);
  display: block;
}

/* ------------------------------------------------------- 4. en-tête */
.entete {
  position: sticky; top: 0; z-index: 60;
  background: var(--papier);
  border-bottom: var(--filet) solid var(--trait);
  transition: background var(--glisse), border-color var(--glisse);
}
.entete--survol {                       /* en surimpression du hero */
  position: fixed; inset-inline: 0; top: 0;
  background: transparent; border-bottom-color: transparent;
  color: var(--papier);
}
.entete--survol.est-ancree {
  background: rgba(14,19,25,.94);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border-bottom-color: rgba(255,255,255,.12);
}
.entete__rang {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; min-block-size: 84px;
}
.entete--survol.est-ancree .entete__rang { min-block-size: 68px; }
.entete__rang { transition: min-block-size var(--glisse); }

/* La marque est le LOGO RÉEL du client : un sceau circulaire noir, gravé.
   Le fichier est monochrome sur fond transparent, donc la version claire —
   en-tête posé sur le hero, pied de page — s'obtient par inversion, sans
   redessiner quoi que ce soit. */
.marque { display: flex; align-items: center; gap: .75rem; text-decoration: none; flex: none; }
.marque__sceau { inline-size: 52px; block-size: 52px; flex: none; }
.entete--survol .marque__sceau,
.marque__sceau--nuit { filter: invert(1); }
.marque__mots { display: flex; flex-direction: column; line-height: 1; }
.marque__nom {
  font-family: var(--gravure); font-size: 1.32rem; font-weight: 400;
  letter-spacing: .085em; text-transform: uppercase;
}

.navigation { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.navigation__liste { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); list-style: none; margin: 0; padding: 0; }
.navigation__lien {
  text-decoration: none; font-size: .875rem; font-weight: 500;
  letter-spacing: .02em; padding-block: .55rem; position: relative; white-space: nowrap;
}
.navigation__lien::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  border-bottom: var(--filet) solid currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform var(--glisse);
}
.navigation__lien:hover::after, .navigation__lien:focus-visible::after { transform: scaleX(1); }
.navigation__lien[aria-current="page"] { color: var(--bleu); }
.entete--survol .navigation__lien[aria-current="page"] { color: #BBD7F2; }
.navigation__lien[aria-current="page"]::after { transform: scaleX(1); }

/* sous-menu services */
.navigation__groupe { position: relative; }
.navigation__volet {
  position: absolute; top: calc(100% + .35rem); left: 50%; transform: translateX(-50%);
  background: var(--blanc); color: var(--encre);
  border: var(--filet) solid var(--trait);
  box-shadow: 0 20px 50px -28px rgba(14,19,25,.55);
  min-inline-size: 268px; padding: .5rem; list-style: none; margin: 0;
  opacity: 0; visibility: hidden; translate: 0 6px; transition: all var(--glisse);
}
.navigation__groupe:hover .navigation__volet,
.navigation__groupe:focus-within .navigation__volet { opacity: 1; visibility: visible; translate: 0 0; }
.navigation__volet a {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .62rem .8rem; text-decoration: none; font-size: .9rem;
  border-bottom: var(--filet) solid transparent;
}
.navigation__volet li:not(:last-child) a { border-bottom-color: var(--trait); }
.navigation__volet a:hover { background: var(--papier-creux); }
.navigation__volet .num { font-family: var(--gravure); font-size: .95rem; color: var(--bleu); }

.entete__appel {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.entete__appel svg { inline-size: 15px; block-size: 15px; }

.bascule {
  display: none; background: none; border: var(--filet) solid currentColor;
  inline-size: 44px; block-size: 44px; cursor: pointer; color: inherit;
  align-items: center; justify-content: center; padding: 0; border-radius: var(--coin);
}
.bascule span { display: block; inline-size: 18px; block-size: 1px; background: currentColor; position: relative; }
.bascule span::before, .bascule span::after {
  content: ""; position: absolute; left: 0; inline-size: 18px; block-size: 1px; background: currentColor;
  transition: transform var(--glisse), top var(--glisse);
}
.bascule span::before { top: -5px; } .bascule span::after { top: 5px; }
.bascule[aria-expanded="true"] span { background: transparent; }
.bascule[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.bascule[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 940px) {
  .bascule { display: inline-flex; }
  .entete__appel span { display: none; }
  .navigation {
    position: fixed; inset: 0 0 auto; top: var(--h-entete, 84px);
    background: var(--papier); color: var(--encre);
    border-bottom: var(--filet) solid var(--trait);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem var(--marge) 1.6rem;
    max-block-size: calc(100dvh - var(--h-entete, 84px)); overflow-y: auto;
    display: none;
  }
  .navigation.est-ouverte { display: flex; }
  .navigation__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .navigation__liste > li { border-bottom: var(--filet) solid var(--trait); }
  .navigation__lien { display: block; padding: 1.05rem 0; font-size: 1.05rem; }
  .navigation__lien::after { display: none; }
  .navigation__volet {
    position: static; transform: none; opacity: 1; visibility: visible; translate: 0;
    border: 0; box-shadow: none; background: none; padding: 0 0 .7rem .9rem; min-inline-size: 0;
  }
  .navigation__volet a { padding: .5rem 0; border-bottom: 0; }
  .navigation__volet a:hover { background: none; color: var(--bleu); }

  /* le panneau mobile est clair : on annule les couleurs de l'en-tête transparent */
  .entete--survol .navigation__lien[aria-current="page"] { color: var(--bleu); }
  .entete--survol .navigation .bouton--creux,
  .navigation .bouton--creux {
    color: var(--encre); border-color: var(--encre);
    inline-size: 100%; margin-top: 1.4rem; padding: .95rem 1.4rem;
  }
  .entete--survol .navigation .bouton--creux:hover,
  .navigation .bouton--creux:hover { background: var(--encre); color: var(--papier); }
}

@media (max-width: 560px) {
  .inscription::before { display: none; }
  .inscription { font-size: .66rem; letter-spacing: .16em; }
}

/* -------------------------------------------------------- 5. boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.7rem; border: var(--filet) solid var(--encre); border-radius: var(--coin);
  background: var(--encre); color: var(--papier);
  font-size: .85rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background var(--glisse), color var(--glisse), border-color var(--glisse), transform var(--glisse);
}
.bouton:hover { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.bouton:active { transform: translateY(1px); }
/* Dans .prose, « .prose a » a plus de poids que « .bouton » et repeignait le
   texte du bouton en laurier sur fond encre : 2,96:1, sous le seuil AA. */
.prose a.bouton { color: var(--papier); text-decoration: none; }
.prose a.bouton:hover { color: #fff; }
.prose a.bouton--creux, .prose a.bouton--creux:hover { color: var(--encre); }
.bouton--creux { background: transparent; color: var(--encre); }
.bouton--creux:hover { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.entete--survol .bouton--creux { color: var(--papier); border-color: rgba(250,251,253,.5); }
.entete--survol .bouton--creux:hover { background: var(--papier); color: var(--encre); border-color: var(--papier); }
.bouton--clair { background: transparent; color: var(--papier); border-color: rgba(250,251,253,.55); }
.bouton--clair:hover { background: var(--papier); color: var(--encre); border-color: var(--papier); }
.bouton--plein { inline-size: 100%; }
.boutons { display: flex; flex-wrap: wrap; gap: .8rem; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--bleu); border-bottom: var(--filet) solid transparent;
  padding-bottom: 2px; transition: border-color var(--glisse), gap var(--glisse);
}
.lien-fleche:hover { border-bottom-color: currentColor; gap: .8rem; }
.lien-fleche svg { inline-size: 14px; block-size: 14px; }

/* ----------------------------------------------------------- 6. hero */
.hero { position: relative; isolation: isolate; color: var(--papier); background: var(--encre); }
.hero__fond { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__fond img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 42%; }
.hero__voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(14,19,25,.80) 0%, rgba(14,19,25,.42) 42%, rgba(14,19,25,.90) 100%),
    linear-gradient(90deg, rgba(14,19,25,.62) 0%, rgba(14,19,25,.12) 62%);
}
.hero__corps {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-block-size: clamp(560px, 88vh, 860px);
  padding-block: clamp(8rem, 16vh, 12rem) clamp(2rem, 4vh, 3rem);
}
.hero__titre { max-inline-size: 17ch; margin-bottom: .35em; }
.hero__accroche {
  font-size: clamp(1.02rem, .95rem + .5vw, 1.28rem);
  color: rgba(250,251,253,.86); max-inline-size: 54ch; margin-bottom: 2rem;
}
.hero .inscription { color: var(--bleu-clair); }

/* index des métiers, en pied de hero — table gravée.
   Chaque cellule porte un filet à sa droite : sans retrait à gauche, le texte
   de la colonne suivante venait se coller au filet. La grille est décalée de
   --cellule vers la gauche pour que la première colonne reste alignée sur le
   titre, et chaque cellule est mise en retrait des deux côtés. */
.index-metiers {
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
  margin-inline: calc(var(--cellule) * -1);
  border-top: var(--filet) solid rgba(250,251,253,.28);
  display: grid; grid-template-columns: repeat(6, 1fr);
}
.index-metiers a {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1.05rem var(--cellule); text-decoration: none;
  border-right: var(--filet) solid rgba(250,251,253,.16);
  transition: background var(--glisse);
}
.index-metiers a:last-child { border-right: 0; }
.index-metiers a:hover { background: rgba(250,251,253,.07); }
.index-metiers .num { font-family: var(--gravure); font-size: .95rem; color: var(--bleu-clair); }
.index-metiers .lib { font-size: .87rem; font-weight: 500; }
@media (max-width: 900px) { .index-metiers { grid-template-columns: repeat(3, 1fr); }
  .index-metiers a:nth-child(3n) { border-right: 0; }
  .index-metiers a:nth-child(-n+3) { border-bottom: var(--filet) solid rgba(250,251,253,.16); } }
@media (max-width: 480px) { .index-metiers { grid-template-columns: repeat(2, 1fr); }
  .index-metiers a:nth-child(3n) { border-right: var(--filet) solid rgba(250,251,253,.16); }
  .index-metiers a:nth-child(2n) { border-right: 0; }
  .index-metiers a:nth-child(-n+4) { border-bottom: var(--filet) solid rgba(250,251,253,.16); } }

/* hero secondaire (pages intérieures) */
.hero-page { position: relative; isolation: isolate; color: var(--papier); background: var(--encre); }
.hero-page__fond { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-page__fond img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero-page__voile { position: absolute; inset: 0; z-index: -1;
  /* Le creux du dégradé était à .58 : sur les zones claires de la photo, le
     filet d'ariane et le sur-titre tombaient à 4,1–4,5:1, sous le seuil AA. */
  background: linear-gradient(180deg, rgba(14,19,25,.88) 0%, rgba(14,19,25,.72) 55%, rgba(14,19,25,.90) 100%); }
.hero-page__corps { padding-block: clamp(7.5rem, 15vh, 11rem) clamp(3rem, 7vh, 5rem); }
.hero-page__corps h1 { max-inline-size: 15ch; }
.hero-page .inscription { color: var(--bleu-clair); }
.hero-page__accroche { color: rgba(250,251,253,.86); font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
  margin-top: 1.2rem; max-inline-size: 56ch; }
.hero-page--sobre { background: var(--encre); }
.hero-page--sobre .hero-page__corps { padding-block: clamp(7rem, 13vh, 9.5rem) clamp(2.5rem, 5vh, 4rem); }

/* fil d'ariane */
.ariane { font-size: .78rem; letter-spacing: .04em; margin-bottom: 1.5rem; color: rgba(250,251,253,.62); }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; }
.ariane li:not(:last-child)::after { content: "—"; margin-left: .45rem; opacity: .5; }
.ariane a { text-decoration: none; border-bottom: var(--filet) solid transparent; }
.ariane a:hover { border-bottom-color: currentColor; }

/* --------------------------------------------------------- 7. grilles */
.rubrique { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.55fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: start; }
.rubrique--simple { grid-template-columns: 1fr; max-inline-size: 46rem; }
@media (max-width: 860px) { .rubrique { grid-template-columns: 1fr; gap: 1.6rem; } }
.rubrique__intro p { color: var(--graphite); }
.section--nuit .rubrique__intro p, .section--nuit .prose p { color: rgba(232,236,241,.82); }

.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; }
.duo--decale { grid-template-columns: 1.05fr .95fr; }
@media (max-width: 860px) { .duo--decale { grid-template-columns: 1fr; } }

/* ------------------------------------------------ 8. cartes de métier */
.metiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 0;
  border-top: var(--filet) solid var(--trait); border-left: var(--filet) solid var(--trait); }
.metier {
  border-right: var(--filet) solid var(--trait); border-bottom: var(--filet) solid var(--trait);
  padding: clamp(1.6rem, 3vw, 2.4rem); background: transparent; text-decoration: none;
  display: flex; flex-direction: column; gap: .85rem; position: relative;
  transition: background var(--glisse);
}
.metier:hover { background: var(--blanc); }
.metier__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.metier__num { font-family: var(--gravure); font-size: 1.15rem; color: var(--bleu); letter-spacing: .05em; }
.metier h2, .metier h3 { margin: 0;
  font-size: clamp(1.22rem, 1.08rem + .62vw, 1.55rem); }
.metier p { color: var(--graphite); font-size: .95rem; margin: 0; }
.metier__liste { list-style: none; margin: .2rem 0 0; padding: 0; font-size: .855rem; color: var(--graphite-clair); }
.metier__liste li { padding-left: 1rem; position: relative; }
.metier__liste li::before { content: "·"; position: absolute; left: .25rem; color: var(--bleu); }
.metier__pied { margin-top: auto; padding-top: 1.1rem; }

/* ----------------------------------------------------- 9. engagements */
.engagements { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(1.5rem, 3.5vw, 3rem); }
.engagement { border-top: 2px solid var(--bleu); padding-top: 1.3rem; }
.engagement h3 { font-size: 1.35rem; margin-bottom: .5rem; }
.engagement p { color: var(--graphite); font-size: .95rem; margin: 0; }
.section--nuit .engagement { border-top-color: var(--bleu-clair); }
.section--nuit .engagement p { color: rgba(232,236,241,.78); }

/* ------------------------------------------------------- 10. figures */
.figure { margin: 0; position: relative; }
.figure__cadre { position: relative; overflow: hidden; background: var(--papier-creux); }
.figure__cadre::after {
  content: ""; position: absolute; inset: 10px; border: var(--filet) solid rgba(255,255,255,.34);
  pointer-events: none;
}
.figure img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.figure figcaption {
  margin-top: .6rem; font-size: .69rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--graphite-clair);
}
.figure--nue .figure__cadre::after { display: none; }

/* ------------------------------------------------------ 11. prose */
.prose { max-inline-size: 68ch; }
.prose h2 { margin-top: 2.4em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.9em; font-size: clamp(1.25rem,1.1rem+.6vw,1.6rem); }
.prose ul, .prose ol { padding-left: 1.15rem; margin: 0 0 1.15em; }
.prose li { margin-bottom: .45em; }
.prose a { color: var(--bleu); text-underline-offset: .22em; }
.prose .exergue {
  font-family: var(--gravure); font-size: clamp(1.18rem, 1.05rem + .7vw, 1.55rem);
  line-height: 1.45; color: var(--encre); border-left: 2px solid var(--bleu);
  padding-left: 1.4rem; margin: 2rem 0;
}

/* --------------------------------------------- 12. listes prestations */
.prestations { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.5rem, 3vw, 2.6rem); }
.prestation { border-top: var(--filet) solid var(--trait); padding-top: 1.15rem; }
.prestation h3 { font-family: var(--courant); font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--bleu); margin-bottom: .9rem; }
.prestation ul { list-style: none; margin: 0; padding: 0; }
.prestation li { position: relative; padding-left: 1.25rem; margin-bottom: .55rem; font-size: .945rem; }
.prestation li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  inline-size: .5rem; block-size: .5rem; border: var(--filet) solid var(--bleu);
  transform: rotate(45deg);
}

/* ----------------------------------------------------- 13. démarche */
/* Même règle que l'index des métiers : filet vertical => retrait des deux
   côtés, et la grille est décalée pour garder la première colonne alignée. */
.demarche { counter-reset: pas; display: grid; gap: 0;
  margin-inline: calc(var(--cellule) * -1);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  border-top: var(--filet) solid var(--trait); }
.pas { counter-increment: pas; padding: 1.6rem var(--cellule) 1.7rem;
  border-right: var(--filet) solid var(--trait); }
.pas:last-child { border-right: 0; }
.pas::before {
  content: "0" counter(pas); font-family: var(--gravure); font-size: 1.9rem;
  color: var(--bleu); display: block; line-height: 1; margin-bottom: .7rem;
}
.pas h2, .pas h3 { font-family: var(--courant); font-size: 1rem; font-weight: 600; margin-bottom: .45rem; line-height: 1.35; }
.pas p { font-size: .9rem; color: var(--graphite); margin: 0; }
.section--nuit .demarche { border-top-color: var(--trait-fonce); }
.section--nuit .pas { border-right-color: var(--trait-fonce); }
.section--nuit .pas p { color: rgba(232,236,241,.75); }
@media (max-width: 720px) {
  .demarche { margin-inline: 0; }
  .pas { border-right: 0; border-bottom: var(--filet) solid var(--trait);
         padding-inline: 0; }
  .pas:last-child { border-bottom: 0; } }

/* ---------------------------------------------------------- 14. FAQ */
.faq { border-top: var(--filet) solid var(--trait); }
.faq details { border-bottom: var(--filet) solid var(--trait); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.25rem 2.5rem 1.25rem 0; position: relative;
  font-family: var(--gravure); font-size: clamp(1.02rem, .95rem + .38vw, 1.24rem); line-height: 1.38;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .35rem; top: 1.75rem;
  inline-size: 11px; block-size: 11px; border-right: var(--filet) solid var(--bleu);
  border-bottom: var(--filet) solid var(--bleu); transform: rotate(45deg);
  transition: transform var(--glisse);
}
.faq details[open] summary::after { transform: rotate(225deg); top: 1.95rem; }
.faq summary:hover { color: var(--bleu); }
.faq__reponse { padding: 0 clamp(0rem,4vw,3rem) 1.5rem 0; color: var(--graphite); max-inline-size: 72ch; }
.faq__reponse p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------- 15. bandeau */
.bandeau {
  background: var(--encre); color: var(--papier);
  padding-block: clamp(2.6rem, 5vw, 4.2rem);
}
.bandeau__corps { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem; }
.bandeau h2 { margin: 0; max-inline-size: 20ch; }
.bandeau p { color: rgba(250,251,253,.75); margin: .6rem 0 0; max-inline-size: 46ch; }

/* --------------------------------------------------------- 16. zones */
.zones { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.zones li {
  border: var(--filet) solid var(--trait); border-radius: var(--coin);
  padding: .42rem .85rem; font-size: .83rem; color: var(--graphite); background: var(--blanc);
}
.section--nuit .zones li { border-color: var(--trait-fonce); background: rgba(255,255,255,.04); color: rgba(232,236,241,.8); }

/* ------------------------------------------------------ 17. contact */
.coordonnees { list-style: none; margin: 0; padding: 0; }
.coordonnees li { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem;
  padding-block: 1.15rem; border-bottom: var(--filet) solid var(--trait); }
.coordonnees li:first-child { border-top: var(--filet) solid var(--trait); }
.coordonnees svg { inline-size: 19px; block-size: 19px; color: var(--bleu); margin-top: .28rem; }
.coordonnees dt, .coordonnees .lib {
  font-size: .69rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--graphite-clair); margin-bottom: .3rem; font-weight: 600;
}
.coordonnees a { text-decoration: none; border-bottom: var(--filet) solid var(--trait); }
.coordonnees a:hover { border-bottom-color: var(--bleu); color: var(--bleu); }

/* ---------------------------------------------------- 18. formulaire */
.devis {
  background: var(--blanc); border: var(--filet) solid var(--trait);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
}
.devis h2, .devis h3 { margin-top: 0; }
.champ { margin-bottom: 1.1rem; }
.champ label {
  display: block; font-size: .715rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--graphite); margin-bottom: .45rem;
}
.champ label .obligatoire { color: var(--bleu); }
.champ input, .champ select, .champ textarea {
  inline-size: 100%; padding: .85rem .95rem; font: inherit; font-size: .96rem;
  color: var(--encre); background: var(--papier);
  border: var(--filet) solid var(--trait); border-radius: var(--coin);
  transition: border-color var(--glisse), background var(--glisse);
}
.champ textarea { min-block-size: 130px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--bleu); background: var(--blanc);
}
.champ input:user-invalid, .champ textarea:user-invalid { border-color: var(--bleu-vif); }
.champ__aide { font-size: .78rem; color: var(--graphite-clair); margin: .4rem 0 0; }
.champ--duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .champ--duo { grid-template-columns: 1fr; gap: 0; } }

/* piège à robots — jamais visible, jamais focalisable */
.rucher {
  position: absolute !important; left: -10000px !important; top: auto !important;
  inline-size: 1px !important; block-size: 1px !important; overflow: hidden !important;
}
.consentement { display: flex; gap: .7rem; align-items: flex-start; font-size: .84rem; color: var(--graphite); margin-bottom: 1.3rem; }
.consentement input { inline-size: 18px; block-size: 18px; margin-top: .18rem; flex: none; accent-color: var(--bleu); }
.consentement a { color: var(--bleu); }

.alerte { border: var(--filet) solid var(--trait); border-left: 3px solid var(--bleu);
  background: var(--bleu-sourd); padding: 1rem 1.15rem; margin-bottom: 1.4rem; font-size: .92rem; }
.alerte--ok { border-left-color: var(--vert); background: #E4F1EA; }
.alerte ul { margin: .5rem 0 0; padding-left: 1.1rem; }

/* ------------------------------------------------------ 19. pied de page */
.pied { background: var(--encre); color: rgba(232,236,241,.78); padding-top: clamp(3.2rem, 6vw, 5rem); }
.pied a { text-decoration: none; }
.pied__grille {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
  gap: clamp(1.8rem, 4vw, 3.5rem); padding-bottom: clamp(2.4rem, 5vw, 3.6rem);
}
@media (max-width: 940px) { .pied__grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pied__grille { grid-template-columns: 1fr; gap: 2rem; } }
.pied__marque .marque__nom { color: var(--papier); }
.pied__texte { font-size: .9rem; margin-top: 1.1rem; max-inline-size: 34ch; color: rgba(232,236,241,.62); }
.pied__titre {
  font-size: .69rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  color: var(--bleu-clair); margin: 0 0 1.1rem;
}
.pied__liste { list-style: none; margin: 0; padding: 0; }
.pied__liste li { margin-bottom: .62rem; }
.pied__liste a { font-size: .9rem; border-bottom: var(--filet) solid transparent; }
.pied__liste a:hover { color: var(--papier); border-bottom-color: rgba(250,251,253,.4); }
.pied__contact { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.pied__contact li { margin-bottom: .8rem; display: flex; gap: .65rem; align-items: flex-start; }
.pied__contact svg { inline-size: 16px; block-size: 16px; color: var(--bleu-clair); margin-top: .22rem; flex: none; }
.pied__contact a:hover { color: var(--papier); }
.pied__horaires { font-size: .84rem; color: rgba(232,236,241,.62); margin-top: 1rem; }
.pied__horaires span { display: block; }

.pied__bas {
  border-top: var(--filet) solid var(--trait-fonce);
  padding-block: 1.5rem 2rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: .8rem; color: rgba(232,236,241,.55);
}
.pied__legal { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.pied__legal a { border-bottom: var(--filet) solid transparent; }
.pied__legal a:hover { color: var(--papier); border-bottom-color: rgba(250,251,253,.4); }

/* signature du réalisateur — la marque réelle de The Web Master, en aplat */
.poincon {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .655rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(232,236,241,.52); text-decoration: none;
  border-bottom: var(--filet) solid transparent; padding-bottom: 2px;
}
.poincon:hover { color: var(--papier); border-bottom-color: rgba(250,251,253,.35); }
.poincon svg { inline-size: 16px; block-size: 16px; flex: none; border-radius: 3.5px; }

/* ---------------------------------------------------- 20. utilitaires */
.tableau-simple { inline-size: 100%; border-collapse: collapse; font-size: .93rem; }
.tableau-simple th, .tableau-simple td { text-align: left; padding: .85rem 1rem .85rem 0;
  border-bottom: var(--filet) solid var(--trait); vertical-align: top; }
.tableau-simple th { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); font-weight: 600; }
.centre { text-align: center; }
.rien { list-style: none; margin: 0; padding: 0; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.discret { color: var(--graphite); font-size: .92rem; }
.grand { font-size: clamp(1.05rem, 1rem + .45vw, 1.24rem); line-height: 1.62; }
@media print {
  .entete, .pied, .bandeau, .bascule, .devis form { display: none !important; }
  body { background: #fff; color: #000; }
}