/* 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;
}