/* © 2026 TJ GROUP. Tous droits réservés. */

/* ==========================================================================
   1. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--fond); }
body {
  margin: 0;
  background: var(--fond);
  color: var(--gris);
  font-family: var(--police);
  font-size: var(--t-courant);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h2, h3 { font-weight: 400; line-height: 1.1; text-wrap: balance; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--violet-clair); outline-offset: 3px; }
.chiffres { font-variant-numeric: tabular-nums; }

.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: var(--gouttiere-g); top: calc(8px + env(safe-area-inset-top, 0px)); z-index: 50; background: var(--texte); color: var(--fond); padding: 8px 12px; }

/* Conteneur unique : porte la gouttière latérale de toute la page */
.page { padding-left: var(--gouttiere-g); padding-right: var(--gouttiere-d); }

/* Bande de la couleur du fond sous la barre d'état de l'iPhone (heure,
   batterie) : sans elle, le contenu, en défilant, resterait visible derrière
   l'heure, au-dessus de la navigation collée. Hauteur nulle sur les appareils
   sans zone réservée en haut. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--fond);
  z-index: 30;
  pointer-events: none;
}

/* Libellé de section entre parenthèses : « ( À propos ) » */
.libelle { font-size: var(--t-etiquette); color: var(--gris-clair); letter-spacing: 0.02em; white-space: nowrap; }

/* Étiquettes grises */
.etiquettes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.etiquettes li {
  background: var(--etiquette);
  color: var(--etiquette-texte);
  font-size: var(--t-etiquette);
  line-height: 1;
  padding: 6px 10px 5px;
  border-radius: 2px;
  white-space: nowrap;
}
/* L'étiquette « offre » porte le filet violet de la marque */
.etiquettes .etiquette--offre { box-shadow: inset 2px 0 0 var(--violet-clair); }

/* ==========================================================================
   2. TITRE GÉANT + NAVIGATION
   Le titre est ajusté à la largeur exacte de la page par le script
   (fonction ajusterTitres). La taille en vw sert d'attente avant la police.
   ========================================================================== */
.marque-geante {
  display: flex;
  align-items: center;
  width: max-content;
  max-width: none;
  font-size: 15.5vw;
  font-weight: 500;
  line-height: 0.82;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--gris-clair);
  white-space: nowrap;
  /* Le J de Jost descend sous la ligne de base : on lui réserve sa place
     en bas, pour qu'il ne soit jamais coupé ni recouvert par le menu. */
  padding-block: 0.06em 0.24em;
}
.marque-geante__tj { font-weight: 600; color: var(--texte); }
/* Le filet vertical violet : signature du lockup TJ Group */
.marque-geante__filet {
  display: inline-block;
  width: 0.055em;
  height: 0.7em;
  margin-inline: 0.13em 0.11em;
  background: var(--violet);
  border-radius: 0.02em;
}
.titre-zone { overflow: hidden; }   /* sécurité : jamais de débordement latéral */
.titre-zone > a { display: block; color: inherit; }   /* titre cliquable (page Tarifs) */

/* Navigation étalée sur toute la largeur, collée en haut au défilement */
.nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-block: 14px 12px;
  background: var(--fond);
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  color: var(--gris-clair);
}
.nav a { transition: color .2s; }
.nav a:hover { color: var(--texte); }
/* Page en cours (ex. « Tarifs » sur la page des tarifs) */
.nav a[aria-current="page"] { color: var(--texte); box-shadow: inset 0 -2px 0 var(--violet-clair); }
@media (max-width: 380px) { .nav { gap: 6px; font-size: 0.9rem; } }
/* Filet violet de progression de lecture (largeur pilotée par le script) */
.nav::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--violet);
  transform-origin: left;
  transform: scaleX(var(--progression, 0));
}

/* ==========================================================================
   3. INTRO
   ========================================================================== */
.intro {
  display: grid;
  gap: 28px;
  /* Espace au-dessus de l'intro : proportionnel à la hauteur de l'écran, mais
     plafonné par la largeur, pour éviter un grand vide sur les écrans étroits
     et très hauts (écran de l'iPhone Duo partagé entre deux applications côte à côte). */
  padding-block: clamp(96px, min(26vh, 60vw), 320px) clamp(56px, 9vh, 110px);
}

/* Photo du poste de travail en fond de l'intro, sur toute la largeur de
   l'écran (on annule la gouttière de .page). Le texte reste dans la gouttière.
   La section prend la hauteur de la photo (proportions 3:2) pour la montrer
   en entier sur ordinateur, sans dépasser la hauteur de l'écran. */
.intro {
  position: relative;
  isolation: isolate;               /* la photo reste derrière le texte */
  margin-left: calc(-1 * var(--gouttiere-g));
  margin-right: calc(-1 * var(--gouttiere-d));
  padding-left: var(--gouttiere-g);
  padding-right: var(--gouttiere-d);
  min-height: clamp(520px, 66.7vw, 92svh);
  align-content: end;               /* texte en bas à gauche, sur la partie sombre */
}
.intro__photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.intro__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  /* Discrétion de la photo : 1 = pleine, 0 = invisible. Réglage à ajuster ici. */
  opacity: 0.55;
}
/* Voile sombre à gauche et en bas : le texte reste lisible sur la photo */
.intro__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 10, 12, .72) 0%, rgba(10, 10, 12, .35) 38%, rgba(10, 10, 12, 0) 60%),
    linear-gradient(0deg, rgba(10, 10, 12, .8) 0%, rgba(10, 10, 12, 0) 45%);
}
/* Téléphone : la photo n'est plus en fond mais affichée EN ENTIER, sur toute
   la largeur de l'écran (proportions 3:2, sans recadrage), juste au-dessus
   du texte. Ses bords sont déjà fondus dans le noir : le voile est inutile. */
@media (max-width: 700px) {
  .intro {
    min-height: 0;
    padding-top: 12px;
  }
  .intro__photo {
    position: relative;
    inset: auto;
    z-index: auto;
    aspect-ratio: 3 / 2;
    margin-left: calc(-1 * var(--gouttiere-g));
    margin-right: calc(-1 * var(--gouttiere-d));
  }
  .intro__photo::after { content: none; }
  /* Même opacité que sur ordinateur (0,55, réglée plus haut sur .intro__photo img). */

  /* Cadrage serré : la photo est agrandie de 23 % pour que l'oreille touche
     le bord gauche et que l'écran du Mac déborde légèrement à droite.
     Repères mesurés sur la photo : bord de l'oreille à 13 % de la largeur,
     coupe à droite à 94,2 %, coupe en haut à 6 %.
       largeur  = 1 / (0,942 − 0,13)  ≈ 123,2 %
       gauche   = −0,13  × 123,2 %    ≈ −16 %
       haut     = −0,06  × 123,2 %    ≈ −7,4 %
     Les coupes haute et basse sont adoucies par un fondu (mask-image). */
  .intro__photo img {
    position: absolute;
    width: 123.2%;
    height: 123.2%;
    max-width: none;
    left: -16%;
    top: -7.4%;
  }
  .intro__photo {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 78%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 78%, transparent 100%);
  }
}

.intro__texte {
  max-width: 30ch;
  font-size: var(--t-chapo);
  font-weight: 400;
  line-height: 1.32;
  color: var(--gris-clair);
}
.intro__texte strong { font-weight: 500; color: var(--texte); }
.intro .etiquettes { justify-content: flex-start; }

/* ==========================================================================
   4. RÉALISATIONS — un « studio » par site témoin
   Le fond est un décor dessiné (dégradé + rayons de lumière + sol), pas une
   photo. Les dimensions des appareils sont en % du studio : la composition
   garde ses proportions à toutes les tailles.
   ========================================================================== */
/* La section n'a pas de marge haute : en arrivant par le menu, on laisse
   la place de la navigation collée pour que le libellé reste visible. */
#realisations { scroll-margin-top: 80px; }
.projets { display: grid; gap: var(--entre-projets); }

.projet { display: grid; gap: 12px; }
.projet__tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.projet__nom { flex: none; font-size: var(--t-projet); color: var(--gris-clair); white-space: nowrap; }
/* Petits téléphones : étiquettes resserrées pour tenir sur la ligne du nom */
@media (max-width: 420px) {
  .projet__tete { gap: 10px; }
  .projet__tete .etiquettes li { padding-inline: 7px; }
}
@media (max-width: 380px) {
  .projet__tete .etiquettes li { font-size: 0.72rem; padding-inline: 6px; }
}
.projet__pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 0.95rem;
}
.projet__pied p { max-width: 62ch; min-width: 0; }
.projet__pied span { color: var(--gris-clair); white-space: nowrap; }

/* ---- Le studio (fond) ---- */
.studio {
  --c1: var(--sauge-1); --c2: var(--sauge-2); --c3: var(--sauge-3);
  position: relative;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  overflow: hidden;
  container-type: inline-size;
  background:
    /* sol : légère cassure à 76 % de la hauteur, comme une table de prise de vue */
    linear-gradient(to bottom, transparent 76%, rgba(0,0,0,.22) 76.15%, rgba(0,0,0,.08) 100%),
    /* mur éclairé depuis le haut à gauche */
    radial-gradient(130% 110% at 22% 8%, var(--c1) 0%, var(--c2) 52%, var(--c3) 100%);
}
.studio--acier { --c1: var(--acier-1); --c2: var(--acier-2); --c3: var(--acier-3); }

/* Rayons de lumière d'une fenêtre, en biais, qui s'effacent vers la droite */
.studio::before {
  content: "";
  position: absolute;
  inset: -20% -10% -20% -30%;
  background: repeating-linear-gradient(118deg,
    var(--lumiere) 0 5cqw, transparent 5cqw 11cqw);
  -webkit-mask-image: linear-gradient(100deg, #000 10%, transparent 62%);
          mask-image: linear-gradient(100deg, #000 10%, transparent 62%);
  filter: blur(1.4cqw);
  pointer-events: none;
}

/* ---- Composition des deux appareils ---- */
.composition { position: absolute; inset: 0; }

.navigateur {
  position: absolute;
  left: 9%; top: 9%;
  width: 70%;
  border-radius: 1cqw;
  overflow: hidden;
  background: var(--fond-2);
  box-shadow: 0 3cqw 6cqw -1cqw var(--ombre), 0 0.4cqw 1cqw rgba(0,0,0,.25);
}
.navigateur__barre {
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  height: 3.2cqw;
  padding-inline: 1.2cqw;
  font-size: clamp(9px, 1.1cqw, 13px);
  color: var(--gris);
}
.navigateur__barre i { width: 0.75cqw; height: 0.75cqw; border-radius: 50%; background: var(--ligne); }
.navigateur__barre span {
  margin-inline: auto;
  padding: 0.25cqw 1.6cqw;
  border-radius: 0.5cqw;
  background: var(--fond);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

.telephone {
  position: absolute;
  right: 8%; bottom: 7%;
  width: 17%;
  padding: 0.7cqw;
  border-radius: 3cqw;
  background: #050506;
  box-shadow: 0 3cqw 5cqw -1cqw var(--ombre), inset 0 0 0 0.15cqw #2A2930;
}
.telephone .ecran { border-radius: 2.4cqw; }

/* ---- Écrans : la capture complète défile lentement de haut en bas ---- */
.ecran { position: relative; overflow: hidden; background: var(--fond-2); }
.ecran--ordinateur { aspect-ratio: 16 / 10; }
.ecran--telephone  { aspect-ratio: 9 / 19.5; }
.ecran img {
  width: 100%;
  height: auto;
  max-width: none;
  animation: defilement var(--duree, 30s) ease-in-out infinite alternate;
  animation-play-state: paused;
  will-change: transform;
}
.ecran.en-lecture img { animation-play-state: running; }
@keyframes defilement {
  0%, 6%    { transform: translateY(0); }
  94%, 100% { transform: translateY(calc(-1 * var(--course, 0px))); }
}

/* Légère avancée de la composition à l'entrée dans l'écran (navigateurs
   récents uniquement ; ailleurs la composition est simplement immobile). */
@supports (animation-timeline: view()) {
  .composition {
    animation: approche linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 45%;
  }
  @keyframes approche {
    from { transform: translateY(4%) scale(0.95); }
    to   { transform: none; }
  }
}

/* Téléphone : studio plus haut, appareils plus grands */
@media (max-width: 700px) {
  .studio { aspect-ratio: 4 / 5; }
  .navigateur { left: 6%; top: 7%; width: 88%; border-radius: 2cqw; }
  .navigateur__barre { height: 6cqw; gap: 1.2cqw; padding-inline: 2.4cqw; font-size: 10px; }
  .navigateur__barre i { width: 1.4cqw; height: 1.4cqw; }
  .telephone { right: 6%; bottom: 5%; width: 38%; padding: 1.4cqw; border-radius: 6cqw; }
  .telephone .ecran { border-radius: 4.8cqw; }
  .studio::before { filter: blur(2.5cqw); }
}

/* ==========================================================================
   5. BANDEAU DÉFILANT (métiers et services)
   ========================================================================== */
.bandeau {
  margin-top: var(--entre-projets);
  margin-left: calc(-1 * var(--gouttiere-g));
  margin-right: calc(-1 * var(--gouttiere-d));
  padding-block: clamp(36px, 5vw, 64px);
  border-bottom: 1px solid var(--ligne);
  overflow: hidden;
}
.bandeau__piste {
  display: flex;
  width: max-content;
  animation: bandeau 38s linear infinite;
}
.bandeau ul { display: flex; flex-shrink: 0; }
.bandeau li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-inline: clamp(24px, 3.5vw, 48px);
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.45rem);
  font-weight: 500;
  color: var(--gris-clair);
  white-space: nowrap;
}
.bandeau li::before { content: ""; width: 3px; height: 1.1em; background: var(--violet); }
@keyframes bandeau { to { transform: translateX(-50%); } }

/* ==========================================================================
   6. SECTIONS TEXTE (à propos, offres, méthode, contact)
   ========================================================================== */
.section { padding-block: clamp(64px, 9vw, 140px); border-bottom: 1px solid var(--ligne); }


.titre-section {
  font-size: var(--t-section);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 0.98;
  color: var(--texte);
  max-width: 16ch;
}
.section__tete { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); }
.section__tete p { max-width: 52ch; }

/* ---- Engagements (sous « À propos ») ---- */
.engagements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 28px 32px;   /* l'espace au-dessus vient de .section__tete */
}
.engagements li { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--ligne); align-content: start; }
.engagements h3 { font-size: 1.1rem; color: var(--texte); font-weight: 500; }

/* ---- Offres : même ligne que les projets (nom à gauche, étiquettes à droite) ---- */
.offres > li {
  display: grid;
  gap: 10px;
  padding-block: 22px;
  border-top: 1px solid var(--ligne);
}
.offres > li:last-child { border-bottom: 1px solid var(--ligne); }
.offre__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.offre__nom { display: flex; align-items: baseline; gap: 14px; font-size: var(--t-projet); color: var(--texte); min-width: 0; }
.offre__nom .chiffres { font-size: var(--t-etiquette); color: var(--violet-clair); }
.offres > li > p { max-width: 64ch; padding-left: calc(var(--t-etiquette) + 22px); }
.offres__note { margin-top: 28px; font-size: 0.95rem; }

@media (max-width: 560px) {
  .offre__tete { flex-direction: column; gap: 10px; }
  .offre__tete .etiquettes { justify-content: flex-start; }
  .offres > li > p { padding-left: 0; }
}

/* ---- Méthode : 6 étapes, dans l'ordre ---- */
.etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 0 32px;
}
.etapes li { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 4px 0; padding-block: 18px 22px; border-top: 1px solid var(--ligne); }
.etapes .chiffres { color: var(--violet-clair); font-size: var(--t-etiquette); padding-top: 0.35em; grid-row: span 2; }
.etapes h3 { font-size: 1.15rem; color: var(--texte); font-weight: 500; }

/* ---- Contact ---- */
.contact { display: grid; gap: clamp(40px, 6vw, 80px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 920px) { .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.coordonnees { display: grid; gap: 12px; margin-top: 28px; }
.coordonnees div { display: flex; gap: 16px; align-items: baseline; }
.coordonnees .libelle { min-width: 7.5em; }
.coordonnees span:last-child { color: var(--gris-clair); }

.formulaire { display: grid; gap: 18px; align-content: start; }
.formulaire__ligne { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.champ { display: grid; gap: 6px; min-width: 0; }
.champ label { font-size: var(--t-etiquette); color: var(--gris-clair); }
.champ label span { color: var(--gris); }
.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: 12px 0 10px;
  border: 0;
  border-bottom: 1px solid var(--ligne);
  border-radius: 0;
  background: transparent;
  color: var(--texte);
  font-size: 1.05rem;
}
.champ select { background: var(--fond); }
.champ textarea { resize: vertical; min-height: 96px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-bottom-color: var(--violet-clair); }
.champ.en-erreur input { border-bottom-color: #E07A7A; }
.piege { position: absolute; left: -9999px; }

.formulaire__envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; }
.bouton {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px;
  border: 0; border-radius: 2px;
  background: var(--texte); color: var(--fond);
  font-weight: 500; cursor: pointer;
  transition: background .2s, color .2s;
}
.bouton::before { content: ""; width: 2px; height: 1em; background: var(--violet); }
.bouton:hover { background: var(--violet); color: var(--texte); }
.bouton:hover::before { background: var(--texte); }
.formulaire__message { font-size: 0.95rem; color: var(--violet-clair); min-height: 1.5em; }

/* ==========================================================================
   7. PIED DE PAGE — le nom géant revient, en clôture
   ========================================================================== */
/* En bas : place pour l'encoche WhatsApp et la barre d'accueil des iPhone */
.pied { padding-block: clamp(56px, 8vw, 120px) calc(88px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 28px; }
.pied__haut { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; }
.pied__nav { display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--gris-clair); }
.pied__nav a:hover { color: var(--texte); }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: var(--t-etiquette); padding-top: 18px; border-top: 1px solid var(--ligne); }
.pied .marque-geante { color: var(--etiquette); }
.pied .marque-geante__tj { color: var(--etiquette-texte); }

/* Lockup compact (pied de page) : TJ | filet | Digital + baseline */
.lockup { display: inline-flex; align-items: center; gap: 12px; color: var(--texte); }
.lockup__tj { font-size: 1.6rem; font-weight: 600; line-height: 1; }
.lockup__filet { width: 2px; align-self: stretch; background: var(--violet); }
.lockup__nom { display: grid; line-height: 1.15; font-weight: 500; font-size: 1.05rem; }
.lockup__nom small { font-size: 0.72rem; font-weight: 400; letter-spacing: 0.06em; color: var(--gris); }

/* ==========================================================================
   8. PAGE TARIFS (tarifs.html)
   Chaque tarif est une ligne : à gauche le nom, les étiquettes, la
   description et la liste de ce qui est inclus ; à droite le prix.
   ========================================================================== */

/* Lien fléché (« Voir la grille tarifaire → ») */
.lien-fleche { display: inline-flex; gap: 8px; color: var(--texte); border-bottom: 1px solid var(--violet-clair); padding-bottom: 2px; }
.lien-fleche:hover { color: var(--violet-clair); }

/* En-tête de la page : sommaire en étiquettes cliquables */
.sommaire { justify-content: flex-start; }
.sommaire a { display: block; }
.sommaire li:has(a:hover) { background: var(--violet); color: var(--texte); }

.tarifs > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px 40px;
  padding-block: clamp(22px, 3vw, 34px);
  border-top: 1px solid var(--ligne);
}
@media (min-width: 820px) {
  .tarifs > li { grid-template-columns: minmax(0, 1fr) minmax(14rem, auto); align-items: start; }
}
.tarif__corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.tarif__nom { font-size: var(--t-projet); color: var(--texte); font-weight: 500; }
.tarif__corps .etiquettes { justify-content: flex-start; }
.tarif__corps > p { max-width: 58ch; }

/* Ce qui est inclus : puces en forme de filet violet */
.inclus { display: grid; gap: 6px 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); max-width: 760px; }
.inclus li { display: flex; gap: 10px; align-items: baseline; color: var(--gris-clair); font-size: 0.95rem; }
.inclus li::before { content: ""; flex: none; width: 2px; height: 0.85em; background: var(--violet-clair); transform: translateY(1px); }

/* Prix : grand chiffre, unité en petit */
.prix { display: grid; gap: 4px; justify-items: start; }
@media (min-width: 820px) { .prix { justify-items: end; text-align: right; } }
.prix__montant {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--texte);
  white-space: nowrap;
}
.prix__montant small { font-size: 0.36em; font-weight: 400; letter-spacing: 0; color: var(--gris); margin-left: 0.3em; }
.prix__plus { font-size: 1.05rem; color: var(--gris-clair); white-space: nowrap; }
.prix__note { font-size: var(--t-etiquette); color: var(--gris); max-width: 22rem; }

/* Mensualités : tableau compact, volontairement plus discret que la grille */
.mensualites { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .mensualites { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.table-defilante { overflow-x: auto; }
.table-mensualites { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table-mensualites th, .table-mensualites td { padding: 12px 12px 12px 0; text-align: left; border-bottom: 1px solid var(--ligne); white-space: nowrap; }
.table-mensualites th { font-size: var(--t-etiquette); font-weight: 400; color: var(--gris); }
.table-mensualites td { color: var(--gris-clair); }
.table-mensualites td:first-child { color: var(--texte); }
.table-mensualites td.nombre, .table-mensualites th.nombre { text-align: right; }

/* Appel final vers le formulaire de contact */
.appel { display: grid; gap: 24px; justify-items: start; }

/* ==========================================================================
   9. MENTIONS LÉGALES (mentions-legales.html) et note sous le formulaire
   ========================================================================== */
.formulaire__rgpd { font-size: var(--t-etiquette); color: var(--gris); }
.formulaire__rgpd a, .mentions a { color: var(--texte); border-bottom: 1px solid var(--violet-clair); }

.mentions { display: grid; gap: clamp(36px, 5vw, 60px); max-width: 880px; }
.mentions__bloc { display: grid; gap: 14px; padding-top: 22px; border-top: 1px solid var(--ligne); }
.mentions__bloc h2 { font-size: var(--t-projet); font-weight: 500; color: var(--texte); }
.mentions p { max-width: 68ch; color: var(--gris-clair); }
.mentions dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 28px; margin: 0; }
@media (min-width: 700px) { .mentions dl { grid-template-columns: 13rem minmax(0, 1fr); } }
.mentions dt { font-size: var(--t-etiquette); color: var(--gris); padding-top: 0.25em; }
.mentions dd { margin: 0 0 12px; color: var(--gris-clair); min-width: 0; }

/* Élément encore à renseigner avant la mise en ligne (bien visible exprès) */
.a-completer { color: var(--violet-clair); border: 1px dashed var(--violet-clair); border-radius: 2px; padding: 0 6px; }

/* ==========================================================================
   10. ENCOCHE WHATSAPP — bouton fixe en bas à droite, sur toutes les pages
   ========================================================================== */
.encoche-whatsapp {
  position: fixed;
  right: var(--gouttiere-d);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 14px;
  background: var(--fond-2);
  border: 1px solid var(--ligne);
  border-left: 3px solid var(--violet);          /* filet violet de la marque */
  color: var(--texte);
  font-size: var(--t-courant);
  text-decoration: none;
  box-shadow: 0 10px 28px var(--ombre);
  transition: border-color 0.2s, transform 0.2s;
}
.encoche-whatsapp:hover { border-color: var(--violet-clair); transform: translateY(-2px); }
.encoche-whatsapp:focus-visible { outline: 2px solid var(--violet-clair); outline-offset: 3px; }
.encoche-whatsapp__icone {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: var(--violet-clair);
  stroke-width: 1.8;
  stroke-linejoin: round;
}

/* ==========================================================================
   11. MOUVEMENT RÉDUIT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bandeau__piste, .ecran img, .composition { animation: none !important; }
  .encoche-whatsapp { transition: none; }
}