/*
 * Annuaire de la transmission-reprise — feuille propre à la page.
 *
 * Chargée APRÈS `socle/css/cci.css`. Elle ne redéfinit aucun composant du
 * socle : elle pose uniquement la mise en page à deux colonnes, la fiche
 * professionnelle et le panneau de filtres, qui n'existent pas dans le socle.
 * Toutes les couleurs viennent des jetons `--cci-*`.
 */

:root {
  --ann-rail: 288px;
}

/* Le socle peint déjà `body`. `html` est peint ici pour que la zone hors
   contenu reste au fond CCI quand la page est ouverte seule, hors iframe. */
html {
  background: var(--cci-canvas);
  color-scheme: light;
}

body {
  color: var(--cci-ink);
}

/* ── En-tête ─────────────────────────────────────────────────────────── */

.ann-header {
  border-bottom: 1px solid var(--cci-border);
  background: var(--cci-surface);
}

.ann-header-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  align-items: flex-end;
  justify-content: space-between;
  width: min(100% - 32px, 1240px);
  margin: 0 auto;
  padding: 26px 0 22px;
}

.ann-titre {
  max-width: 62ch;
}

.ann-eyebrow {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 0 0 8px;
  color: var(--cci-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.ann-eyebrow::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--cci-primary);
}

.ann-titre h1 {
  margin: 0;
  color: var(--cci-ink);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.ann-lead {
  margin: 10px 0 0;
  color: var(--cci-ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

.ann-reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ann-repere-valeur {
  display: block;
  color: var(--cci-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
}

.ann-repere-label {
  display: block;
  margin-top: 2px;
  color: var(--cci-muted);
  font-size: 12px;
}

/* ── Mise en page ────────────────────────────────────────────────────── */

.ann-layout {
  display: grid;
  gap: 24px;
  align-items: start;
  grid-template-columns: var(--ann-rail) minmax(0, 1fr);
}

/* ── Panneau de filtres ──────────────────────────────────────────────── */

.ann-filtres {
  position: sticky;
  top: 16px;
  overflow-y: auto;
  max-height: calc(100vh - 32px);
  padding: 18px;
  border: 1px solid var(--cci-border);
  border-radius: var(--cci-radius-lg);
  background: var(--cci-surface);
  box-shadow: var(--cci-shadow-sm);
}

.ann-filtres-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.ann-filtres-head h2 {
  margin: 0;
  color: var(--cci-ink);
  font-size: 15px;
  font-weight: 700;
}

.ann-raz {
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--cci-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ann-raz:disabled {
  color: var(--cci-subtle);
  cursor: default;
}

.ann-raz:focus-visible {
  outline: 2px solid var(--cci-primary);
  outline-offset: 2px;
}

/* Fermeture et bouton de validation n'existent que dans le panneau mobile :
   sur ordinateur, la colonne est toujours là et n'a rien à valider. */
.ann-fermer,
.ann-filtres-pied {
  display: none;
}

.ann-groupe {
  margin: 0;
  padding: 0;
  border: 0;
}

.ann-groupe + .ann-groupe {
  margin-top: 16px;
}

/* `float` sort la légende du rendu particulier que le navigateur lui réserve :
   posée dans la bordure du `fieldset`, elle était barrée par le trait de
   séparation. Flottante, elle se comporte comme un bloc ordinaire et porte
   elle-même ce trait. */
.ann-groupe legend {
  float: left;
  width: 100%;
  padding: 16px 0 0;
  border-top: 1px solid var(--cci-border);
  color: var(--cci-ink);
  font-size: 13px;
  font-weight: 700;
}

.ann-options {
  display: grid;
  clear: both;
  gap: 2px;
  padding-top: 8px;
}

/* `.cci-checkbox` du socle, avec le compteur aligné à droite et une cible
   tactile qui atteint la hauteur recommandée sans changer le composant. */
.ann-option {
  align-items: center;
  padding: 7px 8px;
  border-radius: var(--cci-radius-sm);
  font-size: 13px;
}

.ann-option:hover {
  background: var(--cci-canvas);
}

.ann-option:has(input:focus-visible) {
  outline: 2px solid var(--cci-primary);
  outline-offset: -2px;
}

.ann-option input {
  margin-top: 0;
  accent-color: var(--cci-primary);
}

.ann-option-libelle {
  flex: 1;
  min-width: 0;
}

.ann-option-nb {
  flex: 0 0 auto;
  /* `--cci-subtle` conviendrait à une décoration ; ce compteur porte une
     information, il prend donc le gris qui passe le seuil de contraste. */
  color: var(--cci-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.ann-option:has(input:checked) .ann-option-libelle {
  color: var(--cci-primary);
  font-weight: 600;
}

.ann-option.is-vide {
  opacity: .45;
}

/* ── Résultats ───────────────────────────────────────────────────────── */

/* Sans cela, une longue description sans espace pousserait la colonne au-delà
   de la grille : la valeur par défaut d'un élément de grille est `auto`, pas 0. */
.ann-resultats {
  min-width: 0;
}

.ann-barre {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.ann-total {
  margin: 0;
  color: var(--cci-ink);
  font-size: 15px;
  font-weight: 600;
}

.ann-total span {
  color: var(--cci-muted);
  font-weight: 400;
}

.ann-tri {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--cci-muted);
  font-size: 13px;
}

.ann-tri select {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--cci-border);
  border-radius: var(--cci-radius-sm);
  background: var(--cci-surface);
  color: var(--cci-ink);
  font: inherit;
  font-size: 13px;
}

.ann-tri select:focus {
  outline: none;
  border-color: var(--cci-primary);
  box-shadow: 0 0 0 3px var(--cci-primary-soft);
}

.ann-actifs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.ann-actifs:empty {
  display: none;
}

.ann-chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 5px 8px 5px 12px;
  border: 1px solid var(--cci-primary-border);
  border-radius: var(--cci-radius-pill);
  background: var(--cci-primary-soft);
  color: var(--cci-primary);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.ann-chip:hover {
  background: #e3e5ff;
}

.ann-chip:focus-visible {
  outline: 2px solid var(--cci-primary);
  outline-offset: 2px;
}

.ann-chip svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* ── Fiche professionnelle ───────────────────────────────────────────── */

.ann-grille {
  grid-template-columns: repeat(auto-fill, minmax(318px, 1fr));
}

.ann-fiche {
  gap: 14px;
  padding: 18px;
}

.ann-fiche-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.ann-logo {
  display: grid;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--cci-border);
  border-radius: var(--cci-radius-md);
  background: var(--cci-surface);
}

.ann-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ann-logo.is-initiales {
  border-color: var(--cci-primary-border);
  background: var(--cci-primary-soft);
  color: var(--cci-primary);
  font-size: 17px;
  font-weight: 700;
}

.ann-identite {
  min-width: 0;
}

.ann-fiche h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.ann-contact {
  margin: 3px 0 0;
  color: var(--cci-muted);
  font-size: 13px;
}

.ann-lieu {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  margin-top: 6px;
  color: var(--cci-muted);
  font-size: 12px;
}

.ann-lieu svg {
  width: 13px;
  height: 13px;
  fill: var(--cci-subtle);
}

.ann-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ann-desc {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--cci-ink-soft);
  font-size: 13px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.ann-desc.is-absente {
  color: var(--cci-subtle);
  font-style: italic;
}

.ann-meta {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--cci-border);
  font-size: 12px;
}

.ann-meta div {
  display: flex;
  gap: 8px;
}

.ann-meta dt {
  flex: 0 0 96px;
  color: var(--cci-subtle);
}

.ann-meta dd {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--cci-ink-soft);
}

.ann-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

.ann-actions .cci-btn {
  flex: 1;
}

/* ── Détail ──────────────────────────────────────────────────────────── */

.ann-detail {
  display: grid;
  gap: 20px;
}

.ann-detail h3 {
  margin: 0 0 8px;
  color: var(--cci-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ann-detail p {
  margin: 0;
  color: var(--cci-ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

.ann-colonnes {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.ann-liste {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--cci-ink-soft);
  font-size: 14px;
}

.ann-liste li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.5;
}

.ann-liste li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--cci-primary-clair);
}

.ann-coordonnees {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--cci-border);
  border-radius: var(--cci-radius-md);
  background: var(--cci-canvas);
  font-size: 14px;
}

.ann-coordonnees div {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.ann-coordonnees svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  fill: var(--cci-subtle);
}

.ann-coordonnees a {
  overflow-wrap: anywhere;
  color: var(--cci-primary);
}

.ann-note {
  margin: 0;
  color: var(--cci-muted);
  font-size: 12px;
  line-height: 1.5;
}

/* Un lien dans une phrase reste souligné ; une action ne l'est jamais. */
.ann-lead a,
.ann-note a,
.ann-coordonnees a {
  text-decoration: underline;
}

.ann-pied {
  width: min(100% - 32px, 1240px);
  margin: 0 auto;
  padding: 22px 0 40px;
  border-top: 1px solid var(--cci-border);
  color: var(--cci-muted);
  font-size: 12px;
  line-height: 1.6;
}

/* ── Bascule mobile ──────────────────────────────────────────────────── */

.ann-bascule {
  display: none;
}

.ann-bascule-nb {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  place-items: center;
  border-radius: var(--cci-radius-pill);
  background: var(--cci-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.ann-bascule-nb[hidden] {
  display: none;
}

/* ── Afficher la suite ───────────────────────────────────────────────── */

.ann-suite {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.ann-suite[hidden] {
  display: none;
}

@media (max-width: 1023px) {
  .ann-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .ann-bascule {
    display: inline-flex;
    width: 100%;
  }

  /* Déplié en pleine page, ce panneau mesurait 3 153 px — presque quatre écrans
     de téléphone — et repoussait les résultats à 3 685 px du haut : cocher un
     critère obligeait à remonter quatre écrans pour en voir l'effet. Il devient
     donc un volet qui recouvre l'écran, avec son propre défilement et un bouton
     de retour aux résultats toujours visible en bas. */
  .ann-filtres {
    position: fixed;
    z-index: 40;
    display: flex;
    flex-direction: column;
    inset: 0;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* `dvh` suit la barre d'adresse des navigateurs mobiles, qui se replie au
     défilement ; `vh` seul ferait dépasser le bas du volet sous cette barre. */
  @supports (height: 100dvh) {
    .ann-filtres {
      height: 100dvh;
    }
  }

  /* Le repli est porté par une classe et par cette règle, et non par
     l'attribut `hidden` : sur un grand écran, la colonne reste visible même si
     le script n'a pas tourné ou si l'état du bouton est resté sur « replié ». */
  .ann-filtres.is-replie {
    display: none;
  }

  .ann-filtres-head {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cci-border);
    background: var(--cci-surface);
  }

  .ann-filtres-corps {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
  }

  .ann-filtres-pied {
    display: block;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--cci-border);
    background: var(--cci-surface);
  }

  .ann-filtres-pied .cci-btn {
    width: 100%;
  }

  .ann-fermer {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 0;
    border-radius: var(--cci-radius-sm);
    background: var(--cci-canvas);
    color: var(--cci-muted);
    cursor: pointer;
  }

  .ann-fermer svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
  }

}

/* Pendant qu'un volet ou une fiche recouvre l'écran, la liste derrière ne
   défile pas : on ressortirait ailleurs qu'on était entré. */
body.ann-fige {
  overflow: hidden;
}

@media (max-width: 700px) {
  .ann-header-inner {
    align-items: flex-start;
    padding: 18px 0 16px;
  }

  .ann-titre h1 {
    font-size: 22px;
  }

  .ann-lead {
    font-size: 14px;
  }

  /* Les trois repères répètent, sur 120 px de haut, un chiffre que la barre de
     résultats affiche déjà quelques lignes plus bas. Sur un écran de téléphone,
     c'est le premier écran entier consommé avant la première fiche. */
  .ann-reperes {
    display: none;
  }

  .ann-grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .ann-meta dt {
    flex-basis: 84px;
  }

  /* Au doigt, la case et son libellé doivent offrir une cible d'environ 44 px
     de haut, comme les boutons et les champs du socle. */
  .ann-option {
    padding: 12px 8px;
  }

  .ann-actions {
    flex-direction: column;
  }
}