/* CCI France Canada — post-migration CSS overrides.
 *
 * Loaded AFTER the Webflow-exported stylesheet to fix issues the static
 * export couldn't carry through cleanly. Edit here, not in the
 * cci-france-canada.webflow.css file (which is generated and
 * shouldn't be touched).
 */

/* ─── 1. Service cards (services.html) ──────────────────────────────────────
 * Webflow's base rule for .cci-svc-card__icon keeps the icon inside the
 * card's padding on desktop; only the mobile media queries apply the
 * negative-margin trick to push it edge-to-edge. Apply that everywhere.
 */
.cci-svc-card__icon {
  width: calc(100% + 3rem);
  height: 11rem;
  margin: -2rem -1.5rem 1.5rem;
  border-radius: .75rem .75rem 0 0;
}

/* ─── 2. Dossier listing cards (dossier.html) ───────────────────────────────
 * The static export's CMS template had unstyled <img> + <h3> + <p>
 * placeholders. Give each card a bordered shell with an edge-to-edge
 * hero image and properly padded text.
 */
.e-collection-list--dossier .w-dyn-item {
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: .5rem;
  background-color: var(--color-white, #fff);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.e-collection-list--dossier .w-dyn-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}
.e-collection-list--dossier .w-dyn-item > a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.e-collection-list--dossier .w-dyn-item img {
  width: 100%;
  height: 12rem;
  object-fit: cover;
  display: block;
}
.e-collection-list--dossier .w-dyn-item h3 {
  padding: 1rem 1.25rem .5rem;
  margin: 0;
  font-size: 1.125rem;
  color: var(--color-brand-navy, #1a2940);
}
.e-collection-list--dossier .w-dyn-item p {
  padding: 0 1.25rem 1rem;
  margin: 0;
  color: var(--color-text-soft, #5a6478);
  font-size: .875rem;
  line-height: 1.5;
}
.e-collection-list--dossier .w-dyn-item .text-block-2 {
  padding: 0 1.25rem 1.25rem;
  color: var(--color-brand-red, #d01217);
  font-weight: 700;
  font-size: .875rem;
}

/* ─── 3. Body-text contrast (WCAG AA) ───────────────────────────────────────
 * The exported --color-text-muted (#999) is ~2.85:1 on white and fails AA for
 * body copy (.cci-section-sub, .cci-service-card__body, .cci-step__body, and
 * the various *-desc classes). Darken the token to ~5.7:1 while keeping a
 * clearly "muted" feel. All usages sit on light/white backgrounds, so raising
 * contrast is uniformly safe (dark sections use white-alpha, not this token).
 */
:root {
  --color-text-muted: #5a6478;
}

/* ─── 4. Stray font on the Ressources hero ──────────────────────────────────
 * .e-h1_hero.ressources requested "Nunito Variable", which is never declared
 * or loaded — it silently fell back to a non-brand face. Pin it to the brand
 * heading font for consistency with every other hero heading.
 */
.e-h1_hero.ressources {
  font-family: var(--font-heading);
}

/* ─── 5. Ressources cards: edge-to-edge images ──────────────────────────────
 * .cci-map-card__image shipped with object-fit:contain, which letterboxes the
 * photo inside the 16:9 wrap (white gaps, not flush). Cover fills the frame.
 */
.cci-map-card__image {
  object-fit: cover;
}

/* ─── 6. Homepage "Formation & coaching" service card image ──────────────────
 * The exported .cci-svc-img--formation rule had an empty background-image
 * (url('../images/')), so that one card rendered blank. Point it at a real
 * local photo, matching the other five service cards.
 */
.cci-service-card__img.cci-svc-img--formation {
  background-image: url('../images/linkedin-sales-solutions-qgyvorvddd8-unsplash-661d4f133ec16.webp');
}

/* ─── 7. Wire up the Inter / Roboto webfonts ────────────────────────────────
 * The Webflow export's @font-face rules shipped with empty src
 * (url('../images/')), so Inter (headings) and Roboto (body) never loaded and
 * the site fell back to Tahoma/system sans. Re-declare the four faces here,
 * pointing at the real variable-font files committed under /fonts. A later
 * @font-face for the same family/weight/style wins, so the broken originals
 * are never fetched. (--font-display "DM Serif Display" has no local file and
 * still falls back to Georgia; add it via @font-face if a file is provided.)
 */
@font-face {
  font-family: "Inter Variablefont Opsz Wght";
  src: url('../fonts/Inter-VariableFont_opszwght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Variablefont Opsz Wght";
  src: url('../fonts/Inter-Italic-VariableFont_opszwght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Variablefont Wdth Wght";
  src: url('../fonts/Roboto-VariableFont_wdthwght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Variablefont Wdth Wght";
  src: url('../fonts/Roboto-Italic-VariableFont_wdthwght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ─── 8. Dossier detail hero ─────────────────────────────────────────────────
 * The Webflow export sized .c-section_hero--dossier at 120vh with the cover
 * photo absolutely pinned to the bottom (object-fit:fill → distorted), leaving
 * a giant empty gap, and left .e_h1_dossier completely unstyled. Rebuild it as
 * a normal full-bleed hero matching the site's other heroes: cover image +
 * navy overlay + white heading.
 */
.c-section_hero--dossier {
  height: clamp(420px, 52vh, 600px);
  overflow: hidden;
}
.c-section_hero--dossier .image-2 {
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-section_hero--dossier::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(135deg, #001f40cc, #001f40e6);
}
.c-section_hero--dossier .div-block-9 {
  z-index: 2;
  inset: auto auto 3rem 0;
  margin: 0 clamp(1.25rem, 5vw, 4.5rem);
}
.c-section_hero--dossier .e-text_title {
  color: #fff;
  text-decoration: none;
  letter-spacing: .15em;
  font-size: .8125rem;
}
.c-section_hero--dossier .e_h1_dossier {
  font-family: var(--font-heading);
  color: var(--color-white);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: .5rem 0;
  text-wrap: balance;
}
.c-section_hero--dossier .div-block-10 {
  color: #ffffffcc;
  font-size: .9375rem;
}

/* ─── 9. Dossier listing hero (dossier.html) ────────────────────────────────
 * .c-section_hero--overlay sets white text but shipped with NO background, so
 * the export hacked black boxes (.is-black) behind the text to keep it legible
 * — which reads as messy. Give the hero a branded navy backdrop instead and
 * drop the black boxes; sane height.
 */
#hero-overlay.c-section_hero--overlay {
  background-image: linear-gradient(135deg, var(--color-brand-navy-deep), var(--color-brand-navy));
  height: auto;
  min-height: 56vh;
  max-height: none;
}
#hero-overlay .is-black {
  background-color: transparent;
  color: var(--color-white);
}

/* ─── 10. Dossier detail hero: stay branded without a cover photo ────────────
 * New dossier pages can ship with no hero image (empty
 * <img class="image-2 w-dyn-bind-empty">). Fall back to solid brand navy so the
 * hero still reads as branded, and hide the empty/broken <img> element.
 */
.c-section_hero--dossier {
  background-color: var(--color-brand-navy-deep);
}
.c-section_hero--dossier .image-2[src=""],
.c-section_hero--dossier .image-2.w-dyn-bind-empty {
  display: none;
}

/* ─── 11. Button consistency ─────────────────────────────────────────────────
 * Every section shipped its own *-btn-primary / *-btn-outline with diverging
 * padding (.8125/1.75 vs .875/2), font-size (.875 vs .8125), outline borders
 * (1.5px vs 2px), and — a real bug — .cci-btn--primary used the *hover* red as
 * its base while every other primary used --color-brand-red. The .cci-btn
 * family also had no hover state. They already share font/uppercase/tracking/
 * radius/weight, so normalize the rest into one consistent system.
 * (.cci-btn-outline-navy is left as-is: a deliberate small navy button for the
 * light-background org/dossier cards.)
 */

/* Shared size + motion (the .cci-btn modifiers inherit size from .cci-btn) */
.cci-btn,
.cci-ch-hero__btn-primary, .cci-ch-hero__btn-outline,
.cci-svc-hero__btn-primary, .cci-svc-hero__btn-outline,
.cci-join-hero__btn-primary, .cci-join-hero__btn-outline,
.cci-sub-cta__btn-primary, .cci-sub-cta__btn-outline,
.cci-svc-cta__btn-primary, .cci-svc-cta__btn-outline,
.cci-join-cta__btn-primary, .cci-about-cta__btn-primary,
.cci-sub-hero__btn {
  padding: .875rem 2rem;
  font-size: .8125rem;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

/* Primary — one brand red, consistent hover */
.cci-btn--primary,
.cci-ch-hero__btn-primary, .cci-svc-hero__btn-primary, .cci-join-hero__btn-primary,
.cci-sub-cta__btn-primary, .cci-svc-cta__btn-primary, .cci-join-cta__btn-primary,
.cci-about-cta__btn-primary, .cci-sub-hero__btn {
  background-color: var(--color-brand-red);
  color: var(--color-white);
}
.cci-btn--primary:hover,
.cci-ch-hero__btn-primary:hover, .cci-svc-hero__btn-primary:hover, .cci-join-hero__btn-primary:hover,
.cci-sub-cta__btn-primary:hover, .cci-svc-cta__btn-primary:hover, .cci-join-cta__btn-primary:hover,
.cci-about-cta__btn-primary:hover, .cci-sub-hero__btn:hover {
  background-color: var(--color-brand-red-hover);
}

/* Outline (on dark) — one border, consistent hover fill */
.cci-btn--outline, .cci-btn--ghost,
.cci-ch-hero__btn-outline, .cci-svc-hero__btn-outline, .cci-join-hero__btn-outline,
.cci-sub-cta__btn-outline, .cci-svc-cta__btn-outline {
  background-color: transparent;
  color: var(--color-white);
  border: 1.5px solid #ffffff80;
}
.cci-btn--outline:hover, .cci-btn--ghost:hover,
.cci-ch-hero__btn-outline:hover, .cci-svc-hero__btn-outline:hover, .cci-join-hero__btn-outline:hover,
.cci-sub-cta__btn-outline:hover, .cci-svc-cta__btn-outline:hover {
  background-color: #ffffff1a;
  border-color: #ffffffb3;
}

/* ─── 12. Dossier listing buttons (.e-button) ───────────────────────────────
 * The dossier listing hero used Webflow's .e-button — a red PILL (border-radius
 * 30px), weight 500, not uppercase — totally off from the rest of the site's
 * buttons. (.button_level2, the secondary, inherits this radius.) Bring it into
 * the same system: 6px radius, uppercase tracked heading, weight 700, matching
 * size + hover. button_level2 keeps its red-outline colour treatment.
 */
.e-button {
  border-radius: .375rem;
  padding: .875rem 2rem;
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.2;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.e-button:hover {
  background-color: var(--color-brand-red-hover);
}
.button_level2:hover {
  background-color: var(--color-brand-red);
  color: var(--color-white);
}

/* ─── 13. Filter chips (lp/carte.html) ──────────────────────────────────────
 * The filter row mixed .filter-button (<a>, lopsided border-radius
 * 9999px 5px 5px, weight 400, not uppercase) with .cci-filter-btn (pill,
 * weight 600, uppercase) on the same control — inconsistent and one weird
 * radius. Unify into a single clean pill with consistent typography. The
 * per-category inline colours are intentional (they mirror the org-card tags,
 * driven by structures.csv) and are left in place.
 */
.filter-button,
.cci-filter-btn {
  border-radius: 9999px;
  padding: .5rem 1rem;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.2;
}

/* ─── 14. Dossier detail stat cards ─────────────────────────────────────────
 * .e-block_card--dossier shipped at border-radius 10px; the rest of the site's
 * cards use .5rem (8px). Normalize for radius consistency.
 */
.e-block_card--dossier {
  border-radius: .5rem;
}

/* ─── 15. Dossier listing cards without a hero photo ─────────────────────────
 * The new province dossiers ship without imagery (empty Background hero), so
 * their listing card <img> has src="". Give it the brand-navy gradient so the
 * card keeps a consistent, branded top band instead of a blank/broken box.
 * (Add real photos to content/dossiers/*.md to replace the placeholder.)
 */
.e-collection-list--dossier .w-dyn-item img[src=""] {
  background-image: linear-gradient(135deg, var(--color-brand-navy-deep), var(--color-brand-navy));
  color: transparent;
  font-size: 0;
}

/* ─── 16. Rejoindre "Chambres d'intérêt" radio cards ─────────────────────────
 * Webflow's default .w-radio-input has margin-left:-20px + float:left, which
 * exactly cancels the card's 1.25rem (20px) left padding — so the radio sat
 * flush against the card border. Make it a normal flex item inset by the
 * padding.
 */
.cci-join-chamber-card .w-radio-input {
  float: none;
  margin: 0;
}

/* ─── 17. Chambres hero background → WebP ────────────────────────────────────
 * .cci-ch-hero used a 379 KB JPG behind a heavy navy gradient overlay. Swap to
 * a downscaled WebP (~240 KB); the overlay hides any quality difference.
 */
.cci-ch-hero {
  background-image: linear-gradient(135deg, #004379eb, #001f40bd), url('../images/aditya-chinchure-z0jsRtvo2iQ-unsplash-2.webp');
}

/* ─── 18. Long-heading safety on narrow screens ─────────────────────────────
 * The French province names are long (Colombie-Britannique,
 * Terre-Neuve-et-Labrador, Île-du-Prince-Édouard). On very narrow viewports a
 * long unbroken run could overflow its container; allow breaking so headings
 * always stay inside their box. Belt-and-suspenders alongside text-wrap:balance.
 */
.c-section_hero--dossier .e_h1_dossier,
#hero-overlay .is-black,
.cci-map-card__title,
.e-collection-list--dossier .w-dyn-item h3 {
  overflow-wrap: break-word;
}