/* ==========================================================================
   ICONES SVG — Inline pour la maquette (réutilisables via <use>)
   ========================================================================== */
.icon { display: inline-block; width: 1em; height: 1em; vertical-align: middle; }
.icon--lg { width: 1.25em; height: 1.25em; }
.icon--nav { width: 24px; height: 24px; }
.icon--social { width: 20px; height: 20px; }
.icon--slider { width: 20px; height: 20px; }
.icon--form { width: 18px; height: 18px; }
.icon--external { width: 14px; height: 14px; margin-inline-start: 4px; flex-shrink: 0; }

/* Hero slider — corrections spécifiques maquette */
.hero { position: relative; }
.hero .slider__slide { flex: 0 0 100%; }
.hero .slider__image { width: 100%; aspect-ratio: var(--ratio-slide); object-fit: cover; }
.hero .slider__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 55%); }
.hero .slider__content { position: absolute; bottom: var(--space-7); left: var(--space-6); right: var(--space-6); color: var(--color-text-on-brand); z-index: 1; max-width: var(--container-wide); margin: 0 auto; }
.hero .slider__title { font-family: var(--font-serif); font-size: var(--fs-900); font-weight: var(--fw-semibold); line-height: var(--lh-tight); margin: 0 0 var(--space-2); text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.hero .slider__meta { font-size: var(--fs-500); opacity: 0.95; text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.hero .slider__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; min-width: 48px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.9); border: none; border-radius: var(--radius-full); cursor: pointer; color: var(--color-text); box-shadow: var(--shadow-md); transition: background-color var(--transition-fast), transform var(--transition-fast); }
.hero .slider__nav:hover { background: var(--color-bg); transform: translateY(-50%) scale(1.05); }
.hero .slider__nav:focus-visible { box-shadow: var(--shadow-focus); }
.hero .slider__nav--prev { left: var(--space-4); }
.hero .slider__nav--next { right: var(--space-4); }
.hero .slider__indicators { position: absolute; bottom: var(--space-4); left: 50%; transform: translateX(-50%); display: flex; gap: var(--space-2); z-index: 2; }
.hero .slider__indicator { width: 10px; height: 10px; border-radius: var(--radius-full); border: none; background: rgba(255,255,255,0.5); cursor: pointer; padding: 0; transition: background-color var(--transition-fast), transform var(--transition-fast); }
.hero .slider__indicator[aria-selected="true"] { background: var(--color-text-on-brand); transform: scale(1.2); }
.hero .slider__indicator:focus-visible { box-shadow: var(--shadow-focus); }

@media (min-width: 768px) {
  .hero .slider__content { bottom: var(--space-9); left: var(--space-8); right: var(--space-8); }
  .hero .slider__title { font-size: var(--fs-900); }
  .hero .slider__meta { font-size: var(--fs-600); }
  .hero .slider__nav { width: 56px; height: 56px; min-width: 56px; }
  .hero .slider__nav--prev { left: var(--space-6); }
  .hero .slider__nav--next { right: var(--space-6); }
}

@media (min-width: 1440px) {
  .hero .slider__content { bottom: var(--space-9); }
}

/* Micro-édition : grille 4 colonnes dès mobile pour vignettes */
.microedition-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
@media (max-width: 599px) { .microedition-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .microedition-grid { gap: var(--space-4); } }

/* Cartes micro-édition — ratio 2:3, image + titre/auteur */
.micro-card { display: flex; flex-direction: column; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: transform var(--transition-normal), box-shadow var(--transition-normal); }
@media (prefers-reduced-motion: reduce) { .micro-card { transition: none; } }
.micro-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.micro-card:focus-within { box-shadow: var(--shadow-focus); }
.micro-card__image { width: 100%; aspect-ratio: var(--ratio-book); object-fit: cover; background: var(--color-bg-alt); }
.micro-card__content { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); flex: 1; }
.micro-card__badge { align-self: flex-start; }
.micro-card__title { font-family: var(--font-serif); font-size: var(--fs-400); font-weight: var(--fw-semibold); line-height: var(--lh-tight); margin: 0; color: var(--color-text); }
.micro-card__author { font-size: var(--fs-300); color: var(--color-text-muted); margin: 0; }

/* Affiches — cartes ratio 1:1.4 */
.affiche-card { display: flex; flex-direction: column; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: transform var(--transition-normal), box-shadow var(--transition-normal); }
@media (prefers-reduced-motion: reduce) { .affiche-card { transition: none; } }
.affiche-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.affiche-card:focus-within { box-shadow: var(--shadow-focus); }
.affiche-card__image { width: 100%; aspect-ratio: var(--ratio-poster); object-fit: cover; background: var(--color-bg-alt); }
.affiche-card__content { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); flex: 1; }
.affiche-card__badge { align-self: flex-start; }
.affiche-card__title { font-family: var(--font-serif); font-size: var(--fs-500); font-weight: var(--fw-semibold); line-height: var(--lh-tight); margin: 0; color: var(--color-text); }
.affiche-card__author { font-size: var(--fs-400); color: var(--color-text-muted); margin: 0; }

/* Blog — liste éditoriale */
.blog-list { display: flex; flex-direction: column; gap: var(--space-4); }
.blog-item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; padding: var(--space-4); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.blog-item:hover { border-color: var(--color-brand); box-shadow: var(--shadow-sm); }
.blog-item:focus-within { box-shadow: var(--shadow-focus); }
.blog-item__date { font-size: var(--fs-300); color: var(--color-text-muted); white-space: nowrap; min-width: 140px; }
.blog-item__content { display: flex; flex-direction: column; gap: var(--space-1); }
.blog-item__category { font-size: var(--fs-300); font-weight: var(--fw-medium); color: var(--color-brand); text-transform: uppercase; letter-spacing: 0.05em; }
.blog-item__title { font-family: var(--font-serif); font-size: var(--fs-500); font-weight: var(--fw-semibold); line-height: var(--lh-tight); margin: 0; color: var(--color-text); text-decoration: none; }
.blog-item__title:hover { color: var(--color-brand); text-decoration: underline; }

/* Rencontres — liste événements */
.rencontres-list { display: flex; flex-direction: column; gap: var(--space-4); }
.rencontre-item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; padding: var(--space-4); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.rencontre-item:hover { border-color: var(--color-brand); box-shadow: var(--shadow-sm); }
.rencontre-item:focus-within { box-shadow: var(--shadow-focus); }
.rencontre-item__date { font-size: var(--fs-300); font-weight: var(--fw-medium); color: var(--color-brand); white-space: nowrap; min-width: 180px; }
.rencontre-item__content { display: flex; flex-direction: column; gap: var(--space-2); }
.rencontre-item__text { font-size: var(--fs-500); line-height: var(--lh-relaxed); color: var(--color-text); margin: 0; }
.rencontre-item__link { font-size: var(--fs-400); font-weight: var(--fw-medium); color: var(--color-brand); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-1); }
.rencontre-item__link:hover { text-decoration: underline; }

/* Section background alterné */
.section--alt { background: var(--color-bg-alt); }

/* Footer newsletter form inline sur desktop */
@media (min-width: 1440px) {
  .footer__newsletter-form { display: flex; flex-direction: row; align-items: flex-end; gap: var(--space-3); }
  .footer__newsletter-form .field { flex: 1; max-width: 360px; }
  .footer__newsletter-form .btn { width: auto; flex-shrink: 0; }
}

/* ==========================================================================
   ÉTATS FORMULAIRE NEWSLETTER — bordures de champ et messages
   ========================================================================== */

.field__input--error {
  border-color: var(--color-error);
}

.field__input--error:focus {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.25);
}

.field__input--success {
  border-color: var(--color-success);
}

.field__input--success:focus {
  box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.25);
}

.field__message--warning {
  color: var(--color-warning);
}

.newsletter-feedback .icon--form {
  flex-shrink: 0;
}
