/* =========================================================================
   A.S BOIS — feuille de style
   Jetons repris du design Claude Design, chrome et mise en page.
   La finition section par section releve de la Phase 2.
   ========================================================================= */

/* ------------------------------------------------------------- Polices --- */

@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/familjen-grotesk-400-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/familjen-grotesk-400-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/familjen-grotesk-italic-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/familjen-grotesk-italic-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spline Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/spline-sans-300-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spline Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/spline-sans-300-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------------------------------------------------- Jetons --- */

:root {
  --fond:            #14120F;
  --fond-2:          #1B1815;
  --fond-3:          #221E1A;

  --texte:           #F2EDE6;
  --texte-courant:   #C4BCB1;
  /* #9A9188 = 6,0:1 et #8E877E = 5,3:1 sur --fond : au-dessus du seuil AA. */
  --texte-attenue:   #9A9188;
  --texte-faible:    #8E877E;

  --accent:          #D8622B;
  --accent-clair:    #E8763F;

  /* Le design n'avait pas de couleur d'erreur. Choisies pour rester lisibles
     sur le fond sombre sans se confondre avec l'orange d'accent :
     #C7402F = 3,7:1 (filets), #E7756A = 6,3:1 (texte). */
  --erreur:          #C7402F;
  --erreur-clair:    #E7756A;

  --filet:           rgba(242, 237, 230, .14);
  --filet-fort:      rgba(242, 237, 230, .28);
  --bordure-champ:   rgba(242, 237, 230, .24);

  --titre:  'Familjen Grotesk', 'Segoe UI', sans-serif;
  --corps:  'Spline Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --gouttiere: clamp(20px, 4vw, 64px);
  --section:   clamp(56px, 8vw, 104px);
  --ecart:     clamp(32px, 5vw, 72px);

  --transition: 160ms ease;
  --ressort:    160ms cubic-bezier(.23, 1, .32, 1);

  --largeur-max: 1600px;
}

/* --------------------------------------------------------------- Reset --- */

*, *::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(--fond);
  color: var(--texte);
  font-family: var(--corps);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, picture, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent); }

input, select, textarea, button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::placeholder { color: var(--texte-faible); opacity: 1; }

::selection { background: var(--accent); color: var(--fond); }

/* ------------------------------------------------------- Saut au contenu -- */

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--fond);
  font-weight: 600;
}
.saut-contenu:focus { left: 0; }

/* -------------------------------------------------------------- Entete --- */

.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(20, 18, 15, .86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--filet);
}

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 20px var(--gouttiere);
}

.marque {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex: 0 0 auto;
}
.marque:hover { color: inherit; }
.marque__nom {
  font-family: var(--titre);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.marque__baseline {
  /* Le design donnait 11px. Remonte a 12px : en capitales espacees, un cran
     plus bas devient penible a lire, pour un gain visuel nul. */
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texte-attenue);
  white-space: nowrap;
}

.nav__liste {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 32px);
}
.nav__lien {
  position: relative;
  display: inline-block;
  padding: 4px 0;
  font-size: 15px;
  color: var(--texte-courant);
  white-space: nowrap;
}
.nav__lien::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transition: right var(--ressort);
}
.nav__lien:hover::after { right: 0; }
.nav__lien--actif { color: var(--texte); }
.nav__lien--actif::after { right: 0; }

.entete__tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 11px 20px;
  border: 1px solid var(--filet-fort);
  border-radius: 999px;
  font-size: 15px;
  white-space: nowrap;
  transition: border-color var(--transition), color var(--transition);
}
.entete__tel:hover { border-color: var(--accent); color: var(--accent); }
.entete__tel--vide { cursor: default; }

.pastille {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  flex: 0 0 auto;
}

/* Bouton burger : masque sur grand ecran. */
.burger {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--filet-fort);
  border-radius: 999px;
  color: var(--texte);
  font-size: 14px;
  cursor: pointer;
  transition: border-color var(--transition);
}
.burger:hover { border-color: var(--accent); }
.burger__trait {
  position: relative;
  width: 18px;
  height: 1px;
  background: currentColor;
}
.burger__trait::before,
.burger__trait::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: transform var(--ressort), top var(--ressort);
}
.burger__trait::before { top: -6px; }
.burger__trait::after  { top: 6px; }

/* ------------------------------------------------- Navigation mobile ----- */

@media (max-width: 900px) {
  .entete__barre { gap: 16px; flex-wrap: wrap; }

  .burger { display: inline-flex; }

  .entete__tel { display: none; }

  .nav {
    order: 3;
    flex-basis: 100%;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--ressort);
  }
  .nav__liste {
    overflow: hidden;
    flex-direction: column;
    gap: 0;
  }
  .nav__item { border-top: 1px solid var(--filet); }
  .nav__lien {
    display: block;
    padding: 16px 0;
    font-size: 17px;
  }
  .nav__lien::after { display: none; }

  body.menu-ouvert .nav { grid-template-rows: 1fr; }
  body.menu-ouvert .burger__trait { background: transparent; }
  body.menu-ouvert .burger__trait::before { top: 0; transform: rotate(45deg); }
  body.menu-ouvert .burger__trait::after  { top: 0; transform: rotate(-45deg); }

  /* Le telephone rejoint le menu deroulant. */
  body.menu-ouvert .entete__tel {
    display: inline-flex;
    order: 4;
    flex-basis: 100%;
    justify-content: center;
    margin-top: 16px;
  }
}

@media (max-width: 480px) {
  .marque__baseline { display: none; }
}

/* --------------------------------------------------------- Typographie --- */

.titre1 {
  font-family: var(--titre);
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.titre2 {
  font-family: var(--titre);
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.titre3 {
  font-family: var(--titre);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.015em;
}

.surtitre {
  display: block;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}

.chapeau {
  max-width: 60ch;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
  color: var(--texte-courant);
  text-wrap: pretty;
}

.texte-attenue { color: var(--texte-attenue); }
.texte-faible  { color: var(--texte-faible); font-size: 14px; }

/* WCAG 2.2 (2.5.8) demande 24 x 24 px de zone cliquable. Un lien de 15px
   fait environ 20px de haut : ces liens isoles recoivent donc un peu de
   hauteur, invisible a l'oeil mais decisive au doigt. */
.lien-accent {
  align-self: flex-start;
  padding: 3px 0 5px;
  border-bottom: 1px solid rgba(216, 98, 43, .4);
  font-size: 15px;
  color: var(--accent);
}
.lien-attenue {
  display: inline-block;
  padding: 4px 0;
  font-size: 15px;
  color: var(--texte-attenue);
}

/* --- Liens au fil du texte ------------------------------------------------
   Dans un paragraphe, un lien doit se voir sans qu'on le survole : le survol
   n'existe pas sur un ecran tactile, et la couleur seule ne suffit pas a qui
   la percoit mal. D'ou le souligne, en plus de la teinte d'accent.
   Les liens de navigation, du pied de page et les boutons sont identifiables
   par leur place et gardent leur traitement propre. */
.section--texte p a,
.section--texte li a,
.chapeau a,
.champ__aide a,
.section__intro p a,
.pied__liens a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.section--texte p a:hover,
.section--texte li a:hover,
.chapeau a:hover,
.champ__aide a:hover,
.section__intro p a:hover,
.pied__liens a:hover {
  color: var(--accent-clair);
  text-decoration-thickness: 2px;
}

/* Marqueur des informations encore manquantes. */
.aremplir {
  border-bottom: 1px dashed rgba(154, 145, 136, .6);
  color: inherit;
  font-style: normal;
}
.aremplir--visible {
  background: rgba(216, 98, 43, .12);
  color: var(--accent);
  padding: 0 .25em;
  border-bottom-color: rgba(216, 98, 43, .5);
}

/* ------------------------------------------------------------ Sections --- */

.section {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: var(--section) var(--gouttiere);
}

.section--duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: var(--ecart);
  align-items: start;
}

/* Fond pleine largeur, contenu toujours aligne sur la meme colonne. */
.section--fond {
  max-width: none;
  background: var(--fond-2);
  padding-inline: max(var(--gouttiere), (100% - var(--largeur-max)) / 2);
}

.section--titre {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: clamp(24px, 3vw, 40px);
}

.section--centre {
  align-items: center;
  text-align: center;
  min-height: 50vh;
  justify-content: center;
}

.section--filets {
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ecart);
  align-items: baseline;
  justify-content: space-between;
}

.section--texte { max-width: 76ch; }
.section--texte p { margin-bottom: 1.1em; color: var(--texte-courant); }
.section--texte .titre3 { margin: 2em 0 .6em; color: var(--texte); }
.section--texte .titre3:first-child { margin-top: 0; }

.section__intro {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 560px;
}
.section__intro p { color: var(--texte-courant); text-wrap: pretty; }

.section__entete {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 26px;
}

/* -------------------------------------------------------------- Actions --- */

.actions { display: flex; flex-wrap: wrap; gap: 14px; }

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), transform var(--ressort);
}
.bouton:active { transform: scale(.97); }

.bouton--plein { background: var(--accent); color: var(--fond); }
.bouton--plein:hover { background: var(--accent-clair); color: var(--fond); }

.bouton--ligne { border-color: var(--filet-fort); color: var(--texte); }
.bouton--ligne:hover { border-color: var(--texte); color: var(--texte); }

.bouton--large { width: 100%; }

/* ----------------------------------------------------------------- Hero --- */

.hero {
  position: relative;
  height: min(86vh, 860px);
  min-height: 560px;
  background: var(--fond);
  overflow: hidden;
}
.hero__scene { position: absolute; inset: 0; }

/* Fond visible pendant le chargement de la scene, et seul repli si le WebGL
   manque. L'iframe se pose par-dessus une fois qu'elle a signale « pret ». */
.hero__attente {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(216, 98, 43, .10), transparent 70%),
    var(--fond-2);
}

.hero__cadre {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  opacity: 0;
  transition: opacity 600ms ease;
}
/* Pose par le JS a la reception du message « pret » de la scene. */
.hero[data-montage='pret'] .hero__cadre { opacity: 1; }
/* Scene indisponible : on retire l'iframe et on montre le rendu fixe. */
.hero[data-montage='indisponible'] .hero__cadre { display: none; }

.hero__repli,
.hero__repli img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero__repli img { object-fit: cover; object-position: 42% 40%; }

.hero__indice {
  margin-top: 18px;
  font-size: 13px;
  color: var(--texte-faible);
}
.hero__voile {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 92% at 60% 32%,
    rgba(20, 18, 15, 0) 36%, rgba(20, 18, 15, .78) 100%);
}
.hero__texte {
  position: absolute;
  left: var(--gouttiere);
  right: var(--gouttiere);
  bottom: clamp(28px, 5vw, 60px);
  /* Phase 4 : le visiteur doit pouvoir faire tourner la charpente a travers
     le texte. Seuls les boutons restent cliquables. */
  pointer-events: none;
}
.hero__texte .actions,
.hero__texte a { pointer-events: auto; }
.hero__bloc {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 760px;
}
.hero__titre {
  font-family: var(--titre);
  font-size: clamp(40px, 6.4vw, 86px);
  line-height: .94;
  font-weight: 700;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.hero__accroche {
  max-width: 540px;
  color: var(--texte-courant);
  text-wrap: pretty;
}

/* -------------------------------------------------------------- Reperes --- */

/* Les separateurs sont dessines par le fond de la grille, que des gouttieres
   d'un pixel laissent voir. Avec des `border-right`, les blocs de fin de
   rangee gardaient un filet contre le vide des que la grille se repliait —
   trois traits orphelins sur un telephone. La gouttiere, elle, ne separe que
   ce qui est effectivement voisin, a n'importe quel nombre de colonnes. */
.reperes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 1px;
  background: var(--filet);
  border-bottom: 1px solid var(--filet);
}
.repere {
  padding: 28px clamp(20px, 3vw, 40px);
  background: var(--fond);
}
/* Le premier bloc s'aligne sur la gouttiere du site, comme le reste du contenu. */
.repere:first-child { padding-left: var(--gouttiere); }

/* Entre deux, `auto-fit` repliait les quatre chiffres en 3 + 1, avec un bloc
   seul sur sa ligne. Quatre valeurs se lisent en carre. */
@media (min-width: 420px) and (max-width: 760px) {
  .reperes { grid-template-columns: repeat(2, 1fr); }
  .repere:nth-child(odd) { padding-left: var(--gouttiere); }
}
.repere__valeur { font-family: var(--titre); font-size: 34px; }
.repere__legende {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texte-faible);
}

/* ---------------------------------------------------------- Prestations --- */

.liste-prestations { display: flex; flex-direction: column; }

.prestation {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(20px, 3vw, 40px);
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid var(--filet);
  transition: padding-left var(--ressort);
}
.prestation:last-child { border-bottom: 1px solid var(--filet); }
.prestation:hover { padding-left: 10px; }
.prestation__titre  { flex: 0 0 200px; font-size: 15px; color: var(--accent); }
.prestation__detail { flex: 1 1 300px; min-width: 260px; color: var(--texte-courant); }
.prestation__numero { flex: 0 0 auto; margin-left: auto; font-size: 15px; color: var(--texte-faible); }

.grille-fiches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1px;
  background: var(--filet);
  border: 1px solid var(--filet);
}
.fiche {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 3vw, 40px);
  background: var(--fond);
}
.fiche__numero { font-size: 13px; letter-spacing: .1em; color: var(--accent); }
.fiche__titre  { font-family: var(--titre); font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.fiche__detail { color: var(--texte-courant); font-size: 16px; text-wrap: pretty; }
.fiche__mots   { margin-top: auto; font-size: 14px; color: var(--texte-faible); }

/* ------------------------------------------------------------ Chantiers --- */

.grille-chantiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}
.chantier { display: flex; flex-direction: column; gap: 12px; }
.chantier__pied {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  color: var(--texte-attenue);
}
.chantier__lieu { border-bottom: 1px dashed rgba(154, 145, 136, .5); }
.chantier__type { font-size: 13px; color: var(--texte-faible); }

/* ---------------------------------------------------------------- Media --- */

.media {
  position: relative;
  overflow: hidden;
  background: var(--fond-3);
}
.media--paysage  { aspect-ratio: 4 / 3; }
.media--portrait { aspect-ratio: 3 / 4; }
.media--carre    { aspect-ratio: 1 / 1; }
.media img { width: 100%; height: 100%; object-fit: cover; }

.media--vide {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border: 1px dashed var(--filet-fort);
  text-align: center;
}
.media__legende { font-size: 14px; color: var(--texte-faible); }

.duo-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.duo-photos > *:nth-child(2) { margin-top: 32px; }

@media (max-width: 620px) {
  .duo-photos { grid-template-columns: 1fr; }
  .duo-photos > *:nth-child(2) { margin-top: 0; }
}

/* -------------------------------------------------------------- Chiffres --- */

.chiffres { display: flex; flex-wrap: wrap; gap: 36px; }
.chiffre__valeur {
  font-family: var(--titre);
  font-size: 30px;
  color: var(--texte);
}
.chiffre__legende { margin-top: 6px; font-size: 14px; color: var(--texte-attenue); }

/* --------------------------------------------------------------- Etapes --- */

/* « Du relevé au levage » est une suite, pas une collection : les quatre
   étapes se lisent alignées, comme dans le design d'origine. `auto-fit` les
   repliait en 3 + 1 entre 700 et 1000px — une séquence amputée de sa fin.
   D'où des nombres de colonnes choisis, jamais déduits : 1, puis 2, puis 4. */
.etapes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
@media (max-width: 460px) {
  .etapes { grid-template-columns: 1fr; }
}

.section--processus {
  display: flex;
  flex-direction: column;
  gap: var(--ecart);
}
.section--processus .titre2 { max-width: 22ch; }

/* Au-dela, le titre reprend sa place a gauche et la suite se deroule
   d'un seul tenant, comme dans le design. */
@media (min-width: 1000px) {
  .section--processus {
    display: grid;
    grid-template-columns: 280px 1fr;
    align-items: start;
  }
  .section--processus .etapes { grid-template-columns: repeat(4, 1fr); }
}
.etape { display: flex; flex-direction: column; gap: 12px; }
.etape__numero { font-size: 13px; letter-spacing: .1em; color: var(--accent); }
.etape__titre  { font-family: var(--titre); font-size: 19px; font-weight: 600; }
.etape__texte  { font-size: 15px; line-height: 1.6; color: var(--texte-attenue); }

/* ------------------------------------------------------------- Pastilles --- */

.pastilles { display: flex; flex-wrap: wrap; gap: 10px; }
.pastille-zone {
  padding: 9px 16px;
  border: 1px solid rgba(242, 237, 230, .2);
  border-radius: 999px;
  font-size: 14px;
  color: var(--texte-courant);
}
.pastille-zone--fort { border-color: var(--accent); color: var(--accent); }

.liste-simple { display: flex; flex-direction: column; gap: 8px; color: var(--texte-courant); }
.liste-simple li { padding-left: 18px; position: relative; }
.liste-simple li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .7em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}
.liste-simple--colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }

/* ---------------------------------------------------------- Coordonnees --- */

.coordonnees { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.coordonnees__tel {
  font-family: var(--titre);
  font-size: 30px;
  letter-spacing: -.01em;
}
.coordonnees__mail { color: var(--texte-attenue); }

/* ----------------------------------------------------------- Formulaire --- */

.formulaire { display: flex; flex-direction: column; gap: 16px; max-width: 620px; }
.formulaire__paire {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 16px;
}

.champ { display: flex; flex-direction: column; gap: 7px; }
.champ__label { font-size: 14px; color: var(--texte-attenue); }
.champ__requis { color: var(--accent); }
.champ__saisie {
  padding: 14px 16px;
  background: transparent;
  border: 1px solid var(--bordure-champ);
  border-radius: 0;
  font-size: 15px;
  outline: none;
  transition: border-color var(--transition);
}
.champ__saisie:focus { border-color: var(--accent); }
textarea.champ__saisie { resize: vertical; min-height: 120px; }
select.champ__saisie option { background: var(--fond); color: var(--texte); }

.champ__fichier {
  padding: 12px 0;
  font-size: 15px;
  color: var(--texte-attenue);
}
.champ__fichier::file-selector-button {
  margin-right: 14px;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--bordure-champ);
  color: var(--texte);
  font-size: 14px;
  cursor: pointer;
  transition: border-color var(--transition);
}
.champ__fichier::file-selector-button:hover { border-color: var(--accent); }

.champ__aide { font-size: 13px; color: var(--texte-faible); }
.champ__aide a { color: var(--texte-attenue); text-decoration: underline; }

/* --- Erreurs -------------------------------------------------------------
   Jamais la couleur seule : un liseré, un libellé et un texte explicite,
   pour que l'information passe aussi sans perception des rouges. */

.alerte {
  padding: 18px 20px;
  border: 1px solid var(--erreur);
  border-left-width: 3px;
  background: rgba(199, 64, 47, .12);
}
.alerte__titre { display: block; font-size: 16px; color: var(--erreur-clair); }
.alerte__texte,
.alerte__liste { margin-top: 8px; font-size: 15px; color: var(--texte-courant); }
.alerte__liste { display: flex; flex-direction: column; gap: 6px; }
.alerte__liste li { padding-left: 18px; position: relative; }
.alerte__liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .7em;
  width: 8px;
  height: 1px;
  background: var(--erreur-clair);
}

.champ--erreur .champ__saisie { border-color: var(--erreur); }
.champ--erreur .champ__label { color: var(--erreur-clair); }
.champ__erreur { font-size: 13px; color: var(--erreur-clair); }

/* Piege a robots : invisible pour l'humain, present pour le script. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* -------------------------------------------------------------- Secours --- */

.nav-secours__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 24px;
  font-size: 15px;
  color: var(--texte-attenue);
}

/* ----------------------------------------------------------------- Pied --- */

.pied { border-top: 1px solid var(--filet); }
.pied__barre {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 26px var(--gouttiere);
  font-size: 13px;
  color: var(--texte-faible);
}
.pied__liens { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
/* Meme raison que .lien-attenue : 13px donne 18px de haut, sous le seuil. */
.pied__liens a { display: inline-block; padding: 4px 0; }

/* ----------------------------------------------- Sommaire de page --- */

.sommaire {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 var(--gouttiere) clamp(24px, 4vw, 48px);
}
.sommaire__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1px;
  background: var(--filet);
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
}
.sommaire__lien {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 18px;
  background: var(--fond);
  font-size: 15px;
  color: var(--texte-courant);
  transition: color var(--transition), background var(--transition);
}
.sommaire__lien:hover { color: var(--texte); background: var(--fond-2); }
.sommaire__numero { font-size: 13px; letter-spacing: .1em; color: var(--accent); }

/* ------------------------------------------- Prestation en detail --- */

.prestation-detail { scroll-margin-top: 96px; }
.prestation-detail__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--ecart);
  align-items: start;
}
.prestation-detail__entete {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 24ch;
}
.prestation-detail__numero {
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--accent);
}
.prestation-detail__quand {
  font-size: 15px;
  line-height: 1.5;
  color: var(--texte-faible);
}
.prestation-detail__corps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 62ch;
}
.prestation-detail__texte {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.65;
  color: var(--texte-courant);
  text-wrap: pretty;
}
.prestation-detail__soustitre {
  font-family: var(--titre);
  font-size: 17px;
  font-weight: 600;
  color: var(--texte);
}
.prestation-detail__liens { margin-top: 4px; }

/* ------------------------------------------------------- Filtres --- */

.section--filtres {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 0;
  padding-bottom: clamp(24px, 4vw, 40px);
}
.filtres { display: flex; flex-wrap: wrap; gap: 10px; }
.filtre {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--filet-fort);
  border-radius: 999px;
  font-size: 14px;
  color: var(--texte-courant);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.filtre:hover { border-color: var(--accent); color: var(--accent); }
.filtre--actif {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fond);
}
.filtre--actif:hover { background: var(--accent-clair); border-color: var(--accent-clair); color: var(--fond); }
.filtre__nombre { font-size: 12px; opacity: .75; }
.filtres__resultat { font-size: 14px; color: var(--texte-faible); }

.section--grille { padding-top: 0; }
.chantier__texte { font-size: 15px; line-height: 1.6; color: var(--texte-attenue); }

/* --------------------------------------------------- Photo en grand --- */

.media__lien { display: block; cursor: zoom-in; }
.media__lien:hover .media { opacity: .9; transition: opacity var(--transition); }

.agrandi {
  width: min(94vw, 1400px);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.agrandi::backdrop { background: rgba(20, 18, 15, .92); }
.agrandi__image {
  width: 100%;
  height: auto;
  max-height: 92vh;
  object-fit: contain;
  cursor: zoom-out;
}
.agrandi__fermer {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 44px;
  height: 44px;
  background: var(--fond);
  border: 1px solid var(--filet-fort);
  border-radius: 999px;
  color: var(--texte);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.agrandi__fermer:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------ Savoir-faire --- */

.grille-savoir {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(28px, 4vw, 48px);
}
.savoir { display: flex; flex-direction: column; gap: 10px; }
.savoir__titre {
  font-family: var(--titre);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.savoir__texte {
  font-size: 16px;
  line-height: 1.65;
  color: var(--texte-attenue);
  text-wrap: pretty;
}

/* ------------------------------------------------------- Equipe --- */

.equipe { display: flex; flex-direction: column; gap: 10px; }
.equipe__membre { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.equipe__prenom { font-size: 17px; }
.equipe__role { font-size: 14px; color: var(--texte-faible); }

/* ------------------------------------------------------- Delais --- */

.delais { display: flex; flex-direction: column; }
.delai {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--filet);
}
.delai:last-child { border-bottom: 1px solid var(--filet); }
.delai__etape { font-size: 17px; flex: 0 0 auto; }
/* Le trait relie l'etape a sa duree : sans lui, l'oeil perd la ligne sur un
   ecran large. Purement decoratif, donc masque aux lecteurs d'ecran. */
.delai__trait {
  flex: 1 1 auto;
  min-width: 20px;
  height: 1px;
  background: var(--filet);
  transform: translateY(-4px);
}
.delai__duree { flex: 0 0 auto; font-size: 15px; color: var(--accent); }
.delais__note { margin-top: 20px; font-size: 15px; }

@media (max-width: 480px) {
  .delai { flex-direction: column; gap: 4px; }
  .delai__trait { display: none; }
}

/* ============================================================== Impression ===
   Le site est sombre ; les navigateurs, eux, n'impriment pas les fonds. Sans
   ces regles, le texte creme se retrouve sur du papier blanc a 1,16:1 : une
   feuille vierge. Or ce sont justement les pages qu'on imprime — mentions
   legales, protection des donnees, confirmation de devis.
   ========================================================================== */

@media print {
  :root {
    --fond:          #FFFFFF;
    --fond-2:        #FFFFFF;
    --fond-3:        #FFFFFF;
    --texte:         #000000;
    --texte-courant: #1A1A1A;
    --texte-attenue: #444444;
    --texte-faible:  #555555;
    --accent:        #8A3D16;   /* l'orange d'ecran vire au delave sur papier */
    --accent-clair:  #8A3D16;
    --filet:         #BBBBBB;
    --filet-fort:    #999999;
  }

  @page { margin: 18mm 15mm; }

  html, body {
    background: #FFFFFF;
    color: #000000;
    font-size: 11pt;
    line-height: 1.45;
  }

  /* Ce qui n'a pas de sens sur du papier. */
  .entete,
  .burger,
  .saut-contenu,
  .hero__scene,
  .hero__voile,
  .hero__indice,
  .hero__cadre,
  .hero__repli,
  .actions,
  .bouton,
  .formulaire,
  .nav-secours,
  .media--vide {
    display: none !important;
  }

  /* Le hero garde son titre, perd sa hauteur d'ecran. */
  .hero {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .hero__texte {
    position: static;
    left: auto; right: auto; bottom: auto;
  }
  .hero__titre { font-size: 24pt; }

  .section,
  .section--fond,
  .reperes {
    padding: 0 0 12pt;
    max-width: none;
    background: none;
  }

  .titre1 { font-size: 20pt; }
  .titre2 { font-size: 15pt; }
  .titre3 { font-size: 12pt; }

  /* Un titre seul en bas de page, ou une fiche coupee en deux, se relisent mal. */
  h1, h2, h3 { break-after: avoid; }
  .etape, .fiche, .chantier, .repere, li { break-inside: avoid; }

  /* Sur papier, un lien sans son adresse ne mene nulle part. On n'imprime
     que les adresses utiles : ni les ancres internes, ni la navigation. */
  .section--texte a[href^="http"]::after,
  .section--texte a[href^="mailto"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555555;
    word-break: break-all;
  }

  .pied { border-top: 1px solid #BBBBBB; }
  .pied__liens a { text-decoration: none; }

  /* Les marqueurs de contenu manquant ne doivent pas passer pour du contenu. */
  .aremplir { color: #777777; }
}