/* AUDIT & CONSEIL — blocs propres à la page (24/10/2026). Histoire : « passer à la loupe ».
   Pôle Marketing digital (cuivre) ; mercure en tourbillons. */

/* ---------- Vos questions : des notes qui atterrissent sur un tableau ---------- */
.m-tableau{list-style:none;margin:0;padding:clamp(32px,4vw,64px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;border-radius:28px;border:1px solid var(--w-filet);
  background:radial-gradient(circle at 1px 1px,rgba(220,229,242,.08) 1px,transparent 0) 0 0/22px 22px,#0C0D11}
.m-tableau li{position:relative;min-height:190px;padding:34px 20px 22px;box-sizing:border-box;border-radius:4px 4px 16px 4px;font-size:17px;font-weight:500;line-height:1.35;color:#2A1C10;
  background:linear-gradient(170deg,#F3C9A2,#E0894B);box-shadow:0 18px 30px -16px rgba(0,0,0,.8);transform:rotate(var(--r));transition:transform .5s var(--w-ease)}
.m-tableau li::before{content:"";position:absolute;top:10px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#F7FAFF,#8A93A6);box-shadow:0 2px 4px rgba(0,0,0,.4)}
.m-tableau li:hover{transform:rotate(0) scale(1.04)}
.m-tableau.attend li{opacity:0;transform:translateY(-60px) rotate(calc(var(--r) * 4)) scale(1.1)}
.m-tableau li.pose{opacity:1;transform:rotate(var(--r));transition:transform .7s cubic-bezier(.3,1.5,.5,1),opacity .3s}

/* ---------- La loupe ---------- */
.m-loupe__grille{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,4vw,72px);align-items:center}
.m-loupe{position:relative;aspect-ratio:16/10;border-radius:22px;overflow:hidden;border:1px solid var(--w-filet-fort);background:#EEE9E1;cursor:none;--x:68%;--y:36%;--r:clamp(80px,9vw,130px)}
.m-site{position:absolute;inset:0;padding:5% 6%;display:grid;grid-template-rows:auto 1.4fr 1fr auto;gap:5%;box-sizing:border-box}
.m-site span,.m-site b,.m-site i{display:block;border-radius:6px;background:#CFC7BB}
.m-site__nav{display:flex;align-items:center;gap:4%}
.m-site__nav b{width:16%;height:16px;background:#8C8273}
.m-site__nav span{width:9%;height:8px}
.m-site__nav b + span{margin-left:auto}
.m-site__hero{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:0 4%;border-radius:12px;background:#DED6CA}
.m-site__hero span:first-child{width:58%;height:20px;background:#9A8F80}
.m-site__hero span:nth-child(2){width:40%;height:10px}
.m-site__hero i{width:120px;height:30px;border-radius:999px;background:#D9D1C5}
.m-site__cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:4%}
.m-site__cartes span{border-radius:10px;background:#E3DCD1;border:1px solid #D3CABD}
.m-site__pied{display:flex;gap:4%}
.m-site__pied span{flex:1;height:8px}
.m-site--flou{filter:blur(5px) saturate(.6);opacity:.75}
.m-loupe__verre{position:absolute;inset:0;-webkit-mask-image:radial-gradient(var(--r) var(--r) at var(--x) var(--y),#000 98%,transparent 100%);mask-image:radial-gradient(var(--r) var(--r) at var(--x) var(--y),#000 98%,transparent 100%)}
.m-loupe__verre .m-site{transform-origin:var(--x) var(--y);transform:scale(1.12)}
.m-loupe::after{content:"";position:absolute;left:var(--x);top:var(--y);width:calc(var(--r) * 2);height:calc(var(--r) * 2);margin:calc(var(--r) * -1) 0 0 calc(var(--r) * -1);border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 4px #E0894B,0 0 0 9px rgba(224,137,75,.25),0 20px 50px rgba(0,0,0,.45),inset 0 0 30px rgba(255,255,255,.35)}
.m-repere{position:absolute;left:var(--x);top:var(--y);z-index:2;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#E0894B;box-shadow:0 0 0 5px rgba(224,137,75,.3);opacity:0;transform:scale(.4);transition:opacity .4s,transform .5s cubic-bezier(.3,1.7,.5,1)}
.m-repere em{position:absolute;left:24px;top:50%;transform:translateY(-50%);white-space:nowrap;padding:7px 12px;border-radius:10px;background:#1C1E24;color:#FFF;font-style:normal;font-size:13px;font-weight:600;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.m-repere.est-vu{opacity:1;transform:none}
.m-domaines{list-style:none;margin:0;padding:0;border-top:1px solid var(--w-filet)}
.m-domaines li{position:relative;padding:20px 0 20px 26px;border-bottom:1px solid var(--w-filet);opacity:.4;transition:opacity .4s}
.m-domaines li::before{content:"";position:absolute;left:0;top:28px;width:10px;height:10px;border-radius:50%;border:1px solid var(--w-filet-fort);transition:background .4s,border-color .4s}
.m-domaines li.est-actif{opacity:1}
.m-domaines li.est-actif::before{background:var(--pole);border-color:var(--pole)}
.m-domaines h3{margin:0 0 6px;font-size:20px;font-weight:500}
.m-domaines p{margin:0;font-size:14.5px;line-height:1.5;color:var(--w-gris)}
.m-loupe__note{margin:18px 0 0;font-size:13.5px;color:var(--w-gris-doux)}

/* ---------- Structures : un classeur à onglets ---------- */
.m-classeur__onglets{display:flex;gap:6px;padding-left:24px}
.m-classeur__onglets button{position:relative;top:1px;padding:16px 24px;border:1px solid var(--w-filet);border-bottom:0;border-radius:14px 14px 0 0;background:#0E1016;color:var(--w-gris);font:inherit;font-size:16px;font-weight:500;cursor:pointer;transition:color .3s,background .3s}
.m-classeur__onglets button[aria-selected="true"]{z-index:1;color:var(--w-blanc);background:linear-gradient(180deg,color-mix(in srgb,var(--pole) 22%,#12141B),#12141B);border-color:var(--pole-filet)}
.m-classeur__fiche{position:relative;min-height:200px;padding:clamp(32px,4vw,64px);border-radius:0 24px 24px 24px;border:1px solid var(--pole-filet);background:#12141B}
.m-classeur__fiche p{margin:0;max-width:40ch;font-size:clamp(24px,2.2vw,36px);font-weight:400;letter-spacing:-.015em;line-height:1.35;animation:m-fiche .6s var(--w-ease)}
@keyframes m-fiche{from{opacity:0;transform:translateY(10px)}}

/* ---------- Les audits : une ligne de scan cuivre ---------- */
.m-audits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.m-audits li{position:relative;min-height:240px;padding:24px;box-sizing:border-box;display:flex;flex-direction:column;border-radius:18px;border:1px solid var(--w-filet);overflow:hidden;isolation:isolate}
.m-audits li::after{content:"";position:absolute;left:0;right:0;top:-30%;height:30%;z-index:-1;background:linear-gradient(180deg,transparent,rgba(224,137,75,.28) 80%,#E0894B 100%);opacity:0}
.m-audits li.scanne::after{animation:m-scan 1.4s var(--w-ease) forwards}
.m-audits li:hover::after{animation:m-scan 1.2s var(--w-ease)}
@keyframes m-scan{0%{top:-30%;opacity:1}90%{opacity:1}100%{top:105%;opacity:0}}
.m-audits span{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--pole)}
.m-audits h3{margin:auto 0 10px;padding-top:40px;font-size:20px;font-weight:500;letter-spacing:-.015em;line-height:1.25}
.m-audits p{margin:0;font-size:14.5px;line-height:1.5;color:var(--w-gris)}

@media (max-width:1100px){
  .m-tableau{grid-template-columns:1fr 1fr}
  .m-loupe__grille{grid-template-columns:1fr}
  .m-audits{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){.m-tableau li{transition:none}.m-repere{opacity:1;transform:none}}
/* Près du bord droit, l'étiquette passe à gauche du repère (sinon elle est coupée). */
.m-repere--g em{left:auto;right:24px}
/* Titres des cartes d'audit alignés à la même hauteur */
.m-audits h3{margin:48px 0 10px;padding-top:0}

/* ---------- Vos objectifs v2 (24/10, remplace les notes autocollantes) : un cadran de diagnostic ---------- */
.m-diag{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,5vw,96px);align-items:center}
.m-diag__liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--w-filet)}
.m-diag__liste li{display:grid;grid-template-columns:44px minmax(0,1fr);padding:20px 0;border-bottom:1px solid var(--w-filet);font-size:clamp(17px,1.35vw,21px);line-height:1.4;color:var(--w-gris-doux);cursor:default;transition:color .4s,padding .5s var(--w-ease)}
.m-diag__liste li span{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--w-gris);padding-top:5px}
/* 24/10 (Raphaël : « pas le même style ») : la ligne active ne se décale plus ; elle s'éclaire, et un filet orange
   court sous elle. Toutes les lignes gardent la même position et la même typographie. */
.m-diag__liste li{position:relative}
.m-diag__liste li::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--pole);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--w-ease)}
.m-diag__liste li.est-actif::after{transform:none}
.m-diag__liste li.est-actif{color:var(--w-blanc)}
.m-diag__liste li.est-actif span{color:var(--pole)}
.m-cadran{position:relative;width:min(100%,460px);aspect-ratio:1/1;justify-self:center}
.m-cadran svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.m-cadran__fond{fill:none;stroke:var(--w-filet);stroke-width:14}
.m-cadran__seg{fill:none;stroke:rgba(224,137,75,.25);stroke-width:14;stroke-linecap:round;transition:stroke .5s,stroke-width .5s var(--w-ease),filter .5s}
.m-cadran__seg.est-actif{stroke:#E0894B;stroke-width:22;filter:drop-shadow(0 0 10px rgba(224,137,75,.7))}
.m-cadran__interieur{fill:radial-gradient(#fff,#000);fill:#0E1016;stroke:var(--w-filet);stroke-width:1}
.m-cadran__centre{position:absolute;inset:26%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
.m-cadran__centre span{font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--pole)}
.m-cadran__centre p{margin:0;font-size:clamp(17px,1.4vw,22px);font-weight:500;letter-spacing:-.01em;line-height:1.3;color:var(--w-blanc);animation:m-fiche .6s var(--w-ease)}
@media (max-width:1000px){.m-diag{grid-template-columns:1fr}}

/* ---------- 25/10 : le site sous la loupe dans l'identité du site — maquette sombre (gris acier), le cuivre du pôle
   ne reste que sur l'anneau de la loupe et le repère ---------- */
.m-loupe{background:#0E1016}
.m-site span,.m-site b,.m-site i{background:#262A35}
.m-site__nav b{background:#5C6476}
.m-site__hero{background:radial-gradient(80% 90% at 85% 10%,rgba(224,137,75,.12),transparent 70%),#151821}
.m-site__hero span:first-child{background:#8A93A6}
.m-site__hero i{background:#363B48}
.m-site__cartes span{background:#151821;border-color:rgba(220,229,242,.1)}
.m-loupe::after{box-shadow:0 0 0 4px #E0894B,0 0 0 9px rgba(224,137,75,.25),0 20px 50px rgba(0,0,0,.6),inset 0 0 30px rgba(220,229,242,.12)}
.m-repere em{background:#F7FAFF;color:#0A0B0E}

/* ---------- 25/10 : le cadran dans l'identité du site — anneau fin en argent (plus d'aplats marron), le choix actif
   en cuivre poli qui brille ; au centre, une sphère de mercure cuivré, sombre, derrière le texte ---------- */
.m-cadran__fond{stroke:rgba(220,229,242,.06);stroke-width:2}
.m-cadran__seg{stroke:rgba(220,229,242,.2);stroke-width:3}
.m-cadran__seg.est-actif{stroke:#F3B98A;stroke-width:6;filter:drop-shadow(0 0 6px rgba(243,185,138,.9)) drop-shadow(0 0 22px rgba(224,137,75,.55))}
.m-cadran__interieur{fill:transparent;stroke:rgba(220,229,242,.12)}
.m-cadran::before{content:"";position:absolute;inset:15%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(10,11,14,.55),rgba(10,11,14,.9) 70%),linear-gradient(rgba(224,137,75,.45),rgba(224,137,75,.45)),url(../images/mercure-tourbillons.jpg) center/cover;
  background-blend-mode:normal,color,normal;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 40px rgba(0,0,0,.8),0 40px 80px -40px rgba(0,0,0,.95);animation:m-tourne 60s linear infinite}
@keyframes m-tourne{to{rotate:360deg}}
.m-cadran__centre{z-index:1}
.m-cadran__centre span{color:#F3B98A}
@media (prefers-reduced-motion:reduce){.m-cadran::before{animation:none}}

/* ---------- 25/10 (v2) : la loupe — un vrai site d'exemple sous le verre (titre, bouton, photo de mercure,
   cartes, avis Google), flou autour et net dans la loupe ; l'anneau devient une lentille chromée, liseré cuivre ---------- */
.m-loupe{background:#0B0C10}
.m-site{font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:#C7CBD6;grid-template-rows:auto 1.5fr .9fr auto;gap:4.5%}
.m-site span,.m-site b,.m-site i,.m-site em{background:none;border-radius:0}
.m-site__nav{gap:5%;font-size:clamp(9px,.8vw,13px)}
.m-site__nav b{width:auto;height:auto;margin-right:auto;background:none;font-size:1.15em;font-weight:700;color:#F7FAFF}
.m-site__nav span{width:auto;height:auto;color:#8A93A6}
.m-site__nav b + span{margin-left:0}
.m-site__hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:6%;padding:0 4%;border-radius:14px;
  background:radial-gradient(80% 90% at 85% 10%,rgba(224,137,75,.12),transparent 70%),#13151C;box-shadow:inset 0 0 0 1px rgba(220,229,242,.06)}
.m-site__hero > div{display:flex;flex-direction:column;gap:10px}
.m-site .m-site__titre{width:auto;height:auto;font-size:clamp(14px,1.7vw,28px);font-weight:700;letter-spacing:-.03em;line-height:1.05;color:#F7FAFF}
.m-site .m-site__ligne{display:block;width:88%;height:7px;border-radius:4px;background:#2A2E39}
.m-site .m-site__ligne--courte{width:56%}
.m-site__hero i{width:auto;height:auto;align-self:flex-start;margin-top:4px;padding:7px 14px;border-radius:999px;background:#262A35;color:#8A93A6;font-style:normal;font-size:clamp(8px,.75vw,12px);font-weight:600}
.m-site__image{margin:0;height:78%;border-radius:12px;background:linear-gradient(rgba(224,137,75,.4),rgba(224,137,75,.4)),url(../images/mercure-tourbillons.jpg) center/cover;background-blend-mode:color;box-shadow:inset 0 0 0 1px rgba(220,229,242,.1)}
.m-site__cartes span{border-radius:12px;border:0;box-shadow:inset 0 0 0 1px rgba(220,229,242,.08);background:linear-gradient(180deg,transparent 55%,#13151C 55%),url(../images/hero-plis-nappe.jpg) center/cover}
.m-site__cartes span:nth-child(2){background:linear-gradient(180deg,transparent 55%,#13151C 55%),url(../images/mercure-rubans.jpg) center/cover}
.m-site__cartes span:nth-child(3){background:linear-gradient(180deg,transparent 55%,#13151C 55%),url(../images/flux-matiere-plis.jpg) center/cover;filter:grayscale(1)}
.m-site__pied{align-items:center;justify-content:space-between}
.m-site__pied em{flex:none;font-style:normal;font-size:clamp(8px,.75vw,12px);color:#8A93A6}
.m-site__pied em::first-letter{color:#F5C04E}
.m-site__pied span{flex:0 0 30%;height:7px;border-radius:4px;background:#22252F}
.m-site--flou{filter:blur(3.5px) saturate(.7) brightness(.7);opacity:1}
/* La lentille : chrome, liseré cuivre, reflet */
.m-loupe::after{box-shadow:0 0 0 2px #E0894B,0 0 0 9px #C9D1DE,0 0 0 10px rgba(0,0,0,.5),0 0 0 11px rgba(255,255,255,.35),0 24px 60px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.25),inset 0 18px 36px -18px rgba(255,255,255,.35);
  background:radial-gradient(60% 40% at 32% 18%,rgba(255,255,255,.14),transparent 70%)}
.m-loupe::before{content:"";position:absolute;left:var(--x);top:var(--y);z-index:1;width:calc(var(--r) * 2 + 18px);height:calc(var(--r) * 2 + 18px);margin:calc(var(--r) * -1 - 9px) 0 0 calc(var(--r) * -1 - 9px);border-radius:50%;pointer-events:none;
  background:conic-gradient(from 210deg,#FFFFFF,#8C97AA 18%,#3B4252 30%,#E9EEF6 46%,#6E7A8F 62%,#F7FAFF 78%,#8C97AA 90%,#FFFFFF);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 9px),#000 calc(100% - 8px));mask:radial-gradient(closest-side,transparent calc(100% - 9px),#000 calc(100% - 8px))}
.m-repere em{background:rgba(14,16,22,.94);color:#F7FAFF;border:1px solid rgba(224,137,75,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.m-repere{background:radial-gradient(circle at 34% 30%,#FFE3CC,#E0894B 55%,#7A3B1E)}

/* ---------- 26/10 : « Pour qui » — toutes les structures, tous les secteurs.
   Trois structures en verre sombre (textes d'origine), puis deux bandeaux de secteurs réels qui défilent en sens
   contraire ; chaque secteur mène au projet du client ; au survol la bille s'allume en cuivre ---------- */
.m-structures{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.4vw,24px)}
.m-structures li{position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(26px,2.6vw,40px);border-radius:22px;border:1px solid var(--w-filet);
  background:linear-gradient(165deg,#14161C,#0C0D11 70%);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:border-color .4s,transform .5s var(--w-ease)}
.m-structures li:hover{border-color:rgba(224,137,75,.45);transform:translateY(-4px)}
.m-structures__num{font-size:13px;font-weight:600;letter-spacing:.14em;color:#E0894B}
.m-structures h3{margin:6px 0 0;font-size:clamp(22px,1.8vw,30px);font-weight:600;letter-spacing:-.02em;color:#F7FAFF}
.m-structures p{margin:0;font-size:16px;line-height:1.6;color:var(--w-gris)}
.m-secteurs{margin-top:clamp(56px,6vw,96px);display:grid;gap:14px;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.m-secteurs__legende{margin:0 auto 10px;width:100%;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--w-gris)}
.m-secteurs__piste{display:flex;width:max-content;animation:m-defile 60s linear infinite}
.m-secteurs__piste--inverse{animation-direction:reverse;animation-duration:70s}
.m-secteurs:hover .m-secteurs__piste{animation-play-state:paused}
.m-secteurs__rang{list-style:none;margin:0;padding:0 7px;display:flex;gap:14px}
.m-secteurs a{display:flex;align-items:center;gap:14px;padding:16px 26px 16px 18px;border-radius:999px;border:1px solid var(--w-filet);background:rgba(220,229,242,.025);text-decoration:none;white-space:nowrap;transition:border-color .3s,background .3s}
.m-secteurs a i{flex:none;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff,#DCE5F2 30%,#6E7A8F 65%,#1B1F28);box-shadow:0 4px 10px -4px rgba(0,0,0,.9);transition:background .4s,box-shadow .4s}
.m-secteurs a b{font-size:clamp(17px,1.3vw,21px);font-weight:500;letter-spacing:-.01em;color:#F7FAFF}
.m-secteurs a span{font-size:13px;color:var(--w-gris-doux)}
.m-secteurs a:hover{border-color:rgba(224,137,75,.5);background:rgba(224,137,75,.06)}
.m-secteurs a:hover i{background:radial-gradient(circle at 34% 28%,#FFE3CC,#E0894B 55%,#7A3B1E);box-shadow:0 0 18px -2px rgba(224,137,75,.8)}
@keyframes m-defile{to{transform:translateX(-50%)}}
@media (max-width:1000px){.m-structures{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.m-secteurs__piste{animation:none;flex-wrap:wrap;width:auto}.m-secteurs__rang[aria-hidden]{display:none}.m-secteurs__rang{flex-wrap:wrap}}
.m-secteurs{grid-template-columns:minmax(0,1fr)}.m-secteurs__legende{width:100%;box-sizing:border-box;justify-self:center}