/* =============================================================================
   turf.bzh - assets/css/dai-2027.css
   Complement de ecarts-quinte-2027.css pour suivi-dai-pmu.php.

   La feuille de base n'est JAMAIS modifiee : elle sert plusieurs pages, et une
   retouche pour celle-ci casserait les autres. Tout ce qui est propre aux
   disqualifications porte le prefixe .dai-.

   LE SENS DES COULEURS EST INVERSE ICI, ET C'EST VOLONTAIRE. Sur les autres
   pages de suivi, faire plus que prevu est une bonne nouvelle et s'affiche en
   vert. Sur une page de disqualifications, etre disqualifie plus souvent que
   prevu est le mauvais cote. Le turfiste lit la couleur avant le mot : elle doit
   suivre son intuition, pas la convention interne du site.
   ========================================================================== */

/* ===================================================== LES PASTILLES ======== */
.ae-page .dai-l{
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .18rem .5rem; border-radius: 999px;
  font-size: .8rem; font-weight: 700; line-height: 1.3;
  border: 1px solid transparent; white-space: normal;
}
.ae-page .dai-l::before{
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
/* Plus de disqualifications que prevu : le mauvais cote. */
.ae-page .dai-l-risque{ color: #9f1239; background: var(--ae-ko-bg);   border-color: var(--ae-ko-bd); }
/* Moins que prevu : le bon cote. */
.ae-page .dai-l-sur   { color: #065f46; background: var(--ae-ok-bg);   border-color: var(--ae-ok-bd); }
.ae-page .dai-l-egal  { color: var(--ae-mut); background: var(--ae-card2); border-color: var(--ae-bd); }
.ae-page .dai-l-court { color: #075985; background: var(--ae-info-bg); border-color: var(--ae-info-bd); }

/* La rangee teintee suit la meme convention. */
.ae-page .dai-ligne-risque > *{ background: var(--ae-ko-bg); }
.ae-page .dai-ligne-sur    > *{ background: var(--ae-ok-bg); }

/* ===================================================== LA LEGENDE =========== */
.ae-page .dai-leg{
  display: flex; flex-wrap: wrap; gap: .35rem .9rem; align-items: baseline;
  margin: .6rem 0 0; font-size: .86rem; color: var(--ae-mut);
}
.ae-page .dai-leg-t{ font-weight: 700; color: var(--ae-ink2); }
.ae-page .dai-leg-i{ display: flex; align-items: baseline; gap: .4rem; flex: 1 1 100%; }
.ae-page .dai-leg .dai-l{ flex: 0 0 auto; white-space: nowrap; }
@media (min-width: 52rem){ .ae-page .dai-leg-i{ flex: 0 1 auto; align-items: center; } }

/* ===================================================== LA JAUGE ============= */
/* Elle part de zero et monte jusqu'au taux de disqualification, toutes les
   barres d'une colonne a la meme echelle. Sa couleur porte la comparaison :
   rouge au-dessus de ce qui etait attendu, verte en dessous, neutre sinon.

   .dai-jauge-f est un span : sans display:block la largeur ne s'appliquerait
   pas. Il porte aussi left:0, la largeur seule ne placant pas un element
   absolu. Les deux defauts ont ete releves en production sur ce chantier. */
.ae-page .dai-jauge{
  display: flex; align-items: center; gap: .5rem;
  min-width: 7rem; max-width: 12rem; margin-left: auto; justify-content: flex-end;
}
.ae-page .dai-jauge-v{
  flex: 0 0 auto; white-space: nowrap; text-align: right;
  font-weight: 800; font-variant-numeric: tabular-nums; min-width: 2.9rem;
}
.ae-page .dai-jauge-p{
  display: block; position: relative; flex: 1 1 6rem; min-width: 4.5rem;
  height: .62rem; background: var(--ae-card);
  border: 1px solid var(--ae-bd); border-radius: var(--ae-r-xs); overflow: hidden;
}
.ae-page .dai-jauge-f{
  display: block; position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--ae-mut); opacity: .55;
}
.ae-page .dai-jauge-f.dai-f-risque{ background: #9f1239; opacity: 1; }
.ae-page .dai-jauge-f.dai-f-sur   { background: var(--ae-ok); opacity: 1; }
.ae-page .ae-tab-cartes .dai-jauge{ flex: 1 1 auto; }

/* Le repere de l'attendu, pose sur la jauge quand il vaut la peine d'etre vu. */
.ae-page .dai-jauge-att{
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--ae-ink); opacity: .5;
}

/* ===================================================== LES VIGNETTES ======== */
/* Le chiffre d'en-tete d'une section : un taux, son echantillon, une phrase. */
.ae-page .dai-tuiles{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .6rem; margin: .3rem 0 0;
}
.ae-page .dai-tuile{
  background: var(--ae-card); border: 1px solid var(--ae-bd);
  border-radius: var(--ae-r-sm); padding: .8rem .9rem;
}
.ae-page .dai-tuile-l{
  display: block; font-size: .74rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ae-mut); margin-bottom: .3rem;
}
.ae-page .dai-tuile-v{
  display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.1;
  color: var(--ae-ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.ae-page .dai-tuile-s{ display: block; font-size: .82rem; color: var(--ae-mut); margin-top: .25rem; }
.ae-page .dai-tuile-acc{ background: var(--ae-acc-l2); border-color: var(--ae-acc-l); }
.ae-page .dai-tuile-acc .dai-tuile-v{ color: var(--ae-acc-d); }

/* ===================================================== L'ENCADRE DE FAIT ==== */
.ae-page .dai-fait{
  background: var(--ae-acc-l2); border: 1px solid var(--ae-acc-l);
  border-left: 3px solid var(--ae-acc); border-radius: var(--ae-r-sm);
  padding: .85rem 1rem; margin: .9rem 0 0;
}
.ae-page .dai-fait-t{
  font-size: .74rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ae-acc-d); margin: 0 0 .4rem;
}
.ae-page .dai-fait p{ margin: 0 0 .45rem; color: var(--ae-ink2); font-size: .97rem; line-height: 1.6; }
.ae-page .dai-fait p:last-child{ margin-bottom: 0; }
.ae-page .dai-fait strong{ color: var(--ae-ink); font-weight: 800; }
.ae-page .dai-fait-rien{ background: var(--ae-card2); border-color: var(--ae-bd); border-left-color: var(--ae-bd-fort); }
.ae-page .dai-fait-rien .dai-fait-t{ color: var(--ae-mut); }

/* ===================================================== LA GARDE ============= */
/* Le rappel qui accompagne une lecture nominative. Il n'est pas decoratif :
   c'est lui qui empeche de lire un classement comme un verdict. */
.ae-page .dai-garde{
  background: var(--ae-warn-bg); border: 1px solid var(--ae-warn-bd);
  border-radius: var(--ae-r-sm); padding: .75rem .9rem; margin: 1rem 0 0;
  font-size: .92rem; line-height: 1.6; color: #7c2d12;
}
.ae-page .dai-garde strong{ color: #7c2d12; font-weight: 800; }

/* ===================================================== LES FILTRES ========== */
.ae-page .dai-filtres{
  display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center;
  padding: .75rem .9rem; margin: 0 0 .9rem;
  background: var(--ae-soft); border: 1px solid var(--ae-bd); border-radius: var(--ae-r-sm);
}
.ae-page .dai-filtres-t{
  font-size: .74rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ae-mut); flex: 0 0 auto;
}
/* Des liens, pas un formulaire : quatre combinaisons en tout, chacune avec son
   adresse, qui se partage et revient par le bouton Precedent. */
.ae-page .dai-choix{ display: flex; flex-wrap: wrap; gap: .35rem; }
.ae-page .dai-choix a{
  font-size: .86rem; font-weight: 700; text-decoration: none;
  color: var(--ae-acc-d); background: var(--ae-card);
  border: 1px solid var(--ae-mut); border-radius: var(--ae-r-sm);
  padding: .35rem .7rem; display: inline-flex; align-items: center; min-height: 2.1rem;
  transition: border-color .18s var(--ae-ease), background .18s var(--ae-ease);
}
.ae-page .dai-choix a:hover{ border-color: var(--ae-acc); background: var(--ae-acc-l2); }
.ae-page .dai-choix a[aria-current="true"]{
  color: #fff; background: var(--ae-acc-d); border-color: var(--ae-acc-d);
}
.ae-page .dai-etat{
  display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline;
  font-size: .88rem; color: var(--ae-mut); margin: 0 0 .8rem;
}
.ae-page .dai-etat strong{ color: var(--ae-ink); font-weight: 800; }

/* ===================================================== LE PREFIXE DE CARTE == */
/* .ae-carte-h de la feuille de base est masque DANS LES DEUX MODES : pose sur un
   <th scope="row">, il rendait la premiere colonne vide. Celui-ci lui ressemble
   mais n'apparait qu'en mode cartes, ou le nom seul manque de contexte. */
.ae-page .dai-pfx{ display: none; }
.ae-page .ae-tab-cartes .dai-pfx{ display: inline; font-weight: 600; color: var(--ae-mut); }
@media (min-width: 52rem){ .ae-page .ae-tab-cartes .dai-pfx{ display: none; } }

/* ===================================================== LES LISTES PLIEES ==== */
.ae-page .dai-accord{
  border: 1px solid var(--ae-bd); border-radius: var(--ae-r-sm);
  padding: .55rem .8rem; margin: .7rem 0 0; background: var(--ae-card);
}
.ae-page .dai-accord[open]{ background: var(--ae-card2); border-color: var(--ae-acc-l); }
.ae-page .dai-accord > summary{
  cursor: pointer; font-weight: 700; color: var(--ae-acc-d);
  list-style: none; display: flex; align-items: baseline; gap: .5rem;
}
.ae-page .dai-accord > summary::-webkit-details-marker{ display: none; }
.ae-page .dai-accord > summary::before{ content: "+"; font-weight: 800; color: var(--ae-acc); }
.ae-page .dai-accord[open] > summary::before{ content: "\2212"; }
.ae-page .dai-accord-c{ margin-top: .6rem; }

/* [hidden] perd contre tout display explicite : sans cette regle, un bloc
   masque en HTML reste visible des qu'une regle lui donne display:flex. */
.ae-page [hidden]{ display: none !important; }

/* ===================================================== LA RECHERCHE ========= */
/* Le champ est CREE par le script, jamais servi dans le HTML : sans JavaScript
   personne ne voit une case de saisie qui ne filtrerait rien. */
.ae-page .dai-cherche{
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem;
  margin: 0 0 .7rem;
}
.ae-page .dai-cherche label{
  font-size: .74rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ae-mut); flex: 0 0 auto;
}
.ae-page .dai-cherche .ae-champ{ flex: 1 1 12rem; max-width: 22rem; width: auto; }
.ae-page .dai-cherche-n{ font-size: .84rem; color: var(--ae-mut); flex: 0 0 auto; }

/* ===================================================== LARGEUR DES TABLEAUX ==
   Le socle pose white-space:nowrap sur TOUTES les cellules des que le tableau
   redevient un tableau, et ne le releve que sur td.ae-tab-txt. Les en-tetes de
   colonne et la premiere colonne restaient donc insecables : « Protégé devant,
   déferré derrière » et « Ce qu'il faut en retenir » imposaient a eux seuls
   957 px de large, et le tableau defilait lateralement entre 860 et 1000 px.

   Tout est scope a .dai-tab : cette feuille ne sert que cette page, mais une
   regle sur .ae-tab nu serait un piege pour la suivante. */
.ae-page .dai-tab tbody th{ white-space: normal; }
.ae-page .dai-tab thead th .ae-th-lib{ white-space: normal; }
.ae-page .dai-tab th.ae-tab-txt, .ae-page .dai-tab td.ae-tab-txt{ white-space: normal; }
/* La jauge peut se serrer un peu dans un vrai tableau : c'est la colonne la plus
   compressible, et le chiffre reste lisible puisqu'il ne se coupe jamais. */
@media (min-width: 52rem){
  .ae-page .dai-tab .dai-jauge{ min-width: 6rem; max-width: 11rem; }
  .ae-page .dai-tab .dai-jauge-p{ min-width: 3.2rem; }
}