:root{
  --ddc-navy:#0a1b3d;
  --ddc-navy-2:#0e2b6c;
  --ddc-accent:#2a66ff;
  --ddc-accent-2:#8fb3ff;
  --ddc-cream:#f5f7fb;
  --ddc-text:#0e1220;

  /* Services cards */
  --ddc-pill-bg:#eef3ff;
  --ddc-pill-border:#dbe6ff;
  --ddc-included-bg:#f7f9fe;
  --ddc-included-border:#d6def2;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  font-family:Inter,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--ddc-text); background:#fff;
}
a{color:var(--ddc-accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1160px; margin:0 auto; padding:0 20px}

/* Topbar / Ticker */
.topbar{background:var(--ddc-navy); color:#fff; font-size:14px}
.topbar .ticker{overflow:hidden; white-space:nowrap}
.topbar .ticker span{
  display:inline-block; padding:8px 0;
  animation:ticker 60s linear infinite;
}
@keyframes ticker{
  0%   { transform: translateX(10%); }
  100% { transform: translateX(-100%); }
}

/* =========================
   HEADER UNIQUE (KEEP THIS)
   ========================= */
.header{
  position:sticky; top:0; background:#fff; z-index:50;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  overflow:visible;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; gap:16px; overflow:visible;
}

/* Logo + slogan */
.brand{
  display:flex; align-items:center; gap:12px; text-decoration:none;
}
.brand img{height:44px;flex:0 0 auto}
.brand .title{
  font-weight:800; letter-spacing:.6px; color:var(--ddc-navy);
}
.brand .slogan{
  color:#0a1b3d; opacity:.9; font-size:15px; white-space:nowrap;
}
@media (max-width:980px){ .brand .slogan{display:none} }

/* Menu principal */
.menu-primary{
  display:flex; align-items:center; gap:16px;
}
.menu-primary .split{
  position:relative; padding:10px 12px; border-radius:10px;
  color:var(--ddc-navy); font-weight:600; text-decoration:none;
}
.menu-primary .split:hover{background:var(--ddc-cream)}
.menu-primary .split + .split{margin-left:8px}
.menu-primary .split + .split::before{
  content:""; position:absolute; left:-8px; top:50%; transform:translateY(-50%);
  width:1px; height:18px; background:#e7ecf5;
}

/* Groupe de droite */
.menu-right{display:flex; align-items:center; gap:10px}

/* Bouton “Espace client” */
.account{position:relative}
.account__btn{
  display:flex; align-items:center; gap:8px;
  background:#f5f7fb; border:1px solid #e8ecf5; border-radius:10px;
  padding:8px 12px; cursor:pointer; color:var(--ddc-navy); font-weight:700;
}
.account__btn .line1{display:block;font-size:12px;opacity:.7}
.account__btn .line2{display:block;font-size:14px;margin-top:-2px}
.account__btn:hover{background:#eef3ff}

/* Panneau déroulant */
.account__panel{
  position:absolute; right:0; top:calc(100% + 8px); min-width:260px;
  background:#fff; border:1px solid #e8ecf5; border-radius:12px;
  box-shadow:0 10px 28px rgba(10,27,61,.12);
  padding:12px;

  display:none;
  flex-direction:column;
  gap:8px;              /* <-- espace entre les boutons */
  z-index:9999;
}
.account.open .account__panel,
.account__panel.open{
  display:flex;         /* <-- IMPORTANT pour que gap marche */
}

.account__action{
  display:block; background:var(--ddc-accent); color:#fff; text-align:center;
  padding:10px 12px; border-radius:10px; font-weight:800; text-decoration:none;
}
.account__action:hover{opacity:.95}
.account__new{margin-top:10px;font-size:14px;color:#0a1b3d}
.account__new a{font-weight:800}
.account__hint{display:block;margin-top:8px;color:#6b7796}
.account__hint span{margin-right:4px}

/* =========================
   BOUTONS (base neutre)
   ========================= */
.btn{
  display:inline-block; padding:12px 20px; border-radius:12px;
  font-weight:700; text-decoration:none; line-height:1;
  transition:opacity .2s ease, transform .12s ease;
}
.btn:hover{opacity:.92; text-decoration:none; transform:translateY(-1px)}
.btn.primary{background:var(--ddc-accent); color:#fff; border:0}
.btn.outline{background:#fff; color:var(--ddc-navy); border:1.5px solid #d7dff0}

/* Bouton RDV header */
.btn.rdv{
  background:var(--ddc-accent); color:#fff; border-radius:12px;
  padding:10px 14px; font-weight:800;
}
.btn.rdv:hover{opacity:.92}

/* Responsive header */
@media (max-width: 980px){
  .menu-primary{gap:12px}
  .menu-right{gap:8px}
  .btn{padding:10px 14px}
}
@media (max-width: 720px){
  .nav{flex-wrap:wrap}
  .menu-primary{width:100%; justify-content:center; flex-wrap:wrap}
  .menu-right{width:100%; justify-content:flex-end; flex-wrap:wrap}
}

/* Hero */
.hero{
  position:relative;
  background:url("../images/image-ordi-portable.png") center center/cover no-repeat;
  color:#fff;
  padding:32px 0;
  overflow:hidden;
}
.hero .corner{display:none}

/* CTA hero : on surcharge seulement DANS hero */
.hero .cta{display:flex; gap:16px; align-items:center; margin-top:14px}
.hero .btn.primary{background:#fff; color:#0b1c3f; border:0}
.hero .btn.outline{background:transparent; color:#fff; border:2px solid #fff}

/* Sections */
.section{padding:32px 0}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{
  background:#fff; border:1px solid #e8ecf5; border-radius:18px; padding:18px;
  box-shadow:0 8px 26px rgba(10,27,61,.06)
}
.card h3{margin:4px 0 8px}
.badge{
  display:inline-block; background:var(--ddc-cream); padding:4px 8px;
  border-radius:999px; font-size:20px; margin-bottom:4px;
  color:var(--ddc-navy); font-weight:700
}

/* Footer */
.block-light{background:var(--ddc-cream)}
.footer{background:#0b1634; color:#e7ecff; padding:24px 0; margin-top:24px}
.footer a{color:#e7ecff; opacity:.96}
.footer .cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:20px}
.footer small{opacity:.76}

/* Notices */
.notice{
  border-left:4px solid var(--ddc-accent); padding:6px 10px;
  background:#f3f7ff; border-radius:8px; margin:10px 0
}

/* Cookies banner */
.banner-legal{
  position:fixed; inset:auto 20px 20px auto;
  background:#0b1634; color:#fff; padding:12px 16px;
  border-radius:12px; display:flex; align-items:center; gap:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.25); max-width:320px; z-index:9999;
  opacity:0; transform:translateY(15px);
  animation:fadeInCookies .6s ease-out forwards;
}
.banner-legal button{
  margin-left:auto; background:#fff; color:#0a1b3d; border:none; border-radius:6px;
  padding:6px 12px; font-weight:700; cursor:pointer;
}
.banner-legal button:hover{background:#e6e6e6}
@keyframes fadeInCookies{
  from{opacity:0; transform:translateY(15px)}
  to{opacity:1; transform:translateY(0)}
}
.fade-out{animation:fadeOutCookies .5s ease-in forwards}
@keyframes fadeOutCookies{
  from{opacity:1; transform:translateY(0)}
  to{opacity:0; transform:translateY(15px)}
}
@media(max-width:640px){
  .banner-legal{
    inset:auto 14px 14px 14px; max-width:none;
    flex-direction:column; align-items:stretch
  }
}

/* Forms / Grid utils */
.grid-2{display:grid; grid-template-columns:1.2fr .8fr; gap:24px}
.input,.textarea,select{
  width:100%; padding:12px 14px; border:1px solid #dde3ee; border-radius:12px
}
.textarea{min-height:140px; resize:vertical}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* Tables & Pricing */
.table{width:100%; border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #e8ecf5; padding:10px; text-align:left}
.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.price{font-size:28px; font-weight:900; color:var(--ddc-navy)}

/* Quick buttons */
.whatsapp{background:#25D366; color:#fff}
.calendly{background:var(--ddc-accent); color:#fff}

/* Responsive tweaks */
@media(max-width:980px){
  .cards{grid-template-columns:1fr}
  .footer .cols{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
}
@media(max-width:600px){
  .brand{flex-direction:column; align-items:flex-start}
  .brand .slogan{
    margin-left:0; margin-top:2px; font-size:16px; white-space:normal
  }
}

/* 2-col blocks */
.block{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:2rem; margin-bottom:3rem;
}
.block__text{max-width:500px}
@media(max-width:768px){
  .block{grid-template-columns:1fr; text-align:center}
  .block__image{order:-1}
}

/* Images harmonisées */
.block__image img,
.card img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
@media(min-width:1200px){
  .block__image img,
  .card img{ aspect-ratio:16/9; }
}

/* Bloc QCM */
.qcm-cta{ padding:14px 0 6px !important; }
.qcm-cta__inner{
  display:flex; align-items:center; gap:16px;
  background:#fff; border:1px solid #e8ecf5; border-radius:14px;
  box-shadow:0 8px 26px rgba(10,27,61,.06);
  padding:14px 20px;
}
.qcm-cta__content{ flex:1; min-width:0 }
.qcm-cta__content h3{ margin:0 0 6px; font-size:18px }
.qcm-cta__content p{ margin:0; color:#5c6780 }
.qcm-cta__btn{
  margin-left:auto;
  background:var(--ddc-accent); color:#fff; border:none; border-radius:12px;
  padding:12px 18px; font-weight:700;
  box-shadow:0 6px 18px rgba(42,102,255,.25);
}
.qcm-cta__btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(42,102,255,.28);
  opacity:.95;
}
@media(max-width:720px){
  .qcm-cta__inner{ flex-direction:column; align-items:flex-start }
  .qcm-cta__btn{ margin-top:8px; width:auto }
}
.qcm-cta .qcm-bulle{
  border:2px solid #007bff; border-radius:10px; padding:12px 16px; background:#fff;
}
.btn-qcm{
  display:inline-block; margin-left:12px; padding:8px 16px;
  background:#0b5ed7; color:#fff; border-radius:6px; font-weight:600;
}
.btn-qcm:hover{ background:#084298 }

.badge a, .block__text h3 a { text-decoration:none; color:inherit; }
.block__text h3 a:hover { text-decoration:underline; }

/* Cartes services */
.service-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
}
.service-card{
  background:#fff; border:1px solid #e8ecf5; border-radius:16px;
  padding:16px; box-shadow:0 8px 26px rgba(10,27,61,.06);
  display:flex; flex-direction:column;
}
.service-card .card__image{
  display:flex; align-items:center; justify-content:center;
  background:#0b1c3f; border-radius:12px; height:160px;
  margin-bottom:12px; padding:8px;
}
.service-card .card__image img{
  max-height:140px; width:auto; object-fit:contain;
}
.service-card h3{ margin:6px 0; color:var(--ddc-navy) }

.price-tag{
  display:inline-block; background:var(--ddc-pill-bg); color:var(--ddc-navy);
  border:1px solid var(--ddc-pill-border); border-radius:999px;
  padding:6px 10px; font-weight:800; font-size:.95rem; margin:0 0 10px;
}
.service-card p{ margin:0 0 10px; color:#33405f }

.included{
  background:var(--ddc-included-bg);
  border:1px dashed var(--ddc-included-border);
  border-radius:12px; padding:10px 12px; margin:0 0 12px;
  color:#2b3a67;
}
.included ul{ margin:6px 0 0 18px; padding:0 }
.included li{ margin:4px 0 }

.card__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:auto }
.card__actions .btn{ padding:10px 14px; border-radius:10px; font-weight:700 }
.card__actions .btn.primary{ background:var(--ddc-accent); color:#fff; border:0 }
.card__actions .btn.ghost{ background:#fff; color:var(--ddc-navy); border:1px solid #d6def2 }

.legal-note{
  background:#fff; border:1px solid #e8ecf5; border-left:4px solid var(--ddc-accent);
  border-radius:10px; padding:12px 14px; color:#33405f;
  max-width:980px; margin:6px auto 0;
}

/* Chips / options */
.crea-options{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px; }
.btn-chip{
  display:inline-block; padding:8px 12px; border-radius:999px;
  font-weight:800; font-size:.95rem; color:#0a1b3d;
  background:#eef3ff; border:1px solid #dbe6ff; white-space:nowrap;
}
.btn-chip:hover{
  background:#e6eeff; box-shadow:0 3px 10px rgba(42,102,255,.12);
  transform:translateY(-1px);
}
.btn-chip.alt{ background:#fff; border:1px dashed #bcd0ff }
.btn-chip.small{ font-weight:700; font-size:.9rem; padding:7px 10px }

/* CTA service */
.cta-service{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 16px; border:1px solid #e8ecf5; border-radius:12px; background:#fff;
  box-shadow:0 8px 24px rgba(10,27,61,.06); margin-top:14px;
}
.cta-service h4{margin:0 0 4px; font-size:18px; color:#0a1b3d}
.cta-service p{margin:0; color:#5c6780}
.cta-service__actions{display:flex; gap:10px; flex-wrap:wrap}
.btn.btn-outline:hover{background:#f6f8ff}
@media(max-width:720px){
  .cta-service{flex-direction:column; align-items:flex-start}
}

/* Client bar */
.client-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:#fff; border:1px solid #e8ecf5; border-radius:12px; padding:12px 14px;
  box-shadow:0 8px 24px rgba(10,27,61,.06); margin:12px 0 18px;
}
.client-bar strong{color:#0a1b3d}
.client-bar span{color:#5c6780; margin-left:6px}
.client-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* Password field */
.password-field{ position:relative; display:flex; align-items:center; }
.password-field input{ flex:1; padding-right:40px; }
.password-field .toggle-password{
  position:absolute; right:10px; background:transparent; border:none;
  cursor:pointer; font-size:18px;
}
.merci-container { max-width: 760px; margin: 0 auto; }
.merci-card { text-align: center; padding: 28px; }
.merci-icon { font-size: 34px; margin-bottom: 8px; }
.merci-title { margin-top: 0; }
.merci-notice { text-align: left; margin-top: 14px; }
.merci-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }