/* ============================================================
   site.css — site public (index.php)
   Scène sombre, faisceaux de projecteurs, typographie aérée.
   ============================================================ */

:root{
  --ease:cubic-bezier(0.16,1,0.3,1);
  --gutter:clamp(20px,4vw,48px);
  --section:clamp(88px,11vw,152px);
  --radius:16px;
}

.wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--gutter);}
body{font-size:17px;line-height:1.6;}
.skip-link{position:absolute;left:16px;top:-64px;z-index:30;background:var(--accent);color:var(--accent-ink);padding:12px 18px;border-radius:999px;font-weight:600;text-decoration:none;}
.skip-link:focus-visible{top:12px;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

/* Navigation */
.site-nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;border-bottom:1px solid transparent;transition:background .35s ease,border-color .35s ease,box-shadow .35s ease;}
.site-nav.is-stuck{background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--line);box-shadow:0 20px 40px -30px rgba(0,0,0,.7);}
.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;padding-block:14px;gap:16px;}
.logo{display:flex;align-items:center;min-height:44px;transition:opacity .2s ease;}
.logo:hover{opacity:.8;}
.logo img{height:38px;width:auto;display:block;}
.navlinks{display:flex;align-items:center;gap:2px;font-size:15px;font-weight:500;}
.navlinks a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding-inline:16px;border-radius:999px;text-decoration:none;color:var(--muted);transition:color .2s ease,background .2s ease;}
.navlinks a:hover{color:var(--text);background:rgba(252,242,231,.06);}
.navlinks a[aria-current="page"]{color:var(--text);background:color-mix(in srgb,var(--accent) 16%,transparent);}
.navlinks .nav-cta{min-height:44px;margin-left:10px;padding-inline:20px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:600;}
.navlinks .nav-cta:hover{background:var(--text);color:var(--bg);}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.navlinks .nav-cta:hover{transform:translateY(-1px);}}

/* Sélecteur de langue (EN | FR) : la langue en cours est pleine, l'autre est un lien. */
.lang-switch{display:inline-flex;align-items:center;margin-left:12px;padding:3px;border-radius:999px;background:rgba(252,242,231,.06);font-size:13px;font-weight:600;letter-spacing:.06em;}
.lang-switch .is-current,.navlinks .lang-switch a{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:38px;padding-inline:8px;border-radius:999px;}
.lang-switch .is-current{background:var(--accent);color:var(--accent-ink);}
.navlinks .lang-switch a{color:var(--muted);}
.navlinks .lang-switch a:hover{color:var(--text);}

/* Accroche : un show de lumière */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100svh - 72px);display:flex;flex-direction:column;justify-content:flex-end;}
.stage{position:absolute;inset:0;z-index:-1;pointer-events:none;}
.stage::before{content:"";position:absolute;inset:auto 0 0;height:55%;background:radial-gradient(70% 100% at 72% 100%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);}
.stage::after{content:"";position:absolute;inset:auto 0 0;height:22%;background:linear-gradient(180deg,transparent,var(--bg));}

.hero-inner{position:relative;z-index:2;pointer-events:none;width:100%;padding-block:clamp(72px,14vh,160px) clamp(40px,7vh,72px);}
.hero h1{font-size:clamp(46px,9.4vw,96px);line-height:1.02;letter-spacing:0.005em;text-transform:uppercase;}
.hero .line{display:block;}
.hero-inner > *{pointer-events:auto;}
.hero h1{width:fit-content;max-width:100%;}
@media (min-width:961px){.hero-inner .lede,.hero-inner .cta-row{max-width:min(46%,520px);}.hero h1{font-size:clamp(38px,4.5vw,68px);}}
@media (max-width:960px){.hero-inner{order:1;padding-bottom:0;}.hero-meta{order:3;}}
.lede{margin:28px 0 0;font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:46ch;}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px;}
.btn{min-height:48px;padding-inline:26px;}
.btn .ico{margin-right:-6px;}
.hero-meta{width:100%;border-top:1px solid var(--line);padding-block:18px;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);}

@keyframes rise{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
.hero .line,.hero .lede,.hero .cta-row,.hero-meta{animation:rise .95s var(--ease) both;}
.hero .line:nth-child(2){animation-delay:.09s;}
.hero .lede{animation-delay:.22s;}
.hero .cta-row{animation-delay:.34s;}
.hero-meta{animation-delay:.5s;}


/* Bandeau « Ils nous font confiance » */
.clients-band{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,32px);align-items:center;}
.client-logo{display:flex;align-items:center;justify-content:center;height:64px;filter:grayscale(1) brightness(1.6) contrast(.8);opacity:.75;transition:opacity .3s ease,filter .3s ease;}
.client-logo img{max-width:100%;max-height:100%;}
.client-logo--placeholder{width:100%;border:1px dashed rgba(252,242,231,.35);border-radius:8px;opacity:.6;}
@media (hover:hover){a.client-logo:hover{opacity:1;filter:none;}}
@media (max-width:860px){.clients-band{grid-template-columns:repeat(3,1fr);}}
@media (max-width:520px){.clients-band{grid-template-columns:repeat(2,1fr);}}

/* Nos activités */
.activities-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,20px);}
.activity-tile{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:clamp(20px,2.6vw,28px);border:1px solid var(--line);border-radius:var(--radius);color:var(--text);text-decoration:none;font-size:clamp(17px,1.6vw,19px);font-weight:500;transition:background .2s ease,border-color .2s ease;}
.activity-tile:hover{background:var(--text);color:var(--bg);border-color:var(--text);}
@media (max-width:860px){.activities-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.activities-grid{grid-template-columns:1fr;}}

/* Sections */
section{padding-block:var(--section);}
.sr-only + #work,#work:has(.wrap > .sr-only:first-child){padding-top:clamp(24px,4vw,48px);}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;margin-bottom:clamp(40px,6vw,72px);}
.sec-head h1,.sec-head h2{font-size:clamp(34px,4.8vw,58px);line-height:1.05;}
.sec-sub{margin:0;color:var(--muted);font-size:17px;}
.sec-more{margin:clamp(28px,4vw,44px) 0 0;}

/* Prestations : lignes typographiques */
.setting{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:16px clamp(24px,4vw,64px);align-items:baseline;padding-block:clamp(28px,4vw,44px);}
.setting::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--line);transform-origin:left;transition:background .3s ease,transform 1.1s var(--ease);}
.setting:last-child{border-bottom:1px solid var(--line);}
.setting :is(h2,h3){font-family:var(--font);font-weight:600;font-size:clamp(24px,2.5vw,33px);line-height:1.15;}
.setting p{margin:0;color:var(--muted);font-size:16px;max-width:46ch;}
.setting .tag{justify-self:end;text-align:right;font-size:13px;letter-spacing:0.08em;color:var(--accent);}
@media (hover:hover){.setting:hover::before{background:var(--accent);}}

/* Process */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,48px);}
.step{position:relative;display:flex;flex-direction:column;gap:10px;padding-top:28px;}
.step::before,.step::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line);}
.step::after{display:none;top:-0.5px;height:2px;background:var(--accent);transform-origin:left;transform:scaleX(0);transition:transform 1s var(--ease);}
.step{transition:opacity .7s var(--ease);}
.step-3d{position:relative;aspect-ratio:5/4;margin:0 0 6px;border-radius:14px;background:radial-gradient(ellipse at 50% 62%,rgba(123,145,196,.16),rgba(123,145,196,0) 68%);}
.step-3d canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .9s var(--ease);}
.step-3d.is-ready canvas{opacity:1;}
.step .n{font-family:var(--font);font-weight:600;font-size:40px;line-height:1;color:var(--accent);}
.step h3{font-family:var(--font);font-weight:600;font-size:22px;}
.step p{margin:0;color:var(--muted);font-size:16px;}

/* Réalisations : grille éditoriale */
.grid-plates{--h:clamp(280px,36vw,540px);display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(40px,4.5vw,64px) clamp(18px,2.4vw,32px);}
.plate{position:relative;grid-column:span 6;display:flex;flex-direction:column;gap:20px;text-decoration:none;color:inherit;}
.plate[hidden]{display:none;}
.plate:nth-child(4n+1),.plate:nth-child(4n+4){grid-column:span 8;}
.plate:nth-child(4n+2),.plate:nth-child(4n+3){grid-column:span 4;}
.plate:last-child:nth-child(4n+1),.plate:last-child:nth-child(4n+3){grid-column:1 / -1;}
/* Cadre façon écran de la console : liseré noir brillant, léger reflet de vitre, lueur de la couleur de la photo au survol. */
.frame{position:relative;height:var(--h);border-radius:var(--radius);overflow:hidden;background:#05060a;border:7px solid #0b0c10;box-shadow:0 0 0 1px rgba(255,255,255,0.09),0 26px 50px -26px rgba(0,0,0,0.85);transition:box-shadow .6s ease;}
.frame::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(115deg,rgba(255,255,255,0.07) 0%,transparent 36%);pointer-events:none;}
.frame-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 8%;display:block;transition:transform 1.3s var(--ease);}
.frame--color{background:linear-gradient(135deg, color-mix(in srgb, var(--frame-color) 35%, #140f08), var(--frame-color));}
.plate-body{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;}
.plate-text{display:flex;flex-direction:column;gap:2px;}
.plate-body :is(h2,h3){font-family:var(--font);font-weight:600;font-size:clamp(19px,1.6vw,23px);line-height:1.2;}
.plate-body .exif{font-size:15px;color:var(--muted);}
.plate-cta{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-block:-8px;font-size:15px;font-weight:600;color:var(--muted);text-decoration:none;transition:color .2s ease;}
.plate-cta .ico{transition:transform .35s var(--ease);}
@media (hover:hover){
  /* Laisser la photo porter : la légende/titre passe en overlay au survol/focus plutôt qu'affichée en
     permanence sous chaque carte (voir docs/CODEMAPS/public.md, "Cartes portfolio — légende en overlay"). */
  .plate-body{position:absolute;inset:auto 7px 7px 7px;padding:64px 34px 46px;border-radius:0 0 calc(var(--radius) - 7px) calc(var(--radius) - 7px);background:linear-gradient(180deg,transparent,rgba(5,6,10,0.88) 70%);opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .3s var(--ease);}
  .plate:hover .plate-body,.plate:focus .plate-body,.plate:focus-within .plate-body{opacity:1;transform:none;}
  .plate:hover .frame-media{transform:scale(1.045);}
  .plate:hover .frame{box-shadow:0 0 0 1px rgba(255,255,255,0.14),0 44px 110px -30px color-mix(in srgb,var(--glow,#7b91c4) 70%,transparent);}
  .plate:hover .plate-cta,.plate-cta:hover{color:var(--accent);}
  .plate:hover .plate-cta .ico,.plate-cta:hover .ico{transform:translate(2px,-2px);}
}

/* Vidéos (lecture au survol) */
.frame.video-frame{background:#000;}
.frame.video-frame video{width:100%;height:100%;object-fit:cover;display:block;}
.play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,0.55);display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity .2s ease;}
.play-icon::before{content:"";margin-left:4px;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;}
.video-frame.is-playing .play-icon{opacity:0;}

/* À propos */
.about{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,7vw,112px);align-items:start;}
.about-title{font-size:clamp(32px,4.2vw,54px);line-height:1.08;}
.about-body p{margin:0;font-size:clamp(18px,1.7vw,21px);color:var(--muted);max-width:58ch;}
.values{display:flex;flex-wrap:wrap;gap:10px;margin:36px 0 0;padding:0;list-style:none;}
.pill{border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:15px;color:var(--muted);}

/* Contact */
#contact{position:relative;overflow:hidden;}
#contact::before{content:"";position:absolute;inset:auto -10% -20% -10%;height:90%;background:radial-gradient(55% 65% at 50% 100%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 75%);pointer-events:none;}
.contact-inner{position:relative;display:grid;grid-template-columns:7fr 5fr;gap:clamp(40px,7vw,112px);align-items:start;}
.contact-main :is(h1,h2){font-size:clamp(42px,7vw,92px);line-height:1.02;}
.contact-lede{margin:22px 0 0;color:var(--muted);font-size:19px;max-width:40ch;}
.contact-mail{display:inline-flex;align-items:center;gap:14px;margin-top:44px;padding:18px 30px;border:1.5px solid var(--accent);border-radius:999px;background:color-mix(in srgb,var(--accent) 10%,transparent);font-family:var(--font);font-weight:600;font-size:clamp(18px,2.3vw,28px);text-decoration:none;overflow-wrap:anywhere;transition:color .25s ease,background .25s ease,box-shadow .35s ease;}
.contact-mail .ico{flex:none;width:1em;height:1em;transition:transform .35s var(--ease);}
@media (hover:hover){.contact-mail:hover{background:var(--accent);color:var(--accent-ink);box-shadow:0 18px 60px -14px color-mix(in srgb,var(--accent) 80%,transparent);}.contact-mail:hover .ico{transform:translate(3px,-3px);}}
.contact-form{margin-top:44px;display:flex;flex-direction:column;gap:14px;max-width:520px;}
.contact-form-row{display:flex;gap:14px;flex-wrap:wrap;}
.contact-form input,.contact-form textarea{flex:1;min-width:180px;padding:14px 18px;border:1.5px solid var(--line);border-radius:var(--radius);background:transparent;color:inherit;font:inherit;resize:vertical;}
.contact-form input:focus-visible,.contact-form textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.contact-form button{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border:1.5px solid var(--accent);border-radius:999px;background:color-mix(in srgb,var(--accent) 10%,transparent);color:inherit;font-family:var(--font);font-weight:600;font-size:clamp(16px,2vw,22px);cursor:pointer;transition:color .25s ease,background .25s ease,box-shadow .35s ease;}
.contact-form button .ico{width:1em;height:1em;transition:transform .35s var(--ease);}
@media (hover:hover){.contact-form button:hover{background:var(--accent);color:var(--accent-ink);box-shadow:0 18px 60px -14px color-mix(in srgb,var(--accent) 80%,transparent);}.contact-form button:hover .ico{transform:translate(3px,-3px);}}
.contact-hp{position:absolute;left:-5000px;}
.contact-list{margin:0;padding:6px 28px;border:1px solid rgba(255,255,255,0.07);border-radius:var(--radius);background:linear-gradient(180deg,#1c1d23,#121318);box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 34px 70px -34px rgba(0,0,0,0.8);}
.contact-list div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-block:18px;border-bottom:1px solid var(--line);}
.contact-list div:last-child{border-bottom:0;}
.contact-list dt{font-size:13px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);}
.contact-list dd{margin:0;text-align:right;font-size:16px;}
.contact-list a{display:inline-block;padding-block:12px;margin-block:-12px;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:4px;}

.newsletter-form{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--line);}
.newsletter-form strong{display:block;font-size:16px;}
.newsletter-form span{display:block;font-size:13px;color:var(--muted);}
.newsletter-field{display:flex;gap:10px;flex-wrap:wrap;}
.newsletter-field input[type=email]{padding:10px 16px;border:1.5px solid var(--line);border-radius:999px;background:transparent;color:inherit;font:inherit;min-width:220px;}
.newsletter-field input[type=email]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.newsletter-field button{padding:10px 22px;border:1.5px solid var(--accent);border-radius:999px;background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:600;cursor:pointer;}

footer{border-top:1px solid var(--line);padding-block:28px;}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:14px;color:var(--muted);}
.footer-logo{display:flex;align-items:center;gap:10px;}
.footer-logo img{height:16px;width:auto;display:block;opacity:0.85;}
.foot-tags{font-size:13px;letter-spacing:0.08em;text-transform:uppercase;text-wrap:balance;}
.foot-legal{color:var(--muted);text-decoration:underline;text-decoration-color:transparent;transition:text-decoration-color .15s;}
.foot-legal:hover,.foot-legal:focus-visible{text-decoration-color:var(--accent);}

.cta-band-inner{text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;}
.cta-band-inner h2{font-size:clamp(28px,4vw,44px);line-height:1.1;max-width:20ch;}
.cta-band-inner p{color:var(--muted);max-width:52ch;font-size:17px;margin:0;}
.cta-band-inner .btn{margin-top:6px;}

/* Mentions légales */
.legal-page{padding:140px 0 80px;}
.legal-page .wrap{max-width:760px;}
.legal-page h1{font-size:clamp(32px,5vw,52px);line-height:1.05;margin:28px 0 0;}
.legal-page .legal-updated{color:var(--muted);font-size:14px;margin:10px 0 40px;}
.legal-page h2{font-family:var(--font);font-weight:600;font-size:22px;margin:40px 0 12px;}
.legal-page p{color:var(--muted);font-size:16px;line-height:1.6;max-width:70ch;}
.legal-page p strong{color:var(--text);}
.legal-page a{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;}
.legal-page .legal-en{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;}
.legal-page .back{margin-top:48px;}

/* Apparitions au scroll (le contenu reste visible sans JavaScript) */
.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease) var(--dl,0ms),transform .8s var(--ease) var(--dl,0ms);}
.js [data-reveal].is-in{opacity:1;transform:none;}
.js .setting[data-reveal]::before{transform:scaleX(0);}
.js .setting[data-reveal]::before{transition-delay:0s,var(--dl,0ms);}
.js .setting[data-reveal].is-in::before{transform:scaleX(1);}
.js .plate[data-reveal]{opacity:1;transform:none;}
.js .plate[data-reveal] .frame{clip-path:inset(0 0 100% 0 round var(--radius));transition:clip-path 1.1s var(--ease) var(--dl,0ms);}
.js .plate[data-reveal].is-in .frame{clip-path:inset(0 0 0 0 round var(--radius));}
/* Sur souris fine, l'apparition de la légende est gérée par la règle survol/focus plus haut
   (voir @media (hover:hover)) — cette apparition au scroll ne vaut que pour le tactile, où
   la légende reste visible en permanence (pas de survol pour la découvrir). */
@media (hover:none){
  .js .plate[data-reveal] .plate-body{opacity:0;transition:opacity .8s ease calc(var(--dl,0ms) + .3s);}
  .js .plate[data-reveal].is-in .plate-body{opacity:1;}
}

/* Matière commune : mêmes gris que la console, sections alternées, filet de lumière entre les sections */
@property --ambient{syntax:'<color>';inherits:true;initial-value:transparent;}
section{position:relative;}
#audiences,#about{background:linear-gradient(180deg,#101116,#0c0d12);box-shadow:inset 0 1px 0 rgba(255,255,255,0.05),inset 0 -1px 0 rgba(255,255,255,0.04);}
section + section::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(900px,80%);height:110px;pointer-events:none;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 65%,transparent),transparent) top / 100% 1px no-repeat,radial-gradient(50% 100% at 50% 0,color-mix(in srgb,var(--accent) 13%,transparent),transparent) top / 100% 100% no-repeat;}
#work{isolation:isolate;overflow-x:clip;--ambient:transparent;transition:--ambient .9s ease;}
#work::before{content:"";position:absolute;inset:0 -5%;z-index:-1;pointer-events:none;background:radial-gradient(60% 46% at 50% 45%,color-mix(in srgb,var(--ambient) 32%,transparent),transparent 72%);opacity:0;transition:opacity .9s ease;}
#work.has-ambient::before{opacity:1;}

/* Page introuvable (404.html) */
.notfound{min-height:100svh;display:flex;align-items:center;}
.notfound .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:20px;}
.notfound h1{font-size:clamp(34px,6vw,64px);line-height:1.05;margin-top:28px;}
.notfound p{margin:0;max-width:46ch;color:var(--muted);font-size:18px;}
.notfound .btn{margin-top:8px;}

/* Festivals et clubs, questions fréquentes */
.audiences{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);}
.audience{position:relative;padding-top:30px;}
.audience::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--line);}
.audience h3{font-family:var(--font);font-weight:600;font-size:clamp(26px,3vw,38px);line-height:1.1;}
.audience p{margin:18px 0 0;max-width:54ch;color:var(--muted);font-size:clamp(17px,1.5vw,19px);}
.faq{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,7vw,112px);align-items:start;}
.faq h2{font-size:clamp(32px,4.2vw,54px);line-height:1.08;position:sticky;top:120px;}
.faq-item{padding-block:28px;border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-item h3{font-family:var(--font);font-weight:600;font-size:clamp(20px,2vw,25px);line-height:1.25;}
.faq-item p{margin:12px 0 0;max-width:62ch;color:var(--muted);font-size:17px;}
.faq-item a{display:inline-block;padding-block:12px;margin-block:-12px;color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:4px;}
.faq-group{margin-top:clamp(32px,5vw,56px);}
.faq-group h2{font-size:clamp(20px,2.2vw,26px);}

/* Filtres (page Réalisations) */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(28px,4vw,44px);}
.filter-chip{border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:15px;color:var(--muted);background:none;cursor:pointer;transition:color .2s ease,background .2s ease,border-color .2s ease;}
.filter-chip:hover{color:var(--text);}
.filter-chip[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text);}

/* Page vide honnête (Recrutement tant qu'il n'y a pas d'offre) */
.empty-state{max-width:62ch;color:var(--muted);font-size:17px;}
.empty-state .btn{margin-top:20px;}

.job-list{display:grid;gap:clamp(20px,3vw,32px);}
.job-item{padding:clamp(24px,3vw,32px);border:1px solid var(--line);border-radius:var(--radius);}
.job-item h3{font-size:clamp(20px,2vw,25px);}
.job-item p{margin:12px 0 20px;max-width:62ch;color:var(--muted);}

/* Galerie (grille photo + lightbox CSS pure, sans JS) */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.gallery-thumb{display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease);}
@media (hover:hover){.gallery-thumb:hover img{transform:scale(1.05);}}
@media (max-width:860px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.gallery-grid{grid-template-columns:1fr;}}
.lightbox{display:none;position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;padding:5vh 5vw;background:rgba(5,6,10,0.92);}
.lightbox:target{display:flex;}
.lightbox img{max-width:100%;max-height:100%;border-radius:calc(var(--radius) - 4px);}
.lightbox-close{position:absolute;inset:0;}
.lightbox-close::after{content:"";position:absolute;top:24px;right:24px;width:44px;height:44px;border:1px solid rgba(255,255,255,0.4);border-radius:999px;background:linear-gradient(45deg,transparent 46%,currentColor 46%,currentColor 54%,transparent 54%),linear-gradient(-45deg,transparent 46%,currentColor 46%,currentColor 54%,transparent 54%);color:#fff;}

/* Instagram (bande de vignettes qui renvoient sur Instagram) */
.ig-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.ig-thumb{display:block;border-radius:calc(var(--radius) - 8px);overflow:hidden;aspect-ratio:1/1;}
.ig-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease);}
@media (hover:hover){.ig-thumb:hover img{transform:scale(1.05);}}
@media (max-width:860px){.ig-strip{grid-template-columns:repeat(3,1fr);}}
@media (max-width:520px){.ig-strip{grid-template-columns:repeat(2,1fr);}}

/* ---- Finitions : cartes étroites, reflet de vitre, icônes animées, timeline, grain ---- */
.plate:nth-child(4n+2) .plate-body,.plate:nth-child(4n+3) .plate-body{flex-direction:column;gap:4px;}
.plate:nth-child(4n+2) .plate-cta,.plate:nth-child(4n+3) .plate-cta{margin-block:-6px 0;}

.frame::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,0.16) 50%,transparent 62%);transform:translateX(-130%);}
@media (hover:hover){.plate:hover .frame::before{transform:translateX(130%);transition:transform 1.1s var(--ease);}}

.setting-head{display:flex;align-items:center;gap:20px;}
.setting-icon{flex:none;width:64px;height:64px;display:grid;place-items:center;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#15161c,#0e0f14);color:var(--accent);transition:border-color .3s ease,box-shadow .4s ease,color .3s ease;}
.setting-icon svg{width:44px;height:44px;}
@media (hover:hover){.setting:hover .setting-icon{border-color:var(--accent);color:var(--text);box-shadow:0 0 28px -6px color-mix(in srgb,var(--accent) 70%,transparent);}}

.audience-art{position:relative;aspect-ratio:16/9;margin:0 0 22px;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#04050b,#0b1024);border:1px solid var(--line);}
.audience-art[data-scene="club"]{background:linear-gradient(180deg,#040407,#150c22);}
.audience-art canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .9s var(--ease);}
.audience-art.is-ready canvas{opacity:1;}

/* Timeline du process : une ligne de lumière suit le défilement et allume chaque étape */
.process{position:relative;}
.playhead{display:none;}
.process.has-timeline .step:not(.is-lit){opacity:.4;}
.process.has-timeline .step.is-lit .n{text-shadow:0 0 26px color-mix(in srgb,var(--accent) 80%,transparent);}
.process.has-timeline .step::after{display:block;}
.process.has-timeline .step.is-lit::after{transform:scaleX(1);}
@media (min-width:901px){
  .process.has-timeline .step::after{display:none;}
  .process.has-timeline .playhead{display:block;position:absolute;top:-1px;left:0;height:2px;width:calc(var(--p,0) * 100%);background:var(--accent);box-shadow:0 0 14px 2px color-mix(in srgb,var(--accent) 65%,transparent);z-index:2;pointer-events:none;}
  .playhead::after{content:"";position:absolute;right:-6px;top:-5px;width:12px;height:12px;border-radius:50%;background:#fcf2e7;box-shadow:0 0 20px 7px color-mix(in srgb,var(--accent) 75%,transparent);}
}

/* Grain de texture sur toute la page, très léger */
body::after{content:"";position:fixed;inset:0;z-index:40;pointer-events:none;background:url(../img/textures/grain.png);opacity:0.035;}
@media (prefers-reduced-motion: reduce){.process.has-timeline .step:not(.is-lit){opacity:1;}}

/* Responsive : en fin de fichier pour l'emporter sur les règles de base ci-dessus */
@media (max-width: 900px){
  .setting{grid-template-columns:1fr;gap:10px;}
  .setting .tag{justify-self:start;text-align:left;margin-top:6px;}
  .process{grid-template-columns:1fr 1fr;row-gap:40px;}
  .about,.contact-inner,.faq,.audiences{grid-template-columns:1fr;}
  .faq h2{position:static;}
  .plate,.plate:nth-child(n){grid-column:1 / -1;}
  .frame{height:auto;aspect-ratio:4 / 3;}
  .plate:nth-child(n) .plate-body{flex-direction:row;gap:16px;}
  .plate:nth-child(n) .plate-cta{margin-block:-8px;}
  .setting-head{gap:16px;}
}
@media (max-width: 560px){
  .site-nav .wrap{padding-block:10px;}
  .logo img{height:30px;}
  .navlinks{font-size:13px;gap:0;}
  .navlinks a{padding-inline:8px;}
  .hero h1{font-size:clamp(32px,10.2vw,44px);}
  .navlinks .nav-cta{margin-left:4px;}
  .lang-switch{margin-left:6px;}
  .lang-switch .is-current,.navlinks .lang-switch a{min-width:42px;padding-inline:6px;}
  .process{grid-template-columns:1fr;}
  .step-3d{aspect-ratio:16/10;}
  .contact-list dd{font-size:15px;}
}

@media (prefers-reduced-motion: reduce){
  .hero .line,.hero .lede,.hero .cta-row,.hero-meta{animation:none;}
  html{scroll-behavior:auto;}
  .frame-media,.plate-cta .ico,.contact-mail .ico,.btn,.plate-body{transition:none;}
}
/* Menu déroulant : le nav principal compte 7 entrées, trop pour tenir sur écran moyen (voir render_nav()). */
.menu-toggle,.menu-panel{display:none;}
@media (max-width: 980px){
  .navlinks > a:not(.nav-cta){display:none;}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:6px;padding:0;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);cursor:pointer;}
  .menu-toggle .menu-close,.menu-toggle[aria-expanded="true"] .menu-open{display:none;}
  .menu-toggle[aria-expanded="true"] .menu-close{display:inline;}
  .site-nav.menu-open{background:var(--bg);border-bottom-color:var(--line);}
  .menu-panel{position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -20px rgba(0,0,0,.7);}
  .menu-panel:not([hidden]){display:block;}
  .menu-panel .wrap{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding-block:6px 14px;}
  .menu-panel a{display:flex;align-items:center;min-height:52px;padding-inline:4px;font-size:18px;font-weight:500;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line);}
  .menu-panel a:last-child{border-bottom:0;}
}
@media (max-width: 360px){
  .navlinks .nav-cta{display:none;} /* « Contact » est dans la liste du menu */
}
.step-3d{-webkit-tap-highlight-color:transparent;}

/* ============================================================
   Micrographics — repères géométriques décoratifs (accueil d'abord)
   Motifs SVG en masque : la couleur vient des variables de la palette, jamais du SVG.
   Tout est décor : pseudo-éléments, pointer-events:none, rien dans le HTML.
   ============================================================ */
:root{
  --mk-node:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='6.5'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%23000' stroke='none'/%3E%3Cpath d='M1 12h4M19 12h4M12 1v4M12 19v4'/%3E%3C/svg%3E");
  --mk-arcs:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M200 130A70 70 0 0 0 130 200M200 90A110 110 0 0 0 90 200M200 50A150 150 0 0 0 50 200M200 10A190 190 0 0 0 10 200'/%3E%3Cpath d='M200 200L128 128M62 30v10M57 35h10M24 92v10M19 97h10' stroke-width='1'/%3E%3Ccircle cx='130' cy='200' r='2.6' fill='%23000' stroke='none'/%3E%3Ccircle cx='200' cy='90' r='2.6' fill='%23000' stroke='none'/%3E%3Ccircle cx='128' cy='128' r='4'/%3E%3C/svg%3E");
  --mk-dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 36' fill='%23000'%3E%3Ccircle cx='6' cy='6' r='1.5'/%3E%3Ccircle cx='6' cy='18' r='1.5'/%3E%3Ccircle cx='6' cy='30' r='1.5'/%3E%3Ccircle cx='18' cy='6' r='1.5'/%3E%3Ccircle cx='18' cy='18' r='1.5'/%3E%3Ccircle cx='18' cy='30' r='1.5'/%3E%3Ccircle cx='30' cy='6' r='1.5'/%3E%3Ccircle cx='30' cy='18' r='1.5'/%3E%3Ccircle cx='30' cy='30' r='1.5'/%3E%3Ccircle cx='42' cy='6' r='1.5'/%3E%3Ccircle cx='42' cy='18' r='1.5'/%3E%3Ccircle cx='42' cy='30' r='1.5'/%3E%3Ccircle cx='54' cy='6' r='1.5'/%3E%3Ccircle cx='54' cy='18' r='1.5'/%3E%3Ccircle cx='54' cy='30' r='1.5'/%3E%3Ccircle cx='66' cy='6' r='1.5'/%3E%3Ccircle cx='66' cy='18' r='1.5'/%3E%3Ccircle cx='66' cy='30' r='1.5'/%3E%3Ccircle cx='42' cy='18' r='5' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
}

/* Titres de section : petit repère devant le titre (sans surtitre textuel) */
#clients .sec-head h2::before,#activities .sec-head h2::before,#faq-preview .sec-head h2::before{content:"";display:inline-block;width:.46em;height:.46em;margin-right:.4em;vertical-align:.04em;background:var(--accent);-webkit-mask:var(--mk-node) center/contain no-repeat;mask:var(--mk-node) center/contain no-repeat;}
#activities .sec-head h2::before{-webkit-mask-image:var(--mk-cross);mask-image:var(--mk-cross);}
#activities .sec-head::after{content:"";width:72px;height:36px;background:var(--accent);opacity:.55;-webkit-mask:var(--mk-dots) center/contain no-repeat;mask:var(--mk-dots) center/contain no-repeat;}

/* Réalisations : repères de cadrage en haut du cadre + numéro de projet (data-idx) */
.plate::before,.plate::after{content:"";position:absolute;z-index:3;pointer-events:none;color:color-mix(in srgb,var(--text) 92%,transparent);transition:opacity .6s var(--ease) var(--dl,0ms);}
.plate::after{inset:19px 19px auto;height:15px;background:linear-gradient(currentColor,currentColor) 0 0/15px 1px no-repeat,linear-gradient(currentColor,currentColor) 0 0/1px 15px no-repeat,linear-gradient(currentColor,currentColor) 100% 0/15px 1px no-repeat,linear-gradient(currentColor,currentColor) 100% 0/1px 15px no-repeat;}
.plate::before{content:attr(data-idx);content:attr(data-idx) / "";top:19px;left:42px;font-size:11px;font-weight:600;line-height:15px;letter-spacing:.18em;text-shadow:0 0 6px rgba(5,6,10,.7);}
.plate[data-idx=""]::before{content:none;}
.js .plate[data-reveal]:not(.is-in)::before,.js .plate[data-reveal]:not(.is-in)::after{opacity:0;}

/* Bandeau d'appel final : arcs en angle, signature de la page */
.cta-band{overflow:hidden;}
.cta-band::before{content:"";position:absolute;right:0;bottom:0;width:clamp(150px,24vw,320px);aspect-ratio:1;pointer-events:none;background:var(--accent);opacity:.32;-webkit-mask:var(--mk-arcs) right bottom/contain no-repeat;mask:var(--mk-arcs) right bottom/contain no-repeat;}

/* Pied de page : graduation fine sous le filet, estompée sur les bords */
footer{position:relative;}
footer::before{content:"";position:absolute;inset:0 0 auto;height:6px;pointer-events:none;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 24px);-webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);}
@media (prefers-reduced-motion:reduce){.plate::before,.plate::after{transition:none;}}

/* Micrographics, densité (2e passe) : mêmes tailles et teintes, plus de variété. Classes .mk* = réutilisables (Prestations, À propos). */
:root{--mk-cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M12 3v18M3 12h18'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3C/svg%3E");--mk-quarter:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M3 37A34 34 0 0 1 37 3M3 37A22 22 0 0 1 25 15M3 37A10 10 0 0 1 13 27'/%3E%3Ccircle cx='3' cy='37' r='2' fill='%23000' stroke='none'/%3E%3Cpath d='M37 3v6M37 3h-6'/%3E%3C/svg%3E");--mk-ruler:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 12' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M0 11h72'/%3E%3Cpath d='M1 11v-8'/%3E%3Cpath d='M7 11v-4'/%3E%3Cpath d='M13 11v-4'/%3E%3Cpath d='M19 11v-4'/%3E%3Cpath d='M25 11v-8'/%3E%3Cpath d='M31 11v-4'/%3E%3Cpath d='M37 11v-4'/%3E%3Cpath d='M43 11v-4'/%3E%3Cpath d='M49 11v-8'/%3E%3Cpath d='M55 11v-4'/%3E%3Cpath d='M61 11v-4'/%3E%3Cpath d='M67 11v-4'/%3E%3C/svg%3E");--mk-crosses:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M6 2v8M2 6h8'/%3E%3Cpath d='M30 2v8M26 6h8'/%3E%3Cpath d='M54 2v8M50 6h8'/%3E%3Ccircle cx='30' cy='6' r='2'/%3E%3C/svg%3E");}
.mk{display:block;flex:none;width:var(--mk-w,72px);height:var(--mk-h,36px);background:var(--accent);opacity:.5;pointer-events:none;-webkit-mask:var(--mk-img) center/contain no-repeat;mask:var(--mk-img) center/contain no-repeat;}
.mk--node{--mk-img:var(--mk-node);--mk-w:18px;--mk-h:18px;}.mk--arcs{--mk-img:var(--mk-arcs);--mk-w:160px;--mk-h:160px;}.mk--dots{--mk-img:var(--mk-dots);}.mk--cross{--mk-img:var(--mk-cross);--mk-w:14px;--mk-h:14px;}.mk--quarter{--mk-img:var(--mk-quarter);--mk-w:40px;--mk-h:40px;}.mk--ruler{--mk-img:var(--mk-ruler);--mk-h:12px;}
#clients .sec-head::after{content:"";flex:none;width:36px;height:24px;background:var(--accent);opacity:.5;-webkit-mask:var(--sy-grid-a) 0 0/100% 100% no-repeat;mask:var(--sy-grid-a) 0 0/100% 100% no-repeat;}
#faq-preview .sec-head::after{content:"";flex:none;width:72px;height:12px;background:var(--accent);opacity:.5;-webkit-mask:var(--mk-ruler) center/contain no-repeat;mask:var(--mk-ruler) center/contain no-repeat;}
/* Repère d'enregistrement au centre de chaque séparateur de section */
#about-teaser::before,#clients::before,#activities::before,#galerie-preview::before,#faq-preview::before{content:"";position:absolute;top:-18px;left:max(0px,calc(50% - 620px));width:min(100%,1240px);height:36px;pointer-events:none;background:var(--accent);opacity:.55;--mk-reg-base:var(--mk-cross) var(--gutter) 50%/14px 14px no-repeat,var(--mk-node) 50% 50%/14px 14px no-repeat,var(--mk-cross) calc(100% - var(--gutter)) 50%/14px 14px no-repeat;--mk-reg:var(--mk-reg-base);-webkit-mask:var(--mk-reg);mask:var(--mk-reg);}
/* Activités : numéro discret dans l'angle de chaque tuile */
.activities-grid{counter-reset:act;}
.activity-tile{position:relative;}
.activity-tile::before{counter-increment:act;content:"A" counter(act,decimal-leading-zero);content:"A" counter(act,decimal-leading-zero) / "";position:absolute;top:9px;left:14px;font-size:10px;font-weight:600;letter-spacing:.18em;color:var(--muted);opacity:.7;pointer-events:none;}
.activity-tile:hover::before{color:inherit;}

/* Ligne de construction après les boutons « voir plus » de l'accueil : filet fin, graduations sur les réalisations */
#work .sec-more,#about-teaser .sec-more,#galerie-preview .sec-more{display:flex;align-items:center;gap:20px;}
#work .sec-more::after,#about-teaser .sec-more::after,#galerie-preview .sec-more::after{content:"";flex:1;height:7px;background:linear-gradient(var(--line),var(--line)) 0 50%/100% 1px no-repeat;-webkit-mask:linear-gradient(90deg,#000,transparent);mask:linear-gradient(90deg,#000,transparent);}
#work .sec-more::after{background:linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat,repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 24px) 0 0/100% 6px no-repeat;}
@media (max-width:520px){
  /* Téléphone : l'index passe dans la ligne de la tuile, et les motifs d'angle de titre (qui retomberaient sous le titre) sont masqués */
  .activity-tile::before{position:static;flex:none;width:3em;}
  .activity-tile span{flex:1;}
  #clients .sec-head::after,#activities .sec-head::after,#faq-preview .sec-head::after{display:none;}
}

/* ============================================================
   Micrographics, 4e passe : densité (accueil uniquement)
   Mêmes tailles, mêmes traits (1 px) et mêmes teintes ; on ajoute des détails, pas des formes plus grandes.
   Tout est décor (pseudo-éléments, pointer-events:none) ; le texte généré a une valeur alternative vide.
   ============================================================ */

/* Après le titre : ligne interrompue (clients), annotation de plage (activités) */
#activities .sec-head h2::after{content:"A01–07";content:"A01–07" / "";margin-left:.7em;vertical-align:.95em;font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--muted);opacity:.7;}

/* Réalisations : croix de centrage en haut des grands cadres, et règles de repérage dans les marges (grands écrans) */
#work .grid-plates{position:relative;}
@media (min-width:1366px){
  #work .grid-plates::before{content:"";position:absolute;top:0;bottom:0;pointer-events:none;opacity:.5;-webkit-mask:linear-gradient(transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(transparent,#000 6%,#000 94%,transparent);}
  #work .grid-plates::before{left:-56px;width:10px;background:repeating-linear-gradient(180deg,var(--accent) 0 1px,transparent 1px 240px) 0 0/10px 100%,repeating-linear-gradient(180deg,var(--accent) 0 1px,transparent 1px 48px) 0 0/5px 100%;background-repeat:no-repeat;}
}

/* Présentation : matrice de points dans la marge libre sous le titre */
#about-teaser .about{position:relative;}
@media (min-width:981px){
  #about-teaser .about::before{content:"";position:absolute;left:0;bottom:24px;width:72px;height:36px;pointer-events:none;background:var(--accent);opacity:.4;-webkit-mask:var(--mk-dots) center/contain no-repeat;mask:var(--mk-dots) center/contain no-repeat;}
}

/* Activités : un symbole composé sur les tuiles impaires, toujours dans le coin haut-droit (grille commune) */
.activity-tile:nth-child(odd)::after{content:"";position:absolute;pointer-events:none;opacity:.45;}

/* Galerie : repère d'angle sur les vignettes, en haut à gauche puis en bas à droite en alternance */
.ig-thumb{position:relative;}
.ig-thumb::after{content:"";position:absolute;width:11px;height:11px;pointer-events:none;border:0 solid color-mix(in srgb,var(--text) 70%,transparent);}
.ig-thumb:nth-child(odd)::after{top:9px;left:9px;border-width:1px 0 0 1px;}
.ig-thumb:nth-child(even)::after{bottom:9px;right:9px;border-width:0 1px 1px 0;}

/* FAQ : index Q01… à droite de chaque question */
#faq-preview .faq-group{counter-reset:q;}
#faq-preview .faq-item{position:relative;}
#faq-preview .faq-item::before{counter-increment:q;content:"Q" counter(q,decimal-leading-zero);content:"Q" counter(q,decimal-leading-zero) / "";position:absolute;top:10px;right:0;pointer-events:none;font-size:10px;font-weight:600;letter-spacing:.18em;color:var(--muted);opacity:.7;}

/* Bandeau final et pied de page de l'accueil : pendants du côté gauche, repères aux bords du contenu */
@media (min-width:761px){
  #faq-preview ~ .cta-band .cta-band-inner{position:relative;}
  #faq-preview ~ .cta-band .cta-band-inner::before{content:"";position:absolute;left:0;bottom:0;width:72px;height:36px;pointer-events:none;background:var(--accent);opacity:.35;-webkit-mask:var(--mk-dots) center/contain no-repeat;mask:var(--mk-dots) center/contain no-repeat;}
}
main:has(#faq-preview) + footer::after{content:"";position:absolute;top:-7px;left:max(0px,calc(50% - 620px));width:min(100%,1240px);height:14px;pointer-events:none;background:var(--accent);opacity:.45;--mk-reg:var(--mk-cross) var(--gutter) 50%/14px 14px no-repeat,var(--mk-cross) calc(100% - var(--gutter)) 50%/14px 14px no-repeat;-webkit-mask:var(--mk-reg);mask:var(--mk-reg);}

/* ============================================================
   Micrographics, 5e passe : encore ~30 % de détails, accueil uniquement
   ============================================================ */

/* Séparateurs : même base (croix · nœud · croix), un complément différent selon la section */

/* Ils nous font confiance : angles de cadrage autour de la zone (les cases ne sont pas touchées) et courte graduation dessous */
#clients .clients-band{position:relative;}
#clients .clients-band::before{content:"";position:absolute;inset:-14px;pointer-events:none;opacity:.5;background:linear-gradient(var(--accent),var(--accent)) 0 0/12px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) 0 0/1px 12px no-repeat,linear-gradient(var(--accent),var(--accent)) 100% 0/12px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) 100% 0/1px 12px no-repeat,linear-gradient(var(--accent),var(--accent)) 0 100%/12px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) 0 100%/1px 12px no-repeat,linear-gradient(var(--accent),var(--accent)) 100% 100%/12px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) 100% 100%/1px 12px no-repeat;}


/* Galerie : graduation à gauche et croix à droite au-dessus de la bande de vignettes (le titre n'a plus de motif à sa droite) */
#galerie-preview .ig-strip{position:relative;}
#galerie-preview .ig-strip::after{content:"";position:absolute;top:-30px;right:0;width:36px;height:24px;pointer-events:none;opacity:.5;background:var(--accent);-webkit-mask:var(--sy-grid-a) 0 0/100% 100% no-repeat;mask:var(--sy-grid-a) 0 0/100% 100% no-repeat;}

/* FAQ : dans les marges (grands écrans), ligne de construction interrompue à gauche et graduation à droite */
@media (min-width:1366px){
  #faq-preview .faq-group{position:relative;}
  #faq-preview .faq-group::before,#faq-preview .faq-group::after{content:"";position:absolute;top:0;bottom:0;pointer-events:none;opacity:.45;-webkit-mask:linear-gradient(transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(transparent,#000 8%,#000 92%,transparent);}
  #faq-preview .faq-group::before{left:-48px;width:9px;background:repeating-linear-gradient(180deg,var(--accent) 0 6px,transparent 6px 14px) 4px 0/1px 100% no-repeat,linear-gradient(var(--accent),var(--accent)) 0 0/9px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) 0 100%/9px 1px no-repeat;}
  #faq-preview .faq-group::after{right:-48px;width:8px;background:repeating-linear-gradient(180deg,var(--accent) 0 1px,transparent 1px 20px) 0 0/8px 100% no-repeat,repeating-linear-gradient(180deg,var(--accent) 0 1px,transparent 1px 100px) 0 0/12px 100% no-repeat;}
}


/* ============================================================
   Alphabet géométrique modulaire (6e passe)
   Règles de construction communes à tous les symboles : trait 1,2 px (1 unité = 1 px rendu, jamais mis à l'échelle),
   point plein r 1,4, anneau r 3,2, module 6 px, arcs centrés sur un angle ou un nœud, formes ouvertes, 2 à 4 éléments par symbole.
   Familles : angles (corner, corner-arc, corner-dot + miroirs), axes (axis), arcs (semi, orbit), grilles (grid-a, grid-b, grid-s),
   règles et pas (scale, step), faisceaux (beam). Variantes « -s » = même dessin en plus court (tuiles, séparateurs de FAQ).
   Chaque symbole est un masque SVG : la couleur vient toujours de la palette (background), jamais du SVG.
   ============================================================ */
:root{
  --sy-corner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M.6 14.4V.6H14.4'/%3E%3C/svg%3E");
  --sy-corner-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M14.4 14.4V.6H.6'/%3E%3C/svg%3E");
  --sy-corner-arc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M.6 14.4V.6H14.4M.6 8.6A8 8 0 0 0 8.6 .6'/%3E%3Ccircle cx='6.3' cy='6.3' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --sy-corner-arc-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M14.4 14.4V.6H.6M14.4 8.6A8 8 0 0 1 6.4 .6'/%3E%3Ccircle cx='8.7' cy='6.3' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --sy-corner-dot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M.6 14.4V.6H14.4'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --sy-corner-dot-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M14.4 14.4V.6H.6'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --sy-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M4.5 0V9M0 4.5H9'/%3E%3C/svg%3E");
  --sy-axis:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 10' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M0 5H31' stroke-dasharray='5 3'/%3E%3Ccircle cx='36' cy='5' r='3.2'/%3E%3Ccircle cx='46' cy='5' r='1.4' fill='%23000' stroke='none'/%3E%3Cpath d='M50 5h6'/%3E%3C/svg%3E");
  --sy-axis-s:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 8' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M0 4H12' stroke-dasharray='4 3'/%3E%3Ccircle cx='17' cy='4' r='2.6'/%3E%3Ccircle cx='25' cy='4' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --sy-semi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M4 22A20 20 0 0 1 44 22M0 22.4H48M24 22V15'/%3E%3Ccircle cx='24' cy='2' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --sy-orbit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M18 6A12 12 0 1 1 6 18M18 15v6M15 18h6'/%3E%3Ccircle cx='18' cy='6' r='1.6' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --sy-grid-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Ccircle cx='6' cy='6' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='6' cy='18' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='18' cy='6' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='18' cy='18' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='30' cy='6' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='30' cy='18' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='18' cy='6' r='4'/%3E%3Cpath d='M6 6L18 18'/%3E%3C/svg%3E");
  --sy-grid-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M1 10V1H10M29 20V29H20M15 11v8M11 15h8'/%3E%3Ccircle cx='29' cy='1' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='1' cy='29' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --sy-grid-s:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Ccircle cx='3' cy='3' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='9' cy='3' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='15' cy='3' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='3' cy='8' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='9' cy='8' r='2.2'/%3E%3C/svg%3E");
  --sy-scale:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 10' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M0 9.4H46'/%3E%3Cpath d='M1 9.4v-8'/%3E%3Cpath d='M7 9.4v-4'/%3E%3Cpath d='M13 9.4v-4'/%3E%3Cpath d='M19 9.4v-4'/%3E%3Cpath d='M25 9.4v-8'/%3E%3Cpath d='M31 9.4v-4'/%3E%3Cpath d='M37 9.4v-4'/%3E%3Cpath d='M43 9.4v-4'/%3E%3Ccircle cx='54' cy='6' r='3.2'/%3E%3C/svg%3E");
  --sy-scale-s:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 8' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M0 7.4H28'/%3E%3Cpath d='M1 7.4v-6'/%3E%3Cpath d='M7 7.4v-3'/%3E%3Cpath d='M13 7.4v-3'/%3E%3Cpath d='M19 7.4v-3'/%3E%3Cpath d='M25 7.4v-6'/%3E%3C/svg%3E");
  --sy-step:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M1 23H10V13H22V3H35'/%3E%3Ccircle cx='10' cy='13' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='22' cy='3' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --sy-step-s:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M1 11H8V6H15V1H23'/%3E%3Ccircle cx='8' cy='6' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --sy-beam:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 24' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Ccircle cx='5' cy='12' r='3.2'/%3E%3Cpath d='M8 11L55 2M8 13L55 22M30 6.8A14 14 0 0 1 30 17.2'/%3E%3Ccircle cx='55' cy='2' r='1.3' fill='%23000' stroke='none'/%3E%3Ccircle cx='55' cy='22' r='1.3' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --sy-beam-s:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Ccircle cx='3' cy='7' r='2.2'/%3E%3Cpath d='M5.5 6.5L27 1.5M5.5 7.5L27 12.5'/%3E%3Ccircle cx='27' cy='1.5' r='1.1' fill='%23000' stroke='none'/%3E%3Ccircle cx='27' cy='12.5' r='1.1' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --sy-corner-dot-br:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M14.4 .6V14.4H.6'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}
.mk--axis{--mk-img:var(--sy-axis);--mk-w:56px;--mk-h:10px;}.mk--semi{--mk-img:var(--sy-semi);--mk-w:48px;--mk-h:24px;}.mk--orbit{--mk-img:var(--sy-orbit);--mk-w:36px;--mk-h:36px;}
.mk--grid-a{--mk-img:var(--sy-grid-a);--mk-w:36px;--mk-h:24px;}.mk--grid-b{--mk-img:var(--sy-grid-b);--mk-w:30px;--mk-h:30px;}.mk--scale{--mk-img:var(--sy-scale);--mk-w:60px;--mk-h:10px;}
.mk--step{--mk-img:var(--sy-step);--mk-w:36px;--mk-h:24px;}.mk--beam{--mk-img:var(--sy-beam);--mk-w:56px;--mk-h:24px;}

/* Séparateurs : même base (croix · nœud · croix) ; de chaque côté du nœud, une paire de symboles différente par section */
#about-teaser::before{--mk-reg:var(--mk-reg-base),var(--sy-sector) calc(50% + -58px) 50%/36px 36px no-repeat,var(--sy-grid-a) calc(50% + 58px) 50%/36px 24px no-repeat;}
#clients::before{--mk-reg:var(--mk-reg-base),var(--sy-compass) calc(50% + -55px) 50%/30px 30px no-repeat,var(--sy-signal) calc(50% + 68px) 50%/56px 14px no-repeat;}
#activities::before{--mk-reg:var(--mk-reg-base),var(--sy-fan) calc(50% + -58px) 50%/36px 24px no-repeat,var(--sy-beam) calc(50% + 68px) 50%/56px 24px no-repeat;}
#galerie-preview::before{--mk-reg:var(--mk-reg-base),var(--sy-vector) calc(50% + -58px) 50%/36px 24px no-repeat,var(--sy-coords) calc(50% + 60px) 50%/40px 30px no-repeat;}
#faq-preview::before{--mk-reg:var(--mk-reg-base),var(--sy-frame-dots) calc(50% + -55px) 50%/30px 30px no-repeat,var(--sy-dial) calc(50% + 58px) 50%/36px 20px no-repeat;}

/* Réalisations : trois assemblages d'angles selon la position dans la mosaïque (grands cadres, cadre étroit, cadre étroit inversé) */


/* Activités : symboles des tuiles impaires */
.activity-tile:nth-child(odd)::after{background:currentColor;-webkit-mask:var(--m) 0 0/100% 100% no-repeat;mask:var(--m) 0 0/100% 100% no-repeat;}
.activity-tile:nth-child(1)::after{top:10px;right:12px;width:15px;height:15px;--m:var(--sy-corner-arc-r);}
.activity-tile:nth-child(3)::after{top:10px;right:14px;width:18px;height:10px;--m:var(--sy-grid-s);}
.activity-tile:nth-child(5)::after{top:10px;right:12px;width:15px;height:15px;--m:var(--sy-corner-dot-r);}
.activity-tile:nth-child(7)::after{top:9px;right:12px;width:28px;height:14px;--m:var(--sy-beam-s);}


/* Galerie : deux vignettes reçoivent un angle composé à la place de l'angle simple */
.ig-thumb:nth-child(5)::after{width:15px;height:15px;border:0;background:color-mix(in srgb,var(--text) 70%,transparent);-webkit-mask:var(--sy-corner-arc) 0 0/100% 100% no-repeat;mask:var(--sy-corner-arc) 0 0/100% 100% no-repeat;}
.ig-thumb:nth-child(4)::after{width:15px;height:15px;border:0;background:color-mix(in srgb,var(--text) 70%,transparent);-webkit-mask:var(--sy-corner-dot-br) 0 0/100% 100% no-repeat;mask:var(--sy-corner-dot-br) 0 0/100% 100% no-repeat;}

/* ============================================================
   Alphabet, famille B : schémas techniques abstraits (7e passe)
   Dessins purement graphiques : aucune mesure ni donnée réelle, rien qui représente une installation du studio.
   radial · coords · network · signal · dial · module · fader · traj · rings
   ============================================================ */
:root{
  --sy-radial:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Ccircle cx='18' cy='18' r='9'/%3E%3Cpath d='M30 18L33.5 18M26.5 26.5L30 30M18 30L18 33.5M9.5 26.5L7 29M6 18L2.5 18M9.5 9.5L7 7M18 6L18 2.5M26.5 9.5L29 7'/%3E%3Ccircle cx='18' cy='18' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --sy-coords:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M3 2V27H38M3 9h4M3 15h4M3 21h4M11 27v-4M19 27v-4M27 27v-4'/%3E%3Cpath d='M22 12V27M22 12H3' stroke-dasharray='2 2'/%3E%3Ccircle cx='22' cy='12' r='2' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --sy-network:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Ccircle cx='5' cy='18' r='3.2'/%3E%3Ccircle cx='20' cy='6' r='2' fill='%23000' stroke='none'/%3E%3Ccircle cx='34' cy='16' r='3.2'/%3E%3Ccircle cx='44' cy='5' r='1.4' fill='%23000' stroke='none'/%3E%3Cpath d='M7.5 16L18.4 7.2M21.6 7.2L31.4 14.1M36.2 13.6L43.1 6'/%3E%3C/svg%3E");
  --sy-signal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 14' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M0 11H8V3H18V11H26V3H30V11H40V7H48'/%3E%3Ccircle cx='53' cy='7' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --sy-dial:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 20' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M4 18A14 14 0 0 1 32 18M32 18L35 18M30.1 11L32.7 9.5M25 5.9L26.5 3.3M18 4L18 1M11 5.9L9.5 3.3M5.9 11L3.3 9.5M4 18L1 18M18 18L23 9.3'/%3E%3Ccircle cx='18' cy='18' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --sy-module:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M20 1H1V19H20M20 10H29'/%3E%3Ccircle cx='8' cy='7' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='8' cy='13' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='14' cy='10' r='1.1' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --sy-fader:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 36' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M5 0V14M5 22V36M1 14H9V22H1Z'/%3E%3C/svg%3E");
  --sy-traj:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M4 19C16 19 18 5 30 5S40 9 42 9' stroke-dasharray='4 3'/%3E%3Ccircle cx='3' cy='19' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='45' cy='9' r='3'/%3E%3C/svg%3E");
  --sy-rings:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M15 2A13 13 0 0 1 28 15M15 24A9 9 0 0 1 6 15M20 15A5 5 0 1 1 15 10'/%3E%3Ccircle cx='15' cy='15' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}
.mk--radial{--mk-img:var(--sy-radial);--mk-w:36px;--mk-h:36px;}.mk--coords{--mk-img:var(--sy-coords);--mk-w:40px;--mk-h:30px;}.mk--network{--mk-img:var(--sy-network);--mk-w:48px;--mk-h:24px;}
.mk--signal{--mk-img:var(--sy-signal);--mk-w:56px;--mk-h:14px;}.mk--dial{--mk-img:var(--sy-dial);--mk-w:36px;--mk-h:20px;}.mk--module{--mk-img:var(--sy-module);--mk-w:30px;--mk-h:20px;}
.mk--fader{--mk-img:var(--sy-fader);--mk-w:10px;--mk-h:36px;}.mk--traj{--mk-img:var(--sy-traj);--mk-w:48px;--mk-h:24px;}.mk--rings{--mk-img:var(--sy-rings);--mk-w:30px;--mk-h:30px;}


/* ============================================================
   Titres, boutons et liens d'action : même système que les micrographics (accueil)
   Mêmes règles partout : trait 1 px, teinte --accent (ou --line pour les filets), points r 1,5 px, longueurs 6 / 16 / 40 px,
   état actif = le segment s'allonge (survol et focus clavier), jamais d'animation permanente. Rien ne change de dimension.
   ============================================================ */

/* Titres : un filet interrompu relie le titre au motif de droite (Clients, Activités, FAQ ; pas Galerie) */
@media (min-width:761px){
  #clients .sec-head::before,#activities .sec-head::before,#faq-preview .sec-head::before{content:"";order:1;flex:1;align-self:center;min-width:24px;height:1px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--accent) 45%,transparent) 0 6px,transparent 6px 12px);}
  #clients .sec-head::after,#activities .sec-head::after,#faq-preview .sec-head::after{order:2;}
}
/* Titre de la présentation : sous-lignage en axe interrompu (ligne, anneau, point), sans décaler le texte */
#about-teaser .about-title{position:relative;}
#about-teaser .about-title{font-size:clamp(24px,2.9vw,38px);}
#about-teaser .about-title span{display:block;white-space:nowrap;}
#about-teaser .about-title span + span{margin-top:.3em;}
#about-teaser .about-title::after{content:"";position:absolute;left:0;bottom:-22px;width:56px;height:10px;pointer-events:none;opacity:.6;background:var(--accent);-webkit-mask:var(--sy-axis) 0 0/100% 100% no-repeat;mask:var(--sy-axis) 0 0/100% 100% no-repeat;}

/* Boutons secondaires de l'accueil : un repère à gauche du bouton qui s'allonge au survol et au focus */
#work .btn-ghost,#about-teaser .btn-ghost,#galerie-preview .btn-ghost{position:relative;}

/* Bouton principal du bandeau final : filets de mesure de chaque côté, fondus vers l'extérieur (écrans ≥ 761 px) */
@media (min-width:761px){
  #faq-preview ~ .cta-band .btn-primary{position:relative;}
  #faq-preview ~ .cta-band .btn-primary::before,#faq-preview ~ .cta-band .btn-primary::after{content:"";position:absolute;top:50%;width:40px;height:1px;pointer-events:none;opacity:.65;transition:width .3s var(--ease);}
  #faq-preview ~ .cta-band .btn-primary::before{right:calc(100% + 14px);background:linear-gradient(90deg,transparent,var(--accent)) 0 0/100% 1px no-repeat;}
  #faq-preview ~ .cta-band .btn-primary::after{left:calc(100% + 14px);background:linear-gradient(270deg,transparent,var(--accent)) 0 0/100% 1px no-repeat;}
  #faq-preview ~ .cta-band .btn-primary:is(:hover,:focus-visible)::before,#faq-preview ~ .cta-band .btn-primary:is(:hover,:focus-visible)::after{width:64px;}
}

/* Liens d'action des réalisations : soulignement fin qui se trace au survol et au focus */
.plate-cta{background:linear-gradient(currentColor,currentColor) 0 calc(50% + 13px)/0 1px no-repeat;transition:color .2s ease,background-size .35s var(--ease);}
.plate:is(:hover,:focus-visible) .plate-cta,.plate-cta:is(:hover,:focus-visible){background-size:100% 1px;}
@media (prefers-reduced-motion:reduce){
  #work .btn-ghost::before,#about-teaser .btn-ghost::before,#galerie-preview .btn-ghost::before,#faq-preview ~ .cta-band .btn-primary::before,#faq-preview ~ .cta-band .btn-primary::after,.plate-cta{transition:none;}
}

/* ============================================================
   Direction « micrographics » (8e passe) : titres, boutons et cadres construits comme un seul système
   Fonctions des motifs : structurer (séparateurs, règle de la mosaïque) · identifier (index 01…, A01–07, Q01…) · encadrer (angles des cadres, cadre ouvert des titres et boutons)
   · annoter (A01–07, filets) · relier (filet de titre, paires des séparateurs). Cinq symboles composés à silhouette propre :
   sector (secteur gradué), compass (réticule à arc), frame-dots (carré ouvert, coin remplacé par un anneau, grille de points incomplète), fan (quarts de cercle emboîtés), vector (angle, arc, pointe).
   ============================================================ */
:root{
  --sy-sector:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M4 4V32H32A28 28 0 0 0 4 4M4 16A16 16 0 0 1 20 32'/%3E%3Ccircle cx='4' cy='32' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='23.8' cy='12.2' r='1.6' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --sy-compass:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M15 0V4M15 26V30M0 15H4M26 15H30M15 2A13 13 0 0 1 28 15'/%3E%3Ccircle cx='15' cy='15' r='8'/%3E%3Ccircle cx='19' cy='11' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --sy-frame-dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M2 28V2H21M28 9V28H2'/%3E%3Ccircle cx='25' cy='5' r='3.2'/%3E%3Ccircle cx='10' cy='10' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='18' cy='10' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='10' cy='18' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --sy-fan:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M3 3V21H30M3 15A6 6 0 0 1 9 21M3 9A12 12 0 0 1 15 21M3 3A18 18 0 0 1 21 21'/%3E%3Ccircle cx='3' cy='21' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --sy-vector:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M3 21L30 6M3 21H33M15 21A12 12 0 0 0 13.5 15.2M30 6L24.5 6.6M30 6L27.3 10.8'/%3E%3Ccircle cx='3' cy='21' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}
.mk--sector{--mk-img:var(--sy-sector);--mk-w:36px;--mk-h:36px;}.mk--compass{--mk-img:var(--sy-compass);--mk-w:30px;--mk-h:30px;}.mk--frame-dots{--mk-img:var(--sy-frame-dots);--mk-w:30px;--mk-h:30px;}
.mk--fan{--mk-img:var(--sy-fan);--mk-w:36px;--mk-h:24px;}.mk--vector{--mk-img:var(--sy-vector);--mk-w:36px;--mk-h:24px;}

/* Titres : une famille de repère par section, intégré à la ligne du titre (Galerie : repère à gauche seulement, rien à droite) */
#galerie-preview .sec-head h2::before{content:"";display:inline-block;width:.46em;height:.46em;margin-right:.4em;vertical-align:.04em;background:var(--accent);-webkit-mask:var(--sy-compass) center/contain no-repeat;mask:var(--sy-compass) center/contain no-repeat;}
#faq-preview .sec-head h2::before{-webkit-mask-image:var(--sy-frame-dots);mask-image:var(--sy-frame-dots);}
/* Clients : cadre ouvert asymétrique (angles haut-gauche et bas-droite) autour du titre */
#clients .sec-head h2,#faq-preview .sec-head h2{position:relative;}
/* FAQ : ligne de construction partielle sous le titre, qui finit sur un nœud */

/* Boutons secondaires : cadre ouvert (angles haut-gauche et bas-droite) qui s'écarte au survol et au focus */
#work .btn-ghost::after,#about-teaser .btn-ghost::after,#galerie-preview .btn-ghost::after{content:"";position:absolute;inset:-5px;pointer-events:none;opacity:.7;background:linear-gradient(var(--accent),var(--accent)) 0 0/9px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) 0 0/1px 9px no-repeat,linear-gradient(var(--accent),var(--accent)) 100% 100%/9px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) 100% 100%/1px 9px no-repeat;transition:inset .3s var(--ease);}
#work .btn-ghost:is(:hover,:focus-visible)::after,#about-teaser .btn-ghost:is(:hover,:focus-visible)::after,#galerie-preview .btn-ghost:is(:hover,:focus-visible)::after{inset:-9px;}
@media (prefers-reduced-motion:reduce){#work .btn-ghost::after,#about-teaser .btn-ghost::after,#galerie-preview .btn-ghost::after{transition:none;}}
@media (max-width:760px){#clients .sec-head h2::after{display:none;}}

/* ============================================================
   Cadres des réalisations (9e passe) : le repère couvre tout le cadre (coins, bords) au lieu d'une bande en haut
   Trois assemblages selon la position, mêmes angles de 15 px et même trait ; photos, vidéos et proportions inchangées.
   Au survol et au focus clavier, le jeu de repères se rapproche de 4 px du bord. Symboles composés ajoutés : arc-dots, ring-ticks, intersect.
   ============================================================ */
:root{
  --sy-arc-dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M3 8A9 9 0 0 1 21 8M24 8H30'/%3E%3Ccircle cx='3' cy='12' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='21' cy='12' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --sy-ring-ticks:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M11 3A8 8 0 1 1 3 11M11 0V2M20 11H22M11 20V22'/%3E%3Ccircle cx='11' cy='11' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --sy-intersect:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M0 6H9.6M14.4 6H24M12 1V11'/%3E%3Cpath d='M24 6H34' stroke-dasharray='2 2'/%3E%3Ccircle cx='12' cy='6' r='2.4'/%3E%3C/svg%3E");
}
.mk--arc-dots{--mk-img:var(--sy-arc-dots);--mk-w:30px;--mk-h:14px;}.mk--ring-ticks{--mk-img:var(--sy-ring-ticks);--mk-w:22px;--mk-h:22px;}.mk--intersect{--mk-img:var(--sy-intersect);--mk-w:34px;--mk-h:12px;}
.plate::after{inset:auto;top:19px;left:19px;right:19px;height:calc(var(--h) - 38px);background:currentColor;transition:opacity .6s var(--ease) var(--dl,0ms),top .35s var(--ease),left .35s var(--ease),right .35s var(--ease),height .35s var(--ease);}
.plate:nth-child(4n+1)::after,.plate:nth-child(4n+4)::after{-webkit-mask:var(--sy-corner) 0 0/15px 15px no-repeat,var(--sy-corner-arc-r) 100% 0/15px 15px no-repeat,var(--sy-scale-s) 0 100%/28px 8px no-repeat,var(--sy-ring-ticks) 100% 100%/22px 22px no-repeat;mask:var(--sy-corner) 0 0/15px 15px no-repeat,var(--sy-corner-arc-r) 100% 0/15px 15px no-repeat,var(--sy-scale-s) 0 100%/28px 8px no-repeat,var(--sy-ring-ticks) 100% 100%/22px 22px no-repeat;}
.plate:nth-child(4n+2)::after{-webkit-mask:var(--sy-corner) 0 0/15px 15px no-repeat,var(--sy-corner-dot-r) 100% 0/15px 15px no-repeat,var(--sy-arc-dots) 100% 100%/30px 14px no-repeat;mask:var(--sy-corner) 0 0/15px 15px no-repeat,var(--sy-corner-dot-r) 100% 0/15px 15px no-repeat,var(--sy-arc-dots) 100% 100%/30px 14px no-repeat;}
.plate:nth-child(4n+3)::after{-webkit-mask:var(--sy-corner-arc) 0 0/15px 15px no-repeat,var(--sy-corner-r) 100% 0/15px 15px no-repeat,var(--sy-intersect) 0 100%/34px 12px no-repeat;mask:var(--sy-corner-arc) 0 0/15px 15px no-repeat,var(--sy-corner-r) 100% 0/15px 15px no-repeat,var(--sy-intersect) 0 100%/34px 12px no-repeat;}
.plate:focus-visible::after{top:15px;left:15px;right:15px;height:calc(var(--h) - 30px);}
@media (hover:hover){.plate:hover::after{top:15px;left:15px;right:15px;height:calc(var(--h) - 30px);}}
@media (prefers-reduced-motion:reduce){.plate::after{transition:none;}}
/* ≤ 900 px les cadres passent en 4/3 : le jeu de repères suit la même proportion (le padding en % est relatif à la largeur de la carte) */
@media (max-width:900px){
  .plate::after{height:0;padding-bottom:calc(75% - 38px);}
  .plate:focus-visible::after{height:0;padding-bottom:calc(75% - 30px);}
}
@media (max-width:900px) and (hover:hover){.plate:hover::after{height:0;padding-bottom:calc(75% - 30px);}}

/* ============================================================
   COMPOSANTS PILOTES (10e passe) : un titre, un bouton, un cadre construits avec les mêmes règles
   Règles communes : trait 1 px · nœud = anneau r 3,2 ou point r 1,4 · pas de pointillé 6/6 · angles de 9 (bouton) ou 15 px (cadre) · couleur --accent sur fond sombre, crème translucide sur photo
   · une ligne de construction relie toujours deux symboles composés (départ et arrivée), jamais un repère isolé.
   ============================================================ */
/* Titre « Nos activités » : secteur gradué (départ) → ligne pointillée → quarts de cercle emboîtés (arrivée) */
#activities .sec-head h2::before{width:30px;height:30px;vertical-align:.1em;margin-right:.35em;-webkit-mask:var(--sy-sector) center/contain no-repeat;mask:var(--sy-sector) center/contain no-repeat;}
#activities .sec-head::after{width:36px;height:24px;align-self:center;opacity:.85;-webkit-mask:var(--sy-fan) 100% 50%/36px 24px no-repeat;mask:var(--sy-fan) 100% 50%/36px 24px no-repeat;}
/* Bouton « Voir toutes nos réalisations » : cadre ouvert (existant) + ligne de construction qui part du bouton, croise un nœud puis finit sur un arc et trois points */
#work .sec-more::after{flex:0 1 min(60%,520px);height:14px;background:var(--accent);opacity:.55;-webkit-mask:linear-gradient(#000,#000) 0 50%/calc(100% - 38px) 1px no-repeat,var(--sy-intersect) 40px 50%/34px 12px no-repeat,var(--sy-arc-dots) 100% 50%/30px 14px no-repeat;mask:linear-gradient(#000,#000) 0 50%/calc(100% - 38px) 1px no-repeat,var(--sy-intersect) 40px 50%/34px 12px no-repeat,var(--sy-arc-dots) 100% 50%/30px 14px no-repeat;}
/* Cadre 01 : les deux angles hauts sont reliés par une cote pointillée discrète (les autres cadres n'ont pas cette cote) */

/* ============================================================
   Généralisation des pilotes (10e passe) : même construction pour tous les titres, boutons « voir plus » et cadres de l'accueil
   Titre = symbole composé de départ (30 px) · ligne de construction · symbole composé d'arrivée ; une famille de symboles différente par section.
   Galerie : symbole de départ seulement, rien à droite du titre (demande explicite).
   ============================================================ */
#clients .sec-head h2::before{width:30px;height:30px;vertical-align:.1em;margin-right:.35em;-webkit-mask:var(--sy-compass) center/contain no-repeat;mask:var(--sy-compass) center/contain no-repeat;}
#faq-preview .sec-head h2::before{width:30px;height:30px;vertical-align:.1em;margin-right:.35em;-webkit-mask:var(--sy-frame-dots) center/contain no-repeat;mask:var(--sy-frame-dots) center/contain no-repeat;}
#galerie-preview .sec-head h2::before{width:36px;height:24px;vertical-align:.1em;margin-right:.35em;-webkit-mask:var(--sy-vector) center/contain no-repeat;mask:var(--sy-vector) center/contain no-repeat;}
#clients .sec-head::after{width:30px;height:14px;align-self:center;opacity:.85;-webkit-mask:var(--sy-arc-dots) 100% 50%/30px 14px no-repeat;mask:var(--sy-arc-dots) 100% 50%/30px 14px no-repeat;}
#faq-preview .sec-head::after{width:34px;height:12px;align-self:center;opacity:.85;-webkit-mask:var(--sy-intersect) 100% 50%/34px 12px no-repeat;mask:var(--sy-intersect) 100% 50%/34px 12px no-repeat;}
/* Boutons « voir plus » : même ligne de construction que le pilote (nœud puis symbole d'arrivée propre à la section) */
#about-teaser .sec-more::after{flex:0 1 min(60%,520px);height:24px;background:var(--accent);opacity:.55;-webkit-mask:linear-gradient(#000,#000) 0 50%/calc(100% - 44px) 1px no-repeat,var(--sy-intersect) 40px 50%/34px 12px no-repeat,var(--sy-fan) 100% 50%/36px 24px no-repeat;mask:linear-gradient(#000,#000) 0 50%/calc(100% - 44px) 1px no-repeat,var(--sy-intersect) 40px 50%/34px 12px no-repeat,var(--sy-fan) 100% 50%/36px 24px no-repeat;}
#galerie-preview .sec-more::after{flex:0 1 min(60%,520px);height:14px;background:var(--accent);opacity:.55;-webkit-mask:linear-gradient(#000,#000) 0 50%/calc(100% - 38px) 1px no-repeat,var(--sy-intersect) 40px 50%/34px 12px no-repeat,var(--sy-arc-dots) 100% 50%/30px 14px no-repeat;mask:linear-gradient(#000,#000) 0 50%/calc(100% - 38px) 1px no-repeat,var(--sy-intersect) 40px 50%/34px 12px no-repeat,var(--sy-arc-dots) 100% 50%/30px 14px no-repeat;}

/* ============================================================
   PROTOTYPES V2 (11e passe) : trois composants repensés, rien n'est généralisé
   Vocabulaire commun : trait 1 px · ligne de construction pointillée 6/6 · nœud (point r 1,4 ou anneau r 3,2) · bord ouvert (jamais un cadre fermé) · symbole composé en bout de ligne
   Principe : chaque composant se lit comme une cote ou une ligne qui relie deux éléments réels (le titre à sa grille, le bouton à sa ligne, deux coins d'un même cadre).
   ============================================================ */

/* A. Titre « Nos activités » — cote de la grille + axe qui ancre le titre sur la première tuile */
#activities .sec-head h2{position:relative;}
#activities .sec-head h2::after{content:"";position:absolute;left:12px;top:calc(100% - 6px);width:7px;height:calc(clamp(40px,6vw,72px) + 2px);margin:0;pointer-events:none;opacity:.6;background:repeating-linear-gradient(180deg,var(--accent) 0 5px,transparent 5px 10px) 50% 0/1px calc(100% - 7px) no-repeat,radial-gradient(circle,var(--accent) 1.6px,transparent 2.2px) 50% 100%/7px 7px no-repeat;}
#activities .sec-head::after{display:none;}
@media (min-width:761px){
  #activities .sec-head::before{content:"A01–07";content:"A01–07" / "";height:14px;line-height:14px;text-align:center;font-size:10px;font-weight:600;letter-spacing:.18em;color:var(--muted);background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--accent) 60%,transparent) 0 6px,transparent 6px 12px) 0 50%/calc(50% - 42px) 1px no-repeat,repeating-linear-gradient(90deg,color-mix(in srgb,var(--accent) 60%,transparent) 0 6px,transparent 6px 12px) 100% 50%/calc(50% - 42px) 1px no-repeat,linear-gradient(color-mix(in srgb,var(--accent) 60%,transparent),color-mix(in srgb,var(--accent) 60%,transparent)) 0 50%/1px 9px no-repeat,linear-gradient(color-mix(in srgb,var(--accent) 60%,transparent),color-mix(in srgb,var(--accent) 60%,transparent)) 100% 50%/1px 9px no-repeat;}
}

/* B. Bouton « Voir notre Instagram » — contour interrompu à deux endroits, un nœud dans la première coupure, un segment dans la seconde ; le repère glisse au survol et au focus */
#work .btn-ghost::before,#about-teaser .btn-ghost::before,#galerie-preview .btn-ghost::before,#work .btn-ghost::after,#about-teaser .btn-ghost::after,#galerie-preview .btn-ghost::after{content:"";position:absolute;pointer-events:none;opacity:1;transition:left .3s var(--ease),right .3s var(--ease),background-color .2s ease;background-color:var(--bg);}
#work .btn-ghost::before,#about-teaser .btn-ghost::before,#galerie-preview .btn-ghost::before{left:36px;top:-3px;width:12px;height:5px;background-image:radial-gradient(circle,var(--accent) 1.5px,transparent 2px);background-size:5px 5px;background-position:50% 50%;background-repeat:no-repeat;}
#work .btn-ghost::after,#about-teaser .btn-ghost::after,#galerie-preview .btn-ghost::after,#work .btn-ghost:is(:hover,:focus-visible)::after,#about-teaser .btn-ghost:is(:hover,:focus-visible)::after,#galerie-preview .btn-ghost:is(:hover,:focus-visible)::after{inset:auto 60px -3px auto;width:14px;height:5px;background-image:linear-gradient(var(--accent),var(--accent));background-size:8px 1px;background-position:50% 50%;background-repeat:no-repeat;}
#work .btn-ghost:is(:hover,:focus-visible)::before,#about-teaser .btn-ghost:is(:hover,:focus-visible)::before,#galerie-preview .btn-ghost:is(:hover,:focus-visible)::before{left:46px;}
#work .btn-ghost:hover::before,#about-teaser .btn-ghost:hover::before,#galerie-preview .btn-ghost:hover::before,#work .btn-ghost:hover::after,#about-teaser .btn-ghost:hover::after,#galerie-preview .btn-ghost:hover::after{background-color:var(--text);}
#work .btn-ghost:is(:hover,:focus-visible)::after,#about-teaser .btn-ghost:is(:hover,:focus-visible)::after,#galerie-preview .btn-ghost:is(:hover,:focus-visible)::after{right:48px;}
#work .sec-more:has(.btn-ghost:is(:hover,:focus-visible))::after,#about-teaser .sec-more:has(.btn-ghost:is(:hover,:focus-visible))::after,#galerie-preview .sec-more:has(.btn-ghost:is(:hover,:focus-visible))::after{opacity:1;}

/* C. Cadre 01 — les bras des angles se prolongent (cote pointillée en haut, axe pointillé vers le bas à gauche) et la ligne du bas se termine sur un anneau gradué */
.plate:nth-child(1)::after{-webkit-mask:var(--sy-corner) 0 0/15px 15px no-repeat,repeating-linear-gradient(90deg,rgba(0,0,0,.55) 0 6px,transparent 6px 12px) 86px 7px/calc(100% - 118px) 1px no-repeat,repeating-linear-gradient(180deg,rgba(0,0,0,.55) 0 5px,transparent 5px 10px) 0 22px/1px 52px no-repeat,var(--sy-corner-arc-r) 100% 0/15px 15px no-repeat,var(--sy-scale-s) 0 100%/28px 8px no-repeat,linear-gradient(#000,#000) calc(100% - 74px) calc(100% - 11px)/46px 1px no-repeat,var(--sy-ring-ticks) 100% 100%/22px 22px no-repeat;mask:var(--sy-corner) 0 0/15px 15px no-repeat,repeating-linear-gradient(90deg,rgba(0,0,0,.55) 0 6px,transparent 6px 12px) 86px 7px/calc(100% - 118px) 1px no-repeat,repeating-linear-gradient(180deg,rgba(0,0,0,.55) 0 5px,transparent 5px 10px) 0 22px/1px 52px no-repeat,var(--sy-corner-arc-r) 100% 0/15px 15px no-repeat,var(--sy-scale-s) 0 100%/28px 8px no-repeat,linear-gradient(#000,#000) calc(100% - 74px) calc(100% - 11px)/46px 1px no-repeat,var(--sy-ring-ticks) 100% 100%/22px 22px no-repeat;}
@media (prefers-reduced-motion:reduce){#galerie-preview .btn-ghost::before,#galerie-preview .btn-ghost::after{transition:none;}}

/* ============================================================
   REFONTE GLOBALE DE L'ACCUEIL (12e passe) : le système des prototypes V2 appliqué à tous les composants
   Titres = cote (pointillés + ticks de bout) ; boutons secondaires = contour interrompu (nœud / segment) ; cadres = bras d'angles prolongés (cote haute, axe latéral).
   Variantes par position pour ne pas décorer tous les cadres de la même façon ; aucun index sur les emplacements vides (data-idx vide).
   ============================================================ */
@media (min-width:761px){
  #clients .sec-head::before,#faq-preview .sec-head::before{height:14px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--accent) 60%,transparent) 0 6px,transparent 6px 12px) 0 50%/100% 1px no-repeat,linear-gradient(color-mix(in srgb,var(--accent) 60%,transparent),color-mix(in srgb,var(--accent) 60%,transparent)) 0 50%/1px 9px no-repeat,linear-gradient(color-mix(in srgb,var(--accent) 60%,transparent),color-mix(in srgb,var(--accent) 60%,transparent)) 100% 50%/1px 9px no-repeat;}
}
.plate:nth-child(4n+1)::after{-webkit-mask:var(--sy-corner) 0 0/15px 15px no-repeat,repeating-linear-gradient(90deg,rgba(0,0,0,.55) 0 6px,transparent 6px 12px) 86px 7px/calc(100% - 118px) 1px no-repeat,repeating-linear-gradient(180deg,rgba(0,0,0,.55) 0 5px,transparent 5px 10px) 0 22px/1px 52px no-repeat,var(--sy-corner-arc-r) 100% 0/15px 15px no-repeat,var(--sy-scale-s) 0 100%/28px 8px no-repeat,linear-gradient(#000,#000) calc(100% - 74px) calc(100% - 11px)/46px 1px no-repeat,var(--sy-ring-ticks) 100% 100%/22px 22px no-repeat;mask:var(--sy-corner) 0 0/15px 15px no-repeat,repeating-linear-gradient(90deg,rgba(0,0,0,.55) 0 6px,transparent 6px 12px) 86px 7px/calc(100% - 118px) 1px no-repeat,repeating-linear-gradient(180deg,rgba(0,0,0,.55) 0 5px,transparent 5px 10px) 0 22px/1px 52px no-repeat,var(--sy-corner-arc-r) 100% 0/15px 15px no-repeat,var(--sy-scale-s) 0 100%/28px 8px no-repeat,linear-gradient(#000,#000) calc(100% - 74px) calc(100% - 11px)/46px 1px no-repeat,var(--sy-ring-ticks) 100% 100%/22px 22px no-repeat;}
.plate:nth-child(4n+2)::after{-webkit-mask:var(--sy-corner) 0 0/15px 15px no-repeat,repeating-linear-gradient(90deg,rgba(0,0,0,.55) 0 6px,transparent 6px 12px) 86px 7px/calc(100% - 118px) 1px no-repeat,var(--sy-corner-dot-r) 100% 0/15px 15px no-repeat,repeating-linear-gradient(180deg,rgba(0,0,0,.55) 0 5px,transparent 5px 10px) 100% 22px/1px 52px no-repeat,var(--sy-arc-dots) 100% 100%/30px 14px no-repeat;mask:var(--sy-corner) 0 0/15px 15px no-repeat,repeating-linear-gradient(90deg,rgba(0,0,0,.55) 0 6px,transparent 6px 12px) 86px 7px/calc(100% - 118px) 1px no-repeat,var(--sy-corner-dot-r) 100% 0/15px 15px no-repeat,repeating-linear-gradient(180deg,rgba(0,0,0,.55) 0 5px,transparent 5px 10px) 100% 22px/1px 52px no-repeat,var(--sy-arc-dots) 100% 100%/30px 14px no-repeat;}
.plate:nth-child(4n+3)::after{-webkit-mask:var(--sy-corner-arc) 0 0/15px 15px no-repeat,repeating-linear-gradient(180deg,rgba(0,0,0,.55) 0 5px,transparent 5px 10px) 0 22px/1px 52px no-repeat,var(--sy-corner-r) 100% 0/15px 15px no-repeat,var(--sy-intersect) 0 100%/34px 12px no-repeat;mask:var(--sy-corner-arc) 0 0/15px 15px no-repeat,repeating-linear-gradient(180deg,rgba(0,0,0,.55) 0 5px,transparent 5px 10px) 0 22px/1px 52px no-repeat,var(--sy-corner-r) 100% 0/15px 15px no-repeat,var(--sy-intersect) 0 100%/34px 12px no-repeat;}
.plate:nth-child(4n+4)::after{-webkit-mask:var(--sy-corner) 0 0/15px 15px no-repeat,repeating-linear-gradient(90deg,rgba(0,0,0,.55) 0 6px,transparent 6px 12px) 86px 7px/calc(100% - 118px) 1px no-repeat,var(--sy-corner-arc-r) 100% 0/15px 15px no-repeat,repeating-linear-gradient(180deg,rgba(0,0,0,.55) 0 5px,transparent 5px 10px) 100% 22px/1px 52px no-repeat,var(--sy-scale-s) 0 100%/28px 8px no-repeat,var(--sy-ring-ticks) 100% 100%/22px 22px no-repeat;mask:var(--sy-corner) 0 0/15px 15px no-repeat,repeating-linear-gradient(90deg,rgba(0,0,0,.55) 0 6px,transparent 6px 12px) 86px 7px/calc(100% - 118px) 1px no-repeat,var(--sy-corner-arc-r) 100% 0/15px 15px no-repeat,repeating-linear-gradient(180deg,rgba(0,0,0,.55) 0 5px,transparent 5px 10px) 100% 22px/1px 52px no-repeat,var(--sy-scale-s) 0 100%/28px 8px no-repeat,var(--sy-ring-ticks) 100% 100%/22px 22px no-repeat;}

/* ============================================================
   RECOMPOSITION DES TITRES (13e passe) : chaque titre s'appuie sur une règle éditoriale pleine largeur
   Filet --line sur toute la grille + segment accent de 56 px terminé par un nœud ; le segment change de côté d'une section à l'autre (gauche / droite).
   Hauteur totale inchangée : 18 px de padding pris sur la marge basse. Remplace le cadre ouvert (Clients) et la ligne sous le titre (FAQ).
   ============================================================ */
#clients .sec-head,#activities .sec-head,#galerie-preview .sec-head,#faq-preview .sec-head{padding-bottom:18px;margin-bottom:calc(clamp(40px,6vw,72px) - 18px);}
#clients .sec-head,#galerie-preview .sec-head{background:linear-gradient(var(--line),var(--line)) left bottom 3px/100% 1px no-repeat,linear-gradient(var(--accent),var(--accent)) left bottom 2.5px/56px 2px no-repeat,radial-gradient(circle,var(--accent) 1.8px,transparent 2.4px) left 56px bottom .5px/6px 6px no-repeat;}
#activities .sec-head,#faq-preview .sec-head{background:linear-gradient(var(--line),var(--line)) left bottom 3px/100% 1px no-repeat,linear-gradient(var(--accent),var(--accent)) right bottom 2.5px/56px 2px no-repeat,radial-gradient(circle,var(--accent) 1.8px,transparent 2.4px) right 56px bottom .5px/6px 6px no-repeat;}

/* ============================================================
   PROTOTYPE BOUTON (14e passe) : « Voir notre Instagram » seulement — silhouette rectangulaire aux coins haut-droit et bas-gauche coupés
   Contour 1 px dessiné par 4 filets + 2 diagonales de 10 px (pas de border-radius, pas de clip-path : le focus reste visible).
   Repères : nœud sur la coupe haut-droit, segment pointillé sous le bord bas. Survol et focus clavier : contour passe à --accent et le segment s'allonge (18 → 34 px).
   Dimensions inchangées (border 1,5 px transparent conservée). Les autres boutons ne sont pas touchés.
   ============================================================ */
#galerie-preview .sec-more a.btn-ghost{--bc:var(--text);position:relative;border-radius:0;border-color:transparent;background-color:transparent;background-origin:border-box;background-repeat:no-repeat;
  background-image:linear-gradient(var(--bc),var(--bc)),linear-gradient(var(--bc),var(--bc)),linear-gradient(var(--bc),var(--bc)),linear-gradient(var(--bc),var(--bc)),
    linear-gradient(to bottom left,transparent calc(50% - .5px),var(--bc) calc(50% - .5px),var(--bc) calc(50% + .5px),transparent calc(50% + .5px)),
    linear-gradient(to bottom left,transparent calc(50% - .5px),var(--bc) calc(50% - .5px),var(--bc) calc(50% + .5px),transparent calc(50% + .5px));
  background-position:0 0,100% 10px,100% 100%,0 0,100% 0,0 100%;
  background-size:calc(100% - 10px) 1px,1px calc(100% - 10px),calc(100% - 10px) 1px,1px calc(100% - 10px),10px 10px,10px 10px;
  transition:transform .15s ease,color .15s ease;}
#galerie-preview .sec-more a.btn-ghost:is(:hover,:focus-visible){--bc:var(--accent);background-color:transparent;color:var(--text);}
#galerie-preview .sec-more a.btn-ghost::before,#galerie-preview .sec-more a.btn-ghost::after{all:initial;content:"";position:absolute;pointer-events:none;display:block;}
#galerie-preview .sec-more a.btn-ghost::before{right:0;top:0;width:10px;height:10px;background:radial-gradient(circle,var(--accent) 1.6px,transparent 2.2px);}
#galerie-preview .sec-more a.btn-ghost::after{left:24px;bottom:-7px;width:18px;height:1px;background:repeating-linear-gradient(90deg,var(--accent) 0 4px,transparent 4px 7px);transition:width .3s var(--ease);}
#galerie-preview .sec-more a.btn-ghost:is(:hover,:focus-visible)::after{width:34px;}
@media (prefers-reduced-motion:reduce){#galerie-preview .sec-more a.btn-ghost,#galerie-preview .sec-more a.btn-ghost::after{transition:none;}}

/* ============================================================
   MOTION MICROGRAPHICS (accueil seulement) : les règles, les cadres et le bandeau se construisent une seule fois, à l'entrée dans le champ de vision
   Mécanisme existant réutilisé : site.js pose .js (absent si mouvement réduit) puis .is-in (une seule lecture, unobserve). Sans JavaScript ou en mouvement réduit : tout est affiché, rien n'est caché.
   Séquence des titres : filet (0,2 s → 1,1 s) · segment accent (0,8 s) · nœud (1,2 s). Propriétés animées : variables @property, transform, opacity, clip-path (aucune propriété de mise en page).
   ============================================================ */
@property --rd{syntax:'<percentage>';inherits:false;initial-value:100%;}
@property --rs{syntax:'<number>';inherits:false;initial-value:1;}
@property --rn{syntax:'<number>';inherits:false;initial-value:1;}
#clients .sec-head,#galerie-preview .sec-head{background:linear-gradient(var(--line),var(--line)) left bottom 3px/var(--rd) 1px no-repeat,linear-gradient(var(--accent),var(--accent)) left bottom 2.5px/calc(56px * var(--rs)) 2px no-repeat,radial-gradient(circle,var(--accent) calc(1.8px * var(--rn)),transparent calc(2.4px * var(--rn))) left calc(56px * var(--rs)) bottom .5px/6px 6px no-repeat;}
#activities .sec-head,#faq-preview .sec-head{background:linear-gradient(var(--line),var(--line)) right bottom 3px/var(--rd) 1px no-repeat,linear-gradient(var(--accent),var(--accent)) right bottom 2.5px/calc(56px * var(--rs)) 2px no-repeat,radial-gradient(circle,var(--accent) calc(1.8px * var(--rn)),transparent calc(2.4px * var(--rn))) right calc(56px * var(--rs)) bottom .5px/6px 6px no-repeat;}
.js :is(#clients,#activities,#galerie-preview,#faq-preview) .sec-head[data-reveal]{--rd:0%;--rs:0;--rn:0;transition:opacity .8s var(--ease) var(--dl,0ms),transform .8s var(--ease) var(--dl,0ms),--rd .9s var(--ease) .2s,--rs .5s var(--ease) .8s,--rn .3s ease 1.2s;}
.js :is(#clients,#activities,#galerie-preview,#faq-preview) .sec-head[data-reveal].is-in{--rd:100%;--rs:1;--rn:1;}
/* « Nos activités » : la cote se révèle puis l'axe descend vers la première tuile */
.js #activities .sec-head[data-reveal]::before{opacity:0;transition:opacity .6s ease .9s;}
.js #activities .sec-head[data-reveal].is-in::before{opacity:1;}
.js #activities .sec-head[data-reveal] h2::after{clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease) 1.1s;}
.js #activities .sec-head[data-reveal].is-in h2::after{clip-path:inset(0);}
/* Cadres : les repères se tracent depuis l'angle haut-gauche, après l'ouverture du cadre */
.js .plate[data-reveal]::after{clip-path:inset(0 100% 100% 0);transition:opacity .6s var(--ease) var(--dl,0ms),clip-path 1s var(--ease) calc(var(--dl,0ms) + .6s),top .35s var(--ease),left .35s var(--ease),right .35s var(--ease),height .35s var(--ease);}
.js .plate[data-reveal].is-in::after{clip-path:inset(0);}
/* Bandeau final : les arcs se déploient depuis l'angle bas-droit (accueil) */
.js #faq-preview ~ .cta-band[data-reveal]::before{transform:scale(.88);transform-origin:100% 100%;transition:transform 1.2s var(--ease) .3s;}
.js #faq-preview ~ .cta-band[data-reveal].is-in::before{transform:none;}
@media (prefers-reduced-motion:reduce){
  .js :is(#clients,#activities,#galerie-preview,#faq-preview) .sec-head[data-reveal],.js #activities .sec-head[data-reveal]::before,.js #activities .sec-head[data-reveal] h2::after,.js .plate[data-reveal]::after,.js #faq-preview ~ .cta-band[data-reveal]::before{transition:none;}
}

/* ===== MICROGRAPHICS — pages dédiées (2026-10-13) =====
   Même langage que l'accueil, par sélecteurs génériques (aucune règle par page) : séparateurs de section, règle de titre,
   symbole de titre, boutons du bandeau final, pied de page. Réutilise --mk-* / --sy-* ; l'accueil (#faq-preview) est exclu. */
/* Séparateurs : croix · nœud · croix + une paire de symboles, qui alterne d'une section à l'autre */
main:not(:has(#faq-preview)) > section:not(.cta-band) + section:not(.cta-band)::before{content:"";position:absolute;top:-18px;left:max(0px,calc(50% - 620px));width:min(100%,1240px);height:36px;pointer-events:none;background:var(--accent);opacity:.55;--mk-reg-base:var(--mk-cross) var(--gutter) 50%/14px 14px no-repeat,var(--mk-node) 50% 50%/14px 14px no-repeat,var(--mk-cross) calc(100% - var(--gutter)) 50%/14px 14px no-repeat;--mk-reg:var(--mk-reg-base),var(--sy-sector) calc(50% + -58px) 50%/36px 36px no-repeat,var(--sy-grid-a) calc(50% + 58px) 50%/36px 24px no-repeat;-webkit-mask:var(--mk-reg);mask:var(--mk-reg);}
main:not(:has(#faq-preview)) > section:not(.cta-band) + section:not(.cta-band):nth-of-type(3n+2)::before{--mk-reg:var(--mk-reg-base),var(--sy-compass) calc(50% + -55px) 50%/30px 30px no-repeat,var(--sy-signal) calc(50% + 68px) 50%/56px 14px no-repeat;}
main:not(:has(#faq-preview)) > section:not(.cta-band) + section:not(.cta-band):nth-of-type(3n)::before{--mk-reg:var(--mk-reg-base),var(--sy-frame-dots) calc(50% + -55px) 50%/30px 30px no-repeat,var(--sy-dial) calc(50% + 58px) 50%/36px 20px no-repeat;}
/* Titres : règle éditoriale pleine largeur (filet · segment · nœud), segment à gauche puis à droite en alternance, + symbole de départ */
main:not(:has(#faq-preview)) .sec-head{padding-bottom:18px;margin-bottom:calc(clamp(40px,6vw,72px) - 18px);background:linear-gradient(var(--line),var(--line)) left bottom 3px/100% 1px no-repeat,linear-gradient(var(--accent),var(--accent)) left bottom 2.5px/56px 2px no-repeat,radial-gradient(circle,var(--accent) 1.8px,transparent 2.4px) left 56px bottom .5px/6px 6px no-repeat;}
main:not(:has(#faq-preview)) section:nth-of-type(even) .sec-head{background:linear-gradient(var(--line),var(--line)) right bottom 3px/100% 1px no-repeat,linear-gradient(var(--accent),var(--accent)) right bottom 2.5px/56px 2px no-repeat,radial-gradient(circle,var(--accent) 1.8px,transparent 2.4px) right 56px bottom .5px/6px 6px no-repeat;}
main:not(:has(#faq-preview)) .sec-head :is(h1,h2)::before{content:"";display:inline-block;width:30px;height:30px;margin-right:.35em;vertical-align:.1em;background:var(--accent);-webkit-mask:var(--sy-sector) center/contain no-repeat;mask:var(--sy-sector) center/contain no-repeat;}
main:not(:has(#faq-preview)) section:nth-of-type(3n+2) .sec-head :is(h1,h2)::before{-webkit-mask-image:var(--sy-compass);mask-image:var(--sy-compass);}
main:not(:has(#faq-preview)) section:nth-of-type(3n) .sec-head :is(h1,h2)::before{-webkit-mask-image:var(--sy-frame-dots);mask-image:var(--sy-frame-dots);}
/* Bandeau final et pied de page : mêmes filets de bouton et même graduation que l'accueil, sur toutes les pages */
.cta-band .btn-primary{position:relative;}
.cta-band .btn-primary::before,.cta-band .btn-primary::after{content:"";position:absolute;top:50%;width:40px;height:1px;pointer-events:none;opacity:.65;transition:width .3s var(--ease);}
.cta-band .btn-primary::before{right:calc(100% + 14px);background:linear-gradient(90deg,transparent,var(--accent)) 0 0/100% 1px no-repeat;}
.cta-band .btn-primary::after{left:calc(100% + 14px);background:linear-gradient(270deg,transparent,var(--accent)) 0 0/100% 1px no-repeat;}
.cta-band .btn-primary:is(:hover,:focus-visible)::before,.cta-band .btn-primary:is(:hover,:focus-visible)::after{width:64px;}
main + footer::after{content:"";position:absolute;top:-7px;left:max(0px,calc(50% - 620px));width:min(100%,1240px);height:14px;pointer-events:none;background:var(--accent);opacity:.45;--mk-reg:var(--mk-cross) var(--gutter) 50%/14px 14px no-repeat,var(--mk-cross) calc(100% - var(--gutter)) 50%/14px 14px no-repeat;-webkit-mask:var(--mk-reg);mask:var(--mk-reg);}
@media (max-width:760px){.cta-band .btn-primary::before,.cta-band .btn-primary::after{display:none;}}
@media (prefers-reduced-motion:reduce){.cta-band .btn-primary::before,.cta-band .btn-primary::after{transition:none;}}
/* Paragraphes de présentation (plusieurs blocs de texte) */
.about-body p + p{margin-top:1em;}
/* Pages légales (mentions, CGV) : même règle de titre que les autres pages, repère devant chaque intertitre */
.legal-page h1{padding-bottom:18px;margin-bottom:0;background:linear-gradient(var(--line),var(--line)) left bottom 3px/100% 1px no-repeat,linear-gradient(var(--accent),var(--accent)) left bottom 2.5px/56px 2px no-repeat,radial-gradient(circle,var(--accent) 1.8px,transparent 2.4px) left 56px bottom .5px/6px 6px no-repeat;}
.legal-page h1::before{content:"";display:inline-block;width:30px;height:30px;margin-right:.35em;vertical-align:.1em;background:var(--accent);-webkit-mask:var(--sy-frame-dots) center/contain no-repeat;mask:var(--sy-frame-dots) center/contain no-repeat;}
.legal-page h2::before{content:"";display:inline-block;width:14px;height:14px;margin-right:.55em;vertical-align:-.1em;background:var(--accent);opacity:.7;-webkit-mask:var(--mk-cross) center/contain no-repeat;mask:var(--mk-cross) center/contain no-repeat;}
/* Contact : titre avec règle courte (comme « Présentation »), liste d'infos encadrée par quatre angles, repère devant le message vide du recrutement */
.contact-main :is(h1,h2){position:relative;padding-bottom:26px;}
.contact-main :is(h1,h2)::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:10px;pointer-events:none;background:linear-gradient(var(--accent),var(--accent)) 0 50%/48px 2px no-repeat,radial-gradient(circle,var(--accent) 1.8px,transparent 2.4px) 100% 50%/8px 8px no-repeat;}
.contact-list{position:relative;}
.contact-list::before,.contact-list::after{content:"";position:absolute;width:15px;height:15px;pointer-events:none;background:var(--accent);opacity:.7;}
.contact-list::before{top:8px;left:8px;-webkit-mask:var(--sy-corner) 0 0/100% 100% no-repeat;mask:var(--sy-corner) 0 0/100% 100% no-repeat;}
.contact-list::after{right:8px;bottom:8px;-webkit-mask:var(--sy-corner-r) 0 0/100% 100% no-repeat;mask:var(--sy-corner-r) 0 0/100% 100% no-repeat;transform:scale(-1);}
.empty-state{position:relative;padding-left:34px;}
.empty-state::before{content:"";position:absolute;left:0;top:.35em;width:20px;height:20px;background:var(--accent);opacity:.7;-webkit-mask:var(--sy-corner-dot) center/contain no-repeat;mask:var(--sy-corner-dot) center/contain no-repeat;}
/* Page 404 : même règle de titre et même repère que les pages légales */
.notfound h1{padding-bottom:18px;background:linear-gradient(var(--line),var(--line)) left bottom 3px/100% 1px no-repeat,linear-gradient(var(--accent),var(--accent)) left bottom 2.5px/56px 2px no-repeat,radial-gradient(circle,var(--accent) 1.8px,transparent 2.4px) left 56px bottom .5px/6px 6px no-repeat;}
.notfound h1::before{content:"";display:inline-block;width:30px;height:30px;margin-right:.35em;vertical-align:.1em;background:var(--accent);-webkit-mask:var(--sy-compass) center/contain no-repeat;mask:var(--sy-compass) center/contain no-repeat;}

/* Transition entre pages : l'ancienne page reste affichée jusqu'à ce que la suivante soit prête (fondu court), la navigation ne bouge pas.
   Chrome/Edge, Safari 18.2+ ; ignoré ailleurs sans rien casser. */
@view-transition{navigation:auto;}
.site-nav{view-transition-name:site-nav;}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s;}
::view-transition-group(site-nav){animation:none;}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important;}}