/* polices */
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_theme/fonts/lato-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_theme/fonts/lato-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_theme/fonts/lato-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_theme/fonts/lato-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_theme/fonts/lato-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_theme/fonts/lato-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/_theme/fonts/lato-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/_theme/fonts/lato-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_theme/fonts/roboto-condensed-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_theme/fonts/roboto-condensed-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_theme/fonts/roboto-condensed-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_theme/fonts/roboto-condensed-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_theme/fonts/roboto-condensed-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_theme/fonts/roboto-condensed-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_theme/fonts/roboto-condensed-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/_theme/fonts/roboto-condensed-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---- /assets/site.css ---- */
/* ==========================================================================
   Cleo Carbone · demo LMScom · v4 « Filiere »
   Systeme repris de la demo Riskspot (arrondis assumes, mosaique, ombres douces).
   Direction artistique reprise du site UNIMEV (unimev.fr), editeur de Cleo :
   marine #192883, framboise #E10046, encre #292D2F, brume #F9F9FC,
   gris #6E6E6E / #5D6162, filet #EEEEEF, Roboto Condensed + Lato.
   Le teal #2EB7B0 de Cleo est conserve, reserve a la donnee carbone.
   ========================================================================== */

:root{
  /* hauteur de la barre de menu : le decor du hero remonte d'autant */
  --hdr-h:100px;
  /* DA UNIMEV */
  --marine:#192883;
  --marine-2:#101A5C;
  --marine-deep:#0E1550;
  --framboise:#E10046;
  --framboise-deep:#B80039;
  --framboise-wash:#FFEDF2;
  --encre:#292D2F;
  --gris:#6E6E6E;
  --gris-2:#5D6162;
  --paper:#FFFFFF;
  --brume:#F9F9FC;
  --line:#EEEEEF;
  --line-2:#DDDDE3;
  --line-dark:rgba(255,255,255,.14);
  --grey-dark:#B9BDD4;

  /* donnee carbone, couleur historique Cleo */
  --teal:#2EB7B0;
  --teal-deep:#1A6F6B;
  --teal-wash:#E6F7F6;

  --marine-wash:#EEF0FA;

  /* rayons, systeme arrondi assume */
  --r-xs:10px; --r-sm:14px; --r-md:20px; --r-lg:26px; --r-xl:34px; --r-pill:999px;

  /* elevation */
  --sh-1:0 1px 2px rgba(25,40,131,.05), 0 4px 14px rgba(25,40,131,.06);
  --sh-2:0 2px 4px rgba(25,40,131,.05), 0 18px 44px rgba(25,40,131,.10);
  --sh-3:0 30px 80px rgba(25,40,131,.18);

  --wrap:1180px;
  --gut:clamp(20px, 5vw, 48px);
  --sp:clamp(76px, 9vw, 132px);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--encre);
  font-family:"Lato",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.64;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%; height:auto; display:block}
/* Un SVG d'icone n'a ni width ni height en attribut : sans conteneur flex il
   prend toute la largeur. Ce plancher evite la fleche geante (vu sur les
   cartes du blog). Les visuels de panneau se re-elargissent plus bas. */
a > svg, button > svg, span > svg, li > svg{width:1em; height:1em; flex:none}
a{color:inherit; text-decoration:none}
button{font:inherit}
section{position:relative; overflow-x:clip}
/* Le decor du hero doit passer sous la barre de menu, sinon la barre dessine
   une bande blanche en travers du hero. On remonte donc les pseudo-elements
   de --hdr-h, et la barre ne peint son fond qu'une fois le defilement engage. */
.hero.dots-bg::before, .page-hero.dots-bg::before{inset:calc(-1 * var(--hdr-h)) 0 0 0}
.hero .hero-wash, .page-hero .hero-wash{top:calc(-1 * var(--hdr-h))}
:focus-visible{outline:3px solid var(--framboise); outline-offset:3px; border-radius:6px}

/* --------------------------------------------------------- typographie -- */
h1,h2,h3,h4{
  margin:0;
  font-family:"Roboto Condensed","Lato",system-ui,sans-serif;
  font-weight:700; letter-spacing:-.005em; line-height:1.06;
}
h1{font-size:clamp(2.5rem, 4.7vw, 3.9rem); line-height:1.02}
h2{font-size:clamp(2.05rem, 4.3vw, 3.3rem); line-height:1.06}
h3{font-size:clamp(1.2rem, 1.75vw, 1.48rem); line-height:1.22}
p{margin:0}
/* les titres UNIMEV melangent gras et regulier dans la meme ligne */
.tn{font-weight:400}

.kicker{
  font-family:"Roboto Condensed","Lato",sans-serif;
  font-size:.82rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--gris);
  display:inline-flex; align-items:center; gap:10px;
}
.kicker::before{
  content:""; flex:none; width:14px; height:14px; background:var(--framboise);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1 8.4 3.6 11 12 12-8.4 1-11 3.6-12 12-1-8.4-3.6-11-12-12C8.4 11 11 8.4 12 0z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1 8.4 3.6 11 12 12-8.4 1-11 3.6-12 12-1-8.4-3.6-11-12-12C8.4 11 11 8.4 12 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.on-dark .kicker{color:var(--grey-dark)}
.on-dark .kicker::before{background:var(--paper)}

.lead{font-size:clamp(1.06rem,1.35vw,1.2rem); line-height:1.62; color:var(--gris-2)}
.on-dark .lead{color:var(--grey-dark)}
.muted{color:var(--gris-2)}
.on-dark .muted{color:var(--grey-dark)}
.num-t{font-variant-numeric:tabular-nums}
.hl{color:var(--framboise)}
.hl-t{color:var(--teal-deep)}

/* ------------------------------------------------------------- layout --- */
.wrap{width:min(var(--wrap),100%); margin-inline:auto; padding-inline:var(--gut)}
.sec{padding-block:var(--sp)}
.sec-head{max-width:56ch; display:grid; gap:20px}
.sec-head.mid{margin-inline:auto; text-align:center; justify-items:center}

.on-dark{background:var(--marine); color:var(--paper)}
.on-ink{background:var(--marine-deep)}
.on-mist{background:var(--brume)}

.grid-bg::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 85% at 50% 0%,#000 0%,transparent 78%);
          mask-image:radial-gradient(120% 85% at 50% 0%,#000 0%,transparent 78%);
}
.dots-bg::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(25,40,131,.13) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(92% 72% at 50% 0%,#000 0%,transparent 74%);
          mask-image:radial-gradient(92% 72% at 50% 0%,#000 0%,transparent 74%);
}

/* ------------------------------------------------------------ boutons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:var(--r-pill);
  font-family:"Roboto Condensed","Lato",sans-serif;
  font-size:.98rem; font-weight:700; letter-spacing:.055em; text-transform:uppercase;
  border:1px solid transparent; cursor:pointer;
  transition:transform .28s var(--ease), background-color .28s var(--ease),
             box-shadow .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease);
  white-space:nowrap;
}
.btn svg{width:15px; height:15px; flex:none; transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translate(3px,-3px)}
.btn:active{transform:translateY(0)}

.btn-primary{background:var(--framboise); color:#fff; box-shadow:0 8px 24px rgba(225,0,70,.26)}
.btn-primary:hover{background:var(--framboise-deep); color:#fff; box-shadow:0 14px 34px rgba(225,0,70,.30)}

.btn-marine{background:var(--marine); color:#fff; box-shadow:var(--sh-1)}
.btn-marine:hover{background:var(--marine-deep); color:#fff; box-shadow:var(--sh-2)}

.btn-ghost{background:var(--paper); color:var(--marine); border-color:var(--line-2); box-shadow:var(--sh-1)}
.btn-ghost:hover{border-color:var(--marine); color:var(--marine); box-shadow:var(--sh-2)}

.on-dark .btn-ghost, .on-ink .btn-ghost{background:transparent; color:var(--paper); border-color:var(--line-dark); box-shadow:none}
.on-dark .btn-ghost:hover, .on-ink .btn-ghost:hover{border-color:rgba(255,255,255,.55); color:var(--paper); background:rgba(255,255,255,.07)}
.on-dark .btn-marine, .on-ink .btn-marine, .plan-hi .btn-marine{background:var(--paper); color:var(--marine)}
.on-dark .btn-marine:hover, .on-ink .btn-marine:hover, .plan-hi .btn-marine:hover{background:#E8EAF6; color:var(--marine)}
.plan-hi .btn-primary{box-shadow:none}
.plan-hi .btn-ghost{background:transparent; color:var(--paper); border-color:var(--line-dark); box-shadow:none}

.btn-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}

.pill{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 16px 7px 10px; border-radius:var(--r-pill);
  border:1px solid var(--line-2); background:var(--paper);
  font-size:.82rem; font-weight:700; color:var(--gris-2);
  box-shadow:var(--sh-1);
}
.pill .dot{
  width:7px; height:7px; border-radius:50%; background:var(--teal); flex:none;
  box-shadow:0 0 0 4px var(--teal-wash);
}
.on-dark .pill, .on-ink .pill{background:rgba(255,255,255,.08); border-color:var(--line-dark); color:var(--paper); box-shadow:none}
.on-dark .pill .dot{box-shadow:0 0 0 4px rgba(46,183,176,.22)}

/* ------------------------------------------------------------- header --- */
.hdr{position:sticky; top:0; z-index:60; padding:14px 0; background:transparent; transition:padding .3s var(--ease)}
.hdr-in{
  display:flex; align-items:center; gap:18px;
  padding:9px 9px 9px 20px;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  transition:background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.hdr.is-stuck .hdr-in{
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
          backdrop-filter:blur(14px) saturate(1.6);
  border-color:var(--line);
  box-shadow:var(--sh-2);
}
.brand{display:flex; align-items:center; gap:10px}
.brand .lockup{height:30px; width:auto; display:block}
.nav{display:flex; gap:4px; margin-left:auto}
.nav a{
  font-family:"Roboto Condensed","Lato",sans-serif;
  padding:10px 15px; border-radius:var(--r-pill);
  font-size:.95rem; font-weight:600; letter-spacing:.03em; color:var(--gris-2);
  transition:color .25s var(--ease), background-color .25s var(--ease);
}
.nav a:hover{color:var(--marine); background:var(--marine-wash)}
.nav a.is-on{color:var(--marine); background:var(--marine-wash)}
.hdr-cta{display:flex; align-items:center; gap:8px}
.hdr-cta .btn{padding:11px 20px; font-size:.9rem}
.link-quiet{
  font-family:"Roboto Condensed","Lato",sans-serif;
  font-size:.95rem; font-weight:600; letter-spacing:.03em;
  color:var(--gris-2); padding:10px 12px; transition:color .25s var(--ease);
}
.link-quiet:hover{color:var(--marine)}
.burger{display:none; width:44px; height:44px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:var(--paper); color:var(--marine); align-items:center; justify-content:center; cursor:pointer}
.burger svg{width:18px; height:18px}

/* --------------------------------------------------------------- hero --- */
.hero{padding-top:clamp(30px,4vw,52px); padding-bottom:clamp(60px,7vw,96px); overflow-x:clip; overflow-y:visible}
.hero-in{display:grid; gap:clamp(44px,5vw,62px); align-items:center}
@media (min-width:1000px){ .hero-in{grid-template-columns:minmax(0,1.06fr) minmax(0,1fr)} }
.hero-copy{display:grid; gap:26px; justify-items:start; max-width:49ch}
.hero h1{max-width:100%; font-size:clamp(2.35rem, 3.55vw, 3.3rem)}
.hero h1 .ln{display:block; overflow:hidden}
.hero h1 .ln > span{display:block}
.hero .lead{max-width:46ch}
/* signature de l'editeur, sous les boutons du hero */
.hero-sign{display:flex; align-items:center; gap:clamp(12px,1.6vw,18px); margin:0; flex-wrap:wrap}
.hero-sign-lb{
  font-family:"Roboto Condensed",sans-serif; font-size:.8rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--gris);
  padding-right:clamp(12px,1.6vw,18px); border-right:1px solid var(--line-2);
}
.hero-sign-logo{display:block; transition:opacity .25s var(--ease), transform .25s var(--ease)}
.hero-sign-logo img{height:clamp(34px,3.6vw,46px); width:auto; display:block}
.hero-sign-logo:hover{opacity:.82; transform:translateY(-2px)}
@media (max-width:560px){ .hero-sign-lb{border-right:0; padding-right:0} }

.hero-meta{display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; font-size:.87rem; color:var(--gris-2)}
.hero-meta span{display:inline-flex; align-items:center; gap:8px}
.hero-meta svg{width:15px; height:15px; color:var(--teal-deep); flex:none}

/* le versant colore d'UNIMEV : un seul degrade, reserve au hero */
.hero-wash{
  position:absolute; z-index:-1; pointer-events:none;
  inset:-30% -12% auto 38%; height:calc(120% + var(--hdr-h));
  background:
    radial-gradient(48% 52% at 72% 30%, rgba(225,0,70,.20), rgba(225,0,70,0) 68%),
    radial-gradient(56% 60% at 34% 60%, rgba(25,40,131,.20), rgba(25,40,131,0) 70%);
  filter:blur(10px);
}
@media (max-width:999px){ .hero-wash{inset:-16% -20% auto -10%; height:calc(70% + var(--hdr-h)); right:-20%; left:-10%} }

/* --------------------------------------------- panneau produit (SVG) ---- */
.panel{
  position:relative; border-radius:var(--r-xl);
  background:var(--paper); border:1px solid var(--line-2);
  box-shadow:var(--sh-3); overflow:hidden;
}
.panel-bar{
  display:flex; align-items:center; gap:8px;
  padding:14px 18px; border-bottom:1px solid var(--line); background:var(--brume);
}
.panel-bar i{width:9px; height:9px; border-radius:50%; background:var(--line-2); display:block}
.panel-bar .tag{
  margin-left:8px; font-family:"Roboto Condensed",sans-serif; font-size:.74rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--gris);
}
.panel-body{padding:clamp(18px,2.4vw,26px)}
.panel svg{width:100%; height:auto}
.hero-panel{position:relative; transform-origin:50% 60%}

/* bulle posee sur le panneau */
.bubble{
  position:absolute; z-index:3; left:-14px; bottom:32px;
  display:flex; align-items:center; gap:11px;
  padding:9px 18px 9px 12px; border-radius:var(--r-pill);
  background:var(--paper); border:1px solid var(--line-2); box-shadow:var(--sh-2);
  font-size:.87rem; font-weight:700; color:var(--marine);
}
.bubble svg{width:26px; height:26px; flex:none; color:var(--teal-deep)}
@media (max-width:700px){ .bubble{left:0; bottom:-16px; transform:scale(.9); transform-origin:left bottom} }

/* -------------------------------------------------------- bande outils -- */
.strip{border-block:1px solid var(--line); background:var(--paper); padding:26px 0}
.strip-in{display:flex; align-items:center; gap:16px clamp(20px,2.6vw,34px); flex-wrap:wrap; justify-content:center}
.strip-lb{font-size:.82rem; color:var(--gris); letter-spacing:.02em}
.strip-it{
  display:inline-flex; align-items:center; gap:10px;
  font-family:"Roboto Condensed",sans-serif; font-size:.98rem; font-weight:700;
  letter-spacing:.02em; color:var(--gris-2);
}
.strip-it svg{width:19px; height:19px; color:var(--marine); flex:none}

/* --------------------------------------------------------- logos parc --- */
.logos{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:clamp(34px,4vw,46px)}
.logo-chip{
  display:inline-flex; align-items:center; padding:13px 24px;
  border:1px solid var(--line); border-radius:var(--r-pill); background:var(--paper);
  font-family:"Roboto Condensed",sans-serif; font-size:1.02rem; font-weight:700;
  letter-spacing:.03em; color:var(--gris-2); box-shadow:var(--sh-1);
  transition:transform .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.logo-chip:hover{transform:translateY(-3px); color:var(--marine); border-color:var(--line-2)}

/* ----------------------------------------------------------- probleme --- */
.prob{padding-block:clamp(96px,11vw,150px)}
.prob-stats{display:grid; gap:clamp(24px,3vw,40px); margin-bottom:clamp(40px,5vw,60px)}
@media (min-width:760px){ .prob-stats{grid-template-columns:1fr 1fr} }
.stat{
  position:relative; overflow:hidden;
  border:1px solid var(--line-dark); border-radius:var(--r-lg);
  padding:clamp(26px,3vw,36px); background:rgba(255,255,255,.05);
}
.stat .num{
  font-family:"Roboto Condensed",sans-serif;
  font-size:clamp(3.4rem,7.6vw,5.4rem); font-weight:700; line-height:.94;
  letter-spacing:-.02em; color:var(--paper); font-variant-numeric:tabular-nums;
}
.stat .num small{font-size:.46em; font-weight:700; color:var(--framboise); vertical-align:.52em; margin-left:.1em}
.stat p{margin-top:16px; color:var(--grey-dark); font-size:1rem; max-width:34ch}
.prob-say{
  font-family:"Roboto Condensed",sans-serif;
  font-size:clamp(1.42rem,2.9vw,2.25rem); line-height:1.28; letter-spacing:-.008em;
  font-weight:700; max-width:24ch;
}
.prob-say .w{opacity:.28; transition:opacity .4s var(--ease)}
.prob-say .w.on{opacity:1}
.prob-grid{display:grid; gap:clamp(30px,4vw,56px)}
@media (min-width:900px){ .prob-grid{grid-template-columns:1.05fr .95fr; align-items:center} }

/* ---------------------------------------------------------- piliers ----- */
.pillars{display:grid; gap:18px; margin-top:clamp(40px,5vw,58px)}
@media (min-width:700px){ .pillars{grid-template-columns:1fr 1fr} }
.pillar{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--paper); padding:clamp(24px,2.6vw,32px);
  box-shadow:var(--sh-1); overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.pillar:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--line-2)}
.pillar-ico{
  width:48px; height:48px; border-radius:var(--r-sm);
  display:grid; place-items:center; background:var(--marine-wash); color:var(--marine);
  margin-bottom:20px;
}
.pillar-ico.t{background:var(--teal-wash); color:var(--teal-deep)}
.pillar-ico.f{background:var(--framboise-wash); color:var(--framboise-deep)}
.pillar-ico svg{width:24px; height:24px}
.pillar h3{margin-bottom:10px}
.pillar p{color:var(--gris-2); font-size:.98rem}
.pillar .art{margin-top:26px; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); background:var(--brume); line-height:0}
.pillar .art svg{width:100%; height:auto; display:block}
.pillar .more{
  margin-top:22px; display:inline-flex; align-items:center; gap:7px;
  font-family:"Roboto Condensed",sans-serif;
  font-size:.95rem; font-weight:700; letter-spacing:.04em; color:var(--framboise);
}
.pillar .more svg{width:15px; height:15px; transition:transform .3s var(--ease)}
.pillar:hover .more svg{transform:translateX(4px)}
.pillar .more::after{content:""; position:absolute; inset:0}

/* ------------------------------------------------------------- etapes --- */
.steps-grid{display:grid; gap:clamp(34px,4vw,64px); align-items:start}
@media (min-width:960px){ .steps-grid{grid-template-columns:.9fr 1.1fr} }
.steps-stage{position:sticky; top:112px}
.steps-list{display:grid; gap:14px}
.step{
  border:1px solid var(--line-dark); border-radius:var(--r-lg);
  padding:24px clamp(20px,2.4vw,28px);
  background:rgba(255,255,255,.05);
  transition:background-color .4s var(--ease), border-color .4s var(--ease);
}
.step.is-on{background:rgba(255,255,255,.10); border-color:rgba(225,0,70,.55)}
.step-n{
  font-family:"Roboto Condensed",sans-serif; font-size:.8rem; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--grey-dark); display:block; margin-bottom:12px;
}
.step.is-on .step-n{color:var(--framboise)}
.step h3{color:var(--paper); margin-bottom:9px}
.step p{color:var(--grey-dark); font-size:.98rem; max-width:46ch}

.stage-stack{display:grid}
.stage-stack > svg, .stage-stack > *{grid-area:1 / 1}
.stage-stack > * + *{opacity:0}
.no-gsap .stage-stack, .no-motion .stage-stack{gap:18px}
.no-gsap .stage-stack > *, .no-motion .stage-stack > *{grid-area:auto; opacity:1}
.no-gsap .steps-stage, .no-motion .steps-stage{position:static}
.stage-card{
  border-radius:var(--r-xl); overflow:hidden; line-height:0;
  border:1px solid var(--line-dark); background:rgba(255,255,255,.06); padding:14px;
}
.stage-card svg{width:100%; height:auto; display:block}

/* -------------------------------------------------------- temoignage ---- */
.quote{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-xl);
  background:var(--paper); box-shadow:var(--sh-2);
  padding:clamp(28px,3.6vw,50px);
  max-width:900px; margin-inline:auto; text-align:center;
}
.quote blockquote{
  margin:0; font-family:"Roboto Condensed",sans-serif;
  font-size:clamp(1.36rem,2.5vw,1.95rem); line-height:1.26;
  letter-spacing:-.008em; font-weight:700; color:var(--marine);
}
.quote-mark{width:32px; height:auto; margin:0 auto 22px; color:var(--framboise)}
.quote-who{margin-top:26px; display:flex; align-items:center; justify-content:center; gap:12px; font-size:.93rem}
.quote-av{
  width:42px; height:42px; border-radius:50%; flex:none;
  background:var(--marine); color:var(--paper);
  font-family:"Roboto Condensed",sans-serif;
  display:grid; place-items:center; font-size:.88rem; font-weight:700;
}
.quote-who b{font-weight:700}
.quote-who span{color:var(--gris-2)}

/* -------------------------------------------------------------- bento --- */
.bento{display:grid; gap:16px; margin-top:clamp(40px,5vw,56px)}
@media (min-width:760px){ .bento{grid-template-columns:repeat(6,1fr)} }
.cell{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper);
  padding:clamp(24px,2.6vw,32px); box-shadow:var(--sh-1);
  display:flex; flex-direction:column; gap:12px; min-width:0;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.cell:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.cell p{color:var(--gris-2); font-size:.97rem}
.cell .viz{margin-top:auto; padding-top:22px; line-height:0}
.cell .viz svg{width:100%; height:auto; display:block}
@media (min-width:760px){
  .cell-large{grid-column:span 3 !important}
  .cell-a{grid-column:span 3}
  .cell-b{grid-column:span 3}
  .cell-c{grid-column:span 2}
  .cell-d{grid-column:span 2}
  .cell-e{grid-column:span 2}
}
.cell-dark{background:var(--marine); border-color:var(--marine); color:var(--paper)}
.cell-dark p{color:var(--grey-dark)}
.cell-d .viz svg, .cell-e .viz svg, .cell-c .viz svg{max-width:340px; margin-inline:auto}

/* ---------------------------------------------------------------- faq --- */
.faq{max-width:820px; margin-inline:auto; margin-top:clamp(34px,4vw,48px); display:grid; gap:12px}
.qa{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper);
  overflow:hidden; transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.qa[open]{border-color:var(--line-2); box-shadow:var(--sh-1)}
.qa summary{
  list-style:none; cursor:pointer; padding:22px clamp(20px,2.4vw,28px);
  display:flex; align-items:center; gap:18px;
  font-family:"Roboto Condensed",sans-serif;
  font-size:1.12rem; font-weight:700; color:var(--marine);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:""; margin-left:auto; flex:none; width:12px; height:12px;
  border-right:2px solid var(--framboise); border-bottom:2px solid var(--framboise);
  transform:rotate(45deg) translateY(-3px); transition:transform .3s var(--ease);
}
.qa[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.qa .ans{padding:0 clamp(20px,2.4vw,28px) 24px; color:var(--gris-2); font-size:1rem; max-width:66ch}

/* --------------------------------------------------------------- blog --- */
.posts{display:grid; gap:16px; margin-top:clamp(34px,4vw,48px)}
@media (min-width:760px){ .posts{grid-template-columns:repeat(3,1fr)} }
.post{
  position:relative; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--paper); padding:clamp(22px,2.4vw,28px);
  display:flex; flex-direction:column; gap:14px; box-shadow:var(--sh-1);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.post:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.post .date{
  font-family:"Roboto Condensed",sans-serif; font-size:.8rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--framboise);
}
.post h3{font-size:1.1rem; line-height:1.24}
.post .more{
  margin-top:auto; padding-top:8px;
  display:inline-flex; align-items:center; gap:7px;
  font-family:"Roboto Condensed",sans-serif; font-size:.92rem; font-weight:700;
  letter-spacing:.04em; color:var(--marine);
}
.post .more svg{width:15px; height:15px; flex:none; transition:transform .3s var(--ease)}
.post:hover .more svg{transform:translateX(4px)}
.post-topline{height:4px; border-radius:var(--r-pill); width:52px; background:var(--framboise)}
.post:nth-child(2) .post-topline{background:var(--teal)}
.post:nth-child(3) .post-topline{background:var(--marine)}

/* ------------------------------------------------------------ tarifs ---- */
.plans{display:grid; gap:18px; margin-top:clamp(38px,4.6vw,54px); align-items:start}
@media (min-width:820px){ .plans{grid-template-columns:1fr 1fr} }
.plan{
  border:1px solid var(--line); border-radius:var(--r-xl); background:var(--paper);
  padding:clamp(26px,3vw,38px); box-shadow:var(--sh-1);
  display:flex; flex-direction:column; gap:22px;
}
.plan-hi{background:var(--marine); border-color:var(--marine); color:var(--paper); box-shadow:var(--sh-3)}
.plan-hi p, .plan-hi .plan-foot{color:var(--grey-dark)}
.plan-top{display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap}
.plan-top h3{flex:1 1 auto; min-width:0}
.plan-badge{
  display:inline-flex; align-items:center; padding:6px 14px; border-radius:var(--r-pill);
  background:var(--framboise); color:#fff;
  font-family:"Roboto Condensed",sans-serif; font-size:.76rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase;
}
.tiers{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.tiers li{
  display:flex; align-items:baseline; gap:16px; justify-content:space-between;
  padding:15px 0; border-top:1px solid var(--line); font-size:.98rem; color:var(--gris-2);
}
.plan-hi .tiers li{border-color:var(--line-dark); color:var(--grey-dark)}
.tiers li:first-child{border-top:0}
.tiers b{
  font-family:"Roboto Condensed",sans-serif; font-size:1.32rem; font-weight:700;
  color:var(--marine); white-space:nowrap; font-variant-numeric:tabular-nums;
}
.plan-hi .tiers b{color:var(--paper)}
.plan-foot{margin-top:auto; font-size:.9rem; color:var(--gris)}

/* --------------------------------------------------------- formulaire --- */
.form{
  border:1px solid var(--line); border-radius:var(--r-xl); background:var(--paper);
  box-shadow:var(--sh-2); padding:clamp(26px,3.2vw,44px);
  display:grid; gap:20px; max-width:720px;
}
.fld{display:grid; gap:8px}
.fld.two{grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:600px){ .fld.two{grid-template-columns:1fr} }
.fld label{
  font-family:"Roboto Condensed",sans-serif; font-size:.85rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--gris-2);
}
.fld input, .fld select, .fld textarea{
  font:inherit; color:var(--encre); width:100%;
  padding:14px 16px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:var(--brume);
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.fld textarea{min-height:130px; resize:vertical}
.fld input:focus, .fld select:focus, .fld textarea:focus{
  outline:none; border-color:var(--marine); background:var(--paper);
}
.form-note{font-size:.86rem; color:var(--gris); max-width:62ch}
/* pot de miel : hors ecran, jamais display:none (certains robots l'ignorent) */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-etat{color:var(--teal-deep); font-weight:700}
.form-erreur{color:var(--framboise-deep); font-weight:700}
.form [disabled]{opacity:.6; cursor:progress}
.form .btn{justify-self:start}

/* ----------------------------------------------------------- cta final -- */
.cta-final{text-align:center; padding-block:clamp(96px,11vw,150px)}
.cta-final h2{max-width:20ch; margin-inline:auto}
.cta-final .lead{max-width:52ch; margin:22px auto 0}
.cta-final .btn-row{justify-content:center; margin-top:34px}
.cta-mark{width:auto; height:74px; margin:0 auto 30px; object-fit:contain}

/* ------------------------------------------------------------- footer --- */
.ftr{background:var(--marine-deep); color:var(--paper); padding-block:clamp(56px,6vw,78px) 34px}
.ftr-top{display:grid; gap:clamp(34px,4vw,56px)}
@media (min-width:860px){ .ftr-top{grid-template-columns:1.4fr repeat(3,1fr)} }
.ftr .brand .lockup{height:34px; filter:brightness(0) invert(1)}
.ftr-note{margin-top:18px; color:var(--grey-dark); font-size:.94rem; max-width:34ch}
.ftr h4{
  font-family:"Roboto Condensed",sans-serif; font-size:.82rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--grey-dark); margin:0 0 16px;
}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.ftr ul a{font-size:.95rem; color:#D9DCEA; transition:color .25s var(--ease)}
.ftr ul a:hover{color:var(--framboise)}
.ftr-bot{
  margin-top:clamp(44px,5vw,64px); padding-top:24px; border-top:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center;
  font-size:.86rem; color:var(--grey-dark);
}
.ftr-bot .sep{margin-left:auto}
.ftr-bot a{color:var(--grey-dark)}
.ftr-bot a:hover{color:var(--paper)}

/* ------------------------------------------------------ page interieure - */
.page-hero{padding-top:clamp(26px,3.4vw,44px); padding-bottom:clamp(52px,6vw,80px); overflow-x:clip; overflow-y:visible}
.crumb{font-size:.86rem; color:var(--gris); margin-bottom:22px; display:flex; gap:9px; align-items:center}
.crumb svg{width:13px; height:13px; color:var(--line-2)}
.crumb a:hover{color:var(--marine)}
.page-hero h1{font-size:clamp(2.35rem,5vw,3.7rem); max-width:17ch}
.page-hero .lead{margin-top:22px; max-width:54ch}
.page-hero .btn-row{margin-top:30px}

.split{display:grid; gap:clamp(34px,4.4vw,64px); align-items:center}
@media (min-width:920px){ .split{grid-template-columns:1fr 1fr} }
.split.rev > *:first-child{order:2}
@media (max-width:919px){ .split.rev > *:first-child{order:0} }

.metrics{display:grid; gap:16px; margin-top:clamp(34px,4vw,48px)}
@media (min-width:700px){ .metrics{grid-template-columns:repeat(4,1fr)} }
.metric{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper); padding:26px; box-shadow:var(--sh-1)}
.metric .num{
  font-family:"Roboto Condensed",sans-serif;
  font-size:clamp(2rem,3.4vw,2.7rem); font-weight:700; letter-spacing:-.01em; line-height:1;
  color:var(--marine); font-variant-numeric:tabular-nums;
}
.metric p{margin-top:12px; font-size:.92rem; color:var(--gris-2)}
.on-dark .metric, .on-ink .metric{background:rgba(255,255,255,.05); border-color:var(--line-dark)}
.on-dark .metric .num{color:var(--paper)}
.on-dark .metric p{color:var(--grey-dark)}

.checks{display:grid; gap:14px; margin-top:28px; padding:0; list-style:none}
.checks li{display:flex; gap:13px; align-items:flex-start; font-size:1rem; color:var(--gris-2)}
.checks svg{width:20px; height:20px; flex:none; margin-top:2px; color:var(--teal-deep)}
.on-dark .checks li{color:var(--grey-dark)}

/* liste de fonctions, page produit */
.feats{display:grid; gap:14px; margin-top:clamp(30px,3.4vw,44px)}
@media (min-width:640px){ .feats{grid-template-columns:1fr 1fr} }
@media (min-width:980px){ .feats{grid-template-columns:repeat(3,1fr)} }
.feat{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper);
  padding:22px 24px; display:flex; gap:14px; align-items:flex-start; box-shadow:var(--sh-1);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.feat:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.feat svg{width:20px; height:20px; flex:none; margin-top:3px; color:var(--marine)}
.feat b{font-family:"Roboto Condensed",sans-serif; font-weight:700; font-size:1.06rem; display:block; margin-bottom:3px}
.feat p{font-size:.92rem; color:var(--gris-2)}

/* corps editorial, pages legales */
.prose{max-width:72ch; display:grid; gap:20px; font-size:1rem; color:var(--gris-2)}
.prose h2{font-size:clamp(1.4rem,2.2vw,1.75rem); color:var(--marine); margin-top:22px}
.prose h3{font-size:1.14rem; color:var(--encre); margin-top:12px}
.prose ul{margin:0; padding-left:22px; display:grid; gap:9px}
.prose a{color:var(--marine); text-decoration:underline; text-underline-offset:3px}
.prose strong{color:var(--encre)}


/* ====================================================================== */
/*  Motifs repris de la DA UNIMEV                                         */
/* ====================================================================== */

/* --- mosaique de tuiles pleines et vides, deux rangees decalees --------
   Le motif signature d'unimev.fr : des rectangles arrondis de largeurs
   inegales, les uns en aplat degrade porteurs d'un mot, les autres vides
   avec un simple filet de couleur. La rangee du bas est decalee. */
.tiles{padding-block:clamp(46px,5.4vw,72px)}
.tiles-scroll{overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none}
.tiles-scroll::-webkit-scrollbar{display:none}
.tiles-row{display:flex; gap:12px; justify-content:center; flex-wrap:nowrap; min-width:max-content}
.tiles-row + .tiles-row{margin-top:12px; transform:translateX(-58px)}
.tile{
  border-radius:var(--r-xs); height:74px; flex:none;
  display:flex; align-items:center; justify-content:center;
  padding-inline:26px; text-align:center;
  font-family:"Roboto Condensed",sans-serif; font-size:1rem; font-weight:700;
  letter-spacing:.01em; color:#fff; white-space:nowrap;
}
.tile-void{background:var(--paper); border:1px solid var(--marine); padding:0}
.tile-void.f{border-color:var(--framboise)}
.tile-void.v{border-color:#6E2C8F}
.tile-marine{background:linear-gradient(115deg, var(--marine-deep) 0%, #0A1030 100%)}
.tile-violet{background:linear-gradient(115deg, #2A1E6B 0%, #6E2C8F 100%)}
.tile-framboise{background:linear-gradient(115deg, #6E2C8F 0%, var(--framboise) 100%)}
.tile-encre{background:linear-gradient(115deg, #2B0A22 0%, #7A0B45 100%)}
@media (max-width:900px){
  .tile{height:62px; font-size:.92rem; padding-inline:18px}
  .tiles-row + .tiles-row{transform:translateX(-28px)}
}

/* --- sparkles quatre branches, en decor sur les cartes ----------------- */
.spark{position:absolute; pointer-events:none; color:var(--framboise); opacity:.92}
.spark svg{width:100%; height:auto; display:block}
.spark-a{width:34px; top:22px; right:28px; transform:rotate(14deg)}
.spark-b{width:21px; bottom:28px; right:66px; transform:rotate(-8deg)}
.spark-c{width:48px; bottom:-16px; left:-18px; transform:rotate(20deg); opacity:.5}
.cell .spark, .quote .spark{color:var(--marine)}
.cell-dark .spark{color:var(--framboise)}
.quote .spark-a{top:28px; right:36px}
@media (max-width:700px){ .spark-b, .spark-c{display:none} }


/* --- murs de logos, les vrais assets du client ------------------------- */
/* Bande defilante en deux rangees opposees, comme le carrousel de leur site.
   Le contenu est duplique une fois : la boucle est donc sans couture. */
.marquee{
  margin-top:clamp(36px,4.4vw,52px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee-row{display:flex; overflow:hidden; width:100%}
.marquee-row + .marquee-row{margin-top:clamp(18px,2.2vw,30px)}
.marquee-track{
  display:flex; align-items:center; flex:none;
  gap:clamp(34px,4.6vw,72px); padding-inline:clamp(17px,2.3vw,36px);
  animation:mq-left 46s linear infinite;
}
.marquee-row.rev .marquee-track{animation-name:mq-right; animation-duration:52s}
@keyframes mq-left{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes mq-right{ from{transform:translateX(-50%)} to{transform:translateX(0)} }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track{animation-play-state:paused}

.marquee img{
  /* deux plafonds, pas un : sur la seule hauteur, un logotype tres large
     (Standing Events, Activise) ecrase les marques carrees a cote de lui. */
  height:clamp(38px,4.4vw,56px); width:auto; object-fit:contain;
  max-width:clamp(112px,13vw,168px); max-height:clamp(38px,4.4vw,56px);
  flex:none; opacity:.86;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.marquee img:hover{opacity:1; transform:translateY(-3px)}

/* Mouvement reduit, ou pas d'animation possible : grille statique centree,
   et la copie de bouclage est masquee pour ne pas doubler chaque logo. */
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none; mask-image:none}
  .marquee-row{overflow:visible}
  .marquee-track{
    animation:none; flex:1 1 auto; width:100%; min-width:0;
    flex-wrap:wrap; justify-content:center; row-gap:clamp(22px,3vw,34px);
  }
  .marquee [data-clone]{display:none}
}
.no-motion{}
.no-motion .marquee{-webkit-mask-image:none; mask-image:none}
.no-motion .marquee-row{overflow:visible}
.no-motion .marquee-track{
  animation:none; flex:1 1 auto; width:100%; min-width:0;
  flex-wrap:wrap; justify-content:center; row-gap:clamp(22px,3vw,34px);
}
.no-motion .marquee [data-clone]{display:none}

/* mur statique, pour la gouvernance (3 logotypes seulement) */
.logo-wall{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(30px,4.8vw,68px); margin-top:clamp(36px,4.4vw,52px);
}
.logo-wall img{
  height:clamp(32px,3.8vw,50px); width:auto; object-fit:contain;
  opacity:.94; transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.logo-wall img:hover{opacity:1; transform:translateY(-3px)}
.badge-abc{height:clamp(74px,8vw,104px); width:auto; flex:none}
@media (max-width:560px){
  .marquee img{height:34px}
  .marquee-track{gap:30px}
  .logo-wall{gap:26px 32px} .logo-wall img{height:34px}
}

/* --- trace ondule degrade, separateur de section ----------------------- */
.squiggle{display:block; width:100%; height:auto}
.squiggle path{fill:none; stroke:url(#sq-grad); stroke-width:3; stroke-linecap:round}

/* --- libelle de stat facon UNIMEV : regular, puis gras ----------------- */
.stat-lb{display:block; margin-top:14px; font-size:1rem; line-height:1.42; color:var(--grey-dark)}
.stat-lb b{font-weight:700; color:var(--paper)}


/* ====================================================================== */
/*  Page « démarche graphique » : avant / après et justification          */
/* ====================================================================== */

.ba{display:grid; gap:clamp(26px,3vw,40px); margin-top:clamp(40px,5vw,60px)}
.ba-pair{
  display:grid; gap:16px;
  border:1px solid var(--line); border-radius:var(--r-xl); background:var(--paper);
  padding:clamp(18px,2.2vw,26px); box-shadow:var(--sh-1);
}
@media (min-width:900px){ .ba-shots{grid-template-columns:1fr 1fr} }
.ba-shots{display:grid; gap:16px}
.ba-shot{position:relative; margin:0; border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--line-2); background:var(--brume); box-shadow:var(--sh-1)}
.ba-shot img{width:100%; height:auto; display:block}
/* L'etiquette est un bandeau AU-DESSUS de la capture, pas une pastille posee
   dessus : en superposition elle masquait le titre de la section capturee. */
.ba-cap{
  display:flex; align-items:center; gap:9px;
  padding:11px clamp(13px,1.4vw,17px);
  border-bottom:1px solid var(--line); background:var(--brume);
  font-family:"Roboto Condensed",sans-serif; font-size:.78rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gris-2);
}
.ba-cap::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--gris); flex:none}
.ba-cap.now{color:var(--framboise)}
.ba-cap.now::before{background:var(--framboise)}
.ba-why{display:grid; gap:12px clamp(30px,4vw,60px); padding:clamp(8px,1.2vw,14px) 4px 4px}
/* Deux colonnes sous les captures : sur 1 180 px, une seule colonne donnait
   des lignes de 110 caracteres, illisibles. Le titre et l'etiquette gardent
   toute la largeur, le corps se scinde. */
@media (min-width:880px){
  .ba-why{grid-template-columns:1fr 1fr}
  .ba-why .lbl, .ba-why h3{grid-column:1 / -1}
}
.ba-why h3{font-size:clamp(1.12rem,1.5vw,1.3rem); max-width:44ch}
.ba-why p{color:var(--gris-2); font-size:.96rem; max-width:54ch}
.ba-why p strong{color:var(--encre)}
.ba-why .lbl{
  font-family:"Roboto Condensed",sans-serif; font-size:.78rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--framboise);
}

/* constats chiffres, en tete de page */
.facts{display:grid; gap:16px; margin-top:clamp(36px,4.4vw,52px)}
@media (min-width:760px){ .facts{grid-template-columns:repeat(3,1fr)} }
.fact{
  border:1px solid var(--line-dark); border-radius:var(--r-lg);
  background:rgba(255,255,255,.05); padding:clamp(24px,2.8vw,32px);
}
.fact .n{
  font-family:"Roboto Condensed",sans-serif; font-size:clamp(2.2rem,4vw,3rem);
  font-weight:700; line-height:1; color:var(--paper); font-variant-numeric:tabular-nums;
}
.fact .n small{font-size:.4em; color:var(--framboise); margin-left:.16em; vertical-align:.5em}
.fact p{margin-top:14px; color:var(--grey-dark); font-size:.97rem}

/* nuancier : d'ou vient chaque couleur */
.swatches{display:grid; gap:14px; margin-top:clamp(30px,3.4vw,42px)}
@media (min-width:620px){ .swatches{grid-template-columns:repeat(2,1fr)} }
@media (min-width:980px){ .swatches{grid-template-columns:repeat(4,1fr)} }
.swatch{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper);
  overflow:hidden; box-shadow:var(--sh-1);
}
/* un aplat tres clair a besoin d'un filet, sinon il disparait sur le blanc */
.swatch .chip{height:88px; display:block; box-shadow:inset 0 0 0 1px rgba(41,45,47,.10)}
.swatch .meta{padding:16px 18px 18px}
.swatch b{
  font-family:"Roboto Condensed",sans-serif; font-size:1.04rem; font-weight:700;
  display:block; letter-spacing:.01em;
}
.swatch code{
  display:block; margin-top:3px; font-size:.84rem; letter-spacing:.06em;
  color:var(--gris); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.swatch p{margin-top:10px; font-size:.9rem; color:var(--gris-2)}

/* decisions : constat, decision, pourquoi */
.calls{display:grid; gap:16px; margin-top:clamp(36px,4.4vw,52px)}
@media (min-width:820px){ .calls{grid-template-columns:1fr 1fr} }
.call{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper);
  padding:clamp(24px,2.6vw,32px); box-shadow:var(--sh-1); display:grid; gap:12px;
  align-content:start;
}
.call h3{margin-bottom:2px}
.call dl{margin:0; display:grid; gap:10px}
.call dt{
  font-family:"Roboto Condensed",sans-serif; font-size:.76rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--gris);
}
.call dd{margin:0; font-size:.97rem; color:var(--gris-2)}
.call dd + dt{margin-top:6px}
.call .why{color:var(--encre)}

/* tableau de recette */
.audit{
  margin-top:clamp(34px,4vw,48px); border:1px solid var(--line-dark);
  border-radius:var(--r-lg); overflow:hidden;
}
.audit table{width:100%; border-collapse:collapse; font-size:.96rem}
.audit th, .audit td{padding:15px clamp(16px,2vw,24px); text-align:left}
.audit thead th{
  font-family:"Roboto Condensed",sans-serif; font-size:.78rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--grey-dark);
  background:rgba(255,255,255,.06);
}
.audit tbody tr{border-top:1px solid var(--line-dark)}
.audit tbody td{color:var(--grey-dark)}
.audit tbody td:first-child{color:var(--paper)}
.audit .ok{color:var(--teal); font-weight:700; white-space:nowrap}
.audit-scroll{overflow-x:auto}
.audit-scroll table{min-width:520px}


/* --- liens sortants du pied de page ----------------------------------- */
.ftr-note a{color:var(--paper); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.ftr-note a:hover{color:var(--framboise)}
.ftr-bot a[target]{color:var(--paper); text-decoration:underline; text-underline-offset:3px}
.ftr-bot a[target]:hover{color:var(--framboise)}
.ftr-social{list-style:none; margin:20px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.ftr-social a{
  display:inline-flex; align-items:center; padding:8px 13px; border-radius:var(--r-pill);
  border:1px solid var(--line-dark); color:#D9DCEA;
  font-family:"Roboto Condensed",sans-serif; font-size:.8rem; font-weight:700; letter-spacing:.05em;
  transition:border-color .25s var(--ease), color .25s var(--ease), background-color .25s var(--ease);
}
.ftr-social a:hover{color:var(--paper); border-color:rgba(255,255,255,.42); background:rgba(255,255,255,.07)}

/* --- article de blog --------------------------------------------------- */
/* un titre d'article est long : 17ch le cassait en six lignes */
article .page-hero h1{max-width:26ch; font-size:clamp(2.1rem,3.8vw,3.1rem)}
article .page-hero{padding-bottom:clamp(34px,3.6vw,50px)}
.article-meta{
  margin-top:20px; font-family:"Roboto Condensed",sans-serif; font-size:.9rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--framboise);
}
/* La colonne de texte se plafonne sur les BLOCS de texte, pas sur le conteneur :
   .prose est une grille, une figure large y elargissait la colonne implicite et
   etirait tous ses freres, jusqu'a passer sous le sommaire. */
.article-body{max-width:none}
.article-body > p,
.article-body > ul,
.article-body > ol,
.article-body > h2,
.article-body > blockquote,
.article-body > .article-retour{max-width:68ch}
.article-body h2{
  font-size:clamp(1.42rem,2.3vw,1.85rem); color:var(--marine);
  margin-top:clamp(20px,2.6vw,34px);
}
.article-body h2:first-child{margin-top:0}
.article-body p{line-height:1.72}
.article-body ul{padding-left:20px}
.article-body li{line-height:1.66}
.article-body blockquote{
  margin:6px 0; padding:18px 24px; border-left:3px solid var(--framboise);
  background:var(--brume); border-radius:0 var(--r-md) var(--r-md) 0;
  font-size:1.04rem; color:var(--encre);
}
.article-retour{margin-top:clamp(34px,4vw,48px)}
.article-retour a{
  display:inline-flex; align-items:center; gap:9px;
  font-family:"Roboto Condensed",sans-serif; font-size:.95rem; font-weight:700;
  letter-spacing:.04em; color:var(--marine);
}
.article-retour svg{width:15px; height:15px; flex:none; transform:rotate(180deg)}
.article-retour a:hover{color:var(--framboise)}

/* le titre de carte devient cliquable : la zone de clic couvre la carte */
.post h3 a{color:inherit}
.post h3 a::after{content:""; position:absolute; inset:0}
.post:hover h3 a{color:var(--marine)}


/* --- visuels des articles ---------------------------------------------- */
.article-cover{
  margin:0 0 clamp(28px,3.2vw,44px); max-width:1000px;
  border-radius:var(--r-xl); overflow:hidden; background:var(--brume);
  box-shadow:var(--sh-2); line-height:0;
}
.article-cover img{width:100%; height:auto; display:block; aspect-ratio:3/2; object-fit:cover}
/* un visuel d'annonce carre perdait 33 % de sa surface, logos compris, en 3/2 */
/* un visuel carre dans un cadre 1000 px laisse trop de vide : on le resserre */
.article-cover.contient{max-width:640px; background:var(--paper); box-shadow:var(--sh-1)}
.article-cover.contient img{aspect-ratio:auto; object-fit:contain; max-height:540px; margin-inline:auto; width:auto; max-width:100%}
.article-body figure{
  /* la figure prend toute la colonne de lecture, plus large que la mesure de
     texte : c'est le contraste editorial voulu, sans jamais deborder. */
  margin:clamp(22px,2.8vw,34px) 0; width:100%; max-width:none;
  border-radius:var(--r-lg); overflow:hidden; background:var(--brume); line-height:0;
}
.article-body figure img{width:100%; height:auto; display:block}
.article-body figcaption{
  padding:13px 18px; font-size:.88rem; line-height:1.5; color:var(--gris);
  background:var(--brume);
}

/* vignette de carte : elle deborde jusqu'aux bords de la carte */
.post{overflow:hidden}
.post-vignette{
  width:calc(100% + 2 * clamp(22px,2.4vw,28px));
  margin:calc(-1 * clamp(22px,2.4vw,28px)) calc(-1 * clamp(22px,2.4vw,28px)) 6px;
  aspect-ratio:16/10; object-fit:cover; display:block; background:var(--brume);
}
.post-vignette.contient{object-fit:contain; background:var(--paper)}


/* --- temoignages : visuels du client, citation incrustee --------------- */
.temoins{display:grid; gap:18px; margin-top:clamp(38px,4.6vw,54px)}
@media (min-width:760px){ .temoins{grid-template-columns:repeat(3,1fr)} }
.temoin{
  margin:0; border-radius:var(--r-lg); overflow:hidden; background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh-1);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.temoin:hover{transform:translateY(-4px); box-shadow:var(--sh-2)}
.temoin img{width:100%; height:auto; display:block; aspect-ratio:4/5; object-fit:cover}
.temoin figcaption{padding:18px clamp(18px,2vw,24px) 20px; display:grid; gap:3px}
.temoin b{font-family:"Roboto Condensed",sans-serif; font-size:1.06rem; font-weight:700; color:var(--marine)}
.temoin span{font-size:.9rem; color:var(--gris-2)}


/* ====================================================================== */
/*  Lecture d'un article : sommaire, encadre de resume, rythme            */
/* ====================================================================== */

/* barre de progression de lecture, posee sous la barre de menu */
.lecture{position:sticky; top:0; z-index:50; height:3px; background:transparent; margin-top:-3px}
.lecture-barre{display:block; height:100%; width:0; background:var(--framboise); transition:width .1s linear}
.no-motion .lecture{display:none}

.article-grille{display:grid; gap:clamp(30px,3.6vw,56px); align-items:start}
@media (min-width:1080px){ .article-grille{grid-template-columns:minmax(0,1fr) 262px} }

/* --- sommaire ---------------------------------------------------------- */
.sommaire{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper);
  padding:22px 24px; box-shadow:var(--sh-1); order:-1;
}
@media (min-width:1080px){ .sommaire{position:sticky; top:118px; order:0} }
.sommaire h2{
  font-size:.8rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--gris); margin:0 0 14px;
}
.sommaire ol{margin:0; padding:0; list-style:none; counter-reset:som; display:grid; gap:2px}
.sommaire li{counter-increment:som}
.sommaire a{
  display:flex; gap:10px; padding:8px 10px; border-radius:var(--r-xs);
  font-size:.92rem; line-height:1.4; color:var(--gris-2);
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.sommaire a::before{
  content:counter(som); flex:none; width:19px;
  font-family:"Roboto Condensed",sans-serif; font-weight:700; color:var(--line-2);
  transition:color .2s var(--ease);
}
.sommaire a:hover{color:var(--marine); background:var(--marine-wash)}
.sommaire a.is-on{color:var(--marine); background:var(--marine-wash); font-weight:700}
.sommaire a.is-on::before{color:var(--framboise)}

/* --- encadre « en quelques mots » -------------------------------------- */
.resume{
  margin:clamp(20px,2.4vw,30px) 0; padding:clamp(22px,2.6vw,30px);
  border-radius:var(--r-lg); background:var(--marine); color:var(--paper);
  display:grid; gap:12px;
}
.resume-t{
  font-size:.82rem !important; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--framboise) !important; margin:0 !important;
}
.resume ul{margin:0; padding:0; list-style:none; display:grid; gap:12px}
.resume li{
  position:relative; padding-left:26px; color:#D9DCEA; font-size:.98rem; line-height:1.55;
}
.resume li::before{
  content:""; position:absolute; left:0; top:.52em; width:11px; height:11px;
  background:var(--framboise);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1 8.4 3.6 11 12 12-8.4 1-11 3.6-12 12-1-8.4-3.6-11-12-12C8.4 11 11 8.4 12 0z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1 8.4 3.6 11 12 12-8.4 1-11 3.6-12 12-1-8.4-3.6-11-12-12C8.4 11 11 8.4 12 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.resume strong{color:var(--paper)}

/* --- rythme du corps ---------------------------------------------------- */
.article-body{font-size:1.04rem}
.article-body h2{
  position:relative; padding-top:clamp(12px,1.4vw,18px);
  margin-top:clamp(30px,3.4vw,46px); scroll-margin-top:120px;
}
.article-body h2::before{
  content:""; position:absolute; top:0; left:0; width:42px; height:3px;
  border-radius:2px; background:var(--framboise);
}
.article-body h2:first-child{margin-top:0}
.article-body > p:first-of-type{font-size:1.12rem; line-height:1.66; color:var(--encre)}
.article-body ul{padding-left:0; list-style:none; display:grid; gap:11px}
.article-body ul li{position:relative; padding-left:24px}
.article-body ul li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:7px; height:7px; border-radius:50%; background:var(--teal);
}
.article-body .resume ul li::before{border-radius:0; background:none}
.article-retour{border-top:1px solid var(--line); padding-top:clamp(26px,3vw,36px)}

@media (max-width:560px){
  .sommaire{padding:18px 18px}
  .article-body{font-size:1rem}
}

/* ------------------------------------------------------------ reveals --- */
.rv{opacity:0; transform:translateY(22px)}
.no-gsap .rv, .no-motion .rv{opacity:1; transform:none}
.no-motion .prob-say .w{opacity:1}
.no-motion .step{background:rgba(255,255,255,.08)}
[data-draw]{stroke-dasharray:1; stroke-dashoffset:0}
.no-gsap [data-draw], .no-motion [data-draw]{stroke-dasharray:none; stroke-dashoffset:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ------------------------------------------------------------- mobile --- */
@media (max-width:900px){
  .nav{display:none}
  .hdr-cta{margin-left:auto; gap:10px}
  .hdr-cta .link-quiet{display:none}
  .burger{display:flex}
  .hdr-in{padding:9px 9px 9px 16px}
  .steps-stage{position:static}

  .brand{min-height:44px; align-items:center}
  .ftr .brand{min-height:48px}
  .ftr ul{gap:2px}
  .ftr ul a{display:inline-block; padding:11px 0; min-height:44px}
  .ftr-bot{gap:4px 20px}
  .ftr-bot a{display:inline-block; padding:10px 0}
  .pillar .more{padding:12px 0; margin-top:16px}
  .post .more{padding:10px 0}
  .crumb a{display:inline-block; padding:9px 0}
  .qa summary{padding-block:20px; min-height:56px}

  .kicker{font-size:.78rem; letter-spacing:.15em}
  .panel-bar .tag{font-size:.74rem}
  .step-n{font-size:.78rem}
  .post .date{font-size:.78rem}
  .ftr h4{font-size:.82rem}

  :root{--sp:clamp(64px, 13vw, 96px)}
  .prob{padding-block:clamp(72px,15vw,110px)}
  .cta-final{padding-block:clamp(72px,15vw,110px)}
  .hero{padding-bottom:clamp(48px,10vw,72px)}

  .hero .btn-row .btn, .cta-final .btn-row .btn, .form .btn{width:100%; justify-content:center}
  .hero .btn-row, .cta-final .btn-row{width:100%; gap:10px}
  .hero-meta{gap:8px 18px}
}

.hdr.nav-open .hdr-in{
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
          backdrop-filter:blur(14px) saturate(1.6);
  border-color:var(--line); box-shadow:var(--sh-2);
}
.nav-open .burger{background:var(--marine); border-color:var(--marine); color:var(--paper)}
.nav-open .nav{
  display:grid; position:absolute; left:var(--gut); right:var(--gut); top:calc(100% + 10px);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:12px; box-shadow:var(--sh-2); gap:2px; margin-left:0;
}
.nav-open .nav a{padding:14px 16px; border-radius:var(--r-sm)}

@media (max-width:560px){
  body{font-size:16px}
  .hdr-cta .btn{padding:10px 16px; font-size:.86rem}
  .btn{padding:13px 22px}
  .brand .lockup{height:26px}
  .quote{padding:24px 20px}
  .panel-body{padding:12px}
  .panel-bar{padding:11px 14px}
  .stage-card{padding:10px}
  .steps-list{gap:12px}
  .step{padding:20px 18px}
  .bento{gap:12px}
  .pillars{gap:12px}
  .plans{gap:14px}
  .plan{padding:24px 22px}
  .form{padding:24px 20px}
}


/* ---- utilitaires : anciens styles en ligne ---- */
.cv-s1 { width:158px !important; }
.cv-s2 { width:62px !important; }
.cv-s3 { width:46px !important; }
.cv-s4 { width:50px !important; }
.cv-s5 { width:176px !important; }
.cv-s6 { margin-top:clamp(40px,5vw,60px) !important; }
.cv-s7 { margin:0 auto 22px !important; }
.cv-s8 { filter:brightness(0) invert(1) !important; }
.cv-s9 { padding-top:0 !important; }
.cv-s10 { margin-top:20px !important; }
.cv-s11 { margin-top:28px !important; }
.cv-s12 { grid-template-columns:1fr 1fr !important; margin-top:0 !important; }
.cv-s13 { background:var(--marine) !important; }
.cv-s14 { border-color:transparent !important; }
.cv-s15 { background:var(--marine-deep) !important; }
.cv-s16 { align-items:start !important; }
.cv-s17 { margin-top:24px !important; }
.cv-s18 { margin-top:34px !important; }
.cv-s19 { margin-top:14px !important; font-size:.92rem !important; }

/* pot de miel du noyau (lead_form_fields) : hors écran */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Cleo : gabarits du blog (CMS) */
.cl-article { padding-top: clamp(24px, 2.8vw, 36px); }