/* ==============================================
   SERVICES — générateur public de factures/devis
   Chargé UNIQUEMENT sur /services* (voir accueil.html/generateur.html
   {% block extra_css %}) — jamais sur le reste du site. Réutilise les
   variables CSS globales définies dans sites/basesite.html (--p, --p-dark,
   --fd, --fb, --r, --sh, ...) : aucune nouvelle identité visuelle créée.
============================================== */

/* Le .container global du site est plafonné à 1220px (voir basesite.html) —
   élargi sur toutes les sections de la page /services/ (landing) pour la
   même raison et de la même façon que sur les pages générateur ci-dessous
   (.svc-gen>.container) : plus d'espace pour un contenu plus lisible. */
.svc-hero>.container,.svc-comment>.container,.svc-faq>.container{max-width:96%}

/* ---------- HERO ---------- */
.svc-hero{padding:118px 0 84px;position:relative;overflow:hidden;background:var(--accent)}
.svc-hero .hero-glow-tr{position:absolute;top:-200px;right:-140px;width:680px;height:680px;background:radial-gradient(circle,rgba(30,101,142,.14) 0%,transparent 65%);border-radius:50%;pointer-events:none}
.svc-hero .hero-glow-bl{position:absolute;bottom:-180px;left:-120px;width:520px;height:520px;background:radial-gradient(circle,rgba(6,52,82,.07) 0%,transparent 65%);border-radius:50%;pointer-events:none}
.svc-hero .container{position:relative;z-index:1;text-align:center}
.svc-hero .hero-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.88);border:1px solid var(--p-border);color:var(--p-dark);padding:9px 20px;border-radius:99px;font-size:.84rem;font-weight:700;margin-bottom:26px;box-shadow:var(--sh-xs)}
.svc-hero h1{font-family:var(--fd);font-size:clamp(2.1rem,5.6vw,3.4rem);font-weight:800;color:var(--dark);line-height:1.14;margin-bottom:18px;letter-spacing:-.5px}
.svc-hero>.container>p{font-size:clamp(1rem,2.2vw,1.13rem);color:var(--gray);max-width:640px;margin:0 auto 42px;line-height:1.8}

.svc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;max-width:1400px;margin:0 auto 32px;text-align:left}
.svc-card{background:var(--white);border:1.5px solid var(--gray-l);border-radius:var(--r);padding:30px 26px;text-decoration:none;transition:var(--t);position:relative;overflow:hidden;display:block}
.svc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--p),var(--p-dark))}
.svc-card:hover{transform:translateY(-8px);box-shadow:var(--sh-lg);border-color:var(--p-border)}
.svc-card-icon{width:54px;height:54px;border-radius:13px;background:var(--p-glow);display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--p);margin-bottom:16px;transition:var(--t)}
.svc-card:hover .svc-card-icon{background:var(--p);color:#fff;transform:rotate(-6deg) scale(1.08)}
.svc-card h2{font-family:var(--fd);font-size:1.28rem;font-weight:800;color:var(--dark);margin-bottom:8px}
.svc-card p{color:var(--gray);font-size:.92rem;line-height:1.7;margin-bottom:18px}
.svc-card-btn{display:inline-flex;align-items:center;gap:8px;color:var(--p);font-weight:700;font-size:.92rem}
.svc-card:hover .svc-card-btn{gap:12px}

.svc-trust-line{color:var(--gray);font-weight:700;font-size:.92rem;margin-bottom:20px}
.svc-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.svc-badges span{display:inline-flex;align-items:center;gap:7px;background:var(--white);border:1px solid var(--gray-l);color:var(--p-dark);padding:8px 16px;border-radius:99px;font-size:.82rem;font-weight:700}
.svc-badges i{color:var(--p)}

/* ---------- COMMENT ÇA MARCHE ---------- */
.svc-comment{padding:100px 0;background:var(--white)}
.svc-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px}
.svc-step{text-align:center;padding:8px}
.svc-step-num{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--p) 0%,var(--p-dark) 100%);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:800;font-size:1.2rem;margin:0 auto 16px;box-shadow:0 6px 18px rgba(30,101,142,.3)}
.svc-step h3{font-family:var(--fd);font-size:1.05rem;font-weight:700;color:var(--dark);margin-bottom:8px}
.svc-step p{color:var(--gray);font-size:.88rem;line-height:1.65}

/* ---------- FAQ ---------- */
.svc-faq{padding:100px 0;background:var(--gray-xl)}
.svc-faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.svc-faq-item{background:var(--white);border:1.5px solid var(--gray-l);border-radius:var(--r-sm);padding:6px 22px;transition:var(--tf)}
.svc-faq-item[open]{border-color:var(--p-border);box-shadow:var(--sh-xs)}
.svc-faq-item summary{cursor:pointer;padding:16px 0;font-weight:700;color:var(--dark);font-size:.98rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.svc-faq-item summary::-webkit-details-marker{display:none}
.svc-faq-item summary::after{content:'+';font-size:1.3rem;color:var(--p);flex-shrink:0;transition:transform .25s}
.svc-faq-item[open] summary::after{transform:rotate(45deg)}
.svc-faq-item p{color:var(--gray);font-size:.9rem;line-height:1.75;padding-bottom:18px}

@media(max-width:768px){
    .svc-hero{padding:70px 0 56px}
    .svc-cards{grid-template-columns:1fr}
    .svc-comment,.svc-faq{padding:64px 0}
}

/* ==============================================
   GÉNÉRATEUR — formulaire par sections + aperçu live
============================================== */
.svc-gen{padding:48px 0 100px;background:var(--accent);min-height:60vh}
/* Le .container global du site est plafonné à 1220px (voir basesite.html) —
   trop étroit pour un formulaire + aperçu en direct côte à côte, qui a
   besoin de place pour rester lisible. Élargi spécifiquement sur les pages
   générateur (factures/devis, QR Code, CV) sans toucher au site normal. */
.svc-gen>.container{max-width:96%}
.svc-gen-header{text-align:center;margin-bottom:36px}
.svc-gen-header h1{font-family:var(--fd);font-size:clamp(1.7rem,4vw,2.3rem);font-weight:800;color:var(--dark);margin-bottom:8px}
.svc-gen-header p{color:var(--gray);font-size:.96rem}

/* Progression par étapes */
.svc-progress{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:38px}
.svc-progress-step{display:flex;align-items:center;gap:8px;color:var(--gray);font-size:.82rem;font-weight:700}
.svc-progress-step .dot{width:26px;height:26px;border-radius:50%;background:var(--gray-l);color:var(--gray);display:flex;align-items:center;justify-content:center;font-size:.78rem;flex-shrink:0;transition:var(--tf)}
.svc-progress-step.active .dot{background:var(--p);color:#fff}
.svc-progress-step.done .dot{background:#22c55e;color:#fff}
.svc-progress-sep{width:26px;height:2px;background:var(--gray-l)}

/* min-width:0 est indispensable sur des enfants de grille : par défaut un
   enfant de grid a min-width:auto, donc un contenu intrinsèquement large
   (ex. le tableau de l'aperçu) élargit sa colonne au lieu d'être contenu
   dans le fr qui lui est alloué, et déborde du viewport. */
.svc-gen-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:32px;align-items:flex-start;min-width:0}
.svc-gen-layout>*{min-width:0}
@media(max-width:992px){.svc-gen-layout{grid-template-columns:1fr}}

.svc-gen-form{background:var(--white);border-radius:var(--r);padding:30px;box-shadow:var(--sh-sm);border:1.5px solid var(--gray-l)}
.svc-section{margin-bottom:30px}
.svc-section:last-child{margin-bottom:0}
.svc-section h2{font-family:var(--fd);font-size:1.05rem;font-weight:800;color:var(--p-dark);margin-bottom:16px;padding-bottom:10px;border-bottom:1.5px solid var(--gray-l);display:flex;align-items:center;gap:9px}
.svc-section h2 i{color:var(--p)}

.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.svc-field{margin-bottom:14px}
.svc-field label{display:block;margin-bottom:6px;font-weight:700;font-size:.78rem;color:var(--dark);text-transform:uppercase;letter-spacing:.5px}
.svc-field .req{color:#dc2626}
.svc-field input,.svc-field select,.svc-field textarea{
    width:100%;padding:11px 14px;border:2px solid var(--gray-l);border-radius:var(--r-sm);
    font-size:.92rem;font-family:var(--fb);color:var(--dark);background:var(--gray-xl);transition:var(--tf);
}
.svc-field input:focus,.svc-field select:focus,.svc-field textarea:focus{outline:none;border-color:var(--p);background:#fff;box-shadow:0 0 0 4px rgba(30,101,142,.1)}
.svc-field textarea{min-height:80px;resize:vertical}
.svc-field .err-msg{color:#dc2626;font-size:.8rem;font-weight:600;margin-top:5px;display:none}
.svc-field.has-error input,.svc-field.has-error select,.svc-field.has-error textarea{border-color:#dc2626}
.svc-field.has-error .err-msg{display:block}

.svc-logo-drop{border:2px dashed var(--gray-l);border-radius:var(--r-sm);padding:18px;text-align:center;color:var(--gray);font-size:.85rem;cursor:pointer;transition:var(--tf);background:var(--gray-xl)}
.svc-logo-drop:hover{border-color:var(--p);color:var(--p)}
.svc-logo-preview{max-height:60px;margin-top:10px;border-radius:6px}

/* Tableau lignes produits
   min-width:0 est nécessaire ici : basesite.html définit un sélecteur `table`
   global avec min-width:800px (pour le tableau de comparaison des packs sur
   la page d'accueil) qui, faute d'être neutralisé, s'appliquerait aussi à ce
   tableau et le ferait déborder de son panneau. */
.svc-lignes-table{width:100%;min-width:0;border-collapse:collapse;margin-bottom:12px}
.svc-lignes-table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;color:var(--gray);padding:0 8px 8px;font-weight:700}
/* Pas de display:none ici : le contenu d'un <template> est déjà inerte/non
   rendu tant qu'il n'est pas cloné (voir ajouterLigne() dans
   services-generateur.js) — une règle display:none sur .svc-ligne-row
   masquerait aussi les lignes déjà clonées et ajoutées au tbody, puisque
   celles-ci portent la même classe. */
.svc-ligne-row td{padding:5px 6px;vertical-align:top}
.svc-ligne-total{font-weight:700;color:var(--p-dark);font-size:.88rem;white-space:nowrap;padding-top:12px;display:block}
.svc-ligne-del{background:none;border:none;color:#dc2626;cursor:pointer;font-size:1rem;padding:8px}
.svc-add-ligne{background:var(--p-glow);border:1.5px dashed var(--p-border);color:var(--p);padding:10px 18px;border-radius:var(--r-sm);font-weight:700;font-size:.85rem;cursor:pointer;transition:var(--tf);display:inline-flex;align-items:center;gap:8px}
.svc-add-ligne:hover{background:var(--p);color:#fff;border-style:solid}

/* Cards mobiles pour les lignes (petit écran) */
@media(max-width:640px){
    .svc-lignes-table thead{display:none}
    .svc-lignes-table,.svc-lignes-table tbody,.svc-lignes-table tr,.svc-lignes-table td{display:block;width:100%}
    .svc-lignes-table tr{border:1.5px solid var(--gray-l);border-radius:var(--r-sm);margin-bottom:12px;padding:12px;position:relative}
    .svc-lignes-table td{padding:4px 0}
}

.svc-remise-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.svc-remise-row .svc-field{flex:1;min-width:140px;margin-bottom:0}

.svc-tva-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.svc-tva-chip{border:2px solid var(--gray-l);border-radius:99px;padding:8px 18px;font-size:.85rem;font-weight:700;color:var(--gray);cursor:pointer;transition:var(--tf);background:var(--white)}
.svc-tva-chip.active{border-color:var(--p);color:var(--p);background:var(--p-glow)}

/* ---------- Sélecteur de thème (cartes) ---------- */
.svc-theme-intro{color:var(--gray);font-size:.85rem;margin-bottom:16px;line-height:1.6}
.svc-theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.svc-theme-card{border:2px solid var(--gray-l);border-radius:var(--r-sm);padding:12px;cursor:pointer;transition:var(--tf);background:var(--white);position:relative}
.svc-theme-card:hover{border-color:var(--p-border)}
.svc-theme-card.active{border-color:var(--p);box-shadow:0 0 0 4px rgba(30,101,142,.1)}
.svc-theme-swatch{display:flex;height:30px;border-radius:6px;overflow:hidden;margin-bottom:8px}
.svc-theme-swatch span{flex:1}
.svc-theme-card-name{font-size:.8rem;font-weight:700;color:var(--dark);text-align:center}
.svc-theme-card-desc{font-size:.7rem;color:var(--gray);text-align:center;margin-top:2px;line-height:1.4}
.svc-theme-card-actions{display:flex;justify-content:center;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--gray-l)}
.svc-theme-card-action{background:none;border:none;color:var(--gray);cursor:pointer;padding:4px 6px;font-size:.8rem;border-radius:4px}
.svc-theme-card-action:hover{color:var(--p);background:var(--p-glow)}
.svc-theme-create-btn{width:100%}

/* ---------- Éditeur de thème personnalisé ---------- */
.svc-theme-editor{border:1.5px solid var(--gray-l);border-radius:var(--r-sm);padding:20px;margin-top:16px;background:var(--gray-xl)}
.svc-theme-editor-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.svc-theme-editor-head h3{font-family:var(--fd);font-size:1rem;color:var(--p-dark)}
.svc-theme-editor-close{background:none;border:none;font-size:1.4rem;line-height:1;color:var(--gray);cursor:pointer;padding:0 4px}
.svc-theme-editor fieldset{border:none;padding:0;margin:0 0 18px}
.svc-theme-editor legend{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--p-dark);margin-bottom:10px;padding:0}
.svc-theme-editor-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.svc-theme-editor-row label{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--dark);font-weight:600;text-transform:none;letter-spacing:0}
.svc-theme-editor input[type=color]{width:40px;height:32px;border:2px solid var(--gray-l);border-radius:6px;padding:2px;cursor:pointer;background:none}
.svc-theme-editor select{padding:8px 10px;border:2px solid var(--gray-l);border-radius:var(--r-sm);font-size:.85rem;background:var(--white)}
.svc-theme-reseaux{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.svc-theme-reseaux select{max-width:140px}
.svc-theme-reseaux input{flex:1;min-width:140px;padding:8px 10px;border:2px solid var(--gray-l);border-radius:var(--r-sm);font-size:.85rem}
.svc-theme-editor-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.svc-theme-delete-btn{background:#fee2e2;border:1.5px solid #fca5a5;color:#991b1b;padding:10px 18px;border-radius:var(--r-sm);font-weight:700;font-size:.85rem;cursor:pointer}

.svc-form-actions{display:flex;justify-content:space-between;gap:14px;margin-top:30px;flex-wrap:wrap}
.svc-form-actions .btn{margin-left:auto}
.svc-honeypot{position:absolute;left:-9999px;opacity:0;height:0;width:0}

.svc-alert-error{background:#fee2e2;border:1px solid #fca5a5;color:#991b1b;padding:14px 18px;border-radius:var(--r-sm);margin-bottom:20px;font-size:.9rem;font-weight:600}

/* ---------- APERÇU LIVE ---------- */
.svc-preview-col{position:sticky;top:96px}
.svc-mobile-preview-btn{display:none;width:100%;margin-bottom:18px}
.svc-preview-wrap{background:var(--white);border-radius:var(--r);box-shadow:var(--sh);border:1.5px solid var(--gray-l);padding:0;overflow:hidden}
.svc-preview-header{background:var(--gray-xl);padding:12px 18px;font-size:.78rem;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.6px;border-bottom:1.5px solid var(--gray-l);display:flex;align-items:center;justify-content:space-between}
.svc-preview-doc{
    padding:26px;font-size:.82rem;color:var(--dark);max-height:74vh;overflow-y:auto;overflow-x:auto;
    font-family:var(--theme-font-contenu);
    /* Valeurs par défaut (Classique Professionnel) — écrasées en JS par
       SvcThemes.applyTheme() dès qu'un thème est sélectionné (voir
       services-themes.js), jamais modifiées côté serveur : c'est l'aperçu
       navigateur uniquement, le PDF final est piloté indépendamment via
       templates/services/pdf_document.html. */
    --theme-c-principale:#1e658e; --theme-c-secondaire:#063452; --theme-c-titres:#063452;
    --theme-c-tableau:#063452; --theme-c-totaux:#063452; --theme-c-lignes:#dde6ec;
    --theme-font-titres:var(--fd); --theme-font-contenu:var(--fb);
    --theme-taille-titres:24px; --theme-taille-contenu:11px;
    --theme-logo-taille:52px; --theme-logo-marge:6px;
}
.svc-pv-top{display:flex;justify-content:space-between;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.svc-pv-logo img{max-height:var(--theme-logo-taille);max-width:180px;margin-bottom:var(--theme-logo-marge)}
.svc-pv-logo-fallback{font-family:var(--theme-font-titres);font-weight:800;font-size:1.1rem;color:var(--theme-c-principale)}
.svc-pv-title{text-align:right}
.svc-pv-title h3{font-family:var(--theme-font-titres);font-size:calc(var(--theme-taille-titres) * .9);color:var(--theme-c-titres);letter-spacing:1px}
.svc-pv-title .num{color:var(--gray);font-size:.8rem}
.svc-pv-meta{font-size:.72rem;color:var(--gray);margin-top:6px;line-height:1.6}
.svc-pv-dates{font-size:.72rem;color:var(--gray);margin-top:8px;line-height:1.7;text-align:right}
.svc-pv-client{background:var(--gray-xl);border-radius:var(--r-sm);padding:12px 14px;margin-bottom:18px;font-size:.8rem}
.svc-pv-client strong{display:block;color:var(--p-dark);font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.svc-pv-client-meta{margin-top:2px;line-height:1.6}
.svc-pv-notes-block{margin-top:16px}
.svc-pv-notes-title{font-size:.68rem;text-transform:uppercase;letter-spacing:.5px;color:var(--gray);font-weight:700;margin-bottom:4px}
.svc-pv-notes-text{font-size:.78rem;color:var(--dark);white-space:pre-line;line-height:1.6}
/* table-layout:fixed contraint les colonnes à la largeur du conteneur (sinon
   le contenu — DÉSIGNATION/QTÉ/P.U./TOTAL — pousse le tableau plus large que
   le panneau d'aperçu, qui déborde alors horizontalement). */
.svc-pv-table{width:100%;min-width:0;table-layout:fixed;border-collapse:collapse;margin-bottom:16px;font-size:.78rem;font-family:var(--theme-font-contenu)}
.svc-pv-table th{text-align:left;padding:6px 4px;color:#fff;background:var(--theme-c-tableau);font-size:.68rem;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.theme-table-light-header .svc-pv-table th{color:var(--theme-c-titres)}
.svc-pv-table td{padding:6px 4px;overflow-wrap:break-word}
.theme-table-bordures .svc-pv-table td{border-bottom:1px solid var(--theme-c-lignes)}
.theme-table-stripes .svc-pv-table tbody tr:nth-child(even){background:var(--gray-xl)}
.theme-table-rounded .svc-pv-table{border-radius:8px;overflow:hidden}
.theme-table-rounded .svc-pv-table th:first-child{border-top-left-radius:8px}
.theme-table-rounded .svc-pv-table th:last-child{border-top-right-radius:8px}
.svc-pv-table th:first-child,.svc-pv-table td:first-child{width:46%}
.svc-pv-table td:last-child,.svc-pv-table th:last-child{text-align:right}
.svc-pv-totals{margin-left:auto;max-width:260px;font-size:.82rem;font-family:var(--theme-font-contenu)}
.svc-pv-totals div{display:flex;justify-content:space-between;padding:4px 0}
.svc-pv-totals .total{font-weight:800;color:var(--theme-c-totaux);font-size:1rem;margin-top:6px}
.theme-totaux-encadre .svc-pv-totals .total{border:1.5px solid var(--theme-c-totaux);padding:8px 10px}
.theme-totaux-fond_colore .svc-pv-totals .total{background:var(--theme-c-totaux);color:#fff;padding:8px 10px}
.theme-totaux-transparent .svc-pv-totals .total{border-top:2px solid var(--theme-c-totaux);padding-top:8px}
.svc-pv-empty{color:var(--gray);text-align:center;padding:40px 10px;font-size:.85rem}

/* ---------- Dispositions pilotées par le thème (en-tête / logo) ---------- */
.theme-entete-vertical .svc-pv-top{flex-direction:column}
.theme-entete-centre .svc-pv-top{flex-direction:column;text-align:center}
.theme-entete-centre .svc-pv-title{text-align:center;margin:0 auto}
.theme-logo-centre .svc-pv-logo{width:100%;text-align:center}
.theme-logo-droite .svc-pv-top{flex-direction:row-reverse}
.theme-logo-droite .svc-pv-title{text-align:left}

@media(max-width:992px){
    .svc-preview-col{position:static}
    /* scroll-margin-top : quand le bouton "Aperçu" mobile déclenche
       previewWrap.scrollIntoView(), le navigateur respecte cette marge
       quel que soit l'élément réellement scrollable (body/html — variable
       selon les pages de ce site) — sans elle, l'en-tête "Aperçu en
       direct" du panneau se retrouve caché sous le header sticky du site
       (~110px). Une correction en JS post-scroll (scrollBy sur l'élément
       de scroll détecté) s'est révélée peu fiable d'une page à l'autre. */
    .svc-preview-wrap{display:none;scroll-margin-top:130px}
    .svc-preview-wrap.mobile-open{display:block}
    .svc-mobile-preview-btn{display:inline-flex}
    .svc-theme-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
    .svc-theme-editor-row{flex-direction:column;align-items:flex-start;gap:12px}
    .svc-theme-reseaux select{max-width:none;width:100%}
}