/* ============================================================
   ANIMA — centres reliés aux séjours (spec 2026-10-05-centres-design.md § 5) · préfixe `cen-`
   Recherche de centre (combobox), carte « Centre » de la page du séjour, fiche pratique avec provenance, ressources autour,
   page Centres (catalogue), préremplissage planning / convoyage. Aucune couleur en dur : tokens de css/tokens.css seulement.
   Les media queries viennent APRÈS les règles de base.
   ============================================================ */

/* Un attribut [hidden] doit gagner sur les display posés plus bas (grille, flex). */
.cen-zone [hidden], .cen-rech [hidden], .cen-champ-zone [hidden], .cen-espaces[hidden], .cen-suggest[hidden],
.cen-creation[hidden], .cen-retour[hidden], .cen-modes [hidden], .cen-pager[hidden] { display: none !important; }

/* ---------- Carte « Centre » (page du séjour, sous la tête) ---------- */
.cen-zone { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.cen-carte {
  display: grid; gap: var(--sp-3); padding: var(--sp-4); min-width: 0;
  background: var(--s1); border: 1px solid var(--ligne); border-left: 4px solid var(--accent); border-radius: var(--r-lg); color: var(--texte);
}
.cen-carte[data-etat="proposition"] { background: var(--accent-fond); border-color: var(--accent-filet); border-left-color: var(--accent); }
.cen-carte[data-etat="vide"] { border-left-color: var(--ligne-2); }
.cen-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-4); align-items: start; }
.cen-kicker { grid-column: 1 / -1; margin: 0 0 var(--sp-1); font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.cen-titre { grid-column: 1; margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.2; overflow-wrap: anywhere; }
.cen-titre:focus { outline: none; }
.cen-titre:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cen-sous { grid-column: 1; margin: var(--sp-1) 0 0; color: var(--texte-2); font-size: .92rem; }
.cen-bascule { grid-column: 2; grid-row: 2 / span 2; align-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-1); border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.cen-corps { display: grid; gap: var(--sp-4); min-width: 0; }
.cen-grille { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); min-width: 0; }
.cen-col { display: grid; gap: var(--sp-2); align-content: start; min-width: 0; }
.cen-h { margin: var(--sp-2) 0 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--texte-2); }
.cen-h:first-child { margin-top: 0; }
.cen-proposition { margin: 0; font-size: 1.1rem; line-height: 1.35; overflow-wrap: anywhere; }
.cen-aide { margin: 0; color: var(--texte-2); font-size: .9rem; line-height: 1.45; }
.cen-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.cen-pied { display: grid; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--ligne); }
.cen-changer, .cen-delier, .cen-vers-tous, .cen-autre { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; justify-self: start; }
.cen-vide, .cen-attente { margin: 0; color: var(--texte-2); font-size: .92rem; }
.cen-erreur { margin: 0; color: var(--critique); font-size: .9rem; }
.cen-statut { margin: var(--sp-1) 0 0; color: var(--texte-2); font-size: .85rem; }
.cen-attrib-zone:empty { display: none; }
.cen-attributions { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--texte-2); overflow-wrap: anywhere; }
.cen-lien { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-filet); text-underline-offset: 3px; overflow-wrap: anywhere; }
.cen-lien:hover { color: var(--survol-texte); }

/* ---------- Fiche pratique : une ligne par donnée, la provenance dessous ---------- */
.cen-fiche { display: grid; gap: 0; margin: 0; }
.cen-ligne { display: grid; grid-template-columns: minmax(5.5rem, 8.5rem) minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--ligne); }
.cen-ligne:first-child { border-top: 0; }
.cen-ligne-lib { margin: 0; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--texte-2); padding-top: .2rem; }
.cen-ligne-val { margin: 0; min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
.cen-note { color: var(--texte-2); font-size: .85rem; }
/* Bandeau de source : UN par fiche, en tête ; il dit d'où viennent les champs à vérifier et porte « Tout confirmer ». */
.cen-fiche-bloc { display: grid; gap: var(--sp-2); min-width: 0; }
.cen-bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); padding: var(--sp-2) var(--sp-3); background: var(--alerte-fond); border: 1px solid var(--alerte-filet); border-radius: var(--r-xs); }
.cen-bandeau-txt { flex: 1 1 16rem; min-width: 0; margin: 0; font-size: .84rem; line-height: 1.45; color: var(--texte); overflow-wrap: anywhere; }
.cen-lien-source { white-space: nowrap; }
.cen-tout-confirmer { flex: none; min-height: 44px; }
.cen-tout-confirmer:disabled { opacity: .6; cursor: default; }
/* Par champ : une marque discrète (texte court, pas de bloc) et une confirmation unitaire compacte (zone tactile de 44 px par ::after, sans gonfler la ligne). */
.cen-marque { display: inline; font-size: .74rem; font-style: italic; color: var(--alerte); white-space: nowrap; }
.cen-confirmer-un { position: relative; display: inline; min-height: 0; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: .8rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cen-confirmer-un::after { content: ''; position: absolute; inset: -.85rem -.6rem; }
.cen-confirmer-un:disabled { opacity: .6; cursor: default; }
.cen-echec { color: var(--critique); font-size: .82rem; }

/* ---------- Ressources autour : « Pharmacie · Villé · 4,2 km » ---------- */
.cen-ressources { display: grid; gap: var(--sp-2); min-width: 0; }
.cen-approx { margin: 0; padding: var(--sp-2) var(--sp-3); font-size: .85rem; background: var(--alerte-fond); border: 1px solid var(--alerte-filet); border-radius: var(--r-xs); }
.cen-res-liste { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.cen-res { padding: var(--sp-2) 0; border-top: 1px solid var(--ligne); line-height: 1.4; overflow-wrap: anywhere; }
.cen-res:first-child { border-top: 0; }
.cen-res-lib { font-weight: 600; }
.cen-res-dist { font-family: var(--mono); font-size: .88rem; white-space: nowrap; }
.cen-res-aucun { color: var(--texte-2); font-size: .9rem; }
.cen-memoire { display: grid; gap: var(--sp-1); }
.cen-memoire-ligne { margin: 0; font-size: 1.02rem; }
.cen-lien-fiche { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Recherche de centre (combobox) ---------- */
.cen-champ-zone, .cen-rech-bloc { display: grid; gap: var(--sp-2); min-width: 0; margin-top: var(--sp-1); }
.cen-rech { display: grid; gap: var(--sp-2); min-width: 0; }
.cen-liste { margin: 0; padding: 0; list-style: none; background: var(--s1); border: 1px solid var(--ligne-2); border-radius: var(--r-md); overflow: hidden; }
.cen-option { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem var(--sp-2); min-height: 44px; padding: .55rem var(--sp-3); cursor: pointer; border-top: 1px solid var(--ligne); }
.cen-option:first-child { border-top: 0; }
.cen-option-nom { font-weight: 600; overflow-wrap: anywhere; }
.cen-option-meta { color: var(--texte-2); font-size: .9rem; }
.cen-option:hover, .cen-option.est-actif { background: var(--accent-fond); }
.cen-option.est-actif { box-shadow: inset 3px 0 0 var(--accent); }
.cen-option-ajout { color: var(--accent); font-weight: 600; }
.cen-lie { margin: 0; padding: var(--sp-2) var(--sp-3); font-size: .88rem; background: var(--ok-fond); border: 1px solid var(--ok); border-radius: var(--r-xs); }
.cen-creation { display: grid; gap: var(--sp-3); padding: var(--sp-4); background: var(--s2); border: 1px solid var(--ligne-2); border-radius: var(--r-md); }
.cen-creation-titre { margin: 0; font-weight: 600; }
.cen-champ { display: grid; gap: var(--sp-1); }
.cen-retour { display: grid; gap: var(--sp-2); justify-items: start; }
.cen-doublon { margin: 0; line-height: 1.45; }

/* ---------- Espaces du centre (fiche) et préremplissage du planning ---------- */
.cen-espaces-liste { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-3); padding: 0; list-style: none; }
.cen-espace { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 0 0 0 var(--sp-3); background: var(--s2); border: 1px solid var(--ligne-2); border-radius: var(--r-md); }
.cen-espace-retirer { min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--texte-2); font: inherit; cursor: pointer; }
.cen-espace-retirer:hover { color: var(--critique); }
.cen-espaces-ajout { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cen-espaces-ajout input { flex: 1 1 14rem; min-width: 0; }
.cen-espaces { display: grid; gap: var(--sp-2); justify-items: start; margin: var(--sp-2) 0; padding: var(--sp-3); background: var(--accent-fond); border: 1px solid var(--accent-filet); border-radius: var(--r-md); }

/* ---------- Convoyage : suggestions sous le champ de lieu ---------- */
.cen-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin: var(--sp-1) 0 var(--sp-3); }
.cen-suggest-lib { color: var(--texte-2); font-size: .85rem; }
.cen-suggest-puce { min-height: 44px; padding: 0 var(--sp-3); font: inherit; font-size: .9rem; text-align: left; color: var(--texte); background: var(--s2); border: 1px solid var(--ligne-2); border-radius: var(--r-md); cursor: pointer; overflow-wrap: anywhere; }
.cen-suggest-puce:hover { background: var(--accent-fond); border-color: var(--accent-filet); }

/* ---------- Page Centres : ouverture sur « fréquentés », puis tout le catalogue, paginé ---------- */
.cen-modes { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0; }
.cen-mode { min-height: 44px; padding: 0 var(--sp-4); font: inherit; font-weight: 600; color: var(--texte); background: var(--s1); border: 1px solid var(--ligne-2); border-radius: var(--r-md); cursor: pointer; }
.cen-mode[aria-pressed="true"] { color: var(--sur-accent); background: var(--accent); border-color: var(--accent); }
.cen-pistes { margin: var(--sp-3) 0; color: var(--texte-2); }
.cen-pistes:empty { display: none; }
.cen-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-4) 0; }
.cen-page-pos { margin: 0; font-family: var(--mono); font-size: .85rem; color: var(--texte-2); }
.cen-page-btn { min-height: 44px; padding: 0 var(--sp-4); font: inherit; color: var(--texte); background: var(--s1); border: 1px solid var(--ligne-2); border-radius: var(--r-md); cursor: pointer; }
.cen-page-btn:disabled { opacity: .5; cursor: default; }

/* ---------- Filtres de la page Centres : une rubrique pleine largeur, les 4 champs sur une ligne dès l'ordinateur ---------- */
form.cen-filtres { grid-template-columns: minmax(0, 1fr); }
.cen-filtres-champs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); align-items: end; }
.cen-filtres-champs > * { margin-top: 0; }
.cen-type button { height: 100%; }

/* ---------- Écrans larges, puis téléphone ---------- */
@media (min-width: 520px) {
  .cen-filtres-champs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .cen-grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .cen-filtres-champs { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); }
}
@media (max-width: 520px) {
  .cen-ligne { grid-template-columns: minmax(0, 1fr); gap: 0; padding: .4rem 0; }
  .cen-ligne-lib { padding-top: 0; }
  .cen-res { padding: .4rem 0; }
  .cen-titre { font-size: 1.25rem; }
  .cen-mode { flex: 1 1 100%; }
}