/* Polices hébergées sur le site (plus rapide, et aucune donnée envoyée à Google). Licence libre OFL. */
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/poppins-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo Black"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/archivo-black-latin-400-normal.woff2") format("woff2"); }

/* Qalbi – feuille de style unique du site. Mobile d'abord, puis version ordinateur (à partir de 900 px). */
:root {
  --bordeaux: #7F0816;
  --bordeaux-fonce: #650215;
  --rose: #F6DCE2;
  --creme: #FFF4EA;
  --sable: #F3E6DC;
  --vif: #D4596F;
  --nuit: #1F0709;
  --encre: #2A1A1C;
  --gris: #5A4A4C;
  --gris-clair: #6B5D5F;
  --bord: #E5D3CB;
  --ok: #2E6B3A;
  --alerte: #A3122A;
  --large: 1120px;
  --marge: 20px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: Poppins, system-ui, sans-serif; background: var(--creme); color: var(--encre); line-height: 1.55; }
body.sombre { background: var(--bordeaux); }
.page { min-height: 100vh; min-height: 100dvh; background: var(--creme); display: flex; flex-direction: column; }
.sombre .page { background: var(--bordeaux); color: var(--creme); }
main { flex: 1; }
a { color: var(--bordeaux); }
.sombre a { color: var(--rose); }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* Largeur du contenu : pleine largeur sur téléphone, centrée sur ordinateur */
.l { width: 100%; max-width: var(--large); margin-inline: auto; padding-inline: var(--marge); }
.l-etroit { max-width: 760px; }

/* ---------- En-tête et menu ---------- */
.entete { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; padding-top: 14px; padding-bottom: 10px; }
.logo { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 800; font-size: 30px; letter-spacing: -1px; text-decoration: none; color: var(--bordeaux); }
.sombre .logo { color: var(--creme); }
.logo svg { width: 18px; height: 18px; fill: var(--vif); }
.retour { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 500; text-decoration: none; }
.menu { order: 3; width: calc(100% + 2 * var(--marge)); margin: 0 calc(-1 * var(--marge)); padding: 4px var(--marge) 2px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(101, 2, 21, .25); color: var(--bordeaux); font-size: 14px; font-weight: 500; text-decoration: none; }
.menu a[aria-current="page"] { background: var(--bordeaux); color: var(--creme); border-color: var(--bordeaux); font-weight: 600; }
.sombre .menu a { border-color: rgba(255, 244, 234, .4); color: var(--creme); }
.sombre .menu a[aria-current="page"] { background: var(--rose); color: var(--bordeaux); border-color: var(--rose); }
.menu a.menu-inscription { background: var(--vif); border-color: var(--vif); color: #fff; font-weight: 600; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: none; font: inherit; font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; background: var(--bordeaux); color: var(--creme); text-align: center; transition: transform .15s ease, background .15s ease; }
.btn:hover { transform: translateY(-1px); }
.sombre .btn { background: var(--creme); color: var(--bordeaux); }
.btn-vif, .sombre .btn-vif { background: var(--vif); color: #fff; }
.btn-contour { background: transparent; color: var(--bordeaux); border: 1.5px solid var(--bordeaux); }
.sombre .btn-clair { background: transparent; color: var(--creme); border: 1.5px solid var(--creme); }
.btn-grand { min-height: 56px; padding: 0 28px; font-size: 16px; }
.btn-large { width: 100%; min-height: 56px; border-radius: 16px; font-size: 16px; }
.btn:disabled { opacity: .6; cursor: wait; transform: none; }
.lien-fleche { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; }
.lien-fleche:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--vif); outline-offset: 2px; }

/* ---------- Titres, textes, blocs ---------- */
h1 { margin: 0; font-size: 36px; line-height: 1.05; font-weight: 800; letter-spacing: -1.5px; color: var(--bordeaux); }
.sombre h1 { color: var(--creme); }
h2 { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.5px; color: var(--bordeaux); }
.sombre h2 { color: var(--creme); }
h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--bordeaux); }
.intro { padding-top: 28px; padding-bottom: 20px; }
.sous-titre { margin: 10px 0 0; font-size: 16px; color: var(--gris); max-width: 60ch; }
.sur-titre { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--vif); }
.sombre .sur-titre { color: var(--rose); }
.section { padding-top: 48px; padding-bottom: 48px; }
.section-tete { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.section-tete p { margin: 0; color: var(--gris); max-width: 60ch; }
.sombre .section-tete p { color: var(--rose); }
.carte { background: #fff; border-radius: 24px; padding: 22px; }
.note { margin: 24px 0 48px; font-size: 14px; color: var(--gris); }
.petit { margin: 0; font-size: 12px; color: var(--gris-clair); text-align: center; }
.punch { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 800; letter-spacing: -.3px; color: var(--bordeaux); }
.punch em { font-style: normal; color: var(--vif); }
.clin { margin: 0; font-size: 14px; font-style: italic; color: var(--gris-clair); }
.sombre .clin { color: var(--rose); }

/* Encart plein (appel à l'action) */
.encart { background: var(--rose); color: var(--bordeaux); border-radius: 28px; padding: 32px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.encart p { margin: 0; }
.encart .punch { font-size: 24px; }
.encart-sombre { background: var(--bordeaux); color: var(--creme); }
.encart-sombre .punch { color: var(--creme); }
.encart-sombre .btn { background: var(--creme); color: var(--bordeaux); }

/* Encarts-liens (S'inscrire, liste d'attente) */
.encart-lien { padding: 16px 18px; border-radius: 18px; background: var(--bordeaux); color: var(--creme) !important; text-decoration: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 20px; }
.encart-lien strong { display: block; font-size: 16px; }
.encart-lien span span { display: block; font-size: 14px; color: var(--rose); }
.encart-lien.clair { background: var(--rose); color: var(--bordeaux) !important; }
.encart-lien.clair span span { color: var(--bordeaux); opacity: .8; }
.encart-lien:hover { filter: brightness(1.08); }

/* ---------- Accueil ---------- */
.hero { min-height: calc(100svh - 150px); display: flex; flex-direction: column; justify-content: center; gap: 28px; padding-top: 32px; padding-bottom: 40px; }
.hero h1 { font-size: clamp(48px, 13vw, 128px); line-height: .95; letter-spacing: -.04em; }
.hero h1 .ligne { display: block; }
.hero h1 .redesigned { display: block; color: var(--rose); letter-spacing: -.03em; white-space: nowrap; min-height: 1em; }
.curseur { display: inline-block; width: .06em; height: .8em; margin-left: .04em; background: var(--vif); vertical-align: -.04em; animation: clignote 1s steps(1) infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.barre-mot { position: relative; color: rgba(255, 244, 234, .55); }
.barre-mot::after { content: ""; position: absolute; left: -2%; right: -2%; top: 52%; height: .08em; background: var(--vif); transform-origin: left; animation: barre .5s ease forwards; }
@keyframes barre { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { margin: 0; font-size: 14px; color: var(--rose); }
.defiler { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--rose) !important; text-decoration: none; }
.defiler span { display: inline-block; animation: rebond 1.8s ease-in-out infinite; }
@keyframes rebond { 50% { transform: translateY(5px); } }

/* Bandeau de slogans qui défile */
.bandeau { overflow: hidden; background: var(--vif); color: #fff; padding: 14px 0; }
.bandeau-piste { display: flex; width: max-content; animation: defile 60s linear infinite; }
.bandeau:hover .bandeau-piste { animation-play-state: paused; }
.bandeau-piste span { flex: none; padding: 0 28px; font-weight: 600; font-size: 16px; white-space: nowrap; }
.bandeau-piste span::after { content: "♥"; margin-left: 56px; opacity: .7; }
@keyframes defile { to { transform: translateX(-50%); } }

/* Sections claires de l'accueil */
.bloc-clair { background: var(--creme); color: var(--encre); }
.bloc-clair h2 { color: var(--bordeaux); }
.bloc-clair .section-tete p { color: var(--gris); }
.bloc-rose { background: var(--rose); color: var(--bordeaux); }
.bloc-rose h2, .bloc-rose .punch { color: var(--bordeaux); }
.sombre .bloc-clair a:not(.btn), .sombre .bloc-rose a:not(.btn) { color: var(--bordeaux); }
.sombre .bloc-clair .btn, .sombre .bloc-rose .btn { background: var(--bordeaux); color: var(--creme); }
.sombre .bloc-clair .btn-vif { background: var(--vif); color: #fff; }

.trois { display: grid; gap: 14px; }
.pas { background: #fff; border-radius: 24px; padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.pas b { font-size: 34px; line-height: 1; font-weight: 800; color: var(--vif); }
.pas h3 { font-size: 19px; }
.pas p { margin: 0; color: var(--gris); font-size: 15px; }
.bloc-rose .pas { background: var(--creme); }

/* ---------- Cartes d'événements ---------- */
.liste { display: grid; gap: 12px; }
.evt { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 22px; background: #fff; color: var(--encre) !important; text-decoration: none; border: 1.5px solid transparent; transition: border-color .15s, transform .15s; }
.evt:hover { border-color: var(--rose); transform: translateY(-2px); }
.evt-haut { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.evt-haut strong { font-size: 17px; line-height: 1.3; color: var(--bordeaux); }
.evt-haut .prix { flex: none; font-size: 19px; font-weight: 800; color: var(--bordeaux); }
.evt-date { font-size: 15px; font-weight: 600; color: var(--encre); }
.evt-info { font-size: 14px; color: var(--gris); }
.evt-bas { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.places { font-size: 13px; font-weight: 600; color: var(--ok); }
.places.peu { color: var(--alerte); }
.evt-cta { flex: none; font-size: 14px; font-weight: 600; color: var(--bordeaux); }
.evt.plein { background: #FBF6F2; }
.evt.plein .evt-haut strong, .evt.plein .prix { color: var(--gris); }
.badge { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--rose); color: var(--bordeaux); }
.badge-vif { background: var(--vif); color: #fff; }
.vide, .erreur { margin: 0; padding: 24px; border-radius: 20px; border: 1.5px dashed var(--bord); font-size: 15px; text-align: center; grid-column: 1 / -1; }

/* Cartes « fantômes » pendant le chargement */
.fantome { pointer-events: none; }
.fantome i { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, #F3E6DC 0%, #FBF3EC 50%, #F3E6DC 100%); background-size: 200% 100%; animation: brille 1.2s ease-in-out infinite; }
.fantome i:nth-child(1) { width: 70%; height: 18px; }
.fantome i:nth-child(2) { width: 45%; }
.fantome i:nth-child(3) { width: 30%; margin-top: 8px; }
@keyframes brille { to { background-position: -200% 0; } }

/* ---------- Page Événements ---------- */
.filtres { display: flex; gap: 8px; padding-bottom: 16px; overflow-x: auto; }
.filtres button { flex: none; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--bord); background: transparent; color: #4A3A3C; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.filtres button[aria-pressed="true"] { background: var(--rose); border-color: var(--rose); color: var(--bordeaux); font-weight: 600; }
.regles { margin: 0 0 24px; padding: 16px 18px; border-radius: 18px; border: 1.5px solid var(--bord); background: #fff; font-size: 14px; color: var(--gris); }
.regles strong { color: var(--bordeaux); }
.regles p { margin: 0; }
.regles p + p { margin-top: 8px; }
.liste-tete { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 16px; }
.liste-tete p { margin: 0; color: var(--gris); }
.encart-attente { grid-column: 1 / -1; }

.recit { display: flex; flex-direction: column; gap: 14px; font-size: 16px; }
.recit p { margin: 0; }
.recit .reverie { font-style: italic; color: var(--gris); }
.cartes-recit { display: grid; gap: 14px; margin-top: 28px; }
.cartes-recit .carte { display: flex; flex-direction: column; gap: 8px; }
.cartes-recit .carte p { margin: 0; color: var(--gris); }
.cartes-recit .carte .punch { font-size: 17px; color: var(--bordeaux); }

/* ---------- Page d'un événement ---------- */
.evt-page-tete { display: flex; flex-direction: column; gap: 12px; }
.infos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.infos li { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: #fff; font-size: 14px; font-weight: 500; }
.infos li b { color: var(--bordeaux); }
.colonnes { display: grid; gap: 20px; padding-bottom: 24px; }
.programme { white-space: pre-line; }
.cest-quoi p { margin: 0 0 10px; color: var(--gris); }
.cest-quoi details { margin-top: 4px; }
.cest-quoi summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; color: var(--bordeaux); }
.cest-quoi .entre-parentheses { font-style: italic; }
.regle-resa { margin: 0; font-size: 12px; color: var(--gris-clair); }

/* ---------- Concept ---------- */
.histoire { display: flex; flex-direction: column; gap: 16px; font-size: 17px; }
.histoire p { margin: 0; }
.histoire .citation { margin: 12px 0; padding-left: 18px; border-left: 4px solid var(--vif); font-size: 26px; line-height: 1.2; font-weight: 800; letter-spacing: -.5px; color: var(--bordeaux); }
.histoire .duo { font-weight: 600; color: var(--bordeaux); }
.histoire .duo span { display: block; font-weight: 400; font-style: italic; color: var(--gris); }
.histoire .fin { font-size: 20px; font-weight: 700; color: var(--bordeaux); }

/* ---------- Formulaires ---------- */
form { display: flex; flex-direction: column; gap: 16px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label, legend { font-size: 13px; font-weight: 600; }
legend { padding: 0; margin-bottom: 10px; font-size: 15px; font-weight: 700; }
fieldset { margin: 0; padding: 0; border: none; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], textarea { width: 100%; min-height: 48px; border-radius: 12px; border: 1.5px solid var(--bord); padding: 0 14px; font: inherit; font-size: 16px; background: #fff; color: var(--encre); }
textarea { padding: 12px 14px; resize: vertical; }
.case { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.case input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--bordeaux); flex: none; }
.choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choix button { min-height: 68px; border-radius: 16px; border: 2px solid var(--bord); background: #fff; color: var(--encre); font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; }
.choix button b { font-size: 16px; }
.choix button span { font-size: 12px; color: var(--gris-clair); }
.choix button[aria-pressed="true"] { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--creme); }
.choix button[aria-pressed="true"] span { color: var(--rose); }
.alerte { margin: 0; padding: 14px; border-radius: 14px; background: var(--rose); color: var(--bordeaux); font-size: 14px; font-weight: 500; }
.alerte strong { display: block; font-size: 16px; }
.message-erreur { margin: 0; color: var(--alerte); font-size: 14px; font-weight: 500; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--alerte); background: #FFF6F7; }
input[type="date"] { display: block; line-height: 44px; text-align: left; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.merci-attente h2 { margin-bottom: 4px; }
.merci-attente p { margin: 0; }

/* ---------- FAQ ---------- */
.faq-groupe { margin-bottom: 28px; }
.faq-groupe h2 { font-size: 20px; margin-bottom: 12px; }
.faq { display: flex; flex-direction: column; gap: 8px; }
.faq details { background: #fff; border-radius: 18px; }
.faq summary { list-style: none; cursor: pointer; min-height: 58px; padding: 14px 18px; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 22px; font-weight: 500; color: var(--bordeaux); }
.faq details[open] summary::after { content: "–"; }
.faq .reponse { padding: 0 18px 18px; font-size: 15px; color: #4A3A3C; display: flex; flex-direction: column; gap: 8px; }
.faq .reponse p { margin: 0; }
.faq .reponse .chute { font-weight: 600; color: var(--bordeaux); }

/* ---------- Contact ---------- */
.raccourcis { display: flex; gap: 12px; padding-top: 24px; padding-bottom: 48px; }
.raccourcis a { width: 56px; height: 56px; border-radius: 18px; background: var(--rose); display: flex; align-items: center; justify-content: center; }
.raccourcis svg { width: 24px; height: 24px; stroke: var(--bordeaux); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Pages de texte (mentions légales, CGV…) */
.texte { padding-bottom: 48px; font-size: 15px; }
.texte h2 { margin-top: 28px; font-size: 18px; }

/* ---------- Pied de page ---------- */
.pied { background: var(--nuit); color: var(--creme); padding-top: 36px; padding-bottom: 36px; }
.pied .l { display: flex; flex-direction: column; gap: 14px; }
.pied-slogan { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 800; color: var(--creme); }
.pied nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; }
.pied a { display: inline-flex; align-items: center; min-height: 40px; color: var(--rose); }
.pied p.legal { margin: 0; font-size: 12px; color: var(--rose); opacity: .85; }

/* ---------- Version ordinateur ---------- */
@media (min-width: 720px) {
  :root { --marge: 32px; }
  .trois, .cartes-recit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evt { padding: 22px 24px; }
}
@media (min-width: 900px) {
  :root { --marge: 40px; }
  .entete { flex-wrap: nowrap; padding-top: 18px; padding-bottom: 18px; }
  .menu { order: 0; width: auto; margin: 0 auto; padding: 0; overflow: visible; gap: 4px; }
  .menu a { border-color: transparent; padding: 0 14px; }
  .sombre .menu a { border-color: transparent; }
  .menu a.menu-inscription { display: none; } /* le bouton S'inscrire est déjà à droite */
  .entete > .btn { background: var(--vif); color: #fff; }
  h1 { font-size: 52px; letter-spacing: -2px; }
  h2 { font-size: 34px; letter-spacing: -1px; }
  .intro { padding-top: 48px; padding-bottom: 32px; }
  .sous-titre { font-size: 18px; }
  .section { padding-top: 80px; padding-bottom: 80px; }
  .section-tete { margin-bottom: 36px; }
  .liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .hero { min-height: calc(100vh - 100px); gap: 36px; }
  .encart { padding: 48px; flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
  .encart .punch { font-size: 32px; max-width: 22ch; }
  .colonnes { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
  .colonnes .colle { position: sticky; top: 20px; }
  .histoire-grille { display: grid; grid-template-columns: 1fr 2fr; gap: 56px; align-items: start; }
  .histoire-grille .section-tete { position: sticky; top: 24px; }
  .faq-grille { display: grid; grid-template-columns: 1fr 2.2fr; gap: 56px; align-items: start; }
  .faq-grille nav { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 4px; }
  .faq-grille nav a { min-height: 40px; display: flex; align-items: center; font-weight: 600; text-decoration: none; }
  .contact-grille { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: start; }
  .pied .l { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 40px; }
  .pied-slogan { font-size: 28px; flex-basis: 100%; }
}
@media (max-width: 899px) { .faq-grille nav { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .bandeau-piste { flex-wrap: wrap; width: auto; justify-content: center; row-gap: 8px; }
  .bandeau-piste span[aria-hidden="true"] { display: none; }
}

/* ---------- Questionnaire (style Typeform) ---------- */
.questionnaire .page { min-height: 100dvh; }
.q-entete { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 8px; }
.q-retour { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 244, 234, .4); background: transparent; color: var(--creme); font: inherit; font-size: 14px; cursor: pointer; }
.q-progression { height: 4px; margin: 0 20px; border-radius: 4px; background: rgba(255, 244, 234, .18); overflow: hidden; }
.q-progression div { height: 100%; width: 0; background: var(--rose); transition: width .35s ease; }
#ecran { flex: 1; display: flex; align-items: center; padding: 24px 24px 56px; outline: none; }
.q-bloc { width: 100%; display: flex; flex-direction: column; gap: 18px; animation: q-entree .35s ease both; }
.q-bloc.q-arriere { animation-name: q-entree-arriere; }
@keyframes q-entree { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes q-entree-arriere { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: none; } }
.q-numero { margin: 0; font-size: 14px; font-weight: 600; color: var(--rose); }
.q-titre { margin: 0; font-size: 26px; line-height: 1.25; letter-spacing: -.5px; color: var(--creme); }
.q-aide { margin: 0; font-size: 16px; line-height: 1.5; color: var(--rose); white-space: pre-line; }
.q-aide.petit { font-size: 13px; }
.q-love { margin: 0; font-size: 22px; font-weight: 800; color: var(--creme); }
.q-choix { display: flex; flex-direction: column; gap: 10px; }
.q-option {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border-radius: 14px;
  border: 1.5px solid rgba(255, 244, 234, .35); background: rgba(255, 244, 234, .06); color: var(--creme);
  font: inherit; font-size: 16px; text-align: left; cursor: pointer; transition: background .15s, border-color .15s;
}
.q-option:hover { background: rgba(255, 244, 234, .12); }
.q-option[aria-checked="true"] { background: var(--creme); border-color: var(--creme); color: var(--bordeaux); font-weight: 600; }
.q-lettre { flex: none; width: 26px; height: 26px; border-radius: 6px; border: 1px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.q-input {
  width: 100%; min-height: 52px; padding: 10px 2px; border: none; border-bottom: 2px solid rgba(255, 244, 234, .5);
  background: transparent; color: var(--creme); font: inherit; font-size: 22px; border-radius: 0; outline: none;
}
.q-input:focus { border-bottom-color: var(--creme); }
.q-input::placeholder { color: rgba(255, 244, 234, .45); }
textarea.q-input { resize: none; line-height: 1.4; }
select.q-input { font-size: 17px; background: var(--bordeaux-fonce); border: 1.5px solid rgba(255, 244, 234, .4); border-radius: 12px; padding: 12px; }
input.q-input[type="date"] { color-scheme: dark; }
.q-echelle { display: grid; grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); gap: 6px; }
.q-note { min-height: 52px; border-radius: 10px; border: 1.5px solid rgba(255, 244, 234, .35); background: rgba(255, 244, 234, .06); color: var(--creme); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.q-note[aria-checked="true"] { background: var(--creme); color: var(--bordeaux); border-color: var(--creme); }
.q-echelle-legende { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 13px; color: var(--rose); }
.q-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.sombre .q-ok, .q-ok { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 12px; border: none; background: var(--creme); color: var(--bordeaux); font: inherit; font-size: 17px; font-weight: 700; text-decoration: none; cursor: pointer; }
.q-ok:disabled { opacity: .6; }
.q-secondaire { min-height: 52px; padding: 0 20px; border-radius: 12px; border: 1.5px solid var(--creme); background: transparent; color: var(--creme); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.q-astuce { font-size: 13px; color: rgba(255, 244, 234, .6); }
@media (hover: none) { .q-astuce { display: none; } }
.q-erreur { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--creme); color: var(--alerte); font-size: 14px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .q-bloc { animation: none; } .q-progression div { transition: none; } }


/* Questionnaire : vraie case à cocher et menu déroulant à cases */
.q-case, .q-multi-option {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 12px 16px; border-radius: 14px;
  border: 1.5px solid rgba(255, 244, 234, .35); background: rgba(255, 244, 234, .06); color: var(--creme);
  font: inherit; font-size: 16px; text-align: left; cursor: pointer;
}
.q-case[aria-checked="true"] { border-color: var(--creme); background: rgba(255, 244, 234, .14); font-weight: 600; }
.q-carre { flex: none; width: 26px; height: 26px; border-radius: 7px; border: 2px solid var(--creme); display: inline-flex; align-items: center; justify-content: center; }
[aria-checked="true"] > .q-carre { background: var(--creme); }
[aria-checked="true"] > .q-carre::after { content: ""; width: 7px; height: 13px; border: solid var(--bordeaux); border-width: 0 3px 3px 0; transform: translateY(-2px) rotate(45deg); }
.q-multi { display: flex; flex-direction: column; gap: 8px; }
.q-multi-bouton { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; cursor: pointer; font-size: 17px; background: var(--bordeaux-fonce); border: 1.5px solid rgba(255, 244, 234, .4); border-radius: 12px; padding: 12px 14px; }
.q-multi-resume.vide { color: rgba(255, 244, 234, .6); }
.q-multi-bouton[aria-expanded="true"] .q-fleche { transform: rotate(180deg); }
.q-multi-panneau { max-height: 46vh; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; border-radius: 12px; background: var(--bordeaux-fonce); }
.q-multi-option { min-height: 46px; padding: 8px 10px; gap: 10px; font-size: 15px; border-color: rgba(255, 244, 234, .2); }
.q-multi-option .q-carre { width: 22px; height: 22px; }
.q-input[aria-invalid="true"] { border-bottom-color: #FF8A9A; }
.questionnaire .page { width: 100%; max-width: 760px; margin: 0 auto; }
@media (min-width: 900px) { .q-titre { font-size: 32px; } #ecran { padding: 40px 40px 80px; } }

/* Grilles du concept */
@media (min-width: 720px) {
  .quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deux-formats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) { .quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Couleurs des blocs clairs posés sur une page sombre (accueil) */
.sombre .bloc-clair .sur-titre, .sombre .bloc-rose .sur-titre { color: var(--vif); }
.sombre .bloc-clair .section-tete p { color: var(--gris); }
.sombre .bloc-rose .section-tete p, .sombre .bloc-rose .clin { color: var(--bordeaux); }
.encart-sombre .btn-vif, .sombre .encart-sombre .btn-vif { background: var(--vif); color: #fff; }
.section-tete .sur-titre, .sombre .bloc-clair .section-tete .sur-titre, .sombre .bloc-rose .section-tete .sur-titre { color: var(--vif); }

/* ---------- Conseils des anciens ---------- */
.punchline-qalbi { margin: 24px 0 0; max-width: 34ch; padding: 18px 20px; border-radius: 20px; background: var(--rose); color: var(--bordeaux); font-size: 20px; line-height: 1.25; font-weight: 800; transform: rotate(-1.2deg); }
.punchline-qalbi span { display: block; margin-top: 4px; font-size: 16px; font-weight: 500; }

.podium { background: var(--bordeaux); color: var(--creme); }
.podium .sur-titre { color: var(--rose); }
.podium .clin { color: var(--rose); margin-top: 20px; }
.podium-liste { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.podium-liste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; opacity: .25; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.podium-liste li.vu { opacity: 1; transform: none; }
.podium-liste .mot { font-size: clamp(40px, 11vw, 112px); line-height: 1; font-weight: 800; letter-spacing: -.04em; text-transform: uppercase; }
.podium-liste li:nth-child(1) .mot { color: var(--creme); }
.podium-liste li:nth-child(2) .mot { color: var(--rose); }
.podium-liste li:nth-child(3) .mot { color: var(--vif); }
.podium-liste .compte { font-size: 15px; color: var(--rose); }
.podium-liste .compte b { font-size: 22px; color: var(--creme); font-variant-numeric: tabular-nums; }

.tirage-zone { padding-top: 56px; }
.tirage { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.tirage-carte { width: 100%; max-width: 560px; min-height: 180px; display: flex; align-items: center; justify-content: center; padding: 28px; border-radius: 28px; background: #fff; border: 2px dashed var(--bord); }
.tirage-carte { cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
.tirage-carte:focus-visible { outline: 3px solid var(--vif); outline-offset: 4px; }
.tirage-carte p { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--bordeaux); }
.tirage-carte[data-theme] { border-style: solid; }
.tirage-carte.tourne { animation: tourne .55s ease; }
@keyframes tourne { 0% { transform: rotateY(90deg) scale(.95); opacity: .2; } 100% { transform: none; opacity: 1; } }

.filtres-conseils { flex-wrap: wrap; overflow: visible; }
.mur { columns: 1; column-gap: 16px; padding-top: 8px; }
.note-mur { break-inside: avoid; margin: 0 0 16px; padding: 18px 18px 20px; border-radius: 6px 18px 18px 18px; background: #fff; font-size: 16px; line-height: 1.45; color: var(--encre); box-shadow: 0 6px 16px rgba(101, 2, 21, .07); transform: rotate(var(--r, 0deg)); transition: transform .2s ease; }
.note-mur:hover { transform: rotate(0) scale(1.02); }
.note-mur.pepite { font-size: 19px; font-weight: 700; }
.note-mur[data-theme="timide"], .tirage-carte[data-theme="timide"] { background: var(--rose); color: var(--bordeaux); border-color: var(--rose); }
.note-mur[data-theme="pression"], .tirage-carte[data-theme="pression"] { background: #fff; border-color: var(--bord); }
.note-mur[data-theme="fonce"], .tirage-carte[data-theme="fonce"] { background: var(--bordeaux); color: var(--creme); border-color: var(--bordeaux); }
.tirage-carte[data-theme="fonce"] p { color: var(--creme); }
.note-mur[data-theme="soi"], .tirage-carte[data-theme="soi"] { background: #FCE9D9; border-color: #FCE9D9; }
.note-mur[data-theme="ambiance"], .tirage-carte[data-theme="ambiance"] { background: #FFF; border-left: 5px solid var(--vif); border-color: var(--vif); }

.temoignages { background: var(--rose); }
.carrousel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.carrousel::-webkit-scrollbar { display: none; }
.temoin { flex: 0 0 88%; scroll-snap-align: start; margin: 0; padding: 28px 24px; border-radius: 28px; background: var(--creme); display: flex; flex-direction: column; gap: 16px; }
.temoin blockquote { margin: 0; font-size: 17px; line-height: 1.55; color: var(--encre); }
.temoin blockquote::before { content: "“"; display: block; height: 40px; font-size: 80px; line-height: 1; font-weight: 800; color: var(--vif); }
.temoin figcaption { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--bordeaux); }
.carrousel-boutons { display: flex; gap: 10px; margin-top: 18px; }
.rond { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--bordeaux); background: transparent; color: var(--bordeaux); font: inherit; font-size: 18px; cursor: pointer; }
.rond:hover { background: var(--bordeaux); color: var(--creme); }

/* Aperçu sur l'accueil */
.apercu-conseils { background: var(--creme); color: var(--encre); padding-bottom: 48px; }
.bandeau-conseils { background: var(--rose); color: var(--bordeaux); }
.bandeau-conseils .bandeau-piste { animation-direction: reverse; animation-duration: 90s; }
.bandeau-conseils .bandeau-piste span { font-size: 18px; }
.bandeau-conseils .bandeau-piste span::after { color: var(--vif); }
.sombre .apercu-conseils a.lien-fleche { color: var(--bordeaux); }

@media (min-width: 640px) { .mur { columns: 2; } .temoin { flex-basis: 70%; } }
@media (min-width: 900px) {
  .mur { columns: 3; column-gap: 20px; }
  .temoin { flex-basis: 46%; padding: 36px; }
  .punchline-qalbi { font-size: 24px; }
  .tirage-carte p { font-size: 26px; }
}
@media (min-width: 1200px) { .mur { columns: 4; } }
.mur { columns: 2; column-gap: 10px; }
.note-mur { margin-bottom: 10px; padding: 14px 13px 15px; font-size: 14px; }
.note-mur.pepite { font-size: 16px; }
.voir-plus { display: flex; margin: 8px auto 0; }
@media (min-width: 640px) { .note-mur { padding: 18px 18px 20px; font-size: 16px; margin-bottom: 16px; } .note-mur.pepite { font-size: 19px; } .mur { column-gap: 16px; } }

/* ---------- Accueil v7 : alternance crème / bordeaux / rose ---------- */
.hero-zone { position: relative; overflow: hidden; background: var(--creme); }
.hero-zone .hero { position: relative; z-index: 1; }
.hero h1 .ligne { color: var(--vif); }
.hero h1 .redesigned { color: var(--bordeaux); }
.hero-zone .hero-note { color: var(--gris); font-weight: 500; }
.hero-punch { margin: 8px 0 0; max-width: 20ch; font-size: clamp(26px, 6vw, 44px); line-height: 1.12; font-weight: 800; letter-spacing: -.02em; color: var(--bordeaux); }
.hero-punch em { font-style: normal; color: var(--vif); }
.hero-zone .defiler { color: var(--bordeaux) !important; }
.coeurs-flottants { position: absolute; inset: 0; pointer-events: none; }
.flotte { position: absolute; bottom: -60px; left: var(--x); width: 34px; height: 34px; opacity: 0; transform: scale(var(--s)); animation: monte var(--t) linear var(--d) infinite; }
.flotte svg { width: 100%; height: 100%; fill: var(--rose); }
.flotte:nth-child(3n) svg { fill: #F3B9C6; }
@keyframes monte { 0% { opacity: 0; translate: 0 0; } 10% { opacity: .9; } 50% { translate: 24px -50vh; } 90% { opacity: .7; } 100% { opacity: 0; translate: -12px -105vh; } }

.bloc-bordeaux { background: var(--bordeaux); color: var(--creme); }
.bloc-bordeaux h2 { color: var(--creme); }
.bloc-bordeaux .sur-titre, .bloc-bordeaux .section-tete .sur-titre { color: var(--rose); }
.bloc-bordeaux .section-tete p { color: var(--rose); }
.bloc-bordeaux .lien-fleche { color: var(--creme); }
.bloc-bordeaux .evt { border-color: transparent; }
.bloc-bordeaux .evt:hover { border-color: var(--vif); }
.bloc-bordeaux .vide { color: var(--creme); border-color: rgba(255, 244, 234, .4); }
.bloc-bordeaux .fantome { background: rgba(255, 244, 234, .1); }
.bloc-bordeaux .fantome i { background: linear-gradient(90deg, rgba(255,244,234,.15) 0%, rgba(255,244,234,.3) 50%, rgba(255,244,234,.15) 100%); background-size: 200% 100%; }

.concept-duo { display: grid; gap: 16px; }
.concept-panneau { background: var(--vif); color: #fff; border-radius: 28px; padding: 32px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.concept-panneau .sur-titre, .concept-panneau .section-tete .sur-titre { color: #fff; opacity: .85; margin: 0; }
.concept-panneau h2 { color: #fff; font-size: clamp(32px, 7vw, 52px); }
.concept-panneau p { margin: 0; font-size: 17px; }
.concept-panneau .btn { background: #fff; color: var(--bordeaux); margin-top: 8px; }
.concept-pas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.concept-pas li { display: flex; gap: 18px; align-items: flex-start; background: var(--creme); border-radius: 24px; padding: 22px; }
.concept-pas b { flex: none; font-size: 44px; line-height: .9; font-weight: 800; color: var(--vif); }
.concept-pas h3 { font-size: 19px; margin-bottom: 4px; }
.concept-pas p { margin: 0; color: var(--gris); font-size: 15px; }

/* Le cœur qui suit la souris */
.terrain-zone { padding-top: 56px; }
.terrain-tete { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; }
.terrain-tete .punch em { font-style: normal; color: var(--vif); }
.terrain-tete .clin { color: var(--bordeaux); opacity: .8; }
.terrain { position: relative; height: 340px; overflow: hidden; cursor: crosshair; touch-action: pan-y; }
.terrain canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.coeur-joueur { position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; will-change: transform; filter: drop-shadow(0 8px 16px rgba(101, 2, 21, .25)); }
.coeur-joueur svg { width: 100%; height: 100%; fill: var(--vif); }
.coeur-joueur.bat svg { animation: bat .45s ease; }
@keyframes bat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.35); } 60% { transform: scale(.9); } }
@media (hover: none) { .terrain { cursor: default; } }

@media (min-width: 900px) {
  .hero-punch { margin-top: 20px; }
  .concept-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; align-items: stretch; }
  .concept-panneau { padding: 48px; justify-content: center; }
  .concept-pas { justify-content: center; }
  .concept-pas li { padding: 26px 28px; }
  .terrain { height: 420px; }
}
@media (prefers-reduced-motion: reduce) { .coeurs-flottants { display: none; } }

/* ---------- v8 : charte Qalbi (logo, Hajj Qalbi, Archivo Black, rose adouci) ---------- */
.logo { position: relative; gap: 0; padding-left: 30px; min-height: 48px; }
.logo-hajj { position: absolute; left: -6px; top: -4px; width: 44px; height: auto; transform: rotate(-6deg); }
.logo-mot { display: block; height: 36px; width: auto; }
.sombre .logo-mot { filter: brightness(0) invert(1); }
.hero h1 { font-family: "Archivo Black", Poppins, sans-serif; font-weight: 400; letter-spacing: -.02em; font-size: clamp(42px, 11vw, 112px); line-height: 1; }
.podium-liste .mot { font-family: "Archivo Black", Poppins, sans-serif; font-weight: 400; letter-spacing: -.02em; font-size: clamp(34px, 9vw, 96px); }
.btn-vif, .sombre .btn-vif, .encart-sombre .btn-vif, .sombre .encart-sombre .btn-vif { background: var(--creme); color: var(--bordeaux); }
.tirage .btn-vif { background: var(--bordeaux); color: var(--creme); }
.menu a.menu-inscription { background: var(--bordeaux); border-color: var(--bordeaux); }
@media (min-width: 900px) { .entete > .btn { background: var(--bordeaux); color: var(--creme); } }

.hero-hajj { position: absolute; right: 12px; top: 8px; width: 112px; height: auto; animation: plane 6s ease-in-out infinite; pointer-events: none; }
@keyframes plane { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
@media (min-width: 900px) { .hero-hajj { width: 360px; right: 40px; top: 50%; margin-top: -200px; } }
@media (min-width: 1200px) { .hero-hajj { width: 420px; right: 60px; margin-top: -230px; } }

.concept-panneau { background: var(--bordeaux); }
.concept-panneau .btn { background: var(--creme); color: var(--bordeaux); }
.concept-pas li { background: #fff; }
.concept-pas b { color: var(--bordeaux); }

.coeur-joueur { width: 120px; height: 118px; margin: -59px 0 0 -60px; filter: drop-shadow(0 10px 18px rgba(101, 2, 21, .22)); }
.coeur-joueur img { width: 100%; height: 100%; display: block; }
.coeur-joueur.bat img { animation: bat .45s ease; }
@media (min-width: 900px) { .coeur-joueur { width: 150px; height: 147px; margin: -74px 0 0 -75px; } }

.merci-hajj, .conseils-hajj { display: block; width: 130px; height: auto; margin-bottom: 8px; }
@media (min-width: 900px) { .conseils-hajj { position: absolute; right: 40px; top: 20px; width: 220px; } .intro { position: relative; } }
.q-hajj { width: 140px; height: auto; }
@media (min-width: 900px) {
  .hero h1 { font-size: clamp(64px, 7.2vw, 100px); }
  .hero-hajj { width: 290px; right: var(--marge); margin-top: -190px; }
}
@media (min-width: 1200px) { .hero-hajj { width: 330px; right: var(--marge); margin-top: -210px; } }

/* v8.1 : passe éditoriale */
.librairie { display: flex; flex-direction: column; gap: 10px; padding-bottom: 28px; }
.librairie p { max-width: 62ch; }
.librairie p { margin: 0; font-size: 17px; }
.librairie .reverie { font-style: italic; color: var(--gris); }
.liens-utiles { display: grid; gap: 12px; }
@media (min-width: 720px) { .liens-utiles { grid-template-columns: 1fr 1fr; } }
.regle-resa.repas { color: var(--encre); font-size: 13px; }
.regles p strong { color: var(--bordeaux); }

/* ---------- v12 : bouton « Réserver » collant ---------- */
.collant { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 24px; border-radius: 999px; background: var(--bordeaux); color: var(--creme) !important; font-weight: 700; font-size: 16px; text-decoration: none; box-shadow: 0 10px 28px rgba(101, 2, 21, .35); transform: translateY(140%); transition: transform .3s ease, opacity .3s ease; }
.collant.visible { transform: none; }
.collant.cache, .collant.cache-pied { transform: translateY(140%); opacity: 0; pointer-events: none; }
.collant::after { content: "→"; margin-left: 10px; }
@media (max-width: 899px) { body { padding-bottom: 84px; } }
@media (min-width: 900px) { .collant { left: auto; right: 28px; bottom: 28px; min-height: 52px; font-size: 15px; } }
.questionnaire .collant { display: none; }

/* Bouton « Réserver » sur les cartes */
.evt-cta.btn { min-height: 38px; padding: 0 18px; font-size: 14px; color: var(--creme) !important; }
.evt.plein .evt-cta.btn { background: var(--gris); }

/* Phrase de confiance (page d'un événement) */
.confiance { display: inline-block; align-self: flex-start; line-height: 1.45; padding: 10px 14px; border-radius: 14px; background: var(--rose); color: var(--bordeaux) !important; font-size: 14px; text-decoration: none; }
.confiance:hover { text-decoration: underline; }

/* Menu déroulant des formulaires (liste d'attente) */
select { width: 100%; min-height: 48px; border-radius: 12px; border: 1.5px solid var(--bord); padding: 0 40px 0 14px; font: inherit; font-size: 16px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%237F0816' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center; color: var(--encre); appearance: none; }

/* ---------- v13 : le haut de l'accueil en affiche ---------- */
.hero-affiche { min-height: calc(100svh - 120px); display: flex; flex-direction: column; justify-content: space-between; }
.affiche { position: relative; z-index: 1; padding: 6vh var(--marge) 0; }
.affiche h1 { margin: 0; font-family: "Archivo Black", Poppins, sans-serif; font-weight: 400; line-height: .9; letter-spacing: -.035em; font-size: calc((100vw - 2 * var(--marge)) / 4.9); }
.affiche h1 .ligne { display: block; color: var(--bordeaux); }
.affiche h1 .redesigned { display: block; color: var(--vif); min-height: 1.8em; }
.affiche .hero-hajj { position: absolute; right: var(--marge); top: -6px; width: 92px; z-index: 2; }
.affiche-bas { position: relative; z-index: 1; padding-top: 32px; padding-bottom: 36px; display: flex; flex-direction: column; gap: 14px; }
.affiche-bas .hero-note { color: var(--gris); font-size: 13px; }
.grande-punch { margin: 0 0 28px; font-size: clamp(28px, 6vw, 52px); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--bordeaux); }
.grande-punch em { font-style: normal; color: var(--vif); }
@media (min-width: 900px) {
  .hero-affiche { min-height: calc(100vh - 100px); }
  .affiche { padding-top: 8vh; }
  .affiche h1 { font-size: min(calc((100vw - 2 * var(--marge)) / 7.6), 210px); }
  .affiche h1 .redesigned { min-height: 1em; }
  .affiche h1 wbr { display: none; }
  .affiche .hero-hajj { width: 230px; top: auto; bottom: -40px; right: calc(var(--marge) + 10px); }
}
.affiche-bas { padding-left: var(--marge); padding-right: var(--marge); max-width: none; }
@media (min-width: 900px) {
  .affiche .hero-hajj { top: 2vh; bottom: auto; width: 240px; right: calc(var(--marge) + 20px); }
}
@media (max-width: 899px) { .affiche .hero-hajj { top: 4px; width: 84px; } }
.affiche .hero-hajj { margin-top: 0; }
@media (max-width: 899px) { .hero-affiche { min-height: calc(100svh - 215px); } }

/* Pages légales */
.texte-legal h2 { margin-top: 32px; font-size: 19px; scroll-margin-top: 20px; }
.texte-legal h3 { margin: 20px 0 6px; font-size: 16px; color: var(--bordeaux); }
.texte-legal p { margin: 0 0 10px; color: #3A2A2C; }
.sommaire-legal { margin: 0 0 8px; padding: 14px 18px; border-radius: 16px; background: #fff; }
.sommaire-legal summary { cursor: pointer; font-weight: 700; color: var(--bordeaux); min-height: 32px; display: flex; align-items: center; }
.sommaire-legal nav { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; font-size: 14px; }
.sommaire-legal nav a { min-height: 32px; display: flex; align-items: center; }
.facultatif { font-weight: 400; color: var(--gris); font-size: .9em; }