:root {
  --nav-height: 4.25rem;
  /* Repli AVANT que le script ne mesure. Il valait 7,4rem (118px), l ancienne
     hauteur barre + bandeau defilant ; ce bandeau est masque partout
     (#services-ticker { display: none }), la barre seule fait 4,25rem. Un
     repli trop grand ne se corrigeait pas tout seul — .site-header porte
     `min-height: var(--site-header-height)`, la variable se nourrissait donc
     d elle-meme — et il provoque en plus un saut de mise en page a l arrivee
     du script. Il doit rester egal a --nav-height tant que le bandeau est
     masque. */
  --site-header-height: 4.25rem;
  --green: #2d8628;
  --green-dark: #1f611d;
  --green-deep: #154313;
  --green-light: #e8f4e7;
  --green-mid: #38a534;
  --white: #ffffff;
  --off-white: #f8faf9;
  --gray-100: #f0f2f1;
  --gray-200: #e0e4e2;
  --gray-400: #9aa39d;
  --gray-500: #6b7570;
  --gray-600: #4d5c54;
  --gray-800: #19334e;
  --accent: #f5a623;
  --accent-dark: #b8790a;
  --primary: var(--green);
  --primary-dark: var(--green-dark);
  --primary-light: var(--green-light);
  --border: var(--gray-200);
  --text: var(--gray-800);
  --text-muted: var(--gray-600);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.07);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.1);
  --radius-md: var(--radius-sm);
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Inter remplace Source Sans 3 : hauteur d'x superieure, l/I/1 non
     ambigus, diacritiques complets. Remplacement 1:1 — aucun poids de
     police ajoute. */
  --font-body: 'Inter', 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --shadow: 0 2px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Fluid typography scale */
  /* Plancher remonte de 0,65 a 0,72rem : sur telephone cette echelle servait
     les pastilles de certification, les etiquettes de public et les details
     d experience a 10,7px. Le plafond ne bouge pas. */
  --text-xs: clamp(0.72rem, 0.6rem + 0.28vw, 0.75rem);
  --text-sm: clamp(0.78rem, 0.72rem + 0.32vw, 0.875rem);
  --text-base: clamp(0.875rem, 0.8rem + 0.38vw, 1rem);
  --text-md: clamp(0.925rem, 0.85rem + 0.42vw, 1.05rem);
  --text-lg: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-xl: clamp(1.05rem, 0.95rem + 0.6vw, 1.25rem);
  --text-2xl: clamp(1.2rem, 1.05rem + 0.85vw, 1.5rem);
  --text-3xl: clamp(1.45rem, 1.2rem + 1.15vw, 1.875rem);
  --text-4xl: clamp(1.7rem, 1.35rem + 1.65vw, 2.5rem);
  --text-5xl: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
  --text-hero: clamp(1.85rem, 1.1rem + 4.2vw, 4rem);
  --text-display: clamp(2.25rem, 1.5rem + 3.5vw, 3.5rem);
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.55;
  --leading-relaxed: 1.75;
}

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

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

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--gray-800);
  background: var(--white);
  overflow-x: hidden;
  line-height: var(--leading-normal);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

p, li, .testimonial-text, .service-card p {
  hyphens: auto;
  -webkit-hyphens: auto;
}

h1, h2, h3, h4, h5, .btn, .badge, .nav-logo-text, .price-range {
  hyphens: manual;
  -webkit-hyphens: manual;
}

body.menu-open {
  overflow: hidden;
}
body.scroll-locked {
  overflow: hidden;
}
html.scroll-locked {
  overflow: hidden;
}

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

/* Visible pour les lecteurs d'ecran et les moteurs, invisible a l'oeil.
   Sert aux <h2> qui retablissent le plan du document la ou l'intitule visible
   est un <span> a variantes responsives qu'on ne peut pas convertir. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  overflow-wrap: break-word;
  text-wrap: balance;
}
h1 { font-size: var(--text-hero); font-weight: 800; line-height: var(--leading-tight); }
h2 { font-size: var(--text-4xl); font-weight: 700; line-height: var(--leading-snug); }
h3 { font-size: var(--text-2xl); font-weight: 600; line-height: var(--leading-snug); }
h4 { font-size: var(--text-xl); font-weight: 600; line-height: var(--leading-snug); }
h5 { font-size: var(--text-lg); font-weight: 600; line-height: var(--leading-snug); }
p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--gray-600);
  max-width: 65ch;
}
.section-header p,
.hero-subtitle,
.about-content > p,
.booking-content p,
.policy-content p {
  max-width: none;
}

/* ── UTILITIES ── */
.container {
  width: 100%;
  /* Le contenu suivait une largeur fixe pendant que l ecran grandissait : a
     2560 px il n occupait plus que 47 pour cent de la fenetre, contre 88 pour
     cent sur un ecran 1366. La composition doit se lire pareil quel que soit
     le moniteur, donc la largeur suit la fenetre au-dela de 1200 px, avec un
     plafond pour que les lignes de texte ne s etirent pas sans fin. */
  max-width: clamp(1200px, 88vw, 1800px);
  margin: 0 auto;
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
}
/* Le rembourrage plafonnait a 3,5rem des 933px de large, alors que .container
   continue de s elargir jusqu a 1800px et que toutes les tailles de texte sont
   en cqw : a 1920 la page etait 1,6x plus large avec les memes bandes de 56px,
   et les sections se serraient. Le plafond suit maintenant la largeur. */
.section { padding: clamp(2.5rem, 5.5vw, 6.5rem) 0; }
.section-sm { padding: clamp(1.75rem, 3.5vw, 4rem) 0; }
.section > .container {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.text-green { color: var(--green); }
.text-accent { color: var(--accent-dark); }
.badge {
  display: inline-block; font-size: var(--text-xs); font-weight: 600; font-family: var(--font-display);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.35rem 1rem; border-radius: 100px;
  background: var(--green-light); color: var(--green-dark);
  margin-bottom: 1rem;
}
.badge-accent {
  background: #fff8e1; color: var(--accent-dark);
}
/* Card grids — equal columns, stretch, consistent gaps */
.grid-2,
.grid-3,
.grid-4,
.testimonials-grid,
.portfolio-grid,
.catalogue-group__list,
.process-steps {
  display: grid;
  align-items: stretch;
  justify-items: stretch;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.grid-2 > *,
.grid-3 > *,
.grid-4 > *,
.testimonials-grid > *,
.portfolio-grid > *,
.catalogue-group__list > *,
.process-steps > * {
  min-width: 0;
}
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
/* Center a lone card on the last row (3-column grids) */
@media (min-width: 641px) {
  .grid-3 > .service-card:last-child:nth-child(3n + 1):not(:only-child) {
    grid-column: 2;
  }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .grid-3 > .service-card:last-child:nth-child(2n + 1):not(:only-child) {
    grid-column: auto;
  }
  .grid-3 > .service-card:last-child:nth-child(2n + 1):not(:only-child):last-child {
    grid-column: 1 / -1;
    max-width: calc((100% - clamp(1.25rem, 2.5vw, 1.75rem)) / 2);
    justify-self: center;
  }
}
@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }
  .grid-3 > .service-card:last-child:nth-child(3n + 1):not(:only-child) {
    grid-column: auto;
    max-width: none;
    justify-self: stretch;
  }
}
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-md);
  padding: clamp(0.7rem, 2vw, 0.85rem) clamp(1.1rem, 3vw, 1.75rem);
  border-radius: var(--radius-sm);
  text-decoration: none; cursor: pointer; border: none;
  transition: var(--transition);
}
.btn-primary {
  background: var(--green); color: var(--white);
}
.btn-primary:hover { background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(45,134,40,0.35); }
.btn-outline {
  background: transparent; color: var(--green); border: 2px solid var(--green);
}
.btn-outline:hover { background: var(--green); color: var(--white); transform: translateY(-2px); }
.btn-white { background: var(--white); color: var(--green); }
.btn-white:hover { background: var(--green-light); transform: translateY(-2px); }
.btn-accent { background: var(--accent); color: var(--gray-800); }
.btn-accent:hover { background: var(--accent-dark); color: var(--white); transform: translateY(-2px); }
.btn-lg {
  padding: clamp(0.85rem, 2vw, 1rem) clamp(1.25rem, 4vw, 2.25rem);
  font-size: var(--text-lg);
}

/* ── NAV + TICKER (fixed header on home) ── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: var(--site-header-height);
  pointer-events: none;
}
.site-header #navbar,
.site-header #services-ticker {
  pointer-events: auto;
}
body.has-fixed-header .site-header #services-ticker {
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
html[lang="en"] .i18n-bilingual .i18n-fr {
  display: none;
}
html[lang="en"] .i18n-bilingual .i18n-en,
html[lang="en"] .i18n-bilingual .i18n-en[hidden] {
  display: block;
}
html:not([lang="en"]) .i18n-bilingual .i18n-en {
  display: none;
}
body.has-fixed-header .site-header #navbar {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
  flex-shrink: 0;
}
body:not(.has-fixed-header) #navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
#navbar {
  padding: max(0.7rem, env(safe-area-inset-top)) 0 0.7rem;
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
}
body.has-fixed-header #navbar:not(.scrolled) {
  background: var(--green-deep);
  box-shadow: none;
}
body:not(.has-fixed-header) #navbar,
#navbar.scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}
#navbar.scrolled {
  padding: 0.65rem 0;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(0.5rem, 2vw, 2rem); min-width: 0;
}
.nav-logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; min-width: 0; }
.nav-logo-icon {
  flex-shrink: 0;
  width: clamp(34px, 8vw, 38px);
  height: clamp(34px, 8vw, 38px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.brand-mark {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}
/* Le logo de la barre de navigation reste fixe : une rotation permanente
   attire l'oeil en continu et concurrence le contenu de la page. */
.brand-mark--sm { width: 32px; height: 32px; }
.brand-mark--md { width: clamp(34px, 8vw, 38px); height: clamp(34px, 8vw, 38px); }
.brand-mark__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.nav-logo-text {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  color: var(--white); letter-spacing: 0.02em;
  white-space: nowrap;
}
.nav-logo--full {
  gap: 0;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(280px, 48vw);
}
.nav-logo-full__img {
  display: block;
  height: clamp(34px, 8vw, 48px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  border-radius: 6px;
}
#navbar.scrolled .nav-logo-text { color: var(--green-dark); }
.nav-links {
  margin-left: auto;
  margin-right: clamp(0.5rem, 2vw, 1.25rem);
  display: flex; align-items: center; gap: 0.15rem; list-style: none;
  flex-shrink: 1; min-width: 0;
}
.nav-links a {
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
  color: rgba(255,255,255,0.9); text-decoration: none;
  padding: 0.5rem 0.85rem; border-radius: var(--radius-sm);
  transition: var(--transition);
}
#navbar.scrolled .nav-links a { color: var(--gray-800); }
.nav-links a:hover { background: rgba(255,255,255,0.15); color: var(--white); }
#navbar.scrolled .nav-links a:hover { background: var(--green-light); color: var(--green); }
.nav-cta { display: flex; align-items: center; gap: 0.75rem; }
.lang-toggle {
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
#navbar.scrolled .lang-toggle,
.page-policy #navbar .lang-toggle,
.page-portfolio #navbar .lang-toggle,
.page-design #navbar .lang-toggle,
.page-about #navbar .lang-toggle,
.page-pricing #navbar .lang-toggle,
.page-catalogue #navbar .lang-toggle,
.page-service #navbar .lang-toggle,
.page-sitemap #navbar .lang-toggle {
  border-color: var(--gray-200);
}
.lang-toggle__btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xs);
  padding: 0.42rem 0.7rem;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: var(--transition);
  line-height: 1;
}
#navbar.scrolled .lang-toggle__btn,
.page-policy #navbar .lang-toggle__btn,
.page-portfolio #navbar .lang-toggle__btn,
.page-design #navbar .lang-toggle__btn,
.page-about #navbar .lang-toggle__btn,
.page-pricing #navbar .lang-toggle__btn,
.page-catalogue #navbar .lang-toggle__btn,
.page-service #navbar .lang-toggle__btn,
.page-sitemap #navbar .lang-toggle__btn {
  color: var(--gray-500);
}
.lang-toggle__btn.is-active {
  background: var(--white);
  color: var(--green);
}
#navbar.scrolled .lang-toggle__btn.is-active,
.page-policy #navbar .lang-toggle__btn.is-active,
.page-portfolio #navbar .lang-toggle__btn.is-active,
.page-design #navbar .lang-toggle__btn.is-active,
.page-about #navbar .lang-toggle__btn.is-active,
.page-pricing #navbar .lang-toggle__btn.is-active,
.page-catalogue #navbar .lang-toggle__btn.is-active,
.page-service #navbar .lang-toggle__btn.is-active,
.page-sitemap #navbar .lang-toggle__btn.is-active {
  background: var(--green);
  color: var(--white);
}
.lang-toggle__btn:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.18);
}
#navbar.scrolled .lang-toggle__btn:hover:not(.is-active),
.page-policy #navbar .lang-toggle__btn:hover:not(.is-active),
.page-portfolio #navbar .lang-toggle__btn:hover:not(.is-active),
.page-design #navbar .lang-toggle__btn:hover:not(.is-active),
.page-about #navbar .lang-toggle__btn:hover:not(.is-active),
.page-pricing #navbar .lang-toggle__btn:hover:not(.is-active),
.page-catalogue #navbar .lang-toggle__btn:hover:not(.is-active),
.page-service #navbar .lang-toggle__btn:hover:not(.is-active),
.page-sitemap #navbar .lang-toggle__btn:hover:not(.is-active) {
  background: var(--green-light);
  color: var(--green);
}
.mobile-lang-toggle {
  display: inline-flex;
  margin-bottom: 0.5rem;
}
.mobile-lang-toggle .lang-toggle__btn {
  color: rgba(255, 255, 255, 0.9);
  min-width: 3.25rem;
}
.mobile-lang-toggle .lang-toggle__btn.is-active {
  background: var(--white);
  color: var(--green-deep);
}
.mobile-lang-toggle .lang-toggle__btn:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
}
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px; cursor: pointer;
  padding: 0.5rem; background: none; border: none;
}
.nav-hamburger span {
  display: block; width: 24px; height: 2px; background: var(--white);
  transition: var(--transition); border-radius: 2px;
}
#navbar.scrolled .nav-hamburger span { background: var(--gray-800); }
.mobile-menu {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--green-deep); z-index: 1000; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.5rem;
  padding: max(1.5rem, env(safe-area-inset-top)) 1.5rem max(1.5rem, env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700;
  color: var(--white); text-decoration: none; opacity: 0.85;
  transition: var(--transition);
}
.mobile-menu a:hover { opacity: 1; }
.mobile-close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  background: none; border: none; color: var(--white);
  font-size: 2rem; cursor: pointer; line-height: 1;
}

/* ── HERO ── */
#hero {
  min-height: 100vh; display: flex; align-items: center;
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-dark) 50%, var(--green) 100%);
}
.hero-bg-pattern {
  position: absolute; inset: 0; opacity: 0.06;
  background-image: radial-gradient(circle at 20% 80%, white 1px, transparent 1px),
    radial-gradient(circle at 80% 20%, white 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, white 0.5px, transparent 0.5px);
  background-size: 60px 60px, 80px 80px, 40px 40px;
}
.hero-circle-1 {
  position: absolute; right: -100px; top: -100px;
  width: 500px; height: 500px; border-radius: 50%;
  background: rgba(255,255,255,0.04);
}
.hero-circle-2 {
  position: absolute; right: 100px; bottom: -200px;
  width: 400px; height: 400px; border-radius: 50%;
  background: rgba(255,255,255,0.03);
}
.hero-content {
  position: relative; z-index: 1;
  /* Le pied valait clamp(3rem, 6vw, 5rem), soit 80px a 1440 : ajoute aux 118px
     d en-tete fixe, il poussait le bas de la mosaique — boutons et touches
     a·s·d — sous la ligne de flottaison d un portable 1440x900. Ramene a 48px,
     tout l interactif du hero passe au-dessus du pli jusqu a 1280x800. */
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2rem) clamp(2rem, 4vw, 3rem);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 38%);
  gap: clamp(1.5rem, 5vw, 4rem);
  /* stretch: the trust column matches the height of the text column */
  align-items: stretch;
  width: 100%;
}
.hero-trust { height: 100%; justify-content: center; }
.hero-trust-card { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
.hero-copy {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 2.8vw, 2rem);
  max-width: 42rem;
  min-width: 0;
  padding-inline: clamp(0.75rem, 4vw, 2.5rem);
  padding-block: clamp(0.25rem, 1.5vw, 1rem);
}
.hero-visual {
  order: 2;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  height: 100%;
  min-height: clamp(220px, 38vw, 440px);
}
.hero-logo-float-wrap {
  position: relative;
  z-index: 2;
  width: fit-content;
  max-width: min(280px, 70vw);
  flex-shrink: 0;
  overflow: visible;
  background: none;
}
.hero-logo-float {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: auto;
  height: auto;
  line-height: 0;
  overflow: visible;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent !important;
  cursor: pointer;
  border-radius: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none !important;
  outline: none !important;
  -webkit-user-select: none;
  user-select: none;
}
.hero-logo-float:focus,
.hero-logo-float:active,
.hero-logo-float:focus-visible {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
.hero-logo-float__motion {
  display: inline-block;
  line-height: 0;
  transform-origin: center center;
  pointer-events: none;
}
@media (min-width: 1025px) {
  .hero-logo-float__motion {
    will-change: transform;
    animation: hero-logo-spiral-zoom 28s linear infinite;
  }
}
@media (min-width: 769px) {
  .hero-logo-float:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 4px;
  }
}
.hero-logo-float__tip {
  position: absolute;
  z-index: 3;
  bottom: calc(100% + 0.65rem);
  left: 50%;
  transform: translateX(-50%);
  max-width: min(16rem, 72vw);
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.97);
  color: var(--green-deep);
  border: 1px solid rgba(255, 255, 255, 0.65);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: var(--leading-snug);
  text-align: center;
  white-space: normal;
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(7, 61, 30, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  -webkit-font-smoothing: antialiased;
}
.hero-logo-float__tip[hidden] {
  display: none !important;
}
.hero-logo-float__tip--show,
.hero-logo-float__tip--static {
  opacity: 1;
  visibility: visible;
}
@media (hover: none), (pointer: coarse), (max-width: 768px) {
  .hero-logo-float,
  .hero-logo-float:focus,
  .hero-logo-float:active,
  .hero-logo-float:focus-visible {
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
  }
}
.hero-logo-float__tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.97);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12));
}
.hero-logo-float__img {
  display: block;
  width: min(280px, 70vw);
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.22));
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
@media (min-width: 1025px) {
  .hero-logo-float-wrap {
    max-width: clamp(200px, 34vw, 420px);
  }
  .hero-logo-float__img {
    width: clamp(200px, 34vw, 420px);
  }
}

.pull-refresh-indicator {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 9999;
  transform: translateX(-50%) translateY(0);
  margin-top: calc(env(safe-area-inset-top, 0px) + 0.35rem);
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: rgba(15, 61, 46, 0.92);
  color: #f4f7f5;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.pull-refresh-indicator:not(:empty) {
  opacity: 1;
}
.pull-refresh-indicator--ready {
  background: rgba(34, 120, 84, 0.95);
}
/* Uneven keyframe spacing = slow drift/zoom vs fast spiral bursts */
@keyframes hero-logo-spiral-zoom {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.88);
  }
  14% {
    transform: translate3d(10px, -8px, 0) rotate(48deg) scale(0.94);
  }
  22% {
    transform: translate3d(14px, -12px, 0) rotate(72deg) scale(1);
  }
  26% {
    transform: translate3d(16px, -14px, 0) rotate(140deg) scale(1.1);
  }
  30% {
    transform: translate3d(14px, -16px, 0) rotate(180deg) scale(1.12);
  }
  48% {
    transform: translate3d(6px, -18px, 0) rotate(220deg) scale(1.04);
  }
  58% {
    transform: translate3d(-4px, -16px, 0) rotate(252deg) scale(0.96);
  }
  68% {
    transform: translate3d(-12px, -10px, 0) rotate(288deg) scale(0.9);
  }
  72% {
    transform: translate3d(-14px, -6px, 0) rotate(300deg) scale(0.88);
  }
  76% {
    transform: translate3d(-12px, 2px, 0) rotate(380deg) scale(1.08);
  }
  80% {
    transform: translate3d(-8px, 4px, 0) rotate(420deg) scale(1.1);
  }
  90% {
    transform: translate3d(4px, 0, 0) rotate(480deg) scale(0.96);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(540deg) scale(0.88);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-logo .brand-mark {
    animation: none;
  }
  .hero-logo-float__motion {
    animation: none;
    will-change: auto;
    transform: none;
  }
}
.hero-title { font-size: var(--text-hero); }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin: 0;
  padding-inline-start: clamp(0.5rem, 1.5vw, 1rem);
}
.hero-eyebrow::before {
  content: ''; display: block; width: clamp(14px, 3vw, 20px); height: 2px;
  background: var(--accent); flex-shrink: 0;
}
.hero-title {
  color: var(--white);
  margin: 0;
  padding-inline-start: clamp(0.25rem, 1.2vw, 0.75rem);
  max-width: min(100%, 16em);
}
.hero-title > span { color: inherit; }
.hero-title span span { color: var(--accent); }
.hero-subtitle {
  color: rgba(255,255,255,0.78);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-width: 52ch;
  padding-inline-start: clamp(0.5rem, 2vw, 1.25rem);
}
.hero-actions {
  display: flex;
  gap: clamp(0.65rem, 2vw, 1rem);
  flex-wrap: wrap;
  margin: 0;
  padding-inline-start: clamp(0.25rem, 1.5vw, 1rem);
  padding-top: clamp(0.25rem, 1vw, 0.75rem);
}
.hero-stats {
  display: flex;
  gap: clamp(1rem, 3.5vw, 2.5rem);
  flex-wrap: wrap;
  margin: 0;
  padding-inline-start: clamp(0.5rem, 2vw, 1.25rem);
  padding-top: clamp(0.5rem, 1.5vw, 1.25rem);
}
.hero-stat-item { text-align: center; }
.hero-stat-num {
  font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800;
  color: var(--white); line-height: 1;
  min-width: 2.75ch;
  font-variant-numeric: tabular-nums;
}
.hero-stat-label {
  font-size: var(--text-xs); color: rgba(255,255,255,0.6);
  margin-top: 0.25rem; line-height: var(--leading-snug);
}
.hero-stat-divider { width: 1px; background: rgba(255,255,255,0.2); align-self: stretch; }

/* ── SERVICES TICKER ── */
#services-ticker {
  background: var(--green-deep);
  padding: 0.6rem 0;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.08);
}
body.has-fixed-header {
  scroll-padding-top: var(--site-header-height, 7.5rem);
}
body.has-fixed-header #hero {
  padding-top: var(--site-header-height, 7.5rem);
  min-height: 100vh;
  box-sizing: border-box;
}
body.has-fixed-header #hero .hero-content {
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
}
/* Ecrans bas (portables 1366x768, fenetres non maximisees) : le hero cesse
   d exiger 100vh, sinon il se contente de deborder. Ses rembourrages se
   resserrent pour que la mosaique entiere reste visible sans defiler. */
@media (min-width: 1025px) and (max-height: 820px) {
  body.has-fixed-header #hero { min-height: auto; }
  body.has-fixed-header #hero .hero-content { padding-top: 1.25rem; }
  #hero .hero-content { padding-bottom: 1.5rem; }
}
.ticker-track {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  animation: ticker 32s linear infinite;
  width: max-content;
  will-change: transform;
}
.ticker-badge {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 100px;
  border: 1px solid transparent;
}
.ticker-badge--lang {
  color: #e8fff0;
  background: rgba(110, 231, 160, 0.22);
  border-color: rgba(110, 231, 160, 0.45);
}
.ticker-badge--design {
  color: #fff8e1;
  background: rgba(240, 180, 41, 0.28);
  border-color: rgba(240, 180, 41, 0.55);
}
a.ticker-badge-link {
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
a.ticker-badge-link:hover {
  transform: scale(1.06);
  filter: brightness(1.08);
}
a.ticker-badge-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
  transform: scale(1.06);
}
a.ticker-badge-link:active {
  transform: scale(1.02);
}
.ticker-divider {
  flex-shrink: 0;
  width: 2px;
  height: 1.25rem;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(110, 231, 160, 0.2), rgba(255,255,255,0.5), rgba(240, 180, 41, 0.35));
  margin: 0 0.25rem;
}
.ticker-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ticker-item--lang {
  color: rgba(200, 245, 220, 0.95);
}
.ticker-item--lang .ticker-dot {
  background: #6ee7a0;
  box-shadow: 0 0 0 2px rgba(110, 231, 160, 0.25);
}
.ticker-item--design {
  color: rgba(255, 236, 179, 0.98);
}
.ticker-item--design .ticker-dot {
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(240, 180, 41, 0.35);
}
.ticker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── SECTION HEADERS ── */
.section-header {
  text-align: center;
  max-width: 680px;
  /* Meme raison que .section : l ecart sous l en-tete ne doit pas rester fige
     a 38px quand la section, elle, double de largeur. */
  margin: 0 auto clamp(1.6rem, 3vw, 3.5rem);
}
.section-header h2 { margin-bottom: 1rem; }
.section-header p { font-size: var(--text-md); line-height: var(--leading-relaxed); }
.section-header h2 { font-size: var(--text-4xl); }

/* ── ABOUT ── */
#about { background: var(--off-white); }
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: stretch;
}
.about-grid > * { min-width: 0; }
.about-image-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: 100%;
  min-height: 0;
}
.about-image-top {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.about-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  width: 100%;
  flex: 0 0 auto;
}
.about-cta-row .btn {
  margin-right: 0 !important;
  width: 100%;
  padding-inline: 0.75rem;
  justify-content: center;
}
.about-image-frame {
  /* Frame follows the photo's native ratio (1024x998) so nothing is cropped. */
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1024 / 998;
  min-height: 0;
  border-radius: var(--radius-lg);
  background: var(--green-dark);
  overflow: hidden;
  position: relative;
}
.about-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.about-content .cert-strip {
  margin-top: auto;
}
.about-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.about-name-overlay {
  position: absolute; bottom: 1.5rem; left: 1.5rem; right: 1.5rem;
  background: rgba(0,0,0,0.4); backdrop-filter: blur(10px);
  border-radius: var(--radius-sm); padding: 1rem;
  border: 1px solid rgba(255,255,255,0.15);
}
.about-name-overlay h4,
.about-name-overlay .about-name-overlay__name { font-family: var(--font-display); font-weight: 700; color: var(--white); font-size: var(--text-base); line-height: 1.25; max-width: none; }
.about-name-overlay p { font-size: var(--text-sm); color: rgba(255,255,255,0.7); margin: 0; }
.about-stat-card {
  position: absolute; top: 2rem; right: -1.5rem;
  background: var(--white); border-radius: var(--radius); padding: 1rem 1.25rem;
  box-shadow: var(--shadow-lg); text-align: center; min-width: 110px;
}
.about-stat-card .num {
  font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; color: var(--green);
  line-height: 1;
}
.about-stat-card .lbl { font-size: var(--text-xs); color: var(--gray-400); margin-top: 0.25rem; }
.about-content h2 { font-size: var(--text-4xl); margin-bottom: 0.5rem; }
.about-content > p { margin-bottom: 1.5rem; font-size: var(--text-base); }
.contact-info h2 { font-size: var(--text-4xl); }
.btn { line-height: var(--leading-snug); text-align: center; }
#starRating { font-size: clamp(1.35rem, 4vw, 1.8rem) !important; }
#testi-msg, #contact-msg { font-size: var(--text-sm) !important; line-height: var(--leading-normal) !important; }
.about-content .exp-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.25rem 0;
  align-content: start;
}
.exp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
.exp-card {
  background: var(--white); border-radius: var(--radius); padding: 1.25rem;
  border: 1px solid var(--gray-200); transition: var(--transition);
}
.exp-card:hover { border-color: var(--green); box-shadow: var(--shadow); }
.exp-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
.exp-title { font-family: var(--font-body); font-weight: 700; font-size: var(--text-md); color: var(--gray-800); }
.exp-detail { font-size: var(--text-sm); color: var(--gray-400); margin-top: 0.25rem; line-height: var(--leading-normal); }
.cert-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.cert-pill {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 100px;
  border: 1px solid transparent;
  background: var(--green-light);
  color: var(--green-dark);
}
/* Français — TCF / Institut Français */
.cert-pill--fr {
  background: #e8f1fb;
  color: #1a4f9c;
  border-color: rgba(26, 79, 156, 0.22);
}
/* Anglais — examens internationaux */
.cert-pill--en {
  background: #e6f6f4;
  color: #0f5c52;
  border-color: rgba(15, 92, 82, 0.22);
}
/* Design graphique */
.cert-pill--design {
  background: #fdf3e3;
  color: #9a5f0a;
  border-color: rgba(184, 136, 10, 0.28);
}
/* Audiovisuel & production */
.cert-pill--av {
  background: #f0e9f8;
  color: #5a2d82;
  border-color: rgba(90, 45, 130, 0.22);
}

/* ── SERVICES ── */
#services { background: var(--white); }
.services-filter-bar,
.services-tabs {
  display: flex; gap: 0.5rem; justify-content: center;
  margin-bottom: 3rem; flex-wrap: wrap;
}
/* Services catalog: Langues/Design × Particuliers/Entreprises */
.services-catalog {
  display: flex;
  flex-direction: column;
  gap: clamp(2.75rem, 6vw, 4rem);
}
.services-catalog .services-subsection + .services-subsection {
  margin-top: 0;
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--gray-200);
}
.services-catalog .services-subsection .grid-3 {
  width: 100%;
}
.services-lang-matrix-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.services-lang-matrix-head .subsection-title-short,
.services-lang-matrix-head .subsection-title-full {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--green);
  flex: 0 1 auto;
  min-width: 0;
}
#services.services-filter-all .services-lang-matrix-head__ind,
#services.services-filter-all .services-lang-matrix-head__biz { display: none; }
#services.services-filter-particuliers .services-lang-matrix-head__biz,
#services.services-filter-particuliers .services-lang-matrix-head .subsection-title-short { display: none; }
#services.services-filter-entreprises .services-lang-matrix-head__ind,
#services.services-filter-entreprises .services-lang-matrix-head .subsection-title-short { display: none; }
.services-lang-matrix {
  width: 100%;
}
.services-table-wrap {
  width: 100%;
}
.services-table {
  width: 100%;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--gray-200);
  overflow: hidden;
}
.services-table__body {
  display: flex;
  flex-direction: column;
}
.services-table__row {
  display: grid;
  align-items: center;
  column-gap: 0.85rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--gray-200);
  grid-template-columns: minmax(0, 1fr) 16rem 16.5rem;
}
#services.services-filter-all .services-table__row {
  grid-template-columns: 6.25rem minmax(0, 1fr) 16rem 16.5rem;
}
#services.services-table--no-prices .services-table__row {
  grid-template-columns: minmax(0, 1fr) 16.5rem;
}
#services.services-filter-all.services-table--no-prices .services-table__row {
  grid-template-columns: 6.25rem minmax(0, 1fr) 16.5rem;
}
.page-pricing #services.services-filter-all .services-subsection[data-category="design"] .services-table__row {
  grid-template-columns: 6.25rem minmax(0, 1fr) 16rem 16.5rem;
}
.page-pricing #services:not(.services-filter-all) .services-subsection[data-category="design"] .services-table__row {
  grid-template-columns: minmax(0, 1fr) 16rem 16.5rem;
}
.services-table__row:last-child {
  border-bottom: none;
}
.services-table__row[hidden] {
  display: none !important;
}
.services-table__cat {
  min-width: 0;
}
.services-table__cat .service-card__category {
  margin-bottom: 0;
  font-size: 0.62rem;
  padding: 0.22rem 0.45rem;
  white-space: nowrap;
  display: inline-block;
}
#services:not(.services-filter-all) .services-table__cat {
  display: none;
}
.services-table__service {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--gray-800);
}
.services-table__icon {
  flex: 0 0 auto;
  line-height: 1;
}
.services-table__name {
  min-width: 0;
  line-height: var(--leading-snug);
}
.services-table__price {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
}
.services-table__price .price-range {
  margin: 0;
  padding: 0.45rem 0.6rem;
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  width: 100%;
  min-height: 2.15rem;
  box-sizing: border-box;
  gap: 0.2rem;
  line-height: 1.15;
  text-align: center;
}
.services-table__price .price-range__primary {
  white-space: nowrap;
  flex: 1 1 auto;
  text-align: center;
}
.services-table__price .price-range__aside {
  display: none;
}
.page-design .services-table__price .price-range,
.page-pricing .services-subsection[data-category="design"] .services-table__price .price-range {
  background: #fff8e1;
  color: var(--accent-dark);
  border-color: rgba(184, 136, 10, 0.2);
}
.page-design .services-table__price .price-range__primary,
.page-pricing .services-subsection[data-category="design"] .services-table__price .price-range__primary {
  color: var(--accent-dark);
}
.services-table__actions {
  min-width: 0;
}
.services-table__actions--cours {
  position: relative;
}
.services-table__actions--cours .services-table__btn-precis {
  position: absolute;
  right: 100%;
  margin-right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 5.6rem;
  height: 2.25rem;
  padding: 0 0.28rem;
  font-size: 0.6rem;
  line-height: 1.1;
  white-space: normal;
  z-index: 2;
}
.services-table__actions-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  width: 100%;
}
/* « Detail » et « Reserver » sont le chemin d achat de la page Tarifs, du
   Catalogue et de Design : ils etaient libelles en 10,88px dans une boite de
   hauteur FIXE (2,25rem = 36px). La taille passe a l echelle --text-sm
   (12,5 a 14px) et la hauteur suit le contenu avec un plancher — la boite ne
   peut donc plus rogner son propre texte si le libelle s allonge ou si le
   visiteur grossit les polices. */
.services-table__actions .btn {
  width: 100%;
  min-width: 0;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  padding: 0.45rem 0.55rem;
  font-size: var(--text-sm);
  line-height: 1.15;
  height: auto;
  min-height: 2.5rem;
  box-sizing: border-box;
}
.services-lang-matrix .service-card[hidden] {
  display: none !important;
}
.service-card__category {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: 100px;
  background: var(--green-light);
  color: var(--green-dark);
  margin-bottom: 0.65rem;
}
.service-card__category--biz {
  background: #e8f1fb;
  color: #1a4f9c;
}
#services:not(.services-filter-all) .service-card__category {
  display: none;
}
.services-subsection[hidden] { display: none !important; }
#services.services-filter-all .subsection-title-short { display: none; }
#services:not(.services-filter-all) .subsection-title-full { display: none; }
.services-subsection-title .subsection-title-short,
.services-subsection-title .subsection-title-full {
  flex: 0 1 auto; min-width: 0;
}
.services-subsection-title {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.5rem; flex-wrap: wrap;
}
.services-subsection-title .subsection-title-short,
.services-subsection-title .subsection-title-full {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-lg);
  color: var(--green);
}
.services-subsection-line {
  height: 2px; flex: 1 1 4rem; min-width: 2rem;
  background: var(--green-light);
}
.services-subsection-title.is-design .services-subsection-line { background: #fff8e1; }
.services-subsection-title.is-design span { color: var(--accent-dark); }

/* Legacy aliases */
.services-group-title {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.5rem; flex-wrap: wrap;
}
.services-group-title span {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-lg);
  color: var(--green);
  flex: 1 1 auto; min-width: 0;
}
.services-group-title .services-group-line {
  height: 2px; flex: 1 1 4rem; min-width: 2rem;
  background: var(--green-light);
}
.services-group-title.is-design .services-group-line { background: #fff8e1; }
.services-group-title.is-design span { color: var(--accent-dark); }
.stab {
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
  padding: 0.65rem 1.5rem; border-radius: 100px; cursor: pointer;
  border: 2px solid var(--gray-200); background: transparent; color: var(--gray-600);
  transition: var(--transition);
}
.stab.active, .stab:hover { border-color: var(--green); background: var(--green); color: var(--white); }
.services-panel { display: none; }
.services-panel.active { display: block; }
.audience-tabs { display: flex; gap: 1rem; margin-bottom: 2rem; }
.atab {
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
  padding: 0.5rem 1.25rem; border-radius: var(--radius-sm); cursor: pointer;
  border: 1.5px solid var(--gray-200); background: transparent; color: var(--gray-600);
  transition: var(--transition);
}
.atab.active { border-color: var(--accent-dark); background: #fff8e1; color: var(--accent-dark); }
.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--off-white); border-radius: var(--radius-lg); padding: 2rem;
  border: 1.5px solid var(--gray-200); transition: var(--transition); position: relative;
  overflow: hidden;
}
.service-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--green), var(--green-mid));
  transform: scaleX(0); transform-origin: left; transition: var(--transition);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card:hover { border-color: var(--green); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.service-card-icon {
  width: 52px; height: 52px; border-radius: var(--radius-sm);
  background: var(--green-light); display: flex; align-items: center;
  justify-content: center; font-size: 1.4rem; margin-bottom: 1.25rem;
}
.service-card h3 {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--text-lg); color: var(--gray-800); margin-bottom: 0.5rem;
}
.service-card p {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--gray-600);
  margin-bottom: 0.75rem;
  flex: 1;
}
.services-price-note {
  font-size: var(--text-sm);
  color: var(--gray-500);
  line-height: var(--leading-relaxed);
  margin-top: 0.5rem;
  max-width: 36rem;
}
.service-card-price,
.price-range {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--green);
  background: var(--green-light);
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 1rem;
  white-space: normal;
  line-height: var(--leading-snug);
  border: 1px solid rgba(45, 134, 40, 0.12);
}
.price-range__primary {
  font-weight: 700;
  color: var(--green);
}
.price-range__aside {
  font-size: 0.72em;
  font-weight: 600;
  color: var(--gray-600);
  line-height: 1.2;
}
.mode-price-tile__amount.price-range,
.booking-mode-price__amount.price-range {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  display: inline-flex;
}
.mode-price-tile__amount .price-range__primary,
.booking-mode-price__amount .price-range__primary {
  font-size: var(--text-lg);
}
.mode-price-tile__amount .price-range__aside,
.booking-mode-price__amount .price-range__aside {
  font-size: var(--text-xs);
}
.service-package-price.price-range,
.service-package-price .price-range__primary {
  font-size: var(--text-2xl);
}
.service-card [class*="service-card-price"][style*="fff8e1"] {
  border-color: rgba(184, 136, 10, 0.2);
}
.service-card[id],
.services-table__row[id],
.catalogue-service[id],
#services-langues {
  scroll-margin-top: var(--site-header-height, 7.5rem);
}
.service-card-cta {
  margin-top: auto;
  padding-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.service-card-cta .service-card-detail { align-self: flex-start; }
.popular-badge {
  position: absolute; top: 1rem; right: 1rem;
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.3rem 0.75rem; border-radius: 100px;
  background: var(--accent); color: var(--gray-800);
}

/* ── TESTIMONIALS ── */
.section-testimonials { background: var(--off-white); }
.testimonials-block {
  display: flex;
  flex-direction: column;
  /* Ce gap remplace la marge basse de .section-header, qui est neutralisée
     dans un conteneur flex : il doit donc porter la MÊME valeur qu'elle,
     sinon la section des témoignages respire autrement que les autres. */
  gap: clamp(1.6rem, 3.5vw, 2.4rem);
  width: 100%;
}
.section-testimonials .section-header {
  margin-bottom: 0;
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
}
.testimonials-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.35rem, 2.75vw, 2rem);
  width: 100%;
}
@media (max-width: 1024px) {
  .testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}
/* Center incomplete last rows (3-column desktop) */
@media (min-width: 1025px) {
  .testimonials-grid > .testimonial-card:last-child:nth-child(3n + 1):not(:only-child) {
    grid-column: 2;
  }
  .testimonials-grid--count-1 {
    grid-template-columns: minmax(0, 26rem);
    justify-content: center;
  }
  .testimonials-grid--count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 52rem;
    margin-inline: auto;
  }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .testimonials-grid > .testimonial-card:last-child:nth-child(2n + 1):not(:only-child):last-child {
    grid-column: 1 / -1;
    max-width: calc((100% - clamp(1.35rem, 2.75vw, 2rem)) / 2);
    justify-self: center;
  }
  .testimonials-grid--count-1 {
    grid-template-columns: minmax(0, 26rem);
    justify-content: center;
  }
}
.testimonials-grid:empty {
  display: none;
}
.testimonials-grid {
  min-height: 12rem;
}
.testimonials-grid[data-loading="true"] {
  min-height: 14rem;
}
.price-range[data-xof]:empty,
.price-range[data-xof-from]:empty,
.price-range[data-dual-page-word]:empty {
  min-height: 2.15rem;
  min-width: 5.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.testimonials-empty {
  text-align: center;
  max-width: 36rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--gray-600);
  background: var(--white);
  border: 1.5px dashed var(--gray-200);
  border-radius: var(--radius-lg);
}
.testimonials-empty[hidden] {
  display: none !important;
}
.testimonial-card.is-rendered {
  opacity: 1;
  transform: none;
}
.testimonial-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  min-height: 14rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 0;
  border: 1.5px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  overflow: hidden;
}
.testimonial-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--green);
  transform: translateY(-2px);
}
.testimonial-card__head {
  flex: 0 0 auto;
  padding: clamp(1rem, 2.5vw, 1.25rem) clamp(1.1rem, 2.5vw, 1.35rem) 0.65rem;
  background: var(--white);
}
.testimonial-card__service {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--green);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.testimonial-card__stars {
  line-height: 1;
  font-size: var(--text-xs);
  letter-spacing: 2px;
  color: var(--accent);
}
.testimonial-card__quote {
  flex: 1 1 auto;
  background: var(--green);
  padding: clamp(1.15rem, 3vw, 1.5rem) clamp(1.1rem, 3vw, 1.35rem);
}
.testimonial-card__quote .testimonial-text {
  margin: 0;
  padding: 0;
  border: none;
  quotes: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--white);
  font-style: normal;
  font-weight: 500;
}
.testimonial-card__quote .testimonial-text::before,
.testimonial-card__quote .testimonial-text::after {
  content: none;
}
.testimonial-card__foot {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 0.75rem;
  row-gap: 0;
  align-items: start;
  padding: clamp(1rem, 2.5vw, 1.2rem) clamp(1.1rem, 2.5vw, 1.35rem);
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  color: var(--gray-800);
}
.testimonial-card__foot .testimonial-avatar {
  grid-row: 1 / -1;
  align-self: center;
  margin-top: 0.1rem;
}
.testimonial-card__foot .testimonial-client {
  padding-top: 0.15rem;
}
.testimonial-client {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.25rem;
  min-width: 0;
}
.testimonial-identity {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  font-size: var(--text-sm);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--white);
  flex-shrink: 0;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px rgba(45, 134, 40, 0.2);
}
.testimonial-name,
.testimonial-sep,
.testimonial-role {
  display: inline;
  vertical-align: baseline;
}
.testimonial-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gray-800);
}
.testimonial-sep {
  color: var(--gray-400);
  font-weight: 700;
  user-select: none;
}
.testimonial-role {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--gray-600);
}
.testimonial-card__foot .testimonial-country {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--green-deep);
  line-height: var(--leading-normal);
  text-align: left;
}
.testimonial-card .stars,
.stars {
  color: var(--accent);
  letter-spacing: 2px;
}
.form-hint--location {
  margin: -0.35rem 0 1rem;
}

/* ── TESTIMONIALS CTA & SHARE PAGE ── */
.testimonials-cta,
.share-experience-actions {
  text-align: center;
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
/* « Laisser un avis Google » est un appel a l action, pas une legende : il
   rendait 33px de haut avec un libelle a l echelle --text-xs (celle des
   pastilles). Taille et hauteur remontees au niveau des autres boutons
   secondaires du site. */
.testimonials-cta .btn,
.share-experience-actions .btn {
  padding: 0.55rem 1rem;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
  min-height: 2.5rem;
  gap: 0.35rem;
}
.testimonials-cta .btn-outline,
.share-experience-actions .btn-outline {
  border-width: 1.5px;
}
.testimonials-cta .btn:hover,
.share-experience-actions .btn:hover {
  transform: translateY(-1px);
}
.page-share-experience {
  padding-top: clamp(6rem, 12vw, 8rem);
  background: var(--off-white);
}
.page-share-experience__intro {
  padding-bottom: 0;
}
.page-share-experience__intro .section-header {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.page-share-experience .share-experience-footer {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--gray-200);
  width: 100%;
}
.page-share-experience .share-experience-lead {
  margin: 0 auto clamp(1.5rem, 4vw, 2rem);
  max-width: 36rem;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--gray-600);
  letter-spacing: 0.01em;
}
.page-share-experience .testimonial-form-card > .share-experience-lead {
  padding-bottom: clamp(0.25rem, 1vw, 0.5rem);
  border-bottom: 1px solid var(--gray-200);
}
.page-share-experience .share-experience-actions {
  margin-top: 0;
  gap: clamp(0.75rem, 2.5vw, 1.15rem);
  width: 100%;
}
.page-share-experience .share-experience-actions .btn {
  padding: 0.55rem 1.15rem;
  font-size: var(--text-sm);
}
.page-share-experience__form {
  background: var(--white);
  padding-top: clamp(0.75rem, 2vw, 1.25rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}
.page-share-experience .testimonial-form-card {
  padding: clamp(1.75rem, 5vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.page-share-experience .testimonial-form-card .form-row {
  gap: clamp(1.15rem, 3vw, 1.75rem);
  margin-bottom: 0.15rem;
}
.page-share-experience .testimonial-form-card .form-group {
  margin-bottom: clamp(1.35rem, 3vw, 1.85rem);
}
.page-share-experience .testimonial-form-card .form-group label {
  margin-bottom: 0.65rem;
}
.page-share-experience .testimonial-form-card .form-hint--location {
  margin-top: -0.35rem;
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}
.page-share-experience .testimonial-form-card #starRating {
  margin-top: 0.15rem;
  margin-bottom: 0.25rem;
}
.page-share-experience .testimonial-form-card .form-captcha {
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 clamp(1rem, 2.5vw, 1.35rem);
}
.page-share-experience .testimonial-form-card #testimonial-submit-btn {
  margin-top: 0.35rem;
  align-self: center;
  margin-inline: auto;
  margin-bottom: 0;
}
.page-share-experience .testimonial-form-card #testi-msg {
  margin-bottom: 0.5rem !important;
}

/* ── ADD TESTIMONIAL ── */
#add-testimonial { background: var(--white); }
.testimonial-form-card {
  width: 100%;
  max-width: 680px; margin: 0 auto;
  background: var(--off-white); border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1.5px solid var(--gray-200);
}
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block; font-family: var(--font-body); font-weight: 600;
  font-size: var(--text-sm); color: var(--gray-800); margin-bottom: 0.5rem;
}
.form-control {
  width: 100%; padding: clamp(0.75rem, 2vw, 0.85rem) clamp(0.85rem, 2vw, 1rem);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--gray-200); background: var(--white);
  font-family: var(--font-body); font-size: var(--text-base); color: var(--gray-800);
  transition: var(--transition); resize: vertical;
}
.form-control:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(45,134,40,0.1); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.form-captcha {
  margin: 1rem 0 0.5rem;
  min-height: 4rem;
}
.form-captcha--loading {
  opacity: 0.65;
}
.booking-success-msg.booking-captcha-error {
  color: #b91c1c;
  background: #fef2f2;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
}

/* ── BOOKING ── */
#booking.section { background: var(--green); padding: clamp(2.5rem, 6vw, 4rem) 0; }
.booking-inner {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1.3fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: stretch;
}
.booking-inner > * { min-width: 0; }
.booking-aside {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  height: 100%;
  min-height: 0;
  width: 100%;
  max-width: 300px;
}
.booking-aside-top {
  flex: 0 0 auto;
}
.booking-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  flex: 0 0 auto;
  width: 100%;
  margin-top: auto;
}
.booking-actions .btn {
  width: 100%;
  margin-right: 0 !important;
  padding: 0.6rem 0.75rem;
  font-size: var(--text-sm);
  justify-content: center;
}
.btn-booking-email {
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.btn-booking-email:hover {
  background: rgba(255, 255, 255, 0.25);
  color: var(--white);
}
.booking-badge {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
}
.booking-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 0.25rem;
}
.booking-content h2 { color: var(--white); margin-bottom: 0.65rem; }
.booking-content h2 { font-size: clamp(1.75rem, 4vw, var(--text-4xl)); }
.booking-content > p { color: rgba(255,255,255,0.75); margin-bottom: 1rem; font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.booking-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  flex: 1 1 auto;
  justify-content: center;
}
.booking-features li { display: flex; align-items: flex-start; gap: 0.75rem; color: rgba(255,255,255,0.85); font-size: var(--text-sm); line-height: var(--leading-normal); }
.booking-features li::before { content: '✓'; color: var(--accent); font-weight: 700; font-size: var(--text-lg); flex-shrink: 0; }
.calendly-widget {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  text-align: center;
  box-shadow: var(--shadow);
}
.calendly-widget__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}
.calendly-widget__icon {
  font-size: 1.35rem;
  line-height: 1;
}
.calendly-widget__head h3 {
  margin: 0;
  font-size: var(--text-md);
  color: var(--gray-800);
}
.calendly-widget__desc {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--gray-500);
  margin: 0 0 0.85rem;
}
.calendly-btn {
  display: block;
  width: 100%;
  background: var(--green);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: var(--transition);
  text-align: center;
}
.calendly-btn:hover { background: var(--green-dark); transform: translateY(-1px); }
.calendly-alt {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--gray-400);
  margin: 0.65rem 0 0;
}
.calendly-alt a {
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.calendly-alt a:hover { color: var(--green-dark); }
.form-hint {
  margin-top: 0.4rem;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--gray-400);
}

/* ── PROCESS ── */
#process { background: var(--white); }
.process-steps {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  position: relative;
}
@media (max-width: 1100px) {
  .process-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .process-steps { grid-template-columns: 1fr; }
}
.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.25rem;
  background: var(--off-white);
  border-radius: 0;                 /* coins carres, comme la mosaique */
  border: 1.5px solid var(--gray-200);
}
.process-num {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--green); color: var(--white);
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem;
}
.process-step h3 {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--text-base); color: var(--gray-800); margin-bottom: 0.5rem;
}
.process-step p { font-size: var(--text-sm); line-height: var(--leading-relaxed); }

/* ── CONTACT ── */
#contact { background: var(--off-white); }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: stretch;
}
.contact-grid > * { min-width: 0; }
.contact-info h2 { margin-bottom: 1rem; }
.contact-info > p { margin-bottom: 2rem; }
.contact-links { display: flex; flex-direction: column; gap: 1rem; }
.contact-link {
  display: flex; align-items: center; gap: 1rem;
  background: var(--white); border-radius: var(--radius); padding: 1rem 1.25rem;
  text-decoration: none; color: var(--gray-800); border: 1.5px solid var(--gray-200);
  transition: var(--transition);
}
.contact-link:hover { border-color: var(--green); transform: translateX(4px); box-shadow: var(--shadow); }
.contact-link-icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
}
.contact-link-icon.green { background: var(--green-light); }
.contact-link-icon.wa { background: #e7f7ee; }
.contact-link-icon.li { background: #e8f0fd; }
.contact-link-label { font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); }
.contact-link-sub { font-size: var(--text-xs); color: var(--gray-400); line-height: var(--leading-normal); }

.payment-methods {
  margin-top: 2rem;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.payment-methods--compact {
  margin-top: 1.25rem;
  background: var(--gray-50);
  box-shadow: none;
}
.payment-methods__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--green-dark);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.payment-methods__summary::-webkit-details-marker { display: none; }
.payment-methods__summary::marker { content: ''; }
.payment-methods__summary:hover {
  background: var(--green-light);
  color: var(--green-deep);
}
.payment-methods[open] > .payment-methods__summary {
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
  color: var(--gray-800);
}
.payment-methods__chevron {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -0.2rem;
  transition: transform 0.2s ease;
}
.payment-methods[open] .payment-methods__chevron { transform: rotate(-135deg); margin-top: 0.15rem; }
.payment-methods__panel {
  padding: 1.15rem 1.25rem 1.25rem;
}
.payment-methods--compact .payment-methods__panel { padding: 0.9rem 1.1rem 1.1rem; }
.payment-methods__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.payment-method {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}
.payment-method--mixx,
.payment-method--orabank { align-items: flex-start; }
.payment-method__details {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 12rem;
  min-width: 0;
}
.payment-method__number {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--green-dark);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.payment-method__number:hover {
  color: var(--green);
  text-decoration: underline;
}
.payment-method__hint {
  font-size: var(--text-xs);
  color: var(--gray-500);
  line-height: var(--leading-normal);
}
.payment-method__logo {
  height: auto;
  width: auto;
  max-height: 2.75rem;
  max-width: min(100%, 11rem);
  object-fit: contain;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}
.payment-method__logo--mixx { max-width: min(100%, 12.5rem); max-height: 3.25rem; }
.payment-method__logo--orabank { max-width: min(100%, 10rem); max-height: 2.5rem; }
.payment-methods--compact .payment-method__logo--mixx { max-height: 2.75rem; max-width: 11rem; }
.payment-methods--compact .payment-method__logo--orabank { max-height: 2.25rem; }
.payment-method__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-700);
}
.payment-method__note {
  margin: 0;
  flex: 1 1 12rem;
  font-size: var(--text-xs);
  color: var(--gray-500);
  line-height: var(--leading-relaxed);
}
.contact-form-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1.5px solid var(--gray-200); box-shadow: var(--shadow);
}
.contact-form-card h3 { font-size: var(--text-xl); color: var(--gray-800); margin-bottom: 1.5rem; }
.contact-form-card .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.question-form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.question-form-actions .btn {
  width: 100%;
  justify-content: center;
  white-space: normal;
}
@media (max-width: 640px) {
  .question-form-actions { grid-template-columns: 1fr; }
}
select.form-control { appearance: none; cursor: pointer; }

/* ── SITEMAP PAGE ── */
.sitemap-page {
  padding-top: clamp(6rem, 12vw, 8rem);
  padding-bottom: clamp(3rem, 8vw, 5rem);
  background: var(--white);
}
.sitemap-content { max-width: 960px; margin: 0 auto; }
.sitemap-content h1 {
  font-size: var(--text-4xl);
  margin: 0.75rem 0 0.5rem;
}
.sitemap-intro {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--gray-500);
  margin-bottom: 2rem;
  max-width: 42rem;
}
.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1.5rem;
}
.sitemap-block {
  padding: 1.25rem 1.35rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-md);
}
.sitemap-block h2 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--green-dark);
  margin: 0 0 0.85rem;
  letter-spacing: 0.02em;
}
.sitemap-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sitemap-links li { margin-bottom: 0.45rem; }
.sitemap-links li:last-child { margin-bottom: 0; }
.sitemap-links a {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-700);
  text-decoration: none;
  line-height: var(--leading-relaxed);
}
.sitemap-links a:hover { color: var(--green); text-decoration: underline; }
.sitemap-links a[aria-current="page"] {
  color: var(--green);
  pointer-events: none;
}
.page-sitemap #navbar .lang-toggle,
.page-policy #navbar .lang-toggle,
.page-portfolio #navbar .lang-toggle,
.page-design #navbar .lang-toggle,
.page-about #navbar .lang-toggle,
.page-pricing #navbar .lang-toggle,
.page-catalogue #navbar .lang-toggle,
.page-service #navbar .lang-toggle {
  border-color: var(--gray-200);
}
.footer-bottom__links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

/* ── POLICY PAGE ── */
.policy-page { padding-top: clamp(6rem, 12vw, 8rem); background: var(--white); }
.policy-back { margin-bottom: 1.5rem; }
.policy-back a { font-size: var(--text-sm); color: var(--green); font-weight: 600; }
.policy-content { max-width: 800px; margin: 0 auto; }
.policy-content h1 { font-size: var(--text-4xl); margin: 0.75rem 0; }
.policy-date { font-size: var(--text-sm); color: var(--gray-400); margin-bottom: 2rem; }
.policy-content h2 {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--text-lg); color: var(--gray-800); margin: 2rem 0 0.5rem;
}
.policy-content p, .policy-content li { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--gray-600); }
.policy-content ul { padding-left: 1.5rem; }
.policy-content ul li { margin-bottom: 0.5rem; }
.policy-toc {
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-100);
}
.policy-toc__title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gray-800);
  margin: 0 0 0.75rem;
}
.policy-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.policy-toc__list a {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
}
.policy-toc__list a:hover { color: var(--green-dark); text-decoration: underline; }
.policy-section-block {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gray-200);
  scroll-margin-top: calc(var(--site-header-height, 5rem) + 1rem);
}
.policy-section-block .badge { margin-bottom: 0.75rem; }
.policy-section-block--lang .badge--lang {
  background: rgba(0, 104, 71, 0.1);
  color: var(--green-dark);
}
.policy-section-block--design .badge--design {
  background: rgba(212, 160, 23, 0.15);
  color: #9a7209;
}
.policy-section-block h2 {
  font-size: var(--text-2xl);
  font-family: var(--font-display);
  margin: 0.5rem 0 0.75rem;
}
.policy-section-block > p:first-of-type {
  margin-bottom: 1rem;
  color: var(--gray-500);
}
.policy-amend {
  margin-top: 2.5rem;
  padding: 1rem 1.25rem;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--gray-500);
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--green);
}
.policy-modal-intro {
  font-size: var(--text-sm);
  color: var(--gray-500);
  line-height: var(--leading-relaxed);
  margin: 0 0 1rem;
}
.policy-modal-intro--scoped {
  color: var(--gray-600);
  padding: 0.65rem 0.85rem;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--green);
}
.policy-modal-intro--scoped strong {
  color: var(--green-dark);
  font-weight: 700;
}
.policy-modal-more {
  margin-top: 1rem;
  font-size: var(--text-sm);
}
.policy-modal-more a {
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
}
.policy-modal-more a:hover { text-decoration: underline; }
#modalContent h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--gray-800);
  margin: 0 0 0.5rem;
}
#modalContent ul {
  padding-left: 1.25rem;
  margin: 0;
}
#modalContent li {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--gray-600);
  margin-bottom: 0.65rem;
}

/* ── CONTACT QUESTION FORM ── */
.question-form-intro {
  font-size: var(--text-sm); color: var(--gray-500);
  line-height: var(--leading-relaxed); margin: -0.75rem 0 1.25rem;
}
.form-feedback {
  padding: 0.75rem 1rem; border-radius: var(--radius-sm);
  margin-bottom: 1rem; font-size: var(--text-sm); line-height: var(--leading-normal);
}
.form-feedback[hidden] { display: none !important; }
.form-feedback--success { background: #f0fdf4; color: #166534; }
.form-feedback--error { background: #fef2f2; color: #b91c1c; }
.form-feedback--info { background: var(--gray-50); color: var(--gray-600); }

/* ── DESIGN PAGE ── */
.design-page__intro,
.pricing-page__intro,
/* Le retrait etait devine — clamp(6rem, 12vw, 8rem) face a une barre de 68px :
   60px de degagement sur ordinateur, 28px sur telephone, pour la meme barre.
   Il se deduit maintenant de --nav-height (pose par js/app.js), donc il reste
   juste si la barre change de hauteur. La valeur de repli vaut sa hauteur
   actuelle, pour les navigateurs qui n executent pas le script.
   (Deux declarations se suivaient ici ; la seconde annulait le pied de la
   premiere. Il n en reste qu une.) */
.about-page__intro {
  padding-top: calc(var(--nav-height, 4.25rem) + clamp(1.5rem, 3vw, 2.75rem));
  padding-bottom: clamp(.75rem, 1.5vw, 1.25rem);
}
.design-back { margin-bottom: .75rem; }
.design-back a {
  font-size: var(--text-sm); color: var(--green); font-weight: 600; text-decoration: none;
}
.design-back a:hover { text-decoration: underline; }
.design-portfolio-band {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark, #1a5c38) 100%);
  color: var(--white);
}
.design-portfolio-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.design-portfolio-band__inner h2 {
  font-size: var(--text-3xl);
  margin: 0.5rem 0;
  color: var(--white);
}
.design-portfolio-band__inner p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 520px;
  margin: 0;
  line-height: var(--leading-relaxed);
}
.svc-row-collapsed { display: none !important; }
.services-collapse-bar { text-align: center; margin-top: 0.75rem; }
.services-catalogue-cta {
  text-align: center;
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}
.home-design-teaser {
  margin-top: 2rem;
  text-align: center;
}

/* ── PORTFOLIO PAGE ── */
.portfolio-page {
  padding-top: clamp(6rem, 12vw, 8rem);
  background: var(--off-white);
  padding-bottom: 4rem;
}
.portfolio-back { margin-bottom: 1.5rem; }
.portfolio-back a {
  font-size: var(--text-sm); color: var(--green); font-weight: 600; text-decoration: none;
}
.portfolio-back a:hover { text-decoration: underline; }
.portfolio-header { margin-bottom: 2.5rem; max-width: 720px; }
.portfolio-header h1 { font-size: var(--text-4xl); margin: 0.75rem 0; }
.portfolio-header p { font-size: var(--text-base); color: var(--gray-500); line-height: var(--leading-relaxed); }
.portfolio-filter-bar {
  display: flex; gap: 0.5rem; justify-content: center;
  flex-wrap: wrap; margin-bottom: 2.5rem;
}
.portfolio-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px) {
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .portfolio-grid { grid-template-columns: 1fr; }
}
.portfolio-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--gray-200);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
}
.portfolio-item:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.portfolio-item[hidden] { display: none !important; }
.portfolio-card__open {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: var(--gray-100);
  cursor: pointer;
  text-align: left;
  position: relative;
  font: inherit;
}
.portfolio-card__open:disabled {
  cursor: default;
}
.portfolio-card__open:not(:disabled):hover .portfolio-cover__shade,
.portfolio-card__open:not(:disabled):focus-visible .portfolio-cover__shade {
  opacity: 1;
}
.portfolio-card__open:not(:disabled):hover .portfolio-cover__hint,
.portfolio-card__open:not(:disabled):focus-visible .portfolio-cover__hint {
  opacity: 1;
  transform: translateY(0);
}
.portfolio-card__open:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: -3px;
}
.portfolio-card__badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 3;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  border-radius: 100px;
  background: var(--green);
  color: var(--white);
  box-shadow: var(--shadow);
  pointer-events: none;
}
.portfolio-media {
  position: relative;
  background: var(--gray-100);
  overflow: hidden;
}
.portfolio-player-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem;
  text-align: center;
  background: var(--gray-100);
}
.portfolio-player-placeholder p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--gray-500);
  line-height: 1.5;
}
.portfolio-player-placeholder__path code,
.portfolio-player-placeholder__cmd code {
  font-size: var(--text-xs);
  color: var(--green-dark);
  word-break: break-all;
}
.portfolio-player-image-link {
  display: block;
  width: 100%;
  height: 100%;
}
.portfolio-playlist {
  display: flex;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  overflow-x: auto;
  border-top: 1px solid var(--gray-200);
  background: var(--white);
  scrollbar-width: thin;
}
.portfolio-playlist[hidden] { display: none !important; }
.portfolio-playlist__btn {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  width: 5.5rem;
  padding: 0.35rem;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: var(--off-white);
  cursor: pointer;
  transition: var(--transition);
  font: inherit;
  text-align: left;
}
.portfolio-playlist__btn:hover { border-color: var(--gray-200); }
.portfolio-playlist__btn.is-active {
  border-color: var(--green);
  background: var(--green-light);
}
.portfolio-playlist-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--gray-200);
}
.portfolio-playlist-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.portfolio-playlist-thumb__icon {
  font-size: 1.25rem;
  color: var(--green-dark);
}
.portfolio-playlist__label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--gray-600);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.portfolio-media--video {
  aspect-ratio: 16 / 9;
}
.portfolio-media--video iframe,
.portfolio-media--video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.portfolio-media-hint {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  margin: 0; padding: 0.5rem 0.75rem;
  font-size: var(--text-xs); color: var(--gray-500);
  background: rgba(255,255,255,0.92);
  text-align: center;
}
.portfolio-media-hint code { font-size: 0.85em; color: var(--green-dark); }
.portfolio-media--image {
  display: block;
  aspect-ratio: 4 / 3;
}
.portfolio-media--image img,
.portfolio-cover .portfolio-player-img,
.portfolio-modal__player .portfolio-player-img,
.portfolio-player-img--contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--gray-100);
}
.portfolio-cover .portfolio-player-img,
.portfolio-modal__player .portfolio-player-img,
.portfolio-player-img--contain {
  padding: 0.75rem;
  box-sizing: border-box;
}
.portfolio-cover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portfolio-cover-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--gray-100);
  display: block;
}
.portfolio-cover--tiktok {
  background: linear-gradient(145deg, #0f0f0f 0%, #1a1a2e 45%, #16213e 100%);
}
.portfolio-cover-tiktok {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  height: 100%;
  padding: 1.5rem;
  text-align: center;
  color: var(--white);
}
.portfolio-cover-tiktok__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fe2c55;
}
.portfolio-cover-tiktok__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}
.portfolio-cover-tiktok__handle {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.portfolio-cover-tiktok__name {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
  text-transform: capitalize;
}
.portfolio-cover--tiktok .portfolio-cover__hint {
  opacity: 1;
  transform: none;
  color: var(--white);
}
.portfolio-cover__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.portfolio-cover__badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  border-radius: 100px;
  background: var(--green);
  color: var(--white);
  box-shadow: var(--shadow);
}
.portfolio-cover__hint {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--white);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.portfolio-modal.open { display: flex; }
.portfolio-modal__box {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  max-width: min(960px, 100%);
  width: 100%;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35);
}
.portfolio-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 3;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: 100px;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--gray-600);
  transition: var(--transition);
}
.portfolio-modal__close:hover {
  border-color: var(--green);
  color: var(--green-dark);
}
.portfolio-modal__header {
  padding: 1.25rem 3rem 0.5rem 1.25rem;
  border-bottom: 1px solid var(--gray-200);
}
.portfolio-modal__title {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--gray-800);
}
.portfolio-modal__counter {
  margin: 0.25rem 0 0;
  font-size: var(--text-sm);
  color: var(--gray-500);
}
.portfolio-modal__viewer {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--gray-100);
}
.portfolio-modal__stage {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  max-height: min(58vh, 520px);
  cursor: pointer;
  outline: none;
}
.portfolio-modal__stage:focus-visible {
  box-shadow: inset 0 0 0 3px var(--green);
}
.portfolio-modal__stage--static {
  cursor: default;
}
.portfolio-modal__stage-hint {
  position: absolute;
  left: 50%;
  bottom: 0.85rem;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--white);
  background: rgba(0, 0, 0, 0.55);
  padding: 0.35rem 0.75rem;
  border-radius: 100px;
  pointer-events: none;
  white-space: nowrap;
}
.portfolio-modal__nav {
  flex: 0 0 auto;
  width: 2.75rem;
  border: none;
  background: var(--white);
  color: var(--gray-700);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}
.portfolio-modal__nav:hover {
  background: var(--green-light);
  color: var(--green-dark);
}
.portfolio-modal__nav--prev { border-right: 1px solid var(--gray-200); border-left: none; }
.portfolio-modal__nav--next { border-left: 1px solid var(--gray-200); border-right: none; }
.portfolio-modal__player {
  width: 100%;
  height: 100%;
  min-height: 280px;
  max-height: min(58vh, 520px);
  aspect-ratio: 4 / 3;
}
.portfolio-modal__player.portfolio-media--video {
  aspect-ratio: 16 / 9;
}
.portfolio-modal__player .portfolio-player-image-link,
.portfolio-modal__player .portfolio-player-img,
.portfolio-modal__player iframe,
.portfolio-modal__player video {
  width: 100%;
  height: 100%;
}
.portfolio-modal__playlist {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  overflow-x: auto;
  border-top: 1px solid var(--gray-200);
  background: var(--off-white);
  scrollbar-width: thin;
}
body.portfolio-modal-open { overflow: hidden; }
.portfolio-modal__playlist[hidden] { display: none !important; }
.portfolio-caption { padding: 1.25rem 1.35rem 1.5rem; }
.portfolio-caption h3 {
  font-size: var(--text-lg); color: var(--gray-800);
  margin: 0.5rem 0 0.35rem;
}
.portfolio-caption p {
  font-size: var(--text-sm); color: var(--gray-500);
  line-height: var(--leading-relaxed); margin: 0;
}
.portfolio-tag {
  display: inline-block;
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700;
  padding: 0.25rem 0.65rem; border-radius: 100px;
  background: var(--green-light); color: var(--green-dark);
}
.portfolio-tag--accent {
  background: #fff8e1; color: var(--accent-dark);
}
.portfolio-empty {
  text-align: center; color: var(--gray-500);
  font-size: var(--text-sm); margin: 2rem 0;
}
.portfolio-cta {
  text-align: center; margin-top: 3.5rem;
  padding: 2.5rem 1.5rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--gray-200);
}
.portfolio-cta p { margin-bottom: 1.25rem; color: var(--gray-600); }
.nav-links a.nav-link-active,
.mobile-menu a.nav-link-active {
  color: var(--green);
  font-weight: 700;
}

/* ── CATALOGUE PAGE ── */
.page-catalogue { background: var(--off-white); }
.catalogue-page {
  padding-top: clamp(6rem, 12vw, 8rem);
  padding-bottom: 4rem;
}
.catalogue-back { margin-bottom: 1.5rem; }
.catalogue-back a {
  font-size: var(--text-sm); color: var(--green); font-weight: 600; text-decoration: none;
}
.catalogue-back a:hover { text-decoration: underline; }
.catalogue-header { margin-bottom: 2.5rem; max-width: 720px; }
.catalogue-header h1 { font-size: var(--text-4xl); margin: 0.75rem 0; }
.catalogue-header p { font-size: var(--text-base); color: var(--gray-500); line-height: var(--leading-relaxed); }
.catalogue-header code { font-size: 0.9em; color: var(--green-dark); }
.catalogue-filter-bar {
  display: flex; gap: 0.5rem; justify-content: center;
  flex-wrap: wrap; margin-bottom: 2.5rem;
}
.catalogue-sections { display: flex; flex-direction: column; gap: clamp(3rem, 6vw, 4rem); }
.catalogue-audience {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 3.25rem);
}
.catalogue-group {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.catalogue-audience[hidden] { display: none !important; }
.catalogue-group[hidden] { display: none !important; }
.catalogue-group-title {
  font-size: var(--text-2xl); color: var(--gray-800);
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--green-light);
}
.catalogue-group-title--design { border-bottom-color: #ffe082; }
.catalogue-lang-matrix-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.catalogue-lang-matrix-head .subsection-title-short,
.catalogue-lang-matrix-head .subsection-title-full {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--green);
  flex: 0 1 auto;
  min-width: 0;
}
#catalogueSections.catalogue-filter-all .catalogue-lang-matrix-head__ind,
#catalogueSections.catalogue-filter-all .catalogue-lang-matrix-head__biz { display: none; }
#catalogueSections.catalogue-filter-particuliers .catalogue-lang-matrix-head__biz,
#catalogueSections.catalogue-filter-particuliers .catalogue-lang-matrix-head .subsection-title-short { display: none; }
#catalogueSections.catalogue-filter-entreprises .catalogue-lang-matrix-head__ind,
#catalogueSections.catalogue-filter-entreprises .catalogue-lang-matrix-head .subsection-title-short { display: none; }
.catalogue-group--langues .catalogue-group-title { display: none; }
.catalogue-service__category {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: 100px;
  background: var(--green-light);
  color: var(--green-dark);
  margin-bottom: 0.5rem;
}
.catalogue-service__category--biz {
  background: #e8f1fb;
  color: #1a4f9c;
}
#catalogueSections:not(.catalogue-filter-all) .catalogue-service__category {
  display: none;
}
.catalogue-group__list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px) {
  .catalogue-group__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .catalogue-group__list { grid-template-columns: 1fr; }
}
@media (min-width: 641px) {
  .catalogue-group__list > .catalogue-service:last-child:nth-child(3n + 1):not(:only-child) {
    grid-column: 2;
  }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .catalogue-group__list > .catalogue-service:last-child:nth-child(3n + 1):not(:only-child) {
    grid-column: auto;
  }
  .catalogue-group__list > .catalogue-service:last-child:nth-child(2n + 1):not(:only-child):last-child {
    grid-column: 1 / -1;
    max-width: calc((100% - clamp(1.25rem, 2.5vw, 1.75rem)) / 2);
    justify-self: center;
  }
}
.catalogue-service {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--gray-200);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: var(--transition);
}
.catalogue-service:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.catalogue-service[hidden] { display: none !important; }
.catalogue-service--design { border-color: #ffe082; }
.catalogue-service__row {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.catalogue-gallery {
  order: -1;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  background: var(--gray-100);
  border: none;
  border-radius: 0;
  overflow: hidden;
}
.catalogue-gallery:not(:has(.catalogue-photo)) {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 2px dashed var(--gray-200);
  background: var(--gray-50);
}
.catalogue-gallery:has(.catalogue-photo) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}
.catalogue-gallery:has(.catalogue-photo):not(:has(.catalogue-photo ~ .catalogue-photo)) {
  grid-template-columns: 1fr;
}
.catalogue-gallery:has(.catalogue-photo) .catalogue-gallery__empty { display: none; }
.catalogue-gallery__empty {
  margin: 0;
  padding: 1rem;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--gray-500);
  line-height: var(--leading-relaxed);
}
.catalogue-gallery__empty code { font-size: 0.85em; color: var(--green-dark); }
.catalogue-photo {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  overflow: hidden;
  background: var(--gray-100);
  border: none;
  transition: var(--transition);
}
.catalogue-photo:hover { opacity: 0.92; }
.catalogue-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.catalogue-service__info {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.9rem 1rem 1rem;
  min-height: 0;
}
.catalogue-service__icon {
  display: block;
  font-size: 1.35rem;
  line-height: 1;
  margin-bottom: 0.35rem;
}
.catalogue-service__info h3 {
  font-size: var(--text-base);
  color: var(--gray-800);
  margin: 0 0 0.4rem;
  line-height: var(--leading-snug);
}
.catalogue-service__info > p:not(.catalogue-hint) {
  font-size: var(--text-xs);
  color: var(--gray-500);
  line-height: var(--leading-relaxed);
  margin: 0 0 0.65rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.catalogue-hint { display: none; }
.catalogue-service__info .btn-sm {
  align-self: flex-start;
  margin-top: auto;
  padding: 0.45rem 0.85rem;
  font-size: var(--text-xs);
}
.btn-sm {
  padding: 0.5rem 1rem;
  font-size: var(--text-sm);
}
.catalogue-footer-cta {
  text-align: center; margin-top: 3.5rem;
  padding: 2.5rem 1.5rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--gray-200);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.catalogue-footer-cta p { margin: 0; color: var(--gray-600); }
.catalogue-footer-cta .btn { margin: 0; }

/* ── FOOTER (site only — not testimonial card footers) ── */
body > footer {
  background: var(--green-deep); color: rgba(255,255,255,0.7);
  padding: 2.5rem 0 1.5rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: 2rem;
}
@media (min-width: 900px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}
.footer-brand-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.footer-brand-row .brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.footer-brand-row h4 {
  margin: 0;
  line-height: 1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-2xl);
  color: var(--white);
}
.footer-brand p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: rgba(255,255,255,0.5); max-width: 260px; }
.footer-col h5,
.footer-col .footer-col__title {
  max-width: none; line-height: var(--leading-snug);
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--white); margin-bottom: 1.25rem;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col ul a { font-size: var(--text-sm); color: rgba(255,255,255,0.55); text-decoration: none; transition: var(--transition); }
.footer-col ul a:hover { color: var(--white); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1); padding-top: 2rem;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-bottom p { font-size: var(--text-xs); line-height: var(--leading-normal); color: rgba(255,255,255,0.35); }
.footer-bottom a { color: rgba(255,255,255,0.5); text-decoration: none; font-size: var(--text-xs); }
.footer-bottom a:hover { color: var(--white); }
.footer-copy a {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-copy a:hover { color: var(--white); }
.footer-social { display: flex; gap: 0.75rem; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; text-decoration: none; transition: var(--transition);
}
.footer-social a:hover { background: var(--green); color: var(--white); }
.footer-hours { margin-top: 1.5rem; }
.footer-hours h5,
.footer-hours .footer-hours__title {
  max-width: none; line-height: var(--leading-snug);
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--white); margin: 0 0 0.4rem;
}
.footer-hours p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: rgba(255,255,255,0.6); margin: 0; }

/* ── FLOATING ACTIONS (compact, bottom-right — avoids covering body text) ── */
:root {
  --float-btn-size: 32px;
  --float-btn-gap: 0.35rem;
  --float-edge: 0.65rem;
}
#back-to-top {
  position: fixed;
  z-index: 500;
  right: var(--float-edge);
  bottom: calc(
    var(--float-edge) + var(--float-btn-size) + var(--float-btn-gap) +
      env(safe-area-inset-bottom, 0px)
  );
  width: var(--float-btn-size);
  height: var(--float-btn-size);
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: var(--transition);
}
#back-to-top.visible { display: flex; }
#back-to-top:hover { background: var(--green-dark); transform: translateY(-2px); }

/* ── POLICY MODAL ── */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.55); align-items: center; justify-content: center; padding: 2rem;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--white); border-radius: var(--radius-lg); max-width: 680px; width: 100%;
  max-height: 80vh; overflow-y: auto; padding: 2.5rem;
  box-shadow: 0 25px 80px rgba(0,0,0,0.3);
}
.modal-box h3 { font-size: var(--text-xl); color: var(--gray-800); margin-bottom: 1rem; }
.modal-box p, .modal-box li { font-size: var(--text-sm); color: var(--gray-600); line-height: var(--leading-relaxed); }
.modal-box ul { padding-left: 1.5rem; margin-bottom: 1rem; }
.modal-box h4 { font-size: var(--text-base); color: var(--gray-800); margin: 1.25rem 0 0.5rem; }
.modal-actions { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.modal-actions .btn { flex: 1 1 auto; min-width: min(100%, 140px); justify-content: center; }
.modal-close-btn {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: none; font-size: 1.5rem;
  cursor: pointer; color: var(--gray-400); line-height: 1; padding: 0.25rem;
}
.modal-box--service-pick {
  max-width: 640px;
}
.modal-box--share {
  max-width: 480px;
}
.share-modal__lead {
  margin: 0 0 1.25rem;
  font-size: var(--text-sm);
  color: var(--gray-600);
  line-height: var(--leading-relaxed);
}
.share-link-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.share-link-input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 0.55rem 0.75rem;
  font-size: var(--text-sm);
  color: var(--gray-600);
  background: var(--off-white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
}
.share-link-row .share-copy-btn {
  flex: 0 0 auto;
}
.share-copy-btn.is-copied {
  color: var(--white);
  background: var(--green);
  border-color: var(--green);
}
/* ── Inline share row (one-click icon buttons) ── */
.share-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.share-inline__label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
}
.share-inline__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-600);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.share-inline__btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.share-inline__btn svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}
.share-inline__btn--wa {
  color: #1faa55;
  border-color: rgba(37, 211, 102, 0.45);
}
.share-inline__btn--wa:hover {
  background: #25d366;
  border-color: #25d366;
  color: var(--white);
}
.share-inline__btn--li {
  color: #0a66c2;
  border-color: rgba(10, 102, 194, 0.35);
}
.share-inline__btn--li:hover {
  background: #0a66c2;
  border-color: #0a66c2;
  color: var(--white);
}
.share-inline__btn--copy:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
.share-inline__btn.is-copied {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
/* Between the Google-review and clients-say rows on share-experience.html */
.page-share-experience .share-experience-footer .share-inline {
  margin: clamp(0.9rem, 2.5vw, 1.3rem) 0;
}
/* Service hero variant (left-aligned with the header content) */
.service-page-share.share-inline {
  justify-content: flex-start;
}
.service-book-modal__lead {
  margin: 0 0 1.25rem;
  font-size: var(--text-sm);
  color: var(--gray-600);
  line-height: var(--leading-relaxed);
}
.service-book-modal__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-height: min(52vh, 420px);
  overflow-y: auto;
  padding-right: 0.25rem;
}
.service-book-modal__group-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--green);
  margin: 0 0 0.65rem;
}
.service-book-modal__group--design .service-book-modal__group-title,
.service-book-modal__item--design .service-book-modal__icon {
  color: var(--accent-dark);
}
.service-book-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.service-book-modal__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--gray-800);
  background: var(--off-white);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.service-book-modal__item:hover {
  border-color: var(--green);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.service-book-modal__item--design:hover {
  border-color: var(--accent);
}
.service-book-modal__icon {
  font-size: 1.35rem;
  flex-shrink: 0;
  line-height: 1;
}
.service-book-modal__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}
.service-book-modal__name {
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1.35;
}
.service-book-modal__action {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--green);
}
.service-book-modal__item--design .service-book-modal__action {
  color: var(--accent-dark);
}

/* ── WHATSAPP FLOAT ── */
.wa-float {
  position: fixed;
  z-index: 500;
  left: auto;
  right: var(--float-edge);
  bottom: calc(var(--float-edge) + env(safe-area-inset-bottom, 0px));
  width: var(--float-btn-size);
  height: var(--float-btn-size);
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: #25d366;
  color: var(--white);
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(37, 211, 102, 0.35);
  transition: var(--transition);
}
.wa-float span { display: none; }
.wa-float:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(37, 211, 102, 0.45); }
.wa-float svg { width: 17px; height: 17px; fill: var(--white); flex-shrink: 0; }
/* Keep footer clear of the float stack (pages with WhatsApp float only) */
body:has(.wa-float) > footer {
  padding-bottom: calc(
    var(--float-edge) + var(--float-btn-size) + var(--float-btn-gap) +
      var(--float-btn-size) + 0.5rem + env(safe-area-inset-bottom, 0px)
  );
}

/* ── ANIMATIONS ── */
.fade-up { opacity: 0; transition: opacity 0.6s ease; }
.fade-up.visible { opacity: 1; }
.fade-up:nth-child(1) { transition-delay: 0.1s; }
.fade-up:nth-child(2) { transition-delay: 0.2s; }
.fade-up:nth-child(3) { transition-delay: 0.3s; }
.fade-up:nth-child(4) { transition-delay: 0.4s; }

/* ── RESPONSIVE ── */

/* Large desktop → compact desktop */
@media (max-width: 1200px) {
  .nav-links a { padding: 0.5rem 0.6rem; }
  .nav-cta .btn-primary { padding: 0.7rem 1.25rem; }
  .hero-circle-1 { width: 380px; height: 380px; right: -80px; }
  .hero-circle-2 { width: 300px; height: 300px; }
}

/* Tablet landscape / narrow laptop — mobile nav */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-cta {
    gap: 0.4rem;
    flex-shrink: 0;
  }
  .nav-cta .btn-primary {
    display: inline-flex;
    flex-shrink: 0;
    padding: 0.5rem 0.72rem;
    font-size: 0.72rem;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    background: var(--green);
    color: var(--white);
    border: none;
    box-shadow: 0 4px 14px rgba(45, 134, 40, 0.35);
  }
  .nav-cta .btn-primary:hover {
    background: var(--green-dark);
    color: var(--white);
    transform: none;
    box-shadow: 0 6px 18px rgba(45, 134, 40, 0.4);
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .hero-visual {
    justify-content: center;
    min-height: auto;
    max-width: min(320px, 72vw);
    margin: 0 auto;
    order: -1;
  }
  .hero-logo-float-wrap {
    max-width: min(280px, 70vw);
  }
  .hero-copy {
    order: 2;
    max-width: none;
    padding-inline: clamp(1rem, 6vw, 2.5rem);
    align-items: flex-start;
    text-align: left;
  }
  .hero-title { max-width: none; }
  .hero-subtitle { max-width: 48ch; }

  .about-grid { grid-template-columns: 1fr; align-items: start; }
  .about-image-wrapper {
    max-width: 360px;
    margin: 0 auto;
    width: 100%;
    height: auto;
  }
  .about-image-top { flex: none; }
  .about-image-frame {
    flex: none;
    aspect-ratio: 1024 / 998;
    min-height: 0;
  }
  .about-content { height: auto; }
  .about-content .cert-strip { margin-top: 1.5rem; }
  .about-stat-card { right: 0; }
  .about-cta-row { grid-template-columns: 1fr; }

  .booking-inner { grid-template-columns: 1fr; align-items: start; }
  .booking-aside {
    max-width: 300px;
    margin: 0 auto;
    width: 100%;
    height: auto;
  }
  .booking-actions { margin-top: 0; }
  .booking-content { height: auto; }
  .booking-features { flex: none; justify-content: flex-start; }
  .booking-actions { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }

  .service-card { padding: clamp(1.25rem, 3vw, 2rem); }
  .stab { padding: 0.55rem 1.1rem; }
}

/* Tablet portrait */
@media (max-width: 900px) {
  .hero-copy {
    padding-inline: clamp(1.25rem, 7vw, 2rem);
    gap: clamp(1.25rem, 4vw, 1.75rem);
  }
  .hero-stats { gap: clamp(1rem, 4vw, 1.5rem); justify-content: flex-start; }
  .hero-stat-divider { display: none; }
  .exp-grid { grid-template-columns: 1fr 1fr; }
  .process-step { padding: 1.5rem 1rem; }
}

/* Services table — stack before columns get cramped */
@media (max-width: 960px) {
  .services-table__row,
  #services.services-filter-all .services-table__row,
  #services.services-table--no-prices .services-table__row,
  #services.services-filter-all.services-table--no-prices .services-table__row,
  .page-pricing #services .services-table__row,
  .page-pricing #services.services-filter-all .services-table__row,
  .page-pricing #services.services-filter-all .services-subsection[data-category="design"] .services-table__row,
  .page-pricing #services:not(.services-filter-all) .services-subsection[data-category="design"] .services-table__row,
  .page-design #services .services-table__row {
    grid-template-columns: 1fr;
    row-gap: 0.45rem;
    padding: 0.85rem 1rem;
  }
  #services.services-filter-all .services-table__cat {
    display: block;
  }
  .services-table__service {
    flex-wrap: wrap;
  }
  .services-table__actions-inner {
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
  }
  /* Row is now stacked full-width: float the precis button into the flow
     instead of leaving it absolutely positioned off-screen to the left. */
  .services-table__actions--cours .services-table__btn-precis {
    position: static;
    transform: none;
    width: 100%;
    height: auto;
    min-height: 2.75rem;
    margin: 0 0 0.5rem;
    font-size: var(--text-sm);
  }
  .services-table__price {
    justify-content: flex-start;
  }
  .services-table__price .price-range {
    max-width: 100%;
    justify-content: flex-start;
    width: 100%;
  }
}

/* Large phone */
@media (max-width: 768px) {
  :root {
    --site-header-height: 4.25rem;   /* voir :root en tete de feuille */
  }
  .fade-up {
    opacity: 1;
    transition: none;
  }
  .hero-visual {
    min-height: min(280px, 70vw);
  }
  .hero-stats {
    min-height: 4.5rem;
  }
  .services-table__price {
    min-height: 2.5rem;
  }
  .services-table__price .price-range:empty,
  .services-table__price .price-range[data-xof]:empty,
  .services-table__price .price-range[data-xof-from]:empty {
    min-width: 8.5rem;
  }
  .hero-copy {
    padding-inline: clamp(1.5rem, 8vw, 2.25rem);
    gap: clamp(1.35rem, 5vw, 2rem);
  }
  .hero-eyebrow,
  .hero-title,
  .hero-subtitle,
  .hero-actions,
  .hero-stats {
    padding-inline-start: clamp(0.35rem, 2.5vw, 1rem);
  }
  .exp-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form-card .form-row { grid-template-columns: 1fr; }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }
  .footer-bottom > div { justify-content: center; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn {
    width: 100%; justify-content: center; text-align: center;
    white-space: normal;
  }
  .btn { white-space: normal; }
  .about-stat-card {
    position: relative; right: auto; top: auto;
    margin-top: 1rem; display: inline-block;
  }
  .about-cta-row { flex-direction: column; }
  .about-cta-row .btn { width: 100%; justify-content: center; }
  .booking-actions .btn { width: 100%; justify-content: center; }
  .modal-overlay { padding: 1rem; align-items: flex-end; }
  .modal-box {
    max-height: 90vh;
    padding: 1.75rem 1.25rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .modal-actions { flex-direction: column; }
  .modal-actions .btn { width: 100%; }
}

/* Small phone */
@media (max-width: 600px) {
  .services-table__actions-inner {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .services-table__actions .btn {
    height: auto;
    min-height: 2.75rem;   /* cible tactile : voir le bloc « CIBLES TACTILES » */
    padding: 0.5rem 0.65rem;
    white-space: normal;
  }
  .nav-logo-text { max-width: 7rem; overflow: hidden; text-overflow: ellipsis; }
  .nav-cta .btn-primary {
    padding: 0.45rem 0.6rem;
    font-size: 0.68rem;
  }
  .hero-stat-label { font-size: clamp(0.6rem, 2.5vw, 0.75rem); }
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    width: 100%;
  }
  .hero-stat-item { text-align: center; }
  /* .phares__entete h2 fait partie de la liste : sans lui, le titre du
     triptyque restait a 27,5px pendant que les trois autres descendaient a
     19,9px — le meme ecart que celui corrige sur grand ecran. */
  .section-header h2,
  .phares__entete h2,
  .about-content h2,
  .booking-content h2,
  .contact-info h2 { font-size: var(--text-3xl); }
  .service-card-cta .btn { width: 100%; justify-content: center; }
  .testimonial-form-card .btn { width: 100%; justify-content: center; }
  .page-share-experience .share-experience-actions {
    flex-direction: column;
    align-items: stretch;
    max-width: 22rem;
    margin-inline: auto;
    gap: 0.75rem;
  }
  .page-share-experience .testimonial-form-card #testimonial-submit-btn {
    align-self: center;
    width: auto;
    max-width: 100%;
  }
  .contact-form-card .btn-lg { white-space: normal; }
  .calendly-widget { padding: 1.5rem; }
  .section-header { margin-bottom: 1.75rem; }
  :root {
    --float-btn-size: 30px;
    --float-edge: 0.5rem;
  }
}

/* Very small screens */
@media (max-width: 400px) {
  .hero-stats { grid-template-columns: 1fr; gap: 1rem; }
  .hero-title { font-size: clamp(1.65rem, 8vw, 2rem); }
  .section-header h2,
  .phares__entete h2,
  .about-content h2,
  .booking-content h2,
  .contact-info h2,
  .policy-content h2 { font-size: var(--text-2xl); }
  .stab { width: 100%; text-align: center; }
  .cert-strip { justify-content: center; }
  .popular-badge { position: static; display: inline-block; margin-bottom: 0.75rem; }
}

/* Fluid type tweak on mid-width browser resize */
@media (max-width: 1100px) and (min-width: 769px) {
  .hero-subtitle { font-size: var(--text-base); }
  .section-header p { font-size: var(--text-base); }
}

/* Short viewports (landscape phones) */
@media (max-height: 500px) and (orientation: landscape) {
  #hero { min-height: auto; }
  body.has-fixed-header #hero .hero-content { padding-top: 1.5rem; padding-bottom: 2rem; }
  .hero-content { padding-top: 5rem; padding-bottom: 2rem; }
  .mobile-menu { justify-content: flex-start; padding: 5rem 1.5rem 2rem; overflow-y: auto; }
  .mobile-menu.open { display: flex; }
}

/* ── Service detail pages ── */
.page-service { background: var(--white); }
.service-page { padding-top: calc(var(--site-header-height, 72px) + 1rem); }
.service-page-back { margin-bottom: 1rem; }
.service-page-back a {
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.service-page-back a:hover { text-decoration: underline; }
.service-page-header { max-width: 42rem; }
.service-page-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 0.75rem;
}
.service-page-header h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  margin: 0.5rem 0 1rem;
  line-height: 1.15;
}
.service-page-share {
  margin: 0 0 1.25rem;
}
.service-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.service-share-btn__icon {
  font-size: 1.05em;
  line-height: 1;
}
.service-page-intro {
  font-size: var(--text-lg);
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 0;
  max-width: 40rem;
}
.service-page-hero.section-sm {
  padding-bottom: clamp(0.75rem, 2vw, 1.25rem);
}
.service-page-block.section-sm:has(.service-page-collapse) {
  padding: 0.3rem 0;
  background: transparent;
}
.service-page-block--alt:has(.service-page-collapse) {
  background: transparent;
}
#book-now.service-page-block.section-sm:has(.service-page-collapse) {
  padding-top: clamp(0.5rem, 1.5vw, 0.75rem);
}
#svc-faq.service-page-block.section-sm:has(.service-page-collapse) {
  padding-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
}
.service-page-block:has(.service-page-collapse) .service-page-collapse {
  margin-bottom: 0.4rem;
}
#svc-faq .service-page-collapse {
  margin-bottom: 0;
}
.service-page-block:has(.service-page-collapse[open]) {
  padding-bottom: 0.55rem;
}
.service-page-toc {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.service-page-toc__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.65rem;
}
.service-page-toc__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.service-page-toc__link {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary-dark);
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.service-page-toc__link:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary-dark);
}
.service-page-block {
  scroll-margin-top: calc(var(--site-header-height, 72px) + 1rem);
}
.service-page-block--alt {
  background: var(--off-white);
}
.service-page-collapse {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.service-page-collapse__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.2s ease;
}
.service-page-collapse:not([open]) .service-page-collapse__summary {
  padding: 0.7rem 1.1rem;
}
.service-page-collapse:not([open]) .service-section-title {
  font-size: var(--text-xl);
}
.service-page-collapse__summary::-webkit-details-marker { display: none; }
.service-page-collapse__summary::marker { content: ''; }
.service-page-collapse__summary:hover { background: var(--off-white); }
.service-page-collapse__summary .service-section-title {
  margin: 0;
  font-size: var(--text-2xl);
}
.service-page-collapse__chev {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--off-white);
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.service-page-collapse__chev::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--primary-dark);
  border-bottom: 2px solid var(--primary-dark);
  transform: translate(-60%, -70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.service-page-collapse[open] .service-page-collapse__chev::before {
  transform: translate(-60%, -30%) rotate(-135deg);
}
.service-page-collapse__body {
  padding: 0 1.25rem 1.25rem;
}
.service-page-collapse__lead {
  margin: 0 0 1rem;
}
.service-page-collapse .service-booking-header .service-section-title {
  display: none;
}
.service-page-collapse .service-booking-header {
  margin-bottom: 1rem;
}
.service-page-nav-arrows {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 35;
}
.service-page-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.82);
  color: var(--primary-dark);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
  opacity: 0.55;
  transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.service-page-nav-arrow:hover {
  opacity: 1;
  background: var(--white);
  border-color: var(--primary);
  transform: translateY(-50%) scale(1.05);
}
.service-page-nav-arrow--prev { left: clamp(0.25rem, 1.2vw, 0.75rem); }
.service-page-nav-arrow--next { right: clamp(0.25rem, 1.2vw, 0.75rem); }
.service-page-block__head {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--border);
}
.service-page-block__head .service-section-title {
  margin-bottom: 0.35rem;
}
.service-page-block__head .service-section-lead {
  margin-bottom: 0;
}
.service-page-block__head--sub {
  margin-top: 2rem;
}
.service-booking-embed {
  margin-top: 0;
}
.service-booking-embed.service-booking-section {
  background: transparent;
}
.service-page-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}
.service-page-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-sm);
}
.service-page-block--alt .service-page-panel {
  background: var(--white);
}
.service-page-panel__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin: 0 0 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
  color: var(--primary-dark);
}
.service-page-panel--payment {
  max-width: 42rem;
}
.service-list--readable {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text);
}
.service-list--readable li {
  margin-bottom: 0.65rem;
}
.service-list--readable li:last-child {
  margin-bottom: 0;
}
.service-section-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin-bottom: 0.5rem;
}
.service-section-lead {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  max-width: 40rem;
}
.service-packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}
.service-packages-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.service-packages-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service-package-card {
  position: relative;
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.65rem;
  padding-top: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  box-shadow: var(--shadow-sm);
}
.service-package-card--featured {
  border-color: var(--green);
  box-shadow: var(--shadow-md);
}
.service-packages-grid--3 .service-package-card:last-child {
  border-color: var(--gray-200);
}
.service-packages-grid--3 .service-package-card--featured:last-child {
  border-color: var(--green);
}
.service-package-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.7rem;
  border-radius: 100px;
  background: var(--accent);
  color: var(--accent-dark);
  border: 1px solid var(--accent-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.service-package-card--mode {
  display: flex;
  flex-direction: column;
}
.service-package-card--mode .mode-price-panel {
  margin-top: 0.25rem;
}
.service-package-card__cta {
  margin-top: auto;
  align-self: flex-start;
}
.service-package-card__langs {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: var(--green-light);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(45, 134, 40, 0.15);
  font-weight: 600;
}

/* Online / In-person format tiles (cours & exam prep packages) */
.mode-price-panel {
  margin: 0.5rem 0 0;
}
.mode-price-panel__heading {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 0.65rem;
}
.mode-price-panel__grid {
  display: grid;
  /* Container-driven: the tiles sit inside package cards that can themselves
     be in a multi-column grid, so a viewport media query is not enough. auto-fit
     wraps the two tiles to one column whenever the card is too narrow for two,
     preventing them from overflowing the card at intermediate widths. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}
.mode-price-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 1rem 1rem 1.1rem;
  border-radius: var(--radius);
  border: 2px solid var(--gray-200);
  background: var(--white);
  text-align: left;
  min-height: 100%;
}
.mode-price-tile--online {
  border-color: rgba(45, 134, 40, 0.35);
  background: linear-gradient(165deg, var(--green-light) 0%, var(--white) 55%);
}
.mode-price-tile--inperson {
  border-color: rgba(30, 40, 35, 0.12);
  background: linear-gradient(165deg, var(--gray-100) 0%, var(--white) 60%);
}
.mode-price-tile--popular {
  box-shadow: 0 0 0 1px rgba(240, 180, 41, 0.45);
}
.mode-price-tile__badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.45rem;
  border-radius: 100px;
  background: var(--accent);
  color: var(--primary-dark);
  border: 1px solid var(--accent-dark);
}
.mode-price-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  margin-bottom: 0.15rem;
}
.mode-price-tile__icon--online {
  color: var(--green);
  background: rgba(45, 134, 40, 0.12);
}
.mode-price-tile__icon--inperson {
  color: var(--gray-600);
  background: rgba(77, 92, 84, 0.1);
}
.mode-price-tile__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-base);
  color: var(--text);
}
.mode-price-tile__desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 0.35rem;
  flex: 1;
}
.mode-price-tile__amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  color: var(--primary);
  line-height: 1.2;
}
.mode-price-tile__amount .price-range__primary {
  font-size: inherit;
}
.mode-price-tile__amount .price-range__aside {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  margin-top: 0.15rem;
}
.mode-price-tile__unit {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
}
.mode-price-tile--selectable {
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.mode-price-tile--selectable:hover {
  border-color: var(--green-mid);
  transform: translateY(-1px);
}
.mode-price-tile--selectable.is-selected {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(45, 134, 40, 0.2);
}
.mode-price-tile--selectable.mode-price-tile--inperson.is-selected {
  border-color: var(--gray-600);
  box-shadow: 0 0 0 3px rgba(77, 92, 84, 0.15);
}
.booking-package-card--modes .mode-price-panel {
  margin-top: 0.35rem;
}
.service-package-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  padding-right: 4rem;
}
.service-package-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-2xl);
  color: var(--primary);
}
.service-package-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.55;
}
.service-package-features {
  margin: 0;
  padding-left: 1.2rem;
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text);
  line-height: 1.6;
}
.service-package-features li + li { margin-top: 0.45rem; }
.service-page-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
.service-list {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--text-muted);
  line-height: 1.65;
}
.service-list li + li { margin-top: 0.5rem; }
.service-process-steps { display: flex; flex-direction: column; gap: 1rem; }
.service-process-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.service-process-num {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-process-step p { margin: 0; color: var(--text-muted); line-height: 1.55; }
.service-delivery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.service-delivery-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
}
.service-delivery-card--express {
  border-color: var(--accent);
  background: #fffdf5;
}
.service-delivery-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  margin-bottom: 0.5rem;
}
.service-delivery-card--express .service-delivery-label { color: var(--accent-dark); }
.service-delivery-note {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.service-faq-list { max-width: 48rem; }
.service-faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.service-faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-base);
  padding: 1.1rem 1.35rem;
  list-style: none;
  line-height: 1.45;
}
.service-faq-item summary::-webkit-details-marker { display: none; }
.service-faq-item summary::after {
  content: '+';
  float: right;
  font-weight: 700;
  color: var(--primary);
}
.service-faq-item[open] summary::after { content: '−'; }
.service-faq-item p {
  margin: 0;
  padding: 0 1.25rem 1.25rem;
  color: var(--text-muted);
  line-height: 1.6;
  border-top: 1px solid var(--border);
}
.service-page-cta-band { background: var(--primary-dark); }
.service-page-cta-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.service-page-cta-inner .btn-outline {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--white);
}
.service-page-cta-inner .btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}
@media (max-width: 768px) {
  .service-page-split { grid-template-columns: 1fr; gap: 2rem; }
  .service-page-panels { grid-template-columns: 1fr; }
  .service-page-toc__list { gap: 0.4rem; }
  .service-page-cta-inner .btn { width: 100%; justify-content: center; }
  .service-page-header h1 { font-size: var(--text-3xl); }
  .service-packages-grid--3,
  .service-packages-grid--2 {
    grid-template-columns: 1fr;
  }
  .service-page-collapse__summary {
    padding: 0.85rem 1rem;
  }
  .service-page-collapse__body {
    padding: 0 1rem 1rem;
  }
  .service-page-nav-arrow {
    width: 2rem;
    height: 2rem;
    opacity: 0.45;
  }
  .service-page-nav-arrow svg {
    width: 18px;
    height: 18px;
  }
}

/* Service booking (Book now) */
.service-booking-section {
  background: var(--off-white);
  scroll-margin-top: calc(var(--site-header-height, 72px) + 1rem);
}
.service-booking-header { margin-bottom: 1.75rem; }
.booking-packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}
.booking-packages-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.booking-packages-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Un seul forfait proposé (préparation aux examens, entretien, soutien).
   Sans règle propre, `auto-fit` fabriquait trois pistes — une pleine, deux
   vides — et la carte s'étirait sur 900 px : trois puces de texte tirées d'un
   bord à l'autre et deux tuiles de prix démesurées.
   On ne la bride pas avec un plafond en pixels : un plafond plus `margin:auto`
   laisse deux bandes vides dès que la fenêtre s'élargit. La carte garde toute
   la largeur, mais se réorganise à l'intérieur — le descriptif à gauche, les
   deux formats et leurs prix à droite. La largeur devient une ressource. */
.booking-packages-grid--1 {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 769px) {
  .booking-packages-grid--1 .booking-package-card--modes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
  }
  /* Le bloc des prix occupe la seconde colonne sur toute la hauteur ; le titre,
     le sous-titre et le programme s'empilent seuls dans la première. */
  .booking-packages-grid--1 .booking-package-card--modes > .mode-price-panel {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    margin-top: 0;
  }
}
@media (max-width: 768px) {
  .booking-packages-grid,
  .booking-packages-grid--3,
  .booking-packages-grid--2 {
    grid-template-columns: 1fr;
  }
}
.booking-package-card {
  position: relative;
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: var(--shadow-sm);
}
.booking-package-card:hover {
  border-color: var(--primary-light);
}
.booking-package-card.is-selected,
.booking-package-card--featured.is-selected {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}
.booking-package-card--featured {
  border-color: var(--primary-light);
}
.booking-package-badge,
.service-package-badge {
  z-index: 1;
}
.booking-package-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.7rem;
  border-radius: 100px;
  background: var(--accent);
  color: var(--accent-dark);
  border: 1px solid var(--accent-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.booking-package-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin: 0 0 0.35rem;
  padding-right: 4rem;
}
.booking-package-card__subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}
.booking-package-card__schedule {
  margin: 0 0 0.75rem;
  padding-left: 1.15rem;
  font-size: var(--text-sm);
  color: var(--text);
}
.booking-package-card__langs {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0 0 1rem;
}
.booking-mode-prices {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.booking-mode-price {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  text-align: left;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--off-white);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  font-family: inherit;
}
.booking-mode-price:hover {
  border-color: var(--primary-light);
}
.booking-mode-price.is-selected {
  border-color: var(--primary);
  background: var(--primary-light);
}
.booking-mode-price--popular.is-selected {
  border-color: var(--primary);
}
.booking-mode-price__badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.5rem;
  border-radius: 100px;
  background: var(--accent);
  color: var(--primary-dark);
}
.booking-mode-price__label {
  font-weight: 600;
  font-size: var(--text-sm);
}
.booking-mode-price__amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  color: var(--primary);
}
.booking-mode-price__hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.booking-package-card__amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-2xl);
  color: var(--primary);
}
.booking-package-card__quote {
  font-weight: 700;
  color: var(--primary);
}
.booking-fieldset {
  border: none;
  margin: 0 0 1.25rem;
  padding: 0;
}
.booking-fieldset--mode,
.booking-fieldset--summary,
.booking-fieldset--language,
.booking-fieldset--track {
  padding: 1.15rem 1.25rem;
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.booking-fieldset__hint {
  margin: 0 0 0.85rem;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
}
.cours-track-grid {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.cours-track-group {
  padding: 0.65rem 0.75rem;
  background: var(--gray-100);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cours-track-group--general {
  border-left: 3px solid var(--green);
}
.cours-track-group--specialized {
  border-left: 3px solid var(--accent);
}
.cours-track-group__title {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-dark);
}
.cours-track-group__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}
.cours-track-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.4rem;
  row-gap: 0;
  padding: 0.45rem 0.55rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  min-height: 0;
}
.cours-track-card:hover {
  border-color: var(--green-mid);
}
.cours-track-card:has(input:checked) {
  border-color: var(--green);
  background: var(--green-light);
}
.cours-track-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cours-track-card__lang {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
}
.cours-track-card__lang--short,
.cours-track-card__name--short {
  display: none;
}
.cours-track-card__name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.booking-fieldset--track .booking-fieldset__hint {
  margin-bottom: 0.6rem;
}
@media (max-width: 600px) {
  .booking-fieldset--track {
    padding: 0.75rem 0.8rem;
  }
  .booking-fieldset--track .booking-fieldset__hint {
    margin-bottom: 0.5rem;
    font-size: 0.78rem;
    line-height: 1.4;
  }
  .cours-track-grid { gap: 0.5rem; }
  .cours-track-group {
    padding: 0.5rem 0.55rem;
  }
  .cours-track-group__title {
    margin-bottom: 0.35rem;
    font-size: 0.62rem;
  }
  .cours-track-group__grid {
    gap: 0.35rem;
  }
  .cours-track-card {
    padding: 0.38rem 0.42rem;
    column-gap: 0.3rem;
  }
  .cours-track-card__lang--full { display: none; }
  .cours-track-card__lang--short { display: block; }
  .cours-track-card__name--full:has(+ .cours-track-card__name--short) { display: none; }
  .cours-track-card__name--short { display: block; }
  .cours-track-card__name {
    font-size: 0.65rem;
    line-height: 1.2;
  }
}
.booking-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 600px) {
  .booking-summary-grid { grid-template-columns: 1fr; }
}
.booking-field input {
  border: 2px solid var(--gray-200);
  background: var(--white);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}
.booking-field input[readonly] {
  background: var(--gray-100);
  color: var(--gray-800);
  cursor: default;
  border-color: var(--gray-200);
}
#booking-package-display.is-filled {
  background: var(--white);
  border-color: var(--green);
  color: var(--green-dark);
  font-weight: 600;
}
#booking-package-display[aria-invalid="true"] {
  border-color: #c62828;
  background: #fff5f5;
}
.booking-field input[readonly]:focus {
  box-shadow: none;
  border-color: var(--gray-200);
}
.booking-fieldset legend {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  margin-bottom: 0.65rem;
  color: var(--text);
}
.booking-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.booking-radio-pill {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.booking-radio-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.booking-radio-pill span {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 2px solid var(--gray-200);
  border-radius: 100px;
  font-size: var(--text-sm);
  font-weight: 600;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.booking-radio-pill input:checked + span {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--white);
}
.booking-radio-pill input:focus-visible + span {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.booking-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 600px) {
  .booking-form-grid { grid-template-columns: 1fr; }
}
.booking-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.booking-field span {
  font-size: var(--text-sm);
  font-weight: 600;
}
.booking-field input {
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-base);
}
.booking-field input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-light);
}
.booking-mode-price {
  border: 2px solid var(--gray-200);
}
.booking-policy-box {
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.booking-policy-box h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin: 0 0 0.75rem;
}
.booking-policy-list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.55;
}
.booking-policy-list li + li { margin-top: 0.5rem; }
.booking-policy-list li strong {
  color: var(--text);
  font-weight: 700;
}
.booking-policy-list__accept {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--gray-200);
  font-size: var(--text-sm);
  color: var(--text-muted);
  list-style: none;
}
.booking-policy-list__accept::marker { content: ''; }
.booking-policy-list__placeholder {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
  list-style: none;
}
.booking-policy-list__placeholder::marker { content: ''; }
.booking-policy-package-intro {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 0.75rem;
}
.booking-policy-package-intro strong {
  color: var(--text);
  font-weight: 700;
}
.policy-modal-list {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-muted);
}
.policy-modal-list li + li { margin-top: 0.5rem; }
.policy-modal-list strong { color: var(--text); font-weight: 700; }
.booking-policy-check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
  font-size: var(--text-sm);
  cursor: pointer;
  line-height: 1.45;
}
.booking-policy-check input {
  margin-top: 0.2rem;
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--primary);
}
.booking-actions-hint {
  margin: 0 0 1rem;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-muted);
}
.booking-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.booking-form-actions .btn {
  flex: 1 1 auto;
  min-width: min(100%, 12rem);
}
.booking-whatsapp-btn {
  background: #25d366;
  color: #fff;
  border: 2px solid #25d366;
}
.booking-whatsapp-btn:hover:not(:disabled),
.booking-whatsapp-btn:focus-visible:not(:disabled) {
  background: #1ebe57;
  border-color: #1ebe57;
  color: #fff;
}
.booking-form-actions .btn:disabled,
.testimonial-form-card .btn:disabled,
.question-form-actions .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.booking-success-msg {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  border-radius: var(--radius-md);
  color: #1b5e20;
  font-size: var(--text-sm);
  line-height: 1.55;
}

/* Video facade — mobile embed on demand (LCP / TBT) */
.video-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--gray-800);
  cursor: pointer;
}
.video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-facade__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3.25rem;
  height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  color: var(--white);
  font-size: 1.15rem;
  pointer-events: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ticker-track { animation: none; }
  .fade-up { opacity: 1; }
}
/* ── ASD keycaps logo (animated: a → s → pause → d, 5s cycle) ── */
.asd-keys { display: block; height: clamp(30px, 7vw, 36px); width: auto; overflow: visible; }
.asd-key { transform-box: fill-box; transform-origin: 50% 50%; animation: asdPress 5s cubic-bezier(.4, 0, .2, 1) infinite; }
.asd-key--s { animation-delay: .5s; }
.asd-key--d { animation-delay: 1.5s; }
@keyframes asdPress {
  0%, 4.4%, 100% { transform: translateY(0); }
  2.2% { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) { .asd-key { animation: none !important; } }
.footer-brand-row .asd-keys { height: 32px; }
.asd-keys--hero { height: clamp(46px, 6vw, 60px); margin: 1.4rem auto 0; }

/* ── Hero trust card ── */
.hero-trust { display: flex; flex-direction: column; align-items: center; width: 100%; }
.hero-trust-card { background: var(--white); border-radius: 16px; box-shadow: 0 18px 44px rgba(0, 0, 0, .28); padding: 1.3rem 1.4rem; max-width: 340px; width: 100%; }
.hero-trust-head { display: flex; gap: .85rem; align-items: center; }
.hero-trust-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--green-light); flex-shrink: 0; }
.hero-trust-name { font-family: var(--font-display); font-weight: 800; color: var(--green-deep); font-size: 1.05rem; }
.hero-trust-role { font-size: .78rem; color: var(--gray-600); line-height: 1.45; margin-top: 2px; }
.hero-trust-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--gray-200); text-align: center; }
.hero-trust-stat .num { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--green); }
.hero-trust-stat .lbl { display: block; font-size: .68rem; color: var(--gray-600); line-height: 1.3; margin-top: 2px; }
.hero-trust-badge { margin-top: .9rem; background: var(--accent); color: #3a2600; font-weight: 700; font-size: .78rem; text-align: center; border-radius: 100px; padding: .45rem .8rem; }

/* ── Ticker keycap letters ── */
.ticker-badge .tk-key { display: inline-block; height: 1.05em; width: auto; vertical-align: -0.14em; margin: 0 0.06em; }

/* ── Footer: keycap logo + ASD brand link ── */
.footer-logo-link { display: block; width: fit-content; margin: 0 auto 0.6rem; }
.footer-logo-link .asd-keys { height: 26px; }
.footer-brand-link { font-weight: 700; color: inherit; }
.asd-keys--footer { height: 26px; }
.asd-keys a, .asd-keys--hero a { cursor: pointer; }

/* Hero trust card — fill the column (desktop) */
@media (min-width: 1025px) {
  .hero-trust { max-width: none; width: 100%; }
  .hero-trust-card { max-width: none; width: 100%; justify-content: space-evenly; padding: 1.7rem 1.9rem; }
  .hero-trust-photo { width: 88px; height: 88px; }
  .hero-trust-name { font-size: 1.35rem; }
  .hero-trust-role { font-size: .88rem; margin-top: 4px; }
  .hero-trust-stats { margin-top: 1.15rem; padding-top: 1.15rem; }
  .hero-trust-stat .num { font-size: 1.55rem; }
  .hero-trust-stat .lbl { font-size: .76rem; }
  .hero-trust-badge { font-size: .88rem; padding: .55rem .9rem; margin-top: 1.15rem; }
  .asd-keys--hero { height: clamp(54px, 6vw, 70px); }
}

/* Hero trust card v2 — banner photo, brand story, centered indent */
/* Trust photo keeps its native 1024x998 ratio — never cropped (home + about). */
.hero-trust-photo { display: block; width: 100%; height: auto; aspect-ratio: 1024 / 998; border-radius: 12px; object-fit: contain; border: none; }
.hero-trust-name { margin-top: .9rem; }
.hero-trust-story { font-size: .85rem; color: var(--gray-600); line-height: 1.6; margin: .7rem 0 0; }
@media (min-width: 1025px) {
  .hero-trust { padding-right: clamp(1.5rem, 4vw, 3.5rem); }
  .hero-trust-story { font-size: .9rem; }
}

/* ── Hero on white (home) ── */
#hero { background: var(--white); }
.hero-eyebrow { color: var(--green); }
.hero-title { color: var(--gray-800); }
.hero-title span span { color: var(--accent); }
.hero-subtitle { color: var(--gray-600); }
.hero-trust-card { border: 1px solid var(--gray-200); box-shadow: 0 14px 36px rgba(0, 0, 0, .10); }
.hero-circle-1, .hero-circle-2 { opacity: .35; }

/* ASD brand link in the copyright: plain text, no underline */
.footer-copy .footer-brand-link { text-decoration: none; }
.footer-copy .footer-brand-link:hover { text-decoration: none; }
/* The badge's text-transform:uppercase must not capitalize the keycap letters */
.ticker-badge .tk-key text { text-transform: none; }

/* ── Anchor offset: fixed header must never hide section titles (all pages) ── */
html { scroll-padding-top: calc(var(--site-header-height, 7.4rem) + 0.75rem); }

/* Hero headline in the logo's dominant green */
.hero-title { color: #0f5132; }

/* ── Testimonials slider (one sliding row, subtle side arrows) ──
   Cards size to their CONTENT (height auto, ~50-word texts fit comfortably);
   3 per view desktop / 2 tablet / 1 mobile. "safe center" keeps the first
   card reachable when the row overflows (mobile left-clip fix). */
.testimonials-slider { position: relative; --tgap: clamp(1.1rem, 2.2vw, 1.6rem); }
.testimonials-viewport { overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding: 4px 2px 10px; }
.testimonials-viewport::-webkit-scrollbar { display: none; }
.testimonials-slider .testimonials-grid {
  display: flex; flex-wrap: nowrap; gap: var(--tgap);
  align-items: flex-start;            /* chaque carte prend SA hauteur */
  justify-content: safe center;       /* centre quand ça tient, jamais de coupure */
  width: 100%;
}
.testimonials-slider .testimonials-grid--count-1,
.testimonials-slider .testimonials-grid--count-2 { max-width: none; }
.testimonials-slider .testimonial-card {
  flex: 0 0 clamp(272px, calc((100% - 2 * var(--tgap)) / 3), 380px);
  height: auto; min-height: 0;        /* la hauteur suit le contenu */
  scroll-snap-align: start;
}
@media (max-width: 1024px) {
  .testimonials-slider .testimonial-card { flex-basis: clamp(260px, calc((100% - var(--tgap)) / 2), 380px); }
}
@media (max-width: 640px) {
  .testimonials-slider .testimonial-card { flex-basis: min(88%, 340px); }
  .testimonials-viewport { scroll-padding-left: 4px; }
}

.testi-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--gray-200); background: var(--white); color: var(--green-dark);
  font-size: 22px; line-height: 1; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0 0 3px;
  opacity: .55; box-shadow: var(--shadow-md); transition: opacity .15s;
}
.testi-nav:hover { opacity: 1; }
.testi-nav:disabled { opacity: .15; cursor: default; pointer-events: none; }
.testi-nav[hidden] { display: none; }
.testi-nav--prev { left: -12px; }
.testi-nav--next { right: -12px; }
@media (max-width: 640px) { .testi-nav--prev { left: -6px; } .testi-nav--next { right: -6px; } }

@media (max-width: 640px) { .testi-nav--prev { left: -6px; } .testi-nav--next { right: -6px; } }

/* ── Section reveal (slide up on scroll) — classes are JS-applied only ── */
/* Reveal de section, cale sur huts.com : easeOutCubic releve sur le site
   (cubic-bezier(.33, 1, .68, 1)), deplacement retenu, opacite plus rapide
   que le mouvement pour que le texte soit lisible avant d'etre en place. */
.sect-pre { opacity: 0; transform: translateY(26px);
  transition: opacity .5s cubic-bezier(.33, 1, .68, 1),
              transform .8s cubic-bezier(.33, 1, .68, 1); }
.sect-pre.sect-in { opacity: 1; transform: none; }

/* ── About: intro section appears with a slight zoom ── */
@keyframes topZoomIn { from { opacity: 0; } to { opacity: 1; } }
.top-zoom { animation: topZoomIn .7s ease-out both; }
/* Le hero garde son zoom d entree — mais porte par son CONTENU, pas par la
   section pleine largeur. La section verte reste fixe et remplit l ecran ; le
   contenu (mosaique + gouttieres) monte de 96 % a 100 %, ce qui devoile du
   vert sur les cotes, jamais le blanc du fond de page. */
body.page-home #hero.top-zoom { animation: none; opacity: 1; }
/* Le zoom est declenche par la classe .top-zoom que le JS pose sur #hero APRES
   la sortie du portail d entree et le premier rendu (voir initTopSectionZoom).
   En CSS pur, il jouait des le parsing — derriere le portail, avant que la
   page soit visible : on ne le voyait jamais. Gate sur la classe = il demarre
   quand la page est reellement a l ecran. Sans la classe, le contenu est a son
   etat normal (visible), donc rien ne casse si le JS ne s execute pas. */
body.page-home #hero.top-zoom .hero-content {
  animation: heroZoomIn .85s cubic-bezier(.22, 1, .36, 1) both;
  transform-origin: 50% 45%;
  will-change: transform, opacity;
}
@keyframes heroZoomIn {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sect-pre { opacity: 1; transform: none; transition: none; }
  .top-zoom { animation: none; }
}

/* ── Testimonials: verified profile (photo + badge) ── */
.testimonial-avatar { position: relative; overflow: hidden; }
.testimonial-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; z-index: 1; }
.testimonial-avatar__fallback { position: relative; }
.testimonial-verified {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 5px; vertical-align: 1px;
  border-radius: 50%; background: var(--green); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1;
}

/* ── Testimonial form: optional Google verify block ── */
.t-google-verify { margin: 0 0 1.1rem; padding: .85rem 1rem; border: 1px dashed var(--gray-200); border-radius: 12px; background: var(--off-white, #f8faf9); }
.t-google-verify__hint { margin: .55rem 0 0; font-size: .8rem; color: var(--gray-600); line-height: 1.5; }
.t-google-verify__done { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.t-google-verify__done img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.t-google-verify__name { font-weight: 600; color: var(--gray-800); }
.t-google-verify__badge { color: var(--green); font-weight: 700; font-size: .8rem; }
.t-google-verify__undo { background: none; border: none; color: var(--gray-500); font-size: .78rem; text-decoration: underline; cursor: pointer; padding: 0; }
.t-google-verify__undo:hover { color: var(--gray-800); }

/* Inside a zoomed top block, fade-up children must not start hidden:
   the block's zoom IS the entrance animation. */
.top-zoom .fade-up { opacity: 1; }

/* ── Testimonial foot: name / role / city each on its own line ── */
.testimonial-client .testimonial-role,
.testimonial-client .testimonial-country { display: block; margin-top: 3px; }
.testimonial-client .testimonial-role { font-size: 0.8rem; color: var(--gray-600); }
.testimonial-client .testimonial-country { font-size: 0.78rem; color: var(--gray-500); }

/* ── Mobile hero: trust card fills the width with small side margins ── */
@media (max-width: 640px) {
  .hero-visual { max-width: min(480px, 92vw); min-height: auto; }
  .hero-trust-card { max-width: none; width: 100%; padding: 1.4rem 1.5rem; }
}

/* ── About page: compact credential cards + cert pills under the photo ── */
.about-content .exp-grid { gap: 0.7rem; margin: 1rem 0; }
.exp-card { padding: 0.85rem 0.95rem; }
.exp-icon { font-size: 1.15rem; margin-bottom: 0.2rem; }
.exp-title { font-size: var(--text-sm); }
.exp-detail { font-size: var(--text-xs); margin-top: 0.15rem; }
.about-image-wrapper .cert-strip { flex: 0 0 auto; margin: 1rem 0; }

/* ── About page: title lines never wrap, columns share the same height ── */
.about-content h1 { font-size: clamp(1.55rem, 4vw, 2.6rem); line-height: 1.15; }
.about-content h1 .nb { white-space: nowrap; }
@media (min-width: 1025px) {
  /* both columns stretch; each spreads its own content so neither shows a void */
  .about-image-wrapper { justify-content: space-between; }
  .about-image-top { flex: 0 0 auto; }

  /* La colonne de texte ne repartit PLUS son mou entre tous ses elements.
     En space-between, les quatre ecarts grossissaient ensemble des que le texte
     raccourcissait — la hierarchie des marges (badge serre, grand pas sous le
     titre, paragraphes rapproches) se diluait a chaque retouche : 16/28/18/36
     devenait 23/35/26/43 pour douze mots de moins.
     Desormais la prose garde ses marges exactes, et `margin-top: auto` sur la
     grille absorbe seule la variation : elle cale du meme coup son bas sur
     celui de la colonne, donc a hauteur des boutons d'en face. */
  .about-content { justify-content: flex-start; }
  .about-content .exp-grid { flex: 0 0 auto; }
}
/* `margin-top: auto` est pose PLUS BAS, apres la regle `.about-content
   .exp-grid { margin: 0 }` du bloc « tidy alignment » : a specificite egale,
   c'est la derniere ecrite qui gagne, et la poser ici la ferait annuler. */

/* ── About page: tidy alignment & consistent vertical rhythm (FR + EN) ── */
/* badge hugs its label instead of stretching across the column */
.about-content .badge { display: inline-flex; align-items: center; width: fit-content; align-self: flex-start; margin-bottom: .75rem; }
/* Rythme HIÉRARCHISÉ, et non « even » comme auparavant : les quatre marges
   valaient toutes 1rem, si bien que le badge, le titre et les deux paragraphes
   se suivaient au même pas — cinq éléments également espacés, aucune relation
   lisible. Et comme la colonne est en space-between (ci-dessus), le mou venait
   s'ajouter à parts égales, ce qui uniformisait encore : 23/23/23/28 px.
   Les écarts disent maintenant ce qui va ensemble : le badge colle à son titre,
   le grand pas est celui du titre au texte, les deux paragraphes se serrent,
   la grille de références s'écarte. Rendu : 16/28/18/36 px. */
.about-content h1 { margin: 0 0 1.5rem; }
.about-content > p { margin: 0 0 .9rem; }
.about-content > p:last-of-type { margin-bottom: 2rem; }
.about-content .exp-grid { margin: 0; }
/* ── « A PROPOS » : LE TROU AU MILIEU DE LA COLONNE DE TEXTE ──
   `margin-top: auto` calait le bas de la grille de references sur celui des
   boutons d en face, en versant TOUTE la difference de hauteur dans un seul
   ecart : 78px a 1440, 184px a 1920 — et l ecart grandissait avec l ecran,
   parce que la photo grandit plus vite que le texte qui lui fait face.
   Un alignement des bas ne vaut pas un trou au milieu de la prose.
   L ecart est donc fixe, et la colonne epouse son contenu (align-self: start).
   Deux consequences voulues :
     · le trou ne peut plus reapparaitre, quelle que soit la longueur du texte
       ou la langue ;
     · les deux colonnes peuvent finir a quelques dizaines de pixels d ecart —
       invisible, la section ayant desormais 79px de pied.
   La cause premiere est traitee juste apres : la grille cesse de s elargir
   sans fin, donc les deux colonnes restent de hauteur voisine d elles-memes. */
@media (min-width: 1025px) {
  .about-content { align-self: start; }
  .about-content .exp-grid { margin-top: clamp(1.75rem, 2.5vw, 3rem); }

  /* Bloc de lecture borne. A 1920 la biographie faisait 874px de large a
     22px, soit ~85 signes par ligne — bien au-dela des 45-75 confortables —
     et la photo, elle, atteignait 672px. Le plafond ne mord qu au-dessus de
     ~1490px de fenetre : rien ne change a 1440 et en dessous. */
  .about-grid { max-width: 78rem; margin-inline: auto; }
  .about-content > p { max-width: 68ch; }
}

/* ── « A PROPOS » : LA COLONNE IMAGE NE SE BORNE PLUS EN PIXELS ──
   Meme defaut que la carte du hero, meme correction. A 900px de large, la
   photo, les pastilles et les deux boutons faisaient 360px dans une grille de
   821 — 231px de vide de chaque cote — parce que `.about-image-wrapper`
   portait `max-width: 360px; margin: 0 auto`. Le plafond en pixels disparait.

   Et plutot que d etirer une photo sur toute la largeur d une tablette, la
   page GARDE ses deux colonnes jusqu a 641px : la mise en page de bureau
   (photo a gauche, texte a droite) se resserre progressivement au lieu de
   basculer d un coup en pile a 1024px. L empilement — et avec lui l ordre
   « qui parle avant le portrait » — ne commence qu en dessous de 641px, la
   ou deux colonnes deviendraient reellement trop etroites pour lire. */
@media (max-width: 1024px) {
  .about-image-wrapper { max-width: none; margin: 0; width: 100%; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .about-grid {
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.25rem, 3.5vw, 3rem);
  }
  /* Deux colonnes : la photo reprend sa place a gauche, comme sur bureau.
     L ordre n a de sens qu une fois les blocs empiles. */
  .about-image-wrapper,
  .about-content { order: 0; }
}

/* ── « A PROPOS » EMPILE : QUI PARLE AVANT LE PORTRAIT ──
   La photo, les sept pastilles et les deux boutons occupaient 555px avant que
   le titre n apparaisse a 768px du haut : on proposait « Travailler ensemble »
   a un visiteur a qui on n avait pas encore dit qui on est. Meme correction
   que le hero : le texte d abord, la preuve ensuite. */
@media (max-width: 640px) {
  .about-content       { order: 1; }
  .about-image-wrapper { order: 2; }
}
/* name plate hugs the name (no wide empty bar over the photo) */
.about-name-overlay { right: auto; width: fit-content; max-width: calc(100% - 3rem); padding: 0.6rem 1rem; }
.about-name-overlay h4,
.about-name-overlay .about-name-overlay__name { margin: 0; }
/* left column: equal breathing room around the pills */
/* Les pastilles se repartissaient a gauche : la derniere rangee laissait une
   ou deux etiquettes suspendues sous une rangee pleine. Centrees, une rangee
   courte se lit comme la pointe d un bloc, et non comme un reste — vrai quel
   que soit le nombre de certifications. */
.about-image-wrapper .cert-strip { margin: 0; gap: 0.45rem; justify-content: center; }

/* ── Booking box: full service policy as an inline collapsible ── */
.booking-policy-service { margin-top: 1rem; border-top: 1px solid var(--gray-200); padding-top: 0.85rem; }
.booking-policy-service > summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--green-dark); list-style: none; display: flex; align-items: center; gap: 0.45rem; }
.booking-policy-service > summary::-webkit-details-marker { display: none; }
.booking-policy-service > summary::before { content: "▸"; transition: transform .15s ease; }
.booking-policy-service[open] > summary::before { transform: rotate(90deg); }
.booking-policy-service > summary:hover { color: var(--green); }
.booking-policy-service__body { margin-top: 0.75rem; font-size: var(--text-sm); }
.booking-policy-service__body h4 { font-size: var(--text-md); margin: 0 0 0.4rem; }
.booking-policy-service__body .policy-modal-intro { margin: 0 0 0.6rem; color: var(--gray-600); }
.booking-policy-service__body .policy-modal-list { margin: 0 0 0.6rem; padding-left: 1.1rem; display: grid; gap: 0.4rem; }
.booking-policy-service__body .policy-modal-more { margin: 0; }

/* Booking policy: single collapsible list (no duplicated policy block) */
.booking-policy-service { margin-top: 0.75rem; border-top: none; padding-top: 0; }
.booking-policy-service > .booking-policy-list { margin-top: 0.75rem; }
.booking-policy-more { margin: 0.7rem 0 0; font-size: var(--text-sm); }

/* ══ Cartes « avis Google » (saisies via reviews-tool/, sans base de données) ══
   Même largeur et même rythme que les cartes témoignages pour que le carrousel
   reste harmonieux, mais identité visuelle propre : bordure verte + logo Google. */
.grev-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.4rem 1.25rem;
  background: var(--white);
  border: 3px solid #33a852;
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.grev-card:hover { border-color: #2c8f47; box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.grev-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.9rem; }
.grev-avatar {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: #e8f0fe; color: #1a73e8;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
}
.grev-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grev-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.08rem; color: var(--gray-800); line-height: 1.25; min-width: 0;
}
/* Étoiles à gauche, service à droite, sur une seule ligne.
   Le service ne revient jamais à la ligne (nowrap) et se dimensionne à son
   texte ; les étoiles gardent leur largeur, l'espace entre les deux s'ajuste. */
.grev-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; margin-bottom: 0.9rem;
}
.grev-service {
  margin: 0;
  flex: 0 0 auto;
  white-space: nowrap;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--green);
  letter-spacing: 0.02em;
  /* Pas de text-transform : l'étiquette s'affiche exactement comme dans le
     menu de reviews-tool (« Préparation TCF »). Le vert et la graisse
     suffisent à la distinguer du reste. */
}
.grev-stars { font-size: 1.35rem; line-height: 1; letter-spacing: 2px; color: #f5b816; flex: 0 0 auto; }
/* Cartes étroites : le service ne devant jamais passer à la ligne, on
   resserre étoiles et libellé pour que même le plus long
   (« Conseil & Achat de matériel ») tienne sur la ligne. */
@media (max-width: 640px) {
  .grev-meta { gap: 0.5rem; }
  .grev-stars { font-size: 1.1rem; letter-spacing: 1px; }
  .grev-service { font-size: 0.62rem; letter-spacing: 0.01em; }
}
.grev-stars .is-off { color: #dadce0; }
.grev-text {
  flex: 1 1 auto; margin: 0 0 1.1rem; padding: 0; border: none;
  font-family: var(--font-body); font-size: var(--text-sm);
  line-height: var(--leading-relaxed); color: var(--gray-800); font-style: normal;
}
.grev-text::before, .grev-text::after { content: none; }
.grev-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; }
.grev-date { font-size: var(--text-xs); color: var(--gray-500); }
.grev-logo { width: 34px; height: auto; flex: 0 0 auto; }

/* ══ Défilement automatique du carrousel ══ */
@media (prefers-reduced-motion: no-preference) {
  .testimonials-viewport[data-autoplay="on"] { scroll-behavior: smooth; }
}

/* Icône Google cliquable : mène à l'avis (ou à la fiche Maps par défaut) */
.grev-logo-link { display: inline-flex; line-height: 0; border-radius: 6px; transition: transform .15s ease, opacity .15s ease; }
.grev-logo-link:hover { transform: scale(1.12); }
.grev-logo-link:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* ══════════════════════════════════════════════════════════════════════
   COINS CARRÉS — boutons et cartes sans arrondi sur tout le site.
   Exceptions voulues : le toggle FR-EN (.lang-toggle) et le bouton
   « Laisser un avis Google » ([data-cfg-google-review]), ré-arrondis
   plus bas. Les badges, pastilles, avatars et photos gardent leur forme.
   Bloc placé en toute fin de feuille : il gagne à spécificité égale.
   ══════════════════════════════════════════════════════════════════════ */
/* boutons */
.btn, .stab, .atab, .calendly-btn, .testi-nav, #back-to-top, .wa-float,
.footer-social a, .portfolio-playlist__btn, .portfolio-modal__close,
.service-page-nav-arrow, .share-inline__btn, .booking-radio-pill span,
.service-book-modal__item, .service-page-toc__link, .video-facade__play,
/* cartes, panneaux, modales, formulaires */
.service-card, .services-table, .exp-card, .about-stat-card, .about-image-frame,
.testimonial-card, .grev-card, .testimonial-form-card, .contact-form-card,
.hero-trust-card, .service-package-card, .booking-package-card, .cours-track-card,
.cours-track-group, .booking-fieldset--track, .service-delivery-card,
.service-faq-item, .mode-price-tile, .booking-mode-price, .portfolio-item,
.portfolio-cta, .catalogue-service, .catalogue-gallery, .catalogue-footer-cta,
.sitemap-block, .policy-toc, .policy-amend, .policy-modal-intro--scoped,
.modal-box, .portfolio-modal__box, .service-page-panel, .service-page-toc,
.service-page-collapse, .booking-policy-box, .booking-success-msg,
.booking-success-msg.booking-captcha-error, .form-feedback, .testimonials-empty,
.process-step, .contact-link, .payment-methods, .calendly-widget, .t-google-verify,
.video-facade, .hero-trust-photo {
  border-radius: 0;
}
/* exception : bouton « Laisser un avis Google » (partout où il apparaît) */
a[data-cfg-google-review] { border-radius: var(--radius-sm); }

/* Contours fins — même finesse que les cartes du processus (.process-step,
   1.5px). Corrige les bordures de 2-3px des boutons et cartes. */
.btn-outline, .stab, .atab, .booking-radio-pill span, .booking-whatsapp-btn,
.portfolio-playlist__btn, .service-package-card, .mode-price-tile,
.booking-package-card, .booking-fieldset--track, .booking-mode-price,
.booking-policy-box, .booking-field input, .grev-card {
  border-width: 1.5px;
}

/* ══════════════════════════════════════════════════════════════════════
   HERO DESKTOP — grille à 2 colonnes × 2 rangées.

   Placé en toute fin de feuille : style.css est chargé APRÈS le <style>
   inline d'index.html, c'est donc ici que les règles gagnent réellement
   (.hero-grid, .hero-actions, .hero-trust-photo y sont redéfinis plus haut
   sans media query).

   Structure obtenue :
       rangée 1 :  bloc texte          |  trust card
       rangée 2 :  boutons d'action    |  touches a·s·d

   `display: contents` fait remonter les enfants de .hero-copy / .hero-visual
   / .hero-trust au rang de cases de la grille. Du coup :
     · rangée 1 → les deux cases s'étirent à la même hauteur (align-items
       stretch) : le bloc texte fait EXACTEMENT la hauteur de la carte ;
     · rangée 2 → les boutons et les touches partagent la même rangée.
   Aucune valeur calculée en dur, vrai à toute largeur.

   Les marges portées par les conteneurs disparaissent avec display:contents,
   elles sont donc reportées sur les enfants.
   ══════════════════════════════════════════════════════════════════════ */

/* Hors media query : le bloc texte reprend l'espacement que portait
   .hero-copy, maintenant qu'un conteneur s'intercale (vaut aussi sur mobile). */
.hero-copy__text {
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 2.2vw, 1.4rem);
}

@media (min-width: 1025px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 52%);
    grid-template-rows: auto auto;
    align-items: stretch;
    column-gap: clamp(1.5rem, 5vw, 4rem);
    row-gap: 1.4rem;
  }
  .hero-copy, .hero-visual, .hero-trust { display: contents; }

  .hero-copy__text {
    grid-column: 1; grid-row: 1;
    padding-inline: clamp(1rem, 6vw, 2.5rem);
    justify-content: flex-start;
  }
  .hero-actions {
    grid-column: 1; grid-row: 2;
    margin: 0;
    padding: 0 clamp(1rem, 6vw, 2.5rem);
    align-items: center;
    flex-wrap: nowrap;          /* les deux boutons restent côte à côte */
  }
  /* Rembourrage réduit pour que les deux boutons tiennent sur une ligne
     malgré la colonne gauche rétrécie par la carte élargie. */
  .hero-actions .btn {
    white-space: nowrap;
    padding-inline: clamp(1rem, 2.2vw, 1.6rem);
  }

  .hero-trust-card {
    grid-column: 2; grid-row: 1;
    margin: 0 clamp(1.5rem, 4vw, 3.5rem) 0 0;
    max-width: none;
    justify-content: center;
  }
  /* Photo en proportion de la carte (et non en pixels) : même équilibre à
     toute largeur. Hauteur déduite du ratio d'origine 1024×998, sans recadrage. */
  .hero-trust-photo {
    width: 66%;
    height: auto;
    max-width: 100%;
    margin-inline: auto;
  }
  /* Le SVG reçoit exactement la même boîte que la carte (même marge droite,
     width:100%) ; son viewBox le centre dedans sans le déformer, grâce au
     preserveAspectRatio par défaut. Les touches sont donc centrées sous la
     carte par construction, pas par réglage. */
  .asd-keys--hero {
    grid-column: 2; grid-row: 2;
    margin: 0 clamp(1.5rem, 4vw, 3.5rem) 0 0;
    justify-self: stretch;
    align-self: center;
    width: 100%;
  }
}

/* Desktop étroit (1025–1279 px) : la colonne gauche n'a pas la place de tenir
   les deux boutons côte à côte avec les marges pleines. On resserre la
   colonne droite et les rembourrages plutôt que de laisser les boutons
   passer à la ligne — la règle « tout sur une ligne » prime. */
@media (min-width: 1025px) and (max-width: 1279px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 42%); }
  .hero-copy__text, .hero-actions { padding-inline: 1rem; }
  .hero-actions .btn { padding-inline: 1rem; }
}

/* ── Trust card du hero : nom posé sur la photo (comme sur « À propos ») ──
   La photo est enveloppée dans un cadre positionné ; la plaque du nom s'y
   superpose, centrée horizontalement en bas. Coins carrés, comme le reste. */
.hero-trust-photo-frame {
  position: relative;
  width: 100%;
  margin-inline: auto;
  margin-bottom: 1rem;       /* respiration avant la ligne de rôles */
  line-height: 0;            /* pas d'espace fantôme sous l'image */
}
.hero-trust-nameplate {
  position: absolute;
  bottom: 0.7rem;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  max-width: calc(100% - 1.5rem);
  padding: 0.5rem 0.9rem;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.hero-trust-nameplate h4,
.hero-trust-nameplate .hero-trust-name {
  margin: 0;
  max-width: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  line-height: 1.2;
  color: var(--white);
  white-space: nowrap;
  text-align: center;
}

@media (min-width: 1025px) {
  /* Photo agrandie : c'est le cadre qui porte la proportion, l'image le
     remplit. Ratio d'origine 1024×998 préservé, aucun recadrage. */
  .hero-trust-photo-frame { width: 82%; }
  .hero-trust-photo { width: 100%; margin-inline: 0; }
}

/* ── Hero desktop : remplir le vide sous le titre ──
   Le bloc texte s'étire à la hauteur de la trust card, ce qui laissait du
   vide en bas — 69 px en français, mais 210 px en anglais, car le titre
   anglais tient sur 5 lignes contre 7 en français.
   On agrandit donc le sous-titre dans les deux langues ET le titre anglais,
   pour que le hero ait la même allure d'une langue à l'autre.
   `space-between` absorbe le reliquat aux largeurs où le compte ne tombe
   pas juste, au lieu de le laisser s'accumuler en bas. */
@media (min-width: 1025px) {
  .hero-copy__text { justify-content: space-between; }
  .hero-subtitle {
    font-size: clamp(1.15rem, 0.35rem + 1.22vw, 1.33rem);
    max-width: none;          /* la colonne borne déjà la longueur de ligne */
  }
  html[lang="en"] .hero-title {
    font-size: clamp(1.85rem, 1.1rem + 4.4vw, 4.25rem);
  }
  /* Le texte anglais est plus court : on resserre sa mesure pour qu'il occupe
     autant de lignes que le français. 416 px ≈ 50 caractères, une longueur de
     ligne confortable. Sans ça il reste 82 px de vide au lieu de 8. */
  html[lang="en"] .hero-subtitle { max-width: 26rem; }
}

/* ── Avertissement anti-usurpation dans le bloc « Modes de paiement » ──
   Placé au moment où l'argent bouge : c'est le seul instant où le visiteur
   lit vraiment ce genre de mise en garde. Ambre plutôt que rouge : on
   alerte sans faire fuir. */
.payment-warn {
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  background: #fff8ec;
  border-left: 3px solid var(--accent);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--gray-800);
}
.payment-warn a { color: var(--green-dark); font-weight: 700; }
.payment-warn__link {
  display: inline-block;
  margin-top: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--green);
  text-decoration: underline;
}
.payment-warn__link:hover { color: var(--green-dark); }


/* ══════════════════════════════════════════════════════════════════════
   PILE DE BOUTONS FLOTTANTS — WhatsApp · Sécurité · Haut de page
   Placé en fin de feuille : gagne sur toutes les règles précédentes.

   Les trois boutons partagent désormais les MÊMES variables de taille et
   d'écart. Auparavant WhatsApp rendait à 30 px et « haut de page » à 32 px,
   ce qui décalait la pile. Coins carrés pour tous les trois, conformément
   au reste du site.

   La sécurité est en 2e position parce qu'elle est TOUJOURS visible :
   « haut de page » n'apparaît qu'après défilement, le mettre au milieu
   laisserait un trou dans la pile au chargement.
   ══════════════════════════════════════════════════════════════════════ */
:root { --sf-size: 32px; --sf-gap: 6px; --sf-edge: 10px; }
@media (max-width: 600px) { :root { --sf-size: 30px; --sf-edge: 8px; } }

.wa-float, .sec-float, #back-to-top {
  width: var(--sf-size);
  height: var(--sf-size);
  right: var(--sf-edge);
  border-radius: 0;
}
.wa-float    { bottom: calc(var(--sf-edge) + env(safe-area-inset-bottom, 0px)); }
.sec-float   { bottom: calc(var(--sf-edge) + 1 * (var(--sf-size) + var(--sf-gap)) + env(safe-area-inset-bottom, 0px)); }
#back-to-top { bottom: calc(var(--sf-edge) + 2 * (var(--sf-size) + var(--sf-gap)) + env(safe-area-inset-bottom, 0px)); }

.sec-float {
  position: fixed;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #3a2600;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(245, 166, 35, 0.4);
  transition: var(--transition);
}
.sec-float:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(245, 166, 35, 0.5); }
.sec-float svg { width: 17px; height: 17px; fill: none; stroke: currentColor; flex-shrink: 0; }

/* Le pied de page réserve la hauteur des trois boutons */
body:has(.wa-float) > footer {
  padding-bottom: calc(
    var(--sf-edge) + 3 * (var(--sf-size) + var(--sf-gap)) + 0.5rem +
      env(safe-area-inset-bottom, 0px)
  );
}

/* ── Halo d'attention sur le seul bouton « Sécurité » ──
   Un anneau ambre se propage puis s'efface, une fois toutes les 4,5 s. Choix
   d'un halo lent plutôt qu'un clignotement : un clignotement rapide fatigue,
   et entre 2 et 55 Hz il présente un risque pour les personnes photosensibles.
   Ici, une pulsation espacée attire l'œil sans agresser.
   L'anneau vit dans un ::after : il ne touche ni la taille du bouton, ni son
   ombre portée, ni la pile des trois flottants. */
@media (prefers-reduced-motion: no-preference) {
  .sec-float { position: fixed; }          /* rappel : ancre le ::after */
  .sec-float::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    animation: secPulse 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
  @keyframes secPulse {
    0%   { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.75); }
    18%  { box-shadow: 0 0 0 13px rgba(245, 166, 35, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0); }
  }
  /* au survol et au focus clavier, on cesse : l'attention est déjà captée */
  .sec-float:hover::after,
  .sec-float:focus-visible::after { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   SYSTÈME DOUBLE — équivalent d'une config Tailwind, en variables CSS.
   (Le site n'utilise pas Tailwind : tout passe par des tokens `:root`.)

   Deux univers, activés par la classe de <body> :
     · body.page-design, .page-portfolio → univers CRÉATIF
     · les autres (cours, examens, exercices) → univers LANGUES

   Choix assumé : DEUX familles ajoutées, pas quatre. Chaque famille coûte
   du temps de chargement, et l'audience est majoritairement sur mobile au
   Togo. Plus Jakarta Sans, déjà chargée, sert de second membre aux deux
   paires — donc coût réel : +1 police par univers.
   Satoshi (Fontshare, hors CSP `font-src`) est remplacé par Plus Jakarta
   Sans : même classe géométrique-humaniste, déjà présente, zéro octet de plus.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* — familles — */
  --font-langues-titre: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-langues-corps: 'Inter', 'Source Sans 3', system-ui, sans-serif;
  --font-creatif-titre: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-creatif-corps: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* — traits : micro-bordures nettes, plus d'ombres diffuses — */
  --trait-fin: 1px solid var(--gray-200);
  --trait-fort: 1px solid var(--gray-800);
  --trait-accent: 2px solid var(--accent);

  /* — ombre portée décalée, géométrique (remplace les shadow-lg floues) — */
  --ombre-decalee: 6px 6px 0 var(--green-deep);
  --ombre-decalee-accent: 6px 6px 0 var(--accent);

  /* — rythme éditorial : respiration élargie — */
  --air-sm: clamp(1.5rem, 3vw, 2.5rem);
  --air-md: clamp(2.5rem, 6vw, 5rem);
  --air-lg: clamp(4rem, 10vw, 8.5rem);
}


/* ══════════════════════════════════════════════════════════════════════
   FINITION VISUELLE — sans asymétrie
   Les mises en page restent celles d'origine : rien n'est décalé ni
   recomposé. On agit uniquement sur la typographie, les traits, les
   ombres et la respiration.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Univers créatif : titres en Space Grotesk ──
   Porté par la classe de <body>, donc strictement limité à ces deux pages. */
.page-design h1, .page-design h2, .page-design h3,
.page-portfolio h1, .page-portfolio h2, .page-portfolio h3 {
  font-family: var(--font-creatif-titre);
  letter-spacing: -0.02em;
}

/* ── 2. Traits nets à la place des ombres diffuses ──
   Une carte se détache par sa bordure, pas par un halo flou : c'est plus
   franc à l'écran et ça supprime le rendu « gabarit ». */
.service-card, .exp-card, .about-stat-card, .grev-card, .testimonial-card,
.service-package-card, .booking-package-card, .cours-track-card,
.service-delivery-card, .mode-price-tile, .portfolio-item,
.catalogue-service, .sitemap-block, .process-step, .contact-form-card,
.testimonial-form-card, .hero-trust-card {
  box-shadow: none;
  border: var(--trait-fin);
}
/* Au survol, le trait se renforce — pas d'ombre qui gonfle. */
.service-card:hover, .exp-card:hover, .grev-card:hover,
.portfolio-item:hover, .catalogue-service:hover, .process-step:hover {
  border-color: var(--green);
  box-shadow: none;
}

/* ── 3. Ombre portée décalée sur les appels à l'action principaux ──
   Géométrique et franche ; au survol le bouton se déplace dedans au lieu
   de léviter. Réservé aux CTA : appliqué partout, ce serait du bruit. */
.hero-actions .btn-accent,
.design-portfolio-band__inner .btn,
.portfolio-cta .btn-primary,
.catalogue-footer-cta .btn-primary {
  box-shadow: var(--ombre-decalee-accent);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.hero-actions .btn-accent:hover,
.design-portfolio-band__inner .btn:hover,
.portfolio-cta .btn-primary:hover,
.catalogue-footer-cta .btn-primary:hover {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--accent);
}


/* ============================================================
   ICONES SVG  —  remplacement des emoji decoratifs
   Trait 1.5px, monochrome, herite de currentColor.
   Coherent avec les bordures fines du reste de l'interface.
   ============================================================ */
.services-table__icon,
.catalogue-service__icon,
.exp-icon,
.contact-link-icon { color: var(--green); }

.services-table__icon,
.catalogue-service__icon,
.exp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
.catalogue-service__icon, .exp-icon { justify-content: flex-start; }

.services-table__icon svg   { width: 20px; height: 20px; }
.catalogue-service__icon svg{ width: 22px; height: 22px; }
.exp-icon svg               { width: 24px; height: 24px; }
.contact-link-icon svg      { width: 20px; height: 20px; }

.contact-link-icon.green { color: var(--green); }
.contact-link-icon.wa    { color: #128c7e; }
.contact-link-icon.li    { color: #0a66c2; }

@media (max-width: 600px) {
  .exp-icon svg { width: 20px; height: 20px; }
}

/* --- icones inline dans les libelles, boutons et titres --------------- */
.ic { flex: 0 0 auto; }
.btn > .ic { width: 1.1em; height: 1.1em; }
.ic--accent { color: var(--accent); }

.subsection-title-short,
.subsection-title-full,
.catalogue-group-title { display: inline-flex; align-items: center; gap: 0.45rem; }
.catalogue-group-title { display: flex; }
.subsection-title-short > .ic,
.subsection-title-full > .ic { width: 1.05em; height: 1.05em; }
.catalogue-group-title > .ic { width: 0.85em; height: 0.85em; color: var(--green); }
.catalogue-group-title--design > .ic { color: var(--accent); }

.footer-social a > .ic { width: 18px; height: 18px; }
.service-page-icon { display: block; color: var(--green); }
.service-page-icon > .ic { width: 40px; height: 40px; }
.payment-warn > .ic { width: 1.05em; height: 1.05em; vertical-align: -0.15em; margin-right: 0.35em; color: var(--accent); }

/* --- titre des pages services : place au titre, confort au chapo -----------
   L'en-tete etait plafonnee a 672px pour la lisibilite du paragraphe, ce qui
   forcait le H1 a passer sur deux lignes. On rend la largeur au titre et on
   reporte la contrainte sur le texte courant, qui seul en a besoin. */
.service-page-header { max-width: none; }
.service-page-header > p,
.service-page-header .service-page-intro,
.service-page-header .service-page-back { max-width: 672px; }

/* ══════════════════════════════════════════════════════════════════════════
   CATALOGUE — SÉLECTEUR DE SERVICES (maquette validée le 01/09/2026)
   Références : design 1/2 pour la composition, TyrSight pour les capitales,
   huts.com + phamilypharma pour le mouvement.
   Le fond bascule selon la famille du service survolé : vert de marque pour
   le design, blanc pour les langues. Aucun contenu modifié.
   ══════════════════════════════════════════════════════════════════════════ */

body.page-catalogue {
  --cat-scene:   #ffffff;
  --cat-panneau: #ffffff;
  --cat-texte:   var(--green-deep);
  --cat-second:  #4d5c54;
  --cat-puce:    #f4f3ef;
  --cat-bande:   var(--green-dark);
  --cat-filet:   #7d8a82;            /* 3,6:1 sur blanc : sépare l'image du panneau */
  --cat-courbe:  cubic-bezier(.23, 1, .32, 1);
  --cat-duree:   .55s;

  background: var(--cat-scene);
  color: var(--cat-texte);
  transition: background var(--cat-duree) var(--cat-courbe);
}
/* Famille créative : l'univers passe au vert de marque. */
body.page-catalogue.cat-design {
  --cat-scene:   #0d280b;
  --cat-panneau: var(--green-deep);
  --cat-texte:   #f2f0eb;
  --cat-second:  #a9c4a6;
  --cat-puce:    var(--green-dark);
  --cat-filet:   #6f9a6b;            /* 3,2:1 sur le vert du panneau */
}

/* ── Titres en Anton, capitales condensées ──────────────────────────────── */
body.page-catalogue h1,
body.page-catalogue .catalogue-group-title,
body.page-catalogue .subsection-title-short,
body.page-catalogue .subsection-title-full {
  font-family: 'Anton', var(--font-display), sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: .94;
  color: var(--cat-texte);
}
body.page-catalogue h1 { font-size: clamp(2.6rem, 6.4vw, 4.4rem); }
body.page-catalogue .catalogue-group-title {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  border-bottom: 1px solid var(--cat-filet);
  padding-bottom: .6rem;
}
body.page-catalogue { font-variant-numeric: tabular-nums; }

/* ── Grille : rail à gauche, service à droite ───────────────────────────── */
body.page-catalogue .catalogue-group__list {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  /* La liste EST le panneau de design 1 : fond, rayon, respiration. */
  background: var(--cat-panneau);
  color: var(--cat-texte);
  border-radius: 24px;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  padding-left: clamp(2.5rem, 4vw, 3.5rem);
  transition: background var(--cat-duree) var(--cat-courbe),
              color var(--cat-duree) var(--cat-courbe);
}

/* ── Rail : pastilles empilées, chevauchantes ───────────────────────────── */
body.page-catalogue .cat-rail {
  /* Ligne ET colonne explicites : laisser la ligne au placement automatique
     laissait Edge renvoyer le service en 2e ligne — rail seul en haut, contenu
     rejete en bas. Chrome placait correctement, d'ou un bug invisible chez moi. */
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 104px;
}
body.page-catalogue .catalogue-group__list .catalogue-service.is-active {
  grid-column: 2;
  grid-row: 1;
}
body.page-catalogue .cat-rail__btn {
  position: relative;
  width: 46px; height: 46px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border: none; border-radius: 999px;
  background: var(--cat-puce);
  box-shadow: 0 0 0 3px var(--cat-panneau);
  cursor: pointer;
  transition: background var(--cat-duree) var(--cat-courbe),
              color var(--cat-duree) var(--cat-courbe),
              transform var(--cat-duree) var(--cat-courbe);
}
/* Chaque pastille mord sur la précédente : la colonne raccourcit d'un tiers.
   Le recouvrement reste modere (9px sur 46) pour que le rythme visuel soit
   regulier : au-dela, la derniere pastille — seule a n'etre couverte par
   personne — paraissait plus grosse et decalee que toutes les autres. */
body.page-catalogue .cat-rail__btn + .cat-rail__btn { margin-top: -9px; }
/* Ordre de peinture explicite, pour ne pas dependre de l'ordre du DOM. */
body.page-catalogue .cat-rail__btn { z-index: 1; }
body.page-catalogue .cat-rail__btn:nth-child(2)  { z-index: 2; }
body.page-catalogue .cat-rail__btn:nth-child(3)  { z-index: 3; }
body.page-catalogue .cat-rail__btn:nth-child(4)  { z-index: 4; }
body.page-catalogue .cat-rail__btn:nth-child(5)  { z-index: 5; }
body.page-catalogue .cat-rail__btn:nth-child(6)  { z-index: 6; }
body.page-catalogue .cat-rail__btn:nth-child(7)  { z-index: 7; }
body.page-catalogue .cat-rail__btn:nth-child(8)  { z-index: 8; }
body.page-catalogue .cat-rail__btn:nth-child(9)  { z-index: 9; }
body.page-catalogue .cat-rail__btn:nth-child(10) { z-index: 10; }
body.page-catalogue .cat-rail__btn:nth-child(11) { z-index: 11; }
body.page-catalogue .cat-rail__btn:nth-child(12) { z-index: 12; }
body.page-catalogue .cat-rail__btn:nth-child(13) { z-index: 13; }
body.page-catalogue .cat-rail__btn:nth-child(14) { z-index: 14; }
body.page-catalogue .cat-rail__btn svg { width: 20px; height: 20px; }
body.page-catalogue .cat-rail__btn:hover,
body.page-catalogue .cat-rail__btn:focus-visible { z-index: 50; transform: scale(1.08); }
body.page-catalogue .cat-rail__btn.is-active { z-index: 40; transform: scale(1.18); }

/* La couleur dit à quelle famille appartient le service. */
body.page-catalogue .cat-rail__btn[data-cat="langues"] { color: var(--green); }
body.page-catalogue .cat-rail__btn[data-cat="design"]  { color: var(--accent-dark); }
body.page-catalogue.cat-design .cat-rail__btn[data-cat="langues"] { color: #7fc47a; }
body.page-catalogue.cat-design .cat-rail__btn[data-cat="design"]  { color: var(--accent); }
body.page-catalogue .cat-rail__btn.is-active[data-cat="langues"] { background: var(--green); color: #fff; }
body.page-catalogue .cat-rail__btn.is-active[data-cat="design"]  { background: var(--accent); color: #3a2600; }
body.page-catalogue .cat-rail__btn:focus-visible {
  outline-style: solid; outline-width: 2px;
  outline-color: var(--accent); outline-offset: 3px;
}
body.page-catalogue .cat-rail__nom { display: none; }

/* ── Le service affiché ─────────────────────────────────────────────────── */
body.page-catalogue .catalogue-group__list .catalogue-service:not(.is-active) { display: none; }
body.page-catalogue .catalogue-service {
  background: transparent; border: none; box-shadow: none;
  border-radius: 0; transform: none;
}
body.page-catalogue .catalogue-service:hover { transform: none; }
body.page-catalogue .catalogue-service.is-active .catalogue-service__row {
  /* Le visuel entre depuis translateX(64px) : sans ce rognage il sort du cadre
     pendant l'animation et fait apparaitre une barre horizontale sur ecran
     etroit. `clip` et non `hidden` : pas de conteneur de defilement cree. */
  overflow-x: clip;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

body.page-catalogue .catalogue-service__info {
  background: transparent;
  color: var(--cat-texte);
  padding: 0;
  display: flex; flex-direction: column; gap: .8rem;
  justify-content: center;
}
body.page-catalogue .catalogue-service__info h3 {
  font-family: 'Anton', var(--font-display), sans-serif;
  font-weight: 400; text-transform: uppercase;
  letter-spacing: -.005em; line-height: .93;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  color: var(--cat-texte); margin: 0;
  text-wrap: balance;
}
body.page-catalogue .catalogue-service__info p {
  color: var(--cat-second);
  font-size: var(--text-md); line-height: 1.62;
  max-width: 42ch; margin: 0;
}
body.page-catalogue .catalogue-service__category {
  display: inline-block; width: auto; align-self: flex-start;
  background: transparent; border: none; border-radius: 0; padding: 0;
  color: var(--accent);
  text-transform: uppercase; letter-spacing: .13em;
  font-size: var(--text-xs); font-weight: 600;
}
body.page-catalogue .catalogue-service__icon { display: none; }

body.page-catalogue .catalogue-service__info .btn-primary {
  align-self: flex-start; margin-top: .3rem;
  border-radius: 999px;
  background: var(--green); color: #fff; border: none;
  font-weight: 600; padding: .8rem 1.6rem;
  transition: background var(--cat-duree) var(--cat-courbe),
              transform var(--cat-duree) var(--cat-courbe);
}
body.page-catalogue.cat-design .catalogue-service__info .btn-primary {
  background: #f2f0eb; color: var(--green-deep);
}
body.page-catalogue .catalogue-service__info .btn-primary:hover {
  transform: translateX(4px); box-shadow: none;
}

/* ── Le visuel : cadre carré, les images sources sont en 1:1 ────────────── */
body.page-catalogue .catalogue-gallery {
  order: 0;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--cat-filet);
  border-radius: 14px;
  background: var(--cat-puce);
  overflow: hidden;
  transform-origin: 100% 50%;
}
body.page-catalogue .catalogue-gallery .catalogue-photo,
body.page-catalogue .catalogue-gallery img {
  width: 100%; height: 100%;
  object-fit: contain;          /* recadrer couperait 38 % de ces visuels carrés */
  display: block;
}

/* ── Mouvement : entrée par la droite, en rotation ──────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  body.page-catalogue .catalogue-service.is-active .catalogue-gallery {
    /* Sans remplissage : si l'animation ne démarre pas, le visuel reste
       à sa place au lieu de rester décalé hors cadre. */
    animation: catEntre .62s var(--cat-courbe);
  }
  body.page-catalogue .catalogue-service.is-active .catalogue-service__info > * {
    animation: catMonte .5s var(--cat-courbe);
  }
  @keyframes catEntre {
    from { opacity: 0; transform: translateX(64px) rotate(3.5deg) scale(.965); }
    to   { opacity: 1; transform: translateX(0) rotate(0) scale(1); }
  }
  @keyframes catMonte {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

body.page-catalogue a:focus-visible,
body.page-catalogue button:focus-visible {
  outline-style: solid; outline-width: 2px;
  outline-color: var(--accent); outline-offset: 2px;
}

@media (max-width: 900px) {
  /* minmax(0,1fr) et min-width:0 : sans eux la colonne prend la largeur du
     rail (527px) au lieu de le laisser defiler, et la page deborde. */
  body.page-catalogue .catalogue-group__list { grid-template-columns: minmax(0, 1fr); }
  /* en pile : chacun sa ligne, une seule colonne */
  body.page-catalogue .cat-rail,
  body.page-catalogue .catalogue-group__list .catalogue-service.is-active {
    grid-column: 1; grid-row: auto;
  }
  body.page-catalogue .cat-rail {
    flex-direction: row; position: static;
    min-width: 0;
    overflow-x: auto; padding: 4px 0 6px;
  }
  body.page-catalogue .cat-rail__btn + .cat-rail__btn { margin-top: 0; margin-left: -9px; }
  body.page-catalogue .cat-rail__btn.is-active { transform: scale(1.08); }
  body.page-catalogue .catalogue-service.is-active .catalogue-service__row { grid-template-columns: 1fr; }
  body.page-catalogue .catalogue-gallery { order: -1; }
}

/* ── Un seul panneau : filtres et titres de groupe masqués ─────────────────
   Le sélecteur remplace le filtrage : le rail donne un accès direct aux 14
   services. Le balisage et les clés de traduction restent en place — rien
   n'est supprimé, seul l'affichage change. */
body.cat-rail-actif .catalogue-page .stab,
body.cat-rail-actif .catalogue-audience-tabs,
body.cat-rail-actif .catalogue-group-title,
body.cat-rail-actif .catalogue-lang-matrix-head,
body.cat-rail-actif .services-subsection-title,
body.cat-rail-actif .catalogue-group__list:not([data-rail-monte]) {
  display: none;
}
body.cat-rail-actif .catalogue-group { gap: 0; }


/* ══════════════════════════════════════════════════════════════════════════
   PORTFOLIO — composition « STAY AHEAD » de TyrSight
   En-tête centrée, puis trois visuels en ligne : celui du milieu domine, les
   latéraux sont décalés vers le bas. Un mot fantôme court derrière eux.
   Mouvement : courbe de huts.com. Aucun contenu modifié.
   ══════════════════════════════════════════════════════════════════════════ */

body.page-portfolio {
  --pf-scene:  #ffffff;
  --pf-carte:  #ffffff;
  --pf-encre:  var(--green-deep);
  --pf-pale:   #b9c4b6;          /* la seconde teinte du titre de la référence */
  --pf-second: #4d5c54;
  --pf-filet:  #7d8a82;
  --pf-courbe: cubic-bezier(.23, 1, .32, 1);
  --pf-duree:  .6s;
  background: var(--pf-scene);
}

/* ── En-tête centrée ────────────────────────────────────────────────────── */
body.page-portfolio .portfolio-header {
  text-align: center;
  max-width: 780px;
  margin-inline: auto;
}
body.page-portfolio .portfolio-header h1 {
  font-family: 'Anton', var(--font-display), sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: .92;
  font-size: clamp(2.6rem, 7vw, 5rem);
  color: var(--pf-encre);
  margin: .6rem 0 1rem;
  text-wrap: balance;
}
body.page-portfolio .portfolio-header p {
  color: var(--pf-second);
  max-width: 56ch;
  margin-inline: auto;
}
body.page-portfolio .portfolio-filter-bar { justify-content: center; }
body.page-portfolio .stab {
  border-radius: 999px;
  border: 1px solid var(--pf-filet);
  background: transparent;
  color: var(--pf-encre);
  padding: .45rem 1.15rem;
  transition: background var(--pf-duree) var(--pf-courbe),
              border-color var(--pf-duree) var(--pf-courbe);
}
body.page-portfolio .stab.active {
  background: var(--accent); border-color: var(--accent);
  color: #3a2600; font-weight: 600;
}

/* ── La rangée de visuels ────────────────────────────────────────────────
   Le mot fantôme est posé derrière la grille, comme « EXPERIENCE » dans la
   référence. Il reprend la marque : aucun texte nouveau n'est introduit. */
body.page-portfolio .portfolio-grid {
  position: relative;
  /* Flux en colonne : toutes les realisations tiennent sur une seule ligne,
     et une realisation ajoutee prend sa place sans toucher au CSS. */
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(.6rem, 1.4vw, 1.2rem);
  align-items: start;
  padding-bottom: clamp(1rem, 3vw, 2rem);
}
/* Pas de filigrane sur la page : retire a la demande du client. */
body.page-portfolio .portfolio-item { position: relative; z-index: 1; }

/* Le visuel central domine ; ses voisins descendent. */
/* Alternance bas / HAUT / bas / HAUT / bas. La domination suit le TYPE et non
   le rang : une video ajoutee sera mise en avant sans retoucher le CSS. */
body.page-portfolio .portfolio-item[data-type="video"] { margin-top: 0; }
body.page-portfolio .portfolio-item:not([data-type="video"]) { margin-top: clamp(1.75rem, 4.5vw, 4rem); }
body.page-portfolio .portfolio-item[data-type="video"] .portfolio-media { aspect-ratio: 3 / 4; }
body.page-portfolio .portfolio-item:not([data-type="video"]) .portfolio-media { aspect-ratio: 4 / 5; }

body.page-portfolio .portfolio-item {
  background: var(--pf-carte);
  border: 1px solid var(--pf-filet);
  border-radius: 14px;
  box-shadow: none;               /* filet, jamais d'ombre floue */
  transition: transform var(--pf-duree) var(--pf-courbe),
              border-color var(--pf-duree) var(--pf-courbe);
}
body.page-portfolio .portfolio-item:hover {
  box-shadow: none;
  transform: translateY(-5px);
  border-color: var(--green);
}
body.page-portfolio .portfolio-media { background: #f4f3ef; }
body.page-portfolio .portfolio-media img,
body.page-portfolio .portfolio-media video { width: 100%; height: 100%; object-fit: cover; }

body.page-portfolio .portfolio-caption h3 {
  font-family: var(--font-display), sans-serif;
  color: var(--pf-encre);
}
body.page-portfolio .portfolio-caption p { color: var(--pf-second); }
body.page-portfolio .portfolio-tag {
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: var(--text-xs);
  font-weight: 600;
}

body.page-portfolio a:focus-visible,
body.page-portfolio button:focus-visible {
  outline-style: solid; outline-width: 2px;
  outline-color: var(--accent); outline-offset: 2px;
}

@media (max-width: 1100px) {
  /* Sous 1100px, cinq colonnes deviennent illisibles : on repasse en grille. */
  body.page-portfolio .portfolio-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.page-portfolio .portfolio-item:nth-child(n) { margin-top: 0; }
  body.page-portfolio .portfolio-item:nth-child(even) { margin-top: 2rem; }
  body.page-portfolio .portfolio-item .portfolio-media { aspect-ratio: 4 / 5; }
}
@media (max-width: 600px) {
  body.page-portfolio .portfolio-grid { grid-auto-flow: row; grid-template-columns: 1fr; }
  body.page-portfolio .portfolio-item:nth-child(n) { margin-top: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ACCUEIL — « Ce pour quoi on nous appelle »
   Triptyque : IELTS / TOEFL, cours de langue (dominant, au centre), livestreaming.
   Meme langage que le catalogue et le portfolio. La forme encode la famille :
   angles vifs pour les langues, arrondis pour le creatif.
   ══════════════════════════════════════════════════════════════════════════ */
.phares { background: #ffffff; }
/* Même échelle que .section-header : l'en-tête des phares portait
   clamp(2rem, 5vw, 3.25rem) — 52 px contre 38 px partout ailleurs — et son h2
   ajoutait .6rem sous le badge, d'où 26 px au lieu de 16. Deux rythmes
   coexistaient sur la même page ; il n'en reste qu'un. */
.phares__entete { text-align: center; max-width: 760px; margin: 0 auto clamp(1.6rem, 3vw, 3.5rem); }
.phares__entete h2 {
  font-family: 'Anton', var(--font-display), sans-serif;
  font-weight: 400; text-transform: uppercase;
  letter-spacing: -.01em; line-height: .92;
  /* AUCUNE taille declaree ici : le titre prend celle de `h2` — la meme que
     .section-header h2 — au lieu des 5,6vw d avant, qui le portaient a 67,7px
     quand tous les autres faisaient 42,3px sur la meme page. La capitale
     condensee suffit a le distinguer ; elle n a pas besoin d une deuxieme
     echelle.
     Ne PAS remettre de font-size ici : cette regle est ecrite APRES les
     paliers etroits (@media 600px et 400px, plus haut), et a specificite
     egale la derniere gagne — le titre resterait a 27,5px sur telephone
     pendant que les trois autres descendraient a 19,9px. */
  color: var(--green-deep); margin: 0;
  text-wrap: balance;
}
.phares__grille {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.7rem, 1.6vw, 1.3rem); align-items: start;
}
.phare {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #7d8a82;
  box-shadow: none; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .55s cubic-bezier(.23,1,.32,1), border-color .55s cubic-bezier(.23,1,.32,1);
}
.phare:hover { transform: translateY(-5px); border-color: var(--green); box-shadow: none; }
.phare:focus-visible {
  outline-style: solid; outline-width: 2px;
  outline-color: var(--accent); outline-offset: 3px;
}
.phare--haut { margin-top: 0; }
.phare--bas  { margin-top: clamp(1.5rem, 4vw, 3.25rem); }
.phare--haut .phare__visuel { aspect-ratio: 3 / 4; }
.phare--bas  .phare__visuel { aspect-ratio: 4 / 5; }
.phare[data-cat='langues'] { border-radius: 0; }
.phare[data-cat='design']  { border-radius: 14px; }

.phare__visuel { background: #f4f3ef; border-bottom: 1px solid #7d8a82; display: block; }
.phare__visuel img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* --phare-gap : l ecart entre l etiquette de public et le titre est declare
   UNE fois, parce que deux regles s en servent — celle-ci et la compensation
   du volet sans etiquette, plus bas. Tant qu il etait ecrit deux fois (.55rem
   ici, .55cqw dans le bloc d echelle), la compensation tombait a cote et les
   volets finissaient a 5px l un de l autre. */
.phare__corps { padding: 1.1rem 1.2rem 1.35rem; display: flex; flex-direction: column;
                --phare-gap: .55rem; --phare-public-fs: var(--text-xs);
                gap: var(--phare-gap); flex: 1 1 auto; }
.phare__public {
  font-size: var(--phare-public-fs); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
  /* Interligne fixe : c est elle que la compensation reproduit. */
  line-height: 1.5;
}
.phare__corps h3 {
  font-family: 'Anton', var(--font-display), sans-serif;
  font-weight: 400; text-transform: uppercase;
  letter-spacing: -.005em; line-height: .95;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  margin: 0; color: var(--green-deep);
}
.phare__corps p { margin: 0; color: var(--gray-600); font-size: var(--text-sm); line-height: 1.58; }
.phare__lien { margin-top: auto; padding-top: .6rem; font-weight: 600; font-size: var(--text-sm); color: var(--green); }

@media (max-width: 860px) {
  .phares__grille { grid-template-columns: 1fr; }
  .phare--bas, .phare--haut { margin-top: 0; }
  .phare--haut .phare__visuel, .phare--bas .phare__visuel { aspect-ratio: 16 / 10; }
}

/* Un volet sans etiquette de public voyait son titre remonter et cassait
   l alignement avec les autres. On lui rend la hauteur de l etiquette. */
.phare:not(:has(.phare__public)) .phare__corps > h3 {
  margin-top: calc(var(--phare-public-fs) * 1.5 + var(--phare-gap));
}

/* Meme raison, autre cause : les trois descriptions ne font pas le meme
   nombre de lignes (3, 2 et 2), si bien que les deux volets BAS — qui
   partent pourtant du meme haut — finissaient a 29px l un de l autre, et
   que les trois « Voir le detail → » se retrouvaient a trois hauteurs
   differentes. La description reserve donc trois lignes : en dessous, le
   blanc est pris en compte ; au-dessus, le volet grandit normalement.
   Le decalage volontaire du volet du milieu, lui, est conserve. */
@media (min-width: 861px) {
  .phare p { min-height: calc(3 * 1.58em); }
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO — composition TyrSight, couleurs ASD
   Le hero de la référence est sombre : ici, vert de marque profond plutôt que
   noir. Titre condensé en capitales, bichromie crème / ambre, appel à l'action
   ambre. Le reste du site garde ses fonds blancs.
   ══════════════════════════════════════════════════════════════════════════ */
body.page-home #hero {
  --hero-fond:   #0d280b;
  --hero-panneau:#154313;
  --hero-craie:  #f2f0eb;
  --hero-second: #a9c4a6;
  --hero-filet:  #3f6c3c;          /* 3,1:1 sur le fond : sépare sans peser */
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(245,166,35,.13), transparent 58%),
    radial-gradient(90% 80% at 8% 88%, rgba(45,134,40,.28), transparent 62%),
    var(--hero-fond);
  color: var(--hero-craie);
}
/* Les pointilles de fond sont retires : les deux halos radiaux suffisent
   a donner de la profondeur, sans bruit. */
body.page-home #hero .hero-bg-pattern { display: none; }
body.page-home #hero .hero-circle-1,
body.page-home #hero .hero-circle-2 { opacity: .18; }

/* ── Le titre : capitales condensées, bichromie ──────────────────────────
   L'ambre remplace le rouge de la référence : c'est l'accent de la marque. */
body.page-home #hero .hero-title {
  font-family: 'Anton', var(--font-display), sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.012em;
  line-height: .9;
  color: var(--hero-craie);
  text-wrap: balance;
}
body.page-home #hero .hero-title span span { color: var(--accent); }
body.page-home #hero .hero-eyebrow { color: var(--accent); }
body.page-home #hero .hero-subtitle { color: var(--hero-second); }

/* ── Appels à l'action ──────────────────────────────────────────────────── */
body.page-home #hero .btn-accent {
  background: var(--accent);
  color: #3a2600;
  border: none;
}
body.page-home #hero .btn-accent:hover { background: #ffb943; }
body.page-home #hero .btn-outline {
  background: transparent;
  color: var(--hero-craie);
  border: 1px solid var(--hero-filet);
}
body.page-home #hero .btn-outline:hover {
  background: rgba(242,240,235,.08);
  border-color: var(--hero-craie);
  color: var(--hero-craie);
}
body.page-home #hero a:focus-visible,
body.page-home #hero button:focus-visible {
  outline-style: solid; outline-width: 2px;
  outline-color: var(--accent); outline-offset: 3px;
}

/* La barre de navigation est traitee plus bas, pour tout le site. */

/* Les capitales accentuees d Anton (MAITRISEZ, FRANCAIS, REUSSISSEZ) occupent
   0,906 fois la taille de police : mesure, 58px pour 64px. En dessous de 0,96
   d interligne, l accent touche la ligne du dessus. Seuil applique partout ou
   Anton compose des titres. */
body.page-home #hero .hero-title,
body.page-catalogue h1,
body.page-catalogue .catalogue-service__info h3,
body.page-portfolio .portfolio-header h1,
.phares__entete h2,
.phare__corps h3 { line-height: .96; }

/* ══════════════════════════════════════════════════════════════════════════
   BARRE DE NAVIGATION — composition TyrSight, couleurs ASD
   Barre sombre, entrées séparées par des filets, bloc d'action clair à droite.
   Le logo garde ses couleurs de marque : il est posé sur une plaque claire,
   parce que ses touches vertes tombent à 1,12:1 sur le vert foncé.
   ══════════════════════════════════════════════════════════════════════════ */
#navbar,
body.page-home #navbar:not(.scrolled) {
  --nav-fond:  #154313;
  --nav-craie: #f2f0eb;
  --nav-filet: #3f6c3c;
  background: var(--nav-fond);
  border-bottom: 1px solid var(--nav-filet);
  box-shadow: none;
}
#navbar.scrolled { background: #0d280b; }

/* Le logo sur sa plaque : couleurs de marque inchangées. */
#navbar .nav-logo {
  background: var(--nav-craie);
  padding: 5px 9px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
}

/* Entrées séparées par des filets, comme la barre segmentée de la référence. */
#navbar .nav-links { align-items: stretch; }
#navbar .nav-links > li { display: flex; align-items: center; }
#navbar .nav-links > li + li { border-left: 1px solid var(--nav-filet); }
#navbar .nav-links > li > a {
  color: var(--nav-craie);
  padding-inline: clamp(.6rem, 1.4vw, 1.1rem);
  transition: color .45s cubic-bezier(.23, 1, .32, 1);
}
#navbar .nav-links > li > a:hover,
#navbar .nav-links > li > a:focus-visible { color: var(--accent); }

/* Sélecteur de langue */
#navbar .lang-toggle { border-color: var(--nav-filet); background: transparent; }
#navbar .lang-toggle__btn { color: var(--nav-craie); }
#navbar .lang-toggle__btn.is-active { background: var(--nav-craie); color: var(--green-deep); }

/* Le bloc d'action tranche sur la barre, comme « CONTACT US » chez TyrSight. */
/* `.nav-cta` retire de cette liste : c est le CONTENEUR du selecteur de langue
   et du bouton. Lui donner un fond faisait deborder l ambre sur le FR/EN. */
#navbar .btn[data-open-service-book],
#navbar a[data-i18n="nav.cta"] {
  background: var(--nav-craie);
  color: var(--green-deep);
  border: none;
  border-radius: 0;
  font-weight: 700;
  transition: background .45s cubic-bezier(.23, 1, .32, 1);
}
#navbar .btn[data-open-service-book]:hover,
#navbar a[data-i18n="nav.cta"]:hover {
  background: var(--accent);
  color: #3a2600;
  transform: none;
  box-shadow: none;
}

#navbar a:focus-visible,
#navbar button:focus-visible {
  outline-style: solid; outline-width: 2px;
  outline-color: var(--accent); outline-offset: 2px;
}

/* Menu mobile : même univers sombre. */
#navbar .mobile-toggle span,
#navbar .mobile-toggle::before,
#navbar .mobile-toggle::after { background: var(--nav-craie); }

/* La regle historique #navbar.scrolled .nav-links a l emportait sur la mienne :
   deux classes contre une. On egalise plutot que de forcer avec !important. */
#navbar.scrolled .nav-links > li > a { color: var(--nav-craie); }
#navbar.scrolled .nav-links > li > a:hover,
#navbar.scrolled .nav-links > li > a:focus-visible {
  color: var(--accent);
  background: rgba(242, 240, 235, .08);
}
#navbar.scrolled .lang-toggle__btn { color: var(--nav-craie); }
#navbar.scrolled .lang-toggle__btn.is-active { background: var(--nav-craie); color: var(--green-deep); }

/* ── Nav : trois segments, comme le template ────────────────────────────
   Bloc logo clair (les touches de marque ne sont lisibles que sur clair),
   zone menu en vert plus clair, bloc d action ambre tranche a droite.
   Les trois blocs montent en pleine hauteur, sans arrondi. */
#navbar, #navbar.scrolled {
  --nav-fond:  #1f611d;
  --nav-craie: #f2f0eb;
  --nav-filet: #4c8449;
  background: var(--nav-fond);
  border-bottom: 1px solid var(--nav-filet);
}
#navbar .nav-inner { align-items: stretch; }

/* Bloc logo : pleine hauteur, colle au bord */
#navbar .nav-logo {
  background: var(--nav-craie);
  align-self: stretch;
  display: inline-flex; align-items: center;
  padding-inline: clamp(.7rem, 1.6vw, 1.15rem);
  margin-block: 0;
  border-radius: 0;
}

/* Zone menu */
#navbar.scrolled .nav-links > li > a,
#navbar .nav-links > li > a { color: var(--nav-craie); }
#navbar .nav-links > li + li { border-left: 1px solid var(--nav-filet); }
#navbar.scrolled .nav-links > li > a:hover,
#navbar .nav-links > li > a:hover { color: #3a2600; background: var(--accent); }

/* Bloc d action : ambre, pleine hauteur, tranche sur le vert */
/* .nav-cta est un CONTENEUR : il regroupe le selecteur de langue ET le bouton.
   Seul le bouton doit etre ambre, sinon le selecteur se retrouve dedans. */
#navbar .nav-cta {
  background: transparent;
  align-self: stretch;
  gap: 0;
}
#navbar .nav-cta > .lang-toggle {
  align-self: center;
  margin-right: clamp(.6rem, 1.6vw, 1.1rem);
  padding-right: clamp(.6rem, 1.6vw, 1.1rem);
  border-right: 1px solid var(--nav-filet);
  border-radius: 0;
  border-top: none; border-bottom: none; border-left: none;
}
#navbar a[data-i18n="nav.cta"] {
  background: var(--accent);
  color: #3a2600;
  align-self: stretch;
  display: inline-flex; align-items: center;
  border-radius: 0; border: none;
  padding-inline: clamp(1rem, 2.4vw, 1.9rem);
  font-weight: 700;
}
#navbar a[data-i18n="nav.cta"]:hover {
  background: var(--nav-craie); color: var(--green-deep);
  transform: none; box-shadow: none;
}

#navbar .lang-toggle { border-color: var(--nav-filet); }
#navbar.scrolled .lang-toggle__btn,
#navbar .lang-toggle__btn { color: var(--nav-craie); }
#navbar.scrolled .lang-toggle__btn.is-active,
#navbar .lang-toggle__btn.is-active { background: var(--nav-craie); color: var(--green-deep); }

/* ══════════════════════════════════════════════════════════════════════════
   NAV — les trois tons du template, transposes aux couleurs ASD
   noir -> vert du hero | gris -> vert plus clair | blanc -> ambre du bouton
   ══════════════════════════════════════════════════════════════════════════ */
#navbar, #navbar.scrolled {
  --nav-sombre: #0d280b;   /* le vert du hero, a la place du noir */
  --nav-fond:   #1f611d;   /* le vert plus clair, a la place du gris */
  --nav-craie:  #f2f0eb;
  --nav-filet:  transparent;
  background: var(--nav-fond);
  border-bottom: none;
}

/* Le logo repose directement sur le vert sombre, comme sur le noir du template. */
#navbar .nav-logo {
  background: var(--nav-sombre);
  align-self: stretch;
  display: inline-flex; align-items: center;
  padding-inline: clamp(.8rem, 1.8vw, 1.35rem);
  border-radius: 0;
}

/* Pas de filet entre les entrees du menu. */
#navbar .nav-links > li + li { border-left: none; }
#navbar .nav-links > li > a,
#navbar.scrolled .nav-links > li > a { color: var(--nav-craie); background: transparent; }
#navbar .nav-links > li > a:hover,
#navbar.scrolled .nav-links > li > a:hover { color: var(--accent); background: transparent; }

/* Le selecteur de langue reste detache du bouton, sans barre de separation. */
#navbar .nav-cta > .lang-toggle {
  border: none;
  margin-right: clamp(.7rem, 1.8vw, 1.3rem);
  padding-right: 0;
}

/* Bandeau defilant masque. */
#services-ticker { display: none; }

/* ── Nav : positions du template ─────────────────────────────────────────
   Les entrees suivent immediatement le bloc logo, a gauche. Le bloc d action
   est plaque contre le bord droit. Rien n est repousse au centre. */
/* Positions d origine conservees : le menu reste a sa place habituelle. */
#navbar .nav-cta { margin-left: auto; }

/* Le logo et les entrees gardent leur position d origine : le conteneur centre
   n est pas touche. Seuls les FONDS s ajustent, en pleine hauteur de barre —
   aucune marge en haut ni en bas. */
#navbar { padding-block: 0; }
#navbar .nav-inner { min-height: 3.6rem; align-items: stretch; }
#navbar .nav-logo,
#navbar a[data-i18n="nav.cta"] {
  align-self: stretch;
  margin-block: 0;
  padding-block: 0;
  display: inline-flex;
  align-items: center;
}

/* Le selecteur de langue ne prend jamais l ambre au survol : l ambre est
   reserve au bouton d action, pour qu il reste le seul point d appel. */
#navbar .lang-toggle__btn:hover,
#navbar.scrolled .lang-toggle__btn:hover {
  background: rgba(242, 240, 235, .14);
  color: var(--nav-craie);
}
#navbar .lang-toggle__btn.is-active:hover,
#navbar.scrolled .lang-toggle__btn.is-active:hover {
  background: var(--nav-craie);
  color: var(--green-deep);
}

/* Le <style> en ligne d index.html pose padding: .7rem 0 sur #navbar, a
   specificite egale a la mienne. On passe par body pour l emporter, plutot
   que d empiler un !important. */
body #navbar { padding-block: 0; }
body #navbar .nav-inner { min-height: 4.4rem; align-items: stretch; }
body #navbar .nav-logo,
body #navbar a[data-i18n="nav.cta"] {
  align-self: stretch; margin-block: 0; padding-block: 0;
  display: inline-flex; align-items: center;
}

/* Survol du selecteur de langue : neutre, jamais d ambre ni de vert pale.
   Les regles historiques (#navbar.scrolled .lang-toggle__btn:hover:not(.is-active))
   comptent quatre classes : on aligne la specificite au lieu de forcer. */
#navbar.scrolled .lang-toggle__btn:hover:not(.is-active),
#navbar .lang-toggle__btn:hover:not(.is-active) {
  background: rgba(242, 240, 235, .16);
  color: var(--nav-craie);
}
#navbar.scrolled .lang-toggle__btn.is-active:hover,
#navbar .lang-toggle__btn.is-active:hover {
  background: var(--nav-craie);
  color: var(--green-deep);
}

/* Padding du nav : la declaration concurrente utilise max()/env(), que les
   outils de diagnostic ne remontent pas. Apres avoir egalise puis augmente la
   specificite sans effet, on tranche ici — le fond des blocs doit toucher les
   bords haut et bas. */
#navbar { padding-top: 0 !important; padding-bottom: 0 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   NAV — reprise stricte du template (vue rapprochee)
   Barre pleine largeur, sans marge haute ni basse. Quatre segments colles :
   bloc logo sombre | menu sur le ton plus clair | selecteur | bloc d action.
   Tons : vert du hero -> noir, vert clair -> gris, ambre -> blanc.
   ══════════════════════════════════════════════════════════════════════════ */
body #navbar,
body #navbar.scrolled {
  --nav-sombre: #0d280b;
  --nav-fond:   #1f611d;
  --nav-craie:  #f2f0eb;
  background: var(--nav-fond);
  border-bottom: none;
  box-shadow: none;
  padding: 0 !important;
}
/* La barre occupe toute la largeur : les blocs touchent les deux bords. */
body #navbar > .container {
  max-width: none;
  width: 100%;
  padding-inline: 0;
}
body #navbar .nav-inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 4.25rem;
  padding: 0;
}

/* ── Bloc logo : ton sombre, colle au bord gauche ────────────────────────── */
body #navbar .nav-logo {
  background: var(--nav-sombre);
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  padding: 0 clamp(1.1rem, 2.6vw, 2.1rem);
  margin: 0;
  border-radius: 0;
  flex: 0 0 auto;
}

/* ── Menu : juste apres le logo, aligne a gauche, petit et espace ────────── */
body #navbar .nav-links {
  margin: 0;
  padding: 0 clamp(.6rem, 1.6vw, 1.2rem);
  gap: clamp(.5rem, 1.8vw, 1.6rem);
  align-items: center;
  flex: 1 1 auto;
  justify-content: flex-start;
}
body #navbar .nav-links > li + li { border-left: none; }
body #navbar .nav-links > li > a,
body #navbar.scrolled .nav-links > li > a {
  color: var(--nav-craie);
  background: transparent;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .045em;
  padding: .4rem 0;
  border-radius: 0;
}
body #navbar .nav-links > li > a:hover,
body #navbar.scrolled .nav-links > li > a:hover {
  color: var(--accent);
  background: transparent;
}

/* ── Selecteur de langue : neutre, jamais d ambre ────────────────────────── */
body #navbar .nav-cta {
  margin-left: auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 0;
  background: transparent;
}
body #navbar .nav-cta > .lang-toggle {
  align-self: center;
  border: none;
  border-radius: 0;
  margin-right: clamp(.7rem, 1.8vw, 1.4rem);
}
body #navbar .lang-toggle__btn:hover:not(.is-active),
body #navbar.scrolled .lang-toggle__btn:hover:not(.is-active) {
  background: rgba(242, 240, 235, .16);
  color: var(--nav-craie);
}
body #navbar .lang-toggle__btn.is-active,
body #navbar.scrolled .lang-toggle__btn.is-active,
body #navbar .lang-toggle__btn.is-active:hover,
body #navbar.scrolled .lang-toggle__btn.is-active:hover {
  background: var(--nav-craie);
  color: var(--green-deep);
}

/* ── Bloc d action : ambre, colle au bord droit, texte centre ────────────── */
body #navbar a[data-i18n="nav.cta"] {
  background: var(--accent);
  color: #3a2600;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(1.2rem, 3vw, 2.4rem);
  margin: 0;
  border: none;
  border-radius: 0;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .045em;
  flex: 0 0 auto;
}
body #navbar a[data-i18n="nav.cta"]:hover {
  background: var(--nav-craie);
  color: var(--green-deep);
  transform: none;
  box-shadow: none;
}

/* Le bloc d action doit toucher le bord droit : on neutralise tout reliquat
   de marge ou de rembourrage sur son conteneur. */
body #navbar .nav-cta { margin-right: 0; padding-right: 0; }
body #navbar .nav-inner { padding-right: 0; margin-right: 0; }

/* Le conteneur du selecteur et du bouton n a jamais de fond, survol compris. */
body #navbar .nav-cta,
body #navbar .nav-cta:hover,
body #navbar .nav-cta:focus-within { background: transparent; }

/* ══════════════════════════════════════════════════════════════════════════
   SERVICES LINGUISTIQUES — mosaique de blocs contrastes (reference TyrSight)
   Trois lignes du tableau deviennent des blocs pleine surface : vert profond,
   ambre, blanc. Elles restent les MEMES elements — leurs boutons Detail et
   Reserver conservent leurs gestionnaires. Les autres lignes suivent dessous.
   ══════════════════════════════════════════════════════════════════════════ */
body.page-home #services .services-table {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.6rem, 1.4vw, 1rem);
  background: transparent;
  border: none;
}
/* Toute ligne non promue occupe la largeur entiere, sous la mosaique. */
body.page-home #services .services-table__row { grid-column: 1 / -1; }

body.page-home #services #service-ielts,
body.page-home #services #service-toeic,
body.page-home #services #service-cours {
  grid-column: auto;
  order: -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: none;
  min-height: clamp(200px, 24vw, 280px);
}
/* Les trois tons du template : sombre, accent, clair. */
body.page-home #services #service-ielts { background: #0d280b; }
body.page-home #services #service-toeic { background: var(--accent); }
body.page-home #services #service-cours { background: #ffffff; border: 1px solid #7d8a82; }

/* Le nom du service devient le titre du bloc. */
body.page-home #services #service-ielts .services-table__name,
body.page-home #services #service-toeic .services-table__name,
body.page-home #services #service-cours .services-table__name {
  font-family: 'Anton', var(--font-display), sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: .96;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
}
body.page-home #services #service-ielts .services-table__service,
body.page-home #services #service-toeic .services-table__service,
body.page-home #services #service-cours .services-table__service {
  display: flex; align-items: flex-start; gap: .6rem;
  margin-top: auto;
}
body.page-home #services #service-ielts .services-table__actions,
body.page-home #services #service-toeic .services-table__actions,
body.page-home #services #service-cours .services-table__actions { width: 100%; }
body.page-home #services #service-ielts .services-table__actions-inner,
body.page-home #services #service-toeic .services-table__actions-inner,
body.page-home #services #service-cours .services-table__actions-inner {
  justify-content: flex-start; flex-wrap: wrap; gap: .5rem;
}

/* Bloc sombre : texte clair, accent ambre. */
body.page-home #services #service-ielts .services-table__name { color: #f2f0eb; }
body.page-home #services #service-ielts .service-card__category { background: transparent; color: var(--accent); padding: 0; }
body.page-home #services #service-ielts .services-table__icon { color: var(--accent); }
body.page-home #services #service-ielts .btn-outline { color: #f2f0eb; border-color: #4c8449; background: transparent; }

/* Bloc ambre : texte brun fonce. */
body.page-home #services #service-toeic .services-table__name { color: #3a2600; }
body.page-home #services #service-toeic .service-card__category { background: transparent; color: #6b4400; padding: 0; }
body.page-home #services #service-toeic .services-table__icon { color: #3a2600; }
body.page-home #services #service-toeic .btn-outline { color: #3a2600; border-color: rgba(58,38,0,.4); background: transparent; }
body.page-home #services #service-toeic .btn-primary { background: #0d280b; color: #f2f0eb; }

/* Bloc clair : encre verte. */
body.page-home #services #service-cours .services-table__name { color: var(--green-deep); }
body.page-home #services #service-cours .service-card__category { background: transparent; color: var(--green); padding: 0; }
body.page-home #services #service-cours .services-table__icon { color: var(--green); }

@media (max-width: 860px) {
  body.page-home #services .services-table { grid-template-columns: 1fr; }
  body.page-home #services #service-ielts,
  body.page-home #services #service-toeic,
  body.page-home #services #service-cours { min-height: 0; }
}

/* Placement explicite : le placement automatique renvoyait chaque bloc a la
   ligne, a cause des lignes pleine largeur intercalees. */
body.page-home #services #service-ielts { grid-column: 1; grid-row: 1; }
body.page-home #services #service-toeic { grid-column: 2; grid-row: 1; }
body.page-home #services #service-cours { grid-column: 3; grid-row: 1; }
@media (max-width: 860px) {
  body.page-home #services #service-ielts,
  body.page-home #services #service-toeic,
  body.page-home #services #service-cours { grid-column: 1; grid-row: auto; }
}

/* Les lignes sont enfants de .services-table__body, pas de .services-table :
   c est donc lui qui doit porter la grille. */
body.page-home #services .services-table { display: block; }
body.page-home #services .services-table__body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.6rem, 1.4vw, 1rem);
}
body.page-home #services .services-table__body > .services-table__row { grid-column: 1 / -1; }
body.page-home #services .services-table__body > #service-ielts { grid-column: 1; grid-row: 1; }
body.page-home #services .services-table__body > #service-toeic { grid-column: 2; grid-row: 1; }
body.page-home #services .services-table__body > #service-cours { grid-column: 3; grid-row: 1; }
@media (max-width: 860px) {
  body.page-home #services .services-table__body { grid-template-columns: 1fr; }
  body.page-home #services .services-table__body > #service-ielts,
  body.page-home #services .services-table__body > #service-toeic,
  body.page-home #services .services-table__body > #service-cours { grid-column: 1; grid-row: auto; }
}

/* ── Mosaique soudee : aucun espace entre les blocs ─────────────────────── */
body.page-home #services .services-table__body { gap: 0; }
body.page-home #services .services-table__body > #service-ielts,
body.page-home #services .services-table__body > #service-toeic,
body.page-home #services .services-table__body > #service-cours { border-width: 0; }
/* un filet interne separe les blocs sans creer d ecart */
body.page-home #services .services-table__body > #service-cours {
  border-left: 1px solid #7d8a82; border-right: 1px solid #7d8a82;
}

/* Le bouton « Precis de grammaire gratuits » sort de la mosaique. */
body.page-home #services #service-cours .services-table__btn-precis { display: none; }

/* ── Bande d actions collee sous la mosaique : quatre cellules egales ───── */
body.page-home #services .services-catalogue-cta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 0;
  align-items: stretch;
}
body.page-home #services .services-catalogue-cta > .services-collapse-bar {
  display: flex; margin: 0; padding: 0;
}
body.page-home #services .services-catalogue-cta > .services-collapse-bar > .btn,
body.page-home #services .services-catalogue-cta > .btn {
  width: 100%;
  border-radius: 0;
  margin: 0;
  justify-content: center;
  padding-block: clamp(.9rem, 2vw, 1.15rem);
  border-width: 0;
}
/* la mosaique et la bande se touchent : on annule les ecarts intermediaires */
body.page-home #services .services-table-wrap,
body.page-home #services .services-catalog { margin-bottom: 0; }
body.page-home #services .services-table { margin-bottom: 0; }

@media (max-width: 860px) {
  body.page-home #services .services-catalogue-cta { grid-template-columns: 1fr; }
}

/* ── Triptyque : plus de bandes blanches autour des visuels ─────────────── */
.phare--haut .phare__visuel,
.phare--bas .phare__visuel { aspect-ratio: 1 / 1; }
.phare__visuel { padding: 0; margin: 0; }
.phare__visuel img { object-fit: cover; }

/* ══════════════════════════════════════════════════════════════════════════
   SERVICES LINGUISTIQUES — mosaique integrale
   TOUS les services sont des blocs, sur trois colonnes soudees. Les trois
   premiers sont visibles ; les autres se devoilent via « Voir tous les
   services ». Les trois tons alternent : sombre, ambre, clair.
   Les blocs restent les MEMES elements : boutons et gestionnaires intacts.
   ══════════════════════════════════════════════════════════════════════════ */
body.page-home #services .services-table__body > .services-table__row {
  grid-column: auto;
  grid-row: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;                    /* resserre : moins d air sous « Particuliers » */
  padding: clamp(1.1rem, 2.4vw, 1.7rem);
  border: none;
  min-height: clamp(180px, 22vw, 250px);
}
/* Les trois tons alternent sur toute la mosaique. */
body.page-home #services .services-table__body > .services-table__row:nth-child(3n + 1) { background: #0d280b; }
body.page-home #services .services-table__body > .services-table__row:nth-child(3n + 2) { background: var(--accent); }
body.page-home #services .services-table__body > .services-table__row:nth-child(3n + 3) { background: #ffffff; box-shadow: inset 0 0 0 1px #7d8a82; }

/* Titre du service */
body.page-home #services .services-table__body > .services-table__row .services-table__name {
  font-family: 'Anton', var(--font-display), sans-serif;
  font-weight: 400; text-transform: uppercase;
  letter-spacing: -.005em; line-height: .96;
  font-size: clamp(1.15rem, 2.1vw, 1.7rem);
}
body.page-home #services .services-table__body > .services-table__row .services-table__cat { margin: 0; }
body.page-home #services .services-table__body > .services-table__row .service-card__category {
  background: transparent; padding: 0;
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
body.page-home #services .services-table__body > .services-table__row .services-table__service {
  display: flex; align-items: flex-start; gap: .55rem; margin: 0;
}
body.page-home #services .services-table__body > .services-table__row .services-table__actions {
  width: 100%; margin-top: auto;
}
body.page-home #services .services-table__body > .services-table__row .services-table__actions-inner {
  display: flex; flex-wrap: wrap; gap: .45rem; justify-content: flex-start;
}
/* « Precis de grammaire gratuits » revient, sous Detail et Reserver. */
body.page-home #services .services-table__btn-precis {
  display: inline-flex; order: 3; flex-basis: 100%;
}

/* Ton sombre */
body.page-home #services .services-table__body > .services-table__row:nth-child(3n + 1) .services-table__name { color: #f2f0eb; }
body.page-home #services .services-table__body > .services-table__row:nth-child(3n + 1) .service-card__category { color: var(--accent); }
body.page-home #services .services-table__body > .services-table__row:nth-child(3n + 1) .services-table__icon { color: var(--accent); }
body.page-home #services .services-table__body > .services-table__row:nth-child(3n + 1) .btn-outline { color: #f2f0eb; border-color: #4c8449; background: transparent; }
/* Ton ambre */
body.page-home #services .services-table__body > .services-table__row:nth-child(3n + 2) .services-table__name { color: #3a2600; }
body.page-home #services .services-table__body > .services-table__row:nth-child(3n + 2) .service-card__category { color: #6b4400; }
body.page-home #services .services-table__body > .services-table__row:nth-child(3n + 2) .services-table__icon { color: #3a2600; }
body.page-home #services .services-table__body > .services-table__row:nth-child(3n + 2) .btn-outline { color: #3a2600; border-color: rgba(58,38,0,.4); background: transparent; }
body.page-home #services .services-table__body > .services-table__row:nth-child(3n + 2) .btn-primary { background: #0d280b; color: #f2f0eb; }
/* Ton clair */
body.page-home #services .services-table__body > .services-table__row:nth-child(3n + 3) .services-table__name { color: var(--green-deep); }
body.page-home #services .services-table__body > .services-table__row:nth-child(3n + 3) .service-card__category { color: var(--green); }
body.page-home #services .services-table__body > .services-table__row:nth-child(3n + 3) .services-table__icon { color: var(--green); }

/* Bande d actions : collee, sans rembourrage excessif. */
body.page-home #services .services-catalogue-cta > .services-collapse-bar > .btn,
body.page-home #services .services-catalogue-cta > .btn {
  padding-block: .7rem;
  font-size: var(--text-sm);
}

@media (max-width: 860px) {
  body.page-home #services .services-table__body > .services-table__row { min-height: 0; }
}

/* Tons pilotes par classe : l alternance ne compte que les services, pas les
   en-tetes de sous-section que nth-child comptait a tort. */
body.page-home #services .services-table__row.svc-ton-1 { background: #0d280b; }
body.page-home #services .services-table__row.svc-ton-2 { background: var(--accent); }
body.page-home #services .services-table__row.svc-ton-3 { background: #ffffff; box-shadow: inset 0 0 0 1px #7d8a82; }
body.page-home #services .svc-ton-1 .services-table__name { color: #f2f0eb; }
body.page-home #services .svc-ton-1 .service-card__category,
body.page-home #services .svc-ton-1 .services-table__icon { color: var(--accent); }
body.page-home #services .svc-ton-1 .btn-outline { color: #f2f0eb; border-color: #4c8449; background: transparent; }
body.page-home #services .svc-ton-2 .services-table__name { color: #3a2600; }
body.page-home #services .svc-ton-2 .service-card__category,
body.page-home #services .svc-ton-2 .services-table__icon { color: #3a2600; }
body.page-home #services .svc-ton-2 .btn-outline { color: #3a2600; border-color: rgba(58,38,0,.4); background: transparent; }
body.page-home #services .svc-ton-2 .btn-primary { background: #0d280b; color: #f2f0eb; }
body.page-home #services .svc-ton-3 .services-table__name { color: var(--green-deep); }
body.page-home #services .svc-ton-3 .service-card__category,
body.page-home #services .svc-ton-3 .services-table__icon { color: var(--green); }
/* Precis de grammaire gratuits : retabli sous Detail et Reserver. */
body.page-home #services #service-cours .services-table__btn-precis,
body.page-home #services .services-table__btn-precis { display: inline-flex; order: 3; flex-basis: 100%; }

/* Meme structure que les anciennes regles nth-child, plus la classe : la
   specificite est egale et ce bloc vient apres, donc il l emporte. */
body.page-home #services .services-table__body > .services-table__row.svc-ton-1 { background: #0d280b; box-shadow: none; }
body.page-home #services .services-table__body > .services-table__row.svc-ton-2 { background: var(--accent); box-shadow: none; }
body.page-home #services .services-table__body > .services-table__row.svc-ton-3 { background: #ffffff; box-shadow: inset 0 0 0 1px #7d8a82; }

/* Les anciennes regles nth-child continuaient de l emporter malgre une
   specificite que je croyais egale. Plutot que d empiler des selecteurs de
   plus en plus longs, on tranche : la classe posee par le script fait foi. */
body.page-home #services .services-table__row.svc-ton-1 { background: #0d280b !important; box-shadow: none !important; }
body.page-home #services .services-table__row.svc-ton-2 { background: #f5a623 !important; box-shadow: none !important; }
body.page-home #services .services-table__row.svc-ton-3 { background: #ffffff !important; box-shadow: inset 0 0 0 1px #7d8a82 !important; }

/* ── « Precis de grammaire gratuits » sous Detail et Reserver ────────────
   Le bouton est un FRERE du groupe Detail/Reserver, pas un enfant : c est
   donc le conteneur .services-table__actions qui doit ordonner les deux. */
body.page-home #services .services-table__actions--cours {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;
  width: 100%;
}
body.page-home #services .services-table__actions--cours .services-table__actions-inner { order: 1; }
body.page-home #services .services-table__actions--cours .services-table__btn-precis {
  order: 2;
  flex-basis: auto;
  align-self: flex-start;
}

/* ── Bordures : chaque tuile et chaque cellule de la bande se detachent ─── */
body.page-home #services .services-table__row.svc-ton-1 { box-shadow: inset 0 0 0 1px #4c8449 !important; }
body.page-home #services .services-table__row.svc-ton-2 { box-shadow: inset 0 0 0 1px #b8790a !important; }
body.page-home #services .services-table__row.svc-ton-3 { box-shadow: inset 0 0 0 1px #7d8a82 !important; }

body.page-home #services .services-catalogue-cta > .services-collapse-bar > .btn,
body.page-home #services .services-catalogue-cta > .btn {
  box-shadow: inset 0 0 0 1px rgba(21, 67, 19, .35);
}
body.page-home #services .services-catalogue-cta > .btn-accent {
  box-shadow: inset 0 0 0 1px #b8790a;
}

/* Le conteneur d actions du bloc Cours refusait d empiler malgre
   flex-direction: column — une regle heritee le disposait en ligne. On tranche :
   Detail et Reserver en haut, « Precis de grammaire gratuits » dessous. */
body.page-home #services #service-cours .services-table__actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: .45rem !important;
  width: 100% !important;
}
body.page-home #services #service-cours .services-table__actions-inner {
  order: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: .45rem !important;
  width: auto !important;
}
body.page-home #services #service-cours .services-table__btn-precis {
  order: 2 !important;
  align-self: flex-start !important;
  margin: 0 !important;
}

/* Le bouton « Precis » vit desormais DANS le groupe Detail/Reserver : il suffit
   de le faire passer a la ligne pour qu il se place dessous. */
body.page-home #services #service-cours .services-table__actions-inner {
  flex-wrap: wrap !important;
}
body.page-home #services #service-cours .services-table__btn-precis {
  flex-basis: 100% !important;
  order: 9 !important;
  align-self: flex-start !important;
}

/* Le bouton « Precis » etait en position absolue avec left: -306px — un calage
   herite de l ancien tableau, ou il devait sortir a gauche de la colonne. En
   mosaique il doit simplement suivre le flux, sous Detail et Reserver. */
body.page-home #services #service-cours .services-table__btn-precis {
  position: static !important;
  left: auto !important; right: auto !important; top: auto !important;
  transform: none !important;
  width: auto !important;
  flex-basis: 100% !important;
  order: 9 !important;
}

/* Les boutons occupaient des largeurs differentes d un bloc a l autre : le
   groupe du bloc Cours etait dimensionne par son contenu, les autres non.
   On impose la meme largeur utile partout. */
body.page-home #services .services-table__body > .services-table__row .services-table__actions,
body.page-home #services .services-table__body > .services-table__row .services-table__actions-inner {
  width: 100% !important;
  max-width: none !important;
}
body.page-home #services .services-table__body > .services-table__row .services-table__actions-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: .4rem !important;
}
body.page-home #services .services-table__body > .services-table__row .services-table__actions-inner > .btn {
  width: 100% !important;
  flex: 0 0 auto !important;
  justify-content: center !important;
  margin: 0 !important;
}

/* Correction de ma propre contradiction : le correctif du bouton « Precis »
   posait width: auto sur ce groupe, ce qui le rendait plus etroit que ceux des
   autres blocs. Meme niveau de selecteur, valeur alignee sur les autres. */
body.page-home #services #service-cours .services-table__actions,
body.page-home #services #service-cours .services-table__actions-inner {
  width: 100% !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: .4rem !important;
}
body.page-home #services #service-cours .services-table__actions-inner > .btn {
  width: 100% !important;
  flex: 0 0 auto !important;
  justify-content: center !important;
}

/* Le bloc blanc portait une bordure reelle (1px de decalage du contenu) la ou
   les autres n ont qu une ombre interieure. On uniformise : ombre partout. */
body.page-home #services .services-table__body > .services-table__row { border: 0 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   SYSTEME DE MOUVEMENT — releve sur huts.com et phamilypharma.com
   Deux courbes, deux vitesses. C est la lecon des deux references :
   · opacite et couleur : sortie douce (easeOutCubic) — huts.com
   · deplacement : leger depassement (easeOutBack) — les deux sites
   · survol : rapide (0,2 s chez huts, 0,3 s chez phamily)
   · revelation : lente (0,8 s chez huts, 0,5 s chez phamily)
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --mv-rapide:  .25s;                              /* survol, micro-interactions */
  --mv-lent:    .8s;                               /* revelations au defilement */
  --mv-moyen:   .5s;                               /* images, glissements */
  --mv-sortie:  cubic-bezier(.33, 1, .68, 1);      /* opacite, couleur */
  --mv-rebond:  cubic-bezier(.175, .885, .32, 1.125); /* deplacement */
}

/* ── Survol : rapide, sur la couleur et le fond ──────────────────────────── */
.btn, .stab, .cat-rail__btn, .nav-links a, .lang-toggle__btn,
.phare, .portfolio-item, .catalogue-service, .services-table__row {
  transition:
    color var(--mv-rapide) var(--mv-sortie),
    background-color var(--mv-rapide) var(--mv-sortie),
    border-color var(--mv-rapide) var(--mv-sortie),
    box-shadow var(--mv-rapide) var(--mv-sortie),
    transform var(--mv-rapide) var(--mv-rebond);
}

/* ── Revelation de section : opacite plus rapide que le mouvement ────────── */
.sect-pre {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--mv-lent) var(--mv-sortie),
    transform var(--mv-lent) var(--mv-rebond);
}
.sect-pre.sect-in { opacity: 1; transform: none; }

/* ── Images : leger agrandissement au survol, comme le background-size
      de phamilypharma (0,5 s) ────────────────────────────────────────────── */
.phare:hover .phare__visuel img,
.portfolio-item:hover .portfolio-media img,
.catalogue-service:hover .catalogue-gallery img {
  transform: scale(1.035);
}
.phare__visuel img, .portfolio-media img, .catalogue-gallery img {
  transition: transform var(--mv-moyen) var(--mv-sortie);
  will-change: transform;
}

/* ── Entrees : le deplacement rebondit, l opacite non ────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes mvEntreeDroite {
    from { opacity: 0; transform: translateX(56px) rotate(2.5deg); }
    to   { opacity: 1; transform: translateX(0) rotate(0); }
  }
  body.page-catalogue .catalogue-service.is-active .catalogue-gallery {
    animation: mvEntreeDroite var(--mv-lent) var(--mv-rebond);
  }
}

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

/* ── Titres de page en Anton sur tout le site ────────────────────────────
   Le template compose ses titres en capitales condensees. On l applique aux
   H1, partout, avec l interligne de securite mesure pour les accents (0,96). */
h1 {
  font-family: 'Anton', var(--font-display), sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.008em;
  line-height: .96;
  text-wrap: balance;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOUVEMENT PAR TYPE DE BLOC
   Vocabulaire relevé sur huts.com et phamilypharma.com : deux courbes — sortie
   douce pour l'opacité, léger dépassement pour le déplacement — et deux vitesses,
   0,25 s au survol, 0,8 s en révélation.

   Les classes sont posées par js/mouvement.js à l'entrée du bloc dans l'écran,
   puis retirées à la fin de l'animation. Sans JS, rien n'est masqué.
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes mvMonte  { from { opacity: 0; transform: translateY(28px); }  to { opacity: 1; transform: none; } }
@keyframes mvGauche { from { opacity: 0; transform: translateX(-42px); } to { opacity: 1; transform: none; } }
@keyframes mvDroite { from { opacity: 0; transform: translateX(42px); }  to { opacity: 1; transform: none; } }
@keyframes mvFondu  { from { opacity: 0; }                               to { opacity: 1; } }

.mv-pre { opacity: 0; }

.mv-in {
  animation-duration: var(--mv-lent);
  animation-delay: var(--mv-retard, 0ms);
  animation-fill-mode: both;
  animation-timing-function: var(--mv-rebond);
  animation-name: mvMonte;
  will-change: opacity, transform;
}
.mv-in[data-mv="gauche"] { animation-name: mvGauche; }
.mv-in[data-mv="droite"] { animation-name: mvDroite; }

/* Un témoignage ne bondit pas : fondu seul, courbe de sortie douce. */
.mv-in[data-mv="fondu"] {
  animation-name: mvFondu;
  animation-timing-function: var(--mv-sortie);
  will-change: opacity;
}

/* Mouvement réduit : le contenu reste en place, sans exception. */
@media (prefers-reduced-motion: reduce) {
  .mv, .mv-pre, .mv-in { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BARRE DE NAVIGATION SUR ÉCRAN ÉTROIT
   « Réserver un appel » est bien plus long que « Book a call » : à 375 px la
   rangée mesurait 409 px, le hamburger sortait de l'écran et le bouton venait
   le toucher. Le tiroir mobile porte déjà son propre sélecteur FR/EN — celui
   de la barre y fait doublon. On le retire là où le tiroir prend le relais,
   ce qui rend au bouton la place qui lui manquait, sans rien perdre.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Le hamburger ne doit toucher le bouton nulle part où il apparaît. Une marge
   plutôt qu un `gap` : l espacement du conteneur est remis à zéro plus haut. */
@media (max-width: 1024px) {
  #navbar .nav-cta .nav-hamburger { margin-left: .5rem; }
}

@media (max-width: 640px) {
  #navbar .nav-cta .lang-toggle { display: none; }
}

/* À 320 px la rangée débordait d un cheveu. On la reprend sur la respiration du
   bouton, jamais sur celle du logo : cette dernière vaut
   `max(…, env(safe-area-inset-left))` et écarte le logo de l arrondi des écrans
   à encoche. Le corps du texte, lui, ne bouge pas. */
@media (max-width: 340px) {
  #navbar .nav-cta .btn { padding-inline: .35rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   « RÉSERVER UN APPEL » DANS LE MENU DÉROULANT
   Le tiroir colore tous ses liens en blanc (`.mobile-menu a`). Cette règle
   atteignait aussi le bouton, dont le fond est blanc : blanc sur blanc, un
   rapport de contraste de 1:1 — le libellé était littéralement invisible.
   Le bouton reprend donc sa propre couleur de texte, le vert profond de la
   marque, qui donne 12,6:1 sur le blanc.
   ═══════════════════════════════════════════════════════════════════════════ */
.mobile-menu a.btn,
.mobile-menu a.btn-white,
.mobile-menu a.btn:hover,
.mobile-menu a.btn-white:hover {
  color: var(--green-deep);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LES TROIS RENVOIS DE LA MOSAÏQUE, MASQUÉS SUR TÉLÉPHONE
   « Voir le catalogue complet », « Voir les tarifs » et « Découvrir le design »
   empilaient trois pavés pleine largeur sous la mosaïque. Les trois
   destinations restent atteignables depuis le tiroir (Tarifs, Design) et le
   pied de page (Catalogue) : rien n'est perdu, seule la répétition disparaît.
   Le bouton « Voir tous les services » reste : il agit sur la mosaïque
   elle-même et n'a pas d'équivalent ailleurs.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  body.page-home .services-catalogue-cta > a { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO ORDINATEUR — LE VIDE SOUS LE TITRE
   Le bloc texte s étirait à la hauteur de la carte (715 px), et son
   `space-between` répartissait le reliquat en un seul trou entre le titre et
   le sous-titre : 191 px à 1029 px de large, 64 px à 1280. Le réglage tenait
   avec l ancien titre, plus long ; il ne tient plus.
   La boîte ne s étire plus : elle fait la hauteur de son contenu, le titre
   reste aligné sur le haut de la carte et le sous-titre le suit immédiatement.
   Le reliquat, lui, tombe sous le paragraphe — là où du blanc se lit comme une
   respiration avant les boutons, et non comme une coupure.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  .hero-copy__text {
    justify-content: flex-start;
    align-self: start;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARTE DE CONFIANCE — RETOUR AU BLANC, COINS ARRONDIS
   Elle seule reprend son fond blanc : posée sur le vert profond du hero, elle
   redevient l objet qu on regarde en premier. L arrondi est une exception
   assumée à la mise au carré générale des cartes (plus haut dans la feuille).
   Le hero impose `color: crème` à tout ce qu il contient : la carte doit donc
   redéclarer sa couleur de texte, sinon elle hériterait du crème et se
   retrouverait clair sur clair.
   ═══════════════════════════════════════════════════════════════════════════ */
body.page-home #hero .hero-trust-card {
  background: var(--white);
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
  border-radius: 18px;
  box-shadow: none;
}
body.page-home #hero .hero-trust-name  { color: var(--green-deep); }
body.page-home #hero .hero-trust-role  { color: var(--green); }
body.page-home #hero .hero-trust-story { color: var(--gray-600); }
body.page-home #hero .hero-trust-stat .num { color: var(--green); }
body.page-home #hero .hero-trust-stat .lbl { color: var(--gray-600); }
body.page-home #hero .hero-trust-badge,
body.page-home #hero .hero-trust-note {
  background: var(--accent);
  color: #3a2600;
  border: none;
}

/* La photo et sa plaque suivent l arrondi de la carte. */
body.page-home #hero .hero-trust-photo-frame {
  border-radius: 12px;
  overflow: hidden;
}
body.page-home #hero .hero-trust-nameplate {
  background: rgba(0, 0, 0, .5);
  border-radius: 8px;
}
body.page-home #hero .hero-trust-nameplate h4,
body.page-home #hero .hero-trust-nameplate .hero-trust-name { color: var(--white); }

/* ═══════════════════════════════════════════════════════════════════════════
   BANDEAU DE SERVICES EN BAS DE PAGE
   Posé par js/ticker-bas.js, soixante secondes après le début de la session.
   Il joue un tour, puis s en va. Il passe SOUS les boutons flottants
   (z-index 500) : le bandeau est un rappel, il ne doit rien recouvrir.
   Le bandeau de l en-tête, lui, reste masqué — c est un objet distinct.
   ═══════════════════════════════════════════════════════════════════════════ */
#ticker-bas {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 400;
  background: var(--green-deep);
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: .6rem 0 max(.6rem, env(safe-area-inset-bottom));
  overflow: hidden;
  transform: translateY(100%);
  animation: tickerBasEntre var(--mv-moyen, .5s) var(--mv-sortie, ease-out) forwards;
}
@keyframes tickerBasEntre { to { transform: none; } }

/* Un seul tour : c est la fin de cette animation qui déclenche le retrait. */
#ticker-bas .ticker-track { animation-iteration-count: 1; }

#ticker-bas.ticker-bas--sort {
  animation: tickerBasSort var(--mv-moyen, .5s) var(--mv-sortie, ease-out) forwards;
}
@keyframes tickerBasSort { from { transform: none; } to { transform: translateY(100%); } }

/* Le pied de page empile désormais deux paires intitulé-valeur (horaires, puis
   adresse). Sans respiration, le second intitulé se colle à la valeur du
   premier et les deux groupes se confondent. */
.footer-hours p + h5,
.footer-hours p + .footer-hours__title { margin-top: .85rem; }




/* ═══════════════════════════════════════════════════════════════════════════
   « À PROPOS » : LE TEXTE GRANDIT AVEC L ÉCRAN
   La page s élargit désormais avec la fenêtre ; à taille de police fixe, la
   biographie atteignait une centaine de caractères par ligne sur un grand
   moniteur. Le corps du texte suit donc la largeur, au lieu de laisser la
   ligne s allonger seule. Rien ne bouge en deçà de 1200 px.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  body.page-about {
    /* Les plafonds ont ete abaisses en meme temps que .about-grid a ete
       bornee a 78rem : le texte suivait encore la FENETRE alors que sa
       colonne, elle, ne grandit plus au-dela de ~1490px. A 2560 la
       biographie atteignait 28px dans une colonne de 660 — 47 signes par
       ligne, soit le defaut inverse de celui qu on corrigeait (85 signes).
       Les nouvelles bornes tiennent la mesure autour de 60 signes des que la
       colonne plafonne ; en deca de 1920 rien ne change, elles ne mordent
       pas. */
    --ap-base: clamp(1rem, .34rem + .88vw, 1.4rem);
    --ap-sm:   clamp(.875rem, .3rem + .77vw, 1.25rem);
    --ap-xs:   clamp(.75rem, .28rem + .63vw, 1.05rem);
  }
  body.page-about .about-content p,
  body.page-about .section-header p { font-size: var(--ap-base); }
  /* Le titre grandit avec le reste : sans lui, le texte ne comblerait pas. */
  body.page-about .about-content h1 { font-size: clamp(2.6rem, 1.15rem + 1.9vw, 3.5rem); }
  body.page-about .exp-title,
  body.page-about .contact-link-label,
  body.page-about .question-form-intro { font-size: var(--ap-sm); }
  body.page-about .exp-detail,
  body.page-about .contact-link-sub,
  body.page-about .cert-pill { font-size: var(--ap-xs); }
}



/* ═══════════════════════════════════════════════════════════════════════════
   « À PROPOS » : LES ÉCARTS NE SE GONFLENT PLUS
   La colonne de texte était étirée à la hauteur de la photo et répartissait le
   surplus entre ses éléments (justify-content: space-between). La photo grandit avec
   l écran — 435 px à 1366, 674 px à 2560 — les écarts passaient de 16 px à
   79 px : le badge, le titre et les paragraphes se retrouvaient éparpillés.
   Le texte garde désormais son propre rythme et s aligne en haut de la photo.
   ═══════════════════════════════════════════════════════════════════════════ */



/* ═══════════════════════════════════════════════════════════════════════════
   HERO EN MOSAÏQUE — DESCRIPTION | PHOTO | CONFIANCE
   Trois panneaux jointifs et de même hauteur, sans gouttière ni coin arrondi,
   comme la mosaïque des services : chacun remplit sa cellule d un bord à
   l autre. La carte flottante disparaît — `display: contents` fait remonter
   la photo et le texte au rang de cellules de la grille du hero.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  body.page-home #hero .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px) minmax(0, 310px);
    column-gap: 0;
    align-items: stretch;
  }

  /* La carte n est plus un objet : ses enfants deviennent des cellules. */
  body.page-home #hero .hero-trust-card {
    display: contents;
  }

  body.page-home #hero .hero-trust-photo-frame {
    grid-column: 2;
    grid-row: 1 / span 2;
    /* Une regle plus haut la bornait a 82 pour cent : dans une mosaique la
       cellule doit etre remplie d un bord a l autre. */
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
  }
  body.page-home #hero .hero-trust-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 28%;   /* le visage reste dans le cadrage */
    aspect-ratio: auto;
    margin: 0;
  }

  body.page-home #hero .hero-trust-body {
    grid-column: 3;
    grid-row: 1 / span 2;
    background: var(--white);
    color: var(--gray-700);
    padding: clamp(1.2rem, 2vw, 1.8rem) clamp(1rem, 1.6vw, 1.4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .7rem;
  }

  /* Le bloc texte de gauche cesse de s aligner sur une carte disparue. */
  body.page-home .hero-copy__text { padding-left: 0; }
}



/* ═══════════════════════════════════════════════════════════════════════════
   HERO — LA PHOTO COMMANDE, LES TEXTES SUIVENT
   Proportions relevées sur la maquette validée (capture du 2026-09-02) :
     · colonnes 29,5 / 42,8 / 27,7 — la photo est la plus large ;
     · la photo garde son rapport naturel 1024/998 : sa hauteur découle de sa
       largeur et fixe la hauteur de toute la rangée — les textes sont
       dimensionnés pour tenir dedans, jamais l inverse ;
     · les touches a·s·d reprennent leur place sous le panneau blanc (le d
       mène à « À propos ») — `display: contents` les avait laissées sans
       cellule.
   Tout est exprimé en pourcentage de la largeur du hero (`cqw`) : la même
   image se reproduit à l identique sur tout écran, en plus grand ou en plus
   petit. Les tailles en `rem` plus haut restent le repli des navigateurs sans
   requêtes de conteneur.
   ═══════════════════════════════════════════════════════════════════════════ */
@supports (container-type: inline-size) {
  body.page-home #hero > .container { container-type: inline-size; }

  @media (min-width: 1025px) {
    body.page-home #hero .hero-grid {
      /* minmax(0, …) : sans lui, une colonne ne peut pas descendre sous son
         plus long mot et le titre volait la largeur de la photo. */
      /* 36 / 36 / 28, et non 29,5 / 42,8 / 27,7 : la colonne de gauche ne
         faisait que 355px a 1440 et 301px a 1100 — trop peu pour porter a la
         fois un titre d affichage et deux boutons cote a cote, et bien trop
         etroite pour que les lignes du titre la REMPLISSENT : elles se
         cassaient tot et laissaient 112px de blanc a droite en moyenne, 157
         au pire. A 36 % (et avec les tailles calees plus bas), le meme titre
         tient en 4 lignes au lieu de 6 et ne laisse plus que 48px.
         Les deux boutons tiennent sur une ligne des 1025px SANS descendre
         sous 15px de texte (voir .hero-actions .btn plus bas). */
      grid-template-columns: minmax(0, 36fr) minmax(0, 36fr) minmax(0, 28fr);
      grid-template-rows: 1fr auto;
      row-gap: 0;
    }

    /* — La photo : rapport naturel, elle donne la hauteur de la rangee — */
    body.page-home #hero .hero-trust-photo-frame {
      grid-column: 2;
      grid-row: 1 / span 2;
      /* Plancher a la hauteur naturelle de la photo (38 % de largeur, divises
         par son rapport 1024/998). Au-dela, le cadre suit la rangee : le
         francais, plus long que l anglais, fait parfois depasser les panneaux
         lateraux de quelques pixels, et les bas de mosaique doivent rester
         alignes. Le depassement mesure 0 a 16 px sur ~500, soit un recadrage
         imperceptible — le rapport de l image, lui, n est jamais deforme. */
      align-self: stretch;
      width: 100%;
      height: auto;
      min-height: 35.1cqw;   /* 36 % de largeur / rapport 1024:998 */
      margin: 0;
      border-radius: 0;
      overflow: hidden;
    }
    body.page-home #hero .hero-trust-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;   /* cadre au meme rapport : aucun recadrage reel */
      aspect-ratio: auto;
      margin: 0;
    }
    body.page-home #hero .hero-trust-nameplate    { padding: .5cqw .9cqw; bottom: 1cqw; }
    body.page-home #hero .hero-trust-nameplate h4,
    body.page-home #hero .hero-trust-nameplate .hero-trust-name { font-size: clamp(.85rem, 1.6cqw, 1.5rem); }

    /* — La description tient dans la hauteur de la photo —

       align-self: stretch ANNULE ici le `align-self: start` posé plus haut
       (bloc « LE BLOC TEXTE NE S'ÉTIRE PLUS »). Cette règle-là datait du hero
       à carte flottante : laisser la boîte à la hauteur de son texte faisait
       tomber le reliquat sous le paragraphe, ce qui se lisait comme une
       respiration. En mosaïque, les panneaux sont BORDÉS : une cellule qui ne
       remplit pas sa rangée devient une boîte qui flotte, et le filet gauche
       s'interrompt entre le texte et les boutons — alors que
       `.hero-copy__text{border-bottom:none}` et `.hero-actions{border-top:none}`
       plus bas supposent précisément qu'ils se touchent.
       Les deux cellules de la colonne 1 s'étirent donc, exactement comme
       .hero-trust-body et .hero-keys-cell le font en colonne 3. */
    body.page-home #hero .hero-copy__text {
      grid-column: 1;
      grid-row: 1;
      align-self: stretch;
      /* Le panneau s etire a la hauteur de la photo ; son texte, lui, ne la
         remplit jamais exactement. `flex-start` faisait tomber TOUT le
         reliquat en un seul trou entre le sous-titre et les boutons : 95px a
         1440, 114px a 1920 — une respiration de cette taille se lit comme un
         element manquant. Centre, le meme reliquat se partage en deux moities
         qui se lisent comme les marges du panneau. Surtout : la valeur ne
         depend plus de la longueur du texte, donc ni de la langue ni d une
         retouche de copie. */
      justify-content: center;
      /* Le rembourrage de base (6vw) mangeait un quart de la colonne. */
      /* Meme respiration en haut QU'EN BAS : le panneau est borde, son pied
         doit respirer comme sa tete. */
      padding: 1.6cqw 1.5cqw 1.6cqw;
      gap: 2.52cqw;
    }

    /* ─ Les tailles remplissent la cellule, elles ne la subissent pas ─
       Meme principe que .hero-trust-body en colonne 3, dont le commentaire dit
       deja : « ces tailles sont calees pour que le contenu remplisse la hauteur
       imposee par la photo ». Le titre raccourci laissait ici 304 px de vide.

       C'est le TITRE qui absorbe le vide, pas le paragraphe. Agrandir les deux
       dans le meme rapport remplit aussi, mais fait tomber la longueur de ligne
       du paragraphe de 35 a 24 signes (21 en anglais) : sous ~30, un texte
       courant se lit par a-coups. Le titre, lui, est de l'affichage — une ligne
       courte ne le gene pas.

       Valeurs relevees au navigateur, de 1025 a 1440 px, comme la plus grande
       taille qui ne fasse JAMAIS grandir la rangee (au-dela, le texte cesse de
       remplir la hauteur de la photo et se met a la dicter — a 5 cqw le hero
       enfle de 14 px, a 5,04 de 62 px en anglais) :
         FR  titre 4,8 cqw  -> 23 px de reste au pire
         EN  titre 4,6 cqw  -> le titre anglais se coupe autrement et plafonne
                               plus tot ; le reliquat part dans son paragraphe,
                               plus court, porte a 1,7 cqw (33 px au pire). */
    /* UNE seule taille pour les deux langues. Les quatre valeurs precedentes
       (FR 4,8 / 1,35 cqw, EN 4,6 / 1,7 cqw) etaient relevees au navigateur
       pour que chaque texte remplisse EXACTEMENT la hauteur de la photo : le
       reglage se perimait des qu on touchait a un mot. Depuis que le panneau
       centre son texte (ci-dessus), le remplissage n a plus a etre exact — une
       echelle unique suffit, et elle survit aux retouches de copie. */
    /* Les bornes de chaque clamp() disent la meme chose partout : en dessous,
       le texte cesse d etre lisible ; au-dessus, il cesse d etre du texte.
       Sans elles, a 1025px de large (cqw = 9,46) le sous-titre tombait a
       14,2px et le libelle des chiffres a 9,9px — la mise a l echelle en
       pourcentage n a pas de plancher par elle-meme. */
    /* Le couple titre/sous-titre est regle pour REMPLIR la cellule dans les
       deux sens a la fois. C est un equilibre, pas deux reglages separes :
       grossir le titre remplit la hauteur mais casse les lignes trop tot
       (112px de blanc a droite a 4,5cqw) ; le reduire remplit la largeur mais
       vide la hauteur. La hauteur manquante est donc reprise par le
       SOUS-TITRE, dont les lignes sont courtes et se recomposent bien.
       Releve a 1440 : titre 48px de rag moyen, sous-titre 39px, et 73px de
       reliquat vertical reparti par `justify-content: center`.
       Pas de `max-width` sur le sous-titre : la colonne borne deja sa mesure
       a ~37 signes, et tout plafond supplementaire rouvrirait du blanc. */
    body.page-home #hero .hero-title    { font-size: clamp(2.4rem, 4.2cqw, 5.5rem); line-height: 1.08; }
    body.page-home #hero .hero-subtitle {
      font-size: clamp(1rem, 2.1cqw, 2.3rem);
      max-width: none;
      /* Empeche la derniere ligne orpheline : a 1920 en anglais, une ligne du
         sous-titre ne portait que deux mots et laissait 423px de blanc a
         elle seule. `balance` est deja pose sur les titres (bloc TYPOGRAPHY) ;
         `pretty` est son equivalent pour du texte courant. */
      text-wrap: pretty;
    }
    body.page-home #hero .hero-actions {
      grid-column: 1;
      grid-row: 2;
      /* stretch, et non end : le panneau doit remplir la rangée pour que son
         filet rejoigne celui du bloc texte. Les boutons, eux, restent calés en
         bas par le rembourrage asymétrique ci-dessous. */
      align-self: stretch;
      align-items: flex-end;
      gap: .8cqw;
      margin: 0;
      padding: 1.2cqw 1.5cqw 1.6cqw;
    }
    /* 1,05cqw donnait 10,7px a 1100, 12,6px a 1440 : l appel a l action
       principal du site etait plus petit que son propre texte courant, et sa
       cible faisait 27px de haut. Les bornes basses (1rem / 2,75rem) sont
       celles d une cible cliquable normale ; la part en cqw ne sert plus qu a
       le faire grandir sur les tres grands ecrans. */
    body.page-home #hero .hero-actions .btn {
      font-size: clamp(.95rem, 1.05cqw, 1.25rem);
      padding-inline: clamp(.7rem, 1cqw, 1.5rem);
      padding-block: clamp(.6rem, .65cqw, 1rem);
      min-height: 2.75rem;
      /* Hauteur imposee, et non deduite des glyphes : sans elle la fleche de
         « Voir les services → » rendait son bouton 2px plus haut que l autre,
         et leurs bords hauts se decalaient dans une composition bordee. */
      line-height: 1.25;
    }

    /* — Le panneau de confiance : role en haut, recit, chiffres en bas — */
    body.page-home #hero .hero-trust-body {
      grid-column: 3;
      grid-row: 1;
      justify-content: space-between;
      padding: 1.6cqw 1.5cqw;
      gap: 1cqw;
    }
    /* Le panneau est en space-between : tout ce que le texte n occupe pas
       devient du vide entre les blocs. Ces tailles sont calees pour que le
       contenu remplisse la hauteur imposee par la photo — la ligne de role
       est graissee, c est une qualification, pas une legende. */
    body.page-home #hero .hero-trust-role      { font-size: clamp(1.05rem, 1.85cqw, 2rem);
                                                 line-height: 1.4; font-weight: 700; }
    body.page-home #hero .hero-trust-story     { font-size: clamp(.95rem, 1.5cqw, 1.5rem);
                                                 line-height: 1.6; margin-top: 1.1cqw; }
    body.page-home #hero .hero-trust-stat .num { font-size: clamp(1.35rem, 2.25cqw, 2.6rem); }
    body.page-home #hero .hero-trust-stat .lbl { font-size: clamp(.75rem, 1.05cqw, 1.1rem); }
    /* Les trois colonnes gardent une ligne de base commune meme si un libelle
       passe sur deux lignes — comme sur telephone. */
    body.page-home #hero .hero-trust-stat .lbl { min-height: 2.6em; }

    /* — Bordures fines, presque transparentes : elles dessinent toutes les
         cellules de la mosaique sur le vert sans l alourdir. Chaque arete
         partagee n est tracée qu une fois, sinon les filets doubleraient. — */
    body.page-home #hero .hero-copy__text,
    body.page-home #hero .hero-actions,
    body.page-home #hero .hero-trust-photo-frame,
    body.page-home #hero .hero-trust-body,
    body.page-home #hero .hero-keys-cell {
      border: 1px solid rgba(242, 240, 235, .18);
    }
    /* colonne 1 : le texte et les boutons ne forment qu un panneau */
    body.page-home #hero .hero-copy__text { border-bottom: none; }
    body.page-home #hero .hero-actions    { border-top: none; }
    /* la photo partage son arete gauche avec la colonne 1 */
    body.page-home #hero .hero-trust-photo-frame { border-left: none; }
    /* colonne 3 : arete gauche partagee avec la photo, panneau continu */
    body.page-home #hero .hero-trust-body {
      border-left: none;
      border-bottom: none;
    }
    body.page-home #hero .hero-keys-cell {
      border-left: none;
      border-top: none;
    }
    body.page-home #hero .hero-actions .btn-outline {
      border-color: rgba(242, 240, 235, .28);
    }

    /* — Les touches a·s·d, sous le panneau blanc, calees sur le bas de la
         photo. Le d reste le lien vers « À propos ». — */
    body.page-home #hero .hero-keys-cell {
      grid-column: 3;
      grid-row: 2;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 1cqw 1.5cqw 1.6cqw;   /* respiration sous les touches */
    }
    body.page-home #hero .asd-keys--hero {
      height: 5.3cqw;
      margin: 0;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LES BORDURES DU HERO SUR TÉLÉPHONE
   La carte blanche portait déjà son filet ; le bloc de description, non. Sur
   petit écran la disposition est empilée, donc les arêtes partagées sont
   horizontales : le texte prend haut/gauche/droite, les boutons prennent
   gauche/droite/bas, et les deux ne forment qu un panneau.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  body.page-home #hero .hero-copy__text,
  body.page-home #hero .hero-actions {
    border: 1px solid rgba(242, 240, 235, .18);
  }
  body.page-home #hero .hero-copy__text {
    border-bottom: none;
    padding: clamp(1rem, 4vw, 1.4rem) clamp(1rem, 4vw, 1.4rem) 0;
  }
  body.page-home #hero .hero-actions {
    border-top: none;
    padding: clamp(.9rem, 3vw, 1.2rem) clamp(1rem, 4vw, 1.4rem);
    margin: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO TELEPHONE ET TABLETTE — CE QU ON VOIT EN PREMIER, ET UN SEUL BORD
   Trois defauts mesures a 390x844 :

   1. `.hero-visual { order: -1 }` faisait passer la photo, la biographie, les
      chiffres et les touches a·s·d AVANT le texte : le titre tombait a 916px
      du haut et les boutons a 1194px. Le premier ecran d un telephone ne
      disait pas ce qui est vendu. L ordre est retabli : titre, sous-titre,
      boutons, puis la carte de confiance.

   2. Le panneau borde etait un L. `.hero-copy` etait en `align-items:
      flex-start`, donc chacun de ses deux enfants prenait la largeur de son
      propre contenu : 296px pour le texte, 222px pour les boutons — alors
      qu ils sont traces comme une seule boite (pas de filet entre eux). En
      `stretch`, les deux font la meme largeur par construction, quelle que
      soit la longueur des libelles.

   3. Trois bords gauches differents dans une meme colonne : la carte a 16px,
      le panneau a 47px, le texte a 63px — 16 % de la largeur de l ecran
      mangee par des rembourrages emboites. Le rembourrage lateral remonte
      dans les panneaux eux-memes : carte et panneau partagent maintenant le
      bord de la grille, et un seul retrait separe le texte du filet.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  #hero .hero-copy   { order: 1; }
  #hero .hero-visual { order: 2; }

  #hero .hero-copy {
    align-items: stretch;
    /* le retrait est porte par les panneaux, plus par leur conteneur */
    padding-inline: 0;
    gap: 0;
  }
  /* Les retraits hérités des paliers ≤768 s ajoutaient A L INTERIEUR du
     panneau, en plus de son propre rembourrage. */
  #hero .hero-title,
  #hero .hero-subtitle,
  #hero .hero-actions { padding-inline-start: 0; }

  /* Les trois colonnes de chiffres gardent une ligne de base commune meme
     quand un libelle passe sur deux lignes (« ans d audiovisuel »). */
  #hero .hero-trust-stat .lbl { min-height: 2.6em; }

  /* Une ligne de qualification a 12,5px et un recit a 13,6px : sous le
     plancher lisible sur telephone. */
  #hero .hero-trust-role  { font-size: .95rem; line-height: 1.45; }
  #hero .hero-trust-story { font-size: .95rem; }
}

/* Sous 640px les boutons s empilent : ils remplissent alors toute la largeur
   du panneau, sans quoi ils reproduiraient le L corrige plus haut. */
@media (max-width: 640px) {
  #hero .hero-actions { align-items: stretch; }
  #hero .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLUS AUCUN BLOC CENTRE AVEC DES BANDES VIDES SUR LES COTES
   Mesure a 900px de large : la carte de confiance faisait 320px dans une
   grille de 821 — 251px de vert vide a gauche ET a droite, juste sous un
   panneau de texte qui, lui, occupait toute la largeur. La cause : un
   `max-width` en PIXELS (`min(320px, 72vw)`) double d un `margin: 0 auto`.
   Un plafond en pixels ne se comprime pas : passe une certaine largeur
   d ecran, il cesse de suivre et abandonne le reste au vide.

   Le plafond disparait. Pour que la carte n ait pas a s etirer betement sur
   821px, elle se REORGANISE : entre 641 et 1024px elle passe a deux colonnes
   — photo a gauche, texte a droite — et remplit sa ligne par construction.
   En dessous de 641px elle reprend son empilement, pleine largeur.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Le conteneur suit la colonne de la grille, il ne se borne plus lui-meme. */
  #hero .hero-visual,
  #hero .hero-trust {
    max-width: none;
    width: 100%;
    margin: 0;
  }
  #hero .hero-trust-card { max-width: none; width: 100%; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  /* Deux colonnes : la photo garde une proportion lisible, le texte occupe
     le reste. Aucune valeur en pixels — les deux colonnes sont des parts. */
  #hero .hero-trust-card {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 1.75rem);
    align-items: center;
    padding: clamp(1.1rem, 2.2vw, 1.7rem) clamp(1.2rem, 2.4vw, 1.9rem);
  }
  /* La marge basse servait a separer la photo du texte quand ils etaient
     empiles ; cote a cote, c est la gouttiere qui s en charge. */
  #hero .hero-trust-photo-frame { margin-bottom: 0; }
  #hero .hero-trust-story { margin-top: .6rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   « UN PROCESSUS SIMPLE » SE MET À L ÉCHELLE
   Les cartes gardaient des tailles fixes pendant que la page s élargissait :
   à 2732 px elles ne faisaient plus que 218 px de haut avec du texte à 14 px,
   perdues dans la largeur. Leurs mesures suivent désormais la largeur de la
   section, comme le hero. En dessous de 1025 px on garde les tailles en `rem`
   — un pourcentage de 345 px donnerait un texte de 4 px.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Anti-etirement des cartes du processus — SANS dependre des container
   queries : un Safari d iPad sans leur support retombait sinon sur height:100%
   + align-items:stretch, et les boites se rallongeaient. Ici pour tous. */
@media (min-width: 1025px) {
  .process-steps { align-items: stretch; }  /* meme hauteur pour toutes */
  .process-step  { border-radius: 0; }
}

@supports (container-type: inline-size) {
  #process > .container { container-type: inline-size; }

  @media (min-width: 1025px) {
    /* align-items: start : chaque carte epouse son contenu au lieu de s etirer
       a la hauteur de la plus longue. C est ce qui creait les grandes boites
       vides sur iPad dezoome. Les hauts restent alignes (la grille cale les
       cartes en haut de leur rangee). */
    .process-steps { gap: 2.11cqw; align-items: stretch; }
    .process-step {
      padding: min(2.82cqw, 2.2rem) min(1.76cqw, 1.6rem);
      border-width: max(1px, .12cqw);
      border-radius: 0;
    }
    /* Le rond du numero ne doit pas ballonner : plafonne a 72 px. */
    .process-num {
      width: min(4.93cqw, 4.5rem);
      height: min(4.93cqw, 4.5rem);
      font-size: min(1.58cqw, 1.45rem);
      margin-bottom: min(2.01cqw, 1.5rem);
    }
    /* min() plafonne mais ne plancheie pas : a 1025px le titre d etape
       tombait a 13,3px et son texte a 11,6px. */
    .process-step h3 { font-size: clamp(1rem, 1.41cqw, 1.3rem); margin-bottom: min(.74cqw, .55rem); }
    .process-step p  { font-size: clamp(.9rem, 1.23cqw, 1.15rem); }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOUTE LA PAGE SE MET À L ÉCHELLE
   Les titres, textes et boutons gardaient des tailles fixes pendant que les
   sections s élargissaient : de 1200 à 2560 px, un titre de section restait
   à 40 px et un témoignage à 12 px, donc deux fois plus petits en proportion.
   Chaque mesure suit désormais la largeur de sa section, releveée sur la
   composition de 1200 px. En dessous de 1025 px les tailles en `rem` gardent
   la main : un pourcentage de 345 px donnerait un texte illisible.
   ═══════════════════════════════════════════════════════════════════════════ */
@supports (container-type: inline-size) {
  /* Pas de <main> sur ce site : les sections sont filles directes de body.
     Sans cette correction, cqw retombait sur la largeur de la fenetre. */
  body.page-home section > .container { container-type: inline-size; }

  @media (min-width: 1025px) {
    /* Chaque mesure est BORNEE des deux cotes, comme celles du hero.
       Un pourcentage seul n a ni plancher ni plafond : a 1025px de large
       (cqw = 9,46) l etiquette de « Detail » tombait a 9,1px, un temoignage
       et un badge de section a 10px, la description d un volet a 11,6px ;
       a 2560 (cqw = 17,4) le meme badge passait a 18,4px et le chapeau de
       section a 25,7px, qui rallongeait la ligne au lieu de l agrandir.
       Le plancher est la limite de lisibilite, le plafond celle au-dela de
       laquelle un libelle cesse d etre un libelle. Entre les deux, tout
       continue de suivre la largeur de la section, comme voulu. */

    /* — En-tetes de section — */
    body.page-home .section-header .badge { font-size: clamp(.75rem, 1.06cqw, 1.05rem);
                                            padding: clamp(.25rem, .32cqw, .5rem) clamp(.7rem, .79cqw, 1.1rem); }
    body.page-home .section-header h2     { font-size: clamp(1.9rem, 3.52cqw, 4rem); }
    body.page-home .section-header p      { font-size: clamp(1rem, 1.48cqw, 1.5rem); }

    /* — Triptyque des services phares — */
    body.page-home .phares__entete .badge { font-size: clamp(.75rem, 1.06cqw, 1.05rem);
                                            padding: clamp(.25rem, .32cqw, .5rem) clamp(.7rem, .79cqw, 1.1rem); }
    body.page-home .phares__entete h2     { font-size: clamp(1.9rem, 3.52cqw, 4rem); }  /* = .section-header h2 */
    /* Pose sur le CORPS, pas sur l etiquette : la compensation du volet sans
       etiquette lit la meme variable, donc les deux ne peuvent plus diverger
       (7px d ecart a 2560 quand la taille etait ecrite des deux cotes). */
    body.page-home .phare__corps          { --phare-public-fs: clamp(.75rem, 1.06cqw, 1.05rem); }
    body.page-home .phare h3              { font-size: clamp(1.2rem, 2.01cqw, 2.2rem); }
    body.page-home .phare p               { font-size: clamp(.9rem, 1.23cqw, 1.25rem); }
    body.page-home .phare__lien           { font-size: clamp(.9rem, 1.23cqw, 1.25rem); }
    body.page-home .phare__corps          { padding: clamp(.9rem, 1.2cqw, 1.75rem) clamp(1rem, 1.3cqw, 1.9rem) clamp(1.1rem, 1.45cqw, 2.1rem);
                                            --phare-gap: clamp(.4rem, .55cqw, .8rem); }

    /* — Mosaique des services — */
    body.page-home .services-table__name     { font-size: clamp(1.35rem, 2.4cqw, 2.4rem); }
    body.page-home .service-card__category   { font-size: clamp(.75rem, 1.06cqw, 1.05rem); }
    body.page-home .services-table__btn-details,
    body.page-home .services-table__btn-cta,
    body.page-home .services-table__btn-precis {
      font-size: clamp(.85rem, .96cqw, 1.05rem);
      padding-block: clamp(.55rem, .63cqw, .85rem);
    }
    body.page-home .services-catalogue-cta > a,
    body.page-home .services-collapse-bar .btn { font-size: clamp(.85rem, .96cqw, 1.05rem);
                                                 padding-block: clamp(.6rem, .74cqw, .95rem); }

    /* — Temoignages — */
    body.page-home .testimonial-card p  { font-size: clamp(.95rem, 1.06cqw, 1.25rem); }
    body.page-home .testimonial-card h4 { font-size: clamp(1rem, 1.37cqw, 1.4rem); }
    body.page-home .t-service           { font-size: clamp(.8rem, 1.06cqw, 1.05rem); }
  }
}


/* Mention « hors taxes », partout ou un montant est affiche.
   #d32f2f est le rouge le plus clair qui reste lisible sur blanc :
   contraste 4,98 pour 4,5 requis. Plus clair, la mention devient
   decorative et cesse d etre lue. */
.mention-ht {
  color: #d32f2f;
  font-size: .9em;
  font-weight: 600;
  margin-top: .35rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CIBLES TACTILES — 44 px MINIMUM SUR ECRAN TACTILE
   Mesures a 390 px de large : « Detail » et « Reserver » des lignes de
   services faisaient 36 px de haut, « Voir tous les services » 38 px,
   « Laisser un avis Google » 31 px. Sous 44 px, un doigt vise a cote.
   La barre de navigation est volontairement hors du lot : sa hauteur est
   calculee ailleurs (--nav-height) et sert de reference a tout le site.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  section .btn,
  main .btn,
  footer .btn,
  .modal-box .btn,
  .mobile-menu .btn { min-height: 2.75rem; }
  /* Repete avec la specificite de la regle qu il faut battre :
     `.services-table__actions .btn` (deux classes) l emportait sur
     `section .btn`, et les boutons du tableau restaient a 40px entre
     601 et 1024px — le palier tablette, ou le doigt sert autant. */
  .services-table__actions .btn { min-height: 2.75rem; }
  .testimonials-cta .btn,
  .share-experience-actions .btn { min-height: 2.75rem; }
}