:root{
  --marine:#00274B; --bleu:#1f6fa8; --bleu-fonce:#14527e; --ciel:#6CBBE2; --ciel-pale:#d5ebf8;
  --fond:#f6fafd; --texte:#17324d; --gris:#3b556e; --gris-clair:#4a6179;
  --orange:#F49E43; --orange-pale:#fff4e6; --bord:#b9cfe0;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--texte);background:var(--fond);line-height:1.5}
img{max-width:100%}
a{color:var(--bleu)}a:hover{color:var(--marine)}
button,input,textarea{font-family:inherit}
.conteneur{max-width:1180px;margin:0 auto;padding:0 32px}
.piege{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}

/* En-tête */
.entete{background:#fff;box-shadow:0 2px 12px rgba(0,39,75,.08);position:relative;z-index:2}
.entete-interieur{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding-top:12px;padding-bottom:12px;text-align:center}
.logo{height:84px;width:auto;display:block}
.entete-texte{margin:0;font-size:15px;color:var(--gris);text-align:center;line-height:1.5}
.entete-texte strong{color:var(--marine)}

/* Titre */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#e3f1fa 0%,var(--fond) 100%)}
.hero-vagues{position:absolute;right:0;bottom:0;width:100%;height:150px;display:block}
.hero-in{position:relative;padding-top:44px;padding-bottom:84px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.hero h1{margin:0;font-family:'Playfair Display',Georgia,serif;font-size:46px;line-height:1.1;color:var(--marine);max-width:760px;font-weight:700;text-wrap:balance}
.hero-texte{margin:0;font-size:18px;line-height:1.55;max-width:700px;color:var(--gris)}
.puces{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.puce{background:#fff;border-radius:999px;padding:10px 18px;font-size:14px;font-weight:600;color:var(--marine);box-shadow:0 3px 10px rgba(0,39,75,.12)}

/* Contenu */
.contenu{position:relative;margin-top:-40px;padding-bottom:60px}
.alerte{border-radius:14px;padding:14px 18px;margin:0 0 20px;font-size:15px;line-height:1.5}
.alerte-erreur{background:#fdecea;color:#7a1c12;border:1px solid #f3b9b2}
.alerte-ok{background:#e8f6ee;color:#14532d;border:1px solid #b4dec2}
.grille-produits{display:flex;flex-wrap:wrap;gap:28px;align-items:stretch}

/* Cartes produit */
.carte{flex:1 1 320px;max-width:380px;background:#fff;border-radius:24px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 2px 4px rgba(0,39,75,.06),0 10px 20px -6px rgba(0,39,75,.12),0 28px 40px -20px rgba(0,39,75,.14);
  transition:transform .25s ease,box-shadow .25s ease}
.carte:hover{transform:translateY(-6px);box-shadow:0 2px 4px rgba(0,39,75,.06),0 18px 28px -6px rgba(0,39,75,.16),0 40px 60px -22px rgba(0,39,75,.18)}
.carte-image{position:relative;height:200px;background:linear-gradient(160deg,#d5ebf8 0%,#9fd0ec 100%);display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 -24px 30px -20px rgba(31,111,168,.35);overflow:hidden}
.carte-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.silhouette{width:180px;filter:drop-shadow(0 8px 10px rgba(0,39,75,.2))}
.etiquette-famille{position:absolute;right:14px;top:14px;background:#fde3c4;color:#6b3b00;font-weight:700;font-size:12px;padding:6px 12px;border-radius:999px}
.bandeau{position:absolute;left:0;right:0;bottom:0;background:rgba(23,50,77,.84);color:#fff;text-align:center;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:14px;padding:12px}
.carte-inactive .carte-image img{filter:grayscale(.6) opacity(.8)}
.carte-corps{padding:22px 24px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.carte h2{margin:0;font-family:'Playfair Display',Georgia,serif;font-size:28px;color:var(--marine);line-height:1.15}
.scientifique{margin:2px 0 0;font-style:italic;font-size:14px;color:var(--gris-clair)}
.description{margin:0;font-size:14px;color:var(--gris);line-height:1.55}
.details{margin:0;padding:0;list-style:none;font-size:13.5px;color:var(--gris);display:flex;flex-direction:column;gap:3px}
.prix{display:flex;align-items:baseline;gap:8px}
.prix-valeur{font-size:30px;font-weight:700;color:var(--marine)}
.prix-unite{font-size:15px;color:var(--gris-clair)}
.prix-note{margin:-6px 0 0;font-size:12.5px;color:var(--gris-clair)}
.jauge-texte{display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:6px}
.jauge-bas{color:#8a4b00}
.jauge{height:12px;background:#e3eef6;border-radius:999px;box-shadow:inset 0 2px 3px rgba(0,39,75,.15);overflow:hidden}
.jauge-rempli{height:100%;background:linear-gradient(90deg,var(--ciel),#2b79b3);border-radius:999px;transition:width .4s ease}
.jauge-rempli-bas{background:linear-gradient(90deg,#fcb972,var(--orange))}
.achat{margin-top:auto;padding-top:6px}
.stepper{display:inline-flex;align-items:center;background:#f0f6fb;border-radius:14px;box-shadow:inset 0 2px 4px rgba(0,39,75,.1)}
.stepper button{width:48px;height:48px;border:0;background:transparent;font-size:24px;color:var(--marine);cursor:pointer;border-radius:14px}
.stepper button:hover{background:rgba(31,111,168,.1)}
.stepper input{width:56px;height:48px;border:0;background:transparent;text-align:center;font-weight:700;font-size:18px;color:var(--texte);-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper input:focus,.stepper button:focus-visible,.btn:focus-visible,.champ input:focus,.champ textarea:focus,.prevenir-ligne input:focus{outline:3px solid var(--ciel);outline-offset:1px}
.epuise-bloc{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.epuise-bloc label,.prevenir label{font-size:13px;font-weight:600}
.prevenir-ligne{display:flex;flex-wrap:wrap;gap:10px}
.prevenir-ligne input{flex:1 1 180px;height:46px;border:1px solid var(--bord);border-radius:12px;padding:0 14px;font-size:15px;box-shadow:inset 0 2px 3px rgba(0,39,75,.08)}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border:0;border-radius:14px;background:var(--bleu);color:#fff;font-weight:700;font-size:15px;cursor:pointer;
  box-shadow:0 4px 0 var(--bleu-fonce),0 10px 16px rgba(31,111,168,.28);transition:transform .15s ease;text-decoration:none}
.btn:hover{transform:translateY(-2px);color:#fff}
.btn-clair{background:var(--ciel-pale);color:var(--marine);box-shadow:0 4px 0 #a7cfe8}
.btn-clair:hover{color:var(--marine)}
.btn-gros{height:56px;font-size:17px;border-radius:16px;box-shadow:0 5px 0 var(--bleu-fonce),0 14px 22px rgba(31,111,168,.28)}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* Commande */
.commande-panneau{margin-top:36px;background:#fff;border-radius:28px;padding:36px;display:flex;flex-wrap:wrap;gap:40px;
  box-shadow:0 2px 4px rgba(0,39,75,.06),0 18px 36px -14px rgba(0,39,75,.16)}
.commande-colonne{flex:1 1 340px;display:flex;flex-direction:column;gap:14px;min-width:0}
.commande-colonne h2{margin:0;font-family:'Playfair Display',Georgia,serif;font-size:32px;color:var(--marine)}
.recap-vide{margin:0;color:var(--gris-clair);font-size:15px}
.recap-ligne{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;background:#f0f6fb;border-radius:14px;margin-bottom:10px}
.recap-total{display:flex;justify-content:space-between;padding:6px 4px;font-weight:700;font-size:18px}
.note-orange{margin:0;padding:14px 16px;border-radius:14px;background:var(--orange-pale);color:#6b3b00;font-size:14px;line-height:1.55}
.champs{gap:14px}
.ligne-champs{display:flex;flex-wrap:wrap;gap:14px}
.champ{flex:1 1 160px;display:flex;flex-direction:column;gap:6px}
.champ label{font-size:13px;font-weight:600}
.champ input,.champ textarea{border:1px solid var(--bord);border-radius:12px;padding:0 14px;font-size:16px;box-shadow:inset 0 2px 3px rgba(0,39,75,.08);color:var(--texte);background:#fff}
.champ input{height:46px}
.champ textarea{padding:12px 14px;resize:vertical}

/* Pages simples (merci, vide) */
.carte-vide,.merci{background:#fff;border-radius:28px;padding:36px;box-shadow:0 18px 36px -14px rgba(0,39,75,.16);max-width:720px;margin:0 auto}
.carte-vide h2,.merci h1{margin:0 0 10px;font-family:'Playfair Display',Georgia,serif;color:var(--marine)}
.merci h1{font-size:36px}
.merci .recap-ligne{margin-bottom:8px}
.contenu-simple{margin-top:36px}

/* Pied */
.pied{background:#e3f1fa;color:var(--gris)}
.pied-interieur{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:28px;padding-bottom:28px;font-size:14px;line-height:1.6}
.pied strong{color:var(--marine)}

@media (max-width:640px){
  .conteneur{padding:0 18px}
  .logo{height:64px}
  .entete-texte{text-align:center;font-size:13px}
  .hero h1{font-size:34px}
  .hero-texte{font-size:16px}
  .carte{max-width:none}
  .commande-panneau,.carte-vide,.merci{padding:22px;border-radius:22px;gap:28px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.pied-credits{flex-basis:100%;font-size:11px;color:#6b8299;line-height:1.5}