/*
 * Touche graphique de la page d'accueil.
 *
 * Contrainte tenue tout au long : ne rien écrire qui modifie la taille d'un
 * élément mesuré par un plugin. Owl Carousel et les animations d'apparition
 * calculent leurs dimensions à l'initialisation ; c'est ce qui avait cassé la
 * page lors d'un essai précédent. Tout ici est décoratif — fonds,
 * pseudo-éléments, couleurs, typographie — et n'entre jamais dans le calcul
 * de largeur ou de hauteur des éléments de carrousel.
 */

:root {
  --ens-bleu: #1f5793;
  --ens-bleu-clair: #eaf1fa;
  --ens-or: #c8a04a;
  --ens-encre: #14243a;
}

/* ------------------------------------------------------------------
   Titres de section
   Le trait sous les titres était un simple <hr>. On lui donne une
   forme : un segment épais bleu prolongé d'un filet doré.
   ------------------------------------------------------------------ */

.section h2.font-weight-bold {
  position: relative;
  letter-spacing: -.015em;
  color: var(--ens-encre);
}

.custom-divider.divider-primary {
  position: relative;
  height: 4px;
  width: 74px;
  border-radius: 3px;
  background: var(--ens-bleu);
  overflow: visible;
}

.custom-divider.divider-primary hr { display: none; }

.custom-divider.divider-primary::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 82px;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--ens-or);
}

/* ------------------------------------------------------------------
   Alternance des fonds
   Les sections se succédaient sur un fond uniforme : rien ne signalait
   qu'on changeait de sujet. Un dégradé très pâle sépare les blocs.
   ------------------------------------------------------------------ */

.section.bg-art {
  background:
    linear-gradient(180deg, #ffffff 0%, #f7f9fc 55%, #ffffff 100%);
}

.section.bg-block {
  position: relative;
  background: #fff;
}

/* Trame technique discrète, en écho au dessin industriel. Purement
   décorative : posée en pseudo-élément, elle ne déplace aucun contenu. */
.section.bg-block::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(31, 87, 147, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 87, 147, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 78%);
}

.section.bg-block > .container { position: relative; z-index: 1; }

/* ------------------------------------------------------------------
   Cartes
   ------------------------------------------------------------------ */

/* Liseré bleu qui se révèle au survol, sans décaler la carte : la
   bordure existe déjà, seule sa couleur change. */
.card.custom-border-radius-1 {
  border-color: #eaedf1;
}

.card.custom-border-radius-1:hover {
  border-color: #c3d5ea;
}

/* Badge de catégorie posé sur la vignette : plus lisible sur une image
   claire, et cohérent d'une section à l'autre. */
.card .box-image span {
  background: rgba(20, 36, 58, .82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  font-size: 13px;
  letter-spacing: .01em;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(20, 36, 58, .2);
}

.card .box-image span.bottom {
  background: var(--ens-or);
  color: var(--ens-encre);
  font-weight: 700;
}

/* Le lien « Voir plus » gagne une flèche qui avance au survol. */
.card .custom-testimonial-style-1 > a {
  color: var(--ens-bleu);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.card .custom-testimonial-style-1 > a i {
  transition: transform .18s ease;
}

.card:hover .custom-testimonial-style-1 > a i {
  transform: translateX(4px);
}

/* ------------------------------------------------------------------
   ENSAM en chiffres
   ------------------------------------------------------------------ */

.section .counters .counter,
.section [data-plugin-counter] {
  color: var(--ens-bleu);
  font-weight: 800;
  letter-spacing: -.02em;
}

/* ------------------------------------------------------------------
   Bandeau des partenaires
   ------------------------------------------------------------------ */

/* Les logos apparaissaient à pleine couleur, à des densités très
   différentes : la bande paraissait désordonnée. Ils sont atténués au
   repos et reprennent leur couleur au survol. */
.owl-carousel img.img-fluid[src*="/logos/"] {
  filter: grayscale(100%) opacity(.62);
  transition: filter .22s ease;
}

.owl-carousel img.img-fluid[src*="/logos/"]:hover {
  filter: grayscale(0) opacity(1);
}

/* ------------------------------------------------------------------
   Boutons
   ------------------------------------------------------------------ */

.btn-primary.custom-btn-border-radius {
  border-radius: 30px;
  box-shadow: 0 4px 14px rgba(31, 87, 147, .18);
  transition: box-shadow .18s ease, transform .18s ease;
}

.btn-primary.custom-btn-border-radius:hover {
  box-shadow: 0 8px 22px rgba(31, 87, 147, .28);
  transform: translateY(-1px);
}

/* ------------------------------------------------------------------
   Respect des préférences d'accessibilité
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .card.custom-border-radius-1,
  .card .custom-testimonial-style-1 > a i,
  .btn-primary.custom-btn-border-radius,
  .owl-carousel img.img-fluid[src*="/logos/"] {
    transition: none;
  }

  .card.custom-border-radius-1:hover,
  .btn-primary.custom-btn-border-radius:hover {
    transform: none;
  }
}

/* ==================================================================
   Pré-candidatures ouvertes

   Le bloc le plus important de l'accueil pour un candidat : il doit se
   distinguer du reste sans crier. Fond bleu nuit de la charte, trame de
   zellige au trait doré, cartes claires posées dessus.
   ================================================================== */

.ens-precand-boite {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 44px 40px 36px;
  background: var(--ens-encre);
  color: #fff;
}

/* La khatem, étoile à huit branches : même trame que la connexion et que
   l'administration, pour que le site parle d'une seule voix. */
.ens-precand-boite::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .17;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23c8a04a' stroke-width='1.15'%3E%3Cpath d='M60 6 L74 32 L102 32 L82 52 L92 80 L60 64 L28 80 L38 52 L18 32 L46 32 Z'/%3E%3Cpath d='M60 22 L68 38 L86 38 L72 50 L78 68 L60 58 L42 68 L48 50 L34 38 L52 38 Z'/%3E%3Cpath d='M0 60 L18 60 M102 60 L120 60 M60 92 L60 120'/%3E%3Ccircle cx='60' cy='47' r='6'/%3E%3Cpath d='M0 0 L18 18 M120 0 L102 18 M0 120 L18 102 M120 120 L102 102'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 112px;
}

.ens-precand-boite::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 12% 0%, rgba(31, 87, 147, .55), transparent 58%),
              linear-gradient(180deg, rgba(20, 36, 58, .55) 0%, rgba(20, 36, 58, .9) 100%);
}

.ens-precand-boite > * { position: relative; z-index: 1; }

.ens-precand-tete { max-width: 640px; margin-bottom: 28px; }

.ens-precand-tete h2 {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  margin: 12px 0 10px;
}

.ens-precand-tete p {
  color: rgba(255, 255, 255, .78);
  font-size: 1rem;
  margin: 0;
}

/* Signal « ouvert » : un point qui respire. Discret, mais il attire l'oeil
   là où il faut. */
.ens-precand-signal {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ens-or);
  border: 1px solid rgba(200, 160, 74, .45);
  border-radius: 30px;
  padding: 6px 14px;
}

.ens-precand-point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34c77b;
  box-shadow: 0 0 0 0 rgba(52, 199, 123, .65);
  animation: ens-battement 2.4s ease-out infinite;
}

@keyframes ens-battement {
  0%   { box-shadow: 0 0 0 0 rgba(52, 199, 123, .6); }
  70%  { box-shadow: 0 0 0 9px rgba(52, 199, 123, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 199, 123, 0); }
}

.ens-precand-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.ens-precand-carte {
  position: relative;
  display: block;
  background: #fff;
  border-radius: 14px;
  padding: 22px 22px 18px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.ens-precand-carte:hover {
  transform: translateY(-4px);
  border-color: var(--ens-or);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
}

.ens-precand-badge {
  display: inline-block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #05603a;
  background: #e6f7ee;
  border-radius: 20px;
  padding: 3px 10px;
  margin-bottom: 10px;
}

.ens-precand-carte h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ens-encre);
  line-height: 1.3;
  margin: 0 0 8px;
}

.ens-precand-carte p {
  font-size: .87rem;
  color: #667085;
  line-height: 1.5;
  margin: 0 0 14px;
}

.ens-precand-lien {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ens-bleu);
}

.ens-precand-lien i { transition: transform .22s ease; }
.ens-precand-carte:hover .ens-precand-lien i { transform: translateX(4px); }

.ens-precand-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
}

.ens-precand-bouton {
  display: inline-block;
  background: var(--ens-or);
  color: var(--ens-encre);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  border-radius: 30px;
  padding: 12px 28px;
  transition: filter .2s ease, transform .2s ease;
}

.ens-precand-bouton:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  color: var(--ens-encre);
}

.ens-precand-suivi {
  color: rgba(255, 255, 255, .78);
  font-size: .88rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  padding-bottom: 2px;
}

.ens-precand-suivi:hover { color: var(--ens-or); border-color: var(--ens-or); }

@media (max-width: 575px) {
  .ens-precand-boite { padding: 30px 22px 26px; border-radius: 16px; }
  .ens-precand-tete h2 { font-size: 1.5rem; }
}

/* ==================================================================
   Pastille de date sur les vignettes

   Les dates étaient rendues en anglais sur une seule ligne (« 05 Sep »).
   Deux lignes — le quantième, puis le mois — se lisent d'un coup d'oeil,
   et la pastille reprend l'or de la charte.
   ================================================================== */

.card .box-image .ens-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: auto;
  min-width: 48px;
  padding: 7px 9px 6px;
  line-height: 1;
  border-radius: 9px;
  background: rgba(20, 36, 58, .88);
  border-top: 3px solid var(--ens-or);
  box-shadow: 0 3px 10px rgba(20, 36, 58, .28);
}

.card .box-image .ens-date b {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  font-style: normal;
}

.card .box-image .ens-date i {
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ens-or);
  margin-top: 3px;
}

/* ==================================================================
   Apparition au défilement

   Le thème anime déjà certains blocs, mais rien entre les sections : la
   page se déroulait d'un bloc. Seules l'opacité et une translation sont
   animées — aucune dimension n'est touchée, ce qui laisse les carrousels
   et les éléments flottants mesurer leurs images comme avant.
   ================================================================== */

/* L'état masqué n'existe que si le script a pris la main : sans lui, la
   classe n'est jamais posée et le contenu reste visible. Une animation ne
   doit jamais pouvoir effacer une page. */
.reveal-actif [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}

.reveal-actif [data-reveal].est-visible {
  opacity: 1;
  transform: none;
}

.reveal-actif [data-reveal][data-reveal-delai="1"] { transition-delay: .1s; }
.reveal-actif [data-reveal][data-reveal-delai="2"] { transition-delay: .2s; }
.reveal-actif [data-reveal][data-reveal-delai="3"] { transition-delay: .3s; }

/* ==================================================================
   Cartes d'article : un relief au survol

   Les vignettes ne réagissaient pas au pointeur ; rien n'indiquait
   qu'elles menaient quelque part.
   ================================================================== */

/* images-uniformes.css pose déjà bordure, ombre et léger relèvement, ainsi
   que le rognage de .box-image. On ne reprend ici que ce qui manque : le
   mouvement de l'image et celui de la flèche. */
.card .box-image img { transition: transform .5s ease; }
.card.custom-border-radius-1:hover .box-image img { transform: scale(1.045); }

/* La flèche du lien « Voir plus » suit le mouvement. */
.custom-testimonial-style-1 a i { transition: transform .25s ease; }
.card.custom-border-radius-1:hover .custom-testimonial-style-1 a i { transform: translateX(5px); }

/* ==================================================================
   Respect du réglage système

   Une animation ne s'impose jamais à qui a demandé qu'on l'en dispense.
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
  .reveal-actif [data-reveal] { opacity: 1; transform: none; transition: none; }
  .ens-precand-point { animation: none; }
  .card.custom-border-radius-1,
  .card.custom-border-radius-1:hover,
  .card .box-image img,
  .ens-precand-carte { transition: none; transform: none; }
}

/* ==================================================================
   Cartes d'article : extrait sous le titre

   Un titre seul ne dit pas de quoi il retourne. Deux lignes d'extrait
   suffisent à décider si l'on ouvre.

   Titre et extrait sont tous deux tronqués à un nombre fixe de lignes,
   et le bloc a une hauteur minimale : les cartes d'un même carrousel
   gardent ainsi exactement la même hauteur. Owl Carousel mesure ses
   éléments à l'initialisation et n'aime pas les hauteurs inégales.
   ================================================================== */

.card .custom-testimonial-style-1.ens-carte-article { min-height: 148px; }

.card .ens-extrait {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
  font-size: .84rem;
  line-height: 1.45;
  color: #667085;
  margin: 0 0 10px;
  padding: 0 4px;
}

/* ==================================================================
   Pré-candidature : les trois étapes

   Ce qui attend le candidat, dit avant qu'il ne commence. On hésite
   moins à se lancer quand on sait ce qu'on aura à faire — et on
   arrive avec ses pièces déjà prêtes, ce qui évite les dossiers
   abandonnés en cours de route.
   ================================================================== */

.ens-precand-etapes {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 26px;
  margin: 0 0 26px;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  counter-reset: none;
}

.ens-precand-etapes li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.ens-precand-numero {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(200, 160, 74, .18);
  border: 1px solid rgba(200, 160, 74, .5);
  color: var(--ens-or);
  font-size: .8rem;
  font-weight: 700;
}

.ens-precand-etapes b {
  display: block;
  color: #fff;
  font-size: .92rem;
  font-weight: 600;
  margin-bottom: 3px;
}

.ens-precand-etapes li > span:last-child {
  font-size: .84rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .7);
}

/* Faits d'une formation, quand sa description ne fait que reprendre son
   titre — ce qui est le cas des deux cycles actuellement ouverts. */
.ens-precand-faits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0 0 14px !important;
}

.ens-precand-faits span {
  font-size: .76rem;
  font-weight: 600;
  color: #475467;
  background: #f2f4f7;
  border-radius: 20px;
  padding: 3px 10px;
}

.ens-precand-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  color: rgba(255, 255, 255, .6);
}

.ens-precand-note i { color: var(--ens-or); }

@media (max-width: 575px) {
  .ens-precand-etapes { padding-top: 18px; margin-bottom: 20px; gap: 12px; }
  .ens-precand-note { width: 100%; }
}

/* ==================================================================
   Mot du directeur

   La section déroulait le premier paragraphe entier de la page dédiée,
   entouré de trois images flottantes : beaucoup de place pour peu
   d'information, et le signataire n'apparaissait qu'après le texte.
   L'identité passe devant, la citation dit l'essentiel, le reste se
   lit sur la page dédiée.
   ================================================================== */

.md-portrait { position: relative; }
.md-portrait > div:first-child img { width: 100%; height: auto; }

.md-surtitre {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ens-or);
  margin-bottom: 12px;
}

.md-surtitre::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--ens-or);
  border-radius: 2px;
}

.md-nom {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--ens-encre);
  line-height: 1.15;
  margin: 0 0 4px;
}

.md-fonction {
  font-size: .95rem;
  color: var(--ens-bleu);
  font-weight: 600;
  margin: 0 0 22px;
}

/* La citation porte le propos ; le guillemet ouvrant la détache du reste
   sans qu'il faille l'écrire dans le texte. */
.md-citation {
  position: relative;
  border-left: 3px solid var(--ens-or);
  padding: 4px 0 4px 22px;
  margin: 0 0 20px;
  font-size: 1.16rem;
  line-height: 1.55;
  font-weight: 600;
  color: var(--ens-encre);
}

.md-citation::before {
  content: "\201C";
  position: absolute;
  left: 14px;
  top: -12px;
  font-size: 3rem;
  line-height: 1;
  color: rgba(200, 160, 74, .28);
  font-family: Georgia, "Times New Roman", serif;
}

.md-texte {
  font-size: .98rem;
  line-height: 1.7;
  color: #475467;
  margin: 0 0 22px;
}

.md-lien {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .93rem;
  font-weight: 700;
  color: var(--ens-bleu);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color .2s ease, color .2s ease;
}

.md-lien:hover { color: var(--ens-encre); border-color: var(--ens-or); }
.md-lien i { transition: transform .2s ease; }
.md-lien:hover i { transform: translateX(4px); }

@media (max-width: 991px) {
  .md-portrait { max-width: 340px; margin: 0 auto; }
}

@media (max-width: 575px) {
  .md-nom { font-size: 1.4rem; }
  .md-citation { font-size: 1.05rem; padding-left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .md-lien, .md-lien i { transition: none; }
}