/**
 * [W3CAM 2026-11-10 configurateur-v2] Configurateur devis vidéosurveillance, version 2.
 * Styles limités à #w3cfg2 (l'ancienne version reste dans configurator.css, limitée à #w3configurator).
 * Mise en page : questions à gauche, « Votre système » qui se remplit à droite ; une colonne sous 900 px.

 * Le thème impose bordure, fond, couleur, rayon et soulignement des <button> en !important :
 * les règles de boutons ci-dessous les reprennent donc en !important.
 * Orange de marque #ff6501 (survol #df5700), cartes #f5f5f5 sans bordure, coins 6 px.
 */
#w3cfg2{
  --fond:#ffffff; --carte:#f5f5f5; --carte-survol:#eeeeee; --filet:#e6e6e6;
  --texte:#666666; --fort:#666666; --doux:#6b6b6b; --champ:#8a8a8a;
  --orange:#ff6501; --orange-survol:#df5700; --orange-pale:#fff4ec;
  --vert:#167c44; --rouge:#c62828;
  --rayon:6px; --sortie:cubic-bezier(.23,1,.32,1);
  max-width:1120px;margin:0 auto;padding:4px 0 56px;
  color:var(--texte);font-size:15px;line-height:1.55;text-align:left;
  -webkit-tap-highlight-color:transparent;
}
#w3cfg2 *,#w3cfg2 *::before,#w3cfg2 *::after{box-sizing:border-box}
#w3cfg2 ::selection{background:var(--orange-pale);color:var(--fort)}
#w3cfg2 [hidden]{display:none!important}
#w3cfg2 h1,#w3cfg2 h2,#w3cfg2 h3,#w3cfg2 p,#w3cfg2 ol,#w3cfg2 dl,#w3cfg2 dt,#w3cfg2 dd,#w3cfg2 fieldset,#w3cfg2 legend,#w3cfg2 label{margin:0;padding:0;text-transform:none;letter-spacing:normal}
#w3cfg2 ol{list-style:none}
#w3cfg2 fieldset{border:0;min-width:0}
#w3cfg2 legend{display:block;float:none;width:auto;max-width:100%;border:0;line-height:1.4}
#w3cfg2 button,#w3cfg2 input,#w3cfg2 textarea{font-family:inherit;letter-spacing:normal;text-transform:none;box-shadow:none}
#w3cfg2 input,#w3cfg2 textarea{caret-color:var(--orange)}
#w3cfg2 button{touch-action:manipulation;-webkit-user-select:none;user-select:none;cursor:pointer;line-height:1.3}
#w3cfg2 :focus-visible{outline:2px solid var(--fort);outline-offset:2px}
#w3cfg2 a{color:var(--fort);text-underline-offset:3px}
#w3cfg2 a.c2-tel{font-weight:600;white-space:nowrap;text-decoration:none}
#w3cfg2 .c2-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#w3cfg2 svg.c2-i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

#w3cfg2 .c2-h1{font-size:28px;line-height:1.2;font-weight:700;color:var(--texte);text-wrap:balance}
#w3cfg2 .c2-intro{max-width:62ch;margin-top:8px}

/* Étapes nommées */
#w3cfg2 .c2-etapes{display:flex;gap:6px;margin-top:26px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
#w3cfg2 .c2-etapes::-webkit-scrollbar{display:none}
#w3cfg2 .c2-etapes li{flex:1 0 auto;min-width:0}
#w3cfg2 .c2-etapes button{width:100%;min-height:44px;display:flex;flex-direction:column;gap:7px;align-items:flex-start;background:none!important;border:0!important;padding:0 4px 0 0;font-size:13px;font-weight:500;color:var(--doux)!important;text-align:left;white-space:nowrap}
#w3cfg2 .c2-etapes button::before{content:"";display:block;width:100%;height:4px;border-radius:2px;background:var(--filet);transition:background-color .2s ease}
#w3cfg2 .c2-etapes button[data-etat="fait"]::before,#w3cfg2 .c2-etapes button[aria-current]::before{background:var(--orange)}
#w3cfg2 .c2-etapes button[aria-current]{color:var(--fort)!important;font-weight:600}
#w3cfg2 .c2-etapes button[data-etat="fait"]{color:var(--texte)!important}
#w3cfg2 .c2-etapes button:disabled{cursor:default}

#w3cfg2 .c2-grille{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:44px;align-items:start;margin-top:30px}
#w3cfg2 .c2-grille.c2-fin{grid-template-columns:minmax(0,1fr) 360px}

/* Panneau d'étape */
#w3cfg2 .c2-panneau{min-width:0}
#w3cfg2 .c2-panneau.c2-entre{animation:c2-entre .22s var(--sortie)}
@keyframes c2-entre{from{opacity:0;transform:translateY(8px)}}
@keyframes c2-fondu{from{opacity:0}}
@keyframes c2-tourne{to{transform:rotate(360deg)}}
#w3cfg2 .c2-panneau h2{font-size:22px;line-height:1.25;font-weight:700;color:var(--texte);text-wrap:balance}
#w3cfg2 .c2-panneau h2:focus{outline:none}
#w3cfg2 .c2-appui{margin-top:6px;max-width:60ch}
#w3cfg2 .c2-q{margin-top:28px}
#w3cfg2 .c2-q legend{font-size:16px;font-weight:600;color:var(--fort);margin-bottom:4px}
#w3cfg2 .c2-aide{font-size:13px;color:var(--doux);margin-bottom:10px;max-width:62ch}
#w3cfg2 .c2-q legend + .c2-choix{margin-top:10px}
#w3cfg2 .c2-choix{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
#w3cfg2 .c2-choix.c2-serre{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
#w3cfg2 .c2-opt{position:relative;display:block;font-weight:400;cursor:pointer}
#w3cfg2 .c2-opt input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;display:block}
#w3cfg2 .c2-c{position:relative;display:flex;gap:12px;align-items:flex-start;min-height:64px;height:100%;padding:13px 14px;background:var(--carte);border-radius:var(--rayon);transition:background-color .15s ease,transform .14s var(--sortie)}
#w3cfg2 .c2-opt svg.c2-i{color:var(--orange);margin-top:1px}
#w3cfg2 .c2-logo{width:40px;height:40px;border-radius:4px;background:#fff;object-fit:contain;flex:none;mix-blend-mode:multiply}
#w3cfg2 .c2-t{min-width:0}
#w3cfg2 .c2-opt strong{display:block;font-size:15px;font-weight:600;color:var(--fort);line-height:1.3;padding-right:18px}
#w3cfg2 .c2-opt em{display:block;font-style:normal;font-size:13px;line-height:1.4;margin-top:2px}
#w3cfg2 .c2-opt em.c2-reco{color:var(--vert);font-weight:500}
#w3cfg2 .c2-opt input:checked + .c2-c{background:var(--orange-pale);box-shadow:inset 0 0 0 2px var(--orange)}
#w3cfg2 .c2-opt input:focus-visible + .c2-c{outline:2px solid var(--fort);outline-offset:2px}
#w3cfg2 .c2-opt input:active + .c2-c{transform:scale(.98)}
#w3cfg2 .c2-opt input:disabled{cursor:default}
#w3cfg2 .c2-opt input:disabled + .c2-c{opacity:.55}
#w3cfg2 .c2-coche{position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;background:var(--orange);color:#fff;display:none;align-items:center;justify-content:center;flex:none}
#w3cfg2 .c2-coche svg{width:12px;height:12px;stroke-width:3}
#w3cfg2 .c2-opt input:checked + .c2-c .c2-coche{display:flex}
#w3cfg2 .c2-info{margin-top:14px;display:flex;gap:8px;align-items:flex-start;background:var(--orange-pale);border-radius:var(--rayon);padding:10px 12px;font-size:13px;line-height:1.45}
#w3cfg2 .c2-info svg.c2-i{width:18px;height:18px;margin-top:1px;color:var(--orange)}
#w3cfg2 .c2-info + .c2-info{margin-top:8px}

/* Compteurs de caméras */
#w3cfg2 .c2-compteurs{margin-top:22px;display:grid;gap:10px}
#w3cfg2 .c2-cpt{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--carte);border-radius:var(--rayon);padding:12px 14px}
#w3cfg2 .c2-picto{width:52px;height:52px;border-radius:var(--rayon);background:var(--fond);display:flex;align-items:center;justify-content:center;color:var(--orange);overflow:hidden}
#w3cfg2 .c2-picto svg{width:28px;height:28px}
#w3cfg2 .c2-cpt strong{display:block;color:var(--fort);font-weight:600;line-height:1.3}
#w3cfg2 .c2-cpt p{font-size:13px;line-height:1.4;margin-top:2px}
#w3cfg2 .c2-pas{display:flex;align-items:center;background:var(--fond);border-radius:var(--rayon)}
#w3cfg2 .c2-pas button{width:44px;height:44px;border:0!important;background:none!important;color:var(--fort)!important;display:flex;align-items:center;justify-content:center;border-radius:var(--rayon)!important;padding:0;transition:transform .14s var(--sortie),background-color .15s ease}
#w3cfg2 .c2-pas button:active{transform:scale(.94)!important}
#w3cfg2 .c2-pas button:disabled{color:#b3b3b3!important;cursor:default}
#w3cfg2 .c2-pas button svg{width:18px;height:18px;stroke-width:2.2}
#w3cfg2 .c2-pas input{width:44px;height:44px;min-height:0;border:0;border-radius:0;background:none;text-align:center;font-size:16px;font-weight:600;color:var(--fort);font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield;padding:0;margin:0}
#w3cfg2 .c2-pas input::-webkit-outer-spin-button,#w3cfg2 .c2-pas input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#w3cfg2 .c2-total-cam{margin-top:14px;font-weight:500;color:var(--fort)}
#w3cfg2 .c2-erreur{margin-top:10px;display:flex;gap:8px;align-items:flex-start;color:var(--rouge);font-weight:500;line-height:1.4}
#w3cfg2 .c2-erreur svg.c2-i{width:20px;height:20px;margin-top:1px}

/* Navigation */
#w3cfg2 .c2-nav{display:flex;gap:10px;align-items:center;margin-top:32px}
#w3cfg2 .c2-btn{min-height:48px;padding:0 24px;border-radius:var(--rayon)!important;font-size:15px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent!important;text-decoration:none!important;transition:transform .14s var(--sortie),background-color .15s ease,border-color .15s ease}
#w3cfg2 .c2-btn:active{transform:scale(.97)!important}
#w3cfg2 .c2-btn:disabled{opacity:.6;cursor:default}
#w3cfg2 .c2-btn svg{width:18px;height:18px;stroke-width:2.2}
#w3cfg2 .c2-btn.c2-plein{background:var(--orange)!important;color:#fff!important}
#w3cfg2 .c2-btn.c2-contour{background:var(--fond)!important;color:var(--fort)!important;border-color:var(--orange)!important}
#w3cfg2 .c2-btn.c2-discret{background:var(--fond)!important;color:var(--fort)!important;border-color:var(--filet)!important}
#w3cfg2 .c2-btn.c2-lien{background:none!important;border:0!important;padding:0 4px;min-height:44px;color:var(--texte)!important;font-weight:500;text-decoration:underline!important;text-underline-offset:3px}
#w3cfg2 .c2-nav .c2-btn.c2-plein{margin-left:auto;min-width:180px}
#w3cfg2 .c2-tourne{animation:c2-tourne .7s linear infinite}

/* Récapitulatif vivant */
#w3cfg2 .c2-recap{background:var(--carte);border-radius:var(--rayon);padding:20px;position:sticky;top:16px}
#w3cfg2 .c2-recap h2{font-size:17px;font-weight:600;color:var(--fort)}
#w3cfg2 .c2-recap > p{font-size:13px;margin-top:2px}
#w3cfg2 .c2-recap dl{margin-top:14px}
#w3cfg2 .c2-ligne{padding:11px 0;border-top:1px solid var(--filet)}
#w3cfg2 .c2-recap dt{font-size:13px;font-weight:500;color:var(--doux);margin-bottom:2px}
#w3cfg2 .c2-recap dd{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--fort);font-weight:500;line-height:1.4}
#w3cfg2 .c2-recap dd span:first-child{min-width:0;overflow-wrap:anywhere}
#w3cfg2 .c2-recap dd.c2-vide{color:var(--doux);font-weight:400}
#w3cfg2 .c2-recap dd button{flex:none;min-height:44px;margin-block:-11px;background:none!important;border:0!important;font-size:13px;font-weight:500;color:var(--texte)!important;text-decoration:underline!important;text-underline-offset:3px;padding:0 2px}
#w3cfg2 .c2-recap .c2-pied{border-top:1px solid var(--filet);padding-top:12px;font-size:13px}
#w3cfg2 details.c2-recap-mob{display:none}

/* Résultat */
#w3cfg2 .c2-chargement{margin-top:24px;display:flex;gap:10px;align-items:center;font-weight:500}
#w3cfg2 .c2-chargement svg.c2-i{color:var(--orange)}
#w3cfg2 .c2-liste{margin-top:22px;transition:opacity .15s ease}
#w3cfg2 .c2-liste[aria-busy="true"]{opacity:.55}
#w3cfg2 .c2-prod{display:grid;grid-template-columns:60px minmax(0,1fr);gap:8px 14px;align-items:start;background:var(--carte);border-radius:var(--rayon);padding:12px 14px}
#w3cfg2 .c2-prod + .c2-prod{margin-top:8px}
#w3cfg2 .c2-prod .c2-picto{width:60px;height:60px;color:var(--texte)}
#w3cfg2 .c2-prod .c2-picto img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;display:block}
#w3cfg2 .c2-prod .c2-picto svg{width:30px;height:30px;stroke-width:1.5}
#w3cfg2 .c2-role{display:block;font-size:13px;font-weight:500;color:var(--doux)}
#w3cfg2 .c2-nom{display:block;color:var(--fort);font-weight:600;line-height:1.35;overflow-wrap:anywhere;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:#bdbdbd}
#w3cfg2 .c2-ref{display:block;font-size:13px;color:var(--doux);overflow-wrap:anywhere}
#w3cfg2 .c2-pourquoi{font-size:13px;line-height:1.45;margin-top:4px}
#w3cfg2 .c2-droite{grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:14px}
#w3cfg2 .c2-prix{text-align:right;min-width:104px;font-variant-numeric:tabular-nums}
#w3cfg2 .c2-prix strong{display:block;font-size:16px;font-weight:600;color:var(--fort);white-space:nowrap}
#w3cfg2 .c2-prix span{font-size:13px;color:var(--doux);white-space:nowrap}
#w3cfg2 .c2-une{font-weight:600;color:var(--fort);min-width:44px;font-variant-numeric:tabular-nums}
#w3cfg2 .c2-notes{margin-top:16px}

#w3cfg2 .c2-caisse{background:var(--carte);border-radius:var(--rayon);padding:20px;position:sticky;top:16px}
#w3cfg2 .c2-caisse h2{font-size:17px;font-weight:600;color:var(--fort)}
#w3cfg2 .c2-tete-res{display:flex;gap:12px 24px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-top:6px}
#w3cfg2 .c2-tete-res .c2-appui{margin-top:0;flex:1 1 320px}
#w3cfg2 .c2-bascule{display:grid;grid-template-columns:1fr 1fr;background:var(--carte);border-radius:var(--rayon);padding:3px;flex:0 0 auto;min-width:216px}
#w3cfg2 .c2-bascule button{min-height:44px;padding:0 16px;border:0!important;border-radius:4px!important;background:none!important;font-size:13px;font-weight:600;color:var(--texte)!important;transition:background-color .15s ease,color .15s ease}
#w3cfg2 .c2-bascule button[aria-pressed="true"]{background:var(--orange)!important;color:#fff!important}
#w3cfg2 .c2-somme{margin-top:10px;font-variant-numeric:tabular-nums;transition:opacity .15s ease}
#w3cfg2 .c2-somme[aria-busy="true"]{opacity:.55}
#w3cfg2 .c2-somme strong{display:block;font-size:32px;line-height:1.1;font-weight:700;color:var(--fort);letter-spacing:-.02em;white-space:nowrap}
#w3cfg2 .c2-somme span{font-size:13px}
#w3cfg2 .c2-actions{display:grid;gap:8px;margin-top:18px}
#w3cfg2 .c2-caisse .c2-btn{width:100%}
#w3cfg2 .c2-note{font-size:13px;line-height:1.45;margin-top:12px}
#w3cfg2 .c2-aide-tel{border-top:1px solid var(--filet);margin-top:16px;padding-top:14px;font-size:13px}
#w3cfg2 .c2-retour{margin-top:10px;background:var(--fond);border-radius:var(--rayon);padding:12px 14px;font-size:13px;line-height:1.45;color:var(--fort)}
#w3cfg2 .c2-retour:focus{outline:none}
#w3cfg2 .c2-panneau > .c2-retour{background:var(--carte);margin-top:14px;display:flex;flex-wrap:wrap;gap:0 14px;align-items:center}
#w3cfg2 .c2-succes{color:var(--vert);font-weight:500}
#w3cfg2 .c2-verif{margin-top:10px;display:grid;gap:10px}
#w3cfg2 .c2-verif label{font-size:13px;font-weight:500;color:var(--fort);display:grid;gap:4px}
#w3cfg2 .c2-verif input,#w3cfg2 .c2-verif textarea{font-size:16px;line-height:1.4;height:auto;border:1px solid var(--champ);border-radius:var(--rayon);padding:10px 12px;background:var(--fond);color:var(--fort);width:100%}
#w3cfg2 .c2-verif textarea{min-height:84px;resize:vertical}
#w3cfg2 .c2-verif input[aria-invalid="true"]{border-color:var(--rouge)}
#w3cfg2 .c2-verif .c2-erreur{margin-top:2px;font-size:13px}
#w3cfg2 .c2-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#w3cfg2 .c2-liens{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:18px}

/* Description servie par le gabarit (visible sans JavaScript) */
#w3cfg2 .c2-apropos{margin-top:56px;max-width:70ch}
#w3cfg2 .c2-apropos h2{font-size:20px;font-weight:700;color:var(--texte);margin-bottom:12px}
#w3cfg2 .c2-apropos p{margin-bottom:12px}

@media (hover:hover) and (pointer:fine){
  #w3cfg2 .c2-opt input:not(:checked):not(:disabled):hover + .c2-c{background:var(--carte-survol)}
  #w3cfg2 .c2-btn.c2-plein:not(:disabled):hover{background:var(--orange-survol)!important}
  #w3cfg2 .c2-btn.c2-contour:not(:disabled):hover{background:var(--orange-pale)!important}
  #w3cfg2 .c2-btn.c2-discret:not(:disabled):hover{border-color:var(--orange)!important}
  #w3cfg2 .c2-pas button:not(:disabled):hover{background:var(--carte)!important}
  #w3cfg2 .c2-btn.c2-lien:hover,#w3cfg2 .c2-recap dd button:hover,#w3cfg2 .c2-etapes button:not(:disabled):hover,#w3cfg2 a.c2-nom:hover{color:var(--orange-survol)!important}
  #w3cfg2 .c2-bascule button[aria-pressed="false"]:hover{background:var(--fond)!important}
  #w3cfg2 a.c2-tel:hover{text-decoration:underline}
  #w3cfg2 details.c2-recap-mob summary:hover{background:var(--carte-survol)}
}

@media (max-width:900px){
  #w3cfg2 .c2-h1{font-size:24px}
  #w3cfg2 .c2-grille,#w3cfg2 .c2-grille.c2-fin{grid-template-columns:minmax(0,1fr);gap:24px}
  #w3cfg2 aside.c2-recap{display:none}
  #w3cfg2 details.c2-recap-mob{display:block;background:var(--carte);border-radius:var(--rayon);margin-top:18px}
  #w3cfg2 details.c2-recap-mob summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px;font-weight:600;color:var(--fort);cursor:pointer;list-style:none;border-radius:var(--rayon)}
  #w3cfg2 details.c2-recap-mob summary::-webkit-details-marker{display:none}
  #w3cfg2 details.c2-recap-mob summary .c2-etat{font-weight:400;color:var(--texte);font-size:13px;margin-left:auto}
  #w3cfg2 details.c2-recap-mob summary svg.c2-i{width:18px;height:18px;stroke-width:2.2;transition:transform .2s var(--sortie)}
  #w3cfg2 details.c2-recap-mob[open] summary svg.c2-i{transform:rotate(180deg)}
  #w3cfg2 details.c2-recap-mob .c2-recap{position:static;padding:0 14px 6px;background:none}
  #w3cfg2 details.c2-recap-mob .c2-recap h2,#w3cfg2 details.c2-recap-mob .c2-recap > p{display:none}
  #w3cfg2 details.c2-recap-mob .c2-recap dl{margin-top:0}
  #w3cfg2 .c2-caisse{position:static}
  #w3cfg2 .c2-panneau h2{font-size:20px}
  #w3cfg2 .c2-nav .c2-btn.c2-plein{flex:1;min-width:0}
}
@media (max-width:560px){
  #w3cfg2 .c2-choix{grid-template-columns:1fr 1fr}
  #w3cfg2 .c2-choix.c2-large{grid-template-columns:1fr}
  #w3cfg2 .c2-opt.c2-tete{grid-column:1 / -1}
  #w3cfg2 .c2-bascule{width:100%}
  #w3cfg2 .c2-cpt{grid-template-columns:44px minmax(0,1fr);row-gap:10px}
  #w3cfg2 .c2-cpt .c2-picto{width:44px;height:44px}
  #w3cfg2 .c2-cpt .c2-pas{grid-column:1 / -1;justify-content:space-between}
  #w3cfg2 .c2-cpt .c2-pas input{flex:1}
  #w3cfg2 .c2-prod{grid-template-columns:48px minmax(0,1fr)}
  #w3cfg2 .c2-prod .c2-picto{width:48px;height:48px}
  #w3cfg2 .c2-droite{grid-column:1 / -1;border-top:1px solid var(--filet);padding-top:8px}
  #w3cfg2 .c2-etapes li{flex:1 1 0}
  #w3cfg2 .c2-etapes li:has([aria-current]){flex:0 0 auto}
  #w3cfg2 .c2-etapes button:not([aria-current]){font-size:0}
  #w3cfg2 .c2-logo{width:32px;height:32px}
  #w3cfg2 .c2-nav{flex-wrap:wrap}
  #w3cfg2 .c2-nav .c2-zero{order:3;flex-basis:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  #w3cfg2 .c2-panneau.c2-entre{animation:c2-fondu .15s ease}
  #w3cfg2 .c2-btn,#w3cfg2 .c2-c,#w3cfg2 .c2-pas button,#w3cfg2 .c2-bascule button,#w3cfg2 .c2-etapes button::before,#w3cfg2 details.c2-recap-mob summary svg.c2-i{transition:none}
}