/* ==========================================================================
   alvec, pages intérieures : catalogue, fiche produit, tarifs, support,
   à propos, contact, mentions légales, compte, commande, 404.
   Même système que la page d'accueil : unité --u, accent bleu unique,
   cartes 12 unités, boutons 8 unités, bandeaux marine.
   ========================================================================== */

.page-main{background:var(--page)}

/* ---------------- Bandeau de titre ---------------- */
.bandeau{
  position:relative;color:#fff;overflow:hidden;
  background:
    radial-gradient(60% 120% at 82% 50%, rgba(10,99,251,.28), transparent 60%),
    linear-gradient(90deg, #001633 0%, #002249 45%, #002d60 100%);
}
.bandeau-in{padding:calc(52 * var(--u)) calc(52 * var(--u)) calc(54 * var(--u))}
.bandeau h1{font-size:calc(38 * var(--u));font-weight:700;line-height:1.1;letter-spacing:-.02em;color:#fafafb}
.bandeau .sub{margin-top:calc(12 * var(--u));font-size:calc(17 * var(--u));line-height:1.45;color:#dbe4f3;max-width:calc(760 * var(--u))}

/* Fiche produit : logo + texte + prix */
.bandeau-produit{display:grid;grid-template-columns:calc(140 * var(--u)) minmax(0,1fr) auto;gap:calc(36 * var(--u));align-items:center}
.bandeau-produit .logo{
  width:calc(140 * var(--u));height:calc(140 * var(--u));border-radius:calc(20 * var(--u));
  background:rgba(255,255,255,.96);display:grid;place-items:center;
  box-shadow:0 20px 50px -24px rgba(0,0,0,.6);
}
.bandeau-produit .logo img{width:calc(96 * var(--u));height:auto}
.bandeau-produit .cat{font-size:calc(17 * var(--u));color:#dbe4f3;margin-top:calc(8 * var(--u))}
.bandeau-produit .prix{text-align:right}
.bandeau-produit .prix b{display:block;font-size:calc(34 * var(--u));font-weight:700;letter-spacing:-.02em}
.bandeau-produit .prix span{display:block;font-size:calc(13 * var(--u));color:#b9c7e4;margin-top:calc(2 * var(--u))}
.bandeau-produit .actions{display:flex;gap:calc(12 * var(--u));margin-top:calc(16 * var(--u));justify-content:flex-end}

/* ---------------- Sections ---------------- */
.section{padding:calc(48 * var(--u)) 0}
.section + .section{padding-top:0}
.section-tete{margin-bottom:calc(24 * var(--u))}
.section-tete h2{font-size:calc(26 * var(--u));font-weight:700;line-height:1.2;letter-spacing:-.015em;color:var(--ink)}
.section-tete p{margin-top:calc(6 * var(--u));font-size:calc(15 * var(--u));color:var(--ink-3);max-width:calc(720 * var(--u))}
.section-blanc{background:#fdfdfe;padding:calc(48 * var(--u)) 0}
.texte{font-size:calc(15 * var(--u));line-height:1.65;color:var(--ink-3);max-width:calc(760 * var(--u))}
.texte + .texte{margin-top:calc(12 * var(--u))}

/* Boutons des pages intérieures */
.btn-page{height:calc(46 * var(--u));padding:0 calc(24 * var(--u));border-radius:calc(8 * var(--u));font-size:calc(15 * var(--u))}
.btn-page i{font-size:calc(18 * var(--u))}
.btn-blanc{background:#fff;color:var(--blue-700);border-color:#fff}
.btn-blanc:hover{background:#eef4ff;border-color:#eef4ff}
.btn-ghost{background:transparent;color:var(--blue-link);border-color:#cfe0fa}
.btn-ghost:hover{background:#eef4ff}

/* ---------------- Tuiles (valeurs, canaux, étapes, configuration) ---------------- */
.tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(16 * var(--u))}
.tuiles-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tuiles-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tuile{
  background:#fff;border:calc(1 * var(--u)) solid #dfe6ef;border-radius:calc(12 * var(--u));
  padding:calc(24 * var(--u));transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.tuile:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(10,30,70,.28)}
.tuile > i{font-size:calc(34 * var(--u));color:var(--blue);line-height:1;display:block}
.tuile .num{
  display:grid;place-items:center;width:calc(36 * var(--u));height:calc(36 * var(--u));border-radius:50%;
  background:#eef4ff;color:var(--blue-700);font-weight:700;font-size:calc(15 * var(--u));
}
.tuile h3{margin-top:calc(14 * var(--u));font-size:calc(17 * var(--u));font-weight:700;color:var(--ink)}
.tuile p{margin-top:calc(6 * var(--u));font-size:calc(14 * var(--u));line-height:1.55;color:var(--ink-3)}
.tuile a.lien{display:inline-block;margin-top:calc(10 * var(--u));font-size:calc(14.5 * var(--u));font-weight:600;color:var(--blue-link);text-decoration:none}
.tuile a.lien:hover{text-decoration:underline}
.tuile ul{margin-top:calc(10 * var(--u))}
.tuile li{font-size:calc(14 * var(--u));color:var(--ink-3);padding:calc(4 * var(--u)) 0}

/* Liste de fonctionnalités (fiche produit) */
.liste-fonctions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(12 * var(--u)) calc(24 * var(--u))}
.liste-fonctions li{
  display:flex;gap:calc(12 * var(--u));align-items:flex-start;
  font-size:calc(15 * var(--u));line-height:1.5;color:var(--ink-3);
  padding:calc(14 * var(--u)) calc(16 * var(--u));background:#fff;border:calc(1 * var(--u)) solid #dfe6ef;border-radius:calc(10 * var(--u));
}
.liste-fonctions i{font-size:calc(22 * var(--u));color:var(--blue);flex:none;margin-top:calc(1 * var(--u))}
.liste-simple li{display:flex;gap:calc(10 * var(--u));align-items:flex-start;font-size:calc(15 * var(--u));line-height:1.5;color:var(--ink-3);padding:calc(6 * var(--u)) 0}
.liste-simple i{font-size:calc(20 * var(--u));color:var(--blue);flex:none;margin-top:calc(2 * var(--u))}

/* ---------------- Tableau comparatif ---------------- */
.tableau-wrap{overflow-x:auto;background:#fff;border:calc(1 * var(--u)) solid #dfe6ef;border-radius:calc(12 * var(--u))}
.tableau{width:100%;border-collapse:collapse;font-size:calc(14.5 * var(--u))}
.tableau th,.tableau td{padding:calc(14 * var(--u)) calc(18 * var(--u));text-align:left;border-bottom:calc(1 * var(--u)) solid #e6ecf3}
.tableau thead th{font-size:calc(13 * var(--u));text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);background:#f6f9fd}
.tableau th:not(:first-child),.tableau td:not(:first-child){text-align:center;width:calc(130 * var(--u))}
.tableau tbody tr:last-child td{border-bottom:0}
.tableau td i{font-size:calc(22 * var(--u));line-height:1}
.tableau .oui{color:var(--blue)}
.tableau .non{color:#c3ccd8}
.tableau .app{display:inline-flex;align-items:center;gap:calc(8 * var(--u));font-weight:700;color:var(--ink);text-transform:none;letter-spacing:0;font-size:calc(14.5 * var(--u))}
.tableau .app img{width:calc(24 * var(--u));height:auto}

/* ---------------- Accordéon (FAQ) ---------------- */
.faq{max-width:calc(820 * var(--u));border-top:calc(1 * var(--u)) solid #dfe6ef}
.faq-item{border-bottom:calc(1 * var(--u)) solid #dfe6ef}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:calc(16 * var(--u));width:100%;
  padding:calc(18 * var(--u)) calc(4 * var(--u));background:none;border:0;cursor:pointer;text-align:left;
  font-size:calc(16 * var(--u));font-weight:600;color:var(--ink);transition:color .2s var(--ease);
}
.faq-q:hover{color:var(--blue-link)}
.faq-q i{font-size:calc(20 * var(--u));color:var(--blue);flex:none;transition:transform .3s var(--ease)}
.faq-q[aria-expanded="true"] i{transform:rotate(180deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.faq-a > div{overflow:hidden}
.faq-a p{padding:0 calc(4 * var(--u)) calc(18 * var(--u));font-size:calc(15 * var(--u));line-height:1.6;color:var(--ink-3);max-width:calc(720 * var(--u))}
.faq-item.is-open .faq-a{grid-template-rows:1fr}

/* ---------------- Formulaires ---------------- */
.formulaire{background:#fff;border:calc(1 * var(--u)) solid #dfe6ef;border-radius:calc(12 * var(--u));padding:calc(28 * var(--u))}
.formulaire h2,.formulaire h3{font-size:calc(20 * var(--u));font-weight:700;color:var(--ink)}
.formulaire .sub{margin-top:calc(4 * var(--u));font-size:calc(14 * var(--u));color:var(--ink-3)}
.grille-champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(16 * var(--u));margin-top:calc(20 * var(--u))}
.champ{display:flex;flex-direction:column;gap:calc(6 * var(--u))}
.champ.large{grid-column:1 / -1}
.champ label{font-size:calc(13.5 * var(--u));font-weight:600;color:var(--ink-2)}
.champ .aide{font-size:calc(12.5 * var(--u));color:#6d7588}
.champ input,.champ select,.champ textarea{
  font:inherit;font-size:calc(15 * var(--u));color:var(--ink);
  padding:calc(11 * var(--u)) calc(14 * var(--u));border:calc(1 * var(--u)) solid #cfd8e3;border-radius:calc(8 * var(--u));
  background:#fff;outline:none;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);width:100%;
}
.champ textarea{min-height:calc(140 * var(--u));resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(10,99,251,.15)}
.champ.invalide input,.champ.invalide select,.champ.invalide textarea{border-color:#d92d20}
.champ .erreur{font-size:calc(12.5 * var(--u));color:#b42318;display:none}
.champ.invalide .erreur{display:block}
.case{display:flex;align-items:flex-start;gap:calc(10 * var(--u));font-size:calc(14.5 * var(--u));color:var(--ink-3);line-height:1.5}
.case input{width:calc(18 * var(--u));height:calc(18 * var(--u));margin-top:calc(2 * var(--u));accent-color:var(--blue);flex:none}
.case a{color:var(--blue-link);font-weight:600}
.form-actions{display:flex;gap:calc(12 * var(--u));align-items:center;margin-top:calc(20 * var(--u));flex-wrap:wrap}
.form-erreur{font-size:calc(14 * var(--u));color:#b42318;margin-top:calc(12 * var(--u))}
.form-ok{font-size:calc(14 * var(--u));color:#0f6a14;margin-top:calc(12 * var(--u))}
.merci{text-align:center;padding:calc(24 * var(--u)) 0}
.merci i{font-size:calc(48 * var(--u));color:#0f6a14}
.merci h3{margin-top:calc(10 * var(--u));font-size:calc(22 * var(--u));color:var(--ink)}
.merci p{margin:calc(8 * var(--u)) auto 0;max-width:calc(520 * var(--u));font-size:calc(15 * var(--u));line-height:1.55;color:var(--ink-3)}
.merci .form-actions{justify-content:center}

/* Deux colonnes (contact : formulaire + coordonnées ; commande : étapes + récapitulatif) */
.deux-colonnes{display:grid;grid-template-columns:minmax(0,1fr) calc(360 * var(--u));gap:calc(24 * var(--u));align-items:start}
.coordonnees{background:#fff;border:calc(1 * var(--u)) solid #dfe6ef;border-radius:calc(12 * var(--u));padding:calc(24 * var(--u))}
.coordonnees h2{font-size:calc(18 * var(--u));font-weight:700;color:var(--ink)}
.coordonnees ul{margin-top:calc(14 * var(--u))}
.coordonnees li{display:flex;gap:calc(12 * var(--u));align-items:flex-start;padding:calc(10 * var(--u)) 0;border-top:calc(1 * var(--u)) solid #e9eef4;font-size:calc(14.5 * var(--u));color:var(--ink-3);line-height:1.5}
.coordonnees li i{font-size:calc(22 * var(--u));color:var(--blue);flex:none}
.coordonnees li b{display:block;font-size:calc(13 * var(--u));color:var(--ink-2)}
.coordonnees a{color:var(--ink);text-decoration:none;font-weight:600}
.coordonnees a:hover{color:var(--blue-link)}

/* ---------------- Tarifs ---------------- */
.tarifs-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(16 * var(--u))}
.tarif-carte{
  display:flex;flex-direction:column;background:#fff;border:calc(1 * var(--u)) solid #dfe6ef;border-radius:calc(12 * var(--u));
  padding:calc(24 * var(--u));transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.tarif-carte:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(10,30,70,.28)}
.tarif-carte img{width:calc(64 * var(--u));height:calc(64 * var(--u));object-fit:contain;object-position:left center}
.tarif-carte h3{margin-top:calc(14 * var(--u));font-size:calc(21 * var(--u));font-weight:700;color:var(--ink)}
.tarif-carte .cat{margin-top:calc(4 * var(--u));font-size:calc(13.5 * var(--u));line-height:1.4;color:var(--ink-3);min-height:calc(38 * var(--u))}
.tarif-carte .prix{margin-top:calc(16 * var(--u));font-size:calc(26 * var(--u));font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.tarif-carte .prix small{display:block;font-size:calc(13 * var(--u));font-weight:500;color:var(--ink-3);letter-spacing:0;margin-top:calc(2 * var(--u))}
.tarif-carte .actions{display:grid;gap:calc(8 * var(--u));margin-top:auto;padding-top:calc(18 * var(--u))}
.tarif-carte .actions .btn{height:calc(42 * var(--u));border-radius:calc(8 * var(--u));font-size:calc(14.5 * var(--u))}
.pack{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:calc(28 * var(--u));align-items:center;
  margin-top:calc(16 * var(--u));padding:calc(28 * var(--u));border-radius:calc(14 * var(--u));color:#fff;
  background:linear-gradient(90deg,#001d40 0%,#0a3d8f 60%,#0a63fb 100%);
}
.pack .logo{width:calc(88 * var(--u));height:calc(88 * var(--u));border-radius:calc(16 * var(--u));background:rgba(255,255,255,.96);display:grid;place-items:center}
.pack .logo img{width:calc(56 * var(--u));height:auto}
.pack .badge-pack{display:inline-block;padding:calc(4 * var(--u)) calc(10 * var(--u));border-radius:999px;background:rgba(255,255,255,.16);font-size:calc(12 * var(--u));font-weight:600;letter-spacing:.02em}
.pack h3{margin-top:calc(10 * var(--u));font-size:calc(24 * var(--u));font-weight:700}
.pack p{margin-top:calc(6 * var(--u));font-size:calc(15 * var(--u));color:#dbe4f3;line-height:1.5}
.pack .prix{text-align:right}
.pack .prix b{display:block;font-size:calc(34 * var(--u));font-weight:700;letter-spacing:-.02em}
.pack .prix s{display:block;font-size:calc(14 * var(--u));color:#b9c7e4}
.pack .prix small{display:block;font-size:calc(13 * var(--u));color:#dbe4f3;margin-top:calc(2 * var(--u))}
.pack .actions{margin-top:calc(14 * var(--u));display:flex;justify-content:flex-end}
.inclus{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(12 * var(--u))}
.inclus li{display:flex;align-items:center;gap:calc(10 * var(--u));font-size:calc(14.5 * var(--u));color:var(--ink-3);background:#fff;border:calc(1 * var(--u)) solid #dfe6ef;border-radius:calc(10 * var(--u));padding:calc(12 * var(--u)) calc(14 * var(--u))}
.inclus i{font-size:calc(22 * var(--u));color:var(--blue)}
.bande-cta{
  display:flex;align-items:center;justify-content:space-between;gap:calc(24 * var(--u));flex-wrap:wrap;
  padding:calc(28 * var(--u)) calc(32 * var(--u));border-radius:calc(14 * var(--u));
  background:#fff;border:calc(1 * var(--u)) solid #dfe6ef;
}
.bande-cta h2{font-size:calc(22 * var(--u));font-weight:700;color:var(--ink)}
.bande-cta p{margin-top:calc(4 * var(--u));font-size:calc(15 * var(--u));color:var(--ink-3)}
.bande-cta.marine{background:linear-gradient(90deg,#001d40 0%,#002d60 100%);border:0;color:#fff}
.bande-cta.marine h2{color:#fff}
.bande-cta.marine p{color:#dbe4f3}

/* ---------------- Mentions légales ---------------- */
.legal{max-width:calc(780 * var(--u));background:#fff;border:calc(1 * var(--u)) solid #dfe6ef;border-radius:calc(12 * var(--u));padding:calc(36 * var(--u)) calc(40 * var(--u))}
.legal .maj{font-size:calc(13 * var(--u));color:#6d7588}
.legal-note{margin-top:calc(10 * var(--u));padding:calc(10 * var(--u)) calc(14 * var(--u));border-radius:calc(8 * var(--u));background:#eef4ff;color:var(--blue-700);font-size:calc(13.5 * var(--u))}
html[lang="fr"] .legal-note,html[lang="en"] .legal-note{display:none}
.legal h2{margin-top:calc(26 * var(--u));font-size:calc(19 * var(--u));font-weight:700;color:var(--ink)}
.legal p{margin-top:calc(8 * var(--u));font-size:calc(15 * var(--u));line-height:1.7;color:var(--ink-3)}

/* ---------------- Compte ---------------- */
.compte-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(24 * var(--u))}
.demo-note{display:flex;gap:calc(10 * var(--u));align-items:center;margin-bottom:calc(20 * var(--u));padding:calc(12 * var(--u)) calc(16 * var(--u));border-radius:calc(10 * var(--u));background:#eef4ff;color:var(--blue-700);font-size:calc(13.5 * var(--u))}
.demo-note i{font-size:calc(20 * var(--u));flex:none}
.compte-tete{display:flex;align-items:center;justify-content:space-between;gap:calc(16 * var(--u));flex-wrap:wrap;margin-bottom:calc(20 * var(--u))}
.compte-tete h2{font-size:calc(24 * var(--u));font-weight:700;color:var(--ink)}
.compte-tete p{font-size:calc(14 * var(--u));color:var(--ink-3);margin-top:calc(2 * var(--u))}
.onglets{display:flex;gap:calc(4 * var(--u));border-bottom:calc(1 * var(--u)) solid #dfe6ef;margin-bottom:calc(24 * var(--u))}
.onglets button{
  position:relative;background:none;border:0;cursor:pointer;padding:calc(12 * var(--u)) calc(18 * var(--u));
  font-size:calc(15 * var(--u));font-weight:600;color:var(--ink-3);transition:color .2s var(--ease);
}
.onglets button::after{content:"";position:absolute;left:0;right:0;bottom:calc(-1 * var(--u));height:calc(3 * var(--u));border-radius:2px;background:var(--blue-link);transform:scaleX(0);transition:transform .3s var(--ease)}
.onglets button[aria-selected="true"]{color:var(--blue-link)}
.onglets button[aria-selected="true"]::after{transform:scaleX(1)}
.commande-liste{display:grid;gap:calc(14 * var(--u))}
.commande-carte{background:#fff;border:calc(1 * var(--u)) solid #dfe6ef;border-radius:calc(12 * var(--u));padding:calc(20 * var(--u)) calc(24 * var(--u))}
.commande-carte header{display:flex;justify-content:space-between;gap:calc(16 * var(--u));flex-wrap:wrap;align-items:center}
.commande-carte header b{font-size:calc(16 * var(--u));color:var(--ink)}
.commande-carte header time{font-size:calc(13.5 * var(--u));color:var(--ink-3);margin-left:calc(10 * var(--u))}
.statut{display:inline-flex;align-items:center;gap:calc(6 * var(--u));padding:calc(4 * var(--u)) calc(10 * var(--u));border-radius:999px;font-size:calc(12.5 * var(--u));font-weight:600}
.statut.attente{background:#fff4e5;color:#9a5b00}
.statut.validee{background:#e8f6f0;color:#0f6a14}
.commande-carte ul{margin-top:calc(12 * var(--u))}
.commande-carte li{display:flex;justify-content:space-between;gap:calc(12 * var(--u));font-size:calc(14.5 * var(--u));color:var(--ink-3);padding:calc(6 * var(--u)) 0;border-top:calc(1 * var(--u)) solid #eef2f7}
.commande-carte .total{margin-top:calc(10 * var(--u));text-align:right;font-weight:700;color:var(--ink);font-size:calc(15 * var(--u))}
.licence-carte{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:calc(16 * var(--u));align-items:center;background:#fff;border:calc(1 * var(--u)) solid #dfe6ef;border-radius:calc(12 * var(--u));padding:calc(16 * var(--u)) calc(20 * var(--u))}
.licence-carte img{width:calc(48 * var(--u));height:auto}
.licence-carte b{display:block;font-size:calc(16 * var(--u));color:var(--ink)}
.licence-carte code{display:inline-block;margin-top:calc(4 * var(--u));font-family:"JetBrains Mono",Consolas,monospace;font-size:calc(14 * var(--u));letter-spacing:.04em;color:var(--blue-700);background:#eef4ff;padding:calc(3 * var(--u)) calc(8 * var(--u));border-radius:calc(6 * var(--u))}
.licence-carte .attente-cle{display:block;margin-top:calc(4 * var(--u));font-size:calc(13 * var(--u));font-weight:600;color:var(--blue-700)}
.licence-carte small{display:block;margin-top:calc(4 * var(--u));font-size:calc(12.5 * var(--u));color:var(--ink-3)}
.vide-etat{text-align:center;padding:calc(36 * var(--u)) calc(20 * var(--u));background:#fff;border:calc(1 * var(--u)) dashed #cfd8e3;border-radius:calc(12 * var(--u))}
.vide-etat i{font-size:calc(40 * var(--u));color:#c3d0e2}
.vide-etat p{margin-top:calc(8 * var(--u));font-size:calc(15 * var(--u));color:var(--ink-3)}
.vide-etat .btn{margin-top:calc(16 * var(--u))}

/* ---------------- Commande ---------------- */
.etapes{display:flex;gap:calc(8 * var(--u));margin-bottom:calc(24 * var(--u));counter-reset:etape}
.etapes li{
  flex:1;display:flex;align-items:center;gap:calc(10 * var(--u));padding:calc(12 * var(--u)) calc(14 * var(--u));
  border-radius:calc(10 * var(--u));background:#fff;border:calc(1 * var(--u)) solid #dfe6ef;font-size:calc(14 * var(--u));font-weight:600;color:var(--ink-3);
}
.etapes li::before{
  counter-increment:etape;content:counter(etape);display:grid;place-items:center;flex:none;
  width:calc(26 * var(--u));height:calc(26 * var(--u));border-radius:50%;background:#e9eef5;color:var(--ink-3);font-size:calc(13 * var(--u));
}
.etapes li.actif{border-color:var(--blue);color:var(--ink)}
.etapes li.actif::before{background:var(--blue);color:#fff}
.etapes li.fait{color:#0f6a14}
.etapes li.fait::before{background:#e8f6f0;color:#0f6a14;content:"✓"}
.etape-panneau{display:none}
.etape-panneau.actif{display:block;animation:etapeIn .4s var(--ease) both}
@keyframes etapeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lignes-panier{display:grid;gap:calc(10 * var(--u))}
.ligne-panier{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;gap:calc(16 * var(--u));align-items:center;background:#fff;border:calc(1 * var(--u)) solid #dfe6ef;border-radius:calc(12 * var(--u));padding:calc(14 * var(--u)) calc(18 * var(--u))}
.ligne-panier img{width:calc(48 * var(--u));height:auto}
.ligne-panier b{display:block;font-size:calc(16 * var(--u));color:var(--ink)}
.ligne-panier small{display:block;font-size:calc(13 * var(--u));color:var(--ink-3)}
.ligne-panier .montant{font-weight:700;color:var(--ink);font-size:calc(15 * var(--u));min-width:calc(100 * var(--u));text-align:right}
.ligne-panier .suppr{background:none;border:0;cursor:pointer;color:#8a94a6;font-size:calc(20 * var(--u));padding:calc(6 * var(--u));border-radius:calc(6 * var(--u))}
.ligne-panier .suppr:hover{color:#b42318;background:#fdecec}
.recap{position:sticky;top:calc(96 * var(--u));background:#fff;border:calc(1 * var(--u)) solid #dfe6ef;border-radius:calc(12 * var(--u));padding:calc(22 * var(--u))}
.recap h2{font-size:calc(18 * var(--u));font-weight:700;color:var(--ink)}
.recap ul{margin-top:calc(12 * var(--u))}
.recap li{display:flex;justify-content:space-between;gap:calc(12 * var(--u));font-size:calc(14 * var(--u));color:var(--ink-3);padding:calc(7 * var(--u)) 0;border-top:calc(1 * var(--u)) solid #eef2f7}
.recap .total{display:flex;justify-content:space-between;margin-top:calc(10 * var(--u));padding-top:calc(12 * var(--u));border-top:calc(2 * var(--u)) solid #dfe6ef;font-size:calc(16 * var(--u));font-weight:700;color:var(--ink)}
.recap .note{margin-top:calc(12 * var(--u));font-size:calc(12.5 * var(--u));color:#6d7588;line-height:1.5}
.choix-paiement{display:grid;gap:calc(10 * var(--u))}
.choix-paiement label{
  display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:calc(14 * var(--u));align-items:center;
  padding:calc(14 * var(--u)) calc(16 * var(--u));background:#fff;border:calc(1 * var(--u)) solid #dfe6ef;border-radius:calc(10 * var(--u));cursor:pointer;
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.choix-paiement label:has(input:checked){border-color:var(--blue);background:#f4f8ff}
.choix-paiement label.off{opacity:.55;cursor:not-allowed}
.choix-paiement input{accent-color:var(--blue);width:calc(18 * var(--u));height:calc(18 * var(--u))}
.choix-paiement i{font-size:calc(26 * var(--u));color:var(--blue)}
.choix-paiement b{display:block;font-size:calc(15 * var(--u));color:var(--ink)}
.choix-paiement span{display:block;font-size:calc(13 * var(--u));color:var(--ink-3)}
.operateurs{margin:calc(8 * var(--u)) 0 0 calc(64 * var(--u))}
.confirmation{background:#fff;border:calc(1 * var(--u)) solid #dfe6ef;border-radius:calc(12 * var(--u));padding:calc(28 * var(--u))}
.confirmation .tete{display:flex;gap:calc(16 * var(--u));align-items:center}
.confirmation .tete i{font-size:calc(44 * var(--u));color:#0f6a14}
.confirmation h2{font-size:calc(22 * var(--u));font-weight:700;color:var(--ink)}
.confirmation .numero{margin-top:calc(16 * var(--u));display:inline-flex;flex-direction:column;gap:calc(2 * var(--u));padding:calc(12 * var(--u)) calc(18 * var(--u));border-radius:calc(10 * var(--u));background:#eef4ff}
.confirmation .numero span{font-size:calc(12.5 * var(--u));color:var(--blue-700)}
.confirmation .numero b{font-size:calc(22 * var(--u));letter-spacing:.04em;color:var(--blue-700)}
.confirmation .instructions{margin-top:calc(20 * var(--u));padding:calc(16 * var(--u)) calc(18 * var(--u));border-radius:calc(10 * var(--u));background:#fff8ec;border:calc(1 * var(--u)) solid #f5dfb3}
.confirmation .instructions h3{font-size:calc(16 * var(--u));color:#7a4a00}
.confirmation .instructions p{margin-top:calc(6 * var(--u));font-size:calc(14.5 * var(--u));line-height:1.55;color:#5c3d0f}
.confirmation h3.sous{margin-top:calc(22 * var(--u));font-size:calc(17 * var(--u));color:var(--ink)}
.confirmation .lignes-conf{margin-top:calc(10 * var(--u));max-width:calc(520 * var(--u))}
.confirmation .lignes-conf li{display:flex;justify-content:space-between;gap:calc(12 * var(--u));font-size:calc(14.5 * var(--u));color:var(--ink-3);padding:calc(7 * var(--u)) 0;border-top:calc(1 * var(--u)) solid #eef2f7}
.confirmation .lignes-conf li.total{font-weight:700;color:var(--ink);border-top:calc(2 * var(--u)) solid #dfe6ef}
.confirmation .licences{display:grid;gap:calc(10 * var(--u));margin-top:calc(12 * var(--u))}
.confirmation .note{margin-top:calc(10 * var(--u));font-size:calc(13 * var(--u));color:var(--ink-3)}

/* ---------------- 404 ---------------- */
.p404{text-align:center;padding:calc(80 * var(--u)) 0}
.p404 .code{font-size:calc(96 * var(--u));font-weight:700;letter-spacing:-.04em;line-height:1;color:#dbe4f3}
.p404 h1{margin-top:calc(8 * var(--u));font-size:calc(30 * var(--u));color:var(--ink)}
.p404 p{margin-top:calc(8 * var(--u));font-size:calc(16 * var(--u));color:var(--ink-3)}
.p404 .btn{margin-top:calc(22 * var(--u))}

/* ---------------- Cartes produit générées (catalogue, fiche) ----------------
   Même dessin que sur l'accueil, mais le texte se replie librement et les
   lignes restent alignées entre cartes grâce à la sous-grille. */
.grid-libre{grid-template-rows:repeat(5,auto);margin-top:0}
.grid-libre .card{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:0;height:auto;min-height:calc(294 * var(--u))}
.card-libre .cat,.card-libre .desc,.card-libre .card-foot{white-space:normal}
.card-libre .card-txt{margin-right:0}
.card-libre .card-cta{margin-right:0}
.card-libre .card-cta .btn{padding:0 calc(6 * var(--u))}
.grid-libre.trois{grid-template-columns:repeat(3,minmax(0,1fr))}
/* ---------------- Telechargements ---------------- */
.dl-liste{display:grid;gap:calc(14 * var(--u))}
.dl-carte{
  display:grid;grid-template-columns:calc(56 * var(--u)) minmax(0,1fr) auto;
  gap:calc(20 * var(--u));align-items:center;
  background:#fff;border:calc(1 * var(--u)) solid #dfe6ef;border-radius:calc(12 * var(--u));
  padding:calc(20 * var(--u)) calc(24 * var(--u));
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.dl-carte:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(10,30,70,.28)}
.dl-carte > img{width:calc(56 * var(--u));height:auto}
.dl-carte h3{display:flex;align-items:center;gap:calc(10 * var(--u));font-size:calc(19 * var(--u));font-weight:700;color:var(--ink)}
.dl-carte .cat{margin-top:calc(2 * var(--u));font-size:calc(14.5 * var(--u));color:var(--ink-3)}
.dl-badge{
  font-size:calc(11.5 * var(--u));font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:#0a7d3c;background:#e7f7ee;border-radius:calc(999 * var(--u));
  padding:calc(3 * var(--u)) calc(9 * var(--u));
}
.dl-meta{margin-top:calc(8 * var(--u));font-size:calc(13.5 * var(--u));color:var(--ink-3)}
.dl-sha{margin-top:calc(10 * var(--u));font-size:calc(13 * var(--u));color:var(--ink-3)}
.dl-sha summary{cursor:pointer;color:var(--blue-link);width:fit-content}
.dl-sha summary:focus-visible{outline:calc(2 * var(--u)) solid var(--blue);outline-offset:calc(2 * var(--u))}
.dl-sha code{
  display:block;margin-top:calc(8 * var(--u));overflow-wrap:anywhere;
  font-family:"JetBrains Mono",Consolas,monospace;font-size:calc(12.5 * var(--u));
  color:var(--blue-700);background:#eef4ff;padding:calc(8 * var(--u)) calc(10 * var(--u));border-radius:calc(6 * var(--u));
}
.dl-sha p{margin-top:calc(8 * var(--u))}
.dl-actions{display:flex;flex-direction:column;gap:calc(10 * var(--u));align-items:stretch}
.dl-actions .btn{white-space:nowrap;height:calc(42 * var(--u));padding:0 calc(20 * var(--u));border-radius:calc(8 * var(--u));font-size:calc(14.5 * var(--u))}
.dl-actions .btn-page{height:calc(46 * var(--u))}
.dl-attente{
  display:grid;place-items:center;font-size:calc(13.5 * var(--u));font-weight:600;color:var(--ink-3);
  background:#f3f6fb;border:calc(1 * var(--u)) dashed #cfd8e3;border-radius:calc(10 * var(--u));
  padding:calc(10 * var(--u)) calc(16 * var(--u));
}
.dl-carte.est-bientot{opacity:.72}
.dl-echec{font-size:calc(15 * var(--u));color:var(--ink-3)}
.bande-cta .dl-meta{margin-top:calc(10 * var(--u))}
.bande-cta.marine .dl-meta{color:#b9c7e4}

@media (max-width:1179px){
  .grid-libre,.grid-libre.trois{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
  .grid-libre .card{display:flex;grid-row:auto}
}
@media (max-width:640px){
  .grid-libre,.grid-libre.trois{grid-template-columns:1fr}
}

/* ---------------- Impression du récapitulatif ---------------- */
@media print{
  .topbar,.head,.foot,.etapes,.recap,.confirmation .form-actions,.cart,.scrim,.toast{display:none !important}
  .page-main{background:#fff}
  .bandeau{background:none;color:#000}
  .bandeau h1,.bandeau .sub{color:#000}
  .confirmation{border:0;padding:0}
  .deux-colonnes{grid-template-columns:1fr}
}

/* ---------------- Tablette et mobile ---------------- */
@media (max-width:1179px){
  .bandeau-in{padding:36px 20px 40px}
  .bandeau h1{font-size:30px}
  .bandeau .sub{font-size:16px}
  .bandeau-produit{grid-template-columns:100px minmax(0,1fr);gap:20px}
  .bandeau-produit .logo{width:100px;height:100px}
  .bandeau-produit .logo img{width:68px}
  .bandeau-produit .prix{grid-column:1 / -1;text-align:left}
  .bandeau-produit .actions{justify-content:flex-start}
  .section{padding:32px 0}
  .tuiles,.tuiles-4,.tuiles-2,.tarifs-grille,.inclus,.liste-fonctions,.compte-grille,.grille-champs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .deux-colonnes{grid-template-columns:1fr}
  .recap{position:static}
  .pack{grid-template-columns:auto minmax(0,1fr)}
  .pack .prix{grid-column:1 / -1;text-align:left}
  .pack .actions{justify-content:flex-start}
  .etapes{flex-wrap:wrap}
  .etapes li{flex:1 1 45%}
  .ligne-panier{grid-template-columns:auto minmax(0,1fr) auto;gap:12px}
  .ligne-panier .montant{grid-column:2;text-align:left;min-width:0}
  .legal{padding:24px 20px}
  .dl-carte{grid-template-columns:48px minmax(0,1fr);gap:16px;padding:20px}
  .dl-carte > img{width:48px}
  .dl-actions{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}
  .dl-actions .btn,.dl-attente{flex:1 1 auto}
}
@media (max-width:640px){
  .tuiles,.tuiles-4,.tuiles-2,.tarifs-grille,.inclus,.liste-fonctions,.compte-grille,.grille-champs{grid-template-columns:1fr}
  .champ.large{grid-column:auto}
  .bandeau-produit{grid-template-columns:1fr}
  .licence-carte{grid-template-columns:auto minmax(0,1fr)}
  .licence-carte .btn{grid-column:1 / -1}
  .p404 .code{font-size:72px}
  .dl-carte{grid-template-columns:1fr}
  .dl-carte > img{width:44px}
  .dl-actions{flex-direction:column}
}