/* La vente à distance · Vente à Distance inc.
   Titres : Times New Roman. Texte : Helvetica. Emojis Apple. Sections sombres et claires en alternance. */

:root {
  --marque: #dc3724;
  --marque-fonce: #b71602;
  --rouge: #ff3b30;
  --orange: #dc3724;
  --or: #c7c7cc;
  --menthe: #c7c7cc;
  --bleu: #8e8e93;
  --violet: #8e8e93;
  --serif: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --rayon: 22px;
  /* thème sombre par défaut */
  --fond: #000;
  --surface: #161617;
  --surface-2: #1d1d1f;
  --texte: #f5f5f7;
  --texte-2: #a1a1a6;
  --trait: rgba(255,255,255,.1);
  --lien: #2997ff;
  --accent-or: #ffd60a;
  --accent-rouge: #ff6961;
  --ombre: 0 1px 0 rgba(255,255,255,.04) inset;
}
.bloc-clair, .page-guide {
  --fond: #f5f5f7;
  --surface: #fff;
  --surface-2: #f5f5f7;
  --texte: #1d1d1f;
  --texte-2: #6e6e73;
  --trait: #e3e3e8;
  --lien: #0066cc;
  --accent-or: #a35f00;
  --accent-rouge: #d70015;
  --ombre: 0 2px 6px rgba(0,0,0,.04), 0 12px 32px -12px rgba(0,0,0,.12);
}
.page-guide .tete, .page-guide .bloc-cta {
  --fond: #000; --surface: #161617; --surface-2: #1d1d1f; --texte: #f5f5f7; --texte-2: #a1a1a6;
  --trait: rgba(255,255,255,.1); --lien: #2997ff; --accent-or: #ffd60a; --accent-rouge: #ff6961;
  --ombre: 0 1px 0 rgba(255,255,255,.04) inset;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #000; color: var(--texte); font-family: var(--sans); font-size: 17px; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lien); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2 { font-family: var(--serif); font-weight: 700; margin: 0 0 .45em; color: var(--texte); }
h1 { font-size: clamp(2.6rem, 6.6vw, 4.6rem); line-height: 1.04; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.08; letter-spacing: -0.025em; }
h1 em, h2 em, .citation em, .questions h3 em, .chemin h3 em { font-style: normal; color: var(--texte-2); }
h3 { font-family: var(--sans); font-weight: 700; font-size: 1.12rem; line-height: 1.25; margin: 0 0 .45em; color: var(--texte); letter-spacing: -0.005em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; border-radius: 6px; }

.cadre { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.etroit { max-width: 800px; }
.centre { text-align: center; }
.sauter { position: absolute; left: -9999px; }
.sauter:focus { left: 16px; top: 12px; background: var(--marque); color: #fff; padding: 8px 12px; z-index: 30; }

/* Emojis */
.emo { font-family: var(--emoji); font-style: normal; display: inline-block; line-height: 1; margin-right: .3em; }
.emo-geant { font-size: 128px; margin: 0; filter: drop-shadow(0 20px 40px rgba(0,0,0,.45)); animation: flotte 7s ease-in-out infinite; }
.emo-xl { font-family: var(--emoji); font-size: 56px; line-height: 1; display: block; margin-bottom: 10px; }
.tuile { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 17px; font-family: var(--emoji); font-size: 30px; line-height: 1; margin-bottom: 16px; flex-shrink: 0; }
.t-or { background: rgba(255,204,0,.18); } .t-orange { background: rgba(255,149,0,.17); } .t-rouge { background: rgba(255,59,48,.15); }
.t-menthe { background: rgba(52,199,89,.16); } .t-bleu { background: rgba(10,132,255,.15); } .t-violet { background: rgba(175,82,222,.15); }
.t-gris { background: rgba(142,142,147,.16); }
.bloc:not(.bloc-clair) .t-or, .tete .t-or, .bloc-cta .t-or { background: rgba(255,204,0,.26); }
.bloc:not(.bloc-clair) .t-orange, .bloc-cta .t-orange { background: rgba(255,149,0,.26); }
.bloc:not(.bloc-clair) .t-rouge { background: rgba(255,59,48,.24); }
.bloc:not(.bloc-clair) .t-menthe { background: rgba(52,199,89,.24); }
.bloc:not(.bloc-clair) .t-bleu, .bloc-cta .t-bleu { background: rgba(10,132,255,.26); }
.bloc:not(.bloc-clair) .t-violet { background: rgba(175,82,222,.26); }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 20; background: rgba(0,0,0,.78); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(255,255,255,.08); }
.entete-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.logo img { width: 196px; }
.menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; padding: 14px 11px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; height: 1.5px; background: #f5f5f7; margin-bottom: 6px; border-radius: 2px; }
.nav { display: flex; gap: 4px 26px; font-size: .86rem; }
.nav a { color: #c7c7cc; text-decoration: none; padding: 6px 0; transition: color .2s; }
.nav a:hover { color: #fff; text-decoration: none; }
.nav a[aria-current="page"] { color: #fff; font-weight: 700; }
@media (min-width: 1040px) { .menu { display: none; } }
@media (max-width: 1039px) {
  .logo img { width: 176px; }
  .nav-bureau { display: none; }
  .nav-cell { position: absolute; left: 0; right: 0; top: 60px; flex-direction: column; gap: 0; background: rgba(0,0,0,.96); backdrop-filter: blur(20px); padding: 10px 20px 22px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav-cell a { padding: 14px 0; font-size: 1.3rem; font-weight: 700; color: #f5f5f7; border-bottom: 1px solid rgba(255,255,255,.08); }
}

.fil { display: flex; gap: 8px; font-size: .82rem; color: #86868b; padding-top: 14px; padding-bottom: 14px; }
.fil a { color: #a1a1a6; }

/* Textes */
.surtitre { font-family: var(--sans); font-weight: 700; font-size: 1.05rem; margin-bottom: 14px; color: var(--orange); }
.chapeau { font-size: clamp(1.12rem, 2.2vw, 1.35rem); color: var(--texte-2); max-width: 44ch; line-height: 1.5; }
.chapeau-bloc { color: var(--texte-2); max-width: 60ch; margin-bottom: 40px; font-size: 1.18rem; line-height: 1.5; }
.grand { font-weight: 600; font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.3; color: var(--texte); }
.surligne { text-decoration: underline; text-decoration-color: var(--marque); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.note { color: var(--texte-2); font-size: .88rem; }
.lien-texte { display: inline-block; margin-top: 18px; font-weight: 700; font-size: 1.05rem; }
.suite { color: var(--texte-2); }
.sous-titre { margin-top: 32px; font-size: 1.2rem; }

/* Héros : texte centré, puis la scène MacBook + iPhone */
.hero { position: relative; overflow: hidden; background: #000; }
.hero-lueurs span { position: absolute; border-radius: 50%; filter: blur(120px); animation: derive 22s ease-in-out infinite alternate; }
.hero-lueurs .l1 { width: 900px; height: 700px; background: var(--marque); bottom: -360px; left: 50%; margin-left: -450px; opacity: .5; }
.hero-lueurs .l2 { width: 420px; height: 420px; background: var(--orange); top: 30%; right: -220px; opacity: .14; animation-delay: -8s; }
.hero-lueurs .l3 { width: 420px; height: 420px; background: var(--violet); top: 20%; left: -240px; opacity: .14; animation-delay: -14s; }
@keyframes derive { to { transform: translate(40px, 30px) scale(1.08); } }
.hero-in { position: relative; text-align: center; padding-top: clamp(56px, 8vw, 104px); padding-bottom: 90px; }
.hero .surtitre { margin-bottom: 18px; }
.hero h1 { max-width: none; font-size: clamp(2.7rem, 7.2vw, 5.6rem); line-height: 1.02; }
.hero .chapeau { margin: 22px auto 0; max-width: 40ch; }
.hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.hero .bouton-blanc { background: #fff; color: #000; box-shadow: 0 10px 30px -10px rgba(255,255,255,.35); }
.hero .bouton-blanc:hover { background: #fff; color: #000; }
.hero .bouton-verre { background: rgba(255,255,255,.12); box-shadow: none; color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hero .bouton-verre:hover { background: rgba(255,255,255,.2); color: #fff; }

.scene-hero { position: relative; width: min(1040px, 100%); height: 600px; margin: 72px auto 0; text-align: left; perspective: 1600px; }
.sh-lueur { position: absolute; left: 10%; right: 10%; top: 18%; bottom: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(220,55,36,.55), transparent); filter: blur(40px); }
.sh-sol { position: absolute; left: 4%; right: 4%; bottom: -30px; height: 60px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.9), transparent); }

/* MacBook */
.mac { position: absolute; left: 0; top: 40px; width: 80%; z-index: 1; transform: rotateX(4deg); transform-origin: bottom center; }
.mac-ecran { position: relative; background: #0b0b0c; border-radius: 22px 22px 0 0; padding: 16px 16px 18px; border: 1px solid #3a3a3c; border-bottom: 0; box-shadow: 0 0 0 1px #000 inset, 0 60px 120px -40px rgba(0,0,0,.95); }
.mac-cam { position: absolute; top: 6px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #1c1c1e; box-shadow: 0 0 0 1px #2c2c2e; }
.mac-base { position: relative; height: 20px; margin: 0 -5%; border-radius: 0 0 22px 22px; background: linear-gradient(180deg, #d1d1d6 0%, #a1a1a6 55%, #6e6e73 100%); box-shadow: 0 30px 40px -20px rgba(0,0,0,.8); }
.mac-base span { position: absolute; left: 50%; top: 0; width: 16%; height: 7px; margin-left: -8%; border-radius: 0 0 10px 10px; background: #8e8e93; }
.ft { position: relative; height: 430px; border-radius: 10px; overflow: hidden; background: radial-gradient(ellipse 80% 70% at 50% 30%, #ff7a45 0%, #dc3724 55%, #6e1206 100%); display: flex; align-items: center; justify-content: center; }
.ft::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), transparent 22%, transparent 70%, rgba(0,0,0,.45)); }
.ft-haut { position: absolute; z-index: 2; top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; color: #fff; background: rgba(0,0,0,.35); backdrop-filter: blur(10px); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.ft-point { width: 7px; height: 7px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 3px rgba(52,199,89,.3); }
.ft-temps { color: rgba(255,255,255,.7); font-weight: 400; }
.ft-visage { position: relative; z-index: 1; font-family: var(--emoji); font-size: 210px; line-height: 1; transform: translateY(18px); filter: drop-shadow(0 20px 40px rgba(0,0,0,.35)); }
.ft-nom { position: absolute; z-index: 2; left: 16px; bottom: 16px; color: #fff; font-size: .8rem; font-weight: 700; background: rgba(0,0,0,.35); backdrop-filter: blur(10px); padding: 6px 10px; border-radius: 10px; }
.ft-pip { position: absolute; z-index: 2; right: 16px; top: 52px; width: 150px; height: 104px; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #5ac8fa, #0a84ff); border: 2px solid rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 30px -10px rgba(0,0,0,.6); }
.ft-pip-e { font-family: var(--emoji); font-size: 66px; line-height: 1; transform: translateY(10px); }
.ft-pip-n { position: absolute; left: 8px; bottom: 6px; font-size: .68rem; color: #fff; font-weight: 700; }
.ft-ctrl { position: absolute; z-index: 2; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; padding: 8px 12px; border-radius: 999px; background: rgba(0,0,0,.35); backdrop-filter: blur(10px); }
.ft-ctrl i { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-family: var(--emoji); font-style: normal; font-size: 16px; }
.ft-ctrl .fin { background: #ff3b30; }

/* iPhone et Messages */
.iphone { position: absolute; z-index: 3; right: 1%; top: 0; width: 270px; border-radius: 48px; padding: 10px; background: linear-gradient(145deg, #4a4a4e, #1c1c1e 40%, #2c2c2e); box-shadow: 0 60px 120px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.14) inset; animation: flotte 8s ease-in-out infinite; }
.iphone-ecran { background: #fff; border-radius: 39px; overflow: hidden; min-height: 540px; display: flex; flex-direction: column; text-align: left; }
.iphone-haut { height: 38px; display: flex; justify-content: center; align-items: center; }
.iphone-ilot { width: 88px; height: 26px; border-radius: 20px; background: #000; }
.msg-entete { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0 10px; border-bottom: 1px solid #e5e5ea; background: #f9f9f9; }
.msg-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(180deg, #a5a5ad, #85858c); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.msg-nom { font-size: .68rem; color: #1d1d1f; }
.msg-fil { padding: 12px 10px 16px; display: flex; flex-direction: column; gap: 6px; font-family: var(--sans); }
.msg { max-width: 80%; margin: 0; padding: 7px 12px; border-radius: 17px; font-size: .8rem; line-height: 1.35; opacity: 0; transform: translateY(8px) scale(.97); animation: apparait .45s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * 1.1s + .6s); }
.msg.recu { align-self: flex-start; background: #e9e9eb; color: #000; border-bottom-left-radius: 6px; }
.msg.envoye { align-self: flex-end; background: #0b84fe; color: #fff; border-bottom-right-radius: 6px; }
.msg-lu { align-self: flex-end; font-size: .64rem; color: #8e8e93; margin: 0 4px 0 0; opacity: 0; animation: apparait .4s forwards; animation-delay: calc(var(--i) * 1.1s + .6s); }
@keyframes apparait { to { opacity: 1; transform: none; } }
@keyframes flotte { 50% { transform: translateY(-10px); } }

/* Notifications flottantes */
.notif { position: absolute; z-index: 4; display: flex; gap: 12px; align-items: center; width: 290px; padding: 12px 14px; border-radius: 20px; text-align: left; color: #1d1d1f; background: rgba(250,250,252,.82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 24px 50px -16px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.5) inset; opacity: 0; animation: glisse .7s cubic-bezier(.2,.8,.2,1) forwards, flotte 9s ease-in-out infinite; }
.notif-e { width: 40px; height: 40px; border-radius: 11px; background: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--emoji); font-size: 22px; box-shadow: 0 2px 6px rgba(0,0,0,.08); flex-shrink: 0; }
.notif b { display: block; font-size: .82rem; }
.notif span:not(.notif-e) { display: block; font-size: .78rem; color: #3a3a3c; }
.n1 { left: -4%; top: 6px; animation-delay: .3s, 1s; }
.n2 { left: -3%; bottom: 210px; animation-delay: 4.6s, 5.3s; }
.n3 { right: -3%; bottom: 10px; animation-delay: 6.4s, 7.1s; }
@keyframes glisse { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }

@media (max-width: 1120px) { .n1, .n2 { left: 1%; } .n3 { right: 1%; } }
@media (max-width: 860px) {
  .scene-hero { height: 520px; margin-top: 48px; }
  .mac { width: 100%; top: 70px; transform: none; }
  .ft { height: 300px; }
  .ft-visage { font-size: 140px; }
  .ft-pip { width: 100px; height: 72px; top: 48px; }
  .ft-pip-e { font-size: 44px; }
  .iphone { width: 200px; border-radius: 38px; padding: 8px; top: 170px; right: -4%; }
  .iphone-ecran { min-height: 0; height: 400px; border-radius: 31px; }
  .ft-nom { display: none; }
  .msg { font-size: .68rem; }
  .n1 { left: 0; top: 0; width: 250px; }
  .n2 { display: none; }
  .n3 { right: auto; left: 0; bottom: 0; width: 250px; }
}
@media (max-width: 480px) {
  .scene-hero { height: 560px; }
  .mac { top: 84px; }
  .ft { height: 230px; justify-content: flex-start; padding-left: 14%; }
  .ft-haut { font-size: .62rem; }
  .ft-visage { font-size: 104px; }
  .ft-pip { display: none; }
  .ft-ctrl { left: 36%; }
  .ft-ctrl i { width: 26px; height: 26px; font-size: 12px; }
  .iphone { width: 158px; top: 190px; right: -2%; border-radius: 32px; padding: 7px; }
  .iphone-ecran { min-height: 0; height: 318px; border-radius: 26px; }
  .iphone-haut { height: 28px; } .iphone-ilot { width: 60px; height: 18px; }
  .msg-avatar { width: 30px; height: 30px; font-size: .9rem; }
  .msg { font-size: .6rem; padding: 5px 9px; }
  .n1 { width: 230px; }
  .n3 { width: 210px; bottom: 6px; }
}


/* Blocs */
.bloc { position: relative; padding: clamp(72px, 10vw, 128px) 0; background: var(--fond); }
.intro-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px 64px; margin-bottom: 72px; align-items: start; }
.intro-2 p { color: var(--texte-2); }
.titre-schema { color: var(--texte-2); font-size: 1rem; margin-bottom: 18px; }

/* En mots simples */
.simple { border-radius: var(--rayon); padding: 22px 24px; margin: 24px 0; background: rgba(255,204,0,.12); border: 1px solid rgba(255,204,0,.32); }
.simple-titre { font-weight: 700; color: var(--accent-or); margin-bottom: 6px; }
.simple p:last-child { margin: 0; color: var(--texte) !important; font-size: 1.05rem; line-height: 1.55; }

/* Parcours */
.parcours { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.parcours li { position: relative; padding: 24px 20px 22px; border-radius: var(--rayon); background: var(--surface); box-shadow: var(--ombre); border: 1px solid var(--trait); transition: transform .3s; }
.parcours li:hover { transform: translateY(-4px); }
.p-num { position: absolute; top: 18px; right: 18px; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); color: var(--texte-2); font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.parcours p { color: var(--texte-2); font-size: .95rem; margin-bottom: 12px; }
.p-role { display: inline-block; font-size: .78rem; font-weight: 700; padding: 3px 11px; border-radius: 999px; }
.r-or { background: rgba(255,204,0,.2); color: var(--accent-or); } .r-orange { background: rgba(255,149,0,.16); color: #c76a00; }
.r-rouge { background: rgba(255,59,48,.13); color: var(--accent-rouge); } .r-menthe { background: rgba(52,199,89,.16); color: #1f8a3c; }
.parcours-detail { grid-template-columns: 1fr; gap: 12px; }
.parcours-detail li { display: grid; grid-template-columns: 58px 1fr; column-gap: 18px; padding: 20px 22px; }
.parcours-detail li .tuile { grid-row: span 3; margin: 0; }
.parcours-detail p { font-size: 1rem; }
.parcours-detail .p-role { justify-self: start; }
@media (max-width: 900px) {
  .parcours { grid-template-columns: 1fr; }
  .parcours li { display: grid; grid-template-columns: 58px 1fr; column-gap: 16px; align-items: center; padding: 16px 18px; }
  .parcours li .tuile { grid-row: span 3; margin: 0; }
  .parcours li .p-role { justify-self: start; }
  .p-num { top: 14px; right: 14px; }
}

/* Analogies */
.analogie-scenes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.scene { position: relative; background: var(--surface); border-radius: var(--rayon); padding: 26px 22px; box-shadow: var(--ombre); border: 1px solid var(--trait); }
.scene-num { position: absolute; top: 18px; right: 18px; width: 26px; height: 26px; border-radius: 50%; background: var(--texte); color: var(--fond); font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.scene p { color: var(--texte-2); margin: 0; }
@media (max-width: 900px) { .analogie-scenes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .analogie-scenes { grid-template-columns: 1fr; } }

.hockey { border-radius: 28px; padding: clamp(24px, 4vw, 40px); margin: 16px 0 28px; background: linear-gradient(180deg, #eaf4ff, #f7fbff); border: 1px solid #d6e8ff; }
.hockey-glace { display: grid; grid-template-columns: 1fr 1.4fr 1fr 1fr; gap: 12px; align-items: center; text-align: center; }
.hockey-joueur p { margin: 0; color: #1d1d1f; font-size: .95rem; }
.hockey-trajet { position: relative; height: 4px; border-top: 3px dashed #9cc7ff; }
.rondelle { position: absolute; top: -9px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #1d1d1f; animation: passe 2.6s ease-in-out infinite; }
@keyframes passe { 0% { left: 0; } 60%, 100% { left: calc(100% - 16px); } }
.hockey-texte { margin: 22px 0 0; color: #3a3a3c; text-align: center; }
@media (max-width: 640px) { .hockey-glace { grid-template-columns: 1fr 1fr 1fr; } .hockey-trajet { display: none; } }

.deux-scenes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 16px; margin-bottom: 36px; }
.scene-grande { border-radius: 28px; padding: 32px; background: var(--surface); box-shadow: var(--ombre); border: 1px solid var(--trait); }
.scene-emojis { font-family: var(--emoji); font-size: 54px; letter-spacing: 8px; line-height: 1; margin-bottom: 22px; }
.scene-grande p { color: var(--texte-2); margin: 0; }
.s-apres { background: linear-gradient(160deg, rgba(255,149,0,.12), rgba(10,132,255,.08) 70%), var(--surface); }

/* Secteurs */
.secteurs { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.secteurs li { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre); transition: transform .25s; }
.secteurs li:hover { transform: translateY(-3px); }
.secteurs .tuile { margin: 0; width: 50px; height: 50px; font-size: 26px; border-radius: 14px; }
.secteurs strong { display: block; font-size: .98rem; color: var(--texte); }
.secteurs small { display: block; font-size: .84rem; color: var(--texte-2); line-height: 1.35; }
@media (max-width: 1000px) { .secteurs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .secteurs, .article-corps .secteurs { grid-template-columns: 1fr 1fr; gap: 10px; } .secteurs li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; } .secteurs .tuile { width: 44px; height: 44px; font-size: 23px; } }
.article-corps .secteurs { grid-template-columns: repeat(2, 1fr); }


/* Duo */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.duo-col { border-radius: 28px; padding: 34px; background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre); }
.duo-orange { background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(255,149,0,.16), transparent 70%), var(--surface); }
.duo-rouge { background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(255,59,48,.16), transparent 70%), var(--surface); }
.duo-tag { font-weight: 700; font-size: .92rem; margin-bottom: 4px; }
.duo-col h3 { font-family: var(--serif); font-weight: 700; font-size: 2.2rem; }
.duo-col p, .duo-col li { color: var(--texte-2); }
.duo-col ul { padding-left: 1.1em; margin: 0 0 20px; }
.duo-col a { font-weight: 700; }
.c-orange { color: #ff9f0a; } .c-rouge { color: var(--accent-rouge); } .c-or { color: var(--accent-or); }
.c-menthe { color: #30d158; } .c-bleu { color: var(--lien); } .c-violet { color: #bf5af2; }
.bloc-clair .c-orange, .page-guide .c-orange { color: #c76a00; }
.bloc-clair .c-menthe, .page-guide .c-menthe { color: #1f8a3c; }
.bloc-clair .c-violet, .page-guide .c-violet { color: #8e3cbf; }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }

/* Cartes */
.cartes { list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.cartes li { border-radius: var(--rayon); padding: 26px 24px; background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre); transition: transform .3s; }
.cartes li:hover { transform: translateY(-4px); }
.cartes p { color: var(--texte-2); margin: 0; font-size: .98rem; }
@media (min-width: 900px) {
  .cartes-4col { grid-template-columns: repeat(4, 1fr); }
  .cartes-3col { grid-template-columns: repeat(3, 1fr); }
  .cartes-2col { grid-template-columns: repeat(2, 1fr); }
}

/* Tableau comparatif */
.tableau-defile { overflow-x: auto; border-radius: var(--rayon); background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre); }
.comparatif { width: 100%; border-collapse: collapse; min-width: 580px; }
.comparatif th, .comparatif td { text-align: left; padding: 18px 22px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.comparatif tr:last-child th, .comparatif tr:last-child td { border-bottom: 0; }
.comparatif thead th { font-family: var(--serif); font-weight: 700; font-size: 1.4rem; color: var(--texte-2); }
.comparatif thead th:last-child { color: var(--texte); }
.comparatif tbody th { color: var(--texte); font-weight: 700; width: 30%; white-space: nowrap; }
.comparatif td { color: var(--texte-2); }
.comparatif td:last-child { color: var(--texte); background: rgba(255,149,0,.06); }

/* Exemples */
.exemples { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 16px; }
.exemple { border-radius: 26px; padding: 26px; background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre); }
.exemple-tete { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.exemple-tete .tuile { margin: 0; }
.exemple-type { color: var(--texte-2); font-size: .82rem; margin: 0; }
.exemple-tete h3 { margin: 0; }
.mini-flux { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.mini-flux li { color: var(--texte-2); font-size: .95rem; padding-left: 14px; border-left: 3px solid var(--trait); line-height: 1.45; }
.mini-flux span { display: block; font-weight: 700; font-size: .82rem; margin-bottom: 2px; }

/* Guides */
.guides { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.guides a { display: flex; flex-direction: column; padding: 26px; border-radius: var(--rayon); background: var(--surface); border: 1px solid var(--trait); height: 100%; transition: transform .3s, background .3s; }
.guides a:hover { transform: translateY(-4px); text-decoration: none; background: var(--surface-2); }
.guides strong { font-size: 1.15rem; color: var(--texte); margin-bottom: 4px; }
.guides span:not(.tuile) { color: var(--texte-2); font-size: .95rem; }

/* Pages guide */
.page-guide { background: #f5f5f7; }
.page-guide .fil { background: #000; }
.tete { position: relative; overflow: hidden; background: #000; padding: clamp(40px, 7vw, 88px) 0 clamp(48px, 7vw, 88px); }
.tete::before { content: ""; position: absolute; width: 700px; height: 700px; border-radius: 50%; right: -200px; top: -380px; filter: blur(110px); opacity: .4; background: var(--teinte, var(--marque)); }
.tete-rouge { --teinte: var(--marque); } .tete-orange { --teinte: var(--orange); } .tete-or { --teinte: #ffb800; }
.tete-bleu { --teinte: var(--bleu); } .tete-violet { --teinte: var(--violet); } .tete-menthe { --teinte: var(--menthe); }
.tete-in { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.tete h1 { max-width: 15ch; }
.tete .surtitre { color: #a1a1a6; }
@media (max-width: 700px) { .tete-in { grid-template-columns: 1fr; } .tete-ico { order: -1; } .emo-geant { font-size: 84px; } }

.article { display: grid; grid-template-columns: 250px 1fr; gap: 64px; padding-top: 56px; padding-bottom: 32px; }
.sommaire { position: sticky; top: 84px; align-self: start; font-size: .9rem; background: var(--surface); border-radius: var(--rayon); padding: 20px; box-shadow: var(--ombre); border: 1px solid var(--trait); }
.sommaire p { font-weight: 700; color: var(--texte); margin-bottom: 8px; }
.sommaire ol { list-style: none; padding: 0; margin: 0; }
.sommaire a { display: block; padding: 6px 10px; color: var(--texte-2); border-radius: 10px; }
.sommaire a:hover { color: var(--texte); background: var(--surface-2); text-decoration: none; }
.article-corps { min-width: 0; max-width: 800px; }
.article-corps section { padding-bottom: 52px; margin-bottom: 52px; border-bottom: 1px solid var(--trait); scroll-margin-top: 80px; }
.article-corps section:last-child { border-bottom: 0; }
.article-corps > section > p { color: #3a3a3c; font-size: 1.06rem; }
@media (max-width: 959px) {
  .article { grid-template-columns: 1fr; gap: 12px; padding-top: 28px; }
  .sommaire { position: static; }
  .sommaire ol { display: flex; flex-wrap: wrap; gap: 6px; }
  .sommaire a { background: var(--surface-2); border-radius: 999px; padding: 6px 12px; }
}
.article-seul { padding-top: 48px; padding-bottom: 32px; }

.encadre { border-radius: var(--rayon); padding: 20px 24px; margin: 24px 0; background: rgba(255,59,48,.07); border: 1px solid rgba(255,59,48,.22); }
.encadre strong { display: block; margin-bottom: 4px; color: var(--accent-rouge); }
.encadre p { margin: 0; color: var(--texte); }
.deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; margin: 24px 0; }
.encadre-neutre { border-radius: var(--rayon); padding: 26px; background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre); }
.encadre-neutre p, .encadre-neutre li { color: var(--texte-2); }
.bord-menthe { background: linear-gradient(170deg, rgba(52,199,89,.10), transparent 55%), var(--surface); }
.bord-bleu { background: linear-gradient(170deg, rgba(10,132,255,.10), transparent 55%), var(--surface); }
.bord-rouge { background: linear-gradient(170deg, rgba(255,59,48,.08), transparent 55%), var(--surface); }
.puces { padding-left: 1.2em; color: var(--texte-2); }
.puces li { margin-bottom: .45em; }
.puces li::marker { color: var(--marque); }
.puces-menthe li::marker { color: var(--menthe); }

/* Tags */
.pastilles-liste { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.tag { font-weight: 700; font-size: .95rem; padding: 9px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--trait); color: var(--texte); }

/* Mythes */
.mythes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; margin-top: 20px; }
.mythes > div { border-radius: var(--rayon); padding: 22px; background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre); }
.m-faux { font-weight: 700; margin-bottom: 10px; color: var(--texte-2); text-decoration: line-through; text-decoration-color: var(--rouge); text-decoration-thickness: 2px; }
.m-faux::before { content: "🙅"; font-family: var(--emoji); text-decoration: none; display: inline-block; margin-right: 8px; }
.m-vrai { color: var(--texte); margin: 0; }
.m-vrai::before { content: "✅"; font-family: var(--emoji); margin-right: 8px; }

/* Objections façon Messages */
.objections { display: grid; gap: 18px; margin-top: 22px; }
.objections > div { display: flex; flex-direction: column; gap: 6px; }
.obj-q, .obj-r { max-width: 80%; margin: 0; padding: 10px 15px; border-radius: 20px; line-height: 1.4; }
.obj-q { align-self: flex-start; background: #e9e9eb; color: #000; font-weight: 700; border-bottom-left-radius: 6px; }
.obj-r { align-self: flex-end; background: #0b84fe; color: #fff; border-bottom-right-radius: 6px; }

/* Entonnoir */
.entonnoir-zone { border-radius: 26px; padding: 30px 18px 16px; background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre); margin: 24px 0 10px; }
.entonnoir { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.entonnoir li { width: 100%; display: flex; flex-direction: column; align-items: center; }
.e-barre { width: var(--l); min-width: 190px; padding: 13px 14px; text-align: center; border-radius: 14px; transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.e-or .e-barre { background: #ffcc00; } .e-orange .e-barre { background: #ff9500; }
.e-rouge .e-barre { background: var(--marque); } .e-menthe .e-barre { background: #34c759; }
.e-barre strong { color: #1d1d1f; font-size: .98rem; }
.e-rouge .e-barre strong, .e-menthe .e-barre strong { color: #fff; }
.entonnoir p { color: var(--texte-2); font-size: .85rem; margin: 4px 0 8px; text-align: center; }
html.js .entonnoir-zone:not(.vu) .e-barre { width: 10%; }

/* Journée et étapes */
.journee { list-style: none; padding: 0; margin: 26px 0; position: relative; }
.journee::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 2px; background: var(--trait); }
.journee li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 0 0 26px 36px; position: relative; }
.journee li::before { content: ""; position: absolute; left: 1px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 3px solid var(--orange); }
.journee-bleu li::before { border-color: var(--bleu); }
.journee time { font-weight: 700; color: var(--texte); }
.journee h3 { margin-bottom: 2px; }
.journee p { color: var(--texte-2); margin: 0; }
@media (max-width: 560px) { .journee li { grid-template-columns: 1fr; gap: 2px; } }
.etapes { list-style: none; padding: 0; margin: 26px 0; counter-reset: e; display: grid; gap: 12px; }
.etapes li { counter-increment: e; position: relative; padding: 22px 24px 22px 80px; border-radius: var(--rayon); background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre); }
.etapes li::before { content: counter(e); position: absolute; left: 22px; top: 20px; width: 38px; height: 38px; border-radius: 50%; background: var(--texte); color: var(--fond); font-family: var(--serif); font-size: 1.35rem; display: flex; align-items: center; justify-content: center; }
.etapes h3 { margin-bottom: 4px; }
.etapes p { color: var(--texte-2); margin: 0; }

/* Glossaire */
.lettres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.lettres a { font-size: .86rem; padding: 7px 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--trait); color: var(--texte); }
.lettres a:hover { text-decoration: none; background: var(--texte); color: var(--fond); }
.glossaire { margin: 0; display: grid; gap: 10px; }
.glossaire > div { padding: 20px 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre); scroll-margin-top: 80px; }
.glossaire dt { font-family: var(--serif); font-size: 1.45rem; margin-bottom: 4px; color: var(--texte); }
.glossaire dd { margin: 0; color: var(--texte-2); }

/* FAQ */
details:not(.menu) { border-radius: 18px; padding: 20px 24px; margin-bottom: 10px; background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre); }
details:not(.menu) summary { cursor: pointer; font-weight: 700; list-style: none; position: relative; padding-right: 44px; color: var(--texte); font-size: 1.05rem; }
details:not(.menu) summary::-webkit-details-marker { display: none; }
details:not(.menu) summary::after { content: "+"; position: absolute; right: 0; top: 50%; margin-top: -15px; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); color: var(--texte); font-size: 1.25rem; font-weight: 400; display: flex; align-items: center; justify-content: center; transition: transform .3s; }
details[open]:not(.menu) summary::after { transform: rotate(45deg); }
details:not(.menu) p { color: var(--texte-2); margin: 12px 0 0; }

/* Appels à l'action */
.bloc-cta { background: #000; overflow: hidden; }
.bloc-cta::before { content: ""; position: absolute; left: 50%; top: 100%; width: 900px; height: 500px; transform: translate(-50%, -55%); border-radius: 50%; background: radial-gradient(closest-side, rgba(220,55,36,.35), transparent); filter: blur(30px); }
.bloc-cta .cadre { position: relative; }
.bloc-cta p { color: var(--texte-2); }
.chemins { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; margin-top: 34px; }
.chemin { border-radius: 30px; padding: 34px; display: flex; flex-direction: column; align-items: flex-start; background: #161617; border: 1px solid rgba(255,255,255,.1); }
.chemin-orange { background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(255,149,0,.18), transparent 70%), #161617; }
.chemin-bleu { background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(10,132,255,.2), transparent 70%), #161617; }
.chemin-qui { font-weight: 700; margin-bottom: 6px; }
.chemin-orange .chemin-qui { color: #ff9f0a; } .chemin-bleu .chemin-qui { color: #2997ff; }
.chemin h3 { font-family: var(--serif); font-weight: 700; font-size: 1.9rem; line-height: 1.12; }
.chemin .bouton { margin-top: auto; }
.bouton { display: inline-block; padding: 14px 26px; border-radius: 999px; background: var(--marque); color: #fff; font-weight: 700; font-size: 1rem; text-align: center; transition: transform .2s, background .2s; }
.bouton:hover { color: #fff; background: var(--marque-fonce); transform: scale(1.02); text-decoration: none; }
.bouton-bleu { background: #0071e3; }
.bouton-bleu:hover { background: #0077ed; }
.centre .tuile { margin: 0 auto 16px; }
.centre .bouton { margin-top: 10px; }

/* Apparition au défilement */
html.js [data-anim] { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0ms); }
html.js [data-anim].vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js [data-anim] { opacity: 1; transform: none; }
  html.js .entonnoir-zone:not(.vu) .e-barre { width: var(--l); }
  .msg, .msg-lu { opacity: 1; transform: none; }
}

/* Pages légales */
.texte { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(56px, 9vw, 104px); }
.texte h1 { font-size: clamp(2.2rem, 5.4vw, 3.4rem); }
.texte h2 { font-family: var(--sans); font-weight: 700; font-size: 1.15rem; margin-top: 2em; letter-spacing: 0; }
.texte p, .texte li, .texte dd { color: #3a3a3c; }
.texte ul, .texte ol { padding-left: 1.3em; margin: 0 0 1em; }
.texte li { margin-bottom: .4em; }
.maj { color: var(--texte-2) !important; font-size: .9rem; }
.coord { margin: 28px 0; }
.coord dt { font-weight: 700; color: var(--texte-2); font-size: .88rem; margin-top: 18px; }
.coord dd { margin: 4px 0 0; font-size: 1.1rem; color: var(--texte); }

/* Pied */
.pied { position: relative; background: #000; font-size: .86rem; color: #a1a1a6; border-top: 1px solid rgba(255,255,255,.1); }
.pied-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 32px; padding-top: 56px; padding-bottom: 32px; }
.pied-id img { margin-bottom: 14px; }
.pied-id p { max-width: 30ch; }
.pied-titre { color: #f5f5f7; font-weight: 700; margin-bottom: 10px; }
.pied-col { display: flex; flex-direction: column; gap: 7px; }
.pied-col a { color: #a1a1a6; }
.pied-col a:hover, .pied-col a[aria-current="page"] { color: #f5f5f7; }
.pied-col p { margin: 0 0 8px; }
.pied-bas { border-top: 1px solid rgba(255,255,255,.1); padding-top: 16px; padding-bottom: 26px; color: #86868b; font-size: .8rem; }
.pied a { word-break: break-word; }
@media (max-width: 860px) { .pied-in { grid-template-columns: 1fr 1fr; } .pied-id { grid-column: 1 / -1; } }
@media (max-width: 480px) { .pied-in { grid-template-columns: 1fr; } }

/* Le vrai rôle du vendeur */
.trajet { margin: 8px 0 44px; }
.trajet-barre { display: flex; gap: 6px; border-radius: 22px; overflow: hidden; }
.tr-seg { padding: 22px 16px; font-weight: 700; font-size: 1rem; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--texte); }
.tr-seg .emo { font-size: 30px; margin: 0; }
.tr-avant { flex: 1; background: var(--surface); }
.tr-avant:nth-child(1) { background: linear-gradient(180deg, rgba(255,204,0,.22), rgba(255,204,0,.08)), var(--surface); }
.tr-avant:nth-child(2) { background: linear-gradient(180deg, rgba(255,149,0,.22), rgba(255,149,0,.08)), var(--surface); }
.tr-avant:nth-child(3) { background: linear-gradient(180deg, rgba(175,82,222,.2), rgba(175,82,222,.07)), var(--surface); }
.tr-appel { flex: .85; background: var(--marque); color: #fff; }
.trajet-legende { display: flex; gap: 6px; margin-top: 12px; }
.trajet-legende p { margin: 0; font-size: .9rem; color: var(--texte-2); padding: 0 6px; }
.tl-avant { flex: 3; border-top: 2px solid var(--trait); padding-top: 10px !important; }
.tl-appel { flex: .85; border-top: 2px solid var(--marque); padding-top: 10px !important; }
@media (max-width: 640px) {
  .tr-seg { padding: 14px 6px; font-size: .82rem; }
  .tr-seg .emo { font-size: 24px; }
  .trajet-legende { flex-direction: column; gap: 10px; }
}

.questions { list-style: none; padding: 0; margin: 20px 0 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.questions li { position: relative; padding: 28px 24px; border-radius: 24px; background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre); }
.questions li:last-child { background: radial-gradient(ellipse 90% 70% at 0% 0%, rgba(52,199,89,.16), transparent 70%), var(--surface); }
.q-num { position: absolute; top: 20px; right: 22px; font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--trait); }
.questions h3 { font-family: var(--serif); font-weight: 700; font-size: 1.6rem; }
.questions p { color: var(--texte-2); margin: 0; }
.article-corps .questions { grid-template-columns: 1fr; }
@media (max-width: 860px) { .questions { grid-template-columns: 1fr; } }

.citation { margin: 28px 0 0; padding: clamp(32px, 6vw, 56px); border-radius: 30px; background: radial-gradient(ellipse 70% 90% at 100% 0%, rgba(220,55,36,.45), transparent 60%), #000; position: relative; overflow: hidden; }
.citation::before { content: "\201C"; position: absolute; left: 24px; top: -30px; font-family: var(--serif); font-size: 220px; color: rgba(255,255,255,.08); line-height: 1; }
.citation blockquote { position: relative; margin: 0; font-weight: 600; letter-spacing: -0.02em; font-family: var(--serif); font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1.22; color: #fff; max-width: 30ch; }

.sous-titre-grand { font-size: 1.5rem; margin-top: 64px; }

@media print { html.js [data-anim] { opacity: 1 !important; transform: none !important; } .entete, .menu { display: none; } }


/* ===== Palette de marque (24 oct. 2026) : noir, blanc, gris, rouge. Le bleu reste seulement dans les bulles iMessage. ===== */
:root { --lien: #f5f5f7; --accent-or: #f5f5f7; }
.bloc-clair, .page-guide { --lien: #1d1d1f; --accent-or: #1d1d1f; }
.page-guide .tete, .page-guide .bloc-cta { --lien: #f5f5f7; --accent-or: #f5f5f7; }
a { text-decoration: underline; text-decoration-color: rgba(220,55,36,.55); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-color: var(--marque); }
.nav a, .bouton, .choix-carte, .guides a, .sommaire a, .lettres a, .pied-col a, .logo, .sauter, .fil a { text-decoration: none; }
.rouge, .point { color: var(--marque); }
.hero h1 .rouge { color: var(--marque); }
.hero h1 em .point { color: var(--marque); }
.hero-lueurs .l2, .hero-lueurs .l3 { display: none; }
.surtitre, .hero .surtitre, .tete .surtitre { color: #a1a1a6; }
.bloc-clair .surtitre, .page-guide .surtitre { color: #6e6e73; }
.c-orange, .c-or, .c-menthe, .c-bleu, .c-violet,
.bloc-clair .c-orange, .page-guide .c-orange, .bloc-clair .c-menthe, .page-guide .c-menthe, .bloc-clair .c-violet, .page-guide .c-violet { color: var(--texte-2); }
.c-rouge { color: var(--marque); }
.tuile.t-or, .tuile.t-orange, .tuile.t-rouge, .tuile.t-menthe, .tuile.t-bleu, .tuile.t-violet, .tuile.t-gris,
.bloc:not(.bloc-clair) .tuile, .tete .tuile, .bloc-cta .tuile { background: rgba(255,255,255,.08); box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset; }
.bloc-clair .tuile, .page-guide .article .tuile, .page-guide .bloc-faq .tuile { background: #f2f2f5; box-shadow: 0 0 0 1px rgba(0,0,0,.04) inset; }
.r-or, .r-orange, .r-menthe { background: rgba(142,142,147,.16); color: var(--texte-2); }
.r-rouge { background: rgba(220,55,36,.12); color: var(--marque); }
.simple { background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre); }
.simple-titre { color: var(--texte); }
.s-apres { background: radial-gradient(ellipse 80% 70% at 100% 0%, rgba(220,55,36,.14), transparent 70%), var(--surface); }
.duo-orange { background: var(--surface); }
.duo-rouge { background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(220,55,36,.16), transparent 70%), var(--surface); }
.hockey { background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre); }
.hockey-trajet { border-top-color: #c7c7cc; }
.rondelle { background: var(--marque); }
.comparatif td:last-child { background: rgba(220,55,36,.05); }
.e-or .e-barre { background: #e5e5ea; } .e-orange .e-barre { background: #aeaeb2; }
.e-rouge .e-barre { background: #636366; } .e-menthe .e-barre { background: var(--marque); }
.e-or .e-barre strong, .e-orange .e-barre strong { color: #1d1d1f; }
.e-rouge .e-barre strong, .e-menthe .e-barre strong { color: #fff; }
.journee li::before, .journee-bleu li::before { border-color: var(--marque); }
.questions li:last-child { background: radial-gradient(ellipse 90% 70% at 0% 0%, rgba(220,55,36,.10), transparent 70%), var(--surface); }
.bord-menthe, .bord-bleu { background: var(--surface); }
.bord-rouge { background: radial-gradient(ellipse 90% 70% at 0% 0%, rgba(220,55,36,.08), transparent 70%), var(--surface); }
.chemin-orange { background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(220,55,36,.22), transparent 70%), #161617; }
.chemin-bleu { background: #161617; }
.chemin-orange .chemin-qui, .chemin-bleu .chemin-qui { color: #a1a1a6; }
.bouton-bleu, .bouton-bleu:hover { background: #fff; color: #000; box-shadow: none; }
.bloc-faq { background: var(--fond); }
details:not(.menu)[open] { border-color: #c7c7cc; }
.tr-avant:nth-child(1), .tr-avant:nth-child(2), .tr-avant:nth-child(3) { background: var(--surface); }
.tr-avant:nth-child(2) { background: #f7f7f9; } .tr-avant:nth-child(3) { background: #efeff2; }
.tete-rouge, .tete-orange, .tete-or, .tete-bleu, .tete-violet, .tete-menthe { --teinte: var(--marque); }
.ft-pip { background: linear-gradient(160deg, #8e8e93, #48484a); }
.m-vrai::before { content: "✅"; }
.lien-texte { color: var(--texte); }

/* « à » du titre : seul l'accent en rouge, comme le logo */
.acc { background: linear-gradient(180deg, var(--marque) 0 32%, #f5f5f7 32% 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ===== Corrections de l'audit (24 oct. 2026) ===== */
.intro-2 .grand { color: var(--texte); }
.surligne { text-decoration-skip-ink: none; }
.tr-avant:nth-child(1), .tr-avant:nth-child(2), .tr-avant:nth-child(3) { background: var(--surface); box-shadow: var(--ombre); }
.trajet-barre { border-radius: 0; overflow: visible; }
.tr-seg { border-radius: 18px; }
@media (min-width: 1000px) {
  .guides { grid-template-columns: repeat(4, 1fr); }
  .guides li:first-child { grid-column: span 2; }
}
@media (max-width: 640px) {
  .tableau-defile { overflow: visible; background: transparent; border: 0; box-shadow: none; }
  .comparatif { min-width: 0; }
  .comparatif thead { display: none; }
  .comparatif, .comparatif tbody, .comparatif tr, .comparatif th, .comparatif td { display: block; width: auto; }
  .comparatif tr { background: var(--surface); border: 1px solid var(--trait); border-radius: 18px; padding: 16px 18px; margin-bottom: 10px; }
  .comparatif th, .comparatif td { padding: 4px 0; border: 0; white-space: normal; }
  .comparatif tbody th { margin-bottom: 6px; }
  .comparatif td::before { content: attr(data-l) " : "; font-weight: 700; color: var(--texte); }
  .comparatif td:last-child { background: transparent; }
}

/* ===== Formulaires d'inscription ===== */
.form-zone { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; padding-top: 56px; padding-bottom: 96px; align-items: start; }
.form-cote h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.form-carte { background: var(--surface); border: 1px solid var(--trait); border-radius: 28px; padding: clamp(22px, 4vw, 40px); box-shadow: var(--ombre); }
.formulaire { display: grid; gap: 16px; }
.rangee { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.champ { display: grid; gap: 6px; font-weight: 700; font-size: .92rem; color: var(--texte); }
.champ small { font-weight: 400; color: var(--texte-2); }
.champ input, .champ select, .champ textarea { font: inherit; font-weight: 400; font-size: 1rem; color: var(--texte); background: var(--surface-2); border: 1px solid var(--trait); border-radius: 14px; padding: 13px 14px; width: 100%; transition: border-color .2s, box-shadow .2s; }
.champ textarea { resize: vertical; min-height: 92px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: #1d1d1f; box-shadow: 0 0 0 4px rgba(0,0,0,.06); background: #fff; }
.case { display: flex; gap: 12px; align-items: flex-start; font-size: .94rem; color: var(--texte); line-height: 1.45; cursor: pointer; }
.case input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--marque); flex-shrink: 0; }
.invalide input, .invalide select, .invalide textarea { border-color: var(--marque) !important; }
.case.invalide span { color: var(--marque); }
.pot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-erreur { margin: 0; color: var(--marque); font-weight: 700; font-size: .92rem; }
.bouton-plein { width: 100%; padding: 16px; font-size: 1.05rem; border: 0; cursor: pointer; }
.bouton-plein:disabled { opacity: .6; cursor: wait; }
.form-note { margin: 0; font-size: .82rem; color: var(--texte-2); text-align: center; }
.form-merci { background: var(--surface); border: 1px solid var(--trait); border-radius: 28px; padding: 48px 32px; text-align: center; box-shadow: var(--ombre); }
.emo-merci { font-family: var(--emoji); font-size: 64px; display: block; margin-bottom: 12px; }
.form-merci p { color: var(--texte-2); max-width: 40ch; margin: 0 auto; }
@media (max-width: 900px) { .form-zone { grid-template-columns: 1fr; padding-top: 32px; } .form-cote { order: 2; } }
@media (max-width: 560px) { .rangee { grid-template-columns: 1fr; } }