/* My World Agency — vitrine publique. Palette du badge : canard #1E373B, sable #D9B683, crème #F7F0E1. */
@font-face{font-family:"Roboto Slab";src:url(/fonts/RobotoSlab-Variable.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --teal:#1E373B;--teal-deep:#142629;--teal-soft:#2B4A4F;--teal-line:#3B5A5E;
  --sand:#D9B683;--sand-light:#E7C696;--sand-dark:#A98650;--sand-ink:#7A5C2E;
  --cream:#F7F0E1;--paper:#FFFBF2;--paper-2:#F1E8D2;--ink:#1B2B2E;--muted:#5D6D6B;--line:#E1D3B6;
  --serif:"Roboto Slab","Rockwell","Clarendon","Noto Serif Display",Georgia,serif;
  --text-serif:Georgia,"Noto Serif","Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body.vitrine{margin:0;background:var(--cream);color:var(--ink);font:17px/1.7 var(--sans)}
.vitrine h1,.vitrine h2,.vitrine h3,.vitrine h4{font-family:var(--serif);color:var(--teal);line-height:1.2;margin:0 0 .5em;font-weight:600}
.vitrine a{color:var(--teal-soft);text-underline-offset:3px}
.vitrine a:hover{color:var(--sand-ink)}
.v-wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:0;background:var(--sand);color:var(--teal-deep);padding:8px 14px;z-index:100}
.skip:focus{left:8px;top:8px}
img{max-width:100%}

/* ----- En-tête ----- */
.v-top{background:var(--teal);border-bottom:3px solid var(--sand);position:sticky;top:0;z-index:50;box-shadow:0 6px 20px -14px rgba(0,0,0,.6)}
.v-top-inner{display:flex;align-items:center;gap:22px;min-height:76px}
.v-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--cream)!important;font-family:var(--serif);font-size:1.22rem;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;font-weight:500}
.v-brand img{width:52px;height:52px;display:block;border-radius:50%;background:#0a0e10}
.v-brand em{font-style:normal;color:var(--sand)}
.v-nav{display:flex;gap:2px;margin-left:auto;align-items:center}
.v-nav a{color:var(--cream)!important;text-decoration:none;padding:10px 13px;font-family:var(--serif);font-size:.93rem;letter-spacing:.03em;border-bottom:2px solid transparent;white-space:nowrap}
.v-nav a:hover{color:var(--sand)!important}
.v-nav a[aria-current=page]{color:var(--sand)!important;border-bottom-color:var(--sand)}
.v-member{display:inline-flex;align-items:center;gap:8px;background:var(--sand);color:var(--teal-deep)!important;text-decoration:none;font:600 .93rem var(--serif);letter-spacing:.04em;padding:10px 18px;border-radius:3px;border:2px solid var(--sand);white-space:nowrap;box-shadow:inset 0 0 0 2px var(--teal),inset 0 0 0 3px rgba(217,182,131,.55)}
.v-member:hover{background:var(--sand-light);border-color:var(--sand-light);color:var(--teal-deep)!important}
.v-menu{display:none;position:relative}
.v-menu summary{list-style:none;cursor:pointer;color:var(--cream);font:500 .9rem var(--serif);letter-spacing:.05em;border:1px solid var(--teal-line);border-radius:3px;padding:9px 14px;text-transform:uppercase}
.v-menu summary::-webkit-details-marker{display:none}
.v-menu[open] summary{border-color:var(--sand);color:var(--sand)}
.v-menu-panel{position:absolute;right:0;top:calc(100% + 12px);background:var(--teal);border:1px solid var(--sand-dark);border-top:3px solid var(--sand);min-width:230px;padding:8px 0;box-shadow:0 18px 36px -12px rgba(0,0,0,.6)}
.v-menu-panel a{display:block;color:var(--cream)!important;text-decoration:none;padding:11px 20px;font-family:var(--serif)}
.v-menu-panel a:hover,.v-menu-panel a[aria-current=page]{background:rgba(255,255,255,.07);color:var(--sand)!important}

/* ----- Boutons ----- */
.v-btn{display:inline-block;background:var(--sand);color:var(--teal-deep)!important;border:2px solid var(--sand);padding:12px 26px;border-radius:3px;font:600 1rem var(--serif);letter-spacing:.04em;text-decoration:none!important;cursor:pointer;transition:background .15s}
.v-btn:hover{background:var(--sand-light);border-color:var(--sand-light)}
.v-btn.ghost{background:transparent;color:var(--sand)!important}
.v-btn.ghost:hover{background:rgba(217,182,131,.14);color:var(--sand-light)!important}
.tone-clair .v-btn.ghost,.tone-papier .v-btn.ghost{color:var(--teal)!important;border-color:var(--teal)}
.tone-clair .v-btn.ghost:hover,.tone-papier .v-btn.ghost:hover{background:rgba(30,55,59,.07)}
.tone-clair .v-btn:not(.ghost),.tone-papier .v-btn:not(.ghost){background:var(--teal);border-color:var(--teal);color:var(--sand)!important}
.tone-clair .v-btn:not(.ghost):hover,.tone-papier .v-btn:not(.ghost):hover{background:var(--teal-soft);border-color:var(--teal-soft);color:var(--sand-light)!important}
.v-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.vitrine :focus-visible{outline:3px solid rgba(217,182,131,.9);outline-offset:2px}

/* ----- Bandeaux brouillon / aperçu ----- */
.draft-banner{background:repeating-linear-gradient(135deg,#F3E3C3 0 14px,#EBD5A8 14px 28px);border-bottom:2px solid var(--sand-dark);color:var(--teal-deep);text-align:center;padding:10px 20px;font:600 .92rem var(--serif);letter-spacing:.02em}
.preview-banner{position:sticky;top:0;z-index:60;background:var(--sand-light);color:var(--teal-deep);border-bottom:2px solid var(--teal);padding:8px 20px;font:600 .9rem var(--serif);display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap;text-align:center}
.preview-banner a{color:var(--teal)!important}
.preview-banner ~ .v-top{top:41px}

/* ----- Marqueur « à compléter » ----- */
mark.todo{background:#F6DFA8;color:#5A3E10;border:1px dashed var(--sand-ink);border-radius:3px;padding:1px 7px;font:600 .9em var(--sans);font-style:normal;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.tone-canard mark.todo{background:rgba(217,182,131,.22);color:var(--sand-light);border-color:var(--sand)}

/* ----- Sections ----- */
.v-sec{padding:84px 0;position:relative}
.tone-clair{background:var(--cream)}
.tone-papier{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tone-canard{background:var(--teal);color:#E6DCC4}
.tone-canard h2,.tone-canard h3,.tone-canard h4{color:var(--cream)}
.tone-canard a{color:var(--sand)}
.tone-canard a:hover{color:var(--sand-light)}
.v-head{max-width:760px;margin:0 auto 46px;text-align:center}
.v-head.left{margin-left:0;text-align:left}
.eyebrow{margin:0 0 12px;color:var(--sand-ink);text-transform:uppercase;letter-spacing:.26em;font:600 .78rem var(--serif)}
.tone-canard .eyebrow,.hero .eyebrow,.pagehead .eyebrow{color:var(--sand)}
.v-head h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin-bottom:.35em}
.orn{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px auto 0;color:var(--sand-dark);max-width:240px}
.orn::before,.orn::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--sand-dark))}
.orn::after{transform:scaleX(-1)}
.orn i{width:9px;height:9px;transform:rotate(45deg);background:var(--sand);display:block;box-shadow:0 0 0 3px var(--cream),0 0 0 4px var(--sand-dark)}
.tone-papier .orn i{box-shadow:0 0 0 3px var(--paper-2),0 0 0 4px var(--sand-dark)}
.tone-canard .orn i{box-shadow:0 0 0 3px var(--teal),0 0 0 4px var(--sand)}
.v-head.left .orn{margin-left:0;justify-content:flex-start}
.v-head.left .orn::before{display:none}
.lead{font:italic 1.2rem/1.65 var(--text-serif);color:var(--teal-soft)}
.tone-canard .lead{color:#E9DDC0}
.v-head .lead{margin:14px 0 0}
.prose p{margin:0 0 1.05em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.3em}
.prose li{margin:.4em 0}
.prose h3{font-size:1.35rem;margin:1.6em 0 .5em}
.prose h3:first-child{margin-top:0}
.prose h4{font-size:1.1rem;margin:1.2em 0 .4em}
.prose>:last-child{margin-bottom:0}
.prose.center{text-align:center}
.prose-wide{max-width:780px;margin:0 auto}

/* ----- Bannière d'accueil ----- */
.hero{position:relative;background:var(--teal);color:var(--cream);overflow:hidden;border-bottom:3px solid var(--sand)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 110% at 78% 50%,rgba(217,182,131,.2),transparent 70%),linear-gradient(120deg,var(--teal-deep),var(--teal) 62%)}
.hero-art{position:absolute;inset:0;width:100%;height:100%}
.grain{position:absolute;inset:0;width:100%;height:100%;opacity:.16;mix-blend-mode:screen;pointer-events:none}
.hero-frame{position:absolute;inset:18px;border:1px solid rgba(217,182,131,.45);pointer-events:none}
.hero-frame::after{content:"";position:absolute;inset:5px;border:1px solid rgba(217,182,131,.2)}
.hero-inner{position:relative;max-width:1120px;margin:0 auto;padding:96px 24px 100px;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:40px}
.hero h1{font-size:clamp(2.6rem,6vw,4.6rem);text-transform:uppercase;letter-spacing:.07em;color:var(--cream);margin:0 0 22px;text-shadow:0 2px 0 rgba(0,0,0,.28);font-weight:600}
.hero .lead{font-size:1.32rem;color:#F1E6CB;margin:0 0 .7em;font-style:italic}
.hero .sub{font-size:1.05rem;color:#CBBF9F;margin:0}
.hero .prose p:first-child{font:italic 1.32rem/1.6 var(--text-serif);color:#F1E6CB}
.hero .prose p:not(:first-child){color:#CDBF9E;font-size:1.05rem}
.hero-logo{display:flex;justify-content:center}
.hero-logo img{width:min(400px,100%);height:auto;filter:drop-shadow(0 18px 34px rgba(0,0,0,.5))}
.hero-logo img.logo-mark{border-radius:50%;background:#0a0e10;filter:none;box-shadow:0 0 0 2px rgba(217,182,131,.55),0 16px 28px rgba(0,0,0,.4)}

/* ----- En-tête de page ----- */
.pagehead{position:relative;background:var(--teal);color:var(--cream);border-bottom:3px solid var(--sand);overflow:hidden}
.pagehead::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 140% at 90% 40%,rgba(217,182,131,.18),transparent 70%),linear-gradient(120deg,var(--teal-deep),var(--teal) 65%)}
.pagehead .hero-art{opacity:.8}
.pagehead-inner{position:relative;max-width:1120px;margin:0 auto;padding:72px 24px 70px}
.pagehead h1{font-size:clamp(2rem,4.6vw,3.2rem);color:var(--cream);letter-spacing:.04em;margin:0 0 14px;max-width:820px}
.pagehead .lead{color:#E9DDC0;max-width:720px;margin:0;font-size:1.18rem}
.pagehead .lead p{margin:0 0 .6em}

/* ----- Cartes / étapes / FAQ ----- */
.cards{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cards.three{grid-template-columns:repeat(3,1fr)}
.v-card{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--sand);border-radius:3px;padding:30px 28px 28px;box-shadow:0 1px 0 rgba(30,55,59,.05),0 18px 30px -24px rgba(30,55,59,.5);position:relative}
.tone-papier .v-card{background:var(--paper)}
.v-card h3{font-size:1.28rem;margin:0 0 .6em}
.v-card .num{font:600 .8rem var(--serif);letter-spacing:.2em;color:var(--sand-ink);text-transform:uppercase;display:block;margin-bottom:10px}
.v-card .prose{font-size:.98rem;color:#2E4044}
.v-card .prose p{margin-bottom:.8em}
.steps{counter-reset:s;display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.step{position:relative;padding:0 6px;text-align:center}
.step::before{counter-increment:s;content:counter(s);display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;margin:0 auto 18px;border:2px solid var(--sand-dark);background:var(--paper);color:var(--teal);font:600 1.5rem var(--serif);box-shadow:0 0 0 5px var(--paper-2),0 0 0 6px var(--sand-dark)}
.step h3{font-size:1.15rem}
.step .prose{font-size:.97rem;color:#2E4044}
.faq{max-width:820px;margin:0 auto}
.faq details{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--sand);border-radius:3px;margin-bottom:14px}
.faq summary{cursor:pointer;list-style:none;padding:20px 56px 20px 24px;font:600 1.1rem/1.4 var(--serif);color:var(--teal);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:1px solid var(--sand-dark);border-radius:50%;text-align:center;line-height:25px;font:400 1.3rem var(--sans);color:var(--sand-ink)}
.faq details[open] summary::after{content:"–"}
.faq details[open]{border-left-color:var(--teal)}
.faq .answer{padding:0 24px 22px}
.plain-list{max-width:780px;margin:0 auto;display:grid;gap:18px}
.plain-list h3{font-size:1.15rem;margin-bottom:.3em}

/* ----- Texte + image ----- */
.split{display:grid;gap:56px;align-items:center;grid-template-columns:1.2fr .8fr}
.split.left{grid-template-columns:.8fr 1.2fr}
.split.left .split-img{order:-1}
.split-img{display:flex;justify-content:center}
.split-img img{width:min(340px,100%);height:auto;filter:drop-shadow(0 14px 22px rgba(20,38,41,.35))}
.split-img img.logo-mark{border-radius:50%;background:#0a0e10;filter:none;box-shadow:0 0 0 2px rgba(217,182,131,.45),0 12px 22px rgba(20,38,41,.3)}

/* ----- Galerie ----- */
.gallery{display:grid;gap:22px;grid-template-columns:repeat(4,1fr);margin:0;padding:0;list-style:none}
.gallery li{margin:0}
.shot{display:block;text-decoration:none;background:var(--cream);padding:9px 9px 12px;border-radius:2px;box-shadow:0 18px 30px -16px rgba(0,0,0,.65),0 0 0 1px rgba(217,182,131,.7);transition:transform .2s}
.shot:hover{transform:translateY(-4px)}
.shot img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:#111}
.shot span{display:block;color:var(--teal)!important;font:500 .85rem var(--serif);letter-spacing:.05em;text-align:center;padding-top:9px}
.gallery-cta{text-align:center}

/* ----- CTA ----- */
.cta{text-align:center;padding:78px 0}
.cta h2{font-size:clamp(1.7rem,3.2vw,2.3rem)}
.cta .prose{max-width:620px;margin:0 auto}
.cta .v-btns{justify-content:center}
.cta .frame{max-width:860px;margin:0 auto;padding:46px 30px;border:1px solid rgba(217,182,131,.5);position:relative}
.cta .frame::after{content:"";position:absolute;inset:6px;border:1px solid rgba(217,182,131,.22);pointer-events:none}
.tone-clair .cta .frame,.tone-papier .cta .frame{border-color:var(--sand-dark)}

/* ----- Annonces publiques ----- */
.news{display:grid;gap:22px;max-width:860px;margin:0 auto}
.news article{background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--teal);padding:24px 28px;border-radius:3px}
.news h3{margin:0 0 4px;font-size:1.3rem}
.news time{color:var(--muted);font-size:.85rem}
.news .prose{margin-top:12px}

/* ----- Formulaire de contact ----- */
.contact-grid{display:grid;gap:50px;grid-template-columns:.8fr 1.2fr;align-items:start}
.contact-card{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--sand);border-radius:3px;padding:34px 34px 30px;box-shadow:0 22px 34px -26px rgba(30,55,59,.6)}
.vitrine label{display:block;font:600 .9rem var(--serif);margin:16px 0 6px;color:var(--teal);letter-spacing:.02em}
.vitrine label small{font:400 .8rem var(--sans);color:var(--muted)}
.vitrine input[type=text],.vitrine input[type=email],.vitrine textarea,.vitrine select{width:100%;padding:12px 14px;border:1px solid #CDBE9E;border-radius:3px;background:#fff;font:inherit;font-size:1rem;color:var(--ink)}
.vitrine textarea{min-height:170px;resize:vertical}
.vitrine input:focus,.vitrine textarea:focus,.vitrine select:focus{outline:3px solid rgba(217,182,131,.7);outline-offset:1px;border-color:var(--sand-dark)}
.contact-card .v-btn{margin-top:22px;background:var(--teal);border-color:var(--teal);color:var(--sand)!important}
.contact-card .v-btn:hover{background:var(--teal-soft);border-color:var(--teal-soft)}
.contact-card .v-btn[disabled]{opacity:.5;cursor:not-allowed}
.hp{position:absolute!important;left:-5000px!important;width:1px;height:1px;overflow:hidden}
.v-flash{padding:14px 18px;border-radius:3px;margin-bottom:18px;border-left:5px solid;font-weight:600}
.v-flash.ok{background:#EFE5CC;border-color:var(--sand-dark);color:var(--teal-deep)}
.v-flash.err{background:#F1DDD0;border-color:#8A3B2A;color:#4D1D12}
.v-flash ul{margin:6px 0 0;padding-left:1.2em;font-weight:400}

/* ----- Pied de page ----- */
.v-foot{background:var(--teal-deep);color:#BFB192;border-top:3px solid var(--sand);font-size:.92rem}
.v-foot a{color:#E6DCC4;text-decoration:none}
.v-foot a:hover{color:var(--sand)}
.foot-grid{display:grid;gap:40px;grid-template-columns:1.4fr 1fr 1fr 1fr;padding:56px 24px 40px}
.foot-brand{display:flex;align-items:center;gap:14px;color:var(--cream);font:500 1.1rem var(--serif);letter-spacing:.07em;text-transform:uppercase;margin-bottom:12px}
.foot-brand img{width:56px;height:56px;border-radius:50%;background:#0a0e10}
.foot-brand em{font-style:normal;color:var(--sand)}
.v-foot h4{font:600 .78rem var(--serif);letter-spacing:.22em;text-transform:uppercase;color:var(--sand);margin:0 0 14px}
.v-foot ul{list-style:none;margin:0;padding:0}
.v-foot li{margin:8px 0}
.foot-bottom{border-top:1px solid rgba(217,182,131,.22);padding:20px 24px 26px;text-align:center;font-size:.82rem;line-height:1.65;max-width:1120px;margin:0 auto}
.foot-bottom p{margin:0 0 6px}
.foot-bottom .badge-preview{display:inline-block;border:1px solid var(--sand-dark);color:var(--sand);padding:1px 10px;border-radius:99px;font:600 .74rem var(--serif);letter-spacing:.12em;text-transform:uppercase;margin-left:6px}
.foot-bottom mark.todo{font-size:.95em}

/* ----- Adaptation ----- */
@media (max-width:1020px){
  .v-nav{display:none}
  .v-menu{display:block;margin-left:auto}
  .v-top-inner{gap:12px}
  .v-brand{font-size:1.05rem}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .cards.three{grid-template-columns:1fr}
}
@media (max-width:820px){
  body.vitrine{font-size:16.5px}
  .hero-inner{grid-template-columns:1fr;padding:56px 22px 60px;text-align:center}
  .hero-logo{order:-1}
  .hero-logo img{width:min(250px,64vw)}
  .hero .v-btns{justify-content:center}
  .hero-frame{inset:10px}
  .v-sec{padding:60px 0}
  .split,.split.left,.contact-grid{grid-template-columns:1fr;gap:34px}
  .split.left .split-img{order:0}
  .foot-grid{grid-template-columns:1fr 1fr;padding-top:42px}
  .foot-grid>div:first-child{grid-column:1/-1}
  .pagehead-inner{padding:52px 22px 50px}
  .cta .frame{padding:36px 20px}
  .contact-card{padding:24px 20px}
}
@media (max-width:560px){
  .v-wrap{padding:0 18px}
  .v-brand span{display:none}
  .v-member{padding:9px 13px;font-size:.88rem}
  .v-top-inner{min-height:68px}
  .v-brand img{width:46px;height:46px}
  .gallery{gap:14px}
  .foot-grid{grid-template-columns:1fr}
}

.v-video{margin:28px auto 0;max-width:min(100%,420px)}
.v-video video{display:block;width:100%;height:auto;border-radius:14px;background:#1E373B;vertical-align:middle}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.shot{transition:none}}
.v-btns.center{justify-content:center}
.hero .v-btn{padding:12px 20px;font-size:.95rem}
.hero .v-btns{gap:12px}