/* ============================================================
   GO MANAGEMENT — feuille de style principale
   Palette : rouge #961E00 / gris foncé #414141 / gris clair #646464
   Police  : Calibri
   Structure inspirée de dodai-studio.com (mise en page, menu plein écran,
   sections pleine hauteur, bordeau vertical signature)
   ============================================================ */

:root{
  --cream: #F7F4EC;
  --cream-2: #EFEAE0;
  --red: #961E00;
  --red-dark: #6E1600;
  --dark: #414141;
  --grey: #646464;
  --line: rgba(65,65,65,0.16);
  --near-black: #1C1B19;
  --white: #FFFFFF;

  --font: "Calibri", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;

  --maxw: 1180px;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  font-family: var(--font);
  background: var(--cream);
  color: var(--dark);
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }

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

.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

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

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------------- Header ---------------- */

.site-header{
  position: sticky;
  top: 0;
  z-index: 60;
  width: 100%;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
  margin: 0 auto;
  will-change: top, max-width, box-shadow, border-radius;
  transition: top .35s ease,
              max-width .35s ease,
              border-radius .35s ease,
              box-shadow .35s ease,
              border-color .35s ease;
}
body.scrolled .site-header{ background: rgba(247,244,236,0.97); backdrop-filter: blur(6px); }
body.scrolled .desktop-nav{ gap: 20px; }
body.scrolled .desktop-nav a{ font-size: 12px; }
body:not(.scrolled) .site-header{ background: transparent; backdrop-filter: none; }

body.scrolled .site-header{
  top: 30px;
  max-width: min(calc(var(--maxw) - 110px), calc(100% - 24px));
  margin: 0 auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(28,27,25,0.14);
}

/* Sur mobile, Safari iOS gère mal la transition du `top` d'un élément
   position:sticky : la carte flottante se détache du scroll et reste
   plaquée à une position figée, chevauchant le contenu en permanence.
   On désactive donc le repli en carte flottante sous 860px : le header
   reste simplement collé en haut (top:0), sans décalage ni transition
   de position, seul le fond/flou change au scroll. */
@media (max-width: 860px){
  body.scrolled .site-header{
    top: 0;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    box-shadow: 0 6px 18px rgba(28,27,25,0.10);
  }
}

/* header-inner height kept constant to avoid scroll-jitter from layout reflow */

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

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.brand img{ height: 34px; width:auto; }

.desktop-nav{
  display:flex;
  align-items:center;
  gap: 24px;
  flex:1;
  justify-content:center;
  flex-wrap: wrap;
  row-gap: 8px;
}
.desktop-nav a{
  font-family: var(--font);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dark);
  padding: 8px 0;
  position: relative;
  white-space: nowrap;
}
.desktop-nav a:hover{ color: var(--red); }
.desktop-nav a.active{ color: var(--red); }
.desktop-nav a.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:1.5px;
  background: var(--red);
}
.desktop-nav .caret{ font-size: 11px; margin-left: 3px; opacity:.7; }

.nav-dropdown{ position:relative; }
.dropdown-panel{
  position:absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--cream);
  border: 1px solid var(--line);
  min-width: 190px;
  padding: 8px 0;
  opacity:0;
  visibility:hidden;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 70;
}
.nav-dropdown:hover .dropdown-panel{
  opacity:1;
  visibility:visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity .18s ease, transform .18s ease;
}
.dropdown-panel a{
  display:block;
  padding: 11px 24px;
  font-size: 14px;
  text-transform:none;
  letter-spacing: normal;
  color: var(--dark);
}
.dropdown-panel a:hover{ background: var(--cream-2); color: var(--red); }

.menu-btn{
  background:none;
  border:none;
  cursor:pointer;
  display:none;
  flex-direction:column;
  gap:5px;
  padding: 8px 2px;
}
.menu-btn span{
  width: 24px;
  height: 2px;
  background: var(--dark);
  display:block;
  transition: transform .25s ease, opacity .25s ease;
}
body.mobile-menu-open .menu-btn span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body.mobile-menu-open .menu-btn span:nth-child(2){ opacity:0; }
body.mobile-menu-open .menu-btn span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px){
  .header-inner{ padding-left: 20px; padding-right: 20px; }
  .desktop-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background: var(--cream);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding: 8px 28px 20px;
    max-height: calc(100vh - 80px);
    overflow-y:auto;
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
  }
  body.mobile-menu-open .desktop-nav{ display:flex; }
  .desktop-nav a{
    padding: 14px 0;
    font-size:15px;
    border-bottom:1px solid var(--line);
  }
  .desktop-nav > a:last-child{ border-bottom:none; }
  .desktop-nav a.active::after{ display:none; }
  .nav-dropdown{ width:100%; }
  .nav-dropdown > a{ display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
  .nav-dropdown .caret{
    display:inline-block;
    transition: transform .2s ease;
    padding: 6px 6px 6px 16px;
    margin: -6px -6px -6px 0;
  }
  .nav-dropdown.open > a .caret{ transform: rotate(180deg); }
  .dropdown-panel{
    position:static !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    transition:none !important;
    border:none;
    box-shadow:none;
    background:transparent;
    min-width:0;
    padding: 0 0 6px 18px;
    display:none;
  }
  .nav-dropdown.open > .dropdown-panel{ display:block !important; }
  .dropdown-panel a{
    padding: 11px 0 !important;
    font-size:14px !important;
    color: var(--dark) !important;
    text-transform:none !important;
    letter-spacing:normal !important;
    display:block !important;
  }
  .menu-btn{ display:flex; }
}

.header-actions{
  display:flex;
  align-items:center;
  gap: 22px;
  flex-shrink:0;
}

.header-cta{
  display:inline-block;
  padding: 12px 24px;
  background: var(--dark);
  color: var(--white);
  font-size: 13.5px;
  letter-spacing: .03em;
  border-radius: 4px;
  transition: background .2s ease;
  white-space: nowrap;
}
.header-cta:hover{ background: #262626; }

/* Très petits écrans (iPhone SE & co.) : logo + burger + CTA ne tiennent
   pas sur 320px à leur taille normale et débordaient la page. */
@media (max-width: 420px){
  .header-inner{ gap: 12px; padding-left: 16px; padding-right: 16px; }
  .brand img{ height: 27px; }
  .header-actions{ gap: 12px; }
  .header-cta{ padding: 10px 14px; font-size: 12.5px; }
}
/* ---------------- Eyebrow / signature red bar ---------------- */

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: bold;
  margin-bottom: 18px;
}
.eyebrow-center{ display:flex; width:100%; justify-content:center; }
.eyebrow::before{
  content:"";
  width: 22px;
  height: 2px;
  background: var(--red);
  display:inline-block;
}

/* ---------------- Definition card (brand word + meaning) ---------------- */

.define-card{
  display:grid;
  grid-template-columns: 1fr 1.3fr;
  grid-template-areas:
    "logo word"
    "logo list";
  border: 1px solid var(--line);
  background: var(--cream);
  border-radius: 4px;
  overflow:hidden;
}
.define-left{
  grid-area: logo;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 20px 30px;
  border-right: 1px solid var(--line);
}
.define-left img{ width: 100%; max-width: 150px; height:auto; }
.define-word-block{ grid-area: word; padding: 20px 44px 12px; }
.define-list-block{ grid-area: list; padding: 0 44px 22px; border-top: 1px solid var(--line); margin-top: 12px; padding-top: 14px; }
.define-word{
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight:600;
  color: var(--dark);
  display:flex;
  align-items:baseline;
  gap: 12px;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.define-pos{
  font-family: var(--font);
  font-size: 14px;
  font-weight: 300;
  font-style: italic;
  color: var(--grey);
  white-space:nowrap;
}
.define-phon{
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
  font-weight: normal;
  color: var(--grey);
  margin-left: 0;
  white-space:nowrap;
}
.define-list{
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0;
  margin:0;
}
.define-list li{
  display:flex;
  align-items:center;
  gap: 16px;
  margin-bottom: 22px;
}
.define-list li:last-child{ margin-bottom:0; }
.define-list .num{
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  color: var(--grey);
  flex: 0 0 auto;
}
.define-term{
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 500;
  color: var(--dark);
  border-bottom: 2px solid var(--red);
  padding-bottom: 4px;
  display:inline-block;
}
.define-list li:last-child span:not(.num){
  font-size: 17px;
  color: var(--grey);
}

@media (max-width: 700px){
  .define-card{
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "word"
      "list";
  }
  .define-left{ border-right:none; border-bottom:1px solid var(--line); padding:34px; }
  .define-word-block{ padding: 30px 26px 22px; text-align:center; }
  .define-word{ justify-content:center; flex-wrap:wrap; white-space:normal; }
  .define-phon{ white-space:normal; flex-basis:100%; text-align:center; margin-top:4px; }
  .define-list-block{ padding: 26px 26px 30px; margin-top:0; border-top: 1px solid var(--line); }
  .define-list li{ text-align:left; }
}

.redbar-block{
  border-left: 3px solid var(--red);
  padding-left: 26px;
}
@media (max-width: 600px){
  .redbar-block{ padding-left: 20px; margin-left: 8px; }
}

/* ---------------- Sections ---------------- */

section{
  padding: 140px 0;
}
section.tight{ padding: 84px 0; }
.offer-row-wrap{ margin-top: 56px; }
@media (max-width: 700px){
  .offer-row-wrap{ margin-top: 30px; }
  section.tight{ padding: 50px 0; }
}
.section-alt{ background: var(--cream-2); }
.section-dark{ background: var(--near-black); color: var(--cream); }

.hr{
  border:none;
  border-top: 1px solid var(--line);
  margin: 0;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--dark);
  line-height: 1.1;
  margin: 0 0 24px 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.section-dark h1, .section-dark h2, .section-dark h3{ color: var(--cream); }

h1{ font-size: clamp(40px, 6vw, 72px); }
h2{ font-size: clamp(30px, 4.2vw, 46px); }
h3{ font-size: clamp(21px, 2.6vw, 27px); }

p{ font-size: 17px; line-height: 1.75; color: var(--grey); margin: 0 0 18px 0; max-width: 62ch; }
.section-dark p{ color: rgba(247,244,236,0.72); }

.lede{ font-family: var(--font-display); font-weight:400; font-size: clamp(19px, 2.2vw, 25px); color: var(--dark); max-width: 46ch; line-height:1.5; }
.section-dark .lede{ color: var(--cream); }

/* ---------------- Hero ---------------- */

.hero{
  padding: 90px 0 100px;
  text-align:center;
}
.hero .wrap{ display:flex; flex-direction:column; align-items:center; }
.hero .eyebrow{ justify-content:center; }
.hero .eyebrow::before{ display:none; }
.hero h1{ max-width: 900px; }
.hero p.lede{ margin: 20px auto 34px; text-align:center; }

.hero-split{ text-align:left; padding: 100px 0 120px; }
.hero-split .wrap.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items:center;
  text-align:left;
}
.hero-split .eyebrow{ justify-content:flex-start; }
.hero-split .eyebrow::before{ display:inline-block; }
.hero-split h1{ max-width: 640px; }
.hero-split p.lede{ margin: 26px 0 40px; text-align:left; }
.hero-split .btn-row{ justify-content:flex-start; }
.hero-visual{ width:100%; }
.hero-visual img{ width:100%; height:auto; }

.hero-search-row{
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

/* La note "Recherche avancée" vit en bas de page, à côté du décompte
   d'articles (cf. .blog-footnote-row) : elle ne partage plus la rangée
   de la barre de recherche, qui garde ainsi exactement les mêmes
   dimensions que sur la page newsletters (même structure, rien avec quoi
   entrer en concurrence pour l'espace). */
.nl-search-note{ margin:0; font-size:11px; }
/* Garantit que la 1re ligne ("Recherche avancée : … l'un ou l'autre")
   ne se coupe jamais, même quand la ligne ne tient pas dans la largeur
   disponible (le <br> juste après force de toute façon la 2e ligne à
   commencer par "· -mot…"). Repassé en wrap normal sur mobile pour éviter
   tout débordement horizontal sur un petit écran. */
.nl-search-note-line1{ white-space:nowrap; }

.blog-footnote-row{
  display:flex;
  justify-content:center;
  align-items:baseline;
  flex-wrap:wrap;
  gap: 6px 24px;
}

@media (max-width: 900px){
  .hero{ padding: 44px 0 60px; }
  .hero-split{ padding: 44px 0 60px; }
  /* minmax(0,…) et non 1fr : un enfant à white-space:nowrap (ex. le lien
     "Nos newsletters" à côté de la recherche du blog) imposerait sinon sa
     largeur de min-content à toute la grille, et donc à la page entière. */
  .hero-split .wrap.hero-grid{ grid-template-columns: minmax(0, 1fr); text-align:center; gap: 12px; }
  .home-hero .wrap.hero-grid{ gap: 28px; }
  .hero-split .eyebrow{ justify-content:center; }
  .hero-split .eyebrow::before{ display:none; }
  .hero-split h1{ max-width: 100%; margin-left:auto; margin-right:auto; }
  .hero-split p.lede{ text-align:center; margin-left:auto; margin-right:auto; margin-bottom: 8px; }
  .hero-split .btn-row{ justify-content:center; }
  .hero-visual{ order:1; max-width: 420px; margin: 0 auto; }
  .hero-text{ order:-1; }
  .hero-search-row{ order:2; align-items:center; }
  .nl-search-wrap{ width:100%; flex-wrap: wrap; }
  .nl-search-input{ flex:1 1 100%; }
  .blog-footnote-row{ flex-direction:column; align-items:center; gap:6px; }
  .nl-search-note-line1{ white-space:normal; }
}

.btn-row{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 17px 30px;
  font-size: 15.5px;
  border-radius: 4px;
  transition: all .2s ease;
  border: 1px solid transparent;
}
.btn-primary{ background: var(--dark); color: var(--white); }
.btn-primary:hover{ background: #262626; }
.btn-outline{ border-color: var(--line); color: var(--dark); background: transparent; }
.btn-outline:hover{ border-color: var(--dark); }

.nl-search-newsletter-btn{
  padding: 6px 14px;
  font-size: 12px;
  gap: 6px;
  border-radius: 999px;
  border-color: var(--red);
  color: var(--red);
}
.nl-search-newsletter-btn:hover{ background: var(--red); color: #FFFFFF; }

/* ---------------- Offer cards (Coaching / Conseil / Formation / Séminaire) ---------------- */

.offer-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.offer-card{
  background: var(--cream);
  padding: 34px 26px;
  min-height: 220px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition: background .2s ease;
}
.offer-card:hover{ background: var(--cream-2); }
.offer-card h3{ margin-bottom: 10px; }
.offer-card p{ font-size: 15px; margin-bottom: 18px; }
.offer-card .go{ font-size: 13px; letter-spacing:.08em; color: var(--red); font-weight:bold; }

@media (max-width: 880px){
  .offer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .offer-grid{ grid-template-columns: 1fr; }
}

/* ---------------- Partial-frame columns (Dodai-style: top hairline + vertical dividers only) ---------------- */

.frame-row{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.frame-col{
  padding: 34px 32px;
  border-left: 1px solid var(--line);
}
.frame-col:first-child{ border-left: none; padding-left: 0; }
.frame-col .tag{
  display:block;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 14px;
}
.frame-col h3{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 27px);
  margin-bottom: 12px;
}
.frame-col p{ font-size: 14.5px; margin-bottom: 14px; }
.frame-col a.go{ font-size: 13px; letter-spacing:.06em; color: var(--red); font-weight:bold; }

@media (max-width: 860px){
  .frame-row{ grid-template-columns: 1fr 1fr; }
  .frame-col:nth-child(2){ border-left: 1px solid var(--line); }
  .frame-col:nth-child(odd){ border-left:none; }
}
@media (max-width: 560px){
  .frame-row{ grid-template-columns: 1fr; }
  .frame-col{ border-left:none !important; border-top: 1px solid var(--line); padding-left:0; }
  .frame-col:first-child{ border-top:none; }
}

/* ---------------- Phase-style blocks for Offres page ---------------- */

.phase{
  display:grid;
  grid-template-columns: 90px 1fr;
  gap: 28px;
  padding: 54px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 160px;
}
.phase-icon{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid var(--red);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--red);
  background: var(--cream-2);
}
.phase-icon svg{ width: 28px; height: 28px; }
.phase:last-child{ border-bottom: 1px solid var(--line); }
.phase-index{
  font-family: var(--font);
  font-size: 15px;
  color: var(--grey);
  letter-spacing: .08em;
}
.phase-body{ border-left: 3px solid var(--red); padding-left: 30px; }
.phase-tag{ font-size: 12.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--red); font-weight:bold; margin-bottom:10px; }
.phase ul{ margin: 18px 0 0 0; padding-left: 20px; color: var(--grey); }
.phase li{ margin-bottom: 6px; font-size:15.5px; }

@media (max-width: 700px){
  .phase{ grid-template-columns: 1fr; }
  .phase-index{ display:none; }
}

/* ---------------- Sector blocks (references page) ---------------- */

.sector-block{
  display:flex;
  align-items:flex-start;
  gap: 30px;
  padding: 30px 32px;
  border-radius: 16px;
  margin-bottom: 20px;
}
.sector-block:nth-child(odd){ background: var(--cream-2); }
.sector-block:nth-child(even){ background: transparent; border: 1px solid var(--line); flex-direction: row-reverse; }

.sector-icon{
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--red);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--red);
  box-shadow: 0 6px 16px rgba(150,30,0,0.08);
}
.sector-block:nth-child(even) .sector-icon{ border-color: var(--dark); color: var(--dark); box-shadow: 0 6px 16px rgba(28,27,25,0.08); }

.sector-content{ max-width: 64%; }
.sector-content h3{ font-size: clamp(19px, 2.2vw, 23px); margin-bottom: 8px; }
.sector-content p{ font-size: 17px; margin-bottom: 0; max-width: none; color: var(--dark); }
.sector-block:nth-child(even) .sector-content{ text-align: right; }

@media (max-width: 640px){
  .sector-block{ flex-direction: column !important; align-items:flex-start; gap: 16px; padding: 26px; }
  .sector-content{ max-width: none; }
  .sector-block:nth-child(even) .sector-content{ text-align: left; }
}

/* ---------------- Testimonials ---------------- */

.testi-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
@media (max-width: 900px){ .testi-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .testi-grid{ grid-template-columns: 1fr; } }

.testi-card{
  background: var(--white);
  border: 1px solid var(--line);
  padding: 30px 26px;
  display:flex;
  flex-direction:column;
  gap: 18px;
}
.testi-quote{ font-size: 15.5px; color: var(--dark); line-height:1.65; flex:1; }
.testi-person{ display:flex; align-items:center; gap:12px; }
.testi-person img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.testi-person .name{ font-size:14px; font-weight:bold; color: var(--dark); }
.testi-person .role{ font-size:12.5px; color: var(--grey); }

/* ---------------- Two column ---------------- */

.two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items:center;
}
.two-col-narrow{ grid-template-columns: 280px 1fr; align-items:center; }
.two-col-narrow .portrait{ max-width: 280px; }

@media (max-width: 860px){
  .two-col{ grid-template-columns: 1fr; gap: 32px; }
  .two-col-narrow .portrait{ max-width: 240px; margin: 0 auto; }
}

.portrait{
  width:100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  background: var(--cream-2);
}

/* ---------------- Lists with markers ---------------- */

.check-list{ list-style:none; margin:0; padding:0; }
.check-list-2col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
}
@media (max-width: 700px){
  .check-list-2col{ grid-template-columns: 1fr; }
}
.check-list li{
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  color: var(--dark);
  display:flex;
  gap:12px;
}
.check-list li:last-child{ border-bottom: 1px solid var(--line); }
.check-list li::before{ content:"—"; color: var(--red); font-weight:bold; }

/* ---------------- Stat row ---------------- */

.stat-row{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap: 0;
}
.stat{ padding: 10px 20px; text-align:center; border-left: 1px solid var(--line); }
.stat:first-child{ border-left:none; }
.stat .num{ font-family: var(--font-display); font-size: clamp(30px,4vw,42px); font-weight:600; color:var(--red); display:block; white-space:nowrap; }
.stat .lab{ font-size: 13px; color: var(--grey); margin-top:8px; }
@media (max-width: 700px){
  .stat-row{ grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3){ border-left:none; }
  .stat:nth-child(3), .stat:nth-child(4){ border-top: 1px solid var(--line); }
}

/* ---------------- Logos row ---------------- */

.logo-row{
  display:flex;
  flex-wrap:wrap;
  gap: 34px 48px;
  align-items:center;
  justify-content:center;
  opacity: .8;
}
.logo-row img{ height: 46px; width:auto; filter: grayscale(1); }

.client-word{
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--grey);
  letter-spacing: .01em;
  white-space: nowrap;
}

/* ---------------- Blog cards ---------------- */

.blog-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 26px;
}
@media (max-width: 900px){ .blog-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .blog-grid{ grid-template-columns: 1fr; } }

.blog-card{ border-top: 1px solid var(--line); padding-top: 20px; }
.blog-card .tag{ font-size: 12px; letter-spacing:.1em; text-transform:uppercase; color: var(--red); font-weight:bold; }
.blog-card h3{ margin: 10px 0 10px 0; font-size: 19px; }
.blog-card h3 a:hover{ color: #E8B7A6 !important; }
.blog-card p{ font-size: 14.5px; }
.blog-card .date{ font-size: 12.5px; color: var(--grey); }

/* ---------------- Contact section ---------------- */

.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } }

.contact-item{ margin-bottom: 26px; }
.contact-item .k{ font-size: 12.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--grey); margin-bottom:6px; }
.contact-item .v{ font-size: 16px; color: var(--dark); font-weight:normal; }
.contact-item .v a{ font-weight:bold; }

.form-field{ margin-bottom: 18px; }
.form-field label{ display:block; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color: var(--grey); margin-bottom:8px; }
.form-field input, .form-field textarea{
  width:100%;
  border:1px solid var(--line);
  background: var(--white);
  padding: 14px 16px;
  font-family: var(--font);
  font-size:15px;
  color: var(--dark);
}
.form-field textarea{ min-height: 130px; resize: vertical; }

/* ---------------- Footer ---------------- */

.site-footer{
  background: #414141;
  color: #FFFFFF;
  padding: 80px 0 30px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.3fr 0.9fr 0.9fr 0.9fr 1fr;
  gap: 34px;
  padding-top: 48px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(247,244,236,0.14);
}
@media (max-width: 1100px){ .footer-grid{ grid-template-columns: 1fr 1fr 1fr; gap: 32px; } }
@media (max-width: 700px){ .footer-grid{ grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 460px){ .footer-grid{ grid-template-columns: 1fr; gap: 28px; } }

.footer-logo{ font-size: 22px; color: #FFFFFF; font-weight:bold; margin-bottom: 16px; letter-spacing:.02em; }

.footer-grid > div:first-child p,
.footer-grid > div:first-child a{ color: rgba(255,255,255,0.8); font-family: var(--font); font-size: 17.5px; line-height:1.6; }
.footer-grid > div:first-child a:hover{ color: var(--red); }

.footer-col h4{
  display: inline-block;
  background: var(--red);
  color: #FFFFFF;
  font-size: 12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin-bottom: 12px; font-size: 15px; color: rgba(255,255,255,0.8); }
.footer-col a{ color: rgba(255,255,255,0.8); }
.footer-col a:hover{ color: var(--red); }

.footer-bottom{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: 12px;
  padding-top: 24px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}
.footer-bottom a{ color: rgba(255,255,255,0.5); }
.footer-bottom a:hover{ color: var(--red); }

/* ---------------- Newsletter signup form ---------------- */

.newsletter-form{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 480px;
}
.newsletter-form input[type="email"]{
  flex:1;
  min-width: 200px;
  padding: 14px 18px;
  font-family: var(--font);
  font-size: 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--dark);
}
.newsletter-form button{
  border:none;
  cursor:pointer;
  font-family: var(--font);
}
.newsletter-note{ font-size: 13px; margin-top: 10px; max-width: none; white-space: nowrap; }

.newsletter-success{
  font-size: 15px;
  font-weight: bold;
  color: var(--red);
  margin: 0;
  max-width: none;
}
.section-dark .newsletter-success,
.footer-newsletter .newsletter-success{ color: var(--cream); }

.footer-newsletter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 40px;
  padding-top: 34px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(247,244,236,0.14);
}
.footer-newsletter-text{ flex: 0 1 420px; }
.footer-newsletter h4{
  display: inline-block;
  background: var(--red);
  color: #FFFFFF;
  font-size: 12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.footer-newsletter .newsletter-note{ color: rgba(255,255,255,0.8); margin-top:0; }
.footer-newsletter .newsletter-form{ flex: 0 1 420px; margin: 0; }
.footer-newsletter .newsletter-form input[type="email"]{
  background: rgba(255,255,255,0.95);
  border: none;
}
.footer-newsletter .newsletter-form button{
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--red);
  color: #FFFFFF;
  font-size: 14px;
}
.footer-newsletter .newsletter-form button:hover{ background: var(--red-dark); }

@media (max-width: 720px){
  .footer-newsletter{ flex-direction:column; align-items:flex-start; gap:18px; }
  .footer-newsletter-text{ flex: 1 1 auto; }
  .footer-newsletter .newsletter-form{ flex: 1 1 auto; width:100%; }
  .newsletter-note{ white-space: normal !important; }
}

@media (max-width: 640px){
  .newsletter-form{ max-width: 100%; flex-direction:column; }
  .newsletter-form input[type="email"]{ width:100%; min-width:0; }
  .newsletter-form button{ width:100%; justify-content:center; }
}

/* ---------------- Utility ---------------- */

.center{ text-align:center; }
.mt-0{ margin-top:0; }
.small-note{ font-size: 13px; color: var(--grey); }
.small-note code{ background: rgba(0,0,0,0.05); border-radius: 4px; padding: 1px 5px; font-size: 12.5px; }

/* ---------------- Newsletter search page ---------------- */

.nl-search-wrap{
  display:flex;
  align-items:center;
  gap: 16px;
  margin-top: 32px;
  max-width: 100%;
  width: 100%;
  align-self: stretch;
  justify-content:flex-end;
}
.nl-search-input{
  flex:0 1 480px;
  padding: 17px 22px;
  font-family: var(--font);
  font-size: 15.5px;
  color: var(--dark);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.nl-search-input:focus{ outline:none; border-color: var(--red); }
/* Masque la croix native "effacer" des champs type=search (Chrome/Safari,
   et l'équivalent legacy Edge/IE) : sur la page blog, effacer se fait en
   retapant/sélectionnant, sans icône dédiée. */
#blogSearch::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
#blogSearch::-ms-clear{ display:none; width:0; height:0; }
.nl-search-count{
  font-size: 13px;
  color: var(--grey);
  white-space: nowrap;
}
.nl-search-count:empty{ display:none; }

/* minmax(0,…) et non 1fr : sinon la largeur mini d'une colonne est le
   min-content de la carte la plus large de la grille (un mot ou une URL
   insécable dans un seul article suffit alors à faire déborder la page). */
.nl-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 980px){ .nl-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px){ .nl-grid{ grid-template-columns: minmax(0, 1fr); } }

/* filet de sécurité : un titre ou une URL très long se coupe au lieu
   de pousser la carte au-delà de sa colonne. */
.nl-card h3,
.nl-card p,
.nl-card .nl-subs li{ overflow-wrap: break-word; }
.nl-tag-pill{ overflow-wrap: break-word; }

.nl-card{
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px 22px;
  background: var(--cream);
  cursor: pointer;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.nl-card:hover{
  box-shadow: 0 10px 26px rgba(28,27,25,0.10);
  transform: translateY(-3px);
  border-color: var(--red);
}
.nl-avatar{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--red);
  color: #FFFFFF;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--font-display);
  font-weight:600;
  font-size: 14px;
  margin-bottom: 12px;
}
.nl-avatar-dark{ background: var(--near-black); }
#testiGrid .nl-card p,
#homeTestiGrid .nl-card p{
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nl-see-more{
  display:inline-block;
  font-size: 12.5px;
  font-weight:bold;
  color: var(--red);
  margin-top: 6px;
}
.nl-card:hover .nl-see-more{ text-decoration: underline; }

.testi-modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(28,27,25,0.55);
  align-items:flex-start;
  justify-content:center;
  padding: 60px 16px;
  overflow-y:auto;
  z-index: 950;
}
.testi-modal-overlay.open{ display:flex; }
.testi-modal{
  background: var(--cream);
  border-radius: 14px;
  max-width: 520px;
  width:100%;
  padding: 40px 36px;
  position:relative;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
}
.testi-modal-close{
  position:absolute;
  top:14px; right:16px;
  background:none;
  border:none;
  font-size:22px;
  color: var(--grey);
  cursor:pointer;
  line-height:1;
}
.testi-modal-avatar{
  width: 56px;
  height: 56px;
  border-radius:50%;
  background: var(--red);
  color:#FFFFFF;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--font-display);
  font-weight:600;
  font-size: 19px;
  margin-bottom: 20px;
}
.testi-modal-quote{ font-size:18px; color: var(--dark); line-height:1.6; margin-bottom:22px; max-width:none; }
.testi-modal-name{ font-size:14px; font-weight:bold; color: var(--dark); }
.testi-modal-name a{ color:inherit; }
.testi-modal-name a:hover{ color: var(--red); }
.testi-modal-role{ font-size:13px; color: var(--grey); margin-top:2px; }
.nl-card-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom: 10px;
}
.nl-num{ font-family: var(--font-display); font-weight:600; color: var(--red); font-size: 15px; }
.nl-date{ font-size: 12.5px; color: var(--grey); white-space: nowrap; flex-shrink: 0; }
.nl-card h3{ font-size: 17px; margin-bottom: 12px; line-height:1.35; }
.nl-card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.nl-tag-pill{
  font-size: 11.5px;
  letter-spacing:.03em;
  color: var(--red);
  background: var(--cream-2);
  padding: 4px 10px;
  border-radius: 999px;
}
.testi-person-info{ min-width: 0; }
.testi-person-info .name{ font-size:13px; font-weight:bold; color: var(--dark); }
.testi-person-info .name a{ color:inherit; }
.testi-person-info .name a:hover{ color: var(--red); }
.testi-person-info .role{ font-size:12px; color: var(--grey); margin-top:2px; }
.addr-link{ color:inherit; text-decoration:none; }
.addr-link:hover{ color: var(--red); }

/* ---------------- Scroll reveal animations ---------------- */

.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.in-view{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}
.nl-card h3 a{ color: var(--dark); }
.nl-card h3 a:hover{ color: var(--red); }
.nl-subs{ list-style:none; margin:0; padding:0; }
.nl-subs li{
  font-size: 13px;
  color: var(--grey);
  padding: 5px 0 5px 14px;
  position:relative;
  line-height:1.4;
}
.nl-subs li::before{ content:"–"; position:absolute; left:0; color: var(--red); }
.nl-sub-link{ color:inherit; text-decoration:none; }
.nl-sub-link:hover{ color: var(--red); text-decoration:underline; }

/* ---------------- Floating chat widget ---------------- */

.chat-fab{
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--red);
  border: none;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 8px 22px rgba(28,27,25,0.25);
  z-index: 900;
  transition: transform .2s ease;
}
.chat-fab:hover{ transform: scale(1.06); }
.chat-fab svg{ width: 26px; height: 26px; }

.chat-panel{
  position: fixed;
  right: 24px;
  bottom: 92px;
  width: 340px;
  max-width: calc(100vw - 40px);
  background: var(--white);
  border-radius: 14px;
  overflow:hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.28);
  z-index: 900;
  display:none;
  flex-direction:column;
}
.chat-panel.open{ display:flex; }

.chat-panel-header{
  background: var(--red);
  color: #FFFFFF;
  padding: 16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size: 15px;
  font-weight:bold;
}
.chat-panel-header button{
  background:none;
  border:none;
  color:#FFFFFF;
  font-size:20px;
  cursor:pointer;
  line-height:1;
}

.chat-panel-body{
  padding: 30px 24px 20px;
  text-align:center;
}
.chat-panel-body img{ height: 44px; margin-bottom: 14px; }
.chat-panel-body .brand-name{ font-family: var(--font-display); font-size: 19px; font-weight:600; color: var(--dark); margin-bottom: 4px; }
.chat-panel-body p{ font-size: 14px; color: var(--grey); margin: 14px 0 0; max-width: none; }

.chat-panel-form{
  border-top: 1px solid var(--line);
  padding: 14px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.chat-panel-form input[type="email"],
.chat-panel-form input[type="number"]{
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--dark);
}
.chat-panel-captcha-label{
  font-size: 12.5px;
  color: var(--grey);
  margin: -4px 0 0;
}
.chat-panel-form textarea{
  flex:1;
  resize:none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font);
  font-size: 14px;
  height: 42px;
  color: var(--dark);
}
.chat-panel-form button{
  background: var(--red);
  color:#FFFFFF;
  border:none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  cursor:pointer;
  white-space:nowrap;
}
.chat-panel-form button:hover{ background: var(--red-dark); }
.chat-panel-form.hide{ display:none; }
.chat-panel-error{
  display:none;
  font-size: 12.5px;
  color: var(--red);
  margin: 4px 0 0;
  max-width: none;
}
.chat-panel-error.show{ display:block; }

/* Piège à robots : un champ bien réel (pas type=hidden, trop connu comme
   motif de piège) mais placé hors de l'écran, jamais vu ni rempli par une
   personne, que les robots génériques remplissent aveuglément. */
.hp-field{
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.chat-panel-success{
  display:none;
  padding: 30px 26px 34px;
  text-align:center;
}
.chat-panel-success.show{ display:block; }
.chat-panel-success svg{ width:40px; height:40px; margin-bottom:14px; }
.chat-panel-success p{ font-size: 14px; color: var(--dark); margin:0; max-width:none; }

.form-error{
  display:none;
  font-size: 13px;
  color: var(--red);
  margin-top: 10px;
}
.form-error.show{ display:block; }
form#mainContactForm.hide{ display:none; }
.form-success{
  display:none;
  text-align:center;
  padding: 40px 20px;
}
.form-success.show{ display:block; }
.form-success svg{ margin-bottom:16px; }
.form-success p{ font-size:16px; color:var(--dark); }

@media (max-width: 480px){
  .chat-panel{ right: 16px; bottom: 84px; }
  .chat-fab{ right: 16px; bottom: 16px; }
}

/* ==========================================================================
   Nos références — mise en page "filtres + cartes"
   Utilise les tokens existants du site : var(--red), var(--dark), var(--cream)
   ========================================================================== */

:root {
  --ref-red: var(--red, #961E00);
  --ref-dark: var(--dark, #414141);
  --ref-cream: var(--cream, #F7F4EC);
}

.references-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.references-page .eyebrow {
  color: var(--ref-red);
  font-family: Calibri, sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.references-page h1 {
  font-family: 'Playfair Display', serif;
  color: var(--ref-dark);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin: 0 0 0.75rem;
}

.references-intro {
  color: var(--ref-dark);
  font-family: Calibri, sans-serif;
  font-size: 1.05rem;
  max-width: 640px;
  margin: 0 0 2rem;
}

@media (min-width: 900px) {
  .references-intro {
    max-width: none;
    white-space: nowrap;
  }
}

/* Filtres */
.ref-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.ref-filter {
  font-family: Calibri, sans-serif;
  font-size: 0.85rem;
  color: var(--ref-dark);
  background: var(--ref-cream);
  border: 1px solid rgba(65, 65, 65, 0.15);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ref-filter:hover {
  border-color: var(--ref-red);
}

.ref-filter.is-active {
  background: var(--ref-red);
  border-color: var(--ref-red);
  color: var(--ref-cream);
}

/* Grille de cartes */
.ref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}

.ref-card {
  background: var(--ref-cream);
  border-radius: 12px;
  padding: 1.1rem 0.75rem;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ref-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(65, 65, 65, 0.12);
}

.ref-card.is-hidden {
  display: none;
}

/* Cartes liees au site officiel du client */
.ref-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.ref-card-link:has(.ref-card.is-hidden) {
  display: none;
}

.ref-avatar {
  width: 40px;
  height: 40px;
  margin: 0 auto 0.6rem;
  border-radius: 8px;
  background: var(--ref-red);
  position: relative;
}

/* L'initiale est injectée en CSS via une variable posée par le JS,
   pour ne pas dupliquer le texte du nom dans le HTML */
.ref-avatar::after {
  content: attr(data-initial);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ref-cream);
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1rem;
}

.ref-name {
  font-family: Calibri, sans-serif;
  font-weight: 700;
  color: var(--ref-dark);
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.3;
}

.ref-sector {
  font-family: Calibri, sans-serif;
  color: rgba(65, 65, 65, 0.6);
  font-size: 0.75rem;
  margin: 0.15rem 0 0;
  display: none;
}

.ref-grid.show-sectors .ref-sector {
  display: block;
}

.ref-empty {
  text-align: center;
  color: var(--ref-dark);
  font-family: Calibri, sans-serif;
  padding: 2rem 0;
}

@media (max-width: 480px) {
  .ref-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}