/* ════════════════════════════════════════════════════════════════════
   WEBMA — COMPOSANTS
   Briques reprises par toutes les pages : en-tete flottant, boutons,
   pastilles, cartes, FAQ, bandeau defilant, bloc CTA, pied de page.
   ════════════════════════════════════════════════════════════════════ */

/* ── Marque ────────────────────────────────────────────────────── */
.brand{display:flex;align-items:center;gap:11px;color:inherit}
.brand:hover{color:inherit}
.brand__mark{width:26px;height:26px;color:var(--brand-600)}
.brand__name{
  font-family:var(--font-display);font-size:19px;font-weight:600;
  letter-spacing:-.025em;color:var(--text-primary);
}

/* ── En-tête flottant ──────────────────────────────────────────── */
/* Les hauteurs viennent des tokens --nav-* (mesures du site precedent). */
.site-header{
  position:sticky;top:0;z-index:40;background:transparent;
  padding:var(--nav-offset) var(--gutter) var(--nav-bar-pad);
}
.site-header__bar{
  position:relative;
  width:92%;max-width:var(--nav-width);margin-inline:auto;
  min-height:var(--nav-bar-min);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:var(--nav-bar-pad) var(--nav-bar-pad) var(--nav-bar-pad) 22px;
  background:var(--surface);border-radius:var(--radius-full);box-shadow:var(--shadow-header);
}
.site-header__bar .brand{min-height:var(--nav-logo-h)}

/* Sur grand ecran le groupe disparait de la mise en page : la navigation
   et le bouton redeviennent enfants directs de la barre. */
.site-header__menu{display:contents}

/* Ecart entre les trois liens centraux (desktop ; le menu mobile reste serre). */
.site-nav{display:flex;align-items:center;gap:var(--space-3)}
.site-nav__link{
  padding:9px 16px;border-radius:var(--radius-full);
  font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);
  transition:background .18s ease,color .18s ease;
}
.site-nav__link:hover{background:var(--surface-chip);color:var(--text-primary)}
.site-nav__link[aria-current="page"]{background:var(--brand-050);color:var(--brand-600)}

/* Bouton du menu : masque tant que la barre tient sur une ligne. */
.site-header__toggle{
  display:none;flex:none;width:44px;height:44px;
  align-items:center;justify-content:center;
  background:var(--surface-chip);border:0;border-radius:var(--radius-full);
  cursor:pointer;color:var(--text-primary);
}
.site-header__toggle:hover{background:var(--brand-050);color:var(--brand-600)}
.site-header__burger,
.site-header__burger::before,
.site-header__burger::after{
  display:block;width:18px;height:2px;border-radius:2px;
  background:currentColor;transition:transform .2s ease,opacity .2s ease;
}
.site-header__burger{position:relative}
.site-header__burger::before,
.site-header__burger::after{content:"";position:absolute;left:0}
.site-header__burger::before{top:-6px}
.site-header__burger::after{top:6px}
[aria-expanded="true"] .site-header__burger{background:transparent}
[aria-expanded="true"] .site-header__burger::before{transform:translateY(6px) rotate(45deg)}
[aria-expanded="true"] .site-header__burger::after{transform:translateY(-6px) rotate(-45deg)}

/* ── Menu sous 810 px ──────────────────────────────────────────── */
@media (max-width:809px){
  .site-header{padding-inline:12px}
  .site-header__bar{width:100%;padding-right:var(--nav-bar-pad)}
  .site-header__toggle{display:flex}

  .site-header__menu{
    display:none;flex-direction:column;gap:2px;
    position:absolute;top:calc(100% + var(--nav-bar-pad));left:0;right:0;
    padding:10px;border-radius:22px;
    background:var(--surface);border:1px solid var(--border-lavender);
    box-shadow:var(--shadow-lg);
  }
  .site-header__menu[data-ouvert]{display:flex;animation:wm-menu .18s ease-out}
  .site-header__menu .site-nav{flex-direction:column;align-items:stretch;gap:2px}
  .site-header__menu .site-nav__link{
    display:flex;align-items:center;min-height:52px;
    padding:0 18px;border-radius:14px;font-size:17px;
  }
  .site-header__menu .btn{margin-top:6px;min-height:52px}
}
@keyframes wm-menu{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── Boutons ───────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;cursor:pointer;text-align:center;white-space:nowrap;
  font-family:var(--font-body);font-size:16px;font-weight:600;line-height:1;
  padding:16px 26px;border-radius:var(--radius-full);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--gradient-button);color:var(--text-on-dark)}
.btn--primary:hover{color:var(--text-on-dark);filter:brightness(1.06)}
.btn--ghost{background:var(--surface);color:var(--text-primary);box-shadow:var(--ring-card)}
.btn--ghost:hover{color:var(--text-primary);box-shadow:0 0 0 1px var(--brand-border),var(--shadow-md)}
.btn--light{background:var(--surface);color:var(--text-primary)}
.btn--light:hover{color:var(--text-primary);filter:brightness(.97)}
.btn--dark{background:var(--ink-black);color:var(--text-on-dark)}
.btn--dark:hover{color:var(--text-on-dark);filter:brightness(1.25)}
.btn--sm{font-size:15px;padding:13px 24px}
.btn--lg{padding:17px 30px}

/* ── Pastilles ─────────────────────────────────────────────────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--surface-chip);border-radius:var(--radius-full);
  padding:5px 16px 5px 5px;margin-bottom:18px;
  font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--text-primary);
}
.eyebrow__icon{
  flex:none;width:30px;height:30px;border-radius:var(--radius-full);
  background:var(--slate-400);display:inline-flex;align-items:center;justify-content:center;
}
.eyebrow__icon svg{width:16px;height:16px}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--surface);box-shadow:var(--ring-card);border-radius:var(--radius-full);
  padding:6px 14px;font-family:var(--font-display);font-size:13px;font-weight:500;
  color:var(--text-primary);
}
.tag{
  display:inline-block;background:var(--brand-050);color:var(--brand-600);
  border-radius:var(--radius-sm);padding:4px 10px;
  font-family:var(--font-display);font-size:12.5px;font-weight:500;
}
.badge{
  font-family:var(--font-body);font-size:12px;font-weight:500;
  background:var(--brand-600);color:var(--text-on-dark);
  border-radius:var(--radius-xs);padding:3px 8px;
}

/* ── Cartes ────────────────────────────────────────────────────── */
.card{
  display:flex;flex-direction:column;
  background:var(--gradient-card);border:1px solid var(--border-card);
  border-radius:var(--radius-card);padding:30px;
}
.card--alt{background:var(--gradient-card-alt);padding:28px}
.card--brand{
  background:var(--gradient-card-brand);border-color:var(--brand-border);
  box-shadow:var(--shadow-md);
}
.card--media{padding:20px}
.card__title{
  font-family:var(--font-display);font-size:24px;font-weight:500;
  letter-spacing:-.012em;line-height:1.3;margin-bottom:10px;
}
.card__text{font-size:15px;line-height:1.6;color:var(--text-secondary)}
.card__rule{margin-top:26px;padding-top:24px;border-top:1px solid var(--border-lavender)}

/* Chiffre mis en avant dans une illustration : le nombre, puis sa
   legende en monospace. Sert dans les cartes « notre difference ». */
.stat{display:flex;flex-direction:column;gap:5px}
.stat b{
  font-family:var(--font-display);font-size:var(--text-stat);font-weight:600;
  letter-spacing:-.04em;color:var(--text-primary);line-height:1;
}
.stat span{font-family:var(--font-mono);font-size:var(--text-caption);color:var(--text-muted)}
/* Sur une seule ligne, quand l illustration occupe deja la hauteur. */
.stat--line{flex-direction:row;align-items:baseline;gap:9px}
.stat--line b{font-size:22px}
/* Pousse au bout d une illustration en ligne (barres, equaliseur). */
.stat--end{flex:1;align-items:flex-end;text-align:right}
/* Combinee a --line, c est la justification qui pousse a droite, pas
   l alignement : sinon le nombre et sa legende perdent leur ligne de base. */
.stat--line.stat--end{align-items:baseline;justify-content:flex-end}

/* ── Bandeau défilant ──────────────────────────────────────────── */
/* Pas de bande : ni fond ni filets, juste les noms de clients qui
   traversent la page de la droite vers la gauche. Le masque efface les
   deux bords pour qu aucun nom ne soit coupe net. */
.marquee{
  padding:26px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.marquee__track{display:flex;align-items:center;width:max-content}
/* Duree de secours : ui.js la remplace d apres --marquee-speed. */
.marquee__track.is-looping{animation:wm-marquee 26s linear infinite}
/* Marge sur l element plutot que gouttiere sur la piste : la piste
   doublee vaut alors exactement deux fois la meme largeur, donc le
   translate de -50 % se referme sans saut. */
.marquee__item{
  display:inline-flex;align-items:center;gap:10px;
  margin-inline-end:64px;
  font-family:var(--font-display);font-size:var(--text-h4);font-weight:600;
  letter-spacing:var(--ls-wide);color:var(--text-muted);white-space:nowrap;
}
/* Logos clients : le fichier ne sert que de pochoir, la couleur vient de
   currentColor. Chaque marque prend donc exactement le gris des noms
   ecrits a cote, quelles que soient ses couleurs d origine (rose, bleu,
   turquoise), et un seul reglage suffit pour les regriser toutes. */
.marquee__logo{
  display:block;width:auto;height:var(--logo-h);aspect-ratio:1;
  background-color:currentColor;
  -webkit-mask:center/contain no-repeat;
          mask:center/contain no-repeat;
}
.marquee__logo--clama{
  aspect-ratio:271/108;
  -webkit-mask-image:url(../img/logos/clama-jolie.webp);
          mask-image:url(../img/logos/clama-jolie.webp);
}
.marquee__logo--cobuild{
  aspect-ratio:270/108;
  -webkit-mask-image:url(../img/logos/cobuild-africa.webp);
          mask-image:url(../img/logos/cobuild-africa.webp);
}
.marquee__logo--secure{
  aspect-ratio:173/45;
  -webkit-mask-image:url(../img/logos/secure-invest.webp);
          mask-image:url(../img/logos/secure-invest.webp);
}
/* Signature sur une seule ligne : ses lettres remplissent la boite,
   on la pose donc plus bas que les signatures a deux niveaux. */
.marquee__logo--bfast{
  height:var(--logo-word);aspect-ratio:479/108;
  -webkit-mask-image:url(../img/logos/bfast-ai.webp);
          mask-image:url(../img/logos/bfast-ai.webp);
}
/* AEM n a qu un embleme, sans nom : il est pose a cote du mot. */
.marquee__logo--aem{
  height:var(--logo-icon);aspect-ratio:95/96;
  -webkit-mask-image:url(../img/logos/aem.webp);
          mask-image:url(../img/logos/aem.webp);
}
@keyframes wm-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee__track.is-looping,
  .showcase__track.is-looping{animation:none}
}

/* ── FAQ (details/summary : fonctionne sans JavaScript) ────────── */
.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px;align-items:start}
.faq__item{
  background:linear-gradient(180deg,#FBFBFD 0%,#F5F5F9 100%);
  border:1px solid var(--border-card);border-radius:var(--radius-lg);overflow:hidden;
}
.faq__q{
  display:flex;gap:18px;align-items:center;justify-content:space-between;
  cursor:pointer;padding:22px 24px;list-style:none;
  font-family:var(--font-display);font-size:17px;font-weight:500;
  letter-spacing:-.015em;color:var(--text-primary);
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::marker{content:""}
.faq__icon{
  flex:none;width:28px;height:28px;border-radius:var(--radius-full);
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);color:var(--text-secondary);box-shadow:var(--ring-card);
  font-size:16px;line-height:1;
  transition:transform .18s ease,background .18s ease,color .18s ease;
}
.faq__item[open] .faq__icon{
  background:var(--brand-600);color:var(--text-on-dark);
  box-shadow:none;transform:rotate(45deg);
}
.faq__a{margin:0;padding:0 24px 24px;font-size:15px;line-height:1.7;color:var(--text-secondary);max-width:78ch}
/* Un lien dans une reponse se lit au soulignement, comme dans le texte
   des articles : sa teinte seule ne se detache pas assez du gris. */
.faq__a a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.faq__a a:hover{text-decoration-thickness:2px}
.faq__more{text-align:center;margin-top:36px;font-size:16px;color:var(--text-secondary)}
.faq__more a{font-weight:600}

/* ── Bloc CTA de bas de page ───────────────────────────────────── */
.cta{
  border-radius:var(--radius-2xl);border:1px solid var(--brand-border);
  background:var(--gradient-cta);padding:clamp(40px,5vw,72px);text-align:center;
}
.cta__title{max-width:24ch;margin-inline:auto}
.cta__text{margin:18px auto 30px;max-width:52ch}
.cta__pills{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:32px}
.cta__kicker{
  font-family:var(--font-display);font-size:22px;font-weight:500;
  letter-spacing:-.02em;margin-bottom:6px;
}
.cta__note{font-size:16px;color:var(--text-secondary);margin-bottom:28px}

/* Bloc sombre en bas de la page d'accueil */
.panel-ink{
  border-radius:var(--radius-2xl);background:var(--gradient-ink);
  padding:clamp(36px,5vw,72px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:40px;align-items:stretch;
}
.panel-ink__title{color:var(--text-on-dark)}
.panel-ink__text{color:var(--text-on-ink);margin:18px 0 32px;max-width:44ch}
/* La colonne de droite se cale sur le bloc de texte : la capture part du
   haut du titre et s arrete au bas du bouton. C est donc le texte qui
   donne la hauteur de la ligne — la capture est sortie du flux pour ne
   pas peser dessus, sinon ses 614 px de haut tireraient tout plus bas. */
.panel-ink__visual{position:relative}
/* Elle prend la plus grande taille qui tient dans cette colonne, sans
   jamais se deformer : en desktop c est la hauteur qui la borne (bords
   haut et bas au ras du texte), en colonne unique c est la largeur. */
.panel-ink__shot{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:auto;height:auto;max-width:100%;max-height:100%;
  border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
}
/* Colonne unique sous 810 px : le texte passe au centre, au-dessus de la
   capture, et cette derniere n a plus de texte en face pour lui donner sa
   hauteur — on la fixe. */
@media (max-width:809px){
  .panel-ink{text-align:center}
  .panel-ink__text{margin-inline:auto}
  .panel-ink__visual{height:200px}
}

/* ── Pied de page ──────────────────────────────────────────────── */
.site-footer{background:var(--surface);color:var(--text-secondary);border-top:1px solid var(--border)}
.site-footer__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:40px;padding-block:72px 40px;
}
.site-footer__title{
  font-family:var(--font-display);font-size:14px;font-weight:600;
  color:var(--text-primary);margin-bottom:16px;
}
.site-footer__list{display:flex;flex-direction:column;gap:11px;font-size:14.5px;list-style:none;margin:0;padding:0}
.site-footer__list a{color:var(--text-secondary)}
.site-footer__list a:hover{color:var(--brand-600)}
.site-footer__about{font-size:14.5px;line-height:1.7;max-width:34ch}
.site-footer__social{font-family:var(--font-mono);font-size:12px;margin-top:18px;color:var(--text-faint)}
/* Reseaux sociaux : une pastille par compte, le glyphe prend la couleur
   du lien pour que le survol se regle en une declaration. */
.social{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;list-style:none;padding:0}
.social__link{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--radius-full);
  background:var(--surface-chip);color:var(--text-muted);
  transition:background .18s ease,color .18s ease;
}
.social__link:hover,.social__link:focus-visible{background:var(--brand-100);color:var(--brand-600)}
.social__link svg{width:19px;height:19px}
.site-footer__legal{
  padding:24px var(--gutter);border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-family:var(--font-mono);font-size:12px;color:var(--text-faint);
  max-width:var(--container);margin-inline:auto;
}

/* Le pied de page se decouvre sous la page (effet repris du site
   Zenvelle). La page passe devant lui et semble se soulever : lui part
   --footer-lift plus haut, cache dessous, et rejoint sa place pendant
   qu il entre dans l ecran — il defile donc moins vite que la page et
   semble sortir de dessous.

   Bord droit, sans ombre, pied de page blanc : c est le filet qui
   separait deja les deux qui dessine le bord. Il passe du haut du pied
   de page (cache sous la page pendant l effet) au bas de la page, qui
   le promene avec elle ; une fois le pied de page en place, le rendu
   est exactement celui d avant.

   Aucun JavaScript : l animation suit le defilement (view()), et le
   navigateur la joue hors du fil principal, sans saccade. Qui ne la
   connait pas, ou demande moins d animations, garde le pied de page
   d avant, filet compris. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    main:has(+ .site-footer){
      position:relative;z-index:1;background:var(--surface);
      border-bottom:1px solid var(--border);
    }
    .site-footer{
      position:relative;z-index:0;border-top:0;
      animation:footer-reveal linear both;
      /* apres la forme courte, qui les remettrait a zero */
      animation-timeline:view();
      animation-range:entry 0% entry 100%;
    }
  }
}
@keyframes footer-reveal{from{translate:0 calc(-1 * var(--footer-lift))}}