/* ============================================================================
   HN-CONFIGURATEURS.CSS — Handinorme
   ----------------------------------------------------------------------------
   Feuille de style UNIQUE et GÉNÉRIQUE pour tous les configurateurs "Aide au
   choix" (clous podotactiles, marquage au sol PMR, et tous les suivants :
   caillebotis, dalle podotactile, nez de marche, rampe...).

   POURQUOI CE FICHIER EST SÉPARÉ DU HTML
   Odoo indexe le texte des pages catégorie pour la barre de recherche en
   retirant les balises mais PAS le contenu entre <style> et </style>. Un
   bloc <style> collé en ligne dans une page catégorie finit donc par
   apparaître en texte brut dans les suggestions de recherche. En chargeant
   le CSS depuis ce fichier via une balise <link>, plus rien à indexer.

   POURQUOI CE FICHIER N'A (PRESQUE) PLUS BESOIN D'ÊTRE MODIFIÉ
   Tous les configurateurs Handinorme partagent la même structure de
   composants, seul un préfixe de 2-3 lettres change (cp- pour "clous",
   ms- pour "marquage au sol", et ainsi de suite). Au lieu de dupliquer
   150 lignes de CSS à chaque nouveau configurateur, ce fichier utilise des
   sélecteurs CSS génériques qui matchent N'IMPORTE QUEL préfixe :
     - [class^="hn-"]      → n'importe quelle classe racine commençant par "hn-"
     - [class$="-hero"]    → n'importe quelle classe finissant par "-hero"
     - [id^="hn"]           → n'importe quel id de garde-fou commençant par "hn"
   Résultat : un nouveau configurateur qui réutilise les mêmes noms de
   composants (-hero, -btn, -panel, -option, -result, -recap, -reco,
   -recocard, -rank, -pname, -price, -unit, -qty, -specs, -why, -warning,
   -calc-grid, -field, -input, -out, -total, -detail, -tablewrap, -table,
   -n, -note, -bom, -schema, -advisor, -toast, -sr, -brand, -actions,
   -trust, -caret, -nav, -intro, -progress, -q, -qhint, -options,
   -panelclose, -wrap) fonctionne SANS AUCUNE modification de ce fichier —
   juste sa propre classe racine (ex. .hn-tp) et son propre id (ex.
   #hnCaillebotis) dans le HTML de sa page catégorie.
   Seul cas où une petite retouche reste nécessaire : un configurateur qui
   invente un TOUT NOUVEAU nom de composant (un suffixe encore jamais vu).
   Dans ce cas, on ajoute une ligne au sélecteur générique concerné — pas
   un bloc de 150 lignes.

   INTÉGRATION (pour chaque page catégorie)
   1. Héberger ce fichier une fois dans Odoo (déjà fait :
      /web/content/1372587/hn-configurateurs.css).
   2. Dans le bloc HTML de la page catégorie, une seule ligne :
        <link rel="stylesheet" href="/web/content/1372587/hn-configurateurs.css">
   3. Garder le <div class="hn-xx" id="hnXxx">...</div> et le <script> du
      configurateur tels quels — aucune balise <style> dans ce bloc.
   4. Quand tu ajoutes un nouveau configurateur, il n'y a PLUS besoin de
      toucher à ce fichier ni de re-téléverser quoi que ce soit, sauf si un
      nouveau nom de composant apparaît (cas rare, petite retouche).
   ============================================================================ */

/* ===================== RACINE — commune à tous les configurateurs ===================== */
[class^="hn-"]{
  --ink:#12303d;--muted:#57707d;--blue:#2C7A9E;--blue2:#1f5f7c;--blue3:#164659;
  --green:#8DB927;--green2:#6f9a12;
  --sky:#e8f3f8;--sky2:#f4fafc;--bg:#f6fafb;--line:#dbe8ee;--line2:#c2d8e2;
  --lime:#f2f8e2;--warn:#7a5410;--warnbg:#fff7e0;--warnline:#eeddab;
  --shadow:0 8px 24px rgba(18,48,61,.07);
  --r-lg:18px;--r-md:12px;--r-sm:9px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);background:var(--bg);max-width:1100px;margin:auto;
  border-radius:20px;overflow:hidden;line-height:1.5;
}
[class^="hn-"] *{box-sizing:border-box}
[class^="hn-"] [hidden]{display:none!important}
[class$="-wrap"]{padding:18px}

/* ===================== BANDEAU D'EN-TÊTE ===================== */
[class$="-hero"]{background:linear-gradient(140deg,#e6f2f7 0%,#ffffff 55%,#f4f9ec 100%);border:1px solid var(--line);padding:22px 24px;border-radius:var(--r-lg);position:relative;overflow:hidden}
[class$="-hero"]::after{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(closest-side,rgba(44,122,158,.13),transparent)}
[class$="-brand"]{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--blue2);margin-bottom:7px;position:relative}
[class$="-hero"] h1,.hn-h1{font-size:clamp(22px,3.2vw,31px);line-height:1.15;margin:0 0 8px;letter-spacing:-.01em;position:relative;font-weight:800}
[class$="-hero"] > p{font-size:15.5px;line-height:1.5;color:var(--muted);max-width:720px;margin:0;position:relative}
[class$="-actions"]{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0 0;position:relative}
[class$="-trust"]{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;font-size:12.5px;color:var(--muted);position:relative;align-items:center}
[class$="-trust"] span{display:inline-flex;align-items:center;gap:5px}
[class$="-trust"] svg{flex:none}
[class$="-trust"] a{color:var(--blue2);font-weight:700}

/* ===================== BOUTONS ===================== */
[class$="-btn"]{border:0;border-radius:var(--r-md);padding:12px 18px;font-size:14.5px;font-weight:800;cursor:pointer;background:var(--blue);color:#fff;transition:background .15s ease,transform .05s ease;font-family:inherit;line-height:1.2;display:inline-flex;align-items:center;gap:8px;justify-content:center;text-decoration:none;text-align:center}
[class$="-btn"]:hover{background:var(--blue2);color:#fff}
[class$="-btn"]:active{transform:translateY(1px)}
[class$="-btn"].secondary{background:#fff;color:var(--blue2);border:1.5px solid var(--line2)}
[class$="-btn"].secondary:hover{background:var(--sky2);border-color:var(--blue);color:var(--blue2)}
[class$="-btn"].lime{background:var(--green);color:#233806}
[class$="-btn"].lime:hover{background:#a3cc3c;color:#233806}
[class$="-btn"].small{padding:9px 13px;font-size:13.5px;border-radius:10px}
[class$="-btn"] [class$="-caret"]{transition:transform .18s ease;font-size:11px;opacity:.75}
[class$="-btn"][aria-expanded="true"] [class$="-caret"]{transform:rotate(180deg)}
[class^="hn-"] button:focus-visible,[class^="hn-"] a:focus-visible,[class^="hn-"] input:focus-visible,[class^="hn-"] select:focus-visible{outline:3px solid #55a9c9;outline-offset:2px;border-radius:6px}

/* ===================== PANNEAUX ===================== */
[class$="-panel"]{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow);margin-top:14px}
[class$="-panel"].lime-bg{background:linear-gradient(135deg,#f4f9ec,#eaf4f8)}
[class$="-panel"] h2{font-size:21px;margin:0 0 4px;letter-spacing:-.01em}
[class$="-panel"] h2:focus{outline:none}
[class$="-panel"] ul{margin:0;padding-left:20px;color:var(--muted);font-size:14.5px;line-height:1.65}
[class$="-panel"] ul li strong{color:var(--ink)}
[class$="-intro"]{color:var(--muted);margin:0 0 14px;line-height:1.5;font-size:14.5px}
[class$="-panelclose"]{margin-top:16px}

/* ===================== BARRE DE PROGRESSION & QUESTIONS ===================== */
[class$="-progress"]{height:7px;background:#e6eef2;border-radius:999px;overflow:hidden;margin:12px 0 18px}
[class$="-progress"] span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--green));width:0%;transition:width .3s ease;border-radius:999px}
[class$="-q"] h3{font-size:20px;margin:0 0 4px;letter-spacing:-.01em}
[class$="-qhint"]{color:var(--muted);font-size:13.5px;margin:0 0 13px}
[class$="-options"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
[class$="-option"]{border:1.5px solid var(--line);background:#fff;border-radius:var(--r-md);padding:14px 15px;text-align:left;font-size:14.5px;font-weight:700;color:var(--ink);cursor:pointer;font-family:inherit;transition:border-color .12s ease,background .12s ease;line-height:1.35}
[class$="-option"] small{display:block;font-weight:500;font-size:12.5px;color:var(--muted);margin-top:4px}
[class$="-option"]:hover{border-color:var(--blue);background:var(--sky2)}
[class$="-option"][aria-pressed="true"]{border-color:var(--blue);background:var(--sky);box-shadow:inset 0 0 0 1px var(--blue)}
[class$="-nav"]{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap}

/* ===================== RÉSULTATS / RECOMMANDATIONS ===================== */
[class$="-result"]{margin-top:18px;padding:18px;border-radius:14px;background:var(--sky);display:none}
[class$="-result"].show{display:block}
[class$="-result"] h3{margin:0 0 4px;font-size:19px}
[class$="-recap"]{font-size:13px;color:var(--muted);margin:0 0 13px}
[class$="-reco"]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-bottom:14px}
[class$="-recocard"]{background:#fff;border-radius:var(--r-md);padding:13px;border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
[class$="-rank"]{display:inline-block;background:var(--blue);color:#fff;font-size:10.5px;font-weight:900;border-radius:999px;padding:3px 9px;align-self:flex-start}
[class$="-recocard"].best{border-color:var(--green);box-shadow:0 0 0 1.5px var(--green)}
[class$="-recocard"].best [class$="-rank"]{background:var(--green);color:#233806}
[class$="-pname"]{display:block;font-size:14.5px;line-height:1.3}
[class$="-price"]{font-weight:900;font-size:16px}
[class$="-price"] small{font-weight:700;font-size:11.5px;color:var(--muted)}
[class$="-unit"]{font-size:12px;font-weight:800;color:var(--blue3);background:var(--sky);border-radius:var(--r-sm);padding:5px 8px;display:inline-block}
[class$="-qty"]{font-size:12.5px;font-weight:800;color:#40590a;background:var(--lime);border:1px solid #dcebbb;border-radius:var(--r-sm);padding:7px 9px;line-height:1.45}
[class$="-specs"]{font-size:12px;color:var(--muted);line-height:1.5}
[class$="-why"]{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--blue3)}
[class$="-why"] span::before{content:"✓ ";font-weight:900;color:var(--green2)}
[class$="-recocard"] [class$="-btn"]{margin-top:auto}
[class$="-warning"]{font-size:12.5px;color:var(--warn);background:var(--warnbg);border:1px solid var(--warnline);border-radius:var(--r-sm);padding:8px 10px;line-height:1.45}
[class$="-warning"] a{color:var(--warn);font-weight:800}

/* ===================== CALCULATEURS ===================== */
[class$="-calc-grid"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:12px;align-items:end}
[class$="-field"] label{display:block;font-size:11.5px;font-weight:800;color:var(--muted);margin:0 0 5px;text-transform:uppercase;letter-spacing:.04em}
[class$="-input"]{width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-size:14.5px;font-family:inherit}
[class$="-input"]:hover{border-color:var(--line2)}
[class$="-out"]{margin-top:14px;display:none}
[class$="-out"].show{display:block}
[class$="-total"]{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:13px 15px;font-size:15px;margin-bottom:12px;line-height:1.55}
[class$="-total"] strong{color:var(--blue2);font-size:17.5px}
[class$="-detail"]{color:var(--muted);font-size:13px;display:block;margin-top:4px}
[class$="-tablewrap"]{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);-webkit-overflow-scrolling:touch}
[class$="-table"]{border-collapse:collapse;width:100%;min-width:560px}
[class$="-table"] th,[class$="-table"] td{padding:10px 13px;text-align:left;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}
[class$="-table"] thead th{background:var(--sky2);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:800;border-bottom:2px solid var(--line2)}
[class$="-table"] tbody tr:last-child td{border-bottom:0}
[class$="-n"]{font-weight:900;font-size:16.5px;color:var(--blue3);white-space:nowrap}
[class$="-prof"],[class$="-len"]{font-weight:800;white-space:nowrap}
[class$="-prof"] small,[class$="-len"] small{display:block;font-weight:500;font-size:11.5px;color:var(--muted);white-space:normal}
[class$="-note"]{color:var(--muted);font-size:13px}
[class$="-bom"]{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;margin-top:12px}
[class$="-bom"] h3{font-size:15.5px;margin:0 0 9px}
[class$="-bom"] ul{margin:0;padding-left:20px;font-size:14.5px;line-height:1.7;color:var(--ink)}
[class$="-bom"] li span{color:var(--muted);font-size:13.5px}

/* ===================== SCHÉMAS ===================== */
[class$="-schema"]{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:14px;margin-top:12px}
[class$="-schema"] svg{width:100%;height:auto;max-width:540px;display:block;margin:0 auto}

/* ===================== BANDEAU CONSEILLER, TOAST ===================== */
[class$="-advisor"]{background:linear-gradient(135deg,#0f2833,#1f5f7c);color:#fff;border-radius:var(--r-md);padding:18px;margin-top:16px;display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
[class$="-advisor"] h3{margin:0 0 5px;font-size:17px}
[class$="-advisor"] p{margin:0;line-height:1.5;max-width:520px;font-size:14px}
[class$="-toast"]{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#12303d;color:#fff;padding:12px 20px;border-radius:12px;font-size:14px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:99;max-width:90vw}
[class$="-toast"].show{opacity:1;transform:translateX(-50%) translateY(0)}
[class$="-sr"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===================== RESPONSIVE ===================== */
@media(max-width:900px){[class$="-reco"]{grid-template-columns:1fr}}
@media(max-width:620px){
  [class$="-wrap"]{padding:12px}[class$="-hero"]{padding:18px 16px}[class$="-panel"]{padding:16px}
  [class$="-options"],[class$="-calc-grid"]{grid-template-columns:1fr}
  [class$="-actions"] [class$="-btn"]{flex:1 1 46%;padding:12px 10px;font-size:13.5px}
  [class$="-advisor"]{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){[class^="hn-"] *{transition:none!important;scroll-behavior:auto!important}}
@media print{
  [class$="-advisor"],[class$="-nav"],[class$="-actions"]{display:none!important}
  [class^="hn-"]{max-width:none;background:#fff}
  [class^="hn-"] [hidden]{display:block!important}
}

/* ============================================================================
   GARDE-FOU THÈME ODOO — commun à tous les configurateurs
   ----------------------------------------------------------------------------
   Ces règles neutralisent les styles que le thème du site pourrait imposer
   (couleurs de liens, de titres, de fond...). Scopées sur [id^="hn"], donc
   valables pour #hnClous, #hnMarquage, et tout futur id commençant par "hn".
   ============================================================================ */
[id^="hn"],[id^="hn"] *{font-family:inherit}
[id^="hn"] h1,[id^="hn"] h2,[id^="hn"] h3,[id^="hn"] h4{color:var(--ink)!important}
[id^="hn"] a{text-decoration:none}
[id^="hn"] [class$="-hero"]{background:linear-gradient(140deg,#e6f2f7 0%,#ffffff 55%,#f4f9ec 100%)!important}
[id^="hn"] [class$="-panel"]{background:#fff!important}
[id^="hn"] [class$="-panel"].lime-bg{background:linear-gradient(135deg,#f4f9ec,#eaf4f8)!important}
[id^="hn"] [class$="-result"]{background:var(--sky)!important}
[id^="hn"] [class$="-recocard"],[id^="hn"] [class$="-total"],[id^="hn"] [class$="-tablewrap"],
[id^="hn"] [class$="-input"],[id^="hn"] [class$="-schema"],[id^="hn"] [class$="-bom"]{background:#fff!important}
[id^="hn"] [class$="-table"] thead th{background:var(--sky2)!important}
[id^="hn"] [class$="-btn"]{background:var(--blue)!important;color:#fff!important;text-decoration:none!important}
[id^="hn"] [class$="-btn"]:hover{background:var(--blue2)!important;color:#fff!important}
[id^="hn"] [class$="-btn"].secondary{background:#fff!important;color:var(--blue2)!important}
[id^="hn"] [class$="-btn"].secondary:hover{background:var(--sky2)!important;color:var(--blue2)!important}
[id^="hn"] [class$="-btn"].lime{background:var(--green)!important;color:#233806!important}
[id^="hn"] [class$="-btn"].lime:hover{background:#a3cc3c!important;color:#233806!important}
[id^="hn"] [class$="-option"]{background:#fff!important;color:var(--ink)!important}
[id^="hn"] [class$="-option"]:hover{background:var(--sky2)!important;color:var(--ink)!important}
[id^="hn"] [class$="-option"][aria-pressed="true"]{background:var(--sky)!important;color:var(--ink)!important}
[id^="hn"] [class$="-option"] small{color:var(--muted)!important}
[id^="hn"] [class$="-advisor"]{background:linear-gradient(135deg,#0f2833,#1f5f7c)!important;color:#fff!important}
[id^="hn"] [class$="-advisor"] h3,[id^="hn"] [class$="-advisor"] p{color:#fff!important}
[id^="hn"] [class$="-advisor"] [class$="-btn"]{background:var(--green)!important;color:#233806!important}
[id^="hn"] [class$="-advisor"] [class$="-btn"]:hover{background:#fff!important;color:var(--blue3)!important}
[id^="hn"] [class$="-toast"]{background:#12303d!important;color:#fff!important}
[id^="hn"] [class$="-brand"]{color:var(--blue2)!important}
[id^="hn"] [class$="-intro"],[id^="hn"] [class$="-recap"],[id^="hn"] [class$="-specs"],
[id^="hn"] [class$="-trust"],[id^="hn"] [class$="-qhint"],[id^="hn"] [class$="-field"] label,
[id^="hn"] [class$="-note"],[id^="hn"] [class$="-price"] small,[id^="hn"] [class$="-prof"] small,
[id^="hn"] [class$="-len"] small,[id^="hn"] [class$="-detail"],[id^="hn"] [class$="-bom"] li span,
[id^="hn"] [class$="-table"] thead th,[id^="hn"] [class$="-panel"] ul{color:var(--muted)!important}
[id^="hn"] [class$="-trust"] a,[id^="hn"] [class$="-intro"] a{color:var(--blue2)!important}
[id^="hn"] [class$="-pname"],[id^="hn"] [class$="-price"],[id^="hn"] [class$="-prof"],
[id^="hn"] [class$="-len"],[id^="hn"] [class$="-total"],[id^="hn"] [class$="-bom"] ul,
[id^="hn"] [class$="-panel"] ul li strong{color:var(--ink)!important}
[id^="hn"] [class$="-total"] strong,[id^="hn"] [class$="-n"],[id^="hn"] [class$="-unit"]{color:var(--blue3)!important}
[id^="hn"] [class$="-unit"]{background:var(--sky)!important}
[id^="hn"] [class$="-why"],[id^="hn"] [class$="-why"] span{color:var(--blue3)!important}
[id^="hn"] [class$="-why"] span::before{color:var(--green2)!important}
[id^="hn"] [class$="-qty"]{color:#40590a!important;background:var(--lime)!important}
[id^="hn"] [class$="-rank"]{background:var(--blue)!important;color:#fff!important}
[id^="hn"] [class$="-recocard"].best [class$="-rank"]{background:var(--green)!important;color:#233806!important}
[id^="hn"] [class$="-warning"],[id^="hn"] [class$="-warning"] a,[id^="hn"] [class$="-warning"] strong{color:var(--warn)!important}
[id^="hn"] [class$="-warning"]{background:var(--warnbg)!important}
[id^="hn"] [class$="-input"]{color:var(--ink)!important}
[id^="hn"] [class$="-progress"]{background:#e6eef2!important}
[id^="hn"] [class$="-progress"] span{background:linear-gradient(90deg,var(--blue),var(--green))!important}