/* META ADS — blocs propres à la page (24/10/2026). Histoire : sur Google on vous cherche, sur Meta on vous découvre.
   Pôle SEO & visibilité (bleu) ; mercure en réseau qui tourne. Préfixe mt-. */

/* ---------- Signature : « le pouce s'arrête » ----------
   --p (0 → 1) fait défiler le fil jusqu'à l'annonce ; data-etape 1 · 2 · 3 : il défile, l'annonce l'arrête, il vous écrit. */
.mt-pouce{position:relative;height:340vh;--p:0}
.mt-pouce__scene{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.mt-pouce__grille{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,6vw,120px);align-items:center}
.mt-pouce__temps{position:relative;list-style:none;margin:28px 0 0;padding:0;min-height:clamp(220px,26vh,300px)}
.mt-pouce__temps li{position:absolute;inset:0 auto auto 0;opacity:0;transform:translateY(24px);transition:opacity .6s var(--w-ease),transform .8s var(--w-ease)}
.mt-pouce__temps li.est-la{opacity:1;transform:none}
.mt-pouce__temps span{font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--pole)}
.mt-pouce__temps h2{margin:12px 0 18px;font-size:clamp(40px,4.4vw,76px);font-weight:600;letter-spacing:-.035em;line-height:1.04}
.mt-pouce__temps p{margin:0;max-width:34ch;font-size:clamp(17px,1.35vw,21px);line-height:1.55;color:var(--w-gris)}
.mt-pouce__compte{display:flex;gap:10px;margin-top:36px}
.mt-pouce__compte i{width:36px;height:3px;border-radius:2px;background:var(--w-filet-fort);transition:background .5s}
.mt-pouce__compte i.est-la{background:var(--pole)}

.mt-telephone{justify-self:center;width:min(100%,330px);aspect-ratio:9/18.5;padding:12px;border-radius:46px;background:linear-gradient(150deg,#3A3F4D,#14161C 40%,#2A2E39);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 60px 120px -40px rgba(0,0,0,.9),0 0 90px -30px color-mix(in srgb,var(--pole) 60%,transparent)}
.mt-telephone__ecran{position:relative;height:100%;border-radius:36px;overflow:hidden;background:#0B0C10}
.mt-telephone__barre{position:absolute;inset:0 0 auto;z-index:2;display:flex;align-items:center;gap:8px;height:54px;padding:16px 18px 0;background:linear-gradient(#0B0C10 70%,transparent);font-size:15px;color:#F7FAFF}
.mt-telephone__barre b{margin-right:auto;font-weight:700;letter-spacing:-.01em}
.mt-telephone__barre i{width:18px;height:18px;border-radius:5px;border:1.5px solid rgba(247,250,255,.7)}
.mt-fil{position:absolute;inset:60px 12px auto;display:flex;flex-direction:column;gap:18px;transform:translateY(calc(var(--p) * -1 * var(--course,680px)))}
.mt-post{display:flex;flex-direction:column;gap:8px;transition:transform .7s var(--w-ease),opacity .6s}
.mt-post__tete{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#F7FAFF}
.mt-post__tete i{flex:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#5A6275,#2A2E39)}
.mt-post__tete b{width:90px;height:8px;border-radius:4px;background:#2A2E39}
.mt-post__tete small{margin-left:auto;font-size:10.5px;color:rgba(220,229,242,.55)}
.mt-post__image{display:block;aspect-ratio:1/1;border-radius:12px;background:#1A1C23}
.mt-post__image--1{background:linear-gradient(160deg,#2B2F3A,#14161C)}
.mt-post__image--2{background:radial-gradient(circle at 30% 30%,#3A3F4D,#16181E 70%)}
.mt-post__image--3{background:linear-gradient(20deg,#1A1C23,#323744)}
.mt-post__ligne{display:block;width:80%;height:7px;border-radius:4px;background:#22252E}
.mt-post__ligne--courte{width:52%}
.mt-post--annonce .mt-post__tete b{width:auto;height:auto;background:none;font-weight:700}
.mt-post--annonce .mt-post__tete i{background:radial-gradient(circle at 35% 30%,#F7FAFF,var(--pole) 70%)}
.mt-post__image--annonce{display:flex;align-items:flex-end;padding:18px;background:radial-gradient(120% 90% at 30% 20%,color-mix(in srgb,var(--pole) 75%,#fff),#13204A 70%);box-shadow:0 0 0 0 transparent;transition:box-shadow .6s}
.mt-post__image--annonce em{font-style:normal;font-size:22px;font-weight:700;line-height:1.1;letter-spacing:-.02em;color:#F7FAFF}
.mt-post__action{display:flex;justify-content:space-between;padding:10px 12px;border-radius:9px;background:#1C2333;font-size:12px;font-weight:600;color:#F7FAFF}
.mt-pouce[data-etape="2"] .mt-post--annonce,.mt-pouce[data-etape="3"] .mt-post--annonce{transform:scale(1.04)}
.mt-pouce[data-etape="2"] .mt-post:not(.mt-post--annonce),.mt-pouce[data-etape="3"] .mt-post:not(.mt-post--annonce){opacity:.35}
.mt-pouce[data-etape="2"] .mt-post__image--annonce,.mt-pouce[data-etape="3"] .mt-post__image--annonce{box-shadow:0 0 0 2px color-mix(in srgb,var(--pole) 80%,#fff),0 0 60px -6px var(--pole)}
.mt-message{position:absolute;left:10px;right:10px;top:10px;z-index:3;display:flex;flex-direction:column;gap:4px;padding:13px 15px;border-radius:18px;background:rgba(247,250,255,.94);color:#0E1016;box-shadow:0 20px 40px -12px rgba(0,0,0,.7);transform:translateY(-140%);transition:transform .8s cubic-bezier(.3,1.35,.5,1)}
.mt-message b{font-size:12px}.mt-message span{font-size:12.5px;line-height:1.4;color:#3A4152}
.mt-pouce[data-etape="3"] .mt-message{transform:none}

/* ---------- Google ou Meta : le face-à-face ---------- */
.mt-duel{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--w-filet);border-radius:28px;overflow:hidden}
.mt-duel__cote{display:flex;flex-direction:column;gap:12px;padding:clamp(28px,3.4vw,56px)}
.mt-duel__cote + .mt-duel__cote{border-left:1px solid var(--w-filet)}
.mt-duel__cote--meta{background:linear-gradient(140deg,color-mix(in srgb,var(--pole) 16%,#0A0B0E),#0A0B0E 70%)}
.mt-duel__visuel{display:flex;align-items:center;height:120px;margin-bottom:12px}
.mt-recherche{display:flex;align-items:center;gap:6px;width:min(100%,340px);padding:14px 20px;border-radius:999px;background:#F7FAFF;color:#1C1E24;font-size:15px}
.mt-recherche i{width:2px;height:18px;background:var(--pole);animation:mt-clignote 1s steps(1) infinite}
@keyframes mt-clignote{50%{opacity:0}}
.mt-carte-fil{position:relative;display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto 1fr;gap:8px;width:170px;height:120px;padding:12px;border-radius:14px;background:#12141B;border:1px solid var(--w-filet-fort);animation:mt-flotte 4s ease-in-out infinite alternate}
.mt-carte-fil i{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F7FAFF,var(--pole) 70%)}
.mt-carte-fil b{align-self:center;height:8px;border-radius:4px;background:#2A2E39}
.mt-carte-fil em{grid-column:1/-1;align-self:end;font-style:normal;font-size:11px;color:var(--w-gris)}
.mt-carte-fil::after{content:"";position:absolute;left:12px;right:12px;top:48px;bottom:30px;border-radius:8px;background:linear-gradient(135deg,color-mix(in srgb,var(--pole) 70%,#fff),#13204A)}
@keyframes mt-flotte{to{transform:translateY(-10px) rotate(-2deg)}}
.mt-duel__nom{margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pole)}
.mt-duel__cote h3{margin:0;font-size:clamp(28px,2.6vw,42px);font-weight:600;letter-spacing:-.03em}
.mt-duel__cote p:not(.mt-duel__nom){margin:0;max-width:40ch;font-size:16.5px;line-height:1.6;color:var(--w-gris)}
.mt-duel__lien{margin-top:auto;padding-top:12px;font-size:15px;font-weight:600;color:var(--w-blanc)}
.mt-duel__lien span{display:inline-block;transition:transform .3s}.mt-duel__lien:hover span{transform:translateX(4px)}
.mt-ensemble{margin:28px 0 0;max-width:70ch;font-size:17px;line-height:1.6;color:var(--w-gris)}
.mt-ensemble strong{color:var(--w-blanc);font-weight:600}

/* ---------- Ce que nous faisons : quatre métiers, quatre petits dessins animés ---------- */
.mt-metiers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mt-metiers li{display:flex;flex-direction:column;gap:10px;padding:26px;border-radius:20px;border:1px solid var(--w-filet);background:#0C0D11;transition:border-color .4s,transform .5s var(--w-ease)}
.mt-metiers li:hover{border-color:color-mix(in srgb,var(--pole) 55%,transparent);transform:translateY(-4px)}
.mt-metiers h3{margin:14px 0 0;font-size:20px;font-weight:600}
.mt-metiers p{margin:0;font-size:15px;line-height:1.55;color:var(--w-gris)}
.mt-metiers p a{color:var(--w-blanc);text-decoration:underline;text-underline-offset:3px}
.mt-metiers__dessin{position:relative;display:block;width:72px;height:72px}
.mt-metiers__dessin--cible i{position:absolute;inset:calc(var(--k,0) * 12px);border-radius:50%;border:1.5px solid var(--pole);opacity:calc(1 - var(--k,0) * .25)}
.mt-metiers__dessin--cible i:nth-child(1){--k:0}.mt-metiers__dessin--cible i:nth-child(2){--k:1}.mt-metiers__dessin--cible i:nth-child(3){--k:2;background:var(--pole)}
.mt-metiers li:hover .mt-metiers__dessin--cible i{animation:mt-vise 1.2s var(--w-ease)}
@keyframes mt-vise{50%{transform:scale(.85)}}
.mt-metiers__dessin--creation i{position:absolute;width:44px;height:54px;border-radius:8px;border:1.5px solid var(--pole);background:#0C0D11;transition:transform .6s var(--w-ease)}
.mt-metiers__dessin--creation i:nth-child(1){left:0;top:10px;transform:rotate(-10deg)}
.mt-metiers__dessin--creation i:nth-child(2){left:14px;top:6px}
.mt-metiers__dessin--creation i:nth-child(3){left:28px;top:10px;transform:rotate(10deg);background:color-mix(in srgb,var(--pole) 35%,#0C0D11)}
.mt-metiers li:hover .mt-metiers__dessin--creation i:nth-child(1){transform:rotate(-22deg) translateX(-6px)}
.mt-metiers li:hover .mt-metiers__dessin--creation i:nth-child(3){transform:rotate(22deg) translateX(6px)}
.mt-metiers__dessin--relance i{position:absolute;inset:8px;border-radius:50%;border:1.5px solid var(--pole);border-right-color:transparent;animation:mt-tourne 3s linear infinite}
.mt-metiers__dessin--relance i::after{content:"";position:absolute;right:-1px;top:6px;border:6px solid transparent;border-bottom-color:var(--pole);transform:rotate(30deg)}
@keyframes mt-tourne{to{transform:rotate(360deg)}}
.mt-metiers__dessin--suivi{display:flex;align-items:flex-end;gap:7px}
.mt-metiers__dessin--suivi i{width:12px;border-radius:3px;background:var(--pole);height:var(--h);opacity:.5;transition:height .6s var(--w-ease),opacity .4s}
.mt-metiers__dessin--suivi i:nth-child(1){--h:22px}.mt-metiers__dessin--suivi i:nth-child(2){--h:34px}.mt-metiers__dessin--suivi i:nth-child(3){--h:30px}.mt-metiers__dessin--suivi i:nth-child(4){--h:52px;opacity:1}
.mt-metiers li:hover .mt-metiers__dessin--suivi i{--h:64px;opacity:1}

@media (max-width:1000px){
  .mt-pouce{height:auto}
  .mt-pouce__scene{position:relative;height:auto;padding:96px 0}
  .mt-pouce__grille,.mt-duel{grid-template-columns:1fr}
  .mt-pouce__temps{min-height:0}
  .mt-pouce__temps li{position:static;opacity:1;transform:none;margin-bottom:32px}
  .mt-duel__cote + .mt-duel__cote{border-left:0;border-top:1px solid var(--w-filet)}
  .mt-metiers{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){.mt-metiers{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .mt-pouce{height:auto}.mt-pouce__scene{position:relative;height:auto;padding:96px 0}
  .mt-pouce__temps{min-height:0}.mt-pouce__temps li{position:static;opacity:1;transform:none;margin-bottom:32px}
  .mt-recherche i,.mt-carte-fil,.mt-metiers__dessin--relance i{animation:none}
}

/* ---------- 25/10 : la barre de recherche en verre sombre (identité du site) ; l'image du post = mercure teinté bleu ---------- */
.mt-recherche{background:rgba(21,24,31,.94);color:#F7FAFF;border:1px solid rgba(220,229,242,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.mt-carte-fil::after{background:linear-gradient(color-mix(in srgb,var(--pole) 55%,transparent),color-mix(in srgb,var(--pole) 55%,transparent)),url(../images/seo-ondes-bleues.jpg) center/cover;background-blend-mode:color}
.mt-post__image--annonce{background:linear-gradient(color-mix(in srgb,var(--pole) 50%,transparent),color-mix(in srgb,var(--pole) 50%,transparent)),linear-gradient(180deg,transparent 40%,rgba(5,6,10,.7)),url(../images/seo-ondes-bleues.jpg) center/cover;background-blend-mode:color,normal,normal}