/* BNTIC Opportunités Africa.
 *
 * TROIS RÈGLES QUE CETTE FEUILLE S'IMPOSE
 * ---------------------------------------------------------------------------
 * 1. ELLE N'IMPOSE NI POLICE NI COULEUR DE MARQUE. Tout est tiré des variables
 *    du site, avec un repli explicite. Une feuille d'application qui choisit sa
 *    propre police se voit au premier changement de thème, et jure avec le
 *    reste du site le reste du temps.
 *
 * 2. TOUT EST PRÉFIXÉ « op- ». Aucune collision possible avec les autres
 *    observatoires, même chargés sur la même page.
 *
 * 3. L'ESPACE ET LE RYTHME FONT L'ÉLÉGANCE, pas les effets. Une échelle
 *    d'espacement de six valeurs, une échelle typographique de six tailles, et
 *    l'on s'y tient. Les ombres sont presque absentes, les bordures fines, les
 *    angles constants.
 *
 * LA LARGEUR DE LECTURE EST BORNÉE, PAS LA PAGE
 * ---------------------------------------------------------------------------
 * Un paragraphe se lit mal au-delà de soixante-dix caractères. Mais borner la
 * PAGE laisserait la moitié droite vide sur les écrans larges. On borne donc la
 * MESURE du texte, et l'on emploie des grilles pour occuper la largeur : deux
 * colonnes pour les questions, deux pour le maillage, et une colonne latérale
 * sur la fiche d'une offre.
 */

.op-cadre {
  /* --- Couleurs, toutes héritées du site ------------------------------- */
  --op-encre: var(--bs-body-color, #1f2933);
  --op-encre-douce: var(--bs-secondary-color, #5b6672);
  --op-fond: var(--bs-body-bg, #ffffff);
  --op-fond-doux: var(--bs-tertiary-bg, #f6f8fa);
  --op-trait: var(--bs-border-color, #dfe5ea);
  --op-accent: var(--bs-primary, #0f766e);
  --op-urgent: #b45309;
  --op-clos: #b91c1c;
  --op-ok: #0f766e;

  /* --- Échelle d'espacement --------------------------------------------- */
  --op-1: 0.25rem;
  --op-2: 0.5rem;
  --op-3: 0.75rem;
  --op-4: 1rem;
  --op-5: 1.5rem;
  --op-6: 2.25rem;
  --op-7: 3.5rem;

  /* --- Formes ------------------------------------------------------------ */
  --op-rayon: 14px;
  --op-rayon-petit: 8px;
  --op-mesure: 68ch;

  color: var(--op-encre);
  /* Les chiffres de dates et de comptes s'alignent en colonne. */
  font-variant-numeric: tabular-nums;
}

/* Un repère de mise au point visible, partout. Sans lui, une navigation au
 * clavier se fait à l'aveugle. */
.op-cadre a:focus-visible,
.op-cadre button:focus-visible {
  outline: 2px solid var(--op-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ===========================================================================
   LA BARRE DE L'APPLICATION
   =========================================================================== */
.op-barre {
  border-bottom: 1px solid var(--op-trait);
  background: var(--op-fond-doux);
}
.op-barre__inner {
  display: flex;
  align-items: center;
  gap: var(--op-5);
  min-height: 3.5rem;
  flex-wrap: wrap;
}
.op-marque {
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--op-encre);
  white-space: nowrap;
}
.op-marque i { color: var(--op-accent); }
.op-barre__defile { overflow-x: auto; flex: 1 1 auto; scrollbar-width: thin; }
.op-barre__liens { display: flex; gap: var(--op-5); white-space: nowrap; }
.op-barre__liens a {
  text-decoration: none;
  color: var(--op-encre-douce);
  font-size: 0.9375rem;
  padding: 0.45rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.op-barre__liens a:hover,
.op-barre__liens a[aria-current="page"] {
  color: var(--op-encre);
  border-bottom-color: var(--op-accent);
}

/* ===========================================================================
   FIL D'ARIANE
   =========================================================================== */
.op-ariane { padding: var(--op-4) 0 0; font-size: 0.875rem; }
.op-ariane ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  color: var(--op-encre-douce);
}
/* Le séparateur s'écrit avec des espaces insécables : une espace ordinaire
 * dans « content » est repliée par le moteur de rendu et les mots se collent. */
.op-ariane li + li::before { content: "\00A0\203A\00A0"; opacity: 0.6; }
.op-ariane a { color: inherit; text-decoration: none; }
.op-ariane a:hover { text-decoration: underline; }
.op-ariane [aria-current="page"] { color: var(--op-encre); }

/* ===========================================================================
   L'EN-TÊTE DE PAGE
   =========================================================================== */
.op-tete { padding: var(--op-5) 0 var(--op-4); }
.op-tete--large { padding-bottom: var(--op-5); }
.op-kicker {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--op-accent);
  font-weight: 650;
}
.op-tete h1,
.op-fiche h1 {
  margin: var(--op-3) 0 var(--op-4);
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  /* Une mesure, pas une largeur : un titre long doit tenir en deux lignes, pas
   * en trois. Vingt-quatre caractères le cassaient en trois. */
  max-width: min(100%, 30ch);
  text-wrap: balance;
}
.op-tete__reponse {
  max-width: var(--op-mesure);
  color: var(--op-encre-douce);
  font-size: 1.0625rem;
  line-height: 1.65;
  margin: 0;
}
.op-tete__reponse strong { color: var(--op-encre); font-weight: 650; }

.op-titre-section {
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0 0 var(--op-4);
  padding-bottom: var(--op-3);
  border-bottom: 1px solid var(--op-trait);
}

/* ===========================================================================
   LES SIX FAMILLES
   =========================================================================== */
.op-familles { padding: var(--op-4) 0; }
/* Deux colonnes, puis trois. Six familles se rangent alors en 3 + 3, tandis
 * qu'un « auto-fit » en donnait quatre puis deux, et la seconde rangée restait
 * bancale à la moitié de la largeur. */
.op-familles__grille {
  display: grid;
  gap: var(--op-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px) {
  .op-familles__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.op-famille {
  display: flex;
  flex-direction: column;
  gap: var(--op-1);
  padding: var(--op-4) var(--op-4) var(--op-5);
  border: 1px solid var(--op-trait);
  border-radius: var(--op-rayon);
  text-decoration: none;
  color: inherit;
  background: var(--op-fond);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.op-famille:hover {
  border-color: var(--op-accent);
  transform: translateY(-2px);
}
.op-famille--vide { opacity: 0.6; }
.op-famille--vide:hover { transform: none; }
.op-famille__nombre {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--op-accent);
}
.op-famille--vide .op-famille__nombre { color: var(--op-encre-douce); }
.op-famille__nom { font-weight: 650; margin-top: var(--op-1); }
.op-famille__intention {
  font-size: 0.8125rem;
  color: var(--op-encre-douce);
  line-height: 1.5;
}

/* ===========================================================================
   LES CARTES
   =========================================================================== */
.op-liste { padding: var(--op-6) 0 0; }
.op-grille {
  display: grid;
  gap: var(--op-3);
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  align-items: stretch;
}
.op-carte {
  /* Trois rangées dont la dernière est collée en bas : sans cela, des titres
   * de longueurs inégales font flotter les émetteurs à des hauteurs
   * différentes, et six cartes se lisent comme un escalier. */
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid var(--op-trait);
  border-radius: var(--op-rayon);
  padding: var(--op-4);
  background: var(--op-fond);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.op-carte:hover { border-color: var(--op-accent); transform: translateY(-2px); }

.op-carte__echeance {
  display: flex;
  align-items: center;
  gap: var(--op-2);
  flex-wrap: wrap;
  margin: 0 0 var(--op-3);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--op-encre-douce);
}
/* Un point plutôt qu'un liseré : à douze cartes, douze liserés font un
 * drapeau, un point se lit sans crier. */
.op-point {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--op-encre-douce);
  flex: none;
}
.op-carte--urgente .op-point { background: var(--op-urgent); }
.op-carte--urgente .op-carte__echeance { color: var(--op-urgent); }
.op-carte--proche .op-point { background: var(--op-ok); }
.op-carte--passee { opacity: 0.65; }
.op-carte--passee .op-point { background: var(--op-clos); }
.op-point--sans { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.op-carte__reserve {
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--op-urgent);
}

.op-carte__titre {
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 var(--op-4);
}
.op-carte__titre a { color: inherit; text-decoration: none; }
.op-carte__titre a:hover { text-decoration: underline; text-underline-offset: 3px; }

.op-carte__pied { align-self: end; }
.op-carte__meta {
  margin: 0 0 var(--op-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--op-1);
}
.op-carte__emetteur {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--op-encre-douce);
}

.op-etiquette {
  display: inline-block;
  font-size: 0.6875rem;
  letter-spacing: 0.01em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--op-fond-doux);
  border: 1px solid var(--op-trait);
  color: var(--op-encre-douce);
  white-space: nowrap;
}
.op-etiquette--sobre { background: transparent; }

/* ===========================================================================
   PAGINATION, PAGE VIDE
   =========================================================================== */
.op-pagination {
  display: flex;
  gap: var(--op-5);
  align-items: center;
  margin-top: var(--op-5);
  font-size: 0.9375rem;
}
.op-pagination__lien { text-decoration: none; font-weight: 600; }
.op-pagination__lien:hover { text-decoration: underline; }
.op-pagination__rang { color: var(--op-encre-douce); }

.op-vide {
  padding: var(--op-5) 0 0;
}
.op-vide p {
  max-width: var(--op-mesure);
  margin: 0;
  color: var(--op-encre-douce);
}

/* ===========================================================================
   MAILLAGE ET QUESTIONS, EN DEUX COLONNES
   =========================================================================== */
.op-liens {
  display: grid;
  gap: var(--op-5) var(--op-7);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  padding: var(--op-6) 0 0;
}
.op-pastilles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--op-2);
}
.op-pastilles a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--op-2);
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--op-trait);
  border-radius: 999px;
  text-decoration: none;
  color: var(--op-encre);
  font-size: 0.875rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.op-pastilles a:hover {
  border-color: var(--op-accent);
  background: var(--op-fond-doux);
}
.op-pastilles a span {
  color: var(--op-encre-douce);
  font-size: 0.75rem;
}

.op-faq { padding: var(--op-6) 0 0; }
.op-faq__grille {
  display: grid;
  gap: var(--op-5) var(--op-7);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin: 0;
}
.op-faq__grille--simple { grid-template-columns: 1fr; gap: var(--op-4); }
.op-faq__entree dt {
  font-weight: 650;
  margin-bottom: var(--op-2);
  line-height: 1.4;
}
.op-faq__entree dd {
  margin: 0;
  color: var(--op-encre-douce);
  max-width: var(--op-mesure);
  line-height: 1.65;
}

/* ===========================================================================
   LA FICHE D'UNE OFFRE
   =========================================================================== */
.op-fiche { padding: var(--op-5) 0 0; }
/* TROIS ZONES, DEUX ORDRES DE LECTURE.
 *
 * Sur un téléphone, une colonne unique suit l'ordre du document : titre,
 * encart, corps. L'échéance et le bouton arrivent donc juste après le titre,
 * là où se prend la décision. Placés après les questions fréquentes, ils
 * tombaient tout en bas d'une page longue, et c'était une faute.
 *
 * Au-delà de 900 pixels, l'encart passe dans une seconde colonne et y reste
 * visible pendant la lecture. */
.op-fiche__grille {
  display: grid;
  gap: var(--op-5);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "titre" "cote" "corps";
}
.op-fiche__titre { grid-area: titre; }
.op-fiche__cote { grid-area: cote; }
.op-fiche__corps { grid-area: corps; }

@media (min-width: 900px) {
  .op-fiche__grille {
    grid-template-columns: minmax(0, 1fr) 21rem;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "titre cote"
      "corps cote";
    column-gap: var(--op-7);
    align-items: start;
  }
  .op-fiche__cote { position: sticky; top: var(--op-5); }
}
.op-fiche h1 { max-width: 28ch; }

.op-avis {
  border-radius: var(--op-rayon);
  padding: var(--op-4);
  margin: 0 0 var(--op-5);
  border: 1px solid var(--op-trait);
  border-left-width: 3px;
  background: var(--op-fond-doux);
  max-width: var(--op-mesure);
}
.op-avis--close { border-left-color: var(--op-clos); }
.op-avis--doute { border-left-color: var(--op-urgent); }

.op-resume {
  max-width: var(--op-mesure);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--op-encre-douce);
}
.op-resume p { margin: 0 0 var(--op-4); }

/* --- L'encart des faits ---------------------------------------------- */
.op-encart {
  border: 1px solid var(--op-trait);
  border-radius: var(--op-rayon);
  padding: var(--op-5);
  background: var(--op-fond-doux);
}
.op-encart__echeance {
  display: flex;
  flex-direction: column;
  gap: var(--op-1);
  margin: 0 0 var(--op-5);
  padding-bottom: var(--op-4);
  border-bottom: 1px solid var(--op-trait);
}
.op-encart__etiquette {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--op-encre-douce);
}
.op-encart__echeance time {
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.op-encart__reste { font-size: 0.875rem; color: var(--op-encre-douce); }
.op-encart__sans { font-size: 1rem; color: var(--op-encre-douce); }

.op-faits { margin: 0 0 var(--op-5); display: grid; gap: var(--op-4); }
.op-faits dt {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--op-encre-douce);
  margin-bottom: 0.15rem;
}
.op-faits dd { margin: 0; font-weight: 600; line-height: 1.45; }

.op-postuler { margin: 0 0 var(--op-2); }
.op-bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--op-2);
  width: 100%;
  padding: 0.8rem 1.2rem;
  border-radius: var(--op-rayon-petit);
  background: var(--op-accent);
  color: #fff;
  text-decoration: none;
  font-weight: 650;
  transition: filter 0.15s ease;
}
.op-bouton:hover { filter: brightness(1.08); color: #fff; }
.op-postuler__note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--op-encre-douce);
  text-align: center;
  line-height: 1.5;
}

.op-verifie { padding: var(--op-6) 0 0; }
.op-verifie ul {
  margin: 0;
  padding-left: 1.1rem;
  max-width: var(--op-mesure);
}
.op-verifie li { margin-bottom: var(--op-3); color: var(--op-encre-douce); }
.op-verifie li strong { color: var(--op-encre); }
.op-verifie__cite {
  display: inline-block;
  margin-top: var(--op-1);
  font-style: italic;
  font-size: 0.875rem;
}

/* ===========================================================================
   SOURCES ET MÉTHODE
   =========================================================================== */
.op-sources { padding: var(--op-5) 0 0; }
.op-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.op-table caption {
  text-align: left;
  color: var(--op-encre-douce);
  font-size: 0.875rem;
  padding-bottom: var(--op-3);
}
.op-table th,
.op-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--op-3) var(--op-4) var(--op-3) 0;
  border-bottom: 1px solid var(--op-trait);
}
.op-table thead th {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--op-encre-douce);
  font-weight: 600;
  border-bottom-width: 2px;
}
.op-table tbody th { font-weight: 650; }
.op-table tbody tr:last-child th,
.op-table tbody tr:last-child td { border-bottom: none; }
.op-sources__note {
  display: block;
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--op-encre-douce);
  margin-top: var(--op-1);
  max-width: 52ch;
  line-height: 1.5;
}
.op-sources__absent { color: var(--op-urgent); }
.op-sources__licences {
  margin-top: var(--op-6);
  max-width: var(--op-mesure);
}
.op-sources__licences p { color: var(--op-encre-douce); line-height: 1.7; }

/* La mesure porte sur les ENFANTS, pas sur la section.
 *
 * « op-methode » est posée sur le même élément que « container », qui centre
 * son contenu. Lui donner une largeur maximale la centrait donc elle-même, et
 * la page avait deux marges gauches : le titre au bord, le texte au milieu.
 * En bornant les enfants, tout s'aligne sur la même verticale. */
.op-methode { padding: var(--op-5) 0 0; }
.op-etapes,
.op-methode__limites,
.op-methode__alerte { max-width: var(--op-mesure); }
.op-etapes {
  list-style: none;
  counter-reset: etape;
  margin: 0;
  padding: 0;
}
.op-etapes > li {
  counter-increment: etape;
  position: relative;
  padding: 0 0 var(--op-5) var(--op-6);
  border-left: 1px solid var(--op-trait);
}
.op-etapes > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.op-etapes > li::before {
  content: counter(etape);
  position: absolute;
  left: -0.95rem;
  top: 0;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--op-fond);
  border: 1px solid var(--op-trait);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--op-accent);
}
.op-etapes h2 {
  font-size: 1.0625rem;
  font-weight: 650;
  margin: 0.15rem 0 var(--op-2);
  line-height: 1.35;
}
.op-etapes p { color: var(--op-encre-douce); margin: 0; line-height: 1.7; }

.op-methode__limites { margin-top: var(--op-6); }
.op-methode__limites h2,
.op-methode__alerte h2 { font-size: 1.0625rem; margin: 0 0 var(--op-3); }
.op-methode__limites p,
.op-methode__alerte p { color: var(--op-encre-douce); line-height: 1.7; }
.op-methode__alerte {
  margin-top: var(--op-6);
  padding: var(--op-5);
  border: 1px solid var(--op-trait);
  border-left: 3px solid var(--op-urgent);
  border-radius: var(--op-rayon);
  background: var(--op-fond-doux);
}
.op-methode__alerte p:last-child { margin-bottom: 0; }

/* ===========================================================================
   PROVENANCE
   =========================================================================== */
.op-provenance {
  display: flex;
  gap: var(--op-4);
  align-items: flex-start;
  margin: var(--op-7) auto var(--op-7);
  padding: var(--op-4) var(--op-5);
  border: 1px solid var(--op-trait);
  border-radius: var(--op-rayon);
  background: var(--op-fond-doux);
}
.op-provenance p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--op-encre-douce);
  line-height: 1.65;
  max-width: 92ch;
}
.op-provenance strong { color: var(--op-encre); }
.op-provenance i {
  color: var(--op-accent);
  font-size: 1.15rem;
  line-height: 1.45;
  flex: none;
}

/* ===========================================================================
   TÉLÉPHONE
   =========================================================================== */
@media (max-width: 575px) {
  .op-cadre { --op-6: 1.75rem; --op-7: 2.5rem; }
  .op-grille,
  .op-familles__grille { grid-template-columns: 1fr; }
  .op-tete h1, .op-fiche h1 { max-width: none; }
  .op-encart { padding: var(--op-4); }
  .op-table { font-size: 0.875rem; }
  .op-table th, .op-table td { padding: var(--op-3) var(--op-2) var(--op-3) 0; }
  .op-provenance { flex-direction: column; gap: var(--op-2); }
}

/* ===========================================================================
   IMPRESSION
   ===========================================================================
   Une fiche d'offre s'imprime : un candidat la pose à côté de son dossier. On
   retire ce qui ne sert qu'à l'écran, et l'on fait apparaître l'adresse du lien
   pour qu'elle survive au papier.
   =========================================================================== */
@media print {
  .op-barre, .op-provenance, .op-pagination, .op-liste, .op-liens { display: none; }
  .op-fiche__grille { display: block; }
  .op-encart { border: 1px solid #999; background: none; break-inside: avoid; }
  .op-bouton { background: none; color: #000; border: 1px solid #000; }
  .op-fiche a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.75rem;
    word-break: break-all;
  }
}

/* Ceux qui demandent moins d'animation en ont moins. */
@media (prefers-reduced-motion: reduce) {
  .op-cadre * { transition: none !important; }
  .op-carte:hover, .op-famille:hover { transform: none; }
}