/* ==========================================================================
   ISMOD · Page Formations
   Motif dominant : le papier pointé du modéliste, une seule fois, sous les
   quatre entrées de l'ouverture (au plus la moitié de l'écran).
   Pictogrammes du métier en 96 px, un par domaine du programme.
   À charger après base.css et components.css.
   ========================================================================== */

/* « week-end » ne se coupe jamais au trait d'union. */
.fo-mot {
  white-space: nowrap;
}
/* Noms composés : la coupure n'a lieu qu'aux endroits prévus (<wbr>),
   sauf sur petit écran où l'insécable cède (espacement de texte, 1.4.12). */
.insecable {
  white-space: nowrap;
}
@media (max-width: 30em) {
  .insecable {
    white-space: normal;
  }
}

/* ==========================================================================
   1. Ouverture : titre et chapeau, l'atelier en 16:9, les entrées sur le papier
   ========================================================================== */
.fo-ouverture {
  padding-block: var(--e-7) var(--e-8);
}
.fo-ouverture__grille {
  display: grid;
  grid-template-areas:
    "titre"
    "chapeau"
    "media"
    "faits";
  gap: var(--e-5) var(--gouttiere);
}
.fo-ouverture__titre {
  grid-area: titre;
}
.fo-ouverture__chapeau {
  grid-area: chapeau;
}
/* L'affiche garde son format d'origine (16:9) et ne dépasse pas 640 px. */
.fo-ouverture__media {
  grid-area: media;
  width: 100%;
  max-width: 40rem;
  margin: var(--e-3) 0 0;
  aspect-ratio: 16 / 9;
  background-color: var(--craie);
}
.fo-ouverture__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Le papier : un champ à fond perdu, sous les quatre entrées. */
.fo-ouverture__champ {
  grid-area: faits;
  position: relative;
  isolation: isolate;
  margin-block-start: var(--e-3);
  padding-block: var(--e-5);
}
.fo-ouverture__champ::before {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--marge));
  z-index: -1;
  pointer-events: none;
  background-color: var(--gris-300);
  -webkit-mask: url("../../assets/motifs/motif-papier.svg") 0 0 / 100px 100px repeat;
          mask: url("../../assets/motifs/motif-papier.svg") 0 0 / 100px 100px repeat;
}

/* Les quatre entrées : renvois vers le détail plus bas dans la page. */
.fo-faits {
  display: grid;
  gap: 1px;
  background-color: var(--gris-200);
  border: 1px solid var(--gris-200);
}
.fo-faits > li {
  display: flex;
  background-color: var(--blanc);
}
.fo-fait {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--e-3);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--e-4);
  color: var(--texte);
  text-decoration: none;
}
.fo-fait__picto {
  color: var(--indigo);
}
.fo-fait__texte {
  display: grid;
  gap: var(--e-1);
  min-width: 0;
}
.fo-fait__titre {
  font-weight: 600;
  line-height: 1.3;
  text-decoration-line: underline;
  text-decoration-thickness: var(--filet-fort);
  text-underline-offset: 0.25em;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--duree-rapide) var(--ease-etat);
}
.fo-fait__detail {
  font-size: var(--t-sm);
  color: var(--texte-doux);
}
.fo-fait__fleche {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  color: var(--indigo);
  transition: transform var(--duree) var(--ease-etat);
}
.fo-fait:hover .fo-fait__titre,
.fo-fait:focus-visible .fo-fait__titre {
  text-decoration-color: currentColor;
}
.fo-fait:hover .fo-fait__fleche,
.fo-fait:focus-visible .fo-fait__fleche {
  transform: translateX(0.25rem);
}
.fo-fait:focus-visible {
  outline-offset: -4px;
  box-shadow: none;
}

/* Bureau : titre sur sept colonnes, chapeau en regard ; en dessous, le
   papier sur la moitié gauche (fond perdu) et l'affiche à droite. */
@media (min-width: 64em) {
  .fo-ouverture__grille {
    grid-template-areas: none;
    grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
    row-gap: var(--e-7);
    align-items: end;
  }
  .fo-ouverture__titre {
    grid-area: auto;
    grid-column: 1 / span 7;
  }
  .fo-ouverture__chapeau {
    grid-area: auto;
    grid-column: 8 / -1;
    padding-block-end: 0.35em;
  }
  .fo-ouverture__champ {
    grid-area: auto;
    grid-column: 1 / span 6;
    grid-row: 2;
    align-self: stretch;
    display: grid;
    align-content: center;
    margin: 0;
    padding: var(--e-6) var(--e-6) var(--e-6) 0;
  }
  .fo-ouverture__champ::before {
    inset: 0 0 0 calc(-1 * (max(0px, (100vw - var(--conteneur)) / 2) + var(--marge)));
  }
  .fo-ouverture__media {
    grid-area: auto;
    grid-column: 7 / -1;
    grid-row: 2;
    justify-self: end;
    align-self: start;
    margin: 0;
  }
}
@media (min-width: 80em) {
  .fo-faits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   2. Les diplômes : comparatif à filets, colonne par colonne
   ========================================================================== */
.fo-diplomes__titre {
  margin-block-end: clamp(var(--e-6), 1.5rem + 2vw, var(--e-8));
  max-width: 18ch;
}
.fo-comparatif {
  display: grid;
  gap: var(--e-8);
}
.fo-diplome {
  display: grid;
  align-content: start;
  border-block-start: var(--filet-fort) solid var(--texte);
  padding-block-start: var(--e-5);
}
.fo-diplome__tete {
  display: grid;
  align-content: start;
  gap: var(--e-2);
  padding-block-end: var(--e-6);
}
.fo-diplome__nom {
  font-size: var(--t-2xl);
  font-weight: var(--titre-graisse-petit);
  line-height: 1.15;
}
.fo-diplome__nom abbr {
  text-decoration: none;
}
.fo-diplome__sigle {
  font-size: var(--t-sm);
  color: var(--texte-doux);
}
.fo-diplome__faits {
  display: grid;
}
.fo-diplome__faits > div {
  display: grid;
  align-content: start;
  gap: var(--e-2);
  padding-block: var(--e-4) var(--e-5);
  border-block-start: var(--filet-fin) solid var(--filet);
}
.fo-diplome__faits dd {
  font-size: var(--t-base);
}
.fo-diplome__nature {
  font-family: var(--police-titre);
  font-size: var(--t-xl) !important;
  font-weight: var(--titre-graisse-petit);
  line-height: 1.2;
}
.fo-epreuves {
  display: grid;
  gap: var(--e-4);
}
.fo-epreuves > li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  align-items: baseline;
}
.fo-epreuves__num {
  font-family: var(--police-titre);
  font-size: var(--t-lg);
  font-weight: var(--titre-graisse-petit);
  line-height: 1;
  color: var(--indigo);
}
.fo-diplome__lien {
  margin-block-start: var(--e-4);
}

@media (min-width: 56em) {
  .fo-comparatif {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    column-gap: 0;
  }
  /* Les lignes des deux colonnes s'alignent (sous-grille). */
  .fo-diplome {
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
    padding-inline-end: var(--gouttiere);
  }
  .fo-diplome + .fo-diplome {
    padding-inline: var(--gouttiere) 0;
    border-inline-start: var(--filet-fin) solid var(--filet);
  }
  .fo-diplome__faits {
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
  .fo-diplome__faits > div {
    grid-template-columns: minmax(8rem, 1fr) 3fr;
    gap: var(--gouttiere);
  }
  .fo-diplome__faits dt {
    padding-block-start: 0.2em;
  }
}

/* ==========================================================================
   3. Les compétences développées : cinq lignes fortes, numérotées comme
   les gestes, sans texte dessous. Le titre en colonne, la liste en regard.
   ========================================================================== */
.fo-metier {
  background-color: var(--indigo-voile);
}
.fo-metier__grille {
  display: grid;
  gap: var(--e-6) var(--gouttiere);
}
.fo-metier__titre {
  max-width: 14ch;
}
.fo-competences {
  display: grid;
  border-block-start: var(--filet-fort) solid var(--indigo);
}
.fo-competence {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--e-3);
  padding-block: clamp(var(--e-4), 0.75rem + 1vw, var(--e-6));
  border-block-end: var(--filet-fin) solid color-mix(in srgb, var(--indigo) 28%, transparent);
}
.fo-competence__num {
  font-family: var(--police-titre);
  font-size: var(--t-xl);
  font-weight: var(--titre-graisse-petit);
  line-height: 1;
  color: var(--indigo);
  font-variant-numeric: lining-nums tabular-nums;
}
.fo-competence__texte {
  font-family: var(--police-titre);
  font-size: clamp(1.375rem, 1.05rem + 1.45vw, 2.375rem); /* 22 → 38 */
  font-weight: var(--titre-graisse-petit);
  line-height: 1.18;
  text-wrap: balance;
  max-width: 30ch;
}
/* « (stylisme) » : libellé discret, à la suite de la ligne. */
.fo-competence__libelle {
  font-family: var(--police-texte);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.4;
  color: var(--gris-700);
  white-space: nowrap;
}

@media (min-width: 40em) {
  .fo-competence {
    grid-template-columns: 4rem minmax(0, 1fr);
    column-gap: var(--e-4);
  }
  .fo-competence__num {
    font-size: var(--t-2xl);
  }
}
@media (min-width: 64em) {
  .fo-metier__grille {
    grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
  }
  .fo-metier__titre {
    grid-column: 1 / span 4;
  }
  .fo-competences {
    grid-column: 5 / -1;
  }
}

/* ==========================================================================
   4. Un aperçu du programme : fond clair (craie), lecture d'abord.
   En tête, la photo de défilé defile-04 (cadre d'équerre, choix du client)
   et, en regard, le titre ;
   dessous, les quatre domaines l'un sous l'autre, en grand corps.
   Pas de papier pointé ici : un seul champ par page (REGLES-MOTIFS).
   ========================================================================== */
.fo-programme {
  overflow-x: clip;
}
.fo-programme__tete {
  display: grid;
  gap: var(--e-6) var(--gouttiere);
  margin-block-end: clamp(var(--e-7), 2rem + 3vw, var(--e-9));
}
.fo-programme__intro {
  display: grid;
  gap: var(--e-5);
  align-content: start;
}
.fo-programme__titre {
  max-width: 14ch;
}
.fo-programme__intro .chapeau {
  color: var(--texte-doux);
}
/* Portrait de défilé de 718 px de large : jamais affiché à plus de 36 rem. */
.fo-programme__media {
  margin: 0;
  width: 100%;
  max-width: 30rem;
}
.fo-programme__cadre img {
  --ratio: 4 / 5;
  --focale: 50% 0%;
}

/* Les quatre domaines, l'un sous l'autre dans l'ordre du client :
   stylisme, modélisme, accessoires, management. Dès 64 em, le nom à gauche
   (4 colonnes), la liste à droite (8 colonnes). */
.fo-domaines {
  display: grid;
}
.fo-domaine {
  display: grid;
  gap: var(--e-5) var(--gouttiere);
  padding-block: var(--e-6) var(--e-7);
  border-block-start: var(--filet-fort) solid var(--accent);
}
.fo-domaine:last-child {
  padding-block-end: 0;
}
.fo-domaine__tete {
  display: flex;
  align-items: center;
  gap: var(--e-4);
}
.fo-domaine__picto {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  fill: none;
  stroke: currentColor;
  color: var(--accent);
}
.fo-domaine__nom {
  font-size: var(--t-2xl);
  font-weight: var(--titre-graisse-petit);
  line-height: 1.12;
}
.fo-domaine__corps {
  display: grid;
  gap: var(--e-4);
  align-content: start;
  min-width: 0;
}
.fo-domaine__amorce {
  font-size: var(--t-lg);
  color: var(--texte-doux);
}
/* Listes à filets fins, puce carrée indigo (le carré de l'emblème). */
.fo-matieres {
  display: grid;
  align-content: start;
  column-gap: var(--gouttiere);
}
.fo-matieres > li {
  position: relative;
  padding-block: var(--e-4);
  padding-inline-start: var(--e-6);
  border-block-end: var(--filet-fin) solid var(--filet);
  font-size: var(--t-lg);
  line-height: 1.4;
}
.fo-matieres > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: calc(var(--e-4) + 0.5em);
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--accent);
}
/* Les modèles : la base de la formation, tous listés, plusieurs par ligne. */
.fo-matieres--modeles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fo-matieres--modeles > li {
  font-family: var(--police-titre);
  font-size: var(--t-xl);
  font-weight: var(--titre-graisse-petit);
  line-height: 1.2;
}
.fo-matieres--modeles > li::before {
  top: calc(var(--e-4) + 0.45em);
}
@media (min-width: 40em) {
  .fo-programme__tete {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .fo-programme__media {
    grid-row: 1;
    grid-column: 1;
  }
  .fo-programme__intro {
    grid-row: 1;
    grid-column: 2;
  }
  .fo-matieres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fo-matieres--modeles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .fo-domaine__picto {
    width: 4.5rem;
    height: 4.5rem;
  }
}
@media (min-width: 64em) {
  .fo-programme__tete {
    grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
    align-items: end;
  }
  .fo-programme__media {
    grid-column: 1 / span 5;
    max-width: 36rem;
  }
  .fo-programme__cadre img {
    --ratio: 3 / 4;
  }
  /* Le titre se pose au pied de la photo, juste au-dessus des domaines. */
  .fo-programme__intro {
    grid-column: 7 / -1;
    padding-block-end: calc(var(--sig-decalage) + 0.4em);
  }
  .fo-programme__titre {
    max-width: none;
    font-size: var(--t-4xl);
    font-weight: var(--titre-graisse);
    line-height: var(--interligne-titre);
  }
  .fo-domaine {
    grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
    padding-block: var(--e-7) var(--e-8);
  }
  .fo-domaine__tete {
    grid-column: 1 / span 4;
    flex-direction: column;
    align-items: flex-start;
    align-self: start;
  }
  .fo-domaine__corps {
    grid-column: 5 / -1;
  }
}

/* ==========================================================================
   5. Les rythmes : diptyque clair et noir, séparés par le jour de l'emblème
   ========================================================================== */
.fo-rythmes__intro {
  display: grid;
  gap: var(--e-5);
  margin-block-end: clamp(var(--e-7), 2rem + 3vw, var(--e-9));
}
.fo-rythmes__intro .chapeau {
  color: var(--texte-doux);
}
.fo-diptyque {
  display: grid;
  gap: var(--sig-jour);
}
.fo-rythme {
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
  padding: clamp(var(--e-5), 1rem + 2.5vw, var(--e-8));
  background-color: var(--craie);
  color: var(--texte);
}
.fo-rythme--samedi {
  background-color: var(--noir);
}
.fo-rythme__titre {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--t-2xl);
  font-weight: var(--titre-graisse-petit);
}
.fo-rythme__titre .icone {
  width: 2rem;
  height: 2rem;
  color: var(--accent);
}
.fo-rythme__faits {
  display: grid;
  border-block-start: var(--filet-fin) solid var(--filet);
}
.fo-rythme__faits > div {
  display: grid;
  gap: var(--e-1);
  padding-block: var(--e-4);
  border-block-end: var(--filet-fin) solid var(--filet);
}
.fo-rythme__grand {
  font-family: var(--police-titre);
  font-size: var(--t-3xl);
  font-weight: var(--titre-graisse);
  line-height: var(--interligne-titre);
}
.fo-rythme__precision {
  display: block;
  margin-block-start: var(--e-2);
  font-family: var(--police-texte);
  font-size: var(--t-base);
  line-height: 1.4;
  color: var(--texte-doux);
}
.fo-rythme__texte {
  margin-block-start: auto;
  color: var(--texte-doux);
}
.fo-rythme:not(.theme-noir) .libelle,
.fo-rythme:not(.theme-noir) .fo-rythme__texte,
.fo-rythme:not(.theme-noir) .fo-rythme__precision {
  color: var(--gris-700);
}
.fo-rythme:not(.theme-noir) .fo-rythme__faits,
.fo-rythme:not(.theme-noir) .fo-rythme__faits > div {
  border-color: var(--gris-200);
}
@media (max-width: 33.3125em) {
  .fo-rythme__grand {
    font-weight: var(--titre-graisse-petit);
  }
}
@media (min-width: 56em) {
  .fo-rythmes__intro {
    grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
    column-gap: var(--gouttiere);
    align-items: end;
  }
  .fo-rythmes__intro h2 {
    grid-column: 1 / span 7;
  }
  .fo-rythmes__intro .chapeau {
    grid-column: 8 / -1;
    padding-block-end: 0.4em;
  }
  /* Titre, faits et texte s'alignent d'une carte à l'autre (sous-grille),
     même quand « Cours de week-end (samedi) » passe sur deux lignes. */
  .fo-diptyque {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
  }
  .fo-rythme {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: var(--e-6);
  }
  .fo-rythme__titre {
    align-self: start;
  }
  .fo-rythme__texte {
    align-self: end;
  }
}

/* ==========================================================================
   6. Informations pratiques : liste à filets
   ========================================================================== */
.fo-pratique {
  border-block-start: var(--filet-fin) solid var(--filet);
}
.fo-pratique__grille {
  display: grid;
  gap: var(--e-7) var(--gouttiere);
}
.fo-infos {
  display: grid;
  border-block-start: var(--filet-fin) solid var(--texte);
}
.fo-info {
  display: grid;
  gap: var(--e-2) var(--gouttiere);
  padding-block: var(--e-4);
  border-block-end: var(--filet-fin) solid var(--filet);
}
.fo-info dt {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 1.6em;
}
.fo-info dt .icone {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--indigo);
}
.fo-info dd {
  display: grid;
  justify-items: start;
  gap: var(--e-1);
}
.fo-info dd > p {
  max-width: 52ch;
}
.fo-info .lien-fleche {
  font-size: var(--t-sm);
}
/* Diplômes et rythmes : une ligne, puis le renvoi vers leur section. */
.fo-info dd.fo-info__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--e-5);
}

@media (min-width: 48em) {
  .fo-info {
    grid-template-columns: 12rem 1fr;
    align-items: start;
  }
}
@media (min-width: 64em) {
  .fo-pratique__grille {
    grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
  }
  .fo-pratique__titre {
    grid-column: 1 / span 4;
  }
  .fo-infos {
    grid-column: 6 / -1;
  }
}