/* ===========================================================================
   style.css — identité visuelle « Agenda Lyon » (violet).

   Organisation :
   1. Variables (couleurs, polices, rayons, ombres) — un seul endroit à éditer.
   2. Réinitialisation légère + base typographique.
   3. En-tête dégradé + recherche + navigation.
   4. Conteneur, filtres, boutons.
   5. Grille + cartes (événement / établissement) + badges.
   6. Pages détail.
   7. États vides / 404 / pied de page.
   8. Responsive (3 / 2 / 1 colonnes) + accessibilité (focus, reduced-motion).
   =========================================================================== */

/* 1. ----------------------------- Variables ----------------------------- */
:root {
  /* Couleurs de marque : dégradé violet + accent. */
  --marque-debut: #667eea;
  --marque-fin: #764ba2;
  --accent: #764ba2;
  --degrade-marque: linear-gradient(135deg, var(--marque-debut), var(--marque-fin));

  /* Doré pour le badge « À la une ». */
  --or: #f6b73c;
  --or-fonce: #b4791a;

  /* Neutres. */
  --texte: #211f2b;
  --texte-doux: #6b6880;
  --fond: #f5f4fa;          /* fond de page légèrement teinté violet */
  --blanc: #ffffff;
  --bordure: #ecebf3;

  /* Typographie. */
  --police-titre: "Bricolage Grotesque", system-ui, sans-serif;
  --police-texte: "Hanken Grotesk", system-ui, sans-serif;

  /* Rayons & ombres. */
  --rayon: 16px;
  --rayon-petit: 10px;
  --ombre-douce: 0 6px 20px rgba(38, 30, 71, 0.08);
  --ombre-relief: 0 16px 36px rgba(38, 30, 71, 0.16);

  /* Largeur max du contenu. */
  --largeur-max: 1140px;
}

/* 2. -------------------------- Base & reset ----------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--police-titre);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 0.4em;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  display: block;
  max-width: 100%;
}

/* 3. ----------------------------- En-tête ------------------------------- */
.entete {
  background: var(--degrade-marque);
  color: var(--blanc);
  padding: 3rem 1.5rem 2.25rem;
}

.entete__contenu {
  max-width: var(--largeur-max);
  margin: 0 auto;
  text-align: center;
}

.entete__marque {
  color: var(--blanc);
  text-decoration: none;
}

.entete__titre {
  display: inline-block;
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 10px rgba(30, 20, 55, 0.28);
}

.entete__sous-titre {
  max-width: 36rem;
  margin: 0.5rem auto 1.5rem;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 6px rgba(30, 20, 55, 0.25);
}

/* Barre de recherche arrondie. */
.recherche {
  display: flex;
  gap: 0.5rem;
  max-width: 34rem;
  margin: 0 auto;
  background: var(--blanc);
  padding: 0.4rem;
  border-radius: 999px;
  box-shadow: var(--ombre-douce);
}

.recherche__champ {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 0.55rem 1rem;
  font: inherit;
  color: var(--texte);
}

.recherche__bouton {
  border: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 0.55rem 1.4rem;
  font: inherit;
  font-weight: 600;
  color: var(--blanc);
  background: var(--accent);
  transition: filter 0.15s ease;
}

.recherche__bouton:hover {
  filter: brightness(1.08);
}

/* Navigation. */
.nav {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.nav__lien {
  color: var(--blanc);
  font-weight: 600;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: background 0.15s ease;
}

.nav__lien:hover {
  text-decoration: none;
  background: rgba(255, 255, 255, 0.18);
}

/* 4. -------------------- Conteneur / filtres / boutons ------------------ */
.conteneur {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

.section-titre {
  margin-bottom: 1.25rem;
}

.section-titre h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
}

.section-titre p {
  color: var(--texte-doux);
  margin: 0;
}

/* Rangée de filtres. */
.filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--ombre-douce);
}

.filtres__groupe {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 10rem;
  flex: 1;
}

.filtres__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texte-doux);
}

.filtres__select {
  font: inherit;
  padding: 0.55rem 0.75rem;
  border-radius: var(--rayon-petit);
  border: 1px solid var(--bordure);
  background: var(--fond);
  color: var(--texte);
  cursor: pointer;
}

.filtres__actions {
  display: flex;
  gap: 0.5rem;
}

/* Boutons génériques. */
.bouton {
  display: inline-block;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  border: none;
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  color: var(--blanc);
  background: var(--degrade-marque);
  transition: filter 0.15s ease, transform 0.15s ease;
}

.bouton:hover {
  text-decoration: none;
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.bouton--clair {
  background: var(--blanc);
  color: var(--accent);
  border: 1px solid var(--bordure);
}

/* Bandeau résumé de recherche. */
.resume {
  margin: 0 0 1.25rem;
  color: var(--texte-doux);
}

/* 5. ----------------------- Grille & cartes ----------------------------- */
.grille {
  display: grid;
  /* auto-fill + minmax => 3 colonnes en grand, 2 puis 1 en réduisant. */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.carte {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre-douce);
  color: var(--texte);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.carte:hover {
  text-decoration: none;
  transform: translateY(-6px);          /* léger soulèvement au survol */
  box-shadow: var(--ombre-relief);
}

/* Visuel de carte (image OU placeholder dégradé + emoji). */
.carte__visuel {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.carte__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carte__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--degrade-marque);
}

.carte__emoji {
  font-size: 3.4rem;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
}

/* Badge doré « À la une ». */
.badge-une {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  background: var(--or);
  color: var(--or-fonce);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Pastille « Vérifié ». */
.badge-verifie {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

/* Corps de carte. */
.carte__corps {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.carte__titre {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
}

.carte__meta {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
}

.carte__date {
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.92rem;
}

.carte__desc {
  margin: 0.2rem 0 0;
  color: var(--texte-doux);
  font-size: 0.92rem;
  /* Tronque proprement à 3 lignes. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.carte__tarif {
  align-self: flex-start;
  margin-top: 0.4rem;
  background: var(--fond);
  color: var(--texte);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--bordure);
}

/* 6. ----------------------------- Détail -------------------------------- */
.ariane {
  margin: 0 0 1rem;
  font-weight: 600;
}

.detail {
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-douce);
  overflow: hidden;
  padding-bottom: 1.75rem;
}

.detail__visuel {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
}

.detail__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--degrade-marque);
}

.detail__emoji {
  font-size: 5rem;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
}

.badge-une--detail,
.badge-verifie--detail {
  top: 1rem;
  left: 1rem;
  font-size: 0.85rem;
}

.detail__entete {
  padding: 1.5rem 1.75rem 0;
}

.detail__titre {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  margin-bottom: 0.3rem;
}

.detail__meta {
  margin: 0;
  font-weight: 600;
  color: var(--accent);
}

.detail__description {
  padding: 1.25rem 1.75rem 0;
  white-space: pre-line;     /* conserve les retours à la ligne du texte Airtable */
  color: #3a3748;
}

/* Liste d'informations pratiques. */
.infos {
  margin: 1.5rem 1.75rem 0;
  border-top: 1px solid var(--bordure);
}

.infos__ligne {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--bordure);
}

.infos dt {
  font-weight: 700;
  color: var(--texte-doux);
}

.infos dd {
  margin: 0;
}

.detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1.5rem 1.75rem 0;
}

/* Bloc « prochains événements » sur la fiche établissement. */
.bloc-evenements {
  padding: 2rem 1.75rem 0;
}

.bloc-evenements__titre {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

/* 7. --------------------- États vides / 404 / pied --------------------- */
.vide {
  background: var(--blanc);
  border: 1px dashed var(--bordure);
  border-radius: var(--rayon);
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--texte-doux);
}

.vide__titre {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--texte);
  margin-bottom: 0.3rem;
}

.vide .bouton {
  margin-top: 1.25rem;
}

.vide--404 {
  padding: 4rem 1.5rem;
}

.vide__code {
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: 4rem;
  background: var(--degrade-marque);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 0.5rem;
}

.vide--404 .detail__actions {
  justify-content: center;
  padding: 0;
  margin-top: 1.5rem;
}

.pied {
  background: #1d1b26;
  color: rgba(255, 255, 255, 0.75);
  padding: 2rem 1.5rem;
  text-align: center;
}

.pied__contenu {
  max-width: var(--largeur-max);
  margin: 0 auto;
}

.pied p {
  margin: 0.2rem 0;
}

.pied__mention {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

/* 8. ------------------ Responsive & accessibilité ---------------------- */
/* La grille passe d'elle-même en 2 puis 1 colonne grâce à auto-fill.
   On force tout de même 1 colonne sur très petits écrans. */
@media (max-width: 520px) {
  .grille {
    grid-template-columns: 1fr;
  }
  .recherche {
    flex-direction: column;
    border-radius: var(--rayon);
  }
  .recherche__bouton {
    border-radius: var(--rayon-petit);
  }
  .infos__ligne {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

/* Focus clavier visible partout (accessibilité). */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 3px solid var(--marque-debut);
  outline-offset: 2px;
}

/* Respect de la préférence « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Bloc newsletter (accueil) ---------- */
.newsletter-hero {
  background: var(--degrade-marque);
  color: #fff;
  border-radius: 24px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  margin-bottom: 1.75rem;
  box-shadow: var(--ombre-douce);
}
.newsletter-hero__titre {
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  margin-bottom: 0.3rem;
}
.newsletter-hero__accroche {
  color: rgba(255, 255, 255, 0.92);
  margin: 0 auto 1.4rem;
  max-width: 34rem;
}
.nl-message {
  display: inline-block;
  margin: 0 auto 1rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
}
.nl-message--ok { background: #e9f9ef; color: #18794e; }
.nl-message--err { background: #fdecec; color: #b42318; }

.nl-form {
  max-width: 34rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: center;
}
.nl-form__email {
  width: 100%;
  border: none;
  outline: none;
  border-radius: 999px;
  padding: 0.8rem 1.2rem;
  font: inherit;
  color: var(--texte);
}
.nl-freq {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  justify-content: center;
  align-items: center;
}
.nl-freq__legende {
  width: 100%;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.2rem;
}
.nl-freq__option {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  cursor: pointer;
}
.nl-freq__option input { accent-color: #fff; }

.newsletter-hero .bouton {
  background: #fff;
  color: var(--accent);
  margin-top: 0.2rem;
}
.nl-form__note {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.78);
  margin: 0.1rem 0 0;
}

/* ---------- Titres de page ---------- */
.page-titre {
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  margin: 0.2rem 0 1.2rem;
}

/* ---------- Blocs de section (accueil vitrine) ---------- */
.bloc { margin: 2.4rem 0; }
.bloc__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--bordure, #ece9f5);
  padding-bottom: 0.5rem;
}
.bloc__titre { font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 0; }
.bloc__lien {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.bloc__lien:hover { text-decoration: underline; }

/* Variante « à la une » : cartes un peu plus grandes (min 280px). */
.grille--une { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ---------- Badge rubrique (carte article) ---------- */
.badge-rubrique {
  position: absolute;
  top: 0.6rem; left: 0.6rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}
.carte__chapeau {
  color: var(--texte-doux, #5b5570);
  font-size: 0.92rem;
  margin: 0.2rem 0 0.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Navigation par rubriques (page articles) ---------- */
.rubriques {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
}
.rubriques__lien {
  text-decoration: none;
  color: var(--accent);
  border: 1px solid var(--bordure, #ece9f5);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-weight: 600;
  font-size: 0.9rem;
}
.rubriques__lien:hover { background: #f5f3fb; }
.rubriques__lien.est-actif {
  background: var(--degrade-marque);
  color: #fff;
  border-color: transparent;
}

/* ---------- Page article (détail) ---------- */
.article { max-width: 720px; margin: 0 auto; }
.article__rubrique {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--accent);
  margin: 0 0 0.3rem;
}
.article__titre { font-size: clamp(1.7rem, 4.5vw, 2.6rem); margin: 0 0 0.5rem; }
.article__date { color: var(--texte-doux, #5b5570); margin: 0 0 1.2rem; }
.article__image {
  width: 100%;
  border-radius: 16px;
  margin-bottom: 1.2rem;
}
.article__chapeau {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--texte-doux, #5b5570);
  margin-bottom: 1.4rem;
}
.article__corps { font-size: 1.05rem; line-height: 1.75; }
.article__corps h2 { margin: 1.8rem 0 0.6rem; font-size: 1.5rem; }
.article__corps h3 { margin: 1.4rem 0 0.5rem; font-size: 1.25rem; }
.article__corps p { margin: 0 0 1.1rem; }
.article__corps a { color: var(--accent); }
.article__corps img { max-width: 100%; border-radius: 12px; }
.article__corps ul, .article__corps ol { margin: 0 0 1.1rem 1.4rem; }
.article__retour { margin-top: 2rem; }

/* ---------- Espace pro ---------- */
.pro-body { background: #f6f5fb; }
.pro-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.4rem;
  background: var(--degrade-marque);
  color: #fff;
}
.pro-entete__marque { color: #fff; text-decoration: none; font-weight: 800; }
.pro-entete__marque span { font-weight: 600; opacity: 0.9; }
.pro-entete__nav { display: flex; gap: 1rem; }
.pro-entete__lien { color: #fff; text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.pro-entete__lien:hover { text-decoration: underline; }
.conteneur--pro { max-width: 860px; }
.pro-sous-titre { color: var(--texte-doux, #5b5570); margin-top: -0.6rem; }

.pro-carte {
  background: #fff;
  border-radius: 18px;
  padding: 2rem;
  max-width: 520px;
  margin: 2.5rem auto;
  box-shadow: var(--ombre-douce);
}
.pro-carte__titre { margin: 0 0 0.6rem; }
.pro-carte__intro { color: var(--texte-doux, #5b5570); margin-bottom: 1.4rem; }
.pro-carte__retour { margin-top: 1.4rem; }
.pro-lien-dev {
  word-break: break-all;
  background: #f5f3fb;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  font-size: 0.86rem;
}

.pro-form { display: flex; flex-direction: column; gap: 0.7rem; }
.pro-form__label { font-weight: 600; font-size: 0.92rem; }
.pro-form__champ {
  border: 1px solid var(--bordure, #ece9f5);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font: inherit;
}

.pro-fiche { background: #fff; border-radius: 14px; padding: 1.4rem; box-shadow: var(--ombre-douce); }
.pro-fiche__nom { margin: 0 0 0.2rem; }
.pro-fiche__desc { color: var(--texte-doux, #5b5570); margin: 0.6rem 0 1rem; }

.statut {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
}
.statut--ok { background: #e9f9ef; color: #18794e; }
.statut--attente { background: #fff4e5; color: #ad6800; }

.pro-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--ombre-douce); }
.pro-table th, .pro-table td { text-align: left; padding: 0.8rem 1rem; border-bottom: 1px solid var(--bordure, #ece9f5); }
.pro-table th { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texte-doux, #5b5570); }
.pro-table tr:last-child td { border-bottom: none; }
.pro-vide { color: var(--texte-doux, #5b5570); }

.bouton:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- Formulaire d'édition pro ---------- */
.pro-fil { margin-bottom: 0.4rem; }
.pro-fil a { color: var(--accent); text-decoration: none; font-weight: 600; }
.pro-form--large {
  max-width: 640px;
  background: #fff;
  padding: 1.8rem;
  border-radius: 16px;
  box-shadow: var(--ombre-douce);
  align-items: stretch;
}
.pro-form--large .pro-form__champ { width: 100%; box-sizing: border-box; }
.pro-form--large textarea.pro-form__champ { resize: vertical; font: inherit; }
.pro-form__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.pro-form__note { font-size: 0.85rem; color: var(--texte-doux, #5b5570); margin: 0.2rem 0 0; }
.pro-form__actions { display: flex; gap: 0.7rem; align-items: center; margin-top: 0.4rem; }
@media (max-width: 560px) { .pro-form__duo { grid-template-columns: 1fr; } }

.pro-table__lien { color: var(--accent); font-weight: 600; text-decoration: none; }
.pro-table__lien:hover { text-decoration: underline; }

/* ---------- Plans / mise en avant (espace pro) ---------- */
.pro-plan {
  margin: -0.4rem 0 1rem;
  font-size: 0.92rem;
  color: var(--texte-doux, #5b5570);
}
.pro-une {
  background: #f5f3fb;
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin: 0.3rem 0;
}
.pro-une__option { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; cursor: pointer; }
.pro-une__option input[disabled] { cursor: not-allowed; }
.pro-une__quota { font-size: 0.85rem; color: var(--texte-doux, #5b5570); margin: 0.4rem 0 0; }
.pro-une__upsell { margin: 0; font-size: 0.92rem; color: var(--texte-doux, #5b5570); }

/* ---------- Inscription & modération (espace pro) ---------- */
.pro-form__case {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--texte-doux, #5b5570);
  margin: 0.4rem 0 0.2rem;
  cursor: pointer;
  line-height: 1.4;
}
.pro-form__case input { margin-top: 0.2rem; flex: 0 0 auto; }

.bouton--petit { padding: 0.4rem 0.9rem; font-size: 0.85rem; }
.bouton--fantome {
  background: transparent;
  color: #993556;
  box-shadow: inset 0 0 0 1px rgba(153, 53, 86, 0.4);
}

.moderation-liste { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.moderation-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(102, 126, 234, 0.14);
}
.moderation-item__info { display: flex; flex-direction: column; gap: 0.15rem; }
.moderation-item__meta { font-size: 0.82rem; color: var(--texte-doux, #5b5570); }
.moderation-item__actions { display: flex; gap: 0.5rem; }
.moderation-item__actions form { margin: 0; }

/* ---------- Champs image (formulaires pro) ---------- */
.pro-form__apercu {
  display: block;
  max-width: 220px;
  max-height: 160px;
  border-radius: 10px;
  margin: 0.2rem 0 0.5rem;
  object-fit: cover;
}
.pro-form__aide {
  font-size: 0.8rem;
  color: var(--texte-doux, #5b5570);
  margin: 0.3rem 0 0.2rem;
}

/* ---------- Préférences newsletter ---------- */
.prefs { max-width: 720px; margin: 0 auto; }
.prefs__intro { color: var(--texte-doux, #5b5570); margin-bottom: 1.2rem; }
.prefs__form { display: flex; flex-direction: column; gap: 1.1rem; }
.prefs__bloc {
  border: 1px solid rgba(102, 126, 234, 0.18);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin: 0;
}
.prefs__legende { font-weight: 600; padding: 0 0.4rem; color: var(--texte, #1c1830); }
.prefs__grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.5rem 1rem;
  margin-top: 0.5rem;
}
.prefs__case, .prefs__radio {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.92rem; cursor: pointer;
}
.prefs__radio { margin-right: 1rem; display: inline-flex; }
.prefs__aide { font-size: 0.82rem; color: var(--texte-doux, #5b5570); }