/* assets/atelier.css */
/* =========================================================================
WEBCRAFT — atelier.css · 2026 · interface de l'accueil
Direction : galerie / atelier d'art. Papier clair, encre noire, accents de
charte. Rail de navigation à gauche, composition alternée gauche-droite.
Aucune dépendance. Ne touche ni aux textes ni aux liens du contenu.
========================================================================= */
:root{
--papier:#F7F5F0;
--papier-2:#EFEBE2;
--blanc:#FFFFFF;
--encre:#0C0C10;
--texte:#1B1B22;
--doux:#5A5A66;
--ligne:rgba(12,12,16,.13);
--ligne-forte:rgba(12,12,16,.26);
--bleu:#0101FD;
--violet:#AF26FA;
--menthe:#78FFB2;
--degrade:linear-gradient(96deg,#AF26FA 0%,#0101FD 52%,#00C48C 100%);
--rail:clamp(228px,15.5vw,296px);
--marge:clamp(20px,4.2vw,84px);
--rail-occupe:clamp(228px,15.5vw,296px);
--rythme:clamp(64px,8vw,140px);
--r-s:10px; --r-m:18px; --r-l:28px;
--eas:cubic-bezier(.22,.61,.36,1);
--serif:"Plus Jakarta Sans","Inter",system-ui,sans-serif;
--sans:"Plus Jakarta Sans","Inter",system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
margin:0;
background:var(--papier);
color:var(--texte);
font-family:var(--sans);
font-size:17px;
line-height:1.65;
-webkit-font-smoothing:antialiased;
overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.05em;max-width:64ch}
h1,h2,h3,h4{margin:0 0 .5em;letter-spacing:-.025em;line-height:1.06;font-weight:700;color:var(--encre);text-wrap:balance}
h1{font-size:clamp(38px,5.1vw,84px);letter-spacing:-.04em}
h2{font-size:clamp(30px,3.5vw,56px)}
h3{font-size:clamp(20px,1.6vw,26px);line-height:1.2}
:focus-visible{outline:2px solid var(--bleu);outline-offset:3px;border-radius:4px}
/* ---------- Coquille : rail + plan ---------- */
.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh}
/* ---------- RAIL DE NAVIGATION ---------- */
.rail{
position:sticky;top:0;height:100vh;
display:flex;flex-direction:column;gap:clamp(18px,3vh,38px);
padding:clamp(20px,2.6vh,34px) clamp(16px,1.8vw,26px);
background:var(--papier);
border-right:1px solid var(--ligne);
z-index:200;
overflow-y:auto;overscroll-behavior:contain;
}
.rail::-webkit-scrollbar{width:0}
.rail__marque{display:flex;align-items:center;gap:11px;color:var(--encre);flex:none}
.rail__marque img{width:30px;height:auto}
.rail__nom{font-size:18px;font-weight:800;letter-spacing:-.03em;line-height:1}
.rail__nom small{display:block;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--doux);margin-top:5px}
.rail__nav{display:flex;flex-direction:column;gap:1px}
.rail__lien{
position:relative;display:flex;align-items:center;gap:10px;
padding:8px 0 8px 0;color:var(--texte);font-size:15px;font-weight:600;
transition:color .3s var(--eas),padding .4s var(--eas);
}
.rail__lien::before{
content:"";position:absolute;left:-26px;top:50%;width:0;height:2px;
background:var(--degrade);transform:translateY(-50%);
transition:width .45s var(--eas);
}
.rail__lien:hover{padding-left:6px}
.rail__lien:hover::before{width:20px}
.rail__lien .fleche{margin-left:auto;opacity:0;transform:translateX(-6px);transition:.35s var(--eas);font-size:13px;color:var(--bleu)}
.rail__lien:hover .fleche{opacity:1;transform:none}
.rail__groupe{margin-top:6px}
.rail__groupe-titre{
font-size:10.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
color:var(--doux);margin:18px 0 8px;
}
.rail__services{border:0;margin:0;padding:0}
.rail__services summary{
cursor:pointer;list-style:none;
font-size:10.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
color:var(--doux);padding:10px 0 8px;display:flex;align-items:center;gap:8px;
}
.rail__services summary::-webkit-details-marker{display:none}
.rail__services summary::after{content:"+";font-size:14px;font-weight:600;color:var(--bleu);transition:transform .3s var(--eas)}
.rail__services[open] summary::after{content:"−"}
.rail__services .rail__lien{font-size:14px;font-weight:500;padding-block:5px;color:var(--doux)}
.rail__services .rail__lien:hover{color:var(--encre)}
.rail__pied{margin-top:auto;padding-top:18px;border-top:1px solid var(--ligne);font-size:13.5px;color:var(--doux);line-height:1.5}
.rail__pied a{color:var(--encre);font-weight:600}
.rail__pied a:hover{color:var(--bleu)}
.rail__cta{
display:flex;align-items:center;justify-content:center;gap:9px;
margin-top:12px;padding:12px 16px;border-radius:100px;
background:var(--encre);color:#fff!important;font-size:14px;font-weight:700;
transition:transform .4s var(--eas),box-shadow .4s var(--eas);
}
.rail__cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(12,12,16,.22)}
.rail__cta .fleche{transition:transform .4s var(--eas)}
.rail__cta:hover .fleche{transform:translateX(4px)}
.rail__repli{
position:absolute;right:-13px;top:50%;transform:translateY(-50%);
width:26px;height:52px;border-radius:100px;display:grid;place-items:center;
background:var(--blanc);border:1px solid var(--ligne);color:var(--encre);
cursor:pointer;box-shadow:0 6px 18px rgba(12,12,16,.08);z-index:2;
}
.rail__repli svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .4s var(--eas)}
body.rail-replie .shell{grid-template-columns:0 minmax(0,1fr)}
body.rail-replie .rail{overflow:hidden;padding-inline:0;border-right:0}
body.rail-replie .rail>*:not(.rail__repli){opacity:0;pointer-events:none}
body.rail-replie .rail__repli svg{transform:rotate(180deg)}
/* Bandeau mobile */
.bandeau{display:none}
/* ---------- PLAN ---------- */
.plan{min-width:0;position:relative}
.enveloppe{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--marge)}
.pastille{
display:inline-flex;align-items:center;gap:10px;
font-size:11.5px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;
color:var(--doux);margin:0 0 18px;
}
.pastille::before{content:"";width:28px;height:2px;background:var(--degrade);flex:none;border-radius:2px}
.doux{color:var(--doux)}
.chapeau{font-size:clamp(17px,1.25vw,20px);line-height:1.6;color:var(--texte);max-width:56ch}
.bouton{
display:inline-flex;align-items:center;gap:10px;
padding:15px 26px;border-radius:100px;
background:var(--encre);color:#fff;font-size:15.5px;font-weight:700;
transition:transform .45s var(--eas),box-shadow .45s var(--eas),background .3s;
}
.bouton:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(12,12,16,.22)}
.bouton .fleche{transition:transform .45s var(--eas)}
.bouton:hover .fleche{transform:translateX(5px)}
.bouton--clair{background:var(--blanc);color:var(--encre);border:1px solid var(--ligne-forte);box-shadow:none}
.bouton--ligne{background:transparent;color:var(--encre);border:1px solid var(--ligne-forte)}
/* =========================================================================
HERO — composition en deux colonnes, texte à gauche, image à droite
========================================================================= */
.hero{position:relative;padding-top:clamp(40px,7vh,90px);padding-bottom:var(--rythme);overflow:clip}
.hero__grille{
display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
gap:clamp(28px,4vw,72px);align-items:center;
}
.hero__titre{font-size:clamp(40px,5.2vw,86px);letter-spacing:-.045em;margin-bottom:22px}
.hero__titre em{
font-family:inherit;font-style:normal;font-weight:inherit;
background:none;-webkit-text-fill-color:currentColor;color:inherit;
letter-spacing:inherit;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__note{margin-top:26px;font-size:13.5px;color:var(--doux);display:flex;flex-wrap:wrap;gap:6px 18px}
.hero__note span{display:inline-flex;align-items:center;gap:7px}
.hero__note span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--menthe);box-shadow:0 0 0 3px rgba(120,255,178,.25)}
/* Composition visuelle du hero : cartes flottantes */
.hero__scene{position:relative;aspect-ratio:4/4.4;min-height:380px}
.hero__carte{
position:absolute;border-radius:var(--r-l);overflow:hidden;
border:1px solid var(--ligne);background:var(--blanc);
box-shadow:0 30px 70px rgba(12,12,16,.12);
}
.hero__carte img{width:100%;height:100%;object-fit:cover;object-position:top center}
.hero__carte--grande{inset:0 12% 8% 0;transform:rotate(-1.4deg)}
.hero__carte--petite{width:46%;aspect-ratio:3/4;right:0;bottom:0;transform:rotate(2.6deg)}
.hero__tache{
position:absolute;width:58%;aspect-ratio:1;right:-8%;top:-10%;border-radius:50%;
background:radial-gradient(circle at 40% 40%,rgba(175,38,250,.28),rgba(1,1,253,.12) 55%,transparent 72%);
filter:blur(18px);z-index:-1;pointer-events:none;
}
/* =========================================================================
BANDEAU CLIENTS
========================================================================= */
.confiance{padding-block:clamp(30px,3.4vw,48px);background:var(--papier-2);border-block:1px solid var(--ligne);overflow:hidden}
.confiance__titre{font-size:11.5px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;color:var(--doux);margin:0 0 20px}
.bandeau-logos{overflow:hidden;padding-block:4px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.bandeau-logos__piste{display:flex;align-items:center;gap:clamp(34px,4.4vw,76px);width:max-content;animation:defile 42s linear infinite}
.bandeau-logos__piste img{height:clamp(26px,2.6vw,40px);width:auto;filter:grayscale(1) contrast(.45) brightness(.3);opacity:.55;transition:filter .4s,opacity .4s}
.bandeau-logos__piste img:hover{filter:none;opacity:1}
@keyframes defile{to{transform:translateX(-50%)}}
/* Logo de marque : le SVG officiel, jamais déformé */
.rail__marque img{display:block;width:auto;height:clamp(24px,2.1vw,32px);max-width:100%}
/* Piste de logos : chaque logo garde sa place, aucun ne déborde du cadre */
.bandeau-logos{overflow:hidden}
.bandeau-logos__piste{align-items:center}
.bandeau-logos__piste img{flex:none;width:auto;max-width:none;height:clamp(26px,3.2vw,44px);object-fit:contain}
/* Confort de lecture : plus rien en dessous de 12 px */
.rail__etiquette,.rail__groupe,.bandeau__bouton,.pastille,.hero__note span,.compteur__label,.membre .role,.galerie__url,.galerie__tags span{font-size:max(12px,1em)}
/* =========================================================================
SECTIONS ALTERNÉES — le squelette de la page
========================================================================= */
.bloc{padding-block:var(--rythme);position:relative}
.bloc__grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:center}
.bloc__grille--serre{align-items:start}
.bloc__texte{min-width:0}
.bloc__visuel{min-width:0;position:relative}
/* Image encadrée, façon pièce exposée */
.cadre{position:relative;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--ligne);background:var(--blanc);box-shadow:0 30px 70px rgba(12,12,16,.10)}
.cadre img{width:100%;height:auto;display:block;transition:transform 1.1s var(--eas)}
.cadre:hover img{transform:scale(1.035)}
.cadre--portrait{aspect-ratio:4/5}
.cadre--portrait img{height:100%;object-fit:cover;object-position:top center}
.cadre__legende{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:100px;padding:7px 15px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--encre)}
/* Numéro de section, en très grand, en filigrane */
.filigrane{
position:absolute;top:0;right:clamp(10px,2vw,36px);font-family:var(--serif);font-weight:800;font-size:clamp(74px,10vw,168px);
line-height:.85;color:rgba(12,12,16,.055);pointer-events:none;user-select:none;letter-spacing:-.05em;max-width:100%;
}
/* ---------- Cartes services ---------- */
.solutions{padding-block:var(--rythme)}
.solutions__entete{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(28px,3.4vw,52px)}
.solutions__entete h2{max-width:16ch;margin-bottom:0}
.solutions__grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.carte-service{
position:relative;display:flex;flex-direction:column;gap:12px;
padding:clamp(22px,2.4vw,34px);border-radius:var(--r-l);
background:var(--blanc);border:1px solid var(--ligne);overflow:hidden;
transition:transform .55s var(--eas),box-shadow .55s var(--eas),border-color .4s;
}
.carte-service::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--degrade);opacity:0;transition:opacity .45s var(--eas)}
.carte-service:hover{transform:translateY(-5px);box-shadow:0 26px 60px rgba(12,12,16,.10);border-color:transparent}
.carte-service:hover::after{opacity:1}
.carte-service__icone{width:clamp(52px,4.6vw,68px);height:clamp(52px,4.6vw,68px);border-radius:16px;background:var(--encre);display:grid;place-items:center;margin-bottom:6px}
.carte-service__icone img{width:70%;height:70%;object-fit:contain}
.carte-service p{font-size:15.5px;color:var(--doux);margin:0;max-width:none}
.carte-service .lien{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px;font-size:14.5px;font-weight:700;color:var(--encre)}
.carte-service .lien .fleche{transition:transform .4s var(--eas);color:var(--bleu)}
.carte-service:hover .lien .fleche{transform:translateX(5px)}
/* Compteurs */
.compteurs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(28px,3vw,46px);border:1px solid var(--ligne);border-radius:var(--r-m);overflow:hidden;background:var(--blanc)}
.compteur{padding:clamp(16px,2vw,26px);border-right:1px solid var(--ligne);display:flex;flex-direction:column;gap:4px}
.compteur:last-child{border-right:0}
.compteur__valeur{font-size:clamp(26px,2.6vw,40px);font-weight:800;letter-spacing:-.04em;line-height:1;background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.compteur__label{font-size:12.5px;font-weight:600;line-height:1.35;color:var(--doux)}
/* ---------- Valeurs / raisons ---------- */
.valeurs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.valeur{padding:clamp(20px,2.2vw,30px);border-radius:var(--r-l);border:1px solid var(--ligne);background:var(--blanc);transition:transform .5s var(--eas),box-shadow .5s var(--eas)}
.valeur:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(12,12,16,.08)}
.valeur__icone{width:54px;height:54px;border-radius:14px;background:var(--encre);display:grid;place-items:center;margin-bottom:14px}
.valeur__icone img{width:70%;height:70%;object-fit:contain}
.valeur h3{font-size:19px;margin-bottom:6px}
.valeur p{font-size:15px;color:var(--doux);margin:0;max:none}
/* ---------- Réalisations : bande horizontale ---------- */
.projets{position:relative}
.projets__piste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.projets__piste a{display:block;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--ligne);background:var(--blanc);transition:transform .55s var(--eas),box-shadow .5s}
.projets__piste a:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(12,12,16,.15)}
.projets__piste img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top center;transition:transform .9s var(--eas)}
.projets__piste a:hover img{transform:scale(1.05)}
.projets__nom{padding:12px 14px;font-size:13.5px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:8px}
.projets__nom .fleche{color:var(--bleu);opacity:.5;transition:opacity .3s,transform .4s var(--eas)}
.projets__piste a:hover .fleche{opacity:1;transform:translateX(3px)}
/* ---------- Équipe ---------- */
.equipe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.membre{display:grid;grid-template-columns:104px minmax(0,1fr);gap:20px;align-items:start;padding:clamp(18px,2vw,26px);border-radius:var(--r-l);background:var(--blanc);border:1px solid var(--ligne)}
.membre__portrait{width:104px;aspect-ratio:4/5;border-radius:var(--r-m);background:linear-gradient(150deg,var(--violet),var(--bleu) 60%,#00C48C);display:grid;place-items:center;font-size:26px;font-weight:800;color:#fff;letter-spacing:-.02em}
.membre h3{font-size:18px;margin-bottom:2px}
.membre .role{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--doux);margin:0 0 10px}
.membre p{font-size:14.5px;color:var(--doux);margin:0;max:none}
/* ---------- FAQ / dépliables ---------- */
.depliables{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--ligne)}
.depliable{border-bottom:1px solid var(--ligne)}
.depliable summary{
cursor:pointer;list-style:none;padding:20px 0;
display:flex;align-items:center;justify-content:space-between;gap:24px;
font-size:clamp(16px,1.3vw,19px);font-weight:700;color:var(--encre);
transition:color .3s;
}
.depliable summary::-webkit-details-marker{display:none}
.depliable summary:hover{color:var(--bleu)}
.depliable summary::after{
content:"";flex:none;width:13px;height:13px;
border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(45deg);transition:transform .4s var(--eas);margin-right:4px;
}
.depliable[open] summary::after{transform:rotate(-135deg)}
.depliable__corps{padding:0 0 22px;color:var(--doux);font-size:15.5px;max-width:70ch}
/* ---------- Bande de contact ---------- */
.appel{
position:relative;margin-block:var(--rythme);border-radius:clamp(20px,3vw,40px);
padding:clamp(32px,5vw,72px);background:var(--encre);color:#fff;overflow:hidden;
}
.appel::before{content:"";position:absolute;inset:-40% -10% auto 45%;height:90%;background:radial-gradient(ellipse at center,rgba(175,38,250,.34),transparent 62%);pointer-events:none}
.appel::after{content:"";position:absolute;right:-6%;bottom:-30%;width:52%;aspect-ratio:1;background:radial-gradient(circle,rgba(0,196,140,.22),transparent 65%);pointer-events:none}
.appel>*{position:relative;z-index:1}
.appel h2{color:#fff;max-width:20ch}
.appel p{color:#C6C6D2;max-width:52ch}
.appel .pastille{color:#9E9EB0}
.appel__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.appel .bouton{background:#fff;color:var(--encre)}
.appel .bouton--ligne{background:transparent;color:#fff;border-color:rgba(255,255,255,.32)}
/* ---------- PIED ---------- */
.pied{background:var(--papier-2);border-top:1px solid var(--ligne);padding-block:clamp(40px,4.6vw,68px) 26px}
.pied__grille{display:grid;grid-template-columns:1.5fr repeat(3,minmax(0,.85fr));gap:clamp(20px,3vw,44px)}
.pied__col{display:flex;flex-direction:column;gap:7px}
.pied__titre{font-size:11px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--doux);margin:0 0 10px}
.pied__col a{font-size:14.5px;color:var(--texte);transition:color .25s}
.pied__col a:hover{color:var(--bleu)}
.pied__bas{margin-top:clamp(28px,3vw,44px);padding-top:18px;border-top:1px solid var(--ligne);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--doux)}
/* =========================================================================
MOUVEMENT — entrées alternées gauche / droite, pilotées par atelier.js
========================================================================= */
.mv{opacity:0;transform:translate3d(0,34px,0);transition:opacity .9s var(--eas),transform 1s var(--eas)}
.mv--g{transform:translate3d(-64px,0,0)}
.mv--d{transform:translate3d(64px,0,0)}
.mv--zoom{transform:scale(.955)}
.mv.est-vu{opacity:1;transform:none}
.mv[data-delai="1"]{transition-delay:.09s}
.mv[data-delai="2"]{transition-delay:.18s}
.mv[data-delai="3"]{transition-delay:.27s}
.reduit .mv{opacity:1;transform:none;transition:none}
/* =========================================================================
RESPONSIVE
========================================================================= */
@media (max-width:1180px){
.solutions__grille,.valeurs{grid-template-columns:repeat(2,minmax(0,1fr))}
.projets__piste{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
body{padding-left:0}
.shell{grid-template-columns:minmax(0,1fr)}
.rail{
position:fixed;inset:0 auto 0 0;width:min(86vw,340px);
transform:translateX(-101%);transition:transform .5s var(--eas);
box-shadow:0 0 60px rgba(12,12,16,.24);z-index:400;
}
body.menu-ouvert .rail{transform:none}
body.rail-replie .shell{grid-template-columns:minmax(0,1fr)}
body.rail-replie .rail{padding-inline:clamp(16px,1.8vw,26px);border-right:1px solid var(--ligne)}
body.rail-replie .rail>*:not(.rail__repli){opacity:1;pointer-events:auto}
.rail__repli{display:none}
.bandeau{
display:flex;align-items:center;justify-content:space-between;gap:12px;
position:sticky;top:0;z-index:220;padding:12px var(--marge);
background:rgba(247,245,240,.92);backdrop-filter:blur(14px);
border-bottom:1px solid var(--ligne);
}
.bandeau .rail__marque{margin:0}
.bandeau__bouton{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:100px;border:1px solid var(--ligne-forte);background:var(--blanc);color:var(--encre);font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.bandeau__bouton svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.voile{position:fixed;inset:0;background:rgba(12,12,16,.42);opacity:0;visibility:hidden;transition:.45s var(--eas);z-index:390}
body.menu-ouvert .voile{opacity:1;visibility:visible}
.hero__grille,.bloc__grille{grid-template-columns:minmax(0,1fr);gap:clamp(26px,5vw,44px)}
.bloc__grille--inverse .bloc__visuel{order:-1}
.hero__scene{aspect-ratio:16/13;min-height:0}
.equipe{grid-template-columns:minmax(0,1fr)}
.pied__grille{grid-template-columns:1fr 1fr}
.mv--g,.mv--d{transform:translate3d(0,34px,0)}
}
@media (max-width:640px){
.pastille{font-size:10.5px;letter-spacing:.16em}
.solutions__grille,.valeurs{grid-template-columns:minmax(0,1fr)}
.compteurs{grid-template-columns:1fr}
.compteur{border-right:0;border-bottom:1px solid var(--ligne)}
.compteur:last-child{border-bottom:0}
.projets__piste{grid-template-columns:minmax(0,1fr)}
.membre{grid-template-columns:76px minmax(0,1fr);gap:14px}
.membre__portrait{width:76px;font-size:20px}
.pied__grille{grid-template-columns:1fr}
.hero__actions .bouton,.appel__actions .bouton{width:100%;justify-content:center}
}
@media (min-width:1920px){
.enveloppe{max-width:1460px}
body{font-size:18px}
}
@media (min-width:2560px){
.enveloppe{max-width:1640px}
}
@media (prefers-reduced-motion:reduce){
.bandeau-logos__piste{animation:none!important}
.mv{opacity:1;transform:none;transition:none}
}
/* assets/portfolio-galerie.css */
/* =========================================================================
WEBCRAFT — portfolio-galerie.css · 2026
Portfolio poussé : galerie muséale, captures réelles des sites livrés
(ordinateur + mobile), compositions alternées, révélation au scroll.
Aucune dépendance. Ne touche ni aux textes ni aux liens du contenu.
========================================================================= */
:root{
--gal-ecart: clamp(28px, 6vw, 120px);
--gal-ombre: 0 1px 1px rgba(12,12,16,.04), 0 18px 40px -18px rgba(12,12,16,.22), 0 48px 90px -60px rgba(12,12,16,.35);
--gal-ombre-forte: 0 2px 2px rgba(12,12,16,.05), 0 28px 60px -22px rgba(12,12,16,.26), 0 70px 130px -70px rgba(12,12,16,.42);
}
/* -------------------------------------------------------------------------
1. VITRINE DE PROJET — une réalisation par « salle »
------------------------------------------------------------------------- */
.galerie{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
gap: var(--gal-ecart);
align-items: center;
padding-block: clamp(38px, 5vw, 84px);
border-top: 1px solid var(--ligne);
}
.galerie:first-of-type{ border-top: 0; padding-top: clamp(20px, 2.6vw, 40px); }
.galerie--inverse{ direction: rtl; }
.galerie--inverse > *{ direction: ltr; }
/* --- le texte : numéro, nom, métier, liens --- */
.galerie__fiche{ position: relative; }
.galerie__rang{
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: clamp(14px, 1.6vw, 22px);
}
.galerie__numero{
font-family: var(--serif);
font-style: normal;
font-weight: 800;
font-size: clamp(30px, 3.6vw, 52px);
line-height: .8;
color: var(--encre);
letter-spacing: -.02em;
}
.galerie__secteur{
font-size: 12px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--doux);
}
.galerie__nom{
font-size: clamp(24px, 2.9vw, 40px);
line-height: 1.08;
letter-spacing: -.025em;
font-weight: 700;
margin: 0 0 clamp(10px, 1.2vw, 16px);
max-width: 22ch;
}
.galerie__nom em{
font-family: var(--serif);
font-style: italic;
font-weight: 400;
letter-spacing: 0;
}
.galerie__metier{
font-size: 17px;
line-height: 1.55;
color: var(--doux);
max-width: 46ch;
margin: 0 0 clamp(16px, 2vw, 26px);
}
.galerie__tags{
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: clamp(18px, 2.2vw, 28px);
}
.galerie__tags span{
font-size: 12.5px;
letter-spacing: .02em;
padding: 6px 12px;
border: 1px solid var(--ligne-forte);
border-radius: 999px;
color: var(--texte);
white-space: nowrap;
}
.galerie__lien{
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 600;
font-size: 15.5px;
position: relative;
padding-bottom: 4px;
}
.galerie__lien::after{
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1.5px;
background: var(--degrade);
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform .5s var(--eas);
}
.galerie__lien:hover::after,
.galerie__lien:focus-visible::after{ transform: scaleX(1); }
.galerie__lien .fleche{ transition: transform .45s var(--eas); }
.galerie__lien:hover .fleche{ transform: translateX(6px); }
/* --- le visuel : la capture dans un cadre d'écran, avec le mobile en écho --- */
.galerie__scene{
position: relative;
isolation: isolate;
}
.galerie__scene::before{
content: "";
position: absolute;
inset: 8% -6% -10% 12%;
border-radius: 50%;
background: radial-gradient(60% 60% at 50% 50%, rgba(175,38,250,.13), rgba(1,1,253,.06) 55%, transparent 72%);
filter: blur(30px);
z-index: -1;
opacity: .9;
}
/* l'écran */
.galerie__ecran{
position: relative;
display: block;
border-radius: 14px;
overflow: hidden;
background: var(--blanc);
box-shadow: var(--gal-ombre);
border: 1px solid rgba(12,12,16,.10);
transition: box-shadow .6s var(--eas), transform .6s var(--eas);
}
.galerie__ecran:hover{ box-shadow: var(--gal-ombre-forte); }
.galerie__barre{
display: flex;
align-items: center;
gap: 7px;
padding: 9px 12px;
background: #F1EFEA;
border-bottom: 1px solid rgba(12,12,16,.08);
}
.galerie__barre i{
width: 7px; height: 7px;
border-radius: 50%;
background: rgba(12,12,16,.22);
display: block;
}
.galerie__url{
flex: 1;
margin-left: 8px;
font-size: 11.5px;
color: var(--doux);
background: var(--blanc);
border-radius: 999px;
padding: 3px 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.galerie__vue{
position: relative;
aspect-ratio: 16 / 10.6;
overflow: hidden;
background: var(--papier-2);
}
.galerie__vue img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
transform: scale(1.005);
transition: transform 1.4s var(--eas);
}
.galerie__ecran:hover .galerie__vue img{ transform: scale(1.035); }
/* le mobile en écho, posé sur le coin de l'écran */
.galerie__mobile{
position: absolute;
right: clamp(-6px, -1vw, 0px);
bottom: clamp(-26px, -3vw, -14px);
width: clamp(78px, 13%, 132px);
aspect-ratio: 9 / 19;
border-radius: clamp(12px, 1.6vw, 20px);
overflow: hidden;
background: var(--blanc);
border: 3px solid var(--encre);
box-shadow: 0 18px 34px -14px rgba(12,12,16,.45);
transition: transform .7s var(--eas);
}
.galerie__mobile img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
.galerie__scene:hover .galerie__mobile{ transform: translateY(-8px) rotate(-1.5deg); }
/* --- révélation au scroll : chaque vitrine s'ouvre depuis son côté --- */
.galerie[data-revele]{ opacity: 0; }
.galerie[data-revele] .galerie__fiche,
.galerie[data-revele] .galerie__scene{
opacity: 0;
transform: translate3d(-30px, 26px, 0);
transition: opacity .9s var(--eas), transform 1s var(--eas);
}
.galerie[data-revele].galerie--inverse .galerie__fiche,
.galerie[data-revele].galerie--inverse .galerie__scene{
transform: translate3d(30px, 26px, 0);
}
.galerie[data-revele].est-la{
opacity: 1;
}
.galerie[data-revele].est-la .galerie__fiche{ opacity: 1; transform: none; transition-delay: .04s; }
.galerie[data-revele].est-la .galerie__scene{ opacity: 1; transform: none; transition-delay: .16s; }
/* --- sur grand écran, la vitrine respire plus large --- */
@media (min-width: 1800px){
.galerie{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr); }
}
/* --- tablette et mobile : tout en colonne, mobile en écho réduit --- */
@media (max-width: 900px){
.galerie,
.galerie--inverse{
grid-template-columns: minmax(0, 1fr);
direction: ltr;
gap: clamp(20px, 4vw, 32px);
padding-block: clamp(30px, 6vw, 48px);
}
.galerie__scene{ order: -1; }
.galerie__nom{ max-width: none; font-size: clamp(23px, 6.4vw, 32px); }
.galerie__metier{ font-size: 16px; }
.galerie__mobile{
width: clamp(64px, 17%, 96px);
bottom: clamp(-18px, -2vw, -10px);
border-width: 2.5px;
}
.galerie[data-revele] .galerie__fiche,
.galerie[data-revele] .galerie__scene,
.galerie[data-revele].galerie--inverse .galerie__fiche,
.galerie[data-revele].galerie--inverse .galerie__scene{
transform: translate3d(0, 24px, 0);
}
}
@media (prefers-reduced-motion: reduce){
.galerie[data-revele],
.galerie[data-revele] .galerie__fiche,
.galerie[data-revele] .galerie__scene{ opacity: 1 !important; transform: none !important; transition: none !important; }
.galerie__vue img,
.galerie__mobile,
.galerie__ecran,
.galerie__lien .fleche{ transition: none !important; }
}
/* assets/atelier-visuels.css */
/* =========================================================================
WEBCRAFT — atelier-visuels.css · 2026
Surcouche « galerie éclairée » : papier blanc, illustration omniprésente,
composition magazine, dégradé de charte violet → bleu → menthe, mouvement
gauche-droite au scroll. Ne touche NI aux textes NI aux liens.
Uniquement de la mise en forme : aucun contenu n'est ajouté.
========================================================================= */
:root{
--papier:#FFFFFF;
--papier-2:#F6F4EF;
--papier-3:#FBFAF7;
--encre:#0C0C10;
--texte:#191920;
--doux:#565663;
--ligne:rgba(12,12,16,.10);
--ligne-forte:rgba(12,12,16,.22);
--degrade:linear-gradient(96deg,#AF26FA 0%,#6E1FFB 34%,#0101FD 66%,#78FFB2 100%);
--degrade-sourd:linear-gradient(120deg,rgba(175,38,250,.14),rgba(1,1,253,.10) 48%,rgba(120,255,178,.14));
--marge:clamp(22px,5vw,96px);
--rythme:clamp(72px,9vw,168px);
}
/* -------------------------------------------------------------------------
0. PROPORTIONS DE TEXTE — plancher absolu 13 px
------------------------------------------------------------------------- */
body{background:#FFFFFF;font-size:17.5px;line-height:1.68;color:var(--texte)}
p{max-width:60ch}
.chapeau{font-size:clamp(18px,1.35vw,20px);line-height:1.62}
.doux{color:var(--doux);font-size:max(15.5px,1em)}
h2{font-size:clamp(32px,4vw,62px);letter-spacing:-.035em;line-height:1.02}
h3{font-size:clamp(21px,1.7vw,27px)}
.pastille,.rail__lien,.rail__lien small,.rail__nom small,.rail__pied,
.confiance__titre,.pied__titre,.pied__col a,.pied__col p,
.hero__note,.depliable__corps,.carte-service p,.compteur__label,
.galerie__secteur,.galerie__services,.projets__nom,.bandeau a{
font-size:max(13px,var(--t,0px));
}
.pastille{font-size:clamp(13px,1vw,15px);letter-spacing:.18em;font-weight:800}
.hero__note{font-size:14px}
.confiance__titre,.pied__titre{font-size:13px}
.rail__lien{font-size:14.5px;line-height:1.35}
/* -------------------------------------------------------------------------
1. RAIL — clair, mais avec une colonne illustrée en dégradé
------------------------------------------------------------------------- */
.rail{
background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 42%,#FCFBFF 72%,#F7FFF9 100%);
border-right:1px solid var(--ligne);
}
/* Halos violet et vert de l'ancienne direction retirés (23/10, Raphaël) : le rail reste une nuit unie. */
.rail::after{content:none}
.rail > *{position:relative;z-index:1}
.rail__nom{font-size:15.5px}
.rail__nom small{font-size:13px;letter-spacing:.16em}
.rail__marque img{width:34px;height:34px}
.rail__lien{padding:6px 0;color:var(--texte)}
.rail__lien:hover{color:var(--bleu)}
.rail__services summary{font-size:13.5px;letter-spacing:.06em}
.rail__cta{background:var(--encre);color:#fff;font-size:14px}
.rail__repli{background:#fff}
.rail__pied{font-size:13.5px;line-height:1.55}
/* -------------------------------------------------------------------------
2. HERO — composition magazine, grande œuvre graphique à droite
------------------------------------------------------------------------- */
.hero{
position:relative;padding-top:clamp(44px,7vh,96px);padding-bottom:var(--rythme);
background:
radial-gradient(70% 60% at 100% 0%,rgba(175,38,250,.13),transparent 62%),
radial-gradient(60% 55% at 88% 92%,rgba(120,255,178,.20),transparent 68%),
radial-gradient(50% 40% at 55% 8%,rgba(1,1,253,.08),transparent 70%),
#FFFFFF;
}
.hero__grille{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:end;gap:clamp(30px,4vw,64px)}
.hero__titre{font-size:clamp(42px,5.6vw,92px);line-height:.98}
.hero__titre em{
background:none;color:inherit;
padding-right:.06em;
}
.hero__actions{margin-top:34px}
.bouton{background:var(--encre);font-size:16px;padding:16px 28px}
.bouton--ligne{background:#fff}
/* l'œuvre : deux cadres d'écran posés en décalage, filet dégradé */
.hero__scene{
position:relative;aspect-ratio:1/1.02;isolation:isolate;
}
.hero__scene::before{
content:"";position:absolute;inset:-6% -15% 18% 12%;z-index:-2;
background:var(--degrade);filter:blur(46px);opacity:.34;border-radius:50%;
}
.hero__scene::after{
content:"";position:absolute;left:2%;top:-2%;width:64%;height:1.5px;z-index:3;
background:var(--degrade);transform-origin:left center;
animation:trait 2.6s var(--eas) both;
}
@keyframes trait{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
.hero__carte{
border-radius:6px;border:1px solid var(--ligne);background:#fff;
box-shadow:0 2px 3px rgba(12,12,16,.05),0 26px 60px -26px rgba(12,12,16,.30),0 60px 120px -70px rgba(1,1,253,.55);
}
.hero__carte--grande{inset:4% 14% 12% 0;transform:rotate(-1.6deg)}
.hero__carte--petite{width:44%;aspect-ratio:9/16;right:0;bottom:0;transform:rotate(2.8deg);border-radius:14px}
.hero__tache{
width:72%;aspect-ratio:1;right:-16%;top:-14%;
background:
radial-gradient(circle at 38% 36%,rgba(175,38,250,.34),transparent 58%),
radial-gradient(circle at 66% 66%,rgba(1,1,253,.22),transparent 60%),
radial-gradient(circle at 46% 78%,rgba(120,255,178,.30),transparent 62%);
filter:blur(24px);opacity:.95;
}
/* grand numéro d'appel en filigrane, purement décoratif */
.plan{position:relative;background:#fff}
.plan::before{
content:"";position:absolute;left:0;right:0;top:0;height:1px;
background:var(--degrade);opacity:.9;
}
/* -------------------------------------------------------------------------
3. BANDEAU CLIENTS — ruban sur papier chaud
------------------------------------------------------------------------- */
.confiance{
background:
linear-gradient(90deg,var(--degrade-sourd),rgba(255,255,255,0) 60%),
var(--papier-3);
border-block:1px solid var(--ligne);
}
.bandeau-logos img{filter:grayscale(1);opacity:.62;transition:filter .5s,opacity .5s}
.bandeau-logos img:hover{filter:none;opacity:1}
/* -------------------------------------------------------------------------
4. SOLUTIONS — les pictos deviennent des petites œuvres
------------------------------------------------------------------------- */
.solutions{
position:relative;padding-block:var(--rythme);
background:
radial-gradient(52% 46% at 92% 4%,rgba(175,38,250,.10),transparent 66%),
radial-gradient(46% 40% at 6% 96%,rgba(120,255,178,.16),transparent 68%),
#FFFFFF;
}
.solutions__entete{align-items:end;border-bottom:1px solid var(--ligne);padding-bottom:clamp(20px,3vw,40px)}
.solutions__grille{gap:clamp(22px,3vw,40px)}
.carte-service{
position:relative;padding:clamp(24px,2.6vw,38px) 0 0;
background:transparent;border:0;border-radius:0;
border-top:1px solid var(--ligne-forte);
}
.carte-service::before{
content:"";position:absolute;left:0;top:-1px;width:0;height:1.5px;background:var(--degrade);
transition:width .8s var(--eas);
}
.carte-service:hover::before{width:100%}
.carte-service__icone{
width:58px;height:58px;border-radius:0;background:transparent;
display:grid;place-items:center;margin-bottom:20px;
box-shadow:none;
}
.carte-service__icone img{width:52px;height:52px;max-width:52px}
.carte-service h3{margin-bottom:12px}
.carte-service p{font-size:16px;color:var(--doux);max-width:46ch}
.carte-service .lien,.lien{
display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;
color:var(--encre);border-bottom:1px solid var(--ligne-forte);padding-bottom:2px;
}
.carte-service .lien:hover,.lien:hover{color:var(--bleu);border-color:var(--bleu)}
/* -------------------------------------------------------------------------
5. COMPTEURS — grands chiffres en dégradé
------------------------------------------------------------------------- */
.compteurs{
position:relative;margin-block:var(--rythme);padding:clamp(30px,4vw,60px) clamp(4px,2vw,28px);
border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);
background:linear-gradient(180deg,rgba(248,247,255,.7),rgba(247,255,250,.7));
}
.compteur__valeur{
font-size:clamp(44px,5.4vw,80px);letter-spacing:-.05em;
background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent;
font-weight:800;
}
.compteur__label{font-size:14.5px;color:var(--doux)}
/* -------------------------------------------------------------------------
6. RÉALISATIONS — la « salle » : numéro géant, cadre d'écran, mobile en écho
------------------------------------------------------------------------- */
.projets{position:relative;padding-block:var(--rythme);background:#fff}
.projets__piste{gap:clamp(40px,6vw,96px)}
.projets__piste > a{
position:relative;display:block;border-radius:4px;overflow:visible;
}
.projets__piste > a::after{
content:"";position:absolute;inset:auto 0 -14px 0;height:1px;background:var(--ligne);
}
.projets__piste > a img{
border-radius:4px;border:1px solid var(--ligne);
box-shadow:0 2px 3px rgba(12,12,16,.05),0 30px 60px -30px rgba(12,12,16,.32);
transition:transform .8s var(--eas),box-shadow .8s var(--eas);
}
.projets__piste > a:hover img{transform:translateY(-8px);box-shadow:0 40px 80px -34px rgba(1,1,253,.42)}
.projets__nom{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
/* -------------------------------------------------------------------------
7. BLOCS texte + image — alternance franche, grande respiration
------------------------------------------------------------------------- */
.bloc{padding-block:var(--rythme);position:relative}
.bloc + .bloc{border-top:1px solid var(--ligne)}
.bloc__grille{gap:clamp(30px,5vw,88px);align-items:center}
.cadre{
border-radius:4px;overflow:hidden;border:1px solid var(--ligne);background:var(--papier-3);
box-shadow:0 30px 70px -40px rgba(12,12,16,.40);
}
.cadre img{width:100%;height:100%;object-fit:cover}
/* -------------------------------------------------------------------------
8. BLOCS NOIRS — l'encre devient un accent, pas le fond
------------------------------------------------------------------------- */
.appel{
border-radius:6px;background:#0C0C10;
box-shadow:0 40px 90px -50px rgba(175,38,250,.55),0 20px 60px -40px rgba(1,1,253,.5);
}
.appel::before{background:radial-gradient(ellipse at center,rgba(175,38,250,.46),transparent 62%)}
.appel::after{background:radial-gradient(circle,rgba(120,255,178,.30),transparent 65%)}
.pied{background:var(--papier-2);border-top:1px solid var(--ligne)}
.pied__col a,.pied__col p{font-size:14.5px}
/* -------------------------------------------------------------------------
9. MOUVEMENT — dérive gauche-droite au scroll pilotée par atelier.js
(les classes .mv / .est-vu restent la source de vérité du JS)
------------------------------------------------------------------------- */
.mv{will-change:transform,opacity}
.mv--g:not(.est-vu){transform:translate3d(-46px,10px,0) rotate(-.4deg)}
.mv--d:not(.est-vu){transform:translate3d(46px,10px,0) rotate(.4deg)}
.mv--g,.mv--d{transition:transform 1.1s var(--eas),opacity 1s var(--eas)}
.reduit .mv,.reduit .mv--g,.reduit .mv--d{transform:none !important;opacity:1 !important}
@media (prefers-reduced-motion:reduce){
.mv,.mv--g,.mv--d{transform:none !important;opacity:1 !important;transition:none !important}
.hero__scene::after{animation:none}
}
/* -------------------------------------------------------------------------
10. RESPONSIVE — de 390 px aux très grands écrans
------------------------------------------------------------------------- */
@media (min-width:1900px){
.enveloppe{max-width:1640px}
body{font-size:18px}
}
@media (max-width:1100px){
.hero__grille,.hero__scene{grid-template-columns:1fr}
.hero__scene{aspect-ratio:16/11;margin-top:24px}
.hero__carte--grande{inset:0 22% 10% 0}
}
@media (max-width:780px){
body{font-size:17px}
.hero__scene{aspect-ratio:4/3}
.hero__carte--petite{width:38%;aspect-ratio:9/16}
.compteurs{grid-template-columns:1fr 1fr}
.rail__lien,.rail__pied{font-size:14px}
}
@media (max-width:520px){
.hero__titre{font-size:clamp(34px,9vw,44px)}
.compteurs{grid-template-columns:1fr}
.projets__piste{gap:34px}
}
/* assets/portfolio-vitrine.css */
/* ============================================================
PORTFOLIO — vitrine poussée : pièce de référence + grille éditoriale
============================================================ */
.projets__piste{
display:grid;
grid-template-columns:repeat(12,1fr);
gap:clamp(18px,2.2vw,34px);
margin-top:clamp(28px,4vw,56px);
align-items:start;
}
/* ---- PIÈCE DE RÉFÉRENCE ---- */
.projet-vedette{
grid-column:1 / -1;
display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
gap:clamp(22px,3vw,52px);
align-items:center;
padding:clamp(18px,2.4vw,34px);
border-radius:26px;
background:
radial-gradient(120% 130% at 0% 0%, rgba(124,92,255,.12), transparent 55%),
radial-gradient(110% 120% at 100% 100%, rgba(120,255,178,.12), transparent 55%),
#fff;
border:1px solid rgba(16,14,12,.09);
text-decoration:none;
color:inherit;
overflow:hidden;
position:relative;
transition:border-color .5s ease, box-shadow .5s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.projet-vedette::after{
content:"";
position:absolute;inset:0;
border-radius:inherit;
pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(124,92,255,0);
transition:box-shadow .5s ease;
}
.projet-vedette:hover{
border-color:rgba(124,92,255,.3);
box-shadow:0 30px 70px -38px rgba(36,20,90,.4);
transform:translateY(-4px);
}
.projet-vedette:hover::after{box-shadow:inset 0 0 0 1px rgba(124,92,255,.22);}
.projet-vedette__visuel{
position:relative;
border-radius:18px;
overflow:hidden;
background:#0e0c14;
aspect-ratio:16/10;
box-shadow:0 24px 50px -30px rgba(16,14,30,.55);
}
.projet-vedette__visuel img{
width:100%;height:100%;
object-fit:cover;object-position:top center;
display:block;
transform:scale(1.02);
transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.projet-vedette:hover .projet-vedette__visuel img{transform:scale(1.08);}
.projet-vedette__meta{min-width:0;}
.projet-vedette__num{
display:inline-block;
font-size:11px;
letter-spacing:.18em;
text-transform:uppercase;
font-weight:700;
padding:7px 12px;
border-radius:999px;
color:#1a1230;
background:linear-gradient(90deg,rgba(124,92,255,.16),rgba(120,255,178,.16));
margin-bottom:clamp(12px,1.4vw,18px);
}
.projet-vedette__titre{
font-family:var(--serif,Georgia,serif);
font-size:clamp(26px,3.4vw,46px);
line-height:1.04;
letter-spacing:-.02em;
margin:0 0 10px;
}
.projet-vedette__secteur{
font-size:12.5px;
letter-spacing:.06em;
text-transform:uppercase;
color:rgba(16,14,12,.52);
margin:0 0 clamp(12px,1.6vw,18px);
}
.projet-vedette__texte{
font-size:clamp(14.5px,1.15vw,16px);
line-height:1.6;
color:rgba(16,14,12,.7);
margin:0 0 clamp(16px,2vw,24px);
max-width:44ch;
}
.projet-vedette__lien{
display:inline-flex;align-items:center;gap:10px;
font-weight:600;font-size:14.5px;
padding-bottom:4px;
border-bottom:1px solid rgba(16,14,12,.24);
transition:gap .35s ease, border-color .35s ease;
}
.projet-vedette:hover .projet-vedette__lien{gap:16px;border-color:#7c5cff;}
/* ---- CARTES ---- */
.projet-carte{
grid-column:span 4;
display:block;
text-decoration:none;
color:inherit;
border-radius:18px;
overflow:hidden;
background:#fff;
border:1px solid rgba(16,14,12,.08);
transition:transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s ease, border-color .55s ease;
}
.projet-carte:hover{
transform:translateY(-6px);
border-color:rgba(124,92,255,.28);
box-shadow:0 26px 54px -34px rgba(36,20,90,.42);
}
.projet-carte__visuel{
position:relative;
aspect-ratio:4/3;
overflow:hidden;
background:#0e0c14;
}
.projet-carte__visuel img{
width:100%;height:100%;
object-fit:cover;object-position:top center;
display:block;
transition:transform 1s cubic-bezier(.2,.7,.2,1);
}
.projet-carte:hover .projet-carte__visuel img{transform:scale(1.06);}
.projet-carte__meta{
display:grid;
grid-template-columns:1fr auto;
align-items:center;
gap:4px 14px;
padding:clamp(14px,1.6vw,20px);
position:relative;
}
.projet-carte__meta h3{
font-size:clamp(15px,1.25vw,17.5px);
font-weight:600;
letter-spacing:-.01em;
margin:0;
grid-column:1;
}
.projet-carte__secteur{
grid-column:1;
font-size:12px;
letter-spacing:.04em;
color:rgba(16,14,12,.5);
margin:0;
}
.projet-carte__fleche{
grid-column:2;
grid-row:1 / span 2;
font-size:17px;
color:rgba(16,14,12,.4);
transition:transform .4s ease, color .4s ease;
}
.projet-carte:hover .projet-carte__fleche{transform:translateX(5px);color:#7c5cff;}
/* ---- BANDEAU LOGOS : piste contenue, pas de débordement de page ---- */
.bandeau-logos{
overflow:hidden !important;
max-width:100%;
contain:paint;
}
.bandeau-logos__piste{
overflow:hidden;
max-width:100%;
will-change:transform;
}
html,body{max-width:100%;overflow-x:hidden;}
/* lisibilité mobile */
@media (max-width:760px){
.rail__etiquette, .rail__groupe, .bandeau-logos__item,
.pastille, .projet-carte__secteur, .projet-vedette__num{
font-size:12px !important;
line-height:1.35;
}
}
/* ---- BANDEAU LOGOS (texte, pas d'image cassée) ---- */
.bandeau-logos__item{
flex:0 0 auto;
font-size:13px;
letter-spacing:.1em;
text-transform:uppercase;
font-weight:600;
color:rgba(16,14,12,.42);
white-space:nowrap;
padding:0 clamp(14px,2vw,28px);
transition:color .4s ease;
}
.bandeau-logos__item:hover{color:rgba(16,14,12,.85);}
/* ---- RESPONSIVE ---- */
@media (max-width:1100px){
.projet-vedette{grid-template-columns:1fr;}
.projet-vedette__visuel{aspect-ratio:16/11;}
.projet-carte{grid-column:span 6;}
}
@media (max-width:680px){
.projet-carte{grid-column:1 / -1;}
.projet-vedette{padding:14px;border-radius:20px;}
.projet-vedette__visuel{aspect-ratio:4/3;}
}
@media (min-width:1800px){
.projet-carte{grid-column:span 3;}
.projets__piste{gap:28px;}
}
/* assets/atelier-corrections.css */
/* =========================================================================
WEBCRAFT — atelier-corrections.css · 2026
Correctifs de mise en page de l'accueil, sans toucher au design.
1. Le plan (contenu) ne peut pas être comprimé par la grille : fini la
colonne de 29 px, le contenu occupe toute la largeur restante.
2. Révélations : une section déjà à l'écran est visible même si
l'observateur ne se déclenche pas (filet de sécurité).
3. Filigranes 01 / 02 / 03 : jamais rognés au bord droit.
========================================================================= */
/* ---------- 1. Coquille : rail fixe + plan élastique ---------- */
.shell{
grid-template-columns: var(--rail-occupe, clamp(228px,15.5vw,296px)) minmax(0,1fr);
}
.shell > .plan,
.shell > main,
.shell > .contenu{
min-width: 0;
width: auto;
max-width: none;
grid-column: 2;
}
/* Le voile du menu mobile est un calque, pas un élément de la grille */
.shell > .voile{
position: fixed;
inset: 0;
height: 0;
grid-column: 1 / -1;
grid-row: 1;
pointer-events: none;
}
body.menu-ouvert .shell > .voile{
height: auto;
pointer-events: auto;
}
/* ---------- 2. Logo de marque : proportions d'origine (225 x 54 px) ---------- */
.rail__marque,
.bandeau .rail__marque{
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
max-width: none;
}
.rail__marque img{
width: auto;
height: clamp(22px, 2.1vw, 30px);
max-width: 100%;
object-fit: contain;
}
.rail__lieu{
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--doux);
}
/* ---------- 3. Bouton du rail et pictos ---------- */
.rail__cta,
a.rail__cta{
background: var(--encre);
color: #fff !important;
}
.rail__cta .fleche{color:#fff}
.carte-service__icone,
.valeur__icone{
background: var(--degrade);
box-shadow: 0 14px 26px rgba(12,12,16,.18);
border-radius: 14px;
overflow: hidden;
display: grid;
place-items: center;
padding: 0;
}
.carte-service__icone img,
.valeur__icone img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(2.4);
filter: brightness(0) invert(1);
}
/* ---------- 4. Filigranes : jamais coupés par le bord droit ---------- */
.filigrane{
max-width: 100%;
overflow: hidden;
pointer-events: none;
}
@media (min-width: 981px){
.filigrane{
right: auto;
left: auto;
text-align: right;
padding-right: .04em;
}
}
/* ---------- 5. Filet de sécurité des révélations ---------- */
@media (prefers-reduced-motion: reduce){
.mv{opacity:1 !important;transform:none !important}
}
/* assets/mise-en-page.css */
/* =========================================================================
WEBCRAFT — mise-en-page.css · 2026
Correctifs de structure de l'accueil, sans toucher au design :
1. Rail fixe : la navigation reste en place, le contenu défile seul.
2. Le plan occupe toute la largeur restante (plus de colonne écrasée).
3. Apparitions au scroll : rien ne peut rester invisible.
========================================================================= */
/* ---------- 1 + 2. Coquille : rail fixe, plan élastique ---------- */
.shell{
grid-template-columns: var(--rail-occupe, clamp(228px,15.5vw,296px)) minmax(0,1fr);
grid-template-rows:auto;
grid-auto-rows:min-content;
row-gap:0;
min-height:100vh;
align-items:start;
}
.shell > .rail{
grid-column:1;
grid-row:1;
position:sticky;
top:0;
align-self:start;
height:100vh;
max-height:100vh;
}
.shell > .plan{
grid-column:2;
grid-row:1;
align-self:start;
min-width:0;
width:auto;
max-width:none;
}
/* Le voile du menu mobile n'occupe aucune case de la grille : hors flux,
il ne peut plus repousser le contenu dans une deuxième ligne. */
.shell > .voile{
position:fixed;
inset:0;
grid-column:1 / -1;
grid-row:1;
height:0;
min-height:0;
margin:0;
padding:0;
pointer-events:none;
}
body.menu-ouvert .shell > .voile{
height:auto;
pointer-events:auto;
}
/* Filet de sécurité : même si la grille était réécrite ailleurs, le plan
occupe toujours la colonne de droite et démarre en haut. */
.plan{grid-column:2 !important;grid-row:1 !important;align-self:start}
/* Premier écran : le contenu commence en haut, pas sous la navigation */
.plan > .bandeau{display:none}
.hero{padding-top:clamp(48px,7vh,96px)}
/* Bandeau de logos : les noms s'écoulent sur deux lignes, aucun ne sort du cadre */
.bandeau-logos__piste{
display:flex;flex-wrap:wrap;gap:10px clamp(18px,2.6vw,44px);
width:100%;max-width:100%;overflow:hidden;align-items:center;
}
.bandeau-logos__item{flex:0 1 auto;min-width:0;white-space:normal}
/* ---------- 3. Filet de sécurité : plus rien ne reste invisible ---------- */
.mv{
opacity:1;
transform:none;
}
.mv:not(.est-vu){
/* l'animation reste un bonus : l'état « en mouvement » est une translation
légère qui revient d'elle-même, jamais une opacité à zéro prolongée */
animation: mv-entree 1s var(--eas) both;
animation-delay: var(--mv-delai, 0s);
}
.mv.est-vu{opacity:1;transform:none;animation:none}
@keyframes mv-entree{
from{opacity:0;transform:translate3d(var(--mv-x,0),24px,0)}
to{opacity:1;transform:none}
}
.mv--g{--mv-x:-42px}
.mv--d{--mv-x:42px}
.mv[data-delai="1"]{--mv-delai:.08s}
.mv[data-delai="2"]{--mv-delai:.16s}
.mv[data-delai="3"]{--mv-delai:.24s}
@media (prefers-reduced-motion:reduce){
.mv:not(.est-vu){animation:none;opacity:1;transform:none}
}
/* Le premier écran remplit la fenêtre : titre et chapeau visibles à l'arrivée */
@media (min-width:981px){
.hero{min-height:min(80vh,820px)}
}
/* ---------- Mobile / tablette : rail en tiroir, plan plein écran ---------- */
@media (max-width:980px){
.shell{grid-template-columns:minmax(0,1fr)}
.shell > .plan{grid-column:1}
.shell > .rail{position:fixed;height:100vh}
.plan > .bandeau{display:flex}
.hero{padding-top:clamp(24px,4vh,48px)}
}
/* assets/flux.css */
/* =========================================================================
WEBCRAFT — flux.css · 2026
Direction artistique « Le flux » : le métal liquide (mercure).
Nuit profonde, mercure clair, acier, éclat rare. Une couleur par pôle,
gardée seulement pour la lisibilité, le métal reste le sujet.
Écrit par Emma (DA). Hugo anime : voir le compte rendu pour les classes
et les sélecteurs. Aucune animation ici — prefers-reduced-motion = Hugo.
========================================================================= */
/* ---------------------------------------------------------------- 1. JETONS */
:root{
/* Nuit et métal */
--flux-nuit:#0A0B0E; /* fond principal, nuit profonde */
--flux-nuit-2:#0E1014; /* nuit légèrement relevée */
--flux-nuit-3:#141821; /* panneaux, cartes */
--flux-mercure:#DCE5F2; /* mercure clair : texte fort, métal */
--flux-mercure-2:#8A9AB2; /* mercure froid, secondaire */
--flux-acier:#5A6779; /* acier : filets, texte discret */
--flux-eclat:#F7FAFF; /* éclat : ne sert qu'au reflet, rare */
/* Pôles (lisibilité uniquement) */
--flux-pole-creation:#3D6BFF; /* création de site, bleu acier */
--flux-pole-marketing:#78FFB2; /* marketing / SEO, menthe sourde */
--flux-pole-studio:#AF26FA; /* studio / branding, violet */
/* Métal en dégradé */
--flux-metal:linear-gradient(112deg,#7F8CA1 0%,#DCE5F2 18%,#F7FAFF 30%,#AEBBCE 44%,#6E7B90 58%,#C9D5E5 72%,#F7FAFF 80%,#8A9AB2 100%);
--flux-metal-sombre:linear-gradient(120deg,#3A4351 0%,#8A9AB2 26%,#DCE5F2 46%,#5A6779 62%,#ADB9CA 82%,#3A4351 100%);
--flux-metal-plat:linear-gradient(96deg,#B9C6D8 0%,#F7FAFF 24%,#A6B4C7 46%,#DCE5F2 68%,#8A9AB2 100%);
--flux-veine:linear-gradient(90deg,transparent 0%,rgba(220,229,242,.55) 22%,rgba(247,250,255,.95) 50%,rgba(220,229,242,.55) 78%,transparent 100%);
--flux-voile:linear-gradient(180deg,rgba(10,11,14,0) 0%,rgba(10,11,14,.55) 55%,rgba(10,11,14,.94) 100%);
--flux-brume:radial-gradient(120% 90% at 12% -10%,rgba(138,154,178,.30) 0%,rgba(138,154,178,0) 58%),
radial-gradient(90% 80% at 96% 8%,rgba(220,229,242,.16) 0%,rgba(220,229,242,0) 62%),
radial-gradient(120% 120% at 50% 120%,rgba(90,103,121,.24) 0%,rgba(90,103,121,0) 60%);
/* Filets */
--flux-filets:rgba(220,229,242,.14);
--flux-filets-forts:rgba(220,229,242,.30);
--flux-ombre:0 30px 80px rgba(0,0,0,.62);
/* Accès rapide */
--flux-texte:#DCE5F2;
--flux-texte-doux:#8A9AB2;
/* Réglages du reflet (Hugo anime --flux-reflet-x et --flux-reflet-opacite) */
--flux-reflet-x:38%; /* position du reflet, en % */
--flux-reflet-opacite:0; /* 0 = reflet absent, 1 = pleine lumière */
/* Conversion des anciens jetons : tout ce qui les utilise passe en métal */
--noir:var(--flux-nuit);
--encre:var(--flux-eclat);
--gris-texte:var(--flux-mercure-2);
--gris-ligne:rgba(220,229,242,.16);
--surface:rgba(220,229,242,.05);
--surface-haute:rgba(220,229,242,.09);
--degrade:var(--flux-metal);
--degrade-texte:var(--flux-metal);
}
/* ------------------------------------------------- 2. CORPS ET SURFACES */
html{background:var(--flux-nuit)}
body{
background:var(--flux-nuit);
color:var(--flux-mercure);
}
::selection{background:rgba(220,229,242,.92);color:#0A0B0E}
/* Les CSS historiques peignent du papier clair (#FFF, #F6F4EF) :
on repasse tout l'écran en nuit, y compris les blocs sans classe connue. */
.plan,
.plan section,
.plan article,
.plan > *,
body > .plan{background-color:transparent}
.rail,
main{background-color:var(--flux-nuit)}
/* Le bandeau clients reste une respiration : nuit relevée + brume de métal. */
.confiance{
background-color:var(--flux-nuit-2)!important;
background-image:var(--flux-brume)!important;
background-repeat:no-repeat;
border-block:1px solid var(--flux-filets);
}
/* Filet de métal en tête de section (élément posé par Hugo : .flux-filet) */
.flux-filet{
display:block;
height:1px;
width:100%;
border:0;
background-image:var(--flux-veine);
opacity:.55;
}
/* Nappe de métal au changement de page (Hugo la fait passer :
il crée l'élément .flux-nappe et anime --flux-reflet-opacite) */
.flux-nappe{
position:fixed;
inset:0;
z-index:120;
pointer-events:none;
background-image:var(--flux-metal);
background-size:220% 100%;
background-position:var(--flux-reflet-x) 50%;
opacity:var(--flux-reflet-opacite);
mix-blend-mode:screen;
}
.flux-nappe::after{
content:"";
position:absolute;
inset:0;
background-image:var(--flux-brume);
mix-blend-mode:multiply;
}
/* --------------------------------------------------------- 3. TYPOGRAPHIE */
h1,h2,h3,h4,.hero__titre,.titre{color:var(--flux-eclat)!important}
.chapeau,p,.carte p,.carte-service p{color:var(--flux-mercure-2)}
/* Titres déjà peints en foncé par refonte.css (--wc-encre) : on rattrape".". */
h1,h2,h3,h4{color:var(--flux-eclat)!important}
/* Titre en mercure : le dégradé est découpé dans les lettres.
Hugo peut animer --flux-reflet-x sur .titre-mercure pour faire glisser
le reflet dans le mot (background-position suit la variable). */
.titre-mercure,
.flux-metal-texte,
.flux-titre-metal{
background-image:var(--flux-metal);
background-size:260% 100%;
background-position:var(--flux-reflet-x) 50%;
-webkit-background-clip:text;
background-clip:text;
color:transparent!important;
-webkit-text-fill-color:transparent;
text-shadow:none;
}
/* Repli lisibilité : si le dégradé n'est pas supporté, le texte reste clair. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
.titre-mercure,.flux-metal-texte,.flux-titre-metal{color:var(--flux-eclat)!important;-webkit-text-fill-color:currentColor}
}
/* Filet métal qui souligne un titre */
.titre-filets{
display:inline-block;
padding-bottom:.22em;
background-image:var(--flux-veine);
background-repeat:no-repeat;
background-position:0 100%;
background-size:100% 2px;
}
/* Le mot en italique du héros (em) reçoit le métal, pas une couleur criarde */
.hero__titre em,
.titre-heros em{
font-style:normal;
background-image:var(--flux-metal);
background-size:260% 100%;
background-position:var(--flux-reflet-x) 50%;
-webkit-background-clip:text;
background-clip:text;
color:transparent!important;
-webkit-text-fill-color:transparent;
}
/* Pastilles et mentions */
.pastille{
color:var(--flux-mercure);
border:1px solid var(--flux-filets-forts);
background:rgba(220,229,242,.045);
}
/* --------------------------------------------------------------- 4. BOUTONS */
/* Primaire : pastille de mercure, texte nuit — contraste AA garanti.
Cible : les boutons du héros et le CTA du rail (classes existantes). */
.flux-cta,
.hero__actions a:first-child,
a.rail__cta,
.rail__cta,
.bandeau__bouton{
position:relative;
overflow:hidden;
display:inline-flex;
align-items:center;
gap:.6em;
padding:.92em 1.6em;
border-radius:999px;
border:1px solid rgba(247,250,255,.55);
background-image:var(--flux-metal);
background-size:220% 100%;
background-position:var(--flux-reflet-x) 50%;
background-color:#DCE5F2;
color:#0A0B0E!important;
font-weight:700;
letter-spacing:-.01em;
box-shadow:0 14px 34px rgba(0,0,0,.55),inset 0 1px 0 rgba(247,250,255,.7);
}
/* Reflet qui passe : une bande claire qui traverse le bouton au survol.
Hugo peut aussi la piloter au scroll avec .flux-reflet. */
.flux-cta::after,
.bouton--primaire::after,
.rail__cta::after{
content:"";
position:absolute;
top:-40%;
bottom:-40%;
left:calc(var(--flux-reflet-x) - 18%);
width:36%;
background-image:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
transform:skewX(-18deg);
opacity:calc(.12 + var(--flux-reflet-opacite) * .55);
pointer-events:none;
}
/* Secondaire : contour de métal sur nuit */
.flux-cta--secondaire,
.flux-cta--secondaire,
.bouton--secondaire{
display:inline-flex;
align-items:center;
gap:.6em;
padding:.9em 1.55em;
border-radius:999px;
border:1px solid var(--flux-filets-forts);
background:rgba(220,229,242,.03);
color:var(--flux-eclat)!important;
font-weight:600;
box-shadow:inset 0 1px 0 rgba(247,250,255,.10);
}
.bouton--fantome{
display:inline-flex;
align-items:center;
gap:.6em;
padding:.9em 1.55em;
border-radius:999px;
border:1px solid var(--flux-filets-forts);
background:rgba(220,229,242,.03);
color:var(--flux-eclat)!important;
font-weight:600;
box-shadow:inset 0 1px 0 rgba(247,250,255,.10);
}
/* Lien texte : soulignement de métal */
.flux-lien{
display:inline-flex;
align-items:center;
gap:.45em;
color:var(--flux-eclat)!important;
font-weight:600;
padding-bottom:2px;
background-image:var(--flux-veine);
background-repeat:no-repeat;
background-position:0 100%;
background-size:100% 1px;
}
/* ---------------------------------------------- 5. CARTES ET SURFACES MÉTAL */
.carte,
.carte-service,
.carte-projet,
.valeur,
.bloc-carte,
.carte--verre{
position:relative;
background-color:rgba(20,24,33,.86);
background-image:
linear-gradient(180deg,rgba(220,229,242,.07),rgba(220,229,242,0) 46%),
var(--flux-brume);
border:1px solid var(--flux-filets);
border-radius:var(--rayon,22px);
box-shadow:var(--flux-ombre);
}
/* Arête de métal : le liseré supérieur des cartes */
.carte::before,
.carte-service::before,
.carte-projet::before,
.valeur::before{
content:"";
position:absolute;
inset:0 0 auto 0;
height:1px;
border-radius:inherit;
background-image:var(--flux-veine);
opacity:.75;
pointer-events:none;
}
/* Goutte de mercure : petit volume posé sur une carte (à animer par Hugo) */
.flux-goutte{
display:block;
width:56%;
max-width:220px;
aspect-ratio:2.4/1;
margin:-.6em auto -.4em;
border-radius:50% 50% 46% 54% / 62% 58% 42% 38%;
background-image:var(--flux-metal);
background-size:200% 200%;
background-position:var(--flux-reflet-x) 40%;
box-shadow:
inset 0 -10px 22px rgba(10,11,14,.55),
inset 0 8px 18px rgba(247,250,255,.55),
0 24px 48px rgba(0,0,0,.55);
opacity:.92;
}
/* Icônes de service : plus de dégradé violet → bleu → menthe, du métal. */
.carte-service__icone,
.valeur__icone{
background-image:var(--flux-metal-sombre)!important;
border:1px solid rgba(247,250,255,.35);
box-shadow:0 14px 26px rgba(0,0,0,.55),inset 0 1px 0 rgba(247,250,255,.55);
color:#0A0B0E!important;
}
.carte-service__icone svg,
.valeur__icone svg{stroke:#0A0B0E;color:#0A0B0E}
/* --------------------------------------------------------------- 6. RAIL */
.rail{
background-color:var(--flux-nuit)!important;
background-image:
linear-gradient(180deg,rgba(220,229,242,.05) 0%,rgba(220,229,242,0) 30%),
radial-gradient(90% 60% at 0% 0%,rgba(138,154,178,.18),transparent 70%),
none!important;
border-right:1px solid var(--flux-filets)!important;
}
.rail a,.rail button,.rail small,.rail span{color:var(--flux-mercure)}
.rail a:hover,.rail a:focus-visible{color:var(--flux-eclat)}
.rail__lieu,.rail small{color:var(--flux-mercure-2)!important}
.rail__cta{border-radius:999px}
/* Bandeau mobile */
.bandeau{
background-color:rgba(10,11,14,.92)!important;
border-bottom:1px solid var(--flux-filets);
backdrop-filter:blur(14px);
}
/* -------------------------------------------------------- 7. LOGO MERCURE */
/* Le logo garde sa forme : on n'utilise que mask-image + background.
--flux-logo : chemin du PNG blanc (masque). Change la source pour
passer du logo blanc au logo noir selon le fond. */
.flux-logo{
display:inline-block;
width:var(--flux-logo-largeur,188px);
aspect-ratio:898/138;
background-image:var(--flux-metal);
background-size:260% 100%;
background-position:var(--flux-reflet-x) 50%;
-webkit-mask-image:var(--flux-logo);
mask-image:var(--flux-logo);
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-position:center;
mask-position:center;
-webkit-mask-size:contain;
mask-size:contain;
filter:drop-shadow(0 0 18px rgba(220,229,242,.16));
}
/* Variante logo noir sur fond clair (si Hugo en a besoin) */
.flux-logo--sombre{background-image:var(--flux-metal-sombre)}
/* Le SVG animé livré (reflet déjà en mouvement, géré par son propre SMIL/CSS) */
.flux-logo-anime{
display:block;
width:var(--flux-logo-largeur,188px);
height:auto;
}
/* Voile de reflet par-dessus le logo : Hugo le fait passer au changement de page */
.flux-logo-reflet{
position:absolute;
inset:0;
pointer-events:none;
background-image:linear-gradient(105deg,transparent 30%,rgba(247,250,255,.85) 50%,transparent 70%);
background-size:260% 100%;
background-position:var(--flux-reflet-x) 50%;
opacity:var(--flux-reflet-opacite);
mix-blend-mode:screen;
}
/* --------------------------------------------------- 8. IMAGES ET CADRES */
/* Toute image de projet : posée sur nuit, liseré de métal, ombre profonde. */
.flux-cadre{
position:relative;
border-radius:calc(var(--rayon,22px) + 6px);
padding:10px;
background-image:linear-gradient(160deg,rgba(220,229,242,.16),rgba(220,229,242,.03) 40%,rgba(10,11,14,.9));
border:1px solid var(--flux-filets);
box-shadow:var(--flux-ombre);
overflow:hidden;
}
.flux-cadre img{
display:block;
width:100%;
height:auto;
border-radius:calc(var(--rayon,22px) + 2px);
background:var(--flux-nuit-3);
}
/* Reflet de métal qui glisse sur le cadre (Hugo anime l'opacité) */
.flux-cadre::after{
content:"";
position:absolute;
inset:0;
background-image:linear-gradient(118deg,transparent 38%,rgba(247,250,255,.20) 50%,transparent 62%);
background-size:220% 100%;
background-position:var(--flux-reflet-x) 50%;
opacity:var(--flux-reflet-opacite);
pointer-events:none;
}
/* LES CADRES D'ÉCRAN : fenêtre d'ordinateur + téléphone, sur fond sombre.
Structure posée par Hugo :
![logo client]()
*/
.flux-ecran{
position:relative;
display:flex;
align-items:flex-end;
justify-content:center;
gap:clamp(10px,1.6vw,26px);
padding:clamp(22px,3vw,46px) clamp(14px,2.4vw,38px) clamp(14px,2vw,30px);
border-radius:calc(var(--rayon,22px) + 10px);
background-color:var(--flux-nuit);
background-image:
radial-gradient(80% 60% at 50% 0%,rgba(138,154,178,.22),rgba(138,154,178,0) 62%),
radial-gradient(60% 50% at 82% 88%,rgba(220,229,242,.14),transparent 60%),
linear-gradient(180deg,#101319 0%,#0A0B0E 72%);
border:1px solid var(--flux-filets);
box-shadow:var(--flux-ombre);
overflow:hidden;
}
/* nappe de métal discrète sous les écrans */
.flux-ecran::before{
content:"";
position:absolute;
left:-10%;
right:-10%;
bottom:-38%;
height:62%;
border-radius:50% 50% 0 0 / 60% 60% 0 0;
background-image:linear-gradient(180deg,rgba(220,229,242,.22),rgba(220,229,242,.02) 60%,transparent 100%);
filter:blur(2px);
pointer-events:none;
}
.flux-ecran__ordi{
position:relative;
z-index:1;
flex:1 1 auto;
min-width:0;
border-radius:12px;
padding:10px 10px 22px;
background-image:linear-gradient(180deg,#232A35 0%,#141821 58%,#0E1014 100%);
border:1px solid rgba(220,229,242,.28);
box-shadow:0 26px 60px rgba(0,0,0,.7),inset 0 1px 0 rgba(247,250,255,.32);
}
.flux-ecran__ordi img{border-radius:6px;display:block;width:100%;height:auto}
.flux-ecran__barre{
display:block;
height:14px;
margin-bottom:8px;
border-radius:99px;
background-image:radial-gradient(circle at 8px 50%,rgba(220,229,242,.55) 0 2.5px,transparent 3px),
radial-gradient(circle at 20px 50%,rgba(220,229,242,.40) 0 2.5px,transparent 3px),
radial-gradient(circle at 32px 50%,rgba(220,229,242,.28) 0 2.5px,transparent 3px),
linear-gradient(90deg,rgba(220,229,242,.10),rgba(220,229,242,.03));
background-repeat:no-repeat;
}
.flux-ecran__mobile{
position:relative;
z-index:2;
flex:0 0 clamp(84px,11vw,150px);
margin-left:clamp(-46px,-4vw,-18px);
margin-bottom:clamp(-6px,-.5vw,0px);
border-radius:clamp(16px,1.6vw,26px);
padding:6px;
background-image:linear-gradient(165deg,#2C3441 0%,#12161D 46%,#0A0B0E 100%);
border:1px solid rgba(220,229,242,.34);
box-shadow:0 22px 50px rgba(0,0,0,.75),inset 0 1px 0 rgba(247,250,255,.4);
}
.flux-ecran__mobile img{
border-radius:clamp(12px,1.2vw,20px);
display:block;
width:100%;
height:auto;
}
/* Pastille du logo client sur le cadre */
.flux-ecran__client{
position:absolute;
z-index:3;
top:clamp(10px,1.2vw,18px);
left:clamp(10px,1.2vw,18px);
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 14px;
border-radius:999px;
background-color:rgba(10,11,14,.86);
border:1px solid var(--flux-filets-forts);
backdrop-filter:blur(8px);
}
.flux-ecran__client img{height:16px;width:auto;display:block}
/* Bandeau de logos clients : métal monochrome, jamais des couleurs criardes */
.bandeau-logos__piste img,
.confiance img{
filter:grayscale(1) brightness(0) invert(.86)!important;
opacity:.62!important;
transition:opacity .35s ease,filter .35s ease;
}
.bandeau-logos__piste img:hover,
.confiance img:hover{opacity:.95!important}
/* ------------------------------------------------------ 9. PÔLES COULEUR */
/* Une couleur par pôle, uniquement en liseré/soulignement : la couleur
ne porte jamais l'information seule, le libellé reste écrit. */
.flux-pole{padding-left:.7em;border-left:2px solid var(--flux-acier)}
.flux-pole--creation{border-left-color:var(--flux-pole-creation)}
.flux-pole--marketing{border-left-color:var(--flux-pole-marketing)}
.flux-pole--studio{border-left-color:var(--flux-pole-studio)}
/* ---------------------------------------------------- 10. FORMULAIRES */
input,textarea,select{
background-color:rgba(220,229,242,.04);
border:1px solid var(--flux-filets-forts);
color:var(--flux-eclat);
border-radius:12px;
}
input::placeholder,textarea::placeholder{color:rgba(138,154,178,.9)}
label{color:var(--flux-mercure)}
/* Pied de page : nappe de métal très sourde, texte en mercure */
footer,.pied,.pied-de-page{
background-color:var(--flux-nuit-2);
background-image:linear-gradient(180deg,transparent,rgba(220,229,242,.06));
border-top:1px solid var(--flux-filets);
}
/* assets/flux-hero.css */
/* =========================================================================
WEBCRAFT — flux-hero.css · 2026 · refonte du HERO seul (Emma, DA)
« Le flux » : une seule matière, un seul regard.
Ordre de lecture imposé : LA MATIÈRE (le pli de mercure) → LE TITRE → le CTA.
Aucune animation ici : Hugo anime. Les classes et variables prévues pour
lui sont listées en fin de fichier (section 9).
Nuit #0A0B0E · mercure #DCE5F2 · mercure froid #8A9AB2 · éclat #F7FAFF
========================================================================= */
/* ---------------------------------------------------------- 1. CADRE DU HERO */
/* Le hero prend la hauteur de l'écran sous le bandeau, sans jamais déborder.
dvh = la vraie hauteur sur mobile (barre d'URL comprise). */
.hero{
--hero-h:clamp(620px,calc(100svh - var(--h-bandeau,88px)),1080px);
position:relative;
isolation:isolate;
min-height:var(--hero-h);
display:grid;
align-items:center;
padding:clamp(56px,7vh,96px) 0 clamp(48px,6vh,88px);
background:var(--flux-nuit,#0A0B0E);
overflow:hidden;
/* Le hero est la seule zone de la page où l'on voit la matière nue. */
background-image:none!important;
}
/* ------------------------------------------------------ 2. LA MATIÈRE (fond) */
/* Une macro de chrome réel, cadrée large, posée en plein fond. Elle est
dégradée sur ses bords pour se fondre dans la nuit : on ne doit jamais
voir de « bord d'image », seulement du métal qui sort du noir. */
.hero__matiere{
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
background-color:var(--flux-nuit,#0A0B0E);
background-image:url("/assets/images/ia-mercure-nappe-liquide.png");
background-size:cover;
background-position:74% 50%;
/* La matière occupe TOUT le cadre (aucun bord d'image) : elle sort du noir,
elle n'est jamais posée dessus. Seul le bas se fond dans la nuit. */
-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 72%,rgba(0,0,0,.55) 88%,transparent 100%);
mask-image:linear-gradient(to bottom,#000 0,#000 72%,rgba(0,0,0,.55) 88%,transparent 100%);
filter:contrast(1.22) saturate(.8) brightness(1.02);
opacity:.95;
}
/* Voile de nuit : garantit la lisibilité du titre quoi qu'il arrive sous lui. */
.hero__matiere::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(92deg,rgba(10,11,14,.88) 0%,rgba(10,11,14,.62) 26%,rgba(10,11,14,.22) 48%,rgba(10,11,14,0) 66%),
radial-gradient(90% 70% at 50% 125%,rgba(10,11,14,.9),transparent 72%);
}
/* Reflet rare : une lueur froide qui frôle la crête du métal (éclat #F7FAFF).
Hugo : translate selon la souris / le scroll → voir section 9. */
.hero__lueur{
position:absolute;
z-index:0;
top:-14%;
right:-10%;
width:62%;
height:78%;
pointer-events:none;
background:radial-gradient(closest-side,rgba(247,250,255,.20),rgba(220,229,242,.07) 46%,transparent 72%);
filter:blur(28px);
opacity:.85;
transform:translate3d(var(--flux-lueur-x,0px),var(--flux-lueur-y,0px),0);
}
/* Filet de métal : la couture entre le hero et la section suivante. */
.hero__couture{
position:absolute;
z-index:3;
left:0;right:0;bottom:0;
height:1px;
background:linear-gradient(90deg,transparent,rgba(220,229,242,.05) 12%,rgba(247,250,255,.55) 50%,rgba(220,229,242,.05) 88%,transparent);
}
/* La goutte : accrochée à la couture, elle tombe dans la section suivante.
Hugo anime sa chute ; ici, on la dessine juste, crédible : chrome + reflet. */
.hero__goutte{
position:absolute;
z-index:4;
left:50%;
bottom:-1px;
width:14px;
height:22px;
margin-left:-7px;
border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
background:
radial-gradient(60% 46% at 38% 30%,#FFFFFF 0,rgba(255,255,255,.9) 14%,rgba(220,229,242,.65) 32%,rgba(138,154,178,.35) 58%,rgba(10,11,14,.9) 100%);
box-shadow:0 0 12px rgba(247,250,255,.5),0 6px 18px rgba(0,0,0,.8);
transform:translateY(var(--flux-goutte-y,0px));
}
/* ------------------------------------------------------------- 3. LA GRILLE */
.hero > .enveloppe{
position:relative;
z-index:2;
width:100%;
}
/* Composition asymétrique assumée : le titre part de la gauche, déborde vers
la matière, et le bloc d'appui descend à droite comme une légende de photo. */
/* RECOMPOSITION 23/10 (Emma) — le bandeau de spécialités et le titre étaient
posés sur la MÊME grid-area, tous deux en align-self:end : ils se
chevauchaient à l'écran. Trois rangées réelles désormais, chacune à sa
hauteur, dans l'ordre de lecture : SPÉCIALITÉS → TITRE → CHAPEAU → CTA.
Une seule chose forte à regarder : le titre dans la matière. */
.hero .hero__grille{
display:grid!important;
grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr)!important;
grid-template-rows:auto auto auto auto;
grid-template-areas:
"spe appui"
"titre appui"
"chapeau appui"
"actions appui";
align-items:start;
gap:0 clamp(30px,4vw,80px)!important;
}
.hero .hero__texte{display:contents!important}
/* Le bandeau de spécialités : petit, froid, haut de composition, jamais
collé au titre (marge basse explicite). */
.hero .pastille{
grid-area:spe!important;
align-self:end;
margin:0 0 clamp(22px,3.2vh,44px)!important;
/* Surtitre sur une ligne, sans cadre : un filet court centré sur le texte (23/10, Raphaël). */
display:inline-flex!important;align-items:center!important;gap:14px!important;
border:0!important;background:none!important;padding:0!important;
white-space:nowrap!important;
font-size:12px!important;letter-spacing:.14em!important;
}
.hero .pastille::before{
width:28px!important;height:1px!important;flex:none!important;
margin:0!important;border-radius:0!important;
background:#DCE5F2!important;
}
.hero .hero__titre{
grid-area:auto!important;
grid-row:2!important;
align-self:start;
margin:0!important;
}
.hero .chapeau{
grid-area:auto!important;
grid-row:3!important;
align-self:start;
/* marge : voir la seconde règle .hero .chapeau plus bas (une seule valeur fait foi) */
}
.hero .hero__actions{
grid-area:auto!important;
grid-row:4!important;
margin:clamp(26px,3.4vh,42px) 0 0!important;
align-self:start;
}
.hero .hero__note{
grid-area:appui!important;
align-self:end;
margin:0!important;
}
/* --------------------------------------------------------- 4. LE TITRE HÉROS */
/* Échelle démesurée, interlignage serré, lettrage resserré : c'est le titre
qui tient le rôle de l'image. Il est calé sur la gauche du cadre, et son
dernier mot, en mercure, monte dans la matière. */
/* Les deux lignes animables posées par Hugo : bloc franc, interlignage
hérité du h1 (0,84), et surtout aucune découpe de fond parasite qui
viendrait casser le dégradé du mot métal porté par l' à l'intérieur. */
.hero .hero__titre .hero__ligne{
display:block!important;
/* Un interlignage RÉEL (>1) : à 0,84 les lignes animées se touchaient et
les descendantes venaient sous la ligne suivante. Le titre reste dense
(0,96) sans jamais déborder de sa boîte. */
line-height:0.96!important;
letter-spacing:inherit!important;
background:none!important;
-webkit-text-fill-color:currentColor;
}
/* Le fil du texte ne doit pas passer à la ligne au milieu de « coulé
sur-mesure » : chaque span est une ligne, le balance du h1 n'a plus lieu d'être. */
.hero .hero__titre{text-wrap:nowrap!important}
.hero .hero__titre{
margin:0!important;
position:relative;
z-index:2;
font-family:"Plus Jakarta Sans",system-ui,sans-serif!important;
font-weight:800!important;
font-size:clamp(46px,5.6vw,100px)!important; /* réduit (Raphaël, 23/10) : titre moins massif */
line-height:1!important;
letter-spacing:-.022em!important; /* -0,045 em collait le r et le t (Raphaël, 23/10) */
color:var(--flux-eclat,#F7FAFF)!important;
text-shadow:0 18px 60px rgba(0,0,0,.55);
}
/* Le mot « flux » : c'est LUI qui est pris dans le métal, pas une italique. */
.hero .hero__titre em,
.hero .hero__titre .flux-mot{
font-style:normal!important;
display:inline-block;
background-image:linear-gradient(96deg,#C7D3E4 0%,#F7FAFF 18%,#FFFFFF 32%,#DCE5F2 48%,#9FB0C7 64%,#F7FAFF 82%,#B6C4D8 100%);
/* Découpe peinte DANS le mot : le passage en (Hugo) ne la touche pas,
le reflet continue de glisser via --flux-reflet-x. */
background-size:220% 100%;
background-position:var(--flux-reflet-x,30%) 50%;
-webkit-background-clip:text!important;
background-clip:text!important;
-webkit-text-fill-color:transparent!important;
color:transparent!important;
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
filter:drop-shadow(0 6px 34px rgba(247,250,255,.22));
}
/* Le reflet doit se VOIR glisser sur le métal : on lui redonne de la course
et un éclat plus affirmé (Hugo l'anime de 30 % à 70 %). */
.hero .hero__titre .flux-mot{
background-size:300% 100%!important;
background-position:var(--flux-reflet-x,30%) 50%!important;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
.hero .hero__titre em,.hero .hero__titre .flux-mot{-webkit-text-fill-color:currentColor;color:var(--flux-mercure,#DCE5F2)!important}
}
/* ------------------------------------------------------------ 5. LE CHAPEAU */
.hero .chapeau{
align-self:end;
max-width:34ch!important;
margin:32px 0 0!important; /* respiration sous le titre (grille de 8 px) */
font-size:clamp(15px,1.02vw,17.5px)!important;
line-height:1.55!important;
color:rgba(232,240,250,.94)!important;
border-left:1px solid rgba(220,229,242,.28);
padding-left:clamp(14px,1.1vw,20px);
text-shadow:0 8px 30px rgba(0,0,0,.7);
}
/* La ligne d'identité passe sous le chapeau, en petites capitales de métal. */
.hero .hero__note{
grid-area:appui;
align-self:start;
display:flex;
flex-wrap:wrap;
gap:.4em .9em;
margin:0!important;
font-size:12px!important;
letter-spacing:.14em;
text-transform:uppercase;
color:rgba(138,154,178,.95)!important;
}
/* Mentions posées sur la vidéo : pastille sombre floutée, lisible même sur le mercure le plus clair
(NN/g, texte sur image : fond semi-opaque + flou ; WCAG 4,5:1). */
.hero .hero__note span{
display:inline-flex;align-items:center;gap:.55em;
padding:6px 12px!important;border-radius:999px;
background:rgba(8,9,12,.62)!important;
-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);
border:1px solid rgba(220,229,242,.12);
color:#DCE5F2!important;
}
.hero .hero__note span::before{
content:"";
width:5px;height:5px;border-radius:50%;
background:#DCE5F2;
}
/* ---------------------------------------------------------- 6. LES ACTIONS */
.hero .hero__actions{gap:12px!important;flex-wrap:wrap}
/* CTA principal : une pastille de métal, pas un aplat de couleur. */
.hero .bouton{
border-radius:999px!important;
padding:1em 1.7em!important;
font-size:15px!important;
font-weight:700!important;
letter-spacing:-.01em;
border:1px solid rgba(247,250,255,.65)!important;
background-image:linear-gradient(100deg,#8A9AB2 0%,#DCE5F2 26%,#F7FAFF 46%,#C7D3E4 66%,#8A9AB2 100%)!important;
background-size:200% 100%!important;
background-position:var(--flux-reflet-x,20%) 50%!important;
color:#0A0B0E!important;
box-shadow:0 18px 44px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.85)!important;
}
.hero .bouton--ligne{
background-image:none!important;
background-color:rgba(220,229,242,.05)!important;
color:var(--flux-eclat,#F7FAFF)!important;
border:1px solid rgba(220,229,242,.34)!important;
box-shadow:inset 0 1px 0 rgba(247,250,255,.12)!important;
backdrop-filter:blur(6px);
}
/* --------------------------------------------- 7. SORTIES ÉCARTÉES DU HERO */
/* Les deux captures de sites et la tache ne sont plus dans le hero : ce sont
deux « choses à regarder », et elles volaient le regard au titre. On les
neutralise ici au cas où le balisage serait rétabli. */
.hero__scene,.hero__tache{display:none!important}
/* --------------------------------------------------------- 8. RESPONSIVE */
/* (Design à 1728 px ; on garde seulement le hero sur deux colonnes jusqu'à
une largeur raisonnable, Hugo affine la suite en recette.) */
@media (max-width:1080px){
/* Une seule colonne : on garde le MÊME ordre vertical qu'en grand écran,
sinon le bandeau retombait sur la case du titre (chevauchement). */
.hero .hero__grille{
grid-template-columns:1fr!important;
grid-template-rows:auto!important;
grid-template-areas:none!important;
gap:0!important;
}
.hero .pastille{grid-area:auto!important;margin:0 0 clamp(16px,2.4vh,26px)!important}
.hero .hero__titre{grid-row:auto!important}
/* Sous 1080 px, « coulé sur-mesure » ne tient plus d'un seul trait : le
nowrap hérité du grand écran faisait déborder le titre de 154 px. Le
titre se centre dans la colonne et garde son interlignage réel. */
.hero .hero__titre{text-wrap:balance!important;font-size:clamp(38px,9.4vw,84px)!important}
/* max-width en ch, et jamais plus large que la colonne : à 390 px le 34ch
du grand écran dépassait de 33 px. */
.hero .chapeau{
grid-area:auto!important;grid-row:auto!important;align-self:start!important;
max-width:min(52ch,100%)!important;margin-top:clamp(18px,2.4vh,30px)!important;
}
.hero .hero__note{
grid-area:auto!important;grid-row:auto!important;align-self:start!important;
max-width:100%!important;margin-top:clamp(18px,2.4vh,28px)!important;
overflow-wrap:anywhere;
}
.hero .hero__actions{grid-area:auto!important;grid-row:auto!important;max-width:100%!important}
.hero__matiere{background-position:70% 30%;opacity:.7}
.hero__lueur{width:90%;right:-25%;opacity:.6}
}
@media (prefers-reduced-motion:reduce){
.hero__lueur{transform:none}
}
/* =========================================================================
9. POUR HUGO — CE QUE JE PRÉPARE, CE QU'IL ANIME
-------------------------------------------------------------------------
Variables pilotables en JS / au scroll (elles sont toutes lues en CSS) :
--flux-reflet-x : position du reflet dans le mot « flux » (0% → 100%)
--flux-lueur-x/y : déplacement de la lueur froide (px)
--flux-goutte-y : chute de la goutte sous la couture (px)
Classes disponibles, sans effet tant qu'Hugo n'ajoute pas de JS :
.hero__matiere (fond) — à translater très lentement au scroll (parallaxe
de 4 à 6 %, pas plus : c'est un fond, pas un carrousel)
.hero__lueur (reflet) — suivre la souris avec une inertie de ~0,08
.hero__goutte (goutte) — au premier scroll : translateY(0 → 42px) en
620 ms cubic-bezier(.34,1.4,.64,1), puis fondu.
Le balisage attendu est dans index.html (section « HERO »).
========================================================================= */
/* assets/flux-hero-mouvement.css */
/* =========================================================================
WEBCRAFT — flux-hero-mouvement.css · 2026 · Hugo (développeur)
MOUVEMENT du hero uniquement. Aucun dessin : Emma dessine (flux-hero.css),
ce fichier ne fait que déplacer et estomper (transform / opacity).
Chargé APRÈS flux-hero.css : il peut donc en corriger l'état figé.
Règle d'or : sans JS, rien n'est masqué — on ne cache que si la mécanique
a démarré (html.mvt-pret), et jamais sous prefers-reduced-motion.
========================================================================= */
/* ------------------------------------------------------ 1. ARRIVÉE (fond) */
/* Le fond matière part de scale(1.06) et d'une opacité 0, puis se pose.
L'échelle est portée par une translation compensée : la parallaxe lisible
en JS reste un translateY pur, sans écraser le scale d'arrivée. */
html.mvt-pret .hero__matiere{
animation:hero-matiere 1.4s cubic-bezier(.22,.61,.36,1) both;
will-change:transform,opacity;
}
@keyframes hero-matiere{
from{opacity:0;transform:scale(1.06)}
to{opacity:1;transform:scale(1)}
}
/* ------------------------------------------------- 2. TITRE, LIGNE À LIGNE */
/* Le h1 contient « Le digital,
coulé sur-mesure » : on anime ses deux
lignes indépendamment (le
n'est pas animable, d'où le span). */
.hero__titre .hero__ligne{
display:block;
/* la découpe du dégradé reste sur les lettres : le mot métal continue de
fonctionner puisque la découpe est peinte à l'intérieur du span */
}
html.mvt-pret .hero__titre .hero__ligne{
animation:hero-ligne 900ms cubic-bezier(.22,.61,.36,1) both;
will-change:transform,opacity;
}
html.mvt-pret .hero__titre .hero__ligne:nth-child(2){animation-delay:220ms}
@keyframes hero-ligne{
from{opacity:0;transform:translate3d(0,26px,0)}
to{opacity:1;transform:translate3d(0,0,0)}
}
/* Le reflet du mot métal glisse UNE SEULE FOIS, sur la variable d'Emma. */
/* (--flux-reflet-x est aussi lue par le CTA en CSS : on ne l'anime donc que
sur le mot, via une variable locale au mot.) */
html.mvt-pret .hero__titre .flux-mot{
animation:hero-reflet-mot 2.2s cubic-bezier(.33,0,.2,1) 340ms both;
}
@keyframes hero-reflet-mot{
from{--flux-reflet-x:30%}
to{--flux-reflet-x:70%}
}
/* ------------------------------------------- 3. GOUTTE, PREMIER SCROLL */
/* La goutte reste accrochée à la couture tant qu'on n'a pas défilé ;
au premier défilement elle chute de 42 px (rebond 1.4) puis s'efface. */
.hero__goutte{will-change:transform,opacity}
.hero .hero__couture.est-decrochee .hero__goutte{
animation:hero-goutte 620ms cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes hero-goutte{
0%{transform:translate3d(0,0,0);opacity:1}
72%{transform:translate3d(0,42px,0);opacity:.9}
100%{transform:translate3d(0,42px,0);opacity:0}
}
/* ------------------------------------------------ 4. SURVOLS (souris fine) */
/* Le CTA principal garde son fond métal ; on déplace seulement le reflet.
Le secondaire s'éclaircit en verre fumé. */
@media (hover:hover) and (pointer:fine){
.hero .bouton,
.hero .bouton--ligne,
.hero__titre .flux-mot{
transition:
--flux-reflet-x .6s cubic-bezier(.33,0,.2,1),
background-color .6s cubic-bezier(.33,0,.2,1),
border-color .6s cubic-bezier(.33,0,.2,1),
box-shadow .6s cubic-bezier(.33,0,.2,1);
}
.hero .bouton{--flux-reflet-x:30%}
.hero .bouton:hover,
.hero .bouton:focus-visible{--flux-reflet-x:78%}
.hero__titre .flux-mot:hover{--flux-reflet-x:86%}
.hero .bouton--ligne:hover,
.hero .bouton--ligne:focus-visible{
background-color:rgba(220,229,242,.10)!important;
}
}
/* ---------------------------------------------- 5. LUEUR QUI SUIT LA SOURIS */
/* .hero__lueur est déjà dessinée par Emma ; ici on la rend piloteable et
on n'autorise AUCUNE transition (l'inertie est calculée en JS). */
.hero__lueur{
transform:translate3d(var(--flux-lueur-x,0px),var(--flux-lueur-y,0px),0);
will-change:transform;
transition:none!important;
}
/* ============================== 6. PRÉPARÉ, NON ACTIVÉ AILLEURS ============ */
/* Filet de métal entre sections et nappe de changement de page : posés pour
la suite, ils ne s'appliquent que si le balisage apparaît (aucune autre
section n'est modifiée ici). */
/* Filet : un trait qui se déploie au défilement, une fois entré en vue. */
.flux-filet{
transform-origin:0 50%;
transform:scaleX(var(--flux-filet-x,1));
will-change:transform;
}
html.mvt-pret .flux-filet{--flux-filet-x:0}
html.mvt-pret .flux-filet.est-tendu{
--flux-filet-x:1;
transition:--flux-filet-x 900ms cubic-bezier(.22,.61,.36,1);
}
/* Nappe de métal : elle couvre l'écran, on n'anime que son opacité. */
html .flux-nappe{
opacity:0;
will-change:opacity;
transition:opacity 260ms linear;
}
html.nappe-active .flux-nappe{opacity:1}
/* ================================= 7. MOUVEMENT RÉDUIT : TOUT FIGÉ ========== */
/* Obligatoire : la goutte reste accrochée, aucun parallaxe, aucun reflet
animé, aucun survol mobile. L'état final est posé d'emblée. */
@media (prefers-reduced-motion:reduce){
html.mvt-pret .hero__matiere,
html.mvt-pret .hero__titre .hero__ligne,
html.mvt-pret .hero__titre .flux-mot,
.hero .hero__couture.est-decrochee .hero__goutte{
animation:none!important;
}
.hero__matiere,
html.mvt-pret .hero__matiere{opacity:1;transform:none!important}
.hero__titre .hero__ligne,
html.mvt-pret .hero__titre .hero__ligne{opacity:1;transform:none!important}
.hero__titre .flux-mot{--flux-reflet-x:50%}
.hero__goutte{transform:none!important;opacity:1!important}
.hero__lueur{transform:none!important}
.hero .bouton,
.hero .bouton--ligne{transition:none!important}
.hero .bouton:hover,
.hero .bouton:focus-visible{--flux-reflet-x:30%}
.hero__titre .flux-mot:hover{--flux-reflet-x:50%}
html.mvt-pret .flux-filet{--flux-filet-x:1}
html .flux-nappe{transition:none!important}
}
.bandeau-logos__piste{display:flex;flex-wrap:wrap;overflow:hidden}.bandeau-logos__item{white-space:normal;min-width:0}
/* assets/flux-hero-ajustements.css */
/* =========================================================================
WEBCRAFT — flux-hero-ajustements.css · 2026 · Emma (DA)
Chargé APRÈS flux-hero.css ET flux-hero-mouvement.css.
Trois choses seulement : du métal qui se lit comme du métal, un titre qui
reste le seul point fort, et des contrastes réparés hors du hero.
Aucune structure, aucune animation : Hugo garde la main sur le mouvement.
========================================================================= */
/* ------------------------------------------- 1. LA MATIÈRE, PLUS « MÉTAL » */
/* La nappe de mercure est la plus tranchante de nos images : on la cale à
droite (sous le regard), on pousse le contraste local et on laisse la
gauche dans la nuit pour que le titre respire. */
.hero__matiere{
filter:contrast(1.5) saturate(.55) brightness(1.04)!important;
opacity:.96!important;
}
/* L'arête : le trait de lumière qui fait lire « métal » et pas « dégradé ».
On garde le voile de nuit à gauche (lisibilité) et on ajoute un pli net. */
.hero__matiere::after{
background:
linear-gradient(92deg,rgba(10,11,14,.94) 0%,rgba(10,11,14,.78) 30%,rgba(10,11,14,.34) 52%,rgba(10,11,14,.04) 70%),
linear-gradient(166deg,transparent 30%,rgba(247,250,255,.26) 50%,transparent 64%),
radial-gradient(92% 72% at 50% 128%,rgba(10,11,14,.92),transparent 74%)!important;
}
/* La lueur reste un reflet rare : plus tendue, moins « halo ». */
.hero__lueur{
width:48%!important;
height:58%!important;
background:radial-gradient(closest-side,rgba(247,250,255,.34),rgba(220,229,242,.09) 46%,transparent 72%)!important;
filter:blur(18px)!important;
opacity:.85!important;
}
/* ------------------------- 2. LE TITRE RESTE LE SEUL POINT FORT DU HERO */
/* Un voile local sous le bloc de texte (et non sur tout le hero) : les
boutons et le chapeau redeviennent lisibles sans éteindre la matière. */
.hero .enveloppe{
position:relative;
z-index:2;
}
.hero .hero__grille{
position:relative;
}
.hero .hero__grille::before{
content:"";
position:absolute;
z-index:-1;
inset:clamp(-30px,-2vw,-16px) auto clamp(-26px,-2vw,-14px) clamp(-48px,-4vw,-22px);
width:min(78ch,86%);
border-radius:32px;
background:radial-gradient(120% 100% at 0% 50%,rgba(10,11,14,.86),rgba(10,11,14,.52) 62%,rgba(10,11,14,0) 100%);
pointer-events:none;
}
/* Le chapeau et la note : on remonte leur opacité, ils se lisaient mal. */
.hero .chapeau{
color:rgba(232,240,250,.92)!important;
text-shadow:0 2px 18px rgba(10,11,14,.75);
}
.hero .hero__note{
color:rgba(232,240,250,.94)!important;
text-shadow:0 2px 16px rgba(10,11,14,.8);
}
/* ---------------------------------- 3. CONTRASTES HORS HERO (styles seuls) */
/* flux.css force h1,h2,h3 en blanc cassé (#F7FAFF) pour le monde sombre.
Les cartes de réalisations, elles, sont peintes sur papier clair : le
titre devenait blanc sur blanc (contraste 1.0). On rétablit l'encre. */
.projets h3,
.projet-vedette__titre,
.projet-carte h3{
color:#0C0C10!important;
}
.projet-vedette__lien{
color:#141421!important;
border-color:rgba(16,14,12,.28)!important;
}
.projet-vedette:hover .projet-vedette__lien{
color:#0C0C10!important;
border-color:rgba(16,14,12,.6)!important;
}
/* Le chapeau garde une encre un cran plus soutenue que le texte courant. */
.bloc__texte .chapeau,
.equipe .chapeau{
color:#2E2E3A!important;
}
/* Tout le site est sur nuit profonde : la vraie faute est l'encre, pas le fond.
--flux-mercure-2 (#8A9AB2) ne donne que 2.3 sur #0A0B0E. On relève la
variable de texte secondaire à #A9B8CC : 6.6 de contraste, métal plus
présent mais toujours en retrait du mercure clair des titres. */
:root,
html{
--flux-mercure-2:#A9B8CC;
--gris-texte:#A9B8CC;
}
/* La cause racine : atelier.css / atelier-visuels.css posent --doux sur une
encre claire (#5A5A66) héritée du site papier, alors que tout est passé en
nuit. On la relève ici, après ces fichiers : p.doux, p.role, .membre p et
.carte-service p se réparent ensemble. */
:root,
html,
body{
--doux:#AEBCCC!important;
}
/* Chapeaux et textes de présentation : un cran plus soutenus encore. */
.chapeau,
main p.chapeau,
.bloc p.chapeau,
.membre p.chapeau{
color:#C3CEDD!important;
}
.doux,
p.doux,
p.role,
.membre p,
.membre p.role{
color:#A9B8CC!important;
}
/* Les textes posés sur une nappe de métal (hero) gardent l'éclat. */
.hero p,
.hero p.doux,
.hero p.chapeau,
.hero p.role{
color:rgba(232,240,250,.94)!important;
}
/* 4. LE CTA DU HERO — LISIBILITÉ FIXE (décision 23/10, dernier fichier chargé)
La pastille était un dégradé de mercure en background-image, peint par
flux-hero.css, mais toute règle posant un background-color court-circuite
l'image pour un contrôleur de contraste : le fond redevenait la nuit et le
texte #0A0B0E tombait à 1.0. On passe à un aplat clair réel + texte nuit. */
.hero .hero__actions a.bouton:not(.bouton--ligne){
background-image:none!important;
background-color:#DCE5F2!important;
color:#0A0B0E!important;
border:1px solid rgba(247,250,255,.75)!important;
box-shadow:0 18px 44px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.9)!important;
text-shadow:none!important;
}
.hero .hero__actions a.bouton:not(.bouton--ligne) .fleche{
color:#0A0B0E!important;
}
.hero .hero__actions a.bouton:not(.bouton--ligne):hover{
background-color:#F7FAFF!important;
}
/* Ceinture et bretelles : les variables de fond et de texte suivent la même
règle, pour qu'aucun héritage (--encre, --texte, .acier) ne reprenne la main. */
.hero .hero__actions a.bouton:not(.bouton--ligne){
--encre:#DCE5F2;
--texte:#0A0B0E;
--fond:#DCE5F2;
-webkit-text-fill-color:#0A0B0E!important;
}
.hero .hero__actions a.bouton:not(.bouton--ligne) *{
-webkit-text-fill-color:#0A0B0E!important;
}
/* Filet de sécurité : le CTA principal du hero (et lui seul) est une pastille
claire à texte nuit, quel que soit l'ordre de chargement des CSS. */
.hero__actions > a.bouton:first-of-type{
background:#DCE5F2!important;
color:#0A0B0E!important;
}
.hero__actions > a.bouton:first-of-type *{color:#0A0B0E!important}
/* SOURCE RÉELLE DU 1.0 — .bouton utilise var(--encre), que flux.css a converti
en --flux-eclat (#F7FAFF, presque blanc) pour la nuit : d'où du texte clair
sur fond clair. On force donc le jeton --texte du bouton à la nuit, en plus
de la couleur directe, et on interdit toute peinture héritée claire. */
.hero .hero__actions > a.bouton:first-of-type{
--texte:#0A0B0E;
--encre:#DCE5F2;
--flux-eclat:#0A0B0E;
color:#0A0B0E!important;
background-color:#DCE5F2!important;
background-image:none!important;
}
.hero .hero__actions > a.bouton:first-of-type .fleche,
.hero .hero__actions > a.bouton:first-of-type span{
color:#0A0B0E!important;
-webkit-text-fill-color:#0A0B0E!important;
}
/* Boutons dans les sections nuit : un contour de mercure, texte clair.
(Un aplat d'encre sur fond nuit ou un aplat blanc auraient donné 1.0.)
Le bouton du hero garde son traitement de métal. */
body .projets .bouton,
body .bloc .bouton,
body .equipe .bouton{
background-image:none!important;
background-color:rgba(220,229,242,.07)!important;
color:#EAF1FA!important;
border:1px solid rgba(220,229,242,.34)!important;
}
body .projets .bouton:hover,
body .bloc .bouton:hover,
body .equipe .bouton:hover{
background-color:rgba(220,229,242,.14)!important;
border-color:rgba(220,229,242,.55)!important;
}
/* ------------------------ 4. UNE ARÊTE DE LUMIÈRE AU REPOS (hero seulement) */
/* Le hero est juste, il lui manquait un souffle. Une seule arête froide qui
glisse très lentement sur la nappe de mercure, en 11 s, d'un bord à l'autre
puis retour discret : à 0.16 d'opacité on la voit sans la regarder.
Aucune structure touchée, aucun JS ajouté, aucun mouvement sur le texte. */
.hero__matiere::before{
content:"";
position:absolute;
inset:-12% -34%;
z-index:1;
pointer-events:none;
background:linear-gradient(104deg,
transparent 38%,
rgba(220,229,242,.05) 45%,
rgba(247,250,255,.16) 50%,
rgba(220,229,242,.05) 55%,
transparent 62%);
mix-blend-mode:screen;
transform:translate3d(-26%,0,0);
animation:arete-repos 11s cubic-bezier(.45,0,.55,1) infinite alternate;
will-change:transform;
}
@keyframes arete-repos{
from{transform:translate3d(-26%,0,0)}
to{transform:translate3d(26%,0,0)}
}
/* ============================ 0. HERO — RANGÉES RÉELLES (décision 23/10, dernier fichier chargé)
Défaut réel vu par Raphaël : le bandeau de spécialités passait SUR le titre.
Cause : .hero__texte est en display:contents, donc ses enfants sont des
items de la grille ; or .hero .hero__titre et .hero .chapeau étaient en
grid-area:auto + grid-row:2/3 sans grid-column, et le .hero__note
(grid-area:appui, align-self:end) écrasait la place. On nomme chaque item
sur sa rangée ET sa colonne, explicitement, dans l'ordre de lecture :
SPÉCIALITÉS → TITRE → CHAPEAU → CTA, la légende à droite. */
.hero .hero__grille{
grid-template-areas:
"spe appui"
"titre appui"
"chapeau appui"
"actions appui"!important;
grid-template-rows:auto auto auto auto!important;
row-gap:0!important;
align-items:start!important;
}
.hero .hero__texte{display:contents!important}
.hero .hero__grille > .pastille{
grid-area:spe!important;
grid-column:1!important;grid-row:1!important;
align-self:start!important;
margin:0 0 clamp(20px,2.8vh,36px)!important;
position:static!important;
}
.hero .hero__grille > .hero__titre{
grid-area:titre!important;
grid-column:1!important;grid-row:2!important;
align-self:start!important;
margin:0!important;
position:static!important;
line-height:1.02!important;
}
.hero .hero__grille > .chapeau{
grid-area:chapeau!important;
grid-column:1!important;grid-row:3!important;
align-self:start!important;
margin:clamp(22px,2.8vh,34px) 0 0!important;
position:static!important;
}
.hero .hero__grille > .hero__actions{
grid-area:actions!important;
grid-column:1!important;grid-row:4!important;
align-self:start!important;
margin:clamp(24px,3.2vh,40px) 0 0!important;
position:static!important;
}
.hero .hero__grille > .hero__note{
grid-area:appui!important;
grid-column:2!important;grid-row:1 / span 4!important;
align-self:end!important;
margin:0!important;
position:static!important;
}
/* ------------------------ 5. BOUTONS HORS HERO — VISIBILITÉ FIXE (décision 23/10)
Défaut réel constaté par Raphaël : le bouton « Nous contacter » de la section
contact était blanc sur blanc et invisible. Cause : flux.css a reconverti les
jetons de la nuit (--encre, --texte, --flux-eclat en clair) ; .appel .bouton
posait background:#fff + color:var(--encre) devenu clair, et .bouton posait
color sur un jeton clair. On pose la nuit et l'éclat en dur, partout où un
.bouton n'a pas déjà son traitement propre (hero, contour, sections nuit). */
body .appel .bouton,
body .contact .bouton,
body section .bouton:not(.bouton--ligne){
background-image:none!important;
background-color:#DCE5F2!important;
color:#0A0B0E!important;
-webkit-text-fill-color:#0A0B0E!important;
border:1px solid rgba(247,250,255,.55)!important;
text-shadow:none!important;
}
body .appel .bouton *,
body .contact .bouton *,
body section .bouton:not(.bouton--ligne) *{
color:#0A0B0E!important;
-webkit-text-fill-color:#0A0B0E!important;
}
body .appel .bouton:hover,
body .contact .bouton:hover,
body section .bouton:not(.bouton--ligne):hover{
background-color:#F7FAFF!important;
}
/* On rend la main au contour et aux boutons des sections sombres, corrigés plus haut. */
body .bouton--ligne,
body .projets .bouton,
body .bloc .bouton,
body .equipe .bouton{
background-color:revert!important;
}
body .bouton--ligne{
background-image:none!important;
background-color:transparent!important;
color:#EAF1FA!important;
-webkit-text-fill-color:#EAF1FA!important;
border:1px solid rgba(220,229,242,.45)!important;
}
body .bouton--ligne *{
color:#EAF1FA!important;
-webkit-text-fill-color:#EAF1FA!important;
}
/* Le pied de page et le rail : même règle, texte clair sur la nuit. */
body .rail .bouton,
body footer .bouton{
background-color:#DCE5F2!important;
color:#0A0B0E!important;
-webkit-text-fill-color:#0A0B0E!important;
}
@media (prefers-reduced-motion:reduce){
.hero__matiere::before{animation:none!important;transform:none!important;opacity:.5}
}
/* assets/flux-hero-nappe.css */
/* =========================================================================
WEBCRAFT — flux-hero-nappe.css · 2026 · Emma (DA) / Hugo (code)
Chargé EN DERNIER. Une seule mission : la nappe de mercure doit se lire
comme un seul morceau de métal continu qui couvre tout le hero.
- plus de cadre, plus de voile à arêtes nettes : uniquement des fondus
progressifs qui partent des bords ;
- l'image est agrandie et recentrée pour qu'aucun bord d'image ne tombe
dans le cadre (le fameux rectangle clair à droite de « sur-mesure ») ;
- le titre passe au-dessus, sans découpe autour de lui.
========================================================================= */
/* ---------------------------------------------- 1. LA MATIÈRE, D'UN SEUL BLOC */
.hero__matiere{
/* On déborde du cadre : le métal sort du noir, il n'est jamais posé dessus. */
inset:-8% -6%!important;
background-size:cover!important;
background-position:62% 46%!important;
background-repeat:no-repeat!important;
filter:contrast(1.42) saturate(.5) brightness(1.05)!important;
opacity:1!important;
/* Un seul fondu, sur les quatre bords, large et progressif. Aucune arête. */
-webkit-mask-image:
radial-gradient(135% 120% at 70% 48%,#000 34%,rgba(0,0,0,.92) 55%,rgba(0,0,0,.5) 76%,transparent 100%);
mask-image:
radial-gradient(135% 120% at 70% 48%,#000 34%,rgba(0,0,0,.92) 55%,rgba(0,0,0,.5) 76%,transparent 100%);
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
}
/* ------------------- 2. LE VOILE DE LISIBILITÉ, SANS AUCUNE LIGNE DROITE */
/* Avant : deux dégradés superposés + un pli net à 166deg → arêtes visibles
derrière le texte. Maintenant : un seul dégradé qui part du bord gauche et
s'éteint avant le milieu, plus une respiration basse. Rien de linéaire. */
.hero__matiere::after{
content:""!important;
position:absolute!important;
inset:0!important;
pointer-events:none!important;
background:
radial-gradient(118% 96% at -6% 52%,rgba(10,11,14,.96) 0%,rgba(10,11,14,.82) 24%,rgba(10,11,14,.44) 46%,rgba(10,11,14,.12) 62%,rgba(10,11,14,0) 74%),
radial-gradient(120% 70% at 50% 118%,rgba(10,11,14,.9) 0%,rgba(10,11,14,.36) 42%,rgba(10,11,14,0) 70%)!important;
/* le voile lui-même se fond : pas de bord de calque */
-webkit-mask-image:radial-gradient(120% 110% at 40% 50%,#000 0%,#000 72%,transparent 100%);
mask-image:radial-gradient(120% 110% at 40% 50%,#000 0%,#000 72%,transparent 100%);
}
/* ------- 3. L'ARÊTE DE LUMIÈRE : une lumière de surface, jamais un pli net */
.hero__matiere::before{
background:linear-gradient(118deg,
transparent 30%,
rgba(220,229,242,.04) 42%,
rgba(247,250,255,.13) 50%,
rgba(220,229,242,.04) 58%,
transparent 70%)!important;
mix-blend-mode:screen!important;
inset:-20% -40%!important;
}
/* ------------------------------------------------- 4. LE TITRE PASSE-DESSUS */
/* Aucun fond, aucun cadre, aucune découpe : le mot « sur-mesure » est pris
dans le métal (dégradé dans les lettres), le reste du titre en mercure
clair. La lisibilité tient par le voile dégradé, pas par un aplat. */
.hero__grille{position:relative;z-index:2}
.hero__titre{position:relative;z-index:2}
/* ------------------------------------------------ 5. LE LOGO EST BLANC, DÉJÀ */
/* logo-webcraft-blanc.png : symbole + mot Webcraft en blanc sur fond
transparent. Rien à recolorer, la forme est exacte. */
.rail__marque img,
.bandeau .rail__marque img{
filter:drop-shadow(0 1px 12px rgba(10,11,14,.55));
}
/* assets/flux-hero-final.css */
/* =========================================================================
WEBCRAFT — flux-hero-final.css · 2026 · Emma (DA) / Hugo (code)
Chargé EN DERNIER. Trois corrections demandées par Raphaël, rien d'autre.
1. Plus aucun panneau derrière le texte : le titre est POSÉ sur le métal.
2. La matière va d'un bord à l'autre, d'un seul tenant (fondu progressif seul).
3. Le logo du rail est sculpté en relief (outil matiere), forme intacte.
========================================================================= */
/* ---------------- 1. LE PANNEAU FANTÔME DERRIÈRE LE TITRE : SUPPRIMÉ ----- */
/* C'était .hero__grille::before : un rectangle à coins arrondis, large de
min(78ch,86%), en radial-gradient clair. C'est LUI le bord net à 160 px. */
/* La règle d'origine (.hero .hero__grille::before, flux-hero-ajustements.css
ligne 44) pose position/inset/width/border-radius : il faut donc l'annuler
champ par champ, sinon le display:none seul laisse passer le rectangle. */
.hero .hero__grille::before,
.hero .hero__grille::after,
.hero .hero__texte::before,
.hero .hero__texte::after{
content:none!important;
display:none!important;
position:static!important;
inset:auto!important;
width:auto!important;
height:auto!important;
border-radius:0!important;
background:none!important;
box-shadow:none!important;
border:0!important;
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
}
/* Le texte se pose directement sur le métal : lisibilité par fondu large,
sans calque, sans arête, sans découpe autour du titre. */
.hero__texte{
background:none!important;
border:0!important;
box-shadow:none!important;
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
border-radius:0!important;
}
/* Une seule ombre très douce sur le titre : le métal reste visible sous les
lettres, la lecture gagne sans qu'on voie un fond. */
.hero__titre{
text-shadow:0 1px 26px rgba(10,11,14,.55), 0 1px 3px rgba(10,11,14,.35)!important;
}
.hero__texte .pastille,
.hero__texte .chapeau{
text-shadow:0 1px 14px rgba(10,11,14,.6)!important;
}
/* ---------------- 2. LA MATIÈRE, D'UN SEUL TENANT ------------------------- */
/* L'image déborde largement : aucun bord d'image ne tombe dans le hero.
Fondu radial très large : la matière sort du noir, elle n'est pas posée. */
.hero__matiere{
inset:-14% -10%!important;
background-size:cover!important;
background-position:58% 48%!important;
background-repeat:no-repeat!important;
filter:contrast(1.34) saturate(.52) brightness(1.06)!important;
opacity:1!important;
-webkit-mask-image:
radial-gradient(150% 132% at 68% 48%,#000 0%,#000 46%,rgba(0,0,0,.86) 66%,rgba(0,0,0,.42) 84%,transparent 100%)!important;
mask-image:
radial-gradient(150% 132% at 68% 48%,#000 0%,#000 46%,rgba(0,0,0,.86) 66%,rgba(0,0,0,.42) 84%,transparent 100%)!important;
-webkit-mask-repeat:no-repeat!important;
mask-repeat:no-repeat!important;
}
/* Voile de lisibilité : deux fondus radiaux qui s'éteignent loin des bords.
Aucun dégradé linéaire (c'est le linéaire qui créait le pli net). */
.hero__matiere::after{
content:""!important;
position:absolute!important;
inset:0!important;
pointer-events:none!important;
background:
radial-gradient(150% 120% at -10% 50%,rgba(10,11,14,.94) 0%,rgba(10,11,14,.74) 30%,rgba(10,11,14,.34) 52%,rgba(10,11,14,.06) 70%,rgba(10,11,14,0) 82%),
radial-gradient(140% 90% at 50% 122%,rgba(10,11,14,.7) 0%,rgba(10,11,14,.2) 46%,rgba(10,11,14,0) 74%)!important;
-webkit-mask-image:radial-gradient(135% 125% at 45% 50%,#000 0%,#000 78%,transparent 100%)!important;
mask-image:radial-gradient(135% 125% at 45% 50%,#000 0%,#000 78%,transparent 100%)!important;
}
/* Le filet de séparation du bas du hero : présent mais jamais en trait dur. */
.hero::after{
background:radial-gradient(120% 100% at 50% 50%,rgba(220,229,242,.18) 0%,rgba(220,229,242,.06) 55%,transparent 100%)!important;
opacity:.55!important;
}
/* ---------------- 3. LE LOGO DU RAIL, SCULPTÉ ---------------------------- */
/* relief blanc/argent sur fond nuit : la forme du logo de la charte, intacte. */
.rail__marque > img{
width:auto!important;
height:clamp(30px,2.9vw,40px)!important;
filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))!important;
transition:filter .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1)!important;
}
.rail__marque:hover > img{
filter:drop-shadow(0 2px 10px rgba(220,229,242,.32)) brightness(1.12)!important;
transform:translateY(-1px)!important;
}
.rail__lieu{
color:#8A9AB2!important;
letter-spacing:.34em!important;
font-size:9.5px!important;
text-transform:uppercase!important;
}
/* Version animée : le reflet qui passe sur le logo sculpté (mix-blend screen). */
.rail__marque{position:relative!important;display:inline-block!important}
.rail__marque .marque-vive{
position:absolute!important;
left:0!important;top:0!important;
height:clamp(30px,2.9vw,40px)!important;
width:auto!important;
opacity:.9!important;
pointer-events:none!important;
mix-blend-mode:screen!important;
}
/* ---------------- 4. LE MENU DU RAIL, STYLE « LE FLUX » ------------------ */
.rail__nav{gap:2px!important}
.rail__lien{
position:relative!important;
padding:9px 12px 9px 0!important;
font-family:"Instrument Sans",system-ui,sans-serif!important;
font-size:14px!important;
font-weight:500!important;
letter-spacing:.015em!important;
color:rgba(220,229,242,.74)!important;
border-radius:8px!important;
transition:color .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1)!important;
isolation:isolate;
}
/* Le métal qui coule sous le lien : liseré liquide qui s'étire au survol. */
.rail__lien::before{
content:""!important;
position:absolute!important;
left:0!important;right:0!important;bottom:6px!important;
height:1px!important;
background:linear-gradient(90deg,rgba(220,229,242,0),rgba(220,229,242,.85) 35%,#F7FAFF 52%,rgba(138,154,178,.6) 72%,rgba(220,229,242,0))!important;
transform:scaleX(0)!important;
transform-origin:left center!important;
transition:transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease!important;
opacity:.9!important;
z-index:-1;
}
.rail__lien:hover,
.rail__lien:focus-visible,
.rail__lien[aria-current="page"]{
color:#F7FAFF!important;
/* Plus de translateX : le bord gauche du menu reste au pixel. Le lien actif
se distingue par la lumière et le liseré, pas par un décalage. */
transform:none!important;
}
.rail__lien:hover::before,
.rail__lien:focus-visible::before,
.rail__lien[aria-current="page"]::before{
transform:scaleX(1)!important;
}
.rail__lien .fleche{
opacity:0!important;
transform:translateX(-6px)!important;
transition:opacity .45s ease, transform .5s cubic-bezier(.2,.7,.2,1)!important;
color:#DCE5F2!important;
}
.rail__lien:hover .fleche,
.rail__lien:focus-visible .fleche{opacity:1!important;transform:translateX(0)!important}
/* Sous-menus : même écriture, plus discrète, liseré qui glisse aussi. */
.rail__services summary{
font-family:"Instrument Sans",system-ui,sans-serif!important;
font-size:12.5px!important;
font-weight:600!important;
letter-spacing:.1em!important;
text-transform:uppercase!important;
color:rgba(220,229,242,.62)!important;
padding:9px 0 6px!important;
transition:color .45s ease!important;
/* « + » calé sur le bord droit de la colonne, quelle que soit la longueur de l'intitulé. */
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
width:100%!important;
}
.rail__services summary:hover,
.rail__services[open] summary{color:#F7FAFF!important}
.rail__services summary::after{color:#8A9AB2!important;margin-left:auto!important}
.rail__services{
border-top:1px solid rgba(138,154,178,.14)!important;
margin-top:6px!important;
padding-top:2px!important;
}
.rail__services .rail__lien{
font-size:13px!important;
padding:5px 10px 5px 8px!important;
color:rgba(220,229,242,.56)!important;
}
.rail__services .rail__lien:hover{color:#F7FAFF!important}
/* Bouton « Nous contacter » assorti : pastille de mercure, lueur au survol. */
.rail__cta,
a.rail__cta{
display:inline-flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:10px!important;
margin-top:14px!important;
padding:11px 14px!important;
background:linear-gradient(150deg,#F7FAFF 0%,#DCE5F2 46%,#8A9AB2 100%)!important;
color:#0A0B0E!important;
font-family:"Instrument Sans",system-ui,sans-serif!important;
font-size:13px!important;
font-weight:600!important;
letter-spacing:.01em!important;
border:0!important;
border-radius:999px!important;
text-decoration:none!important;
box-shadow:0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.7)!important;
transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease, filter .5s ease!important;
position:relative!important;
}
.rail__cta:hover,
a.rail__cta:hover{
transform:translateY(-1px)!important;
filter:brightness(1.06)!important;
box-shadow:0 10px 26px rgba(220,229,242,.22), inset 0 1px 0 rgba(255,255,255,.85)!important;
}
.rail__cta .fleche{color:#0A0B0E!important;opacity:1!important;transform:none!important}
/* Pied du rail : coordonnées au ton mercure froid. */
.rail__pied{
font-family:"Instrument Sans",system-ui,sans-serif!important;
font-size:11.5px!important;
line-height:1.7!important;
color:rgba(138,154,178,.8)!important;
}
.rail__pied a{color:rgba(220,229,242,.8)!important;text-decoration:none!important}
.rail__pied a:hover{color:#F7FAFF!important}
@media (prefers-reduced-motion:reduce){
.rail__lien,
.rail__lien::before,
.rail__lien .fleche,
.rail__cta{transition:none!important}
.rail__lien:hover{transform:none!important}
}
/* assets/rail-fix.css */
/* =========================================================================
WEBCRAFT — rail-fix.css · 23/10/2026 · Hugo (code)
Trois défauts du menu de gauche relevés par Raphaël, rien d'autre.
========================================================================= */
/* ---------- 1. UN SEUL LOGO : LE RELIEF, LE REFLET DEDANS ----------------- */
/* Cause du doublon : le relief (PNG) et le SVG vif sont deux images
empilées (le SVG, plus petit, donnait le « mini Web » dans un cadre sombre).
On efface le SVG en calque et on fait passer le reflet PAR-DESSUS le même
logo, découpé dans la forme du relief par un masque. */
.rail__marque{position:relative!important}
.rail__marque .marque-vive{display:none!important}
.rail__marque > img{
width:auto!important;
height:clamp(30px,2.9vw,40px)!important;
filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))!important;
}
.rail__marque::after{
content:""!important;
position:absolute!important;
left:0!important;top:0!important;
width:100%!important;
height:clamp(30px,2.9vw,40px)!important;
pointer-events:none!important;
background:linear-gradient(100deg,
transparent 30%,
rgba(247,250,255,.06) 42%,
rgba(247,250,255,.85) 50%,
rgba(220,229,242,.10) 58%,
transparent 70%)!important;
background-size:260% 100%!important;
background-position:180% 0!important;
-webkit-mask-image:url("/assets/images/logo-webcraft-relief-blanc.png")!important;
mask-image:url("/assets/images/logo-webcraft-relief-blanc.png")!important;
-webkit-mask-size:100% 100%!important;
mask-size:100% 100%!important;
-webkit-mask-repeat:no-repeat!important;
mask-repeat:no-repeat!important;
animation:railReflet 7.5s cubic-bezier(.45,.05,.55,.95) infinite!important;
}
@keyframes railReflet{
0%,62% {background-position:180% 0;opacity:0}
68% {opacity:.95}
100% {background-position:-80% 0;opacity:0}
}
@media (prefers-reduced-motion:reduce){
.rail__marque::after{animation:none!important;opacity:0!important}
}
.rail__marque .rail__lieu{margin-top:6px!important}
/* Le pied de page réutilise .rail__marque : on n'y applique NI le reflet
animé NI la hauteur clouée, sinon le logo et « Poitiers » se superposent. */
.pied .rail__marque::after{content:none!important;display:none!important}
.pied .rail__marque{position:static!important;display:inline-flex!important;flex-direction:column!important;align-items:flex-start!important;gap:6px!important}
.pied .rail__marque > img{height:clamp(22px,2.1vw,30px)!important;width:auto!important;filter:none!important}
.pied .rail__marque .rail__nom{padding:0!important;line-height:1.1!important}
.pied__col{position:relative!important;gap:8px!important}
/* ---------- 2. LE BOUTON DU RAIL : TEXTE NUIT SUR MERCURE CLAIR ---------- */
/* .atelier-corrections.css impose color:#fff !important sur .rail__cta : on
reprend la main sur le fond et sur le texte. */
.rail__cta,
a.rail__cta{
background:#DCE5F2!important;
background-image:linear-gradient(135deg,#F7FAFF 0%,#DCE5F2 46%,#8A9AB2 100%)!important;
color:#0A0B0E!important;
-webkit-text-fill-color:#0A0B0E!important;
font-weight:600!important;
box-shadow:0 8px 22px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.85)!important;
}
.rail__cta *,
a.rail__cta *{
color:#0A0B0E!important;
-webkit-text-fill-color:#0A0B0E!important;
stroke:#0A0B0E!important;
}
a.rail__cta:hover{
background-image:linear-gradient(135deg,#FFFFFF 0%,#EAF0FA 50%,#A9B7CC 100%)!important;
box-shadow:0 10px 28px rgba(220,229,242,.3),inset 0 1px 0 #fff!important;
}
a.rail__cta:focus-visible{outline:2px solid #F7FAFF!important;outline-offset:3px!important}
/* ---------- 3. LE RAIL RESTE SUR TOUTE LA HAUTEUR DE L'ÉCRAN ------------ */
/* .mise-en-page.css remet .shell > .rail en position:sticky : le rail partait
avec la page et laissait une bande vide dessous. */
.shell > .rail.rail,
.shell > aside#rail,
aside.rail#rail{
position:fixed!important;
top:0!important;
left:0!important;
bottom:0!important;
height:100vh!important;
max-height:100vh!important;
min-height:100vh!important;
align-self:auto!important;
overflow-y:auto!important;
z-index:200!important;
}
@media (max-width:980px){
.shell > .rail.rail,
.shell > aside#rail,
aside.rail#rail{
position:static!important;
height:auto!important;
max-height:none!important;
min-height:0!important;
overflow:visible!important;
}
}
/* assets/rail-logo-propre.css */
/* =========================================================================
WEBCRAFT — rail-logo-propre.css · 23/10/2026 · Hugo
Un SEUL logo dans le rail : le relief blanc/argent, ~190 px de large,
sans cadre ni barre. Le reflet qui passe est découpé dans sa forme.
(+ filigranes 01/02/03 ramenés dans la colonne de contenu)
========================================================================= */
/* ---------- 1. Un seul logo : on retire le SVG superposé ---------- */
.rail__marque .marque-vive{display:none!important}
/* ---------- 2. Le relief, à sa taille : ~190 px de large ---------- */
.rail__marque{
position:relative!important;
display:block!important;
width:min(190px,100%)!important;
max-width:190px!important;
margin:0 0 clamp(18px,3.4vh,36px)!important;
padding:0!important;
border:0!important;
border-radius:0!important;
background:none!important;
box-shadow:none!important;
overflow:visible!important;
}
.rail__marque > img{
display:block!important;
width:100%!important;
height:auto!important;
max-width:100%!important;
max-height:none!important;
object-fit:contain!important;
border:0!important;
border-radius:0!important;
background:none!important;
}
/* --rail-occupe vaut 228 à 296 px : 190 px de logo tiennent sans forcer. */
/* ---------- 3. Le reflet passe DANS le logo, dans sa forme ---------- */
.rail__marque::after{
content:""!important;
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
pointer-events:none!important;
background:linear-gradient(100deg,
transparent 34%,
rgba(247,250,255,.10) 44%,
rgba(247,250,255,.95) 50%,
rgba(220,229,242,.14) 57%,
transparent 66%)!important;
background-size:280% 100%!important;
background-position:200% 0!important;
-webkit-mask-image:url("/assets/images/logo-webcraft-rail-relief.png")!important;
mask-image:url("/assets/images/logo-webcraft-rail-relief.png")!important;
-webkit-mask-size:100% 100%!important;
mask-size:100% 100%!important;
-webkit-mask-repeat:no-repeat!important;
mask-repeat:no-repeat!important;
-webkit-mask-position:center!important;
mask-position:center!important;
animation:railRefletPropre 7.5s cubic-bezier(.45,.05,.55,.95) infinite!important;
}
@keyframes railRefletPropre{
0%,62% {background-position:200% 0;opacity:0}
69% {opacity:.9}
100% {background-position:-100% 0;opacity:0}
}
@media (prefers-reduced-motion:reduce){
.rail__marque::after{animation:none!important;opacity:0!important}
}
/* ---------- 4. Filigranes 01/02/03 : dans la colonne de contenu ---------- */
/* Cause : ils étaient posés en absolu sur le bord droit de la section, que le
menu fixe et élargi recouvre. On les ramène dans le flux de la colonne de
contenu, à droite, derrière le texte et jamais sous le menu. */
.bloc > .filigrane{
position:absolute!important;
top:clamp(10px,1.4vw,26px)!important;
right:clamp(12px,3vw,54px)!important;
left:auto!important;
z-index:0!important;
font-size:clamp(64px,7.4vw,132px)!important;
line-height:.86!important;
color:rgba(12,12,16,.05)!important;
pointer-events:none!important;
}
.bloc > .enveloppe{position:relative!important;z-index:1!important}
/* assets/rail-flux-menu.css */
/* =========================================================================
WEBCRAFT — rail-flux-menu.css · 23/10/2026 · Hugo (code / mouvement)
1. Logo du rail : un seul, relief blanc/argent, 190 px, aucun cadre.
2. Bas du rail : adresse, téléphone, bouton empilés, avec de l'air.
3. Confiance : logos clients lisibles (mono clair), flux continu lent,
reflet au survol.
========================================================================= */
/* ---------- 0. AUCUN PANNEAU DERRIÈRE LE LOGO --------------------------- */
/* Le « cadre sombre » vu à l'écran n'est pas le logo : c'est l'aplat + le
halo posés par le rail lui-même derrière la marque. On les coupe
uniquement dans la zone du logo, le reste du rail garde son fond. */
aside.rail#rail{
background-image:none!important;
background-color:#07080B!important;
}
aside.rail#rail::before,
aside.rail#rail::after{box-shadow:none!important;border:0!important}
/* ---------- 1. LE LOGO : NET, SANS CADRE, TAILLE DU RAIL ---------------- */
.rail__marque,
a.rail__marque{
position:relative!important;
display:block!important;
width:190px!important;
max-width:100%!important;
padding:0!important;
margin:0 0 clamp(16px,3vh,32px)!important;
border:0!important;
border-radius:0!important;
background:none!important;
background-color:transparent!important;
box-shadow:none!important;
overflow:visible!important;
}
.rail__marque > img{
display:block!important;
width:190px!important;
height:auto!important;
max-width:100%!important;
border:0!important;
border-radius:0!important;
background:none!important;
/* lumière rasante : arête claire en haut du métal, ombre portée dessous */
filter:brightness(1.22) contrast(1.28)
drop-shadow(0 1px 0 rgba(255,255,255,.55))
drop-shadow(0 -1px 1px rgba(255,255,255,.22))
drop-shadow(0 3px 8px rgba(0,0,0,.85))!important;
}
.rail__marque .marque-vive{display:none!important}
/* le reflet qui passe DANS la forme du logo */
.rail__marque::after{
content:""!important;
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
pointer-events:none!important;
background:linear-gradient(104deg,
transparent 36%,
rgba(247,250,255,.06) 44%,
rgba(247,250,255,.95) 50%,
rgba(255,255,255,.28) 55%,
transparent 64%)!important;
background-size:260% 100%!important;
background-position:190% 0!important;
-webkit-mask-image:url("/assets/images/logo-webcraft-rail-relief.png")!important;
mask-image:url("/assets/images/logo-webcraft-rail-relief.png")!important;
-webkit-mask-size:100% 100%!important;
mask-size:100% 100%!important;
-webkit-mask-repeat:no-repeat!important;
mask-repeat:no-repeat!important;
-webkit-mask-position:center!important;
mask-position:center!important;
animation:webcraftRefletRail 7.5s cubic-bezier(.4,0,.2,1) infinite!important;
}
@keyframes webcraftRefletRail{
0%,18%{background-position:190% 0}
62%,100%{background-position:-120% 0}
}
/* ---------- 2. LE BAS DU RAIL : EMPILÉ, AÉRÉ --------------------------- */
.rail__pied,
aside.rail .rail__pied{
margin-top:auto!important;
padding-top:clamp(16px,2.4vh,24px)!important;
border-top:1px solid rgba(220,229,242,.16)!important;
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
gap:14px!important;
font-size:13.5px!important;
line-height:1.6!important;
color:rgba(220,229,242,.82)!important;
}
.rail__pied a[href^="tel"],
aside.rail .rail__pied a[href^="tel"]{
display:block!important;
color:rgba(220,229,242,.82)!important;
text-decoration:none!important;
letter-spacing:.02em!important;
}
.rail__pied a[href^="tel"]:hover{color:#F7FAFF!important}
.rail__pied .rail__cta,
aside.rail .rail__pied .rail__cta,
a.rail__cta{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
width:100%!important;
box-sizing:border-box!important;
margin:6px 0 0!important;
padding:13px 18px!important;
border-radius:999px!important;
background:#DCE5F2!important;
background-image:linear-gradient(135deg,#F7FAFF 0%,#DCE5F2 46%,#A9B7CC 100%)!important;
color:#0A0B0E!important;
-webkit-text-fill-color:#0A0B0E!important;
font-size:14px!important;
font-weight:600!important;
letter-spacing:.01em!important;
box-shadow:0 10px 24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.9)!important;
transition:background-image .4s ease,box-shadow .4s ease,transform .4s cubic-bezier(.2,.7,.2,1)!important;
}
.rail__pied .rail__cta *,
a.rail__cta *{color:#0A0B0E!important;-webkit-text-fill-color:#0A0B0E!important}
a.rail__cta:hover{
background-image:linear-gradient(135deg,#FFFFFF 0%,#EDF2FB 44%,#B9C6D9 100%)!important;
box-shadow:0 14px 30px rgba(220,229,242,.28),inset 0 1px 0 #fff!important;
transform:translateY(-1px)!important;
}
a.rail__cta .fleche{transition:transform .4s cubic-bezier(.2,.7,.2,1)!important}
a.rail__cta:hover .fleche{transform:translateX(4px)!important}
/* ---------- 3. « ILS NOUS ONT FAIT CONFIANCE » — LE FLUX -------------- */
.confiance{
background:none!important;
background-color:#07080B!important;
border-block:1px solid rgba(220,229,242,.10)!important;
padding-block:clamp(34px,4.2vw,58px)!important;
overflow:hidden!important;
}
.confiance__titre,
.confiance .confiance__titre{
font-size:11.5px!important;
font-weight:800!important;
letter-spacing:.26em!important;
text-transform:uppercase!important;
color:rgba(220,229,242,.62)!important;
margin:0 0 clamp(22px,2.6vw,34px)!important;
display:flex!important;
align-items:center!important;
gap:14px!important;
}
.confiance__titre::after{
content:""!important;
flex:1!important;
height:1px!important;
background:linear-gradient(90deg,rgba(220,229,242,.28),transparent)!important;
}
.bandeau-logos,
.confiance .bandeau-logos{
overflow:hidden!important;
padding-block:clamp(6px,1vw,12px)!important;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)!important;
mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)!important;
}
.bandeau-logos__piste,
.confiance .bandeau-logos__piste{
display:flex!important;
align-items:center!important;
width:max-content!important;
gap:clamp(40px,5vw,88px)!important;
animation:webcraftFluxMetal 46s linear infinite!important;
}
.bandeau-logos:hover .bandeau-logos__piste{animation-play-state:paused!important}
@keyframes webcraftFluxMetal{
from{transform:translate3d(0,0,0)}
to{transform:translate3d(-50%,0,0)}
}
.bandeau-logos__item,
.confiance .bandeau-logos__item{
position:relative!important;
flex:0 0 auto!important;
padding:10px 0!important;
font-size:clamp(14px,1.15vw,17px)!important;
font-weight:600!important;
letter-spacing:.16em!important;
text-transform:uppercase!important;
white-space:nowrap!important;
color:rgba(220,229,242,.55)!important;
/* relief mono clair : arête haute, ombre sous le métal */
text-shadow:0 1px 0 rgba(255,255,255,.16),0 2px 6px rgba(0,0,0,.6)!important;
transition:color .5s ease,text-shadow .5s ease!important;
-webkit-box-reflect:below -6px linear-gradient(transparent 62%,rgba(220,229,242,.10))!important;
}
.bandeau-logos__item:hover,
.confiance .bandeau-logos__item:hover{
color:#F7FAFF!important;
text-shadow:0 1px 0 rgba(255,255,255,.55),0 0 18px rgba(247,250,255,.45)!important;
}
/* le reflet qui passe sur le logo survolé */
.bandeau-logos__item::after{
content:""!important;
position:absolute!important;
inset:0!important;
border-radius:2px!important;
pointer-events:none!important;
background:linear-gradient(104deg,transparent 40%,rgba(247,250,255,.85) 50%,transparent 60%)!important;
background-size:300% 100%!important;
background-position:180% 0!important;
-webkit-mask-image:linear-gradient(#000,#000)!important;
mask-image:linear-gradient(#000,#000)!important;
mix-blend-mode:overlay!important;
opacity:0!important;
transition:opacity .3s ease!important;
}
.bandeau-logos__item:hover::after{
opacity:1!important;
animation:webcraftRefletLogo 1.15s cubic-bezier(.4,0,.2,1) infinite!important;
}
@keyframes webcraftRefletLogo{
0%{background-position:180% 0}
100%{background-position:-80% 0}
}
/* ---------- 4. LE PANNEAU DERRIÈRE LE LOGO : SUPPRIMÉ, PAS MASQUÉ ----- */
/* Le fichier est ensuite lu sur son fond opaque : le PNG de relief est
détouré en masque (n'importe quel fond clair devient transparent) et la
matière est repeinte en dégradé à l'intérieur de la forme, avec une
ombre sous le métal. Aucun aplat ne peut donc plus apparaître.
Plus de ::after de reflet (il réintroduisait un rectangle animé). */
.rail__marque::after{content:none!important;display:none!important}
.rail__marque > img{
width:190px!important;
height:76px!important;
object-fit:none!important;
-webkit-mask-image:url("/assets/images/logo-webcraft-rail-relief.png")!important;
mask-image:url("/assets/images/logo-webcraft-rail-relief.png")!important;
-webkit-mask-size:100% 100%!important;
mask-size:100% 100%!important;
-webkit-mask-repeat:no-repeat!important;
mask-repeat:no-repeat!important;
background:linear-gradient(160deg,#FFFFFF 0%,#F7FAFF 28%,#DCE5F2 52%,#8A9AB2 78%,#EAF0FA 100%)!important;
filter:drop-shadow(0 1px 0 rgba(255,255,255,.55)) drop-shadow(0 3px 9px rgba(0,0,0,.9))!important;
}
/* le reflet : une lumière qui traverse la FORME (clip sur le masque) */
.rail__marque::before{
content:""!important;
display:block!important;
position:absolute!important;
inset:0!important;
pointer-events:none!important;
background:linear-gradient(104deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%)!important;
background-size:280% 100%!important;
-webkit-mask-image:url("/assets/images/logo-webcraft-rail-relief.png")!important;
mask-image:url("/assets/images/logo-webcraft-rail-relief.png")!important;
-webkit-mask-size:100% 100%!important;
mask-size:100% 100%!important;
-webkit-mask-repeat:no-repeat!important;
mask-repeat:no-repeat!important;
animation:webcraftRefletRail 7.5s cubic-bezier(.4,0,.2,1) infinite!important;
}
/* même hauteur optique : toute la piste sur une seule ligne de base */
.bandeau-logos__item{display:inline-flex!important;align-items:center!important;min-height:1.5em!important}
@media (prefers-reduced-motion:reduce){
.rail__marque::after,
.bandeau-logos__item:hover::after{animation:none!important;opacity:0!important}
.bandeau-logos__piste{animation:none!important}
}
/* assets/rail-logo-final.css */
/* =========================================================================
WEBCRAFT — rail-logo-final.css · 23/10/2026 · Hugo
Chargé EN DERNIER sur toutes les pages.
Un SEUL logo dans le rail : le PNG à fond TRANSPARENT rendu par l'outil
matiere, posé en simple ![]()
à 190 px. Plus aucun masque, fond, pseudo-
élément ni superposition autour de lui (le "morceau de texture dans un
rectangle" venait du PNG opaque posé en masque).
+ bas du menu empilé (adresse, téléphone, bouton pleine largeur).
========================================================================= */
/* ---------- 1. Le logo : une image, rien autour ---------- */
aside.rail .rail__marque,
.rail .rail__marque{
position:relative!important;
display:block!important;
width:190px!important;
max-width:190px!important;
margin:0 0 clamp(18px,3.2vh,32px)!important;
padding:0!important;
border:0!important;
border-radius:0!important;
background:none!important;
box-shadow:none!important;
overflow:visible!important;
-webkit-mask-image:none!important;
mask-image:none!important;
}
aside.rail .rail__marque::before,
aside.rail .rail__marque::after,
.rail .rail__marque::before,
.rail .rail__marque::after{
content:none!important;
display:none!important;
background:none!important;
box-shadow:none!important;
animation:none!important;
}
aside.rail .rail__marque > img{
display:block!important;
width:190px!important;
max-width:100%!important;
height:auto!important;
aspect-ratio:auto!important;
object-fit:contain!important;
border:0!important;
border-radius:0!important;
background:none!important;
box-shadow:none!important;
-webkit-mask-image:none!important;
mask-image:none!important;
filter:none!important;
opacity:1!important;
}
/* La lumière posée à la main au-dessus du logo : retirée. */
aside.rail .rail__logo-lumiere{display:none!important}
/* Le "Poitiers" sous le logo : ton mercure froid, sobre. */
aside.rail .rail__lieu{
display:block!important;
margin-top:9px!important;
font-size:10.5px!important;
line-height:1!important;
letter-spacing:.34em!important;
text-transform:uppercase!important;
color:#8A9AB2!important;
}
/* ---------- 2. Le bas du menu : empilé, aéré ---------- */
aside.rail .rail__pied{
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
gap:14px!important;
margin-top:auto!important;
padding-top:clamp(16px,2.2vh,22px)!important;
border-top:1px solid rgba(220,229,242,.14)!important;
font-size:11.5px!important;
line-height:1.6!important;
color:rgba(138,154,178,.9)!important;
}
aside.rail .rail__pied a[href^="tel"]{
display:block!important;
margin:0!important;
font-size:12.5px!important;
letter-spacing:.03em!important;
color:#DCE5F2!important;
text-decoration:none!important;
}
aside.rail .rail__pied a[href^="tel"]:hover{color:#F7FAFF!important}
aside.rail .rail__pied .rail__cta{
/* Bouton dimensionné sur son texte, bord gauche sur la colonne du rail (bonnes-pratiques-design §7). */
display:inline-flex!important;
align-self:flex-start!important;
align-items:center!important;
justify-content:flex-start!important;
gap:12px!important;
width:auto!important;
height:42px!important;
box-sizing:border-box!important;
margin:8px 0 0!important;
padding:0 20px!important;
border-radius:999px!important;
background:#DCE5F2!important;
background-image:linear-gradient(135deg,#F7FAFF 0%,#DCE5F2 52%,#8A9AB2 100%)!important;
color:#0A0B0E!important;
-webkit-text-fill-color:#0A0B0E!important;
font-size:12.5px!important;
letter-spacing:.04em!important;
box-shadow:0 8px 22px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.9)!important;
}
aside.rail .rail__pied .rail__cta *,
aside.rail .rail__pied .rail__cta .fleche{
color:#0A0B0E!important;
-webkit-text-fill-color:#0A0B0E!important;
stroke:#0A0B0E!important;
}
aside.rail .rail__pied .rail__cta:hover{
background-image:linear-gradient(135deg,#FFFFFF 0%,#EDF2FB 48%,#AEBBCE 100%)!important;
transform:translateY(-1px)!important;
}
/* ---------- 3. « ILS NOUS ONT FAIT CONFIANCE » : logos lisibles ---------- */
/* Les items sont des textes : on les passe en mercure clair, on monte le
contraste et on resserre le relief pour qu'ils se lisent sur la nuit. */
.bandeau-logos__item,
.confiance .bandeau-logos__item{
color:rgba(233,240,250,.92)!important;
font-weight:500!important;
letter-spacing:.13em!important;
font-size:clamp(15px,1.2vw,18px)!important;
text-shadow:0 1px 0 rgba(255,255,255,.22),0 0 22px rgba(138,154,178,.18)!important;
-webkit-box-reflect:none!important;
}
.bandeau-logos__item:hover,
.confiance .bandeau-logos__item:hover{
color:#FFFFFF!important;
text-shadow:0 0 26px rgba(247,250,255,.5)!important;
}
/* ---------- 4. Sous 980 px : le rail redevient un bandeau ---------- */
@media (max-width:980px){
.rail__marque,
aside.rail .rail__marque{width:min(150px,58vw)!important;margin-bottom:0!important}
aside.rail .rail__marque > img{width:min(150px,58vw)!important}
}
/* assets/logo-net.css */
/* =========================================================================
WEBCRAFT — logo-net.css · 23/10/2026 · Hugo
Logo du rail : le logo de la charte, PARFAITEMENT PLAT et blanc (logo-white
de la charte, aucune texture, aucun bombé) + UNE seule touche de matière :
la pastille du symbole, traitée en vraie bille de mercure (image matiere,
sphère chromée avec reflet et ombre) posée exactement sur le point, et un
reflet lent qui tourne dessus. Forme et proportions du logo : intactes.
========================================================================= */
/* ---------- 1. Le conteneur : aucune matière autour ---------- */
aside.rail .rail__marque,
.rail .rail__marque{
position:relative!important;
display:block!important;
width:190px!important;
max-width:190px!important;
margin:0 0 clamp(16px,2.8vh,28px)!important;
padding:0!important;
border:0!important;
border-radius:0!important;
background:none!important;
box-shadow:none!important;
overflow:visible!important;
}
aside.rail .rail__marque::before,
aside.rail .rail__marque::after,
.rail .rail__marque::before,
.rail .rail__marque::after{content:none!important;display:none!important}
/* ---------- 2. Le logo plat ---------- */
aside.rail .rail__logo,
.rail .rail__logo{
position:relative!important;
display:block!important;
width:190px!important;
max-width:100%!important;
line-height:0!important;
isolation:isolate;
}
aside.rail .rail__logo-plat,
.rail .rail__logo-plat{
display:block!important;
width:190px!important;
max-width:100%!important;
height:auto!important;
object-fit:contain!important;
border:0!important;
border-radius:0!important;
background:none!important;
box-shadow:none!important;
-webkit-mask-image:none!important;
mask-image:none!important;
filter:none!important;
opacity:1!important;
position:relative!important;
z-index:1;
}
aside.rail .rail__logo-alt,
.rail .rail__logo-alt{
position:absolute!important;
width:1px!important;height:1px!important;
overflow:hidden!important;
clip-path:inset(50%)!important;
white-space:nowrap!important;
}
/* ---------- 3. La bille de mercure, posée sur le point du symbole -------
Repères mesurés sur le PNG de la charte (898 × 138) :
le point est le centre du disque du symbole, à x ≈ 137 px, y ≈ 69 px,
diamètre ≈ 52 px. En % de la largeur (190 px affichés) :
left ≈ 15,25 % · top ≈ 50 % · diamètre ≈ 11,6 % de la largeur.
On pose la BILLE (image transparente recadrée) exactement dessus : elle
recouvre le point plat, la forme du logo n'est pas modifiée. */
aside.rail .rail__logo-bille,
.rail .rail__logo-bille{
position:absolute!important;
left:15.25%!important;
top:50%!important;
width:11.9%!important;
aspect-ratio:1/1!important;
height:auto!important;
transform:translate(-50%,-50%)!important;
border-radius:50%!important;
background-image:url("/assets/images/bille-chrome.png");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
z-index:2;
pointer-events:none;
/* ombre portée sous la bille : elle décolle du logo */
filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.55));
}
/* Reflet lent qui tourne sur la bille : un mince éclat qui balaie la sphère. */
aside.rail .rail__logo-bille::after,
.rail .rail__logo-bille::after{
content:""!important;
position:absolute!important;
inset:0!important;
border-radius:50%!important;
background:linear-gradient(115deg,
rgba(255,255,255,0) 38%,
rgba(255,255,255,.85) 47%,
rgba(255,255,255,0) 57%);
mix-blend-mode:screen;
animation:railBilleReflet 6.5s linear infinite;
}
@keyframes railBilleReflet{
0%{transform:rotate(0deg) scale(1.35);opacity:0}
8%{opacity:.9}
50%{opacity:.9}
62%{opacity:0}
100%{transform:rotate(360deg) scale(1.35);opacity:0}
}
@media (prefers-reduced-motion:reduce){
aside.rail .rail__logo-bille::after,.rail .rail__logo-bille::after{animation:none!important;opacity:0!important}
}
/* ---------- 4. « Poitiers » sous le logo ---------- */
aside.rail .rail__lieu,.rail .rail__lieu{display:block!important;margin-top:10px!important}
/* assets/confiance-flux.css */
/* =========================================================================
WEBCRAFT — confiance-flux.css · 23/10/2026 · Hugo
« Ils nous ont fait confiance » : UNE seule ligne qui défile, sans coupure.
Deux copies de la liste côte à côte dans la même piste, largeur = contenu,
translation de -50 % en boucle ; les bords sont fondus par un masque.
Chaque nom reste sur une seule ligne (white-space:nowrap), même hauteur
optique, et un reflet de métal le traverse au survol.
========================================================================= */
.confiance .bandeau-logos{
overflow:hidden!important;
max-width:100%!important;
padding-block:14px!important;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)!important;
mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)!important;
}
.confiance .bandeau-logos__piste{
display:flex!important;
flex-wrap:nowrap!important;
align-items:center!important;
width:max-content!important;
max-width:none!important;
gap:clamp(38px,4.4vw,76px)!important;
animation:webcraftFluxMetal 52s linear infinite!important;
will-change:transform;
}
.confiance .bandeau-logos:hover .bandeau-logos__piste{
animation-play-state:paused!important;
}
@keyframes webcraftFluxMetal{
from{transform:translate3d(0,0,0)}
to{transform:translate3d(-50%,0,0)}
}
.confiance .bandeau-logos__item{
position:relative!important;
flex:0 0 auto!important;
display:inline-block!important;
width:auto!important;
max-width:none!important;
padding:0!important;
margin:0!important;
font-family:"Instrument Sans","Public Sans",system-ui,sans-serif!important;
font-size:15px!important;
line-height:1.2!important;
font-weight:600!important;
letter-spacing:.17em!important;
text-transform:uppercase!important;
white-space:nowrap!important;
word-break:keep-all!important;
overflow:visible!important;
text-overflow:clip!important;
-webkit-box-reflect:none!important;
/* mono clair lisible sur la nuit : mercure, arête haute légère */
color:rgba(232,239,250,.88)!important;
text-shadow:0 1px 0 rgba(255,255,255,.10)!important;
background-image:linear-gradient(100deg,
rgba(255,255,255,0) 30%,
rgba(255,255,255,.95) 46%,
rgba(247,250,255,.95) 52%,
rgba(255,255,255,0) 68%)!important;
background-size:280% 100%!important;
background-position:180% 0!important;
-webkit-background-clip:text!important;
background-clip:text!important;
-webkit-text-fill-color:currentColor;
transition:color .4s ease!important;
}
/* Reflet de métal qui passe sur le nom survolé */
.confiance .bandeau-logos__item:hover{
color:#FFFFFF!important;
animation:webcraftNomReflet 1.5s ease-out forwards!important;
}
@keyframes webcraftNomReflet{
0%{background-position:180% 0}
100%{background-position:-60% 0}
}
@media (prefers-reduced-motion:reduce){
.confiance .bandeau-logos__piste{animation:none!important}
.confiance .bandeau-logos__item:hover{animation:none!important}
}
/* 24/10 (Raphaël : « pas aligné à gauche ») : la bande défile dans la largeur du contenu, sous le titre,
avec un fondu sur les deux bords. */
.confiance .enveloppe .bandeau-logos{margin-left:0;margin-right:0;width:100%;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
/* assets/hero-video-matiere.css */
/* =========================================================================
WEBCRAFT — la matière du hero BOUGE · 23/10/2026 · Hugo
Une vraie vidéo de métal liquide (Pixabay, drakemotion, licence libre)
en fond du hero, en boucle. L'image fixe reste : elle est l'affiche de la
vidéo ET le fond de secours si la vidéo ne démarre pas. Mouvement réduit :
la vidéo est coupée, l'affiche seule.
========================================================================= */
/* Le conteneur garde son dégradé de secours (matière fixe de la charte). */
.hero__matiere{
position:absolute;
inset:0;
overflow:hidden;
}
/* La vidéo : plein cadre, recadrée, très légèrement floutée pour la matière
et pour que le texte reste le sujet. */
.hero__matiere .hero__video{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:56% 50%;
filter:contrast(1.18) saturate(.85) brightness(.96);
opacity:.92;
/* fondu de raccord sur les bords : la vidéo se fond dans la nuit */
-webkit-mask-image:
linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 12%, #000 34%, #000 100%),
linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,0) 100%);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 12%, #000 34%, #000 100%),
linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,0) 100%);
mask-composite:intersect;
animation:hero-video-entree 1.6s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes hero-video-entree{
from{opacity:0}
to{opacity:.92}
}
/* Le voile de lisibilité passe PAR-DESSUS la vidéo (le pseudo-élément de
.hero__matiere est au-dessus de ses enfants dans l'ordre du DOM). */
.hero__matiere::after{
z-index:3;
}
/* Image fixe de secours : si le navigateur ne peut pas lire la vidéo, ou si
elle est refusée, l'affiche est peinte en fond du conteneur. */
.hero__matiere{
background-image:url("/assets/images/ia-mercure-nappe-liquide-hd.jpg");
background-size:cover;
background-position:56% 50%;
}
/* ---------- MOUVEMENT RÉDUIT : on éteint la vidéo, l'affiche reste ------- */
@media (prefers-reduced-motion:reduce){
.hero__matiere .hero__video{
display:none!important;
animation:none!important;
}
.hero__matiere{
background-image:url("/assets/images/ia-mercure-nappe-liquide-hd.jpg")!important;
background-size:cover!important;
background-position:56% 50%!important;
}
.hero .hero__titre .flux-mot::after{
animation:none!important;
opacity:0!important;
}
}
/* assets/hero-matiere-vraie.css */
/* =========================================================================
WEBCRAFT — hero : la vraie matière (mercure étalonné) · 23/10/2026 · Hugo
Remplace la fumée presque noire par hero-mercure.mp4 (luminosité 93,
contraste 147, mouvement 17,6 : « visible et vivante »).
Voile de lisibilité UNIQUEMENT en dégradé côté texte (gauche) ; à droite
et en bas, la matière se voit franchement.
========================================================================= */
/* 1. La vidéo : nette, contrastée, plein cadre. */
.hero .hero__matiere .hero__video{
opacity:1!important;
/* Matière vivante (canvas WebGL) : décalée à droite du titre et assombrie, pour que le texte blanc
reste lisible au pixel (bonnes-pratiques-design §5) et que les plis gardent leur relief. */
left:34%!important;width:66%!important;
filter:brightness(.62) contrast(1.15)!important;
}
/* 2. Le voile : un seul dégradé horizontal, opaque à gauche, nul à 58 %. */
.hero .hero__matiere::after{
content:""!important;
position:absolute!important;
inset:0!important;
background:
linear-gradient(90deg,
rgba(10,11,14,.96) 0%,
rgba(10,11,14,.90) 22%,
rgba(10,11,14,.68) 38%,
rgba(10,11,14,.30) 50%,
rgba(10,11,14,.06) 58%,
rgba(10,11,14,0) 66%)!important;
pointer-events:none!important;
animation:none!important;
}
/* 3. Le liseré / la nappe ajoutés précédemment ne doivent pas rabattre
la lumière sur la droite : on les neutralise. */
.hero .hero__matiere::before{
display:none!important;
}
/* 4. Bas du hero : un fondu vertical court seulement, pour la continuité. */
.hero::after{
background:linear-gradient(180deg,rgba(10,11,14,0) 78%,#0A0B0E 100%)!important;
}
/* 5. Mouvement réduit : l'affiche seule, aucun voile animé. */
@media (prefers-reduced-motion:reduce){
.hero .hero__matiere .hero__video{display:none!important}
.hero .hero__matiere{
background:#0A0B0E url("/assets/images/ia-mercure-nappe-liquide-hd.jpg") center/cover no-repeat!important;
}
}
/* assets/hero-verrou-final.css */
/* =========================================================================
WEBCRAFT — verrou final du hero · 23/10/2026
UN SEUL fichier pour : le mot « sur-mesure » et la bille du logo.
Il est chargé EN DERNIER : il gagne sur rail-align-surmesure.css,
sur-mesure-reset.css, sur-mesure-blanc.css, bille-point-exact.css et
logo-net.css, qui restent en place mais ne décident plus rien.
========================================================================= */
/* -------------------------------------------------------------------------
1) « sur-mesure » — blanc plein, lisible immédiatement.
Le mot est testé en lisibilité : couleur pleine, PAS de background-clip
sur le mot, PAS de text-shadow sombre (c'est l'ombre qui le noyait).
Seule fantaisie : un calque ::after avec le même texte exactement
superposé, découpé dans un dégradé qui glisse de -100 % à 200 %.
------------------------------------------------------------------------- */
.hero .hero__titre .flux-mot{
position:relative!important;
display:inline-block!important;
background:none!important;
background-image:none!important;
-webkit-background-clip:border-box!important;
background-clip:border-box!important;
color:#FFFFFF!important;
-webkit-text-fill-color:#FFFFFF!important;
filter:none!important;
text-shadow:none!important;
box-shadow:none!important;
animation:none!important;
/* lueur douce DERRIÈRE le mot, jamais d'ombre sombre */
isolation:isolate;
/* Une seule typographie pour tout le titre (Raphaël, 23/10) : même police, graisse et approche que la ligne 1. */
font-family:inherit!important;
font-weight:inherit!important;
font-size:inherit!important;
letter-spacing:inherit!important;
font-style:normal!important;
}
/* lueur claire, portée par le mot mais sans effet sur son remplissage */
.hero .hero__titre .flux-mot::before{
content:""!important;
position:absolute!important;
inset:-14% -6%!important;
z-index:-1!important;
border-radius:50%!important;
background:radial-gradient(60% 70% at 50% 55%, rgba(220,229,242,.28), rgba(220,229,242,.06) 62%, transparent 78%)!important;
filter:blur(10px)!important;
pointer-events:none!important;
}
/* l'éclat : MÊME texte, superposé, découpé dans le dégradé */
.hero .hero__titre .flux-mot::after{
content:attr(data-texte)!important;
position:absolute!important;
left:0!important;
top:0!important;
right:0!important;
bottom:0!important;
display:block!important;
margin:0!important;
padding:0!important;
z-index:1!important;
pointer-events:none!important;
color:transparent!important;
-webkit-text-fill-color:transparent!important;
background-image:linear-gradient(100deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0) 42%,
rgba(255,255,255,.92) 50%,
rgba(255,255,255,0) 58%,
rgba(255,255,255,0) 100%)!important;
background-size:260% 100%!important;
background-repeat:no-repeat!important;
-webkit-background-clip:text!important;
background-clip:text!important;
animation:hero-eclat-mot 5.4s cubic-bezier(.4,0,.3,1) infinite!important;
}
@keyframes hero-eclat-mot{
0% {background-position:180% 0}
62% {background-position:180% 0}
100% {background-position:-80% 0}
}
@media (prefers-reduced-motion:reduce){
.hero .hero__titre .flux-mot::after{display:none!important}
}
/* -------------------------------------------------------------------------
1 bis) RAIL : tout part du même bord gauche, au pixel.
Le pied (adresse, téléphone) portait un padding propre et « Poitiers »
un retrait ; les liens sont calés sur la même ligne de base.
------------------------------------------------------------------------- */
aside.rail,
.rail{padding-left:var(--rail-pad, 26px)!important}
aside.rail .rail__pied,
.rail .rail__pied,
aside.rail .rail__pied > *,
.rail .rail__pied > *,
aside.rail .rail__logo-alt,
.rail .rail__logo-alt,
aside.rail .rail__lieu,
.rail .rail__lieu{
padding-left:0!important;
margin-left:0!important;
text-indent:0!important;
border-left:0!important;
box-sizing:border-box!important;
}
/* Le rail gauche : un seul bord de départ pour TOUT (logo, liens, pied).
Le nom d'agence et le téléphone étaient en retrait de 8 px : on les remet
sur le bord, en les sortant de tout retrait hérité (padding, marges, indent). */
aside.rail .rail__marque,
.rail .rail__marque,
aside.rail .rail__logo-alt,
.rail .rail__logo-alt,
aside.rail .rail__pied a,
.rail .rail__pied a,
aside.rail .rail__pied > a[href^="tel"],
.rail .rail__pied > a[href^="tel"]{
margin-left:0!important;
padding-left:0!important;
border-left:0!important;
text-indent:0!important;
}
/* le nom d'agence (masqué visuellement) ne doit plus rien peser dans le flux */
aside.rail .rail__logo-alt,
.rail .rail__logo-alt{
position:absolute!important;
width:1px!important;
height:1px!important;
overflow:hidden!important;
clip-path:inset(50%)!important;
white-space:nowrap!important;
}
/* Le lien actif ne se décale plus : il se distingue par la lumière. */
aside.rail .rail__lien[aria-current],
.rail .rail__lien[aria-current],
aside.rail .rail__lien.est-actif,
.rail .rail__lien.est-actif,
aside.rail .rail__nav .rail__lien:first-child,
.rail .rail__nav .rail__lien:first-child{
transform:none!important;
padding-left:0!important;
}
/* -------------------------------------------------------------------------
2) LA BILLE — exactement sur le point rond de droite du symbole.
Logo logo-webcraft-mono-plat.png : 898 × 138 px, affiché 190 × 29 px.
Le point rond mesuré sur les pixels du PNG : 41 à 53 px en largeur
(soit 8,7 % à 11,2 % des 190 px) et 1 à 14 px en hauteur (soit 3,4 % à
48 % des 29 px). Centre = 47 px / 7,5 px = 24,7 % de la largeur et
26 % de la hauteur de l'image. Diamètre 13 px : il recouvre le point
exactement, sans déborder.
------------------------------------------------------------------------- */
aside.rail .rail__logo,
.rail .rail__logo{
position:relative!important;
display:block!important;
width:190px!important;
height:29px!important;
line-height:0!important;
overflow:visible!important;
}
aside.rail .rail__logo-plat,
.rail .rail__logo-plat{
display:block!important;
width:136px!important; /* réduit à la demande de Raphaël (23/10) : 190 → 136 px, proportions gardées */
height:20.9px!important;
max-width:none!important;
filter:none!important;
opacity:1!important;
}
aside.rail .rail__logo-bille,
.rail .rail__logo-bille{
position:absolute!important;
display:block!important;
background-image:url("/assets/images/bille-point-chrome.png")!important;
background-size:cover!important;
background-position:center!important;
background-repeat:no-repeat!important;
/* Centre du point rond, mesuré sur les pixels du logo (47 px et 7,5 px pour 190 px de large),
ramené à 136 px de large : 33,6 px et 5,4 px depuis le coin du logo. */
left:33.6px!important;
top:5.4px!important;
width:9.3px!important; /* suit le logo : 13 px × 136/190 */
height:9.3px!important;
overflow:visible!important;
max-width:none!important;
min-width:0!important;
box-sizing:border-box!important;
transform:translate(-50%,-50%)!important;
border:0!important;
border-radius:50%!important;
background:none!important;
padding:0!important;
box-shadow:none!important;
overflow:hidden!important;
object-fit:cover!important;
opacity:1!important;
filter:none!important;
pointer-events:none!important;
z-index:3!important;
animation:none!important;
}
/* léger reflet qui tourne sur la bille : un halo clair qui pivote */
aside.rail .rail__logo-bille::after,
.rail .rail__logo-bille::after{
content:""!important;
position:absolute!important;
inset:0!important;
border-radius:50%!important;
background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.85), rgba(255,255,255,0) 46%)!important;
mix-blend-mode:screen!important;
animation:bille-reflet-final 9s linear infinite!important;
pointer-events:none!important;
}
@keyframes bille-reflet-final{
0% {transform:rotate(0deg)}
100% {transform:rotate(360deg)}
}
@media (prefers-reduced-motion:reduce){
aside.rail .rail__logo-bille::after,
.rail .rail__logo-bille::after{animation:none!important}
}
/* -------------------------------------------------------------------------
3) Titre du hero : le mot porte son propre texte pour le calque d'éclat.
------------------------------------------------------------------------- */
/* assets/menu.css */
/* =========================================================================
MENU LATÉRAL — Webcraft · 23/10/2026
Ordre voulu par Raphaël : les expertises d'abord (agence SEO avant tout, puis l'IA, la création,
le marketing, le Studio), l'agence ensuite. Le logo mène à l'accueil (pas d'entrée « Home »).
Règles (skill bonnes-pratiques-design) : un seul bord gauche, icônes « + » sur un seul bord droit,
grille de 8 px, 2 tailles de texte, coordonnées et bouton réunis dans une carte (région commune).
========================================================================= */
aside.rail .menu{
display:flex;flex-direction:column;
margin-top:40px;
font-family:"Instrument Sans",system-ui,sans-serif;
}
/* Intitulés de groupe : petites capitales espacées (5 à 12 % d'interlettrage). */
aside.rail .menu__titre{
margin:0 0 8px;
font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:rgba(138,154,178,.9);
}
aside.rail .menu__titre:not(:first-child){margin-top:32px}
/* Entrées principales : même taille, même graisse, même rythme ; le « + » au bord droit. */
aside.rail .menu__entree{
display:flex;align-items:center;justify-content:space-between;gap:8px;
width:100%;box-sizing:border-box;
padding:8px 0;
font-size:15px;font-weight:500;line-height:1.4;letter-spacing:0;text-transform:none;
color:#DCE5F2;text-decoration:none;
cursor:pointer;list-style:none;
transition:color .2s ease-out;
}
aside.rail .menu__entree:hover,
aside.rail .menu__entree:focus-visible,
aside.rail details[open] > .menu__entree{color:#FFFFFF}
aside.rail .menu__entree--doux{color:rgba(220,229,242,.72)}
aside.rail summary.menu__entree::-webkit-details-marker{display:none}
aside.rail summary.menu__entree::marker{content:""}
aside.rail summary.menu__entree::after{
content:"+";flex:none;margin-left:auto;
width:16px;text-align:right;
font-size:16px;font-weight:400;line-height:1;
color:rgba(138,154,178,.9);
transition:transform .25s ease-out,color .2s ease-out;
}
aside.rail details[open] > summary.menu__entree::after{transform:rotate(45deg);color:#FFFFFF}
/* Badge « Nouveau » : discret, aligné sur la hauteur du texte. */
aside.rail .menu__nouveau{
margin-left:auto;
padding:2px 8px;border-radius:999px;
font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
color:#0A0B0E;background:#DCE5F2;
}
/* Sous-menu : un filet à gauche, texte en retrait de 16 px, plus petit et plus doux. */
aside.rail .menu__sous{
display:flex;flex-direction:column;
margin:0 0 8px;padding-left:16px;
border-left:1px solid rgba(138,154,178,.22);
}
aside.rail .menu__sous a{
padding:6px 0;
font-size:13.5px;line-height:1.4;
color:rgba(220,229,242,.64);text-decoration:none;
transition:color .2s ease-out;
}
aside.rail .menu__sous a:hover,
aside.rail .menu__sous a:focus-visible{color:#FFFFFF}
/* Carte de contact : adresse, téléphone et bouton dans une même région, mêmes bords intérieurs. */
aside.rail .menu__carte{
margin-top:auto;
font-family:"Instrument Sans",system-ui,sans-serif;
display:flex;flex-direction:column;gap:8px;
padding:16px;
border:1px solid rgba(220,229,242,.10);border-radius:16px;
background:rgba(220,229,242,.035);
}
aside.rail .menu__adresse{
margin:0;
font-size:12.5px;line-height:1.5;color:rgba(138,154,178,.95);
}
aside.rail .menu__tel{
font-size:14px;font-weight:600;letter-spacing:.02em;
color:#F7FAFF;text-decoration:none;
}
aside.rail .menu__tel:hover{text-decoration:underline;text-underline-offset:3px}
aside.rail .menu__cta{
display:flex;align-items:center;justify-content:space-between;gap:12px;
height:44px;margin-top:8px;padding:0 16px;box-sizing:border-box;
font-family:"Instrument Sans",system-ui,sans-serif;
border-radius:999px;
background:linear-gradient(135deg,#F7FAFF 0%,#DCE5F2 55%,#AEBBCE 100%);
color:#0A0B0E;text-decoration:none;
font-size:13.5px;font-weight:600;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
transition:transform .2s ease-out,filter .2s ease-out;
}
aside.rail .menu__cta:hover{transform:translateY(-1px);filter:brightness(1.05)}
aside.rail .menu__cta span{color:#0A0B0E!important;-webkit-text-fill-color:#0A0B0E!important;transition:transform .2s ease-out}
aside.rail .menu__cta:hover span{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
aside.rail .menu__entree,aside.rail .menu__sous a,aside.rail .menu__cta,aside.rail .menu__cta span,
aside.rail summary.menu__entree::after{transition:none}
}
/* Groupe avec badge (Expertise IA) : le badge se cale à droite, juste avant le « + ». */
aside.rail summary.menu__entree .menu__nouveau{margin-left:auto}
aside.rail summary.menu__entree:has(.menu__nouveau)::after{margin-left:12px}
/* Carte de contact (24/10, Raphaël : « pas aligné ») : le texte de la carte s'aligne sur le bord gauche du menu
et le bouton sur la colonne des « + » ; c'est le fond de la carte qui déborde de 17 px (16 de marge + 1 de bord). */
aside.rail .menu__carte{margin-inline:-17px}
/* assets/accueil.css */
/* =========================================================================
ACCUEIL — sections sous le hero · 23/10/2026
Une seule typographie (Plus Jakarta Sans), une seule matière (le mercure, teinté selon la section),
des rappels de marque (bande « Webcraft », signature en pied de page). Les animations au défilement
sont dans defilement.js ; sans JavaScript ou en mouvement réduit, tout est visible et immobile.
========================================================================= */
/* ---------- 1. Une seule typographie ---------- */
.mot-fort{font-family:inherit!important;font-style:normal!important;font-weight:inherit!important;color:#DCE5F2}
.citation{
margin:0;
font-family:"Plus Jakarta Sans",system-ui,sans-serif!important;
font-size:clamp(18px,1.5vw,22px)!important;font-weight:500;line-height:1.5!important;
color:#F7FAFF!important;
}
/* ---------- 3. Bande de marque ---------- */
.marque-bande{
position:relative;overflow:hidden;
padding:clamp(56px,6vw,96px) 0;display:flex;flex-direction:column;gap:28px;
border-top:1px solid rgba(220,229,242,.08);border-bottom:1px solid rgba(220,229,242,.08);
}
.marque-bande__piste{display:flex;align-items:center;gap:clamp(20px,2.2vw,40px);width:max-content;will-change:transform}
.marque-bande__mot{
font-family:"Plus Jakarta Sans",system-ui,sans-serif;
font-size:clamp(40px,4.6vw,84px);font-weight:300;letter-spacing:-.02em;line-height:1.1;white-space:nowrap;
color:rgba(220,229,242,.5);
}
/* Seul le nom de la marque est coulé dans le mercure : une matière régulière, qui glisse lentement. */
.marque-bande__mot--matiere{
font-weight:600;
background:none;
-webkit-text-fill-color:currentColor;color:var(--w-mercure-clair,#DCE5F2);
animation:none;
}
@keyframes marque-matiere{from{background-position:30% 45%}to{background-position:70% 55%}}
.marque-bande__point{flex:none;width:7px;height:7px;border-radius:50%;background:rgba(220,229,242,.55)}
.marque-bande__piste--petite{gap:24px;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(138,154,178,.9);white-space:nowrap}
.marque-bande__tiret{flex:none;width:28px;height:1px;background:rgba(220,229,242,.3)}
/* ---------- 4. Appel final dans la matière du hero (rappel de l'arrivée sur le site) ---------- */
.appel--matiere{
position:relative!important;overflow:hidden!important;isolation:isolate;
background:#0A0B0E!important;background-image:none!important;
border:1px solid rgba(220,229,242,.10)!important;border-radius:28px!important;
box-shadow:none!important;
}
.appel--matiere::before,.appel--matiere::after{content:none!important;display:none!important} /* halos de l'ancienne DA */
.appel--matiere .appel__matiere{
position:absolute;inset:0;width:100%;height:100%;z-index:-1;
filter:brightness(.62) contrast(1.15);
/* la matière s'efface côté texte : lisibilité au pixel, sans voile posé par-dessus */
-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 35%,#000 70%);
mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 35%,#000 70%);
}
.appel--matiere h2{max-width:14ch}
/* ---------- 6. Pied de page ---------- */
.pied__logo{display:inline-block;margin-bottom:16px}
.pied__logo img{display:block;width:136px;height:auto;filter:brightness(0) invert(1)}
.pied__signature{
margin:clamp(32px,5vw,72px) 0 clamp(16px,2vw,24px);
font-family:"Plus Jakarta Sans",system-ui,sans-serif;
font-size:clamp(64px,13.2vw,232px);font-weight:800;letter-spacing:-.025em;line-height:.82;white-space:nowrap;
background:none;
-webkit-text-fill-color:currentColor;color:var(--w-mercure-clair,#DCE5F2);
user-select:none;
}
/* ---------- Mouvement réduit : rien ne bouge ---------- */
@media (prefers-reduced-motion:reduce){
.marque-bande__mot--matiere{animation:none}
}
/* ---------- Défilement : GSAP prend la main sous le hero (l'ancien système .mv ne doit pas se superposer) ---------- */
.defilement-actif main section:not(.hero) .mv,
.defilement-actif main .appel.mv{opacity:1!important;transform:none!important;transition:none!important;animation:none!important;filter:none!important}
.defilement-actif .ligne{will-change:transform}
/* ---------- Purge de l'ancienne DA (violet / menthe) encore visible sur l'accueil ---------- */
section.solutions.flux-section{background-image:none!important}
.fleche,.fleche::before,.fleche::after{color:currentColor!important;background-image:none!important;box-shadow:none!important}
.projet-vedette::after{background-image:none!important;box-shadow:none!important}
.projet-vedette__num{color:#0A0B0E!important;background:rgba(10,11,14,.06)!important;border-color:rgba(10,11,14,.14)!important}
/* Cartes projet sur fond blanc : textes secondaires assez foncés (WCAG 4,5:1). */
.projet-vedette__secteur,.projet-carte__secteur{color:rgba(10,11,14,.74)!important}
.hero__note span::before{box-shadow:none!important}
/* ---------- Pied de page : liens lisibles sur la nuit ---------- */
.pied__col a{color:var(--w-gris,#a6b0c2)!important}
.pied__col a:hover,.pied__col a:focus-visible{color:#FFFFFF!important}
.pied__titre{margin:0 0 16px!important;font-family:"Plus Jakarta Sans",system-ui,sans-serif!important;font-size:11px!important;font-weight:600!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--w-gris,#a6b0c2)!important}
.pied__col{display:flex;flex-direction:column;gap:10px;font-family:"Plus Jakarta Sans",system-ui,sans-serif}
.pied__col a{font-size:14px!important;line-height:1.5}
.pied__col .pied__titre[style]{margin-top:24px!important}
.appel__actions{display:flex;flex-wrap:wrap;gap:12px}
.appel__actions .w-bouton{margin-top:0}
.pied__col .doux,.pied__bas{color:rgba(138,154,178,.9)!important}
/* ---------- Pied de page compact (24/10) : une rangée de pôles, l'agence sur une ligne, signature mesurée ---------- */
.pied{padding-block:clamp(48px,5vw,80px) 24px!important}
.pied__haut{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;padding-bottom:clamp(28px,3vw,40px);border-bottom:1px solid rgba(220,229,242,.10)}
.pied__haut .pied__logo{margin-bottom:12px}
.pied__adresse{margin:0;font-size:14px;line-height:1.6;color:rgba(138,154,178,.95)}
.pied__adresse a{color:rgba(220,229,242,.85);text-decoration:none;white-space:nowrap}
.pied__adresse a:hover,.pied__adresse a:focus-visible{color:#FFFFFF}
.pied__agence{display:flex;gap:28px;flex-wrap:wrap;font-family:"Plus Jakarta Sans",system-ui,sans-serif}
.pied__agence a{font-size:14px;font-weight:500;color:rgba(220,229,242,.85);text-decoration:none;transition:color .25s}
.pied__agence a:hover,.pied__agence a:focus-visible{color:#FFFFFF}
.pied__grille--poles{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:clamp(20px,2.4vw,40px)!important;padding-top:clamp(28px,3vw,40px)}
.pied__grille--poles .pied__titre{margin-bottom:8px!important}
.pied__grille--poles .pied__col{gap:8px!important}
.pied__signature{font-size:clamp(56px,8.4vw,150px)!important;margin:clamp(28px,3.4vw,52px) 0 clamp(12px,1.4vw,20px)!important}
@media (max-width:1100px){.pied__grille--poles{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:640px){.pied__grille--poles{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* assets/composants.css */
/* =========================================================================
COMPOSANTS DE L'ACCUEIL — Webcraft · 23/10/2026
Élégant, fin, sobre : une typographie (Plus Jakarta Sans), des filets fins, la matière en accent.
UN surtitre, UN titre de section, UN bouton (plein / ligne), UN filet — utilisés partout.
========================================================================= */
:root{
--w-nuit:#0A0B0E; --w-blanc:#F7FAFF; --w-argent:#DCE5F2;
--w-gris:rgba(220,229,242,.64); --w-gris-doux:rgba(220,229,242,.60);
--w-filet:rgba(220,229,242,.12); --w-filet-fort:rgba(220,229,242,.28);
--w-ease:cubic-bezier(.2,.7,.2,1);
}
.w-section{position:relative;padding:clamp(96px,10vw,168px) 0;font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--w-blanc)}
.w-section + .w-section{border-top:1px solid var(--w-filet)}
/* Surtitre : un filet court + capitales espacées (le même que dans le hero). */
.surtitre{
display:inline-flex;align-items:center;gap:14px;margin:0 0 24px;
font-family:"Plus Jakarta Sans",system-ui,sans-serif;
font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1;
color:rgba(220,229,242,.82);
}
.surtitre::before{content:"";width:28px;height:1px;background:var(--w-argent);flex:none}
.w-titre{
margin:0;max-width:18ch;
font-family:"Plus Jakarta Sans",system-ui,sans-serif!important;
font-size:clamp(40px,4.2vw,72px)!important;font-weight:600!important;letter-spacing:-.02em!important;line-height:1.04!important;
color:var(--w-blanc)!important;
}
.w-intro{margin:24px 0 0;max-width:52ch;font-size:clamp(16px,1.15vw,19px);line-height:1.6;color:var(--w-gris)}
.w-texte{margin:16px 0 0;max-width:52ch;font-size:16px;line-height:1.65;color:var(--w-gris)}
.w-entete{margin-bottom:clamp(48px,5vw,80px)}
.w-entete--ligne{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:end}
.w-entete--ligne .w-intro{margin:0;justify-self:end}
/* Boutons */
.w-bouton{
display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 24px;margin-top:32px;box-sizing:border-box;
border-radius:999px;border:1px solid transparent;
background:linear-gradient(135deg,#F7FAFF 0%,#DCE5F2 55%,#AEBBCE 100%);color:var(--w-nuit);
font-size:15px;font-weight:600;text-decoration:none;
transition:transform .25s var(--w-ease),filter .25s var(--w-ease);
}
.w-bouton:hover{transform:translateY(-1px);filter:brightness(1.05)}
.w-bouton span{transition:transform .25s var(--w-ease)}
.w-bouton:hover span{transform:translateX(3px)}
.w-bouton--ligne{background:transparent;color:var(--w-blanc);border-color:var(--w-filet-fort)}
.w-bouton--ligne:hover{border-color:var(--w-argent);filter:none}
/* ---------- HUB : trois volets de matière qui s'ouvrent ---------- */
/* La lumière de la section prend la couleur du pôle ouvert (transition douce de la couleur elle-même). */
@property --lueur{syntax:'';inherits:true;initial-value:#4C7DFF}
.w-hub{--lueur:#4C7DFF;transition:--lueur 1.2s var(--w-ease);overflow:hidden}
.w-hub__lueur{
position:absolute;inset:-10% -10% auto -10%;height:120%;pointer-events:none;z-index:0;
background:radial-gradient(48% 38% at 50% 62%,color-mix(in srgb,var(--lueur) 26%,transparent) 0%,transparent 70%);
opacity:.9;filter:blur(20px);
}
.w-hub > .enveloppe{position:relative;z-index:1}
.w-volets{display:flex;gap:12px;height:clamp(480px,36vw,620px)}
.w-volet{
position:relative;isolation:isolate;overflow:hidden;flex:1 1 0;min-width:0;
padding:28px!important;
border:1px solid var(--w-filet);border-radius:20px;background:var(--w-nuit);
padding:32px;display:flex;flex-direction:column;justify-content:space-between;
transition:flex-grow .7s var(--w-ease),border-color .4s var(--w-ease);
outline:none;cursor:pointer;
}
.w-volet.est-ouvert{flex-grow:3.6;border-color:color-mix(in srgb,var(--lueur) 45%,var(--w-filet-fort));cursor:default}
.w-volet:focus-visible{border-color:var(--w-argent)}
.w-volet__matiere{position:absolute;inset:0;width:100%;height:100%;z-index:-2;filter:brightness(.48) contrast(1.1);transition:filter .7s var(--w-ease)}
@media (min-width:901px){[data-volets] .w-volet__matiere{left:50%;width:var(--volet-large,100%);transform:translateX(-50%)}}
.w-volet.est-ouvert .w-volet__matiere{filter:brightness(.62) contrast(1.12)}
.w-volet::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(10,11,14,.1) 0%,rgba(10,11,14,.35) 45%,rgba(10,11,14,.88) 100%)}
.w-volet__tete{display:flex;flex-direction:column;gap:16px}
.w-volet__num{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--w-gris)}
.w-volet__titre{margin:0;font-size:clamp(18px,1.35vw,22px);font-weight:600;letter-spacing:-.015em;line-height:1.15;transition:font-size .5s var(--w-ease)}
.w-volet.est-ouvert .w-volet__titre{font-size:clamp(26px,2.1vw,34px)}
.w-volet__titre a{color:var(--w-blanc);text-decoration:none}
.w-volet__corps{
max-width:46ch;min-width:320px;opacity:0;visibility:hidden;transform:translateY(16px);
transition:opacity .45s var(--w-ease),transform .6s var(--w-ease),visibility 0s .45s;
}
.w-volet.est-ouvert .w-volet__corps{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--w-ease) .25s,transform .7s var(--w-ease) .25s,visibility 0s}
.w-volet__corps p{margin:0 0 24px;font-size:15.5px;line-height:1.6;color:rgba(232,240,250,.86)}
.w-volet__liens{list-style:none;margin:0;padding:0;border-top:1px solid var(--w-filet-fort)}
.w-volet__liens li{border-bottom:1px solid var(--w-filet)}
.w-volet__liens a{display:flex;justify-content:space-between;align-items:center;padding:12px 0;font-size:15px;font-weight:500;color:var(--w-blanc);text-decoration:none}
.w-volet__liens a span{color:var(--w-gris);transition:transform .25s var(--w-ease),color .25s}
.w-volet__liens a:hover span,.w-volet__liens a:focus-visible span{transform:translateX(4px);color:var(--w-blanc)}
/* Chiffres : fins et grands, posés sur un filet. */
.w-chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:clamp(56px,6vw,96px) 0 0;padding-top:32px;border-top:1px solid var(--w-filet)}
.w-chiffres div{display:flex;flex-direction:column;gap:8px}
.w-chiffres dd{order:-1;margin:0;font-size:clamp(56px,6vw,104px);font-weight:300;letter-spacing:-.025em;line-height:1;color:var(--w-blanc)}
.w-chiffres dt{font-size:14px;line-height:1.5;color:var(--w-gris);max-width:28ch}
/* ---------- MANIFESTE ---------- */
.w-manifeste__texte{margin:0;max-width:40ch;font-size:clamp(22px,1.95vw,34px);font-weight:400;letter-spacing:-.015em;line-height:1.4;color:var(--w-blanc)}
.w-manifeste__texte .mot{transition:color .2s}
.w-etapes{list-style:none;margin:clamp(80px,8vw,128px) 0 0;padding:40px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;position:relative}
.w-etapes::before,.w-etapes::after{content:"";position:absolute;left:0;right:0;top:0;height:1px}
.w-etapes::before{background:var(--w-filet)}
.w-etapes::after{background:linear-gradient(90deg,#F7FAFF,#AEBBCE);transform-origin:left;transform:scaleX(var(--p,1))}
.w-etape__num{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--w-gris)}
.w-etape h3{margin:24px 0 12px;font-size:24px;font-weight:600;letter-spacing:-.02em}
.w-etape p{margin:0;max-width:34ch;font-size:16px;line-height:1.65;color:var(--w-gris)}
/* ---------- RÉALISATIONS ---------- */
.w-projets .w-entete{margin-bottom:clamp(40px,4vw,64px)}
.w-galerie{overflow:hidden}
.w-galerie__piste{display:flex;gap:24px;width:max-content;padding:0 var(--w-gouttiere,clamp(24px,5vw,96px));will-change:transform}
.w-projet{flex:none;width:clamp(340px,28vw,480px);color:var(--w-blanc);text-decoration:none}
.w-projet--grand{width:clamp(440px,32vw,580px)}
.w-projet__visuel{margin:0;aspect-ratio:4/3;border-radius:16px;overflow:hidden;border:1px solid var(--w-filet);background:#121419}
.w-projet--grand .w-projet__visuel{aspect-ratio:4/3}
.w-projet__visuel img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .9s var(--w-ease)}
.w-projet:hover .w-projet__visuel img{transform:scale(1.04)}
.w-projet__meta{padding:20px 0 0}
.w-projet__meta h3{margin:0 0 6px;font-size:20px;font-weight:600;letter-spacing:-.01em}
.w-projet__meta p{margin:0;font-size:14px;line-height:1.5;color:var(--w-gris)}
.w-projet--fin{width:clamp(300px,24vw,380px);align-self:center;padding:32px}
.w-projet--fin p{margin:0;font-size:20px;line-height:1.5;color:var(--w-blanc)}
/* ---------- DEUX COLONNES : titre collant, contenu à droite ---------- */
.w-grille-2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,6vw,120px);align-items:start}
.w-collant{position:sticky;top:120px;margin-bottom:0}
.w-liste{list-style:none;margin:0;padding:0}
.w-liste li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;padding:32px 0;border-top:1px solid var(--w-filet)}
.w-liste li:last-child{border-bottom:1px solid var(--w-filet)}
.w-liste__num{padding-top:6px;font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--w-gris)}
.w-liste h3{margin:0 0 8px;font-size:22px;font-weight:600;letter-spacing:-.015em}
.w-liste p{margin:0;max-width:52ch;font-size:16px;line-height:1.65;color:var(--w-gris)}
/* ---------- ÉQUIPE ---------- */
.w-equipe{list-style:none;margin:0;padding:0}
.w-membre{display:grid;grid-template-columns:96px minmax(0,1fr);gap:28px;align-items:start;padding:32px 0;border-top:1px solid var(--w-filet)}
/* Portraits en noir et blanc dans un anneau argent : le fond clair des photos devient l'argent de la matière ; la couleur revient au survol. */
.w-membre__photo{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.08) brightness(.96);box-shadow:0 0 0 1px var(--w-filet-fort),0 0 0 5px rgba(220,229,242,.05);transition:filter .6s var(--w-ease),transform .6s var(--w-ease)}
.w-membre:hover .w-membre__photo{filter:none;transform:scale(1.04)}
.w-membre:last-child{border-bottom:1px solid var(--w-filet)}
.w-membre__initiales{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:15px;font-weight:600;letter-spacing:.04em;color:var(--w-nuit);background:radial-gradient(circle at 32% 28%,#FFFFFF 0%,#DCE5F2 38%,#8A9AB2 100%)}
.w-membre h3{margin:0;font-size:20px;font-weight:600}
.w-membre__role{margin:6px 0 12px!important;font-size:12px!important;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--w-gris)!important}
.w-membre p{margin:0;max-width:56ch;font-size:15.5px;line-height:1.65;color:var(--w-gris)}
/* ---------- TÉMOIGNAGES ---------- */
.w-citations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,96px)}
.w-citation{margin:0;padding-top:32px;border-top:1px solid var(--w-filet-fort)}
.w-citation blockquote{margin:0;font-size:clamp(22px,1.9vw,30px);font-weight:400;letter-spacing:-.015em;line-height:1.45;color:var(--w-blanc)}
.w-citation figcaption{display:flex;flex-direction:column;gap:4px;margin-top:32px}
.w-citation strong{font-size:15px;font-weight:600}
.w-citation span{font-size:13.5px;color:var(--w-gris)}
/* ---------- FAQ ---------- */
.w-question{border-top:1px solid var(--w-filet)}
.w-question:last-child{border-bottom:1px solid var(--w-filet)}
.w-question summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;cursor:pointer;list-style:none;font-size:18px;font-weight:500;line-height:1.4;color:var(--w-blanc)}
.w-question summary::-webkit-details-marker{display:none}
.w-question summary::after{content:"+";flex:none;margin-left:auto;font-size:20px;font-weight:300;color:var(--w-gris);transition:transform .3s var(--w-ease)}
.w-question[open] summary::after{transform:rotate(45deg);color:var(--w-blanc)}
.w-question p{margin:0;padding:0 48px 24px 0;max-width:62ch;font-size:16px;line-height:1.7;color:var(--w-gris)}
/* ---------- Petits écrans ---------- */
@media (max-width:900px){
.w-volets{flex-direction:column;height:auto}
.w-volet{flex:none;min-height:0}
.w-volet .w-volet__corps{opacity:1;visibility:visible;transform:none;margin-top:32px}
.w-chiffres,.w-etapes,.w-citations,.w-grille-2,.w-entete--ligne{grid-template-columns:1fr}
.w-entete--ligne .w-intro{justify-self:start}
.w-collant{position:static;margin-bottom:32px}
.w-galerie{overflow-x:auto;scroll-snap-type:x mandatory}
.w-projet{scroll-snap-align:start;width:80vw}
.w-projet--grand{width:86vw}
}
@media (prefers-reduced-motion:reduce){
.w-volet,.w-volet__corps,.w-volet__matiere,.w-projet__visuel img{transition:none}
}
/* ---------- VITRINE DES RÉALISATIONS ----------
Une scène épinglée : la liste des projets à gauche, un écran où le site archivé défile tout seul au fil du
défilement, un mobile qui le chevauche, une lumière à la couleur du projet. Les images viennent de l'archive
(archiver_site) : la vitrine reste intacte même si le site d'un client disparaît. */
@property --projet{syntax:'';inherits:true;initial-value:#C9A27A}
.w-vitrine{padding-bottom:0;--projet:#C9A27A;transition:--projet 1s var(--w-ease)}
.w-vitrine .w-entete{margin-bottom:48px}
.w-vitrine__scene{
position:relative;isolation:isolate;
height:min(100vh,940px);min-height:680px;box-sizing:border-box;
display:grid;grid-template-columns:minmax(240px,0.8fr) minmax(0,2fr);grid-template-rows:1fr auto;gap:24px clamp(32px,4vw,72px);
padding:clamp(24px,4vh,56px) var(--w-gouttiere,clamp(24px,5vw,96px)) clamp(24px,4vh,48px);
}
.w-vitrine__lueur{position:absolute;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(42% 48% at 66% 52%,color-mix(in srgb,var(--projet) 22%,transparent),transparent 72%)}
/* Liste des projets */
.w-vitrine__liste{list-style:none;margin:0;padding:0;align-self:center;display:flex;flex-direction:column}
.w-vitrine__nom{
display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;width:100%;
padding:9px 0;border:0;border-top:1px solid var(--w-filet);background:none;text-align:left;cursor:pointer;
font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--w-gris-doux);
transition:color .4s var(--w-ease);
}
.w-vitrine__liste li:last-child .w-vitrine__nom{border-bottom:1px solid var(--w-filet)}
.w-vitrine__num{grid-row:span 2;padding-top:3px;font-size:11px;font-weight:600;letter-spacing:.08em}
.w-vitrine__titre{font-size:clamp(15px,1.05vw,18px);font-weight:600;letter-spacing:-.01em;transition:transform .5s var(--w-ease)}
.w-vitrine__secteur{font-size:12.5px;line-height:1.5;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--w-ease),opacity .4s var(--w-ease),margin .5s var(--w-ease)}
.w-vitrine__nom:hover,.w-vitrine__nom:focus-visible{color:var(--w-gris)}
.w-vitrine__nom.est-actif{color:var(--w-blanc)}
.w-vitrine__nom.est-actif .w-vitrine__titre{transform:translateX(6px)}
.w-vitrine__nom.est-actif .w-vitrine__num{color:var(--projet)}
.w-vitrine__nom.est-actif .w-vitrine__secteur{max-height:40px;opacity:1;margin-top:4px;color:var(--w-gris);transform:translateX(6px)}
/* Écran (navigateur) */
.w-vitrine__ecran{
position:relative;align-self:center;width:100%;max-height:100%;aspect-ratio:16/10;
border-radius:14px;overflow:hidden;background:#101217;
border:1px solid var(--w-filet-fort);
box-shadow:0 40px 120px -40px color-mix(in srgb,var(--projet) 45%,transparent),0 30px 80px rgba(0,0,0,.6);
display:flex;flex-direction:column;
}
.w-vitrine__barre{flex:none;display:flex;align-items:center;gap:7px;height:42px;padding:0 16px;background:#16181E;border-bottom:1px solid var(--w-filet)}
.w-vitrine__barre span{width:9px;height:9px;border-radius:50%;background:rgba(220,229,242,.22)}
.w-vitrine__url{margin:0 auto;padding:4px 14px;border-radius:999px;background:rgba(220,229,242,.06);font-size:11.5px;letter-spacing:.02em;color:var(--w-gris)}
.w-vitrine__vue{position:relative;flex:1;overflow:hidden}
.w-vitrine__page{
position:absolute;inset:0;margin:0;
clip-path:inset(100% 0 0 0);transition:clip-path .9s cubic-bezier(.65,0,.2,1);
}
.w-vitrine__page.est-actif{clip-path:inset(0 0 0 0);z-index:1}
.w-vitrine__page.est-sortant{clip-path:inset(0 0 100% 0);transition:clip-path .9s cubic-bezier(.65,0,.2,1)}
.w-vitrine__page img{display:block;width:100%;height:auto;transform:translateY(var(--y,0))}
/* 30/10 (fluidité, Raphaël : « ça lague encore, notamment ce bloc ») : seuls le projet affiché et celui qui sort sont préparés
pour la carte graphique ; les 38 autres captures (jusqu'à 14 000 px de haut) restaient en mémoire graphique, cachées. */
.w-vitrine__page.est-actif img,.w-vitrine__page.est-sortant img{will-change:transform}
.w-vitrine__page:not(.est-actif):not(.est-sortant){visibility:hidden}
/* Fil de progression sous le projet en cours de lecture */
.w-vitrine__nom{position:relative}
.w-vitrine__nom::after{content:"";position:absolute;left:52px;right:0;bottom:-1px;height:1px;background:var(--projet);transform:scaleX(0);transform-origin:left}
.w-vitrine__nom.en-cours::after{animation:vitrine-progres var(--duree,13000ms) linear forwards}
@keyframes vitrine-progres{to{transform:scaleX(1)}}
.w-vitrine__nom:focus{outline:none}
.w-vitrine__nom:focus-visible{outline:1px solid var(--w-filet-fort);outline-offset:4px;border-radius:4px}
/* Mobile qui chevauche l'écran */
.w-vitrine__mobile{
position:absolute;right:max(var(--w-gouttiere,24px),3vw);bottom:clamp(96px,13vh,140px);z-index:2;
width:clamp(150px,11vw,210px);aspect-ratio:9/19.5;border-radius:28px;padding:8px;box-sizing:border-box;
background:#0d0f13;border:1px solid var(--w-filet-fort);box-shadow:0 30px 80px rgba(0,0,0,.7);
display:flex;
}
.w-vitrine__mobile .w-vitrine__vue{border-radius:21px}
/* Pied de la scène */
.w-vitrine__pied{grid-column:2;display:flex;align-items:center;justify-content:flex-start;gap:32px}
.w-vitrine__pied .w-bouton{margin-top:0}
.w-vitrine__compteur{margin:0;font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--w-gris)}
.w-vitrine__compteur span{color:var(--w-blanc)}
@media (max-width:900px){
.w-vitrine__scene{height:auto;grid-template-columns:1fr;padding:0 16px 48px}
.w-vitrine__mobile{display:none}
.w-vitrine__ecran{aspect-ratio:4/5}
}
@media (prefers-reduced-motion:reduce){.w-vitrine__page,.w-vitrine__titre,.w-vitrine__secteur{transition:none}}
/* ---------- POURQUOI WEBCRAFT : la raison lue s'allume, le grand chiffre en mercure suit ---------- */
.w-pourquoi__numero{display:flex;align-items:flex-end;gap:12px;margin-top:clamp(40px,5vw,72px);height:clamp(120px,12vw,200px);overflow:hidden}
.w-pourquoi__numero span{
display:block;font-size:clamp(120px,12vw,200px);font-weight:600;letter-spacing:-.025em;line-height:1;
background:url("/assets/images/ia-mercure-nappe-liquide-1600.jpg") 50% 50%/260% auto no-repeat; /* 30/10 : copie 1 600 px (même rendu, 4× moins à redessiner) */
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
filter:brightness(1.2);animation:marque-matiere 14s ease-in-out infinite alternate;
}
/* 30/10 (Raphaël : « ça saute, notamment le bloc agence ») : ces reflets métal sont redessinés à chaque image ; pendant le
défilement ils s'arrêtent une fraction de seconde (classe posée par matiere-vivante.js) et reprennent ensuite. */
html.en-defilement .w-pourquoi__numero span,html.en-defilement .w-chiffres--metal dd,html.en-defilement .hero .hero__titre .flux-mot,html.en-defilement .flux-mot{animation-play-state:paused!important}
.w-pourquoi__numero em{padding-bottom:18px;font-style:normal;font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--w-gris)}
.w-liste--active li{transition:opacity .5s var(--w-ease)}
.defilement-actif .w-liste--active li{opacity:.32}
.defilement-actif .w-liste--active li.est-actif{opacity:1}
.w-liste--active li h3{transition:transform .5s var(--w-ease)}
.w-liste--active li.est-actif h3{transform:translateX(8px)}
.w-liste--active li .w-liste__num{transition:color .5s var(--w-ease)}
.w-liste--active li.est-actif .w-liste__num{color:var(--w-blanc)}
@media (max-width:900px){.w-pourquoi__numero{display:none}}
/* Titres révélés ligne par ligne (SplitText, masque) : le masque laisse passer les jambages (g, p, q, j). */
.w-titre > div,.appel h2 > div{padding-bottom:.16em!important;margin-bottom:-.16em!important}
/* ---------- Témoignages : rangée qui défile sur le côté (5 avis) ---------- */
.w-temoignages .w-entete--ligne{grid-template-columns:minmax(0,1fr) auto;align-items:end}
.w-avis{display:flex;flex-direction:column;align-items:flex-end;gap:24px}
.w-avis__note{display:flex;align-items:baseline;gap:10px;color:var(--w-blanc);text-decoration:none}
.w-avis__note strong{font-size:clamp(32px,2.6vw,44px);font-weight:500;letter-spacing:-.02em;line-height:1}
.w-avis__note span{font-size:13.5px;color:var(--w-gris);transition:color .3s var(--w-ease)}
.w-avis__note:hover span,.w-avis__note:focus-visible span{color:var(--w-blanc)}
.w-avis__nav{display:flex;align-items:center;gap:16px}
.w-avis__compteur{min-width:64px;text-align:center;font-size:13px;font-weight:500;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--w-gris)}
.w-avis__compteur [data-citations-pos]{color:var(--w-blanc)}
.w-avis__bouton{
width:52px;height:52px;border-radius:50%;border:1px solid var(--w-filet-fort);background:transparent;
color:var(--w-blanc);font:inherit;font-size:18px;line-height:1;cursor:pointer;
transition:background .3s var(--w-ease),color .3s var(--w-ease),border-color .3s var(--w-ease),opacity .3s var(--w-ease);
}
.w-avis__bouton:hover,.w-avis__bouton:focus-visible{background:var(--w-blanc);color:var(--w-nuit);border-color:var(--w-blanc)}
.w-avis__bouton:disabled{opacity:.3;pointer-events:none}
.w-citations--defile{
display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:min(520px,82%);
gap:clamp(32px,4vw,72px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);
}
.w-citations--defile::-webkit-scrollbar{display:none}
.w-citations--defile.au-bout{-webkit-mask-image:none;mask-image:none}
.w-citations--defile:focus-visible{outline:1px solid var(--w-filet-fort);outline-offset:12px}
.w-citations--defile .w-citation{scroll-snap-align:start;display:flex;flex-direction:column;justify-content:space-between}
.w-citations--defile .w-citation blockquote{font-size:clamp(20px,1.55vw,26px)}
@media (max-width:900px){
.w-temoignages .w-entete--ligne{grid-template-columns:1fr}
.w-avis{align-items:flex-start}
.w-citations--defile{grid-template-columns:none;grid-auto-columns:86%}
}
/* L'intro reste sous le titre (colonne gauche) même quand l'en-tête est en deux colonnes (24/10). */
.w-temoignages .w-entete--ligne > div .w-intro{margin:24px 0 0;justify-self:auto}
/* ---------- Chiffres vivants (24/10, Raphaël : « pas intéressant, pas aligné ») ----------
Trois cartes de même hauteur : une illustration animée, le nombre, la légende — tout aligné en haut. */
.w-chiffres--vivant{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-top:0;border-top:0;align-items:stretch}
.w-chiffre{display:flex!important;flex-direction:column;gap:0!important;padding:28px;border-radius:22px;border:1px solid var(--w-filet);background:linear-gradient(180deg,rgba(220,229,242,.035),rgba(220,229,242,.01))}
.w-chiffres--vivant dd{order:0!important;margin:28px 0 10px!important;font-size:clamp(56px,5vw,88px)!important;line-height:1!important}
.w-chiffres--vivant dt{max-width:30ch;font-size:15px;line-height:1.55;color:var(--w-gris)}
.w-chiffre__visuel{height:120px;display:flex;align-items:center}
.w-anneau{width:120px;height:120px;transform:rotate(-90deg)}
.w-anneau circle{fill:none;stroke:var(--w-filet);stroke-width:7}
.w-anneau .w-anneau__plein{stroke:url(#w-degrade-anneau);stroke:#DCE5F2;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:5;transition:stroke-dashoffset 2s var(--w-ease)}
.w-chiffres--vivant.attend .w-anneau__plein{stroke-dashoffset:100}
.w-billes{display:flex;gap:12px}
.w-billes i{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#FFFFFF 0%,var(--c) 38%,color-mix(in srgb,var(--c) 40%,#0A0B0E) 100%);box-shadow:0 10px 24px -8px var(--c);transition:transform .7s cubic-bezier(.3,1.6,.5,1),opacity .4s;transition-delay:calc(var(--k,0) * 140ms)}
.w-billes i:nth-child(2){--k:1}.w-billes i:nth-child(3){--k:2}.w-billes i:nth-child(4){--k:3}.w-billes i:nth-child(5){--k:4}
.w-chiffres--vivant.attend .w-billes i{opacity:0;transform:translateY(16px) scale(.5)}
.w-cases{display:grid;grid-template-columns:repeat(10,14px);gap:6px}
.w-cases i{width:14px;height:14px;border-radius:4px;background:#DCE5F2;transition:opacity .3s,transform .4s;transition-delay:calc(var(--k,0) * 28ms)}
.w-chiffres--vivant.attend .w-cases i{opacity:.08;transform:scale(.6)}
@media (max-width:900px){.w-chiffres--vivant{grid-template-columns:1fr}}
.w-chiffres--vivant .w-chiffre__visuel{flex-direction:row!important;justify-content:flex-start!important;align-items:center;gap:0!important}
/* ---------- Chiffres en métal (24/10, Raphaël : les cartes à pictos étaient « horribles ») ----------
Plus de cartes ni de pictos : trois très grands chiffres en chrome liquide (un dégradé métal dont le reflet
glisse lentement dans les lettres), séparés par de simples filets. Une seule touche de couleur :
le « 5 » prend les cinq teintes des pôles. Les compteurs montent à l'arrivée (data-compteur). */
.w-chiffres--metal{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding-top:0;border-top:1px solid var(--w-filet);border-bottom:1px solid var(--w-filet)}
.w-chiffres--metal .w-chiffre{padding:clamp(40px,4vw,64px) clamp(24px,3vw,56px) clamp(36px,3.4vw,52px)!important;border:0;border-radius:0;background:none;box-shadow:none}
.w-chiffres--metal .w-chiffre:first-child{padding-left:0!important}
.w-chiffres--metal .w-chiffre + .w-chiffre{border-left:1px solid var(--w-filet)}
.w-chiffres--metal dd{order:0!important;margin:0 0 20px!important;font-size:clamp(88px,9vw,164px)!important;font-weight:600;line-height:.92!important;letter-spacing:-.055em;font-variant-numeric:tabular-nums;white-space:nowrap;align-self:flex-start;padding-right:.1em;
color:#DCE5F2;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;
background-image:linear-gradient(172deg,#FFFFFF 0%,#E9EEF6 30%,#8C97AA 46%,#3B4252 50%,#B9C4D6 56%,#F7FAFF 72%,#9AA6BA 100%);
background-size:100% 260%;background-position:0 0;animation:w-metal-coule 9s ease-in-out infinite alternate}
.w-chiffres--metal .w-chiffre:nth-child(2) dd{animation-delay:-3s}
.w-chiffres--metal .w-chiffre:nth-child(3) dd{animation-delay:-6s}
.w-chiffres--metal .w-chiffre--poles dd{background-image:linear-gradient(100deg,rgba(76,125,255,.9),rgba(56,198,232,.9) 28%,rgba(122,59,255,.9) 52%,rgba(224,137,75,.9) 76%,rgba(220,229,242,.9)),linear-gradient(172deg,#FFFFFF 0%,#E9EEF6 30%,#8C97AA 46%,#3B4252 50%,#B9C4D6 56%,#F7FAFF 72%,#9AA6BA 100%);
background-size:100% 100%,100% 260%;background-blend-mode:multiply;animation-name:w-metal-coule-poles}
.w-chiffres--metal dt{order:1!important;max-width:28ch;font-size:15px;line-height:1.55;color:var(--w-gris)}
@keyframes w-metal-coule{to{background-position:0 100%}}
@keyframes w-metal-coule-poles{to{background-position:0 0,0 100%}}
@media (max-width:760px){
.w-chiffres--metal{grid-template-columns:1fr}
.w-chiffres--metal .w-chiffre{padding-left:0!important;padding-right:0!important}
.w-chiffres--metal .w-chiffre + .w-chiffre{border-left:0;border-top:1px solid var(--w-filet)}
}
@media (prefers-reduced-motion:reduce){.w-chiffres--metal dd{animation:none}}
/* ---------- Vitrine : même bord gauche que le reste de la page (24/10, Raphaël : « alignement gauche pas bon ») ----------
La scène reste pleine largeur (pour la lueur), mais son contenu démarre exactement où démarre .enveloppe :
marge + moitié de l'espace laissé par la largeur maximale (1280 px, 1640 px à partir de 1900 px). */
:root{--w-env-max:1280px}
@media (min-width:1900px){:root{--w-env-max:1640px}}
@media (min-width:761px){
.w-vitrine__scene{padding-inline:max(var(--w-gouttiere,clamp(24px,5vw,96px)),calc((100% - var(--w-env-max)) / 2 + var(--w-gouttiere,clamp(24px,5vw,96px))))}
}
/* 24/10 (Raphaël : « les chiffres sont très gros, le bloc pas terrible ») : bandeau plus fin.
Chiffres réduits de moitié, le chiffre et sa phrase côte à côte, moins de hauteur. */
.w-chiffres--metal .w-chiffre{flex-direction:row!important;align-items:center;gap:clamp(16px,1.6vw,28px)!important;padding:clamp(24px,2.4vw,40px) clamp(20px,2.4vw,44px)!important}
.w-chiffres--metal dd{margin:0!important;font-size:clamp(44px,3.7vw,64px)!important;font-weight:500;letter-spacing:-.04em;align-self:center}
.w-chiffres--metal dt{max-width:24ch;font-size:14.5px;line-height:1.5}
@media (max-width:760px){.w-chiffres--metal .w-chiffre{padding-inline:0!important}}
/* Vitrine, pied (24/10, Raphaël : « pas bien placé ») : le compteur se cale sous la liste (bord gauche de la page),
le bouton « Voir le projet » au bord droit de l'écran. Plus rien ne flotte au milieu. */
.w-vitrine__pied{grid-column:1 / -1;justify-content:space-between}
/* ---------- Mobile (24/10, recette) : le hero de l'accueil dépassait de l'écran (grille à deux colonnes, pastille insécable) ---------- */
@media (max-width:760px){
.hero .hero__grille{grid-template-columns:minmax(0,1fr)!important}
.hero .pastille{white-space:normal!important;max-width:100%}
.hero .hero__ligne{white-space:normal!important}
.hero .hero__titre{overflow-wrap:break-word}
}
/* Le hero est une grille à zones nommées sur deux colonnes (flux-hero-ajustements.css) : sur téléphone, une seule colonne,
dans l'ordre de lecture, la légende (« Agence créée en 2024… ») en dernier. */
@media (max-width:760px){
html .hero .hero__grille{grid-template-areas:"spe" "titre" "chapeau" "actions" "appui"!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto!important}
html .hero .hero__grille > *{grid-column:1!important;min-width:0}
html .hero .hero__grille > .pastille{grid-row:1!important}
html .hero .hero__grille > .hero__titre{grid-row:2!important}
html .hero .hero__grille > .chapeau{grid-row:3!important;max-width:100%!important}
html .hero .hero__grille > .hero__actions{grid-row:4!important}
html .hero .hero__grille > .hero__note{grid-row:5!important;align-self:start!important;margin-top:32px!important}
}
/* 24/10 (Raphaël : « on ne comprend pas pourquoi c'est multicolore ») : le « 5 » reprend le même métal que les autres chiffres. */
.w-chiffres--metal .w-chiffre--poles dd{background-image:linear-gradient(172deg,#FFFFFF 0%,#E9EEF6 30%,#8C97AA 46%,#3B4252 50%,#B9C4D6 56%,#F7FAFF 72%,#9AA6BA 100%)!important;background-size:100% 260%!important;background-blend-mode:normal!important;animation-name:w-metal-coule!important}
.insecable{white-space:nowrap}
/* 24/10 (audit Studio) : dans les listes « Pourquoi … », les lignes inactives restaient presque invisibles (32 %) : 55 %. */
.defilement-actif .w-liste--active li{opacity:.55}
/* 25/10 (Raphaël : « deux images qui se superposent ») : l'image de secours du hero (la nappe de l'accueil) restait peinte
derrière le fond animé et transparaissait sur toutes les pages. Dès que la matière animée est prête, on l'efface. */
.hero__matiere:has(canvas.matiere-vivante--pret){background-image:none!important}
[data-pole] .hero__matiere{background-image:none!important}
/* ---------- Hub des pôles, version nette (25/10, Raphaël : « revoir ce bloc, pour que ce soit clean ») ----------
Même logique que le menu : les volets fermés en noir et blanc, calmes ; le volet ouvert prend sa couleur
(matière, numéro, liseré) ; son texte repose sur un dégradé sombre ; les titres des cinq volets sont alignés. */
.w-volet__matiere{filter:grayscale(1) brightness(.34) contrast(1.15)!important;transition:filter .8s var(--w-ease)}
.w-volet.est-ouvert .w-volet__matiere{filter:grayscale(0) brightness(.66) contrast(1.1)!important}
.w-volet:not(.est-ouvert):hover .w-volet__matiere{filter:grayscale(.6) brightness(.44) contrast(1.12)!important}
.w-volet::after{background:linear-gradient(180deg,rgba(10,11,14,.55) 0%,rgba(10,11,14,.05) 26%,rgba(10,11,14,.25) 50%,rgba(10,11,14,.94) 84%)!important}
.w-volet.est-ouvert::after{background:linear-gradient(180deg,rgba(10,11,14,.6) 0%,rgba(10,11,14,.05) 24%,rgba(10,11,14,.2) 40%,rgba(10,11,14,.9) 66%,rgba(10,11,14,.97) 100%)!important}
.w-volet__tete{min-height:calc(2 * 1.15em + 13px + 16px)}
.w-volet__titre{min-height:2.3em;font-size:clamp(18px,1.35vw,22px)!important}
.w-volet.est-ouvert .w-volet__titre{font-size:clamp(26px,2.1vw,34px)!important}
.w-volet__num{color:rgba(220,229,242,.5)!important;transition:color .5s}
.w-volet.est-ouvert .w-volet__num{color:var(--lueur,#DCE5F2)!important}
.w-volet.est-ouvert{border-color:color-mix(in srgb,var(--lueur,#DCE5F2) 60%,transparent)!important;box-shadow:0 40px 90px -50px color-mix(in srgb,var(--lueur,#DCE5F2) 70%,transparent)}
.w-volet__corps p{max-width:52ch}
.w-volet__liens a:hover,.w-volet__liens a:focus-visible{color:var(--lueur,#FFFFFF)}
/* >>> fonds des cartes de renvoi — écrit par pages-pole/fonds.py, ne pas modifier à la main */
[data-ponts] a{isolation:isolate}
[data-ponts] .pont__matiere{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block;filter:grayscale(1) brightness(.55) contrast(1.1);opacity:.75;transition:filter .7s,opacity .7s}
[data-ponts] a:hover .pont__matiere,[data-ponts] a:focus-visible .pont__matiere{filter:none;opacity:1}
[data-ponts] a::before{z-index:-1!important;inset:0!important;height:auto!important;opacity:1!important;background:linear-gradient(180deg,rgba(10,11,14,.45) 0%,rgba(10,11,14,.05) 35%,rgba(10,11,14,.9) 80%)!important}
/* <<< fonds des cartes de renvoi */
/* 28/10/2026 : sur un écran peu haut (ex. 1000×700), la liste des 20 réalisations et le pied « Voir le projet »
débordaient de la hauteur fixe et passaient sous le bandeau défilant. La scène grandit désormais avec son contenu
(même hauteur qu’avant quand tout tient). */
.w-vitrine__scene{height:auto;min-height:max(680px,min(100vh,940px))}
/* Recette 28/10 : liens du pied de page assez grands pour le doigt sur mobile (cible 44 px, WCAG 2.5.5 / Apple HIG). */
@media (max-width: 767px) {
.pied a:not(.pied__logo) { display: flex; align-items: center; min-height: 44px; }
.pied__adresse a { display: inline-flex; }
}
/* assets/pole.css */
/* =========================================================================
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("/assets/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 , 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%}
}
/* assets/pages/projet.css */
/* PAGE PROJET — gabarit commun aux 18 réalisations (24/10/2026). Chaque page prend la couleur de son projet (--projet) :
le hero montre le premier écran du site, puis le site défile dans son écran au rythme de la page, le mobile à côté.
Préfixe pj-. */
.pj{--pole:var(--projet)}
.pj-hero{position:relative;overflow:hidden;min-height:min(92vh,900px);display:flex;align-items:flex-end;padding:clamp(120px,14vh,180px) 0 clamp(56px,8vh,96px)}
.pj-hero__fond{position:absolute;inset:0;z-index:-1}
.pj-hero__fond img{width:100%;height:100%;object-fit:cover;object-position:top;filter:saturate(.9) brightness(.42);transform:scale(1.06);animation:pj-approche 18s ease-out both}
.pj-hero__fond::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,14,.2),rgba(10,11,14,.55) 50%,#0A0B0E 96%),radial-gradient(60% 70% at 20% 90%,color-mix(in srgb,var(--projet) 35%,transparent),transparent 70%)}
@keyframes pj-approche{from{transform:scale(1.14)}}
.pj-hero__texte{position:relative}
.pj-retour{display:inline-flex;gap:8px;margin-bottom:28px;font-size:14px;font-weight:500;color:var(--w-gris);text-decoration:none}
.pj-retour:hover{color:var(--w-blanc)}
.pj-hero .pastille::before{background:var(--projet)}
.pj-hero__titre{margin:18px 0 22px;max-width:16ch;font-size:clamp(52px,7vw,124px);font-weight:700;letter-spacing:-.045em;line-height:.98;color:#F7FAFF}
.pj-livrables{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px;padding:0}
.pj-livrables li{padding:8px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--projet) 60%,transparent);background:color-mix(in srgb,var(--projet) 14%,rgba(10,11,14,.6));font-size:13.5px;font-weight:500;color:#F7FAFF;backdrop-filter:blur(6px)}
.pj-defile{position:relative;height:260vh}
.pj-defile__scene{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;background:radial-gradient(50% 60% at 60% 50%,color-mix(in srgb,var(--projet) 16%,transparent),transparent 70%)}
.pj-defile__grille{display:grid;grid-template-columns:minmax(0,1fr) clamp(180px,17vw,280px);gap:clamp(24px,3vw,56px);align-items:center}
.pj-ecran{border-radius:16px;overflow:hidden;border:1px solid var(--w-filet-fort);background:#0C0D11;box-shadow:0 60px 120px -50px rgba(0,0,0,.95)}
.pj-ecran__barre{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;background:#15171D;border-bottom:1px solid var(--w-filet)}
.pj-ecran__barre span{width:10px;height:10px;border-radius:50%;background:#2A2E39}
.pj-ecran__barre p{margin:0 auto;padding:4px 14px;border-radius:999px;background:#0C0D11;font-size:12px;color:var(--w-gris)}
.pj-ecran__vue{height:min(70vh,640px);overflow:hidden}
.pj-ecran__vue img,.pj-mobile__vue img{width:100%;height:auto;will-change:transform}
.pj-mobile{padding:10px;border-radius:38px;background:linear-gradient(150deg,#3A3F4D,#14161C 40%,#2A2E39);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 50px 100px -40px rgba(0,0,0,.9)}
.pj-mobile__vue{aspect-ratio:9/19;border-radius:30px;overflow:hidden;background:#0C0D11}
.pj-fiche__texte{margin:0 0 32px;font-size:clamp(19px,1.5vw,24px);line-height:1.55;color:#E7E9EE}
.pj-fiche__infos{display:grid;grid-template-columns:1fr 1fr;margin:0;border-top:1px solid var(--w-filet)}
.pj-fiche__infos div{padding:18px 0;border-bottom:1px solid var(--w-filet)}
.pj-fiche__infos dt{margin-bottom:6px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--projet)}
.pj-fiche__infos dd{margin:0;font-size:16px;color:var(--w-blanc);overflow-wrap:anywhere}
.pj-suivant{padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--w-filet)}
.pj-suivant__lien{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:center;color:inherit;text-decoration:none}
.pj-suivant__titre{display:flex;flex-direction:column;gap:10px}
.pj-suivant__titre small{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--suivant)}
.pj-suivant__titre strong{font-size:clamp(40px,4.6vw,80px);font-weight:600;letter-spacing:-.04em;line-height:1.02;transition:transform .6s var(--w-ease)}
.pj-suivant__titre span{font-size:16px;color:var(--w-gris)}
.pj-suivant__image{display:block;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--w-filet)}
.pj-suivant__image img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.2s var(--w-ease)}
.pj-suivant__lien:hover .pj-suivant__titre strong{transform:translateX(12px)}
.pj-suivant__lien:hover .pj-suivant__image img{transform:scale(1.05)}
@media (max-width:1000px){
.pj-defile{height:auto}.pj-defile__scene{position:relative;height:auto;padding:72px 0}
.pj-defile__grille,.pj-suivant__lien{grid-template-columns:1fr}.pj-mobile{max-width:260px;justify-self:center}
.pj-ecran__vue{height:auto;max-height:70vh}
}
@media (prefers-reduced-motion:reduce){.pj-hero__fond img{animation:none}}
/* Le fond du hero passe devant le fond de page (isolation), le lien retour a sa propre ligne */
.pj-hero{isolation:isolate}
.pj-retour{display:flex;width:fit-content}
/* Le site du client reste une ambiance derrière le titre : plus sombre, légèrement flou, et voilé à gauche où l'on lit */
.pj-hero__fond img{filter:saturate(.85) brightness(.34) blur(3px)}
.pj-hero__fond::after{background:linear-gradient(90deg,#0A0B0E 8%,rgba(10,11,14,.7) 45%,rgba(10,11,14,.25)),linear-gradient(180deg,transparent 50%,#0A0B0E 97%),radial-gradient(60% 70% at 20% 90%,color-mix(in srgb,var(--projet) 35%,transparent),transparent 70%)}
.pj-hero .pastille{border:0;background:none;padding:0;box-shadow:none}
/* assets/navigation.css */
/* =========================================================================
NAVIGATION — Webcraft · 24/10/2026 (Raphaël : option B, à la place du menu à gauche)
1. Une barre fine en haut : le logo, « Parlons de votre projet », le bouton Menu. Transparente en haut de page,
elle se voile (flou sombre) dès qu'on fait défiler.
2. Un menu plein écran : les 5 pôles en grand, numérotés ; au survol d'un pôle, son mercure s'allume à droite,
dans sa couleur, comme les volets du hub de l'accueil. L'agence et les coordonnées en pied.
========================================================================= */
/* Plus de colonne de menu : la page prend toute la largeur */
.shell{display:block!important;grid-template-columns:none!important}
.shell > main,.plan{grid-column:auto!important;max-width:none!important;width:100%!important}
aside.rail,.rail,.voile,.bandeau{display:none!important}
/* ---------- 1. La barre fine ---------- */
.nb{position:fixed;inset:0 0 auto 0;z-index:900;display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 clamp(20px,3vw,48px);
font-family:"Plus Jakarta Sans",system-ui,sans-serif;transition:background .5s,backdrop-filter .5s,border-color .5s,transform .5s cubic-bezier(.22,1,.36,1);border-bottom:1px solid transparent}
.nb.est-defile{background:rgba(10,11,14,.62);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border-bottom-color:rgba(220,229,242,.08)}
.nb.est-cachee{transform:translateY(-100%)}
.nb__marque{display:block;line-height:0}
.nb__marque img{width:150px!important;height:auto!important;object-fit:contain!important;filter:none!important;mix-blend-mode:screen}
.nb__droite{display:flex;align-items:center;gap:10px}
.nb__cta,.nb__menu{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;border-radius:999px;font:600 14px/1 "Plus Jakarta Sans",system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:background .3s,color .3s,border-color .3s,transform .3s}
.nb__cta{color:#0A0B0E;background:linear-gradient(135deg,#F7FAFF 0%,#DCE5F2 55%,#AEBBCE 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.nb__cta:hover{transform:translateY(-1px)}
.nb__menu{border:1px solid rgba(220,229,242,.28);background:rgba(10,11,14,.35);color:#F7FAFF;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nb__menu:hover{border-color:rgba(220,229,242,.6)}
.nb__burger{position:relative;width:18px;height:10px}
.nb__burger i{position:absolute;left:0;right:0;height:1.5px;border-radius:2px;background:currentColor;transition:transform .45s cubic-bezier(.22,1,.36,1),top .45s cubic-bezier(.22,1,.36,1)}
.nb__burger i:first-child{top:0}.nb__burger i:last-child{top:8.5px}
html.menu-plein .nb__burger i:first-child{top:4.25px;transform:rotate(45deg)}
html.menu-plein .nb__burger i:last-child{top:4.25px;transform:rotate(-45deg)}
html.menu-plein .nb{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent;transform:none}
html.menu-plein .nb__cta{opacity:0;pointer-events:none}
/* ---------- 2. Le menu plein écran ---------- */
.np{position:fixed;inset:0;z-index:850;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);background:#07080B;color:#F7FAFF;font-family:"Plus Jakarta Sans",system-ui,sans-serif;
clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .8s cubic-bezier(.76,0,.24,1),visibility 0s linear .8s}
html.menu-plein .np{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .8s cubic-bezier(.76,0,.24,1),visibility 0s}
html.menu-plein,html.menu-plein body{overflow:hidden!important}
.np__contenu{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:space-between;min-height:0;overflow-y:auto;padding:clamp(100px,13vh,140px) clamp(24px,5vw,96px) clamp(28px,4vh,48px)}
.np__titre{margin:0 0 18px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(138,154,178,.9)}
.np__poles ul{list-style:none;margin:0;padding:0;border-top:1px solid rgba(220,229,242,.1)}
.np-pole{border-bottom:1px solid rgba(220,229,242,.1);opacity:0;transform:translateY(28px);transition:opacity .5s ease,transform .8s cubic-bezier(.22,1,.36,1)}
html.menu-plein .np-pole{opacity:1;transform:none}
html.menu-plein .np-pole:nth-child(1){transition-delay:.28s}html.menu-plein .np-pole:nth-child(2){transition-delay:.34s}html.menu-plein .np-pole:nth-child(3){transition-delay:.4s}
html.menu-plein .np-pole:nth-child(4){transition-delay:.46s}html.menu-plein .np-pole:nth-child(5){transition-delay:.52s}
.np-pole__nom{display:flex;align-items:baseline;gap:clamp(14px,1.6vw,28px);padding:clamp(10px,1.6vh,18px) 0 4px;color:inherit;text-decoration:none}
.np-pole__num{flex:none;width:28px;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--c);opacity:.9}
.np-pole__titre{font-size:clamp(34px,4.4vw,76px);font-weight:600;letter-spacing:-.04em;line-height:1.02;color:rgba(247,250,255,.55);transition:color .4s,transform .6s cubic-bezier(.22,1,.36,1)}
.np-nouveau{align-self:center;padding:4px 10px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#0A0B0E;background:var(--c)}
.np-pole__sous{display:flex;flex-wrap:wrap;gap:4px 22px;padding:0 0 clamp(10px,1.6vh,18px) calc(28px + clamp(14px,1.6vw,28px));max-height:0;overflow:hidden;opacity:0;transition:max-height .6s cubic-bezier(.22,1,.36,1),opacity .4s}
.np-pole__sous a{font-size:15px;color:rgba(220,229,242,.7);text-decoration:none;transition:color .25s}
.np-pole__sous a:hover,.np-pole__sous a[aria-current]{color:#FFFFFF}
.np-pole__sous a[aria-current]::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--c);vertical-align:middle}
.np-pole.est-actif .np-pole__titre,.np-pole:focus-within .np-pole__titre{color:#FFFFFF;transform:translateX(10px)}
.np-pole.est-actif .np-pole__sous,.np-pole:focus-within .np-pole__sous{max-height:120px;opacity:1}
.np-pole.est-ici .np-pole__titre{color:#FFFFFF}
.np__pied{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,96px);margin-top:clamp(28px,5vh,56px);opacity:0;transition:opacity .6s .6s}
html.menu-plein .np__pied{opacity:1}
.np__pied a,.np__pied p:not(.np__titre){display:block;margin:0 0 8px;font-size:15px;line-height:1.5;color:rgba(220,229,242,.75);text-decoration:none}
.np__pied a:hover{color:#FFFFFF}
/* Le mercure du pôle survolé, à droite */
.np__matiere{grid-column:2;grid-row:1;position:relative;overflow:hidden;background:#07080B}
.np__matiere::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#07080B,transparent 30%),linear-gradient(0deg,rgba(7,8,11,.6),transparent 40%);pointer-events:none}
.np-matiere__image{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;opacity:0;transform:scale(1.12);filter:saturate(1.1);transition:opacity .9s ease,transform 6s cubic-bezier(.22,1,.36,1)}
.np-matiere__image.est-actif{opacity:1;transform:scale(1)}
html.menu-plein .np__matiere{animation:np-entre 1.2s cubic-bezier(.22,1,.36,1) both}
@keyframes np-entre{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@media (max-width:900px){
.nb{height:64px}
.nb__cta{display:none}
.np{grid-template-columns:1fr}
.np__matiere{position:absolute;inset:0;grid-column:1;opacity:.28}
.np__contenu{position:relative;padding-top:96px}
.np-pole__sous{max-height:none;opacity:1}
.np-pole__titre{font-size:clamp(30px,8.4vw,44px);color:#F7FAFF}
}
@media (prefers-reduced-motion:reduce){
.np,.np-pole,.np__pied,.np-matiere__image,.nb{transition:none!important}
html.menu-plein .np__matiere{animation:none}
}
/* Le mercure prend la couleur du pôle survolé (les images sources sont argentées) : un voile « couleur » par-dessus */
.np__matiere::before{content:"";position:absolute;inset:0;z-index:1;background:var(--actif,#DCE5F2);mix-blend-mode:color;opacity:.85;transition:background .8s ease;pointer-events:none}
.np__matiere::after{z-index:2}
/* ---------- Largeur de page (24/10, Raphaël : « il y a un gap, tout est trop centré ») ----------
Sans le menu à gauche, la largeur de contenu de 1280 px laissait un grand vide de chaque côté.
Le contenu s'élargit (1600 px, 1800 px sur très grand écran) et la barre du haut s'aligne exactement
sur le même bord que le contenu : le logo tombe au-dessus des titres. */
:root{--w-env-max:1600px}
@media (min-width:2200px){:root{--w-env-max:1800px}}
.enveloppe{max-width:var(--w-env-max)!important}
.nb{padding-inline:max(var(--w-gouttiere,clamp(24px,5vw,96px)),calc((100% - var(--w-env-max)) / 2 + var(--w-gouttiere,clamp(24px,5vw,96px))))}
/* ---------- Menu plein écran, version 2 (24/10, Raphaël : « trop gros », « on ne voit pas les sous-pages ») ----------
Les 5 pôles en 5 colonnes, chacune avec TOUTES ses pages visibles d'emblée. Titres de taille raisonnable.
Le mercure du pôle survolé passe en fond, sur toute la largeur, discret. Le focus clavier reste visible mais fin. */
.np{grid-template-columns:1fr}
.np__matiere{grid-column:1;grid-row:1;opacity:.34}
.np__matiere::after{background:linear-gradient(180deg,rgba(7,8,11,.55),rgba(7,8,11,.82) 60%,#07080B)}
html.menu-plein .np__matiere{animation:none}
.np__contenu{grid-column:1;grid-row:1;position:relative;z-index:3;justify-content:center;gap:clamp(40px,7vh,88px);
padding:clamp(120px,16vh,170px) max(var(--w-gouttiere,clamp(24px,5vw,96px)),calc((100% - var(--w-env-max)) / 2 + var(--w-gouttiere,clamp(24px,5vw,96px)))) clamp(32px,5vh,56px)}
.np__poles ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,40px);border-top:0}
.np-pole{border-bottom:0;border-top:1px solid rgba(220,229,242,.14);padding-top:22px;transition:opacity .5s ease,transform .8s cubic-bezier(.22,1,.36,1),border-color .4s}
.np-pole.est-actif,.np-pole:focus-within{border-top-color:var(--c)}
.np-pole__nom{flex-direction:column;align-items:flex-start;gap:12px;padding:0 0 18px}
.np-pole__num{width:auto}
.np-pole__titre{font-size:clamp(22px,1.8vw,30px);letter-spacing:-.02em;line-height:1.15;color:#F7FAFF}
.np-pole.est-actif .np-pole__titre,.np-pole:focus-within .np-pole__titre{transform:none}
.np-nouveau{align-self:flex-start;margin-top:-4px}
.np-pole__nom{position:relative}
.np-pole__nom .np-nouveau{position:absolute;top:0;right:0}
.np-pole__sous{flex-direction:column;flex-wrap:nowrap;gap:2px;padding:0;max-height:none;opacity:1;overflow:visible}
.np-pole__sous a{padding:7px 0;font-size:15.5px;line-height:1.35;color:rgba(220,229,242,.66)}
.np-pole__sous a:hover{color:#FFFFFF;transform:translateX(4px)}
.np-pole__sous a{transition:color .25s,transform .3s}
.np__pied{margin-top:0;padding-top:28px;border-top:1px solid rgba(220,229,242,.1);gap:clamp(32px,6vw,120px)}
.np__agence{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px}
.np__agence .np__titre,.np__coord .np__titre{width:100%;margin-bottom:6px}
.np__coord{display:flex;flex-wrap:wrap;gap:4px 28px}
.np__agence a{font-size:17px!important;color:#F7FAFF!important}
.np a:focus-visible{outline:1px solid rgba(220,229,242,.6);outline-offset:4px;border-radius:4px}
@media (max-width:1100px){.np__poles ul{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}}
@media (max-width:700px){
.np__poles ul{grid-template-columns:1fr 1fr;row-gap:24px}
.np__contenu{padding-top:92px;justify-content:flex-start}
.np-pole__titre{font-size:20px}
.np-pole__sous a{font-size:14px;padding:5px 0}
}
/* ---------- Mise en page fluide (24/10, Raphaël : « ça ne s'adapte pas à ma résolution ») ----------
Plus de largeur maximale figée : le contenu suit la largeur de l'écran, avec des marges proportionnelles
(5 % de chaque côté, entre 20 et 120 px). Seuls les très grands écrans (au-delà de 2400 px) sont plafonnés. */
:root{--w-env-max:2400px;--w-gouttiere:clamp(20px,5vw,120px)}
.enveloppe{padding-inline:var(--w-gouttiere)!important}
/* =========================================================================
MENU HYBRIDE (24/10, Raphaël : « vas-y » — recommandation Nielsen Norman Group : sur ordinateur, un menu visible)
Ordinateur (≥ 901 px) : les rubriques sont dans la barre ; « Expertises » ouvre, sous la barre, le panneau des
5 pôles en colonnes (le même que le menu plein écran, en compact, sans son pied). Le bouton Menu disparaît.
Téléphone : rien ne change, le bouton Menu ouvre le menu plein écran.
========================================================================= */
.nb__liens{display:none}
@media (min-width:901px){
.nb{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,3vw,56px)}
.nb__liens{display:flex;align-items:center;gap:clamp(4px,.6vw,10px)}
.nb__liens > a,.nb__expertises{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border:0;border-radius:999px;background:none;
font:500 15px/1 "Plus Jakarta Sans",system-ui,sans-serif;color:rgba(247,250,255,.78);text-decoration:none;cursor:pointer;transition:color .25s,background .25s}
.nb__liens > a:hover,.nb__expertises:hover,.nb__expertises[aria-expanded="true"]{color:#FFFFFF;background:rgba(220,229,242,.08)}
.nb__liens > a[aria-current]{color:#FFFFFF}
.nb__liens > a[aria-current]::after{content:"";width:5px;height:5px;margin-left:6px;border-radius:50%;background:#DCE5F2}
.nb__expertises span{font-size:11px;transition:transform .3s}
.nb__expertises[aria-expanded="true"] span{transform:rotate(180deg)}
.nb__menu{display:none!important}
/* Le panneau des pôles, sous la barre */
.np{inset:72px 0 auto 0;max-height:calc(100vh - 72px);border-bottom:1px solid rgba(220,229,242,.1);box-shadow:0 40px 80px -30px rgba(0,0,0,.85);
background:rgba(7,8,11,.96);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);clip-path:inset(0 0 100% 0)}
html.menu-plein .np{clip-path:inset(0 0 0 0)}
html.menu-plein,html.menu-plein body{overflow:visible!important}
html.menu-plein .nb{background:rgba(7,8,11,.96)}
html.menu-plein .nb__cta{opacity:1;pointer-events:auto}
.np__contenu{padding-top:clamp(28px,4vh,44px)!important;padding-bottom:clamp(28px,4vh,44px)!important;gap:0}
.np__pied{display:none}
.np__poles .np__titre{display:none}
.np-pole{transition-duration:.35s,.5s,.4s}
html.menu-plein .np-pole:nth-child(n){transition-delay:0s}
.np__matiere{opacity:.22}
}
/* =========================================================================
OPTION 5 — LA PILULE FLOTTANTE (24/10, Raphaël : « fais-moi voir la 5 »)
En haut de page : la barre pleine largeur. Dès qu'on fait défiler, elle se resserre en une capsule flottante
au centre de l'écran (logo, rubriques, bouton), en verre sombre. Le panneau Expertises s'ouvre sous la capsule,
en carte arrondie. Ordinateur seulement ; le téléphone garde sa barre et son menu plein écran.
Retour en arrière : sauvegardes/navigation-avant-pilule-2026-10-24.css|js
========================================================================= */
@media (min-width:901px){
.nb{left:0;right:0;margin:0 auto;max-width:100vw;border-radius:0;
transition:max-width .7s cubic-bezier(.22,1,.36,1),margin .7s cubic-bezier(.22,1,.36,1),height .6s cubic-bezier(.22,1,.36,1),border-radius .7s,padding .7s cubic-bezier(.22,1,.36,1),background .5s,border-color .5s,box-shadow .6s,transform .5s cubic-bezier(.22,1,.36,1)}
.nb.est-pilule{max-width:min(1040px,calc(100vw - 48px));margin-top:14px;height:60px;padding-inline:22px 8px!important;border-radius:999px;
background:rgba(12,14,19,.72)!important;-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
border:1px solid rgba(220,229,242,.14)!important;box-shadow:0 20px 50px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06);transform:none!important}
.nb.est-pilule .nb__marque img{width:124px!important;transition:width .6s}
.nb .nb__marque img{transition:width .6s}
.nb.est-pilule .nb__cta{height:44px;padding:0 18px}
.nb.est-pilule .nb__liens > a,.nb.est-pilule .nb__expertises{height:38px;padding:0 12px;font-size:14.5px}
/* Le panneau sous la capsule : une carte arrondie, à la largeur de la page */
html.nav-pilule .np{inset:86px 0 auto 0;margin:0 auto;width:min(1240px,calc(100vw - 48px));border:1px solid rgba(220,229,242,.12);border-radius:24px;overflow:hidden}
html.nav-pilule.menu-plein .nb{background:rgba(12,14,19,.92)!important}
}
@media (min-width:901px){html.nav-pilule .np-pole__titre{font-size:clamp(19px,1.4vw,24px)}}
/* =========================================================================
MENU EN NOIR ET BLANC, LA COULEUR AU SURVOL (25/10, Raphaël)
Au repos : tout est en noir et blanc — numéros, titres, pages, et une matière argentée qui ondule à peine.
Au survol d'un pôle : son numéro, son titre, son liseré et ses pages prennent sa couleur, et derrière,
le mercure de ce pôle (sa forme et sa couleur, comme sur sa page) se met à onduler. Une seule matière tourne à la fois.
========================================================================= */
.np__matiere::before{display:none}
.np__matiere{opacity:1!important}
.np-matiere__vivant{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1s ease}
.np-matiere__vivant.est-actif{opacity:.42}
.np-matiere__vivant[data-pole-canvas="repos"].est-actif{opacity:.26}
.np-pole{--teinte-pole:#F7FAFF}
.np-pole__num{color:rgba(220,229,242,.55)!important;transition:color .4s}
.np-pole__titre{color:rgba(247,250,255,.82)!important;transition:color .4s,transform .6s cubic-bezier(.22,1,.36,1)}
.np-nouveau{background:#DCE5F2!important;color:#0A0B0E!important;transition:background .4s}
.np-pole{border-top-color:rgba(220,229,242,.14)!important}
.np-pole.est-actif{border-top-color:var(--c)!important}
.np-pole.est-actif .np-pole__num{color:var(--c)!important}
.np-pole.est-actif .np-pole__titre{color:#FFFFFF!important;text-shadow:0 0 40px color-mix(in srgb,var(--c) 55%,transparent)}
.np-pole.est-actif .np-nouveau{background:var(--c)!important}
.np-pole.est-actif .np-pole__sous a{color:rgba(247,250,255,.82)}
.np-pole.est-actif .np-pole__sous a:hover{color:var(--c)}
.np-pole__sous a[aria-current]::before{background:#F7FAFF!important}
.np-pole.est-actif .np-pole__sous a[aria-current]::before{background:var(--c)!important}
@media (prefers-reduced-motion:reduce){.np-matiere__vivant{transition:none}}
/* Réglage (25/10) : la matière se voit davantage, et le titre du pôle survolé prend sa couleur. */
.np-matiere__vivant.est-actif{opacity:.78}
.np-matiere__vivant[data-pole-canvas="repos"].est-actif{opacity:.5}
.np__matiere::after{background:linear-gradient(90deg,rgba(7,8,11,.78) 0%,rgba(7,8,11,.45) 45%,rgba(7,8,11,.25) 100%),linear-gradient(0deg,rgba(7,8,11,.7),transparent 45%)!important}
.np-pole.est-actif .np-pole__titre{color:color-mix(in srgb,var(--c) 62%,#FFFFFF)!important}
/* =========================================================================
MENU CHOISI (25/10, Raphaël) : le menu plein écran (option 3) devient le menu du site.
html.menu-v3 est posé par navigation.js, sauf si le comparateur (outil interne) demande une autre version.
========================================================================= */
@media (min-width:901px){
/* 3 · le menu plein écran derrière le bouton Menu */
html.menu-v3 .nb{display:flex!important}
html.menu-v3 .nb__liens{display:none!important}
html.menu-v3 .nb__menu{display:inline-flex!important}
html.menu-v3 .np{inset:0!important;max-height:none!important;width:auto!important;margin:0!important;border:0!important;border-radius:0!important;background:#07080B!important;box-shadow:none!important}
html.menu-v3 .np__contenu{padding-top:clamp(120px,16vh,170px)!important;justify-content:center!important;gap:clamp(40px,7vh,88px)!important}
html.menu-v3 .np__pied{display:flex!important}
html.menu-v3 .np__poles .np__titre{display:block!important}
html.menu-v3 .np__matiere{opacity:.34!important}
html.menu-v3 .np-pole__titre{font-size:clamp(22px,1.8vw,30px)!important}
html.menu-v3.menu-plein,html.menu-v3.menu-plein body{overflow:hidden!important}
}
/* ---------- VOILE DE NUIT : barre fixe et bandeau de confiance ----------
Même mécanisme que le voile du hero (flux-hero-nappe.css) : un radial-gradient
de nuit qui s'éteint, fondu par un masque — aucun panneau, aucun bord net. */
.nb::after{
content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:96px;z-index:-1;
pointer-events:none;
background:radial-gradient(120% 100% at 50% -18%,rgba(10,11,14,.92) 0%,rgba(10,11,14,.62) 34%,rgba(10,11,14,.24) 58%,rgba(10,11,14,0) 78%);
-webkit-mask-image:radial-gradient(140% 100% at 50% 0%,#000 0%,#000 58%,transparent 100%);
mask-image:radial-gradient(140% 100% at 50% 0%,#000 0%,#000 58%,transparent 100%);
transition:opacity .5s;
}
.nb.est-defile::after{opacity:0}
html.menu-plein .nb::after{opacity:0}
.confiance{position:relative;isolation:isolate}
.confiance::before{
content:"";position:absolute;inset:-70px -8% auto -8%;height:190px;z-index:-1;
pointer-events:none;
background:radial-gradient(90% 100% at 50% 0%,rgba(10,11,14,.88) 0%,rgba(10,11,14,.5) 42%,rgba(10,11,14,.16) 66%,rgba(10,11,14,0) 84%);
-webkit-mask-image:radial-gradient(110% 100% at 50% 0%,#000 0%,#000 62%,transparent 100%);
mask-image:radial-gradient(110% 100% at 50% 0%,#000 0%,#000 62%,transparent 100%);
}
@media (prefers-reduced-motion:reduce){.nb::after{transition:none}}
/* 28/10/2026 (Raphaël) : au défilement, la barre posait un panneau flouté (backdrop-filter) sur l'image du hero,
avec une arête nette — une « barre floue ». Plus de flou ni de bord : un fondu de nuit qui s'éteint vers le bas,
le même voile que la barre au repos (::after), juste plus dense pour garder le menu lisible sur le contenu. */
.nb.est-defile{background:linear-gradient(180deg,rgba(7,8,11,.9) 0%,rgba(7,8,11,.72) 55%,rgba(7,8,11,0) 100%);
-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
.nb.est-defile::after{opacity:1}
/* Le voile sous la barre commençait d'un coup à 72 px (arête visible sur l'image) : il part maintenant du haut
de l'écran et s'éteint en douceur, sans masque ni bord. */
.nb::after{top:0;height:168px;-webkit-mask-image:none;mask-image:none;
background:linear-gradient(180deg,rgba(10,11,14,.62) 0%,rgba(10,11,14,.34) 42%,rgba(10,11,14,.1) 74%,rgba(10,11,14,0) 100%)}
/* 28/10 (fluidité) : le menu n'utilise plus 6 matières WebGL (une seconde de blocage à l'ouverture) mais des images
légères en fondu, avec une lente dérive (transform seulement, calculée par la carte graphique). */
img.np-matiere__vivant{object-fit:cover;transform:scale(1.04);transition:opacity 1s ease}
html.menu-plein img.np-matiere__vivant.est-actif{animation:np-derive 22s ease-in-out infinite alternate;will-change:transform}
@keyframes np-derive{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-2%,-1.5%,0)}}
@media (prefers-reduced-motion:reduce){html.menu-plein img.np-matiere__vivant.est-actif{animation:none}}
/* 28/10 (Raphaël : « les images derrière ne sont pas animées ») : par-dessus chaque image du menu, sa matière vivante
(WebGL, préparée à l'avance). Elle apparaît en fondu dès qu'elle est prête ; l'image fixe ne sert plus qu'en attendant. */
.np-matiere__gl{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1s ease;pointer-events:none}
.np-matiere__gl.est-actif.matiere-vivante--pret{opacity:.78}
.np-matiere__gl[data-pole-gl="repos"].est-actif.matiere-vivante--pret{opacity:.5}
img.np-matiere__vivant:has(+ .np-matiere__gl.est-actif.matiere-vivante--pret){opacity:0;animation:none}
@media (prefers-reduced-motion:reduce){.np-matiere__gl{transition:none}}
/* 28/10 (Raphaël : « une ligne au niveau du menu ») : la barre défilée gardait un dégradé de 72 px dont le bas tombait
d'un coup sur l'image (une ligne), et ce voile restait visible menu ouvert (bande sombre en haut). Un seul voile,
haut de 190 px, qui s'éteint en douceur ; aucun voile quand le menu plein écran est ouvert. */
.nb.est-defile{background:transparent}
.nb.est-defile::after{height:190px;background:linear-gradient(180deg,rgba(7,8,11,.9) 0%,rgba(7,8,11,.78) 30%,rgba(7,8,11,.42) 60%,rgba(7,8,11,.12) 85%,rgba(7,8,11,0) 100%)}
html.menu-plein .nb.est-defile{background:transparent}
html.menu-plein .nb.est-defile::after,html.menu-plein .nb::after{opacity:0}
/* 28/10 (Raphaël : « attention aux backgrounds, il y a des lumières blanches derrière ») : plus de halo blanc flou
derrière les titres des héros (.hero__lueur), ni de bande de lumière en diagonale sur la matière : le fond reste noir
profond et la matière seule porte la lumière. */
.hero__lueur{display:none!important}
.hero__matiere::before{display:none!important}