/* Sapins de Noël : feuille de style du site.
   Les tokens de :root sont aussi utilisés par affiche.html et print.css. */

@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette (voir DESIGN.md) */
  --sapin: #173A2E;
  --papier: #F4E9D2;
  --metre: #F3C623;
  --metre-fonce: #E2B512;
  --orange: #E8772E;
  --revers: #D6E4DA;
  --aiguille: #3B6657;

  /* Courbes de niveau : une seule géométrie, deux couleurs qui se fondent dans le fond
     (darken sur le crème, lighten sur le vert) */
  --courbe-papier: #E3D3B3;
  --courbe-sapin: #2F5E4F;

  --police: "Archivo", system-ui, sans-serif;
  --large: 125%; /* largeur des titres, prix et numéro */

  /* Échelle de la toise : 1 cm de sapin. Redéfinie par .mesure et par print.css. */
  --cm: 0.25rem;
  --trait: 2px;
  --rayon: 0.5rem;
  --rayon-photo: 1rem;
  --marge: 1rem;
  --largeur: 77.5rem;
  --gouttiere: max(var(--marge), (100% - var(--largeur)) / 2);
  --nav-h: 4rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: relative;
  margin: 0;
  background: var(--papier);
  color: var(--sapin);
  font-family: var(--police);
  font-size: 1.125rem;
  line-height: 1.5;
  font-variant-numeric: lining-nums;
}

h1,
h2,
h3,
p,
ul,
figure {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: var(--trait);
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.nowrap {
  white-space: nowrap;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

h1,
h2,
.marque {
  font-stretch: var(--large);
  font-weight: 800;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(2.25rem, 9vw, 4rem);
  line-height: 1;
}

/* Fond à courbes de niveau, derrière toute la page (scripts/build-courbes.mjs).
   Les sections ont un fond uni non positionné : les couches passent au-dessus de ces fonds
   et sous le contenu, qui est positionné avec z-index: 1.
   Les courbes sont réparties en 3 familles (une courbe sur trois), chacune en deux couches de couleur :
   crème foncé en darken (visible sur le crème), vert sauge en lighten (visible sur le vert). */

.courbes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.courbes i {
  position: absolute;
  /* un peu plus grand que la page : le mouvement des courbes ne découvre jamais de bord */
  inset: -2rem;
  -webkit-mask: url("assets/courbes-mobile-1.svg") top center / cover no-repeat;
  mask: url("assets/courbes-mobile-1.svg") top center / cover no-repeat;
}

.courbes i:nth-child(odd) {
  background: var(--courbe-papier);
  mix-blend-mode: darken;
}

.courbes i:nth-child(even) {
  background: var(--courbe-sapin);
  mix-blend-mode: lighten;
}

.courbes i:nth-child(n + 3) {
  -webkit-mask-image: url("assets/courbes-mobile-2.svg");
  mask-image: url("assets/courbes-mobile-2.svg");
}

.courbes i:nth-child(n + 5) {
  -webkit-mask-image: url("assets/courbes-mobile-3.svg");
  mask-image: url("assets/courbes-mobile-3.svg");
}

main > section > *,
.pied {
  position: relative;
  z-index: 1;
}

.icone-sapin {
  flex: none;
  width: 0.8em;
  height: 1.05em;
  fill: var(--metre);
}

/* Boutons */

.bouton {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0.625rem 1.5rem;
  border: var(--trait) solid currentColor;
  border-radius: var(--rayon);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.bouton-appel {
  min-height: 4.75rem;
  border-color: var(--metre);
  background: var(--metre);
  color: var(--sapin);
}

.bouton-appel:hover {
  border-color: var(--metre-fonce);
  background: var(--metre-fonce);
}

.bouton-appel-mot {
  font-size: 1.5rem;
  font-weight: 800;
  font-stretch: var(--large);
}

.bouton-appel-num {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bouton-second {
  border-color: var(--papier);
  color: var(--papier);
}

.bouton-second:hover {
  background: rgb(244 233 210 / 0.12);
}

.bouton-petit {
  min-height: 3rem;
  padding: 0.5rem 1.25rem;
  font-size: 1.125rem;
}

/* Navigation : barre de la couleur de la section qui passe dessous, opaque pour que le texte
   ne passe jamais sous le logo : vert avec le texte crème, ou crème avec le texte vert (classe .sur-clair
   posée par assets/site.js). Le bouton Appeler est plein, dans la couleur du texte.
   Safari iOS 26 reprend cette couleur pour teinter la barre d'état. */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  height: var(--nav-h);
  margin-bottom: calc(var(--nav-h) * -1);
  padding: 0 var(--gouttiere);
  background-color: var(--sapin);
  color: var(--papier);
  transition: background-color 0.3s ease;
}

.nav.sur-clair {
  background-color: var(--papier);
  color: var(--sapin);
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.nav-pilule {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-liens {
  display: none;
}

/* bouton plein dans la couleur du texte de la barre : crème sur le vert, vert sur le crème */
.bouton-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0 1.125rem;
  border-radius: 999px;
  background: var(--papier);
  color: var(--sapin);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.sur-clair .bouton-nav {
  background: var(--sapin);
  color: var(--papier);
}

.bouton-nav:hover {
  background: var(--revers);
}

.sur-clair .bouton-nav:hover {
  background: var(--aiguille);
}

.icone-tel {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-jean {
  display: none;
}

/* Hero : fond vert à courbes, textes crème, boutons sous les textes */

.hero {
  display: grid;
  padding: calc(var(--nav-h) + 4.5rem) var(--gouttiere) 5.5rem;
  background: var(--sapin);
  color: var(--papier);
}

.hero h1 {
  font-size: clamp(3.5rem, 18vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
}

.hero h1 span {
  display: block;
}

.hero-sous-titre {
  margin-top: 1.125rem;
  font-size: 1.375rem;
  line-height: 1.35;
}

.hero-prix {
  margin-top: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.hero-prix strong {
  color: var(--metre);
  font-size: 1.5em;
  font-weight: 800;
  font-stretch: var(--large);
  line-height: 1;
}

.hero-actions {
  display: grid;
  gap: 0.75rem;
  margin-top: 3rem;
}

/* Sections */

main > section {
  padding: clamp(3.5rem, 9vw, 7rem) var(--gouttiere);
}

[id] {
  scroll-margin-top: var(--nav-h);
}

/* La plantation : fond crème, trois photos cernées de jaune, celle du milieu plus grande */

.glissiere {
  margin: 1.25rem calc(var(--gouttiere) * -1) 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.glissiere::-webkit-scrollbar {
  display: none;
}

.glissiere:focus-visible {
  outline-offset: -3px;
}

.galerie {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: max-content;
  padding: 1.25rem var(--gouttiere) 2.5rem;
  list-style: none;
}

.galerie li {
  flex: none;
  width: 62vw;
  aspect-ratio: 7 / 10;
  overflow: hidden;
  border: 4px solid var(--metre);
  border-radius: var(--rayon-photo);
  background: var(--aiguille);
  scroll-snap-align: center;
}

/* la photo du milieu, mise en avant */
.galerie li:nth-child(2) {
  width: 72vw;
  aspect-ratio: 4 / 5;
  box-shadow: 0 1.25rem 2.5rem -0.75rem rgb(23 58 46 / 0.45), 0 0.25rem 0.75rem rgb(23 58 46 / 0.15);
}

.galerie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 0.8, 0.25, 1);
}

/* Tarifs : fond vert, encadré crème avec toise, sapins à l'échelle et pastilles de prix */

.tarifs {
  background: var(--sapin);
  color: var(--papier);
}

.tarifs-tete p {
  max-width: 26rem;
  margin-top: 1rem;
}

.mesure {
  --toise-l: 2.25rem;
  --ecart: 0.375rem;
  --colonnes: var(--toise-l) repeat(3, minmax(0, 1fr));
  /* le grand sapin (environ 1,80 m de large) doit tenir dans sa colonne */
  --cm: min(0.1rem, (100cqi - var(--toise-l) - 3 * var(--ecart)) / 450);
  /* diamètre des pastilles de prix */
  --p: 3.625rem;
  /* côté des carreaux de la grille derrière les sapins, en cm (chacun coupé en deux par des pointillés) :
     1 m en mobile, où l'échelle est petite, 50 cm à partir de la tablette */
  --carreau: 100;
  /* hauteur de la toise, et de la grille qui la prolonge */
  --haut-toise: calc(var(--cm) * 316);
  container-type: inline-size;
  margin: 2rem calc(var(--gouttiere) * -1 + 0.5rem) 0;
  padding: 1.25rem 0.875rem 1.25rem;
  border-radius: 1rem;
  background: var(--papier);
  color: var(--sapin);
}

.dessin {
  position: relative;
  display: grid;
  grid-template-columns: var(--colonnes);
  column-gap: var(--ecart);
  /* place pour la pastille au-dessus du grand sapin */
  height: calc(var(--cm) * 300 + var(--p) + 1rem);
  border-bottom: 3px solid var(--sapin);
}

/* Grille qui prolonge la toise derrière les sapins, à droite de la toise et à sa hauteur, calée sur ses
   graduations depuis le sol : carreaux de --carreau cm en traits pleins, chacun coupé en deux par une ligne
   en petits points (plus fins que les tirets du plafond) */
.dessin::before {
  content: "";
  position: absolute;
  left: var(--toise-l);
  right: 0;
  bottom: 0;
  height: var(--haut-toise);
  background-image:
    repeating-linear-gradient(to top, transparent 0 calc(var(--cm) * var(--carreau) - 1px), rgb(23 58 46 / 0.28) calc(var(--cm) * var(--carreau) - 1px) calc(var(--cm) * var(--carreau))),
    repeating-linear-gradient(to right, rgb(23 58 46 / 0.28) 0 1px, transparent 1px calc(var(--cm) * var(--carreau))),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0H24M0 0V24' fill='none' stroke='%23173A2E' stroke-opacity='.32' stroke-width='2' stroke-dasharray='1.2 2.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background-position: left bottom;
  background-size: auto, auto, calc(var(--cm) * var(--carreau) / 2) calc(var(--cm) * var(--carreau) / 2);
  pointer-events: none;
}

.toise {
  position: relative;
  align-self: end;
  height: var(--haut-toise);
  background-color: var(--metre);
  background-image:
    repeating-linear-gradient(to top, transparent 0 calc(var(--cm) * 50 - 2px), var(--sapin) calc(var(--cm) * 50 - 2px) calc(var(--cm) * 50)),
    repeating-linear-gradient(to top, transparent 0 calc(var(--cm) * 10 - 1px), var(--sapin) calc(var(--cm) * 10 - 1px) calc(var(--cm) * 10));
  background-size: 0.5rem 100%, 0.25rem 100%;
  background-position: right bottom;
  background-repeat: no-repeat;
}

.toise span {
  position: absolute;
  left: 0.25rem;
  bottom: calc(var(--h) * var(--cm));
  transform: translateY(50%);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* Plafond courant à 2,50 m */
.plafond {
  position: absolute;
  left: calc(var(--toise-l) + var(--ecart));
  right: 0;
  bottom: calc(250 * var(--cm));
  border-top: 1.5px dashed rgb(23 58 46 / 0.7);
  pointer-events: none;
}

.plafond > span {
  position: absolute;
  bottom: 0.3rem;
  left: 0;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.arbre {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sapin {
  position: relative;
  display: block;
  flex: none;
  /* le viewBox ajoute 2 cm au-dessus de la pointe */
  height: calc((var(--max) + 2) * var(--cm));
  width: auto;
  overflow: visible;
}

/* Pastille jaune au-dessus de chaque sapin, légèrement inclinée */
.pastille {
  position: absolute;
  left: 50%;
  bottom: calc(var(--max) * var(--cm) + 0.5rem);
  z-index: 1;
  display: grid;
  place-content: center;
  width: var(--p);
  height: var(--p);
  border-radius: 50%;
  background: var(--metre);
  color: var(--sapin);
  line-height: 1;
  text-align: center;
  transform: translateX(-50%) rotate(var(--rot, 0deg));
}

.pastille strong {
  font-size: 1.125rem;
  font-weight: 800;
  font-stretch: var(--large);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* en mobile la tranche est écrite sous la ligne de sol : dans la pastille, elle ne reste que pour les lecteurs d'écran */
.pastille span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tranches {
  display: grid;
  grid-template-columns: var(--colonnes);
  column-gap: var(--ecart);
  margin-top: 0.5rem;
  padding: 0;
  list-style: none;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.tranches li:first-child {
  grid-column: 2;
}

.mention {
  margin-top: 1.25rem;
  font-weight: 700;
}

.bon {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

.bon strong {
  color: var(--metre);
}

/* Contact : fond crème, texte vert */

.contact-infos > * + * {
  margin-top: 1.5rem;
}

.contact h2 {
  margin-bottom: 1.5rem;
}

.contact-nom {
  font-size: 1.5rem;
  font-weight: 700;
}

.contact-tel {
  display: inline-block;
  font-size: clamp(2rem, 10.6vw, 4.25rem);
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-decoration-color: var(--metre);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.14em;
}

.contact-lieu {
  padding-top: 0.5rem;
  line-height: 1.6;
}

.contact-adresse {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
}

.carte {
  margin-top: 2.5rem;
}

.carte-cadre {
  position: relative;
  height: 300px;
  overflow: hidden;
  border: 1.5px solid rgb(23 58 46 / 0.2);
  border-radius: var(--rayon-photo);
  background: #EDF1EA;
  color: var(--sapin);
  container-type: size;
}

/* Une vue par niveau ; positions en unités du SVG (450 unités de haut, centre à 450 en x) */
.vue {
  --u: calc(100cqh / 450);
  --px: calc(50cqw + (var(--x) - 450) * var(--u));
  --py: calc(var(--y) * var(--u));
  position: absolute;
  inset: 0;
}

.vue[hidden] {
  display: none;
}

.vue.fondu {
  z-index: 1;
}

.vue img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cercle de 3 km, toujours centré sur le bourg */
.carte-zone {
  position: absolute;
  left: var(--px);
  top: var(--py);
  width: calc(var(--d) * var(--u));
  aspect-ratio: 1;
  border: var(--trait) solid var(--sapin);
  border-radius: 50%;
  background: rgb(23 58 46 / 0.16);
  translate: -50% -50%;
  pointer-events: none;
}

.carte-nom,
.lieu {
  position: absolute;
  font-size: 1.125rem;
  line-height: 1.2;
  white-space: nowrap;
  translate: -50% -50%;
  pointer-events: none;
}

.carte-nom {
  left: var(--px);
  top: calc(var(--py) - var(--d) * var(--u) / 2 - 1.125rem);
  padding: 0.125rem 0.75rem;
  border: var(--trait) solid var(--sapin);
  border-radius: 999px;
  background: var(--papier);
  font-weight: 700;
}

.vue-commune .carte-nom {
  top: var(--py);
}

/* au niveau Limoges, le bourg est près du bord droit : son nom passe à gauche du cercle */
.vue-limoges .carte-nom {
  top: var(--py);
  left: calc(var(--px) - var(--d) * var(--u) / 2 - 0.5rem);
  translate: -100% -50%;
}

.lieu {
  left: calc(50cqw + (var(--x) - 450) * var(--u));
  top: calc(var(--y) * var(--u));
  font-weight: 600;
  text-shadow: 0 0 3px #EDF1EA, 0 0 3px #EDF1EA, 0 0 5px #EDF1EA, 0 0 8px #EDF1EA;
}

.lieu-ville {
  font-size: 1.375rem;
  font-weight: 800;
  font-stretch: var(--large);
}

.lieu-large {
  display: none;
}

@container (min-width: 600px) {
  .lieu-large {
    display: block;
  }
}

.carte-echelle {
  position: absolute;
  bottom: 0.625rem;
  left: 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--rayon);
  background: var(--papier);
  font-weight: 700;
  line-height: 1.3;
}

.carte-echelle i {
  display: block;
  width: calc(var(--e) * var(--u));
  height: 0.75rem;
  border: var(--trait) solid var(--sapin);
  background: var(--metre) repeating-linear-gradient(to right, var(--sapin) 0 1px, transparent 1px 20%);
}

/* sous la carte : le zoom à gauche, l'attribution à droite */
.carte-pied {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 0.625rem;
}

.carte-zoom {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border: var(--trait) solid rgb(23 58 46 / 0.3);
  border-radius: 999px;
}

.carte-zoom[hidden] {
  display: none;
}

.carte-zoom button {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--metre);
  color: var(--sapin);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.carte-zoom button:hover {
  background: var(--metre-fonce);
}

.carte-zoom button[aria-disabled="true"] {
  background: transparent;
  color: rgb(23 58 46 / 0.4);
  cursor: default;
}

.carte-zoom svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.carte-niveau {
  min-width: 6.5rem;
  font-weight: 700;
  text-align: center;
}

.carte-source {
  margin-left: auto;
  color: var(--aiguille);
  font-size: 0.875rem;
  line-height: 1.35;
  text-align: right;
}

.itineraire {
  display: none;
  gap: 0.75rem;
  margin-top: 1rem;
}

.contact .bouton:hover {
  background: rgb(23 58 46 / 0.08);
}

/* Pied : fond vert plein, une ligne */

.pied {
  padding: 1.5rem var(--gouttiere) calc(1.5rem + env(safe-area-inset-bottom));
  background: var(--sapin);
  color: var(--papier);
  font-size: 1.125rem;
  text-align: center;
}

.pied p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.pied-sapin {
  margin-right: 0.25rem;
}

.pied a {
  font-weight: 700;
}

.coeur {
  display: inline-block;
  width: 1.1em;
  height: 1em;
  fill: var(--orange);
}

/* Mobile : Waze et Plans */

@media (max-width: 700px), (pointer: coarse) {
  .itineraire {
    display: flex;
  }
}

@media (max-width: 700px) {
  /* en mobile, la pastille du petit sapin couvre la ligne : la légende passe en haut de l'encadré */
  .plafond > span {
    bottom: calc(50 * var(--cm) + var(--p) + 1rem - 1.2em);
  }

  .plafond > span::before {
    content: "";
    display: inline-block;
    width: 1.25rem;
    margin-right: 0.375rem;
    border-top: 1.5px dashed rgb(23 58 46 / 0.7);
    vertical-align: middle;
  }

  /* l'attribution tient sur deux lignes à côté du zoom */
  .carte-source .prefixe {
    display: none;
  }

  .carte-niveau {
    min-width: 5.5rem;
  }
}

/* Tablette et plus */

@media (min-width: 701px) {
  .courbes i {
    -webkit-mask-image: url("assets/courbes-1.svg");
    mask-image: url("assets/courbes-1.svg");
  }

  .courbes i:nth-child(n + 3) {
    -webkit-mask-image: url("assets/courbes-2.svg");
    mask-image: url("assets/courbes-2.svg");
  }

  .courbes i:nth-child(n + 5) {
    -webkit-mask-image: url("assets/courbes-3.svg");
    mask-image: url("assets/courbes-3.svg");
  }

  .mesure {
    --toise-l: 3.5rem;
    --ecart: 1.5rem;
    --p: 7rem;
    --haut-toise: 100%;
    --carreau: 50;
    margin: 3.5rem 0 0;
    padding: 2.5rem 2.5rem 2.25rem;
    border-radius: 1.5rem;
  }

  .dessin {
    height: calc(var(--cm) * 338);
  }

  .toise {
    height: 100%;
    background-size: 1.125rem 100%, 0.5625rem 100%;
  }

  .toise span {
    font-size: 1rem;
  }

  .toise span {
    left: 0.375rem;
  }

  /* pastille environ 3 cm au-dessus de la pointe ; celle du grand sapin en haut à droite */
  .pastille {
    bottom: calc(var(--max) * var(--cm) + 1.125rem);
  }

  .arbre-grand .pastille {
    left: min(50% + var(--p) * 1.1, 100% + 2rem - var(--p) / 2);
    bottom: calc(var(--max) * var(--cm) - var(--p) * 0.74);
  }

  .pastille strong {
    font-size: 2rem;
  }

  .pastille span {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    font-weight: 700;
  }

  .tranches {
    display: none;
  }

  .mention {
    margin-top: 1.5rem;
  }

  .bon {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 2.5rem;
    margin-top: 2.5rem;
    font-size: 1.125rem;
  }

  .carte-cadre {
    height: 440px;
  }
}

/* Desktop */

@media (min-width: 900px) {
  :root {
    --nav-h: 5.75rem;
    --marge: 3rem;
  }

  body {
    font-size: 1.25rem;
  }

  .marque {
    gap: 0.5rem;
    font-size: 1.25rem;
  }

  .nav-pilule {
    gap: 0.5rem;
  }

  .nav-liens {
    display: flex;
  }

  .nav-liens a {
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.2s ease;
  }

  .nav-liens a:hover {
    background: rgb(244 233 210 / 0.12);
  }

  .sur-clair .nav-liens a:hover {
    background: rgb(23 58 46 / 0.08);
  }

  .bouton-nav {
    height: 3rem;
    margin-left: 0.5rem;
    padding: 0 1.375rem;
  }

  .nav-jean {
    display: inline;
  }

  /* textes sur toute la largeur, boutons calés à droite en dessous */
  .hero {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: calc(var(--nav-h) + 9.375rem) var(--gouttiere) 8.75rem;
  }

  .hero-texte {
    grid-column: 1 / -1;
  }

  .hero-sous-titre {
    font-size: 1.625rem;
  }

  .hero-prix {
    font-size: 1.5rem;
  }

  .hero-actions {
    grid-column: 2;
    display: flex;
    flex-wrap: nowrap;
    gap: 1.125rem;
    margin-top: 4rem;
  }

  .bouton-appel {
    min-width: 18.75rem;
  }

  .bouton-second {
    min-width: 12rem;
  }

  .glissiere {
    margin: 0;
    overflow: visible;
  }

  .galerie {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr) minmax(0, 1fr);
    gap: 2.75rem;
    width: auto;
    padding: 4rem 0 0;
  }

  .galerie li,
  .galerie li:nth-child(2) {
    width: auto;
  }

  .galerie li:hover img {
    transform: scale(1.04);
  }

  .tarifs-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }

  .tarifs-tete p {
    margin-top: 0;
    font-size: 1.125rem;
  }

  .contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    column-gap: 4rem;
  }

  /* les lignes se répartissent sur toute la hauteur de la carte :
     la dernière arrive au niveau du bas des boutons de zoom */
  .contact-infos {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .contact-infos > * + *,
  .contact h2 {
    margin: 0;
  }

  .contact-lieu {
    padding-top: 0;
  }

  .contact-adresse {
    font-size: 1.625rem;
  }

  .carte {
    margin-top: 0;
  }

  .contact-tel {
    font-size: clamp(2.5rem, 4.4vw, 3.5rem);
  }

}

/* Mouvement : seulement avec le script (classe .anim sur <html>) et sans préférence de mouvement réduit */

/* Le sapin pousse du sol vers la pointe : un clip-path qui se lève, sans transform.
   Un scale sur le SVG (et son filtre d'aquarelle) laisse Safari iOS figer le dessin à la résolution
   du début de l'animation : sapins flous, voire étirés en bandes. */
@keyframes pousse {
  from {
    clip-path: inset(100% -50% 0);
  }

  to {
    clip-path: inset(-5% -50% 0);
  }
}

@keyframes pose {
  from {
    opacity: 0;
    scale: 0.4;
  }

  70% {
    opacity: 1;
    scale: 1.06;
  }
}

@keyframes fondu {
  from {
    opacity: 0;
  }
}

/* Ondulation : chaque famille de courbes décrit un petit cercle (4 px), décalée d'un tiers de tour
   sur la suivante. L'écart entre deux courbes voisines se resserre puis s'ouvre, et l'onde semble
   passer d'une courbe à l'autre. */
@keyframes onde {
  0% {
    translate: 0.25rem 0;
  }

  8.33% {
    translate: 0.2165rem 0.125rem;
  }

  16.67% {
    translate: 0.125rem 0.2165rem;
  }

  25% {
    translate: 0 0.25rem;
  }

  33.33% {
    translate: -0.125rem 0.2165rem;
  }

  41.67% {
    translate: -0.2165rem 0.125rem;
  }

  50% {
    translate: -0.25rem 0;
  }

  58.33% {
    translate: -0.2165rem -0.125rem;
  }

  66.67% {
    translate: -0.125rem -0.2165rem;
  }

  75% {
    translate: 0 -0.25rem;
  }

  83.33% {
    translate: 0.125rem -0.2165rem;
  }

  91.67% {
    translate: 0.2165rem -0.125rem;
  }

  100% {
    translate: 0.25rem 0;
  }
}

/* Dérive lente de tout le relief, par-dessus l'ondulation */
@keyframes derive {
  0%,
  100% {
    transform: translate(-1.25rem, -0.75rem);
  }

  33% {
    transform: translate(0.5rem, 1rem);
  }

  66% {
    transform: translate(1.25rem, -0.25rem);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* les deux couches d'une même famille ont le même mouvement : chaque courbe reste continue
     d'une section à l'autre */
  .courbes i {
    animation: onde 9s linear infinite, derive 60s ease-in-out infinite;
  }

  .courbes i:nth-child(n + 3) {
    animation-delay: -3s, 0s;
  }

  .courbes i:nth-child(n + 5) {
    animation-delay: -6s, 0s;
  }

  .anim .r {
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: calc(var(--i, 0) * 90ms);
  }

  .anim .r:not(.vu) {
    opacity: 0;
    transform: translateY(1.25rem);
  }

  .anim .mesure:not(.vu) .sapin {
    clip-path: inset(100% -50% 0);
  }

  .anim .mesure.vu .sapin {
    animation: pousse 1.1s cubic-bezier(0.3, 0.7, 0.3, 1) both;
    animation-delay: calc(0.15s + var(--i) * 0.22s);
  }

  /* une fois chaque sapin poussé, sa pastille de prix se pose */
  .anim .mesure:not(.vu) .pastille {
    opacity: 0;
  }

  .anim .mesure.vu .pastille {
    animation: pose 0.5s cubic-bezier(0.3, 0.9, 0.4, 1) both;
    animation-delay: calc(1s + var(--i) * 0.22s);
  }

  .vue.fondu {
    animation: fondu 0.5s ease-out;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}