/* ===========================================================================
   ÉNERGIE SIGNATURE — feuille de style du site
   Guide de normes graphiques, mai 2026 :
     Carbone #1C140E · Cuivre #6F4525 · Porcelaine #EDEDED
     Figtree ExtraBold (titres) · Inter (texte courant)
     La diagonale à −32° · l'éclair, en section seulement
   =========================================================================== */

:root {
  /* Le guide donne Carbone #1C140E, qui est un brun très foncé. En grande
     surface il rendait un fond chocolat plutôt que noir : les fonds foncés
     passent donc au noir. Le brun du guide reste sur --texte, où il sert. */
  --carbone: #0d0d0d;
  --cuivre: #6f4525;
  --cuivre-vif: #8a5a33;
  --cuivre-pale: #c79a72;
  --porcelaine: #ededed;
  --blanc: #ffffff;
  --texte: #1c140e;
  --texte-doux: #5f554d;
  --trait: #ddd6cf;
  --trait-sombre: rgba(237, 237, 237, .14);

  --large: 1180px;
  --gouttiere: clamp(16px, 4vw, 40px);
  --pente: 0.625;            /* tan(32°) : pente de la diagonale de marque */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: Figtree, Inter, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
a { color: inherit; }
/* height: auto est essentiel : les images portent des attributs width/height
   (pour réserver leur place au chargement). Sans cette règle, le navigateur
   garde la hauteur brute de l'attribut et le logo déborde de l'en-tête. */
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--cuivre); outline-offset: 3px; }

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

.diagonale {
  display: inline-block;
  width: 10px; height: 22px;
  background: var(--cuivre);
  transform: skewX(-32deg);
  flex: 0 0 auto;
}
.surtitre {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--cuivre);
  margin-bottom: 16px;
}
.surtitre.pale { color: var(--cuivre-pale); }

.bouton {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 15px/1 Inter, sans-serif;
  padding: 16px 24px;
  border: 1.5px solid var(--cuivre);
  background: var(--cuivre);
  color: var(--blanc);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.bouton:hover { background: var(--cuivre-vif); border-color: var(--cuivre-vif); }
.bouton.fantome { background: transparent; color: var(--texte); border-color: var(--texte); }
.bouton.fantome:hover { background: var(--texte); color: var(--blanc); }
.bouton.clair { background: var(--cuivre-pale); border-color: var(--cuivre-pale); color: var(--carbone); }
.bouton.clair:hover { background: var(--blanc); border-color: var(--blanc); }

/* ---------------------------------------------------------------- En-tête */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--trait);
}
.entete .enveloppe { display: flex; align-items: center; gap: 28px; height: 76px; }
.entete .logo img { width: 190px; }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--texte-doux); }
.nav a:hover, .nav a.actif { color: var(--cuivre); }
.nav a.actif { font-weight: 600; }
.entete .rbq { font-size: 12.5px; color: var(--texte-doux); white-space: nowrap; }
.entete .bouton { padding: 12px 18px; font-size: 14px; }

/* ----------------------------------------------------------------- Accueil */
/* Un grand bandeau pleine largeur : le visuel électrique occupe tout le fond
   et le texte passe par-dessus. Le voile dégradé garantit que le titre reste
   lisible, peu importe où tombe l'éclair. */
.accueil {
  position: relative; overflow: hidden;
  min-height: min(88vh, 780px);
  display: flex; align-items: center;
  padding: clamp(56px, 9vw, 110px) 0;
}
.accueil .fond { position: absolute; inset: 0; }
.accueil .fond svg { width: 100%; height: 100%; display: block; }
.accueil .fond::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(13, 13, 13, .96) 0%, rgba(13, 13, 13, .78) 38%, rgba(13, 13, 13, 0) 70%);
}
.accueil .enveloppe { position: relative; z-index: 2; width: 100%; }
.accueil .texte { max-width: none; }   /* le paragraphe garde sa propre largeur */
/* Le slogan tient en deux phrases : une par ligne sur ordinateur. */
.accueil h1 { font-size: clamp(42px, 6.4vw, 96px); font-weight: 900; line-height: .98; letter-spacing: -.03em; max-width: none; }
.accueil h1 em { display: block; }
.accueil h1 em { font-style: normal; }
.accueil .chapo { margin-top: 22px; max-width: 46ch; font-size: 19px; font-weight: 300; }
.accueil .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* -------------------------------------------------- Le haut du site en noir
   Le carbone est la couleur dominante de la marque : la barre de navigation
   et la grande bande d'accueil sont foncées, et le logo passe en version
   pâle. Ces règles viennent après celles du haut du fichier, donc elles
   remplacent les couleurs claires d'origine. */
.entete { background: rgba(13, 13, 13, .96); border-bottom-color: rgba(237, 237, 237, .12); }
.entete .nav a { color: rgba(237, 237, 237, .74); }
.entete .nav a:hover, .entete .nav a.actif { color: var(--cuivre-pale); }
.entete .rbq { color: rgba(237, 237, 237, .5); }

.accueil { background: var(--carbone); color: var(--porcelaine); }
.accueil .surtitre { color: var(--cuivre-pale); }
.accueil h1 { color: var(--blanc); }
.accueil h1 em { color: var(--cuivre-pale); }
.accueil .chapo { color: rgba(237, 237, 237, .74); }
.accueil .bouton.fantome { color: var(--porcelaine); border-color: rgba(237, 237, 237, .45); }
.accueil .bouton.fantome:hover { background: var(--porcelaine); color: var(--carbone); border-color: var(--porcelaine); }

/* Le visuel de l'accueil : dessiné en SVG, pas une photo. Les impulsions
   glissent le long des conducteurs pour évoquer le courant. */
.accueil .fond { background: var(--carbone); }
.accueil .fond .impulsion {
  stroke-dasharray: 110 900;
  animation: courant 2.6s linear infinite;
}
.accueil .fond .halo { animation: souffle 3.2s ease-in-out infinite; }
@keyframes courant {
  from { stroke-dashoffset: 1010; }
  to   { stroke-dashoffset: -110; }
}
@keyframes souffle {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .accueil .fond .impulsion, .accueil .fond .halo { animation: none; }
}

/* ------------------------------------------------- En-tête des pages intérieures */
.tete-page { background: var(--carbone); color: var(--porcelaine); position: relative; overflow: hidden; }
.tete-page .enveloppe { position: relative; padding: clamp(48px, 7vw, 86px) var(--gouttiere); }
.tete-page .lame {
  position: absolute; right: 8%; top: -20%; bottom: -20%; width: 120px;
  background: var(--cuivre); transform: skewX(-32deg); opacity: .5;
}
.tete-page h1 { font-size: clamp(34px, 4.6vw, 56px); color: var(--blanc); max-width: 18ch; }
.tete-page .chapo { margin-top: 18px; font-size: 19px; font-weight: 300; color: rgba(237, 237, 237, .76); max-width: 52ch; }
.fil { font-size: 13px; color: rgba(237, 237, 237, .55); margin-bottom: 18px; }
.fil a { text-decoration: none; }
.fil a:hover { color: var(--cuivre-pale); }

/* ---------------------------------------------------------------- Confiance */
.confiance { background: var(--carbone); color: var(--porcelaine); border-top: 1px solid var(--trait-sombre); }
.confiance .enveloppe {
  display: flex; flex-wrap: wrap; gap: 10px 40px; align-items: center;
  min-height: 64px; font-size: 14px;
}
.confiance b { color: var(--cuivre-pale); font-weight: 600; }
.confiance .sep { width: 8px; height: 16px; background: var(--cuivre); transform: skewX(-32deg); }

/* ----------------------------------------------------------------- Mission */
/* overflow: hidden retient le trait cuivré décoratif (le ::after ci-dessous).
   Incliné à −32°, ses coins sortaient de l'écran et faisaient glisser toute
   la page de 20 px sur un téléphone. */
.mission { padding: clamp(64px, 9vw, 120px) 0; overflow: hidden; }
.mission .grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.mission .photo { position: relative; }
.mission .photo img { width: 100%; }
.mission .photo::after {
  content: ""; position: absolute; right: 6%; bottom: -24px;
  width: 36px; height: 180px; background: var(--cuivre); transform: skewX(-32deg);
}
.mission h2 { font-size: clamp(34px, 4vw, 48px); color: var(--cuivre); }
.mission .corps { margin-top: 22px; font-size: 19px; max-width: 42ch; }
.mission .equipe { display: flex; gap: 32px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--trait); }
.mission .equipe b { display: block; font-family: Figtree, sans-serif; font-weight: 700; font-size: 17px; }
.mission .equipe span { font-size: 14px; color: var(--texte-doux); }

/* ---------------------------------------------------------------- Approche */
.approche { background: var(--carbone); color: var(--porcelaine); position: relative; overflow: hidden; }
.approche .eclair {
  position: absolute; right: -2%; top: 0; bottom: 0; width: min(300px, 26vw);
  background: var(--cuivre);
  clip-path: polygon(50% 0, 100% 0, 58% 44%, 92% 44%, 18% 100%, 42% 52%, 8% 52%);
}
.approche .enveloppe { position: relative; padding: clamp(64px, 9vw, 112px) var(--gouttiere); }
.approche h2 { font-size: clamp(36px, 5vw, 64px); color: var(--cuivre-pale); max-width: 16ch; }
.engagements {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  margin-top: 56px; max-width: 900px;
  background: var(--trait-sombre); border: 1px solid var(--trait-sombre);
}
.engagement { background: var(--carbone); padding: 28px 26px 30px; }
.engagement h3 { font-size: 21px; color: var(--blanc); }
.engagement p { margin-top: 10px; font-size: 15.5px; color: rgba(237, 237, 237, .72); }

/* ----------------------------------------------------------------- Services */
.services { padding: clamp(64px, 9vw, 120px) 0; }
.services .tete { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: end; }
.services h2 { font-size: clamp(34px, 4vw, 48px); color: var(--cuivre); }
.services .tete p { font-size: 18px; color: var(--texte-doux); max-width: 48ch; }
.liste-services {
  list-style: none; margin: 48px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--trait);
}
.liste-services li { border-bottom: 1px solid var(--trait); }
.liste-services li:not(:nth-child(3n)) { border-right: 1px solid var(--trait); }
.liste-services a {
  display: block; height: 100%; padding: 30px 28px 34px;
  text-decoration: none; transition: background .15s;
}
.liste-services a:hover { background: var(--porcelaine); }
.liste-services h3 { font-size: 21px; display: flex; align-items: center; gap: 12px; }
.liste-services h3::before {
  content: ""; width: 8px; height: 18px; background: var(--cuivre); transform: skewX(-32deg); flex: 0 0 auto;
}
.liste-services p { margin-top: 10px; font-size: 15.5px; color: var(--texte-doux); }
.liste-services .fleche { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--cuivre); }

/* ------------------------------------------------- Contenu d'une page service */
.contenu { padding: clamp(56px, 8vw, 96px) 0; }
.contenu .grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 72px); align-items: start; }
.prose h2 { font-size: clamp(26px, 3vw, 34px); color: var(--cuivre); margin-top: 44px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: 16px; font-size: 17.5px; }
.prose ul { margin: 18px 0 0; padding-left: 0; list-style: none; }
.prose li { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 16.5px; }
.prose li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 7px; height: 15px; background: var(--cuivre); transform: skewX(-32deg);
}
.encadre {
  margin-top: 28px; padding: 24px 26px;
  background: var(--porcelaine); border-left: 4px solid var(--cuivre);
}
.encadre b { display: block; font-family: Figtree, sans-serif; font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.encadre p { margin-top: 0; font-size: 16px; }

.aparte { position: sticky; top: 100px; background: var(--carbone); color: var(--porcelaine); padding: 30px 28px 32px; }
.aparte h3 { font-size: 22px; color: var(--blanc); }
.aparte p { margin-top: 12px; font-size: 15.5px; color: rgba(237, 237, 237, .74); }
.aparte .bouton { margin-top: 22px; width: 100%; justify-content: center; }
.aparte .tel { display: block; margin-top: 16px; text-align: center; font-size: 15px; color: rgba(237, 237, 237, .74); text-decoration: none; }
.aparte .tel b { color: var(--cuivre-pale); }

.autres { border-top: 1px solid var(--trait); padding: clamp(40px, 6vw, 64px) 0 0; margin-top: clamp(40px, 6vw, 64px); }
.autres h2 { font-size: 22px; margin-bottom: 20px; }
.autres ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.autres a {
  display: inline-block; padding: 10px 16px; border: 1px solid var(--trait);
  font-size: 15px; text-decoration: none; transition: .15s;
}
.autres a:hover { border-color: var(--cuivre); color: var(--cuivre); }

/* --------------------------------------------------------------- Soumission */
.soumission { background: var(--porcelaine); padding: clamp(64px, 9vw, 110px) 0; }
.soumission .grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 72px); align-items: start; }
.soumission h2 { font-size: clamp(34px, 4vw, 48px); color: var(--cuivre); }
.soumission .intro p { margin-top: 18px; font-size: 18px; color: var(--texte-doux); max-width: 34ch; }
.soumission .coord { margin-top: 36px; display: grid; gap: 14px; font-size: 16px; }
.soumission .coord b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--cuivre); font-weight: 600; }
.soumission .coord a { text-decoration: none; font-size: 20px; font-weight: 500; }
.soumission .coord a:hover { color: var(--cuivre); }

form { background: var(--blanc); padding: clamp(24px, 4vw, 40px); display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.champ { display: grid; gap: 7px; }
.champ.large { grid-column: 1 / -1; }
.champ label { font-size: 13px; font-weight: 600; }
.champ label i { font-style: normal; color: var(--cuivre); }
.champ input, .champ select, .champ textarea {
  font: 400 16px/1.4 Inter, sans-serif;
  color: var(--texte); background: var(--blanc);
  border: 1px solid #cfc7bf; border-radius: 0; padding: 13px 14px; width: 100%;
}
.champ textarea { min-height: 130px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 2px solid var(--cuivre); outline-offset: -1px; border-color: var(--cuivre); }
form .pied { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; margin-top: 6px; }
form .loi25 { font-size: 13px; color: var(--texte-doux); max-width: 46ch; }
.merci-envoi { grid-column: 1 / -1; display: none; padding: 20px 22px; background: var(--carbone); color: var(--porcelaine); }
.merci-envoi b { color: var(--cuivre-pale); }

/* -------------------------------------------------------------------- Pied */
.pied-site { background: var(--carbone); color: rgba(237, 237, 237, .7); position: relative; }
.pied-site .badge {
  position: absolute; right: max(var(--gouttiere), calc((100% - var(--large)) / 2 + 40px));
  top: -84px; width: 168px; border-radius: 50%;
}
.pied-site .enveloppe { padding: 72px var(--gouttiere) 40px; }
.pied-site .haut { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: 40px; }
.pied-site .haut img { width: 200px; }
.pied-site .haut p, .pied-site .haut li { font-size: 15px; line-height: 1.8; }
.pied-site h4 {
  margin: 0 0 10px; font: 600 12px/1 Inter, sans-serif;
  text-transform: uppercase; letter-spacing: .14em; color: var(--cuivre-pale);
}
.pied-site ul { list-style: none; margin: 0; padding: 0; }
.pied-site a { text-decoration: none; }
.pied-site a:hover { color: var(--cuivre-pale); }
.pied-site .bas {
  margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--trait-sombre);
  display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; font-size: 13px;
}

/* --------------------------------------------------------------- Estimateur
   L'élément distinctif du site : une fourchette de prix tout de suite. */
.bandeau-estimateur { background: var(--porcelaine); padding: clamp(48px, 7vw, 80px) 0; }
.bandeau-estimateur .grille {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.bandeau-estimateur h2 { font-size: clamp(30px, 3.6vw, 44px); color: var(--cuivre); }
.bandeau-estimateur p { margin-top: 16px; font-size: 18px; color: var(--texte-doux); max-width: 44ch; }
.bandeau-estimateur .bouton { margin-top: 26px; }
.apercu-prix {
  background: var(--carbone); color: var(--porcelaine); padding: 30px 32px;
  position: relative; overflow: hidden;
}
.apercu-prix .lame {
  position: absolute; right: -10px; top: -30%; bottom: -30%; width: 46px;
  background: var(--cuivre); transform: skewX(-32deg); opacity: .55;
}
.apercu-prix .etiq { position: relative; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--cuivre-pale); font-weight: 600; }
.apercu-prix .mnt { position: relative; font-family: Figtree, sans-serif; font-weight: 800; font-size: clamp(30px, 4vw, 42px); margin-top: 8px; letter-spacing: -.02em; }
.apercu-prix .sous { position: relative; margin-top: 8px; font-size: 14px; color: rgba(237, 237, 237, .66); }

.estimateur { padding: clamp(48px, 7vw, 80px) 0 clamp(64px, 9vw, 104px); }
.metiers { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.metiers button {
  width: 100%; height: 100%; text-align: left; cursor: pointer;
  background: var(--blanc); border: 1.5px solid var(--trait);
  padding: 20px 22px; font: inherit; transition: .15s;
}
.metiers button:hover { border-color: var(--cuivre); }
.metiers button[aria-pressed="true"] { border-color: var(--cuivre); background: var(--porcelaine); }
.metiers b { display: flex; align-items: center; gap: 10px; font-family: Figtree, sans-serif; font-weight: 700; font-size: 17px; }
.metiers b::before { content: ""; width: 7px; height: 16px; background: var(--cuivre); transform: skewX(-32deg); flex: 0 0 auto; }
.metiers span { display: block; margin-top: 8px; font-size: 14.5px; color: var(--texte-doux); }

.questions { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 56px); align-items: start; }
.question { margin-bottom: 28px; }
.question > b { display: block; font-family: Figtree, sans-serif; font-weight: 700; font-size: 16px; margin-bottom: 12px; }
.choix { display: flex; flex-wrap: wrap; gap: 10px; }
.choix button {
  cursor: pointer; font: 500 15px/1.3 Inter, sans-serif;
  background: var(--blanc); border: 1.5px solid var(--trait);
  padding: 12px 18px; transition: .15s;
}
.choix button:hover { border-color: var(--cuivre); color: var(--cuivre); }
.choix button[aria-pressed="true"] { background: var(--carbone); border-color: var(--carbone); color: var(--blanc); }
.compteur { display: flex; align-items: center; gap: 14px; }
.compteur button {
  width: 46px; height: 46px; cursor: pointer; font-size: 22px; line-height: 1;
  background: var(--blanc); border: 1.5px solid var(--trait);
}
.compteur button:hover { border-color: var(--cuivre); color: var(--cuivre); }
.compteur input {
  width: 92px; text-align: center; font: 700 20px/1 Figtree, sans-serif;
  padding: 12px 8px; border: 1.5px solid var(--trait); background: var(--blanc); color: var(--texte);
}

.resultat { position: sticky; top: 100px; background: var(--carbone); color: var(--porcelaine); padding: 32px 30px 34px; position: sticky; }
.resultat .etiq { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--cuivre-pale); font-weight: 600; }
.resultat .fourchette { font-family: Figtree, sans-serif; font-weight: 800; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.1; margin-top: 10px; letter-spacing: -.02em; }
.resultat .taxes { margin-top: 8px; font-size: 14px; color: rgba(237, 237, 237, .66); }
.resultat .detail { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--trait-sombre); font-size: 14.5px; color: rgba(237, 237, 237, .74); }
.resultat .note { margin-top: 14px; font-size: 14px; color: var(--cuivre-pale); }
.resultat .bouton { margin-top: 24px; width: 100%; justify-content: center; }
.resultat .avert { margin-top: 16px; font-size: 12.5px; line-height: 1.55; color: rgba(237, 237, 237, .5); }
.hors-portee { margin-top: 40px; padding: 26px 28px; background: var(--porcelaine); border-left: 4px solid var(--cuivre); }
.hors-portee b { display: block; font-family: Figtree, sans-serif; font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.hors-portee p { font-size: 16px; color: var(--texte-doux); }

/* ------------------------------------------------------------ Pages simples */
.page-simple { padding: clamp(56px, 8vw, 96px) 0; }
.page-simple .colonne { max-width: 68ch; }
.page-simple p { margin-top: 18px; font-size: 17.5px; }
.grille-faits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--trait); border: 1px solid var(--trait); margin-top: 44px; }
.grille-faits div { background: var(--blanc); padding: 24px 22px; }
.grille-faits b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .13em; color: var(--cuivre); font-weight: 600; }
.grille-faits span { display: block; margin-top: 8px; font-family: Figtree, sans-serif; font-weight: 700; font-size: 19px; }

/* ------------------------------------------------------- Bande d'appel final */
.cta-bande { background: var(--carbone); color: var(--porcelaine); position: relative; overflow: hidden; }
.cta-bande .eclair {
  position: absolute; left: -3%; top: 0; bottom: 0; width: min(240px, 22vw);
  background: var(--cuivre); opacity: .9;
  clip-path: polygon(50% 0, 100% 0, 58% 44%, 92% 44%, 18% 100%, 42% 52%, 8% 52%);
}
.cta-bande .enveloppe { position: relative; padding: clamp(52px, 7vw, 84px) var(--gouttiere); display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; }
.cta-bande h2 { font-size: clamp(28px, 3.4vw, 40px); color: var(--blanc); max-width: 20ch; }
.cta-bande p { margin-top: 12px; color: rgba(237, 237, 237, .7); max-width: 46ch; }
.cta-bande .actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 960px) {
  .bandeau-estimateur .grille, .questions { grid-template-columns: 1fr; }
  .metiers { grid-template-columns: 1fr; }
  .resultat { position: static; }
  .grille-faits { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------ Pièces jointes */
.etiquette-champ { font-size: 13px; font-weight: 600; }
.etiquette-champ small { font-weight: 400; color: var(--texte-doux); }
.depot {
  position: relative; display: grid; gap: 4px; justify-items: center; text-align: center;
  padding: 26px 20px; border: 1.5px dashed #bfb3a8; background: #faf8f6;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.depot:hover, .depot.survol { border-color: var(--cuivre); background: #f4eee8; }
.depot input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.depot:focus-within { outline: 2px solid var(--cuivre); outline-offset: 2px; }
.depot-icone { width: 32px; height: 32px; color: var(--cuivre); }
.depot-texte { font-size: 15.5px; }
.depot-texte b { color: var(--cuivre); }
.depot-aide { font-size: 13px; color: var(--texte-doux); }
.depot-liste { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.depot-liste li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; background: var(--porcelaine); font-size: 14px; }
.depot-liste li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depot-liste li em { font-style: normal; color: var(--texte-doux); flex: 0 0 auto; }
.depot-liste li.trop { background: #f6e3dc; color: #8a2d12; }
.depot-onedrive, .depot-note { padding: 20px 22px; background: var(--porcelaine); border-left: 4px solid var(--cuivre); }
.depot-onedrive p, .depot-note p { margin-top: 6px; font-size: 15px; color: var(--texte-doux); }
.depot-onedrive .bouton { margin-top: 14px; justify-self: start; }
.merci-envoi .suite-fichiers { margin-top: 8px; font-size: 14px; color: rgba(237, 237, 237, .8); }

/* -------------------------------------------------------------- Réalisations */
.realisations { padding: clamp(48px, 7vw, 88px) 0 clamp(64px, 9vw, 110px); }
.filtres { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.filtres button {
  cursor: pointer; font: 500 15px/1 Inter, sans-serif; padding: 12px 18px;
  background: var(--blanc); border: 1.5px solid var(--trait); color: var(--texte);
}
.filtres button b { margin-left: 6px; color: var(--cuivre); }
.filtres button:hover { border-color: var(--cuivre); }
.filtres button[aria-pressed="true"] { background: var(--carbone); border-color: var(--carbone); color: var(--blanc); }
.filtres button[aria-pressed="true"] b { color: var(--cuivre-pale); }
.projets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.projet { background: var(--blanc); border: 1px solid var(--trait); display: flex; flex-direction: column; }
.projet[hidden] { display: none; }
.projet .visuel { position: relative; aspect-ratio: 4 / 3; background: var(--carbone); overflow: hidden; }
.projet .visuel img { width: 100%; height: 100%; object-fit: cover; }
.sans-photo {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 72% 40%, rgba(199, 154, 114, .25), transparent 62%),
    repeating-linear-gradient(122deg, transparent 0 34px, rgba(199, 154, 114, .13) 34px 35px);
}
.sans-photo::after {
  content: ""; position: absolute; top: -25%; bottom: -25%; right: 16%; width: 20%;
  background: linear-gradient(180deg, #d9a877, #6f4525); transform: skewX(-32deg); opacity: .9;
}
.projet .statut {
  position: absolute; left: 14px; bottom: 14px; padding: 7px 11px;
  font: 600 12px/1 Inter, sans-serif; text-transform: uppercase; letter-spacing: .1em;
}
.projet .statut.en-cours { background: var(--cuivre-pale); color: var(--carbone); }
.projet .statut.realise { background: var(--blanc); color: var(--carbone); }
.projet .statut.en-cours::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; vertical-align: 1px;
  border-radius: 50%; background: var(--carbone); animation: pouls 1.6s ease-in-out infinite;
}
@keyframes pouls { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .projet .statut.en-cours::before { animation: none; } }
.projet .exemple { position: absolute; top: 14px; right: 14px; background: #fff3c4; color: #5b4400; padding: 6px 10px; font: 600 12px/1 Inter, sans-serif; }
.projet .texte { padding: 22px 22px 26px; }
.projet .meta { font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--cuivre); font-weight: 600; }
.projet h3 { margin-top: 10px; font-size: 21px; line-height: 1.2; }
.projet p { margin-top: 10px; font-size: 15.5px; color: var(--texte-doux); }
.bientot { max-width: 62ch; padding: 36px 40px; background: var(--porcelaine); border-left: 4px solid var(--cuivre); }
.bientot h2 { font-size: clamp(26px, 3vw, 34px); color: var(--cuivre); }
.bientot p { margin-top: 12px; }
.bientot .bouton { margin-top: 22px; }

/* --------------------------------------------- Grille des services (sans lien)
   Les 14 services se lisent d'un coup d'œil, sans rien cliquer. */
/* Les traits sont portés par les cases elles-mêmes, et non par le fond de la
   grille : sans ça, la 15e case (vide, puisqu'il y a 14 services) apparaissait
   en gris foncé. */
.grille-services {
  list-style: none; margin: 48px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--trait); border-left: 1px solid var(--trait);
}
.grille-services li {
  background: var(--blanc); padding: 26px 24px 28px;
  border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait);
}
.grille-services h3 { font-size: 19px; display: flex; align-items: flex-start; gap: 11px; line-height: 1.25; }
.grille-services h3::before {
  content: ""; flex: 0 0 auto; margin-top: 3px;
  width: 8px; height: 18px; background: var(--cuivre); transform: skewX(-32deg);
}
.grille-services p { margin-top: 9px; padding-left: 19px; font-size: 15px; color: var(--texte-doux); }

/* ------------------------------------------------------- Bande d'avis Google */
.bande-avis { background: var(--porcelaine); padding: clamp(40px, 6vw, 64px) 0; overflow: hidden; }
.avis-entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; margin-top: 4px; }
.avis-entete b { font-family: Figtree, sans-serif; font-weight: 800; font-size: 34px; color: var(--cuivre); }
.avis-entete span { font-size: 16px; color: var(--texte-doux); }
.avis-entete a { font-size: 15px; font-weight: 600; color: var(--cuivre); text-decoration: none; }
.defile { margin-top: 26px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.piste { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; width: max-content; animation: defiler 46s linear infinite; }
.defile:hover .piste { animation-play-state: paused; }
@keyframes defiler { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.avis { flex: 0 0 auto; width: min(360px, 78vw); background: var(--blanc); border: 1px solid var(--trait); padding: 22px 24px 24px; }
.avis .etoiles { color: #e0a33c; font-size: 16px; letter-spacing: 2px; }
.avis p { margin-top: 10px; font-size: 15.5px; color: var(--texte); }
.avis b { display: block; margin-top: 12px; font-size: 14px; color: var(--texte-doux); font-weight: 600; }
/* Cartes d'exemple (aperçu seulement) : volontairement neutres, pour qu'on ne
   les confonde jamais avec de vrais avis. */
.avis.exemple-avis { background: #f7f5f2; border-style: dashed; }
.avis.exemple-avis .etoiles { color: #c9c2ba; }
.avis.exemple-avis p { color: var(--texte-doux); font-style: italic; }
.avis-note { margin-top: 10px; font-size: 14px; color: var(--texte-doux); }
@media (prefers-reduced-motion: reduce) {
  .piste { animation: none; flex-wrap: wrap; width: auto; }
}

/* ----------------------------------------------------------------- Carrières */
.carrieres { padding: clamp(56px, 8vw, 96px) 0; }
.intro-carrieres { font-size: clamp(19px, 2vw, 23px); font-weight: 300; line-height: 1.55; max-width: 60ch; }
.titre-section { font-size: clamp(30px, 3.6vw, 42px); color: var(--cuivre); margin-top: clamp(40px, 6vw, 64px); }
.atouts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 28px;
  background: var(--trait); border: 1px solid var(--trait);
}
.atout { background: var(--blanc); padding: 28px 26px 30px; }
.atout .num { font: 900 15px/1 Figtree, sans-serif; color: var(--cuivre-pale); letter-spacing: .06em; }
.atout h3 { margin-top: 14px; font-size: 21px; }
.atout p { margin-top: 10px; font-size: 15.5px; color: var(--texte-doux); }

.etapes-embauche { background: var(--carbone); color: var(--porcelaine); padding: clamp(56px, 8vw, 96px) 0; }
.etapes-embauche h2 { font-size: clamp(30px, 3.6vw, 42px); color: var(--cuivre-pale); }
.etapes { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: etape; }
.etapes li { counter-increment: etape; border-top: 2px solid var(--cuivre); padding-top: 18px; }
.etapes li::before { content: counter(etape, decimal-leading-zero); display: block; font: 900 40px/1 Figtree, sans-serif; color: var(--cuivre-pale); }
.etapes b { display: block; margin-top: 12px; font-family: Figtree, sans-serif; font-size: 19px; color: var(--blanc); }
.etapes span { display: block; margin-top: 6px; font-size: 15px; color: rgba(237, 237, 237, .7); }

.postes-section { padding: clamp(56px, 8vw, 96px) 0 0; }
.postes { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.poste {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 26px; border: 1px solid var(--trait); background: var(--blanc); transition: border-color .15s;
}
.poste:hover { border-color: var(--cuivre); }
.poste .type { display: inline-block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--cuivre); }
.poste .exemple { display: inline-block; margin-left: 8px; background: #fff3c4; color: #5b4400; padding: 4px 8px; font-size: 11.5px; font-weight: 600; vertical-align: 1px; }
.poste h3 { margin-top: 8px; font-size: 22px; }
.poste p { margin-top: 8px; font-size: 15.5px; color: var(--texte-doux); max-width: 70ch; }
.poste .bouton { flex: 0 0 auto; }
.spontanee { margin-top: 22px; padding: 20px 24px; background: var(--porcelaine); border-left: 4px solid var(--cuivre); font-size: 16.5px; }

.bandeau-carrieres { position: relative; overflow: hidden; background: var(--porcelaine); padding: clamp(48px, 7vw, 76px) 0; }
.bandeau-carrieres .lame { position: absolute; right: 9%; top: -25%; bottom: -25%; width: 90px; background: var(--cuivre); transform: skewX(-32deg); }
.bandeau-carrieres .enveloppe { position: relative; display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; }
.bandeau-carrieres h2 { font-size: clamp(28px, 3.4vw, 40px); color: var(--cuivre); max-width: 22ch; }
.bandeau-carrieres p { margin-top: 12px; font-size: 18px; color: var(--texte-doux); max-width: 48ch; }
.bandeau-carrieres .bouton { margin-right: clamp(0px, 16vw, 240px); }

/* ------------------------------------------------------ Menu du téléphone */
.menu-bouton { display: none; }
@media (min-width: 961px) and (max-width: 1200px) {
  .entete .rbq { display: none; }
  .nav { gap: 18px; }
  .projets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- Mobile */
@media (max-width: 960px) {
  .nav, .entete .rbq { display: none; }
  .entete .logo img { width: 160px; }
  .entete .bouton { margin-left: auto; }
  .entete .enveloppe { gap: 12px; }
  .menu-bouton {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; padding: 0 11px; flex: 0 0 auto; cursor: pointer;
    background: transparent; border: 1.5px solid rgba(237, 237, 237, .3);
  }
  .menu-bouton span { display: block; height: 2px; background: var(--porcelaine); transition: transform .2s, opacity .2s; }
  body.menu-ouvert .menu-bouton span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.menu-ouvert .menu-bouton span:nth-child(2) { opacity: 0; }
  body.menu-ouvert .menu-bouton span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  body.menu-ouvert .nav {
    display: flex; flex-direction: column; gap: 0; margin: 0;
    position: fixed; left: 0; right: 0; top: 77px; z-index: 60;
    padding: 6px var(--gouttiere) 22px; background: rgba(13, 13, 13, .98);
    border-bottom: 1px solid rgba(237, 237, 237, .12);
  }
  body.menu-ouvert .nav a { padding: 16px 0; font-size: 18px; border-bottom: 1px solid rgba(237, 237, 237, .08); }
  .projets { grid-template-columns: 1fr; }
  .atouts, .etapes, .grille-services { grid-template-columns: 1fr; }
  .poste { flex-direction: column; align-items: flex-start; }
  .bandeau-carrieres .lame { display: none; }
  .bandeau-carrieres .bouton { margin-right: 0; }
  .accueil { min-height: 80vh; padding: 48px 0 60px; }
  .accueil .fond::after {
    background: linear-gradient(180deg,
      rgba(13, 13, 13, .88) 0%, rgba(13, 13, 13, .62) 50%, rgba(13, 13, 13, .9) 100%);
  }
  .mission .grille, .services .tete, .soumission .grille, .contenu .grille { grid-template-columns: 1fr; }
  .mission .photo { order: 2; }
  .engagements, .liste-services { grid-template-columns: 1fr; }
  .liste-services li { border-right: 0 !important; }
  .approche .eclair { width: 120px; opacity: .5; }
  .aparte { position: static; }
  form { grid-template-columns: 1fr; }
  .pied-site .haut { grid-template-columns: 1fr; gap: 28px; }
  .pied-site .badge { width: 120px; top: -60px; }
  .tete-page .lame { display: none; }
}