/* =========================================================
   ECO RÉNOV 31 — V4 SYNOPTIQUE STANDARDISÉE

   Sections standard — Trame 1 :
   - Accueil
   - Diagnostic
   - Canicule
   - Pergolas
   - Automatismes
   - Régulation
   - AMO
   - À propos

   Section spécifique :
   - Contact : trame Contact V3
========================================================= */

:root {
  --color-eco-green: #69B42E;
  --color-green-dark: #1F6B1A;
  --color-anthracite: #2F342F;
  --color-grege: #E8E2D5;
  --color-off-white: #FAF8F1;
  --color-card: rgba(255, 255, 255, 0.90);
  --color-soft-green: rgba(105, 180, 46, 0.075);
  --color-border: rgba(47, 52, 47, 0.14);
  --container: 1320px;
  --home-header-height: 92px;
  --home-footer-height: 74px;
  --home-gap: clamp(8px, 1.05vh, 14px);
  --home-radius-lg: 22px;
  --home-radius-md: 14px;
  --shadow-soft: 0 16px 34px rgba(47, 52, 47, 0.085);
  --shadow-button: 0 10px 20px rgba(31, 107, 26, 0.20);
}

* { box-sizing: border-box; }

html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100svh;
  margin: 0;
  color: var(--color-anthracite);
  font-family: Arial, Helvetica, sans-serif;
  background: var(--color-off-white);
}

a { color: inherit; }

.container {
  width: min(100% - 40px, var(--container));
  margin-inline: auto;
}

/* =========================================================
   HEADER / NAVIGATION STABLE
========================================================= */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  height: var(--home-header-height);
  background: rgba(250, 248, 241, 0.97);
  border-bottom: 1px solid rgba(47, 52, 47, 0.12);
  backdrop-filter: blur(10px);
}

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}

.brand {
  height: 100%;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--color-anthracite);
  text-decoration: none;
  flex: 0 0 auto;
}

.brand__logo {
  display: block;
  width: auto;
  height: 80%;
  max-width: none;
  max-height: 80%;
  margin-block: auto;
  object-fit: contain;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.site-nav__link {
  padding: 9px 13px;
  border-radius: 999px;
  color: var(--color-anthracite);
  font-size: clamp(0.78rem, 0.85vw, 0.92rem);
  font-weight: 800;
  text-decoration: none;
}

.site-nav__link:hover,
.site-nav__link.is-active {
  color: #fff;
  background: var(--color-green-dark);
}

.synoptic-menu-button {
  display: none;
  width: 44px;
  height: 40px;
  border: 1px solid rgba(30, 31, 34, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.90);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(30, 31, 34, 0.08);
}

.synoptic-menu-button span {
  display: block;
  width: 22px;
  height: 3px;
  margin: 4px auto;
  border-radius: 999px;
  background: var(--color-anthracite);
}

/* =========================================================
   STRUCTURE SYNOPTIQUE
========================================================= */

.home-synoptic-page {
  height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(105, 180, 46, 0.10), transparent 28rem),
    linear-gradient(180deg, var(--color-off-white), var(--color-grege));
}

.page-frame {
  position: fixed;
  inset: var(--home-header-height) 0 var(--home-footer-height) 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  background:
    linear-gradient(rgba(47, 52, 47, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 52, 47, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(243, 239, 231, 0.82), rgba(250, 248, 241, 0.92));
  background-size: 16px 16px, 16px 16px, auto;
}

.template-panel {
  width: min(100% - 40px, var(--container));
  height: 100%;
  min-height: 0;
  margin-inline: auto;
  padding-block: clamp(8px, 1.2vh, 14px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.synoptic-grid {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--home-gap);
  overflow: hidden;
}

.synoptic-column {
  height: 100%;
  min-height: 0;
  padding: clamp(8px, 1.15vh, 14px);
  border: 1px solid rgba(47, 52, 47, 0.10);
  border-radius: var(--home-radius-lg);
  display: grid;
  gap: var(--home-gap);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: var(--shadow-soft);
}

.synoptic-column--technical {
  border-left: 1px dashed rgba(47, 52, 47, 0.24);
  background: rgba(105, 180, 46, 0.055);
}

.block,
.mini-card {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--home-radius-md);
  overflow: hidden;
  background: var(--color-card);
  box-shadow: 0 10px 24px rgba(47, 52, 47, 0.055);
}

.mini-grid {
  min-height: 0;
  display: grid;
  gap: var(--home-gap);
  overflow: hidden;
}

.mini-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mini-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mini-grid--2x2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* =========================================================
   TRAME 1 - SECTIONS METIER COMMUNES
========================================================= */

.template-panel--trame-1 .synoptic-column--commercial {
  grid-template-rows:
    minmax(0, 1.02fr)
    minmax(0, 1.30fr)
    minmax(0, 0.64fr)
    minmax(0, 0.58fr);
}

.template-panel--trame-1 .synoptic-column--technical {
  grid-template-rows:
    minmax(0, 0.46fr)
    minmax(0, 1.48fr)
    minmax(0, 0.78fr)
    minmax(0, 0.70fr);
}

.template-panel--trame-1 .block,
.template-panel--trame-1 .mini-card,
.template-panel--trame-1 .mini-grid {
  min-width: 0;
  min-height: 0;
}

.template-panel--trame-1 .mini-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.template-panel--trame-1 .mini-grid--2x2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

/* =========================================================
   SECTION STANDARD — STRUCTURE INTERNE COMMUNE
========================================================= */

.template-panel--trame-1 .section-block,
.template-panel--trame-1 .section-mini {
  min-width: 0;
  min-height: 0;
  padding: clamp(8px, 1.08vh, 14px);
  overflow: hidden;
}

.template-panel--trame-1 h1,
.template-panel--trame-1 h2,
.template-panel--trame-1 h3,
.template-panel--trame-1 p,
.template-panel--trame-1 li {
  overflow-wrap: normal;
  hyphens: manual;
}

.template-panel--trame-1 a {
  overflow-wrap: anywhere;
}

.template-panel--trame-1 h1,
.template-panel--trame-1 h2,
.template-panel--trame-1 h3,
.template-panel--trame-1 p,
.template-panel--trame-1 ul,
.template-panel--trame-1 ol,
.template-panel--trame-1 figure {
  margin-top: 0;
}

.template-panel--trame-1 figure {
  margin: 0;
}

.template-panel--trame-1 img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.template-panel--trame-1 .section-block__inner,
.template-panel--trame-1 .section-mini__inner {
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.template-panel--trame-1 .section-media-placeholder {
  width: 100%;
  height: 100%;
  min-height: 24px;
}

/* =========================================================
   BLOC 1 — HERO
========================================================= */

.template-panel--trame-1 .section-block--1 {
  min-height: 0;
  padding: clamp(9px, 1.02vh, 13px) clamp(12px, 1.15vw, 17px);
  overflow: hidden;
}

.template-panel--trame-1 .section-block-1__inner {
  --section-hero-title-size: clamp(1.18rem, min(1.50vw, 2.70vh), 1.72rem);
  --section-hero-text-size: clamp(0.72rem, min(0.78vw, 1.36vh), 0.90rem);
  --section-hero-pill-size: var(--section-hero-text-size);
  --section-hero-image-column: minmax(180px, 0.5fr);
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(0.30rem, 0.56vh, 0.44rem);
}

.template-panel--trame-1 .section-block-1__main {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--section-hero-image-column);
  gap: clamp(0.40rem, 0.78vw, 0.72rem);
  align-items: stretch;
}

.template-panel--trame-1 .section-block-1__copy {
  min-width: 0;
  align-self: center;
}

.template-panel--trame-1 .section-block-1__copy h1 {
  width: 100%;
max-width: none;
  margin: 0;
  color: var(--color-green-dark);
  font-size: var(--section-hero-title-size);
  line-height: 1.04;
  letter-spacing: -0.024em;
}

.template-panel--trame-1 .section-block-1__copy p {
  max-width: 58ch;
  margin: clamp(0.28rem, 0.52vh, 0.40rem) 0 0;
  color: var(--color-anthracite);
  font-size: var(--section-hero-text-size);
  font-weight: 650;
  line-height: 1.18;
}

.template-panel--trame-1 .section-block-1__figure {
  width: 100%;
  height: 100%;
  min-height: clamp(82px, 13vh, 132px);
  margin: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  overflow: hidden;
}

.template-panel--trame-1 .section-block-1__figure img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center right;
}

.template-panel--trame-1 .section-block-1__bottom {
  width: 100%;
  min-width: 0;
  align-self: stretch;
}

.template-panel--trame-1 .section-keywords {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  justify-content: flex-start;
  gap:
    clamp(0.12rem, 0.25vw, 0.24rem)
    clamp(0.20rem, 0.38vw, 0.34rem);
  color: #b95714;
  list-style: none;
}

.template-panel--trame-1 .section-keywords li {
  white-space: normal;
  text-overflow: clip;
  font-size: var(--section-hero-pill-size);
  font-weight: 900;
  line-height: 1.04;
  padding:
    clamp(0.10rem, 0.20vh, 0.14rem)
    clamp(0.30rem, 0.46vw, 0.44rem);
}

.template-panel--trame-1 .section-keywords li:not(:last-child)::after {
  content: "•";
  margin-left: 0.34rem;
}

/* =========================================================
   BLOC 2 — CARTE PRINCIPALE
========================================================= */

.template-panel--trame-1 .section-block--2 {
  min-height: 0;
  padding: clamp(9px, 1.05vh, 13px);
  overflow: hidden;
}

.template-panel--trame-1 .section-block-2__inner {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.template-panel--trame-1 .section-block-2__header h2 {
  margin: 0 0 clamp(6px, 0.75vh, 9px);
  color: var(--color-green-dark);
  font-size: clamp(0.96rem, min(1.10vw, 2.08vh), 1.24rem);
  line-height: 1.05;
  text-align: left;
}

.template-panel--trame-1 .section-block-2__layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns:
    minmax(120px, 0.22fr)
    minmax(0, 0.56fr)
    minmax(120px, 0.22fr);
  gap: clamp(8px, 1vw, 14px);
  align-items: center;
}

.template-panel--trame-1 .section-block-2__side h3 {
  margin: 0 0 0.20rem;
  color: var(--color-green-dark);
  font-size: clamp(0.72rem, min(0.78vw, 1.36vh), 0.90rem);
  line-height: 1.05;
}

.template-panel--trame-1 .section-block-2__side p {
  margin: 0;
  color: var(--color-anthracite);
  font-size: clamp(0.66rem, min(0.72vw, 1.26vh), 0.82rem);
  font-weight: 650;
  line-height: 1.18;
}

.template-panel--trame-1 .section-block-2__figure {
  height: 100%;
  min-height: clamp(125px, 19vh, 190px);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.template-panel--trame-1 .section-block-2__figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.template-panel--trame-1 .section-block-2__bottom {
  margin: clamp(4px, 0.60vh, 7px) 0 0;
  color: var(--color-anthracite);
  font-size: clamp(0.54rem, min(0.60vw, 1.08vh), 0.68rem);
  font-weight: 850;
  line-height: 1.08;
  text-align: center;
}

.template-panel--trame-1 .section-block-2__bottom p {
  margin: 0;
}

/* =========================================================
   BLOCS 3 ET 7 — MINI-CARTES
========================================================= */

.template-panel--trame-1 .section-block--3,
.template-panel--trame-1 .section-block--7 {
  min-height: 0;
  height: 100%;
}

.template-panel--trame-1 .section-block--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.template-panel--trame-1 .section-block--7 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.template-panel--trame-1 .section-block--3 .section-mini__inner,
.template-panel--trame-1 .section-block--7 .section-mini__inner {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(46px, 0.25fr) minmax(0, 1fr);
  gap: clamp(7px, 0.8vw, 11px);
  align-items: center;
  padding: clamp(8px, 0.95vh, 12px);
}

.template-panel--trame-1 .section-mini__media,
.template-panel--trame-1 .section-mini__body {
  min-width: 0;
  min-height: 0;
}

.template-panel--trame-1 .section-mini__media {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.template-panel--trame-1 .section-mini__media img {
  max-width: 52px;
  max-height: 54px;
  object-fit: contain;
}

.template-panel--trame-1 .section-mini__media:empty {
  display: none;
}

.template-panel--trame-1 .section-mini__media:empty + .section-mini__body {
  grid-column: 1 / -1;
}

.template-panel--trame-1 .section-mini h3 {
  margin: 0 0 0.18rem;
  color: var(--color-green-dark);
  font-size: clamp(0.68rem, min(0.76vw, 1.38vh), 0.84rem);
  line-height: 1.05;
}

.template-panel--trame-1 .section-mini p {
  margin: 0;
  color: var(--color-anthracite);
  font-size: clamp(0.52rem, min(0.58vw, 1.05vh), 0.66rem);
  font-weight: 600;
  line-height: 1.14;
}

/* =========================================================
   BLOC 4 — CTA COURT
========================================================= */

.template-panel--trame-1 .section-block--4 {
  min-height: 0;
  padding: clamp(8px, 0.98vh, 12px);
  overflow: hidden;
}

.template-panel--trame-1 .section-block-4__inner {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(8px, 0.9vw, 12px);
  align-items: center;
}

.template-panel--trame-1 .section-block-4__body h2 {
  margin: 0 0 clamp(4px, 0.55vh, 7px);
  color: var(--color-green-dark);
  font-size: clamp(0.96rem, min(1.10vw, 2.08vh), 1.24rem);
  line-height: 1.05;
}

.template-panel--trame-1 .section-block-4__body p {
  margin: 0;
  color: var(--color-anthracite);
  font-size: clamp(0.54rem, min(0.60vw, 1.08vh), 0.68rem);
  font-weight: 700;
  line-height: 1.16;
}

.template-panel--trame-1 .section-block-4__aside a,
.template-panel--trame-1 .section-block-8__body a {
  min-height: clamp(28px, 3.6vh, 36px);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.42rem 0.9rem;
  background: linear-gradient(180deg, #24751E, #155411);
  color: #fff;
  box-shadow: var(--shadow-button);
  font-size: clamp(0.58rem, min(0.66vw, 1.18vh), 0.76rem);
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  text-decoration: none;
}

/* =========================================================
   BLOC 5 — TITRE TECHNIQUE
========================================================= */

.template-panel--trame-1 .section-block--5 {
  min-height: 0;
  padding:
    clamp(9px, 1.05vh, 13px)
    clamp(12px, 1.2vw, 18px);
  overflow: hidden;
}

.template-panel--trame-1 .section-block-5__inner {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(9px, 1vw, 14px);
  align-items: center;
}

.template-panel--trame-1 .section-block-5__aside:empty {
  display: none;
}

.template-panel--trame-1 .section-block-5__aside img {
  max-width: 56px;
  max-height: 58px;
  object-fit: contain;
}

.template-panel--trame-1 .section-block-5__body > p:first-child {
  margin: 0 0 0.18rem;
  color: var(--color-green-dark);
  font-weight: 900;
  line-height: 1.12;
}

.template-panel--trame-1 .section-block-5__body h2 {
  margin: 0;
  color: var(--color-green-dark);
  font-size: clamp(1rem, min(1.16vw, 2.1vh), 1.28rem);
  line-height: 1.05;
}

.template-panel--trame-1 .section-block-5__body p:not(:first-child) {
  margin: 0.18rem 0 0;
  color: var(--color-anthracite);
  font-weight: 700;
  line-height: 1.12;
}

/* =========================================================
   BLOC 6 — MÉTHODE
========================================================= */

.template-panel--trame-1 .section-block--6 {
  min-height: 0;
  padding: clamp(9px, 1.05vh, 13px);
  overflow: hidden;
}

.template-panel--trame-1 .section-block-6__inner {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.template-panel--trame-1 .section-block-6__header h2 {
  margin: 0 0 clamp(5px, 0.70vh, 8px);
  color: var(--color-green-dark);
  font-size: clamp(1rem, min(1.16vw, 2.12vh), 1.30rem);
  line-height: 1.05;
}

.template-panel--trame-1 .section-block-6__layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns:
    minmax(145px, 0.34fr)
    minmax(0, 0.66fr);
  gap: clamp(8px, 1vw, 14px);
  align-items: center;
  text-align: left;
}

.template-panel--trame-1 .section-block-6__copy p,
.template-panel--trame-1 .section-block-6__bottom p {
  margin: 0;
  color: var(--color-anthracite);
  font-size: clamp(0.52rem, min(0.58vw, 1.05vh), 0.66rem);
  font-weight: 650;
  line-height: 1.16;
}

.template-panel--trame-1 .section-block-6__bottom {
  margin: clamp(4px, 0.65vh, 7px) 0 0;
  color: var(--color-anthracite);
  font-size: clamp(0.52rem, min(0.58vw, 1.05vh), 0.66rem);
  font-weight: 850;
  line-height: 1.08;
  text-align: left;
}

.template-panel--trame-1 .section-block-6__bottom ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.20rem 0.50rem;
  margin: clamp(4px, 0.60vh, 7px) 0 0;
  padding: 0;
  list-style: none;
}

.template-panel--trame-1 .section-block-6__bottom li {
  font-size: clamp(0.50rem, min(0.56vw, 1.02vh), 0.64rem);
  font-weight: 800;
  line-height: 1.08;
}

.template-panel--trame-1 .section-block-6__bottom li::before {
  content: "• ";
  color: var(--color-green-dark);
}

.template-panel--trame-1 .section-block-6__figure {
  height: 100%;
  min-height: clamp(145px, 23vh, 220px);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.template-panel--trame-1 .section-block-6__figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =========================================================
   BLOC 8 — CTA FINAL
========================================================= */

.template-panel--trame-1 .section-block--8 {
  min-height: 0;
  padding: clamp(9px, 1.05vh, 13px);
  overflow: hidden;
}

.template-panel--trame-1 .section-block-8__inner {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns:
    minmax(0, 0.62fr)
    minmax(150px, 0.38fr);
  gap: clamp(8px, 0.95vw, 13px);
  align-items: center;
}

.template-panel--trame-1 .section-block-8__body h2 {
  margin: 0;
  color: var(--color-green-dark);
  font-size: clamp(0.96rem, min(1.10vw, 2.02vh), 1.24rem);
  line-height: 1.05;
}

.template-panel--trame-1 .section-block-8__body p {
  margin: 0.26rem 0 0;
  color: var(--color-anthracite);
  font-size: clamp(0.50rem, min(0.56vw, 1.02vh), 0.64rem);
  font-weight: 600;
  line-height: 1.15;
}

.template-panel--trame-1 .section-block-8__body a {
  width: min(100%, 310px);
  margin-top: clamp(5px, 0.78vh, 9px);
}

.template-panel--trame-1 .section-block-8__figure {
  height: 100%;
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.template-panel--trame-1 .section-block-8__figure img {
  width: 100%;
  height: 100%;
  max-height: 150px;
  object-fit: contain;
  object-position: center bottom;
}

/* =========================================================
   RESPONSIVE COMMUN
========================================================= */

@media (max-width: 1280px), (max-height: 760px) {
  .template-panel--trame-1 .section-block--1 {
    min-height: 250px;
  }

  .template-panel--trame-1 .section-block--2 {
    min-height: 300px;
  }

  .template-panel--trame-1 .section-block-6__figure {
    min-height: 260px;
  }

  .template-panel--trame-1 .section-block-1__inner {
    --section-hero-title-size: clamp(1.00rem, 1.22vw, 1.30rem);
    --section-hero-text-size: clamp(0.62rem, 0.84vw, 0.76rem);
    --section-hero-pill-size: clamp(0.51rem, 0.68vw, 0.64rem);
    --section-hero-image-column: minmax(128px, 0.31fr);
  }
}

@media (max-width: 900px) {
  .template-panel--trame-1 .section-block-1__main {
    grid-template-columns: 1fr;
    gap: clamp(0.34rem, 1.45vw, 0.50rem);
  }

  .template-panel--trame-1 .section-block-1__inner {
    --section-hero-title-size: clamp(1.18rem, min(1.50vw, 2.70vh), 1.72rem);
    --section-hero-text-size: clamp(0.70rem, 2.16vw, 0.86rem);
    --section-hero-pill-size: clamp(0.56rem, 1.90vw, 0.68rem);
  }

  .template-panel--trame-1 .section-block-1__copy {
    max-width: 100%;
    align-self: start;
  }

  .template-panel--trame-1 .section-block-1__copy h1 {
    max-width: 100%;
  }

  .template-panel--trame-1 .section-block-1__copy p {
    max-width: none;
    line-height: 1.22;
  }

  .template-panel--trame-1 .section-keywords {
    max-width: 100%;
    margin-top: 0.34rem;
  }

  .template-panel--trame-1 .section-block-1__figure {
    width: min(100%, 420px);
    height: auto;
    min-height: 0;
    max-height: 178px;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .template-panel--trame-1 .section-block-1__figure img {
    width: 100%;
    height: auto;
    max-height: 178px;
    object-position: left center;
  }
}

@media (max-width: 700px) {
  .template-panel--trame-1 .section-block-1__inner {
    --section-hero-title-size: clamp(1.16rem, 5.50vw, 1.52rem);
    --section-hero-text-size: clamp(0.76rem, 3.20vw, 0.90rem);
    --section-hero-pill-size: clamp(0.58rem, 2.50vw, 0.70rem);
  }

  .template-panel--trame-1 .section-block-1__figure {
    width: 100%;
    max-height: 150px;
  }

  .template-panel--trame-1 .section-block-1__figure img {
    max-height: 150px;
  }

  .template-panel--trame-1 .section-block-2__layout,
  .template-panel--trame-1 .section-block-4__inner,
  .template-panel--trame-1 .section-block-5__inner,
  .template-panel--trame-1 .section-block-6__layout,
  .template-panel--trame-1 .section-block-8__inner {
    grid-template-columns: 1fr;
  }

  .template-panel--trame-1 .section-block--3,
  .template-panel--trame-1 .section-block--7 {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .template-panel--trame-1 .section-mini__inner {
    grid-template-columns:
      minmax(54px, 0.22fr)
      minmax(0, 1fr);
  }

  .template-panel--trame-1 .section-block-5__aside:empty {
    display: none;
  }
}

/* =========================================================

   CONTACT — SYNOPTIQUE V4

========================================================= */



.template-panel--contact,

.template-panel--contact * {

  overflow-wrap: normal;

  hyphens: manual;

}



.template-panel--contact .synoptic-column--commercial {

  grid-template-rows:

    minmax(0, 0.78fr)

    minmax(0, 0.88fr)

    minmax(0, 1.34fr)

    minmax(0, 1.64fr);

}



.template-panel--contact .synoptic-column--technical {

  grid-template-rows:

    minmax(0, 0.46fr)

    minmax(0, 0.46fr)

    minmax(0, 1.55fr)

    minmax(0, 0.64fr)

    minmax(0, 0.88fr);

}



.template-panel--contact .block,

.template-panel--contact .mini-card {

  min-width: 0;

  min-height: 0;

  border: 1px solid var(--color-border);

  border-radius: var(--home-radius-md);

  background: rgba(255, 255, 255, 0.93);

  box-shadow: 0 10px 22px rgba(47, 52, 47, 0.07);

  overflow: hidden;

}



.template-panel--contact .block {

  padding:

    clamp(10px, 1.05vh, 14px)

    clamp(12px, 1.1vw, 18px);

}



.template-panel--contact h1,

.template-panel--contact h2,

.template-panel--contact h3,

.template-panel--contact p,

.template-panel--contact ul,

.template-panel--contact ol,

.template-panel--contact figure {

  margin-top: 0;

}



.template-panel--contact figure {

  margin: 0;

}



.template-panel--contact img {

  display: block;

  max-width: 100%;

  max-height: 100%;

  object-fit: contain;

}



.contact-form {

  display: contents;

}



/* HERO */



.contact-hero-card {

  display: grid;

  grid-template-columns: minmax(0, 1fr) minmax(140px, 0.30fr);

  align-items: center;

  gap: 12px;

}



.contact-hero-card__copy {

  min-width: 0;

}



.contact-hero-card h1 {

  margin: 0;

  color: var(--color-green-dark);

  font-size: clamp(1.04rem, min(1.26vw, 2.25vh), 1.44rem);

  line-height: 1.08;

  letter-spacing: -0.024em;

}



.contact-hero-card p {

  margin: 0.40rem 0 0;

  color: var(--color-anthracite);

  font-size: clamp(0.68rem, min(0.78vw, 1.30vh), 0.86rem);

  font-weight: 650;

  line-height: 1.22;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 3;

  overflow: hidden;

}



.contact-hero-card__figure {

  width: 100%;

  height: 100%;

  min-height: 0;

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}



.contact-hero-card__figure img {

  width: 100%;

  height: 100%;

}



.contact-pills {

  max-height: 30px;

  margin-top: 0.58rem;

  display: flex;

  flex-wrap: wrap;

  gap: 0.35rem 0.55rem;

  overflow: hidden;

}



.contact-pills span {

  border: 1px solid rgba(31, 107, 26, 0.22);

  border-radius: 999px;

  padding: 0.26rem 0.70rem;

  background: rgba(250, 248, 241, 0.82);

  color: var(--color-green-dark);

  font-size: clamp(0.56rem, 0.62vw, 0.70rem);

  font-weight: 900;

  line-height: 1;

  white-space: nowrap;

}



/* CHOIX */



.contact-choices-card {

  min-width: 0;

  min-height: 0;

  display: flex;

  flex-direction: column;

  gap: clamp(5px, 0.65vh, 8px);

}



.contact-choices-card h2 {

  flex: 0 0 auto;

  margin: 0;

  color: var(--color-anthracite);

  font-size: clamp(0.66rem, min(0.76vw, 1.18vh), 0.82rem);

  font-weight: 900;

  line-height: 1.05;

}



.contact-choices-card h2 span {

  color: rgba(47, 52, 47, 0.72);

  font-weight: 750;

}



.contact-choice-grid {

  flex: 1 1 auto;

  min-width: 0;

  min-height: 0;

  display: grid;

  gap: clamp(5px, 0.62vh, 8px);

  overflow: hidden;

}



.template-panel--contact .contact-choice-grid--symptoms {

  grid-template-columns: repeat(4, minmax(0, 1fr));

  grid-template-rows: repeat(3, minmax(0, 1fr));

}



.template-panel--contact .contact-choice-grid--house {

  grid-template-columns: repeat(4, minmax(0, 1fr));

  grid-template-rows: repeat(2, minmax(0, 1fr));

}



.template-panel--contact .contact-choice-grid--need {

  grid-template-columns: repeat(3, minmax(0, 1fr));

  grid-template-rows: repeat(3, minmax(0, 1fr));

  align-content: start;

}



.contact-choice-grid label {

  position: relative;

  min-width: 0;

  min-height: 0;

  border: 1px solid rgba(47, 52, 47, 0.16);

  border-radius: 8px;

  display: grid;

  grid-template-columns: 22px minmax(0, 1fr);

  align-items: center;

  gap: 0.30rem;

  padding: 0.22rem 0.34rem;

  background: rgba(250, 248, 241, 0.58);

  color: var(--color-green-dark);

  font-size: clamp(0.54rem, min(0.62vw, 0.98vh), 0.70rem);

  font-weight: 900;

  line-height: 1.02;

  cursor: pointer;

  overflow: hidden;

}



.contact-choice-grid--house label,

.contact-choice-grid--need label {

  grid-template-columns: 21px minmax(0, 1fr);

  padding-inline: 0.32rem;

  font-size: clamp(0.56rem, min(0.66vw, 1.02vh), 0.72rem);

}



.contact-choice-grid input {

  position: absolute;

  opacity: 0;

  pointer-events: none;

}



.contact-choice-icon {

  width: 22px;

  min-width: 22px;

  height: 22px;

  display: grid;

  place-items: center;

}



.contact-choice-icon img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}



.contact-choice-grid input:checked + .contact-choice-icon {

  border-radius: 6px;

  background: rgba(105, 180, 46, 0.22);

  box-shadow: 0 0 0 2px rgba(31, 107, 26, 0.22);

}



.contact-choice-grid input:focus-visible + .contact-choice-icon {

  outline: 2px solid var(--color-green-dark);

  outline-offset: 2px;

}



.contact-choice-text {

  min-width: 0;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  overflow: hidden;

}



/* MAISON / BESOIN */



.template-panel--contact .contact-form-split {

  min-width: 0;

  min-height: 0;

  display: grid;

  grid-template-columns: minmax(0, 0.54fr) minmax(0, 0.46fr);

  gap: var(--home-gap);

  overflow: hidden;

}



.contact-form-split .block {

  height: 100%;

}



.contact-inline-fields {

  flex: 0 0 auto;

  min-height: 42px;

  margin-top: 0.45rem;

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0.45rem;

}



.contact-inline-fields label,

.contact-identity-card label {

  min-width: 0;

  min-height: 0;

  display: block;

  overflow: hidden;

}



.contact-inline-fields span,

.contact-identity-card label > span {

  display: block;

  margin-bottom: 0.16rem;

  color: var(--color-anthracite);

  font-size: clamp(0.58rem, 0.62vw, 0.70rem);

  font-weight: 900;

  line-height: 1.05;

}



.contact-inline-fields input,

.contact-identity-card input,

.contact-identity-card textarea {

  width: 100%;

  min-width: 0;

  min-height: 28px;

  border: 1px solid rgba(47, 52, 47, 0.18);

  border-radius: 7px;

  padding: 0.32rem 0.54rem;

  background: rgba(255, 255, 255, 0.70);

  color: var(--color-anthracite);

  font: inherit;

  font-size: clamp(0.62rem, 0.68vw, 0.78rem);

}



/* IDENTITÉ / MESSAGE */



.contact-identity-card {

  min-height: 0;

  display: grid;

  grid-template-rows:

    minmax(42px, auto)

    minmax(38px, auto)

    minmax(58px, 1fr)

    minmax(34px, auto);

  gap: clamp(5px, 0.62vh, 8px);

  align-content: stretch;

}



.contact-identity-row--3 {

  min-height: 0;

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 0.55rem;

}



.contact-identity-card label {

  display: grid;

  grid-template-rows: auto minmax(0, 1fr);

}



.contact-identity-card label > span {

  margin: 0 0 0.12rem;

  font-size: clamp(0.54rem, 0.58vw, 0.66rem);

  line-height: 1;

}



.contact-identity-card input {

  height: 100%;

}



.contact-identity-message textarea {

  height: 100%;

  min-height: 46px;

  resize: none;

  line-height: 1.16;

}



.contact-submit-row {

  min-width: 0;

  min-height: 0;

  display: grid;

  grid-template-columns: auto minmax(0, 1fr);

  align-items: center;

  gap: 1rem;

  overflow: hidden;

}



.contact-submit-button {

  min-height: 32px;

  border: 0;

  border-radius: 8px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0.40rem 0.95rem;

  background: linear-gradient(180deg, #24751E, #155411);

  color: #fff;

  box-shadow: var(--shadow-button);

  font: inherit;

  font-size: clamp(0.68rem, 0.78vw, 0.90rem);

  font-weight: 900;

  line-height: 1.05;

  white-space: nowrap;

  cursor: pointer;

}



.contact-submit-row p {

  margin: 0;

  color: var(--color-anthracite);

  font-size: clamp(0.52rem, 0.58vw, 0.68rem);

  font-weight: 800;

  line-height: 1.10;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  overflow: hidden;

}



/* COLONNE DROITE */



.contact-info-card {

  display: grid;

  grid-template-columns: 84px minmax(0, 1fr);

  align-items: center;

  gap: 0.85rem;

}



.template-panel--contact .contact-info-card__icon img {
  width: 82%;
  height: 82%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
  transform: none;
}

.contact-info-card h2,

.contact-process-card h2,

.contact-final-card h2 {

  margin: 0;

  color: var(--color-anthracite);

  font-size: clamp(0.92rem, min(1.08vw, 1.9vh), 1.24rem);

  line-height: 1.08;

}



.contact-info-card p {

  margin: 0.28rem 0 0;

  color: var(--color-anthracite);

  font-size: clamp(0.68rem, 0.78vw, 0.88rem);

  font-weight: 700;

  line-height: 1.18;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  overflow: hidden;

}



/* PROCESSUS */



.contact-process-card {

  display: grid;

  grid-template-columns: minmax(0, 0.52fr) minmax(220px, 0.48fr);

  align-items: center;

  gap: 1rem;

}



.contact-process-card__copy {

  min-width: 0;

  min-height: 0;

}



.contact-process-card ol {

  position: relative;

  margin: 0.70rem 0 0;

  padding: 0;

  list-style: none;

  overflow: hidden;

}



.contact-process-card ol::before {

  content: "";

  position: absolute;

  left: 15px;

  top: 20px;

  bottom: 22px;

  width: 2px;

  background: rgba(31, 107, 26, 0.25);

}



.contact-process-card li {

  position: relative;

  min-height: 0;

  margin: 0 0 0.58rem;

  display: grid;

  grid-template-columns: 32px minmax(0, 1fr);

  gap: 0.55rem;

}



.contact-process-card li > span {

  position: relative;

  z-index: 1;

  width: 30px;

  height: 30px;

  border-radius: 999px;

  display: grid;

  place-items: center;

  background: var(--color-green-dark);

  color: #fff;

  font-weight: 900;

}



.contact-process-card strong {

  display: block;

  color: var(--color-anthracite);

  font-size: clamp(0.72rem, 0.84vw, 0.95rem);

  line-height: 1.08;

}



.contact-process-card li p {

  margin: 0.16rem 0 0;

  color: var(--color-anthracite);

  font-size: clamp(0.62rem, 0.72vw, 0.82rem);

  font-weight: 650;

  line-height: 1.16;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  overflow: hidden;

}



.contact-process-card__figure {

  width: 100%;

  height: 100%;

  min-height: 0;

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}



.contact-process-card__figure img {

  width: 100%;

  height: 100%;

}



/* BÉNÉFICES */



.template-panel--contact .contact-benefits-grid {

  min-height: 0;

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  grid-template-rows: minmax(0, 1fr);

  gap: var(--home-gap);

  overflow: hidden;

}



.contact-benefits-grid .mini-card {

  padding: clamp(8px, 0.9vh, 12px);

  text-align: center;

}



.contact-benefit-card {

  min-width: 0;

  min-height: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}



.contact-benefit-card > img {

  width: clamp(26px, 2.1vw, 38px);

  height: clamp(26px, 2.1vw, 38px);

}



.contact-benefit-card h3 {

  margin: 0.24rem 0 0;

  color: var(--color-anthracite);

  font-size: clamp(0.62rem, 0.74vw, 0.84rem);

  line-height: 1.08;

}



.contact-benefit-card p {

  margin: 0.20rem 0 0;

  color: var(--color-anthracite);

  font-size: clamp(0.54rem, 0.64vw, 0.72rem);

  font-weight: 700;

  line-height: 1.12;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 3;

  overflow: hidden;

}



/* FINAL */



.contact-final-card {

  display: grid;

  grid-template-columns: minmax(0, 0.62fr) minmax(190px, 0.38fr);

  align-items: center;

  gap: 0.85rem;

}



.contact-final-card__copy {

  min-width: 0;

}



.contact-final-card h2 {

  color: var(--color-green-dark);

}



.contact-final-card p {

  margin: 0.34rem 0 0;

  color: var(--color-anthracite);

  font-size: clamp(0.66rem, 0.78vw, 0.88rem);

  font-weight: 700;

  line-height: 1.16;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 3;

  overflow: hidden;

}



.contact-final-card ul {

  margin: 0.58rem 0 0;

  padding: 0;

  display: grid;

  gap: 0.34rem;

  list-style: none;

}



.contact-final-card li {

  min-width: 0;

  display: grid;

  grid-template-columns: 22px minmax(0, 1fr);

  align-items: center;

  gap: 0.36rem;

  color: var(--color-anthracite);

  font-size: clamp(0.62rem, 0.72vw, 0.82rem);

  font-weight: 800;

  line-height: 1.10;

}



.contact-final-card li img {

  width: 22px;

  height: 22px;

}



.contact-final-card__figure {

  width: 100%;

  height: 100%;

  min-height: 0;

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}



.contact-final-card__figure img {

  width: 100%;

  height: 100%;

}



/* RESPONSIVE CONTACT */



@media (max-width: 1280px), (max-height: 760px) {

  .template-panel--contact .contact-form-split {

    grid-template-columns: minmax(0, 0.54fr) minmax(0, 0.46fr);

  }



  .template-panel--contact .contact-choice-grid--symptoms {

    grid-template-columns: repeat(4, minmax(0, 1fr));

    grid-template-rows: repeat(3, minmax(0, 1fr));

  }



  .template-panel--contact .contact-choice-grid--house {

    grid-template-columns: repeat(4, minmax(0, 1fr));

    grid-template-rows: repeat(2, minmax(0, 1fr));

  }



  .template-panel--contact .contact-choice-grid--need {

    grid-template-columns: repeat(3, minmax(0, 1fr));

    grid-template-rows: repeat(3, minmax(0, 1fr));

  }



  .template-panel--contact .contact-identity-row--3 {

    grid-template-columns: repeat(3, minmax(0, 1fr));

  }



  .template-panel--contact .contact-inline-fields {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .template-panel--contact .contact-benefits-grid {

    grid-template-columns: repeat(4, minmax(0, 1fr));

    grid-template-rows: minmax(0, 1fr);

  }

}



@media (max-width: 700px) {

  .template-panel--contact .contact-hero-card,

  .template-panel--contact .contact-form-split,

  .template-panel--contact .contact-process-card,

  .template-panel--contact .contact-final-card,

  .template-panel--contact .contact-choice-grid--symptoms,

  .template-panel--contact .contact-choice-grid--house,

  .template-panel--contact .contact-choice-grid--need,

  .template-panel--contact .contact-identity-row--3,

  .template-panel--contact .contact-inline-fields,

  .template-panel--contact .contact-benefits-grid {

    grid-template-columns: 1fr;

    grid-template-rows: none;

  }



  .template-panel--contact .contact-submit-row {

    grid-template-columns: 1fr;

  }

.template-panel--contact .contact-info-card {
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
}

.template-panel--contact .contact-info-card__icon {
  width: 56px;
  height: 100%;
  min-height: 0;
  margin: 0;
  display: grid;
  place-items: center;
  align-self: stretch;
  justify-self: center;
}


  .template-panel--contact .contact-hero-card__figure,

  .template-panel--contact .contact-process-card__figure,

  .template-panel--contact .contact-final-card__figure {

    min-height: 120px;

    max-height: 220px;

  }

}

/* =========================================================

   CONTACT — AJUSTEMENT VISUEL MAQUETTE

========================================================= */



/* Le Contact reprend la largeur et l’écart de colonnes de la maquette

   indépendante, sans modifier la grille des autres sections V4. */

.template-panel--contact {

  width: min(100% - 12px, 1660px);

  padding-block: clamp(8px, 1vh, 12px);

}

.template-panel--contact > .synoptic-grid {

  grid-template-columns: minmax(0, 1fr) minmax(0, 0.99fr);

  gap: clamp(16px, 2vw, 32px);

  overflow: hidden;

}

/* La maquette indépendante ne possède pas de grande carte englobante

   autour de chaque colonne. Les cartes Contact deviennent les limites visibles. */

.template-panel--contact > .synoptic-grid > .synoptic-column {

  height: 100%;

  min-width: 0;

  min-height: 0;

  padding: 0;

  border: 0;

  border-radius: 0;

  background: transparent;

  box-shadow: none;

  overflow: hidden;

}



.template-panel--contact > .synoptic-grid > .synoptic-column--technical {

  border-left: 0;

  background: transparent;

}



.template-panel--contact .block,

.template-panel--contact .mini-card {

  border-radius: 18px;

  box-shadow: 0 10px 22px rgba(47, 52, 47, 0.07);

}



/* Les proportions verticales restent celles de la maquette test. */

.template-panel--contact .synoptic-column--commercial {

  grid-template-rows:

    minmax(0, 0.78fr)

    minmax(0, 0.88fr)

    minmax(0, 1.34fr)

    minmax(0, 1.64fr);

}



.template-panel--contact .synoptic-column--technical {

  grid-template-rows:

    minmax(0, 0.46fr)

    minmax(0, 0.46fr)

    minmax(0, 1.55fr)

    minmax(0, 0.64fr)

    minmax(0, 0.88fr);

}



/* Hero : conserver les quatre pastilles entièrement visibles. */

.template-panel--contact .contact-hero-card {

  grid-template-columns: minmax(0, 1fr) minmax(140px, 0.30fr);

}



.template-panel--contact .contact-pills {

  max-height: none;

  overflow: visible;

}



/* Choix : les images réelles prennent plus de place que les glyphes de test.

   On réduit légèrement leur emprise et on autorise deux lignes sans ellipse. */

.template-panel--contact .contact-choice-grid label {

  grid-template-columns: 20px minmax(0, 1fr);

  gap: 0.24rem;

  padding: 0.19rem 0.28rem;

  font-size: clamp(0.50rem, min(0.58vw, 0.94vh), 0.66rem);

  line-height: 1;

}



.template-panel--contact .contact-choice-grid--house label,

.template-panel--contact .contact-choice-grid--need label {

  grid-template-columns: 19px minmax(0, 1fr);

  gap: 0.22rem;

  padding-inline: 0.26rem;

  font-size: clamp(0.49rem, min(0.57vw, 0.92vh), 0.65rem);

}



.template-panel--contact .contact-choice-icon {

  width: 20px;

  min-width: 20px;

  height: 20px;

}



.template-panel--contact .contact-choice-grid--house .contact-choice-icon,

.template-panel--contact .contact-choice-grid--need .contact-choice-icon {

  width: 19px;

  min-width: 19px;

  height: 19px;

}



.template-panel--contact .contact-choice-text {

  min-width: 0;

  display: block;

  overflow: visible;

  white-space: normal;

  text-overflow: clip;

  -webkit-line-clamp: unset;

}



/* Le message doit récupérer la hauteur disponible comme dans le screen test. */

.template-panel--contact .contact-identity-card {

  grid-template-rows:

    minmax(40px, auto)

    minmax(36px, auto)

    minmax(74px, 1fr)

    minmax(34px, auto);

}



.template-panel--contact .contact-identity-message textarea {

  min-height: 68px;

}



/* Colonne droite : l’image de processus conserve presque la moitié du bloc. */

.template-panel--contact .contact-process-card {

  grid-template-columns: minmax(0, 0.52fr) minmax(210px, 0.48fr);

}



/* Le dernier bloc ne doit plus couper le paragraphe ni la seconde information. */

.template-panel--contact .contact-final-card {

  grid-template-columns: minmax(0, 0.68fr) minmax(150px, 0.32fr);

  gap: clamp(8px, 0.85vw, 13px);

}



.template-panel--contact .contact-final-card p {

  font-size: clamp(0.60rem, 0.70vw, 0.82rem);

  line-height: 1.14;

  display: block;

  overflow: visible;

  -webkit-line-clamp: unset;

}



.template-panel--contact .contact-final-card ul {

  margin-top: clamp(4px, 0.52vh, 7px);

  gap: 0.20rem;

}



.template-panel--contact .contact-final-card li {

  font-size: clamp(0.56rem, 0.66vw, 0.76rem);

  line-height: 1.06;

}



.template-panel--contact .contact-final-card__figure {

  min-width: 0;

}



/* En lecture verticale, rétablir le comportement responsive V4. */

@media (max-width: 1280px), (max-height: 760px) {

  .template-panel--contact {

    width: min(100% - 32px, 860px);

    padding-block: 0;

  }



  .template-panel--contact > .synoptic-grid {

    grid-template-columns: 1fr;

    gap: var(--home-gap);

    overflow: visible;

  }



  .template-panel--contact > .synoptic-grid > .synoptic-column {

    height: auto;

    overflow: visible;

  }



  .template-panel--contact .contact-form-split {

    grid-template-columns: minmax(0, 0.54fr) minmax(0, 0.46fr);

  }



  .template-panel--contact .contact-choice-grid--symptoms {

    grid-template-columns: repeat(4, minmax(0, 1fr));

    grid-template-rows: repeat(3, minmax(0, 1fr));

  }



  .template-panel--contact .contact-choice-grid--house {

    grid-template-columns: repeat(4, minmax(0, 1fr));

    grid-template-rows: repeat(2, minmax(0, 1fr));

  }



  .template-panel--contact .contact-choice-grid--need {

    grid-template-columns: repeat(3, minmax(0, 1fr));

    grid-template-rows: repeat(3, minmax(0, 1fr));

  }



  .template-panel--contact .contact-identity-row--3 {

    grid-template-columns: repeat(3, minmax(0, 1fr));

  }



  .template-panel--contact .contact-inline-fields {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .template-panel--contact .contact-benefits-grid {

    grid-template-columns: repeat(4, minmax(0, 1fr));

    grid-template-rows: minmax(0, 1fr);

  }

}



@media (max-width: 700px) {

  .template-panel--contact {

    width: min(100% - 22px, 560px);

  }



  .template-panel--contact .contact-hero-card,

  .template-panel--contact .contact-form-split,

  .template-panel--contact .contact-process-card,

  .template-panel--contact .contact-final-card,

  .template-panel--contact .contact-choice-grid--symptoms,

  .template-panel--contact .contact-choice-grid--house,

  .template-panel--contact .contact-choice-grid--need,

  .template-panel--contact .contact-identity-row--3,

  .template-panel--contact .contact-inline-fields,

  .template-panel--contact .contact-benefits-grid,

  .template-panel--contact .contact-submit-row {

    grid-template-columns: 1fr;

    grid-template-rows: none;

  }

}



/* FIN CONTACT — AJUSTEMENT VISUEL MAQUETTE TEST */

/* =========================================================

   CONTACT — ALIGNEMENT SUR LA TRAME GÉNÉRALE V4

========================================================= */



.template-panel--contact {

  width: min(100% - 40px, var(--container));

  padding-block: clamp(8px, 1.2vh, 14px);

}



.template-panel--contact > .synoptic-grid {

  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

  gap: var(--home-gap);

  overflow: hidden;

}



.template-panel--contact > .synoptic-grid > .synoptic-column {

  height: 100%;

  min-width: 0;

  min-height: 0;

  padding: clamp(8px, 1.15vh, 14px);

  border: 1px solid rgba(47, 52, 47, 0.10);

  border-radius: var(--home-radius-lg);

  display: grid;

  gap: var(--home-gap);

  overflow: hidden;

  background: rgba(255, 255, 255, 0.62);

  box-shadow: var(--shadow-soft);

}



.template-panel--contact > .synoptic-grid > .synoptic-column--technical {

  border-left: 1px dashed rgba(47, 52, 47, 0.24);

  background: rgba(105, 180, 46, 0.055);

}



/* Compensation de l’espace repris par les enveloppes standard. */

.template-panel--contact .block {

  padding:

    clamp(8px, 0.90vh, 12px)

    clamp(10px, 0.95vw, 15px);

}



.template-panel--contact .contact-hero-card {

  grid-template-columns: minmax(0, 1fr) minmax(116px, 0.28fr);

  gap: clamp(7px, 0.75vw, 11px);

}



.template-panel--contact .contact-process-card {

  grid-template-columns: minmax(0, 0.54fr) minmax(168px, 0.46fr);

  gap: clamp(8px, 0.82vw, 12px);

}



.template-panel--contact .contact-final-card {

  grid-template-columns: minmax(0, 0.68fr) minmax(128px, 0.32fr);

  gap: clamp(7px, 0.75vw, 11px);

}



.template-panel--contact .contact-choice-grid {

  gap: clamp(4px, 0.48vh, 7px);

}



.template-panel--contact .contact-choice-grid label {

  padding: 0.18rem 0.26rem;

  gap: 0.22rem;

}



@media (max-width: 1280px), (max-height: 760px) {

  .template-panel--contact {

    width: min(100% - 32px, 860px);

    padding-block: 0;

  }



  .template-panel--contact > .synoptic-grid {

    grid-template-columns: 1fr;

    overflow: visible;

  }



  .template-panel--contact > .synoptic-grid > .synoptic-column {

    height: auto;

    overflow: visible;

  }

}



@media (max-width: 700px) {

  .template-panel--contact {

    width: min(100% - 22px, 560px);

  }

}



/* FIN CONTACT — ALIGNEMENT SUR LA TRAME GÉNÉRALE V4 */

/* =========================================================

   CONTACT — MOTS-CLÉS ALIGNÉS SUR LES SECTIONS STANDARD

========================================================= */



.template-panel--contact .contact-pills {
  width: 100%;
  min-width: 0;
  max-height: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  justify-content: flex-start;
  gap:
    clamp(0.12rem, 0.25vw, 0.24rem)
    clamp(0.20rem, 0.38vw, 0.34rem);
  overflow: visible;
  color: #b95714;
}

.template-panel--contact .contact-pills span {
  border: 0;
  border-radius: 0;
  padding:
    clamp(0.10rem, 0.20vh, 0.14rem)
    clamp(0.30rem, 0.46vw, 0.44rem);
  background: transparent;
  color: inherit;
  font-size: clamp(0.72rem, min(0.78vw, 1.36vh), 0.90rem);
  font-weight: 900;
  line-height: 1.04;
  white-space: normal;
}

.template-panel--contact .contact-pills span:not(:last-child)::after {
  content: "•";
  margin-left: 0.34rem;
}

@media (max-width: 1280px), (max-height: 760px) {
  .template-panel--contact .contact-pills span {
    font-size: clamp(0.51rem, 0.68vw, 0.64rem);
  }
}

@media (max-width: 900px) {
  .template-panel--contact .contact-pills span {
    font-size: clamp(0.56rem, 1.90vw, 0.68rem);
  }
}

@media (max-width: 700px) {
  .template-panel--contact .contact-pills span {
    font-size: clamp(0.58rem, 2.50vw, 0.70rem);
  }
}

@media (min-width: 1281px) and (min-height: 761px) {
  .template-panel--contact .contact-pills {
    justify-content: center;
    text-align: center;
  }
}


/* FIN CONTACT — MOTS-CLÉS ALIGNÉS SUR LES SECTIONS STANDARD */

/* =========================================================

   CONTACT — REDIMENSIONNEMENT DES PICTOGRAMMES SYMPTÔMES

========================================================= */



.template-panel--contact .contact-symptoms-card .contact-choice-icon {

  width: 18px;

  min-width: 18px;

  height: 18px;

  padding: 1px;

  display: grid;

  place-items: center;

  align-self: center;

  justify-self: center;

  overflow: hidden;

}



.template-panel--contact .contact-symptoms-card .contact-choice-icon img {

  width: 15px;

  height: 15px;

  max-width: 15px;

  max-height: 15px;

  object-fit: contain;

  object-position: center;

}



.template-panel--contact .contact-symptoms-card .contact-choice-grid label {

  grid-template-columns: 18px minmax(0, 1fr);

  align-items: center;

}



/* FIN CONTACT — REDIMENSIONNEMENT DES PICTOGRAMMES SYMPTÔMES */

/* =========================================================

   CONTACT — AJUSTEMENT DU BLOC IDENTITÉ / MESSAGE

========================================================= */



.template-panel--contact .contact-identity-card {

  grid-template-rows:

    auto

    auto

    minmax(86px, 1fr)

    auto;

  gap: clamp(4px, 0.52vh, 7px);

  align-content: stretch;

}



.template-panel--contact .contact-identity-card input {

  min-height: 26px;

  padding: 0.28rem 0.52rem;

}



.template-panel--contact .contact-identity-message {

  min-height: 0;

}



.template-panel--contact .contact-identity-message textarea {

  height: 100%;

  min-height: 86px;

  padding: 0.42rem 0.54rem;

  resize: none;

  line-height: 1.16;

}



.template-panel--contact .contact-submit-row {

  grid-template-columns: auto minmax(0, 1fr);

  align-items: center;

  gap: clamp(10px, 0.85vw, 15px);

}



.template-panel--contact .contact-submit-button {

  min-height: 30px;

  padding: 0.36rem 0.84rem;

}



.template-panel--contact .contact-submit-button::before {

  content: "✈";

  margin-right: 0.34rem;

  font-size: 0.92em;

  line-height: 1;

}



.template-panel--contact .contact-submit-row p {

  max-width: 58ch;

}



@media (max-width: 700px) {

  .template-panel--contact .contact-identity-message textarea {

    min-height: 110px;

  }



  .template-panel--contact .contact-submit-row {

    grid-template-columns: 1fr;

  }



  .template-panel--contact .contact-submit-button {

    width: 100%;

  }

}



/* FIN CONTACT — AJUSTEMENT DU BLOC IDENTITÉ / MESSAGE */

/* =========================================================

   CONTACT — AJUSTEMENT DU BLOC IDENTITÉ / MESSAGE

========================================================= */



.template-panel--contact .contact-identity-card {

  grid-template-rows:

    auto

    auto

    minmax(76px, 1fr)

    auto;

  gap: clamp(5px, 0.58vh, 8px);

  align-content: stretch;

}



.template-panel--contact .contact-identity-row--3 {

  align-items: start;

}



.template-panel--contact .contact-identity-card label {

  min-width: 0;

  min-height: 0;

  display: flex;

  flex-direction: column;

  overflow: visible;

}



.template-panel--contact .contact-identity-card label > span {

  flex: 0 0 auto;

  margin: 0 0 0.16rem;

  line-height: 1.05;

}



.template-panel--contact .contact-identity-card input {

  width: 100%;

  height: auto;

  min-height: 28px;

  flex: 0 0 auto;

  padding: 0.30rem 0.52rem;

  line-height: 1.15;

}



.template-panel--contact .contact-identity-message {

  min-height: 0;

  overflow: hidden;

}



.template-panel--contact .contact-identity-message textarea {

  width: 100%;

  height: 100%;

  min-height: 76px;

  flex: 1 1 auto;

  padding: 0.42rem 0.54rem;

  resize: none;

  line-height: 1.16;

}



.template-panel--contact .contact-submit-row {

  grid-template-columns: auto minmax(0, 1fr);

  align-items: center;

  gap: clamp(10px, 0.85vw, 15px);

}



.template-panel--contact .contact-submit-button {

  min-height: 30px;

  padding: 0.36rem 0.84rem;

}



.template-panel--contact .contact-submit-button::before {

  content: "✈";

  margin-right: 0.34rem;

  font-size: 0.92em;

  line-height: 1;

}



.template-panel--contact .contact-submit-row p {

  max-width: 58ch;

}



@media (max-width: 700px) {

  .template-panel--contact .contact-identity-message textarea {

    min-height: 110px;

  }



  .template-panel--contact .contact-submit-row {

    grid-template-columns: 1fr;

  }



  .template-panel--contact .contact-submit-button {

    width: 100%;

  }

}



/* FIN CONTACT — AJUSTEMENT DU BLOC IDENTITÉ / MESSAGE */

/* =========================================================

   CONTACT — AJUSTEMENT DU BLOC IDENTITÉ / MESSAGE

========================================================= */



.template-panel--contact .contact-identity-card {

  grid-template-rows:

    auto

    auto

    minmax(86px, 1fr)

    auto;

  gap: clamp(4px, 0.52vh, 7px);

  align-content: stretch;

}



.template-panel--contact .contact-identity-card input {

  min-height: 26px;

  padding: 0.28rem 0.52rem;

}



.template-panel--contact .contact-identity-message {

  min-height: 0;

}



.template-panel--contact .contact-identity-message textarea {

  height: 100%;

  min-height: 86px;

  padding: 0.42rem 0.54rem;

  resize: none;

  line-height: 1.16;

}



.template-panel--contact .contact-submit-row {

  grid-template-columns: auto minmax(0, 1fr);

  align-items: center;

  gap: clamp(10px, 0.85vw, 15px);

}



.template-panel--contact .contact-submit-button {

  min-height: 30px;

  padding: 0.36rem 0.84rem;

}



.template-panel--contact .contact-submit-button::before {

  content: "✈";

  margin-right: 0.34rem;

  font-size: 0.92em;

  line-height: 1;

}



.template-panel--contact .contact-submit-row p {

  max-width: 58ch;

}



@media (max-width: 700px) {

  .template-panel--contact .contact-identity-message textarea {

    min-height: 110px;

  }



  .template-panel--contact .contact-submit-row {

    grid-template-columns: 1fr;

  }



  .template-panel--contact .contact-submit-button {

    width: 100%;

  }

}



/* FIN CONTACT — AJUSTEMENT DU BLOC IDENTITÉ / MESSAGE */

/* =========================================================

   FOOTER CTA STABLE

========================================================= */



.synoptic-footer-cta {

  position: fixed;

  inset: auto 0 0 0;

  z-index: 20;

  height: var(--home-footer-height);

  background: rgba(250, 248, 241, 0.97);

  color: var(--color-anthracite);

  border-top: 1px solid rgba(47, 52, 47, 0.12);

  backdrop-filter: blur(10px);

}



.home-footer-bar__inner {

  height: 100%;

  min-height: 0;

  display: grid;

  grid-template-columns: 1fr 1fr;

  align-items: center;

  gap: 1.2rem;

  font-size: 0.88rem;

}



.footer-button,

.footer-contact {

  min-height: 42px;

  border-radius: 12px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: linear-gradient(180deg, #24751E, #155411);

  color: #fff;

  box-shadow: var(--shadow-button);

  font-weight: 900;

  text-decoration: none;

}



.footer-contact {

  min-width: 205px;

  padding: 0.52rem 1.1rem;

  flex-direction: column;

  line-height: 1.15;

  justify-self: start;

}







.footer-button {

  min-width: 126px;

  padding: 0.64rem 1.1rem;

  justify-self: end;

}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1280px), (max-height: 760px) {
  :root {
    --home-header-height: 66px;
    --home-footer-height: 80px;
  }

  .home-synoptic-page {
    height: auto;
    overflow: auto;
  }

  .site-header {
    height: var(--home-header-height);
  }

  .site-header__inner {
    position: relative;
    width: min(100% - 32px, 860px);
    margin-inline: auto;
  }

  .home-footer-bar__inner {
    width: min(100% - 32px, 860px);
    margin-inline: auto;
  }

  .brand__logo {
    height: 44px;
    max-width: min(240px, 52vw);
  }

  .synoptic-menu-button {
    display: inline-block;
  }

  .site-nav {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 90;
    width: min(320px, calc(100vw - 32px));
    padding: 10px;
    border: 1px solid rgba(30, 31, 34, 0.14);
    border-radius: 16px;
    display: none;
    background: rgba(250, 248, 243, 0.98);
    box-shadow: 0 18px 40px rgba(30, 31, 34, 0.16);
    backdrop-filter: blur(10px);
  }

  body.index-menu-open .site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .site-nav__link {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    text-align: left;
  }

  .page-frame {
    position: static;
    height: auto;
    min-height: calc(100svh - var(--home-header-height) - var(--home-footer-height));
    margin: var(--home-header-height) 0 var(--home-footer-height);
    overflow: visible;
    scroll-snap-type: none;
    padding: clamp(16px, 2.2vh, 28px) 0;
  }

.template-panel {
  width: calc(100% - 32px);  
  height: auto;
  min-height: auto;
  padding-block: 0;
  margin-bottom: 18px;
  scroll-margin-top: calc(var(--home-header-height) + 18px);
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}
  .synoptic-grid {
    height: auto;
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .synoptic-column {
    height: auto;
    overflow: visible;
  }

  .template-panel--trame-1 .synoptic-column--commercial,
  .template-panel--trame-1 .synoptic-column--technical,
  .template-panel--contact .synoptic-column--commercial,
  .template-panel--contact .synoptic-column--technical {
    grid-template-rows: none;
  }

  .block {
    min-height: 120px;
  }

  .block--hero,
  .block--method {
    min-height: 220px;
  }

  .mini-card {
    min-height: 100px;
  }

  .contact-form {
    display: grid;
    gap: var(--home-gap);
  }

  .contact-form-split,
  .contact-choice-grid--symptoms,
  .contact-choice-grid--house,
  .contact-choice-grid--need,
  .contact-fields-grid--3 {
    grid-template-columns: 1fr;
  }

  .contact-hero-card__copy {
    width: 100%;
  }
}

@media (max-width: 700px) {
  :root {
    --home-header-height: 64px;
    --home-footer-height: 136px;
    --home-gap: 12px;
  }

  .container {
    width: min(100% - 22px, var(--container));
  }

  .brand__logo {
    height: 40px;
    max-width: calc(100vw - 92px);
  }

  .template-panel {
    width: min(100% - 22px, 560px);
  }

  .synoptic-column {
    padding: 10px;
  }

  .mini-grid--3,
  .mini-grid--4,
  .mini-grid--2x2 {
    grid-template-columns: 1fr;
  }

  .template-panel--trame-1 .section-block-1__main,
  .template-panel--trame-1 .section-block-2__layout,
  .template-panel--trame-1 .section-block-4__inner,
  .template-panel--trame-1 .section-block-5__inner,
  .template-panel--trame-1 .section-block-6__layout,
  .template-panel--trame-1 .section-block-8__inner,
  .template-panel--trame-1 .section-mini__inner {
    grid-template-columns: 1fr;
  }

  .template-panel--trame-1 .section-keywords {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .home-footer-bar__inner {
    width: min(100% - 22px, var(--container));
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 0.7rem;
    padding-block: 10px;
  }
.footer-button,
  .footer-contact {
    width: 100%;
    min-width: 0;
  }

  .contact-submit-row {
    align-items: flex-start;
    flex-direction: column;
  }
}
main.home-synoptic :is(.template-panel--trame-1, .template-panel--contact) p {
  font-size: clamp(0.66rem, min(0.72vw, 1.26vh), 0.82rem);
}
main.home-synoptic .template-panel h3 {
  font-size: clamp(0.72rem, min(0.78vw, 1.36vh), 0.90rem);
}
main.home-synoptic .template-panel li {
  font-size: clamp(0.66rem, min(0.72vw, 1.26vh), 0.82rem);
}
@media (min-width: 1281px) and (min-height: 761px) {
  .template-panel--trame-1 .section-block-1__copy {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }

  .template-panel--trame-1 .section-block-1__copy h1 {
    width: 100%;
    max-width: none;
    margin: 0;
    text-align: left;
  }

  .template-panel--trame-1 .section-block-1__copy p {
    width: 100%;
    max-width: none;
    margin: auto 0;
    text-align: left;
  }
}
.template-panel--trame-1 .section-block--7 .section-mini {
  display: flex;
  align-items: center;
}

.template-panel--trame-1 .section-block--7 .section-mini__inner {
  width: 100%;
  height: auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 22% minmax(0, 1fr);
  align-items: stretch;
}

.template-panel--trame-1 .section-block--7 .section-mini__media {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  overflow: visible;
}

.template-panel--trame-1 .section-block--7 .section-mini__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

.template-panel--trame-1 .section-block--7 .section-mini__body {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
}
@media (min-width: 1281px) and (min-height: 761px) {
  .template-panel--trame-1 .section-keywords {
    justify-content: center;
    text-align: center;
  }
}

/* =========================================================

   TABLETTE — TYPOGRAPHIE ADAPTATIVE SECTIONS STANDARD

========================================================= */



@media (min-width: 701px) and (max-width: 1280px) {

  .template-panel--trame-1 .section-block-1__inner {

    --section-hero-title-size: clamp(1.40rem, 2.35vw, 1.90rem);

    --section-hero-text-size: clamp(0.90rem, 1.42vw, 1.05rem);

    --section-hero-pill-size: clamp(0.72rem, 1.15vw, 0.88rem);

  }



  .template-panel--trame-1 .section-block-1__copy h1 {

    line-height: 1.08;

  }



  .template-panel--trame-1 .section-block-1__copy p {

    line-height: 1.28;

  }



  main.home-synoptic .template-panel--trame-1 p {

    font-size: clamp(0.78rem, 1.26vw, 0.94rem);

    line-height: 1.24;

  }



  main.home-synoptic .template-panel--trame-1 h3 {

    font-size: clamp(0.84rem, 1.38vw, 1.02rem);

    line-height: 1.12;

  }



  main.home-synoptic .template-panel--trame-1 li {

    font-size: clamp(0.76rem, 1.20vw, 0.92rem);

    line-height: 1.18;

  }



  .template-panel--trame-1 .section-block-2__header h2,

  .template-panel--trame-1 .section-block-4__body h2,

  .template-panel--trame-1 .section-block-5__body h2,

  .template-panel--trame-1 .section-block-6__header h2,

  .template-panel--trame-1 .section-block-8__body h2 {

    font-size: clamp(1.08rem, 1.75vw, 1.38rem);

    line-height: 1.10;

  }



  .template-panel--trame-1 .section-mini h3 {

    font-size: clamp(0.84rem, 1.32vw, 1rem);

  }



  .template-panel--trame-1 .section-mini p {

    font-size: clamp(0.74rem, 1.16vw, 0.88rem);

    line-height: 1.20;

  }

}



/* FIN TABLETTE — TYPOGRAPHIE ADAPTATIVE SECTIONS STANDARD */

/* =========================================================

   RESPONSIVE — ESPACE DE SÉCURITÉ AU-DESSUS DU FOOTER FIXE

========================================================= */



@media (max-width: 1280px), (max-height: 760px) {

  .page-frame {

    margin-bottom: 0;

    padding-bottom:

      calc(

        var(--home-footer-height)

        + 24px

        + env(safe-area-inset-bottom, 0px)

      );

    scroll-padding-bottom:

      calc(

        var(--home-footer-height)

        + 24px

        + env(safe-area-inset-bottom, 0px)

      );

  }

}



/* FIN RESPONSIVE — ESPACE DE SÉCURITÉ AU-DESSUS DU FOOTER FIXE */

/* =========================================================

   CONTACT — PROCESSUS RESPONSIVE TABLETTE / SMARTPHONE

========================================================= */



@media (max-width: 1280px) {

  .template-panel--contact .contact-process-card {

    grid-template-columns: 1fr;

    grid-template-rows: auto auto;

    align-items: start;

    gap: clamp(10px, 1.5vw, 16px);

  }



  .template-panel--contact .contact-process-card__copy {

    width: 100%;

    min-width: 0;

  }



  .template-panel--contact .contact-process-card h2 {

    width: 100%;

    max-width: none;

    white-space: normal;

    overflow-wrap: normal;

    word-break: normal;

    font-size: clamp(1rem, 2.2vw, 1.28rem);

    line-height: 1.12;

  }



  .template-panel--contact .contact-process-card ol {

    width: 100%;

    margin-top: clamp(8px, 1.2vw, 12px);

    overflow: visible;

  }



  .template-panel--contact .contact-process-card li {

    width: 100%;

    grid-template-columns: 34px minmax(0, 1fr);

    gap: 0.65rem;

    margin-bottom: clamp(8px, 1.2vw, 12px);

  }



  .template-panel--contact .contact-process-card li > div {

    min-width: 0;

  }



  .template-panel--contact .contact-process-card strong,

  .template-panel--contact .contact-process-card li p {

    white-space: normal;

    overflow-wrap: normal;

    word-break: normal;

  }



  .template-panel--contact .contact-process-card li p {

    display: block;

    overflow: visible;

    -webkit-line-clamp: unset;

  }



  .template-panel--contact .contact-process-card__figure {

    width: 100%;

    height: auto;

    min-height: 160px;

    max-height: 260px;

    align-self: stretch;

  }



  .template-panel--contact .contact-process-card__figure img {

    width: 100%;

    height: 100%;

    max-height: 260px;

    object-fit: contain;

    object-position: center;

  }

}



@media (max-width: 700px) {

  .template-panel--contact .contact-process-card {

    gap: 10px;

  }



  .template-panel--contact .contact-process-card h2 {

    font-size: clamp(1rem, 5vw, 1.18rem);

  }



  .template-panel--contact .contact-process-card li {

    grid-template-columns: 32px minmax(0, 1fr);

  }



  .template-panel--contact .contact-process-card__figure {

    min-height: 135px;

    max-height: 210px;

  }



  .template-panel--contact .contact-process-card__figure img {

    max-height: 210px;

  }

}



/* FIN CONTACT — PROCESSUS RESPONSIVE TABLETTE / SMARTPHONE */

/* =========================================================

   CONTACT — DERNIER BLOC RESPONSIVE SMARTPHONE

========================================================= */



@media (max-width: 700px) {

  .template-panel--contact .contact-final-card {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 12px;

  }



  .template-panel--contact .contact-final-card__copy {

    width: 100%;

    min-width: 0;

  }



  .template-panel--contact .contact-final-card h2 {

    width: 100%;

    max-width: none;

    margin: 0;

    font-size: clamp(1rem, 5vw, 1.20rem);

    line-height: 1.12;

    white-space: normal;

    overflow-wrap: normal;

    word-break: normal;

  }



  .template-panel--contact .contact-final-card p {

    width: 100%;

    max-width: none;

    margin-top: 0.45rem;

    font-size: clamp(0.78rem, 3.6vw, 0.92rem);

    line-height: 1.26;

    white-space: normal;

    overflow: visible;

    overflow-wrap: normal;

    word-break: normal;

  }



  .template-panel--contact .contact-final-card ul {

    width: 100%;

    margin-top: 0.65rem;

    gap: 0.50rem;

  }



  .template-panel--contact .contact-final-card li {

    width: 100%;

    grid-template-columns: 24px minmax(0, 1fr);

    align-items: start;

    gap: 0.50rem;

    font-size: clamp(0.76rem, 3.4vw, 0.90rem);

    line-height: 1.22;

    white-space: normal;

    overflow-wrap: normal;

    word-break: normal;

  }



  .template-panel--contact .contact-final-card li img {

    width: 24px;

    height: 24px;

    margin-top: 1px;

  }



  .template-panel--contact .contact-final-card__figure {

    width: 100%;

    height: auto;

    min-width: 0;

    min-height: 120px;

    max-height: 190px;

    order: 2;

  }



  .template-panel--contact .contact-final-card__figure img {

    width: 100%;

    height: auto;

    max-height: 190px;

    object-fit: contain;

    object-position: center;

  }

}



/* FIN CONTACT — DERNIER BLOC RESPONSIVE SMARTPHONE */