/* ==========================================================================
   ISMOD · L’institut (institut.html)
   À charger après base.css et components.css.
   Ouverture : le portrait brodé (defile-06), une colonne de bandes tissées à
   la jonction, la colonne indigo de nuit qui porte le titre de page.
   Motif dominant de la page : les bandes, une seule fois (l’ouverture).
   ========================================================================== */

/* Composés à ne pas couper sur leur trait d'union ; la règle cède sous
   30 em pour l'espacement de texte (WCAG 1.4.12). */
@media (min-width: 30em) {
  .inst-insecable {
    white-space: nowrap;
  }
}

/* ==========================================================================
   1. Ouverture de page
   Mobile : photo, bande de bandes tissées, panneau. 45 em : photo (40 %),
   une bande de 40 px, panneau. 64 em : photo (720 px CSS au plus), deux
   bandes (80 px), panneau. La hauteur suit le titre et le chapeau.
   ========================================================================== */
.inst-ouverture {
  --fond: var(--indigo-nuit);
  --fond-alt: var(--indigo-nuit);
  --filet: color-mix(in srgb, var(--indigo-clair) 34%, var(--indigo-nuit));
  --texte-doux: color-mix(in srgb, var(--blanc) 78%, var(--indigo-clair));
  display: grid;
  background-color: var(--indigo-nuit);
}
.inst-ouverture__photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  max-height: 70svh;
  background-color: var(--noir);
}
.inst-ouverture__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Recadrage carré de focales.json : la tête entière, puis la broderie. */
  object-position: 50% 15%;
}

/* Les bandes tissées : 38 % d'indigo clair sur nuit, jamais sous un texte. */
.inst-ouverture__bandes {
  position: relative;
  height: 3rem;
}
.inst-ouverture__bandes::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: color-mix(in srgb, var(--indigo-clair) 38%, transparent);
  -webkit-mask: url("../../assets/motifs/motif-bandes.svg") 0 0 / 120px 96px repeat;
          mask: url("../../assets/motifs/motif-bandes.svg") 0 0 / 120px 96px repeat;
}

.inst-ouverture__panneau {
  display: grid;
  align-content: start;
  padding: var(--e-6) var(--marge) var(--e-8);
  min-width: 0;
}
.inst-ouverture__titre {
  font-size: var(--titre-page);
  font-weight: var(--titre-graisse);
  line-height: var(--interligne-serre);
  color: var(--blanc);
  text-wrap: balance;
}
.inst-ouverture__coupe {
  display: none;
}
.inst-ouverture__chapeau {
  max-width: 34ch;
  margin-block-start: var(--e-6);
  padding-block-start: var(--e-5);
  border-block-start: var(--filet-fin) solid var(--filet);
  color: var(--texte-doux);
}
/* Le cartouche d'agrément (bloc-titre de patron, composant .agrement) :
   filets blancs sur l'indigo de nuit, libellés en blanc adouci (contraste
   AA large). Il prend la largeur du panneau, 34 rem au plus. */
.inst-ouverture__agrement {
  --texte: var(--blanc);
  max-width: 34rem;
  margin-block-start: var(--e-6);
  color: var(--blanc);
}
.inst-ouverture__agrement .agrement__valeur {
  text-wrap: balance;
}
/* Le numéro de l'arrêté, sur sa propre ligne, comme une référence. */
.inst-ouverture__numero {
  display: block;
}
/* Sous 30 em, et de 45 à 79,99 em où le panneau est étroit, libellé
   au-dessus de la valeur : le numéro de l'arrêté tient sur une ligne. */
@media (max-width: 29.99em), (min-width: 45em) and (max-width: 79.99em) {
  .inst-ouverture__agrement .agrement__ligne {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-1);
  }
}

@media (min-width: 30em) and (max-width: 44.9375em) {
  .inst-ouverture__photo {
    aspect-ratio: 4 / 5;
  }
  .inst-ouverture__photo img {
    object-position: 50% 6.8%;
  }
}

@media (min-width: 45em) {
  .inst-ouverture {
    grid-template-columns: 40% 2.5rem minmax(0, 1fr);
  }
  .inst-ouverture__photo {
    aspect-ratio: auto;
    max-height: none;
    min-height: 28rem;
  }
  .inst-ouverture__photo img {
    object-position: 50% 10%;
  }
  .inst-ouverture__bandes {
    height: auto;
  }
  .inst-ouverture__panneau {
    align-content: center;
    padding-block: clamp(var(--e-7), 1rem + 4vw, 5.5rem);
    padding-inline: clamp(var(--e-5), 0.25rem + 3.4vw, var(--e-8)) var(--marge);
  }
  /* Cinq lignes en escalier : « Une école / de mode / agréée / par l’État /
     du Sénégal ». */
  .inst-ouverture__coupe--tablette {
    display: inline;
  }
  .inst-ouverture__chapeau {
    margin-block-start: var(--e-7);
  }
}
/* 64 em : la photo prend 45 % (720 px CSS au plus) pour que « du Sénégal »
   tienne dans le panneau. */
@media (min-width: 64em) {
  .inst-ouverture {
    grid-template-columns: min(45%, 45rem) 5rem minmax(0, 1fr);
  }
}
/* Dès 80 em, le panneau loge quatre lignes : « Une école de / mode agréée /
   par l’État / du Sénégal ». */
@media (min-width: 80em) {
  .inst-ouverture__coupe--tablette {
    display: none;
  }
  .inst-ouverture__coupe--bureau {
    display: inline;
  }
}

/* ==========================================================================
   2. Ce que forme l’ISMOD
   Titre et texte côte à côte, puis la ligne de ce que l’école délivre,
   tenue entre deux filets.
   ========================================================================== */
.inst-ecole__grille {
  display: grid;
  gap: var(--e-6) var(--gouttiere);
}
.inst-ecole__titre {
  max-width: 13ch;
}
.inst-ecole__texte {
  display: grid;
  gap: var(--e-4);
  align-content: start;
}
.inst-ecole__amorce {
  font-size: var(--t-lg);
  line-height: 1.5;
}
.inst-ecole__texte p:not(.inst-ecole__amorce) {
  color: var(--texte-doux);
}
.inst-ecole__formation {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  gap: var(--e-4) var(--e-5);
  margin-block-start: var(--e-6);
  padding-block: var(--e-6);
  border-block: var(--filet-fin) solid var(--filet);
  border-block-start: var(--filet-fort) solid var(--texte);
}
.inst-ecole__picto {
  width: 3rem;
  height: 3rem;
  color: var(--accent);
}
.inst-ecole__phrase {
  font-family: var(--police-titre);
  font-size: var(--t-lg);
  font-weight: var(--titre-graisse-petit);
  line-height: 1.3;
  max-width: 44ch;
  text-wrap: pretty;
}
@media (min-width: 40em) {
  .inst-ecole__formation {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .inst-ecole__phrase {
    font-size: var(--t-xl);
  }
}
@media (min-width: 64em) {
  .inst-ecole__grille {
    grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
    align-items: start;
  }
  .inst-ecole__titre {
    grid-column: 1 / span 6;
  }
  .inst-ecole__texte {
    grid-column: 7 / -1;
    padding-block-start: var(--e-3);
  }
  .inst-ecole__formation {
    grid-column: 1 / -1;
    column-gap: var(--e-6);
    margin-block-start: var(--e-8);
  }
  .inst-ecole__picto {
    width: 4rem;
    height: 4rem;
  }
}

/* ==========================================================================
   3. Le travail en atelier
   Le texte, puis un bloc de 640 px au plus : atelier-01 en grand, puis
   atelier-02 et atelier-03 en vignettes. Lecture au clic (js/main.js).
   ========================================================================== */
.inst-atelier__grille {
  display: grid;
  gap: var(--e-7) var(--gouttiere);
}
.inst-atelier__texte {
  display: grid;
  gap: var(--e-5);
  align-content: start;
}
.inst-atelier__texte p {
  max-width: 44ch;
}
/* Titre en deux temps : « Le travail en atelier : », puis la suite sur sa
   propre ligne, sans changer de corps. Dès 64 em il couvre toute la grille,
   au-dessus du texte et des vidéos, pour tenir en deux lignes. */
.inst-atelier__titre {
  text-wrap: balance;
  margin-block-end: calc(var(--e-5) - var(--e-7));
}
.inst-atelier__titre-suite {
  display: block;
}
.inst-atelier__videos {
  display: grid;
  gap: var(--e-6) var(--gouttiere);
  width: 100%;
  max-width: 40rem;
}
.inst-atelier__video {
  margin: 0;
  min-width: 0;
}
.inst-atelier__video .video__media {
  display: block;
  height: auto;
}
.inst-atelier__legende {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--t-sm);
  color: var(--texte-doux);
}
.inst-atelier__legende .icone {
  color: var(--accent);
}
/* Vignettes : pastille de lecture réduite au bouton seul, le texte reste
   lu par les lecteurs d'écran. */
.inst-atelier__video--vignette .video__lecture-pastille {
  font-size: var(--t-xs);
  min-height: 2.75rem;
  gap: var(--e-2);
  padding-inline-end: var(--e-3);
}
.inst-atelier__video--vignette .video__lecture-icone {
  width: 2.75rem;
  height: 2.75rem;
}

@media (min-width: 30em) {
  .inst-atelier__videos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .inst-atelier__video--grande {
    grid-column: 1 / -1;
  }
}
@media (min-width: 64em) {
  .inst-atelier__grille {
    grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
    align-items: start;
  }
  .inst-atelier__titre {
    grid-column: 1 / -1;
    margin-block-end: 0;
  }
  .inst-atelier__texte {
    grid-column: 1 / span 4;
  }
  .inst-atelier__videos {
    grid-column: 6 / -1;
    justify-self: end;
  }
}

/* ==========================================================================
   4. Les pôles
   La photo d’atelier (fournie par l’école le 2026-11-08) dans le cadre
   d’équerre, comme sur Formations ; en regard, le cartouche indigo de nuit.
   Pas de motif : les bandes sont gardées pour l’ouverture.
   ========================================================================== */
.inst-poles__grille {
  display: grid;
  gap: var(--e-6) var(--gouttiere);
}
.inst-poles__photo {
  margin: 0;
  min-width: 0;
}
.inst-poles__cadre img {
  --ratio: 3 / 2;
  --focale: 50% 50%;
}
.inst-poles__cartouche {
  --fond: var(--indigo-nuit);
  --filet: color-mix(in srgb, var(--indigo-clair) 34%, var(--indigo-nuit));
  --texte-doux: color-mix(in srgb, var(--blanc) 78%, var(--indigo-clair));
  background-color: var(--indigo-nuit);
}
.inst-poles__texte {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--e-5);
  padding: var(--e-6) var(--e-5) var(--e-7);
}
.inst-poles__titre {
  color: var(--blanc);
}
.inst-poles__texte p {
  font-size: var(--t-lg);
  line-height: 1.5;
  max-width: 40ch;
  color: var(--texte-doux);
}

@media (min-width: 48em) {
  .inst-poles__texte {
    padding: var(--e-7) clamp(var(--e-6), 4vw, var(--e-8));
  }
}
@media (min-width: 64em) {
  .inst-poles__grille {
    grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
    align-items: center;
  }
  .inst-poles__photo {
    grid-column: 1 / span 7;
  }
  /* Le cartouche s’aligne sur la photo, hors du carré décalé. */
  .inst-poles__cartouche {
    grid-column: 8 / -1;
    margin-block-end: var(--sig-decalage);
  }
}