/* =========================================================
   style.css — HairMatch, en sombre. Pensé d'abord pour le
   téléphone, puis élargi pour l'ordinateur. Pages légales comprises.
   ========================================================= */

/* La police est servie par le site : pas de connexion a Google Fonts,
   donc un affichage plus rapide et aucune donnee qui part chez un tiers. */
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/manrope-latin_ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --fond: #09090B;
  --fond-2: #0F0F13;
  --carte: #15151A;
  --carte-2: #1C1C23;
  --carte-3: #24242D;
  --ligne: rgba(255, 255, 255, .08);
  --ligne-2: rgba(255, 255, 255, .14);
  --texte: #F5F5F7;
  --gris: #A1A1AA;
  --gris-2: #8D8D98;   /* éclairci : le petit texte gris passait sous le contraste lisible */
  --violet: #7756F7;   /* un poil plus foncé : le blanc dessus doit rester lisible */
  --violet-2: #9B82FF;
  --violet-fond: rgba(124, 92, 255, .14);
  --accent: linear-gradient(92deg, #A78BFA 0%, #7C5CFF 55%, #60A5FA 100%);
  --vert: #34D399;
  --or: #FBBF24;
  --or-fond: rgba(251, 191, 36, .1);
  --rouge: #F87171;
  --rayon: 22px;
  --bas-securite: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: dark; }
body {
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
body.sans-defilement { overflow: hidden; }
a { color: var(--violet-2); }
button { font-family: inherit; cursor: pointer; color: inherit; }
button:disabled { cursor: not-allowed; opacity: .45; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--gris); }
.petit { font-size: .87rem; }
.petit-texte { text-align: center; color: var(--gris-2); font-size: .8rem; margin: 14px 0 0; line-height: 1.5; }
.petit-texte a { color: var(--gris); }
.accent, .grad-text { background: var(--accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700; color: var(--violet-2); margin: 0 0 10px; }
.erreur { color: var(--rouge); font-weight: 600; font-size: .92rem; margin: 10px 0; }

/* ---------- Animations ---------- */
@keyframes monte { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes depuis-droite { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes depuis-gauche { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
@keyframes doux { from { opacity: 0; } to { opacity: 1; } }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes clignote { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes pop { 0% { transform: translate(-50%, 20px) scale(.9); opacity: 0; } 15%, 85% { transform: translate(-50%, 0) scale(1); opacity: 1; } 100% { transform: translate(-50%, -10px); opacity: 0; } }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes balaye { 0%, 100% { --pos: 22%; } 50% { --pos: 78%; } }
@keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes arrive { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes remplit { from { width: 0; } to { width: 100%; } }

.depuis-droite { animation: depuis-droite .32s ease both; }
.depuis-gauche { animation: depuis-gauche .32s ease both; }
.apparait-doux { animation: doux .3s ease both; }
.anime .apparait { animation: monte .55s cubic-bezier(.2, .7, .2, 1) both; }

/* ---------- Boutons ---------- */
.btn-pill, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; font-weight: 700; font-size: 1rem; text-decoration: none;
  padding: 13px 24px; border: 1px solid transparent; transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.btn-pill { background: var(--violet); color: #fff; box-shadow: 0 8px 30px rgba(124, 92, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn-pill:hover:not(:disabled) { background: #6A48FF; transform: translateY(-1px); }
.btn-pill:active:not(:disabled) { transform: scale(.98); }
.btn-ghost { background: rgba(255, 255, 255, .06); color: var(--texte); border-color: var(--ligne-2); }
.btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.btn-link { background: none; border: 0; color: var(--gris); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 8px; font-size: .95rem; }
.btn-link:hover { color: var(--texte); }
.btn-petit { padding: 8px 15px; font-size: .88rem; }
.btn-full { width: 100%; }
.btn-grand { padding: 17px 24px; font-size: 1.05rem; }
.btn-cta { padding: 17px 30px; font-size: 1.05rem; }
.danger { color: var(--rouge) !important; }
.danger-fond { background: #DC2626; box-shadow: none; }

/* ---------- Barre du haut ---------- */
nav { position: sticky; top: 0; z-index: 20; background: rgba(9, 9, 11, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--ligne); }
.nav-in { max-width: 1120px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.1rem; color: var(--texte); text-decoration: none; letter-spacing: -.01em; }
.logo-mark { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, #8B6CFF, #5B3DF5); display: grid; place-items: center; flex: 0 0 auto; box-shadow: 0 4px 16px rgba(124, 92, 255, .4); }
.nav-links { display: none; gap: 28px; }
.nav-links a { color: var(--gris); font-weight: 500; text-decoration: none; font-size: .95rem; }
.nav-links a:hover { color: var(--texte); }
.nav-actions { display: flex; gap: 8px; align-items: center; }
@media (min-width: 900px) { .nav-links { display: flex; } }
@media (max-width: 380px) { .nav-scan { display: none; } }

/* ---------- Accueil : le haut ---------- */
.hero {
  position: relative; max-width: 1120px; margin: 0 auto; padding: 34px 16px 40px;
  display: grid; gap: 34px;
}
.hero::before {
  content: ""; position: absolute; inset: -80px -40% auto; height: 560px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(124, 92, 255, .28), transparent 70%);
}
.pilule { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 99px; background: rgba(255, 255, 255, .05); border: 1px solid var(--ligne-2); font-size: .8rem; color: var(--gris); font-weight: 600; }
.point-vert { width: 7px; height: 7px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 10px var(--vert); }
.hero h1 { font-size: clamp(2.5rem, 11vw, 4.6rem); line-height: 1.02; letter-spacing: -.045em; margin: 18px 0 16px; font-weight: 800; }
.hero .sub { color: var(--gris); font-size: 1.08rem; margin: 0 0 26px; max-width: 520px; }
.hero-question { font-weight: 700; margin: 0 0 12px; font-size: 1rem; }
.types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 520px; }
.type-carte {
  position: relative; border: 1px solid var(--ligne-2); background: var(--carte); border-radius: 18px; padding: 0; overflow: hidden;
  aspect-ratio: 4 / 2.2; text-align: left; transition: transform .2s ease, border-color .2s ease;
}
.type-carte:hover { transform: translateY(-2px); border-color: var(--violet); }
.type-carte .type-img { position: absolute; inset: 0; background-position: center 0; }
.type-carte b {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 11px; font-size: 1rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .78)); display: flex; justify-content: space-between; align-items: center;
}
.type-carte b::after { content: "→"; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .16); display: grid; place-items: center; font-size: .85rem; }
.hero-sais-pas { margin: 6px 0 0; }
.rassurance { color: var(--gris-2); font-size: .85rem; margin: 8px 0 0; }
.hero-visuel { display: grid; justify-items: center; gap: 12px; }
.hero-photo { width: 100%; max-width: 420px; aspect-ratio: 4 / 5; border-radius: 26px; border: 1px solid var(--ligne-2); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.hero-legende { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--gris); font-weight: 600; }
.point-direct { width: 8px; height: 8px; border-radius: 50%; background: var(--rouge); animation: clignote 1.4s infinite; }

@media (min-width: 600px) {
  .types { grid-template-columns: repeat(4, 1fr); max-width: 620px; }
  .type-carte { aspect-ratio: 3 / 2.4; }
}
.hero-texte { order: 1; }
.hero-visuel { order: 2; }
.hero-choix { order: 3; display: grid; justify-items: start; }
.hero-choix .types { width: 100%; }
@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1.1fr .9fr; align-items: center; padding: 70px 24px 60px; gap: 24px 56px;
    grid-template-areas: "texte visuel" "choix visuel";
  }
  .hero-texte { grid-area: texte; }
  .hero-choix { grid-area: choix; }
  .hero-visuel { grid-area: visuel; }
}

/* ---------- Les images générées, et leur remplaçant ---------- */
[data-image] { background-color: #16161C; background-image: linear-gradient(145deg, #1D1D25, #121217); background-size: cover; background-position: center 30%; }
.sans-image { position: relative; }
.sans-image::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; opacity: .22;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M20 4 8.1 15.9M14.5 14.5 20 20M8.1 8.1 12 12'/%3E%3C/svg%3E");
}

/* ---------- L'avant / après ---------- */
@property --pos { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.comparateur {
  --pos: 50%; position: relative; width: 100%; max-width: 420px; aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden;
  background: var(--carte); border: 1px solid var(--ligne-2); box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
.comparateur.grand { max-width: 340px; justify-self: center; aspect-ratio: 4 / 4.2; }
.comparateur .c-avant, .comparateur .c-apres, .comparateur .c-seule { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparateur .c-apres { clip-path: inset(0 0 0 var(--pos)); }
.comparateur .c-ligne { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .4); pointer-events: none; }
.comparateur .c-ligne::after {
  content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%;
  background: #fff; color: #09090B; font-weight: 800; font-size: .9rem; display: grid; place-items: center; box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}
.comparateur .c-etiq { transition: opacity .15s; position: absolute; top: 12px; padding: 5px 11px; border-radius: 99px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .74rem; font-weight: 700; pointer-events: none; }
.comparateur .c-etiq.g { left: 12px; }
.comparateur .c-etiq.d { right: 12px; }
.comparateur input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.comparateur.demo { animation: balaye 5s ease-in-out infinite; aspect-ratio: 4 / 3.6; }
/* L'avant / après de la page d'accueil : cadré sur la tête, pas sur le buste. */
.comparateur.demo .c-avant, .comparateur.demo .c-apres { background-position: center 10%; }

/* ---------- Le catalogue qui défile ---------- */
.bande-coupes { padding: 10px 0 30px; overflow: hidden; display: grid; gap: 12px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.defile { display: flex; gap: 12px; width: max-content; animation: defile 90s linear infinite; }
.defile.inverse { animation-direction: reverse; animation-duration: 100s; }
.bande-carte { position: relative; width: 116px; aspect-ratio: 4 / 2.6; background-position: center 2%; border-radius: 16px; overflow: hidden; border: 1px solid var(--ligne); flex: 0 0 auto; }
.bande-carte span { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 9px 6px; font-size: .74rem; font-weight: 700; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); }
@media (min-width: 900px) { .bande-carte { width: 150px; } }

/* ---------- Sections ---------- */
.block { max-width: 1120px; margin: 0 auto; padding: 56px 16px; }
.block h2, .bandeau-final h2 { font-size: clamp(1.9rem, 7vw, 3rem); line-height: 1.08; letter-spacing: -.035em; margin: 0 0 14px; font-weight: 800; }
.lead { color: var(--gris); font-size: 1.05rem; margin: 0 0 26px; max-width: 620px; }
.deux-colonnes { display: grid; gap: 34px; align-items: center; }
@media (min-width: 900px) { .deux-colonnes { grid-template-columns: 1fr 1fr; gap: 60px; } .block { padding: 90px 24px; } }
.coches { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.coches li { position: relative; padding-left: 30px; color: var(--texte); }
.coches li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--violet-fond); color: var(--violet-2); font-size: .72rem; font-weight: 800; display: grid; place-items: center; }

.etapes { display: grid; gap: 14px; }
@media (min-width: 760px) { .etapes { grid-template-columns: repeat(3, 1fr); } }
.etape-carte { position: relative; background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 12px 12px 20px; }
.etape-carte .etape-img { aspect-ratio: 4 / 3; border-radius: 16px; margin-bottom: 16px; background-position: center 12%; }
.etape-carte h3 { margin: 0 6px 6px; font-size: 1.12rem; letter-spacing: -.01em; }
.etape-carte p { margin: 0 6px; color: var(--gris); font-size: .95rem; }
.etape-n { position: absolute; top: 22px; left: 22px; width: 32px; height: 32px; border-radius: 50%; background: rgba(9, 9, 11, .75); backdrop-filter: blur(6px); border: 1px solid var(--ligne-2); display: grid; place-items: center; font-weight: 800; font-size: .9rem; }

.grille-recois { display: grid; gap: 14px; }
@media (min-width: 760px) { .grille-recois { grid-template-columns: repeat(2, 1fr); } }
.recois-carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 12px; display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; }
.recois-carte h3 { margin: 0 0 4px; font-size: 1.08rem; }
.recois-carte p { margin: 0; color: var(--gris); font-size: .93rem; }
.recois-img { aspect-ratio: 4 / 3.6; border-radius: 14px; background-position: center 12%; }
.recois-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.recois-trio span { aspect-ratio: 2 / 3.6; border-radius: 10px; background-position: center 10%; }

.stories-demo { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 10px; margin: 0 -16px; scrollbar-width: none; }
.stories-demo::-webkit-scrollbar { display: none; }
.story-demo { position: relative; flex: 0 0 72%; max-width: 250px; aspect-ratio: 9 / 15; border-radius: 22px; overflow: hidden; border: 1px solid var(--ligne-2); scroll-snap-align: start; }
.story-demo .sd-barres { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; }
.story-demo .sd-barres i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); }
.story-demo .sd-barres i.on { background: #fff; }
.story-demo p { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 50px 14px 16px; font-weight: 700; font-size: .95rem; line-height: 1.35; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); }
.story-demo small { display: block; color: var(--violet-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
@media (min-width: 900px) { .stories-demo { margin: 0; padding: 4px 0 10px; } .story-demo { flex-basis: 23%; } }

/* ---------- Tarifs ---------- */
.grid-prix { display: grid; gap: 14px; }
@media (min-width: 680px) { .grid-prix { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid-prix { grid-template-columns: repeat(4, 1fr); } }
.price { position: relative; background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 24px 20px; display: flex; flex-direction: column; }
.price h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--gris); font-weight: 700; }
.price .amount { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: 16px; }
.price .amount small { font-size: .85rem; color: var(--gris); font-weight: 600; letter-spacing: 0; }
.price ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 9px; flex: 1; align-content: start; }
.price li { position: relative; padding-left: 24px; font-size: .94rem; color: #D4D4D8; }
.price li::before { content: "✓"; position: absolute; left: 0; color: var(--violet-2); font-weight: 800; }
.price.best { background: linear-gradient(180deg, rgba(124, 92, 255, .16), var(--carte) 60%); border-color: rgba(124, 92, 255, .5); }
.price .tag { position: absolute; top: -11px; left: 20px; background: var(--violet); color: #fff; font-size: .7rem; font-weight: 800; padding: 4px 10px; border-radius: 99px; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; max-width: 780px; }
.faq details { background: var(--carte); border: 1px solid var(--ligne); border-radius: 16px; padding: 0 18px; }
.faq summary { cursor: pointer; font-weight: 700; padding: 17px 28px 17px 0; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 13px; font-size: 1.4rem; color: var(--gris); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--gris); margin: 0 0 18px; }

.bandeau-final { text-align: center; padding: 70px 16px 90px; position: relative; overflow: hidden; }
.bandeau-final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(closest-side at 50% 60%, rgba(124, 92, 255, .25), transparent); }
.bandeau-final .lead { margin: 0 auto 26px; }

footer { border-top: 1px solid var(--ligne); padding: 28px 16px calc(96px + var(--bas-securite)); }
.footer-in { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: center; font-size: .88rem; color: var(--gris-2); }
.footer-in a { color: var(--gris); text-decoration: none; }
.footer-in a:hover { color: var(--texte); }
@media (min-width: 900px) { footer { padding-bottom: 40px; } }

/* ---------- Barre qui suit sur mobile ---------- */
.barre-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 12px 16px calc(12px + var(--bas-securite)); background: linear-gradient(transparent, rgba(9, 9, 11, .95) 35%); animation: monte .3s ease both; }
@media (min-width: 900px) { #barre-accueil { display: none !important; } .barre-cta .btn-pill { max-width: 420px; margin: 0 auto; display: flex; } }

/* ---------- Le parcours (questions, photo) ---------- */
.parcours { position: fixed; inset: 0; z-index: 50; background: var(--fond); display: flex; justify-content: center; }
.parcours-boite { width: 100%; max-width: 560px; display: flex; flex-direction: column; height: 100%; }
.parcours-haut { display: flex; align-items: center; gap: 12px; padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
.rond-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ligne-2); background: var(--carte); font-size: 1.05rem; flex: 0 0 auto; display: grid; place-items: center; }
.barre { flex: 1; height: 6px; border-radius: 6px; background: var(--carte-3); overflow: hidden; }
.barre i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #A78BFA, #7C5CFF); border-radius: 6px; transition: width .4s cubic-bezier(.2, .7, .2, 1); }
.parcours-contenu { flex: 1; overflow-y: auto; padding: 14px 16px calc(28px + var(--bas-securite)); -webkit-overflow-scrolling: touch; }
.ecran h2 { font-size: clamp(1.6rem, 7vw, 2.05rem); line-height: 1.12; letter-spacing: -.03em; margin: 0 0 10px; }
.ecran > .muted { margin: 0 0 20px; }
.etape-num { color: var(--violet-2); font-weight: 700; font-size: .8rem; margin: 6px 0 8px; text-transform: uppercase; letter-spacing: .1em; }

.choix-liste { display: grid; gap: 10px; margin: 20px 0 18px; }
.choix {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 15px 52px 15px 16px;
  background: var(--carte); border: 1.5px solid var(--ligne); border-radius: 18px; font-size: 1rem;
  transition: border-color .15s ease, background .15s ease, transform .1s ease; animation: arrive .4s cubic-bezier(.2, .7, .2, 1) both;
}
.choix:nth-child(2) { animation-delay: .04s; } .choix:nth-child(3) { animation-delay: .08s; } .choix:nth-child(4) { animation-delay: .12s; }
.choix:nth-child(5) { animation-delay: .16s; } .choix:nth-child(6) { animation-delay: .2s; }
.choix:hover { border-color: var(--ligne-2); background: var(--carte-2); }
.choix:active { transform: scale(.99); }
.choix::after { content: ""; position: absolute; right: 16px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; border: 2px solid var(--gris-2); transition: all .15s ease; }
[data-multiple="1"] .choix::after { border-radius: 7px; }
.choix.on { border-color: var(--violet); background: var(--violet-fond); }
.choix.on::after { border-color: var(--violet); background: var(--violet) no-repeat center / 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.choix-emoji { font-size: 1.5rem; width: 44px; height: 44px; border-radius: 12px; background: var(--carte-3); display: grid; place-items: center; flex: 0 0 auto; }
.choix-texte { display: grid; gap: 1px; }
.choix-texte small { color: var(--gris); font-size: .86rem; }
.choix-grille { grid-template-columns: repeat(2, 1fr); }
.choix-photo { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; aspect-ratio: 1 / 1.12; }
.choix-photo .cp-img { position: absolute; inset: 0; }
.choix-photo b { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); }
.choix-photo::after { top: 12px; margin-top: 0; right: 12px; background-color: rgba(0, 0, 0, .35); border-color: #fff; }
.choix-large { grid-column: 1 / -1; }

.info-ecran { text-align: center; padding-top: 16px; }
.info-ecran .info-chiffre { font-size: clamp(3.6rem, 18vw, 5rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; margin: 10px 0 6px; }
.info-vignettes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 24px 0; }
.info-vignettes span { aspect-ratio: 4 / 5; border-radius: 14px; border: 1px solid var(--ligne); animation: arrive .5s ease both; }
.info-vignettes span:nth-child(2) { animation-delay: .08s; } .info-vignettes span:nth-child(3) { animation-delay: .16s; } .info-vignettes span:nth-child(4) { animation-delay: .24s; }

.conseils-photo { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 10px; }
.conseils-photo li { display: flex; gap: 12px; align-items: center; background: var(--carte); border: 1px solid var(--ligne); border-radius: 14px; padding: 12px 14px; font-weight: 600; font-size: .95rem; }
.conseils-photo span { font-size: 1.3rem; }
.ecran .btn-full + .btn-full { margin-top: 10px; }
.photo-cadre { position: relative; width: 100%; max-width: 300px; margin: 14px auto 16px; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; background: var(--carte); border: 1px solid var(--ligne-2); }
.photo-cadre canvas { width: 100%; height: 100%; display: block; }
.pastille { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); white-space: nowrap; display: inline-flex; gap: 7px; align-items: center; padding: 7px 13px; border-radius: 99px; background: rgba(0, 0, 0, .65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .8rem; font-weight: 700; }
.pastille.ok { color: var(--vert); }
.rond-charge { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: tourne .8s linear infinite; display: inline-block; flex: 0 0 auto; }

.coche { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0; font-size: .9rem; color: #D4D4D8; cursor: pointer; line-height: 1.45; }
.coche input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--gris-2); flex: 0 0 auto; margin: 0; background: transparent; cursor: pointer; transition: all .15s; }
.coche input:checked { background: var(--violet) no-repeat center / 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); border-color: var(--violet); }
.coche a { color: var(--gris); }
.cases { background: var(--carte); border: 1px solid var(--ligne); border-radius: 16px; padding: 4px 14px; margin: 6px 0 16px; }

/* ---------- L'analyse en cours ---------- */
.scan-ecran { position: fixed; inset: 0; z-index: 60; background: var(--fond); display: flex; justify-content: center; overflow-y: auto; }
.scan-boite { width: 100%; max-width: 480px; padding: calc(24px + env(safe-area-inset-top, 0px)) 16px 30px; text-align: center; }
.scan-photo { position: relative; width: 58%; max-width: 250px; margin: 6px auto 20px; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: var(--carte); box-shadow: 0 0 60px rgba(124, 92, 255, .25); }
.scan-photo canvas { width: 100%; height: 100%; display: block; }
.coin { position: absolute; width: 22px; height: 22px; border: 3px solid #fff; opacity: .9; }
.coin.hg { top: 10px; left: 10px; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.coin.hd { top: 10px; right: 10px; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.coin.bg { bottom: 10px; left: 10px; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.coin.bd { bottom: 10px; right: 10px; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.scan-progression { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.scan-progression b { font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; }
.scan-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; text-align: left; }
.scan-liste li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--carte); border: 1px solid var(--ligne); font-size: .92rem; animation: arrive .35s ease both; }
.scan-liste li .scan-l { flex: 1; color: var(--gris); }
.scan-liste li .scan-v { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.scan-liste li.encours { border-color: rgba(124, 92, 255, .5); }
.scan-liste li.encours .scan-l { color: var(--texte); }
.puce-etat { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--carte-3); flex: 0 0 auto; }
.encours .puce-etat { border-color: rgba(255, 255, 255, .2); border-top-color: var(--violet-2); animation: tourne .8s linear infinite; }
.fait .puce-etat { border-color: var(--vert); background: var(--vert) no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309090B' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.scan-note { color: var(--gris-2); font-size: .82rem; margin: 18px 0 0; }

/* ---------- La porte : le compte avant le résultat ---------- */
.porte { text-align: center; }
.porte-apercu { position: relative; width: 170px; margin: 8px auto 18px; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; border: 1px solid var(--ligne-2); background: var(--carte); }
.porte-apercu img { width: 100%; height: 100%; object-fit: cover; filter: blur(12px) saturate(1.1); transform: scale(1.15); }
.porte-cadenas { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 4px; font-size: 1.8rem; }
.porte-cadenas small { font-size: .75rem; font-weight: 700; }
.porte-forme { display: inline-flex; gap: 8px; align-items: center; padding: 7px 14px; border-radius: 99px; background: var(--violet-fond); color: var(--violet-2); font-weight: 700; font-size: .9rem; margin: 0 0 12px; }
.porte .coches { text-align: left; max-width: 340px; margin: 16px auto 22px; }
.porte-form { text-align: left; }
.champ { display: grid; gap: 6px; margin: 0 0 12px; }
.champ span { font-weight: 600; font-size: .88rem; color: var(--gris); }
.champ input { width: 100%; padding: 15px 16px; border-radius: 14px; border: 1.5px solid var(--ligne-2); background: var(--carte); color: var(--texte); font-size: 1rem; font-family: inherit; }
.champ input:focus { outline: none; border-color: var(--violet); }
.champ small { color: var(--gris-2); font-size: .8rem; }

/* ---------- Le résultat ---------- */
.rapport, .espace { max-width: 760px; margin: 0 auto; padding: 22px 16px 60px; }
.r-tete { margin: 0 0 18px; }
.r-tete h1 { font-size: clamp(2.2rem, 10vw, 3.4rem); line-height: 1.02; letter-spacing: -.045em; margin: 0 0 12px; }
.r-tete p { color: var(--gris); margin: 0; font-size: 1.02rem; }
.bandeau-info { background: var(--carte); border: 1px solid var(--ligne); color: var(--gris); border-radius: 14px; padding: 10px 14px; font-size: .85rem; margin: 0 0 16px; }
.section-r { margin: 36px 0 0; }
.section-r > h2 { font-size: clamp(1.45rem, 6vw, 1.9rem); letter-spacing: -.03em; margin: 0 0 6px; line-height: 1.15; }
.section-r > .muted { margin: 0 0 16px; }
.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 18px; }
.carte p { color: #D4D4D8; }
.centre { text-align: center; }
.gros-emoji { font-size: 2.6rem; }

.carte-visage { display: grid; gap: 16px; background: var(--carte); border: 1px solid var(--ligne); border-radius: 26px; padding: 12px; }
.cv-media { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: var(--carte-2); display: grid; place-items: center; }
.cv-media canvas { width: 100%; height: 100%; display: block; }
.cv-media svg { width: 70%; height: 70%; }
.cv-infos { padding: 4px 6px 8px; }
.cv-forme { font-size: 1.7rem; letter-spacing: -.03em; margin: 0 0 6px; }
.cv-conf { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; font-size: .8rem; color: var(--gris); align-items: center; }
.conf { padding: 3px 9px; border-radius: 99px; background: var(--carte-3); font-weight: 700; color: var(--texte); }
.conf-élevée { background: rgba(52, 211, 153, .15); color: var(--vert); }
.cv-texte { color: #D4D4D8; font-size: .95rem; margin: 0 0 14px; }
.mesures { display: grid; gap: 10px; }
.mesure { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; font-size: .88rem; }
.mesure span { color: var(--gris); }
.mesure em { font-style: normal; color: var(--violet-2); font-weight: 600; }
.mesure i { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--carte-3); position: relative; overflow: hidden; }
.mesure i::after { content: ""; position: absolute; inset: 0; width: calc(var(--p) * 100%); background: linear-gradient(90deg, #A78BFA, #7C5CFF); border-radius: 6px; }
.mesures-note { color: var(--gris-2); font-size: .78rem; margin: 2px 0 0; }
@media (min-width: 640px) { .carte-visage { grid-template-columns: 250px 1fr; align-items: center; } }

.essai-hero { background: var(--carte); border: 1px solid var(--ligne); border-radius: 26px; padding: 12px; }
.essai-hero .comparateur, .essai-hero .essai-attente, .essai-hero .essai-vide { max-width: none; border-radius: 18px; box-shadow: none; }
.essai-hero + .essai-hero { margin-top: 12px; }
@media (min-width: 700px) { .essai-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; } .essai-hero .essai-infos { padding: 10px 10px 6px; } }
.visuel-plein { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; }
.zone-essai .comparateur { max-width: none; border-radius: 18px; box-shadow: none; }
.essai-infos { padding: 14px 6px 6px; }
.essai-infos h3 { font-size: 1.5rem; letter-spacing: -.03em; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.essai-infos p { color: #D4D4D8; margin: 0 0 12px; }
.essai-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 0; }
.essai-attente, .essai-vide {
  position: relative; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: var(--carte-2);
  display: grid; place-items: center; text-align: center;
}
.essai-attente img, .essai-vide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(6px) brightness(.5); transform: scale(1.08); }
.essai-attente::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, transparent 30%, rgba(167, 139, 250, .22) 50%, transparent 70%); background-size: 200% 100%; animation: shimmer 1.8s linear infinite; }
.essai-message { position: relative; z-index: 2; display: grid; gap: 10px; justify-items: center; padding: 20px; max-width: 290px; }
.essai-message b { font-size: 1.05rem; }
.essai-message span { color: #D4D4D8; font-size: .9rem; }
.essai-message .rond-charge { width: 28px; height: 28px; border-width: 3px; }

.badge { display: inline-flex; padding: 4px 10px; border-radius: 99px; font-size: .72rem; font-weight: 700; background: var(--carte-3); color: var(--gris); letter-spacing: 0; vertical-align: middle; }
.badge-léger { background: rgba(52, 211, 153, .14); color: var(--vert); }
.badge-modéré { background: var(--violet-fond); color: var(--violet-2); }
.badge-radical { background: rgba(251, 191, 36, .14); color: var(--or); }
.cc-pratique { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }
.note-pousse { margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; background: rgba(52, 211, 153, .1); color: #D4D4D8; font-size: .88rem; line-height: 1.4; }
.note-pousse b { color: var(--vert); margin-right: 4px; }
.essai-conseil { margin: 8px 0 0; padding: 10px 12px; border-radius: 14px; background: rgba(124, 92, 255, .14); color: #D4D4D8; font-size: .85rem; line-height: 1.4; }
.cc-pratique span { padding: 5px 10px; border-radius: 99px; background: var(--carte-3); font-size: .8rem; color: #D4D4D8; }
.mannequin { display: flex; gap: 12px; align-items: center; margin: 12px 0 0; padding: 8px; border-radius: 16px; background: var(--carte-2); }
.mannequin span { width: 52px; aspect-ratio: 4 / 5; border-radius: 10px; flex: 0 0 auto; }
.mannequin p { margin: 0; font-size: .85rem; color: var(--gris); }

.autres-coupes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.autre-coupe { background: var(--carte); border: 1px solid var(--ligne); border-radius: 22px; padding: 8px; display: flex; flex-direction: column; }
.autre-coupe .ac-visuel { position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--carte-2); }
.autre-coupe .ac-visuel > img, .autre-coupe .ac-visuel > [data-image] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.autre-coupe .ac-visuel.flou > img, .autre-coupe .ac-visuel.flou > [data-image] { filter: blur(14px) brightness(.6); transform: scale(1.2); }
.ac-cadenas { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 6px; font-weight: 700; font-size: .85rem; text-align: center; padding: 10px; }
.ac-cadenas i { font-style: normal; font-size: 1.6rem; }
.ac-rang { position: absolute; top: 8px; left: 8px; z-index: 3; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, .6); display: grid; place-items: center; font-weight: 800; font-size: .8rem; }
.autre-coupe .ac-infos { padding: 10px 6px 6px; flex: 1; display: flex; flex-direction: column; }
.autre-coupe h3 { margin: 0 0 4px; font-size: 1rem; letter-spacing: -.01em; }
.autre-coupe p { margin: 0 0 8px; color: var(--gris); font-size: .85rem; flex: 1; }
.autre-coupe .comparateur { border-radius: 16px; box-shadow: none; max-width: none; }
.autre-coupe .essai-attente, .autre-coupe .essai-vide { border-radius: 16px; }
.autre-coupe .essai-message { padding: 10px; gap: 6px; }
.autre-coupe .essai-message span { font-size: .8rem; }
.autre-coupe.ouverte { grid-column: 1 / -1; padding: 12px; }
.autre-coupe.ouverte .ac-infos { padding: 14px 6px 4px; }
.autre-coupe.ouverte h3 { font-size: 1.3rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.autre-coupe.ouverte p { color: #D4D4D8; font-size: .95rem; }

/* les coupes au choix */
.cat-panneau { margin: 0 0 14px; scroll-margin-top: 90px; }
.cat-verrou { position: absolute; left: 10px; bottom: 10px; padding: 6px 12px; border-radius: 99px; background: rgba(0, 0, 0, .65); font-weight: 700; font-size: .8rem; }
.cat-filtres { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px 12px; padding: 0 16px 2px; scrollbar-width: none; }
.cat-filtres::-webkit-scrollbar { display: none; }
.cat-filtres button { flex: 0 0 auto; border: 1px solid var(--ligne); background: var(--carte); color: var(--gris); border-radius: 99px; padding: 8px 14px; font-weight: 700; font-size: .85rem; }
.cat-filtres button.on { background: var(--violet); border-color: var(--violet); color: #fff; }
.cat-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
@media (min-width: 700px) { .cat-grille { grid-template-columns: repeat(4, 1fr); } }
.cat-coupe { position: relative; border: 2px solid transparent; background: var(--carte); border-radius: 16px; padding: 0 0 8px; text-align: left; color: inherit; overflow: hidden; }
.cat-coupe img { display: block; width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; object-position: center 12%; background: var(--carte-2); }
.cat-coupe i.top { color: #fff; background: rgba(124, 92, 255, .85); }
.cat-nombre { margin: 0 0 8px; }
.essai-hero { scroll-margin-top: 90px; }
.cat-coupe b { display: block; padding: 6px 8px 0; font-size: .78rem; line-height: 1.25; }
.cat-coupe i { position: absolute; top: 6px; left: 6px; padding: 3px 8px; border-radius: 99px; background: rgba(0, 0, 0, .7); color: var(--vert); font-style: normal; font-weight: 700; font-size: .7rem; }
.cat-coupe.on { border-color: var(--violet); }

.offres { background: linear-gradient(180deg, rgba(124, 92, 255, .14), var(--carte) 45%); border: 1px solid rgba(124, 92, 255, .4); border-radius: 26px; padding: 22px 16px 18px; margin: 36px 0 0; scroll-margin-top: 90px; }
.offres .gros { display: block; font-size: 1.55rem; letter-spacing: -.03em; line-height: 1.15; margin: 0 0 6px; }
.offres > .muted { margin: 0; font-size: .95rem; }
.offres-choix { display: grid; gap: 12px; margin: 18px 0 16px; }
.offre {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; text-align: left; padding: 15px 16px 15px 48px;
  background: var(--carte-2); border: 1.5px solid var(--ligne); border-radius: 18px; font-size: .95rem;
}
.offre::before { content: ""; position: absolute; left: 16px; top: 17px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--gris-2); box-sizing: border-box; }
.offre.on { border-color: var(--violet); background: var(--violet-fond); }
.offre.on::before { border: 6px solid var(--violet); background: #fff; }
.offre b { font-size: 1.02rem; }
.offre > span { grid-column: 1 / 2; color: var(--gris); font-size: .84rem; }
.offre strong { grid-column: 2; grid-row: 1 / 3; align-self: center; text-align: right; font-size: 1.05rem; white-space: nowrap; }
.offre strong small { display: block; color: var(--gris); font-size: .74rem; font-weight: 600; }
.offre strong s { color: var(--gris-2); font-weight: 600; font-size: .85rem; display: block; }
.offre .par-jour { grid-column: 1 / -1; color: var(--violet-2); font-size: .78rem; font-weight: 700; }
.offre-tag { position: absolute; top: -10px; right: 14px; background: var(--violet); color: #fff; font-style: normal; font-size: .66rem; font-weight: 800; padding: 3px 9px; border-radius: 99px; text-transform: uppercase; letter-spacing: .05em; }

.grille-profil { display: grid; gap: 10px; }
@media (min-width: 560px) { .grille-profil { grid-template-columns: repeat(2, 1fr); } }
.fact { background: var(--carte); border: 1px solid var(--ligne); border-radius: 18px; padding: 14px 16px; display: grid; gap: 3px; align-content: start; }
.fact small { color: var(--gris); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.fact b { font-size: 1.05rem; }
.fact span { color: #D4D4D8; font-size: .9rem; }
.fact ul { margin: 4px 0 0; padding-left: 18px; color: #D4D4D8; display: grid; gap: 4px; font-size: .9rem; }
.fact.large { grid-column: 1 / -1; }
.vigilance { background: var(--or-fond); border: 1px solid rgba(251, 191, 36, .35); border-radius: 18px; padding: 14px 16px; margin: 16px 0 0; }
.vigilance b { color: var(--or); }
.vigilance ul { margin: 8px 0; padding-left: 18px; color: #E4E4E7; }
.vigilance p { margin: 0; color: #D4D4D8; font-size: .92rem; }
.evolution { background: var(--carte); border: 1px solid var(--ligne); border-left: 3px solid var(--violet); border-radius: 14px; padding: 12px 16px; margin: 16px 0 0; }
.evolution small { color: var(--violet-2); font-weight: 700; }
.evolution p { margin: 4px 0 0; }

.barbe-carte { display: grid; grid-template-columns: 120px 1fr; gap: 14px; background: var(--carte); border: 1px solid var(--ligne); border-radius: 22px; padding: 10px; align-items: start; }
.barbe-carte .bc-img { aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; position: relative; }
.barbe-carte .bc-img > [data-image] { position: absolute; inset: 0; }
.barbe-carte .bc-img.flou > [data-image] { filter: blur(12px) brightness(.6); transform: scale(1.2); }
.barbe-carte h3 { margin: 4px 0 6px; font-size: 1.1rem; }
.barbe-carte p { margin: 0 0 8px; color: #D4D4D8; font-size: .92rem; }
.barbe-carte .coches { margin: 8px 0 0; gap: 6px; }
.barbe-carte .coches li { font-size: .88rem; }
.phrase { background: var(--carte-2); border-radius: 12px; padding: 9px 12px; margin: 6px 0; }
.phrase small { color: var(--violet-2); font-weight: 700; font-size: .76rem; }
.phrase p { margin: 2px 0 0; }
.a-eviter { color: #D4D4D8; font-size: .92rem; background: rgba(248, 113, 113, .08); border: 1px solid rgba(248, 113, 113, .25); border-radius: 14px; padding: 10px 14px; margin: 12px 0 0; }
.a-eviter b { color: var(--rouge); }
@media (max-width: 380px) { .barbe-carte { grid-template-columns: 96px 1fr; } }

.verrou-simple { display: flex; gap: 14px; align-items: center; background: var(--carte); border: 1px dashed var(--ligne-2); border-radius: 20px; padding: 14px 16px; text-align: left; }
.verrou-simple i { font-style: normal; font-size: 1.4rem; }
.verrou-simple div { flex: 1; }
.verrou-simple b { display: block; }
.verrou-simple span { color: var(--gris); font-size: .88rem; }

/* La routine et le suivi du jour */
.suivi { background: linear-gradient(160deg, #1F1A3A, var(--carte) 70%); border: 1px solid rgba(124, 92, 255, .35); border-radius: 24px; padding: 18px; margin: 0 0 18px; }
.suivi-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 12px; }
.suivi-tete small { color: var(--violet-2); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
.suivi-tete b { display: block; font-size: 1.2rem; }
.serie { display: flex; align-items: baseline; gap: 4px; background: rgba(0, 0, 0, .3); padding: 8px 12px; border-radius: 14px; }
.serie b { font-size: 1.4rem; }
.serie small { color: var(--gris); font-size: .78rem; text-transform: none; letter-spacing: 0; }
.suivi-liste { display: grid; gap: 8px; }
.suivi-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: rgba(0, 0, 0, .25); cursor: pointer; font-weight: 600; font-size: .93rem; }
.suivi-item input { position: absolute; opacity: 0; pointer-events: none; }
.suivi-case { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--gris-2); flex: 0 0 auto; }
.suivi-item input:checked + .suivi-case { background: var(--vert) no-repeat center / 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309090B' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); border-color: var(--vert); }
.suivi-item input:checked ~ span:last-child { color: var(--gris); text-decoration: line-through; }
.suivi-item input:focus-visible + .suivi-case { outline: 2px solid var(--violet-2); outline-offset: 2px; }
.suivi p { margin: 12px 0 0; color: var(--gris); font-size: .86rem; }

.routine { display: grid; gap: 18px; }
.colonne > small { display: block; color: var(--gris); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 8px; }
.gestes { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
.gestes::-webkit-scrollbar { display: none; }
.geste { position: relative; flex: 0 0 148px; aspect-ratio: 9 / 14; border-radius: 18px; overflow: hidden; border: 1px solid var(--ligne-2); padding: 0; text-align: left; scroll-snap-align: start; background: var(--carte-2); }
.geste .g-img { position: absolute; inset: 0; }
.geste .g-emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.6rem; padding-bottom: 50px; background: radial-gradient(circle at 50% 35%, #2A2350, var(--carte-2) 70%); }
.geste .g-emoji.avec-fond, .story-media .story-emoji.avec-fond { background: linear-gradient(rgba(9, 9, 11, .45), rgba(9, 9, 11, .85)), var(--fond) center / cover; }
.produits-liste em.naturel { display: block; margin-top: 4px; font-style: normal; font-size: .8rem; line-height: 1.35; color: var(--vert); }
.geste .g-texte { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 10px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, .9)); display: grid; gap: 2px; }
.geste .g-texte b { font-size: .84rem; line-height: 1.25; }
.geste .g-texte span { font-size: .72rem; color: var(--gris); }
.geste .g-play { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #09090B; display: grid; place-items: center; font-size: .66rem; padding-left: 2px; }
.geste .g-etapes { position: absolute; top: 10px; left: 10px; font-size: .68rem; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: rgba(0, 0, 0, .55); }
@media (min-width: 760px) { .gestes { margin: 0; padding: 2px 0 6px; flex-wrap: wrap; } }
.routine-verrou { position: relative; }
.routine-verrou .gestes { filter: blur(3px) brightness(.55); pointer-events: none; }
.routine-verrou .verrou-simple { position: absolute; left: 6px; right: 6px; top: 50%; transform: translateY(-50%); background: rgba(21, 21, 26, .94); border-style: solid; }

/* La coupe choisie */
.choisie { display: inline-flex; margin: 12px 0 0; padding: 7px 12px; border-radius: 99px; background: rgba(52, 211, 153, .12); color: var(--vert); font-weight: 700; font-size: .85rem; }
.btn-choisir { margin: 12px 0 0; }

/* Les blocs de la routine */
.bloc-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 12px; }
.bloc-tete small { display: block; color: var(--violet-2); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
.bloc-tete b { font-size: 1.15rem; }
.routine-bloc, .pousse, .point-photo, .produits { margin: 0 0 18px; }
.gros-chiffre { text-align: right; }
.gros-chiffre b { display: block; font-size: 1.3rem; }
.gros-chiffre small { color: var(--gris); font-size: .78rem; }
.pousse .barre { margin: 0 0 14px; height: 8px; }
.pousse-etapes { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.pousse-etapes li { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 14px; background: var(--carte-2); border: 1px solid transparent; }
.pousse-etapes li span { width: 44px; aspect-ratio: 4 / 5; border-radius: 9px; flex: 0 0 auto; }
.pousse-etapes li b { display: block; font-size: .95rem; }
.pousse-etapes li small { color: var(--gris); font-size: .8rem; }
.pousse-etapes li.fait { opacity: .55; }
.pousse-etapes li.encours { border-color: rgba(124, 92, 255, .5); background: var(--violet-fond); }
.pousse-conseils summary { cursor: pointer; font-weight: 700; font-size: .92rem; padding: 6px 0; }
.pousse-conseils .coches { margin: 10px 0 0; }
.pousse-conseils .coches li { font-size: .9rem; color: #D4D4D8; }

.point-photo { background: linear-gradient(160deg, #13233A, var(--carte) 70%); border-color: rgba(96, 165, 250, .3); }
.point-photo .btn-full { margin-top: 14px; }
.point-photo > p { margin: 0 0 8px; }
.pp-date { color: var(--gris); font-size: .82rem; font-weight: 600; }
.pp-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.pp-score { display: flex; gap: 10px; align-items: center; background: rgba(0, 0, 0, .25); border-radius: 16px; padding: 10px; }
.pp-score small { color: var(--gris); font-size: .78rem; line-height: 1.35; }
.anneau { --p: 0; width: 58px; height: 58px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  background: conic-gradient(var(--violet-2) calc(var(--p) * 1%), var(--carte-3) 0); position: relative; }
.anneau::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--carte); }
.anneau b { position: relative; font-size: .9rem; }
.pp-coiffeur { background: var(--or-fond); color: var(--or); border-radius: 12px; padding: 8px 12px; font-weight: 700; font-size: .9rem; }
.point-photo .coches { margin: 10px 0 0; }
.point-photo .coches li { font-size: .92rem; color: #E4E4E7; }
.pp-attente { margin: 20px auto; }

.segments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--carte-2); margin: 0 0 12px; }
.segments button { border: 0; background: none; border-radius: 10px; padding: 9px 4px; font-weight: 700; font-size: .85rem; color: var(--gris); }
.segments button.on { background: var(--violet); color: #fff; }
.produits-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.produits-liste li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--carte-2); }
.produits-liste li div { flex: 1; display: grid; gap: 1px; }
.produits-liste small { color: var(--gris); font-size: .75rem; }
.produits-liste b { font-size: .93rem; }
.produits-liste span { color: var(--violet-2); font-size: .8rem; font-weight: 700; }

.fin-rapport { text-align: center; margin: 40px 0 0; padding: 22px 0 0; border-top: 1px solid var(--ligne); }
.fin-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0 0; }
.bravo { position: fixed; left: 50%; bottom: 110px; z-index: 90; background: var(--vert); color: #09090B; font-weight: 800; padding: 12px 20px; border-radius: 99px; animation: pop 2.2s ease both; }

/* ---------- Les tutos en stories ---------- */
.story { position: fixed; inset: 0; z-index: 80; background: #000; display: flex; justify-content: center; }
.story-barres { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; display: flex; gap: 4px; z-index: 3; max-width: 456px; margin: 0 auto; }
.story-barres i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.story-barres i b { display: block; height: 100%; width: 0; background: #fff; }
.story-barres i.vue b { width: 100%; }
.story-barres i.joue b { animation: remplit 5s linear both; }
.story-fermer { position: absolute; top: calc(22px + env(safe-area-inset-top, 0px)); right: 14px; z-index: 4; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .45); color: #fff; font-size: 1.1rem; }
.story-corps { position: relative; width: 100%; max-width: 480px; height: 100%; overflow: hidden; }
.story-media { position: absolute; inset: 0; }
.story-media img, .story-media video { width: 100%; height: 100%; object-fit: cover; }
.story-media .story-emoji { width: 100%; height: 100%; display: grid; place-items: center; font-size: 6rem; background: radial-gradient(circle at 50% 40%, #2A2350, #09090B 70%); }
.story-haut { position: absolute; top: calc(28px + env(safe-area-inset-top, 0px)); left: 16px; right: 64px; z-index: 2; }
.story-titre { margin: 0; font-weight: 800; font-size: 1rem; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.story-contexte { margin: 2px 0 0; font-size: .8rem; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.story-bas { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 90px 20px calc(30px + var(--bas-securite)); background: linear-gradient(transparent, rgba(0, 0, 0, .9) 45%); }
.story-compte { margin: 0 0 6px; color: var(--violet-2); font-weight: 800; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.story-texte { margin: 0; font-size: 1.35rem; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.story-texte.long { font-size: 1.08rem; font-weight: 700; line-height: 1.4; }
.story-bas.recap { padding-top: 120px; background: linear-gradient(transparent, rgba(0, 0, 0, .94) 30%); }
.story-erreurs { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 8px; }
.story-erreurs li { position: relative; padding-left: 26px; font-weight: 700; line-height: 1.35; }
.story-erreurs li::before { content: "✕"; position: absolute; left: 0; top: 0; color: #F87171; font-weight: 800; }
.story-astuce { margin: 0; padding: 12px 14px; border-radius: 14px; background: rgba(124, 92, 255, .22); line-height: 1.4; }
.story-astuce b { display: block; color: var(--violet-2); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }
.story-zone { position: absolute; top: 80px; bottom: 0; width: 40%; background: none; border: 0; z-index: 3; }
.story-zone.gauche { left: 0; }
.story-zone.droite { right: 0; width: 60%; }

/* ---------- Fenêtres ---------- */
.modal { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; }
.modal-boite { position: relative; width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto; background: var(--fond-2); border: 1px solid var(--ligne-2); border-radius: 26px 26px 0 0; padding: 26px 20px calc(24px + var(--bas-securite)); animation: monte .3s ease both; }
.modal-boite h2 { margin: 0 0 8px; font-size: 1.5rem; letter-spacing: -.03em; padding-right: 36px; }
.modal-fermer { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ligne-2); background: var(--carte); }
.achat-prix { font-size: 1.8rem; font-weight: 800; margin: 4px 0 14px; letter-spacing: -.03em; }
@media (min-width: 600px) { .modal { align-items: center; } .modal-boite { border-radius: 26px; } }

/* ---------- Mon espace ---------- */
.espace h1 { font-size: clamp(1.5rem, 6vw, 2.1rem); letter-spacing: -.03em; margin: 0 0 18px; overflow-wrap: anywhere; }
.espace-formule small { color: var(--gris); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
.espace-formule .gros { display: block; font-size: 1.5rem; margin: 2px 0 4px; }
.espace-formule .btn-full { margin-top: 12px; }
.liste-scans { display: grid; gap: 8px; }
.scan-ligne-liste { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--carte); border: 1px solid var(--ligne); color: var(--texte); text-decoration: none; }
.scan-ligne-liste:hover { border-color: var(--ligne-2); }
.scan-date { color: var(--violet-2); font-weight: 700; min-width: 90px; }
.scan-ligne-liste span:nth-child(2) { flex: 1; }
.espace-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 30px 0 0; }
.resiliation { margin: 10px 0 0; }
.reglages { display: grid; gap: 10px; margin: 0 0 12px; }
.reglages .coche { margin: 0; }
.reglages .champ { margin: 0; }
.erreur.succes { color: var(--vert); }

/* ---------- Pages légales et 404 ---------- */
.legal { max-width: 780px; margin: 0 auto; padding: 40px 18px 60px; }
.legal h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); letter-spacing: -.03em; margin: 0 0 8px; }
.legal .maj { color: var(--gris-2); margin: 0 0 26px; }
.legal h2 { font-size: 1.18rem; margin: 30px 0 10px; text-align: left; }
.legal p, .legal li { color: #D4D4D8; line-height: 1.7; }
.legal .boite { background: var(--carte); border: 1px solid var(--ligne); border-radius: 18px; padding: 16px 20px; }
.a-completer { background: rgba(251, 191, 36, .15); color: var(--or); font-weight: 700; padding: 1px 6px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- les coupes au choix : 2, 3 ou 5 coupes ---------- */
.packs-bloc { margin: 14px 0 6px; }
.packs-titre { font-weight: 800; margin: 0 0 10px; }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pack {
  display: grid; gap: 2px; justify-items: center; padding: 14px 6px; border-radius: 16px;
  background: var(--carte, rgba(255, 255, 255, .04)); border: 1.5px solid var(--bord, rgba(255, 255, 255, .12));
  color: inherit; font: inherit; cursor: pointer; transition: border-color .15s, background .15s;
}
.pack:hover:not(:disabled) { border-color: var(--violet); background: var(--violet-fond); }
.pack:disabled { opacity: .5; cursor: default; }
.pack b { font-size: .95rem; }
.pack strong { font-size: 1.15rem; }
.pack small { color: var(--gris); font-size: .72rem; }
.packs-bloc .petit-texte { margin-top: 8px; }
.cat-aide { color: var(--gris); font-weight: 600; margin: 4px 0 12px; }
.prix-packs { gap: 6px !important; margin-bottom: 14px !important; flex: 0 !important; }
.prix-packs li { display: block; padding: 0; background: none; }
.prix-packs li button {
  width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 4px 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent;
  background: rgba(255, 255, 255, .05); color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.prix-packs li button:hover { background: rgba(255, 255, 255, .1); border-color: var(--ligne-2); }
.prix-packs li button:active { transform: scale(.99); }
.prix-packs li button:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.prix-packs li::before { display: none !important; }
.hero-libre { margin: 10px 0 0; color: var(--gris); font-size: .92rem; }
.hero-libre .btn-link { font-size: inherit; }
.boutons-duo { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-tuto { margin: 4px 0 10px; }
.libre-analyse { margin-top: 26px; display: grid; gap: 8px; justify-items: start; }
.libre-analyse p { margin: 0; }

.price.best-analyse { border-color: rgba(124, 92, 255, .35); }
.avertissement-ia { margin: 10px 0 14px; padding: 10px 12px; border-radius: 12px; background: rgba(250, 204, 21, .08); border: 1px solid rgba(250, 204, 21, .25); color: #E4E4E7; font-size: .84rem; line-height: 1.45; }

/* ---------- l'espace : les images des essais ---------- */
.galerie-essais { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.galerie-essais > p { grid-column: 1 / -1; }
.essai-garde { margin: 0; background: var(--carte); border: 1px solid var(--ligne); border-radius: 16px; overflow: hidden; display: grid; }
.essai-garde-img { aspect-ratio: 4 / 5; display: grid; place-items: center; background: var(--carte-2); }
.essai-garde-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.essai-garde figcaption { padding: 10px 12px 0; display: grid; gap: 2px; }
.essai-garde figcaption small { color: var(--gris); font-size: .76rem; }
.essai-garde-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px 12px; }
.essai-garde-note { color: var(--gris); font-size: .8rem; font-weight: 600; align-self: center; }
.avertissement-ia ul { margin: 6px 0; padding-left: 18px; }
.avertissement-ia p { margin: 6px 0 0; }

/* ---------- « Comment ça marche » en trois lignes, sans photos ---------- */
.etapes-lignes { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.etapes-lignes li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; background: var(--carte); border: 1px solid var(--ligne); border-radius: 18px; padding: 16px 18px; }
.etapes-lignes h3 { margin: 0 0 4px; font-size: 1.02rem; }
.etapes-lignes p { margin: 0; color: var(--gris); font-size: .94rem; }
.etapes-lignes .etape-n { position: static; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--violet); color: #fff; font-weight: 800; font-size: .9rem; }
.inclus { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
.inclus > div { background: var(--carte-2); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; }
.inclus b { font-size: .95rem; }
.inclus span { color: var(--gris); font-size: .82rem; }
.prix-packs li em { display: block; width: 100%; color: var(--violet-2); font-style: normal; font-size: .78rem; font-weight: 700; }
@media (min-width: 760px) { .etapes-lignes { grid-template-columns: repeat(3, 1fr); } .inclus { grid-template-columns: repeat(4, 1fr); } }

/* ---------- les témoignages choisis, et la note du client ---------- */
.temoignages { display: grid; gap: 14px; margin-top: 26px; }
@media (min-width: 720px) { .temoignages { grid-template-columns: repeat(3, 1fr); } }
.temoignage {
  position: relative; margin: 0; padding: 26px 22px 20px; border-radius: 20px; display: grid; gap: 16px;
  background: linear-gradient(180deg, rgba(124, 92, 255, .10), var(--carte) 70%); border: 1px solid var(--ligne-2);
}
.t-guillemet { position: absolute; top: 6px; right: 18px; font-size: 3.4rem; line-height: 1; color: var(--violet); opacity: .35; }
.temoignage blockquote { margin: 0; font-size: 1.04rem; line-height: 1.55; font-weight: 600; }
.temoignage figcaption { display: flex; align-items: center; gap: 10px; }
.t-initiale { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--violet); color: #fff; font-weight: 800; font-size: .95rem; }
.t-qui { display: grid; }
.t-qui b { font-size: .95rem; }
.t-qui small { color: var(--gris); font-size: .78rem; }
.etoiles { display: flex; gap: 6px; margin: 14px 0 4px; }
.etoiles button { background: none; border: 0; font-size: 1.9rem; line-height: 1; color: var(--gris-2); cursor: pointer; padding: 0 2px; transition: color .15s, transform .15s; }
.etoiles button:hover { transform: scale(1.1); }
.etoiles button.on { color: #FACC15; }
#achat-contenu textarea { width: 100%; box-sizing: border-box; background: var(--carte-2); border: 1px solid var(--ligne-2); border-radius: 12px; color: inherit; font: inherit; padding: 10px 12px; resize: vertical; }

/* La page de stats, réservée au compte du patron. */
.tableau-stats { overflow-x: auto; margin: 14px 0 6px; border: 1px solid var(--ligne); border-radius: 14px; }
.tableau-stats table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 560px; }
.tableau-stats th, .tableau-stats td { padding: 10px 12px; text-align: left; white-space: nowrap; }
.tableau-stats thead th { background: var(--carte); color: var(--gris); font-weight: 600; font-size: .8rem; }
.tableau-stats tbody tr + tr td { border-top: 1px solid var(--ligne); }
.tableau-stats .vide { color: var(--gris-2); text-align: center; white-space: normal; }
.net-plus { color: var(--vert); font-weight: 700; }
.net-moins { color: var(--rouge); font-weight: 700; }
.liste-retours { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.liste-retours li { background: var(--carte); border: 1px solid var(--ligne); border-radius: 14px; padding: 12px 14px; }
.liste-retours li b { color: var(--or); margin-right: 8px; }
.liste-retours li span { color: var(--gris-2); font-size: .8rem; }
.liste-retours li p { margin: 6px 0 0; }
.liste-retours li.vide { color: var(--gris-2); text-align: center; }

/* Les achats du client et sa facture. */
.liste-achats { display: grid; gap: 8px; }
.achat-ligne {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 6px 14px; align-items: center;
  background: var(--carte); border: 1px solid var(--ligne); border-radius: 12px; padding: 11px 14px; font-size: .92rem;
}
.achat-date { color: var(--gris-2); font-size: .82rem; white-space: nowrap; }
.achat-quoi { font-weight: 600; }
.achat-prix { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .achat-ligne { grid-template-columns: 1fr auto; }
  .achat-date { grid-column: 1 / -1; }
}
.facture { background: var(--carte); border: 1px solid var(--ligne-2); border-radius: 14px; padding: 18px; margin: 10px 0 16px; }
.facture-marque {
  font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--ligne);
}
.facture-legal { color: var(--gris); font-size: .82rem !important; }
.facture-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.facture-tete b { font-size: 1.1rem; }
.facture-tete span { color: var(--gris-2); font-size: .85rem; }
.facture-parties { display: grid; gap: 14px; margin-bottom: 16px; }
@media (min-width: 520px) { .facture-parties { grid-template-columns: 1fr 1fr; } }
.facture-parties small { display: block; color: var(--gris-2); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.facture-parties p { margin: 0; font-size: .9rem; line-height: 1.5; }
.facture-lignes { width: 100%; border-collapse: collapse; font-size: .9rem; }
.facture-lignes th, .facture-lignes td { text-align: left; padding: 9px 8px; }
.facture-lignes thead th { color: var(--gris-2); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--ligne); }
.facture-lignes tfoot th { border-top: 1px solid var(--ligne-2); font-size: 1rem; }
.facture-lignes th:last-child, .facture-lignes td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.facture-mention { color: var(--gris); font-size: .8rem; margin: 14px 0 0; line-height: 1.5; }

/* A l'impression, seule la facture sort, en noir sur blanc. */
@media print {
  body * { visibility: hidden; }
  #facture-a-imprimer, #facture-a-imprimer * { visibility: visible; }
  #facture-a-imprimer {
    position: absolute; inset: 0 auto auto 0; width: 100%; margin: 0; padding: 0;
    background: #fff; color: #000; border: 0;
  }
  #facture-a-imprimer small, #facture-a-imprimer .facture-mention,
  #facture-a-imprimer .facture-tete span, #facture-a-imprimer thead th { color: #444; }
  #facture-a-imprimer th, #facture-a-imprimer td { border-color: #ccc; }
}