dont
l'attribut stroke vaut une référence de dégradé — « stroke="url(#ia-flux)" ».
Les pictogrammes, eux, portent une couleur en dur. Le sélecteur d'attribut
distingue donc exactement les deux, SANS toucher une seule page. La classe
« .flux » est acceptée en plus, pour les dessins futurs. */
.js .anim-flux g[stroke^="url("] path,
.js .anim-flux .flux path{stroke-dasharray:9 11;animation:sk-flux 3.4s linear infinite}
.js .anim-pulse{transform-origin:center;animation:sk-pulse 2.8s ease-out infinite}
/* La cascade : chaque enfant entre légèrement après son voisin.
⚠️ RÈGLE ABSOLUE — L'ANIMATION EST ADDITIVE, JAMAIS SOUSTRACTIVE.
Version précédente : les enfants partaient à opacity:0 et on les révélait.
C'est le schéma qui a rendu 174 blocs invisibles le 03/08, et je venais de
le refaire. Ici, RIEN n'est masqué par défaut : l'animation ne se déclenche
qu'avec la classe .vu, et `backwards` lui fait tenir son état de départ
pendant son propre délai. Si le JavaScript ne tourne pas, si l'observateur
ne se déclenche jamais, si un robot lit la page : tout est visible. */
.js .cascade.vu>*{animation:sk-monte .7s var(--courbe) backwards}
.js .cascade>*:nth-child(1){animation-delay:0ms}
.js .cascade>*:nth-child(2){animation-delay:90ms}
.js .cascade>*:nth-child(3){animation-delay:180ms}
.js .cascade>*:nth-child(4){animation-delay:270ms}
.js .cascade>*:nth-child(5){animation-delay:360ms}
.js .cascade>*:nth-child(6){animation-delay:450ms}
@media(prefers-reduced-motion:reduce){
/* « animation:none » suffisait à ARRÊTER le flux, mais laissait le trait en
pointillés : un visiteur en mouvement réduit voyait donc un schéma aux
traits hachés et figés, ce qui ressemble à un dessin cassé plutôt qu'à un
dessin apaisé. Il faut aussi rendre le trait continu. Relevé par le ninja
de hotellerie, qui a pensé à photographier CE mode-là. */
.js .anim-flux path,.js .anim-pulse{animation:none;stroke-dasharray:none}
.js .cascade>*{opacity:1;animation:none}
}
/* ══════════════════════════════════════════════════════════════════════════
LE HERO CINÉTIQUE — boucle de 9 secondes, 100 % CSS
Technique reprise du motion design du graphiste de Yann (réutilisation
autorisée le 04/08/2026) : mots en cadre plein, coupes rapides, fonds qui
se relaient, sortie sur la marque.
Tout est calé sur UNE durée commune : --cine. Changer cette variable
change le tempo de toute la séquence d'un coup.
══════════════════════════════════════════════════════════════════════════ */
.cine{--cine:9s;
position:relative;overflow:hidden;isolation:isolate;
aspect-ratio:16/9;max-height:min(78vh, 660px);width:100%;
border-radius:26px;background:#0A1230;
box-shadow:0 30px 80px rgba(14,19,48,.30)}
/* Le texte réel : visible par défaut, masqué seulement si l'animation tourne */
.cine-texte{position:absolute;inset:0;display:grid;place-items:center;padding:8%;
color:#fff;font-size:1.15rem;line-height:1.6;text-align:center;z-index:5}
/* La règle globale « p{color:var(--texte)} » repeint tout enfant : la
couleur posée sur le conteneur ne suffit pas. Sans ça, le texte de repli du
hero — celui que voient Google et un visiteur sans JavaScript — sortait en
gris ardoise sur fond marine. Relevé par le ninja de l'accueil. */
.cine-texte p{color:#fff}
.js .cine-texte{position:absolute;width:1px;height:1px;overflow:hidden;
clip-path:inset(50%);white-space:nowrap;padding:0}
/* ── LES FONDS ─────────────────────────────────────────────────────────── */
.cine-fonds,.cine-fond{position:absolute;inset:0}
.cine-fond{opacity:0}
.cine-fond img{width:100%;height:100%;object-fit:cover;display:block;
filter:saturate(.55) contrast(1.06)}
.cine-fond::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(10,18,48,.55),rgba(10,18,48,.78))}
.cine-fond.f1{background:linear-gradient(128deg,#2E3192 0%,#3B5FC0 46%,#29ABE2 100%)}
.cine-fond.f5{background:linear-gradient(128deg,#0A1230 0%,#1A2A6B 52%,#123E63 100%)}
.cine-fond.f1::after,.cine-fond.f5::after{content:none}
/* La trame de points : elle donne de la matière aux deux aplats */
.cine-fond.f1::before,.cine-fond.f5::before{content:"";position:absolute;inset:0;
background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);
background-size:26px 26px;opacity:.6}
/* ── LES MOTS ──────────────────────────────────────────────────────────── */
.cine-mots{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
.cine-mot{position:absolute;opacity:0;
/* ⚠️ 04/08 — RELEVÉ SUR CAPTURE : les mots plafonnaient à 57 px dans un
cadre de 1 132 px. Le mot le plus long n'occupait que la moitié de la
largeur : ça flotte, alors que tout l'effet du motion design de référence
vient de mots qui REMPLISSENT le cadre. Recalculé pour que « NOUS
CONSTRUISONS », le plus long des cinq, occupe environ 80 % de la largeur
sur grand écran, et tienne encore sans déborder à 390 px.
Le calcul tient compte du fait que le cadre vaut ~79 % de la fenêtre. */
font-size:clamp(1.4rem, .3rem + 5.4vw, 5rem);font-weight:800;
letter-spacing:-.02em;line-height:1;color:#fff;white-space:nowrap;
background:#0E1330;padding:.22em .5em;border-radius:.14em;
box-shadow:0 18px 44px rgba(0,0,0,.42)}
.cine-mot i{font-style:normal;color:#29ABE2}
/* ── LA SORTIE ─────────────────────────────────────────────────────────── */
.cine-fin{position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:var(--s5);z-index:3;
opacity:0;padding:6%;text-align:center}
.cine-fin img{width:clamp(140px, 18vw, 230px);height:auto}
.cine-fin-phrase{font-size:clamp(1.15rem, .7rem + 1.6vw, 2rem);font-weight:800;
line-height:1.15;letter-spacing:-.03em;color:#fff;max-width:22ch}
.cine-fin-phrase em{font-style:normal;color:#7CCBEE}
.cine-fin-detail{font-size:clamp(.78rem, .7rem + .3vw, .95rem);color:#A7B0D8;
font-family:var(--police-mono);letter-spacing:.06em}
/* ── LA JAUGE DE BOUCLE ────────────────────────────────────────────────── */
.cine-jauge{position:absolute;left:0;right:0;bottom:0;height:3px;
background:rgba(255,255,255,.14);z-index:4}
.cine-jauge i{display:block;height:100%;width:0;
background:linear-gradient(90deg,#29ABE2,#7CCBEE)}
/* ══ LA CHORÉGRAPHIE — 9 s, découpées en pourcentages ══
0-11 % BONJOUR (aplat) · 11-25 % NOUS OPÉRONS · 25-39 % VOS LIENS
39-54 % NOUS CONSTRUISONS · 54-68 % VOS AGENTS IA · 68-100 % la marque */
@keyframes cine-fond1{0%,10%{opacity:1}14%,100%{opacity:0}}
@keyframes cine-fond2{9%{opacity:0}13%,24%{opacity:1}28%,100%{opacity:0}}
@keyframes cine-fond3{23%{opacity:0}27%,38%{opacity:1}42%,100%{opacity:0}}
@keyframes cine-fond4{37%{opacity:0}41%,53%{opacity:1}57%,100%{opacity:0}}
@keyframes cine-fond5{52%{opacity:0}56%,96%{opacity:1}100%{opacity:0}}
/* Les mots arrivent d'un coup sec et repartent en fondu : c'est ce contraste
qui donne l'impression de coupe franche du montage d'origine. */
@keyframes cine-mot1{0%{opacity:0;transform:scale(.9)}2%,9%{opacity:1;transform:none}12%,100%{opacity:0}}
@keyframes cine-mot2{11%{opacity:0;transform:scale(.9)}13%,22%{opacity:1;transform:none}25%,100%{opacity:0}}
@keyframes cine-mot3{25%{opacity:0;transform:scale(.9)}27%,36%{opacity:1;transform:none}39%,100%{opacity:0}}
@keyframes cine-mot4{39%{opacity:0;transform:scale(.9)}41%,51%{opacity:1;transform:none}54%,100%{opacity:0}}
@keyframes cine-mot5{54%{opacity:0;transform:scale(.9)}56%,64%{opacity:1;transform:none}67%,100%{opacity:0}}
@keyframes cine-sortie{68%{opacity:0;transform:translateY(14px)}74%,97%{opacity:1;transform:none}100%{opacity:0}}
@keyframes cine-jauge{0%{width:0}100%{width:100%}}
.js .cine-fond.f1{animation:cine-fond1 var(--cine) linear infinite}
.js .cine-fond.f2{animation:cine-fond2 var(--cine) linear infinite}
.js .cine-fond.f3{animation:cine-fond3 var(--cine) linear infinite}
.js .cine-fond.f4{animation:cine-fond4 var(--cine) linear infinite}
.js .cine-fond.f5{animation:cine-fond5 var(--cine) linear infinite}
.js .cine-mot.m1{animation:cine-mot1 var(--cine) linear infinite}
.js .cine-mot.m2{animation:cine-mot2 var(--cine) linear infinite}
.js .cine-mot.m3{animation:cine-mot3 var(--cine) linear infinite}
.js .cine-mot.m4{animation:cine-mot4 var(--cine) linear infinite}
.js .cine-mot.m5{animation:cine-mot5 var(--cine) linear infinite}
.js .cine-fin{animation:cine-sortie var(--cine) linear infinite}
.js .cine-jauge i{animation:cine-jauge var(--cine) linear infinite}
/* ── SANS JAVASCRIPT, OU SI LE VISITEUR VEUT MOINS DE MOUVEMENT ──────────
On ne montre PAS une séquence figée au hasard : on affiche directement
l'image de fin, celle qui porte le message. Rien ne clignote, rien ne
manque, et le message passe. */
@media(prefers-reduced-motion:reduce){
.js .cine-fond,.js .cine-mot,.js .cine-fin,.js .cine-jauge i{animation:none}
.js .cine-fond.f5{opacity:1}
.js .cine-fin{opacity:1}
.js .cine-jauge{display:none}
}
@media(max-width:640px){
.cine{aspect-ratio:4/5;max-height:none;border-radius:20px}
.cine-mot{white-space:normal;text-align:center;max-width:86%;line-height:1.12}
}
/* ══════════════════════════════════════════════════════════════════════════
LE RETOUR DU FORMULAIRE DE CONTACT — 04/08/2026
Le récepteur PHP ne réaffiche jamais la saisie du visiteur (ce serait la
porte d'entrée d'une injection). Il renvoie un code court, que skynet.js
traduit en phrase. Voici l'habillage de cette phrase.
Le message n'est PAS masqué par défaut en CSS : il porte l'attribut HTML
« hidden », que le JavaScript retire. Un bloc masqué par le style et révélé
par un observateur, c'est le schéma qui a rendu 174 blocs invisibles le
03/08 — on ne le refait pas.
══════════════════════════════════════════════════════════════════════════ */
.reponse-envoi{margin-bottom:var(--s6);padding:var(--s5) var(--s6);
border-radius:var(--r-md);border:1px solid var(--ligne);
background:var(--papier);color:var(--texte);
font-size:1.02rem;line-height:1.55}
.reponse-envoi[data-etat="erreur"]{
border-color:#E4B4B4;background:#FDF4F4;color:#7A2E2E}
.reponse-envoi:focus{outline:3px solid var(--indigo-500);outline-offset:3px}
/* ══════════════════════════════════════════════════════════════════════════
.titre-md — L'ÉCHELON MANQUANT, ajouté le 04/08/2026.
Le site n'avait que deux tailles de titre : « .display » pour le
et
« .titre-xl » pour les ouvertures de section. Il manquait le cran d'en
dessous, celui d'un titre À L'INTÉRIEUR d'un bloc — l'encadré « Ce qu'il
faut retenir » d'un article, par exemple.
⚠️ C'est MOI qui ai employé cette classe dans le gabarit d'article sans
l'avoir créée : quatre articles sur douze sont sortis avec un titre non
stylé, c'est-à-dire au corps du texte. Le contrôle l'a vu, pas moi.
Une classe utilisée mais jamais définie ne produit RIEN, et ça ne se voit
pas à la relecture du code — seulement au rendu.
Taille calée entre .titre-xl (2 → 3,2 rem) et le texte courant. */
.titre-md{font-size:clamp(1.3rem, 1.05rem + .8vw, 1.72rem);
font-weight:800;line-height:1.2;letter-spacing:-.015em;
color:var(--encre);margin-bottom:var(--s4);max-width:26ch}
.titre-md em{font-style:normal;color:var(--indigo-600)}
.note .titre-md{margin-top:0}