/* Habillage du Québec — 5 octobre 2026. Décor seulement; aucun texte ajouté. */
.refonte-site {
  --quebec: #003da5;
  --navy: #102e60;
  --navy2: #09214b;
  --ink: #203654;
  --muted: #526783;
  --line: #d5e1f1;
  --pale: #f0f5fc;
  --blue: #003da5;
  --blue2: #245db6;
  --red: #003da5;
  --shadow: 0 12px 32px #003da510;
  background: #fff;
  color: var(--ink);
}
.refonte-site ::selection { background: #c7dcff; color: #09214b; }
.refonte-site :focus-visible { outline: 3px solid #003da5; outline-offset: 5px; }
.refonte-site .btn, .refonte-site .btn.red, .refonte-site .family-film-listen {
  background: var(--quebec); border-color: var(--quebec); color: #fff;
}
.refonte-site .btn:hover, .refonte-site .family-film-listen:hover { background: #082b71; border-color: #082b71; }
.refonte-site .text-link { color: var(--quebec); }

/* Le fleurdelisé accompagne la signature familiale sur toutes les pages. */
.renew-header { background: var(--quebec); border-bottom: 5px solid #e5edfa; color: #fff; }
.renew-header .header-inner { gap: 24px; }
.renew-header .renew-brand {
  display: grid; grid-template-columns: 54px auto; column-gap: 15px;
  align-items: center; color: #fff; min-width: 0;
}
.renew-header .renew-brand::before {
  content: ""; grid-column: 1; grid-row: 1 / 3; width: 54px; height: 36px;
  background: url('../img/drapeau-quebec.svg') center / contain no-repeat;
  box-shadow: 0 0 0 1px #ffffff55;
}
.renew-header .renew-brand span, .renew-header .renew-brand small { grid-column: 2; }
.renew-header .renew-brand b { color: #fff; }
.renew-header .renew-brand small { color: #e0ebff; }
.renew-header .nav-desktop a, .renew-header .nav-mobile a, .renew-header .menu-btn { color: #fff; }
.renew-header .nav-desktop a:hover, .renew-header .nav-mobile a:hover { color: #fff; text-decoration: underline; text-underline-offset: 6px; }
.renew-header .nav-mobile.open { background: #082f7a; border-top: 1px solid #ffffff40; }
.renew-header .menu-btn { border: 1px solid #ffffff77; border-radius: 3px; flex-shrink: 0; }
.renew-header .menu-btn:hover { background: #ffffff18; }
.renew-header :focus-visible, .renew-footer :focus-visible, .renew-principle :focus-visible,
.renew-join :focus-visible, .capacity-demands :focus-visible, .world-appeal :focus-visible {
  outline-color: #fff;
}

/* Des bleus francs, du blanc et des motifs qui laissent respirer les photos. */
.renew-hero { padding-top: 58px; padding-bottom: 60px; }
.renew-hero-copy .eyebrow { display: flex; align-items: center; gap: 12px; color: var(--quebec); }
.renew-hero-copy .eyebrow::before {
  content: ""; display: block; width: 23px; height: 30px; flex-shrink: 0;
  background: url('../img/fleur-de-lys-bleue.svg') center / contain no-repeat;
}
.renew-hero-copy h1 em { color: var(--quebec); }
.renew-hero-photo { background: #f0f5fc; border: 1px solid var(--line); border-bottom: 4px solid var(--quebec); border-radius: 4px; }
.renew-hero-photo figcaption { background: #f0f5fc; }
.renew-hero-photo figcaption span { color: var(--quebec); }
.renew-hero-photo figcaption small { color: var(--muted); }
.renew-principle { background: var(--quebec); color: #fff; }
.principle-grid .eyebrow { color: #e0ebff; }
.principle-grid > .eyebrow::after {
  content: ""; display: block; width: 82px; height: 108px; margin-top: 28px;
  background: url('../img/fleur-de-lys-blanche.svg') center / contain no-repeat;
  opacity: .85;
}
.principle-grid p:not(.eyebrow) { color: #f2f6ff; }
.promise-card { border-left: 3px solid var(--quebec); }
.promise-number b, .renew-counter strong, .letter-signature { color: var(--quebec); }
.renew-film-wrap, .renew-facts { background: #f0f5fc; }
.renew-time { background: #fff; }
.renew-counter { padding: 22px; border: 1px solid var(--line); border-top: 4px solid var(--quebec); background: #f7faff; }
.facts-grid, .facts-grid article + article { border-color: var(--line); }
.fact-index, .eyebrow, .refonte-site .family-film-kicker { color: var(--quebec); }
.renew-join { background: var(--quebec); position: relative; isolation: isolate; overflow: hidden; }
.renew-join::before {
  content: ""; position: absolute; width: 235px; height: 310px; right: 5%; top: 35px;
  background: url('../img/fleur-de-lys-blanche.svg') center / contain no-repeat;
  opacity: .07; pointer-events: none; z-index: -1;
}
.renew-join h2, .renew-join .eyebrow, .renew-join .text-link { color: #fff; }
.renew-join p:not(.eyebrow) { color: #edf4ff; }
.refonte-site .renew-join .btn, .refonte-site .capacity-demands .btn, .refonte-site .world-appeal .btn {
  background: #fff; border-color: #fff; color: var(--quebec);
}
.refonte-site .renew-join .btn:hover, .refonte-site .capacity-demands .btn:hover, .refonte-site .world-appeal .btn:hover { background: #e4efff; border-color: #e4efff; }
.renew-footer { background: #092555; color: #fff; border-top: 5px solid #fff; }
.renew-footer .renew-brand { display: block; position: relative; padding-left: 58px; color: #fff; }
.renew-footer .renew-brand::before {
  content: ""; width: 42px; height: 28px; position: absolute; left: 0; top: 0;
  background: url('../img/drapeau-quebec.svg') center / contain no-repeat;
  box-shadow: 0 0 0 1px #ffffff55;
}
.renew-footer .renew-brand b, .renew-footer a { color: #fff; }
.footer-grid p, .footer-bottom { color: #dae7ff; }
.footer-bottom { border-color: #ffffff33; }

/* Lettre, histoire et formulaires : même identité, même contenu. */
.refonte-site .breadcrumbs { border-bottom: 1px solid var(--line); padding-bottom: 15px; }
.refonte-site .breadcrumbs a { color: var(--quebec); }
.refonte-site .prose h1::after { content: ""; display: block; width: 56px; height: 4px; background: var(--quebec); margin-top: 23px; }
.promise-detail { background: #f0f5fc; border-left: 3px solid var(--quebec); }
.followup-list article > span { color: var(--quebec); }
.refonte-site .note, .refonte-site .alert, .refonte-site .question-box { background: #f0f5fc; border-color: #cfdef3; color: var(--ink); }
.refonte-site .question-box h2 { color: var(--navy); }
.refonte-site .form { background: #f5f8fe; }
.refonte-site .form input, .refonte-site .form textarea { border-color: #b8cbe6; accent-color: var(--quebec); }
.refonte-site .timeline .event { border-color: var(--line); }
.refonte-site .timeline .date { color: var(--quebec); }
.refonte-site .testimonial { border-color: var(--line); border-left: 3px solid var(--quebec); }

/* Dossiers et graphiques : conserver les repères et toutes les valeurs. */
.refonte-site .capacity-page { --capacity-red: #003da5; --capacity-paper: #f0f5fc; }
.refonte-site .world-page { --world-red: #003da5; --world-blue: #102e60; --world-line: #d5e1f1; }
.refonte-site .capacity-hero, .refonte-site .world-hero { background: #f0f5fc; }
.refonte-site .capacity-hero h1 span, .refonte-site .world-hero h1 span,
.refonte-site .capacity-kicker, .refonte-site .world-kicker, .refonte-site .capacity-house figcaption > span,
.refonte-site .capacity-timeline-wait strong, .refonte-site .capacity-bar-last b { color: var(--quebec); }
.refonte-site .capacity-argument { background: #edf4ff; border-left-color: var(--quebec); }
.refonte-site .capacity-timeline .capacity-timeline-wait { background: #e3eeff; }
.refonte-site .capacity-bar-last i { background: var(--quebec); }
.refonte-site .capacity-teaser { border-left-color: var(--quebec); }
.refonte-site .capacity-quota, .refonte-site .capacity-demands, .refonte-site .world-appeal { background: var(--quebec); }
.refonte-site .capacity-demands .capacity-kicker, .refonte-site .world-appeal .world-kicker { color: #e0ebff; }
.refonte-site .capacity-house svg [fill="#ce1839"] { fill: var(--quebec); }
.capacity-stacked > span:nth-child(1), .capacity-legend li:nth-child(1) i { background: #102e60 !important; }
.capacity-stacked > span:nth-child(2), .capacity-legend li:nth-child(2) i { background: #003da5 !important; }
.capacity-stacked > span:nth-child(3), .capacity-legend li:nth-child(3) i { background: #477bcb !important; }
.capacity-stacked > span:nth-child(4), .capacity-legend li:nth-child(4) i { background: #87ace7 !important; }
.capacity-stacked > span:nth-child(5), .capacity-legend li:nth-child(5) i { background: #b6c6dc !important; }
.refonte-site .world-bar-canada { background: #86a8d5; }
.refonte-site .world-bar-quebec { background: var(--quebec); }
.refonte-site .world-table tr.world-row-quebec { background: #e6efff; border-color: var(--quebec) !important; }
.refonte-site .world-row-quebec .world-badge { background: #fff; border-color: #9cb9e8; color: var(--quebec); }
.refonte-site .world-row-legal .world-badge { background: #f4f7fc; border-color: #c4d2e5; color: #334b70; }
.refonte-site .world-row-observe .world-badge { background: #e4eeff; border-color: #9db8e5; color: #173e7e; }
.refonte-site .world-row-file .world-badge { background: #fff; border-color: #91a6c5; color: #263e63; }
.refonte-site .world-sources li:target { background: #e4efff; outline-color: #e4efff; }

@media (max-width: 1100px) {
  .renew-header .header-inner { gap: 18px; }
}
@media (max-width: 760px) {
  .renew-header .header-inner { height: 88px; gap: 14px; }
  .renew-header .renew-brand { grid-template-columns: 42px auto; column-gap: 12px; }
  .renew-header .renew-brand::before { width: 42px; height: 28px; }
  .renew-header .renew-brand span { font-size: 18px; }
  .renew-header .renew-brand small { font-size: 7px; letter-spacing: .09em; }
  .renew-hero { padding-top: 30px; padding-bottom: 38px; }
  .renew-hero-copy .eyebrow { gap: 10px; font-size: 9px; }
  .renew-hero-copy .eyebrow::before { width: 18px; height: 25px; }
  .principle-grid > .eyebrow::after { display: none; }
  .renew-counter { padding: 20px; }
  .renew-join::before { right: -55px; }
  .renew-footer .renew-brand span { font-size: 19px; }
}
@media (max-width: 360px) {
  .renew-header .header-inner { gap: 10px; }
  .renew-header .renew-brand { grid-template-columns: 32px auto; column-gap: 9px; }
  .renew-header .renew-brand::before { width: 32px; height: 22px; }
  .renew-header .renew-brand span { font-size: 16px; }
  .renew-header .renew-brand small { font-size: 6px; letter-spacing: .06em; }
  .renew-header .menu-btn { min-width: 40px; }
  .renew-footer .renew-brand { padding-left: 49px; }
  .renew-footer .renew-brand::before { width: 36px; height: 24px; }
  .renew-footer .renew-brand span { font-size: 17px; }
}
@media print {
  .renew-header, .renew-footer { display: none; }
  .renew-join, .renew-principle { background: #fff; color: #102e60; }
  .renew-join h2, .renew-join p, .renew-join .eyebrow, .renew-join .text-link,
  .principle-grid h2, .principle-grid p:not(.eyebrow), .principle-grid .eyebrow { color: #102e60; }
  .renew-join::before, .principle-grid > .eyebrow::after { display: none; }
}