/* ============================================================
   DITTAX — Feuille de style unique
   Plombier chauffagiste à Angers
   Mobile-first. Aucune dépendance externe.
   Palette dérivée des couleurs réelles du logo (#000000 / #23BFCC).
   ============================================================ */

/* ------------------------------------------------------------
   1. POLICES
   TODO : déposer les fichiers woff2 dans assets/fonts/ puis
   décommenter le bloc ci-dessous. Tant qu'il est commenté, la
   pile système prend le relais sans générer d'erreur 404.

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   2. VARIABLES
   ------------------------------------------------------------ */
:root {
  /* Couleurs — mesurées sur le logo officiel */
  --ink: #0B1F2A;
  --ink-soft: #16303D;
  --ink-strong: #12191F;
  --brand: #23BFCC;
  --brand-deep: #0F6E78;
  --bg: #F5F8F9;
  --surface: #FFFFFF;
  --muted: #5C6B75;
  --muted-light: #9FB0BA;
  --line: #E3EAEE;
  --line-dark: rgba(255, 255, 255, .16);

  /* Typographie */
  --font-title: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rythme */
  --wrap: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 9vw, 8rem);
  --gap: clamp(1rem, 2.5vw, 1.75rem);

  /* Trames — un seul vocabulaire graphique : le plan technique.
     Points de calepinage sur les fonds clairs, repères d'angle
     sur les blocs image, filets turquoise sur les titres. */
  --dot-light: radial-gradient(rgba(11,31,42,.09) 1px, transparent 1px);
  --dot-dark:  radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  --dot-size: 22px;

  /* Formes */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgba(11, 31, 42, .05), 0 8px 24px -16px rgba(11, 31, 42, .18);

  /* Hauteurs fixes */
  --header-h: 64px;
  --mobilebar-h: 64px;
}

@media (min-width: 1024px) {
  :root { --header-h: 78px; }
}

/* ------------------------------------------------------------
   3. RESET
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-strong);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

img, picture, svg, video { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

button, input, select, textarea { font: inherit; color: inherit; }

/* ------------------------------------------------------------
   4. ACCESSIBILITÉ
   ------------------------------------------------------------ */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Sur un fond turquoise, un contour turquoise disparaît :
   on bascule sur l'encre profonde. */
.btn--accent:focus-visible,
.mobilebar__disc:focus-visible,
.mobilebar__item--main:focus-visible {
  outline-color: var(--ink);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; }

/* ------------------------------------------------------------
   5. UTILITAIRES
   ------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 820px; }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------
   6. BOUTONS
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .75rem 1.4rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .975rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:active { transform: translateY(1px); }

.btn--lg { min-height: 54px; padding: .9rem 1.75rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }

.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: var(--brand); color: var(--ink); }

.btn--accent { background: var(--brand); color: var(--ink); }
.btn--accent:hover { background: #fff; color: var(--ink); }

.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }

.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--outline-light:hover { background: #fff; color: var(--ink); }

.btn--ghost { background: transparent; color: var(--ink); padding-inline: .5rem; }
.btn--ghost:hover { color: var(--brand-deep); }

/* ------------------------------------------------------------
   7. HEADER
   ------------------------------------------------------------ */
/* Le fond translucide et le flou sont portés par un pseudo-élément,
   PAS par .header lui-même — et ce n'est pas un détail de style.

   Un élément qui porte backdrop-filter devient le bloc conteneur de
   ses descendants en position:fixed. Le panneau de navigation mobile
   vit à l'intérieur du header : avec le flou sur .header, son
   inset:0 se calculait sur les 64px du header au lieu de la fenêtre,
   et le menu s'ouvrait tronqué à une centaine de pixels, la liste
   débordant par-dessus le contenu de la page.

   Le pseudo-élément n'étant pas un ancêtre du panneau, le flou reste
   et le menu se positionne à nouveau sur la fenêtre. */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid var(--line);
}
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
}
/* Le header respire plus large que le contenu : la navigation
   complète tient alors en ligne dès 1200px sans se casser. */
@media (min-width: 1200px) {
  .header__inner { max-width: 1400px; }
}

.header__brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  margin-right: auto;
}
/* Logo officiel. La hauteur commande, la largeur suit le ratio
   3,35:1 du fichier : height/width sont posés dans le HTML, donc
   aucun décalage au chargement (CLS = 0).
   Il descend à 30px à 359px de large, pour cohabiter avec le
   burger sans déborder. */
.header__logo {
  display: block;
  width: auto;
  height: 34px;
}
@media (max-width: 359px) { .header__logo { height: 30px; } }
@media (min-width: 1024px) { .header__logo { height: 46px; } }

.nav { display: none; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 1.4vw, 1.25rem);
}
.nav__list a {
  display: inline-block;
  white-space: nowrap;
  padding: .4rem 0;
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink-strong);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav__list a:hover { color: var(--brand-deep); border-bottom-color: var(--brand); }

.header__actions { display: none; align-items: center; gap: .75rem; }
.header__actions .btn { white-space: nowrap; }
/* Le numéro sort du header dès 768px : entre 768 et 1023px, la barre
   fixe mobile a disparu et le CTA du hero part au premier défilement.
   Sans cette règle, aucun téléphone n'est joignable en un clic. */
@media (min-width: 768px) {
  .header__actions { display: flex; }
  .header__actions .btn--primary { display: none; }
}
.btn--tel { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Burger */
.burger {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem .75rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.burger__bars {
  position: relative;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: background-color .15s ease;
}
.burger__bars::before,
.burger__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s ease, top .2s ease;
}
.burger__bars::before { top: -6px; }
.burger__bars::after  { top: 6px; }
.burger__label { font-size: .8125rem; font-weight: 600; }

.burger[aria-expanded="true"] .burger__bars { background: transparent; }
.burger[aria-expanded="true"] .burger__bars::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars::after  { top: 0; transform: rotate(-45deg); }

/* Panneau mobile ouvert.
   Colonne flex : la liste en haut, les actions poussées en bas par
   margin-top:auto. Sur un grand téléphone, sept entrées ne remplissent
   pas l'écran — autant que le vide serve à quelque chose. */
.nav.is-open {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: var(--header-h) 0 0;
  background: var(--surface);
  padding: 1rem var(--gutter) 1.75rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 99;
}
.nav.is-open .nav__list {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
/* display:block, sinon le <a> reste en ligne et son filet s'arrête
   à la fin du mot : sept traits de longueurs différentes. */
.nav.is-open .nav__list a {
  display: block;
  padding: 1rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.nav.is-open .nav__list a:hover { border-bottom-color: var(--line); }

.nav__cta { display: none; }
.nav.is-open .nav__cta {
  display: grid;
  gap: .75rem;
  margin-top: auto;
  padding-top: 2.5rem;
}

body.nav-open { overflow: hidden; }

/* ------------------------------------------------------------
   8ter. PHOTOGRAPHIES

   Deux régimes, et la différence est éditoriale, pas décorative :

   .photo            → photo réelle de DITTAX, en couleur
   .photo--ambient   → image d'ambiance issue d'une banque d'images,
                       recolorisée en duotone encre + turquoise

   Le visiteur distingue ainsi, sans qu'on ait à l'écrire, ce qui
   est un chantier de l'entreprise et ce qui est une illustration.
   ------------------------------------------------------------ */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.photo { margin: 0; }
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

.photo--ambient img {
  filter: url(#duotone);
}
/* Repli pour les navigateurs qui ignorent les filtres SVG en CSS :
   un noir et blanc contrasté vaut mieux qu'une photo brute, qui
   trancherait avec les vraies photos de chantier. */
@supports not (filter: url(#duotone)) {
  .photo--ambient img { filter: grayscale(1) contrast(1.08) brightness(1.02); }
}

/* Ratios des emplacements photo. */
.hero__media .photo img     { aspect-ratio: 4 / 3; }
.about__media .photo img    { aspect-ratio: 4 / 5; }
@media (min-width: 1024px) {
  .hero__media .photo img   { aspect-ratio: 4 / 5; }
}

/* ------------------------------------------------------------
   8bis. CONTENEURS DE MISE EN PAGE
   Ces blocs n'ont pas de style propre : ils sont positionnés par
   la grille parente. min-width:0 empêche tout débordement
   horizontal dû à un contenu insécable.
   ------------------------------------------------------------ */
.hero__photo img { border-radius: var(--radius); box-shadow: var(--shadow); }
/* Photo réelle du hero : garder la flamme et le geste visibles en 4/3 (mobile). */
.hero__photo--reel img { object-position: 50% 30%; }

.hero__text, .hero__media,
.about__media, .about__text,
.contact__aside, .contact__form-wrap,
.footer__brand, .footer__col {
  min-width: 0;
}

/* ------------------------------------------------------------
   9. HERO
   ------------------------------------------------------------ */
.hero {
  position: relative;
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(2rem, 5vw, 3rem);
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  overflow: hidden;
  isolation: isolate;
}
/* Trame de plan derrière le hero, atténuée vers le bas */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--dot-light);
  background-size: var(--dot-size) var(--dot-size);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
  opacity: .7;
}
/* Halo turquoise très dilué, côté image */
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -18%;
  right: -12%;
  width: 60vw;
  max-width: 700px;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(35,191,204,.16), transparent 62%);
  pointer-events: none;
}

.hero__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.25rem;
  padding: .4rem .9rem .4rem .7rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
}
.dot {
  width: 8px; height: 8px;
  background: var(--brand);
  border-radius: 50%;
}

.hero__title {
  font-size: clamp(2.25rem, 7.5vw, 4.25rem);
  margin-bottom: 1rem;
  color: var(--ink);
}
/* Le mot qui porte le référencement local porte aussi l'accent :
   un trait plein plutôt qu'une couleur, pour ne pas dégrader le
   contraste du texte. */
.souligne {
  position: relative;
  white-space: nowrap;
}
.souligne::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -.04em;
  height: .1em;
  background: var(--brand);
  border-radius: 2px;
}

.hero__lead {
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  color: var(--muted);
  max-width: 46ch;
  margin-bottom: 2rem;
}

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

/* Preuve et orientation, juste sous les CTA.
   Discret : une ligne de texte, pas un encart publicitaire. */
.hero__proof {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  margin: 1.5rem 0 0;
  font-size: .875rem;
  color: var(--muted);
}
.hero__proof-note {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--ink-strong);
}
.hero__proof-note .icon {
  width: 1.05em; height: 1.05em;
  fill: var(--brand);
  stroke: var(--brand);
  stroke-width: 1.2;
}
.hero__proof-note strong {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -.02em;
}

/* Bandeau de réassurance */
.trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.trust__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: 1.5rem 1rem 1.25rem;
  background: var(--surface);
}
.trust__icon {
  width: 22px; height: 22px;
  margin-bottom: .5rem;
  fill: none;
  stroke: var(--brand-deep);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trust__item strong {
  font-family: var(--font-title);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}
.trust__item span { font-size: .8125rem; color: var(--muted); line-height: 1.45; }

/* ------------------------------------------------------------
   10. SECTIONS
   ------------------------------------------------------------ */
/* Chaque section porte une trame de points très basse densité,
   comme un fond de plan. Elle est décorative : aria-hidden n'est
   pas nécessaire puisqu'elle vit dans un pseudo-élément. */
.section {
  position: relative;
  padding-block: var(--section-y);
  isolation: isolate;
}
.section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--dot-light);
  background-size: var(--dot-size) var(--dot-size);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  opacity: .55;
  pointer-events: none;
}
.section--alt { background: var(--surface); }
.section--dark {
  background:
    radial-gradient(120% 90% at 50% 0%, #143242 0%, var(--ink) 62%);
  color: #fff;
}
.section--dark::before {
  background-image: var(--dot-dark);
  opacity: .8;
}
.section--dark .section__title { color: #fff; }
.section--dark .section__eyebrow { color: var(--brand); }

.section__head { max-width: 60ch; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section__head--center { margin-inline: auto; text-align: center; }

.section__eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 .9rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
/* Filet de repère, comme une amorce de cote sur un plan */
.section__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  flex: none;
  background: var(--brand);
}
.section__head--center .section__eyebrow { justify-content: center; }
.section--dark .section__eyebrow::before { background: var(--brand); }

.section__title {
  font-size: clamp(1.75rem, 4.5vw, 2.875rem);
  color: var(--ink);
  margin-bottom: .6em;
}

.section__lead { font-size: clamp(1rem, 2vw, 1.125rem); color: var(--muted); }

/* ------------------------------------------------------------
   11. CARTES SERVICES
   ------------------------------------------------------------ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--gap);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
/* Liseré de marque qui se déploie au survol, depuis la gauche */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.card:hover::before,
.card:focus-within::before { transform: scaleX(1); }
.card:hover { border-color: var(--brand); transform: translateY(-2px); }

.card__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 1.25rem;
  background: var(--bg);
  border: 1px solid var(--line);
  /* Coin coupé : la signature du X du logo, en discret */
  border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) 2px;
  color: var(--brand-deep);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.card:hover .card__icon {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--brand);
}
.card__icon svg {
  width: 24px; height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card__title { font-size: 1.3125rem; color: var(--ink); margin-bottom: .5rem; }
.card__text { font-size: .9375rem; color: var(--muted); margin-bottom: 1.25rem; }

.card__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: auto;
  min-height: 44px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--brand-deep);
  text-decoration: none;
}
.card__link:hover { text-decoration: underline; }
.icon--arrow { width: 1.1em; height: 1.1em; transition: transform .2s ease; }
.card__link:hover .icon--arrow { transform: translateX(3px); }

/* ------------------------------------------------------------
   12. À PROPOS
   ------------------------------------------------------------ */

/* Liste des qualifications.
   Deux diplômes, pas un de plus : cette liste ne doit accueillir
   que des documents effectivement détenus par Max. Le tiret
   turquoise remplace la puce pour rester dans le vocabulaire
   graphique du reste du site (repères, cotes, traits courts). */
.qualifs {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  gap: .65rem;
}
.qualifs li {
  position: relative;
  padding-left: 1.6rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ink-strong);
  font-weight: 500;
}
.qualifs li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 10px; height: 2px;
  background: var(--brand-deep);
}

/* Mobile-first : on lit de quoi parle la section avant de voir
   la photo. L'ordre visuel s'inverse à partir de 1024px, où les
   deux colonnes sont côte à côte. */
.about {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.about__text  { order: 1; }
.about__media { order: 2; }
@media (min-width: 1024px) {
  .about__media { order: 1; }
  .about__text  { order: 2; }
}
.about__text p { color: var(--muted); }
.about__text strong { color: var(--ink-strong); font-weight: 600; }

/* Liens de maillage interne dans le corps de texte : visibles
   sans être criards, soulignés pour rester repérables sans la
   couleur seule (WCAG 1.4.1). */
.about__text p a,
.zone__text p a {
  color: var(--brand-deep);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.about__text p a:hover,
.zone__text p a:hover { color: var(--ink); text-decoration-thickness: 2px; }


/* ------------------------------------------------------------
   13. GALERIE RÉALISATIONS

   La grille s'adapte au nombre de photos fournies : une seule
   occupe toute la largeur, trois se répartissent en trois
   colonnes. Aucun réglage à reprendre quand Max en envoie
   d'autres — il suffit d'ajouter ou de retirer un <figure>.

   Les photos de DITTAX sont toutes en portrait : le format 4/5
   est celui qui les respecte. Si une photo paysage arrive, lui
   donner la classe gallery__item--wide.
   ------------------------------------------------------------ */
.gallery {
  display: grid;
  gap: var(--gap);
  align-items: start;
}

.gallery__item { margin: 0; min-width: 0; }

.gallery__trigger {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
}
.gallery__trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  transition: transform .4s ease;
}
.gallery__trigger:hover img { transform: scale(1.03); }

.gallery__trigger img { aspect-ratio: 4 / 5; }
.gallery__item--wide .gallery__trigger img { aspect-ratio: 16 / 10; }

.gallery__caption {
  margin-top: .75rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--muted);
}

.gallery__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .625rem;
  margin-top: clamp(2rem, 5vw, 3rem);
  text-align: center;
}
.gallery__handle { font-size: .8125rem; color: var(--muted-light); }

/* ------------------------------------------------------------
   14. AVIS
   ------------------------------------------------------------ */
.rating { text-align: center; margin-bottom: clamp(2rem, 5vw, 3rem); }
.rating__stars {
  display: flex;
  justify-content: center;
  gap: .3rem;
  margin: 0 0 .9rem;
}
.rating__stars svg {
  width: 20px; height: 20px;
  fill: var(--brand);
  stroke: none;
}
.rating__score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .15rem;
  margin: 0 0 .35rem;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(3rem, 9vw, 4.5rem);
  line-height: 1;
  color: var(--brand);
  letter-spacing: -.04em;
}
.rating__max { font-size: .38em; color: rgba(255,255,255,.55); font-weight: 700; }
.rating__source { font-size: .9375rem; color: rgba(255,255,255,.7); margin: 0; }

/* Carrousel d'avis.

   Le défilement est en CSS pur (scroll-snap) : sans JavaScript, la
   piste reste une liste que l'on fait glisser au doigt, et tous les
   avis restent lisibles. Le script n'ajoute que les flèches et les
   pastilles — il améliore, il ne conditionne pas.

   Le nombre de colonnes n'est pas fixé : chaque avis occupe une
   largeur minimale, et il en tient autant que l'écran permet. Un
   avis seul se centre au lieu de flotter à gauche. */
.quotes {
  position: relative;
  max-width: 1160px;
  margin-inline: auto;
}

.quotes__track {
  display: grid;
  grid-auto-flow: column;
  /* Cartes en format paysage : à 540px de large, l'avis le plus
     long tient en huit lignes au lieu de quinze. La hauteur de la
     rangée est fixée par lui — l'élargir, c'est raccourcir tout
     le bloc. */
  /* Mise à jour du 16/09 : cartes en format LONG (960px). Le texte
     s'étale sur une ligne plus longue et la signature passe dans une
     colonne à droite : la carte perd près de la moitié de sa hauteur.
     La carte suivante dépasse à droite, estompée, pour inviter à faire
     glisser. */
  grid-auto-columns: min(100%, 960px);
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
/* Pendant un glisser à la souris, le calage et le défilement doux
   sont suspendus : la piste suit la main sans à-coups. */
.quotes__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}
.quotes__track::-webkit-scrollbar { display: none; }
/* Un seul avis : il se centre au lieu de rester calé à gauche. */
.quotes__track:has(> .quote-slide:only-child) { justify-content: center; }

/* Alignement sur le BORD GAUCHE, pas sur le centre.

   Avec « center », le navigateur recalait chaque défilement sur le
   point qui centre une carte : le scrollTo visait la carte 2, le
   navigateur atterrissait sur la 4, et deux clics suffisaient à
   atteindre la fin d'un carrousel de cinq. Les pastilles sautaient
   en conséquence.

   Avec « start », le point de calage est exactement la position
   que vise le script. Ce qu'on clique est ce qu'on obtient. */
.quote-slide {
  scroll-snap-align: start;
  /* Un avis par geste : un balayage rapide ne saute plus deux cartes. */
  scroll-snap-stop: always;
  container-type: inline-size;
  transition: opacity .45s cubic-bezier(.22,.61,.36,1);
}
/* Les cartes qui ne sont pas entièrement visibles s'estompent :
   l'œil suit l'avis en cours, la suivante reste devinée. */
.quotes.is-ready .quote-slide:not(.is-visible) { opacity: .38; }

.quote {
  position: relative;
  /* Remise à zéro de la marge par défaut de <blockquote> (40px de
     côté, 1em en haut et en bas) : elle rognait le bas de la carte
     et décalait son bord gauche. */
  margin: 0;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 1.9rem);
  background: var(--ink-soft);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
}
/* Guillemet en filigrane, comme les chiffres estompés de la
   section « Comment ça se passe ». Sorti du flux : posé en haut
   à droite, il ne coûte plus une ligne de hauteur à la carte. */
.quote__mark {
  position: absolute;
  top: .35rem;
  right: 1.1rem;
  margin: 0;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--brand);
  opacity: .16;
  pointer-events: none;
}
/* Sur téléphone la carte occupe toute la largeur : le guillemet
   se retrouverait par-dessus la première ligne. Les étoiles et la
   signature disent déjà qu'il s'agit d'une citation. */
@media (max-width: 559px) {
  .quote__mark { display: none; }
}
.quote > p:not(.quote__mark) {
  font-size: .9375rem;
  color: rgba(255,255,255,.92);
  margin: 0;
}
/* Les avis en plusieurs paragraphes gardent leurs respirations :
   les coller ferait un bloc que l'auteur n'a pas écrit. */
.quote > p:not(.quote__mark) + p:not(.quote__mark) { margin-top: .7em; }
.quote footer {
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: .8125rem;
  color: rgba(255,255,255,.6);
}
/* Les cinq étoiles de CET avis, pas la moyenne : le visiteur voit
   que chacun est bien noté 5, pas seulement l'ensemble.
   aria-label porte l'information, les SVG sont décoratifs. */
.quote__stars {
  display: flex;
  gap: .15rem;
  margin: 0 0 .5rem;
}
.quote__stars svg {
  width: 15px; height: 15px;
  fill: var(--brand);
  stroke: none;
}
/* Auteur et source sur une seule ligne quand la place le permet :
   deux lignes de pied gagnées sur cinq cartes. */
.quote__who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem .6rem;
}
.quote cite { font-style: normal; font-weight: 600; font-size: .9375rem; color: #fff; }
.quote__meta { color: rgba(255,255,255,.55); }

/* Format long : dès que la carte dépasse 760px, la signature quitte
   le bas de la carte pour une colonne à droite, séparée par un filet.
   Le texte garde ~85 caractères par ligne, lisible, et la carte ne
   fait plus que 4 à 6 lignes de haut. */
@container (min-width: 760px) {
  .quote {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    column-gap: 2.5rem;
    align-items: center;
    padding: 1.75rem 2.25rem;
  }
  .quote > p:not(.quote__mark) {
    grid-column: 1;
    font-size: 1rem;
    line-height: 1.65;
  }
  .quote footer {
    grid-column: 2;
    grid-row: 1 / span 6;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: 0 0 0 2rem;
    border-left: 1px solid var(--line-dark);
  }
  .quote__who { flex-direction: column; gap: .2rem; }
  .quote__mark { top: .1rem; right: auto; left: .9rem; font-size: 3.5rem; }
}

/* Commandes */
.quotes__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.quotes__arrow {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, opacity .18s ease;
}
.quotes__arrow svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.quotes__arrow:hover { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.quotes__arrow[disabled] { opacity: .3; cursor: default; }
.quotes__arrow[disabled]:hover { background: transparent; border-color: var(--line-dark); color: #fff; }

.quotes__dots { display: flex; gap: .5rem; }
/* Pastille : la cible tactile fait 44px, le point visible 8px —
   c'est le padding transparent qui porte la surface. */
.quotes__dot {
  width: 24px; height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.quotes__dot::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transition: background-color .18s ease, transform .18s ease;
}
.quotes__dot[aria-current="true"]::before { background: var(--brand); transform: scale(1.3); }

@media (prefers-reduced-motion: reduce) {
  .quotes__track { scroll-behavior: auto; }
  .quote-slide { transition: none; }
  .quotes__dot::before { transition: none; }
}

/* Plateformes d'avis : deux liens sortants, sans script tiers.
   Traités comme des cartouches sobres, pas comme des logos de
   marque — on ne fait pas de la place aux plateformes, on
   renvoie vers la preuve. */
.platforms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
.platform {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .8rem 1.4rem;
  min-width: 170px;
  background: var(--ink-soft);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease;
}
.platform__score {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.platform:hover { border-color: var(--brand); background: rgba(35,191,204,.08); }
.platform__name {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: .9375rem;
  color: #fff;
}
.platform__action {
  font-size: .8125rem;
  color: var(--brand);
}

/* Appel au dépôt d'avis */
.review-cta {
  max-width: 680px;
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding-top: clamp(2rem, 5vw, 2.75rem);
  border-top: 1px solid var(--line-dark);
  text-align: center;
}
.review-cta__title {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  color: #fff;
  margin-bottom: .5rem;
}
.review-cta__text {
  font-size: .9375rem;
  color: rgba(255,255,255,.75);
  margin-bottom: 1.5rem;
}
.review-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}
.review-cta__legal {
  margin-top: 1.5rem;
  font-size: .8125rem;
  line-height: 1.6;
  color: rgba(255,255,255,.45);
}

/* ------------------------------------------------------------
   15. ZONE D'INTERVENTION
   ------------------------------------------------------------ */
.zone {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.zone__text p { color: var(--muted); }
.zone__ask {
  font-weight: 600;
  color: var(--ink-strong) !important;
}
.zone__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

.zone__panel {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.zone__panel-title {
  font-size: 1.0625rem;
  color: var(--ink);
  margin-bottom: 1rem;
}
.zone__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.zone__list li {
  padding: .4rem .85rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 500;
}
.zone__hint { font-size: .875rem; color: var(--muted); margin: 0; }

/* Carte de situation — SVG dessiné, aucune dépendance externe.
   Le contour de France vient de données géographiques publiques
   projetées en Lambert-93, puis lissées : le rendu est une carte
   stylisée, pas un fond de plan approximatif. */
.zone__map { margin: 0 0 1.75rem; }
.zone__map svg {
  width: 100%;
  height: auto;
  display: block;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.carte__pays path {
  fill: #E7EDF0;
  stroke: var(--ink);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.carte__villes circle { fill: var(--ink); }
.carte__villes text {
  fill: var(--ink-strong);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
}
.carte__ville--fin { text-anchor: end; }

.carte__angers circle { fill: var(--brand-deep); }
.carte__angers .carte__halo { fill: var(--brand); opacity: .25; }
.carte__angers text {
  fill: var(--ink);
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .05em;
}

.zone__map figcaption {
  margin-top: .75rem;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--muted);
}
.zone__map-dist {
  display: block;
  margin-top: .35rem;
  font-weight: 600;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   15bis. BANDEAU D'AMBIANCE

   Bande pleine largeur en 21/9 sur grand écran, resserrée en 3/2
   sur mobile pour que le sujet reste lisible et que la bande ne
   se réduise pas à un filet. L'image est décorative (alt vide) ;
   c'est le voile encre au-dessus qui porte le texte.
   Aucune hauteur en pixels : le ratio est figé, donc aucun
   décalage de mise en page au chargement (CLS = 0).
   ------------------------------------------------------------ */
.bandeau {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--ink);
}
.bandeau__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: url(#duotone);
}
@supports not (filter: url(#duotone)) {
  .bandeau__img { filter: grayscale(1) contrast(1.08) brightness(1.02); }
}
/* Voile : assure le contraste du texte blanc quelle que soit la
   zone de l'image qui se retrouve derrière au recadrage. */
.bandeau::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(11,31,42,.78), rgba(11,31,42,.68));
}
.bandeau__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(3rem, 9vw, 5.5rem) var(--gutter);
  text-align: center;
}
.bandeau__text {
  max-width: 34ch;
  margin: 0 auto 1.75rem;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.25rem, 3.4vw, 1.75rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: #fff;
  text-wrap: balance;
}
/* Le bouton est turquoise sur voile encre : l'anneau de focus doit
   passer en blanc pour rester visible (WCAG 2.4.11). */
.bandeau .btn--accent:focus-visible { outline-color: #fff; }

/* ------------------------------------------------------------
   16. ÉTAPES
   ------------------------------------------------------------ */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: var(--gap);
  counter-reset: step;
}
.step {
  position: relative;
  padding: 1.75rem 1.25rem 1.5rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Le rang de l'étape, repris en très grand format : ici la
   numérotation dit quelque chose de vrai, c'est une séquence. */
.step::after {
  content: attr(data-num);
  position: absolute;
  right: .4rem;
  bottom: -.3em;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 7.5rem;
  line-height: 1;
  color: var(--ink);
  opacity: .05;
  pointer-events: none;
  user-select: none;
}
.step__num {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-bottom: 1rem;
  background: var(--ink);
  color: var(--brand);
  border-radius: 50%;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: .9375rem;
}
.step__title { font-size: 1.125rem; color: var(--ink); margin-bottom: .4rem; }
.step p { font-size: .9375rem; color: var(--muted); margin: 0; }

/* ------------------------------------------------------------
   17. FAQ
   ------------------------------------------------------------ */
.faq {
  border-top: 1px solid var(--line);
}
.faq__item { border-bottom: 1px solid var(--line); }

.faq__heading { margin: 0; font-size: inherit; }

.faq__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 1.125rem);
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--ink);
  transition: color .15s ease;
}
.faq__btn:hover { color: var(--brand-deep); }

.faq__chevron {
  width: 22px; height: 22px;
  flex: none;
  fill: none;
  stroke: var(--brand-deep);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s ease;
}
.faq__btn[aria-expanded="true"] .faq__chevron { transform: rotate(180deg); }

.faq__panel { padding-bottom: 1.25rem; }
.faq__panel p { font-size: .9375rem; color: var(--muted); margin: 0; }
.faq__panel a { color: var(--brand-deep); font-weight: 500; }

/* Repli piloté par main.js — sans JS, tout reste ouvert */
.faq__panel.is-collapsed { display: none; }

/* ------------------------------------------------------------
   18. CONTACT
   ------------------------------------------------------------ */
.contact {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: start;
}
.contact__lead { color: rgba(255,255,255,.75); margin-bottom: 2rem; }

.contact__list { display: grid; gap: .5rem; margin-bottom: 2rem; }
.contact__list li {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 44px;
  font-size: 1.0625rem;
  color: rgba(255,255,255,.9);
}
.contact__list .icon { color: var(--brand); }
/* Zone tactile pleine hauteur : au doigt, un lien de 29px se rate. */
.contact__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.3);
}
.contact__list a:hover { border-bottom-color: var(--brand); color: var(--brand); }

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

/* Formulaire */
.form {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--surface);
  border-radius: var(--radius-lg);
  color: var(--ink-strong);
}
.form__intro {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--ink);
  margin-bottom: 1.5rem;
}

.form__what-next {
  margin: -1rem 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.55;
}

.form__row { margin-bottom: 1.125rem; }
.form__grid { display: grid; gap: 0 1rem; }

.form__label {
  display: block;
  margin-bottom: .4rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink-strong);
}
.req { color: var(--brand-deep); }

.form__input {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  transition: border-color .15s ease, background-color .15s ease;
}
.form__input:hover { border-color: var(--muted-light); }
.form__input:focus {
  background: var(--surface);
  border-color: var(--brand-deep);
  outline: 3px solid rgba(35,191,204,.25);
  outline-offset: 0;
}
.form__textarea { min-height: 130px; resize: vertical; }

select.form__input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6B75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 18px;
  padding-right: 2.5rem;
}

.form__help { margin: .45rem 0 0; font-size: .8125rem; color: var(--muted); }

.form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.form__honeypot input { width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; }

.form button[type="submit"] { margin-top: .5rem; }

.form__status {
  margin: 1rem 0 0;
  font-size: .875rem;
  font-weight: 500;
  min-height: 1.2em;
}
.form__status.is-error { color: #A3341F; }
.form__status.is-info  { color: var(--brand-deep); }

.form__legal { margin: 1.25rem 0 0; font-size: .8125rem; color: var(--muted); line-height: 1.55; }
.form__legal a { color: var(--brand-deep); font-weight: 500; }

/* ------------------------------------------------------------
   18bis. PAGES LÉGALES
   Mentions légales et politique de confidentialité : colonne
   unique, mesure de lecture courte, hiérarchie claire.
   ------------------------------------------------------------ */
/* Ces pages n'ont pas de menu déroulant : le header se réduit au
   logo et au téléphone. Sous 600px, le numéro se replie sur son
   icône — la barre fixe du bas l'affiche déjà en clair. */
.header__actions--simple { display: flex; }
@media (max-width: 767px) {
  .header__actions--simple .btn--primary { display: none; }
}
@media (max-width: 599px) {
  .header__actions--simple .btn--tel span { display: none; }
  .header__actions--simple .btn--tel {
    width: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 999px;
  }
  .header__actions--simple .btn--tel .icon { width: 20px; height: 20px; }
}

.legal__title {
  font-size: clamp(2rem, 5.5vw, 3rem);
  color: var(--ink);
  margin-bottom: .5rem;
}
.legal__intro {
  font-size: clamp(1.0625rem, 2.2vw, 1.1875rem);
  color: var(--muted);
  max-width: 60ch;
}
.legal__date {
  margin: 1rem 0 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
  font-size: .875rem;
  color: var(--muted-light);
}

.legal h2 {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  color: var(--ink);
  margin: 2.75rem 0 .9rem;
  padding-top: .25rem;
}
.legal h3 {
  font-size: 1.0625rem;
  color: var(--ink);
  margin: 0 0 .6rem;
}
.legal p { color: var(--muted); max-width: 68ch; }
.legal p + p { margin-top: .9rem; }
.legal a { color: var(--brand-deep); font-weight: 500; }
.legal strong { color: var(--ink-strong); font-weight: 600; }

/* Listes à puces des pages légales */
.legal__bullets,
.legal__todo ul,
.legal__highlight ul {
  display: grid;
  gap: .55rem;
  margin: 1rem 0;
  max-width: 68ch;
  color: var(--muted);
}
.legal__bullets li,
.legal__todo li,
.legal__highlight li {
  position: relative;
  padding-left: 1.1rem;
}
.legal__bullets li::before,
.legal__todo li::before,
.legal__highlight li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 5px; height: 5px;
  background: var(--brand);
  border-radius: 50%;
}

/* Définitions : éditeur, hébergeur */
.legal__list {
  display: grid;
  gap: 0;
  margin: 1.25rem 0 0;
  border-top: 1px solid var(--line);
}
.legal__list dt {
  padding-top: .9rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
.legal__list dd {
  margin: .25rem 0 0;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-strong);
  line-height: 1.6;
  /* Les placeholders et les adresses électroniques sont des mots
     insécables : sans cette règle, ils débordent à 320px. */
  overflow-wrap: anywhere;
}

/* Encadré de synthèse */
.legal__highlight {
  margin: 2rem 0 0;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.legal__highlight-title {
  margin: 0 0 .5rem !important;
  padding-top: 0 !important;
  font-size: 1.0625rem !important;
}
.legal__highlight ul { margin-bottom: 0; }

/* Blocs « à compléter » : visibles, pour qu'ils ne partent pas
   en production par oubli. */
.legal__todo {
  margin: 1.75rem 0;
  padding: clamp(1.25rem, 3vw, 1.6rem);
  background: #FFF8EC;
  border: 1px solid #F0DCB8;
  border-radius: var(--radius);
}
.legal__todo h3 { color: #7A4E13; }
.legal__todo p,
.legal__todo li { color: #6B4A1C; }
.legal__todo li::before { background: #C9871F; }
.legal__todo ul { margin-bottom: 0; }
.legal__todo strong { color: #4E3410; }

/* Valeur manquante dans un tableau d'identité. Signalée plutôt que
   laissée en crochets : dans une page légale, des crochets gris se
   confondent avec du texte et finissent par être publiés tels quels. */
.legal__missing {
  display: inline-block;
  padding: .15rem .55rem;
  background: #FFF1D9;
  border: 1px solid #E4C48A;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 600;
  font-style: italic;
  color: #7A4E13;
}

.legal__pending {
  margin-top: .9rem;
  padding: 1rem 1.15rem;
  background: var(--bg);
  border-left: 3px solid var(--muted-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .9375rem;
}

.legal__back { margin-top: 3rem; }

/* ------------------------------------------------------------
   19. FOOTER
   ------------------------------------------------------------ */
.footer {
  background: var(--ink);
  color: rgba(255,255,255,.8);
  padding-top: clamp(3rem, 7vw, 5rem);
}

.footer__inner {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

/* Logo du pied de page. Inline, donc la typographie (currentColor)
   prend le blanc pendant que le robinet garde son turquoise. */
.footer__logo {
  display: block;
  width: auto;
  height: 52px;
  color: #fff;
  margin-bottom: .6rem;
}
.footer__baseline {
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 1rem;
}
.footer__desc { font-size: .9375rem; max-width: 38ch; margin-bottom: 1.25rem; }

.footer__ig {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  font-size: .9375rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
.footer__ig:hover { color: var(--brand); }

.footer__title {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-title);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 1rem;
}
.footer__title::before {
  content: "";
  width: 18px; height: 2px;
  flex: none;
  background: var(--brand);
}
/* Au doigt, chaque entrée occupe 44px de haut ; à la souris,
   au-delà de 1024px, on resserre pour garder un footer compact.
   Une tablette en portrait (768px) reste tactile : le seuil est
   à 1024px, pas à 768px. */
.footer__list { display: grid; gap: 0; font-size: .9375rem; }
.footer__list li { display: flex; align-items: center; min-height: 44px; }
.footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgba(255,255,255,.8);
  text-decoration: none;
}
.footer__list a:hover { color: var(--brand); }

@media (min-width: 1024px) {
  .footer__list { gap: .625rem; }
  .footer__list li,
  .footer__list a { min-height: 0; }
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line-dark);
  font-size: .8125rem;
  color: rgba(255,255,255,.55);
}
.footer__legal p { margin: 0; }

/* ------------------------------------------------------------
   20. BARRE FIXE MOBILE
   ------------------------------------------------------------ */
/* Pastille flottante, détachée des trois bords. Le décollement
   n'est pas décoratif : sur un iPhone récent, une barre collée au
   bord bas passe sous l'indicateur d'accueil, qui capte le geste.
   La marge basse ajoute env(safe-area-inset-bottom) pour rester
   au-dessus de cette zone sur tous les modèles.

   overflow visible : le disque central déborde par le haut. */
.mobilebar {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  width: min(420px, calc(100% - 24px));
  margin-inline: auto;
  height: var(--mobilebar-h);
  background: var(--surface);
  border-radius: 999px;
  box-shadow:
    0 1px 2px rgba(11,31,42,.08),
    0 12px 32px -12px rgba(11,31,42,.42);
}

.mobilebar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 100%;
  min-width: 44px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 999px;
}
.mobilebar__item:focus-visible { outline-offset: -3px; }

.mobilebar__icon svg,
.mobilebar__disc svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mobilebar__label {
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.005em;
}

/* Action centrale surélevée. L'anneau blanc (première ombre portée)
   la détache de la pastille sans ajouter d'élément. */
.mobilebar__item--main { gap: 6px; }
.mobilebar__disc {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin-top: -30px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--ink);
  box-shadow:
    0 0 0 6px var(--surface),
    0 8px 18px -8px rgba(11,31,42,.55);
  transition: transform .18s cubic-bezier(.22,.61,.36,1);
}
.mobilebar__disc svg { width: 25px; height: 25px; stroke-width: 1.8; }
.mobilebar__item--main:active .mobilebar__disc { transform: scale(.94); }
.mobilebar__item:not(.mobilebar__item--main):active { color: var(--brand-deep); }

/* Très petits écrans : on resserre plutôt que de tronquer. */
@media (max-width: 359px) {
  .mobilebar { width: calc(100% - 16px); }
  .mobilebar__disc { width: 50px; height: 50px; margin-top: -26px; }
}

/* Le contenu n'est jamais masqué par la barre : hauteur de la
   pastille + son décollement + la zone sûre. */
body {
  padding-bottom: calc(var(--mobilebar-h) + 24px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
  .mobilebar { display: none; }
  body { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mobilebar__disc { transition: none; }
}

/* ------------------------------------------------------------
   21. LIGHTBOX
   ------------------------------------------------------------ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(11,31,42,.94);
}
.lightbox[hidden] { display: none; }

.lightbox__figure { margin: 0; max-width: min(1100px, 100%); text-align: center; }
.lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  margin-inline: auto;
  border-radius: var(--radius);
  object-fit: contain;
}
.lightbox__caption {
  margin-top: 1rem;
  font-size: .9375rem;
  color: rgba(255,255,255,.8);
}

.lightbox__close {
  position: absolute;
  top: clamp(.75rem, 3vw, 1.5rem);
  right: clamp(.75rem, 3vw, 1.5rem);
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
}
.lightbox__close:hover { background: var(--brand); color: var(--ink); }
.lightbox__close .icon { width: 22px; height: 22px; stroke-width: 2; }

/* ------------------------------------------------------------
   22. BREAKPOINTS
   Vérifiés dans Chromium à 320 / 360 / 375 / 390 / 768 / 1024 /
   1199 / 1200 / 1280 / 1366 / 1440 / 1920 px : aucun débordement.
   ------------------------------------------------------------ */

/* Petits mobiles : on évite tout débordement */
@media (max-width: 359px) {
  .btn { padding-inline: 1rem; font-size: .9375rem; }
  .trust { grid-template-columns: 1fr; }
}

/* Grands mobiles et petites tablettes */
@media (min-width: 600px) {
  .form__grid { grid-template-columns: 1fr 1fr; }
  .footer__inner { grid-template-columns: repeat(2, 1fr); }
}

/* Tablettes */
@media (min-width: 768px) {
  .trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
  .gallery__item--wide { grid-column: 1 / -1; }
  .gallery__cta { flex-direction: row; justify-content: center; align-items: center; gap: 1rem; }
}

/* Desktop */
@media (min-width: 1024px) {
  /* Le CTA devis rejoint le téléphone ; la nav complète ne tient
     pas encore en ligne, le menu déroulant reste jusqu'à 1200px. */
  .header__actions .btn--primary { display: inline-flex; }

  .hero__inner { grid-template-columns: 1.05fr .95fr; }
  .about { grid-template-columns: .85fr 1.15fr; }
  .zone { grid-template-columns: 1.15fr .85fr; }
  .contact { grid-template-columns: .9fr 1.1fr; }
  .footer__inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

/* Desktop large : la navigation complète tient enfin en ligne */
@media (min-width: 1200px) {
  .nav { display: block; }
  .burger { display: none; }
}

/* Grand desktop */
@media (min-width: 1440px) {
  :root { --section-y: 8.5rem; }
}

/* ------------------------------------------------------------
   23. MOUVEMENT RÉDUIT
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover { transform: none; }
  .card::before { transition: none; }
  .gallery__trigger:hover img { transform: none; }
}

/* ------------------------------------------------------------
   24. IMPRESSION
   ------------------------------------------------------------ */
@media print {
  @page {
    size: A4;
    margin: 18mm 16mm 20mm;
  }

  .header, .mobilebar, .lightbox, .hero__cta, .contact__cta, .form,
  .skip-link, .legal__back, .footer { display: none !important; }

  body {
    background: #fff;
    color: #000;
    padding-bottom: 0;
    font-size: 10.5pt;
    line-height: 1.5;
  }
  .section { padding-block: 0; }
  .section::before { display: none; }
  .wrap { max-width: none; padding-inline: 0; }

  .section--dark { background: #fff !important; color: #000 !important; }
  .section--dark .section__title { color: #000 !important; }

  /* Une URL en toutes lettres a du sens sur papier : le lecteur ne
     peut pas cliquer. On exclut mailto et tel, déjà lisibles. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; word-break: break-all; }

  /* Les fonds sont porteurs de sens ici : l'ambre signale ce qui
     manque encore. Sans print-color-adjust, les navigateurs les
     suppriment à l'impression et l'encadré devient invisible. */
  .legal__todo,
  .legal__highlight,
  .legal__pending,
  .legal__missing {
    -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .legal__todo { border: 1.5px solid #C9871F !important; }

  /* Rien ne doit être coupé au milieu : ni un titre orphelin de sa
     section, ni une ligne d'un tableau d'identité. */
  .legal h2, .legal h3 { break-after: avoid; page-break-after: avoid; }
  .legal__list { break-inside: auto; }
  .legal__list dt { break-after: avoid; page-break-after: avoid; }
  .legal__list dt, .legal__list dd { break-inside: avoid; page-break-inside: avoid; }
  p, li { orphans: 3; widows: 3; }
}


/* ------------------------------------------------------------
   SLIDER « MAX AU TRAVAIL » (section À propos) — 16/09/2026
   Même principe que le carrousel d'avis : scroll-snap en CSS pur,
   le script n'ajoute que flèches et pastilles, posées sur la photo.
   Le filtre bleu s'applique à chaque image via .photo--ambient.
   ------------------------------------------------------------ */
.about-slider {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}
.about-slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}
.about-slider__track::-webkit-scrollbar { display: none; }
.about-slider__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.about-slider__slide { scroll-snap-align: start; scroll-snap-stop: always; }
.about-slider__slide img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0;
  -webkit-user-drag: none;
}
.about-slider__nav {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .35rem;
  background: rgba(11, 31, 42, .72);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.about-slider__nav[hidden] { display: none; }
.about-slider__arrow {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: color .18s ease, opacity .18s ease;
}
.about-slider__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.about-slider__arrow:hover { color: var(--brand); }
.about-slider__arrow[disabled] { opacity: .3; cursor: default; }
.about-slider__arrow[disabled]:hover { color: #fff; }
.about-slider__dots { display: flex; }
.about-slider__dot {
  width: 20px; height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.about-slider__dot::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  transition: background-color .18s ease, transform .18s ease;
}
.about-slider__dot[aria-current="true"]::before { background: var(--brand); transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) {
  .about-slider__track { scroll-behavior: auto; }
  .about-slider__dot::before { transition: none; }
}