/* LA VITRINE : ce que voit quelqu'un qui n'a pas encore de compte.

   ════════════════════════════════════════════════════════════════════════
   D'OÙ VIENT CE DESSIN (2026-09-23)
   ════════════════════════════════════════════════════════════════════════
   Demande du propriétaire : « moderne, minimaliste, esthétique, fond blanc ».
   La vitrine était crème et cuivre, sur une maquette du 2026-09-17 (serif,
   pilules au dégradé, notes manuscrites, halos). Elle devient BLANCHE et
   SOBRE : du blanc, des gris neutres, une encre presque noire, et le cuivre
   du logo gardé pour UN mot par titre et les signes. Plus de dégradé, plus de
   note manuscrite, plus de halo ; des angles de 12, des ombres à peine là.
   Les titres passent en sans-serif serré : c'est la graisse et la taille qui
   font le titre, pas l'italique.

   Les images viendront du propriétaire ; la scène dessinée (ordinateur,
   téléphone) tient la place en attendant, aux mêmes couleurs.

   CE QUI RESTE DU SYSTÈME D'AVANT (8StarLabs UI, 2026-09-13) : les rôles
   sémantiques, l'anneau de focus de 3px à 50 %, la discipline « aucune
   couleur en dur dans une règle ». La composition change, pas les
   fondations.

   ════════════════════════════════════════════════════════════════════════
   LES RÈGLES DE LA MAISON QUI TIENNENT TOUJOURS
   ════════════════════════════════════════════════════════════════════════
   LES NEUTRES SONT CEUX DE LA MAQUETTE, PAS CEUX DE T11D : la vitrine est
   crème quand l'application est grise. Ils sont donc déclarés ici, dans les
   TROIS états du thème - `clair` explicite, `sombre` explicite, et le
   système GARDÉ par `:not([data-theme="clair"])`. Un `@media` non gardé
   écraserait le choix « Clair » de quelqu'un dont l'OS est en sombre.

   LES FONTES sont servies par le projet (`fontes/fontes.css`, Norme N11,
   aucun CDN) : Instrument Serif pour les titres, Inter pour le texte, Caveat
   pour la note manuscrite. Les trois étaient déjà là.

   Cette feuille n'est chargée QUE sur les écrans de vitrine (voir la branche
   `$vitrine` de `pages/_coquille.php`) : ce qu'elle pose sur `:root` ne peut
   donc atteindre ni l'espace ni l'administration. */

/* ── Le contrat de jetons ────────────────────────────────────────────────── */

:root {
  /* La palette claire : du blanc, des gris neutres, une encre presque noire. */
  --vit-fond:       #ffffff;
  --vit-carte:      #ffffff;
  --vit-doux:       #f6f6f7;
  --vit-filet:      #e6e6ea;
  --vit-texte:      #111114;
  --vit-sourdine:   #55555e;
  --vit-tres-doux:  #8a8a94;
  --vit-danger:     var(--sys-red, #c0392b);

  /* LE CUIVRE DU LOGO reste la couleur de la marque : un mot par titre, les
     signes, un liseré. Il n'appelle plus à lui seul : c'est l'ENCRE qui fait
     le bouton principal - un bouton noir sur blanc, c'est le geste le plus
     lisible qui soit, et il ne se dispute pas la place avec la marque. */
  --vit-primaire:        #9a4a12;
  --vit-primaire-2:      #7d3b0e;
  --vit-primaire-texte:  #ffffff;
  --vit-encre:           #111114;
  --vit-encre-2:         #2a2a30;
  --vit-encre-texte:     #ffffff;
  --vit-anneau:          var(--vit-primaire);

  /* Les fontes : celles du projet d'abord, puis un repli réel (Norme N11). */
  --vit-fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --vit-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --vit-main:  'Caveat', 'Bradley Hand', 'Segoe Script', cursive;

  --vit-rayon:     12px;
  --vit-rayon-sm:  8px;
  --vit-rayon-xl:  18px;
  --vit-goutte:    clamp(28px, 4vw, 56px);
  --vit-elan:      cubic-bezier(.22, 1, .36, 1);
}

/* THÈME SOMBRE. Le blanc devient un noir neutre, le cuivre s'ÉCLAIRCIT, et
   l'encre des boutons s'inverse : blanc sur noir. */
:root[data-theme="sombre"] {
  --vit-fond: #0d0d0f; --vit-carte: #151518; --vit-doux: #121215;
  --vit-filet: rgba(255, 255, 255, .11);
  --vit-texte: #f2f2f4; --vit-sourdine: #b4b4bc; --vit-tres-doux: #85858e;
  --vit-primaire: #d98b4a; --vit-primaire-2: #b0642a; --vit-primaire-texte: #1c1c1e;
  --vit-encre: #f2f2f4; --vit-encre-2: #d9d9de; --vit-encre-texte: #111114;
}
/* L'état « Système ». GARDÉ : sans `:not([data-theme="clair"])`, cette règle
   passerait par-dessus un « Clair » explicitement choisi. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --vit-fond: #0d0d0f; --vit-carte: #151518; --vit-doux: #121215;
    --vit-filet: rgba(255, 255, 255, .11);
    --vit-texte: #f2f2f4; --vit-sourdine: #b4b4bc; --vit-tres-doux: #85858e;
    --vit-primaire: #d98b4a; --vit-primaire-2: #b0642a; --vit-primaire-texte: #1c1c1e;
    --vit-encre: #f2f2f4; --vit-encre-2: #d9d9de; --vit-encre-texte: #111114;
  }
}

/* ── La mesure commune ───────────────────────────────────────────────────── */

/* `box-sizing: border-box` SUR L'ARBRE DE LA VITRINE, ET SUR LUI SEUL. Cette
   maison n'en pose aucun globalement ; la vitrine en a besoin partout, parce
   qu'elle est faite de conteneurs en `width: 100%` qui portent un
   `padding-inline`. Le sélecteur reste enfermé dans les trois racines du site
   public. */
.site-tete, .site-corps, .site-pied,
.site-tete *, .site-corps *, .site-pied * { box-sizing: border-box; }

.site-tete, .site-corps, .site-pied {
  font-family: var(--vit-fonte);
  -webkit-font-smoothing: antialiased;
  color: var(--vit-texte);
}
.site-corps { display: block; background: var(--vit-fond); overflow-x: clip; }

.site-large {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 24px;
}

.site-section { padding-block: clamp(56px, 7vw, 96px); }
/* L'EN-TÊTE EST COLLANT : arrivé par une ancre (#fonctionnalites, #tarifs),
   le haut de la section passait dessous. La marge de défilement le retient. */
.site-section, .site-atouts, .site-heros { scroll-margin-top: 76px; }
/* La section douce : un crème un peu plus profond, sans filet, comme les
   bandes de la maquette. */
.site-section.est-douce { background: var(--vit-doux); }

/* ── Les mots ────────────────────────────────────────────────────────────── */

.site-h1, .site-h2 {
  font-family: var(--vit-fonte);
  font-weight: 600; letter-spacing: -.035em; line-height: 1.04;
  color: var(--vit-texte); margin: 0;
  text-wrap: balance;
}
.site-h1 { font-size: clamp(44px, 5.2vw, 68px); letter-spacing: -.04em; }
.site-h2 { font-size: clamp(28px, 3.2vw, 42px); margin-block: 8px 18px; line-height: 1.1; }
/* Le mot en cuivre : c'est le seul relief du titre, comme sur la maquette. */
.site-h1 em, .site-h2 em {
  font-family: var(--vit-serif); font-style: italic; font-weight: 400;
  letter-spacing: -.01em; color: var(--vit-primaire);
}
.site-h2.est-centre, .site-sous.est-centre, .site-sur.est-centre { text-align: center; }
.site-sous.est-centre { margin-inline: auto; }

/* Le surtitre en petites capitales espacées, avec son tiret. */
.site-sur {
  margin: 0 0 14px;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--vit-primaire);
}
.site-sur.est-pastille {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 10px; border-radius: 999px; margin-bottom: 22px;
  font-size: 11.5px; color: var(--vit-texte);
  border: 1px solid var(--vit-filet); background: var(--vit-carte);
}
.site-sur.est-pastille::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--vit-primaire); }

.site-sous {
  margin: 0 0 26px; max-width: 50ch;
  font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--vit-sourdine);
}
.site-note { margin: 14px 0 0; font-size: 13.5px; color: var(--vit-tres-doux); }
.site-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.site-actions.est-centre { justify-content: center; }

/* LA NOTE MANUSCRITE : Caveat, en cuivre, un peu penchée. Un ornement, jamais
   un contenu : elle est `aria-hidden` ou dans une scène qui l'est. */
/* PLUS DE NOTE MANUSCRITE (2026-09-23) : un ornement penché sur une page
   qu'on veut nue. Le balisage reste (il est `aria-hidden`), la règle l'éteint
   partout, et ses trois placements plus bas n'ont plus d'effet. */
.site-main { display: none; }

/* ── L'en-tête ───────────────────────────────────────────────────────────── */

.site-tete {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 20px;
  padding: 10px 28px;
  background: color-mix(in srgb, var(--vit-fond) 80%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--vit-filet);
}

/* LA MARQUE SE MESURE EN LARGEUR, JAMAIS EN HAUTEUR : un emblème rond qui
   contient le mot, le cartouche et la devise ne se lit plus contraint par la
   hauteur d'une barre. */
.site-tete-marque { display: inline-flex; align-items: center; flex: 0 0 auto; }
/* Deux fois plus petit qu'avant (propriétaire, 2026-09-23) : 46 px au lieu
   de 92. L'emblème rond n'a pas besoin de dominer la barre. */
.site-tete-marque img { display: block; width: 46px; height: auto; }

.site-tete-nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.site-tete-gestes { display: flex; align-items: center; gap: 6px; flex: none; }

.site-lien {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding-inline: 12px;
  border-radius: 999px;
  color: var(--vit-sourdine);
  font-size: 14px; font-weight: 500; text-decoration: none;
  position: relative;
  transition: color .15s ease, background-color .15s ease;
}
.site-lien:hover { color: var(--vit-texte); }
.site-lien:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vit-anneau) 50%, transparent);
}
/* L'ancre courante : un trait de cuivre sous le mot, comme « Accueil » sur
   la maquette. */
.site-tete-nav .site-lien.est-ici { color: var(--vit-texte); }
.site-tete-nav .site-lien.est-ici { background: var(--vit-doux); }
.site-lien.est-compte { color: var(--vit-texte); }
.site-lien.est-centre { justify-content: center; width: 100%; }

/* À L'ÉTROIT, LA BARRE SE RESSERRE AU LIEU DE DÉBORDER : à 375px les deux
   gestes restent, c'est la place autour d'eux qui cède. Les ancres, elles,
   s'effacent sous 900px - un menu déroulant pour cinq ancres serait un menu
   de trop sur une page qui tient en défilant. */
@media (max-width: 900px) { .site-tete-nav { display: none; } .site-tete-gestes { margin-inline-start: auto; } }
@media (max-width: 480px) {
  .site-tete { gap: 10px; padding-inline: 14px; }
  .site-tete-marque img { width: 40px; }
  .site-tete-gestes .site-lien, .site-tete-gestes .site-btn { padding-inline: 12px; font-size: 13px; }
  .site-tete-gestes .site-lien svg { display: none; }
}

/* ── Les boutons ─────────────────────────────────────────────────────────── */

/* DES BOUTONS PLATS : une pilule, une couleur, aucun dégradé, aucune ombre
   portée. Le principal est d'encre ; le secondaire est bordé. */
.site-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 42px; padding-inline: 20px;
  border: 1px solid var(--vit-filet);
  border-radius: 999px;
  background: var(--vit-carte);
  color: var(--vit-texte);
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .2s var(--vit-elan);
}
.site-btn:hover { background: var(--vit-doux); border-color: color-mix(in srgb, var(--vit-texte) 20%, var(--vit-filet)); }
.site-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vit-anneau) 50%, transparent);
}
.site-btn.est-primaire {
  background: var(--vit-encre);
  border-color: var(--vit-encre);
  color: var(--vit-encre-texte);
}
.site-btn.est-primaire:hover { background: var(--vit-encre-2); border-color: var(--vit-encre-2); transform: translateY(-1px); }
.site-btn.est-grand { height: 50px; padding-inline: 30px; font-size: 16px; }
.site-btn.est-nu { border-color: transparent; background: transparent; color: var(--vit-texte); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--vit-filet); }
.site-btn.est-nu:hover { background: transparent; text-decoration-color: var(--vit-primaire); }
.site-btn.est-large { width: 100%; }
.site-btn svg { flex: none; }

/* ── LE HÉROS ────────────────────────────────────────────────────────────── */

/* Deux colonnes à partir de 960px : les mots à gauche, la scène à droite. En
   dessous, la scène passe SOUS les mots. Le fond porte deux halos très pâles
   - un cuivre, un vert d'eau - comme le flou de la maquette. */
.site-heros {
  position: relative; overflow: hidden;
  padding-block: clamp(48px, 7vw, 104px) clamp(56px, 8vw, 112px);
  background: var(--vit-fond);
}
.site-heros-grille { display: grid; gap: var(--vit-goutte); align-items: center; }
@media (min-width: 960px) {
  .site-heros-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); }
}
.site-heros .site-h1 { margin-bottom: 22px; }

/* LA SCÈNE : l'ordinateur, le téléphone devant, la note au-dessus. */
.site-scene { position: relative; padding: 64px 0 26px; }
.site-main.est-heros {
  position: absolute; top: 0; right: 3%; z-index: 3;
}

/* L'ORDINATEUR. Un châssis sombre, un écran, un socle : trois boîtes. L'écran
   est un CONTENEUR (`container-type`) : tout ce qu'il contient est mesuré en
   `cqw`, donc l'écran se réduit d'un bloc avec la page, comme une photo. */
.site-lap { position: relative; width: 100%; max-width: 660px; margin-inline: auto; }
.site-lap-cadre {
  padding: 12px 12px 14px;
  border-radius: 16px 16px 6px 6px;
  background: linear-gradient(160deg, #2c2c31, #151518 40%, #0f0f11);
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .10) inset, 0 30px 60px -34px rgba(0, 0, 0, .45);
}
.site-lap-ecran {
  container-type: inline-size;
  aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden;
  display: flex; background: #f6f6f7; color: #111114;
  font-family: var(--vit-fonte);
}
.site-lap-socle {
  position: relative; height: 14px; margin-inline: -5%;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(#e2e2e6, #b5b5bd);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5);
}
.site-lap-socle i {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 14%; height: 5px; border-radius: 0 0 6px 6px; background: #9d9da5;
}

/* Les pièces de l'application, en clair, aux couleurs du thème clair : fond
   crème, cartes blanches, cuivre. Tout est en `cqw` : 1cqw = 1 % de l'écran. */
.lap-cote {
  flex: 0 0 22cqw; padding: 3cqw 2.2cqw; background: #fff; border-right: 1px solid #e6e6ea;
  display: flex; flex-direction: column; gap: .8cqw;
}
.lap-marque { width: 11cqw; height: auto; margin: 0 0 2.5cqw 1cqw; }
.lap-nav {
  display: flex; align-items: center; gap: 1.4cqw; padding: 1.3cqw 1.6cqw;
  border-radius: 1.2cqw; font-size: 1.8cqw; font-weight: 500; color: #55555e;
}
.lap-nav .tel-i { width: 2.4cqw; height: 2.4cqw; }
.lap-nav.est-ici { background: #f0f0f2; color: #111114; font-weight: 600; }
.lap-page { flex: 1; min-width: 0; padding: 3cqw 3.2cqw; }
.lap-haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 2cqw; }
.lap-eti { display: block; font-size: 1.5cqw; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8a8a94; }
.lap-nom { display: block; font-size: 3.2cqw; font-weight: 700; letter-spacing: -.02em; margin: .3cqw 0 .4cqw; }
.lap-min { display: block; font-size: 1.6cqw; color: #8a8a94; }
.lap-btn {
  flex: none; padding: 1.3cqw 2.2cqw; border-radius: 999px; font-size: 1.7cqw; font-weight: 600;
  color: #fff; background: #111114;
}
.lap-onglets { display: flex; gap: 3cqw; margin: 3cqw 0 2.4cqw; border-bottom: 1px solid #e6e6ea; font-size: 1.8cqw; font-weight: 500; color: #8a8a94; }
.lap-onglets span { padding-bottom: 1.2cqw; }
.lap-onglets .est-ici { color: #111114; box-shadow: 0 2px 0 #111114; }
.lap-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6cqw; }
.lap-photos figure { margin: 0; }
.lap-photo { aspect-ratio: 4 / 3.4; border-radius: 1.4cqw; overflow: hidden; margin: .8cqw 0 .8cqw; background: #ececef; }
.lap-photo svg { width: 100%; height: 100%; display: block; }

/* LE TÉLÉPHONE DU HÉROS : devant l'ordinateur, en bas à droite, plus petit
   que ceux de la démonstration. Sous 600px il s'efface - il déborderait, et
   l'ordinateur suffit à dire « application ». */
.site-tel.est-heros {
  --tel-k: .33;
  position: absolute; right: 0; bottom: 0; z-index: 2;
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .10) inset, 0 30px 50px -20px rgba(0, 0, 0, .6);
}
@media (max-width: 600px) { .site-tel.est-heros { display: none; } .site-scene { padding-bottom: 0; } }
@media (min-width: 960px) and (max-width: 1100px) { .site-tel.est-heros { --tel-k: .29; } }
@media (max-width: 480px) { .site-main.est-heros { font-size: 22px; right: 0; } }

/* ── LES TROIS ATOUTS ────────────────────────────────────────────────────── */

.site-atouts { padding-block: clamp(40px, 5vw, 64px); background: var(--vit-fond); border-block: 1px solid var(--vit-filet); }
.site-atouts-grille { display: grid; gap: 28px; text-align: center; }
@media (min-width: 760px) { .site-atouts-grille { grid-template-columns: repeat(3, 1fr); gap: var(--vit-goutte); } }
.site-atout { display: grid; justify-items: center; }
.site-ico {
  color: var(--vit-primaire); display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 14px; background: var(--vit-doux);
}
.site-atout h3 {
  margin: 14px 0 8px; font-weight: 600;
  font-size: 19px; letter-spacing: -.02em; color: var(--vit-texte);
}
.site-atout p { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.6; color: var(--vit-sourdine); }

/* ── POURQUOI : LES DEUX COLONNES ────────────────────────────────────────── */

.site-deux { display: grid; gap: var(--vit-goutte); align-items: center; }
@media (min-width: 960px) { .site-deux { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 5vw, 80px); } }

/* La frise des trois séances : trois vignettes, deux flèches. */
.site-frise { list-style: none; margin: 8px 0 0; padding: 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.site-frise-pas { display: grid; gap: 2px; font-size: 13px; color: var(--vit-tres-doux); }
.site-frise-pas b { margin-top: 8px; font-size: 14px; color: var(--vit-texte); }
.site-frise-photo {
  width: clamp(96px, 11vw, 124px); aspect-ratio: 1; border-radius: var(--vit-rayon-sm); overflow: hidden;
  background: var(--vit-doux); border: 1px solid var(--vit-filet);
}
.site-frise-photo svg { width: 100%; height: 100%; display: block; }
.site-frise-fleche { color: var(--vit-primaire); display: flex; align-self: flex-start; margin-top: clamp(38px, 4.5vw, 52px); }
.site-frise-fleche svg { width: 22px; height: 22px; }

/* LE COMPARATEUR VIVANT. L'avant est DÉVOILÉ jusqu'au curseur par un
   `clip-path`, jamais par une largeur : une largeur déformerait le dessin à
   chaque mouvement. Même règle que le comparateur de l'app. */
.site-demo { margin: 0; position: relative; display: grid; gap: 12px; justify-items: center; }
.site-main.est-demo {
  position: absolute; left: -9%; bottom: 20%; z-index: 3; text-align: left;
  text-shadow: 0 0 14px var(--vit-fond), 0 0 6px var(--vit-fond);
}
@media (max-width: 959px) { .site-main.est-demo { left: 0; bottom: auto; top: -10px; } }
.site-cmp {
  --p: 50%;
  position: relative; aspect-ratio: 4 / 5; width: 100%;
  max-width: 440px;
  border-radius: var(--vit-rayon-xl); overflow: hidden;
  background: var(--vit-doux); border: 1px solid var(--vit-filet);
  box-shadow: 0 24px 60px -36px rgba(0, 0, 0, .35);
  cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.site-cmp-photo { position: absolute; inset: 0; }
.site-cmp-photo svg { width: 100%; height: 100%; display: block; }
.site-cmp-photo.est-avant { clip-path: inset(0 calc(100% - var(--p, 50%)) 0 0); }
.site-cmp-trait {
  position: absolute; inset-block: 0; left: var(--p, 50%);
  width: 2px; margin-inline-start: -1px; background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}
.site-cmp-poignee {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
  transition: transform .16s ease;
}
.site-cmp-poignee::before, .site-cmp-poignee::after {
  content: ''; position: absolute; top: 50%; width: 0; height: 0;
  border-block: 5px solid transparent;
}
.site-cmp-poignee::before { left: 12px;  transform: translateY(-50%); border-inline-end: 6px solid #6b6b73; }
.site-cmp-poignee::after  { right: 12px; transform: translateY(-50%); border-inline-start: 6px solid #6b6b73; }
.site-cmp.est-tire .site-cmp-poignee { transform: translate(-50%, -50%) scale(1.08); }
.site-cmp-mot {
  position: absolute; bottom: 14px; z-index: 2;
  padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: #fff;
  background: rgba(0, 0, 0, .52); backdrop-filter: blur(4px);
}
.site-cmp-mot.est-gauche { left: 14px; }
.site-cmp-mot.est-droite { right: 14px; }
/* L'ACCÈS AU CLAVIER N'EST PAS UNE OPTION : un `<input type="range">` réel,
   hors de la vue mais FOCALISABLE. */
.site-cmp-acces { position: absolute; inset-inline-start: -9999px; }
.site-cmp:focus-within { outline: 3px solid var(--vit-anneau); outline-offset: 3px; }
.site-cmp-legende { font-size: 14px; color: var(--vit-tres-doux); }
@keyframes site-cmp-invite {
  0%   { --p: 50%; }
  38%  { --p: 78%; }
  100% { --p: 50%; }
}
@property --p { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
.site-cmp.est-invite { animation: site-cmp-invite 2.4s cubic-bezier(.4, 0, .2, 1) .2s 1; }

/* LES FONCTIONS : une ligne d'icônes et de mots, sous les deux colonnes. */
.site-fonctions {
  list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 32px 0 0;
  border-top: 1px solid var(--vit-filet);
  display: flex; flex-wrap: wrap; gap: 24px clamp(28px, 4vw, 64px);
}
.site-fonctions li { display: grid; justify-items: start; gap: 10px; font-size: 15px; font-weight: 500; color: var(--vit-texte); }

/* ── LA DÉMONSTRATION ────────────────────────────────────────────────────── */

.site-demo-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--vit-goutte); margin-bottom: clamp(28px, 4vw, 48px); }
.site-main.est-simple { flex: none; margin-bottom: 30px; }
@media (max-width: 760px) { .site-main.est-simple { display: none; } }

/* Un rail traverse les trois numéros : la manœuvre se lit dans l'ordre. */
.site-temps { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; position: relative; }
@media (min-width: 900px) {
  .site-temps { grid-template-columns: repeat(3, 1fr); gap: var(--vit-goutte); }
  .site-temps::before {
    content: ''; position: absolute; top: 21px; left: 21px; right: 21px; height: 1px;
    background: var(--vit-filet);
  }
}
.site-tempo { position: relative; }
.site-tempo-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 999px; margin-bottom: 18px;
  font-size: 15px; font-weight: 600;
  color: var(--vit-encre-texte);
  background: var(--vit-encre);
  box-shadow: 0 0 0 6px var(--vit-doux);
}
.site-tempo h3 {
  margin: 0 0 8px; font-weight: 600;
  font-size: 21px; letter-spacing: -.02em; color: var(--vit-texte);
}
.site-tempo p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--vit-sourdine); max-width: 42ch; }
.site-tempo em { font-style: italic; color: var(--vit-texte); }

/* ════════════════════════════════════════════════════════════════════════
   LE TÉLÉPHONE, ET L'APPLICATION DEDANS
   ════════════════════════════════════════════════════════════════════════
   L'ÉCRAN EST ÉCRIT EN PIXELS RÉELS DE L'APP (390 x 844) puis RÉDUIT par un
   transform : les épaisseurs, les rayons, les interlignes se réduisent
   ENSEMBLE, comme sur une vraie photo d'écran. `--tel-k` est le facteur de
   réduction ; tout le reste en découle, y compris la taille de la boîte. */
.site-tel {
  --tel-k: .54;
  position: relative; flex: none;
  width: calc(390px * var(--tel-k) + 11px);
  height: calc(844px * var(--tel-k) + 11px);
  padding: 5.5px; border-radius: calc(54px * var(--tel-k) + 6px);
  background: linear-gradient(148deg, #4a4a50 0%, #17171a 26%, #0e0e10 62%, #35353b 100%);
  box-shadow:
    0 0 0 .5px rgba(255, 255, 255, .10) inset,
    0 34px 60px -26px rgba(0, 0, 0, .62),
    0 10px 24px -14px rgba(0, 0, 0, .5);
}
.site-tel::after {
  content: ''; position: absolute; inset: 5.5px; border-radius: calc(48px * var(--tel-k));
  background: linear-gradient(118deg, rgba(255, 255, 255, .13) 0 18%, rgba(255, 255, 255, 0) 42%);
  pointer-events: none;
}
.site-tel-ile {
  position: absolute; top: calc(11px * var(--tel-k) + 5.5px); left: 50%; transform: translateX(-50%);
  width: calc(112px * var(--tel-k)); height: calc(32px * var(--tel-k));
  border-radius: 999px; background: #000; z-index: 3;
}
.site-tel-cadre {
  width: calc(390px * var(--tel-k)); height: calc(844px * var(--tel-k));
  border-radius: calc(48px * var(--tel-k)); overflow: hidden; background: #120b06;
}
.site-tel-ecran {
  width: 390px; height: 844px; transform: scale(var(--tel-k)); transform-origin: 0 0;
  background: #120b06; color: #fff; overflow: hidden; position: relative;
  padding: 58px 16px 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px; line-height: 1.35; letter-spacing: -.01em;
}

/* Les pièces de l'application, aux valeurs de l'app (relevées sur le mobile
   réel le 2026-09-16 : carte #1c1c1e, accent #c47a45, gris translucides). */
.tel-haut { padding: 6px 2px 14px; }
.tel-retour { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #ebebf594; }
.tel-nom { margin: 6px 0 4px; font-size: 27px; font-weight: 700; letter-spacing: -.02em; }
.tel-sous { font-size: 13px; color: #ebebf5b8; }
.tel-gestes { display: flex; gap: 8px; margin-bottom: 10px; }
.tel-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: #e7c9ab; background: #7676801f; border: .5px solid #54545899; white-space: nowrap;
}
.tel-btn.est-plein { background: #c47a45; border-color: transparent; color: #241207; }
.tel-btn.est-rond { width: 38px; padding: 9px 0; }
.tel-carte { background: #1c1c1e; border-radius: 14px; padding: 14px; margin-bottom: 10px; }
.tel-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tel-eti { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #ebebf594; }
.tel-gros { display: block; margin: 3px 0 2px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.tel-min { font-size: 11.5px; color: #ebebf594; }
.tel-ok { margin: 6px 0 0; display: flex; align-items: center; gap: 5px; font-size: 18px; font-weight: 700; color: #48b06a; }
.tel-titre { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.tel-titre span { color: #ebebf594; font-weight: 400; }
.tel-rang {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 0; border-top: .5px solid #54545899; font-size: 14px; font-weight: 600;
}
.tel-rang:first-of-type { border-top: 0; }
.tel-rang i { display: block; font-style: normal; font-size: 11.5px; font-weight: 400; color: #ebebf594; margin-top: 2px; }
.tel-pastille {
  flex: none; font-style: normal; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  color: #e0955c; background: rgba(196, 122, 69, .18);
}
.tel-pastille.est-fini { color: #ebebf5b8; background: #7676801f; }
.tel-i { flex: none; }

/* La barre d'onglets : collée en bas, translucide, comme dans l'app. */
.tel-barre {
  position: absolute; inset-inline: 0; bottom: 0; display: flex; padding: 9px 0 22px;
  background: rgba(18, 11, 6, .86); backdrop-filter: blur(12px); border-top: .5px solid #54545899;
}
.tel-tab { flex: 1; display: grid; justify-items: center; gap: 2px; color: #ebebf594; }
.tel-tab b { font-size: 10.5px; font-weight: 500; }
.tel-tab.est-ici { color: #c47a45; }

/* Les onglets de la fiche et les vignettes du héros. */
.tel-onglets { display: flex; gap: 22px; margin: 4px 2px 14px; border-bottom: .5px solid #54545899; font-size: 14px; font-weight: 600; color: #ebebf594; }
.tel-onglets span { padding-bottom: 9px; }
.tel-onglets .est-ici { color: #c47a45; box-shadow: 0 1.5px 0 #c47a45; }
.tel-vignettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.tel-vignettes div { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #1c1c1e; }
.tel-vignettes svg { width: 100%; height: 100%; display: block; }

/* ── L'écran du studio : la visée, et le calque de repère ── */
.site-tel-ecran.est-studio { padding: 52px 12px 0; }
.tel-studio-haut { display: flex; align-items: center; gap: 10px; padding: 0 4px 12px; font-size: 15px; }
.tel-studio-haut b { font-weight: 600; }
.tel-studio-haut .tel-min { margin-inline-start: auto; }
.tel-visee { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 3 / 4; background: #000; }
.tel-visee-vue, .tel-visee-calque { position: absolute; inset: 0; }
.tel-visee-vue svg, .tel-visee-calque svg { width: 100%; height: 100%; display: block; }
/* Le calque est légèrement DÉCALÉ ET TOURNÉ : c'est exactement ce qu'on est
   en train de rattraper quand on aligne. */
.tel-visee-calque { opacity: .45; transform: translate(-3.5%, 2.5%) rotate(-1.2deg) scale(1.04); }
.tel-visee-mire { position: absolute; inset: 10%; }
.tel-visee-mire i {
  position: absolute; width: 22px; height: 22px; border: 2px solid rgba(255, 255, 255, .85);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}
.tel-visee-mire i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
.tel-visee-mire i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 4px 0 0; }
.tel-visee-mire i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 4px; }
.tel-visee-mire i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 4px 0; }
.tel-puces { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; }
.tel-puce {
  padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: #fff; background: rgba(0, 0, 0, .5); backdrop-filter: blur(8px);
  border: .5px solid rgba(255, 255, 255, .22);
}
.tel-puce.est-on { background: #c47a45; color: #241207; border-color: transparent; }
.tel-glissiere {
  position: absolute; inset-inline: 16px; bottom: 16px; height: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .3);
}
.tel-glissiere i {
  position: absolute; top: 50%; left: 40%; transform: translate(-50%, -50%);
  width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.tel-glissiere::before { content: ''; position: absolute; inset: 0 60% 0 0; border-radius: 999px; background: #c47a45; }
.tel-conseil { margin: 14px 4px 0; font-size: 12.5px; color: #ebebf594; text-align: center; }
.tel-declic { position: absolute; inset-inline: 0; bottom: 96px; display: grid; place-items: center; }
.tel-declic span {
  width: 62px; height: 62px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .28);
}

/* ── L'écran du partage : ce que la cliente reçoit, et rien de plus ── */
.site-tel-ecran.est-partage { padding: 64px 16px 0; background: #0f0a07; }
.tel-part-haut { text-align: center; margin-bottom: 16px; }
.tel-marque { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.tel-cmp { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 3 / 4; background: #000; }
.tel-cmp-ap, .tel-cmp-av { position: absolute; inset: 0; }
.tel-cmp-ap svg, .tel-cmp-av svg { width: 100%; height: 100%; display: block; }
.tel-cmp-av { clip-path: inset(0 52% 0 0); }
.tel-cmp-trait { position: absolute; top: 0; bottom: 0; left: 48%; width: 2px; background: rgba(255, 255, 255, .92); }
.tel-cmp-trait i {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.tel-cmp-mot {
  position: absolute; bottom: 12px; font-style: normal; font-size: 12.5px; font-weight: 700;
  padding: 5px 10px; border-radius: 999px; color: #fff; background: rgba(0, 0, 0, .52);
  backdrop-filter: blur(8px);
}
.tel-cmp-mot.est-g { left: 12px; }
.tel-cmp-mot.est-d { right: 12px; }
.tel-part-dit { margin: 14px 0 16px; text-align: center; font-size: 14px; color: #ebebf5b8; }
.tel-part-gestes { display: grid; gap: 8px; }
.tel-part-gestes .tel-btn { width: 100%; padding: 13px; font-size: 15px; }
.tel-part-note { margin: 16px 6px 0; text-align: center; font-size: 11.5px; line-height: 1.5; color: #ebebf594; }

/* LE TÉLÉPHONE DANS LA COLONNE D'UNE ÉTAPE. Il vient APRÈS le texte. */
.site-tempo .site-tel { margin: 22px auto 0; }
@media (max-width: 899px) { .site-tempo .site-tel { --tel-k: .62; margin-top: 18px; } }
@media (min-width: 1100px) { .site-tempo .site-tel { --tel-k: .6; } }
@media (prefers-reduced-motion: no-preference) {
  .site-tempo .site-tel { transition: transform .5s var(--vit-elan); }
  .site-tempo:hover .site-tel { transform: translateY(-6px); }
}

/* ── LE TARIF ────────────────────────────────────────────────────────────── */

.site-tarif-grille { display: grid; gap: var(--vit-goutte); align-items: start; }
@media (min-width: 960px) { .site-tarif-grille { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: clamp(40px, 5vw, 80px); } }

/* Les étiquettes : des pilules pâles, les univers en cuivre. */
.site-etiquettes { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.site-etiquettes li {
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 500;
  color: var(--vit-sourdine); background: var(--vit-doux); border: 1px solid transparent;
}
.site-etiquettes li.est-univers { color: var(--vit-primaire); background: color-mix(in srgb, var(--vit-primaire) 8%, var(--vit-carte)); font-weight: 600; }

.site-compris { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-compris li { position: relative; padding-inline-start: 26px; font-size: 14.5px; line-height: 1.55; color: var(--vit-sourdine); }
.site-compris li::before {
  content: ''; position: absolute; left: 0; top: 6px; width: 12px; height: 12px; border-radius: 999px;
  background: var(--vit-primaire);
}

/* LA CARTE : le grand chiffre, la formule, la phrase, les autres paliers, le
   geste. Un liseré de cuivre en haut, comme sur la maquette. */
.site-tarif {
  padding: clamp(26px, 3vw, 36px);
  border-radius: var(--vit-rayon-xl); background: var(--vit-carte);
  border: 1px solid var(--vit-filet);
  box-shadow: 0 24px 60px -40px rgba(0, 0, 0, .25);
  display: grid; gap: 12px;
}
.site-tarif-prix {
  margin: 0; font-weight: 600;
  font-size: clamp(46px, 5vw, 60px); line-height: 1; letter-spacing: -.04em;
  color: var(--vit-texte);
}
.site-tarif-prix span { font-family: var(--vit-fonte); font-size: 17px; color: var(--vit-tres-doux); margin-inline-start: 8px; letter-spacing: 0; }
.site-tarif-quand { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vit-primaire); }
.site-tarif-dit { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--vit-sourdine); }
.site-tarif-dit b { color: var(--vit-texte); font-weight: 600; }
.site-tarif-autres { list-style: none; margin: 4px 0; padding: 0; border-top: 1px solid var(--vit-filet); }
.site-tarif-autres:empty { display: none; }
.site-tarif-autres li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--vit-filet); font-size: 14px; color: var(--vit-sourdine); }
.site-tarif-autres b { flex: none; color: var(--vit-texte); font-weight: 600; }
.site-tarif-essai { margin: 0; padding: 12px 14px; border-radius: var(--vit-rayon-sm); background: var(--vit-doux); font-size: 13.5px; line-height: 1.55; color: var(--vit-sourdine); }
.site-tarif .site-btn { margin-top: 6px; }

/* ── LES GARANTIES ───────────────────────────────────────────────────────── */

.site-garanties { margin: clamp(28px, 4vw, 48px) 0 0; display: grid; gap: 16px; }
@media (min-width: 760px) { .site-garanties { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.site-garanties > div { padding: 24px; border-radius: var(--vit-rayon); background: var(--vit-carte); border: 1px solid var(--vit-filet); }
.site-garanties dt { margin: 0 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--vit-texte); }
.site-garanties dd { margin: 0; font-size: 14px; line-height: 1.65; color: var(--vit-sourdine); }

/* ── LES QUESTIONS ───────────────────────────────────────────────────────── */

.site-questions-grille { display: grid; gap: var(--vit-goutte); align-items: start; }
@media (min-width: 960px) { .site-questions-grille { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.site-questions { border-top: 1px solid var(--vit-filet); }
.site-question { border-bottom: 1px solid var(--vit-filet); }
.site-question > summary {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 4px; cursor: pointer; list-style: none;
  font-size: clamp(16px, 1.6vw, 18px); font-weight: 600; letter-spacing: -.01em;
  color: var(--vit-texte);
}
.site-question > summary::-webkit-details-marker { display: none; }
.site-question > summary:hover { color: var(--vit-primaire); }
.site-question > summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--vit-anneau); border-radius: var(--vit-rayon-sm); }
.site-question > summary::after {
  content: ''; margin-inline-start: auto; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(var(--vit-primaire), var(--vit-primaire)) center/100% 1.5px no-repeat,
    linear-gradient(var(--vit-primaire), var(--vit-primaire)) center/1.5px 100% no-repeat;
  transition: transform .2s ease;
}
.site-question[open] > summary::after {
  background: linear-gradient(var(--vit-primaire), var(--vit-primaire)) center/100% 1.5px no-repeat;
  transform: rotate(180deg);
}
.site-question > p { margin: 0; padding: 0 4px 22px; max-width: 72ch; font-size: 15px; line-height: 1.7; color: var(--vit-sourdine); }

/* ── LA FIN, ET LE PIED ──────────────────────────────────────────────────── */

.site-final {
  text-align: center;
  background: var(--vit-doux);
}
.site-final .site-sous { margin-block: 0 28px; }

.site-pied { padding-block: 28px; border-top: 1px solid var(--vit-filet); background: var(--vit-fond); }
.site-pied-rang { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 14px; color: var(--vit-tres-doux); }
.site-pied-rang nav { display: flex; flex-wrap: wrap; gap: 4px; margin-inline-start: auto; }

/* ── LES APPARITIONS ─────────────────────────────────────────────────────── */

/* Elles ne cachent RIEN sans JavaScript : la règle est gardée par `.a-js`, le
   marqueur que la coquille pose dans le <head>. */
:root.a-js [data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.2, .6, .2, 1), transform .6s cubic-bezier(.2, .6, .2, 1);
}
:root.a-js [data-reveal].est-vu { opacity: 1; transform: none; }

/* Quelqu'un qui règle son navigateur sur « moins d'animations » ne reçoit
   aucune des nôtres. */
@media (prefers-reduced-motion: reduce) {
  :root.a-js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .site-cmp.est-invite { animation: none; }
  .site-btn, .site-lien, .site-cmp-poignee, .site-question > summary::after { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   LES PHOTOS DU PROPRIÉTAIRE (2026-09-23)
   ════════════════════════════════════════════════════════════════════════
   Douze images livrées dans un dossier, petites (200 à 1 000 px) : on les
   pose à leur taille ou à peine plus, jamais en grand fond. Toutes dans un
   cadre aux angles de la page, sur un fond doux le temps qu'elles arrivent.
   `object-fit: cover` : le cadre commande, l'image s'y range. */

.site-heros-image { margin: 0; width: 100%; max-width: 640px; margin-inline: auto; }
.site-heros-image img {
  display: block; width: 100%; height: auto; border-radius: var(--vit-rayon-xl);
  background: var(--vit-doux); box-shadow: 0 24px 60px -36px rgba(0, 0, 0, .3);
}

/* Les atouts deviennent des CARTES à photo : l'image en tête, le signe posé
   dessus en bas à gauche, les mots dessous. */
.site-atouts-grille { text-align: start; }
.site-atout { justify-items: start; position: relative; }
.site-atout-photo {
  width: 100%; aspect-ratio: 16 / 10; border-radius: var(--vit-rayon); overflow: hidden;
  background: var(--vit-doux); margin-bottom: -22px;
}
.site-atout-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.site-atout .site-ico {
  position: relative; margin-inline-start: 16px; background: var(--vit-carte);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.site-atout h3, .site-atout p { padding-inline: 16px; }
.site-atout p { max-width: none; }

.site-frise-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Le comparateur prend le FORMAT des photos livrées (presque carré) : les
   étirer en portrait aurait fait un flou de la moitié de leur hauteur. */
.site-cmp { aspect-ratio: 11 / 10; max-width: 460px; }
.site-cmp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Les trois temps de la démonstration : une photo par temps, après ses mots. */
.site-tempo-photo {
  margin: 22px 0 0; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--vit-rayon);
  overflow: hidden; background: var(--vit-doux);
}
.site-tempo-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Le téléphone tenu en main est presque carré : dans un cadre 4/3, c'est le
   bas (la main) qu'on sacrifie, pas le haut de l'écran. */
.site-tempo-photo img.est-haut { object-position: center top; }
@media (prefers-reduced-motion: no-preference) {
  .site-tempo-photo img { transition: transform .6s var(--vit-elan); }
  .site-tempo:hover .site-tempo-photo img { transform: scale(1.03); }
}

.site-questions-photo { margin: 24px 0 0; max-width: 320px; border-radius: var(--vit-rayon); overflow: hidden; background: var(--vit-doux); }
.site-questions-photo img { width: 100%; height: auto; display: block; }
@media (max-width: 959px) { .site-questions-photo { display: none; } }

/* ── LES FONCTIONS, EN CARTES (2026-09-23) ──────────────────────────────────
   Dix cartes sur trois colonnes, un signe en tête, un titre, quatre lignes.
   Le fond doux fait la carte ; pas de filet, pas d'ombre : c'est la grille
   qui range. */
.site-fonc-grille {
  list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0;
  display: grid; gap: 14px;
}
@media (min-width: 700px)  { .site-fonc-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .site-fonc-grille { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.site-fonc-grille li {
  padding: 24px 24px 26px; border-radius: var(--vit-rayon-xl);
  background: var(--vit-doux);
  display: grid; align-content: start; gap: 10px;
}
.site-fonc-grille .site-ico { background: var(--vit-carte); margin-bottom: 6px; }
.site-fonc-grille h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.015em; color: var(--vit-texte); }
.site-fonc-grille p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--vit-sourdine); }
.site-fonc-grille em { font-style: italic; color: var(--vit-texte); }
.site-sous.est-centre { text-align: center; max-width: 56ch; }

/* ════════════════════════════════════════════════════════════════════════
   LA SIGNATURE (propriétaire, 2026-09-24 : « quelque chose d'unique, moderne »)
   ════════════════════════════════════════════════════════════════════════
   Trois choses reviennent sur toute la page, et rien d'autre : l'ANNEAU du
   logo, agrandi au trait de cuivre, derrière la photo du héros ; UN mot par
   titre en italique serif cuivre, là où tout le reste est en sans-serif ; et
   des NUMÉROS en serif fin. Une page se reconnaît à ce qu'elle répète. */

/* Les chiffres sous le héros : trois faits, et le trait qui les sépare. */
.site-chiffres {
  display: flex; flex-wrap: wrap; gap: 0 clamp(24px, 3vw, 40px);
  margin: clamp(28px, 4vw, 44px) 0 0; padding-top: 22px;
  border-top: 1px solid var(--vit-filet);
}
.site-chiffres > div { display: grid; gap: 2px; min-width: 7rem; }
.site-chiffres dt {
  font-family: var(--vit-serif); font-weight: 400; font-size: clamp(34px, 3.4vw, 44px);
  line-height: 1; letter-spacing: -.02em; color: var(--vit-texte);
}
.site-chiffres dd { margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--vit-tres-doux); }

/* L'image du héros, ses deux anneaux et son étiquette. */
.site-heros-image { position: relative; isolation: isolate; padding: 24px 0 0 24px; }
.site-heros-image img { position: relative; z-index: 1; border-radius: 28px; box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .35); }
.site-anneau {
  position: absolute; border-radius: 50%; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--vit-primaire) 55%, transparent);
}
.site-anneau.est-un  { width: 62%; aspect-ratio: 1; top: -12%; left: -6%; }
.site-anneau.est-deux { width: 38%; aspect-ratio: 1; bottom: -14%; right: -8%;
  border-color: color-mix(in srgb, var(--vit-primaire) 30%, transparent); }
.site-etiquette {
  position: absolute; z-index: 2; left: 0; bottom: 8%;
  display: grid; gap: 1px; padding: 12px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--vit-carte) 92%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--vit-filet); box-shadow: 0 14px 40px -20px rgba(0, 0, 0, .3);
  font-size: 12.5px; color: var(--vit-sourdine);
}
.site-etiquette b { font-size: 14px; color: var(--vit-texte); }
@media (max-width: 959px) {
  .site-heros-image { padding: 16px 0 0 16px; }
  .site-etiquette { left: 0; bottom: -10px; }
}

/* Les numéros des trois temps : « 01 », en serif fin, sans pastille. Le rail
   passe derrière, sur un fond qui l'interrompt. */
.site-tempo-num {
  width: auto; height: auto; margin-bottom: 14px; padding-inline-end: 12px;
  border-radius: 0; box-shadow: none; background: var(--vit-doux);
  font-family: var(--vit-serif); font-size: 40px; line-height: 1; letter-spacing: -.02em;
  color: var(--vit-primaire);
}
@media (min-width: 900px) { .site-temps::before { top: 20px; } }

/* La fin, en noir : la page se referme sur son contraire. Le mot en cuivre
   clair pour tenir sur le noir, et le bouton s'inverse. */
.site-final {
  background: var(--vit-encre); color: var(--vit-encre-texte);
  border-radius: 28px; margin-inline: clamp(12px, 2vw, 24px); margin-bottom: clamp(12px, 2vw, 24px);
}
.site-final .site-h2 { color: var(--vit-encre-texte); }
.site-final .site-h2 em { color: #d98b4a; }
.site-final .site-sous { color: color-mix(in srgb, var(--vit-encre-texte) 70%, transparent); }
.site-final .site-btn.est-primaire { background: var(--vit-encre-texte); border-color: var(--vit-encre-texte); color: var(--vit-encre); }
.site-final .site-btn.est-primaire:hover { background: color-mix(in srgb, var(--vit-encre-texte) 88%, var(--vit-encre)); }
.site-pied { border-top: 0; }

/* Les cartes d'atouts et de fonctions : un rayon plus généreux, un fond
   presque blanc, le filet qui apparaît au survol. */
.site-atout-photo { border-radius: 22px; }
.site-fonc-grille li { border-radius: 22px; border: 1px solid transparent; transition: border-color .2s ease, transform .3s var(--vit-elan); }
.site-fonc-grille li:hover { border-color: color-mix(in srgb, var(--vit-primaire) 35%, transparent); transform: translateY(-2px); }
.site-tarif { border-radius: 24px; }