/* AGORA — Music Place · site vitrine (07/10/2026).
   Parcours repris de la vitrine d'ARKHÉE (bandeau, en-tête collant, hero centré avec champ
   de demande animé, fenêtre produit, fonctions en onglets + cartes, conversation sur
   téléphone, trois étapes, forfaits, FAQ, appel final, pied en colonnes), habillé de la
   charte P2 d'AGORA : blanc, encre, violet, une seule police (Agora Texte).
   Thème clair / sombre selon le système ; data-theme force l'un ou l'autre (captures, tests). */

@font-face { font-family: "Agora Texte"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/polices/agora-texte-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: "Agora Texte"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/polices/agora-texte-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; }
@font-face { font-family: "Agora Texte"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("/polices/agora-texte-italique-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; }

/* ═════════════════════════ JETONS — CLAIR (charte P2) ═════════════════════════ */
:root {
  color-scheme: light;
  --fond: #FFFFFF; --fond-2: #FAFAFB; --surface: #FFFFFF; --surface-2: #F4F4F6;
  --filet: #EAEAEE; --filet-fort: #8A8A94;
  --texte: #0A0A0B; --texte-2: #54545D; --texte-3: #66666F;
  --accent: #5530E8; --sur-accent: #FFFFFF; --accent-texte: #5530E8; --accent-doux: #EFEBFF;
  --accord: #0A6B4A; --accord-fond: #E0F4EC; --attente: #7A4D00; --attente-fond: #FFF1D6;
  --halo: rgb(85 48 232 / .13); --halo-2: rgb(85 48 232 / .07);
  --verre: rgb(255 255 255 / .74); --verre-fort: rgb(255 255 255 / .88);
  --trame: rgb(10 10 11 / .10);
  --msg-moi: #F4F4F6; --msg-ernest: #FFFFFF;
  --ombre-1: 0 1px 2px rgb(10 10 11 / .06), 0 1px 1px rgb(10 10 11 / .04);
  --ombre-2: 0 2px 4px rgb(10 10 11 / .05), 0 12px 32px -8px rgb(10 10 11 / .14);
  --ombre-3: 0 24px 64px -12px rgb(10 10 11 / .22);
  --plume: #5530E8;
  --bandeau-fond: #0A0A0B; --bandeau-texte: #FFFFFF;
  --police: "Agora Texte", Georgia, "Times New Roman", serif;
  --tnum: "tnum" 1, "lnum" 1;
  --r: 18px; --r-grand: 28px; --r-petit: 12px; --cible: 44px;
  --courbe: cubic-bezier(.2, .8, .2, 1); --d1: 140ms; --d2: 280ms; --d3: 620ms;
  --t-etiquette: .75rem; --t-petit: .9rem; --t-corps: 1.0625rem; --t-chapo: clamp(1.08rem, 1.5vw, 1.22rem);
  --t-h3: 1.3rem; --t-h2: clamp(2rem, 4vw, 3rem); --t-h1: clamp(2.6rem, 6.4vw, 4.8rem);
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; --e9: 112px;
  --haut: 68px; --defile: 48s;
}
/* Sombre : préférence système, ou data-theme="dark" pour forcer. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fond: #0A0A0B; --fond-2: #0E0E10; --surface: #141416; --surface-2: #1D1D21;
    --filet: #26262C; --filet-fort: #6E6E79;
    --texte: #F5F5F6; --texte-2: #A9A9B4; --texte-3: #92929D;
    --accent: #8F7BFF; --sur-accent: #0A0A0B; --accent-texte: #A898FF; --accent-doux: #211B3D;
    --accord: #5FD3A6; --accord-fond: #0F271E; --attente: #F2BE5C; --attente-fond: #2A2010;
    --halo: rgb(143 123 255 / .20); --halo-2: rgb(143 123 255 / .09);
    --verre: rgb(20 20 22 / .66); --verre-fort: rgb(10 10 11 / .82);
    --trame: rgb(245 245 246 / .09);
    --msg-moi: #1D1D21; --msg-ernest: #141416;
    --ombre-1: 0 0 0 1px var(--filet); --ombre-2: 0 0 0 1px var(--filet), 0 18px 40px -16px rgb(0 0 0 / .7);
    --ombre-3: 0 0 0 1px var(--filet), 0 30px 70px -20px rgb(0 0 0 / .8);
    --plume: #A898FF;
    --bandeau-fond: #211B3D; --bandeau-texte: #F5F5F6;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fond: #0A0A0B; --fond-2: #0E0E10; --surface: #141416; --surface-2: #1D1D21;
  --filet: #26262C; --filet-fort: #6E6E79;
  --texte: #F5F5F6; --texte-2: #A9A9B4; --texte-3: #92929D;
  --accent: #8F7BFF; --sur-accent: #0A0A0B; --accent-texte: #A898FF; --accent-doux: #211B3D;
  --accord: #5FD3A6; --accord-fond: #0F271E; --attente: #F2BE5C; --attente-fond: #2A2010;
  --halo: rgb(143 123 255 / .20); --halo-2: rgb(143 123 255 / .09);
  --verre: rgb(20 20 22 / .66); --verre-fort: rgb(10 10 11 / .82);
  --trame: rgb(245 245 246 / .09);
  --msg-moi: #1D1D21; --msg-ernest: #141416;
  --ombre-1: 0 0 0 1px var(--filet); --ombre-2: 0 0 0 1px var(--filet), 0 18px 40px -16px rgb(0 0 0 / .7);
  --ombre-3: 0 0 0 1px var(--filet), 0 30px 70px -20px rgb(0 0 0 / .8);
  --plume: #A898FF;
  --bandeau-fond: #211B3D; --bandeau-texte: #F5F5F6;
}

/* ═════════════════════════ BASE ═════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--haut) + 16px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--police); overflow-wrap: break-word; hyphens: auto;
  font-size: var(--t-corps); line-height: 1.6; overflow-x: hidden; font-optical-sizing: auto; }
img, svg { max-width: 100%; }
a { color: inherit; }
:where(a, button, label, summary, input, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.cadre { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.centre { text-align: center; }
.centre .intro { margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saut { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--surface); padding: 8px 14px; border-radius: 10px; }
.saut:focus { top: 12px; }
.glyphe { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* ═════════════════════════ TYPO ═════════════════════════ */
.etiquette { display: inline-flex; align-items: center; gap: var(--e2); margin: 0 0 var(--e4);
  font-size: var(--t-etiquette); font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-texte); padding: 5px 14px; border-radius: 999px; background: var(--accent-doux); }
h1, h2, h3, h4 { font-weight: 600; margin: 0; letter-spacing: -.01em; }
h2 { font-size: var(--t-h2); line-height: 1.08; margin-bottom: var(--e4); text-wrap: balance; }
h3 { font-size: var(--t-h3); line-height: 1.25; }
.intro { max-width: 62ch; color: var(--texte-2); margin: 0; text-wrap: pretty; }
.violet { color: var(--accent-texte); font-style: italic; }

/* ═════════════════════════ BOUTONS ═════════════════════════ */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: var(--cible); padding: 0 var(--e5); border-radius: 999px; border: 1px solid transparent;
  font: 600 .98rem/1 var(--police); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--d1), border-color var(--d1), color var(--d1), box-shadow var(--d2) var(--courbe), transform var(--d1); }
.bouton:active { transform: translateY(1px); }
.bouton.petit { min-height: 38px; padding: 0 var(--e4); font-size: var(--t-petit); }
.bouton.plein { background: var(--accent); color: var(--sur-accent); box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 6px 18px -6px var(--halo); }
.bouton.plein:hover { box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 10px 28px -8px var(--accent); }
.bouton.plein span[aria-hidden] { transition: transform var(--d2) var(--courbe); }
.bouton.plein:hover span[aria-hidden] { transform: translateX(3px); }
.bouton.trait { border-color: var(--filet); background: var(--verre); color: var(--texte); }
.bouton.trait:hover { border-color: var(--filet-fort); }
.gestes { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e6); }
.gestes.centre { justify-content: center; }
@media (max-width: 520px) { .gestes { flex-direction: column; } .gestes .bouton { width: 100%; min-height: 48px; } }

/* ═════════════════════════ BANDEAU + EN-TÊTE ═════════════════════════ */
.bandeau { margin: 0; background: var(--bandeau-fond); text-align: center; font-size: var(--t-petit); }
.bandeau a { display: block; padding: 9px 16px; color: var(--bandeau-texte); text-decoration: none; }
.bandeau b { color: inherit; font-weight: 650; }
.bandeau-fleche { display: inline-block; margin-left: 6px; transition: transform var(--d2) var(--courbe); }
.bandeau a:hover .bandeau-fleche { transform: translateX(4px); }
@media (max-width: 560px) { .bandeau { font-size: .8rem; } .bandeau-plus { display: none; } }

.tete { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent;
  transition: background-color var(--d2), border-color var(--d2); }
.tete.defile { background: var(--verre-fort); border-bottom-color: var(--filet);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.tete-in { display: flex; align-items: center; gap: var(--e5); height: var(--haut); }
.marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.marque svg { width: 30px; height: 30px; color: var(--texte); }
.marque b { font-size: 1.12rem; font-weight: 650; letter-spacing: .16em; }
.marque small { font-size: .78rem; color: var(--texte-3); letter-spacing: .04em; font-style: italic; }
.nav { display: flex; gap: var(--e1); margin-inline: auto; }
.nav a { white-space: nowrap; color: var(--texte-2); text-decoration: none; font-size: var(--t-petit);
  padding: 8px 14px; border-radius: 999px; transition: color var(--d1), background-color var(--d1); }
.nav a:hover, .nav a[aria-current="true"] { color: var(--texte); background: var(--surface-2); }
.tete-gestes { display: flex; align-items: center; gap: var(--e2); flex: none; }
.burger { display: none; width: var(--cible); height: var(--cible); border-radius: 50%; border: 1px solid var(--filet);
  background: var(--verre); color: var(--texte); cursor: pointer; place-items: center; }
.burger i, .burger i::before, .burger i::after { display: block; width: 16px; height: 1.5px; background: currentColor;
  border-radius: 2px; position: relative; transition: transform var(--d2) var(--courbe), background-color var(--d1); }
.burger i::before, .burger i::after { content: ""; position: absolute; left: 0; }
.burger i::before { top: -5px; } .burger i::after { top: 5px; }
.burger[aria-expanded="true"] i { background: transparent; }
.burger[aria-expanded="true"] i::before { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] i::after { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 1040px) {
  .nav { display: none; }
  .tete-gestes { margin-left: auto; }
  .burger:not([hidden]) { display: grid; }
  .tete.ouvert { background: var(--fond); }
  .tete.ouvert .nav { display: grid; position: absolute; left: 0; right: 0; top: var(--haut); margin: 0;
    padding: var(--e3) 16px var(--e5); background: var(--fond); border-bottom: 1px solid var(--filet);
    box-shadow: var(--ombre-3); gap: 2px; }
  .tete.ouvert .nav a { font-size: 1.05rem; padding: 14px 12px; border-radius: 12px; }
}
@media (max-width: 560px) { .tete-liste { display: none; } .marque small { display: none; } }

/* ═════════════════════════ HÉROS ═════════════════════════ */
.heros { position: relative; padding: clamp(48px, 9vw, 104px) 0 var(--e8); isolation: isolate; }
.heros-halo { position: absolute; inset: -140px 0 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: radial-gradient(55% 45% at 50% 0%, var(--halo), transparent 70%),
              radial-gradient(30% 30% at 88% 30%, var(--halo-2), transparent 70%),
              radial-gradient(30% 30% at 10% 38%, var(--halo-2), transparent 70%); }
.heros-halo::after { content: ""; position: absolute; inset: 0; opacity: .9;
  background-image: radial-gradient(var(--trame) 1px, transparent 1px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(60% 50% at 50% 22%, #000, transparent 75%);
          mask-image: radial-gradient(60% 50% at 50% 22%, #000, transparent 75%); }
.heros-in { text-align: center; display: grid; justify-items: center; }
.pour { display: inline-flex; align-items: center; gap: var(--e3); margin: 0 0 var(--e6); padding: 6px 16px 6px 8px;
  border: 1px solid var(--filet); border-radius: 999px; background: var(--verre); font-size: var(--t-petit);
  color: var(--texte-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pour b { color: var(--texte); font-weight: 600; }
.pour-pastilles { display: inline-flex; }
.pour-pastilles i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; margin-left: -7px;
  background: var(--accent-doux); color: var(--accent-texte); border: 2px solid var(--fond); }
.pour-pastilles i:first-child { margin-left: 0; }
.pour-pastilles svg { width: 13px; height: 13px; }
@media (max-width: 520px) { .pour { text-align: left; border-radius: 18px; font-size: .82rem; line-height: 1.4; padding: 8px 14px 8px 10px; } }
.heros h1 { font-size: var(--t-h1); line-height: 1.02; letter-spacing: -.03em; margin-bottom: var(--e5); text-wrap: balance; font-weight: 600; }
.h1-tuile { display: inline-grid; place-items: center; vertical-align: -.1em; width: 1.02em; height: 1.02em; margin-right: .08em;
  border-radius: .26em; background: var(--accent); color: var(--sur-accent); box-shadow: var(--ombre-2); }
.h1-tuile svg { width: 66%; height: 66%; }
.chapo { max-width: 60ch; font-size: var(--t-chapo); color: var(--texte-2); margin: 0; text-wrap: pretty; }
.note { margin: var(--e4) 0 0; font-size: var(--t-petit); color: var(--texte-3); }

/* Le champ de demande à Ernest (un lien vers la liste : il montre le ton des questions) */
.demande { width: min(660px, 100%); margin-top: var(--e7); text-align: left; border-radius: 22px; padding: var(--e4);
  background: var(--verre); border: 1px solid var(--filet); box-shadow: var(--ombre-3);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); position: relative; }
.demande::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, var(--accent), transparent 32%, transparent 70%, var(--halo));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .7; }
.demande-champ { display: flex; gap: var(--e3); align-items: flex-start; min-height: 74px; padding: var(--e2) var(--e2) var(--e4);
  text-decoration: none; color: var(--texte); font-size: 1.05rem; line-height: 1.5; }
.avatar { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--filet); color: var(--texte); }
.avatar svg { width: 72%; height: 72%; }
.demande-texte::after { content: ""; display: inline-block; width: 2px; height: 1.1em; vertical-align: -.18em; margin-left: 2px;
  background: var(--accent); animation: curseur 1s steps(1) infinite; }
@keyframes curseur { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .demande-texte::after { display: none; } }
.demande-barre { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }
.demande-gestes { display: flex; gap: var(--e2); flex-wrap: wrap; }
.puce { display: inline-flex; align-items: center; gap: var(--e2); font-size: var(--t-petit); color: var(--texte-2);
  border: 1px solid var(--filet); border-radius: 999px; padding: 6px 12px; }
.point { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block;
  box-shadow: 0 0 0 3px var(--accent-doux); }
@media (max-width: 560px) {
  .demande-barre { flex-direction: column; align-items: stretch; }
  .demande-gestes { flex-direction: column; } .demande-gestes .bouton { width: 100%; min-height: 48px; }
  .puce { align-self: flex-start; }
}

/* ═════════════════════════ FENÊTRE PRODUIT (schéma) ═════════════════════════ */
.fenetre { margin: var(--e7) auto 0; max-width: 980px; border-radius: var(--r-grand); border: 1px solid var(--filet);
  background: var(--surface); box-shadow: var(--ombre-3); overflow: hidden; }
.fenetre-barre { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--filet); background: var(--fond-2); }
.fenetre-barre i { width: 10px; height: 10px; border-radius: 50%; background: var(--filet); }
.fenetre-barre span { margin-left: var(--e3); font-size: var(--t-etiquette); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-3); }
.fenetre-corps { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--e5); padding: clamp(16px, 4vw, 40px);
  background: radial-gradient(70% 90% at 25% 0%, var(--halo-2), transparent 70%); }
.fenetre figcaption { font-size: var(--t-etiquette); color: var(--texte-3); text-align: center; letter-spacing: .04em; padding: 0 16px 16px; }
.plaque { min-width: 0; border: 1px solid var(--filet); border-radius: var(--r); background: var(--surface); box-shadow: var(--ombre-1);
  padding: var(--e5); display: grid; gap: var(--e3); margin: 0; }
.plaque-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--e1) var(--e3); }
.plaque-tete b { font-size: 1.18rem; font-weight: 650; }
.plaque-tete small { color: var(--texte-3); font-size: var(--t-petit); }
.part { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: var(--e3); align-items: center; padding: 10px 12px;
  border-radius: var(--r-petit); background: var(--fond-2); border: 1px solid var(--filet); }
.part .avatar { width: 30px; height: 30px; font-size: .78rem; font-weight: 650; background: var(--accent-doux); color: var(--accent-texte); border: 0; }
.part b { font-weight: 600; font-size: .98rem; } .part small { display: block; color: var(--texte-3); font-size: .8rem; }
.part .pc { font-feature-settings: var(--tnum); font-weight: 650; }
.statut { font-size: .74rem; font-weight: 650; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.statut.ok { color: var(--accord); background: var(--accord-fond); }
.statut.attente { color: var(--attente); background: var(--attente-fond); }
.plaque-gestes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e2); padding-top: var(--e3); border-top: 1px solid var(--filet); }
.plaque-gestes .bouton { min-height: 36px; padding: 0 var(--e4); font-size: var(--t-petit); pointer-events: none; }
.fenetre-cote { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); align-content: start; }
.fenetre-cote li { border: 1px solid var(--filet); border-radius: var(--r); padding: var(--e4); background: var(--surface); display: grid; gap: 4px; }
.fenetre-cote small { overflow-wrap: anywhere; font-size: var(--t-etiquette); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-3); }
.fenetre-cote b { font-weight: 600; }
.fenetre-cote .ernest-ligne { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--texte-2); }
@media (max-width: 760px) { .fenetre-corps { grid-template-columns: minmax(0, 1fr); } .fenetre-cote { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fenetre-cote li:last-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { .part { grid-template-columns: 30px minmax(0, 1fr) auto; } .part .statut { grid-column: 2 / -1; justify-self: start; } .fenetre-cote { grid-template-columns: minmax(0, 1fr); } }

/* ═════════════════════════ APPARITIONS ═════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .monte { animation: monte var(--d3) var(--courbe) backwards; }
  .heros-in > :nth-child(2) { animation-delay: 70ms; } .heros-in > :nth-child(3) { animation-delay: 140ms; }
  .heros-in > :nth-child(4) { animation-delay: 210ms; } .heros-in > :nth-child(5) { animation-delay: 280ms; }
  .js .apparait { opacity: 0; transform: translateY(24px) scale(.985); transition: opacity 700ms var(--courbe), transform 700ms var(--courbe); }
  .js .apparait.vu { opacity: 1; transform: none; }
}
@keyframes monte { from { opacity: 0; transform: translateY(14px); } }

/* ═════════════════════════ SECTIONS ═════════════════════════ */
.section { padding: var(--e9) 0; position: relative; }
.section.colle { padding-top: 0; }
.section.teinte { background: var(--fond-2); border-block: 1px solid var(--filet); }
@media (max-width: 600px) { .section { padding: var(--e8) 0; } }

/* ═════════════════════════ MÉTIERS (bandeau défilant) ═════════════════════════ */
.metiers { padding: var(--e7) 0 0; }
.metiers .tete-bandeau { text-align: center; margin-bottom: var(--e5); }
.metiers .tete-bandeau p { margin: 0; color: var(--texte-3); font-size: var(--t-etiquette); letter-spacing: .18em; text-transform: uppercase; }
.defilant { position: relative; }
.defilant-vue { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.defilant-piste { display: flex; width: max-content; }
.defilant-moitie { display: flex; align-items: center; flex: none; margin: 0; padding: 0; list-style: none; }
.metier { display: flex; align-items: center; gap: var(--e3); margin-right: var(--e8); color: var(--texte-2); }
.metier i { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-2); color: var(--texte); }
.metier i svg { width: 22px; height: 22px; }
.metier b { display: block; font-weight: 600; color: var(--texte); font-size: 1.02rem; }
.metier > span > span { display: block; font-size: var(--t-etiquette); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-3); }
.metier.vous i { background: none; border: 1px dashed var(--accent); color: var(--accent-texte); font-size: 1.4rem; }
.metier.vous b { color: var(--accent-texte); }
@media (prefers-reduced-motion: no-preference) {
  .defilant-piste { animation: defile var(--defile) linear infinite; }
  .defilant:hover .defilant-piste, .defilant:focus-within .defilant-piste { animation-play-state: paused; }
}
@keyframes defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .defilant-vue { -webkit-mask-image: none; mask-image: none; }
  .defilant-piste { width: 100%; justify-content: center; }
  .defilant-moitie { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; gap: var(--e5) var(--e7); padding-inline: 4vw; }
  .defilant-moitie > * { margin: 0; }
  .defilant-moitie[aria-hidden="true"] { display: none; }
}
@media (max-width: 600px) { .metier { margin-right: var(--e6); } }

/* ═════════════════════════ FONCTIONS : onglets + rail ═════════════════════════ */
.onglets { display: flex; flex-wrap: nowrap; justify-content: safe center; gap: var(--e2); margin: var(--e7) auto var(--e6);
  overflow-x: auto; scrollbar-width: none; padding: 4px 2px; }
.onglets::-webkit-scrollbar { display: none; }
.onglets[hidden] { display: none; }
.onglets button { flex: none; display: inline-flex; align-items: center; gap: var(--e2); min-height: var(--cible); padding: 0 var(--e4) 0 6px;
  border-radius: 999px; border: 1px solid var(--filet); background: var(--surface); color: var(--texte-2);
  font: 500 var(--t-petit)/1 var(--police); cursor: pointer; transition: all var(--d2) var(--courbe); }
.onglets button i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--texte); }
.onglets button i svg { width: 15px; height: 15px; }
.onglets button:hover { color: var(--texte); border-color: var(--filet-fort); }
.onglets button[aria-selected="true"] { color: var(--texte); border-color: var(--accent); background: var(--accent-doux); }
.onglets button[aria-selected="true"] i { background: var(--accent); color: var(--sur-accent); }
@media (max-width: 600px) { .onglets { justify-content: flex-start; margin-inline: -16px; padding: 4px 16px; } }

.rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(1000px, calc(100% - 64px)); gap: var(--e5);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  padding: var(--e4) max(32px, calc((100% - 1000px) / 2)) var(--e6); margin-top: var(--e6); }
.js .rail { margin-top: 0; }
.rail::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) { .rail { scroll-behavior: smooth; } }
.fonction { scroll-snap-align: center; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--r-grand);
  border: 1px solid var(--filet); background: var(--surface); box-shadow: var(--ombre-2); overflow: hidden;
  transition: opacity var(--d3) var(--courbe), transform var(--d3) var(--courbe), filter var(--d3) var(--courbe); }
.js .fonction:not(.courante) { opacity: .42; transform: scale(.96); filter: saturate(.5); cursor: pointer; }
.js .fonction:not(.courante) * { pointer-events: none; }
.fonction-chat { padding: clamp(20px, 3.5vw, 40px) clamp(20px, 3.5vw, 40px) clamp(20px, 3.5vw, 40px) clamp(52px, 5vw, 64px);
  display: grid; gap: var(--e4); align-content: center; border-right: 1px solid var(--filet);
  background: radial-gradient(90% 70% at 0% 100%, var(--halo-2), transparent 70%), var(--fond-2); }
.exemple { margin: 0; justify-self: start; font-size: var(--t-etiquette); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-3);
  border: 1px dashed var(--filet-fort); border-radius: 999px; padding: 2px 10px; }
.msg { margin: 0; padding: var(--e3) var(--e4); border-radius: 18px; font-size: .97rem; line-height: 1.5; max-width: 92%;
  border: 1px solid var(--filet); box-shadow: var(--ombre-1); }
.msg.moi { justify-self: end; background: var(--msg-moi); border-bottom-right-radius: 6px; }
.msg.ernest { justify-self: start; background: var(--msg-ernest); border-bottom-left-radius: 6px; position: relative; }
.msg.ernest .avatar { position: absolute; left: -42px; bottom: 0; width: 32px; height: 32px; }
.fonction-info { padding: clamp(20px, 3.5vw, 40px); display: grid; gap: var(--e3); align-content: center; }
.fonction-k { margin: 0; display: flex; align-items: center; gap: var(--e2); font-size: var(--t-etiquette); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-texte); font-weight: 600; }
.bientot { font-size: .68rem; letter-spacing: .08em; color: var(--attente); background: var(--attente-fond); border-radius: 999px; padding: 2px 8px; }
.fonction-info h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.15; }
.fonction-info > p:not(.fonction-k) { margin: 0; color: var(--texte-2); font-size: .98rem; }
.coches { list-style: none; margin: var(--e2) 0 0; padding: 0; display: grid; gap: var(--e2); }
.coches li { display: grid; grid-template-columns: 18px 1fr; gap: var(--e3); align-items: start; padding: 10px 14px; border-radius: 999px;
  background: var(--fond-2); border: 1px solid var(--filet); font-size: .93rem; }
.coche { width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--accent-doux); position: relative; flex: none; }
.coche::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px;
  border: solid var(--accent-texte); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.plus { justify-self: start; margin-top: var(--e2); color: var(--accent-texte); text-decoration: none; font-weight: 600; font-size: var(--t-petit); }
.plus:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 820px) {
  .rail { grid-auto-columns: calc(100% - 40px); padding-inline: 20px; gap: var(--e3); }
  .fonction { grid-template-columns: 1fr; }
  .fonction-chat { border-right: 0; border-bottom: 1px solid var(--filet); }
}

/* ═════════════════════════ ENSEMBLE : téléphone + texte ═════════════════════════ */
.ensemble::before { content: ""; position: absolute; inset: 10% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 50% at 25% 50%, var(--halo), transparent 70%); }
.ensemble-in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
/* Pixel 10 Pro XL — 76,6 × 162,8 mm. Cadre poli, écran plat, caméra ronde centrée.
   Obsidian en sombre, Porcelain en clair. Barre d'état tracée depuis le téléphone d'Adam. */
.pixel { --px-l: min(330px, 84vw); --px-cadre: #e9e4dc; --px-clair: #fbf9f5; --px-sombre: #cfc8bd;
  position: relative; justify-self: center; margin: 0; width: var(--px-l); aspect-ratio: 76.6 / 162.8;
  border-radius: calc(var(--px-l) * .15); padding: calc(var(--px-l) * .014);
  background: linear-gradient(90deg, var(--px-clair), var(--px-cadre) 8%, var(--px-sombre) 50%, var(--px-cadre) 92%, var(--px-clair));
  box-shadow: 0 0 0 1px rgb(0 0 0 / .18), inset 0 0 0 1px rgb(255 255 255 / .3), 0 40px 80px -20px rgb(0 0 0 / .32), 0 18px 36px -18px rgb(0 0 0 / .28); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pixel { --px-cadre: #2a2b2e; --px-clair: #6a6c70; --px-sombre: #121214; } }
:root[data-theme="dark"] .pixel { --px-cadre: #2a2b2e; --px-clair: #6a6c70; --px-sombre: #121214; }
.px-bouton { position: absolute; right: -3px; width: 4px; border-radius: 2px; background: linear-gradient(270deg, var(--px-sombre), var(--px-clair)); }
.px-marche { top: 22%; height: 7%; } .px-volume { top: 32%; height: 14%; }
.px-ecran { position: relative; height: 100%; border-radius: calc(var(--px-l) * .136); overflow: hidden; display: flex; flex-direction: column;
  border: calc(var(--px-l) * .016) solid #040404; background: var(--fond); color: var(--texte); isolation: isolate; }
.px-camera { position: absolute; top: 11px; left: 50%; width: calc(var(--px-l) * .042); aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2a3140 0 18%, #050505 40%); box-shadow: 0 0 0 1.5px #000; z-index: 2; }
.px-status { display: flex; justify-content: space-between; align-items: center; padding: 0 calc(var(--px-l) * .05) 0 calc(var(--px-l) * .055);
  height: calc(var(--px-l) * .105); color: var(--texte); }
.px-status svg { display: block; height: calc(var(--px-l) * .04); width: auto; }
.tel-tete { display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px; border-bottom: 1px solid var(--filet); }
.tel-retour { font-size: 26px; line-height: 1; color: var(--accent-texte); margin-top: -3px; }
.tel-tete .avatar { width: 34px; height: 34px; }
.tel-tete b { display: block; font-size: .98rem; font-weight: 650; }
.tel-tete small { display: inline-flex; align-items: center; gap: 6px; color: var(--texte-3); font-size: 11px; }
.tel-fil { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; padding: 12px 12px 8px; overflow: hidden; }
.tel-fil .exemple { align-self: center; }
.bulle { max-width: 84%; padding: 9px 12px; border-radius: 18px; font-size: .86rem; line-height: 1.4; border: 1px solid var(--filet); }
.bulle.ernest { align-self: flex-start; background: var(--msg-ernest); border-bottom-left-radius: 6px; }
.bulle.moi { align-self: flex-end; background: var(--accent); color: var(--sur-accent); border: 0; border-bottom-right-radius: 6px; font-weight: 600; }
.bulle.carte { align-self: flex-start; width: 84%; display: grid; gap: 4px; background: var(--surface); box-shadow: var(--ombre-1); }
.bulle.carte b { font-weight: 650; }
.bulle.carte small { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-3); margin-top: 3px; }
.bulle .ligne { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; }
.mini-gestes { display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px; }
.mini-gestes span { font-size: .7rem; font-weight: 650; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--filet); }
.mini-gestes .oui { background: var(--accent); color: var(--sur-accent); border-color: transparent; }
.tel-saisie { display: flex; align-items: center; justify-content: space-between; margin: 4px 12px 0; padding: 6px 6px 6px 14px; border-radius: 999px;
  border: 1px solid var(--filet); background: var(--surface); font-size: .85rem; color: var(--texte-3); }
.tel-saisie i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700;
  background: var(--accent); color: var(--sur-accent); }
.px-geste { align-self: center; width: 30%; height: 4px; border-radius: 2px; margin: 14px 0 9px; background: var(--texte); opacity: .8; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-fil] > * { opacity: 0; transform: translateY(10px); transition: opacity 420ms var(--courbe), transform 420ms var(--courbe); }
  .js [data-fil].joue > * { opacity: 1; transform: none; }
  .js [data-fil].joue > :nth-child(2) { transition-delay: 250ms; } .js [data-fil].joue > :nth-child(3) { transition-delay: 1000ms; }
  .js [data-fil].joue > :nth-child(4) { transition-delay: 2000ms; } .js [data-fil].joue > :nth-child(5) { transition-delay: 2800ms; }
}
.temps { list-style: none; margin: var(--e6) 0 0; padding: 0; display: grid; gap: var(--e3); }
.temps li { display: grid; grid-template-columns: 44px 1fr; gap: var(--e4); align-items: start; padding: var(--e4); border-radius: var(--r);
  border: 1px solid var(--filet); background: var(--surface); }
.temps b { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--accent-texte); background: var(--accent-doux); font-weight: 650; letter-spacing: .06em; }
.temps h3 { font-size: 1.1rem; margin-bottom: 2px; }
.temps p { margin: 0; color: var(--texte-2); font-size: .94rem; }
.gardes { list-style: none; margin: var(--e5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
.gardes li { font-size: .92rem; color: var(--texte-2); padding-left: var(--e4); border-left: 2px solid var(--accent); }
.gardes b { display: block; color: var(--texte); font-size: .98rem; }
@media (max-width: 900px) { .ensemble-in { grid-template-columns: 1fr; } .ensemble-texte { order: -1; } }
@media (max-width: 480px) { .gardes { grid-template-columns: 1fr; } }

/* ═════════════════════════ TROIS ÉTAPES ═════════════════════════ */
.etapes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.etapes-liste { list-style: none; margin: var(--e6) 0 0; padding: 0; display: grid; gap: var(--e2); }
.etapes-liste button { width: 100%; display: grid; grid-template-columns: 40px 1fr; gap: var(--e4); align-items: start; text-align: left;
  padding: var(--e4); border-radius: var(--r); border: 1px solid transparent; background: none; color: inherit; font: inherit; cursor: pointer;
  transition: background-color var(--d2), border-color var(--d2); }
.etapes-liste b { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--filet);
  color: var(--texte-3); transition: all var(--d2) var(--courbe); font-weight: 650; }
.etapes-liste strong { display: block; font-size: 1.12rem; font-weight: 600; color: var(--texte-2); }
.etapes-liste small { display: block; color: var(--texte-3); font-size: .94rem; }
.etapes-liste .on button { background: var(--surface); border-color: var(--filet); box-shadow: var(--ombre-1); }
.etapes-liste .on b { background: var(--accent); color: var(--sur-accent); border-color: transparent; }
.etapes-liste .on strong { color: var(--texte); }
.equipe { display: grid; gap: var(--e3); padding: var(--e5); border-radius: var(--r-grand); border: 1px solid var(--filet);
  background: radial-gradient(70% 60% at 100% 0%, var(--halo-2), transparent 70%), var(--surface); box-shadow: var(--ombre-2); }
.membre { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--e3); align-items: center; padding: var(--e3) var(--e4);
  border-radius: var(--r); background: var(--fond-2); border: 1px solid var(--filet); transition: border-color var(--d2), opacity var(--d2); }
.membre .avatar { width: 40px; height: 40px; font-weight: 650; font-size: .85rem; background: var(--accent-doux); color: var(--accent-texte); border: 0; }
.membre b { display: block; font-size: .97rem; font-weight: 600; }
.membre small { color: var(--texte-3); font-size: var(--t-petit); }
.equipe .statut { display: none; }
.equipe[data-etape="1"] .membre:not(:first-child) { opacity: .45; }
.equipe[data-etape="1"] .statut.e1, .equipe[data-etape="2"] .statut.e2, .equipe[data-etape="3"] .statut.e3 { display: inline-block; }
.equipe[data-etape="2"] .membre:first-child { border-color: var(--accent); }
.equipe[data-etape="3"] .membre:not(:first-child) { border-color: var(--accent); }
@media (max-width: 900px) { .etapes { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .equipe { padding: var(--e3); } .membre { grid-template-columns: 40px 1fr; } .membre .statut { grid-column: 2; justify-self: start; } }

/* ═════════════════════════ FORFAITS ═════════════════════════ */
.inclus { margin-top: var(--e7); border: 1px solid var(--filet); border-radius: var(--r-grand);
  background: radial-gradient(80% 140% at 0% 0%, var(--halo-2), transparent 60%), var(--surface);
  padding: var(--e6); display: grid; gap: var(--e5); grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
.inclus h3 { font-size: 1.4rem; }
.inclus p { margin: var(--e2) 0 0; color: var(--texte-2); font-size: .96rem; }
.inclus ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e3) var(--e5); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.inclus li { display: grid; grid-template-columns: 18px 1fr; gap: var(--e2); font-size: .96rem; }
@media (max-width: 860px) { .inclus { grid-template-columns: 1fr; padding: var(--e5); } }
.formules { display: grid; gap: var(--e4); margin-top: var(--e7); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 960px) { .formules { grid-template-columns: 1fr; } }
.formule { border: 1px solid var(--filet); border-radius: var(--r-grand); background: var(--surface);
  padding: var(--e6) var(--e5); display: flex; flex-direction: column; gap: var(--e4); position: relative; }
.formule.conseil { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--ombre-3);
  background: linear-gradient(180deg, var(--accent-doux), transparent 38%), var(--surface); transform: translateY(-8px); }
@media (max-width: 960px) { .formule.conseil { transform: none; } }
.drapeau { position: absolute; top: -12px; left: var(--e5); background: var(--accent); color: var(--sur-accent);
  font-size: var(--t-etiquette); font-weight: 650; letter-spacing: .12em; text-transform: uppercase; border-radius: 999px; padding: 3px var(--e3); }
.formule h3 { font-size: 1.65rem; letter-spacing: .01em; }
.formule .pour-qui { margin: 0; color: var(--texte-3); font-size: var(--t-petit); }
.prix { display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap; margin: 0; }
.prix data { font-size: 2.7rem; font-weight: 650; line-height: 1; font-feature-settings: var(--tnum); }
.prix small { color: var(--texte-3); font-size: var(--t-petit); }
.annuel { margin: calc(-1 * var(--e2)) 0 0; font-size: var(--t-petit); color: var(--accent-texte); }
.quotas { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filet); }
.quotas li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3); padding: 9px 0;
  border-bottom: 1px solid var(--filet); font-size: .93rem; color: var(--texte-2); }
.quotas li b { color: var(--texte); font-feature-settings: var(--tnum); font-weight: 650; white-space: nowrap; text-align: right; }
.quotas li.non { color: var(--texte-3); } .quotas li.non b { color: var(--texte-3); font-weight: 400; }
.formule .bouton { margin-top: auto; width: 100%; }
.bandes { display: grid; gap: var(--e4); margin-top: var(--e4); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 960px) { .bandes { grid-template-columns: 1fr; } }
.bande { border: 1px solid var(--filet); border-radius: var(--r-grand); padding: var(--e5); display: grid; gap: var(--e3);
  grid-template-columns: minmax(0, 1fr) auto; align-items: center; background: var(--surface); }
.bande h3 { font-size: 1.25rem; }
.bande p { margin: 4px 0 0; color: var(--texte-2); font-size: .94rem; }
.bande .prix-bande { font-weight: 650; font-size: 1.15rem; white-space: nowrap; font-feature-settings: var(--tnum); }
.bande.invite { background: radial-gradient(90% 120% at 100% 0%, var(--accord-fond), transparent 65%), var(--surface); }
.bande.invite .prix-bande { color: var(--accord); }
@media (max-width: 560px) { .bande { grid-template-columns: 1fr; } }
.options { margin: var(--e5) 0 0; padding: var(--e4) var(--e5); border-radius: var(--r); background: var(--fond-2); border: 1px dashed var(--filet-fort);
  color: var(--texte-2); font-size: .94rem; }
.options b { color: var(--texte); }
.formules-pied { margin: var(--e4) 0 0; color: var(--texte-3); font-size: var(--t-petit); max-width: 92ch; }

/* ═════════════════════════ FAQ ═════════════════════════ */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.faq-cote { position: sticky; top: calc(var(--haut) + 24px); }
.aide { margin-top: var(--e6); padding: var(--e5); border-radius: var(--r-grand); border: 1px solid var(--filet);
  background: radial-gradient(80% 80% at 0% 0%, var(--halo-2), transparent 70%), var(--surface); display: grid; gap: var(--e2); justify-items: start; }
.aide b { font-size: 1.18rem; }
.aide p { margin: 0 0 var(--e2); color: var(--texte-2); font-size: .96rem; }
.faq-liste { display: grid; gap: var(--e3); }
.faq-liste details { border: 1px solid var(--filet); border-radius: var(--r); background: var(--surface); padding: 0 var(--e5);
  transition: border-color var(--d2), box-shadow var(--d2); }
.faq-liste details[open] { border-color: var(--filet-fort); box-shadow: var(--ombre-1); }
.faq-liste summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--e4);
  font-weight: 600; font-size: 1.08rem; min-height: 64px; }
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-doux);
  -webkit-mask: none; mask: none;
  background-image: linear-gradient(var(--accent-texte), var(--accent-texte)), linear-gradient(var(--accent-texte), var(--accent-texte));
  background-size: 12px 2px, 2px 12px; background-position: center; background-repeat: no-repeat;
  transition: transform var(--d2) var(--courbe); }
.faq-liste details[open] summary::after { transform: rotate(45deg); }
.faq-liste details p { color: var(--texte-2); margin: 0 0 var(--e5); max-width: 68ch; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } .faq-cote { position: static; } }

/* ═════════════════════════ LISTE (appel final + formulaire) ═════════════════════════ */
.liste { position: relative; overflow: hidden; border-radius: var(--r-grand); border: 1px solid var(--filet);
  padding: clamp(36px, 7vw, 88px) clamp(20px, 5vw, 64px); background: var(--surface); isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.liste::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 80% at 0% 0%, var(--halo), transparent 70%), radial-gradient(40% 60% at 100% 100%, var(--halo-2), transparent 70%); }
.liste-tuile { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--accent); color: var(--sur-accent); margin-bottom: var(--e5); box-shadow: var(--ombre-2); }
.liste-tuile svg { width: 64%; height: 64%; }
.liste .intro { margin-bottom: var(--e4); }
.formulaire { display: grid; gap: var(--e5); }
.formulaire .champ { display: grid; gap: var(--e2); }
.formulaire label.titre, .formulaire .titre { font-weight: 600; font-size: .98rem; }
.formulaire .titre small { font-weight: 400; color: var(--texte-3); }
.formulaire input[type="email"], .formulaire input[type="text"] { width: 100%; min-height: 50px; padding: 0 16px; border-radius: 14px;
  border: 1px solid var(--filet-fort); background: var(--fond); color: var(--texte); font: 400 1.02rem var(--police); }
.formulaire input::placeholder { color: var(--texte-3); }
.formulaire input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.choix { display: flex; flex-wrap: wrap; gap: var(--e2); border: 0; margin: 0; padding: 0; }
.choix legend { padding: 0; margin-bottom: var(--e2); }
.choix label { position: relative; display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--filet); background: var(--fond); cursor: pointer; font-size: .95rem; color: var(--texte-2);
  transition: border-color var(--d1), background-color var(--d1), color var(--d1); }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix label:hover { border-color: var(--filet-fort); color: var(--texte); }
.choix label:has(input:checked) { border-color: var(--accent); background: var(--accent-doux); color: var(--texte); font-weight: 600; }
.choix label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire .bouton { justify-self: start; min-height: 50px; padding: 0 var(--e6); }
.mention { margin: 0; font-size: .82rem; color: var(--texte-3); }
.mention a { color: var(--texte-2); }
.retour { margin: 0; font-size: .95rem; font-weight: 600; }
.retour:empty { display: none; }
.retour.erreur { color: #B8281A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .retour.erreur { color: #FF8A7A; } }
:root[data-theme="dark"] .retour.erreur { color: #FF8A7A; }
.merci { display: none; padding: var(--e5); border-radius: var(--r); background: var(--accord-fond); color: var(--texte); font-size: 1.05rem; }
.merci b { color: var(--accord); }
.formulaire.envoye > :not(.merci) { display: none; }
.formulaire.envoye .merci { display: block; }
@media (max-width: 860px) { .liste { grid-template-columns: 1fr; } .formulaire .bouton { width: 100%; justify-self: stretch; } }

/* ═════════════════════════ PIED ═════════════════════════ */
.pied { border-top: 1px solid var(--filet); padding: var(--e8) 0 var(--e6); font-size: var(--t-petit); margin-top: var(--e8); }
.pied-in { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--e6); }
.pied-marque p { margin: var(--e3) 0; color: var(--texte-3); font-style: italic; }
.pied-marque > a:last-child { color: var(--texte-2); text-decoration: none; }
.pied nav { display: grid; gap: var(--e2); align-content: start; }
.pied nav b { color: var(--texte); font-weight: 600; margin-bottom: var(--e1); }
.pied nav a { color: var(--texte-3); text-decoration: none; }
.pied a:hover { color: var(--accent-texte); }
.pied-base { margin-top: var(--e7); padding-top: var(--e5); border-top: 1px solid var(--filet); color: var(--texte-3); font-size: var(--t-etiquette); }
@media (max-width: 760px) { .pied-in { grid-template-columns: 1fr 1fr; } .pied-marque { grid-column: 1 / -1; } }

/* ═════════════════════════ SÉLECTEUR DE LANGUE ═════════════════════════ */
.langue { position: relative; flex: none; }
.langue > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 10px;
  border: 1px solid var(--filet); border-radius: 999px; cursor: pointer; color: var(--texte-2); font-size: var(--t-petit);
  letter-spacing: .06em; user-select: none; }
.langue > summary::-webkit-details-marker { display: none; }
.langue > summary:hover, .langue[open] > summary { color: var(--texte); border-color: var(--filet-fort); }
.langue > summary i { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--d1) ease; }
.langue[open] > summary i { transform: translateY(1px) rotate(-135deg); }
.langue-drapeau { font-size: 1.1em; line-height: 1; }
.langue-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 176px; padding: 6px;
  background: var(--surface); border: 1px solid var(--filet); border-radius: 12px; box-shadow: var(--ombre-3); display: grid; gap: 2px; }
.langue-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--texte);
  text-decoration: none; font-size: var(--t-petit); }
.langue-menu a:hover, .langue-menu a:focus-visible { background: var(--surface-2); outline: none; }
.langue-menu a[aria-current="true"] { color: var(--accent-texte); }
.langue-menu .langue-code { width: 22px; color: var(--texte-3); font-size: .78em; letter-spacing: .08em; }
.nav .langue { display: none; }
@media (max-width: 1040px) {
  .tete-gestes .langue { display: none; }
  .nav .langue { display: block; margin-top: var(--e2); }
  .nav .langue-menu { position: static; box-shadow: none; margin-top: 8px; min-width: 0; }
}

/* ═════════════════════════ PAGES LÉGALES ═════════════════════════ */
.legal { max-width: 740px; margin: 0 auto; padding: var(--e7) 16px var(--e8); }
.legal h1 { font-size: clamp(2rem, 4vw, 2.6rem); margin: var(--e5) 0 var(--e2); }
.legal h2 { font-size: 1.25rem; margin: var(--e6) 0 var(--e2); }
.legal p, .legal li, .legal dd { color: var(--texte-2); }
.legal dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.legal dt { color: var(--texte-3); } .legal dd { margin: 0; }
.legal .date { color: var(--texte-3); font-size: .9rem; }
.legal a { color: var(--accent-texte); }
@media (max-width: 520px) { .legal dl { grid-template-columns: 1fr; gap: 2px; } .legal dd { margin-bottom: 8px; } }

/* ═════════════════════════ RELIEF (08/10/2026) ═════════════════════════
   Petits effets à la manière d'ARKHÉE, dans la charte P2 (un seul violet) :
   halos qui respirent, lumière qui suit le pointeur sur les cartes, anneau de lumière
   qui tourne autour du champ d'Ernest et du forfait conseillé, tuiles qui rayonnent,
   cartes qui se soulèvent. Tout mouvement s'arrête en « mouvement réduit ». */
@property --tour { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
:root { --reflet: rgb(255 255 255 / .9); --halo-fort: rgb(85 48 232 / .30); --lueur: rgb(85 48 232 / .07); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --reflet: rgb(255 255 255 / .07); --halo-fort: rgb(143 123 255 / .36); --lueur: rgb(143 123 255 / .10); }
}
:root[data-theme="dark"] { --reflet: rgb(255 255 255 / .07); --halo-fort: rgb(143 123 255 / .36); --lueur: rgb(143 123 255 / .10); }

/* Halos du héros : deux nappes de plus, qui dérivent lentement */
.heros-halo::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(26% 32% at 32% 16%, var(--halo), transparent 70%),
              radial-gradient(22% 28% at 70% 24%, var(--halo-2), transparent 70%); }
.liste::before { inset: -15%; }

/* Reflet : un filet de lumière sur l'arête haute des cartes (le relief en sombre) */
.fenetre, .plaque, .fonction, .equipe, .formule, .bande, .inclus, .aide, .temps li, .faq-liste details, .liste {
  box-shadow: inset 0 1px 0 var(--reflet), var(--ombre-cartes, 0 0 #0000); }
.fenetre { --ombre-cartes: var(--ombre-3); }
.fonction, .equipe { --ombre-cartes: var(--ombre-2); }
.plaque, .faq-liste details[open] { --ombre-cartes: var(--ombre-1); }
.formule.conseil { box-shadow: inset 0 1px 0 var(--reflet), 0 0 0 1px var(--accent), 0 30px 70px -24px var(--halo-fort), var(--ombre-3); }

/* Tuiles qui rayonnent */
.h1-tuile, .liste-tuile { box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 12px 32px -8px var(--halo-fort), var(--ombre-2); }
.onglets button[aria-selected="true"] { box-shadow: 0 6px 22px -8px var(--halo-fort); }
.onglets button[aria-selected="true"] i, .etapes-liste .on b { box-shadow: 0 4px 14px -2px var(--halo-fort); }
.pixel { box-shadow: 0 0 0 1px rgb(0 0 0 / .18), inset 0 0 0 1px rgb(255 255 255 / .3),
  0 40px 80px -20px rgb(0 0 0 / .32), 0 18px 36px -18px rgb(0 0 0 / .28), 0 30px 120px -20px var(--halo-fort); }

/* Filet de lumière en haut des sections teintées */
.section.teinte::after { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent); opacity: .45; }

/* Lumière qui suit le pointeur (posée par vitrine.js, souris seulement) */
.lueur { position: relative; }
.lueur::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), var(--lueur), transparent 65%);
  opacity: 0; transition: opacity var(--d3) var(--courbe); }
.lueur:hover::after { opacity: 1; }

/* Anneau de lumière : bordure en dégradé conique (fixe si le navigateur ne sait pas l'animer) */
.demande::before { background: conic-gradient(from var(--tour), var(--accent), transparent 22%, transparent 50%, var(--halo-fort) 72%, var(--accent)); opacity: .85; }
.formule.conseil::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--tour), transparent 0 55%, var(--accent-texte) 75%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

@media (prefers-reduced-motion: no-preference) {
  .heros-halo { animation: respire 9s ease-in-out infinite alternate; }
  .heros-halo::before { animation: derive 24s ease-in-out infinite alternate; }
  .liste::before { animation: derive 30s ease-in-out infinite alternate-reverse; }
  .demande::before { animation: tour 7s linear infinite; }
  .formule.conseil::before { animation: tour 5s linear infinite; }
  .point { animation: pouls 2.4s var(--courbe) infinite; }
  .formule, .bande, .temps li, .aide, .inclus { transition: transform var(--d2) var(--courbe), box-shadow var(--d2) var(--courbe), border-color var(--d2); }
  .formule:hover, .bande:hover, .temps li:hover, .aide:hover { transform: translateY(-4px);
    --ombre-cartes: 0 22px 48px -20px var(--halo-fort), var(--ombre-2); border-color: var(--filet-fort); }
  .formule.conseil:hover { transform: translateY(-12px); }
  @media (max-width: 960px) { .formule.conseil:hover { transform: translateY(-4px); } }
  .h1-tuile { animation: flotte 6s ease-in-out infinite; }
}
@keyframes respire { from { opacity: .75; } to { opacity: 1; } }
@keyframes derive { 0% { transform: translate3d(-3%, 0, 0) scale(1); } 50% { transform: translate3d(2%, 3%, 0) scale(1.06); } 100% { transform: translate3d(4%, -2%, 0) scale(.98); } }
@keyframes tour { to { --tour: 360deg; } }
@keyframes pouls { 0% { box-shadow: 0 0 0 0 var(--halo-fort); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@keyframes flotte { 50% { transform: translateY(-3px); } }