/* ===========================================================================
   outils-methode-styles.css
   Feuille de page (chargee apres les feuilles partagees, gagne en cascade).
   Reprend 1:1 le bloc <style> page-specifique de
   claude_design_v2/outils-methode.html : sections, font-size et @media.
   N'inclut PAS navbar / footer / modale / resets (fournis par les
   feuilles partagees formation-styles.css et acadenice-navbar.css).
   =========================================================================== */

/* === outils-methode.html === */

/* ── PAGE-SPECIFIC ── */
.om-intro {
  padding: 100px 0 60px;
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-dark);
}
[data-theme="light"] .om-intro { border-color: var(--border-light); }
.om-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(320px, .84fr);
  gap: 64px;
  align-items: start;
}
.om-intro__grid--no-media {
  grid-template-columns: minmax(0, 820px);
}
.om-intro__manifesto {
  grid-column: 1;
  min-width: 0;
}
.om-intro__manifesto h2 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(34px, 3.9vw, 52px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0 0 24px;
  text-wrap: balance;
}
.om-intro__manifesto h2 em { color: var(--teal); font-style: normal; }
.om-intro__manifesto h2 span { color: var(--amber); }
.om-intro__lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted-on-dark);
}
[data-theme="light"] .om-intro__lead { color: var(--muted-on-light); }
.om-intro__lead strong { color: var(--text-primary); font-weight: 600; }
.om-intro__quote {
  grid-column: 1;
  position: relative;
  padding: 36px 36px 36px 48px;
  background: var(--bg-dark);
  border-left: 3px solid var(--teal);
  border-radius: 0 12px 12px 0;
}
[data-theme="light"] .om-intro__quote { background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,.04); }
.om-intro__quote::before {
  content: '"';
  position: absolute; top: 8px; left: 14px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 80px;
  font-weight: 700;
  color: var(--teal);
  opacity: .25;
  line-height: 1;
}
.om-intro__quote p {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.om-intro__quote cite {
  font-style: normal;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.om-intro__media {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  min-height: clamp(280px, 34vw, 460px);
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--border-dark);
  background: color-mix(in oklab, var(--teal) 8%, var(--bg-dark));
}
[data-theme="light"] .om-intro__media {
  border-color: var(--border-light);
  background: color-mix(in oklab, var(--teal) 6%, #fff);
}

/* ── METHOD PILLARS ── */
.method-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--border-dark);
}
[data-theme="light"] .method-grid { background: var(--border-light); }
.method-card {
  background: var(--bg-dark);
  padding: 44px 36px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  transition: background var(--transition);
}
[data-theme="light"] .method-card { background: #fff; }
.method-card:hover { background: var(--bg-dark-2); }
[data-theme="light"] .method-card:hover { background: var(--bg-light); }
.method-card__num {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--teal);
}
.method-card__title {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--text-primary);
}
.method-card__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted-on-dark);
  margin: 0;
}
[data-theme="light"] .method-card__body { color: var(--muted-on-light); }
.method-card__body strong { color: var(--text-primary); font-weight: 600; }

/* ── TOOLS GRID ── */
.tools-tabs {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px;
}
.tools-tab {
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--border-dark);
  border-radius: var(--r-pill);
  font-family: 'Josefin Sans', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  cursor: pointer;
  transition: all var(--transition);
}
[data-theme="light"] .tools-tab { border-color: var(--border-light); color: var(--muted-on-light); }
.tools-tab:hover { border-color: var(--pole, var(--teal)); color: var(--pole, var(--teal)); }
.tools-tab.is-active {
  background: var(--pole, var(--teal));
  color: #0A2E2A;
  border-color: var(--pole, var(--teal));
}
.tools-tab[data-cat="dev"] { --pole: var(--pole-tech); }
.tools-tab[data-cat="design"] { --pole: var(--pole-graph); }
.tools-tab[data-cat="collab"] { --pole: var(--amber); }
.tools-tab[data-cat="learn"] { --pole: var(--pole-elec); }

.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.tool-card {
  position: relative;
  padding: 28px 24px 24px;
  background: var(--bg-dark);
  border: 1px solid var(--border-dark);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 10px;
  transition: all var(--transition);
}
[data-theme="light"] .tool-card { background: #fff; border-color: var(--border-light); }
.tool-card:hover {
  transform: translateY(-3px);
  border-color: var(--pole, var(--teal));
  box-shadow: 0 8px 28px color-mix(in oklab, var(--pole, var(--teal)) 20%, transparent);
}
.tool-card[data-cat="dev"] { --pole: var(--pole-tech); }
.tool-card[data-cat="design"] { --pole: var(--pole-graph); }
.tool-card[data-cat="collab"] { --pole: var(--amber); }
.tool-card[data-cat="learn"] { --pole: var(--pole-elec); }
.tool-card__cat-dot {
  position: absolute; top: 16px; right: 16px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pole, var(--teal));
}
.tool-card__logo {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--pole, var(--teal)) 12%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--pole, var(--teal));
  margin-bottom: 6px;
}
.tool-card__name {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -.01em;
}
.tool-card__desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted-on-dark);
  margin: 0;
  flex: 1;
}
[data-theme="light"] .tool-card__desc { color: var(--muted-on-light); }

/* ── ACTIVE LEARNING SPLIT ── */
.active-learning {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin: 0;
  align-items: stretch;
}
.active-learning--no-media {
  grid-template-columns: 1fr;
  margin: 0;
}
.active-learning--no-media .active-learning__content {
  max-width: 760px;
  margin: 0 auto;
}
.active-learning__media {
  position: relative;
  min-height: 480px;
  background: var(--bg-dark-2);
  border-radius: 20px;
  overflow: hidden;
}
.active-learning__media image-slot {
  width: 100%; height: 100%;
  display: block;
}
.active-learning__content {
  padding: 80px 64px;
  background: var(--bg-page);
  display: flex; flex-direction: column; justify-content: center;
}
.active-learning__eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 16px;
}
.active-learning__title {
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0 0 24px;
}
.active-learning__title em { font-style: normal; color: var(--amber); }
.active-learning__body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted-on-dark);
  margin: 0 0 28px;
}
[data-theme="light"] .active-learning__body { color: var(--muted-on-light); }
.active-learning__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.active-learning__list li {
  display: flex; align-items: flex-start; gap: 14px;
  font-size: 15px;
  color: var(--text-primary);
  line-height: 1.55;
}
.active-learning__list li::before {
  content: '';
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--teal);
  margin-top: 2px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'><path d='M3 7l3 3 5-6' stroke='%230A2E2A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: 14px; background-position: center; background-repeat: no-repeat;
}

/* ── SOFT SKILLS ── */
.softskills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.softskill {
  padding: 28px;
  background: var(--bg-dark);
  border: 1px solid var(--border-dark);
  border-radius: 16px;
  border-top: 3px solid var(--pole, var(--teal));
  transition: all var(--transition);
}
[data-theme="light"] .softskill { background: #fff; border-color: var(--border-light); border-top-color: var(--pole, var(--teal)); }
.softskill:hover { transform: translateY(-3px); }
.softskill[data-pole="tech"] { --pole: var(--pole-tech); }
.softskill[data-pole="graph"] { --pole: var(--pole-graph); }
.softskill[data-pole="sport"] { --pole: var(--pole-sport); }
.softskill[data-pole="com"] { --pole: var(--pole-com); }
.softskill[data-pole="elec"] { --pole: var(--pole-elec); }
.softskill[data-pole="amber"] { --pole: var(--amber); }
.softskill__label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pole, var(--teal));
  margin-bottom: 10px;
}
.softskill__title {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  letter-spacing: -.01em;
}
.softskill__body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted-on-dark);
  margin: 0;
}
[data-theme="light"] .softskill__body { color: var(--muted-on-light); }

/* ── STATS STRIP ── */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
}
[data-theme="light"] .stats-strip { border-color: var(--border-light); }
.stat-cell {
  padding: 40px 28px;
  text-align: center;
  border-right: 1px solid var(--border-dark);
}
[data-theme="light"] .stat-cell { border-color: var(--border-light); }
.stat-cell:last-child { border-right: none; }
.stat-cell__num {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--teal);
}
.stat-cell__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-on-dark);
  letter-spacing: .04em;
  margin-top: 8px;
}
[data-theme="light"] .stat-cell__label { color: var(--muted-on-light); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .om-intro__grid { grid-template-columns: 1fr; gap: 48px; }
  .om-intro__manifesto,
  .om-intro__quote,
  .om-intro__media {
    grid-column: auto;
    grid-row: auto;
  }
  .active-learning { grid-template-columns: 1fr; margin: 0; }
  .active-learning__media { min-height: 320px; }
  .active-learning__content { padding: 56px 32px; }
  .tools-grid { grid-template-columns: repeat(3, 1fr); }
  .softskills-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-cell:nth-child(2) { border-right: none; }
  .stat-cell:nth-child(1), .stat-cell:nth-child(2) { border-bottom: 1px solid var(--border-dark); }
}
@media (max-width: 640px) {
  .method-grid { grid-template-columns: 1fr; }
  .tools-grid { grid-template-columns: 1fr 1fr; }
  .softskills-grid { grid-template-columns: 1fr; }
  .stat-cell__num { font-size: 40px; }
}