/* Sitefranc : feuille de style unique. Police Archivo (OFL 1.1), auto-hébergée. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo/latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo/latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Papier : un blanc cassé légèrement chaud. Contrastes (WCAG) sur #f7f6f2 : encre 17,5:1,
   gris 6,9:1, #333 11,7:1, rouge 4,6:1. Les vraies surfaces restent blanches (--blanc) :
   la fenêtre de la vitrine, les cartes de prix, les champs du formulaire. */
:root {
  --papier: #f7f6f2;
  --blanc: #ffffff;
  --encre: #111111;
  --gris: #555555;
  --trait-leger: #d4d4d4;
  --voile: #efeee8;
  --rouge: #d52b1e;
  --marge: clamp(20px, 4vw, 48px);
  --max: 1400px;
  --etroit: 66%;
  --entete: 56px;
  --bloc: 64px; /* marge verticale de chaque bande : 64 px sur téléphone, 96 px sur écran large */
}
@media (min-width: 960px) {
  :root { --bloc: 96px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip; /* ce qui dépasse pendant une animation n'élargit jamais la page sur téléphone */
  scroll-padding-top: calc(var(--entete) + 12px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 400;
  font-stretch: 100%;
  font-kerning: normal;
  overflow-x: clip;
}

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
/* Pas de mot seul en dernière ligne ; titres équilibrés sur leurs lignes. */
p, li, dd { text-wrap: pretty; }
h2, h3 { text-wrap: balance; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
/* Au survol, le soulignement se trace (voir « Mouvement »). */

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

.cadre {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.evitement {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 50;
  background: var(--encre);
  color: #fff;
  padding: 12px 16px;
  font-weight: 700;
}
.evitement:focus { top: 12px; }

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

.entete {
  position: sticky;
  top: -53px; /* sur téléphone, la ligne du nom s'efface et la navigation reste */
  z-index: 20;
  background: rgba(247, 246, 242, .97); /* --papier */
  border-bottom: 2px solid var(--encre);
}
.entete__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 24px;
}

.marque {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
}
/* Logo « Sitefranc.– » (modules/marque/logo/officiel) : le point-tiret des prix ronds suisses. */
.marque__logo { display: block; width: auto; height: 20px; }
/* Accueil : le point se pose, puis le tiret se trace, comme on écrit un prix rond (« 890.– »).
   Remplissage « backwards » seulement : l'état final est celui du logo, sans animation qui traîne. */
@media (prefers-reduced-motion: no-preference) {
  .marque__point, .marque__tiret { transform-box: fill-box; }
  .marque__point { transform-origin: 50% 50%; animation: marque-point .3s cubic-bezier(.3, 1.6, .5, 1) .15s backwards; }
  .marque__tiret { transform-origin: 0 50%; animation: marque-tiret .45s cubic-bezier(.65, 0, .35, 1) .4s backwards; }
  @keyframes marque-point { from { transform: scale(0); } }
  @keyframes marque-tiret { from { transform: scaleX(0); } }
}

.entete__lieu {
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gris);
  white-space: nowrap;
}

.entete__nav { width: 100%; border-top: 1px solid var(--trait-leger); }
.nav {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
}
.nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  min-width: 44px;
  justify-content: center;
  padding-inline: 2px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover { color: var(--rouge); }
.nav__contact { color: var(--rouge); }

@media (min-width: 760px) {
  .entete { top: 0; }
  .entete__in { flex-wrap: nowrap; min-height: var(--entete); }
  .entete__lieu { margin-right: auto; padding-left: 20px; border-left: 1px solid var(--trait-leger); }
  .entete__nav { width: auto; border-top: 0; }
  .nav { display: flex; gap: 8px; }
  .nav a { padding-inline: 12px; }
  .nav .nav__contact {
    --survol: var(--rouge);
    background-color: var(--encre);
    color: #fff;
    padding-inline: 20px;
    margin-left: 8px;
  }
  .nav .nav__contact:is(:hover, :focus-visible) { color: #fff; }
}

/* Sélecteur de langue (FR | DE). Sur téléphone, il occupe la ligne du nom, à droite ;
   sur écran large, il précède la navigation. Le lieu cède la place quand elle manque. */
.langues { margin-left: auto; margin-right: -8px; }
.langues__liste { display: flex; align-items: center; }
.langues__liste li { display: flex; align-items: center; }
.langues__liste li + li::before {
  content: "";
  width: 1px;
  height: 14px;
  background: #9a9a9a;
}
.langues a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: 8px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--gris);
  text-decoration: none;
}
.langues a:hover { color: var(--rouge); }
.langues a[aria-current] {
  color: var(--encre);
  text-decoration: underline;
  text-decoration-color: var(--rouge);
  text-decoration-thickness: 2px;
  text-underline-offset: .4em;
}
@media (max-width: 579px) {
  .entete__lieu { display: none; }
}
@media (min-width: 760px) {
  .langues { margin-left: 0; margin-right: 0; }
}
@media (min-width: 760px) and (max-width: 1119px) {
  .entete__lieu { display: none; }
  .langues { margin-left: auto; }
}

/* Allemand : césure dans le texte courant (mots longs seulement), jamais dans les titres
   ni les adresses. Le titre du haut de page, plus long qu'en français, garde ses deux lignes. */
html:lang(de) body { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
.insecable { white-space: nowrap; } /* « E-Mail » ne se coupe pas après « E- » */
html:lang(de) :is(h1, h2, .cas h3, .marque, .entete__lieu, .nav, .langues, .vitrine, .tarif__prix, .contact__adresse, a[href^="mailto:"]) {
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* ---------- Haut de page ---------- */

/* --h1 : taille du titre. Chaque ligne doit tenir entière dans sa colonne ; l'allemand,
   plus long, est plus petit. */
.hero {
  --h1: clamp(3.6rem, 19vw, 9.25rem);
  display: grid;
  gap: 48px;
  padding-top: 40px;
  padding-bottom: var(--bloc);
}
html:lang(de) .hero { --h1: clamp(2.75rem, 14.6vw, 8rem); }
@media (min-width: 960px) {
  .hero { --h1: min(12vw, 9.25rem); }
  html:lang(de) .hero { --h1: min(8.6vw, 8rem); }
}
.hero h1 { font-size: var(--h1); }

h1 {
  font-weight: 800;
  font-stretch: var(--etroit);
  font-size: clamp(3.6rem, 19vw, 9.25rem);
  line-height: .86;
  letter-spacing: -.012em;
  margin-bottom: 28px;
}
.h1__ligne { display: block; }
.nom {
  text-decoration: underline;
  text-decoration-color: var(--rouge);
  text-decoration-thickness: .085em;
  text-underline-offset: .07em;
  text-decoration-skip-ink: none;
}

.chapeau {
  max-width: 32em;
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.5;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 24px;
  border: 2px solid var(--encre);
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
}
/* Survol : le fond (--survol) monte depuis le bas, et ressort par le haut (voir « Mouvement »). */
.bouton:is(:hover, :focus-visible) { color: #fff; }
@media (max-width: 519px) {
  .actions .bouton { flex: 1 1 100%; }
}
.bouton--plein { --survol: var(--rouge); background-color: var(--encre); color: #fff; }
.bouton--plein:is(:hover, :focus-visible) { border-color: var(--rouge); }

.rassure {
  margin-top: 18px;
  font-size: .9375rem;
  color: var(--gris);
}

/* La vitrine : un vrai site d'exemple (modules/site/propositions/vitrines, en captures WebP), dans
   une fenêtre de navigateur, à son adresse, et le même sur téléphone. Avec l'animation (anim.js),
   il passe d'un métier à l'autre (salon, garage, boulangerie) ; sans elle, le salon reste affiché.
   Tout y est décoratif (aria-hidden). Les tailles suivent la largeur de la vitrine (unités cqi) et
   chaque exemple est posé en absolu dans une scène de taille fixe.
   Le prix y est collé en étiquette ; le grand prix est dans la section Prix. */
.vitrine {
  --deborde: 22px; /* la moitié de l'étiquette, qui déborde sous la fenêtre */
  --adresse: clamp(1rem, 4.4cqi, 1.5rem); /* taille de l'adresse (résolue dans la vitrine) */
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--deborde);
}
.fenetre {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 2px solid var(--encre);
  background: var(--blanc);
}
.fenetre__barre {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 4cqi;
  padding: 10px 44px 10px 3cqi; /* à droite, la place du bouton pause */
  border-bottom: 2px solid var(--encre);
}
.fenetre__boutons { display: flex; gap: 6px; flex: none; }
.fenetre__boutons span { width: 10px; height: 10px; border: 2px solid var(--encre); }
@container (max-width: 359px) {
  .fenetre__boutons { display: none; } /* petit téléphone : l'adresse d'abord */
}
.fenetre__adresse {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  overflow: hidden;
  background: var(--voile);
  font-weight: 700;
  font-size: var(--adresse);
  line-height: 1.2;
  white-space: nowrap;
}
.fenetre__nom {
  text-decoration: underline;
  text-decoration-color: var(--rouge);
  text-decoration-thickness: .12em;
  text-underline-offset: .16em;
  text-decoration-skip-ink: none;
}
/* Chargement de la page suivante : un trait rouge court sur le bas de la barre. */
.fenetre__charge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--rouge);
  transform: scaleX(0);
  transform-origin: 0 50%;
  visibility: hidden;
}

/* Pause des exemples (WCAG 2.2.2) : hors de la fenêtre décorative, posé sur le bout droit de la
   barre d'adresse comme un bouton de navigateur. Affiché seulement quand les métiers défilent. */
.vitrine__pause {
  position: absolute;
  z-index: 3;
  top: 2px;
  right: 2px;
  display: grid;
  place-items: center;
  width: 44px;
  height: calc(36px + 1.2 * var(--adresse));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gris);
  cursor: pointer;
}
.vitrine__pause[hidden] { display: none; }
.vitrine__pause::before {
  content: "";
  width: 10px;
  height: 12px;
  background: linear-gradient(to right, currentColor 0 3px, transparent 3px 7px, currentColor 7px);
}
.vitrine__pause[aria-pressed="true"]::before {
  width: 0;
  height: 0;
  border-left: 11px solid currentColor;
  border-block: 7px solid transparent;
  background: none;
}
.vitrine__pause:hover { color: var(--encre); }
.vitrine__pause:focus-visible { outline-offset: -6px; }

/* La scène : la capture du site d'exemple, posée en haut et à pleine largeur, comme dans un vrai
   navigateur (si la fenêtre est plus haute que l'écran d'accueil, on voit le début de la suite).
   Téléphone (moins de 480 px) : la version téléphone du site, lisible presque à taille réelle,
   jusqu'aux horaires (707 px : l'étiquette couvre le vide avant le bouton du salon).
   Tablette : la version ordinateur, en 16:10.5. Écran large : la fenêtre prend la hauteur du
   texte (voir plus bas). Les mêmes media queries choisissent l'image dans index.html. */
.scene {
  position: relative;
  aspect-ratio: 390 / 707;
  overflow: hidden;
  background: var(--blanc);
}
@media (min-width: 480px) and (max-width: 959px) {
  .scene { aspect-ratio: 1600 / 1053; }
}

/* Un exemple de site : une capture (décorative), ou plusieurs l'une sur l'autre, dans une scène
   de taille fixe : changer de métier ne déplace jamais rien dans la page. */
.site {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--fond, var(--blanc));
}
.site[hidden] { display: none; }
.site picture { display: block; flex: 1 1 0; min-height: 0; }
.site img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

/* Le téléphone : le même site, en version téléphone, posé sur le coin bas droit de la fenêtre
   (les trois sites ont leurs informations à gauche : il couvre la photo, pas les horaires).
   Seulement quand la vitrine est assez large pour qu'on le lise comme un téléphone. */
.telephone { display: none; }
@media (min-width: 480px) {
  .telephone {
    display: block;
    position: absolute;
    z-index: 2;
    right: max(-6cqi, 8px - var(--marge)); /* déborde à droite, dans la marge : il ne cache que le coin de la photo */
    bottom: calc(var(--deborde) - 15cqi); /* assez bas pour laisser voir la bande des prix du garage */
    height: 40%;
    aspect-ratio: 9 / 18.6;
    padding: 1.1cqi;
    border-radius: 4.2cqi;
    background: var(--encre);
    box-shadow: 0 1.2cqi 3.6cqi rgba(17, 17, 17, .22);
  }
}
.telephone__ecran {
  position: relative;
  container: ecran / inline-size;
  height: 100%;
  overflow: hidden;
  border-radius: 3.2cqi;
  background: var(--blanc);
}
.telephone__ecran::after { /* l'encoche */
  content: "";
  position: absolute;
  z-index: 5;
  top: 2.2%;
  left: 50%;
  width: 30%;
  height: 3%;
  border-radius: 99px;
  background: var(--encre);
  transform: translateX(-50%);
}
.telephone .site { padding-top: 11cqi; } /* la barre d'état, à la couleur du site */
.telephone .site:nth-child(1) { --fond: #0f2239; } /* salon : bleu nuit */
.telephone .site:nth-child(2) { --fond: #131416; } /* garage : noir d'atelier */
.telephone .site:nth-child(3) { --fond: #f5ede0; } /* boulangerie : farine */

.etiquette {
  position: absolute;
  z-index: 3;
  left: 5cqi;
  bottom: var(--deborde);
  transform: translateY(50%);
  padding: 10px 16px;
  background: var(--rouge);
  color: #fff;
  font-size: clamp(1rem, 3.4cqi, 1.1875rem);
  line-height: 1.25;
  white-space: nowrap;
}
.etiquette strong { font-weight: 800; }

@media (min-width: 960px) {
  .hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: stretch;
    padding-top: 64px;
  }
  .hero__texte { grid-column: 1 / 8; }
  /* La fenêtre prend la hauteur du texte : son haut s'aligne sur les capitales du titre,
     son bas sur la dernière ligne. */
  .vitrine {
    --deborde: 0px;
    grid-column: 8 / 13;
    contain: size;
    margin-top: calc(var(--h1) * .05);
  }
  .scene { flex: 1 1 0; aspect-ratio: auto; }
}

/* ---------- Votre situation ---------- */

/* Trois cas, chacun sous son filet. Sur écran large, côte à côte (4 colonnes de la grille
   chacun) ; une sous-grille aligne les textes quand un titre prend deux lignes. */
.situation { padding-bottom: var(--bloc); }
.cas { display: grid; }
.cas__item {
  padding: 20px 0 28px;
  border-top: 2px solid var(--encre);
}
.cas__item:last-child { padding-bottom: 0; }
.cas__item h3 {
  margin-bottom: 12px;
  font-weight: 800;
  font-stretch: var(--etroit);
  font-size: clamp(2rem, 8.4vw, 2.625rem);
  line-height: .95;
  letter-spacing: -.005em;
}
.cas__item p { color: #333; max-width: 30em; }
@media (min-width: 960px) {
  .cas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto;
    column-gap: 24px;
  }
  .cas__item {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
    padding: 24px 0 0;
  }
}

/* ---------- Bande « à vous » ---------- */

.avous {
  background: var(--voile);
  border-top: 2px solid var(--encre);
  border-bottom: 2px solid var(--encre);
}
.avous__in {
  display: grid;
  gap: 32px;
  padding-block: var(--bloc);
}
.avous__titre {
  font-weight: 800;
  font-stretch: var(--etroit);
  font-size: clamp(2.5rem, 10vw, 5rem);
  line-height: .92;
  letter-spacing: -.01em;
}
.lignes { border-top: 2px solid var(--encre); }
.ligne {
  display: grid;
  gap: 4px;
  padding: 16px 0 18px;
  border-bottom: 1px solid #bdbdbb;
}
.ligne dt { font-weight: 700; font-size: 1.125rem; }
@media (min-width: 700px) {
  .ligne { grid-template-columns: 11em 1fr; gap: 24px; }
}
@media (min-width: 960px) {
  .avous__in {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
  }
  .avous__titre { grid-column: 1 / 6; }
  .avous__texte { grid-column: 6 / 13; }
  /* Les définitions s'alignent sur la colonne 8, comme la fenêtre du haut de page. */
  .ligne { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .ligne dt { grid-column: 1 / 3; }
  .ligne dd { grid-column: 3 / 8; }
}

/* ---------- Sections numérotées ---------- */

.section { padding-block: var(--bloc); }
.section + .section {
  background: linear-gradient(var(--encre), var(--encre)) center top / calc(100% - 2 * var(--marge)) 2px no-repeat;
}

.tete {
  display: grid;
  gap: 12px;
  margin-bottom: 40px;
}
.tete__num {
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .08em;
  color: var(--rouge);
}
.tete h2 {
  font-weight: 800;
  font-stretch: var(--etroit);
  font-size: clamp(2.75rem, 12vw, 6.5rem);
  line-height: .9;
  letter-spacing: -.01em;
}
@media (min-width: 960px) {
  .tete { gap: 16px; margin-bottom: 56px; }
}

/* Étapes */
.etapes { display: grid; gap: 0; counter-reset: none; }
.etape {
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: 16px;
  padding: 20px 0 24px;
  border-top: 2px solid var(--encre);
}
.etape__n {
  grid-row: span 2;
  font-weight: 800;
  font-stretch: 62%;
  font-size: 4.5rem;
  line-height: .8;
  color: var(--rouge);
}
.etape h3 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 8px;
}
.etape p { color: #333; }
.etape:last-child h3 { color: var(--rouge); }

@media (min-width: 700px) {
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}
@media (min-width: 1100px) {
  .etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .etape { display: block; padding-block: 24px 0; } /* la marge de la section suffit en bas */
  .etape__n { display: block; font-size: 7.5rem; margin-bottom: 28px; }
  .etape p { max-width: 22em; }
}

/* Prix */
.tarifs { display: grid; gap: 16px; }
.tarif {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 28px;
  border: 2px solid var(--encre);
  background: var(--blanc);
}
.tarif--rouge { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.tarif__nom {
  padding-bottom: 12px;
  border-bottom: 2px solid currentColor;
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.tarif__prix {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: .18em;
  margin-top: 24px;
  font-weight: 800;
  font-stretch: 62%;
  line-height: .8;
}
.tarif__chiffre { font-size: clamp(6rem, 28vw, 11rem); letter-spacing: -.02em; }
.tarif__devise { font-size: clamp(2rem, 8vw, 3.25rem); font-stretch: 75%; }
.tarif__fois { margin-top: 14px; font-size: 1.25rem; font-weight: 600; }
.tarif__points { margin-top: 20px; display: grid; gap: 6px; font-size: .9375rem; }
.tarif__points li { padding-left: 18px; position: relative; }
.tarif__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  background: currentColor;
}
@media (min-width: 700px) {
  .tarifs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .tarif { padding: 28px 32px 32px; }
  .tarif__chiffre { font-size: clamp(6rem, 14vw, 12rem); }
}

.bareme { margin-top: 40px; border-top: 2px solid var(--encre); }
.bareme__ligne {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
  row-gap: 4px;
  padding: 18px 0;
  border-bottom: 1px solid var(--trait-leger);
}
.bareme__ligne dt { font-weight: 700; font-size: 1.125rem; }
.bareme__prix {
  grid-column: 2;
  grid-row: 1;
  font-weight: 800;
  font-size: 1.125rem;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bareme__desc { grid-column: 1 / 3; color: #333; max-width: 40em; }
@media (min-width: 760px) {
  .bareme__ligne { grid-template-columns: 14em 1fr auto; column-gap: 24px; align-items: baseline; }
  .bareme__desc { grid-column: 2; grid-row: 1; }
  .bareme__prix { grid-column: 3; font-size: 1.375rem; }
}
@media (min-width: 960px) {
  /* Même grille que les étapes : la description part de la colonne 4. */
  .bareme__ligne { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bareme__ligne dt { grid-column: 1 / 4; }
  .bareme__desc { grid-column: 4 / 10; }
  .bareme__prix { grid-column: 10 / 13; }
}

.paiement {
  margin-top: 24px;
  padding: 16px 20px;
  border-left: 6px solid var(--rouge);
  background: var(--voile);
  font-size: 1.0625rem;
}

.prix-suite { display: grid; gap: 48px; margin-top: 64px; }
.petit-titre {
  margin-bottom: 16px;
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.inclus__liste { border-top: 2px solid var(--encre); }
.inclus__liste li {
  position: relative;
  padding: 12px 0 12px 26px;
  border-bottom: 1px solid var(--trait-leger);
}
.inclus__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.2em;
  width: 10px;
  height: 10px;
  background: var(--rouge);
}

/* L'option Gardien : même intitulé que « Compris dans le prix », la boîte part du même filet. */
.gardien { align-self: start; }
.gardien__bandeau {
  margin-bottom: 16px;
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.gardien__corps { padding: 20px 20px 24px; border: 2px solid var(--encre); background: var(--blanc); }
.gardien__nom {
  font-weight: 800;
  font-stretch: var(--etroit);
  font-size: 3rem;
  line-height: .95;
}
.gardien__prix { margin-top: 10px; font-size: 1.125rem; }
.gardien__prix strong { font-weight: 800; }
.gardien__ou { color: var(--gris); }
.gardien__liste { margin-top: 18px; border-top: 1px solid var(--encre); }
.gardien__liste li { padding: 10px 0; border-bottom: 1px solid var(--trait-leger); }
.gardien__note { margin-top: 16px; font-weight: 700; }

@media (min-width: 960px) {
  .prix-suite { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .inclus { grid-column: 1 / 7; }
  .gardien { grid-column: 7 / 13; }
  .gardien__corps { padding: 24px 28px 28px; }
}

/* Questions */
.faq { border-top: 2px solid var(--encre); }
.faq__item {
  display: grid;
  gap: 8px;
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--trait-leger);
}
.faq__item h3 { font-size: 1.1875rem; font-weight: 700; line-height: 1.3; }
.faq__item p { color: #333; max-width: 38em; }
@media (min-width: 960px) {
  .faq__item {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: baseline;
    padding: 28px 0 30px;
  }
  .faq__item h3 { grid-column: 1 / 6; font-size: 1.3125rem; }
  .faq__item p { grid-column: 7 / 13; }
}

/* Contact */
.contact { background: var(--rouge); color: #fff; }
.contact :focus-visible { outline-color: #fff; }
.contact__in { padding-block: var(--bloc); }
.tete--inverse .tete__num { color: #fff; }

/* Deux voies côte à côte, qui partent du même filet blanc : le formulaire, puis l'adresse. */
.contact__grille { display: grid; gap: 64px; }

.demande { padding-top: 24px; border-top: 2px solid #fff; }
.demande__titre {
  margin-bottom: 28px;
  font-weight: 800;
  font-stretch: var(--etroit);
  font-size: clamp(2.25rem, 9vw, 3.25rem);
  line-height: .95;
  letter-spacing: -.005em;
}
.champ + .champ { margin-top: 20px; }
.champ label { display: block; margin-bottom: 6px; font-weight: 700; }
.champ__facultatif { font-weight: 400; }
.champ input,
.champ textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 12px 14px;
  border: 2px solid #fff;
  border-radius: 0;
  background: #fff;
  color: var(--encre);
  font: inherit;
  font-size: 1.0625rem;
  line-height: 1.4;
}
.champ textarea { min-height: 132px; resize: vertical; }
.champ ::placeholder { color: #6b6b6b; opacity: 1; }
.champ :user-invalid { border-color: var(--encre); }
/* Champ piège pour les robots : hors écran, hors tabulation, ignoré des lecteurs d'écran. */
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.demande__envoi {
  width: 100%;
  margin-top: 28px;
  --survol: #fff;
  background-color: var(--encre);
  border-color: var(--encre);
  color: #fff;
  font-family: inherit;
  cursor: pointer;
}
.demande__envoi:is(:hover, :focus-visible) { border-color: #fff; color: var(--encre); }
.demande__note { margin-top: 14px; font-size: .9375rem; }

.contact__adresse {
  padding: 24px 0 28px;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  font-weight: 800;
  font-stretch: var(--etroit);
  font-size: clamp(2.15rem, 11.4vw, 8.5rem);
  line-height: 1;
  letter-spacing: -.012em;
  overflow-wrap: anywhere;
}
.contact__adresse a {
  display: inline-block;
  text-decoration: underline;
  text-decoration-thickness: .05em;
  text-underline-offset: .12em;
}
/* Son trait de survol (voir « Mouvement ») : 0,955 em = ligne de base (0,835 em dans une boîte
   de 1 em) + décalage du soulignement (0,12 em) ; le rembourrage, compensé par la marge, laisse
   la place au trait sans changer la ligne. */
.contact__adresse a { --trait-y: .955em; --trait-ep: .09em; --trait-pad: .1em; margin-bottom: -.1em; }
.contact__conseil { margin-top: 24px; font-size: 1.1875rem; max-width: 28em; }
.contact__conseil p + p { margin-top: 12px; }
.retrait { margin-top: 40px; border: 2px solid #fff; padding: 20px 20px 22px; }
.retrait h3 { font-size: 1.1875rem; font-weight: 700; line-height: 1.3; margin-bottom: 10px; }
.retrait p + p { margin-top: 10px; }
.retrait a { font-weight: 700; }
@media (min-width: 640px) {
  .demande__envoi { width: auto; }
}
@media (min-width: 960px) {
  .contact__grille { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .demande { grid-column: 1 / 6; }
  .contact__direct { grid-column: 7 / 13; }
  .contact__adresse { font-size: min(4.6vw, 4.25rem); }
  .retrait { padding: 24px 28px 26px; }
}

/* Pied de page */
.pied { border-top: 2px solid var(--encre); }
.pied__in {
  display: grid;
  gap: 12px;
  padding-top: 32px;
  padding-bottom: 40px;
}
.pied__marque {
  display: flex;
  align-items: center;
}
.pied__signature { color: var(--gris); }
.pied__liens { display: flex; flex-wrap: wrap; column-gap: 24px; }
.pied__liens a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 960px) {
  .pied__in { grid-template-columns: auto 1fr auto; align-items: center; column-gap: 32px; }
}

/* ---------- Pages juridiques et 404 ---------- */

.page { padding-top: 48px; padding-bottom: 88px; }
.page__titre {
  font-size: clamp(3rem, 13vw, 7rem);
  margin-bottom: 36px;
}
/* Pages de retour du formulaire : une phrase en titre, une ligne, un lien. */
.retour__titre {
  max-width: 13em;
  font-size: clamp(2.75rem, 9vw, 6rem);
  line-height: .92;
  text-wrap: balance;
}
.retour .chapeau a { font-weight: 700; }
.texte { max-width: 44em; }
.texte h2 {
  margin-top: 40px;
  margin-bottom: 10px;
  padding-top: 16px;
  border-top: 2px solid var(--encre);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
}
.texte p + p, .texte p + ul, .texte ul + p { margin-top: 12px; }
.texte ul li { position: relative; padding-left: 22px; margin-top: 6px; }
.texte ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 8px;
  height: 8px;
  background: var(--rouge);
}
.a-completer {
  margin-top: 12px;
  padding: 16px 18px;
  border: 2px dashed var(--rouge);
  background: #fff5f4;
  font-weight: 700;
}
.maj { margin-top: 40px; color: var(--gris); font-size: .9375rem; }

.introuvable {
  display: grid;
  gap: 24px;
  padding-top: 56px;
  padding-bottom: 96px;
}
/* 404 bilingue : le Worker sert la même page pour /de/, la partie allemande suit la française. */
.introuvable__autre {
  display: grid;
  gap: 24px;
  margin-top: 16px;
  padding-top: 32px;
  border-top: 2px solid var(--encre);
}
.introuvable__titre {
  font-weight: 800;
  font-stretch: var(--etroit);
  font-size: clamp(2.5rem, 9vw, 4.5rem);
  line-height: .9;
  letter-spacing: -.012em;
}
.introuvable__code {
  font-weight: 800;
  font-stretch: 62%;
  font-size: clamp(8rem, 40vw, 18rem);
  line-height: .8;
  color: var(--rouge);
}

/* ---------- Mouvement ---------- */

/* Survols et focus. Ils marchent sans JavaScript ; seules les transitions disparaissent quand
   l'utilisateur demande moins de mouvement. */

/* Liens : un trait de 2 px se tire de gauche à droite par-dessus le soulignement, puis repart vers
   la droite. 1,06 em = hampe d'Archivo (0,88 em) + décalage du soulignement (0,18 em) ; le
   rembourrage bas agrandit la zone peinte du lien sans changer la ligne. */
:is(main, footer) a:not([class]) {
  padding-bottom: var(--trait-pad, .15em);
  background: linear-gradient(currentColor, currentColor) no-repeat 100% var(--trait-y, 1.06em) / 0 var(--trait-ep, 2px);
}
:is(main, footer) a:not([class]):is(:hover, :focus-visible) {
  background-position-x: 0;
  background-size: 100% var(--trait-ep, 2px);
}
.pied__liens a { --trait-y: calc(50% + .52em); --trait-pad: 0; }

/* Navigation : même trait, sous le mot (hors marges du lien). */
.nav a {
  background: linear-gradient(currentColor, currentColor) no-repeat 100% calc(50% + .66em) / 0 2px;
  background-origin: content-box;
}
.nav a:is(:hover, :focus-visible) { background-position-x: 0; background-size: 100% 2px; }

/* Boutons : inversion nette, le fond monte depuis le bas et ressort par le haut. */
.bouton {
  background-image: linear-gradient(var(--survol, var(--encre)), var(--survol, var(--encre)));
  background-repeat: no-repeat;
  background-origin: border-box;
  background-position: 0 0;
  background-size: 100% 0;
}
.bouton:is(:hover, :focus-visible) { background-position: 0 100%; background-size: 100% 100%; }
@media (min-width: 760px) {
  .nav .nav__contact {
    background-image: linear-gradient(var(--survol), var(--survol));
    background-origin: border-box;
    background-position: 0 0;
    background-size: 100% 0;
  }
  .nav .nav__contact:is(:hover, :focus-visible) { background-position: 0 100%; background-size: 100% 100%; }
}

/* Lignes du barème et questions : un filet rouge glisse sous la ligne survolée. */
@media (hover: hover) {
  .bareme__ligne, .faq__item {
    background: linear-gradient(var(--rouge), var(--rouge)) no-repeat 100% 100% / 0 2px border-box;
  }
  .bareme__ligne:hover, .faq__item:hover { background-position-x: 0; background-size: 100% 2px; }
}

/* Champs : cadre noir à l'intérieur, anneau blanc à l'extérieur (couleur posée par .contact). */
.champ :is(input, textarea):focus-visible { border-color: var(--encre); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  :is(main, footer) a:not([class]), .bareme__ligne, .faq__item {
    transition: background-size .3s cubic-bezier(.65, 0, .35, 1);
  }
  .nav a { transition: background-size .3s cubic-bezier(.65, 0, .35, 1), color .15s ease; }
  .bouton, .nav .nav__contact {
    transition: background-size .25s cubic-bezier(.65, 0, .35, 1), color .2s ease, border-color .2s ease;
  }
  .champ :is(input, textarea) { transition: border-color .15s ease, outline-offset .15s ease; }
}

/* Apparitions (GSAP, orchestré par /anim.js). Ces états de départ ne valent qu'avec la classe
   « anime », posée par le script sur <html> : sans JavaScript, ou avec moins de mouvement, tout
   est visible. Le titre n'est jamais masqué. Aucune de ces règles ne change la mise en page
   (opacité, transformations, fonds seulement). */
:root { --filet: var(--encre); }
.contact { --filet: #fff; }

@media screen and (prefers-reduced-motion: no-preference) {
  .anime :is(.rv, .rv-h, .rv-f > *) { visibility: hidden; }

  /* Filets : la bordure devient un fond de 2 px dont GSAP fait varier la longueur (--f). */
  .anime :is(.rv-t, .rv-f, .rv-n) { --f: 0; }
  .anime :is(.rv-t, .rv-f):not(.section) {
    border-top-color: transparent;
    background: linear-gradient(var(--filet), var(--filet)) no-repeat 0 0 / calc(var(--f) * 100%) 2px border-box;
  }
  .anime .section.rv-t {
    background-position: var(--marge) 0;
    background-size: calc(var(--f) * (100% - 2 * var(--marge))) 2px;
  }

  /* Soulignement rouge du titre : le vrai soulignement reste ; un cache couleur papier, posé
     sous la ligne de base (0,905 em > hampe 0,88 em ; « votre nom » et « Ihren Namen » n'ont
     pas de jambage), se retire vers la droite : le trait se découvre de gauche à droite. */
  .anime .rv-n { position: relative; }
  .anime .rv-n::after {
    content: "";
    position: absolute;
    left: -.03em;
    right: -.03em;
    top: .905em;
    height: .2em;
    background: var(--papier);
    transform: scaleX(calc(1 - var(--f)));
    transform-origin: 100% 0;
    pointer-events: none;
  }

  /* La fenêtre : l'adresse attend d'être tapée, le site et l'étiquette d'apparaître. */
  .anime .rv-v:not(.pret) :is(.fenetre__adresse, .fenetre__nom) { color: transparent; text-decoration-color: transparent; }
  .anime .rv-v .etiquette { visibility: hidden; }
  /* Le premier site est là dès le premier affichage (jamais de fenêtre vide) : ses blocs se posent
     par une simple animation CSS, le téléphone un instant après. */
  .anime .rv-v :is(.scene, .telephone__ecran) > .site:first-child > * { animation: site-entre .5s cubic-bezier(.2, .7, .2, 1) both; }
  .anime .rv-v :is(.scene, .telephone__ecran) > .site:first-child > :nth-child(2) { animation-delay: .06s; }
  .anime .rv-v :is(.scene, .telephone__ecran) > .site:first-child > :nth-child(n + 3) { animation-delay: .12s; }
  .anime .rv-v .telephone { animation: telephone-entre .6s cubic-bezier(.2, .7, .2, 1) .25s both; }
  @keyframes site-entre { from { opacity: 0; transform: translateY(8px); } }
  @keyframes telephone-entre { from { opacity: 0; transform: translateY(14px); } }
  /* Le curseur de l'adresse : un trait qui ne prend aucune place dans la ligne. */
  .curseur {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    margin-right: -2px;
    vertical-align: -.22em;
    background: var(--encre);
    visibility: hidden;
    pointer-events: none;
  }

  /* Masques de SplitText : un peu plus grands que la ligne, pour ne pas rogner accents et
     jambages. Chiffres : rembourrage compensé par la marge (la ligne ne bouge pas). */
  .t-l-mask { overflow-clip-margin: .25em; }
  .n-c-mask { padding-block: .15em; margin-block: -.15em; }
}

@media print {
  .entete { position: static; }
  .contact, .tarif--rouge, .etiquette { background: #fff; color: #000; }
  .anime [style*="visibility"], .anime [style*="opacity"] { visibility: visible !important; opacity: 1 !important; }
  .curseur, .vitrine__pause { display: none; }
}

/* Appel à l'action sous les prix (24.09) */
.appel { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.appel__bouton { font-size: 1.0625rem; padding-inline: 28px; }
.appel__texte { margin: 0; max-width: 44ch; color: var(--gris, #555); }
@media (max-width: 600px) { .appel__bouton { flex: 1 1 100%; } }

/* « gratuite » seulement quand le bouton tient sur une ligne ; en dessous de 360 px, la navigation
   passe un cran plus petit pour tenir sur la largeur. */
@media (max-width: 480px), (min-width: 760px) and (max-width: 799px) { .nav__plus { display: none; } }
@media (max-width: 359px) { .nav a { font-size: .875rem; } }

/* Régions servies, fin de « Votre situation » (24.09) */
.regions { margin: 28px 0 0; max-width: 72ch; color: var(--gris); }
.regions a { color: inherit; }