/*
Theme Name: Hiko Print
Description: Vitrine de l’imprimerie Hiko Print à Casablanca, avec catalogue et demande de devis.
Author: Hiko Print
Version: 1.3.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: hiko-print
*/

:root{--navy:#112251;--deep:#14275e;--blue:#1747ba;--text:#18254a;--muted:#526078;--line:#dfe6f2;--paper:#f7f9fd;--yellow:#ffdc63;--white:#fff;--font:Arial,Helvetica,sans-serif;color:var(--text);font-family:var(--font);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background:var(--paper)}
html{scroll-behavior:smooth}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:780}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #356bda;outline-offset:4px}
.wrap{width:min(1232px,calc(100% - 88px));margin-inline:auto}
section[id]{scroll-margin-top:22px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;z-index:9;top:8px;left:8px;padding:10px;background:white;transform:translateY(-180%)}
.skip:focus{transform:none}
.symbol-bank{width:0;height:0;position:absolute}
.icon{width:18px;height:18px;flex:none;display:inline-block;stroke:currentColor;stroke-width:1.65;fill:none;stroke-linejoin:round;stroke-linecap:round;vertical-align:middle}
header{background:white}
.topbar{background:var(--deep);color:#f4f7ff;font-size:12px;letter-spacing:.015em}
.topbar-inner{min-height:32px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.topbar span,.topbar a{display:flex;align-items:center;gap:7px}
.topbar-contacts{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:4px 16px;min-width:0}
.topbar-contacts a{overflow-wrap:anywhere}
.topbar-contacts a[href^="tel:"]{white-space:nowrap}
.topbar .icon{width:14px;height:14px;color:#ffdf74}
.masthead{height:86px;display:grid;grid-template-columns:1fr auto 1fr;gap:25px;align-items:center}
.brand{width:max-content}
.brand img{width:102px;height:auto;max-height:64px;object-fit:contain;object-position:left center}
.masthead nav{display:flex;align-items:center;justify-content:center;gap:31px}
.masthead nav a{font-size:14px;font-weight:700;white-space:nowrap}
.masthead nav a:hover,.topbar a:hover{text-decoration:underline;text-underline-offset:5px}
.button{min-height:43px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 15px;border:1px solid transparent;border-radius:8px;line-height:1.2;font-size:14px;font-weight:750;text-align:center}
.primary{color:#fff;background:var(--blue)}
.primary:hover{background:#0f3594}
.header-cta{justify-self:end}
.bright{background:var(--yellow);color:#152651}
.bright:hover{background:#f6c83d}
.secondary{color:var(--blue);background:white;border-color:var(--line)}
.secondary:hover{background:#ebf1ff}
.overline{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:800;letter-spacing:.17em}
.light{color:#d9e4ff}
.cmyk{display:flex;gap:4px;align-items:center}
.cmyk i{width:7px;height:7px;border-radius:50%;background:#69cef0}
.cmyk i:nth-child(2){background:#f17ab6}
.cmyk i:nth-child(3){background:#ffdb67}
.hero-offers {
  --offer-inset: clamp(22px,4.2vw,58px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 25px;
  background: var(--deep);
  border-radius: 20px;
  color: white;
}
.offer-slides {
  display: grid;
  grid-template-areas: "offer";
  touch-action: pan-y pinch-zoom;
}
.offer-slide {
  grid-area: offer;
  display: grid;
  grid-template-columns: minmax(0,.96fr) minmax(0,1.04fr);
  min-height: clamp(372px,34vw,470px);
  background: radial-gradient(ellipse at 4% 100%,#2d51a0,var(--deep) 67%);
}
.offer-slide:nth-child(2) {
  background: radial-gradient(ellipse at 4% 100%,#583b7f,#242453 67%);
}
.offer-slide:nth-child(3) {
  background: radial-gradient(ellipse at 4% 100%,#1e6170,#13364d 67%);
}
.offer-slide[inert] { visibility: hidden; }
.offer-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: clamp(24px,3.7vw,50px) var(--offer-inset) 88px;
}
.offer-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #ffe39459;
  background: #ffe39414;
  color: #ffe394;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.offer-kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--yellow);
}
.offer-copy h3 {
  font-size: clamp(34px,4.55vw,68px);
  line-height: .99;
  letter-spacing: -.055em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.offer-description {
  max-width: 42ch;
  color: #e7edff;
  font-size: clamp(14px,1.45vw,17px);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.offer-highlight {
  color: var(--yellow);
  font-size: clamp(20px,2.2vw,31px);
  line-height: 1.15;
  font-weight: 780;
  overflow-wrap: anywhere;
}
.offer-cta { max-width: 100%; min-height: 43px; overflow-wrap: anywhere; }
.offer-media { position: relative; background: #e4e7f3; }
.offer-media img,.intro-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.offer-nav {
  position: absolute;
  bottom: 23px;
  left: var(--offer-inset);
  display: flex;
  align-items: center;
  gap: 10px;
}
.offer-nav button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #ffffff59;
  background: #ffffff12;
  color: white;
}
.offer-nav button:hover { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }
.offer-nav button[data-offer-step="-1"] .icon { transform: rotate(180deg); }
.offer-nav button:focus-visible,.offer-cta:focus-visible { outline-color: var(--yellow); }
#offer-count { color: #edf2ff; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .offer-slide:not([inert]) { animation: offer-appear .24s ease-out; }
  @keyframes offer-appear { from { opacity: .68; } to { opacity: 1; } }
}
.home-intro {
  display: grid;
  grid-template-columns: minmax(0,1fr) clamp(145px,21vw,260px);
  gap: clamp(16px,3vw,38px);
  margin-top: 16px;
  padding: clamp(16px,2.15vw,28px);
  border: 1px solid var(--line);
  border-radius: 13px;
  background: white;
}
.intro-overline { color: #3151a4; }
.home-intro h1 { margin: 7px 0 5px; font-size: clamp(22px,3vw,37px); line-height: 1.08; letter-spacing: -.055em; overflow-wrap: anywhere; }
.home-intro h1 em { color: var(--blue); font-style: normal; }
.intro-copy { max-width: 65ch; font-size: 14px; line-height: 1.55; color: var(--muted); }
.intro-link { display: inline-flex; align-items: center; gap: 6px; padding-block: 5px; margin-top: 5px; color: var(--blue); font-size: 13px; font-weight: 750; }
.intro-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.intro-media { position: relative; overflow: hidden; min-height: 108px; border-radius: 9px; background: #2148bc; }
.image-stamp { position: absolute; right: 8px; bottom: 8px; background: #fffdf5; color: #18244b; padding: 6px 8px; border-radius: 5px; font-size: 8px; font-weight: 800; letter-spacing: .09em; display: flex; gap: 5px; align-items: center; }
.image-stamp span { width: 5px; height: 5px; background: #e36b92; border-radius: 50%; }
@media (max-width: 610px) {
  .hero-offers { --offer-inset: clamp(17px,5vw,32px); margin-top: 13px; border-radius: 13px; }
  .offer-slide { grid-template-columns: minmax(0,1fr); grid-template-rows: auto 1fr; min-height: 0; }
  .offer-media { grid-row: 1; height: clamp(174px,56vw,288px); }
  .offer-copy { gap: 10px; padding-top: 20px; padding-bottom: 73px; }
  .offer-copy h3 { font-size: clamp(32px,8.5vw,49px); }
  .offer-nav { bottom: 16px; }
  .offer-nav button { width: 40px; height: 40px; }
  .home-intro { grid-template-columns: minmax(0,1fr); gap: 13px; }
  .intro-media { min-height: 118px; }
}
.feature-strip{display:grid;grid-template-columns:repeat(3,1fr);background:white;border:1px solid var(--line);border-radius:12px;margin-top:15px}
.feature-strip a{display:flex;gap:12px;align-items:center;padding:14px 17px}
.feature-strip a+a{border-left:1px solid var(--line)}
.feature-strip a:hover{background:#f0f5ff}
.feature-icon{width:40px;height:40px;border-radius:9px;display:grid;place-items:center;flex:none;color:#223d84}
.lilac{background:#eeeafa}.sky{background:#e3edff}.butter{background:#fff1c6}
.feature-strip strong,.feature-strip small{display:block}
.feature-strip strong{font-size:14px;margin-bottom:3px}
.feature-strip small{font-size:12px;color:var(--muted)}
.catalogue{margin-top:49px;margin-bottom:54px}
.section-intro{display:flex;align-items:end;justify-content:space-between;gap:18px}
.section-label{color:#3151a4}
.section-label>span{width:17px;height:3px;border-radius:8px;background:#345bd0}
h2{font-size:clamp(34px,4.15vw,55px);line-height:1.01;letter-spacing:-.059em;margin:8px 0 10px}
.section-intro p:last-child,.services-title>p:last-child{color:var(--muted);line-height:1.55;font-size:15px}
.search{display:flex;align-items:center;gap:8px;background:white;border:1px solid var(--line);border-radius:8px;padding:0 11px;color:#3858a4;width:min(100%,241px)}
.search input{width:100%;border:0;background:transparent;padding:10px 0;font-size:13px;color:var(--text)}
.search input:focus{outline:none}
.search:focus-within{outline:3px solid #356bda;outline-offset:3px}
.filters{display:flex;flex-wrap:wrap;gap:7px;margin:17px 0 15px}
.filters button{background:white;border:1px solid var(--line);color:#394760;padding:7px 11px;border-radius:100px;font-size:12px;font-weight:750;min-height:34px}
.filters button:hover{border-color:#819edc}
.filters button[aria-pressed="true"]{background:var(--deep);border-color:var(--deep);color:white}
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.product-card{border:1px solid var(--line);border-radius:12px;background:white;overflow:hidden;display:flex;flex-direction:column}
.product-card img{width:100%;aspect-ratio:1.57;object-fit:cover;background:#e7edfa}
.product-content{padding:12px 13px;display:flex;flex-direction:column;flex:1}
.product-type{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#3b59a4;font-weight:800}
.product-card h3{margin:5px 0 5px;font-size:20px;letter-spacing:-.035em}
.product-card p{color:var(--muted);font-size:13px;line-height:1.47;flex:1}
.product-cta{color:#204aaa;background:none;border:0;border-top:1px solid #e6ebf5;margin-top:10px;padding:9px 0 1px;font-size:13px;text-align:left;font-weight:800;display:flex;justify-content:space-between;gap:8px;align-items:center}
.product-cta:hover{text-decoration:underline;text-underline-offset:4px}
.product-cta .icon{width:16px;height:16px}
.caption{color:var(--muted);font-size:11px;margin-top:10px}
.empty{grid-column:1/-1;background:white;border:1px dashed #bac8e7;border-radius:12px;padding:19px;line-height:1.5}
.empty button{margin-top:10px}
.service-section{background:#eaf0ff;border-block:1px solid #dce6fe;padding:42px 0}
.services-inner{display:grid;grid-template-columns:.88fr 1fr;gap:36px}
.services-title h2{max-width:465px}
.services-title>p:last-child{max-width:397px}
.steps{padding:0;margin:0;list-style:none}
.steps li{display:flex;gap:13px;padding:12px 0}
.steps li+li{border-top:1px solid #cfdcf6}
.step-number{width:36px;height:36px;display:grid;place-items:center;border-radius:8px;background:#fff;color:#3151a4;font-size:13px;font-weight:800;flex:none}
.steps h3{font-size:17px;margin-bottom:4px}
.steps p{font-size:13px;color:var(--muted);line-height:1.53}
.quote-section{margin-top:53px;display:grid;grid-template-columns:.74fr 1fr;overflow:hidden;background:white;border:1px solid var(--line);border-radius:17px}
.quote-intro{padding:31px;background:linear-gradient(149deg,#163376,#122451);color:white}
.quote-intro h2{color:white;margin:13px 0}
.quote-intro>p:not(.overline){color:#dce7ff;max-width:340px;line-height:1.6;font-size:15px}
.quote-intro a,.quote-location{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:14px}
.quote-intro a{color:var(--yellow);font-weight:750}
.quote-intro a:hover{text-decoration:underline}
.quote-location{color:#e4edff;margin-top:10px}
.quote-work{padding:24px}
.form-fields{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:10px}
form label{display:block;font-size:13px;font-weight:750;line-height:1.45}
form label>span{color:#a52c65}
form label :is(input,select,textarea){width:100%;min-width:0;padding:8px 9px;margin-top:4px;border:1px solid #c8d4e8;border-radius:7px;color:var(--text);background:#fbfcff;font-size:14px;min-height:38px;font-weight:400}
form textarea{resize:vertical}
form small{color:#536181;font-size:11px;font-weight:400;display:block;margin-top:4px}
form .button{margin-top:8px}
.form-note{font-size:11px;line-height:1.4;color:var(--muted);margin-top:7px}
.quote-result{margin-top:15px;background:#eef3ff;border:1px solid #dce6fd;border-radius:10px;padding:12px}
.quote-result h3{font-size:18px}
.quote-result>p:not(.form-note){font-size:13px;line-height:1.4;color:var(--muted);margin:4px 0}
.quote-result pre{font:13px/1.5 var(--font);white-space:pre-wrap;overflow-wrap:anywhere;background:white;border-radius:7px;padding:10px;margin:8px 0}
.quote-result-actions{display:flex;gap:6px;flex-wrap:wrap}
.faq{display:grid;grid-template-columns:.8fr 1fr;gap:32px;margin-top:45px;margin-bottom:48px}
.faq h2{font-size:clamp(32px,4vw,45px)}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line);padding:12px 0}
.faq-list summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;font-weight:750;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary .icon{color:var(--blue)}
.faq-list details[open] .icon{transform:rotate(45deg)}
.faq-list details p{margin-top:8px;color:var(--muted);line-height:1.52;font-size:13px;max-width:580px}
.footer{background:var(--navy);color:white;padding-top:25px}
.footer-content{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:21px;padding-bottom:18px}
.footer-content strong{display:block;margin:7px 0 9px}
.footer-content p,.footer-content div>a:not(.footer-logo),.footer-base{color:#d4dff9;font-size:13px;line-height:1.55}
.footer-content div>a:not(.footer-logo){display:block;margin:5px 0}
.footer-content a:hover{text-decoration:underline;text-underline-offset:4px}
.footer-logo{width:max-content;display:block;background:white;border-radius:7px;padding:6px;margin-bottom:8px}
.footer-logo img{width:82px;height:auto;max-height:64px;object-fit:contain;object-position:left center}
.footer-base{border-top:1px solid #43537b;display:flex;justify-content:space-between;padding-block:12px}
@media(max-width:1080px){.wrap{width:calc(100% - 52px)}.product-grid{gap:10px}.product-card h3{font-size:18px}}
@media(max-width:805px){.wrap{width:calc(100% - 38px)}.masthead{gap:13px}.masthead nav{gap:13px}.masthead nav a{font-size:13px}.header-cta{font-size:12px}.feature-strip a{padding:10px}.feature-strip small{font-size:11px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(max-width:610px){.wrap{width:calc(100% - 28px)}.topbar-inner{min-height:29px;font-size:11px;flex-wrap:wrap;justify-content:center;gap:4px 10px;padding-block:5px}.topbar-contacts{justify-content:center;column-gap:12px}.topbar a .icon{display:none}.masthead{height:auto;min-height:71px;display:flex;justify-content:space-between;flex-wrap:wrap;padding-block:6px;gap:6px}.masthead nav{order:3;justify-content:space-between;width:100%;padding:6px 0;border-top:1px solid var(--line);gap:4px}.brand img{width:83px}.header-cta{min-height:37px}.feature-strip{display:block;margin-top:10px}.feature-strip a+a{border-left:0;border-top:1px solid var(--line)}.feature-icon{width:32px;height:32px}.catalogue{margin-top:34px;margin-bottom:37px}.section-intro{align-items:start;flex-direction:column;gap:10px}.search{width:100%}.product-content{padding:8px}.product-card h3{font-size:16px}.product-card p,.product-cta{font-size:12px}.product-grid{grid-template-columns:minmax(0,1fr);gap:12px}.product-card img{height:auto}.services-inner,.quote-section,.faq{grid-template-columns:1fr;gap:14px}.service-section{padding:26px 0}.quote-section,.faq{margin-top:34px}.quote-intro,.quote-work{padding:16px}.footer-content{grid-template-columns:1fr 1fr;gap:10px}.footer-content>div:last-child{grid-column:1/-1}}
@media(max-width:340px){.topbar span .icon{display:none}.form-fields{grid-template-columns:1fr}.masthead nav a{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Pages et articles gérés par WordPress. */
.wp-content{min-height:50vh;padding-block:38px 48px;line-height:1.65;overflow-wrap:anywhere}
.wp-content h1{font-size:clamp(32px,5vw,54px);letter-spacing:-.05em;line-height:1.08;margin-bottom:14px}
.wp-content .wp-entry+.wp-entry{border-top:1px solid var(--line);margin-top:18px;padding-top:18px}
.wp-content a,.quote-work noscript a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.wp-content :where(p,ul,ol,figure){margin-block:0 1em}
.wp-content img{height:auto}
.wp-content iframe{max-width:100%}