/* W3 presentation. Color values remain owned by theme.json / W1 resolver. */
.cic-home,
.cic-home-content,
.cic-home-section {
  margin-block: 0;
}

.cic-home-container,
.cic-home-header,
.cic-home-footer {
  inline-size: min(calc(100% - 2 * clamp(1.25rem, 4vw, 3rem)), 80rem);
  margin-inline: auto;
}

.cic-home-section {
  padding-block: var(--wp--custom--cic--home--section);
}

/*
 * Home sections always span the page. A saved Home page may carry a Stack, Row, Grid or constrained
 * layout on a block that holds sections (an edit in the block editor sets one); WordPress then sized
 * each section to its content or to a grid cell, and a short section such as the final CTA collapsed
 * into a narrow column at the left. The Theme owns this structure: such a block keeps normal flow,
 * and a section never takes the narrower content width of a constrained layout.
 */
.cic-home :is(.is-layout-flex, .is-layout-grid, .is-layout-constrained):has(> .cic-home-section) {
  display: block;
}

.cic-home .cic-home-section {
  max-inline-size: none;
}

.cic-home-elevated {
  background: var(--cic-color-elevated);
}

.cic-home :where(h1, h2, h3, p) {
  margin-block: 0;
}

.cic-home-container > * + *,
.cic-home-copy > * + * {
  margin-block-start: var(--wp--custom--cic--home--gap);
}

.cic-home h1 {
  font-size: var(--wp--custom--cic--home--display);
  line-height: 1.1;
  letter-spacing: -.02em;
  max-inline-size: 18ch;
}

.cic-home h2 {
  font-size: var(--wp--custom--cic--home--heading);
  line-height: 1.2;
  letter-spacing: -.01em;
}

.cic-home h3,
.cic-image-title {
  font-size: 1.25rem;
  line-height: 1.4;
}

.cic-lead {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--cic-color-text-secondary);
}

.cic-intro {
  font-size: 1.125rem;
  color: var(--cic-color-text-secondary);
  max-inline-size: 65ch;
}

.cic-eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .033em;
  color: var(--cic-color-action-primary);
}

.cic-small {
  font-size: .875rem;
  color: var(--cic-color-text-secondary);
}

.cic-home-split,
.cic-home-cards,
.cic-home-process {
  display: grid;
  gap: var(--wp--custom--cic--home--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  align-items: start;
}

.cic-home-split {
  gap: var(--wp--custom--cic--home--split-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
}

.cic-home :where(.wp-block-group, .wp-block-buttons, .wp-block-button) {
  min-inline-size: 0;
}

.cic-home-card {
  padding: 1rem;
  background: var(--cic-color-surface);
  border: 1px solid var(--cic-color-border);
  border-radius: var(--wp--custom--cic--home--radius);
}

.cic-home-card > * + * {
  margin-block-start: .75rem;
}

.cic-image-placeholder {
  inline-size: 100%;
  min-block-size: clamp(15rem, 35vw, 30rem);
  padding: 1.5rem;
  background: var(--cic-color-elevated);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.cic-home-card .cic-image-placeholder {
  min-block-size: 8rem;
  aspect-ratio: 2 / 1;
}

.cic-home-card .cic-image-placeholder .cic-image-title {
  font-size: .875rem;
}

.cic-home .wp-block-image img {
  inline-size: 100%;
  block-size: auto;
  object-fit: cover;
}

/* Native media content replaces the art-direction copy without changing layout. */
.cic-image-placeholder:has(.wp-block-image img) {
  padding: 0;
  gap: 0;
}

.cic-image-placeholder:has(.wp-block-image img) > p {
  display: none;
}

.cic-image-placeholder .wp-block-image {
  margin: 0;
}

.cic-image-placeholder .wp-block-image img {
  display: block;
  aspect-ratio: 4 / 3;
}

.cic-home-network .wp-block-image img,
.cic-home-catalog .wp-block-image img {
  object-fit: contain;
}

.cic-step,
.cic-metric {
  color: var(--cic-color-action-primary);
  font-size: 2rem;
  font-weight: 700;
}

.cic-metric {
  font-size: 4rem;
}

.cic-home .wp-block-button__link,
.cic-home-header .wp-block-button__link {
  background: var(--cic-color-action-primary);
  color: var(--cic-color-on-action);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 3rem;
  padding: .75rem 1rem;
  border-radius: var(--wp--custom--cic--home--radius);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  max-inline-size: 100%;
}

.cic-home .cic-secondary .wp-block-button__link {
  background: var(--cic-color-action-secondary);
  color: var(--cic-color-text-primary);
}

.cic-home :where(a:hover) {
  text-decoration: underline;
  text-underline-offset: .2em;
}

.cic-home-header,
.cic-home-footer {
  padding-block: 1.25rem;
}

.cic-header-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
}

.cic-brand {
  font-size: 1.5rem;
  font-weight: 600;
}

.cic-brand a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  text-decoration: none;
}

.cic-navigation {
  margin-block-start: 1rem;
}

.cic-navigation summary {
  min-block-size: 2.75rem;
  cursor: pointer;
  padding-block: .75rem;
}

.cic-navigation-wide > summary {
  display: none;
}

.cic-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
}

.cic-nav-links p {
  margin: 0;
}

.cic-nav-links a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding: .5rem .25rem;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}

.cic-nav-links a:hover,
.cic-nav-links a[aria-current="page"] {
  color: var(--cic-color-action-primary);
  text-decoration: underline;
}

.cic-home-header .cic-mode-status {
  font-size: .75rem;
}

.cic-media-frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 4;
  border-radius: var(--wp--custom--cic--home--radius);
  background: var(--cic-color-elevated);
}

.cic-media-label {
  color: var(--cic-color-text-muted);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cic-home-cards,
.cic-home .cic-content-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.cic-home .cic-content-grid:has(> :only-child) {
  grid-template-columns: minmax(0, 40rem);
}

/*
 * « Ce que nous faisons »: one column on a phone, two by two from a tablet, one row of four on a wide
 * screen. The Theme alone draws this grid, so an edit of its words cannot change it. Four columns
 * wait for 75rem: narrower, a quarter of the row turns each card into a tall, narrow column.
 */
.cic-what-we-do-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wp--custom--cic--home--gap);
  margin-inline: 0;
  margin-block-end: 0;
  padding: 0;
  list-style: none;
}

/* Scoped to the grid: the later card rule sets every card's padding. */
.cic-what-we-do-grid > .cic-what-we-do-card {
  min-inline-size: 0;
  padding: 1.5rem;
}

.cic-what-we-do-card p {
  color: var(--cic-color-text-secondary);
}

@media (min-width: 40rem) {
  .cic-what-we-do-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 75rem) {
  .cic-what-we-do-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.cic-home-services .cic-home-card {
  border: 0;
  border-block-start: 2px solid var(--cic-color-action-primary);
  border-radius: 0;
  background: none;
  padding-inline: 0;
}

.cic-home-services .cic-card-media {
  display: none;
}

.cic-home-projects .cic-content-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

@media (min-width: 64rem) {
  /* The editorial column stays narrow so the catalogue keeps a real grid instead of
     collapsing its cards into one tall column beside the copy. */
  .cic-home-catalog .cic-home-container {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) minmax(0, 2.2fr);
    gap: 1.5rem 3rem;
    align-items: start;
  }

  .cic-home-catalog .cic-content-grid {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-block-start: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cic-home-catalog .cic-action {
    justify-self: start;
    align-self: start;
  }
}

.cic-home-header .cic-color-mode {
  margin-inline-start: auto;
}

.wp-site-blocks > footer {
  background: var(--cic-color-surface);
}

.cic-home-footer .cic-nav-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .25rem 1rem;
}

.cic-home-footer address p {
  margin-block: .5rem;
  font-size: 1rem;
}

.cic-home-footer > .cic-small {
  margin-block-start: 2rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--cic-color-border);
}

.cic-navigation:not(.cic-navigation-wide) .cic-nav-links {
  flex-direction: column;
}

.cic-home-footer {
  padding-block: 3rem;
  border-block-start: 1px solid var(--cic-color-border);
}

/* --------------------------------------------------------------------------
 * Interaction layer. Motifs derive from the CIC mark: a square bracket drawn
 * in navy and burgundy. States are carried by that bracket rather than by
 * weight alone, so the current page stays legible in both modes.
 * ------------------------------------------------------------------------ */

:root {
  --cic-ease: cubic-bezier(.2, .6, .3, 1);
  --cic-speed: 180ms;
  --cic-rule: 2px;
}

/* Navigation: default, hover, focus and current share one bracket indicator. */
.cic-nav-links {
  column-gap: 1.5rem;
  row-gap: .25rem;
}

.cic-nav-links .cic-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding: .5rem .125rem;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--cic-color-text-secondary);
  transition: color var(--cic-speed) var(--cic-ease);
}

.cic-nav-links .cic-nav-link > span {
  position: relative;
  display: block;
  padding-block-end: .25rem;
}

/* The indicator is a scaling rule, so no layout shift occurs between states. */
.cic-nav-links .cic-nav-link > span::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: var(--cic-rule);
  background: var(--cic-color-action-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--cic-speed) var(--cic-ease);
}

.cic-nav-links .cic-nav-link:hover,
.cic-nav-links .cic-nav-link:focus-visible {
  color: var(--cic-color-text-primary);
}

.cic-nav-links .cic-nav-link:hover > span::after,
.cic-nav-links .cic-nav-link:focus-visible > span::after {
  transform: scaleX(1);
}

/* Current page: the burgundy half of the mark, held permanently. */
.cic-nav-links .cic-nav-link[aria-current="page"] {
  color: var(--cic-color-text-primary);
  font-weight: 600;
}

.cic-nav-links .cic-nav-link[aria-current="page"] > span::after {
  background: var(--cic-color-accent);
  transform: scaleX(1);
}

/* Cards: a bracket corner appears on hover or keyboard focus. */
.cic-home-card,
.cic-content-card {
  position: relative;
  transition:
    border-color var(--cic-speed) var(--cic-ease),
    transform var(--cic-speed) var(--cic-ease),
    box-shadow var(--cic-speed) var(--cic-ease);
}

.cic-home-card::before,
.cic-content-card::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: -1px;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-block-start: var(--cic-rule) solid var(--cic-color-accent);
  border-inline-start: var(--cic-rule) solid var(--cic-color-accent);
  border-start-start-radius: var(--wp--custom--cic--home--radius);
  opacity: 0;
  transition: opacity var(--cic-speed) var(--cic-ease);
  pointer-events: none;
}

.cic-home-card:hover,
.cic-content-card:hover,
.cic-home-card:focus-within,
.cic-content-card:focus-within {
  border-color: var(--cic-color-action-primary);
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 12px 24px -16px rgb(0 0 0 / 28%);
}

.cic-home-card:hover::before,
.cic-content-card:hover::before,
.cic-home-card:focus-within::before,
.cic-content-card:focus-within::before {
  opacity: 1;
}

.cic-home-card :where(h2, h3) a,
.cic-content-card :where(h2, h3) a {
  text-decoration: none;
  transition: color var(--cic-speed) var(--cic-ease);
}

.cic-home-card:hover :where(h2, h3) a,
.cic-content-card:hover :where(h2, h3) a {
  color: var(--cic-color-action-primary);
}

/* Media inside a card reveals slightly, clipped by the frame. */
.cic-home-card .cic-card-media,
.cic-content-card .cic-card-media {
  overflow: hidden;
  border-radius: calc(var(--wp--custom--cic--home--radius) - 2px);
}

.cic-home-card .cic-card-media img,
.cic-content-card .cic-card-media img {
  transition: transform 220ms var(--cic-ease);
}

.cic-home-card:hover .cic-card-media img,
.cic-content-card:hover .cic-card-media img {
  transform: scale(1.03);
}

/* Actions: hover, focus and a real pressed state. */
.cic-action,
.wp-element-button,
.wp-block-button__link {
  transition:
    background-color var(--cic-speed) var(--cic-ease),
    color var(--cic-speed) var(--cic-ease),
    border-color var(--cic-speed) var(--cic-ease),
    transform var(--cic-speed) var(--cic-ease);
}

.cic-action:hover,
.wp-element-button:hover,
.wp-block-button__link:hover {
  transform: translateY(-1px);
}

.cic-action:active,
.wp-element-button:active,
.wp-block-button__link:active {
  transform: translateY(0);
}

button[disabled],
input[disabled],
select[disabled],
textarea[disabled],
.wp-element-button[disabled] {
  cursor: not-allowed;
  opacity: .72;
}

@media (prefers-reduced-motion: reduce) {
  .cic-nav-links .cic-nav-link > span::after,
  .cic-home-card,
  .cic-content-card,
  .cic-home-card::before,
  .cic-content-card::before,
  .cic-home-card .cic-card-media img,
  .cic-content-card .cic-card-media img,
  .cic-action,
  .wp-element-button,
  .wp-block-button__link {
    transition: none;
  }

  .cic-home-card:hover,
  .cic-content-card:hover,
  .cic-action:hover,
  .wp-element-button:hover,
  .wp-block-button__link:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
 * Composition pass: header definition, hero balance, card and footer rhythm.
 * Values only; no layout authority moves out of the existing structure.
 * ------------------------------------------------------------------------ */

/* The header earns a hairline so the page begins deliberately. */
.wp-site-blocks > header,
.cic-home-header {
  border-block-end: 1px solid var(--cic-color-border);
}

.cic-home-header {
  padding-block: 1.5rem 0;
}

.cic-home-header .cic-navigation {
  margin-block-start: .75rem;
}

.cic-brand {
  letter-spacing: -.01em;
}

/* The mode control reads as part of the system rather than a raw form field. */
.cic-color-mode select {
  min-block-size: 2.75rem;
  padding: .5rem 2rem .5rem .75rem;
  border: 1px solid var(--cic-color-border);
  border-radius: var(--wp--custom--cic--home--radius);
  background-color: var(--cic-color-surface);
  color: var(--cic-color-text-primary);
  font-size: .875rem;
  transition:
    border-color var(--cic-speed) var(--cic-ease),
    background-color var(--cic-speed) var(--cic-ease);
}

.cic-color-mode select:hover {
  border-color: var(--cic-color-action-primary);
}

/* Hero: the eyebrow carries the mark's bracket, actions sit on one line. */
.cic-home-section#cic-hero .cic-eyebrow {
  position: relative;
  padding-inline-start: 1.25rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cic-home-section#cic-hero .cic-eyebrow::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: .1em .1em;
  inline-size: var(--cic-rule);
  background: var(--cic-color-accent);
}

.cic-home-section#cic-hero .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  align-items: center;
}

/* The primary action stays visually dominant over the secondary one. */
.cic-home-section#cic-hero .wp-block-button__link {
  min-block-size: 3.25rem;
  padding-inline: 1.5rem;
  font-size: .9375rem;
}

.cic-home-section#cic-hero .cic-secondary .wp-block-button__link {
  min-block-size: 3rem;
  padding-inline: 1.125rem;
  background: transparent;
  border: 1px solid var(--cic-color-border-strong);
}

.cic-home-section#cic-hero .cic-secondary .wp-block-button__link:hover {
  border-color: var(--cic-color-action-primary);
  color: var(--cic-color-action-primary);
}

/* Reserved media keeps a wide industrial frame instead of a tall grey block. */
.cic-home-section#cic-hero .cic-image-placeholder,
.cic-home-section#cic-hero .cic-media-frame {
  aspect-ratio: 16 / 10;
  min-block-size: 0;
  border: 1px solid var(--cic-color-border);
}

.cic-home-section#cic-hero .cic-image-placeholder .wp-block-image img {
  aspect-ratio: 16 / 10;
  object-position: center;
}

/* Cards: more generous interior, tighter type, clearer action. */
.cic-home-card,
.cic-content-card {
  padding: 1.25rem;
}

.cic-home-card .cic-eyebrow,
.cic-content-card .cic-eyebrow {
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cic-color-text-muted);
}

.cic-home-card :where(h2, h3),
.cic-content-card :where(h2, h3) {
  font-size: 1.125rem;
  line-height: 1.35;
  letter-spacing: -.005em;
}

.cic-home-card .cic-card-media,
.cic-content-card .cic-card-media {
  background: var(--cic-color-elevated);
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
}

.cic-home-card .cic-card-media img,
.cic-content-card .cic-card-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Section headings carry the same bracket rule as the hero eyebrow. */
.cic-home-section > .cic-home-container > h2 {
  position: relative;
  padding-block-start: 1rem;
}

.cic-home-section > .cic-home-container > h2::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 2.5rem;
  block-size: var(--cic-rule);
  background: var(--cic-color-action-primary);
}

/* Footer: institutional blocks rather than an administrative list. */
.cic-home-footer {
  padding-block: 3rem 2rem;
}

.cic-home-footer .cic-brand {
  font-size: 1.25rem;
}

.cic-home-footer .cic-footer-grid {
  gap: 2.5rem 3rem;
}

.cic-home-footer .cic-nav-links .cic-nav-link {
  min-block-size: 2.25rem;
  font-size: .9375rem;
}

.cic-home-footer address p {
  color: var(--cic-color-text-secondary);
}

.cic-home-footer > .cic-small {
  border-block-start: 1px solid var(--cic-color-border);
  color: var(--cic-color-text-muted);
}

/* The hero keeps two separate saved button groups; pairing them stays a presentation concern. */
.cic-home-section#cic-hero .cic-home-copy > .wp-block-buttons {
  display: inline-flex;
  margin-inline-end: .75rem;
}

.cic-home-section#cic-hero .cic-home-copy > .wp-block-buttons + .wp-block-buttons {
  margin-block-start: 0;
}

/* A reserved media slot should read as intentional, not as a grey slab. */
.cic-home-card .cic-card-media:not(:has(img)),
.cic-content-card .cic-card-media:not(:has(img)),
.cic-media-frame:not(:has(img)) {
  background: transparent;
  border: 1px dashed var(--cic-color-border);
}

.cic-home-card .cic-card-media:not(:has(img)) {
  aspect-ratio: 16 / 7;
}

/*
 * A reserved frame is decoration, so its description belongs to assistive technology
 * only: showing it reads as a development placeholder. The element stays in flow-free
 * absolute position, so no dimension, spacing or aspect ratio changes. The label is
 * emitted solely as the no-image fallback, so a real photograph is never affected.
 */
.cic-media-frame:not(:has(img)) .cic-media-label,
.cic-home-card .cic-card-media:not(:has(img)) .cic-media-label,
.cic-content-card .cic-card-media:not(:has(img)) .cic-media-label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * W9 — a reserved CIC frame rather than a missing asset.
 * Geometry only: two brackets in the CIC line language, a technical hatch and a
 * shallow inner depth. Scoped to :not(:has(img)) throughout, so an approved
 * photograph replaces the whole treatment instead of competing with it.
 * Business cards keep their lighter dashed reserve and are untouched here.
 * ------------------------------------------------------------------------- */
.cic-media-frame:not(:has(img)) {
  position: relative;
  border: 1px solid var(--cic-color-border);
  background-color: var(--cic-color-background);
  /* Elevated-on-background keeps the hatch at the threshold of visibility in both modes. */
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 21px,
    var(--cic-color-elevated) 21px 22px
  );
  box-shadow: inset 0 0 3rem rgb(0 0 0 / 5%);
  overflow: hidden;
}

/* Opening bracket: navy, the structural mark. */
.cic-media-frame:not(:has(img))::before,
.cic-media-frame:not(:has(img))::after {
  content: "";
  position: absolute;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  pointer-events: none;
}

.cic-media-frame:not(:has(img))::before {
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  border-block-start: var(--cic-rule) solid var(--cic-color-action-primary);
  border-inline-start: var(--cic-rule) solid var(--cic-color-action-primary);
}

/* Closing bracket: burgundy, the identity mark. */
.cic-media-frame:not(:has(img))::after {
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  border-block-end: var(--cic-rule) solid var(--cic-color-accent);
  border-inline-end: var(--cic-rule) solid var(--cic-color-accent);
}