@charset "UTF-8";
/* =========================
   Webandyou — Styles de base
   Palette:
   --brand: #395359; --accent: #56828C; --muted: #F4F4F4
   Typo: Poppins (titres), Inter (texte)
   ========================= */

:root{
  --brand:#152861;
  --accent:#152861;
  --muted:#F4F4F4;
  --text:#1F2A2E;
  --text-soft:#4A5C62;
  --white:#FFFFFF;
  --radius:16px;
  --shadow:0 10px 25px rgba(0,0,0,.08);
  --maxw:1120px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  color:var(--text);
  background:#fff;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6{
  font-family:Poppins,Inter,system-ui,Arial,sans-serif;
  line-height:1.2;
  margin:0 0 .5rem;
  color:var(--brand);
}
h1{font-size:clamp(2rem,3.2vw,3rem)}
h2{font-size:clamp(1.6rem,2.5vw,2.2rem)}
h3{font-size:clamp(1.1rem,2vw,1.25rem); color:var(--text)}

p{margin:.6rem 0 1rem; color:var(--text-soft)}
.lead{font-size:1.1rem; color:#2a3a3f}

.container{
  width:100%;
  max-width:var(--maxw);
  padding:0 20px;
  margin:0 auto;
}

.center{text-align:center}

.section{
  padding:64px 0;
}
.section--spacious{padding:88px 0}
/*.section--muted{background:var(--muted)}*/
.section__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:24px;
}

/* Header */
.header{
  position:sticky; top:0; z-index:30;
  background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px 0;
}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none}
.logo__mark{
  display:grid; place-items:center;
  width:36px; height:36px; border-radius:10px;
  background:var(--brand); color:#fff; font-weight:700;
  /*box-shadow:var(--shadow);*/
}
.logo__text{color:var(--brand); font-weight:700; letter-spacing:.3px; font-size:1.05rem}

.nav__list{
  display:flex; gap:18px; list-style:none; padding:0; margin:0;
  flex-wrap:wrap;
}
.nav__link{
  text-decoration:none; color:var(--text);
  padding:10px 12px; border-radius:10px; transition:background .2s ease, color .2s ease;
  font-size: 0.8em ;
}
.nav__link:hover,.nav__link:focus{background:var(--muted); outline:none ; font-weight: bold}
.nav__link.is-active{color:var(--brand); font-weight:600}

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:16px; top:16px; width:auto; height:auto;
  background:#fff; padding:10px 14px; border-radius:10px; /*box-shadow:var(--shadow);*/
  z-index:1000;
}

/* HERO */
.hero{
  position:relative; min-height:64vh; display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(180deg, rgba(86,130,140,.10), rgba(57,83,89,.10));
}
.hero__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.65);
}
.hero__content{
  position:relative; z-index:1; text-align:center; color:#fff;
  max-width:840px; padding:48px 20px;
}
.hero h1{color:#fff; text-shadow:0 10px 30px rgba(0,0,0,.25)}
.hero .lead{color:#f0f6f8}
.hero .btn{margin-top:18px}

/* Grids */
.grid{display:grid; gap:28px}
.grid--2{grid-template-columns:1.1fr 1fr}
.grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width: 900px){
  .grid--2{grid-template-columns:1fr}
  .grid--3{grid-template-columns:1fr}
  .section__head{flex-direction:column; align-items:flex-start}
}

/* Media card */
.media-card{
  border-radius:var(--radius); overflow:hidden; /*box-shadow:var(--shadow);*/ background:#fff;
}
.media-card img{display:block; width:100%; height:auto}

/* Cards / features */
.card{
  background:#fff; border-radius:var(--radius); padding:22px;
  /*box-shadow:var(--shadow);*/
}
.card__icon{font-size:1.6rem; margin-bottom:10px}

/* Checklist */
.checklist{padding-left:0; list-style:none; margin:14px 0 0}
.checklist li{
  position:relative; padding-left:28px; margin:10px 0;
}
.checklist li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-weight:700;
}

/* Punchline */
.punch{
  background:linear-gradient(135deg, var(--brand), var(--accent));
  color:#fff;
}
.punch__text{
  font-size:clamp(1.1rem,2.2vw,1.4rem);
  margin:0 0 14px;
}

/* Works */
.work{
  background:#fff; border-radius:var(--radius); overflow:hidden; /*box-shadow:var(--shadow);*/
}
.work img{display:block; width:100%; height:auto}
.work h3{margin:14px 16px 6px}
.work p{margin:0 16px 18px}

/* Buttons & links */
.btn{
  display:inline-block; text-decoration:none; border-radius:14px;
  padding:12px 18px; font-weight:600; transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:0 6px 18px rgba(0,0,0,.08); will-change:transform;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--brand); color:#fff}
.btn--primary:hover,.btn--primary:focus{background:#2d4146; outline:none}
.btn--ghost{background:transparent; border:1.5px solid var(--brand); color:var(--brand)}
.btn--ghost:hover,.btn--ghost:focus{background:var(--brand); color:#fff}
.btn--light{background:#fff; color:var(--brand)}
.btn--light:hover,.btn--light:focus{background:#f2f6f7}

/* Inline CTA */
.cta-inline{margin-top:16px}

/* Footer */
.footer{background:#0f171a; color:#c8d3d7}
.footer__inner{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:24px 0;
}
.footer a.link{color:#c8d3d7; text-decoration:none; margin-left:14px}
.footer a.link:hover,.footer a.link:focus{color:#fff}

/* Links génériques */
.link{color:var(--brand); text-decoration:none; font-weight:600}
.link:hover,.link:focus{text-decoration:underline}

/* Réduire les animations si l'utilisateur préfère */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* =========================
   Spécifique page À propos
   ========================= */

/* Visually hidden pour titres auxiliaires */
.visually-hidden{
  position:absolute !important;
  height:1px; width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* HERO À PROPOS */
.about-hero{
  position:relative; min-height:46vh; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(86,130,140,.10), rgba(57,83,89,.10));
  overflow:hidden;
}
.about-hero__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(.7);
}
.about-hero__content{
  position:relative; z-index:1; text-align:center; color:#fff; padding:56px 20px;
}
.about-hero h1{color:#fff; text-shadow:0 10px 30px rgba(0,0,0,.25)}
.about-hero .lead{color:#e9f2f4}

/* Icônes "All Included" */
.about-icons{
  margin-top:22px;
}
.about-card{
  text-align:left;
}
.about-card__icon{
  font-size:1.8rem; margin-bottom:8px;
}

/* Étapes de méthode */
.about-steps{
  counter-reset: step;
  display:grid; gap:18px;
  grid-template-columns:repeat(4,1fr);
  list-style:none; padding:0; margin:24px 0 0;
}
.about-steps li{
  background:#fff; border-radius:var(--radius); padding:18px; /*box-shadow:var(--shadow);*/
}
.about-steps h3{margin:.2rem 0 .4rem; font-size:1.05rem}
.about-steps p{margin:0; color:var(--text-soft)}

@media (max-width: 900px){
  .about-steps{grid-template-columns:1fr}
}

/* Badges preuves */
.about-badges{
  color:#fff;
}
.badges{
  display:flex; flex-wrap:wrap; gap:12px;
  justify-content:center; align-items:center; padding:0; margin:0; list-style:none;
}
.badges li{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  color:#fff; padding:10px 14px; border-radius:999px;
  font-weight:600;
}
.badges strong{font-weight:800}

/* Ajustements mineurs */
.section .media-card img{
  aspect-ratio: 4 / 3; object-fit:cover;
}

/* =========================
   Spécifique page Prestations
   ========================= */

/* HERO Prestations */
.services-hero{
  position:relative; min-height:42vh; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(86,130,140,.10), rgba(57,83,89,.10));
  overflow:hidden;
}
.services-hero__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.7);
}
.services-hero__content{
  position:relative; z-index:1; text-align:center; color:#fff; padding:56px 20px;
}
.services-hero h1{color:#fff; text-shadow:0 10px 30px rgba(0,0,0,.25)}
.services-hero .lead{color:#e9f2f4}

/* Cartes d'expertise */
.services-cards .service{
  display:flex; flex-direction:column; gap:10px;
}
.service__icon{
  font-size:1.8rem; line-height:1; margin-bottom:6px;
}
.service__bullets{
  list-style:none; padding:0; margin:.2rem 0 .6rem;
}
.service__bullets li{
  position:relative; padding-left:22px; margin:6px 0; color:var(--text-soft);
}
.service__bullets li::before{
  content:"•"; position:absolute; left:6px; top:0; font-weight:700; color:var(--accent);
}
.service__img{
  width:100%; height:auto; border-radius:12px; /*box-shadow:var(--shadow);*/
  aspect-ratio: 4 / 3; object-fit:cover;
}

/* Ajustements responsives spécifiques */
@media (max-width: 900px){
  .services-hero{min-height:36vh}
}

/* =========================
   Spécifique page Formules
   ========================= */

/* HERO Formules */
.pricing-hero{
  position:relative; min-height:42vh; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(86,130,140,.10), rgba(57,83,89,.10));
  overflow:hidden;
}
.pricing-hero__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.7);
}
.pricing-hero__content{
  position:relative; z-index:1; text-align:center; color:#fff; padding:56px 20px;
}
.pricing-hero h1{color:#fff; text-shadow:0 10px 30px rgba(0,0,0,.25)}
.pricing-hero .lead{color:#e9f2f4}

/* Toggle facturation */
.billing-toggle{
  display:inline-flex; border:1.5px solid var(--brand); border-radius:999px; overflow:hidden;
}
.billing-toggle__btn{
  background:#fff; color:var(--brand); border:0; padding:10px 16px;
  font-weight:600; cursor:pointer;
}
.billing-toggle__btn + .billing-toggle__btn{border-left:1.5px solid var(--brand)}
.billing-toggle__btn.is-active{background:var(--brand); color:#fff}
.billing-toggle .badge{
  font-size:.85em; font-weight:700; margin-left:6px;
  background:var(--accent); color:#fff; padding:2px 8px; border-radius:999px;
}
.hint{margin:.5rem 0 0; color:var(--text-soft)}

/* Cartes de prix */
.pricing{align-items:stretch}
.price-card{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:12px; background:#fff; border-radius:var(--radius);
  /*box-shadow:var(--shadow);*/
  padding:22px;
  position:relative;
}
.price-card__head h3{margin:0}
.price-card__head .tag{
  margin:.1rem 0 0; color:var(--text-soft); font-weight:600;
}
.tag--popular{
  display:inline-block; background:var(--accent); color:#fff; padding:4px 8px; border-radius:999px;
}
.is-featured{
  border:2px solid var(--accent);
  transform:translateY(-6px);
}
.price{
  display:flex; align-items:baseline; gap:8px; margin:.2rem 0 .4rem;
}
.price__value{
  font-size:1.8rem; font-weight:800; color:var(--brand);
}
.price__suffix{
  color:var(--text-soft); font-weight:600;
}
.price__features{
  margin:.4rem 0; padding-left:0; list-style:none;
}
.price__features li{
  position:relative; padding-left:24px; margin:8px 0; color:var(--text-soft);
}
.price__features li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-weight:700;
}
.price__details summary{
  cursor:pointer; font-weight:700; color:var(--brand);
}
.price__details ul{margin:.4rem 0 0; padding-left:18px}
.price__cta{margin-top:auto}

/* Comparatif */
.compare .compare__col{
  background:#fff;
  border-radius:var(--radius);
  padding:18px;
  /*box-shadow:var(--shadow);*/
  }
.compare h3{margin:0 0 .3rem}

/* Responsive */
@media (max-width: 900px){
  .pricing-hero{min-height:36vh}
  .is-featured{transform:none}
}

/* =========================
   Formules — Section 1 (Complément)
   ========================= */

/* Cartes Création (section 1) */
.site-plans .site-card{
  display:flex; flex-direction:column; gap:12px;
  background:#fff; border-radius:var(--radius); padding:22px;
}
.site-card.is-featured{ border:2px solid var(--accent); transform:translateY(-6px); }
.site-card__head h3{ margin:0 }
.site-card__head .tag{ margin:.1rem 0 0; color:var(--text-soft); font-weight:600; }
.tag--popular{ display:inline-block; background:var(--accent); color:#fff; padding:4px 8px; border-radius:999px; }

.site-card__features{ margin:.2rem 0 .4rem; list-style:none; padding-left:0; }
.site-card__features li{ position:relative; padding-left:24px; margin:8px 0; color:var(--text-soft); }
.site-card__features li::before{ content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700; }

.site-card__img{
  width:100%;
  height:auto;
  border-radius:12px;
  /*box-shadow:var(--shadow);*/
  aspect-ratio: 4 / 3;
  object-fit:cover;
}
.site-card__cta{ margin-top:auto; }

/* Mini-bannière (entre sections) */
.mini-banner{
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color:#fff; text-align:center; padding:36px 0;
}
.mini-banner h2{ color:#fff; margin:0 0 6px; }
.mini-banner__text{ margin:0; color:#eaf3f5; }

/* Maintenance (section 2) */
.billing-toggle{
  display:inline-flex; border:1.5px solid var(--brand); border-radius:999px; overflow:hidden;
}
.billing-toggle__btn{
  background:#fff; color:var(--brand); border:0; padding:10px 16px;
  font-weight:600; cursor:pointer;
}
.billing-toggle__btn + .billing-toggle__btn{ border-left:1.5px solid var(--brand); }
.billing-toggle__btn.is-active{ background:var(--brand); color:#fff; }
.billing-toggle .badge{
  font-size:.85em; font-weight:700; margin-left:6px;
  background:var(--accent); color:#fff; padding:2px 8px; border-radius:999px;
}
.hint{ margin:.5rem 0 0; color:var(--text-soft); }

/* Cartes maintenance (pricing, avec switch) */
.pricing{ align-items:stretch; }
.price-card{
  background:#fff;
  border-radius:var(--radius);
  /*box-shadow:var(--shadow);*/
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.price-card.is-featured{ border:2px solid var(--accent); transform:translateY(-6px); }
.price-card__head h3{ margin:0; }
.price-card__head .tag{ margin:.1rem 0 0; color:var(--text-soft); font-weight:600; }

.price{
  display:flex; align-items:baseline; gap:8px; margin:.2rem 0 .4rem;
}
.price__value{ font-size:1.8rem; font-weight:800; color:var(--brand); }
.price__suffix{ color:var(--text-soft); font-weight:600; }

.price__features{ margin:.2rem 0 .4rem; list-style:none; padding-left:0; }
.price__features li{ position:relative; padding-left:24px; margin:8px 0; color:var(--text-soft); }
.price__features li::before{ content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700; }

.price__cta{ margin-top:auto; }

/* Note en bas de section */
.small-note{ margin-top:16px; font-size:.95rem; color:var(--text-soft); }

/* Responsive */
@media (max-width: 900px){
  .site-card.is-featured, .price-card.is-featured{ transform:none; }
}

.price__note{ margin:-6px 0 0; font-size:.92rem; color:var(--text-soft); }



/* =========================
   PADDING
   ========================= */

.pb-10 {padding-bottom: 10px;}
.pb-20 {padding-bottom: 20px;}
.pb-30 {padding-bottom: 30px;}
.pb-40 {padding-bottom: 40px;}
.pb-50 {padding-bottom: 50px;}
.pb-70 {padding-bottom: 70px;}
.pb-90 {padding-bottom: 90px;}

.pt-10 {padding-top: 10px;}
.pt-20 {padding-top: 20px;}
.pt-30 {padding-top: 30px;}
.pt-40 {padding-top: 40px;}
.pt-50 {padding-top: 50px;}
.pt-70 {padding-top: 70px;}
.pt-90 {padding-top: 90px;}

/* =========================
   MARGIN
   ========================= */

.mb-10 {margin-bottom: 10px;}
.mb-20 {margin-bottom: 20px;}
.mb-30 {margin-bottom: 30px;}
.mb-40 {margin-bottom: 40px;}
.mb-50 {margin-bottom: 50px;}
.mb-70 {margin-bottom: 70px;}
.mb-90 {margin-bottom: 90px;}

.mt-10 {margin-top: 10px;}
.mt-20 {margin-top: 20px;}
.mt-30 {margin-top: 30px;}
.mt-40 {margin-top: 40px;}
.mt-50 {margin-top: 50px;}
.mt-70 {margin-top: 70px;}
.mt-90 {margin-top: 90px;}