/*
Theme Name:   SCREEN-OUTLET Child
Theme URI:    https://www.screen-outlet.com
Description:  Thème enfant SCREEN-OUTLET — Location écrans LED 6m²
Author:       SCREEN-OUTLET / CX-COM
Template:     hello-elementor
Version:      1.0.0
Text Domain:  screen-outlet-child
*/

:root {
  --so-orange:       #E8590C;
  --so-orange-light: #FF7A2F;
  --so-orange-dark:  #C44A08;
  --so-dark:         #1A1A2E;
  --so-dark-mid:     #2D2D44;
  --so-grey-bg:      #F7F7F7;
  --so-grey-mid:     #E5E5E5;
  --so-grey-text:    #666666;
  --so-white:        #FFFFFF;
  --so-success:      #27AE60;
  --so-font-primary: 'Inter', 'Segoe UI', sans-serif;
  --so-font-heading: 'Poppins', 'Inter', sans-serif;
  --so-radius:       12px;
  --so-radius-lg:    20px;
  --so-shadow:       0 4px 24px rgba(0,0,0,0.10);
  --so-shadow-lg:    0 8px 48px rgba(0,0,0,0.16);
  --so-transition:   all 0.25s ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--so-font-primary);
  color: var(--so-dark);
  background: var(--so-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--so-font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--so-dark);
}
h1 { font-size: clamp(2rem,5vw,3.5rem); }
h2 { font-size: clamp(1.5rem,3.5vw,2.5rem); }
h3 { font-size: clamp(1.2rem,2.5vw,1.8rem); }
p  { margin-bottom: 1rem; }
a  { color: var(--so-orange); text-decoration: none; transition: var(--so-transition); }
a:hover { color: var(--so-orange-dark); }

/* LAYOUT */
.so-container { max-width:1200px; margin:0 auto; padding:0 24px; }
.so-section   { padding:80px 0; }
.so-section--dark   { background:var(--so-dark); color:var(--so-white); }
.so-section--grey   { background:var(--so-grey-bg); }
.so-section--orange { background:var(--so-orange); color:var(--so-white); }
.so-section--dark h1,.so-section--dark h2,.so-section--dark h3 { color:var(--so-white); }

/* BUTTONS */
.so-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 32px; border-radius:var(--so-radius);
  font-family:var(--so-font-heading); font-weight:600; font-size:1rem;
  cursor:pointer; transition:var(--so-transition);
  border:2px solid transparent; text-decoration:none; white-space:nowrap;
}
.so-btn--primary {
  background:var(--so-orange); color:var(--so-white); border-color:var(--so-orange);
  box-shadow:0 4px 16px rgba(232,89,12,0.35);
}
.so-btn--primary:hover {
  background:var(--so-orange-dark); border-color:var(--so-orange-dark);
  color:var(--so-white); transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(232,89,12,0.45);
}
.so-btn--secondary {
  background:transparent; color:var(--so-white); border-color:var(--so-white);
}
.so-btn--secondary:hover {
  background:var(--so-white); color:var(--so-orange); transform:translateY(-2px);
}
.so-btn--outline {
  background:transparent; color:var(--so-orange); border-color:var(--so-orange);
}
.so-btn--outline:hover {
  background:var(--so-orange); color:var(--so-white); transform:translateY(-2px);
}
.so-btn--lg { padding:18px 40px; font-size:1.1rem; }
.so-btn--sm { padding:10px 20px; font-size:0.9rem; }

/* HERO */
.so-hero {
  background:linear-gradient(135deg,var(--so-dark) 0%,var(--so-dark-mid) 60%,#2a1a0e 100%);
  min-height:90vh; display:flex; align-items:center;
  position:relative; overflow:hidden; padding:80px 24px;
}
.so-hero::before {
  content:''; position:absolute; top:-50%; right:-20%;
  width:600px; height:600px;
  background:radial-gradient(circle,rgba(232,89,12,0.15) 0%,transparent 70%);
  pointer-events:none;
}
.so-hero__content { max-width:1200px; margin:0 auto; position:relative; z-index:1; }
.so-hero__badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(232,89,12,0.15); border:1px solid rgba(232,89,12,0.3);
  color:var(--so-orange-light); padding:8px 16px; border-radius:50px;
  font-size:0.85rem; font-weight:600; margin-bottom:24px;
  letter-spacing:0.5px; text-transform:uppercase;
}
.so-hero__title {
  font-size:clamp(2.5rem,6vw,4.5rem); font-weight:800;
  color:var(--so-white); line-height:1.1; margin-bottom:24px;
}
.so-hero__title .highlight { color:var(--so-orange); }
.so-hero__subtitle {
  font-size:clamp(1rem,2vw,1.25rem); color:rgba(255,255,255,0.75);
  max-width:600px; margin-bottom:40px; line-height:1.7;
}
.so-hero__cta { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:48px; }
.so-hero__trust { display:flex; gap:32px; flex-wrap:wrap; }
.so-hero__trust-item {
  display:flex; align-items:center; gap:8px;
  color:rgba(255,255,255,0.7); font-size:0.9rem;
}
.so-hero__trust-item .icon { color:var(--so-orange); }

/* CARDS */
.so-card {
  background:var(--so-white); border-radius:var(--so-radius-lg);
  padding:32px; box-shadow:var(--so-shadow); transition:var(--so-transition);
  border:1px solid var(--so-grey-mid);
}
.so-card:hover { transform:translateY(-4px); box-shadow:var(--so-shadow-lg); }
.so-card--featured {
  border:2px solid var(--so-orange); position:relative;
}
.so-card--featured::before {
  content:'POPULAIRE'; position:absolute; top:-14px; left:50%;
  transform:translateX(-50%); background:var(--so-orange); color:var(--so-white);
  padding:4px 16px; border-radius:50px; font-size:0.75rem;
  font-weight:700; letter-spacing:1px;
}
.so-card__icon {
  width:56px; height:56px; background:rgba(232,89,12,0.1);
  border-radius:var(--so-radius); display:flex; align-items:center;
  justify-content:center; font-size:1.5rem; margin-bottom:20px;
}
.so-card__price { font-size:2rem; font-weight:800; color:var(--so-orange); margin-bottom:4px; }
.so-card__price-original {
  font-size:1rem; color:var(--so-grey-text);
  text-decoration:line-through; margin-bottom:16px;
}

/* STEPS */
.so-steps {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:32px; margin-top:48px;
}
.so-step { text-align:center; }
.so-step__number {
  width:56px; height:56px; background:var(--so-orange); color:var(--so-white);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; font-weight:800; margin:0 auto 20px;
  box-shadow:0 4px 16px rgba(232,89,12,0.35);
}
.so-step__title { font-size:1rem; font-weight:700; margin-bottom:8px; }
.so-step__text  { font-size:0.9rem; color:var(--so-grey-text); line-height:1.6; }

/* CONFIGURATEUR */
.so-configurator {
  background:var(--so-white); border-radius:var(--so-radius-lg);
  box-shadow:var(--so-shadow-lg); overflow:hidden; max-width:900px; margin:0 auto;
}
.so-configurator__header {
  background:var(--so-dark); padding:32px 40px; color:var(--so-white);
}
.so-configurator__header h3 { color:var(--so-white); margin:0 0 8px; }
.so-configurator__body { padding:40px; }
.so-configurator__step {
  margin-bottom:32px; padding-bottom:32px;
  border-bottom:1px solid var(--so-grey-mid);
}
.so-configurator__step:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.so-configurator__step-label {
  font-size:0.8rem; font-weight:700; text-transform:uppercase;
  letter-spacing:1px; color:var(--so-orange); margin-bottom:8px;
}
.so-configurator__step-title {
  font-size:1.1rem; font-weight:700; color:var(--so-dark); margin-bottom:20px;
}

/* OPTIONS */
.so-options { display:flex; flex-wrap:wrap; gap:12px; }
.so-option { position:relative; }
.so-option input { position:absolute; opacity:0; width:0; height:0; }
.so-option__label {
  display:flex; flex-direction:column; align-items:center;
  padding:16px 20px; border:2px solid var(--so-grey-mid);
  border-radius:var(--so-radius); cursor:pointer; transition:var(--so-transition);
  min-width:100px; text-align:center; background:var(--so-white);
}
.so-option__label:hover { border-color:var(--so-orange); background:rgba(232,89,12,0.04); }
.so-option input:checked + .so-option__label {
  border-color:var(--so-orange); background:rgba(232,89,12,0.08); color:var(--so-orange);
}
.so-option__label-icon  { font-size:1.4rem; margin-bottom:6px; }
.so-option__label-text  { font-weight:600; font-size:0.9rem; }
.so-option__label-price { font-size:0.8rem; color:var(--so-grey-text); margin-top:4px; }

/* INPUT */
.so-input {
  width:100%; padding:14px 16px; border:2px solid var(--so-grey-mid);
  border-radius:var(--so-radius); font-size:1rem;
  font-family:var(--so-font-primary); transition:var(--so-transition);
  background:var(--so-white); color:var(--so-dark);
}
.so-input:focus { outline:none; border-color:var(--so-orange); box-shadow:0 0 0 3px rgba(232,89,12,0.12); }

/* RESULT */
.so-configurator__result {
  background:var(--so-dark); border-radius:var(--so-radius-lg);
  padding:32px 40px; color:var(--so-white); margin-top:32px;
}
.so-result__breakdown { display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
.so-result__line {
  display:flex; justify-content:space-between; align-items:center;
  font-size:0.95rem; color:rgba(255,255,255,0.75);
}
.so-result__line--discount { color:#5DADE2; }
.so-result__line--total {
  color:var(--so-white); font-weight:700; font-size:1.1rem;
  padding-top:16px; border-top:1px solid rgba(255,255,255,0.15); margin-top:4px;
}
.so-result__total-price {
  font-size:2.5rem; font-weight:800; color:var(--so-orange);
  text-align:center; margin:16px 0;
}
.so-result__savings {
  text-align:center; background:rgba(39,174,96,0.15);
  border:1px solid rgba(39,174,96,0.3); color:#5DADE2;
  padding:12px; border-radius:var(--so-radius); font-weight:600; margin-bottom:24px;
}

/* FAQ */
.so-faq { max-width:800px; margin:0 auto; }
.so-faq__item {
  border:1px solid var(--so-grey-mid); border-radius:var(--so-radius);
  margin-bottom:12px; overflow:hidden;
}
.so-faq__question {
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 24px; cursor:pointer; font-weight:600;
  background:var(--so-white); transition:var(--so-transition);
  border:none; width:100%; text-align:left;
  font-size:1rem; font-family:var(--so-font-primary);
}
.so-faq__question:hover { background:var(--so-grey-bg); }
.so-faq__question.is-open { background:rgba(232,89,12,0.06); color:var(--so-orange); }
.so-faq__toggle {
  width:28px; height:28px; border-radius:50%; background:var(--so-grey-mid);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; flex-shrink:0; transition:var(--so-transition);
}
.so-faq__question.is-open .so-faq__toggle {
  background:var(--so-orange); color:var(--so-white); transform:rotate(45deg);
}
.so-faq__answer {
  padding:0 24px; max-height:0; overflow:hidden;
  transition:max-height 0.3s ease, padding 0.3s ease;
  color:var(--so-grey-text); line-height:1.7;
}
.so-faq__answer.is-open { max-height:500px; padding:16px 24px 24px; }

/* FOOTER */
.so-footer { background:var(--so-dark); color:rgba(255,255,255,0.75); padding:64px 0 32px; }
.so-footer__grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:48px; margin-bottom:48px;
}
.so-footer__col-title {
  color:var(--so-white); font-weight:700; font-size:0.95rem;
  margin-bottom:16px; text-transform:uppercase; letter-spacing:0.5px;
}
.so-footer__links { list-style:none; padding:0; margin:0; }
.so-footer__links li { margin-bottom:10px; }
.so-footer__links a { color:rgba(255,255,255,0.65); font-size:0.9rem; transition:var(--so-transition); }
.so-footer__links a:hover { color:var(--so-orange); }
.so-footer__bottom {
  border-top:1px solid rgba(255,255,255,0.1); padding-top:24px;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px; font-size:0.85rem;
}

/* WOOCOMMERCE */
.woocommerce .button, .woocommerce button.button {
  background:var(--so-orange) !important; color:var(--so-white) !important;
  border-radius:var(--so-radius) !important; font-family:var(--so-font-heading) !important;
  font-weight:600 !important; padding:14px 28px !important;
  transition:var(--so-transition) !important; border:none !important;
}
.woocommerce .button:hover, .woocommerce button.button:hover {
  background:var(--so-orange-dark) !important; transform:translateY(-2px);
}

/* UTILITIES */
.text-orange { color:var(--so-orange); }
.text-white  { color:var(--so-white); }
.text-center { text-align:center; }
.mt-32 { margin-top:32px; }
.mt-48 { margin-top:48px; }
.mb-32 { margin-bottom:32px; }
.mb-48 { margin-bottom:48px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

/* ANIMATIONS */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
.reveal { opacity:0; transform:translateY(32px); transition:opacity 0.6s ease,transform 0.6s ease; }
.reveal.is-visible { opacity:1; transform:translateY(0); }

/* RESPONSIVE */
@media (max-width:768px) {
  .grid-2,.grid-3 { grid-template-columns:1fr; }
  .so-hero { min-height:70vh; padding:60px 24px; }
  .so-section { padding:60px 0; }
  .so-configurator__body { padding:24px; }
  .so-configurator__result { padding:24px; }
  .so-footer__grid { grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:480px) {
  .so-footer__grid { grid-template-columns:1fr; }
}