/* ============================================
   CYRILLE FOURRÉ CONSULTING : Design System
   ============================================ */

/* --- CSS Reset & Base --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Palette resserrée : thème SOMBRE par défaut (18/07/2026, demande Cyrille) */
  --ink: #EEF2FF;            /* texte principal, clair sur fond nuit */
  --navy: #060B22;           /* fond de page */
  --bg: #0A1130;             /* fond des sections alternées */
  --surface: #101A3C;        /* cartes */
  --muted: #A7B1CC;          /* texte secondaire */
  --line: rgba(255, 255, 255, 0.12);  /* filets, bordures */
  --blue: #37A6CA;           /* bleu moyen de la charte */
  --cyan: #6EDADD;           /* cyan clair de la charte (logo CF) */
  --grad: linear-gradient(115deg, var(--blue), var(--cyan));
  --cyan-deep: #185D96;         /* bleu profond de la charte (texte et boutons sur fond clair) */
  --grad-text: linear-gradient(115deg, var(--blue), var(--cyan-deep));

  /* Couleurs principales (aliases mis à jour) */
  --blue-dark: var(--ink);
  --blue-primary: var(--blue);
  --blue-medium: var(--cyan);
  --blue-light: #49B9D1;
  --blue-soft: #6EDADD;
  --blue-pastel: #DAE7EA;

  /* Couleurs accent */
  --accent: var(--cyan);
  --accent-light: #A8ECED;
  --accent-hover: var(--blue);
  --accent-dark: #37A6CA;

  /* Aliases pour compatibilité */
  --orange: var(--accent);
  --orange-light: var(--accent-light);
  --orange-hover: var(--accent-hover);

  /* Gris */
  --gray-dark: var(--muted);
  --gray-medium: #AFAFAF;
  --gray-light: #D7D7D7;
  --gray-ultra-light: var(--bg);
  --white: #FFFFFF;

  /* Typographie */
  --font-display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
  --font-primary: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
  --font-size-4xl: 3.25rem;
  --font-size-hero: 3.75rem;

  /* Espacements */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* Ombres */
  --shadow-sm: 0 1px 3px rgba(21, 21, 45, 0.08);
  --shadow-md: 0 4px 12px rgba(21, 21, 45, 0.1);
  --shadow-lg: 0 8px 30px rgba(21, 21, 45, 0.12);
  --shadow-xl: 0 16px 50px rgba(21, 21, 45, 0.15);

  /* Rayons */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 50%;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Largeurs */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1400px;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--blue-dark);
  background-color: var(--gray-ultra-light);
  overflow-x: hidden;
}

a {
  color: var(--blue-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--blue-medium);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

/* --- Container --- */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container-sm {
  max-width: var(--container-md);
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--blue-dark);
}

h1 {
  font-size: var(--font-size-hero);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--font-size-3xl);
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--font-size-xl);
}

h4 {
  font-size: var(--font-size-lg);
}

p {
  color: #4A4A6A;
  line-height: 1.7;
}

.text-gradient {
  background: linear-gradient(135deg, var(--blue-primary), var(--blue-medium));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-center { text-align: center; }
.text-muted { color: var(--gray-dark); }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.85rem 2rem;
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: 600;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  line-height: 1;
}

.btn-primary {
  background: var(--accent);
  color: var(--blue-dark);
  box-shadow: 0 4px 15px rgba(110, 218, 221, 0.35);
  font-weight: 700;
}

.btn-primary:hover {
  background: var(--accent-hover);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(73, 185, 209, 0.45);
}

.btn-secondary {
  background: transparent;
  color: var(--blue-primary);
  border: 2px solid var(--blue-primary);
}

.btn-secondary:hover {
  background: var(--blue-primary);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-white {
  background: var(--white);
  color: var(--blue-primary);
  box-shadow: var(--shadow-md);
}

.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: var(--blue-primary);
}

.btn-lg {
  padding: 1.1rem 2.5rem;
  font-size: var(--font-size-md);
}

.btn-sm {
  padding: 0.6rem 1.5rem;
  font-size: var(--font-size-sm);
}

/* --- Header & Navigation --- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(215, 215, 215, 0.5);
  transition: all var(--transition-base);
}

.header.scrolled {
  box-shadow: var(--shadow-md);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.logo img {
  height: 36px;
  width: auto;
}

.logo-text {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--blue-dark);
}

/* Le é orange du logo CF (en-tête et pied de page) */
.logo-e {
  font-style: normal;
  color: #F9893D;
}

.logo-text span {
  color: var(--accent-dark);
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  display: block;
  margin-top: 4px;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.nav-links {
  display: flex;
  gap: var(--space-lg);
}

.nav-links a {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: #4A4A6A;
  padding: var(--space-xs) 0;
  position: relative;
  transition: color var(--transition-fast);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width var(--transition-base);
  border-radius: 1px;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--blue-primary);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: var(--space-xs);
  background: none;
  border: none;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--blue-dark);
  transition: all var(--transition-base);
  border-radius: 1px;
}

.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* --- Hero Section --- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 88px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-primary) 50%, var(--blue-medium) 100%);
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 70%;
  height: 150%;
  background: radial-gradient(ellipse, rgba(110, 218, 221, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 50%;
  height: 100%;
  background: radial-gradient(ellipse, rgba(249, 137, 61, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4xl);
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-content {
  color: var(--white);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--blue-soft);
  margin-bottom: var(--space-xl);
  backdrop-filter: blur(8px);
}

.hero-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--orange);
  border-radius: var(--radius-full);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}

.hero h1 {
  color: var(--white);
  font-size: var(--font-size-hero);
  line-height: 1.08;
  margin-bottom: var(--space-lg);
}

.hero h1 .highlight {
  color: var(--orange);
}

.hero-subtitle {
  font-size: var(--font-size-lg);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: var(--space-2xl);
  max-width: 520px;
}

.hero-ctas {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.hero-image {
  position: relative;
  display: flex;
  justify-content: center;
}

.hero-portrait {
  width: 380px;
  height: 380px;
  border-radius: var(--radius-xl);
  object-fit: cover;
  object-position: center top;
  border: 4px solid rgba(255, 255, 255, 0.2);
  box-shadow: var(--shadow-xl);
}

.hero-logo-large {
  width: 320px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  animation: float 6s ease-in-out infinite;
}


@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}


/* --- Sections --- */
.section {
  padding: var(--space-5xl) 0;
}

.section-light {
  background: var(--gray-ultra-light);
}


.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-3xl);
}

.section-header .overline {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--accent-dark);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-sm);
}

.section-header h2 {
  margin-bottom: var(--space-md);
}

.section-header p {
  font-size: var(--font-size-md);
  color: var(--gray-dark);
}

/* --- Cards --- */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(215, 215, 215, 0.5);
  transition: all var(--transition-base);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--blue-pastel);
}

.card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-lg);
  font-size: 1.5rem;
}

.card-icon.blue-bg { background: var(--blue-pastel); color: var(--blue-primary); }
.card-icon.accent-bg { background: rgba(110, 218, 221, 0.15); color: var(--accent-dark); }
.card-icon.orange-bg { background: rgba(110, 218, 221, 0.15); color: var(--accent-dark); }
.card-icon.green-bg { background: rgba(110, 218, 221, 0.15); color: var(--blue-light); }

.card h3 {
  margin-bottom: var(--space-sm);
}

.card p {
  font-size: var(--font-size-sm);
}

/* Services grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

/* Grille 2 colonnes (situations vécues, avant/après, autres services) */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}

@media (max-width: 768px) {
  .pain-grid { grid-template-columns: 1fr; }
}

/* --- Stats / Chiffres --- */


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

.stat-number {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  color: var(--blue-primary);
  line-height: 1;
  margin-bottom: var(--space-xs);
}


.stat-label {
  font-size: var(--font-size-sm);
  color: var(--gray-dark);
  font-weight: 500;
}


/* --- Testimonial --- */
.testimonial {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-3xl);
  box-shadow: var(--shadow-md);
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.testimonial::before {
  content: '\201C';
  position: absolute;
  top: 20px;
  left: 30px;
  font-size: 5rem;
  color: var(--blue-pastel);
  font-family: Georgia, serif;
  line-height: 1;
}

.testimonial p {
  font-size: var(--font-size-lg);
  font-style: italic;
  color: #4A4A6A;
  margin-bottom: var(--space-lg);
  padding-left: var(--space-2xl);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-left: var(--space-2xl);
}

.testimonial-author strong {
  display: block;
  color: var(--blue-dark);
}

.testimonial-author span {
  font-size: var(--font-size-sm);
  color: var(--gray-dark);
}

/* --- CTA Section --- */
.cta-section {
  text-align: center;
  padding: var(--space-5xl) 0;
  background: linear-gradient(135deg, var(--blue-dark), var(--blue-primary));
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 150%;
  background: radial-gradient(ellipse, rgba(249, 137, 61, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.cta-section h2 {
  color: var(--white);
  margin-bottom: var(--space-md);
  position: relative;
}

.cta-section p {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-2xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* --- Footer : Apple Keynote Style --- */
.footer {
  background: var(--blue-dark);
  color: rgba(255, 255, 255, 0.7);
  padding: var(--space-5xl) 0 var(--space-xl);
}

.footer-top {
  text-align: center;
  padding-bottom: var(--space-4xl);
  margin-bottom: var(--space-3xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-logo-full {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.footer-logo-full img {
  height: 56px;
  width: auto;
}

.footer-logo-text { text-align: left; }
.footer-logo-nom {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--white);
}
.footer-logo-sous {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #AFAFAF;
}

/* Real tool logos */
.tools-marquee-real {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2xl);
  padding: var(--space-2xl) 0;
  max-width: 900px;
  margin: 0 auto;
}

.tool-item-real {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  transition: all var(--transition-base);
  opacity: 0.75;
}

.tool-item-real:hover {
  opacity: 1;
  transform: scale(1.08);
}

.tool-item-real img {
  height: 40px;
  width: 40px;
  object-fit: contain;
  border-radius: 8px;
}

.tool-item-real .tool-name {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--blue-dark);
  text-align: center;
}

@media (max-width: 768px) {
  .tools-marquee-real { gap: var(--space-xl); }
  .tool-item-real img { height: 28px; }
}

.footer-tagline {
  font-size: var(--font-size-md);
  color: rgba(255, 255, 255, 0.5);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3xl);
  margin-bottom: var(--space-3xl);
  text-align: center;
}

.footer-brand p {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--font-size-sm);
  margin-top: var(--space-md);
  max-width: 300px;
  line-height: 1.7;
}

.footer-brand img {
  height: 40px;
  filter: brightness(0) invert(1);
  margin-bottom: var(--space-sm);
}

.footer h4 {
  color: var(--white);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-lg);
}

.footer-links a {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--font-size-sm);
  padding: var(--space-xs) 0;
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--accent);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-xs);
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.5);
}

.footer-bottom a:hover {
  color: var(--accent);
}

.footer-social {
  display: flex;
  gap: var(--space-md);
}

.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  transition: all var(--transition-fast);
  font-size: var(--font-size-sm);
}

.footer-social a:hover {
  background: var(--accent);
  color: var(--blue-dark);
}

/* --- Form --- */
.form-group {
  margin-bottom: var(--space-lg);
}

.form-group label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--blue-dark);
  margin-bottom: var(--space-xs);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.85rem var(--space-md);
  border: 2px solid var(--gray-light);
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  color: var(--blue-dark);
  transition: border-color var(--transition-fast);
  background: var(--white);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--blue-medium);
  box-shadow: 0 0 0 4px rgba(55, 166, 202, 0.1);
}

.form-group textarea {
  min-height: 150px;
  resize: vertical;
}

/* --- Page Header (inner pages) --- */
.page-header {
  padding: calc(88px + var(--space-4xl)) 0 var(--space-3xl);
  background: linear-gradient(135deg, var(--blue-dark), var(--blue-primary));
  color: var(--white);
  text-align: center;
}

.page-header h1 {
  color: var(--white);
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-md);
}

.page-header p {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--font-size-lg);
  max-width: 600px;
  margin: 0 auto;
}

/* --- About Page : Apple Keynote Style --- */

/* Full-width statement sections */
.keynote-statement {
  padding: var(--space-5xl) 0;
  text-align: center;
}

.keynote-statement h2 {
  font-size: var(--font-size-4xl);
  max-width: 900px;
  margin: 0 auto var(--space-lg);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.keynote-statement p {
  font-size: var(--font-size-lg);
  max-width: 650px;
  margin: 0 auto;
  color: var(--gray-dark);
  line-height: 1.8;
}

.keynote-statement .highlight-word {
  color: var(--accent-dark);
}

/* Big number stats : keynote style */
.keynote-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
  padding: var(--space-4xl) 0;
  max-width: 900px;
  margin: 0 auto;
}

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

.keynote-stat .big-number {
  font-size: 4.5rem;
  font-weight: 800;
  color: var(--blue-primary);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-xs);
}

.keynote-stat .big-number span {
  color: var(--accent-dark);
}

.keynote-stat .stat-desc {
  font-size: var(--font-size-sm);
  color: var(--gray-dark);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Tool logos grid : keynote style */


/* Parcours : horizontal cards */
.parcours-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  max-width: 1000px;
  margin: 0 auto;
}

.parcours-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--accent);
  transition: all var(--transition-base);
}

.parcours-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.parcours-card .year {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--accent-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}

.parcours-card h3 {
  font-size: var(--font-size-md);
  margin-bottom: var(--space-xs);
}

.parcours-card .location {
  font-size: var(--font-size-sm);
  color: var(--gray-dark);
  margin-bottom: var(--space-sm);
}

.parcours-card p {
  font-size: var(--font-size-sm);
}

/* Certifications : minimal pills */
.certif-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  max-width: 800px;
  margin: 0 auto;
}

.certif-pill {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(215, 215, 215, 0.5);
  transition: all var(--transition-base);
}

.certif-pill:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.certif-pill .certif-year {
  font-weight: 800;
  color: var(--accent-dark);
  font-size: var(--font-size-sm);
}

.certif-pill .certif-name {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--blue-dark);
}

@media (max-width: 768px) {
  .keynote-statement h2 { font-size: var(--font-size-2xl); }
  .keynote-stats { grid-template-columns: 1fr; gap: var(--space-xl); }
  .keynote-stat .big-number { font-size: 3rem; }
  .parcours-grid { grid-template-columns: 1fr; }
}


.about-photo-wrapper {
  position: relative;
}

.about-photo-wrapper::after {
  content: '';
  position: absolute;
  bottom: -15px;
  right: -15px;
  width: 100%;
  height: 100%;
  border: 3px solid var(--blue-medium);
  border-radius: var(--radius-lg);
  z-index: -1;
}

/* Skills */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
}


/* Timeline */


.timeline-item {
  position: relative;
  margin-bottom: var(--space-2xl);
  padding-left: var(--space-xl);
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 6px;
  width: 14px;
  height: 14px;
  background: var(--blue-medium);
  border-radius: var(--radius-full);
  border: 3px solid var(--white);
  box-shadow: var(--shadow-sm);
}

.timeline-item .date {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--accent-dark);
  margin-bottom: var(--space-xs);
}

.timeline-item h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-xs);
}

.timeline-item .location {
  font-size: var(--font-size-sm);
  color: var(--gray-dark);
  margin-bottom: var(--space-sm);
}

/* --- Blog cards --- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.blog-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(215, 215, 215, 0.5);
  transition: all var(--transition-base);
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.blog-card-image {
  height: 200px;
  background: linear-gradient(135deg, var(--blue-primary), var(--blue-medium));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 2.5rem;
}

.blog-card-body {
  padding: var(--space-xl);
}

.blog-card-body .tag {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--blue-medium);
  background: var(--blue-pastel);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
}

.blog-card-body h3 {
  font-size: var(--font-size-md);
  margin-bottom: var(--space-sm);
}

.blog-card-body .date {
  font-size: var(--font-size-xs);
  color: var(--gray-dark);
}

/* --- Portfolio / Réalisations --- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}

.portfolio-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(215, 215, 215, 0.5);
  transition: all var(--transition-base);
}

.portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.portfolio-card-image {
  height: 240px;
  background: linear-gradient(135deg, var(--blue-primary), var(--blue-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 3rem;
  position: relative;
  overflow: hidden;
}

.portfolio-card-body {
  padding: var(--space-xl);
}

.portfolio-card-body .tags {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}

.portfolio-card-body .tags span {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--blue-primary);
  background: var(--blue-pastel);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

/* --- Contact Page --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-3xl);
}

.contact-info-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--gray-ultra-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.contact-info-card .icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--blue-pastel);
  color: var(--blue-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.contact-info-card h4 {
  font-size: var(--font-size-sm);
  margin-bottom: 2px;
}

.contact-info-card p {
  font-size: var(--font-size-sm);
  color: var(--gray-dark);
}

/* --- Utilities --- */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-md); }
.mb-2 { margin-bottom: var(--space-xl); }
.mb-3 { margin-bottom: var(--space-2xl); }
.mt-2 { margin-top: var(--space-xl); }
.mt-3 { margin-top: var(--space-2xl); }

/* --- Service Visual Blocks --- */
.service-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: var(--space-xl);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--white);
  transition: all var(--transition-base);
}

.service-block:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
}

.service-block.reverse {
  direction: rtl;
}

.service-block.reverse > * {
  direction: ltr;
}

.service-block-image {
  min-height: 350px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.service-block-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(21, 21, 45, 0.3), rgba(24, 93, 150, 0.15));
}

.service-block-image .service-number {
  position: absolute;
  top: var(--space-lg);
  left: var(--space-lg);
  width: 48px;
  height: 48px;
  background: var(--accent);
  color: var(--blue-dark);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--font-size-lg);
  z-index: 1;
  box-shadow: var(--shadow-md);
}

.service-block.reverse .service-block-image .service-number {
  left: auto;
  right: var(--space-lg);
}

.service-block-content {
  padding: var(--space-3xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.service-block-content .overline {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--accent-dark);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-sm);
}

.service-block-content h2 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-md);
}

.service-block-content p {
  margin-bottom: var(--space-lg);
}

.service-block-content ul {
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-xl);
}

.service-block-content ul li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 0.6rem;
  color: #4A4A6A;
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

.service-block-content ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent-dark);
  font-weight: 700;
}


@media (max-width: 768px) {
  .service-block,
  .service-block.reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  .service-block-image {
    min-height: 220px;
  }

  .service-block-content {
    padding: var(--space-xl);
  }

  .service-block.reverse .service-block-image .service-number {
    left: var(--space-lg);
    right: auto;
  }
}

/* --- Image Sections --- */
.image-banner {
  position: relative;
  height: 350px;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.image-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(21, 21, 45, 0.7), rgba(24, 93, 150, 0.5));
}

.image-banner-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--white);
}

.image-banner-content h2 {
  color: var(--white);
  font-size: var(--font-size-3xl);
  margin-bottom: var(--space-sm);
}

.image-banner-content p {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--font-size-lg);
}

/* Section with richer background */
.section-rich {
  background: linear-gradient(180deg, var(--gray-ultra-light) 0%, var(--blue-pastel) 50%, var(--gray-ultra-light) 100%);
}

/* Card with image header */
.card-with-image {
  overflow: hidden;
  padding: 0;
}

.card-with-image .card-image {
  height: 180px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.card-with-image .card-image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(transparent, var(--white));
}

.card-with-image .card-body {
  padding: var(--space-xl) var(--space-2xl) var(--space-2xl);
}

/* Photography equipment badge */
.equipment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.equipment-card {
  text-align: center;
  padding: var(--space-xl);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(215, 215, 215, 0.5);
  transition: all var(--transition-base);
}

.equipment-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.equipment-card .equip-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-md);
}

.equipment-card h4 {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-xs);
}

.equipment-card p {
  font-size: var(--font-size-xs);
  color: var(--gray-dark);
}

@media (max-width: 768px) {
  .equipment-grid { grid-template-columns: 1fr; }
  .image-banner { height: 250px; background-attachment: scroll; }
}

/* --- Scroll Reveal Animation --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Si la personne a demandé moins d'animations, les blocs sont là d'emblée. */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Bouton de remontée en haut de page (créé par main.js) --- */
.btn-remonter {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(120, 150, 255, 0.45);
  background: rgba(16, 26, 60, 0.92);
  color: #6EDADD;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  box-shadow: 0 6px 18px rgba(6, 11, 34, 0.5);
}
.btn-remonter.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.btn-remonter:hover {
  border-color: #6EDADD;
  color: #7FE3F0;
}
.btn-remonter:focus-visible {
  outline: 2px solid #6EDADD;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .btn-remonter { transition: none; transform: none; }
}

/* --- Skip to content (a11y) --- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--accent);
  color: var(--blue-dark);
  padding: var(--space-sm) var(--space-md);
  z-index: 10000;
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
}

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

@media (max-width: 1024px) {
  h1 { font-size: var(--font-size-4xl); }
  .hero h1 { font-size: var(--font-size-4xl); }

  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-2xl);
  }

  .hero-subtitle { margin: 0 auto var(--space-2xl); }
  .hero-ctas { justify-content: center; }
  .hero-image { order: -1; }
  .hero-portrait { width: 280px; height: 280px; }
  

  .services-grid { grid-template-columns: repeat(2, 1fr); }
  
  .footer-grid { grid-template-columns: 1fr 1fr; }
  
  .contact-grid { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root {
    --font-size-hero: 2.5rem;
    --font-size-4xl: 2.25rem;
    --font-size-3xl: 1.75rem;
  }

  .section { padding: var(--space-3xl) 0; }
  .container { padding: 0 var(--space-md); }

  /* Mobile nav */
  .nav-links {
    position: fixed;
    top: 88px;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    background: var(--white);
    padding: var(--space-xl);
    gap: 0;
    transform: translateX(100%);
    transition: transform var(--transition-base);
    z-index: 999;
  }

  .nav-links.open {
    transform: translateX(0);
  }

  .nav-links a {
    font-size: var(--font-size-lg);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--gray-light);
  }

  .nav-links a::after { display: none; }
  .menu-toggle { display: flex; }

  .nav .btn { display: none; }

  .hero { min-height: auto; padding: calc(72px + var(--space-2xl)) 0 var(--space-2xl); }
  .hero-portrait { width: 200px; height: 200px; }

  .services-grid { grid-template-columns: 1fr; }
  
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .blog-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero-ctas {
    flex-direction: column;
    width: 100%;
  }

  .hero-ctas .btn { width: 100%; }
  
}

/* ============================================
   RELOOKING 2026 : surcouche (typo display,
   boutons pill dégradés, accents, réassurance)
   ============================================ */

h1, h2, h3, .big-number, .keynote-statement h2 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

h1 { font-weight: 800; line-height: 1.08; }
h2 { font-weight: 800; }
h3 { font-weight: 700; }

/* Sur-titre : majuscules espacées + tiret dégradé */
.overline {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--blue);
}
.overline::before {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--grad);
}

/* Mot-clé : texte en dégradé + soulignement */
.highlight, .highlight-word {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  white-space: nowrap;
}

/* Boutons : pill + dégradé + flèche */
.btn {
  border-radius: 999px;
  font-weight: 700;
}
.btn-primary {
  background: var(--grad-text);
  color: var(--white);
  border: none;
  box-shadow: 0 10px 24px rgba(55, 166, 202, 0.28);
}
.btn-primary::after {
  content: "→";
  display: inline-block;
  margin-left: 0.5rem;
  transition: transform var(--transition-fast);
}
.btn-primary:hover {
  background: var(--grad);
  filter: brightness(1.07);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(55, 166, 202, 0.34);
}
.btn-primary:hover::after { transform: translateX(4px); }
.btn-white, .btn-secondary {
  border: 1.5px solid var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn-white:hover, .btn-secondary:hover {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

/* Lignes de réassurance avec coches */
.hero-checks {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: var(--space-xl);
}
.hero-checks li {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--muted);
  font-size: var(--font-size-md);
}
.hero-checks .check {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--grad);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
}

/* Sections sombres : bleu nuit profond */
.section-rich, .footer, .cta-section {
  background: var(--navy);
}
.section-rich h2, .section-rich h4 { color: var(--white); }
.section-rich p, .section-rich .section-header p { color: rgba(240, 246, 255, 0.72); }

/* Cartes : filet fin + coins doux */
.card, .portfolio-card, .equipment-card, .testimonial {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* Gros chiffres en dégradé */
.big-number {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-weight: 800;
}

/* Héros clair (style adaptalyo) */
.hero {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bg) 100%);
}
.hero::before, .hero::after { display: none; }
.hero h1 { color: var(--ink); }
.hero h1 .highlight {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-subtitle { color: var(--muted); }
.hero .overline { margin-bottom: var(--space-lg); }


/* Cartes sur fond sombre : style verre fumé */
.section-rich .equipment-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.section-rich .equipment-card h4 { color: var(--white); }
.section-rich .equipment-card p { color: rgba(240, 246, 255, 0.68); }
.section-rich .stat-desc { color: rgba(240, 246, 255, 0.72); }
.section-rich .overline { color: var(--cyan); }

/* Utilitaire accessibilité : visible uniquement des lecteurs d'écran */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   RETOURS CYRILLE 16/07 : contraste & rythme
   ============================================ */

/* Alternance franche : blanc / bleuté / bleu nuit */
body { background-color: var(--white); }
.section-light { background: #EDF2FB; }
p { color: #3D465C; }

/* Les phrases "keynote" passent sur bleu nuit : fini le grand vide gris clair */
.keynote-statement {
  background: var(--navy);
  padding: var(--space-4xl) 0;
}
.keynote-statement h2 { color: var(--white); }
.keynote-statement .highlight-word {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================
   FIGURE ANIMÉE DU HÉROS (façon adaptalyo)
   ============================================ */
.hero-hub {
  position: relative;
  width: min(480px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
}
.hub-ring {
  position: absolute;
  inset: 14%;
  border: 1.5px solid rgba(55, 166, 202, 0.16);
  border-radius: 50%;
  animation: hubpulse 4s ease-in-out infinite;
}
.hub-ring.r2 { inset: 26%; animation-delay: 2s; }
@keyframes hubpulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.03); opacity: 0.6; }
}
.hub-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hub-lines path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 11;
  opacity: 0.55;
  animation: hubdash 1.4s linear infinite;
}
@keyframes hubdash {
  to { stroke-dashoffset: -16; }
}
.hub-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  z-index: 2;
}
.hub-node .icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}
.hub-node span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.hub-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: var(--navy);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 1.2rem 1.5rem;
  min-width: 200px;
  max-width: 216px;
  transition: background-color 0.6s ease;
  text-align: center;
  box-shadow: 0 24px 60px rgba(6, 11, 34, 0.35);
}
.hub-center strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
}
.hub-center small {
  display: block;
  margin-top: 0.3rem;
  color: rgba(240, 246, 255, 0.65);
  font-size: 0.82rem;
}
.hub-center.hub-swap { animation: hubfade 0.5s ease; }
@keyframes hubfade {
  0% { opacity: 0.2; transform: translate(-50%, -50%) scale(0.97); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (max-width: 968px) {
  .hero-hub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-lines path, .hub-ring, .hub-center.hub-swap { animation: none; }
}

/* ============================================
   PAGES ARTICLES (blog)
   ============================================ */
.article-meta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  color: rgba(240, 246, 255, 0.78);
  font-size: 0.9rem;
  margin-top: var(--space-md);
}
.article-body {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg) var(--space-2xl);
}
.article-body h2 {
  margin: var(--space-2xl) 0 var(--space-md);
  font-size: var(--font-size-xl);
}
.article-body p { margin-bottom: var(--space-md); }
.article-body ul {
  margin: 0 0 var(--space-md) 1.2rem;
  list-style: disc;
  color: #3D465C;
}
.article-body li { margin-bottom: 0.4rem; line-height: 1.7; }
.article-body strong { color: var(--ink); }
.article-body .encart {
  background: #EDF2FB;
  border-left: 4px solid var(--blue);
  padding: 1rem 1.25rem;
  border-radius: 0 10px 10px 0;
  margin: var(--space-lg) 0;
}
.article-body .encart p { margin: 0; }

.article-cta { text-align: center; margin: var(--space-xl) 0 var(--space-3xl); }
.blog-card-body .lire {
  display: inline-block;
  margin-top: 0.6rem;
  font-weight: 700;
  color: var(--blue);
}
.blog-card-body h3 a { color: inherit; }
.blog-card-body h3 a:hover { color: var(--blue); }

/* ============================================
   CORRECTIFS MOBILE (vérification 16/07/2026)
   ============================================ */
@media (max-width: 768px) {
  /* Le backdrop-filter du header « capture » les éléments fixed :
     le panneau du menu doit définir sa hauteur lui-même */
  .nav-links {
    height: calc(100vh - 88px);
    height: calc(100dvh - 88px);
    overflow-y: auto;
  }
  /* Sur-titre : sans tiret et bien centré quand il passe sur 2 lignes */
  .overline { justify-content: center; text-align: center; }
  .overline::before { display: none; }
  /* Liens du menu : pleine largeur, séparateurs réguliers */
  .nav-links li { width: 100%; }
  .nav-links a { display: block; width: 100%; }
  /* Les mots-clés en dégradé peuvent passer à la ligne sur petit écran */
  .highlight, .highlight-word { white-space: normal; }
}

/* ============================================
   THÈME SOMBRE PAR DÉFAUT (18/07/2026)
   ============================================ */
body { background-color: var(--navy); color: var(--ink); }
p { color: #C3CCE2; }
.text-muted, .stat-desc { color: var(--muted); }

/* Header : verre clair sur thème nuit (harmonisation 07/2026, demande Cyrille)
   Fond blanc translucide + flou conservé, encre sombre, accent lisible (AA) */
.header {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(16, 23, 58, 0.08);
}
.logo-text { color: #10173A; }
.logo-text span { color: #185D96; }
.nav-links a { color: #3D465C; }
.nav-links a:hover, .nav-links a.active { color: #185D96; }
.nav-links a::after { background: #185D96; }
.menu-toggle span { background: #10173A; }
@media (max-width: 768px) {
  .nav-links { background: #F6F8FC; }
  .nav-links a { border-bottom: 1px solid #DFE7F4; color: #1B2340; }
}

/* Héros sombre */
.hero { background: linear-gradient(180deg, var(--navy) 0%, var(--bg) 100%); }
.hero-checks li { color: #C3CCE2; }

/* Mots-clés et gros chiffres : dégradé vif (lisible sur nuit) */
.highlight, .highlight-word, .hero h1 .highlight, .big-number {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.btn-primary { background: var(--grad); color: var(--navy); font-weight: 800; }
.btn-primary:hover { background: var(--grad); }
.btn-white, .btn-secondary {
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  color: var(--ink);
  background: transparent;
}
.btn-white:hover, .btn-secondary:hover { background: var(--ink); color: var(--navy); border-color: var(--ink); }

/* Sur-titres : cyan, plus lisible que le bleu sur fond nuit */
.overline { color: var(--cyan); }

/* Sections alternées */
.section-light { background: var(--bg); }
.keynote-statement { background: #04081A; }
.section-rich, .footer, .cta-section { background: #04081A; }

/* Toutes les cartes : surface nuit + filet */
.card, .testimonial, .parcours-card, .blog-card, .portfolio-card,
.equipment-card, .contact-info-card, .certif-pill, .hero-float-card {
  background: var(--surface);
  border: 1px solid var(--line);
}
.card h3, .card h4, .blog-card h3, .portfolio-card h3 { color: var(--ink); }
.tags span, .tag, .blog-card-body .tag {
  background: rgba(55, 166, 202, 0.18);
  color: #9DC4FF;
}

/* Icônes des cartes solutions : chips en dégradé, blanches (demande Cyrille) */
.card-icon, .card-icon.blue-bg, .card-icon.accent-bg, .card-icon.green-bg {
  background: var(--grad);
  color: var(--white);
}

/* Formulaire */
.form-group input, .form-group textarea, .form-group select {
  background: #0C1538;
  border: 2px solid var(--line);
  color: var(--ink);
}
.form-group input::placeholder, .form-group textarea::placeholder { color: #6E7A9E; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(110, 218, 221, 0.15);
}
.form-group label { color: var(--ink); }

/* Figure animée.
   Contraste renforcé (demande Cyrille 09/08) : sur le fond nuit, les pastilles
   couleur carte, les cercles à 18 % et les pointillés bleu foncé se fondaient
   dans le décor. */
.hub-node .icon {
  background: #16234E;
  border: 1px solid rgba(120, 150, 255, 0.45);
  color: #6EDADD;
  box-shadow: 0 0 18px rgba(110, 218, 221, 0.18);
}
.hub-node span { color: var(--ink); text-shadow: 0 1px 8px rgba(6, 11, 34, 0.9); }
.hub-ring { border-color: rgba(120, 150, 255, 0.38); }
.hub-ring.r2 { border-color: rgba(110, 218, 221, 0.28); }
.hub-center { border: 1px solid rgba(255, 255, 255, 0.22); }
.hub-lines path { stroke: #5B8CFF; opacity: 0.9; }

/* Articles */
.article-body .encart { background: #0F1A40; }
.article-body ul { color: #C3CCE2; }

/* Bloc pastel (contact) */
.card[style*="blue-pastel"] { background: var(--surface) !important; }

/* Témoignage lisible sur fond nuit */
.testimonial p { color: #C3CCE2; }
.testimonial cite, .testimonial .author { color: var(--muted); }
/* Bloc « Premier échange gratuit » : titre en cyan (plus lisible) */
.card h4[style*="blue-primary"] { color: var(--cyan) !important; }

/* Logos outils : pastilles blanches pour rester lisibles sur fond nuit */
.tool-item-real img {
  background: var(--white);
  padding: 7px;
  border-radius: 12px;
  width: 54px;
  height: 54px;
  object-fit: contain;
}

/* Questionnaires conditionnels du formulaire de contact */
.quiz-block {
  display: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  background: rgba(55, 166, 202, 0.07);
}
.quiz-block.quiz-open { display: block; }
.quiz-block legend {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--cyan);
  padding: 0 var(--space-xs);
}

/* Note d'intention des questionnaires */
.quiz-note {
  font-size: var(--font-size-sm);
  color: var(--muted);
  margin: 0.25rem 0 var(--space-md);
}

/* ============================================
   FAQ (accordéon) + menu actif renforcé
   ============================================ */
.faq-list { display: flex; flex-direction: column; gap: var(--space-md); }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-md);
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.6rem;
  line-height: 1;
  color: var(--cyan);
  flex: none;
  transition: transform var(--transition-fast);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--cyan); }
.faq-item p { padding: 0 1.4rem 1.2rem; margin: 0; }

.nav-links a.active { font-weight: 700; }

/* ============================================
   CORRECTIFS AUDIT SERVANE 19/07 (post-sombre)
   ============================================ */
/* C1 : bandeaux de titre des pages intérieures : retour en nuit */
.page-header { background: linear-gradient(180deg, var(--navy) 0%, var(--bg) 100%); }

/* C2 : blocs services en surface nuit + listes lisibles */
.service-block { background: var(--surface); border: 1px solid var(--line); }
.service-block-content ul li { color: #C3CCE2; }

/* I4 : liens lisibles sur fond nuit */
a { color: #9DC4FF; }
a:hover { color: var(--cyan); }
.blog-card-body .lire { color: #9DC4FF; }

/* I5 : textes sur fond cyan : encre nuit */
.skip-link { color: var(--navy); }
.service-block-image .service-number { color: var(--navy); }
.footer-social a:hover { color: var(--navy); }

/* Mineurs : confirmation d'envoi, placeholders, sous-texte du hub, bouton */
.form-success { text-align: center; padding: var(--space-2xl); }
.form-group input::placeholder, .form-group textarea::placeholder { color: #7E89AC; }
.hub-center small { color: rgba(240, 246, 255, 0.85); }
.btn-primary { background: linear-gradient(115deg, #37A6CA, var(--cyan)); }
.btn-primary:hover { background: linear-gradient(115deg, #37A6CA, var(--cyan)); }

/* 769-968px : la colonne vide du héros disparaît */
@media (min-width: 769px) and (max-width: 968px) {
  .hero-image { display: none; }
}

/* Menu actif : règle consolidée (couleur + gras + soulignement natif)
   Accent foncé lisible sur le bandeau clair (harmonisation 07/2026) */
.nav-links a.active {
  color: #185D96;
  font-weight: 700;
  border-bottom: 2px solid #185D96;
}

/* Pictogrammes SVG inline (famille Lucide/Feather) : remplacement des emojis */
.hub-node .icon { color: var(--cyan); }
.hub-node .icon svg { width: 24px; height: 24px; }
.card-icon svg { width: 26px; height: 26px; }
.blog-card-image svg { width: 44px; height: 44px; }
.contact-info-card .icon svg { width: 22px; height: 22px; }

/* ==================== MAQUETTES DES PAGES CAS D'USAGE (cas/) ==================== */
.mockup-wrap { margin: var(--space-xl) 0 var(--space-md); }
.mockup-screen {
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.mockup-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.65rem var(--space-md);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.mockup-dots { display: flex; gap: 6px; }
.mockup-dots span { width: 10px; height: 10px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.18); }
.mockup-topbar-title { font-size: var(--font-size-xs); color: var(--muted); margin-left: var(--space-xs); letter-spacing: 0.02em; }
.mockup-body { padding: var(--space-lg); }
.mockup-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-md); }
.mockup-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.mockup-tile-value { font-family: var(--font-display); font-size: var(--font-size-xl); font-weight: 800; color: var(--ink); line-height: 1.2; }
.mockup-tile-label { font-size: var(--font-size-xs); color: var(--muted); margin-top: 4px; line-height: 1.4; }
.mockup-tile-accent { border-color: rgba(110, 218, 221, 0.35); }
.mockup-tile-accent .mockup-tile-value { color: var(--cyan); }
.mockup-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.mockup-list-title {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--line);
}
.mockup-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--line);
  font-size: var(--font-size-sm);
  color: var(--ink);
}
.mockup-list-item:last-child { border-bottom: none; }
.mockup-badge {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.mockup-badge-ok { color: #7BE0C3; border-color: rgba(123, 224, 195, 0.4); }
.mockup-badge-wait { color: var(--cyan); border-color: rgba(110, 218, 221, 0.4); }
.mockup-caption { text-align: center; font-size: var(--font-size-xs); color: var(--muted); margin-top: var(--space-sm); }
.mockup-honesty { font-size: var(--font-size-sm); color: var(--muted); border-left: 3px solid var(--line); padding-left: var(--space-md); margin: var(--space-xl) 0; }
.mockup-crossnav { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-md); margin: var(--space-lg) 0 var(--space-2xl); }
.mockup-crossnav a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.mockup-crossnav a:hover { border-color: var(--cyan); transform: translateY(-2px); }
.mockup-crossnav strong { display: block; font-family: var(--font-display); margin-bottom: 2px; }
.mockup-crossnav span { font-size: var(--font-size-sm); color: var(--muted); }

/* ============================================
   FONDS CLAIRS « RESPIRATION » (demande Cyrille, 07/2026)
   Sections blanc cassé qui tranchent avec le thème nuit.
   Contrastes vérifiés : textes >= AA sur #F6F8FC.
   ============================================ */
.section-white {
  background: #F6F8FC;
  color: #1B2340;
}
.section-white h2,
.section-white h3,
.section-white h4 { color: #10173A; }
.section-white p { color: #3D465C; }
.section-white .text-muted { color: #4A5471; }
.section-white .section-header p { color: #4A5471; }

/* Sur-titre et liens : accent foncé lisible sur clair */
.section-white .overline { color: #185D96; }
.section-white a { color: #1D4ED8; }
.section-white a:hover { color: #185D96; }

/* Cartes blanches : filet froid + ombre douce */
.section-white .card,
.section-white .testimonial {
  background: #FFFFFF;
  border: 1px solid #DFE7F4;
  box-shadow: 0 10px 30px rgba(15, 35, 85, 0.08);
}
.section-white .card h3,
.section-white .card h4 { color: #10173A; }
.section-white .card p { color: #3D465C; }

/* Témoignage posé sur fond clair */
.section-white .testimonial p { color: #3D465C; }
.section-white .testimonial::before { color: #D6E2F7; }
.section-white .testimonial-author strong { color: #10173A; }
.section-white .testimonial-author span { color: #4A5471; }

/* Gros chiffres : dégradé assombri (lisible sur clair) */
.section-white .big-number {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
}
.section-white .stat-desc { color: #4A5471; }

/* Badges et étiquettes éventuels sur fond clair */
.section-white .tag,
.section-white .tags span {
  background: rgba(55, 166, 202, 0.10);
  color: #1D4ED8;
}

/* Bandeau « maquette posée sur papier » (pages cas/) :
   panneau clair, la maquette elle-même reste sombre à l'intérieur */
.mockup-band {
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  margin: var(--space-2xl) 0;
}
.article-body .mockup-band h2 { margin: 0 0 var(--space-md); }
.mockup-band .mockup-wrap { margin: 0; }
.section-white .mockup-caption { color: #4A5471; }
@media (max-width: 768px) {
  .mockup-band { padding: var(--space-lg) var(--space-md); }
}

/* ============================================
   PERSONAS V2 (08/2026) : grille 4 situations types
   et avant/après photo du cas Mehdi
   ============================================ */

/* Grille des situations types à 4 cartes : 2 x 2 sur desktop
   pour éviter la ligne de 3 + carte orpheline */
.usages-grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}
@media (max-width: 768px) {
  .usages-grid-4 { grid-template-columns: 1fr; }
}

/* Avant/après stylisé (cas Mehdi) : aplats et dégradés CSS,
   aucune vraie photo, illustration volontairement schématique */
.ba-panels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.ba-panel { margin: 0; }
.ba-photo {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
}
.ba-sky { position: absolute; inset: 0 0 22% 0; }
.ba-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; }
.ba-house {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 22%;
  height: 48%;
}
.ba-roof {
  height: 34%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.ba-wall {
  height: 66%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10%;
}
.ba-window, .ba-door { display: block; }
.ba-window { width: 16%; height: 38%; border-radius: 2px; }
.ba-door { width: 14%; height: 62%; border-radius: 2px 2px 0 0; align-self: flex-end; }

/* Version « photo d'origine » : ciel gris, ensemble terne et sombre */
.ba-photo-before .ba-sky { background: linear-gradient(180deg, #8E959D 0%, #A9AEB4 100%); }
.ba-photo-before .ba-ground { background: #6E7468; }
.ba-photo-before .ba-roof { background: #4A4F55; }
.ba-photo-before .ba-wall { background: #9A958C; }
.ba-photo-before .ba-window { background: #5C6167; }
.ba-photo-before .ba-door { background: #55504A; }

/* Version « professionnalisée » : ciel dégagé, façade lumineuse */
.ba-photo-after .ba-sky { background: linear-gradient(180deg, #4BA3DE 0%, #A8D8F0 100%); }
.ba-photo-after .ba-ground { background: #7FB069; }
.ba-photo-after .ba-roof { background: #8A5A3B; }
.ba-photo-after .ba-wall { background: #F2EAD9; }
.ba-photo-after .ba-window { background: #BFE3F5; }
.ba-photo-after .ba-door { background: #7A4A2B; }

.ba-label {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--muted);
  margin-top: var(--space-xs);
}
.section-white .ba-label { color: #4A5471; }
@media (max-width: 520px) {
  .ba-panels { grid-template-columns: 1fr; }
}

/* ============================================
   HARMONISATION 07/2026 : respirations claires
   étendues (blog, articles, FAQ, contact, légal,
   parcours). Mêmes teintes que .section-white,
   contrastes AA vérifiés sur #F6F8FC / #FFFFFF.
   ============================================ */

/* Textes génériques posés sur fond clair */
.section-white strong { color: #10173A; }
.section-white ul { color: #3D465C; }
.section-white .encart { background: #EDF2FB; }

/* Bloc-titre keynote inséré dans une section claire : il devient transparent */
.section-white .keynote-statement { background: transparent; }
.section-white .keynote-statement h2 { color: #10173A; }
.section-white .keynote-statement p { color: #4A5471; }
.section-white .keynote-statement .highlight-word {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Cartes supplémentaires sur fond clair : parcours, certifs, blog, FAQ */
.section-white .parcours-card,
.section-white .certif-pill,
.section-white .blog-card,
.section-white .faq-item {
  background: #FFFFFF;
  border: 1px solid #DFE7F4;
  box-shadow: 0 10px 30px rgba(15, 35, 85, 0.08);
}
.section-white .parcours-card { border-left: 4px solid #37A6CA; }
.section-white .parcours-card h3,
.section-white .blog-card h3,
.section-white .certif-pill .certif-name { color: #10173A; }
.section-white .parcours-card .year,
.section-white .certif-pill .certif-year { color: #185D96; }
.section-white .parcours-card .location { color: #4A5471; }
.section-white .blog-card-body .lire { color: #1D4ED8; }
.section-white .blog-card-body .lire:hover { color: #185D96; }

/* FAQ sur fond clair */
.section-white .faq-item summary { color: #10173A; }
.section-white .faq-item summary::after { color: #185D96; }
.section-white .faq-item summary:hover { color: #185D96; }

/* Formulaire posé sur fond clair (page contact) */
.section-white .form-group label { color: #10173A; }
.section-white .form-group input,
.section-white .form-group textarea,
.section-white .form-group select {
  background: #FFFFFF;
  border: 2px solid #DFE7F4;
  color: #10173A;
}
.section-white .form-group input::placeholder,
.section-white .form-group textarea::placeholder { color: #5A6784; }
.section-white .form-group input:focus,
.section-white .form-group textarea:focus,
.section-white .form-group select:focus {
  border-color: #37A6CA;
  box-shadow: 0 0 0 4px rgba(24, 93, 150, 0.15);
}
.section-white .quiz-block {
  background: rgba(55, 166, 202, 0.06);
  border-color: #DFE7F4;
}
.section-white .quiz-block legend { color: #185D96; }
.section-white .quiz-note { color: #4A5471; }
.section-white .form-success h3 { color: #10173A; }

/* Cartes d'information de contact sur fond clair */
.section-white .contact-info-card {
  background: #FFFFFF;
  border: 1px solid #DFE7F4;
}
.section-white .contact-info-card h4 { color: #10173A; }
.section-white .contact-info-card p { color: #4A5471; }
.section-white .card[style*="blue-pastel"] { background: #EDF2FB !important; }
.section-white .card h4[style*="blue-primary"] { color: #185D96 !important; }

/* Avant/après réel (page Mehdi) : vraies photos à la place du croquis */
.ba-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}

/* Intertitre entre les deux avant/après de la page Mehdi */
.ba-second-title {
  margin: var(--space-xl) 0 var(--space-md);
  font-size: var(--font-size-sm);
}

/* Lisibilité dans l'écran sombre de la maquette (page Mehdi) : légendes et intertitre en clair */
.mockup-screen .ba-label { color: #C7D0E8; }
.mockup-screen .ba-second-title { color: #A7B1CC; }
.mockup-screen .ba-second-title strong { color: #EEF2FF; }

/* ============================================
   AJOUTS AUDIT 07/2026 (accessibilité et nav)
   ============================================ */

/* Contenu visible même si l'utilisateur préfère réduire les animations */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Bouton « Échange gratuit » : visible dans le menu mobile déplié */
.nav-cta-mobile { display: none; }
@media (max-width: 768px) {
  .nav-cta-mobile { display: block; }
  .nav-links .nav-cta-mobile { border-bottom: none; padding-top: var(--space-lg); }
  .nav-links .nav-cta-mobile a.btn {
    display: inline-flex;
    width: auto;
    padding: 0.6rem 1.5rem;
    font-size: var(--font-size-sm);
    border-bottom: none;
    color: var(--white);
  }
}

/* « Paris, France » au footer : simple texte, même rendu que les liens */
.footer-links span {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--font-size-sm);
  padding: var(--space-xs) 0;
}

/* Contraste AA des chips de tags sur fond clair (mesuré 4,09:1, cible 4,5:1 minimum) */
.portfolio-card-body .tags span { color: #1D4ED8; }

/* ============================================
   REPÈRES DE PRIX (mécanique validée 25/07/2026)
   ============================================ */

.price-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm) var(--space-xl);
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
}

.price-label {
  font-weight: 600;
  color: var(--ink);
}

.price-value {
  color: var(--muted);
}

.price-value s {
  text-decoration-thickness: 2px;
  margin-right: var(--space-xs);
}

.price-offer {
  color: var(--accent-light);
  font-weight: 700;
}

.price-disclaimer {
  margin-top: var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--muted);
  text-align: center;
}

/* Texte réservé aux lecteurs d'écran (annonce du prix barré) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   BADGES DE PREUVE : projet réel contre situation type
   Ajoutés le 28/07/2026 : l'avertissement « prénoms fictifs » vivait en bas de
   section et en petit, si bien que les vrais projets se noyaient dans les
   illustrations. Le badge le dit avant même la lecture du titre.
   ========================================================================== */
.proof-badge {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  margin-bottom: var(--space-sm);
  border: 1px solid transparent;
}
.proof-badge--real {
  color: var(--cyan);
  background: rgba(110, 218, 221, 0.12);
  border-color: rgba(110, 218, 221, 0.35);
}
.proof-badge--type {
  color: var(--muted);
  background: rgba(167, 177, 204, 0.10);
  border-color: rgba(167, 177, 204, 0.28);
}

/* ==========================================================================
   PAGES DE CAS DETAILLEES (07/08/2026)
   Visuel de preuve dans un article : une image au format A4 occuperait toute
   la largeur du texte. On la contraint et on la centre, avec sa legende.
   ========================================================================== */
.cas-figure {
  max-width: 400px;
  margin: var(--space-xl) auto;
}
.cas-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--white);
}
.cas-figure figcaption {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--muted);
  margin-top: var(--space-sm);
}

/* ==========================================================================
   FICHES DE PROJET (dossier cas/) - 08/08/2026
   Demande Cyrille : « je trouve cela trop terne, les titres ne se voient pas
   trop, ça me parait trop sombre » + « voir pour agrandir l'illustration ».
   Tout est prefixe .cas-article / .cas-figure pour ne rien casser ailleurs.
   Aucune couleur hors charte (nuit #060B22, sections #0A1130, cartes #101A3C,
   texte #EEF2FF, secondaire #A7B1CC, accents #37A6CA et #6EDADD).
   ========================================================================== */

/* --- Titres de section : etiquette visible avec pastille et icone --- */
.article-body.cas-article h2 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.75rem);
  line-height: 1.25;
  font-weight: 700;
  color: #FFFFFF;
  background: linear-gradient(90deg, rgba(55, 166, 202, 0.30) 0%, rgba(110, 218, 221, 0.12) 55%, rgba(110, 218, 221, 0) 100%);
  border-left: 4px solid var(--cyan);
  border-radius: 0 12px 12px 0;
  padding: 0.7rem 1.1rem 0.7rem 1rem;
  margin: var(--space-2xl) 0 var(--space-lg);
  scroll-margin-top: 90px;
}

.article-body.cas-article h2::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background-color: var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 5 16 12 9 19'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px 17px;
  box-shadow: 0 0 0 1px rgba(110, 218, 221, 0.55);
}

/* --- Corps de texte : un cran plus clair pour sortir du gris --- */
.article-body.cas-article p,
.article-body.cas-article li {
  color: #DBE2F4;
}
.article-body.cas-article ul { color: #DBE2F4; }
.article-body.cas-article ul li::marker { color: var(--cyan); }
.article-body.cas-article strong { color: #FFFFFF; }
.article-body.cas-article .encart {
  background: #0F1A40;
  border-left-color: var(--cyan);
}
.article-body.cas-article .encart p { color: #EEF2FF; }
.article-body.cas-article .mockup-honesty {
  color: #C6CFE6;
  border-left-color: rgba(110, 218, 221, 0.45);
}
.article-body.cas-article .cas-figure figcaption { color: #B7C1DA; }

/* --- Illustrations plus grandes --- */
/* Cas general (image en hauteur, comme le menu A4) : simplement plus large. */
.article-body.cas-article .cas-figure {
  max-width: 500px;
  margin: var(--space-2xl) auto;
}
.article-body.cas-article .cas-figure img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

/* Illustrations en largeur : elles debordent la colonne de texte. */
.article-body.cas-article .cas-figure--wide {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
@media (min-width: 900px) {
  .article-body.cas-article .cas-figure--wide { margin-inline: -90px; }
}
@media (min-width: 1200px) {
  .article-body.cas-article .cas-figure--wide { margin-inline: -180px; }
}

/* ==========================================================================
   SOBRIÉTÉ 2026-09 : on enlève le vernis
   Audit du 12/09/2026 : le fond du site est humain, l'emballage sentait le
   gabarit (dégradés sur le texte, boutons pilule avec flèche, chips lumineuses,
   cartes qui se soulèvent, blocs qui apparaissent au défilement, hub animé).
   Cette surcouche est volontairement placée en fin de fichier : à spécificité
   égale, elle gagne. Là où une règle plus haute était plus spécifique, le
   sélecteur est répété ici avec la même spécificité.
   Charte : fond nuit conservé, cyan #6EDADD uni (charte Cyrille Fourré Consulting, logo CF du 08/10/2026), jamais de dégradé, jamais de vert.
   ========================================================================== */

/* --- Texte : plus aucun dégradé, blanc pur ou cyan uni --- */
.highlight, .highlight-word,
.hero h1 .highlight,
.keynote-statement .highlight-word,
.section-white .keynote-statement .highlight-word {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  color: #FFFFFF;
  white-space: normal;
}
.hero h1 .highlight { color: var(--cyan); }
.section-white .keynote-statement .highlight-word,
.section-white .highlight-word { color: #10173A; }

.big-number,
.keynote-stat .big-number,
.section-white .big-number {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  color: var(--cyan) !important;
}
.keynote-stat .big-number span { color: var(--cyan); }

/* --- Boutons : aplat cyan, coins 6 px, sans flèche, sans ombre, sans saut --- */
.btn {
  border-radius: 6px;
  box-shadow: none;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.btn-primary,
.btn-primary:hover {
  background: var(--cyan);
  color: var(--navy);
  border: 1px solid var(--cyan);
  box-shadow: none;
  transform: none;
  filter: none;
}
.btn-primary:hover { background: #49B9D1; border-color: #49B9D1; }
.btn-primary::after { content: none; }
.nav-links .nav-cta-mobile a.btn { color: var(--navy); }
.btn-white, .btn-secondary {
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: var(--ink);
  background: transparent;
  box-shadow: none;
}
.btn-white:hover, .btn-secondary:hover {
  background: transparent;
  color: var(--cyan);
  border-color: var(--cyan);
  transform: none;
  box-shadow: none;
}
.section-white .btn-white, .section-white .btn-secondary {
  border-color: #10173A;
  color: #10173A;
}
.section-white .btn-white:hover, .section-white .btn-secondary:hover {
  color: #185D96;
  border-color: #185D96;
}

/* --- Sur-titres et coches : cyan uni, sans lueur --- */
.overline::before { background: var(--cyan); }
.hero-checks .check {
  background: var(--cyan);
  color: var(--navy);
  box-shadow: none;
  border-radius: 6px;
}

/* --- Plus d'apparition au défilement : tout est là au chargement --- */
.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* --- Cartes : plus rien ne se soulève. Sur les cartes-liens, seul le filet change --- */
.card, .card:hover {
  transform: none;
  box-shadow: none;
}
.card:hover { border-color: var(--line); }
.section-white .card, .section-white .card:hover { box-shadow: none; border-color: #DFE7F4; }
.portfolio-card:hover, .blog-card:hover, .equipment-card:hover, .service-block:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}
.portfolio-card:hover, .blog-card:hover { border-color: rgba(110, 218, 221, 0.6); }
.service-block { box-shadow: none; }
.service-block:hover { box-shadow: none; }
.mockup-crossnav a:hover { transform: none; }

/* --- Icônes dans des carrés : retirées du HTML ; filet de sécurité si une traîne --- */
.card-icon { display: none; }

/* --- Héros : la maquette du tableau de bord dans un cadre d'écran sobre --- */
.hero-screen {
  width: min(560px, 100%);
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  overflow: hidden;
}
.hero-screen img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 968px) {
  .hero-image { display: none; }
}

/* --- Accueil : les quatre douleurs en colonne de citations, sans carte --- */
.pain-quotes {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}
.pain-quote {
  position: relative;
  padding-left: 3.25rem;
  margin: 0;
}
.pain-quote::before {
  content: "«";
  position: absolute;
  left: 0;
  top: -0.35rem;
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 1;
  font-weight: 800;
  color: var(--cyan);
}
.pain-quote-text {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 var(--space-sm);
}
.pain-quote-note {
  font-size: var(--font-size-sm);
  color: var(--muted);
  margin: 0;
}

/* --- Accueil : les trois étapes en frise numérotée, alignée à gauche --- */
.steps {
  list-style: none;
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
}
.steps li {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-2xl);
}
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: 0;
  width: 1px;
  background: #CBD5E6;
}
.steps li:last-child::before { display: none; }
.step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #10173A;
  color: #10173A;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  position: relative;
  z-index: 1;
}
.steps h3 { margin: 0.55rem 0 var(--space-xs); font-size: var(--font-size-lg); }
.steps p { margin: 0; }

/* --- Accueil : les autres services en simple liste de liens --- */
.link-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-2xl);
  padding: 0;
  margin: 0;
}
.link-row a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-lg);
  color: var(--ink);
  border-bottom: 2px solid var(--cyan);
  padding-bottom: 2px;
}
.link-row a:hover { color: var(--cyan); }

/* --- À propos : la photo à côté du premier texte --- */
.about-hero .about-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) 1fr;
  gap: var(--space-3xl);
  align-items: center;
  text-align: left;
}
.about-hero .about-hero-grid h1,
.about-hero .about-hero-grid p { margin-left: 0; margin-right: 0; }
.about-hero figure { margin: 0; }
.about-hero img {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--line);
}
@media (max-width: 768px) {
  .about-hero .about-hero-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .about-hero img { max-width: 100%; }
}

/* --- À propos : quatre repères prouvés, chacun relié à sa fiche --- */
.facts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
  max-width: 1040px;
  margin: 0 auto;
  padding: 0;
}
.facts li { text-align: left; }
.facts .fact-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.25rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cyan);
  margin-bottom: var(--space-sm);
}
.facts .fact-number small {
  font-size: 1.25rem;
  font-weight: 700;
  margin-left: 0.25rem;
}
.facts p { margin: 0 0 var(--space-xs); color: #C3CCE2; font-size: var(--font-size-sm); line-height: 1.5; }
.facts a { font-size: var(--font-size-xs); }
@media (max-width: 968px) {
  .facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .facts { grid-template-columns: 1fr; }
}

/* --- Blocs services : schémas et vraies photos à la place des images de banque --- */
.service-block-image--schema {
  background-color: #EEF2FF;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}
/* Schéma en largeur (tableau de bord) : pleine hauteur, calé à gauche, la droite est rognée */
.service-block-image--schema.is-landscape {
  background-size: auto 100%;
  background-position: left top;
}
.service-block-image--schema::after { display: none; }
/* Sur un schéma, la pastille numérotée couvrait le titre du dessin : on la retire là.
   Le sur-titre « Volet 1 » et l'ordre des blocs suffisent. */
.service-block-image--schema .service-number { display: none; }
.service-block-image--photo::after { display: none; }
.service-block-image .photo-credit {
  position: absolute;
  right: var(--space-md);
  bottom: var(--space-sm);
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.85);
  background: rgba(6, 11, 34, 0.55);
  padding: 2px 8px;
  border-radius: 4px;
  z-index: 1;
}

/* --- Contact : coordonnées sans icône dans un carré --- */
.contact-info-card .icon { display: none; }

/* --- Bandeaux photo : plus de parallaxe fixe (rendu irrégulier), simple image --- */
.image-banner { background-attachment: scroll; }
.image-banner-content .banner-line {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: #FFFFFF;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.3;
}