/* =====================================================================
   main.css — UI du site 3D (glassmorphism, formes organiques)
   ===================================================================== */

/* Police des titres maison (remplace l'ancienne Bitcount Single « pointillée »).
   Fichier local -> aucune dépendance Google Fonts pour le titre. */
@font-face {
  font-family: "LeleFont2";
  src: url("assets/fonts/LeleFont2.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --glass: rgba(255, 255, 255, 0.10);
  --glass-strong: rgba(255, 255, 255, 0.16);
  --stroke: rgba(255, 255, 255, 0.28);
  --text: #fff;
  /* Police des titres : LeleFont2 (maison), replis Pangolin → Syne */
  --font-title: "LeleFont2", "Pangolin", "Syne", sans-serif;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #160d22; color: var(--text); }
/* Le doigt ne doit JAMAIS déclencher le pinch-zoom ni le scroll natifs du
   navigateur : sinon ils volent le geste à la navigation 3D (zoom qui se
   « bloque », surtout au lancement quand le pincement démarre sur le loader
   ou le HUD, pas sur le canvas). OrbitControls ne pose touch-action:none que
   sur le canvas — on l'étend ici à TOUTE la page. */
html, body, #app { touch-action: none; overscroll-behavior: none; }
#app { position: fixed; inset: 0; }
/* Exception : le contenu des modales doit pouvoir défiler au doigt. */
#modal-content, .nl-panel, .about-panel, .agenda-panel, .programme-panel { touch-action: pan-y; }
.hidden { display: none !important; }

/* Défilement SANS barre visible (on garde le scroll, on cache la scrollbar). */
#modal-content, .nl-panel, .about-panel {
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* anciens Edge/IE */
}
#modal-content::-webkit-scrollbar,
.nl-panel::-webkit-scrollbar,
.about-panel::-webkit-scrollbar { width: 0; height: 0; display: none; }  /* Chrome/Safari */

/* ---------- Écran de chargement ---------- */
#loader {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
  background: #ffffff;
  font-family: "Helvetica Neue", Arial, sans-serif;
}
#loader.hidden { display: flex !important; opacity: 0; pointer-events: none;
  animation: loaderFade 0.7s ease forwards; }

.loader-core {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
  padding: 0 24px;
  animation: coreRise 0.9s cubic-bezier(.2,.8,.2,1) both;
}

.loader-kicker {
  font-size: clamp(10px, 1.4vw, 13px); font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: #b3a3da;                                  /* lavande claire */
}

/* Wordmark : police des titres (Pangolin), lavande claire, dégradé discret */
.loader-wordmark {
  margin: 0;
  font-family: var(--font-title);
  font-optical-sizing: auto;
  font-size: clamp(34px, 8.5vw, 82px); font-weight: 400;
  letter-spacing: 0.02em; line-height: 1.05;
  background: linear-gradient(100deg, #a78bdb, #c7b3f0);  /* deux lavandes claires */
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.loader-meter { width: min(340px, 76vw); display: flex; flex-direction: column; gap: 12px; }
#loader-track {
  width: 100%; height: 4px; border-radius: 99px;
  background: rgba(138, 111, 201, 0.14);           /* lavande très diluée */
  overflow: hidden;
}
#loader-bar {
  width: 0%; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #8a6fc9, #b29ce6);
  /* Pas de transition CSS : la largeur est animée frame par frame en JS,
     en phase exacte avec le pourcentage affiché (cf. scene.js). */
}
.loader-readout {
  display: flex; align-items: baseline; justify-content: space-between;
  font-weight: 600;
}
.loader-status {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #bcaee0;                                  /* glycine claire */
}
.loader-pct {
  font-size: 15px; letter-spacing: 0.04em;
  color: #8a6fc9; font-variant-numeric: tabular-nums; /* lavande */
}
.loader-pct small { font-size: 0.62em; opacity: 0.55; margin-left: 1px; }

.loader-foot {
  position: absolute; bottom: 28px; z-index: 2;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #cdc2ec;                                  /* lilas très clair */
  animation: footPulse 3s ease-in-out infinite;
}

@keyframes coreRise   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes footPulse  { 0%,100% { opacity: 0.55; } 50% { opacity: 0.9; } }
@keyframes loaderFade { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .loader-foot, .loader-core { animation: none !important; }
}

/* ---------- Intro / invitation à entrer ---------- */
#intro {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; cursor: pointer; text-align: center;
  background: rgba(22, 13, 34, 0.35);
  backdrop-filter: blur(4px);
}
#intro .card {
  padding: 30px 38px;
  border-radius: 26px 30px 24px 32px;            /* coins organiques */
  background: var(--glass);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
#intro h2 { margin: 0 0 8px; font-family: var(--font-title); font-weight: 400; letter-spacing: 0.5px; }
#intro p { margin: 4px 0; opacity: 0.85; font-size: 14px; }
#intro kbd {
  background: rgba(255, 255, 255, 0.16); border: 1px solid var(--stroke);
  border-radius: 6px; padding: 1px 7px; font-size: 12px;
}

/* ---------- Réticule (point de visée) ---------- */
#reticle {
  position: fixed; top: 50%; left: 50%; z-index: 20;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  pointer-events: none;
}
#reticle.active {
  transform: scale(2.2);
  background: rgba(255, 255, 255, 0.9);
  border-color: #ff5fae;
}
#tooltip {
  position: fixed; top: 50%; left: 50%; z-index: 20;
  transform: translate(-50%, 26px);
  padding: 6px 14px; border-radius: 99px;
  background: var(--glass-strong); border: 1px solid var(--stroke);
  backdrop-filter: blur(12px);
  font-size: 13px; white-space: nowrap;
  opacity: 0; transition: opacity 0.15s ease; pointer-events: none;
}
#tooltip.show { opacity: 1; }

/* ---------- Aide navigation (coin bas) ---------- */
#help {
  position: fixed; left: 18px; bottom: 16px; z-index: 20;
  font-size: 12px; opacity: 0.65; line-height: 1.6; pointer-events: none;
}
#help b { font-weight: 600; }

/* ---------- Modale de contenu ---------- */
#modal {
  position: fixed; inset: 0; z-index: 60;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(12, 7, 20, 0.45);
  backdrop-filter: blur(6px);
}
#modal.open { display: flex; }
/* @property permet d'ANIMER un angle CSS (sinon impossible) */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes borderspin { to { --angle: 360deg; } }

#modal .panel {
  position: relative;
  width: min(720px, 100%); max-height: 86vh;
  display: flex; flex-direction: column;
  border-radius: 30px 34px 26px 36px;           /* coins organiques */
  /* double couche : un voile lumineux par-dessus le verre -> effet glassy */
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02)),
    var(--glass);
  backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 70px rgba(70, 180, 255, 0.20);
  overflow: hidden;                              /* clippe l'anneau aux coins */
}
/* Anneau dégradé animé : on dessine un dégradé conique, puis un masque
   ne garde que le contour (2px) -> bordure colorée qui tourne. */
#modal .panel::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--angle),
    #ff5fae, #7b5cff, #2bd1ff, #00d6c2, #ffd23f, #ff5fae);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  animation: borderspin 8s linear infinite;
}
#modal-content {
  padding: 34px 34px 28px; overflow: auto;       /* le contenu défile, pas l'anneau */
}
#modal h2 {
  margin: 0 0 14px; font-family: var(--font-title); font-size: 28px; font-weight: 400;
  letter-spacing: 0.5px;
  border-left: 4px solid var(--accent, #ff5fae);
  padding-left: 12px;
}
#modal .note { margin: 0 0 20px; line-height: 1.65; opacity: 0.9; font-size: 15px; }
#modal .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
#modal .gallery img,
#modal .gallery video,
#modal .gallery iframe {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: none; border-radius: 16px; background: rgba(255, 255, 255, 0.06);
}
#modal .soon {
  grid-column: 1 / -1; text-align: center; padding: 30px;
  opacity: 0.7; border: 1px dashed var(--stroke); border-radius: 18px;
}
#modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--stroke); background: var(--glass-strong);
  color: #fff; font-size: 18px; cursor: pointer;
  backdrop-filter: blur(10px);
  transition: transform 0.15s ease, background 0.15s ease;
}
#modal-close:hover { transform: rotate(90deg); background: rgba(255, 255, 255, 0.28); }

/* ---------- Header / Footer (typo cool, texte noir) ---------- */
#site-header, #site-footer {
  position: fixed; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 16px 26px;
  font-family: "Syne", sans-serif;
  color: #000;                                   /* texte en noir */
  /* léger voile clair pour que le noir reste lisible sur la 3D */
  background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  pointer-events: none;                          /* on ne bloque pas la 3D... */
}
#site-footer {
  bottom: 0; top: auto; justify-content: center;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55));
}
#site-header { top: 0; justify-content: space-between; }
#site-header .brand {
  font-family: var(--font-title);
  font-weight: 400; font-size: 24px; letter-spacing: 0.5px;
}
#site-header nav { display: flex; gap: 8px; }

#site-header button, #site-footer button {
  pointer-events: auto;                          /* ...mais les boutons restent cliquables */
  font-family: "Syne", sans-serif;
  font-weight: 700; font-size: 14px; letter-spacing: 0.3px;
  color: #000; background: transparent;
  border: 1.5px solid rgba(0, 0, 0, 0.7);
  border-radius: 99px; padding: 8px 18px; cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
#site-header button:hover, #site-footer button:hover {
  background: #000; color: #fff; transform: translateY(-1px);
}

/* ---------- Bouton de bascule de mode ---------- */
#mode-btn {
  position: fixed; top: 70px; right: 26px; z-index: 30;
  font-family: "Syne", sans-serif; font-weight: 700; font-size: 13px;
  color: #fff; cursor: pointer;
  padding: 9px 16px; border-radius: 99px;
  background: var(--glass-strong); border: 1px solid var(--stroke);
  backdrop-filter: blur(12px);
  transition: background 0.18s ease, transform 0.18s ease;
}
#mode-btn:hover { background: rgba(255, 255, 255, 0.28); transform: translateY(-1px); }

/* ---------- Gizmo d'axes (façon Blender) ----------
   Le gizmo lui-même est PEINT sur le canvas WebGL par ViewHelper. Cette boîte
   n'est qu'un capteur de clic transparent, posé pile sur lui (taille/position
   fixées en JS depuis scene.js -> toujours en phase avec le rendu). */
#view-gizmo {
  position: fixed; z-index: 25;
  pointer-events: auto; cursor: pointer;
  touch-action: none;                              /* le tap ne déclenche pas le pan natif */
}
#view-gizmo.hidden { display: none; }

/* ---------- Aide pavé numérique (mode Orbite) ---------- */
#numpad-help {
  /* Commandes d'orbite retirées de l'affichage (desktop comme mobile).
     display:none sans !important : scene.js retire la classe .hidden, mais
     cette règle garde l'encart masqué dans tous les cas. */
  display: none;
  position: fixed; left: 18px; bottom: 16px; z-index: 20;
  width: 320px; padding: 15px 17px 14px;
  border-radius: 20px 22px 16px 24px;            /* coins organiques */
  /* double couche : voile lumineux par-dessus le verre -> effet glassy */
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03)),
    var(--glass);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 16px 44px rgba(8, 4, 16, 0.4);
  color: #fff; font-size: 12px;
}

/* En-tête : titre (typo des titres) + petite étiquette lilas */
#numpad-help .nh-head {
  display: flex; align-items: baseline; gap: 9px;
  padding-bottom: 11px; margin-bottom: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
#numpad-help .nh-title {
  font-family: var(--font-title);
  font-size: 16px; letter-spacing: 0.5px; line-height: 1;
}
#numpad-help .nh-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #d8c6ff;                                /* lilas clair */
  padding: 3px 8px; border-radius: 99px;
  background: rgba(167, 139, 219, 0.18);
  border: 1px solid rgba(199, 179, 240, 0.35);
}

/* Commandes souris : une ligne par geste, le verbe en surbrillance */
#numpad-help .nh-hints {
  display: flex; flex-direction: column; gap: 7px;
  font-size: 12.5px; line-height: 1.3;
}
#numpad-help .nh-hints span {
  display: flex; align-items: baseline; gap: 8px; opacity: 0.82;
}
#numpad-help .nh-hints b {
  flex-shrink: 0; min-width: 78px;
  font-weight: 700; letter-spacing: 0.02em; color: #fff; opacity: 1;
}

/* petite ligne d'intro complémentaire */
#intro .alt { margin-top: 10px; opacity: 0.75; font-size: 13px; }

/* =====================================================================
   SEMAINES — barre de rectangles (sous le header, à gauche) + lecteur
   ===================================================================== */
#week-bar {
  position: fixed; left: 26px; top: 78px; z-index: 30;
  display: flex; gap: 16px; flex-wrap: wrap; max-width: 74vw;
  pointer-events: none;                          /* la barre ne bloque pas la 3D... */
}

/* ---------- Tuile "Week n" : grosse pastille bonbon, glossy Y2K ---------- */
.week-tile {
  /* Teinte = couleur du calendrier (week-color) FONDUE vers l'améthyste du
     fond HDRI (#9646dc, cf. PALETTE dans hdri.js) → les tuiles s'accordent à
     la fois au calendrier et au décor violet. */
  --wc: color-mix(in srgb, var(--week-color, #ff5fae) 35%, #9646dc);
  pointer-events: auto;                          /* ...mais les tuiles sont cliquables */
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 5px;
  font-family: "Syne", sans-serif; cursor: pointer;
  text-align: left; padding: 22px 34px;
  border-radius: 24px;
  /* corps bombé : reflet clair en haut → couleur pleine → ombre en bas */
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--wc) 60%, #fff) 0%,
      var(--wc) 46%,
      color-mix(in srgb, var(--wc) 72%, #000) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  color: color-mix(in srgb, var(--wc) 26%, #231138);   /* texte foncé teinté, lisible */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);       /* léger relief "gravé" */
  box-shadow:
    0 10px 30px color-mix(in srgb, var(--wc) 55%, transparent),
    inset 0 2px 0 rgba(255, 255, 255, 0.95),           /* arête brillante du haut */
    inset 0 -12px 22px rgba(0, 0, 0, 0.14);            /* creux du bas */
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
/* vitre brillante sur la moitié haute (effet plastique laqué) */
.week-tile::before {
  content: ""; position: absolute; inset: 2px 2px auto 2px; height: 46%; z-index: -1;
  border-radius: 22px 22px 60% 60% / 22px 22px 30% 30%;
  background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
  pointer-events: none;
}
/* petite étincelle Y2K dans le coin */
.week-tile .week-n::after {
  content: "✦"; margin-left: 8px; font-size: 0.62em; vertical-align: 0.28em;
  color: #fff; text-shadow: 0 0 8px rgba(255, 255, 255, 0.95);
}
.week-tile:hover {
  transform: translateY(-3px) scale(1.03) rotate(-0.6deg);
  filter: saturate(1.12) brightness(1.05);
  box-shadow:
    0 16px 40px color-mix(in srgb, var(--wc) 65%, transparent),
    inset 0 2px 0 rgba(255, 255, 255, 0.98),
    inset 0 -12px 22px rgba(0, 0, 0, 0.14);
}
.week-tile .week-n { font-weight: 800; font-size: 30px; letter-spacing: 0.3px; line-height: 1; }
.week-tile .week-dates { font-size: 15px; opacity: 0.85; font-weight: 700; }

#week-viewer {
  position: fixed; inset: 0; z-index: 80;
  display: none; justify-content: center;
  background: rgba(10, 6, 18, 0.72);
  backdrop-filter: blur(6px);
  touch-action: pan-y;                           /* scroll vertical fluide au doigt */
}
#week-viewer.open { display: flex; }
.week-scroll {
  width: min(560px, 92vw); height: 100%;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 76px 0 40px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  scrollbar-width: none;             /* Firefox : scroll gardé, barre cachée */
  -ms-overflow-style: none;          /* anciens Edge/IE */
}
.week-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }  /* Chrome/Safari */
.week-page {
  width: 100%; height: auto; display: block;
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}
#week-close {
  position: fixed; top: 18px; right: 22px; z-index: 81;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--stroke); background: var(--glass-strong);
  color: #fff; font-size: 18px; cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background 0.18s ease, transform 0.18s ease;
}
#week-close:hover { transform: rotate(90deg); background: rgba(255, 255, 255, 0.28); }

/* =====================================================================
   PANNEAU "VERRE" LILAS — partagé par les modales Contact & About
   (anciennement la modale Newsletter, supprimée)
   ===================================================================== */
@keyframes nl-fade { from { opacity: 0; } to { opacity: 1; } }

.nl-panel {
  position: relative;
  width: min(440px, 100%);
  padding: 38px 34px 26px;
  text-align: center;
  color: #2a1a3e;                                  /* aubergine profond, lisible */
  border-radius: 30px 34px 26px 36px;              /* coins organiques */
  /* verre teinté lilas, du blanc au violet doux */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.95), rgba(243, 236, 255, 0.9) 55%, rgba(229, 217, 255, 0.86)),
    var(--glass-strong);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 30px 80px rgba(60, 30, 110, 0.4), 0 0 70px rgba(168, 85, 247, 0.22);
  animation: nl-pop 0.3s cubic-bezier(0.2, 1.2, 0.3, 1);
}
@keyframes nl-pop { from { transform: translateY(14px) scale(0.97); } to { transform: none; } }

.nl-panel h2 {
  margin: 0 0 8px; font-family: var(--font-title); font-weight: 400;
  font-size: 30px; letter-spacing: 0.4px;
  /* camaïeu de violets clairs, raccord avec le wordmark du loader */
  background: linear-gradient(105deg, #8b5cf6, #a855f7 42%, #b785f5 70%, #c9a6fa);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nl-sub { margin: 0 auto 22px; max-width: 34ch; font-size: 14px; line-height: 1.6; opacity: 0.82; }

.nl-fine { margin: 16px 0 0; font-size: 11.5px; opacity: 0.6; }

/* ---------- Modale Contact (réutilise le verre .nl-panel) ---------- */
#contact-modal {
  position: fixed; inset: 0; z-index: 70;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(20, 10, 34, 0.45);
  backdrop-filter: blur(6px);
}
#contact-modal.open { display: flex; animation: nl-fade 0.25s ease; }

/* Deux actions côte à côte (passent en colonne si l'écran est étroit) */
.ct-actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.ct-actions button {
  flex: 1 1 auto; min-width: 150px;
  font-family: "Syne", sans-serif; font-weight: 700; font-size: 15px;
  letter-spacing: 0.3px; cursor: pointer;
  padding: 13px 18px;
  border-radius: 18px 22px 16px 24px;            /* coins organiques, raccord au panneau */
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease, background 0.16s ease;
}

/* "Open mail app" : dégradé violet profond -> lilas (bouton principal) */
#ct-mail {
  color: #fff; border: none;
  background: linear-gradient(100deg, #7c3aed, #a855f7 55%, #c084fc);
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.4);
}
#ct-mail:hover {
  transform: translateY(-1px); filter: brightness(1.05);
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.5);
}

/* "Copy address" : bouton secondaire, contour lilas sur verre */
.ct-secondary {
  color: #6d28d9;
  border: 1.5px solid rgba(124, 58, 237, 0.4);
  background: rgba(255, 255, 255, 0.6);
}
.ct-secondary:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.88);
}

/* Adresse affichée (repli webmail) : un clic la sélectionne en entier */
.ct-addr {
  margin: 14px 0 0; font-size: 14px; font-weight: 600;
  color: #6d28d9; letter-spacing: 0.2px; user-select: all;
}

#ct-status { margin: 4px 0 0; min-height: 18px; font-size: 13.5px; font-weight: 600; }
#ct-status.ok  { color: #7c3aed; }
#ct-status.err { color: #c4456b; }

#ct-close {
  position: absolute; top: 14px; right: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(124, 58, 237, 0.28);
  background: rgba(255, 255, 255, 0.6);
  color: #2a1a3e; font-size: 13px; cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease;
}
#ct-close:hover { transform: rotate(90deg); background: rgba(255, 255, 255, 0.9); }

/* ---------- Modale Address (réutilise le verre .nl-panel) ---------- */
#address-modal {
  position: fixed; inset: 0; z-index: 70;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(20, 10, 34, 0.45);
  backdrop-filter: blur(6px);
}
#address-modal.open { display: flex; animation: nl-fade 0.25s ease; }

.addr-venue {
  margin: 0; font-family: var(--font-title); font-weight: 400;
  font-size: 22px; letter-spacing: 0.3px; color: #6d28d9;
}
.addr-line {
  margin: 6px 0 22px; font-size: 16px; line-height: 1.6;
  font-weight: 600; color: #2a1a3e;
}
.addr-map {
  display: inline-block; text-decoration: none;
  font-family: "Syne", sans-serif; font-weight: 700; font-size: 15px;
  letter-spacing: 0.3px; cursor: pointer;
  padding: 13px 24px; color: #fff; border: none;
  border-radius: 18px 22px 16px 24px;
  background: linear-gradient(100deg, #7c3aed, #a855f7 55%, #c084fc);
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.4);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.addr-map:hover {
  transform: translateY(-1px); filter: brightness(1.05);
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.5);
}

#address-close {
  position: absolute; top: 14px; right: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(124, 58, 237, 0.28);
  background: rgba(255, 255, 255, 0.6);
  color: #2a1a3e; font-size: 13px; cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease;
}
#address-close:hover { transform: rotate(90deg); background: rgba(255, 255, 255, 0.9); }

/* =====================================================================
   ABOUT US — modale de présentation (même verre lilas que la newsletter)
   ===================================================================== */
#about-modal {
  position: fixed; inset: 0; z-index: 70;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(20, 10, 34, 0.45);
  backdrop-filter: blur(6px);
}
#about-modal.open { display: flex; animation: nl-fade 0.25s ease; }

.about-panel {
  position: relative;
  width: auto; max-width: 92vw; max-height: 90vh;    /* taille pilotée par la photo */
  display: flex;
  overflow: hidden;
  padding: 14px;                                     /* cadre lilas autour de la photo */
  color: #2a1a3e;
  border-radius: 30px 34px 26px 36px;               /* coins organiques */
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.95), rgba(243, 236, 255, 0.9) 55%, rgba(229, 217, 255, 0.86)),
    var(--glass-strong);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 30px 80px rgba(60, 30, 110, 0.4), 0 0 70px rgba(168, 85, 247, 0.22);
  animation: nl-pop 0.3s cubic-bezier(0.2, 1.2, 0.3, 1);
}

/* La nouvelle photo, affichée en entier (grande sur desktop) dans son cadre */
.about-photo {
  width: auto; height: auto; display: block;
  max-width: 100%; max-height: calc(90vh - 28px); object-fit: contain;
  border-radius: 18px;
  background: rgba(124, 58, 237, 0.08);
}

.about-panel h2 {
  margin: 22px 34px 10px;
  font-family: var(--font-title); font-weight: 400;
  font-size: 32px; letter-spacing: 0.4px;
  background: linear-gradient(105deg, #8b5cf6, #a855f7 42%, #b785f5 70%, #c9a6fa);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.about-text { margin: 0; padding: 0 34px 30px; }
.about-text p { margin: 0 0 14px; font-size: 15px; line-height: 1.65; }
.about-text b { color: #8b5cf6; font-weight: 600; }
.about-sign {
  margin-top: 18px !important; font-family: var(--font-title);
  font-weight: 400; font-size: 17px; color: #9b6cf0;
}

#about-close {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(124, 58, 237, 0.28);
  background: rgba(255, 255, 255, 0.75);
  color: #2a1a3e; font-size: 14px; cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform 0.16s ease, background 0.16s ease;
}
#about-close:hover { transform: rotate(90deg); background: rgba(255, 255, 255, 0.95); }

/* =====================================================================
   PROGRAMME — modale galerie : pages du programme empilées
   (même verre lilas que About, titre chrome holographique)
   ===================================================================== */
#programme-modal {
  position: fixed; inset: 0; z-index: 70;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(20, 10, 34, 0.45);
  backdrop-filter: blur(6px);
}
#programme-modal.open { display: flex; animation: nl-fade 0.25s ease; }

.programme-panel {
  position: relative;
  width: min(620px, 94vw); max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden auto;                             /* les pages défilent */
  color: #2a1a3e;
  border-radius: 30px 34px 26px 36px;                /* coins organiques */
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.95), rgba(243, 236, 255, 0.9) 55%, rgba(229, 217, 255, 0.86)),
    var(--glass-strong);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 30px 80px rgba(60, 30, 110, 0.4), 0 0 70px rgba(168, 85, 247, 0.22);
  animation: nl-pop 0.3s cubic-bezier(0.2, 1.2, 0.3, 1);
  scrollbar-width: none; -ms-overflow-style: none;
}
.programme-panel::-webkit-scrollbar { width: 0; height: 0; display: none; }

.programme-panel h2 {
  margin: 22px 34px 6px;
  font-family: var(--font-title); font-weight: 400;
  font-size: 32px; letter-spacing: 0.4px;
  background: linear-gradient(105deg, #8b5cf6, #a855f7 42%, #b785f5 70%, #c9a6fa);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.programme-sub {
  margin: 0 34px 10px; max-width: 42ch;
  font-size: 13.5px; line-height: 1.55; opacity: 0.78;
}

.programme-gallery {
  display: flex; flex-direction: column; gap: 14px;
  padding: 8px 22px 28px;
}
.programme-gallery img {
  width: 100%; display: block;
  border-radius: 14px;
  background: rgba(124, 58, 237, 0.06);
  box-shadow: 0 10px 30px rgba(60, 30, 110, 0.25);
}

#programme-close {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(124, 58, 237, 0.28);
  background: rgba(255, 255, 255, 0.75);
  color: #2a1a3e; font-size: 14px; cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform 0.16s ease, background 0.16s ease;
}
#programme-close:hover { transform: rotate(90deg); background: rgba(255, 255, 255, 0.95); }

/* =====================================================================
   AGENDA — modale "Our agenda" : VRAI CALENDRIER, style Y2K-couture
   (chrome holographique, coutures piquées, perles-boutons glossy)
   ===================================================================== */
#agenda-modal {
  position: fixed; inset: 0; z-index: 70;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(20, 10, 34, 0.45);
  backdrop-filter: blur(6px);
}
#agenda-modal.open { display: flex; animation: nl-fade 0.25s ease; }

.agenda-panel {
  position: relative;
  width: min(540px, 100%); max-height: 88vh;
  display: flex; flex-direction: column;
  overflow: hidden auto;
  color: #2a1a3e;
  border-radius: 30px 34px 26px 36px;               /* coins organiques */
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.96), rgba(243, 236, 255, 0.92) 55%, rgba(229, 217, 255, 0.88)),
    var(--glass-strong);
  /* contour "couture" : un liseré clair + une piqûre pointillée holographique */
  border: 1px solid rgba(255, 255, 255, 0.8);
  outline: 2px dashed rgba(168, 85, 247, 0.35);
  outline-offset: -7px;
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 30px 80px rgba(60, 30, 110, 0.4), 0 0 70px rgba(168, 85, 247, 0.22);
  animation: nl-pop 0.3s cubic-bezier(0.2, 1.2, 0.3, 1);
  scrollbar-width: none; -ms-overflow-style: none;
}
.agenda-panel::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Ruban "mètre de couturier" en haut : graduations holographiques */
.agenda-panel::before {
  content: ""; position: sticky; top: 0; z-index: 2;
  display: block; height: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(124,58,237,0.55) 0 1px, transparent 1px 9px),
    linear-gradient(90deg, #ffd2f4, #d9c7ff 35%, #bff6ff 65%, #ffe0c2);
  box-shadow: inset 0 -1px 0 rgba(124,58,237,0.25);
}

/* Titre CHROME : dégradé métallique vertical + bande de brillance */
.agenda-panel h2 {
  margin: 18px 34px 2px;
  font-family: "Syne", sans-serif; font-weight: 800;
  font-size: 30px; letter-spacing: 0.6px;
  background: linear-gradient(180deg, #ffffff 0%, #cdb6ff 32%, #8b5cf6 52%, #b58bff 62%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.7)) drop-shadow(0 2px 3px rgba(124,58,237,0.35));
}
.agenda-panel h2::after { content: " ✦"; -webkit-text-fill-color: #c9a6fa; }
.agenda-sub {
  margin: 0 34px 4px; max-width: 42ch;
  font-size: 13.5px; line-height: 1.55; opacity: 0.78;
}

/* Le calendrier vit dans #agenda-list */
#agenda-list { padding: 12px 30px 30px; }

/* ── Barre de navigation des mois (boutons glossy biseautés) ── */
.cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 6px 0 14px;
}
.cal-label {
  flex: 1; text-align: center;
  font-family: "Syne", sans-serif; font-weight: 800;
  font-size: 17px; letter-spacing: 0.5px; text-transform: uppercase;
  color: #6b3fb0;
}
.cal-prev, .cal-next {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: "Syne", sans-serif; font-weight: 800; font-size: 16px;
  color: #6b3fb0; cursor: pointer;
  border: 1px solid rgba(168, 85, 247, 0.4);
  background: linear-gradient(180deg, #ffffff, #efe6ff 45%, #d9c7ff);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 4px rgba(124,58,237,0.18), 0 3px 6px rgba(60,30,110,0.18);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.cal-prev:hover, .cal-next:hover { filter: brightness(1.04); transform: translateY(-1px); }
.cal-prev:active, .cal-next:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(124,58,237,0.3);
}

/* ── En-têtes des jours (lun→dim) ── */
.cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  margin-bottom: 6px;
}
.cal-weekdays span {
  text-align: center;
  font-family: "Syne", sans-serif; font-weight: 700;
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #9b6cf0; opacity: 0.85;
}

/* ── La grille des jours ── */
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }

.cal-cell {
  position: relative; aspect-ratio: 1 / 1;
  display: flex; flex-direction: column;
  padding: 5px 0 0 6px;
  border-radius: 11px;
  border: 1.4px dashed rgba(168, 85, 247, 0.22);   /* couture légère sur chaque case */
  background: rgba(255, 255, 255, 0.35);
}
.cal-cell.cal-empty { border: none; background: none; }       /* débordement de mois */
.cal-num {
  font-family: var(--font-title); font-weight: 400;
  font-size: 13px; line-height: 1; color: #6f5a8e;
}

/* Aujourd'hui : anneau holographique */
.cal-cell.cal-today { box-shadow: 0 0 0 2px #ff7ad9, 0 0 10px rgba(255,122,217,0.4); }

/* Jour avec événement(s) : case "cousue" cliquable, dégradé bonbon */
.cal-cell.cal-has {
  cursor: pointer;
  border-style: dashed; border-color: rgba(124, 58, 237, 0.55);
  background: linear-gradient(160deg, #ffffff, #f3ecff 60%, #e7d9ff);
  box-shadow: inset 0 1px 0 #fff, 0 4px 10px rgba(60, 30, 110, 0.14);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.cal-cell.cal-has:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(60, 30, 110, 0.22); }
.cal-cell.cal-has .cal-num { color: #4a2a86; font-weight: 700; }

/* Perles-boutons en bas de case (une par événement, couleur selon le type) */
.cal-beads {
  margin-top: auto; display: flex; gap: 3px; padding: 0 0 5px 0;
  align-self: center;
}
.cal-bead {
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff, #c79bff 42%, #7c3aed);
  box-shadow: 0 1px 1px rgba(60,30,110,0.4), inset 0 0 0 1px rgba(255,255,255,0.5);
}
.cal-bead.cal-work {
  background: radial-gradient(circle at 32% 28%, #fff, #7df0e2 42%, #00b8a4);
  box-shadow: 0 1px 1px rgba(0,80,72,0.4), inset 0 0 0 1px rgba(255,255,255,0.5);
}
.cal-bead.cal-inspiration {
  background: radial-gradient(circle at 32% 28%, #fff, #ffd86b 42%, #f5a300);
  box-shadow: 0 1px 1px rgba(120,80,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.5);
}

/* Jour sélectionné : la case s'illumine */
.cal-cell.cal-sel {
  border-style: solid;
  background: linear-gradient(160deg, #fbf3ff, #ecdcff 60%, #dcc4ff);
  box-shadow: 0 0 0 2px #a855f7, 0 8px 18px rgba(124, 58, 247, 0.3);
}

/* ── Légende ── */
.cal-legend {
  display: flex; gap: 16px; justify-content: center;
  margin: 14px 0 2px; font-size: 11px; font-weight: 600; color: #6f5a8e;
}
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ── Panneau de détail du jour cliqué (cartes "cousues") ── */
.cal-detail { margin-top: 14px; }
.cal-detail-day {
  margin: 0 0 10px;
  font-family: "Syne", sans-serif; font-weight: 800;
  font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: #7c3aed;
}
.cal-detail-day::before { content: "✦ "; color: #c9a6fa; }
.cal-hint { margin: 8px 0 0; font-size: 13px; opacity: 0.6; text-align: center; }

.ag-item {
  padding: 14px 16px; margin-bottom: 12px;
  border-radius: 16px;
  border: 1.6px dashed rgba(168, 85, 247, 0.4);     /* couture autour de la carte */
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(60, 30, 110, 0.12);
}
.ag-item:last-child { margin-bottom: 0; }
.ag-head {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 4px;
}
.ag-when { display: flex; align-items: baseline; gap: 8px; }
.ag-day {
  font-family: "Syne", sans-serif; font-weight: 800;
  font-size: 13px; letter-spacing: 0.02em; color: #6b3fb0;
}
.ag-time { font-size: 12px; font-weight: 600; opacity: 0.6; }
.ag-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 99px;
  color: #7c3aed; background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.28);
}
.ag-work .ag-tag {
  color: #047d70; background: rgba(0, 184, 164, 0.14);
  border-color: rgba(0, 184, 164, 0.3);
}
.ag-inspiration .ag-tag {
  color: #b07400; background: rgba(245, 163, 0, 0.16);
  border-color: rgba(245, 163, 0, 0.35);
}
.ag-title {
  margin: 2px 0 4px;
  font-family: var(--font-title); font-weight: 400;
  font-size: 19px; letter-spacing: 0.2px; line-height: 1.25; color: #2a1a3e;
}
.ag-text { margin: 0; font-size: 14px; line-height: 1.6; opacity: 0.85; }
.ag-photo {
  margin-top: 12px; width: 100%; display: block;
  max-height: 38vh; object-fit: cover;
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.08);
  box-shadow: 0 10px 28px rgba(60, 30, 110, 0.18);
}
.ag-empty { margin: 0; padding: 10px 0 20px; opacity: 0.6; font-size: 14px; }

#agenda-close {
  position: absolute; top: 16px; right: 14px; z-index: 3;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(124, 58, 237, 0.28);
  background: rgba(255, 255, 255, 0.75);
  color: #2a1a3e; font-size: 14px; cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform 0.16s ease, background 0.16s ease;
}
#agenda-close:hover { transform: rotate(90deg); background: rgba(255, 255, 255, 0.95); }

/* =====================================================================
   AGENDA · COULEURS Y2K — palette bonbon arc-en-ciel
   (chaque case prend la teinte --col de sa colonne, posée en JS)
   ===================================================================== */

/* Fond du panneau : halos holographiques multicolores */
.agenda-panel {
  background:
    radial-gradient(70% 45% at 12% 2%, rgba(255, 95, 174, 0.22), transparent 60%),
    radial-gradient(70% 45% at 88% 6%, rgba(43, 198, 214, 0.22), transparent 60%),
    radial-gradient(80% 50% at 88% 96%, rgba(176, 108, 255, 0.20), transparent 60%),
    radial-gradient(80% 50% at 10% 98%, rgba(255, 203, 46, 0.18), transparent 60%),
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.95), rgba(245, 239, 255, 0.92) 55%, rgba(232, 222, 255, 0.9)),
    var(--glass-strong);
}

/* Titre : chrome holographique arc-en-ciel */
.agenda-panel h2 {
  background: linear-gradient(95deg, #ff5fae, #ff9a3f 18%, #ffcb2e 34%, #54cf7e 52%, #2bc6d6 68%, #5a8bff 84%, #b06cff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.65)) drop-shadow(0 2px 4px rgba(124, 58, 237, 0.3));
}
.agenda-panel h2::after { content: " ✦"; -webkit-text-fill-color: #ff5fae; }

/* En-têtes des jours : pastille bonbon à la couleur de sa colonne */
.cal-weekdays span {
  color: #fff; border-radius: 99px; padding: 3px 0;
  background: var(--wc, #a855f7);
  box-shadow: 0 2px 5px color-mix(in srgb, var(--wc) 45%, transparent);
}
.cal-weekdays span:nth-child(1) { --wc: #ff5fae; }
.cal-weekdays span:nth-child(2) { --wc: #ff8a2e; }
.cal-weekdays span:nth-child(3) { --wc: #f0b400; }
.cal-weekdays span:nth-child(4) { --wc: #2eb866; }
.cal-weekdays span:nth-child(5) { --wc: #18b6c6; }
.cal-weekdays span:nth-child(6) { --wc: #5a8bff; }
.cal-weekdays span:nth-child(7) { --wc: #b06cff; }

/* Toutes les cases : lavis bonbon (dégradé) de leur couleur de colonne */
.cal-cell {
  border-color: color-mix(in srgb, var(--col, #a855f7) 45%, transparent);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--col, #a855f7) 12%, #fff),
    color-mix(in srgb, var(--col, #a855f7) 22%, #fff));
}
.cal-cell.cal-empty { border: none; background: none; }   /* on garde les débordements invisibles */
.cal-num { color: color-mix(in srgb, var(--col, #6f5a8e) 62%, #2e1f48); }

/* Jour avec événement(s) : la couleur de colonne éclate (bonbon glossy) */
.cal-cell.cal-has {
  border-color: color-mix(in srgb, var(--col) 80%, transparent);
  background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--col) 46%, #fff));
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px color-mix(in srgb, var(--col) 40%, transparent);
}
.cal-cell.cal-has:hover {
  box-shadow: 0 9px 20px color-mix(in srgb, var(--col) 45%, transparent);
}
.cal-cell.cal-has .cal-num { color: color-mix(in srgb, var(--col) 75%, #2a1a3e); font-weight: 700; }

/* Jour sélectionné : anneau de SA couleur, fond éclatant */
.cal-cell.cal-sel {
  border-style: solid;
  background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--col) 48%, #fff));
  box-shadow: 0 0 0 2.5px var(--col), 0 8px 20px color-mix(in srgb, var(--col) 50%, transparent);
}

/* Aujourd'hui : anneau rose vif (contraste avec les couleurs de colonnes) */
.cal-cell.cal-today { box-shadow: 0 0 0 2px #ff3fa4, 0 0 12px rgba(255, 63, 164, 0.5); }

/* =====================================================================
   RESPONSIVE — iPhone & petits écrans tactiles
   - On respecte le notch / la barre home via env(safe-area-inset-*)
   - Cibles tactiles ≥ 44px, paddings réduits, marque raccourcie
   - Aides clavier masquées (inutiles au doigt)
   ===================================================================== */
@media (max-width: 600px) {
  /* ---- Header : on garde une seule ligne grâce à la marque courte ---- */
  #site-header {
    padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
    gap: 8px;
  }
  #site-header .brand { font-size: 17px; letter-spacing: 0.5px; }
  .brand-rest { display: none; }                 /* « - The Purple Show » caché sur mobile */
  #site-header nav { gap: 6px; }

  #site-header button, #site-footer button {
    font-size: 12px; padding: 8px 13px;           /* hauteur tactile ~36px */
  }
  /* on coupe le :hover noir collant au tactile, on garde un retour au tap */
  #site-header button:active, #site-footer button:active {
    background: #000; color: #fff;
  }

  /* ---- Footer : les 2 boutons peuvent passer à la ligne + safe-area ---- */
  #site-footer {
    flex-wrap: wrap; gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }

  /* ---- Bouton de mode : sous le header, à droite, bien tappable ---- */
  #mode-btn {
    top: calc(60px + env(safe-area-inset-top)); right: 16px;
    font-size: 12px; padding: 9px 15px;
  }

  /* ---- Barre des semaines : sous le header, à gauche (mode-btn est à droite) ---- */
  #week-bar {
    left: 16px; top: calc(104px + env(safe-area-inset-top));
    gap: 8px; max-width: 60vw;
  }
  .week-tile { padding: 16px 22px; border-radius: 20px; }
  .week-tile .week-n { font-size: 23px; }
  .week-tile .week-dates { font-size: 13px; }
  .week-tile:active { transform: scale(0.97); filter: brightness(1.06); }

  /* ---- Lecteur de newsletter : pleine largeur, fermeture en safe-area ---- */
  .week-scroll { width: 100vw; padding: 64px 10px calc(28px + env(safe-area-inset-bottom)); gap: 12px; }
  #week-close { top: calc(12px + env(safe-area-inset-top)); right: 14px; width: 44px; height: 44px; }

  /* ---- Aides clavier inutiles sur tactile ---- */
  #help, #numpad-help { display: none !important; }

  /* ---- Modale de contenu : plus de respiration, moins de padding ---- */
  #modal { padding: 14px; }
  #modal .panel { max-height: 90vh; border-radius: 24px 26px 22px 28px; }
  #modal-content { padding: 26px 20px 22px; }
  #modal h2 { font-size: 21px; }
  #modal .note { font-size: 14px; }
  #modal .gallery { grid-template-columns: 1fr 1fr; gap: 10px; }
  #modal-close { top: 12px; right: 12px; width: 44px; height: 44px; font-size: 20px; }

  /* ---- Panneau verre lilas (Contact & About) ---- */
  .nl-panel { padding: 30px 22px 22px; border-radius: 24px 26px 22px 28px; }
  .nl-panel h2 { font-size: 24px; }
  .nl-sub { font-size: 13.5px; }

  /* ---- Modale Contact ---- */
  #contact-modal { padding: 14px; }
  #ct-close { width: 30px; height: 30px; font-size: 13px; }

  /* ---- Modale About us ---- */
  #about-modal { padding: 8px; }
  .about-panel { max-width: 97vw; max-height: 94vh; border-radius: 24px 26px 22px 28px; padding: 8px; }
  .about-photo { max-height: calc(94vh - 16px); }
  #about-close { width: 34px; height: 34px; font-size: 15px; }

  /* ---- Modale Programme (galerie) ---- */
  #programme-modal { padding: 14px; }
  .programme-panel { max-height: 90vh; border-radius: 24px 26px 22px 28px; }
  .programme-panel h2 { margin: 18px 22px 4px; font-size: 24px; }
  .programme-sub { margin: 0 22px 8px; font-size: 13px; }
  .programme-gallery { padding: 6px 14px 22px; gap: 12px; }
  #programme-close { width: 34px; height: 34px; font-size: 15px; }

  /* ---- Modale Agenda (calendrier Y2K) ---- */
  #agenda-modal { padding: 14px; }
  .agenda-panel { max-height: 90vh; border-radius: 24px 26px 22px 28px; }
  .agenda-panel h2 { margin: 16px 20px 2px; font-size: 24px; }
  .agenda-sub { margin: 0 20px 4px; font-size: 13px; }
  #agenda-list { padding: 10px 16px 24px; }
  .cal-label { font-size: 15px; }
  .cal-weekdays { gap: 4px; }
  .cal-days { gap: 4px; }
  .cal-cell { border-radius: 9px; padding: 4px 0 0 5px; }
  .cal-num { font-size: 12px; }
  .cal-bead { width: 7px; height: 7px; }
  .ag-title { font-size: 18px; }
  #agenda-close { width: 34px; height: 34px; font-size: 15px; }

  /* ---- Intro / carte d'accueil ---- */
  #intro { padding: 18px; }
  #intro .card { padding: 24px 22px; border-radius: 22px; }
}

/* Très petits iPhones (SE / mini) : on resserre encore un peu */
@media (max-width: 360px) {
  #site-header .brand { font-size: 15px; }
  #site-header button, #site-footer button { font-size: 11px; padding: 7px 11px; }
}