@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,400;1,700&display=swap');

:root {
  --primary: #5b3f8c;
  --primary-dark: #48316f;
  --primary-deep: #34234f;
  --primary-light: #7d63ab;
  --primary-soft: #e3daf1;
  --primary-softer: #f1ecf8;
  --secondary: #e6dcf3;
  --secondary-dark: #d2c3e8;
  --secondary-light: #efe8f8;
  --accent: #f0646e;
  --accent-dark: #c43d4b;
  --accent-text: #a8303e;
  --accent-soft: #fbd3d6;
  --accent-softer: #fdeeef;
  --accent-warm: #f7b267;
  --bg: #f8f5fb;
  --bg-alt: #ffffff;
  --hero-bg: #efe8f8;
  --white: #ffffff;
  --text: #4a4458;
  --text-light: #6b6578;
  --ink: #241a33;
  --ink-2: #2f2442;
  --on-dark: #f1ecf8;
  --on-dark-muted: #c3b8d6;
  --border: #e6deef;
  --border-strong: #cdbfe0;
  --font-display: 'Comfortaa', 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 22px;
  --radius-pill: 9999px;
  --shadow-xs: 0 1px 2px rgba(52, 35, 79, .08);
  --shadow-sm: 0 1px 2px rgba(52, 35, 79, .05), 0 4px 14px rgba(52, 35, 79, .05);
  --shadow-md: 0 2px 4px rgba(52, 35, 79, .05), 0 10px 26px rgba(52, 35, 79, .10);
  --shadow-lg: 0 6px 14px rgba(52, 35, 79, .07), 0 22px 48px rgba(52, 35, 79, .14);
  --glow: 0 6px 18px rgba(91, 63, 140, .25);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .1s;
  --t: .25s;
  --max-width: 1120px;
  --article-width: 760px;
  --gutter: 20px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --wave-line: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 240 20%22%3E%3Cg fill=%22%23d2c3e8%22%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%225%22/%3E%3Ccircle cx=%2242%22 cy=%2210%22 r=%223%22/%3E%3Ccircle cx=%2272%22 cy=%2210%22 r=%225%22/%3E%3Ccircle cx=%22102%22 cy=%2210%22 r=%223%22/%3E%3Ccircle cx=%22132%22 cy=%2210%22 r=%225%22/%3E%3Ccircle cx=%22162%22 cy=%2210%22 r=%223%22/%3E%3Ccircle cx=%22192%22 cy=%2210%22 r=%225%22/%3E%3Ccircle cx=%22222%22 cy=%2210%22 r=%223%22/%3E%3C/g%3E%3C/svg%3E');
  --wave-line-strong: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 240 20%22%3E%3Cg fill=%22%23b9a6d6%22%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%225%22/%3E%3Ccircle cx=%2242%22 cy=%2210%22 r=%223%22/%3E%3Ccircle cx=%2272%22 cy=%2210%22 r=%225%22/%3E%3Ccircle cx=%22102%22 cy=%2210%22 r=%223%22/%3E%3Ccircle cx=%22132%22 cy=%2210%22 r=%225%22/%3E%3Ccircle cx=%22162%22 cy=%2210%22 r=%223%22/%3E%3Ccircle cx=%22192%22 cy=%2210%22 r=%225%22/%3E%3Ccircle cx=%22222%22 cy=%2210%22 r=%223%22/%3E%3C/g%3E%3C/svg%3E');
  --wave-top: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 40%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 22c120-18 240-22 360-10s240 26 360 14 240-30 360-24 240 22 360 12v26H0z%22 fill=%22%2334234f%22/%3E%3C/svg%3E');
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video {
  max-width: 100%;
  height: auto;
}

img {
  display: block;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4, h5, h6, p, li, a, td, th, figcaption, summary, blockquote, span {
  overflow-wrap: break-word;
}

::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 2px;
}

a {
  color: var(--accent-text);
  text-decoration: none;
  transition: color var(--t-fast) ease-in-out, background-color var(--t-fast) ease-in-out;
}

a:hover,
a:focus-visible {
  color: var(--primary);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--primary);
  line-height: 1.3;
  letter-spacing: -.35px;
}

h1 { font-size: clamp(1.875rem, 1.35rem + 2.4vw, 2.625rem); margin-bottom: 20px; }
h2 { font-size: clamp(1.625rem, 1.2rem + 1.9vw, 2.1875rem); margin-bottom: 20px; }
h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); margin-bottom: 12px; }
h4 { font-size: 1.25rem; margin-bottom: 10px; }

h1 em, h2 em, h3 em, h1 .hl, h2 .hl, h3 .hl, .hl {
  font-style: normal;
  color: var(--accent-text);
  padding: 0 .08em;
  background: linear-gradient(transparent 62%, var(--accent-soft) 62%);
}

p {
  margin-bottom: 1.2em;
}

p:last-child {
  margin-bottom: 0;
}

strong, b {
  font-weight: 700;
  color: var(--ink-2);
}

em, i {
  font-style: italic;
}

hr {
  border: 0;
  height: 18px;
  max-width: 180px;
  margin: 3em auto;
  background: var(--wave-line-strong) center / contain no-repeat;
}

.container {
  width: 100%;
  max-width: calc(var(--max-width) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.grid > * {
  min-width: 0;
}

.site-header {
  position: relative;
  z-index: 50;
  background: var(--white);
  padding: 16px 0;
  isolation: isolate;
}

.header-wave {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 1px);
  width: 100%;
  height: 22px;
  z-index: -1;
  display: block;
  pointer-events: none;
}

.header-inner {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.2;
  letter-spacing: -.5px;
  color: var(--primary);
  text-decoration: none;
}

.logo:hover,
.logo:focus-visible {
  color: var(--primary-dark);
}

.logo svg {
  flex: none;
  width: 40px;
  height: 40px;
  transition: transform .45s var(--ease-out);
}

.logo:hover svg {
  transform: rotate(-8deg) scale(1.06);
}

.logo-text {
  min-width: 0;
  white-space: nowrap;
}

.logo-accent {
  color: var(--accent-dark);
}

.main-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}

.main-nav li {
  position: relative;
}

.main-nav a {
  position: relative;
  display: block;
  padding: 0 18px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 44px;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: color var(--t-fast) ease-in-out, background-color var(--t-fast) ease-in-out;
}

.main-nav a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%) scale(0);
  transform-origin: center;
  transition: transform var(--t) var(--ease);
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--accent-text);
  background: var(--accent-softer);
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  transform: translateX(-50%) scale(1);
}

.main-nav a[aria-current=page],
.main-nav a.active,
.main-nav .current-menu-item > a {
  color: var(--primary);
  background: var(--primary-softer);
}

.main-nav a[aria-current=page]::after,
.main-nav a.active::after,
.main-nav .current-menu-item > a::after {
  transform: translateX(-50%) scale(1);
}

.main-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 220px;
  display: block;
  padding: 6px 0;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs), var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}

.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 150ms;
}

.main-nav .sub-menu a {
  line-height: 1.4;
  padding: 10px 20px;
  font-size: .875rem;
  border-radius: 0;
}

.main-nav .sub-menu a::after {
  display: none;
}

.menu-toggle {
  display: none;
  position: relative;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 8px 8px 42px;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--t-fast) ease-in-out;
}

.menu-toggle::after {
  content: 'Menu';
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
  background: transparent;
  color: var(--accent-text);
}

.menu-toggle span {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t) var(--ease), opacity .2s var(--ease), top var(--t) var(--ease);
}

.menu-toggle span:nth-child(1) { top: calc(50% - 8px); }
.menu-toggle span:nth-child(2) { top: calc(50% - 1.25px); }
.menu-toggle span:nth-child(3) { top: calc(50% + 5.5px); }

.menu-toggle[aria-expanded=true] span:nth-child(1) { top: calc(50% - 1.25px); transform: rotate(45deg); }
.menu-toggle[aria-expanded=true] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.menu-toggle[aria-expanded=true] span:nth-child(3) { top: calc(50% - 1.25px); transform: rotate(-45deg); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 30px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.4;
  letter-spacing: .01em;
  text-transform: none;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: none;
  cursor: pointer;
  transition: background-color var(--t-fast) ease-in-out, color var(--t-fast) ease-in-out, box-shadow var(--t-fast) ease-in-out, transform .2s var(--ease);
}

.btn:active {
  transform: translateY(2px);
}

.btn-primary {
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 4px 0 var(--primary-deep);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--primary-dark);
  color: var(--white);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  box-shadow: inset 0 0 0 2px var(--primary);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--primary);
  color: var(--white);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px 14px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: .8125rem;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-softer);
  border-radius: var(--radius-pill);
}

section.hero {
  position: relative;
  overflow: hidden;
  background: var(--hero-bg);
  padding: 88px 0 96px;
}

section.hero::before {
  content: '';
  position: absolute;
  right: -120px;
  top: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--accent-soft) 0%, transparent 70%);
  opacity: .7;
  pointer-events: none;
}

section.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 56px;
  align-items: center;
}

section.hero .container > * {
  min-width: 0;
}

.hero-content .eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.hero-content h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  line-height: 1.2;
  margin-bottom: 20px;
}

.hero-content p {
  max-width: 54ch;
  font-size: 1.125rem;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.hero-media {
  position: relative;
}

.hero-media::before {
  content: '';
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 55%;
  height: 55%;
  z-index: 0;
  background-image: radial-gradient(var(--primary-light) 2px, transparent 2.5px);
  background-size: 16px 16px;
  border-radius: var(--radius-lg);
  opacity: .55;
  transition: transform .8s var(--ease-out);
}

.hero-media:hover::before {
  transform: translate(-6px, -6px);
}

.hero-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  border: 6px solid var(--white);
  border-radius: 140px 24px 140px 24px;
  box-shadow: var(--shadow-lg);
}

.section {
  position: relative;
  padding: var(--space-9) 0;
  background: var(--bg);
}

.section-alt {
  background: var(--bg-alt);
}

.section-head {
  max-width: 720px;
  margin: 0 auto var(--space-7);
  text-align: center;
}

.section-head h2::before {
  content: '';
  display: block;
  width: 48px;
  height: 8px;
  margin: 0 auto 18px;
  border-radius: 0;
  background: radial-gradient(circle, var(--accent) 3px, transparent 3.5px) left center / 16px 8px repeat-x;
}

.section-head h2 {
  margin-bottom: 14px;
}

.section-head p {
  color: var(--text);
}

.section-head .eyebrow {
  justify-content: center;
}

.page-header {
  background: var(--hero-bg);
  padding: var(--space-8) 0 var(--space-7);
}

.page-header h1 {
  margin-bottom: 14px;
}

.page-header h1::after {
  content: '';
  display: block;
  width: 200px;
  max-width: 100%;
  height: 18px;
  margin-top: 14px;
  background: var(--wave-line-strong) left center / contain no-repeat;
}

.page-header p {
  max-width: 760px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.card-grid > * {
  min-width: 0;
}

.card-grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background-color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.section-alt .card {
  background: var(--bg);
}

.card:hover,
.card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--secondary-dark);
}

.card > img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform .6s var(--ease-out), filter .6s var(--ease-out);
}

.card:hover > img {
  transform: scale(1.04);
  filter: saturate(1.08);
}

.card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  gap: 10px;
  padding: 24px 26px 28px;
  background: inherit;
}

.card-tag {
  display: inline-block;
  max-width: 100%;
  padding: 5px 16px;
  background: var(--primary);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .875rem;
  line-height: 1.4;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 4px var(--white);
}

.card > img + .card-body .card-tag {
  margin-top: -40px;
  margin-bottom: 6px;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-weight: 700;
  font-size: .9375rem;
  color: var(--accent-text);
}

.card-body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.35;
  letter-spacing: -.3px;
  color: var(--primary);
  transition: color var(--t-fast) ease-in-out;
}

.card-body h3 a {
  color: inherit;
}

.card:hover .card-body h3 {
  color: var(--accent-dark);
}

.card-body p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: auto;
  font-weight: 800;
  font-size: .9375rem;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--primary);
}

.card-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
}

.card-link::after {
  content: '→';
  transition: transform var(--t) var(--ease);
}

.card:hover .card-link,
.card-link:focus-visible {
  color: var(--accent-text);
}

.card:hover .card-link::after {
  transform: translateX(4px);
}

.article {
  padding: var(--space-8) 0 var(--space-9);
}

.article .container {
  max-width: calc(var(--article-width) + var(--gutter) * 2);
}

.article h1 {
  margin-bottom: 16px;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-bottom: var(--space-6);
  padding-bottom: 22px;
  font-weight: 700;
  font-size: .9375rem;
  color: var(--accent-text);
  background: var(--wave-line-strong) left bottom / 160px 14px no-repeat;
}

.article-meta a {
  color: inherit;
}

.article-meta a:hover {
  color: var(--primary);
}

.article h2 {
  margin-top: 2em;
  margin-bottom: .6em;
}

.article h3 {
  margin-top: 1.6em;
  margin-bottom: .5em;
}

.article p,
.article ul,
.article ol {
  margin-bottom: 1.2em;
}

.article ul,
.article ol {
  list-style: none;
  padding-left: 0;
}

.article li {
  position: relative;
  padding-left: 30px;
  margin-bottom: .5em;
}

.article ul li::before {
  content: '';
  position: absolute;
  left: 8px;
  top: .65em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.article ol {
  counter-reset: item;
}

.article ol li {
  counter-increment: item;
  padding-left: 38px;
}

.article ol li::before {
  content: counter(item);
  position: absolute;
  left: 0;
  top: .15em;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-weight: 800;
  font-size: .8125rem;
  line-height: 1;
}

.article a:not(.btn):not(.card-link) {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-color: var(--accent-soft);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.article a:not(.btn):not(.card-link):hover {
  color: var(--primary);
  text-decoration-color: var(--primary-soft);
}

blockquote {
  position: relative;
  margin: 2em 0;
  padding: 24px 28px 24px 32px;
  background: var(--primary-softer);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--primary-dark);
}

.breadcrumb {
  margin-bottom: var(--space-5);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text);
}

.breadcrumb ol,
.breadcrumb ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin: 0;
  padding: 0;
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
}

.breadcrumb li + li::before {
  content: '›';
  margin: 0 10px;
  color: var(--border-strong);
  font-weight: 800;
}

/* Séparateur du fil d'Ariane : déjà présent dans le HTML (›), pas de second chevron en CSS. */

.breadcrumb a {
  color: var(--primary);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--accent-text);
}

.breadcrumb [aria-current] {
  color: var(--text-light);
}

.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 2em 0;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--white);
}

.table-wrap table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.5;
}

.table-wrap thead th {
  background: var(--primary);
  color: var(--white);
  font-weight: 700;
  text-align: left;
  padding: 14px 18px;
  white-space: nowrap;
}

.table-wrap td {
  padding: 13px 18px;
  border-top: 1px solid var(--border);
  color: var(--text);
  vertical-align: top;
}

.table-wrap tbody tr:nth-child(even) td {
  background: var(--bg);
}

.table-wrap tbody tr:hover td {
  background: var(--primary-softer);
}

.info-box {
  margin: 2em 0;
  padding: 20px 24px;
  background: var(--secondary-light);
  border-left: 5px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.info-box strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--primary);
}

.info-box p {
  margin: 0;
  font-size: 1rem;
}

.info-box.tip {
  border-left-color: var(--primary);
  background: var(--primary-softer);
}

.info-box.warning {
  border-left-color: var(--accent);
  background: var(--accent-softer);
}

.info-box.warning strong {
  color: var(--accent-text);
}

.article-figure,
figure.hero {
  margin: 2em 0;
}

.article-figure img,
figure.hero img {
  width: 100%;
  border-radius: var(--radius-lg);
}

figcaption {
  margin-top: 10px;
  text-align: center;
  font-size: .9375rem;
  font-style: italic;
  color: var(--text-light);
}

.faq {
  margin: 2.5em 0;
  display: grid;
  gap: 12px;
}

.faq-item {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}

.faq-item[open] {
  background: var(--primary-softer);
  border-color: var(--secondary-dark);
}

.faq-item summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 14px 56px 14px 22px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--primary);
  transition: color var(--t-fast) ease-in-out;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '';
  position: absolute;
  right: 24px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-right: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: rotate(45deg);
  transition: transform var(--t) var(--ease), margin var(--t) var(--ease);
}

.faq-item[open] summary::after {
  margin-top: -2px;
  transform: rotate(-135deg);
}

.faq-item summary:hover {
  color: var(--accent-text);
}

.faq-answer {
  padding: 0 22px 20px;
  font-size: 1rem;
  animation: faq-in .3s var(--ease);
}

@keyframes faq-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.related-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.related-cards > * {
  min-width: 0;
}

.related-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  text-decoration: none;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.related-card:hover,
.related-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  color: var(--text);
}

.related-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}

.related-card:hover img {
  transform: scale(1.04);
}

.rc-body {
  position: relative;
  padding: 20px 22px 24px;
  background: inherit;
}

.rc-body h4 {
  margin-bottom: 8px;
  font-size: 1.1875rem;
  line-height: 1.4;
  color: var(--primary);
  transition: color var(--t-fast) ease-in-out;
}

.related-card:hover .rc-body h4 {
  color: var(--accent-dark);
}

.rc-body p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--text);
}

.author-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin: 3em 0 1em;
  padding: 28px 30px;
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 5px solid var(--primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.author-card::after {
  content: '';
  position: absolute;
  right: -40px;
  bottom: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--secondary);
  opacity: .6;
  pointer-events: none;
}

.author-card > * {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.author-card img {
  flex: none;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--white);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.author-card h4 {
  margin-bottom: 2px;
  font-size: 1.25rem;
}

.author-card .role {
  margin-bottom: 10px;
  font-weight: 700;
  font-size: .9375rem;
  color: var(--accent-text);
}

.author-card p {
  font-size: 1rem;
}

.site-footer {
  position: relative;
  margin-top: 60px;
  background: var(--primary-deep);
  color: var(--on-dark-muted);
  font-size: 1.125rem;
  line-height: 1.6;
}

.site-footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -39px;
  height: 40px;
  background: var(--wave-top) center bottom / 100% 100% no-repeat;
  pointer-events: none;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  padding-top: var(--space-8);
  padding-bottom: var(--space-7);
}

.footer-grid > * {
  min-width: 0;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.3;
  color: var(--white);
}

.footer-logo svg {
  flex: none;
  width: 32px;
  height: 32px;
}

.footer-brand p {
  max-width: 36ch;
  font-size: 1rem;
  color: var(--on-dark-muted);
}

.footer-title {
  position: relative;
  margin-bottom: 16px;
  padding-bottom: 12px;
  font-size: 1.0625rem;
  letter-spacing: -.2px;
  color: var(--white);
}

.footer-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 3px;
  border-radius: 3px;
  background: var(--accent);
}

.footer-links {
  list-style: none;
  display: grid;
  gap: 2px;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--on-dark);
  transition: color var(--t-fast) ease-in-out, transform var(--t) var(--ease);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--accent-soft);
  transform: translateX(3px);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 20px 0;
  font-size: 1rem;
  color: var(--on-dark-muted);
}

.footer-bottom .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom em {
  color: var(--accent-soft);
}

@media (max-width: 1024px) {
  :root { --space-9: 64px; --space-8: 52px; }
  section.hero .container { gap: 36px; }
  .card-grid, .related-cards, .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  .main-nav a { padding: 0 14px; }
  .main-nav a::after { left: 50%; right: auto; }
}

@media (max-width: 768px) {
  :root { --space-9: 52px; --space-8: 44px; --space-7: 32px; }
  .site-header { padding: 12px 0; }
  .header-inner { flex-direction: row; justify-content: space-between; gap: 12px; }
  .logo { font-size: 1.3125rem; gap: 10px; }
  .logo svg { width: 34px; height: 34px; }
  .menu-toggle { display: inline-flex; }
  .main-nav { position: absolute; top: calc(100% + 12px); left: var(--gutter); right: var(--gutter); z-index: 60; max-height: calc(100vh - 110px); overflow-y: auto; padding: 8px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-xs), var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; }
  .site-header.nav-open .main-nav { opacity: 1; visibility: visible; transform: none; }
  .main-nav ul { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .main-nav a { display: flex; align-items: center; min-height: 48px; padding: 10px 16px; line-height: 1.4; border-radius: var(--radius-sm); }
  .main-nav a::after { display: none; }
  .main-nav a:hover, .main-nav a:focus-visible { background: var(--primary-softer); }
  .main-nav a[aria-current=page], .main-nav a.active { background: var(--accent-softer); box-shadow: inset 3px 0 0 var(--accent); }
  .main-nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0 0 0 14px; min-width: 0; }
  section.hero { padding: 48px 0 56px; }
  section.hero .container { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero-actions .btn { width: 100%; }
  .hero-media img { border-radius: 90px 18px 90px 18px; }
  .card-grid, .card-grid.cols-2, .related-cards, .grid { grid-template-columns: minmax(0, 1fr); }
  .card > img { height: 210px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .footer-links a { min-height: 44px; }
  .footer-bottom .container { flex-direction: column; align-items: flex-start; }
  .author-card { flex-direction: column; padding: 24px 22px; }
  .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 480px) {
  html { font-size: 90.625%; }
  :root { --gutter: 16px; }
  .btn { width: 100%; padding: 10px 22px; }
  .card-body { padding: 22px 20px 24px; }
  .faq-item summary { padding-left: 18px; }
  .faq-answer { padding: 0 18px 18px; }
}

@media (max-width: 400px) {
  .menu-toggle { padding: 8px; width: 44px; justify-content: center; }
  .menu-toggle::after { content: none; }
  .menu-toggle span { left: 11px; }
  .logo { font-size: 1.1875rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}


/* --- Réconciliation : classes des gabarits --- */
.footer-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.65;
  color: var(--on-dark-muted);
  overflow-wrap: anywhere;
}

.footer-col > :first-child {
  margin-top: 0;
}

.footer-col > :last-child {
  margin-bottom: 0;
}

.footer-col h2,
.footer-col h3,
.footer-col h4,
.footer-col h5 {
  position: relative;
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
}

.footer-col h2::after,
.footer-col h3::after,
.footer-col h4::after,
.footer-col h5::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 6px;
  border-radius: 0;
  background: radial-gradient(circle, var(--accent) 2.5px, transparent 3px) left center / 12px 6px repeat-x;
}

.footer-col p {
  margin: 0;
  color: var(--on-dark-muted);
}

.footer-col ul,
.footer-col ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-col li {
  margin: 0;
  padding: 0;
}

.footer-col a {
  color: var(--on-dark);
  text-decoration: none;
  border-radius: var(--radius-xs);
  transition: color var(--t) var(--ease);
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: var(--accent-soft);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

.footer-col a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.footer-col img,
.footer-col svg {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .footer-col {
    gap: var(--space-2);
    font-size: .93rem;
  }

  .footer-col h2,
  .footer-col h3,
  .footer-col h4,
  .footer-col h5 {
    font-size: 1rem;
  }

  .footer-col ul,
  .footer-col ol {
    gap: var(--space-1);
  }

  .footer-col li a {
    display: inline-block;
    padding: var(--space-1) 0;
  }
}