/* =====================================================================
   KLIMATOVA · maquette de la page d'accueil
   Couleurs : uniquement les variables de tokens.css (préfixe --k-).
   Polices : Anton (titres) et Instrument Sans (texte), polices/polices.css.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. ÉCHELLE (tailles, rayons, espaces). Une seule échelle fixe.
   --------------------------------------------------------------- */
:root {
  /* Texte, Instrument Sans */
  --t-legende: 13px;   /* badges, mentions du pied de page */
  --t-petit: 15px;     /* menu, boutons, liens fléchés, étiquettes de champ */
  --t-corps: 16px;     /* texte courant */
  --t-intro: 18px;     /* sous-titre de la hero, introductions, nom du métier sur les photos */
  --t-carte: 22px;     /* titres des cartes et des étapes */

  /* Titres, Anton en capitales */
  --t-tel: 44px;       /* le numéro dans la carte de contact */
  /* Titres de section : 72 px à 1440 et au-delà, 64 px à 1280 (5 % de la largeur),
     56 px au plus petit, pour que « ET POUR LE RESTE » tienne toujours sur une ligne à côté de la cuisine. */
  --t-titre: clamp(56px, 5vw, 72px);
  --t-hero: clamp(56px, 6.1vw, 96px); /* titre de la hero : 88 px à 1440 */
  --t-numero: 96px;    /* chiffres des étapes */

  /* Interlignes des titres. Anton a des capitales très hautes : sous 1,2,
     l'accent d'un É ou d'un À touche le pied de la ligne du dessus. */
  --interligne-hero: 1.04;         /* titre de la hero sans accent */
  --interligne-hero-accent: 1.16;  /* posé tout seul par js/site.js s'il y a un accent */
  --interligne-titre: 1.22;        /* titres de section : POSÉE, ÉTÉ */

  /* Trois arrondis, pas un de plus. */
  --rayon: 24px;       /* LE rayon des cartes et des photos */
  --rayon-petit: 12px; /* ce qui est posé DANS une carte : étiquettes, zone de message */
  --pilule: 999px;     /* boutons, menu, badges, champs d'une ligne */

  --largeur: 1328px;   /* largeur du contenu = largeur du menu : logo, titres et photos ont les mêmes bords */
  --marge: 56px;       /* marge latérale minimale */
  --gouttiere: 32px;   /* entre les colonnes */
  --section-y: 136px;  /* air au-dessus et au-dessous de chaque section */
  --tete-y: 72px;      /* entre l'en-tête d'une section et son contenu */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 1180px) {
  :root { --marge: 32px; }
}
@media (max-width: 760px) {
  :root {
    --t-petit: 14px;
    --t-corps: 15px;
    --t-intro: 16px;
    --t-carte: 20px;
    --t-tel: 36px;
    --t-titre: 40px;
    /* Titre de la hero au téléphone : réglé sur le bras du technicien, pas sur la largeur de l'écran.
       VOTRE CLIM / INSTALLÉE / PAR DES / PROFESSIONNELS passe à côté du bras avec au moins 65 px d'air
       de 360 à 430 px (outils/mesure-titre-bras.mjs, LISEZMOI « Formulaire et titre final »). 41,6 px à 390. */
    --t-hero: min(52px, calc((100vw - 32px) / 8.6));
    --t-numero: 56px;
    --interligne-titre: 1.26;
    --rayon: 18px;
    --marge: 24px;
    --gouttiere: 12px;
    --section-y: 88px;
    --tete-y: 40px;
  }
}

/* ---------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Menu du téléphone ouvert : la page ne défile pas derrière (la place de la barre de défilement est gardée). */
html.menu-ouvert { overflow: hidden; scrollbar-gutter: stable; }
/* Un clic dans le menu amène la section tout en haut de l'écran : son fond passe sous le menu de verre,
   son badge et son titre arrivent dessous, jamais cachés (au moins 24 px d'air, mesuré par outils/test-clics.mjs).
   Avec une marge égale à la hauteur du menu, on verrait une bande de la section d'avant derrière le verre. */
main > section[id] { scroll-margin-top: 0; }
body {
  margin: 0;
  background: var(--k-blanc);
  color: var(--k-encre);
  font-family: var(--police-texte);
  font-size: var(--t-corps);
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--k-bleu); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--k-brume); color: var(--k-encre); }

.conteneur { width: min(100% - 2 * var(--marge), var(--largeur)); margin-inline: auto; }

/* ---------------------------------------------------------------
   3. PIÈCES COMMUNES
   --------------------------------------------------------------- */

/* Le petit badge au-dessus des titres (verre clair). */
.badge {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: var(--pilule);
  background: var(--k-verre-clair);
  border: 1px solid var(--k-contour);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  font-size: var(--t-legende);
  font-weight: 500;
  color: var(--k-encre);
  white-space: nowrap;
}

/* Titres Anton, 2 lignes, la 2e en dégradé. */
.titre, .titre-hero {
  font-family: var(--police-titre);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .005em;
  color: var(--k-encre);
}
.titre { font-size: var(--t-titre); line-height: var(--interligne-titre); }
.ligne { display: block; text-wrap: balance; }

/* Le dégradé va sur un span EN LIGNE, jamais sur le bloc (sinon les accents sont rognés). */
.glace {
  background-image: var(--k-degrade-glace-profonde-anton);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

.intro {
  margin-top: 22px;
  max-width: 34em;
  font-size: var(--t-intro);
  line-height: 1.55;
  color: var(--k-encre-douce);
  text-wrap: pretty;
}

/* Boutons */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--pilule);
  font-size: var(--t-petit);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.bouton--bleu { background: var(--k-bleu); color: var(--k-blanc); }
.bouton:active { transform: translateY(1px); }
.bouton--large { width: 100%; height: 54px; }

/* Lien avec la flèche (la seule flèche de la page).
   Bleu appuyé : le bleu Klimatova sur le blanc glacé ne tenait que 4,2:1. */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--k-bleu-appuye);
  transition: color .2s;
}
.fleche { width: 16px; height: 16px; flex: none; transition: transform .3s var(--ease); }

.lien-texte { color: var(--k-encre); font-weight: 600; white-space: nowrap; background-image: linear-gradient(var(--k-brume), var(--k-brume)); background-size: 100% 2px; background-position: 0 100%; background-repeat: no-repeat; transition: color .2s; }

/* Choix en pilule (barre de la hero et formulaire). */
.choix { position: relative; display: inline-flex; }
.choix input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.choix span {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--pilule);
  border: 1px solid var(--k-contour);
  font-size: var(--t-petit);
  color: var(--k-encre);
  white-space: nowrap;
  transition: background-color .2s, border-color .2s;
}
.choix input:checked + span { background: var(--k-brume); border-color: var(--k-brume); font-weight: 500; }
.choix input:focus-visible + span { outline: 2px solid var(--k-bleu); outline-offset: 2px; }

/* LES SURVOLS : à la souris seulement. Au doigt (téléphone, tablette), un :hover reste collé
   après un toucher : un onglet ou un bouton resterait en couleur alors qu'on est ailleurs.
   Tous les survols de la page sont dans des blocs @media (hover: hover). */
@media (hover: hover) {
  .bouton--bleu:hover, .bouton--nuit:hover { background: var(--k-bleu-appuye); }
  .formulaire__autre:hover .fleche { transform: translateX(3px); }
  .lien-fleche:hover { color: var(--k-encre); }
  a:hover .fleche { transform: translateX(3px); }
  .lien-texte:hover { color: var(--k-bleu-appuye); }
  .choix:hover span { border-color: var(--k-bleu); }
}

/* ---------------------------------------------------------------
   4. MENU
   --------------------------------------------------------------- */
.entete {
  /* Largeur de la barre : en haut de page, celle du contenu ; après défilement, la capsule. */
  --barre-l: min(100% - 2 * var(--marge), var(--largeur));
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-top: 24px;
  pointer-events: none;
  transition: padding .35s var(--ease);
}
.entete__barre {
  pointer-events: auto;
  width: var(--barre-l);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--pilule);
  transition: background-color .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease), width .35s var(--ease);
}
.entete__logo { justify-self: start; display: flex; align-items: center; min-height: 44px; transition: margin .35s var(--ease); }
.entete__logo img { height: 30px; width: auto; max-width: none; transition: height .35s var(--ease); } /* jamais écrasé par sa colonne */

.menu__pilule {
  position: relative;
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 5px;
  border-radius: var(--pilule);
  background: var(--k-verre-clair);
  border: 1.5px solid var(--k-verre-clair-bord);
  box-shadow: inset 0 -1px 0 var(--k-verre-clair-lisere);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
  font-size: var(--t-petit);
  transition: background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.menu__pilule li { display: flex; }
/* Chaque onglet prend toute la hauteur de la pilule et touche ses voisins : aucune zone morte entre deux liens.
   Le lien n'a PAS d'arrondi : Chrome teste le clic sur la forme arrondie, les coins tombaient dans le vide
   (jusqu'à 31 px morts aux jonctions). L'arrondi du contour clavier est porté par :focus-visible. */
.menu__pilule a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 45px;
  padding: 0 18px;
  white-space: nowrap;
  transition: color .2s;
}
/* La zone cliquable couvre aussi le bord de la pilule, et ses deux bouts (5 px de marge + le bord). */
.menu__pilule a::after { content: ""; position: absolute; inset: -2px 0; }
.menu__pilule li:first-child a::after { left: -7px; }
.menu__pilule li:last-child a::after { right: -7px; }
@media (hover: hover) {
  .menu__pilule a:hover { color: var(--k-bleu-appuye); }
}
.menu__pilule a[aria-current="true"] { color: var(--k-encre); }
.menu__pilule a:focus-visible { outline-offset: -5px; border-radius: var(--pilule); }
/* De 1280 à 1439 px, la pilule se resserre (675 px au lieu de 715) : elle ne colle plus au logo. */
@media (max-width: 1439.98px) {
  .menu__pilule a { padding: 0 14px; }
}
/* L'onglet actif : une pastille de brume qui glisse d'un onglet à l'autre pendant qu'on défile.
   js/site.js donne sa place (--curseur-x) et sa largeur (--curseur-l). */
.menu__pilule::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--curseur-l, 0px);
  height: 36px;
  margin-top: -18px;
  border-radius: var(--pilule);
  background: var(--k-brume);
  opacity: 0;
  transform: translateX(var(--curseur-x, 0px));
  transition: transform .3s var(--ease), width .3s var(--ease), opacity .25s var(--ease);
  pointer-events: none;
}
.menu__pilule.a-un-actif::before { opacity: 1; }
/* Première apparition ou changement de taille d'écran : la pastille se pose sans glisser. */
.menu__pilule.curseur-fixe::before { transition: opacity .25s var(--ease); }

.bouton-tel {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border-radius: var(--pilule);
  background: var(--k-encre);
  color: var(--k-blanc);
  font-size: var(--t-petit);
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: background-color .25s var(--ease);
}
@media (hover: hover) {
  .bouton-tel:hover { background: var(--k-bleu-appuye); }
}

.bouton-menu { display: none; }
.menu-mobile, .menu-voile { display: none; }

/* Après le premier défilement : tout le menu devient une seule capsule de verre. */
.entete.est-defile { --barre-l: min(100% - 48px, 1248px); padding-top: 12px; }
.entete.est-defile .entete__barre {
  padding: 6px 6px 6px 24px;
  background: var(--k-verre-clair-fort);
  border-color: var(--k-verre-clair-bord);
  box-shadow: inset 0 -1px 0 var(--k-verre-clair-lisere), 0 0 0 1px var(--k-filet);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
          backdrop-filter: blur(18px) saturate(150%);
}
.entete.est-defile .entete__logo img { height: 26px; }
/* Avec la pilule (1280 px et plus) : marges intérieures égales des deux côtés de la capsule, et l'air
   à gauche du logo est porté par le logo. La pilule reste ainsi exactement au centre : elle ne glisse
   plus de 9 px vers la droite au premier défilement. */
@media (min-width: 1280px) {
  .entete.est-defile .entete__barre { padding: 6px; }
  .entete.est-defile .entete__logo { margin-left: 18px; }
}
.entete.est-defile .menu__pilule {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/* ---------------------------------------------------------------
   5. HERO
   --------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  height: 100svh;
  min-height: 660px;
  /* Le bloc est décalé vers la gauche pour laisser le technicien libre à droite. */
  padding: 96px 11vw 40px 24px;
  overflow: hidden;
  background: var(--k-blanc-glace);
}
.hero__fond, .hero__fond img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.hero__fond img { object-fit: cover; object-position: 50% 50%; }

.hero__contenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 1040px;
}
.hero__contenu .badge { margin-bottom: 24px; }
.titre-hero { font-size: var(--t-hero); line-height: var(--interligne-hero); }
.titre-hero.a-accent { line-height: var(--interligne-hero-accent); }
.hero__sous {
  margin-top: 26px;
  max-width: 42em;
  font-size: var(--t-intro);
  line-height: 1.5;
  color: var(--k-encre);
}

.barre {
  margin-top: 34px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 7px 7px 24px;
  border-radius: var(--pilule);
  background: var(--k-verre-clair);
  border: 1.5px solid var(--k-verre-clair-bord);
  box-shadow: inset 0 -1px 0 var(--k-verre-clair-lisere);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
}
/* Encre pleine : l'encre douce tombait à 4,2:1 sur le verre devant le rideau. */
.barre__libelle { margin-right: 6px; font-size: var(--t-petit); font-weight: 500; color: var(--k-encre); white-space: nowrap; }
.barre__choix { display: flex; gap: 8px; }

/* Apparition douce au chargement (la hero seulement). */
@keyframes apparition {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes recul { from { transform: scale(1.04); } to { transform: none; } }
.hero__fond img { animation: recul 1.8s var(--ease) both; }
.hero__contenu > * { animation: apparition .9s var(--ease) both; }
.hero__contenu > :nth-child(1) { animation-delay: .10s; }
.hero__contenu > :nth-child(2) { animation-delay: .18s; }
.hero__contenu > :nth-child(3) { animation-delay: .30s; }
.hero__contenu > :nth-child(4) { animation-delay: .42s; }
.entete__barre { animation: fondu .8s var(--ease) .05s both; }

/* ---------------------------------------------------------------
   6. SECTIONS
   --------------------------------------------------------------- */
.section { padding-block: var(--section-y); background: var(--k-blanc); }
.section--glace { background: var(--k-blanc-glace); }

.tete .badge { margin-bottom: 22px; }
.tete--centre {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.tete--centre .intro { margin-inline: auto; text-wrap: balance; }

/* En-tête en deux colonnes : badge et titre à gauche, introduction calée en bas à droite. */
.tete--deux {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gouttiere);
  align-items: end;
  margin-bottom: var(--tete-y);
}
.tete--deux .tete__haut { grid-column: 1 / span 7; }
.tete--deux .intro { grid-column: 8 / span 5; margin: 0; padding-bottom: 12px; }

.section__action { margin-top: 56px; }

/* 6.1 Climatisation : trois portraits */
.cartes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gouttiere);
}
.carte { display: flex; flex-direction: column; height: 100%; }
.carte__photo {
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--k-blanc-glace);
}
.carte__photo picture { display: contents; }
.carte__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
@media (hover: hover) {
  .carte:hover .carte__photo img { transform: scale(1.035); }
  .carte:hover .carte__titre { color: var(--k-bleu-appuye); }
}
.carte:focus-visible { outline-offset: 8px; border-radius: var(--rayon); }
.carte__titre { margin-top: 26px; font-size: var(--t-carte); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; transition: color .2s; }
.carte__texte { margin-top: 8px; max-width: 26em; color: var(--k-encre-douce); text-wrap: pretty; }

/* 6.2 Travaux : mosaïque */
.mosaique {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 520px 520px;
  gap: 24px;
}
.mosaique__tete {
  grid-column: 1 / span 5;
  align-self: center;
  padding-right: 32px;
}
.mosaique__tete .lien-fleche { margin-top: 22px; }
.tuile {
  position: relative;
  display: block;
  isolation: isolate;
  border-radius: var(--rayon);
  overflow: hidden; /* l'ombre de l'étiquette reste sur la photo, jamais sur le fond */
}
.tuile__photo {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--k-brume);
}
.tuile__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
@media (hover: hover) {
  .tuile:hover .tuile__photo img { transform: scale(1.035); }
}
.tuile:focus-visible { outline-offset: 4px; }
/* Rangée du bas en 5, 4 et 3 colonnes : la peinture large (fenêtre et lumière),
   le carrelage étroit et haut, comme un mur. */
.tuile--cuisine { grid-column: 6 / span 7; }
.tuile--peinture { grid-column: 1 / span 5; }
.tuile--parquet { grid-column: span 4; }
.tuile--carrelage { grid-column: span 3; }
.tuile--peinture img { object-position: 65% 45%; }
.tuile--parquet img { object-position: 50% 40%; }
/* Carrelage posé au sol, en salle de bain (6 octobre) : la baignoire en haut dit « salle de bain », les mains à gauche disent « pose ». */
.tuile--carrelage img { object-position: 12% 50%; } /* sol carrelé : la baignoire en haut, les mains qui posent à gauche */

.etiquette {
  position: absolute;
  left: 16px;
  bottom: 16px;
  max-width: calc(100% - 32px);
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 12px 18px 13px;
  border-radius: var(--rayon-petit);
  background: var(--k-verre-clair-net);
  border: 1px solid var(--k-verre-clair-bord);
  box-shadow: var(--k-ombre-verre);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}
.etiquette strong { font-size: var(--t-intro); font-weight: 600; line-height: 1.3; }
.etiquette span { font-size: var(--t-petit); line-height: 1.35; color: var(--k-encre-douce); }

/* 6.3 Comment ça se passe ? : les étapes à gauche, une photo qui reste à droite */
.etapes-grille {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gouttiere);
}
.etapes__tete { grid-column: 1 / -1; margin-bottom: var(--tete-y); }
.etapes__corps { grid-column: 1 / span 7; padding-right: 64px; }
/* La photo prend la hauteur exacte des 4 étapes : son bas tombe sur la fin de l'étape 4
   (la ligne Financement, qui remplissait ce bas, est devenue sa propre section). */
.etapes__photo {
  grid-column: 8 / span 5;
  grid-row: 2;
  align-self: stretch;
  position: relative;
  min-height: 480px;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--k-blanc-glace);
}
.etapes__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; } /* la clim entière en haut */

.etape {
  display: grid;
  grid-template-columns: 104px 1fr;
  align-items: start;
  padding: 36px 0;
}
.etape:first-child { padding-top: 0; }
.etape:last-child { padding-bottom: 0; }
.etape + .etape { border-top: 1px solid var(--k-brume); }
.etape__num {
  display: block;
  font-family: var(--police-titre);
  font-size: var(--t-numero);
  line-height: 1;
  letter-spacing: .01em;
  margin-top: -6px; /* le haut des chiffres sur le haut du titre de l'étape */
}
.etape__titre { font-size: var(--t-carte); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.etape__texte { margin-top: 8px; max-width: 30em; color: var(--k-encre-douce); text-wrap: pretty; }

/* 6.4 Financement : un encart blanc posé sur le blanc glacé.
   Le titre à gauche, la phrase et le bouton à droite, calés sur le bas du titre ;
   la mention obligatoire du crédit en pied d'encart, sous un filet. */
.financement__panneau {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gouttiere);
  align-items: end;
  padding: 64px 64px 0;
  border-radius: var(--rayon);
  background: var(--k-blanc);
  border: 1px solid var(--k-brume);
}
.financement__tete { grid-column: 1 / span 7; }
.financement__corps {
  grid-column: 8 / span 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  padding-bottom: 8px;
}
.financement__texte { font-size: var(--t-intro); line-height: 1.55; color: var(--k-encre-douce); text-wrap: pretty; }
.financement__mention {
  grid-column: 1 / -1;
  margin-top: 56px;
  padding: 24px 0 32px;
  border-top: 1px solid var(--k-filet);
  font-size: var(--t-petit);
  line-height: 1.5;
  color: var(--k-encre-douce);
  text-wrap: pretty; /* jamais un mot seul sur la dernière ligne */
}

/* 6.5 Contact : le salon en pleine largeur, la page finit comme elle commence. */
.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 920px;
  padding: var(--section-y) 0 120px;
  background: var(--k-blanc-glace);
}
.contact__fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La clim au mur, en haut à gauche, reste entière ; le soleil sur le parquet à droite. */
  object-position: -120px 55%;
  z-index: -1;
}
@media (min-width: 1500px) {
  .contact__fond { object-position: 50% 55%; }
}
/* Titre et carte forment une colonne calée à gauche : les fenêtres restent visibles à droite. */
.contact__colonne { max-width: 940px; }
.contact__tete { margin-bottom: 56px; }

.carte-contact {
  display: grid;
  grid-template-columns: 5fr 7fr;
  border-radius: var(--rayon);
  background: var(--k-verre-clair-net);
  border: 1px solid var(--k-verre-clair-bord);
  box-shadow: var(--k-ombre-verre);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
          backdrop-filter: blur(22px) saturate(120%);
}
.carte-contact__infos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 44px 40px;
  border-right: 1px solid var(--k-filet);
}
.contact__joindre { display: flex; flex-direction: column; align-items: flex-start; margin-top: 24px; }
.contact__qui { display: flex; flex-direction: column; gap: 2px; }
.contact__qui span { font-size: var(--t-petit); color: var(--k-encre-douce); }
.contact__qui strong { font-size: var(--t-carte); font-weight: 600; letter-spacing: -.01em; }
.contact__tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--police-titre);
  font-size: var(--t-tel);
  line-height: 1.2;
  letter-spacing: .01em;
  white-space: nowrap;
}
.contact__mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-corps);
  font-weight: 500;
  color: var(--k-encre);
  text-decoration: underline;
  text-decoration-color: var(--k-brume);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color .2s, text-decoration-color .2s;
}
@media (hover: hover) {
  .contact__mail:hover { color: var(--k-bleu-appuye); text-decoration-color: var(--k-bleu-appuye); }
}

.formulaire { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 44px 40px; }
.formulaire__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.champ { display: flex; flex-direction: column; gap: 8px; }
.champ label, .champ legend { font-size: var(--t-petit); font-weight: 600; }
.champ legend { margin-bottom: 8px; padding: 0; }
.facultatif { font-weight: 400; color: var(--k-encre-douce); }
.champ input, .champ textarea {
  width: 100%;
  border: 1px solid var(--k-contour);
  background: var(--k-blanc);
  color: var(--k-encre);
  font-size: var(--t-corps);
  transition: border-color .2s;
}
.champ input { height: 50px; padding: 0 20px; border-radius: var(--pilule); }
.champ textarea { min-height: 104px; padding: 14px 20px; border-radius: var(--rayon-petit); resize: vertical; }
@media (hover: hover) {
  .champ input:hover, .champ textarea:hover { border-color: var(--k-encre-douce); }
}
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--k-bleu); box-shadow: inset 0 0 0 1px var(--k-bleu); }
.choix-groupe { display: flex; flex-wrap: wrap; gap: 8px; }
/* Les pilules du formulaire ne prennent pas la graisse des étiquettes : la pilule cochée reste la plus marquée. */
.champ .choix { font-weight: 400; }
.formulaire .bouton--large { margin-top: 4px; }
/* Pendant l'envoi : « Envoi en cours… », le bouton reste lisible (bleu appuyé), il ne répond plus. */
.formulaire__envoyer:disabled { background: var(--k-bleu-appuye); cursor: progress; transform: none; }

/* Piège à robots (bot-field) : hors de l'écran, hors lecture d'écran (aria-hidden), hors clavier (tabindex -1).
   Un visiteur ne le voit jamais ; un robot qui remplit tout le remplit, et Netlify jette sa demande. */
.formulaire__piege {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Un champ à corriger : message en rouge brique sous le champ, contour fin de la même couleur.
   Le champ qui a le clavier garde un contour double (2 px), comme un champ normal : on voit où l'on tape. */
.champ__erreur { font-size: var(--t-petit); font-weight: 500; line-height: 1.4; color: var(--k-alerte); text-wrap: pretty; }
.champ__erreur:empty { display: none; }
.champ.est-en-erreur input { border-color: var(--k-alerte); }
.champ.est-en-erreur input:focus { border-color: var(--k-alerte); box-shadow: inset 0 0 0 1px var(--k-alerte); }

/* Après l'envoi raté : le titre en rouge brique, le numéro en pilule bleu nuit (comme dans le menu), facile à toucher. */
.formulaire__etat { font-size: var(--t-petit); line-height: 1.5; color: var(--k-encre); text-align: center; }
.formulaire__etat:empty { display: none; }
.formulaire__etat:focus { outline: none; }
.formulaire__etat.est-en-echec { padding: 18px 20px 20px; border-radius: var(--rayon-petit); background: var(--k-blanc); border: 1px solid var(--k-contour); text-wrap: balance; }
.formulaire__etat-titre { font-size: var(--t-corps); font-weight: 600; }
.est-en-echec .formulaire__etat-titre { color: var(--k-alerte); }
.formulaire__etat-appel { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 10px; }
.bouton--nuit { background: var(--k-encre); color: var(--k-blanc); letter-spacing: .01em; }

/* Envoi réussi : les champs laissent la place à la confirmation, à la même hauteur (rien ne saute dans la page).
   Le texte est celui demandé, mis en forme comme la page merci.html : le titre en Anton, la 2e ligne en dégradé. */
.formulaire.est-envoye > :not(.formulaire__etat) { visibility: hidden; }
.formulaire__etat.est-envoye {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 40px;
}
.formulaire__merci-titre { font-size: var(--t-tel); }
.formulaire__merci-texte { margin-top: 18px; font-size: var(--t-intro); line-height: 1.55; text-wrap: balance; }
.formulaire__autre {
  margin-top: 20px;
  padding: 0 4px;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

/* Mention sur les données, sous le bouton. */
.formulaire__rgpd { margin-top: -6px; font-size: var(--t-legende); line-height: 1.45; color: var(--k-encre-douce); text-align: center; text-wrap: balance; }

/* ---------------------------------------------------------------
   7. PIED DE PAGE
   --------------------------------------------------------------- */
.pied { padding: 64px 0 28px; background: var(--k-blanc-glace); font-size: var(--t-petit); }
.pied__haut {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 48px;
}
.pied__logo { display: inline-flex; align-items: center; min-height: 44px; }
.pied__logo img { height: 28px; width: auto; }
.pied__liens { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 36px; }
.pied__liens a, .pied__contact a, .pied__bas a { display: inline-flex; align-items: center; min-height: 44px; transition: color .2s; }
@media (hover: hover) {
  .pied__liens a:hover, .pied__contact a:hover, .pied__bas a:hover { color: var(--k-bleu-appuye); }
}
.pied__contact { display: flex; flex-direction: column; align-items: flex-end; color: var(--k-encre-douce); }
.pied__contact a { min-height: 32px; }
.pied__tel { font-weight: 600; color: var(--k-encre); }
.pied__bas {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 44px;
  padding-top: 12px;
  border-top: 1px solid var(--k-brume);
  font-size: var(--t-legende);
  color: var(--k-encre-douce);
}

/* ---------------------------------------------------------------
   8. ÉCRANS MOYENS
   --------------------------------------------------------------- */
@media (max-width: 1080px) {
  .mosaique { grid-template-rows: none; }
  .mosaique__tete { grid-column: 1 / -1; padding: 0 0 16px; }
  .tuile--cuisine { grid-column: 1 / -1; height: 460px; }
  .tuile--peinture, .tuile--parquet, .tuile--carrelage { height: 440px; }
  /* Tuile étroite (158 px à 768) : on garde le côté gauche (mains, baignoire). */
  .tuile--carrelage img { object-position: 12% 50%; }
  .carte-contact { grid-template-columns: 1fr; }
  .carte-contact__infos { border-right: 0; border-bottom: 1px solid var(--k-filet); }
  .contact { min-height: 0; }
  /* Carte sur une colonne : elle prend toute la largeur du contenu, mêmes bords que les photos. */
  .contact__colonne { max-width: none; }
  /* Pied de page : les liens passent sur leur propre ligne, sous le logo et le contact. */
  .pied__haut { grid-template-columns: 1fr auto; row-gap: 20px; }
  .pied__liens { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  /* Financement : le titre, puis la phrase et le bouton dessous. */
  .financement__panneau { display: block; padding: 48px 48px 0; }
  .financement__corps { margin-top: 24px; padding: 0; }
  .financement__texte { max-width: 34em; }
  .financement__mention { margin-top: 40px; }
}
/* De 901 à 1080 px : l'encart sur une colonne laissait un tiers vide à droite ;
   la phrase et le bouton se partagent la ligne, le bouton calé sur le bas de la phrase. */
@media (min-width: 900.02px) and (max-width: 1080px) {
  .financement__corps { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; }
}
@media (max-width: 900px) {
  .etapes__corps { grid-column: 1 / -1; padding-right: 0; }
  .etapes__photo { display: none; }
}
@media (max-width: 1100px) {
  .hero { padding-right: 24px; }
}
/* Sous 1280 px, la pilule de 5 onglets, le logo et le numéro ne tiennent plus côte à côte
   sans se serrer (il faut environ 1140 px de barre) : bouton « Menu ». */
@media (max-width: 1279.98px) {
  .menu { display: none; }
  .entete__barre { grid-template-columns: 1fr auto auto; gap: 8px; }
  .bouton-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    height: 44px;
    padding: 0 18px;
    border-radius: var(--pilule);
    background: var(--k-verre-clair-fort);
    border: 1px solid var(--k-contour);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
            backdrop-filter: blur(16px) saturate(140%);
    font-size: var(--t-petit);
    font-weight: 600;
    color: var(--k-encre);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .entete.est-defile .bouton-menu { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bouton-menu[aria-expanded="true"] { background: var(--k-brume); border-color: var(--k-brume); }
  .entete.est-defile .bouton-menu[aria-expanded="true"] { background: var(--k-brume); }
  /* Le menu déroulant : calé sous le bouton, à droite de la barre. Il s'ouvre et se ferme
     en fondu avec un léger glissement (250 ms). Sans JavaScript il reste caché (attribut hidden). */
  .menu-mobile {
    pointer-events: auto;
    width: min(var(--barre-l), 380px);
    margin: 10px calc((100% - var(--barre-l)) / 2) 0 auto;
    display: flex;
    flex-direction: column;
    padding: 6px 8px;
    /* Jamais plus haut que l'écran (téléphone à l'horizontale, 320 px de haut) : il défile alors
       à l'intérieur, la page derrière reste bloquée. 96 px = le haut du menu (80 px au plus) + de l'air. */
    max-height: calc(100svh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--rayon);
    background: var(--k-verre-clair-dense);
    border: 1px solid var(--k-contour);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
            backdrop-filter: blur(22px) saturate(150%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
  }
  .menu-mobile.est-ouvert {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s;
  }
  .menu-mobile a {
    display: flex;
    flex: none;
    align-items: center;
    min-height: 56px;
    padding: 0 14px;
    font-size: var(--t-carte);
    font-weight: 600;
    border-bottom: 1px solid var(--k-filet);
    transition: color .2s;
  }
  .menu-mobile a:last-child { border-bottom: 0; }
  .menu-mobile a[aria-current="true"] { color: var(--k-bleu-appuye); }
  .menu-mobile a:focus-visible { outline-offset: -2px; border-radius: var(--rayon-petit); }
  @media (hover: hover) {
    .menu-mobile a:hover { color: var(--k-bleu-appuye); }
  }
  /* Le voile : la page s'efface un peu derrière le menu ; le toucher ferme le menu. */
  .menu-voile {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: auto;
    background: var(--k-voile-menu);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease), visibility 0s linear .25s;
    -webkit-tap-highlight-color: transparent;
  }
  .menu-voile.est-ouvert { opacity: 1; visibility: visible; transition: opacity .25s var(--ease), visibility 0s; }
  .menu-mobile[hidden], .menu-voile[hidden] { display: none; }
}

/* ---------------------------------------------------------------
   9. TÉLÉPHONE
   --------------------------------------------------------------- */
@media (max-width: 760px) {
  .ordi { display: none; }

  .entete { --barre-l: calc(100% - 32px); padding-top: 14px; }
  .entete__barre { gap: 6px; }
  .entete__logo img { height: 20px; }
  .bouton-tel, .bouton-menu { height: 44px; padding: 0 14px; font-size: var(--t-petit); }
  .bouton-menu { min-width: 76px; }
  .entete.est-defile { --barre-l: calc(100% - 16px); padding-top: 8px; }
  .entete.est-defile .entete__barre { padding: 4px 4px 4px 14px; }
  .entete.est-defile .entete__logo img { height: 19px; }
  /* Au téléphone, le menu prend toute la largeur de la barre (ou de la capsule). */
  .menu-mobile { width: var(--barre-l); margin: 10px auto 0; }

  /* Hero : la photo garde toujours le cadrage du 390 x 844 (les mains et le
     thermomètre en haut, le bras coupé à droite), même sur un écran plus court.
     Le texte commence sous les mains ; sur un iPhone court, la hero dépasse
     un peu de l'écran au lieu de poser le titre sur le bras. */
  .hero {
    height: auto;
    min-height: 100svh;
    align-items: flex-start;
    /* Le texte commence sous la main au thermomètre ; plus bas, le bras s'écarte vers la droite. */
    padding: 68vw 16px 32px;
  }
  .hero__fond img { bottom: auto; height: max(100%, 216vw); object-position: 0% 0%; }
  /* 7,45 em au plus : « VOTRE CLIM INSTALLÉE » (8,3 em) et « PAR DES PROFESSIONNELS » (9,5 em) se coupent en deux,
     « PROFESSIONNELS » (6,2 em) tient sur une ligne. Les espaces insécables de index.html ne laissent qu'une coupure
     par ligne : VOTRE CLIM / INSTALLÉE / PAR DES / PROFESSIONNELS, deux blocs qui se lisent d'un trait. */
  .titre-hero { max-width: 7.45em; }
  .titre-hero .ligne { text-wrap: pretty; }
  /* L'accent du É de INSTALLÉE (2e ligne du téléphone) touchait presque le bas de « CLIM » (3 px).
     Interligne un peu plus grand pour la 1re ligne du titre seulement : 7 à 8 px d'air. */
  .titre-hero.a-accent .ligne:first-child { line-height: 1.26; }
  /* Espacements resserrés depuis le titre en 4 lignes : le bouton « Demander mon devis » reste dans le premier écran. */
  .hero__contenu .badge { margin-bottom: 14px; }
  .hero__sous { margin-top: 14px; max-width: 30em; text-wrap: balance; }
  .barre {
    margin-top: 18px;
    width: 100%;
    max-width: 380px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 10px 8px 8px;
    /* Arrondi concentrique : demi-hauteur des pilules (22) + la marge intérieure (8). */
    border-radius: calc(22px + 8px);
  }
  .barre__libelle { width: 100%; margin: 0; text-align: center; }
  .barre__choix { width: 100%; }
  .barre__choix .choix { flex: 1; }
  .barre__choix .choix span { width: 100%; justify-content: center; padding: 0 10px; }
  .barre .bouton { width: 100%; height: 50px; }

  .tete .badge { margin-bottom: 18px; }
  .intro { margin-top: 18px; }
  .tete--deux { display: block; }
  .tete--deux .intro { margin-top: 18px; padding: 0; }
  .section__action { margin-top: 40px; }
  .section__action .bouton { width: 100%; }

  /* Climatisation : l'installation en grand, puis dépannage et entretien côte à côte. */
  .cartes { grid-template-columns: 1fr 1fr; gap: 36px var(--gouttiere); }
  .cartes__une { grid-column: 1 / -1; }
  .cartes__une .carte__photo { aspect-ratio: 4 / 3; }
  .carte__titre { margin-top: 18px; }
  .cartes li:not(.cartes__une) .carte__titre { margin-top: 14px; font-size: var(--t-intro); }
  .cartes li:not(.cartes__une) .carte__texte { margin-top: 4px; font-size: var(--t-petit); line-height: 1.5; }

  /* Travaux : cuisine en grand, peinture et parquet côte à côte, carrelage en bandeau. */
  .mosaique { grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 28px var(--gouttiere); }
  .mosaique__tete { grid-column: 1 / -1; padding: 0 0 12px; }
  .mosaique__tete .lien-fleche { margin-top: 14px; }
  .tuile--cuisine, .tuile--carrelage { grid-column: 1 / -1; height: auto; }
  .tuile--peinture, .tuile--parquet { grid-column: auto; height: auto; }
  .tuile__photo { position: relative; inset: auto; }
  .tuile--peinture, .tuile--parquet { border-radius: 0; overflow: visible; }
  .tuile--cuisine .tuile__photo { aspect-ratio: 4 / 3; }
  .tuile--carrelage .tuile__photo { aspect-ratio: 16 / 10; }
  .tuile--peinture .tuile__photo, .tuile--parquet .tuile__photo { aspect-ratio: 3 / 4; }
  .tuile--carrelage img { object-position: 50% 40%; } /* le bas de la baignoire, le sol carrelé, les outils, le carreau qu’on pose */
  .tuile--peinture img { object-position: 50% 40%; }
  .etiquette { left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 10px 14px 11px; }
  .etiquette strong { font-size: var(--t-intro); }
  .etiquette span { font-size: var(--t-petit); }
  .tuile--peinture:focus-visible, .tuile--parquet:focus-visible { border-radius: var(--rayon); }
  /* Dans la paire, l'étiquette passe sous la photo, sans verre. */
  .tuile--peinture .etiquette, .tuile--parquet .etiquette {
    position: static;
    max-width: none;
    margin-top: 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }

  /* Étapes : une colonne, pas de photo (c'est celle de la hero). */
  .etape { grid-template-columns: 56px 1fr; padding: 26px 0; }
  .etape:first-child { padding-top: 0; }
  .etape__num { margin-top: -3px; }
  .etape__texte { margin-top: 6px; }

  /* Financement : l'encart garde son fond blanc, aux bords du contenu. */
  .financement__panneau { padding: 32px 24px 0; }
  .financement__corps { margin-top: 18px; gap: 24px; }
  .financement__corps .bouton { width: 100%; }
  .financement__mention { margin-top: 32px; padding: 20px 0 26px; }

  /* Contact : le salon en bandeau pleine largeur, la carte monte dessus comme une feuille. */
  .contact { --bande: 500px; min-height: 0; padding: 0; background: var(--k-blanc); }
  .contact__fond { inset: 0 0 auto 0; height: var(--bande); object-position: 72% 50%; }
  .contact__tete { min-height: calc(var(--bande) - 96px); padding-top: 112px; margin: 0; }
  .carte-contact {
    margin-inline: calc(-1 * var(--marge));
    border: 0;
    border-radius: var(--rayon) var(--rayon) 0 0;
    background: var(--k-verre-clair-dense);
    box-shadow: none;
  }
  .carte-contact__infos { padding: 32px var(--marge) 28px; }
  .contact__joindre { margin-top: 16px; }
  .formulaire { padding: 28px var(--marge) 64px; gap: 18px; }
  .formulaire__ligne { grid-template-columns: 1fr; gap: 18px; }
  .champ--besoin .choix { flex: 1; }
  .champ--besoin .choix span { width: 100%; justify-content: center; padding: 0 10px; }
  .formulaire__etat-appel .bouton { width: 100%; }
  .formulaire__etat.est-envoye { padding: 24px var(--marge); }
  /* « MERCI, VOTRE DEMANDE » reste sur une ligne jusqu'à 320 px de large (8,9 em de long). */
  .formulaire__merci-titre { font-size: min(var(--t-tel), calc((100vw - 2 * var(--marge)) / 9.2)); }

  .pied { padding: 48px 0 24px; }
  .pied__haut { grid-template-columns: 1fr; gap: 20px; }
  .pied__liens { justify-content: flex-start; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .pied__contact { align-items: flex-start; }
  .pied__contact a { min-height: 44px; }
  .pied__bas { margin-top: 24px; }
}

/* Écrans en hauteur (téléphone, tablette debout) : la photo des mains.
   Un voile blanc très doux derrière le texte le détache de la plante. */
@media (max-aspect-ratio: 4/5) {
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(90% 46% at 50% 56%, rgb(var(--k-blanc-rvb) / 0.55) 0%, rgb(var(--k-blanc-rvb) / 0.25) 55%, rgb(var(--k-blanc-rvb) / 0) 100%);
    pointer-events: none;
  }
}
/* Téléphone à l'écran court (iPhone dans Safari : 390 x 664, 393 x 659, 430 x 739...) : sans cela, le premier écran
   s'arrêtait sur « Votre besoin : », sans les choix ni le bouton. Le sous-titre laisse sa place (le badge dit déjà
   « Climatisation et travaux intérieurs »), la barre se rapproche du titre et, à partir de 375 px de large, le texte
   remonte un peu sous la main (badge toujours à 19 px ou plus du gant). Pas sous 360 px de large : la hero y raccourcit,
   la photo change d'échelle et le badge viendrait sur le gant. Téléphone tenu en hauteur seulement (à l'horizontale, rien ne change).
   Pour garder le sous-titre partout : retirer ces blocs. */
@media (min-width: 360px) and (max-width: 760px) and (max-height: 760px) and (orientation: portrait) {
  .hero__sous { display: none; }
  .barre { margin-top: 14px; }
}
@media (min-width: 375px) and (max-width: 760px) and (max-height: 760px) and (orientation: portrait) {
  .hero { padding-top: 66vw; }
}
/* Très court (700 px de haut ou moins) : le titre un peu plus petit, toujours sur 4 lignes. */
@media (min-width: 360px) and (max-width: 760px) and (max-height: 700px) and (orientation: portrait) {
  :root { --t-hero: min(46px, calc((100vw - 32px) / 9.8)); }
}
/* Sous 360 px, la photo grandit avec la hero : le texte descend un peu pour que le badge ne touche pas le gant (17 px d'air). */
@media (max-width: 359.98px) and (orientation: portrait) {
  .hero { padding-top: 70vw; }
}
/* Tablette debout : le bras du technicien occupe le haut à droite, le texte descend sous lui. */
@media (min-width: 761px) and (max-aspect-ratio: 4/5) {
  .hero { align-items: flex-end; padding: 96px 24px 13vh; }
}

@media (max-width: 380px) {
  .entete__logo img { height: 19px; }
  .bouton-tel, .bouton-menu { padding: 0 12px; font-size: var(--t-legende); }
  .bouton-menu { min-width: 68px; }
}
/* 320 à 350 px : la barre est pleine. Avant, le logo y était écrasé en largeur (jusqu'à 15 %) et collé
   au numéro (6 px). Logo un peu plus petit, boutons un peu plus serrés : au moins 10 px d'air.
   « Fermer » tient dans les 64 px du bouton. */
@media (max-width: 350px) {
  .entete__logo img, .entete.est-defile .entete__logo img { height: 16px; }
  .bouton-tel, .bouton-menu { padding: 0 10px; }
  .bouton-menu { min-width: 64px; }
}

/* ---------------------------------------------------------------
   10. MOUVEMENT RÉDUIT
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------
   11. PAGE MERCI (merci.html)
   On y arrive après un envoi du formulaire sans JavaScript. La page finit
   comme le contact : le salon en pleine largeur, une carte de verre blanc.
   --------------------------------------------------------------- */
.merci {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 56px var(--marge);
  overflow: hidden;
  background: var(--k-blanc-glace);
}
.merci__fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  z-index: -1;
}
.merci__carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 640px);
  padding: 44px 48px 48px;
  border-radius: var(--rayon);
  background: var(--k-verre-clair-net);
  border: 1px solid var(--k-verre-clair-bord);
  box-shadow: var(--k-ombre-verre);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
          backdrop-filter: blur(22px) saturate(120%);
  text-align: center;
}
.merci__logo { display: inline-flex; align-items: center; min-height: 44px; }
.merci__logo img { height: 30px; width: auto; }
.merci__titre { margin-top: 36px; }
.merci__texte { margin-top: 22px; max-width: 28em; font-size: var(--t-intro); line-height: 1.55; color: var(--k-encre); text-wrap: balance; }
.merci__joindre {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--k-filet);
}
.merci__joindre p { font-size: var(--t-petit); color: var(--k-encre-douce); }
.merci .bouton { margin-top: 28px; }

@media (max-width: 760px) {
  .merci { padding: 24px 16px; }
  .merci__fond { object-position: 9% 50%; } /* la clim au mur, au-dessus de la carte */
  .merci__carte { padding: 32px 24px 36px; }
  .merci__logo img { height: 24px; }
  /* « C’EST BIEN REÇU » (6 em) reste sur une ligne jusqu’à 320 px de large. */
  .merci__titre { margin-top: 28px; font-size: min(var(--t-titre), calc((100vw - 82px) / 6.1)); }
  .merci__texte { margin-top: 18px; }
  .merci__joindre { margin-top: 26px; padding-top: 20px; }
  .merci .bouton { width: 100%; margin-top: 24px; }
}

/* Champs obligatoires (06/10) */
.obligatoire { color: var(--k-bleu); font-weight: 600; }
.formulaire__mention { font-size: var(--t-petit); color: var(--k-encre-douce); margin: 0; }

/* 6.1 bis Clim réversible (06/10) : un panneau glacé, le texte à gauche, quatre points à droite. */
.section--reversible { padding-top: 0; }
.reversible {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gouttiere);
  row-gap: 40px;
  align-items: start;
  padding: clamp(28px, 5vw, 64px);
  border-radius: var(--rayon);
  background: var(--k-blanc-glace);
}
.reversible__tete { grid-column: 1 / span 6; }
.reversible__tete .intro { margin-bottom: 32px; }
.reversible__points {
  grid-column: 8 / span 5;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: point;
}
.reversible__points li {
  counter-increment: point;
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 12px;
  padding-block: 22px;
  border-top: 1px solid var(--k-brume);
}
.reversible__points li:first-child { border-top: 0; padding-top: 0; }
.reversible__points li::before {
  content: counter(point, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--police-titre);
  font-size: 26px;
  line-height: 1;
  color: var(--k-bleu);
}
.reversible__points h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.reversible__points p { margin: 0; color: var(--k-encre-douce); }
@media (max-width: 1180px) {
  .reversible__tete, .reversible__points { grid-column: 1 / -1; }
}