button, [role="button"], select, summary, input:not([type="checkbox"], [type="radio"]) { min-height: 2rem; }

      :root {
        --bg: #fdf6f1;
        --bg-soft: #f9ecec;
        --surface: #ffffff;
        --ink: #33182b;
        --ink-soft: #6d5462;
        --line: #ecd9dc;
        --rose: #c22e5f;
        --rose-deep: #9c1f49;
        --rose-soft: #fbe3ec;
        --gold: #b8860b;
        --gold-bright: #d9a441;
        --gold-soft: #faf0da;
        --plum: #2b0f22;
        --shadow: 0 18px 40px rgba(51, 24, 43, .14);
        --radius: 18px;
      }
      @media (prefers-color-scheme: dark) {
        :root {
          --bg: #22101d;
          --bg-soft: #2b1225;
          --surface: #341a2e;
          --ink: #fbeef3;
          --ink-soft: #d9b3c4;
          --line: #53304a;
          --rose: #f0729b;
          --rose-deep: #f0729b;
          --rose-soft: #452038;
          --gold: #e3b356;
          --gold-bright: #eec979;
          --gold-soft: #3d2c17;
          --shadow: 0 18px 40px rgba(0, 0, 0, .45);
        }
      }

      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--ink);
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        font-size: 1.0625rem;
        line-height: 1.6;
      }
      h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; line-height: 1.15; margin: 0; }
      p { margin: 0; }
      .wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

      /* ---------- Hero ---------- */
      .hero {
        background:
          radial-gradient(60rem 30rem at 85% -10%, rgba(217, 164, 65, .20), transparent 60%),
          radial-gradient(50rem 26rem at -10% 0%, rgba(194, 46, 95, .16), transparent 55%),
          var(--plum);
        color: #fbeef3;
        padding: 56px 0 64px;
      }
      @media (prefers-color-scheme: light) {
        .hero { background:
          radial-gradient(60rem 30rem at 85% -10%, rgba(217, 164, 65, .28), transparent 60%),
          radial-gradient(50rem 26rem at -10% 0%, rgba(194, 46, 95, .22), transparent 55%),
          #33102a; }
      }
      .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; }
      .brand { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
      .brand-heart { width: 52px; height: 52px; flex: none; }
      .brand-name { font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; font-weight: 700; line-height: 1.1; }
      .brand-sub { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: #eec979; font-weight: 700; }
      .brand-fb {
        margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center;
        width: 46px; height: 46px; min-height: 46px; border-radius: 50%;
        background: #1877f2; border: 1.5px solid rgba(255, 255, 255, .35);
        box-shadow: 0 6px 18px rgba(0, 0, 0, .25); text-decoration: none;
      }
      .brand-fb:hover { background: #0f66d6; border-color: #eec979; }
      .brand-fb:focus-visible { outline: 3px solid #eec979; outline-offset: 3px; }
      .brand-fb svg { width: 26px; height: 26px; display: block; }
      .hero h1 { font-size: clamp(2.3rem, 5.4vw, 3.6rem); font-weight: 800; }
      .hero h1 em { font-style: italic; color: #eec979; }
      .hero .lead { margin-top: 18px; font-size: 1.16rem; color: #f3d7e2; max-width: 34rem; }
      .hero-points { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
      .hero-points li { display: flex; gap: 10px; align-items: baseline; font-weight: 600; }
      .hero-points .dot { color: var(--gold-bright); font-size: 1.05rem; }
      .hero-cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
      .btn {
        display: inline-flex; align-items: center; justify-content: center;
        min-height: 48px; padding: 12px 26px; border-radius: 999px;
        font-weight: 800; font-size: 1rem; text-decoration: none; cursor: pointer; border: 0;
      }
      .btn-rose { background: #e7548a; color: #fff; }
      .btn-rose:hover { background: #d63f78; }
      .btn-signup {
        background: linear-gradient(135deg, #e7548a, #c22e5f);
        color: #fff; border: 2px solid var(--gold-bright);
        box-shadow: 0 12px 28px rgba(194, 46, 95, .45);
        font-size: 1.2rem; padding: 16px 42px; min-height: 58px;
      }
      .btn-signup:hover { background: linear-gradient(135deg, #d63f78, #a81e4c); border-color: #f3d78a; }
      .btn-signup:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 3px; }
      .btn-ghost { background: transparent; color: #fbeef3; border: 1.5px solid rgba(251, 238, 243, .45); }
      .btn-ghost:hover { border-color: #eec979; color: #eec979; }
      .hero-note { margin-top: 16px; font-size: .92rem; color: #d9a9bf; }

      .video-frame {
        border-radius: 22px; overflow: hidden; box-shadow: var(--shadow);
        border: 1px solid rgba(238, 201, 121, .45); background: #170a14;
        max-width: 340px; margin: 0 auto; width: 100%;
      }
      .video-frame iframe { display: block; width: 100%; aspect-ratio: 9 / 16; border: 0; }
      .video-cap { margin-top: 12px; text-align: center; font-size: .9rem; color: #d9a9bf; }

      /* Chanson thème */
      .song {
        margin: 26px auto 0; max-width: 340px; width: 100%;
        background: rgba(255, 255, 255, .07);
        border: 1px solid rgba(238, 201, 121, .45);
        border-radius: 18px; padding: 20px; text-align: center;
      }
      .song h2 { font-size: 1.35rem; font-weight: 700; color: #fbeef3; }
      .song .by { margin-top: 6px; color: #d9a9bf; font-size: .95rem; font-weight: 700; }
      .song .song-video { margin-top: 16px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(238, 201, 121, .45); background: #170a14; }
      .song .song-video iframe { display: block; width: 100%; aspect-ratio: 9 / 16; border: 0; }

      /* ---------- Compteur ---------- */
      .counter { background: var(--plum); color: #fbeef3; padding: 44px 0; }
      .counter-title {
        text-align: center; font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(1.5rem, 4.4vw, 2.1rem); font-weight: 800; line-height: 1.2;
        color: #eec979; margin-bottom: 10px;
      }
      .counter-sub {
        text-align: center; font-size: 1.08rem; font-weight: 700;
        color: #f3d7e2; margin-bottom: 28px;
      }
      @media (prefers-color-scheme: light) { .counter { background: #33102a; } }
      .counter-row { display: flex; justify-content: center; align-items: stretch; gap: 0; max-width: 640px; margin: 0 auto; }
      .counter-item { flex: 1; text-align: center; padding: 6px 16px; }
      .counter-item + .counter-item { border-left: 1.5px solid rgba(238, 201, 121, .4); }
      .counter-num { font-family: Georgia, "Times New Roman", serif; font-size: clamp(3rem, 8vw, 4.2rem); font-weight: 800; line-height: 1; color: #eec979; }
      .counter-item.rose .counter-num { color: #f0729b; }
      .counter-lbl { margin-top: 10px; font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; }
      .counter-note { margin-top: 22px; text-align: center; color: #d9a9bf; font-size: .98rem; }
      .counter-note strong { color: #fbeef3; }

      /* ---------- Règlements ---------- */
      .rules-intro { max-width: 44rem; }
      .rules { display: grid; gap: 14px; }
      .rule {
        background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--radius); overflow: hidden;
      }
      .rule summary {
        display: flex; align-items: center; gap: 14px;
        padding: 18px 22px; cursor: pointer; list-style: none;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 1.18rem; font-weight: 700; color: var(--ink);
        min-height: 2rem;
      }
      .rule summary::-webkit-details-marker { display: none; }
      .rule summary::after {
        content: "+"; margin-left: auto; flex: none;
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 800;
        font-size: 1.5rem; line-height: 1; color: var(--rose);
      }
      .rule[open ] summary::after { content: "−"; }
      .rule summary:hover { color: var(--rose-deep); }
      .rule-num {
        display: inline-flex; align-items: center; justify-content: center;
        width: 34px; height: 34px; border-radius: 50%; flex: none;
        background: var(--gold-soft); color: var(--gold);
        font-family: Georgia, "Times New Roman", serif; font-weight: 800; font-size: 1.05rem;
        border: 1px solid var(--gold-bright);
      }
      .rule-body { padding: 0 22px 20px 70px; color: var(--ink-soft); }
      .rule-body p + p { margin-top: 10px; }
      .rule-body strong { color: var(--ink); }
      .rule-body blockquote {
        margin: 4px 0 0; padding: 16px 18px;
        background: var(--rose-soft); border-radius: 12px;
        color: var(--ink); font-size: 1rem;
      }
      .rules-date { margin-top: 20px; color: var(--ink-soft); font-size: .95rem; }
      @media (max-width: 820px) {
        .rule-body { padding-left: 22px; }
      }

      /* ---------- Sections ---------- */
      section { padding: 64px 0; }
      section.alt { background: var(--bg-soft); }
      .sec-head { max-width: 40rem; margin-bottom: 36px; }
      .sec-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 800; }
      .sec-head p { margin-top: 12px; color: var(--ink-soft); font-size: 1.08rem; }

      /* Steps */
      .steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
      .step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
      .step-num {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border-radius: 50%;
        background: var(--rose-soft); color: var(--rose-deep);
        font-family: Georgia, "Times New Roman", serif; font-weight: 800; font-size: 1.2rem;
        margin-bottom: 14px;
      }
      .step h3 { font-size: 1.25rem; margin-bottom: 8px; }
      .step p { color: var(--ink-soft); }
      .step strong { color: var(--ink); }

      /* Criteria */
      .criteria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
      .crit { border-radius: var(--radius); padding: 26px 24px; border: 1px solid var(--line); background: var(--surface); }
      .crit .big { font-family: Georgia, "Times New Roman", serif; font-size: 2.6rem; font-weight: 800; line-height: 1; }
      .crit.rose .big { color: var(--rose); }
      .crit.gold { background: var(--gold-soft); }
      .crit.gold .big { color: var(--gold); }
      .crit h3 { font-size: 1.15rem; margin: 10px 0 14px; }
      .crit ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-weight: 700; font-size: 1.05rem; }
      .crit p { margin-top: 14px; color: var(--ink-soft); font-size: .97rem; }

      /* The card / match */
      .match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
      .halves { display: flex; justify-content: center; align-items: stretch; gap: 0; }
      .half {
        width: 128px; height: 176px; background: var(--surface); border: 1.5px solid var(--gold-bright);
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
        padding: 12px; text-align: center;
      }
      .half.left { border-radius: 16px 4px 4px 16px; border-right: .75px dashed var(--gold-bright); }
      .half.right { border-radius: 4px 16px 16px 4px; border-left: .75px dashed var(--gold-bright); }
      .half .pct { font-family: Georgia, "Times New Roman", serif; font-size: 1.7rem; font-weight: 800; color: var(--rose); }
      .half .lbl { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
      .half svg { width: 44px; height: 40px; }
      .match-copy h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 800; }
      .match-copy p { margin-top: 14px; color: var(--ink-soft); font-size: 1.06rem; }
      .match-copy p strong { color: var(--ink); }

      /* After the match */
      .after { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
      .after .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
      .after h3 { font-size: 1.2rem; margin-bottom: 8px; }
      .after p { color: var(--ink-soft); }

      /* Privacy */
      .privacy { background: var(--plum); color: #fbeef3; border-radius: 26px; padding: 40px; }
      @media (prefers-color-scheme: light) { .privacy { background: #33102a; } }
      .privacy h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 800; }
      .privacy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 26px; }
      .privacy h3 { font-size: 1.1rem; color: #eec979; margin-bottom: 6px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 800; }
      .privacy p { color: #f3d7e2; font-size: .99rem; }

      /* Launch */
      .launch { text-align: center; max-width: 42rem; margin: 0 auto; }
      .launch h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; }
      .launch p { margin-top: 14px; color: var(--ink-soft); font-size: 1.08rem; }
      .launch .badge {
        display: inline-block; margin-top: 24px; padding: 12px 24px; border-radius: 999px;
        background: var(--rose-soft); color: var(--rose-deep); font-weight: 800;
      }
      footer { padding: 34px 0 44px; text-align: center; color: var(--ink-soft); font-size: .92rem; border-top: 1px solid var(--line); }
      footer .fname { font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; color: var(--ink); font-weight: 700; }

      @media (max-width: 820px) {
        .hero-grid, .match-grid { grid-template-columns: 1fr; }
        .hero { padding: 40px 0 52px; }
        .criteria, .after, .privacy-grid { grid-template-columns: 1fr; }
        .steps { grid-template-columns: 1fr; }
        section { padding: 48px 0; }
        .privacy { padding: 30px 24px; }
        .video-frame { max-width: 300px; }
      }
      @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
      }

/* ================= Page d'inscription ================= */

body.page-inscription {
        --prune: #57143c;
        --prune-deep: #3d0c2a;
        --prune-soft: #f7e9f1;
        --rose: #e8447c;
        --rose-fonce: #c92a63;
        --rose-pale: #fbd9e6;
        --or: #c9973f;
        --or-clair: #e8c87e;
        --bg: #fdf6f9;
        --texte: #3a1230;
        --texte-doux: #6d4660;
      }
      @media (prefers-color-scheme: dark) {
        body.page-inscription {
          --bg: #2b081d;
          --texte: #fdf0f6;
          --texte-doux: #e3b8cd;
          --prune-soft: #571a3e;
        }
      }
      * { box-sizing: border-box; }
      body.page-inscription {
        margin: 0;
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        background: var(--bg);
        color: var(--texte);
        line-height: 1.55;
        font-size: 1.05rem;
        min-height: 100svh;
        display: flex;
        flex-direction: column;
      }
      body.page-inscription .wrap {
        max-width: 620px;
        width: 100%;
        margin: 0 auto;
        padding: 0 20px 48px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      /* ---------- Logo / en-tête ---------- */
      .entete {
        text-align: center;
        padding: 40px 16px 0;
      }
      .logo-lien {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: var(--texte);
        padding: 12px 20px;
        border-radius: 20px;
        min-height: 48px;
      }
      .logo-lien:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }
      .logo-coeur {
        width: 92px; height: 92px;
        filter: drop-shadow(0 6px 14px rgba(201, 42, 99, 0.35));
      }
      .logo-nom {
        font-family: Georgia, "Times New Roman", serif;
        font-weight: 700;
        font-size: 2.1rem;
        line-height: 1.1;
        color: var(--prune);
      }
      @media (prefers-color-scheme: dark) { .logo-nom { color: var(--rose-pale); } }
      .logo-sous {
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        color: var(--texte-doux);
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .logo-sous svg { width: 15px; height: 15px; flex: none; }

      /* ---------- Slogan ---------- */
      .slogan {
        font-family: Georgia, "Times New Roman", serif;
        font-style: italic;
        font-weight: 600;
        font-size: clamp(1.7rem, 6vw, 2.5rem);
        text-align: center;
        line-height: 1.25;
        margin: 30px auto 40px;
        max-width: 560px;
      }
      .slogan .accent { color: var(--rose-fonce); }
      @media (prefers-color-scheme: dark) { .slogan .accent { color: var(--or-clair); } }

      /* ---------- Chanson thème ---------- */
      .chanson {
        text-align: center;
        margin: -8px auto 40px;
        max-width: 440px;
        width: 100%;
      }
      .chanson-mention {
        font-weight: 700;
        font-size: 1rem;
        color: var(--texte-doux);
        margin: 0 0 10px;
      }
      .chanson iframe {
        display: block;
        width: 100%;
        max-width: 280px;
        aspect-ratio: 9 / 16;
        height: auto;
        margin: 0 auto;
        border: 0;
        border-radius: 18px;
        background: #1a0512;
        box-shadow: 0 12px 30px rgba(87, 20, 60, 0.28);
      }

      /* ---------- Boutons ---------- */
      .actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        max-width: 440px;
        margin: 0 auto;
        width: 100%;
      }
      .btn-inscription {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
        background: var(--rose);
        color: #fff;
        font-weight: 800;
        font-size: 1.35rem;
        text-decoration: none;
        padding: 20px 24px;
        border-radius: 999px;
        min-height: 64px;
        box-shadow: 0 10px 26px rgba(232, 68, 124, 0.4);
        transition: background 0.15s ease, transform 0.15s ease;
      }
      .btn-inscription:hover { background: var(--rose-fonce); }
      .btn-inscription:active { transform: scale(0.99); }
      .btn-inscription:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }
      .btn-inscription svg { width: 26px; height: 26px; flex: none; }

      .btn-reglements {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        border: 2px solid var(--or);
        color: var(--texte);
        font-weight: 800;
        font-size: 1.1rem;
        text-decoration: none;
        padding: 14px 22px;
        border-radius: 999px;
        min-height: 56px;
        background: transparent;
        transition: background 0.15s ease;
      }
      .btn-reglements:hover { background: var(--prune-soft); }
      .btn-reglements:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }
      .btn-reglements svg { width: 21px; height: 21px; flex: none; }

      /* ---------- Pied ---------- */
      body.page-inscription footer {
        text-align: center;
        color: var(--texte-doux);
        font-size: 0.9rem;
        padding: 0 20px 24px;
      }
      footer .coeur-pied { color: var(--rose); }