/* =====================================================================
   L'UNIVERSITE LA CITE DU SAVOIR : la meme charte, en plus sombre

   Le site universitaire partage /css/style.css avec le site
   pre-universitaire : une seule feuille a ecrire, une seule a mettre en
   cache, et une correction faite la-bas profite aux deux. Ce fichier ne
   fait que REDEFINIR les jetons de couleur, apres style.css. Aucune
   regle de mise en page n'est repetee ici.

   POURQUOI PLUS SOMBRE
   Les deux sites doivent se reconnaitre au premier coup d'oeil sans se
   ressembler. On ne change donc pas de couleurs : on descend d'un cran
   dans les memes familles de la charte. Le pre-universitaire garde ses
   teintes vives et son fond presque blanc ; l'universite prend les
   versions foncees des memes degrades et un fond plus dense.

   CONTRASTE
   Chaque teinte garde ses trois roles et ses deux obligations :
     --n-<nom>-texte pose sur --n-<nom>-pale   >= 4,5:1
     du blanc pose sur --n-<nom>-texte         >= 4,5:1
   Les valeurs ci-dessous ont ete mesurees ; la plus juste est a 5,71:1.
   Ne pas eclaircir un -pale ni eclaircir un -texte sans refaire le calcul.
   ===================================================================== */

:root{
  /* les panneaux : memes tons, fond nuit plus profond que sur le site
     scolaire, comme le reste de la palette */
  --panneau-nuit:rgba(4,15,43,.90);

  /* ---- la typographie ----
     DM Sans sur le site universitaire, Montserrat sur le
     pre-universitaire. Les deux sites se distinguent donc a la fois par
     la densite des couleurs et par le dessin des lettres, tout en
     gardant la meme palette de la charte. DM Sans a des formes plus
     ouvertes et un gris de texte plus calme en petit corps, ce qui sert
     des pages longues comme celles des facultes. */
  --serif:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --accent-italique:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* ---- les bleus et l'ambre du logo, versions foncees ---- */
  --bleu-nuit:#071A44;
  --bleu-nuit-2:#040F2B;
  --bleu:#1347D8;
  --bleu-fonce:#0A2FA0;
  --bleu-pale:#DCE6FB;
  --bleu-pale-2:#E8EEFC;

  --or:#C97018;
  --or-texte:#9C4409;
  --or-fonce:#A65800;
  --or-pale:#F7E7D2;

  /* ---- l'encre et les fonds : un cran plus dense ---- */
  --encre:#08182E;
  --texte:#35485E;
  --muted:#5C6B80;        /* 4,92:1 sur --fond */
  --ligne:#CFD8E6;
  --fond:#F1F4F9;

  --ombre:0 1px 2px rgba(7,26,68,.07),0 12px 32px -14px rgba(7,26,68,.30);
  --ombre-forte:0 2px 4px rgba(7,26,68,.09),0 22px 48px -18px rgba(7,26,68,.42);

  /* ---- la palette de la charte, descendue d'un cran ---- */
  --n-orange:#E08A2E;   --n-orange-texte:#8A4900;  --n-orange-pale:#F7E7D2;
  --n-corail:#E23E22;   --n-corail-texte:#A81800;  --n-corail-pale:#F7DCD7;
  --n-ciel:#0070CC;     --n-ciel-texte:#00589E;    --n-ciel-pale:#D7E8F8;
  --n-bleu:#0340A8;     --n-bleu-texte:#032F86;    --n-bleu-pale:#D9E3F8;
  --n-vert:#00875A;     --n-vert-texte:#006845;    --n-vert-pale:#D5F2E7;
  --n-nuit:#071A44;     --n-nuit-texte:#071A44;    --n-nuit-pale:#D8E1F5;

  /* ---- les degrades, memes familles, depart plus bas ---- */
  --d-orange:linear-gradient(135deg,#7A3F00 0%,#C97018 100%);
  --d-corail:linear-gradient(135deg,#8A1300 0%,#E23E22 100%);
  --d-ciel:linear-gradient(135deg,#00457D 0%,#0070CC 100%);
  --d-bleu:linear-gradient(135deg,#02287A 0%,#0340A8 100%);
  --d-vert:linear-gradient(135deg,#004930 0%,#00875A 100%);
  --d-nuit:linear-gradient(135deg,#040F2B 0%,#0F2C68 100%);
}

/* L'en-tete et le heros : le site universitaire s'ouvre sur du bleu nuit
   plein, la ou le pre-universitaire s'ouvre sur une photo eclaircie. */
.page-tete-fond{
  background:linear-gradient(180deg,rgba(4,15,43,.94) 0%,rgba(7,26,68,.86) 100%);
}

/* =====================================================================
   L'ACCUEIL UNIVERSITAIRE

   Ces blocs n'existent que sur univ.lacitedusavoir.org : ils sont donc
   ici et non dans style.css, qui sert les deux sites.

   Le modele vient de l'Universite de Montreal et de l'Universite Laval :
   un heros qui donne l'acte d'autorisation et la date de rentree, un
   chemin de candidature numerote, les chiffres de l'etablissement, puis
   des entrees par public. Ce qu'on ne leur emprunte pas, ce sont les
   actualites et le calendrier d'evenements : l'universite n'ouvre qu'en
   2027-2028, il n'y a rien de vrai a y mettre.
   ===================================================================== */

/* ----------------------------------------------------------------
   LE HEROS : UN CARROUSEL

   Repris de l'Universite Laval et de l'Universite de Montreal. La
   photo occupe tout le bandeau et reste NETTE : pas de voile sombre
   pose dessus, qui l'eteignait dans la version precedente. Le texte
   est dans un panneau opaque, ce qui garantit son contraste quelle que
   soit la photo derriere — un texte pose a meme l'image depend du
   cliche, et un cliche peut etre remplace par l'ecole.

   Un degrade court reste en bas de l'image, uniquement pour que les
   commandes du carrousel se detachent.
   ---------------------------------------------------------------- */
.hero-univ{
  position:relative;isolation:isolate;
  background:var(--bleu-nuit-2);
  min-height:clamp(420px,58vw,620px);
  overflow:hidden;
}
.diapos{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.diapo{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .8s ease;
}
.diapo.active{opacity:1;visibility:visible}
/* <picture> est en ligne par defaut : sans ceci, l'image ne remplit pas */
.diapo picture{display:block}
.diapo-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  /* Le panneau de texte occupe le tiers gauche : on decale le cadrage
     vers la droite pour que le sujet ne se retrouve pas derriere lui.
     Sur telephone le panneau passe SOUS la photo, donc on recentre. */
  object-position:68% center;
}
/* juste assez d'ombre en bas pour les commandes, pas sur toute l'image */
.diapo::after{
  content:"";position:absolute;inset:auto 0 0 0;height:38%;
  background:linear-gradient(180deg,rgba(4,15,43,0) 0%,rgba(4,15,43,.72) 100%);
}

.diapo-inner{
  position:relative;z-index:2;height:100%;
  display:flex;align-items:center;
  padding-top:clamp(2.5rem,6vw,4rem);
  padding-bottom:clamp(4.5rem,8vw,6rem);
}
/* ---- le panneau du carrousel ----
   Les TONS (nuit / blanc / ambre) et la typographie des panneaux sont
   dans style.css : les deux sites les partagent. Ici, seule la
   geometrie propre au carrousel, et les fonds redefinis pour la
   palette plus sombre de l'universite.                              */
.diapo-panneau{
  max-width:min(34rem,52%);
  backdrop-filter:blur(2px);
  border-radius:var(--r);
  border-left:5px solid var(--or);
  padding:clamp(1.5rem,3.4vw,2.6rem);
}
.diapo-panneau .btn{min-height:44px}

/* ---- les commandes ---- */
.carrousel-commandes{
  position:absolute;z-index:3;left:0;right:0;bottom:clamp(1rem,2.5vw,1.8rem);
  display:flex;align-items:center;justify-content:center;gap:1rem;
}
.fleche{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  color:#fff;transition:background var(--t),border-color var(--t);
}
.fleche:hover{background:rgba(255,255,255,.3);border-color:#fff}
.fleche:focus-visible{outline:3px solid var(--or);outline-offset:2px}
.puces{display:flex;align-items:center;gap:.5rem}
/* La puce est un bouton de 44px de HAUT — la cible tactile exigee par
   WCAG 2.5.5 — dont seule une barre de 5px est visible, dessinee par
   ::after. La version precedente posait un ::before absolu sur un
   bouton non positionne : il ne s'ancrait a rien et la cible restait a
   5px. Mesure a 320px avant correction. */
.puce{
  position:relative;display:flex;align-items:center;
  width:34px;height:44px;padding:0;cursor:pointer;
  background:none;border:none;
  transition:width var(--t);
}
.puce::after{
  content:"";display:block;width:100%;height:5px;border-radius:999px;
  background:rgba(255,255,255,.38);
  transition:background var(--t);
}
.puce.active{width:52px}
.puce.active::after{background:var(--or)}
.puce:focus-visible{outline:3px solid var(--or);outline-offset:4px}

/* ---- sur telephone : le panneau prend toute la largeur ---- */
@media (max-width:820px){
  .hero-univ{min-height:0}
  .diapos{position:relative;height:auto}
  .diapo{position:relative;inset:auto;display:none;opacity:1;visibility:visible}
  .diapo.active{display:block}
  .diapo-photo{position:relative;height:clamp(190px,44vw,280px);object-position:center}
  .diapo::after{display:none}
  /* .diapo-inner porte la classe .shell : on annule sa gouttiere ici
     plutot que de la compenser par une marge negative, qui debordait
     de la fenetre et n'etait rattrapee que par overflow:hidden. */
  .diapo-inner{display:block;padding-left:0;padding-right:0;max-width:none;width:100%}
  /* on ne touche QUE la geometrie : le fond et les encres viennent du
     ton de la diapositive (.panneau-nuit / -blanc / -ambre). La version
     precedente forcait un fond bleu nuit ici et effacait les trois tons
     sur telephone. */
  .diapo-panneau{
    max-width:none;border-radius:0;margin:0;
    border-left:none;border-top:4px solid currentColor;
    padding:clamp(1.4rem,5vw,2rem) clamp(1rem,4.5vw,1.6rem)
            calc(clamp(1.4rem,5vw,2rem) + 60px);
  }
  /* le liseret reprend la couleur d'accent du ton, pas l'encre du texte */
  .panneau-nuit{border-top-color:var(--or)}
  .panneau-blanc{border-top-color:var(--or)}
  .panneau-ambre{border-top-color:#071A44}
  .diapo-panneau .btn{width:100%;justify-content:center}
  .carrousel-commandes{bottom:1rem}
  .chiffres-cles{grid-template-columns:repeat(2,1fr);gap:1.2rem}
}

/* ---------------- le chemin de candidature ---------------- */
.pas-liste{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.7rem);
}
.pas{
  position:relative;background:var(--blanc);border:1px solid var(--ligne);
  border-radius:var(--r);padding:clamp(1.4rem,3vw,2rem);
  display:flex;flex-direction:column;
}
.pas-num{
  display:flex;align-items:center;justify-content:center;
  width:2.6rem;height:2.6rem;border-radius:50%;margin-bottom:1rem;
  background:var(--d-nuit);color:#fff;font-weight:800;font-size:1.1rem;
}
.pas h3{font-size:1.1rem;margin:0 0 .6rem;color:var(--encre)}
.pas p{margin:0 0 1.2rem;font-size:.94rem;flex:1}
/* le lien ferme la carte : on lui donne la hauteur de cible plutot que
   de laisser 25px de texte, meme si la regle AA minimale l'accepterait */
.pas-lien{
  display:inline-flex;align-items:center;min-height:44px;
  font-weight:700;font-size:.92rem;color:var(--n-bleu-texte);text-decoration:none;
}
.pas-lien:hover{text-decoration:underline}

/* ---------------- faits et chiffres ---------------- */
.faits{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.8rem)}
.fait{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  padding:clamp(1.4rem,3vw,2rem);border-top:4px solid var(--n-nuit);
}
.fait-nombre{
  display:block;font-size:clamp(2.2rem,5vw,3rem);font-weight:800;
  color:var(--n-nuit-texte);line-height:1;font-variant-numeric:tabular-nums;
}
.fait-libelle{
  display:block;margin:.4rem 0 .9rem;font-size:.8rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--or-texte);
}
.fait p{margin:0;font-size:.93rem}

/* ---------------- entrees par public ---------------- */
.publics{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,2vw,1.4rem)}
.public{
  display:flex;flex-direction:column;min-height:44px;
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);
  border-left:4px solid var(--n);padding:clamp(1.2rem,2.6vw,1.6rem);
  text-decoration:none;color:var(--texte);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.public:hover{transform:translateY(-4px);box-shadow:var(--ombre-forte)}
.public h3{font-size:1.02rem;margin:0 0 .4rem;color:var(--encre)}
.public p{margin:0 0 .9rem;font-size:.88rem;flex:1}
.public-fleche{font-size:1.15rem;color:var(--n);font-weight:700}

/* ---------------- adaptation aux petits ecrans ---------------- */
@media (max-width:980px){
  .pas-liste,.faits{grid-template-columns:1fr 1fr}
  .publics{grid-template-columns:1fr 1fr}
  .chiffres-cles{grid-template-columns:repeat(2,1fr);gap:1.3rem}
}
@media (max-width:640px){
  .pas-liste,.faits,.publics{grid-template-columns:1fr}
}

/* =====================================================================
   LES SIX FACULTES, EN LISTE

   Les cartes illustrees chargeaient l'accueil : six photos, six
   descriptions, une grille qui prenait deux ecrans. Elles restent sur
   /departements.html, dont c'est le sujet. Ici, six lignes.

   L'intitule tient sur DEUX lignes : l'article en petit et en gris, le
   nom distinctif en grand. C'est ce qui rend la liste lisible en
   diagonale — l'oeil saute les « Faculté de » et ne retient que les
   noms.

   L'animation est un decalage a l'apparition, 60 ms par ligne, pose en
   style en ligne parce qu'il depend du rang. Au survol, la ligne avance
   de quelques pixels et la fleche la suit : assez pour dire que c'est
   cliquable, pas assez pour distraire.
   ===================================================================== */
.facultes-liste{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0 clamp(1.5rem,4vw,3.5rem);
  border-top:1px solid var(--ligne);
}
.faculte-ligne{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;gap:clamp(.8rem,2vw,1.4rem);
  padding:clamp(1.1rem,2.4vw,1.5rem) 0;
  border-bottom:1px solid var(--ligne);
  text-decoration:none;color:var(--texte);
  transition:transform var(--t),border-color var(--t);
}
.faculte-ligne:hover{transform:translateX(6px);border-color:var(--n-nuit)}
.faculte-ligne:focus-visible{outline:3px solid var(--or);outline-offset:4px}

.faculte-rang{
  font-size:.82rem;font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.faculte-nom{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.faculte-article{
  font-size:.76rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--or-texte);
}
.faculte-titre{
  font-size:clamp(1rem,1.7vw,1.22rem);font-weight:700;line-height:1.25;
  color:var(--encre);
}
.faculte-ligne:hover .faculte-titre{color:var(--n-bleu-texte)}
.faculte-compte{
  font-size:.82rem;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.faculte-fleche{
  display:flex;color:var(--n-nuit);opacity:.35;
  transition:opacity var(--t),transform var(--t);
}
.faculte-ligne:hover .faculte-fleche{opacity:1;transform:translateX(4px)}

@media (max-width:860px){
  .facultes-liste{grid-template-columns:1fr}
}
@media (max-width:520px){
  /* le compte passe sous le titre : sur 320px, quatre colonnes ne tiennent pas */
  .faculte-ligne{grid-template-columns:auto 1fr auto;row-gap:.35rem}
  .faculte-compte{grid-column:2;justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  .faculte-ligne,.faculte-fleche{transition:none}
  .faculte-ligne:hover{transform:none}
}