@font-face { font-family: 'DM Sans'; font-style: normal; font-display: swap; font-weight: 100 1000; src: url('/assets/fonts/dm-sans-latin-wght-normal.woff2') format('woff2-variations'); 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: 'DM Sans'; font-style: normal; font-display: swap; font-weight: 100 1000; src: url('/assets/fonts/dm-sans-latin-ext-wght-normal.woff2') format('woff2-variations'); 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: 'Sora'; font-style: normal; font-display: swap; font-weight: 100 800; src: url('/assets/fonts/sora-latin-wght-normal.woff2') format('woff2-variations'); 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: 'Sora'; font-style: normal; font-display: swap; font-weight: 100 800; src: url('/assets/fonts/sora-latin-ext-wght-normal.woff2') format('woff2-variations'); 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; }

/* Couleurs : clair par défaut, sombre selon le réglage de l'appareil (mêmes teintes que le logiciel).
   --encre = le texte ; --nuit = les blocs bleu nuit (chiffres, contact, pied) ; --plein = un bouton ou un choix rempli. */
:root {
  color-scheme: light dark;
  --orange: #c2410c; --orange-logo: #ea580c; --orange-pale: #fdebe1; --orange-texte: #9a3412; --orange-clair: #ffffff; --orange-bord: #f6d3bf; --orange-icone: #c2410c;
  --encre: #12264a; --nuit: #12264a; --nuit-texte: #c9d4e8; --plein: #12264a; --plein-texte: #ffffff; --plein-survol: #0b1a35;
  --fond: #fffaf5; --fond-voile: rgba(255, 250, 245, 0.88); --carte: #ffffff; --bord: #f1dfd2; --bord-accent: #f0b896; --contour: #d9c6b8;
  --texte-2: #4a5568; --texte-3: #5b6678; --vert: #15803d; --oui-fond: #dcfce7; --non-fond: #eef1f5; --choix-fond: #f6eee8;
  --coche: url("/assets/img/coche.svg");
  /* Une seule échelle d'arrondis : grands blocs, cartes, petits éléments (boutons, images) ; pastilles en 999px. */
  --r-bloc: 28px; --rayon: 20px; --r-petit: 12px;
  --largeur: 1200px;
  --doux: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --orange-pale: #3a1d10; --orange-texte: #fdba74; --orange-bord: #5a2a14; --orange-icone: #fb923c;
    --encre: #e8eefa; --nuit: #172a52; --nuit-texte: #c9d4e8; --plein: #f4f7fd; --plein-texte: #0b1426; --plein-survol: #ffffff;
    --fond: #0b1426; --fond-voile: rgba(11, 20, 38, 0.86); --carte: #13203a; --bord: #26365a; --bord-accent: #7c3a1a; --contour: #4a6196;
    --texte-2: #a9b8d3; --texte-3: #8b9bb8; --vert: #34d399; --oui-fond: #0f3b2c; --non-fond: #1b2a47; --choix-fond: #0f1a31;
    --coche: url("/assets/img/coche-sombre.svg");
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--fond); color: var(--encre); font-family: 'DM Sans', system-ui, sans-serif; font-size: 17px; line-height: 1.55; }
h1, h2, h3 { font-family: 'Sora', system-ui, sans-serif; line-height: 1.12; letter-spacing: -0.01em; margin: 0; }
p, ul, ol { margin: 0; }
a { color: var(--encre); }
a:hover { color: var(--orange-texte); }
img, video { max-width: 100%; height: auto; display: block; }
.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }
[hidden] { display: none !important; }
.lu-seulement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saut { position: absolute; left: -9999px; }
.saut:focus { left: 16px; top: 16px; background: var(--carte); padding: 8px 12px; border-radius: var(--r-petit); z-index: 50; }
:focus-visible { outline: 3px solid var(--orange-logo); outline-offset: 3px; border-radius: 6px; }

/* En-tête « aller-retour » : collé en haut, caché en descendant, revenu en remontant (assets/js/site.js) */
.entete-barre { position: sticky; top: 0; z-index: 30; background: var(--fond); transition: transform 0.35s var(--doux), background-color 0.3s, box-shadow 0.3s; }
.entete-barre.defilee { background: var(--fond-voile); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); box-shadow: 0 6px 24px rgba(18, 38, 74, 0.08); }
.entete-barre.cachee { transform: translateY(-110%); }
.entete { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding-top: 14px; padding-bottom: 14px; }
.marque { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; }
.marque img { width: 40px; height: 40px; border-radius: var(--r-petit); }
.marque span { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 20px; color: var(--encre); }
.menu { display: flex; flex-wrap: wrap; gap: 4px 24px; flex: 1 1 320px; justify-content: flex-end; font-weight: 500; }
.menu a { position: relative; text-decoration: none; padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; }
.menu a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--doux); }
.menu a:hover::after { transform: scaleX(1); }

/* Boutons */
.bouton { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 14px 24px; border-radius: var(--r-petit); font-weight: 700; text-decoration: none; transform: translate(var(--ax, 0px), var(--ay, 0px)); transition: transform 0.25s var(--doux), box-shadow 0.25s, background-color 0.2s, color 0.2s, border-color 0.2s; }
.bouton svg { width: 20px; height: 20px; flex: 0 0 auto; }
.bouton .fleche { transition: transform 0.25s var(--doux); }
.bouton:hover .fleche { transform: translateX(4px); }
.bouton:hover { transform: translate(var(--ax, 0px), calc(var(--ay, 0px) - 2px)); }
.bouton:active { transform: translate(var(--ax, 0px), var(--ay, 0px)) scale(0.98); }
/* Bleu nuit dans les deux thèmes (il est posé sur l'orange de l'accroche) ; « plein » suit le thème (sur le fond de la page). */
.bouton-nuit { background: #12264a; color: #ffffff; }
.bouton-nuit:hover { background: #0b1a35; color: #ffffff; box-shadow: 0 10px 24px rgba(11, 26, 53, 0.35); }
.bouton-plein { background: var(--plein); color: var(--plein-texte); }
.bouton-plein:hover { background: var(--plein-survol); color: var(--plein-texte); box-shadow: 0 10px 24px rgba(11, 26, 53, 0.25); }
.bouton-blanc { background: #ffffff; color: #9a3412; }
.bouton-blanc:hover { color: #12264a; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }
.bouton-orange { background: var(--orange); color: #ffffff; }
.bouton-orange:hover { background: #a3360a; color: #ffffff; box-shadow: 0 10px 24px rgba(194, 65, 12, 0.35); }
.bouton-contour { background: transparent; color: var(--encre); border: 1.5px solid var(--contour); }
.bouton-contour:hover { border-color: var(--orange); color: var(--orange-texte); }
.boutons { display: flex; flex-wrap: wrap; gap: 12px; }
/* Reflet lumineux qui traverse le bouton de temps en temps */
.bouton-reflet::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }

/* Accroche */
.accroche { padding-top: 16px; }
.accroche-bloc { position: relative; background: var(--orange); color: #ffffff; border-radius: var(--r-bloc); padding: 48px 40px; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; overflow: hidden; }
.accroche-bloc::after { content: ''; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); pointer-events: none; }
.accroche-texte { position: relative; z-index: 1; flex: 1 1 420px; min-width: 0; }
.accroche h1 { font-size: clamp(36px, 6vw, 56px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 20px; }
.accroche-texte p { font-size: 20px; color: var(--orange-clair); max-width: 520px; margin-bottom: 28px; }
.accroche-visuels { position: relative; z-index: 1; flex: 1 1 400px; min-width: 0; display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; justify-content: center; }

/* Ticket dessiné */
/* Un vrai ticket imprimé par le logiciel (données fictives) : l'ombre suit sa découpe. */
.ticket { display: block; width: 320px; max-width: 100%; height: auto; transform: rotate(-4deg); filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.28)); }
.telephone-zone { position: relative; }
/* Le téléphone garde ses coins d'appareil (34 et 26 px), seule exception à l'échelle d'arrondis. */
.telephone { width: 220px; border-radius: 34px; border: 8px solid #12264a; background: #12264a; overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3); }
.telephone img { width: 100%; height: 400px; object-fit: cover; object-position: top; border-radius: 26px; }
/* « + 1 vente » qui arrive près du téléphone (décor) */
.vente-bulle { position: absolute; left: -36px; top: 46px; display: flex; align-items: center; gap: 8px; background: #ffffff; color: #12264a; font-size: 13px; padding: 8px 12px; border-radius: 999px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22); white-space: nowrap; }
.vente-point, .direct-point { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--vert); flex: 0 0 auto; }

/* Sections */
.section { padding-top: 72px; padding-bottom: 72px; }
.section h2 { font-size: clamp(28px, 4vw, 38px); margin-bottom: 12px; }
.chapeau { color: var(--texte-2); max-width: 680px; margin-bottom: 36px; }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; }

/* Comment ça marche : une frise de trois étapes reliées par un trait */
.frise { list-style: none; padding: 0; margin: 0; display: grid; gap: 28px; position: relative; }
.frise li { position: relative; padding-left: 64px; }
.frise li::before { content: ''; position: absolute; left: 21px; top: 44px; bottom: -28px; width: 2px; background: var(--bord); }
.frise li:last-child::before { display: none; }
.frise h3 { font-size: 20px; margin: 0 0 6px; }
.frise p { color: var(--texte-2); }
.etape-numero { position: absolute; left: 0; top: 0; display: inline-flex; width: 44px; height: 44px; border-radius: 50%; background: var(--orange); color: #ffffff; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 18px; align-items: center; justify-content: center; box-shadow: 0 0 0 6px var(--fond); }
@media (min-width: 900px) {
  .frise { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .frise li { padding-left: 0; padding-top: 68px; }
  .frise li::before { left: 52px; right: -40px; top: 21px; bottom: auto; width: auto; height: 2px; }
}

/* Fonctions : une mosaïque de tuiles de tailles et de fonds différents, avec de vraies captures du logiciel */
.mosaique { display: grid; gap: 20px; }
.tuile { position: relative; overflow: hidden; border-radius: var(--rayon); border: 1px solid var(--bord); background: var(--carte); display: flex; flex-direction: column; transition: transform 0.3s var(--doux), box-shadow 0.3s, border-color 0.3s; }
.tuile-texte { padding: 28px 28px 24px; }
.tuile h3 { font-size: 20px; margin: 14px 0 6px; }
.tuile p { color: var(--texte-2); max-width: 46ch; }
.tuile svg { width: 32px; height: 32px; color: var(--orange-icone); transition: transform 0.35s var(--doux); }
.tuile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(18, 38, 74, 0.12); }
.tuile:hover svg { transform: translateY(-2px) rotate(-6deg); }
.tuile-image { display: block; margin-top: auto; border-radius: var(--r-petit) 0 0 0; border-top: 1px solid var(--bord); border-left: 1px solid var(--bord); margin-left: 28px; width: calc(100% - 28px); height: auto; box-shadow: 0 -8px 30px rgba(18, 38, 74, 0.08); }
.tuile-agents { background: var(--orange-pale); border-color: var(--orange-bord); }
.tuile-agents .tuile-image { width: min(78%, 360px); margin: auto 0 0 auto; border-radius: var(--r-petit) 0 0 0; }
.tuile-tickets .tuile-image { margin-left: 28px; background: #ffffff; }
.tuile-abonnements { background: var(--nuit); border-color: var(--nuit); }
.tuile-abonnements h3 { color: #ffffff; }
.tuile-abonnements p { color: var(--nuit-texte); }
.tuile-abonnements svg { color: #fdba74; }
.tuile-reseau { background: var(--orange); border-color: var(--orange); }
.tuile-reseau h3, .tuile-reseau p, .tuile-reseau svg { color: #ffffff; }
@media (max-width: 899px) {
  .tuile-ventes .tuile-image { width: 190%; max-width: none; }
  .tuile-tickets .tuile-image { width: 180%; max-width: none; }
}
@media (min-width: 900px) {
  .mosaique { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "ventes ventes ventes ventes agents agents" "abonnements abonnements tickets tickets tickets tickets" "revenus revenus revenus reseau reseau reseau"; }
  .tuile-ventes { grid-area: ventes; }
  .tuile-agents { grid-area: agents; }
  .tuile-abonnements { grid-area: abonnements; justify-content: flex-end; }
  .tuile-tickets { grid-area: tickets; }
  .tuile-revenus { grid-area: revenus; }
  .tuile-reseau { grid-area: reseau; }
}

.securite { margin-top: 24px; color: var(--texte-2); }

/* Agents et chiffres */
.agents { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.agents-texte { flex: 1 1 440px; min-width: 0; }
.agents-texte p { color: var(--texte-2); margin-bottom: 16px; }
.agents-texte ul { color: var(--texte-2); padding-left: 20px; display: grid; gap: 8px; }
.chiffres { flex: 1 1 440px; min-width: 0; background: var(--nuit); color: #ffffff; border-radius: var(--r-bloc); padding: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
.chiffres strong { display: block; font-family: 'Sora', sans-serif; font-size: 34px; font-variant-numeric: tabular-nums; }
.chiffres-titre { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 20px; }
.temoignage { flex: 1 1 100%; margin: 0; padding: 28px 32px; background: var(--carte); border: 1px solid var(--bord); border-left: 4px solid var(--orange); border-radius: var(--rayon); display: grid; gap: 18px; }
.temoignage blockquote { margin: 0; }
.temoignage blockquote p { font-family: 'Sora', sans-serif; font-weight: 600; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.45; color: var(--encre); max-width: 70ch; }
.temoignage figcaption { display: flex; align-items: center; gap: 14px; color: var(--texte-2); font-size: 15px; line-height: 1.4; }
.temoignage figcaption strong { color: var(--encre); font-size: 16px; }
.temoin-initiales { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--orange); color: #ffffff; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 16px; }

/* Vidéos */
.videos figure { margin: 0; }
.videos-grille { display: grid; gap: 20px; }
@media (min-width: 900px) {
  .videos-grille { grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; align-items: start; }
  .video-principale { grid-row: span 2; }
  .video-principale figcaption { font-size: 18px; }
}
.videos video { border-radius: var(--rayon); background: var(--nuit); aspect-ratio: 16 / 9; width: 100%; transition: box-shadow 0.3s; }
.videos figure:hover video { box-shadow: 0 18px 40px rgba(18, 38, 74, 0.18); }
.videos figcaption { margin-top: 10px; font-weight: 700; }

/* Tarifs */
.bande-tarifs { background: var(--carte); border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); }
.tarifs-tete .chapeau { margin-bottom: 28px; }
.essai { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; background: var(--fond); border: 1.5px dashed var(--bord-accent); border-radius: var(--r-bloc); padding: 24px 28px; }
.essai-icone { flex: 0 0 auto; display: inline-flex; width: 52px; height: 52px; border-radius: 50%; background: var(--orange-pale); color: var(--orange-texte); align-items: center; justify-content: center; }
.essai-icone svg { width: 26px; height: 26px; }
.essai-texte { flex: 1 1 360px; min-width: 0; }
.essai-texte h3 { font-size: 20px; margin-bottom: 4px; }
.essai-texte p { color: var(--texte-2); }
.essai-texte strong { color: var(--encre); }
.tarifs-periode { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 40px 0 28px; }
.periode { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--choix-fond); border: 1px solid var(--bord); }
.periode-choix { font: inherit; font-weight: 700; color: var(--encre); background: transparent; border: 0; border-radius: 999px; padding: 10px 18px; min-height: 44px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background-color 0.25s, color 0.25s, box-shadow 0.25s; }
.periode-choix[aria-pressed='true'] { background: var(--plein); color: var(--plein-texte); box-shadow: 0 6px 16px rgba(18, 38, 74, 0.2); }
.periode-cadeau { font-size: 12px; font-weight: 700; background: var(--orange-pale); color: var(--orange-texte); border-radius: 999px; padding: 2px 8px; }
.periode-note { color: var(--texte-2); }
.tarifs { display: grid; gap: 24px; align-items: stretch; }
@media (min-width: 760px) { .tarifs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tarif { position: relative; border: 1px solid var(--bord); border-radius: var(--r-bloc); padding: 32px 28px; display: flex; flex-direction: column; gap: 12px; background: var(--fond); transition: transform 0.3s var(--doux), box-shadow 0.3s, border-color 0.3s; }
.tarif:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(18, 38, 74, 0.10); }
.tarif h3 { font-size: 22px; }
.tarif-pour { color: var(--texte-2); margin-top: -6px; }
.tarif-prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.tarif-prix strong { font-family: 'Sora', sans-serif; font-size: 42px; font-variant-numeric: tabular-nums; }
.tarif-prix span { color: var(--texte-2); }
.tarif-economie { font-size: 14px; font-weight: 700; color: var(--vert); }
.tarif-cle { list-style: none; padding: 14px 0; margin: 4px 0 0; border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); display: grid; gap: 4px; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 18px; }
.tarif-pro .tarif-cle { border-color: rgba(255, 255, 255, 0.35); }
.tarif-liste { list-style: none; padding: 0; margin: 8px 0 auto; display: grid; gap: 10px; }
.tarif-liste li { display: flex; gap: 10px; align-items: flex-start; }
.tarif-liste li::before { content: ''; flex: 0 0 20px; height: 20px; margin-top: 2px; border-radius: 50%; background-color: var(--oui-fond); background-repeat: no-repeat; background-position: center; background-size: 12px; background-image: var(--coche); }
.tarif-liste li.non { color: var(--texte-3); }
.tarif-liste li.non::before { background-color: var(--non-fond); background-image: url("/assets/img/tiret.svg"); }
.tarif .bouton { margin-top: 16px; }
.tarif-pro { background: var(--orange); color: #ffffff; border-color: var(--orange); box-shadow: 0 24px 50px rgba(194, 65, 12, 0.30); }
.tarif-pro:hover { box-shadow: 0 28px 56px rgba(194, 65, 12, 0.38); }
.tarif-pro .tarif-pour, .tarif-pro .tarif-prix span, .tarif-pro .tarif-liste li { color: #ffffff; }
.tarif-pro .tarif-economie { color: #ffffff; }
.tarif-pro .tarif-liste li::before { background-color: rgba(255, 255, 255, 0.2); background-image: url("/assets/img/coche-blanche.svg"); }
.tarif-badge { position: absolute; top: -14px; left: 28px; background: var(--plein); color: var(--plein-texte); font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
@media (min-width: 960px) { .tarif-pro { transform: scale(1.03); } .tarif-pro:hover { transform: scale(1.03) translateY(-4px); } }

/* Questions */
.questions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 32px 56px; align-items: start; }
.questions-cote .chapeau { margin-bottom: 24px; }
.questions-aide { background: var(--nuit); color: #ffffff; border-radius: var(--r-bloc); padding: 28px; display: grid; gap: 10px; justify-items: start; }
.questions-aide p { color: var(--nuit-texte); }
.questions-aide .questions-aide-titre { color: #ffffff; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 20px; }
.questions-aide .bouton { margin-top: 8px; }
.questions-liste { display: grid; gap: 12px; }
.questions-liste details { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); transition: border-color 0.3s, box-shadow 0.3s; }
.questions-liste details[open] { border-color: var(--bord-accent); box-shadow: 0 12px 30px rgba(194, 65, 12, 0.08); }
.questions-liste summary { list-style: none; cursor: pointer; font-weight: 700; padding: 18px 20px; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.questions-liste summary::-webkit-details-marker { display: none; }
.questions-liste details p { color: var(--texte-2); padding: 0 20px 18px; }
.plus { position: relative; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--orange-pale); transition: background-color 0.3s, transform 0.35s var(--doux); }
.plus::before, .plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--orange-texte); transform: translate(-50%, -50%); transition: background-color 0.3s; }
.plus::after { transform: translate(-50%, -50%) rotate(90deg); }
details[open] .plus { background: var(--orange); transform: rotate(45deg); }
details[open] .plus::before, details[open] .plus::after { background: #ffffff; }

/* Contact et pied de page */
.contact-bloc { background: var(--nuit); color: #ffffff; border-radius: var(--r-bloc); padding: 56px 32px; text-align: center; display: grid; gap: 16px; justify-items: center; }
.contact-bloc p { color: var(--nuit-texte); max-width: 560px; }
.contact-bloc .bouton { margin-top: 8px; }
.pied { background: var(--nuit); color: var(--nuit-texte); font-size: 14px; }
.pied .conteneur { display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between; padding-top: 28px; padding-bottom: 28px; }
.pied a { color: #ffffff; }

/* Pages simples (mentions légales, 404) */
.page-simple { max-width: 760px; margin: 0 auto; padding: 48px 24px 72px; }
.page-simple h1 { font-size: 36px; margin-bottom: 24px; }
.page-simple h2 { font-size: 22px; margin: 28px 0 8px; }
.page-simple p { color: var(--texte-2); }

@media (max-width: 560px) {
  :root { --r-bloc: 24px; }
  .accroche-bloc { padding: 32px 20px; }
  .entete { gap: 4px 16px; }
  .marque { flex: 1 1 auto; }
  .entete > .bouton { order: 2; min-height: 44px; padding: 10px 16px; }
  .menu { order: 3; flex: 1 1 100%; justify-content: space-between; gap: 0 12px; font-size: 15px; }
  .chiffres { grid-template-columns: minmax(0, 1fr); }
  .temoignage { padding: 22px 20px; }
  .temoignage blockquote p { font-size: 17px; }
  .ticket { width: 290px; }
  .vente-bulle { left: 50%; top: -18px; transform: translateX(-50%); }
  .contact-bloc { padding: 40px 20px; }
  .essai { padding: 22px 20px; }
}

/* Mouvement : seulement si l'appareil ne demande pas de réduire les animations */
@media (prefers-reduced-motion: no-preference) {
  html.anim .apparait { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--doux), transform 0.7s var(--doux); }
  html.anim .apparait.visible { opacity: 1; transform: none; }
  html.anim :is(.grille, .mosaique, .frise, .videos-grille) > .apparait:nth-child(2) { transition-delay: 0.08s; }
  html.anim :is(.grille, .mosaique, .frise, .videos-grille) > .apparait:nth-child(3) { transition-delay: 0.16s; }
  html.anim :is(.grille, .mosaique, .frise, .videos-grille) > .apparait:nth-child(4) { transition-delay: 0.24s; }
  html.anim :is(.grille, .mosaique, .frise, .videos-grille) > .apparait:nth-child(5) { transition-delay: 0.32s; }
  html.anim :is(.grille, .mosaique, .frise, .videos-grille) > .apparait:nth-child(6) { transition-delay: 0.40s; }
  html.anim .questions-liste > .apparait:nth-child(n+2) { transition-delay: 0.06s; }
  .tuile.visible:hover, .tarif.visible:hover { transition-delay: 0s; }

  .entree { animation: entree 0.8s var(--doux) both; }
  .entree-2 { animation-delay: 0.1s; }
  .entree-3 { animation-delay: 0.2s; }
  @keyframes entree { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

  .flotte { animation: flotte-ticket 6s ease-in-out infinite; }
  .flotte-2 { animation-name: flotte; animation-duration: 7s; animation-delay: -2s; }
  @keyframes flotte-ticket { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-8px); } }
  @keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

  .vente-bulle { animation: vente 6s var(--doux) infinite; animation-delay: 1.2s; opacity: 0; }
  @keyframes vente { 0% { opacity: 0; transform: translateY(10px) scale(0.96); } 8%, 70% { opacity: 1; transform: none; } 82%, 100% { opacity: 0; transform: translateY(-6px); } }
  .vente-point { animation: pouls 2s ease-out infinite; }
  @keyframes pouls { 0% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(21, 128, 61, 0); } }

  .bouton-reflet::before { animation: reflet 5s ease-in-out infinite; animation-delay: 1.5s; }
  @keyframes reflet { 0%, 70% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

  .questions-liste details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.35s var(--doux), content-visibility 0.35s allow-discrete; }
  .questions-liste details[open]::details-content { block-size: auto; }
  .questions-liste { interpolate-size: allow-keywords; }

  .tarif-prix strong.change { animation: prix 0.4s var(--doux); }
  @keyframes prix { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 560px) and (prefers-reduced-motion: no-preference) {
  .vente-bulle { animation-name: vente-mobile; }
  @keyframes vente-mobile { 0% { opacity: 0; transform: translate(-50%, 10px); } 8%, 70% { opacity: 1; transform: translate(-50%, 0); } 82%, 100% { opacity: 0; transform: translate(-50%, -6px); } }
}

@media print {
  .entete-barre { position: static; }
  html.anim .apparait { opacity: 1; transform: none; }
  .vente-bulle { display: none; }
}