/*
Theme Name: Stockholm Child
Template: stockholm
Version: 1.0
*/

@import url("../stockholm/style.css"); /* utile si le thème parent ne l'enfile pas via functions.php */

/* ==========================
   Root variables / Defaults
   ========================== */
:root{
  --ink:#4F4F4F;
  --blue:#528EA4;
  --beige:#E4C1A2;
  --terracotta:#B06757;
  --bg:#EAF3F5;
  --bg-light: #F2F7F8;
  --butter:#FFF3C9;
  --white: #fff;
  --bluelight: rgb(217, 234, 237);
  --headerH-desktop: 140px;
  --headerH-tablet: 10px;
  --headerH-mobile: 0px;
}

/* ==========================
   Typography / Headings
   ========================== */
h1 {
  font-size: 30px !important;
  font-family: "Inconsolata", Sans-serif!important;
  line-height: 40px;
}

h2 {
  font-size: 31px !important;
  font-weight: 700 !important; 
}

h2 span { color:#000000; }

h2.special-title {
  font-size: clamp(3rem, 11vw, 10.6rem) !important;
  line-height: 1.2em !important;
  font-family: "Inconsolata", Sans-serif!important;
  font-weight: 800!important;
  text-transform: uppercase!important;
}

.big-gradient h2.special-title {
  background: linear-gradient(90deg, #004213, #528EA4, #4F4F4F);
  background-size: 200% auto;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: shine-text 4s ease-in-out infinite;
  text-align: center;
}

/* fancy heading variant */
.fancy-heading {
  font-size: 2.5rem;
  font-weight: 700 !important; 
  background: linear-gradient(to right, #528EA4, #4F4F4F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.6s ease-out forwards;
  cursor: default;
}
.fancy-heading::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  background: #528EA4;
  bottom: -6px;
  left: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.fancy-heading:hover::after { transform: scaleX(1); }

.footer_top a:not(.qbutton) {
	font-size: 16px;
}

/* headings small adjustments */
.home-accroche h3 {
  font-size: 25px !important; 
  font-family: "Inconsolata", Sans-serif;
  font-weight: 400 !important; 
}

/* ==========================
   Text utilities / gradients
   ========================== */
.stylish-underline {
  text-decoration: underline;
  text-decoration-color: #B06757;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.stylish-wording { color:#E4C1A2; font-style: italic; }
.cursor-underscore { display: inline-block; animation: blink 1s step-start infinite; }
@keyframes blink { 0%,50%{opacity:1} 50.01%,100%{opacity:0} }

.blue-font { color: #D9EAED; }
.light-font { color: #528EA4; }
.brick-font { color: #B06757; }
.highlight-font { color: #528EA4; }
.black-font { color: #4F4F4F; }

.bg-gradient-sombre { background: linear-gradient(to right, #528EA4, #4F4F4F); }
.text-gradient-blue-black {
  background: linear-gradient(to right, #528EA4, #4F4F4F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes shine-text {
  0%{ background-position: 0% center; }
  50%{ background-position: 100% center; }
  100%{ background-position: 0% center; }
}

/* pulse */
.pulse {
  transform-origin:center;
  animation:pulseScale 3s ease-in-out infinite;
  will-change:transform;
}

@keyframes pulseScale {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}

/* accessibility */
@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; }
}

/* optional: pause on hover */
.pulse:hover { animation-play-state: paused; }

/* ==========================
   Small UI pieces
   ========================== */
.css-bulle p {
  display: inline-block;
  background-color: #000000;
  color: var(--butter);
  padding: 3px 16px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: 'Inter', sans-serif;
}

.gallery-caption a, .faq .faq-clean a, .info-contact a span {
  font-style: italic;
  border-bottom: 1px solid rgba(0,0,0,.3);
  color: inherit;
  transition: all .3s ease;
}
.gallery-caption a:hover{ border-bottom:1px solid currentColor; color:#0073e6 }

/* spacing for font-awesome icons inside lists */
ul li i.fa, ul li i[class*="fa-"]{ margin-right: 8px; vertical-align: middle; }

/* underline cursor, etc */
.cursor-underscore{}

/* img oblique */
.oblique-pic img { width:100%; height:auto; clip-path: ellipse(85% 100% at 15% 50%); }

/* separator counter small tweak */
.separateur_100 .q_counter_holder p.counter_text { margin: 2px 0 5px; }

/* ==========================
   Buttons
   ========================== */
.elementor-element.btn-bleu .qbutton {
  background: var(--butter);
  color: var(--black);
  border: 1px solid transparent;
  font-weight: 700;
}
.elementor-element.btn-bleu .qbutton:hover { background: #f4e1a0; }

.qbutton.btn-phone { font-size: 14px; line-height: 44px; height: 44px; padding: 0 28px; }

/* generic CTA used in sections (stats / services) */
.stats .btn,
.services_bloc .btn {
  display:inline-block; margin-top: 12px; padding: 12px 22px; border-radius:12px; font-weight:700;
  background: var(--blue); color:#fff; box-shadow:0 6px 16px rgba(82,142,164,.25);
  transition: transform .15s ease, box-shadow .15s ease, background .15s;
}
.stats .btn:hover { transform: translateY(-1px); box-shadow:0 10px 22px rgba(82,142,164,.3); }
.services_bloc .btn:hover { transform: translateY(-1px); background: var(--terracotta); box-shadow:0 10px 22px rgba(176,103,87,.28); }

/* ==========================
   Homepage / Header / Hero
   ========================== */
.image-header { perspective: 1000px; }
.wavy-img { width:100%; height:auto; display:block; transform-origin: top center; animation: swing 4s ease-in-out infinite; transform: rotate(-3deg); }
@keyframes swing{ 0%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} 100%{transform:rotate(-3deg)} }

/* hero top adjustments — default padding for desktop is controlled via CSS variable */
.hero-top{ padding-top: var(--headerH-desktop) !important; }

/* hero mobile override moved to media queries at end */

/* ==========================
   Stats Section
   ========================== */
.stats{
  background: linear-gradient(180deg,#fff 0%, var(--bg) 100%);
  padding: clamp(48px,7vw,96px) 16px;
}
.stats .wrap{ max-width: 1100px; margin: 0 auto; text-align:center; }
.stats_div { text-align:center; }

.stats .elementor-element-5fb1504.stats_div h2{
  font-size: clamp(26px,4vw,38px)!important; line-height:1.2; color:#111; margin: 0 0 10px;
}
.stats .elementor-element-5fb1504.stats_div h2 span{
  background: linear-gradient( to top, var(--butter) 0 38%, transparent 38% 100% ); box-decoration-break: clone; padding: 0 .1em;
}

.stats .grid_num{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(16px,3vw,28px); margin: clamp(24px,4vw,40px) 5px; }
.stats .card_num{ background:#fff; border-radius:16px; box-shadow: 0 8px 22px rgba(0,0,0,.06); padding: 22px 18px; }

.stats .num{ font-weight:800; font-size: clamp(40px,6vw,64px); letter-spacing: -.02em; color: var(--blue); display:flex; justify-content:center; align-items:baseline; gap:6px; margin-bottom: 8px; }
.stats .card_num:nth-child(1) .num{ color: var(--beige); }
.stats .card_num:nth-child(3) .num{ color: var(--terracotta); }
.stats .unit{ font-size:.45em; color:#9aa3a9; font-weight:700; }
.stats .card_num p{ color: var(--ink); margin:0; }

/* gentle rise animation on scroll */
@media (prefers-reduced-motion: no-preference){
  .stats .card_num{ opacity:0; transform: translateY(12px); animation: rise .26s ease forwards; }
  .stats .card_num:nth-child(2){ animation-delay:.46s }
  .stats .card_num:nth-child(3){ animation-delay:.62s }
  .stats .card_num:nth-child(4){ animation-delay:.88s }
}
@keyframes rise{ to{ opacity:1; transform:none } }
.stats .lead{ color: var(--ink); opacity:.9; margin: 0 0 28px; }

/* ==========================
   Services Section
   ========================== */
.services_bloc{
  background: linear-gradient(180deg,var(--bg-light) 0%, #fff 100%);
  padding: clamp(48px,5vw,96px) 16px;
}
.services_bloc .wrap{ max-width: 1200px; margin: 0 auto; text-align:center; }

.section-title, .h1-frame .elementor-widget-container{
  font-size: clamp(26px,4vw,36px); line-height:1.2; color:#111; margin:0 0 6px;
}
.section-title span, h1 span { background: linear-gradient(to top, var(--butter) 0 40%, transparent 40%); box-decoration-break: clone; padding: 0.08em; }

.section-lead{ color: var(--ink); opacity:.95; margin:0 0 26px; }

.services_grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(16px,3vw,28px); margin: clamp(20px,3vw,36px) 0; }

.services_grid--single{ grid-template-columns: 1fr; place-items: center; margin-top: 12px; }
.services_grid--single .service_card{ max-width: 354px; width: 100%; }

.service_card{ background:#fff; border-radius:18px; box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:left; padding:22px 20px; transition: transform .15s ease, box-shadow .15s ease; border: 1px solid rgba(0,0,0,.04); }
.service_card:hover{ transform: translateY(-2px); box-shadow:0 16px 28px rgba(0,0,0,.08); }
.service_card h4{ font-size: clamp(18px,2.4vw,22px); color:#294451; margin:0 0 8px; letter-spacing:.2px; }
.service_card ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.service_card li{ color:var(--ink); opacity:.95; }

/* inclusions list */
.inclusions{ margin-top: 3.5em; }
.inclusions h4 { font-size: clamp(18px, 2.2vw, 22px); font-weight: 700; color: var(--blue); margin: 0 0 25px; text-align: center; position: relative; display: inline-block; padding: 0 .2em; background: linear-gradient(to top, var(--butter) 0 45%, transparent 45%); border-radius: 4px; }
.inclusions_list{ display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px 16px; list-style:none; padding:0; margin:0 0 12px; text-align:left; }
.inclusions_list li{ color:var(--ink); display:flex; gap:8px; align-items:flex-start; }
.inclusions_list i{ color:var(--blue); margin-top: 2px; }

/* ==========================
   FAQ Section
   ========================== */
.faq { background-color: var(--bg); background-image: url("http://localhost/latoilenormande/wp-content/uploads/2025/09/back-light-blue.jpg"); background-repeat: repeat; }

.faq-clean { padding: clamp(14px,5vw,18px) 0; }
.faq-clean .e-n-accordion { max-width: 980px; margin: 0 auto; }

.faq-clean .e-n-accordion .e-n-accordion-item > summary h3 {
  font-size: 20px; font-family: "Open Sans", sans-serif; font-weight: 500; margin: 0; color: #223843; line-height: 1.4;
}

.faq-clean .e-n-accordion .e-n-accordion-item{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px; box-shadow:0 8px 20px rgba(0,0,0,.05); margin:12px 0; overflow:hidden; }
.faq-clean .e-n-accordion .e-n-accordion-item > summary{ display:flex; align-items:center; justify-content:flex-start; padding:18px 20px; font-size:clamp(18px,2.2vw,22px); font-weight:700; color:#223843; background:#fff; cursor:pointer; transition: background-color .15s ease; list-style:none; }
.faq-clean .e-n-accordion .e-n-accordion-item > summary:hover{ background:rgba(82,142,164,.06); }
.faq-clean .e-n-accordion .e-n-accordion-item .e-n-accordion-item-content{ padding:16px 20px 20px 20px; border-top:1px solid rgba(0,0,0,.06); color:var(--ink); line-height:1.7; }
.faq-clean .e-n-accordion .e-n-accordion-item .e-n-accordion-item-content p{ margin:0; }

/* ==========================
   Forms / Contact
   ========================== */
#contact ul li{ margin-bottom: 14px; }
#contact .formulaire-bloc { background: rgb(217, 234, 237); padding: 20px; border-radius: 5px; }
.two-cols { display: flex; gap: 20px; margin-bottom: 16px; }
.two-cols label, .full-col label { flex:1; display:flex; flex-direction:column; }
.full-col { margin-bottom: 16px; }

/* CF7 specific styles */
.form-contact .wpcf7 form .wpcf7-form-control:not([type="submit"]) { width:100%; padding:12px 14px; border-radius:8px; border:1px solid #ccc; font-size:16px; color:var(--ink); background:#fff; box-shadow:none; }
.form-contact .wpcf7 form input[type="text"],
.form-contact .wpcf7 form input[type="email"],
.form-contact .wpcf7 form input[type="tel"],
.form-contact .wpcf7 form input[type="url"],
.form-contact .wpcf7 form input[type="search"],
.form-contact .wpcf7 form input[type="number"],
.form-contact .wpcf7 form textarea,
.form-contact .wpcf7 form select { border:1px solid #ccc; border-radius:8px; padding:12px 14px; font-size:16px; color:var(--ink); transition:border .1s, box-shadow .1s; }
.form-contact .wpcf7 form .wpcf7-form-control:focus { border:2px solid #4F4F4F; outline:none; box-shadow:none; box-sizing:border-box; }
.form-contact .wpcf7 form input[type="submit"]{ background:#af3b21; color:#fff; border:2px solid #fff; font-weight:600; padding:7px 52px; border-radius:8px; transition:background .2s; font-family: Inconsolata, system-ui, sans-serif; font-size:15px; display:inline-block; }
.form-contact .wpcf7 form p{ text-align:center; }
.form-contact .wpcf7 form .wpcf7-spinner { display:inline-block; vertical-align:middle; margin:0 0 0 5px; }
.form-contact .wpcf7 form.sent .wpcf7-response-output { border:none; background:#E6F7EC; color:#2E7D32; padding:14px 18px; border-radius:8px; font-size:15px; margin:20px 0 0; text-align:center; }
.form-contact .wpcf7 form.invalid .wpcf7-response-output, .form-contact .wpcf7 form.unaccepted .wpcf7-response-output, .form-contact .wpcf7 form.payment-required .wpcf7-response-output{ border:none; background:#FDECEA; color:#C62828; padding:14px 18px; border-radius:8px; font-size:15px; margin:20px 0 0; text-align:center; }
.form-contact .wpcf7 form .wpcf7-not-valid { border-color:#C62828 !important; background:#fff; }
.form-contact .wpcf7 form .wpcf7-not-valid-tip { color:#C62828; font-size:13px; margin-top:4px; }
.form-contact .wpcf7 form input[type="submit"]:hover { background:#000; color:#fff; }
.form-contact .wpcf7 form label { display:flex; flex-direction:column; gap:6px; }

/* ==========================
   Partners / Logos
   ========================== */
.partners-section { padding: 3rem 1rem 8rem; text-align:center; }
.partners-logos{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:1rem; }
.partners-section .partners-logos img{ filter:grayscale(100%) brightness(0); height:45px; opacity:.7; transition: all .3s ease; margin:20px; }
.partners-section .partners-logos img.logo-js{ filter:grayscale(100%) brightness(.5); opacity:.7; }
.partners-logos img:hover, .partners-section .partners-logos img.logo-js:hover { filter:none; opacity:1 }

/* ==========================
   Misc / Utilities
   ========================== */
.postcard-block { background:#fff; border:1px solid #e5e5e5; box-shadow:0 8px 24px rgba(0,0,0,.08); padding:40px; max-width:1200px; margin:0 auto 80px; }
#displaynone { display:none; }
.promesse-bloc h3 { font-size: 28px; font-weight:700; }

/* Burger menu */
.mobile_menu_button i{ transition: transform .5s ease, opacity .5s ease; display:inline-block; }
.mobile_menu_button.open i.fa-times{ transform: rotate(180deg); opacity:1; }
.mobile_menu_button i.fa-bars{ opacity:1 }
.mobile_menu_button.open i.fa-bars{ opacity:0 }
.mobile_menu_button span {color: #000;}

/* ==========================
   Animations
   ========================== */
@keyframes fadeInUp{ to{ opacity:1; transform: translateY(0); } }

/* ==========================
   Small helpers not tied to section
   ========================== */
ul li i.fa, ul li i[class*="fa-"] { margin-right: 8px; }

/* ==========================
   Media Queries (grouped at the end)
   ========================== */

/* Desktop specific adjustments */
@media (min-width: 1000px){
  .hero-top{ padding-top: var(--headerH-desktop)!important; }
}

/* Tablet breakpoint */
@media (max-width: 1024px) and (min-width: 768px) {
  h1 { font-size: 24px!important; }
  .qbutton.btn-phone { font-size: 13px; line-height: 40px; height: 40px; padding: 0 24px; }
  .max-w-90 { max-width: 90%; }
  .services_grid{ grid-template-columns: repeat(2,1fr); }
  .services_grid--single > article { grid-column: 1 / -1; justify-self: center; }
  .inclusions_list{ grid-template-columns: repeat(2,1fr); }
}

/* small desktop / wide mobile adjustments */
@media (max-width: 980px){
  .stats .grid_num{ grid-template-columns: repeat(2,1fr); }
  .inclusions_list{ grid-template-columns: repeat(2,1fr); }
}

/* narrow mobile */
@media (max-width: 920px){
  .stats .grid_num{ grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 767px) {
  h2, h1 { font-size: 27px !important; }
  h1 {font-weight: 700 !important;}
  .big-gradient h2.special-title { font-size: 1.3rem !important; line-height: 1em !important; display: inline-block; }
  h2 { text-align: center; }
  #mb-only-h2 h2 span { display: inline-block; background-color: #000000; color: var(--butter); padding: 0px 12px 0px 12px; font-size: 14px; font-weight: 700; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.5px; font-family: 'Inter', sans-serif; }
  .home-accroche h3 { font-size: 20px !important; }
  .footer_top { padding-left: 0px; }
  .partners-section { padding-bottom: 4rem; }
  .elementor-section.elementor-section-height-full.hero-top { padding: 0 !important; margin: 0 !important; height: calc(100dvh - 100px); min-height: calc(100dvh - 100px); }
  .services_grid { grid-template-columns: 1fr; }
  .services_grid--single .service_card { max-width: none; }
  .inclusions_list { grid-template-columns: 1fr; }
  .elementor-element-4bc99a33 .qbutton.big_large, .elementor-element-2113a60 .qbutton.big_large, .elementor-element-06ea864 .qbutton.big_large  { font-size: 14px; padding: 10px 23px; line-height: 23px; height: 23px;}
  .elementor-element-2113a60 .qbutton.big_large i, .elementor-element-06ea864 .qbutton.big_large i {margin-left:0;}
  .mobile-top-text p { font-size: 17px; color: var(--ink); font-weight: 500; line-height: 1.84; letter-spacing: 0.4px; text-transform: none; margin: 0; display: inline;/* text-shadow: 0 1px 2px rgba(0,0,0,0.20); */}
  .faq-clean .e-n-accordion .e-n-accordion-item > summary h3 { font-size: 18px;}
  .header_bottom_right_widget_holder {
    display: flex!important; }
  .header_inner_right .side_menu_button_wrapper.right {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	}
  .header_inner_right .qbutton.btn-phone { padding: 2px 10px; height: 25px; border-width: 0px;}
  .header_inner_right .qbutton .button_icon { margin: 0; }
}


@media (max-width: 560px){
  .services_grid{ grid-template-columns: 1fr; }
  .services_grid--single .service_card{ max-width: none; }
  .inclusions_list{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .stats .grid_num{ grid-template-columns: 1fr; }
}


@media (max-width: 335px){
  .elementor-element-4bc99a33 .qbutton.big_large, .elementor-element-2113a60 .qbutton.big_large {	
	font-size: 12px;
    padding: 6px 12px;
  }
}

/* end of file */