/* ── VARIABLES & BASE ────────────────────────────────────── */
:root {
  --navy:    #0D1D37;
  --ecru:    #FEF8F2;
  --white:   #ffffff;
  --red:     #D42B2B;
  --navy60:  rgba(13,29,55,.55);
  --navy12:  rgba(13,29,55,.1);

  /* échelle typographique fluide */
  --fs-label: clamp(.75rem, .7rem + .3vw, .875rem);   /* 12–14px */
  --fs-nav:   clamp(.875rem, .8rem + .3vw, 1rem);     /* 14–16px */
  --fs-sm:    clamp(1rem, .95rem + .3vw, 1.125rem);   /* 16–18px */
  --fs-base:  clamp(1.0625rem, 1rem + .4vw, 1.25rem); /* 17–20px */
  --fs-md:    clamp(1.25rem, 1.1rem + .6vw, 1.5rem);  /* 20–24px */
  --fs-h2:    clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);/* 24–34px */
  --fs-h1:    clamp(2rem, 1.5rem + 2.5vw, 3.25rem);   /* 32–52px */

  /* layout */
  --maxw:   90rem; /* 1440px */
  --pad-x:  clamp(1.25rem, 4vw, 3rem);
  --pad-y:  clamp(2.5rem, 5vw, 4.5rem);
}

html { font-size: 100%; }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Urbanist', system-ui, sans-serif;
  background: var(--ecru);
  color: var(--navy);
  font-size: var(--fs-base);
  line-height: 1.65;
}

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


/* ── LIEN D'ÉVITEMENT (skip link) ────────────────────────── */
/* invisible jusqu'au focus clavier : aucun impact visuel */
.skip-link {
  position: absolute;
  left: .5rem;
  top: -3rem;
  z-index: 200;
  background: var(--navy);
  color: var(--ecru);
  padding: .625rem 1rem;
  border-radius: 2px;
  text-decoration: none;
  font-size: var(--fs-nav);
  transition: top .15s;
}

.skip-link:focus { top: .5rem; }


/* ── CONTENEUR ───────────────────────────────────────────── */
.container {
  max-width: var(--maxw);
  margin-inline: auto;
  width: 100%;
}

.measure { max-width: 65ch; }


/* ── NAVIGATION ─────────────────────────────────────────── */
.np-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ecru);
  border-bottom: 1px solid var(--navy12);
}

/* mobile : barre resserrée (gap réduit) ; ≥601px le gap repasse à 1rem */
.np-nav-inner {
  /* max-width: var(--maxw); */
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .875rem var(--pad-x);
  gap: .5rem;
}

.np-logo {
  display: flex;
  align-items: center;
  gap: .5625rem;
  text-decoration: none;
  flex-shrink: 0;
}

/* logo : hauteur calée sur le texte voisin pour rester proportionné au bandeau */
.np-logo img {
  display: block;
  height: 2.025em;
  width: auto;
}

/* mobile : nom resserré ; ≥601px reprend la taille/lettrage pleins */
.np-logo-name {
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--navy);
}

/* mobile : liens masqués (burger affiché) ; ≥1025px les rétablit en flex */
.np-links {
  display: none;
  gap: clamp(1.25rem, 2.2vw, 2.5rem);
  align-items: center;
}

.np-links a {
  font-size: var(--fs-nav);
  color: var(--navy60);
  text-decoration: none;
  transition: color .2s;
  white-space: nowrap;
}

.np-links a:hover  { color: var(--navy); }
.np-links a.active { color: var(--navy); font-weight: 500; }

/* menu déroulant ouvert au clic sur le burger (écrans < 1025px) */
.np-links.open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--ecru);
  border-bottom: 1px solid var(--navy12);
  padding: 1rem var(--pad-x);
  gap: 1rem;
  z-index: 99;
}

.np-links.open a { font-size: var(--fs-base); }

/* mobile : CTA resserré ; ≥601px reprend padding/taille pleins */
.np-btn {
  font-size: var(--fs-nav);
  font-weight: 400;
  background: var(--navy);
  color: var(--ecru);
  padding: .5rem .75rem;
  border-radius: 2px;
  cursor: pointer;
  border: none;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  flex-shrink: 0;
}

.np-btn:hover { opacity: .85; }

/* burger (affiché par défaut sur mobile ; masqué ≥1025px) */
.nav-toggle {
  display: inline-flex;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--navy);
  padding: .25rem;
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  justify-content: center;
  line-height: 1;
}


/* ── LABELS ─────────────────────────────────────────────── */
.lbl {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--navy60);
  text-transform: uppercase;
  margin-bottom: .875rem;
  display: block;
}

.lbl-light { color: rgba(254,248,242,.4); }
.lbl-dark  { color: var(--navy60); }

.eyebrow {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: .5rem;
}


/* ── SECTIONS ────────────────────────────────────────────── */
.sec {
  padding: var(--pad-y) var(--pad-x);
  border-bottom: 1px solid var(--navy12);
  background: var(--ecru);
}

.sec-w { background: var(--white); }

.sec h2 {
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: .875rem;
  letter-spacing: -.01em;
}

.sec h2 strong { font-weight: 500; }

.sec p {
  font-size: var(--fs-base);
  line-height: 1.85;
  color: var(--navy60);
  margin-bottom: .75rem;
  font-weight: 300;
}

.sec p:last-child { margin-bottom: 0; }
.sec p strong { color: var(--navy); font-weight: 500; }

/* bande pleine largeur (fond coloré) */
.band {
  padding: var(--pad-y) var(--pad-x);
}

.band-navy {
  background: var(--navy);
  color: var(--ecru);
}

.band-white { background: var(--white); }


/* ── HERO ────────────────────────────────────────────────── */
/* mobile : une seule colonne, hauteur naturelle ; ≥1025px passe en 2 colonnes */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  min-height: auto;
  border-bottom: 1px solid var(--navy12);
}

.hero-text {
  padding: var(--pad-y) var(--pad-x);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  background: var(--ecru);
}

/* mobile : photo placée au-dessus du texte, hauteur dédiée ;
   ≥1025px elle reprend sa place (order:0) et sa hauteur naturelle */
.hero-img {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  order: -1;
  min-height: clamp(16rem, 45vh, 26rem);
}

/* image positionnée en absolu : elle remplit sa moitié sans jamais
   imposer sa hauteur intrinsèque au hero */
.hero-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.hero-img-light { background: rgba(13,29,55,.06); }


/* ── CTA ─────────────────────────────────────────────────── */
.cta {
  text-align: center;
  padding: var(--pad-y) var(--pad-x);
  background: var(--ecru);
}

.cta h2 {
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: .75rem;
  letter-spacing: -.01em;
}

.cta p {
  font-size: var(--fs-base);
  color: var(--navy60);
  max-width: 40ch;
  margin: 0 auto 1.5rem;
  line-height: 1.9;
  font-weight: 300;
}

.btn-row {
  display: flex;
  gap: .625rem;
  justify-content: center;
  flex-wrap: wrap;
}


/* ── BOUTONS ─────────────────────────────────────────────── */
.btn-p {
  font-size: var(--fs-sm);
  font-weight: 500;
  background: var(--navy);
  color: var(--ecru);
  padding: .6875rem 1.375rem;
  border-radius: 2px;
  cursor: pointer;
  border: none;
  font-family: inherit;
  letter-spacing: .04em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.btn-p:hover { opacity: .85; }

.btn-o {
  font-size: var(--fs-sm);
  font-weight: 400;
  background: transparent;
  color: var(--navy);
  padding: .6875rem 1.375rem;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid rgba(13,29,55,.3);
  font-family: inherit;
  letter-spacing: .04em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.btn-o:hover { background: rgba(13,29,55,.04); }

.btn-s {
  font-size: var(--fs-sm);
  font-weight: 500;
  background: transparent;
  color: var(--navy);
  padding: .4375rem .875rem;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid rgba(13,29,55,.25);
  font-family: inherit;
  letter-spacing: .06em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.btn-s:hover { background: rgba(13,29,55,.04); }

/* bouton clair sur fond navy */
.btn-light {
  font-size: var(--fs-sm);
  font-weight: 500;
  background: var(--ecru);
  color: var(--navy);
  padding: .6875rem 1.375rem;
  border-radius: 2px;
  cursor: pointer;
  border: none;
  font-family: inherit;
  letter-spacing: .04em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.btn-light:hover { opacity: .9; }


/* ── GRILLES ─────────────────────────────────────────────── */
.grid-2 {
  display: grid;
  gap: .625rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.grid-3 {
  display: grid;
  gap: .625rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

/* grille stats — mobile : cellules empilées, séparées par une bordure basse ;
   ≥601px repasse en 3 colonnes séparées par une bordure droite */
.grid-stats {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--navy12);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 1.375rem;
}

.stat-cell {
  padding: 1.125rem .75rem;
  text-align: center;
  background: var(--white);
  border-right: none;
  border-bottom: 1px solid var(--navy12);
}

.stat-cell:last-child { border-right: none; border-bottom: none; }

.stat-num {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 300;
  color: var(--navy);
}

.stat-num span { font-size: var(--fs-md); color: var(--red); }

/* variante « Plusieurs centaines » : texte plus petit sur 2 lignes */
.stat-num-text { font-size: var(--fs-md); padding-top: .25rem; line-height: 1.3; }

.stat-label {
  font-size: var(--fs-sm);
  color: var(--navy60);
  margin-top: .1875rem;
}


/* ── CARTES ──────────────────────────────────────────────── */
.card {
  border: 1px solid var(--navy12);
  border-radius: 2px;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background: var(--white);
}

.card-navy {
  background: var(--navy);
  border-radius: 2px;
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

.card h3 {
  font-size: var(--fs-md);
  font-weight: 300;
  line-height: 1.3;
  margin-bottom: .75rem;
  letter-spacing: -.01em;
}

.card h3 strong { font-weight: 500; }
.card h4 { font-size: var(--fs-sm); font-weight: 500; color: var(--navy); margin-bottom: .3125rem; }

.card p {
  font-size: var(--fs-base);
  color: var(--navy60);
  line-height: 1.7;
  font-weight: 300;
}

/* carte Session Clé featured (fond navy) */
.session-card {
  background: var(--navy);
  border-radius: 2px;
  padding: clamp(1.5rem, 3vw, 2rem);
  margin-top: .75rem;
}

.session-card h2 {
  color: var(--ecru);
  font-size: var(--fs-h2);
  font-weight: 300;
  margin-bottom: .5rem;
  line-height: 1.2;
}

.session-card p {
  color: rgba(254,248,242,.55);
  font-size: var(--fs-base);
  margin-bottom: 1rem;
  line-height: 1.7;
  font-weight: 300;
}

/* badge prix */
.price-badge {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  background: rgba(254,248,242,.06);
  border: 1px solid rgba(254,248,242,.12);
  padding: .875rem 1.25rem;
  border-radius: 2px;
  margin-bottom: 1.25rem;
}

.price-num {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 300;
  color: var(--ecru);
}

.price-num strong { font-weight: 500; }

.price-meta {
  font-size: var(--fs-nav);
  color: rgba(254,248,242,.4);
  letter-spacing: .04em;
}


/* ── SERVICES (ligne) ────────────────────────────────────── */
/* mobile : libellé au-dessus du détail ; ≥1025px repasse en 1fr 2fr */
.service-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  padding: var(--pad-y) 0;
  border-bottom: 1px solid var(--navy12);
}

.service-row:last-child { border-bottom: none; }

.service-num {
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--red);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}

.service-title {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--navy);
  line-height: 1.3;
}

.service-detail h3 {
  font-size: var(--fs-md);
  font-weight: 300;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: .75rem;
  letter-spacing: -.01em;
}

.service-detail h3 strong { font-weight: 500; }

.service-detail p {
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--navy60);
  margin-bottom: .75rem;
  font-weight: 300;
}

.service-highlight {
  font-size: var(--fs-base);
  color: var(--navy);
  font-weight: 500;
  margin-bottom: 1rem;
}


/* ── COMPARAISON (indépendance) ──────────────────────────── */
/* mobile : colonnes empilées ; ≥1025px repasse en 1fr 1fr */
.compare { display: grid; gap: .75rem; grid-template-columns: 1fr; margin-top: 1.125rem; }

.compare-col {
  border: 1px solid var(--navy12);
  border-radius: 2px;
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

.compare-col.muted { background: rgba(13,29,55,.02); }

.compare-title {
  font-size: var(--fs-nav);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: .875rem;
  padding-bottom: .625rem;
  border-bottom: 1px solid var(--navy12);
}

.compare-col.muted .compare-title { color: var(--navy60); }

.compare-list { list-style: none; padding: 0; margin: 0; }

.compare-item {
  font-size: var(--fs-base);
  padding: .4375rem 0;
  border-bottom: 1px solid var(--navy12);
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-weight: 400;
  color: var(--navy);
}

.compare-item:last-child { border-bottom: none; }
.compare-col.muted .compare-item { color: var(--navy60); }

.dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  margin-top: .4375rem;
}

.dot-muted { background: rgba(13,29,55,.2); }


/* ── TÉMOIGNAGES ─────────────────────────────────────────── */
.testimonial {
  border: 1px solid var(--navy12);
  border-radius: 2px;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.testimonial blockquote {
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: 1.8;
  color: var(--navy);
  font-style: italic;
  flex: 1;
}

.testimonial-navy {
  background: var(--navy);
  border-radius: 2px;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  margin-bottom: .625rem;
}

.testimonial-navy blockquote {
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: 1.8;
  color: var(--ecru);
  font-style: italic;
  margin-bottom: .75rem;
}

.testimonial-name {
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--navy60);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.testimonial-navy .testimonial-name { color: rgba(254,248,242,.35); }


/* ── COMPÉTENCES DOUBLE ──────────────────────────────────── */
/* mobile : cartes empilées ; ≥1025px repasse en 1fr 1fr */
.competence-grid { display: grid; gap: .625rem; grid-template-columns: 1fr; margin-top: 1.125rem; }

.competence-card {
  border: 1px solid var(--navy12);
  padding: clamp(1rem, 2.5vw, 1.375rem);
  border-radius: 2px;
}

.competence-card h3 { font-size: var(--fs-sm); font-weight: 500; color: var(--navy); margin-bottom: .3125rem; }
.competence-card p  { font-size: var(--fs-base); color: var(--navy60); margin: 0; line-height: 1.55; }


/* ── PODCASTS / MÉDIAS ───────────────────────────────────── */
.media-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  border: 1px solid var(--navy12);
  border-radius: 2px;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background: var(--white);
}

.media-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.media-icon-navy { background: var(--navy); }
.media-icon-red  { background: var(--red); }

.media-title { font-size: var(--fs-base); font-weight: 500; color: var(--navy); line-height: 1.35; margin-bottom: .3125rem; }
.media-host  { font-size: var(--fs-sm); color: var(--navy60); font-weight: 300; margin-bottom: .625rem; }

.media-item {
  border: 1px solid var(--navy12);
  border-radius: 2px;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background: var(--white);
}

.media-source { font-size: var(--fs-label); font-weight: 500; color: var(--red); letter-spacing: .12em; text-transform: uppercase; margin-bottom: .375rem; }
.media-date   { font-size: var(--fs-sm); color: var(--navy60); font-weight: 300; margin-bottom: .625rem; }


/* ── CONTACT ─────────────────────────────────────────────── */
/* mobile : contenu et bouton empilés (bouton pleine largeur) ;
   ≥1025px repasse en 1fr auto avec bouton à largeur naturelle */
.contact-option {
  border: 1px solid var(--navy12);
  border-radius: 2px;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  background: var(--white);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: center;
}

.contact-option .btn-p,
.contact-option .btn-o { width: 100%; justify-content: center; }

.contact-label {
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--red);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .5rem;
  display: block;
}

.contact-title { font-size: var(--fs-md); font-weight: 500; color: var(--navy); margin-bottom: .25rem; }
.contact-desc  { font-size: var(--fs-base); color: var(--navy60); font-weight: 300; line-height: 1.6; }

/* mobile : une colonne ; ≥1025px repasse en 1fr 1fr */
.coords-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.coords-grid h4 { font-size: var(--fs-sm); font-weight: 500; color: var(--navy); margin-bottom: .25rem; letter-spacing: .04em; }
.coords-grid p  { font-size: var(--fs-base); color: var(--navy60); font-weight: 300; line-height: 1.6; }
.coords-grid a  { font-size: var(--fs-base); color: var(--navy); font-weight: 400; text-decoration: none; border-bottom: 1px solid var(--navy12); }


/* ── BADGE LOCALISATION ──────────────────────────────────── */
.location-badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: var(--fs-sm);
  color: var(--navy60);
  border: 1px solid var(--navy12);
  padding: .25rem .625rem;
  border-radius: 20px;
  margin-bottom: 1.5rem;
  width: fit-content;
}

.badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}

.tagline {
  font-size: var(--fs-sm);
  font-weight: 300;
  color: var(--navy60);
  line-height: 1.8;
  margin-bottom: 1.375rem;
  border-top: 1px solid var(--navy12);
  border-bottom: 1px solid var(--navy12);
  padding: .625rem 0;
}

.tagline span { color: var(--red); font-weight: 500; }


/* ── SERVICES MINI-GRILLE (aperçu accueil) ───────────────── */
/* mobile : cellules empilées (sans bordure droite) ;
   ≥601px repasse en 2 colonnes avec bordure droite rétablie */
.services-preview {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--navy12);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 1.125rem;
}

.services-preview-cell {
  padding: 1rem;
  border-right: none;
  border-bottom: 1px solid var(--navy12);
  background: var(--white);
}

.services-preview-cell:nth-child(2n) { border-right: none; }
.services-preview-cell:nth-last-child(-n+2) { border-bottom: none; }
.services-preview-cell.see-all { background: var(--ecru); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.25rem; text-decoration:none; }

.services-preview-cell h3 { font-size: var(--fs-sm); font-weight: 500; color: var(--navy); margin-bottom: .25rem; }
.services-preview-cell p  { font-size: var(--fs-sm); color: var(--navy60); margin: 0; line-height: 1.5; }
.see-all-label  { font-size: var(--fs-sm); color: var(--navy60); }
.see-all-cta    { font-size: var(--fs-sm); color: var(--red); font-weight: 400; }

/* ── FORMAT SESSION (3 cartes) ───────────────────────────── */
.format-card {
  border: 1px solid var(--navy12);
  border-radius: 2px;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  text-align: center;
  background: var(--white);
}

.format-icon  { font-size: 1.375rem; margin-bottom: .5rem; color: var(--red); }
.format-title { font-size: var(--fs-sm); font-weight: 500; color: var(--navy); margin-bottom: .25rem; }
.format-desc  { font-size: var(--fs-sm); color: var(--navy60); line-height: 1.5; font-weight: 300; }

/* ── NOTE NAVY ────────────────────────────────────────────── */
.note-navy {
  background: var(--navy);
  padding: clamp(1.25rem, 3vw, 2rem) var(--pad-x);
}

.note-navy p { font-size: var(--fs-base); line-height: 1.85; font-weight: 300; margin-bottom: .625rem; }
.note-navy p:first-of-type { color: rgba(254,248,242,.65); }
.note-navy p:last-child     { color: var(--ecru); font-weight: 400; margin: 0; }

/* ── PROFILS SESSION ──────────────────────────────────────── */
.profile-card {
  border: 1px solid var(--navy12);
  border-radius: 2px;
  padding: 1rem;
  background: var(--white);
}

.profile-card p { font-size: var(--fs-base); color: var(--navy60); margin: 0; line-height: 1.6; font-weight: 300; }
.profile-card p strong { color: var(--navy); font-weight: 500; }

/* ── BANDE CITATION ───────────────────────────────────────── */
.band-quote {
  background: var(--navy);
  padding: clamp(1.5rem, 3vw, 2rem) var(--pad-x);
  text-align: center;
}

.band-quote p {
  font-size: var(--fs-md);
  font-weight: 300;
  color: var(--ecru);
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 auto;
  letter-spacing: -.01em;
}

.band-quote em { font-style: italic; color: rgba(254,248,242,.5); }


/* ── FOOTER ──────────────────────────────────────────────── */
.footer {
  background: var(--navy);
  padding: 1rem var(--pad-x);
}

/* mobile : pile verticale alignée à gauche ; ≥601px repasse en ligne */
.footer-inner {
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: .75rem;
}

.footer-l {
  font-size: var(--fs-nav);
  color: rgba(254,248,242,.3);
  letter-spacing: .06em;
}

.footer-mid {
  display: flex;
  gap: .875rem;
  align-items: center;
  flex-wrap: wrap;
}

.footer-mid a {
  font-size: var(--fs-nav);
  color: rgba(254,248,242,.3);
  text-decoration: none;
}

.footer-mid a:hover { color: rgba(254,248,242,.6); }

.footer-mid span {
  font-size: var(--fs-nav);
  color: rgba(254,248,242,.3);
}

/* mobile : point séparateur masqué ; ≥601px rétabli en bloc */
.footer-dot {
  display: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}


/* ── LISTE À PUCES ───────────────────────────────────────── */
.bullet-list {
  list-style: none;
  padding: 0;
  margin: .75rem 0;
  display: flex;
  flex-direction: column;
  gap: .375rem;
}

.bullet-list li {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--navy60);
  font-weight: 300;
  display: flex;
  align-items: flex-start;
  gap: .625rem;
}

.bullet-list li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  margin-top: .5rem;
}


/* ── ARTICLES ────────────────────────────────────────────── */
.article-container { max-width: 48rem; }

.article-back {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: var(--fs-label);
  color: rgba(254,248,242,.4);
  text-decoration: none;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.article-back:hover { color: rgba(254,248,242,.7); }

.article-subtitle {
  font-size: var(--fs-base);
  color: rgba(254,248,242,.6);
  font-style: italic;
  font-weight: 300;
  line-height: 1.6;
  margin-top: .5rem;
}

.article-section {
  display: flex;
  flex-direction: column;
  gap: .625rem;
}

.article-section h2 {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--navy);
  line-height: 1.3;
  letter-spacing: -.01em;
}

.article-section p {
  font-size: var(--fs-base);
  line-height: 1.85;
  color: var(--navy60);
  font-weight: 300;
}

.article-section p strong { color: var(--navy); font-weight: 500; }

.article-conclusion {
  background: var(--ecru);
  border-left: 2px solid var(--red);
  padding: 1.25rem 1.25rem 1.25rem 1.375rem;
  border-radius: 0 2px 2px 0;
}

.article-conclusion p {
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--navy);
  line-height: 1.7;
  font-style: italic;
}


/* ── TITRES DE PAGE (hero / bandeaux) ────────────────────── */
/* Remplacent les anciens styles inline des <h1>/<h2> de tête de page.
   Base = propriétés communes ; les variantes ajustent couleur, interligne
   et marge basse selon la page. Le <strong> repasse en graisse 500. */
.page-title {
  font-size: var(--fs-h1);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -.01em;
}

.page-title strong { font-weight: 500; }

/* variantes d'interligne / marge basse (placées après la base) */
.page-title-lh12   { line-height: 1.2; }
.page-title-lh115  { line-height: 1.15; letter-spacing: -.02em; }
.page-title-mb0    { margin-bottom: 0; }
.page-title-mb-sm  { margin-bottom: .5rem; }
.page-title-mb-md  { margin-bottom: .625rem; }
.page-title-mb-lg  { margin-bottom: .875rem; }
.page-title-mb-xl  { margin-bottom: 1rem; }
.page-title-mb-2xl { margin-bottom: 1.375rem; }
.page-title-light  { color: var(--ecru); }

/* titre de section sur fond clair (a-propos « Une sélection ») */
.section-title {
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1.3;
  margin-bottom: .875rem;
  letter-spacing: -.01em;
}
.section-title strong { font-weight: 500; }

/* titre de bandeau navy en graisse pleine (a-propos « La qualité ») */
.band-title {
  font-size: var(--fs-h2);
  font-weight: 500;
  color: var(--ecru);
  line-height: 1.3;
  margin-bottom: 1rem;
}

/* titre navy léger avec strong (services « Session Clé. ») */
.band-title-light {
  font-size: var(--fs-h2);
  font-weight: 300;
  color: var(--ecru);
  line-height: 1.2;
  margin-bottom: .875rem;
  letter-spacing: -.01em;
}
.band-title-light strong { font-weight: 500; }


/* ── PARAGRAPHE D'INTRODUCTION (hero / bandeaux) ─────────── */
/* phrase d'accroche sous le titre, version claire (texte navy60) */
.lead {
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--navy60);
  font-weight: 300;
}

/* idem sur fond navy (texte ecru atténué) */
.lead-on-navy {
  font-size: var(--fs-base);
  color: rgba(254,248,242,.6);
  line-height: 1.75;
  font-weight: 300;
}

/* paragraphe de corps sur fond navy (interligne 1.85) */
.body-on-navy {
  font-size: var(--fs-base);
  line-height: 1.85;
  color: rgba(254,248,242,.6);
  font-weight: 300;
}

/* paragraphe de corps dans une carte sur fond clair (a-propos « sélection »).
   Scopé à .card pour passer devant la règle .card p existante. */
.card .body-text {
  font-size: var(--fs-base);
  line-height: 1.85;
  color: var(--navy60);
  font-weight: 300;
}

/* phrase de conclusion en italique navy dans une carte (a-propos) */
.card .body-emphasis {
  font-size: var(--fs-base);
  line-height: 1.85;
  color: var(--navy);
  font-style: italic;
  font-weight: 400;
  margin: 0;
}

/* intro de section grise resserrée (prises-de-parole).
   Scopée à .sec pour passer devant la règle .sec p existante. */
.sec .section-intro {
  font-size: var(--fs-base);
  color: var(--navy60);
  margin-bottom: 1.25rem;
  font-weight: 300;
  line-height: 1.6;
}


/* ── BLOCS RÉUTILISABLES (cartes analyse, citations) ─────── */
/* titre de carte « analyse » (prises-de-parole) */
.card-title {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--navy);
  line-height: 1.35;
}

/* lien discret souligné en bas de carte (prises-de-parole) */
.card-link {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--navy);
  letter-spacing: .06em;
  text-decoration: none;
  border-bottom: 1px solid var(--navy12);
  padding-bottom: 2px;
  width: fit-content;
  display: inline-block;
}

/* grande citation en italique dans une carte (a-propos / session-clé) */
.quote-lg {
  font-size: var(--fs-md);
  font-weight: 300;
  line-height: 1.8;
  color: var(--navy);
  font-style: italic;
  margin-bottom: .75rem;
}
.quote-lg-tight { margin-bottom: .625rem; }


/* ── UTILITAIRES ─────────────────────────────────────────── */
/* pile verticale avec espacement (remplace les flex inline répétés) */
.stack    { display: flex; flex-direction: column; }
.gap-05   { gap: .5rem; }
.gap-0625 { gap: .625rem; }
.gap-175  { gap: 1.75rem; }
.gap-2    { gap: 2rem; }

/* largeur de lecture confinée (pages légales) */
.measure-48 { max-width: 48rem; }

/* fonds */
.bg-ecru  { background: var(--ecru); }
.bg-white { background: var(--white); }

/* bordures de séparation */
.bd-bottom { border-bottom: 1px solid var(--navy12); }
.bd-top    { border-top: 1px solid var(--navy12); }

/* rythme vertical ponctuel (marges réutilisées tel quel) */
.mt-075 { margin-top: .75rem; }
.mt-1   { margin-top: 1rem; }
.mb-075  { margin-bottom: .75rem; }
.mb-0875 { margin-bottom: .875rem; }
.mb-125  { margin-bottom: 1.25rem; }
.mb-025  { margin-bottom: .25rem; }
.mb-2    { margin-bottom: 2rem; }

/* divers ponctuels */
.flex-1    { flex: 1; }
.no-pad-t  { padding-top: 0; }
.measure-40 { max-width: 40ch; }
.pad-x-only { padding: 0 var(--pad-x); }

/* mises en valeur de texte (couleur seule) */
.t-navy { color: var(--navy); font-weight: 400; }
.t-red  { color: var(--red); }
.t-ecru-85 { color: rgba(254,248,242,.85); font-style: italic; }
.t-ecru-55 { color: rgba(254,248,242,.55); }
.t-ecru-35 { color: rgba(254,248,242,.35); }


/* ── RESPONSIVE (mobile-first) ──────────────────────────────
   La base ci-dessus décrit la mise en page mobile (≤360px de référence).
   Les paliers min-width ci-dessous l'enrichissent progressivement.
   Bornes : 601px et 1025px = compléments stricts des anciennes requêtes
   max-width 600px / 1024px, pour un rendu identique à chaque largeur. */

/* ≥601px : on quitte le très petit écran (nav, pied de page, grilles 2-3 col) */
@media (min-width: 601px) {

  /* nav : barre et CTA reprennent leurs dimensions pleines */
  .np-nav-inner { gap: 1rem; }
  .np-logo-name { font-size: var(--fs-nav); letter-spacing: .12em; }
  .np-btn { padding: .5rem 1rem; font-size: var(--fs-sm); }

  /* pied de page en ligne */
  .footer-inner { flex-direction: row; align-items: center; gap: .625rem; }
  .footer-dot { display: block; }

  /* aperçu services : 2 colonnes, bordure droite rétablie
     (les cellules paires la retirent déjà via :nth-child(2n)) */
  .services-preview { grid-template-columns: 1fr 1fr; }
  .services-preview-cell { border-right: 1px solid var(--navy12); }

  /* stats : 3 colonnes séparées par une bordure droite
     (.stat-cell:last-child la retire déjà sur la dernière) */
  .grid-stats { grid-template-columns: repeat(3, 1fr); }
  .stat-cell { border-right: 1px solid var(--navy12); border-bottom: none; }
}

/* ≥1025px : passage à la mise en page bureau (nav complète, blocs 2 colonnes) */
@media (min-width: 1025px) {

  /* nav : liens affichés, burger masqué */
  .np-links { display: flex; }
  .nav-toggle { display: none; }

  /* si « .open » subsiste après un redimensionnement, on neutralise le
     menu déroulant pour retrouver la barre horizontale */
  .np-links.open {
    position: static;
    flex-direction: row;
    padding: 0;
    background: none;
    border-bottom: none;
    gap: clamp(1.25rem, 2.2vw, 2.5rem);
    z-index: auto;
  }
  .np-links.open a { font-size: var(--fs-nav); }

  /* hero sur deux colonnes : texte à gauche, photo à droite */
  .hero {
    grid-template-columns: 1fr 1fr;
    min-height: clamp(30rem, 60vh, 42rem);
  }
  .hero-text { justify-content: center; }
  .hero-img { order: 0; min-height: auto; }

  /* services : libellé / détail côte à côte */
  .service-row { grid-template-columns: 1fr 2fr; gap: 1.5rem; }

  /* comparaison sur deux colonnes */
  .compare { grid-template-columns: 1fr 1fr; }

  /* compétences sur deux colonnes */
  .competence-grid { grid-template-columns: 1fr 1fr; }

  /* contact : contenu + bouton côte à côte, bouton à largeur naturelle */
  .contact-option { grid-template-columns: 1fr auto; }
  .contact-option .btn-p, .contact-option .btn-o { width: auto; justify-content: normal; }

  /* coordonnées sur deux colonnes */
  .coords-grid { grid-template-columns: 1fr 1fr; }
}