/* ══════════════════════════════════════════════════════════════
   OBJECTIF QUÉBEC — Refonte page projet
   À charger APRÈS style.css et projet.css :
   <link rel="stylesheet" href="css/objectif-quebec.css">
   Utilise la grille du site (--grid-margin / --grid-gutter),
   les classes typo .t-titre / .t-courant / .t-parenthese.
   ══════════════════════════════════════════════════════════════ */

:root {
  --oq-navy: #1c2b5a;
}

/* ─── Wrapper de section : marge de grille ─── */
.oq2 {
  padding: 0 var(--grid-margin, 24px);
}

/* ─── HERO plein cadre ─── */
.oq2-hero {
  position: relative;
  height: 62vh;
  height: 62svh;
  min-height: 420px;
  overflow: hidden;
}
.oq2-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

/* ─── Titre projet ─── */
.oq2-titre {
  padding: 26px var(--grid-margin, 24px) 0;
}
.oq2-titre .pj-titre { display: block; white-space: nowrap; }
.oq2-titre-service { margin-top: 12px; display: block; }

/* ─── Bloc générique : label de section ─── */
.oq2-label {
  display: block;
  color: var(--oq-navy);
  margin-bottom: 22px;
}

/* ─── (01) LE PROJET ─── */
.oq2-projet {
  padding: 70px var(--grid-margin, 24px) 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.oq2-projet-lede { margin: 0; line-height: 0.98; }
.oq2-projet-lede.t-titre { transform: scaleX(0.8); transform-origin: left center; }
.oq2-projet-body p {
  margin: 0 0 34px;
  line-height: 1.6;
}
.oq2-meta {
  display: flex;
  flex-direction: column;
  border-top: 1.5px solid #000;
}
.oq2-meta-row {
  display: flex;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid #d8d8d8;
}
.oq2-meta-row .oq2-meta-k { flex: 0 0 90px; color: #9a9a9a; }

/* ─── VIDÉO + ENSEIGNE ( = oq-section1 ) ─── */
.oq2-ident {
  padding: 80px var(--grid-margin, 24px) 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.oq2-ident-video { width: 100%; display: block; }
.oq2-ident-side { display: flex; flex-direction: column; gap: 24px; }
.oq2-ident-box { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.oq2-ident-titre { margin: 0 0 100px; line-height: 0.98; }
.oq2-ident-body { margin: 0; line-height: 1.55; }

/* ─── SIGNATURE DE MARQUE (bloc bleu) ─── */
.oq2-signature {
  margin-top: 90px;
  background: var(--oq-navy);
  color: #fff;
  padding: 80px var(--grid-margin, 24px);
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.oq2-sig-label {
  display: block;
  color: rgba(255,255,255,.5);
  margin: 0 0 28px;
}
.oq2-sig-titre {
  margin: 0;
  color: #fff;
  line-height: 0.98;
}
.oq2-sig-body {
  margin: 26px 0 0;
  font-family: var(--font-mono);
  font-size: 10pt;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
  max-width: 34ch;
}
.oq2-sig-video { width: 100%; max-width: 360px; display: block; mix-blend-mode: screen; }

/* Mobile : paragraphe de la signature sur toute la largeur */
@media (max-width: 1023px) {
  .oq2-sig-body { max-width: none; }
  /* Vidéo réduite mais centrée (padding qui la garde au même endroit dans la zone) */
  .oq2-sig-media { padding: 0 20%; }
  /* Moins d'espace entre "Sérieux sans froideur" et son texte */
  .oq2-ident-titre { margin-bottom: 18px; }
  /* Titre de la section "Site web" en titre 2 (75% = 27.75pt) */
  .oq2-web .oq2-web-titre { font-size: 27.75pt; line-height: 1.09; }
  /* Accroche OQ en titre 2 (comme les autres pages) */
  .oq2-projet-lede { font-size: 27.75pt; line-height: 1.12; }
  /* Pas de saut forcé dans le titre "Site web" en mobile (coule naturellement) */
  .oq2-br-desktop { display: none; }
}

/* ─── (02) SITE WEB ─── */
.oq2-web {
  padding: 80px var(--grid-margin, 24px) 0;
}
.oq2-web-head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 36px;
}
.oq2-web-titre { margin: 0; line-height: 0.95; }
.oq2-web-body { margin: 0; line-height: 1.6; }
.oq2-web-img { width: 100%; display: block; }

/* ─── (03) CONTEXTE ─── */
.oq2-contexte {
  padding: 80px var(--grid-margin, 24px) 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.oq2-ctx-titre { margin: 0 0 20px; line-height: 0.95; }
.oq2-ctx-body { margin: 0; line-height: 1.6; max-width: 46ch; }
.oq2-ctx-img {
  width: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}

/* ─── CRÉDITS ─── */
.oq2-credits {
  padding: 80px var(--grid-margin, 24px) 56px;
}
.oq2-credits-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.oq2-credit {
  flex: 1 1 200px;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1.5px solid #000;
  padding-top: 13px;
}
.oq2-credit-k { color: #9a9a9a; }

/* ─── PROJET SUIVANT ─── */
.oq2-next {
  display: block;
  text-decoration: none;
  color: #fff;
  background: #000;
  padding: 48px var(--grid-margin, 24px);
}
.oq2-next-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.oq2-next-eyebrow {
  display: block;
  color: rgba(255,255,255,.5);
  margin-bottom: 14px;
}
.oq2-next-titre { margin: 0; color: #fff; line-height: 0.9; }
.oq2-next-arrow { color: #fff; white-space: nowrap; }
.oq2-next + .footer { margin-top: 0; }

/* ══════════════════════════════════════════════════════════════
   DESKTOP ≥ 1024px — grille 12 colonnes
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  .oq2-hero { height: 75vh; }

  /* (01) Le projet : lede 7 col / méta 5 col */
  .oq2-projet {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gutter, 24px);
    padding-top: 150px;
    align-items: start;
  }
  .oq2-projet-lede-wrap { grid-column: 1 / 8; }
  .oq2-projet-body      { grid-column: 8 / 13; }

  /* Vidéo + enseigne : 9 col / 3 col, aligné en haut */
  .oq2-ident {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gutter, 24px);
    padding-top: 180px;
    align-items: start;
  }
  .oq2-ident-video { grid-column: 1 / 9; }
  .oq2-ident-side  {
    grid-column: 9 / 13;
    gap: 100px;
  }

  /* Signature : texte gauche / vidéo droite */
  .oq2-signature {
    margin-top: 190px;
    padding-top: 150px;
    padding-bottom: 150px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gutter, 24px);
    align-items: start;
  }
  .oq2-sig-text  { grid-column: 3 / 9; grid-row: 1; }
  .oq2-sig-media { grid-column: 5 / 11; grid-row: 1; justify-self: end; align-self: start; }

  /* (02) Site web : titre 7 col / texte 5 col */
  .oq2-web { padding-top: 180px; }
  .oq2-web-head {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gutter, 24px);
    align-items: start;
    margin-bottom: 56px;
  }
  .oq2-web-head-titre { grid-column: 1 / 8; }
  .oq2-web-head-body  { grid-column: 8 / 13; }

  /* (03) Contexte : texte 5 col / image 7 col */
  .oq2-contexte {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gutter, 24px);
    padding-top: 180px;
    align-items: stretch;
  }
  .oq2-ctx-text {
    grid-column: 1 / 6;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .oq2-ctx-media { grid-column: 6 / 13; }
  .oq2-ctx-img { height: 100%; min-height: 360px; }

  .oq2-credits  { padding-top: 180px; }
  .oq2-next     { padding-top: 96px; padding-bottom: 96px; }
}