/* lab-atelier.com. Charte reprise de acrealab.com/smartwebexport (thème clair,
   vert d'eau du logo) pour que les deux sites se reconnaissent.
   Certaines pages s'ouvrent dans les fenêtres de SketchUp, dont le navigateur
   intégré peut être ancien (SketchUp 2020) : les largeurs utilisent
   max-width + marges plutôt que min(), et les tailles clamp() ont une valeur
   de repli juste avant. */
:root {
  --fond: #fbfbf9;
  --fond-teinte: #f1f5f3;
  --carte: #ffffff;
  --encre: #15191c;
  --texte: #3b444c;
  --doux: #66707a;
  --trait: #e3e8e6;
  --accent: #4eac9e;
  --accent-fonce: #2b7f73;
  --accent-pale: #e3f3ef;
  --sombre: #0f1513;
  --rayon: 18px;
  --ombre: 0 1px 2px rgba(16, 24, 22, .05), 0 12px 32px -12px rgba(16, 24, 22, .18);
  --police: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 16px/1.6 var(--police); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* « height: auto » : les images portent leurs attributs width et height ;
   sans cette règle, une image rétrécie garde la hauteur de l'attribut. */
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--accent-fonce); }
h1, h2, h3 { color: var(--encre); line-height: 1.15; margin: 0; letter-spacing: -.02em; }
h2 { font-size: 34px; font-size: clamp(26px, 3.6vw, 40px); font-weight: 700; max-width: 22ch; }
h3 { font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--encre); color: #fff; border-radius: 10px; }
.evitement:focus { top: 12px; }

.enveloppe { max-width: 1220px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
.enveloppe-etroite { max-width: 860px; }
.ico { width: 20px; height: 20px; flex: none; }

/* ── Boutons ─────────────────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 12px; border: 1.5px solid transparent;
  font-weight: 650; font-size: 15px; text-decoration: none; text-align: center;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bouton:hover { transform: translateY(-1px); }
.bouton-plein { background: var(--encre); color: #fff; box-shadow: 0 8px 20px -10px rgba(15, 21, 19, .6); }
.bouton-plein:hover { background: #000; }
.bouton-contour { border-color: var(--trait); color: var(--encre); background: var(--carte); }
.bouton-contour:hover { border-color: var(--encre); }
.bouton-texte { color: var(--encre); padding-left: 8px; padding-right: 8px; }
.bouton-texte:hover { color: var(--accent-fonce); }
.bouton-clair { background: #fff; color: var(--encre); }
.bouton-fantome { border-color: rgba(255, 255, 255, .45); color: #fff; }
.bouton-fantome:hover { border-color: #fff; }
.bouton-grand { padding: 15px 26px; font-size: 16px; border-radius: 14px; }
.bouton-petit { padding: 9px 15px; font-size: 14px; border-radius: 10px; }
.ico-pas { width: 18px; height: 18px; transition: transform .15s ease; }
.bouton:hover .ico-pas, .lien-fleche:hover .ico-pas { transform: translateX(3px); }
.boutons, .hero-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hero-boutons { margin-top: 30px; }
.lien-fleche { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; text-decoration: none; }
.suite { margin-top: 18px; }

/* ── En-tête ─────────────────────────────────────────────────────────── */
.entete {
  position: sticky; top: 0; z-index: 20;
  background: rgba(251, 251, 249, .9); backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid rgba(227, 232, 230, .8);
}
.entete-ligne { display: flex; align-items: center; gap: 28px; height: 68px; }
.marque { display: inline-flex; align-items: center; gap: 10px; color: var(--encre); text-decoration: none; font-weight: 750; letter-spacing: -.01em; white-space: nowrap; }
.marque em { font-style: normal; color: var(--accent-fonce); }
.marque-ico { width: 30px; height: 30px; }
.nav { display: flex; gap: 24px; margin-right: auto; }
.nav a { color: var(--texte); text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap; }
.nav a:hover, .nav a[aria-current] { color: var(--encre); }
.nav a[aria-current] { font-weight: 650; }
.entete-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.langues { position: relative; }
.langues summary { font-size: 13px; font-weight: 650; color: var(--doux); padding: 6px 8px; border-radius: 8px; letter-spacing: .04em; }
.langues summary:hover { color: var(--encre); background: var(--fond-teinte); }
.langues-liste {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 170px; padding: 6px; z-index: 30;
  background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; box-shadow: var(--ombre); display: grid;
}
.langues-liste a { padding: 9px 12px; border-radius: 8px; color: var(--encre); text-decoration: none; font-size: 15px; }
.langues-liste a:hover { background: var(--fond-teinte); }
.langues-liste a[aria-current] { color: var(--accent-fonce); font-weight: 650; }
.langue { font-size: 13px; font-weight: 650; color: var(--doux); padding: 6px 8px; border-radius: 8px; letter-spacing: .04em; text-decoration: none; }
.langue:hover { color: var(--encre); background: var(--fond-teinte); }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.menu-mobile { display: none; position: relative; }
.menu-mobile summary { display: grid; gap: 4px; padding: 10px 8px; }
.menu-mobile summary span { display: block; width: 20px; height: 2px; background: var(--encre); border-radius: 2px; }
.menu-mobile-liste {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; padding: 6px;
  background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; box-shadow: var(--ombre);
  display: grid;
}
.menu-mobile-liste a { padding: 10px 12px; border-radius: 8px; color: var(--encre); text-decoration: none; font-size: 15px; }
.menu-mobile-liste a:hover { background: var(--fond-teinte); }
.menu-mobile-liste a[aria-current] { color: var(--accent-fonce); font-weight: 650; }

/* ── Haut de page ────────────────────────────────────────────────────── */
.hero, .bandeau { position: relative; overflow: hidden; }
.hero { padding: 72px 0 64px; }
.bandeau { padding: 56px 0 64px; }
.hero::before, .bandeau::before {
  content: ""; position: absolute; top: -30%; left: 35%; right: -10%; height: 900px; z-index: -1;
  background: radial-gradient(closest-side, rgba(78, 172, 158, .2), rgba(78, 172, 158, 0));
}
.hero::after, .bandeau::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -2; opacity: .55;
  background-image: linear-gradient(var(--trait) 1px, transparent 1px), linear-gradient(90deg, var(--trait) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000 10%, transparent 65%);
  mask-image: radial-gradient(ellipse at 30% 20%, #000 10%, transparent 65%);
}
.hero-grille, .bandeau-grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.formats {
  display: inline-block; font-size: 13px; font-weight: 650; letter-spacing: .06em; color: var(--accent-fonce);
  background: var(--accent-pale); border: 1px solid rgba(78, 172, 158, .28); padding: 6px 12px; border-radius: 999px;
}
.hero h1 { font-size: 52px; font-size: clamp(36px, 5vw, 62px); font-weight: 780; margin: 22px 0; letter-spacing: -.035em; line-height: 1.02; }
.hero h1 em, .bandeau h1 em { font-style: normal; color: var(--accent-fonce); }
.bandeau h1 { font-size: 44px; font-size: clamp(32px, 4.4vw, 54px); font-weight: 760; letter-spacing: -.03em; line-height: 1.05; margin-bottom: 18px; }
.chapeau { font-size: 18px; font-size: clamp(17px, 1.6vw, 19px); max-width: 36em; color: var(--texte); }
.hero-visuel, .bandeau-visuel { margin: 0; }
.hero-visuel img, .bandeau-visuel img { width: 100%; border-radius: 22px; border: 1px solid var(--trait); box-shadow: 0 30px 70px -30px rgba(16, 40, 34, .45); background: var(--carte); }
.hero-visuel figcaption, .bandeau-visuel figcaption, .figure figcaption { margin-top: 12px; font-size: 13.5px; color: var(--doux); }
.bandeau-portrait { max-width: 380px; justify-self: center; }
.fil { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; font-size: 14px; color: var(--doux); }
.fil a { color: var(--doux); text-decoration: none; }
.fil a:hover { color: var(--encre); text-decoration: underline; }
.surtitre { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-fonce); margin-bottom: 14px; }

/* ── Sections ────────────────────────────────────────────────────────── */
.section { padding: 96px 0; scroll-margin-top: 68px; }
.section-serree { padding: 56px 0; }
.section-teinte { background: var(--fond-teinte); }
.section-sombre { background: var(--sombre); color: #c9d3cf; }
.section-sombre h2 { color: #fff; }
.texte h2 { margin-bottom: 20px; }
.texte p + p { margin-top: 14px; }
.texte ul + p, .texte p + ul { margin-top: 14px; }
.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.figure { margin: 0; }
.figure img { width: 100%; border-radius: var(--rayon); border: 1px solid var(--trait); background: var(--carte); }
.figure-portrait { max-width: 380px; justify-self: center; }
.deux-colonnes.inverse > .texte { order: 2; }
.deux-colonnes .coches { margin-top: 18px; }
/* Images agrandissables à côté d'un texte (livrables de Pilot) : pleine
   image, sans recadrage. */
.galerie.galerie-empilee { margin-top: 0; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.galerie-empilee .vignette img { aspect-ratio: auto; object-fit: contain; background: #fff; }

/* Produits : le premier (Smart Web Export) en grand, les deux suivants côte à côte. */
.produits { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.produit { background: var(--carte); border: 1px solid var(--trait); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease; }
.produit:hover { box-shadow: var(--ombre); transform: translateY(-2px); }
.produit-phare { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); border: 2px solid var(--accent); box-shadow: 0 24px 50px -28px rgba(43, 127, 115, .55); }
.produit-visuel { display: block; background: #eef1f0; }
.produit-visuel img { width: 100%; height: 100%; object-fit: cover; }
.produit-corps { padding: 26px 28px 28px; }
.produit-phare .produit-corps { padding: 40px 40px 36px; align-self: center; }
.produit-etiquette { font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-fonce); margin-bottom: 8px; }
.produit h3 { font-size: 24px; }
.produit-phare h3 { font-size: 30px; }
.produit-accroche { margin: 8px 0 12px; font-weight: 650; color: var(--encre); }
/* Les trois produits en grande carte, le visuel alterne de côté. */
.produit-inverse .produit-visuel { order: 2; }
.produit-inverse { border-color: var(--trait); box-shadow: none; }
.produit-phare.produit-inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.produit-prix { margin-top: 14px; font-size: 14.5px; font-weight: 650; color: var(--accent-fonce); }
.produit .suite { margin-top: 20px; }

/* Prix dans le bandeau d'une page produit. */
.prix-ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 22px; }
.prix-ligne strong { font-size: 30px; font-weight: 780; color: var(--encre); letter-spacing: -.02em; }
.prix-ligne span { font-size: 15px; color: var(--doux); }
.intro { margin-top: 14px; font-size: 18px; color: var(--doux); max-width: 40em; }

/* Bande d'atouts. */
.atouts-section { padding-top: 8px; }
.atouts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.atouts li { display: flex; gap: 12px; align-items: flex-start; padding: 20px; background: var(--carte); border: 1px solid var(--trait); border-radius: 18px; }
.atouts h3 { font-size: 16px; }
.atouts p { margin-top: 4px; font-size: 14.5px; color: var(--doux); }
.atout-ico { width: 32px; height: 32px; padding: 7px; border-radius: 10px; background: var(--accent-pale); color: var(--accent-fonce); stroke-width: 2.4; }

/* Étapes en cartes numérotées. */
.etapes { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.etape { position: relative; padding: 26px 24px; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); }
.etape-num { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px; border-radius: 12px; background: var(--encre); color: #fff; font-weight: 750; }
.etape p { margin-top: 8px; font-size: 15px; }

/* Fonctions regroupées. */
.groupes { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.groupe { padding: 26px 24px; background: var(--carte); border: 1px solid var(--trait); border-radius: 20px; }
.groupe h3 { font-size: 19px; padding-bottom: 12px; border-bottom: 2px solid var(--accent-pale); }
.groupe .coches { margin-top: 14px; gap: 9px; }
.groupe .coches li { font-size: 15px; color: var(--texte); }

/* Contrôle de fabricabilité (section sombre). */
.controle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.controle .surtitre { color: #7fd0c3; }
.controle .coches li { color: #dbe5e1; font-size: 15.5px; }
.controle .coche { color: #7fd0c3; }
.galerie-controle { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.section-sombre .vignette figcaption { color: #9fb1ab; }

.bande-pilot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; align-items: center; padding: 32px; border: 1px solid var(--trait); border-radius: 26px; background: var(--carte); }
.bande-pilot figure { margin: 0; }
.bande-pilot img { border-radius: 16px; width: 100%; }
.bande-pilot h2 { margin-bottom: 14px; }

.fonctions { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--trait); border: 1px solid var(--trait); border-radius: 22px; overflow: hidden; }
.fonctions-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fonction { background: var(--carte); padding: 28px 26px; }
.fonction p { margin-top: 8px; font-size: 15px; color: var(--doux); }

.galerie { margin-top: 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.galerie-petite .vignette img { background: #fff; }
.vignette { margin: 0; }
.vignette a { position: relative; display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--trait); background: var(--carte); }
.vignette img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .3s ease; }
.vignette a:hover img { transform: scale(1.03); }
.ico-loupe { position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; padding: 5px; border-radius: 9px; background: rgba(255, 255, 255, .92); color: var(--encre); }
.vignette figcaption { margin-top: 8px; font-size: 14px; color: var(--doux); }

.video { position: relative; display: block; margin-top: 28px; border-radius: 20px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
.video img { width: 100%; transition: transform .3s ease, opacity .3s ease; opacity: .85; }
.video:hover img { transform: scale(1.02); opacity: 1; }
.video-lecture { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 14px; background: #fff; color: var(--encre); font-weight: 650; white-space: nowrap; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .55); }
.video-lecture .ico { width: 24px; height: 24px; color: var(--accent-fonce); }

.coches { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.coches li { display: flex; gap: 10px; align-items: flex-start; color: var(--encre); }
.coche { width: 18px; height: 18px; margin-top: 4px; color: var(--accent-fonce); stroke-width: 2.4; }

.specs { margin: 28px 0 0; border-top: 1px solid var(--trait); }
.specs div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--trait); }
.specs dt { font-weight: 650; color: var(--encre); }
.specs dd { margin: 0; }

.fichiers { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fichiers a { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border: 1.5px solid var(--trait); border-radius: 14px; background: var(--carte); color: var(--encre); text-decoration: none; font-weight: 600; }
.fichiers a:hover { border-color: var(--accent); }
.fichiers .ico { color: var(--accent-fonce); width: 26px; height: 26px; }
.fichiers small { display: block; font-weight: 500; font-size: 13px; color: var(--doux); }

.faq { margin-top: 28px; border-top: 1px solid var(--trait); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary { position: relative; padding: 22px 44px 22px 0; font-size: 17px; font-weight: 650; color: var(--encre); }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--doux); border-bottom: 2px solid var(--doux); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 44px 22px 0; }

.etapes-liste { list-style: none; padding: 0; margin: 24px 0 0; counter-reset: etape; display: grid; gap: 22px; }
.etapes-liste li { position: relative; padding-left: 52px; counter-increment: etape; }
.etapes-liste li::before { content: counter(etape); position: absolute; left: 0; top: -2px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-pale); color: var(--accent-fonce); font-weight: 750; }
.etapes-liste p { margin-top: 6px; }

.autres { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.autres a { display: block; padding: 14px 16px; border: 1.5px solid var(--trait); border-radius: 14px; background: var(--carte); text-decoration: none; }
.autres a:hover { border-color: var(--accent); }
.autres strong { display: block; color: var(--encre); }
.autres span { color: var(--doux); font-size: 15px; }
.ligne { display: flex; gap: 10px; align-items: flex-start; }
.ligne .ico { color: var(--accent-fonce); margin-top: 3px; }

/* ── Appel final ─────────────────────────────────────────────────────── */
.final { padding-top: 0; }
.section + .final, .section-teinte + .final { padding-top: 96px; }
.final-boite {
  padding: 64px 40px; border-radius: 28px; text-align: center; color: #d8ece7;
  background: radial-gradient(120% 140% at 10% 0%, #3f9d90 0%, #1f5c54 45%, #0f2a26 100%);
  box-shadow: 0 40px 80px -40px rgba(15, 42, 38, .8);
}
.final-boite h2 { color: #fff; margin-left: auto; margin-right: auto; max-width: 24ch; }
.final-boite p { margin: 16px auto 30px; font-size: 18px; max-width: 36em; }
.final-boite a:not(.bouton) { color: #fff; }
.final-boite .boutons { justify-content: center; }

/* ── Formulaires ─────────────────────────────────────────────────────── */
.contact-grille { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.formulaire { display: grid; gap: 18px; padding: 32px; background: var(--carte); border: 1px solid var(--trait); border-radius: 22px; box-shadow: var(--ombre); }
.champs-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.champ { display: grid; gap: 6px; }
.champ label { font-weight: 650; color: var(--encre); font-size: 15px; }
.requis { color: var(--accent-fonce); }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--trait); border-radius: 12px;
  background: var(--fond); color: var(--encre); font: inherit;
}
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-pale); }
.champ [aria-invalid="true"] { border-color: #c0392b; }
.champ input[type="file"] { padding: 10px; background: var(--carte); }
.aide { display: flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--doux); }
.aide .ico { width: 16px; height: 16px; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.rgpd { font-size: 13.5px; color: var(--doux); }
.formulaire .bouton { justify-self: start; }
.formulaire-etat:empty { display: none; }
.formulaire-etat { padding: 12px 14px; border-radius: 12px; background: var(--fond-teinte); color: var(--encre); }
.formulaire-etat.erreur { background: #fdecea; color: #8a2a1f; }
.contact-aparte { display: grid; gap: 14px; padding-top: 8px; }
.contact-aparte h2 { font-size: 26px; }

/* ── Politique de confidentialité et mentions ────────────────────────── */
.politique h2 { font-size: 24px; margin: 36px 0 14px; max-width: none; }
.politique h3 { margin: 24px 0 10px; }
.politique p, .politique ul, .politique ol { margin: 0 0 12px; }
.politique hr { border: 0; border-top: 1px solid var(--trait); margin: 32px 0; }
.politique table { width: 100%; border-collapse: collapse; margin: 12px 0 18px; font-size: 15px; display: block; overflow-x: auto; }
.politique th, .politique td { border: 1px solid var(--trait); padding: 8px 10px; text-align: left; vertical-align: top; }
.politique th { background: var(--fond-teinte); color: var(--encre); }
.politique code { background: var(--fond-teinte); padding: 1px 5px; border-radius: 4px; font-size: .92em; }
.politique-langue { text-align: right; font-size: 14px; }
.mentions h2 { font-size: 24px; margin: 32px 0 12px; }
.mentions h2:first-child { margin-top: 0; }

/* ── Visionneuse ─────────────────────────────────────────────────────── */
.visionneuse { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(10, 14, 13, .92); }
.visionneuse::backdrop { background: rgba(10, 14, 13, .92); }
.visionneuse-cadre { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 12px; padding: 50px 60px; }
.visionneuse img { max-width: 100%; max-height: calc(100vh - 140px); border-radius: 10px; background: #fff; }
.visionneuse p { color: #d8e2de; font-size: 15px; text-align: center; }
.visionneuse button { position: absolute; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: 30px; line-height: 1; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; }
.visionneuse button:hover { background: rgba(255, 255, 255, .25); }
.visionneuse-fermer { top: 14px; right: 14px; }
.visionneuse-prec { left: 12px; top: 50%; }
.visionneuse-suiv { right: 12px; top: 50%; }

/* ── Pied ────────────────────────────────────────────────────────────── */
.pied { border-top: 1px solid var(--trait); padding: 48px 0 40px; font-size: 14px; color: var(--doux); }
.pied-grille { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.pied-marque p { margin-top: 12px; max-width: 30em; }
.pied-liens { display: grid; gap: 8px; align-content: start; }
.pied-titre { font-weight: 700; color: var(--encre); letter-spacing: .04em; }
.pied a { color: var(--texte); text-decoration: none; }
.pied a:hover { color: var(--encre); text-decoration: underline; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--trait); }
.pied-court { padding: 24px 0; }

/* ── Fenêtres ouvertes dans SketchUp (500 × 600 et 780 × 620) ─────────── */
.fenetre .entete { position: static; }
.fenetre .enveloppe { max-width: 860px; }
.fenetre .bandeau-court { padding: 28px 0 24px; }
.fenetre .bandeau h1 { font-size: 28px; margin-bottom: 0; }
.fenetre .section-serree { padding: 26px 0; }
.fenetre h2 { font-size: 21px; }

/* ── Adaptations ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .nav { gap: 18px; }
  .nav a { font-size: 14px; }
  .fonctions-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atouts, .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .groupes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .pied-grille > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .nav, .entete-contact { display: none; }
  .menu-mobile { display: block; }
  .hero { padding-top: 40px; }
  .bandeau { padding: 36px 0 48px; }
  .hero-grille, .bandeau-grille, .deux-colonnes, .contact-grille, .bande-pilot { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .produit-phare, .produit-phare.produit-inverse, .controle { grid-template-columns: minmax(0, 1fr); }
  .produit-inverse .produit-visuel { order: 0; }
  .deux-colonnes.inverse > .texte { order: 0; }

  .produit-phare .produit-corps { padding: 26px 28px 28px; }
  .section { padding: 72px 0; }
  .section-serree { padding: 44px 0; }
  .section + .final, .section-teinte + .final { padding-top: 72px; }
  .fichiers { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .produits, .fonctions, .fonctions-3, .atouts, .etapes, .groupes { grid-template-columns: minmax(0, 1fr); }
  .champs-2 { grid-template-columns: minmax(0, 1fr); }
  .formulaire { padding: 22px 18px; }
  .bande-pilot { padding: 18px; }
  .specs div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .final-boite { padding: 48px 22px; border-radius: 22px; }
  .hero-boutons .bouton, .final-boite .bouton { width: 100%; }
  .pied-grille { grid-template-columns: minmax(0, 1fr); }
  .video-lecture { font-size: 14px; padding: 10px 14px; white-space: normal; }
  .marque span { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}