/* Climat Distinction — jetons. Univers : la livrée des camions (noir lustré, sarcelle du lettrage, filet blanc, jaune réservé à la soumission). */
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/assets/fonts/jost-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/assets/fonts/jost-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/assets/fonts/figtree-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/assets/fonts/figtree-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Carrosserie */
  --black: #15191b;        /* noir lustré des camions */
  --black-2: #1f2427;      /* reflet */
  --black-3: #2b3135;
  --teal: #83c9cd;         /* sarcelle de la livrée (= fond de la photo de Karl) */
  --teal-deep: #0b5d61;    /* sarcelle foncée : liens et texte sur blanc */
  --teal-ink: #0d3134;     /* texte sur panneau sarcelle */
  --pin: #ffffff;          /* filet blanc entre noir et sarcelle */
  --sun: #fad860;          /* jaune : uniquement l'action « soumission » */
  --sun-press: #f1c93a;

  /* Boîte de remorque (surfaces de lecture) */
  --box: #ffffff;
  --box-2: #f1f4f4;        /* blanc de remorque un peu sali */
  --rule: #d5dcdc;
  --text: #15191b;
  --muted: #4d5759;
  --on-black: #e9eeee;
  --on-black-muted: #a9b6b7;

  --display: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  --body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-sm: .875rem;
  --fs-base: 1.0625rem;
  --fs-lg: clamp(1.125rem, 1.02rem + .45vw, 1.3125rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  --fs-h1: clamp(2.75rem, 1.6rem + 4.6vw, 6rem);

  --wrap: 1280px;
  --gutter: clamp(1.125rem, .5rem + 2.6vw, 3rem);
  --sec: clamp(4.5rem, 3rem + 6vw, 9rem);
  --track: .14em;          /* lettrage espacé de la livrée */
  --ease: cubic-bezier(.16, 1, .3, 1); /* sortie exponentielle */
  --head-h: 80px;
  --shadow: 0 18px 40px -22px rgba(21, 25, 27, .55);
}

::selection { background: var(--teal); color: var(--black); }
html { scrollbar-color: var(--black-3) var(--box-2); accent-color: var(--teal-deep); }

/* Base : remise à zéro légère, typographie, liens, focus, surfaces du navigateur. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
body { margin: 0; font-family: var(--body); font-size: var(--fs-base); line-height: 1.62; color: var(--text); background: var(--box); -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.04; letter-spacing: -.012em; color: inherit; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--teal-deep); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
input, textarea { caret-color: var(--teal-deep); }
:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 3px; }
.wrap-black :focus-visible, .phead :focus-visible, .foot :focus-visible, .close :focus-visible, .hero :focus-visible, .band--black :focus-visible { outline-color: var(--sun); }
main:focus { outline: none; }
.i { width: 1.25em; height: 1.25em; flex: none; }

/* Lettrage de la livrée : capitales espacées, comme « Climatisation / Chauffage / Ventilation » sur les camions. */
.letter { font-family: var(--display); font-weight: 500; font-size: var(--fs-sm); letter-spacing: var(--track); text-transform: uppercase; line-height: 1.4; }
.letter--slash { display: flex; flex-wrap: wrap; }
.letter--slash > * + *::before { content: '/'; margin: 0 .7em; opacity: .55; }
.tel-num { font-family: var(--display); font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; white-space: nowrap; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--sun); color: var(--black); padding: .75rem 1.25rem; font-weight: 700; }
.skip:focus { top: 1rem; }

/* Mise en page : conteneur, bandes, titres de section, la courbe de la livrée (sweep). */
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

.band { padding-block: var(--sec); }
.band--grey { background: var(--box-2); }
.band--black { background: var(--black); color: var(--on-black); }
.band--teal { background: var(--teal); color: var(--teal-ink); }
.band--tight { padding-block: calc(var(--sec) * .6); }

/* Titre de section : le titre parle seul, pas d'étiquette au-dessus. */
.sechead { max-width: 52rem; margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 4rem); }
.sechead__h, .faq__h, .close__h { font-family: var(--display); font-size: clamp(1.75rem, 1.2rem + 2.1vw, 3rem); font-weight: 600; letter-spacing: .05em; line-height: 1.08; text-transform: uppercase; }
.sechead__p { margin-top: 1.1rem; max-width: 40rem; font-size: var(--fs-lg); color: var(--muted); }
.band--black .sechead__p { color: var(--on-black-muted); }
.band--teal .sechead__p { color: var(--teal-ink); }
.sechead--row { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; }
.sechead--row > div { max-width: 52rem; }

.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }

/* La courbe : panneau sarcelle qui entre par un bord, séparé du noir par un filet blanc (dessin des fourgons).
   Le SVG s'étire (preserveAspectRatio none); le filet garde son épaisseur (vector-effect). */
.sweep { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sweep__fill { fill: var(--teal); }
.sweep__pin { fill: none; stroke: var(--pin); stroke-width: 6; vector-effect: non-scaling-stroke; }
/* Raccord courbe sarcelle → noir (haut d'une bande noire) et courbe horizontale (mobile) */
.join { position: absolute; left: 0; right: 0; top: -1px; width: 100%; height: clamp(3.5rem, 2rem + 5vw, 7rem); pointer-events: none; }
.join__fill { fill: var(--teal); }
.join__pin { fill: none; stroke: var(--pin); stroke-width: 6; vector-effect: non-scaling-stroke; }
.areas-band { position: relative; padding-top: calc(var(--sec) + clamp(2rem, 1rem + 3vw, 4rem)); }
.sweep-h { display: block; width: 100%; height: 100%; }
.sweep--slide { transform: translateX(var(--sweep-from, 18%)); opacity: 0; transition: transform 1.1s var(--ease), opacity .5s var(--ease); }
.sweep--slide.is-in { transform: none; opacity: 1; }
html:not(.js) .sweep--slide { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sweep--slide { transform: none; opacity: 1; } }

/* Boutons : coins carrés comme les panneaux de la livrée. Jaune = soumission (seul usage du jaune). */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 3.4rem; padding: .85rem 1.6rem; border: 2px solid transparent; font-family: var(--display); font-weight: 600; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .3s var(--ease); }
.btn .i { width: 1.15rem; height: 1.15rem; transition: transform .3s var(--ease); }
.btn:hover .i:last-child { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.btn--block { width: 100%; white-space: normal; text-align: center; }

.btn--sun { background: var(--sun); color: var(--black); }
.btn--sun:hover { background: var(--sun-press); }
.btn--black { background: var(--black); color: #fff; }
.btn--black:hover { background: var(--black-3); }
.btn--line { border-color: var(--black); color: var(--black); background: transparent; }
.btn--line:hover { background: var(--black); color: #fff; }
.btn--line-light { border-color: rgba(255, 255, 255, .6); color: #fff; background: transparent; }
.btn--line-light:hover { background: #fff; color: var(--black); border-color: #fff; }
.btn[disabled], .btn[aria-busy='true'] { opacity: .65; cursor: progress; }

.btnrow { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Lien flèche */
.more { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--display); font-weight: 600; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-deep); text-decoration: none; }
.more .i { width: 1rem; height: 1rem; transition: transform .3s var(--ease); }
.more:hover .i { transform: translateX(4px); }
.band--black .more, .band--teal .more { color: inherit; }
@media (max-width: 560px) { .btn { white-space: normal; text-align: center; } }

/* En-tête collant (logo, téléphone, soumission, menu). La navigation est dans 41-nav.css. */

.head { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .3s var(--ease); }
/* Le flou est sur un pseudo-élément : un backdrop-filter sur .head ferait de lui le bloc conteneur du menu mobile (position: fixed). */
.head::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .97); backdrop-filter: saturate(1.3) blur(10px); }
.head.is-stuck { border-bottom-color: var(--rule); box-shadow: 0 10px 24px -20px rgba(21, 25, 27, .6); }
.head__in { display: flex; align-items: center; gap: 1rem; min-height: var(--head-h); }
.logo { flex: none; display: block; margin-right: auto; }
.logo img { width: clamp(150px, 118px + 6vw, 200px); height: auto; }

.head__tel { display: none; align-items: center; gap: .6rem; color: var(--black); text-decoration: none; font-family: var(--display); font-weight: 600; letter-spacing: .05em; font-size: 1.125rem; line-height: 1.1; white-space: nowrap; }
.head__tel small { display: block; font-family: var(--body); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.head__tel .i { width: 2.5rem; height: 2.5rem; padding: .62rem; background: var(--black); color: var(--teal); }
.head__cta { display: none; min-height: 2.9rem; padding-inline: 1.2rem; font-size: .85rem; }
@media (min-width: 640px) { .head__tel { display: inline-flex; } }
@media (max-width: 639px) { .head__tel { display: inline-flex; } .head__tel > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .head__tel .i { width: 3rem; height: 3rem; padding: .8rem; background: var(--sun); color: var(--black); } }
@media (min-width: 1360px) { .head__cta { display: inline-flex; } }

.burger { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border: 2px solid var(--black); background: #fff; }
.burger__box { position: relative; width: 20px; height: 14px; }
.burger__box span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--black); transition: transform .3s var(--ease), opacity .2s; }
.burger__box span:nth-child(1) { top: 0; }
.burger__box span:nth-child(2) { top: 6px; }
.burger__box span:nth-child(3) { top: 12px; }
.burger[aria-expanded='true'] .burger__box span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] .burger__box span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] .burger__box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 1100px) { .burger { display: none; } }

/* Navigation principale en lettrage de livrée. Mobile (< 1100 px) : panneau plein écran noir. Bureau : liste horizontale + sous-menus. */
.nav__list { list-style: none; }
.nav__link { text-decoration: none; color: var(--black); font-family: var(--display); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.nav__more { display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: inherit; }
.nav__more .i { transition: transform .3s var(--ease); }
.nav__more[aria-expanded='true'] .i { transform: rotate(180deg); }
.nav__sub, .mega { list-style: none; }
.nav__all { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--display); font-weight: 600; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.nav__all .i { width: 1rem; height: 1rem; }
.mega a { display: block; text-decoration: none; color: inherit; }
.mega strong { display: block; font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: .02em; }
.mega small { display: block; color: var(--muted); font-size: .8125rem; line-height: 1.45; margin-top: .2rem; }

/* ----- Mobile : panneau noir comme la carrosserie ----- */
@media (max-width: 1099px) {
  .nav { position: fixed; inset: var(--nav-top, var(--head-h)) 0 0 0; z-index: 49; background: var(--black); color: var(--on-black); overflow-y: auto; overscroll-behavior: contain; padding: 1rem var(--gutter) 6rem; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .3s var(--ease), visibility 0s .3s; }
  .nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .3s var(--ease); }
  .nav__item { display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .nav__link { display: block; padding: 1.05rem 0; font-size: 1.2rem; color: #fff; }
  .nav__link[aria-current='page'], .nav__link[data-active] { color: var(--teal); }
  .nav__more { width: 3rem; height: 3rem; color: #fff; }
  .nav__panel { grid-column: 1 / -1; display: none; padding: 0 0 1.1rem; }
  .nav__more[aria-expanded='true'] + .nav__panel { display: block; }
  .nav__sub li a { display: block; padding: .55rem 0; color: var(--on-black); text-decoration: none; font-weight: 600; }
  .mega { display: grid; gap: .1rem; }
  .mega a { padding: .5rem 0; color: var(--on-black); }
  .mega small { display: none; }
  .nav__all { margin-top: .6rem; color: var(--teal); }
  .nav__extra { display: grid; gap: .75rem; margin-top: 1.75rem; }
  .nav__extra .btn--line { border-color: rgba(255, 255, 255, .6); color: #fff; }
  body.nav-open { overflow: hidden; }
}

/* ----- Bureau ----- */
@media (min-width: 1100px) {
  .nav__list { display: flex; align-items: center; gap: .15rem; }
  .nav__item { position: relative; display: flex; align-items: center; }
  .nav__link { position: relative; padding: .7rem .75rem; font-size: .82rem; transition: color .2s; }
  .nav__link::after { content: ''; position: absolute; left: .75rem; right: .75rem; bottom: .35rem; height: 3px; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
  .nav__link:hover::after, .nav__link[aria-current='page']::after, .nav__link[data-active]::after { transform: none; }
  .nav__item--panel .nav__link { padding-right: .2rem; }
  .nav__item--panel .nav__link::after { right: .2rem; }
  .nav__more { width: 1.6rem; height: 2.4rem; margin-right: .2rem; }
  .nav__more .i { width: 1rem; height: 1rem; }
  .nav__panel { position: absolute; top: calc(100% + .7rem); left: -.5rem; min-width: 16rem; padding: 1.1rem; background: var(--black); color: var(--on-black); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .3s var(--ease), visibility 0s .3s; }
  .nav__panel::before { content: ''; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
  .nav__item--panel:hover .nav__panel, .nav__item--panel:focus-within .nav__panel, .nav__more[aria-expanded='true'] + .nav__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .3s var(--ease); }
  .nav__sub li a { display: block; padding: .55rem .75rem; color: var(--on-black); font-weight: 600; text-decoration: none; }
  .nav__sub li a:hover, .mega a:hover, .nav__sub a[aria-current='page'], .mega a[aria-current='page'] { background: var(--black-3); color: #fff; }
  .nav__item--mega .nav__panel { width: min(44rem, 80vw); }
  .mega { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem; }
  .mega a { padding: .8rem .85rem; }
  .mega small { color: var(--on-black-muted); }
  .nav__all { margin: .85rem .75rem 0; padding-top: .85rem; border-top: 1px solid rgba(255, 255, 255, .14); width: calc(100% - 1.5rem); color: var(--teal); }
  .nav__extra { display: none; }
}

/* Bande de remorque : la bande sarcelle peinte sur la remorque, « RÉSIDENTIEL · 514-836-2665 · COMMERCIAL »,
   puis les faits de l'entreprise et le statut du bureau. Sous le bandeau d'accueil et sous chaque en-tête de page. */
.trailer { background: var(--teal); color: var(--teal-ink); border-top: 6px solid var(--pin); border-bottom: 6px solid var(--black); }
.trailer__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem 2.5rem; padding-block: 1.15rem; }
.trailer .letter { display: flex; flex-wrap: wrap; align-items: center; }
.trailer .letter > * + *::before { content: '·'; margin: 0 .85rem; font-family: var(--display); font-size: .85rem; font-weight: 700; letter-spacing: 0; }
.trailer__main { color: var(--black); font-size: .85rem; font-weight: 600; }
.trailer__main a { color: var(--black); text-decoration: none; font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); letter-spacing: .08em; }
.trailer__main a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.trailer__facts { font-size: .72rem; font-weight: 600; }
.trailer__status { display: inline-flex; align-items: center; gap: .55rem; font-size: .72rem; font-weight: 600; color: var(--black); }
.trailer__status::before { content: ''; width: .6rem; height: .6rem; border-radius: 50%; background: var(--black); }
.trailer__status.is-open::before { background: #127a35; box-shadow: 0 0 0 3px rgba(18, 122, 53, .25); }
@media (max-width: 720px) { .trailer__in { flex-direction: column; align-items: flex-start; } .trailer .letter { flex-direction: column; align-items: flex-start; gap: .3rem; } .trailer .letter > * + *::before { content: none; } }
@media (max-width: 999px) { .hero + .trailer { border-top: 0; } }

/* Pied de page (panneau noir, téléphone à l'échelle du lettrage des camions) + barre d'action mobile. */
.foot { background: var(--black); color: var(--on-black-muted); font-size: .9375rem; padding-top: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.foot a { color: #fff; text-decoration: none; }
.foot a:hover { color: var(--teal); }
.foot__cta { display: grid; gap: 1.25rem; padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.foot__line { color: var(--teal); }
.foot__big { font-size: clamp(1.75rem, 1rem + 4.6vw, 7rem); line-height: 1; color: #fff !important; letter-spacing: .04em; }
.foot__big:hover { color: var(--teal) !important; }
.foot__btns { display: flex; flex-wrap: wrap; gap: .75rem; }
.foot .btn--sun, .foot .btn--sun:hover { color: var(--black); }
body:has(.close) .foot__cta { display: none; }
body:has(.close) .foot { padding-top: 0; }
.foot__grid { display: grid; gap: 2.5rem 2rem; padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
@media (min-width: 1000px) { .foot__grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; } }
.foot__col ul { list-style: none; display: grid; gap: .5rem; }
.foot__col--id { display: grid; gap: .9rem; align-content: start; }
.foot__logo { width: 180px; height: auto; margin-bottom: .25rem; }
.foot__addr a { color: var(--on-black-muted); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); }
.foot__h { margin-bottom: 1rem; font-family: var(--display); font-weight: 600; font-size: .8rem; letter-spacing: var(--track); text-transform: uppercase; }
.foot__h a { color: var(--teal); }
.foot__h--2 { margin-top: 1.75rem; color: var(--teal); }
.foot__social { display: flex !important; flex-wrap: wrap; gap: .5rem 1rem !important; }
.foot__social a { color: var(--on-black-muted); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; padding-block: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .8125rem; }
.foot__base a { color: var(--on-black-muted); text-decoration: underline; }

/* Barre d'appel mobile */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: 1fr 1.4fr; padding-bottom: env(safe-area-inset-bottom); background: var(--black); border-top: 3px solid var(--teal); transform: translateY(110%); transition: transform .4s var(--ease); }
.dock.is-on { transform: none; }
.dock a { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.6rem; font-family: var(--display); font-weight: 600; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.dock .i { width: 1.15rem; height: 1.15rem; }
.dock__call { color: #fff; }
.dock__form { background: var(--sun); color: var(--black); }
@media (min-width: 900px) { .dock { display: none; } }
@media (max-width: 899px) { body { padding-bottom: calc(3.8rem + env(safe-area-inset-bottom)); } }

/* Pages intérieures : bandeau noir avec courbe sarcelle, fil d'Ariane, contenu + barre latérale, texte courant, liens connexes, contact. */
.phead { position: relative; background: var(--black); color: #fff; overflow: hidden; isolation: isolate; }
.phead .sweep { z-index: -1; }
.phead__in { position: relative; display: grid; gap: 2.5rem; padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem) clamp(3.25rem, 2rem + 4.5vw, 6rem); align-items: center; }
.phead__txt { max-width: 46rem; }
.phead__h1 { font-size: clamp(2.25rem, 1.4rem + 3.2vw, 4.25rem); font-weight: 700; }
.phead__lead { margin-top: 1.25rem; max-width: 40rem; font-size: var(--fs-lg); color: var(--on-black-muted); }
.phead__btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.phead--img .phead__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(13, 49, 52, .35)); }
@media (min-width: 1000px) { .phead--img .phead__in { grid-template-columns: 1.15fr 1fr; } .phead--img .phead__txt { max-width: none; } }
@media (max-width: 999px) { .phead .sweep { opacity: .9; } .phead:not(.phead--img) .sweep { display: none; } }

.crumbs { margin-bottom: 1.6rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .6rem; font-family: var(--display); font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.crumbs li { display: inline-flex; align-items: center; gap: .6rem; color: var(--on-black-muted); }
.crumbs li + li::before { content: '/'; opacity: .5; }
.crumbs a { color: #fff; text-decoration: none; }
.crumbs a:hover { color: var(--teal); }

.content { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
@media (min-width: 1000px) { .content { grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; } .content--wide { grid-template-columns: minmax(0, 1fr); } }
.content__main { min-width: 0; display: grid; gap: clamp(3rem, 2rem + 3vw, 4.5rem); }
.content__main > * { min-width: 0; }

/* Texte courant */
.prose { max-width: 46rem; }
.content--wide .prose { max-width: none; }
.content--wide .prose > :is(p, h2, h3, ul:not([class]), ol:not([class]), .checks) { max-width: 46rem; }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.25rem); margin-top: 3.25rem; }
.prose h3 { font-size: var(--fs-h3); margin-top: 2.1rem; font-weight: 600; }
.prose h2 + *, .prose h3 + * { margin-top: .85rem; }
.prose > :first-child { margin-top: 0; }
.prose ul:not([class]), .prose ol:not([class]) { padding-left: 1.25rem; display: grid; gap: .5rem; }
.prose li::marker { color: var(--teal-deep); }
.prose ol:not([class]) > li::marker { font-family: var(--display); font-weight: 700; }
.prose strong { color: var(--black); }
.prose .lead { font-size: var(--fs-lg); color: var(--muted); }
.prose .note { padding: 1.2rem 1.35rem; background: var(--box-2); font-size: .9375rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.prose th, .prose td { padding: .8rem .95rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.prose thead th { background: var(--black); color: #fff; font-family: var(--display); font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.prose tbody th { font-weight: 700; }
.tablewrap { overflow-x: auto; border: 1px solid var(--rule); }
.prose figure { margin-inline: 0; }
.prose figcaption { margin-top: .6rem; font-size: .8125rem; color: var(--muted); }

/* Barre latérale : panneau noir avec le téléphone en lettrage */
.side { display: grid; gap: 1.5rem; }
@media (min-width: 1000px) { .side { position: sticky; top: calc(var(--head-h) + 1.5rem); } }
.side__card { padding: 1.75rem; background: var(--black); color: var(--on-black-muted); }
.side__t { color: #fff; font-family: var(--display); font-size: 1.5rem; font-weight: 700; }
.side__p { margin: .5rem 0 1.25rem; font-size: .9375rem; }
.side__or { margin-top: 1.4rem; color: var(--teal); font-size: .72rem; }
.side__tel { display: block; margin-top: .3rem; color: #fff; text-decoration: none; font-size: 1.6rem; }
.side__tel:hover { color: var(--teal); }
.side__list { list-style: none; display: grid; gap: .45rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .7rem; }
.side__nav { padding: 1.4rem 0 0; border-top: 3px solid var(--black); }
.side__nt { margin-bottom: .6rem; font-family: var(--display); font-weight: 600; font-size: .78rem; letter-spacing: var(--track); text-transform: uppercase; }
.side__nav ul { list-style: none; display: grid; }
.side__nav a { display: block; padding: .5rem 0; border-bottom: 1px solid var(--rule); color: var(--text); text-decoration: none; font-size: .9375rem; }
.side__nav a:hover { color: var(--teal-deep); }
.side__nav a[aria-current='page'] { color: var(--teal-deep); font-weight: 700; }

/* Liens connexes : rangées, pas de cartes */
.related__h { font-size: var(--fs-h3); margin-bottom: .75rem; }
.related ul { list-style: none; border-top: 3px solid var(--black); }
.related a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); color: var(--black); font-family: var(--display); font-weight: 600; font-size: 1.1rem; text-decoration: none; transition: color .2s; }
.related a:hover { color: var(--teal-deep); }
.related .i { color: var(--teal-deep); width: 1.1rem; height: 1.1rem; }

.where__cities { margin-top: 1.5rem; }

/* Page contact */
.contact { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); align-items: start; }
.contact > * { min-width: 0; }
@media (min-width: 1000px) { .contact { grid-template-columns: 1.4fr 1fr; } .contact__form { margin-top: calc(-1 * clamp(4rem, 3rem + 3vw, 6rem)); position: relative; } }
.contact__info { display: grid; gap: 1.5rem; }
.contact__card { padding: 1.75rem; border: 2px solid var(--black); }
.contact__next { padding: 1.75rem; background: var(--black); color: var(--on-black-muted); }
.contact__next .contact__h, .contact__next strong { color: #fff; }
.contact__next .close__steps { margin: 1rem 0 0; }
.contact__h { font-size: 1.35rem; margin-bottom: 1rem; }
.contact__tel { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem; background: var(--teal); color: var(--black); text-decoration: none; font-family: var(--display); font-weight: 600; letter-spacing: .05em; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); line-height: 1.1; }
.contact__tel small { display: block; font-size: .7rem; letter-spacing: var(--track); text-transform: uppercase; }
.contact__tel .i { width: 2.6rem; height: 2.6rem; padding: .65rem; background: var(--black); color: var(--teal); }
.contact__dl { display: grid; gap: 1.1rem; margin: 1.5rem 0 0; }
.contact__dl dt { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--black); font-size: .9375rem; }
.contact__dl dt .i { width: 1.1rem; height: 1.1rem; color: var(--teal-deep); }
.contact__dl dd { margin: .25rem 0 0 1.6rem; color: var(--muted); font-size: .9375rem; }

/* Repères (À propos) : lettrage, pas de tuiles */
.prose .facts { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); border-top: 3px solid var(--black); }
.facts > div { padding: 1.25rem 1.25rem 1.25rem 0; border-bottom: 1px solid var(--rule); }
.facts strong { display: block; font-family: var(--display); font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); font-weight: 700; line-height: 1; color: var(--black); }
.facts span { display: block; margin-top: .5rem; font-size: .875rem; color: var(--muted); }

/* Composants de la livrée : rangées de services, bande de lettrage, crochets, villes, régions, témoignages, listes. */

/* Services : rangées de lettrage. Au survol, le panneau sarcelle balaie la rangée (même geste que la courbe). */
.svc { list-style: none; border-top: 3px solid var(--black); }
.svc__item { border-bottom: 1px solid var(--rule); }
.svc__a { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr auto; gap: .35rem 2rem; align-items: center; padding: clamp(1.15rem, .9rem + 1vw, 1.75rem) .25rem; color: var(--black); text-decoration: none; }
@media (min-width: 860px) { .svc__a { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; } }
.svc__a::before { content: ''; position: absolute; inset: 0 -.75rem; z-index: -1; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); }
.svc__a:hover::before, .svc__a:focus-visible::before { transform: none; }
.svc__h { font-family: var(--display); font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
.svc__p { grid-column: 1; color: var(--muted); font-size: .97rem; max-width: 34rem; transition: color .3s; }
@media (min-width: 860px) { .svc__p { grid-column: auto; } }
.svc__a:hover .svc__p { color: var(--teal-ink); }
.svc__go { grid-row: 1; grid-column: -2; display: grid; place-items: center; width: 3rem; height: 3rem; background: var(--black); color: #fff; transition: transform .45s var(--ease), background-color .3s; }
@media (max-width: 859px) { .svc__go { grid-row: 1 / span 2; } }
.svc__a:hover .svc__go { transform: translateX(4px); }
.prose .svc { padding: 0; }
.prose .svc__h { margin-top: 0; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); }


/* Liste à crochets */
.checks { list-style: none; display: grid; gap: .75rem; }
.checks li { display: flex; gap: .8rem; align-items: flex-start; }
.checks .i { margin-top: .2rem; width: 1.35rem; height: 1.35rem; padding: .22rem; background: var(--black); color: var(--teal); stroke-width: 2.5; }
.prose .checks { padding: 0; }

/* Villes et régions */
.cities { list-style: none; display: grid; gap: 0 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.cities a { display: flex; align-items: center; gap: .55rem; padding: .8rem 0; border-bottom: 1px solid var(--rule); color: var(--black); font-weight: 600; text-decoration: none; transition: color .2s; }
.cities a:hover { color: var(--teal-deep); }
.cities .i { width: 1rem; height: 1rem; color: var(--teal-deep); }
.regions { list-style: none; display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.regions a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.35rem 1.5rem; background: var(--black); color: #fff; font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: .03em; text-decoration: none; transition: background-color .3s; }
.regions a:hover { background: var(--teal); color: var(--black); }
.regions .i { color: var(--teal); }
.regions a:hover .i { color: var(--black); }

/* Témoignages : bande sarcelle, une grande citation, deux plus petites */
.reviews-band { color: var(--teal-ink); }
.reviews__score { display: flex; flex-direction: column; gap: .4rem; font-weight: 600; color: var(--black); }
.stars { display: flex; gap: .2rem; color: var(--black); }
.i--star { width: 1.15rem; height: 1.15rem; fill: currentColor; stroke: none; }
.review { margin: 0; }
.review blockquote { margin: 0; }
.review--lead blockquote p { font-family: var(--display); font-weight: 500; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.95rem); line-height: 1.3; color: var(--black); max-width: 56rem; text-wrap: pretty; }
.review--lead blockquote p::before { content: '« '; } .review--lead blockquote p::after { content: ' »'; }
.review figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin-top: 1.25rem; color: var(--black); }
.review figcaption .letter { font-size: .72rem; color: var(--teal-ink); }
.reviews__rest { display: grid; gap: 2.5rem 3rem; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); border-top: 3px solid var(--black); }
@media (min-width: 860px) { .reviews__rest { grid-template-columns: 1fr 1fr; } }
.reviews__rest blockquote p { color: var(--teal-ink); font-size: 1.02rem; }

/* Grand numéro (bandeau de fin) */
.tel-xl { display: inline-block; color: #fff; text-decoration: none; font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem); line-height: 1; }
.tel-xl:hover { color: var(--teal); }

/* Liste de services (pages locales) */
.prose .svclist { list-style: none; padding: 0; display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.svclist a { display: flex; gap: .75rem; align-items: center; height: 100%; padding: .9rem 1rem; background: var(--box-2); color: var(--black); text-decoration: none; font-size: .9375rem; transition: background-color .25s, color .25s; }
.svclist a:hover { background: var(--black); color: #fff; }
.svclist .i { flex: none; width: 1.3rem; height: 1.3rem; color: var(--teal-deep); }
.svclist a:hover .i { color: var(--teal); }
.svclist strong { display: block; font-family: var(--display); font-weight: 600; font-size: 1.02rem; letter-spacing: .04em; text-transform: uppercase; }

/* Liste d'articles (/conseils/) */
.prose .posts { list-style: none; padding: 0; display: grid; gap: 0 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); border-top: 3px solid var(--black); }
.posts a { display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1.6rem 0; border-bottom: 1px solid var(--rule); color: var(--muted); text-decoration: none; }
.prose .posts h2 { margin: 0; font-size: var(--fs-h3); color: var(--black); transition: color .2s; }
.posts a:hover h2 { color: var(--teal-deep); }
.posts p { flex: 1; font-size: .97rem; }

/* Apparition au défilement (activée par le script seulement) */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .9s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* FAQ, bandeau de fin (noir + courbe sarcelle), boîte du formulaire (boîte de remorque blanche), confirmation. */

/* FAQ : rangées séparées par des filets */
.faq__h { margin-bottom: 1.75rem; }
.faq__list { border-top: 3px solid var(--black); }
.qa { border-bottom: 1px solid var(--rule); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.2rem 0; font-family: var(--display); font-weight: 600; font-size: 1.15rem; color: var(--black); cursor: pointer; list-style: none; transition: color .2s; }
.qa summary:hover { color: var(--teal-deep); }
.qa summary::-webkit-details-marker { display: none; }
.qa__mk { position: relative; flex: none; width: 2rem; height: 2rem; background: var(--black); transition: background-color .3s; }
.qa__mk::before, .qa__mk::after { content: ''; position: absolute; left: 50%; top: 50%; width: .8rem; height: 2px; margin: -1px 0 0 -.4rem; background: var(--teal); transition: transform .35s var(--ease); }
.qa__mk::after { transform: rotate(90deg); }
.qa[open] .qa__mk { background: var(--teal); }
.qa[open] .qa__mk::before, .qa[open] .qa__mk::after { background: var(--black); }
.qa[open] .qa__mk::after { transform: rotate(0); }
.qa__a { padding: 0 3.25rem 1.4rem 0; color: var(--muted); max-width: 46rem; }
.qa__a p + p { margin-top: .75rem; }

/* Bandeau de fin */
.close { position: relative; isolation: isolate; background: var(--black); color: var(--on-black-muted); padding-block: var(--sec); overflow: hidden; }
.close .sweep { z-index: -1; }
@media (max-width: 999px) { .close .sweep { display: none; } }
.close__grid > * { min-width: 0; }
.close__grid { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 5rem); align-items: start; }
@media (min-width: 1000px) { .close__grid { grid-template-columns: 1fr 1.05fr; } }
.close__h { color: #fff; max-width: 16ch; }
.close__intro > p:not([class]) { margin-top: 1.1rem; font-size: var(--fs-lg); max-width: 34rem; }
.close__steps { list-style: none; counter-reset: s; display: grid; gap: 1.1rem; margin: 2.25rem 0; }
.close__steps li { counter-increment: s; position: relative; padding-left: 3.1rem; }
.close__steps li::before { content: counter(s); position: absolute; left: 0; top: -.1rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; background: var(--teal); color: var(--black); font-family: var(--display); font-weight: 700; }
.close__steps strong { color: #fff; }
.close__or { margin-bottom: .5rem; font-family: var(--display); font-size: .78rem; font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--teal); }
.close__small { margin-top: .75rem; font-size: .8125rem; }

/* Boîte du formulaire */
.qcard { position: relative; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); background: var(--box); color: var(--text); border: 2px solid var(--black); box-shadow: var(--shadow); scroll-margin-top: calc(var(--head-h) + 1rem); }
.qcard__h { font-size: clamp(1.5rem, 1.25rem + .9vw, 2rem); color: var(--black); }
.qcard__p { margin: .5rem 0 1.6rem; color: var(--muted); font-size: .9375rem; }
.qform__grid { display: grid; gap: 1.05rem; }
@media (min-width: 560px) { .qform__grid { grid-template-columns: 1fr 1fr; } .field--full { grid-column: 1 / -1; } }
.field { display: grid; gap: .35rem; align-content: start; }
.field label { font-family: var(--display); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--black); }
.req { color: #a8201a; }
.opt { font-family: var(--body); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 3.1rem; padding: .7rem .9rem; border: 0; border-bottom: 2px solid var(--black); background: var(--box-2); font-size: 1rem; transition: background-color .2s, border-color .2s, box-shadow .2s; }
.field input::placeholder, .field textarea::placeholder { color: #66706f; }
.field textarea { resize: vertical; min-height: 6.5rem; }
.field select { appearance: none; padding-right: 2.5rem; background: var(--box-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2315191b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right .9rem center; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background-color: #fff; border-bottom-color: var(--teal-deep); box-shadow: 0 0 0 3px rgba(11, 93, 97, .22); }
.field [aria-invalid='true'] { border-bottom-color: #a8201a; background-color: #fdf1f0; }
.field__err { font-size: .8125rem; font-weight: 600; color: #a8201a; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin-top: 1rem; }
.qform__legal { margin: 1.2rem 0 .8rem; font-size: .8125rem; color: var(--muted); }
.qform__status { min-height: 1.25rem; margin-bottom: .75rem; font-size: .9375rem; font-weight: 600; }
.qform__status:empty { margin: 0; min-height: 0; }
.qform__status.is-error { color: #a8201a; }

/* Confirmation */
.qdone { padding: 1rem 0; }
.qdone:focus { outline: none; }
.qdone__ic { display: grid; place-items: center; width: 3.75rem; height: 3.75rem; margin-bottom: 1.25rem; background: var(--teal); color: var(--black); }
.qdone__ic .i { width: 1.9rem; height: 1.9rem; stroke-width: 2.5; }
.qdone__t { margin-bottom: .75rem; font-family: var(--display); font-size: 1.6rem; font-weight: 700; color: var(--black); }
.qdone p:not([class]) { color: var(--muted); max-width: 30rem; }

/* Accueil : bandeau principal en livrée, flotte, fondateur, pourquoi nous, zones, FAQ. */

/* Bandeau principal : noir lustré à gauche, panneau sarcelle qui entre par la droite, Karl debout dedans. */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--black); color: var(--on-black); }
.hero .sweep { z-index: -1; }
.hero__in { display: grid; gap: 2rem; align-items: end; padding-top: clamp(2.75rem, 1.5rem + 5vw, 6rem); }
.hero__txt { padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); max-width: 44rem; }
.hero__line { margin-top: 2.2rem; color: var(--teal); }
.hero__h1 { margin-top: 0; font-size: var(--fs-h1); font-weight: 700; line-height: .98; letter-spacing: -.02em; color: #fff; }
.hero__h1 span { display: block; }
.hero__lead { margin-top: 1.6rem; max-width: 36rem; font-size: var(--fs-lg); color: var(--on-black-muted); }
.hero__tel { display: inline-block; margin-top: .6rem; color: #fff; text-decoration: none; font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.5rem); line-height: 1; letter-spacing: .05em; border-bottom: 4px solid var(--teal); padding-bottom: .35rem; transition: color .2s; }
.hero__tel:hover { color: var(--teal); }
.hero__btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
@media (min-width: 1000px) {
  .hero__in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3rem; min-height: min(calc(100svh - var(--head-h)), 46rem); align-items: center; }
  .hero__txt { padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
  .hero__band { display: none; }
}
@media (max-width: 999px) {
  .hero .sweep { display: none; }
  .hero__txt { padding-bottom: 2.5rem; }
  .hero__band { height: 4.5rem; margin-bottom: -1px; }
}
@media (max-width: 520px) { .hero__btns .btn { width: 100%; } }

/* La flotte, pleine largeur sous le bandeau */
.fleet img { width: 100%; aspect-ratio: 2854 / 972; object-fit: cover; }
@media (max-width: 699px) { .fleet img { aspect-ratio: 4 / 3; object-position: 26% 50%; } }

/* Fondateur (panneau noir) */
.founder--fleet { position: relative; isolation: isolate; overflow: hidden; }
.founder--fleet .founder__sweep { z-index: -1; }
@media (max-width: 899px) { .founder--fleet .founder__sweep { display: none; } }
.founder__fleet { margin: 0; }
.founder__fleet img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.founder__fleet figcaption { margin-top: .8rem; color: var(--on-black-muted); font-size: .7rem; }
.founder__karl { position: relative; isolation: isolate; overflow: hidden; margin: 0; padding-top: 2rem; min-height: 24rem; display: flex; align-items: flex-end; justify-content: center; }
.founder__karl .sweep { z-index: -1; }
.founder__karl img { width: min(100%, 26rem); }
.founder__karl figcaption { position: absolute; left: 0; bottom: 1.5rem; display: grid; gap: .2rem; padding: .8rem 1.1rem; background: var(--black); color: #fff; border: 1px solid rgba(255, 255, 255, .2); }
.founder__karl figcaption strong { font-family: var(--display); font-size: 1.15rem; }
.founder__karl figcaption .letter { font-size: .72rem; color: var(--teal); }
.founder__txt > * + * { margin-top: 1.15rem; }
.founder__txt .sechead__h { color: #fff; }
.founder__lead { font-size: var(--fs-lg); color: #fff; }
.founder__txt p:not([class]) { color: var(--on-black-muted); }
.founder__quote { margin: 2rem 0 0; padding: 1.35rem 1.5rem; background: var(--teal); color: var(--black); }
.founder__txt .founder__quote p { font-family: var(--display); font-weight: 500; font-size: 1.2rem; line-height: 1.35; color: var(--black); }
.founder__quote cite { display: block; margin-top: .6rem; font-style: normal; font-size: .7rem; color: var(--teal-ink); }
.founder__txt .more { margin-top: 1.75rem; color: var(--teal); }

/* Pourquoi nous : définitions entre filets, pas de tuiles */
.why__grid { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
@media (min-width: 1000px) { .why__grid { grid-template-columns: 1fr 1.3fr; align-items: start; } .why__intro { position: sticky; top: calc(var(--head-h) + 2rem); } }
.why { display: grid; margin: 0; border-top: 3px solid var(--black); }
@media (min-width: 640px) { .why { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
.why > div { padding: 1.5rem 0 1.6rem; border-bottom: 1px solid var(--rule); }
.why dt { font-family: var(--display); font-weight: 600; font-size: 1.3rem; color: var(--black); }
.why dd { margin: .5rem 0 0; color: var(--muted); font-size: .97rem; }

/* Zones (panneau noir) */
.areas { list-style: none; display: grid; gap: 2.5rem 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.area { border-top: 3px solid var(--teal); padding-top: 1.25rem; }
.area__h { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #fff; font-family: var(--display); font-size: 1.55rem; font-weight: 600; text-decoration: none; }
.area__h .i { color: var(--teal); transition: transform .35s var(--ease); }
.area__h:hover .i { transform: translateX(4px); }
.area p { margin: .55rem 0 1.25rem; color: var(--on-black-muted); font-size: .95rem; }
.area ul { list-style: none; display: grid; }
.area ul a { display: block; padding: .55rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); color: #fff; font-family: var(--display); font-weight: 500; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: color .2s; }
.area ul a:hover { color: var(--teal); }
.areas__more { margin-top: 2.25rem; color: var(--on-black-muted); font-size: .95rem; }
.areas__more a { color: #fff; }

/* FAQ de l'accueil */
.faqwrap { display: grid; gap: 2rem; }
@media (min-width: 1000px) { .faqwrap { grid-template-columns: 1fr 2.2fr; } .faqwrap .faq { grid-column: 2; grid-row: 1; } .faqwrap__aside { grid-column: 1; grid-row: 1; align-self: start; position: sticky; top: calc(var(--head-h) + 2rem); padding-top: 5.5rem; } }
.faqwrap__p { color: var(--muted); margin-bottom: 1rem; max-width: 22rem; }
@media (min-width: 900px) { .founder--fleet .founder__fleet figcaption { color: var(--black); } }