/* Pinecrest Landscaping : feuille de style de la démo américaine (Portland, Oregon).
   Matières du sujet : le ciel gris-vert de Portland après la pluie (fond « brume »),
   le lichen sur les troncs (sections alternées), le sapin de Douglas (encre et
   sections sombres), la terre de compost (bordure du comparateur), la pluie
   (barres du calendrier) et le groseillier à fleurs, Ribes sanguineum, qui fleurit
   rose sous la pluie de février : l'unique couleur d'action.
   Petrona pour les titres (l'étiquette de pépinière, les noms latins en italique),
   Cabin pour le texte (la signalétique des sentiers). Rayons de 3 px au plus. */

@font-face {
  font-family: "Petrona";
  src: url("fonts/petrona-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Petrona";
  src: url("fonts/petrona-italic-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Cabin";
  src: url("fonts/cabin-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Règles de /_commun/vendor/lenis.css, reprises ici pour éviter une feuille
   bloquante de plus au premier rendu (Lenis lui-même vient de /_commun/vendor). */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

:root {
  --brume: #E6EBE3;
  --lichen: #DCE3D7;
  --papier: #F4F6F1;
  --sapin: #14261D;
  --sapin-2: #1C3328;
  --sapin-3: #2A4437;
  --sapin-fonce: #0E1B14;
  --mousse: #56763A;
  --mousse-claire: #A9C48C;
  --basalte: #4A5650;
  --basalte-clair: #AFBDB4;
  --pluie: #5F7B8C;
  --pluie-claire: #9FB7C6;
  --terre: #2E2117;
  --groseille: #B32C63;
  --groseille-fonce: #92214F;
  --groseille-claire: #F4A3C4;
  --blanc-casse: #F7F8F4;
  --bord-champ: #7A8A80;
  --filet: rgb(20 38 29 / 0.14);
  --filet-fort: rgb(20 38 29 / 0.28);
  --filet-sombre: rgb(230 235 227 / 0.16);

  --font-titre: "Petrona", Georgia, "Times New Roman", serif;
  --font-texte: "Cabin", "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.84rem, 0.8rem + 0.2vw, 0.94rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-1: clamp(1.12rem, 1.04rem + 0.4vw, 1.3rem);
  --step-2: clamp(1.35rem, 1.18rem + 0.8vw, 1.85rem);
  --step-3: clamp(1.75rem, 1.4rem + 1.7vw, 2.7rem);
  --step-4: clamp(2.1rem, 1.55rem + 2.7vw, 3.9rem);
  --step-5: clamp(2.6rem, 1.5rem + 4.8vw, 5.6rem);

  --gouttiere: clamp(16px, 4vw, 40px);
  --rayon: 3px;
  --entete-h: 74px;
  --bande: 12px;
  --ease-sortie: cubic-bezier(0.22, 1, 0.36, 1);
  --ombre: 0 1px 2px rgb(20 38 29 / 0.06), 0 22px 44px -26px rgb(20 38 29 / 0.5);
}

/* ------------------------------------------------------------------ */
/* Base                                                                 */
/* ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--entete-h) + var(--brnsg-barre, 0px) + 16px);
  scrollbar-color: var(--mousse) var(--lichen);
}

body {
  margin: 0;
  background: var(--brume);
  color: var(--sapin);
  font-family: var(--font-texte);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

img {
  height: auto;
}

p {
  margin: 0 0 1rem;
  text-wrap: pretty;
}

h1,
h2,
h3 {
  margin: 0;
}

i[lang="la"] {
  font-family: var(--font-titre);
  font-style: italic;
}

::selection {
  background: var(--groseille);
  color: var(--blanc-casse);
}

a {
  color: var(--groseille);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.2s, text-decoration-thickness 0.2s;
}

a:hover {
  color: var(--groseille-fonce);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--groseille);
  outline-offset: 3px;
}

.section--sapin :focus-visible,
.page-tete :focus-visible,
.pied :focus-visible,
.hero :focus-visible,
.resultat :focus-visible,
.barre-actions :focus-visible {
  outline-color: var(--groseille-claire);
}

address {
  font-style: normal;
}

/* L'attribut hidden gagne toujours, même sur un élément stylé en flex ou grid. */
[hidden] {
  display: none !important;
}

.colonne {
  width: min(100% - 2 * var(--gouttiere), 1240px);
  margin-inline: auto;
}

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

.lien-evitement {
  position: absolute;
  left: 1rem;
  top: -120px;
  z-index: 10000;
  padding: 0.75rem 1rem;
  border-radius: var(--rayon);
  background: var(--sapin);
  color: var(--blanc-casse);
  font-weight: 600;
}

.lien-evitement:focus {
  top: calc(var(--brnsg-barre, 0px) + 0.5rem);
  color: var(--blanc-casse);
}

.icone {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icone-goutte {
  width: 0.95em;
  height: 0.95em;
  color: var(--pluie);
  stroke-width: 1.8;
}

.icone-etoile {
  fill: currentColor;
  stroke: none;
}

/* État d'ouverture calculé (horaires.js) : pastille devant le texte. */
[data-brnsg-horaires][data-etat]::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.45em;
  border-radius: 50%;
  vertical-align: 0.08em;
  background: var(--basalte-clair);
}

[data-brnsg-horaires][data-etat="ouvert"]::before {
  background: var(--mousse);
  box-shadow: 0 0 0 3px rgb(86 118 58 / 0.22);
}

.section--sapin [data-brnsg-horaires][data-etat="ouvert"]::before,
.pied [data-brnsg-horaires][data-etat="ouvert"]::before {
  background: var(--mousse-claire);
}

/* ------------------------------------------------------------------ */
/* Boutons et liens                                                     */
/* ------------------------------------------------------------------ */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0 1.45rem;
  border: 0;
  border-radius: var(--rayon);
  background: var(--groseille);
  color: var(--blanc-casse);
  font: 600 1rem/1.1 var(--font-texte);
  letter-spacing: 0.005em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.25s var(--ease-sortie);
}

.bouton:hover {
  background: var(--groseille-fonce);
  color: var(--blanc-casse);
  text-decoration: none;
}

.bouton:active {
  transform: translateY(1px);
}

.bouton--petit {
  min-height: 44px;
  padding: 0 1.05rem;
  font-size: 0.93rem;
}

.bouton--large {
  width: 100%;
}

.bouton[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.bouton-lien {
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: 600 0.95rem/1.2 var(--font-texte);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  cursor: pointer;
}

.bouton-lien:hover {
  text-decoration-thickness: 2px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.6rem;
}

/* Lien d'appel : texte souligné et icône, jamais un second bouton. */
.lien-appel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--sapin);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.lien-appel:hover {
  color: var(--sapin);
  text-decoration-thickness: 2px;
}

.lien-appel .icone {
  width: 18px;
  height: 18px;
}

.lien-appel--clair,
.lien-appel--clair:hover {
  color: var(--blanc-casse);
}

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--sapin);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--filet-fort);
  text-underline-offset: 0.28em;
}

.lien-fleche:hover {
  color: var(--groseille-fonce);
  text-decoration-color: currentColor;
}

.lien-fleche--clair,
.lien-fleche--clair:hover,
.section--sapin .lien-fleche,
.section--sapin .lien-fleche:hover {
  color: var(--blanc-casse);
  text-decoration-color: rgb(247 248 244 / 0.45);
}

.icone-fleche {
  transition: transform 0.25s var(--ease-sortie);
}

a:hover .icone-fleche {
  transform: translateX(4px);
}

.lien-seul {
  margin: 2.25rem 0 0;
}

/* ------------------------------------------------------------------ */
/* Titres                                                               */
/* ------------------------------------------------------------------ */

.titre-section {
  margin-bottom: 1.1rem;
  font-family: var(--font-titre);
  font-weight: 650;
  font-size: var(--step-4);
  line-height: 1.04;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.section-tete {
  max-width: 48rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section-tete--ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 3rem;
  max-width: none;
}

.section-tete--ligne > div {
  max-width: 46rem;
}

.section-chapo {
  margin: 0;
  color: var(--basalte);
  font-size: var(--step-1);
}

.section--sapin .section-chapo {
  color: var(--basalte-clair);
}

.sous-titre {
  margin-bottom: 0.9rem;
  font-family: var(--font-titre);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.15;
}

.sources {
  margin: 1.25rem 0 0;
  color: var(--basalte);
  font-size: 0.85rem;
  line-height: 1.5;
}

.sources-libelle {
  font-weight: 700;
}

.sources a {
  color: inherit;
}

.section--sapin .sources {
  color: var(--basalte-clair);
}

.liste-coches {
  display: grid;
  gap: 0.75rem;
  margin: 1.25rem 0;
  padding: 0;
  list-style: none;
}

.liste-coches li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.liste-coches .icone {
  margin-top: 0.25rem;
  color: var(--mousse);
  stroke-width: 2.4;
}

.section--sapin .liste-coches .icone {
  color: var(--mousse-claire);
}

/* ------------------------------------------------------------------ */
/* En-tête                                                              */
/* ------------------------------------------------------------------ */

.entete {
  position: sticky;
  top: var(--brnsg-barre, 0px);
  z-index: 900;
  background: var(--brume);
  border-bottom: 1px solid var(--filet);
  transition: transform 0.35s var(--ease-sortie);
}

.entete--cachee {
  transform: translateY(calc(-100% - var(--brnsg-barre, 0px) - 2px));
}

.entete-grille {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  min-height: var(--entete-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
  color: var(--sapin);
  text-decoration: none;
}

.logo:hover {
  color: var(--sapin);
}

.logo-marque {
  width: 38px;
  height: 38px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.logo-sapin {
  stroke: currentColor;
  stroke-width: 2.6;
}

.logo-terre {
  stroke: var(--groseille);
  stroke-width: 3;
}

.logo-texte {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo-nom {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.logo-metier {
  margin-top: 0.24rem;
  color: var(--basalte);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.nav {
  margin-left: auto;
}

.nav-liste {
  display: flex;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  position: relative;
  display: block;
  padding-block: 0.45rem;
  color: var(--sapin);
  font-size: 0.97rem;
  font-weight: 500;
  text-decoration: none;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--groseille);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease-sortie);
}

.nav a:hover::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-mobile-seulement {
  display: none;
}

.entete-actions {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.entete-tel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--sapin);
  line-height: 1.2;
  text-decoration: none;
}

.entete-tel:hover {
  color: var(--groseille-fonce);
}

.entete-tel-numero {
  font-family: var(--font-titre);
  font-size: 1.2rem;
  font-weight: 600;
  white-space: nowrap;
}

.entete-statut {
  color: var(--basalte);
  font-size: 0.74rem;
  white-space: nowrap;
}

.menu-bouton {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 0.85rem;
  border: 1.5px solid var(--filet-fort);
  border-radius: var(--rayon);
  background: transparent;
  color: var(--sapin);
  font: 600 0.9rem var(--font-texte);
  cursor: pointer;
}

.menu-bouton-traits,
.menu-bouton-traits::before,
.menu-bouton-traits::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease-sortie), opacity 0.2s;
}

.menu-bouton-traits {
  position: relative;
}

.menu-bouton-traits::before,
.menu-bouton-traits::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-bouton-traits::before {
  top: -6px;
}

.menu-bouton-traits::after {
  top: 6px;
}

.menu-bouton[aria-expanded="true"] .menu-bouton-traits {
  background: transparent;
}

.menu-bouton[aria-expanded="true"] .menu-bouton-traits::before {
  transform: translateY(6px) rotate(45deg);
}

.menu-bouton[aria-expanded="true"] .menu-bouton-traits::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1120px) {
  .nav-liste {
    gap: 1.15rem;
  }

  .entete-devis {
    display: none;
  }
}

@media (max-width: 960px) {
  :root {
    --entete-h: 64px;
  }

  .entete-grille {
    gap: 1rem;
  }

  .menu-bouton {
    display: inline-flex;
  }

  .nav {
    position: fixed;
    inset: calc(var(--brnsg-barre, 0px) + var(--entete-h)) 0 0 0;
    z-index: 890;
    display: none;
    margin: 0;
    padding: 1.25rem var(--gouttiere) 6rem;
    overflow-y: auto;
    background: var(--brume);
    border-top: 1px solid var(--filet);
  }

  .nav--ouverte {
    display: block;
  }

  .nav-liste {
    flex-direction: column;
    gap: 0;
  }

  .nav-liste li {
    border-bottom: 1px solid var(--filet);
  }

  .nav a {
    padding-block: 1rem;
    font-family: var(--font-titre);
    font-size: 1.65rem;
    font-weight: 600;
  }

  .nav a::after {
    display: none;
  }

  .nav a[aria-current="page"] {
    color: var(--groseille);
  }

  .nav-mobile-seulement {
    display: block;
  }

  .entete-actions {
    margin-left: auto;
  }

  body.menu-ouvert {
    overflow: hidden;
  }
}

@media (max-width: 520px) {
  .logo-marque {
    width: 32px;
    height: 32px;
  }

  .logo-nom {
    font-size: 1.22rem;
  }

  .logo-metier {
    font-size: 0.56rem;
    letter-spacing: 0.24em;
  }

  .entete-actions {
    gap: 0.7rem;
  }

  .entete-tel-numero {
    font-size: 1.02rem;
  }

  .entete-statut {
    font-size: 0.68rem;
  }

  .menu-bouton {
    padding: 0 0.7rem;
  }

  .menu-bouton-texte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (max-width: 380px) {
  .entete-statut,
  .logo-metier {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* Comparateur avant / après : bordure de massif ondulée               */
/* ------------------------------------------------------------------ */

.comparateur {
  position: relative;
}

.comparateur-cadre {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--rayon);
  background: var(--sapin);
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.comparateur-couche {
  position: absolute;
  inset: 0;
}

.comparateur-couche picture,
.comparateur-couche img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Les photos ne captent pas le pointeur : pas de glisser-déposer natif de
   l'image, qui annulerait le geste (pointercancel). */
.comparateur-couche img {
  pointer-events: none;
  -webkit-user-drag: none;
}

/* La photo « après » est découpée le long d'une bordure ondulée, comme le bord
   d'un massif bêché ; une bande de terre sombre la suit. Les deux polygones
   ne dépendent que de --c, posé par script.js. */
.comparateur-apres {
  clip-path: polygon(0 0, calc(var(--c) + 1.74%) 0%, calc(var(--c) + 2.02%) 4.17%, calc(var(--c) + 1.96%) 8.33%, calc(var(--c) + 1.78%) 12.5%, calc(var(--c) + 1.65%) 16.67%, calc(var(--c) + 1.64%) 20.83%, calc(var(--c) + 1.62%) 25%, calc(var(--c) + 1.37%) 29.17%, calc(var(--c) + 0.76%) 33.33%, calc(var(--c) + -0.16%) 37.5%, calc(var(--c) + -1.19%) 41.67%, calc(var(--c) + -2%) 45.83%, calc(var(--c) + -2.38%) 50%, calc(var(--c) + -2.31%) 54.17%, calc(var(--c) + -1.95%) 58.33%, calc(var(--c) + -1.54%) 62.5%, calc(var(--c) + -1.25%) 66.67%, calc(var(--c) + -1.07%) 70.83%, calc(var(--c) + -0.86%) 75%, calc(var(--c) + -0.41%) 79.17%, calc(var(--c) + 0.33%) 83.33%, calc(var(--c) + 1.26%) 87.5%, calc(var(--c) + 2.1%) 91.67%, calc(var(--c) + 2.58%) 95.83%, calc(var(--c) + 2.56%) 100%, 0 100%);
}

.comparateur-terre {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(0 0 0 / 0.18)),
    linear-gradient(90deg, #241910 0%, #3B2A1C 55%, #57412E 100%);
  clip-path: polygon(0 0, calc(var(--c) + 1.74% + var(--bande)) 0%, calc(var(--c) + 2.02% + var(--bande)) 4.17%, calc(var(--c) + 1.96% + var(--bande)) 8.33%, calc(var(--c) + 1.78% + var(--bande)) 12.5%, calc(var(--c) + 1.65% + var(--bande)) 16.67%, calc(var(--c) + 1.64% + var(--bande)) 20.83%, calc(var(--c) + 1.62% + var(--bande)) 25%, calc(var(--c) + 1.37% + var(--bande)) 29.17%, calc(var(--c) + 0.76% + var(--bande)) 33.33%, calc(var(--c) + -0.16% + var(--bande)) 37.5%, calc(var(--c) + -1.19% + var(--bande)) 41.67%, calc(var(--c) + -2% + var(--bande)) 45.83%, calc(var(--c) + -2.38% + var(--bande)) 50%, calc(var(--c) + -2.31% + var(--bande)) 54.17%, calc(var(--c) + -1.95% + var(--bande)) 58.33%, calc(var(--c) + -1.54% + var(--bande)) 62.5%, calc(var(--c) + -1.25% + var(--bande)) 66.67%, calc(var(--c) + -1.07% + var(--bande)) 70.83%, calc(var(--c) + -0.86% + var(--bande)) 75%, calc(var(--c) + -0.41% + var(--bande)) 79.17%, calc(var(--c) + 0.33% + var(--bande)) 83.33%, calc(var(--c) + 1.26% + var(--bande)) 87.5%, calc(var(--c) + 2.1% + var(--bande)) 91.67%, calc(var(--c) + 2.58% + var(--bande)) 95.83%, calc(var(--c) + 2.56% + var(--bande)) 100%, 0 100%);
}

.comparateur-etiquette {
  position: absolute;
  top: 1rem;
  z-index: 2;
  padding: 0.38rem 0.62rem;
  border-radius: 2px;
  background: rgb(14 27 20 / 0.82);
  color: var(--blanc-casse);
  font: 700 0.7rem/1 var(--font-texte);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
}

.comparateur-etiquette--apres {
  left: 1rem;
}

.comparateur-etiquette--avant {
  right: 1rem;
}

.comparateur-poignee {
  position: absolute;
  top: 50%;
  left: calc(var(--c) + var(--dx, 0%) + var(--bande) / 2);
  z-index: 3;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border: 2px solid var(--blanc-casse);
  border-radius: var(--rayon);
  background: var(--sapin);
  box-shadow: 0 12px 30px -8px rgb(0 0 0 / 0.55);
  cursor: ew-resize;
  touch-action: none;
  transition: background-color 0.25s, transform 0.3s var(--ease-sortie);
}

/* Deux chevrons opposés dessinés en bordures. */
.comparateur-poignee::before,
.comparateur-poignee::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-left: 2px solid var(--blanc-casse);
  border-bottom: 2px solid var(--blanc-casse);
}

.comparateur-poignee::before {
  left: 13px;
  transform: rotate(45deg);
}

.comparateur-poignee::after {
  right: 13px;
  transform: rotate(-135deg);
}

.comparateur-cadre:hover .comparateur-poignee,
.comparateur-cadre.est-tire .comparateur-poignee,
.comparateur-poignee:focus-visible {
  background: var(--groseille);
}

.comparateur-cadre.est-tire .comparateur-poignee {
  transform: scale(1.08);
}

.comparateur-poignee:focus-visible {
  outline: 3px solid var(--groseille-claire);
  outline-offset: 3px;
}

.comparateur-aide {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  padding: 0.3rem 0.55rem;
  border-radius: 2px;
  background: rgb(14 27 20 / 0.85);
  color: var(--blanc-casse);
  font: 600 0.74rem/1.2 var(--font-texte);
  white-space: nowrap;
  transform: translateX(-50%);
  transition: opacity 0.4s;
  pointer-events: none;
}

.comparateur.a-servi .comparateur-aide {
  opacity: 0;
}

/* ------------------------------------------------------------------ */
/* Hero de l'accueil : le comparateur pleine largeur                    */
/* ------------------------------------------------------------------ */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--sapin);
  color: var(--blanc-casse);
}

.comparateur--hero .comparateur-cadre {
  aspect-ratio: auto;
  height: clamp(560px, calc(100svh - var(--entete-h) - var(--brnsg-barre, 0px)), 900px);
  border-radius: 0;
}

.comparateur--hero .comparateur-etiquette {
  top: 1.25rem;
}

.comparateur--hero .comparateur-etiquette--apres {
  left: var(--gouttiere);
}

.comparateur--hero .comparateur-etiquette--avant {
  right: var(--gouttiere);
}

/* Voile sous le texte, du bas à gauche ; il laisse le jardin respirer ailleurs. */
.comparateur--hero .comparateur-cadre::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 90% at 0% 100%, rgb(14 27 20 / 0.86) 0%, rgb(14 27 20 / 0.62) 32%, rgb(14 27 20 / 0) 62%),
    linear-gradient(0deg, rgb(14 27 20 / 0.5) 0%, rgb(14 27 20 / 0) 30%);
  pointer-events: none;
}

.hero-contenu {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 4;
  pointer-events: none;
}

.hero-contenu a,
.hero-contenu button {
  pointer-events: auto;
}

.hero-colonne {
  padding-bottom: clamp(2rem, 6vh, 4rem);
}

.hero-colonne > * {
  max-width: min(36rem, 46vw);
}

.hero-accroche {
  display: inline-flex;
  margin: 0 0 1.1rem;
  padding: 0.38rem 0.65rem;
  border-left: 3px solid var(--groseille-claire);
  background: rgb(14 27 20 / 0.55);
  color: var(--blanc-casse);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.hero-titre {
  margin: 0 0 1.1rem;
  font-family: var(--font-titre);
  font-size: clamp(2.5rem, 1.3rem + 4.3vw, 5.1rem);
  font-weight: 630;
  line-height: 0.98;
  letter-spacing: -0.022em;
  text-wrap: balance;
  text-shadow: 0 2px 28px rgb(14 27 20 / 0.45);
}

.hero-texte {
  margin: 0 0 1.6rem;
  color: rgb(247 248 244 / 0.92);
  font-size: var(--step-1);
  line-height: 1.5;
}

.hero-legende {
  margin: 1.4rem 0 0;
  color: rgb(247 248 244 / 0.82);
  font-size: 0.88rem;
  line-height: 1.5;
}

.hero-legende .lien-fleche {
  margin-left: 0.25rem;
  font-size: 0.88rem;
}

@media (max-width: 1100px) {
  .hero-colonne > * {
    max-width: min(34rem, 52vw);
  }
}

@media (max-width: 760px) {
  :root {
    --bande: 7px;
  }

  .comparateur--hero .comparateur-cadre {
    height: min(125vw, 66svh);
    min-height: 380px;
  }

  .comparateur--hero .comparateur-cadre::after {
    background: linear-gradient(0deg, rgb(14 27 20 / 0.35) 0%, rgb(14 27 20 / 0) 25%);
  }

  .hero-contenu {
    position: static;
    pointer-events: auto;
  }

  .hero-colonne {
    padding-block: 1.6rem 2.4rem;
  }

  .hero-colonne > * {
    max-width: none;
  }

  .hero-titre {
    text-shadow: none;
  }

  .hero-accroche {
    background: rgb(247 248 244 / 0.08);
  }

  .comparateur-poignee {
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
  }

  .comparateur-etiquette {
    top: 0.7rem;
  }

  .comparateur-etiquette--apres {
    left: 0.7rem;
  }

  .comparateur-etiquette--avant {
    right: 0.7rem;
  }
}

/* ------------------------------------------------------------------ */
/* Sections                                                             */
/* ------------------------------------------------------------------ */

.section {
  padding-block: clamp(4rem, 9vw, 7.25rem);
}

.section--serre {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.section--lichen {
  background: var(--lichen);
}

.section--sapin {
  background: var(--sapin);
  color: var(--blanc-casse);
}

.section--sapin a:not(.bouton):not(.lien-fleche):not(.lien-appel) {
  color: var(--groseille-claire);
}

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.duo--haut {
  align-items: start;
}

.duo-image {
  overflow: hidden;
  border-radius: var(--rayon);
}

.duo-image picture,
.duo-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.duo-image--haute {
  aspect-ratio: 4 / 5;
}

.duo-texte > p {
  max-width: 58ch;
  color: var(--basalte);
}

@media (max-width: 960px) {
  .duo {
    grid-template-columns: minmax(0, 1fr);
  }

  .duo-image--haute {
    aspect-ratio: 4 / 3;
  }
}

/* ------------------------------------------------------------------ */
/* Bande de saison (accueil)                                            */
/* ------------------------------------------------------------------ */

.bande-saison {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.bande-image {
  position: sticky;
  top: calc(var(--brnsg-barre, 0px) + var(--entete-h) + 1.5rem);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--rayon);
}

.bande-image picture,
.bande-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bande-titre {
  margin-bottom: 0.6rem;
}

.bande-meta,
.saison-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.4rem;
  margin: 0 0 1.2rem;
  color: var(--basalte);
  font-size: 0.92rem;
  font-weight: 600;
}

.bande-meta time {
  color: var(--sapin);
}

.meta-pluie {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

@media (max-width: 560px) {
  .bande-meta,
  .saison-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .meta-separateur,
  .saison-maintenant > [aria-hidden="true"] {
    display: none;
  }
}

.bande-intro {
  max-width: 58ch;
  font-size: var(--step-1);
  line-height: 1.55;
}

.offres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2.25rem;
  margin: 1.75rem 0 1.25rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--filet-fort);
}

.offre {
  padding: 1.1rem 0 1.15rem;
  border-bottom: 1px solid var(--filet);
}

.offre-titre {
  font-family: var(--font-titre);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.15;
}

.offre-prix {
  margin: 0.35rem 0 0.4rem;
  color: var(--basalte);
  font-size: 0.9rem;
}

.offre-prix strong {
  color: var(--groseille-fonce);
  font-family: var(--font-titre);
  font-size: 1.15rem;
  font-weight: 600;
}

.offre-texte {
  margin: 0;
  color: var(--basalte);
  font-size: 0.95rem;
}

.bande-limite {
  display: flex;
  gap: 0.6rem;
  margin: 0 0 1.6rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--groseille);
  background: var(--papier);
  font-weight: 600;
}

@media (max-width: 960px) {
  .bande-saison {
    grid-template-columns: minmax(0, 1fr);
  }

  .bande-image {
    position: static;
    aspect-ratio: 3 / 2;
  }
}

@media (max-width: 560px) {
  .offres {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ */
/* Calendrier des travaux et pluie de Portland                          */
/* ------------------------------------------------------------------ */

.calendrier {
  --cal-label: 15rem;
}

.cal-tete {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 0.5rem clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.cal-tete .titre-section {
  grid-column: 1;
}

.cal-tete .section-chapo {
  grid-column: 1;
}

.cal-resume {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  margin: 0;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--pluie);
  background: rgb(244 246 241 / 0.7);
  font-size: 0.98rem;
}

.cal-corps {
  position: relative;
  padding-top: 2.1rem;
}

.cal-ligne {
  display: grid;
  grid-template-columns: var(--cal-label) minmax(0, 1fr);
  align-items: end;
}

.cal-libelle {
  margin: 0;
  padding-right: 1.5rem;
}

.cal-bandes {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 3px;
}

.cal-bande {
  padding-top: 0.45rem;
  border-top: 3px solid var(--filet-fort);
  color: var(--basalte);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cal-bande.est-courante {
  border-top-color: var(--groseille);
  color: var(--groseille-fonce);
}

.cal-sous-titre {
  color: var(--basalte);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cal-ligne--pluie {
  margin-top: 0.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--filet-fort);
}

.cal-ligne--pluie .cal-libelle {
  align-self: end;
  padding-bottom: 1.6rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem;
}

.cal-pluie {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 3px;
  height: 172px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cal-pluie-mois {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.cal-pluie-valeur,
.cal-mois {
  position: relative;
  z-index: 3;
  text-shadow: 0 0 2px var(--lichen), 0 0 4px var(--lichen), 0 0 6px var(--lichen);
}

.cal-pluie-valeur {
  margin-bottom: 0.3rem;
  color: var(--basalte);
  font-size: 0.74rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cal-pluie-barre {
  width: min(62%, 34px);
  height: calc(var(--v) * 112px);
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--pluie) 0%, #4C6676 100%);
  transform-origin: 50% 100%;
}

.cal-mois {
  margin-top: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.cal-sous-titre--taches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin: 1.5rem 0 0.5rem;
}

.cal-legende {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  color: var(--basalte);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

.cal-legende-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
}

.cal-legende .cal-case {
  display: inline-block;
  width: 22px;
  height: 12px;
}

.cal-taches {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cal-tache {
  display: grid;
  grid-template-columns: var(--cal-label) minmax(0, 1fr);
  align-items: center;
  min-height: 2.9rem;
  border-bottom: 1px solid var(--filet);
}

.cal-tache-nom {
  margin: 0;
  padding: 0.55rem 1.5rem 0.55rem 0;
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.3;
}

/* La période en toutes lettres sert aux lecteurs d'écran au bureau,
   et s'affiche sur mobile où les cases deviennent étroites. */
.cal-tache-periode {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.cal-tache-cases {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 3px;
  height: 16px;
}

.cal-case {
  display: block;
  border-radius: 2px;
}

.cal-case--meilleur {
  background: var(--sapin);
}

.cal-case--possible {
  border: 1.5px solid var(--mousse);
  background: repeating-linear-gradient(135deg, rgb(86 118 58 / 0.35) 0 2px, transparent 2px 5px);
}

.cal-aujourdhui {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--cal-label) + var(--aujourdhui) * (100% - var(--cal-label)));
  z-index: 2;
  width: 0;
  pointer-events: none;
}

.cal-aujourdhui-trait {
  position: absolute;
  top: 1.6rem;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: var(--groseille);
  transform-origin: 50% 0;
}

.cal-aujourdhui-texte {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.18rem 0.45rem;
  border-radius: 2px;
  background: var(--groseille);
  color: var(--blanc-casse);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
}

.calendrier .sources {
  margin-top: 1.5rem;
}

@media (max-width: 960px) {
  .cal-tete {
    grid-template-columns: minmax(0, 1fr);
  }

  .cal-resume {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0.75rem;
  }
}

@media (max-width: 760px) {
  .calendrier {
    --cal-label: 0px;
  }

  .cal-ligne,
  .cal-tache {
    grid-template-columns: minmax(0, 1fr);
  }

  .cal-ligne--bandes {
    display: none;
  }

  .cal-libelle {
    padding-right: 0;
  }

  .cal-ligne--pluie .cal-libelle {
    padding-bottom: 0.9rem;
  }

  .cal-pluie {
    height: 150px;
  }

  .cal-pluie-valeur {
    font-size: 0.66rem;
  }

  .cal-pluie-barre {
    height: calc(var(--v) * 92px);
  }

  .cal-mois {
    font-size: 0.68rem;
  }

  .cal-tache {
    padding-block: 0.6rem 0.75rem;
  }

  .cal-tache-nom {
    padding: 0 0 0.45rem;
  }

  .cal-tache-periode {
    position: static;
    display: block;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    color: var(--basalte);
    font-size: 0.82rem;
    font-weight: 500;
  }

  .cal-tache-cases {
    height: 12px;
    column-gap: 2px;
  }

  .cal-aujourdhui-texte {
    font-size: 0.66rem;
  }

  /* Sur mobile, le trait du jour ne traverse plus le texte : il marque le
     graphique de pluie et chaque rangée de cases. */
  .cal-aujourdhui-trait {
    display: none;
  }

  .cal-pluie,
  .cal-tache-cases {
    position: relative;
  }

  .cal-pluie::after,
  .cal-tache-cases::after {
    content: "";
    position: absolute;
    left: calc(var(--aujourdhui) * 100%);
    width: 2px;
    margin-left: -1px;
    background: var(--groseille);
  }

  .cal-pluie::after {
    top: -0.35rem;
    bottom: 1.45rem;
  }

  .cal-tache-cases::after {
    top: -4px;
    bottom: -4px;
  }
}

/* ------------------------------------------------------------------ */
/* Réalisations en vignettes (accueil)                                  */
/* ------------------------------------------------------------------ */

.vignettes {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(0, auto);
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vignette--grande {
  grid-column: 1 / span 7;
  grid-row: span 2;
}

.vignette--haute {
  grid-column: 8 / span 5;
}

.vignette--basse {
  grid-column: 8 / span 5;
}

.vignette--large {
  grid-column: 1 / -1;
}

.vignette-lien {
  position: relative;
  display: block;
  height: 100%;
  min-height: 260px;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--sapin);
  color: var(--blanc-casse);
  text-decoration: none;
}

.vignette--large .vignette-lien {
  min-height: 0;
  aspect-ratio: 21 / 8;
}

.vignette-image,
.vignette-image picture,
.vignette-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vignette-image img {
  transition: transform 0.9s var(--ease-sortie);
}

.vignette-lien:hover .vignette-image img {
  transform: scale(1.04);
}

.vignette-lien::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgb(14 27 20 / 0.86) 0%, rgb(14 27 20 / 0.35) 38%, rgb(14 27 20 / 0) 60%);
}

.vignette-texte {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.25rem 1.4rem 1.35rem;
}

.vignette-type {
  color: var(--groseille-claire);
  font-weight: 700;
}

.vignette-titre {
  text-wrap: balance;
  font-family: var(--font-titre);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.12;
}

.vignette-lieu {
  color: rgb(247 248 244 / 0.8);
  font-size: 0.9rem;
}

.vignette-lien:hover {
  color: var(--blanc-casse);
}

@media (max-width: 960px) {
  .vignette--grande,
  .vignette--haute,
  .vignette--basse,
  .vignette--large {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .vignette-lien,
  .vignette--large .vignette-lien {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

/* ------------------------------------------------------------------ */
/* Entretien (accueil) et année de visites                              */
/* ------------------------------------------------------------------ */

.entretien-grille {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.entretien-image {
  overflow: hidden;
  border-radius: var(--rayon);
  aspect-ratio: 4 / 3;
}

.entretien-image picture,
.entretien-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.entretien-texte > p {
  max-width: 50ch;
  color: var(--basalte-clair);
  font-size: var(--step-1);
}

.annee-saisons {
  margin: 1.5rem 0 2rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--filet-sombre);
}

.annee-saisons li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--filet-sombre);
  color: var(--basalte-clair);
  font-size: 0.97rem;
}

.annee-saison-nom {
  color: var(--blanc-casse);
  font-family: var(--font-titre);
  font-size: 1.1rem;
  font-weight: 600;
}

.annee-saisons li.est-courante .annee-saison-nom {
  color: var(--groseille-claire);
}

@media (max-width: 960px) {
  .entretien-grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

.annee {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.annee-saison {
  padding-top: 1rem;
  border-top: 3px solid var(--filet-fort);
}

.annee-saison.est-courante {
  border-top-color: var(--groseille);
}

.annee-titre {
  margin-bottom: 0.5rem;
  font-family: var(--font-titre);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.1;
}

.annee-mois {
  display: block;
  margin-top: 0.25rem;
  color: var(--basalte);
  font-family: var(--font-texte);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.annee-saison p {
  margin: 0;
  color: var(--basalte);
}

@media (max-width: 960px) {
  .annee {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 2rem;
  }
}

@media (max-width: 520px) {
  .annee {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ */
/* Avis                                                                 */
/* ------------------------------------------------------------------ */

.avis-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 3rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.avis-entete .titre-section {
  margin-bottom: 0;
}

.avis-note {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}

.avis-note-chiffre {
  font-family: var(--font-titre);
  font-size: 3.6rem;
  font-weight: 600;
  line-height: 0.9;
}

.avis-note .icone-etoile {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--groseille);
}

.avis-note-texte {
  max-width: 9rem;
  color: var(--basalte);
  font-size: 0.9rem;
  line-height: 1.3;
}

/* Le premier avis est mis en avant, les deux suivants s'empilent à côté. */
.avis-liste {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.avis-liste > :first-child {
  grid-row: span 2;
}

.avis-carte {
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 3px solid var(--sapin);
  border-radius: 0 0 var(--rayon) var(--rayon);
  background: var(--papier);
}

.avis-score {
  margin: 0 0 0.75rem;
  color: var(--groseille-fonce);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.avis-texte {
  flex: 1;
  margin: 0 0 1.1rem;
}

.avis-texte p {
  margin: 0;
  font-size: 1.04rem;
}

.avis-liste > :first-child .avis-texte p {
  font-family: var(--font-titre);
  font-size: var(--step-2);
  line-height: 1.38;
}

.avis-auteur {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  margin: 0;
  color: var(--basalte);
  font-size: 0.86rem;
}

.avis-nom {
  color: var(--sapin);
  font-weight: 700;
}

.avis-lieu::after {
  content: "·";
  margin-left: 0.6rem;
}

.avis-liste--complete {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.avis-liste--complete > :first-child {
  grid-row: auto;
  grid-column: 1 / -1;
}

.avis-liste--complete > :nth-child(2),
.avis-liste--complete > :nth-child(3) {
  grid-column: span 3;
}

.avis-liste--complete > :nth-child(n + 4) {
  grid-column: span 2;
}

@media (max-width: 960px) {
  .avis-liste,
  .avis-liste--complete {
    grid-template-columns: minmax(0, 1fr);
  }

  .avis-liste > :first-child,
  .avis-liste--complete > * {
    grid-row: auto;
    grid-column: auto !important;
  }
}

/* ------------------------------------------------------------------ */
/* Portraits                                                            */
/* ------------------------------------------------------------------ */

.portraits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Décalage vertical : une rangée de portraits plutôt qu'une grille de cartes. */
.portrait:nth-child(2) {
  margin-top: clamp(1.5rem, 5vw, 4.5rem);
}

.portrait:nth-child(3) {
  margin-top: clamp(0.75rem, 2.5vw, 2.25rem);
}

.portrait-image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: 1.1rem;
  border-radius: var(--rayon);
}

.portrait-image picture,
.portrait-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portrait-nom {
  font-family: var(--font-titre);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.1;
}

.portrait-role {
  margin: 0.3rem 0 0.6rem;
  color: var(--groseille-fonce);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.portrait-texte {
  color: var(--basalte);
}

@media (max-width: 760px) {
  .portraits {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .portrait:nth-child(2),
  .portrait:nth-child(3) {
    margin-top: 0;
  }

  .portrait-image {
    aspect-ratio: 1 / 1;
  }
}

/* ------------------------------------------------------------------ */
/* Licence, notes réglementaires                                        */
/* ------------------------------------------------------------------ */

.licence .liste-coches li {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--filet);
}

.licence .liste-coches li:last-child {
  border-bottom: 0;
}

.note-regle {
  margin-top: 2rem;
  padding: 1.25rem 1.35rem;
  border-left: 3px solid var(--pluie);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  background: var(--papier);
}

.note-regle-titre {
  margin-bottom: 0.6rem;
  font-family: var(--font-titre);
  font-size: 1.2rem;
  font-weight: 600;
}

.note-regle p {
  color: var(--basalte);
  font-size: 0.96rem;
}

.note-regle .sources {
  margin-top: 0.75rem;
}

/* ------------------------------------------------------------------ */
/* FAQ                                                                  */
/* ------------------------------------------------------------------ */

.faq-grille {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.faq-intro p {
  color: var(--basalte);
}

.faq {
  border-top: 1px solid var(--filet-fort);
}

.faq-item {
  border-bottom: 1px solid var(--filet-fort);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.2rem 0;
  font-family: var(--font-titre);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question:hover {
  color: var(--groseille-fonce);
}

.faq-signe {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}

.faq-signe::before,
.faq-signe::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 16px;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease-sortie);
}

.faq-signe::after {
  transform: rotate(90deg);
}

.faq-item[open] .faq-signe::after {
  transform: rotate(0deg);
}

.faq-reponse {
  padding: 0 2.5rem 1.35rem 0;
  color: var(--basalte);
}

.faq-reponse p {
  margin: 0;
}

@media (max-width: 960px) {
  .faq-grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ */
/* Formulaires                                                          */
/* ------------------------------------------------------------------ */

.formulaire-grille {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "intro carte" "contact carte";
  grid-template-rows: auto 1fr;
  column-gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.formulaire-intro {
  grid-area: intro;
}

.formulaire-carte {
  grid-area: carte;
}

.formulaire-contact {
  grid-area: contact;
}

.formulaire-intro .sous-titre {
  margin-top: 1.75rem;
}

.formulaire-intro > p {
  max-width: 44ch;
  font-size: var(--step-1);
}

.section--sapin .formulaire-intro > p {
  color: var(--basalte-clair);
}

.formulaire-carte {
  padding: clamp(1.25rem, 3vw, 2.4rem);
  border-radius: var(--rayon);
  background: var(--papier);
  color: var(--sapin);
  box-shadow: var(--ombre);
}

.formulaire-carte--bordee {
  border: 1px solid var(--filet);
  box-shadow: none;
}

/* Le lien de la carte claire garde la couleur d'action foncée, même dans une section sombre. */
.formulaire-carte a,
.section--sapin .formulaire-carte a:not(.bouton):not(.lien-fleche):not(.lien-appel) {
  color: var(--groseille);
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  margin: 0 0 1.1rem;
  padding: 0;
  border: 0;
}

.champ-rangee {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
}

.champ label,
.champ legend {
  padding: 0;
  font-size: 0.92rem;
  font-weight: 600;
}

.champ-optionnel {
  color: var(--basalte);
  font-weight: 400;
}

.champ-aide {
  margin: 0 0 1rem;
  color: var(--basalte);
  font-size: 0.88rem;
}

.champ-aide--zone {
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--pluie);
  background: rgb(95 123 140 / 0.08);
  color: var(--sapin);
}

.champ input[type="text"],
.champ input[type="tel"],
.champ input[type="email"],
.champ select,
.champ textarea {
  width: 100%;
  min-height: 50px;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--bord-champ);
  border-radius: var(--rayon);
  background: #FCFDFB;
  color: var(--sapin);
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.champ textarea {
  min-height: 110px;
  resize: vertical;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--sapin);
  box-shadow: 0 0 0 3px rgb(179 44 99 / 0.25);
}

.champ [aria-invalid="true"] {
  border-color: var(--groseille);
}

.select-enveloppe {
  position: relative;
}

.select-enveloppe::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--basalte);
  border-bottom: 2px solid var(--basalte);
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
}

.champ select {
  padding-right: 2.5rem;
  -webkit-appearance: none;
  appearance: none;
}

.champ-radios {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
}

.champ-radios legend {
  width: 100%;
  margin-bottom: 0.5rem;
}

.radio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 32px;
  font-weight: 500;
  cursor: pointer;
}

.radio input,
.consentement input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--groseille);
  flex: none;
}

.champ-erreur {
  margin: 0;
  color: var(--groseille-fonce);
  font-size: 0.88rem;
  font-weight: 600;
}

.formulaire-erreur:empty {
  display: none;
}

.formulaire-erreur {
  margin-top: 0.9rem;
}

.champ-piege {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.consentement {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0.4rem 0 1.1rem;
  color: var(--basalte);
  font-size: 0.88rem;
  cursor: pointer;
}

.consentement input {
  margin-top: 0.15rem;
}

.formulaire-note {
  margin: 0.9rem 0 0;
  color: var(--basalte);
  font-size: 0.85rem;
  text-align: center;
}

.plan-joint {
  margin: 0 0 1.1rem;
  padding: 0.9rem 1rem;
  border: 1.5px dashed var(--mousse);
  border-radius: var(--rayon);
  background: rgb(86 118 58 / 0.07);
}

.plan-joint-titre {
  margin: 0 0 0.2rem;
  color: var(--mousse);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.plan-joint-texte {
  margin: 0;
  font-weight: 600;
}

.formulaire-succes {
  padding: 1rem 0;
}

.formulaire-succes:focus {
  outline: none;
}

.formulaire-succes-titre {
  font-family: var(--font-titre);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.15;
}

.contact-carte {
  margin-top: 2rem;
  padding: 1.5rem;
  border: 1px solid var(--filet-sombre);
  border-radius: var(--rayon);
  background: var(--sapin-2);
  color: var(--basalte-clair);
}

.contact-carte p,
.contact-carte address {
  margin: 0 0 0.6rem;
}

.contact-carte > :last-child {
  margin-bottom: 0;
}

.contact-tel a {
  color: var(--blanc-casse) !important;
  font-family: var(--font-titre);
  font-size: 2rem;
  font-weight: 600;
  text-decoration: none;
}

.contact-statut {
  color: var(--blanc-casse);
}

.contact-horaires {
  margin: 0.5rem 0 0.9rem;
  padding: 0;
  list-style: none;
}

.contact-horaires li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px dotted var(--filet-sombre);
}

.contact-horaires li span:last-child {
  color: var(--blanc-casse);
}

.contact-adresse {
  padding-top: 0.75rem;
  color: var(--blanc-casse);
}

.contact-carte a {
  color: var(--groseille-claire);
}

/* Contact sur fond clair (page à propos) */
.section--lichen .contact-carte,
.section:not(.section--sapin) .contact-carte {
  background: var(--sapin);
}

.suite {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: suite;
}

.suite li {
  position: relative;
  padding-left: 3rem;
  counter-increment: suite;
}

.suite li::before {
  content: counter(suite);
  position: absolute;
  top: -0.05rem;
  left: 0;
  color: var(--groseille);
  font-family: var(--font-titre);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1;
}

.suite p {
  margin: 0;
  color: var(--basalte);
}

.suite .suite-titre {
  color: var(--sapin);
  font-weight: 700;
}

@media (max-width: 960px) {
  .formulaire-grille {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "carte" "contact";
    grid-template-rows: auto;
    row-gap: 1.5rem;
  }
}

@media (max-width: 560px) {
  .champ-rangee {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ */
/* Pages intérieures                                                    */
/* ------------------------------------------------------------------ */

.page-tete {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  background: var(--sapin);
  color: var(--blanc-casse);
}

.page-tete--simple {
  padding-block: clamp(3rem, 7vw, 5rem) clamp(2.5rem, 5vw, 3.75rem);
}

.page-tete-grille {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.page-titre {
  max-width: 16ch;
  margin: 0 0 1.2rem;
  font-family: var(--font-titre);
  font-size: clamp(2.5rem, 1.55rem + 4.2vw, 5rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.page-chapo {
  max-width: 56ch;
  margin: 0 0 2rem;
  color: rgb(247 248 244 / 0.86);
  font-size: var(--step-1);
}

.page-tete--simple .page-titre {
  max-width: 22ch;
}

.page-tete--simple .page-chapo {
  margin-bottom: 0;
}

.page-tete-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--rayon);
}

.page-tete-image picture,
.page-tete-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-tete--404 .actions {
  margin-top: 2rem;
}

.code-erreur {
  color: var(--groseille-claire);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@media (max-width: 960px) {
  .page-tete-grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Saisons : navigation, sections */

.saisons-nav {
  margin-top: 2.25rem;
}

.saisons-nav ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--filet-sombre);
}

.saisons-nav a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 0.9rem 0.9rem 0;
  border-bottom: 3px solid transparent;
  color: var(--blanc-casse);
  font-family: var(--font-titre);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
}

.saisons-nav a:hover {
  color: var(--groseille-claire);
}

.saisons-nav a[aria-current="true"] {
  border-bottom-color: var(--groseille-claire);
}

.saisons-nav-mois {
  color: var(--basalte-clair);
  font-family: var(--font-texte);
  font-size: 0.8rem;
  font-weight: 600;
}

@media (max-width: 640px) {
  .saisons-nav ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.saison-section {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  border-bottom: 1px solid var(--filet);
}

.saison-section:nth-child(even) {
  background: var(--lichen);
}

.saison-grille {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.saison-media {
  position: sticky;
  top: calc(var(--brnsg-barre, 0px) + var(--entete-h) + 1.5rem);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--rayon);
}

.saison-media picture,
.saison-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.saison-maintenant {
  color: var(--groseille-fonce);
}

.saison-intro {
  max-width: 60ch;
  font-size: var(--step-1);
}

.prix-liste {
  margin: 1.5rem 0 1.25rem;
  border-top: 1px solid var(--filet-fort);
}

.prix-liste > div {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 0.2rem 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--filet);
}

.prix-liste dt {
  font-family: var(--font-titre);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
}

.prix-liste dd {
  margin: 0;
}

.prix-liste-prix {
  color: var(--basalte);
  font-size: 0.92rem;
}

.prix-liste-prix strong {
  color: var(--groseille-fonce);
  font-family: var(--font-titre);
  font-size: 1.15rem;
}

.prix-liste-texte {
  grid-column: 2;
  color: var(--basalte);
  font-size: 0.95rem;
}

.saison-limite {
  margin: 0 0 1.5rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--groseille);
  background: var(--papier);
  font-weight: 600;
}

@media (max-width: 960px) {
  .saison-grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .saison-media {
    position: static;
    aspect-ratio: 3 / 2;
  }
}

@media (max-width: 560px) {
  .prix-liste > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .prix-liste-texte {
    grid-column: 1;
  }
}

/* Réalisations */

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
}

.filtre {
  min-height: 44px;
  padding: 0 1rem;
  border: 1.5px solid rgb(247 248 244 / 0.4);
  border-radius: var(--rayon);
  background: transparent;
  color: var(--blanc-casse);
  font: 600 0.92rem var(--font-texte);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.filtre:hover {
  border-color: var(--blanc-casse);
}

.filtre[aria-pressed="true"] {
  border-color: var(--blanc-casse);
  background: var(--blanc-casse);
  color: var(--sapin);
}

.projet {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--filet);
}

.projet:nth-child(even) {
  background: var(--lichen);
}

.projet-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  margin-bottom: 1.5rem;
}

.projet-tete .titre-section {
  max-width: 24ch;
  margin-bottom: 0;
  font-size: var(--step-3);
}

.projet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.4rem;
  margin: 0;
  color: var(--basalte);
  font-weight: 600;
}

.projet-details {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 1.5rem clamp(2rem, 5vw, 4rem);
  margin-top: 2rem;
}

.projet-resume {
  font-family: var(--font-titre);
  font-size: var(--step-2);
  line-height: 1.38;
}

.projet-details > p:last-child {
  grid-column: 2;
  margin: 0;
}

.projet-colonnes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}

.projet-sous-titre {
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--filet-fort);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.projet-chiffres {
  margin: 0;
}

.projet-chiffres > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px dotted var(--filet-fort);
  font-size: 0.93rem;
}

.projet-chiffres dt {
  color: var(--basalte);
}

.projet-chiffres dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

.projet .liste-coches {
  gap: 0.5rem;
  margin: 0;
  font-size: 0.93rem;
}

.plantes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plantes li {
  padding: 0.35rem 0;
  border-bottom: 1px dotted var(--filet-fort);
  font-size: 0.93rem;
  line-height: 1.35;
}

.plante-nom {
  font-weight: 600;
}

.plantes i {
  display: block;
  color: var(--basalte);
}

.plantes-texte {
  color: var(--basalte);
  font-size: 0.95rem;
}

@media (max-width: 1100px) {
  .projet-colonnes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .projet-details {
    grid-template-columns: minmax(0, 1fr);
  }

  .projet-details > p:last-child {
    grid-column: 1;
  }
}

@media (max-width: 560px) {
  .projet-colonnes {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Entretien : calculateur */

.calculateur-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

.calculateur-intro {
  max-width: 48rem;
}

.calculateur {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.question {
  min-width: 0;
  margin: 0 0 1.75rem;
  padding: 0;
  border: 0;
}

.question-legende {
  margin-bottom: 0.8rem;
  padding: 0;
  font-family: var(--font-titre);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.1;
}

.tuiles {
  display: grid;
  gap: 0.6rem;
}

.tuile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
  padding: 0.85rem 1rem 0.85rem 2.9rem;
  border: 1.5px solid var(--bord-champ);
  border-radius: var(--rayon);
  background: var(--papier);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.tuile:hover {
  border-color: var(--sapin);
}

.tuile input {
  position: absolute;
  top: 50%;
  left: 1rem;
  width: 20px;
  height: 20px;
  margin: -10px 0 0;
  accent-color: var(--sapin);
}

.tuile:has(input:checked) {
  border-color: var(--sapin);
  background: #FCFDFB;
  box-shadow: inset 3px 0 0 var(--groseille);
}

.tuile:has(input:focus-visible) {
  outline: 3px solid var(--groseille);
  outline-offset: 2px;
}

.tuile-corps {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.15rem;
}

.tuile-libelle {
  font-weight: 700;
  line-height: 1.3;
}

.tuile-aide {
  color: var(--basalte);
  font-size: 0.86rem;
  line-height: 1.4;
}

.tuile-prix {
  flex: none;
  color: var(--sapin);
  font-family: var(--font-titre);
  font-size: 1.05rem;
  font-weight: 600;
  white-space: nowrap;
}

.resultat {
  position: sticky;
  top: calc(var(--brnsg-barre, 0px) + var(--entete-h) + 1.25rem);
  padding: clamp(1.4rem, 3vw, 2.1rem);
  border-radius: var(--rayon);
  background: var(--sapin);
  color: var(--blanc-casse);
}

.resultat-libelle {
  margin: 0 0 0.4rem;
  color: var(--basalte-clair);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.resultat-prix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  margin: 0;
  font-family: var(--font-titre);
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4rem);
  font-weight: 600;
  line-height: 1;
}

.resultat-unite {
  color: var(--basalte-clair);
  font-family: var(--font-texte);
  font-size: 1rem;
  font-weight: 500;
}

.resultat-an {
  margin: 0.7rem 0 1.4rem;
  color: var(--basalte-clair);
}

.resultat-an span {
  color: var(--blanc-casse);
  font-weight: 700;
}

/* Une année de visites : un point par passage, mois par mois. */
.visites {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3px;
  align-items: end;
  height: 86px;
  margin: 0 0 1.5rem;
  padding: 0 0 0.25rem;
  list-style: none;
  border-bottom: 1px solid var(--filet-sombre);
}

.visites-mois {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  height: 100%;
}

.visites-points {
  width: 10px;
  height: calc(var(--n) * 13px);
  background: radial-gradient(circle at 5px 5px, var(--mousse-claire) 4px, transparent 4.5px) 0 0 / 10px 13px repeat-y;
  transition: height 0.35s var(--ease-sortie);
}

.visites-nom {
  color: var(--basalte-clair);
  font-size: 0.68rem;
  font-weight: 700;
}

.resultat .bouton {
  margin-bottom: 0.9rem;
}

.resultat-note {
  margin: 0;
  color: var(--basalte-clair);
  font-size: 0.85rem;
}

@media (max-width: 960px) {
  .calculateur {
    grid-template-columns: minmax(0, 1fr);
  }

  .resultat {
    position: static;
  }
}

/* Tableaux : défilement horizontal interne, jamais celui de la page. */
.tableau-enveloppe {
  overflow-x: auto;
  margin-bottom: 1.5rem;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--papier);
  -webkit-overflow-scrolling: touch;
}

.tableau {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.tableau th,
.tableau td {
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid var(--filet);
  text-align: left;
  vertical-align: top;
}

.tableau tbody tr:last-child th,
.tableau tbody tr:last-child td {
  border-bottom: 0;
}

.tableau thead th {
  background: var(--sapin);
  color: var(--blanc-casse);
  font-family: var(--font-titre);
  font-size: 1.05rem;
  font-weight: 600;
}

.tableau tbody th {
  font-weight: 600;
}

.tableau--tarifs td,
.tableau--options td,
.tableau--prix td:nth-child(2) {
  font-family: var(--font-titre);
  font-size: 1.08rem;
  font-weight: 600;
  white-space: nowrap;
}

.tableau--prix td:nth-child(3) {
  color: var(--basalte);
}

.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.exclus {
  margin: 0;
}

.exclus > div {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--filet);
}

.exclus dt {
  font-weight: 700;
}

.exclus dd {
  margin: 0.15rem 0 0;
  color: var(--basalte);
  font-size: 0.95rem;
}

.conditions {
  margin: 0;
  padding-left: 1.1rem;
}

.conditions li {
  margin-bottom: 0.55rem;
  color: var(--basalte);
}

@media (max-width: 960px) {
  .trio {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* À propos */

.chiffres-bloc {
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--rayon);
  background: var(--sapin);
  color: var(--blanc-casse);
}

.chiffres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1.25rem;
  margin: 0;
}

.chiffres dt {
  font-family: var(--font-titre);
  font-size: clamp(2.3rem, 1.7rem + 2.2vw, 3.4rem);
  font-weight: 600;
  line-height: 1;
}

.chiffres dd {
  margin: 0.45rem 0 0;
  color: var(--basalte-clair);
  font-size: 0.93rem;
}

.pratiques {
  margin: 0;
}

.pratiques > div {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--filet);
}

.pratiques dt {
  font-family: var(--font-titre);
  font-size: 1.15rem;
  font-weight: 600;
}

.pratiques dd {
  margin: 0.2rem 0 0;
  color: var(--basalte);
}

.zone-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--filet-fort);
}

.zone-liste li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--filet);
}

.zone-liste li span:first-child {
  font-weight: 600;
}

.zone-liste li span:last-child {
  color: var(--basalte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.section--appel {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.appel-grille {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.appel-grille p {
  max-width: 48ch;
  margin: 0;
  color: var(--basalte-clair);
  font-size: var(--step-1);
}

.texte-legal {
  max-width: 74ch;
}

.texte-legal h2 {
  margin: 2.25rem 0 0.75rem;
  font-family: var(--font-titre);
  font-size: var(--step-2);
  font-weight: 600;
}

.texte-legal h2:first-child {
  margin-top: 0;
}

.texte-legal p {
  color: var(--basalte);
}

/* ------------------------------------------------------------------ */
/* Pied de page                                                         */
/* ------------------------------------------------------------------ */

.pied {
  padding-top: clamp(3.5rem, 7vw, 5rem);
  padding-bottom: 2rem;
  background: var(--sapin-fonce);
  color: var(--basalte-clair);
  font-size: 0.93rem;
}

.pied a {
  color: var(--blanc-casse);
}

.pied a:hover {
  color: var(--groseille-claire);
}

.pied-grille {
  display: grid;
  grid-template-columns: 1.2fr 1.1fr 0.8fr 1.3fr;
  gap: 2.5rem;
}

.pied-bloc p {
  margin: 0 0 0.6rem;
}

.logo--pied {
  margin-bottom: 1.4rem;
  color: var(--blanc-casse);
}

.logo--pied:hover {
  color: var(--blanc-casse);
}

.logo--pied .logo-metier {
  color: var(--basalte-clair);
}

.pied-adresse {
  margin-bottom: 0.6rem;
  color: var(--blanc-casse);
}

.pied-tel a {
  font-family: var(--font-titre);
  font-size: 1.45rem;
  font-weight: 600;
  text-decoration: none;
}

.pied-titre {
  margin: 0 0 1rem !important;
  color: var(--blanc-casse);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pied-horaires,
.pied-liens {
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
}

.pied-horaires li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px dotted var(--filet-sombre);
}

.pied-horaires li span:last-child {
  color: var(--blanc-casse);
}

.pied-liens li {
  padding: 0.25rem 0;
}

.pied-liens a {
  text-decoration: none;
}

.pied-liens a:hover {
  text-decoration: underline;
}

.pied-statut {
  color: var(--blanc-casse);
}

.pied-feries {
  font-size: 0.85rem;
}

.pied-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filet-sombre);
  font-size: 0.85rem;
}

.pied-legal p {
  margin: 0;
}

@media (max-width: 960px) {
  .pied-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .pied-grille {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
}

/* ------------------------------------------------------------------ */
/* Barre d'actions mobile                                               */
/* ------------------------------------------------------------------ */

.barre-actions {
  display: none;
}

@media (max-width: 760px) {
  .barre-actions {
    position: fixed;
    right: 0;
    bottom: var(--brnsg-onglet, 0px);
    left: 0;
    z-index: 950;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    padding: 0.6rem var(--gouttiere) calc(0.6rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--filet-sombre);
    background: var(--sapin-fonce);
  }

  .barre-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    border-radius: var(--rayon);
    font-weight: 600;
    text-decoration: none;
  }

  .barre-actions-tel {
    border: 1.5px solid rgb(247 248 244 / 0.55);
    color: var(--blanc-casse);
  }

  .barre-actions-tel .icone {
    width: 18px;
    height: 18px;
  }

  .barre-actions-devis {
    background: var(--groseille);
    color: var(--blanc-casse);
  }

  .barre-actions-tel:hover,
  .barre-actions-devis:hover {
    color: var(--blanc-casse);
  }

  /* La réserve de la barre d'actions vit dans le pied (sombre), pas sous lui. */
  .pied {
    padding-bottom: calc(2rem + 70px + env(safe-area-inset-bottom));
  }

  body.menu-ouvert .barre-actions {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* Mouvement : états de départ (seulement si js-motion est posé)        */
/* ------------------------------------------------------------------ */

.js-motion [data-titre-brume] {
  visibility: hidden;
}

/* Tant que motion.js n'a pas pris la main, les réalisations montrent « avant »
   et le hero montre « après » (son image principale) : le balayage d'entrée
   part de là sans saut. Sans GSAP, la classe js-motion
   tombe au bout de 2,5 s et la position écrite dans le HTML reprend. */
.js-motion .comparateur:not(.est-anime) {
  --c: -4.6% !important;
}

.js-motion .comparateur--hero:not(.est-anime) {
  --c: 104.6% !important;
}

.js-motion :is(.comparateur--hero .comparateur-etiquette, .comparateur--hero .comparateur-poignee) {
  opacity: 0;
}

/* Entrée du hero en CSS, dès le premier rendu : la brume se lève sur le titre,
   le reste monte doucement, les photos reculent. Sans js-motion (mouvement réduit),
   rien de tout cela ne s'applique. */
@keyframes brume-entree {
  from {
    opacity: 0;
    filter: blur(14px);
    transform: translateY(0.3em);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

@keyframes monte {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes recul {
  from {
    transform: scale(1.07);
  }

  to {
    transform: scale(1);
  }
}

.js-motion .hero-titre,
.js-motion .page-tete [data-titre-brume] {
  visibility: visible;
  animation: brume-entree 1.4s var(--ease-sortie) 0.15s both;
}

.js-motion .hero-accroche {
  animation: monte 0.7s var(--ease-sortie) 0.05s both;
}

.js-motion .hero-texte {
  animation: monte 0.85s var(--ease-sortie) 0.6s both;
}

.js-motion .hero-actions {
  animation: monte 0.85s var(--ease-sortie) 0.7s both;
}

.js-motion .hero-legende {
  animation: monte 0.85s var(--ease-sortie) 0.8s both;
}

.js-motion .comparateur--hero .comparateur-couche picture {
  animation: recul 2.6s var(--ease-sortie) backwards;
}

.js-motion .cal-pluie-barre {
  transform: scaleY(0);
}

.js-motion .cal-tache-cases .cal-case {
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.js-motion .cal-aujourdhui-trait {
  transform: scaleY(0);
}

.js-motion .cal-aujourdhui-texte {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}