/* AZUR CARDS — feuille de style unique */
:root{
  --nuit:#0f2547; --azur:#1e6fd9; --azur-clair:#e8f0fc;
  --or:#b8860b; --creme:#faf8f4; --papier:#ffffff;
  --encre:#1c2634; --gris:#5d6b7d; --trait:#dfe4ea;
  --vert:#1a7f4b;
  --ombre:0 1px 2px rgba(15,37,71,.06), 0 8px 24px rgba(15,37,71,.08);
  --rayon:14px;
  --lisible:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--creme); color:var(--encre);
  font-family:"Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--azur)}
h1,h2,h3{line-height:1.2; margin:0 0 .5em; color:var(--nuit); font-weight:700}
h1{font-size:clamp(1.9rem,4.4vw,3rem); letter-spacing:-.02em}
h2{font-size:clamp(1.4rem,3vw,2rem); letter-spacing:-.01em}
h3{font-size:1.15rem}
p{margin:0 0 1em}
.conteneur{max-width:var(--lisible); margin:0 auto; padding:0 22px}
.etroit{max-width:760px}

/* ---------- en-tete ---------- */
header.site{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(150%) blur(8px); border-bottom:1px solid var(--trait)}
header.site .conteneur{display:flex; align-items:center; gap:26px; min-height:68px}
.marque{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--nuit); font-weight:800;
  letter-spacing:.14em; font-size:.95rem; text-transform:uppercase; white-space:nowrap}
.marque img{height:46px; width:auto; display:block}
nav.principal{margin-left:auto; display:flex; gap:26px; align-items:center; flex-wrap:wrap}
nav.principal a{color:var(--encre); text-decoration:none; font-size:.95rem; font-weight:600}
nav.principal a:hover,nav.principal a[aria-current="page"]{color:var(--azur)}
nav.principal a.bouton{color:#fff}

/* ---------- boutons ---------- */
.bouton{display:inline-block; background:var(--azur); color:#fff; text-decoration:none;
  padding:13px 24px; border-radius:10px; font-weight:700; border:0; cursor:pointer;
  font-size:1rem; font-family:inherit; transition:background .15s, transform .15s; text-align:center}
.bouton:hover{background:#175bb4; transform:translateY(-1px)}
.bouton.second{background:#fff; color:var(--nuit); border:1.5px solid var(--trait)}
.bouton.second:hover{background:#fff; border-color:var(--azur); color:var(--azur)}
.bouton[disabled]{background:#b8c2cf; cursor:not-allowed; transform:none}
.bouton.large{width:100%; padding:17px 24px; font-size:1.08rem}

/* ---------- heros ---------- */
.hero{background:linear-gradient(160deg,var(--nuit) 0%,#1a3f74 55%,#215394 100%); color:#fff; padding:72px 0 78px}
.hero h1{color:#fff; max-width:16ch}
.hero p.chapeau{font-size:1.16rem; color:#cfe0f7; max-width:58ch; margin-bottom:1.6em}
.hero .actions{display:flex; gap:14px; flex-wrap:wrap}
.hero .grille{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center}
.hero .visuel img{border-radius:var(--rayon); box-shadow:0 18px 50px rgba(0,0,0,.3)}
.pastille{display:inline-block; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  color:#e8f0fc; padding:5px 13px; border-radius:999px; font-size:.82rem; font-weight:600; margin-bottom:20px;
  letter-spacing:.03em}

.banniere{background:var(--nuit); color:#fff; padding:54px 0}
.banniere h1{color:#fff; margin-bottom:.3em}
.banniere p{color:#cfe0f7; max-width:62ch; margin:0}

/* ---------- sections ---------- */
section{padding:66px 0}
section.pale{background:var(--papier); border-top:1px solid var(--trait); border-bottom:1px solid var(--trait)}
.intro{max-width:64ch; margin-bottom:38px}
.intro p{color:var(--gris); font-size:1.06rem}

.colonnes{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:start}
.carte{background:var(--papier); border:1px solid var(--trait); border-radius:var(--rayon); padding:26px; box-shadow:var(--ombre)}
.carte h3{margin-bottom:.35em}
.carte p{color:var(--gris); margin:0; font-size:.97rem}
.carte .num{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:9px; background:var(--azur-clair); color:var(--azur); font-weight:800; margin-bottom:14px}

/* ---------- grille des sets ---------- */
.sets{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.set{text-decoration:none; color:inherit; background:var(--papier); border:1px solid var(--trait); border-radius:var(--rayon); overflow:hidden;
  box-shadow:var(--ombre); display:flex; flex-direction:column; transition:transform .15s, box-shadow .15s}
.set:hover{transform:translateY(-3px); box-shadow:0 10px 30px rgba(15,37,71,.14)}
.set .vignette{background:#eef1f5; padding:16px; display:flex; justify-content:center}
.set .vignette img{width:100%; max-width:190px; border-radius:8px}
.set .texte{padding:15px 17px 19px}
.set .texte strong{display:block; color:var(--nuit); font-size:1rem; line-height:1.3}
.set .texte span{display:block; color:var(--gris); font-size:.86rem; margin-top:5px}

/* ---------- tarifs ---------- */
.tarifs{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; max-width:760px}
.tarif{background:var(--papier); border:1px solid var(--trait); border-radius:var(--rayon); padding:30px; position:relative; box-shadow:var(--ombre)}
.tarif.vedette{border:2px solid var(--azur)}
.tarif .etiquette{position:absolute; top:-13px; left:30px; background:var(--azur); color:#fff;
  font-size:.75rem; font-weight:700; padding:4px 12px; border-radius:999px; letter-spacing:.05em}
.tarif .prix{font-size:2.5rem; font-weight:800; color:var(--nuit); line-height:1}
.tarif .prix small{font-size:.95rem; font-weight:600; color:var(--gris); display:block; margin-top:7px}
.tarif ul{list-style:none; padding:0; margin:20px 0 24px}
.tarif li{padding-left:26px; position:relative; margin-bottom:9px; color:var(--gris); font-size:.97rem}
.tarif li::before{content:"✓"; position:absolute; left:0; color:var(--vert); font-weight:800}

/* ---------- composeur de commande ---------- */
.composeur{display:grid; grid-template-columns:1.25fr .75fr; gap:34px; align-items:start}
.panneau{background:var(--papier); border:1px solid var(--trait); border-radius:var(--rayon); padding:28px; box-shadow:var(--ombre)}
label.champ{display:block; font-weight:700; color:var(--nuit); margin-bottom:8px; font-size:.95rem}
select,input[type=number],input[type=text],input[type=email],textarea{
  width:100%; padding:13px 14px; border:1.5px solid var(--trait); border-radius:10px; font-size:1rem;
  font-family:inherit; background:#fff; color:var(--encre)}
select:focus,input:focus,textarea:focus{outline:2px solid var(--azur); outline-offset:1px; border-color:var(--azur)}
.ligne-ajout{display:grid; grid-template-columns:1fr 108px auto; gap:12px; align-items:end}
#apercu{margin-top:20px; display:none; background:var(--azur-clair); border:1px solid #c9dcf7;
  border-radius:12px; padding:16px; gap:16px; align-items:center}
#apercu.visible{display:flex}
#apercu img{width:118px; border-radius:8px; flex:none}
#apercu .lg strong{display:block; color:var(--nuit)}
#apercu .lg span{color:var(--gris); font-size:.88rem}

#panier{list-style:none; padding:0; margin:0 0 18px}
#panier li{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--trait)}
#panier li .nom{flex:1; font-size:.96rem}
#panier li .qte{color:var(--gris); font-size:.9rem; white-space:nowrap}
#panier li button{background:none; border:0; color:#b3261e; cursor:pointer; font-size:.86rem;
  font-family:inherit; text-decoration:underline; padding:2px 4px}
.vide{color:var(--gris); font-style:italic; font-size:.95rem; margin:0 0 18px}
.recap div{display:flex; justify-content:space-between; padding:7px 0; font-size:.97rem; color:var(--gris)}
.recap div.total{border-top:2px solid var(--trait); margin-top:8px; padding-top:14px;
  font-size:1.35rem; font-weight:800; color:var(--nuit)}
.note{font-size:.86rem; color:var(--gris); margin:14px 0 0; text-align:center}
.alerte{background:#fdf3e3; border:1px solid #f0d8a8; border-radius:10px; padding:14px 16px;
  font-size:.93rem; color:#7a5600; margin-top:16px}
.rassurance{display:flex; gap:22px; flex-wrap:wrap; margin-top:26px; color:var(--gris); font-size:.9rem}
.rassurance span{display:flex; align-items:center; gap:7px}

/* ---------- divers ---------- */
.faq{max-width:760px}
.faq details{background:var(--papier); border:1px solid var(--trait); border-radius:12px; padding:18px 22px; margin-bottom:12px}
.faq summary{font-weight:700; color:var(--nuit); cursor:pointer; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+ "; color:var(--azur); font-weight:800}
.faq details[open] summary::before{content:"– "}
.faq p{margin:12px 0 0; color:var(--gris); font-size:.97rem}

table.legal{width:100%; border-collapse:collapse; margin:18px 0}
table.legal th,table.legal td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--trait); font-size:.96rem; vertical-align:top}
table.legal th{width:34%; color:var(--nuit); font-weight:700; background:#f4f6f9}
.acompleter{background:#fff4d6; border:1px dashed #d9a441; color:#7a5600; padding:2px 8px;
  border-radius:6px; font-size:.88rem; font-weight:600}

footer.site{background:var(--nuit); color:#b9c8dd; padding:52px 0 30px; margin-top:0}
footer.site a{color:#dce8f8; text-decoration:none}
footer.site a:hover{text-decoration:underline}
footer.site .grille{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px; margin-bottom:34px}
footer.site h4{color:#fff; margin:0 0 14px; font-size:.95rem; letter-spacing:.05em; text-transform:uppercase}
footer.site ul{list-style:none; padding:0; margin:0}
footer.site li{margin-bottom:9px; font-size:.94rem}
footer.site .bas{border-top:1px solid rgba(255,255,255,.15); padding-top:22px; font-size:.87rem;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

@media (max-width:980px){
  .hero .grille,.composeur{grid-template-columns:1fr; gap:32px}
  .colonnes{grid-template-columns:1fr 1fr}
  .sets{grid-template-columns:repeat(3,1fr)}
  footer.site .grille{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  body{font-size:16px}
  header.site .conteneur{flex-wrap:wrap; padding-top:10px; padding-bottom:10px; gap:10px; min-height:0}
  .marque{flex:1 1 100%; font-size:.9rem}
  .marque img{height:36px; width:auto}
  nav.principal{margin-left:0; flex:1 1 100%; gap:0; justify-content:space-between;
    flex-wrap:nowrap; align-items:center; border-top:1px solid var(--trait); padding-top:9px}
  nav.principal a{font-size:.82rem; white-space:nowrap}
  nav.principal a:first-child{display:none}          /* le logo tient lieu d'accueil */
  nav.principal a.bouton{padding:8px 14px; font-size:.82rem}
  section{padding:46px 0}
  .hero{padding:52px 0 56px}
  .colonnes,.tarifs{grid-template-columns:1fr}
  .sets{grid-template-columns:repeat(2,1fr)}
  .ligne-ajout{grid-template-columns:1fr; gap:10px}
  header.site .conteneur{min-height:60px; gap:14px}
  nav.principal{gap:16px}
  nav.principal a{font-size:.88rem}
  footer.site .grille{grid-template-columns:1fr}
}

/* ---------- disponibilite ---------- */
.set .vignette{position:relative}
.badge{position:absolute;top:10px;left:10px;font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;color:#fff}
.badge.dispo{background:var(--vert)}
.badge.bientot{background:#8a94a3}
.set.avenir{opacity:.72;cursor:default}
.set.avenir:hover{transform:none;box-shadow:var(--ombre)}
.set.avenir .vignette img{filter:grayscale(.35)}
.bandeau-info{display:none;background:#fff4d6;border-top:1px solid #f0d8a8;border-bottom:1px solid #f0d8a8;color:#7a5600;
  padding:12px 0;font-size:.95rem;text-align:center}