@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --encre: #111111;
  --papier: #ffffff;
  --gris: #f3f3f2;
  --gris-texte: #555555;
  --trait: #e2e2e0;
  --marge: clamp(1.1rem, 5vw, 4rem);
  --large: 72rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--encre);
  background: var(--papier);
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; line-height: 1.08; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }

.evitement {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--encre); color: var(--papier); padding: .6rem 1rem; border-radius: .5rem;
}
.evitement:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }

/* ---------- état de départ des animations (posé dans le <head>) ---------- */
html.attente .anime, html.attente .revele, html.attente .entete { visibility: hidden; }

/* ---------- en-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem var(--marge);
  background: var(--papier);
  border-bottom: 1px solid var(--trait);
}
.entete-logo img { height: 34px; width: auto; }
.entete-nav { display: flex; gap: 1.6rem; margin-left: auto; }
.entete-nav a { text-decoration: none; font-weight: 600; font-size: .95rem; padding: .6rem 0; }
.entete-nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
@media (max-width: 760px) {
  .entete-nav { display: none; }
  .entete .bouton { margin-left: auto; }
}

/* ---------- boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: .8rem 1.6rem;
  background: var(--encre); color: var(--papier);
  font-weight: 700; text-decoration: none; border-radius: 999px 120px 999px 140px / 60px 999px 80px 999px;
  transition: transform .2s ease;
}
.bouton:hover { transform: translateY(-2px) rotate(-1deg); }
.bouton-petit { min-height: 44px; padding: .5rem 1.1rem; font-size: .92rem; }
.bouton-inverse { background: var(--papier); color: var(--encre); }
.lien-fleche { font-weight: 700; text-decoration: none; padding: .8rem 0; }
.lien-fleche::after { content: " →"; display: inline-block; transition: transform .2s ease; }
.lien-fleche:hover::after { transform: translateX(4px); }
.lien-clair { color: var(--papier); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }

/* ---------- textes communs ---------- */
.surtitre {
  font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris-texte); margin-bottom: 1rem;
}
.surtitre-clair { color: #b9b9b6; }
.titre-geant { font-size: clamp(2.15rem, 7.2vw, 5.8rem); font-weight: 800; letter-spacing: -.035em; }
.titre-section { font-size: clamp(1.8rem, 4.6vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; max-width: 20ch; }
.chapeau { font-size: clamp(1.08rem, 1.6vw, 1.3rem); color: var(--gris-texte); max-width: 40rem; }

.peint { position: relative; display: inline-block; z-index: 0; }
.peint .trait {
  position: absolute; left: 0; bottom: .02em; width: 100%; height: .32em;
  z-index: -1; fill: var(--encre); opacity: .9;
}
.accueil .peint .trait { fill: #d9d9d6; height: .42em; bottom: .04em; }

.bloc { max-width: var(--large); margin: 0 auto; padding: clamp(4rem, 10vw, 8rem) var(--marge); }

/* ---------- accueil ---------- */
.accueil {
  position: relative; isolation: isolate; overflow: hidden; max-width: var(--large); margin: 0 auto;
  padding: clamp(3.5rem, 12vw, 9rem) var(--marge) clamp(3.5rem, 8vw, 6rem);
  display: grid; gap: 1.6rem; grid-template-columns: minmax(0, 1fr);
}
.accueil .titre-geant { max-width: 15ch; }
.preuves {
  list-style: none; margin: 1.4rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid var(--trait);
  display: flex; flex-wrap: wrap; gap: .6rem 2.4rem; color: var(--gris-texte);
}
.preuves strong { color: var(--encre); font-size: 1.6rem; margin-right: .35rem; }

/* ---------- services ---------- */
.services { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin-top: 3rem; }
.service {
  background: var(--gris); border-radius: 1.4rem; padding: 1.8rem 1.6rem 2rem;
  transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.service:hover { transform: translateY(-4px); background: var(--encre); color: var(--papier); }
.service:hover p { color: #cfcfcc; }
.service h3 { font-size: 1.35rem; margin: 1.6rem 0 .6rem; }
.service p { color: var(--gris-texte); font-size: 1rem; transition: color .25s ease; }
.numero { font-weight: 800; font-size: .9rem; letter-spacing: .1em; }

/* ---------- l'outil ---------- */
.outil { background: var(--encre); color: var(--papier); }
.outil .chapeau { color: #c4c4c1; margin-top: 1.4rem; }
.outil-tete { padding-bottom: 2rem; }

.scene {
  max-width: var(--large); margin: 0 auto; padding: 0 var(--marge) 2rem;
  display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
}
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.4rem; }
.etape-heure {
  display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--encre); background: var(--papier); padding: .2rem .7rem; border-radius: 999px 60px 999px 80px;
  margin-bottom: .8rem;
}
.etape h3 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); letter-spacing: -.02em; margin-bottom: .6rem; }
.etape p { color: #c4c4c1; max-width: 30rem; }

/* mode « scène » (posé par le JS) : une étape à la fois */
.scene.joue { min-height: 100svh; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.scene.joue .etapes { display: grid; gap: 0; }
.scene.joue .etape {
  grid-area: 1 / 1; opacity: 0; transform: translateY(18px);
  transition: opacity .45s ease, transform .45s ease;
}
.scene.joue .etape.active { opacity: 1; transform: none; }

.telephone-zone { display: grid; place-items: center; }
.telephone {
  width: min(320px, 78vw); aspect-ratio: 9 / 18.5; border-radius: 2.6rem;
  background: #2a2a2a; padding: .65rem; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .8);
}
.ecran {
  position: relative; height: 100%; border-radius: 2rem; overflow: hidden;
  background: var(--papier); color: var(--encre); padding: 2.4rem 1rem 1rem;
  display: flex; flex-direction: column; gap: .9rem; font-size: .9rem; line-height: 1.45;
}
.fiche-entete { display: flex; gap: .7rem; align-items: center; padding-bottom: .9rem; border-bottom: 1px solid var(--trait); }
.fiche-photo { width: 46px; height: 46px; flex: none; border-radius: .8rem; background: linear-gradient(135deg, #c9a46a, #7a5528); }
.fiche-nom { font-weight: 800; }
.fiche-note { font-size: .8rem; color: var(--gris-texte); }
.etoiles { color: #e3a008; letter-spacing: .05em; }
.couches { position: relative; flex: 1; display: grid; }
.couche { grid-area: 1 / 1; display: flex; flex-direction: column; gap: .7rem; }
.couche-titre { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-texte); }
.avis, .reponse, .pub { background: var(--gris); border-radius: 1rem; padding: .8rem .9rem; }
.avis-auteur { font-weight: 700; margin-bottom: .2rem; }
.reponse { background: var(--papier); border: 1.5px solid var(--encre); }
.reponse-titre { font-weight: 800; font-size: .78rem; margin-bottom: .25rem; }
.reponse-texte { min-height: 4.4em; }
.pub { padding: 0; overflow: hidden; }
.pub p { padding: .7rem .9rem .9rem; }
.pub-visuel {
  aspect-ratio: 16 / 10; display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle at 30% 30%, #f2d59b, #b67a2f 70%); color: var(--papier);
}
.pub-visuel span { font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; text-shadow: 0 2px 10px rgb(0 0 0 / .35); }
.pub-visuel small { font-weight: 700; }
.graphe { height: 130px; display: flex; align-items: flex-end; gap: 8px; padding: 0 .2rem; border-bottom: 1.5px solid var(--encre); }
.graphe span { flex: 1; height: var(--h); background: var(--encre); border-radius: 6px 6px 0 0; transform-origin: bottom; }
.mesures { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.mesures li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; font-size: .82rem; }
.mesures i { height: 8px; border-radius: 99px; background: var(--encre); transform-origin: left; }
.mesures li:nth-child(1) i { width: 86%; }
.mesures li:nth-child(2) i { width: 64%; }
.mesures li:nth-child(3) i { width: 48%; }
.ecran-mention { font-size: .68rem; color: #8a8a87; text-align: center; }

/* sans JS : seule la couche « réponse » est visible */
.couche { visibility: hidden; }
.couche[data-couche="1"] { visibility: visible; }
.scene.joue .couche {
  visibility: visible; opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity .4s ease, transform .4s ease;
}
.scene.joue .couche.active { opacity: 1; transform: none; }
.scene.joue .couche:not(.active) .graphe span, .scene.joue .couche:not(.active) .mesures i { transform: scale(0); }
.graphe span, .mesures i { transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.graphe span:nth-child(2) { transition-delay: .05s; }
.graphe span:nth-child(3) { transition-delay: .1s; }
.graphe span:nth-child(4) { transition-delay: .15s; }
.graphe span:nth-child(5) { transition-delay: .2s; }
.graphe span:nth-child(6) { transition-delay: .25s; }

.titre-liste { font-size: 1.4rem; margin-bottom: 1.6rem; }
.fonctions {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  background: #333; border: 1px solid #333; border-radius: 1.2rem; overflow: hidden;
}
.fonctions li { background: var(--encre); padding: 1.3rem 1.4rem; color: #c4c4c1; }
.fonctions strong { color: var(--papier); }

/* ---------- méthode ---------- */
.methode {
  list-style: none; margin: 3rem 0 0; padding: 0;
  display: grid; gap: 2.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.methode .numero {
  display: grid; place-items: center; width: 3rem; height: 3rem; font-size: 1.2rem;
  background: var(--encre); color: var(--papier); border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
}
.methode h3 { font-size: 1.4rem; margin: 1.2rem 0 .5rem; }
.methode p { color: var(--gris-texte); }

/* ---------- questions ---------- */
.faq { margin-top: 2.6rem; border-top: 1px solid var(--trait); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.3rem 2.6rem 1.3rem 0; position: relative;
  font-weight: 700; font-size: 1.12rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .3rem; top: 50%; translate: 0 -50%;
  font-size: 1.6rem; font-weight: 400; transition: rotate .25s ease;
}
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding: 0 0 1.4rem; color: var(--gris-texte); max-width: 46rem; }

/* ---------- contact ---------- */
.contact {
  background: var(--encre); color: var(--papier);
  padding: clamp(5rem, 14vw, 10rem) var(--marge);
  display: grid; gap: 1.6rem; justify-items: center; text-align: center;
}
.contact .chapeau { color: #c4c4c1; }
.contact .actions { justify-content: center; }
.titre-contact .trait { fill: var(--papier); opacity: .25; }

/* ---------- pied ---------- */
.pied {
  padding: 3rem var(--marge); display: grid; gap: .7rem; justify-items: center; text-align: center;
  color: var(--gris-texte); font-size: .95rem;
}
.pied img { height: 30px; width: auto; }
.pied-petit { font-size: .82rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

section[id] { scroll-margin-top: 4.5rem; }
.accueil .peint .trait { fill: var(--encre); opacity: 1; height: .14em; bottom: -.06em; }
.accueil-texte { display: grid; gap: 1.6rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) {
  .accueil { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 3rem; }
}
@media (min-width: 980px) {
  .accueil .titre-geant { font-size: clamp(2.6rem, 4.7vw, 4.7rem); max-width: 14ch; }
}
@media (min-width: 980px) {
  .accueil .titre-geant { max-width: none; font-size: clamp(2.6rem, 4.3vw, 4.4rem); }
  .accueil .peint { white-space: nowrap; }
}

/* ---------- téléphone : accueil à plat, rien ne se chevauche (retour Jihan 02/11) ---------- */
@media (max-width: 979px) {
  .preuves { gap: .4rem 1.6rem; }
}
img.fiche-photo { object-fit: cover; background: var(--gris); }
.pub-visuel { position: relative; overflow: hidden; background: #3a2a1a; }
.pub-visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pub-visuel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .05), rgb(0 0 0 / .55)); }
.pub-visuel span, .pub-visuel small { position: relative; z-index: 1; }
.service { padding-top: 1rem; }
.service-photo {
  width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 1rem; margin-bottom: 1.2rem; background: #ddd;
}
.service h3 { margin-top: .8rem; }

/* ---------- titres de section centrés sur tous les écrans (03/11) ---------- */
#services > .surtitre, #services > .titre-section,
.outil-tete, #methode > .surtitre, #methode > .titre-section,
#questions > .surtitre, #questions > .titre-section, .titre-liste {
  text-align: center; margin-left: auto; margin-right: auto;
}
.outil-tete .titre-section, .outil-tete .chapeau { margin-left: auto; margin-right: auto; }
.methode li { text-align: center; }
.methode .numero { margin: 0 auto; }
.methode p { max-width: 22rem; margin: 0 auto; }
.faq { margin-left: auto; margin-right: auto; }

/* ---------- téléphone : TOUT est centré (règle Jihan, cf. SellerSite mobile-center) ---------- */
@media (max-width: 979px) {
  .accueil, .accueil-texte { justify-items: center; text-align: center; }
  .accueil .titre-geant, .accueil .chapeau { margin-left: auto; margin-right: auto; }
  .actions { justify-content: center; flex-direction: column; gap: .4rem; }
  .preuves { justify-content: center; width: 100%; }
  .service { text-align: center; }
  .scene.joue .etape { text-align: center; }
  .etape p { margin: 0 auto; }
  .fonctions li { text-align: center; }
  .faq summary { text-align: center; padding-left: 2.2rem; padding-right: 2.2rem; }
  .faq details p { text-align: center; }
}
@media (max-width: 979px) {
  .preuves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; text-align: center; }
  .preuves li { display: grid; justify-items: center; line-height: 1.25; font-size: .9rem; }
  .preuves strong { margin: 0; }
}
@media (max-width: 979px) {
  .chapeau, .service p, .etape p, .methode p, .faq details p, .fonctions li, .contact .chapeau, .pied p { text-wrap: balance; }
}

/* ==========================================================================
   Style épuré façon Apple (03/11, demande Jihan) — boutons et boîtes
   pilules bleues, surfaces #f5f5f7, coins réguliers, ombres douces, rien de penché
   ========================================================================== */
:root {
  --encre: #1d1d1f;
  --gris: #f5f5f7;
  --gris-texte: #6e6e73;
  --trait: #d2d2d7;
  --bleu: #0071e3;
  --bleu-survol: #0077ed;
  --bleu-lien: #0066cc;
  --rayon: 18px;
  --ombre: 0 2px 6px rgb(0 0 0 / .04), 0 12px 32px rgb(0 0 0 / .08);
}
body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Manrope", system-ui, "Segoe UI", sans-serif; }
.titre-geant, .titre-section { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Manrope", system-ui, sans-serif; font-weight: 700; }
.surtitre { letter-spacing: .02em; text-transform: none; font-size: .95rem; font-weight: 600; color: var(--bleu-lien); }
.surtitre-clair { color: #2997ff; }
.peint { color: var(--bleu); }
.outil .peint, .contact .peint { color: #2997ff; }

/* en-tête : verre dépoli (opaque si pas de flou, cf. retour du 02/11) */
.entete { background: rgb(255 255 255 / .98); border-bottom-color: rgb(0 0 0 / .08); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .entete { background: rgb(255 255 255 / .97); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
}

/* boutons */
.bouton {
  min-height: 48px; padding: .75rem 1.5rem; border-radius: 980px;
  background: var(--bleu); color: #fff; font-weight: 500; font-size: 1.0625rem; letter-spacing: -.01em;
  transition: background-color .2s ease, transform .1s ease-out;
}
.bouton:hover { background: var(--bleu-survol); transform: none; }
.bouton:active { transform: scale(.97); }
.bouton:focus-visible { outline: 3px solid rgb(0 113 227 / .45); outline-offset: 2px; }
.bouton-petit { min-height: 36px; padding: .4rem 1rem; font-size: .9rem; }
.bouton-inverse { background: #fff; color: var(--encre); }
.bouton-inverse:hover { background: #f0f0f2; }
.lien-fleche { color: var(--bleu-lien); font-weight: 500; }
.lien-fleche::after { content: " ›"; }
.lien-clair { color: #2997ff; }

/* boîtes : services */
.services { gap: 1.25rem; }
.service {
  background: var(--gris); border-radius: var(--rayon); padding: 1rem 1rem 1.8rem;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s cubic-bezier(.2, .8, .2, 1);
}
.service:hover { background: var(--gris); color: inherit; transform: scale(1.015); box-shadow: var(--ombre); }
.service:hover p { color: var(--gris-texte); }
.service-photo { border-radius: 12px; }
.service h3 { font-weight: 600; letter-spacing: -.015em; }
.service .numero { color: var(--gris-texte); font-weight: 600; letter-spacing: .02em; }


/* section sombre de l'outil */
.outil { background: #000; }
.etape-heure { border-radius: 980px; font-weight: 600; letter-spacing: .02em; text-transform: none; font-size: .85rem; background: #1d1d1f; color: #f5f5f7; padding: .25rem .8rem; }
.telephone { background: #1d1d1f; box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 40px 80px -30px rgb(0 0 0 / .9); }
.avis, .reponse, .pub { border-radius: 14px; }
.reponse { border: 0; background: #e8f1fd; }
.reponse-titre { color: var(--bleu-lien); }
.graphe { border-bottom: 1px solid var(--trait); }
.graphe span { background: var(--bleu); }
.mesures i { background: var(--bleu); }
.fonctions { gap: .75rem; background: none; border: 0; border-radius: 0; overflow: visible; }
.fonctions li { background: #1d1d1f; border-radius: var(--rayon); padding: 1.4rem 1.5rem; color: #a1a1a6; }
.fonctions strong { color: #f5f5f7; font-weight: 600; }

/* méthode : pastille ronde régulière */
.methode .numero { border-radius: 50%; background: var(--gris); color: var(--bleu-lien); font-weight: 600; }
.methode h3 { font-weight: 600; letter-spacing: -.015em; }

/* questions : boîtes grises arrondies */
.faq { border-top: 0; display: grid; gap: .75rem; }
.faq details { border-bottom: 0; background: var(--gris); border-radius: var(--rayon); padding: 0 1.4rem; }
.faq summary { font-weight: 600; padding-top: 1.2rem; padding-bottom: 1.2rem; }
.faq summary::after { color: var(--bleu); font-size: 1.4rem; }
.faq details p { padding-bottom: 1.3rem; }

/* contact */
.contact { background: #000; }
.contact .bouton-inverse { background: var(--bleu); color: #fff; }
.contact .bouton-inverse:hover { background: var(--bleu-survol); }

@media (prefers-reduced-transparency: reduce) {
  .entete { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .entete { background: #fff; }
}
@media (max-width: 979px) {
  .faq details { padding: 0 .9rem; }
  .faq summary { padding-left: 1.6rem; padding-right: 1.6rem; }
  .faq summary::after { right: 0; }
}

/* ==========================================================================
   Téléphone (03/11) : écran façon fiche Google, taille FIGÉE
   (avant : aspect-ratio + hauteur auto → le téléphone grandissait avec son contenu)
   ========================================================================== */
.telephone { --tw: min(320px, 78vw, calc((100svh - 7rem) / 2.05)); width: var(--tw); height: calc(var(--tw) * 2.05); aspect-ratio: auto; flex: none; }
.ecran { padding: 0 0 .9rem; gap: .7rem; }
.ecran-couverture { width: 100%; height: auto; aspect-ratio: 2.2 / 1; object-fit: cover; flex: none; }
.fiche-entete { display: block; padding: 0 1rem; border-bottom: 0; }
.fiche-nom { font-size: 1.15em; font-weight: 700; letter-spacing: -.01em; }
.fiche-note { font-size: .8em; color: #5f6368; line-height: 1.5; }
.ouvert { color: #188038; font-weight: 600; }
.fiche-actions { display: flex; justify-content: space-between; padding: 0 1rem .7rem; border-bottom: 1px solid #e8eaed; }
.fiche-actions span { display: grid; justify-items: center; gap: .25rem; font-size: .66em; font-weight: 600; color: #1a73e8; }
.fiche-actions i { width: 2.6em; height: 2.6em; border-radius: 50%; display: grid; place-items: center; background: #e8f0fe; }
.fiche-actions i.plein { background: #1a73e8; }
.fiche-actions svg { width: 1.25em; height: 1.25em; fill: #1a73e8; }
.fiche-actions i.plein svg { fill: #fff; }
.fiche-actions svg.trace { fill: none; stroke: #1a73e8; stroke-width: 2; }
.couches { padding: 0 1rem; min-height: 0; }
.couche { min-height: 0; }

@media (max-width: 979px) {
  .accueil { padding-top: clamp(2rem, 8vw, 3rem); }
  /* la scène de l'outil devient une simple liste : le téléphone animé est déjà dans l'accueil */
  .scene { grid-template-columns: minmax(0, 1fr); }
  .scene .telephone-zone { display: none; }
  .etape { text-align: center; }
  .etape p { margin: 0 auto; }
}
/* la scène épinglée démarre sous l'en-tête : elle ne doit pas dépasser la fenêtre */
.scene.joue { min-height: calc(100svh - 4rem); padding-top: 1rem; padding-bottom: 1rem; }

/* ==========================================================================
   Accueil (03/11, demande Jihan) : le téléphone reçoit un avis, le curseur clique
   « Générer une réponse », la réponse s'écrit ; trois avis en boucle (js/main.js).
   Taille du téléphone FIGÉE : le contenu ne la fait jamais varier.
   ========================================================================== */
.demo { position: relative; display: grid; justify-items: center; gap: 1rem; }
.demo .telephone { --tw: min(300px, 76vw); height: calc(var(--tw) * 1.92); }
.demo .ecran { padding: 1.6rem 1rem 1rem; gap: .75rem; font-size: .86rem; justify-content: flex-start; }
.demo-tete { display: flex; align-items: center; gap: .6rem; padding-bottom: .75rem; border-bottom: 1px solid #e8eaed; }
.demo-g { width: 1.9em; height: 1.9em; flex: none; }
.demo-nom { font-weight: 700; letter-spacing: -.01em; }
.demo-note { font-size: .8em; color: #5f6368; }
.demo-notif {
  position: absolute; left: .7rem; right: .7rem; top: .7rem; z-index: 2; display: flex; gap: .5rem; align-items: baseline;
  background: rgb(255 255 255 / .96); border-radius: 14px; padding: .65rem .8rem; font-size: .9em;
  box-shadow: 0 2px 6px rgb(0 0 0 / .06), 0 10px 24px rgb(0 0 0 / .14);
}
.demo-notif b { color: #1a73e8; }
.demo-avis { background: var(--gris); border-radius: 14px; padding: .75rem .85rem; display: grid; gap: .4rem; }
.demo-auteur { display: flex; align-items: center; gap: .55rem; }
.demo-auteur p { display: grid; line-height: 1.25; }
.demo-etoiles { font-size: .8em; color: #5f6368; }
.demo-initiale { width: 2em; height: 2em; flex: none; border-radius: 50%; display: grid; place-items: center; background: #1a73e8; color: #fff; font-weight: 700; }
.demo-texte { min-height: 4.35em; }
.demo-bouton {
  align-self: center; display: grid; place-items: center; min-height: 2.6em; padding: 0 1.1rem; border-radius: 980px;
  background: var(--bleu); color: #fff; font-weight: 600; white-space: nowrap;
}
.demo-bouton.fait { background: #188038; }
.demo-reponse { background: #e8f1fd; border-radius: 14px; padding: .75rem .85rem; }
.demo-reponse-titre { font-weight: 700; font-size: .8em; color: var(--bleu-lien); margin-bottom: .2rem; }
.demo-pile { display: grid; }
.demo-fantome, .demo-frappe { grid-area: 1 / 1; }
.demo-fantome { visibility: hidden; }
.demo-ok { display: none; }
.curseur { position: absolute; left: 0; top: 0; width: 26px; height: 26px; z-index: 3; pointer-events: none; visibility: hidden;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / .25)); }
.demo-legende { display: flex; align-items: center; gap: .7rem; font-size: .92rem; font-weight: 600; color: var(--gris-texte); min-height: 1.6em; }
.demo-points { display: inline-flex; gap: .35rem; }
.demo-points i { width: 7px; height: 7px; border-radius: 50%; background: var(--trait); transition: background-color .3s ease, transform .3s ease; }
.demo-points i.actif { background: var(--bleu); transform: scale(1.25); }
/* sans JS ou mouvement réduit : le 1er avis et sa réponse, immobiles */
.demo-notif { visibility: hidden; }
.demo.joue .curseur { visibility: visible; }

@media (min-width: 980px) {
  .accueil { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 3rem; row-gap: 1.6rem; align-items: center; }
  .accueil-texte { display: contents; }
  .accueil-texte > * { grid-column: 1; }
  .accueil .demo { grid-column: 2; grid-row: 1 / span 6; align-self: center; }
  .demo .telephone { --tw: min(310px, calc((100svh - 9rem) / 1.92)); }
}
@media (max-width: 979px) {
  .demo { margin: .4rem 0; }
  .demo .telephone { --tw: min(270px, 74vw); border-radius: 2.4rem; padding: .5rem;
    box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 30px 60px -20px rgb(0 0 0 / .35); }
  .demo .ecran { border-radius: 1.95rem; font-size: .8rem; padding: 1.3rem .85rem .85rem; gap: .6rem; }
  .demo-legende { justify-content: center; }
}
.demo .etoiles .vide { color: #dadce0; }
.demo .ecran { text-align: left; font-size: .92rem; }
@media (max-width: 979px) { .demo .ecran { font-size: .86rem; } }

/* ---------- forfait unique (03/11) ---------- */
#forfait > .surtitre, #forfait > .titre-section, .forfait-chapeau { text-align: center; margin-left: auto; margin-right: auto; }
.forfait-chapeau { margin-top: 1.2rem; }
.forfait { display: grid; gap: 1.25rem; margin-top: 3rem; grid-template-columns: minmax(0, 1fr); }
.forfait-colonnes { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.forfait-groupe { background: var(--gris); border-radius: var(--rayon); padding: 1rem 1rem 1.6rem; }
.forfait-groupe h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -.015em; margin: .4rem .4rem .8rem; }
.forfait-groupe ul, .prix ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.forfait-groupe li { color: var(--gris-texte); margin: 0 .4rem; padding-left: 1.5rem; position: relative; }
.forfait-groupe li::before, .prix li::before { content: "✓"; position: absolute; left: 0; color: var(--bleu); font-weight: 700; }
.forfait-groupe strong { color: var(--encre); font-weight: 600; }
.prix {
  background: var(--papier); border-radius: var(--rayon); box-shadow: var(--ombre); border: 1px solid var(--trait);
  padding: 2rem 1.8rem; display: grid; gap: 1.2rem; align-content: center; justify-items: start;
}
.prix-nom { font-weight: 600; color: var(--bleu-lien); }
.prix-montant { color: var(--gris-texte); font-size: 1.1rem; }
.prix-montant strong { display: block; color: var(--encre); font-size: clamp(3rem, 6vw, 4.2rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.prix-ttc { color: var(--gris-texte); font-size: .95rem; margin-top: .35rem; }
.prix li { position: relative; padding-left: 1.5rem; color: var(--gris-texte); }
.options-titre { margin-top: 4.5rem; }
@media (min-width: 980px) {
  .forfait { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; }
}
@media (max-width: 979px) {
  .forfait-groupe h3, .prix { text-align: center; }
  .prix { justify-items: center; }
  .forfait-groupe li, .prix li { text-align: left; }
  .forfait-chapeau { text-wrap: balance; }
}
.services-seul { grid-template-columns: minmax(0, 1fr); max-width: 34rem; margin-left: auto; margin-right: auto; }
.forfait-groupe li, .prix li, .service p { text-wrap: balance; }

/* ---------- illustrations du forfait, en HTML (03/11) : la taille de base suit la largeur de la carte
   (cqi), tout le reste est en em ; l'illustration garde ses proportions et le texte reste net ---------- */
.ill {
  container-type: inline-size; position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 1rem; margin-bottom: 1.2rem; text-align: left;
  background: radial-gradient(120% 90% at 85% 0%, #e3ecfb 0%, transparent 60%), linear-gradient(165deg, #fbfbfa, #eceff3);
}
.forfait-groupe .ill { aspect-ratio: 4 / 3; }
.ill-corps { position: absolute; inset: 0; font-size: 4.3cqi; line-height: 1.3; color: #202124; }
.ill-site .ill-corps { font-size: 2.9cqi; }
.ill-corps > * { position: absolute; margin: 0; }
.ill p, .service .ill p, .service:hover .ill p { color: inherit; margin: 0; text-wrap: nowrap; }
.ill-carte { background: #fff; border-radius: .8em; box-shadow: 0 .1em .25em rgb(0 0 0 / .05), 0 .8em 1.8em -.5em rgb(30 40 60 / .2); }
.ill-etoiles { font-style: normal; color: #f4b400; letter-spacing: .04em; font-size: .85em; }
.ill-puce {
  display: flex; align-items: center; gap: .45em; background: #fff; border-radius: 99px; padding: .45em .85em;
  font-size: .82em; font-weight: 600; box-shadow: 0 .6em 1.4em -.4em rgb(30 40 60 / .28);
}
.ill-puce i { width: .55em; height: .55em; border-radius: 50%; background: var(--bleu); flex: none; }

/* avis */
.ill-avis-carte { left: 6%; top: 8%; width: 62%; padding: .85em; display: grid; gap: .5em; }
.ill-auteur { display: flex; align-items: center; gap: .5em; }
.ill-auteur > span:last-child { display: grid; line-height: 1.15; }
.ill-pastille { width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--c); color: #fff; font-weight: 700; }
.ill-texte { color: #3c4043; text-wrap: balance !important; }
.ill-reponse { background: #e8f0fe; border-radius: .55em; padding: .5em .6em; display: grid; gap: .1em; font-size: .9em; }
.ill-reponse b { color: #1a73e8; font-size: .85em; }
.ill-qr { right: 6%; top: 16%; width: 25%; padding: .6em; display: grid; justify-items: center; gap: .4em; text-align: center; }
.ill-qr img { width: 100%; height: auto; image-rendering: pixelated; }
.ill-qr b { font-size: .7em; line-height: 1.15; }
.ill-alerte { right: 6%; bottom: 9%; }
.ill-avis2 { left: 5%; bottom: 8%; width: 54%; padding: .6em .8em; display: flex; align-items: center; justify-content: space-between; gap: .5em; }
.ill-vide { color: #dadce0; }
.ill-ok { color: #188038 !important; font-weight: 700; font-size: .8em; }
.ill-avis2 + .ill-alerte { bottom: 12%; right: 4%; font-size: .74em; }
.ill-alerte i { background: #d93025; }

/* fiche */
.ill-fiche-carte { left: 5%; top: 7%; width: 56%; overflow: hidden; }
.ill-couverture { width: 100%; height: auto; aspect-ratio: 2; object-fit: cover; }
.ill-fiche-corps { padding: .6em .75em .8em; display: grid; gap: .2em; }
.ill-nom { font-weight: 700; }
.ill-note { color: #5f6368 !important; font-size: .78em; }
.ill-note b { color: #188038; font-weight: 600; }
.ill-boutons, .ill-cta { display: flex; gap: .35em; margin-top: .3em !important; }
.ill-boutons span, .ill-cta span { border: 1px solid #dadce0; color: #1a73e8; border-radius: 99px; padding: .2em .6em; font-size: .7em; font-weight: 600; white-space: nowrap; }
.ill .plein { background: #1a73e8; border-color: #1a73e8; color: #fff; }
.ill-photo { right: 5%; top: 9%; }
.ill-pub { right: 5%; bottom: 8%; width: 38%; overflow: hidden; }
.ill-pub img { width: 100%; height: auto; aspect-ratio: 1.7; object-fit: cover; }
.ill-pub-texte { display: grid; padding: .45em .6em .55em; font-size: .78em; line-height: 1.2; }
.ill-pub-texte span { color: #1a73e8; font-weight: 600; font-size: .85em; }
.ill-photo i { background: #188038; }

/* site */
.ill-navigateur { left: 6%; top: 10%; width: 70%; height: 80%; overflow: hidden; }
.ill-barre { display: flex; align-items: center; gap: .4em; padding: .65em .9em; background: #f1f3f4; border-bottom: 1px solid #e3e3e3; }
.ill-barre i { width: .6em; height: .6em; border-radius: 50%; background: #d5d7da; flex: none; }
.ill-barre span { margin-left: .6em; background: #fff; border-radius: 99px; padding: .15em .9em; font-size: .8em; color: #5f6368; }
.ill-page { position: absolute; inset: 2.3em 0 0; padding: 1.6em 1.5em; display: grid; gap: .75em; align-content: start;
  background: linear-gradient(90deg, #fff 52%, rgb(255 255 255 / 0) 75%), url("../img/fiche-couverture.webp?v=1") right center / 52% auto no-repeat; }
.ill-titre-page { font-weight: 800; font-size: 1.6em; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance !important; max-width: 9ch; }
.ill-lignes { display: grid; gap: .45em; }
.ill-infos { display: flex; gap: .5em; margin-top: .9em !important; }
.ill-infos span { background: #f1f3f4; border-radius: .5em; padding: .45em .7em; font-size: .72em; font-weight: 600; color: #3c4043; white-space: nowrap; }
.ill-lignes i { display: block; height: .45em; border-radius: 99px; background: #e4e6e8; width: 12em; }
.ill-lignes i + i { width: 9em; }
.ill-mobile { right: 6%; top: 16%; width: 23%; aspect-ratio: 9 / 18; background: #fff; border-radius: 1.4em; border: .4em solid #111;
  overflow: hidden; display: grid; align-content: start; box-shadow: 0 1em 2.5em -.6em rgb(30 40 60 / .35); }
.ill-mobile img { width: 100%; height: auto; aspect-ratio: 1.2; object-fit: cover; }
.ill-mobile div { padding: .7em .7em; display: grid; gap: .5em; }
.ill-mobile .ill-titre-page { font-size: 1.05em; }
.ill-mobile .ill-lignes i { width: 100%; height: .35em; }
.ill-mobile .ill-lignes i + i { width: 70%; }
.ill-mobile .ill-cta span { font-size: .75em; }
@media (max-width: 979px) { .ill-site { aspect-ratio: 4 / 3; } }
@container (max-width: 420px) {
  .ill-site .ill-corps { font-size: 4.2cqi; }
  .ill-navigateur { left: 5%; top: 9%; width: 66%; height: 82%; }
  .ill-page { inset: 2.2em 0 0; padding: 1.1em .9em; background: #fff; }
  .ill-barre span { font-size: .7em; }
  .ill-infos { display: none; }
  .ill-lignes i { width: 8em; }
  .ill-lignes i + i { width: 6em; }
  .ill-mobile { right: 5%; top: 14%; width: 30%; border-width: .3em; border-radius: 1.1em; }
  .ill-mobile .ill-titre-page { font-size: .9em; }
  .ill-mobile .ill-cta span { font-size: .65em; }
}

/* en-tête : « Se connecter » à côté de « S'abonner » (03/11) */
.entete-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.entete-nav + .entete-actions { margin-left: .6rem; }
.entete-actions .bouton, .entete-actions .entete-retour { margin-left: 0; }
.entete-actions .entete-retour { margin-right: .5rem; }
.bouton-second { background: rgb(0 0 0 / .06); color: var(--encre); }
.bouton-second:hover { background: rgb(0 0 0 / .1); }
.entete-logo, .entete-actions { flex-shrink: 0; }
.entete-actions .bouton { white-space: nowrap; }
.libelle-court { display: none; }
@media (max-width: 760px) {
  .entete .entete-actions { margin-left: auto; }
}
@media (max-width: 420px) {
  .entete { gap: .6rem; }
  .entete-actions { gap: .4rem; }
  .entete-actions .bouton-petit { padding: .4rem .85rem; font-size: .85rem; }
  .entete-actions .entete-retour { display: none; }
  .libelle-long { display: none; }
  .libelle-court { display: inline; }
}
@media (max-width: 350px) {
  .entete-logo img { height: 28px; }
  .entete-actions .bouton-petit { padding: .4rem .7rem; }
}