/* =====================================================================
   COMM ONE — accueil.css (page d'accueil uniquement)
   Hero « Le Grand Rangement », cartes d'offres, Pour qui, méthode, ancrage.
   ===================================================================== */

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero{margin-top:calc(-1*var(--head-h));padding:calc(var(--head-h) + clamp(32px,6vw,72px)) 0 clamp(56px,8vw,104px);
  border-radius:0 0 var(--r-xl) var(--r-xl);overflow:hidden;position:relative;z-index:0}
.hero-in{display:grid;gap:clamp(32px,5vw,64px);align-items:center}
@media (min-width:1100px){.hero-in{grid-template-columns:1.05fr 1fr}}
.hero-copy{position:relative;z-index:2;max-width:40rem}
.hero-kicker{margin-bottom:24px;white-space:normal}
.hero-kicker .dot{background:var(--citron)}
.hero-title{color:var(--lait)}
.hero-title .t1,.hero-title .t2{display:block}
.hero-title .t2{color:var(--citron)}
.hero-title .hw{display:inline-block;transition:transform 900ms var(--spring-soft),opacity 300ms var(--ease-out)}
.hero-sub{margin-top:24px;color:var(--brume)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-reassure{margin-top:20px;color:var(--brume)}
@media (max-width:599px){.hero-cta .btn{width:100%}}

/* entrée du texte (une fois) */
.js-motion .hero-kicker,.js-motion .hero-sub,.js-motion .hero-cta,.js-motion .hero-reassure{animation:heroin 640ms var(--ease-out) both}
.js-motion .hero-sub{animation-delay:120ms}.js-motion .hero-cta{animation-delay:220ms}.js-motion .hero-reassure{animation-delay:320ms}
@keyframes heroin{from{opacity:0;transform:translateY(12px)}}
/* h1 : ligne 1 en vrac, ligne 2 arrive rangée au moment du rangement */
.hero-title .t2{transition:opacity 400ms var(--ease-out),transform 640ms var(--spring-soft)}
@media (max-width:899px){.js-motion .hero:not([data-state]) .t2,.js-motion .hero[data-state="01"] .t2{opacity:1;transform:none}}

/* scène */
.hstage{position:relative;display:grid;align-content:center;justify-items:center;gap:20px;min-height:460px;isolation:isolate}
@media (max-width:899px){.hstage{min-height:360px}}
.hbubbles{position:absolute;inset:0;z-index:3;pointer-events:none}
.hrows{position:relative;z-index:2;display:grid;gap:12px;width:min(100%,440px)}
@media (max-width:899px){.hrows{gap:8px;width:100%}}

/* pilule-lien en 3 calques (capuchon gauche, milieu, capuchon droit) */
.hrow{--h:56px;position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;height:var(--h);padding:0 10px 0 26px;border-radius:var(--r-pill);
  color:var(--c-on);text-decoration:none;font:700 1.1875rem/1 var(--f-titre);letter-spacing:-.01em;
  transition:opacity 0s,transform var(--t-sm) var(--ease-out)}
.hp{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hp i{position:absolute;top:0;height:var(--h);background:var(--c)}
.hp-l,.hp-r{width:var(--h);border-radius:50%}
.hp-l{left:0}
.hp-r{right:0;transition:transform 560ms var(--spring-soft)}
.hp-m{left:calc(var(--h)/2);right:calc(var(--h)/2);transform-origin:left center;transition:transform 560ms var(--spring-soft)}
.hrow-lbl{flex:1;transition:opacity 200ms var(--ease-out) 200ms,transform 200ms var(--ease-out) 200ms}
.hrow-dots{display:flex;gap:6px}
.hrow-dots i{width:12px;height:12px;border-radius:50%;background:currentColor;opacity:.42;transition:transform var(--t-sm) var(--ease-out),opacity 200ms}
.hrow-go{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(23,20,42,.16);font-size:1.125rem;transition:opacity 200ms 260ms,transform 240ms var(--spring)}
.o-sites .hrow-go,.o-crm .hrow-go{background:rgba(255,255,255,.2)}
.hrow:hover{transform:translateY(-2px)}
.hrow:hover .hrow-dots i:nth-child(1){transform:translateX(-8px)}.hrow:hover .hrow-dots i:nth-child(2){transform:translateX(-4px)}
.hrow:hover .hrow-dots i:nth-child(4){transform:translateX(4px)}.hrow:hover .hrow-dots i:nth-child(5){transform:translateX(8px)}
.hrow:hover .hrow-go{transform:translateX(4px)}
.hrow:focus-visible{outline-offset:4px}
/* état replié : les 2 capuchons superposés = une bulle */
.hrow.is-col .hp-r{transform:translateX(calc(var(--h) - var(--w,320px)))}
.hrow.is-col .hp-m{transform:scaleX(0)}
.hrow.is-col .hrow-lbl{opacity:0;transform:translateX(-8px);transition-delay:0s}
.hrow.is-col .hrow-dots i,.hrow.is-col .hrow-go{opacity:0;transition-delay:0s}
.hrows.closing .hp-r,.hrows.closing .hp-m{transition:transform 280ms var(--ease-in)}
.hrow.is-hid{opacity:0;pointer-events:none}
/* avant que le JS ne prenne la main : rien ne « clignote » ; filet si le JS échoue */
.js-motion .hero:not([data-state]) .hrow{opacity:0;animation:hsafe 0s 3s forwards}
@keyframes hsafe{to{opacity:1}}

/* bulles en vrac */
.hb{position:absolute;left:0;top:0;width:var(--s);height:var(--s);border-radius:50%;background:var(--c);transform-origin:center;
  animation:hbin 520ms var(--ease-out) both;animation-delay:calc(var(--i,0)*24ms)}
@keyframes hbin{from{opacity:0}}
.hb-l{position:absolute;left:50%;top:50%;translate:-50% -50%;padding:9px 16px;border-radius:var(--r-pill);background:var(--c);color:var(--c-on);
  font:600 .9375rem/1.2 var(--f-texte);white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.25);transition:opacity 200ms var(--ease-out)}
.hero[data-state="02"] .hb-l,.hero[data-state="03"] .hb-l,.hero[data-state="r"] .hb-l{opacity:0}
.hero[data-state="03"] .hb{opacity:0;visibility:hidden}
.hb.gone{opacity:0;transition:opacity 200ms var(--ease-out)!important}

/* pied de scène */
.hfoot{position:relative;z-index:4;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;min-height:48px}
.hstatus{display:inline-flex;align-items:center;gap:8px;color:var(--brume);font-size:var(--fs-small)}
.hstatus i{width:8px;height:8px;border-radius:50%;background:var(--citron)}
.hsort{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border-radius:var(--r-pill);background:var(--nuit-2);color:var(--lait);
  box-shadow:inset 0 0 0 1.5px var(--trait-nuit);font-weight:600;font-size:1rem;transition:transform var(--t-sm) var(--ease-out),background-color var(--t-sm)}
.hsort:hover{background:#2A2545;transform:translateY(-2px)}

/* ── Mosaïque d'accueil : bulles spéciales ───────────────────────── */
.mini-cols{display:flex;gap:6px}
.mini-cols i{font-style:normal;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);background:rgba(23,20,42,.06);font-size:.8125rem;white-space:nowrap}
.mini-cols i::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--k)}
@media (max-width:599px){.mini-cols{flex-direction:column;gap:4px}}
.mz-b .wa{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#25D366;color:#fff;font-size:.75rem}

/* ── Cartes d'offres ─────────────────────────────────────────────── */
.svc-grid{display:grid;gap:clamp(16px,2vw,24px)}
@media (min-width:700px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
.svc-grid>li{display:flex}
.svc{--bub:96px;position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;gap:14px;width:100%;min-height:320px;
  padding:clamp(24px,3vw,32px);border-radius:var(--r-lg);background:var(--c-teinte);color:var(--encre);text-decoration:none;overflow:hidden;
  transition:transform 320ms var(--spring)}
.svc:hover{transform:translateY(-4px)}
.svc>*{position:relative;z-index:1}
.svc .tilt-light{z-index:0}
.svc-bub{position:absolute!important;right:-22px;top:-22px;width:var(--bub);height:var(--bub);z-index:0!important}
.svc-bub-round,.svc-bub-pill{position:absolute;top:0;right:0;height:var(--bub);background:var(--c);color:var(--c-on)}
.svc-bub-round{width:var(--bub);border-radius:50%;display:grid;place-items:center;transition:opacity 160ms var(--ease-out)}
.svc-bub-round svg{width:30px;height:30px;transform:translate(-8px,8px)}
.svc-bub-pill{width:220px;border-radius:var(--r-pill);transform-origin:right center;transform:scaleX(.4364);opacity:0;transition:transform 420ms var(--spring),opacity 160ms}
.svc:hover .svc-bub-pill,.svc:focus-visible .svc-bub-pill{transform:scaleX(1);opacity:1}
.svc:hover .svc-bub-round,.svc:focus-visible .svc-bub-round{opacity:0}
@media (max-width:599px){.svc-bub-pill{width:170px;transform:scaleX(.5647)}}
.svc-pb{font-size:clamp(1.5rem,1.25rem + 1vw,2rem);line-height:1.12;padding-right:56px;margin-top:4px}
.svc-txt{color:var(--encre-2);max-width:30rem}
.svc-tags{display:flex;flex-wrap:wrap;gap:8px}
.svc .lien{margin-top:auto;color:var(--c-txt)}
.svc:focus-visible{border-radius:var(--r-lg)}
.svc-after{margin-top:32px;color:var(--encre-2);text-align:center}

/* ── Bandeau métiers ─────────────────────────────────────────────── */
.metiers-band{padding:24px 0;background:var(--lait);border-block:1px solid var(--trait)}
.metiers-band .mq{width:min(100% - 2*var(--gut),var(--max-wide));margin-inline:auto}
.metiers-band .pill{min-height:44px;padding:0 6px;background:transparent;box-shadow:none;font:700 clamp(1.125rem,1rem + .6vw,1.5rem)/1 var(--f-titre);letter-spacing:-.01em;color:var(--encre)}
.metiers-band .pill::before{content:"";width:6px;height:6px;margin-right:22px;border-radius:50%;background:var(--encre);opacity:.28}
.metiers-band .pill--teinte{color:var(--encre-2)}

/* ── Pour qui : composant partagé css/metiers.css ─────────────────── */
.section--metiers{border-radius:var(--r-xl);margin-inline:clamp(0px,1vw,16px)}

/* ── Comment on travaille ────────────────────────────────────────── */
.how{position:relative}
.how-line{position:absolute;pointer-events:none;overflow:visible}
.how-line path{fill:none;stroke:var(--encre);stroke-opacity:.22;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round}
.how-line--h{left:0;right:0;top:12px;width:100%;height:40px;display:none}
.how-line--v{left:12px;top:0;bottom:0;width:40px;height:100%}
@media (min-width:900px){.how-line--h{display:block}.how-line--v{display:none}}
.how-list{position:relative;display:grid;gap:28px}
@media (min-width:900px){.how-list{grid-template-columns:repeat(4,1fr);gap:24px}}
.how-step{display:grid;grid-template-columns:64px 1fr;column-gap:20px;align-items:start}
.how-step h3{grid-column:2;margin-top:14px}
.how-step p{grid-column:2;margin-top:6px;color:var(--encre-2)}
@media (min-width:900px){.how-step{grid-template-columns:1fr}.how-step h3,.how-step p{grid-column:1}.how-step h3{margin-top:20px}}
.how-n{grid-row:span 2;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--citron);color:var(--encre);
  font:700 1.375rem/1 var(--f-chiffre);box-shadow:0 0 0 6px var(--sable)}

/* ── Ici, pour de vrai ───────────────────────────────────────────── */
.ici{display:grid;gap:clamp(32px,5vw,72px);align-items:center}
@media (min-width:900px){.ici{grid-template-columns:auto 1fr}}
.ici-mark{position:relative;width:clamp(180px,24vw,280px);aspect-ratio:1;justify-self:center}
.ici-93{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--citron);color:var(--encre);
  font:800 clamp(5rem,10vw,8rem)/1 var(--f-titre);letter-spacing:-.04em}
.ici-pin{position:absolute;right:12%;top:10%;width:28px;height:28px;border-radius:50%;background:var(--tomate);box-shadow:0 0 0 6px var(--lait)}
.js-motion .ici-mark.rv-in .ici-pin{animation:pinpop 520ms var(--spring) 300ms both}
@keyframes pinpop{from{transform:scale(0)}}
.ici-copy .prose{margin-top:24px}
.ici-sign{margin-top:16px;font-weight:600}
.ici-tags{margin-top:24px}

/* ── FAQ ─────────────────────────────────────────────────────────── */
.faq-wrap{max-width:880px}
.section--faq{padding-bottom:calc(var(--section) + var(--r-xl))}
/* carte Audit sous la grille d'offres */
@media (min-width:700px){.svc-grid>li:last-child:nth-child(odd){grid-column:1/-1}}
.svc-audit{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;margin-top:clamp(16px,2vw,24px);padding:clamp(20px,3vw,28px) clamp(20px,3vw,32px);
  border-radius:var(--r-lg);background:var(--encre);color:var(--lait);text-decoration:none;transition:transform 320ms var(--spring)}
.svc-audit:hover{transform:translateY(-4px)}
.svc-audit-t b{display:block;font:800 clamp(1.25rem,1.1rem + .6vw,1.625rem)/1.15 var(--f-titre)}
.svc-audit-t span{display:block;margin-top:4px;color:var(--brume)}
.svc-audit-go{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--citron);color:var(--encre);font-size:1.25rem;transition:transform 240ms var(--spring)}
.svc-audit:hover .svc-audit-go{transform:translateX(4px)}
@media (max-width:599px){.svc-audit{grid-template-columns:1fr auto}.svc-audit .pill{grid-column:1/-1;justify-self:start}}