/* Frosted Echoes - accueil Le Mole Web
   Direction active : frosted-echoes. Tokens = contrat.
   Dials : variance .6 / density .25 / motion .7 */

/* ---------- 1. TOKENS ---------- */
:root{
  --fe-glacier:#F7F9FA; --fe-surface:#FFFFFF; --fe-deep:#0E2A3F; --fe-night:#0A0A0C;
  --fe-ink:#0A0A0C; --fe-muted:#3E5567; --fe-accent:#1E6F8C; --fe-accent-light:#A8DCEB;
  --fe-line:#DDE2E4; --fe-prism-a:#C63FA8; --fe-prism-b:#FF7A1A; --fe-prism-c:#4CE0A7;
  --fe-rgb-cyan:168 220 235; --fe-rgb-deep:14 42 63; --fe-rgb-night:10 10 12; --fe-rgb-glacier:247 249 250;

  --fe-font-title:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --fe-font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --fe-font-quote:"Fraunces",Georgia,serif;

  --fe-xs:8px; --fe-sm:16px; --fe-md:32px; --fe-lg:64px; --fe-xl:144px;
  --fe-band:clamp(80px,11vw,144px);
  --fe-gutter:clamp(20px,5vw,56px);
  --fe-max:1180px; --fe-measure:68ch;

  --fe-r-sm:4px; --fe-r-md:14px;

  --fe-dur-hover:.3s; --fe-dur-ice:.5s; --fe-dur-soft:.75s; --fe-dur-mist:1s;
  --fe-dur-halo:5s; --fe-dur-wave:8s; --fe-dur-drift:44s; --fe-stagger:.1s;
  --fe-ease-mist:cubic-bezier(.22,.61,.36,1);
  --fe-ease-glacier:cubic-bezier(.16,1,.30,1);
  --fe-ease-breath:cubic-bezier(.45,0,.55,1);

  --fe-glow:0 0 0 1px rgb(var(--fe-rgb-cyan)/.42),0 0 34px rgb(var(--fe-rgb-cyan)/.30);
  --fe-glow-hi:0 0 0 1px rgb(var(--fe-rgb-cyan)/.55),0 0 44px rgb(var(--fe-rgb-cyan)/.34);
  --fe-shadow:0 22px 60px -34px rgb(var(--fe-rgb-deep)/.55);
}

/* ---------- 2. NEUTRALISATION DES FUITES (Bricks / UA) ----------
   :where() = specificite 0, tout composant reprend la main ensuite. */
.fe-page :where(h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,dl,dd,fieldset){margin:0;padding:0;border:0;background:none;}
.fe-page :where(ul,ol){list-style:none;}
.fe-page :where(img,svg,video){display:block;max-width:100%;height:auto;}
.fe-page :where(button,input,textarea,select){font:inherit;color:inherit;}
.fe-page :where(a){color:inherit;}
.fe-page *,.fe-page *::before,.fe-page *::after{box-sizing:border-box;}

/* ---------- 3. BASE ---------- */
.fe-page{
  background:var(--fe-glacier); color:var(--fe-ink);
  font-family:var(--fe-font-body); font-size:clamp(16px,.95rem + .18vw,17px);
  line-height:1.68; letter-spacing:-.011em; margin:0; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.fe-page ::selection{background:rgb(var(--fe-rgb-cyan)/.55);color:var(--fe-deep);}
.fe-page :focus-visible{outline:2px solid var(--fe-accent);outline-offset:3px;border-radius:var(--fe-r-sm);}
.fe-skip{position:absolute;left:-9999px;}
.fe-skip:focus{left:var(--fe-gutter);top:8px;z-index:400;background:var(--fe-night);color:var(--fe-glacier);padding:10px 16px;border-radius:var(--fe-r-sm);}
.fe-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}

/* Bandes sombres : le cyan bascule en clair, jamais l'inverse */
.fe-dark{background:var(--fe-deep);color:var(--fe-glacier);--fe-ink:#F7F9FA;--fe-muted:#AEBFCB;--fe-accent:#A8DCEB;--fe-line:rgb(168 220 235/.20);}
.fe-night-band{background:var(--fe-night);color:var(--fe-glacier);--fe-ink:#F7F9FA;--fe-muted:#AEBFCB;--fe-accent:#A8DCEB;--fe-line:rgb(168 220 235/.18);}

/* ---------- 4. STRUCTURE ---------- */
.fe-wrap{width:100%;max-width:var(--fe-max);margin-inline:auto;padding-inline:var(--fe-gutter);}
.fe-band{padding-block:var(--fe-band);position:relative;}
.fe-stack{display:flex;flex-direction:column;gap:var(--fe-sm);}
.fe-stack-lg{display:flex;flex-direction:column;gap:var(--fe-md);}
/* variance .6 : axe decale, colonne collante d'un cote */
.fe-offset{display:grid;grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr);gap:clamp(32px,6vw,96px);align-items:start;}
.fe-hold{position:sticky;top:88px;}
@media (max-width:900px){.fe-offset{grid-template-columns:1fr;gap:var(--fe-md);}.fe-hold{position:static;}}

/* ---------- 5. TYPOGRAPHIE ---------- */
.fe-page h1,.fe-page h2,.fe-page h3,.fe-page h4{font-family:var(--fe-font-title);font-weight:300;letter-spacing:-.03em;color:var(--fe-ink);text-wrap:balance;}
.fe-t-hero{font-size:clamp(2.5rem,1.4rem + 5.4vw,5.5rem);line-height:.98;}
.fe-t-1{font-size:clamp(2rem,1.5rem + 2.4vw,3.4rem);line-height:1.04;}
.fe-t-2{font-size:clamp(1.5rem,1.25rem + 1.2vw,2.25rem);line-height:1.12;}
.fe-t-3{font-size:clamp(1.15rem,1.05rem + .45vw,1.4rem);line-height:1.2;font-weight:400;letter-spacing:-.02em;}
.fe-em{font-weight:500;}
.fe-lead{font-size:clamp(1.1rem,1rem + .55vw,1.4rem);font-weight:300;line-height:1.5;color:var(--fe-muted);max-width:56ch;}
.fe-body{max-width:var(--fe-measure);color:var(--fe-muted);}
.fe-note{font-size:.9rem;line-height:1.6;color:var(--fe-muted);}
.fe-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--fe-accent);}
.fe-eyebrow::before{content:"";width:32px;height:1px;background:currentColor;opacity:.55;}
.fe-tag{font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fe-muted);}
.fe-quote{font-family:var(--fe-font-quote);font-style:italic;font-weight:300;line-height:1.32;letter-spacing:-.01em;color:var(--fe-ink);text-wrap:pretty;}
.fe-a{color:var(--fe-accent);text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:2px;transition:background-size var(--fe-dur-ice) var(--fe-ease-glacier);}
.fe-a:hover,.fe-a:focus-visible{background-size:100% 1px;}

/* ---------- 6. TEXTURES ---------- */
.fe-mist{position:relative;isolation:isolate;}
.fe-mist::before{content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:radial-gradient(48% 38% at 22% 28%,rgb(var(--fe-rgb-cyan)/.16),transparent 68%),radial-gradient(42% 34% at 78% 62%,rgb(var(--fe-rgb-glacier)/.12),transparent 70%);
  filter:blur(28px);animation:fe-drift var(--fe-dur-drift) var(--fe-ease-breath) infinite alternate;}
.fe-mist > *{position:relative;z-index:2;}
.fe-grain{position:relative;isolation:isolate;}
.fe-grain::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");}
.fe-grain > *{position:relative;z-index:2;}
.fe-frost{background:rgb(var(--fe-rgb-glacier)/.06);-webkit-backdrop-filter:blur(12px) saturate(120%);backdrop-filter:blur(12px) saturate(120%);border:1px solid rgb(var(--fe-rgb-cyan)/.14);}
.fe-prism{height:2px;border:0;background:linear-gradient(90deg,var(--fe-accent-light),var(--fe-prism-c) 34%,var(--fe-prism-b) 67%,var(--fe-prism-a));}
.fe-rule{height:1px;border:0;background:linear-gradient(90deg,rgb(var(--fe-rgb-cyan)/.6),var(--fe-line) 42%,transparent);transform-origin:left;}

/* ---------- 7. SIGNATURE : l'onde d'echo ---------- */
.fe-echo{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:1;overflow:hidden;}
.fe-echo span{grid-area:1/1;width:min(74vmin,820px);aspect-ratio:1;border-radius:50%;border:1px solid rgb(var(--fe-rgb-cyan)/.62);opacity:0;animation:fe-wave var(--fe-dur-wave) var(--fe-ease-breath) infinite;}
.fe-echo span:nth-child(2){animation-delay:calc(var(--fe-dur-wave)/3);}
.fe-echo span:nth-child(3){animation-delay:calc(var(--fe-dur-wave)/3*2);}

/* ---------- 8. MOUVEMENT ---------- */
@keyframes fe-wave{0%{opacity:0;transform:scale(1);}16%{opacity:.24;}100%{opacity:0;transform:scale(1.18);}}
@keyframes fe-halo{0%,100%{opacity:.10;}50%{opacity:.20;}}
@keyframes fe-drift{0%{transform:translate3d(-2%,0,0) scale(1);}100%{transform:translate3d(2%,-1.5%,0) scale(1.06);}}
@keyframes fe-rise{from{opacity:0;transform:translate3d(0,28px,0);}to{opacity:1;transform:none;}}
@keyframes fe-clear{from{opacity:0;filter:blur(16px);transform:translate3d(0,20px,0);}to{opacity:1;filter:blur(0);transform:none;}}
@keyframes fe-draw{from{transform:scaleX(0);}to{transform:scaleX(1);}}

.fe-js .fe-rise,.fe-js .fe-clear,.fe-js .fe-rule{opacity:0;}
.fe-js .fe-rule{opacity:1;transform:scaleX(0);}
.fe-rise.is-in{animation:fe-rise var(--fe-dur-soft) var(--fe-ease-glacier) both;}
.fe-clear.is-in{animation:fe-clear var(--fe-dur-mist) var(--fe-ease-mist) both;}
.fe-rule.is-in{animation:fe-draw var(--fe-dur-ice) var(--fe-ease-glacier) both;}
.fe-cascade > *:nth-child(2){animation-delay:var(--fe-stagger);}
.fe-cascade > *:nth-child(3){animation-delay:calc(var(--fe-stagger)*2);}
.fe-cascade > *:nth-child(4){animation-delay:calc(var(--fe-stagger)*3);}
.fe-para{will-change:transform;transform:translate3d(0,calc(var(--fe-p,0) * 1px),0);}
.fe-halo{position:absolute;pointer-events:none;z-index:1;background:radial-gradient(50% 50% at 50% 50%,rgb(var(--fe-rgb-cyan)/.55),transparent 70%);filter:blur(28px);animation:fe-halo var(--fe-dur-halo) var(--fe-ease-breath) infinite;}

/* ---------- 9. CONTROLES ---------- */
.fe-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;
  font-size:.85rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  color:var(--fe-glacier);background:var(--fe-night);border:1px solid var(--fe-night);border-radius:var(--fe-r-sm);cursor:pointer;
  transition:box-shadow var(--fe-dur-hover) var(--fe-ease-mist),transform var(--fe-dur-hover) var(--fe-ease-glacier),border-color var(--fe-dur-hover) var(--fe-ease-mist);}
.fe-btn:hover{box-shadow:var(--fe-glow);border-color:rgb(var(--fe-rgb-cyan)/.5);transform:translateY(-1px);}
.fe-btn:active{transform:none;}
.fe-btn-ghost{color:var(--fe-ink);background:transparent;border-color:var(--fe-line);}
.fe-btn-ghost:hover{border-color:rgb(var(--fe-rgb-cyan)/.7);box-shadow:none;}
.fe-dark .fe-btn-ghost,.fe-night-band .fe-btn-ghost{color:var(--fe-glacier);border-color:rgb(var(--fe-rgb-cyan)/.32);}
.fe-field{display:flex;flex-direction:column;gap:6px;}
.fe-field label{font-size:.82rem;color:var(--fe-muted);}
.fe-input,.fe-textarea{background:transparent;border:0;border-bottom:1px solid var(--fe-line);border-radius:0;padding:10px 0;min-height:48px;color:var(--fe-ink);transition:border-color var(--fe-dur-hover) var(--fe-ease-mist);}
.fe-textarea{min-height:120px;resize:vertical;line-height:1.6;}
.fe-input:hover,.fe-textarea:hover{border-bottom-color:rgb(var(--fe-rgb-cyan)/.6);}
.fe-input:focus,.fe-textarea:focus{outline:none;border-bottom-color:var(--fe-accent);box-shadow:0 1px 0 0 var(--fe-accent);}

/* ---------- 10. NAVIGATION ---------- */
.fe-nav{position:sticky;top:0;z-index:50;background:transparent;transition:background var(--fe-dur-soft) var(--fe-ease-mist),backdrop-filter var(--fe-dur-soft) var(--fe-ease-mist);}
.fe-nav-in{display:flex;align-items:center;justify-content:space-between;gap:var(--fe-md);min-height:var(--fe-nav-h,76px);transition:min-height var(--fe-dur-soft) var(--fe-ease-glacier);}
.fe-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fe-glacier);font-family:var(--fe-font-title);font-weight:500;letter-spacing:-.02em;}
.fe-brand{gap:11px;align-items:center;}
.fe-nav-links{display:flex;align-items:center;gap:var(--fe-md);}
.fe-nav-links a{text-decoration:none;font-size:.88rem;color:rgb(221 226 228/.7);transition:color var(--fe-dur-hover) var(--fe-ease-mist);}
.fe-nav-links a:hover{color:var(--fe-accent-light);}
.fe-nav-links .fe-btn{min-height:40px;padding:0 20px;}
/* Regle heritee retiree : elle masquait chaque lien du tiroir mobile.
   Le tiroir est desormais gere en section 32. */

/* ---------- 11. HERO ---------- */
.fe-hero{position:relative;isolation:isolate;overflow:hidden;min-height:min(92svh,880px);display:grid;align-items:end;padding-bottom:clamp(48px,8vw,110px);}
.fe-sky{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#05080C 0%,#0B2033 46%,#16455F 78%,#2E6A85 100%);}
.fe-ridge{position:absolute;inset:auto 0 0 0;z-index:1;width:100%;pointer-events:none;}
.fe-hero-in{position:relative;z-index:4;display:grid;gap:var(--fe-md);max-width:780px;}
.fe-hero-cta{display:flex;flex-wrap:wrap;gap:var(--fe-sm);}

/* ---------- 12. BANDEAU DE PREUVES (filets, pas de cartes) ---------- */
.fe-proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));border-block:1px solid var(--fe-line);}
.fe-proof > div{padding:var(--fe-md) var(--fe-sm) var(--fe-md) 0;display:flex;gap:14px;align-items:flex-start;}
.fe-proof > div + div{border-left:1px solid var(--fe-line);padding-left:var(--fe-md);}
@media (max-width:700px){.fe-proof > div + div{border-left:0;border-top:1px solid var(--fe-line);padding-left:0;}}
.fe-proof svg{width:18px;height:18px;flex:none;color:var(--fe-accent);margin-top:4px;}

/* ---------- 13. FRICTIONS (filets, pas de cartes) ---------- */
.fe-friction{display:grid;gap:var(--fe-md);}
.fe-friction > li{display:grid;gap:10px;padding-left:var(--fe-sm);border-left:1px solid var(--fe-line);}

/* ---------- 14. SERVICES : bento asymetrique, fonds varies ---------- */
.fe-bento{display:grid;gap:1px;background:rgb(var(--fe-rgb-cyan)/.16);border:1px solid rgb(var(--fe-rgb-cyan)/.16);border-radius:var(--fe-r-md);overflow:hidden;
  grid-template-columns:repeat(6,1fr);}
.fe-cell{background:var(--fe-deep);padding:var(--fe-md);display:flex;flex-direction:column;gap:12px;justify-content:flex-end;min-height:190px;text-decoration:none;
  transition:background var(--fe-dur-soft) var(--fe-ease-mist);}
.fe-cell:hover{background:#123954;}
.fe-cell--lead{grid-column:span 3;grid-row:span 2;min-height:400px;background:linear-gradient(155deg,#16506E,#0A0A0C 78%);}
.fe-cell--wide{grid-column:span 3;}
.fe-cell--half{grid-column:span 3;background:#0B2233;}
.fe-cell--third{grid-column:span 2;background:#0A0A0C;}
.fe-cell--lead .fe-t-3{font-size:clamp(1.5rem,1.2rem + 1.5vw,2.4rem);}
.fe-cell svg{width:22px;height:22px;color:var(--fe-accent-light);stroke-width:1.25;}
@media (max-width:820px){.fe-bento{grid-template-columns:repeat(2,1fr);}
  .fe-cell--lead{grid-column:span 2;grid-row:auto;min-height:280px;}
  .fe-cell--wide,.fe-cell--half{grid-column:span 2;}
  .fe-cell--third{grid-column:span 1;}}

/* ---------- 15. METHODE ---------- */
.fe-steps{position:relative;padding-left:var(--fe-md);display:grid;gap:var(--fe-md);}
.fe-steps::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:linear-gradient(180deg,rgb(var(--fe-rgb-cyan)/.6),var(--fe-line) 60%,transparent);}
.fe-steps > li{position:relative;display:grid;gap:8px;}
.fe-steps > li::before{content:"";position:absolute;left:calc(-1 * var(--fe-md));top:9px;width:11px;height:11px;border-radius:50%;background:var(--fe-glacier);border:1px solid var(--fe-accent-light);box-shadow:0 0 0 4px rgb(var(--fe-rgb-cyan)/.12);}

/* ---------- 16. AVANT / APRES ---------- */
.fe-split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--fe-line);border-radius:var(--fe-r-md);overflow:hidden;}
.fe-split > div{padding:var(--fe-md);min-height:290px;display:flex;flex-direction:column;gap:var(--fe-sm);}
.fe-split-before{background:#ECEFF1;transition:filter var(--fe-dur-mist) var(--fe-ease-mist);}
.fe-split:hover .fe-split-before{filter:blur(3px) saturate(.7);}
.fe-split-after{background:linear-gradient(150deg,var(--fe-deep),var(--fe-night));color:var(--fe-glacier);}
@media (max-width:660px){.fe-split{grid-template-columns:1fr;}}

/* ---------- 17. REALISATIONS : une grande, deux petites ---------- */
.fe-work{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--fe-sm);}
.fe-piece{position:relative;display:block;overflow:hidden;border-radius:var(--fe-r-md);text-decoration:none;color:var(--fe-glacier);background:var(--fe-deep);transition:box-shadow var(--fe-dur-hover) var(--fe-ease-mist);}
.fe-piece--big{grid-column:span 2;grid-row:span 2;}
.fe-piece img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform var(--fe-dur-mist) var(--fe-ease-glacier);}
.fe-piece--big img{aspect-ratio:16/11;}
.fe-piece:hover{box-shadow:var(--fe-glow-hi);}
.fe-piece:hover img{transform:scale(1.04) skewY(-.35deg);}
.fe-piece figcaption{position:absolute;inset:auto 0 0 0;padding:var(--fe-sm) var(--fe-md);background:linear-gradient(0deg,rgb(var(--fe-rgb-night)/.86),transparent);font-family:var(--fe-font-title);letter-spacing:-.015em;}
@media (max-width:760px){.fe-work{grid-template-columns:1fr;}.fe-piece--big{grid-column:span 1;grid-row:span 1;}}

/* ---------- 18. TEMOIGNAGES : une dominante, deux en filet ---------- */
.fe-voices{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:start;}
.fe-voice-main .fe-quote{font-size:clamp(1.5rem,1.2rem + 1.5vw,2.4rem);}
.fe-voice-side{display:grid;gap:var(--fe-md);}
.fe-voice-side > li{padding-top:var(--fe-sm);border-top:1px solid var(--fe-line);display:grid;gap:10px;}
.fe-who{display:flex;align-items:center;gap:14px;}
.fe-who img{width:44px;height:44px;border-radius:50%;flex:none;}
@media (max-width:820px){.fe-voices{grid-template-columns:1fr;}}

/* ---------- 19. ZONE ---------- */
.fe-zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:var(--fe-md);}
.fe-zones ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.fe-zones a{display:inline-block;padding:5px 12px;border:1px solid rgb(var(--fe-rgb-cyan)/.24);border-radius:999px;font-size:.78rem;text-decoration:none;color:var(--fe-accent);transition:border-color var(--fe-dur-hover) var(--fe-ease-mist);}
.fe-zones a:hover{border-color:rgb(var(--fe-rgb-cyan)/.7);}

/* ---------- 20. EQUIPE ---------- */
.fe-crew{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:var(--fe-sm);}
.fe-face{aspect-ratio:3/4;border-radius:var(--fe-r-sm);position:relative;overflow:hidden;background:linear-gradient(165deg,#1B4A66,#0A0A0C);}
.fe-face::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 45% at 50% 30%,rgb(var(--fe-rgb-cyan)/.26),transparent 70%);}

/* ---------- 21. FAQ ---------- */
.fe-faq{border-top:1px solid var(--fe-line);}
.fe-faq details{border-bottom:1px solid var(--fe-line);}
.fe-faq summary{list-style:none;cursor:pointer;padding:var(--fe-sm) 0;display:flex;gap:var(--fe-sm);align-items:baseline;justify-content:space-between;min-height:48px;}
.fe-faq summary::-webkit-details-marker{display:none;}
.fe-faq summary h3{font-size:clamp(1.05rem,1rem + .4vw,1.3rem);font-weight:400;letter-spacing:-.02em;line-height:1.25;}
.fe-plus{flex:none;width:16px;height:16px;position:relative;margin-top:7px;}
.fe-plus::before,.fe-plus::after{content:"";position:absolute;inset:50% 0 auto 0;height:1px;background:var(--fe-accent);transition:transform var(--fe-dur-hover) var(--fe-ease-glacier);}
.fe-plus::after{transform:rotate(90deg);}
.fe-faq details[open] .fe-plus::after{transform:rotate(0);}
.fe-faq-a{padding-bottom:var(--fe-sm);max-width:var(--fe-measure);}

/* ---------- 22. PIED DE PAGE ---------- */
.fe-foot{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--fe-md);}
.fe-foot a{color:rgb(221 226 228/.7);text-decoration:none;font-size:.88rem;display:block;padding:3px 0;}
.fe-foot a:hover{color:var(--fe-accent-light);}

/* ---------- 23. JAUGE + RAPPEL MOBILE ---------- */
.fe-dock{position:fixed;inset:auto 0 0 0;z-index:55;padding:10px var(--fe-gutter) calc(10px + env(safe-area-inset-bottom));background:rgb(var(--fe-rgb-night)/.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgb(var(--fe-rgb-cyan)/.16);transform:translateY(110%);transition:transform var(--fe-dur-soft) var(--fe-ease-glacier);}
.fe-dock.is-in{transform:none;}
.fe-dock .fe-btn{width:100%;}
@media (min-width:721px){.fe-dock{display:none;}}

/* ---------- 24. MOUVEMENT REDUIT ---------- */
@media (prefers-reduced-motion:reduce){
  .fe-page *,.fe-page *::before,.fe-page *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  .fe-js .fe-rise,.fe-js .fe-clear{opacity:1 !important;transform:none !important;filter:none !important;}
  .fe-js .fe-rule{opacity:1 !important;transform:none !important;}
  .fe-echo,.fe-halo{display:none;}
  .fe-mist::before{animation:none;}
  .fe-para{transform:none !important;}
  .fe-dock{transition:none;}
}

/* ---------- 25. MENU ---------- */
.fe-menu{display:flex;align-items:center;gap:var(--fe-md);}
.fe-menu a{display:inline-flex;align-items:center;gap:7px;min-height:44px;text-decoration:none;font-size:.88rem;color:#EAF1F4;transition:color var(--fe-dur-hover) var(--fe-ease-mist);}
.fe-menu a:hover,.fe-menu a:focus-visible{color:var(--fe-accent-light);}
.fe-menu .menu-item-has-children > a::after{content:"";width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--fe-dur-hover) var(--fe-ease-glacier);}
.fe-menu .fe-cta > a{min-height:40px;padding:0 20px;color:var(--fe-glacier);background:var(--fe-night);border:1px solid rgb(168 220 235/.28);border-radius:var(--fe-r-sm);font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;transition:box-shadow var(--fe-dur-hover) var(--fe-ease-mist),border-color var(--fe-dur-hover) var(--fe-ease-mist);}
.fe-menu .fe-cta > a:hover{color:var(--fe-glacier);box-shadow:var(--fe-glow);border-color:rgb(168 220 235/.55);}
.fe-burger{display:none;width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;}
.fe-burger i{display:block;width:20px;height:1px;background:var(--fe-glacier);transition:transform var(--fe-dur-hover) var(--fe-ease-glacier),opacity var(--fe-dur-hover);}
.fe-burger[aria-expanded="true"] i:nth-of-type(1){transform:translateY(3px) rotate(45deg);}
.fe-burger[aria-expanded="true"] i:nth-of-type(2){transform:translateY(-3px) rotate(-45deg);}

@media (min-width:881px){
  .fe-menu .sub-menu{position:absolute;top:100%;left:-18px;min-width:288px;display:grid;padding:10px 0;background:rgb(10 10 12/.95);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgb(168 220 235/.14);border-radius:var(--fe-r-sm);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--fe-dur-hover) var(--fe-ease-mist),transform var(--fe-dur-hover) var(--fe-ease-glacier),visibility var(--fe-dur-hover);}
  .fe-menu > li{position:relative;}
  .fe-menu > li:hover > .sub-menu,.fe-menu > li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none;}
  .fe-menu > li:hover > a::after,.fe-menu > li:focus-within > a::after{transform:rotate(-135deg) translateY(2px);}
  .fe-menu .sub-menu a{padding:7px 22px;min-height:40px;font-size:.86rem;}
}

@media (max-width:880px){
  .fe-burger{display:flex;}
  .fe-nav-links{position:fixed;inset:0;z-index:49;padding:calc(var(--fe-nav-h,76px) + 12px) var(--fe-gutter) 96px;overflow-y:auto;background:rgb(10 10 12/.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity var(--fe-dur-hover) var(--fe-ease-mist),transform var(--fe-dur-soft) var(--fe-ease-glacier),visibility var(--fe-dur-hover);}
  .fe-nav-links.is-open{opacity:1;visibility:visible;transform:none;}
  .fe-menu{flex-direction:column;align-items:stretch;gap:0;}
  .fe-menu > li{border-bottom:1px solid rgb(168 220 235/.12);}
  .fe-menu > li > a{min-height:56px;font-size:1.05rem;justify-content:space-between;}
  .fe-menu .sub-menu{display:none;padding:0 0 14px 2px;}
  .fe-menu > li.is-open > .sub-menu{display:grid;}
  .fe-menu > li.is-open > a::after{transform:rotate(-135deg) translateY(2px);}
  .fe-menu .sub-menu a{min-height:44px;color:rgb(221 226 228/.62);}
  .fe-menu .fe-cta{border-bottom:0;margin-top:var(--fe-md);}
  .fe-menu .fe-cta > a{justify-content:center;min-height:48px;}
}

@media (prefers-reduced-motion:reduce){.fe-nav-links,.fe-menu .sub-menu,.fe-burger i{transition:none;}}

/* Villes sans page dediee : forme de puce, aucune affordance de lien */
.fe-zones li > span{display:inline-block;padding:5px 12px;border:1px solid rgb(var(--fe-rgb-cyan)/.13);border-radius:999px;font-size:.78rem;color:var(--fe-muted);}

/* ---------- 27. PHOTOGRAPHIES ---------- */
.fe-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;filter:saturate(.5) contrast(1.06) brightness(.66);}
.fe-veil{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgb(5 8 12/.72) 0%,rgb(11 32 51/.42) 42%,rgb(10 10 12/.9) 100%);}
.fe-hero .fe-echo{z-index:3;}
.fe-photo{position:relative;isolation:isolate;overflow:hidden;}
.fe-photo > .fe-wrap{position:relative;z-index:3;}
.fe-band-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;filter:saturate(.42) contrast(1.04) brightness(.5);}
.fe-veil--band{background:linear-gradient(180deg,rgb(14 42 63/.9) 0%,rgb(14 42 63/.72) 50%,rgb(14 42 63/.92) 100%);}
.fe-credit{font-size:.72rem;color:rgb(174 191 203/.55);}
.fe-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px;}

/* ---------- 29. REFRACTION ----------
   Grammaire Hipgnosis, pas citation : un rayon, une dispersion.
   Aucun triangle, aucune reprise de pochette. La direction l interdit. */

/* Le rayon. Statique par choix : le hero fait deja tourner l onde d echo,
   et la regle est de deux animations simultanees au maximum.
   Lu comme une trouee de lumiere dans la couche nuageuse. */
.fe-beam{position:absolute;inset:-25% -12% auto -12%;height:140%;z-index:3;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(104deg,transparent 0 36%,rgb(var(--fe-rgb-cyan)/.045) 40%,rgb(247 249 250/.14) 45.5%,rgb(var(--fe-rgb-cyan)/.05) 51%,transparent 56% 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 58%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 58%,transparent 100%);}

/* La dispersion. Le spectre derive tres lentement le long du filet :
   la lumiere blanche qui se decompose, sur 18 secondes. */
.fe-prism{background-size:300% 100%;animation:fe-refract 14s var(--fe-ease-breath) infinite alternate;}
@keyframes fe-refract{from{background-position:0% 50%;}to{background-position:100% 50%;}}

@media (prefers-reduced-motion:reduce){
  .fe-prism{animation:none;background-position:0 50%;background-size:100% 100%;}
}

/* ---------- 30. INTENSITE ----------
   Le mouvement doit se voir sans se remarquer. Tout reste lent :
   ce qui change, c est l amplitude, pas la vitesse. */
.fe-beam{animation:fe-breathe 14s var(--fe-ease-breath) infinite;}
@keyframes fe-breathe{0%,100%{opacity:.5;}50%{opacity:1;}}
.fe-grain > .fe-halo,.fe-mist > .fe-halo{z-index:1;}
@media (prefers-reduced-motion:reduce){
  .fe-beam{animation:none;opacity:.8;}
}

/* Troisieme retour de l onde : plus loin, plus petit, decale.
   Un echo qui se repete à l identique n est pas un echo. */
.fe-echo--loin{place-items:center start;}
.fe-echo--loin span{width:min(46vmin,520px);margin-left:-8vmin;animation-duration:11s;}
.fe-echo--loin span:nth-child(2){animation-delay:3.67s;}
.fe-echo--loin span:nth-child(3){animation-delay:7.33s;}

/* ---------- 31. EN-TETE ----------
   La brume monte. Au-dessus du hero, rien : le contenu flotte sur la photo.
   Passe le hero, le givre prend et la barre se resserre.
   La limite basse est une ligne de crete, pas un trait, et elle se remplit
   en cyan au fil du scroll. Un seul instrument. */
:root{--fe-nav-h:104px;--fe-nav-h-frost:74px;--fe-progress:0%;--fe-progress-n:0;}
.fe-nav.is-frost{background:rgb(var(--fe-rgb-night)/.74);-webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%);}
.fe-nav.is-frost .fe-nav-in{min-height:var(--fe-nav-h-frost,74px);}

.fe-brand__peak{width:34px;height:29px;flex:none;color:var(--fe-accent-light);transition:transform var(--fe-dur-soft) var(--fe-ease-glacier);}
.fe-nav.is-frost .fe-brand__peak{transform:scale(.85);}
.fe-brand__mot{font-family:var(--fe-font-title);font-weight:500;letter-spacing:-.02em;}
.fe-brand__alt{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:10px;letter-spacing:.14em;color:rgb(var(--fe-rgb-cyan)/.75);align-self:flex-start;margin-top:3px;}
@media (max-width:560px){.fe-brand__alt{display:none;}}

.fe-horizon{position:absolute;inset:auto 0 0 0;height:40px;pointer-events:none;color:rgb(var(--fe-rgb-cyan)/.20);transition:height var(--fe-dur-soft) var(--fe-ease-glacier);}
.fe-horizon__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.fe-horizon__fill{color:var(--fe-accent-light);clip-path:inset(0 calc(100% - var(--fe-progress,0%)) 0 0);filter:drop-shadow(0 0 calc(4px + var(--fe-progress-n,0) * 11px) rgb(var(--fe-rgb-cyan)/.55));}

@media (prefers-reduced-motion:reduce){
  .fe-nav,.fe-nav-in,.fe-brand__peak,.fe-horizon__fill{transition:none;}
}

/* ---------- 32. LISIBILITE ET RESPIRATION ----------
   Un en-tete transparent pose sur une photo ne tient pas le contraste :
   il lui faut un voile. Celui-ci est un degrade descendant, qui se lit
   comme un ciel qui s assombrit en haut de cadre. Il disparait quand le
   givre prend, puisque le fond devient alors opaque. */
.fe-nav{isolation:isolate;}
.fe-nav::before{content:"";position:absolute;inset:0 0 auto 0;height:210%;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgb(var(--fe-rgb-night)/.84) 0%,rgb(var(--fe-rgb-night)/.52) 44%,transparent 100%);transition:opacity var(--fe-dur-soft) var(--fe-ease-mist);}
.fe-nav.is-frost::before{opacity:0;}
.fe-nav-in{position:relative;z-index:2;}
.fe-horizon{z-index:2;}

/* La crete respire. 22 secondes, amplitude minuscule : elle est visible
   sur chaque page et a chaque scroll, donc elle doit se ressentir sans
   jamais attirer le regard. */
.fe-horizon{transform-origin:bottom;animation:fe-crete 22s var(--fe-ease-breath) infinite;}
@keyframes fe-crete{0%,100%{transform:scaleY(1);opacity:.82;}50%{transform:scaleY(1.22);opacity:1;}}

@media (prefers-reduced-motion:reduce){
  .fe-horizon{animation:none;transform:none;opacity:1;}
  .fe-nav::before{transition:none;}
}

/* ---------- 10b. CRETE : jauge d'ascension ---------- */
.fe-nav.is-frost .fe-horizon{height:26px;}
.fe-horizon__mark{position:absolute;top:0;bottom:0;left:var(--fe-progress,0%);width:1px;pointer-events:none;background:linear-gradient(180deg,transparent,rgb(var(--fe-rgb-cyan)/.6));box-shadow:0 0 20px 7px rgb(var(--fe-rgb-cyan)/.20);opacity:calc(.16 + var(--fe-progress-n,0) * .74);}
.fe-brand__alt{font-variant-numeric:tabular-nums;}
@media (prefers-reduced-motion:reduce){.fe-horizon{transition:none;}}


/* ---------- 32. RESPONSIVE : CORRECTIONS ----------
   Trois defauts constates sur telephone :
   1. le tiroir s ouvrait vide, une regle heritee masquait chaque lien ;
   2. deux voiles debordaient a droite et ouvraient un defilement lateral ;
   3. le burger passait sous le panneau, le menu ne se refermait plus.
   Rien n est ajoute a la direction : on retire ce qui gene. */

/* 32.1 Plus aucun debordement lateral.
   clip et non hidden : hidden ferait du corps un conteneur de defilement
   et l en-tete collant perdrait son ancrage. */
.fe-page{overflow-x:clip;overflow-wrap:break-word;}
.fe-band,.fe-mist{overflow-x:clip;}
.fe-mist::before{inset:-20% 0;}
.fe-page :where(pre,table,iframe,video){max-width:100%;}

/* 32.2 Le tiroir mobile rend enfin ses liens. */
@media (max-width:880px){
  :root{--fe-nav-h:76px;--fe-nav-h-frost:64px;}

  /* Marque et burger restent au-dessus de la brume du panneau. */
  .fe-brand,.fe-burger{position:relative;z-index:60;}

  .fe-nav-links{
    display:block;
    padding:calc(var(--fe-nav-h) + 18px) var(--fe-gutter) calc(96px + env(safe-area-inset-bottom));
    overscroll-behavior:contain;
  }
  .fe-nav-links a{display:flex;}
  .fe-menu{display:flex;}
  .fe-menu .fe-cta > a{display:inline-flex;width:100%;}

  /* Le rappel du bas ne flotte plus par-dessus le tiroir. */
  .fe-page.fe-lock .fe-dock{transform:translateY(110%);}
}

/* 32.3 Le corps ne defile plus derriere le tiroir ouvert. */
.fe-page.fe-lock{overflow:hidden;}

/* 32.4 Sur telephone, toucher une entree parente ouvre son tiroir :
   la page parente reste joignable, rappelee en tete de liste. */
.fe-menu .fe-self{color:var(--fe-accent-light);}
@media (min-width:881px){.fe-menu .fe-self{display:none;}}

/* 32.5 Petits ecrans : le bento passe en colonne unique. */
@media (max-width:560px){
  .fe-bento{grid-template-columns:1fr;}
  .fe-cell,.fe-cell--lead,.fe-cell--wide,.fe-cell--half,.fe-cell--third{grid-column:span 1;}
  .fe-cell{min-height:160px;}
  .fe-cell--lead{min-height:240px;}
}
/* 32.6 L en-tete ne doit plus capturer le tiroir.
   backdrop-filter fait de l element un bloc conteneur pour les
   descendants position:fixed. Le tiroir, enferme dans la barre,
   se reduisait a la hauteur de celle-ci : d ou la troncature.
   Tiroir ouvert, le givre de la barre ne se voit pas : on le coupe. */
.fe-page.fe-lock .fe-nav,
.fe-nav:has(.fe-nav-links.is-open){
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
/* La ligne de crete traversait le panneau : elle se retire avec lui. */
.fe-page.fe-lock .fe-horizon,
.fe-nav:has(.fe-nav-links.is-open) .fe-horizon{opacity:0;}

/* 32.7 Le tiroir se mesure au viewport, jamais a son parent. */
@media (max-width:880px){
  .fe-nav-links{
    inset:0 0 auto 0;
    height:100vh;
    height:100dvh;
  }
}
/* ---------- 33. PHOTO EN FOND DE HERO DE PAGE ----------
   Les pages prestation et editoriales portaient une crete dessinee.
   Elle cede la place a une photo du Mole, servie par l image mise en
   avant. Le ciel degrade reste dessous : sans photo, la page tient.
   Voile dense : le titre glacier doit rester lisible sur n importe
   quelle photo, y compris une mer de nuages tres claire. */
.fe-page-hero .fe-hero-shot{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:1;
  filter:saturate(.42) contrast(1.05) brightness(.46);
}
.fe-veil--crete{
  background:linear-gradient(180deg,
    rgb(5 8 12/.78) 0%,
    rgb(11 32 51/.56) 48%,
    rgb(10 10 12/.92) 100%);
}
/* La photo remplace la crete : le calque de parallaxe n a plus d objet. */
.fe-page-hero .fe-ridge{display:none;}