/* Site Cécile Marx – Iconique
   Palette et typographies tirées de l'affiche : ciel rose, prune, mauve, or de l'auréole. */

/* Polices hébergées sur le site (aucun appel à Google Fonts) */
@font-face { font-family: 'Josefin Sans'; src: url('../fonts/josefin-sans.woff2') format('woff2'); font-weight: 100 700; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-italic.woff2') format('woff2'); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/dm-sans.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  --prune: #4B1D45;
  --prune-nuit: #2B0E28;
  --rose: #F1B6CF;
  --rose-doux: #F8D6E3;
  --creme: #F5ECE4;
  --ivoire: #FAF4EE;
  --rouge: #C8242F;
  --mauve: #8B4A85;
  --discret: #6B3A64;
  --blush: #E9C9DD;
  --or: #E2B44B;
  --gouttiere: clamp(20px, 4vw, 48px);
  --f-deco: 'Josefin Sans', system-ui, sans-serif;
  --f-chiffre: 'Fraunces', Georgia, serif;
  --f-titre: 'Josefin Sans', system-ui, sans-serif;
  --f-serif: 'Fraunces', Georgia, serif;
  --f-texte: 'DM Sans', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--creme); color: var(--prune); font-family: var(--f-texte); font-size: 17px; line-height: 1.6; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
:focus-visible { outline: 3px solid var(--mauve); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-evitement { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--prune); color: var(--creme); padding: 10px 16px; border-radius: 8px; }
.lien-evitement:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.enveloppe { max-width: 1280px; margin: 0 auto; }
.section { padding: clamp(72px, 9vw, 136px) var(--gouttiere); }
.pile { display: flex; flex-direction: column; gap: 14px; }
.ciel { background-color: var(--rose); background-image: radial-gradient(ellipse 60% 45% at 18% 20%, rgba(255,255,255,.55), transparent 70%), radial-gradient(ellipse 50% 40% at 85% 30%, rgba(215,180,224,.8), transparent 70%), radial-gradient(ellipse 70% 50% at 50% 100%, rgba(236,150,185,.7), transparent 70%); }
.ciel-doux { background-color: var(--rose-doux); background-image: radial-gradient(ellipse 50% 40% at 90% 10%, rgba(215,180,224,.6), transparent 70%), radial-gradient(ellipse 50% 45% at 5% 90%, rgba(255,255,255,.6), transparent 70%); }

.surtitre { font-family: var(--f-titre); font-weight: 700; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: var(--mauve); display: flex; align-items: center; gap: 8px; }
.surtitre-prune { color: var(--prune); }
.surtitre-or { color: var(--or); }
.titre { font-family: var(--f-titre); font-weight: 600; font-size: clamp(38px, 5.2vw, 76px); line-height: 1; letter-spacing: .05em; text-transform: uppercase; }
.barre { display: block; width: 40px; height: 2px; background: var(--or); margin: 10px 0; }

/* Boutons */
.rangee-boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 15px 26px 11px; border-radius: 999px; border: 1.5px solid transparent; font-family: var(--f-titre); font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .15s ease; line-height: 1.1; }
.btn:hover { transform: translateY(-2px); }
.btn .icone { margin-top: -4px; }
.btn-prune, .btn-prune:hover { background: var(--prune); color: var(--creme); }
.btn-creme, .btn-creme:hover { background: var(--creme); color: var(--prune); }
.btn-or, .btn-or:hover { background: var(--or); color: var(--prune); }
.btn-ligne, .btn-ligne:hover { background: transparent; color: var(--creme); border-color: var(--or); }
.btn-ligne-clair, .btn-ligne-clair:hover { background: transparent; color: var(--creme); border-color: var(--creme); }
.btn-contour, .btn-contour:hover { background: transparent; color: var(--prune); border-color: var(--prune); }
.btn-danger, .btn-danger:hover { background: transparent; color: var(--rouge); border-color: var(--rouge); }
.btn-petit { min-height: 40px; padding: 11px 18px 8px; font-size: 13px; }
.btn-inactif { background: transparent; color: var(--discret); border: 1.5px dashed rgba(75,29,69,.35); cursor: default; white-space: normal; text-align: center; font-size: 13px; letter-spacing: .06em; padding-inline: 14px; }
.btn-inactif:hover { transform: none; }

/* Auréole */
.aureole { width: 100%; height: 100%; fill: none; stroke: var(--or); stroke-linecap: round; }
.tourne { animation: tourne 120s linear infinite; transform-origin: 50% 50%; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* En-tête */
.nav { position: sticky; top: 0; z-index: 30; background: rgba(248,214,227,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(75,29,69,.14); }
.nav-in { max-width: 1280px; margin: 0 auto; padding: 12px var(--gouttiere); display: flex; align-items: center; gap: 28px; }
.marque { font-family: var(--f-titre); font-weight: 700; font-size: 20px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; padding-top: 4px; white-space: nowrap; }
.nav-liens { display: flex; gap: 24px; flex: 1; justify-content: center; }
.nav-liens a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-titre); font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; padding: 14px 0 10px; border-bottom: 2px solid transparent; }
.nav-liens a .icone { margin-top: -3px; }
.nav-liens a:hover, .nav-liens a[aria-current] { border-bottom-color: var(--or); }
.nav-bouton { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; border: 1.5px solid var(--prune); border-radius: 50%; background: transparent; color: var(--prune); cursor: pointer; padding: 0; }
.nav-bouton .ico-fermer { display: none; }
.nav-bouton[aria-expanded="true"] .ico-ouvrir { display: none; }
.nav-bouton[aria-expanded="true"] .ico-fermer { display: block; }

/* Hero */
.hero { position: relative; overflow: hidden; padding: clamp(32px, 4vw, 56px) var(--gouttiere) 0; }
.hero-credit { text-align: center; font-family: var(--f-titre); font-size: 15px; letter-spacing: .14em; text-transform: uppercase; }
.hero-titre { position: relative; z-index: 3; margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.hero-nom { display: flex; gap: .32em; font-family: var(--f-deco); font-weight: 700; font-size: clamp(44px, 8.4vw, 128px); line-height: 1; padding-top: .12em; letter-spacing: .06em; color: var(--prune); white-space: nowrap; text-transform: uppercase; text-shadow: .035em .035em 0 var(--creme); }
.hero-spectacle { display: flex; align-items: center; gap: .6em; font-family: var(--f-serif); font-style: italic; font-weight: 600; font-size: clamp(30px, 4.2vw, 60px); line-height: 1.1; color: var(--mauve); }
.hero-spectacle::before, .hero-spectacle::after { content: ''; width: 1.6em; height: 2px; background: var(--or); }
.hero-grille { max-width: 1280px; margin: 8px auto 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,520px) minmax(0,1fr); column-gap: clamp(24px, 4vw, 56px); align-items: end; }
.hero-texte { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 22px; padding-bottom: clamp(56px, 7vw, 104px); }
.hero-accroche { font-family: var(--f-serif); font-style: italic; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.22; }
.hero-boutons .icone { margin-top: -3px; }
.arche-col { position: relative; }
.arche { position: relative; width: 100%; aspect-ratio: 520 / 700; }
.aureole-pos { position: absolute; left: 50%; top: 34%; width: 215%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; }
.arche-img { position: absolute; inset: 0; z-index: 1; display: block; border-radius: 999px 999px 0 0; border: 3px solid var(--or); border-bottom: 0; overflow: hidden; box-shadow: 0 -20px 80px rgba(75,29,69,.25); background: var(--rose); }
.arche-img img { width: 100%; height: 100%; object-fit: cover; }
.hero-cote { position: relative; z-index: 3; display: flex; justify-content: flex-end; padding-bottom: clamp(56px, 7vw, 104px); }
.prochaine { width: 100%; max-width: 280px; background: var(--creme); border: 2px solid var(--or); border-radius: 999px 999px 20px 20px; padding: 48px 24px 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; box-shadow: 0 24px 50px -24px rgba(75,29,69,.5); }
.prochaine .surtitre { justify-content: center; }
.prochaine-num { font-family: var(--f-chiffre); font-weight: 600; font-size: clamp(64px, 6vw, 88px); line-height: 1.05; }
.prochaine-mois { font-family: var(--f-titre); font-weight: 600; font-size: 18px; letter-spacing: .14em; text-transform: uppercase; }
.prochaine-ville { font-weight: 700; font-size: 18px; }
.prochaine-salle { font-size: 15px; color: var(--discret); }
.prochaine .btn { align-self: stretch; margin-top: 14px; }

/* Bandeau défilant */
.bandeau { position: relative; z-index: 4; margin-top: -16px; overflow-x: clip; }
.bandeau-inner { background: var(--prune); color: var(--rose-doux); transform: rotate(-1.2deg) scale(1.04); border-top: 2px solid var(--or); border-bottom: 2px solid var(--or); overflow: hidden; }
.bandeau-piste { display: flex; width: max-content; white-space: nowrap; font-family: var(--f-titre); font-weight: 700; font-size: clamp(20px, 2.2vw, 30px); letter-spacing: .14em; text-transform: uppercase; padding: 18px 0 13px; animation: defile 38s linear infinite; }
.bandeau-piste span { padding-right: 40px; }
.bandeau-piste i { font-style: normal; color: var(--or); padding: 0 .35em; }
@keyframes defile { to { transform: translateX(-50%); } }

/* Le spectacle (variante « autel ») */
.spectacle { position: relative; overflow: hidden; text-align: center; }
.spectacle-aureole { position: absolute; left: 50%; top: clamp(250px, 20vw, 330px); width: min(1000px, 150vw); aspect-ratio: 1; transform: translate(-50%, -50%); opacity: .32; pointer-events: none; }
.spectacle-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(32px, 4vw, 52px); }
.spectacle-in .surtitre { justify-content: center; }
.citation-grande { max-width: 14em; margin: 0 auto; font-family: var(--f-serif); font-style: italic; font-size: clamp(40px, 5.4vw, 78px); line-height: 1.06; letter-spacing: -.01em; }
.citation-grande b { font-weight: 600; color: var(--mauve); }
.spectacle-texte { max-width: 1040px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px; text-align: left; font-size: 17px; line-height: 1.65; }
.spectacle-texte p:first-child::first-letter { font-family: var(--f-serif); font-weight: 600; font-size: 3.4em; float: left; line-height: .85; padding: 6px 8px 0 0; color: var(--mauve); }
.fiche { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.fiche li { display: inline-flex; gap: 10px; align-items: baseline; padding: 12px 20px 9px; border: 1.5px solid var(--or); border-radius: 999px; background: var(--ivoire); font-family: var(--f-serif); font-size: 18px; }
.fiche span { font-family: var(--f-titre); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--discret); }

/* Agenda */
.tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.compte { font-family: var(--f-serif); font-style: italic; font-size: 22px; }
.filtres { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.filtre { font-family: var(--f-titre); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; padding: 14px 20px 10px; min-height: 44px; border-radius: 999px; cursor: pointer; background: var(--creme); color: var(--prune); border: 1.5px solid rgba(75,29,69,.35); white-space: nowrap; }
.filtre[aria-pressed="true"] { background: var(--prune); color: var(--creme); border-color: var(--prune); }
.dates { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 24px; }
.date { background: var(--creme); border: 2px solid var(--or); border-radius: 999px 999px 20px 20px; padding: clamp(40px, 4vw, 56px) 22px 22px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; box-shadow: 0 24px 40px -28px rgba(75,29,69,.6); }
.date[hidden] { display: none; }
.d-quand { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.d-jour { font-family: var(--f-titre); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--mauve); }
.d-num { font-family: var(--f-chiffre); font-weight: 600; font-size: clamp(64px, 6vw, 92px); line-height: 1.05; font-variant-numeric: lining-nums; }
.d-num-plage { font-size: clamp(44px, 3.8vw, 58px); padding: 14px 0; }
.d-mois { font-family: var(--f-titre); font-weight: 600; font-size: 17px; letter-spacing: .14em; text-transform: uppercase; }
.d-infos { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.d-infos .barre { margin: 0 0 10px; }
.d-ville { font-family: var(--f-serif); font-weight: 600; font-size: 25px; line-height: 1.15; }
.d-salle { font-size: 15px; color: var(--discret); }
.d-heure { font-size: 16px; font-weight: 700; margin-top: 2px; }
.pastille { margin-top: 6px; font-family: var(--f-titre); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; background: var(--mauve); color: var(--ivoire); padding: 6px 12px 3px; border-radius: 999px; }
.date .btn { align-self: stretch; }
.dates-vide { margin-top: 32px; font-family: var(--f-serif); font-style: italic; font-size: 24px; }
.agenda-plus { margin-top: 40px; text-align: center; font-size: 17px; }
.agenda-plus a { font-weight: 700; }

/* Vidéos */
.videos { position: relative; overflow: hidden; background: var(--prune-nuit); color: var(--creme); }
.videos-aureole { position: absolute; left: 50%; top: clamp(360px, 34vw, 520px); width: max(1000px, 105vw); aspect-ratio: 1; transform: translate(-50%, -50%); opacity: .32; pointer-events: none; }
.videos-in { position: relative; }
.videos-tete { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.videos-tete .surtitre { color: var(--or); }
.lecteur { position: relative; display: block; width: 100%; max-width: 1000px; margin: clamp(28px, 3.4vw, 44px) auto 0; aspect-ratio: 16 / 9; border: 3px solid var(--or); border-radius: clamp(12px, 1.5vw, 20px); overflow: hidden; text-decoration: none; color: var(--creme); background: var(--prune); box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
.lecteur-img, .lecteur iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.lecteur-voile { position: absolute; inset: 0; background: linear-gradient(to top, rgba(43,14,40,.88), rgba(43,14,40,.25) 60%, rgba(43,14,40,.1)); }
.lecteur-play { position: absolute; left: 50%; top: 50%; width: clamp(68px, 9vw, 120px); height: clamp(68px, 9vw, 120px); transform: translate(-50%, -50%); border-radius: 50%; background: var(--or); color: var(--prune); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 clamp(8px, 1vw, 14px) rgba(226,180,75,.25); transition: transform .2s ease; }
.lecteur-play .icone { width: 36%; height: 36%; margin-left: 6%; }
.lecteur:hover .lecteur-play { transform: translate(-50%, -50%) scale(1.06); }
.lecteur-legende { position: absolute; left: clamp(16px, 2.4vw, 32px); right: clamp(16px, 2.4vw, 32px); bottom: clamp(14px, 2vw, 28px); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; }
.lecteur-titre { font-family: var(--f-titre); font-weight: 700; font-size: clamp(15px, 1.6vw, 20px); letter-spacing: .12em; text-transform: uppercase; }
.lecteur-note { font-size: 14px; color: var(--blush); }
.lecteur.joue .lecteur-img, .lecteur.joue .lecteur-voile, .lecteur.joue .lecteur-play, .lecteur.joue .lecteur-legende { display: none; }
.reseaux { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 32px; align-items: end; margin-top: clamp(72px, 8vw, 112px); }
.reseaux-texte { grid-column: span 4; display: flex; flex-direction: column; gap: 20px; padding-bottom: 12px; }
.reseaux-texte p { font-size: 17px; line-height: 1.6; color: var(--blush); }
.reseaux-titre { font-family: var(--f-serif); font-style: italic; font-size: clamp(34px, 3.2vw, 46px); line-height: 1.08; }
.reseaux-titre span { color: var(--or); }
.reels { grid-column: 6 / span 7; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; align-items: end; }
.reels li:nth-child(even) { transform: translateY(-40px); }
.reel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; aspect-ratio: 9 / 16; border: 2px solid var(--or); border-radius: 999px 999px 14px 14px; overflow: hidden; background: var(--prune); background-image: radial-gradient(ellipse 80% 50% at 50% 20%, rgba(241,182,207,.35), transparent 70%); padding: 16px 12px 18px; text-decoration: none; color: var(--creme); transition: transform .2s ease; }
.reel:hover { transform: translateY(-4px); }
.reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(43,14,40,.8), transparent 45%); }
.reel-play { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--or); display: flex; align-items: center; justify-content: center; margin: 45% 0 auto; color: var(--rose-doux); }
.reel-media .reel-play { background: rgba(43,14,40,.45); }
.reel-legende { position: relative; z-index: 1; font-family: var(--f-titre); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--blush); text-align: center; }

/* Portrait */
.bio { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 32px; align-items: center; }
.bio-photo { grid-column: span 5; position: relative; aspect-ratio: 4 / 5; }
.bio-cadre { position: absolute; inset: 0; transform: translate(24px, 24px); border: 2px solid var(--or); border-radius: 999px 999px 16px 16px; }
.bio-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px 16px 16px; }
.bio-texte { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 22px; }
.bio-accroche { font-family: var(--f-serif); font-style: italic; font-size: clamp(23px, 2vw, 28px); line-height: 1.3; }
.bio-corps { font-size: 18px; line-height: 1.7; }

/* Avis */
.note { display: flex; flex-direction: column; align-items: flex-end; }
.note-valeur { font-family: var(--f-chiffre); font-weight: 600; font-size: clamp(56px, 6vw, 88px); line-height: 1.05; color: var(--prune); }
.note-source { font-family: var(--f-titre); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.avis { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px 48px; margin-top: clamp(40px, 5vw, 64px); }
.exvoto { margin: 0; background: var(--creme); border: 2px solid var(--or); outline: 1px solid var(--or); outline-offset: -10px; border-radius: 6px; padding: clamp(28px, 3.2vw, 44px); display: flex; flex-direction: column; gap: 18px; box-shadow: 0 30px 50px -30px rgba(75,29,69,.55); transform: rotate(-1.2deg); }
.exvoto .icone { color: var(--mauve); }
.exvoto:nth-child(even) { transform: rotate(1.1deg); margin-top: 48px; }
.exvoto:nth-child(4n+3) { transform: rotate(.8deg); }
.exvoto blockquote { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.42; }
.exvoto figcaption { font-family: var(--f-titre); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--discret); }

/* Pro + newsletter */
.pro { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 32px; }
.pro-carte { grid-column: span 7; background: var(--prune); color: var(--creme); border-radius: 24px; padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; gap: 24px; }
.pro-titre { font-family: var(--f-titre); font-weight: 600; font-size: clamp(36px, 3.9vw, 56px); line-height: 1.02; letter-spacing: .05em; text-transform: uppercase; }
.pro-titre em { font-family: var(--f-serif); text-transform: none; letter-spacing: 0; }
.pro-texte { font-size: 17px; line-height: 1.6; color: var(--blush); }
.pro-contact { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; padding: 22px 0; border-top: 1px solid rgba(226,180,75,.5); border-bottom: 1px solid rgba(226,180,75,.5); }
.pro-contact div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pro-contact a { overflow-wrap: anywhere; }
.pro-cle { font-family: var(--f-titre); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--or); }
.lettre { grid-column: span 5; border: 2px solid var(--or); border-radius: 999px 999px 24px 24px; padding: clamp(84px, 7vw, 104px) clamp(24px, 3.4vw, 48px) clamp(28px, 3.4vw, 48px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.lettre .surtitre { justify-content: center; }
.lettre-titre { font-family: var(--f-serif); font-style: italic; font-size: clamp(34px, 3.1vw, 44px); line-height: 1.08; }
.lettre .btn { margin-top: 8px; }

/* Pied de page */
.pied { background: var(--prune-nuit); color: var(--creme); padding: clamp(56px, 6vw, 88px) var(--gouttiere) 36px; }
.pied-haut { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; }
.pied-nom { font-weight: 700; letter-spacing: .06em; font-family: var(--f-deco); font-size: clamp(40px, 5.6vw, 80px); line-height: 1.08; text-transform: uppercase; }
.pied-sous { margin-top: 8px; font-family: var(--f-titre); font-weight: 600; font-size: 16px; letter-spacing: .16em; text-transform: uppercase; color: var(--or); }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 24px; margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(226,180,75,.4); font-size: 14px; color: var(--blush); }
.pied-bas nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* ---------- Tablette ---------- */
@media (max-width: 1100px) {
  .spectacle-texte { grid-template-columns: minmax(0,1fr); max-width: 680px; gap: 16px; }
  .nav-liens { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--rose-doux); padding: 8px var(--gouttiere) 24px; border-bottom: 1px solid rgba(75,29,69,.14); box-shadow: 0 20px 30px -20px rgba(75,29,69,.4); }
  .nav-liens.ouverte { display: flex; }
  .nav-liens a { font-size: 20px; padding: 16px 0 12px; border-bottom: 1px solid rgba(75,29,69,.12); }
  .nav-cta { margin-left: auto; }
  .nav-bouton { display: inline-flex; }
  .hero-grille { grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-areas: "arche arche" "texte cote"; row-gap: 48px; margin-top: 20px; }
  .arche-col { grid-area: arche; width: min(460px, 70vw); justify-self: center; }
  .arche-img { border-bottom: 3px solid var(--or); border-radius: 999px 999px 24px 24px; }
  .hero-texte { grid-area: texte; padding-bottom: 88px; }
  .hero-cote { grid-area: cote; padding-bottom: 88px; }
  .reseaux-texte { grid-column: 1 / -1; padding-bottom: 0; margin-bottom: 64px; max-width: 620px; }
  .reels { grid-column: 1 / -1; }
  .bio-photo { grid-column: 1 / -1; width: min(420px, 66vw); justify-self: center; margin-bottom: 72px; }
  .bio-texte { grid-column: 1 / -1; max-width: 760px; justify-self: center; }
  .pro-carte, .lettre { grid-column: 1 / -1; }
  .lettre { border-radius: 220px 220px 24px 24px; padding-top: 96px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav-cta { display: none; }
  .nav-bouton { margin-left: auto; }
  .marque { font-size: 17px; }
  .hero-nom { flex-direction: column; align-items: center; gap: .08em; font-size: 15vw; line-height: 1; }
  .hero-spectacle { font-size: 9vw; }
  .hero-grille { grid-template-columns: minmax(0,1fr); grid-template-areas: "arche" "texte" "cote"; row-gap: 36px; }
  .arche-col { width: 100%; }
  .aureole-pos { width: 190%; }
  .hero-texte { padding-bottom: 0; align-items: center; text-align: center; }
  .hero-boutons { justify-content: center; }
  .hero-boutons .btn { flex: 1 1 auto; }
  .hero-cote { padding-bottom: 80px; justify-content: center; }
  .prochaine { max-width: none; border-radius: 180px 180px 20px 20px; }
  .filtres { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gouttiere)); padding: 0 var(--gouttiere) 6px; scrollbar-width: none; }
  .filtres::-webkit-scrollbar { display: none; }
  .dates { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .date { display: grid; grid-template-columns: 96px minmax(0,1fr); grid-template-areas: "quand infos" "btn btn"; column-gap: 18px; row-gap: 16px; align-items: center; text-align: left; border-radius: 20px; padding: 16px; }
  .d-quand { grid-area: quand; background: var(--rose-doux); border-radius: 999px 999px 12px 12px; padding: 22px 4px 12px; text-align: center; }
  .d-num { font-size: 40px; }
  .d-num-plage { font-size: 24px; padding: 10px 0; }
  .d-mois { font-size: 12px; letter-spacing: .1em; }
  .d-jour { font-size: 10px; letter-spacing: .1em; }
  .d-infos { grid-area: infos; align-items: flex-start; }
  .d-infos .barre { display: none; }
  .d-ville { font-size: 22px; }
  .date .btn { grid-area: btn; }
  .reels { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-inline: calc(-1 * var(--gouttiere)); padding: 0 var(--gouttiere) 8px; scrollbar-width: none; }
  .reels::-webkit-scrollbar { display: none; }
  .reels li { flex: 0 0 56%; scroll-snap-align: start; }
  .reels li:nth-child(even) { transform: none; }
  .bio-photo { width: calc(100% - 24px); justify-self: start; margin-bottom: 64px; }
  .note { align-items: flex-start; }
  .avis { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .exvoto, .exvoto:nth-child(n) { margin-top: 0; transform: rotate(-.6deg); }
  .exvoto:nth-child(even) { transform: rotate(.6deg); }
  .pro-contact { grid-template-columns: minmax(0,1fr); }
  .pro-carte .btn, .lettre .btn { flex: 1 1 auto; }
  .lettre { border-radius: 999px 999px 24px 24px; padding-top: 84px; }
  .pied-nom { font-size: 12vw; }
  .pied-haut { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .tourne, .bandeau-piste { animation: none; }
  .btn, .reel, .lecteur-play { transition: none; }
}

/* ---------- Pages internes : espace pro, administration, mentions ---------- */
.page { padding: clamp(40px, 6vw, 80px) var(--gouttiere) 72px; }
.page-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 32px; }
.page-titre { font-family: var(--f-titre); font-weight: 600; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.02; letter-spacing: .04em; text-transform: uppercase; }
.texte-doux { color: var(--discret); }
.contenu-texte { max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
.contenu-texte h2 { font-family: var(--f-titre); font-weight: 600; font-size: 24px; letter-spacing: .04em; text-transform: uppercase; margin-top: 24px; }

.carte-connexion { max-width: 520px; margin: clamp(40px, 8vw, 96px) auto; background: var(--creme); border: 2px solid var(--or); border-radius: 260px 260px 24px 24px; padding: 96px clamp(24px, 5vw, 48px) 40px; display: flex; flex-direction: column; gap: 16px; text-align: center; box-shadow: 0 30px 60px -30px rgba(75,29,69,.5); }
.carte-connexion .surtitre { justify-content: center; }
.carte-connexion h1 { font-family: var(--f-titre); font-weight: 600; font-size: 40px; letter-spacing: .06em; text-transform: uppercase; }
.carte-connexion form { text-align: left; display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.carte-connexion .aide-bas { margin-top: 10px; padding-top: 18px; border-top: 1px solid rgba(75,29,69,.2); font-size: 15px; }

.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label { font-family: var(--f-titre); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.champ input[type="text"], .champ input[type="email"], .champ input[type="url"], .champ input[type="password"], .champ input:not([type]), .champ textarea { font: inherit; font-size: 16px; padding: 12px 16px; min-height: 48px; border: 1.5px solid rgba(75,29,69,.45); border-radius: 12px; background: var(--ivoire); color: var(--prune); width: 100%; }
.champ textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.champ input[type="file"] { font: inherit; font-size: 14px; color: var(--discret); max-width: 100%; }
.aide { font-size: 14px; color: var(--discret); }
.message { padding: 14px 18px; border-radius: 12px; font-weight: 500; margin-bottom: 12px; }
.message.ok { background: #E4F3E6; color: #1E5A2A; border: 1px solid #9ACDA4; }
.message.erreur { background: #FBE3E4; color: #8A1720; border: 1px solid #E7A1A6; }
.statut { display: inline-block; font-family: var(--f-titre); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px 2px; border-radius: 999px; }
.statut.ok { background: #E4F3E6; color: #1E5A2A; }
.statut.ko { background: #FBE3E4; color: #8A1720; }

.rubrique { padding: 32px 0; border-top: 1px solid rgba(226,180,75,.6); }
.rubrique-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 20px; margin-bottom: 18px; }
.rubrique-titre { font-family: var(--f-titre); font-weight: 600; font-size: 24px; letter-spacing: .04em; text-transform: uppercase; }
.etiquette { font-size: 14px; color: var(--discret); }
.fichiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.fichier { background: var(--ivoire); border: 1.5px solid rgba(226,180,75,.8); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.fichier-apercu { aspect-ratio: 4 / 3; background: var(--rose-doux); display: flex; align-items: center; justify-content: center; color: var(--prune); }
.fichier-apercu img { width: 100%; height: 100%; object-fit: cover; }
.fichier-corps { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.fichier-nom { font-weight: 700; overflow-wrap: anywhere; }
.fichier-meta { font-size: 14px; color: var(--discret); margin-bottom: 8px; }
.fichier-corps .btn { margin-top: auto; }

.admin-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.admin-nav a { font-family: var(--f-titre); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; padding: 10px 14px 7px; border-radius: 999px; background: var(--rose-doux); }
.admin-section { padding: 36px 0; border-top: 1px solid rgba(226,180,75,.7); }
.admin-section > h2 { font-family: var(--f-titre); font-weight: 600; font-size: 28px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 8px; }
.admin-section > .texte-doux { max-width: 780px; margin-bottom: 18px; }
.panneau { background: var(--ivoire); border: 1.5px solid rgba(226,180,75,.8); border-radius: 18px; padding: clamp(18px, 3vw, 28px); }
.grille-champs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 24px; }
.grille-champs .large { grid-column: 1 / -1; }
.admin-table { width: 100%; border-collapse: collapse; background: var(--ivoire); border-radius: 12px; overflow: hidden; }
.admin-table th, .admin-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid rgba(75,29,69,.1); vertical-align: middle; }
.admin-table th { font-family: var(--f-titre); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; background: var(--rose-doux); }
.bloc-repete { border: 1px dashed rgba(75,29,69,.3); border-radius: 14px; padding: 16px; display: grid; gap: 14px; }
.bloc-repete + .bloc-repete { margin-top: 14px; }
.bloc-repete-titre { font-family: var(--f-titre); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--mauve); }
.reel-admin { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 18px; align-items: start; }
.reel-apercu { aspect-ratio: 9 / 16; border-radius: 55px 55px 10px 10px; border: 2px solid var(--or); background: var(--prune); overflow: hidden; }
.reel-apercu img, .reel-apercu video { width: 100%; height: 100%; object-fit: cover; }
.case { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.case input { width: 18px; height: 18px; accent-color: var(--prune); }
@media (max-width: 760px) {
  .grille-champs { grid-template-columns: minmax(0,1fr); }
  .masquer-mobile { display: none; }
  .reel-admin { grid-template-columns: 80px minmax(0,1fr); }
}