/* Fiche d'article (type post), reprise à l'identique du gabarit d'article
   d'iuac.ca : règles .rkt-art-* de rektora-sites/assets/css/rektora.css (lues
   seulement), dans leur ordre d'origine et avec leurs mesures.

   Seules changent les couleurs de marque (bleu et vert RQ3i au lieu du bleu et
   de l'orange IUAC) et la police (Inter). Les jetons du produit sont redéfinis
   sous .rq3i-art avec les valeurs servies par iuac.ca, pour que chaque règle
   garde sa forme ; chaque sélecteur est préfixé par .rq3i-art pour passer
   devant les styles généraux du thème Consultio. */

/* ── Jetons ──────────────────────────────────────────────────────── */

.rq3i-art {
  /* Encre et gris : fixes au produit, repris tels quels. */
  --gray-100: #f8f9fa;
  --gray-300: #dde1e5;
  --gray-700: #495057;
  --gray-900: #1d1d1d;
  --c-encre: #12263a;
  --c-encre-profond: #0d1c2c;
  --c-text: var(--gray-900);
  --c-text-doux: var(--gray-700);
  --c-heading: var(--c-encre);
  --c-bg: #ffffff;
  --c-bg-alt: var(--gray-100);
  --c-bordure: var(--gray-300);

  /* Marque : RQ3i. Sur iuac.ca : #0063ba, #004a8c, #e9880d. Le vert porte un
     texte foncé : en blanc, il tomberait à 2,3:1 de contraste. */
  --c-primary: #1b3c86;
  --c-primary-dark: #1b3c86;
  --c-primary-voile: #e8edf8;
  --c-accent: #85c06c;
  --c-sur-accent: #12263a;

  --f-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --fs-body: 17px;
  --fs-h1: 32px;
  --fs-h2: 25px;
  --fs-h3: 22px;
  --fs-meta: 14px;
  --lh-body: 1.65;
  --lh-heading: 1.2;

  --w-content: 1140px;
  --w-narrow: 720px;

  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-6: 3rem;
  --sp-8: 4rem;

  --radius: 8px;
  --radius-petit: 4px;
}

@media (min-width: 768px) {
  .rq3i-art {
    --fs-h1: 44px;
    --fs-h2: 30px;
  }
}

/* ── Fondations (celles de body.rkt, bornées au gabarit) ─────────── */

.rq3i-art {
  display: block;
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-text-size-adjust: 100%;
}

.rq3i-art *,
.rq3i-art *::before,
.rq3i-art *::after {
  box-sizing: border-box;
}

.rq3i-art img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* main.rq3i-art et non .rq3i-art : le thème impose Poppins par
   .heading-default-font h1…h6, de même poids et chargé après cette feuille. */
main.rq3i-art h1,
main.rq3i-art h2,
main.rq3i-art h3,
main.rq3i-art h4 {
  font-family: var(--f-heading);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-2);
  color: var(--c-heading);
  text-transform: none;
}

main.rq3i-art h1 { font-size: var(--fs-h1); font-weight: 700; }
main.rq3i-art h2 { font-size: var(--fs-h2); font-weight: 700; }
main.rq3i-art h3 { font-size: var(--fs-h3); font-weight: 600; }
main.rq3i-art h4 { font-size: 1.1rem; font-weight: 600; }

.rq3i-art p { margin: 0 0 var(--sp-2); }

.rq3i-art a { color: var(--c-primary-dark); }

.rq3i-art .rq3i-art-prose a {
  color: var(--c-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rq3i-art .rq3i-art-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rq3i-art :focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .rq3i-art *,
  .rq3i-art *::before,
  .rq3i-art *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}

/* ── Conteneur, texte et légende ─────────────────────────────────── */

.rq3i-art .rq3i-art-conteneur {
  width: 100%;
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 0 var(--sp-2);
}

@media (min-width: 768px) {
  .rq3i-art .rq3i-art-conteneur {
    padding: 0 var(--sp-3);
  }
}

.rq3i-art .rq3i-art-prose {
  max-width: var(--w-narrow);
}

.rq3i-art .rq3i-art-prose h2 {
  margin-top: var(--sp-4);
}

.rq3i-art .rq3i-art-prose ul,
.rq3i-art .rq3i-art-prose ol {
  padding-left: 1.4rem;
}

.rq3i-art .rq3i-art-prose blockquote {
  margin: var(--sp-3) 0;
  padding-left: var(--sp-2);
  border-left: 3px solid var(--c-accent);
  color: var(--c-text-doux);
}

.rq3i-art .rq3i-art-prose img {
  margin: var(--sp-2) 0;
}

.rq3i-art .rq3i-art-legende {
  font-size: var(--fs-meta);
  font-style: italic;
  color: var(--c-text-doux);
  margin-top: var(--sp-1);
}

/* ── Bandeau ─────────────────────────────────────────────────────── */

.rq3i-art .rq3i-art-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--c-encre-profond), var(--c-encre));
  color: #ffffff;
  padding: var(--sp-4) 0 var(--sp-6);
}

.rq3i-art .rq3i-art-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(13, 28, 44, 0.86), rgba(18, 38, 58, 0.72));
  z-index: 1;
}

/* Photo à la une en couche à part : le flou détruit les bords nets d'un texte
   incrusté dans l'image, brightness() l'assombrit partout (explication
   complète dans le gabarit d'iuac.ca). */
.rq3i-art .rq3i-art-hero-photo {
  position: absolute;
  inset: -16px;
  background-size: cover;
  background-position: center;
  filter: blur(14px) brightness(0.32) saturate(0.85);
  transform: scale(1.08);
}

.rq3i-art .rq3i-art-hero-dedans {
  position: relative;
  z-index: 2;
  max-width: var(--w-content);
}

.rq3i-art .rq3i-art-fil {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-meta);
  color: rgba(255, 255, 255, 0.85);
}

.rq3i-art .rq3i-art-fil a {
  color: rgba(255, 255, 255, 0.95);
  text-decoration: none;
}

.rq3i-art .rq3i-art-fil a:hover {
  color: rgba(255, 255, 255, 0.95);
  text-decoration: underline;
}

.rq3i-art .rq3i-art-fil span[aria-hidden] {
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0.3em;
}

.rq3i-art .rq3i-art-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.rq3i-art .rq3i-art-badge,
.rq3i-art .rq3i-art-badge:hover {
  display: inline-block;
  background: var(--c-accent);
  color: var(--c-sur-accent);
  font-family: var(--f-heading);
  font-size: var(--fs-meta);
  font-weight: 700;
  line-height: var(--lh-body);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  text-decoration: none;
}

.rq3i-art .rq3i-art-lecture {
  font-size: var(--fs-meta);
  color: rgba(255, 255, 255, 0.85);
}

.rq3i-art .rq3i-art-titre {
  margin: 0 0 var(--sp-2);
  color: #ffffff;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  line-height: var(--lh-heading);
}

/* margin : 0 0 16px et non 0 comme écrit dans rektora.css : sur iuac.ca, la
   règle générale « .rkt p » l'emporte sur « .rkt-art-date », et c'est ce qui
   s'affiche. On reproduit le rendu, pas la règle perdante. */
.rq3i-art .rq3i-art-date {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-meta);
  color: rgba(255, 255, 255, 0.85);
}

/* ── Grille : carte de lecture et colonne de droite ─────────────── */

.rq3i-art .rq3i-art-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-2) var(--sp-8);
}

@media (min-width: 1024px) {
  .rq3i-art .rq3i-art-grille {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--sp-6);
  }

  .rq3i-art .rq3i-art-aside {
    position: sticky;
    top: 96px;
  }
}

.rq3i-art .rq3i-art-carte {
  background: var(--c-bg);
  border: 1px solid var(--c-bordure);
  border-radius: var(--radius);
  padding: var(--sp-4);
}

.rq3i-art .rq3i-art-image {
  margin: 0 0 var(--sp-3);
}

.rq3i-art .rq3i-art-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-petit);
}

.rq3i-art .rq3i-art-chapeau {
  max-width: none;
  margin: 0 0 var(--sp-3);
  padding-left: var(--sp-2);
  border-left: 3px solid var(--c-accent);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--c-text-doux);
}

.rq3i-art .rq3i-art-etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-bordure);
}

.rq3i-art .rq3i-art-etiquettes a {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-primary-dark);
  background: var(--c-bg-alt);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  text-decoration: none;
}

.rq3i-art .rq3i-art-etiquettes a:hover {
  background: var(--c-primary-voile);
}

/* Partage : trois boutons texte, aux couleurs des réseaux eux-mêmes. */
.rq3i-art .rq3i-art-partage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-bordure);
}

.rq3i-art .rq3i-art-partage-intitule {
  font-family: var(--f-heading);
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--c-text-doux);
  margin-right: 0.3rem;
}

.rq3i-art .rq3i-art-partage-bouton {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-petit);
  font-family: var(--f-heading);
  font-size: var(--fs-meta);
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
}

.rq3i-art .rq3i-art-partage-fb { background: #1877f2; }
.rq3i-art .rq3i-art-partage-x { background: #000000; }
.rq3i-art .rq3i-art-partage-li { background: #0a66c2; }

.rq3i-art .rq3i-art-partage-bouton:hover {
  opacity: 0.88;
  color: #ffffff;
}

.rq3i-art .rq3i-art-nav {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-bordure);
}

@media (min-width: 600px) {
  .rq3i-art .rq3i-art-nav {
    grid-template-columns: 1fr 1fr;
  }
}

.rq3i-art .rq3i-art-nav-lien {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: var(--sp-2);
  border: 1px solid var(--c-bordure);
  border-radius: var(--radius);
  text-decoration: none;
}

.rq3i-art .rq3i-art-nav-lien:hover {
  border-color: var(--c-primary);
  background: var(--c-bg-alt);
}

.rq3i-art .rq3i-art-nav-lien--suivant {
  text-align: right;
  align-items: flex-end;
}

/* Seul écart volontaire avec iuac.ca : « grid-column: 2 » y est posé à toutes
   les largeurs et crée, sous 600 px, une seconde colonne implicite qui serre
   « Précédent » et « Suivant » côte à côte (137 et 130 px, mesuré sur iuac.ca
   le 2026-09-11). Réservé ici à la grille à deux colonnes. */
@media (min-width: 600px) {
  .rq3i-art .rq3i-art-nav-lien--suivant {
    grid-column: 2;
  }
}

.rq3i-art .rq3i-art-nav-libelle {
  font-family: var(--f-heading);
  font-size: var(--fs-meta);
  font-weight: 700;
  color: var(--c-primary-dark);
}

.rq3i-art .rq3i-art-nav-titre {
  color: var(--c-heading);
  font-weight: 600;
}

.rq3i-art .rq3i-art-aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.rq3i-art .rq3i-art-liees {
  background: var(--c-bg);
  border: 1px solid var(--c-bordure);
  border-radius: var(--radius);
  padding: var(--sp-3);
}

.rq3i-art .rq3i-art-liees h2 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h3);
  color: var(--c-heading);
}

.rq3i-art .rq3i-art-liee {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--c-bordure);
  text-decoration: none;
}

.rq3i-art .rq3i-art-liee:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.rq3i-art .rq3i-art-liee-media {
  flex: 0 0 4.25rem;
  width: 4.25rem;
  height: 3.4rem;
  border-radius: var(--radius-petit);
  overflow: hidden;
  background: var(--c-bg-alt);
}

.rq3i-art .rq3i-art-liee-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rq3i-art .rq3i-art-liee-corps {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rq3i-art .rq3i-art-liee-cat {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-primary-dark);
}

.rq3i-art .rq3i-art-liee-titre {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--c-heading);
  line-height: 1.35;
  margin: 0.1rem 0;
}

.rq3i-art .rq3i-art-liee:hover .rq3i-art-liee-titre {
  color: var(--c-primary);
}

.rq3i-art .rq3i-art-liee-date {
  font-size: 0.72rem;
  color: var(--c-text-doux);
}

.rq3i-art .rq3i-art-appel {
  background: var(--c-primary-dark);
  color: #ffffff;
  border-radius: var(--radius);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.rq3i-art .rq3i-art-appel h2 {
  margin: 0;
  font-size: 1.1rem;
  color: #ffffff;
}

.rq3i-art .rq3i-art-appel p {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
}

.rq3i-art .rq3i-art-appel-bouton,
.rq3i-art .rq3i-art-appel-bouton:hover {
  display: block;
  text-align: center;
  background: var(--c-accent);
  color: var(--c-sur-accent);
  font-weight: 700;
  padding: 0.6rem;
  border-radius: var(--radius-petit);
  text-decoration: none;
  margin-top: 0.3rem;
}

.rq3i-art .rq3i-art-appel-lien {
  display: block;
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  text-decoration: none;
}

.rq3i-art .rq3i-art-appel-lien:hover {
  color: #ffffff;
}