/* ==========================================================================
   Le Bleuet Blanc — quotidien numérique québécois
   bleuetblanc.ca

   La trousse de marque, tenue : un bandeau de service, une manchette pleine
   largeur en bleu, trois colonnes, un pied de page. Les aplats bleus portent
   la navigation et les listes ; le corps des textes reste sur papier.

   Les règles du système, gardées :
   - Une seule famille, Source Serif 4, pour les six emplois.
   - Le bleu du drapeau porte les aplats ; le bleu vif porte ce qui se clique.
   - Le magenta ne sert qu'au direct et à l'alerte, jamais dans le même petit
     élément que le bleu.
   - Le corps se lit en une colonne de 60 à 70 signes, interligne ample.

   Le caractère est déjà hébergé par le réseau (Turtle Island l'a apporté),
   mais il faut le déclarer ici : une @font-face ne s'applique qu'aux pages
   qui chargent la feuille qui la porte.
   ========================================================================== */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/source-serif-4-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

body.t-bleuetblanc {
  /* --- Encre, papier, un bleu --------------------------------------------- */
  --bleu:       #095797;   /* bleu du drapeau : aplats, manchette, symbole */
  --bleu-fonce: #063C69;   /* le bandeau de service, le pied du bandeau */
  --bleu-100:   #CFE0EF;   /* texte clair sur aplat bleu */
  --vif:        #0088B0;   /* liens et boutons — tout ce qui se clique */
  --encre:      #201E1D;   /* texte, filets */
  --papier:     #F3F2F2;   /* fond de page */
  --surface:    #EAE9E9;   /* la colonne du journal */
  --magenta:    #D6006C;   /* en direct, rare */

  --gris-300:   #D7D3D3;
  --gris-700:   #605D5D;
  --discret:    color-mix(in srgb, var(--encre) 70%, transparent);
  --filet:      color-mix(in srgb, var(--encre) 16%, transparent);

  --serif: 'Source Serif 4', Charter, Georgia, 'Times New Roman', serif;
  --col:   1180px;
  --r:     2px;

  background: var(--gris-300);
  color: var(--encre);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.t-bleuetblanc a { color: var(--vif); text-decoration: none; }
.t-bleuetblanc a:hover { text-decoration: underline; }
.t-bleuetblanc ::selection { background: color-mix(in srgb, var(--vif) 22%, transparent); }
.t-bleuetblanc :focus-visible { outline: 2px solid var(--vif); outline-offset: 2px; }
.t-bleuetblanc img { max-width: 100%; display: block; }
.t-bleuetblanc h1, .t-bleuetblanc h2, .t-bleuetblanc h3, .t-bleuetblanc h4 {
  font-weight: 600; letter-spacing: -0.015em; line-height: 1.14; margin: 0;
  text-wrap: balance;
}

/* --- La colonne du journal ------------------------------------------------ */

.bb-page {
  max-width: var(--col); margin: 0 auto;
  background: var(--surface);
  box-shadow: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  overflow: hidden;
}

/* --- Bandeau de service --------------------------------------------------- */

.bb-bandeau {
  background: var(--bleu-fonce); color: var(--bleu-100);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 24px; flex-wrap: wrap;
  padding: 9px 28px;
  font-size: 12px; letter-spacing: .05em;
}
.bb-bandeau a { color: inherit; }
.bb-bandeau a:hover { color: #fff; text-decoration: none; }
.bb-bandeau .grp { display: flex; flex-wrap: wrap; gap: 20px; }

/* --- Manchette de titre (le nameplate) ------------------------------------ */

.bb-tete {
  background: var(--papier);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px 32px; flex-wrap: wrap;
  padding: 26px 28px 22px;
}
.bb-lock { display: flex; align-items: center; gap: 16px; color: var(--encre); }
.bb-lock:hover { text-decoration: none; }
/* Pas de `color` ici : le symbole est un <img>, donc un document à part, et
   la couleur qu'il porte est écrite dans le fichier SVG lui-même. */
.bb-lock .sym { width: 46px; flex: none; }
/* Direction A : une seule ligne, romaine. La plus solide en haut de page. */
.bb-nom { font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: -0.025em; }
.bb-tete .rub {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--discret);
}
.bb-chercher { display: flex; align-items: center; gap: 8px; }
.bb-chercher input {
  font-family: var(--serif); font-size: 14px; padding: 8px 12px;
  border: 1px solid var(--filet); border-radius: var(--r);
  background: var(--surface); color: var(--encre); min-width: 190px;
}
.t-bleuetblanc .bb-btn {
  display: inline-flex; align-items: center; font-family: var(--serif);
  font-weight: 600; font-size: 14px; padding: 9px 20px;
  border: 0; border-radius: var(--r);
  background: var(--vif); color: var(--papier); cursor: pointer;
}
.t-bleuetblanc .bb-btn:hover { background: var(--bleu); color: var(--papier); text-decoration: none; }

/* --- La barre des rubriques ----------------------------------------------- */

.bb-rubriques { background: var(--bleu); display: flex; flex-wrap: wrap; padding: 0 12px; }
.bb-rubriques a {
  color: var(--surface); padding: 14px 18px;
  font-size: 13px; letter-spacing: .07em; text-transform: uppercase;
}
.bb-rubriques a:hover { background: color-mix(in srgb, #000 12%, var(--bleu)); text-decoration: none; }
.bb-rubriques a[aria-current] { background: color-mix(in srgb, #000 18%, var(--bleu)); }

/* --- La manchette ---------------------------------------------------------- */

.bb-manchette { position: relative; background: var(--bleu); overflow: hidden; }
/* Le symbole en filigrane, à droite, très pâle. */
.bb-manchette .filigrane {
  position: absolute; right: 44px; top: 50%; transform: translateY(-50%);
  width: 24%; max-width: 300px; opacity: .22;
  pointer-events: none;
}
.bb-manchette .dedans {
  position: relative; width: 78%; min-width: 0;
  padding: 56px 44px 60px; max-width: 680px;
}
.bb-manchette .rub {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bleu-100); margin: 0 0 14px;
}
.bb-manchette h1 { font-size: clamp(34px, 4.6vw, 56px); font-weight: 700; color: var(--papier); }
.bb-manchette .chapeau {
  font-style: italic; font-size: 19px; line-height: 1.5;
  color: var(--bleu-100); margin: 20px 0 30px; max-width: 560px;
}
.t-bleuetblanc .bb-manchette .lire {
  display: inline-flex; align-items: center;
  background: var(--surface); color: var(--bleu);
  font-weight: 600; font-size: 15px; padding: 11px 22px; border-radius: var(--r);
}
.t-bleuetblanc .bb-manchette .lire:hover { background: var(--papier); color: var(--bleu); text-decoration: none; }

/* --- Les trois colonnes ---------------------------------------------------- */

.bb-colonnes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 36px; padding: 44px 28px 52px;
  align-items: start;
}
.bb-tetiere {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--discret); margin: 0 0 16px;
}
.bb-tetiere--clair { color: var(--bleu-100); }

/* La salle de rédaction : un aplat bleu, une liste de signatures. */
.bb-redaction { background: var(--bleu); border-radius: var(--r); padding: 26px 24px 20px; }
.bb-redaction .sig {
  display: grid; grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px; align-items: center; padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
  color: var(--papier);
}
.bb-redaction .sig:first-of-type { border-top: 0; }
.bb-redaction .ini {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: var(--papier);
  display: grid; place-items: center;
  font-size: 14px; font-weight: 600; letter-spacing: .02em;
}
.bb-redaction .qui { font-size: 15px; font-weight: 600; line-height: 1.2; }
.bb-redaction .quoi { font-size: 12px; color: var(--bleu-100); }

/* Les dernières : heure à gauche, titre et chapeau à droite. */
.bb-dernieres .item {
  display: grid; grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px; align-items: start; padding: 16px 0;
  border-top: 1px solid var(--gris-300);
}
.bb-dernieres .item:first-of-type { border-top: 0; padding-top: 0; }
.bb-dernieres .quand {
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--discret); padding-top: 3px;
}
/* L'heure garde sa minuscule : « 6 h 15 », jamais « 6 H 15 ». */
.bb-dernieres .heure { display: block; text-transform: none; letter-spacing: .02em; }
.bb-dernieres h3 { font-size: 18px; margin: 0 0 6px; }
.bb-dernieres p { font-size: 14px; line-height: 1.55; color: var(--gris-700); margin: 0; }

/* En vogue : une colonne numérotée. */
.bb-vogue .item {
  display: grid; grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px; align-items: start; padding: 13px 0;
}
.bb-vogue .n { font-size: 14px; font-weight: 600; color: var(--vif); }
.bb-vogue h3 { font-size: 16px; font-weight: 600; line-height: 1.35; }

.bb-plus { display: inline-flex; margin-top: 20px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }

/* --- Le direct : le seul endroit où le magenta paraît ---------------------- */

.bb-direct {
  display: inline-block; font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--magenta); color: var(--papier);
  padding: 3px 9px; border-radius: var(--r);
}

/* --- La rubrique au-dessus d'un titre -------------------------------------- */

.bb-rub {
  display: inline-block; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--vif); margin: 0 0 8px;
}

/* --- L'article -------------------------------------------------------------- */

.bb-corps-page { background: var(--papier); padding: 44px 28px 56px; }
/* La colonne de lecture est centrée : à 68ch elle laisserait sinon la moitié
   droite de la page vide. */
.bb-article { max-width: 68ch; margin-inline: auto; }
.bb-article h1 { font-size: clamp(30px, 3.8vw, 44px); font-weight: 700; margin: 6px 0 0; }
.bb-article .chapeau {
  font-style: italic; font-size: 21px; line-height: 1.5;
  color: var(--gris-700); margin: 18px 0 26px; max-width: 60ch;
}
.bb-article .signature {
  display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline;
  padding: 0 0 26px; border-bottom: 1px solid var(--filet);
  font-size: 13px; color: var(--discret);
}
.bb-article .signature strong { color: var(--encre); font-weight: 600; }
.bb-article figure { margin: 28px 0 0; }
.bb-article figcaption { font-size: 13px; color: var(--discret); margin: 8px 0 0; line-height: 1.5; }
.bb-texte { font-size: 17px; line-height: 1.8; margin: 28px 0 0; max-width: 68ch; }
.bb-texte p { margin: 0 0 20px; }
.bb-texte h2 { font-size: 24px; margin: 32px 0 12px; }
.bb-texte a { color: var(--vif); text-decoration: underline; text-underline-offset: 2px; }
/* L'italique du serif porte les citations — jamais d'oblique simulée. */
.bb-texte blockquote {
  margin: 30px 0; padding: 0 0 0 22px;
  border-left: 3px solid var(--bleu);
  font-style: italic; font-size: 22px; line-height: 1.45;
}
.bb-texte blockquote p { margin: 0 0 8px; }
.bb-texte blockquote cite {
  display: block; font-style: normal; font-size: 13px;
  letter-spacing: .06em; color: var(--discret);
}
.bb-note { font-size: 14px; color: var(--discret); margin: 26px 0 0; max-width: 68ch; }
.bb-note a { color: var(--vif); text-decoration: underline; }

/* --- La une d'une rubrique -------------------------------------------------- */

.bb-rubtete { background: var(--bleu); padding: 40px 28px 34px; color: var(--papier); }
.bb-rubtete h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 700; }
.bb-rubtete p { font-size: 17px; line-height: 1.55; color: var(--bleu-100); margin: 14px 0 0; max-width: 62ch; }

/* auto-fill, pas auto-fit : une rubrique qui ne compte qu'un texte garde une
   colonne de largeur normale au lieu d'étirer sa photo sur toute la page. */
.bb-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 36px 32px; }
.bb-liste .item .shot { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--bleu); margin: 0 0 14px; }
.bb-liste .item .shot img { width: 100%; height: 100%; object-fit: cover; }
.bb-liste .item h3 { font-size: 21px; margin: 0 0 8px; }
.bb-liste .item p { font-size: 15px; line-height: 1.55; color: var(--gris-700); margin: 0; max-width: 56ch; }
.bb-liste .item .sig { font-size: 12px; letter-spacing: .04em; color: var(--discret); margin: 10px 0 0; }

/* --- L'infolettre ----------------------------------------------------------- */

.bb-infolettre { background: var(--bleu); border-radius: var(--r); padding: 26px 24px; margin: 36px 0 0; }
.bb-infolettre h3 { font-size: 21px; color: var(--papier); margin: 0 0 8px; }
.bb-infolettre p { font-size: 15px; line-height: 1.55; color: var(--bleu-100); margin: 0 0 16px; max-width: 54ch; }
.bb-infolettre form { display: flex; flex-wrap: wrap; gap: 10px; }
.bb-infolettre input {
  flex: 1; min-width: 200px; font-family: var(--serif); font-size: 15px;
  padding: 10px 12px; border: 0; border-radius: var(--r);
  background: var(--papier); color: var(--encre);
}
.t-bleuetblanc .bb-infolettre button {
  font-family: var(--serif); font-weight: 600; font-size: 15px;
  padding: 10px 20px; border: 0; border-radius: var(--r);
  background: var(--surface); color: var(--bleu); cursor: pointer;
}
.t-bleuetblanc .bb-infolettre button:hover { background: var(--papier); }
.bb-infolettre .fait { font-size: 15px; color: var(--papier); }

/* --- Le pied de page --------------------------------------------------------- */

.bb-pied { background: var(--papier); padding: 40px 28px 32px; }
.bb-pied .haut { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 48px; align-items: start; }
.bb-pied .sym { width: 54px; margin: 0 0 12px; }
.bb-pied .nom { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.bb-pied .devise { font-size: 13px; color: var(--discret); margin: 6px 0 0; }
.bb-pied .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px; }
.bb-pied h4 {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--discret); margin: 0 0 10px;
}
.bb-pied a { display: block; font-size: 14px; margin: 0 0 7px; color: var(--encre); }
.bb-pied a:hover { color: var(--vif); }
.bb-pied .legal {
  border-top: 1px solid var(--filet); margin: 32px 0 0; padding: 16px 0 0;
  font-size: 12px; color: var(--discret);
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
}

.bb-vide { padding: 52px 0; font-size: 17px; color: var(--gris-700); }
.bb-vide a { color: var(--vif); text-decoration: underline; }

.bb-pagination { display: flex; gap: 8px; margin: 42px 0 0; font-size: 15px; }
.bb-pagination a, .bb-pagination span { padding: 8px 14px; border-radius: var(--r); }
.bb-pagination span[aria-current] { background: var(--bleu); color: var(--papier); }

/* --- Adaptatif ---------------------------------------------------------------- */

@media (max-width: 900px) {
  .bb-manchette .dedans { width: 100%; padding: 40px 24px 44px; }
  .bb-manchette .filigrane { opacity: .12; right: -20px; }
  .bb-colonnes { padding: 32px 24px 40px; gap: 28px; }
  .bb-pied .haut { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 620px) {
  .bb-page { box-shadow: none; }
  .bb-bandeau { font-size: 11px; padding: 8px 16px; }
  .bb-bandeau > span:first-child { display: none; }
  .bb-tete { padding: 18px 16px 16px; }
  .bb-nom { font-size: 29px; }
  .bb-lock .sym { width: 36px; }
  .bb-chercher { display: none; }
  .bb-rubriques { padding: 0 4px; overflow-x: auto; flex-wrap: nowrap; }
  .bb-rubriques a { padding: 12px 13px; white-space: nowrap; }
  .bb-manchette .dedans { padding: 28px 16px 32px; }
  /* Une seule colonne : les nouvelles passent devant, la rédaction ferme.
     Sur trois colonnes l'ordre de lecture est horizontal et la question ne
     se pose pas. */
  .bb-colonnes { padding: 24px 16px 32px; grid-template-columns: 1fr; }
  .bb-colonnes .bb-dernieres { order: 1; }
  .bb-colonnes .bb-vogue     { order: 2; }
  .bb-colonnes .bb-redaction { order: 3; }
  .bb-corps-page { padding: 28px 16px 40px; }
  .bb-rubtete { padding: 28px 16px 24px; }
  .bb-dernieres .item { grid-template-columns: 1fr; gap: 4px; }
}