/* Ormia : page de la partie tertiaire (ormia.fr/tertiaire/), la plaquette « Diriger pour apprendre » du tertiaire
   adaptée à l’écran. Chargée après accueil.css, dont elle reprend les composants et les jetons : seuls les blocs
   propres au tertiaire vivent ici (le groupe et ses entreprises, les deux captures du quartier, la fiche d’un dossier,
   les valeurs de deux jauges, les titres et leurs blocs, les familles sur demande).
   La grille de la correction et du relevé (.duo-corr) vit dans accueil.css : le portail s’en sert aussi.
   Contrastes : brand/ormia/piste-2/palette.md §2.1. Aucun style en ligne dans la page (CSP).
   Paliers du site : 960, 760 et 480 px. Cette feuille vient après accueil.css : une grille posée ici sans condition
   redit elle-même ses colonnes à 960 et à 760 px ; les autres ne valent qu’au-dessus d’un palier. */

/* Le groupe : la holding sur toute la largeur, ses six entreprises dessous. La section est sur une bande blanche :
   les cartes y prennent le gris papier, comme les autres cartes posées sur du blanc (.new, .quote). */
.worlds-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; }
.worlds-3 .world { background: var(--papier); }
.world-top { grid-column: 1 / -1; border-top: 4px solid var(--nuit); }
.world-top small { display: block; margin-bottom: 6px; font: 700 11.5px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--elan); }
.dot-clair { background: var(--elan-clair); }
.dot-brume { background: var(--brume); }
@media (max-width: 960px) { .worlds-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .worlds-3 { grid-template-columns: minmax(0, 1fr); } }

/* Le quartier et l’intérieur d’une entreprise : deux captures de proportions différentes (1600 × 1234 et 1600 × 1014),
   à la même hauteur au-dessus de 760 px ; en dessous, l’une sous l’autre. */
@media (min-width: 761px) { .duo-3d { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.9fr); } }
/* Les trois cartes sous ces captures reprennent .new, sans la ligne de source : sur la bande grise, elles sont
   blanches. */
.duo-3d + .news .new { background: var(--blanc); }
.duo-3d + .news b { margin-top: 0; }
/* Elles sont trois : elles restent sur une rangée jusqu’à 761 px (la règle commune passe .news à deux colonnes dès
   960 px, ce qui laissait la troisième seule sur la sienne). */
@media (min-width: 761px) { .duo-3d + .news { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* La fiche d’un dossier type : ce que le stagiaire reçoit, ce qu’il rend. */
.fiche { background: var(--papier); border: 1px solid var(--filet); border-top: 4px solid var(--elan); border-radius: 14px; padding: 22px 24px; }
.fiche small { display: block; font: 700 11.5px/1.35 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--elan); }
.fiche h3 { font: 800 19px/1.25 var(--font); margin-top: 8px; }
.fiche dl { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 10px 14px; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--filet); }
.fiche dt { font: 700 11.5px/1.6 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ardoise); padding-top: 2px; }
.fiche dd { margin: 0; font-size: 14.5px; line-height: 1.5; }
@media (max-width: 480px) {
  .fiche { padding: 18px; }
  .fiche dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fiche dd + dt { margin-top: 10px; }
}

/* Les jauges de l’exemple : mêmes lignes que la partie sport, avec « Clients » et « Ventes ». */
.g-clients { --v: 47%; --d: 42%; --c: 61%; }
.g-ventes { --v: 44%; --d: 39%; --c: 60%; }

/* Les quatre titres : la carte des preuves (.proof), avec les blocs du titre numérotés. Quatre colonnes au-dessus de
   960 px ; en dessous, les colonnes de .proofs (deux, puis une). */
@media (min-width: 961px) { .titres { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.titre { border-top: 4px solid var(--elan); }
/* La ligne de référence passe sur deux lignes dans une carte étroite : équilibrée, elle se coupe après la nature du
   titre dans les quatre cartes (« titre professionnel · », puis « RNCP… · niveau 5 »). */
.titre h3 + p { text-wrap: balance; }
.titre ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; counter-reset: bloc; }
.titre li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: 14px; line-height: 1.4; }
.titre li::before { counter-increment: bloc; content: counter(bloc); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--elan-voile); color: var(--nuit); font: 800 11.5px/1 var(--font); }
.titre .who { margin-top: auto; padding-top: 14px; }
.titre .who b { display: block; padding-top: 12px; border-top: 1px solid var(--filet); }

/* Les autres titres, sur demande : quatre familles, sur le modèle des étapes (.steps). Quatre colonnes au-dessus de
   960 px, deux jusqu’à 761 px ; en dessous, la colonne unique de .steps. */
.ajout { margin-top: 28px; padding: 20px 22px 22px; border: 1px dashed var(--brume); border-radius: 14px; }
.ajout h3 { font: 800 17px/1.3 var(--font); }
.ajout h3 span { font-weight: 600; color: var(--ardoise); }
.ajout .steps { margin-top: 16px; }
.familles .step:last-child { border-top-color: var(--elan); }
@media (min-width: 761px) { .familles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 961px) { .familles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }