/* =====================================================================
   WEBI — Agence web Tunisie — Theme public (refonte 2026)
   Charte : jaune #ffce0e, noir #1a1a1a, blanc. Montserrat. Aucune autre couleur.
   Les couleurs et polices sont pilotees par les variables CSS injectees
   depuis Reglages > Apparence (ThemeService::cssVariables).
   Le sens d'ecriture arabe (RTL) est traite dans rtl.css.
   ===================================================================== */

:root {
  --brand: #ffce0e;          /* jaune WEBI — la seule couleur d'accent du site */
  --brand-dark: #e8b800;     /* jaune fonce : survols et bordures */
  --brand-2: #ffdd55;        /* bandeaux jaunes */
  --brand-soft: #fff8d9;     /* fond jaune tres clair (icones, badges) */
  --accent: #e8b800;         /* pas de seconde teinte : on reste sur le jaune */
  --accent-soft: #fff8d9;
  --ink: #1a1a1a;            /* titres — noir de la charte */
  --text: #5c5c5c;           /* texte courant */
  --muted: #838383;          /* texte secondaire — gris de la charte */
  --dark: #1a1a1a;           /* pied de page */
  --soft: #f6f6f6;           /* sections gris clair */
  --line: #e6e6e6;           /* bordures */
  --white: #ffffff;
  --font-head: 'Montserrat', sans-serif;
  --font-body: 'Montserrat', sans-serif;
  --header-h: 84px;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-btn: 50px;
  --container: 1180px;
  --shadow-card: 0 12px 40px rgba(0, 0, 0, .07);
  --shadow-img: 0 24px 60px rgba(0, 0, 0, .13);
  --transition: .22s ease;

  /* Proprietes logiques : bascule automatique en RTL */
  --start: left;
  --end: right;
}

/* ------------------------------ Base ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--ink); }
p { margin: 0 0 16px; }
ul, ol { margin: 0 0 16px; padding-left: 20px; }
svg { vertical-align: middle; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

h1, .h1 { font-family: var(--font-head); font-size: 46px; line-height: 1.12; font-weight: 700; color: var(--ink); letter-spacing: -.02em; margin: 0 0 18px; }
h2, .h2 { font-family: var(--font-head); font-size: 36px; line-height: 1.18; font-weight: 700; color: var(--ink); letter-spacing: -.02em; margin: 0 0 16px; }
h3, .h3 { font-family: var(--font-head); font-size: 21px; line-height: 1.3; font-weight: 600; color: var(--ink); margin: 0 0 10px; }
h4, .h4 { font-family: var(--font-head); font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
h5, .h5 { font-family: var(--font-body); font-size: 17px; line-height: 1.4; font-weight: 500; color: var(--text); margin: 0 0 8px; }
h6, .h6 { font-family: var(--font-head); font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
h1 strong, h2 strong, h3 strong { font-weight: 700; color: var(--ink); }
h1 strong, h2 strong { background: linear-gradient(transparent 62%, var(--brand) 62%, var(--brand) 92%, transparent 92%); padding: 0 .08em; }

::selection { background: var(--brand); color: var(--ink); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; width: 100%; }
.container.narrow { max-width: 820px; }
.container.full { max-width: none; padding: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: 12px 22px; background: var(--brand); color: var(--ink); font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ------------------------------ Boutons ------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
  height: 52px;
  padding: 0 34px;
  border-radius: var(--radius-btn);
  border: 2px solid var(--brand);
  background: var(--brand);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), color .06s linear, border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  text-align: center;
  box-shadow: 0 8px 20px rgba(255, 206, 14, .28);
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--white); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.btn--primary { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.btn--primary:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn--dark { background: var(--ink); border-color: var(--ink); color: var(--white); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.btn--dark:hover { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.btn--outline { background: transparent; border-color: var(--ink); color: var(--ink); box-shadow: none; }
.btn--outline:hover { border-color: var(--brand); background: var(--brand); color: var(--ink); }
.btn--sm { height: 42px; padding: 0 22px; font-size: 12.5px; }
.btn--block { display: flex; width: 100%; }

/* ------------------------------ En-tête ------------------------------ */
.site-header {
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  position: relative;
  z-index: 100;
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--transition);
}
.site-header.is-sticky-enabled { position: sticky; top: 0; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .08); }
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); gap: 24px;
  max-width: var(--container);
}
.header__logo { display: flex; align-items: center; flex-shrink: 0; }
.header__logo img { max-height: calc(var(--header-h) - 34px); width: auto; height: auto; }
.header__brand { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--ink); }

.main-nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.main-nav__item { position: relative; }
.main-nav__item > a {
  position: relative;
  display: block;
  font-family: var(--font-head);
  font-size: 13px; font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
  color: var(--ink);
  line-height: var(--header-h);
  padding: 0 12px;
  transition: color var(--transition);
}
.main-nav__item > a::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: calc(50% - 16px);
  height: 3px; border-radius: 3px; background: var(--brand);
  transform: scaleX(0); transform-origin: left; transition: transform var(--transition);
}
.main-nav__item > a:hover::after,
.main-nav__item.is-current > a::after { transform: scaleX(1); }
.main-nav__item.is-button > a { display: inline-flex; line-height: 1; }
.main-nav__item.is-button > a::after { display: none; }
.main-nav__item.is-button { margin-left: 14px; }

.main-nav__sub {
  position: absolute; top: 100%; left: 0; min-width: 250px;
  background: var(--white); list-style: none; margin: 0; padding: 10px 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .14);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.main-nav__item:hover .main-nav__sub,
.main-nav__item:focus-within .main-nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.main-nav__sub a { display: block; padding: 9px 20px; font-size: 14px; color: var(--ink); }
.main-nav__sub a:hover { background: var(--soft); }

.burger { display: none; background: none; border: 0; cursor: pointer; padding: 10px; }
.burger span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: var(--transition); }

/* ------------------------------ Menu mobile ------------------------------ */
.mobile-menu { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.mobile-menu__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .3s; }
.mobile-menu__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88vw);
  background: var(--white); padding: 20px 22px; overflow-y: auto;
  transform: translateX(100%); transition: transform .3s ease;
  display: flex; flex-direction: column;
}
.mobile-menu.is-open { pointer-events: auto; }
.mobile-menu.is-open .mobile-menu__backdrop { opacity: 1; }
.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }
.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mobile-menu__close { background: none; border: 0; cursor: pointer; color: var(--ink); padding: 6px; }
.mobile-menu__list { list-style: none; margin: 0 0 auto; padding: 0; }
.mobile-menu__list > li > a {
  display: block; padding: 14px 4px; font-family: var(--font-head); font-size: 15px; font-weight: 500;
  color: var(--ink); border-bottom: 1px solid var(--line);
}
.mobile-menu__list > li > a:hover { color: var(--ink); }
.mobile-menu__list ul { list-style: none; margin: 0; padding: 0 0 6px 16px; }
.mobile-menu__list ul a { display: block; padding: 8px 4px; font-size: 14px; }
.mobile-menu__foot { display: grid; gap: 12px; padding-top: 18px; border-top: 2px solid var(--line); }
.mobile-menu__phone { display: flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 500; }

/* ------------------------------ Bannière de titre ------------------------------ */
.page-title {
  position: relative;
  min-height: var(--title-h, 320px);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  background-color: var(--dark);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.page-title.no-image { background: linear-gradient(135deg, #1a1a1a 0%, #1c2028 60%, #2a2f39 100%); }
.page-title__bg { position: absolute; inset: -40px; z-index: 0; background-size: cover; background-position: center 35%; filter: grayscale(1) blur(10px) brightness(.9); opacity: 1; transform: scale(1.06); }
.page-title.has-image::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .42) 55%, rgba(0, 0, 0, .62) 100%);
}
.page-title::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--brand);
}
.page-title__inner { position: relative; z-index: 2; padding: 44px 24px; max-width: 900px; }
.page-title__heading {
  font-family: var(--font-head);
  font-size: var(--step-4); line-height: 1.02; font-weight: 700;
  letter-spacing: -.035em;
  color: var(--white);
  margin: 0;
}
.page-title.no-image .page-title__heading { color: var(--white); }
.page-title__subtitle { max-width: 680px; margin: 12px auto 0; color: rgba(255, 255, 255, .85); font-size: 17px; }
.page-title.no-image .page-title__subtitle { color: rgba(255, 255, 255, .8); }

.breadcrumb { margin-bottom: 14px; font-size: 13px; }
.breadcrumb ol { list-style: none; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0; padding: 6px 14px; background: rgba(255, 255, 255, .12); border-radius: 99px; }
.breadcrumb li:not(:first-child)::before { content: '›'; margin: 0 7px; opacity: .6; color: var(--white); }
.breadcrumb a, .breadcrumb span { color: rgba(255, 255, 255, .85); }
.breadcrumb li[aria-current] span { color: var(--brand); }
.page-title.no-image .breadcrumb a, .page-title.no-image .breadcrumb span { color: rgba(255, 255, 255, .85); }
.breadcrumb a:hover { color: var(--brand); }

/* ------------------------------ Sections / blocs ------------------------------ */
.block { position: relative; }
.pad-normal { padding-top: 88px; padding-bottom: 88px; }
.pad-small { padding-top: 44px; padding-bottom: 44px; }
.pad-large { padding-top: 120px; padding-bottom: 120px; }
.pad-none { padding-top: 0; padding-bottom: 0; }
.bg-white { background: var(--white); }
.bg-soft { background: var(--soft); }
.bg-yellow { background: var(--brand); }
.bg-dark { background: var(--dark); color: rgba(255, 255, 255, .78); }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 { color: var(--white); }
.bg-map { position: relative; background: var(--white); }
.bg-map::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('../../uploads/cms/carte-agences-europe.png') center / min(900px, 90%) no-repeat;
  opacity: .08; filter: grayscale(1);
}
.bg-map > * { position: relative; }

.section-head { margin-bottom: 48px; max-width: 760px; }
.section-head.align-center, .align-center .section-head { margin-left: auto; margin-right: auto; text-align: center; }
.section-head__sub { font-size: 18px; color: var(--muted); margin-top: -6px; }
.section-head__intro { margin-top: 12px; }
.section-actions { text-align: center; margin-top: 44px; }
.align-center { text-align: center; }

.prose h2 { font-size: 30px; }
.prose h3 { font-weight: 600; }
.prose a { color: var(--ink); font-weight: 500; border-bottom: 2px solid var(--brand); }
.prose a:hover { background: var(--brand-soft); }
.prose img { border-radius: var(--radius); }
.prose li { margin-bottom: 6px; }
.prose em { color: var(--ink); }
.text-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }

/* ------------------------------ Hero ------------------------------ */
.hero {
  position: relative;
  display: flex; align-items: center;
  background-color: var(--dark);
  background-image: var(--hero-img-set, var(--hero-img));
  background-size: cover; background-position: center;
  overflow: hidden;
}
.hero--full { min-height: calc(100vh - var(--header-h)); }
.hero--tall { min-height: 640px; }
.hero--medium { min-height: 560px; }
.hero--short { min-height: 440px; }
.hero.has-image::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .25) 100%),
    rgba(0, 0, 0, calc(var(--hero-overlay, .25) * .5));
}
.hero--center.has-image::before { background: rgba(0, 0, 0, calc(.35 + var(--hero-overlay, .25) * .5)); }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--brand); }
.hero__inner { position: relative; z-index: 1; width: 100%; }
.hero__content { max-width: 640px; padding: 76px 0; }
.hero--center .hero__content { margin: 0 auto; text-align: center; }
.hero__title {
  font-family: var(--font-head);
  font-size: var(--step-5); line-height: 1; font-weight: 700;
  letter-spacing: -.035em;
  color: var(--white); margin: 0 0 22px;
}
.hero__title strong { color: var(--brand); background: none; padding: 0; }
.hero--dark .hero__title { color: var(--ink); }
.hero__text { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .88); margin-bottom: 34px; max-width: 560px; }
.hero--center .hero__text { margin-left: auto; margin-right: auto; }
.hero--dark .hero__text { color: var(--text); }

/* ------------------------------ Intro (+ vidéo) ------------------------------ */
.intro-video { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.intro-video.image-left .intro-video__media { order: -1; }
.intro-video__title { font-size: 40px; margin-bottom: 10px; }
.intro-video__subtitle { font-family: var(--font-head); font-size: 17px; font-weight: 500; color: var(--muted); margin-bottom: 20px; }
.intro-video__subtitle em { font-style: normal; color: var(--ink); }
.intro-video__actions { margin-top: 28px; }
.intro-video__media { position: relative; }
.intro-video__media::before {
  content: ''; position: absolute; right: -18px; bottom: -18px; width: 60%; height: 60%;
  background: var(--brand); border-radius: var(--radius); z-index: 0;
}
.intro-video__img, .video-poster { position: relative; z-index: 1; border-radius: var(--radius); box-shadow: var(--shadow-img); overflow: hidden; }
.intro-video__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.video-poster { display: block; }
.video-poster img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.video-poster__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--brand); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transition), background var(--transition);
}
.video-poster:hover .video-poster__play { transform: translate(-50%, -50%) scale(1.08); background: var(--ink); color: var(--white); }
.video-poster iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-poster.is-playing img, .video-poster.is-playing .video-poster__play { visibility: hidden; }

/* ------------------------------ Image + texte ------------------------------ */
.image-text { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.image-text.image-right .image-text__media { order: 2; }
.image-text__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-img); }
.image-text.style-shadow .image-text__media img { box-shadow: var(--shadow-img); }

/* ------------------------- Formes organiques -------------------------
   Les rayons multiples (a / b) dessinent une forme libre. Le survol
   change les rayons, la transition fait le morphing. Meme principe que
   sur l'ancien site, mais sans dependance a un theme WordPress.
   Le mouvement est desactive pour qui demande moins d'animations. */
.image-text.style-blob .image-text__media img,
.image-text.style-blob-alt .image-text__media img,
.image-text.style-blob-soft .image-text__media img,
.image-text.style-blob-live .image-text__media img,
.image-text.style-egg .image-text__media img {
  aspect-ratio: 1 / 1;
  box-shadow: none;
  transition: border-radius .45s cubic-bezier(.4, 0, .2, 1), transform .45s ease;
}

.image-text.style-blob .image-text__media img      { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
.image-text.style-blob .image-text__media img:hover { border-radius: 40% 70% 70% 40% / 40% 40% 70% 70%; }

.image-text.style-blob-alt .image-text__media img       { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; }
.image-text.style-blob-alt .image-text__media img:hover  { border-radius: 70% 40% 40% 70% / 70% 70% 40% 40%; }

.image-text.style-blob-soft .image-text__media img       { border-radius: 70% 30% / 30% 70%; }
.image-text.style-blob-soft .image-text__media img:hover  { border-radius: 80% 20% / 40% 60%; }

.image-text.style-egg .image-text__media img       { border-radius: 50% / 60% 60% 40% 40%; }
.image-text.style-egg .image-text__media img:hover  { border-radius: 50% / 50% 50% 50% 50%; }

/* Morphing continu, pour un bloc qui doit accrocher l'oeil sans interaction */
.image-text.style-blob-live .image-text__media img {
  animation: blob-morph 14s ease-in-out infinite;
}
@keyframes blob-morph {
  0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
  25%      { border-radius: 58% 42% 33% 67% / 45% 58% 42% 55%; }
  50%      { border-radius: 40% 60% 54% 46% / 62% 38% 62% 38%; }
  75%      { border-radius: 67% 33% 48% 52% / 38% 62% 38% 62%; }
}

/* Le meme traitement pour la photo du bloc « Valeurs » */
.values.style-blob .values__media img {
  aspect-ratio: 1 / 1;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  box-shadow: none;
  transition: border-radius .45s cubic-bezier(.4, 0, .2, 1);
}
.values.style-blob .values__media img:hover { border-radius: 40% 70% 70% 40% / 40% 40% 70% 70%; }

@media (prefers-reduced-motion: reduce) {
  .image-text[class*="style-blob"] .image-text__media img,
  .image-text.style-egg .image-text__media img,
  .values.style-blob .values__media img {
    transition: none;
    animation: none;
  }
}

.image-text__cover { min-height: 400px; height: 100%; background-size: cover; background-position: center; border-radius: var(--radius); box-shadow: var(--shadow-img); }
.image-text__title { margin-bottom: 16px; }
.image-text__actions { margin-top: 28px; }

/* Image + liste de services (photo pleine hauteur / contenu sur fond gris) */
.image-services { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.image-services.image-right .image-services__media { order: 2; }
.image-services__media { position: relative; min-height: 460px; }
.image-services__cover { position: absolute; inset: 0; background-size: cover; background-position: center; }
.image-services__content { display: flex; align-items: center; }
.image-services__inner { width: 100%; max-width: 640px; padding: 84px 64px; }
.image-services.image-right .image-services__inner { margin-left: auto; }
.image-services__title { font-size: 34px; margin-bottom: 20px; }
.image-services__text { margin-bottom: 34px; }
.image-services__text p { margin-bottom: 0; }
.image-services__actions { margin-top: 34px; }
.service-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.service-item { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; }
.service-item__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--brand-soft); color: var(--ink);
}
.service-item__icon img { width: 30px; height: 30px; object-fit: contain; }
.service-item__title { font-family: var(--font-head); font-size: 18px; font-weight: 600; color: var(--ink); margin: 4px 0 6px; line-height: 1.3; }
.service-item__title a { color: inherit; }
.service-item__title a:hover { color: var(--ink); border-bottom: 2px solid var(--brand); }
.service-item__text { margin: 0; font-size: 15px; }

/* ------------------------------ Deux colonnes ------------------------------ */
.two-columns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; }
.two-columns__head { grid-column: 1 / -1; max-width: 760px; }
.two-columns__head:has(+ .two-columns__col) { grid-column: auto; }
.two-columns__title { font-size: 34px; }
.two-columns__links { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.two-columns__links a { color: var(--ink); font-weight: 500; border-bottom: 2px solid var(--brand); }
.two-columns__links a:hover { background: var(--brand-soft); }
.two-columns__actions { grid-column: 1 / -1; }

/* ------------------------------ Boîtes à icônes ------------------------------ */
.icon-boxes { display: grid; gap: 28px; }
.icon-boxes.cols-2 { grid-template-columns: repeat(2, 1fr); }
.icon-boxes.cols-3 { grid-template-columns: repeat(3, 1fr); }
.icon-boxes.cols-4 { grid-template-columns: repeat(4, 1fr); }
.icon-boxes.align-center .icon-box { text-align: center; }
.icon-boxes.align-center .icon-box__icon { margin-left: auto; margin-right: auto; }
.icon-box {
  display: block; padding: 34px 26px; color: inherit;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.icon-boxes.style-card .icon-box { box-shadow: 0 4px 18px rgba(0, 0, 0, .04); }
.icon-box:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); border-color: transparent; }
.icon-box__icon {
  display: flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border-radius: 20px;
  background: var(--brand-soft); color: var(--ink);
  margin-bottom: 20px;
  transition: background var(--transition), color var(--transition);
}
.icon-box:hover .icon-box__icon { background: var(--brand); transform: translateY(-3px) rotate(-4deg); box-shadow: 0 10px 22px rgba(255, 212, 0, .35); }
.icon-box__icon { transition: background var(--transition), transform var(--transition), box-shadow var(--transition); }
.icon-box__icon img { width: 36px; height: 36px; object-fit: contain; }
/* Icones images (pastilles jaunes deja colorees) : pas de fond derriere, juste un leger relief au survol */
.icon-box__icon:has(img) { background: transparent; width: 72px; height: 72px; }
.icon-box__icon:has(img) img { width: 64px; height: 64px; }
.icon-box:hover .icon-box__icon:has(img) { background: transparent; transform: translateY(-4px) scale(1.06); box-shadow: none; filter: drop-shadow(0 10px 16px rgba(255, 212, 0, .45)); }
.icon-box__title { font-family: var(--font-head); font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.icon-box__text { margin: 0; font-size: 15px; }

/* ------------------------------ Liste numérotée ------------------------------ */
.numbered-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px 36px; counter-reset: nl; }
.numbered-list.cols-2 { grid-template-columns: 1fr 1fr; }
.numbered-list__item {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 20px;
}
.numbered-list__num {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  background: var(--brand); color: var(--ink);
  font-family: var(--font-head); font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.numbered-list__title { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.numbered-list__item p { margin: 0; font-size: 15px; }

/* ------------------------------ Valeurs ------------------------------ */
.values.has-image { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.values.image-left .values__media { order: -1; }
.values__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 36px; }
.value__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px; background: var(--brand-soft); color: var(--ink);
  margin-bottom: 14px;
}
.value__title { font-family: var(--font-head); font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.value p { margin: 0; font-size: 15px; }
.values__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-img); }

/* ------------------------------ Étapes ------------------------------ */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 54px; }
.step { display: grid; grid-template-columns: 220px 1fr; gap: 44px; align-items: center; }
.step.is-reverse { grid-template-columns: 1fr 220px; }
.step.is-reverse .step__media { order: 2; }
.step__media { text-align: center; }
.step__media img { border-radius: 50%; box-shadow: var(--shadow-card); }
.step__num { font-family: var(--font-head); font-size: 42px; font-weight: 700; color: var(--brand); line-height: 1; display: block; margin-bottom: 8px; -webkit-text-stroke: 1px var(--ink); }
.step__title { font-family: var(--font-head); font-size: 22px; font-weight: 600; }

/* ------------------------------ FAQ ------------------------------ */
.faq { display: grid; gap: 12px; }
.faq__item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition); }
.faq__item[open] { border-color: var(--brand); box-shadow: 0 8px 26px rgba(0, 0, 0, .06); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; cursor: pointer; list-style: none;
  font-family: var(--font-head); font-size: 16px; font-weight: 600; color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q svg { flex-shrink: 0; transition: transform var(--transition); color: var(--muted); }
.faq__item[open] .faq__q svg { transform: rotate(180deg); color: var(--ink); }
.faq__a { padding: 0 22px 20px; font-size: 15px; }
.faq__a p:last-child { margin-bottom: 0; }

/* ------------------------------ Témoignages ------------------------------ */
.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.testimonial { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px; }
.testimonial__stars { color: var(--brand); font-size: 15px; letter-spacing: 2px; display: block; margin-bottom: 12px; }
.testimonial__text { font-size: 15.5px; }
.testimonial__author { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.testimonial__author img { border-radius: 50%; width: 48px; height: 48px; object-fit: cover; }
.testimonial__author b { color: var(--ink); display: block; font-weight: 600; }
.testimonial__author small { display: block; color: var(--muted); font-size: 12.5px; }

/* ------------------------------ Chiffres clés ------------------------------ */
.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 50px 90px; text-align: center; }
.stat__num { font-family: var(--font-head); font-size: 54px; font-weight: 700; color: var(--ink); line-height: 1.1; display: block; }
.stat__label { text-transform: uppercase; font-size: 13px; letter-spacing: 1px; color: var(--muted); }
.bg-dark .stat__num { color: var(--brand); }
.bg-dark .stat__label { color: rgba(255, 255, 255, .7); }

/* ------------------------------ Logos & galerie ------------------------------ */
.logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 44px 64px; }
.logos img { max-height: 56px; width: auto; transition: filter var(--transition), opacity var(--transition); }
.logos.is-grey img { filter: grayscale(1); opacity: .5; }
.logos.is-grey li:hover img { filter: none; opacity: 1; }

.gallery { display: grid; gap: 22px; }
.gallery.cols-2 { grid-template-columns: repeat(2, 1fr); }
.gallery.cols-3 { grid-template-columns: repeat(3, 1fr); }
.gallery.cols-4 { grid-template-columns: repeat(4, 1fr); }
.gallery__item { margin: 0; }
.gallery__item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }
.gallery__item figcaption { font-size: 13px; margin-top: 8px; }

/* ------------------------------ Tarifs ------------------------------ */
.pricing { display: grid; gap: 26px; align-items: stretch; }
.pricing.cols-2 { grid-template-columns: repeat(2, 1fr); }
.pricing.cols-3 { grid-template-columns: repeat(3, 1fr); }
.pricing.cols-4 { grid-template-columns: repeat(4, 1fr); }
.price-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 26px 30px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.price-card:hover { box-shadow: var(--shadow-card); transform: translateY(-6px); border-color: transparent; }
.price-card.is-featured { border-color: var(--brand); background: linear-gradient(180deg, var(--brand-soft) 0%, var(--white) 45%); }
.price-card.is-featured::before {
  content: attr(data-badge); position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--white); font-family: var(--font-head); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; padding: 6px 14px; border-radius: 99px; white-space: nowrap;
}
.price-card__media { margin-bottom: 18px; }
.price-card__media img { max-height: 140px; width: auto; border-radius: var(--radius-sm); }
.price-card__name { font-family: var(--font-head); font-size: 18px; font-weight: 600; margin-bottom: 14px; }
.price-card__price { margin-bottom: 16px; }
.price-card__prefix { display: block; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.price-card__amount { font-family: var(--font-head); font-size: 40px; font-weight: 700; color: var(--ink); line-height: 1.2; display: block; letter-spacing: -.02em; }
.price-card__amount--2 { font-size: 22px; }
.price-card__line { display: block; width: 44px; height: 4px; border-radius: 4px; background: var(--brand); margin: 0 auto 16px; }
.price-card__text { font-size: 14.5px; flex: 1; }
.price-card__features { list-style: none; margin: 0 0 18px; padding: 0; font-size: 14px; text-align: left; width: 100%; }
.price-card__features li { padding: 5px 0; border-bottom: 1px dashed var(--line); }
.price-card__features li:last-child { border-bottom: 0; }
.price-card__features svg { color: var(--ink); background: var(--brand); border-radius: 50%; padding: 2px; }
.price-card__btn { margin-top: auto; }
.pricing__note { text-align: center; margin-top: 26px; font-size: 13px; color: var(--muted); }

/* ------------------------------ Équipe ------------------------------ */
.team { display: grid; gap: 26px; }
.team.cols-3 { grid-template-columns: repeat(3, 1fr); }
.team.cols-4 { grid-template-columns: repeat(4, 1fr); }
.member { text-align: center; }
.team.style-pricing .member {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px 28px; transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
  display: flex; flex-direction: column;
}
.team.style-pricing .member:hover { box-shadow: var(--shadow-card); transform: translateY(-6px); border-color: transparent; }
.member__media { margin-bottom: 18px; }
.member__media img { width: 100%; max-width: 260px; border-radius: var(--radius-sm); object-fit: cover; aspect-ratio: 1; }
.team.style-team .member__media img { border-radius: 50%; max-width: 200px; }
.member__name { font-family: var(--font-head); font-size: 18px; font-weight: 600; margin-bottom: 2px; }
.member__role { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.member__rates { margin-bottom: 12px; }
.member__rate { display: block; font-family: var(--font-head); font-size: 21px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.member__text { font-size: 14.5px; }
.member__mail { display: inline-flex; color: var(--muted); }
.member__mail:hover { color: var(--ink); }
.team .btn { margin-top: auto; align-self: center; }

/* ------------------------------ Parallax / espace client ------------------------------ */
.parallax {
  position: relative;
  background-image: var(--bg);
  background-size: cover; background-position: center;
  padding: 110px 0;
  color: var(--white);
}
.parallax.is-fixed { background-attachment: fixed; }
.parallax::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, calc(var(--overlay, .55) + .1)) 100%); }
.parallax__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 5fr 7fr; gap: 60px; align-items: center; }
.parallax__title { font-size: 38px; font-weight: 700; color: var(--white); margin: 0 0 6px; }
.parallax__title strong { color: var(--brand); background: none; padding: 0; }
.parallax__desc { color: rgba(255, 255, 255, .8); }
.parallax__list { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 12px; }
.parallax__list li { display: flex; align-items: center; gap: 13px; color: var(--white); font-size: 16px; }

.icon-round {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--brand); color: var(--ink);
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.icon-round--sm { width: 32px; height: 32px; }
a:hover > .icon-round, .contact-card:hover .icon-round, a.contact-map__item:hover .icon-round { background: var(--ink); color: var(--brand); }

/* ------------------------------ Bandeau CTA ------------------------------ */
.band-cta { display: flex; align-items: center; justify-content: space-between; gap: 34px; flex-wrap: wrap; }
.band-cta.is-centered { justify-content: center; text-align: center; }
.band-cta__title { margin: 0; font-size: 32px; }
.bg-yellow .band-cta__title { color: var(--ink); }
.bg-yellow .band-cta__title strong { background: none; padding: 0; }
.band-cta__sub { margin: 6px 0 0; font-size: 18px; color: var(--ink); }
.band-cta__text { margin: 6px 0 0; color: rgba(0, 0, 0, .7); }
.bg-dark .band-cta__sub, .bg-dark .band-cta__text { color: rgba(255, 255, 255, .8); }

/* ------------------------------ Coordonnées ------------------------------ */
.contact-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.contact-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  min-width: 240px; padding: 30px 24px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  transition: box-shadow var(--transition), transform var(--transition);
}
.contact-card:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); }
.contact-card .icon-round { margin-bottom: 10px; }
.contact-card__label { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.contact-card__value { color: var(--ink); font-size: 17px; font-weight: 600; }

.contact-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.contact-list a { display: flex; align-items: center; gap: 13px; }
.contact-list small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.contact-list b { color: var(--ink); font-weight: 600; }

/* ------------------------------ Formulaire de devis ------------------------------ */
.quote-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.quote-split__form { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px; box-shadow: 0 4px 18px rgba(0, 0, 0, .04); }
.quote-split__form h2 { font-size: 26px; }
.quote-single { max-width: 780px; margin: 0 auto; }
.qf-hp { position: absolute; left: -9999px; }
.qf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.qf-field { display: flex; flex-direction: column; }
.qf-field--full { grid-column: 1 / -1; }
.qf-field label { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.qf-field input, .qf-field select, .qf-field textarea {
  font-family: var(--font-body);
  font-size: 15px; color: var(--ink);
  background: var(--white);
  border: 1px solid #d5dbe4; border-radius: var(--radius-sm);
  padding: 12px 15px;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}
.qf-field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%230b0d12' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.qf-field textarea { resize: vertical; min-height: 130px; }
.qf-field input:focus, .qf-field select:focus, .qf-field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(255, 212, 0, .28); }
.qf-field [aria-invalid="true"] { border-color: #e5484d; }
.qf-consent label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 13px; color: var(--text); cursor: pointer; }
.qf-consent input { width: auto; margin-top: 3px; accent-color: var(--ink); }
.qf-actions { display: flex; align-items: center; gap: 18px; margin-top: 24px; flex-wrap: wrap; }
.qf-status { font-size: 14px; }
.form-alert { padding: 13px 18px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: 14.5px; }
.form-alert--success { background: #e6f7ee; color: #1c7d4d; border: 1px solid #b6e8cd; }
.form-alert--error { background: #fdecec; color: #c92a2a; border: 1px solid #f5c2c2; }

.check-list { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 10px; }
.check-list li { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.check-list svg { color: var(--ink); background: var(--brand); border-radius: 50%; padding: 3px; flex-shrink: 0; }

/* ------------------------------ Carte ------------------------------ */
.map-embed { line-height: 0; }

/* ------------------------------ Pages locales ------------------------------ */
.local-intro { display: grid; grid-template-columns: 7fr 4fr; gap: 56px; align-items: start; }
.local-card { background: var(--soft); border-radius: var(--radius); padding: 28px 26px; position: sticky; top: calc(var(--header-h) + 20px); }
.local-card__title { font-family: var(--font-head); font-size: 19px; font-weight: 600; margin-bottom: 18px; }
.local-card__item { display: flex; align-items: center; gap: 13px; padding: 9px 0; }
.local-card__item small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.local-card__item b { color: var(--ink); font-weight: 600; }
.local-card__item .icon-round { width: 44px; height: 44px; }
.local-card__links { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 7px; }
.local-card__links a { color: var(--ink); font-size: 14px; font-weight: 500; }
.local-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.local-siblings__title { font-size: 20px; text-align: center; margin-bottom: 20px; }

/* ------------------------------ Liens réseau (pied de page) ------------------------------ */
.block--local_links { background: var(--soft); border-top: 1px solid var(--line); }
.local-links__title { font-size: 20px; text-align: center; margin-bottom: 22px; }
.local-links__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 22px;
}
.local-links__list a { color: var(--muted); font-size: 13px; line-height: 2; }
.local-links__list a:hover { color: var(--ink); }
.local-links.style-inline .local-links__list + .local-links__list { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 20px; }
.local-links__group { font-size: 15px; text-align: center; margin: 24px 0 10px; font-weight: 600; }

/* ------------------------------ Agences (colonnes pays) ------------------------------ */
.agencies-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.agencies-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.agencies-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.agency { font-style: normal; display: grid; gap: 3px; align-content: start; }
.agency__label { font-family: var(--font-head); font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.agency__line { color: var(--text); font-size: 14.5px; line-height: 1.7; }
.agency__contact { display: inline-flex; align-items: center; gap: 9px; margin-top: 10px; color: var(--ink); font-weight: 500; font-size: 15px; }
.agency__contact:hover { color: var(--brand); }
.agency__flag { font-size: 18px; line-height: 1; display: inline-flex; }
.flag-svg { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.agency__hours { margin-top: 6px; font-size: 13px; }

/* ------------------------------ Annonce ------------------------------ */
.announcement { font-size: 13.5px; }
.announcement--dark { background: var(--dark); color: rgba(255, 255, 255, .85); }
.announcement--yellow { background: var(--brand); color: var(--ink); }
.announcement__inner { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 9px 24px; position: relative; }
.announcement__inner p { margin: 0; }
.announcement a { font-weight: 600; text-decoration: underline; }
.announcement--dark a { color: var(--brand); }
.announcement__close { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: inherit; cursor: pointer; padding: 4px; opacity: .7; }
.announcement__close:hover { opacity: 1; }

/* ------------------------------ Divers ------------------------------ */
.spacer__line { border: 0; border-top: 1px solid var(--line); margin: 0; }

.error-block__code { font-family: var(--font-head); font-size: 110px; font-weight: 700; color: var(--brand); line-height: 1; margin: 0 0 10px; -webkit-text-stroke: 2px var(--ink); }

.quote-float {
  position: fixed; right: 26px; bottom: 26px; z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--white);
  font-family: var(--font-head); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
  padding: 15px 24px; border-radius: 99px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.quote-float svg { color: var(--brand); }
.quote-float:hover { transform: translateY(-3px); background: var(--brand); color: var(--ink); }
.quote-float:hover svg { color: var(--ink); }

.to-top {
  position: fixed; right: 26px; bottom: 100px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--white); color: var(--ink); border: 1px solid var(--line); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition), background var(--transition);
}
body:not(:has(.quote-float)) .to-top { bottom: 26px; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--brand); border-color: var(--brand); }

.toasts { position: fixed; top: 22px; right: 22px; z-index: 300; display: grid; gap: 10px; }
.toast {
  background: var(--ink); color: var(--white);
  padding: 14px 22px; border-radius: var(--radius-sm); font-size: 14px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .25);
  animation: toast-in .3s ease;
}
.toast--success { border-left: 4px solid #2fbf71; }
.toast--error { border-left: 4px solid #e5484d; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

/* ------------------------------ Pied de page ------------------------------ */
.pre-footer { background: var(--soft); }

.site-footer { background: var(--dark); color: rgba(255, 255, 255, .78); }
.footer__top { padding: 84px 0 64px; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 40px; }
.footer__brand img { max-height: 50px; width: auto; height: auto; image-rendering: auto; } /* taille native du logo : pas d'agrandissement flou */
.footer__brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; color: var(--white); }
.footer__about { margin: 22px 0 0; color: rgba(255, 255, 255, .78); font-size: 15px; line-height: 1.75; max-width: 380px; }
.footer__title { font-family: var(--font-head); font-size: 17px; font-weight: 600; color: var(--white); margin: 0 0 20px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer__col a:not(.btn) { color: rgba(255, 255, 255, .78); font-size: 15px; }
.footer__col a:not(.btn):hover { color: var(--brand); }
.footer__col .btn--primary { color: var(--ink); }
.footer__col .btn--primary:hover { color: var(--white); }
.footer__contact li { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .85); }
.footer__contact svg { color: var(--brand); flex-shrink: 0; }
.footer__contact .btn { margin-top: 8px; }

.social-list { list-style: none; margin: 28px 0 0; padding: 0; display: flex; gap: 10px; }
.social-list a {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .1); color: var(--white);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.social-list a:hover { background: var(--brand); color: var(--ink); transform: translateY(-2px); }

.footer__agencies { margin-top: 64px; padding-top: 48px; border-top: 1px solid rgba(255, 255, 255, .1); }
.footer__agencies-title { margin-bottom: 28px; }
.footer__agencies .agency__label { color: var(--white); }
.footer__agencies .agency__line { color: rgba(255, 255, 255, .62); }
.footer__agencies .agency__contact { color: var(--white); }
.footer__agencies .agency__contact:hover { color: var(--brand); }

.footer__bottom { background: rgba(0, 0, 0, .35); border-top: 1px solid rgba(255, 255, 255, .08); padding: 16px 0 14px; }
.footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer__copy { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .6); }
.footer__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; }
.footer__legal a { font-size: 13px; color: rgba(255, 255, 255, .6); }
.footer__legal a:hover { color: var(--brand); }
.footer__text { margin: 0; font-size: 12px; color: rgba(255, 255, 255, .45); width: 100%; }

/* ------------------------------ Coordonnées + carte ------------------------------ */
.block--contact_map { padding-top: 0; padding-bottom: 0; }
.contact-map { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; }
.contact-map.image-right .contact-map__media { order: 2; }
.contact-map__media { background-color: var(--soft); background-image: none; background-size: cover; background-position: center; min-height: 320px; }
.contact-map__content { display: flex; flex-direction: column; justify-content: center; padding: 72px max(24px, calc(100% - var(--container) / 2 + 24px)) 72px 56px; background: var(--white); }
.contact-map__title { font-size: 30px; margin-bottom: 6px; }
.contact-map__sub { margin-bottom: 28px; color: var(--muted); }
.contact-map__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.contact-map__item { display: flex; align-items: center; gap: 16px; color: inherit; }
.contact-map__item .icon-round { width: 54px; height: 54px; }
.contact-map__label { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); line-height: 1.4; }
.contact-map__value { display: block; color: var(--ink); font-size: 16px; font-weight: 600; }
.contact-map__actions { margin: 30px 0 0; }
@media (max-width: 860px) {
  .contact-map { grid-template-columns: 1fr; }
  .contact-map.image-right .contact-map__media { order: 0; }
  .contact-map__content { padding: 50px 24px; }
}

/* ------------------------------ Carte interactive (Leaflet / OpenStreetMap) ------------------------------ */
.contact-map__media { position: relative; overflow: hidden; }
.contact-map__map { position: relative; width: 100%; height: 100%; line-height: 0; }
.contact-map__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.contact-map__leaflet { position: absolute; inset: 0; background: #e6e9ee; z-index: 0; }
.mode-interactive .contact-map__media { min-height: 520px; }
.contact-map__leaflet .leaflet-control-attribution { font-size: 10px; opacity: .75; }
.contact-map__leaflet.is-gray .leaflet-tile-pane { filter: grayscale(1) brightness(1.05) contrast(.9); }
.contact-map__leaflet .leaflet-bar { border: 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); border-radius: 10px; overflow: hidden; }
.contact-map__leaflet .leaflet-bar a { color: var(--ink); }
.ws-pin { background: none; border: 0; }
.ws-pin svg { display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .22)); transition: transform var(--transition); transform-origin: 50% 100%; }
.ws-pin:hover svg, .ws-pin.is-active svg { transform: scale(1.18); }
.ws-pin svg path { fill: var(--brand); stroke: rgba(0, 0, 0, .15); }
.ws-pin svg circle { fill: var(--white); }
.ws-pin.is-active svg path { fill: var(--ink); }
.ws-pin.is-active svg circle { fill: var(--brand); }
.leaflet-tooltip.ws-tip { background: var(--ink); color: var(--white); border: 0; border-radius: 6px; font-family: var(--font-body); font-size: 12px; padding: 6px 10px; box-shadow: none; }
.leaflet-tooltip.ws-tip::before { border-top-color: var(--ink); }

.contact-map__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.contact-map__tab {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); border: 1px solid var(--line); color: var(--ink);
  font-family: var(--font-head); font-size: 13.5px; font-weight: 500; padding: 9px 16px; border-radius: 99px; cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.contact-map__tab:hover { border-color: var(--ink); }
.contact-map__tab.is-active { background: var(--ink); border-color: var(--ink); color: var(--white); }
.contact-map__agency { font-family: var(--font-head); font-size: 20px; font-weight: 600; margin-bottom: 20px; }
.contact-map__panel { animation: cmap-in .3s ease; }
@keyframes cmap-in { from { opacity: 0; transform: translateY(6px); } }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 1240px) {
  .main-nav__item > a { padding: 0 9px; font-size: 12px; }
  .main-nav__item > a::after { left: 9px; right: 9px; }
  .main-nav__item.is-button { display: none; } /* le bouton Devis reste dans le menu mobile et le pied de page */
}

@media (max-width: 1024px) {
  .main-nav { display: none; }
  .burger { display: block; }
  h1, .h1 { font-size: 40px; }
  h2, .h2 { font-size: 32px; }
  .intro-video__title { font-size: 34px; }
  .btn { padding: 0 26px; }
  .icon-boxes.cols-4, .pricing.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .team.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .testimonials { grid-template-columns: repeat(2, 1fr); }
  .agencies-grid, .agencies-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .image-services__inner { padding: 60px 40px; }
}

@media (max-width: 860px) {
  .main-nav { display: none; }
  .burger { display: block; }
  :root { --header-h: 72px; }
  body { font-size: 15.5px; }
  h1, .h1 { font-size: 34px; }
  h2, .h2 { font-size: 28px; }
  .pad-normal { padding-top: 60px; padding-bottom: 60px; }
  .pad-large { padding-top: 80px; padding-bottom: 80px; }
  .page-title { min-height: min(var(--title-h, 320px), 260px); }
  .page-title__inner { padding: 36px 20px; }
  .page-title.has-image, .parallax.is-fixed { background-attachment: scroll; }
  .page-title__subtitle { font-size: 15px; }
  .hero--tall, .hero--medium { min-height: 520px; }
  .hero--short { min-height: 400px; }
  .hero__content { padding: 60px 0; }
  .hero__text { font-size: 16px; }
  .hero .has-mobile { background-image: var(--hero-img-mobile-set, var(--hero-img-mobile, var(--hero-img-set, var(--hero-img)))); }
  .image-services { grid-template-columns: 1fr; }
  .image-services__media { min-height: 280px; }
  .image-services.image-right .image-services__media { order: 0; }
  .image-services__inner { padding: 50px 24px; }
  .image-services__title { font-size: 28px; }
  .intro-video, .image-text, .values.has-image, .local-intro, .local-sections,
  .quote-split, .text-columns { grid-template-columns: 1fr; gap: 36px; }
  .intro-video.image-left .intro-video__media, .image-text.image-right .image-text__media,
  .values.image-left .values__media { order: 0; }
  .intro-video__media::before { right: -10px; bottom: -10px; }
  .two-columns { grid-template-columns: 1fr; gap: 20px; }
  .icon-boxes.cols-2, .icon-boxes.cols-3, .icon-boxes.cols-4, .pricing.cols-2, .pricing.cols-3, .pricing.cols-4,
  .team.cols-3, .team.cols-4, .testimonials, .numbered-list.cols-2, .values__grid,
  .gallery.cols-3, .gallery.cols-4 { grid-template-columns: 1fr; }
  .price-card, .icon-box, .member { min-width: 0; }
  .btn { white-space: normal; }
  .gallery.cols-2 { grid-template-columns: 1fr; }
  .parallax__inner { grid-template-columns: 1fr; }
  .parallax { padding: 72px 0; }
  .step, .step.is-reverse { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .step.is-reverse .step__media { order: 0; }
  .qf-grid { grid-template-columns: 1fr; }
  .quote-split__form { padding: 24px 20px; }
  .band-cta { justify-content: center; text-align: center; }
  .band-cta__title { font-size: 26px; }
  .agencies-grid, .agencies-grid.cols-2 { grid-template-columns: 1fr; text-align: center; }
  .agency__contact { justify-content: center; }
  .footer__top { padding: 60px 0 46px; }
  .footer__grid { grid-template-columns: 1fr; text-align: center; }
  .footer__about { margin-left: auto; margin-right: auto; }
  .social-list, .footer__contact li { justify-content: center; }
  .footer__bottom-inner { justify-content: center; text-align: center; }
  .local-card { position: static; }
  .quote-float span { display: none; }
  .quote-float { padding: 15px; border-radius: 50%; }
  .stats { gap: 34px 44px; }
  .stat__num { font-size: 40px; }
  .mode-interactive .contact-map__media { min-height: 360px; }
  .contact-card { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   Mega-menu, accordéons mobiles et rappels d'identité (refonte 2026)
   ===================================================================== */
.main-nav__item > a svg { margin-left: 2px; opacity: .55; transition: transform var(--transition); }
.main-nav__item.has-children:hover > a svg,
.main-nav__item.is-open > a svg { transform: rotate(180deg); opacity: 1; }
.main-nav__item.has-mega { position: static; }
.main-nav__item.is-button .btn--sm { height: 44px; padding: 0 22px; box-shadow: none; }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .16);
  padding: 34px 0 38px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 50;
}
.mega::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--brand); }
.main-nav__item.has-mega:hover .mega,
.main-nav__item.has-mega:focus-within .mega,
.main-nav__item.has-mega.is-open .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega__inner { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 36px; }
.mega__head {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-head); font-size: 15.5px; font-weight: 600; color: var(--ink);
  margin: 0 0 14px; padding: 0 10px;
}
a.mega__head svg { opacity: .5; transition: transform var(--transition), opacity var(--transition); }
a.mega__head:hover svg { transform: translateX(3px); opacity: 1; }
.mega__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mega__link {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.mega__link:hover { background: var(--soft); }
.mega__icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--accent-bg, var(--brand)); color: var(--accent-ink, var(--ink));
  box-shadow: 0 6px 14px rgba(0, 0, 0, .10);
}
.mega__body { display: block; min-width: 0; }
.mega__body b { display: block; font-family: var(--font-head); font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.mega__body small { display: block; font-size: 13px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.mega__col[data-accent="0"] { --accent-bg: var(--brand);  --accent-ink: var(--ink); }
.mega__col[data-accent="1"] { --accent-bg: #3b82f6; --accent-ink: #fff; }
.mega__col[data-accent="2"] { --accent-bg: #f97316; --accent-ink: #fff; }
.mega__col[data-accent="3"] { --accent-bg: #10b981; --accent-ink: #fff; }

/* Colonnes « Nos agences » */
.mega--agencies .mega__head { font-size: 17px; }
.mega__agency { font-size: 13px; color: var(--muted); line-height: 1.55; margin: -6px 0 14px; padding: 0 10px; }
.mega__agency a { color: var(--ink); font-weight: 600; }
.mega__cities { list-style: none; margin: 0; padding: 0 10px; columns: 2; column-gap: 16px; }
.mega__cities li { break-inside: avoid; }
.mega__cities a { display: block; padding: 4px 0; font-size: 14px; color: var(--text); }
.mega__cities a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.mega__more { display: inline-flex; align-items: center; gap: 6px; margin: 10px 10px 0; font-family: var(--font-head); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.mega__more svg { transition: transform var(--transition); }
.mega__more:hover svg { transform: translateX(3px); }

/* Menu mobile : accordéons */
.mm-row { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.mm-row > a { flex: 1; display: block; padding: 14px 4px; font-family: var(--font-head); font-size: 15px; font-weight: 500; color: var(--ink); }
.mm-item.is-button .mm-row > a { color: var(--ink); }
.mm-toggle { background: none; border: 0; padding: 10px; color: var(--ink); cursor: pointer; display: inline-flex; transition: transform var(--transition); }
.mm-toggle[aria-expanded="true"] { transform: rotate(180deg); }
.mm-panel { padding: 4px 0 10px 6px; border-bottom: 1px solid var(--line); }
.mm-group { display: flex; align-items: center; gap: 6px; font-family: var(--font-head); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 12px 0 2px; }
a.mm-group:hover { color: var(--ink); }
.mm-panel ul { list-style: none; margin: 0; padding: 0; }
.mm-panel li a { display: block; padding: 7px 4px; font-size: 14.5px; color: var(--ink); }
.mm-panel .mm-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

/* Rappels d'identité : barre jaune avant les titres de section */
.section-head h2::before, .image-text__title::before, .image-services__title::before,
.two-columns__title::before, .contact-map__title::before, .quote-split__side h2::before,
.intro-video__title::before, h2.parallax__title::before {
  content: ''; display: block; width: 44px; height: 5px; border-radius: 5px;
  background: var(--brand); margin-bottom: 16px;
}
.section-head.align-center h2::before, .align-center .section-head h2::before { margin-left: auto; margin-right: auto; }
.bg-map { background: var(--soft); }
.bg-map::before { opacity: .05; }
.block--local_links { padding-top: 48px; padding-bottom: 48px; }
.pre-footer .block--local_links { border-top: 1px solid var(--line); }

@media (max-width: 1024px) {
  .mega__inner { gap: 22px; }
  .mega__cities { columns: 1; }
}

/* Mega-menu « Nos agences » : au-delà de 4 pays, une seule colonne de villes par pays */
.mega--agencies[style*="--cols:5"] .mega__cities,
.mega--agencies[style*="--cols:6"] .mega__cities,
.mega--agencies[style*="--cols:7"] .mega__cities { columns: 1; }
.mega--agencies[style*="--cols:6"] .mega__inner,
.mega--agencies[style*="--cols:7"] .mega__inner { gap: 24px; }

/* ------------------------------ Diaporama ------------------------------ */
.slideshow { position: relative; overflow: hidden; background: var(--dark); }
.slideshow__track { display: flex; transition: transform .75s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
.slideshow .slide { flex: 0 0 100%; min-width: 100%; }
.slideshow.hero--tall .slide { min-height: 640px; }
.slideshow.hero--medium .slide { min-height: 560px; }
.slideshow.hero--short .slide { min-height: 440px; }
.slideshow.hero--full .slide { min-height: calc(100vh - var(--header-h)); }
.slideshow .slide::after { display: none; }
.slideshow::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--brand); z-index: 2; }
.slideshow .hero__content { opacity: 0; transform: translateY(18px); transition: opacity .6s ease .35s, transform .6s ease .35s; }
.slideshow .slide.is-active .hero__content { opacity: 1; transform: none; }
.slideshow .slide.has-image { background-size: cover; background-position: center; background-repeat: no-repeat; }
.slideshow.hero--full .slide { min-height: min(calc(100svh - var(--header-h) - 38px), 860px); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.btn--light { background: transparent; border-color: rgba(255, 255, 255, .7); color: var(--white); box-shadow: none; }
.btn--light:hover { border-color: var(--brand); background: var(--brand); color: var(--ink); }

.slideshow__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: var(--white);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.slideshow__arrow:hover { background: var(--brand); color: var(--ink); }
.slideshow__arrow--prev { left: 22px; }
.slideshow__arrow--next { right: 22px; }
.slideshow__dots { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.slideshow__dot { width: 32px; height: 32px; border-radius: 99px; border: 0; padding: 8px; background-clip: content-box; cursor: pointer; background: rgba(255, 255, 255, .45); transition: width var(--transition), background var(--transition); }
.slideshow__dot.is-active { width: 52px; background: var(--brand); }
@media (max-width: 860px) {
  .slideshow.hero--tall .slide, .slideshow.hero--medium .slide { min-height: 520px; }
  .slideshow__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .slideshow .hero__content { opacity: 1; transform: none; }
}

/* ------------------------------ WhatsApp flottant ------------------------------ */
.wa-float {
  position: fixed; right: 26px; bottom: 26px; z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  background: #25d366; color: var(--white);
  font-family: var(--font-head); font-weight: 600; font-size: 14px;
  padding: 13px 22px 13px 16px; border-radius: 99px;
  box-shadow: 0 12px 34px rgba(37, 211, 102, .4);
  transition: transform var(--transition), box-shadow var(--transition);
}
.wa-float:hover { transform: translateY(-3px); color: var(--white); box-shadow: 0 16px 40px rgba(37, 211, 102, .5); }
body:has(.wa-float) .to-top { bottom: 92px; }
@media (max-width: 860px) {
  .wa-float span { display: none; }
  .wa-float { padding: 14px; border-radius: 50%; }
}
.qf-grid--compact .qf-field { grid-column: 1 / -1; }
.qf-grid--compact { gap: 14px; }
@media (min-width: 640px) { .qf-grid--compact .qf-field:nth-child(2), .qf-grid--compact .qf-field:nth-child(3) { grid-column: auto; } }

/* ------------------------------ Sélecteur de langue ------------------------------ */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 99px; background: var(--white); flex-shrink: 0; }
.lang-switch__item { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; font-family: var(--font-head); font-size: 12px; font-weight: 600; color: var(--muted); transition: background var(--transition), color var(--transition); }
.lang-switch__item:hover { color: var(--ink); }
.lang-switch__item.is-active { background: var(--ink); color: var(--white); }
.lang-switch__item .flag-svg { width: 18px; height: 12px; }
.lang-switch--mobile { display: flex; width: 100%; justify-content: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.lang-switch--mobile .lang-switch__item { padding: 12px 16px; font-size: 14px; font-weight: 600; border: 1px solid var(--line); background: var(--white); color: var(--ink); border-radius: 8px; transition: all var(--transition); }
.lang-switch--mobile .lang-switch__item:hover { background: var(--brand-soft); border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, .08); }
.lang-switch--mobile .lang-switch__item.is-active { background: var(--ink); color: var(--white); border-color: var(--ink); box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }
.lang-switch--mobile .lang-switch__item .flag-svg { width: 24px; height: 18px; margin-right: 4px; }
@media (max-width: 1240px) { .lang-switch__item span:last-child { display: none; } .lang-switch__item { padding: 6px 8px; } }
@media (max-width: 1024px) { .header__inner .lang-switch { margin-left: auto; margin-right: 6px; } }

/* Amélioration du sélecteur de langue sur mobile (<640px) */
@media (max-width: 1240px) {
  /* Maintient le texte visible sur mobile pour lang-switch--mobile */
  .lang-switch--mobile .lang-switch__item span:last-child { display: inline; }
}

@media (max-width: 640px) {
  .lang-switch--mobile .lang-switch__item { padding: 14px 18px; font-size: 15px; gap: 8px; }
  .lang-switch--mobile .lang-switch__item .flag-svg { width: 28px; height: 21px; }
  .lang-switch--mobile { gap: 12px; }
  .lang-switch--mobile .lang-switch__item span:last-child { display: inline; }
}

/* En-tête à sept onglets : version compacte sous 1900 px, bouton Devis masqué sous 1300 px, burger sous 1200 px */
.header__inner { max-width: var(--container); }
@media (max-width: 1900px) {
  .header__logo img { max-height: 44px; }
  .main-nav__item > a { padding: 0 8px; font-size: 12px; letter-spacing: .02em; }
  .main-nav__item > a::after { left: 8px; right: 8px; }
  .main-nav__item > a svg { width: 12px; height: 12px; margin-left: 0; }
  .main-nav__item.is-button .btn--sm { padding: 0 14px; font-size: 11.5px; height: 40px; }
  .main-nav__item.is-button { margin-left: 6px; }
  .lang-switch__item span:last-child { display: none; }
  .lang-switch__item { padding: 6px 7px; }
}
@media (max-width: 1300px) { .main-nav__item.is-button { display: none; } }
@media (max-width: 1200px) { .main-nav { display: none; } .burger { display: block; } .header__inner .lang-switch { margin-left: auto; margin-right: 6px; } }

/* ------------------------------ Réalisations / portfolio ------------------------------ */
.portfolio__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -12px 0 34px; }
.portfolio__filter {
  background: var(--white); border: 1px solid var(--line); color: var(--ink);
  font-family: var(--font-head); font-size: 13.5px; font-weight: 500; padding: 9px 18px; border-radius: 99px; cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.portfolio__filter:hover { border-color: var(--ink); }
.portfolio__filter.is-active { background: var(--ink); border-color: var(--ink); color: var(--white); }
.portfolio__grid { display: grid; gap: 28px; }
.portfolio__grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.portfolio__grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.portfolio__grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.portfolio__item { margin: 0; display: flex; flex-direction: column; transition: opacity .3s ease, transform .3s ease; }
.portfolio__item.is-hidden { display: none; }
.portfolio__media {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius);
  background: var(--soft); border: 1px solid var(--line);
  transition: box-shadow var(--transition), transform var(--transition);
}
.portfolio__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s ease; }
.portfolio__media:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); }
.portfolio__media:hover img { transform: scale(1.04); }
.portfolio__zoom {
  position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--brand); color: var(--ink); display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(6px); transition: opacity var(--transition), transform var(--transition);
}
.portfolio__media:hover .portfolio__zoom { opacity: 1; transform: none; }
.portfolio__caption { padding: 14px 4px 0; }
.portfolio__cat { display: inline-block; font-family: var(--font-head); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 4px; }
.portfolio__title { display: block; font-family: var(--font-head); font-size: 16px; font-weight: 600; color: var(--ink); }
.portfolio__caption small { display: block; font-size: 13.5px; color: var(--text); margin-top: 2px; }

.lightbox { position: fixed; inset: 0; z-index: 400; background: rgba(0, 0, 0, .92); display: flex; align-items: center; justify-content: center; padding: 40px; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img { max-width: 100%; max-height: calc(100vh - 120px); border-radius: var(--radius-sm); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.lightbox__caption { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; color: rgba(255, 255, 255, .85); font-family: var(--font-head); font-size: 14px; }
.lightbox__close, .lightbox__prev, .lightbox__next { position: absolute; background: rgba(255, 255, 255, .12); color: var(--white); border: 0; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition); }
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: var(--brand); color: var(--ink); }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }
@media (max-width: 1024px) { .portfolio__grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  .portfolio__grid.cols-2, .portfolio__grid.cols-3, .portfolio__grid.cols-4 { grid-template-columns: 1fr; }
  .lightbox { padding: 16px; }
  .lightbox__prev, .lightbox__next { display: none; }
}

/* ------------------------------ Barre supérieure ------------------------------ */
.topbar { background: var(--ink); color: rgba(255, 255, 255, .8); font-size: 13px; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; max-width: var(--container); }
.topbar__left, .topbar__right { display: flex; align-items: center; gap: 22px; }
.topbar__left a, .topbar__contact { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, .8); }
.topbar__left a svg, .topbar__contact svg { color: var(--brand); }
.topbar__left a:hover, .topbar__contact:hover { color: var(--white); }
.topbar__contact { font-family: var(--font-head); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; font-size: 12px; }
.topbar .lang-switch { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .15); }
.topbar .lang-switch__item { color: rgba(255, 255, 255, .7); padding: 4px 9px; font-size: 11.5px; }
.topbar .lang-switch__item:hover { color: var(--white); }
.topbar .lang-switch__item.is-active { background: var(--brand); color: var(--ink); }
.topbar .lang-switch__item span:last-child { display: inline; }
@media (max-width: 1200px) { .topbar { display: none; } }

/* Ligne principale allégée : plus de sélecteur de langue, le bouton Devis reste visible plus longtemps */
.header__inner { max-width: var(--container); }
@media (max-width: 1900px) { .main-nav__item.is-button { display: block; } }
@media (max-width: 1400px) { .main-nav__item.is-button { display: none; } }

/* Badge note Google */
.google-badge { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin: -10px auto 34px; padding: 14px 22px; max-width: 640px; background: var(--white); border: 1px solid var(--line); border-radius: 99px; box-shadow: 0 6px 20px rgba(0, 0, 0, .05); }
.google-badge__logo { display: inline-flex; }
.google-badge__score { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--ink); }
.google-badge__score small { font-size: 13px; color: var(--muted); font-weight: 500; margin-left: 2px; }
.google-badge__stars { color: #f5b301; font-size: 18px; letter-spacing: 2px; }
.google-badge__text { font-size: 13.5px; color: var(--muted); }
.google-badge__link { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-head); font-size: 13px; font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--brand); }
.testimonials:empty { display: none; }
/* Le conteneur du diaporama ne doit pas hériter des hauteurs du hero : seules les slides comptent */
.slideshow.hero--full, .slideshow.hero--tall, .slideshow.hero--medium, .slideshow.hero--short { min-height: 0; }

/* ------------------------------ Tableau comparatif ------------------------------ */
.table-wrap { overflow-x: auto; margin: 28px 0; border-radius: var(--radius); border: 1px solid var(--line); }
.table-compare { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
.table-compare th, .table-compare td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.table-compare thead th { background: var(--ink); color: var(--white); font-family: var(--font-head); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.table-compare tbody tr:nth-child(even) { background: var(--soft); }
.table-compare tbody tr:last-child td { border-bottom: 0; }
.table-compare td strong { color: var(--ink); white-space: nowrap; }
.table-compare td a { border-bottom-width: 1px; }

/* ------------------------------ Photos dans les contenus ------------------------------ */
.prose-figure { margin: 8px 0 24px 40px; float: right; width: min(42%, 420px); }
.prose-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); filter: grayscale(1); box-shadow: 0 18px 40px rgba(0, 0, 0, .14); }
.prose-figure figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.prose-figure--left { float: left; margin: 8px 40px 24px 0; }
.prose::after { content: ""; display: table; clear: both; }
@media (max-width: 720px) {
  .prose-figure, .prose-figure--left { float: none; width: 100%; margin: 20px 0 28px; }
}

/* ------------------------------ Blog : cartes d'articles ------------------------------ */
.posts { display: grid; gap: 32px; }
.posts.cols-3 { grid-template-columns: repeat(3, 1fr); }
.posts.cols-2 { grid-template-columns: repeat(2, 1fr); }
.post-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.post-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(0, 0, 0, .12); }
.post-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--soft); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform .5s ease; }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__body { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 28px; flex: 1; }
.post-card__meta { font-size: 13px; color: var(--muted); margin: 0; }
.post-card__title { font-size: 20px; line-height: 1.3; margin: 0; }
.post-card__title a { color: var(--ink); }
.post-card__title a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 3px; }
.post-card__excerpt { margin: 0; color: var(--muted); font-size: 15px; flex: 1; }
.post-card__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); margin-top: 6px; }
.post-card__more:hover { color: var(--ink); gap: 10px; }
.posts__all { margin-top: 44px; }
@media (max-width: 960px) { .posts.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .posts.cols-3, .posts.cols-2 { grid-template-columns: 1fr; } }

/* ------------------------------ Blog : article ------------------------------ */
.article { padding: 56px 0 72px; }
.article__wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start; }
.article__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 28px; font-size: 14px; color: var(--muted); }
.article__meta span { display: inline-flex; align-items: center; gap: 7px; }
.article__meta svg { color: var(--brand); }
.article__cover { margin: 0 0 36px; }
.article__cover img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: var(--radius); filter: grayscale(1); }
.article__content { font-size: 17px; }
.article__content h2 { margin-top: 44px; font-size: 27px; }
.article__content h3 { margin-top: 30px; font-size: 20px; }
.article__content .note { background: var(--brand-soft); border-left: 4px solid var(--brand); padding: 18px 22px; border-radius: 0 var(--radius) var(--radius) 0; margin: 28px 0; }
.article__author { display: flex; gap: 20px; align-items: center; margin-top: 48px; padding: 26px 28px; background: var(--soft); border-radius: var(--radius); }
.article__author img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.article__author-name { margin: 0 0 6px; }
.article__author-text { margin: 0; color: var(--muted); font-size: 15px; }
.article__side { position: sticky; top: calc(var(--header-h, 90px) + 24px); display: grid; gap: 24px; }
.article__card { padding: 28px; border-radius: var(--radius); background: var(--ink); color: var(--white); display: grid; gap: 14px; }
.article__card p { margin: 0; color: rgba(255, 255, 255, .75); }
.article__card .btn { justify-content: center; }
.article__card .btn--outline { color: var(--white); border-color: rgba(255, 255, 255, .35); }
.article__card .btn--outline:hover { background: var(--white); color: var(--ink); }
.article__card-title { font-size: 20px; margin: 0; color: var(--white); }
.article__card--list { background: var(--white); color: var(--ink); border: 1px solid var(--line); }
.article__card--list .article__card-title { color: var(--ink); }
.article__card--list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.article__card--list li { padding-left: 16px; position: relative; }
.article__card--list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.article__card--list a { color: var(--ink); font-weight: 500; }
@media (max-width: 960px) {
  .article__wrap { grid-template-columns: 1fr; gap: 40px; }
  .article__side { position: static; }
}

/* ------------------------- Cartes metier -------------------------
   Grille de cartes cliquables vers les pages metier. La zone visuelle
   garde la meme hauteur qu'il y ait une image ou une icone, pour que
   la grille reste alignee meme quand toutes les pages n'ont pas de
   photo. */
.sector-cards { display: grid; gap: 24px; }
.sector-cards.cols-2 { grid-template-columns: repeat(2, 1fr); }
.sector-cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
.sector-cards.cols-4 { grid-template-columns: repeat(4, 1fr); }

.sector-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.sector-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--brand);
  color: inherit;
}

.sector-card__media {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 168px; background: var(--brand-soft); overflow: hidden;
}
.sector-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.sector-card:hover .sector-card__media img { transform: scale(1.05); }
.sector-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--white); color: var(--ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
}
.sector-card__tag {
  position: absolute; top: 12px; left: 12px;
  background: var(--ink); color: var(--white);
  font-family: var(--font-head); font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 40px;
}
.sector-card__media.has-image .sector-card__tag { background: var(--brand); color: var(--ink); }

.sector-card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.sector-card__title { font-family: var(--font-head); font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.sector-card__text { font-size: 14.5px; line-height: 1.55; color: var(--muted); flex: 1; }
.sector-card__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-size: 13px; font-weight: 600;
  color: var(--ink); margin-top: 4px;
}
.sector-card__link svg { transition: transform var(--transition); }
.sector-card:hover .sector-card__link svg { transform: translateX(4px); }

@media (max-width: 1024px) {
  .sector-cards.cols-3, .sector-cards.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .sector-cards, .sector-cards.cols-2, .sector-cards.cols-3, .sector-cards.cols-4 { grid-template-columns: 1fr; }
  .sector-card__media { height: 150px; }
}

/* ------------------------------ Style photo : noir et blanc partout (mockups du portfolio exclus) ------------------------------ */
.image-text__media img, .values__media img, .step__media img, .team .member__media img[src*="/photos/"] { filter: grayscale(1); }
/* Les realisations clients gardent leurs couleurs : c'est le travail
   qu'on montre, le passer en noir et blanc le vide de son interet. */
.image-text__media img[src*="/mockups/"],
.image-text__media img[src*="/portfolio/"],
.values__media img[src*="/mockups/"],
.sector-card__media img { filter: none; }
.step__media img { width: 150px; height: 150px; object-fit: cover; }
.image-services__cover { filter: grayscale(1); }

/* ------------------------------ Revue pre-lancement ------------------------------ */
.portfolio__item { cursor: pointer; }
.post-card__more, .google-badge__link { padding: 6px 0; }
@media (max-width: 768px) {
  body { font-size: 16px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ------------------------------ Banniere : titre a gauche, photo nette a droite ------------------------------ */
.page-title.is-split { text-align: left; }
.page-title.is-split .page-title__inner { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: center; max-width: var(--container); width: 100%; padding: 36px 24px; }
.page-title.is-split .breadcrumb ol { display: inline-flex; }
.page-title.is-split .page-title__subtitle { margin-left: 0; }
.page-title__photo { margin: 0; }
.page-title__photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; border-radius: var(--radius); filter: grayscale(1); box-shadow: 0 24px 50px rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .12); }
@media (max-width: 960px) {
  .page-title.is-split .page-title__inner { grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; }
}
@media (max-width: 720px) {
  .page-title.is-split { text-align: center; }
  .page-title.is-split .page-title__inner { grid-template-columns: 1fr; }
  .page-title.is-split .page-title__subtitle { margin-left: auto; }
  .page-title__photo { display: none; }
}
.image-services__item a, .image-services__list a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__col li a, .footer__legal a { display: inline-block; padding: 3px 0; }

/* ------------------------------ Boutons : jaune unique, texte toujours lisible ------------------------------ */
.btn, .btn:link, .btn:visited { text-decoration: none; }
.btn--primary:focus-visible, .btn--primary:active { color: var(--ink); }
.btn--light:focus-visible, .btn--light:active { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.btn--dark:hover, .btn--dark:focus-visible { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.btn--outline:focus-visible { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.bg-yellow .btn--primary, .band-cta--yellow .btn--primary { background: var(--ink); border-color: var(--ink); color: var(--white); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.bg-yellow .btn--primary:hover, .band-cta--yellow .btn--primary:hover { background: var(--white); border-color: var(--white); color: var(--ink); }

/* Banniere : photo uniquement en fond flou, titre centre */
.page-title.is-split { text-align: center; }
.page-title.is-split .page-title__inner { display: block; }
.page-title__photo { display: none; }

/* Boutons : jamais plus larges que leur colonne, texte qui passe a la ligne si besoin */
.btn { max-width: 100%; }
.footer__col .btn, .article__card .btn, .price-card .btn, .quote-split__form .btn {
  white-space: normal; height: auto; min-height: 46px; padding: 12px 22px; line-height: 1.25;
}
.footer__col .btn { width: 100%; }

/* ------------------------------ Liens par ville : repli natif (details/summary) ------------------------------ */
.local-links__fold { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.local-links__summary {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 8px; cursor: pointer; list-style: none;
  font-family: var(--font-head); font-size: 15px; font-weight: 600; color: var(--ink);
  text-transform: uppercase; letter-spacing: .04em;
  transition: color var(--transition);
}
.local-links__summary::-webkit-details-marker { display: none; }
.local-links__summary:hover { color: var(--brand-dark, var(--brand)); }
.local-links__summary svg { transition: transform var(--transition); color: var(--brand-dark, var(--brand)); }
.local-links__fold[open] .local-links__summary svg { transform: rotate(180deg); }
.local-links__fold[open] .local-links { padding-bottom: 22px; }
.local-links__fold .local-links { padding-top: 4px; }
@media (prefers-reduced-motion: reduce) { .local-links__summary svg { transition: none; } }

/* ------------------------------ Preuves (affichees tant qu'aucun avis n'est saisi) ------------------------------ */
.proof-list { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.proof { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 22px; }
.proof__icon { width: 52px; height: 52px; }
.proof__value { font-family: var(--font-head); font-size: 24px; text-wrap: balance; font-weight: 700; color: var(--ink); line-height: 1.1; }
.proof__label { font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.proof-note { margin: 22px 0 0; text-align: center; font-size: 13.5px; color: var(--muted); }
@media (max-width: 900px) { .proof-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .proof-list { grid-template-columns: 1fr; } }

/* =====================================================================
   PASSE DE DESIGN — 2026
   Le gabarit de depart empilait 14 sections identiques : meme marge de
   88 px, meme alternance blanc / gris, meme titre centre. Correct, mais
   plat. Cette couche retravaille le rythme, la typographie et le relief,
   sans toucher au balisage : elle profite donc aux 87 pages d'un coup.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/*  1. ECHELLE TYPOGRAPHIQUE                                           */
/*  Defaut constate a l'audit : le H1 sortait a 44 px et les H2 de       */
/*  section a 45 px. La hierarchie n'etait pas plate, elle etait         */
/*  inversee. Nouvelle echelle, avec un rapport constant de 1,5 entre    */
/*  deux niveaux et un ecart franc entre le titre de page et les titres  */
/*  de section. Archivo porte les titres, Montserrat le texte.           */
/* ------------------------------------------------------------------ */
:root {
  --step--1: clamp(13px, .3vw + 12.2px, 14.5px);   /* mentions, legendes */
  --step-0:  clamp(16px, .2vw + 15.4px, 17px);     /* texte courant */
  --step-1:  clamp(18px, .5vw + 16.4px, 21px);     /* chapo, h4 */
  --step-2:  clamp(21px, 1vw + 18px, 27px);        /* h3 */
  --step-3:  clamp(27px, 1.5vw + 20px, 42px);      /* h2 de section */
  --step-4:  clamp(40px, 3.6vw + 28px, 70px);      /* h1 de page */
  --step-5:  clamp(34px, 2.2vw + 24px, 56px);      /* accroche d'accueil */
  --measure: 66ch;
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--text);
}
.text-muted, .section-head__sub, .icon-box__text, .sector-card__text { color: var(--muted); }

/* Les titres passent en Archivo : chasse plus etroite que Montserrat,
   le contraste de largeur cree la hierarchie sans empiler les graisses. */
h1, .h1 { font-family: var(--font-head); font-size: var(--step-4); line-height: 1.02; letter-spacing: -.035em; font-weight: 700; }
h2, .h2 { font-family: var(--font-head); font-size: var(--step-3); line-height: 1.08; letter-spacing: -.03em;  font-weight: 700; }
h3, .h3 { font-family: var(--font-head); font-size: var(--step-2); line-height: 1.22; letter-spacing: -.02em;  font-weight: 600; }
h4, .h4 { font-family: var(--font-head); font-size: var(--step-1); line-height: 1.3;  letter-spacing: -.01em;  font-weight: 600; }
h1, h2, h3, h4 { text-wrap: balance; }

/* Le mot mis en avant : un trait jaune sous la ligne, pas un aplat qui
   noie le mot. Le jaune souligne, il ne remplit pas. */
h1 strong, h2 strong, h3 strong, .hero__title strong {
  font-weight: inherit;
  background-image: linear-gradient(var(--brand), var(--brand));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% .16em;
  padding-inline: .02em;
}
/* Sur fond sombre le trait ne se voit pas : le mot passe en jaune plein. */
.bg-dark h1 strong, .bg-dark h2 strong, .bg-dark h3 strong,
.hero--light .hero__title strong {
  background: none;
  color: var(--brand);
}

p { max-width: var(--measure); }
.align-center p, .section-head.align-center p { margin-inline: auto; }

/*  2. RYTHME DES SECTIONS                                             */
/*  Trois respirations au lieu d'une seule, et fluides : la page cesse  */
/*  de battre la mesure a l'identique du haut jusqu'en bas.             */
/* ------------------------------------------------------------------ */
.block { padding-block: clamp(64px, 7.5vw, 116px); }
.block.pad-small  { padding-block: clamp(40px, 4.5vw, 68px); }
.block.pad-large  { padding-block: clamp(88px, 11vw, 168px); }
.block.pad-none   { padding-block: 0; }

/* Deux sections de meme fond qui se suivent : on supprime la couture */
.block.bg-white  + .block.bg-white,
.block.bg-soft   + .block.bg-soft   { padding-top: 0; }

/* Fond sombre : un vrai noir profond avec une amorce de degrade,
   plutot qu'un aplat qui fait « rectangle gris fonce ». */
.bg-dark {
  background: radial-gradient(120% 140% at 12% 0%, #26262a 0%, #1a1a1a 55%, #121212 100%);
  color: rgba(255, 255, 255, .82);
}
.bg-dark h2, .bg-dark h3, .bg-dark .section-head__sub { color: var(--white); }
.bg-dark .section-head__sub { color: rgba(255, 255, 255, .68); }

/* Fond jaune : on fonce l'encre pour tenir le contraste */
.bg-yellow { color: var(--ink); }
.bg-yellow h2, .bg-yellow h3 { color: var(--ink); }
.bg-yellow h2 strong { background: none; box-shadow: inset 0 -.22em 0 rgba(0, 0, 0, .14); }

/* ------------------------------------------------------------------ */
/*  3. EN-TETE DE SECTION                                              */
/*  Ajout d'un sur-titre, et surtout d'une variante asymetrique :       */
/*  titre a gauche, chapeau a droite. C'est ce decalage qui casse la    */
/*  monotonie du « tout centre ».                                      */
/* ------------------------------------------------------------------ */
.section-head { margin-bottom: clamp(36px, 4vw, 60px); max-width: none; }

.section-head__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-head); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  margin-bottom: 16px;
}
.section-head__eyebrow::before {
  content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--brand);
}
.bg-dark .section-head__eyebrow { color: var(--brand); }

.section-head__sub { font-size: var(--step-1); line-height: 1.55; margin-top: 14px; max-width: 60ch; }

/* Variante asymetrique, appliquee par defaut aux sections non centrees */
.section-head:not(.align-center) {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 20px 56px; align-items: end;
}
.section-head:not(.align-center) > h2,
.section-head:not(.align-center) > h3 { grid-column: 1; margin-bottom: 0; }
.section-head:not(.align-center) .section-head__eyebrow { grid-column: 1 / -1; }
.section-head:not(.align-center) .section-head__sub,
.section-head:not(.align-center) .section-head__intro { grid-column: 2; margin-top: 0; }
@media (max-width: 860px) {
  .section-head:not(.align-center) { grid-template-columns: 1fr; gap: 16px; }
  .section-head:not(.align-center) .section-head__sub,
  .section-head:not(.align-center) .section-head__intro { grid-column: 1; }
}

.section-head.align-center { max-width: 780px; }
/* Le trait jaune sous les titres centres : plus fin, mieux cale */
.section-head.align-center h2::before,
.align-center .section-head h2::before { width: 52px; height: 4px; border-radius: 2px; margin-bottom: 22px; }

.section-actions { margin-top: clamp(36px, 4vw, 56px); }

/* ------------------------------------------------------------------ */
/*  4. BANNIERE DE PAGE                                                */
/*  Etait un rectangle sombre avec un titre centre — le motif le plus   */
/*  interchangeable du web. Passage en composition editoriale : titre   */
/*  a gauche, tres grand, fil d'Ariane au-dessus, et un aplat jaune qui */
/*  mord dans le bas du bandeau pour ancrer la marque.                  */
/* ------------------------------------------------------------------ */
.page-title {
  min-height: var(--title-h, 400px);
  justify-content: flex-start;
  text-align: left;
  padding-block: clamp(72px, 9vw, 128px);
}
.page-title .container { position: relative; z-index: 2; width: 100%; }

/* .page-title__inner porte DEJA la classe .container (1180 px). Lui donner
   un max-width de 900 px en faisait une boite plus etroite, centree : le
   titre demarrait 140 px plus a droite que le contenu de la page. Le
   conteneur garde donc la largeur de grille, et c'est le TEXTE qui est
   limite en largeur de lecture — aligne, lui, sur la meme colonne. */
.page-title__inner { max-width: var(--container); }
.page-title__text { max-width: 900px; }

.page-title.no-image {
  background: radial-gradient(115% 150% at 8% 0%, #2a2a2e 0%, #1a1a1a 58%, #101010 100%);
}

/* Voile assombrissant : un degrade oblique lit mieux qu'un noir uniforme */
.page-title.has-image::before {
  background: linear-gradient(100deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.72) 42%, rgba(0,0,0,.38) 100%);
}

/* Le trait jaune du bas devient une barre franche, alignee sur la grille */
.page-title::after {
  height: 5px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand) 38%, rgba(255,206,14,.18) 38%);
}

.page-title__heading {
  font-size: clamp(32px, 4.6vw, 62px);
  line-height: 1.03; letter-spacing: -.035em; font-weight: 800;
  color: var(--white); margin: 0;
  text-wrap: balance;
}
.page-title__subtitle {
  font-size: var(--step-1); line-height: 1.55;
  color: rgba(255, 255, 255, .76);
  margin: 20px 0 0; max-width: 62ch;
}

.page-title .breadcrumb { margin: 0 0 24px; justify-content: flex-start; }
.page-title .breadcrumb ol { justify-content: flex-start; }
.page-title .breadcrumb, .page-title .breadcrumb a { color: rgba(255, 255, 255, .6); font-size: 13px; }
.page-title .breadcrumb a:hover { color: var(--brand); }
.page-title .breadcrumb [aria-current="page"] { color: var(--white); }

/* Pages locales et metier : on garde le format resserre */
.page-title.is-split { text-align: left; }

@media (max-width: 700px) {
  .page-title { min-height: 320px; }
  .page-title__subtitle { font-size: 16px; }
}

/* ------------------------------------------------------------------ */
/*  5. CARTES ET COMPOSANTS                                            */
/*  Les cartes etaient des rectangles a bordure de 1 px : aucun relief, */
/*  aucune reaction. On ajoute de la profondeur, une arete jaune qui se */
/*  revele au survol, et un mouvement court.                            */
/* ------------------------------------------------------------------ */
.icon-box {
  position: relative;
  border-radius: 18px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.icon-boxes .icon-box.style-card,
.icon-box--card {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 30px 28px 32px;
  overflow: hidden;
}
.icon-box::after {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: var(--brand); transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.icon-box:hover::after { transform: scaleX(1); }
.icon-box:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(0, 0, 0, .09); border-color: transparent; }

.icon-box__icon {
  width: 62px; height: 62px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--ink);
  margin-bottom: 20px;
  transition: background var(--transition), transform var(--transition);
}
.icon-box:hover .icon-box__icon { background: var(--brand); transform: rotate(-6deg) scale(1.06); }
.icon-box__title { font-size: var(--step-1); margin-bottom: 8px; }
.icon-box__text { font-size: var(--step--1); line-height: 1.62; }

/* Liste numerotee : le numero devient un repere graphique fort */
.numbered-list__item { position: relative; }
.numbered-list__num {
  font-family: var(--font-head); font-weight: 800;
  background: var(--brand); color: var(--ink);
  box-shadow: 0 6px 18px rgba(255, 206, 14, .35);
}
.numbered-list__title { font-size: var(--step-1); letter-spacing: -.015em; }

/* FAQ : plus d'air, un chevron qui pivote, une ligne jaune a l'ouverture */
.faq__item {
  border-radius: 16px; border: 1px solid var(--line); background: var(--white);
  margin-bottom: 12px; overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.faq__item[open] { border-color: transparent; box-shadow: 0 14px 38px rgba(0, 0, 0, .08); }
.faq__q { font-size: var(--step-0); font-weight: 600; padding: 22px 26px; }
.faq__a { padding: 0 26px 24px; border-top: 2px solid var(--brand); padding-top: 20px; }

/* Grille tarifaire : la formule mise en avant se detache vraiment */
.price-card { border-radius: 20px; transition: transform var(--transition), box-shadow var(--transition); }
.price-card:hover { transform: translateY(-6px); box-shadow: 0 22px 54px rgba(0, 0, 0, .11); }
.price-card.is-featured { box-shadow: 0 26px 60px rgba(0, 0, 0, .14); }
.price-card__amount { font-size: clamp(30px, 3vw, 42px); letter-spacing: -.035em; font-weight: 800; }

/* Equipe */
.member { border-radius: 18px; transition: transform var(--transition), box-shadow var(--transition); }
.member:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(0, 0, 0, .09); }

/* Chiffres cles : beaucoup plus grands, c'est leur seule raison d'etre */
.stats .stat__num, .stat__number {
  font-size: clamp(40px, 5vw, 76px); letter-spacing: -.045em; font-weight: 800; line-height: 1;
}
.bg-dark .stat__num, .bg-dark .stat__number { color: var(--brand); }

/* Bandeau d'appel a l'action */
.band-cta__title { font-size: var(--step-3); letter-spacing: -.03em; }
.band-cta__text { font-size: var(--step-1); opacity: .88; max-width: 62ch; }

/* Boutons : un cran plus present, avec un retour tactile au clic */
.btn { font-size: 13.5px; letter-spacing: .05em; height: 54px; padding: 0 32px; }
.btn:active { transform: translateY(0) scale(.985); }
.btn--outline { border-width: 2px; }

/* Logos clients : on retire le survol qui les faisait clignoter */
.logos img { transition: opacity var(--transition), filter var(--transition); }

/* ------------------------------------------------------------------ */
/*  6. APPARITION AU DEFILEMENT                                        */
/*  Un leger fondu vers le haut quand la section entre dans l'ecran.    */
/*  Desactive pour qui demande moins d'animations, et jamais bloquant : */
/*  sans JavaScript, tout reste visible.                                */
/* ------------------------------------------------------------------ */
.js [data-reveal] { opacity: 0; transform: translateY(22px); }
.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .sector-card, .icon-box, .price-card, .member { transition: none; }
}

/* ------------------------------------------------------------------ */
/*  7. BANNIERE REDUITE + FOND FLOUTE PARTOUT                          */
/*  Toute page porte desormais une image de fond, floutee et desaturee : */
/*  elle donne de la matiere sans jamais concurrencer le titre. Et le   */
/*  bandeau est raccourci — il annonce la page, il ne la remplit pas.   */
/* ------------------------------------------------------------------ */
.page-title {
  /* La hauteur demandee par la page reste respectee, mais plafonnee */
  min-height: min(var(--title-h, 300px), 340px);
  padding-block: clamp(56px, 6vw, 84px);
}
.page-title__bg {
  filter: grayscale(1) blur(14px) brightness(.55) contrast(1.05);
  transform: scale(1.12);
}
.page-title.has-image::before {
  background: linear-gradient(100deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.66) 45%, rgba(0,0,0,.46) 100%);
}
.page-title__heading { font-size: clamp(30px, 3.8vw, 52px); }
.page-title__subtitle { margin-top: 16px; font-size: clamp(15.5px, 1vw, 18px); }
.page-title .breadcrumb { margin-bottom: 18px; }

/* Article : bandeau encore plus court, le contenu commence vite */
.article .page-title,
.page-title.is-article { min-height: min(var(--title-h, 260px), 300px); }

@media (max-width: 700px) {
  .page-title { min-height: 240px; padding-block: 48px; }
}

/* ------------------------------------------------------------------ */
/*  8. ILLUSTRATIONS D'ARTICLES EN FORME ORGANIQUE                     */
/*  Meme forme libre que les blocs « image + texte », pour que le blog  */
/*  appartienne visuellement au reste du site.                          */
/* ------------------------------------------------------------------ */
/* L'image de couverture reste un rectangle : la forme organique y rognait
   trop les angles et abimait le cadrage sur une grande image. */
.article__cover { margin: 0 0 36px; }
.article__cover img {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 520px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-img);
  filter: none;
}

/* Vignettes des listes d'articles : meme forme, dans une carte aeree */
.post-card { border-radius: 20px; }
.post-card__media {
  aspect-ratio: auto;
  padding: 18px 18px 0;
  background: transparent;
  overflow: visible;
}
.post-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  transition: border-radius .5s cubic-bezier(.4, 0, .2, 1), transform .5s ease;
}
.post-card:hover .post-card__media img {
  border-radius: 42% 58% 62% 38% / 40% 44% 56% 60%;
  transform: none;
}
.post-card__body { padding: 20px 24px 26px; }
.post-card__title { font-size: var(--step-1); letter-spacing: -.015em; }

/* Article en avant dans la barre laterale */
.article__card img,
.related-card__media img { border-radius: var(--radius-sm); }

@media (prefers-reduced-motion: reduce) {
  .post-card__media img { transition: none; }
}

/* Cartes d'article : hauteurs egales et pied aligne, quelle que soit la
   longueur du titre ou du chapeau. */
.posts-grid, .articles__grid { align-items: stretch; }
.post-card { height: 100%; }
.post-card__body { flex: 1; display: flex; flex-direction: column; }
.post-card__excerpt { flex: 1; }
.post-card__more { margin-top: auto; padding-top: 14px; }

/* Meme traitement pour les grilles de cartes a icones et de metiers */
.icon-boxes__grid, .sector-cards { align-items: stretch; }
.icon-box { height: 100%; display: flex; flex-direction: column; }
.icon-box__text { flex: 1; }


/* Mega-menu des villes : une grille reguliere plutot qu'un flux en
   colonnes, qui repartissait les villes de facon irreguliere. */
.mega--cities .mega__cities {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px 28px;
  padding: 0;
}
.mega--cities .mega__cities a { padding: 7px 0; font-size: 14.5px; }
.mega--cities .mega__head { margin-bottom: 14px; }

/* Mega-menu des metiers : colonnes de continuation sans titre,
   on reserve la hauteur pour que les listes restent alignees. */
.mega__head--empty { height: 0; margin-bottom: 0; }
.mega__links--compact .mega__link { padding: 7px 10px; }
.mega__links--compact .mega__icon { width: 34px; height: 34px; }
.mega__foot { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--line); margin-top: 6px; }

@media (max-width: 1100px) {
  .mega--cities .mega__cities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .mega--cities .mega__cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   PASSE 2 — FINITION PROFESSIONNELLE
   Audit mesure sur la page : 58 textes sous le seuil de contraste WCAG
   (dont 43 dus au seul gris #838383), 101 zones tactiles sous 40 px,
   et les realisations releguees en 9e position sur 14. On traite les
   trois, en commencant par ce qui se mesure.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/*  1. CONTRASTE                                                       */
/*  #838383 sur blanc donne 3,79:1 — sous le minimum de 4,5:1. Le gris  */
/*  passe a #6b6b6b (5,3:1) : l'intention visuelle est la meme, le      */
/*  texte devient lisible pour tout le monde.                           */
/* ------------------------------------------------------------------ */
:root { --muted: #6b6b6b; }

.portfolio__cat,
.post-card__meta,
.article__meta,
.mm-group,
.testimonial__role,
.member__role,
.price-card__text,
.section-head__sub { color: #6b6b6b; }

/* Les etoiles jaunes sur blanc tombent a 1,49:1. Un contour sombre les
   rend lisibles sans changer la couleur de marque. */
.testimonial__stars {
  color: var(--brand);
  -webkit-text-stroke: .6px rgba(0, 0, 0, .35);
  paint-order: stroke fill;
}

/* ------------------------------------------------------------------ */
/*  2. ZONES TACTILES                                                  */
/*  44 x 44 px est le minimum confortable au doigt. On agrandit la zone */
/*  cliquable sans grossir l'element visible.                           */
/* ------------------------------------------------------------------ */
.slideshow__dot {
  position: relative;
  width: 12px; height: 12px;
}
.slideshow__dot::after {
  content: ""; position: absolute; inset: -16px;   /* zone de 44 px */
}
.portfolio__filter { min-height: 44px; padding-block: 0; display: inline-flex; align-items: center; }
.footer__links a, .footer__menu a, .legal-menu a { display: inline-block; padding-block: 7px; }
.mega__cities a, .mm-panel a { min-height: 40px; display: flex; align-items: center; }
.lang-switch__item { min-height: 36px; padding-inline: 8px; }

/* Tout ce qui se clique le montre */
.post-card, .sector-card, .portfolio__item, .faq__q, [data-modal] { cursor: pointer; }

/* ------------------------------------------------------------------ */
/*  3. ETATS DE FOCUS                                                  */
/*  Visibles sur fond clair comme sur fond sombre.                      */
/* ------------------------------------------------------------------ */
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
.bg-dark :focus-visible, .page-title :focus-visible, .site-footer :focus-visible,
.slideshow :focus-visible { outline-color: var(--brand); outline-offset: 4px; }

/* ------------------------------------------------------------------ */
/*  4. REALISATIONS — SURVOL AVEC INFORMATIONS                         */
/*  Le motif attendu d'un site d'agence : la vignette se couvre d'un   */
/*  voile sombre au survol et livre le metier, le titre et l'intention. */
/*  La legende sous l'image disparait — l'information passe dans        */
/*  l'image, la grille respire et gagne en tenue.                       */
/* ------------------------------------------------------------------ */
.portfolio__item {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.portfolio__item:hover { transform: translateY(-6px); box-shadow: 0 26px 56px rgba(0, 0, 0, .18); }

.portfolio__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.portfolio__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.22,.61,.36,1), filter .35s ease;
}
.portfolio__item:hover .portfolio__media img { transform: scale(1.06); filter: brightness(.45); }

/* La legende glisse par-dessus l'image */
.portfolio__caption {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  padding: 22px 24px 24px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .88));
  color: var(--white);
  transform: translateY(14px);
  opacity: 0;
  transition: transform .4s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
  pointer-events: none;
}
.portfolio__item:hover .portfolio__caption,
.portfolio__item:focus-within .portfolio__caption { transform: none; opacity: 1; }

.portfolio__caption .portfolio__cat {
  color: var(--ink); background: var(--brand);
  padding: 4px 10px; border-radius: 30px; margin-bottom: 10px;
  font-size: 10.5px; letter-spacing: .1em;
}
.portfolio__caption .portfolio__title { color: var(--white); font-size: var(--step-1); letter-spacing: -.015em; }
.portfolio__caption small { display: block; margin-top: 6px; color: rgba(255,255,255,.78); font-size: 13.5px; line-height: 1.5; }

.portfolio__zoom {
  inset-block-start: 16px; bottom: auto;
  inset-inline-end: 16px; inset-inline-start: auto;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--brand); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.8);
  transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
  z-index: 3;
}
.portfolio__item:hover .portfolio__zoom { opacity: 1; transform: none; }

/* Filtres : plus proches d'un vrai selecteur que de simples liens */
.portfolio__filters { gap: 8px; margin-bottom: clamp(28px, 3vw, 40px); }
.portfolio__filter {
  border: 1px solid var(--line); border-radius: 40px;
  background: var(--white); color: var(--muted);
  font-family: var(--font-head); font-size: 13px; font-weight: 600;
  padding-inline: 20px;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.portfolio__filter:hover { border-color: var(--ink); color: var(--ink); }
.portfolio__filter.is-active { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* Sur ecran tactile il n'y a pas de survol : la legende reste visible */
@media (hover: none) {
  .portfolio__caption { opacity: 1; transform: none; }
  .portfolio__media img { filter: brightness(.62); }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio__item, .portfolio__media img, .portfolio__caption, .portfolio__zoom { transition: none; }
}

/* ------------------------------------------------------------------ */
/*  5. CARTES CLAIRES DANS UNE SECTION SOMBRE                          */
/*  .bg-dark passe la couleur du texte en blanc, et les cartes a fond   */
/*  clair en heritaient : texte blanc sur carte blanche, invisible.     */
/*  Toute carte claire reprend donc l'encre du theme.                   */
/* ------------------------------------------------------------------ */
.bg-dark .testimonial,
.bg-dark .icon-box,
.bg-dark .post-card,
.bg-dark .price-card,
.bg-dark .sector-card,
.bg-dark .member,
.bg-dark .faq__item,
.bg-dark .contact-card {
  color: var(--text);
}
.bg-dark .testimonial h3, .bg-dark .testimonial b, .bg-dark .testimonial strong,
.bg-dark .icon-box__title, .bg-dark .post-card__title, .bg-dark .sector-card__title,
.bg-dark .price-card__name, .bg-dark .member__name, .bg-dark .faq__q {
  color: var(--ink);
}
.bg-dark .testimonial__text { color: var(--text); }
.bg-dark .testimonial__role, .bg-dark .post-card__meta { color: var(--muted); }

/* Le surlignage jaune des titres masquait le texte blanc sur fond sombre.
   Sur fond sombre, le mot passe simplement en jaune. */
.bg-dark h1 strong, .bg-dark h2 strong,
.page-title h1 strong, .slideshow h1 strong, .slideshow h2 strong,
.site-footer h2 strong {
  background: none;
  color: var(--brand);
  padding: 0;
}

/* Les etoiles restent contourees partout : dans une section sombre elles
   sont posees sur des cartes BLANCHES, ou le jaune seul tombe a 1,49:1. */
.bg-dark .testimonial__stars { -webkit-text-stroke: .6px rgba(0, 0, 0, .35); }

/* ------------------------------------------------------------------ */
/*  6. BANDEAU DE LOGOS CLIENTS                                        */
/*  Etait clairseme et inegal. Rangee unique, logos calibres a la meme  */
/*  hauteur optique, gris au repos et couleur au survol.                */
/* ------------------------------------------------------------------ */
.logos__grid, .logos .container > ul, .logos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
}
.logos img {
  max-height: 42px; width: auto; margin-inline: auto; display: block;
  filter: grayscale(1); opacity: .5;
  transition: opacity .3s ease, filter .3s ease;
}
.logos img:hover { filter: grayscale(0); opacity: 1; }
.logos .section-head { margin-bottom: clamp(24px, 2.5vw, 36px); }


/* Selecteur de langue : un blanc a 70 % manque un peu de presence
   sur la barre du haut. */
.lang-switch__item { color: rgba(255, 255, 255, .85); }
.lang-switch__item:hover { color: var(--white); }

/* Les blocs pleine largeur (diaporama, banniere) ne prennent pas les
   marges de section : ils doivent toucher l'en-tete. La regle generale
   .block leur ajoutait 64 px de blanc au-dessus sur mobile. */
.block--slideshow,
.block--hero,
.block--parallax_cta,
.block--announcement { padding-block: 0; }

/* =====================================================================
   PASSE 3 — EPURATION
   Retour client : « pas epure, pas moderne ». Le diagnostic est le meme
   sur les sept elements montres — ils en font trop. Cette couche retire
   la decoration plutot qu'elle n'en ajoute : formes libres, pastilles de
   couleur, badges et vignettes bricolees disparaissent au profit de
   blocs simples, d'espaces francs et d'un seul accent jaune.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/*  1. FORMES ORGANIQUES : DANS LES PAGES, PAS SUR LES COUVERTURES     */
/*  Le contour libre de webi.tn est un marqueur de la charte, on le     */
/*  garde pour les images illustrant le corps d'une page. En revanche   */
/*  une couverture d'article ou une vignette de liste doit rester un    */
/*  rectangle : c'est un format de lecture, pas une illustration.       */
/* ------------------------------------------------------------------ */
.article__cover img,
.post-card__media img,
.article__card img,
.related-card__media img {
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  animation: none;
}
.post-card:hover .post-card__media img { border-radius: var(--radius); }
.post-card__media { padding: 0; }
.post-card__media img { border-radius: var(--radius) var(--radius) 0 0; }

/* ------------------------------------------------------------------ */
/*  2. CARTES METIER — SANS PASTILLE NI BANDEAU JAUNE                  */
/*  Le bloc jaune de 168 px et le badge noir repete sur chaque carte    */
/*  alourdissaient la grille. L'icone passe en ligne avec le titre.     */
/* ------------------------------------------------------------------ */
.sector-card {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: none;
}
.sector-card:hover {
  transform: translateY(-3px);
  border-color: var(--ink);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .07);
}
.sector-card__media { display: none; }               /* plus de bandeau jaune */
.sector-card__body { padding: 26px 26px 28px; gap: 10px; }
.sector-card__title {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--step-1);
}
.sector-card__title::before {
  content: ""; width: 22px; height: 2px; background: var(--brand); flex: none;
}
.sector-card__text { font-size: var(--step--1); }
.sector-card__link { font-size: 12.5px; letter-spacing: .02em; }

/* ------------------------------------------------------------------ */
/*  3. BOITES A ICONES — VIGNETTES SUPPRIMEES                          */
/*  Les mockups de site etaient reduits en timbres-poste mal recadres   */
/*  dans un coin. On ne garde que l'icone, ou rien.                     */
/* ------------------------------------------------------------------ */
.icon-box__icon img,
.icon-box__icon picture { display: none; }
.icon-box__icon:has(img) {
  width: 0; height: 0; margin: 0; background: none;
}
.icon-box:has(.icon-box__icon img) { padding-top: 30px; }

/* ------------------------------------------------------------------ */
/*  4. CHIFFRES CLES — UNE SEULE RANGEE                                */
/*  Trois en haut, un centre en dessous : ca se lisait comme un bug.    */
/* ------------------------------------------------------------------ */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 24px;
  align-items: start;
}
.stats > * { flex: none; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .stats { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ */
/*  5. BANDEAU JAUNE — CENTRE ET SANS SURLIGNAGE                       */
/*  Le surlignage jaune sur fond jaune ne se voyait pas, et le texte    */
/*  colle a gauche laissait la moitie du bandeau vide.                  */
/*  Attention : .band-cta EST le conteneur, il ne le contient pas.      */
/* ------------------------------------------------------------------ */
/* Le bandeau etait un flex « titre a gauche / bouton a droite » qui se
   cassait en colonne des que le texte etait long. On assume la colonne
   centree : plus calme, et identique a toutes les largeurs. */
.band-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
}
.band-cta__title { max-width: 24ch; }
.band-cta__text  { max-width: 58ch; }
.band-cta__title, .band-cta__text { margin-inline: auto; }
.band-cta__text { max-width: 56ch; }
.bg-yellow h2 strong { background: none; box-shadow: none; text-decoration: none; }
.band-cta .btn { margin-top: 26px; }

/* ------------------------------------------------------------------ */
/*  6. LISTES REPLIEES — SANS BLANC INUTILE                            */
/*  « Voir toutes les villes » flottait au milieu de 300 px de vide.    */
/* ------------------------------------------------------------------ */
.local-links__fold > summary,
.block--local_links .local-links__fold,
.block--sector_links .local-links__fold { margin: 0; }
.block--local_links, .block--sector_links { padding-block: clamp(28px, 3vw, 44px); }
.local-links__summary {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  justify-content: center;
}
.local-links__fold[open] .local-links__summary { border-bottom-color: transparent; }
.local-links__fold[open] .local-links { padding-bottom: 18px; border-bottom: 1px solid var(--line); }

/* ------------------------------------------------------------------ */
/*  7. ETAPES SANS ILLUSTRATION — FRISE VERTICALE                      */
/*  Le bloc « etapes » etait concu pour une image de 220 px a gauche,   */
/*  alternee a droite. Sans image, cette colonne restait vide et le     */
/*  zigzag n'avait plus de sens : 1 493 px de haut pour quatre etapes   */
/*  courtes. Quand il n'y a pas d'image, on passe en frise verticale.   */
/* ------------------------------------------------------------------ */
.steps:not(:has(.step__media)) {
  gap: 0;
  max-width: 760px;
  margin-inline: auto;
  counter-reset: step;
}
.steps:not(:has(.step__media)) .step,
.steps:not(:has(.step__media)) .step.is-reverse {
  display: block;
  position: relative;
  padding: 0 0 36px 72px;
  border-inline-start: 2px solid var(--line);
  margin-inline-start: 19px;
}
.steps:not(:has(.step__media)) .step:last-child {
  border-inline-start-color: transparent;
  padding-bottom: 0;
}

/* La pastille numerotee se pose sur la ligne */
.steps:not(:has(.step__media)) .step__num {
  position: absolute;
  inset-inline-start: -21px;
  top: -4px;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0;
  font-size: 14px; font-weight: 700; line-height: 1;
  color: var(--ink); background: var(--brand);
  border: 3px solid var(--white);
  border-radius: 50%;
  -webkit-text-stroke: 0;
  box-shadow: 0 0 0 1px var(--line);
}
.steps:not(:has(.step__media)) .step__title {
  font-size: var(--step-1);
  letter-spacing: -.015em;
  margin: 0 0 8px;
  padding-top: 4px;
}
.steps:not(:has(.step__media)) .step .prose { margin: 0; }
.steps:not(:has(.step__media)) .step .prose p { margin: 0 0 10px; max-width: none; }
.steps:not(:has(.step__media)) .step .prose p:last-child { margin-bottom: 0; }

/* Sur fond gris clair, la pastille garde son liseré lisible */
.bg-soft .steps:not(:has(.step__media)) .step__num { border-color: var(--soft); }

@media (max-width: 600px) {
  .steps:not(:has(.step__media)) .step,
  .steps:not(:has(.step__media)) .step.is-reverse { padding-inline-start: 52px; }
}

/* ------------------------------------------------------------------ */
/*  8. HIERARCHIE DANS LE MEGA-MENU                                    */
/*  Ce qu'on vend, c'est le TYPE de prestation. Le metier et la ville   */
/*  sont des entrees secondaires : on cherche « community management »  */
/*  d'abord, « pour restaurant » ensuite. Les colonnes automatiques     */
/*  passent donc en second plan — plus etroites, plus denses, plus      */
/*  discretes — et laissent la place aux prestations.                   */
/* ------------------------------------------------------------------ */
.mega__inner:has(.mega__col--auto) {
  display: flex;
  align-items: flex-start;
  gap: clamp(28px, 3vw, 56px);
}
/* Colonnes de prestations : elles prennent la place disponible */
.mega__inner:has(.mega__col--auto) > .mega__col { flex: 1 1 0; min-width: 0; }
/* Colonnes automatiques : largeur contenue, jamais dominantes */
.mega__inner:has(.mega__col--auto) > .mega__col--auto {
  flex: 0 1 auto;
  min-width: 190px;
  max-width: 300px;
  padding-inline-start: clamp(24px, 2.5vw, 44px);
  border-inline-start: 1px solid var(--line);
}

/* Titre de colonne secondaire : plus petit et plus sourd */
.mega__col--auto .mega__head {
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--muted);
  margin-bottom: 12px;
}

/* Liens secondaires : compacts, sur deux colonnes, sans zone de 40 px */
.mega__col--auto .mega__cities {
  columns: 2;
  column-gap: 22px;
  display: block;
  padding: 0;
}
.mega__col--auto .mega__cities li { break-inside: avoid; }
.mega__col--auto .mega__cities a {
  display: block;
  min-height: 0;
  padding: 5px 0;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--muted);
}
.mega__col--auto .mega__cities a:hover { color: var(--ink); }
.mega__col--auto .mega__more { margin-top: 14px; font-size: 12.5px; }

/* A l'inverse, la colonne principale gagne en presence */
.mega__inner:has(.mega__col--auto) > .mega__col:not(.mega__col--auto) .mega__link { padding: 10px 12px; }
.mega__inner:has(.mega__col--auto) > .mega__col:not(.mega__col--auto) .mega__body b { font-size: 15.5px; }

@media (max-width: 1080px) {
  .mega__inner:has(.mega__col--auto) { flex-wrap: wrap; }
  .mega__inner:has(.mega__col--auto) > .mega__col--auto {
    border-inline-start: 0; padding-inline-start: 0; max-width: none; flex: 1 1 100%;
  }
}

/* ------------------------------------------------------------------ */
/*  9. UNE SEULE GRILLE POUR TOUTE LA PAGE                             */
/*  L'en-tete et la barre du haut avaient ete elargis a 1360 px pour    */
/*  loger un menu de dix entrees. Il n'en compte plus que cinq : toutes  */
/*  les largeurs figees sont remplacees par --container, sinon le logo   */
/*  demarre 90 px plus a gauche que les sections et l'oeil lit un        */
/*  decalage sur toute la hauteur de la page.                            */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/*  10. BANDEAU DE LOGOS — TAILLES ET DEFILEMENT                       */
/*  Les logos etaient plafonnes a 42 px : trop petits pour qu'on        */
/*  reconnaisse Alliance Francaise ou Pages Jaunes. Trois tailles, et   */
/*  un defilement continu en option.                                    */
/* ------------------------------------------------------------------ */
.logos.size-small  img { max-height: 42px; }
.logos.size-medium img { max-height: 64px; }
.logos.size-large  img { max-height: 88px; }
.logos img { width: auto; object-fit: contain; }

/* Grille statique */
.logos:not(.logos--row) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: center;
  gap: clamp(24px, 3vw, 52px);
  list-style: none; margin: 0; padding: 0;
}

/* Defilement continu : la piste contient deux copies identiques et se
   deplace d'exactement une copie, d'ou une boucle invisible. */
.logos-marquee {
  position: relative;
  overflow: hidden;
  /* fondu sur les bords, pour que les logos n'apparaissent pas net */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos-marquee__track {
  display: flex;
  width: max-content;
  animation: logos-scroll var(--marquee-duration, 40s) linear infinite;
}
.logos-marquee:hover .logos-marquee__track { animation-play-state: paused; }

.logos--row {
  display: flex; align-items: center;
  list-style: none; margin: 0; padding: 0;
  gap: clamp(40px, 5vw, 84px);
  padding-inline-end: clamp(40px, 5vw, 84px);
  flex: none;
}
.logos--row li { flex: none; display: flex; align-items: center; }
.logos-marquee.size-small  img { max-height: 42px; }
.logos-marquee.size-medium img { max-height: 64px; }
.logos-marquee.size-large  img { max-height: 88px; }
.logos-marquee img { width: auto; object-fit: contain; }

@keyframes logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Gris au repos, couleur au survol — sur les deux rendus */
.logos.is-grey img, .logos-marquee.is-grey img {
  filter: grayscale(1); opacity: .55;
  transition: opacity .3s ease, filter .3s ease;
}
.logos.is-grey img:hover, .logos-marquee.is-grey img:hover { filter: grayscale(0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .logos-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; }
  .logos-marquee { mask-image: none; -webkit-mask-image: none; }
  .logos-marquee__track > ul[aria-hidden="true"] { display: none; }
}

/* Avis : la date et l'origine rendent le temoignage verifiable */
.testimonial__author { display: flex; align-items: center; gap: 12px; }
.testimonial__author > span:first-of-type { flex: 1; min-width: 0; }
.testimonial__source { flex: none; display: inline-flex; align-items: center; opacity: .9; }
.testimonial__author small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ------------------------------------------------------------------ */
/*  11. MEGA-MENU : UNIQUEMENT LES TYPES DE PRESTATION                 */
/*  Les reseaux « ville » et « metier » ont quitte le menu principal,   */
/*  il ne reste qu'une colonne de prestations. Etalee sur toute la      */
/*  largeur du conteneur elle serait perdue, on la pose donc sur deux   */
/*  colonnes compactes, calees a gauche.                                */
/*  Pas de media query : le mega-menu n'existe qu'au-dessus de 1200 px, */
/*  en dessous c'est le menu burger qui prend le relais.                */
/* ------------------------------------------------------------------ */
.mega__inner:not(:has(.mega__col + .mega__col)) > .mega__col .mega__links {
  grid-template-columns: repeat(2, minmax(0, 330px));
  column-gap: 28px;
}
/* Quand une colonne automatique subsiste (autres menus), on garde deux
   colonnes fluides pour les prestations et la colonne auto a droite. */
.mega__inner:has(.mega__col--auto) > .mega__col:not(.mega__col--auto) .mega__links {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 34px);
}

/* ------------------------------------------------------------------ */
/*  12. CHIFFRES CLES : PLUS FINS                                      */
/*  Le rendu precedent (800 de graisse, jusqu'a 76 px) ecrasait tout.  */
/*  On garde des chiffres lisibles de loin mais on allege : graisse    */
/*  moyenne, chasse tabulaire, suffixe detache en plus petit, icone    */
/*  filaire au-dessus et filet vertical entre les colonnes.            */
/* ------------------------------------------------------------------ */
.stats { gap: 28px 0; align-items: stretch; }

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding-inline: clamp(14px, 2vw, 30px);
  border-inline-start: 1px solid var(--line);
}
.stat:first-child { border-inline-start: 0; }
.bg-dark .stat { border-inline-start-color: rgba(255, 255, 255, .14); }

.stat__icon {
  display: inline-flex;
  color: var(--brand);
  opacity: .9;
}
.stat__icon svg { width: 22px; height: 22px; stroke-width: 1.6; }

/* Chiffre : on descend de 800 a 600 et on plafonne plus bas */
.stats .stat__num, .stat__number {
  font-size: clamp(32px, 3.4vw, 50px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0;
}
/* Le suffixe n'est pas le chiffre : plus petit, moins gras, moins present */
.stat__suffix--word { margin-inline-start: .22em; }
.stat__suffix {
  font-size: .46em;
  font-weight: 500;
  letter-spacing: 0;
  opacity: .75;
}
.stat__label {
  font-size: 12.5px;
  letter-spacing: .07em;
  line-height: 1.45;
  max-width: 21ch;
  text-align: center;
}
.bg-dark .stat__label { color: rgba(255, 255, 255, .72); }

/* Le filet vertical n'a pas de sens quand les colonnes se replient */
@media (max-width: 860px) {
  .stat:nth-child(odd) { border-inline-start: 0; }
}
@media (max-width: 420px) {
  .stat { border-inline-start: 0; }
}

/* ------------------------------------------------------------------ */
/*  13. BANDEAU AVIS GOOGLE                                            */
/*  Il s'affiche des qu'un lien de fiche existe, meme sans note. Deux  */
/*  actions distinctes : lire les avis (lien sortant) et en deposer un */
/*  (bouton, c'est l'action qu'on cherche a provoquer).                */
/* ------------------------------------------------------------------ */
.google-badge__actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.google-badge__write {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  min-height: 40px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 600;
  transition: background var(--transition), transform var(--transition);
}
.google-badge__write:hover { background: #ffd84a; transform: translateY(-1px); }
.google-badge__write svg { flex: none; }

/* Sans note affichee, le bandeau devient une simple barre de liens :
   plus discrete, centree, sans le poids visuel d'un score. */
.google-badge--link {
  justify-content: center;
  gap: 14px;
}
.google-badge--link .google-badge__text {
  font-family: var(--font-head);
  font-weight: 600;
}
@media (max-width: 560px) {
  .google-badge, .google-badge--link { flex-direction: column; text-align: center; }
  .google-badge__actions { justify-content: center; }
}

/* ====================================================================
   REFONTE 2026 — DIRECTION « LE TRAIT JAUNE »
   Validee le 12/09/2026. Jaune #FFE539 echantillonne dans le logo,
   Archivo en typographie d'affichage, Montserrat pour le texte.
   Le jaune est un TRAIT : soulignement, filet, etat actif, fond de
   bouton. Jamais un aplat de section, jamais du texte jaune sur blanc.
   ==================================================================== */

/* ------------------------------------------------------------------ */
/*  A. HERO : UNE COMPOSITION, PAS UNE BANNIERE                        */
/*  Ligne de meta, accroche XXL, texte court, deux actions. Le voile    */
/*  uniforme est remplace par un degrade lateral : la photo respire a   */
/*  droite pendant que le texte reste lisible a gauche.                 */
/* ------------------------------------------------------------------ */
.hero__eyebrow {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  margin: 0 0 clamp(16px, 2vw, 26px);
  padding-inline-start: 42px;
  position: relative;
}
/* Le trait jaune qui ouvre la page : premier usage de la couleur. */
.hero__eyebrow::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: .58em;
  width: 30px;
  height: 2px;
  background: var(--brand);
}
.hero--dark .hero__eyebrow { color: var(--muted); }

/* Pas de « pre-line » ici : highlight_words() convertit deja le retour a
   la ligne en <br>. Cumuler les deux produisait une ligne vide. */
.hero__title { max-width: 21ch; }
.hero__text { font-size: var(--step-1); max-width: 46ch; color: rgba(255, 255, 255, .88); }

/* Degrade lateral plutot que voile plein : on garde le sujet visible. */
.slide.has-image::after,
.hero.has-image::after {
  background: linear-gradient(
    100deg,
    rgba(10, 10, 9, calc(var(--hero-overlay, .5) + .10)) 0%,
    rgba(10, 10, 9, var(--hero-overlay, .5)) 55%,
    rgba(10, 10, 9, calc(var(--hero-overlay, .5) * .78)) 100%
  );
}

/* ------------------------------------------------------------------ */
/*  B. BOUTONS : PLUS DE HALO                                          */
/*  L'ombre coloree sous les boutons etait le marqueur « template » le  */
/*  plus visible. On garde la pilule, signature commune aux deux sites. */
/* ------------------------------------------------------------------ */
.btn { box-shadow: none; font-size: 13.5px; letter-spacing: .06em; }
.btn:hover { box-shadow: none; transform: none; }
.btn--primary:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--dark { box-shadow: none; }
/* Sur une photo, le bouton secondaire reste un contour blanc net. */
.hero__actions .btn--outline { border-color: rgba(255, 255, 255, .7); color: #fff; }
.hero__actions .btn--outline:hover { background: #fff; border-color: #fff; color: var(--ink); }

/* ------------------------------------------------------------------ */
/*  C. PAGINATION DU DIAPORAMA : DEUX TRAITS                           */
/*  Deux slides, donc deux traits fins. Les pastilles rondes faisaient  */
/*  attendre un carrousel de huit images.                               */
/* ------------------------------------------------------------------ */
.slideshow__dot {
  width: 34px; height: 2px; border-radius: 0;
  background: rgba(255, 255, 255, .38);
  transition: background var(--transition);
}
.slideshow__dot.is-active { background: var(--brand); width: 34px; }
.slideshow__dots { gap: 10px; }

/* ------------------------------------------------------------------ */
/*  D. CARTES SANS CONTOUR, AUX ANGLES ARRONDIS                        */
/*  Le filet gris ceinturait chaque bloc et fabriquait un quadrillage.  */
/*  On le retire : la carte se detache par un aplat legerement plus     */
/*  clair ou plus chaud que son fond, et par un angle arrondi franc.    */
/*  Aucune ombre : c'est le contraste de fond qui fait le relief.       */
/* ------------------------------------------------------------------ */
:root {
  --radius: 18px;
  --radius-sm: 12px;
  --shadow-card: none;
  --shadow-img: none;
}

.icon-box, .sector-card, .post-card, .price-card, .member,
.testimonial, .portfolio__item, .related-card, .article__card {
  border: 0;
  box-shadow: none;
  border-radius: var(--radius);
  overflow: hidden;
}

/* Sur fond blanc, la carte est beige. Sur fond beige, elle est blanche.
   Une seule regle, et le contraste fonctionne dans les deux sens. */
.bg-white .icon-box, .bg-white .sector-card, .bg-white .price-card,
.bg-white .post-card, .bg-white .member, .bg-white .article__card,
.block:not([class*="bg-"]) .icon-box,
.block:not([class*="bg-"]) .sector-card,
.block:not([class*="bg-"]) .price-card,
.block:not([class*="bg-"]) .post-card { background: var(--soft); }

.bg-soft .icon-box, .bg-soft .sector-card, .bg-soft .price-card,
.bg-soft .post-card, .bg-soft .member, .bg-soft .article__card { background: var(--white); }

.bg-dark .icon-box, .bg-dark .sector-card, .bg-dark .testimonial,
.bg-dark .price-card { background: rgba(255, 255, 255, .06); border: 0; }

/* Au survol, l'aplat fonce legerement : pas de saut, pas d'ombre. */
.icon-box, .sector-card, .price-card, .post-card, .member, .article__card {
  transition: background var(--transition), transform var(--transition);
}
.bg-white .icon-box:hover, .bg-white .sector-card:hover, .bg-white .price-card:hover,
.block:not([class*="bg-"]) .icon-box:hover,
.block:not([class*="bg-"]) .sector-card:hover { background: #F2F0E7; }
.bg-soft .icon-box:hover, .bg-soft .sector-card:hover, .bg-soft .price-card:hover { background: #FFFFFF; }
.icon-box:hover, .sector-card:hover, .price-card:hover { box-shadow: none; transform: none; }

/* Plus de filet non plus sur les separateurs de blocs et les encadres. */
.faq__item, .steps .step, .proof, .fig { border-color: transparent; }
.faq__item { border-bottom: 1px solid rgba(17, 17, 16, .09); }

/* Les images gardent le meme rayon que les cartes. */
.image-text__media img, .intro__media img, .member__photo img { box-shadow: none; }

/*  E. EN-TETE DE SECTION : INDICE A GAUCHE, TITRE AU-DESSOUS          */
/*  On abandonne le titre centre. Le sur-titre devient un vrai reperage */
/*  editorial : trait jaune puis libelle, cale a gauche comme le reste  */
/*  de la colonne. L'oeil retrouve toujours le titre au meme endroit.   */
/* ------------------------------------------------------------------ */
.section-head.align-center { text-align: start; }
.section-head.align-center > h2,
.section-head.align-center > h3,
.section-head.align-center .section-head__sub,
.section-head.align-center p { margin-inline: 0; }
.section-head.align-center .section-head__sub { max-width: 56ch; }

/* Le sur-titre n'est plus une pastille : un filet puis le mot. */
.section-head__eyebrow { color: var(--muted); font-weight: 600; }
.section-head__eyebrow::before { height: 2px; width: 30px; border-radius: 0; }

/* Le bloc « bandeau jaune » garde son centrage : c'est une interruption
   volontaire dans le rythme, pas une section de lecture. */
.band-cta, .band-cta .section-head { text-align: center; }

/* ------------------------------------------------------------------ */
/*  F. PHOTOS ARRONDIES DANS LES PAGES, PAS SUR LES COUVERTURES        */
/*  Le rayon a du sens sur une illustration posee dans un texte : elle  */
/*  se lit comme un objet. Il n'en a pas sur une couverture d'article   */
/*  ni sur une vignette de liste, qui sont des formats de lecture.      */
/* ------------------------------------------------------------------ */
.image-text__media img,
.intro__media img,
.values__media img,
.gallery__item img,
.member__photo img,
.portfolio__cover img,
.content img {
  border-radius: var(--radius);
}
/* Couvertures et vignettes : angles francs. */
.article__cover img,
.post-card__media img,
.related-card__media img,
.article__card img {
  border-radius: 0;
}
.post-card__media img { border-radius: 0; }

/* ------------------------------------------------------------------ */
/*  G. BANDEAU DE TITRE : RETOUR AU CENTRE                             */
/*  Le titre calé a gauche déséquilibrait le bandeau, surtout sur les   */
/*  titres courts. Composition centrée : fil d'Ariane, titre, sous-     */
/*  titre sur un axe unique, avec des marges hautes et basses egales.   */
/* ------------------------------------------------------------------ */
.page-title {
  justify-content: center;
  text-align: center;
  min-height: var(--title-h, 340px);
  padding-block: clamp(56px, 7vw, 96px);
}
.page-title__inner { max-width: var(--container); margin-inline: auto; }
.page-title__text {
  max-width: 820px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.page-title__heading { margin: 0; }
.page-title__subtitle {
  max-width: 62ch;
  margin: 0 auto;
  font-size: var(--step-1);
  line-height: 1.55;
  color: rgba(255, 255, 255, .86);
}
.page-title .breadcrumb { margin: 0 0 4px; }
.page-title .breadcrumb ol { justify-content: center; }

/* Voile centre plutot qu'oblique : le texte est au milieu, l'ombre aussi. */
.page-title.has-image::before {
  background: radial-gradient(120% 130% at 50% 45%,
              rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .78) 60%, rgba(0, 0, 0, .88) 100%);
}
.page-title.no-image {
  background: radial-gradient(115% 140% at 50% 0%, #26262a 0%, #171716 60%, #101010 100%);
}
/* Le filet jaune du bas redevient un trait plein, sur toute la largeur. */
.page-title::after { height: 4px; background: var(--brand); }

/* ------------------------------------------------------------------ */
/*  H. CHIFFRES CLES SUR BEIGE                                         */
/*  Sur fond noir, le jaune criait. Sur le beige de la charte, le noir  */
/*  porte le chiffre et le jaune redevient un trait de reperage.        */
/* ------------------------------------------------------------------ */
.bg-soft .stats { align-items: stretch; }
.bg-soft .stat { border-inline-start-color: rgba(17, 17, 16, .12); }
.bg-soft .stat__icon { color: var(--ink); opacity: .38; }
.bg-soft .stat__icon svg { width: 20px; height: 20px; stroke-width: 1.5; }
.bg-soft .stats .stat__num { color: var(--ink); }
.bg-soft .stat__suffix { color: var(--ink); opacity: .72; } /* contraste 4,5:1 minimum */
.bg-soft .stat__label { color: var(--muted); }

/* Le trait jaune au-dessus du chiffre a ete retire : voir couche X. */

/* ------------------------------------------------------------------ */
/*  I. LE TRAIT SUIT LE TITRE                                          */
/*  L'en-tete de section est passe a gauche, le filet jaune etait reste */
/*  centre. Il s'aligne sur la premiere lettre du titre.                */
/* ------------------------------------------------------------------ */
.section-head.align-center h2::before,
.align-center .section-head h2::before {
  margin-inline: 0;
  width: 44px;
  height: 3px;
  border-radius: 0;
}
/* Le bandeau jaune reste centre : c'est une interruption assumee. */
.band-cta .section-head h2::before { margin-inline: auto; }

/* ------------------------------------------------------------------ */
/*  J. LES REALISATIONS DEVIENNENT UN TEMPS FORT                       */
/*  Constat : seize sections au meme traitement, toutes entre 750 et    */
/*  1050 px. Rien ne ressortait.                                        */
/*  Essai sur fond noir abandonne : les mockups sont detoures sur blanc,*/
/*  ils devenaient des rectangles blancs flottants. La force vient donc */
/*  de l'echelle et de l'espace, pas de l'inversion de fond : pleine    */
/*  largeur, visuels plus grands, filtres en liens texte.               */
/* ------------------------------------------------------------------ */
.block--portfolio { padding-block: clamp(80px, 9vw, 140px); }

/* Le portfolio sort de la grille de lecture pour occuper la largeur. */
.block--portfolio > .container { max-width: min(1560px, 94vw); }

.portfolio__grid { gap: clamp(18px, 2.2vw, 34px); }
.portfolio__item { background: transparent; }
.portfolio__media { border-radius: var(--radius); overflow: hidden; display: block; background: var(--white); }
.portfolio__media img {
  width: 100%; height: auto; display: block;
  transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}
.portfolio__item:hover .portfolio__media img { transform: scale(1.03); }

/* La legende est posee sous l'image, avec le trait jaune qui se trace
   au survol : le jaune signale, il ne decore pas. */
.portfolio__caption { padding: 18px 2px 0; position: relative; background: transparent; }
.portfolio__caption::before {
  content: ''; position: absolute; top: 0; inset-inline-start: 0;
  width: 0; height: 2px; background: var(--brand);
  transition: width .45s cubic-bezier(.2, .6, .2, 1);
}
.portfolio__item:hover .portfolio__caption::before { width: 46px; }
.portfolio__cat {
  font-family: var(--font-head); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.portfolio__title { display: block; margin-top: 5px; font-size: var(--step-1); color: var(--ink); }

/* Filtres en liens texte, pas en pastilles : on ne demande pas de choisir
   avant d'avoir regarde. Le filtre actif est souligne en jaune. */
.portfolio__filters { gap: 26px; border: 0; padding: 0; margin-bottom: clamp(28px, 3vw, 44px); background: none; }
.portfolio__filter {
  background: none; border: 0; border-radius: 0; padding: 6px 0;
  font-family: var(--font-head); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.portfolio__filter:hover { color: var(--ink); background: none; }
.portfolio__filter.is-active { color: var(--ink); background: none; border-bottom-color: var(--brand); }

/* La loupe au survol disparait : l'image parle, l'icone parasitait. */
.portfolio__zoom { opacity: 0; transition: opacity var(--transition); }
.portfolio__item:hover .portfolio__zoom { opacity: .85; }

/* ------------------------------------------------------------------ */
/*  K. AVIS CLIENTS : LA PAROLE, PAS LA CARTE                          */
/*  Trois cartes identiques a bordure faisaient passer des avis reels   */
/*  pour des elements de gabarit. Les avis sont maintenant composes     */
/*  comme des citations : grande typographie, pas de cadre, separes par */
/*  un filet. La note Google est affichee parce qu'elle est verifiable  */
/*  d'un clic — elle n'est pas injectee dans les donnees structurees.   */
/* ------------------------------------------------------------------ */
.bg-dark .testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
}
.bg-dark .testimonial {
  background: none;
  border: 0;
  border-radius: 0;
  padding: clamp(26px, 3vw, 40px) clamp(22px, 2.4vw, 38px);
  border-inline-start: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.bg-dark .testimonial:first-child { border-inline-start: 0; padding-inline-start: 0; }
@media (max-width: 900px) {
  .bg-dark .testimonial { border-inline-start: 0; border-top: 1px solid rgba(255, 255, 255, .12); padding-inline: 0; }
  .bg-dark .testimonial:first-child { border-top: 0; }
}

/* La citation prend la taille d'un titre : c'est le contenu principal. */
.bg-dark .testimonial__text {
  font-family: var(--font-head);
  font-size: var(--step-1);
  line-height: 1.42;
  letter-spacing: -.018em;
  color: #fff;
  margin: 0;
  flex: 1;
}
.bg-dark .testimonial__stars {
  color: var(--brand);
  -webkit-text-stroke: 0;
  font-size: 15px;
  letter-spacing: .18em;
  order: -1;
}
.bg-dark .testimonial__author { gap: 10px; align-items: baseline; }
.bg-dark .testimonial__author b { font-family: var(--font-head); font-size: 14.5px; color: #fff; }
.bg-dark .testimonial__author small { color: rgba(255, 255, 255, .55); font-size: 12.5px; }

/* Le bandeau Google passe au-dessus des avis, en version sombre. */
.bg-dark .google-badge {
  background: rgba(255, 255, 255, .07);
  border: 0;
  border-radius: 999px;
  padding: 10px 10px 10px 22px;
  margin-bottom: clamp(34px, 4vw, 56px);
}
.bg-dark .google-badge__score { color: #fff; font-family: var(--font-head); }
.bg-dark .google-badge__stars { color: var(--brand); }
.bg-dark .google-badge__text { color: rgba(255, 255, 255, .62); }
.bg-dark .google-badge__link { color: #fff; }

/* ------------------------------------------------------------------ */
/*  L. LA FORME ORGANIQUE, PAR DEFAUT ET PARTOUT DANS LES PAGES        */
/*  C'est la signature visuelle de webi.tn et elle doit etre presente   */
/*  AU REPOS, pas seulement au survol. Au survol, elle se deforme :     */
/*  ce sont les rayons qui changent, la transition fait le morphing.    */
/*  Declare en dernier pour passer devant les couches precedentes qui   */
/*  remettaient un rectangle a coins arrondis.                          */
/* ------------------------------------------------------------------ */
.image-text[class*="style-blob"] .image-text__media img,
.image-text.style-egg .image-text__media img,
.values.style-blob .values__media img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  box-shadow: none;
  transition: border-radius .55s cubic-bezier(.4, 0, .2, 1), transform .55s ease;
}

/* Etat de repos : la forme est deja la. */
.image-text.style-blob .image-text__media img,
.values.style-blob .values__media img   { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
.image-text.style-blob-alt  .image-text__media img { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; }
.image-text.style-blob-soft .image-text__media img { border-radius: 70% 30% / 30% 70%; }
.image-text.style-egg       .image-text__media img { border-radius: 50% / 60% 60% 40% 40%; }

/* Au survol, elle bouge. */
.image-text.style-blob .image-text__media img:hover,
.values.style-blob .values__media img:hover   { border-radius: 52% 48% 38% 62% / 42% 56% 44% 58%; }
.image-text.style-blob-alt  .image-text__media img:hover { border-radius: 48% 52% 62% 38% / 56% 42% 58% 44%; }
.image-text.style-blob-soft .image-text__media img:hover { border-radius: 80% 20% / 40% 60%; }
.image-text.style-egg       .image-text__media img:hover { border-radius: 50%; }

/* Morphing continu pour le bloc qui doit accrocher sans interaction. */
.image-text.style-blob-live .image-text__media img {
  aspect-ratio: 1 / 1; object-fit: cover;
  animation: blob-morph 16s ease-in-out infinite;
}

/* Les couvertures d'article et les vignettes de liste ne prennent jamais
   cette forme : ce sont des formats de lecture, pas des illustrations. */
.article__cover img, .post-card__media img,
.related-card__media img, .article__card img { border-radius: 0; animation: none; }

@media (prefers-reduced-motion: reduce) {
  .image-text[class*="style-blob"] .image-text__media img,
  .image-text.style-egg .image-text__media img,
  .values.style-blob .values__media img { transition: none; animation: none; }
}

/* ------------------------------------------------------------------ */
/*  M. DEUX BLOCS SERVICES, UNE SEULE SECTION                          */
/*  « Deux spécialités » et « Et tout ce qui va avec » se lisaient      */
/*  comme deux sections concurrentes. Le second perd son titre de       */
/*  section : son sous-titre devient une charniere, et il se colle au   */
/*  premier. Les deux specialites gardent donc leur role dominant.      */
/* ------------------------------------------------------------------ */
.block--icon_boxes.bg-white + .block--icon_boxes.bg-white { padding-top: 0; }

/* En-tete reduite a un sous-titre : ce n'est plus un titre de section,
   c'est une etiquette de transition. */
.section-head:not(:has(h2)):not(:has(h3)) {
  margin-bottom: clamp(22px, 2.4vw, 32px);
  padding-top: clamp(26px, 3vw, 44px);
  border-top: 1px solid var(--line);
}
.section-head:not(:has(h2)):not(:has(h3)) .section-head__sub {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: none;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.section-head:not(:has(h2)):not(:has(h3)) .section-head__sub::before {
  content: ''; width: 28px; height: 2px; background: var(--brand); flex: none;
}

/* Services complementaires : plus petits que les deux specialites.
   La hierarchie se voit, on ne lit pas six services equivalents. */
.block--icon_boxes.bg-white + .block--icon_boxes .icon-box {
  background: none;
  padding: 0;
}
.block--icon_boxes.bg-white + .block--icon_boxes .icon-box:hover { background: none; }
.block--icon_boxes.bg-white + .block--icon_boxes .icon-box__icon,
.block--icon_boxes.bg-white + .block--icon_boxes .icon-round {
  width: 34px; height: 34px; background: none; color: var(--ink);
}
.block--icon_boxes.bg-white + .block--icon_boxes .icon-box h3,
.block--icon_boxes.bg-white + .block--icon_boxes .icon-box h4 { font-size: var(--step-1); }
.block--icon_boxes.bg-white + .block--icon_boxes .icon-box__text { font-size: 14.5px; }

/* ------------------------------------------------------------------ */
/*  N. RESEAUX VILLES ET METIERS : UNE SECTION, PAS UN ACCORDEON       */
/*  Ces deux blocs se resumaient a une bascule centree, orpheline, qui  */
/*  ouvrait un mur de liens repetant « Agence Web » quinze fois. Ils    */
/*  recoivent un vrai en-tete, et les liens passent en grille alignee   */
/*  a gauche, avec le prefixe commun retire a l'affichage.              */
/* ------------------------------------------------------------------ */
.local-links, .sector-links {
  display: grid;
  gap: 0;
}
.local-links__list, .sector-links__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 0;
}
.local-links__list li, .sector-links__list li { min-width: 0; }
.local-links__list a, .sector-links__list a {
  display: block;
  padding: 13px 4px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  border-top: 1px solid var(--line);
  transition: color var(--transition), padding-inline-start var(--transition);
}
.local-links__list a:hover, .sector-links__list a:hover {
  color: var(--ink);
  padding-inline-start: 12px;
}
/* Le trait jaune apparait a gauche du lien survole. */
.local-links__list a, .sector-links__list a { position: relative; }
.local-links__list a::before, .sector-links__list a::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 0;
  height: 2px;
  background: var(--brand);
  transform: translateY(-50%);
  transition: width var(--transition);
}
.local-links__list a:hover::before, .sector-links__list a:hover::before { width: 7px; }

/* La bascule, quand elle sert encore, devient un lien texte discret. */
.local-links__summary, .sector-links__summary {
  justify-content: flex-start;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 0;
  padding: 10px 0;
}
.local-links__summary:hover, .sector-links__summary:hover { color: var(--ink); }

/* ------------------------------------------------------------------ */
/*  O. PIED DE PAGE : QUATRE COLONNES                                  */
/*  Le classement des liens utilisait une liste de slugs heritee de     */
/*  webi-studio.com : aucun ne correspondait, tout tombait dans une     */
/*  seule colonne. Corrige, et une colonne « A propos » est ajoutee     */
/*  avec les derniers articles de l'agence.                             */
/* ------------------------------------------------------------------ */
.footer__grid {
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 52px);
}
@media (max-width: 1200px) { .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .footer__grid { grid-template-columns: 1fr; } }

/* Les titres de colonne se repartissent sur une meme ligne de base. */
.footer__title {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 16px;
}

/* Les titres d'articles sont plus longs que des libelles de menu :
   on leur laisse deux lignes et un interligne respirable. */
.footer__nav--articles a {
  line-height: 1.4;
  display: block;
  padding-block: 3px;
}
.footer__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
}
.footer__more:hover { color: #fff; }
.footer__more svg { transition: transform var(--transition); }
.footer__more:hover svg { transform: translateX(3px); }

/* ------------------------------------------------------------------ */
/*  P. EN-TETE DE SECTION : VRAIMENT CALE A GAUCHE                     */
/*  Des couches anterieures gardaient « max-width: 780px » et des       */
/*  marges automatiques sur l'en-tete : la boite restait centree dans   */
/*  le conteneur, donc le titre demarrait 200 px a droite du reste du   */
/*  contenu. On annule le centrage, on limite la largeur de LECTURE.    */
/* ------------------------------------------------------------------ */
.section-head.align-center,
.align-center .section-head {
  max-width: none;
  margin-inline: 0;
  text-align: start;
}
.section-head.align-center > h2,
.section-head.align-center > h3 { max-width: 22ch; }
.section-head.align-center .section-head__sub,
.section-head.align-center p { max-width: 62ch; margin-inline: 0; }
.section-head.align-center h2::before,
.align-center .section-head h2::before { margin-inline: 0; }

/* Le bandeau jaune reste centre : interruption volontaire du rythme. */
.band-cta .section-head,
.band-cta .section-head > h2,
.band-cta .section-head p { margin-inline: auto; text-align: center; max-width: 60ch; }
.band-cta .section-head h2::before { margin-inline: auto; }

/* ------------------------------------------------------------------ */
/*  Q. LA BASCULE VILLES / METIERS                                     */
/*  Elle s'etirait sur toute la largeur et son anneau de focus          */
/*  dessinait un grand rectangle jaune vide. C'est un lien, pas un      */
/*  bandeau : largeur du contenu, et le chevron pivote a l'ouverture.   */
/* ------------------------------------------------------------------ */
.local-links__fold, .sector-links__fold { margin-top: 4px; }
.local-links__summary, .sector-links__summary {
  display: inline-flex;
  align-items: center;
  width: auto;
  cursor: pointer;
  list-style: none;
  border-top: 0;
  border-bottom: 2px solid var(--line);
  border-radius: 0;
  padding: 10px 2px;
  transition: color var(--transition), border-color var(--transition);
}
.local-links__summary::-webkit-details-marker,
.sector-links__summary::-webkit-details-marker { display: none; }
.local-links__summary:hover, .sector-links__summary:hover { border-bottom-color: var(--brand); }
.local-links__summary:focus-visible, .sector-links__summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  border-radius: 3px;
}
.local-links__summary svg, .sector-links__summary svg {
  transition: transform var(--transition);
}
details[open] > .local-links__summary svg,
details[open] > .sector-links__summary svg { transform: rotate(180deg); }

/* La liste depliee respire, et se detache du bouton. */
details[open] .local-links, details[open] .sector-links { margin-top: 22px; }

/* Le conteneur du repli portait encore ses propres filets haut et bas,
   qui traversaient toute la largeur a cote de la bascule. Seule la
   bascule porte desormais un trait, a la largeur de son texte. */
.local-links__fold, .sector-links__fold {
  border: 0;
  padding: 0;
}

/* ------------------------------------------------------------------ */
/*  R. BANNIERE DE TITRE : LA PHOTO DOIT SE VOIR                       */
/*  Comparaison avec l'ancien site : son bandeau laissait la photo      */
/*  lisible, le nouveau la noyait sous un voile a 88 %. On allege, et   */
/*  on garde la lisibilite du titre par une ombre portee sur le texte   */
/*  plutot qu'en assombrissant toute l'image.                           */
/* ------------------------------------------------------------------ */
.page-title.has-image::before {
  background: linear-gradient(
    180deg,
    rgba(10, 10, 9, .52) 0%,
    rgba(10, 10, 9, .40) 45%,
    rgba(10, 10, 9, .62) 100%
  );
}
.page-title.has-image .page-title__heading { text-shadow: 0 2px 22px rgba(0, 0, 0, .55); }
.page-title.has-image .page-title__subtitle { text-shadow: 0 1px 14px rgba(0, 0, 0, .6); }

/* Le flou de l'arriere-plan ecrasait le sujet : on le reduit nettement. */
.page-title__bg { filter: grayscale(1) blur(3px) brightness(.94); transform: scale(1.03); }

/* ------------------------------------------------------------------ */
/*  S. ETAPES ILLUSTREES                                               */
/*  Une etape avec image se compose en deux colonnes, et le cote        */
/*  alterne. L'image reprend la forme organique de la charte.           */
/* ------------------------------------------------------------------ */
.steps:has(.step__media) { display: grid; gap: clamp(48px, 6vw, 96px); }
.steps:has(.step__media) .step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  border: 0;
  padding: 0;
  margin: 0;
}
.steps:has(.step__media) .step:nth-child(even) .step__media { order: 2; }
@media (max-width: 820px) {
  .steps:has(.step__media) .step { grid-template-columns: 1fr; }
  .steps:has(.step__media) .step:nth-child(even) .step__media { order: 0; }
}

/* Une regle plus ancienne imposait 150 x 150 px et un cercle : elle
   ecrasait l'image en ellipse plate. On la neutralise ici. */
.steps:has(.step__media) .step__media { text-align: start; }
.steps:has(.step__media) .step__media img {
  width: 100%;
  height: auto;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  box-shadow: none;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  transition: border-radius .55s cubic-bezier(.4, 0, .2, 1);
}
.steps:has(.step__media) .step:nth-child(even) .step__media img {
  border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
}
.steps:has(.step__media) .step__media img:hover { border-radius: 52% 48% 38% 62% / 42% 56% 44% 58%; }
.step__media img:hover { border-radius: 52% 48% 38% 62% / 42% 56% 44% 58%; }

/* Le numero d'etape devient un reperage discret au-dessus du titre. */
.steps:has(.step__media) .step__num {
  position: static;
  display: inline-flex;
  width: auto; height: auto;
  background: none;
  color: var(--muted);
  font-family: var(--font-head);
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  margin-bottom: 12px;
}
.steps:has(.step__media) .step__num::after {
  content: ''; display: inline-block; width: 26px; height: 2px;
  background: var(--brand); margin-inline-start: 12px; vertical-align: middle;
}
@media (prefers-reduced-motion: reduce) { .step__media img { transition: none; } }

/* ------------------------------------------------------------------ */
/*  T. MAILLAGE VILLES ET METIERS : DEUX COLONNES, UNE SEULE BANDE     */
/*  Chaque reseau occupait une bande pleine largeur : deux titres, deux */
/*  bascules et beaucoup de vide pour peu de contenu visible. Les deux  */
/*  sont desormais cote a cote dans une seule bande beige.              */
/* ------------------------------------------------------------------ */
.pre-footer {
  background: var(--soft);
  padding-block: clamp(48px, 6vw, 88px);
}
.pre-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}
/* Les sections perdent leur bande et leur conteneur : c'est la grille
   ci-dessus qui gere la largeur et les marges. */
/* .block.pad-small et .block.pad-normal ont une specificite superieure a
   « .pre-footer__grid > section » : le second bloc gardait donc 64 px de
   marge haute et demarrait plus bas que le premier. On qualifie. */
.pre-footer__grid > section.block {
  padding: 0;
  background: none;
  border: 0;
  min-width: 0;
}
.pre-footer__grid > section > .container {
  max-width: none;
  padding: 0;
  width: 100%;
}
/* Titres plus courts dans une demi-colonne. */
.pre-footer__grid .section-head { margin-bottom: 20px; }
.pre-footer__grid .section-head > h2 { font-size: var(--step-2); max-width: 18ch; }
.pre-footer__grid .section-head__sub { font-size: 14.5px; max-width: 46ch; }
/* Les liens tiennent sur deux colonnes a l'interieur de chaque moitie. */
.pre-footer__grid .local-links__list,
.pre-footer__grid .sector-links__list {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
@media (max-width: 760px) {
  .pre-footer__grid { gap: 34px; }
}

/* Le bloc « villes » gardait un filet superieur herite de sa presentation
   en bande : dans une colonne, il dessinait un trait orphelin au-dessus
   du titre. Les deux colonnes s'alignent aussi sur une meme ligne haute. */
.pre-footer__grid > section { border-top: 0; }
.pre-footer__grid > section > .container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* La bascule se cale en bas de colonne : les deux boutons sont alignes
   meme quand les sous-titres n'ont pas le meme nombre de lignes. */
.pre-footer__grid details { margin-top: auto; }

/* ------------------------------------------------------------------ */
/*  U. SURVOL DES BOITES A ICONES : SOBRE                              */
/*  Restaient trois effets empiles herites de couches successives :     */
/*  un trait jaune qui se depliait en haut de la carte, un halo jaune   */
/*  sous l'icone, et une rotation de l'icone. Sur des services          */
/*  secondaires sans fond, le trait flottait dans le vide.              */
/*  Le survol se contente desormais d'assombrir le titre et l'icone.    */
/* ------------------------------------------------------------------ */
.icon-box::after { content: none; }
.icon-box:hover { transform: none; box-shadow: none; }
.icon-box:hover .icon-box__icon {
  transform: none;
  box-shadow: none;
  filter: none;
}
/* Sur une carte pleine, l'icone garde son aplat jaune au survol. */
.bg-white .icon-box:hover .icon-box__icon,
.bg-soft .icon-box:hover .icon-box__icon,
.block:not([class*="bg-"]) .icon-box:hover .icon-box__icon { background: var(--brand); }
/* Sur les services secondaires, qui n'ont ni fond ni cadre, seule
   l'encre change : c'est le seul signal dont un lien a besoin. */
.block--icon_boxes.bg-white + .block--icon_boxes .icon-box:hover .icon-box__icon { background: none; }
.icon-box:hover h3, .icon-box:hover h4 { color: var(--ink); }
.icon-box:hover .icon-box__icon svg { color: var(--ink); }

/* ------------------------------------------------------------------ */
/*  V. REALISATIONS : LA LEGENDE EST SOUS L'IMAGE, PAS DESSUS          */
/*  Une couche anterieure superposait la legende a l'image, en blanc    */
/*  sur un assombrissement de l'image au survol. Le nouveau portfolio   */
/*  pose la legende SOUS le visuel, sur fond clair : les deux regles    */
/*  se superposaient et le titre sortait blanc sur beige, illisible,    */
/*  avec un voile gris sur le mockup. On neutralise l'ancienne.         */
/* ------------------------------------------------------------------ */
.portfolio__caption {
  position: static;
  transform: none;
  opacity: 1;
  background: none;
  padding: 18px 2px 0;
}
.portfolio__caption .portfolio__title { color: var(--ink); }
.portfolio__caption .portfolio__cat {
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--muted);
}
.portfolio__caption small { color: var(--muted); }

/* L'image ne s'assombrit plus : elle s'agrandit legerement, c'est tout. */
.portfolio__item:hover .portfolio__media img { transform: scale(1.03); filter: none; }
.portfolio__item:hover { transform: none; box-shadow: none; }
.portfolio__media { aspect-ratio: auto; }

/* ------------------------------------------------------------------ */
/*  W. TITRES DE SECTION CENTRES                                       */
/*  Le calage a gauche laissait les titres a l'ecart pendant que les    */
/*  grilles de cartes, elles, restaient centrees dans le conteneur :    */
/*  le decalage se voyait sur toutes les pages a cartes. Les titres     */
/*  sont donc centres partout, sur le meme axe que leur contenu.        */
/*  Les blocs de maillage en bas de page gardent leur calage a gauche : */
/*  ils sont en deux colonnes, un centrage y serait illisible.          */
/* ------------------------------------------------------------------ */
.section-head.align-center,
.align-center .section-head {
  text-align: center;
  margin-inline: auto;
  max-width: 820px;
}
.section-head.align-center > h2,
.section-head.align-center > h3 { max-width: 24ch; margin-inline: auto; }
.section-head.align-center .section-head__sub,
.section-head.align-center p { margin-inline: auto; max-width: 62ch; }
.section-head.align-center h2::before,
.align-center .section-head h2::before { margin-inline: auto; }
.section-head.align-center .section-head__eyebrow { justify-content: center; }

/* Exceptions : ce qui vit en colonne reste cale a gauche. */
.pre-footer__grid .section-head,
.pre-footer__grid .section-head > h2,
.pre-footer__grid .section-head__sub {
  text-align: start;
  margin-inline: 0;
}
.pre-footer__grid .section-head h2::before { margin-inline: 0; }
/* La charniere « et tout ce qui va avec » reste a gauche : c'est une
   transition dans une section, pas un titre de section. */
.section-head:not(:has(h2)):not(:has(h3)) { text-align: start; }
.section-head:not(:has(h2)):not(:has(h3)) .section-head__sub { margin-inline: 0; }

/* ------------------------------------------------------------------ */
/*  X. CHIFFRES CLES : L'ICONE PORTE LA COULEUR                        */
/*  Le petit trait jaune au-dessus de chaque chiffre faisait un         */
/*  troisieme element a lire avant d'arriver au nombre, et l'icone      */
/*  etait si petite et si pale qu'on ne la voyait pas. On supprime le   */
/*  trait, on double l'icone et on lui donne le jaune : un seul accent, */
/*  au bon endroit.                                                     */
/* ------------------------------------------------------------------ */
.stat { padding-top: 0; gap: 14px; }
.stat::before { content: none; }

.stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-soft, #FFFBE0);
  color: var(--ink);
  opacity: 1;
}
.stat__icon svg { width: 26px; height: 26px; stroke-width: 1.7; }
.bg-soft .stat__icon { background: var(--brand); color: var(--ink); opacity: 1; }
.bg-soft .stat__icon svg { width: 26px; height: 26px; stroke-width: 1.7; }
.bg-dark .stat__icon { background: rgba(255, 255, 255, .08); color: var(--brand); }

/* Le chiffre gagne en presence maintenant qu'il n'est plus precede
   d'un trait : c'est lui le sujet de la bande. */
.stats .stat__num, .stat__number {
  font-size: clamp(36px, 3.8vw, 54px);
  font-weight: 600;
}

/* Libelles : une largeur commune, pour que les retours a la ligne
   tombent au meme endroit d'une colonne a l'autre. */
.stat__label {
  max-width: 19ch;
  font-size: 12px;
  letter-spacing: .09em;
  line-height: 1.5;
}

/* Les filets de separation s'arretent avant le haut et le bas : ils
   separent les colonnes sans dessiner une grille de tableau. */
.stats { align-items: center; }
.stat {
  border-inline-start: 0;
  position: relative;
}
.stat:not(:first-child)::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 12%;
  height: 76%;
  width: 1px;
  background: rgba(17, 17, 16, .10);
}
.bg-dark .stat:not(:first-child)::after { background: rgba(255, 255, 255, .14); }
@media (max-width: 860px) {
  .stat:nth-child(odd)::after { content: none; }
}
@media (max-width: 420px) {
  .stat::after { content: none; }
}

/* ------------------------------------------------------------------ */
/*  Y. LES RANGEES DE BOUTONS NE SONT PAS DU TEXTE                     */
/*  La regle « p { max-width: 66ch } » sert la largeur de lecture, mais */
/*  elle s'appliquait aussi aux paragraphes qui ne contiennent qu'un    */
/*  bouton : le bouton se centrait dans une boite de 790 px calee a     */
/*  gauche, donc 195 px a gauche du centre reel de la page.             */
/* ------------------------------------------------------------------ */
.posts__all,
.section-actions,
.hero__actions,
.portfolio__more,
p:has(> .btn:only-child),
p:has(> .btn:first-child:last-child) {
  max-width: none;
}
.posts__all, .section-actions, .portfolio__more { display: flex; flex-wrap: wrap; gap: 14px; }
.align-center.posts__all,
.align-center .section-actions,
.align-center.section-actions,
.align-center .portfolio__more { justify-content: center; }

/* Sur l'accueil les titres sont centres : les boutons de fin de section
   le sont aussi, sinon ils pendent a gauche sous un bloc centre. */
.posts__all,
.section-actions,
.portfolio__more { justify-content: center; }

/* ------------------------------------------------------------------ */
/*  Z. CARTE TARIF : LE PRIX NE DOIT PAS ECRASER L'OFFRE               */
/*  Le montant sortait a 42 px en graisse 800 quand le nom de la        */
/*  formule tenait dans 18 px : on lisait « 1 200 TND » avant de savoir */
/*  de quelle formule il s'agit. On rapproche les deux et on resserre   */
/*  les blancs verticaux de la carte.                                   */
/* ------------------------------------------------------------------ */
.price-card__name {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 4px;
}
.price-card__prefix {
  font-size: 11px;
  letter-spacing: .12em;
  margin-bottom: 2px;
}
.price-card__amount {
  font-size: clamp(28px, 2.4vw, 34px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.price-card__amount--2 { font-size: .56em; font-weight: 500; opacity: .72; }
.price-card__price { margin-bottom: 14px; }
.price-card { padding: 30px 26px 26px; }
.price-card__text { margin-bottom: 18px; }

/* ------------------------------------------------------------------ */
/*  AA. GRILLE TARIFAIRE : CENTRAGE ET BLANCS                          */
/*  La mention de bas de grille heritait de « p { max-width: 66ch } » : */
/*  elle se calait a gauche dans une boite de 568 px alors que le reste */
/*  de la section est centre. Les blancs verticaux sont aussi resserres.*/
/* ------------------------------------------------------------------ */
.pricing__note {
  max-width: 72ch;
  margin-inline: auto;
  margin-top: clamp(22px, 2.4vw, 34px);
  text-align: center;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* Plus de pastille au-dessus de la carte mise en avant : le liseré et
   le fond suffisent, et on ne reserve plus la place de l'etiquette. */
.price-card::before,
.price-card.is-featured::before { content: none; }
.price-card.is-featured {
  border-color: transparent;
  background: var(--white);
  box-shadow: none;
}
.bg-soft .price-card.is-featured { background: var(--white); }

/* Les cartes s'alignent en haut et prennent la meme hauteur : plus de
   colonne plus courte que sa voisine avec du vide en dessous. */
.pricing__grid { align-items: stretch; }
.price-card { display: flex; flex-direction: column; }
.price-card__features { flex: 1; }
.price-card .btn { margin-top: auto; }

/* ------------------------------------------------------------------ */
/*  AB. CARTES TARIF : LES LIGNES S'ALIGNENT D'UNE CARTE A L'AUTRE     */
/*  Les descriptions n'ont pas le meme nombre de lignes : la liste de   */
/*  la premiere carte demarrait plus haut que celle de ses voisines, et */
/*  laissait un blanc sous son texte. Une sous-grille cale chaque rang  */
/*  (nom, prix, filet, texte, liste, bouton) sur la meme ligne.         */
/* ------------------------------------------------------------------ */
.pricing.cols-3, .pricing.cols-2, .pricing.cols-4 { align-items: stretch; }

/* La sous-grille supposait un nombre de rangs fixe par carte, ce que la
   structure ne garantit pas. On reserve donc simplement deux lignes a la
   description : toutes les listes demarrent alors a la meme hauteur, et
   les boutons se calent en bas par « margin-top: auto ». */
.price-card { display: flex; flex-direction: column; }
/* flex: 0 0 auto — une regle plus ancienne donnait un flex-grow a ce
   paragraphe : il s'etirait pour absorber la difference de hauteur entre
   cartes, et mesurait 132, 95 puis 49 px pour le meme texte de deux
   lignes. C'est la liste, et elle seule, qui absorbe l'espace restant. */
.price-card__text {
  flex: 0 0 auto;
  min-height: calc(2 * 1.65em);
  margin-bottom: 18px;
}
.price-card__features { flex: 1; }
.price-card .btn { margin-top: auto; }

.price-card__text { margin-bottom: 16px; }
.price-card__features { margin-bottom: 20px; }

/* ------------------------------------------------------------------ *
 * Couche AC : logo d'en-tete agrandi.
 * Le logo est un 280x80 (ratio 3,5) : a 50px de haut il pesait 175px
 * de large dans un header de 84px, soit une marque discrete au point
 * de se faire oublier. On passe a 60px (210px de large), en gardant
 * 12px d'air de chaque cote. Declare en fin de feuille pour passer
 * devant la regle d'origine et sa variante mobile.
 * ------------------------------------------------------------------ */
.header__logo img { max-height: 60px; }
@media (max-width: 900px) { .header__logo img { max-height: 52px; } }