/* =========================================================================
   LASCAUX INTERNATIONAL EXHIBITION — Styles propres à certaines pages
   Worldtour (carte + timeline) · News · Contact
   ========================================================================= */

/* =========================================================================
   1. WORLDTOUR
   Principe d'accessibilité mobile : la CARTE est un complément visuel,
   la TIMELINE est la véritable navigation. Sur petit écran la carte n'est
   plus cliquable (pastilles trop petites pour le doigt) et sert de repère ;
   toute l'interaction passe par les cartes de la timeline, pleine largeur.
   ========================================================================= */

.tour { position: relative; }

/* --- Filtres de tournée --- */

.tour-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}

.tour-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  padding: var(--s-2) var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-bone-3);
  transition: border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}

.tour-filter::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--dot, var(--c-bone-3));
  flex-shrink: 0;
}

.tour-filter[data-tour='1'] { --dot: var(--c-tour1); }
.tour-filter[data-tour='2'] { --dot: var(--c-tour2); }
.tour-filter[data-tour='all']::before { background: linear-gradient(90deg, var(--c-tour1), var(--c-tour2)); }

.tour-filter:hover { color: var(--c-bone); border-color: var(--c-bone-3); }

.tour-filter[aria-pressed='true'] {
  color: var(--c-bone);
  border-color: var(--dot, var(--c-bone));
  background: rgba(212, 97, 15, 0.12);
}

/* --- Carte --- */

.tour-map {
  position: relative;
  isolation: isolate;
  background: var(--c-ink-2);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--s-7);
}

/* Les chevaux de Lascaux en filigrane sous le tracé de la tournée : deux
   mouvements qui se superposent. Le dessin d'origine est sombre sur papier
   clair ; il a été inversé (opt/chevaux.jpg) pour que seules les silhouettes
   ressortent en « screen », le papier devenant noir donc invisible. */
.tour-map::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url('../img/matieres/opt/chevaux.jpg');
  /* Le dessin entier, sans rognage : « contain » l'inscrit dans la hauteur du
     cadre (l'image fait 1920 × 1200, le cadre 1000 × 500, elle s'y pose donc
     en 800 × 500). Auparavant elle était agrandie à 133 % et la courbe des
     encolures sortait du cadre ; à cette taille elle se déploie entière, et
     son mouvement répond à celui des continents.
     « no-repeat » est indispensable : à cette taille, les 200 unités de jeu
     horizontal feraient sinon réapparaître un second dessin. */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 55% center;
  opacity: var(--chevaux-opacite);
  mix-blend-mode: screen;
  pointer-events: none;
  /* Estompe seulement les bords du cadre : le masque serré d'avant coupait la
     courbe que l'on cherche précisément à donner à voir. */
  -webkit-mask-image: radial-gradient(ellipse 92% 88% at 52% 46%, #000 52%, transparent 96%);
  mask-image: radial-gradient(ellipse 92% 88% at 52% 46%, #000 52%, transparent 96%);
}

.tour-map__canvas { display: block; width: 100%; height: auto; }

/* Fond de carte (continents) */
.tour-map .land {
  fill: var(--c-ink-4);
  stroke: var(--c-border-soft);
  stroke-width: 0.4;
}

/* Traits reliant les destinations dans l'ordre chronologique */
.tour-map .route {
  fill: none;
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-dasharray: 3 4;
  opacity: 0.5;
}

.tour-map .route--1 { stroke: var(--c-tour1); }
.tour-map .route--2 { stroke: var(--c-tour2); }

/* Pastilles de destination */
.tour-map .pin { cursor: pointer; }

/* Le rayon est repris ici en propriété géométrique CSS : l'attribut r du SVG
   reste dans le balisage comme valeur de repli, mais le réglage vit dans les
   tokens, avec le reste des décisions de dessin. */
.tour-map .pin__halo {
  r: var(--pin-halo-r);
  fill: var(--pin, var(--c-tour1));
  opacity: 0.18;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity var(--dur) var(--ease);
}

.tour-map .pin__dot {
  r: var(--pin-r);
  fill: var(--pin, var(--c-tour1));
  stroke: var(--c-ink);
  stroke-width: 0.7;
  transition: transform var(--dur) var(--ease);
  transform-box: fill-box;
  transform-origin: center;
}

.tour-map .pin[data-tour='1'] { --pin: var(--c-tour1); }
.tour-map .pin[data-tour='2'] { --pin: var(--c-tour2); }

.tour-map .pin:hover .pin__dot,
.tour-map .pin.is-active .pin__dot { transform: scale(1.5); }

.tour-map .pin:hover .pin__halo,
.tour-map .pin.is-active .pin__halo { opacity: 0.4; }

.tour-map .pin:focus-visible { outline: none; }
.tour-map .pin:focus-visible .pin__dot { stroke: var(--c-bone); stroke-width: 1.2; }

/* Destination masquée par un filtre */
.tour-map .pin[hidden],
.tour-map .route[hidden] { display: none; }

/* Étiquette au survol (desktop) */
.tour-map__tip {
  position: absolute;
  z-index: 3;
  padding: var(--s-2) var(--s-4);
  background: var(--c-ink);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-s);
  font-size: var(--t-micro);
  line-height: 1.4;
  color: var(--c-bone);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -130%);
  transition: opacity 0.18s var(--ease);
  white-space: nowrap;
  box-shadow: var(--shadow);
}

.tour-map__tip.is-visible { opacity: 1; }
.tour-map__tip .y { color: var(--c-accent); }

/* Sur écran tactile / petit écran : la carte devient un repère non cliquable */
@media (max-width: 900px), (hover: none) {
  .tour-map .pin { pointer-events: none; }
  .tour-map__tip { display: none; }
}

.tour-map__note {
  padding: var(--s-3) var(--s-5) var(--s-4);
  font-size: var(--t-micro);
  font-style: italic;
  color: var(--c-text-muted);
  border-top: 1px solid var(--c-border-soft);
}

@media (min-width: 901px) { .tour-map__note { display: none; } }

/* --- Légende --- */

.tour-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  margin-bottom: var(--s-6);
  font-size: var(--t-micro);
  color: var(--c-text-muted);
}

.tour-legend li { display: inline-flex; align-items: center; gap: var(--s-3); }

.tour-legend .swatch { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.tour-legend .swatch--1 { background: var(--c-tour1); }
.tour-legend .swatch--2 { background: var(--c-tour2); }

/* --- Timeline : la vraie navigation --- */

.timeline { position: relative; }

.timeline__group + .timeline__group { margin-top: var(--s-8); }

.timeline__group-title {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--c-border-soft);
}

.timeline__group-title h3 { color: var(--c-bone); }

.timeline__group-count { font-size: var(--t-micro); color: var(--c-text-muted); letter-spacing: 0.1em; }

.timeline__list { display: grid; gap: var(--s-3); }

.stop {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4) var(--s-5);
  align-items: start;
  width: 100%;
  min-height: 56px;
  padding: var(--s-4) var(--s-5);
  text-align: left;
  background-color: var(--c-surface);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-s);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* Le premier des trois filets prend la couleur de la tournée ; les deux
   autres restent dans les bruns de la charte, en retrait. */
.stop[data-tour='1'] { --stop: var(--c-tour1); --filet-1: var(--c-tour1); }
.stop[data-tour='2'] { --stop: var(--c-tour2); --filet-1: var(--c-tour2); }

.stop:hover, .stop.is-active { background-color: var(--c-ink-4); }
/* À l'état actif, les trois filets se rejoignent en hauteur : le tracé se
   rassemble, comme les chevrons du menu au survol. */
.stop.is-active {
  border-color: var(--stop);
  background-size: var(--filet-larg) 78%, var(--filet-larg) 78%, var(--filet-larg) 78%;
  background-position: 0 11%, var(--filet-ecart) 11%, calc(var(--filet-ecart) * 2) 11%;
}

.stop__year {
  font-family: var(--f-display);
  font-size: var(--t-h4);
  font-weight: 700;
  color: var(--stop, var(--c-tour1));
  min-width: 4.5ch;
}

.stop__year--tbd { color: var(--c-text-muted); font-weight: 400; font-style: italic; font-size: var(--t-small); }

.stop__body { display: block; min-width: 0; }

.stop__city {
  display: block;
  font-family: var(--f-display);
  font-size: var(--t-h4);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-bone);
}

.stop__country { color: var(--c-text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

.stop__venue { display: block; font-size: var(--t-small); color: var(--c-bone-2); margin-top: var(--s-1); }

.stop__dates { display: block; font-size: var(--t-micro); color: var(--c-accent); margin-top: var(--s-2); letter-spacing: 0.06em; }

.stop__flag {
  display: inline-block;
  margin-top: var(--s-2);
  padding: 2px var(--s-3);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-bone);
  background: var(--lsx-1);
  border-radius: 2px;
}

.stop[hidden] { display: none; }

/* --- Panneau de détail (desktop : à côté de la carte) --- */

@media (min-width: 1100px) {
  .tour__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.85fr);
    gap: var(--s-7);
    align-items: start;
  }

  .tour__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--s-5));
    max-height: calc(100svh - var(--header-h) - var(--s-8));
    overflow-y: auto;
    padding-right: var(--s-2);
  }
}


/* =========================================================================
   2. NEWS
   ========================================================================= */

.news-list { display: grid; gap: var(--s-5); }

.news-item {
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}

.news-item:hover { border-color: var(--c-border); }
.news-item:has([aria-expanded='true']) { border-color: var(--lsx-1); }

.news-item__trigger {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4) var(--s-5);
  align-items: center;
  width: 100%;
  padding: var(--s-5) var(--s-5);
  text-align: left;
  min-height: 64px;
}

@media (min-width: 760px) { .news-item__trigger { padding: var(--s-6); } }

.news-item__date {
  display: block;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--s-3);
}

.news-item__title {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-bone);
}

.news-item__toggle {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  color: var(--c-accent);
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

[aria-expanded='true'] .news-item__toggle { transform: rotate(45deg); border-color: var(--lsx-1); }

.news-item__panel { padding: 0 var(--s-5) var(--s-6); }

@media (min-width: 760px) { .news-item__panel { padding: 0 var(--s-6) var(--s-7); } }

.news-item__panel > .prose { border-top: 1px solid var(--c-border-soft); padding-top: var(--s-5); }

.news-item__media { margin-top: var(--s-6); }

/* Encart d'inscription à la lettre d'information */
.newsletter {
  background: var(--c-ink-2);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius);
  padding: clamp(var(--s-5), 4vw, var(--s-8));
}

.newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.newsletter__form input[type='email'] {
  flex: 1 1 240px;
  min-height: 52px;
  padding: var(--s-3) var(--s-4);
  background: var(--c-ink);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-s);
  color: var(--c-bone);
}

.newsletter__form input::placeholder { color: var(--c-text-muted); }
.newsletter__form input:focus { border-color: var(--lsx-1); outline: none; }


/* =========================================================================
   3. CONTACT
   ========================================================================= */

.contact-grid { display: grid; gap: clamp(var(--s-6), 5vw, var(--s-9)); }

@media (min-width: 960px) { .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; } }

.contact-card {
  background-color: var(--c-surface);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius);
  padding: clamp(var(--s-5), 4vw, var(--s-7));
}

.contact-card + .contact-card { margin-top: var(--s-5); }

/* Carte incarnée : le portrait en médaillon rond, le rôle et le nom à côté.
   Le nom d'une personne vaut mieux qu'une adresse générique pour ouvrir un
   échange — c'est tout l'objet de cette page. */
.contact-card__tete {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.contact-card__portrait {
  width: var(--portrait-d);
  height: var(--portrait-d);
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  /* Un anneau fin plutôt qu'un cadre : le rond doit se poser sur le fond,
     non s'en découper. */
  box-shadow: 0 0 0 1px rgb(242 237 228 / 0.18),
              0 12px 28px -12px rgb(0 0 0 / 0.8);
}

/* Dans cette disposition, le rôle et le nom forment un bloc serré à droite
   du médaillon : leurs marges de carte simple les désaligneraient. */
.contact-card__tete .contact-card__role { margin-bottom: var(--s-1); }
.contact-card__tete .contact-card__name { margin: 0; }

.contact-card__role {
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--s-3);
}

.contact-card__name {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--c-bone);
}

.contact-list { margin-top: var(--s-5); }
.contact-list > li + li { margin-top: var(--s-4); }

.contact-list dt {
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--s-1);
}

.contact-list dd { margin: 0; }

.contact-list a { color: var(--c-bone); border-bottom: 1px solid var(--c-border-warm); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.contact-list a:hover { color: var(--c-accent); border-color: var(--lsx-1); }

/* Formulaire */
.form-grid { display: grid; gap: var(--s-5); }

@media (min-width: 620px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: var(--s-2); }

.field label {
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-bone-3);
}

.field .req { color: var(--lsx-1); }

.field input,
.field select,
.field textarea {
  min-height: 52px;
  padding: var(--s-3) var(--s-4);
  background: var(--c-ink-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-s);
  color: var(--c-bone);
  transition: border-color var(--dur) var(--ease);
}

.field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }

.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--lsx-1); outline: none; }

.field input::placeholder, .field textarea::placeholder { color: var(--c-text-muted); }

.field--consent { flex-direction: row; align-items: flex-start; gap: var(--s-3); }

.field--consent input { min-height: 0; width: 20px; height: 20px; margin-top: 3px; flex-shrink: 0; accent-color: var(--lsx-1); }

.field--consent label {
  font-size: var(--t-small);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
  color: var(--c-bone-3);
}

.form-note { font-size: var(--t-micro); font-style: italic; color: var(--c-text-muted); }

/* --- Colonne du formulaire sur feuille claire (page Contact) ---
   Les coordonnées restent sur le brun sombre de la page ; le formulaire se
   détache sur une feuille pierre claire, titre en brun. Les jetons de
   couleur sont redéfinis pour la seule colonne : libellés, champs, notes et
   messages d'erreur suivent d'eux-mêmes. */
.contact-formulaire {
  --c-bone:        #1F1B17;
  --c-bone-2:      #3A342D;
  --c-bone-3:      #625B52;   /* libellés : 6,4:1 sur la feuille */
  --c-text:        #1F1B17;
  --c-text-muted:  #625B52;
  --c-accent:      var(--lsx-5);
  --c-border:      rgba(31, 27, 23, 0.2);
  --c-border-soft: rgba(31, 27, 23, 0.08);
  --c-ink-2:       #FFFFFF;   /* fond des champs */

  align-self: start;
  padding: clamp(var(--s-5), 4vw, var(--s-8));
  background: #F6F4F0;
  border-radius: var(--radius);
  color: var(--c-text);
  box-shadow: 0 30px 60px -34px rgb(0 0 0 / 0.75);
}

.contact-formulaire h2 { color: var(--lsx-6); }   /* brun foncé : 8,1:1 */

.contact-formulaire .btn--primary,
.contact-formulaire .btn--primary:hover { color: #FFFFFF; }

.contact-formulaire .field input:focus,
.contact-formulaire .field select:focus,
.contact-formulaire .field textarea:focus { box-shadow: 0 0 0 3px rgb(212 97 15 / 0.15); }

.contact-formulaire .field__erreur { color: var(--lsx-3); }


/* =========================================================================
   3 bis. MUR DE PHOTOS DE L'ÉQUIPE
   Une mosaïque de vues carrées ; chacune ouvre le diaporama à sa place.
   Le survol reprend le geste des cartes : la vue s'éclaire et s'agrandit
   légèrement, sans bouger ses voisines.
   ========================================================================= */

.mur {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: var(--s-3);
}

.mur__vue {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: var(--c-ink-2);
  cursor: zoom-in;
}

.mur__vue img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease);
  opacity: 0.88;
}

.mur__vue:hover img,
.mur__vue:focus-visible img {
  transform: scale(1.06);
  opacity: 1;
}

/* Sur grand écran, la première vue tient deux colonnes et deux rangées :
   la mosaïque respire et ne devient pas une grille de vignettes égales. */
@media (min-width: 900px) {
  .mur__vue:first-child { grid-column: span 2; grid-row: span 2; }
}


/* =========================================================================
   4. BLOC DE TÉLÉCHARGEMENT (brochure)
   ========================================================================= */

/* Le bloc entier est le lien : une seule cible, un seul arrêt au clavier,
   et la couverture devient cliquable au même titre que le bouton. */
/* --- Bloc d'accès illustré (page Contact) ---
   Même peau que le bloc de la brochure — encre, filet chaud, accent au survol
   — mais la photo est large : elle se pose au-dessus, et le titre en dessous.
   C'est un lien entier, pas une carte décorative. */
.acces {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--c-ink-2);
  border: 1px solid var(--c-border-warm);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.acces:hover { border-color: var(--c-accent); background: var(--c-ink-3); }

.acces__vue {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius) - 5px);
}

.acces__corps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  padding: 0 var(--s-2) var(--s-2);
}

.acces__titre {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-bone);
}

.acces__meta {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--t-micro);
  color: var(--c-text-muted);
}

.acces .arw { transition: transform var(--dur) var(--ease); }
.acces:hover .arw { transform: translateX(5px); }

.download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  padding: clamp(var(--s-5), 4vw, var(--s-6));
  background: var(--c-ink-2);
  border: 1px solid var(--c-border-warm);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}

.download:hover { border-color: var(--c-accent); background: var(--c-ink-3); }

/* La couverture du PDF plutôt qu'un pictogramme : on montre le document que
   l'on propose. Sur ce fond sombre, un filet clair l'en détache — l'inverse
   du pied de page, où la couverture sombre tranche sur le papier. */
.download__couv {
  display: block;
  width: var(--brochure-w-contact);
  height: auto;
  flex-shrink: 0;
  border-radius: 2px;
  box-shadow: 0 18px 40px -14px rgb(0 0 0 / 0.8),
              0 0 0 1px rgb(242 237 228 / 0.16);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.download:hover .download__couv,
.download:focus-visible .download__couv {
  transform: translateY(-3px);
  box-shadow: 0 24px 50px -14px rgb(0 0 0 / 0.85),
              0 0 0 1px rgb(242 237 228 / 0.3);
}

/* Le bouton n'est plus un lien mais l'apparence du geste : il doit néanmoins
   réagir quand on survole n'importe quelle partie du bloc. */
.download:hover .btn--ghost {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

@media (prefers-reduced-motion: reduce) {
  .download__couv { transition: none; }
  .download:hover .download__couv { transform: none; }
}

.download__body { flex: 1 1 240px; }

.download__title { font-family: var(--f-display); font-weight: 700; color: var(--c-bone); }

.download__meta { font-size: var(--t-micro); color: var(--c-text-muted); margin-top: var(--s-1); }


/* =========================================================================
   FORMULAIRE — retours du serveur (version PHP)
   ========================================================================= */

/* Bandeau de retour : succès ou liste des erreurs, en tête du formulaire.
   Les erreurs sont des liens vers le champ concerné. */
.form-retour {
  margin-top: var(--s-6);
  padding: var(--s-5);
  border-radius: var(--radius-s);
  border: 1px solid var(--c-border);
  font-size: var(--t-small);
  line-height: 1.55;
}
.form-retour p + p,
.form-retour p + ul { margin-top: var(--s-2); }
.form-retour ul { padding-left: 1.2em; list-style: disc; }
.form-retour a { color: inherit; text-decoration: underline; }

.form-retour--ok {
  border-color: var(--c-accent);
  background: rgb(201 146 34 / 0.08);
  color: var(--c-bone);
}

.form-retour--erreur {
  border-color: var(--lsx-3);
  background: rgb(183 37 29 / 0.1);
  color: var(--c-bone);
}

/* Message sous le champ fautif */
.field__erreur {
  font-size: var(--t-micro);
  line-height: 1.45;
  color: #E8836F;   /* rouge de la charte éclairci : 5,9:1 sur le fond sombre */
}

.field [aria-invalid="true"] { border-color: var(--lsx-3); }

/* Champ piège : hors écran plutôt que masqué. Certains robots ignorent les
   champs en display:none, jamais ceux qu'ils croient visibles. */
.champ-piege {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* =========================================================================
   ACTUALITÉS — catalogue en cartes et page d'article (version PHP)
   ========================================================================= */

/* Sur une carte d'actualité, l'image est un lien : sans display:block, un
   lien reste en ligne et ignore son rapport de proportions. */
.card--actualite .card__media { display: block; }
.card--actualite .card__body { display: flex; flex-direction: column; }
.card--actualite .card__cta { margin-top: auto; align-self: flex-start; }
.card--actualite .card__text { margin-bottom: var(--s-5); }

/* Page sans visuel plein écran : on laisse passer l'en-tête fixe */
.section--sous-entete { padding-top: calc(var(--header-h) + var(--section-y)); }

.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { color: var(--c-accent-hover); }

/* Page d'article : une feuille blanche posée sur la matière claire de la
   section « papier ». Les couleurs inversées de .section--papier valent
   aussi dans la feuille : texte brun foncé, accent brun ocre. */
.article__fond { padding-bottom: var(--section-y); }

/* La feuille se règle sur sa propre colonne de lecture, et non sur la largeur
   de contenu du site : accrochée à --w-content, elle laissait près de 280 px
   de blanc de chaque côté du texte sur un grand écran — le titre semblait
   perdu au milieu d'une page vide.

   Deux réglages plutôt qu'un : la colonne de l'article est élargie à 78
   caractères (contre 66 ailleurs sur le site), et la feuille vaut cette
   colonne plus --s-9 de marge. Sur grand écran : feuille 958 px, texte 766 px,
   blanc 96 px. Le texte occupe donc la feuille au lieu d'y flotter.
   78 caractères dépassent la mesure de lecture habituelle (45 à 75) ; c'est un
   parti pris assumé, le corps de l'article étant large et bien interligné. */
.article__feuille {
  --w-article: 78ch;
  max-width: calc(var(--w-article) + 2 * var(--s-9));
  margin-inline: auto;
  padding: clamp(var(--s-5), 4.5vw, var(--s-8)) clamp(var(--s-5), 5vw, var(--s-8));
  background: #FFFFFF;
  border-radius: var(--radius);
  box-shadow: 0 30px 70px -36px rgb(58 45 30 / 0.5),
              0 0 0 1px rgb(58 45 30 / 0.08);
}

.article__entete,
.article__corps,
/* Rangée de fin d'article : les boutons côte à côte, et non l'un sous l'autre.
   La colonne de texte fait 66 ch — deux boutons à la taille courante n'y
   tiennent pas. Ils sont donc resserrés ici : mêmes cadres, même graisse,
   seuls les flancs et l'interlettrage se réduisent. Sur les écrans étroits,
   la ligne se rompt et les deux boutons prennent toute la largeur, alignés. */
.article__retour {
  max-width: var(--w-article, var(--w-text));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

/* Les deux boutons se partagent la largeur de la colonne : leurs bords
   extérieurs tombent sur ceux du texte. Quand la ligne ne les tient plus,
   chacun passe à la ligne et prend toute la largeur — ils restent alignés. */
.article__retour .btn {
  flex: 1 1 auto;
  padding-inline: var(--s-4);
  letter-spacing: 0.06em;
}

.article__titre { font-size: var(--t-h1); margin-top: var(--s-3); }
.article__date {
  margin-top: var(--s-4);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.article__chapo { margin-top: var(--s-6); }

/* Le visuel prend toute la largeur de la feuille ; le texte garde une
   longueur de ligne confortable. */
/* Le visuel de tête traverse la feuille de bord à bord : la feuille s'étant
   resserrée sur la colonne de lecture, l'image y perdait sa largeur. Elle sort
   donc des marges intérieures, la légende restant, elle, alignée sur le texte. */
.article__visuel {
  margin-block: var(--s-8);
  margin-inline: calc(-1 * clamp(var(--s-5), 5vw, var(--s-8)));
}

.article__visuel img { width: 100%; height: auto; border-radius: 0; }

.article__visuel figcaption { padding-inline: clamp(var(--s-5), 5vw, var(--s-8)); }

.article__corps > h2 { font-size: var(--t-h3); margin-top: 2em; }
.article__corps strong { color: var(--c-bone); }
.article__retour { margin-top: var(--s-8); }
.arw--retour { display: inline-block; transition: transform var(--dur) var(--ease); }
.btn:hover .arw--retour { transform: translateX(-5px); }

/* Grande carte « à la une » : image et texte côte à côte au-dessus de 860 px */
.card--une { margin-bottom: var(--s-7); }
@media (min-width: 860px) {
  .card--une { display: grid; grid-template-columns: 1.15fr 1fr; }
  .card--une .card__media { aspect-ratio: auto; height: 100%; border-radius: calc(var(--radius) - 1px) 0 0 calc(var(--radius) - 1px); }
  .card--une .card__media img { height: 100%; object-fit: cover; }
  .card--une .card__body { padding: clamp(var(--s-6), 4vw, var(--s-8)); justify-content: center; }
  .card--une .card__title { font-size: var(--t-h3); }
}
.card__une { color: var(--c-accent); font-weight: 700; }

/* =========================================================================
   L'ÉQUIPE — groupes et membres, sur la feuille blanche des articles
   ========================================================================= */

/* Vérification anti-robot (Turnstile) : le cadre vient de Cloudflare, on ne
   règle donc que sa place dans le formulaire. */
/* Vérification anti-robot (Turnstile). Aucune hauteur réservée : en mode
   « interaction-only » le cadre reste vide la plupart du temps, et une
   hauteur minimale creusait un trou entre la case d'accord et le bouton.
   Quand Cloudflare décide d'afficher quelque chose, il pose sa propre
   hauteur et la grille suit. */
.field--verif:empty { display: none; }
.field--verif { margin-top: var(--s-3); }

/* Générique des producteurs et soutiens, entre le chapô et les groupes. Il se
   lit en plus petit et plus sourd que le chapô : c'est une mention légale, pas
   une phrase d'accueil. Un filet le sépare du chapô, le même que celui des
   titres de groupes, pour qu'il ne passe pas pour la suite du texte. */
.equipe__credits {
  max-width: var(--w-article, var(--w-text));
  margin: var(--s-7) auto 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border);
  font-size: var(--t-small);
  color: var(--c-text-muted);
  line-height: var(--lh-body);
}

.equipe__credits p + p { margin-top: var(--s-3); }

.equipe { max-width: var(--w-article, var(--w-text)); margin: var(--s-8) auto 0; }

.equipe__groupe + .equipe__groupe { margin-top: var(--s-8); }

.equipe__titre {
  font-size: var(--t-small);
  letter-spacing: var(--ls-sub);
  text-transform: uppercase;
  color: var(--c-accent);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-border);
}

.equipe__sous-titre { margin-top: var(--s-3); font-style: italic; color: var(--c-text-muted); }
.equipe__intro { margin-top: var(--s-4); color: var(--c-bone-2); line-height: var(--lh-body); }

/* Les dernières actualités, en fin de page : la page de l'équipe ne doit pas
   être un cul-de-sac. Deux lignes, date puis titre — pas des cartes : la
   feuille se termine sur du texte, elle n'a pas à devenir un sommaire. */
.equipe__suite { max-width: var(--w-article, var(--w-text)); margin: var(--s-8) auto 0; }

.equipe__actus { margin-top: var(--s-5); display: grid; gap: var(--s-5); }

.equipe__actus time {
  display: block;
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.equipe__actus a {
  display: inline-block;
  margin-top: var(--s-2);
  font-family: var(--f-titre, inherit);
  font-size: var(--t-h4, var(--t-lead));
  line-height: var(--lh-titre, 1.2);
}

.equipe__toutes { margin-top: var(--s-6); font-size: var(--t-small); }

.equipe__liste { display: grid; gap: var(--s-5) var(--s-6); margin-top: var(--s-5); }
@media (min-width: 700px) { .equipe__liste { grid-template-columns: 1fr 1fr; } }

/* Chaque membre porte un rond : sa photo quand nous l'avons, sinon ses
   initiales. Un rond pour tout le monde — la colonne des noms reste alignée,
   et un portrait fourni plus tard remplace un monogramme sans rien déranger.
   Le rond est décoratif : le nom est écrit juste à côté, en toutes lettres. */
.equipe__membre { display: flex; align-items: center; gap: var(--s-4); }
.equipe__identite { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.equipe__nom { font-family: var(--f-display); font-weight: 700; color: var(--c-bone); }
.equipe__role { font-size: var(--t-small); line-height: 1.45; color: var(--c-text-muted); }

.equipe__rond {
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--c-border);
}

/* Le monogramme : même rond, sans photo. Assez présent pour tenir la ligne,
   assez sobre pour ne pas se faire passer pour un portrait. */
.equipe__rond--initiales {
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-size: var(--t-small);
  letter-spacing: 0.06em;
  color: var(--c-accent);
  background: var(--c-ink-2, rgb(255 255 255 / 0.04));
}