/* ==========================================================================
   600ml - Décor de l'accueil
   Fond blanc, et des rubans qui traversent trois blocs de cartes. Le décor
   animé d'origine (orbes floutées, voile, grain coloré) est neutralisé : sur
   une page longue, il posait de la couleur sous chaque paragraphe.

   .acc-a  fond blanc seul, conservé pour comparaison dans site/proto/
   .acc-b  fond blanc plus rubans — c'est la variante publiée
   ========================================================================== */

body.acc-a,body.acc-b{background:#fff}

/* Le décor animé (orbes floutées, voile, grain) met de la couleur sous chaque
   paragraphe. On le retire : la grille seule suffit à éviter le vide. */
body.acc-a #bg .orb,body.acc-b #bg .orb,
body.acc-a #bg .veil,body.acc-b #bg .veil,
body.acc-a #grain,body.acc-b #grain{display:none}
body.acc-a #bg,body.acc-b #bg{background:#fff}
body.acc-a #bg .grid,body.acc-b #bg .grid{opacity:.55}

/* Surfaces : opaques, un filet net, une ombre discrète. Sur fond blanc, le
   verre dépoli n'a plus rien à laisser transparaître. */
body.acc-a .glass,body.acc-b .glass,
body.acc-a .faq-item,body.acc-b .faq-item,
body.acc-a .metier,body.acc-b .metier,
body.acc-a .btn-ghost,body.acc-b .btn-ghost{
  background:#fff;
  border:1px solid rgba(20,16,31,.09);
  box-shadow:0 1px 2px rgba(20,16,31,.04), 0 10px 26px -14px rgba(20,16,31,.16);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
body.acc-a .glass::after,body.acc-b .glass::after{display:none}
body.acc-a #nav .bar,body.acc-b #nav .bar{
  background:rgba(255,255,255,.95);
  border:1px solid rgba(20,16,31,.09);
  box-shadow:0 1px 2px rgba(20,16,31,.04), 0 10px 30px -18px rgba(20,16,31,.3);
}

/* --------------------------------------------------------------------------
   B — rubans
   Des bandes organiques parcourent la page, chacune faite de quatre traits
   parallèles sur une même ondulation : un trait épais qui porte la couleur,
   des traits fins qui la relancent. Ce décalage donne une bande vrillée, pas
   une tache floutée.

   Le décor n'est plus fixe : il défile avec la page, sinon les rubans
   resteraient immobiles sous le contenu et l'effet de profondeur tomberait.
   -------------------------------------------------------------------------- */
/* Sans repère positionné, la hauteur en pourcentage du décor se calculerait
   contre la fenêtre : les quatre rubans se retrouveraient empilés sur le
   premier écran. On positionne donc le corps de page. */
body.acc-b{position:relative}
body.acc-b #bg{position:absolute;top:0;left:0;right:0;height:100%;overflow:hidden}
body.acc-b #bg .grid{opacity:.5}

/* Chaque ruban est ancré dans sa section, pas à un pourcentage de la hauteur
   du document : cette hauteur change avec la fenêtre, et les rubans
   dérivaient. Les trois sections choisies sont bâties sur des cartes, qui
   masquent le ruban là où il passerait sous du texte. Le hero n'en reçoit
   aucun : titre, promesse et premier bouton restent sur du blanc franc. */
/* Les rubans sont ancres dans le bloc de cartes, pas dans la section. C'est
   la seule garantie structurelle qu'ils ne passeront jamais sous du texte nu :
   le chapo et les titres vivent au-dessus de ces blocs, hors de portee. */
body.acc-b .bento,body.acc-b .steps,body.acc-b .faq-list{position:relative;isolation:isolate}
body.acc-b .rib{
  position:absolute;z-index:-1;pointer-events:none;
  left:50%;translate:-50% 0;max-width:none;
  /* Le cadre decoupe : un trait qui deborderait irait se glisser sous le
     paragraphe place au-dessus du bloc. Les courbes restent a l'interieur,
     donc la decoupe ne se voit jamais. */
  overflow:hidden;
}
body.acc-b .rib-svg{display:block;width:100%;height:100%}

/* Nappes plates : elles s'etirent sur toute la largeur du bloc. */
body.acc-b .rib-1,body.acc-b .rib-3{width:150vw;height:88%;max-height:400px}
body.acc-b .rib-1{top:50%;transform:translateY(-50%) rotate(-2deg)}
body.acc-b .rib-3{top:50%;transform:translateY(-50%) rotate(-1.5deg) scaleX(-1)}

/* La boucle garde ses proportions : etiree, elle s'aplatirait en ellipse et
   le vide central disparaitrait. Elle occupe donc un cadre a son ratio, dans
   le bloc du process qui a la hauteur necessaire. */
body.acc-b .rib-2{
  width:154vw;aspect-ratio:1440/900;height:auto;max-height:82%;
  top:50%;transform:translateY(-50%) rotate(1deg);
}

/* Les rubans sont pleins : les cartes repassent en blanc quasi opaque pour
   que le texte reste lisible quand l'un d'eux passe dessous. Un reste de
   flou conserve la sensation de profondeur. */
body.acc-b .glass,body.acc-b .faq-item,body.acc-b .metier,body.acc-b .btn-ghost{
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 1px 1px rgba(20,16,31,.03), 0 16px 38px -18px rgba(80,40,160,.32);
}
body.acc-b .glass::after{
  display:block;
  background:linear-gradient(160deg,rgba(255,255,255,.5),rgba(255,255,255,0) 44%);
}
body.acc-b #nav .bar{
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.95);
}
body.acc-b #grain{display:block;opacity:.5}

/* Le debord lateral est voulu : les rubans sortent du bloc et filent hors de
   l'ecran. Sans decoupe au niveau de la section, ce debord rallonge le
   document vers la droite et le telephone se met a scroller de travers. La
   coupe tombe pile au bord de l'ecran, la ou le navigateur coupait deja. */
body.acc-b .section:has(.rib){overflow-x:clip}

@media (max-width:860px){
  /* Les rubans restent centres sur le bloc : le debord se repartit des deux
     cotes au lieu de tout pousser a droite. */
  body.acc-b .rib{width:150%}
}
@media (prefers-reduced-transparency:reduce){
  body.acc-b .glass,body.acc-b .faq-item,body.acc-b .metier,
  body.acc-b .btn-ghost,body.acc-b #nav .bar{
    background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;
  }
}