/* Tocomeo : feuille de style du site (accueil et mentions légales) */

/* Polices. IBM Plex Sans est préchargée ; les polices des maquettes ne sont téléchargées que lorsqu'un modèle les affiche. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-400-600.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:300;font-display:swap;src:url(../fonts/ibm-plex-sans-italic-latin.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/fraunces-latin.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/fraunces-italic-latin.woff2) format('woff2')}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/anton-latin.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/bodoni-moda-latin.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/bodoni-moda-italic-latin.woff2) format('woff2')}
@font-face{font-family:'Libre Caslon Display';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/libre-caslon-display-latin.woff2) format('woff2')}

:root{--ink:#120E33;--violet:#5825D6;--deep:#3A1F9E;--lav:#F4F3FF;--lav2:#EBE9FE;--line:#E7E2F5;--line2:#CFC9E6;--muted:#4B4670;--soft:#E7E2F5}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#FFFFFF;color:var(--ink);font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;font-size:17px;line-height:1.6}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
h1,h2,h3,h4{font-weight:500;text-wrap:balance}
p,li,dd{text-wrap:pretty}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:8px}
.on-dark :focus-visible{outline-color:#FFFFFF}
section[id],div[id]{scroll-margin-top:24px}

/* Mise en page */
.page{background:#FFFFFF;overflow-x:clip;isolation:isolate}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:24px}
.sec{padding-block:clamp(96px,10vw,152px)}
.lav{background:var(--lav)}
.lav2{background:var(--lav2)}
.on-dark{color:#FFFFFF}
.stack{display:flex;flex-direction:column;gap:var(--g,16px)}
.split{display:flex;flex-wrap:wrap;gap:40px clamp(32px,6vw,72px);align-items:flex-start}
.col{flex:var(--f,1) 1 var(--b,360px);min-width:0}
.head{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(48px,5.5vw,76px);max-width:820px}

/* Typographie */
.t2{font-size:clamp(28px,3.8vw,48px);line-height:1.13;letter-spacing:-.018em}
.t3{font-size:clamp(22px,2.2vw,26px);line-height:1.25}
.lead{font-size:clamp(17px,1.6vw,19px);color:var(--muted)}
.muted{color:var(--muted)}
.nb{white-space:nowrap}
.small{font-size:14px;color:var(--muted)}
.on-dark .lead,.on-dark .muted,.on-dark .small{color:var(--soft)}
/* Liens dans le texte : zone de toucher agrandie sans changer la ligne */
.txt-a{padding-block:10px}

/* Boutons et liens */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border:1px solid transparent;border-radius:999px;font-family:inherit;font-size:16px;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-sm{min-height:44px;padding:0 22px;font-size:15px}
.btn-ink{background:var(--ink);color:#FFFFFF}.btn-ink:hover{background:#2A2266}
.btn-white{background:#FFFFFF;color:var(--ink)}.btn-white:hover{background:var(--lav2)}
.btn:disabled{cursor:progress;opacity:.7;transform:none}
.more{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;text-decoration:none}

/* Menu */
.skip{position:absolute;left:24px;top:-80px;z-index:40;display:flex;align-items:center;min-height:44px;padding:0 18px;border-radius:12px;background:#FFFFFF;color:var(--ink);font-weight:600;box-shadow:0 0 0 2px var(--violet)}
.skip:focus{top:8px}
.nav-wrap{position:relative;z-index:30;padding-top:24px}
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px 32px;padding:10px 12px 10px 24px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.72)}
.nav-logo{display:flex;align-items:center;min-height:44px;flex:none}
.nav-logo img{height:36px;width:auto}
.nav-links{display:flex;gap:4px 28px;font-size:15px;font-weight:600}
.nav-links a{padding:10px 0;text-decoration:none}
.nav-links a:hover{color:var(--violet)}
.nav-cta{white-space:nowrap}
.nav-menu{display:none}
.nav-menu>summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--line2);border-radius:999px;font-size:15px;font-weight:600;cursor:pointer;list-style:none}
.nav-menu>summary::-webkit-details-marker{display:none}
.nav-panel{position:absolute;left:0;right:0;top:calc(100% + 8px);display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:24px;background:#FFFFFF;color:var(--ink);box-shadow:0 0 0 1px var(--line),0 24px 60px -12px rgba(18,14,51,.35)}
.nav-panel a:not(.btn){display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:12px;font-weight:600;text-decoration:none}
.nav-panel a:not(.btn):hover{background:var(--lav)}
.nav-panel .btn{margin-top:8px}
@media (max-width:1000px){.nav-links,.nav-cta{display:none}.nav-menu{display:block}.nav{padding:8px 8px 8px 20px}}

/* Apparitions */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.rise{animation:rise .8s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards}
.rv{transition:opacity .7s ease var(--d,0s),translate .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.rv-pre{opacity:0;translate:0 28px}

/* Lueur qui suit le curseur sur les blocs sombres */
.lueur::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s ease;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(150,120,240,.38),rgba(150,120,240,0) 70%)}
@media (hover:hover){.lueur:hover::after{opacity:1}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5%,3%) scale(1.05)}}

/* ------------------------------------------------------------------ */
/* Haut de page D : « Votre métier » */

.pd{position:relative;isolation:isolate;overflow:hidden;overflow:clip visible;background:#FFFFFF}
.pd-bg{position:absolute;z-index:-1;inset:0;overflow:hidden}
.aura{position:absolute;pointer-events:none;will-change:translate,scale}
.aura-v{left:-10%;width:120%;top:-370px;height:666px;background:radial-gradient(closest-side,rgba(107,77,230,.09),rgba(107,77,230,0));animation:av-x 27s ease-in-out -9s infinite alternate,av-s 19s ease-in-out -4s infinite alternate}
.aura-c{left:54%;width:68%;top:-241px;height:426px;background:radial-gradient(closest-side,rgba(0,222,255,.1),rgba(0,222,255,0));animation:ac-x 33s ease-in-out -14s infinite alternate,ac-s 23s ease-in-out -6s infinite alternate}
@keyframes av-x{from{translate:-6% 0}to{translate:6% 0}}
@keyframes av-s{from{scale:.94 1.08}to{scale:1.08 .92}}
@keyframes ac-x{from{translate:8% 0}to{translate:-24% 0}}
@keyframes ac-s{from{scale:.9 1.12}to{scale:1.16 .9}}
.pd-main{display:grid;grid-template-columns:minmax(0,50fr) minmax(0,50fr);align-items:center;gap:32px;width:100%;padding:clamp(40px,5.4vw,84px) 0 clamp(72px,7.4vw,112px) max(24px,calc((100% - 1240px) / 2 + 24px))}
.pd-txt{display:flex;flex-direction:column;align-items:flex-start}

/* Titre et champ */
.pd-h{margin-top:clamp(40px,4vw,56px);font-size:clamp(38px,4.95vw,74px);line-height:1.1;letter-spacing:-.034em;font-weight:600;color:var(--ink);text-wrap:initial}
.pd-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pd-field{position:relative;display:inline-block;vertical-align:baseline;max-width:100%}
/* Aucun mouvement décoratif ne continue indéfiniment : la classe pd-calme (posée par site.js) fige le tampon (sa rotation seulement) et les lueurs du fond. Le curseur continue de clignoter. */
.pd-calme .aura{animation-play-state:paused}
.pd-calme .tp.on .u-stamp{animation-play-state:paused,running}
.pd-mot{position:relative;display:inline-grid;align-items:center;max-width:100%;font-size:calc(1em * var(--mf,1));margin:0 0 0 -.02em;padding:.02em .26em .06em .2em;border-radius:.2em;background:#FFFFFF;box-shadow:inset 0 0 0 2px var(--violet),0 14px 34px -14px rgba(88,37,214,.5);color:var(--violet);cursor:text;line-height:1.02;font-style:italic;font-weight:300;transition:box-shadow .25s ease}
.pd-v,.pd-mot input{grid-area:1/1;font:inherit;letter-spacing:inherit;line-height:inherit}
.pd-v{white-space:pre;pointer-events:none}
.pd-vt::before{content:attr(data-t)}
.pd-car{display:inline-block;width:.055em;height:.84em;margin-left:.05em;background:var(--violet);vertical-align:-.1em;animation:pd-blink 1.06s steps(1) infinite}
@keyframes pd-blink{0%,55%{opacity:1}56%,100%{opacity:0}}
.pd-mot input{width:0;min-width:100%;padding:0;border:0;outline:0;background:transparent;color:transparent;caret-color:transparent}
.pd-mot input::placeholder{color:var(--violet);opacity:.42}
.pd-mot:not(.edit) input::placeholder{color:transparent}
.pd-mot:hover{background:#F8F7FF}
.pd-mot.edit{box-shadow:inset 0 0 0 3px var(--violet),0 18px 40px -14px rgba(88,37,214,.6)}
.pd-mot.edit .pd-v{visibility:hidden}
.pd-mot.edit input{color:inherit;caret-color:var(--violet)}
.pd-pen{position:absolute;top:-.3em;right:-.3em;z-index:2;display:grid;place-items:center;width:.5em;height:.5em;border-radius:50%;background:var(--violet);color:#FFFFFF;font-style:normal;box-shadow:0 0 0 3px #FFFFFF,0 6px 14px -4px rgba(88,37,214,.6);pointer-events:none;transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s ease}
.pd-pen svg{width:52%;height:52%}
.pd-mot:hover .pd-pen{transform:rotate(-14deg) scale(1.1)}
.pd-mot.edit .pd-pen{opacity:0;transform:scale(.6)}

/* Texte, bouton et lien secondaire */
.pd-sub{margin-top:clamp(20px,1.9vw,26px);max-width:540px;font-size:clamp(18px,1.45vw,20px);line-height:1.5;color:var(--muted)}
.pd-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:clamp(26px,2.5vw,36px)}
.cta{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:16px;min-height:58px;padding:6px 6px 6px 28px;border-radius:999px;background:var(--ink);color:#FFFFFF;font-size:17px;font-weight:600;line-height:1.2;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 30px -16px rgba(18,14,51,.6)}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(150px circle at var(--cx,30%) var(--cy,50%),rgba(150,120,255,.5),rgba(150,120,255,0) 70%),linear-gradient(100deg,#120E33 0%,#2A1A7A 55%,#5825D6 100%);opacity:0;transition:opacity .4s ease}
.cta:hover::before,.cta:focus-visible::before{opacity:1}
.cta i{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#FFFFFF;color:var(--ink);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.cta svg{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.cta:hover i{transform:scale(1.06)}
.cta:hover svg{transform:translateX(3px)}
.pd-alt{flex-basis:100%;margin:0;font-size:15.5px;line-height:1.5;color:var(--muted)}
.pd-cons{padding-block:10px;font-weight:600;color:var(--violet);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(88,37,214,.35);transition:text-decoration-color .25s ease,color .25s ease}
.pd-cons:hover{color:var(--deep);text-decoration-color:currentColor}

/* Boutons de style : sous la maquette, à 12 % de la colonne, pour ne pas chevaucher le petit téléphone */
.pd-under{margin:20px 0 0 12%}
.pd-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14.5px}
.pd-chips button{min-height:36px;padding:0 14px;border:1px solid var(--line2);border-radius:999px;background:rgba(255,255,255,.7);color:var(--ink);font:inherit;font-weight:500;cursor:pointer;transition:background-color .25s ease,border-color .25s ease,color .25s ease}
.pd-chips button:hover{border-color:var(--violet);background:var(--lav)}
.pd-chips button.on{background:linear-gradient(100deg,#120E33,#3A1F9E);border-color:transparent;color:#FFFFFF;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 18px -10px rgba(88,37,214,.7)}

/* Maquette inclinée */
.pd-vis{position:relative;perspective:1900px;perspective-origin:30% 40%;scroll-margin-top:12px;animation:pd-in 1.5s cubic-bezier(.16,1,.3,1) .25s backwards}
@keyframes pd-in{from{opacity:0;translate:90px 40px}to{opacity:1;translate:0 0}}
.pd-tilt{position:relative;width:calc(100% + 6vw);transform-style:preserve-3d;transform:rotateY(calc(12deg + var(--ry,0deg))) rotateX(calc(3deg + var(--rx,0deg)));transform-origin:0 50%;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.pd-br{position:relative;border-radius:16px;overflow:hidden;background:#FFFFFF;box-shadow:0 0 0 1px rgba(127,120,170,.2),0 44px 90px -40px rgba(18,14,51,.42)}
.pd-bar{display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;background:#FFFFFF}
.pd-bar i{width:9px;height:9px;border-radius:50%;background:#D9D2F0}
.pd-bar span{flex:0 1 44%;margin:0 auto;padding:2px 10px;border-radius:999px;background:var(--lav);color:var(--muted);font-size:12.5px;line-height:1.5;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-site{position:relative;aspect-ratio:16/10;container-type:inline-size;overflow:hidden;background:#0B0D12}

/* Modèles : seul le premier est affiché tant que les autres ne sont pas chargés */
.pd:not(.pd-armed) .tp:not(.on){display:none}
.tp{position:absolute;inset:0;color:var(--t);background:var(--bg);font-family:'IBM Plex Sans',system-ui,sans-serif;line-height:normal;clip-path:inset(0 100% 0 0);transition:clip-path 0s linear 1s}
.tp.on{clip-path:inset(0 0 0 0);z-index:2;transition:clip-path 1s cubic-bezier(.76,0,.24,1)}
.tp p{text-wrap:wrap}

/* Univers : hauts de page des maquettes. Tailles en cqw (largeur de .pd-site ou de .pd-ps).
   .mt0 à .mt3 : grande maquette ; .mp0 à .mp3 : petit téléphone. Les noms de classes et d'animations commencent par u-.
   L'animation d'entrée ne démarre que sous .tp.on : elle se rejoue chaque fois qu'un univers devient actif. */
.u-bg,.u-fg{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.u-fg{z-index:2}
.u-sc{position:absolute;inset:0;pointer-events:none}
.u-nav{position:absolute;z-index:4;display:flex;align-items:center;justify-content:space-between}
.u-logo{display:inline-flex;align-items:center;font-family:var(--f);line-height:1;white-space:nowrap}
.u-links{display:flex;white-space:nowrap}
.u-btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;line-height:1;white-space:nowrap}
.u-lk{display:inline-flex;align-items:center;font-weight:600;white-space:nowrap}
.u-tw,.u-copy,.u-body,.u-ph,.u-stamp{position:absolute}
.u-tw{z-index:1}
.u-copy,.u-body,.u-stamp{z-index:3}
.u-tw,.u-body{display:flex;flex-direction:column;align-items:flex-start}
.u-title{display:inline-block;margin:0;font-family:var(--f);white-space:nowrap}
.u-ln{display:block;overflow:hidden;padding:var(--ut) var(--ux) var(--ub);margin:calc(var(--ut) * -1) calc(var(--ux) * -1) calc(var(--ub) * -1)}
.u-ln[hidden]{display:none}
.u-ln>span{display:block}
.u-acts{display:flex;align-items:center}

@keyframes u-zoom{from{transform:scale(1.07)}to{transform:none}}
@keyframes u-fade{from{opacity:0}to{opacity:1}}
@keyframes u-up{from{opacity:0;transform:translateY(var(--uy,1.4cqw))}to{opacity:1;transform:none}}
@keyframes u-line{from{transform:translateY(108%)}to{transform:none}}
@keyframes u-rot{to{rotate:360deg}}
@keyframes u-slide{from{translate:var(--sl,7cqw) 0}to{translate:0 0}}
.tp.on .u-bg,.tp.on .u-fg{animation:u-zoom 7s cubic-bezier(.2,.6,.2,1) both}
.tp.on.mt1 .u-fg,.tp.on.mp1 .u-fg{animation:u-zoom 7s cubic-bezier(.2,.6,.2,1) both,u-slide 1.8s cubic-bezier(.16,1,.3,1) .1s both}
.tp.on .u-nav{animation:u-fade 1s ease .1s both}
.tp.on .u-eb,.tp.on .u-lab{animation:u-up .9s cubic-bezier(.2,.7,.2,1) var(--e1,.15s) both}
.tp.on .u-ln>span{animation:u-line var(--ld,1.15s) cubic-bezier(.2,.75,.15,1) var(--d,0s) both}
.tp.on .u-lead{animation:u-up .9s cubic-bezier(.2,.7,.2,1) .55s both}
.tp.on .u-txt{animation:u-up .9s cubic-bezier(.2,.7,.2,1) var(--e2,.55s) both}
.tp.on .u-acts{animation:u-up .9s cubic-bezier(.2,.7,.2,1) var(--e3,.68s) both}
.tp.on .u-stamp{animation:u-rot 24s linear infinite,u-fade 1.2s ease .9s both}

/* Boulangerie */
.mt0,.mp0{--t:#2B1508;--a:#A8482A;--m:#5B3A22;--f:'Fraunces','Caladea',Georgia,serif;--ut:.05em;--ux:.08em;--ub:.18em}
.mt0 .u-logo,.mp0 .u-logo{font-weight:500;letter-spacing:-.01em}
.mt0 .u-logo svg,.mp0 .u-logo svg{color:var(--a)}
.mt0 .u-eb,.mp0 .u-eb{font-family:var(--f);font-style:italic;color:var(--a)}
.mt0 .u-title,.mp0 .u-title{font-weight:500;letter-spacing:-.035em}
.mt0 .u-btn-fill,.mp0 .u-btn-fill{background:var(--a);color:#FFF4E6}
.mt0 .u-stamp{fill:#6B3A1E}
.mt0 .u-stamp text{font-family:'IBM Plex Sans',sans-serif;font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
/* Garage */
.mt1,.mp1{--t:#FFFFFF;--a:#FF5A1F;--m:#E7DFD9;--f:'Anton','Arial Narrow',Impact,sans-serif;--ut:.05em;--ux:.06em;--ub:.1em}
.mt1 .u-logo,.mp1 .u-logo{letter-spacing:.02em;text-transform:uppercase}
.mt1 .u-logo i,.mp1 .u-logo i{background:var(--a)}
.mt1 .u-eb,.mp1 .u-eb{display:flex;align-items:center;font-weight:600;line-height:1.3;text-transform:uppercase;color:#FFC4A3}
.mt1 .u-eb::before,.mp1 .u-eb::before{content:"";background:var(--a)}
.mt1 .u-title,.mp1 .u-title{letter-spacing:.006em;text-transform:uppercase}
.mt1 .u-ln>span,.mp1 .u-ln>span{background:linear-gradient(180deg,#FFFFFF 35%,rgba(255,255,255,.58));-webkit-background-clip:text;background-clip:text;color:transparent}
.mt1 .u-btn,.mp1 .u-btn{border-radius:2px;letter-spacing:.08em;text-transform:uppercase}
.mt1 .u-btn-fill,.mp1 .u-btn-fill{background:var(--a);color:#160A04}
.mt1 .u-btn-line{box-shadow:inset 0 0 0 1px rgba(255,255,255,.62)}
/* Institut */
.mt2,.mp2{--t:#36191F;--f:'Bodoni Moda','Latin Modern Roman',Georgia,serif;--ld:1.2s;--ut:.06em;--ux:.08em;--ub:.16em}
.mt2 .u-logo,.mp2 .u-logo{font-style:italic}
.mt2 .u-lab,.mp2 .u-lab{display:flex;align-items:center;font-weight:600;letter-spacing:.2em;line-height:1.3;text-transform:uppercase}
.mt2 .u-lab::before,.mp2 .u-lab::before{content:"";height:1px;background:currentColor}
.mt2 .u-title,.mp2 .u-title{letter-spacing:-.022em}
.mt2 .u-btn-fill,.mp2 .u-btn-fill{background:#36191F;color:#FBEBE4}
/* Cabinet */
.mt3,.mp3{--t:#F3ECDF;--a:#C69C6D;--m:#D8D0C4;--f:'Libre Caslon Display','GFS Baskerville',Georgia,serif;--ld:1.2s;--ut:.06em;--ux:.08em;--ub:.14em}
.mt3 .u-logo,.mp3 .u-logo{letter-spacing:.01em}
.mt3 .u-logo i,.mp3 .u-logo i{border:1px solid var(--a);rotate:45deg}
.mt3 .u-eb,.mp3 .u-eb{display:flex;align-items:center;font-weight:500;line-height:1.3;text-transform:uppercase;color:#DAB98F}
.mt3 .u-eb::before,.mp3 .u-eb::before{content:"";height:1px;background:var(--a)}
.mt3 .u-title,.mp3 .u-title{letter-spacing:-.012em}
.mt3 .u-btn,.mp3 .u-btn{border-radius:2px}
.mt3 .u-btn-fill,.mp3 .u-btn-fill{background:var(--a);color:#120D07}
.mt3 .u-btn-line{box-shadow:inset 0 0 0 1px var(--a)}

/* Grande maquette (ordinateur). Le bord droit est coupé par l'écran : la navigation s'arrête à 12cqw du bord.
   Le coin inférieur gauche est caché par le petit téléphone. */
.pd-site .u-nav{left:4.2cqw;right:12cqw;top:2.3cqw;gap:3cqw}
.mt0{--bg:#F3E6D2}
.mt0 .u-sc{background:linear-gradient(90deg,rgba(246,236,221,.7) 0%,rgba(246,236,221,.38) 30%,rgba(246,236,221,0) 52%)}
.mt0 .u-logo{gap:.7cqw;font-size:1.75cqw}
.mt0 .u-logo svg{width:1.8cqw;height:1.8cqw}
.mt0 .u-links{gap:2.5cqw;font-size:1.04cqw;font-weight:500}
.mt0 .u-links span{opacity:.82}
.mt0 .u-btn{height:3.5cqw;padding:0 2.1cqw;border-radius:999px;font-size:1.1cqw}
.mt0 .u-btn-sm{height:2.9cqw;padding:0 1.6cqw;font-size:1cqw}
.mt0 .u-btn-fill{box-shadow:0 .9cqw 2cqw -1cqw rgba(168,72,42,.7)}
.mt0 .u-btn-line{box-shadow:inset 0 0 0 1px currentColor}
.mt0 .u-lk{gap:.6cqw;font-size:1.1cqw}
.mt0 .u-lk svg,.mt2 .u-lk svg,.mt3 .u-lk svg{width:1.1cqw;height:1.1cqw}
.mt0 .u-tw{left:4.2cqw;right:44cqw;top:7.3cqw}
.mt0 .u-eb{margin:0 0 .5cqw;font-size:2.2cqw;line-height:1.3}
.mt0 .u-title{font-size:calc(11.9cqw * var(--k,1));line-height:.98}
.mt0 .u-copy{left:4.2cqw;top:33.4cqw;width:31cqw}
.mt0 .u-txt{margin:0;font-size:1.32cqw;line-height:1.55;color:var(--m)}
.mt0 .u-acts{gap:2.2cqw;margin-top:2.4cqw}
.mt0 .u-stamp{left:38.5cqw;top:45.5cqw;width:11cqw;height:11cqw}

.mt1{--bg:#07090D}
.mt1 .u-sc{background:linear-gradient(180deg,rgba(7,9,13,.6) 0%,rgba(7,9,13,0) 16%,rgba(7,9,13,0) 56%,rgba(7,9,13,.9) 100%)}
.mt1 .u-logo{gap:.8cqw;font-size:1.9cqw}
.mt1 .u-logo i{width:.8cqw;height:1.55cqw}
.mt1 .u-links{gap:2.4cqw;font-size:.92cqw;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.mt1 .u-links span{opacity:.8}
.mt1 .u-btn{height:3.5cqw;padding:0 2.1cqw;font-size:1cqw}
.mt1 .u-btn-sm{height:2.9cqw;padding:0 1.6cqw;font-size:.9cqw}
.mt1 .u-tw{left:4.2cqw;right:12cqw;top:8cqw}
.mt1 .u-eb{gap:1cqw;margin:0 0 1.2cqw;font-size:1cqw;letter-spacing:.24em}
.mt1 .u-eb::before{width:3.4cqw;height:.2cqw}
.mt1 .u-title{font-size:calc(17.4cqw * var(--k,1));line-height:.9}
.mt1 .u-copy{left:15cqw;bottom:3.4cqw;width:34cqw}
.mt1 .u-txt{margin:0;font-size:1.3cqw;line-height:1.55;color:var(--m)}
.mt1 .u-acts{gap:1cqw;margin-top:1.9cqw}

.mt2{--bg:#E9CFC6;--m:#5E3A40;--e1:.45s;--e2:.62s;--e3:.72s}
.mt2 .u-logo{font-size:2.1cqw}
.mt2 .u-links{gap:2.5cqw;font-size:1.02cqw;font-weight:500}
.mt2 .u-links span{opacity:.82}
.mt2 .u-btn{height:3.5cqw;padding:0 2.2cqw;border-radius:999px;font-size:1.1cqw}
.mt2 .u-btn-sm{height:2.9cqw;padding:0 1.7cqw;font-size:1cqw}
.mt2 .u-btn-fill{box-shadow:0 .9cqw 2cqw -1cqw rgba(54,25,31,.6)}
.mt2 .u-lk{gap:.6cqw;font-size:1.1cqw}
.mt2 .u-tw{left:4.2cqw;right:12cqw;top:7.4cqw}
.mt2 .u-title{font-size:calc(12.8cqw * var(--k,1));line-height:1}
.mt2 .u-copy{left:4.2cqw;top:24.6cqw;width:30cqw}
.mt2 .u-lab{gap:1cqw;margin:0 0 1.6cqw;font-size:.86cqw;letter-spacing:.22em}
.mt2 .u-lab::before{width:2.6cqw}
.mt2 .u-lead{margin:0;font-family:var(--f);font-size:2.3cqw;font-style:italic;line-height:1.18}
.mt2 .u-txt{margin:1.4cqw 0 0;font-size:1.2cqw;line-height:1.6;color:var(--m)}
.mt2 .u-acts{gap:2.2cqw;margin-top:2.4cqw}

.mt3{--bg:#000000}
.mt3 .u-sc{background:linear-gradient(90deg,rgba(0,0,0,.66),rgba(0,0,0,.46) 44%,rgba(0,0,0,0) 64%),linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0) 32%)}
.mt3 .u-logo{gap:1cqw;font-size:2.1cqw}
.mt3 .u-logo i{width:.75cqw;height:.75cqw}
.mt3 .u-links{gap:2.5cqw;font-size:.98cqw;font-weight:500;color:var(--m)}
.mt3 .u-links span{opacity:.86}
.mt3 .u-btn{height:3.5cqw;padding:0 2.2cqw;font-size:1.02cqw;letter-spacing:.04em}
.mt3 .u-btn-sm{height:2.9cqw;padding:0 1.6cqw;font-size:.94cqw}
.mt3 .u-lk{gap:.6cqw;font-size:1.05cqw;color:#DAB98F}
.mt3 .u-tw{left:4.2cqw;right:38cqw;top:7.6cqw}
.mt3 .u-eb{gap:1cqw;margin:0 0 1.2cqw;font-size:.98cqw;letter-spacing:.24em}
.mt3 .u-eb::before{width:3.4cqw}
.mt3 .u-title{font-size:calc(13.4cqw * var(--k,1));line-height:.98}
.mt3 .u-copy{left:4.2cqw;top:39.6cqw;width:31cqw}
.mt3 .u-txt{margin:0;font-size:1.3cqw;line-height:1.55;color:var(--m)}
.mt3 .u-acts{gap:2.2cqw;margin-top:2.2cqw}

/* Petit téléphone : même appareil que dans les réalisations (bord régulier, coins concentriques, îlot) */
.pd-ph{position:absolute;left:-9%;bottom:-22%;width:14%;padding:.5%;border-radius:16.6% / 7.95%;background:#0B0920;box-shadow:0 0 0 1px rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.07),0 28px 52px -22px rgba(11,9,32,.5);transform:translateZ(90px);container-type:inline-size}
.pd-ps{--uy:4cqw;position:relative;aspect-ratio:393/852;border-radius:14cqw;overflow:hidden;container-type:inline-size;background:#FFFFFF}
.pd-ps::after{content:"";position:absolute;z-index:3;left:50%;top:2.8cqw;width:31.8cqw;height:9.4cqw;translate:-50% 0;border-radius:999px;background:#000000;pointer-events:none}
.pd-ps .u-nav{left:5.2cqw;right:5.2cqw;top:14cqw;gap:4cqw}
.pd-ps .u-ph{left:0;right:0;top:0;height:124cqw;overflow:hidden}
.pd-ps .u-ph::after{content:"";position:absolute;inset:0;background:var(--ph)}
.pd-ps .u-bg,.pd-ps .u-fg{z-index:auto;object-position:var(--ip)}
.pd-ps .u-body{left:5.2cqw;right:5.2cqw;bottom:5.2cqw}
.pd-ps .u-acts{margin-top:5.6cqw}
.pd-ps .u-btn{height:12.3cqw}

.mp0{--bg:#F5EAD8;--ip:76% 36%;--ph:linear-gradient(180deg,rgba(245,234,216,.72) 0%,rgba(245,234,216,0) 24%,rgba(245,234,216,0) 50%,#F5EAD8 100%)}
.mp0 .u-logo{gap:1.8cqw;font-size:4.6cqw}
.mp0 .u-logo svg{width:5cqw;height:5cqw}
.mp0 .u-eb{margin:0 0 1cqw;font-size:5.4cqw;line-height:1.3}
.mp0 .u-title{font-size:calc(19cqw * var(--k,1));line-height:.98}
.mp0 .u-btn{padding:0 5.8cqw;border-radius:999px;font-size:3.9cqw;box-shadow:0 2.4cqw 5cqw -2.6cqw rgba(168,72,42,.7)}

.mp1{--bg:#07090D;--ip:22% 50%;--sl:12cqw;--ph:linear-gradient(180deg,rgba(7,9,13,.66) 0%,rgba(7,9,13,0) 24%,rgba(7,9,13,0) 50%,#07090D 100%)}
.mp1 .u-logo{gap:2cqw;font-size:5cqw}
.mp1 .u-logo i{width:2.1cqw;height:4.1cqw}
.mp1 .u-eb{gap:2.6cqw;margin:0 0 3cqw;font-size:2.8cqw;letter-spacing:.22em}
.mp1 .u-eb::before{width:8cqw;height:.6cqw}
.mp1 .u-title{font-size:calc(26cqw * var(--k,1));line-height:.88}
.mp1 .u-btn{padding:0 5.4cqw;font-size:3.5cqw}

.mp2{--bg:#CCA096;--m:#4E2C33;--ip:80% 34%;--ph:linear-gradient(180deg,rgba(233,207,198,.6) 0%,rgba(233,207,198,0) 24%,rgba(204,160,150,0) 50%,#CCA096 100%)}
.mp2 .u-logo{font-size:5.6cqw}
.mp2 .u-lab{gap:2.6cqw;margin:0 0 3.4cqw;font-size:2.7cqw}
.mp2 .u-lab::before{width:6.4cqw}
.mp2 .u-title{font-size:calc(23cqw * var(--k,1));line-height:.96}
.mp2 .u-btn{padding:0 5.8cqw;border-radius:999px;font-size:3.9cqw;box-shadow:0 2.4cqw 5cqw -2.6cqw rgba(54,25,31,.6)}

.mp3{--bg:#000000;--ip:72% 12%;--ph:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 46%,#000000 100%)}
.mp3 .u-logo{gap:2.6cqw;font-size:5.6cqw}
.mp3 .u-logo i{width:2cqw;height:2cqw}
.mp3 .u-eb{gap:2.6cqw;margin:0 0 3cqw;font-size:2.7cqw;letter-spacing:.22em}
.mp3 .u-eb::before{width:8cqw}
.mp3 .u-title{font-size:calc(24cqw * var(--k,1));line-height:.96}
.mp3 .u-btn{padding:0 5.6cqw;font-size:3.7cqw;letter-spacing:.04em}

/* Haut de page sur téléphone et tablette : le texte passe avant la maquette (titre, phrase, bouton, lien), puis la maquette à plat, puis les boutons de style.
   .pd-txt disparaît de la mise en page : l'ordre est celui du HTML. */
@media (max-width:900px){
.pd-main{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:12px 24px 40px}
.pd-txt{display:contents}
.pd-vis{margin-top:36px;perspective:none}
.pd-tilt{width:100%;transform:none}
.pd-ph{display:none}
.pd-bar{height:28px;padding:0 10px}
.pd-bar i{width:7px;height:7px}
.pd-bar span{font-size:11px;flex-basis:58%}
.pd-br{border-radius:14px;box-shadow:0 0 0 1px rgba(127,120,170,.2),0 22px 44px -24px rgba(18,14,51,.42)}
/* Maquette allégée : photo et sujet, logo, titre et bouton principal. L'accroche reste dans la mise en page (invisible) pour que le titre garde sa place devant la photo ;
   sa police est remplacée par une police système, sinon le navigateur téléchargerait Fraunces italique pour un texte qu'on ne voit pas (la hauteur ne change pas : l'interligne est un nombre). */
.pd-site .u-links,.pd-site .u-lk,.pd-site .u-lab,.pd-site .u-lead,.pd-site .u-txt,.pd-site .u-stamp,.pd-site .u-btn-sm,.pd-site .u-btn-line{display:none}
.pd-site .u-eb{visibility:hidden;font-family:sans-serif}
.pd-site .u-nav{left:4.2cqw;right:4.2cqw;top:3cqw}
.pd-site .u-logo{gap:1.4cqw;font-size:3.6cqw}
.mt0 .u-logo svg{width:3.6cqw;height:3.6cqw}
.mt1 .u-logo i{width:1.6cqw;height:3.1cqw}
.mt3 .u-logo i{width:1.5cqw;height:1.5cqw}
.pd-site .u-copy{left:4.2cqw;top:auto;bottom:4.2cqw;width:auto}
.pd-site .u-acts{margin-top:0}
.pd-site .u-btn{height:auto;padding:1.9cqw 3.6cqw;font-size:3.1cqw;line-height:1.2}
.pd-under{margin:16px 0 0}
.pd-chips{flex-wrap:nowrap;gap:6px;font-size:14px}
.pd-chips button{flex:1 1 auto;min-height:44px;padding:0 8px}
.pd-h{margin-top:24px;font-size:clamp(30px,9vw,60px)}
.pd-sub{margin-top:24px}
.pd-cta{margin-top:30px}
.pd-car,.pd-pen,.pd-mot input{display:none}
.pd-mot:hover{background:none}
.pd-mot{margin:0;padding:0;border-radius:0;background:none;box-shadow:none;cursor:default}
}
@media (max-width:640px){.aura-v{top:-300px;height:540px}.aura-c{top:-200px;height:350px}}

/* ------------------------------------------------------------------ */
/* Ce que je fais pour vous */

.svs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.sv{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:28px 26px 26px;border:1px solid var(--line);border-radius:24px;background:#FFFFFF;transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease,opacity .7s ease var(--d,0s),translate .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.sv:hover{border-color:var(--line2);box-shadow:0 22px 44px -28px rgba(18,14,51,.35);transform:translateY(-3px)}
.sv-i{display:grid;place-items:center;width:48px;height:48px;margin-bottom:6px;border-radius:14px;background:linear-gradient(135deg,#F4F3FF,#EBE9FE);color:var(--violet);box-shadow:inset 0 0 0 1px rgba(88,37,214,.12)}
.sv .t3{margin:0}
.sv p{margin:0;line-height:1.5}
.sv-a{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:auto;font-size:15px;font-weight:600;color:var(--violet);text-decoration:none}
.sv-a svg{transition:transform .3s ease}
.sv-a:hover svg{transform:translateX(3px)}
@media (max-width:1099px){.svs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.svs{grid-template-columns:minmax(0,1fr);gap:14px}.sv{padding:22px 20px 18px}}

/* ------------------------------------------------------------------ */
/* Comment ça se passe */

.flow{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.st{display:flex;flex-direction:column;--t:4s}
.st-bar{height:3px;margin-bottom:14px;border-radius:2px;background:var(--line2);overflow:hidden}
.st-bar span{display:block;height:100%;background:var(--violet);transform:scaleX(0);transform-origin:left}
.st.done .st-bar span,.st.pin .st-bar span{transform:scaleX(1)}
.st.on:not(.pin) .st-bar span{animation:grow var(--t) linear both}
.scene{position:relative;height:176px;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:18px;border-radius:20px;background:#FFFFFF;box-shadow:0 0 0 1px var(--line);font-size:13px;line-height:1.35;overflow:hidden;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}
.st.on .scene{transform:translateY(-6px);box-shadow:0 0 0 1px var(--line2),0 22px 44px -22px rgba(18,14,51,.38)}
.st-n{margin:20px 0 6px;font-size:15px;font-weight:600;color:var(--violet)}
.st h3{margin-bottom:8px;transition:color .3s ease}
.st.on h3{color:var(--violet)}
/* Étape 1 : la conversation */
.bub{max-width:88%;padding:8px 12px;border-radius:14px}
.b-l{align-self:flex-start;background:var(--lav);border-bottom-left-radius:4px}
.b-r{align-self:flex-end;background:var(--violet);color:#FFFFFF;border-bottom-right-radius:4px}
.reply{position:relative;align-self:flex-end;display:flex;justify-content:flex-end;width:100%}
.typing{position:absolute;right:0;top:50%;display:flex;gap:4px;padding:10px 12px;border-radius:14px;background:var(--lav);opacity:0;translate:0 -50%}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted)}
.st.on .b-l{animation:pop .45s cubic-bezier(.2,.7,.2,1) .2s both}
.st.on .typing{animation:typing 1s ease .75s both}
.st.on .typing i{animation:dot .6s ease-in-out infinite}
.st.on .typing i:nth-child(2){animation-delay:.12s}
.st.on .typing i:nth-child(3){animation-delay:.24s}
.st.on .b-r{animation:pop .45s cubic-bezier(.2,.7,.2,1) 1.75s both}
/* Étape 2 : la proposition */
.s2{gap:0}
.doc-t{margin-bottom:8px;font-size:14px;font-weight:600}
.ln{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-top:1px solid var(--line)}
.ln span{color:var(--muted)}
.ln b{font-weight:600}
.ln.hl b{color:var(--violet)}
.st.on .ln{animation:ln .45s cubic-bezier(.2,.7,.2,1) var(--d) both}
/* Étape 3 : les validations */
.s3{gap:2px}
.ck{display:flex;align-items:center;gap:10px;padding:5px 0}
.ck svg{flex:none;width:24px;height:24px}
.ck circle{fill:var(--violet)}
.ck path{fill:none;stroke:#FFFFFF;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:18;stroke-dashoffset:0}
.st.on .ck circle{animation:ckc .35s ease var(--d) both}
.st.on .ck path{animation:ckp .35s ease calc(var(--d) + .15s) both}
/* Étape 4 : la mise en ligne */
.s4{padding:12px;justify-content:flex-start}
.br{flex:1;display:flex;flex-direction:column;border-radius:12px;box-shadow:0 0 0 1px var(--line);overflow:hidden}
.br-bar{display:flex;align-items:center;gap:4px;height:24px;padding:0 10px;background:var(--lav)}
.br-bar i{width:6px;height:6px;border-radius:50%;background:var(--line2)}
.br-bar span{flex:1;padding-right:26px;font-size:11px;color:var(--muted);text-align:center}
.br-body{position:relative;flex:1;display:flex;flex-direction:column;gap:8px;padding:14px 12px}
.sk{height:8px;border-radius:4px;background:var(--lav2);transform-origin:left}
.st.on .sk{animation:grow .5s cubic-bezier(.2,.7,.2,1) var(--d) both}
.live{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--ink);color:#FFFFFF;font-size:12px;font-weight:500}
.live i{width:7px;height:7px;border-radius:50%;background:#FFFFFF}
.st.on .live{animation:pop .4s cubic-bezier(.2,.7,.2,1) 1.7s both}
.st.on .live i{animation:pulse 1.3s ease-out 2.1s infinite}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes ln{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes typing{0%{opacity:0}15%,85%{opacity:1}100%{opacity:0}}
@keyframes dot{0%,100%{transform:none;opacity:.4}50%{transform:translateY(-3px);opacity:1}}
@keyframes ckc{from{fill:var(--lav2)}to{fill:var(--violet)}}
@keyframes ckp{from{stroke-dashoffset:18}to{stroke-dashoffset:0}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}100%{box-shadow:0 0 0 7px rgba(255,255,255,0)}}
@media (max-width:1099px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.flow{grid-template-columns:minmax(0,1fr);gap:36px}}

/* ------------------------------------------------------------------ */
/* Réalisations */

.bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.prj{display:flex;flex-direction:column;gap:12px;border-radius:24px;padding:clamp(24px,3vw,40px);text-decoration:none;transition:transform .25s ease,opacity .7s ease var(--d,0s),translate .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.prj:hover{transform:translateY(-3px)}
.prj .mk-browser,.prj .mk-phone{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.prj .mk-screen{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.prj:hover .mk-browser{transform:translateY(-.7cqw)}
.prj:hover .mk-phone{transform:translateY(-2cqw) rotate(1.5deg)}
.prj:hover .mk-screen{transform:scale(1.03)}
.more:hover{text-decoration:underline}
.ar{display:inline-block;transition:transform .25s ease}
.prj:hover .ar{transform:translateX(5px)}
.prj-big{grid-column:1/-1;flex-direction:row;align-items:center;gap:clamp(32px,5vw,72px);padding:clamp(28px,4vw,56px)}
.prj-t{flex:5 1 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.prj-v{flex:8 1 0;min-width:0}
.prj-small .prj-v{flex:none;width:100%;margin-bottom:16px}
.c-white{background:#FFFFFF}
/* Carte sombre avec lueur animée */
.glow{position:relative;isolation:isolate;overflow:hidden;background-color:var(--ink);color:#FFFFFF}
.glow p{color:var(--soft)}
.glow::before{content:"";position:absolute;inset:-12%;z-index:-1;pointer-events:none;background-image:radial-gradient(36% 42% at 92% 8%,rgba(0,222,255,.2) 0%,rgba(0,222,255,0) 100%),radial-gradient(70% 80% at 85% 0%,rgba(88,37,214,.9) 0%,rgba(88,37,214,0) 100%);animation:drift2 19s ease-in-out infinite}
/* Navigateur et téléphone : composition à proportions fixes (100cqw = largeur de la scène), identique à toutes les tailles.
   Les captures sont recadrées à l'avance au format exact de leur écran : rien n'est rogné par le navigateur. */
.mk-scene{position:relative;container-type:inline-size;width:100%;aspect-ratio:100/51.5}
.mk-browser{position:absolute;left:0;top:0;width:89cqw;border-radius:1.4cqw;overflow:hidden;background:#FFFFFF;box-shadow:0 0 0 1px rgba(127,120,170,.28),0 3cqw 7cqw -2cqw rgba(11,9,32,.5)}
.mk-bar{display:flex;align-items:center;gap:.6cqw;height:3.4cqw;padding:0 1.3cqw;background:#FFFFFF}
.mk-dot{flex:none;width:.8cqw;height:.8cqw;border-radius:50%;background:#D9D2F0}
.mk-url{flex:0 1 46%;min-width:0;margin:0 auto;padding:0 1cqw;border-radius:999px;background:var(--lav);color:var(--muted);font-size:1.45cqw;line-height:2.2cqw;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-screen{display:block;width:100%;height:auto;aspect-ratio:2/1}
/* Téléphone : bord régulier, coins concentriques, écran 393 × 852 (barre d'état 54 + page 798).
   La barre d'état prend la couleur du haut du site (--sb) et la couleur de texte adaptée (--sbi). */
.mk-phone{position:absolute;right:1cqw;bottom:0;z-index:1;width:19cqw;padding:.8cqw;border-radius:3.25cqw;background:#0B0920;box-shadow:0 0 0 1px rgba(255,255,255,.16),inset 0 0 0 .15cqw rgba(255,255,255,.07),0 3cqw 6cqw -2cqw rgba(11,9,32,.6)}
.mk-view{overflow:hidden;border-radius:2.45cqw;background:#FFFFFF}
.mk-status{display:block;width:100%;height:auto;background:var(--sb,#FFFFFF);color:var(--sbi,#111111)}
.mk-pscreen{display:block;width:100%;height:auto;aspect-ratio:393/798}
@media (max-width:899px){
.bento{grid-template-columns:minmax(0,1fr)}
.prj-big{flex-direction:column;align-items:stretch}
.prj-v{flex:none;width:100%}
}

/* ------------------------------------------------------------------ */
/* Prix */

.reperes{list-style:none;padding:0}
.reperes li{border-top:1px solid var(--line)}
.reperes li:last-child{border-bottom:1px solid var(--line)}
/* Au survol, le fond se remplit et le texte se décale de 16 px vers l'intérieur.
   Le retrait est réservé en permanence (padding) et compensé au repos par un transform : rien ne se recalcule au survol. */
.reperes a{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 24px;padding:22px 16px;text-decoration:none;background:linear-gradient(var(--lav),var(--lav)) no-repeat left/0% 100%;transition:background-size .35s ease}
.reperes a:hover{background-size:100% 100%}
.reperes span{transform:translateX(-16px);transition:transform .35s ease}
.reperes b{margin-left:auto;font-weight:600;white-space:nowrap;transform:translateX(16px);transition:transform .35s ease,color .25s ease}
.reperes a:hover>*{transform:none}
.reperes a:hover b{color:var(--violet)}
@media (max-width:560px){.reperes a{flex-direction:column;align-items:flex-start}.reperes b{margin-left:0;transform:translateX(-16px)}}

/* ------------------------------------------------------------------ */
/* Questions */

.faq{border-top:1px solid #DDD6F3}
.faqs .faq:last-child{border-bottom:1px solid #DDD6F3}
.faq>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:18px 0;font-weight:600;cursor:pointer;list-style:none;transition:color .2s ease}
.faq>summary::-webkit-details-marker{display:none}
.faq>summary:hover{color:var(--violet)}
.faq>summary::after{content:"+";flex:none;width:24px;font-size:24px;font-weight:400;line-height:1;text-align:center;transition:transform .3s ease}
.faq[open]>summary::after{content:"\2212";transform:rotate(180deg)}
.faq>p{max-width:720px;padding-bottom:22px;color:var(--muted)}
@supports (interpolate-size:allow-keywords){
:root{interpolate-size:allow-keywords}
.faq::details-content{block-size:0;overflow:clip;transition:block-size .35s ease,content-visibility .35s allow-discrete}
.faq[open]::details-content{block-size:auto}
}

/* ------------------------------------------------------------------ */
/* Contact et pied de page */

.fin{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:#FFFFFF}
.fin::before{content:"";position:absolute;inset:-10%;z-index:-1;pointer-events:none;background:radial-gradient(70% 72% at 50% 118%,#5825D6 0%,rgba(88,37,214,0) 100%);animation:drift2 20s ease-in-out infinite}
#contact{gap:40px 56px}
.form{display:flex;flex-direction:column;gap:16px}
.fld{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:600}
.inp{width:100%;padding:14px 16px;border:1px solid #7A75A0;border-radius:12px;background:#1E1846;color:#FFFFFF;font-family:inherit;font-size:16px;font-weight:400;line-height:1.4}
.inp:hover{border-color:#CFC9E6}
.inp:focus{outline:2px solid #FFFFFF;outline-offset:1px;border-color:#FFFFFF}
.chk{display:flex;align-items:flex-start;gap:12px;padding-block:6px;font-size:15px;line-height:1.45;cursor:pointer}
.chk input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:#FFFFFF}
.form .btn{align-self:flex-start}
.form-err{padding:12px 16px;border-radius:12px;background:#3A1430;box-shadow:inset 0 0 0 1px #A0507A;font-size:15px;line-height:1.45}
/* Champ piège pour les robots : invisible pour les visiteurs */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sent{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,4vw,40px);border:1px solid #3A3566;border-radius:24px;background:#1E1846}
.sent:focus{outline:none}
.foot-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px;padding-block:24px 32px;border-top:1px solid rgba(207,201,230,.24);font-size:14px;color:var(--soft)}
.foot-end img{height:28px;width:auto}
.foot-end a{display:inline-flex;align-items:center;min-height:44px;color:var(--soft)}
.foot-end a:hover{color:#FFFFFF}
.foot-left{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}

/* ------------------------------------------------------------------ */
/* Mentions légales */

.top{padding-top:28px}
.top a{display:inline-flex;align-items:center;min-height:44px}
.top img{height:36px;width:auto}
.legal{max-width:868px;padding-block:clamp(40px,5vw,64px) clamp(64px,7vw,96px)}
.legal h1{margin-bottom:48px}
.rows{list-style:none;padding:0}
.rows li{display:flex;flex-direction:column;gap:2px;padding:26px 0;border-top:1px solid var(--line)}
.rows li:last-child{border-bottom:1px solid var(--line)}
.rows strong{font-weight:600}
.rows span{color:var(--muted)}
.foot-solo{border-top:0}

/* ------------------------------------------------------------------ */
/* Mouvement réduit : aucune animation ni transition */

@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
.btn:hover,.prj:hover,.sv:hover{transform:none}
}