/* =========================================================
   VARIABLES GLOBALES
========================================================= */
:root {
  --bg: #ffffff;
  --bg-alt: #f6f6f6;
  --text: #0b0b0b;
  --muted: #6b7280;
  --line: #e5e7eb;
  --surface: #f7f7f7;
  --focus: #111827;

  /* Polices */
  --font-sans: 'Raleway', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-title: 'Quicksand', 'Raleway', sans-serif;

  /* Typo responsive */
  --fs-hero: clamp(2rem, 1.1rem + 3.5vw, 4rem);
  --fs-h2: clamp(1.3rem, 1rem + 1.8vw, 2rem);
  --fs-h3: clamp(1.125rem, 1rem + 0.6vw, 1.3rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-small: 0.94rem;

  --lh: 1.6;
  --measure: 68ch;

  /* Espacements */
  --sp-1: clamp(6px, 0.2vw, 8px);
  --sp-2: clamp(10px, 0.6vw, 14px);
  --sp-3: clamp(16px, 1.2vw, 22px);
  --sp-4: clamp(24px, 2vw, 36px);
  --sp-5: clamp(32px, 3vw, 56px);
  --sp-6: clamp(48px, 4.2vw, 84px);

  /* Rayons / Ombres */
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.06);
  --container: 1200px;

  /* Palette */
  --primary: #192d42;
  --primary-700: #102236;
  --primary-50: #e9eff5;
  --primary-line: #d3dbe4;

  /* Utilitaires RGBA */
  --primary-opa-08: rgba(25,45,66,0.08);
  --primary-opa-10: rgba(25,45,66,0.10);
  --primary-opa-20: rgba(25,45,66,0.20);
  --primary-opa-28: rgba(25,45,66,0.28);
  --primary-opa-36: rgba(25,45,66,0.36);

  /* Accent */
  --accent: #f26251;

  /* Timeline */
  --tl-icon: 24px;
  --tl-halo: 16px;
}

/* =========================================================
   TYPOGRAPHIE
========================================================= */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.accent { color: var(--accent) !important; }

/* =========================================================
   LAYOUT
========================================================= */
.container {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

section { padding: var(--sp-6) 0; }

/* =========================================================
   HEADER
========================================================= */
header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #192d42;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}

.nav {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
}

.brand { font-weight: 600; letter-spacing: 0.2px; }
.brand a { color:#fff; text-decoration: none; }

/* =========================================================
   BOUTONS
========================================================= */
.btn {
  appearance: none;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: var(--fs-small);
  cursor: pointer;
  transition: transform .06s ease, background .2s ease, color .2s ease;
}
.btn:hover { background: var(--primary-700); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { box-shadow: 0 0 0 3px var(--primary-opa-28); outline: none; }

/* =========================================================
   HERO
========================================================= */
.hero {
  padding: var(--sp-6) 0 var(--sp-5);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--primary-50) 0%, #ffffff 60%);
}

/* Hero V2 visuel */
.hero.hero-v2{
  position: relative;
  padding: clamp(64px, 9vw, 120px) 0; /* plus compact */
  border-bottom: 1px solid var(--primary-line);
  overflow: hidden;
  isolation: isolate;

  background:
    linear-gradient(180deg, rgba(25,45,66,0.28) 0%, rgba(25,45,66,0.14) 40%, rgba(25,45,66,0.08) 100%),
    url("images/otobot-solutions-croissance-entreprise.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}

.hero-center {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--sp-3);
}

.hero-logo { width: clamp(84px, 9vw, 140px); height: auto; border-radius: 50%; box-shadow: 0 6px 24px rgba(0,0,0,.12); }

.hero-title {
  margin: 0;
  font-size: clamp(1.8rem, 1.2rem + 3.2vw, 2.5rem);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
  max-width: 28ch;
}

@media (max-width: 768px) {
  .hero-title { max-width: none; }
}

.hero-divider {
  display: block;
  width: clamp(120px, 18vw, 240px);
  height: 1px;
  background: rgba(255,255,255,.45);
  margin: var(--sp-2) auto var(--sp-3);
}

.hero-lead{
  color: #F9F9F9 !important;
	margin-top: -6px;
  font-weight: 400;
  /*        ↓ min sur petits écrans      ↓ pente fluide (ajuste le 1vw)      ↓ max sur grands écrans  */
  font-size: clamp(1.25rem, 0.9rem + 1.2vw, 1.3rem);
  line-height: 1.30;        /* optionnel: augmente si ça paraît compact */
  max-width: 30ch;          /* optionnel: resserre/élargit la longueur de ligne */
}

.hero-v2 .hero-actions .btn {
  font-size: clamp(1.1rem, 0.8rem + 1vw, 1.2rem); /* ← taille du texte plus grande */
  padding: 16px 32px; /* ← augmente la taille du bouton */
  border-radius: 999px; /* ← garde la forme "pilule" */
  border: 1px solid var(--accent); /* ← bordure orange */
  background: var(--accent); /* ← fond orange de ta charte */
  color: #fff; /* ← texte blanc */
  font-weight: 400; /* ← texte plus marqué */
  transition: transform 0.2s ease, background 0.2s ease;
}

.hero-v2 .hero-actions .btn:hover {
  background: #d94f3f; /* ← orange un peu plus foncé au survol */
  transform: translateY(-2px);
}

/* =========================================================
   SECTION HEADERS (Features)
========================================================= */
/* Décalage d’ancrage sous header sticky */
#features { scroll-margin-top: 100px; }
/* Décalage d’ancrage pour compenser le header sticky */
#partners { scroll-margin-top: 120px; }

@media (max-width: 768px){
  #partners { scroll-margin-top: 140px; } /* header + empilement mobile */
}

#features .section-head {
  display: block;
  margin-bottom: var(--sp-4);
}
#features .section-head h2 { margin: 0 0 var(--sp-2) 0; }
#features .section-head p {
  max-width: 60ch;
  white-space: normal;
  margin: 0 0 var(--sp-4) 0;
}

/* H2 en surbrillance douce */
h2.highlighted {
  position: relative;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(25,45,66,0.04);
  overflow: hidden;
}
h2.highlighted::before{
  content:"";
  position:absolute;
  top:0; left:-50%;
  width:50%; height:100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.6), transparent);
  transform: skewX(-20deg);
  animation: title-glow 6s linear infinite;
}
@keyframes title-glow { 0%{left:-50%;} 100%{left:120%;} }

/* =========================================================
   FEATURES GRID
========================================================= */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.card {
  border: 0px solid var(--primary-line);
  border-radius: var(--radius);
  padding: var(--sp-4);
  background: #fff;
  box-shadow: 0 8px 24px var(--primary-opa-08);
}
.card h3 { font-size: var(--fs-h3); margin: 0 0 8px; }
.card p { color: #292929; }

/* Rangée 2 → bleu très clair */
.features .card:nth-child(4),
.features .card:nth-child(5),
.features .card:nth-child(6) { background: var(--primary-50); }

/* Rangée 3 → gris clair */
.features .card:nth-child(7),
.features .card:nth-child(8),
.features .card:nth-child(9) { background: var(--surface); }

#features.bg-alt { background: linear-gradient(to bottom, #FFFFFF 0%, #f8f9fa 100%); }

/* Icônes */
.icon {
  width: 28px;
  height: 28px;
  margin-bottom: var(--sp-2);
  stroke: var(--accent);
  fill: none;
}

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

/* =========================================================
   LOGOS PARTENAIRES
========================================================= */
.partners {
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--primary-line);
  border-bottom: 1px solid var(--primary-line);
}
.partners .logos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  gap: var(--sp-4);
}
.partners .logos img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  transition: filter .2s ease;
}
.partners .logos img:hover { filter: none; }

@media (max-width: 900px) {
  .partners .logos {
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    gap: var(--sp-3);
  }
  .partners .logos img { max-height: 60px; }
}
/* === H2 "citation" centré + sous-texte (SECTION PARTNERS) === */
.partners h2.quote-heading{
  /* reset du highlighted générique */
  background: none !important;
  text-transform: none;
  letter-spacing: .01em;

  /* centrage + rythme */
  text-align: center;
  display: block;
  margin: 0 auto var(--sp-2);
  padding: clamp(10px, 1vw, 14px) 0;

  /* taille plus généreuse, lisibilité courte */
  font-size: clamp(2rem, 1rem + 3.2vw, 2.5rem);
  line-height: 1.15;
  max-width: 32ch;
  color: var(--text);
  position: relative;
}

/* léger effet "citation" : guillemets très discrets */
.partners h2.quote-heading::before,
.partners h2.quote-heading::after{
  position: absolute;
  font-family: var(--font-title);
  font-size: clamp(28px, 2.2vw, 44px);
  color: var(--accent);
  opacity: .15;
  line-height: 1;
  pointer-events: none;
  content: "";
}
.partners h2.quote-heading::before{
  content: "“";
  left: -0.6em;
  top: -0.2em;
}
.partners h2.quote-heading::after{
  content: "”";
  right: -0.6em;
  bottom: -0.35em;
}

/* paragraphe sous le H2 : centré + un peu plus grand */
.partners .quote-sub{
  text-align: center;
  margin: 0 auto var(--sp-4);
  max-width: 60ch;
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem);
  line-height: 1.45;
  color: #334155; /* gris doux pour hiérarchie visuelle */
}

/* mobile : recentrer les guillemets si besoin */
@media (max-width: 520px){
  .partners h2.quote-heading::before{ left: 0; }
  .partners h2.quote-heading::after{ right: 0; }
}
/* Neutralise le "gloss" animé du style highlighted uniquement ici */
.partners h2.quote-heading {
  background: none !important;
  position: relative;
  text-transform: none;
  letter-spacing: .01em;
  text-align: center;
  display: block;
  margin: 0 auto var(--sp-2);
  padding: clamp(10px, 1vw, 14px) 0;
  font-size: clamp(2rem, 1rem + 3.2vw, 3rem);
  line-height: 1.15;
  max-width: 32ch;
  color: var(--text);
}

/* coupe l’animation + l’overlay du highlighted par défaut */
.partners h2.quote-heading::before{
  content: none !important;
  animation: none !important;
  display: none !important;
}

/* Paragraphe sous le H2 : centré + un peu plus grand */
.partners .quote-sub{
  text-align: center;
  margin: 0 auto var(--sp-4);
  max-width: 60ch;
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem);
  line-height: 1.45;
  color: #334155;
}

/* Guillemets discrets posés sur le span interne, pour éviter les conflits */
.partners h2.quote-heading .quote-text{
  position: relative;
  display: inline-block;
  padding: 0 .2em; /* petite respiration autour du texte */
}

.partners h2.quote-heading .quote-text::before,
.partners h2.quote-heading .quote-text::after{
  position: absolute;
  font-family: var(--font-title);
  font-size: clamp(28px, 2.2vw, 44px);
  color: var(--accent);
  opacity: .15;
  line-height: 1;
  pointer-events: none;
  content: "";
}

.partners h2.quote-heading .quote-text::before{
  content: "“";
  left: -0.6em;
  top: -0.25em;
}

.partners h2.quote-heading .quote-text::after{
  content: "”";
  right: -0.6em;
  bottom: -0.35em;
}

/* Mobile : resserre légèrement la position des guillemets */
@media (max-width: 520px){
  .partners h2.quote-heading .quote-text::before{ left: -0.3em; }
  .partners h2.quote-heading .quote-text::after{ right: -0.3em; }
}



/* =========================================================
   FOUNDERS
========================================================= */
.founders {
  padding: var(--sp-6) 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--primary-50) 100%);
  border-top: 1px solid var(--primary-line);
  border-bottom: 1px solid var(--primary-line);
}

#founders .section-head { margin-bottom: var(--sp-5); }
@media (max-width: 768px){ #founders .section-head{ margin-bottom: var(--sp-4); } }

#founders.founders.bg-light {
  background: #FFFFFF !important;
  border-top: none !important;
  box-shadow: none !important;
}

.founders-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: clamp(24px, 2.5vw, 48px);
  align-items: start;
}

.founder-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: clamp(16px, 2vw, 24px);
  align-items: center;
}

.founder-photo {
  width: 160px; height: 160px; border-radius: 50%; object-fit: cover; display: block;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  border: 2px solid var(--primary-line);
  background: #fff;
}

.founder-meta { display: grid; gap: 6px; }
.founder-role { font-size: 0.9rem; text-transform: uppercase; letter-spacing: .08em; color: #0b1a33; }
.founder-name { font-size: 1.05rem; line-height: 1.3; }

.founders a.linkedin{
  display:inline-flex; align-items:center; gap:6px;
  font-size: var(--fs-small); color:#0a66c2; text-decoration:none;
}
.founders a.linkedin:hover{ color:#094c8d; text-decoration:underline; }
.founders a.linkedin::before{
  content:""; width:16px; height:16px; flex:0 0 16px; display:inline-block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.447 20.452h-3.554v-5.569c0-1.328-.023-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.352V9h3.414v1.561h.048c.476-.9 1.637-1.852 3.369-1.852 3.6 0 4.264 2.37 4.264 5.455v6.288zM5.337 7.433a2.062 2.062 0 11.004-4.124 2.062 2.062 0 01-.004 4.124zM6.996 20.452H3.671V9h3.325v11.452z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.447 20.452h-3.554v-5.569c0-1.328-.023-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.352V9h3.414v1.561h.048c.476-.9 1.637-1.852 3.369-1.852 3.6 0 4.264 2.37 4.264 5.455v6.288zM5.337 7.433a2.062 2.062 0 11.004-4.124 2.062 2.062 0 01-.004 4.124zM6.996 20.452H3.671V9h3.325v11.452z'/></svg>") no-repeat center / contain;
  opacity:.95;
}

@media (max-width: 900px) {
  .founders-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .founder-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .founder-meta { justify-items: center; }
}

/* =========================================================
   HERO — ORBITE AUTOUR DU LOGO
========================================================= */
.hero-logo-wrap{
  position: relative;
  width: clamp(84px, 9vw, 140px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;

  --ring-thick: 3px;
  --ring-arc: 20deg;
  --ring-speed: 12s;
  --ring-offset: -0.5px;
  --ring-grow: calc(var(--ring-thick)/2 + var(--ring-offset));
}
.hero-logo-wrap > .hero-logo{
  width: 100%; height: 100%; border-radius: 50%; display: block;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
.hero-logo-wrap::before{
  content: "";
  position: absolute;
  inset: calc(var(--ring-grow) * -1);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--accent) 0 var(--ring-arc),
    transparent var(--ring-arc) 360deg
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--ring-thick)),
    #000 calc(100% - var(--ring-thick)) 100%
  );
          mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--ring-thick)),
    #000 calc(100% - var(--ring-thick)) 100%
  );
  animation: hero-ring-spin var(--ring-speed) linear infinite;
  opacity: .95;
  pointer-events: none;
  z-index: 10;
}
@keyframes hero-ring-spin{ to { transform: rotate(360deg); } }

/* =========================================================
   TIMELINE (process)
========================================================= */
.section.timeline {
  background: var(--primary-50);
  border-top: 1px solid var(--primary-line);
  border-bottom: 1px solid var(--primary-line);
}
.section.timeline .section-head { text-align: center; margin-bottom: 2rem; }
#process.section.timeline { border-top: none !important; box-shadow: none !important; }

.timeline-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 1.5rem;
  padding: 0;
  list-style: none;
  margin: 0;
}
.timeline-steps .step { position: relative; text-align: center; }
.timeline-steps .step::marker { content: ""; }
.timeline-steps .node { position: relative; height: 96px; }

/* Ligne horizontale */
.timeline-steps::before {
  content: "";
  position: absolute;
  top: 48px; left: 0; right: 0;
  height: 2px;
  background: var(--primary-line);
}

/* Pastille + halo */
.timeline-steps .node .dot {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: var(--tl-icon); height: var(--tl-icon);
  background-image: url('images/otobot-optimisation-strategie-entreprise.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.timeline-steps .node .dot::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: var(--tl-halo); height: var(--tl-halo);
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  border: 3px solid var(--primary);
  box-shadow: 0 0 0 0 rgba(25,45,66,0);
}

/* Titres & textes d'étapes */
.timeline-steps .step h3 {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  margin: 0.5rem 0 0.25rem;
}
.timeline-steps .step p {
  color: #475569;
  margin: 0 auto;
  max-width: 28ch;
}

/* Anim halo séquentiel */
.timeline.is-inview .node .dot::after { animation: tl-pulse 2.5s ease-out infinite; }
.timeline.is-inview .step:nth-child(1) .dot::after { animation-delay: 0s; }
.timeline.is-inview .step:nth-child(2) .dot::after { animation-delay: .5s; }
.timeline.is-inview .step:nth-child(3) .dot::after { animation-delay: 1s; }
.timeline.is-inview .step:nth-child(4) .dot::after { animation-delay: 1.5s; }
.timeline.is-inview .step:nth-child(5) .dot::after { animation-delay: 2s; }

@keyframes tl-pulse {
  0%   { box-shadow: 0 0 0 0 var(--primary-opa-36); }
  45%  { box-shadow: 0 0 0 12px rgba(25,45,66,0); }
  100% { box-shadow: 0 0 0 0 rgba(25,45,66,0); }
}

/* Mobile: vertical */
@media (max-width: 768px) {
  .timeline-steps { grid-template-columns: 1fr; gap: 1rem; }
  .timeline-steps::before {
    top: 0; left: 24px; right: auto;
    width: 2px; height: 100%; background: var(--primary-line);
  }
  .timeline-steps .step { text-align: left; padding-left: 64px; min-height: 72px; }
  .timeline-steps .node { position: absolute; inset: 0 auto auto 0; width: 48px; }
  .timeline-steps .node .dot { top: 0.5rem; left: 24px; transform: translate(-50%, 0); }
  .timeline-steps .node .dot::after { top: 50%; left: 50%; transform: translate(-50%, -50%); }
}

/* =========================================================
   AVANT / APRÈS — Grille jumelée
========================================================= */
.case-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  align-items: start;
}

.case-col{
  background: #fff;
  border: 1px solid var(--primary-line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px var(--primary-opa-08);
  padding: var(--sp-4);
}
.case-col.before{ background: var(--surface); }
.case-col.after{ background: var(--primary-50); }

.case-col .badge{
  display: inline-block;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--primary-line);
  background: #fff;
  color: var(--primary);
  margin-bottom: var(--sp-3);
}

.case-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-2);
}
.case-list li{
  padding-left: 28px;
  position: relative;
  line-height: 1.5;
  color: #2a2a2a;
}

/* Icônes de liste */
.case-col.before .case-list li::before{
  content: "";
  position: absolute; left: 0; top: .4em;
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(242,98,81,.12);
  border: 2px solid var(--accent);
}
.case-col.after .case-list li::before{
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1rem;
  color: var(--primary);
  font-weight: 600;
  line-height: 1.2;
}

@media (max-width: 980px){
  .case-grid{ grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* =========================================================
   FAQ
========================================================= */
.faq { border-top: 1px solid var(--primary-line); }
.faq-item { border-bottom: 1px solid var(--primary-line); }
.faq button {
  all: unset;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 20px 0;
}
.faq h3 { font-size: 1.05rem; margin: 0; }
.faq .chev { transition: transform .2s ease; }
.faq .panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s ease;
  color: #1f2937;
  padding-right: 10px;
}
.faq .panel.open { padding-bottom: 18px; }
.faq .chev path { stroke: var(--primary); }

/* =========================================================
   FOOTER
========================================================= */
footer {
  padding: var(--sp-4) 0;
  color: var(--muted);
  font-size: var(--fs-small);
  border-top: 1px solid var(--primary-line);
  background: #ffffff;
  text-align: center;
}

/* =========================================================
   UTILITAIRES & ACCESS
========================================================= */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.muted { color: var(--muted); }
.divider { border-top: 1px solid var(--primary-line); margin: var(--sp-4) 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}