/* =========================================================================
   Votre enseigne (nom de travail) - palier median, direction « De A a B »
   ACCUEIL. Ce que index.html ajoute a base.css, et rien d'autre.

   Se charge APRES base.css :
     <link rel="stylesheet" href="base.css">
     <link rel="stylesheet" href="accueil.css">

   Contient : l'itineraire vertical (la signature), la rade, le heros, les six
   mises en page des sections, la carte des communes, les temoignages, l'appel
   final, et le rythme vertical.
   Aucun jeton ici : ils vivent tous dans le :root de base.css.
   ========================================================================= */

/* ------------------------------------------------- 1. Rythme vertical (R14) */

/* Un seul proprietaire de l'ecart : margin-top. Les marges basses d'un frere
   et du suivant fusionnaient dans le flow-root de .piste, et la sequence
   voulue (inegale) se ramenait a la suite des maxima, plus reguliere.
   Sequence mobile  : 72 · 96 · 112 · 56 · 96, puis 56 avant le pied.
   Sequence 1080 px : 128 · 160 · 200 · 96 · 160, puis 96 avant le pied.
   Ne pas y rajouter de margin-bottom, sauf la derniere, qui ferme la page. */
.section-prestations { margin: 72px 0 0; }
.section-etapes      { margin: var(--e96) 0 0; }
.section-carte       { margin: 112px 0 0; }
.section-temoignages { margin: 56px 0 0; }
.section-final       { margin: var(--e96) 0 56px; }

@media (min-width: 1080px) {
  .section-prestations { margin-top: var(--e128); }
  .section-etapes      { margin-top: var(--e160); }
  .section-carte       { margin-top: var(--e200); }
  .section-temoignages { margin-top: var(--e96); }
  .section-final       { margin-top: var(--e160); margin-bottom: var(--e96); }
}

/* ---------------------------------------------- 2. Itineraire (signature) */

.piste {
  position: relative;
  display: flow-root;
}

.itineraire {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-trace);
  pointer-events: none;
  overflow: visible;
}

/* R6 : le trace est double. Un lisere sombre de --voile-photo passe dessous,
   un peu plus large, pour que la ligne se lise comme incrustee dans la page et
   non posee dessus la ou elle croise les trois photos a fond perdu. Aucun
   flou, aucune ombre : un trait net, comme le contour d'un trace routier.
   Le meme « d » et le meme dashoffset sont poses sur les deux par le script. */
.trace-lisere {
  fill: none;
  stroke: var(--voile-photo);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trace {
  fill: none;
  stroke: var(--signal);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* R7 : chaque repere tire un tiret de 12 px vers le texte qu'il marque. Un
   itineraire a des arrets nommes ; un point seul n'est qu'une perle sur un fil.
   Et les deux familles de reperes se distinguent : titre de section r = 7 px,
   chiffre d'etape r = 5 px. */
.tiret {
  stroke: var(--signal);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.marqueur {
  r: 5px;
  fill: var(--fond);
  stroke: var(--signal);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
}

.marqueur-etape { r: 4px; }

.disque {
  r: 9px;
  fill: var(--signal);
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
}

.anneau {
  r: 16px;
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.5;
}

@media (min-width: 768px) {
  .trace-lisere { stroke-width: 7; }
  .trace { stroke-width: 3; }
  .marqueur { r: 7px; stroke-width: 3; }
  .marqueur-etape { r: 5px; }
  .disque { r: 12px; }
  .anneau { r: 20px; }
}

/* Tant que le script n'a pas remesure le viewBox, celui-ci est etire en
   hauteur par preserveAspectRatio="none" : vector-effect protege l'epaisseur
   du trait, jamais la geometrie, et les cercles se rendraient en ellipses.
   Sans JavaScript la ligne reste donc integralement tracee, mais sans
   marqueurs deformes. */
.itineraire:not([data-mesure]) .marqueur,
.itineraire:not([data-mesure]) .tiret,
.itineraire:not([data-mesure]) .disque,
.itineraire:not([data-mesure]) .anneau { visibility: hidden; }

/* Etat par defaut : ligne entierement tracee, marqueurs poses.
   Le script n'ajoute .trace-js que si le mouvement est autorise. */
.trace-js .trace-lisere,
.trace-js .trace { stroke-dasharray: 1000; stroke-dashoffset: 1000; }

.trace-js .marqueur,
.trace-js .disque {
  opacity: 0;
  transform: scale(.4);
  transition: opacity var(--duree-courte) ease-out,
              transform var(--duree-moyenne) var(--sortie);
}

.trace-js .tiret {
  opacity: 0;
  transition: opacity var(--duree-courte) ease-out;
}

.trace-js .marqueur.atteint,
.trace-js .tiret.atteint,
.trace-js .disque.atteint {
  opacity: 1;
  transform: scale(1);
}

.trace-js .anneau {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 400ms var(--sortie) 120ms;
}

.trace-js .anneau.atteint { stroke-dashoffset: 0; }

/* Ancres invisibles : le script y accroche la ligne.
   Le bloc de reference est la boite de remplissage de l'ancetre positionne.
   Pour un h2, ce bord coincide avec la colonne de texte ; pour un chiffre
   d'etape ou le bouton final, il est deja decale du retrait de rail. */
.ancre {
  position: absolute;
  top: 50%;
  left: calc(var(--rail-in) - var(--retrait-local, 0px) + var(--dx, 0) * var(--amplitude));
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.etape-num,
.final-action { --retrait-local: var(--retrait-rail); }

/* ------------------------------------------------------------- 3. La rade */

.rade .eau { fill: var(--panneau); }
.rade .rive,
.rade .riviere,
.rade .jet {
  fill: none;
  stroke: var(--filet);
  stroke-linecap: round;
}
.rade .rive { stroke-width: 1.25; }
.rade .riviere { stroke-width: 2; }
.rade .jet { stroke-width: 1.5; }

/* R2 : le rapport etait inverse. Des rives a 0,75 px en --filet (1,78:1)
   disparaissaient et il ne restait que l'aplat d'eau, dont l'arete diagonale
   passait sous le nom de l'entreprise et coupait le haut du h1. La direction §2
   le dit : « c'est la ligne de rive qui dessine la rade, pas le remplissage ».
   Donc plus d'aplat derriere le heros, des traits pleins, et le dessin descend
   sous le bloc de titre. */
.rade-fond .eau { fill: none; }
.rade-fond .rive { stroke-width: 1.25; }
.rade-fond .jet { stroke-width: 1.25; }

/* Sur la carte de « Ou nous allons », le trace porte de l'information : c'est
   lui qui justifie la position des neuf communes. Il passe donc a --filet-fort
   (4,12:1 sur --fond), au-dessus du seuil de 3:1 de WCAG 1.4.11. --filet reste
   au seul trace du heros, ou il est vraiment decoratif (1,78:1 assume).
   L'aplat d'eau peut rester en --panneau : c'est la ligne de rive qui dessine
   la rade, pas le remplissage. */
.rade-carte .rive,
.rade-carte .riviere,
.rade-carte .jet { stroke: var(--filet-fort); }

.rade-carte .rive { stroke-width: 1.5; }
.rade-carte .riviere { stroke-width: 2.5; }

/* R15 : le jet etait un « Y » de 1,5 px dont le pied touchait la rive, et il
   se lisait comme une tige plantee dans le lac. Trait plus epais, et un pied
   pose sur la rive. */
.rade-carte .jet { stroke-width: 2; }
.rade-carte .jet-pied { fill: var(--filet-fort); stroke: none; }

/* ---------------------------------------------------------------- 4. Heros */

.hero {
  position: relative;
  min-height: 100dvh;
  padding-bottom: 0;
  row-gap: var(--e24);
  grid-template-rows: auto auto auto auto;
}

.hero > * { position: relative; z-index: var(--z-contenu); padding-left: 0; }

/* R13 : Futura n'apparait jamais en dessous de 24 px (direction §2). Le nom
   de l'entreprise etait a 20 px, seule infraction typographique de la feuille,
   et elle portait sur le mot le plus important de l'ecran. */
.hero-nom {
  grid-row: 1;
  padding-top: var(--e24);
  font-family: var(--police-titre);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: .015em;
  line-height: 1.2;
}

.hero-photo {
  grid-row: 2;
  grid-column: pleine-d / pleine-f;
  padding-left: 0;
  height: 52vh;
  min-height: 320px;
  z-index: var(--z-decor);
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% 50%;
  filter: saturate(.88) contrast(1.04);
}

/* Le voile ne couvre que le titre, pas toute la photo. Il est pose sur le
   BLOC et non sur les fragments de ligne : sous 900 px chaque phrase passe sur
   deux lignes de renvoi, et un voile pose sur les fragments donnerait quatre
   bandes a bords irreguliers empilees en escalier.

   R5 : la plaque mordait de 16 px a gauche seulement, laissait un filet de
   photo de 24 px d'un cote et un reste irregulier de l'autre, et affichait
   quatre bords durs au milieu de l'image. Elle va desormais d'un bord a
   l'autre de l'ecran et se fond vers le haut. Ce n'est pas un degrade de
   couleur (interdit) : c'est un seul vert qui perd son opacite, et le bas de
   la plaque rejoint le fond de page sans couture. */
.hero h1 {
  grid-row: 2;
  align-self: end;
  margin: 0 calc(var(--gouttiere-d) * -1) 0 calc(var(--gouttiere-g) * -1);
  padding: var(--e24) var(--gouttiere-d) var(--e16) var(--gouttiere-g);
  background: linear-gradient(to top, var(--fond) 0%, var(--fond) 62%, transparent 100%);
}

.hero-chapeau { grid-row: 3; color: var(--craie-douce); max-width: 46ch; }

.hero-panneau { grid-row: 4; }

.rade-fond { display: none; }

@media (min-width: 900px) {
  .hero {
    grid-template-columns:
      [pleine-d] minmax(var(--gouttiere-g), 1fr)
      [texte-d] minmax(0, calc(var(--largeur-max) * .52))
      [texte-f photo-d] minmax(0, calc(var(--largeur-max) * .48))
      [texte2-f] minmax(var(--gouttiere-d), 1fr)
      [pleine-f];
    grid-template-rows: auto 1fr auto auto auto;
    row-gap: var(--e16);
  }

  .hero-nom { padding-top: var(--e32); }
  /* A partir de 900 px le titre n'est plus sur la photo : plus de plaque. */
  .hero h1 {
    grid-row: 3;
    align-self: end;
    margin: 0;
    padding: 0;
    background: none;
  }
  .hero-chapeau { grid-row: 4; margin-top: var(--e8); }
  .hero-panneau { grid-row: 5; margin-top: var(--e24); }

  .hero-photo {
    grid-row: 1 / 6;
    grid-column: photo-d / pleine-f;
    height: auto;
    min-height: 0;
    align-self: stretch;
  }

  /* R2 : le dessin descend sous le bloc de titre et retrouve son opacite
     pleine, maintenant qu'il est fait de traits et non d'un aplat.

     A top: 18 % il etait entierement contenu dans la boite du h1 : deux traits
     fins coupaient « d'adresse. » et « Nous nous », et un trait qui traverse
     du Futura a 72 px se lit comme une rayure, pas comme un decor.

     Le « top » est supprime, pas deplace. Trois raisons, mesurees le 19.09 sur
     un ecran de 1440 x 900 :
       1. la hauteur du dessin est INTRINSEQUE (viewBox 1000 x 420, largeur
          58 % de la colonne de texte, soit 356 x 149 px) : poser a la fois
          top et bottom sur-contraint la boite, et c'est « bottom » qui etait
          ignore. Le retirer rend au « bottom: 0 » deja ecrit son effet ;
       2. un pourcentage de la hauteur du heros ne suit pas le titre. La
          rangee 1fr du heros absorbe tout le jeu : sur une fenetre plus
          haute, le h1 descend plus vite que le pourcentage et le dessin
          repasse dessus. Mesure a 900 px de haut : top 46 % met l'encre a
          y 426-515, soit encore 15 px dans le h1 qui finit a 441. Le defaut
          reviendrait tout seul sur un ecran plus grand ;
       3. cale en bas, l'encre tombe a y 763-852, sous le chapeau (523) et
          sous le haut du panneau (563) quelle que soit la hauteur de fenetre.
          Le trait ne peut plus croiser un seul mot.

     CONSEQUENCE A ARBITRER, signalee au chef de chantier : le panneau
     d'entree (x 130-650, y 563-900) recouvre entierement le dessin
     (x 130-486). Au-dela de 900 px, il n'est donc plus visible du tout. Il
     ne l'etait en realite que par la partie qui barrait le titre. Le garder,
     l'elargir au-dela du panneau, ou le retirer est une decision de
     composition, pas une correction de defaut : rien n'est retire ici. */
  .rade-fond {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 58%;
    z-index: var(--z-decor);
    opacity: 1;
    pointer-events: none;
  }
}

/* -------------------------------------------- 5. Panneau d'entree du heros */

/* Le panneau ne demande plus que les deux adresses. R3 option A, tranchee le
   19.09 : le nombre de pieces et la date sont demandes par le calculateur,
   a ses arrets 1 et 4. C'etait la seule option qui remonte le bouton
   au-dessus de la ligne de pli, et l'option B ne l'avait fait qu'a moitie
   (bouton a 964 px sur un ecran de 900, soit 64 px sous le pli).

   Les deux adresses ne voyagent plus par l'adresse de la page : une adresse
   de domicile dans une URL finit dans l'historique du navigateur et dans
   l'en-tete Referer. script.js les depose dans sessionStorage et navigue vers
   calculateur.html sans parametre. Sans JavaScript, le bouton reste un simple
   lien vers le calculateur, qui redemande les deux adresses. */
.hero-panneau .panneau { padding: 28px; }

.hero-panneau .champ + .champ { margin-top: var(--e16); }

.hero-panneau .bouton { margin-top: var(--e24); }
.hero-panneau .micro { margin-top: var(--e12); }

/* R8 : au repos, avant tout defilement, la ligne est entierement masquee et il
   ne restait qu'une pastille ambre collee au champ Depart, qui ressemblait a
   une puce de liste. L'anneau, lui, est la des le chargement : la page dit
   « ca part d'ici » sans avoir besoin de bouger. Le script complete en
   laissant 3 % du trace deja dessine. */
.marqueur-depart {
  position: absolute;
  left: -16px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 999px;
  background: var(--signal);
}

.marqueur-depart::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 1.5px solid var(--signal);
  border-radius: 999px;
}

/* R10 est sans objet depuis R3 option A : le champ de date a quitte le heros,
   et avec lui la ligne « jj.mm.aaaa » qui etait posee AU-DESSUS de sa boite,
   contre §3.1 (« micro-texte d'aide : SOUS le champ »). C'etait le seul
   micro-texte du site et il enfreignait la seule regle qui le decrit.
   Le calculateur porte la question de la date, avec sa propre indication de
   format. Ne pas reintroduire .champ-indication ici. */

/* ------------------------------------------------- 6. Ce que nous faisons */

/* Les six lignes et la photo partagent une seule grille : la liste reste une
   vraie liste, la photo se place librement a chaque largeur. */
.prestations-liste,
.etapes-liste { display: contents; }

.prestations-corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--e32);
}

/* Les six filets sont le seul dispositif structurel de la section (pas de
   cartes) : ils portent donc l'information et exigent 3:1. --filet-fort. */
.prestation {
  padding: var(--e24) 0;
  border-top: 1px solid var(--filet-fort);
}

.prestation h3 { margin-bottom: var(--e8); }
.prestation p { color: var(--craie-douce); }

.prestation:nth-child(1) { grid-row: 1; }
.prestation:nth-child(2) { grid-row: 2; }
.prestation:nth-child(3) { grid-row: 3; border-bottom: 1px solid var(--filet-fort); }
.prestations-photo { grid-row: 4; }
.prestation:nth-child(4) { grid-row: 5; }
.prestation:nth-child(5) { grid-row: 6; }
.prestation:nth-child(6) { grid-row: 7; border-bottom: 1px solid var(--filet-fort); }

.prestations-photo {
  width: 78%;
  margin: var(--e32) 0 var(--e32) auto;
  border: 1px solid var(--filet-fort);
  border-radius: 2px;
  overflow: hidden;
}

.prestations-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  filter: saturate(.88) contrast(1.04);
}

@media (min-width: 900px) {
  .prestations-corps {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(200px, .8fr);
    column-gap: var(--e48);
    margin-top: var(--e48);
  }

  .prestation:nth-child(1) { grid-area: 1 / 1; }
  .prestation:nth-child(2) { grid-area: 2 / 1; }
  .prestation:nth-child(3) { grid-area: 3 / 1; }
  .prestation:nth-child(4) { grid-area: 1 / 2; }
  .prestation:nth-child(5) { grid-area: 2 / 2; }
  .prestation:nth-child(6) { grid-area: 3 / 2; }

  .prestations-photo {
    grid-area: 1 / 3 / 4 / 4;
    width: auto;
    margin: 0;
    border-right: 0;
  }

  .prestations-photo img { height: 100%; aspect-ratio: auto; }
}

/* ------------------------------------------------- 7. Comment ca se passe */

.etapes-corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--e64);
  margin-top: var(--e32);
}

.etape { position: relative; }

.etape-num {
  position: relative;
  margin: 0 0 var(--e12);
  font-family: var(--police-chiffre);
  font-size: var(--t-chiffre);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--craie);
}

.etape h3 { margin-bottom: var(--e8); }

/* R1 : la regle de couleur du texte courant etait ecrite « .etape p », de
   specificite (0,1,1), et elle ecrasait « .etape-num » (0,1,0) declare quatre
   lignes plus haut. Les chiffres 01 a 04 s'affichaient donc en --craie-douce,
   plus pales que les titres qu'ils annoncent. Elle ne vise plus que le
   paragraphe de contenu, qui est le seul <p> a suivre un <h3>. */
.etape > h3 + p { color: var(--craie-douce); }

.etape:nth-child(1) { grid-row: 1; }
.etape:nth-child(2) { grid-row: 2; }
.etapes-photo { grid-row: 3; }
.etape:nth-child(3) { grid-row: 4; }
.etape:nth-child(4) { grid-row: 5; }

.etapes-photo {
  width: 78%;
  margin-left: auto;
  border: 1px solid var(--filet-fort);
  border-radius: 2px;
  overflow: hidden;
}

.etapes-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: 50% 40%;
  filter: saturate(.88) contrast(1.04);
}

.photo-large {
  margin-top: var(--e64);
  height: 38vh;
  min-height: 220px;
  border-top: 1px solid var(--filet-fort);
  border-bottom: 1px solid var(--filet-fort);
}

.photo-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
  filter: saturate(.88) contrast(1.04);
}

@media (min-width: 900px) {
  .etapes-corps {
    grid-template-columns: minmax(0, 1fr) minmax(220px, .62fr);
    column-gap: var(--e48);
    row-gap: var(--e96);
    margin-top: var(--e48);
  }

  .etape:nth-child(1) { grid-area: 1 / 1; }
  .etape:nth-child(2) { grid-area: 2 / 1; }
  .etape:nth-child(3) { grid-area: 3 / 1; }
  .etape:nth-child(4) { grid-area: 4 / 1; }

  /* La photo est un portrait 1024 x 1536 en aspect-ratio: auto : dans une
     colonne de 433 px elle impose environ 650 px de hauteur intrinseque. Sur
     deux rangees seulement, la grille repartissait ces 650 px sur les etapes
     02 et 03, qui passaient de 150 px de texte a 277 px de cellule : deux
     trous d'environ 127 px de vert vide sous chacune. Sur trois rangees,
     (650 - 2 x 96) / 3 vaut environ 153 px, soit la hauteur reelle du texte.
     Les deux trous se referment, la section perd environ 250 px, et la photo
     court le long des etapes 02 a 04, ce qui la rattache au jour du
     demenagement plutot qu'a la seule prise de contact. */
  .etapes-photo {
    grid-area: 2 / 2 / 5 / 3;
    width: auto;
    margin: 0;
    border-right: 0;
  }

  .etapes-photo img { aspect-ratio: auto; }

  .photo-large { margin-top: var(--e96); height: 56vh; }
}

/* ------------------------------------------------------ 8. Ou nous allons */

.carte-intro { margin-top: var(--e16); color: var(--craie-douce); }

.carte { position: relative; margin: var(--e32) 0 var(--e24); }

.carte-micro { margin-top: var(--e8); }

.carte-dessin {
  aspect-ratio: 4 / 5;
  border-top: 1px solid var(--filet-fort);
  border-bottom: 1px solid var(--filet-fort);
}

.carte-dessin svg { display: block; width: 100%; height: 100%; }

.communes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e8) var(--e16);
  padding: var(--e16) var(--gouttiere-d) 0 var(--gouttiere-g);
}

.communes li {
  display: flex;
  align-items: center;
  gap: var(--e8);
  font-family: var(--police-chiffre);
  font-size: 14px;
  letter-spacing: .03em;
  color: var(--craie-douce);
}

.communes li::before {
  content: "";
  flex: none;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--craie-douce);
}

/* R15 : neuf etiquettes rigoureusement identiques ne font pas une carte, elles
   font une liste dispersee. Geneve prend deux crans de plus, les huit autres
   ne bougent pas. */
.commune-chef { color: var(--craie); }
.commune-chef::before { width: 5px; height: 5px; background: var(--craie); }

@media (min-width: 768px) {
  .carte { margin: var(--e48) 0 var(--e24); }
  .carte-dessin { aspect-ratio: 1000 / 420; }

  .communes {
    display: block;
    position: absolute;
    inset: 0;
    padding: 0;
    pointer-events: none;
  }

  .communes li {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translateY(-50%);
    font-size: 13px;
    letter-spacing: .04em;
    white-space: nowrap;
  }

  /* Descendue de 10 px sous la rive, pour degager le jet d'eau. */
  .commune-chef {
    font-size: 15px;
    transform: translateY(calc(-50% + 10px));
  }
}

/* -------------------------------------------------- 9. Ce qu'on nous ecrit */

/* La carte decorative de « Ou nous allons » pesait 849 px de page contre
   377 px pour la preuve sociale, soit 13 % contre 6 %. Pour un demenageur
   qu'on choisit sur la confiance, l'ordre des poids etait inverse : la carte
   redit ce que la phrase d'introduction dit deja mieux, les temoignages
   disent la seule chose que le prospect ne peut pas deduire. La bande de
   temoignages reprend donc de la hauteur. Le dessin de la carte n'est pas
   touche : recalibrer ses neuf reperes de commune est un geste separe,
   consigne dans le rapport. */
.section-temoignages { background: var(--panneau); padding: var(--e96) 0; }

@media (min-width: 1080px) {
  .section-temoignages { padding: var(--e128) 0 var(--e96); }
}

.temoignages-grille {
  display: grid;
  gap: var(--e24);
  margin-top: var(--e32);
}

.temoignage { margin: 0; }

.temoignage blockquote {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 48ch;
}

.temoignage figcaption {
  margin-top: var(--e12);
  font-family: var(--police-chiffre);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--craie-douce);
}

/* Le filet qui separe les deux temoignages fait tenir la composition :
   il est structurel, donc --filet-fort (3,33:1 sur --panneau). */
.temoignage + .temoignage {
  padding-top: var(--e24);
  border-top: 1px solid var(--filet-fort);
}

@media (min-width: 900px) {
  .temoignages-grille {
    grid-template-columns: 1fr 1fr;
    gap: var(--e48);
    margin-top: var(--e48);
  }

  .temoignage + .temoignage {
    padding-top: 0;
    padding-left: var(--e48);
    border-top: 0;
    border-left: 1px solid var(--filet-fort);
  }
}

/* --------------------------------------------- 10. Il reste a fixer la date */

.section-final {
  display: grid;
  grid-template-columns:
    [pleine-d] minmax(var(--gouttiere-g), 1fr)
    [texte-d] minmax(0, calc(var(--largeur-max) * .5))
    [texte-f photo-d] minmax(0, calc(var(--largeur-max) * .5))
    [texte2-f] minmax(var(--gouttiere-d), 1fr)
    [pleine-f];
  grid-template-rows: auto auto;
  row-gap: var(--e32);
}

.final-photo {
  grid-row: 1;
  grid-column: pleine-d / pleine-f;
  height: 34vh;
  min-height: 200px;
  border-top: 1px solid var(--filet-fort);
  border-bottom: 1px solid var(--filet-fort);
}

.final-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 60%;
  filter: saturate(.88) contrast(1.04);
}

.final-texte {
  grid-row: 2;
  grid-column: texte-d / texte-f;
  padding-left: var(--retrait-rail);
}

.final-texte p { margin-top: var(--e16); color: var(--craie-douce); }

.final-texte .final-action { position: relative; margin-top: var(--e32); max-width: none; }

.contact { margin-top: var(--e24); }

.contact li {
  font-size: 1.125rem;
  color: var(--craie-douce);
}

/* La zone tactile de 48 px est portee par le lien lui-meme, pas par la ligne. */
.contact a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--craie);
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
}

.contact a:hover { text-decoration-thickness: 2px; }

.contact .numero { font-family: var(--police-chiffre); letter-spacing: .05em; font-size: 1.2rem; }

@media (min-width: 900px) {
  .section-final { grid-template-rows: auto; row-gap: 0; }

  .final-photo {
    grid-row: 1;
    grid-column: photo-d / pleine-f;
    height: auto;
    min-height: 520px;
    border-top: 0;
    border-bottom: 0;
    border-left: 1px solid var(--filet-fort);
  }

  .final-texte {
    grid-row: 1;
    align-self: center;
    padding-top: var(--e64);
    padding-bottom: var(--e64);
    padding-right: var(--e48);
  }
}

/* --------------------------------------------------- 11. Mouvement reduit */

/* Le repli commun est dans base.css. Ici, celui de la signature : ligne
   entierement tracee, marqueurs et tirets poses, aucune boucle d'animation. */

@media (prefers-reduced-motion: reduce) {
  .trace-js .trace-lisere,
  .trace-js .trace { stroke-dasharray: none; stroke-dashoffset: 0; }

  .trace-js .marqueur,
  .trace-js .tiret,
  .trace-js .disque { opacity: 1; transform: none; }

  .trace-js .anneau { stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* Mise en ligne du 19.09 : ancienne carte retiree en attendant la carte exacte du canton */
.rade-fond { display: none !important; }
.section-carte .carte { display: none !important; }