/* ═══════════════════════════════════════════════════════════
   Olivia Barclay — London
   Dark · iridescent blobs · chrome
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:        #08080A;
  --bg-2:      #0E0E12;
  --surface:   #131318;
  --surface-2: #1A1A21;
  --text:      #F3F3F5;
  --muted:     #8C8C99;
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.18);

  /* teintes des bulles */
  --orange:    #FF7A3D;
  --red:       #E8452F;
  --pink:      #FF4E8A;
  --violet:    #7A5CFF;
  --blue:      #3B6BFF;
  --cyan:      #35D6E8;

  --chrome: linear-gradient(145deg, #FDFDFE 0%, #E8EBEE 22%, #8F979F 48%,
                            #E8EBEE 68%, #FFFFFF 84%, #B9C0C8 100%);
  --grad-warm: linear-gradient(115deg, var(--blue), var(--red) 45%, var(--pink));
  --grad-cool: linear-gradient(115deg, var(--blue), var(--violet) 55%, var(--cyan));

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --pad:  clamp(16px, 4vw, 60px);
  --maxw: 1240px;

  --ease: cubic-bezier(.22,1,.36,1);
  --display: "Space Grotesk", "Inter", sans-serif;
  --serif:   "Fraunces", Georgia, serif;      /* H1 — le plus proche d'Ashcroft en libre */
  --round:   "Baloo 2", "Inter", sans-serif;  /* mot-symbole, accordé aux formes du logo */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--bg); }
body{
  margin:0; font-family:var(--font); color:var(--text); background:var(--bg);
  /* `clip` et non `hidden` : `overflow-x:hidden` transforme le body en zone
     defilante, ce qui fait perdre au formulaire collant sa reference de
     defilement. `clip` coupe sans creer de zone defilante. */
  line-height:1.6; overflow-x:clip; -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }

/* Coupe horizontale par section : les bulles decoratives debordent volontairement,
   mais sans cela elles rendent la page defilable lateralement (constate entre 375
   et 1080px). La coupe est posee section par section, jamais sur `html` : la
   poser a la racine casse le formulaire colle (`position:sticky`), verifie le
   23 aout. `overflow-x:clip` laisse passer le debordement vertical. */
.services,.industries,.about,.blog,.contact,.foot,
.svc-hero,.post-hero,.post-head,.svc-layout,.simple-page,.simple-block,
.legal-page,.post-page,
.ipage-hero,.ipage-about,.ipage-work,.ipage-faq,.ipage-others,.ipage-cta{ overflow-x:clip; }

a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; line-height:1.05; letter-spacing:-.035em; font-family:var(--display); font-weight:600; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

.skip{ position:absolute; left:-999px; top:10px; z-index:999; background:var(--text); color:var(--bg); padding:10px 18px; border-radius:99px; }
.skip:focus{ left:12px; }
:focus-visible{ outline:2px solid var(--violet); outline-offset:3px; border-radius:6px; }

.eyebrow{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color:var(--muted); margin-bottom:16px;
}

/* curseur */
.cursor{
  position:fixed; top:0; left:0; width:22px; height:22px; border-radius:50%;
  border:1px solid rgba(255,255,255,.5); z-index:9999; pointer-events:none;
  transform:translate(-50%,-50%); opacity:0; mix-blend-mode:difference;
  transition:width .28s var(--ease), height .28s var(--ease), background .28s var(--ease);
}
.cursor.on{ opacity:1; }
.cursor.grow{ width:56px; height:56px; background:rgba(255,255,255,.12); border-color:transparent; }
@media (hover:none){ .cursor{ display:none; } }

/* ── boutons ── */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:15px 32px; border-radius:99px; font-weight:500; font-size:.95rem;
  border:none; cursor:pointer; overflow:hidden; font-family:var(--font);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.btn span{ position:relative; z-index:2; }
.btn-grad{ color:#fff; background:var(--surface-2); }
.btn-grad::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; z-index:1;
  background:var(--grad-cool);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.btn-grad::before{
  content:""; position:absolute; inset:0; z-index:0; background:var(--grad-cool);
  opacity:0; transition:opacity .45s var(--ease);
}
.btn-grad:hover::before{ opacity:1; }
.btn-grad:hover{ transform:rotate(-2.5deg); box-shadow:0 18px 42px -16px rgba(59,107,255,.55); }
/* ── CTA « verre liquide » (portage du composant LiquidButton de 21st.dev) ──
   Trois couches : la refraction du fond, le liston de verre en ombres internes,
   puis le texte. Le composant d'origine est en React/Tailwind ; ici c'est du CSS. */
.btn-liquid{
  height:56px; padding:0 40px; border-radius:999px;
  background:transparent; color:#fff; overflow:visible; isolation:isolate;
  transition:transform .3s var(--ease), filter .3s var(--ease);
}
/* le fond vu a travers le bouton, deforme par le filtre SVG */
.btn-liquid::after{
  content:""; position:absolute; inset:0; z-index:0; border-radius:inherit;
  -webkit-backdrop-filter:blur(3px) saturate(1.6); backdrop-filter:blur(3px) saturate(1.6);
  -webkit-backdrop-filter:url("#container-glass"); backdrop-filter:url("#container-glass");
  transition:background .3s var(--ease);
}
/* le liston de verre : la pile d'ombres internes du composant, version sombre */
.btn-liquid::before{
  content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none;
  /* la pile d'ombres du composant, variante sombre : verre blanc sur fond noir */
  box-shadow:
    0 0 8px rgba(0,0,0,.03),
    0 2px 6px rgba(0,0,0,.08),
    inset 3px 3px .5px -3.5px rgba(255,255,255,.09),
    inset -3px -3px .5px -3.5px rgba(255,255,255,.85),
    inset 1px 1px 1px -.5px rgba(255,255,255,.6),
    inset -1px -1px 1px -.5px rgba(255,255,255,.6),
    inset 0 0 6px 6px rgba(255,255,255,.12),
    inset 0 0 2px 2px rgba(255,255,255,.06),
    0 0 12px rgba(0,0,0,.15);
  transition:box-shadow .3s var(--ease);
}
.btn-liquid span{
  background-image:linear-gradient(97deg,
    #FFFFFF 0%, #F2F6FF 24%, #A8CBFF 42%, #4E86FF 56%, #DCE7FF 72%, #FFFFFF 94%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  padding-bottom:.12em; margin-bottom:-.12em;
}
.btn-liquid:hover{ transform:scale(1.05); box-shadow:0 0 34px rgba(255,255,255,.3); }
.btn-liquid:hover::after{ background:rgba(255,255,255,.1); }
.btn-liquid:active{ transform:scale(.99); }
.btn-liquid.btn-block{ width:100%; }

.btn-ghost{ color:var(--text); background:transparent; border:1px solid var(--line-2); }
.btn-ghost:hover{ background:rgba(255,255,255,.06); transform:rotate(2deg); }
.btn-block{ width:100%; }
.btn-line{ border:1px solid var(--line-2); background:transparent; color:var(--text); }
.btn-line:hover{ background:rgba(255,255,255,.06); }
.round-btn{
  width:50px; height:50px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-2); background:transparent; flex:none; color:var(--text);
  transition:background .4s var(--ease), transform .4s var(--ease);
}
.round-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.round-btn:hover{ background:rgba(255,255,255,.1); transform:translateY(-3px); }

/* ═══════════ NAV ═══════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900; padding:16px var(--pad);
  transition:background .5s var(--ease), padding .5s var(--ease), backdrop-filter .5s;
}
.nav.stuck{
  background:rgba(8,8,10,.72); backdrop-filter:blur(18px) saturate(150%);
  padding:10px var(--pad); box-shadow:0 1px 0 var(--line);
}
.nav-inner{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:inline-flex; align-items:center; gap:11px; }
.brand-mark{ width:clamp(36px,3vw,46px); display:grid; place-items:center; flex:none; }
.brand-mark img{
  width:100%; height:auto;
  filter:drop-shadow(0 0 14px rgba(90,120,255,.45)) drop-shadow(0 2px 6px rgba(0,0,0,.6));
  transition:transform .5s var(--ease), filter .5s var(--ease);
}
.brand:hover .brand-mark img{ filter:drop-shadow(0 0 22px rgba(120,150,255,.7)) drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.brand:hover .brand-mark img{ transform:rotate(-4deg) scale(1.07); }
.brand-name{
  /* meme police que les H1 : Fraunces, en capitales */
  font-family:var(--serif); text-transform:uppercase;
  font-weight:400; font-size:1.24rem; letter-spacing:-.005em;
  font-variation-settings:"opsz" 144, "SOFT" 45, "WONK" 1;
  line-height:1; padding-top:2px;
}
.brand-thin{ font-weight:400; opacity:.55; margin-left:.3em; }

.menu{
  display:flex; align-items:center; gap:2px; margin:0 0 0 auto;
  padding:5px 6px; position:relative; z-index:2;
  border:1px solid rgba(255,255,255,.5); border-radius:99px; background:rgba(255,255,255,.04);
  backdrop-filter:blur(10px); transition:border-color .4s var(--ease), background .4s var(--ease);
}
.menu:hover{ border-color:rgba(255,255,255,.8); background:rgba(255,255,255,.07); }
.menu-item{ position:relative; }
.menu-trigger,.menu-link{
  display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px;
  border:none; background:transparent; cursor:pointer; font:inherit;
  font-size:.87rem; font-weight:400; color:var(--text); border-radius:99px; white-space:nowrap;
}
.menu-trigger .chev{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; opacity:.55; transition:transform .35s var(--ease); }
.menu-trigger[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.menu-hl{
  position:absolute; top:0; left:0; height:36px; border-radius:99px; background:rgba(255,255,255,.1);
  pointer-events:none; z-index:-1; opacity:0;
  transition:opacity .3s var(--ease), transform .42s var(--ease), width .42s var(--ease);
}
.menu.hl-on .menu-hl{ opacity:1; }

/* letter swap */
.ls{ display:inline-flex; }
.ls-char{ display:inline-block; position:relative; overflow:hidden; vertical-align:top; line-height:1.5; }
.ls-char > span{ display:block; will-change:transform; }
.ls-char .ls-b{ position:absolute; inset:0; transform:translateY(100%); }
.ls-char.go .ls-a{ transform:translateY(-100%); }
.ls-char.go .ls-b{ transform:translateY(0); }
.ls-char .ls-a,.ls-char .ls-b{ transition:transform .6s cubic-bezier(.32,1.28,.4,1); transition-delay:var(--d,0s); }

/* panneau partagé */
.menu-vp-wrap{ position:absolute; top:100%; left:50%; z-index:60; transform:translateX(-50%); pointer-events:none; transition:left .45s var(--ease); }
.menu-vp-wrap.open{ pointer-events:auto; }
.menu-vp{
  position:relative; margin-top:8px; width:0; height:0; opacity:0; overflow:hidden;
  border-radius:22px; border:1px solid var(--line); background:rgba(19,19,24,.94);
  backdrop-filter:blur(20px) saturate(150%); box-shadow:0 30px 70px -30px #000;
  transform:scale(.96); transform-origin:top center;
  transition:width .45s var(--ease), height .45s var(--ease), opacity .3s, transform .45s var(--ease);
}
.menu-vp-wrap.open .menu-vp{ opacity:1; transform:scale(1); }
.menu-vp-stage{ position:relative; }
.menu-measure{ position:absolute; top:0; left:0; visibility:hidden; pointer-events:none; width:max-content; }
.menu-panel{ padding:10px; }
.menu-vp-stage .menu-panel{ position:absolute; top:0; left:0; width:max-content; }
.menu-vp-stage .menu-panel.in{ animation:panelIn .42s var(--ease) both; }
.menu-vp-stage .menu-panel.out{ animation:panelOut .34s var(--ease) both; }
@keyframes panelIn{ from{ opacity:0; transform:translateX(calc(var(--dir,1) * 24px)); } to{ opacity:1; transform:none; } }
@keyframes panelOut{ from{ opacity:1; } to{ opacity:0; transform:translateX(calc(var(--dir,1) * -24px)); } }

.panel-list{ display:grid; gap:2px; width:330px; }
.panel-link{ display:block; padding:10px 13px; border-radius:12px; transition:background .25s var(--ease); }
.panel-link:hover{ background:rgba(255,255,255,.07); }
.pl-title{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.9rem; font-weight:500; }
.pl-desc{ display:block; margin-top:3px; font-size:.78rem; color:var(--muted); }
.arr{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; opacity:0; transform:translate(-4px,4px); transition:all .3s var(--ease); }
.panel-link:hover .arr{ opacity:.9; transform:none; }
.panel-rows{ width:420px; display:grid; gap:2px; }
.panel-eyebrow{ padding:6px 13px 8px; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--muted); }
.panel-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:9px 13px; border-radius:12px; transition:background .25s var(--ease); }
.panel-row:hover{ background:rgba(255,255,255,.07); }
.pr-icon{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.07); }
.pr-icon svg{ width:16px; height:16px; fill:none; stroke:#6E9BFF; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.panel-row:hover .pr-icon{ background:var(--grad-cool); }
.panel-row:hover .pr-icon svg{ stroke:#fff; }
.pr-title{
  display:block; font-size:.88rem; font-weight:500;
  /* meme traitement que les H2 : une bande coloree traverse le texte */
  background-image:linear-gradient(88deg,
    #FFFFFF 0%, #7FA8FF 18%, #6E5CFF 32%, #EAEFFF 50%, #FFFFFF 76%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  padding-bottom:.1em; margin-bottom:-.1em;
}
.pr-desc{ display:block; margin-top:2px; font-size:.76rem; color:var(--muted); }
.pr-tag{
  font-size:.72rem; font-weight:600; opacity:0; transition:opacity .25s;
  background-image:linear-gradient(96deg, #FFFFFF 0%, #A8CBFF 34%, #4E86FF 62%, #FFFFFF 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.panel-row:hover .pr-tag{ opacity:1; }
.panel-list .panel-all{ margin-top:6px; }
.panel-all{
  margin-top:4px; padding:10px 13px; border-top:1px solid var(--line);
  font-size:.8rem; font-weight:600;
  background-image:linear-gradient(92deg, #FFFFFF 0%, #9BC0FF 26%, #3B6BFF 52%, #CFE0FF 74%, #FFFFFF 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  padding-bottom:.35em;
}

.burger{ display:none; width:44px; height:38px; border:none; background:transparent; cursor:pointer; }
.burger span{ display:block; height:2px; width:22px; margin:5px auto; background:var(--text); transition:transform .4s var(--ease); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }
.mobile-menu{
  display:none; flex-direction:column; gap:2px; margin-top:12px; padding:12px;
  background:rgba(19,19,24,.97); backdrop-filter:blur(14px); border-radius:22px; border:1px solid var(--line);
}
.mobile-menu a{ padding:12px 14px; border-radius:12px; font-size:.94rem; }
/* les entrees de premier niveau, About me, Blog et Contact, se lisent comme
   « Services » et « Industries » : un cran plus gros et en demi-gras */
.mobile-menu > a:not(.mm-cta){ font-size:1.02rem; font-weight:500; }
.mobile-menu a:hover{ background:rgba(255,255,255,.07); }
.mm-cta{ background:var(--grad-cool); color:#fff; text-align:center; margin-top:6px; }
.mobile-menu.open{ display:flex; animation:panelIn .4s var(--ease); }
.mm-group summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-radius:12px; font-weight:500; }
.mm-group summary::-webkit-details-marker{ display:none; }
.mm-plus{ position:relative; width:13px; height:13px; opacity:.6; }
.mm-plus::before,.mm-plus::after{ content:""; position:absolute; inset:50% 0 auto; height:1.5px; background:currentColor; transition:transform .35s var(--ease); }
.mm-plus::after{ transform:rotate(90deg); }
.mm-group[open] .mm-plus::after{ transform:rotate(0); }
.mm-group a{
  display:block; padding-left:28px;
  /* meme bande coloree que les H2 et que le menu de bureau */
  background-image:linear-gradient(88deg,
    #FFFFFF 0%, #7FA8FF 20%, #6E5CFF 34%, #EAEFFF 52%, #FFFFFF 78%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  padding-bottom:.1em;
}

/* ═══════════ HERO ═══════════ */
.hero{
  /* overflow visible : la derniere bulle se prolonge sous le hero,
     jusqu'au bord superieur des volets services */
  position:relative; min-height:100svh; overflow:visible;
  /* la bulle se prolonge volontairement SOUS le hero : on ne coupe que
     l'horizontale, sinon la page defile lateralement sur petit ecran */
  overflow-x:clip; overflow-y:visible;
  padding:clamp(110px,15vh,170px) var(--pad) clamp(30px,6vh,70px);
  display:flex; flex-direction:column; justify-content:center;
}

/* ── visuel du hero : l'image de bulles, fondue dans le fond ── */
.blobs{
  position:absolute; left:0; right:0; top:0;
  bottom:calc(-1 * clamp(250px, 32vh, 420px));
  pointer-events:none; overflow:hidden;
  /* le prolongement s'eteint juste avant les volets */
  -webkit-mask:linear-gradient(to bottom, #000 88%, rgba(0,0,0,.6) 96%, transparent 100%);
  mask:linear-gradient(to bottom, #000 88%, rgba(0,0,0,.6) 96%, transparent 100%);
}
.blobs picture{ display:block; position:absolute; inset:0; }
.bubble-art{
  /* cadrage exprime en hauteur d'ecran : la zone de dessin descend plus bas
     que le hero, mais l'image garde exactement le meme cadrage qu'avant */
  position:absolute; top:50svh; right:-6%; height:158svh; width:auto; max-width:none;
  transform:translateY(-50%);
  /* fondu vers la gauche et sur les bords : l'image se dissout dans le noir */
  -webkit-mask:linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 24%, #000 52%),
               linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask:linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 24%, #000 52%),
       linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-composite:intersect;
  animation:artFloat 30s ease-in-out infinite alternate;
  will-change:transform;
}
/* bulle isolee, dans le vide entre le texte et le grand visuel */
.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.solo-bubble{
  position:absolute; z-index:1; pointer-events:none;
  left:41%; top:77%; width:min(17vw,240px); aspect-ratio:1/1.004;
  background:url("/wp-content/themes/oli-design-28/site/assets/bubbles/one.webp") center/contain no-repeat;
  mix-blend-mode:screen; opacity:.9;
  /* la forme est portee par le style de base, PAS par l'animation :
     en « animations reduites » les keyframes sont neutralisees et la bulle
     reprendrait sinon sa silhouette d'origine */
  transform:scale(-1.2,.62) rotate(23deg);
  /* meme cliche et memes couleurs que sa voisine, mais le contour est
     deforme par un bruit : la silhouette n'a plus rien a voir */
  filter:url(#bubbleWarp);
  animation:soloFloat 26s var(--ease) infinite alternate;
  will-change:transform;
}
/* fortement aplatie et penchee : une bulle vue de biais, rien a voir
   avec la grosse forme presque carree qui est a sa droite */
/* seul le flottement est anime, via « translate » qui se compose avec transform */
@keyframes soloFloat{
  from{ translate:0 0; }
  to{ translate:5% 9%; }
}
@media (max-width:900px){
  .solo-bubble{ left:auto; right:-14%; top:64%; width:min(46vw,230px); opacity:.75; }
}

@keyframes artFloat{
  from{ transform:translateY(-50%) scale(1); }
  to{ transform:translateY(-53%) scale(1.05); }
}

.hero-inner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; width:100%; }
.h1{
  font-family:var(--serif); text-transform:uppercase;
  font-size:clamp(2.1rem,5.5vw,4.7rem); line-height:1.48; letter-spacing:-.015em;
  font-weight:400; text-wrap:balance;
  font-variation-settings:"opsz" 144, "SOFT" 45, "WONK" 1;
}
.h1 > span{ display:block; }
/* retraits en em : ils suivent exactement la taille du titre.
   ligne 2 : demarre sous le « IG » de DESIGN — ligne 3 : sous le « D » de DESIGN */
.h1-l2{ padding-left:5.93em; }
.h1-l3{ padding-left:4.16em; }
.h1 .w{ display:inline-block; opacity:0; transform:translateY(30px); animation:wIn .9s var(--ease) forwards; animation-delay:var(--d,0s); }
/* Les mots du H1 sont des inline-block : l'espace typographique entre eux est
   celui du blanc qui les separe, tres serre en Fraunces capitales avec un
   interlettrage negatif. On l'elargit franchement. */
.h1{ word-spacing:.2em; }
.h1 .w + .w{ margin-left:.1em; }
@keyframes wIn{ to{ opacity:1; transform:none; } }
.lede{
  margin-top:clamp(26px,4vh,44px); max-width:46ch; color:var(--muted);
  font-size:clamp(.95rem,1.1vw,1.05rem);
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(24px,3.4vh,36px); }
.hero-note{ margin-top:clamp(20px,3vh,32px); font-size:.78rem; color:var(--muted); letter-spacing:.02em; }

/* chiffres : alignés dans la zone sombre, à gauche des bulles */
.stats{
  display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,60px);
  margin-top:clamp(26px,4vh,42px); padding-top:clamp(20px,3vh,28px);
  border-top:1px solid var(--line); max-width:min(100%,620px);
}
.stats strong{
  display:block; font-family:var(--display); font-weight:500;
  font-size:clamp(1.5rem,2.4vw,2.1rem); letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  background:linear-gradient(120deg,#FFD08A,#FF7A3D 45%,#FF4E8A);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stats small{ display:block; margin-top:3px; font-size:.68rem; color:var(--muted); letter-spacing:.03em; }

/* bandeau d'outils */
.marks{
  position:relative; z-index:2; max-width:var(--maxw); margin:clamp(40px,7vh,80px) auto 0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px;
}
.mark{
  display:grid; place-items:center; padding:18px 14px; border-radius:var(--r);
  background:var(--surface); border:1px solid rgba(255,255,255,.42);
  font-family:var(--display); font-size:.84rem; font-weight:500; color:var(--muted);
  transition:background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.mark:hover{ background:var(--surface-2); color:var(--text); transform:translateY(-3px); }

/* ═══════════ SECTIONS ═══════════ */
.sec-head{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto clamp(24px,4vh,48px); }
.sec-head h2{ font-size:clamp(1.8rem,3.6vw,3rem); font-weight:500; }
.sec-sub{ margin-top:16px; max-width:56ch; color:var(--muted); }
.sec-sub strong{ color:inherit; font-weight:600; }
.sec-head--row{ display:flex; flex-wrap:wrap; gap:24px; align-items:flex-end; justify-content:space-between; }
.sec-head--row .sec-sub{ margin-top:0; text-align:right; }

/* plus d'air avant le titre : seul le texte descend, la bulle du hero reste
   accrochee au hero et ne bouge pas */
.services{
  position:relative; z-index:1;
  padding:clamp(90px,13vh,170px) var(--pad) clamp(44px,7vh,100px);
}
/* ══════════ SERVICES — VOLETS QUI S'OUVRENT ══════════
   Meme mecanique que le site francais : survol/clic ouvre le volet,
   l'illustration se dessine par etapes. */
.acc{
  display:flex; gap:clamp(10px,1.1vw,16px);
  /* la hauteur suit celle de la fenetre : la section entiere tient a l'ecran */
  height:clamp(470px, calc(100svh - 420px), 640px);
  max-width:var(--maxw); margin:0 auto;
  /* le contenu d'un volet ferme reste a sa largeur ouverte : sans cette coupe
     il depasse a droite et la page defile lateralement */
  overflow:hidden;
}
.acc-panel{
  /* le volet lui-meme ne dessine rien : c'est .acc-surface qui porte le fond,
     le filet et la morsure du coin. La fleche, elle, reste hors de cette decoupe. */
  position:relative; flex:1 1 0; min-width:0; overflow:visible;
  --pr:clamp(26px,2.6vw,38px);
  border-radius:var(--pr); cursor:pointer; outline-offset:-3px;
  --bite-r:clamp(56px,4.8vw,72px);
  --bite:radial-gradient(circle var(--bite-r) at 100% 100%, transparent 98%, #000 100%);
  --bite-out:radial-gradient(circle calc(var(--bite-r) - 1px) at 100% 100%, transparent 98%, #000 100%);
  transition:flex-grow .85s var(--ease);
}
.acc-panel.is-open{ flex-grow:3.4; }

/* le filet blanc : une couche 1px plus grande, mordue 1px plus court, posee
   sous la surface — c'est ce qui fait suivre le trait le long de la decoupe */
.acc-panel::before{
  content:""; position:absolute; inset:-1px; z-index:0; pointer-events:none;
  border-radius:calc(var(--pr) + 1px);
  background:rgba(255,255,255,.42);
  -webkit-mask:var(--bite-out); mask:var(--bite-out);
  transition:background-color .6s var(--ease);
}
.acc-panel.is-open::before{ background:rgba(255,255,255,.6); }

.acc-surface{
  position:absolute; inset:0; z-index:0;
  background:var(--surface); border-radius:inherit;
  -webkit-mask:var(--bite); mask:var(--bite);
  transition:background .4s var(--ease);
}

/* halos bleus qui derivent dans le volet — repris de la reference :
   coeur presque blanc, degrade vers le bleu, puis disparition. */
.acc-glow{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  border-radius:inherit; pointer-events:none; mix-blend-mode:screen;
  -webkit-mask:var(--bite); mask:var(--bite);
}
.acc-glow i{
  position:absolute; display:block; border-radius:50%;
  filter:blur(32px); opacity:.85;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  /* peu de blanc : sous « screen » un coeur clair delave tout en gris */
  background:radial-gradient(circle at 50% 50%,
    rgba(186,214,255,1) 0%, rgba(86,138,255,1) 28%,
    rgba(45,92,245,.75) 52%, rgba(26,56,190,.3) 70%, transparent 82%);
  animation:glowDrift 22s var(--ease) infinite alternate;
}
.acc-panel.is-open .acc-glow i{ opacity:1; }
/* volet en cours de fermeture : il reste sombre jusqu'a ce qu'il soit etroit */
.acc-panel.is-closing .acc-surface{ background:var(--surface); }
.acc-panel.is-closing::after{ opacity:1; }
/* volet ferme : le halo prend toute la place et pulse lentement */
/* volet ferme : bande etroite, donc des halos plus larges et centres pour rester lisibles */
.acc-panel:not(.is-open):not(.is-closing)::after{ opacity:0; }
.acc-panel:not(.is-open):not(.is-closing) .acc-glow i{ opacity:1; }
/* chaque volet ferme a sa propre mise en scene */
/* 01 — masse en bas, eclat discret en haut */
.acc--01:not(.is-open):not(.is-closing) .acc-glow i:nth-child(1){
  left:-38%; right:auto; bottom:-30%; top:auto; width:186%; aspect-ratio:1/.66;
}
.acc--01:not(.is-open):not(.is-closing) .acc-glow i:nth-child(2){
  right:-46%; left:auto; top:-30%; bottom:auto; width:150%; aspect-ratio:1/.42;
}
/* 02 — masse en haut, halo qui remonte du bas */
.acc--02:not(.is-open):not(.is-closing) .acc-glow i:nth-child(1){
  left:-30%; right:auto; bottom:-40%; top:auto; width:158%; aspect-ratio:1/.48;
}
.acc--02:not(.is-open):not(.is-closing) .acc-glow i:nth-child(2){
  right:-34%; left:auto; top:-26%; bottom:auto; width:184%; aspect-ratio:1/.64;
}
/* 03 — deux nappes decalees en diagonale */
.acc--03:not(.is-open):not(.is-closing) .acc-glow i:nth-child(1){
  left:-52%; right:auto; bottom:-16%; top:auto; width:168%; aspect-ratio:1/.58;
}
.acc--03:not(.is-open):not(.is-closing) .acc-glow i:nth-child(2){
  right:-52%; left:auto; top:-14%; bottom:auto; width:168%; aspect-ratio:1/.58;
}
/* 04 — une seule grande nappe au centre, qui deborde en haut */
.acc--04:not(.is-open):not(.is-closing) .acc-glow i:nth-child(1){
  left:-40%; right:auto; bottom:-6%; top:auto; width:180%; aspect-ratio:1/.5;
}
.acc--04:not(.is-open):not(.is-closing) .acc-glow i:nth-child(2){
  right:-38%; left:auto; top:-34%; bottom:auto; width:176%; aspect-ratio:1/.62;
}
/* fond du volet ferme legerement bleute, pour que la couleur porte jusqu'au centre */
.acc-panel:not(.is-open):not(.is-closing) .acc-surface{ background:linear-gradient(180deg, #16203A, #101728 52%, #16203A); }
.acc-panel:not(.is-open):not(.is-closing) .acc-glow i:nth-child(1){ animation:glowBreathe 9s var(--ease) infinite alternate; }
.acc-panel:not(.is-open):not(.is-closing) .acc-glow i:nth-child(2){ animation:glowBreathe 13s var(--ease) infinite alternate-reverse; }
/* rythmes differents : les trois volets ne pulsent jamais ensemble */
.acc--02:not(.is-open):not(.is-closing) .acc-glow i:nth-child(1){ animation-duration:12s; }
.acc--02:not(.is-open):not(.is-closing) .acc-glow i:nth-child(2){ animation-duration:17s; }
.acc--03:not(.is-open):not(.is-closing) .acc-glow i:nth-child(1){ animation-duration:15s; animation-direction:alternate-reverse; }
.acc--03:not(.is-open):not(.is-closing) .acc-glow i:nth-child(2){ animation-duration:21s; animation-direction:alternate; }
.acc--04:not(.is-open):not(.is-closing) .acc-glow i:nth-child(1){ animation-duration:18s; }
.acc--04:not(.is-open):not(.is-closing) .acc-glow i:nth-child(2){ animation-duration:11s; animation-direction:alternate-reverse; }
@keyframes glowBreathe{
  from{ transform:translate3d(0,3%,0) scale(1); }
  to{ transform:translate3d(0,-5%,0) scale(1.16); }
}
/* et il s'intensifie au passage de la souris */
.acc-panel:not(.is-open):not(.is-closing):hover .acc-glow{ filter:brightness(1.35); }
.acc-glow i:nth-child(2){ animation-duration:29s; animation-direction:alternate-reverse; }

/* volet 1 : nappe en bas a gauche + trainee verticale sur le bord droit */
.acc--01 .acc-glow i:nth-child(1){ left:-20%; bottom:-26%; width:66%; aspect-ratio:1/.85; }
.acc--01 .acc-glow i:nth-child(2){ right:-14%; top:18%; width:26%; aspect-ratio:1/2.6; border-radius:46%; }
/* volet 2 : large nappe qui monte du bas */
.acc--02 .acc-glow i:nth-child(1){ left:-14%; bottom:-32%; width:82%; aspect-ratio:1/.72; }
.acc--02 .acc-glow i:nth-child(2){ left:-24%; bottom:-16%; width:40%; aspect-ratio:1/1.1; }
/* volet 3 : nappe en haut a droite */
.acc--03 .acc-glow i:nth-child(1){ right:-18%; top:-26%; width:78%; aspect-ratio:1/.74; }
.acc--03 .acc-glow i:nth-child(2){ right:-6%; top:-14%; width:34%; aspect-ratio:1/1.2; }

@keyframes glowDrift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(10%,-12%,0) scale(1.14); }
}

/* l'illustration occupe tout le volet, discrete tant qu'il est ferme */
.acc-media{
  /* l'illustration s'arrete au-dessus du texte au lieu de passer derriere */
  position:absolute; inset:0 0 auto 0; height:46%; z-index:1; overflow:hidden;
  border-radius:var(--pr) var(--pr) 0 0;
  -webkit-mask:var(--bite); mask:var(--bite);
  padding:clamp(22px,2.4vw,38px);
  opacity:0; transform:scale(.94); transform-origin:top center;
  transition:opacity .5s var(--ease), transform 1s var(--ease);
}
.acc-panel.is-open .acc-media{ opacity:1; transform:none; }
.acc-ill{ width:100%; height:100%; overflow:visible; }

/* voile pour que le texte reste lisible par-dessus l'illustration */
.acc-panel::after{
  content:""; position:absolute; inset:auto 0 0 0; height:62%; z-index:1; pointer-events:none;
  opacity:1; transition:opacity .4s var(--ease);
  border-radius:0 0 var(--pr) var(--pr);
  -webkit-mask:var(--bite); mask:var(--bite);
  background:linear-gradient(to top,
    color-mix(in srgb, var(--surface) 94%, transparent) 0%,
    color-mix(in srgb, var(--surface) 88%, transparent) 48%,
    color-mix(in srgb, var(--surface) 58%, transparent) 72%,
    color-mix(in srgb, var(--surface) 18%, transparent) 89%, transparent 100%);
}

/* une seule teinte pour toute la section, accordee aux halos */
.acc-panel{ --ill-accent:#5B8CFF; }

/* etiquette verticale quand le volet est ferme */
.acc-label{
  position:absolute; inset:0; z-index:3; display:grid; place-items:center;
  padding:clamp(18px,2vw,28px); pointer-events:none;
  transition:opacity .4s var(--ease);
}
/* les deux couches se superposent dans la meme cellule de grille */
/* meme police que le H1, en capitales ; la taille est calculee en JS pour que
   le mot occupe 75% de la hauteur du volet */
.acc-label span{
  display:inline-block; writing-mode:vertical-rl; transform:rotate(180deg);
  white-space:nowrap; font-family:var(--serif); text-transform:uppercase;
  font-weight:400; letter-spacing:-.01em; line-height:1;
  font-variation-settings:"opsz" 144, "SOFT" 45, "WONK" 1;
  font-size:24px;
  text-shadow:0 2px 20px rgba(6,8,16,.9);
}
.acc-panel.is-open .acc-label{ opacity:0; }

.acc-num{
  position:absolute; top:clamp(16px,1.8vw,24px); right:clamp(16px,1.8vw,24px); z-index:3;
  width:clamp(40px,3.2vw,52px); aspect-ratio:1; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.5); border-radius:50%;
  font-family:var(--display); font-size:clamp(.9rem,1.1vw,1.05rem);
  letter-spacing:.04em; color:var(--text);
  transition:border-color .5s var(--ease), background-color .5s var(--ease);
}
.acc-panel:not(.is-open):not(.is-closing) .acc-num{
  color:#EAF0FF; border-color:rgba(255,255,255,.7);
  background:rgba(6,10,26,.35); backdrop-filter:blur(2px);
  text-shadow:0 2px 14px rgba(6,8,16,.9);
}

/* fleche ronde, coin bas droit — comme la reference */
.acc-go{
  position:absolute; z-index:3;
  right:2px; bottom:2px;
  width:clamp(40px,3.2vw,52px); aspect-ratio:1;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.18); border-radius:50%;
  background:rgba(9,11,20,.82); backdrop-filter:blur(6px); color:var(--text);
  transition:background-color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
.acc-go svg{ width:46%; height:46%; transition:transform .45s var(--ease); }
.acc-panel:not(.is-open):not(.is-closing) .acc-go{ border-color:rgba(255,255,255,.3); }
.acc-panel:hover .acc-go{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.75); }
.acc-panel:hover .acc-go svg{ transform:translateX(3px); }

/* contenu : largeur figee pour que le texte ne se comprime pas pendant l'ouverture */
.acc-body{
  position:absolute; inset:auto 0 0 0; z-index:3;
  text-shadow:0 1px 18px rgba(8,8,10,.85);
  padding:clamp(20px,2.4vw,34px);
  width:clamp(300px,34vw,470px);
  opacity:0; transform:translateY(22px);
  transition:opacity .6s var(--ease) .12s, transform .7s var(--ease) .12s;
}
.acc-panel.is-open .acc-body{ opacity:1; transform:none; }
.acc-body h3{ font-size:clamp(1.5rem,2.4vw,2.1rem); font-weight:500; }
.acc-body h3 span{ display:block; margin-top:8px; font-size:.84rem; font-weight:400; letter-spacing:0; color:var(--muted); font-family:var(--font); }
.acc-body > p{ margin-top:12px; font-size:.92rem; color:#C2C4D0; }

.svc-list{ margin-top:14px; display:grid; gap:8px; font-size:.85rem; color:#C2C4D0; }
.svc-list li{ position:relative; padding-left:18px; }
.svc-list li::before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--ill-accent); }
.svc-cta{
  margin-top:20px; display:inline-flex; align-items:center; gap:8px;
  font-weight:500; font-size:.9rem; border-bottom:1px solid var(--line-2); padding-bottom:3px;
}
.svc-cta em{ font-style:normal; display:inline-block; transition:transform .4s var(--ease); }
.svc-cta:hover em{ transform:translateX(6px); }

/* les illustrations se dessinent a l'ouverture */
.ill-step{ transform-box:fill-box; transform-origin:center; }
.acc-panel.is-open .ill-step{ animation:illIn .7s var(--ease) both; animation-delay:var(--d,0s); }
@keyframes illIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.ill-spark{ stroke-dasharray:1; stroke-dashoffset:0; }
.acc-panel.is-open .ill-spark{ animation:illDraw 1.5s var(--ease) .2s both; }
@keyframes illDraw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }

@media (max-width:900px){
  /* Empiles, les volets deviennent larges et bas. Les halos sont calibres en
     pourcentage de la LARGEUR, donc sur une bande de 358x120 ils font 600px de
     large et noient le volet dans un aplat bleu. On les recalibre ici sur la
     hauteur du volet : meme degrade que sur grand ecran, tourne d'un quart. */
  .acc-panel:not(.is-open):not(.is-closing) .acc-glow i{ filter:blur(26px); opacity:.78; }
  /* un seul halo par bande : deux nappes sur 120px de haut se rejoignent et
     donnent un aplat bleu au lieu d'un degrade */
  .acc-panel:not(.is-open):not(.is-closing) .acc-glow i:nth-child(2){ opacity:.34; }
  .acc--01:not(.is-open):not(.is-closing) .acc-glow i:nth-child(1),
  .acc--02:not(.is-open):not(.is-closing) .acc-glow i:nth-child(1),
  .acc--03:not(.is-open):not(.is-closing) .acc-glow i:nth-child(1),
  .acc--04:not(.is-open):not(.is-closing) .acc-glow i:nth-child(1){
    left:-8%; right:auto; bottom:-104%; top:auto;
    width:min(68%,250px); aspect-ratio:1/.95;
  }
  .acc--01:not(.is-open):not(.is-closing) .acc-glow i:nth-child(2),
  .acc--02:not(.is-open):not(.is-closing) .acc-glow i:nth-child(2),
  .acc--03:not(.is-open):not(.is-closing) .acc-glow i:nth-child(2),
  .acc--04:not(.is-open):not(.is-closing) .acc-glow i:nth-child(2){
    right:-10%; left:auto; top:-104%; bottom:auto;
    width:min(50%,190px); aspect-ratio:1/.9;
  }
  /* 02 et 04 gardent leur inversion : les masses ne tombent pas au meme endroit
     d'un volet a l'autre, sinon les quatre bandes se ressemblent */
  .acc--02:not(.is-open):not(.is-closing) .acc-glow i:nth-child(1),
  .acc--04:not(.is-open):not(.is-closing) .acc-glow i:nth-child(1){
    left:auto; right:-8%; bottom:-80%;
  }
  .acc--02:not(.is-open):not(.is-closing) .acc-glow i:nth-child(2),
  .acc--04:not(.is-open):not(.is-closing) .acc-glow i:nth-child(2){
    right:auto; left:-10%; top:-88%;
  }

  .acc{ flex-direction:column; height:auto; }
  .acc-panel{ flex:none; height:120px; transition:height .8s var(--ease); }
  .acc-panel.is-open{ height:auto; min-height:440px; }
  .acc-media{ height:180px; }
  .acc-label{ inset:auto 0 0 0; place-items:start; padding:clamp(16px,4vw,24px); }
  .acc-label span{
    writing-mode:horizontal-tb; transform:none;
    font-size:clamp(1.5rem,7vw,2.1rem); letter-spacing:-.01em;
  }
  .acc-body{ position:relative; inset:auto; width:100%; padding-top:180px; }
}
@media (prefers-reduced-motion:reduce){
  .acc-panel,.acc-media,.acc-body{ transition:flex-grow .5s ease, height .5s ease, opacity .3s ease !important; }
  /* le voile et les halos doivent suivre le meme tempo que le volet : sinon ils
     basculent d'un coup et le volet encore large vire au bleu pendant la moitie
     de la transition */
  .acc-panel::after{ transition:opacity .4s ease !important; }
  .acc-surface{ transition:background .4s ease !important; }
  .acc-glow i{ transition:opacity .4s ease, left .4s ease, right .4s ease,
                          top .4s ease, bottom .4s ease, width .4s ease !important; }
  .acc-glow i{ animation-duration:34s !important; animation-iteration-count:infinite !important; }
  .acc-glow i:nth-child(2){ animation-duration:44s !important; }
  .acc-panel:not(.is-open):not(.is-closing) .acc-glow i{ animation-duration:26s !important; }
  .acc-panel.is-open .ill-step,.acc-panel.is-open .ill-spark{ animation:none !important; }
}

/* industries */
/* z-index 1 : les cartes secteurs passent devant la grosse bulle de la section
   suivante, qui semble ainsi glisser derriere « Bars & restaurants » */
.industries{ position:relative; z-index:1; padding:clamp(60px,10vh,120px) var(--pad); }
/* petite bulle, a droite du chapeau de section */
.sec-bubble{
  position:absolute; z-index:0; pointer-events:none;
  right:30%; top:clamp(40px,8vh,110px); width:min(13vw,190px); aspect-ratio:1/1.004;
  background:url("/wp-content/themes/oli-design-28/site/assets/bubbles/one.webp") center/contain no-repeat;
  mix-blend-mode:screen; opacity:.85;
  /* la forme vit dans le style de base, pas dans les keyframes */
  transform:scale(.92,-1.05) rotate(-14deg);
  filter:url(#bubbleWarp);
  animation:secBubbleFloat 32s var(--ease) infinite alternate;
}
@keyframes secBubbleFloat{
  from{ translate:0 0; }
  to{ translate:-4% 7%; }
}
/* deuxieme bulle, plus petite, en haut a gauche de la section */
.sec-bubble--2{
  right:auto; left:3%; top:clamp(-30px,-1.6vh,-6px);
  width:min(9vw,130px);
  transform:scale(-1.05,.9) rotate(19deg);
  opacity:.8;
  animation-duration:24s;
}
@media (max-width:900px){
  .sec-bubble{ right:-16%; top:auto; bottom:-4%; width:min(34vw,170px); opacity:.7; }
  .sec-bubble--2{ left:-14%; right:auto; top:-12px; bottom:auto; width:min(26vw,130px); opacity:.7; }
}
/* meme repartition que la reference : deux rangees, blocs de largeurs inegales */
.ind-grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(10px,1.1vw,16px); }
.ind-card{
  position:relative; overflow:hidden; border-radius:var(--r-xl); isolation:isolate;
  min-height:clamp(240px,25vw,320px); display:block; border:1px solid var(--line);
  transition:transform .55s var(--ease), border-color .55s var(--ease);
}
/* rangee 1 : un bloc etroit et haut, puis un bloc large */
.ind-card:nth-child(1){ grid-column:span 5; min-height:clamp(300px,32vw,400px); }
.ind-card:nth-child(2){ grid-column:span 7; min-height:clamp(300px,32vw,400px); }
/* rangee 2 : large, etroit, moyen */
.ind-card:nth-child(3){ grid-column:span 5; }
.ind-card:nth-child(4){ grid-column:span 3; }
.ind-card:nth-child(5){ grid-column:span 4; }
.ind-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  filter:saturate(.95) brightness(.82); transition:transform 1.1s var(--ease), filter .6s var(--ease);
}
.ind-card::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(8,8,10,.88) 4%, rgba(8,8,10,.42) 38%, rgba(8,8,10,.06) 72%, transparent);
  transition:background .5s var(--ease);
}
.ind-card:hover{ transform:translateY(-6px); border-color:var(--line-2); }
.ind-card:hover img{ transform:scale(1.06); filter:saturate(1.05) brightness(.95); }
.ind-card:hover::after{ background:linear-gradient(to top, rgba(10,16,40,.88) 2%, rgba(8,8,10,.6) 34%, rgba(8,8,10,.1) 72%, transparent); }
.ind-body{ position:absolute; inset:auto 0 0 0; padding:clamp(18px,2vw,28px); max-width:34ch; }
.ind-eyebrow{ display:block; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:#7FA8FF; margin-bottom:8px; text-shadow:0 1px 12px rgba(6,8,14,.95); }
.ind-card h3{ font-size:clamp(1.15rem,1.8vw,1.6rem); font-weight:500; text-shadow:0 1px 14px rgba(6,8,14,.95); }
.ind-card p{
  /* le gris de base disparaissait sur les photos eclaircies */
  margin-top:8px; font-size:.86rem; color:#E4E6EE;
  text-shadow:0 1px 12px rgba(6,8,14,.95), 0 0 26px rgba(6,8,14,.7);
  opacity:0; max-height:0; transform:translateY(8px);
  transition:opacity .45s var(--ease), max-height .5s var(--ease), transform .45s var(--ease);
}
.ind-card:hover p{ opacity:1; max-height:80px; transform:none; }
.ind-go{
  position:absolute; top:clamp(16px,1.8vw,24px); right:clamp(16px,1.8vw,24px);
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-2); color:var(--text);
  transition:background .45s var(--ease), transform .45s var(--ease);
}
.ind-card:hover .ind-go{ background:var(--grad-cool); border-color:transparent; transform:translateX(4px); }
.ind-more{ max-width:var(--maxw); margin:clamp(24px,4vh,38px) auto 0; font-size:.92rem; color:var(--muted); }
.ind-more a{ color:var(--blue); font-weight:500; }

/* à propos */
.about{
  position:relative; max-width:var(--maxw); margin:0 auto;
  padding:clamp(60px,10vh,120px) var(--pad);
}
/* le portrait est remplace par une bulle, comme ailleurs sur la page */
.about-bubble{
  position:absolute; z-index:0; pointer-events:none;
  right:5%; top:auto; bottom:clamp(10px,3vh,54px); width:min(13vw,180px); aspect-ratio:1/1.004;
  background:url("/wp-content/themes/oli-design-28/site/assets/bubbles/one.webp") center/contain no-repeat;
  mix-blend-mode:screen; opacity:.85;
  transform:scale(1.1,-.78) rotate(-11deg);
  filter:url(#bubbleWarp);
  animation:secBubbleFloat 29s var(--ease) infinite alternate;
}

.about-head{ position:relative; z-index:1; }
.about-head .eyebrow{ margin:0 0 clamp(10px,1.6vh,16px); }
.about h2{ display:inline-block; font-size:clamp(2rem,4.4vw,3.4rem); font-weight:500; }

/* texte a gauche, chiffres en colonne sur le cote */
.about-main{
  position:relative; z-index:1;
  margin:clamp(16px,2.4vh,26px) 0 0;
  display:grid; grid-template-columns:1.6fr .8fr; gap:clamp(30px,6vw,90px);
  align-items:center;
}
.about-cols{ display:grid; justify-items:start; gap:clamp(14px,2vh,20px); max-width:62ch; }
.about-cols p{ color:var(--muted); font-size:.98rem; }
.about-cols p.story-q{ color:var(--text); font-size:clamp(1.1rem,1.7vw,1.4rem); }

.about-facts{ display:grid; gap:clamp(16px,2.6vh,26px); }
.about-facts li{ padding:0; }
.about-facts strong{
  display:block; font-family:var(--display); font-size:clamp(1.7rem,3vw,2.4rem); font-weight:500;
  background:var(--grad-cool); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.about-facts span{ display:block; margin-top:6px; font-size:.8rem; color:var(--muted); max-width:18ch; }
/* le troisieme n'est pas un chiffre : un peu plus petit pour garder l'equilibre */
.about-facts .fact-word{ font-size:clamp(1.4rem,2.4vw,1.95rem); letter-spacing:-.02em; }
/* deux bulles de plus, aux emplacements demandes : la grande deborde au-dessus
   de la section, la petite se pose au bout de « Hi, I'm Olivia » */
.about-bubble--top{
  right:auto; bottom:auto; left:46%; top:clamp(-235px,-19vh,-150px);
  width:min(23vw,300px);
  transform:scale(-1.06,.92) rotate(13deg);
  opacity:.82; animation-duration:34s;
}
.about-bubble--mid{
  right:auto; bottom:auto; left:33%; top:clamp(70px,9vh,120px);
  width:min(8.5vw,112px);
  transform:scale(.95,-1.08) rotate(-24deg);
  opacity:.9; animation-duration:21s;
}

.about-cta{ position:relative; z-index:1; margin-top:clamp(18px,2.6vh,26px); align-self:start; }

@media (max-width:900px){
  .about-main{ grid-template-columns:1fr; gap:clamp(24px,4vh,36px); }
  .about-bubble{ right:-18%; bottom:-2%; width:min(38vw,190px); opacity:.7; }
  .about-bubble--top{ left:auto; right:-20%; top:-70px; bottom:auto; width:min(52vw,260px); opacity:.6; }
  .about-bubble--mid{ left:auto; right:6%; top:auto; bottom:34%; width:min(22vw,110px); opacity:.75; }
}

/* blog */
.blog{ padding:clamp(60px,10vh,120px) var(--pad); }
.blog-grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.4vw,20px); }
.post{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(24px,2.4vw,34px); border-radius:var(--r-xl);
  background:var(--surface-2); border:1px solid rgba(255,255,255,.16);
  display:flex; flex-direction:column; min-height:clamp(280px,26vw,340px);
  transition:transform .5s var(--ease), border-color .5s var(--ease);
}
.post:hover{ transform:translateY(-8px); border-color:rgba(255,255,255,.5); }

/* le meme halo bleu que les volets services, en bas de carte */
.post-glow{
  position:absolute; z-index:-1; left:-25%; bottom:-55%;
  width:150%; aspect-ratio:1/.62; border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(150,190,255,1) 0%, rgba(60,112,255,.98) 26%,
    rgba(32,70,225,.55) 52%, transparent 78%);
  filter:blur(34px); opacity:.4; mix-blend-mode:screen;
  transition:opacity .6s var(--ease), transform .8s var(--ease);
}
.post:hover .post-glow{ opacity:.85; transform:translateY(-10%) scale(1.08); }

.post-top{ display:flex; align-items:center; gap:12px; }
.post-num{ font-family:var(--display); font-size:.78rem; letter-spacing:.1em; color:var(--muted); }
.post-tag{
  font-size:.64rem; letter-spacing:.15em; text-transform:uppercase; font-weight:600;
  color:#9CC3FF; padding:5px 10px; border-radius:99px; border:1px solid var(--line);
}
.post h3{
  margin-top:clamp(20px,3vh,32px); font-size:clamp(1.05rem,1.4vw,1.25rem);
  font-weight:500; line-height:1.28; letter-spacing:-.02em;
}
.post p{ margin-top:10px; font-size:.88rem; color:var(--muted); }
.post-foot{
  margin-top:auto; padding-top:22px; display:flex; align-items:center;
  justify-content:space-between; gap:14px;
}
.post-soon{ font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.post-go{
  width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.28); color:var(--text);
  transition:background .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.post-go svg{ width:16px; height:16px; }
.post:hover .post-go{ background:rgba(255,255,255,.14); border-color:#fff; transform:translateX(4px); }
.post[hidden]{ display:none; }

/* cartes d'article avec photo en tete (page /blog/) */
.post--cover{ padding:0; }
.post-cover{
  position:relative; margin:0; aspect-ratio:16/10; overflow:hidden;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.post-cover img{
  width:100%; height:100%; object-fit:cover; object-position:var(--cov-pos,50% 50%);
  filter:hue-rotate(var(--cov-hue,0deg)) saturate(1.05);
  transform:scale(1.04); transition:transform .9s var(--ease);
}
.post:hover .post-cover img{ transform:scale(1.11); }
.post-cover::after{
  content:""; position:absolute; inset:auto 0 -1px 0; height:62%; pointer-events:none;
  background:linear-gradient(to top, var(--surface-2) 4%, rgba(19,19,24,.55) 46%, transparent);
}
.post-cover .post-tag{
  position:absolute; z-index:1; left:16px; bottom:14px;
  background:rgba(8,8,10,.5); border-color:rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.post-body{
  flex:1; display:flex; flex-direction:column;
  padding:clamp(18px,1.8vw,24px) clamp(20px,2.2vw,30px) clamp(22px,2.2vw,28px);
}
.post--cover .post-body h3{ margin-top:0; }
.post--cover .post-foot{ padding-top:18px; }
.post-soon{ display:inline-flex; align-items:center; gap:10px; }
.post-num{ opacity:.75; }

/* ═══════════ pages d'article : /blog/<slug>/ ═══════════ */
.post-page{ position:relative; }
.post-hero{
  position:relative; overflow:hidden;
  padding:clamp(110px,15vh,160px) var(--pad) clamp(26px,4vh,40px);
}
.post-hero-inner{ position:relative; z-index:1; max-width:900px; margin:0 auto; }
.post-hero .post-tag{ display:inline-block; margin-top:clamp(26px,4vh,44px); }
.post-hero h1{
  margin-top:14px; font-family:var(--serif); text-transform:uppercase; font-weight:400;
  font-size:clamp(1.85rem,3.7vw,3.05rem); letter-spacing:-.02em; line-height:1.08;
  max-width:24ch;
  background-image:linear-gradient(96deg,
    #FFFFFF 0%, #FFFFFF 22%, #9BC0FF 42%, #2E5BE8 58%, #DCE7FF 74%, #FFFFFF 94%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  padding-bottom:.08em; margin-bottom:-.08em;
}
.post-hero .svc-lede{ max-width:62ch; }

/* la photo a gauche, la signature a droite */
.post-head{
  margin:clamp(18px,3vh,30px) auto 0; padding:0 var(--pad);
  max-width:calc(1140px + var(--pad)*2);
  display:grid; gap:clamp(20px,3vw,40px); align-items:center;
  grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);
}
.post-head-cover{ margin:0; }
.post-head-cover img{
  width:100%; height:auto; aspect-ratio:16/10; object-fit:cover;
  border-radius:var(--r-lg); border:1px solid var(--line);
}

.post-body-wrap{
  max-width:calc(820px + var(--pad)*2); margin:0 auto;
  padding:clamp(30px,5vh,54px) var(--pad) clamp(50px,8vh,90px);
}

/* signature : qui ecrit, quand, mis a jour quand */
.byline{
  padding:clamp(22px,2.6vw,30px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
}
.byline-cat{ margin-bottom:16px; }
.byline-who{ display:flex; align-items:center; gap:12px; }
.byline-photo{
  width:46px; height:46px; flex:none; border-radius:50%; object-fit:cover;
  border:1px solid var(--line-2);
}
.byline-name{ font-size:.95rem; }
.byline-name strong{ font-weight:600; }
.byline-bio{ margin-top:14px; color:var(--muted); font-size:.88rem; }
.byline-dates{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line); padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:6px 16px;
  font-family:var(--display); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}
.byline-dates li + li{ position:relative; padding-left:16px; }
.byline-dates li + li::before{
  content:""; position:absolute; left:0; top:50%; width:5px; height:5px; margin-top:-2px;
  border-radius:50%; background:var(--line-2);
}

/* sommaire clicable */
.post-summary{
  margin-top:clamp(26px,4vh,38px); padding:clamp(20px,2.6vw,28px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
}
.post-summary-title{
  font-family:var(--display); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.post-summary-list{ margin:14px 0 0; padding-left:1.35em; display:grid; gap:9px; }
.post-summary-list li::marker{ color:#5B8CFF; font-variant-numeric:tabular-nums; }
.post-summary-list a{
  color:var(--text); font-size:.95rem; line-height:1.4;
  border-bottom:1px solid transparent; transition:color .35s var(--ease), border-color .35s var(--ease);
}
.post-summary-list a:hover{ color:#9CC3FF; border-bottom-color:var(--line-2); }

/* corps de l'article */
.prose{ margin-top:clamp(30px,5vh,48px); }
.prose > h2{
  scroll-margin-top:96px;
  margin-top:clamp(38px,6vh,62px); padding-top:clamp(20px,3vh,28px);
  border-top:1px solid var(--line);
  font-size:clamp(1.25rem,2.1vw,1.65rem); font-weight:500; letter-spacing:-.025em;
  line-height:1.24; max-width:34ch;
}
.prose > h2:first-child{ margin-top:0; }
.prose h3{
  margin-top:clamp(24px,3.4vh,34px); font-size:1.02rem; font-weight:500; letter-spacing:-.01em;
}
.prose p{ margin-top:14px; color:var(--muted); font-size:1rem; line-height:1.72; max-width:72ch; }
.prose strong{ color:var(--text); font-weight:600; }
.prose em{ color:var(--text); font-style:italic; }
.prose ul,.prose ol{ margin:16px 0 0; padding-left:1.35em; max-width:72ch; }
.prose li{ margin-top:9px; color:var(--muted); line-height:1.66; }
.prose li::marker{ color:#5B8CFF; }
.prose li strong{ color:var(--text); }
.prose .faq{ margin-top:20px; }
.prose a{ color:#7FA8FF; border-bottom:1px solid var(--line-2); }

/* tableaux : ils defilent seuls plutot que d'elargir la page */
.prose .tw{
  margin-top:22px; overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-sm);
}
.prose table{ width:100%; border-collapse:collapse; font-size:.86rem; }
.prose th{
  text-align:left; padding:11px 14px; white-space:nowrap; vertical-align:bottom;
  background:rgba(255,255,255,.04); border-bottom:1px solid var(--line-2);
  font-family:var(--display); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text); font-weight:600;
}
.prose td{
  padding:11px 14px; vertical-align:top; color:var(--muted); line-height:1.5;
  border-bottom:1px solid var(--line);
}
.prose tr:last-child td{ border-bottom:0; }
.prose td strong{ color:var(--text); }

/* encart auteur, appel et suite de lecture */
.post-author{
  margin-top:clamp(40px,6vh,64px); padding:clamp(22px,2.6vw,30px);
  display:flex; gap:clamp(16px,2vw,24px); align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
}
.post-author img{
  width:72px; height:72px; flex:none; border-radius:50%; object-fit:cover;
  border:1px solid var(--line-2);
}
.post-author-name{ font-family:var(--display); font-size:1.02rem; font-weight:500; }
.post-author-bio{ margin-top:8px; color:var(--muted); font-size:.9rem; max-width:60ch; }
.post-author-link{
  display:inline-block; margin-top:12px; color:#7FA8FF; font-size:.88rem;
  border-bottom:1px solid var(--line-2);
}
.post-cta{
  margin-top:clamp(30px,5vh,48px); padding:clamp(24px,3vw,38px);
  display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg);
}
.post-cta h2{ font-size:clamp(1.2rem,2vw,1.5rem); font-weight:500; letter-spacing:-.02em; }
.post-cta p{ margin-top:10px; color:var(--muted); font-size:.94rem; max-width:52ch; }
.post-more{ margin-top:clamp(40px,6vh,64px); }
.post-more h2{
  font-size:clamp(1.15rem,1.9vw,1.45rem); font-weight:500; letter-spacing:-.02em;
  margin-bottom:18px;
}

/* carte d'article publiee sur /blog/ */
.post--live{ display:flex; color:inherit; }
.post-date{
  font-family:var(--display); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}
@media (max-width:900px){
  .post-head{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .post-author{ flex-direction:column; align-items:flex-start; text-align:left; }
}

/* barre de recherche « gooey » : l'orbe se detache de la pilule et le filtre SVG
   les relie par un filet. C'est un filtre CSS, pas une animation : il reste visible
   quand les animations sont reduites. Seul le deplacement de l'orbe est anime. */
.blog-tools{
  margin-top:clamp(26px,4.5vh,44px);
  display:flex; flex-direction:column; align-items:flex-start; gap:clamp(16px,2.4vh,24px);
}
.gsearch{ width:min(100%,470px); }
.gsearch-blob{
  position:relative; display:flex; align-items:center;
  padding-right:22px; filter:url(#goo-effect);
}
.gsearch-pill{
  flex:1 1 auto; min-width:0; margin-right:38px; background:#16161F; border-radius:99px;
  padding:15px 26px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:box-shadow .5s var(--ease);
}
.gsearch.is-active .gsearch-pill{ box-shadow:inset 0 0 0 1px rgba(156,195,255,.75); }
.gsearch-input{
  width:100%; background:transparent; border:0; outline:none; color:var(--text);
  font-family:var(--body); font-size:.95rem; letter-spacing:-.01em;
}
.gsearch-input::placeholder{ color:var(--muted); }
.gsearch-input::-webkit-search-cancel-button,
.gsearch-input::-webkit-search-decoration{ -webkit-appearance:none; display:none; }
.gsearch-orb{
  position:absolute; right:22px; top:50%; margin-top:-25px;
  width:50px; height:50px; border-radius:50%; background:#16161F;
  display:grid; place-items:center; color:#9CC3FF;
  translate:0 0; transition:translate .6s var(--ease), color .4s var(--ease);
}
.gsearch.is-active .gsearch-orb{ translate:14px 0; color:#CFE0FF; }
.gsearch-orb svg{ width:17px; height:17px; grid-area:1/1; }
.gsearch-ic-wait{ opacity:0; animation:orb-spin .7s linear infinite; }
.gsearch.is-loading .gsearch-ic-find{ opacity:0; }
.gsearch.is-loading .gsearch-ic-wait{ opacity:1; }
@keyframes orb-spin{ to{ rotate:360deg; } }

/* filtres par prestation */
.blog-cats{ display:flex; flex-wrap:wrap; gap:8px; }
.blog-cat{
  font-family:var(--display); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); background:rgba(255,255,255,.03); border:1px solid var(--line);
  border-radius:99px; padding:10px 17px; cursor:pointer;
  transition:color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.blog-cat:hover{ color:var(--text); border-color:rgba(255,255,255,.42); }
.blog-cat.is-on{ color:#08080A; background:#9CC3FF; border-color:#9CC3FF; }
.blog-empty{
  margin-top:clamp(26px,4vh,40px); text-align:center; color:var(--muted); font-size:.95rem;
}
.blog-empty a{ color:#7FA8FF; border-bottom:1px solid var(--line-2); }

/* page « a propos » : la question d'ouverture */
.svc-block > p a,
.about-cols p a{ color:#7FA8FF; border-bottom:1px solid var(--line-2); }
.svc-block > p a:hover,
.about-cols p a:hover{ color:#BFD6FF; border-bottom-color:#7FA8FF; }
.story-q{
  font-family:var(--display); font-size:clamp(1.15rem,1.9vw,1.55rem); font-weight:500;
  line-height:1.32; letter-spacing:-.02em; color:var(--text);
}

.blog-more{ max-width:var(--maxw); margin:clamp(22px,3vh,32px) auto 0; text-align:center; }
.blog-more a{ color:#7FA8FF; font-size:.92rem; border-bottom:1px solid var(--line-2); }

/* contact */
.contact{ position:relative; padding:clamp(60px,10vh,120px) var(--pad) 24px; overflow:hidden; }
.contact-glow{
  position:absolute; inset:-30% -10% auto -10%; height:130%; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(34% 40% at 22% 30%, rgba(59,107,255,.45), transparent 70%),
             radial-gradient(34% 40% at 80% 62%, rgba(59,107,255,.4), transparent 72%);
  animation:floatA 24s ease-in-out infinite alternate;
}
/* deux bulles dans le vide sous la colonne de gauche */
.contact-bubble{
  position:absolute; z-index:0; pointer-events:none;
  background:url("/wp-content/themes/oli-design-28/site/assets/bubbles/one.webp") center/contain no-repeat;
  mix-blend-mode:screen; aspect-ratio:1/1.004;
  filter:url(#bubbleWarp);
  animation:secBubbleFloat 27s var(--ease) infinite alternate;
}
.contact-bubble--big{
  left:17%; top:50%; width:min(18vw,240px);
  transform:scale(-1.04,.86) rotate(-16deg); opacity:.82;
}
.contact-bubble--small{
  left:42%; top:39%; width:min(7.5vw,100px);
  transform:scale(.9,-1.1) rotate(21deg); opacity:.9; animation-duration:19s;
}
@media (max-width:900px){
  .contact-bubble--big{ left:auto; right:-20%; top:auto; bottom:2%; width:min(48vw,240px); opacity:.7; }
  .contact-bubble--small{ left:-10%; top:26%; width:min(24vw,120px); opacity:.7; }
}

.contact-inner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,70px); align-items:start; }
.contact-copy h2{ font-size:clamp(1.9rem,3.4vw,2.9rem); font-weight:500; }
.contact-copy > p{ margin-top:16px; color:var(--muted); max-width:46ch; }
.contact-points{ display:grid; gap:10px; margin:26px 0; }
.contact-points li{ display:flex; gap:11px; align-items:center; font-size:.92rem; color:var(--text); }
.contact-points span{ width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:var(--grad-cool); color:#fff; font-size:.6rem; font-weight:700; flex:none; }
.contact-form{
  background:var(--surface); border:1px solid rgba(255,255,255,.42); border-radius:var(--r-xl);
  padding:clamp(22px,2.4vw,34px); display:grid; gap:15px;
}
.field{ display:grid; gap:7px; border:none; padding:0; margin:0; }
.field label,.field legend{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); padding:0; }
.opt{ text-transform:none; letter-spacing:0; font-weight:400; }
.field input,.field textarea{
  width:100%; background:rgba(0,0,0,.35); border:1px solid var(--line); border-radius:var(--r-sm);
  /* un filet blanc tout autour du champ : la zone de saisie se voit d'un coup
     d'oeil, plutot que de se deviner */
  border:1.5px solid rgba(255,255,255,.55);
  padding:13px 15px; color:var(--text); font:inherit; font-size:.92rem;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{ color:#5A5A66; }
.field input:hover,.field textarea:hover{ border-color:rgba(255,255,255,.8); }
.field input:focus,.field textarea:focus{
  outline:none; border-color:#FFFFFF; background:rgba(0,0,0,.5);
  box-shadow:0 0 0 3px rgba(127,168,255,.18);
}
.field textarea{ resize:vertical; }
.choices{ display:flex; flex-wrap:wrap; gap:6px; }
.choices label{ cursor:pointer; }
.choices input{ position:absolute; left:0; top:0; width:1px; height:1px; opacity:0; pointer-events:none; }
/* les quatre choix doivent tenir sur une seule ligne */
.choices span{ display:inline-block; padding:8px 11px; border-radius:99px; border:1px solid var(--line-2); font-size:.78rem; white-space:nowrap; transition:all .35s var(--ease); }
.choices input:checked + span{ background:var(--grad-cool); border-color:transparent; color:#fff; }
.form-note{ font-size:.8rem; min-height:1.2em; color:var(--blue); }

.foot-bar{
  position:relative; z-index:2; max-width:var(--maxw); margin:clamp(46px,7vh,80px) auto 0;
  border-top:1px solid var(--line); padding-top:22px;
  display:flex; flex-wrap:wrap; align-items:center; gap:18px; justify-content:space-between;
}
.foot-links{ display:flex; flex-wrap:wrap; gap:18px; font-size:.84rem; color:var(--muted); }
.foot-links a:hover{ color:var(--text); }
.legal{ width:100%; font-size:.74rem; color:#5A5A66; }

/* ═══════════ REVEAL ═══════════ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1080px){
  .menu{ display:none; }
  .burger{ display:block; }
  .stat{ position:static; display:inline-block; margin:0 26px 14px 0; }
  .stats-inline{ display:flex; }
  .blog-grid{ grid-template-columns:1fr 1fr; }
  .ind-grid{ grid-template-columns:repeat(2,1fr); }
  .ind-card:nth-child(n){ grid-column:span 1; min-height:clamp(240px,32vw,320px); }
  .ind-card:nth-child(1){ grid-column:span 2; }
  .contact-inner{ grid-template-columns:1fr; }
  .sec-head--row .sec-sub{ text-align:left; }
}

/* deux bulles dans le vide sous la colonne de gauche */
.contact-bubble{
  position:absolute; z-index:0; pointer-events:none;
  background:url("/wp-content/themes/oli-design-28/site/assets/bubbles/one.webp") center/contain no-repeat;
  mix-blend-mode:screen; aspect-ratio:1/1.004;
  filter:url(#bubbleWarp);
  animation:secBubbleFloat 27s var(--ease) infinite alternate;
}
.contact-bubble--big{
  left:17%; top:50%; width:min(18vw,240px);
  transform:scale(-1.04,.86) rotate(-16deg); opacity:.82;
}
.contact-bubble--small{
  left:42%; top:39%; width:min(7.5vw,100px);
  transform:scale(.9,-1.1) rotate(21deg); opacity:.9; animation-duration:19s;
}
@media (max-width:900px){
  .contact-bubble--big{ left:auto; right:-20%; top:auto; bottom:2%; width:min(48vw,240px); opacity:.7; }
  .contact-bubble--small{ left:-10%; top:26%; width:min(24vw,120px); opacity:.7; }
}

/* sous 1000px l'alignement sur le « IG » pousserait le titre en plein dans les bulles :
   on garde l'escalier, en plus resserre */
@media (max-width:1000px){
  .h1-l2{ padding-left:3.2em; }
  .h1-l3{ padding-left:2.25em; }
}
@media (max-width:900px){
  /* le visuel garde ses couleurs sur mobile : ni assombrissement ni voile.
     La lisibilite du titre repose sur son ombre portee. */
  .lede{ color:#D8DAE4; }
}
@media (max-width:900px){
  /* sans voile, le titre repose sur l'image : une ombre portee suffit a le
     detacher des irisations sans salir la photo */
  /* le titre est un degrade clippe dans le texte : une `text-shadow` se voit au
     travers des lettres et les grise. Le `drop-shadow` s'applique au rendu, donc
     la couleur reste exactement celle du grand ecran. */
  .h1{ filter:drop-shadow(0 2px 18px rgba(2,3,8,.9)) drop-shadow(0 1px 3px rgba(2,3,8,.75)); }
  .lede{ text-shadow:0 1px 12px rgba(2,3,8,.8); }
}
/* Sur mobile, l'en-tete de chaque page est centre comme celui de l'accueil :
   fil d'Ariane, titre, chapo et bouton. */
@media (max-width:720px){
  .svc-hero-inner,.post-hero-inner,.ipage-hero-inner,.legal-head{ text-align:center; }
  /* le fil d'Ariane reste a gauche : centre, il se lit comme un titre */
  .crumbs{ text-align:left; }
  .svc-hero-inner .crumb-list,.post-hero-inner .crumb-list,
  .ipage-hero-inner .crumb-list{ justify-content:flex-start; }
  .svc-hero h1,.post-hero h1,.ipage-hero h1,.legal-head h1{ margin-left:auto; margin-right:auto; }
  .svc-lede,.ipage-lede,.legal-updated{ margin-left:auto; margin-right:auto; }
  .svc-hero-cta,.ipage-hero-cta{ justify-content:center; }
  .post-hero .post-tag{ margin-left:auto; margin-right:auto; }
}

/* les trois chiffres, centres sur mobile : empiles, alignes a gauche, ils
   flottaient dans le vide a droite */
@media (max-width:720px){
  .about-facts,.about-facts--row{ text-align:center; }
  .about-facts span,.about-facts--row span{ margin-left:auto; margin-right:auto; max-width:24ch; }
}

@media (max-width:720px){
  /* le bloc est cale par le BAS : le bouton tombe alors a 75% de la hauteur
     d'ecran quelle que soit la longueur du titre, et le texte remonte d'autant */
  .hero{ justify-content:flex-end; padding-top:clamp(84px,10vh,108px); padding-bottom:calc(25svh - 52px); }
  /* sur mobile le hero est centre : l'escalier n'a plus de sens sur trois ou
     quatre lignes serrees, et le texte tient mieux dans le voile sombre */
  .h1{ font-size:clamp(2.1rem,10vw,3.2rem); text-align:center; }
  .h1-l2,.h1-l3{ padding-left:0; }
  .hero-inner{ text-align:center; }
  .lede{ margin-left:auto; margin-right:auto; }
  .hero-cta{ justify-content:center; }
  .stats{ justify-content:center; }
  .blog-grid,.ind-grid{ grid-template-columns:1fr; }
  .ind-card:nth-child(n){ grid-column:span 1; }
  .ind-card p{ opacity:1; max-height:80px; transform:none; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  /* exception assumee : les cartes numerotees gardent leur entree, en
     deplacement vertical seulement, sinon la section surgit d'un bloc */
  .strat.reveal{ opacity:0; translate:0 38px;
    transition:opacity .6s ease, translate .6s ease !important; }
  .strat.reveal.in{ opacity:1; translate:0 0; }
  .strat.reveal::before{ transition:opacity .7s ease .2s !important; }
  .strat.reveal .strat-num{ transition:opacity .5s ease .2s, translate .5s ease .2s !important; }
  .why.reveal{ opacity:0; translate:0 30px;
    transition:opacity .55s ease, translate .55s ease !important; }
  .why.reveal.in{ opacity:1; translate:0 0; }
  .why.reveal .why-icon{ transition:opacity .5s ease .2s, translate .5s ease .2s !important; }
  .ipage-marks li.reveal{ opacity:0; translate:0 26px;
    transition:opacity .5s ease, translate .5s ease !important; }
  .ipage-marks li.reveal.in{ opacity:1; translate:0 0; }
  .h1 .w{ opacity:1; transform:none; }
  .blob{ animation:none !important; }
  .ls-char .ls-a,.ls-char .ls-b{ transition:transform .5s cubic-bezier(.32,1.2,.4,1) !important; transition-delay:var(--d,0s) !important; }
  .btn{ transition:transform .4s var(--ease), box-shadow .4s var(--ease) !important; }
}

/* ── bulle posée autour du mot « Website » ── */
.w--bubbled{ position:relative; isolation:isolate; }
.w--bubbled::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:50%; width:118%; height:178%;
  transform:translate(-50%,-50%) rotate(-3deg);
  background:url("/wp-content/themes/oli-design-28/site/assets/bubbles/one.webp") center/100% 100% no-repeat;
  mix-blend-mode:screen; pointer-events:none; opacity:.85;
  animation:wordBubble 14s ease-in-out infinite alternate;
}
@keyframes wordBubble{
  from{ transform:translate(-50%,-50%) rotate(-3deg) scale(1); }
  to{ transform:translate(-49%,-52%) rotate(2deg) scale(1.04); }
}
@media (prefers-reduced-motion:reduce){ .w--bubbled::before{ animation:none !important; } }

/* ══════════ TITRES : DEGRADE DANS LE TEXTE ══════════
   Comme la reference : le blanc domine, une bande coloree traverse quelques
   lettres. Chaque titre a sa propre bande — teinte, angle et position differents.
   Le H1 est degrade mot par mot : ses mots sont des inline-block animes, et un
   background-clip pose sur le parent ne les peindrait pas. */
.h1 .w,
.services h2, .industries h2, .about h2, .blog h2, .contact h2{
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  /* la boite doit contenir jambages et accents, sinon ils ne sont pas peints */
  padding-bottom:.1em; margin-bottom:-.1em;
}

/* H1 — bleu glace qui traverse le milieu de chaque mot */
.h1 .w{
  background-image:linear-gradient(97deg,
    #FFFFFF 0%, #F2F6FF 26%, #A8CBFF 44%, #4E86FF 56%, #DCE7FF 70%, #FFFFFF 92%);
}
/* Services — la bande arrive tot, bleu vers violet */
.services h2{
  background-image:linear-gradient(88deg,
    #FFFFFF 0%, #7FA8FF 16%, #6E5CFF 30%, #EAEFFF 48%, #FFFFFF 74%);
}
/* Secteurs — la bande finit le titre. Bleue, comme partout ailleurs : le
   violet vers rose etait le seul titre du site a sortir de l'accent. */
.industries h2{
  background-image:linear-gradient(92deg,
    #FFFFFF 0%, #FFFFFF 46%, #9BC0FF 66%, #3B6BFF 84%, #DCE7FF 100%);
}
/* A propos — la bande bleue tombe sur « m Oli », en bleu plus soutenu.
   Les pourcentages viennent de la mesure des lettres (h2 en inline-block,
   le degrade se cale donc exactement sur le texte). */
.about h2{
  background-image:linear-gradient(90deg,
    #FFFFFF 0%, #FFFFFF 28%,
    #8FB4FF 35%, #2E5BE8 47%, #1E40C8 59%,
    #7FA6FF 71%, #FFFFFF 81%, #FFFFFF 100%);
}
/* Blog — degrade descendant, cyan puis bleu */
.blog h2{
  background-image:linear-gradient(168deg,
    #FFFFFF 0%, #CFE6FF 34%, #48C9E8 62%, #3B6BFF 82%, #FFFFFF 100%);
}
/* Contact — bande large et douce, violet vers bleu */
.contact h2{
  background-image:linear-gradient(76deg,
    #FFFFFF 0%, #C9BBFF 22%, #7A5CFF 42%, #4E86FF 58%, #FFFFFF 88%);
}

/* ══════════ PAGES LEGALES ══════════ */
.legal-page{
  position:relative; max-width:820px; margin:0 auto;
  padding:clamp(110px,17vh,190px) var(--pad) clamp(50px,8vh,90px);
}
.legal-bubble{
  position:absolute; z-index:0; pointer-events:none;
  right:-6%; top:clamp(70px,12vh,150px); width:min(18vw,230px); aspect-ratio:1/1.004;
  background:url("/wp-content/themes/oli-design-28/site/assets/bubbles/one.webp") center/contain no-repeat;
  mix-blend-mode:screen; opacity:.75;
  transform:scale(-1.02,.84) rotate(17deg);
  filter:url(#bubbleWarp);
  animation:secBubbleFloat 30s var(--ease) infinite alternate;
}
.legal-head{ position:relative; z-index:1; }
.legal-page h1{
  margin-top:12px; font-family:var(--serif); text-transform:uppercase;
  font-size:clamp(2.2rem,5.6vw,4.4rem); font-weight:400; letter-spacing:-.02em; line-height:1.08;
  font-variation-settings:"opsz" 144, "SOFT" 45, "WONK" 1;
  background-image:linear-gradient(94deg,
    #FFFFFF 0%, #FFFFFF 26%, #9BC0FF 42%, #3B6BFF 58%, #FFFFFF 82%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  padding-bottom:.1em; margin-bottom:-.1em;
}
.legal-updated{ margin-top:14px; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.legal-body{ position:relative; z-index:1; margin-top:clamp(30px,5vh,50px); }
/* ══ toutes les autres H2 du site ══
   Les regles ci-dessus ne couvrent que les sections de l'accueil. Les pages
   prestations, secteurs, articles et legales avaient des H2 en blanc plein.
   Cette regle leur donne la meme bande bleue ; `inline-block` fait tenir la
   boite a la largeur du texte, sinon le degrade s'etale sur toute la ligne et
   seul son debut tombe dans les lettres. Les regles a classe ci-dessus
   gagnent, chaque titre de l'accueil garde donc sa teinte propre. */
h2{
  display:inline-block;
  background-image:linear-gradient(94deg,
    #FFFFFF 0%, #EAF1FF 20%, #9BC0FF 46%, #3B6BFF 74%, #FFFFFF 97%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  padding-bottom:.1em; margin-bottom:-.1em;
}

.legal-body h2{
  margin-top:clamp(30px,4.5vh,46px); font-size:clamp(1.1rem,1.7vw,1.35rem);
  font-weight:500; letter-spacing:-.02em;
}
.legal-body h3{ margin-top:clamp(22px,3vh,30px); font-size:1rem; font-weight:500; letter-spacing:-.01em; }
.legal-list{ margin-top:14px; padding-left:1.3em; max-width:70ch; }
.legal-list li{ margin-top:9px; color:var(--muted); font-size:.95rem; line-height:1.65; }
.legal-list li::marker{ color:#5B8CFF; }
.legal-list strong{ color:var(--text); font-weight:600; }
.legal-body p{ margin-top:14px; color:var(--muted); font-size:.95rem; max-width:70ch; }
.legal-body a{ color:#7FA8FF; border-bottom:1px solid var(--line-2); }
.legal-body a:hover{ border-bottom-color:#7FA8FF; }
/* tableau des cookies : il defile seul plutot que d'elargir la page */
.legal-body .tw{ margin-top:20px; overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-sm); }
.legal-body table{ width:100%; border-collapse:collapse; font-size:.85rem; }
.legal-body th{
  text-align:left; padding:11px 14px; white-space:nowrap; vertical-align:bottom;
  background:rgba(255,255,255,.04); border-bottom:1px solid var(--line-2);
  font-family:var(--display); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text); font-weight:600;
}
.legal-body td{ padding:11px 14px; vertical-align:top; color:var(--muted); line-height:1.5; border-bottom:1px solid var(--line); }
.legal-body tr:last-child td{ border-bottom:0; }
/* le lien qui rouvre la banniere : un bouton, mais qui se lit comme un lien */
.cookie-reopen{
  font:inherit; color:#7FA8FF; background:none; border:0; padding:0; cursor:pointer;
  border-bottom:1px solid var(--line-2);
}
.cookie-reopen:hover{ border-bottom-color:#7FA8FF; }
/* rappel a supprimer une fois les mentions completees */
.legal-todo{
  margin-top:0 !important; padding:14px 18px; border-radius:var(--r);
  border:1px dashed rgba(255,255,255,.3); background:rgba(255,255,255,.04);
  color:var(--text) !important; font-size:.86rem !important;
}
@media (max-width:900px){
  .legal-bubble{ right:-22%; top:clamp(40px,7vh,90px); width:min(42vw,210px); opacity:.6; }
}

/* ══════════ PAGES PRESTATIONS ══════════ */
.svc-hero{
  position:relative; overflow:hidden;
  padding:clamp(92px,11vh,128px) var(--pad) clamp(34px,6vh,60px);
}
.svc-hero-inner{
  position:relative; z-index:1; max-width:var(--maxw); margin:0 auto;
  /* hero centre : le fil d'Ariane reste a gauche, voir plus bas */
  text-align:center;
}
.svc-hero h1,.svc-hero .svc-lede{ margin-left:auto; margin-right:auto; }
.svc-hero .svc-hero-cta{ justify-content:center; }
.svc-hero .crumbs{ text-align:left; }
.svc-hero .crumb-list{ justify-content:flex-start; }
.svc-hero-bubble{
  position:absolute; z-index:0; pointer-events:none;
  right:2%; top:clamp(60px,10vh,130px); width:min(26vw,360px); aspect-ratio:1/1.004;
  background:url("/wp-content/themes/oli-design-28/site/assets/bubbles/one.webp") center/contain no-repeat;
  mix-blend-mode:screen; opacity:.8;
  transform:scale(-1.05,.88) rotate(-12deg);
  filter:url(#bubbleWarp);
  animation:secBubbleFloat 31s var(--ease) infinite alternate;
}
/* fil d'Ariane — portage du composant Breadcrumb de 21st.dev :
   liste en pastille bordee, chevrons en separateur, page courante en clair. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.crumb-list{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px;
  padding:7px 12px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 1px 2px rgba(0,0,0,.35);
  font-size:.78rem; color:var(--muted); list-style:none;
}
.crumb-item{ display:inline-flex; align-items:center; gap:6px; }
.crumb-item a{ color:var(--muted); transition:color .3s var(--ease); }
.crumb-item a:hover{ color:var(--text); }
.crumb-home svg{ width:15px; height:15px; display:block; }
.crumb-sep{ display:inline-flex; align-items:center; color:var(--muted); opacity:.55; }
.crumb-sep svg{ width:13px; height:13px; display:block; }
.crumb-current{ color:var(--text); }
.svc-hero h1,.ipage-hero h1,.post-hero h1,.legal-head h1{
  /* Fraunces en capitales avec interlettrage negatif : sans cela, « WEBSITE
     DESIGN » se lit comme un seul mot. */
  word-spacing:.22em;
}
.svc-hero h1{
  /* meme traitement que le H1 de la page d'accueil : Fraunces, en capitales */
  margin-top:clamp(28px,4.5vh,52px); font-family:var(--serif); text-transform:uppercase;
  font-size:clamp(2.4rem,6.6vw,5.6rem); font-weight:400; letter-spacing:-.02em; line-height:1.06;
  font-variation-settings:"opsz" 144, "SOFT" 45, "WONK" 1;
  max-width:15ch;
  background-image:linear-gradient(96deg,
    #FFFFFF 0%, #FFFFFF 24%, #9BC0FF 40%, #2E5BE8 56%, #DCE7FF 72%, #FFFFFF 92%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  padding-bottom:.1em; margin-bottom:-.1em;
}
.svc-lede{ margin-top:20px; max-width:56ch; color:var(--muted); font-size:1.02rem; }
.svc-hero-cta{ margin-top:clamp(24px,4vh,34px); display:flex; flex-wrap:wrap; gap:14px; }

/* texte a gauche, formulaire colle a droite */
.svc-layout{
  /* la largeur inclut les marges laterales : le texte s'aligne alors sur le H1
     du hero, dont le conteneur est centre a l'interieur du meme gabarit */
  position:relative;
  max-width:calc(var(--maxw) + var(--pad) * 2); margin:0 auto;
  padding:clamp(20px,3vh,40px) var(--pad) clamp(60px,9vh,110px);
  display:grid; grid-template-columns:minmax(0,1fr) clamp(340px,34vw,480px);
  gap:clamp(30px,4vw,70px); align-items:start;
}
.svc-aside{
  position:sticky; top:80px;
  /* plus de hauteur bornee : le formulaire est plus haut et ne defile plus
     dans lui-meme, c'est la page qui defile pour en montrer le bas */
  display:flex;
}
.svc-form{
  padding:clamp(20px,2vw,30px); width:100%;
  align-content:start; gap:15px;
  /* barre de defilement masquee : sinon elle retrecit la colonne, les puces
     passent a la ligne et le formulaire deborde encore plus */
  scrollbar-width:none;
}
.svc-form::-webkit-scrollbar{ width:0; height:0; }
/* la ligne d'etat ne prend de la place que lorsqu'elle dit quelque chose */
.form-note:empty{ display:none; }
/* sur une fenetre courte, le formulaire se compacte pour tenir en entier */
@media (max-height:900px){
  /* fenetre courte : nom et email cote a cote, ce qui economise une ligne
     entiere et evite au formulaire de defiler dans son cadre */
  /* l'email est plus long qu'un prenom : il prend la colonne large */
  .svc-form{ gap:11px; padding:18px; grid-template-columns:.82fr 1.18fr; }
  .svc-form > *{ grid-column:1 / -1; }
  .svc-form > div.field:nth-of-type(1),
  .svc-form > div.field:nth-of-type(2){ grid-column:auto; }
  .svc-form-sub{ display:none; }
  .svc-form .field{ gap:5px; }
  .svc-form .field input,.svc-form .field textarea{ padding:9px 13px; font-size:.9rem; }
  .svc-form .field textarea{ min-height:64px; }
  .svc-form .choices span{ padding:7px 13px; font-size:.8rem; }
  .svc-form .btn-liquid{ height:48px; }
}
@media (max-height:740px){
  .svc-form{ gap:8px; padding:15px; }
  .svc-form .field textarea{ min-height:40px; }
  .svc-form .field input{ padding:8px 12px; }
  .svc-form-title{ font-size:1rem; }
  .svc-form .btn-liquid{ height:44px; }
}
.svc-form-title{
  font-family:var(--display); font-size:1.15rem; font-weight:500;
  /* meme bande bleue que les H2, decoupee dans le texte */
  background-image:linear-gradient(88deg,
    #FFFFFF 0%, #7FA8FF 22%, #6E5CFF 36%, #EAEFFF 54%, #FFFFFF 80%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  padding-bottom:.1em; margin-bottom:-.1em; width:fit-content;
}
.svc-form-sub{ margin:6px 0 18px; font-size:.84rem; }
/* tout le texte du formulaire reprend la bande bleue des H2. Les puces de
   service sont traitees a part : une fois cochees, leur fond porte deja le
   degrade, le texte y repasse donc en blanc plein. */
.svc-form-sub,
.svc-form .field > label,
.svc-form legend,
.contact-form .field > label,
.contact-form legend{
  background-image:linear-gradient(88deg,
    #FFFFFF 0%, #7FA8FF 24%, #6E5CFF 38%, #EAEFFF 56%, #FFFFFF 82%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  padding-bottom:.08em; margin-bottom:-.08em;
}
.choices span{
  color:var(--text); -webkit-text-fill-color:#fff;
  /* meme filet blanc que les champs de saisie : les puces se lisent comme des
     elements a choisir, pas comme du texte */
  border-color:rgba(255,255,255,.55);
}
.choices label:hover span{ border-color:rgba(255,255,255,.85); }
.choices input:checked + span{ -webkit-text-fill-color:#fff; color:#fff; }

/* plus de filet entre les blocs : c'est l'espace qui les separe */
.svc-block{ padding:clamp(70px,12vh,150px) 0 0; }
/* le bloc des strategies respire nettement plus */
#strategies{ position:relative; padding-top:clamp(170px,26vh,330px); }
/* le bloc « pourquoi » respire largement des deux cotes */
#why{ padding-top:clamp(150px,24vh,300px); padding-bottom:clamp(60px,10vh,130px); }
.svc-block:first-child{ padding-top:clamp(70px,11vh,150px); }
.svc-block h2{ font-size:clamp(1.45rem,2.5vw,2rem); font-weight:500; letter-spacing:-.03em; max-width:38ch; }
.svc-block > p{ margin-top:16px; color:var(--muted); max-width:68ch; }
.svc-intro{ margin-top:14px; }

/* les strategies */
.strat-grid{ margin-top:clamp(28px,4.5vh,44px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.4vw,18px); }
.strat{
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(20px,2.2vw,28px); border-radius:var(--r-xl);
  background:var(--surface); border:1px solid rgba(255,255,255,.16);
  transition:transform .5s var(--ease), border-color .5s var(--ease);
}
/* halo bleu, place ailleurs sur chaque carte */
.strat::before{
  content:""; position:absolute; z-index:-1; width:120%; aspect-ratio:1/.7;
  border-radius:50%; filter:blur(46px); opacity:.34; mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 50%,
    rgba(150,190,255,1) 0%, rgba(60,112,255,.95) 28%, rgba(32,70,225,.5) 54%, transparent 78%);
  transition:opacity .6s var(--ease), transform .8s var(--ease);
}
.strat:hover::before{ opacity:.72; transform:scale(1.1); }

/* ── entree au defilement des cartes numerotees ──
   Chaque carte monte a son tour, puis son halo bleu s'allume. On anime
   `translate` et l'opacite, jamais `transform` : le survol s'en sert deja.
   Le decalage entre cartes vient de main.js (transition-delay en ligne).
   Conserve volontairement en « animations reduites » : sans elle la section
   apparait d'un bloc, et un deplacement vertical est le mouvement le plus sur. */
.strat.reveal{
  opacity:0; transform:none; translate:0 38px;
  transition:opacity .75s var(--ease), translate .75s var(--ease),
             border-color .5s var(--ease);
}
.strat.reveal.in{ opacity:1; translate:0 0; }
.strat.reveal::before{ opacity:0; }
.strat.reveal.in::before{ opacity:.34; transition:opacity 1s var(--ease) .3s; }
.strat.reveal.in:hover::before{ opacity:.72; transform:scale(1.1); }
/* le chiffre arrive apres la carte */
.strat.reveal .strat-num{ opacity:0; translate:0 10px; transition:opacity .6s var(--ease) .25s, translate .6s var(--ease) .25s; }
.strat.reveal.in .strat-num{ opacity:1; translate:0 0; }

.strat:hover{ transform:translateY(-5px); border-color:rgba(255,255,255,.45); }

/* 01 et 04 sur toute la largeur, en deux colonnes ; 02 et 03 cote a cote */
.strat:nth-child(1),
.strat:nth-child(4){
  grid-column:1 / -1;
  display:grid; grid-template-columns:1.25fr .85fr; grid-template-rows:auto auto 1fr;
  column-gap:clamp(18px,2.6vw,40px); row-gap:0;
}
.strat:nth-child(1) .strat-num,
.strat:nth-child(4) .strat-num{ grid-area:1 / 1; }
.strat:nth-child(1) h3,
.strat:nth-child(4) h3{ grid-area:2 / 1; font-size:clamp(1.2rem,1.9vw,1.5rem); }
.strat:nth-child(1) p,
.strat:nth-child(4) p{ grid-area:3 / 1; align-self:start; }
/* la liste demarre a hauteur du titre, pas du numero */
.strat:nth-child(1) ul,
.strat:nth-child(4) ul{
  grid-area:2 / 2 / span 2 / 3; margin-top:0; align-self:start;
  padding-left:clamp(16px,2vw,28px); border-left:1px solid var(--line);
}

.strat:nth-child(1)::before{ left:-14%; bottom:-46%; }
.strat:nth-child(2)::before{ right:-24%; top:-46%; width:150%; }
.strat:nth-child(3)::before{ left:-24%; bottom:-42%; width:150%; }
.strat:nth-child(4)::before{ right:-14%; top:-48%; }
.strat:hover{ transform:translateY(-5px); border-color:rgba(255,255,255,.45); }
.strat-num{ font-family:var(--display); font-size:.78rem; letter-spacing:.1em; color:#7FA8FF; }
.strat h3{ margin-top:10px; font-size:1.1rem; font-weight:500; }
.strat p{ margin-top:10px; font-size:.9rem; color:var(--muted); }
.strat ul{ margin-top:14px; display:grid; gap:7px; font-size:.82rem; color:var(--muted); }
.strat li{ position:relative; padding-left:16px; }
.strat li::before{ content:""; position:absolute; left:0; top:.5em; width:5px; height:5px; border-radius:50%; background:#5B8CFF; }

/* cartes de service cliquables sur /services/ */
.strat--link .rel-go{ margin-top:18px; align-self:end; justify-self:start; }
.strat--link:hover .rel-go{ background:rgba(255,255,255,.14); border-color:#fff; transform:translateX(4px); }
/* cartes larges : la fleche se range sous le texte, pas dans la colonne des puces */
.strat--link:nth-child(1) .rel-go,
.strat--link:nth-child(4) .rel-go{ grid-area:4 / 1; }
.ipage-marks.order-marks{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .ipage-marks.order-marks{ grid-template-columns:1fr; } }

/* pourquoi moi */
.why-grid{ margin-top:clamp(28px,4.5vh,44px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,30px); }
.why-icon{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.07); border:1px solid var(--line);
}
.why-icon svg{ width:18px; height:18px; color:#7FA8FF; }
.why h3{ margin-top:14px; font-size:1rem; font-weight:500; }
.why p{ margin-top:8px; font-size:.88rem; color:var(--muted); }

/* ── entree au defilement des cartes « Why work with me » ──
   Meme principe que les cartes numerotees : la carte monte, puis son icone
   s'allume. On anime `translate` et l'opacite seulement. Conservee en
   « animations reduites », voir le bloc dedie plus bas. */
.why.reveal{
  opacity:0; transform:none; translate:0 30px;
  transition:opacity .7s var(--ease), translate .7s var(--ease);
}
.why.reveal.in{ opacity:1; translate:0 0; }
.why.reveal .why-icon{
  opacity:0; translate:0 8px;
  transition:opacity .55s var(--ease) .22s, translate .55s var(--ease) .22s,
             border-color .4s var(--ease);
}
.why.reveal.in .why-icon{ opacity:1; translate:0 0; border-color:rgba(127,168,255,.5); }


/* faq */
.faq{ margin-top:clamp(20px,3vh,28px); border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:clamp(16px,2.4vh,22px) 0; cursor:pointer; list-style:none;
  font-size:1rem; font-weight:500; transition:color .3s var(--ease);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:#9CC3FF; }
.faq-plus{ position:relative; width:16px; height:16px; flex:none; }
.faq-plus::before,.faq-plus::after{
  content:""; position:absolute; left:50%; top:50%; background:currentColor;
  transform:translate(-50%,-50%); transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.faq-plus::before{ width:14px; height:1.5px; }
.faq-plus::after{ width:1.5px; height:14px; }
.faq-item[open] .faq-plus::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-item p{ padding:0 0 clamp(16px,2.4vh,22px); color:var(--muted); font-size:.92rem; max-width:70ch; }

/* maillage interne vers les autres prestations */
.rel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.4vw,18px); }
.svc-related .rel-grid{ margin-top:clamp(24px,4vh,36px); }
/* pages secteurs : quatre liens, donc 2 x 2 */
.ipage-rel{ grid-template-columns:repeat(2,1fr); }
/* quatre liens : deux colonnes plutot qu'une rangee de trois et un orphelin */
.rel-grid--4{ grid-template-columns:repeat(2,1fr); }
.rel-card{
  position:relative; overflow:hidden; isolation:isolate;
  /* titre, texte, puis la fleche calee en bas : toutes les cartes s'alignent */
  display:grid; grid-template-rows:auto 1fr auto; gap:10px;
  padding:clamp(18px,2vw,26px); border-radius:var(--r-xl);
  background:var(--surface); border:1px solid rgba(255,255,255,.16);
  transition:transform .5s var(--ease), border-color .5s var(--ease);
}
.rel-card::before{
  content:""; position:absolute; z-index:-1; right:-28%; top:-52%;
  width:150%; aspect-ratio:1/.66; border-radius:50%;
  filter:blur(44px); opacity:.28; mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 50%,
    rgba(150,190,255,1) 0%, rgba(60,112,255,.95) 28%, rgba(32,70,225,.5) 54%, transparent 78%);
  transition:opacity .6s var(--ease);
}
.rel-card:hover{ transform:translateY(-5px); border-color:rgba(255,255,255,.45); }
.rel-card:hover::before{ opacity:.7; }
.rel-name{ font-family:var(--display); font-size:1.1rem; font-weight:500; letter-spacing:-.02em; }
.rel-desc{ font-size:.88rem; color:var(--muted); max-width:34ch; align-self:start; }
.rel-go{
  margin-top:4px; align-self:end; justify-self:start; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.28); color:var(--text);
  transition:background .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.rel-go svg{ width:15px; height:15px; }
.rel-card:hover .rel-go{ background:rgba(255,255,255,.14); border-color:#fff; transform:translateX(4px); }
@media (max-width:720px){ .rel-grid{ grid-template-columns:1fr; } }

/* bandeau final */
.svc-final{
  margin-top:clamp(50px,8vh,90px); padding:clamp(24px,3vw,40px);
  border-radius:var(--r-xl); background:var(--surface); border:1px solid rgba(255,255,255,.16);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px;
}
.svc-final h2{ font-size:clamp(1.25rem,2.2vw,1.7rem); font-weight:500; letter-spacing:-.03em; }
.svc-final p{ margin-top:10px; color:var(--muted); font-size:.92rem; max-width:52ch; }

@media (max-width:1080px){
  /* colonne unique : le formulaire passe AVANT le contenu, sinon il se retrouve
     tout en bas de la page et n'est jamais vu. Le hero occupe l'ecran entier,
     donc le formulaire commence juste sous la ligne de flottaison. */
  /* le contenu reste en haut : centre verticalement, le fil d'Ariane
     redescendrait au milieu de l'ecran */
  /* meme principe que les pages secteurs : le fil d'Ariane reste accroche en
     haut a gauche, le reste du hero est cale par le bas, ce qui ouvre un grand
     vide entre les deux et pose le bouton vers 60% de la hauteur d'ecran. */
  .svc-hero{
    min-height:100svh; display:flex; flex-direction:column; justify-content:flex-start;
    /* le titre commence a 45% de la hauteur d'ecran : le fil d'Ariane reste
       accroche en haut, tout le reste descend sous la moitie de l'ecran */
    padding-top:45svh; padding-bottom:clamp(34px,6vh,60px);
  }
  .svc-hero-inner{ position:static; }
  .svc-hero .crumbs{
    position:absolute; z-index:2; top:clamp(84px,10vh,108px);
    left:var(--pad); right:var(--pad);
  }
  /* Le hero du blog n'a ni accroche ni bouton sous son titre, et ce titre
     tient sur cinq lignes en telephone. Avec les 45svh des pages prestations
     il tombait tout en bas de l'ecran. On le remonte juste sous le fil
     d'Ariane. */
  .blog-hero{ padding-top:clamp(172px,26svh,240px); justify-content:flex-start; }
  .svc-hero h1{ margin-top:0; }
  .svc-layout{ grid-template-columns:1fr; }
  .svc-aside{ position:static; order:-1; margin-bottom:clamp(26px,4vh,44px); }
  .svc-form{ max-width:520px; margin-left:auto; margin-right:auto; }
}
@media (max-width:720px){
  .strat-grid,.why-grid{ grid-template-columns:1fr; }
  .svc-hero-bubble{ right:-24%; top:auto; bottom:6%; width:min(58vw,290px); opacity:.6; }
}

/* ── bulles semees le long des pages prestations ── */
.svc-main{ position:relative; z-index:1; }
.page-bubble{
  position:absolute; z-index:0; pointer-events:none;
  background:url("/wp-content/themes/oli-design-28/site/assets/bubbles/one.webp") center/contain no-repeat;
  mix-blend-mode:screen; aspect-ratio:1/1.004;
  filter:url(#bubbleWarp);
  animation:secBubbleFloat 28s var(--ease) infinite alternate;
}
/* Les bulles de section ne sont plus la meme forme repetee : on repartit les
   quatre deformations et les deux decoupes sur les vingt-deux reperes. Les
   regles de position, de taille et de rotation de chaque variante restent
   ecrites plus bas, elles ne sont pas touchees. */
.page-bubble--b,.page-bubble--f,.page-bubble--j,.page-bubble--n,
.page-bubble--r,.page-bubble--v{ filter:url(#bubbleWarp2); }

.page-bubble--c,.page-bubble--g,.page-bubble--k,.page-bubble--o,
.page-bubble--s{ filter:url(#bubbleWarp3); }

.page-bubble--d,.page-bubble--h,.page-bubble--l,.page-bubble--p,
.page-bubble--t{ filter:url(#bubbleWarp4); }

/* une bulle sur quatre prend l'autre decoupe */
.page-bubble--c,.page-bubble--g,.page-bubble--k,.page-bubble--o,
.page-bubble--s,.page-bubble--e,.page-bubble--q{
  background-image:url("/wp-content/themes/oli-design-28/site/assets/bubbles/two.jpg");
  aspect-ratio:530/500;
}

.page-bubble--a{
  left:-7%; top:12%; width:min(12vw,165px);
  transform:scale(-1.04,.9) rotate(22deg); opacity:.75;
}
.page-bubble--b{
  right:26%; top:44%; width:min(9vw,120px);
  transform:scale(.92,-1.06) rotate(-15deg); opacity:.85; animation-duration:20s;
}
.page-bubble--c{
  left:-9%; top:74%; width:min(15vw,205px);
  transform:scale(1.06,.82) rotate(-9deg); opacity:.7; animation-duration:36s;
}
/* a hauteur du bloc « comment je travaille » */
.page-bubble--d{
  left:47%; top:41%; width:min(7vw,95px);
  transform:scale(-.94,1.04) rotate(28deg); opacity:.8; animation-duration:23s;
}
/* sous les liens vers les autres prestations */
.page-bubble--e{
  left:17%; top:99%; width:min(11vw,150px);
  transform:scale(1.04,-.88) rotate(-21deg); opacity:.72; animation-duration:33s;
}

/* autour de « Why work with me » et de « Other services I offer » : chaque
   bulle a sa forme, sa rotation et sa vitesse, sinon les repetitions se voient */
#why{ position:relative; }
.page-bubble--p{
  left:-9%; top:8%; width:min(12vw,165px);
  transform:scale(-1.05,.88) rotate(24deg); opacity:.72; animation-duration:29s;
}
.page-bubble--q{
  right:-7%; left:auto; top:44%; width:min(9vw,125px);
  transform:scale(.93,-1.06) rotate(-18deg); opacity:.78; animation-duration:23s;
}
.page-bubble--r{
  left:41%; bottom:-6%; top:auto; width:min(7vw,95px);
  transform:scale(1.04,.9) rotate(-31deg); opacity:.8; animation-duration:35s;
}
.svc-related{ position:relative; }
.page-bubble--s{
  left:-6%; bottom:2%; top:auto; width:min(11vw,150px);
  transform:scale(1.06,-.86) rotate(16deg); opacity:.7; animation-duration:31s;
}
.page-bubble--t{
  right:-8%; left:auto; top:-4%; width:min(8.5vw,120px);
  transform:scale(-.95,1.04) rotate(-25deg); opacity:.76; animation-duration:26s;
}
@media (max-width:1080px){
  .page-bubble--p{ left:-22%; top:6%; width:min(32vw,150px); opacity:.55; }
  .page-bubble--q{ right:-24%; left:auto; top:40%; width:min(28vw,130px); opacity:.58; }
  .page-bubble--r{ left:auto; right:-20%; bottom:-2%; width:min(24vw,110px); opacity:.6; }
  .page-bubble--s{ left:-24%; bottom:4%; width:min(30vw,140px); opacity:.55; }
  .page-bubble--t{ right:-22%; left:auto; top:-2%; width:min(26vw,120px); opacity:.58; }
}

/* dans le vide entre le hero et le premier titre */
#what{ position:relative; }
.page-bubble--j{
  left:29%; top:-6px; width:min(9vw,125px);
  transform:scale(1.03,-.94) rotate(14deg); opacity:.8; animation-duration:25s;
}

/* liste numerotee des piliers */
.svc-steps{ margin-top:18px; display:grid; gap:14px; list-style:none; padding-left:0; }
.svc-steps li{
  position:relative; padding-left:18px; color:var(--muted); font-size:.95rem; max-width:66ch;
}
.svc-steps li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%; background:#5B8CFF;
}
.svc-steps strong{ color:var(--text); font-weight:500; }

/* dans le vide avant « les differents types de… » : positionnees par rapport a
   la section, donc toujours dans la marge haute, jamais sur le texte */
.page-bubble--h{
  left:33%; top:18px; width:min(10vw,140px);
  transform:scale(-1.04,.9) rotate(-17deg); opacity:.78; animation-duration:29s;
}
.page-bubble--i{
  left:63%; top:46px; width:min(7.5vw,105px);
  transform:scale(.95,-1.03) rotate(26deg); opacity:.82; animation-duration:22s;
}

/* juste au-dessus du titre « comment je travaille » */
.page-bubble--f{
  left:43%; top:45.5%; width:min(6.5vw,90px);
  transform:scale(1.03,-.95) rotate(-33deg); opacity:.82; animation-duration:26s;
}
/* entre la fin de la FAQ et le maillage interne */
.page-bubble--g{
  left:31%; top:82%; width:min(6vw,84px);
  transform:scale(-.97,.92) rotate(19deg); opacity:.8; animation-duration:17s;
}

/* deux petites bulles de plus dans le hero */
.hero-bubble-2,.hero-bubble-3,.hero-bubble-4,.hero-bubble-5,.hero-bubble-6{
  position:absolute; z-index:0; pointer-events:none;
  background:url("/wp-content/themes/oli-design-28/site/assets/bubbles/one.webp") center/contain no-repeat;
  mix-blend-mode:screen; aspect-ratio:1/1.004;
  filter:url(#bubbleWarp);
  animation:secBubbleFloat 25s var(--ease) infinite alternate;
}
.hero-bubble-2{
  left:31%; top:clamp(96px,13vh,150px); width:min(5.5vw,72px);
  transform:scale(-.92,1.06) rotate(-27deg); opacity:.85;
}
/* Trois bulles de plus dans les heros des pages interieures : une a gauche a
   mi-hauteur, deux en bas de part et d'autre du bouton. L'accueil garde les
   siennes, il a deja son grand visuel.
   Jamais `top` ET `bottom` sur la meme bulle : elle perd son ratio et
   s'etire sur toute la hauteur de la section. */
/* Chaque bulle a sa propre silhouette : deux decoupes differentes et quatre
   deformations differentes, plutot que la meme forme a plusieurs tailles.
   `two.jpg` est la grosse bulle du bas du visuel d'origine, decoupee ; son
   fond noir disparait grace au `mix-blend-mode:screen`, inutile de detourer. */
.hero-bubble-4{
  left:7%; top:44%; width:min(11vw,148px);
  background-image:url("/wp-content/themes/oli-design-28/site/assets/bubbles/two.jpg");
  aspect-ratio:530/500;
  filter:url(#bubbleWarp2);
  transform:scale(1.04,-.94) rotate(-12deg); opacity:.72; animation-duration:31s;
}
.hero-bubble-5{
  left:19%; bottom:9%; width:min(8vw,112px);
  filter:url(#bubbleWarp3);
  transform:scale(-.96,1.02) rotate(21deg); opacity:.66; animation-duration:23s;
}
.hero-bubble-6{
  right:6%; bottom:13%; width:min(10vw,136px);
  background-image:url("/wp-content/themes/oli-design-28/site/assets/bubbles/two.jpg");
  aspect-ratio:530/500;
  filter:url(#bubbleWarp4);
  transform:scale(-.98,-1.05) rotate(-31deg); opacity:.7; animation-duration:28s;
}
/* les deux bulles historiques prennent aussi des deformations distinctes */
.hero-bubble-2{ filter:url(#bubbleWarp3); }
.hero-bubble-3{ filter:url(#bubbleWarp2); }

.hero-bubble-3{
  left:47%; top:clamp(240px,32vh,360px); width:min(8vw,105px);
  transform:scale(1.05,-.9) rotate(15deg); opacity:.8; animation-duration:18s;
}
@media (max-width:1080px){
  .hero-bubble-2{ left:auto; right:8%; top:clamp(80px,11vh,130px); width:min(20vw,90px); opacity:.7; }
  .hero-bubble-3{ left:auto; right:-12%; top:auto; bottom:-6%; width:min(30vw,140px); opacity:.65; }
  .hero-bubble-4{ left:-16%; top:38%; width:min(34vw,150px); opacity:.5; }
  .hero-bubble-5{ left:auto; right:-14%; bottom:20%; width:min(26vw,120px); opacity:.45; }
  .hero-bubble-6{ right:auto; left:-12%; bottom:4%; width:min(28vw,130px); opacity:.5; }
}
@media (max-width:1080px){
  /* sur mobile elles restent, mais plus petites et repoussees vers les bords */
  .page-bubble{ opacity:.6; }
  .page-bubble--a{ left:-22%; top:9%; width:min(34vw,150px); }
  .page-bubble--b{ right:-20%; left:auto; top:38%; width:min(28vw,120px); }
  .page-bubble--c{ left:-24%; top:68%; width:min(38vw,170px); }
  .page-bubble--d{ right:-18%; left:auto; top:30%; width:min(24vw,105px); }
  .page-bubble--e{ left:-20%; top:95%; width:min(34vw,150px); }
  .page-bubble--f{ right:-16%; left:auto; top:52%; width:min(24vw,100px); }
  .page-bubble--g{ left:-18%; top:78%; width:min(26vw,110px); }
  .page-bubble--h{ left:auto; right:-14%; top:10px; width:min(30vw,130px); }
  .page-bubble--i{ left:-16%; right:auto; top:60px; width:min(24vw,100px); }
  .page-bubble--j{ left:auto; right:-14%; top:-10px; width:min(26vw,115px); }
}

/* ══════════ PAGES SECTEURS ══════════ */
.ipage-hero{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:clamp(420px, 66svh, 620px);
  display:flex; align-items:flex-end;
  padding:clamp(120px,18vh,190px) var(--pad) clamp(36px,6vh,64px);
}
.ipage-hero-media{ position:absolute; inset:0; z-index:-2; }
.ipage-hero-media img{ width:100%; height:100%; object-fit:cover; filter:saturate(.95) brightness(.62); }
.ipage-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(8,8,10,.95) 6%, rgba(8,8,10,.6) 46%, rgba(8,8,10,.25));
}
.ipage-hero-inner{ position:relative; max-width:var(--maxw); margin:0 auto; width:100%; }
.ipage-hero h1{
  margin-top:clamp(28px,4.5vh,52px); font-family:var(--serif); text-transform:uppercase;
  font-size:clamp(2.4rem,6.8vw,5.6rem); font-weight:400; letter-spacing:-.02em; line-height:1.05;
  font-variation-settings:"opsz" 144, "SOFT" 45, "WONK" 1; max-width:14ch;
  background-image:linear-gradient(96deg,
    #FFFFFF 0%, #FFFFFF 26%, #9BC0FF 42%, #2E5BE8 58%, #FFFFFF 84%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  padding-bottom:.1em; margin-bottom:-.1em;
}
.ipage-lede{ margin-top:18px; max-width:52ch; color:#D7DAE4; font-size:1.02rem; }
.ipage-hero .btn{ margin-top:clamp(22px,4vh,32px); }

/* Sur desktop, le hero occupe l'ecran entier : rien de la section suivante
   n'apparait avant que le visiteur ait defile. Meme regle que la page
   d'accueil. En dessous de 900px on garde la hauteur naturelle, sinon le
   telephone impose un ecran de titre avant tout contenu. */
@media (min-width:901px){
  .svc-hero,.ipage-hero,.post-hero{
    min-height:100svh;
    display:flex; flex-direction:column; justify-content:center;
  }
}

/* Le fil d'Ariane est ancre en haut a gauche du hero, sur toutes les pages et
   a toutes les largeurs. Centre au milieu d'un hero plein ecran, il ne se
   lisait plus comme un reperage mais comme un element de decor. */
.svc-hero,.ipage-hero,.post-hero{ position:relative; }
.svc-hero .crumbs,.ipage-hero .crumbs,.post-hero .crumbs{
  position:absolute; z-index:3;
  top:clamp(96px,12vh,132px); left:var(--pad); right:auto;
  text-align:left;
}
.svc-hero .crumb-list,.ipage-hero .crumb-list,.post-hero .crumb-list{
  justify-content:flex-start;
}

/* La recherche du blog se cale contre le bord gauche de la page, comme le fil
   d'Ariane, et non contre le bord du bloc de texte. Le bloc du hero est donc
   elargi a toute la largeur ; le titre, lui, garde sa largeur maximale et
   reste centre par ses marges automatiques. */
.blog-hero .svc-hero-inner{ max-width:none; width:100%; }
/* La barre de recherche occupe 60 % de la largeur d'ecran et se centre, avec
   les puces de filtre sous elle : separees, l'une centree et les autres a
   gauche, elles ne se lisaient plus comme un meme outil.
   Sous 900px elle reprend toute la largeur : 60 % d'un telephone ne laisse pas
   la place d'ecrire. */
.blog-hero .blog-tools{ align-items:center; text-align:center; width:100%; }
.blog-hero .gsearch{ width:min(100%,60vw); }
@media (max-width:900px){
  .blog-hero .blog-tools{ align-items:flex-start; text-align:left; }
  .blog-hero .gsearch{ width:100%; }
}

/* bloc « ce que cherchent vos clients » */
.ipage-about{ position:relative; padding:clamp(72px,12vh,150px) var(--pad); }
/* Le texte occupe toute la largeur, les quatre reperes passent dessous.
   Cote a cote, dans la colonne deja retrecie par le formulaire colle, les
   cartes tombaient a deux mots par ligne (constate le 26 aout). */
.ipage-about-inner{
  position:relative; z-index:1; max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:clamp(28px,4.5vh,48px); align-items:start;
}
.ipage-about h2{ font-size:clamp(1.5rem,2.8vw,2.2rem); font-weight:500; letter-spacing:-.03em; max-width:20ch; }
.ipage-about-copy p{ margin-top:16px; color:var(--muted); max-width:60ch; }
/* le bouton sous le texte d'introduction : le visiteur qui vient de se
   reconnaitre dans le paragraphe peut ecrire sans remonter au formulaire */
.ipage-about-cta{ margin-top:clamp(20px,3vh,30px); }

/* chaque repere dans son cadre a coins arrondis. Le nombre de colonnes suit la
   largeur disponible : la colonne de contenu est retrecie par le formulaire
   colle, quatre cartes cote a cote y tomberaient a 160px, soit deux mots par
   ligne. `auto-fit` en donne deux ici, quatre sur une pleine largeur. */
.ipage-marks{
  display:grid; gap:clamp(12px,1.4vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.ipage-marks li{
  padding:clamp(18px,2vw,26px); border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.03);
  transition:border-color .5s var(--ease), background .5s var(--ease);
}
.ipage-marks li:hover{ border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.06); }
.mark-title{
  display:block; font-family:var(--display); font-size:1rem; font-weight:500;
  background-image:linear-gradient(96deg, #FFFFFF 0%, #9BC0FF 46%, #3B6BFF 78%, #FFFFFF 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.mark-text{ display:block; margin-top:8px; font-size:.86rem; color:var(--muted); }

/* prestations et faq du secteur */
.ipage-work,.ipage-faq,.ipage-others{ position:relative; padding:clamp(66px,11vh,140px) var(--pad); }
.ipage-head{ max-width:var(--maxw); margin:0 auto; }
.ipage-head h2{ font-size:clamp(1.5rem,2.8vw,2.2rem); font-weight:500; letter-spacing:-.03em; max-width:22ch; }
.ipage-grid,.ipage-faq-list,.ipage-rel{ max-width:var(--maxw); margin:clamp(32px,5vh,52px) auto 0; }
.ipage-faq-list{ border-top:1px solid var(--line); }

/* bandeau final */
.ipage-cta{
  max-width:var(--maxw); margin:clamp(30px,5vh,60px) auto clamp(70px,11vh,130px);
  padding:clamp(24px,3vw,44px); border-radius:var(--r-xl);
  background:var(--surface); border:1px solid rgba(255,255,255,.16);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px;
}
.ipage-cta h2{ font-size:clamp(1.25rem,2.2vw,1.7rem); font-weight:500; letter-spacing:-.03em; }
.ipage-cta p{ margin-top:10px; color:var(--muted); font-size:.92rem; max-width:52ch; }

@media (max-width:720px){
  .ipage-marks{ grid-template-columns:1fr; }
  .ipage-grid{ grid-template-columns:1fr; }
}


/* bulles autour du bandeau final des pages secteurs */
.ipage-cta{ position:relative; }
.page-bubble--u{
  left:-7%; bottom:-18%; top:auto; width:min(11vw,150px);
  transform:scale(-1.04,.9) rotate(21deg); opacity:.7; animation-duration:28s;
}
.page-bubble--v{
  right:-6%; left:auto; top:-24%; width:min(8vw,115px);
  transform:scale(.94,-1.05) rotate(-27deg); opacity:.76; animation-duration:33s;
}
@media (max-width:1080px){
  .page-bubble--u{ left:-22%; bottom:-10%; width:min(30vw,135px); opacity:.55; }
  .page-bubble--v{ right:-20%; left:auto; top:-12%; width:min(26vw,115px); opacity:.58; }
}

/* les reperes montent au defilement, comme les cartes */
.ipage-marks li.reveal{
  opacity:0; transform:none; translate:0 26px;
  transition:opacity .65s var(--ease), translate .65s var(--ease);
}
.ipage-marks li.reveal.in{ opacity:1; translate:0 0; }

/* deux bulles autour du formulaire, comme autour des sections a H2.
   NE PAS remettre `.svc-aside{ position:relative }` ici : cette regle arrive
   apres `.svc-aside{ position:sticky }` et l'ecrasait, le formulaire cessait
   de coller sur toutes les pages prestations et secteurs (constate le 26 aout).
   `position:sticky` est deja un contexte de positionnement, les bulles en
   absolu s'y accrochent tres bien. */
.form-bubble{ z-index:0; }
.form-bubble--a{
  left:-16%; top:-9%; width:min(9vw,130px);
  transform:scale(-1.05,.9) rotate(-23deg); opacity:.7; animation-duration:27s;
}
.form-bubble--b{
  right:-14%; left:auto; bottom:-8%; top:auto; width:min(7.5vw,110px);
  transform:scale(.94,-1.06) rotate(19deg); opacity:.74; animation-duration:32s;
}
@media (max-width:1080px){
  .form-bubble--a{ left:-24%; top:-7%; width:min(30vw,130px); opacity:.6; }
  .form-bubble--b{ right:-22%; left:auto; bottom:-6%; width:min(26vw,115px); opacity:.62; }
}

.why-cta{ margin-top:clamp(26px,4vh,40px); justify-content:center; }

/* ── pages secteurs : meme traitement que les pages prestations ──
   contenu a gauche, formulaire colle a droite, hero centre. */
.ipage-layout{ padding-top:clamp(30px,5vh,54px); }
.ipage-layout .ipage-about,.ipage-layout .ipage-work,
.ipage-layout .ipage-faq,.ipage-layout .ipage-others{ padding-left:0; padding-right:0; }
.ipage-hero-inner{ text-align:center; }
.ipage-hero h1,.ipage-lede{ margin-left:auto; margin-right:auto; }
.ipage-hero .crumbs{ text-align:left; }
.ipage-hero .crumb-list{ justify-content:flex-start; }
.ipage-hero{ align-items:center; padding-top:clamp(92px,11vh,128px); }
@media (max-width:1080px){
  /* Le fil d'Ariane reste dans le coin haut gauche, sorti du flux. Le reste du
     hero est cale par le BAS : le bouton tombe alors toujours vers 60% de la
     hauteur d'ecran, quelle que soit la longueur du titre ou du chapo. */
  .ipage-hero{
    min-height:100svh; align-items:flex-start;
    padding-top:45svh; padding-bottom:clamp(36px,6vh,64px);
  }
  /* l'interieur repasse en statique, sinon le fil d'Ariane se positionne par
     rapport a lui et redescend avec le bloc cale en bas */
  .ipage-hero-inner{ position:static; }
  .ipage-hero .crumbs{
    position:absolute; z-index:2; top:clamp(84px,10vh,108px);
    left:var(--pad); right:var(--pad);
  }
  .ipage-hero h1{ margin-top:0; }
}

/* ── bulles des pages secteurs ── */
.ipage-hero{ /* la bulle du hero doit rester dans le cadre */ }
.ib-hero{
  right:6%; top:26%; left:auto; width:min(13vw,180px);
  transform:scale(-1.03,.88) rotate(-14deg); opacity:.7; animation-duration:30s; z-index:0;
}
.ib-about{
  right:3%; top:62%; left:auto; width:min(8vw,105px);
  transform:scale(.94,-1.05) rotate(24deg); opacity:.8; animation-duration:21s;
}
.ib-work1{
  left:-5%; top:18%; width:min(12vw,160px);
  transform:scale(1.05,.85) rotate(-19deg); opacity:.72; animation-duration:34s;
}
.ib-work2{
  right:-6%; top:64%; left:auto; width:min(10vw,140px);
  transform:scale(-.96,1.02) rotate(11deg); opacity:.68; animation-duration:26s;
}
.ib-faq{
  right:8%; top:22%; left:auto; width:min(7vw,95px);
  transform:scale(1.02,-.93) rotate(-29deg); opacity:.8; animation-duration:19s;
}
.ib-others{
  left:-4%; top:46%; width:min(11vw,150px);
  transform:scale(-1.06,.9) rotate(16deg); opacity:.7; animation-duration:32s;
}
@media (max-width:1080px){
  .ib-hero{ right:-18%; top:14%; width:min(40vw,190px); opacity:.55; }
  .ib-about{ right:-18%; top:auto; bottom:4%; width:min(28vw,120px); opacity:.65; }
  .ib-work1{ left:-22%; top:12%; width:min(34vw,150px); opacity:.6; }
  .ib-work2{ right:-20%; left:auto; top:70%; width:min(30vw,130px); opacity:.6; }
  .ib-faq{ right:-14%; left:auto; top:14%; width:min(24vw,100px); opacity:.65; }
  .ib-others{ left:-18%; top:40%; width:min(30vw,130px); opacity:.6; }
}

/* ── page « about me » : « How I work » respire ──
   De grandes marges au-dessus et au-dessous, remplies par deux bulles plutot
   que laissees vides. Forme et rotation dans le style de base : seules les
   bulles se deplacent, donc tout reste visible en « animations reduites ». */
.about-how{
  position:relative;
  padding-top:clamp(120px,20vh,250px);
  padding-bottom:clamp(100px,17vh,210px);
}
.page-bubble--n{
  left:9%; top:34px; width:min(9.5vw,130px);
  transform:scale(1.05,-.9) rotate(18deg); opacity:.78; animation-duration:27s;
}
.page-bubble--o{
  left:62%; bottom:34px; width:min(11vw,150px);
  transform:scale(-.93,1.07) rotate(-24deg); opacity:.72; animation-duration:31s;
}
/* trois bulles de plus sur la hauteur de la page */
.page-bubble--k{
  right:1%; left:auto; top:24%; width:min(13vw,175px);
  transform:scale(.9,1.08) rotate(-27deg); opacity:.68; animation-duration:35s;
}
.page-bubble--l{
  left:-5%; top:58%; width:min(10vw,140px);
  transform:scale(-1.02,.86) rotate(35deg); opacity:.74; animation-duration:24s;
}
.page-bubble--m{
  left:52%; top:91%; width:min(7.5vw,105px);
  transform:scale(.97,-1.05) rotate(-12deg); opacity:.8; animation-duration:20s;
}
@media (max-width:1080px){
  .page-bubble--k{ right:-24%; left:auto; top:20%; width:min(34vw,150px); opacity:.55; }
  .page-bubble--l{ left:-22%; top:56%; width:min(30vw,135px); opacity:.58; }
  .page-bubble--m{ left:auto; right:-20%; top:90%; width:min(26vw,115px); opacity:.6; }
  .page-bubble--n{ left:-20%; top:24px; width:min(30vw,130px); opacity:.6; }
  .page-bubble--o{ left:auto; right:-22%; top:auto; bottom:24px; width:min(32vw,140px); opacity:.58; }
}

/* page « about me » : les trois chiffres en ligne */
.about-facts--row{
  margin-top:clamp(26px,4vh,40px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,32px);
}
.about-facts--row li{ padding:0; }
.about-facts--row strong{
  display:block; font-family:var(--display); font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:500;
  background:var(--grad-cool); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.about-facts--row span{ display:block; margin-top:6px; font-size:.8rem; color:var(--muted); max-width:22ch; }
@media (max-width:720px){ .about-facts--row{ grid-template-columns:1fr; } }

/* ══════════ PAGES SIMPLES (blog, contact) ══════════ */
.simple-page{ position:relative; }
.simple-block{ position:relative; padding:clamp(40px,7vh,90px) var(--pad); }
.simple-inner{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; }
.simple-inner h2{ font-size:clamp(1.5rem,2.8vw,2.2rem); font-weight:500; letter-spacing:-.03em; }
.blog-grid--index{ grid-template-columns:repeat(3,1fr); }
.blog-note{
  margin-top:clamp(24px,4vh,36px); color:var(--muted); font-size:.92rem; max-width:60ch;
}
.blog-note a{ color:#7FA8FF; border-bottom:1px solid var(--line-2); }
.contact-points--page{ margin-top:clamp(26px,4vh,38px); }
@media (max-width:1080px){ .blog-grid--index{ grid-template-columns:1fr 1fr; } }
@media (max-width:720px){ .blog-grid--index{ grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════════════════════════════════
   Les couleurs des titres suivent la souris (desktop uniquement)

   Les titres portent un degrade clippe sur le texte. Au survol, on elargit ce
   degrade et on deplace sa position horizontale avec le curseur : les teintes
   glissent dans les lettres au lieu d'etre figees.

   Seul `background-position` bouge, jamais la forme ni l'echelle : l'effet
   reste donc entier quand « reduire les animations » est actif, ou la
   transition se contente d'etre instantanee.
   ══════════════════════════════════════════════════════════════════════════ */
@media (hover:hover) and (pointer:fine){
  .grad-follow{
    transition:background-size .35s var(--ease), background-position .12s linear;
  }
  .grad-follow.is-live{
    /* Un degrade dedie, dont le bleu est au MILIEU, et une image large de
       exactement deux fois la boite. Avec ces deux valeurs, la position
       `100 - x` posee par main.js amene le bleu precisement sous le curseur,
       d'un bord a l'autre du titre.
       Avec les degrades d'origine, dont le bleu est au trois quarts, le pic
       sortait de la boite des la moitie de la course : la couleur semblait
       ne pas suivre. */
    background-image:linear-gradient(90deg,
      #FFFFFF 0%, #FFFFFF 26%, #9BC0FF 41%, #3B6BFF 50%, #9BC0FF 59%,
      #FFFFFF 74%, #FFFFFF 100%);
    background-size:200% 100%;
    background-position:calc(var(--gx,50) * 1%) center;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Bannière de consentement

   Exigée par le PECR : aucun cookie d'analyse ne peut être posé avant un
   accord explicite. L'ICO demande en plus que refuser soit aussi simple
   qu'accepter, d'où deux boutons de même poids visuel, côte à côte, sans
   « accepter » mis en avant.

   Elle est écrite en dur dans le CSS et injectée par main.js. Rien ici ne
   dépend d'une animation : la bannière est visible dans son état de base,
   seul son glissement d'entrée est animé, donc elle reste utilisable quand
   « réduire les animations » est actif.
   ══════════════════════════════════════════════════════════════════════════ */
.cookie-bar{
  position:fixed; z-index:120; left:0; right:0; bottom:0;
  padding:clamp(14px,2vw,20px) var(--pad) calc(clamp(14px,2vw,20px) + env(safe-area-inset-bottom));
  background:rgba(9,11,20,.92);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.14);
  box-shadow:0 -18px 50px rgba(0,0,0,.5);
  translate:0 0;
  transition:translate .5s var(--ease), opacity .5s var(--ease);
}
.cookie-bar[hidden]{ display:none; }
.cookie-bar.is-entering{ translate:0 110%; opacity:0; }

.cookie-inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; gap:clamp(14px,2.4vw,32px); flex-wrap:wrap;
}
.cookie-text{ flex:1 1 380px; min-width:0; }
.cookie-title{
  font-family:var(--display); font-size:.95rem; font-weight:500; color:var(--text);
  margin-bottom:4px;
}
.cookie-text p{ color:var(--muted); font-size:.86rem; line-height:1.55; }
.cookie-text a{ color:#9BC0FF; text-decoration:underline; text-underline-offset:2px; }

.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }
/* même taille, même poids : refuser ne doit pas être plus difficile */
.cookie-btn{
  font-family:var(--display); font-size:.82rem; letter-spacing:.04em;
  padding:11px 20px; border-radius:99px; cursor:pointer;
  border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.04);
  color:var(--text); white-space:nowrap;
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.cookie-btn:hover{ background:rgba(255,255,255,.12); border-color:#FFFFFF; }
.cookie-btn:focus-visible{ outline:2px solid #9BC0FF; outline-offset:2px; }

/* le lien du pied de page et celui de la politique : un bouton déguisé en lien */
.cookie-reopen{
  font:inherit; color:inherit; background:none; border:0; padding:0;
  cursor:pointer; text-decoration:underline; text-underline-offset:3px;
}
.cookie-reopen:hover{ color:var(--text); }

@media (max-width:720px){
  .cookie-inner{ flex-direction:column; align-items:stretch; gap:14px; }
  /* la base de 380px etait une largeur : une fois la colonne empilee, elle
     devient une HAUTEUR et ouvrait un vide de 300px sous le texte */
  .cookie-text{ flex:0 0 auto; }
  .cookie-actions{ flex-direction:row; }
  .cookie-btn{ flex:1 1 0; text-align:center; padding:12px 14px; }
}

/* Piège à robots du formulaire : un champ que personne ne voit, que les robots
   remplissent, et dont le serveur se sert pour ignorer l'envoi. Sorti de
   l'écran plutôt que `display:none`, que certains robots savent détecter. */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }