/* ============================================================
   MGI Normandie · Boutique · charte alignée sur le site vitrine
   Indigo #322a75 · magenta #c80873 · Montserrat · v4 (02/08/2026)
   ============================================================ */

@font-face { font-family:"Montserrat"; src:url("../fonts/Montserrat-Regular.ttf"); font-weight:400; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("../fonts/Montserrat-SemiBold.ttf"); font-weight:600; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("../fonts/Montserrat-Bold.ttf"); font-weight:700; font-display:swap; }

:root {
  --indigo:#322a75; --indigo-deep:#241e57; --indigo-night:#1b1644;
  --magenta:#c80873; --mint:#6fbf9e; --orange:#f0944a; --gold:#e8b34b;
  --paper:#faf9f6; --ink:#221d4f;
  --bleu: var(--indigo);
  --bleu-fonce: var(--indigo-deep);
  --violet: var(--indigo);
  --vert-eau: var(--mint);
  --fond: var(--paper);
  --fond-2: #f1f0f7;
  --texte: var(--ink);
  --gris: #6b66a0;
  --blanc: #ffffff;
  --rayon: 14px;
  --ombre: 0 6px 24px rgba(50,42,117,.10);
  --grad: linear-gradient(118deg,var(--orange) 0%,var(--magenta) 32%,var(--indigo) 62%,var(--mint) 100%);
  --degrade: var(--grad);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font-family: "Montserrat", Verdana, sans-serif;
  font-size: 15.5px; line-height: 1.6; overflow-x: hidden;
}
img { max-width: 100%; }
a { color: var(--indigo); }
h1,h2,h3 { line-height: 1.15; letter-spacing: .01em; }

/* ---------- navigation fixe (style vitrine) ---------- */
nav#nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .35s,box-shadow .35s,padding .35s;padding:18px 0}
nav#nav .nav-wrap{max-width:1200px;margin:0 auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:24px}
nav#nav .logo .mgi-glyph{height:40px;width:auto;color:#fff;transition:height .3s,color .3s;display:block}
nav#nav ul{display:flex;gap:clamp(14px,2vw,30px);list-style:none;align-items:center;margin:0;padding:0}
nav#nav ul a{color:#fff;font-weight:600;font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;position:relative;padding:4px 0;white-space:nowrap;text-decoration:none}
nav#nav ul a::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:3px;background:var(--grad);transition:width .3s}
nav#nav ul a:hover::after,nav#nav ul a.active::after{width:100%}
nav#nav .cta{background:var(--magenta);color:#fff;padding:10px 20px;border-radius:40px;font-weight:700;display:inline-flex;align-items:center;gap:8px}
nav#nav .cta:hover{background:#a90662}
nav#nav .cta::after{display:none}
nav#nav.scrolled{background:#fff;box-shadow:0 4px 30px rgba(34,29,79,.12);padding:10px 0}
nav#nav.scrolled ul a{color:var(--indigo)}
nav#nav.scrolled .cta{color:#fff}
nav#nav.scrolled .logo .mgi-glyph{height:32px;color:var(--indigo)}
[data-cart-count]{display:none;align-items:center;justify-content:center;background:#fff;color:var(--magenta);border-radius:999px;min-width:20px;height:20px;font-size:.72rem;padding:0 5px}
.burger{display:none;background:none;border:none;cursor:pointer;width:34px;height:26px;position:relative;z-index:110}
.burger span{position:absolute;left:0;width:100%;height:3px;background:#fff;border-radius:2px;transition:.3s}
nav#nav.scrolled .burger span{background:var(--indigo)}
.burger span:nth-child(1){top:0}.burger span:nth-child(2){top:11px}.burger span:nth-child(3){top:22px}

/* bande dégradée signature */
.filet-degrade { height: 5px; background-image: var(--grad); }
.filet-degrade.img { background-image: url("../img/texture-degradee.jpg"); background-size: cover; background-position: center; }

/* ---------- héros de page (texture vitrine) ---------- */
.page-hero{padding:150px 0 70px;background:var(--indigo) url("/assets/texture-mgi.webp") center/cover no-repeat;color:#fff;text-align:center;position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(115% 85% at 50% 115%,rgba(27,22,68,.92) 0%,rgba(27,22,68,.35) 45%,transparent 70%)}
.page-hero .ph-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 6vw}
.page-hero h1{font-size:clamp(1.65rem,3.8vw,2.8rem);text-transform:uppercase;font-weight:800;margin:0}
.page-hero h1 em{font-style:normal;color:var(--mint)}
.page-hero p.ph-sub{margin:18px auto 0;max-width:720px;font-size:clamp(.95rem,1.5vw,1.12rem);font-weight:500;opacity:.93}
.crumb{display:inline-block;margin-bottom:16px;font-size:.76rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mint)}
.page-hero .actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.page-hero.compact{padding:128px 0 46px}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:28px}
.hero-badges span{border:1px solid rgba(255,255,255,.45);border-radius:40px;padding:7px 16px;font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.hero-badges b{color:var(--gold)}

/* ---------- boutons ---------- */
.btn{display:inline-block;border-radius:50px;padding:14px 30px;font-weight:700;font-size:.92rem;text-decoration:none;border:0;cursor:pointer;font-family:inherit;letter-spacing:.03em;transition:transform .25s,background .25s}
.btn:hover{transform:translateY(-3px)}
.btn-magenta{background:var(--magenta);color:#fff;box-shadow:0 10px 30px rgba(200,8,115,.35)}
.btn-magenta:hover{background:#a90662}
.btn-blanc{background:#fff;color:var(--indigo)}
.btn-blanc:hover{background:#efedf8}
.btn-contour{border:2px solid var(--indigo);color:var(--indigo);background:transparent}
.btn-contour:hover{background:var(--indigo);color:#fff}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* ---------- sections ---------- */
main { max-width: 1200px; margin: 0 auto; padding: 0 22px 80px; }
section.bloc { margin-top: 58px; }
h2.titre-section {
  font-size: 1.45rem; color: var(--bleu); margin: 0 0 6px;
}
p.sous-titre { color: var(--gris); margin: 0 0 26px; font-size: .92rem; }

/* points forts */
.points-forts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-top: 34px; }
.pf {
  background: #fff; border-radius: var(--rayon); padding: 18px 20px; box-shadow: var(--ombre);
  font-size: .86rem; display: flex; gap: 12px; align-items: flex-start;
}
.pf .ico {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px;
  background-image: var(--degrade); display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 1rem;
}
.pf b { color: var(--bleu); display: block; margin-bottom: 2px; }

/* cartes produits */
.grille-produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 22px; }
.carte {
  background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre);
  overflow: hidden; display: flex; flex-direction: column; position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}
.carte:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(47,40,112,.16); }
.carte .visuel {
  background: linear-gradient(160deg,#EFEFF6, #E3E3EF);
  min-height: 190px; display: flex; align-items: center; justify-content: center; padding: 18px;
}
.carte .visuel svg { max-width: 100%; height: auto; }
.carte .infos { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.carte h3 { margin: 0; font-size: 1.02rem; color: var(--bleu); }
.carte p.desc { margin: 0; font-size: .82rem; color: var(--gris); flex: 1; }
.carte .prix { font-weight: 700; font-size: .95rem; }
.carte .prix small { font-weight: 400; color: var(--gris); }
.carte .actions { display: flex; gap: 10px; margin-top: 6px; }
.carte .actions .btn { padding: 10px 16px; font-size: .8rem; flex: 1; text-align: center; }
.badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--magenta); color: #fff; font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 4px 11px;
}
.badge.ext { background: var(--vert-eau); }
.badge.pro { background: var(--orange); color: #201A00; }

/* bandeau configurateur */
.bandeau-config {
  margin-top: 64px; border-radius: 22px; overflow: hidden; position: relative;
  background: var(--bleu); color: #fff;
}
.bandeau-config .filet-degrade { position: absolute; top: 0; left: 0; right: 0; }
.bandeau-config .inner { padding: 46px 44px; display: flex; gap: 30px; align-items: center; flex-wrap: wrap; }
.bandeau-config h2 { margin: 0 0 10px; font-size: 1.5rem; }
.bandeau-config p { margin: 0 0 22px; color: #DDDAF0; max-width: 520px; }

/* ---------- configurateur ---------- */
.config-grid {
  display: grid; grid-template-columns: minmax(340px, 1fr) 420px; gap: 30px; margin-top: 28px;
}
@media (max-width: 980px) { .config-grid { grid-template-columns: 1fr; } }
.panneau {
  background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre); padding: 24px;
}
.zone-apercu {
  position: sticky; top: 92px; align-self: start;
  display: flex; flex-direction: column; gap: 14px;
}
.scene {
  background:
    radial-gradient(circle at 30% 20%, #ffffff 0%, transparent 55%),
    linear-gradient(160deg, #EDEDF5, #DCDCE9);
  border-radius: var(--rayon); min-height: 330px;
  display: flex; align-items: center; justify-content: center; padding: 26px;
}
.cotes { text-align: center; color: var(--gris); font-size: .8rem; }

fieldset.groupe {
  border: 0; padding: 0; margin: 0 0 22px;
}
fieldset.groupe legend {
  font-weight: 700; color: var(--bleu); font-size: .92rem; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
legend .num {
  background-image: var(--degrade); color: #fff; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-size: .72rem;
}
label.champ { display: block; font-size: .8rem; color: var(--gris); margin-bottom: 4px; }
select, input[type=text], input[type=number], input[type=email], input[type=tel], input[type=password], textarea {
  width: 100%; border: 1.5px solid #D9D8E6; border-radius: 10px; background: #fff;
  padding: 10px 12px; font-family: inherit; font-size: .9rem; color: var(--texte);
}
select:focus, input:focus, textarea:focus { outline: 2px solid var(--bleu); outline-offset: 0; border-color: var(--bleu); }
.ligne-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ligne-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* nuancier */
.nuancier { display: flex; flex-wrap: wrap; gap: 8px; }
.puce {
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer; position: relative;
  border: 2px solid rgba(0,0,0,.12); overflow: hidden;
}
.puce .demi { position: absolute; inset: 0 50% 0 0; }
.puce.sel { outline: 3px solid var(--magenta); outline-offset: 1px; }
.puce:hover { transform: scale(1.08); }
.nom-couleur { font-size: .8rem; color: var(--gris); margin-top: 6px; min-height: 1.2em; }

/* formats rapides */
.formats-rapides { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.chip {
  border: 1.5px solid #D9D8E6; background: #fff; border-radius: 999px;
  padding: 6px 13px; font-size: .78rem; cursor: pointer; font-family: inherit;
}
.chip.sel, .chip:hover { border-color: var(--bleu); color: var(--bleu); font-weight: 600; }

/* lignes de texte */
.ligne-texte { display: grid; grid-template-columns: 1fr 84px 44px 34px; gap: 8px; margin-bottom: 8px; align-items: center; }
.ligne-texte .sup { background: none; border: 0; color: var(--magenta); font-size: 1.05rem; cursor: pointer; }
.btn-mini {
  background: var(--fond-2); border: 1.5px dashed #C9C7DD; color: var(--bleu);
  border-radius: 10px; padding: 8px 14px; font-size: .8rem; cursor: pointer; font-family: inherit; font-weight: 600;
}
.btn-mini:hover { border-style: solid; }

/* encart prix */
.encart-prix {
  background: var(--bleu); color: #fff; border-radius: var(--rayon); padding: 20px 22px;
}
.encart-prix .ligne { display: flex; justify-content: space-between; font-size: .85rem; padding: 3px 0; color: #D5D2EA; }
.encart-prix .total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid #ffffff33; margin-top: 10px; padding-top: 12px; }
.encart-prix .total .ht { font-size: 1.55rem; font-weight: 700; color: #fff; }
.encart-prix .total .ttc { font-size: .8rem; color: #CFCBE8; }
.encart-prix .remise { color: var(--vert-eau); font-weight: 600; }
.encart-prix .btn { width: 100%; text-align: center; margin-top: 14px; }
.note-delai { font-size: .75rem; color: #CFCBE8; text-align: center; margin-top: 10px; }

/* ---------- panier / commande ---------- */
table.panier { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
table.panier th { background: var(--bleu); color: #fff; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; padding: 12px 14px; text-align: left; }
table.panier td { padding: 14px; border-bottom: 1px solid #EEEDF5; font-size: .88rem; vertical-align: middle; }
table.panier tr:nth-child(even) td { background: #FAFAFD; }
table.panier .mini-apercu svg { max-height: 64px; width: auto; }
input.qte { width: 70px; text-align: center; }

.recap-commande { background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre); padding: 24px; }
.modes-livraison label.mode {
  display: flex; gap: 12px; align-items: center; border: 1.5px solid #D9D8E6;
  border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; cursor: pointer; font-size: .88rem;
}
.modes-livraison label.mode.sel { border-color: var(--bleu); background: #F5F4FB; }
.modes-livraison .tarif { margin-left: auto; font-weight: 700; }

/* étapes */
.etapes { display: flex; gap: 10px; align-items: center; margin: 26px 0; font-size: .8rem; color: var(--gris); flex-wrap: wrap; }
.etapes .et { display: flex; gap: 8px; align-items: center; }
.etapes .rond { width: 24px; height: 24px; border-radius: 999px; background: #E4E3F0; color: var(--gris); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .74rem; }
.etapes .et.actif .rond { background-image: var(--degrade); color: #fff; }
.etapes .et.actif { color: var(--bleu); font-weight: 600; }
.etapes .sep { width: 30px; height: 2px; background: #E4E3F0; }

/* ---------- pied de page ---------- */
footer.site{background:var(--indigo-night);color:#cfcbe8;margin-top:80px;font-size:.85rem}
footer .inner{max-width:1200px;margin:0 auto;padding:56px 22px 30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px}
footer h4{color:#fff;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 12px}
footer a{color:#cfcbe8;text-decoration:none}
footer a:hover{color:#fff}
footer .legal{border-top:1px solid rgba(255,255,255,.12);padding:18px 22px;text-align:center;font-size:.72rem;opacity:.65}
footer .logo-pied img{height:44px;margin-bottom:14px}

/* divers */
.msg-vide { background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre); padding: 46px; text-align: center; color: var(--gris); }
.alerte { background: #FFF6E5; border: 1px solid #F7A600; color: #6b4a00; border-radius: 10px; padding: 12px 16px; font-size: .84rem; }
.ok { background: #EAF7F1; border: 1px solid #5FBFA0; color: #1E5B45; }
/* ---------- ajustements charte vitrine ---------- */
h2.titre-section{text-transform:uppercase;font-weight:800;letter-spacing:.02em;font-size:clamp(1.25rem,2.4vw,1.7rem)}
h2.titre-section .bar{display:block;width:64px;height:5px;background:var(--grad);border-radius:4px;margin-top:12px}

@media (max-width:1080px){
  nav#nav ul{position:fixed;inset:0;background:var(--indigo-night);flex-direction:column;justify-content:center;gap:28px;transform:translateX(100%);transition:transform .4s}
  nav#nav ul.open{transform:none}
  nav#nav ul a{color:#fff!important;font-size:1.02rem}
  .burger{display:block}
}
@media (max-width:700px){
  .page-hero{padding:118px 0 50px}
  .page-hero.compact{padding:110px 0 40px}
  .heros-inner { padding: 44px 22px 52px; }
}

.page-hero:not(.compact){min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center}

/* ============================================================
   Correction du debordement de la barre de navigation - 06/08/2026
   La barre tenait sur une seule ligne jusqu a ~1650 px alors que le
   menu burger ne prenait le relais qu en dessous de 1080 px : entre
   les deux, les derniers liens sortaient de l ecran.
   Trois paliers : >=1346 px confortable / 1211-1345 compact / <=1210 burger.
   ============================================================ */
@media (min-width: 1346px){
  nav#nav .nav-wrap      { max-width: 1400px !important; gap: 16px !important; }
  nav#nav .nav-wrap > ul { gap: 16px !important; }
  nav#nav .nav-wrap > ul a{ font-size: 13.5px !important; letter-spacing: .01em !important; }
}
@media (min-width: 1211px) and (max-width: 1345px){
  nav#nav .nav-wrap      { max-width: 1400px !important; gap: 12px !important; }
  nav#nav .nav-wrap > ul { gap: 8px !important; }
  nav#nav .nav-wrap > ul a{ font-size: 12.5px !important; letter-spacing: 0 !important; }
}
@media (max-width: 1320px){
  nav#nav ul{
    position: fixed; inset: 0;
    background: var(--indigo-night);
    flex-direction: column; justify-content: center; gap: 28px;
    transform: translateX(100%);
    transition: transform .4s ease;
  }
  nav#nav ul.open { transform: none; }
  nav#nav ul a    { color: #fff !important; font-size: 1.02rem; }
  nav#nav .burger { display: block; }
}


/* ------------------------------------------------------------------
   Barre du haut : reglage continu du bandeau et du menu.

   Les pages contiennent un <style> inline qui force
   « ul#menu { gap:17px !important } » des 1081 px, ce qui annulait les
   paliers definis plus haut dans ce fichier. Avec onze entrees, le
   bandeau demandait 1543 px pour 1504 disponibles et le bouton Panier
   passait sous le bord droit. Ces regles passent au-dessus du bloc
   inline (selecteur plus specifique + !important) et font varier
   l espacement et le corps du texte avec la largeur, du seuil burger
   (1320 px) aux grands ecrans.
   ------------------------------------------------------------------ */
@media (min-width: 1321px) {
  body nav#nav .nav-wrap {
    max-width: 1600px !important;
    gap: clamp(12px, 1.1vw, 22px) !important;
    padding-left: clamp(12px, 1vw, 24px) !important;
    padding-right: clamp(12px, 1vw, 24px) !important;
  }
  body nav#nav .nav-wrap > ul#menu { gap: clamp(8px, .65vw, 14px) !important; }
  body nav#nav .nav-wrap > ul#menu li > a:not(.cta) {
    font-size: clamp(11.5px, .82vw, 13.5px) !important;
    letter-spacing: .01em !important;
  }
}

/* correctif-livraison-2608 */
.modes-livraison label.mode { flex-wrap: wrap; max-width: 100%; }
.modes-livraison label.mode > span { min-width: 0; overflow-wrap: anywhere; }
.modes-livraison .tarif { white-space: nowrap; }
.encart-prix label[style*="FFF7EA"] { color: var(--texte); }
fieldset.groupe { min-width: 0; }
.panneau { min-width: 0; overflow: hidden; }

/* ---------------------------------------------------------------
   30/08/2026 - debordement horizontal sur mobile.
   Le corps de page est un conteneur flex en colonne : ses enfants
   ne sont pas etires, ils sont dimensionnes par leur contenu. Une
   grille en repeat(auto-fit, minmax(...)) se deploie alors sur sa
   largeur maximale au lieu de se replier -- 1038 px de large dans
   un ecran de 386 px sur la page tampons. On force la largeur des
   blocs de premier niveau et on autorise le retrait sous la
   largeur mini du contenu. Les elements flottants en position
   fixed sont volontairement exclus.
   --------------------------------------------------------------- */
@media (max-width: 700px) {
  body > main, body > header, body > section, body > article,
  body > footer, body > div[class] {
    width: 100%;
    min-width: 0;
  }
  main, main > section, main section, main article,
  main fieldset, main .panneau, main .config-grid {
    min-width: 0;
  }
}

/* Tableaux larges : on les rend defilables au doigt plutot que de
   laisser la page deborder (grille de prix des plaques de rue). */
@media (max-width: 700px) {
  .grille-qte, div:has(> table) {
    overflow-x: auto;
    max-width: 100%;
  }
}

/* Barre de navigation : sur les pages ou elle reste en ligne, les
   liens depassaient a droite (constate sur livraison.html). */
@media (max-width: 700px) {
  nav.nav { flex-wrap: wrap; max-width: 100%; }
}