/*
Theme Name: Webmedia Nouveau
Theme URI: https://www.webmedia-next.fr/
Author: Webmedia Next
Description: Design original Webmedia Next, avec contenus et photos modifiables dans WordPress et trois petits pictogrammes pour la charte graphique, la création de site internet et le référencement.
Version: 16.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: webmedia-next-modern
*/
:root{--bg:#081322;--panel:#102139;--text:#f3f7ff;--muted:#a9b9ce;--blue:#3c8dff;--cyan:#48dbdc;--line:#28405b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:#f5f8fd;color:#14263e;line-height:1.65}a{text-decoration:none;color:inherit}.wrap{width:min(1160px,calc(100% - 40px));margin:auto}.site-header{position:sticky;top:0;z-index:100;background:#081322ed;backdrop-filter:blur(18px);border-bottom:1px solid #ffffff24;color:white}.head-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-weight:850;font-size:1.45rem;letter-spacing:-.05em}.brand span{color:var(--cyan)}.nav{display:flex;align-items:center;gap:24px}.nav a{font-size:.92rem;color:#dbe6f5}.nav a:hover{color:var(--cyan)}.btn{display:inline-flex;justify-content:center;align-items:center;padding:13px 23px;border-radius:12px;font-weight:750;background:var(--blue);color:#fff;box-shadow:0 10px 28px #277dfc32;transition:transform .2s,background .2s}.btn:hover{transform:translateY(-2px);background:#2578ef}.btn-outline{background:transparent;border:1px solid #7e9ab7;color:#fff;box-shadow:none}.hero{background:radial-gradient(ellipse at 83% 18%,#17466c 0%,transparent 38%),linear-gradient(135deg,#081322,#102c4c);color:var(--text);padding:100px 0 110px;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:55px;align-items:center}.eyebrow{font-size:.78rem;letter-spacing:.17em;text-transform:uppercase;font-weight:850;color:#52d9e5}.hero h1{font-size:clamp(2.6rem,5.4vw,5rem);line-height:1.09;letter-spacing:-.06em;margin:20px 0}.hero h1 em{font-style:normal;color:#6fe2ed}.hero p{color:#c0d0e3;font-size:1.14rem;max-width:620px}.actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px}.mockup{background:#ffffff0c;border:1px solid #ffffff2a;border-radius:26px;padding:20px;box-shadow:0 35px 80px #0006;transform:rotate(2deg)}.mockup-top{display:flex;gap:7px;margin-bottom:16px}.dot{width:10px;height:10px;border-radius:50%;background:#78a1bf}.mockup-screen{border-radius:15px;background:linear-gradient(130deg,#15578c,#0b213c);padding:35px 25px;min-height:320px}.mockup-screen strong{font-size:2rem;line-height:1.2;display:block}.mockup-screen p{font-size:.9rem}.mini-bars{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:35px}.mini-bars i{height:60px;background:#ffffff20;border:1px solid #ffffff22;border-radius:10px}.trust{background:#e8f2ff;padding:20px 0;color:#2c567f;text-align:center;font-weight:700}.section{padding:90px 0}.section-head{max-width:730px;margin-bottom:38px}.section-head h2{font-size:clamp(2rem,3.8vw,3.2rem);letter-spacing:-.045em;line-height:1.15;margin:10px 0}.section-head p{color:#5a6c80}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.service,.price,.project{border:1px solid #dce5f0;border-radius:20px;background:white;padding:29px;box-shadow:0 14px 38px #10233b0a}.service .symbol{display:grid;place-items:center;background:#e8f4ff;border-radius:15px;width:54px;height:54px;font-size:1.55rem}.service h3,.price h3{font-size:1.28rem;letter-spacing:-.025em}.service p,.price p{color:#5d6e80}.alt{background:#edf3fb}.price .amount{font-size:2.3rem;font-weight:850;letter-spacing:-.05em;color:#0c4076}.price.featured{border:2px solid #3c8dff;transform:translateY(-8px)}.price ul{padding-left:20px;color:#5d6e80;min-height:105px}.price li{margin:8px 0}.price .btn{width:100%}.projects{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.project{padding:0;overflow:hidden}.project-visual{height:220px;background:linear-gradient(135deg,#0a2c51,#35b9cc);display:flex;align-items:center;justify-content:center;color:white;font-size:2rem;font-weight:800;letter-spacing:-.05em}.project-body{padding:23px}.project-body p{color:#607188}.contact{background:linear-gradient(130deg,#0a1b32,#123f67);color:white}.contact .section-head p{color:#b8cee5}.contact-details{display:flex;gap:16px;flex-wrap:wrap}.contact-details a{border:1px solid #ffffff40;border-radius:12px;padding:13px 18px;color:white}.footer{background:#06101e;color:#a6b8cc;padding:28px 0}.foot-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.foot-inner a:hover{color:white}.menu-toggle{display:none;background:transparent;border:1px solid #ffffff50;color:white;border-radius:9px;padding:8px 11px;font-size:1.25rem}main img{max-width:100%;height:auto}.content-page{padding:65px 0;min-height:60vh}.content-page article{background:white;padding:35px;border-radius:20px}.wp-block-image img{border-radius:15px}@media(max-width:850px){.menu-toggle{display:block}.nav{display:none;position:absolute;top:77px;left:0;right:0;background:#081322;flex-direction:column;padding:25px;align-items:stretch}.nav.open{display:flex}.hero-grid{grid-template-columns:1fr}.mockup{max-width:550px}.cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:580px){.wrap{width:min(100% - 28px,1160px)}.hero{padding:65px 0}.section{padding:60px 0}.cards,.projects{grid-template-columns:1fr}.price.featured{transform:none}.hero h1{font-size:2.65rem}.mockup{transform:none}.mockup-screen{min-height:250px}.foot-inner{flex-direction:column}}

/* Version dynamique — transitions accessibles et correctif de débordement */
html,body{max-width:100%;overflow-x:clip} .hero-grid>*{min-width:0}.hero h1{overflow-wrap:break-word}.hero .wrap{position:relative;isolation:isolate}.hero .wrap:before{content:"";position:absolute;z-index:-1;width:340px;height:340px;border-radius:50%;background:#2d91f844;filter:blur(85px);top:-80px;left:-100px;pointer-events:none;animation:glowmove 9s ease-in-out infinite alternate}
.mockup{transform:rotate(2deg);animation:none}.mockup-screen{position:relative;overflow:hidden}.mockup-screen:after{content:"";position:absolute;inset:-100% auto -100% -60%;width:35%;background:linear-gradient(90deg,transparent,#ffffff13,transparent);transform:rotate(22deg);animation:none;pointer-events:none}.mini-bars i{animation:none}.mini-bars i:nth-child(2){animation-delay:.6s}.mini-bars i:nth-child(3){animation-delay:1.2s}
.service,.price,.project{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}.service:hover,.price:hover,.project:hover{transform:translateY(-7px);box-shadow:0 22px 48px #10233b20;border-color:#78b7ff}.price.featured:hover{transform:translateY(-12px)}.service .symbol{transition:transform .35s}.service:hover .symbol{transform:rotate(-8deg) scale(1.1)}.btn{transition:transform .25s,box-shadow .25s,background .25s}.btn:hover{box-shadow:0 16px 34px #277dfc55}.nav a{transition:color .2s}.reveal-ready .reveal-on-scroll{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal-ready .reveal-on-scroll.is-visible{opacity:1;transform:translateY(0)}
@keyframes floatmock{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-14px) rotate(1deg)}}@keyframes glowmove{to{transform:translate(180px,80px)}}@keyframes barpulse{to{background:#6fdfff55;transform:translateY(-5px)}}@keyframes sheen{0%,65%{left:-60%}90%,100%{left:150%}}
@media(max-width:850px){.hero-grid{gap:35px}.mockup{width:100%;max-width:560px}.hero h1{font-size:clamp(2.3rem,8vw,4rem)}}@media(max-width:580px){.mockup{animation:none}.hero{padding:62px 0 75px}.hero h1{font-size:clamp(2.25rem,10vw,3rem)}.mockup-screen{padding:25px 19px}.mockup-screen strong{font-size:clamp(1.45rem,6vw,2rem)}.hero p{font-size:1rem}.actions .btn{max-width:100%;text-align:center}}@keyframes floatmockmobile{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}.reveal-ready .reveal-on-scroll{opacity:1;transform:none}}

/* V3 : trois expertises dans la maquette d’accueil */
.mockup-screen .mini-bars{gap:9px;margin-top:28px}
.mockup-screen .mini-service{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:94px;padding:10px 5px;background:#ffffff1b;border:1px solid #ffffff35;border-radius:12px;color:#f5fbff;text-align:center;font-size:clamp(.63rem,.9vw,.8rem);font-weight:750;line-height:1.22;transition:transform .25s ease,background .25s ease,border-color .25s ease;overflow-wrap:anywhere}
.mockup-screen .mini-service:hover,.mockup-screen .mini-service:focus-visible{transform:translateY(-5px);background:#42bce63a;border-color:#74e6f0;outline-offset:3px}
.mockup-screen .mini-icon{font-size:1.45rem;line-height:1;color:#78e5ef}
@media(max-width:580px){.mockup-screen .mini-bars{gap:6px;margin-top:22px}.mockup-screen .mini-service{min-height:85px;padding:8px 3px;font-size:clamp(.6rem,2.6vw,.75rem)}.mockup-screen .mini-icon{font-size:1.25rem}}
@media(prefers-reduced-motion:reduce){.mockup-screen .mini-service{transition:none}}

/* V6 : design original préservé, pictogrammes seuls dans la fenêtre */
.mockup-screen .mini-bars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:35px}
.mockup-screen .mini-service{display:flex;align-items:center;justify-content:center;min-width:0;height:66px;min-height:66px;padding:12px;border-radius:11px;background:#ffffff20;border:1px solid #ffffff25;color:#83eaf4;transition:transform .2s ease,background .2s ease,border-color .2s ease}
.mockup-screen .mini-service svg{display:block;width:35px;height:35px;max-width:100%}
.mockup-screen .mini-service:hover,.mockup-screen .mini-service:focus-visible{transform:none;background:#43c9ef42;border-color:#83eaf4}
@media(max-width:580px){.mockup-screen .mini-service{height:55px;min-height:55px;padding:8px}.mockup-screen .mini-service svg{width:29px;height:29px}}
@media(prefers-reduced-motion:reduce){.mockup-screen .mini-service{transition:none}}

/* V7 : petits boutons, icônes discrètes, images WordPress éditables */
.mockup-screen .mini-bars{gap:9px;margin-top:26px}
.mockup-screen .mini-service{height:45px;min-height:45px;padding:7px;border-radius:9px;background:#ffffff1a}
.mockup-screen .mini-service svg{width:22px;height:22px}
.mockup-screen .mini-service:hover{transform:none}
.hero-custom-photo{display:block;width:100%;max-height:180px;object-fit:cover;border-radius:10px;margin-bottom:14px}
.project-visual .project-photo{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:580px){.mockup-screen .mini-service{height:42px;min-height:42px}.mockup-screen .mini-service svg{width:20px;height:20px}}


/* V10: menu ancré à la fenêtre, sans recouvrement de la barre d’administration. */
:root{--wmn-header-height:78px}
html{scroll-padding-top:calc(var(--wmn-header-height) + 18px)}
body{padding-top:var(--wmn-header-height)}
body.admin-bar{padding-top:var(--wmn-header-height)}
.site-header{position:fixed!important;inset:0 0 auto 0!important;top:0!important;z-index:999!important;width:100%;margin:0!important;transform:none!important;animation:none!important;transition:none!important}
body.admin-bar .site-header{top:32px!important}
#wpadminbar{z-index:100000!important}
/* Aucune animation ni déplacement de la fenêtre de droite, de ses boutons ou de son reflet. */
.hero .mockup,.hero .mockup:hover,.hero .mockup:focus-within{position:relative!important;top:auto!important;left:auto!important;transform:rotate(2deg)!important;animation:none!important;transition:none!important;will-change:auto!important}
.hero .mockup *, .hero .mockup *::before,.hero .mockup *::after{animation:none!important;transition:none!important}
.hero .mockup-screen::after{display:none!important;content:none!important}
.hero .mockup .mini-service:hover,.hero .mockup .mini-service:focus-visible{transform:none!important}
@media(max-width:782px){body.admin-bar .site-header{top:46px!important}}
@media(max-width:600px){body.admin-bar:not(.wp-admin) .site-header{top:46px!important}}
@media(max-width:580px){.hero .mockup,.hero .mockup:hover,.hero .mockup:focus-within{transform:none!important}}

/* V11 : deux appels à l’action sur une seule ligne en version mobile. */
@media (max-width: 580px) {
  .hero .actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 9px !important;
    width: 100%;
  }
  .hero .actions .btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 12px 7px !important;
    font-size: clamp(0.69rem, 3.05vw, 0.87rem) !important;
    line-height: 1.3 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: normal;
    border-radius: 11px;
  }
}

/* V12 : les deux boutons de l'accueil restent côte à côte sur mobile. */
@media screen and (max-width: 850px) {
  .hero .actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .hero .actions > a.btn {
    display: flex !important;
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 12px 5px !important;
    margin: 0 !important;
    font-size: clamp(10px, 2.8vw, 14px) !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
  }
}

/* V13 : logo transparent entier, sans recadrage, en-tête responsive */
.site-header .brand{display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;line-height:1;max-width:48%}
.site-header .wmn-brand-logo{display:block;width:auto;height:auto;max-height:58px;max-width:min(270px,100%);object-fit:contain;object-position:left center}
@media(max-width:850px){.site-header .brand{max-width:calc(100% - 72px)}.site-header .wmn-brand-logo{max-width:min(250px,100%);max-height:56px}}
@media(max-width:390px){.site-header .wmn-brand-logo{max-width:min(215px,100%);max-height:52px}}

/* V14 : trois réalisations sur ordinateur, empilées sur mobile. */
@media(min-width:851px){.projects{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:581px) and (max-width:850px){.projects{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* V15 : logo légèrement agrandi, sans découpe. */
.site-header .wmn-brand-logo{max-height:68px;max-width:min(315px,100%)}
@media(max-width:850px){.site-header .wmn-brand-logo{max-height:60px;max-width:min(270px,100%)}}
@media(max-width:390px){.site-header .wmn-brand-logo{max-height:55px;max-width:min(230px,100%)}}

/* V16 : logo nettement plus grand, sans recadrage */
.site-header .head-inner{min-height:94px}
.site-header .brand{max-width:42%;flex-shrink:0}
.site-header .wmn-brand-logo{max-height:88px;max-width:min(390px,100%);width:auto;height:auto;object-fit:contain}
@media(max-width:850px){
 .site-header .head-inner{min-height:86px}
 .site-header .brand{max-width:calc(100% - 66px)}
 .site-header .wmn-brand-logo{max-height:78px;max-width:min(330px,100%)}
 .site-header .nav{top:100%}
}
@media(max-width:390px){
 .site-header .wmn-brand-logo{max-height:72px;max-width:min(265px,100%)}
}