/*
Theme Name: Services Quoi — Polished
Theme URI: https://servicesquoi.fr/
Author: Services Quoi
Description: A bespoke dark-and-gold Marseille IT / CTO-on-demand theme, inspired by the owner's approved design. Bilingual FR/EN homepage, editable MuCEM hero photograph, project-based service presentation.
Version: 1.8.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: servicesquoi-polished
*/
:root{--charcoal:#272b32;--charcoal-2:#20242b;--ink:#282c34;--cream:#efe8df;--ivory:#f8f4ef;--gold:#d8a160;--gold-2:#efbb74;--muted:#b4b0a9;--line:rgba(232,208,177,.23);--container:1160px;--font-body:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;background:var(--charcoal);color:var(--cream);font-family:var(--font-body);-webkit-font-smoothing:antialiased;font-size:17px;line-height:1.6}img{max-width:100%;height:auto}a{color:inherit;text-decoration:none}button{font:inherit}.container{width:min(calc(100% - 92px),var(--container));margin-inline:auto}.site-header{z-index:100;background:linear-gradient(105deg,#303239,#272a31);border-bottom:1px solid rgba(255,255,255,.025)}.header-inner{display:flex;align-items:center;gap:35px;min-height:120px}.brand{display:flex;flex-direction:column;flex-shrink:0;line-height:1.1;gap:8px}.brand-title{font-size:clamp(30px,3vw,43px);font-weight:700;letter-spacing:-.04em;color:var(--cream)}.brand-tagline{font-family:Arial,sans-serif;letter-spacing:.15em;font-size:11px;font-weight:700;color:var(--gold);white-space:nowrap}.brand-tagline b{padding:0 3px;font-weight:400}.primary-navigation{display:flex;align-items:center;gap:clamp(12px,1.5vw,24px);margin-left:auto;font-size:14px;font-weight:600;white-space:nowrap}.primary-navigation>a{color:#e4dad0;padding:9px 0;position:relative;transition:color .2s}.primary-navigation>a:hover,.primary-navigation>a.current{color:var(--gold-2)}.primary-navigation>a.current:after{content:"";height:2px;position:absolute;bottom:-1px;left:0;right:0;background:var(--gold)}.language-toggle{display:inline-flex;gap:5px;color:#8e9396;font-size:12px}.language-toggle a[aria-current="true"]{color:var(--gold)}.language-toggle a:hover{color:white}.header-contact{padding:6px;border:1px solid var(--gold);flex-shrink:0;min-width:105px;text-align:center;transform:rotate(2deg);transition:transform .2s}.header-contact span{display:block;background:var(--gold-2);color:#313037;font-size:14px;font-weight:700;padding:8px 12px;transform:rotate(-2deg)}.header-contact:hover{transform:rotate(0)}.header-contact:hover span{transform:rotate(0)}.nav-toggle{display:none}.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.screen-reader-text:focus{position:fixed!important;left:10px;top:10px;z-index:2000;width:auto;height:auto;clip:auto;margin:0;background:#fff;color:#111;padding:12px}
.hero{position:relative;min-height:690px;display:flex;align-items:center;background-color:#3a5360;background-image:linear-gradient(90deg,rgba(31,35,42,.97) 0%,rgba(31,35,42,.94) 24%,rgba(31,35,42,.83) 40%,rgba(31,35,42,.41) 62%,rgba(31,35,42,.08) 100%),var(--hero-image);background-size:cover;background-position:center,center 47%;overflow:hidden}.hero:after{content:"";position:absolute;inset:auto 0 0;height:15%;background:linear-gradient(transparent,rgba(25,29,35,.25));pointer-events:none}.hero-inner{position:relative;z-index:1;padding-block:65px 80px;min-height:690px;display:flex;align-items:center}.hero-copy{width:min(100%,750px)}.eyebrow{font-family:Arial,sans-serif;font-weight:700;letter-spacing:.16em;font-size:12px;line-height:1.4;color:var(--gold);text-transform:uppercase}.hero-kicker{margin:0 0 22px}.hero h1{font-family:"Trebuchet MS",Arial,sans-serif;letter-spacing:-.047em;font-size:clamp(43px,5.1vw,72px);font-weight:500;line-height:1.17;margin:0;color:#f2e7da;max-width:770px;text-wrap:balance}.hero-rule{height:2px;width:170px;background:linear-gradient(to right,var(--gold),rgba(216,161,96,.1));margin:30px 0}.hero-description{max-width:570px;color:#efe1d3;font-family:var(--font-body);font-size:clamp(17px,1.8vw,21px);line-height:1.58;font-weight:400;letter-spacing:.006em;margin:0 0 28px}.button{display:inline-flex;justify-content:center;align-items:center;gap:24px;min-height:52px;padding:14px 26px;border:0;font-weight:700;font-size:15px;transition:background .18s,transform .18s}.button-gold{background:var(--gold-2);color:#2d3037}.button:hover{transform:translateY(-2px);background:#f7cc8c}.button span{font-size:21px;line-height:1}.hero-caption{position:absolute;bottom:35px;right:0;font-family:Arial,sans-serif;color:rgba(255,248,240,.83);font-size:12px;letter-spacing:.025em;text-shadow:0 1px 4px #171717}.section{padding:86px 0}.section-label{display:flex;align-items:center;gap:20px;margin-bottom:66px}.section-label span{font-family:Arial,sans-serif;text-transform:uppercase;white-space:nowrap;letter-spacing:.17em;font-size:12px;font-weight:700;color:var(--gold)}.section-label i{display:block;height:1px;flex:1;background:var(--line)}h2,h3,p{margin-top:0}.section-intro{max-width:860px;margin-bottom:40px}.section-intro h2,.rescue-inner h2,.web-layout h2,.pricing-layout h2,.contact-layout h2{font-family:"Trebuchet MS",Arial,sans-serif;font-size:clamp(35px,4vw,55px);font-weight:500;line-height:1.2;letter-spacing:-.04em;margin:18px 0 25px}.section-intro>p:last-child{color:#c7c6c2;max-width:700px;font-family:var(--font-body);font-size:19px}.services-list{border-top:1px solid var(--line)}.service-row{border-bottom:1px solid var(--line);display:grid;grid-template-columns:70px:minmax(260px,.95fr) minmax(260px,1fr);gap:25px;align-items:start;padding:27px 4px}.service-number{font-family:Arial,sans-serif;color:var(--gold);font-size:13px;letter-spacing:.08em}.service-row h3{margin:0;color:#ece3d8;font-size:22px;font-weight:600;line-height:1.3}.service-row p{margin:0;color:#bfc0bc;font-family:var(--font-body);font-size:17px}.service-extra{padding-top:40px;max-width:850px}.service-extra>p:last-child{font-family:var(--font-body);font-size:18px;color:#e8ded5}.section-rescue{background:#eee8df;color:var(--ink)}.section-rescue .section-label i{background:rgba(39,43,50,.18)}.rescue-inner>h2{max-width:850px}.rescue-inner>p:not(.eyebrow){max-width:770px;font-family:var(--font-body);font-size:19px;line-height:1.62;color:#51515a}.rescue-promise{font-weight:700!important;color:#30333a!important}.text-link{display:inline-flex;align-items:center;gap:15px;font-weight:700;color:#9e6633;padding:10px 0;border-bottom:1px solid currentColor;transition:gap .2s}.text-link:hover{gap:23px}.section-web{background:#343940}.web-layout{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:start}.web-layout p:not(.eyebrow){font-family:var(--font-body);color:#e3ded8;font-size:19px}.web-layout .web-note{color:#bebbb7!important;font-size:17px!important}.section-web .text-link{color:var(--gold-2)}.section-pricing{background:#22262d}.pricing-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:center}.pricing-layout>div>p:not(.eyebrow){font-family:var(--font-body);color:#c9c0b6;font-size:19px}.price-panel{padding:30px 0 30px 55px;border-left:1px solid var(--line)}.price{display:flex;flex-direction:column;line-height:1}.price strong{color:var(--gold-2);font-size:clamp(78px,10vw,124px);letter-spacing:-.07em;font-weight:500}.price strong span{font-size:.6em}.price small{color:#e7ddcf;text-transform:uppercase;letter-spacing:.14em;font-size:12px;margin-top:15px}.price-panel p{margin:25px 0 0;color:#cec5bd;font-size:17px;font-family:var(--font-body);max-width:390px}.section-contact{background:#eee8df;color:var(--ink)}.contact-layout{display:grid;grid-template-columns:1.3fr .7fr;gap:110px}.contact-layout h2{max-width:640px}.contact-layout>div>p:not(.eyebrow){font-family:var(--font-body);font-size:19px;color:#54545b;margin-bottom:32px}.contact-facts{border-left:1px solid #c9beb0;padding-left:40px;align-self:center}.contact-facts>div+div{margin-top:34px}.contact-facts .eyebrow{display:block;margin-bottom:10px}.contact-facts a,.contact-facts p{font-family:var(--font-body);font-size:17px;overflow-wrap:anywhere}.site-footer{background:#202329;color:#d1c9be}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:33px;padding-bottom:33px;font-family:Arial,sans-serif;font-size:13px}.footer-inner strong{font-size:16px;color:#eee5da;display:block}.footer-inner span{display:block;color:#a7a6a5;margin-top:6px}.footer-right{display:flex;align-items:center;gap:30px;flex-wrap:wrap}.footer-inner a:hover{color:var(--gold-2)}.interior-page{background:#eee8df;color:#252933;min-height:65vh}.interior-container{padding:95px 0;max-width:870px}.prose h1{font-size:clamp(38px,4vw,60px);line-height:1.2;letter-spacing:-.04em}.prose .entry-content{font-family:var(--font-body);font-size:18px;line-height:1.75}.prose a{color:#9b632d;text-decoration:underline}.prose h2,.prose h3{font-family:"Trebuchet MS",Arial,sans-serif}.prose+.prose{border-top:1px solid #d4c7b9;padding-top:40px;margin-top:40px}*:focus-visible{outline:3px solid var(--gold-2);outline-offset:4px}
@media(max-width:1100px){.container{width:min(calc(100% - 60px),var(--container))}.header-inner{gap:22px}.brand-title{font-size:34px}.primary-navigation{gap:13px;font-size:13px}.brand-tagline{font-size:10px}.hero h1{font-size:clamp(44px,5.4vw,67px)}.header-contact{min-width:85px}}
@media(max-width:860px){.header-inner{min-height:100px}.header-contact{display:none}.nav-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin-left:auto;background:none;border:1px solid rgba(216,161,96,.6);border-radius:3px;width:49px;height:44px;cursor:pointer}.nav-toggle span{width:22px;height:2px;background:var(--gold-2)}.primary-navigation{display:none;position:absolute;top:100px;left:0;right:0;padding:20px 30px 26px;background:#262b32;box-shadow:0 13px 21px rgba(0,0,0,.28);align-items:flex-start;flex-direction:column;gap:10px;white-space:normal}.primary-navigation.is-open{display:flex}.primary-navigation a{font-size:17px}.language-toggle{padding-top:12px}.hero,.hero-inner{min-height:630px}.hero{background-image:linear-gradient(90deg,rgba(31,35,42,.95),rgba(31,35,42,.75) 56%,rgba(31,35,42,.28)),var(--hero-image)}.hero-copy{max-width:690px}.service-row{grid-template-columns:40px 1fr;gap:10px 18px}.service-row p{grid-column:2}.pricing-layout,.contact-layout{gap:45px}.price-panel{padding-left:35px}.web-layout{gap:45px}}
@media(max-width:600px){.container{width:min(calc(100% - 38px),var(--container))}.header-inner{min-height:88px}.brand-title{font-size:31px}.brand-tagline{font-size:9px;letter-spacing:.1em}.primary-navigation{top:88px}.hero{min-height:640px;background-position:center,68% center;background-image:linear-gradient(90deg,rgba(31,35,42,.95),rgba(31,35,42,.83) 65%,rgba(31,35,42,.44)),var(--hero-image)}.hero-inner{min-height:640px;padding-top:52px;padding-bottom:62px}.hero h1{font-size:clamp(41px,10vw,55px);line-height:1.15}.hero-description{font-size:17px;max-width:460px}.hero-rule{margin:25px 0}.hero-kicker{font-size:11px}.hero-caption{right:0;bottom:18px;font-size:10px}.section{padding:62px 0}.section-label{margin-bottom:42px}.section-intro h2,.rescue-inner h2,.web-layout h2,.pricing-layout h2,.contact-layout h2{font-size:36px}.service-row{padding:23px 0}.service-row h3{font-size:20px}.service-row p{font-size:16px}.web-layout,.pricing-layout,.contact-layout{grid-template-columns:1fr;gap:28px}.price-panel{border-left:0;border-top:1px solid var(--line);padding:32px 0 0}.contact-facts{border-left:0;border-top:1px solid #c9beb0;padding:30px 0 0}.footer-inner{display:block}.footer-right{margin-top:18px;gap:12px;flex-direction:column;align-items:flex-start}.rescue-inner>p:not(.eyebrow),.web-layout p:not(.eyebrow){font-size:17px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* Version 1.1 refinements: smaller nav CTA and less aggressive hero image cropping. */
.header-contact{min-width:96px;padding:4px;transform:rotate(1deg)}
.header-contact span{font-size:13px;padding:7px 11px;transform:rotate(-1deg)}
/* Two explicit image layers: the overlay covers the section; the photograph keeps its height. */
.hero.hero-fit{background-position:center, right center;background-size:cover, auto 100%;background-repeat:no-repeat}
.hero.hero-cover{background-position:center, right center;background-size:cover, cover;background-repeat:no-repeat}
@media (max-width:600px){.hero.hero-fit{background-size:cover, auto 88%;background-position:center, 80% center}}

/* 1.2: tidy header only. Keep original polished site's design and structure. */
.header-contact,.header-contact:hover{border:0;transform:none;padding:0;min-width:105px;text-align:center;background:var(--gold-2);border-radius:2px;}
.header-contact span,.header-contact:hover span{transform:none;display:block;background:transparent;padding:10px 18px;color:#313037;font-size:14px;font-weight:700;}
.header-contact:hover{background:#f7cc8c;}
@media(max-width:860px){.header-contact{display:none}}

/* 1.3: readable sans-serif body text; gentler image framing is the default. */


/* 1.8: compact golden-ratio hero. The left 38.2% is a dark reading
   overlay; the MuCEM photo occupies the visual majority to the right.
   The image is photographic, not a separate stacked card or panel. */
.hero.hero-golden {
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:stretch;
  min-height:clamp(650px,50vw,740px);
  height:auto;
  background:#2a3138 !important;
  background-image:none !important;
  overflow:hidden;
}
.hero.hero-golden::before,.hero.hero-golden::after{content:none !important}
.hero-golden .hero-photo {
  position:absolute;
  z-index:10;
  inset:0 0 0 auto;
  display:block;
  width:74%;
  max-width:none;
  height:100%;
  object-fit:cover;
  object-position:center 53%;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.12) 5%,rgba(0,0,0,.48) 13%,#000 23%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.12) 5%,rgba(0,0,0,.48) 13%,#000 23%);
}
.hero-golden .hero-shade {
  display:block !important;
  position:absolute;
  inset:0 auto 0 0;
  width:46%;
  z-index:11;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(42,49,56,.10) 0%,rgba(42,49,56,.06) 52%,rgba(42,49,56,.02) 76%,rgba(42,49,56,0) 100%);
}
.hero-golden .hero-inner {
  position:relative;
  z-index:11;
  margin:0;
  width:100%;
  max-width:none;
  min-height:inherit;
  display:flex;
  align-items:center;
  padding:38px 0 45px max(42px,calc((100vw - 1160px)/2));
}
.hero-golden .hero-copy {
  box-sizing:border-box;
  width:calc(38.2vw - max(42px,(100vw - 1160px)/2) - 14px);
  max-width:475px;
  margin:0;
  padding:0;
}
.hero-golden .hero-kicker {font-size:11px;letter-spacing:.13em;margin:0 0 17px}
.hero-golden h1 {
  max-width:none;
  font-size:clamp(35px,2.78vw,43px);
  font-weight:500;
  line-height:1.13;
  letter-spacing:-.045em;
  text-wrap:pretty;
  margin:0;
}
.hero-golden .hero-rule {width:106px;height:2px;margin:19px 0}
.hero-golden .hero-description {
  max-width:none;
  margin:0 0 22px;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.49;
  font-weight:400;
}
.hero-golden .button {min-height:49px;gap:16px;padding:10px 18px;font-size:14px}
.hero-golden .hero-caption {z-index:12;right:22px;bottom:20px}
@media(max-width:800px){
  /* Narrow viewports have no room for a 38.2%-wide paragraph column.
     Keep the photograph visible as a short banner, followed by the copy. */
  .hero.hero-golden {display:flex;flex-direction:column;min-height:0;height:auto}
  .hero-golden .hero-photo {
    position:relative;order:0;inset:auto;width:100%;height:clamp(340px,70vw,470px);
    object-fit:cover;object-position:center 52%;
    -webkit-mask-image:none;mask-image:none;
  }
  .hero-golden .hero-shade {display:none}
  .hero-golden .hero-inner {
    order:1;min-height:0;width:100%;height:auto;
    display:block;padding:38px max(24px,5vw) 52px;
    background:#242a32;
  }
  .hero-golden .hero-copy {width:100%;max-width:640px}
  .hero-golden h1 {font-size:clamp(35px,5.5vw,45px)}
  .hero-golden .hero-description {font-size:17px;max-width:57ch}
  .hero-golden .hero-caption {top:calc(clamp(340px,70vw,470px) - 29px);right:18px;bottom:auto}
}
@media(max-width:600px){
  .hero-golden .hero-inner {padding:33px 22px 47px}
  .hero-golden h1 {font-size:clamp(34px,8.2vw,43px);line-height:1.12}
  .hero-golden .hero-description {font-size:16px;line-height:1.52}
  .hero-golden .hero-caption {right:12px;font-size:10px}
}
/* Ensure the photo paints above the parent background in Chromium/WebKit. */
.hero-golden .hero-photo{z-index:10 !important}
.hero-golden .hero-shade{display:block !important}