/* Démo Comptoirs de Granites DB : style propre (clair, lignes fines, angles
   droits, vert forêt de l'Estrie sur blanc pierre). */
@font-face { font-family: "Schibsted Grotesk"; src: url("/ressources/polices/schibsted-grotesk.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/ressources/polices/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --c-fond: #ffffff;
  --c-fond-2: #f2f3f1;
  --c-texte: #15181a;
  --c-texte-doux: #586066;
  --c-trait: rgba(21, 24, 26, .13);
  --c-accent: #0c283e;
  --c-accent-fonce: #071a29;
  --c-accent-clair: #e1e7ed;
  --c-accent-texte: #ffffff;
  --c-sombre: #15181a;
  --c-sombre-texte: #eef0ee;
  --f-titre: "Schibsted Grotesk", system-ui, sans-serif;
  --f-texte: "Figtree", system-ui, sans-serif;
  --rayon: 2px;
  --rayon-bouton: 0;
  --entete-h: 76px;
}
html, body { overflow-x: clip; }
html { scroll-padding-top: 88px; }
body { font-size: 17px; background: var(--c-fond); }
h1, h2, h3 { font-weight: 700; letter-spacing: -.025em; }
h2 { font-size: clamp(30px, 3.6vw, 48px); }
.defs-pierre { position: absolute; width: 0; height: 0; overflow: hidden; }
.surtitre { color: var(--c-accent); gap: 12px; font-family: var(--f-titre); letter-spacing: .12em; }
.surtitre::before { content: ""; width: 14px; height: 14px; background: var(--c-accent); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.chapeau { font-size: clamp(17px, 1.4vw, 19px); }
.titre-rangee { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px 64px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.titre-rangee h2 { margin: 0; max-width: 17ch; }
.titre-rangee .chapeau, .titre-rangee > .lien-fleche { margin: 0; justify-self: start; }
.lien-souligne { color: var(--c-accent); font-weight: 600; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .35s var(--courbe); }
.lien-souligne:hover { background-size: 0 1px; background-position: 100% 100%; }

/* --- Boutons ------------------------------------------------------------- */
.bouton { padding: 17px 22px; font-family: var(--f-titre); font-weight: 600; letter-spacing: -.005em; position: relative; overflow: hidden; isolation: isolate; min-height: 48px; }
.bouton::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-accent-fonce); translate: -101% 0; transition: translate .45s var(--courbe); }
.bouton--sombre::before { background: var(--c-accent); }
.bouton .fleche { width: 18px; height: 18px; }
@media (hover: hover) {
  .bouton:hover::before { translate: 0 0; }
  .bouton:hover { box-shadow: 0 12px 26px -14px rgba(7, 26, 41, .9); }
}
.lien-fleche { font-family: var(--f-titre); color: var(--c-texte); border-bottom: 1px solid var(--c-texte); padding-bottom: 6px; }
.lien-fleche:hover { color: var(--c-accent); border-color: var(--c-accent); }

/* --- En-tête ------------------------------------------------------------- */
.entete { padding-block: 0; background: var(--c-fond); border-bottom: 1px solid var(--c-trait); }
.entete.est-defile { padding-block: 0; background: color-mix(in srgb, var(--c-fond) 94%, transparent); }
.entete-rangee { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--entete-h); transition: height .35s var(--courbe); }
.est-defile .entete-rangee { height: 64px; }
.logo { display: flex; align-items: center; gap: 12px; color: var(--c-texte); }
.logo-marque { width: 46px; height: auto; flex: none; }
.logo-texte { display: flex; flex-direction: column; font: 800 20px/1 var(--f-titre); letter-spacing: -.02em; color: var(--c-accent); }
.logo-texte small { font: 600 10.5px/1 var(--f-texte); letter-spacing: .16em; text-transform: uppercase; color: var(--c-texte-doux); margin-bottom: 4px; }
.nav-ordi { display: flex; gap: 30px; }
.nav-ordi a { position: relative; font-weight: 500; font-size: 15.5px; padding-block: 6px; }
.nav-ordi a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c-accent); scale: 0 1; transform-origin: right; transition: scale .35s var(--courbe); }
.nav-ordi a:hover::after { scale: 1 1; transform-origin: left; }
.entete-actions { display: flex; align-items: center; gap: 18px; }
.entete-tel { display: flex; align-items: center; gap: 8px; font: 600 16px/1 var(--f-titre); }
.entete-tel svg { width: 20px; height: 20px; color: var(--c-accent); }
.entete-tel:hover { color: var(--c-accent); }
.bouton--entete { padding: 14px 18px; min-height: 46px; }
.bouton-menu { border-radius: 0; background: var(--c-texte); width: 46px; height: 46px; display: none; flex-direction: column; gap: 6px; place-content: center; align-items: center; }
.bouton-menu span { display: block; width: 20px; height: 2px; background: var(--c-fond); transition: translate .3s, rotate .3s; }
html.menu-ouvert .bouton-menu span:first-child { translate: 0 4px; rotate: 45deg; }
html.menu-ouvert .bouton-menu span:last-child { translate: 0 -4px; rotate: -45deg; }
.panneau-menu { padding-top: 104px; z-index: 45; }
.panneau-menu a { font-size: 24px; }
.panneau-actions { margin-top: 22px; }
.panneau-actions .bouton { width: 100%; justify-content: space-between; border-bottom: 0; font-size: 18px; padding: 18px 20px; color: #fff; }
@media (max-width: 1080px) { .entete-tel span { display: none; } .nav-ordi { gap: 20px; } }
@media (max-width: 900px) { .bouton-menu { display: flex; } }
@media (max-width: 560px) { .bouton--entete { display: none; } .entete-tel { width: 46px; height: 46px; justify-content: center; border: 1px solid var(--c-trait); } :root { --entete-h: 68px; } }

/* --- Héros --------------------------------------------------------------- */
.heros { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100svh; padding-top: var(--entete-h); }
.heros-texte { padding: clamp(36px, 5vw, 72px) clamp(20px, 4.5vw, 72px) 48px max(var(--gouttiere), calc((100vw - var(--conteneur)) / 2)); display: flex; flex-direction: column; justify-content: center; }
.heros-lieu { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 14px; letter-spacing: .04em; color: var(--c-texte-doux); margin-bottom: 22px; }
.pastille-pierre { width: 22px; height: 22px; background: radial-gradient(circle at 30% 30%, #fff 0 1.2px, transparent 2px), radial-gradient(circle at 70% 60%, #15181a 0 1.5px, transparent 2.2px), radial-gradient(circle at 40% 75%, #586066 0 1.3px, transparent 2px), radial-gradient(circle at 75% 25%, #586066 0 1px, transparent 1.8px), #a9afad; }
.heros h1 { font-size: clamp(38px, 4.9vw, 70px); line-height: 1.02; letter-spacing: -.035em; max-width: 13ch; margin-bottom: 22px; }
.heros h1 em { font-style: normal; position: relative; color: var(--c-accent); }
.heros h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .09em; background: var(--c-accent); scale: 0 1; transform-origin: left; transition: scale .9s 1.1s var(--courbe); }
.heros h1.est-visible em::after { scale: 1 1; }
.heros-chapeau { font-size: clamp(17px, 1.35vw, 19px); color: var(--c-texte-doux); max-width: 48ch; margin-bottom: 30px; }

.echantillons { border: 1px solid var(--c-texte); background: var(--c-fond); padding: 0 22px 22px; max-width: 560px; box-shadow: 10px 10px 0 var(--c-accent-clair); }
.echantillons.est-visible { clip-path: none; }
.echantillons-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 -22px 0; padding: 0 16px 0 0; border-bottom: 1px solid var(--c-texte); }
.echantillons-onglet { background: var(--c-texte); color: var(--c-fond); font: 700 13px/1 var(--f-titre); letter-spacing: .12em; text-transform: uppercase; padding: 13px 18px; }
.echantillons-etape { font-size: 13.5px; font-weight: 600; color: var(--c-texte-doux); }
.echantillons .etapes-barre { height: 3px; border-radius: 0; margin: 0 -22px 20px; }
.echantillons .etapes-barre > span { border-radius: 0; }
.echantillons legend { font: 700 22px/1.2 var(--f-titre); letter-spacing: -.02em; padding: 0; margin-bottom: 4px; }
.echantillons-aide { font-size: 14.5px; color: var(--c-texte-doux); margin: 0 0 14px; }
.grille-echantillons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.choix { border-radius: 0; position: relative; min-height: 48px; }
.choix input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.choix-pierre { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; font-size: 14px; text-align: center; }
.choix-pierre img { width: 100%; height: 74px; display: block; object-fit: cover; transition: scale .5s var(--courbe); }
.choix-pierre > span:last-child { padding: 10px 6px; line-height: 1.2; border-top: 1px solid var(--c-trait); }
.choix-pierre::after { content: ""; position: absolute; inset: 0 auto 0 -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); pointer-events: none; translate: 0 0; transition: translate .8s var(--courbe); }
@media (hover: hover) { .choix-pierre:hover::after { translate: 400% 0; } .choix-pierre:hover img { scale: 1.08; } }
.choix:has(input:checked) { border-color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); }
.choix:has(input:focus-visible) { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.grille-pieces { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.grille-pieces .choix::before { content: ""; width: 16px; height: 16px; border: 1.5px solid currentColor; flex: none; transition: background .2s, box-shadow .2s; }
.grille-pieces .choix:has(input:checked)::before { background: var(--c-accent); border-color: var(--c-accent); box-shadow: inset 0 0 0 3px #fff; }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.champ-etiquette { display: grid; gap: 6px; font-size: 14px; font-weight: 600; margin-top: 12px; }
.champ { border-radius: 0; font-weight: 400; font-size: 16px; }
.echantillons-boutons { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.echantillons-boutons .bouton { margin-left: auto; }
.bouton-retour { border: 0; background: none; padding: 12px 0; min-height: 44px; font-weight: 600; color: var(--c-texte-doux); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.merci { border-radius: 0; border-left: 4px solid var(--c-accent); }

.heros-photo { position: relative; margin: 0; overflow: hidden; min-height: 420px; }
.heros-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 60%; animation: heros-recul 2.4s var(--courbe) both; }
@keyframes heros-recul { from { scale: 1.12; } to { scale: 1; } }
.reflet { position: absolute; inset: -20% auto -20% 0; width: 32%; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.0) 20%, rgba(255,255,255,.32) 50%, rgba(255,255,255,0) 80%, transparent 100%); translate: -120% 0; rotate: 8deg; animation: reflet 7s 1.6s ease-in-out infinite; mix-blend-mode: soft-light; pointer-events: none; }
@keyframes reflet { 0% { translate: -120% 0; } 45%, 100% { translate: 420% 0; } }
.heros-photo img.cuisine-variante { animation: none; opacity: 0; transition: opacity .7s var(--courbe); }
.heros-photo img.cuisine-variante.est-active { opacity: 1; }
.apercu-mobile { display: none; }
@media (max-width: 960px) { .apercu-mobile:not([hidden]) { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-top: 12px; border: 1px solid var(--c-trait); animation: apercu .5s var(--courbe); } }
@keyframes apercu { from { opacity: 0; } }
.heros-photo figcaption { position: absolute; left: 0; bottom: 0; background: var(--c-fond); padding: 18px 24px; font: 700 16px/1 var(--f-titre); display: flex; gap: 12px; align-items: center; }
.heros-photo figcaption::before { content: ""; width: 10px; height: 10px; background: var(--c-accent); }

/* --- Repères (crn : cellules à filets) ------------------------------------ */
.reperes { border-block: 1px solid var(--c-trait); }
.reperes-grille { display: grid; grid-template-columns: repeat(4, 1fr); }
.repere { display: grid; gap: 6px; padding: 28px 24px; border-left: 1px solid var(--c-trait); }
.repere:last-child { border-right: 1px solid var(--c-trait); }
.repere strong { font: 700 clamp(19px, 1.7vw, 24px)/1.1 var(--f-titre); letter-spacing: -.02em; }
.repere span { font-size: 14.5px; color: var(--c-texte-doux); }
.repere--tel { background: var(--c-accent); color: #fff; transition: background .3s; }
.repere--tel span { color: rgba(255,255,255,.8); }
.repere--tel:hover { background: var(--c-accent-fonce); }

/* --- Pierres : explorateur ----------------------------------------------- */
.pierres { background: var(--c-fond-2); }
.explorateur { display: grid; grid-template-columns: 220px minmax(0, 1.25fr) minmax(0, 1fr); border: 1px solid var(--c-texte); background: var(--c-fond); }
.explorateur.est-visible { clip-path: none; }
.explorateur-onglets { display: flex; flex-direction: column; border-right: 1px solid var(--c-texte); }
.explorateur-onglets button { display: flex; align-items: baseline; gap: 14px; text-align: left; padding: 24px 22px; border: 0; border-bottom: 1px solid var(--c-trait); background: none; cursor: pointer; font: 700 21px/1 var(--f-titre); letter-spacing: -.02em; position: relative; transition: background .3s, color .3s; min-height: 48px; }
.explorateur-onglets button span { font: 600 12px/1 var(--f-texte); color: var(--c-texte-doux); letter-spacing: .1em; }
.explorateur-onglets button::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c-accent); scale: 1 0; transition: scale .4s var(--courbe); }
.explorateur-onglets button[aria-selected="true"] { background: var(--c-accent-clair); color: var(--c-accent-fonce); }
.explorateur-onglets button[aria-selected="true"]::after { scale: 1 1; }
.explorateur-onglets button:hover { background: var(--c-fond-2); }
.dalle { position: relative; min-height: 440px; overflow: hidden; border-right: 1px solid var(--c-texte); background: #ccc; }
.dalle-svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; scale: 1.06; transition: opacity .7s var(--courbe), scale 1.2s var(--courbe); }
.dalle-svg.est-active { opacity: 1; scale: 1; }
img.dalle-svg { object-fit: cover; }
.dalle-polissage { position: absolute; inset: -10% auto -10% 0; width: 45%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.5) 50%, transparent); translate: -120% 0; mix-blend-mode: overlay; pointer-events: none; }
.dalle.polit .dalle-polissage { animation: polir 1.1s var(--courbe); }
@keyframes polir { from { translate: -120% 0; } to { translate: 330% 0; } }
.dalle-nom { position: absolute; left: 18px; bottom: 18px; background: var(--c-fond); padding: 10px 14px; font: 700 15px/1 var(--f-titre); letter-spacing: .02em; }
.fiche { padding: 30px 28px; display: flex; flex-direction: column; }
.fiche-type { font: 700 12.5px/1 var(--f-titre); letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); }
.fiche-texte { font-size: 17px; }
.fiche-jauges { margin: 8px 0 18px; display: grid; gap: 0; }
.fiche-jauges > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--c-trait); }
.fiche-jauges dt { font-weight: 600; font-size: 15px; }
.fiche-jauges dd { margin: 0; }
.jauge { display: flex; gap: 4px; }
.jauge i { width: 26px; height: 8px; background: var(--c-trait); position: relative; overflow: hidden; }
.jauge i::after { content: ""; position: absolute; inset: 0; background: var(--c-accent); scale: 0 1; transform-origin: left; transition: scale .5s var(--courbe); }
.jauge i:nth-child(1)::after { transition-delay: .05s; } .jauge i:nth-child(2)::after { transition-delay: .15s; } .jauge i:nth-child(3)::after { transition-delay: .25s; }
.explorateur.est-visible .jauge[style*="--n:1"] i:nth-child(-n+1)::after,
.explorateur.est-visible .jauge[style*="--n:2"] i:nth-child(-n+2)::after,
.explorateur.est-visible .jauge[style*="--n:3"] i:nth-child(-n+3)::after { scale: 1 1; }
.fiche-conseil { font-size: 15.5px; background: var(--c-fond-2); padding: 14px 16px; border-left: 3px solid var(--c-accent); }
.fiche-note { font-size: 13px; color: var(--c-texte-doux); margin: auto 0 0; }
.fiche.change > * { animation: fiche-entre .5s var(--courbe) both; }
.fiche.change > *:nth-child(2) { animation-delay: .05s; } .fiche.change > *:nth-child(3) { animation-delay: .1s; } .fiche.change > *:nth-child(4) { animation-delay: .15s; }
@keyframes fiche-entre { from { opacity: 0; translate: 0 10px; } }

/* --- Services : rangées numérotées ---------------------------------------- */
.liste-services { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-texte); }
.service { display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 360px); gap: 28px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--c-trait); position: relative; }
@media (hover: hover) { .service.carte-survol:hover { translate: none; box-shadow: none; } }
.service::before { content: ""; position: absolute; inset: 0 -24px; background: var(--c-fond-2); z-index: -1; opacity: 0; transition: opacity .4s; }
.service:hover::before { opacity: 1; }
.service-no { font: 700 15px/1 var(--f-titre); color: var(--c-accent); letter-spacing: .08em; align-self: start; padding-top: 8px; transition: translate .4s var(--courbe); }
.service:hover .service-no { translate: 10px 0; }
.service h3 { font-size: clamp(22px, 2.2vw, 30px); margin-bottom: 10px; }
.service p { color: var(--c-texte-doux); max-width: 56ch; margin-bottom: 14px; }
.etiquettes { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.etiquettes li { font-size: 13px; font-weight: 600; padding: 6px 10px; border: 1px solid var(--c-trait); }
.service-image { aspect-ratio: 3 / 2; border-radius: 0; clip-path: inset(0 0 0 30%); transition: clip-path .7s var(--courbe); }
.service:hover .service-image, .service:focus-within .service-image { clip-path: inset(0); }
@media (hover: none) { .service-image { clip-path: none; } }

/* --- Couleurs et modèles (accueil) ----------------------------------------- */
.produits { background: var(--c-sombre); color: var(--c-sombre-texte); }
.produits .surtitre { color: #a9c1d6; } .produits .surtitre::before { background: #a9c1d6; }
.produits .chapeau { color: rgba(238,240,238,.78); }
.produits-familles { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.produits-familles a { display: flex; align-items: baseline; gap: 8px; padding: 10px 16px; border: 1px solid rgba(238,240,238,.28); font-weight: 600; transition: border-color .25s, background .25s, color .25s; }
.produits-familles strong { font: 800 20px/1 var(--f-titre); color: #a9c1d6; }
.produits-familles a:hover { border-color: #fff; background: rgba(238,240,238,.06); }
.produits-grille { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 14px; }
.produit { display: grid; gap: 4px; }
.produit img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 8px; transition: scale .6s var(--courbe), filter .4s; }
.produit strong { font: 700 15.5px/1.2 var(--f-titre); }
.produit span { font-size: 13px; color: rgba(238,240,238,.62); }
@media (hover: hover) { .produit { overflow: visible; } .produit:hover img { scale: 1.04; } .produit:hover strong { color: #a9c1d6; } }
.produits-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: clamp(32px, 4vw, 48px); padding-top: 28px; border-top: 1px solid rgba(238,240,238,.14); }
.produits-pied p { margin: 0; font-size: 15px; color: rgba(238,240,238,.65); }
.produits-pied a.lien-souligne { color: var(--c-sombre-texte); }
@media (max-width: 1100px) { .produits-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } .produits-grille li:nth-child(n+9) { display: none; } }
@media (max-width: 640px) { .produits-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } .produits-grille li:nth-child(n+7) { display: none; } .produits-familles a { padding: 8px 12px; font-size: 14.5px; } }

/* --- Étapes : trait de coupe ---------------------------------------------- */
.coupe-piste { --avance: 0; position: relative; }
.coupe-ligne { position: relative; height: 48px; margin-bottom: 26px; }
.coupe-ligne::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: repeating-linear-gradient(90deg, var(--c-texte) 0 8px, transparent 8px 14px); opacity: .35; }
.coupe-progression { position: absolute; left: 0; top: calc(50% - 1.5px); height: 3px; width: calc(var(--avance) * 100%); background: var(--c-accent); }
.lame { position: absolute; top: 0; left: calc(var(--avance) * (100% - 48px)); width: 48px; height: 48px; color: var(--c-texte); }
.lame svg { width: 100%; height: 100%; animation: lame 1.2s linear infinite; }
.lame::after { content: ""; position: absolute; right: -10px; top: 6px; width: 16px; height: 16px; background: radial-gradient(circle, rgba(12,40,62,.45) 0 2px, transparent 3px) 0 0 / 6px 6px; opacity: calc(var(--avance) * 10); animation: poussiere .6s linear infinite; }
@keyframes lame { to { rotate: 360deg; } }
@keyframes poussiere { to { translate: 6px -4px; opacity: 0; } }
.etapes-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid var(--c-trait); }
.etape { padding: 6px 24px 10px; border-right: 1px solid var(--c-trait); opacity: .35; translate: 0 14px; transition: opacity .6s var(--courbe), translate .6s var(--courbe); }
.etape.est-coupee { opacity: 1; translate: none; }
.etape-no { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--c-texte); font: 700 16px/1 var(--f-titre); margin-bottom: 18px; transition: background .4s, color .4s, border-color .4s; }
.etape.est-coupee .etape-no { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.etape h3 { font-size: 21px; }
.etape p { color: var(--c-texte-doux); font-size: 16px; margin: 0; }

/* --- Entreprise ------------------------------------------------------------ */
.entreprise { background: var(--c-fond-2); }
.entreprise-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.entreprise-photo { aspect-ratio: 4 / 5; border-radius: 0; position: relative; }
.entreprise-photo img { position: absolute; left: 0; width: 100%; top: -8%; height: 116%; object-fit: cover; }
.entreprise-texte h2 { max-width: 16ch; }
.entreprise-texte p { color: var(--c-texte-doux); font-size: 18px; max-width: 52ch; }
.liste-coches { list-style: none; padding: 0; margin: 24px 0 0; border-top: 1px solid var(--c-trait); }
.liste-coches li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--c-trait); font-weight: 600; }
.liste-coches li::before { content: ""; width: 18px; height: 10px; border-left: 2px solid var(--c-accent); border-bottom: 2px solid var(--c-accent); rotate: -45deg; translate: 0 -3px; flex: none; }

/* --- FAQ ------------------------------------------------------------------- */
.faq-grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 90px); align-items: start; }
.faq-grille > div:first-child { position: sticky; top: 110px; }
[data-faq] { border-top: 1px solid var(--c-texte); }
.faq-item summary { font-size: clamp(17px, 1.4vw, 20px); transition: color .25s, padding .35s var(--courbe); min-height: 48px; }
.faq-item summary:hover { color: var(--c-accent); padding-left: 8px; }
.faq-item .plus { width: 34px; height: 34px; border: 1px solid var(--c-trait); }
.faq-item .plus::before, .faq-item .plus::after { inset: 50% 9px auto; }
.faq-item[open] .plus { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }

/* --- Contact --------------------------------------------------------------- */
.contact { border-top: 1px solid var(--c-trait); }
.contact-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); }
.coordonnees { list-style: none; padding: 0; margin: 8px 0 24px; border-top: 1px solid var(--c-trait); }
.coordonnees li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--c-trait); overflow-wrap: anywhere; }
.coordonnees span { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-texte-doux); padding-top: 3px; }
.coordonnees a { font-weight: 600; }
.coordonnees a:hover { color: var(--c-accent); }
.carte { border: 1px solid var(--c-texte); aspect-ratio: 16 / 10; }
.carte iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.4); }
.formulaire { border: 1px solid var(--c-texte); padding: clamp(22px, 3vw, 36px); align-self: start; box-shadow: 10px 10px 0 var(--c-accent-clair); }
.formulaire.est-visible { clip-path: none; }
.formulaire h3 { font-size: 26px; }
.formulaire textarea { resize: vertical; }
.formulaire .bouton { margin-top: 18px; width: 100%; justify-content: space-between; }
.formulaire-note { font-size: 13.5px; color: var(--c-texte-doux); margin: 12px 0 0; }
.champ.rempli { animation: rempli 1.2s var(--courbe); }
@keyframes rempli { 0% { box-shadow: 0 0 0 6px var(--c-accent-clair); border-color: var(--c-accent); } }

/* --- Appel final ------------------------------------------------------------ */
.appel-final { position: relative; overflow: hidden; color: #fff; padding-block: clamp(90px, 14vw, 180px); isolation: isolate; }
.appel-final-fond { position: absolute; left: 0; width: 100%; top: -10%; height: 120%; object-fit: cover; z-index: -2; }
.appel-final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,22,35,.88) 0%, rgba(7,22,35,.6) 55%, rgba(7,22,35,.25) 100%); }
.appel-final h2 { font-size: clamp(34px, 4.6vw, 64px); max-width: 15ch; }
.appel-final-actions { display: flex; align-items: center; gap: 22px; margin-top: 28px; }
.appel-final .appel-ondes { background: #fff; color: var(--c-accent-fonce); }
.appel-final .appel-ondes::before, .appel-final .appel-ondes::after { border-color: #fff; }
.appel-final-tel { display: flex; flex-direction: column; font: 800 clamp(28px, 3vw, 40px)/1.05 var(--f-titre); letter-spacing: -.02em; }
.appel-final-tel small { font: 600 14px/1.4 var(--f-texte); letter-spacing: .12em; text-transform: uppercase; opacity: .8; }

/* --- Pied de page ------------------------------------------------------------ */
.pied { background: var(--c-sombre); color: var(--c-sombre-texte); padding-top: 72px; }
.pied-grille { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(238,240,238,.14); }
.pied-nom { font: 800 22px/1.1 var(--f-titre); }
.pied-desc { color: rgba(238,240,238,.65); max-width: 36ch; }
.pied-liens { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; align-content: start; }
.pied-liens a, .pied-coord a { padding: 8px 0; color: rgba(238,240,238,.82); transition: color .25s, translate .25s; width: fit-content; }
.pied-liens a:hover, .pied-coord a:hover { color: #a9c1d6; translate: 4px 0; }
.pied-coord { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.pied-coord span { color: rgba(238,240,238,.65); padding-top: 8px; }
.pied-grave { margin: 0; padding-top: 28px; font: 800 clamp(44px, 13.4vw, 196px)/.86 var(--f-titre); letter-spacing: -.05em; white-space: nowrap; color: #22272a; text-shadow: 0 -1px 0 #000, 0 1px 0 rgba(255,255,255,.09); overflow: hidden; }
.pied-grave .lettre { display: inline-block; translate: 0 100%; transition: translate .9s var(--courbe); transition-delay: calc(var(--i) * 55ms); }
.pied-grave.grave .lettre { translate: none; }
.pied-bas { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 0 28px; font-size: 14px; color: rgba(238,240,238,.6); border-top: 1px solid rgba(238,240,238,.14); }
.credit-b2web a:hover { color: #a9c1d6; }

/* --- Tablette ----------------------------------------------------------------- */
@media (max-width: 1100px) {
  .explorateur { grid-template-columns: 1fr 1fr; }
  .explorateur-onglets { grid-column: 1 / -1; flex-direction: row; border-right: 0; border-bottom: 1px solid var(--c-texte); overflow-x: auto; }
  .explorateur-onglets button { flex: 1; border-bottom: 0; border-right: 1px solid var(--c-trait); justify-content: center; font-size: 18px; padding: 18px 12px; }
  .explorateur-onglets button::after { inset: auto 0 0 0; width: auto; height: 4px; scale: 0 1; }
  .explorateur-onglets button[aria-selected="true"]::after { scale: 1 1; }
}
@media (max-width: 960px) {
  .heros { grid-template-columns: 1fr; min-height: 0; }
  .heros-texte { padding: 36px var(--gouttiere) 32px; }
  .heros h1 { max-width: 14ch; }
  .heros-photo { min-height: 0; aspect-ratio: 4 / 3; }
  .echantillons { max-width: none; }
  .titre-rangee { grid-template-columns: 1fr; }
  .reperes-grille { grid-template-columns: 1fr 1fr; }
  .repere { border-bottom: 1px solid var(--c-trait); }
  .repere:nth-child(2) { border-right: 1px solid var(--c-trait); }
  .service { grid-template-columns: 56px minmax(0, 1fr); }
  .service-image { grid-column: 2; }
  .entreprise-grille, .faq-grille, .contact-grille { grid-template-columns: 1fr; }
  .faq-grille > div:first-child { position: static; }
  .etapes-liste { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .pied-grille > div:first-child { grid-column: 1 / -1; }
  .entreprise-photo { aspect-ratio: 4 / 3; }
}

/* --- Téléphone ------------------------------------------------------------------ */
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .heros-texte { padding-top: 26px; }
  .heros-lieu { font-size: 13px; margin-bottom: 16px; }
  .heros h1 { font-size: clamp(34px, 10vw, 44px); margin-bottom: 16px; }
  .heros-chapeau { margin-bottom: 24px; font-size: 16.5px; }
  .echantillons { padding: 0 16px 16px; box-shadow: 6px 6px 0 var(--c-accent-clair); }
  .echantillons-tete, .echantillons .etapes-barre { margin-inline: -16px; }
  .echantillons legend { font-size: 20px; }
  .choix-pierre img { height: 58px; }
  .grille-pieces, .champs-2 { grid-template-columns: 1fr; }
  .heros-photo { aspect-ratio: 5 / 4; }
  .heros-photo figcaption { font-size: 14px; padding: 14px 18px; }
  .repere { padding: 20px 16px; }
  .explorateur { grid-template-columns: 1fr; }
  .explorateur-onglets button { font-size: 15px; padding: 16px 6px; flex-direction: column; align-items: center; gap: 6px; }
  .dalle { min-height: 220px; border-right: 0; border-bottom: 1px solid var(--c-texte); }
  .fiche { padding: 22px 18px; }
  .service { grid-template-columns: 1fr; gap: 14px; padding: 24px 0; }
  .service-no { padding-top: 0; }
  .service-image { grid-column: 1; }
  .etapes-liste { grid-template-columns: 1fr; border-left: 0; }
  .etape { border-right: 0; border-left: 1px solid var(--c-trait); padding: 0 0 0 20px; }
  .coordonnees li { grid-template-columns: 1fr; gap: 2px; }
  .appel-final-actions { gap: 18px; }
  .pied-grille { grid-template-columns: 1fr; }
  .pied-bas { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .reflet, .lame svg { animation: none !important; }
  .etape { opacity: 1; translate: none; }
  .pied-grave .lettre { translate: none; }
}