/* ==============================================================
   ITpulse — Styles spécifiques aux pages mission
   --------------------------------------------------------------
   Toutes les classes sont préfixées en .it-* pour respecter
   la convention du site et éviter tout conflit avec
   GeneratePress ou WordPress.
   --------------------------------------------------------------
   Variables (--it-ink, --it-terracotta, --it-cream, etc.)
   sont supposées définies globalement dans le CSS additionnel
   du Customizer (backup.css). Sinon, fallbacks ci-dessous.
   ============================================================== */

:root {
  --it-ink: #151a28;
  --it-ink-soft: #3a4154;
  --it-terracotta: #b5573a;
  --it-cream: #f4f0e7;
  --it-soft-cream: #ebe5d8;
  --it-tinted: #efe9da;
  --it-muted: #8a8577;
}

/* ============ FULL-WIDTH OVERRIDE GENERATEPRESS ============
   Sur la page mission (single) ET sur l'archive des missions, on
   neutralise les wrappers de GeneratePress (max-width contenu,
   padding article, flex .site-content, etc.) pour que les sections
   du template puissent s'étendre proprement.

   - Single : la classe body.it-mission-template est posée par functions.php.
   - Archive : la classe body.post-type-archive-mission est posée
     automatiquement par WordPress (is_post_type_archive('mission')).

   Les deux scopes partagent exactement les mêmes neutralisations.
*/
body.it-mission-template .site-content .grid-container,
body.post-type-archive-mission .site-content .grid-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.it-mission-template .site-main,
body.it-mission-template .inside-article,
body.post-type-archive-mission .site-main,
body.post-type-archive-mission .inside-article {
  padding: 0 !important;
  margin: 0 !important;
}
body.it-mission-template .entry-content,
body.post-type-archive-mission .entry-content {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body.it-mission-template article.post,
body.it-mission-template article.type-mission,
body.post-type-archive-mission article.post,
body.post-type-archive-mission article.type-mission {
  border: none !important;
  background: transparent !important;
}
body.it-mission-template .entry-header,
body.post-type-archive-mission .entry-header { display: none; }

/* Neutralise le flex hérité de GeneratePress sur .site-content et borne
   la largeur de contenu (rapatrié du CSS additionnel du Customizer). */
body.it-mission-template .site-content,
body.post-type-archive-mission .site-content {
  display: block !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
}
body.it-mission-template .site.grid-container,
body.post-type-archive-mission .site.grid-container {
  max-width: 100% !important;
  padding: 0 !important;
}

/* Composition de pied de page mission : pleine largeur. Le .site-content est
   borné à 1280px et centré ; ce wrapper déborde pour atteindre les bords du
   viewport (full-bleed), pendant que le reste de la page reste dans la colonne. */
body.it-mission-template .it-mission-footer,
body.post-type-archive-mission .it-mission-footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ============ ARCHIVE MISSIONS — EN-TÊTE DE PAGE ============
   En-tête éditorial de l'archive /missions/ (kicker, titre, intro).
   Les cartes elles-mêmes réutilisent .it-cards-* (définies dans
   backup.css), rien à redéclarer ici.
   Source de vérité de cet en-tête : ici, pas dans le Customizer. */

.it-archive-head {
  padding: 64px 0 8px;
}
.it-archive-title {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.012em;
  max-width: 780px;
  margin: 0 0 22px;
  color: var(--it-ink);
}
.it-archive-title .accent { color: var(--it-terracotta); }
.it-archive-intro {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--it-ink-soft);
  max-width: 680px;
  margin: 0;
}

/* ============ BANDEAU CATALOGUE ============ */

.it-catalogue-bar {
  background: var(--it-cream);
  border-bottom: 0.5px solid rgba(21, 26, 40, 0.15);
}
.it-panel-row {
  display: flex;
  align-items: stretch;
  padding: 10px 0;
}
.it-panel-window {
  flex: 1;
  overflow: hidden;
  padding: 0 14px;
}
.it-panel-track {
  display: flex;
  gap: 14px;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.it-side-panel {
  flex: 0 0 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--it-ink);
  background: var(--it-soft-cream);
  border-left: 0.5px solid rgba(21, 26, 40, 0.12);
  border-right: 0.5px solid rgba(21, 26, 40, 0.12);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.it-side-panel.left { border-left: none; }
.it-side-panel.right { border-right: none; }
.it-side-panel:hover { background: rgba(181, 87, 58, 0.08); color: var(--it-terracotta); }
.it-side-panel:disabled { opacity: 0.28; cursor: not-allowed; }
.it-side-panel:disabled:hover { background: var(--it-soft-cream); color: var(--it-ink); }
.it-side-panel svg { width: 18px; height: 18px; }

.it-card {
  flex: 0 0 200px;
  position: relative;
  background: var(--it-cream);
  transition: background 0.2s, opacity 0.2s;
  cursor: pointer;
  padding: 14px 18px 12px;
  text-align: center;
  text-decoration: none;
}
.it-card:not(.is-current) { opacity: 0.7; }
.it-card:not(.is-current):hover { opacity: 1; background: var(--it-tinted); }
.it-card.is-current { background: var(--it-soft-cream); cursor: default; }
.it-card .it-pico { display: flex; justify-content: center; margin-bottom: 8px; }
.it-card .it-pico svg { width: 32px; height: 32px; }
.it-card .it-name {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.25;
  color: var(--it-ink);
  margin: 0;
}

/* ============ HERO ============ */

.it-mission-hero {
  padding: 72px 80px 56px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 60px;
  align-items: start;
}
.it-mission-hero h1 {
  font-family: 'IBM Plex Serif', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(48px, 5vw, 64px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 28px !important;
  color: var(--it-ink);
}
.it-mission-hero .it-promise {
  font-family: 'IBM Plex Serif', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(22px, 2vw, 28px) !important;
  line-height: 1.3 !important;
  max-width: 640px !important;
  color: var(--it-ink) !important;
  margin: 0 !important;
}
.it-mission-hero .it-promise .accent { color: var(--it-terracotta); }
.it-mission-hero .it-lead {
  font-family: 'IBM Plex Serif', Georgia, serif !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  max-width: 600px !important;
  margin-top: 24px !important;
  color: var(--it-ink) !important;
  opacity: 0.88;
}
/* Cartouche "comment ça se passe" à droite du titre (façon fiche Charte IA) */
.it-how-aside {
  padding: 6px 0 0 32px;
  border-left: 1.5px solid rgba(21, 26, 40, 0.14);
}
.it-how-aside-title {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  color: var(--it-ink);
  margin: 0 0 22px;
}
.it-how-facts-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.it-how-aside .it-how-label { margin-bottom: 6px; }
.it-how-aside .it-how-text { font-size: 14.5px; }

.it-cards-item svg.it-cards-icon {
  display: block;
  align-self: center;
  flex-shrink: 0;
}

/* ============ LA DÉMARCHE ============ */

.it-how { padding: 64px 80px; }
.it-how-header {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  margin-bottom: 32px;
  align-items: baseline;
}
.it-vert-label {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--it-muted);
  text-transform: uppercase;
  margin: 0;
}
.it-vert-label::before { content: "— "; color: var(--it-ink); }
.it-how-header h2 {
  font-family: 'IBM Plex Serif', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(26px, 2.5vw, 32px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.005em !important;
  margin: 0 !important;
  color: var(--it-ink);
}
.it-how-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
}
.it-how-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.it-how-label {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--it-terracotta);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.it-how-text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--it-ink);
  opacity: 0.88;
  margin: 0;
}

/* ============ LE RÉSULTAT ============ */

.it-dossier {
  padding: 72px 80px 80px;
  background: var(--it-cream);
  border-top: 0.5px solid rgba(21, 26, 40, 0.15);
}
.it-dossier-header {
  margin-bottom: 56px;
}
.it-dossier-header .it-vert-label {
  margin-bottom: 22px;
}
.it-dossier-header h2 {
  font-family: 'IBM Plex Serif', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(26px, 2.5vw, 32px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.005em !important;
  margin: 0 !important;
  color: var(--it-ink);
}
.it-dossier-sub {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--it-ink);
  margin: 18px 0 0;
  max-width: 820px;
}

.it-dossier-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}
.it-dossier-grid > div:first-child { order: 2; }
.it-dossier-grid > .it-toc-block { order: 1; }

/* ===== Carrousel feuilletable ===== */

.it-cover-wrap {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  aspect-ratio: 280 / 396;
  perspective: 1400px;
}
.it-cover-pages {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

/* Épaisseur : deux feuilles décalées sous la pile, le dossier
   devient un objet. Pseudo-éléments, rien dans le PHP. */
.it-cover-pages::before,
.it-cover-pages::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #f6f1e6;
  border: 0.5px solid rgba(21, 26, 40, 0.14);
  z-index: 0;
}
.it-cover-pages::before { transform: translate(3px, 3.5px); }
.it-cover-pages::after  { transform: translate(6px, 7px); }

.it-cover-page {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  cursor: zoom-in;
  transform-origin: left center;
  backface-visibility: hidden;
  transition: transform 0.42s cubic-bezier(0.4, 0.1, 0.2, 1),
              opacity 0.3s ease 0.06s;
  box-shadow: 0 18px 40px -16px rgba(21, 26, 40, 0.28),
              0 4px 12px -4px rgba(21, 26, 40, 0.12);
  z-index: 1;
}
.it-cover-page svg { width: 100%; height: 100%; display: block; }
.it-cover-page.is-current {
  opacity: 1;
  pointer-events: auto;
  z-index: 3;
}
.it-cover-page.is-prev {
  opacity: 0;
  z-index: 1;
}

/* Feuilletage 3D : la page sortante pivote sur la tranche gauche.
   Sens distincts avant / arrière. */
.it-cover-page.turn-out-next { transform: rotateY(-68deg); opacity: 0; }
.it-cover-page.turn-out-prev { transform: rotateY(38deg);  opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .it-cover-page { transition: opacity 0.25s ease; }
  .it-cover-page.turn-out-next,
  .it-cover-page.turn-out-prev { transform: none; }
}

/* Flèches de feuilletage en ligne : posées sur les tranches gauche /
   droite du dossier, au-dessus de la pile (z-index > page courante).
   mission.js pose l'attribut disabled aux extrémités : on les masque
   alors (opacité 0). Sans ce bloc, les boutons existent dans le HTML
   mais ne sont ni positionnés ni cliquables : seul le zoom navigue. */
.it-cover-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--it-cream);
  border: 0.5px solid rgba(21, 26, 40, 0.22);
  border-radius: 50%;
  color: var(--it-ink);
  cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(21, 26, 40, 0.45);
  transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
}
.it-cover-nav.prev { left: -46px; }
.it-cover-nav.next { right: -46px; }
.it-cover-nav:hover {
  background: var(--it-terracotta);
  border-color: var(--it-terracotta);
  color: var(--it-cream);
}
.it-cover-nav:disabled { opacity: 0; pointer-events: none; }
.it-cover-nav svg { width: 13px; height: 13px; display: block; }

/* Signet terracotta : descend le long de la tranche droite au fil
   des pages (position = progression, non chromatique). Injecté
   par mission.js. */
.it-cover-bookmark {
  position: absolute;
  right: -7px;
  width: 7px;
  height: 34px;
  background: var(--it-terracotta);
  border-radius: 0 2px 2px 0;
  box-shadow: 1px 1px 3px rgba(21, 26, 40, 0.25);
  z-index: 4;
  transition: top 0.4s cubic-bezier(0.4, 0.1, 0.2, 1);
  pointer-events: none;
}

/* Zoom plein écran : fond encre, page lisible. Injecté par
   mission.js. */
.it-cover-lightbox {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 32px;
  background: rgba(21, 26, 40, 0.88);
  z-index: 9999;
}
.it-cover-lightbox.is-open { display: flex; }

.it-cover-zoom-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.it-cover-lightbox .it-cover-zoomed {
  height: min(84vh, 120vw);
  aspect-ratio: 280 / 396;
  background: #fbf7ed;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.it-cover-lightbox .it-cover-zoomed svg { width: 100%; height: 100%; display: block; }

.it-zoom-nav {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(244, 240, 231, 0.12);
  border: 0.5px solid rgba(244, 240, 231, 0.4);
  border-radius: 50%;
  color: var(--it-cream);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}
.it-zoom-nav:hover { background: var(--it-terracotta); border-color: var(--it-terracotta); }
.it-zoom-nav:disabled { opacity: 0.25; cursor: not-allowed; }
.it-zoom-nav:disabled:hover { background: rgba(244, 240, 231, 0.12); border-color: rgba(244, 240, 231, 0.4); }
.it-zoom-nav svg { width: 20px; height: 20px; }

.it-zoom-count {
  color: rgba(244, 240, 231, 0.7);
  font-size: 12px;
  letter-spacing: 0.08em;
}

@media (max-width: 600px) {
  .it-cover-zoom-stage { gap: 0; position: relative; }
  .it-zoom-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
  .it-zoom-nav.prev { left: 6px; }
  .it-zoom-nav.next { right: 6px; }
  .it-cover-lightbox .it-cover-zoomed { height: min(80vh, 150vw); }
}

/* ===== TOC interactive ===== */

.it-toc-block {
  padding-top: 4px;
  max-width: 420px;
  margin-top: 0;
}
.it-toc-eyebrow {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--it-muted);
  text-transform: uppercase;
  margin: 0 0 20px;
}
.it-toc-eyebrow::before { content: "— "; color: var(--it-ink); }

.it-toc-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  padding: 18px 14px 18px 0;
  border-top: 0.5px solid rgba(21, 26, 40, 0.12);
  align-items: start;
  cursor: pointer;
  transition: background 0.2s;
  border-right: 2px solid transparent;
  margin-right: -14px;
}
.it-toc-row:last-child { border-bottom: 0.5px solid rgba(21, 26, 40, 0.12); }
.it-toc-row:hover { background: var(--it-tinted); }
.it-toc-row:focus { outline: none; background: var(--it-tinted); }
.it-toc-row.is-current {
  background: var(--it-soft-cream);
  border-right-color: var(--it-terracotta);
}
.it-toc-num {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--it-terracotta);
  padding-top: 4px;
  padding-left: 16px;
}
.it-toc-text { display: flex; flex-direction: column; gap: 4px; }
.it-toc-title {
  font-family: 'IBM Plex Serif', Georgia, serif;
  font-size: 18px;
  line-height: 1.3;
  color: var(--it-ink);
}
.it-toc-row.is-current .it-toc-title { font-weight: 500; }
.it-toc-sub {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--it-ink);
  opacity: 0.72;
}



/* ==============================================================
   MÉTHODE (format réduit — mission "Votre situation")
   --------------------------------------------------------------
   Affiché par single-mission.php quand sans_dossier est coché :
   remplace la section .it-dossier. Aligné sur ses conventions
   (padding 72/80/80, fond crème, filet 0.5px) et sur le vocabulaire
   de variables de mission.css (--it-terracotta, --it-cream).
   À coller à la suite du bloc "LE RÉSULTAT" dans assets/css/mission.css,
   puis bumper filemtime().
   ============================================================== */

.it-method {
  padding: 72px 80px 80px;
  background: var(--it-cream);
  border-top: 0.5px solid rgba(21, 26, 40, 0.15);
}

.it-method-header {
  margin-bottom: 48px;
}
.it-method-header .it-vert-label {
  margin-bottom: 22px;
}

.it-method-lede {
  font-family: 'IBM Plex Serif', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 22px !important;
  line-height: 1.4 !important;
  color: var(--it-ink) !important;
  margin: 0 !important;
  max-width: 560px;
}

.it-method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--it-ink);
}

/* Gouttières symétriques de part et d'autre du filet vertical :
   le texte ne touche jamais le filet ; bords extérieurs alignés
   sur la colonne de contenu. */
.it-method-step {
  padding: 28px 24px 8px 24px;
  border-right: 1px solid rgba(21, 26, 40, 0.14);
}
.it-method-step:first-child {
  padding-left: 0;
}
.it-method-step:last-child {
  padding-right: 0;
  border-right: none;
}

.it-method-num {
  font-family: 'IBM Plex Mono', 'Courier New', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  color: var(--it-terracotta) !important;
  margin: 0 0 16px 0 !important;
}

.it-method-title {
  font-family: 'IBM Plex Serif', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 21px !important;
  line-height: 1.2 !important;
  color: var(--it-ink) !important;
  margin: 0 0 14px 0 !important;
}

.it-method-desc {
  font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--it-ink-soft) !important;
  margin: 0 !important;
}

/* --- Picto hero (aside) quand sans_dossier : occupe la colonne
   droite de la grille .it-mission-hero (1.35fr / 1fr) a la place
   du cartouche. Pas de filet : ellipse seule, calee en haut a droite. --- */
.it-mission-picto-aside {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 12px;
}
.it-mission-picto-svg {
  width: 120px;
  height: 120px;
  display: block;
}

/* --- Responsive : aligne sur le breakpoint 980px de mission.css.
   .it-method prend le padding horizontal reduit (40px) comme
   .it-dossier ; la grille s'empile, filets en tete de chaque temps ;
   l'ellipse se cale a gauche sous le lead. --- */
@media (max-width: 980px) {
  .it-method {
    padding-left: 40px;
    padding-right: 40px;
  }
  .it-method-grid {
    grid-template-columns: 1fr;
    border-top: none;
  }
  .it-method-step {
    border-right: none;
    border-top: 1px solid rgba(21, 26, 40, 0.14);
    padding: 24px 0 8px 0;
  }
  .it-mission-picto-aside {
    justify-content: flex-start;
    padding-top: 0;
  }
  .it-mission-picto-svg {
    width: 88px;
    height: 88px;
  }
}


/* ============ RESPONSIVE ============ */

@media (max-width: 980px) {
  .it-mission-hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 56px 40px;
  }
  .it-how-aside { border-left: none; border-top: 0.5px solid rgba(21, 26, 40, 0.14); padding: 24px 0 0; }
  .it-how, .it-dossier { padding-left: 40px; padding-right: 40px; }
  .it-how-header, .it-how-row, .it-dossier-header {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .it-how-facts { grid-template-columns: 1fr; gap: 24px; }
  .it-dossier-grid { grid-template-columns: 1fr; gap: 48px; }
  .it-cover-wrap { margin: 0 auto; }
  .it-cover-nav.prev { left: 6px; }
  .it-cover-nav.next { right: 6px; }
}


.it-panel-track { visibility: hidden; }
.it-panel-track.is-ready { visibility: visible; }