/* =========================================================================
   PAGES DE PÔLE — Webcraft · 24/10/2026
   Chaque page de service prend la couleur de son pôle, celle du mercure du hub de l'accueil :
   SEO & visibilité bleu · Expertise IA cyan · Création de site violet · Marketing digital cuivre · Studio argent.
   La couleur est un accent (matière, filets, numéros actifs, lueur) ; le texte reste blanc, les boutons argent.
   ========================================================================= */
[data-pole="seo"]{--pole:#4C7DFF}
[data-pole="ia"]{--pole:#38C6E8}
[data-pole="creation"]{--pole:#7A3BFF}
[data-pole="marketing"]{--pole:#E0894B}
[data-pole="studio"]{--pole:#DCE5F2}
[data-pole]{--pole-doux:color-mix(in srgb,var(--pole) 22%,transparent);--pole-filet:color-mix(in srgb,var(--pole) 55%,transparent)}

/* L'accent du pôle sur les composants communs */
[data-pole] .surtitre::before{background:var(--pole)}
[data-pole] .w-liste--active li.est-actif .w-liste__num{color:var(--pole)}
[data-pole] .w-etapes::after{background:linear-gradient(90deg,var(--pole),#F7FAFF)}
[data-pole] .w-pourquoi__numero span{background:linear-gradient(180deg,#F7FAFF 20%,var(--pole) 120%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- Hero de pôle : le texte à gauche, un volet de matière teintée à droite (le volet ouvert du hub) ---------- */
.p-hero{position:relative;overflow:hidden;padding:clamp(120px,11vw,176px) 0 clamp(72px,7vw,112px);font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--w-blanc)}
.p-hero__lueur{position:absolute;inset:-20% -10% auto 30%;height:120%;pointer-events:none;background:radial-gradient(42% 46% at 62% 46%,var(--pole-doux) 0%,transparent 70%);filter:blur(24px)}
.p-hero .enveloppe{position:relative}
.p-hero__grille{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,5vw,96px);align-items:stretch}
.p-hero__fil{display:flex;align-items:center;gap:10px;margin:0 0 32px;font-size:13px;font-weight:500;color:var(--w-gris)}
.p-hero__fil a{color:var(--w-gris);text-decoration:none;transition:color .25s}
.p-hero__fil a:hover,.p-hero__fil a:focus-visible{color:var(--w-blanc)}
.p-hero__fil span[aria-hidden]{color:var(--w-gris-doux)}
.p-hero__titre{margin:0;max-width:16ch;font-size:clamp(48px,5.2vw,92px);font-weight:600;letter-spacing:-.022em;line-height:1.02}
.p-hero__chapeau{margin:32px 0 0;max-width:54ch;font-size:clamp(17px,1.25vw,20px);line-height:1.6;color:var(--w-gris)}
.p-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.p-hero__actions .w-bouton{margin-top:0}
.p-hero__volet{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(420px,34vw,600px);border-radius:24px;border:1px solid var(--pole-filet);background:var(--w-nuit)}
.p-hero__volet canvas{position:absolute;left:0;top:-22%;width:100%;height:122%;z-index:-2;filter:brightness(.7) contrast(1.12)}
.p-hero__volet::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,11,14,0) 40%,rgba(10,11,14,.85) 100%)}
.p-hero__pole{position:absolute;left:28px;right:28px;bottom:24px;display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--w-gris)}
.p-hero__pole strong{font-size:15px;font-weight:600;letter-spacing:0;color:var(--w-blanc)}
.p-hero .w-chiffres{grid-template-columns:repeat(var(--n,2),minmax(0,1fr));max-width:none}

/* ---------- Sous-navigation : les pages du pôle ---------- */
.p-pages{border-top:1px solid var(--w-filet);border-bottom:1px solid var(--w-filet);font-family:"Plus Jakarta Sans",system-ui,sans-serif}
.p-pages ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 40px}
.p-pages a{position:relative;display:inline-flex;align-items:center;gap:10px;padding:22px 0;font-size:15px;font-weight:500;color:var(--w-gris);text-decoration:none;transition:color .25s}
.p-pages a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--w-filet-fort);transition:background .25s}
.p-pages a:hover,.p-pages a:focus-visible,.p-pages a[aria-current="page"]{color:var(--w-blanc)}
.p-pages a[aria-current="page"]::before,.p-pages a:hover::before{background:var(--pole)}

/* ---------- Profils : trois colonnes posées sur un filet coloré ---------- */
.p-profils{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.p-profil{position:relative;padding-top:32px;border-top:1px solid var(--w-filet)}
.p-profil::before{content:"";position:absolute;left:0;top:-1px;width:48px;height:1px;background:var(--pole);transition:width .6s var(--w-ease)}
.p-profil:hover::before{width:100%}
.p-profil h3{margin:0 0 12px;font-size:24px;font-weight:600;letter-spacing:-.02em}
.p-profil p{margin:0;max-width:34ch;font-size:16px;line-height:1.65;color:var(--w-gris)}

/* ---------- Expertises : grille de six cases, la matière s'allume au survol ---------- */
.p-cases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--w-filet);border-left:1px solid var(--w-filet)}
.p-case{position:relative;padding:clamp(28px,2.6vw,44px);min-height:240px;display:flex;flex-direction:column;border-right:1px solid var(--w-filet);border-bottom:1px solid var(--w-filet);overflow:hidden;isolation:isolate}
.p-case::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 80% at 0% 0%,var(--pole-doux),transparent 70%);opacity:0;transition:opacity .6s var(--w-ease)}
.p-case:hover::before{opacity:1}
.p-case__num{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--w-gris)}
.p-case h3{margin:48px 0 10px;font-size:22px;font-weight:600;letter-spacing:-.015em}
.p-case p{margin:0;max-width:36ch;font-size:15.5px;line-height:1.6;color:var(--w-gris)}

/* ---------- Méthode : trois phases reliées par la ligne du pôle ---------- */
.p-sous-etapes{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.p-sous-etapes li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;font-size:15.5px;line-height:1.55;color:var(--w-gris)}
.p-sous-etapes li span{font-variant-numeric:tabular-nums;font-weight:600;color:var(--w-blanc)}

/* ---------- Prestations : lignes fines avec flèche ---------- */
.p-prestations{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,4vw,72px)}
.p-prestations li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;border-top:1px solid var(--w-filet);font-size:19px;font-weight:500;letter-spacing:-.01em}
.p-prestations li{justify-content:flex-start}
.p-prestations li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--pole)}
.p-garanties{display:flex;flex-wrap:wrap;gap:24px;margin:28px 0 0;padding:0;list-style:none;font-size:14px;color:var(--w-gris)}
.p-garanties li{display:flex;align-items:center;gap:10px}
.p-garanties li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pole)}

@media (max-width:1100px){
  .p-hero__grille{grid-template-columns:1fr}
  .p-hero__volet{min-height:320px}
  .p-cases{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .p-profils,.p-prestations{grid-template-columns:1fr}
}
@media (max-width:640px){
  .p-cases{grid-template-columns:1fr}
  .p-hero .w-chiffres{grid-template-columns:1fr}
}

.p-hero .p-hero__titre{font-size:clamp(44px,4.2vw,76px)!important;max-width:17ch}

/* Titres posés dans une demi-colonne : une taille en dessous, pour ne jamais déborder (24/10, « performance » rogné). */
[data-pole] .w-grille-2 .w-titre,[data-pole] .w-entete--ligne .w-titre{font-size:clamp(34px,3.1vw,54px)!important;max-width:16ch}
/* Menu : la page ouverte est marquée par le point du pôle. */
[data-pole] .menu__sous a[aria-current="page"]{color:var(--w-blanc)!important;position:relative}
[data-pole] .menu__sous a[aria-current="page"]::before{content:"";position:absolute;left:-15px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--pole)}

/* ---------- Hero de l'accueil décliné (24/10) : même mercure plein écran, teinté du pôle ; titre plus long, une taille en dessous ---------- */
[data-pole] .hero--pole .hero__titre{font-size:clamp(44px,4.6vw,84px)!important;line-height:1.02!important;letter-spacing:-.022em!important;max-width:15ch}
[data-pole] .hero--pole .p-hero__fil{margin-bottom:28px}
.p-chiffres{padding:clamp(48px,5vw,80px) 0 clamp(24px,3vw,48px)}
.p-chiffres .w-chiffres{margin:0;grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
/* Bande du pôle : le nom du pôle coulé dans le mercure teinté */
[data-pole] .marque-bande__mot--matiere{filter:brightness(1.25) contrast(1.05) drop-shadow(0 0 0 transparent)}
[data-pole] .marque-bande__point{background:var(--pole)}
.insecable{white-space:nowrap}
/* Mercure teinté dans le texte : la teinte du pôle posée sur la luminance de la matière (mode « color »). */
[data-pole] .marque-bande__mot--matiere{background:linear-gradient(var(--pole),var(--pole)),url("images/ia-mercure-nappe-liquide-hd.jpg") 50% 50%/240% auto no-repeat;background-blend-mode:color;-webkit-background-clip:text;background-clip:text;filter:brightness(1.35) contrast(1.05)}

/* ---------- SEO · L'ascension (24/10) : une page de résultats fixe à gauche ; à chaque expertise, votre site remonte ---------- */
.p-ascension__grille{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(48px,6vw,112px);align-items:start}
.p-ascension__scene{position:sticky;top:clamp(80px,12vh,140px)}
.p-ascension__etapes li{min-height:clamp(220px,34vh,340px);align-content:start}
.p-serp{--h:80px;position:relative;margin:0;padding:24px;border:1px solid var(--w-filet);border-radius:24px;background:linear-gradient(180deg,rgba(220,229,242,.035),rgba(220,229,242,.01));overflow:hidden;isolation:isolate}
.p-serp::before{content:"";position:absolute;inset:auto -20% -40% -20%;height:70%;z-index:-1;background:radial-gradient(50% 60% at 50% 100%,var(--pole-doux),transparent 70%);opacity:var(--eclat,0);transition:opacity 1s var(--w-ease)}
.p-serp__barre{display:flex;align-items:center;gap:2px;height:52px;padding:0 22px;border:1px solid var(--w-filet-fort);border-radius:999px;font-size:16px;color:var(--w-blanc)}
.p-serp__curseur{width:1px;height:20px;background:var(--w-blanc);animation:p-curseur 1.1s steps(1) infinite}
@keyframes p-curseur{50%{opacity:0}}
.p-serp__rang{display:flex;align-items:baseline;justify-content:space-between;margin:28px 4px 20px}
.p-serp__libelle{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--w-gris)}
.p-serp__rang strong{font-size:clamp(56px,5vw,88px);font-weight:300;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--w-blanc)}
.p-serp__liste{position:relative;list-style:none;margin:0;padding:0;height:calc(var(--h) * 6);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent);mask-image:linear-gradient(180deg,#000 78%,transparent)}
.p-serp__ligne{position:absolute;left:0;right:0;top:0;height:calc(var(--h) - 12px);padding:10px 14px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:6px;border-radius:12px;
  transform:translateY(calc(var(--i) * var(--h)));transition:transform 1s var(--w-ease),opacity .6s var(--w-ease)}
.p-serp__ligne span{display:block;height:7px;border-radius:4px;background:rgba(220,229,242,.12)}
.p-serp__ligne span:nth-child(1){width:22%;height:6px;background:rgba(220,229,242,.08)}
.p-serp__ligne span:nth-child(2){width:62%;height:9px}
.p-serp__ligne span:nth-child(3){width:84%;height:6px;background:rgba(220,229,242,.07)}
.p-serp__ligne--vous{z-index:1;gap:2px;background:color-mix(in srgb,var(--pole) 12%,rgba(10,11,14,.9));box-shadow:0 0 0 1px var(--pole-filet),0 18px 48px -24px var(--pole)}
.p-serp__ligne--vous span{height:auto!important;width:auto!important;background:none!important;border-radius:0}
.p-serp__url{font-size:12px;color:var(--pole)}
.p-serp__titre{font-size:16px;font-weight:600;color:var(--w-blanc)}
.p-serp__extrait{font-size:12.5px;color:var(--w-gris)}
@media (max-width:1100px){
  .p-ascension__grille{grid-template-columns:1fr}
  .p-ascension__scene{top:72px;z-index:2}
  .p-ascension__etapes li{min-height:0}
}
@media (prefers-reduced-motion:reduce){.p-serp__ligne{transition:none}.p-serp__curseur{animation:none}}
/* Les chiffres concluent l'ascension : ce que la remontée change pour nos clients. */
.p-ascension__resultats{margin-top:clamp(64px,7vw,120px)}
.p-ascension__resultats .w-chiffres{margin:0;grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
.p-ascension__resultats .w-chiffres dd{order:0;font-size:clamp(44px,4.4vw,76px);line-height:1.1;padding-bottom:.08em}
.p-ascension__resultats .w-chiffres dt{margin-top:12px}
@media (max-width:640px){.p-ascension__resultats .w-chiffres{grid-template-columns:1fr}}
/* overflow-x:hidden sur html/body crée un conteneur de défilement : les éléments collants (sticky) ne collent plus.
   « clip » coupe pareil le débordement horizontal sans casser le sticky (24/10, fenêtre Google de l'ascension). */
html:has(body[data-pole]),body[data-pole]{overflow-x:clip!important;overflow-y:visible!important}

/* ---------- SEA · Le bon moment (24/10) : une heure, une recherche qui s'écrit, votre annonce aussitôt en tête ---------- */
.p-moment__scene{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,96px);align-items:center}
.p-moment__heure{display:flex;flex-direction:column;gap:16px}
.p-moment__heure span{font-size:clamp(72px,8vw,148px);font-weight:300;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;color:var(--w-blanc);
  background:linear-gradient(180deg,#F7FAFF 30%,var(--pole) 140%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.p-moment__heure em{font-style:normal;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--w-gris)}
.p-moment__ecran{--h:80px;position:relative;margin:0;padding:24px;border:1px solid var(--w-filet);border-radius:24px;background:linear-gradient(180deg,rgba(220,229,242,.035),rgba(220,229,242,.01));overflow:hidden;isolation:isolate}
.p-moment__ecran::before{content:"";position:absolute;inset:-30% -20% auto -20%;height:70%;z-index:-1;background:radial-gradient(50% 60% at 50% 0%,var(--pole-doux),transparent 70%);opacity:0;transition:opacity .8s var(--w-ease)}
.p-moment.est-servi .p-moment__ecran::before{opacity:1}
.p-moment__annonce{position:relative;display:flex;flex-direction:column;gap:3px;margin:20px 0 8px;padding:14px 16px;border-radius:14px;
  background:color-mix(in srgb,var(--pole) 14%,rgba(10,11,14,.9));box-shadow:0 0 0 1px var(--pole-filet),0 22px 56px -26px var(--pole);
  opacity:0;transform:translateY(-14px) scale(.98);transition:opacity .5s var(--w-ease),transform .7s var(--w-ease)}
.p-moment.est-servi .p-moment__annonce{opacity:1;transform:none}
.p-moment__sponso{align-self:flex-start;margin-bottom:6px;padding:3px 8px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--w-nuit);background:var(--pole)}
.p-moment__organiques{list-style:none;margin:0;padding:0;display:grid;gap:6px;transition:transform .7s var(--w-ease)}
.p-moment__organiques .p-serp__ligne{position:relative;transform:none;height:56px}
.p-moment__requetes{list-style:none;margin:clamp(40px,4vw,64px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.p-moment__requetes button{height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--w-filet-fort);background:transparent;color:var(--w-gris);font:inherit;font-size:14.5px;cursor:pointer;transition:color .3s,border-color .3s,background .3s}
.p-moment__requetes button:hover,.p-moment__requetes button:focus-visible{color:var(--w-blanc);border-color:var(--w-argent)}
.p-moment__requetes button[aria-pressed="true"]{color:var(--w-nuit);background:var(--w-blanc);border-color:var(--w-blanc)}
@media (max-width:1000px){.p-moment__scene{grid-template-columns:1fr}}

/* Profils à cinq colonnes, et table des canaux (une ligne = une plateforme) */
.p-profils--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.p-profils--5 .p-profil h3{font-size:20px}
.p-canaux{list-style:none;margin:0;padding:0;border-top:1px solid var(--w-filet)}
.p-canaux li{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1fr);align-items:baseline;gap:24px;padding:28px 0;border-bottom:1px solid var(--w-filet);overflow:hidden;isolation:isolate}
.p-canaux li::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--pole-doux),transparent 70%);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--w-ease)}
.p-canaux li:hover::before{transform:none}
.p-canaux__num{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--w-gris)}
.p-canaux strong{font-size:clamp(24px,2.2vw,36px);font-weight:500;letter-spacing:-.02em}
.p-canaux span:last-child{font-size:16px;color:var(--w-gris)}
@media (max-width:1100px){.p-profils--5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.p-canaux li{grid-template-columns:48px 1fr}.p-canaux span:last-child{grid-column:2}.p-profils--5{grid-template-columns:1fr}}
/* Titre de hero long (SEA) : les lignes peuvent revenir à la ligne, jamais de débordement à droite. */
[data-pole] .hero--pole .hero__ligne{white-space:normal!important}
[data-pole] .hero--pole .hero__titre{max-width:17ch!important}
[data-pole] .hero--long .hero__titre{font-size:clamp(40px,3.7vw,68px)!important;max-width:23ch!important}
/* La grille du hero de l'accueil garde une 2e colonne vide (436 px) : sur les pages de pôle, une seule colonne. */
[data-pole] .hero--pole .hero__grille{grid-template-columns:minmax(0,1fr)!important}
[data-pole] .hero--long .hero__titre{max-width:none!important}[data-pole] .hero--long .hero__ligne{display:block;white-space:nowrap!important}

/* ---------- GEO · Le récit « 22 h 47 » (24/10) : une conversation fixe à gauche, quatre temps à droite ----------
   data-etat sur la section : 1 la question · 2 le silence (trois autres noms) · 3 le travail (les signaux s'allument) · 4 la réponse (votre nom). */
.p-recit__grille{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(48px,6vw,112px);align-items:start}
.p-recit__scene{position:sticky;top:clamp(80px,14vh,160px)}
.p-recit__temps{list-style:none;margin:0;padding:0}
.p-recit__chapitre{min-height:clamp(360px,62vh,640px);padding-top:8px;opacity:.28;transition:opacity .6s var(--w-ease)}
.p-recit__chapitre.est-actif{opacity:1}
.p-recit__heure{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pole)}
.p-recit__heure::before{content:"";width:28px;height:1px;background:var(--pole)}
.p-recit__chapitre h3{margin:20px 0 16px;max-width:20ch;font-size:clamp(28px,2.5vw,42px);font-weight:500;letter-spacing:-.02em;line-height:1.18}
.p-recit__chapitre p{margin:0;max-width:40ch;font-size:clamp(17px,1.25vw,20px);line-height:1.6;color:var(--w-gris)}
.p-recit__leviers{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:46ch}
.p-recit__leviers li{padding-left:18px;position:relative;font-size:16.5px;line-height:1.55;color:var(--w-gris)}
.p-recit__leviers li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--pole)}
.p-recit__leviers strong{color:var(--w-blanc);font-weight:600}

.p-chat{position:relative;margin:0;padding:22px;border:1px solid var(--w-filet);border-radius:26px;background:linear-gradient(180deg,rgba(220,229,242,.04),rgba(220,229,242,.012));overflow:hidden;isolation:isolate;min-height:460px}
.p-chat::before{content:"";position:absolute;inset:auto -20% -50% -20%;height:80%;z-index:-1;background:radial-gradient(50% 55% at 50% 100%,var(--pole-doux),transparent 70%);opacity:0;transition:opacity 1.2s var(--w-ease)}
[data-etat="4"] .p-chat::before{opacity:1}
.p-chat__tete{display:flex;align-items:center;gap:10px;padding:2px 4px 18px;border-bottom:1px solid var(--w-filet);font-size:14px;font-weight:600;color:var(--w-blanc)}
.p-chat__tete em{margin-left:auto;font-style:normal;font-weight:500;font-size:13px;color:var(--w-gris);font-variant-numeric:tabular-nums}
.p-chat__point{width:8px;height:8px;border-radius:50%;background:var(--pole);box-shadow:0 0 0 4px var(--pole-doux);animation:p-pouls 2.4s ease-in-out infinite}
@keyframes p-pouls{50%{box-shadow:0 0 0 8px transparent}}
.p-chat__bulle{max-width:88%;margin-top:16px;padding:14px 18px;border-radius:18px;font-size:16px;line-height:1.55}
.p-chat__bulle p{margin:0}
.p-chat__bulle--vous{margin-left:auto;border-bottom-right-radius:6px;background:rgba(220,229,242,.10);color:var(--w-blanc)}
.p-chat__bulle--ia{border-bottom-left-radius:6px;background:rgba(220,229,242,.04);border:1px solid var(--w-filet);color:rgba(232,240,250,.88)}
/* Chaque bulle apparaît ou se replie selon le temps du récit */
[data-etat="3"] .p-chat__sans{opacity:.4}
.p-chat__sans{display:block;max-height:0;overflow:hidden;transition:max-height .7s var(--w-ease),opacity .5s var(--w-ease),margin .7s var(--w-ease),padding .7s var(--w-ease)}
[data-etat="2"] .p-chat__sans,[data-etat="3"] .p-chat__sans{max-height:260px}
.p-chat__avec{display:block;max-height:0;overflow:hidden;transition:max-height .9s var(--w-ease),opacity .6s var(--w-ease) .1s,margin .7s var(--w-ease),padding .7s var(--w-ease);
  background:color-mix(in srgb,var(--pole) 12%,rgba(10,11,14,.9));box-shadow:0 0 0 1px var(--pole-filet),0 24px 60px -28px var(--pole)}
[data-etat="4"] .p-chat__avec{max-height:260px}
.p-chat__avec strong{color:var(--w-blanc)}
.p-chat__liste{list-style:none;margin:12px 0;padding:0;display:grid;gap:8px}
.p-chat__liste span{display:block;height:9px;border-radius:5px;background:rgba(220,229,242,.14)}
.p-chat__liste li:nth-child(2) span{width:76%}.p-chat__liste li:nth-child(3) span{width:62%}
.p-chat__absent{font-size:13.5px;color:var(--w-gris-doux)}
.p-chat__source{display:inline-block;margin-top:12px;padding:4px 10px;border-radius:999px;font-size:12px;color:var(--pole);border:1px solid var(--pole-filet)}
.p-chat__signaux{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;max-height:0;overflow:hidden;transition:max-height .6s var(--w-ease),opacity .5s var(--w-ease),margin .6s var(--w-ease)}
[data-etat="3"] .p-chat__signaux{max-height:80px;opacity:1;margin-top:16px}
.p-chat__signaux li{padding:7px 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--w-gris);border:1px solid var(--w-filet-fort);transition:color .4s,background .4s,border-color .4s}
[data-etat="3"] .p-chat__signaux li{color:var(--w-nuit);background:var(--pole);border-color:var(--pole);transition-delay:calc(var(--k,0) * .35s)}
.p-chat__signaux li:nth-child(2){--k:1}.p-chat__signaux li:nth-child(3){--k:2}.p-chat__signaux li:nth-child(4){--k:3}
@media (max-width:1100px){
  .p-recit__grille{grid-template-columns:1fr}
  .p-recit__scene{top:64px;z-index:2}
  .p-recit__chapitre{min-height:0;padding:40px 0;opacity:1}
}
/* États des bulles : repliées par défaut, dépliées selon le temps du récit */
.p-chat__sans,.p-chat__avec{opacity:0;margin-top:0;padding-block:0;border-width:0}
[data-etat="2"] .p-chat__sans,[data-etat="3"] .p-chat__sans{opacity:1;margin-top:16px;padding-block:14px;border-width:1px}
[data-etat="3"] .p-chat__sans{opacity:.4}
[data-etat="4"] .p-chat__avec{opacity:1;margin-top:16px;padding-block:16px;border-width:1px}
.p-chat__signaux{opacity:0;margin:0}

/* ---------- Coulée de mercure (24/10) : du mercure qui tombe en masse, au ralenti, derrière un bloc ----------
   Posée par l'assembleur avec <!--COULEE gauche|droite|plein-->, teinte du pôle. Atténuée et fondue sur les bords : le texte reste lisible. */
.a-coulee{isolation:isolate;overflow:hidden}
.p-coulee{position:absolute;top:0;bottom:0;z-index:-1;pointer-events:none;width:46%;height:100%;filter:brightness(.5) contrast(1.2);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.p-coulee--gauche{left:0}
.p-coulee--droite{right:0}
.p-coulee--plein{left:0;width:100%;filter:brightness(.38) contrast(1.15)}
.p-coulee--gauche,.p-coulee--droite{-webkit-mask-composite:source-in;mask-composite:intersect}
.p-coulee--gauche{-webkit-mask-image:linear-gradient(90deg,#000 30%,transparent),linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 30%,transparent),linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.p-coulee--droite{-webkit-mask-image:linear-gradient(270deg,#000 30%,transparent),linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(270deg,#000 30%,transparent),linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
@media (max-width:900px){.p-coulee--gauche,.p-coulee--droite{width:100%;filter:brightness(.32) contrast(1.1)}}
/* Coulée « entre » : une cascade étroite dans l'espace entre deux colonnes, sans jamais passer sous le texte. */
.p-coulee--entre{left:calc(44% - clamp(60px,4.5vw,85px));width:clamp(120px,9vw,170px);filter:brightness(.62) contrast(1.2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
@media (max-width:900px){.p-coulee--entre{display:none}}

/* ---------- SEO · Objectifs : la barre de recherche suggère vos propres objectifs (24/10) ---------- */
.p-suggest{position:relative;padding:22px;border:1px solid var(--w-filet);border-radius:24px;background:rgba(10,11,14,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.p-suggest .p-serp__barre{height:60px;font-size:17px;gap:0}
.p-suggest__debut{color:var(--w-gris)}
.p-suggest__texte{color:var(--w-blanc)}
.p-suggest__liste{list-style:none;margin:14px 0 0;padding:0}
.p-suggest__liste li{position:relative;padding:16px 20px 16px 44px;border-radius:14px;font-size:18px;color:var(--w-gris);transition:color .4s,background .4s}
.p-suggest__liste li::before{content:"";position:absolute;left:20px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;border:1px solid var(--w-filet-fort);transition:background .4s,border-color .4s}
.p-suggest__liste li.est-actif{color:var(--w-blanc);background:color-mix(in srgb,var(--pole) 14%,transparent)}
.p-suggest__liste li.est-actif::before{background:var(--pole);border-color:var(--pole)}

/* ---------- SEO · Pour qui : trois volets de mercure (le hub de l'accueil, aux couleurs du pôle) ---------- */
.p-volets-pole{--lueur:var(--pole)}
.p-volets{height:clamp(420px,30vw,540px)}
.p-volets .w-volet__corps{min-width:260px}
.p-volets .w-volet__corps p{font-size:clamp(17px,1.3vw,21px);line-height:1.5;color:var(--w-blanc)}

/* ---------- SEO · Pourquoi : cinq cartes qui s'empilent au défilement ---------- */
.p-pile{list-style:none;margin:0;padding:0;display:grid;gap:clamp(24px,3vh,40px)}
.p-pile__carte{position:sticky;top:calc(clamp(96px,12vh,140px) + var(--k) * 22px);min-height:clamp(260px,34vh,360px);padding:clamp(32px,3.4vw,56px);box-sizing:border-box;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;align-content:end;
  border:1px solid var(--w-filet-fort);border-radius:28px;background:linear-gradient(160deg,#12151C,#0A0B0E 60%);overflow:hidden;isolation:isolate;
  box-shadow:0 -24px 60px -30px rgba(0,0,0,.9)}
.p-pile__carte::before{content:"";position:absolute;inset:auto -10% -60% 30%;height:120%;z-index:-1;background:radial-gradient(45% 45% at 60% 40%,var(--pole-doux),transparent 70%)}
.p-pile__num{grid-column:1/-1;align-self:start;font-size:clamp(64px,7vw,120px);font-weight:300;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(180deg,#F7FAFF 30%,var(--pole) 140%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.p-pile__num em{font-style:normal;font-size:14px;font-weight:600;letter-spacing:.08em;margin-left:10px;-webkit-text-fill-color:var(--w-gris)}
.p-pile__carte h3{margin:0;font-size:clamp(26px,2.4vw,40px);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.p-pile__carte p{margin:0;align-self:end;max-width:40ch;font-size:clamp(16px,1.2vw,19px);line-height:1.6;color:var(--w-gris)}

/* ---------- SEO · Prestations : six tuiles qui s'allument l'une après l'autre ---------- */
.p-tuiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.p-tuile{position:relative;min-height:200px;padding:28px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--w-filet);border-radius:20px;overflow:hidden;isolation:isolate;
  transition:border-color .8s var(--w-ease),transform .8s var(--w-ease)}
.p-tuile::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 90% at 0% 100%,var(--pole-doux),transparent 70%);opacity:0;transition:opacity 1s var(--w-ease)}
.p-tuile.est-allume{border-color:var(--pole-filet)}
.p-tuile.est-allume::before{opacity:1}
.p-tuile:hover{transform:translateY(-4px)}
.p-tuile__num{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--w-gris);transition:color .8s}
.p-tuile.est-allume .p-tuile__num{color:var(--pole)}
.p-tuile__nom{font-size:clamp(20px,1.6vw,26px);font-weight:500;letter-spacing:-.015em;line-height:1.25}

/* ---------- SEO · Méthode : une frise verticale qui se trace au défilement ---------- */
.p-frise{position:relative;list-style:none;margin:0;padding:0 0 0 48px;--p:1}
.p-frise::before,.p-frise::after{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:1px}
.p-frise::before{background:var(--w-filet-fort)}
.p-frise::after{background:linear-gradient(180deg,var(--pole),#F7FAFF);transform-origin:top;transform:scaleY(var(--p))}
.p-frise__phase{position:relative;padding-bottom:clamp(48px,6vh,80px)}
.p-frise__phase::before{content:"";position:absolute;left:-48px;top:4px;width:15px;height:15px;border-radius:50%;box-sizing:border-box;border:1px solid var(--w-filet-fort);background:var(--w-nuit);z-index:1;transition:background .5s,border-color .5s,box-shadow .5s}
.p-frise__phase.est-atteint::before{background:var(--pole);border-color:var(--pole);box-shadow:0 0 0 6px var(--pole-doux)}
.p-frise__quand{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pole)}
.p-frise__phase h3{margin:12px 0 16px;font-size:clamp(24px,2vw,32px);font-weight:500;letter-spacing:-.02em}
.p-frise__phase ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.p-frise__etape{display:grid;grid-template-columns:28px minmax(0,1fr);font-size:16.5px;line-height:1.55;color:var(--w-gris);transition:opacity .6s var(--w-ease),transform .6s var(--w-ease)}
/* Sans animation (mouvement réduit, pas de JavaScript) : tout est visible ; avec, les étapes attendent le trait. */
.defilement-actif .p-frise__etape{opacity:.35;transform:translateX(-8px)}
.p-frise__etape span{font-weight:600;color:var(--w-blanc)}
.defilement-actif .p-frise__phase.est-atteint .p-frise__etape{opacity:1;transform:none}
.p-frise__phase.est-atteint .p-frise__etape:nth-child(2){transition-delay:.12s}
.p-frise__phase.est-atteint .p-frise__etape:nth-child(3){transition-delay:.24s}
@media (max-width:900px){.p-tuiles{grid-template-columns:1fr 1fr}.p-pile__carte{grid-template-columns:1fr}.p-volets{height:auto}}
@media (max-width:600px){.p-tuiles{grid-template-columns:1fr}}

/* ---------- L'humain (24/10) : la personne qui porte le pôle — portrait en noir et blanc qui prend ses couleurs, halo du pôle ---------- */
.p-humain__grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,6vw,120px);align-items:center}
.p-humain__portrait{position:relative;margin:0;justify-self:center;width:min(100%,400px);aspect-ratio:412/436;isolation:isolate}
.p-humain__portrait::before{content:"";position:absolute;inset:-18%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,var(--pole-doux),transparent 72%);filter:blur(10px);opacity:0;transition:opacity 1.4s var(--w-ease)}
.p-humain__portrait img{display:block;width:100%;height:100%;object-fit:cover;border-radius:32px;box-shadow:0 0 0 1px var(--w-filet-fort);
  filter:grayscale(1) contrast(1.06);transform:scale(.96);transition:filter 1.6s var(--w-ease),transform 1.6s var(--w-ease)}
.p-humain__portrait.est-vu::before{opacity:1}
.p-humain__portrait.est-vu img{filter:none;transform:none}
.p-humain__citation{margin:0;max-width:24ch;font-size:clamp(28px,2.6vw,44px);font-weight:400;letter-spacing:-.02em;line-height:1.25;color:var(--w-blanc)}
.p-humain__nom{display:flex;flex-direction:column;gap:4px;margin:32px 0 0}
.p-humain__nom strong{font-size:17px;font-weight:600}
.p-humain__nom span{font-size:14px;color:var(--w-gris)}
.p-humain__avec{display:flex;align-items:center;gap:14px;margin-top:24px;font-size:14px;color:var(--w-gris)}
.p-humain__visages{display:flex}
.p-humain__visages img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--w-nuit);filter:grayscale(1)}
.p-humain__visages img + img{margin-left:-12px}
@media (max-width:900px){.p-humain__grille{grid-template-columns:1fr}.p-humain__portrait{width:min(100%,300px)}}
@media (prefers-reduced-motion:reduce){.p-humain__portrait img{filter:none;transform:none}}
/* Les photos d'équipe sont détourées en rond : cadre rond, anneau du pôle. */
.p-humain__portrait{aspect-ratio:1/1;width:min(100%,380px)}
.p-humain__portrait img{border-radius:50%;box-shadow:0 0 0 1px var(--w-filet-fort),0 0 0 10px rgba(220,229,242,.04)}
.p-humain__portrait.est-vu img{box-shadow:0 0 0 1px var(--pole-filet),0 0 0 10px var(--pole-doux),0 30px 80px -30px var(--pole)}
/* Portrait beaucoup plus petit (24/10, Raphaël : « ma tête beaucoup trop grosse ») : la phrase reste la vedette. */
.p-humain__grille{grid-template-columns:auto minmax(0,1fr);gap:clamp(40px,4vw,72px)}
.p-humain__portrait{width:clamp(150px,12vw,200px)}
.p-humain__portrait.est-vu img{box-shadow:0 0 0 1px var(--pole-filet),0 0 0 6px var(--pole-doux),0 20px 50px -24px var(--pole)}
.p-humain__citation{max-width:30ch;font-size:clamp(24px,2.1vw,34px)}
@media (max-width:900px){.p-humain__grille{grid-template-columns:1fr}.p-humain__portrait{justify-self:start;width:120px}}
.hero__titre .virgule{margin-left:-.09em}
/* Coulée « entre » posée dans la grille (24/10, Raphaël : « la phrase derrière se touche ») : exactement dans l'espace
   entre la colonne 5fr et la colonne 7fr, à sa largeur ; elle ne peut plus passer sous le texte, quelle que soit la largeur d'écran. */
.w-grille-2{--g:clamp(48px,6vw,120px);position:relative}
.w-grille-2 > .p-coulee--entre{left:calc((100% - var(--g)) * 5 / 12);width:var(--g);top:-12%;bottom:-12%;height:auto}
.w-grille-2 > .p-coulee--entre{bottom:auto;height:124%}
.w-grille-2 > .p-coulee--entre{left:calc((100% - var(--g)) * 5 / 12 + var(--g) * .22);width:calc(var(--g) * .56)}
/* Bloc humain v3 (24/10, Raphaël : « les alignements, le CTA est bizarre ») : la phrase sur toute la largeur,
   puis une seule ligne de signature alignée au centre vertical : portrait · nom · équipe · rendez-vous (à droite). */
.p-humain__citation{max-width:34ch!important;font-size:clamp(28px,2.6vw,44px)!important}
.p-humain__signature{display:flex;align-items:center;flex-wrap:wrap;gap:20px 28px;margin-top:40px;padding-top:28px;border-top:1px solid var(--w-filet)}
.p-humain__signature .p-humain__portrait{width:72px;margin:0;flex:none;justify-self:auto}
.p-humain__signature .p-humain__portrait::before{inset:-40%}
.p-humain__signature .p-humain__nom{margin:0}
.p-humain__signature .p-humain__avec{margin:0;padding-left:28px;border-left:1px solid var(--w-filet)}
.p-humain__rdv{margin:0 0 0 auto!important}
.p-humain__portrait.est-vu img{box-shadow:0 0 0 1px var(--pole-filet),0 0 0 4px var(--pole-doux),0 10px 30px -12px var(--pole)}
@media (max-width:900px){.p-humain__signature .p-humain__avec{border-left:0;padding-left:0}.p-humain__rdv{margin:8px 0 0!important}}
/* Texte réservé aux lecteurs d'écran */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Mobile (24/10, recette) : les grands titres de hero passaient hors de l'écran (lignes insécables, 44 px minimum).
   Sur téléphone, les lignes reviennent à la ligne et la taille suit la largeur. Idem pour la pastille de l'accueil. ---------- */
@media (max-width:760px){
  [data-pole] .hero--pole .hero__titre,[data-pole] .hero--long .hero__titre{font-size:clamp(30px,8.6vw,44px)!important;max-width:none!important;overflow-wrap:break-word;hyphens:auto}
  [data-pole] .hero--pole .hero__ligne,[data-pole] .hero--long .hero__ligne{white-space:normal!important}
  .hero .pastille{white-space:normal!important;max-width:100%}
  .hero .hero__titre{overflow-wrap:break-word}
  .w-citation,.w-citation blockquote{max-width:100%}
}