/* ==========================================================================
   WEBIPHI — Socle commun                                        wbp-core.css
   Jetons de design, remise à zéro, typographie, boutons, utilitaires.
   Chargé sur TOUTES les pages.

   Règle absolue : toute classe est préfixée « wbp- ».
   Le site part en statique mais atterrira sous WordPress/Elementor, qui
   possède déjà .section, .hero, .btn, .container, .h2. Sans préfixe on se
   bat contre lui à coups de !important.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Polices — auto-hébergées, jamais Google Fonts.
   Un appel à fonts.googleapis.com ajoute deux connexions bloquantes avant le
   premier texte, et transmet l'IP du visiteur à un tiers.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;          /* fichier variable : un seul téléchargement */
  font-display:swap;
  src:url('../fonts/inter-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;
}
/* Outfit : la police d'affichage de la v1, gardée pour les chiffres de preuve
   du héros (« 6 mois », « SEO + GEO »). Arrondie et légère, elle se lit comme
   un chiffre clé sans la raideur condensée d'Oswald. Pas préchargée : elle ne
   sert que sur l'accueil, sous la ligne du titre. */
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:200 600;
  font-display:swap;
  src:url('../fonts/outfit-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;
}
@font-face{
  font-family:'Oswald';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('../fonts/oswald-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;
}

:root{
  /* --- Marque ---------------------------------------------------------- */
  --wbp-brand:#6A0719;        /* aplats : boutons, panneaux, bandes, pied    */
  --wbp-brand-deep:#4A0511;   /* fond de dégradé, survol foncé               */
  --wbp-brand-mid:#A31432;    /* accents EN PETIT : surtitres, liens, chiffres
                                 — #6A0719 en 13px vire au brun-noir         */
  --wbp-brand-soft:#FBF3F5;   /* pastilles d'icônes, fonds de survol         */
  --wbp-brand-line:#EEDCE1;
  --wbp-cream:#EFE4D6;        /* la secondaire — UNIQUEMENT sur bordeaux :
                                 sur blanc son contraste est inexploitable   */

  /* --- Fond sombre -------------------------------------------------------
     Sur #0B0B0C, le bordeaux de marque #6A0719 est quasiment invisible :
     il ne se détache pas du noir. --wbp-brand-glow est sa version lumineuse,
     et elle ne sert QUE là. Sur blanc elle passe pour du rouge vif et casse
     l'identité. */
  --wbp-dark:#0B0B0C;
  --wbp-dark-2:#161618;
  --wbp-brand-glow:#B8203F;
  --wbp-line-dark:rgba(255,255,255,.12);
  --wbp-muted-dark:rgba(255,255,255,.64);

  /* --- Neutres ---------------------------------------------------------- */
  --wbp-bg:#FFFFFF;
  --wbp-bg-alt:#FAF8F6;       /* blanc cassé, alternance de sections         */
  --wbp-ink:#12100F;          /* noir profond                                */
  --wbp-ink-2:#4A4441;
  --wbp-muted:#726A65;        /* 5.4:1 sur blanc — AA tenu même en 14px      */
  --wbp-line:#E8E3DF;
  --wbp-line-soft:#F1EDEA;

  /* --- Mesures ---------------------------------------------------------- */
  --wbp-maxw:1280px;
  --wbp-maxw-narrow:780px;
  /* Gouttiere laterale. Plancher a 24px : a 20px, sur un telephone, le
     texte touchait presque le bord de l ecran. Plafond a 56px pour que la
     page respire aussi sur un grand ecran. La largeur utile passe donc de
     1200 a 1168px, ce qui laisse de la marge aux 5 poles (1080px minimum). */
  --wbp-pad:clamp(24px,5vw,56px);
  --wbp-radius-s:10px;
  --wbp-radius:16px;
  --wbp-radius-lg:28px;
  --wbp-section:clamp(64px,8vw,116px);   /* rythme vertical des sections     */
  --wbp-hdr-h:76px;

  /* --- Typo ------------------------------------------------------------- */
  --wbp-sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --wbp-cond:'Oswald',"Arial Narrow",var(--wbp-sans);
  --wbp-display:'Outfit',var(--wbp-sans);

  /* --- Ombres — très diffuses, jamais de gris franc ---------------------- */
  --wbp-shadow-s:0 1px 2px rgba(18,16,15,.04), 0 6px 16px rgba(18,16,15,.05);
  --wbp-shadow-m:0 2px 6px rgba(18,16,15,.05), 0 18px 40px rgba(18,16,15,.08);
  --wbp-shadow-l:0 4px 12px rgba(18,16,15,.06), 0 32px 68px rgba(18,16,15,.14);
  --wbp-shadow-brand:0 10px 30px rgba(106,7,25,.22);

  --wbp-ease:cubic-bezier(.2,.7,.3,1);
}

/* --------------------------------------------------------------------------
   Remise à zéro — scopée à .wbp pour ne rien casser le jour où ces blocs
   cohabiteront avec des pages Elementor non refondues.
   -------------------------------------------------------------------------- */
.wbp,.wbp *,.wbp *::before,.wbp *::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
.wbp{
  margin:0;
  font-family:var(--wbp-sans);
  font-size:17px;
  line-height:1.65;
  color:var(--wbp-ink-2);
  background:var(--wbp-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* Empêche la barre horizontale que produisent les décors posés hors flux
     (halos, bandeaux inclinés, marquee). */
  overflow-x:hidden;
}

/* :where() ramène ces règles au poids d'une seule classe : les classes de
   composant (.wbp-btn--primary…) gagnent toujours, sans !important. */
/* height:auto n'est pas décoratif. Les attributs width/height du HTML — qu'on
   pose sur chaque image pour réserver la place et éviter le décalage au
   chargement — arrivent dans la cascade comme une hauteur en pixels. Sans
   cette ligne, un « height="800" » l'emporte sur l'aspect-ratio du composant
   et l'image s'étire sur 800px de haut. */
.wbp :where(img,svg,video){max-width:100%;height:auto;display:block}
.wbp :where(a){color:inherit;text-decoration:none}
.wbp :where(p){margin:0}
.wbp :where(ul,ol){margin:0;padding:0;list-style:none}
.wbp :where(button){font:inherit;color:inherit}
.wbp :where(h1,h2,h3,h4,h5){
  margin:0;
  font-family:var(--wbp-sans);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.018em;
  color:var(--wbp-ink);
  text-wrap:balance;           /* évite le mot orphelin en fin de titre */
}

/* Le focus doit rester visible sur bordeaux comme sur blanc. */
.wbp :focus-visible{
  outline:3px solid var(--wbp-brand-mid);
  outline-offset:3px;
  border-radius:8px;
}
.wbp-on-brand :focus-visible{outline-color:var(--wbp-cream)}

/* Lien d'évitement : premier élément tabulable de chaque page. */
.wbp-skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  padding:14px 22px;border-radius:0 0 12px 0;
  background:var(--wbp-brand);color:#fff;font-weight:600;
}
.wbp-skip:focus{left:0}

/* --------------------------------------------------------------------------
   Mise en page
   -------------------------------------------------------------------------- */
.wbp-wrap{
  width:100%;max-width:var(--wbp-maxw);
  margin-inline:auto;padding-inline:var(--wbp-pad);
}
.wbp-wrap--narrow{max-width:calc(var(--wbp-maxw-narrow) + var(--wbp-pad) * 2)}
.wbp-sec{padding-block:var(--wbp-section)}
.wbp-sec--alt{background:var(--wbp-bg-alt)}
.wbp-sec--tight{padding-block:calc(var(--wbp-section) * .62)}
.wbp-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   Typographie d'affichage
   L'échelle est fluide : un clamp() par niveau, pas de media-query. Aucune
   hauteur fixe nulle part — un jour le néerlandais viendra s'y couler, et il
   est ~30 % plus long que le français.
   -------------------------------------------------------------------------- */
.wbp-d1{font-size:clamp(2.35rem,1.25rem + 4.3vw,4.05rem);line-height:1.04;letter-spacing:-.03em}
.wbp-d2{font-size:clamp(1.95rem,1.3rem + 2.5vw,3.05rem);line-height:1.08;letter-spacing:-.025em}
.wbp-d3{font-size:clamp(1.45rem,1.15rem + 1.1vw,1.95rem);line-height:1.18;letter-spacing:-.02em}
.wbp-d4{font-size:clamp(1.15rem,1.05rem + .45vw,1.35rem);line-height:1.28;letter-spacing:-.012em}

/* Chapô — ne jamais descendre sous 17px : une partie du public a plus de
   50 ans et lit sur un téléphone, souvent dehors. */
.wbp-lead{
  font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);
  line-height:1.6;color:var(--wbp-ink-2);
  max-width:62ch;
}

/* Surtitre — repris de la proposition v1 : Inter 500, 12px, interlettrage
   .18em, filet de 28px.

   PAS Oswald, et c'est un changement assumé. Le condensé resserre les
   lettres, alors que le wordmark WEBIPHI est au contraire très ouvert et
   très interlettré. Inter espacé en capitales est bien plus proche du
   dessin du logo que le condensé ne l'était. */
.wbp-eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--wbp-sans);
  font-size:.75rem;font-weight:500;line-height:1;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--wbp-brand-mid);
}
.wbp-eyebrow::before{content:'';width:28px;height:1px;background:currentColor;flex:none}
.wbp-eyebrow--plain::before{display:none}
.wbp-eyebrow--cream{color:var(--wbp-cream)}

/* Mot souligné à la main dans un titre.
   Le filet est posé en background et non en text-decoration : il doit rester
   à distance de la ligne de base et ne pas se couper sur les jambages. Il
   démarre à 86 % de la hauteur de ligne, pas à 62 % — plus bas, c'est un
   surlignage de marqueur, pas un soulignement. */
.wbp-mark{
  color:var(--wbp-brand);
  background-image:linear-gradient(transparent 86%, var(--wbp-brand-line) 86%);
  background-repeat:no-repeat;
  padding-inline:.04em;
}

/* --------------------------------------------------------------------------
   Boutons
   Aucune largeur ni hauteur fixe : le libellé doit pouvoir passer sur deux
   lignes sans casser le bouton.
   -------------------------------------------------------------------------- */
.wbp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 28px;min-height:54px;
  font-family:var(--wbp-sans);
  font-size:1rem;font-weight:600;line-height:1.25;letter-spacing:-.005em;
  border-radius:999px;border:1.5px solid transparent;
  text-align:center;cursor:pointer;
  transition:transform .2s var(--wbp-ease), box-shadow .2s, background .2s,
             color .2s, border-color .2s;
}
.wbp-btn--primary{
  background:var(--wbp-brand);color:#fff;
  box-shadow:var(--wbp-shadow-brand);
}
.wbp-btn--primary:hover{background:#7E0B1F;transform:translateY(-2px);
  box-shadow:0 16px 38px rgba(106,7,25,.30)}
.wbp-btn--ghost{background:#fff;color:var(--wbp-ink);border-color:var(--wbp-line)}
.wbp-btn--ghost:hover{border-color:var(--wbp-brand);color:var(--wbp-brand);
  background:var(--wbp-brand-soft);transform:translateY(-2px)}
/* Sur aplat bordeaux, --primary disparaîtrait : c'est le crème qui prend. */
.wbp-btn--cream{background:var(--wbp-cream);color:#4A0511;box-shadow:none}
.wbp-btn--cream:hover{background:#F7EFE4;transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.26)}
.wbp-btn--outline-cream{background:transparent;color:var(--wbp-cream);
  border-color:rgba(239,228,214,.42)}
.wbp-btn--outline-cream:hover{border-color:var(--wbp-cream);
  background:rgba(239,228,214,.12);transform:translateY(-2px)}
/* Bouton du héros sombre. C'est le bordeaux de marque plein, pas sa version
   lumineuse : la couleur de la marque doit être celle qu'on voit sur le
   bouton principal.

   Le prix à payer est que #6A0719 sur #0B0B0C ne fait que 1,55:1 — la forme
   du bouton se perdrait dans le noir. D'où le filet blanc à 30 % : mélangé
   au bordeaux il donne un bord à 3,4:1 sur le fond, ce qui passe le
   critère 1.4.11 (contraste des éléments d'interface). Le retirer casse
   l'accessibilité, pas seulement l'esthétique.

   Le libellé est en crème et non en blanc : c'est la règle maison sur
   aplat bordeaux, et à 10:1 il est largement au-dessus du AAA. */
.wbp-btn--glow{background:var(--wbp-brand);color:var(--wbp-cream);
  border-color:rgba(255,255,255,.30);
  box-shadow:0 10px 30px rgba(0,0,0,.45)}
.wbp-btn--glow:hover{background:#7E0B1F;transform:translateY(-2px);
  border-color:rgba(255,255,255,.44);
  box-shadow:0 16px 40px rgba(0,0,0,.55)}
.wbp-btn--outline-light{background:transparent;color:#fff;
  border-color:rgba(255,255,255,.34)}
.wbp-btn--outline-light:hover{border-color:#fff;
  background:rgba(255,255,255,.08);transform:translateY(-2px)}
.wbp-btn--sm{padding:11px 20px;min-height:44px;font-size:.9375rem}
.wbp-btn--block{width:100%}
.wbp-btn__ic{width:17px;height:17px;flex:none;transition:transform .2s var(--wbp-ease)}
.wbp-btn:hover .wbp-btn__ic{transform:translateX(4px)}

/* --------------------------------------------------------------------------
   Boutons de héros — deux effets de survol
   Inspirés des motifs dominants sur uiverse.io (MIT) : le « fill sweep » et
   le « shine ». Réimplémentés dans nos jetons plutôt que collés — un
   composant uiverse arrive avec ses propres couleurs, sa police, ses noms de
   classe, et surtout aucun état de focus ni garde-fou de mouvement.

   isolation:isolate est obligatoire sur les deux : le remplissage est en
   z-index:-1 pour passer sous le libellé, et sans contexte d'empilement
   propre il descendrait derrière le fond de la section.
   -------------------------------------------------------------------------- */
.wbp-btn--lg{padding:17px 34px;min-height:60px;font-size:1.0625rem}

/* ---- remplissage par le bas ----

   DEUX FACES SUPERPOSÉES, et c'est la seule façon correcte de le faire.

   L'implémentation évidente — un fond qui monte en scaleY, et la couleur du
   libellé qui bascule après un délai — est fausse. À mi-course, la frontière
   du remplissage traverse les lettres : le bas du mot est sur du bordeaux,
   le haut sur du blanc, et le texte est encore noir. Illisible pendant
   ~70 ms. Aucun réglage de délai ne corrige ça, parce qu'une frontière qui
   balaie traversera toujours le texte : trop tôt, on a du crème sur blanc ;
   trop tard, du noir sur bordeaux.

   Ici la face bordeaux porte SON fond ET son libellé crème, et c'est elle
   entière qu'on découvre. Le fond et le texte avancent donc ensemble par
   construction — chaque pixel est toujours juste, à n'importe quelle image.
   -------------------------------------------------------------------------- */
.wbp-btn--fill{
  position:relative;overflow:hidden;isolation:isolate;
  background:#fff;color:var(--wbp-ink);border-color:var(--wbp-line);
  transition:border-color .3s, transform .2s var(--wbp-ease), box-shadow .2s;
}
.wbp-btn__face{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.wbp-btn__face--on{
  position:absolute;inset:0;
  background:linear-gradient(180deg,#7E0B1F 0%,var(--wbp-brand) 100%);
  color:var(--wbp-cream);
  /* inset(100% …) place le bord HAUT de la zone visible tout en bas :
     rien n'est visible. En allant vers inset(0), ce bord remonte — la face
     se découvre donc du bas vers le haut. */
  clip-path:inset(100% 0 0 0);
  transition:clip-path .36s var(--wbp-ease);
}
.wbp-btn--fill:hover{
  border-color:var(--wbp-brand);
  transform:translateY(-2px);box-shadow:var(--wbp-shadow-brand);
}
.wbp-btn--fill:hover .wbp-btn__face--on{clip-path:inset(0 0 0 0)}

/* ---- reflet qui traverse ---- */
.wbp-btn--shine{position:relative;overflow:hidden;isolation:isolate}
.wbp-btn--shine::after{
  content:'';position:absolute;top:0;bottom:0;left:0;width:45%;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.34) 50%, rgba(255,255,255,0) 100%);
  transform:translateX(-160%) skewX(-18deg);
  pointer-events:none;
}
.wbp-btn--shine:hover::after{
  transform:translateX(360%) skewX(-18deg);
  transition:transform .75s cubic-bezier(.3,.7,.3,1);
}

/* Mouvement réduit : on garde le changement de couleur, on supprime le
   balayage. Un bouton qui ne réagit plus du tout au survol devient
   difficile à distinguer d'un bouton désactivé. */
@media (prefers-reduced-motion:reduce){
  .wbp-btn__face--on{transition:none}
  .wbp-btn--fill:hover{transform:none}
  .wbp-btn--shine::after{display:none}
}

/* Lien fléché — la version discrète du bouton, en fin de carte. */
.wbp-alink{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:600;font-size:.9375rem;color:var(--wbp-brand-mid);
}
.wbp-alink svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s var(--wbp-ease)}
.wbp-alink:hover{color:var(--wbp-brand)}
.wbp-alink:hover svg{transform:translateX(4px)}

/* --------------------------------------------------------------------------
   Pastille d'icône — cercle rosé, trait bordeaux. Jamais d'emoji.
   -------------------------------------------------------------------------- */
.wbp-ic{
  flex:none;display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;
  background:var(--wbp-brand-soft);
  transition:background .22s var(--wbp-ease), transform .22s var(--wbp-ease);
}
.wbp-ic svg{
  width:22px;height:22px;display:block;
  fill:none;stroke:var(--wbp-brand);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .22s;
}
.wbp-ic--lg{width:56px;height:56px}
.wbp-ic--lg svg{width:26px;height:26px}
.wbp-ic--cream{background:rgba(239,228,214,.14)}
.wbp-ic--cream svg{stroke:var(--wbp-cream)}

/* --------------------------------------------------------------------------
   En-tête de section — surtitre + titre + chapô, réutilisé partout.
   -------------------------------------------------------------------------- */
.wbp-shead{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(36px,4vw,58px)}
.wbp-shead--center{align-items:center;text-align:center}
.wbp-shead--center .wbp-lead{margin-inline:auto}
/* Titre à gauche, chapô à droite. Les deux flex-basis sont indispensables :
   sans eux le titre prend toute la ligne et le chapô passe dessous, en
   laissant la moitié droite vide. */
.wbp-shead__top{display:flex;align-items:flex-end;justify-content:space-between;
  gap:28px 40px;flex-wrap:wrap}
.wbp-shead__top > div{display:flex;flex-direction:column;gap:16px;
  flex:1 1 440px;min-width:0}
.wbp-shead__top > .wbp-lead{flex:0 1 330px;padding-bottom:6px}
.wbp-shead__top > .wbp-btn{flex:none;margin-bottom:4px}

/* --------------------------------------------------------------------------
   Garde-fou mouvement — non négociable.
   -------------------------------------------------------------------------- */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--wbp-hdr-h) + 18px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wbp *,.wbp *::before,.wbp *::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

/* --------------------------------------------------------------------------
   Filet de sécurité Elementor (pour la future mise en production WordPress)
   -------------------------------------------------------------------------- */
.wbp .e-con,
.wbp .e-con-inner,
.wbp .elementor-widget-html > .elementor-widget-container{
  padding:0;margin:0;max-width:none;width:100%;
}