@tailwind base;
@tailwind components;
@tailwind utilities;

/* Champs de formulaire de l'admin, a la couleur de l'admin (#0084b7). */
@layer components {
  .admin-field {
    @apply w-full border border-gray-300 rounded-lg text-sm transition focus:ring-2 focus:ring-[#0084b7]/20 focus:border-[#0084b7] focus:outline-none;
  }
  .admin-input    { @apply admin-field h-10 px-3; }
  .admin-textarea { @apply admin-field px-3 py-2; }
  .admin-select   { @apply admin-field h-10 pl-3 pr-9 bg-white appearance-none cursor-pointer; }
}

/* Base styles */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Couleur visible en overscroll (rebond Safari/iOS) : slate Agryco,
     coherent avec les sections sombres (hero, footer). */
  background-color: #161c24;
}

body {
  font-family: var(--font-secondary), system-ui, -apple-system, sans-serif;
  background: var(--color-background);
  color: var(--color-text);
}


/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f7f7f8; }
::-webkit-scrollbar-thumb { background: #d9d9de; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #b8b8c0; }

/* Corps d'article de blog (Markdown rendu puis decore par ContentDecorator).
   Base typographique ; la charte Agryco (.article-prose, plus bas) la complete
   et l'emporte sur les proprietes communes. */
.article-prose > *:first-child { margin-top: 0; }
.article-prose h1 { @apply text-4xl font-bold text-gray-900 mt-14 mb-5 leading-tight tracking-tight; }
.article-prose h2 { @apply text-3xl font-bold text-gray-900 mt-12 mb-5 leading-tight tracking-tight; }
.article-prose h3 { @apply text-2xl font-bold text-gray-900 mt-10 mb-4 leading-snug; }
.article-prose h4 { @apply text-xl font-bold text-gray-900 mt-8 mb-3; }

/* Ancres des titres, visibles au survol */
.article-prose h2,
.article-prose h3,
.article-prose h4 {
  position: relative;
  scroll-margin-top: 100px; /* compense la navbar fixe lors d'un saut #ancre */
}
.article-prose .anchor-link {
  @apply text-gray-300 ml-2 font-normal no-underline;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.article-prose .anchor-link:hover { color: var(--color-primary); }
.article-prose h2:hover .anchor-link,
.article-prose h3:hover .anchor-link,
.article-prose h4:hover .anchor-link,
.article-prose .anchor-link:focus {
  opacity: 1;
}

.article-prose p  { line-height: 1.75; }
.article-prose li { line-height: 1.7; }
.article-prose blockquote { @apply italic my-8; font-size: 1.25rem; }
.article-prose figure { @apply rounded-lg my-8 max-w-full h-auto; }
.article-prose figcaption { @apply text-sm text-gray-500 italic text-center mt-2; }
.article-prose pre {
  @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm my-8;
}
.article-prose code {
  @apply bg-gray-100 text-gray-800 px-1.5 py-0.5 rounded text-sm font-mono;
}
.article-prose pre code { @apply bg-transparent text-gray-100 p-0; }
.article-prose table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.article-prose th,
.article-prose td { border: 1px solid var(--color-border, #e5e7eb); padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; }
.article-prose th { background: var(--color-surface); color: var(--color-text); font-weight: 600; }


/* ============================================================
   Theme Nexio — scope a [data-theme="nexio"] (page /etudes only)
   Bascule la palette lime DPS vers le gradient cyan/violet Nexio
   et adapte le contenu light vers un fond dark Nexio.
   Place a la fin du fichier pour gagner la cascade contre les
   utilities Tailwind a specificite egale.
   ============================================================ */

[data-theme="nexio"] {
  background: #0B0B14;
  color: #fff;
  position: relative;
  overflow-x: hidden;
}

/* Grille subtile en arriere-plan */
[data-theme="nexio"]::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(124, 58, 237, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 183, 224, 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}
/* Le ::before grid est en z-index: 0, le contenu naturel passe au-dessus sans override. */

/* --- Override gradient-text (defini en lime plus haut) en gradient Nexio --- */
[data-theme="nexio"] .gradient-text {
  background: linear-gradient(135deg, #00B7E0 0%, #7C3AED 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* --- Accents lime DPS -> gradient/teintes Nexio --- */
[data-theme="nexio"] .text-lime-400,
[data-theme="nexio"] .text-lime-500,
[data-theme="nexio"] .text-lime-700 { color: #A78BFA; }
[data-theme="nexio"] .text-lime-600 { color: #00B7E0; }

[data-theme="nexio"] .bg-lime-400,
[data-theme="nexio"] .bg-lime-500 { background: linear-gradient(135deg, #00B7E0 0%, #7C3AED 100%); color: white; }
[data-theme="nexio"] .hover\:bg-lime-300:hover,
[data-theme="nexio"] .hover\:bg-lime-600:hover { background: linear-gradient(135deg, #33C6E6 0%, #9333EA 100%); }
[data-theme="nexio"] .bg-lime-400\/5  { background-color: rgba(124, 58, 237, 0.08); }
[data-theme="nexio"] .bg-lime-400\/10 { background-color: rgba(0, 183, 224, 0.12); }
[data-theme="nexio"] .bg-lime-400\/15 { background-color: rgba(0, 183, 224, 0.18); }
[data-theme="nexio"] .bg-lime-400\/20 { background-color: rgba(124, 58, 237, 0.22); }
[data-theme="nexio"] .bg-lime-400\/25 { background-color: rgba(124, 58, 237, 0.28); }
[data-theme="nexio"] .bg-lime-400\/30 { background-color: rgba(124, 58, 237, 0.32); }
[data-theme="nexio"] .bg-lime-500\/10 { background-color: rgba(124, 58, 237, 0.12); }
[data-theme="nexio"] .bg-lime-500\/20 { background-color: rgba(124, 58, 237, 0.22); }
[data-theme="nexio"] .bg-lime-50 { background-color: rgba(124, 58, 237, 0.10); }
[data-theme="nexio"] .bg-lime-200 { background-color: rgba(167, 139, 250, 0.25); }

[data-theme="nexio"] .border-lime-400 { border-color: #7C3AED; }
[data-theme="nexio"] .border-lime-400\/20 { border-color: rgba(124, 58, 237, 0.30); }
[data-theme="nexio"] .border-lime-100,
[data-theme="nexio"] .border-lime-200 { border-color: rgba(167, 139, 250, 0.30); }
[data-theme="nexio"] .hover\:border-lime-400:hover { border-color: #A78BFA; }

[data-theme="nexio"] [class*="from-lime"][class*="to-lime"] {
  background-image: linear-gradient(to right, #00B7E0 0%, #7C3AED 100%);
}

[data-theme="nexio"] .focus\:ring-lime-200:focus { --tw-ring-color: rgba(0, 183, 224, 0.35); }
[data-theme="nexio"] .focus\:border-lime-500:focus { border-color: #7C3AED; }

/* --- Boutons --- */
[data-theme="nexio"] .btn-primary {
  background: linear-gradient(135deg, #00B7E0 0%, #7C3AED 100%);
  color: white;
  box-shadow: 0 10px 30px -8px rgba(124, 58, 237, 0.55);
}
[data-theme="nexio"] .btn-primary:hover {
  background: linear-gradient(135deg, #33C6E6 0%, #9333EA 100%);
  box-shadow: 0 16px 44px -8px rgba(124, 58, 237, 0.70);
}
[data-theme="nexio"] .btn-outline {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}
[data-theme="nexio"] .btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(167, 139, 250, 0.5);
}

/* --- Backgrounds --- */
[data-theme="nexio"] .bg-dark-50  { background-color: rgba(255, 255, 255, 0.04); }
[data-theme="nexio"] .bg-dark-100 { background-color: rgba(255, 255, 255, 0.06); }
[data-theme="nexio"] .bg-dark-900 { background-color: rgba(11, 11, 20, 0.92); }
/* bg-white des grandes sections (section.bg-white) => fondu dans le theme dark */
[data-theme="nexio"] section.bg-white { background-color: transparent; }
[data-theme="nexio"] .peer-checked\:bg-lime-50 { background-color: rgba(167, 139, 250, 0.95); }

/* === CARDS (bg-white + border-2 + rounded-2xl) => surface violet pale + texte violet fonce === */
[data-theme="nexio"] .bg-white.border-2.rounded-2xl,
[data-theme="nexio"] .bg-white.border.rounded-2xl,
[data-theme="nexio"] .bg-white.border-2.rounded-xl,
[data-theme="nexio"] .bg-white.border.rounded-xl {
  background-color: rgba(199, 184, 250, 0.95);
  border-color: rgba(124, 58, 237, 0.30);
}
[data-theme="nexio"] .bg-white.border-2.rounded-2xl .text-dark-900,
[data-theme="nexio"] .bg-white.border.rounded-2xl .text-dark-900,
[data-theme="nexio"] .bg-white.border-2.rounded-xl .text-dark-900,
[data-theme="nexio"] .bg-white.border.rounded-xl .text-dark-900 { color: #1E1B4B; }
[data-theme="nexio"] .bg-white.border-2.rounded-2xl .text-dark-800,
[data-theme="nexio"] .bg-white.border.rounded-2xl .text-dark-800,
[data-theme="nexio"] .bg-white.border-2.rounded-xl .text-dark-800,
[data-theme="nexio"] .bg-white.border.rounded-xl .text-dark-800 { color: #2E1065; }
[data-theme="nexio"] .bg-white.border-2.rounded-2xl .text-dark-700,
[data-theme="nexio"] .bg-white.border.rounded-2xl .text-dark-700,
[data-theme="nexio"] .bg-white.border-2.rounded-xl .text-dark-700,
[data-theme="nexio"] .bg-white.border.rounded-xl .text-dark-700 { color: #312E81; }
[data-theme="nexio"] .bg-white.border-2.rounded-2xl .text-dark-600,
[data-theme="nexio"] .bg-white.border.rounded-2xl .text-dark-600,
[data-theme="nexio"] .bg-white.border-2.rounded-xl .text-dark-600,
[data-theme="nexio"] .bg-white.border.rounded-xl .text-dark-600 { color: #3730A3; }
[data-theme="nexio"] .bg-white.border-2.rounded-2xl .text-dark-500,
[data-theme="nexio"] .bg-white.border.rounded-2xl .text-dark-500,
[data-theme="nexio"] .bg-white.border-2.rounded-xl .text-dark-500,
[data-theme="nexio"] .bg-white.border.rounded-xl .text-dark-500 { color: #4338CA; }
[data-theme="nexio"] .bg-white.border-2.rounded-2xl .text-dark-400,
[data-theme="nexio"] .bg-white.border.rounded-2xl .text-dark-400,
[data-theme="nexio"] .bg-white.border-2.rounded-xl .text-dark-400,
[data-theme="nexio"] .bg-white.border.rounded-xl .text-dark-400 { color: #4F46E5; }
[data-theme="nexio"] .bg-white.border-2.rounded-2xl .text-lime-700,
[data-theme="nexio"] .bg-white.border.rounded-2xl .text-lime-700,
[data-theme="nexio"] .bg-white.border-2.rounded-xl .text-lime-700,
[data-theme="nexio"] .bg-white.border.rounded-xl .text-lime-700 { color: #7C3AED; }

/* === HOMOGÉNÉISATION DES ÉLÉMENTS INTERNES DES CARDS === */

/* Badges colorés à l'intérieur des cards (ex: "-60%", "EARLY BIRD") */
[data-theme="nexio"] .bg-white.border-2.rounded-xl .bg-lime-100,
[data-theme="nexio"] .bg-white.border-2.rounded-2xl .bg-lime-100 { background-color: rgba(124, 58, 237, 0.20); }
[data-theme="nexio"] .bg-white.border-2.rounded-xl .text-lime-800,
[data-theme="nexio"] .bg-white.border-2.rounded-2xl .text-lime-800 { color: #5B21B6; }

/* Mini-thumbnail document (rectangle illustration) — fond + lignes placeholder en violet pâle */
[data-theme="nexio"] .bg-white.border-2.rounded-xl .bg-dark-50,
[data-theme="nexio"] .bg-white.border-2.rounded-2xl .bg-dark-50 { background-color: rgba(255, 255, 255, 0.60); }
[data-theme="nexio"] .bg-white.border-2.rounded-xl .bg-dark-200,
[data-theme="nexio"] .bg-white.border-2.rounded-2xl .bg-dark-200 { background-color: rgba(124, 58, 237, 0.25); }

/* Barre supérieure du mini-thumbnail (gradient lime ou gris selon année) — homogénéise en cyan/violet */
[data-theme="nexio"] [class*="from-dark-3"][class*="to-dark-4"],
[data-theme="nexio"] [class*="from-dark-300"][class*="to-dark-400"] {
  background-image: linear-gradient(to right, #00B7E0 0%, #7C3AED 100%);
}

/* Bouton "+" (état non sélectionné) sur les cards à choisir */
[data-theme="nexio"] label.cursor-pointer .bg-dark-100 { background-color: rgba(124, 58, 237, 0.20); }
[data-theme="nexio"] label.cursor-pointer .bg-dark-100.text-dark-500,
[data-theme="nexio"] label.cursor-pointer .bg-dark-100 svg { color: #4338CA; }

/* Stepper wizard (Formule / Compléments / Envoi) — états inactifs en violet pâle */
[data-theme="nexio"] .step-circle { background-color: rgba(167, 139, 250, 0.20); color: rgba(167, 139, 250, 0.95); }
[data-theme="nexio"] .step-label { color: rgba(167, 139, 250, 0.80); }
/* Ligne de connexion entre les steps */
[data-theme="nexio"] [data-study-form-target="stepIndicator"] + .bg-dark-200 { background-color: rgba(167, 139, 250, 0.25); }

/* Navbar Nexio : dark opaque solide, fine bordure violette discrète en bas */
[data-theme="nexio"] nav#navbar {
  background-color: #0B0B14;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(124, 58, 237, 0.20);
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(124, 58, 237, 0.15);
}

/* --- Couleurs de texte --- */
[data-theme="nexio"] .text-dark-900 { color: #ffffff; }
[data-theme="nexio"] .text-dark-800 { color: rgba(255, 255, 255, 0.92); }
[data-theme="nexio"] .text-dark-700 { color: rgba(255, 255, 255, 0.85); }
[data-theme="nexio"] .text-dark-600 { color: rgba(255, 255, 255, 0.75); }
[data-theme="nexio"] .text-dark-500 { color: rgba(255, 255, 255, 0.65); }
[data-theme="nexio"] .text-dark-400 { color: rgba(255, 255, 255, 0.55); }
[data-theme="nexio"] .text-dark-300 { color: rgba(255, 255, 255, 0.40); }
[data-theme="nexio"] .text-dark-200 { color: rgba(255, 255, 255, 0.25); }
[data-theme="nexio"] .text-dark-100 { color: rgba(255, 255, 255, 0.15); }
[data-theme="nexio"] .hover\:text-dark-900:hover { color: #fff; }

/* --- Bordures --- */
[data-theme="nexio"] .border-dark-100 { border-color: rgba(255, 255, 255, 0.08); }
[data-theme="nexio"] .border-dark-200 { border-color: rgba(255, 255, 255, 0.12); }
[data-theme="nexio"] .border-dark-300 { border-color: rgba(255, 255, 255, 0.18); }
[data-theme="nexio"] .border-dark-400 { border-color: rgba(255, 255, 255, 0.25); }
[data-theme="nexio"] .hover\:border-dark-400:hover,
[data-theme="nexio"] .hover\:border-dark-900:hover { border-color: rgba(167, 139, 250, 0.55); }
[data-theme="nexio"] .peer-checked\:border-lime-400 { border-color: #A78BFA; }

/* --- Hero mesh --- */
[data-theme="nexio"] .hero-mesh {
  background:
    radial-gradient(ellipse at top right, rgba(124, 58, 237, 0.18), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(0, 183, 224, 0.18), transparent 55%);
}

/* --- Logo 5P glow --- */
[data-theme="nexio"] .logo-5p-hero {
  filter: drop-shadow(0 20px 50px rgba(124, 58, 237, 0.45));
}

/* --- Inputs / forms : glass dark + texte clair --- */
[data-theme="nexio"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
[data-theme="nexio"] select,
[data-theme="nexio"] textarea {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}
[data-theme="nexio"] input::placeholder,
[data-theme="nexio"] textarea::placeholder { color: rgba(255, 255, 255, 0.40); }
[data-theme="nexio"] label { color: rgba(255, 255, 255, 0.92); }

/* Bouton "Precedent" du wizard : glass dark au lieu de blanc plein */
[data-theme="nexio"] button[data-study-form-target="prevBtn"] {
  background-color: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.15);
}
[data-theme="nexio"] button[data-study-form-target="prevBtn"]:hover {
  background-color: rgba(255, 255, 255, 0.10);
  border-color: rgba(167, 139, 250, 0.55);
  color: #fff;
}

/* Cards selectionnees (peer-checked) : glow violet */
[data-theme="nexio"] .peer:checked + .h-full,
[data-theme="nexio"] .peer:checked ~ .h-full {
  background-color: rgba(124, 58, 237, 0.18);
  border-color: #A78BFA;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.45), 0 10px 30px -10px rgba(124, 58, 237, 0.40);
}
/* ============================================================
   Agryco Services — Design system (site public)
   Palette claire + police Belanosima/DM Sans. Classes
   namespacees (.home-*, .site-*, .brand-*, .container-*).
   ============================================================ */
.font-primary   { font-family: var(--font-primary); }
.font-secondary { font-family: var(--font-secondary); }

:root {
  --color-primary: #ffb802;
  --color-secondary: #343b45;
  --color-background: #fff;
  --color-surface: #f7f5ef;
  --color-surface-soft: #fbfaf7;
  --color-border: #343b4521;
  --color-text: #343b45;
  --color-muted: #677783;
  --color-brand-ads: #ffb802;
  --color-brand-data: #93c83c;
  --color-brand-research: #0084b7;
  --color-muted-alt: #a0a0a0;
  --color-accent-yellow: #ffb802;
  --color-accent-yellow-light: #fff626;
  --color-accent-yellow-strong: #ffd302;
  --color-accent-pink: #f12e91;
  --color-accent-blue: #0084b7;
  --color-accent-teal: #008e82;
  --color-accent-green: #93c83c;
  --color-accent-slate: #49566a;
  --font-primary: "Belanosima", sans-serif;
  --font-secondary: "DM Sans", sans-serif;
  --container-width: 1176px;
  --container-width-wide: 1410px;
  --radius-sm: 4px;
  --radius-md: 15px;
  --radius-lg: 30px;
  --radius-xl: 36px;
  --radius-card: 16px;
  --radius-panel: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px #0000004d;
  --shadow-md: 7px 11px 20px 1px #0000000d;
  --shadow-lg: 0 20px 45px #00000024;
  --shadow-soft: 0 18px 50px #262d3714;
  --shadow-card: 0 14px 36px #262d3712;
  --transition-fast: 0.3s ease;
  --transition-normal: 0.4s linear;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}
.home-page {
  --home-hero-radius: 24px;
}
.container-site {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 15px;
}
.container-wide {
  width: min(100% - 30px, var(--container-width-wide));
  margin-inline: auto;
}
.site-header-inner {
  transition: max-width 0.3s;
}
/* La barre reprend la geometrie de la banniere (15 px de marge, 1 380 px de
   large, meme arrondi) sur toutes les pages : elle s'y aligne au bord pres. */
.site-header {
  padding: 15px 15px 0;
}
.site-header-inner {
  max-width: 1380px;
}
.site-header.nav-new .site-header-inner {
  max-width: 1340px;
}
.site-nav {
  border-radius: 22px;
}
.site-header:not(.nav-new) .site-nav {
  border-radius: var(--home-hero-radius, 22px);
}
/* Sous 576 px, la banniere des pages internes n'a que 8 px de marge. */
@media (max-width: 575px) {
  .ads-page .site-header {
    padding-inline: 8px;
  }
}
.site-header.nav-new {
  padding-top: 0.5rem;
}
.site-header.nav-new .site-nav {
  box-shadow: none;
  background: #fff;
  border-color: #343b4514;
}
.site-logo-on-dark {
  display: none;
}
.home-page .site-header:not(.nav-new) .site-nav {
  box-shadow: none;
  background: #1e242d;
  border-color: #0000;
}
.home-page .site-header:not(.nav-new) .site-logo-on-light {
  display: none;
}
.home-page .site-header:not(.nav-new) .site-logo-on-dark {
  display: block;
}
.home-page .site-header:not(.nav-new) .site-nav-link {
  color: #ffffffd1;
}
.home-page .site-header:not(.nav-new) .site-nav-link:hover {
  /* barre sombre de l'accueil : le survol reste au jaune, sans graisse */
  color: var(--color-primary);
  font-weight: 500;
}
.home-page .site-header:not(.nav-new) .site-menu-toggle {
  background: #ffffff1a;
  border-color: #ffffff29;
}
.home-page .site-header:not(.nav-new) .menu-line {
  background: #fff;
}
.mobile-menu-open .site-header .site-nav {
  box-shadow: none !important;
  background: #fff !important;
  border-color: #343b4514 !important;
  border-radius: 22px !important;
}
.mobile-menu-open .site-header .site-logo-on-light {
  display: block !important;
}
.mobile-menu-open .site-header .site-logo-on-dark {
  display: none !important;
}
.mobile-menu-open .site-header .site-menu-toggle {
  background: var(--color-surface) !important;
  border-color: #0000 !important;
}
.mobile-menu-open .site-header .menu-line {
  background: var(--color-secondary) !important;
}
.mobile-menu-open .site-menu-toggle .menu-line:first-child {
  top: 21px;
  transform: rotate(45deg);
}
.mobile-menu-open .site-menu-toggle .menu-line:nth-child(2) {
  opacity: 0;
}
.mobile-menu-open .site-menu-toggle .menu-line:nth-child(3) {
  top: 21px;
  transform: rotate(-45deg);
}
.mobile-nav-panel {
  box-shadow:
    18px 0 60px #1419204d,
    inset 0 1px #ffffff0f;
}
.mobile-nav-panel:before {
  background: var(--color-primary);
  content: "";
  border-radius: 0 999px 999px 0;
  width: 4px;
  height: 4.5rem;
  position: absolute;
  top: 7rem;
  left: 0;
}
.brand-primary-button {
  background: var(--color-primary);
  transition-property: color, background-color, transform, box-shadow;
}
.brand-primary-button:hover {
  background: var(--color-accent-yellow-strong);
}
.ads-hero-section .container-wide {
  width: min(100%, var(--container-width-wide));
}
.ads-contact-section > .container-site {
  max-width: 850px;
}
.home-page main {
  overflow-x: clip;
}
.site-nav > a {
  align-items: center;
  min-height: 44px;
  display: flex;
}
.home-hero-shell {
  border-radius: var(--home-hero-radius);
  background: #1e242d;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  min-width: 0;
  max-width: 1380px;
  display: grid;
  position: relative;
}
.home-hero-layout {
  z-index: 1;
  width: 100%;
  min-width: 0;
  min-height: 760px;
  display: flex;
  position: relative;
}
.home-hero-media {
  border-radius: var(--home-hero-radius) var(--home-hero-radius) 0 0;
  background: #1e242d;
  height: auto;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.home-hero-video {
  filter: saturate(0.98) contrast(1.025);
  object-position: 52% center;
  display: block;
}
.home-hero-shade {
  z-index: 0;
  border-radius: var(--home-hero-radius) var(--home-hero-radius) 0 0;
  background:
    linear-gradient(#161c24b3, #161c24a1 58%, #161c24d1),
    linear-gradient(90deg, #161c2452, #161c2414);
  position: absolute;
  inset: 0;
}
.home-hero-content {
  background: 0 0;
  width: 100%;
  min-width: 0;
  min-height: 760px;
  padding-top: 7.25rem;
  padding-bottom: 3rem;
}
.home-hero-content > div {
  width: 100%;
  min-width: 0;
}
.home-hero-eyebrow:before {
  background: var(--color-primary);
  content: "";
  border-radius: 999px;
  flex: none;
  width: 1.75rem;
  height: 3px;
}
.home-hero-eyebrow {
  color: #ffffffe0;
}
.home-page #home-title {
  color: #fff;
  font-size: clamp(1.85rem, 9.2vw, 2.25rem);
  line-height: 0.94;
}
.home-hero-content > div > p:nth-of-type(2) {
  color: #ffffffd1;
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.75;
}
.home-hero-secondary {
  border-radius: var(--radius-pill);
  color: #fff;
  border: 1px solid #ffffff80;
  justify-content: center;
  align-items: center;
  gap: 0.65rem;
  display: inline-flex;
}
.home-hero-secondary span {
  transition: transform 0.25s;
}
.home-hero-secondary:hover {
  color: var(--color-secondary);
  background: #fff;
  border-color: #fff;
}
.home-hero-secondary:hover span {
  transform: translate(0.2rem);
}
.home-hero-content .brand-primary-button {
  border-radius: var(--radius-pill);
  box-shadow: none;
}
.home-hero-content .brand-primary-button:focus-visible,
.home-hero-secondary:focus-visible {
  outline-color: #fff;
}
.home-hero-benefits {
  counter-reset: hero-benefit;
  color: #ffffffe6;
  border-top: 1px solid #fff3;
  gap: 0.65rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  display: grid;
}
.home-hero-benefits li {
  counter-increment: hero-benefit;
  align-items: center;
  gap: 0.65rem;
  display: flex;
}
.home-hero-benefits li:before {
  width: 1.5rem;
  height: auto;
  color: var(--color-primary);
  letter-spacing: 0.08em;
  content: "0" counter(hero-benefit);
  background: 0 0;
  border-radius: 0;
  flex: none;
  font-size: 0.6875rem;
  font-weight: 800;
}
.home-hero-benefits + div {
  margin-top: 1.5rem;
}
.home-hero-stats {
  z-index: 2;
  background: var(--color-surface);
  width: 100%;
  min-width: 0;
  box-shadow: none;
  border: 0;
  border-top: 1px solid #343b4524;
  border-radius: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  display: grid;
  position: relative;
}
.home-hero-stats:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}
.home-hero-stat {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-align: center;
  background: 0 0;
  border: 0;
  border-radius: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 0;
  min-height: 112px;
  padding: 1rem 1.25rem;
  display: flex;
  position: relative;
}
.home-hero-stat:first-child {
  border-bottom: 1px solid #343b4521;
  grid-column: 1/-1;
  min-height: 104px;
}
.home-hero-stat + .home-hero-stat {
  border-left: 1px solid #343b4521;
}
.home-hero-stat dt {
  color: #343b45a3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.35;
}
.home-hero-stat dd {
  color: var(--color-secondary);
  justify-items: center;
  gap: 0.4rem;
  margin-top: 0.55rem;
  line-height: 1;
  display: grid;
}
.home-metric-value {
  color: var(--color-secondary);
  font-family: var(--font-primary);
  letter-spacing: -0.035em;
  white-space: nowrap;
  flex: none;
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  font-weight: 600;
  line-height: 0.9;
}
.home-metric-value small {
  color: var(--color-muted);
  font-family: var(--font-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  display: block;
}
.home-metric-detail {
  max-width: none;
  color: var(--color-muted);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}
.home-discovery-frame {
  position: relative;
}
.home-method-card {
  border-radius: var(--radius-panel);
  background: var(--color-secondary);
}
.home-solution-image,
.home-discovery-image {
  filter: saturate(0.93) contrast(1.035);
}
.home-discovery-image {
  transition:
    filter 0.5s,
    transform 0.7s;
}
.home-discovery-frame:hover .home-discovery-image {
  filter: saturate() contrast(1.02);
  transform: scale(1.015);
}
.home-expertise-tabs {
  width: 100%;
}
.home-expertise-tablist {
  border-radius: var(--radius-card);
  background: #fff;
  border: 1px solid #343b451f;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  padding: 0.35rem;
  display: grid;
}
.home-expertise-tab {
  min-width: 0;
  min-height: 48px;
  color: var(--color-muted);
  background: 0 0;
  border: 0;
  border-radius: 10px;
  padding: 0.7rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
  transition:
    background-color 0.22s,
    color 0.22s;
}
.home-expertise-tab:hover {
  color: var(--color-secondary);
  background: #343b450f;
}
.home-expertise-tab.active {
  background: var(--color-primary);
  color: var(--color-secondary);
}
.home-expertise-tab:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}
.home-expertise-panels {
  margin-top: 1rem;
}
.home-expertise-panel {
  border-radius: var(--radius-panel);
  background: #fff;
  border: 1px solid #343b451f;
  min-width: 0;
  display: grid;
  overflow: hidden;
}
.home-expertise-panel[hidden],
.home-expertise-panel.hidden {
  display: none;
}
.home-expertise-panel-media {
  aspect-ratio: 4/3;
  background: #e9ece3;
  min-width: 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.home-expertise-panel-media img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  max-height: none;
  transition: transform 0.6s;
  display: block;
}
.home-expertise-panel:hover .home-expertise-panel-media img {
  transform: scale(1.012);
}
.home-expertise-panel-copy {
  min-width: 0;
  color: var(--color-muted);
  flex-direction: column;
  justify-content: center;
  padding: 1.75rem 1.5rem 2rem;
  display: flex;
}
.home-expertise-panel-kicker {
  color: var(--color-primary);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 800;
}
.home-expertise-panel-copy h3 {
  color: var(--color-secondary);
  font-family: var(--font-primary);
  letter-spacing: -0.025em;
  text-transform: uppercase;
  font-size: clamp(2.35rem, 9vw, 3.5rem);
  font-weight: 600;
  line-height: 0.95;
}
.home-expertise-panel-copy h3 + p,
.home-expertise-panel-copy p + p,
.home-expertise-panel-copy ul + p {
  margin-top: 1.25rem;
}
.home-expertise-panel-copy > p:not(.home-expertise-panel-kicker) {
  font-size: 0.9375rem;
  line-height: 1.7;
}
.home-expertise-panel-copy strong {
  color: var(--color-secondary);
}
.home-expertise-points {
  color: var(--color-secondary);
  gap: 0.45rem;
  margin-top: 1.15rem;
  padding-left: 1.15rem;
  font-size: 0.875rem;
  line-height: 1.45;
  list-style: outside;
  display: grid;
}
.home-expertise-points li::marker {
  color: var(--color-primary);
}
.home-expertise-panel-link {
  width: fit-content;
  color: var(--color-secondary);
  border-bottom: 1px solid #343b4547;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.8;
  display: inline-flex;
}
.home-expertise-panel-link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.home-expertise-panel-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}
.home-solution-card {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition:
    box-shadow 0.35s,
    transform 0.35s;
}
.home-solution-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px #1e242d1a;
}
.home-solution-card:focus-visible {
  outline: 3px solid var(--solution-accent);
  outline-offset: 4px;
}
.solution-tone-ads {
  --solution-accent: var(--color-brand-ads);
}
.solution-tone-data {
  --solution-accent: var(--color-brand-data);
}
.solution-tone-research {
  --solution-accent: var(--color-brand-research);
}
.solution-index {
  background: var(--solution-accent);
}
.solution-kicker {
  color: var(--solution-accent);
}
@supports (color: color-mix(in lab, red, red)) {
  .solution-kicker {
    color: color-mix(in srgb, var(--solution-accent) 70%, white);
  }
}
.home-solution-card > div:last-child > span:last-child span {
  transition: transform 0.25s;
}
.home-solution-card:hover > div:last-child > span:last-child span {
  transform: translate(0.3rem);
}
.home-method-section {
  background: var(--color-surface-soft);
}
.home-method-step {
  --step-color: var(--color-accent-yellow-strong);
  background: 0 0;
  border: 0;
  border-radius: 0;
  padding: 0 1.5rem;
}
.home-method-step--yellow,
.home-method-step--green,
.home-method-step--blue {
  --step-color: var(--color-brand-ads);
}
.method-index {
  background: var(--step-color);
}
.home-discovery-card {
  border-radius: var(--radius-panel);
  background: var(--color-accent-teal);
  box-shadow: none;
}
.home-reviews-section {
  background: var(--color-surface);
}
.home-review-card {
  min-height: 350px;
  box-shadow: none;
  background: 0 0;
  border: 0;
  border-left: 1px solid #343b452e;
  border-radius: 0;
  padding: 1.75rem 2rem;
}
.home-review-card blockquote:before {
  height: 2rem;
  color: var(--color-primary);
  font-family: var(--font-primary);
  content: "“";
  margin-bottom: 1rem;
  font-size: 4.75rem;
  font-weight: 600;
  line-height: 0.75;
  display: block;
}
.home-contact-card {
  border-radius: var(--radius-panel);
  background: var(--color-secondary);
}
.home-contact-action {
  background: var(--color-accent-yellow-strong);
}
.home-contact-action > p {
  color: #343b45b8;
}
.home-contact-action .brand-primary-button {
  background: var(--color-secondary);
  color: #fff;
  box-shadow: none;
}
.home-contact-action .brand-primary-button:hover {
  background: #1e242d;
}
.home-contact-action > a {
  color: #343b45c2;
  text-decoration-color: #343b454d;
}
.home-contact-action > a:hover {
  color: var(--color-secondary);
}
.home-page footer {
  background: var(--color-secondary);
}
.review-avatar {
  border-radius: var(--radius-card);
  box-shadow: none;
  border: 0;
  flex: none;
}
@media (max-width: 575px) {
  .home-hero-video {
    filter: saturate(0.98) contrast(1.025);
    object-position: 52% center;
  }
  .home-hero-eyebrow {
    line-height: 1.4;
  }
  .home-hero-layout,
  .home-hero-content {
    min-height: 730px;
  }
  .home-hero-benefits li + li {
    border-top: 1px solid #ffffff1f;
    padding-top: 0.65rem;
  }
  .home-hero-stat:nth-child(2) {
    border-left: 0;
  }
  .home-page #myBtn {
    display: none;
  }
  .home-solution-card:hover,
  .home-solution-card:hover .home-solution-image {
    transform: none;
  }
  .home-reviews-carousel [data-carousel-target="previousButton"],
  .home-reviews-carousel [data-carousel-target="nextButton"] {
    flex: none;
  }
  .home-reviews-carousel [data-carousel-target="pagination"] {
    min-width: 0;
  }
  .home-method-step {
    padding: 0;
  }
  .home-method-step + .home-method-step {
    border-top: 1px solid #ffffff24;
    padding-top: 1.5rem;
  }
  .home-review-card {
    border-left: 0;
    min-height: 0;
    padding: 1.5rem 0.75rem;
  }
}
@media (max-width: 359px) {
  .home-hero-content {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .home-page #home-title {
    letter-spacing: -0.025em;
    font-size: clamp(1.85rem, 9.2vw, 2.1rem);
    line-height: 0.94;
  }
  .home-hero-content > div > p:first-child {
    letter-spacing: 0.14em;
    font-size: 0.6875rem;
  }
  .home-reviews-carousel [data-carousel-target="pagination"] > button {
    width: 1.625rem;
  }
  .home-method-card h2,
  .home-reviews-section h2 {
    font-size: 2.25rem;
  }
}
@media (min-width: 576px) {
  .home-expertise-tablist {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .home-expertise-tab {
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 0.875rem;
  }
  .home-expertise-panel-copy {
    padding: 2.5rem;
  }
  .home-method-step:first-child {
    padding-left: 0;
  }
  .home-method-step:last-child {
    padding-right: 0;
  }
  .home-method-step + .home-method-step {
    border-left: 1px solid #ffffff24;
  }
  .home-hero-shade {
    background:
      linear-gradient(#161c2414, #161c240f 56%, #161c249e),
      linear-gradient(90deg, #161c24f0, #161c24c7 54%, #161c2433 88%, #161c240a);
  }
  .home-hero-content {
    padding-top: 7.5rem;
    padding-bottom: 3.5rem;
  }
  .home-hero-content > div > p:nth-of-type(2) {
    font-size: 1.125rem;
    line-height: 2rem;
  }
  .home-page #home-title {
    font-size: clamp(2.75rem, 6vw, 3.25rem);
  }
  .home-hero-benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
  .home-hero-benefits li + li {
    border-left: 1px solid #ffffff29;
    padding-left: 1rem;
  }
  .home-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .home-hero-stat {
    min-width: 0;
    min-height: 136px;
    padding: 1.25rem 1.5rem;
  }
  .home-hero-stat:first-child {
    border-bottom: 0;
    grid-column: auto;
    min-height: 136px;
  }
  .home-hero-stat dt {
    letter-spacing: 0.11em;
    font-size: 0.6875rem;
  }
  .home-hero-stat dd {
    align-items: center;
    min-height: 0;
  }
  .home-metric-value {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-height: 0;
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    display: flex;
  }
  .home-metric-value small {
    margin: 0 0.4rem 0 0;
    display: inline-block;
  }
  .home-metric-detail {
    padding-bottom: 0;
    font-size: 0.8125rem;
  }
}
@media (min-width: 992px) {
  .home-page {
    --home-hero-radius: 32px;
  }
  .home-expertise-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 540px;
  }
  .home-expertise-panel-media {
    aspect-ratio: auto;
    min-height: 540px;
  }
  .home-expertise-panel-media img {
    width: 100%;
    max-height: none;
  }
  .home-expertise-panel-copy {
    padding: clamp(2.75rem, 4vw, 4.5rem);
  }
  .home-expertise-panel-copy h3 {
    font-size: clamp(3.25rem, 4.1vw, 4.5rem);
  }
  .home-hero-shell {
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 760px;
  }
  .home-hero-layout {
    min-height: 646px;
  }
  .home-hero-content {
    min-height: 646px;
    padding-top: 8.25rem;
    padding-bottom: 3.5rem;
  }
  .home-hero-content > div {
    max-width: 740px;
  }
  .home-hero-video {
    object-position: 56% center;
  }
  .home-hero-shade {
    background:
      linear-gradient(#161c240a, #161c2408 62%, #161c248a),
      linear-gradient(
        90deg,
        #161c24f5,
        #161c24db 38%,
        #161c2457 66%,
        #161c240a 88%
      );
  }
  .home-page #home-title {
    font-size: clamp(3rem, 4.3vw, 4rem);
  }
  .home-hero-stats {
    box-shadow: none;
    background: #fff;
    border: 0;
    border-top: 1px solid #343b4524;
    border-radius: 0;
  }
  .home-hero-stat {
    min-height: 144px;
    padding: 1.4rem 1.75rem;
  }
  .home-hero-stat dt {
    font-size: 0.6875rem;
  }
  .home-hero-stat dd {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    column-gap: 0;
    min-height: 0;
    display: grid;
  }
  .home-metric-value {
    flex-direction: column;
    align-items: center;
    min-height: 0;
    font-size: clamp(2.75rem, 3.4vw, 3.75rem);
  }
  .home-metric-value small,
  .home-hero-stat:first-child .home-metric-value:before {
    color: var(--color-muted);
    font-family: var(--font-secondary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 0.35rem;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
  }
  .home-hero-stat:first-child .home-metric-value:before {
    visibility: hidden;
    content: "Plus de";
  }
  .home-metric-detail {
    max-width: none;
    font-size: 0.875rem;
  }
}
@media (min-width: 1200px) {
  .home-solutions-grid {
    grid-template-columns: 1.12fr 0.94fr 1fr;
    align-items: end;
    gap: 1.25rem;
  }
  .home-solutions-grid .home-solution-card:first-child {
    min-height: 600px;
  }
  .home-solutions-grid .home-solution-card:nth-child(2) {
    min-height: 510px;
  }
  .home-solutions-grid .home-solution-card:nth-child(3) {
    min-height: 560px;
  }
}

/* ---------- Agryco Ads + primitives de page partagees (.page-*) ---------- */
.page-section {
  padding-block: clamp(4.5rem, 8vw, 8rem);
}
.page-kicker {
  color: var(--color-primary);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
}
.page-section-heading {
  max-width: 850px;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.page-section-heading--center {
  text-align: center;
  margin-inline: auto;
}
.page-section-heading h2 {
  max-width: 780px;
  color: var(--color-text);
  font-family: var(--font-primary);
  letter-spacing: -0.035em;
  text-wrap: balance;
  margin: 0;
  font-size: clamp(2.35rem, 5vw, 4.75rem);
  font-weight: 600;
  line-height: 0.96;
}
.page-section-heading--center h2 {
  margin-inline: auto;
}
.page-section-heading > p:last-child:not(.page-kicker) {
  max-width: 720px;
  color: var(--color-muted);
  margin: 1.5rem 0 0;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.75;
}
.page-section-heading--center > p:last-child:not(.page-kicker) {
  margin-inline: auto;
}
.page-primary-button {
  border-radius: var(--radius-pill);
  width: fit-content;
  min-height: 48px;
  color: var(--color-secondary);
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
  transition:
    transform 0.22s,
    background-color 0.22s;
  display: inline-flex;
}
.page-primary-button:hover {
  box-shadow: none;
  transform: translateY(-2px);
}
.page-primary-button:focus-visible,
.page-secondary-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}
.page-secondary-link {
  min-height: 44px;
  color: inherit;
  border-bottom: 1px solid;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.875rem;
  font-weight: 700;
  transition:
    color 0.2s,
    gap 0.2s;
  display: inline-flex;
}
.page-secondary-link:hover {
  color: var(--color-primary);
  gap: 0.9rem;
}
.ads-page {
  --page-accent: var(--color-brand-ads);
  background: var(--color-background);
}
.ads-main {
  padding-top: 96px;
  overflow: clip;
}
.ads-hero-section {
  padding: 0 15px clamp(3.5rem, 7vw, 6.5rem);
}
.ads-hero-section .container-wide {
  width: min(100%, var(--container-width-wide));
}
.ads-hero-shell {
  border-radius: var(--radius-xl);
  background: var(--color-secondary);
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
  min-height: 650px;
  display: grid;
  overflow: hidden;
}
.ads-hero-copy {
  color: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  padding: clamp(3rem, 6vw, 6rem);
  display: flex;
}
.ads-hero-copy h1 {
  font-family: var(--font-primary);
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin: 0;
  font-size: clamp(3.5rem, 7.4vw, 7rem);
  font-weight: 600;
  line-height: 0.86;
}
.ads-hero-intro {
  color: #ffffffb8;
  max-width: 650px;
  margin-top: 1.75rem;
  font-size: clamp(0.95rem, 1.35vw, 1.0625rem);
  line-height: 1.75;
}
.ads-hero-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
  display: flex;
}
.ads-hero-proof {
  border-top: 1px solid #ffffff24;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  max-width: 690px;
  margin-top: clamp(2.75rem, 5vw, 4.5rem);
  padding-top: 1.5rem;
  display: grid;
}
.ads-hero-proof li {
  min-width: 0;
  padding-right: 1.25rem;
}
.ads-hero-proof li + li {
  border-left: 1px solid #ffffff24;
  padding-left: 1.25rem;
}
.ads-hero-proof strong,
.ads-hero-proof span {
  display: block;
}
.ads-hero-proof strong {
  color: #fff;
  font-family: var(--font-primary);
  margin-bottom: 0.35rem;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 500;
  line-height: 1;
}
.ads-hero-proof span {
  color: #ffffff85;
  font-size: 0.75rem;
  line-height: 1.45;
}
.ads-hero-media {
  min-height: 650px;
  position: relative;
  overflow: hidden;
}
.ads-hero-media > img {
  object-fit: cover;
  object-position: 50% center;
  width: 100%;
  height: 100%;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.ads-hero-shell:hover .ads-hero-media > img {
  transform: scale(1.018);
}
.ads-hero-media:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, #343b4529, #0000 32%);
  position: absolute;
  inset: 0;
}
.ads-hero-brand {
  z-index: 1;
  background: #ffffffe6;
  border: 1px solid #ffffffb8;
  border-radius: 18px;
  justify-content: center;
  align-items: center;
  width: clamp(92px, 10vw, 132px);
  min-height: 64px;
  padding: 0.75rem;
  display: flex;
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
}
.ads-hero-brand img {
  width: 100%;
  height: auto;
}
.ads-ecosystem-strip {
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  background: #fff;
  border-radius: 0 0 24px 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
}
.ads-ecosystem-strip article {
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 1.25rem;
  min-width: 0;
  padding: 1.25rem 1.75rem;
  display: grid;
}
.ads-ecosystem-strip article + article {
  border-left: 1px solid var(--color-border);
}
.ads-ecosystem-strip img {
  object-fit: contain;
  width: 84px;
  height: 54px;
}
.ads-ecosystem-strip p {
  color: var(--color-muted);
  font-size: 0.8125rem;
  line-height: 1.55;
}
.ads-direct-section {
  background: var(--color-surface-soft);
}
.ads-direct-heading {
  max-width: 920px;
}
.ads-direct-layout {
  grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
  align-items: stretch;
  gap: clamp(1.5rem, 4vw, 4rem);
  display: grid;
}
.ads-direct-media {
  background: #ebe6d9;
  border-radius: 30px;
  justify-content: center;
  align-items: flex-end;
  min-height: 500px;
  display: flex;
  overflow: hidden;
}
.ads-direct-media img {
  width: min(100%, 560px);
  height: auto;
}
.ads-direct-options {
  align-content: center;
  gap: 0;
  display: grid;
}
.ads-direct-options .ads-option {
  border-top: 1px solid var(--color-border);
  text-align: left;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  min-height: 120px;
  padding: 1.5rem 0;
  transition:
    padding 0.22s,
    color 0.22s;
  display: grid;
}
.ads-direct-options .ads-option:last-child {
  border-bottom: 1px solid var(--color-border);
}
.ads-direct-options .ads-option:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}
.ads-option-icon {
  background: #fff;
  border-radius: 50%;
  place-items: center;
  width: 56px;
  height: 56px;
  display: grid;
}
.ads-option-icon img {
  object-fit: contain;
  width: 34px;
  height: 34px;
}
.ads-direct-options strong,
.ads-direct-options small {
  display: block;
}
.ads-direct-options strong {
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: clamp(1.3rem, 2.3vw, 1.8rem);
  font-weight: 500;
  line-height: 1.1;
}
.ads-direct-options small {
  color: var(--color-muted);
  margin-top: 0.4rem;
  font-size: 0.875rem;
  line-height: 1.45;
}
.ads-direct-options i {
  color: var(--color-muted-alt);
  font-size: 1rem;
}
.ads-media-carousel [data-carousel-target="viewport"],
.ads-spaces-carousel [data-carousel-target="viewport"] {
  margin-inline: -0.5rem;
}
.ads-media-card {
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: 22px;
  flex-direction: column;
  height: 100%;
  min-height: 310px;
  padding: 1.25rem;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
  display: flex;
}
.ads-media-card:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-4px);
}
.ads-media-card img {
  aspect-ratio: 16/9;
  background: var(--color-surface-soft);
  object-fit: contain;
  border-radius: 14px;
  width: 100%;
  margin-bottom: 1.5rem;
  padding: 1rem;
}
.ads-media-card strong {
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.ads-media-card ul {
  color: var(--color-muted);
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.8125rem;
  line-height: 1.55;
}
.ads-carousel-controls {
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  display: flex;
}
.ads-carousel-controls > button {
  border: 1px solid var(--color-border);
  width: 44px;
  height: 44px;
  color: var(--color-text);
  box-shadow: none;
  background: #fff;
  border-radius: 50%;
  flex: none;
  place-items: center;
  transition:
    background 0.2s,
    color 0.2s;
  display: grid;
}
.ads-carousel-controls > button:hover,
.ads-touchpoints-section {
  background: var(--color-secondary);
  color: #fff;
}
.ads-touchpoints-section .page-section-heading h2 {
  color: #fff;
}
.ads-touchpoints-section .page-section-heading > p:last-child {
  color: #ffffffa3;
}
.ads-touchpoint-grid {
  border-top: 1px solid #ffffff24;
  border-bottom: 1px solid #ffffff24;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  display: grid;
}
.ads-touchpoint-card {
  min-width: 0;
  padding: 2rem;
  position: relative;
}
.ads-touchpoint-card + .ads-touchpoint-card {
  border-left: 1px solid #ffffff24;
}
.ads-touchpoint-card img {
  object-fit: contain;
  width: 64px;
  height: 64px;
  margin-bottom: 3rem;
}
.ads-touchpoint-card span {
  color: #ffffff57;
  letter-spacing: 0.12em;
  font-size: 0.6875rem;
  font-weight: 700;
  position: absolute;
  top: 2rem;
  right: 2rem;
}
.ads-touchpoint-card h3 {
  color: #fff;
  max-width: 210px;
  font-family: var(--font-primary);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 500;
  line-height: 1.15;
}
.ads-premium-section {
  background: var(--color-surface);
}
.ads-premium-intro {
  background: #fff;
  border-radius: 28px;
  grid-template-columns: minmax(230px, 0.7fr) minmax(0, 1.3fr);
  align-items: center;
  max-width: 1040px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  display: grid;
  overflow: hidden;
}
.ads-premium-intro img {
  background: var(--color-primary);
  object-fit: contain;
  border-radius: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 250px;
  padding: 2rem;
}
.ads-premium-intro p {
  padding: clamp(2rem, 5vw, 4rem);
  font-size: 1rem;
  line-height: 1.75;
}
.ads-premium-intro strong {
  color: var(--color-text);
}
.ads-premium-grid {
  border-top: 1px solid var(--color-border);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1040px;
  margin-inline: auto;
  display: grid;
}
.ads-premium-grid > div {
  text-align: center;
  padding: 2rem 1.5rem 0;
}
.ads-premium-grid > div + div {
  border-left: 1px solid var(--color-border);
}
.ads-premium-grid img {
  object-fit: contain;
  width: 60px;
  height: 60px;
  margin: 0 auto 1.25rem;
}
.ads-premium-grid h3 {
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
}
.ads-store-layout {
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: 30px;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  display: grid;
  overflow: hidden;
}
.ads-store-copy {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(2.5rem, 6vw, 5rem);
  display: flex;
}
.ads-store-copy h2 {
  color: var(--color-text);
  font-family: var(--font-primary);
  letter-spacing: -0.04em;
  margin: 0 0 1.5rem;
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 600;
  line-height: 0.9;
}
.ads-store-copy > p:last-child {
  font-size: 1rem;
  line-height: 1.75;
}
.ads-store-layout figure {
  background: var(--color-surface);
  min-height: 500px;
  overflow: clip;
}
.ads-store-layout figure img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}
.ads-rocket-section {
  padding-top: 0;
}
.ads-rocket-card {
  background: var(--color-accent-teal);
  border-radius: 30px;
  min-height: 420px;
  position: relative;
  overflow: clip;
}
.ads-rocket-card picture,
.ads-rocket-card picture img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.ads-rocket-card picture img {
  object-fit: cover;
  object-position: center;
}
.ads-rocket-copy {
  z-index: 1;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: min(46%, 520px);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  display: flex;
  position: absolute;
  inset: 0 0 0 auto;
}
.ads-rocket-copy h2 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 0.95;
}
.ads-rocket-copy h3 {
  margin-top: 0.75rem;
}
.ads-rocket-copy p {
  color: #ffffffc2;
  line-height: 1.65;
}
.ads-spaces-section {
  background: var(--color-surface-soft);
}
.ads-space-card {
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: 28px;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  align-items: stretch;
  min-height: 500px;
  display: grid;
  overflow: hidden;
}
.ads-space-card > div:first-child {
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
}
.ads-space-card > div:first-child h2 {
  margin-bottom: 1rem;
  font-size: clamp(2rem, 4vw, 3.5rem);
}
.ads-space-card > div:first-child img {
  object-fit: contain;
  flex: 1;
  width: 100%;
  min-height: 0;
}
.ads-space-card > div:last-child {
  border-left: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(2rem, 5vw, 4rem);
  display: flex;
}
.ads-space-card h3 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.1;
}
.ads-event-section {
  background: var(--color-secondary);
  color: #fff;
  position: relative;
}
.ads-event-section:before {
  background: var(--color-primary);
  content: "";
  border-radius: 0 0 999px 999px;
  width: min(220px, 32vw);
  height: 5px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
}
.ads-event-section h2,
.ads-event-section p {
  color: #fff;
}
.ads-event-section h2 {
  font-size: clamp(2.75rem, 6vw, 5rem);
  line-height: 0.95;
}
.ads-event-section p {
  color: #ffffffb8;
  line-height: 1.75;
}
.ads-contact-section {
  background: #fff;
}
.ads-contact-section > .container-site {
  max-width: 850px;
}
.ads-contact-section h2 {
  margin-bottom: 1.25rem;
  font-size: clamp(2.75rem, 6vw, 5rem);
  line-height: 0.95;
}
.ads-contact-section .contact-form {
  border: 1px solid var(--color-border);
  background: var(--color-surface-soft);
  border-radius: 28px;
  margin-top: 2.5rem;
  padding: clamp(1.5rem, 5vw, 3.5rem);
}
.ads-contact-section .form-control {
  border-color: var(--color-border);
  background: #fff;
  border-radius: 10px;
  min-height: 48px;
  transition:
    border-color 0.18s,
    box-shadow 0.18s;
}
.ads-contact-section textarea.form-control {
  resize: vertical;
  min-height: 120px;
}
.ads-contact-section .form-control:focus {
  border-color: var(--color-primary);
  outline: 0;
  box-shadow: 0 0 0 3px #ffb80224;
}
.ads-contact-section .btn-primary {
  cursor: pointer;
  min-height: 50px;
  transition:
    transform 0.2s,
    background 0.2s;
}
.ads-contact-section .btn-primary:hover {
  background: var(--color-accent-yellow-strong);
  color: var(--color-secondary);
  transform: translateY(-2px);
}
@media (max-width: 991px) {
  .ads-main {
    padding-top: 88px;
  }
  .ads-hero-shell {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .ads-hero-copy {
    padding: clamp(2.25rem, 8vw, 4.5rem);
  }
  .ads-hero-media {
    min-height: 500px;
  }
  .ads-hero-media:after {
    background: linear-gradient(#343b452e, #0000 28%);
  }
  .ads-direct-layout,
  .ads-store-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .ads-touchpoint-grid,
  .ads-premium-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ads-touchpoint-card:nth-child(3),
  .ads-touchpoint-card:nth-child(4),
  .ads-premium-grid > div:nth-child(3),
  .ads-premium-grid > div:nth-child(4) {
    border-top: 1px solid #ffffff24;
  }
  .ads-touchpoint-card:nth-child(3),
  .ads-premium-grid > div:nth-child(3) {
    border-left: 0;
  }
  .ads-premium-grid > div:nth-child(3),
  .ads-premium-grid > div:nth-child(4) {
    border-top-color: var(--color-border);
  }
  .ads-store-layout figure {
    min-height: 420px;
  }
  .ads-rocket-copy {
    width: 56%;
  }
}
@media (max-width: 767px) {
  .ads-hero-proof {
    grid-template-columns: minmax(0, 1fr);
  }
  .ads-hero-proof li {
    padding: 0;
  }
  .ads-hero-proof li + li {
    border-top: 1px solid #ffffff24;
    border-left: 0;
    margin-top: 1rem;
    padding: 1rem 0 0;
  }
  .ads-ecosystem-strip {
    grid-template-columns: minmax(0, 1fr);
  }
  .ads-ecosystem-strip article + article {
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }
  .ads-premium-intro {
    grid-template-columns: minmax(0, 1fr);
  }
  .ads-premium-intro img {
    min-height: 200px;
  }
  .ads-rocket-card {
    min-height: 600px;
  }
  .ads-rocket-card picture:after {
    content: "";
    background: linear-gradient(#143b3c33 32%, #143b3ceb);
    position: absolute;
    inset: 0;
  }
  .ads-rocket-copy {
    justify-content: flex-end;
    width: 100%;
    inset: auto 0 0;
  }
  .ads-space-card {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .ads-space-card > div:first-child img {
    max-height: 390px;
  }
  .ads-space-card > div:last-child {
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }
}
@media (max-width: 575px) {
  .page-section {
    padding-block: 4.5rem;
  }
  .page-section-heading {
    margin-bottom: 2.5rem;
  }
  .ads-main {
    padding-top: 82px;
  }
  .ads-hero-section {
    padding-inline: 8px;
  }
  .ads-hero-shell {
    border-radius: 24px;
  }
  .ads-hero-copy {
    padding: 2.25rem 1.25rem 2.5rem;
  }
  .ads-hero-copy h1 {
    font-size: clamp(3.1rem, 18vw, 4.5rem);
  }
  .ads-hero-actions,
  .ads-hero-actions .page-primary-button {
    width: 100%;
  }
  .ads-hero-media {
    min-height: 420px;
  }
  .ads-hero-brand {
    top: 1rem;
    right: 1rem;
  }
  .ads-ecosystem-strip {
    margin-inline: 10px;
  }
  .ads-ecosystem-strip article {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 1rem;
    padding: 1.1rem;
  }
  .ads-ecosystem-strip img {
    width: 68px;
  }
  .ads-direct-media {
    min-height: 360px;
  }
  .ads-direct-options .ads-option {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 1rem;
    min-height: 104px;
  }
  .ads-direct-options i {
    display: none;
  }
  .ads-option-icon {
    width: 48px;
    height: 48px;
  }
  .ads-touchpoint-grid,
  .ads-premium-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ads-touchpoint-card,
  .ads-premium-grid > div {
    text-align: left;
    padding: 1.5rem 0;
    border-left: 0 !important;
  }
  .ads-touchpoint-card + .ads-touchpoint-card,
  .ads-premium-grid > div + div {
    border-top: 1px solid #ffffff24;
  }
  .ads-premium-grid > div + div {
    border-top-color: var(--color-border);
  }
  .ads-touchpoint-card img,
  .ads-premium-grid img {
    margin-left: 0;
    margin-right: 0;
  }
  .ads-touchpoint-card img {
    margin-bottom: 1.5rem;
  }
  .ads-store-layout figure {
    min-height: 300px;
  }
  .ads-rocket-card {
    border-radius: 24px;
    min-height: 680px;
  }
  .ads-rocket-copy {
    padding: 1.5rem;
  }
  .ads-space-card {
    border-radius: 22px;
  }
  .ads-contact-section .contact-form {
    border-radius: 20px;
  }
}
.ads-page .ads-hero-section {
  padding-bottom: clamp(5rem, 9vw, 9rem);
}
.ads-page .ads-hero-shell {
  border-top: 1px solid var(--color-border);
  background: #fff;
  border-radius: 0;
  min-height: 0;
  display: block;
  overflow: visible;
}
.ads-hero-masthead {
  border-bottom: 1px solid var(--color-border);
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  display: flex;
}
.ads-hero-masthead .page-kicker {
  margin: 0;
}
.ads-hero-masthead img {
  object-fit: contain;
  width: 112px;
  height: 48px;
}
.ads-page .ads-hero-copy {
  min-height: 0;
  color: var(--color-text);
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.75fr);
  align-items: end;
  gap: clamp(2.5rem, 7vw, 7rem);
  padding: clamp(3rem, 6.5vw, 6.5rem) 0 clamp(3.5rem, 6vw, 5.5rem);
  display: grid;
}
.ads-page .ads-hero-copy h1 {
  min-width: 0;
  color: var(--color-text);
  letter-spacing: -0.065em;
  flex-direction: column;
  margin: 0;
  font-size: clamp(6rem, 12vw, 11rem);
  line-height: 0.72;
  display: flex;
}
.ads-page .ads-hero-copy h1 span:last-child {
  color: var(--page-accent);
  margin-top: 0.12em;
  margin-left: 18%;
}
.ads-hero-narrative {
  max-width: 470px;
  padding-bottom: 0.35rem;
}
.ads-page .ads-hero-intro {
  max-width: none;
  color: var(--color-muted);
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
}
.ads-page .ads-hero-actions {
  margin-top: 1.75rem;
}
.ads-page .ads-hero-actions .page-secondary-link {
  color: var(--color-text);
}
.ads-page .ads-hero-media {
  border-radius: var(--radius-card);
  height: clamp(480px, 47vw, 650px);
  min-height: 0;
}
.ads-page .ads-hero-media > img {
  object-position: center 44%;
}
.ads-page .ads-hero-media:after {
  background: linear-gradient(#0000 65%, #121b2133);
}
.ads-page .ads-hero-proof {
  z-index: 2;
  border: 1px solid var(--color-border);
  background: #fff;
  border-right: 0;
  width: min(86%, 1080px);
  max-width: none;
  margin: -82px 0 0 auto;
  padding: 0;
  position: relative;
}
.ads-page .ads-hero-proof li {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 164px;
  padding: 1.75rem 2rem;
  display: flex;
}
.ads-page .ads-hero-proof li + li {
  border-left: 1px solid var(--color-border);
  padding-left: 2rem;
}
.ads-page .ads-hero-proof strong {
  color: var(--color-text);
  font-size: clamp(1.7rem, 3vw, 2.6rem);
}
.ads-page .ads-hero-proof span {
  max-width: 210px;
  color: var(--color-muted);
  font-size: 0.8125rem;
}
.ads-page .ads-ecosystem-strip {
  max-width: var(--container-width);
  border-top: 1px solid var(--color-border);
  border-right: 0;
  border-bottom: 1px solid var(--color-border);
  border-left: 0;
  border-radius: 0;
}
.ads-page .ads-ecosystem-strip article {
  min-height: 110px;
}
.ads-page .ads-direct-section {
  background: var(--color-secondary);
}
.ads-page .ads-direct-section .page-section-heading h2 {
  color: #fff;
}
.ads-page .ads-direct-section .page-section-heading > p:last-child {
  color: #ffffff9e;
}
.ads-page .ads-direct-layout {
  grid-template-rows: minmax(250px, auto) minmax(260px, auto);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  display: grid;
}
.ads-page .ads-direct-media {
  border-radius: var(--radius-card);
  background: #eee9dc;
  grid-area: 1/1/3/8;
  min-height: 620px;
}
.ads-page .ads-direct-metric {
  border-radius: var(--radius-card);
  background: var(--page-accent);
  color: var(--color-secondary);
  flex-direction: column;
  grid-area: 1/8 / auto/13;
  justify-content: space-between;
  align-items: flex-start;
  padding: clamp(2rem, 4vw, 3.5rem);
  display: flex;
}
.ads-direct-metric span {
  font-family: var(--font-primary);
  letter-spacing: -0.055em;
  font-size: clamp(3.2rem, 6.2vw, 6rem);
  line-height: 0.8;
}
.ads-direct-metric p {
  max-width: 280px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
}
.ads-page .ads-direct-options {
  border-radius: var(--radius-card);
  border: 1px solid #ffffff1f;
  grid-area: 2/8 / auto/13;
  grid-template-columns: minmax(0, 1fr);
  align-content: stretch;
  display: grid;
  overflow: hidden;
}
.ads-page .ads-direct-options .ads-option {
  color: #fff;
  border-top: 0;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  min-height: 0;
  padding: 1.15rem 1.25rem;
}
.ads-page .ads-direct-options .ads-option + .ads-option,
.ads-page .ads-direct-options .ads-option:last-child {
  border-top: 1px solid #ffffff1f;
  border-bottom: 0;
}
.ads-page .ads-option-icon {
  background: #fff;
  width: 44px;
  height: 44px;
}
.ads-page .ads-option-icon img {
  width: 28px;
  height: 28px;
}
.ads-page .ads-direct-options strong {
  color: #fff;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
}
.ads-page .ads-direct-options small {
  color: #ffffff8c;
  font-size: 0.75rem;
}
.ads-page .ads-direct-options i {
  color: #ffffff6b;
}
.ads-page .ads-media-card,
.ads-page .ads-premium-intro,
.ads-page .ads-store-layout,
.ads-page .ads-rocket-card,
.ads-page .ads-space-card,
.ads-page .ads-contact-section .contact-form {
  border-radius: var(--radius-card);
}
.ads-page .ads-media-card {
  box-shadow: none;
}
.ads-page .site-floating-contact {
  display: none;
}
@media (max-width: 991px) {
  .ads-page .ads-hero-copy {
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.8fr);
    gap: 2.5rem;
  }
  .ads-page .ads-hero-copy h1 {
    font-size: clamp(5rem, 13vw, 8rem);
  }
  .ads-page .ads-hero-proof {
    width: 92%;
  }
  .ads-page .ads-direct-layout {
    grid-template-rows: minmax(460px, auto) auto auto;
  }
  .ads-page .ads-direct-media {
    grid-area: 1/1/3/8;
    min-height: 460px;
  }
  .ads-page .ads-direct-metric,
  .ads-page .ads-direct-options {
    grid-column: 8/13;
  }
}
@media (max-width: 767px) {
  .ads-page .ads-hero-copy {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 3rem;
  }
  .ads-page .ads-hero-copy h1 {
    font-size: clamp(5rem, 21vw, 8.5rem);
  }
  .ads-page .ads-hero-copy h1 span:last-child {
    margin-left: 14%;
  }
  .ads-hero-narrative {
    max-width: 560px;
  }
  .ads-page .ads-hero-media {
    height: 520px;
  }
  .ads-page .ads-hero-proof {
    width: calc(100% - 1.5rem);
    margin-top: -56px;
  }
  .ads-page .ads-hero-proof li {
    min-height: 132px;
    padding: 1.25rem;
  }
  .ads-page .ads-hero-proof li + li {
    border-top: 0;
    border-left: 1px solid var(--color-border);
    margin-top: 0;
    padding: 1.25rem;
  }
  .ads-page .ads-direct-layout {
    grid-template-rows: auto;
    grid-template-columns: minmax(0, 1fr);
  }
  .ads-page .ads-direct-media,
  .ads-page .ads-direct-metric,
  .ads-page .ads-direct-options {
    grid-area: auto/1;
  }
  .ads-page .ads-direct-media {
    min-height: 480px;
  }
  .ads-page .ads-direct-metric {
    min-height: 250px;
  }
}
@media (max-width: 575px) {
  .ads-page .ads-hero-masthead {
    padding-inline: 0.25rem;
  }
  .ads-hero-masthead img {
    width: 86px;
  }
  .ads-page .ads-hero-copy {
    padding: 2.75rem 0 3.25rem;
  }
  .ads-page .ads-hero-copy h1 {
    font-size: clamp(4.6rem, 23vw, 6.2rem);
  }
  .ads-page .ads-hero-actions,
  .ads-page .ads-hero-actions .page-primary-button {
    width: 100%;
  }
  .ads-page .ads-hero-media {
    border-radius: 10px;
    height: 440px;
  }
  .ads-page .ads-hero-proof {
    grid-template-columns: minmax(0, 1fr);
    width: calc(100% - 0.75rem);
    margin-top: -36px;
  }
  .ads-page .ads-hero-proof li {
    min-height: 96px;
  }
  .ads-page .ads-hero-proof li + li {
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }
  .ads-page .ads-ecosystem-strip {
    margin-inline: 0;
  }
  .ads-page .ads-direct-media {
    border-radius: 10px;
    min-height: 380px;
  }
  .ads-page .ads-direct-metric,
  .ads-page .ads-direct-options {
    border-radius: 10px;
  }
}

/* ---------- Agryco — typographie des pages legales (.legal-prose) ---------- */
.legal-prose { color: var(--color-muted); font-size: 0.95rem; line-height: 1.7; }
.legal-prose h2 {
  font-family: var(--font-primary);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  color: var(--color-text);
  font-size: 1.35rem;
  font-weight: 600;
  margin-top: 2.5rem;
  margin-bottom: 0.85rem;
}
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose p { margin-bottom: 1rem; }
.legal-prose ul { list-style: disc; padding-left: 1.35rem; margin-bottom: 1rem; }
.legal-prose ul li { margin-bottom: 0.4rem; }
.legal-prose ul li::marker { color: var(--color-primary); }
.legal-prose strong { color: var(--color-text); font-weight: 600; }
.legal-prose a { color: var(--color-brand-research); text-decoration: underline; text-underline-offset: 2px; }
.legal-prose a:hover { color: var(--color-secondary); }
.legal-prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.875rem; }
.legal-prose th, .legal-prose td {
  border: 1px solid var(--color-border);
  padding: 0.65rem 0.85rem;
  text-align: left;
  vertical-align: top;
}
.legal-prose th { background: var(--color-surface); color: var(--color-text); font-weight: 600; }
.legal-prose .legal-contact {
  border-left: 3px solid var(--color-primary);
  background: var(--color-surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.1rem 1.35rem;
  margin-bottom: 1.5rem;
}

/* ---------- Agryco — champs de formulaire de contact ---------- */
.agryco-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.4rem;
}
.agryco-label sup { color: var(--color-primary); font-weight: 700; }
.agryco-field {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: #fff;
  padding: 0.7rem 0.95rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--color-text);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.agryco-field::placeholder { color: var(--color-muted-alt); }
.agryco-field:hover { border-color: #343b4540; }
.agryco-field:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 184, 2, 0.18);
}
textarea.agryco-field { resize: vertical; min-height: 120px; }
.agryco-checkbox {
  margin-top: 0.15rem;
  height: 1.05rem;
  width: 1.05rem;
  flex: none;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.agryco-submit {
  border-radius: 999px;
  background: var(--color-secondary);
  padding: 0.85rem 2.25rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  transition: background-color 0.2s, transform 0.2s;
}
.agryco-submit:hover { background: #1e242d; transform: translateY(-1px); }

/* ---------- Agryco — cartes d'articles blog ---------- */
.card-article { transition: box-shadow 0.3s ease, transform 0.3s ease; }
.card-article:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.blog-cta-pill {
  background: linear-gradient(263deg, var(--color-accent-yellow-light) 3.24%, var(--color-primary) 100%);
}

/* ---------- Agryco — corps d'article de blog (.article-prose) ---------- */
.article-prose { @apply text-gray-700; font-size: 1.1875rem; line-height: 1.75; }
.article-prose > * + * { margin-top: 1.5rem; }
.article-prose h2 { font-family: var(--font-primary); text-transform: uppercase; letter-spacing: -0.02em; color: var(--color-text); font-size: 1.7rem; font-weight: 600; margin-top: 2.75rem; }
.article-prose h3 { font-family: var(--font-primary); color: var(--color-text); font-size: 1.3rem; font-weight: 600; margin-top: 2rem; }
.article-prose p { color: var(--color-muted); }
.article-prose strong { color: var(--color-text); font-weight: 600; }
.article-prose a { color: var(--color-brand-research); text-decoration: underline; text-underline-offset: 2px; }
.article-prose ul, .article-prose ol { padding-left: 1.5rem; color: var(--color-muted); }
.article-prose ul { list-style: disc; }
.article-prose ol { list-style: decimal; }
.article-prose li { margin-top: 0.5rem; }
.article-prose ul li::marker { color: var(--color-primary); }
.article-prose img { border-radius: var(--radius-md); width: 100%; height: auto; margin-top: 1.75rem; margin-bottom: 1.75rem; }
.article-prose blockquote { border-left: 3px solid var(--color-primary); background: var(--color-surface); padding: 1rem 1.5rem; border-radius: 0 var(--radius-md) var(--radius-md) 0; color: var(--color-text); font-weight: 500; }
.article-prose h2 + p, .article-prose h3 + p { margin-top: 0.85rem; }

/* Titres traduits : un mot compose allemand (« Marktforschungsinstitut ») peut
   depasser du bloc. Coupure de secours pour toutes les langues, cesure
   automatique en allemand seulement (le francais ne change pas). */
h1, h2, h3 { overflow-wrap: break-word; }
:lang(de) h1, :lang(de) h2, :lang(de) h3 { hyphens: auto; }

/* Bloc « L'essentiel » en tete d'article (points cles). */
.article-takeaways {
  padding: 1.5rem 1.75rem;
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  background: var(--color-surface);
}
.article-takeaways-title {
  font-family: var(--font-primary);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
}
.article-takeaways-list { margin-top: 0.9rem; display: grid; gap: 0.6rem; color: var(--color-text); line-height: 1.6; }
.article-takeaways-list li { position: relative; padding-left: 1.25rem; }
.article-takeaways-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
  background: var(--color-primary);
}

/* Encart CTA construit par BlogPosts::ContentDecorator.
   Regles ecrites en CSS pur : Tailwind ne scanne pas le contenu stocke en base. */
.article-prose .article-cta {
  margin-top: 2.5rem;
  padding: 1.75rem 1.75rem 1.5rem;
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  background: var(--color-surface);
}
.article-prose .article-cta-title {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text);
}
.article-prose .article-cta-link {
  display: inline-block;
  margin-top: 1.1rem;
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(263deg, var(--color-accent-yellow-light) 3.24%, var(--color-primary) 100%);
  color: var(--color-secondary);
  font-weight: 700;
  text-decoration: none;
  transition: filter var(--transition-fast);
}
.article-prose .article-cta-link:hover { filter: brightness(1.06); }

/* ---------- Agryco — reveal on scroll (subtil, homogène) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }
  .js-reveal.is-visible { opacity: 1; transform: none; }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 *
 * Surcharges du design Agryco, chargees apres tout le reste : l'ordre des
 * fichiers compte, chacun reprend des regles du precedent.






 */

/* Pagy pagination styling */
.pagy nav {
  display: flex;
  gap: 0.25rem;
}

.pagy nav a,
.pagy nav span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: all 0.15s;
}

.pagy nav a {
  background: white;
  color: #374151;
  border: 1px solid #e5e7eb;
}

.pagy nav a:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.pagy nav span.current {
  background: #84cc16;
  color: white;
  border: 1px solid #84cc16;
}

.pagy nav span.gap {
  background: transparent;
  border: none;
  color: #9ca3af;
}

.pagy nav a[aria-disabled="true"],
.pagy nav span.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Radar ping animation for CTA buttons */
@keyframes radar-ping {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.btn-radar {
  position: relative;
}

.btn-radar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(132, 204, 22, 0.4);
  animation: radar-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  pointer-events: none;
}
/* ==========================================================================
   CTA jaunes en degrade — #ffb802 (gauche) vers #fff626 (droite)
   Reprend l'angle deja utilise par .blog-cta-pill et .site-floating-contact,
   pour que tous les boutons jaunes du site partagent le meme traitement.
   Pour ajuster : ces deux variables suffisent.
   ========================================================================== */
:root {
  --gradient-cta: linear-gradient(263deg, var(--color-accent-yellow-light) 3.24%, var(--color-primary) 100%);
  --gradient-cta-hover: linear-gradient(263deg, var(--color-accent-yellow-light) 3.24%, var(--color-accent-yellow-strong) 100%);
}

/* bouton CTA principal : header, nav mobile, sections de page, offres */
.brand-primary-button,
[data-action*="cookie-consent#accept"] {
  background: var(--gradient-cta);
}

.brand-primary-button:hover,
.ads-contact-section .btn-primary:hover,
[data-action*="cookie-consent#accept"]:hover {
  background: var(--gradient-cta-hover);
}

/* le CTA sombre pose dans le bloc contact reste sombre */
.home-contact-action .brand-primary-button {
  background: var(--color-secondary);
}

/* onglets actifs : meme degrade que les CTA.
   [role="tab"] vise les barres d'onglets (section « Une vision globale »
   de l'accueil, onglets Nexio/PRISM/PALAM) sans toucher aux puces de
   carrousel, qui partagent la meme classe utilitaire mais n'ont pas ce role. */
[role="tab"].active {
  background: var(--gradient-cta);
  color: var(--color-secondary);
}

/* ==========================================================================
   Banniere du haut : textes orange passes en jaune #ffd302
   (= --color-accent-yellow-strong). Portee limitee a la banniere :
   les surtitres des sections plus bas dans la page restent orange.
   ========================================================================== */
.home-hero-section h1 span,
.ads-hero-section .page-kicker,
.ads-page .ads-hero-copy h1 span:last-child,
.page-kicker--hero {
  color: var(--color-accent-yellow-strong);
}

/* CTA secondaire de la banniere d'accueil : respiration laterale alignee
   sur le CTA principal voisin (px-7), l'utilitaire px-2 etant trop serre. */
.home-hero-secondary {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

/* les puces numerotees 01/02/03 de la banniere d'accueil sont des pseudo-
   elements (compteur CSS), donc non couvertes par la regle sur les textes. */
.home-hero-benefits li:before {
  color: var(--color-accent-yellow-strong);
}

/* ==========================================================================
   Surtitres de section : rotation de couleurs, hors orange
   Teintes de la palette assombries de 2 a 4 % pour franchir le seuil WCAG AA
   (4.5:1) sur les fonds clairs du site, ou les teintes d'origine plafonnent
   a 4.3:1 pour du texte de 12-14 px. L'ecart est invisible a l'oeil.
   Sur les blocs sombres (#343b45), jaune et vert clair sont les deux seules
   teintes de la palette a passer AA : elles y alternent.
   ========================================================================== */
:root {
  --kicker-bleu: #0084b7;       /* bleu de la palette, tel quel */
  --kicker-rose: #d4225c;       /* 4.56:1 — Rose #DB235F assombri */
  --kicker-vert: #007c72;       /* 4.63:1 — Vert fonce #008E82 assombri */
  --kicker-violet: #b74681;     /* 4.54:1 — Violet #BA4A85 assombri */
  --kicker-jaune: #ffd302;      /* 7.84:1 sur #343b45 */
  --kicker-vertclair: #93c83c;  /* 5.69:1 sur #343b45 */
}

.kicker-accent--bleu      { color: var(--kicker-bleu); }
.kicker-accent--rose      { color: var(--kicker-rose); }
.kicker-accent--vert      { color: var(--kicker-vert); }
.kicker-accent--violet    { color: var(--kicker-violet); }
.kicker-accent--jaune     { color: var(--kicker-jaune); }
.kicker-accent--vertclair { color: var(--kicker-vertclair); }

/* ==========================================================================
   Bascule globale orange -> jaune #ffd302
   Les jetons de marque sont redefinis en fin de feuille : tout ce qui s'y
   reference (textes, puces, fonds decoratifs, focus, survols) suit d'un coup.
   SEULE EXCEPTION : le degrade des CTA, fige sur ses valeurs d'origine
   ci-dessous, car l'orange y porte le contraste du degrade.
   ========================================================================== */
:root {
  --gradient-cta: linear-gradient(263deg, #fff626 3.24%, #ffb802 100%);
  --gradient-cta-hover: linear-gradient(263deg, #fff626 3.24%, #ffd302 100%);

  --color-primary: #ffd302;
  --color-brand-ads: #ffd302;
  --color-accent-yellow: #ffd302;
}

/* halos et tons translucides derives de l'orange */
.ads-contact-section .form-control:focus {
  box-shadow: 0 0 0 3px #ffd30224;
}

/* --- surtitres des cartes « Trois leviers » : reprennent l'accent de leur rond
       (jaune pour Ads, vert clair pour Data, bleu pour Research) --------- */
.kicker-accent--tone {
  color: var(--solution-accent);
}

/* --- bloc « Notre méthode » : un rond par etape, texte blanc -------------- */
.home-method-card ol > li:nth-child(1) .method-index {
  background: #db235f;   /* Rose — blanc a 4.75:1 */
  color: #fff;
}
.home-method-card ol > li:nth-child(2) .method-index {
  background: #0084b7;   /* Bleu */
  color: #fff;
}
.home-method-card ol > li:nth-child(3) .method-index {
  background: #008e82;   /* Vert fonce */
  color: #fff;
}

/* --- TEST accueil uniquement : plus aucun fond teinte, tout passe en blanc.
       Portee limitee a .home-page, les autres pages gardent leur beige.
       Pour retrouver le beige d'origine : supprimer ce bloc.
       Pour retester le jaune : --color-surface: rgba(255, 211, 2, 0.05). --- */
.home-page {
  --color-surface: var(--color-background);
  --color-surface-soft: var(--color-background);
}

/* le bloc gris « Notre méthode » se detache sur blanc, sans fond beige */
.home-method-section {
  background: var(--color-background);
}

/* --- avis en cartes, sur le modele de la carte « Agryco Services » -------- */
.home-review-card {
  background: #fff;
  border: 1px solid #343b451f;
  border-radius: var(--radius-panel);
  padding: 2rem;
  height: 100%;
}

/* --- tous les surtitres a la taille de « Nos expertises » (14 px) ---------
   Selecteurs qualifies par la balise : certaines sections posent une taille
   via un selecteur descendant (ex. .ads-premium-intro p), plus specifique
   qu'une simple classe. */
p.kicker-accent,
p.page-kicker,
p.page-kicker--hero,
p.home-expertise-panel-kicker,
p.solution-kicker,
.kicker-accent,
.page-kicker,
.page-kicker--hero,
.home-expertise-panel-kicker,
.solution-kicker {
  font-size: 0.875rem;
}

/* --- guillemet decoratif des avis ----------------------------------------
   Forme fournie en image, vectorisee (contours traces puis lisses en Bezier :
   78 points, 0,85 % d'ecart avec l'original au pixel pres) et posee en masque
   CSS plutot qu'en image : la couleur vient de background, il n'y a donc
   qu'une variable a changer, et le rendu reste net a toute resolution.
   Emplacement : centre dans le pan de l'encoche, donc hors de la carte. Les
   decalages se calculent sur les dimensions du pan, ils suivent ses paliers
   responsive sans reglage supplementaire. z-index 4 : au-dessus du pan (2) et
   du contour (3). Une couleur par avis, en rotation sur la palette.
   Couleur du fichier d'origine : #003147. Proportion : 365 x 263. */
.home-review-card blockquote:before {
  --guillemet-l: 44px;
  --guillemet-h: 32px;
  content: "";
  position: absolute;
  top: calc((var(--encoche-h) - var(--guillemet-h)) / 2);
  right: calc((var(--encoche-l) - var(--guillemet-l)) / 2);
  width: var(--guillemet-l);
  height: var(--guillemet-h);
  z-index: 4;
  background: var(--guillemet-couleur);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 365 263%22%3E%3Cpath fill=%22%23000%22 fill-rule=%22evenodd%22 d=%22M96.00 262.11C90.50 262.26 80.50 262.22 74.00 261.27C67.50 260.32 62.67 258.77 57.00 256.43C51.33 254.08 45.33 250.94 40.00 247.20C34.67 243.47 29.38 238.70 25.00 234.00C20.61 229.30 17.06 224.67 13.67 219.00C10.28 213.33 6.96 206.83 4.67 200.00C2.37 193.17 0.71 184.50 -0.11 178.00C-0.94 171.50 -0.91 167.83 -0.27 161.00C0.37 154.17 1.72 145.17 3.73 137.00C5.74 128.83 8.49 120.17 11.80 112.00C15.11 103.83 19.42 95.33 23.57 88.00C27.73 80.67 32.07 74.33 36.73 68.00C41.38 61.67 44.95 56.90 51.50 50.00C58.05 43.10 67.58 33.66 76.00 26.58C84.42 19.51 95.83 11.84 102.00 7.54C108.17 3.24 110.33 2.14 113.00 0.80C115.67 -0.53 116.26 -0.83 118.00 -0.47C119.74 -0.10 122.43 1.26 123.46 3.00C124.49 4.74 125.64 5.67 124.20 10.00C122.75 14.33 117.69 22.33 114.80 29.00C111.92 35.67 109.22 43.00 106.89 50.00C104.56 57.00 102.53 64.00 100.80 71.00C99.07 78.00 94.30 87.87 96.50 92.00C98.70 96.13 108.75 94.21 114.00 95.80C119.25 97.40 123.50 99.21 128.00 101.57C132.50 103.94 136.76 106.60 141.00 110.00C145.23 113.40 149.84 117.83 153.42 122.00C156.99 126.17 159.83 130.33 162.46 135.00C165.09 139.67 167.41 144.50 169.20 150.00C170.99 155.50 172.51 162.17 173.20 168.00C173.89 173.83 173.82 179.50 173.33 185.00C172.85 190.50 171.46 196.50 170.28 201.00C169.09 205.50 168.33 207.67 166.20 212.00C164.07 216.33 160.70 222.50 157.50 227.00C154.30 231.50 150.75 235.43 147.00 239.00C143.25 242.58 139.17 245.71 135.00 248.46C130.83 251.21 126.67 253.51 122.00 255.50C117.33 257.49 111.33 259.33 107.00 260.43C102.67 261.53 101.50 261.97 96.00 262.11ZM287.00 262.00C280.83 262.31 270.33 262.07 264.00 261.27C257.67 260.47 254.17 259.21 249.00 257.20C243.83 255.19 238.50 252.90 233.00 249.20C227.50 245.50 220.55 239.53 216.00 235.00C211.44 230.47 208.89 227.00 205.67 222.00C202.45 217.00 199.18 211.50 196.67 205.00C194.16 198.50 191.78 190.00 190.62 183.00C189.45 176.00 189.29 170.00 189.67 163.00C190.05 156.00 191.23 148.50 192.89 141.00C194.54 133.50 196.80 125.67 199.62 118.00C202.44 110.33 205.64 102.83 209.80 95.00C213.96 87.17 219.12 78.67 224.57 71.00C230.02 63.33 235.60 56.39 242.50 49.00C249.40 41.61 257.25 33.89 266.00 26.67C274.75 19.45 288.67 10.06 295.00 5.67C301.33 1.28 301.83 1.36 304.00 0.33C306.17 -0.70 306.42 -0.94 308.00 -0.50C309.58 -0.06 312.42 1.42 313.50 3.00C314.58 4.58 315.92 4.67 314.47 9.00C313.02 13.33 307.44 23.00 304.80 29.00C302.17 35.00 300.86 38.50 298.67 45.00C296.48 51.50 293.69 60.17 291.67 68.00C289.65 75.83 284.48 87.38 286.54 92.00C288.59 96.62 298.42 93.97 304.00 95.73C309.58 97.49 315.17 99.94 320.00 102.57C324.83 105.21 328.94 108.13 333.00 111.54C337.06 114.94 340.80 118.59 344.33 123.00C347.87 127.41 351.53 133.00 354.20 138.00C356.86 143.00 358.80 147.83 360.33 153.00C361.86 158.17 362.88 163.50 363.38 169.00C363.88 174.50 363.84 180.67 363.33 186.00C362.82 191.33 361.82 196.00 360.33 201.00C358.85 206.00 356.92 211.17 354.43 216.00C351.94 220.83 348.46 226.00 345.38 230.00C342.31 234.00 339.06 237.13 336.00 240.00C332.94 242.88 330.50 244.91 327.00 247.27C323.50 249.64 319.33 252.17 315.00 254.20C310.67 256.22 305.67 258.13 301.00 259.43C296.33 260.73 293.17 261.70 287.00 262.00Z%22/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 365 263%22%3E%3Cpath fill=%22%23000%22 fill-rule=%22evenodd%22 d=%22M96.00 262.11C90.50 262.26 80.50 262.22 74.00 261.27C67.50 260.32 62.67 258.77 57.00 256.43C51.33 254.08 45.33 250.94 40.00 247.20C34.67 243.47 29.38 238.70 25.00 234.00C20.61 229.30 17.06 224.67 13.67 219.00C10.28 213.33 6.96 206.83 4.67 200.00C2.37 193.17 0.71 184.50 -0.11 178.00C-0.94 171.50 -0.91 167.83 -0.27 161.00C0.37 154.17 1.72 145.17 3.73 137.00C5.74 128.83 8.49 120.17 11.80 112.00C15.11 103.83 19.42 95.33 23.57 88.00C27.73 80.67 32.07 74.33 36.73 68.00C41.38 61.67 44.95 56.90 51.50 50.00C58.05 43.10 67.58 33.66 76.00 26.58C84.42 19.51 95.83 11.84 102.00 7.54C108.17 3.24 110.33 2.14 113.00 0.80C115.67 -0.53 116.26 -0.83 118.00 -0.47C119.74 -0.10 122.43 1.26 123.46 3.00C124.49 4.74 125.64 5.67 124.20 10.00C122.75 14.33 117.69 22.33 114.80 29.00C111.92 35.67 109.22 43.00 106.89 50.00C104.56 57.00 102.53 64.00 100.80 71.00C99.07 78.00 94.30 87.87 96.50 92.00C98.70 96.13 108.75 94.21 114.00 95.80C119.25 97.40 123.50 99.21 128.00 101.57C132.50 103.94 136.76 106.60 141.00 110.00C145.23 113.40 149.84 117.83 153.42 122.00C156.99 126.17 159.83 130.33 162.46 135.00C165.09 139.67 167.41 144.50 169.20 150.00C170.99 155.50 172.51 162.17 173.20 168.00C173.89 173.83 173.82 179.50 173.33 185.00C172.85 190.50 171.46 196.50 170.28 201.00C169.09 205.50 168.33 207.67 166.20 212.00C164.07 216.33 160.70 222.50 157.50 227.00C154.30 231.50 150.75 235.43 147.00 239.00C143.25 242.58 139.17 245.71 135.00 248.46C130.83 251.21 126.67 253.51 122.00 255.50C117.33 257.49 111.33 259.33 107.00 260.43C102.67 261.53 101.50 261.97 96.00 262.11ZM287.00 262.00C280.83 262.31 270.33 262.07 264.00 261.27C257.67 260.47 254.17 259.21 249.00 257.20C243.83 255.19 238.50 252.90 233.00 249.20C227.50 245.50 220.55 239.53 216.00 235.00C211.44 230.47 208.89 227.00 205.67 222.00C202.45 217.00 199.18 211.50 196.67 205.00C194.16 198.50 191.78 190.00 190.62 183.00C189.45 176.00 189.29 170.00 189.67 163.00C190.05 156.00 191.23 148.50 192.89 141.00C194.54 133.50 196.80 125.67 199.62 118.00C202.44 110.33 205.64 102.83 209.80 95.00C213.96 87.17 219.12 78.67 224.57 71.00C230.02 63.33 235.60 56.39 242.50 49.00C249.40 41.61 257.25 33.89 266.00 26.67C274.75 19.45 288.67 10.06 295.00 5.67C301.33 1.28 301.83 1.36 304.00 0.33C306.17 -0.70 306.42 -0.94 308.00 -0.50C309.58 -0.06 312.42 1.42 313.50 3.00C314.58 4.58 315.92 4.67 314.47 9.00C313.02 13.33 307.44 23.00 304.80 29.00C302.17 35.00 300.86 38.50 298.67 45.00C296.48 51.50 293.69 60.17 291.67 68.00C289.65 75.83 284.48 87.38 286.54 92.00C288.59 96.62 298.42 93.97 304.00 95.73C309.58 97.49 315.17 99.94 320.00 102.57C324.83 105.21 328.94 108.13 333.00 111.54C337.06 114.94 340.80 118.59 344.33 123.00C347.87 127.41 351.53 133.00 354.20 138.00C356.86 143.00 358.80 147.83 360.33 153.00C361.86 158.17 362.88 163.50 363.38 169.00C363.88 174.50 363.84 180.67 363.33 186.00C362.82 191.33 361.82 196.00 360.33 201.00C358.85 206.00 356.92 211.17 354.43 216.00C351.94 220.83 348.46 226.00 345.38 230.00C342.31 234.00 339.06 237.13 336.00 240.00C332.94 242.88 330.50 244.91 327.00 247.27C323.50 249.64 319.33 252.17 315.00 254.20C310.67 256.22 305.67 258.13 301.00 259.43C296.33 260.73 293.17 261.70 287.00 262.00Z%22/%3E%3C/svg%3E") no-repeat center / contain;
}
@media (max-width: 575px) {
  .home-review-card blockquote:before { --guillemet-l: 36px; --guillemet-h: 26px; }
}

/* Une couleur par avis, six teintes pour six cartes : plus aucune ne revient
   deux fois. Rotation : bleu, rose, vert fonce, violet, jaune, vert clair.
   Le pan de l'encoche est blanc — contraste mesure de la forme sur ce fond :
   bleu 5,02  rose 5,02  vert fonce 5,09  violet 4,99  vert clair 1,99
   jaune 1,44. Les deux derniers sont tres pales ; c'est un decor, pas du
   texte, donc aucune regle ne l'interdit, mais ils se voient a peine.
   Declaree sur la diapo et non sur la carte : une propriete personnalisee
   posee sur l'element l'emporte sur celle heritee du parent. */
.home-reviews-carousel { --guillemet-couleur: var(--kicker-bleu); }
.home-reviews-carousel [data-carousel-target="slide"]:nth-child(6n+1) { --guillemet-couleur: var(--kicker-bleu); }
.home-reviews-carousel [data-carousel-target="slide"]:nth-child(6n+2) { --guillemet-couleur: var(--kicker-rose); }
.home-reviews-carousel [data-carousel-target="slide"]:nth-child(6n+3) { --guillemet-couleur: var(--kicker-vert); }
.home-reviews-carousel [data-carousel-target="slide"]:nth-child(6n+4) { --guillemet-couleur: var(--kicker-violet); }
.home-reviews-carousel [data-carousel-target="slide"]:nth-child(6n+5) { --guillemet-couleur: var(--kicker-jaune); }
.home-reviews-carousel [data-carousel-target="slide"]:nth-child(6n+6) { --guillemet-couleur: var(--kicker-vertclair); }

/* nom du temoin : gris fonce. Pour le remettre a la couleur du guillemet :
   color: var(--guillemet-couleur); */
.home-review-card h3 {
  color: var(--color-secondary);
}

/* --- fleche « remonter en haut » en bleu ----------------------------------
       Filet identique aux blocs blancs (cartes avis, panneaux d'expertise) :
       sans lui le bouton disparait sur les sections a fond blanc. */
[data-controller~="back-to-top"] {
  color: #0084b7;
  border: 1px solid #343b451f;
}
[data-controller~="back-to-top"]:hover {
  background: #0084b7;
  border-color: #0084b7;
  color: #fff;
}

/* --- TEST : barre d'onglets en pilule, onglets pilule comme les CTA du site
       Pour revenir en arriere : supprimer ce bloc. ------------------------ */
.home-expertise-tablist {
  border-radius: var(--radius-pill);
}
.home-expertise-tab {
  border-radius: var(--radius-pill);
}

/* sous 576 px la barre passe sur 2 lignes : le rayon total rognerait les
   angles, on revient au rayon de carte pour le conteneur (onglets en pilule) */
@media (max-width: 575px) {
  .home-expertise-tablist {
    border-radius: var(--radius-panel);
  }
}

/* ==========================================================================
   Rythme vertical unifie, une seule variable pour tout le site : chaque
   section porte --rythme-section en haut et en bas, l'ecart entre deux
   sections vaut donc le double. La valeur descend avec la largeur d'ecran :
     des 1280 px 65 px par cote  -> 130 px d'ecart
      des 768 px 48 px par cote  ->  96 px
     sous 768 px 40 px par cote  ->  80 px
   Remplace un existant heterogene (64 a 115 px par cote sur l'accueil,
   115,2 px sur les pages internes). Aucune section n'y echappe : celles qui
   etaient collees a la precedente (.pt-0, section fusee) ont ete realignees.
   ========================================================================== */
:root {
  --rythme-section: 40px;
}
@media (min-width: 768px) {
  :root { --rythme-section: 48px; }
}
@media (min-width: 1280px) {
  :root { --rythme-section: 65px; }
}
.page-section,
.home-expertise-section,
.home-method-section,
.home-discovery-section,
.home-reviews-section,
.home-contact-section {
  padding-top: var(--rythme-section);
  padding-bottom: var(--rythme-section);
}

/* la banniere reste collee au header : seul son bas suit le rythme.
   .ads-page prefixe pour passer devant `.ads-page .ads-hero-section`. */
.home-hero-section,
.ads-hero-section,
.ads-page .ads-hero-section {
  padding-bottom: var(--rythme-section);
}

/* Plus d'exception : les sections marquees .pt-0 dans la source (et la section
   fusee) creaient un demi-ecart la ou toutes les autres en font un entier. Le
   rythme est desormais le meme partout. Pour recoller une section a la
   precedente, redonner `padding-top: 0` a ce selecteur. */
.page-section.pt-0,
.ads-rocket-section {
  padding-top: var(--rythme-section);
}

/* Une marge de bas sur le dernier bloc d'une section s'ajoute au padding :
   64 px de rab sous « Des promesses tenues » sur la page equipe, soit un
   ecart hors rythme. */
.page-section > .container-site > :last-child,
.page-section > .container-wide > :last-child {
  margin-bottom: 0;
}

/* « Nos expertises » et « Nos solutions » cohabitent dans une seule section :
   leur separation venait d'une marge interne (60 px effectifs). On la cale sur
   le rythme du site, en padding pour eviter toute fusion de marges. */
.home-solutions-heading {
  margin-top: 0;
  padding-top: calc(var(--rythme-section) * 2);
}

/* --- bloc « Notre méthode » : version SANS FOND ---------------------------
   Retirer le fond impose de basculer tout le texte, blanc a l'origine.
   Pour revenir au fond bleu : remplacer ce bloc par
     .home-method-card { background: #0084b7; }
   et supprimer les regles de texte qui suivent. --------------------------- */
.home-method-card {
  background: transparent;
  /* Le fond retire, les paddings de la carte ne se lisent plus comme
     l'interieur d'un bloc mais comme du vide : verticalement la section
     affichait 200 px d'ecart la ou le rythme en demande le double de
     --rythme-section, et horizontalement son contenu demarrait 64 px plus a
     droite que celui de toutes les autres sections. Mis a zero des deux
     cotes : le bloc s'aligne desormais exactement sur celui des avis. */
  padding: 0;
}

/* surtitre : le jaune d'origine serait invisible sur blanc (1,44:1). Il etait
   passe au bleu, il passe au rose de la palette (4,56:1 sur blanc). */
.home-method-card .kicker-accent {
  color: var(--kicker-rose);
}

/* grand titre et titres d'etape */
.home-method-card h2,
.home-method-step h3 {
  color: var(--color-secondary);
}

/* texte descriptif des etapes */
.home-method-step p {
  color: var(--color-muted);
}

/* les cartes d'etape : contour clair au lieu du voile blanc */
.home-method-step {
  border-color: #343b451f;
  background: #fff;
}
/* separateurs entre les 3 etapes : meme couleur que le contour des cartes
   blanches (#343b451f), le blanc a 14 % d'origine etant invisible sans fond.
   border-left en desktop, border-top une fois les etapes empilees. */
.home-method-step + .home-method-step {
  border-top-color: #343b451f;
  border-left-color: #343b451f;
}
.home-method-card ol > li:nth-child(1) .method-index,
.home-method-card ol > li:nth-child(2) .method-index,
.home-method-card ol > li:nth-child(3) .method-index {
  background: var(--kicker-jaune);
  color: var(--color-secondary);   /* texte sombre : 7.84:1 sur le jaune */
}

/* --- carrousel des avis : fleches et curseur en gris fonce ----------------
   Seul le chevron est colore : le rond garde sa bordure d'origine. -------- */
.home-reviews-carousel [data-carousel-target="previousButton"],
.home-reviews-carousel [data-carousel-target="nextButton"] {
  color: var(--color-secondary);
}
/* au survol : rond gris fonce plein, chevron blanc (11.31:1) */
.home-reviews-carousel [data-carousel-target="previousButton"]:hover,
.home-reviews-carousel [data-carousel-target="nextButton"]:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}
/* le curseur : la barre de la puce active */
.home-reviews-carousel [data-carousel-target="pagination"] > button.active > span {
  background: var(--color-secondary);
}

/* puces inactives : l'utilitaire bg-[var(--color-secondary)]/35 ne se resout
   pas (modificateur d'opacite sur une variable CSS), elles etaient invisibles */
.home-reviews-carousel [data-carousel-target="pagination"] > button:not(.active) > span {
  background: #343b4559;
}

/* --- TEST : bloc « Offre Discovery » en bleu (etait vert #008e82) ---------
   Pour revenir : supprimer ce bloc. -------------------------------------- */
.home-discovery-card {
  background: #0084b7;
}

/* --- bloc « Offre Discovery » : CTA elargi (l'utilitaire w-fit le collait
       au texte). min-width plutot que padding pour ne pas desaligner la
       hauteur avec les autres CTA du site. ---------------------------- */
.home-discovery-card .brand-primary-button {
  min-width: min(320px, 100%);
  padding-inline: 2.5rem;
}

/* --- typographie des titres ----------------------------------------------
   text-wrap: balance equilibre les lignes ; les mots de 3 lettres ou moins,
   l'esperluette et les tranches de milliers sont par ailleurs soudes au mot
   suivant directement dans le HTML (espaces insecables), pour qu'aucun ne
   termine une ligne. */
h1, h2, h3, h4 {
  text-wrap: balance;
}

/* --- surtitres : un cran plus gras (700 -> 800) --------------------------- */
p.kicker-accent,
p.page-kicker,
p.page-kicker--hero,
p.home-expertise-panel-kicker,
p.solution-kicker,
.kicker-accent,
.page-kicker,
.page-kicker--hero,
.home-expertise-panel-kicker,
.solution-kicker {
  font-weight: 800;
}

/* la derniere section (toujours le bloc contact) porte 60 px de plus en bas,
   pour 160 px de respiration avant le footer, conforme au rythme du site */
.home-contact-section,
.ads-contact-section {
  padding-bottom: calc(var(--rythme-section) * 2);
}

/* --- lien « Découvrir … » des panneaux d'expertise : passe du lien souligne
       a la forme du CTA secondaire de la banniere (pilule, contour 1px,
       fond transparent, fleche qui avance au survol).
       Couleurs conservees ; survol en jaune sur texte gris fonce (7.84:1). */
.home-expertise-panel-link {
  border: 1px solid #343b4547;
  border-radius: var(--radius-pill);
  justify-content: center;
  gap: 0.65rem;
  padding: 1rem 1.75rem;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.home-expertise-panel-link span {
  transition: transform 0.25s;
}
.home-expertise-panel-link:hover {
  background: var(--kicker-jaune);
  border-color: var(--kicker-jaune);
  color: #343b45;
}
.home-expertise-panel-link:hover span {
  transform: translate(0.2rem);
}

/* --- gros titres en majuscules -------------------------------------------
   Convention de l'accueil : tout titre compose en Belanosima y est en
   majuscules. Les pages internes s'en ecartaient sur 22 titres de section
   (56 a 86 px). Les sous-titres et titres de cartes, plus petits, ne sont
   pas concernes. */
.page-section-heading h2,
.ads-store-copy h2,
.ads-space-card h2,
.ads-rocket-copy h2,
.ads-event-section .container-site h2 {
  text-transform: uppercase;
}

/* ==========================================================================
   ENCOCHE — forme maison : un pan rectangulaire retire d'un coin du bloc,
   avec l'angle rentrant arrondi ET les deux pointes du bloc arrondies au
   meme rayon. Trois formes : ::after pour la decoupe, ::before pour les
   deux quarts de disque des pointes.

   Usage :  class="encoche encoche--haut-droite"
   Coins  :  --haut-droite  --haut-gauche  --bas-droite  --bas-gauche
   Reglages (a redefinir sur l'element ou en media query) :
     --encoche-l     largeur du pan retire
     --encoche-h     hauteur du pan retire
     --encoche-r     rayon des angles
     --encoche-fond  couleur du pan (par defaut le fond de page)

   Dimensions en pixels obligatoires : un pourcentage n'a pas la meme
   signification dans une taille et dans un background-position, les trois
   formes se desaligneraient.
   ========================================================================== */
.encoche {
  position: relative;
  --encoche-l: 180px;
  --encoche-h: 124px;
  --encoche-r: 28px;
  --encoche-fond: var(--color-background);
  --encoche-bord: transparent;   /* filet suivant la decoupe, si besoin */
  --encoche-sous: transparent;   /* fond sous le filet des pointes : var(--encoche-fond) si le bloc a une bordure */
  --encoche-debord: 0px;         /* a passer a 1px si le bloc a une bordure */
  /* Le pan deborde en plus d'un pixel : il couvre le pixel adouci du bord du
     bloc, qui ressortait sinon en fin liseré aux coins decoupes. Les quarts de
     disque des pointes, eux, restent cales sur le bord. */
  --encoche-recouvrement: 1px;
  --encoche-decalage: calc(-1 * (var(--encoche-debord) + var(--encoche-recouvrement)));
  --encoche-L: calc(var(--encoche-l) + var(--encoche-debord));
  --encoche-H: calc(var(--encoche-h) + var(--encoche-debord));
}
/* Un bloc qui rogne son contenu le fait en overflow: clip, pas hidden : la
   marge laisse le pan et les pointes deborder du bord adouci du bloc au lieu
   d'etre coupes pile dessus, ou le fond du bloc filtrait en liseré. */
.encoche { overflow-clip-margin: var(--encoche-recouvrement); }

.encoche::after,
.encoche::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.encoche::after {
  width: calc(var(--encoche-L) + var(--encoche-recouvrement));
  height: calc(var(--encoche-H) + var(--encoche-recouvrement));
  background: var(--encoche-fond);
  z-index: 2;
}
.encoche::before {
  /* deborde de la boite de bordure, comme le pan : recouvre le filet du bloc
     et son pixel de bord adouci ; pose au-dessus du pan pour que le trace
     reste visible */
  inset: var(--encoche-decalage);
  background-repeat: no-repeat;
  z-index: 3;
  /* Arrets des arcs, adoucis d'un demi-pixel. Le filet tient exactement
     dans l'epaisseur de la bordure (--encoche-debord) : a l'interieur du
     bloc pour les pointes, a l'exterieur du pan pour le creux. Sans bordure,
     il est d'epaisseur nulle et l'arc tombe pile sur le rayon.
     --encoche-pointe-sous peint le fond sous le filet des pointes des blocs
     bordes (--encoche-sous) : le filet semi-transparent ne s'additionne plus a
     la bordure, qui foncait au raccord. Sans bordure, la sous-couche reste
     transparente : doublee, elle aureolait le bord d'un liseré clair. */
  --encoche-pointe:
    transparent calc(var(--encoche-r) - var(--encoche-debord) - 0.25px),
    var(--encoche-bord) calc(var(--encoche-r) - var(--encoche-debord) + 0.25px),
    var(--encoche-bord) calc(var(--encoche-r) - 0.25px),
    var(--encoche-fond) calc(var(--encoche-r) + 0.25px);
  --encoche-pointe-sous:
    transparent calc(var(--encoche-r) - var(--encoche-debord) - 0.25px),
    var(--encoche-sous) calc(var(--encoche-r) - var(--encoche-debord) + 0.25px);
  --encoche-creux:
    transparent calc(var(--encoche-r) - 0.25px),
    var(--encoche-bord) calc(var(--encoche-r) + 0.25px),
    var(--encoche-bord) calc(var(--encoche-r) + var(--encoche-debord) - 0.25px),
    transparent calc(var(--encoche-r) + var(--encoche-debord) + 0.25px);
}

/* --- les 4 coins (regles generees) ---------------------------------- */
.encoche--haut-droite::after {
  top: var(--encoche-decalage);
  right: var(--encoche-decalage);
  border-bottom-left-radius: var(--encoche-r);
}
.encoche--haut-droite::before {
  background-image:
    radial-gradient(circle var(--encoche-r) at 0 100%, var(--encoche-pointe)),
    radial-gradient(circle var(--encoche-r) at 0 100%, var(--encoche-pointe)),
    radial-gradient(circle var(--encoche-r) at 100% 0, var(--encoche-creux)),
    linear-gradient(var(--encoche-bord), var(--encoche-bord)),
    linear-gradient(var(--encoche-bord), var(--encoche-bord)),
    radial-gradient(circle var(--encoche-r) at 0 100%, var(--encoche-pointe-sous)),
    radial-gradient(circle var(--encoche-r) at 0 100%, var(--encoche-pointe-sous));
  background-position:
    right calc(var(--encoche-L) + var(--encoche-recouvrement) - 1px) top 0,
    right 0 top calc(var(--encoche-H) + var(--encoche-recouvrement) - 1px),
    right calc(var(--encoche-L) + var(--encoche-recouvrement) - var(--encoche-r)) top calc(var(--encoche-H) + var(--encoche-recouvrement) - var(--encoche-r)),
    right calc(var(--encoche-L) + var(--encoche-recouvrement)) top calc(var(--encoche-r) + var(--encoche-recouvrement)),
    right calc(var(--encoche-r) + var(--encoche-recouvrement)) top calc(var(--encoche-H) + var(--encoche-recouvrement)),
    right calc(var(--encoche-L) + var(--encoche-recouvrement) - 1px) top 0,
    right 0 top calc(var(--encoche-H) + var(--encoche-recouvrement) - 1px);
  background-size:
    calc(var(--encoche-r) + 1px) calc(var(--encoche-r) + var(--encoche-recouvrement)),
    calc(var(--encoche-r) + var(--encoche-recouvrement)) calc(var(--encoche-r) + 1px),
    calc(var(--encoche-r) + var(--encoche-debord)) calc(var(--encoche-r) + var(--encoche-debord)),
    1px calc(var(--encoche-H) - 2 * var(--encoche-r)),
    calc(var(--encoche-L) - 2 * var(--encoche-r)) 1px,
    calc(var(--encoche-r) + 1px) calc(var(--encoche-r) + var(--encoche-recouvrement)),
    calc(var(--encoche-r) + var(--encoche-recouvrement)) calc(var(--encoche-r) + 1px);
}
.encoche--haut-gauche::after {
  top: var(--encoche-decalage);
  left: var(--encoche-decalage);
  border-bottom-right-radius: var(--encoche-r);
}
.encoche--haut-gauche::before {
  background-image:
    radial-gradient(circle var(--encoche-r) at 100% 100%, var(--encoche-pointe)),
    radial-gradient(circle var(--encoche-r) at 100% 100%, var(--encoche-pointe)),
    radial-gradient(circle var(--encoche-r) at 0 0, var(--encoche-creux)),
    linear-gradient(var(--encoche-bord), var(--encoche-bord)),
    linear-gradient(var(--encoche-bord), var(--encoche-bord)),
    radial-gradient(circle var(--encoche-r) at 100% 100%, var(--encoche-pointe-sous)),
    radial-gradient(circle var(--encoche-r) at 100% 100%, var(--encoche-pointe-sous));
  background-position:
    left calc(var(--encoche-L) + var(--encoche-recouvrement) - 1px) top 0,
    left 0 top calc(var(--encoche-H) + var(--encoche-recouvrement) - 1px),
    left calc(var(--encoche-L) + var(--encoche-recouvrement) - var(--encoche-r)) top calc(var(--encoche-H) + var(--encoche-recouvrement) - var(--encoche-r)),
    left calc(var(--encoche-L) + var(--encoche-recouvrement)) top calc(var(--encoche-r) + var(--encoche-recouvrement)),
    left calc(var(--encoche-r) + var(--encoche-recouvrement)) top calc(var(--encoche-H) + var(--encoche-recouvrement)),
    left calc(var(--encoche-L) + var(--encoche-recouvrement) - 1px) top 0,
    left 0 top calc(var(--encoche-H) + var(--encoche-recouvrement) - 1px);
  background-size:
    calc(var(--encoche-r) + 1px) calc(var(--encoche-r) + var(--encoche-recouvrement)),
    calc(var(--encoche-r) + var(--encoche-recouvrement)) calc(var(--encoche-r) + 1px),
    calc(var(--encoche-r) + var(--encoche-debord)) calc(var(--encoche-r) + var(--encoche-debord)),
    1px calc(var(--encoche-H) - 2 * var(--encoche-r)),
    calc(var(--encoche-L) - 2 * var(--encoche-r)) 1px,
    calc(var(--encoche-r) + 1px) calc(var(--encoche-r) + var(--encoche-recouvrement)),
    calc(var(--encoche-r) + var(--encoche-recouvrement)) calc(var(--encoche-r) + 1px);
}
.encoche--bas-droite::after {
  bottom: var(--encoche-decalage);
  right: var(--encoche-decalage);
  border-top-left-radius: var(--encoche-r);
}
.encoche--bas-droite::before {
  background-image:
    radial-gradient(circle var(--encoche-r) at 0 0, var(--encoche-pointe)),
    radial-gradient(circle var(--encoche-r) at 0 0, var(--encoche-pointe)),
    radial-gradient(circle var(--encoche-r) at 100% 100%, var(--encoche-creux)),
    linear-gradient(var(--encoche-bord), var(--encoche-bord)),
    linear-gradient(var(--encoche-bord), var(--encoche-bord)),
    radial-gradient(circle var(--encoche-r) at 0 0, var(--encoche-pointe-sous)),
    radial-gradient(circle var(--encoche-r) at 0 0, var(--encoche-pointe-sous));
  background-position:
    right calc(var(--encoche-L) + var(--encoche-recouvrement) - 1px) bottom 0,
    right 0 bottom calc(var(--encoche-H) + var(--encoche-recouvrement) - 1px),
    right calc(var(--encoche-L) + var(--encoche-recouvrement) - var(--encoche-r)) bottom calc(var(--encoche-H) + var(--encoche-recouvrement) - var(--encoche-r)),
    right calc(var(--encoche-L) + var(--encoche-recouvrement)) bottom calc(var(--encoche-r) + var(--encoche-recouvrement)),
    right calc(var(--encoche-r) + var(--encoche-recouvrement)) bottom calc(var(--encoche-H) + var(--encoche-recouvrement)),
    right calc(var(--encoche-L) + var(--encoche-recouvrement) - 1px) bottom 0,
    right 0 bottom calc(var(--encoche-H) + var(--encoche-recouvrement) - 1px);
  background-size:
    calc(var(--encoche-r) + 1px) calc(var(--encoche-r) + var(--encoche-recouvrement)),
    calc(var(--encoche-r) + var(--encoche-recouvrement)) calc(var(--encoche-r) + 1px),
    calc(var(--encoche-r) + var(--encoche-debord)) calc(var(--encoche-r) + var(--encoche-debord)),
    1px calc(var(--encoche-H) - 2 * var(--encoche-r)),
    calc(var(--encoche-L) - 2 * var(--encoche-r)) 1px,
    calc(var(--encoche-r) + 1px) calc(var(--encoche-r) + var(--encoche-recouvrement)),
    calc(var(--encoche-r) + var(--encoche-recouvrement)) calc(var(--encoche-r) + 1px);
}
.encoche--bas-gauche::after {
  bottom: var(--encoche-decalage);
  left: var(--encoche-decalage);
  border-top-right-radius: var(--encoche-r);
}
.encoche--bas-gauche::before {
  background-image:
    radial-gradient(circle var(--encoche-r) at 100% 0, var(--encoche-pointe)),
    radial-gradient(circle var(--encoche-r) at 100% 0, var(--encoche-pointe)),
    radial-gradient(circle var(--encoche-r) at 0 100%, var(--encoche-creux)),
    linear-gradient(var(--encoche-bord), var(--encoche-bord)),
    linear-gradient(var(--encoche-bord), var(--encoche-bord)),
    radial-gradient(circle var(--encoche-r) at 100% 0, var(--encoche-pointe-sous)),
    radial-gradient(circle var(--encoche-r) at 100% 0, var(--encoche-pointe-sous));
  background-position:
    left calc(var(--encoche-L) + var(--encoche-recouvrement) - 1px) bottom 0,
    left 0 bottom calc(var(--encoche-H) + var(--encoche-recouvrement) - 1px),
    left calc(var(--encoche-L) + var(--encoche-recouvrement) - var(--encoche-r)) bottom calc(var(--encoche-H) + var(--encoche-recouvrement) - var(--encoche-r)),
    left calc(var(--encoche-L) + var(--encoche-recouvrement)) bottom calc(var(--encoche-r) + var(--encoche-recouvrement)),
    left calc(var(--encoche-r) + var(--encoche-recouvrement)) bottom calc(var(--encoche-H) + var(--encoche-recouvrement)),
    left calc(var(--encoche-L) + var(--encoche-recouvrement) - 1px) bottom 0,
    left 0 bottom calc(var(--encoche-H) + var(--encoche-recouvrement) - 1px);
  background-size:
    calc(var(--encoche-r) + 1px) calc(var(--encoche-r) + var(--encoche-recouvrement)),
    calc(var(--encoche-r) + var(--encoche-recouvrement)) calc(var(--encoche-r) + 1px),
    calc(var(--encoche-r) + var(--encoche-debord)) calc(var(--encoche-r) + var(--encoche-debord)),
    1px calc(var(--encoche-H) - 2 * var(--encoche-r)),
    calc(var(--encoche-L) - 2 * var(--encoche-r)) 1px,
    calc(var(--encoche-r) + 1px) calc(var(--encoche-r) + var(--encoche-recouvrement)),
    calc(var(--encoche-r) + var(--encoche-recouvrement)) calc(var(--encoche-r) + 1px);
}

/* --- coin recouvert = coin carre ----------------------------------------
   Un bloc arrondi avec overflow: hidden rogne aussi son pan d'encoche : le
   bord bleu adouci ressortait en liseré courbe au coin decoupe. Le coin
   recouvert par une encoche (celle du bloc ou celle de son .encoche-calque)
   perd donc son arrondi. Specificite renforcee (.encoche.encoche--…) : les
   arrondis des blocs sont poses plus loin, dans sections et responsive. */
.encoche.encoche--haut-gauche:not(.encoche-calque),
.encoche:has(> .encoche-calque.encoche--haut-gauche) { border-top-left-radius: 0; }
.encoche.encoche--haut-droite:not(.encoche-calque),
.encoche:has(> .encoche-calque.encoche--haut-droite) { border-top-right-radius: 0; }
.encoche.encoche--bas-gauche:not(.encoche-calque),
.encoche:has(> .encoche-calque.encoche--bas-gauche) { border-bottom-left-radius: 0; }
.encoche.encoche--bas-droite:not(.encoche-calque),
.encoche:has(> .encoche-calque.encoche--bas-droite) { border-bottom-right-radius: 0; }


/* paliers de taille par defaut */
@media (max-width: 991px) {
  .encoche { --encoche-l: 140px; --encoche-h: 105px; }
}
@media (max-width: 575px) {
  /* Sur une carte de ~345 px, 115 px de pan mangeaient un tiers de la
     largeur : la decoupe lisait comme une amputation. Reduite a 92 px. */
  .encoche { --encoche-l: 92px; --encoche-h: 66px; --encoche-r: 18px; }
}

/* --- bloc « Offre découverte » : personnage detoure pose SUR la carte -----
   La carte passe en overflow visible pour laisser le sujet deborder ; son
   fond et ses coins restent decoupes par le border-radius, seul l'enfant
   sort. L'encoche n'a pas besoin du clipping : son pan est de la couleur du
   fond de page, son angle exterieur se confond donc avec lui. */
.home-discovery-card {
  overflow: visible;
}
.home-discovery-frame {
  position: relative;
  min-height: 500px;   /* pilote la hauteur de la carte, donc du personnage */
}
.home-discovery-person {
  position: absolute;
  right: 0;
  bottom: 0;
  /* pleine hauteur : le sujet touche le bord haut et reste colle au bord bas */
  height: 100%;
  width: auto;
  /* pas de plafond en desktop : le sujet est detoure avec une marge
     transparente a gauche qui l'ecarte deja de la colonne texte */
  max-width: none;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
  z-index: 3;                  /* devant l'encoche */
}
@media (max-width: 1023px) {
  .home-discovery-frame {
    /* empile : la zone image allonge la carte, on la contient */
    min-height: 220px;
  }
  .home-discovery-person {
    height: min(100%, 220px);
    max-width: 62%;
  }
}
@media (max-width: 575px) {
  .home-discovery-frame {
    min-height: 170px;   /* plancher lisible : le visage reste identifiable */
  }
}

/* --- encoche sur les cartes d'avis ----------------------------------------
   Cartes blanches sur fond blanc : sans filet la decoupe serait invisible.
   Taille calee pour passer au-dessus de l'avatar et du nom. */
.home-review-card {
  --encoche-l: 86px;
  --encoche-h: 64px;
  --encoche-r: 20px;
  --encoche-bord: #343b451f;
  --encoche-debord: 1px;   /* recouvre la bordure de la carte sous la decoupe */
  --encoche-sous: var(--encoche-fond);
}
@media (max-width: 575px) {
  /* Declare apres la regle ci-dessus, sinon elle l'emporte a cascade egale. */
  .home-review-card { --encoche-l: 70px; --encoche-h: 52px; --encoche-r: 16px; }
}

/* --- encoche en haut a droite du panneau d'expertise ----------------------
   Le panneau est blanc sur fond blanc : il faut le filet, et donc le debord
   d'1 px pour recouvrir sa bordure sous la decoupe. Ce debord impose de
   liberer l'overflow du panneau ; le rognage des coins passe alors sur
   l'image, qui le portait jusqu'ici via le panneau. */
.home-expertise-panel {
  overflow: visible;
  --encoche-bord: #343b451f;
  --encoche-debord: 1px;
  --encoche-sous: var(--encoche-fond);
}
.home-expertise-panel-media {
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
}
@media (min-width: 992px) {
  .home-expertise-panel-media {
    /* image a gauche : seuls ses coins gauches sont arrondis */
    border-radius: var(--radius-panel) 0 0 var(--radius-panel);
  }
  .home-expertise-panel {
    /* en bas a gauche la decoupe tombe sur la photo : elle peut respirer */
    --encoche-l: 150px;
    --encoche-h: 104px;
    --encoche-r: 26px;
  }
}
@media (min-width: 1280px) {
  .home-expertise-panel {
    --encoche-l: 180px;
    --encoche-h: 124px;
    --encoche-r: 28px;
  }
}

@media (max-width: 575px) {
  .home-discovery-person {
    height: min(100%, 170px);
    max-width: 62%;
  }
}

/* --- puces des panneaux d'expertise : couleur du surtitre du panneau ------
   :has() evite d'ajouter une classe sur chaque panneau ; si le navigateur ne
   le connait pas, les puces restent sur la couleur de marque d'origine. */
.home-expertise-panel:has(.kicker-accent--bleu)      { --panneau-accent: var(--kicker-bleu); }
.home-expertise-panel:has(.kicker-accent--rose)      { --panneau-accent: var(--kicker-rose); }
.home-expertise-panel:has(.kicker-accent--vert)      { --panneau-accent: var(--kicker-vert); }
.home-expertise-panel:has(.kicker-accent--violet)    { --panneau-accent: var(--kicker-violet); }
.home-expertise-panel:has(.kicker-accent--jaune)     { --panneau-accent: var(--kicker-jaune); }
.home-expertise-panel:has(.kicker-accent--vertclair) { --panneau-accent: var(--kicker-vertclair); }

.home-expertise-points li::marker {
  color: var(--panneau-accent, var(--color-primary));
}

/* Sous 992 px le panneau s'empile : la photo passe en haut et le coin
   bas-gauche devient la zone de texte. La decoupe y mordrait sur le bloc
   blanc, on la desactive plutot que de deplacer le contenu. */
@media (max-width: 991px) {
  .home-expertise-panel::before,
  .home-expertise-panel::after {
    content: none;
  }
}

/* Empile (image sous le texte) : plus d'encoche sur le bloc bleu. Elle
   obligeait a reserver sa hauteur en haut de la colonne texte, ce qui creusait
   l'ecart avec la section precedente et allongeait la carte pour rien.
   Pour la remettre : supprimer ce bloc. */
@media (max-width: 1023px) {
  .home-discovery-card::before,
  .home-discovery-card::after {
    content: none;
  }
}

/* Entre 1024 et 1399 px la colonne texte se resserre : on plafonne la
   hauteur du personnage pour que le sujet ne morde pas dessus. Seuil mesure :
   la pleine hauteur ne passe qu'a partir de 1400 px. Au-dela, le sujet
   touche le bord haut et le bord bas. */
/* Repartition des colonnes : la colonne texte tombait a 319 px en tablette et
   507 px en grand ecran, le titre se cassait sur 6 lignes et la carte montait
   a 700-768 px de haut pour un personnage entoure de vide. On rend la largeur
   au texte : titre sur 3 lignes, carte a 500-546 px, meme regle partout ou les
   deux colonnes cohabitent. Mesure : il reste 45 a 100 px entre le bord du
   texte et le sujet visible (le detourage a 12,5 % de marge transparente). */
@media (min-width: 1024px) {
  .home-discovery-card {
    grid-template-columns: 1.2fr 0.8fr;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  .home-discovery-card > .order-1 {
    padding: 3rem;
  }
  /* Taille maximale du personnage sans toucher le texte.
     Geometrie : la carte fait (100vw - 30px), la colonne texte 60 % de cette
     largeur moins 48 px de padding ; le sujet est detoure avec 12,45 % de
     marge transparente a gauche, sa largeur visible vaut donc 1,039 x sa
     hauteur. En resolvant « bord visible du sujet >= bord du texte + 24 px de
     garde » on obtient la hauteur ci-dessous. Elle est plafonnee par la
     hauteur de la carte, atteinte vers 1400 px. */
  .home-discovery-person {
    max-width: none;
    height: min(100%, calc(38.5vw + 11px));
  }
}
/* En pleine hauteur, colle au bord droit, la tete passait sous l'encoche
   haut-droite. On ecarte le sujet du bord ; la marge avec le texte reste
   large a partir de 1400 px. */
@media (min-width: 1400px) {
  .home-discovery-person {
    right: 100px;
  }
}

/* --- section « leviers » : mosaique de 4 blocs cliquables -----------------
   Reprend la maquette Figma : une tuile haute a gauche, deux tuiles carrees
   en haut a droite, une tuile large en bas. Les visuels sont les tuiles de la
   maquette dont le titre a ete efface (inpainting) : le titre est du vrai
   texte, donc editable, traduisible et lisible par les lecteurs d'ecran.
   Les proportions viennent de la maquette : 323/379/378 en colonnes,
   287/286 en lignes, gouttiere 20 px. */
.home-leviers {
  display: grid;
  container-type: inline-size;
  gap: 20px;
  grid-template-columns: 323fr 379fr 378fr;
  grid-template-rows: 287fr 286fr;
  grid-template-areas:
    "ads nexio apropos"
    "ads datapro datapro";
  aspect-ratio: 1146 / 603;
}
.home-levier {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: 20px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* 62 px de marge dans une maquette large de 1146 px */
  padding: 5.4cqw;
  text-decoration: none;
  isolation: isolate;
}
.home-levier::after {
  /* voile discret sous le titre : garde le blanc lisible si le visuel
     passe clair a cet endroit */
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.14) 100%);
  z-index: -1;
  pointer-events: none;
}
.home-levier--ads    { grid-area: ads;     background-image: url(/assets/agryco/homepage/levier-ads-9473b6dd40d23cb0035e8adbec13746ceeaa9c42b0e790826326a7a49ead7d61.png); justify-content: flex-start; padding-top: 9.9cqw; }
.home-levier--nexio  { grid-area: nexio;   background-image: url(/assets/agryco/homepage/levier-nexio-afa662284f23c6f4175e0d1829a3bd905668dd32f350566e9e6638207dffc821.png); }
.home-levier--apropos{ grid-area: apropos; background-image: url(/assets/agryco/homepage/levier-apropos-169c1d285d420c8779bd84349d9e6cb87f763e7214f85f5d4f5656533e4b7b36.png); }
.home-levier--datapro{ grid-area: datapro; background-image: url(/assets/agryco/homepage/levier-datapro-97853f6c2ea8eefcc16242fd6f062664c14077b637eba8425769bee48b5fd859.png); }
.home-levier--ads::after { inset: 0 0 60% 0; background: linear-gradient(0deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.12) 100%); }

.home-levier-titre {
  font-family: var(--font-primary);
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.02;
  letter-spacing: -0.01em;
  /* 34 px dans une maquette large de 1146 px */
  font-size: clamp(22px, 2.97cqw, 40px);
  max-width: 11ch;   /* force la coupe sur deux lignes comme la maquette */
  text-wrap: balance;
}
.home-levier--datapro .home-levier-titre { max-width: 9ch; }

.home-levier {
  transition: transform 0.35s ease, box-shadow 0.35s ease, background-size 0.6s ease;
}
.home-levier:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgb(52 59 69 / 0.22);
  background-size: 106%;
}
.home-levier:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .home-levier, .home-levier:hover { transition: none; transform: none; background-size: cover; }
}

/* tablette : la tuile haute garde sa colonne, les deux carres s'empilent */
@media (max-width: 1023px) {
  .home-leviers {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "ads nexio"
      "ads apropos"
      "datapro datapro";
    aspect-ratio: auto;
    gap: 16px;
  }
  /* la tuile haute prend la hauteur des deux carres empiles : pas de
     proportion imposee, sinon elle depasse et laisse un blanc */
  .home-levier--ads     { aspect-ratio: auto; background-position: center 65%; }
  .home-levier--nexio,
  .home-levier--apropos { aspect-ratio: 379 / 287; }
  .home-levier--datapro { aspect-ratio: 793 / 286; }
  .home-levier { padding: 28px; border-radius: 18px; }
  .home-levier--ads { padding-top: 40px; }
  .home-levier-titre { font-size: clamp(22px, 3.6cqw, 34px); }
}

/* mobile : une colonne, chaque tuile a sa proportion */
@media (max-width: 639px) {
  .home-leviers {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "ads" "nexio" "apropos" "datapro";
    gap: 14px;
  }
  /* titre en haut comme en desktop : cadre sur la partie verte, sinon il
     tombait sur les cartes de visite blanches et devenait illisible */
  .home-levier--ads { aspect-ratio: 16 / 11; background-position: center 34%; justify-content: flex-start; padding-top: 24px; }
  .home-levier--datapro { aspect-ratio: 16 / 9; }
  .home-levier { padding: 24px; }
  .home-levier-titre { font-size: clamp(24px, 8cqw, 34px); max-width: 14ch; }
}

/* --- « carré déco » ------------------------------------------------------
   Carré aux angles fortement arrondis, releve sur la maquette : coin
   circulaire de rayon 30 px sur un cote de 93 px, soit 32,5 % du cote
   (valeur ajustee par comparaison pixel a pixel : 8 pixels d'ecart sur
   8 463, soit 0,09 %). Le rayon est exprime en pourcentage : la forme reste
   identique a n'importe quelle taille, il n'y a qu'une variable a regler.

     <span class="carre-deco"></span>
     <span class="carre-deco" style="--carre-deco-taille: 48px"></span>

   | Variable              | Defaut                | Role                    |
   |-----------------------|-----------------------|-------------------------|
   | --carre-deco-taille   | 92px                  | cote du carre           |
   | --carre-deco-fond     | var(--color-primary)  | remplissage             |
   | --carre-deco-rayon    | 32.5%                 | arrondi des angles      |

   Le contenu eventuel (chiffre, icone) est centre automatiquement.
   Note : la maquette est en #FFB802, l'ancien orange ; le defaut suit le
   jaune du site (#FFD302). Forcer --carre-deco-fond pour revenir a l'orange. */
.carre-deco {
  --carre-deco-taille: 92px;
  --carre-deco-fond: var(--color-primary);
  --carre-deco-rayon: 32.5%;
  display: inline-grid;
  place-items: center;
  inline-size: var(--carre-deco-taille);
  block-size: var(--carre-deco-taille);
  flex: none;
  border-radius: var(--carre-deco-rayon);
  background: var(--carre-deco-fond);
  color: var(--color-secondary);
  line-height: 1;
}

/* --- encoche en bas a droite du panneau jaune « Votre prochain projet » ---
   Le pan reprend la couleur de fond de page : la decoupe se lit comme un vrai
   evidement dans l'aplat. Taille a mi-chemin entre la version d'origine
   (180 x 124) et celle des cartes d'avis (86 x 64), avec pour regle de garder
   au moins 20 px entre le haut de la decoupe et le lien « Découvrir
   l'équipe » : la marge mesuree est de 75 px a partir de 1280 px et de 33 px
   entre 1024 et 1279 px.
   Sous 1024 px la carte s'empile et le lien descend a 48 px du bord : meme
   reduite, l'encoche laisserait moins de 20 px, elle est donc retiree. */
.home-contact-action {
  --encoche-l: 133px;
  --encoche-h: 94px;
  --encoche-r: 24px;
}
@media (max-width: 1023px) {
  .home-contact-action::before,
  .home-contact-action::after {
    content: none;
  }
}

/* --- bloc contact : panneau d'action -------------------------------------
   Le fond gris fonce passe de la carte a sa colonne de gauche. Tant qu'il
   etait sur la carte, il se trouvait AUSSI sous le panneau jaune et sous le
   pan blanc de l'encoche : au rognage des angles arrondis, l'antialiasing
   melangeait les deux couches et laissait un filet sombre d'un pixel le long
   du bord droit, visible en haut et en bas a droite. Chaque colonne peint
   maintenant son propre aplat, il n'y a plus rien de sombre dessous.
   Conserve par ailleurs : deux textes du panneau etaient sous la barre de
   contraste (4,07:1 et 4,48:1 pour 4,5:1 requis), opacites relevees. */
.home-contact-card {
  background: transparent;
}
.home-contact-card > div:first-child {
  background: var(--color-secondary);
}
.home-contact-action {
  /* Vert fonce de la palette (#008E82) assombri de 7 % : en l'etat il ne
     donnait que 4,05:1 avec le blanc, sous les 4,5:1 requis pour les deux
     textes du panneau. A #008479 : 4,59:1, et le CTA jaune repasse au-dessus
     des 3:1 exiges pour un element d'interface (3,27:1 contre 2,89:1). */
  background: #008479;
}
.home-contact-action > p,
.home-contact-action > a {
  color: #fff;
}
.home-contact-action > a {
  text-decoration-color: rgb(255 255 255 / 0.45);
}
.home-contact-action > a:hover {
  color: #fff;
  text-decoration-color: #fff;
}
.home-contact-action .brand-primary-button {
  background: var(--gradient-cta);
  color: var(--color-secondary);
}
.home-contact-action .brand-primary-button:hover {
  background: var(--gradient-cta-hover);
  color: var(--color-secondary);
}

.titre-groupe {
  white-space: nowrap;
}

/* Filet de securite : une colonne de grille ne se reduit pas sous sa largeur
   minimale de contenu, un groupe insecable pouvait donc elargir la colonne
   au-dela de la carte (mesure : 7 a 37 px de debord entre 360 et 390 px).
   min-width:0 leve ce plancher, overflow-wrap:anywhere autorise en dernier
   recours une coupure a l'interieur du groupe plutot qu'un debordement. */
.home-contact-card > div {
  min-width: 0;
}
#contact-title {
  overflow-wrap: anywhere;
}
/* Sous 360 px, 40 px de corps ne laissent pas la place a « le terrain. » :
   le plancher du clamp descend a 30 px, ce qui evite la coupure en plein mot
   que le dernier recours provoquerait. */
@media (max-width: 359px) {
  #contact-title {
    font-size: clamp(30px, 9.5vw, 40px);
  }
}


/* --- banniere d'accueil : encoche en bas a droite + bloc d'informations ----
   Reprend la maquette : un pan rectangulaire est retire du coin bas droit de
   la banniere, et une carte s'y loge, alignee sur les bords droit et bas de
   la banniere, avec 32 px de jeu sur ses deux autres cotes. Proportions
   relevees sur la maquette : pan 347 x 269, carte 313 x 239, rayon 28 pour la
   banniere et 14 pour la carte.
   Le coin bas droit de la banniere passe a un rayon nul : son overflow:hidden
   rognerait sinon l'angle de la carte, qui a son propre rayon. Le pan couvre
   ce coin, la perte est invisible. */
.home-hero-shell {
  --encoche-l: 347px;
  --encoche-h: 269px;
  --encoche-r: 28px;
  --encoche-fond: var(--color-background);
  border-bottom-right-radius: 0;
}

.home-hero-info {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 4;                 /* au-dessus du pan (2) et du contour (3) */
  display: flex;
  flex-direction: column;
  width: calc(var(--encoche-l) - 34px);
  height: calc(var(--encoche-h) - 30px);
  padding: 40px;          /* 40 px entre le texte et le bord de la carte */
  border-radius: 14px;
  background: var(--color-secondary);
  color: #fff;
}
.home-hero-info-scene {
  /* les trois infos se superposent dans la meme cellule de grille : la scene
     prend la hauteur de la plus haute, sans positionnement absolu, donc rien
     ne peut deborder */
  display: grid;
  flex: 1;
  min-height: 0;
}
.home-hero-info-item {
  grid-area: 1 / 1;
  /* toute la largeur de la carte, contenu centre dans les deux sens */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  text-align: center;
}
.home-hero-info-item {
  margin: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}
/* Meme hierarchie que l'ancienne barre de chiffres : intitule en capitales,
   chiffre en gros, precision en dessous. Transposee sur fond sombre : le gris
   d'origine (#677783) n'y tient qu'a 2,45:1, les tons sont donc eclaircis.
   Mesures sur le fond #343B45 : intitule 5,19:1, chiffre 6,69:1 (gris clair,
   comme demande), precision 5,19:1. */
.home-hero-info-item > p { margin: 0; }
.home-hero-info-label {
  color: #a7b1bb;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.35;
}
.home-hero-info-valeur {
  margin-top: 0.6rem !important;
  color: #fff;
  font-family: var(--font-primary);
  letter-spacing: -0.035em;
  white-space: nowrap;
  /* taille de repli : le controleur la remplace par la valeur calculee pour
     que le chiffre occupe toute la largeur disponible */
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 0.95;
}
.home-hero-info-valeur small { text-align: center; }
.home-hero-info-valeur small {
  color: #a7b1bb;
  font-family: var(--font-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  display: block;
}
.home-hero-info-detail {
  margin-top: 0.45rem !important;
  color: #a7b1bb;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.home-hero-info-item.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* La barre de progression et le CTA ont ete retires : la carte ne porte plus
   que l'information, centree verticalement. Les regles correspondantes
   (.home-hero-info-barre, .home-hero-info-cta) ont ete supprimees ; la cible
   "progress" du controleur est facultative, il tourne sans. */

@media (prefers-reduced-motion: reduce) {
  .home-hero-info-item { transition: none; }
}

/* Sous 768 px seulement : l'encoche est retiree et la carte sort du flux du
   bandeau (elle est ensuite posee dessous, voir plus bas). Au-dessus, elle
   reste dans le pan de l'encoche, qui se reduit par paliers. Le seuil etait a
   1024 px : tablettes et petits ecrans d'ordinateur la voyaient donc rentrer
   a l'interieur du bandeau, ce qu'on ne veut pas. */
@media (max-width: 767px) {
  .home-hero-shell::before,
  .home-hero-shell::after { content: none; }
  .home-hero-shell { border-bottom-right-radius: var(--home-hero-radius); }
  .home-hero-info {
    position: static;
    width: auto;
    /* hauteur fixe : le corps du chiffre se calcule dessus, une hauteur
       dictee par le contenu rendrait le calcul circulaire */
    height: 170px;
    margin: 0 20px 20px;
    padding: 24px;
    border-radius: 16px;
  }
}
@media (max-width: 575px) {
  .home-hero-info { margin: 0 15px 15px; padding: 24px; }
  .home-hero-info-item { font-size: 1rem; }
}

/* --- TEST : « Nos solutions » a la largeur du bloc contact ----------------
   Le titre et la mosaique passent de la largeur du conteneur large (1410 px
   a 1440) a 1176 px, celle de la carte « Votre prochain projet ».
   Pour revenir en arriere : supprimer ce bloc. */
.home-solutions-heading,
.home-leviers {
  max-width: 1176px;
  margin-inline: auto;
}

/* --- TEST : « Offre découverte » a la largeur du bloc contact -------------
   La carte passe de la largeur du conteneur large a 1176 px, comme « Votre
   prochain projet » et « Nos solutions ».
   La hauteur du personnage etait calculee sur la largeur de fenetre
   (38.5vw + 11px), formule qui supposait une carte large de 100vw - 30px.
   Avec une carte plafonnee, elle donnait un sujet trop grand : jusqu'a 91 px
   de trop a 1600, le sujet passant alors sur le texte. Elle est recalculee
   sur la largeur de la CARTE (cqw), ce qui la rend juste quelle que soit la
   largeur imposee : 38,5 % du cote + 23 px, soit la resolution de
   « bord visible du sujet >= bord du texte + 24 px de garde ».
   Pour revenir en arriere : supprimer ce bloc. */
.home-discovery-card {
  max-width: 1176px;
  margin-inline: auto;
  container-type: inline-size;
}
@media (min-width: 1024px) {
  .home-discovery-person {
    max-width: none;
    height: min(100%, calc(38.5cqw + 23px));
  }
}

/* --- bloc contact : colonne principale en violet, panneau en gris fonce ---
   La colonne de gauche prend le violet de la palette (#BA4A85) ; le panneau
   de droite, vert jusqu'ici, revient au gris fonce du site. Contrastes
   mesures : sur violet, blanc 4,77:1 et blanc a 97 % 4,58:1 pour 4,5:1
   requis ; sur gris fonce, blanc 11,31:1.
   Pour revenir en arriere : supprimer ce bloc. */
.home-contact-card > div:first-child {
  background: #ba4a85;
}
.home-contact-action {
  background: var(--color-secondary);
}
.home-contact-card > div:first-child > p:last-child {
  color: rgb(255 255 255 / 0.97);
}
.home-contact-action > a {
  color: #fff;
  text-decoration-color: rgb(255 255 255 / 0.45);
}
.home-contact-action > a:hover {
  color: #fff;
  text-decoration-color: #fff;
}

/* --- bloc « Notre méthode » : repartition du contenu ----------------------
   Colonnes egales et etapes centrees verticalement. Mesure a 1440 px :
   0,85/1,15 donnait un titre de 6 lignes (401 px) et des etapes de 168 px,
   soit 233 px de vide ; a 1/1 le titre tombe a 5 lignes (339 px) et chaque
   etape garde 214 px de large sur 3 lignes. Les etapes restent calees en bas,
   leur derniere ligne affleurant celle du gros titre. */
@media (min-width: 1024px) {
  .home-method-card > div {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- barre de navigation des carrousels : un seul systeme pour le site ----
   Le site portait deux traitements : celui des avis (fleches rondes de 44 px
   a filet, puce qui s'etire en barre de 24 px a l'etat actif) et celui des
   pages internes (fleches pleines de 36 px, puce jaune fixe). Le premier est
   generalise via la classe `carousel-nav`, posee sur les deux conteneurs.
   Le balisage des puces differe selon les pages — bouton nu ici, bouton
   contenant un span la — d'ou les deux selecteurs : le style est le meme. */
.carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

/* fleches : seuls enfants directs de type bouton */
.carousel-nav > button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(52 59 69 / 0.25);
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--color-secondary);
  font-size: 1.125rem;
  line-height: 1;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.carousel-nav > button:hover:not(:disabled) {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}
.carousel-nav > button:disabled {
  opacity: 0.4;
}
.carousel-nav > button:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 4px;
}

/* puces : la zone cliquable fait 44 px de haut, la marque 8 px */
.carousel-nav button[data-carousel-target="pagination"],
.carousel-nav div[data-carousel-target="pagination"] > button {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
}
.carousel-nav button[data-carousel-target="pagination"]::after,
.carousel-nav div[data-carousel-target="pagination"] > button > span {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgb(52 59 69 / 0.35);
  transition: width 0.3s ease, background 0.3s ease;
}
.carousel-nav button[data-carousel-target="pagination"].active::after,
.carousel-nav div[data-carousel-target="pagination"] > button.active > span {
  width: 24px;
  background: var(--color-secondary);
}
.carousel-nav button[data-carousel-target="pagination"]:focus-visible,
.carousel-nav div[data-carousel-target="pagination"] > button:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
  border-radius: 999px;
}

/* --- survol des CTA : un seul comportement pour tout le site --------------
   Seuls quelques boutons portaient `hover:-translate-y-0.5` en classe
   utilitaire (20 sur les 6 pages, dont 12 sur le blog) ; les autres ne
   bougeaient pas. Le leger relevement du CTA « Contactez-nous » du header est
   generalise a toutes les familles de CTA, avec une transition commune.
   Le mouvement est desactive quand le systeme demande de reduire les
   animations. */
.brand-primary-button,
.page-primary-button,
.page-secondary-link,
.blog-cta-pill,
.home-hero-secondary,
.home-expertise-panel-link,
.site-floating-contact,
.home-levier,
.carousel-nav > button {
  transition-property: color, background-color, background-image, border-color, transform, box-shadow;
  transition-duration: 0.25s;
  transition-timing-function: ease;
  will-change: transform;
}
.brand-primary-button:hover,
.page-primary-button:hover,
.page-secondary-link:hover,
.blog-cta-pill:hover,
.home-hero-secondary:hover,
.home-expertise-panel-link:hover,
.site-floating-contact:hover,
.carousel-nav > button:hover:not(:disabled) {
  transform: translateY(-2px);
}
/* les tuiles de la section leviers se relevaient deja de 4 px : on aligne */
.home-levier:hover {
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .brand-primary-button,
  .page-primary-button,
  .page-secondary-link,
  .blog-cta-pill,
  .home-hero-secondary,
  .home-expertise-panel-link,
  .site-floating-contact,
  .home-levier,
  .carousel-nav > button {
    transition-property: color, background-color, background-image, border-color, box-shadow;
  }
  .brand-primary-button:hover,
  .page-primary-button:hover,
  .page-secondary-link:hover,
  .blog-cta-pill:hover,
  .home-hero-secondary:hover,
  .home-expertise-panel-link:hover,
  .site-floating-contact:hover,
  .home-levier:hover,
  .carousel-nav > button:hover:not(:disabled) {
    transform: none;
  }
}


/* --- Agryco Ads : banniere reprise de celle de l'accueil -------------------
   La page reprend la forme exacte de la banniere d'accueil (carte arrondie
   posee a 15 px du haut et des cotes, largeur utile 1380 px, encoche en bas
   a droite avec la carte d'informations) et son echelle typographique. Le
   menu n'y est pas integre : la barre blanche de la page reste flottante
   par-dessus, d'ou la reserve en haut du contenu.
   Le fond est le vert fonce de la palette (#007C72, le vert de marque
   assombri deja utilise pour les surtitres) : blanc a 5,09:1 et jaune du
   titre a 3,52:1, les deux au-dessus des seuils. La carte d'informations
   reste au gris fonce du site. */
.ads-page {
  --home-hero-radius: 24px;
}
@media (min-width: 992px) {
  .ads-page {
    --home-hero-radius: 32px;
  }
}
main.ads-main:has(> .ads-hero-v2) {
  padding-top: 0;
}
.ads-hero-v2 {
  /* `.ads-hero-section` pose un `padding` raccourci qui remet le haut a 0 et
     les cotes a 8 px sous 768 px : on redonne ici les 15 px de l'accueil sur
     les cotes. En haut, la carte ne passe pas sous le menu : elle commence
     dessous, avec le meme jeu de 15 px que sur les cotes. Le bas de la barre
     est a 86 px (82 px en mobile, ou elle est un peu moins haute). */
  padding-top: 101px;
  padding-inline: 15px;
  padding-bottom: var(--rythme-section);
}
@media (max-width: 639px) {
  .ads-hero-v2 {
    padding-top: 97px;
  }
}
.ads-hero-v2 .home-hero-shell {
  background: #007c72;
}

/* rangee de tete : surtitre a gauche, pastille de marque a droite, posee en
   haut du contenu et non collee au bord de la carte */
.ads-hero-v2 .ads-hero-masthead {
  /* le filet ne court plus sur toute la carte : il s'arrete a la largeur du
     bloc de contenu (titre + texte courant) place dessous */
  max-width: 670px;
  border-bottom: 1px solid #ffffff2e;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  padding: 0 0 1rem;
  display: flex;
}
/* Le surtitre est en blanc et non au jaune de marque : sur ce vert, le jaune
   #FFD302 ne mesure que 3,53:1, sous le seuil de 4,5 exige pour un texte de
   cette taille — et aucun jaune lisible comme tel n'y arrive (un jaune tres
   pale plafonne a 4,48). Le blanc donne 5,09:1. Le jaune reste sur le titre,
   qui est un grand texte : 3,53:1 pour un seuil de 3. */
.ads-hero-v2 .ads-hero-masthead .page-kicker {
  color: #fff;
  margin: 0;
}

/* blanc a 85 % = 4,13:1 sur ce vert, sous le seuil ; remonte a 92 % (4,58) */
.ads-hero-v2 .home-hero-content p.text-white\/85 {
  color: #ffffffeb;
}
.ads-hero-v2 .ads-hero-masthead img {
  width: auto;
  height: 22px;
}

/* la rangee de tete se cale en haut de la carte ; le bloc titre + texte + CTA
   se recentre dans la hauteur restante, plutot que de laisser un vide en bas.
   Le menu etant hors de la carte, la reserve haute de l'accueil (qui servait
   a le laisser passer) n'a plus lieu d'etre. */
.ads-hero-v2 .home-hero-content {
  justify-content: flex-start;
}
.ads-hero-v2 .home-hero-content > div:last-child {
  margin-block: auto;
}

/* les trois reperes n'ont pas de sur-titre ici : le chiffre prend la place */
.ads-hero-v2 .home-hero-info-valeur {
  margin-top: 0;
}


/* --- Agryco Ads, section « Marketing direct » : passage sur fond blanc -----
   Le bloc etait entierement pose sur le gris fonce du site. Il revient au
   fond blanc des autres sections : gros titre au gris fonce, surtitre au
   bleu de la palette des surtitres (#0084B7) et textes courants a la couleur
   de texte secondaire du site. La liste des trois leviers, qui etait dessinee
   en blanc sur fond sombre, est retournee : filets et libelles reprennent les
   valeurs claires du site. */
.ads-page .ads-direct-section {
  background: var(--color-background);
}
.ads-page .ads-direct-section .page-section-heading h2 {
  color: var(--color-text);
}
.ads-page .ads-direct-section .page-section-heading > p:last-child {
  color: var(--color-muted);
}
.ads-page .ads-direct-options {
  border-color: var(--color-border);
}
.ads-page .ads-direct-options .ads-option {
  color: var(--color-text);
}
.ads-page .ads-direct-options .ads-option + .ads-option,
.ads-page .ads-direct-options .ads-option:last-child {
  border-top-color: var(--color-border);
}
.ads-page .ads-direct-options strong {
  color: var(--color-text);
}
.ads-page .ads-direct-options small {
  color: var(--color-muted);
}
.ads-page .ads-direct-options i {
  color: var(--color-muted);
}
.ads-page .ads-direct-options [aria-hidden="true"]:last-child {
  color: var(--color-muted);
}
/* la pastille des icones etait blanche pour ressortir du fond sombre : sur
   fond blanc elle prend le creme du site */
.ads-page .ads-option-icon {
  background: var(--color-surface);
}

/* La photo du bloc « Marketing direct » etait un sujet detoure pose sur un
   aplat creme, d'ou le cadre et l'alignement en bas. La nouvelle est une
   photo pleine : elle remplit le cadre, recadree au centre. */
.ads-page .ads-direct-media {
  align-items: stretch;
  background: none;
}
.ads-page .ads-direct-media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* encoche en haut a droite du bloc photo. Le coin haut droit de la carte
   passe a un rayon nul : son overflow:hidden arrondirait sinon l'angle
   exterieur du pan, qui doit rester net. Le pan est rempli du fond de
   section, desormais blanc. */
.ads-page .ads-direct-media {
  --encoche-l: 180px;
  --encoche-h: 124px;
  --encoche-r: 28px;
  border-top-right-radius: 0;
}


/* --- menu : survol en gras quand la barre est sur fond blanc ---------------
   Sur fond blanc (pages internes, et accueil une fois defilee), le survol ne
   vire plus au jaune : le libelle passe simplement en gras, la couleur ne
   bouge pas. Le jaune reste sur la barre sombre de l'accueil avant
   defilement, ou il est le seul rappel de marque disponible (regle plus
   specifique, `.home-page .site-header:not(.nav-new) .site-nav-link:hover`).

   Passer de 500 a 700 elargit chaque libelle de 5 a 8 px et pousserait tous
   les suivants, soit jusqu'a 31 px de saut sur le dernier. La largeur du gras
   est donc reservee en permanence par un double du libelle, pose en ::before,
   de hauteur nulle et invisible : c'est lui qui fixe la largeur du lien, que
   le texte soit gras ou non. D'ou l'attribut `data-libelle` sur chaque lien. */
.site-nav-link {
  display: inline-block;
}
.site-nav-link::before {
  content: attr(data-libelle);
  visibility: hidden;
  pointer-events: none;
  display: block;
  height: 0;
  overflow: hidden;
  font-weight: 700;
}
.site-nav-link:hover {
  color: var(--color-secondary);
  font-weight: 700;
}


/* --- banniere Ads : hauteur resserree --------------------------------------
   La carte heritait des 760 px de hauteur minimale de l'accueil, dont le
   contenu est plus long. Le bloc titre etant centre dans cette hauteur, il
   restait 149 px sous les CTA et 172 px entre le surtitre et le titre.
   La hauteur suit desormais le contenu : on retire le centrage automatique
   et la hauteur minimale heritee, et on resserre l'ecart sous le surtitre. */
.ads-hero-v2 .home-hero-shell,
.ads-hero-v2 .home-hero-layout,
.ads-hero-v2 .home-hero-content {
  min-height: 0;
}

/* le jeu sous les CTA est aligne sur le retrait lateral du contenu
   (px-6 / sm:px-10 / lg:px-14 dans le balisage, soit 24, 40 puis 56 px) :
   le bloc est ainsi a egale distance du bord gauche et du bord bas. */
.ads-hero-v2 .home-hero-content {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
@media (min-width: 640px) {
  .ads-hero-v2 .home-hero-content {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}
@media (min-width: 1024px) {
  .ads-hero-v2 .home-hero-content {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}
.ads-hero-v2 .home-hero-content > div:last-child {
  margin-block: 0;
}
.ads-hero-v2 .ads-hero-masthead {
  margin-bottom: clamp(1.5rem, 2.6vw, 2.5rem);
}


/* --- « Trois leviers complémentaires » : trois tuiles identiques ----------
   La mosaique asymetrique a quatre tuiles laisse place a trois tuiles cote a
   cote, toutes baties comme celle d'Agryco Ads : meme proportion portrait
   (323 x 603 de la maquette), titre en haut, visuel en bas. La tuile
   « À propos de nous » est retiree.
   Les visuels de Nexio et Data Pro n'existaient qu'en format paysage : ils
   ont ete recomposes en portrait, fond degrade reconstruit et objet repose
   en bas, plutot qu'agrandis (ils seraient devenus flous). */
.home-leviers {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto;
  grid-template-areas: "ads datapro nexio";
  aspect-ratio: auto;
}
.home-levier {
  aspect-ratio: 323 / 603;
}
.home-levier--nexio {
  background-image: url(/assets/agryco/homepage/levier-nexio-portrait-ae20ee405dca96984d7ef849ca07793c6be00141ad0fa716497205f73292ef72.png);
}
.home-levier--datapro {
  background-image: url(/assets/agryco/homepage/levier-datapro-portrait-dc515c3db81c40e91c7958c3e4c91878b3f92ec1edda5809c03a3c1d961cf673.png);
}
/* meme agencement que la tuile Ads : titre cale en haut, voile inverse */
.home-levier--nexio,
.home-levier--datapro {
  justify-content: flex-start;
  padding-top: 9.9cqw;
}
.home-levier--nexio::after,
.home-levier--datapro::after {
  inset: 0 0 60% 0;
  background: linear-gradient(0deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.12) 100%);
}
.home-levier--datapro .home-levier-titre {
  max-width: 11ch;
}

@media (max-width: 1023px) {
  .home-leviers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "ads datapro nexio";
  }
  .home-levier--ads,
  .home-levier--nexio,
  .home-levier--datapro {
    aspect-ratio: 323 / 603;
  }
  .home-levier--ads {
    background-position: center;
  }
  .home-levier--ads,
  .home-levier--nexio,
  .home-levier--datapro {
    padding-top: 28px;
  }
}

/* mobile : une colonne ; les tuiles se raccourcissent et le visuel reste
   cale en bas, ou se trouve l'objet */
@media (max-width: 639px) {
  .home-leviers {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "ads" "datapro" "nexio";
  }
  .home-levier--ads,
  .home-levier--nexio,
  .home-levier--datapro {
    aspect-ratio: 4 / 3;
    background-position: center bottom;
    padding-top: 24px;
  }
}


/* --- banniere Ads : contenu de la carte de l'encoche -----------------------
   Logo Nexio Research (symbole en couleur, mot-symbole passe en blanc pour
   ce fond gris fonce) et un bouton du meme type que « Découvrir nos
   leviers ». 40 px de marge interne comme sur la carte de l'accueil ; le
   logo occupe toute la place restante. */
.ads-hero-info {
  justify-content: space-between;
  align-items: stretch;
  gap: 20px;
  padding: 40px;
}
.ads-hero-info-logo {
  object-fit: contain;
  object-position: center;
  width: 100%;
  min-height: 0;
  flex: 1;
}
.ads-hero-info-cta {
  flex: none;
  padding: 0.6rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

@media (max-width: 1023px) {
  .ads-hero-info {
    padding: 24px;
    gap: 16px;
  }
}


/* --- accueil, dernier bloc : tout centre, tout violet ---------------------
   Le bloc etait en deux colonnes, texte a gauche sur violet et panneau
   d'action a droite sur gris fonce. Il devient une seule colonne centree,
   entierement violette. L'encoche passe de l'ancien panneau de droite au
   coin bas droit de la carte, qui perd donc son rayon a cet angle : son
   overflow:hidden arrondirait sinon l'angle exterieur du pan. */
.home-contact-card {
  --encoche-l: 180px;
  --encoche-h: 124px;
  --encoche-r: 28px;
  --encoche-fond: var(--color-background);
  background: #ba4a85;
  border-bottom-right-radius: 0;
}
.home-contact-inner {
  /* le titre developpe environ 1590 px a 68 px, et ses seules coupures
     possibles tombent a 635 ou 1002 px : il faut donc au moins 1002 px de
     largeur utile pour qu'il tienne sur deux lignes. La carte en fait 1176,
     d'ou un retrait lateral plafonne a 56 px. */
  max-width: 1176px;
  margin-inline: auto;
  /* meme reserve en haut qu'en bas. Le titre est en `line-height: 0.95` :
     ses capitales debordent de 6 px au-dessus de leur boite, d'ou les 6 px
     rendus au padding haut pour que les deux blancs se valent a l'oeil. */
  padding: clamp(2.9rem, 5.4vw, 4.9rem) clamp(1.5rem, 3.9vw, 3.5rem) clamp(2.5rem, 5vw, 4.5rem);
  text-align: center;
}
.home-contact-inner h2 {
  text-wrap: balance;
}
.home-contact-texte {
  max-width: 660px;
  margin: 1.5rem auto 0;
  /* blanc plein : a 88 % il tombait a 4,06:1 sur ce violet, sous le seuil de
     4,5 ; a 100 % il mesure 4,77:1 */
  color: #fff;
  font-size: 1rem;
  line-height: 1.75;
}
.home-contact-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 2.25rem;
}
.home-contact-lien {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: #ffffff59;
  text-underline-offset: 4px;
}
.home-contact-lien:hover {
  text-decoration-color: #fff;
}

/* sous 1024 px l'encoche est desactivee ailleurs sur le site : meme regle */
@media (max-width: 1023px) {
  .home-contact-card::before,
  .home-contact-card::after {
    content: none;
  }
  .home-contact-card {
    border-bottom-right-radius: 28px;
  }
}


/* --- banniere d'accueil : hauteur resserree --------------------------------
   Le bandeau « 01 / 02 / 03 » et son filet sont retires du balisage. La carte
   ne garde plus de hauteur minimale : elle suit son contenu.
   Le jeu sous les CTA est aligne sur le retrait lateral du contenu
   (px-6 / sm:px-10 / lg:px-14, soit 24, 40 puis 56 px), et l'ecart entre le
   texte et les CTA est cale sur celui qui separe le titre du texte (28 px,
   le `mt-7` du paragraphe). */
.home-hero-shell,
.home-hero-layout,
.home-hero-content {
  min-height: 0;
}
.home-hero-content {
  padding-bottom: 1.5rem;
}
@media (min-width: 640px) {
  .home-hero-content {
    padding-bottom: 2.5rem;
  }
}
@media (min-width: 1024px) {
  .home-hero-content {
    padding-bottom: 3.5rem;
  }
}
.home-hero-actions {
  margin-top: 1.75rem;
}

/* les deux boutons a la meme largeur : deux colonnes egales, dimensionnees
   sur le plus large des deux libelles */
@media (min-width: 640px) {
  .home-hero-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    width: fit-content;
  }
  .home-hero-actions > * {
    width: 100%;
  }
}


/* --- bannieres des pages internes : une seule mecanique, quatre couleurs ---
   Les quatre pages (Ads, Data Pro, Nexio, L'équipe) partagent le meme
   balisage et la meme mise en page ; seule la couleur change, pilotee par
   quelques variables.

   Contrastes mesures (seuil 4,5 pour le texte courant, 3 pour le grand
   titre) :
     vert   #007C72 : blanc 5,09 — jaune du titre 3,52
     rose   #DB235F : blanc 4,75 — jaune du titre 3,30
     bleu   #0084B7 (bleu de la palette) : blanc 4,21 — jaune du titre 2,86
     jaune  #FFD000 : le blanc n'y atteint que 1,47. Cette banniere passe
            donc au gris fonce du site (7,68), CTA principal inverse en
            gris fonce sur texte blanc, titre d'un seul ton. */
.ads-hero-v2 {
  --banniere-fond: #007c72;
  --banniere-texte: #fff;
  --banniere-accent: var(--color-primary);
  --banniere-filet: #ffffff2e;
  --banniere-cta-fond: var(--gradient-cta);
  --banniere-cta-texte: var(--color-secondary);
  --banniere-cta-survol: var(--gradient-cta-hover);
  --banniere-lien-bord: #ffffff80;
}
.ads-hero-v2--rose  { --banniere-fond: #db235f; }
.ads-hero-v2--bleu  { --banniere-fond: var(--color-accent-blue); }
.ads-hero-v2--jaune {
  --banniere-fond: #ffd000;
  --banniere-texte: var(--color-secondary);
  --banniere-accent: var(--color-secondary);
  --banniere-filet: #343b4540;
  --banniere-cta-fond: var(--color-secondary);
  --banniere-cta-texte: #fff;
  --banniere-cta-survol: #242a32;
  --banniere-lien-bord: #343b4566;
}

.ads-hero-v2 .home-hero-shell {
  background: var(--banniere-fond);
}
.ads-hero-v2 h1 {
  color: var(--banniere-texte);
}
.ads-hero-v2 .ads-hero-accent {
  color: var(--banniere-accent);
}
.ads-hero-v2 .ads-hero-paragraphe {
  color: var(--banniere-texte);
}
.ads-hero-v2 .ads-hero-masthead {
  border-bottom-color: var(--banniere-filet);
}
.ads-hero-v2 .ads-hero-masthead .page-kicker {
  color: var(--banniere-texte);
}
/* le CTA principal des bannieres garde le degrade jaune du site ; seule la
   banniere jaune l'inverse en gris fonce, faute de contraste sur ce fond */
.ads-hero-v2 .brand-primary-button {
  background: var(--banniere-cta-fond);
  color: var(--banniere-cta-texte);
  box-shadow: none;
}
.ads-hero-v2 .brand-primary-button:hover {
  background: var(--banniere-cta-survol);
}
.ads-hero-v2 .home-hero-secondary {
  color: var(--banniere-texte);
  border-color: var(--banniere-lien-bord);
}
/* au survol le fond passe au blanc : le libelle doit donc passer au gris
   fonce du site et non a la couleur de la banniere, qui restait pale sur ce
   blanc (le vert n'y donnait que 4,1:1, le jaune 1,5:1). Gris fonce sur
   blanc : 10,3:1. */
.ads-hero-v2 .home-hero-secondary:hover {
  background: #fff;
  color: var(--color-secondary);
}
.ads-hero-v2 :focus-visible {
  outline-color: var(--banniere-texte);
}
/* la carte de l'encoche garde le gris fonce du site sur les quatre pages,
   et son bouton reste dessine en blanc */
.ads-hero-v2 .ads-hero-info .home-hero-secondary {
  color: #fff;
  border-color: #ffffff80;
}
.ads-hero-v2 .ads-hero-info .home-hero-secondary:hover {
  background: #fff;
  color: var(--color-secondary);
}


/* --- « Trois leviers » : tuiles raccourcies -------------------------------
   La proportion passe de 323 x 603 a 323 x 430, soit 707 px de hauteur a
   504 px sur une grille de 1176. Les trois visuels ont ete recomposes a
   cette proportion (fond reconstruit, objet remis a l'echelle) plutot que
   recadres : un recadrage en hauteur aurait fait remonter les objets dans
   le titre. */
.home-levier {
  aspect-ratio: 323 / 465;
}
.home-levier--ads {
  background-image: url(/assets/agryco/homepage/levier-ads-court-44fe22ae6a6bcc4974fde74d6b84a3aac7751b4005070d7da7a6b3c847dc9497.png);
}
.home-levier--nexio {
  background-image: url(/assets/agryco/homepage/levier-nexio-court-2e2a155ec36d13356fa44eebfd07d55a7c3763a4faf7ccc8b365b2433ea1d412.png);
}
/* le visuel porte du texte : une declinaison par langue (cf. LocalizedAsset) */
.home-levier--nexio:lang(en) {
  background-image: url(/assets/agryco/homepage/levier-nexio-court-en-faa4bf029d44115d912638c773cfdda2a84dfc870d8165b0005795ec68b5e3e1.png);
}
.home-levier--nexio:lang(de) {
  background-image: url(/assets/agryco/homepage/levier-nexio-court-de-4c4245a592e6cf5228beed5649611b75240c683ea0455b9de5ee126f6ba2f522.png);
}
.home-levier--nexio:lang(es) {
  background-image: url(/assets/agryco/homepage/levier-nexio-court-es-bc705f8c01c3807bbeb9300eb0500b904b2b5ec5c9df22d43ef5f38188743092.png);
}
.home-levier--nexio:lang(it) {
  background-image: url(/assets/agryco/homepage/levier-nexio-court-it-841000e92428bbd21c20cff24168e7192131783ae94e81be223c32d4fa4f30ec.png);
}
.home-levier--nexio:lang(pt) {
  background-image: url(/assets/agryco/homepage/levier-nexio-court-pt-703607fe4b2be901628b247297f98563bd9eb42d5b191ae5e54aea911e49725f.png);
}
.home-levier--datapro {
  background-image: url(/assets/agryco/homepage/levier-datapro-court-dbf76219aaff6878dc8205e26f208b9de85171860308d8c202375e37a337ca25.png);
}
@media (max-width: 1023px) {
  .home-levier--ads,
  .home-levier--nexio,
  .home-levier--datapro {
    aspect-ratio: 323 / 465;
  }
}
@media (max-width: 639px) {
  .home-levier--ads,
  .home-levier--nexio,
  .home-levier--datapro {
    aspect-ratio: 16 / 10;
    background-position: center bottom;
  }
}

/* le bouton principal prend plus de place que le lien qui le suit : il faisait
   176 px contre 216 px au lien, l'inverse de la hierarchie voulue */
.home-contact-actions .brand-primary-button {
  min-width: min(320px, 100%);
}


/* --- Nexio Research : echelle de titres d'un cran en dessous ---------------
   Les titres y paraissaient trop imposants : « NEXIO RESEARCH® » remplit
   presque toute la colonne a 80 px. Le grand titre passe a 68 px et les
   titres de section a 64 px (contre 80 et 76). Les autres pages gardent
   l'echelle d'origine. */
.nexio-page .ads-hero-v2 h1 {
  font-size: clamp(38px, 4.8vw, 68px);
}
.nexio-page .page-section-heading h2 {
  font-size: clamp(2.1rem, 4.3vw, 4rem);
}

/* --- banniere L'équipe : « À propos de » en blanc, « nous » en gris fonce --
   Sur ce jaune, le blanc ne mesure que 1,47:1 : c'est un parti pris
   graphique sur un tres grand titre, pas un texte a lire. Le reste du titre
   reste au gris fonce (7,68:1). */
.ads-hero-v2--jaune {
  --banniere-accent: #fff;
}


/* --- « Notre méthode » : le titre etait rogne -----------------------------
   La carte a perdu son fond et ses angles arrondis quand le bloc est passe a
   la largeur du bloc avis, mais elle a garde le `overflow-hidden` du
   balisage. Or le titre est compose en interlignage 0,96 : ses capitales
   accentuees debordent de leur boite de quelques pixels en haut et en bas,
   et se faisaient couper. Sans fond ni rayon, ce rognage ne sert plus a
   rien : on le retire. */
.home-method-card {
  overflow: visible;
}


/* --- bandeau cookies -------------------------------------------------------
   Fond au gris fonce du site. Le bandeau est elargi (32 a 42 rem) et le lien
   « En savoir plus » passe en `nowrap` : la phrase tient sur deux lignes et
   le lien n'est plus coupe en fin de ligne. */
[data-cookie-consent-target="banner"] > div {
  background: var(--color-secondary);
}
[data-cookie-consent-target="banner"] a[href="/politique-cookies"] {
  white-space: nowrap;
}
@media (min-width: 640px) {
  /* le bandeau est centre par `left: 50%` puis translate : sa largeur
     automatique etait donc plafonnee a la moitie de la fenetre (384 px a
     768 px de large, d'ou une phrase sur cinq lignes). Largeur donnee
     explicitement. */
  [data-cookie-consent-target="banner"] {
    width: min(42rem, calc(100vw - 3rem));
    max-width: none;
  }
}


/* --- tuiles des leviers : le visuel monte au survol ------------------------
   Au survol la tuile se souleve deja de 2 px ; le visuel, lui, grossit de
   8 % et remonte de 18 px. Le grossissement est ce qui rend la remontee
   possible : l'image etant exactement a la proportion de la tuile, sans lui
   le bas se decouvrirait. A 545 px de haut, 108 % laissent 43 px de jeu,
   dont 18 sont consommes par la remontee. */
.home-levier {
  /* 100 % et non `cover` : les visuels sont exactement a la proportion de la
     tuile, donc 100 % de large la remplit deja — et surtout, `cover` est un
     mot-cle, qui ne s'interpole pas vers 108 %. La taille sautait donc en fin
     d'animation pendant que la position, elle, glissait : un bandeau clair
     apparaissait sous l'image le temps du survol. */
  background-size: 100%;
  background-position: center bottom;
  transition-property: transform, box-shadow, background-size, background-position;
  transition-duration: 0.45s;
  transition-timing-function: ease;
}
.home-levier:hover {
  /* remontee discrete : 10 px, pour 22 px de jeu degages par le
     grossissement de 4 % — le bas de l'image reste couvert */
  background-size: 104%;
  background-position: center calc(100% - 10px);
}
/* filet de securite : meme si l'image se decalait, c'est le bas du degrade
   de la tuile qui apparaitrait, jamais le blanc de la page */
.home-levier--ads     { background-color: #002c2e; }
.home-levier--nexio   { background-color: #004863; }
.home-levier--datapro { background-color: #8b1038; }

@media (prefers-reduced-motion: reduce) {
  .home-levier,
  .home-levier:hover {
    background-size: 100%;
    background-position: center bottom;
  }
}

/* Le visuel Data Pro est coupe net au bas du bloc : le decaler vers le haut
   le decollerait de ce bord. Sa tuile garde donc l'ancrage en bas et ne joue
   que sur le grossissement — l'image restant calee par le bas, tout ce
   qu'elle contient s'eleve quand meme de 4 %, sans decoller. */
.home-levier--datapro:hover {
  background-position: center bottom;
}


/* --- banniere Nexio : les telephones a droite -----------------------------
   Le visuel se loge dans la bande libre entre la colonne de texte et
   l'encoche, cale sur le bord bas de la carte et debordant legerement
   dessous. Il s'arrete a gauche de l'encoche : celle-ci est un pan retire du
   bloc, rempli du fond de page, et decouperait un rectangle blanc dans les
   telephones s'ils passaient dessous. */
.ads-hero-visuel {
  /* dans la coquille, donc entierement contenu dans la forme de la
     banniere : cale a gauche du pan de l'encoche, sans le chevaucher */
  position: absolute;
  right: var(--encoche-l);
  bottom: 24px;
  z-index: 3;
  width: clamp(200px, 21vw, 300px);
  height: auto;
  pointer-events: none;
  user-select: none;
}
/* sous 1024 px l'encoche est desactivee et la carte passe sous le texte :
   le visuel n'a plus de place */
@media (max-width: 1023px) {
  .ads-hero-visuel {
    display: none;
  }
}


/* --- vignettes des articles ------------------------------------------------
   Les images des articles sont servies par l'application Rails
   (q2jw3.hatchboxapp.com). La visionneuse d'artefact n'accepte que les
   fichiers de l'artefact lui-meme : elles ne s'affichent donc pas ici, alors
   qu'elles s'afficheront en production. Le cadre prend le creme du site pour
   que les cartes restent propres au lieu de montrer une image cassee. */
.card-article img {
  background: var(--color-surface);
}

/* libelles des trois leviers de « Marketing direct » en capitales */
.ads-page .ads-direct-options strong {
  text-transform: uppercase;
}

/* pas d'ombre portee au survol des tuiles : elle debordait du cadre */
.home-levier:hover {
  box-shadow: none;
}

/* titres des tuiles remontes : 9,9 cqw donnaient 116 px de reserve en haut */
.home-levier--ads,
.home-levier--nexio,
.home-levier--datapro {
  padding-top: 7.2cqw;
}

/* --- section des avis : fond blanc ----------------------------------------
   Le creme du site servait de fond a cette section ; elle passe au blanc des
   autres sections. Le pan des encoches des cartes est deja rempli du fond de
   page, il suit donc sans reglage. */
.home-reviews-section {
  background: var(--color-background);
}


/* --- ecart titre de section / contenu : celui de l'accueil ----------------
   Les pages internes laissaient 72 px sous le bloc de titre la ou l'accueil
   en laisse 40. Le site s'aligne sur l'accueil. */
.page-section-heading {
  margin-bottom: 2.5rem;
}


/* le logo Nexio n'a plus de cadre creme : il est pose directement sur le fond */
.nexio-logo-cadre {
  background: none;
  border: 0;
  /* le logo se cale sur la derniere ligne du bloc de texte : la rangee est
     alignee par le bas, et le cadre perd sa marge interne basse */
  align-self: end;
  padding-bottom: 0;
}
.nexio-logo-cadre img {
  display: block;
}


/* --- Nexio, section « Nos offres d'études » : passage sur fond blanc -------
   Le bloc etait pose sur le gris fonce du site. Il revient au fond blanc :
   titres au gris fonce, textes courants a la couleur secondaire, filets de
   la grille aux valeurs claires. Le surtitre quitte le jaune, illisible sur
   blanc (1,44:1), pour le bleu de la palette (4,57:1). Les onglets, dessines
   en blanc sur fond sombre, sont retournes eux aussi. */
.nexio-page .ads-touchpoints-section {
  background: var(--color-background);
  color: var(--color-text);
}
.nexio-page .ads-touchpoints-section .page-section-heading h2 {
  color: var(--color-text);
}
.nexio-page .ads-touchpoints-section .page-section-heading > p:last-child {
  color: var(--color-muted);
}
.nexio-page .ads-touchpoints-section .page-kicker.kicker-accent--jaune {
  color: var(--kicker-bleu);
}
.nexio-page .ads-touchpoints-section .ads-touchpoint-grid {
  border-top-color: var(--color-border);
  border-bottom-color: var(--color-border);
}
.nexio-page .ads-touchpoints-section .ads-touchpoint-card + .ads-touchpoint-card {
  border-left-color: var(--color-border);
}
.nexio-page .ads-touchpoints-section .ads-touchpoint-card h3 {
  color: var(--color-text);
}
.nexio-page .ads-touchpoints-section .ads-touchpoint-card span {
  color: var(--color-muted);
}
/* onglets : filet et libelle sombres, l'onglet actif garde le jaune */
.nexio-page .ads-touchpoints-section [role="tab"] {
  border-color: rgb(52 59 69 / 0.18);
  color: var(--color-muted);
}
.nexio-page .ads-touchpoints-section [role="tab"]:hover {
  color: var(--color-text);
}
/* les panneaux etaient blancs sur fond sombre : ils prennent le creme pour
   se detacher du blanc de la section */
.nexio-page .ads-touchpoints-section [role="tabpanel"] > div {
  background: var(--color-surface);
}


/* --- Agryco Ads, bloc « 300 000+ » : violet et ramene a la hauteur du pan --
   Le bloc jaune occupait 321 px de haut, la moitie de la colonne de droite.
   Il descend desormais exactement au bas de l'encoche du bloc photo (124 px,
   la valeur du composant), et passe au violet de la palette. Le chiffre et
   sa legende se placent cote a cote pour tenir dans cette hauteur ; la liste
   des trois leviers recupere la place liberee.
   Contraste : blanc sur #BA4A85 mesure 4,77:1. */
.ads-page .ads-direct-metric {
  background: #ba4a85;
  color: #fff;
  flex-direction: row;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  height: var(--encoche-h, 124px);
  min-height: 0;
  padding: 0 clamp(1.25rem, 2.4vw, 2rem);
}
.ads-page .ads-direct-metric span {
  flex: none;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1;
}
.ads-page .ads-direct-metric p {
  max-width: none;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
}
/* la liste des leviers prend toute la hauteur restante de la colonne */
.ads-page .ads-direct-layout {
  grid-template-rows: auto minmax(0, 1fr);
}
.ads-page .ads-direct-options {
  grid-row: 2;
}

/* --- pictos des trois leviers : plus de pastille sous l'image --------------
   Les pictos portent deja leur propre rond de couleur, et leur sujet en
   deborde legerement. La pastille du gabarit ajoutait un rond creme visible
   autour, et l'image, calee a 28 px dans 44, laissait voir ce fond. L'image
   occupe maintenant tout le rond et la pastille devient transparente. */
.ads-page .ads-option-icon {
  background: none;
}
.ads-page .ads-option-icon img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}


/* --- Agryco Ads, les trois leviers : trois blocs distincts ----------------
   La liste etait un seul cadre a filets internes. Chaque levier devient un
   bloc a part, avec son contour et son rayon, separes par une gouttiere.
   La fleche grossit et la ligne sous le titre passe a la taille du texte
   courant (elle etait a 0,75 rem, soit 12 px). */
.ads-page .ads-direct-options {
  border: 0;
  gap: 12px;
  overflow: visible;
}
.ads-page .ads-direct-options .ads-option {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  align-items: center;
  gap: 1.25rem;
  padding: 1.35rem 1.5rem;
}
/* la regle d'origine, heritee de la liste a filets internes, retirait la
   bordure basse de tous les blocs sauf le premier : ils n'avaient donc pas
   de contour en bas. Les quatre cotes sont retablis. */
.ads-page .ads-direct-options .ads-option + .ads-option,
.ads-page .ads-direct-options .ads-option:last-child {
  border: 1px solid var(--color-border);
}
.ads-page .ads-direct-options small {
  font-size: 1rem;
  line-height: 1.5;
}
.ads-page .ads-direct-options [aria-hidden="true"]:last-child {
  font-size: 1.5rem;
  line-height: 1;
}

/* le pan du bloc photo passe du coin haut droit au coin bas gauche */
.ads-page .ads-direct-media {
  border-top-right-radius: var(--radius-card);
  border-bottom-left-radius: 0;
}

/* --- cartes « Notre écosystème média » : les logos des supports ------------
   Les visuels photo laissent place aux logos, centres dans un cadre de meme
   hauteur pour tous, quelle que soit la forme du logo, et poses sur le creme
   du site (ils sont fournis sur fond blanc). */
.ads-media-logo {
  object-fit: contain;
  display: block;
  width: 100%;
  height: 104px;
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}


/* --- Agryco Store : nouveau visuel, fond rose et encoche en bas a droite ---
   Le cadre de l'image prend le rose de la palette, le visuel etant fourni
   detoure. L'encoche mord le coin bas droit de la carte, qui perd donc son
   rayon a cet angle : son overflow:hidden arrondirait sinon l'angle
   exterieur du pan. Sous 992 px la carte s'empile et le coin bas droit
   revient au texte : l'encoche y est desactivee, comme ailleurs sur le site. */
.ads-page .ads-store-layout figure {
  background: #db235f;
  --encoche-l: 180px;
  --encoche-h: 124px;
  --encoche-r: 28px;
}
.ads-page .ads-store-layout {
  border-bottom-right-radius: 0;
}
@media (max-width: 991px) {
  .ads-page .ads-store-layout figure::before,
  .ads-page .ads-store-layout figure::after {
    content: none;
  }
  .ads-page .ads-store-layout {
    border-bottom-right-radius: var(--radius-card);
  }
}

/* les trois blocs se partagent exactement la hauteur de la colonne : sans
   cela leurs hauteurs propres depassaient le cadre de 20 px */
.ads-page .ads-direct-options {
  grid-auto-rows: minmax(0, 1fr);
}

/* --- Agryco Store : l'image suit la hauteur du texte ----------------------
   Le cadre image imposait 500 px de haut minimum : c'est lui qui fixait la
   hauteur de la carte, d'ou le vide au-dessus et au-dessous du texte, centre
   dans cette hauteur. La hauteur vient desormais de la colonne de texte, dont
   les marges sont egales sur les quatre cotes, et l'image remplit le cadre.
   Le visuel est legerement agrandi pour que ses bords transparents ne
   laissent pas voir le rose. */
.ads-page .ads-store-layout figure {
  min-height: 0;
}
.ads-page .ads-store-layout figure img {
  object-fit: cover;
  object-position: center;
  transform: scale(1.06);
}


/* --- Rocket Inside : largeur des blocs de l'accueil, encoche en haut a gauche
   La carte passe de 1146 a 1176 px, la largeur d'« Offre découverte » et du
   bloc violet de l'accueil. Le coin haut gauche perd son rayon : l'overflow
   de la carte arrondirait sinon l'angle exterieur du pan. */
/* `.container-site` plafonne a 1146 px utiles (1176 moins ses 15 px de
   retrait de chaque cote) : on l'elargit de 30 px pour cette section, la
   carte fait alors exactement 1176 px comme celles de l'accueil. */
.ads-page .ads-rocket-section > .container-site {
  max-width: calc(var(--container-width) + 30px);
}
.ads-page .ads-rocket-card {
  max-width: 1176px;
  margin-inline: auto;
  --encoche-l: 180px;
  --encoche-h: 124px;
  --encoche-r: 28px;
  border-top-left-radius: 0;
}
@media (max-width: 991px) {
  .ads-page .ads-rocket-card::before,
  .ads-page .ads-rocket-card::after {
    content: none;
  }
  .ads-page .ads-rocket-card {
    border-top-left-radius: var(--radius-card);
  }
}

/* le chapeau de « Louez moins. Ciblez mieux. » prend plus de largeur, en
   restant sur trois lignes */
.ads-page .ads-direct-heading > p:last-child {
  max-width: 980px;
}


/* --- banniere d'accueil : le texte ne passe plus sous la carte -------------
   Entre 1024 et 1180 px, la colonne de texte gardait sa largeur maximale de
   740 px alors que la carte des chiffres, posee en absolu dans l'encoche,
   se rapprochait : titre et paragraphe passaient dessous. La largeur du
   texte suit desormais celle du bloc : elle s'arrete avant le pan de
   l'encoche (347 px) augmente d'un jeu de 24 px, retrait de gauche compris.
   Au-dessous de 1024 px la carte repasse sous le texte, la contrainte ne
   s'applique donc pas. */
@media (min-width: 1024px) {
  .home-hero-content > div {
    max-width: min(740px, calc(100% - 315px));
  }
}

/* la carte etait a 80 px de marge interne, soit 601 px de haut pour 439 px
   de contenu : la marge descend a 56 px, egale sur les quatre cotes, et la
   carte perd 48 px */
.ads-page .ads-store-copy {
  padding: clamp(1.75rem, 3.9vw, 3.5rem);
}

/* --- Agryco Store : l'image ne doit pas dicter la hauteur ------------------
   `height: 100%` sur l'image ne se resout pas, la hauteur du cadre etant
   auto : l'image reprenait donc sa hauteur naturelle (713 px) et c'est elle
   qui fixait la hauteur de la carte, d'ou le vide sous le texte. Elle est
   desormais posee en absolu dans le cadre : la hauteur vient de la colonne
   de texte, et l'image remplit ce qu'on lui donne. */
.ads-page .ads-store-layout figure {
  position: relative;
}
.ads-page .ads-store-layout figure img {
  position: absolute;
  inset: 0;
}


/* --- largeur de contenu : les pages internes reprennent celle de l'accueil -
   L'accueil compose ses sections dans un conteneur large (1410 px utiles a
   1440), les pages internes dans le conteneur standard (1146). Elles passent
   a la largeur de l'accueil. Le bloc contact, volontairement etroit, et la
   carte Rocket Inside, calee sur 1176 px, gardent leur largeur propre. */
.ads-page .page-section > .container-site {
  max-width: calc(var(--container-width-wide) + 30px);
}
.ads-page .ads-contact-section > .container-site {
  max-width: 850px;
}
.ads-page .ads-rocket-section > .container-site {
  max-width: calc(var(--container-width) + 30px);
}


/* --- « Marketing direct » : hauteur resserree ------------------------------
   Le bloc photo imposait 620 px de hauteur minimale, et les trois leviers
   s'etiraient pour combler : la section ne tenait pas dans un ecran. Les
   leviers reprennent la hauteur de leur contenu, avec la meme respiration
   tout autour, et la photo s'aligne sur la colonne ainsi obtenue. */
.ads-page .ads-direct-media {
  min-height: 0;
  height: 100%;
}
.ads-page .ads-direct-options {
  grid-auto-rows: auto;
}
.ads-page .ads-direct-options .ads-option {
  padding: 1.25rem 1.5rem;
}

/* meme cause que sur le bloc Store : `height: 100%` ne se resout pas, la
   photo reprenait sa hauteur naturelle (818 px) et pilotait la grille. Posee
   en absolu, elle ne pese plus sur la hauteur. */
.ads-page .ads-direct-media {
  position: relative;
}
.ads-page .ads-direct-media img {
  position: absolute;
  inset: 0;
}

/* le cadre etant plus court, le cadrage remonte pour ne pas couper la
   casquette du sujet */
.ads-page .ads-direct-media > img {
  object-position: center 22%;
}


/* --- chapeaux de section : deux lignes plutot qu'une ligne tres longue ----- */
.ads-page .ads-media-section > .container-site > .page-section-heading > p:last-child {
  max-width: 860px;
}

/* --- textes secondaires a la taille du texte courant -----------------------
   Le chapeau de section est compose a 1,125 rem (18 px) : les legendes des
   trois leviers (1 rem) et celle du bloc « 300 000+ » (0,875 rem) s'alignent
   dessus. */
.ads-page .ads-direct-options small,
.ads-page .ads-direct-metric p {
  font-size: 1.125rem;
  line-height: 1.5;
}

/* --- Agryco Store : contour uniquement du cote texte -----------------------
   Le filet faisait le tour de la carte et se voyait donc sur le rose, autour
   du pan de l'encoche. Il ne cerne plus que la moitie blanche, qui en a
   besoin pour se detacher du fond de page ; le cote image s'en passe.
   L'image est aussi un peu moins agrandie, pour en montrer davantage. */
.ads-page .ads-store-layout {
  border: 0;
}
.ads-page .ads-store-copy {
  border: 1px solid var(--color-border);
  border-right: 0;
  border-radius: var(--radius-card) 0 0 var(--radius-card);
}
.ads-page .ads-store-layout figure img {
  transform: scale(1.01);
}

/* le CTA de Rocket Inside etait a sa largeur de contenu : il prend une
   largeur minimale confortable, sans depasser la colonne de texte */
.ads-page .ads-rocket-copy .brand-primary-button {
  min-width: min(300px, 100%);
}


/* --- « Louez moins » : colonnes a parts egales, comme sur l'accueil --------
   Le bloc photo occupait 58 % de la largeur ; il passe a la moitie, la
   proportion des panneaux « Nos expertises » de l'accueil (704 / 704 px).
   Les trois leviers et le bloc « 300 000+ » recuperent la largeur, et le
   chiffre grossit en consequence. L'encoche est ramenee a 150 x 104 px,
   mieux proportionnee au cadre photo. */
.ads-page .ads-direct-layout {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.ads-page .ads-direct-media {
  grid-area: 1 / 1 / 3 / 7;
  --encoche-l: 150px;
  --encoche-h: 104px;
}
.ads-page .ads-direct-metric {
  grid-area: 1 / 7 / auto / 13;
}
.ads-page .ads-direct-options {
  grid-column: 7 / 13;
}
.ads-page .ads-direct-metric span {
  font-size: clamp(2.25rem, 4vw, 3.75rem);
}

/* --- cartes de l'ecosysteme : la liste suit le titre ----------------------
   La liste portait `margin-top: auto` : elle etait donc poussee au bas de la
   carte, et comme les intitules ne font pas tous le meme nombre de lignes,
   aucune ne commencait au meme endroit. Elle se place desormais a 30 px sous
   son intitule, le vide restant passant en bas de carte. */
.ads-page .ads-media-card ul {
  margin-top: 0;
  padding-top: 20px;
}
.ads-page .ads-media-card strong {
  /* deux lignes reservees : les listes demarrent alors a la meme hauteur
     d'une carte a l'autre */
  display: block;
  min-height: calc(2 * 1.45em);
  margin-bottom: 0;
}

/* --- surtitres : un seul reglage pour tout le site ------------------------
   Taille (14 px) et graisse (800) etaient deja uniformes partout ; seul
   l'interlettrage variait, 0,18 em sur les surtitres de section de l'accueil
   contre 0,16 em sur ceux des panneaux d'expertise et des blocs contact.
   Tout s'aligne sur 0,18 em, la valeur des surtitres de section. */
.kicker-accent,
.page-kicker,
.page-kicker--hero,
.home-expertise-panel-kicker,
.solution-kicker {
  letter-spacing: 0.18em;
}


/* --- largeur du contenu : calee sur celle du bandeau ----------------------
   Le bandeau haut de chaque page est plafonne a 1380 px (la coque
   `home-hero-shell`, dans une section a 15 px de retrait), alors que le
   conteneur large des sections valait 1410 px : le contenu depassait donc
   le bandeau de 15 px de chaque cote. Le conteneur large reprend la valeur
   du bandeau, les deux se resolvent desormais a l'identique a toutes les
   largeurs, min(1380 px, viewport - 30 px). Les blocs volontairement plus
   etroits (Rocket Inside et les blocs contact) gardent leur largeur. */
:root {
  --container-width-wide: 1380px;
}


/* --- fonds de page : plus de gris fonce ni de creme -----------------------
   Les sections « Vos points de contact », « Foule contact », « Agryco Ads
   Premium » et « Nos espaces » posaient des bandes gris fonce (#343b45) ou
   creme (#f7f5ef, #fbfaf7) entre des sections blanches. Toutes passent au
   blanc ; les textes, filets et panneaux dessines pour le fond sombre sont
   retournes en consequence. Le pied de page garde son gris fonce, comme sur
   l'accueil. */
.ads-touchpoints-section {
  background: var(--color-background);
  color: var(--color-text);
}
.ads-touchpoints-section .page-section-heading h2 {
  color: var(--color-text);
}
.ads-touchpoints-section .page-section-heading > p:last-child {
  color: var(--color-muted);
}
/* le surtitre etait jaune sur fond sombre : illisible sur blanc (1,44:1), il
   reprend le bleu de la palette, deja retenu pour Nexio (4,57:1) */
.ads-touchpoints-section .page-kicker.kicker-accent--jaune {
  color: var(--kicker-bleu);
}
.ads-touchpoints-section .ads-touchpoint-grid {
  border-top-color: var(--color-border);
  border-bottom-color: var(--color-border);
}
.ads-touchpoints-section .ads-touchpoint-card + .ads-touchpoint-card {
  border-left-color: var(--color-border);
}
.ads-touchpoints-section .ads-touchpoint-card h3 {
  color: var(--color-text);
}
.ads-touchpoints-section .ads-touchpoint-card span {
  color: var(--color-muted);
}

.ads-event-section {
  background: var(--color-background);
  color: var(--color-text);
}
.ads-event-section h2 {
  color: var(--color-text);
}
.ads-event-section p {
  color: var(--color-muted);
}

.ads-premium-section,
.ads-spaces-section {
  background: var(--color-background);
}
/* la carte d'introduction etait blanche sur creme : sans le creme, elle a
   besoin d'un filet pour se detacher */
.ads-premium-intro {
  border: 1px solid var(--color-border);
}
/* colonne de droite des cartes « espaces » : le creme part, le filet de
   separation reste */
.ads-space-card > div:last-child {
  background: #fff;
}
.ads-contact-section .contact-form {
  background: #fff;
}
/* panneaux des onglets Nexio : blancs comme la section, un filet les cadre */
.nexio-page .ads-touchpoints-section [role="tabpanel"] > div {
  background: #fff;
  border: 1px solid var(--color-border);
}


/* --- blocs Email & SMS / Print / Sponso : le contour ne bouge plus au survol
   Le survol assombrissait le filet (35 % de gris fonce contre 12 %) : seul
   le decalage du contenu subsiste. */
/* le cartouche creme derriere les logos de l'ecosysteme disparait lui aussi */
.ads-media-logo {
  background: none;
}
/* l'onglet jaune pose sur le haut de « Foule contact » n'avait de sens que
   sur le fond sombre */
.ads-event-section:before {
  content: none;
}

/* --- « Notre ecosysteme media » : surtitre rose (voir agryco-ads.html) --- */

/* Les intitules ne reservent plus deux lignes : ceux qui tiennent sur une
   seule (WikiAgri, Farm Connexion...) laissaient une ligne vide, soit 45 px
   avant la liste au lieu de 20. Chaque liste se place a 20 px de son propre
   intitule ; le vide restant passe en bas de carte. */
.ads-page .ads-media-card strong {
  min-height: 0;
}


/* --- Rocket Inside : titre sur une ligne, accroche plus grande -------------
   « Rocket Inside » passait sur deux lignes : a 72 px il demande 564 px alors
   que la colonne n'en offre que 376. La colonne s'elargit un peu (560 px au
   lieu de 520) et le titre prend une taille qui tient d'un seul tenant a
   toutes les largeurs, `nowrap` garantissant qu'il ne se coupe jamais.
   L'accroche « Diffusons vos flyers ! » passe de 18 a 24 px. */
.ads-page .ads-rocket-copy {
  width: min(48%, 560px);
}
.ads-page .ads-rocket-copy h2 {
  white-space: nowrap;
  font-size: clamp(1.75rem, 4.2vw, 3rem);
}
.ads-page .ads-rocket-copy h3 {
  font-size: 1.5rem;
  line-height: 1.25;
}
/* en dessous de 992 px la colonne reprend les largeurs prevues par la mise en
   page d'origine, que la regle ci-dessus aurait sinon ecrasees */
@media (max-width: 991px) {
  .ads-page .ads-rocket-copy {
    width: 56%;
  }
}
@media (max-width: 767px) {
  .ads-page .ads-rocket-copy {
    width: 100%;
  }
}


/* --- bannieres des pages internes : gros titre d'un seul ton ---------------
   Le mot accentue du titre etait jaune sur le vert, le rose et le bleu, et
   blanc sur le jaune de « A propos de nous ». L'accent reprend simplement la
   couleur du titre : blanc sur les trois premieres, gris fonce sur la
   quatrieme. L'accueil n'est pas concerne. */
.ads-hero-v2,
.ads-hero-v2--jaune {
  --banniere-accent: var(--banniere-texte);
}


/* --- banniere : la carte des chiffres reste dans l'encoche jusqu'en tablette
   Elle ne doit jamais etre posee A L'INTERIEUR du bandeau : soit elle occupe
   le pan de l'encoche, en bas a droite, soit elle passe dessous.
   Le pan gardait sa taille fixe (347 x 269 px) quand le bandeau retrecissait,
   et finissait par emporter tout le bas droit. Il se reduit donc par paliers :
   tablettes et petits ecrans d'ordinateur gardent la carte dans l'encoche. */
@media (min-width: 992px) and (max-width: 1199px) {
  .home-hero-shell {
    --encoche-l: 300px;
    --encoche-h: 236px;
  }
  .home-hero-info {
    padding: 30px;
  }
  .home-hero-content > div {
    max-width: 640px;
  }
  .ads-hero-visuel {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .home-hero-shell {
    --encoche-l: 260px;
    --encoche-h: 208px;
  }
  .home-hero-info {
    padding: 24px;
  }
  .home-hero-content > div {
    max-width: 62%;
  }
  .ads-hero-visuel {
    display: none;
  }
}


/* --- banniere Nexio : emplacement des telephones repris de la maquette -----
   Releve sur la maquette fournie (bandeau 1113 x 592 px) : l'image des deux
   telephones y est posee a 92 % de la hauteur du bandeau, son bord haut a 2 %
   du haut, et son bord droit depasse le bord droit du bandeau de 11,7 % de sa
   propre largeur — le telephone de droite est donc coupe net par le bord du
   bloc. Le bloc etant en `overflow: hidden`, la coupe se fait toute seule.
   L'image passe au-dessus du pan de l'encoche (z-index 4) : sans cela le pan,
   rempli du fond de page, decouperait un rectangle blanc dans les appareils. */
.ads-hero-visuel {
  top: 2%;
  right: -4.3%;
  bottom: auto;
  left: auto;
  width: auto;
  height: 92%;
  z-index: 4;
}


/* --- responsive : la carte du bandeau passe SOUS le bandeau ----------------
   Jusqu'ici elle revenait dans le flux a l'interieur du bloc colore. Elle en
   sort : sous 1200 px elle est posee juste dessous, en pleine largeur, et le
   bandeau reserve la place correspondante (170 px de carte + 16 px de jeu).
   Le bloc perd son `overflow: hidden` pour la laisser deborder ; l'image de
   fond et son voile, qui comptaient dessus pour leurs angles bas, reprennent
   donc le rayon complet. Le CTA de la carte, etire sur toute la largeur (982
   px a 1100 px de fenetre), revient a une largeur de bouton.
   Seuil descendu de 1200 a 768 px : au-dessus, la carte tient dans le
   bandeau. */
@media (max-width: 767px) {
  .home-hero-shell {
    overflow: visible;
    margin-bottom: 186px;
  }
  .home-hero-media,
  .home-hero-shade {
    border-radius: var(--home-hero-radius);
  }
  .home-hero-info {
    position: absolute;
    inset: auto 0 auto 0;
    top: calc(100% + 16px);
    width: auto;
    height: 170px;
    margin: 0;
    padding: 24px;
    border-radius: 16px;
  }
  .ads-hero-info .home-hero-secondary {
    width: fit-content;
    min-width: 220px;
    max-width: 100%;
    align-self: center;
    padding-inline: 1.75rem;
  }
}


/* --- « A propos de nous » : gros titre en blanc sur le jaune ---------------
   Choix graphique sur un tres grand titre : le blanc ne mesure que 1,47:1 sur
   ce jaune. Le surtitre, le texte courant et les liens gardent le gris fonce
   (7,68:1), la lecture n'est donc pas en jeu. */
.ads-hero-v2--jaune h1,
.ads-hero-v2--jaune .ads-hero-accent {
  color: #fff;
}


/* --- formulaires de contact : fond violet ---------------------------------
   Les formulaires des cinq pages prennent le violet de la palette (#BA4A85).
   Intitules et mention de consentement en blanc, champs en blanc plein, case
   a cocher blanche a contour blanc, bouton d'envoi dans le degrade jaune des
   bannieres, centre et a la taille des CTA d'en-tete (245 x 58 px). */
.contact-form--violet,
.ads-contact-section .contact-form--violet {
  background: #ba4a85;
  border-color: transparent;
}
/* la fenetre « Parlons-en ! » garde l'habillage d'origine : panneau blanc,
   intitules et textes en gris. Seuls deux points la distinguent : le surtitre
   passe au violet de la palette, et le bouton d'envoi prend le degrade jaune
   des CTA du site, texte en gris fonce. */
.contact-modale .kicker-accent {
  color: var(--kicker-violet);
}
.contact-modale .agryco-submit {
  background: var(--gradient-cta);
  color: var(--color-secondary);
  padding: 1.05rem 2.5rem;
  font-size: 1rem;
  display: block;
  margin-inline: auto;
}
.contact-modale .agryco-submit:hover {
  background: var(--gradient-cta-hover);
}
.contact-form--violet .agryco-label {
  color: #fff;
}
.contact-form--violet .agryco-field {
  background: #fff;
  border-color: transparent;
  color: var(--color-text);
}
.contact-form--violet .agryco-field:hover {
  border-color: #ffffff59;
}
.contact-form--violet .agryco-field:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px #ffb8023d;
}
/* case a cocher : dessin maison, la case native ne se colore pas de facon
   fiable d'un navigateur a l'autre */
.contact-form--violet .agryco-checkbox {
  appearance: none;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 4px;
}
.contact-form--violet .agryco-checkbox:checked {
  background:
    #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343b45' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E")
    center / 0.8rem no-repeat;
}
.contact-form--violet .agryco-checkbox:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* mention « En soumettant ce formulaire... » et son lien */
.contact-form--violet > form > label {
  color: #ffffffeb;
}
.contact-form--violet > form > label a {
  color: #fff;
}
.contact-form--violet .agryco-submit {
  background: var(--gradient-cta);
  color: var(--color-secondary);
  padding: 1.05rem 2.5rem;
  font-size: 1rem;
  display: block;
  margin-inline: auto;
}
.contact-form--violet .agryco-submit:hover {
  background: var(--gradient-cta-hover);
}


/* --- « Notre equipe » : photo ramenee a la largeur des blocs de l'accueil --
   L'image faisait toute la largeur du conteneur (1380 px) pour un format
   presque carre : 1 077 px de haut. Elle reprend la largeur du bloc violet de
   l'accueil (1 176 px) et un format panoramique de 740 px de haut, avec deux
   encoches en diagonale, en bas a gauche et en haut a droite. Le cadrage est decale vers le haut (22 %) : la
   coupe se fait surtout en bas, sur les marches, et garde tout le monde —
   au-dessous de 740 px on commencerait a couper Ema et les mains de Gaelle. */
.equipe-photo {
  position: relative;
  max-width: 1176px;
  margin-inline: auto;
  aspect-ratio: 1176 / 600;   /* cadrage de team-ads-desktop */
  overflow: clip;
  border-radius: var(--radius-panel);
  border-bottom-left-radius: 0;
  border-top-right-radius: 0;
  --encoche-l: 180px;
  --encoche-h: 124px;
  --encoche-r: 28px;
}
/* le composant ne dessine qu'un coin par element : la seconde encoche est
   portee par un calque pose sur la photo, aux memes dimensions */
.equipe-photo .equipe-encoche {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* La photo remplit le bloc sans marge au-dessus des tetes : l'encoche reste
     dans le mur jaune, a cote de la personne de droite, dont la tete s'arrete
     a 12 % du bord. Elle suit donc la largeur du bloc. */
  --encoche-l: min(140px, 9vw);
  --encoche-h: min(96px, 6.2vw);
  --encoche-r: 24px;
}
.equipe-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* en dessous de 992 px l'encoche mangerait une part trop grande de l'image */
@media (max-width: 991px) {
  .equipe-photo::before,
  .equipe-photo::after {
    content: none;
  }
  .equipe-photo {
    aspect-ratio: 16 / 9;   /* cadrage de team-ads-mobile */
    border-bottom-left-radius: var(--radius-panel);
    border-top-right-radius: var(--radius-panel);
  }
  .equipe-photo .equipe-encoche {
    display: none;
  }
}

/* intitules des champs : la taille du texte courant (16 px) et en gras */
.contact-form--violet .agryco-label {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}


/* --- chiffres dans les gros titres ----------------------------------------
   Belanosima ne contient ni chiffres bas de casse ni variante « lining » : ses
   chiffres montent a 595/1000 d'em quand ses capitales montent a 697, soit
   85 %. Dans « DE 2014 A AUJOURD'HUI » l'annee paraissait donc plus petite
   que le reste. Les chiffres des titres sont remontes de 1,172x (697/595) :
   ils atteignent exactement la hauteur des capitales. */
.titre-chiffres {
  font-size: 1.172em;
}


/* --- CTA d'action : une seule taille sur tout le site ----------------------
   Les boutons poses dans les sections (« Accéder aux offres », « Contactez-
   nous ! », « Demander un rendez-vous », « Profitez de l'offre ! ») faisaient
   48 px de haut pour un texte a 14 px, alors que les CTA des bannieres et le
   bouton d'envoi des formulaires font 58 px pour un texte a 16 px. Ils
   s'alignent sur ces derniers. Restent volontairement plus petits : le bouton
   de la barre de navigation (44 px), les liens de cartes d'articles et les
   boutons du bandeau cookies. */
.page-primary-button {
  min-height: 58px;
  padding: 1.05rem 2.5rem;
  font-size: 1rem;
}


/* --- titres de section : une seule echelle --------------------------------
   Trois echelles coexistaient a 1440 px : 72 px pour les titres de section,
   80 px pour ceux des blocs contact et « Foule contact », 86 px pour ceux des
   blocs Store et Carrieres. Tout passe a l'echelle des titres de section.
   Nexio garde son echelle propre, reduite d'un cran a la demande. */
.ads-contact-section h2,
.ads-store-copy h2,
.ads-event-section .container-site h2 {
  font-size: clamp(2.35rem, 5vw, 4.75rem);
  line-height: 0.96;
}
.nexio-page .ads-contact-section h2,
.nexio-page .ads-store-copy h2 {
  font-size: clamp(2.1rem, 4.3vw, 4rem);
}


/* --- banniere Nexio : telephones legerement decales et visibles en tablette
   Le bord droit de l'image depassait de 4,3 % de la largeur du bandeau ; il
   passe a 2,5 %, l'ensemble glisse donc d'environ 25 px vers la gauche (la
   coupe du telephone de droite passe de 12 % a 7 % de l'image).
   Entre 768 et 1199 px ils etaient simplement masques : la carte etant
   passee sous le bandeau, la bande libre a droite du texte les accueille.
   Ils y sont poses au bas du bandeau, a 30 % de sa largeur, et la colonne de
   texte s'arrete a 66 % pour leur laisser la voie. Sous 768 px le bandeau
   n'a plus de largeur disponible : ils restent masques. */
.ads-hero-visuel {
  right: -2.5%;
}
@media (min-width: 768px) and (max-width: 1199px) {
  .ads-hero-visuel {
    display: block;
    top: auto;
    right: 16px;
    bottom: 0;
    width: 30%;
    height: auto;
  }
  .ads-hero-v2 .home-hero-content > div,
  .ads-hero-v2 .ads-hero-masthead {
    max-width: 66%;
  }
}


/* --- « Rejoignez-nous » : fond bleu, sujet debordant, encoche bas droite ---
   Le PNG est detoure (40 % de pixels transparents) : c'est le cadre qui donne
   la couleur, ici le bleu du bloc « Offre découverte » de l'accueil. Le sujet
   est cale sur le bord bas du bloc et ne depasse ni en haut ni en bas ; il
   passe devant le pan de l'encoche. Le cadre et la grille n'ont plus
   d'`overflow: hidden`, le cadre porte donc lui-meme ses rayons. */
#emploi .ads-store-layout {
  /* la photo deborde du cadre : pas de rognage. Le contour de la carte est
     porte par la colonne de texte, sans quoi un filet resterait visible sous
     la photo. */
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
}
#emploi .ads-store-copy {
  background: #fff;
  border: 1px solid var(--color-border);
  border-right: 0;
  border-radius: var(--radius-card) 0 0 var(--radius-card);
  /* le texte reste cale en haut */
  justify-content: flex-start;
}
#emploi .ads-store-layout figure {
  position: relative;
  overflow: visible;
  background: #0084b7;
  /* angles arrondis des quatre cotes, sauf le coin haut droit ou se trouve
     l'encoche */
  border-radius: 0 0 var(--radius-card) 0;
  --encoche-l: 140px;
  --encoche-h: 96px;
  --encoche-r: 24px;
}
#emploi .ads-store-layout figure img {
  object-fit: contain;
  object-position: center bottom;
  /* entierement dans le bloc : cale au pixel sur son bord bas, la tete juste
     sous le bord haut. Le PNG porte 44 px de vide transparent en haut (7,8 %
     de sa hauteur) : la boite est agrandie d'autant pour que le sujet, lui,
     occupe toute la hauteur du bloc. Le `scale(1.01)` herite du bloc Store
     d'Agryco Ads est annule : c'est lui qui faisait depasser de 2 px. */
  position: absolute;
  inset: auto 0 0 0;
  padding: 0;
  height: 107%;
  transform: none;
  z-index: 4;
}
@media (max-width: 991px) {
  #emploi .ads-store-layout figure::before,
  #emploi .ads-store-layout figure::after {
    content: none;
  }
  #emploi .ads-store-copy {
    border: 1px solid var(--color-border);
    border-bottom: 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }
  #emploi .ads-store-layout figure {
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    aspect-ratio: 3 / 2;
  }
  #emploi .ads-store-layout figure img {
    height: 107%;
    padding: 0;
  }
}


/* --- bloc « Notre promesse » : mise en page reprise -----------------------
   Le cadre du logo etait centre verticalement au lieu d'occuper la hauteur,
   et la regle de marge interne ecrite pour le bloc a un seul paragraphe
   (Agryco Ads) s'appliquait ici au surtitre ET au texte : d'ou les 64 px de
   vide entre chaque ligne et le decalage du bloc de texte. La colonne de
   texte reprend un rythme normal, surtitre / titre / paragraphe. */
.ads-premium-intro {
  align-items: stretch;
}
.ads-premium-intro > div {
  flex-direction: column;
  justify-content: center;
  display: flex;
}
.ads-premium-intro > div p {
  padding: 0;
}
.ads-premium-intro > div .page-kicker {
  margin: 0 0 0.75rem;
}
.ads-premium-intro > div h2 {
  margin: 0;
}
.ads-premium-intro > div > p:last-child {
  margin-top: 1.25rem;
}


/* --- titres de section : une seule taille sur tout le site ----------------
   Releve a 1440 px avant correction : accueil 72 / 68 / 64 px selon les
   sections, pages internes 72, blocs contact et « Foule contact » 72, blocs
   Store et Carrieres 72, Nexio 62, « Des promesses tenues » 44. Tout passe a
   l'echelle mediane de l'accueil, 68 px a 1440 (clamp 40 -> 68 px). Gardent
   leur taille propre les titres de carte, d'un niveau inferieur : « Sponso »,
   « Push », « Display » et « Rocket Inside », ce dernier devant tenir sur une
   seule ligne. */
.page-section-heading h2,
.ads-contact-section h2,
.ads-store-copy h2,
.ads-event-section .container-site h2,
.ads-premium-intro > div h2,
.home-page main h2.font-primary,
.nexio-page main h2.font-primary,
.nexio-page .page-section-heading h2,
.nexio-page .ads-contact-section h2,
.nexio-page .ads-store-copy h2 {
  font-size: clamp(2.5rem, 4.7vw, 4.25rem);
  line-height: 0.96;
}
/* la bande « Le site de la marque » n'est pas un titre de section mais un
   encart d'appel : elle garde sa taille compacte sur les deux pages */
.brand-site-cta h2 {
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.05;
}


/* --- « Notre promesse » : sans cadre, logo a cote, largeur des blocs 1176 --
   Le bloc perd son fond blanc, son filet et son rayon : il n'est plus une
   carte. Le logo du menu (version fond clair) se place a droite, cale sur la
   derniere ligne du texte, et l'ensemble reprend la largeur de 1 176 px du
   bloc violet de l'accueil. Le titre est compose sur deux lignes. */
.ads-premium-section .ads-premium-intro {
  max-width: 1176px;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
  align-items: start;
  gap: clamp(3rem, 6vw, 6rem);
  grid-template-columns: minmax(0, 1fr) minmax(240px, 420px);
}
/* le texte a gauche, le logo a droite et cale sur la derniere ligne du
   paragraphe : la rangee prend la hauteur de la colonne de texte, le logo s'y
   aligne par le bas */
.ads-premium-intro > div:last-child {
  grid-area: 1 / 1;
}
.ads-premium-intro .promesse-logo {
  grid-area: 1 / 2;
  align-self: end;
}
.ads-premium-intro .promesse-logo {
  display: block;
  padding: 0;
  background: none;
}
.ads-premium-intro .promesse-logo img {
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-top: 0;
  /* la regle d'origine du bloc (fond jaune, hauteur mini de 250 px, marge
     interne de 2 rem) etait ecrite pour le visuel d'Agryco Premium : elle
     etirait le logo et lui collait un aplat jaune */
  min-height: 0;
  padding: 0;
  background: none;
  object-fit: contain;
}
.ads-premium-intro > div:last-child {
  justify-content: flex-start;
}
@media (max-width: 767px) {
  .ads-premium-section .ads-premium-intro {
    grid-template-columns: minmax(0, 1fr);
  }
  .ads-premium-intro .promesse-logo img {
    max-width: 260px;
  }
}
/* le bloc « Rejoignez-nous » reprend lui aussi la largeur de 1 176 px */
#emploi .ads-store-layout {
  max-width: 1176px;
  margin-inline: auto;
}


/* --- « De 2014 a aujourd'hui » : frise verticale --------------------------
   Reprise de la maquette : une barre jaune verticale au centre, les fiches
   blanches alternees de part et d'autre qui passent SOUS la barre, et l'annee
   posee en blanc par-dessus. Derriere chaque fiche, un carre arrondi de
   couleur depasse de son angle exterieur.

   Empilement, du fond vers la surface :
     0  le carre de couleur (::before de l'etape)
     1  la fiche blanche
     2  la barre jaune (::before de la liste)
     3  l'annee
   C'est ce qui donne l'effet de la maquette : la fiche file sous la barre,
   l'annee reste lisible dessus. */
.parcours {
  --frise-barre: 132px;      /* largeur de la barre jaune */
  --frise-fiche: 60%;        /* largeur des fiches */
  --frise-carre: 96px;       /* cote du carre de couleur */
  position: relative;
  /* la frise est resserree : a pleine largeur (1380 px) les fiches tiraient
     une ligne de texte tres longue pour deux lignes de contenu */
  max-width: 1080px;
  margin-inline: auto;
  padding: 34px 40px;
  display: grid;
  row-gap: 26px;
  list-style: none;
}
/* la barre, par-dessus les fiches, bouts arrondis */
.parcours::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--frise-barre);
  border-radius: 999px;
  background: var(--kicker-jaune);
  z-index: 2;
}
.parcours-etape {
  position: relative;
  min-height: 132px;
  display: grid;
  align-items: center;
}
/* le carre de couleur, a l'angle exterieur haut de la fiche */
.parcours-etape::before {
  content: "";
  position: absolute;
  top: -18px;
  width: var(--frise-carre);
  height: var(--frise-carre);
  border-radius: 28px;
  background: var(--etape-couleur, var(--kicker-jaune));
  z-index: 0;
}
.parcours-etape:nth-child(odd)::before  { left: -26px; }
.parcours-etape:nth-child(even)::before { right: -26px; }

.parcours-carte {
  position: relative;
  z-index: 1;
  width: var(--frise-fiche);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 48px rgb(52 59 69 / 0.13);
  padding: 1.6rem 2rem;
}
/* etapes impaires : fiche a gauche, texte aligne a droite. La reserve du cote
   de la barre se calcule : la fiche depasse le milieu de (--frise-fiche - 50%),
   il faut encore degager la demi-barre, puis laisser --frise-air entre le
   texte et le bord de la barre. Le 8 % code en dur precedemment ne laissait
   que 4 px : le texte venait toucher la barre. */
.parcours {
  --frise-air: 40px;
}
.parcours-etape:nth-child(odd) .parcours-carte {
  margin-right: auto;
  text-align: right;
  padding-right: calc(var(--frise-fiche) - 50% + var(--frise-barre) / 2 + var(--frise-air));
}
.parcours-etape:nth-child(even) .parcours-carte {
  margin-left: auto;
  text-align: left;
  padding-left: calc(var(--frise-fiche) - 50% + var(--frise-barre) / 2 + var(--frise-air));
}
/* le titre et le texte se lisent d'un seul tenant, comme sur la maquette :
   attaque en gras, suite en gris */
.parcours-carte h3,
.parcours-carte p {
  display: inline;
  margin: 0;
  font-family: var(--font-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
  text-transform: none;
  letter-spacing: 0;
}
.parcours-carte h3 {
  font-weight: 700;
  color: var(--color-secondary);
}
.parcours-carte h3::after {
  content: " ";
}
.parcours-carte p {
  font-weight: 400;
  color: var(--color-muted);
}
/* l'annee, en blanc sur la barre */
.parcours-annee {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  font-family: var(--font-primary);
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fff;
}
/* une couleur de carre par etape */
.parcours-etape:nth-child(1) { --etape-couleur: var(--kicker-jaune); } /* jaune */
.parcours-etape:nth-child(2) { --etape-couleur: #ba4a85; }            /* violet */
.parcours-etape:nth-child(3) { --etape-couleur: var(--color-accent-green); }
.parcours-etape:nth-child(4) { --etape-couleur: var(--color-accent-teal); }
.parcours-etape:nth-child(5) { --etape-couleur: var(--color-accent-blue); }
.parcours-etape:nth-child(6) { --etape-couleur: var(--color-accent-pink); }
.parcours-etape:nth-child(7) { --etape-couleur: var(--kicker-jaune); }

/* --- sous 992 px : la barre passe a gauche, tout s'aligne a sa droite ----- */
@media (max-width: 991px) {
  .parcours {
    --frise-barre: 92px;
    --frise-carre: 72px;
    padding: 24px 0 24px 24px;
    row-gap: 18px;
  }
  .parcours::before {
    left: calc(var(--frise-barre) / 2);
  }
  .parcours-etape {
    min-height: 104px;
  }
  .parcours-etape:nth-child(odd)::before,
  .parcours-etape:nth-child(even)::before {
    left: auto;
    right: -14px;
    top: -12px;
  }
  .parcours-etape:nth-child(odd) .parcours-carte,
  .parcours-etape:nth-child(even) .parcours-carte {
    width: 100%;
    margin: 0;
    text-align: left;
    padding: 1.25rem 1.5rem 1.25rem calc(var(--frise-barre) + 20px);
  }
  .parcours-annee {
    left: calc(var(--frise-barre) / 2);
    font-size: 1.5rem;
  }
}



/* le titre « Notre équipe » s'aligne sur le bord gauche de la photo, qui est
   centree a 1176 px dans un conteneur plus large */
.page-section:has(.equipe-photo) .page-section-heading {
  max-width: 1176px;
  margin-inline: auto;
}


/* --- Nexio, « Trois dispositifs » : mise en page des panneaux d'expertise --
   La section reprend le gabarit de « Nos expertises » de l'accueil (onglets
   en pastilles, panneau image + texte avec encoche). Deux ajouts propres a
   cette page : la rangee d'actions sous le texte et les deux liens de
   telechargement des barometres. */
.home-expertise-panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
}


/* --- Nexio, bloc « Le site de la marque » ---------------------------------
   Meme mise en forme que le bloc violet du bas de l'accueil : carte de
   1176 px, encoche en bas a droite, contenu centre. Le surtitre prend le
   jaune de la palette, --kicker-jaune (#FFD302).
   Le fond est pilote par --marque-fond : bleu de la palette par defaut
   (#0084B7, page Nexio), vert fonce (#008E82) avec .marque-bloc--vert sur la
   page Data Pro. */
.marque-bloc {
  --encoche-l: 180px;
  --encoche-h: 124px;
  --encoche-r: 28px;
  --encoche-fond: var(--color-background);
  position: relative;
  max-width: 1176px;
  margin-inline: auto;
  --marque-fond: var(--color-accent-blue);
  background: var(--marque-fond);
  border-radius: 28px;
  border-bottom-right-radius: 0;
  overflow: clip;
}
.marque-bloc--vert {
  --marque-fond: var(--color-accent-teal);
}
.marque-inner {
  max-width: 1176px;
  margin-inline: auto;
  padding: clamp(2.9rem, 5.4vw, 4.9rem) clamp(1.5rem, 3.9vw, 3.5rem) clamp(2.5rem, 5vw, 4.5rem);
  text-align: center;
}
.marque-kicker {
  /* le jaune de la palette, celui des surtitres sur fond sombre */
  color: var(--kicker-jaune);
  margin-bottom: 1rem;
}
.marque-bloc h2 {
  color: #fff;
  text-wrap: balance;
  margin: 0;
}
.marque-texte {
  max-width: 660px;
  margin: 1.5rem auto 0;
  color: #fff;
  font-size: 1rem;
  line-height: 1.75;
}
.marque-actions {
  display: flex;
  justify-content: center;
  margin-top: 2.25rem;
}
/* CTA a la taille du site, degrade jaune et texte gris fonce */
.marque-cta {
  background: var(--gradient-cta);
  color: var(--color-secondary);
  min-width: min(320px, 100%);
}
.marque-cta:hover {
  background: var(--gradient-cta-hover);
}
@media (max-width: 991px) {
  .marque-bloc::before,
  .marque-bloc::after {
    content: none;
  }
  .marque-bloc {
    border-bottom-right-radius: 28px;
  }
}


/* --- Nexio : finitions du bloc « Le site de la marque » et des onglets -----
   Le titre reprend l'echelle des titres de section, en blanc. La barre
   d'onglets n'a que trois entrees : elle se resserre sur son contenu et se
   centre, au lieu de tirer un long vide apres PALAM. */
.marque-bloc h2 {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 4.7vw, 4.25rem);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
#offres-nexio .home-expertise-tablist {
  display: inline-grid;
  grid-auto-flow: column;
  grid-template-columns: none;
  margin-inline: auto;
}
#offres-nexio .home-expertise-tabs {
  text-align: center;
}
#offres-nexio .home-expertise-panels {
  text-align: left;
}
#offres-nexio .home-expertise-tab {
  padding-inline: 2rem;
}
/* le visuel remplit son cadre : sans cela, le fond du PNG laissait voir le
   filet du cadre en plus de celui du panneau, d'ou l'impression de double
   contour */
#offres-nexio .home-expertise-panel-media {
  border: 0;
}
#offres-nexio .home-expertise-panel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* CTA secondaire a contour, a la taille des CTA du site */
.cta-secondaire {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 58px;
  padding: 1.05rem 2rem;
  border: 1px solid rgb(52 59 69 / 0.35);
  border-radius: var(--radius-pill);
  color: var(--color-secondary);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  transition:
    background-color 0.2s,
    border-color 0.2s;
}
.cta-secondaire:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}
/* l'onglet actif porte le degrade jaune : son libelle doit rester au gris
   fonce, comme tous les CTA jaunes du site (une regle heritee de l'ancienne
   version sombre de la section le laissait en gris moyen) */
#offres-nexio .home-expertise-tab {
  color: var(--color-muted);
}
#offres-nexio .home-expertise-tab.active {
  color: var(--color-secondary);
}
#offres-nexio .home-expertise-tab:hover {
  color: var(--color-text);
}
#offres-nexio .home-expertise-tab.active:hover {
  color: var(--color-secondary);
}


/* --- banniere Nexio : telephones masques provisoirement -------------------
   Mise en attente a la demande : le calage n'est pas encore le bon. Les
   reglages sont conserves plus haut dans la feuille — hauteur 92 % du
   bandeau, bord haut a 2 %, bord droit qui depasse de 2,5 % (le telephone de
   droite est donc coupe par le bord du bloc), et entre 768 et 1199 px une
   version a 30 % de largeur calee en bas a droite.
   Pour les faire revenir : supprimer ce bloc. */
.ads-hero-visuel {
  display: none !important;
}


/* --- logos poses dans le pan de l'encoche --------------------------------
   Meme principe que le guillemet des cartes d'avis : le pan de l'encoche est
   un vide de --encoche-l x --encoche-h decoupe dans l'angle du bloc et rempli
   par le fond de page ; on y pose les logos en position absolue.

   Ici l'encoche n'a pas une taille fixe : c'est elle qui se calcule a partir
   des logos, pour que le blanc autour soit le meme sur les quatre cotes.
     --logo-marge   le blanc autour, identique en haut, en bas et sur les cotes
     --logo-gap     l'ecart entre deux logos
     --logo-a       le cote du carre jaune ; c'est lui qui donne l'echelle
     --logo-marque  la largeur du logo de marque (0 quand il n'y en a pas)
   L'encoche vaut donc marge + contenu + marge dans les deux sens. Avec le seul
   carre elle est carree ; avec deux logos elle s'allonge d'autant.
   z-index 4 : au-dessus du pan (2) et du trace du contour (3), sinon les logos
   passeraient dessous. Les panneaux sont en overflow:hidden, mais le pan fait
   partie de leur boite : rien n'est rogne. */
#offre-panel-nexio,
#offre-panel-prism,
#offre-panel-palam {
  --logo-marge: 20px;
  --logo-gap: 20px;
  --logo-a: 64px;
  --logo-marque: 0px;
  --logo-contenu: var(--logo-a);
  --encoche-r: 26px;
  --encoche-l: calc(var(--logo-contenu) + 2 * var(--logo-marge));
  --encoche-h: calc(var(--logo-a) + 2 * var(--logo-marge));
}
/* les deux panneaux a deux logos : carre + ecart + logo de marque */
#offre-panel-nexio,
#offre-panel-palam {
  --logo-contenu: calc(var(--logo-a) + var(--logo-gap) + var(--logo-marque));
}
/* Nexio est presque carre : cale a la hauteur du carre jaune (673 x 550).
   PALAM est tres large (454 x 183) : cale en largeur, il reste plus bas que le
   carre mais pese pareil a l'oeil. */
#offre-panel-nexio { --logo-marque: 78px; }
#offre-panel-palam { --logo-marque: 100px; }

.panneau-logos {
  position: absolute;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  width: var(--encoche-l);
  height: var(--encoche-h);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--logo-gap);
  padding: var(--logo-marge);
  pointer-events: none;
}
.panneau-logos img {
  display: block;
  object-fit: contain;
}
.panneau-logo-a {
  width: var(--logo-a);
  height: var(--logo-a);
}
.panneau-logo-marque {
  width: var(--logo-marque);
  height: auto;
  max-height: var(--logo-a);
}

/* sous 992 px le panneau se met en colonne et l'encoche tombe sous le texte :
   meme marge de 20 px, pictos un cran plus petits */
@media (max-width: 991px) {
  #offre-panel-nexio,
  #offre-panel-prism,
  #offre-panel-palam {
    --logo-a: 52px;
    --logo-gap: 16px;
    --encoche-r: 22px;
  }
  #offre-panel-nexio { --logo-marque: 64px; }
  #offre-panel-palam { --logo-marque: 84px; }
}


/* --- « Agryco Tuto » : cadre jaune, creatrice detouree, encoche en haut a
   droite ---------------------------------------------------------------
   Meme montage que « Rejoignez-nous » sur la page equipe : le PNG est
   detoure, c'est le cadre qui porte la couleur. Le cadre et la grille
   perdent leur `overflow: hidden` — sinon l'encoche serait rognee par le
   rayon de la carte — et les rayons sont repris colonne par colonne : le
   contour de la carte est porte par la colonne de texte, la photo ferme les
   angles de droite sauf celui de l'encoche. */
#tuto .ads-store-layout {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
}
#tuto .ads-store-copy {
  background: #fff;
  border: 1px solid var(--color-border);
  border-right: 0;
  border-radius: var(--radius-card) 0 0 var(--radius-card);
}
#tuto .ads-store-layout figure {
  position: relative;
  overflow: visible;
  /* la colonne de texte est courte : sans hauteur plancher le cadre tombe a
     400 px et la creatrice, calee sur la hauteur, reste petite */
  min-height: clamp(420px, 36vw, 560px);
  background: var(--color-primary);
  /* arrondi partout sauf le coin haut droit, occupe par l'encoche */
  border-radius: 0 0 var(--radius-card) 0;
  --encoche-l: 140px;
  --encoche-h: 96px;
  --encoche-r: 24px;
}
#tuto .ads-store-layout figure img {
  /* calee sur le bord bas du bloc et aussi haute que lui : le PNG ne porte
     que 21 px de vide en haut (2,3 % de sa hauteur), la boite est agrandie
     d'autant pour que le sujet occupe toute la hauteur.
     z-index 4 : passe devant le pan de l'encoche (2) et son trace (3). */
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 102.5%;
  padding: 0;
  object-fit: contain;
  object-position: center bottom;
  transform: none;
  z-index: 4;
}
@media (max-width: 991px) {
  #tuto .ads-store-layout figure::before,
  #tuto .ads-store-layout figure::after {
    content: none;
  }
  #tuto .ads-store-copy {
    border: 1px solid var(--color-border);
    border-bottom: 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }
  #tuto .ads-store-layout figure {
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    aspect-ratio: 3 / 2;
  }
}


/* --- Data Pro, « Des formats qui captent » --------------------------------
   Les cartes tenaient sur trois colonnes de 449 px pour trois lignes de
   texte, et le `justify-between` poussait le chiffre en haut et le libelle
   en bas : d'ou le grand vide au milieu. Elles passent a quatre par vue et
   le contenu se cale en haut, les trois elements a la suite.
   La typographie est celle des etapes de « Notre méthode » sur l'accueil :
   titre DM Sans 18 px / 700 a 20 px du rond, texte 14 px / 24 px a 8 px du
   titre, rond au jaune de la palette avec le chiffre en gris fonce (7,84:1).
   Le rond est a peine plus grand qu'a l'accueil : 42 px au lieu de 40, le
   chiffre a la meme taille (16 px). */
.ads-media-section .ads-media-card {
  justify-content: flex-start;
  gap: 0;
  min-height: 0;
  padding: 1.75rem;
}
.media-etape-index {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--kicker-jaune);
  color: var(--color-secondary);
  font-family: var(--font-secondary);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}
.ads-media-section .ads-media-card strong {
  margin-top: 1.25rem;
  font-family: var(--font-secondary);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5556;
  color: var(--color-secondary);
}
.ads-media-section .ads-media-card p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.7143;
  color: var(--color-muted);
}

/* Une couleur de rond par carte, dans l'ordre demande : violet, bleu, rose,
   vert clair, violet, vert fonce, jaune. Les six teintes servent toutes, le
   violet revenant une fois.
   Contrastes mesures du chiffre sur son rond (seuil 4,5 pour ce corps) :
     jaune      #FFD302  gris fonce 7,84   (blanc 1,44 : exclu)
     vert clair #93C83C  gris fonce 5,69   (blanc 1,99 : exclu)
     violet     #BA4A85  blanc 4,77
     bleu       #0084B7  blanc 4,21
     vert fonce #008E82  blanc 4,05
     rose       #F12E91  blanc 3,79
   Le gris fonce l'emporte donc sur le jaune et le vert clair, le blanc sur
   les quatre autres. Rose, bleu et vert fonce restent un peu sous le seuil
   avec le blanc, mais le gris y ferait bien pire (2,7 a 3,0). */
.ads-media-carousel [data-carousel-target="slide"] .media-etape-index {
  background: var(--etape-fond);
  color: var(--etape-texte);
}
.ads-media-carousel [data-carousel-target="slide"]:nth-child(1) .media-etape-index,
.ads-media-carousel [data-carousel-target="slide"]:nth-child(5) .media-etape-index {
  --etape-fond: #ba4a85;                       /* violet */
  --etape-texte: #fff;
}
.ads-media-carousel [data-carousel-target="slide"]:nth-child(2) .media-etape-index {
  --etape-fond: var(--color-accent-blue);      /* bleu */
  --etape-texte: #fff;
}
.ads-media-carousel [data-carousel-target="slide"]:nth-child(3) .media-etape-index {
  --etape-fond: var(--color-accent-pink);      /* rose */
  --etape-texte: #fff;
}
.ads-media-carousel [data-carousel-target="slide"]:nth-child(4) .media-etape-index {
  --etape-fond: var(--color-accent-green);     /* vert clair */
  --etape-texte: var(--color-secondary);
}
.ads-media-carousel [data-carousel-target="slide"]:nth-child(6) .media-etape-index {
  --etape-fond: var(--color-accent-teal);      /* vert fonce */
  --etape-texte: #fff;
}
.ads-media-carousel [data-carousel-target="slide"]:nth-child(7) .media-etape-index {
  --etape-fond: var(--kicker-jaune);           /* jaune */
  --etape-texte: var(--color-secondary);
}


/* --- Data Pro, « Visibilité » et « CRM & data » ---------------------------
   Reprise de la maquette « Web performance » : le grand titre en haut, sous
   lui une colonne etroite de texte courant, et a cote la rangee de quatre
   cartes blanches — image ronde centree, libelle centre dessous.
   Les deux sections sont en miroir :
     « CRM & data »  titre et texte a gauche, cartes a droite
     « Visibilité »  titre et texte a droite, cartes a gauche
                     (.duo-layout--texte-droite)
   L'ordre du DOM garde titre, texte puis cartes dans les deux cas : la
   lecture et le clavier suivent le sens du texte, seule la grille inverse. */
.duo-layout {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  column-gap: clamp(2rem, 4vw, 4rem);
  row-gap: clamp(2rem, 3.4vw, 3rem);
  width: 100%;
}
.duo-layout .duo-texte {
  /* rangees explicites : sans elles, dans la variante en miroir, le placement
     automatique renvoyait les cartes a la rangee suivante (colonne 1 deja
     depassee par le texte courant place en colonne 2) */
  grid-row: 1;
  grid-column: 1 / -1;
  margin: 0;
  max-width: none;
  text-align: left;
}
.duo-layout .duo-texte h2 {
  max-width: none;
}
.duo-layout .duo-intro {
  grid-row: 2;
  grid-column: 1;
  /* cale sur le haut de la rangee, donc sur le haut des cartes */
  align-self: start;
  margin: 0;
  padding-top: 0;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.75;
}
.duo-layout .duo-pictos {
  grid-row: 2;
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.2vw, 1.85rem);
}
/* miroir : titre et texte a droite, cartes a gauche */
.duo-layout--texte-droite {
  grid-template-columns: minmax(0, 1fr) minmax(0, 250px);
}
.duo-layout--texte-droite .duo-texte {
  text-align: right;
}
.duo-layout--texte-droite .duo-intro {
  grid-row: 2;
  grid-column: 2;
}
.duo-layout--texte-droite .duo-pictos {
  grid-row: 2;
  grid-column: 1;
}

/* les cartes : blanches, rayon doux, ombre legere ; image ronde centree et
   libelle centre dessous */
.duo-picto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  background: #fff;
  /* le filet habituel du site plutot qu'une ombre */
  border: 1px solid #343b451f;
  border-radius: 18px;
  padding: 2.5rem 1.25rem 2.25rem;
}
.duo-picto img {
  display: block;
  width: auto;
  height: 96px;
  margin-bottom: 1.75rem;
}
/* meme typo que les libelles des cartes « Des formats qui captent »
   (Podcasts, Livre Blanc, Articles) : DM Sans 18 px / 700 */
.duo-picto h3 {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5556;
  color: var(--color-secondary);
}
/* sous 992 px : une seule colonne, titre et texte alignes a gauche, cartes
   en deux colonnes de deux */
@media (max-width: 991px) {
  .duo-layout,
  .duo-layout--texte-droite {
    grid-template-columns: minmax(0, 1fr);
  }
  .duo-layout .duo-texte,
  .duo-layout--texte-droite .duo-texte,
  .duo-layout .duo-intro,
  .duo-layout--texte-droite .duo-intro,
  .duo-layout .duo-pictos,
  .duo-layout--texte-droite .duo-pictos {
    grid-column: 1;
    grid-row: auto;
    text-align: left;
  }
  .duo-layout .duo-pictos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* --- Nexio : « Trois dispositifs / pour éclairer vos décisions » ----------
   Le titre porte deja son retour a la ligne, mais le max-width de 780 px des
   titres de section faisait repasser la seconde ligne sur deux (elle mesure
   1049 px) — le plafond vient du pave de titre (850 px), pas du h2. Il est
   releve pour cette section : les deux lignes voulues tiennent, et le titre
   reste centre. */
#offres-nexio .page-section-heading {
  max-width: 1080px;
}
#offres-nexio .page-section-heading h2 {
  max-width: none;
}

/* --- Nexio, panneau « L'institut d'études » : les deux CTA cote a cote -----
   Ils mesuraient 281 px chacun pour 572 px de rangee, soit 6 px de trop avec
   l'ecart de 16 px : le second passait donc systematiquement a la ligne sur
   grand ecran. L'ecart descend a 12 px et le CTA a contour rentre ses cotes
   d'un demi-rem — les deux tiennent alors sur une ligne. Le `flex-wrap` est
   conserve : des que la colonne se resserre, le second repasse en dessous,
   comme voulu. */
#offres-nexio .home-expertise-panel-actions {
  gap: 0.75rem;
}
#offres-nexio .cta-secondaire {
  padding-inline: 1.5rem;
}


/* --- Data Pro, « Touchez plus de 450 000 profils » : cartes a encoche ------
   Reprise de la forme des cartes d'avis de l'accueil : carte blanche a filet
   et rayon, encoche en haut a droite, et dans le pan de l'encoche — la ou les
   avis logent leur guillemet — le numero de la carte, en gros et en gras.
   Les cartes se touchaient bord a bord dans une grille a filets herites du
   fond sombre d'origine : la grille passe en cartes separees.
   Porte limite a cette section : le meme balisage sert sur Agryco Ads et
   Nexio, qui gardent leur presentation. */
#expertises-dps .ads-touchpoint-grid {
  border: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
#expertises-dps .ads-touchpoint-card {
  --encoche-l: 104px;
  --encoche-h: 76px;
  --encoche-r: 20px;
  --encoche-bord: #343b451f;
  --encoche-debord: 1px;   /* recouvre le filet de la carte sous la decoupe */
  --encoche-sous: var(--encoche-fond);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #343b451f;
  border-radius: 24px;
  padding: 1.75rem;
  /* pas d'ombre : c'est elle qui trahissait le pan de l'encoche, blanc sur
     blanc — on voyait une marche derriere le numero. Il ne reste que le
     contour, qui suit la decoupe. */
  box-shadow: none;
}
#expertises-dps .ads-touchpoint-card + .ads-touchpoint-card {
  border-left: 1px solid #343b451f;
}
/* le numero, pose dans le pan de l'encoche, centre dessus.
   z-index 4 : au-dessus du pan (2) et du trace du contour (3). */
#expertises-dps .touchpoint-index {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: var(--encoche-l);
  height: var(--encoche-h);
  z-index: 4;
  font-family: var(--font-primary);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-secondary);
}
#expertises-dps .ads-touchpoint-card img {
  width: 72px;
  height: 72px;
  margin-bottom: 2.25rem;
}
/* meme typo que les libelles « Référencement naturel », « Podcasts »… :
   DM Sans 18 px / 700, pour que toute la page soit uniforme */
#expertises-dps .ads-touchpoint-card h3 {
  margin: auto 0 0;
  max-width: none;
  color: var(--color-secondary);
  font-family: var(--font-secondary);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5556;
}
@media (max-width: 991px) {
  #expertises-dps .ads-touchpoint-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  #expertises-dps .ads-touchpoint-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* les chiffres du titre de la 4e carte : la regle d'origine visait tous les
   `span` de la carte, elle les rendait absolus et quasi transparents — le
   « 450 000 » disparaissait. Ils reprennent le fil du titre. */
#expertises-dps .ads-touchpoint-card h3 .titre-chiffres {
  position: static;
  top: auto;
  right: auto;
  color: inherit;
  letter-spacing: inherit;
  font-weight: inherit;
  font-size: 1.172em;
}
/* une couleur par numero : violet, bleu, rose, vert fonce — teintes de la
   palette, telles quelles */
#expertises-dps .ads-touchpoint-card:nth-child(1) .touchpoint-index {
  color: #ba4a85;
}
#expertises-dps .ads-touchpoint-card:nth-child(2) .touchpoint-index {
  color: var(--color-accent-blue);
}
#expertises-dps .ads-touchpoint-card:nth-child(3) .touchpoint-index {
  color: var(--color-accent-pink);
}
#expertises-dps .ads-touchpoint-card:nth-child(4) .touchpoint-index {
  color: var(--color-accent-teal);
}


/* --- pied de page : fond clair ---------------------------------------------
   Fond demande : #D9D9D9 a 25 % d'opacite, soit #F6F6F6 une fois pose sur le
   blanc de la page. Le pied etait au gris fonce avec tout le texte en blanc :
   sur ce fond clair, plus rien ne serait lisible (le blanc y tombe a 1,05:1).
   Tout le texte repasse donc sur les gris du site, et le logo sur sa version
   fond clair (la version fond sombre etait blanche, donc invisible).
   Selecteurs en `footer[class]` : les classes utilitaires du balisage portent
   les couleurs, il faut les surpasser sans toucher aux six pages. */
footer[class] {
  background: rgb(217 217 217 / 0.25);
  color: var(--color-text);
}
/* intitules de colonnes : le jaune de la marque n'atteindrait que 1,7:1 */
footer[class] h2 {
  color: var(--color-secondary);
}
/* baseline, liens et mentions legales */
footer[class] p,
footer[class] li a {
  color: var(--color-muted);
}
footer[class] li a:hover,
footer[class] a:hover {
  color: var(--color-secondary);
}
footer[class] a[class*="underline"] {
  color: var(--color-muted);
  text-decoration-color: #343b4552;
}
/* filets de separation : le blanc a 10 % disparait sur fond clair */
footer[class] .border-b,
footer[class] [class*="border-white"] {
  border-color: #343b4524;
}
/* « Touchez plus de 450 000 / profils qualifiés du secteur » : le titre porte
   son retour a la ligne, mais le plafond de 850 px du pave de titre faisait
   repasser la seconde ligne sur deux (elle mesure 1065 px). */
#expertises-dps .page-section-heading {
  max-width: 1120px;
}
#expertises-dps .page-section-heading h2 {
  max-width: none;
}
/* « Des formats qui captent / vos cibles agricoles » : meme cas que le titre
   precedent — le retour a la ligne est pose, mais le plafond de 850 px du
   pave de titre faisait repasser la premiere ligne sur deux (910 px). */
.ads-media-section .page-section-heading {
  max-width: 960px;
}
.ads-media-section .page-section-heading h2 {
  max-width: none;
}


/* --- Agryco Ads, bloc « Agryco Premium » ----------------------------------
   Titre sur trois lignes : le retour a la ligne est pose dans le balisage, et
   le plafond de 850 px du pave de titre est releve — la ligne la plus large,
   « avec une expérience d'achat », mesure 1051 px.
   Le bloc d'intro passe en deux rangees : le texte puis son CTA, dans la
   colonne de droite ; l'image tient les deux rangees a gauche. */
.ads-premium-section .page-section-heading {
  max-width: 1080px;
}
.ads-premium-section .page-section-heading h2 {
  max-width: none;
}
.ads-page .ads-premium-intro > img {
  grid-area: 1 / 1;
}
/* le texte et son CTA dans une meme colonne, centres verticalement.
   Specificite volontairement haute : une regle ecrite pour « Notre promesse »
   (.ads-premium-intro > div:last-child) forcerait sinon ce bloc en 1 / 1,
   par-dessus l'image. */
.ads-page .ads-premium-intro > .premium-texte {
  grid-area: 1 / 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.75rem;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background: none;
  border: 0;
}
.ads-page .ads-premium-intro > .premium-texte > p {
  margin: 0;
  padding: 0;
}
@media (max-width: 767px) {
  .ads-page .ads-premium-intro > img {
    grid-area: 1 / 1;
  }
  .ads-page .ads-premium-intro > .premium-texte {
    grid-area: 2 / 1;
  }
}


/* --- Agryco Ads, « Foule contact » ----------------------------------------
   Meme gabarit que le bloc « Agryco Store » : texte a gauche, visuel a
   droite, mais sans encoche. Le visuel n'existe pas encore : le cadre est
   rempli au gris fonce du site en attendant l'image. */
/* Le bloc n'a plus de cadre : texte a gauche sur le fond de page, composition
   de formes a droite. Les proportions sont relevees sur la maquette fournie
   (zone visuelle 527 x 535 px) et exprimees en pourcentages, la composition
   suit donc la largeur disponible.
   La roue est posee par-dessus les deux paves, centree sur leur recouvrement
   et debordant en haut comme en bas, comme sur la maquette. */
#foule-contact .foule-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: 2.5rem;
  align-items: center;
  /* meme largeur que le bloc violet du bas de l'accueil, pas la pleine
     largeur de page */
  width: 100%;
  max-width: 1176px;
  margin-inline: auto;
}
/* le titre n'est plus dans un `.page-section-heading` : il reprend ici
   l'echelle des titres de section du site */
#foule-contact .foule-texte h2 {
  max-width: none;
  margin: 0 0 1.5rem;
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 4.7vw, 4.25rem);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--color-secondary);
}
#foule-contact .page-kicker {
  margin-bottom: 0.75rem;
}
/* le pave est aligne a gauche, et cale au milieu de la HAUTEUR de l'image */
#foule-contact .foule-texte {
  text-align: left;
  align-self: center;
}
#foule-contact .foule-texte > p:not(.page-kicker) {
  max-width: 520px;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.75;
}
#foule-contact .foule-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 2.25rem;
}
#foule-contact .foule-visuel {
  position: relative;
  /* la roue est centree dans la zone : le centre du pave de texte, cale au
     milieu de la meme rangee, tombe donc pile sur le centre de la roue.
     Le rapport est choisi pour que le debord haut et le debord bas soient
     egaux par construction (les deux paves touchent le haut et le bas). */
  aspect-ratio: 660 / 575;
  /* largeur explicite : tous les enfants sont en position absolue, et un
     `margin-inline: auto` sur un element de grille coupe l'etirement — la
     colonne retombait alors a une largeur nulle */
  width: min(100%, 660px);
  justify-self: center;
}
#foule-contact .foule-forme {
  position: absolute;
  border-radius: 40px;
  background: var(--color-accent-blue);
}
/* le pave du haut, cale sur l'angle haut droit : il depasse ainsi de la roue
   d'a peu pres autant que celui du bas depasse en bas a gauche */
#foule-contact .foule-forme--haut {
  left: 36.6%;
  right: 0;
  top: 0;
  height: 56%;
}
/* celui du bas, decale vers la gauche : les deux se recouvrent et forment une
   marche */
#foule-contact .foule-forme--bas {
  left: 9.5%;
  right: 18.8%;
  top: 44%;
  height: 56%;
}
/* emplacement de la roue, par-dessus les deux paves */
#foule-contact .foule-roue {
  position: absolute;
  left: 55%;
  top: 50%;
  /* la roue couvre largement les deux paves, en laissant a chacun un debord
     d'environ 35 px sur son angle exterieur */
  width: 78%;
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 18px 40px rgb(52 59 69 / 0.22));
}
@media (max-width: 991px) {
  #foule-contact .foule-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  #foule-contact .foule-visuel {
    max-width: 480px;
  }
}


/* --- seconde encoche, en haut a gauche -----------------------------------
   Le composant ne sait poser qu'un pan par element : le bloc garde le sien en
   bas a droite, et ce calque pose par-dessus porte celui du haut a gauche.
   Il laisse passer les clics. Sert au bloc « Faisons grandir… » de l'accueil
   et aux deux blocs « Le site de la marque ». */
.encoche-calque {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* un cran plus petite que celle du bas a droite (180 x 124) */
  --encoche-l: 132px;
  --encoche-h: 92px;
  --encoche-r: 24px;
}
@media (max-width: 991px) {
  .encoche-calque {
    --encoche-l: 100px;
    --encoche-h: 70px;
    --encoche-r: 18px;
  }
  /* les blocs « Le site de la marque » perdent leurs encoches sous 992 px :
     le calque suit */
  .marque-bloc .encoche-calque {
    display: none;
  }
}


/* --- accueil : la banniere descend sous le menu ---------------------------
   Comme sur les pages internes (.ads-hero-v2) : la carte ne passe plus sous
   la barre de navigation, elle commence dessous avec le meme jeu de 15 px
   que sur les cotes. Le bas de la barre est a 86 px (82 px en mobile, ou elle
   est un peu moins haute). */
.home-page .home-hero-section {
  padding-top: 101px;
}
@media (max-width: 639px) {
  .home-page .home-hero-section {
    padding-top: 97px;
  }
}
/* la barre sombre de l'accueil n'a plus lieu d'etre : elle etait faite pour se
   poser sur la video de la banniere. Celle-ci passant dessous, la barre reprend
   l'aspect des autres pages — fond blanc, logo fond clair, liens gris fonce. */
.home-page .site-header:not(.nav-new) .site-nav {
  background: #fff;
  border-color: #ffffffb3;
}
.home-page .site-header:not(.nav-new) .site-logo-on-light {
  display: block;
}
.home-page .site-header:not(.nav-new) .site-logo-on-dark {
  display: none;
}
.home-page .site-header:not(.nav-new) .site-nav-link {
  color: var(--color-secondary);
}
.home-page .site-header:not(.nav-new) .site-nav-link:hover {
  color: var(--color-primary);
  font-weight: 500;
}
.home-page .site-header:not(.nav-new) .site-menu-toggle {
  background: var(--color-surface);
  border-color: transparent;
}
.home-page .site-header:not(.nav-new) .menu-line {
  background: var(--color-secondary);
}
/* l'encoche du bloc « Agryco Store » descend d'un cran (180 x 124 a l'origine) */
.ads-page .ads-store-section:not(#foule-contact):not(#tuto):not(#emploi) .ads-store-layout figure {
  --encoche-l: 132px;
  --encoche-h: 92px;
  --encoche-r: 24px;
}
/* « Rocket Inside » : petite encoche en bas a droite, en plus de celle du
   haut a gauche portee par la carte elle-meme. Le calque prend le rayon du
   bloc pour que le contour suive la decoupe. */
.ads-page .ads-rocket-card > .encoche-calque {
  --encoche-l: 132px;
  --encoche-h: 92px;
  --encoche-r: 24px;
  z-index: 5;
}
.ads-page .ads-rocket-card {
  border-bottom-right-radius: 0;
}
@media (max-width: 991px) {
  .ads-page .ads-rocket-card > .encoche-calque {
    display: none;
  }
  .ads-page .ads-rocket-card {
    border-bottom-right-radius: var(--radius-card);
  }
}


/* --- Agryco Ads, « Notre écosystème média » -------------------------------
   Les logos etaient poses sur une plaque beige a rayon, heritee du gabarit
   des cartes media. Le fond disparait et les logos gagnent en hauteur :
   ils portent seuls le haut de la carte. */
.ads-page .ads-media-carousel .ads-media-logo {
  background: none;
  border-radius: 0;
  padding: 0;
  height: 132px;
  margin-bottom: 1.75rem;
}


/* --- pas de survol sur les blocs non cliquables ---------------------------
   Cartes medias, panneaux d'expertise et cartes d'article : aucun de ces
   blocs n'est un lien, le lien est a l'interieur. L'ombre et le decollement
   au survol laissaient croire le contraire. */
.ads-media-card:hover,
.card-article:hover {
  box-shadow: none;
  transform: none;
}
.card-article:hover {
  box-shadow: var(--shadow-card);
}
.home-expertise-panel:hover .home-expertise-panel-media img {
  transform: none;
}


/* --- accueil : la banniere se cale comme celles des pages internes --------
   La reserve haute de 132 px servait a degager le menu qui passait sur la
   carte ; le menu etant desormais au-dessus, elle n'a plus lieu d'etre et le
   retrait redevient uniforme (56 px sur les quatre cotes, comme .ads-hero-v2).
   Le bloc de tete reprend le meme filet, borne a la largeur du contenu. */
.home-page .home-hero-content {
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}



/* --- accueil : la carte de chiffres passe au violet -----------------------
   Fond violet de la palette (#BA4A85) et tout le texte en blanc pur : le gris
   clair des libelles (#A7B1BB) n'y mesurait que 2,26:1, le blanc donne 4,77. */
.home-page .home-hero-info {
  background: #ba4a85;
}
.home-page .home-hero-info,
.home-page .home-hero-info-label,
.home-page .home-hero-info-valeur,
.home-page .home-hero-info-valeur small,
.home-page .home-hero-info-detail {
  color: #fff;
}


/* --- Agryco Ads, « Louez moins. Ciblez mieux. » ---------------------------
   Les trois lignes ne sont plus des boutons vers le formulaire : la fleche est
   retiree du balisage et il n'y a plus AUCUN etat de survol — toutes les
   regles `:hover` ont ete supprimees, ainsi que la transition qui les portait.
   Ce sont de simples blocs d'information, ils ne bougent pas.
   Les anciens selecteurs `.ads-direct-options button` ont ete renommes en
   `.ads-option` : la mise en page est inchangee. */
.ads-direct-options .ads-option,
.ads-page .ads-direct-options .ads-option {
  cursor: default;
  transition: none;
}
/* --- survol du menu : la couleur de la banniere de chaque page ------------
   Chaque entree prend au survol la couleur du bandeau de la page vers
   laquelle elle mene, et passe en gras.
   Contrastes sur la barre blanche :
     Agryco Ads          #007C72  5,09:1
     Data Pro Solutions  #DB235F  4,75:1
     Nexio Research®     #0084B7  4,21:1
     L'équipe            #BA4A85   4,99:1  — sa banniere est jaune, et le
       jaune ne mesure que 1,47:1 sur blanc ; le violet evite aussi d'avoir
       deux entrees au gris fonce cote a cote.
     Ressources          #343B45  11,31:1  (demande)

   La graisse passe de 500 a 700. Pour que la barre ne bouge pas au survol,
   chaque lien reserve d'avance la largeur de son libelle en gras : un
   pseudo-element invisible reprend le texte (attribut data-libelle) en 700 et
   impose sa largeur, sans occuper de hauteur. */
.site-header .site-nav-link {
  position: relative;
  display: inline-block;
}
.site-header .site-nav-link::after {
  content: attr(data-libelle);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 700;
  pointer-events: none;
}
.site-header .site-nav-link:hover,
.home-page .site-header:not(.nav-new) .site-nav-link:hover {
  font-weight: 700;
}


/* --- menu burger : panneau blanc translucide et flou ----------------------
   Le panneau etait plein au gris fonce avec les entrees en blanc. Il passe au
   blanc plein, et toute la typo reprend celle de la barre fixe : entrees au
   gris fonce, survol a la couleur de la banniere de chaque page et passage en
   gras.
   `!important` : les couleurs sont portees par des classes utilitaires dans
   le balisage des six pages. */
.mobile-nav-panel {
  background: #fff !important;
  box-shadow: 18px 0 60px rgb(52 59 69 / 0.14);
}
/* surtitre « Navigation » et son filet : le jaune ne mesure que 1,5:1 sur
   blanc, ils passent au gris du site */
.mobile-nav-panel > div > div:first-child p {
  color: var(--color-muted) !important;
}
.mobile-nav-panel > div > div:first-child span {
  background: #343b4529 !important;
}
/* les entrees */
.mobile-nav-panel ul a {
  color: var(--color-secondary) !important;
}
.mobile-nav-panel ul a:hover {
  font-weight: 700;
}
/* mentions legales du bas */
.mobile-nav-panel > div > div:last-child p {
  color: var(--color-muted) !important;
}
/* le panneau etant translucide, les boutons flottants de la page (CTA de bas
   d'ecran, retour en haut) transparaissaient au travers : ils s'effacent tant
   que le menu est ouvert */
.mobile-menu-open .site-floating-contact,
.mobile-menu-open [data-controller~="back-to-top"] {
  display: none !important;
}
/* les deux dernieres entrees n'ont pas encore de picto : le rond reste, en
   gris clair, en attendant l'image */
.ads-option-icon--vide,
.ads-page .ads-option-icon--vide {
  background: #e7e9ec;
}
/* les intitules reprennent la typo des libelles du reste du site (cartes
   medias, formats, pictos) : DM Sans 18 px / 700, sans capitales forcees.
   Ils etaient en Belanosima 21,6 px, la fonte des gros titres. */
.ads-page .ads-direct-options strong {
  font-family: var(--font-secondary);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5556;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-secondary);
}
/* le texte secondaire descend d'un cran pour rester sous le titre */
.ads-page .ads-direct-options small {
  font-size: 0.9375rem;
  line-height: 1.55;
}


/* --- Agryco Ads, « Notre écosystème média » : carres de couleur -----------
   Meme principe que la frise chronologique : un carre arrondi de couleur est
   pose DERRIERE chaque carte, centre horizontalement, et ne depasse qu'en
   haut. La carte reste opaque (fond blanc) : seule la partie haute du carre
   se voit.
   La visionneuse du carrousel coupe ce qui deborde ; elle reserve donc la
   hauteur du debord en haut, compensee par une marge negative pour que le
   carrousel garde exactement sa position. */
.ads-media-carousel--ecosysteme [data-carousel-target="viewport"] {
  padding-top: 26px;
  margin-top: -26px;
}
.ads-media-carousel--ecosysteme [data-carousel-target="slide"] {
  position: relative;
}
.ads-media-carousel--ecosysteme [data-carousel-target="slide"]::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 92px;
  border-radius: 26px;
  background: var(--carre-fond, var(--kicker-jaune));
  z-index: 0;
}
/* la carte passe par-dessus le carre : il ne reste visible qu'en haut */
.ads-media-carousel--ecosysteme .ads-media-card {
  position: relative;
  z-index: 1;
}
/* une couleur par support, dans l'ordre de la frise */
.ads-media-carousel--ecosysteme [data-carousel-target="slide"]:nth-child(1)::before { --carre-fond: var(--kicker-jaune); }
.ads-media-carousel--ecosysteme [data-carousel-target="slide"]:nth-child(2)::before { --carre-fond: #ba4a85; }
.ads-media-carousel--ecosysteme [data-carousel-target="slide"]:nth-child(3)::before { --carre-fond: var(--color-accent-green); }
.ads-media-carousel--ecosysteme [data-carousel-target="slide"]:nth-child(4)::before { --carre-fond: var(--color-accent-teal); }
.ads-media-carousel--ecosysteme [data-carousel-target="slide"]:nth-child(5)::before { --carre-fond: var(--color-accent-blue); }

/* --- le logo se rapproche de son intitule, la liste grossit ---------------
   Le blanc entre le logo et le texte passe de 28 a 12 px. La liste a
   puces, a 13 px, etait nettement plus petite que partout ailleurs : elle
   rejoint les 15 px des textes courants du site. */
.ads-page .ads-media-carousel--ecosysteme .ads-media-logo {
  margin-bottom: 0.75rem;
}
.ads-media-carousel--ecosysteme .ads-media-card strong {
  margin-top: 0;
}
.ads-media-carousel--ecosysteme .ads-media-card ul {
  font-size: 0.9375rem;
  line-height: 1.6;
}


/* --- « Louez moins » : le bandeau « 300 000+ » passe au-dessus -------------
   Il coiffait la seule colonne de droite, au-dessus des leviers. Il prend
   maintenant toute la largeur, entre le chapeau de section et la rangee
   photo + leviers. La photo n'a donc plus de hauteur imposee : elle suit
   exactement celle de la pile Email & SMS / Print / Sponso / Display /
   Operations speciales. */
@media (min-width: 768px) {
  .ads-page .ads-direct-layout {
    grid-template-rows: auto minmax(0, 1fr);
  }
  .ads-page .ads-direct-metric {
    grid-area: 1 / 1 / 2 / -1;
  }
  .ads-page .ads-direct-media {
    grid-area: 2 / 1 / 3 / 7;
    min-height: 0;
  }
  .ads-page .ads-direct-options {
    grid-area: 2 / 7 / 3 / -1;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .ads-page .ads-direct-media {
    grid-area: 2 / 1 / 3 / 8;
  }
  .ads-page .ads-direct-options {
    grid-area: 2 / 8 / 3 / -1;
  }
}


/* --- « 300 000+ » : un cartouche compact, centre ---------------------------
   Le bandeau pleine largeur alourdissait la section et laissait un vide
   enorme entre le chiffre et sa legende (l'un cale a gauche, l'autre a
   droite). Le bloc n'occupe plus que sa propre largeur, centre au-dessus de
   la rangee, les deux textes separes de 30 px exactement.
   Sous 768 px il reprend toute la largeur, comme le reste de la pile. */
@media (min-width: 768px) {
  .ads-page .ads-direct-metric {
    justify-self: center;
    width: auto;
    height: auto;
    min-height: 0;
    gap: 30px;
    padding: 1.125rem 1.75rem;
  }
  .ads-page .ads-direct-metric span {
    font-size: 2rem;
  }
  .ads-page .ads-direct-metric p {
    font-size: 1rem;
    line-height: 1.4;
  }
}


/* --- ecosysteme : les carres se placent ENTRE deux cartes ------------------
   Ils etaient centres derriere chaque carte ; ils se posent maintenant sur
   l'intervalle qui separe deux supports, a la meme hauteur qu'avant.
   Quatre carres pour cinq cartes : Agryco|WikiAgri jaune, WikiAgri|Farm
   violet, Farm|larecolte bleu, larecolte|ETA MAG vert clair. Le vert fonce
   disparait, trop proche du vert du logo Farm Connexion. */
.ads-media-carousel--ecosysteme [data-carousel-target="slide"]::before {
  left: 100%;
}
.ads-media-carousel--ecosysteme [data-carousel-target="slide"]:nth-child(1)::before { --carre-fond: var(--kicker-jaune); }
.ads-media-carousel--ecosysteme [data-carousel-target="slide"]:nth-child(2)::before { --carre-fond: #ba4a85; }
.ads-media-carousel--ecosysteme [data-carousel-target="slide"]:nth-child(3)::before { --carre-fond: var(--color-accent-blue); }
.ads-media-carousel--ecosysteme [data-carousel-target="slide"]:nth-child(4)::before { --carre-fond: var(--color-accent-green); }
/* la derniere carte n'a pas de voisine : pas de carre apres elle */
.ads-media-carousel--ecosysteme [data-carousel-target="slide"]:nth-child(n + 5)::before {
  content: none;
}

/* L'intervalle entre deux cartes ne fait que 16 px : un carre plein de 92 px
   de haut laissait depasser une longue tige entre les deux cartes, en forme
   de T. Le carre devient une languette : elle depasse de 24 px en haut et ne
   plonge que de 22 px derriere les cartes. */
.ads-media-carousel--ecosysteme [data-carousel-target="slide"]::before {
  height: 46px;
  border-radius: 23px 23px 8px 8px;
}


/* --- « 300 000+ » dans l'encoche de la photo -------------------------------
   Meme principe que la carte de chiffres du bandeau d'accueil : le cartouche
   vient se loger dans l'encoche en bas a gauche de la photo. Il sort donc de
   la grille (il est passe a l'interieur de la figure) : la photo et la pile
   de leviers reprennent une seule rangee. */
@media (min-width: 768px) {
  .ads-page .ads-direct-layout {
    grid-template-rows: minmax(0, 1fr);
  }
  .ads-page .ads-direct-media {
    grid-area: 1 / 1 / 2 / 7;
  }
  .ads-page .ads-direct-options {
    grid-area: 1 / 7 / 2 / -1;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .ads-page .ads-direct-media {
    grid-area: 1 / 1 / 2 / 8;
  }
  .ads-page .ads-direct-options {
    grid-area: 1 / 8 / 2 / -1;
  }
}
/* l'encoche est taillee sur le cartouche : 34 px de jour a droite et 30 px
   au-dessus, comme sur l'accueil */
.ads-page .ads-direct-media {
  --encoche-l: 334px;
  --encoche-h: 190px;
  --encoche-r: 26px;
}
.ads-page .ads-direct-metric {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 4;                 /* au-dessus du pan (2) et du contour (3) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: calc(var(--encoche-l) - 34px);
  height: calc(var(--encoche-h) - 30px);
  gap: 12px;
  padding: 24px;
  border-radius: 14px;
  background: #ba4a85;
  color: #fff;
}
.ads-page .ads-direct-metric span {
  flex: none;
  font-size: 2rem;
  line-height: 1;
}
.ads-page .ads-direct-metric p {
  max-width: none;
  margin: 0;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
}
@media (max-width: 767px) {
  .ads-page .ads-direct-media {
    --encoche-l: 290px;
    --encoche-h: 186px;
  }
}


/* --- ecosysteme : le carre se voit en entier -------------------------------
   Pose a cheval sur le haut des cartes, sa moitie basse disparaissait
   derriere leur fond blanc. Il vient maintenant se poser SUR l'arete
   superieure des cartes, toujours centre sur l'intervalle qui separe deux
   supports : le carre se lit en entier. La visionneuse reserve sa hauteur. */
.ads-media-carousel--ecosysteme [data-carousel-target="viewport"] {
  padding-top: 92px;
  margin-top: -46px;
}
.ads-media-carousel--ecosysteme [data-carousel-target="slide"]::before {
  top: auto;
  bottom: 100%;
  height: 92px;
  border-radius: 26px;
}


/* --- ecosysteme : les logos recadres, les espacements harmonises -----------
   Les cinq PNG etaient poses sur un meme calque de 370 x 170, avec une marge
   transparente differente pour chacun : d'ou le grand vide au-dessus des
   logos et leur alignement optique flottant. Les fichiers sont recadres sur
   le dessin (`-net.png`), et c'est la CSS qui donne l'espace, identique pour
   les cinq : 28 px de bord, un cadre de 70 px pour le logo, 20 px avant
   l'intitule, 16 px avant la liste. */
.ads-page .ads-media-carousel--ecosysteme .ads-media-logo {
  height: 70px;
  margin-bottom: 1.25rem;
}
.ads-media-carousel--ecosysteme .ads-media-card {
  padding: 1.75rem;
}
.ads-media-carousel--ecosysteme .ads-media-card ul {
  padding-top: 1rem;
}


/* --- ecosysteme : le carre reprend sa place, a cheval sur les cartes -------
   Retour a l'emplacement d'origine : le carre chevauche l'arete superieure
   des cartes, centre sur l'intervalle qui separe deux supports. Pour qu'il
   se voie en entier, ce sont les cartes qui deviennent transparentes : le
   fond de la section est deja blanc, rien d'autre ne change a l'oeil. */
.ads-media-carousel--ecosysteme [data-carousel-target="viewport"] {
  padding-top: 26px;
  margin-top: -26px;
}
.ads-media-carousel--ecosysteme [data-carousel-target="slide"]::before {
  top: -24px;
  bottom: auto;
  height: 92px;
  border-radius: 26px;
}
.ads-media-carousel--ecosysteme .ads-media-card {
  background: transparent;
}

/* A 92 px de cote, le carre mordait sur les logos : il descend de 68 px dans
   la carte alors que le logo commence a 29 px du bord. Ramene a 64 px, il ne
   penetre que de 24 px de chaque cote, soit 4 px de moins que la marge
   interieure des cartes : il passe derriere leur cadre sans jamais toucher
   ni le logo ni le texte. */
.ads-media-carousel--ecosysteme [data-carousel-target="slide"]::before {
  width: 64px;
  height: 64px;
  border-radius: 20px;
}


/* --- « Louez moins » : la photo s'elargit, les leviers se resserrent -------
   Les cinq leviers portent tres peu de texte : leur colonne passe de 6 a 4
   douziemes, la photo de 6 a 8. Le cartouche « 300 000+ » occupe presque
   toute l'encoche (14 px de jour au lieu de 34) et son chiffre double de
   corps. */
@media (min-width: 992px) {
  .ads-page .ads-direct-media {
    grid-area: 1 / 1 / 2 / 9;
  }
  .ads-page .ads-direct-options {
    grid-area: 1 / 9 / 2 / -1;
  }
}
.ads-page .ads-direct-media {
  --encoche-l: 412px;
  --encoche-h: 236px;
  --encoche-r: 26px;
}
.ads-page .ads-direct-metric {
  width: calc(var(--encoche-l) - 14px);
  height: calc(var(--encoche-h) - 14px);
  gap: 14px;
  padding: 28px;
}
.ads-page .ads-direct-metric span {
  font-size: 3.25rem;
}
.ads-page .ads-direct-metric p {
  font-size: 1.125rem;
  line-height: 1.45;
}


/* --- ecosysteme : le fond blanc revient sous les cartes --------------------
   Le carre passe simplement devant : a 64 px il ne mord que de 24 px sur la
   carte, soit 4 px de moins que sa marge interieure de 28 px. Il ne recouvre
   donc que l'angle vide de la carte, jamais le logo ni le texte, et se lit
   en entier. */
.ads-media-carousel--ecosysteme .ads-media-card {
  background: #fff;
}
.ads-media-carousel--ecosysteme [data-carousel-target="slide"]::before {
  z-index: 5;
}


/* --- « 300 000+ » : cartouche resserre, chiffre genereux -------------------
   Le bloc redescend a 330 x 170 (il en faisait 398 x 222) et les marges
   interieures passent de 28 a 22 px : c'est le chiffre qui occupe la place
   gagnee, a 48 px, la legende restant a la taille du texte courant. */
.ads-page .ads-direct-media {
  --encoche-l: 344px;
  --encoche-h: 184px;
}
.ads-page .ads-direct-metric {
  gap: 10px;
  padding: 22px;
}
.ads-page .ads-direct-metric span {
  font-size: 3rem;
}
.ads-page .ads-direct-metric p {
  font-size: 1rem;
  line-height: 1.4;
}


/* --- ecosysteme : les carres repassent derriere les cartes ----------------- */
.ads-media-carousel--ecosysteme [data-carousel-target="slide"]::before {
  z-index: 0;
}

/* --- « Louez moins » : c'est la photo qui s'adapte, pas les leviers --------
   « Sponso de news Agryco » demande 209 px, plus le picto (44), l'espace
   (20) et les marges (48) : 321 px. La colonne des leviers ne descend donc
   jamais sous 336 px et les intitules ne peuvent plus passer sur deux
   lignes ; c'est la photo qui absorbe toute la variation de largeur.
   Seules les accroches sous les titres gardent le droit de se replier. */
@media (min-width: 768px) {
  .ads-page .ads-direct-layout {
    grid-template-columns: minmax(0, 1fr) clamp(336px, 32%, 460px);
  }
  .ads-page .ads-direct-media {
    grid-area: 1 / 1 / 2 / 2;
  }
  .ads-page .ads-direct-options {
    grid-area: 1 / 2 / 2 / 3;
  }
}
.ads-page .ads-direct-options strong {
  white-space: nowrap;
}

/* --- « 300 000+ » : le cartouche deborde sous la photo ---------------------
   Il descend 36 px plus bas que l'image, ce qui casse l'angle trop carre.
   L'encoche est calculee sur la seule partie qui reste dans la photo, si
   bien que le jour autour du cartouche reste de 14 px partout.
   La photo perd `overflow: hidden` (sinon le debord serait coupe) : c'est
   l'image qui reprend a son compte le rayon du cadre. */
.ads-page .ads-direct-media {
  overflow: visible;
  --encoche-l: 358px;
  --encoche-h: 190px;
}
.ads-page .ads-direct-media > img {
  border-radius: inherit;
}
.ads-page .ads-direct-metric {
  bottom: -36px;
  width: calc(var(--encoche-l) - 14px);
  height: 212px;
  gap: 10px;
  padding: 24px;
}
.ads-page .ads-direct-metric span {
  font-size: 4rem;
}



/* --- ecosysteme : le carrousel respire sous le chapeau ---------------------
   Le haut des carres arrivait 4 px au-dessus du bas du chapeau : ils se
   chevauchaient. Le carrousel descend de 60 px, ce qui laisse 56 px entre
   le texte et le premier carre. */
.ads-media-carousel--ecosysteme {
  margin-top: 100px;
}


/* --- « 300 000+ » : cartouche plus etroit, debord plus franc ---------------
   Le bloc passe de 344 x 212 a 292 x 180 : le chiffre garde son corps (64 px,
   il demande 241 px de large) mais la legende se replie sur trois lignes et
   les marges se resserrent a 20 px. Le debord sous la photo passe de 36 a
   56 px ; l'encoche ne couvre que la partie restee dans l'image, le jour de
   14 px autour du cartouche est donc inchange. */
.ads-page .ads-direct-media {
  --encoche-l: 306px;
  --encoche-h: 122px;
}
.ads-page .ads-direct-metric {
  bottom: -56px;
  height: 164px;
  gap: 8px;
  padding: 20px;
}
.ads-page .ads-direct-metric span {
  white-space: nowrap;
}













/* --- mobile et tablette : plus aucune encoche sur « Faisons grandir » ------
   Les deux pans du bloc etaient deja neutralises sous 1024 px, mais pas le
   calque pose en haut a gauche : il restait la decoupe et le trace du rayon
   de l'ancien angle. Le calque disparait avec eux et l'angle redevient rond.
   Le titre, lui, descend d'un cran : a 40 px « SUR LE TERRAIN. » ne tenait
   pas dans la largeur et le mot se coupait en deux. */
/* L'encoche du haut a gauche reste, a toutes les tailles. Ce qu'on voyait
   dedans etait l'ancien rayon de l'angle : la carte porte `overflow: hidden`
   et un rayon de 28 px en haut a gauche, qui rognait le pan de l'encoche le
   long de cette courbe et laissait apparaitre le trace. L'angle perd donc
   son rayon de ce cote, comme il le perd deja en bas a droite pour l'autre
   encoche. */
.home-contact-card {
  border-top-left-radius: 0;
}
@media (max-width: 1023px) {
  /* sous 1024 px seule l'encoche du bas a droite est desactivee : cet
     angle-la retrouve son rayon, celui du haut a gauche reste carre */
  .home-contact-card {
    border-radius: 0 28px 28px 28px;
  }
}
@media (max-width: 639px) {
  /* l'identifiant l'emporte sur la classe utilitaire qui porte le clamp, et
     `overflow-wrap: anywhere`, pose ici en dernier recours, est leve : c'est
     lui qui coupait « TERRAIN » en plein mot */
  #contact-title {
    font-size: clamp(28px, 8.2vw, 40px);
    overflow-wrap: normal;
  }
}

/* --- mobile et tablette : « Offre découverte » ----------------------------
   Le personnage occupait une rangee a lui seul, calee tout en bas : il
   restait un large vide entre le CTA et lui, et le sujet se retrouvait loin
   du texte. La rangee se reduit fortement et le sujet remonte en debordant
   par-dessus, cale a droite du CTA — le CTA, lui, passe devant. */
@media (max-width: 1023px) {
  .home-discovery-frame {
    min-height: 96px;
  }
  .home-discovery-person {
    height: 260px;
    max-width: 58%;
    z-index: 1;
  }
  .home-discovery-card > .order-1 {
    position: relative;
    z-index: 2;
    padding-bottom: 1.5rem;
  }
  .home-discovery-card .brand-primary-button {
    position: relative;
    z-index: 3;
  }
}
@media (max-width: 575px) {
  .home-discovery-frame {
    min-height: 80px;
  }
  .home-discovery-person {
    height: 220px;
    max-width: 62%;
  }
}


/* ==========================================================================
   Agryco Ads — reprise du responsive (sous 768 px)
   ========================================================================== */

/* --- « Louez moins » : une colonne, photo / chiffre / leviers -------------
   Le cartouche « 300 000+ » sort de la figure : en grand ecran il se pose en
   absolu sur l'angle bas-gauche de la grille — qui est celui de la photo —
   et en mobile il reprend simplement sa place dans le flux, entre la photo
   et la pile de leviers. La grille a 12 colonnes n'etait neutralisee nulle
   part sous 768 px : la photo et les leviers restaient cote a cote dans deux
   colonnes de quelques dizaines de pixels. */
@media (min-width: 768px) {
  .ads-page .ads-direct-layout {
    position: relative;
  }
  .ads-page .ads-direct-metric {
    position: absolute;
    left: 0;
    bottom: -56px;
  }
}
@media (max-width: 767px) {
  .ads-page .ads-direct-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    row-gap: 20px;
  }
  .ads-page .ads-direct-media,
  .ads-page .ads-direct-metric,
  .ads-page .ads-direct-options {
    grid-area: auto / 1;
  }
  /* plus d'encoche : le cartouche n'est plus dedans */
  .ads-page .ads-direct-media {
    aspect-ratio: 4 / 3;
    min-height: 0;
    height: auto;
    overflow: hidden;
  }
  .ads-page .ads-direct-media::before,
  .ads-page .ads-direct-media::after {
    content: none;
  }
  .ads-page .ads-direct-metric {
    position: static;
    width: auto;
    height: auto;
    padding: 24px;
  }
  .ads-page .ads-direct-options {
    grid-auto-rows: auto;
  }
}

/* --- « Agryco Store » : le visuel revient sous le texte -------------------
   Le cadre image avait `min-height: 0` pour suivre la hauteur du texte en
   grand ecran ; empile, il tombait donc a zero et l'image disparaissait.
   Il reprend un rapport d'image propre. */
@media (max-width: 991px) {
  .ads-page .ads-store-section:not(#foule-contact):not(#tuto):not(#emploi) .ads-store-layout figure {
    aspect-ratio: 4 / 3;
    min-height: 0;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    overflow: clip;
  }
  .ads-page .ads-store-copy {
    border-right: 1px solid var(--color-border);
    border-bottom: 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }
}

/* --- « Rocket Inside » : image en haut, texte dessous ---------------------
   La photo etait posee en fond sur toute la carte, avec un voile sombre par
   dessus et 680 px de hauteur imposee : le texte flottait au milieu de
   l'image et il restait un grand aplat vert au-dessus. La carte redevient
   une simple colonne — visuel puis texte — sans voile ni hauteur forcee. */
@media (max-width: 767px) {
  .ads-page .ads-rocket-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 24px;
  }
  .ads-page .ads-rocket-card > .encoche-calque {
    display: none;
  }
  .ads-page .ads-rocket-card picture {
    position: static;
    display: block;
    width: 100%;
    height: auto;
  }
  /* le rapport est porte par l'image elle-meme : pose sur la balise
     `picture`, il etait ignore des que l'image chargeait, celle-ci reprenant
     sa hauteur naturelle (493 px) et repoussant le sujet vers le bas. Le
     cadrage vise le bas de la photo, ou se trouvent le colis et le visage. */
  .ads-page .ads-rocket-card picture img {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center 92%;
  }
  .ads-page .ads-rocket-card picture::after {
    content: none;
  }
  .ads-page .ads-rocket-copy {
    position: static;
    width: 100%;
    inset: auto;
    padding: 1.75rem;
  }
}

/* Le cartouche n'est plus enfant de la figure : il n'herite donc plus de ses
   variables d'encoche et sa largeur retombait sur celle de son contenu
   (478 px). Ses dimensions sont posees en clair, l'encoche de la photo
   restant calee dessus : 292 + 14 de jour en largeur, (164 - 56) + 14 en
   hauteur. */
@media (min-width: 768px) {
  .ads-page .ads-direct-metric {
    width: 292px;
    height: 164px;
  }
}

/* Empile, le titre est centre sur toute la largeur : il passait sous le pan
   de l'encoche du haut a gauche. Le pan se resserre et le contenu reserve sa
   hauteur. */
@media (max-width: 1023px) {
  .home-contact-card > .encoche-calque {
    --encoche-l: 92px;
    --encoche-h: 64px;
    --encoche-r: 18px;
  }
  .home-contact-inner {
    padding-top: 86px;
  }
}
@media (max-width: 639px) {
  .home-contact-card > .encoche-calque {
    --encoche-l: 78px;
    --encoche-h: 54px;
    --encoche-r: 14px;
  }
  .home-contact-inner {
    padding-top: 74px;
  }
}


/* --- mobile : les trois leviers ------------------------------------------
   Trois exigences : les trois tuiles sur un seul ecran de telephone, le
   titre lisible, et le visuel qu'on voit vraiment. Le visuel est donc pose
   en entier (`contain`) sur la droite de la tuile, et le reste est peint
   d'un degrade releve pixel par pixel sur le bord gauche de chaque image, a
   la meme echelle : les deux se raccordent sans couture visible. */
@media (max-width: 639px) {
  .home-levier--ads,
  .home-levier--nexio,
  .home-levier--datapro {
    aspect-ratio: 16 / 9;
    background-repeat: no-repeat, no-repeat;
    background-size: contain, cover;
    background-position: right center, center;
    padding: 20px;
    justify-content: flex-start;
  }
  .home-levier--ads {
    background-image:
      url(/assets/agryco/homepage/levier-ads-court-44fe22ae6a6bcc4974fde74d6b84a3aac7751b4005070d7da7a6b3c847dc9497.png),
      linear-gradient(180deg, #3a8978 0%, #3f9280 12.5%, #409583 25%, #3e9281 37.5%, #388979 50%, #2e7a6d 62.5%, #21665c 75%, #104b46 87.5%, #002b2b 100%);
  }
  .home-levier--datapro {
    background-image:
      url(/assets/agryco/homepage/levier-datapro-court-dbf76219aaff6878dc8205e26f208b9de85171860308d8c202375e37a337ca25.png),
      linear-gradient(180deg, #d02059 0%, #da235e 12.5%, #df2461 25%, #df2461 37.5%, #d9225e 50%, #ce1f58 62.5%, #be1a4f 75%, #ac1646 87.5%, #9a123d 100%);
  }
  .home-levier--nexio {
    background-image:
      url(/assets/agryco/homepage/levier-nexio-court-2e2a155ec36d13356fa44eebfd07d55a7c3763a4faf7ccc8b365b2433ea1d412.png),
      linear-gradient(180deg, #0077a7 0%, #0080b4 12.5%, #0086bb 25%, #0087bc 37.5%, #0083b7 50%, #007bac 62.5%, #006f9b 75%, #005f83 87.5%, #004965 100%);
  }
  
  .home-levier--nexio:lang(en) {
    background-image:
      url(/assets/agryco/homepage/levier-nexio-court-en-faa4bf029d44115d912638c773cfdda2a84dfc870d8165b0005795ec68b5e3e1.png),
      linear-gradient(180deg, #0077a7 0%, #0080b4 12.5%, #0086bb 25%, #0087bc 37.5%, #0083b7 50%, #007bac 62.5%, #006f9b 75%, #005f83 87.5%, #004965 100%);
  }
  
  .home-levier--nexio:lang(de) {
    background-image:
      url(/assets/agryco/homepage/levier-nexio-court-de-4c4245a592e6cf5228beed5649611b75240c683ea0455b9de5ee126f6ba2f522.png),
      linear-gradient(180deg, #0077a7 0%, #0080b4 12.5%, #0086bb 25%, #0087bc 37.5%, #0083b7 50%, #007bac 62.5%, #006f9b 75%, #005f83 87.5%, #004965 100%);
  }
  
  .home-levier--nexio:lang(es) {
    background-image:
      url(/assets/agryco/homepage/levier-nexio-court-es-bc705f8c01c3807bbeb9300eb0500b904b2b5ec5c9df22d43ef5f38188743092.png),
      linear-gradient(180deg, #0077a7 0%, #0080b4 12.5%, #0086bb 25%, #0087bc 37.5%, #0083b7 50%, #007bac 62.5%, #006f9b 75%, #005f83 87.5%, #004965 100%);
  }
  
  .home-levier--nexio:lang(it) {
    background-image:
      url(/assets/agryco/homepage/levier-nexio-court-it-841000e92428bbd21c20cff24168e7192131783ae94e81be223c32d4fa4f30ec.png),
      linear-gradient(180deg, #0077a7 0%, #0080b4 12.5%, #0086bb 25%, #0087bc 37.5%, #0083b7 50%, #007bac 62.5%, #006f9b 75%, #005f83 87.5%, #004965 100%);
  }
  
  .home-levier--nexio:lang(pt) {
    background-image:
      url(/assets/agryco/homepage/levier-nexio-court-pt-703607fe4b2be901628b247297f98563bd9eb42d5b191ae5e54aea911e49725f.png),
      linear-gradient(180deg, #0077a7 0%, #0080b4 12.5%, #0086bb 25%, #0087bc 37.5%, #0083b7 50%, #007bac 62.5%, #006f9b 75%, #005f83 87.5%, #004965 100%);
  }
  
  /* le titre est pose sur l'aplat, plus sur la photo : le voile ne sert plus */
  .home-levier--ads::after,
  .home-levier--nexio::after,
  .home-levier--datapro::after {
    content: none;
  }
  .home-levier-titre {
    max-width: 9ch;
    font-size: clamp(22px, 6.4cqw, 28px);
  }
}

/* --- aucun effet de survol sur ecran tactile -----------------------------
   Sur telephone il n'y a pas de survol : le decollement et l'agrandissement
   restaient accroches apres un appui, jusqu'au toucher suivant. Tous les
   deplacements au survol sont neutralises la ou le pointeur ne survole pas. */
@media (hover: none) {
  a:hover,
  button:hover,
  [class*="card"]:hover,
  [class*="levier"]:hover,
  [class*="panel"]:hover,
  [class*="option"]:hover,
  [class*="tile"]:hover,
  [class*="picto"]:hover,
  [class*="card"]:hover img,
  [class*="panel"]:hover img {
    transform: none;
  }
}

/* --- « Rocket Inside » en mobile : le visuel passe en bas -----------------
   La colonne s'inverse : le texte et le CTA occupent le haut de la carte, la
   photo vient se coller au bord bas. Le texte courant, a 14 px, etait plus
   petit que partout ailleurs sur la page : il rejoint les 16 px de
   « Vous etes present sur un salon... », et l'accroche passe a 20 px. */
@media (max-width: 767px) {
  .ads-page .ads-rocket-card {
    flex-direction: column-reverse;
  }
  .ads-page .ads-rocket-card picture img {
    object-position: center bottom;
  }
  .ads-page .ads-rocket-copy {
    padding: 1.75rem 1.75rem 1.5rem;
  }
  .ads-page .ads-rocket-copy h3 {
    font-size: 1.25rem;
  }
  .ads-page .ads-rocket-copy p {
    font-size: 1rem;
    line-height: 1.6;
  }
}

/* Empile, les 100 px entre le chapeau et les cartes detachaient trop le
   carrousel de son texte : l'ecart se resserre sur les petits ecrans. */
@media (max-width: 991px) {
  .ads-media-carousel--ecosysteme {
    margin-top: 64px;
  }
}
@media (max-width: 639px) {
  .ads-media-carousel--ecosysteme {
    margin-top: 48px;
  }
}

/* --- « Rocket Inside » en mobile : le visuel entier, plus petit -----------
   Le fichier mobile portait ses propres angles arrondis et une large marge
   de fond : d'ou le rayon qu'on apercevait en bas a gauche, et la necessite
   de recadrer, ce qui coupait le haut du sujet. Le visuel est recadre sur le
   sujet une fois pour toutes (`-net`), pose en entier et reduit a 82 % de la
   largeur, cale a gauche comme dans la composition d'origine.
   Les deux CTA de la page prennent toute la largeur : isoles sur le cote,
   ils flottaient. */
@media (max-width: 767px) {
  .ads-page .ads-rocket-card picture {
    align-self: flex-start;
    width: 82%;
  }
  .ads-page .ads-rocket-card picture img {
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center bottom;
  }
  .ads-page .ads-rocket-copy .brand-primary-button,
  #foule-contact .brand-primary-button {
    width: 100%;
    text-align: center;
  }
  #foule-contact .foule-actions {
    justify-content: stretch;
  }
}


/* --- « Foule contact » : le CTA devient un element de la grille -----------
   Il etait a l'interieur du pave de texte ; empile, il se retrouvait donc
   au-dessus de la roue, qui semblait alors ne plus appartenir au bloc. Sorti
   du pave, il garde sa place sous le texte en grand ecran (les deux restent
   centres ensemble sur la hauteur de l'image) et passe sous la roue en
   mobile. */
@media (min-width: 992px) {
  #foule-contact .foule-layout {
    grid-template-rows: auto auto;
    align-content: center;
  }
  #foule-contact .foule-texte {
    grid-row: 1;
    grid-column: 1;
    align-self: end;
  }
  #foule-contact .foule-actions {
    grid-row: 2;
    grid-column: 1;
    align-self: start;
    margin-top: 2.25rem;
  }
  #foule-contact .foule-visuel {
    grid-row: 1 / 3;
    grid-column: 2;
  }
}
@media (max-width: 991px) {
  #foule-contact .foule-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  #foule-contact .foule-texte  { grid-row: 1; }
  #foule-contact .foule-visuel { grid-row: 2; width: min(100%, 320px); justify-self: center; }
  #foule-contact .foule-actions { grid-row: 3; margin-top: 0.5rem; }
}


/* --- menu : couleur de page au survol ET sur la page courante -------------
   Chaque entree porte la couleur de sa page dans une variable ; le survol et
   l'etat actif (`aria-current="page"`, pose sur le lien de la page en cours
   dans les deux menus) s'en servent, avec le passage en gras.
   « A propos de nous » prend l'orange de la palette, #FFB802 — seul endroit
   du menu ou il sert. « Ressources » quitte le gris fonce pour le violet.
   Contrastes sur blanc : vert 5,09 · rose 4,75 · bleu 4,21 · violet 4,77 ;
   l'orange n'y mesure que 1,73, c'est un choix de marque assume. */
.site-header .site-nav-link[href="agryco-ads.html"],
.mobile-nav-panel ul a[href="agryco-ads.html"]        { --nav-accent: #007c72; }
.site-header .site-nav-link[href="data-pro-solutions.html"],
.mobile-nav-panel ul a[href="data-pro-solutions.html"]{ --nav-accent: #db235f; }
.site-header .site-nav-link[href="nexio-research.html"],
.mobile-nav-panel ul a[href="nexio-research.html"]    { --nav-accent: #0084b7; }
.site-header .site-nav-link[href="a-propos-de-nous.html"],
.mobile-nav-panel ul a[href="a-propos-de-nous.html"]  { --nav-accent: #ffb802; }
.site-header .site-nav-link[href="blog.html"],
.mobile-nav-panel ul a[href="blog.html"]              { --nav-accent: #ba4a85; }

.site-header .site-nav-link:hover,
.site-header .site-nav-link[aria-current="page"],
.home-page .site-header:not(.nav-new) .site-nav-link:hover,
.home-page .site-header:not(.nav-new) .site-nav-link[aria-current="page"] {
  color: var(--nav-accent);
  font-weight: 700;
}
.mobile-nav-panel ul a:hover,
.mobile-nav-panel ul a[aria-current="page"] {
  color: var(--nav-accent) !important;
  font-weight: 700;
}
/* les anciennes regles de survol, une par page, sont supprimees plus haut :
   elles etaient plus specifiques et gardaient la main sur la couleur */


/* --- frise, sous 992 px : annees recentrees et section allegee ------------
   Les annees sortaient de la barre : la barre est positionnee dans la boite
   de la frise, les annees dans celle de leur etape, qui commence apres le
   retrait gauche de 24 px — elles etaient donc decalees d'autant. Le retrait
   devient une variable, retranchee de la position des annees.
   Au passage la barre s'affine (76 px au lieu de 92), les carres de couleur
   se reduisent (60 px au lieu de 72) et l'ecart entre deux fiches passe de
   18 a 30 px : la section respire. */
@media (max-width: 991px) {
  .parcours {
    --frise-pad: 22px;
    --frise-barre: 76px;
    --frise-carre: 60px;
    padding: 26px 0 26px var(--frise-pad);
    row-gap: 30px;
  }
  .parcours-etape {
    min-height: 92px;
  }
  .parcours-etape:nth-child(odd)::before,
  .parcours-etape:nth-child(even)::before {
    right: -10px;
    top: -10px;
  }
  .parcours-annee {
    left: calc(var(--frise-barre) / 2 - var(--frise-pad));
    font-size: 1.375rem;
  }
  .parcours-etape:nth-child(odd) .parcours-carte,
  .parcours-etape:nth-child(even) .parcours-carte {
    padding: 1.15rem 1.35rem 1.15rem calc(var(--frise-barre) + 16px);
  }
}


/* --- mobile : les tuiles des trois leviers, visuels dedies ----------------
   Le sujet occupait une petite part de son fichier : pose en entier il
   paraissait minuscule. Chaque tuile a desormais son propre visuel mobile,
   ou le sujet est detoure et remis a l'echelle sur un fond reconstruit a
   partir du degrade d'origine. Plus de couture a rattraper : l'image est
   posee plein cadre, et la tuile se raccourcit encore (2:1, soit 195 px de
   haut sur un ecran de 390 au lieu de 219). */
@media (max-width: 639px) {
  .home-levier--ads,
  .home-levier--nexio,
  .home-levier--datapro {
    aspect-ratio: 2 / 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .home-levier--ads     { background-image: url(/assets/agryco/homepage/levier-ads-mobile-a21c73c3edd61586ae6f22188710bc93904d21ec0685bd3305a6dc8b74b8e2d2.png); }
  .home-levier--datapro { background-image: url(/assets/agryco/homepage/levier-datapro-mobile-b6683b9a7e50aa85e052a29fd0abf0785578de6a2d1a4be0a7f958496594760d.png); }
  .home-levier--nexio   { background-image: url(/assets/agryco/homepage/levier-nexio-mobile-fabd08cee57e932168b7a69b5246cfa3b6243c394ebc8c019d8c70ba566c0d7a.png); }
  
  .home-levier--nexio:lang(en) {
    background-image: url(/assets/agryco/homepage/levier-nexio-mobile-en-69b60554fc5b327868df7dc91aab8e3981ab30de13cbbeda86f57d870a7ebd8b.png);
  }
  
  .home-levier--nexio:lang(de) {
    background-image: url(/assets/agryco/homepage/levier-nexio-mobile-de-2a5e72c3a36685982b5e1435be7d047be9afd8dc836e9569654b445d8cc16bed.png);
  }
  
  .home-levier--nexio:lang(es) {
    background-image: url(/assets/agryco/homepage/levier-nexio-mobile-es-2b9abaa2dc7edfd74f980116248cd9c0279d7f221a2e7800358e10e4ce58c9d1.png);
  }
  
  .home-levier--nexio:lang(it) {
    background-image: url(/assets/agryco/homepage/levier-nexio-mobile-it-41536d97c11a65aec9f92204421fc961e973491d52fd611c4a32c77d858353fa.png);
  }
  
  .home-levier--nexio:lang(pt) {
    background-image: url(/assets/agryco/homepage/levier-nexio-mobile-pt-a9dcc3b15ca34330efbafcb00af4fc58eedc2d0df7df01038bfc43c305f64750.png);
  }
  
}

/* En mobile (sous 640 px) les encoches disparaissent partout : celle du haut
   a gauche de « Faisons grandir » suit la regle. Elle reste en tablette et
   au-dela. L'angle redevient rond et le contenu n'a plus a lui reserver de
   place. */
@media (max-width: 639px) {
  .home-contact-card > .encoche-calque {
    display: none;
  }
  .home-contact-card {
    border-radius: 28px;
  }
  .home-contact-inner {
    padding-top: clamp(2.9rem, 5.4vw, 4.9rem);
  }
}

/* --- « Foule contact » en grand ecran : le CTA se rapproche et s'elargit ---
   Il etait a 76 px du dernier paragraphe et n'avait que la largeur de son
   libelle : l'ecart tombe a 32 px et le bouton prend 280 px au minimum. */
@media (min-width: 992px) {
  /* les 40 px de gouttiere entre les deux rangees s'ajoutaient a la marge du
     bouton : la gouttiere disparait, seul le retrait du bouton compte */
  #foule-contact .foule-layout {
    row-gap: 0;
  }
  #foule-contact .foule-actions {
    margin-top: 2rem;
  }
  #foule-contact .brand-primary-button {
    min-width: 280px;
  }
}


/* --- ecosysteme : les carres ne sont plus coupes aux extremites -----------
   La visionneuse du carrousel rogne ce qui depasse : le carre pose sur la
   derniere jonction visible etait coupe en deux par le bord. Elle reserve
   donc 34 px de chaque cote, repris en marge negative pour que les cartes
   gardent exactement leur place ; la section clippe le debord pour qu'il ne
   cree pas de defilement horizontal. */



/* --- retour aux codes exacts de la palette --------------------------------
   Le vert fonce, le rose et le violet avaient ete assombris de 2 a 4 % pour
   franchir 4,5:1 sur fond clair. Ce sont les codes de la charte qui font foi :
   #008E82, #DB235F et #BA4A85, partout — banniere d'Agryco Ads, surtitres de
   section et couleurs de menu. Contrastes sur blanc : vert 4,26 · rose 4,75 ·
   violet 4,77 (le vert passe donc juste sous le seuil AA pour du petit texte,
   c'est un choix de charte). */
:root {
  --kicker-rose: #db235f;
  --kicker-vert: #008e82;
  --kicker-violet: #ba4a85;
}
/* seule la banniere verte est concernee : posee sur `.ads-hero-v2`, la
   valeur ecrasait celles des variantes rose, bleue et jaune, qui sont
   declarees plus haut dans la feuille */
.ads-hero-v2--vert {
  --banniere-fond: #008e82;
}
.site-header .site-nav-link[href="agryco-ads.html"],
.mobile-nav-panel ul a[href="agryco-ads.html"] {
  --nav-accent: #008e82;
}


/* --- mobile : les titres de section ne gardent pas leurs coupures forcees --
   Les <br /> places pour tenir la maquette en grand ecran s'ajoutaient aux
   retours naturels : « Boostez votre marque... » tombait sur sept lignes a
   40 px dans 360 px de large. En mobile les coupures sont ignorees et le
   corps descend d'un cran. */
@media (max-width: 639px) {
  .page-section-heading h2 br {
    display: none;
  }
  .page-section-heading h2 {
    font-size: clamp(26px, 7.4vw, 40px);
  }
}

/* --- « Offre découverte » sur petit ecran : la tete passe au-dessus du CTA -
   Le sujet s'arretait juste sous le bouton, ce qui donnait l'impression
   d'une image coupee. Il grandit assez pour que le visage emerge. */
@media (max-width: 575px) {
  .home-discovery-person {
    height: 300px;
    max-width: 68%;
  }
}


/* ==========================================================================
   Les encoches restent jusqu'au telephone
   Elles etaient coupees des 992 ou 1024 px, c'est-a-dire des que les blocs
   s'empilent — alors qu'en tablette il y a largement la place. Elles sont
   donc retablies au-dessus de 640 px, a une taille reduite adaptee a
   l'empilement, et ne disparaissent plus qu'en mobile.
   ========================================================================== */
@media (min-width: 640px) {
  .home-discovery-card::before,
  .home-discovery-card::after,
  .home-contact-card::before,
  .home-contact-card::after,
  .home-contact-action::before,
  .home-contact-action::after,
  .ads-page .ads-store-layout figure::before,
  .ads-page .ads-store-layout figure::after,
  .ads-page .ads-rocket-card::before,
  .ads-page .ads-rocket-card::after,
  .equipe-photo::before,
  .equipe-photo::after,
  #emploi .ads-store-layout figure::before,
  #emploi .ads-store-layout figure::after,
  #tuto .ads-store-layout figure::before,
  #tuto .ads-store-layout figure::after,
  .marque-bloc::before,
  .marque-bloc::after {
    content: "";
  }
  .marque-bloc .encoche-calque,
  .home-contact-card > .encoche-calque,
  .ads-page .ads-rocket-card > .encoche-calque {
    display: block;
  }
}
/* dimensions de tablette : le pan se resserre pour ne pas mordre le contenu
   une fois les blocs empiles */
@media (min-width: 640px) and (max-width: 1023px) {
  .home-discovery-card,
  .home-contact-card,
  .ads-page .ads-store-layout figure,
  .ads-page .ads-rocket-card,
  .equipe-photo,
  #emploi .ads-store-layout figure,
  #tuto .ads-store-layout figure,
  .marque-bloc {
    --encoche-l: 108px;
    --encoche-h: 76px;
    --encoche-r: 20px;
  }
  .home-contact-card > .encoche-calque,
  .ads-page .ads-rocket-card > .encoche-calque,
  .marque-bloc .encoche-calque {
    --encoche-l: 86px;
    --encoche-h: 60px;
    --encoche-r: 16px;
  }
  /* les angles qui portent un pan perdent leur rayon, sinon le trace de
     l'ancien arrondi reapparait dans la decoupe */
  .home-contact-card {
    border-radius: 0 28px 28px 28px;
  }
}



/* --- ajustements de tablette ---------------------------------------------
   1. « Agryco Store » : le cadre image passait en 4/3, ce qui donnait un
      visuel enorme une fois empile. Il s'aplatit et l'image, posee a droite
      sans etre rognee, laisse voir le fond rose du cadre.
   2. « Foule contact » : le texte et son CTA restent a cote de la roue
      jusqu'a 768 px au lieu de 992 — l'entre-deux empile n'avait pas de sens
      tant que la place existe.
   3. Les logos de l'ecosysteme descendent d'un cran : a 70 px ils ecrasaient
      les cartes. */
@media (max-width: 991px) {
  .ads-page .ads-store-section:not(#foule-contact):not(#tuto):not(#emploi) .ads-store-layout figure {
    aspect-ratio: 16 / 9;
  }
  .ads-page .ads-store-section:not(#foule-contact):not(#tuto):not(#emploi) .ads-store-layout figure img {
    object-fit: contain;
    object-position: right center;
    padding: 18px 0 18px 24px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  #foule-contact .foule-layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }
  #foule-contact .foule-texte   { grid-row: 1; grid-column: 1; align-self: end; }
  #foule-contact .foule-actions { grid-row: 2; grid-column: 1; align-self: start; margin-top: 1.75rem; }
  #foule-contact .foule-visuel  { grid-row: 1 / 3; grid-column: 2; width: min(100%, 660px); }
  #foule-contact .foule-layout  { align-content: center; row-gap: 0; }
}
.ads-page .ads-media-carousel--ecosysteme .ads-media-logo {
  height: 58px;
}


/* --- bannieres des pages internes : meme hauteur partout ------------------
   Les quatre bandeaux mesuraient 677, 720, 763 et 795 px, l'ecart venant des
   titres qui passaient sur deux lignes et de la longueur des chapeaux. La
   colonne de texte s'elargit de 740 a 880 px — « Data Pro Solutions » demande
   842 px sur une ligne, « À propos de nous » 765 — et le cadre prend une
   hauteur commune, le contenu restant centre dedans. La reserve pour la carte
   de l'encoche passe de 315 a 300 px, ce qui laisse encore 200 px de jeu. */
@media (min-width: 1024px) {
  .ads-hero-v2 .home-hero-content > div {
    max-width: min(880px, calc(100% - 300px));
  }
  .ads-hero-v2 h1 {
    max-width: none;
  }
  .ads-hero-v2 .home-hero-shell {
    min-height: 560px;
  }
  .ads-hero-v2 .home-hero-layout {
    min-height: inherit;
  }
}


/* --- « Visibilité » : le titre vraiment cale a droite ---------------------
   Le pave heritait du gabarit des titres de section : une boite de 850 px
   centree. Le texte etait bien aligne a droite, mais a droite de sa boite,
   qui s'arretait 300 px avant le bord. */
.duo-layout--texte-droite .duo-texte h2,
.duo-layout--texte-droite .duo-texte .page-kicker {
  max-width: none;
  margin-inline: 0;
  text-align: right;
}

/* --- carres de couleur derriere les pictos --------------------------------
   Meme principe que sur les cartes de l'ecosysteme : un carre arrondi passe
   derriere les blocs, a cheval sur leur arete haute. Il se pose sur le bord
   exterieur de chaque bloc — a gauche pour « Visibilité », a droite pour
   « CRM & data » — si bien que la serie commence par un carre a l'exterieur
   du premier bloc d'un cote, du dernier de l'autre. */
.duo-pictos {
  overflow: visible;
}
.duo-picto {
  position: relative;
}
.duo-picto::before {
  content: "";
  position: absolute;
  top: -24px;
  width: 64px;
  height: 64px;
  /* legerement rentre : a moitie deborde, le carre du bloc d'extremite
     sortait de 32 px alors que la page n'a que 30 px de marge */
  transform: translateX(-46%);
  border-radius: 20px;
  background: var(--carre-duo, var(--kicker-jaune));
  z-index: -1;                 /* derriere le fond blanc du bloc */
  pointer-events: none;
}
.duo-layout--texte-droite .duo-picto::before { left: 0; }
.duo-layout:not(.duo-layout--texte-droite) .duo-picto::before { left: 100%; }

/* Visibilité : jaune, violet, bleu, vert clair */
.duo-layout--texte-droite .duo-picto:nth-child(1) { --carre-duo: var(--kicker-jaune); }
.duo-layout--texte-droite .duo-picto:nth-child(2) { --carre-duo: #ba4a85; }
.duo-layout--texte-droite .duo-picto:nth-child(3) { --carre-duo: var(--color-accent-blue); }
.duo-layout--texte-droite .duo-picto:nth-child(4) { --carre-duo: var(--color-accent-green); }
/* CRM & data : les memes teintes dans un autre ordre, plus le vert fonce */
.duo-layout:not(.duo-layout--texte-droite) .duo-picto:nth-child(1) { --carre-duo: var(--color-accent-pink); }
.duo-layout:not(.duo-layout--texte-droite) .duo-picto:nth-child(2) { --carre-duo: var(--color-accent-teal); }
.duo-layout:not(.duo-layout--texte-droite) .duo-picto:nth-child(3) { --carre-duo: var(--kicker-jaune); }
.duo-layout:not(.duo-layout--texte-droite) .duo-picto:nth-child(4) { --carre-duo: #ba4a85; }

/* le carre du bloc d'extremite depasse la colonne : la section clippe le
   debord pour qu'il ne cree pas de defilement horizontal */
.page-section:has(.duo-layout) {
  overflow-x: clip;
}

/* Le carre est pose a `z-index: -1` : sans contexte d'empilement propre il
   passait derriere le fond blanc de la page et devenait invisible. La grille
   des pictos en ouvre un, transparent, ou il se glisse juste derriere les
   blocs. Et le pave de titre perd le plafond de largeur du gabarit, qui
   l'arretait 300 px avant le bord droit. */
.duo-pictos {
  position: relative;
  z-index: 0;
}
.duo-layout--texte-droite .duo-texte {
  max-width: none;
}


/* --- « Agryco Tuto » empile : la photo passe en tete ----------------------
   Le texte venait en premier et la creatrice se retrouvait tout en bas de la
   section, detachee. Les deux colonnes s'inversent, les rayons et les filets
   suivent, et le cadre jaune s'aplatit (16/9 au lieu de 3/2) — la creatrice
   restant calee sur son bord bas. */
@media (max-width: 991px) {
  #tuto .ads-store-layout figure {
    order: 1;
    aspect-ratio: 16 / 9;
    min-height: 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }
  #tuto .ads-store-copy {
    order: 2;
    border: 1px solid var(--color-border);
    border-top: 0;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
  }
}


/* --- « Rocket Inside » empile : le visuel garde une taille fixe -----------
   Sa largeur etait donnee en pourcentage : passe 500 px de large, l'image
   grandissait avec la carte (414 px de haut a 600 px de large) et repoussait
   le titre hors du premier ecran. Sa hauteur est desormais fixe, la largeur
   suit. */
@media (max-width: 767px) {
  .ads-page .ads-rocket-card picture {
    width: auto;
    max-width: 100%;
  }
  .ads-page .ads-rocket-card picture img {
    height: 260px;
    width: auto;
    max-width: 100%;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: left bottom;
  }
}

/* --- « Foule contact » empile : le CTA repasse au-dessus de la roue ------- */
@media (max-width: 767px) {
  #foule-contact .foule-actions { grid-row: 2; margin-top: 0.5rem; }
  #foule-contact .foule-visuel  { grid-row: 3; }
}

/* L'image du Store etait posee en absolu sur tout le cadre, avec un
   agrandissement de 6 % herite du grand ecran : elle le remplissait donc
   entierement. Une fois empile elle se rentre — calee a droite, sur 86 % de
   la largeur et avec un jeu haut et bas — ce qui laisse voir le fond rose du
   cadre, sans rien changer a sa hauteur. */
@media (max-width: 991px) {
  .ads-page .ads-store-section:not(#foule-contact):not(#tuto):not(#emploi) .ads-store-layout figure img {
    inset: 16px 0 16px auto;
    width: 86%;
    transform: none;
    padding: 0;
  }
}

/* Le cadre jaune se raccourcit encore (20/9 au lieu de 16/9) et la creatrice
   est calee sur son arete basse, sans le debord de 2,5 % qui la faisait
   depasser par le haut. */
@media (max-width: 991px) {
  #tuto .ads-store-layout figure {
    aspect-ratio: 20 / 9;
  }
  #tuto .ads-store-layout figure img {
    inset: auto 0 0 0;
    height: 100%;
    object-position: center bottom;
  }
}

/* Le cadre n'avait pas de rognage : l'image, posee en absolu, depassait le
   rayon et les angles hauts paraissaient carres. Il rogne donc son contenu,
   garde son arrondi en haut et reste droit en bas, ou la colonne de texte
   prend le relais. L'angle haut droit reste carre quand l'encoche y est
   active, c'est-a-dire au-dessus de 640 px. */
@media (max-width: 991px) {
  #tuto .ads-store-layout figure {
    overflow: clip;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }
}
@media (min-width: 640px) and (max-width: 991px) {
  #tuto .ads-store-layout figure {
    border-radius: var(--radius-card) 0 0 0;
  }
}

/* --- « Offre découverte » en mobile : bloc plus court ---------------------
   Le titre tenait 230 px a lui seul (six lignes a 40 px) : il descend d'un
   cran, la rangee reservee au personnage se resserre, et la carte perd
   environ 150 px sans que la creatrice change de taille. */
@media (max-width: 575px) {
  /* l'identifiant l'emporte sur la classe utilitaire qui porte le clamp */
  #discovery-title {
    font-size: clamp(28px, 7.8vw, 40px);
  }
  .home-discovery-card > .order-1 {
    padding: 26px 26px 20px;
  }
  .home-discovery-frame {
    min-height: 58px;
  }
}

/* Un seul carre par section, a l'exterieur de la serie : le jaune a gauche
   de « Référencement naturel » pour « Visibilité », le violet a droite de
   « Segmentation avancée » pour « CRM & data ». */
.duo-layout--texte-droite .duo-picto:not(:nth-child(1))::before,
.duo-layout:not(.duo-layout--texte-droite) .duo-picto:not(:nth-child(4))::before {
  content: none;
}

/* Les deux carres changent de teinte : bleu pour « Visibilité », vert clair
   pour « CRM & data ». */
.duo-layout--texte-droite .duo-picto:nth-child(1) { --carre-duo: var(--color-accent-blue); }
.duo-layout:not(.duo-layout--texte-droite) .duo-picto:nth-child(4) { --carre-duo: var(--color-accent-green); }

/* Les carres n'ont de sens que tant que les quatre blocs tiennent sur une
   seule ligne : ils disparaissent des que la grille passe a deux colonnes. */
@media (max-width: 991px) {
  .duo-picto::before {
    content: none;
  }
}

/* Les carres de couleur sont retires des cartes de l'ecosysteme media. */
.ads-media-carousel--ecosysteme [data-carousel-target="slide"]::before {
  content: none;
}

/* --- « Agryco Store » empile : cadre plus court, image pleine -------------
   Le cadre gardait 16/9 et l'image y etait rentree : trop de hauteur pour
   trop de vide. Il s'aplatit (21/9) et l'image le remplit entierement.
   Le selecteur reprend celui de la regle d'origine (deux `:not` porteurs
   d'identifiant), sans quoi elle garderait la main. */
@media (max-width: 991px) {
  .ads-page .ads-store-section:not(#foule-contact):not(#tuto):not(#emploi) .ads-store-layout figure {
    aspect-ratio: 21 / 9;
    overflow: clip;
  }
  .ads-page .ads-store-section:not(#foule-contact):not(#tuto):not(#emploi) .ads-store-layout figure img {
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    transform: none;
    object-fit: cover;
    object-position: center;
  }
}

/* --- « Offre découverte » en tablette : le sujet remonte ------------------
   Cale en bas, il n'occupait que la moitie basse de la carte et paraissait
   decroche du texte. Il grandit de 260 a 340 px et vient donc a hauteur du
   chapeau et du CTA, la rangee qui lui est reservee se resserrant d'autant.
   Le CTA reste devant lui. */
@media (min-width: 576px) and (max-width: 1023px) {
  .home-discovery-frame {
    min-height: 72px;
  }
  .home-discovery-person {
    height: 340px;
    max-width: 56%;
  }
}


/* --- Agryco Premium : les quatre leviers passent en cartes ----------------
   Ils etaient separes par de simples filets. Ils reprennent le gabarit des
   pictos de Data Pro — carte blanche, filet, rayon — avec un carre de
   couleur pose derriere l'angle haut gauche de chacun, et un espacement
   franc entre eux. */
.ads-page .ads-premium-grid {
  border-top: 0;
  gap: 28px;
  max-width: 1176px;
  position: relative;
  z-index: 0;
}
.ads-page .ads-premium-grid > div {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: #fff;
  border: 1px solid #343b451f;
  border-radius: 18px;
  padding: 2.25rem 1.25rem 2rem;
}
.ads-page .ads-premium-grid > div + div {
  border-left: 1px solid #343b451f;
}
.ads-page .ads-premium-grid img {
  width: auto;
  height: 84px;
  margin: 0 0 1.5rem;
}
.ads-page .ads-premium-grid h3 {
  font-family: var(--font-secondary);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5556;
  color: var(--color-secondary);
}
.ads-page .ads-premium-grid > div::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 0;
  width: 64px;
  height: 64px;
  transform: translateX(-46%);
  border-radius: 20px;
  background: var(--carre-premium, var(--kicker-jaune));
  z-index: -1;
  pointer-events: none;
}
.ads-page .ads-premium-grid > div:nth-child(1) { --carre-premium: var(--color-accent-blue); }
.ads-page .ads-premium-grid > div:nth-child(2) { --carre-premium: #ba4a85; }
.ads-page .ads-premium-grid > div:nth-child(3) { --carre-premium: var(--color-accent-pink); }
.ads-page .ads-premium-grid > div:nth-child(4) { --carre-premium: var(--color-accent-green); }
/* les carres n'ont de sens qu'en une seule ligne */
@media (max-width: 991px) {
  .ads-page .ads-premium-grid > div::before {
    content: none;
  }
}

/* --- « Agryco Store » rejoint les quatre leviers --------------------------
   Le bloc portait un cadre et un filet qui le detachaient de la section
   precedente, alors qu'il la prolonge. Le contour disparait, la photo est
   arrondie sur ses quatre angles — donc plus d'encoche — et la section se
   rapproche. */
.ads-page .ads-premium-section + .ads-store-section {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
.ads-page .ads-premium-section + .ads-store-section .ads-store-copy {
  border: 0;
  border-radius: 0;
  background: none;
}
.ads-page .ads-premium-section + .ads-store-section .ads-store-layout figure {
  border-radius: var(--radius-card);
  overflow: clip;
}
.ads-page .ads-premium-section + .ads-store-section .ads-store-layout figure::before,
.ads-page .ads-premium-section + .ads-store-section .ads-store-layout figure::after {
  content: none;
}


/* --- Data Pro : les deux carres changent encore de teinte ------------------ */
.duo-layout--texte-droite .duo-picto:nth-child(1) { --carre-duo: var(--color-accent-green); }
.duo-layout:not(.duo-layout--texte-droite) .duo-picto:nth-child(4) { --carre-duo: var(--kicker-jaune); }

/* --- Agryco Premium : corrections ----------------------------------------
   1. Les carres passaient DEVANT les cartes : chaque carte portait un
      `z-index`, ce qui en faisait un contexte d'empilement — le pseudo pose
      a -1 y restait et se peignait au-dessus du fond blanc. Les cartes n'en
      portent plus, le carre remonte donc dans le contexte de la grille et
      passe bien derriere.
   2. Il se pose du cote droit.
   3. Les cartes s'ecartent (44 px au lieu de 28) pour que le carre ne touche
      pas sa voisine, et les deux libelles longs passent sur deux lignes, ce
      qui permet des colonnes moins larges. */
.ads-page .ads-premium-grid {
  gap: 44px;
}
.ads-page .ads-premium-grid > div {
  z-index: auto;
}
.ads-page .ads-premium-grid > div::before {
  left: 100%;
  transform: translateX(-54%);
}
.ads-page .ads-premium-grid h3 {
  text-wrap: balance;
}

/* --- « Agryco Store » : la suite directe de « Boostez votre marque » ------
   Le contour revient, la photo retrouve une encoche, le titre passe en H3
   — il prolonge le titre de la section precedente — et le bloc se colle
   sous les quatre leviers, au meme ecart qu'entre eux (44 px). */
/* 44 px nets entre le bas des quatre cartes et le haut du bloc : la section
   Premium garde 100 px de retrait en pied, il faut donc les retrancher */
.ads-page .ads-premium-section + .ads-store-section {
  padding-top: 0;
  margin-top: -56px;
}
.ads-page .ads-premium-section + .ads-store-section .ads-store-copy {
  background: #fff;
  border: 1px solid var(--color-border);
  border-right: 0;
  border-radius: var(--radius-card) 0 0 var(--radius-card);
}
.ads-page .ads-premium-section + .ads-store-section .ads-store-layout figure {
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  --encoche-l: 132px;
  --encoche-h: 92px;
  --encoche-r: 24px;
}
.ads-page .ads-premium-section + .ads-store-section .ads-store-layout figure::before,
.ads-page .ads-premium-section + .ads-store-section .ads-store-layout figure::after {
  content: "";
}
/* le titre garde l'echelle d'un titre de bloc, en H3 */
.ads-page .ads-store-titre {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin: 0 0 1.25rem;
}

/* Les cartes portent l'animation d'apparition, donc un `transform` : chacune
   devenait un contexte d'empilement et le carre, pose a -1, y restait
   prisonnier — peint au-dessus du fond blanc, il paraissait devant. Ces
   quatre cartes renoncent a l'animation ; le carre remonte alors dans le
   contexte de la grille et passe derriere. */
.ads-page .ads-premium-grid > div {
  transform: none;
  opacity: 1;
}

/* la photo est agrandie de 6 % pour couvrir ses bords transparents : sans
   rognage elle debordait du cadre */
.ads-page .ads-premium-section + .ads-store-section .ads-store-layout figure {
  overflow: clip;
}


/* --- Agryco Premium : les carres disparaissent, le bloc Store s'aligne ----
   Les quatre leviers et « Agryco Store » forment un seul ensemble : meme
   largeur (1176 px, celle de la rangee de cartes) et meme ecart partout,
   44 px entre les cartes comme entre elles et le bloc. La colonne image du
   Store se resserre donc d'autant. */
.ads-page .ads-premium-grid > div::before {
  content: none;
}
.ads-page .ads-premium-section + .ads-store-section .ads-store-layout {
  max-width: 1176px;
  margin-inline: auto;
}


/* --- Agryco Premium : un seul ecart pour tout l'ensemble ------------------
   30 px entre les quatre cartes et sous elles en grand ecran, 20 px des que
   la rangee se replie. Les libelles reprennent une seule ligne tant que les
   quatre colonnes tiennent cote a cote ; leur coupure forcee ne sert qu'une
   fois empiles. */
@media (min-width: 992px) {
  .ads-page .ads-premium-grid {
    gap: 30px;
  }
  .ads-page .ads-premium-grid h3 br {
    display: none;
  }
}
@media (max-width: 991px) {
  .ads-page .ads-premium-grid {
    gap: 20px;
  }
}
/* le retrait de pied de la section Premium varie avec la largeur : il est
   annule, et c'est un retrait fixe sur la section suivante qui donne l'ecart,
   identique a celui qui separe les cartes */
/* uniquement quand le bloc « Agryco Store » suit immediatement : ailleurs
   (Data Pro, À propos) la section Premium doit garder son retrait de pied,
   sinon la section suivante se colle a elle */
.ads-page .ads-premium-section:has(+ .ads-store-section) {
  padding-bottom: 0;
}
/* l'ecart se mesure entre le bas des CARTES et le haut du bloc, pas entre le
   bas de la grille (plus bas de 20 px) : 30 px pleins */
.ads-page .ads-premium-section + .ads-store-section {
  margin-top: 0;
  padding-top: 30px;
}
/* le conteneur de la section porte lui aussi un retrait de 20 px en tete :
   il s'ajoutait au precedent */
.ads-page .ads-premium-section + .ads-store-section > .container-site {
  padding-top: 0;
  margin-top: 0;
}
.ads-page .ads-premium-section + .ads-store-section .ads-store-layout {
  margin-top: 0;
}
/* empile, la grille depasse sa derniere carte de 20 px : le retrait de la
   section tombe donc a zero pour que l'ecart visible reste de 20 px */
@media (max-width: 991px) {
  .ads-page .ads-premium-section + .ads-store-section {
    padding-top: 0;
  }
}


/* --- « Louez moins » : la photo decalee vers le bas -----------------------
   Le cartouche « 300 000+ » deborde de 56 px sous la photo ; celle-ci
   demarre donc 56 px sous le premier levier. Les deux decalages se
   repondent et dessinent la diagonale. La photo perd d'autant en hauteur. */
@media (min-width: 768px) {
  .ads-page .ads-direct-media {
    margin-top: 56px;
    /* une regle anterieure lui impose `height: 100%` : sans ce calcul elle
       gardait sa hauteur pleine et debordait simplement vers le bas */
    height: calc(100% - 56px);
  }
}


/* --- « Louez moins » : le chapeau s'aligne sur la photo -------------------
   Il etait plafonne a 980 px, sans rapport avec la largeur de l'image. Il
   reprend exactement celle de la colonne photo — la largeur restante une
   fois retiree la colonne des leviers et la gouttiere — et la rangee remonte
   pour se rapprocher du texte. */
@media (min-width: 768px) {
  .ads-page .ads-direct-heading > p:last-child {
    max-width: calc(100% - clamp(336px, 32%, 460px) - 12px);
  }
  /* le pave de titre etait lui-meme plafonne : le calcul du chapeau se
     faisait alors sur cette largeur reduite, pas sur celle de la section */
  .ads-page .ads-direct-heading {
    max-width: none;
    margin-bottom: 24px;
  }
}


/* --- Agryco Premium : logo sur fond blanc, texte aere --------------------
   Le logo etait pose sur un aplat jaune qui occupait toute la colonne. Il
   passe sur la version claire — lettrage gris fonce, panier jaune — sans
   fond, a une taille mesuree, et se cale en haut, sur la premiere ligne du
   paragraphe. Le texte respire davantage et le CTA reste sous lui. */
.ads-premium-section .ads-premium-intro {
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}
.ads-premium-section .ads-premium-intro .premium-logo {
  grid-area: 1 / 1;
  align-self: start;
  width: 100%;
  max-width: 300px;
  height: auto;
  min-height: 0;
  padding: 0;
  margin: 0;
  background: none;
  border-radius: 0;
  object-fit: contain;
}
.ads-premium-section .ads-premium-intro .premium-texte {
  grid-area: 1 / 2;
  display: block;
}
.ads-premium-section .ads-premium-intro .premium-texte p {
  margin: 0;
  padding: 0;
  font-size: 1.0625rem;
  line-height: 1.9;
}
.ads-premium-section .ads-premium-intro .premium-actions {
  margin-top: 2rem;
}


/* --- un ecart commun entre le chapeau d'une section et son contenu --------
   Releve sur la page : 40 px sous le titre d'Agryco Premium, 24 px sous le
   chapeau de « Louez moins », 80 px sous celui de l'ecosysteme. Les trois
   s'alignent sur 40 px. */
/* « Louez moins » : la photo demarre 56 px sous les leviers (la diagonale),
   son ecart au chapeau etait donc de 96 px. Les leviers remontent a 16 px du
   texte, ce qui ramene la photo a 72. */
@media (min-width: 768px) {
  .ads-page .ads-direct-heading {
    margin-bottom: 16px;
  }
}
.ads-media-carousel--ecosysteme {
  margin-top: 60px;
}
@media (max-width: 991px) {
  .ads-media-carousel--ecosysteme {
    margin-top: 40px;
  }
}
@media (max-width: 639px) {
  .ads-media-carousel--ecosysteme {
    margin-top: 28px;
  }
}
/* le pave de texte d'Agryco Premium gardait un retrait interieur : son bord
   gauche ne tombait pas sur celui de sa colonne */
.ads-premium-section .ads-premium-intro .premium-texte {
  padding: 0;
}

/* La diagonale se resserre : 40 px au lieu de 56 en haut comme en bas, ce
   qui ramene la photo a 56 px du chapeau. Le debord du cartouche etait de
   76 px alors qu'on lui en demandait 56 — la grille descend 20 px plus bas
   que la photo — d'ou le calage corrige. */
@media (min-width: 768px) {
  .ads-page .ads-direct-media {
    margin-top: 40px;
    height: calc(100% - 40px);
  }
  .ads-page .ads-direct-metric {
    bottom: -40px;
  }
}

/* Entre sections : 120 px seulement entre « Louez moins » et l'ecosysteme,
   contre 180 entre l'ecosysteme et Agryco Premium — d'ou l'impression que
   les deux premieres se touchent. Le cartouche debordant de 40 px sous la
   photo, le retrait de pied de la section est augmente d'autant. */
@media (min-width: 768px) {
  .ads-page .ads-direct-section {
    /* le cartouche descend 40 px sous la photo : le retrait de pied est
       augmente d'autant, pour le meme jour visible qu'ailleurs */
    padding-bottom: calc(var(--rythme-section) + 40px);
  }
}

/* --- Agryco Premium : la section respire ---------------------------------
   39 px entre le titre et le bloc logo + texte, 44 px entre ce bloc et les
   quatre cartes : les deux passent a 72 px. */
@media (min-width: 768px) {
  .ads-premium-section .page-section-heading {
    margin-bottom: 72px;
  }
  /* 20 px sont absorbes par la boite du bloc : la marge est majoree pour
     que l'ecart visible soit bien de 72 px */
  .ads-premium-section .ads-premium-intro {
    margin-bottom: 92px;
  }
}

/* La diagonale ayant change, la part du cartouche restee dans la photo passe
   a 124 px : l'encoche est recalculee dessus pour retrouver le meme jour de
   14 px en haut comme a droite. */
@media (min-width: 768px) {
  .ads-page .ads-direct-media {
    --encoche-l: 306px;
    --encoche-h: 138px;
  }
}


/* --- « Agryco Store » empile : contour et ecart --------------------------
   Le bloc gardait le contour du grand ecran — filet ouvert a droite, rayons
   du seul cote gauche — alors qu'empile c'est le bas qui s'ouvre sur la
   photo. Et il touchait les cartes du dessus. */
@media (max-width: 991px) {
  .ads-page .ads-premium-section + .ads-store-section .ads-store-copy {
    border: 1px solid var(--color-border);
    border-bottom: 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }
  .ads-page .ads-premium-section + .ads-store-section .ads-store-layout figure {
    border-radius: 0 0 var(--radius-card) var(--radius-card);
  }
  .ads-page .ads-premium-section + .ads-store-section {
    padding-top: 20px;
  }
}


/* --- « Foule contact » empile : CTA resserre, roue remontee ---------------
   Le CTA prenait toute la largeur et la roue restait loin en dessous. Il
   revient a sa largeur propre, cale a gauche, et la roue remonte a son
   niveau. */
@media (max-width: 767px) {
  #foule-contact .foule-actions {
    justify-content: flex-start;
    margin-top: 1.5rem;
  }
  #foule-contact .brand-primary-button {
    width: auto;
    min-width: 240px;
  }
  /* la roue remonte au niveau du CTA sans le recouvrir : le bouton reste
     devant, seul le carre bleu vient l'effleurer */
  #foule-contact .foule-visuel {
    margin-top: -36px;
    position: relative;
    z-index: 0;
  }
  #foule-contact .foule-actions {
    position: relative;
    z-index: 1;
  }
}


/* --- « Offre découverte » : le sujet ne passe plus jamais sur le texte ----
   Des que la carte s'empile, le paragraphe occupe toute la largeur : un
   sujet qui deborde vers le haut lui passe forcement dessus. La creatrice
   reste donc dans sa propre rangee, sous le texte, a une taille lisible. */
/* --- la photo reste A COTE du texte tant qu'il y a la place --------------
   Les deux colonnes ne demarraient qu'a 1024 px : en tablette la carte
   s'empilait alors qu'elle avait largement la largeur. Elles demarrent des
   768 px, et ce n'est qu'en dessous que la creatrice passe sous le texte. */
@media (min-width: 768px) {
  .home-discovery-card {
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  }
  .home-discovery-frame {
    min-height: 360px;
  }
  /* le sujet ne deborde plus de sa colonne : sans plafond de largeur il
     empietait sur les dernieres lignes du paragraphe */
  .home-discovery-person {
    height: 100%;
    max-width: 100%;
    object-position: right bottom;
    z-index: 1;
  }
}
@media (max-width: 767px) {
  .home-discovery-frame {
    min-height: 250px;
  }
  .home-discovery-person {
    height: 250px;
    max-width: 68%;
  }
}
@media (max-width: 575px) {
  .home-discovery-frame {
    min-height: 220px;
  }
  .home-discovery-person {
    height: 220px;
    max-width: 74%;
  }
}


/* --- en tablette, les angles qui portent une encoche perdent leur rayon ---
   Les encoches ont ete retablies jusqu'a 640 px, mais les blocs gardaient
   leur rayon sur ces angles : leur `overflow: hidden` rognait alors le pan
   le long de la courbe et laissait apparaitre le trace de l'ancien arrondi.
   Meme correctif que sur le bloc « Faisons grandir » de l'accueil. */
@media (min-width: 640px) and (max-width: 991px) {
  .ads-page .ads-rocket-card {
    border-top-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .ads-page .ads-store-layout figure {
    border-bottom-right-radius: 0;
  }
  .marque-bloc {
    border-top-left-radius: 0;
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .home-discovery-card {
    border-top-right-radius: 0;
  }
}

/* --- « Foule contact » : la roue ne touche plus le CTA -------------------
   Elle remontait jusqu'a passer sous le bouton. Elle s'arrete en dessous,
   avec un vrai jour entre les deux. */
@media (max-width: 767px) {
  #foule-contact .foule-visuel {
    margin-top: 16px;
    z-index: auto;
  }
  #foule-contact .foule-actions {
    z-index: auto;
  }
}


/* --- « Foule contact » en mobile : le CTA et la roue sur la meme ligne ----
   La roue passait sous le bouton, tout en bas. Ils partagent desormais la
   meme rangee — bouton a gauche, roue a droite, cales sur la meme hauteur.
   La roue deborde legerement du conteneur pour gagner en taille sans
   ecraser le bouton. */
@media (max-width: 767px) {
  #foule-contact .foule-layout {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
  }
  #foule-contact .foule-texte {
    grid-row: 1;
    grid-column: 1 / -1;
  }
  #foule-contact .foule-actions {
    grid-row: 2;
    grid-column: 1;
    align-self: center;
    margin-top: 0;
  }
  #foule-contact .brand-primary-button {
    min-width: 0;
    padding-inline: 1.25rem;
    white-space: nowrap;
  }
  #foule-contact .foule-visuel {
    grid-row: 2;
    grid-column: 2;
    justify-self: end;
    align-self: center;
    width: calc(100% + 24px);
    max-width: none;
    margin: 0 -24px 0 0;
  }
}

/* Une fois la carte empilee, l'encoche du haut a gauche tombe sur le titre :
   les deux encoches de Rocket Inside sont donc retirees sous 768 px, et
   l'angle retrouve son rayon. */
@media (max-width: 767px) {
  .ads-page .ads-rocket-card::before,
  .ads-page .ads-rocket-card::after {
    content: none;
  }
  .ads-page .ads-rocket-card > .encoche-calque {
    display: none;
  }
  .ads-page .ads-rocket-card {
    border-radius: 24px;
  }
}


/* --- Data Pro, « Visibilité » / « CRM & data » empiles --------------------
   104 px separaient le titre de son chapeau : la gouttiere de rangee de la
   grille s'ajoutait a la marge de bas du pave de titre. L'ecart tombe a
   24 px. Le chapeau de « Visibilité » suit son titre : cale a droite, sur
   une largeur qui le tient en deux ou trois lignes. */
@media (max-width: 991px) {
  .duo-layout {
    row-gap: 24px;
  }
  .duo-layout .duo-texte {
    margin-bottom: 0;
  }
  .duo-layout--texte-droite .duo-intro {
    max-width: 46ch;
    margin-left: auto;
    text-align: right;
  }
  .duo-layout:not(.duo-layout--texte-droite) .duo-intro {
    max-width: 46ch;
  }
}


/* --- « Agryco Store » : deux colonnes jusqu'a la tablette -----------------
   Le bloc s'empilait des 992 px alors que la largeur permettait encore la
   photo a cote du texte. Les deux colonnes tiennent jusqu'a 768 px ; en
   dessous seulement, la photo passe sous le texte, et son cadre s'y fait
   plus genereux (4/3 au lieu de 21/9) pour equilibrer le pave de texte. */
@media (min-width: 768px) and (max-width: 991px) {
  .ads-page .ads-premium-section + .ads-store-section .ads-store-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .ads-page .ads-premium-section + .ads-store-section .ads-store-copy {
    border: 1px solid var(--color-border);
    border-right: 0;
    border-radius: var(--radius-card) 0 0 var(--radius-card);
  }
  .ads-page .ads-premium-section + .ads-store-section .ads-store-layout figure {
    aspect-ratio: auto;
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    border-bottom-right-radius: 0;
  }
  .ads-page .ads-premium-section + .ads-store-section .ads-store-layout figure img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media (max-width: 767px) {
  .ads-page .ads-premium-section + .ads-store-section .ads-store-layout figure {
    aspect-ratio: 4 / 3;
  }
}

/* La regle generale du bloc Store porte deux `:not()` a identifiant, donc une
   specificite superieure : ces reglages la reprennent pour prendre effet. */
@media (min-width: 768px) and (max-width: 991px) {
  .ads-page .ads-store-section:not(#foule-contact):not(#tuto):not(#emploi) .ads-store-layout figure {
    aspect-ratio: auto;
    align-self: stretch;
  }
  .ads-page .ads-store-section:not(#foule-contact):not(#tuto):not(#emploi) .ads-store-layout figure img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}
@media (max-width: 767px) {
  .ads-page .ads-store-section:not(#foule-contact):not(#tuto):not(#emploi) .ads-store-layout figure {
    aspect-ratio: 4 / 3;
  }
}


/* ==========================================================================
   « Foule contact » : la roue dans un carre bleu
   --------------------------------------------------------------------------
   Les deux paves bleus decales derriere la roue etaient impossibles a tenir
   en responsive (ils se chevauchaient, la roue passait dessous ou dessus).
   Ils sont remplaces par un seul bloc bleu, traite comme les blocs image du
   site : rayon de panneau, encoche en bas a gauche, la roue centree dedans.
   ========================================================================== */
#foule-contact .foule-visuel {
  position: relative;
  aspect-ratio: 1 / 1;
  width: min(100%, 540px);
  max-width: none;
  justify-self: center;
  background: var(--color-accent-blue);
  border-radius: var(--radius-panel);
  /* l'angle qui porte l'encoche perd son rayon, sinon l'arc reste visible */
  border-bottom-left-radius: 0;
  --encoche-l: 130px;
  --encoche-h: 92px;
  --encoche-r: 24px;
}
/* la roue reste a l'interieur : son rayon est calcule pour ne pas mordre sur
   l'angle de l'encoche (130 x 92 sur un carre de 540 : le coin rentrant est a
   212 px du centre, la roue en fait 210). */
#foule-contact .foule-roue {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78%;
  height: auto;
  transform: translate(-50%, -50%);
  filter: none;
  z-index: 1;
}

/* Empile : surtitre, titre, texte, CTA, puis l'image. */
@media (max-width: 991px) {
  #foule-contact .foule-layout {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 0;
    align-content: start;
  }
  #foule-contact .foule-texte {
    grid-row: 1;
    grid-column: 1;
    align-self: start;
  }
  #foule-contact .foule-actions {
    grid-row: 2;
    grid-column: 1;
    justify-content: flex-start;
    align-self: start;
    margin-top: 2rem;
    z-index: auto;
  }
  #foule-contact .foule-visuel {
    grid-row: 3;
    grid-column: 1;
    justify-self: center;
    width: min(100%, 440px);
    margin: 2.5rem 0 0;
    z-index: auto;
  }
  #foule-contact .brand-primary-button {
    width: auto;
    min-width: 280px;
    text-align: center;
    white-space: normal;
    padding-inline: 2rem;
  }
}
@media (max-width: 575px) {
  #foule-contact .foule-actions {
    justify-content: stretch;
  }
  #foule-contact .brand-primary-button {
    width: 100%;
    min-width: 0;
  }
  #foule-contact .foule-visuel {
    width: 100%;
    margin-top: 2rem;
    --encoche-l: 100px;
    --encoche-h: 70px;
    --encoche-r: 18px;
  }
  #foule-contact .foule-roue {
    width: 72%;
  }
}


/* ==========================================================================
   Panneaux d'offres (Nexio) : double filet supprime, photo sous le texte
   --------------------------------------------------------------------------
   1. Le panneau porte un filet d'1 px et un rayon de 28 px ; le cadre image,
      pose 1 px a l'interieur, reprenait le meme rayon de 28 px. Les deux arcs
      ne sont alors pas concentriques et laissent un mince jour blanc : c'est
      le « double contour » visible dans les angles. Le rayon interieur passe
      a 27 px.
   2. Sous 992 px le panneau s'empile. L'image passait au-dessus du texte et
      l'encoche etait desactivee — les logos se retrouvaient alors poses sur
      le CTA. L'image repasse en bas, l'encoche revient avec elle, et les
      logos retrouvent leur place dans la decoupe, jusqu'au mobile.
   ========================================================================== */
.home-expertise-panel-media {
  border-radius: calc(var(--radius-panel) - 1px);
}
@media (min-width: 992px) {
  .home-expertise-panel-media {
    border-radius: calc(var(--radius-panel) - 1px) 0 0 calc(var(--radius-panel) - 1px);
  }
}
@media (max-width: 991px) {
  /* la photo passe en seconde ligne : seul son angle bas droit est arrondi,
     l'angle bas gauche reste carre puisque l'encoche s'y pose */
  .home-expertise-panel {
    grid-template-rows: auto auto;
  }
  .home-expertise-panel-copy {
    grid-row: 1;
  }
  .home-expertise-panel-media {
    grid-row: 2;
    border-radius: 0 0 calc(var(--radius-panel) - 1px) 0;
  }
  /* l'encoche revient : elle tombe desormais sur la photo, comme en grand
     ecran (la regle qui la neutralisait valait pour l'ancien empilement, ou
     le coin bas gauche etait le pave de texte) */
  .home-expertise-panel::before,
  .home-expertise-panel::after {
    content: "";
  }
  .panneau-logos {
    z-index: 4;
  }
}
@media (max-width: 575px) {
  #offre-panel-nexio,
  #offre-panel-prism,
  #offre-panel-palam {
    --logo-marge: 14px;
    --logo-a: 44px;
    --logo-gap: 12px;
    --encoche-r: 18px;
  }
  #offre-panel-nexio { --logo-marque: 54px; }
  #offre-panel-palam { --logo-marque: 70px; }
}


/* ==========================================================================
   « Notre promesse » (A propos) : logo a gauche, texte a droite
   --------------------------------------------------------------------------
   La grille de la section Premium (colonne etroite puis colonne large) est
   commune aux deux pages, mais ce bloc-ci y placait le logo dans la colonne
   large et le texte dans l'etroite : le paragraphe tombait a 300 px de large
   et le logo s'etirait. On reprend la repartition de la section Nexio — le
   logo Agryco Services cale en haut a gauche, le titre et le texte a droite
   sur toute la largeur restante.
   ========================================================================== */
@media (min-width: 768px) {
  .ads-premium-intro .promesse-logo {
    grid-area: 1 / 1;
    align-self: start;
  }
  .ads-premium-intro > div:last-child {
    grid-area: 1 / 2;
  }
  .ads-premium-intro .promesse-logo img {
    max-width: 260px;
  }
}


/* ==========================================================================
   Roue « Foule contact » agrandie, CTA pleine largeur en mobile
   --------------------------------------------------------------------------
   1. La roue gagne 10 points de largeur. Son centre remonte et se decale a
      droite pour qu'elle ne morde pas sur l'angle rentrant de l'encoche :
      sur un carre de 540, le coin de la decoupe (130 x 92) est a 249 px du
      nouveau centre, la roue en fait 238.
   2. En mobile, le bouton flottant « Contactez-nous » et le CTA « Visiter
      dataprosolutions.fr » prennent toute la largeur de leur bloc, marges
      comprises : le premier se cale sur la gouttiere de page (15 px), le
      second sur le retrait interieur du bloc de marque.
   ========================================================================== */
#foule-contact .foule-roue {
  left: 53%;
  top: 47%;
  width: 88%;
}
@media (max-width: 575px) {
  #foule-contact .foule-visuel {
    --encoche-l: 92px;
    --encoche-h: 64px;
    --encoche-r: 16px;
  }
  #foule-contact .foule-roue {
    width: 88%;
  }
}

@media (max-width: 767px) {
  /* le bouton etait a 80 % de la page et centre : il s'etend d'une gouttiere
     a l'autre, comme les blocs de contenu */
  .site-floating-contact {
    width: auto;
  }
  .marque-actions {
    display: block;
  }
  .marque-cta {
    display: flex;
    width: 100%;
    min-width: 0;
  }
}


/* ==========================================================================
   Mobile : tous les CTA prennent toute la largeur de leur conteneur
   --------------------------------------------------------------------------
   Regle unique pour l'ensemble du site — bouton principal, CTA a contour,
   pastilles de telechargement, « Voir l'article » : sous 768 px ils occupent
   toute la largeur du bloc qui les porte (ou de la colonne de texte quand il
   n'y a pas de bloc), en conservant le retrait interieur de ce bloc.
   Les conteneurs qui les alignaient en ligne passent en colonne, sinon deux
   boutons pleine largeur se partageraient la rangee.
   Le bouton flottant « Contactez-nous » n'est pas dans la liste : il est en
   position fixe, il se cale sur la gouttiere de page (15 px) en liberant sa
   largeur.
   ========================================================================== */
@media (max-width: 767px) {
  .brand-primary-button,
  .page-primary-button,
  .cta-secondaire,
  .marque-cta,
  .blog-cta-pill,
  .agryco-submit,
  .home-hero-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: none;
    text-align: center;
  }
  .home-hero-actions,
  .home-contact-actions,
  .home-expertise-panel-actions,
  .premium-actions,
  .marque-actions,
  .foule-actions,
  .ads-premium-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .site-floating-contact {
    width: auto;
  }
}


/* ==========================================================================
   « Trois dispositifs » : un seul filet, et de l'air sous les onglets
   --------------------------------------------------------------------------
   Le pave de texte heritait d'un filet ecrit pour l'ancienne version des
   panneaux (`[role="tabpanel"] > div`), pose a angles vifs a l'interieur du
   filet arrondi du panneau : d'ou le double contour. Le cadre image l'avait
   deja perdu, le pave de texte le perd a son tour — seul reste le contour du
   panneau, avec son rayon et son encoche.
   Les onglets n'etaient qu'a 16 px du panneau : l'ecart passe a 40 px.
   ========================================================================== */
#offres-nexio .home-expertise-panel-copy {
  border: 0;
}
#offres-nexio .home-expertise-panels {
  margin-top: 40px;
}
@media (max-width: 767px) {
  #offres-nexio .home-expertise-panels {
    margin-top: 24px;
  }
}


/* ==========================================================================
   Agryco Premium / Notre promesse : une seule colonne en mobile
   --------------------------------------------------------------------------
   La grille « logo | texte » etait posee sans palier : sous 768 px le logo
   gardait ses 300 px et la colonne de texte tombait a 20 px de large (le CTA
   debordait de son bloc). Le bloc s'empile, logo puis texte.
   ========================================================================== */
@media (max-width: 767px) {
  .ads-premium-section .ads-premium-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }
  .ads-premium-section .ads-premium-intro .premium-logo,
  .ads-premium-intro .promesse-logo {
    grid-area: 1 / 1;
    max-width: 240px;
  }
  .ads-premium-section .ads-premium-intro .premium-texte,
  .ads-premium-intro > div:last-child {
    grid-area: 2 / 1;
  }
}


/* ==========================================================================
   Frise mobile : carres moins ronds, fiches resserrees, texte plus pres
   --------------------------------------------------------------------------
   Le rayon des carres de couleur etait fige a 28 px : sur le carre de 96 px
   du grand ecran il donne un angle franc, mais sur celui de 60 px du mobile
   il en faisait presque un cercle. Il se calcule desormais sur le cote du
   carre (29 %, le rapport du grand ecran), et suit donc toutes les tailles.
   L'ecart entre deux fiches passe de 30 a 22 px, et le texte demarre a 30 px
   du bord de la barre jaune au lieu de 38 : une ligne de moins par fiche.
   ========================================================================== */
.parcours-etape::before {
  border-radius: calc(var(--frise-carre) * 0.29);
}
@media (max-width: 991px) {
  .parcours {
    row-gap: 22px;
  }
  .parcours-etape:nth-child(odd) .parcours-carte,
  .parcours-etape:nth-child(even) .parcours-carte {
    padding-left: calc(var(--frise-barre) + 8px);
  }
}


/* ==========================================================================
   « Notre promesse » en mobile : texte pleine largeur, logo dessous
   --------------------------------------------------------------------------
   Le logo Agryco Services passait au-dessus du texte et restait petit. Il
   descend sous le paragraphe, ou il a la place d'etre plus grand, et le
   texte occupe toute la largeur du bloc.
   ========================================================================== */
@media (max-width: 767px) {
  .ads-premium-intro > div:last-child {
    grid-area: 1 / 1;
  }
  .ads-premium-intro .promesse-logo {
    grid-area: 2 / 1;
    max-width: none;
  }
  .ads-premium-intro .promesse-logo img {
    width: 100%;
    max-width: 300px;
  }
}


/* ==========================================================================
   « Boostez votre marque… » : quatre lignes en mobile, section centree
   --------------------------------------------------------------------------
   Le titre tombait sur cinq lignes : les coupures du grand ecran sont
   masquees en mobile (regle generale des titres de section) et le texte se
   repartissait librement. Il porte desormais deux jeux de coupures — trois
   lignes en grand ecran, quatre en mobile — sans toucher au corps du titre.
   L'espace est ecrit AVANT chaque <br> : masque, il disparait avec lui et les
   deux mots se colleraient sinon.
   Le titre etant centre, le bloc logo + texte + CTA se centre aussi en
   mobile, ou il est de toute facon empile.
   ========================================================================== */
#premium-title .br-mob {
  display: none;
}
@media (max-width: 639px) {
  /* annule le masquage general des coupures pour ce titre */
  #premium-title br {
    display: inline;
  }
  #premium-title .br-desk {
    display: none;
  }
  #premium-title .br-mob {
    display: inline;
  }
}
/* uniquement la section d'Agryco Ads : « Notre promesse », sur la page A
   propos, garde son texte au fer a gauche */
@media (max-width: 767px) {
  .ads-premium-section:has(#premium-title) .ads-premium-intro {
    justify-items: center;
    text-align: center;
  }
  .ads-premium-section:has(#premium-title) .ads-premium-intro .premium-texte {
    text-align: center;
  }
}


/* ==========================================================================
   « Foule contact » : la roue remplit le carre bleu
   --------------------------------------------------------------------------
   Elle etait calee sur un rayon calcule pour eviter l'angle de l'encoche.
   Elle occupe maintenant tout le bloc, centree, avec 30 px de jour sur les
   quatre cotes — en grand ecran comme en responsive. L'encoche passe devant
   (z-index 2 contre 1) et mord donc legerement dessus : c'est assume.
   ========================================================================== */
#foule-contact .foule-roue {
  inset: 30px;
  left: 30px;
  top: 30px;
  width: calc(100% - 60px);
  height: calc(100% - 60px);
  object-fit: contain;
  transform: none;
}


/* ==========================================================================
   Correctifs mobile : titre Premium, contour des panneaux, logos, photos
   ========================================================================== */

/* « Boostez votre marque… » : « BOOSTEZ VOTRE MARQUE » ne tenait pas sur une
   ligne a 28,9 px dans 360 px (356 px de texte + l'espace), le titre repassait
   a cinq lignes malgre les coupures. Le corps descend d'un cran. */
@media (max-width: 639px) {
  #premium-title {
    font-size: clamp(22px, 6.6vw, 40px);
  }
}

/* Panneaux d'offres : le contour se referme dans les angles.
   Le pave de texte portait un aplat blanc a angles vifs (herite de la regle
   `[role="tabpanel"] > div`). Pose dans la boite de contenu du panneau, il
   recouvrait l'arc de la bordure arrondie : d'ou les angles « sans rayon »,
   en haut en mobile et a droite en grand ecran. Le panneau etant deja blanc,
   cet aplat n'a plus lieu d'etre. */
#offres-nexio .home-expertise-panel-copy {
  background: none;
}

/* Les logos dans l'encoche : un cran plus petits en mobile — le pan occupait
   136 px sur une carte de 360. */
@media (max-width: 575px) {
  #offre-panel-nexio,
  #offre-panel-prism,
  #offre-panel-palam {
    --logo-marge: 12px;
    --logo-a: 36px;
    --logo-gap: 10px;
    --encoche-r: 16px;
  }
  #offre-panel-nexio { --logo-marque: 44px; }
  #offre-panel-palam { --logo-marque: 58px; }
}

/* « Notre promesse » : le logo, passe sous le texte, se cale a droite. */
@media (max-width: 767px) {
  .ads-premium-intro .promesse-logo {
    justify-self: end;
    text-align: right;
  }
  .ads-premium-intro .promesse-logo img {
    margin-left: auto;
  }
}

/* « Rejoignez-nous » : la tete etait coupee.
   Le sujet etait cale sur le bas du cadre et debordait donc par le haut. Une
   fois le bloc empile, l'image remplit exactement le cadre et c'est le bas du
   buste qui se recadre : le visage reste entier. Elle reprend le rayon du
   cadre (celui-ci ne rogne pas, il doit laisser passer l'encoche) et repasse
   sous le pan, qui la recouvre donc a l'angle. */
/* Les regles du bloc « Agryco Store » (ecrites sur
   `.ads-store-section:not(#foule-contact):not(#tuto)`) attrapaient aussi ce
   bloc, qui est lui aussi une `.ads-store-section` : elles lui imposaient le
   4/3, le recadrage centre et le remplissage du cadre, en battant ses propres
   regles (deux `:not(#id)` = deux identifiants de specificite). Elles
   excluent desormais `#emploi`. */
@media (max-width: 991px) {
  #emploi .ads-store-layout figure {
    overflow: clip;
  }
  #emploi .ads-store-layout figure img {
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: cover;
    object-position: center top;
    z-index: 1;
  }
}

/* Banniere « À propos de nous » : la carte de l'encoche passe au violet et
   porte le logo Agryco Services en blanc et jaune (version fond sombre), a la
   place du logo Nexio Research. Le selecteur cible la seule banniere jaune du
   site, celle de cette page. */
/* le fond violet essaye un moment est revenu au gris de la charte */
.ads-hero-v2--jaune .ads-hero-info-logo {
  object-position: center;
}


/* ==========================================================================
   Une seule taille de CTA sur tout le site
   --------------------------------------------------------------------------
   Reference : « Envoyer ma demande » du formulaire — 58 px de haut, corps de
   16 px. Tout ce qui est un CTA s'y aligne : bouton principal, CTA a contour,
   pastilles de telechargement, « Voir l'article » (qui n'en faisait que 36),
   le bouton flottant du mobile et les liens fleches des bannieres.
   Deux exceptions, volontaires : le bouton du menu, qui doit tenir dans la
   barre de navigation sans changer la hauteur des en-tetes, et « Nous
   contacter » dans la carte de l'encoche des bannieres, qui est a part.
   ========================================================================== */
.brand-primary-button,
.page-primary-button,
.cta-secondaire,
.marque-cta,
.blog-cta-pill,
.agryco-submit,
.home-hero-secondary,
.site-floating-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding-block: 0;
  font-size: 1rem;
  line-height: 1.25;
}
.blog-cta-pill {
  padding-inline: 1.5rem;
}
/* le bouton de la barre de navigation garde sa taille */
.site-header .brand-primary-button {
  min-height: 44px;
  padding-block: 0.75rem;
  font-size: 0.875rem;
}
/* celui du menu burger reprend la taille commune, il en a la place */
.mobile-nav-panel .brand-primary-button {
  min-height: 58px;
  font-size: 1rem;
}
/* la carte de l'encoche des bannieres : laissee telle quelle */
.ads-hero-info-cta {
  min-height: 42px;
  padding-block: 0.6rem;
  font-size: 0.875rem;
}

/* Le bouton flottant s'affiche jusqu'a 1023 px : il prend la pleine largeur
   sur toute cette plage, pas seulement en mobile. */
@media (max-width: 1023px) {
  .site-floating-contact {
    width: auto;
  }
}

/* « Accéder aux offres » : son conteneur etait un element flex cale a gauche,
   donc reduit a la largeur du libelle — le bouton ne pouvait pas s'etendre.
   La colonne de texte laisse ses enfants s'etirer en mobile. */
@media (max-width: 767px) {
  .ads-store-copy {
    align-items: stretch;
  }
  .ads-store-copy .page-kicker,
  .ads-store-copy h2,
  .ads-store-copy p {
    align-self: flex-start;
  }
}

/* Logo Nexio Research de la section « Sciences comportementales » : il prenait
   320 px de large au milieu d'un cadre de 40 px de marge interne, soit presque
   toute la largeur de l'ecran en mobile. */
@media (max-width: 767px) {
  .nexio-logo-cadre {
    padding: 1rem;
  }
  .nexio-logo-cadre img {
    max-width: 150px;
  }
}

/* « Rejoignez-nous » : le sujet etait cadre trop pres. Il descend a 20 px du
   bord haut du bloc et perd un peu d'echelle, on voit donc plus de son buste ;
   le bas se recadre comme avant. */
@media (max-width: 991px) {
  #emploi .ads-store-layout figure img {
    inset: 20px 0 auto 0;
    width: 80%;
    height: auto;
    margin-inline: auto;
    object-fit: contain;
    object-position: center top;
  }
}

/* Le PNG est recadre sur le sujet (les 44 px de vide transparent en haut sont
   retires) : le debord de 7 % qui les compensait en grand ecran n'a plus lieu
   d'etre, et les 20 px du bord haut en mobile sont bien 20 px de vide. */
#emploi .ads-store-layout figure img {
  height: 100%;
}
@media (max-width: 991px) {
  #emploi .ads-store-layout figure img {
    height: auto;
  }
}


/* ==========================================================================
   Bouton flottant « Contactez-nous » : mobile uniquement, et le bandeau
   cookies au-dessus de lui
   --------------------------------------------------------------------------
   Le bouton s'affichait jusqu'a 1023 px (classe `max-lg:block`) : il est
   reserve au mobile. Et le bandeau de consentement tombait derriere lui — il
   etait a 16 px du bas, sous un bouton qui occupe la bande 40-98 px et passe
   devant (z-index 99 contre 50) : les boutons « Refuser » et « Accepter »
   n'etaient plus atteignables. Le bandeau remonte au-dessus du bouton et
   passe devant lui.
   ========================================================================== */
@media (min-width: 768px) {
  .site-floating-contact {
    display: none !important;
  }
  /* le bouton « remonter en haut » reprend sa place basse, il n'a plus de
     bouton flottant a eviter */
  #myBtn {
    bottom: 30px;
  }
}
@media (max-width: 767px) {
  [data-cookie-consent-target="banner"] {
    bottom: 110px;
    z-index: 100;
  }
}


/* ==========================================================================
   Bannieres de pages : meme hauteur a tous les paliers
   --------------------------------------------------------------------------
   Les CTA ayant quitte les bannieres (le « Nous contacter » de la carte les
   remplace), seule la longueur du chapeau decidait encore de la hauteur :
   sous 1024 px les quatre bannieres tombaient entre 366 et 480 px. Un
   plancher par palier les realigne, comme les 560 px du grand ecran.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .ads-hero-v2 .home-hero-shell {
    min-height: 500px;
  }
}
@media (max-width: 767px) {
  .ads-hero-v2 .home-hero-shell {
    min-height: 480px;
  }
}


/* ==========================================================================
   « Louez moins, ciblez mieux » : la photo a la hauteur des blocs
   --------------------------------------------------------------------------
   Elle etait decalee de 40 px vers le bas pour creer la diagonale : elle
   faisait donc 506 px contre 546 a la colonne Email / Print / Sponso. Les
   deux partent maintenant du meme bord haut. Le cartouche « 300 000+ »,
   lui, ne bouge pas : il est pose en absolu sur la grille, a 40 px sous son
   bord bas, et continue donc de deborder.
   ========================================================================== */
@media (min-width: 768px) {
  .ads-page .ads-direct-media {
    margin-top: 0;
    height: 100%;
  }
}


/* ==========================================================================
   Carte de l'encoche, page Data Pro : lettrage provisoire
   --------------------------------------------------------------------------
   Aucun fichier de logo « Data Pro Solutions » n'existe dans le projet (seuls
   Agryco Services, Agryco Ads et Nexio Research en ont un). En attendant le
   vrai logo, le nom est compose dans la typo d'affichage du site, blanc avec
   « Solutions » en jaune — comme le titre de la banniere juste a cote.
   Remplacer ce bloc par une <img class="ads-hero-info-logo"> le jour ou le
   fichier arrive.
   ========================================================================== */
.ads-hero-info-lettrage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(1.6rem, 2.2vw, 2.4rem);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #fff;
}
.ads-hero-info-lettrage span {
  color: var(--color-primary);
}


/* ==========================================================================
   Bannieres de pages : contenu equilibre dans la hauteur
   --------------------------------------------------------------------------
   Depuis le retrait des CTA, le bloc de texte restait cale en haut : 56 px
   au-dessus du surtitre contre 167 a 233 px sous le chapeau. La hauteur
   commune se resserre et le contenu se centre, l'air se repartit donc a
   parts egales en haut et en bas, sur les quatre pages.
   ========================================================================== */
@media (min-width: 1024px) {
  .ads-hero-v2 .home-hero-shell {
    min-height: 500px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ads-hero-v2 .home-hero-shell {
    min-height: 480px;
  }
}
@media (max-width: 767px) {
  .ads-hero-v2 .home-hero-shell {
    min-height: 520px;
  }
}
.ads-hero-v2 .home-hero-content {
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}
.ads-hero-v2 .home-hero-layout {
  padding-block: clamp(32px, 4vw, 56px);
}


/* ==========================================================================
   « Foule contact » en responsive : la roue juste sous le titre
   --------------------------------------------------------------------------
   L'ordre etait surtitre + titre + texte, puis le CTA, puis l'image. L'image
   remonte entre le titre et le texte. Le pave de texte passe en
   `display: contents` : ses trois elements deviennent des cases de la grille
   et peuvent donc s'intercaler avec l'image, sans toucher au HTML ni au
   grand ecran.
   ========================================================================== */
@media (max-width: 991px) {
  #foule-contact .foule-texte {
    display: contents;
  }
  #foule-contact .foule-texte .page-kicker {
    grid-row: 1;
    grid-column: 1;
  }
  #foule-contact .foule-texte h2 {
    grid-row: 2;
    grid-column: 1;
  }
  #foule-contact .foule-visuel {
    grid-row: 3;
    grid-column: 1;
    margin: 0.5rem 0 2rem;
  }
  #foule-contact .foule-texte > p:not(.page-kicker) {
    grid-row: 4;
    grid-column: 1;
    max-width: none;
  }
  #foule-contact .foule-actions {
    grid-row: 5;
    grid-column: 1;
  }
}


/* ==========================================================================
   Banniere de la page Ressources
   --------------------------------------------------------------------------
   Meme composition que les quatre autres pages — surtitre, filet, titre et
   chapeau — sur le violet de la palette. Elle n'a pas de carte d'encoche :
   le bandeau garde donc ses quatre angles arrondis et la colonne de texte
   n'a pas a lui reserver de place a droite.
   ========================================================================== */
.ads-hero-v2--violet {
  --banniere-fond: var(--kicker-violet);
}
/* la carte de l'encoche porte ici un libelle au lieu d'un logo : meme
   composition, le titre prend la place du visuel et se centre au-dessus du
   CTA. */
.ads-hero-info-titre {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
  color: #fff;
}

/* le logo Data Pro Solutions est un lettrage tres large et peu haut
   (500 x 46) : cale sur la largeur, il resterait minuscule en hauteur au
   milieu de la carte. Il occupe la largeur disponible, centre. */
.ads-hero-v2--rose .ads-hero-info-logo {
  width: 100%;
  max-width: 320px;
  height: auto;
  margin-inline: auto;
  /* centre dans l'espace libre au-dessus du CTA, au lieu de rester colle
     en haut de la carte */
  margin-block: auto;
  flex: 0 0 auto;
}


/* ==========================================================================
   « Boostez votre marque » : les quatre offres en carrousel
   --------------------------------------------------------------------------
   Les quatre cartes du haut ne sont plus decoratives : elles pilotent le
   carrousel (cibles `pagination` du controleur, qui leur pose `.active`). Le
   bloc « landing page de marque » devient le premier de quatre volets, un par
   offre, chacun avec sa teinte — rose, vert, bleu, violet — sur le fond du
   cadre image et sur le surtitre. La carte active prend la meme teinte en
   aplat ; les trois autres restent blanches.
   Le controleur enveloppe les deux sections : les cartes et les volets
   doivent etre dans le meme element `data-controller`, mais le selecteur
   `.ads-premium-section + .ads-store-section` continue de fonctionner, les
   deux sections restant voisines.
   ========================================================================== */
.premium-carrousel-visionneuse {
  overflow: hidden;
  max-width: 1176px;
  margin-inline: auto;
}
.premium-volet {
  min-width: 0;
}

/* teintes par offre */
.premium-volet--rose   { --offre-teinte: var(--kicker-rose); }
.premium-volet--vert   { --offre-teinte: var(--kicker-vert); }
.premium-volet--bleu   { --offre-teinte: var(--color-accent-blue); }
.premium-volet--violet { --offre-teinte: var(--kicker-violet); }

.premium-volet .ads-store-layout figure {
  background: var(--offre-teinte);
}
.premium-volet .ads-store-copy .page-kicker {
  color: var(--offre-teinte);
}

/* la carte pilote : curseur, transition, et aplat de la teinte quand elle est
   active. Les quatre couleurs suivent l'ordre des volets. */
.ads-page .ads-premium-grid > .premium-onglet {
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}
.ads-page .ads-premium-grid > .premium-onglet:nth-child(1) { --onglet-teinte: var(--kicker-rose); }
.ads-page .ads-premium-grid > .premium-onglet:nth-child(2) { --onglet-teinte: var(--kicker-vert); }
.ads-page .ads-premium-grid > .premium-onglet:nth-child(3) { --onglet-teinte: var(--color-accent-blue); }
.ads-page .ads-premium-grid > .premium-onglet:nth-child(4) { --onglet-teinte: var(--kicker-violet); }
.ads-page .ads-premium-grid > .premium-onglet.active {
  background: var(--onglet-teinte);
  border-color: var(--onglet-teinte);
}
.ads-page .ads-premium-grid > .premium-onglet.active h3 {
  color: #fff;
}
.ads-page .ads-premium-grid > .premium-onglet:focus-visible {
  outline: 2px solid var(--onglet-teinte);
  outline-offset: 4px;
}



/* ==========================================================================
   Les quatre cases pilotes en tablette et en mobile
   --------------------------------------------------------------------------
   Elles se repliaient en deux colonnes des 992 px et en une seule sous
   576 px : quatre paves enormes, alors que ce sont des boutons.
   - De 480 a 991 px elles restent sur UNE ligne : c'est la vignette et le
     libelle qui se reduisent, pas le nombre de colonnes.
   - Sous 480 px les quatre cases ne tiennent plus (65 a 82 px chacune, le mot
     « newsletters » ne rentre pas) : la rangee devient une bande defilante
     qui va d'un bord a l'autre de l'ecran, deux cases et demie visibles, avec
     calage au doigt. Le defilement automatique du carrousel y amene la case
     active (voir `carousel_controller.js`).
   Les filets herites de l'ancienne version sombre (bordures entre cases) sont
   neutralises dans les deux cas.
   ========================================================================== */
@media (min-width: 480px) and (max-width: 991px) {
  .ads-page .ads-premium-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(10px, 1.8vw, 20px);
  }
  .ads-page .ads-premium-grid > .premium-onglet {
    text-align: center;
    padding: clamp(1rem, 2.4vw, 1.75rem) clamp(0.5rem, 1.2vw, 1rem) clamp(0.9rem, 2vw, 1.5rem);
    border: 1px solid #343b451f !important;
  }
  .ads-page .ads-premium-grid img {
    height: clamp(48px, 7.2vw, 72px);
    margin: 0 auto clamp(0.75rem, 1.6vw, 1.25rem);
  }
  .ads-page .ads-premium-grid h3 {
    font-size: clamp(0.8125rem, 1.6vw, 1rem);
    line-height: 1.35;
  }
}

@media (max-width: 479px) {
  .ads-page .ads-premium-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* la bande file d'un bord a l'autre : elle annule la gouttiere de page
       puis la reprend en retrait interne, pour que la premiere case reste
       alignee sur le texte au-dessus */
    margin-inline: -15px;
    padding: 2px 15px 6px;
  }
  .ads-page .ads-premium-grid::-webkit-scrollbar {
    display: none;
  }
  .ads-page .ads-premium-grid > .premium-onglet {
    flex: 0 0 auto;
    width: 46%;
    min-width: 148px;
    scroll-snap-align: center;
    text-align: center;
    padding: 1.35rem 0.85rem 1.2rem;
    border: 1px solid #343b451f !important;
  }
  .ads-page .ads-premium-grid img {
    height: 60px;
    margin: 0 auto 0.9rem;
  }
  .ads-page .ads-premium-grid h3 {
    font-size: 0.9375rem;
    line-height: 1.35;
  }
}

/* survol des cases non actives : le meme gris que les onglets de la home et
   de « Trois dispositifs » (#343b450f). La case active garde son aplat. */
.ads-page .ads-premium-grid > .premium-onglet:not(.active):hover {
  background: #343b450f;
}

/* Les quatre volets a la meme hauteur : les cases du haut restant en place,
   un volet court faisait remonter le bas du bloc et le carrousel « sautait »
   a chaque rotation. Chaque volet remplit desormais la hauteur du plus grand
   (la piste du carrousel s'aligne deja sur lui) ; le texte reste centre dans
   sa colonne, avec le meme retrait de 56 px sur les quatre cotes. */
@media (min-width: 768px) {
  .premium-volet {
    display: flex;
  }
  .premium-volet > .ads-store-layout {
    flex: 1;
  }
}

/* Visuels des volets : ce sont des maquettes detourees, pas des photos
   pleines. Deux traitements.
   - Display : l'ordinateur ET le mobile doivent rester visibles, la maquette
     est donc posee en entier sur l'aplat, et se reduit avec le bloc.
   - Sponso : la tablette remplit le cadre, calee par le haut. Le bas file
     sous l'encoche, c'est assume ; le haut n'est jamais rogne. Le fichier est
     recadre sur l'appareil seul, son ombre portee ne s'affiche donc plus.
   Le selecteur reprend celui du bloc « Agryco Store » (deux `:not(#id)`, donc
   deux identifiants de specificite) : sans cela ses regles responsive
   imposaient `cover` des 992 px et coupaient le mobile du volet Display. */
.ads-page .ads-store-section:not(#foule-contact):not(#tuto):not(#emploi) .premium-volet--bleu .ads-store-layout figure img {
  object-fit: contain;
  object-position: center;
  padding: clamp(10px, 1.4vw, 22px);
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
}
.ads-page .ads-store-section:not(#foule-contact):not(#tuto):not(#emploi) .premium-volet--vert .ads-store-layout figure img {
  object-fit: cover;
  object-position: center top;
  padding: clamp(14px, 1.9vw, 30px) clamp(14px, 1.9vw, 30px) 0;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
}


/* ==========================================================================
   Reglages du 25 septembre
   ========================================================================== */

/* 1. Volet « Sponso de newsletters » : la tablette etait cadree trop serre.
   En `cover`, c'est la largeur de la boite de contenu qui pilote l'echelle
   (1200 x 1422 dans un cadre de 647 x 406 : 0,49 contre 0,29 en hauteur). Le
   retrait horizontal passe donc en pourcentage du cadre pour ramener
   l'echelle autour de 0,40 : environ 72 % de la hauteur de la tablette reste
   visible, contre 58 % avant, et l'appareil garde sa presence. */
.ads-page .ads-store-section:not(#foule-contact):not(#tuto):not(#emploi) .premium-volet--vert .ads-store-layout figure img {
  padding: clamp(14px, 1.9vw, 30px) 13% 0;
}

/* 2. « Foule contact » en responsive : des que l'image passe sous le titre,
   le bloc bleu prend toute la largeur. Un carre de 540 px centre au milieu
   d'une colonne de texte pleine largeur donnait un empilement bancal. La
   roue suit : elle est en `contain` avec 30 px de jour, elle se cale donc
   sur la plus petite dimension du bloc. */
@media (max-width: 991px) {
  #foule-contact .foule-visuel {
    width: 100%;
    max-width: none;
    justify-self: stretch;
    aspect-ratio: 4 / 3;
  }
}
@media (max-width: 560px) {
  #foule-contact .foule-visuel {
    aspect-ratio: 1 / 1;
  }
}

/* 3. Typographie : Belanosima est reservee aux gros titres. Le titre de la
   carte d'encoche et les titres des articles du blog passent en DM Sans
   gras, comme les surtitres. */
.ads-hero-info-titre {
  font-family: var(--font-secondary);
  font-weight: 700;
}

/* 4. Bannieres de pages : meme point de depart partout. Le bloc etait centre
   verticalement, donc le surtitre, le titre et le paragraphe tombaient a une
   hauteur differente selon la longueur du texte (81 px du haut sur Agryco Ads,
   113 px sur le blog). Le contenu est desormais cale a 80 px du haut, valeur
   fixee par la banniere la plus remplie : les quatre reperes sont alignes
   d'une page a l'autre et la hauteur de 500 px reste tenue. */
@media (min-width: 1024px) {
  .ads-hero-v2 .home-hero-content {
    justify-content: flex-start;
  }
  .ads-hero-v2 .home-hero-layout {
    padding-block: 80px;
  }
}

/* 5. Volet « Pack sur mesure » : la maquette (colis + tablette) est detouree,
   elle est donc traitee comme celle du volet Display — `contain`, centree,
   avec un jour reduit pour qu'elle occupe toute la hauteur du cadre. Le
   selecteur reprend les trois `:not(#id)` du bloc « Agryco Store », sans quoi
   ses regles responsive imposeraient `cover` des 992 px. */
.ads-page .ads-store-section:not(#foule-contact):not(#tuto):not(#emploi) .premium-volet--violet .ads-store-layout figure img {
  object-fit: contain;
  object-position: center;
  padding: clamp(8px, 1.1vw, 18px);
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
}

/* 6. « Foule contact » empile : le bloc pleine largeur devenait beaucoup trop
   haut (un carre de 868 px sur une tablette). Il est aplati — 16/10 en
   tablette, 4/3 en mobile. La roue reste en `contain` avec ses 30 px de jour :
   elle se cale sur la hauteur du bloc, rien n'est rogne. */
@media (max-width: 991px) {
  #foule-contact .foule-visuel {
    aspect-ratio: 16 / 10;
  }
}
@media (max-width: 560px) {
  #foule-contact .foule-visuel {
    aspect-ratio: 4 / 3;
  }
}

/* 7. « Nos expertises » : les listes a puces etaient en gris fonce
   (--color-secondary), plus sombres que les paragraphes qui les entourent.
   Elles reprennent la couleur du texte courant et passent en gras. Les puces
   gardent la teinte du panneau. */
.home-expertise-points {
  color: var(--color-muted);
  font-weight: 700;
}

/* 8. Bannieres de pages en mobile : 40 px de marge tout autour du texte. Le
   contenu etait centre dans une hauteur fixe de 520 px, ce qui donnait de 50
   a 120 px de vide selon la longueur du paragraphe, et 24 px seulement sur
   les cotes. Le pave est desormais cale en haut, la hauteur suit le texte. */
@media (max-width: 767px) {
  .ads-hero-v2 .home-hero-shell {
    min-height: 0;
  }
  .ads-hero-v2 .home-hero-layout {
    padding-block: 40px;
  }
  .ads-hero-v2 .home-hero-content {
    justify-content: flex-start;
    padding-inline: 40px;
  }
}

/* 9. « Campagnes Meta » : le titre etait pousse en bas de la carte
   (`margin-top: auto`), d'ou un ecart variable sous la vignette ronde. Les
   quatre titres partent maintenant du haut, a 18 px sous l'image. */
#expertises-dps .ads-touchpoint-card img {
  margin-bottom: 1.125rem;
}
#expertises-dps .ads-touchpoint-card h3 {
  margin: 0;
}
/* Avec 40 px de marge, la colonne de texte tombe a 280 px sur un ecran de
   390 : le titre a 42 px debordait (« PRO SOLUTIONS » demande 300 px). Il
   suit desormais la largeur de l'ecran sous 768 px. */
@media (max-width: 767px) {
  .ads-hero-v2 h1,
  .nexio-page .ads-hero-v2 h1 {
    font-size: clamp(22px, 8.2vw, 42px);
  }
}

/* ==========================================================================
   Contours et encoches en responsive
   ========================================================================== */

/* 10. Cartes « Campagnes Meta » : leur filet de gauche servait aussi de
   separateur de colonne, une regle generale le supprimait donc en `!important`
   sous 768 px. Une fois les cartes empilees, chacune s'ouvrait sur la gauche.
   Le contour est retabli sur les quatre cotes. */
@media (max-width: 767px) {
  #expertises-dps .ads-touchpoint-card,
  #expertises-dps .ads-touchpoint-card + .ads-touchpoint-card {
    border-left: 1px solid #343b451f !important;
  }
}

/* 11. Photo de « Marketing direct » : l'encoche ne s'affiche qu'a partir de
   640 px, mais l'angle bas-gauche gardait le rayon zero qu'elle impose — un
   coin carre sur trois coins arrondis. */
@media (max-width: 639px) {
  .ads-page .ads-direct-media {
    border-bottom-left-radius: var(--radius-card);
  }
}

/* 12. Volets du carrousel Agryco Premium (Agryco Store, Banner on top,
   Display, Pack sur mesure) : plus d'encoche en mobile. Une fois le bloc
   empile, la decoupe mordait sur la photo dans un angle deja arrondi. Le
   pan est retire et l'angle retrouve son rayon. */
@media (max-width: 767px) {
  .ads-page .ads-premium-section + .ads-store-section .ads-store-layout figure::before,
  .ads-page .ads-premium-section + .ads-store-section .ads-store-layout figure::after {
    content: none;
  }
  .ads-page .ads-premium-section + .ads-store-section .ads-store-layout figure {
    border-bottom-right-radius: var(--radius-card);
  }
}

/* 13. Volet « Pack sur mesure » : leger dezoom pour degager le mobile de
   l'angle bas-droit. L'echelle passe de 0,382 a 0,341, et le retrait est
   dissymetrique (plus de jour a droite et en bas) pour pousser la maquette
   vers le haut a gauche, a l'oppose de l'encoche. */
.ads-page .ads-store-section:not(#foule-contact):not(#tuto):not(#emploi) .premium-volet--violet .ads-store-layout figure img {
  padding: 34px 9% 34px 4%;
}

/* 14. « Optimisez vos contenus » : le texte courant et les cartes tombaient
   72 px plus bas que dans « Audit et enrichissement ». La section porte aussi
   la classe `ads-premium-section`, dont la regle sur `.page-section-heading`
   (0,2,0) repassait devant le `margin: 0` du gabarit duo (meme poids, mais
   plus loin dans la feuille). Le titre d'un bloc duo ne porte plus de marge
   basse, quelle que soit la section qui l'accueille : l'ecart vient du seul
   `row-gap` de la grille, comme sur « CRM & data ». */
.duo-layout .duo-texte.page-section-heading {
  margin-bottom: 0;
}

/* 15. « Foule contact » : essai a deux encoches — haut-gauche et bas-droite.
   Le composant ne pose qu'un pan par element : le bloc porte celui du bas a
   droite, un calque pose par-dessus porte celui du haut a gauche. Les deux
   angles concernes perdent leur rayon, celui du bas a gauche le retrouve. */
#foule-contact .foule-visuel {
  border-bottom-left-radius: var(--radius-panel);
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
}
#foule-contact .foule-visuel > .encoche-calque {
  z-index: 3;
  --encoche-l: 130px;
  --encoche-h: 92px;
  --encoche-r: 24px;
}

/* ==========================================================================
   16. Gros titres sur deux lignes
   --------------------------------------------------------------------------
   Plusieurs titres de section s'etalaient sur trois a cinq lignes alors que
   la place existait a cote : leur boite etait plafonnee bien en dessous de la
   largeur du conteneur. Ils reprennent la largeur disponible, sans toucher au
   corps du texte. Uniquement en grand ecran : en dessous, les reglages
   responsive deja en place gardent la main.

   Mesures a 1440 px, avant -> apres :
     « Une vision globale… »          3 -> 2 lignes (920 -> 1000 px)
     « Du print au digital… »         3 -> 2 lignes (960 -> 1120 px)
     « Data et etudes… »              3 -> 2 lignes (782 -> 1017 px)
     « Le leader du marketing… »      4 -> 2 lignes (740 -> 1000 px)

   Restent plus longs, faute de place : deux lignes leur demanderaient un
   corps nettement plus petit, et le corps des titres n'est pas touche.
     « La donnee n'a de valeur… »     28 px au lieu de 68
     « Testez notre expertise… »      43 px au lieu de 68
     « Boostez votre marque… »        45 px au lieu de 68 (deja regle sur
                                      quatre lignes en mobile) */
@media (min-width: 1024px) {
  /* accueil : le chapeau des expertises manquait de 2 px pour tenir en deux
     lignes autour de son saut de ligne */
  .home-expertise-intro {
    max-width: 1000px;
  }

  /* accueil : la banniere. La colonne de texte s'arretait a 740 px alors que
     le pave du bandeau en fait 820 et la coquille 1380. */
  .home-hero-section .home-hero-content > div {
    max-width: 1000px;
  }
  .home-hero-section h1 {
    max-width: 1000px;
  }

  /* Agryco Ads : « Du print au digital… » tenait dans 960 px, il lui en
     fallait 1103 ; le conteneur en offre 1146. */
  .ads-media-section .page-section-heading {
    max-width: 1120px;
  }
  .ads-media-section .page-section-heading h2 {
    max-width: none;
  }

  /* Nexio : « Data et etudes… ». La colonne de texte passe de 7/12 a 9/12 ;
     le cadre du logo se resserre, le logo suit sa largeur. */
  .nexio-page .nexio-intro-grille {
    grid-template-columns: 9fr 3fr;
    gap: 1.5rem;
  }
  .nexio-page .nexio-intro-grille .nexio-logo-cadre {
    padding: 1.5rem;
  }
}

/* 17. « Foule contact » en mobile : plus d'encoche. Le bloc est deja aplati
   et pleine largeur, les deux pans mordaient sur la roue sans rien apporter.
   Le pan du bloc et celui du calque sont retires, les quatre angles
   retrouvent leur rayon. */
@media (max-width: 767px) {
  #foule-contact .foule-visuel::before,
  #foule-contact .foule-visuel::after,
  #foule-contact .foule-visuel > .encoche-calque::before,
  #foule-contact .foule-visuel > .encoche-calque::after {
    content: none;
  }
  #foule-contact .foule-visuel {
    border-radius: var(--radius-panel);
  }
}

/* 18. Glissement au doigt sur les carrousels. Le geste est ecoute sur la
   visionneuse, donc sur les grands volets eux-memes — plus seulement sur la
   coquille du carrousel. `touch-action: pan-y` partage le geste avec le
   navigateur : l'horizontale fait defiler le carrousel, la verticale fait
   defiler la page. Les quatre cases d'Agryco Premium gardent leur propre
   bande defilante, elles ne sont plus captees par le carrousel. */
[data-carousel-target="viewport"] {
  touch-action: pan-y;
}

/* 19. « Sciences comportementales » : la colonne a ete elargie a 9/12 pour
   que le titre tienne sur deux lignes, mais le texte courant la suivait — plus
   de 1000 px par ligne, illisible. Le titre garde la largeur, les paragraphes
   reprennent une mesure de lecture confortable (environ 90 signes). */
@media (min-width: 1024px) {
  .nexio-page .nexio-intro-grille > div > p:not(.page-kicker) {
    max-width: 720px;
  }
}
/*
 * Finitions du site public (passe Refactoring UI) : echelle typographique,
 * rythme des espacements, largeur de contenu unique, focus et details
 * d'interaction. Chargee en dernier ; chaque regle ne fait que surcharger le
 * design en place. Le prefixe .main-wrpper:not(#finitions) donne aux regles
 * le poids d'un identifiant, qui l'emporte sur les utilitaires Tailwind et
 * les feuilles agryco sans recourir a !important.
 */

/* ---------- 1. Contraste : textes secondaires lisibles ----------
   #a0a0a0 sur blanc (dates, metadonnees, libelles) ne fait que 2,6:1 ;
   #6b7480 atteint 4,8:1 (WCAG AA) sans changer la hierarchie. */
:root {
  --color-muted-alt: #6b7480;
}

/* ---------- 2. Typographie : retours a la ligne equilibres ----------
   Plus de mot ou de ponctuation orpheline en fin de titre (« univers / : »). */
h1, h2, h3 { text-wrap: balance; }
p, li, blockquote { text-wrap: pretty; }

/* Chiffres cles alignes et stables */
.home-hero-info-valeur,
.ads-direct-metric span,
.parcours-annee,
.media-etape-index { font-variant-numeric: tabular-nums; }

/* ---------- 3. Focus clavier visible partout ---------- */
.main-wrpper a:focus-visible,
.main-wrpper button:focus-visible,
.main-wrpper summary:focus-visible {
  outline: 3px solid var(--color-accent-blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- 4. Banniere : texte d'accroche moins massif ----------
   Une ligne de 55 a 60 caracteres se lit d'un trait ; sur mobile, corps un
   peu plus petit pour que les boutons restent dans le premier ecran. */
.home-hero-content p,
.ads-hero-paragraphe { max-width: 58ch; }

@media (max-width: 575px) {
  .home-hero-content p,
  .ads-hero-paragraphe { font-size: 0.9375rem; line-height: 1.6; }
}

/* ---------- 5. Bouton flottant « Nous contacter » (mobile) ----------
   Masque tant que l'appel a l'action de la banniere est visible
   (controleur floating-contact) : il ne le recouvre plus. */
.site-floating-contact {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.site-floating-contact.is-concealed {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}

/* ---------- 6. Methode : etapes a la hauteur du titre ----------
   Le titre ecrasait des etapes en 14 px gris clair. */
.home-method-card h2 { font-size: clamp(34px, 4.2vw, 54px); }
.home-method-step h3 { font-size: 1.125rem; }
.home-method-step p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
  opacity: 0.8;
}

/* ---------- 7. Cartes d'articles : une seule action, la carte entiere ----------
   Trois gros boutons jaunes identiques se disputaient l'attention : l'appel
   devient un lien discret et toute la carte est cliquable. */
.card-article {
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-article:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(52, 59, 69, 0.12);
}
.card-article h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card-article .blog-cta-pill {
  position: relative;
  z-index: 1;
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--color-secondary);
  font-size: 0.875rem;
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.card-article .blog-cta-pill::after { content: "\00a0→"; }
.card-article .blog-cta-pill:hover { transform: none; }
.card-article > a > div:empty {
  background: linear-gradient(135deg, var(--color-surface) 0%, #efe9d8 100%);
}

/* ---------- 8. Article : une colonne de lecture ----------
   La regle `.ads-page .page-section > .container-site` elargissait l'article a
   toute la page (~140 caracteres par ligne) ; on revient a ~70. */
.ads-page article.page-section > .container-site.max-w-3xl {
  max-width: 46rem;
}
.article-prose {
  font-size: 1.125rem;
  line-height: 1.75;
}
.article-prose p { color: var(--color-text); }

/* ---------- 9. Formulaire de contact ---------- */
.agryco-label sup { color: currentColor; }
.contact-form .agryco-field,
#cnt-popup .agryco-field { min-height: 48px; }

/* ---------- 10. Navigation : page courante reperable ----------
   Le gras seul se voyait a peine ; un trait jaune sous le lien actif. */
.site-nav-link[aria-current="page"] {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}

/* ---------- 11. Bouton flottant : une pastille, pas un bandeau ----------
   En pleine largeur il concurrencait la banniere et le bandeau cookies. */
.site-floating-contact {
  width: max-content;
  bottom: 20px;
  padding: 14px 28px;
  font-size: 1rem;
  box-shadow: 0 12px 30px rgba(52, 59, 69, 0.25);
}

/* ---------- 12. Methode : etapes centrees face au titre ---------- */
.home-method-card ol { align-self: center; }

/* ---------- 13. Frise : un titre par etape ----------
   Titre et texte s'enchainaient sur une meme ligne ; le titre passe au-dessus. */
.parcours-carte h3,
.parcours-carte p { display: block; }
.parcours-carte h3 {
  margin-bottom: 0.25rem;
  font-size: 1.125rem;
  line-height: 1.3;
}
.parcours-carte h3::after { content: none; }

/* ---------- 14. Pied de page : mentions lisibles ----------
   Le copyright et « Gerer mes cookies » etaient trop clairs sur le fond gris. */
footer > .container-site > div:last-child,
footer > .container-site > div:last-child a {
  color: var(--color-muted);
}

/* =====================================================================
   15. ECHELLE TYPOGRAPHIQUE ET RYTHME (Refactoring UI)
   Une seule echelle, choisie a la main, pour tout le site :
     h1 page 72 · h1 article 48 · h2 section 48 · h3 affiche 36
     h3 18 · chapeau 18 · texte 16 · petit 14 · libelle 12
   Avant : h2 (68) plus gros que le h1 de l'accueil (62) et que le titre
   d'un article (46), 9 tailles de texte de 10 a 18 px.
   Prefixe `.main-wrpper:not(#finitions) main` : le :not(#id) donne a ces regles une
   specificite d'identifiant, pour qu'elles l'emportent sur les classes
   utilitaires text-[clamp(...)] des vues et sur les surcharges du design
   (agryco/*.css), sans !important.
   ===================================================================== */
:root {
  --fs-display: clamp(2.75rem, 5.2vw, 4.5rem);   /* 44 -> 72 */
  --fs-title:   clamp(2rem, 3.4vw, 3rem);        /* 32 -> 48 */
  --fs-h3-display: clamp(1.625rem, 2.5vw, 2.25rem); /* 26 -> 36 */
  --fs-h3:      1.125rem;                         /* 18 */
  --fs-lead:    1.125rem;                         /* 18 */
  --fs-body:    1rem;                             /* 16 */
  --fs-small:   0.875rem;                         /* 14 */
  --fs-label:   0.75rem;                          /* 12 */

  --lh-display: 0.95;
  --lh-title:   1;
  --lh-heading: 1.3;
  --lh-body:    1.65;

  --space-section: clamp(3.5rem, 7vw, 5rem);      /* 56 -> 80 */
  --space-kicker:  0.75rem;                        /* libelle -> titre : 12 */
  --space-lead:    1.25rem;                        /* titre -> chapeau : 20 */
  --space-heading: clamp(2rem, 4vw, 3rem);         /* groupe de titres -> contenu : 32 -> 48 */
}
/* Mobile : a 44 px, « comportemental » ou « Solutions » ne tenaient pas dans
   la carte de la banniere et se coupaient au milieu du mot. Le titre suit la
   largeur de l'ecran. Les sections, elles, ne cumulent plus 112 px de vide
   (56 en bas de l'une, 56 en haut de la suivante). */
@media (max-width: 639px) {
  :root {
    --fs-display: clamp(1.75rem, 8.2vw, 2.75rem);  /* 28 -> 44, 32 a 390 px */
    --space-section: 2.5rem;                        /* 40 */
  }
}

/* --- Titres --- */
.main-wrpper:not(#finitions) main h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
}
.main-wrpper:not(#finitions) main article.page-section h1 {
  font-size: var(--fs-title);
  line-height: 1.05;
}
.main-wrpper:not(#finitions) main section h2:not(.article-takeaways-title) {
  font-size: var(--fs-title);
  line-height: var(--lh-title);
}
/* h3 qui jouent le role de titre de section (« Trois leviers complementaires ») */
.main-wrpper:not(#finitions) main .home-solutions-heading h3 {
  font-size: var(--fs-title);
  line-height: var(--lh-title);
}
/* h3 en police d'affiche (panneaux d'onglets, offres, volets) */
.main-wrpper:not(#finitions) main .home-expertise-panel-copy h3,
.main-wrpper:not(#finitions) main .ads-store-titre {
  font-size: var(--fs-h3-display);
  line-height: var(--lh-display);
}
/* h3 courants (cartes, etapes, options, frise) */
.main-wrpper:not(#finitions) main .home-method-step h3,
.main-wrpper:not(#finitions) main .ads-option strong,
.main-wrpper:not(#finitions) main .ads-touchpoint-card h3,
.main-wrpper:not(#finitions) main .duo-picto h3,
.main-wrpper:not(#finitions) main .card-article h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
}

/* --- Texte --- */
/* texte courant (hors chiffres et libelles en police d'affiche) */
.main-wrpper:not(#finitions) main p:not([class*="valeur"]):not([class*="titre"]):not(.font-primary),
.main-wrpper:not(#finitions) main li {
  line-height: var(--lh-body);
}
/* chapeaux : texte sous un titre de section ou de banniere */
.main-wrpper:not(#finitions) main .page-section-heading > p:not(.page-kicker),
.main-wrpper:not(#finitions) main .home-expertise-intro > p:not(.page-kicker):last-child,
.main-wrpper:not(#finitions) main .ads-hero-paragraphe,
.main-wrpper:not(#finitions) main .home-hero-content p {
  font-size: var(--fs-lead);
  line-height: 1.6;
}
/* textes secondaires : 13 et 15 px ramenes sur l'echelle */
.main-wrpper:not(#finitions) main .home-method-step p,
.main-wrpper:not(#finitions) main .card-article p:not(:first-child),
.main-wrpper:not(#finitions) main .ads-option small,
.main-wrpper:not(#finitions) main .parcours-carte p {
  font-size: var(--fs-small);
}
/* libelles en capitales : 10 px illisible -> 12 px partout */
.main-wrpper:not(#finitions) main .page-kicker,
.main-wrpper:not(#finitions) main .home-hero-info-label,
.main-wrpper:not(#finitions) main .home-expertise-panel-kicker,
.main-wrpper:not(#finitions) main [class*="kicker-accent"] {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
}

/* --- Rythme vertical --- */
.main-wrpper:not(#finitions) main > .page-section,
.main-wrpper:not(#finitions) main > section.page-section,
.main-wrpper:not(#finitions) main > section[class*="home-"]:not(.home-hero-section),
.main-wrpper:not(#finitions) main > .premium-carrousel > section.page-section {
  padding-block: var(--space-section);
}
.main-wrpper:not(#finitions) main .page-kicker,
.main-wrpper:not(#finitions) main .home-expertise-intro > p:first-child {
  margin-bottom: var(--space-kicker);
}
.main-wrpper:not(#finitions) main .page-section-heading > h2 + p,
.main-wrpper:not(#finitions) main .home-expertise-intro > h2 + p {
  margin-top: var(--space-lead);
}
.main-wrpper:not(#finitions) main .page-section-heading,
.main-wrpper:not(#finitions) main .home-expertise-intro {
  margin-bottom: var(--space-heading);
}

/* --- Mobile : moins d'ecart entre les niveaux, meme echelle --- */
@media (max-width: 575px) {
  .main-wrpper:not(#finitions) main .page-section-heading > p:not(.page-kicker),
  .main-wrpper:not(#finitions) main .ads-hero-paragraphe,
  .main-wrpper:not(#finitions) main .home-hero-content p {
    font-size: var(--fs-body);
  }
}

/* Sur un article, le titre de l'article domine : les sections qui suivent
   (articles lies, contact) passent au niveau h3 d'affiche. */
.main-wrpper:not(#finitions) main article.page-section ~ section h2 {
  font-size: var(--fs-h3-display);
}
/* Chiffres cles : jamais plus gros que le h1 de la page. */
.main-wrpper:not(#finitions) main .home-hero-info-valeur,
.main-wrpper:not(#finitions) main .ads-direct-metric span {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
}

/* Derniers textes hors echelle (13, 15, 17 et 24 px) ramenes sur celle-ci. */
.main-wrpper:not(#finitions) main .home-expertise-panel-copy p,
.main-wrpper:not(#finitions) main .premium-texte p {
  font-size: var(--fs-body);
}
.main-wrpper:not(#finitions) main .home-hero-info-detail,
.main-wrpper:not(#finitions) main .ads-media-card li {
  font-size: var(--fs-small);
}
.main-wrpper:not(#finitions) main .ads-rocket-copy h3 {
  font-size: var(--fs-lead);
}

/* =====================================================================
   16. UNE SEULE LARGEUR DE CONTENU
   L'accueil melangeait deux largeurs : la banniere, les expertises, la
   methode et les avis a la largeur de la barre (1380 px), « Nos solutions »,
   « Offre decouverte » et la carte contact plafonnees a 1176 px (essai du
   design). Les bords gauches ne tombaient plus les uns sous les autres.
   Tout le contenu reprend la largeur de la banniere ; seuls la colonne de
   lecture des articles et le formulaire de contact centre restent etroits.
   ===================================================================== */
.main-wrpper:not(#finitions) main .home-solutions-heading,
.main-wrpper:not(#finitions) main .home-leviers,
.main-wrpper:not(#finitions) main .home-discovery-card,
.main-wrpper:not(#finitions) main .home-contact-card {
  max-width: none;
}
/* La carte contact est une section pleine largeur (px-[15px]) : on la cale
   sur le conteneur large, comme la banniere. */
.main-wrpper:not(#finitions) main .home-contact-card {
  width: min(100%, var(--container-width-wide));
}
/* Pages de marque et A propos : les blocs cales sur l'ancienne carte contact
   (1176 px) suivent. Restent etroites les largeurs de texte interieures
   (.home-contact-inner, .marque-inner, titre de la photo d'equipe). */
.main-wrpper:not(#finitions) main .ads-rocket-section > .container-site {
  max-width: calc(var(--container-width-wide) + 30px);
}
.main-wrpper:not(#finitions) main .ads-rocket-card,
.main-wrpper:not(#finitions) main .ads-premium-intro,
.main-wrpper:not(#finitions) main .ads-premium-grid,
.main-wrpper:not(#finitions) main .premium-carrousel-visionneuse,
.main-wrpper:not(#finitions) main .ads-premium-section + .ads-store-section .ads-store-layout,
.main-wrpper:not(#finitions) main #emploi .ads-store-layout,
.main-wrpper:not(#finitions) main .equipe-photo,
.main-wrpper:not(#finitions) main .marque-bloc,
.main-wrpper:not(#finitions) main #foule-contact .foule-layout,
.main-wrpper:not(#finitions) main .page-section:has(.equipe-photo) .page-section-heading {
  max-width: none;
}
/* Le bloc s'elargit, pas la ligne de texte : ~65 caracteres au plus. */
.main-wrpper:not(#finitions) main .premium-texte p,
.main-wrpper:not(#finitions) main .ads-premium-intro p {
  max-width: 65ch;
}

/* =====================================================================
   17. MOBILE
   ===================================================================== */
/* La mise en page miroir (titre et texte a droite) n'a plus de sens quand
   tout s'empile : le bloc se lit a gauche, comme ses voisins. */
@media (max-width: 991px) {
  .main-wrpper:not(#finitions) main .duo-layout--texte-droite .duo-texte,
  .main-wrpper:not(#finitions) main .duo-layout--texte-droite .duo-texte h2,
  .main-wrpper:not(#finitions) main .duo-layout--texte-droite .duo-texte .page-kicker,
  .main-wrpper:not(#finitions) main .duo-layout--texte-droite .duo-intro {
    margin-left: 0;
    text-align: left;
  }
}
@media (max-width: 767px) {
  /* « Remonter en haut » : plus discret, au plus pres du coin, il empiete
     moins sur les champs et les cartes qu'il survole. */
  .main-wrpper:not(#finitions) #myBtn {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
  }
  /* Le pied de page se prolonge sous les boutons flottants : sa derniere
     ligne (« Gerer mes cookies ») n'est plus masquee en bas de page. */
  .main-wrpper:not(#finitions) footer {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}