/* Ambiance « Marché indien » : franc, saturé, joyeux. */
@import url("https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,600;0,700;1,400&family=Rozha+One&display=swap");

:root {
  --fond: #FFF8EC;
  --fond-creme: #FBEBD0;
  --carte: #FFFDF8;
  --texte: #2B1B17;
  --texte-doux: #6A4B40;
  --ligne: #EBD8BB;

  --safran: #F2A12B;
  --rose: #C2306A;
  --vert: #3F7A2F;
  --terre: #A8431D;
  --turquoise: #127873;
  --indigo: #2E3A87;

  --lien: var(--rose);
  --rayon: 1.25rem;
  --rayon-petit: .75rem;
  --ombre: 0 1px 2px rgba(43, 27, 23, .06), 0 6px 18px rgba(43, 27, 23, .07);

  --police-titre: "Rozha One", Georgia, serif;
  --police-texte: "Karla", system-ui, sans-serif;
}

/* Couleurs par numéro de thème : le HTML ne connaît que le numéro. */
.couleur-1 { --c: var(--safran);    --c-encre: var(--texte); }
.couleur-2 { --c: var(--rose);      --c-encre: #fff; }
.couleur-3 { --c: var(--vert);      --c-encre: #fff; }
.couleur-4 { --c: var(--terre);     --c-encre: #fff; }
.couleur-5 { --c: var(--turquoise); --c-encre: #fff; }
.couleur-6 { --c: var(--indigo);    --c-encre: #fff; }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 1.125rem;
  line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lien); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .14em; }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 {
  font-family: var(--police-titre);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.3rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }

.conteneur { width: min(100% - 2rem, 70rem); margin-inline: auto; }
.section { padding-block: 2.5rem; }
.chapo { font-size: 1.25rem; color: var(--texte-doux); }
.vide { color: var(--texte-doux); font-style: italic; }
.lien-suite { margin-top: 1.25rem; font-weight: 600; }
.lien-suite a::after { content: " →"; }

.lien-evitement {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--indigo); color: #fff; padding: .5rem 1rem; border-radius: var(--rayon-petit);
  z-index: 10;
}
.lien-evitement:focus { top: 1rem; }

/* Bandeau de couleurs, propre à cette ambiance */
.bandeau-couleurs { display: flex; height: .55rem; }
.bandeau-couleurs span { flex: 1; }
.bandeau-couleurs span:nth-child(1) { background: var(--safran); }
.bandeau-couleurs span:nth-child(2) { background: var(--rose); }
.bandeau-couleurs span:nth-child(3) { background: var(--vert); }
.bandeau-couleurs span:nth-child(4) { background: var(--terre); }
.bandeau-couleurs span:nth-child(5) { background: var(--turquoise); }
.bandeau-couleurs span:nth-child(6) { background: var(--indigo); }

/* Logo pompon-lotus */
.logo { display: block; }
.logo .t0 { fill: var(--safran); }
.logo .t1 { fill: var(--rose); }
.logo .t2 { fill: var(--indigo); }
.logo .coeur { fill: var(--fond); }

/* En-tête */
.entete { border-bottom: 1px solid var(--ligne); }
.entete-interieur {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 1.5rem; padding-block: .9rem;
}
.marque { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--texte); }
.marque .logo { width: 3rem; height: 3rem; transition: transform .6s ease; }
.marque:hover .logo { transform: rotate(30deg); }
.marque-nom { font-family: var(--police-titre); font-size: 1.6rem; line-height: 1; }
.navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.navigation a {
  display: block; padding: .35rem .85rem; border-radius: 999px;
  color: var(--texte); text-decoration: none; font-weight: 600; font-size: 1rem;
}
.navigation a:hover { background: var(--fond-creme); }
.navigation a[aria-current="page"] { background: var(--indigo); color: #fff; }

/* Accueil */
.accueil {
  display: grid; gap: 2rem 3rem; align-items: center;
  margin-top: 1.5rem; padding: clamp(1.75rem, 5vw, 3.5rem);
  background: var(--safran); color: var(--texte);
  border-radius: 2rem;
}
@media (min-width: 50rem) {
  .accueil { grid-template-columns: 1fr auto; }
}
.accueil h1 { font-size: clamp(3rem, 9vw, 5.6rem); line-height: 1.05; margin-bottom: .4em; }
.accueil .surtitre { opacity: 1; letter-spacing: .14em; }
.accueil-origine { font-size: 1.2rem; font-weight: 600; max-width: 34rem; }
.accueil-presentation { max-width: 34rem; }
.accueil .boutons { margin-top: 1.5rem; }
.accueil-photo { justify-self: center; }
.accueil-photo img,
.accueil-photo-vide {
  width: min(17rem, 62vw); aspect-ratio: 1; object-fit: cover;
  border-radius: 50%;
  border: .7rem solid var(--rose);
  box-shadow: 0 0 0 .7rem var(--indigo);
  margin: .7rem;
}
.accueil-photo-vide {
  display: grid; place-items: center; padding: 1rem; text-align: center;
  background: #FAD58E; font-weight: 700;
}

.titre-section { font-size: clamp(2.2rem, 5vw, 3rem); margin-bottom: .2em; }
.titre-section + .chapo { max-width: 32rem; margin-bottom: 1.75rem; }

/* Cartes thèmes : pleines, couleur du thème */
.grille-themes {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
@media (min-width: 60rem) { .grille-themes { grid-template-columns: repeat(3, 1fr); } }
.carte-theme {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 12rem; padding: 1.6rem 1.75rem;
  background: var(--c); color: var(--c-encre);
  border-radius: 1.75rem;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.carte-theme:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: var(--ombre); }
.carte-theme h3 { font-size: 1.75rem; margin: 0 0 .6rem; position: relative; }
.carte-theme p { font-size: 1rem; margin: 0 0 1.25rem; position: relative; }
.carte-theme-entrer { margin-top: auto; font-weight: 700; font-size: 1rem; position: relative; }
/* Dernière carte : tout le reste, vers l’index des tags */
.carte-theme-reste {
  background: transparent; color: var(--texte);
  border: 3px dashed var(--texte);
  justify-content: center;
}
.carte-theme-reste .carte-theme-entrer { margin-top: 0; color: var(--indigo); text-decoration: underline; }
.carte-theme-reste:hover { background: var(--fond-creme); }
.carte-theme-image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .25;
}

/* Bandeau Radio Pompon */
.radio-bandeau { background: var(--indigo); color: #fff; margin-block: 2rem; }
.radio-bandeau-interieur {
  display: grid; align-items: center;
  gap: 2rem 3rem; padding-block: clamp(2.5rem, 7vw, 5rem);
}
@media (min-width: 54rem) { .radio-bandeau-interieur { grid-template-columns: 1fr 1fr; } }
.radio-bandeau h2 { font-size: clamp(2.6rem, 6vw, 3.6rem); margin-bottom: .3em; }
.radio-bandeau-texte p { max-width: 26rem; }
.pastille-antenne {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .2rem .8rem; border-radius: 999px; background: var(--rose);
  font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.pastille-antenne::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor;
  animation: antenne 1.6s ease-in-out infinite;
}
@keyframes antenne { 50% { opacity: .3; } }
.lien-safran { color: var(--safran); font-weight: 700; }

.radio-carte {
  background: var(--fond); color: var(--texte);
  border-radius: 1.75rem; padding: clamp(1.25rem, 4vw, 2rem);
}
.radio-carte .surtitre { color: var(--terre); }
.radio-carte-titre { font-family: var(--police-titre); font-size: 1.75rem; line-height: 1.15; margin: .3rem 0 .2rem; }
.radio-carte-artiste { margin: 0 0 1rem; }
.radio-carte-dedicace {
  margin: 0; padding: 1rem 1.25rem; border-radius: var(--rayon);
  background: #FAD58E;
}
.radio-carte-dedicace p { margin: 0 0 .4em; }
.radio-carte-dedicace p::before { content: "« "; }
.radio-carte-dedicace p::after { content: " »"; }
.radio-carte-dedicace footer { font-weight: 700; font-size: .95rem; }
.radio-carte .radio-commandes { margin-top: 1.25rem; }
.radio-carte .rond { border-color: var(--texte); color: var(--texte); }
.radio-carte .rond:hover { background: var(--fond-creme); }
.radio-carte .rond-grand { background: var(--rose); border-color: var(--rose); color: #fff; }
.radio-carte .rond-grand:hover { background: #D2457D; }

.boutons { display: flex; flex-wrap: wrap; gap: .75rem; }
.bouton {
  display: inline-block; padding: .65rem 1.4rem; border-radius: 999px;
  font-weight: 700; text-decoration: none;
}
.bouton-plein { background: var(--safran); color: var(--texte); }
.bouton-plein:hover { background: #F7B551; }
.bouton-contour { border: 2px solid currentColor; color: inherit; }
.bouton-contour:hover { background: rgba(255, 255, 255, .12); }
.bouton-sombre { background: var(--texte); color: var(--fond); }
.bouton-sombre:hover { background: #46302A; }
.bouton-clair { background: var(--fond); color: var(--texte); }
.bouton-clair:hover { background: #fff; }

/* Encarts */
.duo { display: grid; gap: 1rem; }
@media (min-width: 46rem) { .duo { grid-template-columns: 1fr 1fr; } }
.encart {
  display: block; padding: 1.75rem; border-radius: var(--rayon);
  background: var(--c); color: var(--c-encre); text-decoration: none;
}
.encart p { margin: 0; }
.encart h3 { font-size: 1.75rem; }
.encart .bouton { margin-top: 1.25rem; }
a.encart { transition: transform .18s ease; }
a.encart:hover { transform: translateY(-3px); }
.encart-clair { background: var(--fond-creme); color: var(--texte); border: 2px dashed var(--terre); }

/* En-tête de page de tag ou de thème */
.tag-entete { padding-block: 2.5rem 1.5rem; }
.tag-entete-plein {
  background: var(--c); color: var(--c-encre);
  border-radius: 0 0 2.5rem 2.5rem;
  padding-block: 3rem 2.5rem;
}
.tag-entete h1 { margin: 0; }
.tag-entete .chapo { margin: .75rem 0 0; }
.tag-entete-plein .chapo { color: inherit; }
.surtitre { text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; font-weight: 700; margin: 0 0 .25rem; opacity: .85; }

.intro-theme { display: grid; gap: 2rem; padding-block: 2.5rem 1rem; align-items: start; }
@media (min-width: 46rem) { .intro-theme:has(.intro-theme-image) { grid-template-columns: 16rem 1fr; } }
.intro-theme-image { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.intro-theme-texte { max-width: 42rem; font-size: 1.25rem; }
.signature { color: var(--texte-doux); font-style: italic; }

/* Grilles de contenus */
.grille {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.carte {
  background: var(--carte); border: 1px solid var(--ligne);
  border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre);
}
.carte-corps { padding: 1rem 1.2rem 1.2rem; }
.carte h3 { font-size: 1.25rem; margin-bottom: .25rem; }
.carte h3 a { color: var(--texte); text-decoration: none; }
.carte h3 a:hover { color: var(--lien); }
.carte-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.meta { color: var(--texte-doux); font-size: .95rem; margin: 0; }
.extrait { font-size: 1rem; margin-bottom: .5rem; }
.carte-texte { border-top: .4rem solid var(--safran); }
.carte-video { border-top: .4rem solid var(--turquoise); }
.carte-morceau { border-top: .4rem solid var(--indigo); }

.dedicace {
  margin: .75rem 0 0; padding: .1rem 0 .1rem 1rem;
  border-left: .25rem solid var(--rose); font-style: italic;
}
.dedicace p { margin: 0 0 .4em; }
.dedicace footer { font-style: normal; font-weight: 600; font-size: .95rem; }

.badge-exemple {
  display: inline-block; margin-bottom: .4rem;
  padding: .1rem .55rem; border-radius: 999px;
  background: var(--texte); color: var(--fond);
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

/* Tags */
.etiquettes { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.etiquette {
  display: inline-block; padding: .25rem .8rem; border-radius: 999px;
  border: 2px solid var(--texte); color: var(--texte); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.etiquette:hover { background: var(--fond-creme); }
.etiquette-theme { background: var(--c); border-color: var(--c); color: var(--c-encre); }
.etiquette-theme:hover { background: var(--c); filter: brightness(1.08); }
.etiquette .compte { opacity: .7; font-weight: 400; margin-left: .2rem; }
.etiquettes-index .etiquette { font-size: 1.05rem; }

/* Fiches (photo, vidéo, texte) */
.fiche { padding-block: 2.5rem; max-width: 56rem; }
.fiche-lecture { max-width: 42rem; }
.fiche-photo { margin: 0 0 1.5rem; }
.fiche-photo img { border-radius: var(--rayon); width: 100%; }
.fiche-photo figcaption, .fiche-legende { color: var(--texte-doux); margin-top: .6rem; }
.fiche-meta { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 0 0 1.5rem; }
.fiche-meta dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--terre); }
.fiche-meta dd { margin: 0; }
.fiche-texte { font-size: 1.15rem; }

/* Formulaires (page Contribuer) */
.formulaire { margin-top: 1.5rem; }
.champ { display: block; margin: 0 0 1.25rem; padding: 0; border: 0; }
.champ > label, .champ legend { display: block; font-weight: 700; margin-bottom: .35rem; padding: 0; }
.facultatif { font-weight: 400; color: var(--texte-doux); font-size: .95rem; }
.formulaire input:not([type=checkbox]):not([type=radio]), .formulaire textarea {
  display: block; width: 100%; padding: .6rem .8rem;
  font: inherit; color: var(--texte); background: var(--carte);
  border: 2px solid var(--ligne); border-radius: var(--rayon-petit);
}
.formulaire input:focus, .formulaire textarea:focus { border-color: var(--indigo); }
.formulaire textarea { resize: vertical; min-height: 8rem; }
.cases { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.case { display: flex; align-items: baseline; gap: .5rem; cursor: pointer; }
.case input { accent-color: var(--rose); width: 1.1rem; height: 1.1rem; flex: none; }
.aide { color: var(--texte-doux); font-size: .95rem; margin: .35rem 0 0; }
.formulaire button { border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.formulaire button:disabled { opacity: .6; cursor: progress; }
.statut { font-weight: 700; color: var(--vert); }
.statut:empty { display: none; }
.pot-de-miel { position: absolute; left: -9999px; }

/* Écran vidéo 16/9 */
.ecran {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  border-radius: var(--rayon); overflow: hidden; background: #1C1530;
}
.ecran iframe, .ecran #radio-video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ecran-attente {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-items: center;
  color: #fff; font-size: 1.2rem;
  background: repeating-linear-gradient(45deg, #2E3A87, #2E3A87 18px, #283377 18px, #283377 36px);
}
.ecran-attente[hidden] { display: none; }

/* Radio Pompon */
.radio { background: var(--indigo); color: #fff; padding-block: 2rem; }
.radio-interieur { display: grid; gap: 1.5rem 2.5rem; align-items: center; }
@media (min-width: 54rem) { .radio-interieur { grid-template-columns: 3fr 2fr; } }
.radio-titre { font-family: var(--police-titre); font-size: 2rem; line-height: 1.15; margin: 0; color: var(--safran); }
.radio-artiste { font-size: 1.15rem; margin: 0 0 .5rem; }
.radio .dedicace { border-left-color: var(--safran); font-size: 1.15rem; }
.radio .badge-exemple { background: var(--safran); color: var(--texte); }
.radio-commandes { display: flex; align-items: center; gap: .9rem; margin-top: 1.5rem; }
.rond {
  display: grid; place-items: center;
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  border: 2px solid #fff; background: transparent; color: #fff; cursor: pointer;
}
.rond svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }
.rond:hover { background: rgba(255, 255, 255, .14); }
.rond-grand { width: 4.2rem; height: 4.2rem; background: var(--safran); border-color: var(--safran); color: var(--texte); }
.rond-grand:hover { background: #F7B551; }
.rond-grand svg { width: 1.7rem; height: 1.7rem; }
.rond .icone-pause, .rond.en-lecture .icone-lecture { display: none; }
.rond.en-lecture .icone-pause { display: block; }
.radio :focus-visible { outline-color: var(--safran); }

.programme { list-style: none; counter-reset: programme; padding: 0; margin: 0; }
.programme li {
  counter-increment: programme;
  display: flex; align-items: center; gap: .75rem;
  border-bottom: 1px solid var(--ligne);
}
.programme li::before {
  content: counter(programme); font-family: var(--police-titre); color: var(--rose);
  font-size: 1.3rem; min-width: 1.6rem;
}
.programme a { flex: 1; display: block; padding: .7rem 0; text-decoration: none; color: var(--texte); }
.programme a[aria-current] .programme-titre { color: var(--rose); }
.programme a[aria-current] .programme-titre::after { content: " ♪"; }
.programme-titre { display: block; font-weight: 700; }
.programme-artiste { display: block; color: var(--texte-doux); font-size: .95rem; }
.programme .badge-exemple { margin: 0; }

/* Pied de page */
.pied {
  margin-top: 3rem; padding-block: 3rem;
  background: var(--texte); color: var(--fond);
  font-size: .95rem; text-align: center;
}
.pied-interieur { display: flex; flex-direction: column; align-items: center; }
.pied .logo { width: 2.75rem; height: 2.75rem; margin-bottom: 1rem; }
.pied .logo .coeur { fill: var(--texte); }
.pied p { margin: 0 0 .75rem; max-width: 26rem; }
.pied a { color: var(--safran); font-weight: 700; }
.pied :focus-visible { outline-color: var(--safran); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}