:root {
      --accent: #0ea5e9;

      /* Échelle typographique globale */
      --kc-body: 0.95rem;
      --kc-body-md: 1rem;

      /* Titres */
      --kc-h1: clamp(2.35rem, 2vw + 1.9rem, 3rem);           /* Hero */
      --kc-h2: clamp(1.75rem, 1.4vw + 1.3rem, 2.25rem);      /* Titres de section */
      --kc-h3: 1.125rem;                                     /* Titres de cartes */
      --kc-h3-md: 1.25rem;
    }

    body {
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      font-size: var(--kc-body);
      line-height: 1.6;
    }

    @media (min-width: 768px) {
      body {
        font-size: var(--kc-body-md);
      }
    }

    .glass { backdrop-filter: blur(6px); background: rgba(15,23,42,.6); }
    .section { scroll-margin-top: 6rem; }
    #calendar{min-height:560px;}

      /* =============================
        Échelle typographique cohérente
        ============================= */

    /* Hero : titre principal */
    #accueil h1 {
      font-size: var(--kc-h1) !important;
      line-height: 1.15;
    }

    /* Ligne d’accroche Hero (Karaté Shotokan · Nalinnes ...) */
    #accueil p.text-orange-300 {
      font-size: 0.8rem;
      letter-spacing: 0.18em;
    }

    /* Titres de section (Horaires, Calendrier, Tarifs, Instructeurs, Actus, FAQ, Contact, Documents, Pour qui ?) */
    .section > .mx-auto > h2,
    .section > .mx-auto > div > h2 {
      font-size: var(--kc-h2) !important;
      line-height: 1.2;
    }

    /* Titres de cartes / blocs (coachs, actus, documents, tarifs, pourquoi/pour qui) */
    .section article h3,
    .section .rounded-2xl h3 {
      font-size: var(--kc-h3);
      line-height: 1.4;
    }

    @media (min-width: 768px) {
      .section article h3,
      .section .rounded-2xl h3 {
        font-size: var(--kc-h3-md);
      }
    }

    /* Texte courant uniforme dans les sections */
    .section p,
    .section li,
    .section details > summary {
      font-size: 0.95rem;
    }

    /* Petits textes / légendes / mentions */
    .section .text-xs,
    .section figcaption,
    .section .mt-3.text-sm.text-slate-400 {
      font-size: 0.8rem;
    }

    /* Témoignages : même taille de corps que le reste */
    #temoignages blockquote {
      font-size: 0.95rem;
    }

    /* =============================
      FullCalendar – base + mobile
      ============================= */
    @media (max-width: 640px){
      #calendar{min-height:520px;}
      .fc .fc-toolbar{flex-wrap:wrap; gap:.5rem}
      .fc .fc-toolbar-chunk{display:flex; align-items:center; gap:.25rem}
      .fc .fc-toolbar-chunk:last-child{flex:1 1 100%; justify-content:flex-start; flex-wrap:wrap; gap:.35rem}
      .fc .fc-button-group{display:flex; flex-wrap:wrap}
      .fc .fc-button-group .fc-button{flex:0 1 auto; min-width:84px}
      .fc .fc-toolbar-title{font-size:1rem}
      .fc .fc-button{padding:.35rem .5rem; font-size:.8rem; line-height:1}
      .fc .fc-col-header-cell-cushion{padding:.35rem 0; font-size:.8rem}
      .fc .fc-daygrid-day-number{font-size:.85rem}
      .fc .fc-daygrid-event{margin:1px 2px; padding:2px 4px; font-size:.78rem}
      .fc-theme-standard .fc-scrollgrid{border-radius:.75rem}
      .fc .fc-today-button{display:none !important}
      .fc .fc-dayGridMonth-button,
      .fc .fc-timeGridWeek-button,
      .fc .fc-listWeek-button{display:none !important}
    }

    .fc .fc-toolbar{flex-wrap:wrap; gap:.5rem}
    .fc .fc-toolbar-chunk{display:flex; align-items:center; gap:.25rem}
    .fc .fc-toolbar-title{font-size:1rem}
    .fc .fc-button{padding:.35rem .5rem; font-size:.8rem; line-height:1}
    .fc .fc-col-header-cell-cushion{padding:.35rem 0; font-size:.8rem}
    .fc .fc-daygrid-day-number{font-size:.85rem}
    .fc .fc-daygrid-event{margin:1px 2px; padding:2px 4px; font-size:.78rem}
    .fc-theme-standard .fc-scrollgrid{border-radius:.75rem}

    /* =============================
      FullCalendar – thème sombre
      ============================= */
    .fc .fc-col-header{background-color:#0b1220}
    .fc .fc-col-header-cell-cushion{
      color:#f8fafc;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.04em
    }
    .fc-theme-standard td, .fc-theme-standard th{border-color:#1f2937}
    .fc .fc-daygrid-day-number{color:#e5e7eb}
    .fc .fc-list-day-cushion{background-color:#0b1220;color:#f8fafc}
    .fc .fc-list-day-text, .fc .fc-list-day-side-text{color:#f8fafc}
    .fc .fc-col-header,
    .fc .fc-col-header-cell{background-color:#0b1220 !important;}
    .fc .fc-col-header-cell-cushion{
      color:#ffffff !important;
      font-weight:800;
      font-size:0.95rem;
      text-transform:uppercase;
      letter-spacing:.06em;
      text-decoration:none !important
    }
    .fc-theme-standard td, .fc-theme-standard th{border-color:#334155 !important}
    .fc .fc-daygrid-day-number{color:#f1f5f9 !important; font-weight:700}
    .fc .fc-list-day-cushion{background-color:#0b1220 !important; color:#ffffff !important; font-weight:800}
    .fc .fc-list-day-text, .fc .fc-list-day-side-text{color:#ffffff !important}
    .fc{--fc-border-color:#334155; --fc-neutral-text-color:#e2e8f0}

    /* =============================
      Thème clair — lisibilité
      ============================= */

    html.light body {
      background-color: #f8fafc !important;
      color: #0f172a !important;
    }

    /* Header collant */
    html.light header.glass {
      background: rgba(255, 255, 255, 0.92) !important;
      border-bottom: 1px solid #e2e8f0;
    }

    /* Arrières-plans très foncés -> clairs */
    html.light .bg-slate-950,
    html.light .bg-slate-900,
    html.light .bg-slate-900\/40,
    html.light .bg-slate-900\/50,
    html.light .bg-slate-900\/60,
    html.light .bg-slate-900\/80,
    html.light .bg-slate-950\/60,
    html.light .bg-slate-950\/70,
    html.light .bg-slate-950\/80,
    html.light .bg-slate-950\/95 {
      background-color: #ffffff !important;
    }

    /* Sections "bandeau" légèrement grises (calendrier, actus, etc.) */
    html.light section.bg-slate-900\/40,
    html.light section.bg-slate-900\/50 {
      background-color: #f1f5f9 !important;
    }

    /* Cartes / panneaux / bordures */
    html.light .border-slate-800 {
      border-color: #e2e8f0 !important;
    }
    html.light .ring-slate-800,
    html.light .ring-sky-700 {
      --tw-ring-color: #e2e8f0 !important;
    }

    /* Texte : supprimer les gris trop pâles en clair */
    html.light .text-slate-100,
    html.light .text-slate-200 {
      color: #0f172a !important;
    }
    html.light .text-slate-300,
    html.light .text-slate-400 {
      color: #4b5563 !important; /* gris lisible */
    }
    html.light .text-slate-500,
    html.light .text-slate-600 {
      color: #6b7280 !important;
    }
    html.light .text-slate-700,
    html.light .text-slate-800,
    html.light .text-slate-900 {
      color: #0f172a !important;
    }

    /* Hero : dégradé plus clair pour l’overlay */
    html.light .bg-gradient-to-br.from-slate-950 {
      background-image: linear-gradient(
        to bottom right,
        rgba(148, 163, 184, 0.9),
        rgba(241, 245, 249, 0.98)
      ) !important;
    }

    /* Tableau des horaires (section #horaires) */
    html.light #horaires thead {
      background-color: #e5e7eb !important;
    }
    html.light #horaires th {
      color: #0f172a !important;
    }
    html.light #horaires tbody tr {
      background-color: #ffffff !important;
      border-color: #e5e7eb !important;
    }
    html.light #horaires td {
      color: #111827 !important;
    }

    /* Formulaire de contact / champs de saisie */
    html.light input,
    html.light textarea,
    html.light select {
      background-color: #ffffff !important;
      color: #0f172a !important;
      border-color: #cbd5e1 !important;
    }
    html.light input::placeholder,
    html.light textarea::placeholder {
      color: #9ca3af !important;
    }

    /* CTA mobile fixe en bas */
    html.light .fixed.inset-x-0.bottom-0.bg-slate-950\/95 {
      background-color: #f9fafb !important;
    }

    /* FullCalendar en clair (jours lun., mar., mer., etc.) */
    html.light .fc .fc-col-header,
    html.light .fc .fc-col-header-cell {
      background-color: #e2e8f0 !important;
    }
    html.light .fc .fc-col-header-cell-cushion {
      color: #0f172a !important;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    html.light .fc-theme-standard td,
    html.light .fc-theme-standard th {
      border-color: #e5e7eb !important;
    }
    html.light .fc .fc-daygrid-day-number {
      color: #111827 !important;
      font-weight: 600;
    }
    html.light .fc .fc-list-day-cushion {
      background-color: #e2e8eb !important;
      color: #0f172a !important;
    }

    /* Hero : ligne "Karaté Shotokan · Nalinnes" */
    html.light #accueil .text-orange-300 {
      color: #b45309 !important; /* équivalent orange-600 */
    }

    /* Hero : "Karaté pour enfants, ados et adultes." */
    html.light #accueil .text-sky-300 {
      color: #0369a1 !important; /* sky-700 */
    }

    /* Boutons Annuel / Mensuel dans les sections Tarifs – mode clair */
    html.light .price-toggle.bg-slate-800 {
      background-color: #e5e7eb !important;  /* gris clair */
      color: #0f172a !important;             /* texte foncé lisible */
      border-color: #cbd5e1 !important;
    }

    /* Hover (actif ou inactif) en mode clair : jamais noir */
    html.light .price-toggle:hover,
    html.light .price-toggle.bg-slate-800:hover {
      background-color: #e5e7eb !important;
      color: #0f172a !important;
      border-color: #cbd5e1 !important;
    }

    /* Fonds des cartes : un peu plus marqués mais doux */
    html.light #publics .bg-blue-500\/10 {
      background-color: #eff6ff !important;   /* bleu 50 */
    }
    html.light #publics .bg-orange-500\/10 {
      background-color: #fff7ed !important;   /* orange 50 */
    }
    html.light #publics .bg-green-500\/10 {
      background-color: #ecfdf3 !important;   /* vert 50 */
    }

    /* Titres "Enfants / Ados / Adultes" : couleurs bien foncées */
    html.light #publics h3.text-blue-100 {
      color: #1d4ed8 !important;  /* bleu-700 */
    }
    html.light #publics h3.text-orange-100 {
      color: #c2410c !important;  /* orange-700 */
    }
    html.light #publics h3.text-green-100 {
      color: #15803d !important;  /* vert-700 */
    }

    /* Lisibilité du bouton menu en mode Light */
    .light #menuBtn{
      background:#e2e8f0 !important;   /* gris clair */
      color:#0f172a !important;         /* texte bien contrasté */
      border-color:#e2e8f0 !important;
    }
    .light #menuBtn:hover{
      background:#cbd5e1 !important;    /* hover un peu plus foncé */
    }
    .light header.glass #menuBtn{
      /* si le header est translucide, on renforce encore le contraste */
      box-shadow: 0 0 0 1px rgba(148,163,184,.35) inset;
    }    

    /* =============================
      Renforcer la lisibilité globale en mode Light
      ============================= */

    /* Classes Tailwind très claires (100/200) -> variantes plus foncées */
    html.light .text-sky-100 {
      color: #0369a1 !important;   /* sky-700 */
    }
    html.light .text-blue-100 {
      color: #1d4ed8 !important;   /* blue-700 */
    }
    html.light .text-orange-100 {
      color: #c2410c !important;   /* orange-700 */
    }
    html.light .text-green-100 {
      color: #15803d !important;   /* green-700 */
    }

    html.light .text-sky-200 {
      color: #0284c7 !important;   /* sky-600 */
    }
    html.light .text-blue-200 {
      color: #2563eb !important;   /* blue-600 */
    }

    /* Police un peu plus nette et un poil plus grande en Light */
    html.light body {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-size: var(--kc-body-md);
      color: #0f172a;
    }

    /* ==============================================
      BOUTONS CALENDRIER + TÉLÉCHARGEMENT (mode Light)
      Lisibilité de la police au survol
      ============================================== */

    html.light #calendrier button[id^="btnExportICS"] {
      font-weight: 600;
      letter-spacing: .02em;
      border-radius: 9999px;
      border: 1px solid transparent;
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
      transition:
        background-color .15s ease,
        color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        transform .1s ease;
    }

    /* Enfants : mêmes couleurs que carte "Enfants" */
    html.light #btnExportICSenfants {
      background-color: #eff6ff !important;   /* ≈ bg-blue-50 (#publics) */
      color: #1d4ed8 !important;              /* h3.text-blue-100 en light */
      border-color: #bfdbfe !important;       /* blue-200 */
    }
    html.light #btnExportICSenfants:hover {
      background-color: #dbeafe !important;   /* blue-100 */
      color: #1d4ed8 !important;
      box-shadow: 0 4px 10px rgba(148, 163, 184, 0.5);
      transform: translateY(-1px);
    }

    /* Ados : mêmes couleurs que carte "Ados" */
    html.light #btnExportICSados {
      background-color: #fff7ed !important;   /* ≈ bg-orange-50 */
      color: #c2410c !important;              /* h3.text-orange-100 en light */
      border-color: #fed7aa !important;       /* orange-200 */
    }
    html.light #btnExportICSados:hover {
      background-color: #ffedd5 !important;   /* orange-100 */
      color: #c2410c !important;
      box-shadow: 0 4px 10px rgba(248, 176, 113, 0.5);
      transform: translateY(-1px);
    }

    /* Adultes : mêmes couleurs que carte "Adultes" */
    html.light #btnExportICSadultes {
      background-color: #ecfdf3 !important;   /* ≈ bg-green-50 */
      color: #15803d !important;              /* h3.text-green-100 en light */
      border-color: #bbf7d0 !important;       /* green-200 */
    }
    html.light #btnExportICSadultes:hover {
      background-color: #dcfce7 !important;   /* green-100 */
      color: #15803d !important;
      box-shadow: 0 4px 10px rgba(74, 222, 128, 0.45);
      transform: translateY(-1px);
    }

    /* Bouton "Tout le club" : on garde le dégradé, mais texte lisible */
    html.light #btnExportICStout {
      background-image: linear-gradient(90deg,#bfdbfe,#fed7aa,#bbf7d0) !important;
      color: #000000 !important;
      border-color: transparent !important;
    }
    html.light #btnExportICStout:hover {
      background-image: linear-gradient(90deg,#2563eb,#ea580c,#16a34a) !important;
      color: #f9fafb !important;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.4);
      transform: translateY(-1px);
    }

    /* Boutons TÉLÉCHARGER le PDF */
    html.light #documents a[download] {
      background-color: #bfdbfe !important;   /* accent sky */
      color: #0f172a !important;              /* texte très lisible */
      font-weight: 600;
    }

    html.light #documents a[download]:hover {
      background-color: #0284c7 !important;   /* sky-600, plus foncé au survol */
      color: #f9fafb !important;              /* texte blanc pour le contraste */
    }

    .kc-badge-link {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      border-radius: 9999px;
      padding: 0.65rem 1rem;
      border: 1px solid #1f2937;              /* slate-800 */
      background: radial-gradient(
        circle at top left,
        rgba(56, 189, 248, 0.16),             /* sky-400 */
        rgba(15, 23, 42, 0.98)                /* slate-950 */
      );
      color: #e5e7eb;                          /* slate-200 */
      font-size: 0.8rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-weight: 600;
      text-align: center;
      text-decoration: none;
      box-shadow: 0 6px 18px rgba(15, 23, 42, 0.7);
      transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .12s ease,
        box-shadow .18s ease;
    }

    .kc-badge-link:hover {
      border-color: #0ea5e9;                   /* accent */
      background: radial-gradient(
        circle at top left,
        rgba(56, 189, 248, 0.26),
        rgba(15, 23, 42, 1)
      );
      color: #f9fafb;
      transform: translateY(-1px);
      box-shadow: 0 10px 25px rgba(8, 47, 73, 0.9); /* bleu profond */
    }

    .kc-badge-icon {
      font-size: 1.05rem;
    }

    .kc-badge-label {
      white-space: nowrap;
    }

    /* Mode light : fond clair + texte foncé mais lisible au hover */
    html.light .kc-badge-link {
      border-color: #cbd5e1;                   /* slate-300 */
      background: linear-gradient(
        135deg,
        #e5f3ff,
        #f9fafb
      );
      color: #0f172a;                          /* slate-900 */
      box-shadow: 0 3px 10px rgba(148, 163, 184, 0.35);
    }

    html.light .kc-badge-link:hover {
      border-color: #0284c7;                   /* sky-600 */
      background: linear-gradient(
        135deg,
        #0ea5e9,
        #38bdf8
      );
      color: #0f172a;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.25);
    }

    /* ========= Flocons de neige ========= */

    #snowContainer {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;         /* ne bloque jamais les clics */
      overflow: hidden;
      z-index: 60;                  /* au-dessus du contenu, sous tes modales éventuelles */
    }

    .snowflake {
      position: absolute;
      top: -10%;
      color: #e5f0ff;
      text-shadow: 0 0 4px rgba(15, 23, 42, 0.8);
      opacity: 0.4;
      user-select: none;
      animation-name: snowFall;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

    @keyframes snowFall {
      0% {
        transform: translate3d(0, -100%, 0);
      }
      100% {
        transform: translate3d(20px, 110vh, 0);
      }
    }

    /* Un peu d’adaptation en mode light pour bien voir les flocons */

    html.light .snowflake {
      color: #e5f0ff;
      text-shadow: 0 0 4px rgba(15, 23, 42, 0.5);
    }

    /* Ne pas imprimer la neige */

    @media print {
      #snowContainer {
        display: none !important;
      }
    }

    /* ========= Pétales de cerisier (Sakura) ========= */

    #sakuraContainer {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;   /* ne bloque jamais les clics */
      overflow: hidden;
      z-index: 60;            /* au-dessus du contenu */
    }

    .sakura-petal {
      position: absolute;
      top: -12%;
      user-select: none;
      will-change: transform;
      opacity: 0.75;
      filter: drop-shadow(0 0 3px rgba(15, 23, 42, 0.35));
      animation-name: sakuraFall;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

    /* Mouvement : descente + légère dérive, rotation */
    @keyframes sakuraFall {
      0% {
        transform: translate3d(0, -120%, 0) rotate(0deg);
      }
      100% {
        transform: translate3d(60px, 110vh, 0) rotate(360deg);
      }
    }

    /* ========= Feuilles d'automne (Octobre) ========= */

    #leavesContainer{
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: hidden;
      z-index: 60;
    }

    .autumn-leaf{
      position: absolute;
      top: -12%;
      user-select: none;
      will-change: transform;
      opacity: 0.85;
      filter: drop-shadow(0 0 3px rgba(15, 23, 42, 0.35));
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

    /* Fallback CSS si besoin */
    @keyframes leafFall {
      0%   { transform: translate3d(0, -120%, 0) rotate(0deg); }
      100% { transform: translate3d(60px, 110vh, 0) rotate(420deg); }
    }

    html.light .autumn-leaf{
      filter: drop-shadow(0 0 2px rgba(15, 23, 42, 0.20));
    }

    @media print{
      #leavesContainer{ display:none !important; }
    }