/* ============================================================ Configurateur de caissons — front TOUT CE QUI SE VOIT SE RÈGLE ICI. Les jetons ci-dessous sont la seule source de l'apparence : aucune couleur, aucune taille, aucune épaisseur de trait n'est écrite ailleurs dans ce fichier — tools/jetons.php le vérifie à chaque contrôle. Ils sont posés sur :root et non sur .ccx-app, parce que deux surfaces du configurateur vivent hors de lui : la loupe de décor et la fenêtre de demande spéciale sont ajoutées au pour échapper à l'overflow:clip et aux z-index du thème. Des jetons scopés au bloc ne les atteindraient pas, et le client réglerait sa charte pour découvrir au premier clic une fenêtre restée dans l'ancien style. L'écran de réglages réécrit ces valeurs en ligne (includes/charte.php). Celles d'ici sont donc les valeurs d'usine, et rien d'autre. ============================================================ */ :root{ /* ---------- La police, et l'échelle ---------- Arial plutôt qu'une police chargée chez Google : une requête externe de moins, et plus aucune donnée envoyée à un tiers. Liberation Sans est métriquement identique à Arial, ce qui rattrape les machines qui ne l'ont pas. L'échelle multiplie toutes les tailles d'un coup — sans elle, « agrandir un peu tout » demanderait huit corrections. */ --ccx-font: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif; --ccx-font-chiffre: var(--ccx-font); --ccx-echelle: 1; /* L'en-tête se retire côté serveur : ce jeton n'existe que pour que l'aperçu de l'écran de réglages puisse le montrer sans recharger. */ --ccx-entete-d: flex; --ccx-base-size:13.5px; /* ce dont hérite ce qui ne porte pas de rôle */ /* ---------- Les couleurs ---------- */ --ccx-paper:#FFFFFF; /* fond principal */ --ccx-surface:#FAFAFA; /* fond secondaire (aperçu, en-tête) */ --ccx-ink:#1a1a1a; /* texte principal */ --ccx-ink-soft:#707070; /* texte secondaire */ --ccx-ink-fort:#000000; /* survol du bouton principal */ --ccx-ink-mid:#4a4a4a; /* traits techniques secondaires */ --ccx-line:#E5E5E5; /* traits fins */ --ccx-line-strong:#a0a0a0; /* traits marqués, et le dessin technique */ --ccx-line-fond:#D5D5D5; /* le fond du caisson, dans le dessin technique */ --ccx-accent:#1a1a1a; /* accent — monochrome par défaut */ --ccx-accent-soft:#F0F0F0; /* fond d'un choix retenu */ --ccx-accent-ink:#1a1a1a; --ccx-warn:#8a6a2e; /* contrainte imposée */ --ccx-warn-soft:#F5EFE1; --ccx-alert:#B4341C; /* hors plage */ --ccx-alert-soft:#FBEAE4; --ccx-voile:rgba(20,20,20,.82); /* derrière une fenêtre */ --ccx-voile-doux:rgba(20,20,20,.6); /* derrière la demande spéciale */ --ccx-verre:rgba(255,255,255,.86); /* pastille posée sur une photo */ --ccx-verre-plein:rgba(255,255,255,.88); --ccx-vernis:rgba(255,255,255,.18); /* le liseré intérieur d'une vignette */ --ccx-atelier:#F7F7F5; /* un message venu de l'atelier */ --ccx-atelier-bord:#DcDcD8; /* ---------- Les huit rôles de texte ---------- Un élément est AFFECTÉ à un rôle ; on règle le rôle, jamais l'élément. C'est ce qui tient la hiérarchie : deux titres d'étape ne peuvent plus diverger d'un demi-pixel parce qu'on les a réglés séparément. */ /* Titre 1 — le titre du configurateur */ --ccx-t1-size:17px; --ccx-t1-weight:600; --ccx-t1-case:none; --ccx-t1-track:-.01em; --ccx-t1-color:var(--ccx-ink); /* Titre 2 — le titre d'une étape, et ceux de la colonne d'aperçu */ --ccx-t2-size:11.5px; --ccx-t2-weight:600; --ccx-t2-case:uppercase; --ccx-t2-track:.1em; --ccx-t2-color:var(--ccx-ink); /* Titre 3 — les sous-titres : « Nomenclature panneaux », « Total estimé » */ --ccx-t3-size:12px; --ccx-t3-weight:600; --ccx-t3-case:none; --ccx-t3-track:0; --ccx-t3-color:var(--ccx-ink); /* Libellé — le nom d'un champ */ --ccx-li-size:11.5px; --ccx-li-weight:500; --ccx-li-case:none; --ccx-li-track:0; --ccx-li-color:var(--ccx-ink-soft); /* Bouton — le texte à l'intérieur d'un bouton de choix */ --ccx-bt-size:12px; --ccx-bt-weight:500; --ccx-bt-case:none; --ccx-bt-track:0; /* Courant — le récapitulatif, le tableau, le corps de texte */ --ccx-co-size:11.5px; --ccx-co-weight:400; --ccx-co-case:none; --ccx-co-track:0; --ccx-co-color:var(--ccx-ink); /* Note — l'aide, la précision, l'unité, le pied de page */ --ccx-no-size:10.5px; --ccx-no-weight:400; --ccx-no-case:none; --ccx-no-track:0; --ccx-no-color:var(--ccx-ink-soft); /* Chiffre — les cotes, les quantités, les prix. tabular-nums garde les colonnes alignées sans police monospace : c'est ce qui permet d'abandonner Space Mono sans déformer le tableau. */ --ccx-ch-size:13px; --ccx-ch-weight:400; --ccx-ch-track:0; --ccx-ch-color:var(--ccx-ink); /* Trois variantes assumées, parce que la hiérarchie les demande. */ --ccx-prix-size:18px; --ccx-prix-weight:700; /* le total */ --ccx-th-size:9.5px; /* l'en-tête du tableau */ --ccx-mini-size:10px; /* nom de vignette, badge */ --ccx-ref-size:9px; /* la référence nuancier */ --ccx-t1-fenetre:16px; /* le titre d'une fenêtre */ --ccx-nom-grand:15px; /* un décor en grand format */ --ccx-ds-ref-size:14px; /* la référence d'une demande */ --ccx-icone:24px; --ccx-icone-lg:26px; /* fermer, et parcourir */ /* ---------- Les quatre niveaux de bouton ---------- repos · survol · sélectionné · désactivé. L'état SÉLECTIONNÉ n'est pas une finition : pour le niveau 3, c'est lui qui dit au client ce qu'il a choisi. */ /* Bouton 1 — l'action qui engage : « Ajouter au panier » */ --ccx-b1-bg:var(--ccx-ink); --ccx-b1-ink:var(--ccx-paper); --ccx-b1-bord:transparent; --ccx-b1-bord-w:0px; --ccx-b1-bord-style:solid; --ccx-b1-bg-hover:var(--ccx-ink-fort); --ccx-b1-size:12.5px; --ccx-b1-weight:600; --ccx-b1-case:none; --ccx-b1-track:.02em; --ccx-b1-r:6px; --ccx-b1-ombre:0 1px 2px rgba(16,16,16,.05), 0 12px 28px -14px rgba(16,16,16,.14); /* Bouton 2 — l'action qui propose : « + Tiroir », « + Ajouter un caisson » */ --ccx-b2-bg:var(--ccx-paper); --ccx-b2-ink:var(--ccx-ink-soft); --ccx-b2-bord:var(--ccx-line-strong); --ccx-b2-bord-w:1px; --ccx-b2-bord-style:solid; --ccx-b2-bord-hover:var(--ccx-ink); --ccx-b2-ink-hover:var(--ccx-ink); --ccx-b2-size:11.5px; --ccx-b2-weight:400; --ccx-b2-r:6px; /* Bouton 3 — le choix, de loin le plus nombreux */ --ccx-b3-bg:var(--ccx-paper); --ccx-b3-ink:var(--ccx-ink); --ccx-b3-bord:var(--ccx-line); --ccx-b3-bord-w:1px; --ccx-b3-bord-style:solid; --ccx-b3-bord-hover:var(--ccx-line-strong); --ccx-b3-bg-on:var(--ccx-accent-soft); --ccx-b3-ink-on:var(--ccx-ink); --ccx-b3-bord-on:var(--ccx-ink); --ccx-b3-weight-on:600; --ccx-b3-r:6px; /* Contour d'UN bouton précis, par exception au reste du groupe : par défaut un simple alias du contour de groupe ci-dessus, qu'un attribut `style` posé sur ce seul bouton (includes/front.php, ccx_opt_style_attr) vient éventuellement recouvrir. */ --ccx-opt-bord:var(--ccx-b3-bord); --ccx-opt-bord-on:var(--ccx-b3-bord-on); /* Bouton 4 — icônes et liens */ --ccx-b4-ink:var(--ccx-ink-soft); --ccx-b4-ink-hover:var(--ccx-ink); --ccx-b4-bord:var(--ccx-line); --ccx-b4-bord-w:1px; --ccx-b4-bord-style:solid; --ccx-b4-r:4px; /* ---------- Les sept familles de cadres ---------- Une épaisseur à 0 retire le trait SANS que la mise en page bouge : les marges intérieures restent. C'est « enlever les cadres », demandé tel quel. */ --ccx-cadre-bloc-w:1px; --ccx-cadre-bloc-c:var(--ccx-line); --ccx-cadre-bloc-r:8px; --ccx-cadre-etape-w:1px; --ccx-cadre-etape-c:var(--ccx-line); --ccx-cadre-etape-r:8px; --ccx-cadre-carte-w:1px; --ccx-cadre-carte-c:var(--ccx-line); --ccx-cadre-carte-r:8px; --ccx-cadre-champ-w:1px; --ccx-cadre-champ-c:var(--ccx-line); --ccx-cadre-champ-r:6px; --ccx-cadre-tableau-w:1px; --ccx-cadre-tableau-c:var(--ccx-line); --ccx-cadre-vignette-w:1px;--ccx-cadre-vignette-c:var(--ccx-line-strong); --ccx-cadre-vignette-r:3px; --ccx-cadre-bloc-ombre:0 1px 2px rgba(16,16,16,.05), 0 12px 28px -14px rgba(16,16,16,.14); --ccx-cadre-carte-ombre:0 1px 2px rgba(16,16,16,.035); --ccx-cadre-etape-ombre:0 1px 2px rgba(16,16,16,.04); /* ---------- Rayons, mouvement, anneau de focus ---------- L'anneau de focus n'est pas réglable : c'est lui qui rend le configurateur utilisable au clavier. */ --ccx-r-xs:4px; --ccx-r-sm:6px; --ccx-r:8px; --ccx-r-lg:14px; --ccx-r-pilule:100px; --ccx-ring:0 0 0 3px rgba(26,26,26,.14); --ccx-ease:cubic-bezier(.2,.7,.3,1); --ccx-dur:.16s; --ccx-shadow-lift:0 2px 4px rgba(16,16,16,.06), 0 18px 36px -16px rgba(16,16,16,.2); } /* Les anciens noms restent en vie le temps d'une version : un thème enfant qui les surchargeait ne casse pas du jour au lendemain. */ .ccx-app{ --paper:var(--ccx-paper); --surface:var(--ccx-surface); --ink:var(--ccx-ink); --ink-soft:var(--ccx-ink-soft); --line:var(--ccx-line); --line-strong:var(--ccx-line-strong); --accent:var(--ccx-accent); --accent-soft:var(--ccx-accent-soft); --accent-ink:var(--ccx-accent-ink); --warn:var(--ccx-warn); --warn-soft:var(--ccx-warn-soft); --alert:var(--ccx-alert); --alert-soft:var(--ccx-alert-soft); --r:var(--ccx-r); --r-xs:var(--ccx-r-xs); --r-sm:var(--ccx-r-sm); --r-lg:var(--ccx-r-lg); --ring:var(--ccx-ring); --ease:var(--ccx-ease); --dur:var(--ccx-dur); --shadow:var(--ccx-cadre-bloc-ombre); --shadow-lift:var(--ccx-shadow-lift); font-family:var(--ccx-font); color:var(--ccx-ink); background:var(--ccx-paper); line-height:1.45; font-size:calc(var(--ccx-base-size) * var(--ccx-echelle)); max-width:1080px; margin:0 auto; border-radius:var(--ccx-cadre-bloc-r); /* overflow:clip découpe les coins arrondis SANS piéger le position:sticky du viewer (contrairement à overflow:hidden). hidden = repli navigateurs anciens. */ overflow:hidden; overflow:clip; border:var(--ccx-cadre-bloc-w) solid var(--ccx-cadre-bloc-c); box-shadow:var(--ccx-cadre-bloc-ombre); -webkit-font-smoothing:antialiased; } .ccx-app *{box-sizing:border-box; margin:0; padding:0} .ccx-app button{font:inherit; cursor:pointer; border:none; background:none; color:inherit; line-height:1} .ccx-app input,.ccx-app select,.ccx-app output{font:inherit} .ccx-app label{margin:0} .ccx-app h1,.ccx-app h2,.ccx-app h3,.ccx-app .mono{font-family:var(--ccx-font); line-height:1.2} .ccx-app .mono-num{font-family:var(--ccx-font-chiffre); font-variant-numeric:tabular-nums} .ccx-app em{font-style:normal; opacity:.55; font-size:.9em; margin-left:2px} /* ---------- Header ---------- */ .ccx-app .ccx-header{ padding:16px 22px; border-bottom:var(--ccx-cadre-bloc-w) solid var(--ccx-cadre-bloc-c); display:var(--ccx-entete-d); align-items:baseline; gap:14px; flex-wrap:wrap; background:var(--ccx-surface); } .ccx-app .ccx-header h1{font-size:calc(var(--ccx-t1-size) * var(--ccx-echelle)); font-weight:var(--ccx-t1-weight); text-transform:var(--ccx-t1-case); letter-spacing:var(--ccx-t1-track); color:var(--ccx-t1-color)} .ccx-app .ccx-header .tag{ font-size:calc(var(--ccx-mini-size) * var(--ccx-echelle)); letter-spacing:.14em; text-transform:uppercase; color:var(--ccx-ink-soft); border:var(--ccx-b4-bord-w) solid var(--ccx-line-strong); border-radius:var(--ccx-r-pilule); padding:2px 8px; font-weight:var(--ccx-li-weight); } .ccx-app .ccx-header .sub{font-size:calc(var(--ccx-t3-size) * var(--ccx-echelle)); color:var(--ccx-ink-soft); margin-left:auto} /* ---------- Bandeau de session ---------- Le client arrive par un lien d'e-mail : il doit lire en une ligne où il est, et voir nommés les composants que l'atelier a ajoutés pour lui. */ .ccx-app .ccx-session{ padding:14px 22px; border-bottom:1px solid var(--ccx-line); background:var(--ccx-accent-soft); font-size:calc(var(--ccx-b1-size) * var(--ccx-echelle)); } .ccx-app .ccx-session p{margin:0 0 6px; color:var(--ccx-ink-soft)} .ccx-app .ccx-session p:last-of-type{margin-bottom:0} .ccx-app .ccx-session-h{display:flex; align-items:center; gap:10px; margin-bottom:5px} .ccx-app .ccx-session-h strong{font-size:calc(var(--ccx-base-size) * var(--ccx-echelle)); color:var(--ccx-ink)} .ccx-app .ccx-session-st{ font-size:calc(var(--ccx-mini-size) * var(--ccx-echelle)); letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--ccx-line-strong); border-radius:100px; padding:2px 8px; color:var(--ccx-ink-soft); } .ccx-app .ccx-session-sur{color:var(--ccx-ink)} .ccx-app .ccx-session-fil{ margin-top:8px; font-size:calc(var(--ccx-t3-size) * var(--ccx-echelle)); text-decoration:underline; text-underline-offset:3px; color:var(--ccx-ink); } .ccx-app .ccx-session--ferme{background:var(--ccx-warn-soft)} .ccx-app .ccx-session-cta{ display:inline-block; margin-top:4px; padding:7px 14px; border-radius:var(--ccx-r); background:var(--ccx-ink); color:var(--ccx-paper); text-decoration:none; font-size:calc(var(--ccx-b1-size) * var(--ccx-echelle)); font-weight:500; } /* ---------- Layout ---------- */ .ccx-app .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.575fr); gap:0; align-items:start} .ccx-app .config{padding:18px 22px 40px; min-width:0} /* --ccx-header-offset = hauteur de l'en-tête fixe du thème (Divi ≈ 54px scrollé), utilisé comme dégagement en haut pour le panneau collant. Ajustable par thème. */ .ccx-app{ --ccx-header-offset:70px; } /* Barre d'administration WordPress (utilisateur connecté) : +32px fixes en haut. */ .admin-bar .ccx-app{ --ccx-header-offset:102px; } /* .viewer = colonne pleine hauteur : porte le fond + le trait de séparation. align-self:stretch donne au panneau collant à l'intérieur la marge pour rester collé sur toute la longueur du scroll. */ .ccx-app .viewer{ align-self:stretch; padding:18px 22px 40px; border-left:var(--ccx-cadre-bloc-w) solid var(--ccx-cadre-bloc-c); background:var(--ccx-surface); } /* Toute la partie droite (aperçu + récap + débit) reste collée sous l'en-tête. Limitée à la hauteur visible : si le contenu dépasse, il défile à l'intérieur du panneau au lieu de sortir de l'écran. */ .ccx-app .viewer-sticky{ position:sticky; top:var(--ccx-header-offset); max-height:calc(100vh - var(--ccx-header-offset) - 12px); overflow:auto; /* place pour la barre de défilement interne sans coller au texte */ scrollbar-gutter:stable; } @media(max-width:920px){ .ccx-app .wrap{grid-template-columns:1fr} .ccx-app .viewer{border-left:none; border-top:var(--ccx-cadre-bloc-w) solid var(--ccx-cadre-bloc-c)} /* Colonne unique : le panneau repasse dans le flux normal. */ .ccx-app .viewer-sticky{position:static; max-height:none; overflow:visible} } /* ---------- Sections (accordéons via
) ---------- */ .ccx-app .section{ margin-bottom:8px; border:var(--ccx-cadre-etape-w) solid var(--ccx-cadre-etape-c); border-radius:var(--ccx-cadre-etape-r); background:var(--ccx-paper); } .ccx-app .section > .head{ display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; list-style:none; /* retire le triangle par défaut */ user-select:none; position:relative; } .ccx-app .section > .head::-webkit-details-marker{display:none} .ccx-app .section > .head::after{ content:''; position:absolute; right:14px; top:50%; width:8px; height:8px; border-right:1.5px solid var(--ccx-ink-soft); border-bottom:1.5px solid var(--ccx-ink-soft); transform:translateY(-70%) rotate(-45deg); transition:transform .18s ease; } .ccx-app .section[open] > .head::after{ transform:translateY(-30%) rotate(45deg); } .ccx-app .section > .head:hover{background:var(--ccx-surface)} .ccx-app .section[open] > .head{border-bottom:var(--ccx-cadre-etape-w) solid var(--ccx-cadre-etape-c)} .ccx-app .section .num{ font-family:var(--ccx-font-chiffre); font-size:calc(var(--ccx-no-size) * var(--ccx-echelle)); font-variant-numeric:tabular-nums; color:var(--ccx-no-color); border:var(--ccx-cadre-etape-w) solid var(--ccx-cadre-etape-c); background:var(--ccx-paper); width:22px; height:22px; display:grid; place-items:center; border-radius:3px; flex:none; } .ccx-app .section h2{font-size:calc(var(--ccx-t2-size) * var(--ccx-echelle)); text-transform:var(--ccx-t2-case); letter-spacing:var(--ccx-t2-track); font-weight:var(--ccx-t2-weight); color:var(--ccx-t2-color)} .ccx-app .section > *:not(.head){padding-left:14px; padding-right:14px} .ccx-app .section > .head + .ccx-regle-msgs + *{padding-top:14px} .ccx-app .section > *:not(.head):last-child{padding-bottom:14px} /* Le dernier enfant réel d'une étape est parfois une alerte encore masquée (dim-alert, forced-note) ou un champ conditionnel (.hidden) : la règle ci-dessus lui donne alors sa marge à lui, invisible, et l'étape se retrouve collée à son cadre bas. C'est l'élément visible juste avant qui doit la porter. */ .ccx-app .section > *:has(+ .dim-alert:last-child:not(.on)), .ccx-app .section > *:has(+ .forced-note:last-child:not(.on)), .ccx-app .section > *:has(+ .hidden:last-child){padding-bottom:14px} .ccx-app .section .hint{font-size:calc(var(--ccx-no-size) * var(--ccx-echelle)); font-weight:var(--ccx-no-weight); color:var(--ccx-no-color); margin:0 0 8px 0} /* Case Plinthe (checkbox inline sous socle) */ .ccx-app .ccx-plinthe{ display:inline-flex; align-items:center; gap:8px; margin-top:10px; padding:6px 10px; border:1px solid var(--ccx-line); border-radius:4px; background:var(--ccx-paper); cursor:pointer; font-size:calc(var(--ccx-t3-size) * var(--ccx-echelle)); transition:.12s; } .ccx-app .ccx-plinthe:hover{border-color:var(--ccx-line-strong)} .ccx-app .ccx-plinthe input{accent-color:var(--ccx-ink); margin:0} .ccx-app .ccx-plinthe:has(input:checked){border-color:var(--ccx-ink); background:var(--ccx-accent-soft); font-weight:500} .ccx-app .ccx-plinthe.hidden{display:none} .ccx-app .ccx-pieds-size.hidden{display:none} .ccx-app .ccx-patins-size.hidden{display:none} /* ---------- Controls ---------- */ .ccx-app .field{margin-bottom:12px} .ccx-app .field > label{display:block; font-size:calc(var(--ccx-li-size) * var(--ccx-echelle)); font-weight:var(--ccx-li-weight); text-transform:var(--ccx-li-case); letter-spacing:var(--ccx-li-track); color:var(--ccx-li-color); margin-bottom:5px} .ccx-app .field > label.group-title{font-size:calc(var(--ccx-t3-size) * var(--ccx-echelle)); font-weight:var(--ccx-t3-weight); text-transform:var(--ccx-t3-case); letter-spacing:var(--ccx-t3-track); color:var(--ccx-t3-color)} .ccx-app .dims{display:grid; grid-template-columns:repeat(3,1fr); gap:8px} .ccx-app .dims .unit{position:relative} .ccx-app .dims .unit label{display:block; font-size:calc(var(--ccx-no-size) * var(--ccx-echelle)); font-weight:var(--ccx-no-weight); color:var(--ccx-no-color); margin-bottom:4px} .ccx-app .dims .unit span{position:absolute; right:9px; top:calc(50% + 8px); transform:translateY(-50%); font-size:calc(var(--ccx-no-size) * var(--ccx-echelle)); color:var(--ccx-no-color); font-family:var(--ccx-font-chiffre); pointer-events:none} .ccx-app input[type=number]{ width:100%; font-family:var(--ccx-font-chiffre); font-size:calc(var(--ccx-ch-size) * var(--ccx-echelle)); font-weight:var(--ccx-ch-weight); letter-spacing:var(--ccx-ch-track); font-variant-numeric:tabular-nums; padding:7px 28px 7px 10px; border:var(--ccx-cadre-champ-w) solid var(--ccx-cadre-champ-c); border-radius:var(--ccx-r-xs); background:var(--ccx-paper); color:var(--ccx-ch-color); height:auto; line-height:normal; transition:border-color .12s; } .ccx-app input[type=number]:hover{border-color:var(--ccx-line-strong)} .ccx-app input[type=number]:focus{outline:none; border-color:var(--ccx-ink); box-shadow:0 0 0 1px var(--ccx-ink)} .ccx-app input[type=number].out-of-range{border-color:var(--ccx-alert); background:var(--ccx-alert-soft)} .ccx-app .dim-alert{ display:none; margin-top:8px; padding:7px 10px; font-size:calc(var(--ccx-co-size) * var(--ccx-echelle)); color:var(--ccx-alert); background:var(--ccx-alert-soft); border:var(--ccx-cadre-champ-w) solid var(--ccx-alert); border-radius:var(--ccx-r-xs); } .ccx-app .dim-alert.on{display:block} /* segmented / pills — plan technique */ .ccx-app .seg{display:flex; flex-wrap:wrap; gap:5px} .ccx-app .seg label{cursor:pointer; position:relative} .ccx-app .seg input{position:absolute; opacity:0; pointer-events:none} .ccx-app .seg span{ display:block; text-align:center; padding:7px 12px; font-size:calc(var(--ccx-bt-size) * var(--ccx-echelle)); font-weight:var(--ccx-bt-weight); text-transform:var(--ccx-bt-case); letter-spacing:var(--ccx-bt-track); border:var(--ccx-b3-bord-w) var(--ccx-b3-bord-style) var(--ccx-opt-bord); border-radius:var(--ccx-r-xs); background:var(--ccx-b3-bg); color:var(--ccx-b3-ink); transition:.12s; white-space:nowrap; } .ccx-app .seg span:hover{border-color:var(--ccx-b3-bord-hover)} .ccx-app .seg input:checked + span{border-color:var(--ccx-opt-bord-on); background:var(--ccx-b3-bg-on); color:var(--ccx-b3-ink-on); font-weight:var(--ccx-b3-weight-on)} .ccx-app .seg input:focus-visible + span{outline:2px solid var(--ccx-ink); outline-offset:2px} .ccx-app .seg input:disabled + span{opacity:.35; cursor:not-allowed; background:var(--ccx-surface)} .ccx-app .seg label.locked span{border-style:dashed} .ccx-app .chips{display:flex; flex-wrap:wrap; gap:5px} .ccx-app .chips label{cursor:pointer; position:relative} .ccx-app .chips input{position:absolute; opacity:0; pointer-events:none} .ccx-app .chips span{ display:block; text-align:center; padding:7px 12px; font-size:calc(var(--ccx-bt-size) * var(--ccx-echelle)); font-weight:var(--ccx-bt-weight); text-transform:var(--ccx-bt-case); letter-spacing:var(--ccx-bt-track); border:var(--ccx-b3-bord-w) var(--ccx-b3-bord-style) var(--ccx-opt-bord); border-radius:var(--ccx-r-xs); background:var(--ccx-b3-bg); color:var(--ccx-b3-ink); transition:.12s; white-space:nowrap; } .ccx-app .chips span:hover{border-color:var(--ccx-b3-bord-hover)} .ccx-app .chips input:checked + span{border-color:var(--ccx-opt-bord-on); background:var(--ccx-b3-bg-on); color:var(--ccx-b3-ink-on); font-weight:var(--ccx-b3-weight-on)} .ccx-app .chips input:disabled + span{opacity:.3} .ccx-app .stepper{display:inline-flex; align-items:center; border:var(--ccx-cadre-champ-w) solid var(--ccx-cadre-champ-c); border-radius:var(--ccx-r-xs); overflow:hidden; background:var(--ccx-paper)} .ccx-app .stepper button{width:30px; height:32px; font-size:calc(var(--ccx-b1-size) * var(--ccx-echelle) * 1.28); color:var(--ccx-ink)} .ccx-app .stepper button:hover{background:var(--ccx-accent-soft)} .ccx-app .stepper output{width:34px; text-align:center; font-family:var(--ccx-font-chiffre); font-size:calc(var(--ccx-ch-size) * var(--ccx-echelle)); font-variant-numeric:tabular-nums; color:var(--ccx-ch-color)} .ccx-app .row{display:grid; grid-template-columns:1fr; gap:10px} .ccx-app .row .field > label{font-weight:600; color:var(--ccx-ink)} .ccx-app .subblock{margin-top:10px; padding:11px 12px} .ccx-app .subblock.hidden{display:none} .ccx-app .forced-note{font-size:calc(var(--ccx-no-size) * var(--ccx-echelle)); color:var(--ccx-warn); background:var(--ccx-warn-soft); padding:5px 8px; border-radius:var(--ccx-r-xs); margin-top:7px; display:none} .ccx-app .forced-note.on{display:block} /* Sous-catégorie tiroir (nested) */ .ccx-app .ccx-sub-block{margin-top:10px; padding-top:10px; border-top:1px dashed var(--ccx-line-strong)} .ccx-app .ccx-sub-block.hidden{display:none} .ccx-app .ccx-sub-block > label{font-size:calc(var(--ccx-no-size) * var(--ccx-echelle)); text-transform:uppercase; letter-spacing:.06em; font-weight:var(--ccx-li-weight); color:var(--ccx-li-color)} .ccx-app #ccx-block-tiroir > label{font-size:calc(var(--ccx-li-size) * var(--ccx-echelle)); font-weight:var(--ccx-li-weight); color:var(--ccx-li-color); display:block; margin-bottom:5px} /* ---------- Section 8 : Joues de finition ---------- */ .ccx-app .ccx-joues-list{display:flex; flex-direction:column; gap:10px} .ccx-app .ccx-joues-empty{margin-top:6px} .ccx-app .ccx-joue{padding:10px 12px; border:1px solid var(--ccx-line); border-radius:var(--ccx-r); background:var(--ccx-paper)} .ccx-app .ccx-joue.is-active{border-color:var(--ccx-line-strong); background:var(--ccx-surface)} .ccx-app .ccx-joue-toggle{display:flex; align-items:center; gap:8px; cursor:pointer; font-size:calc(var(--ccx-b1-size) * var(--ccx-echelle)); font-weight:600; color:var(--ccx-ink)} .ccx-app .ccx-joue-toggle input{accent-color:var(--ccx-ink); margin:0} .ccx-app .ccx-joue-params{margin-top:10px; padding-top:10px; border-top:1px dashed var(--ccx-line-strong); display:flex; flex-direction:column; gap:10px} .ccx-app .ccx-joue-params .field{margin-bottom:0} .ccx-app .ccx-debords{display:grid; grid-template-columns:repeat(4,1fr); gap:6px} .ccx-app .ccx-deb{display:flex; flex-direction:column; gap:3px; align-items:center} .ccx-app .ccx-deb > span{font-size:calc(var(--ccx-mini-size) * var(--ccx-echelle)); color:var(--ccx-ink-soft); font-family:var(--ccx-font-chiffre); font-variant-numeric:tabular-nums} .ccx-app .ccx-deb input[type=number]{padding:6px 6px; text-align:center} .ccx-app .ccx-joue-paused{border-style:dashed; background:var(--ccx-warn-soft); border-color:var(--ccx-warn)} .ccx-app .ccx-joue-pause-msg{font-size:calc(var(--ccx-no-size) * var(--ccx-echelle)); color:var(--ccx-warn)} .ccx-app .ccx-joue-muted{border-style:dashed; opacity:.6} .ccx-app .ccx-joue-muted span{font-size:calc(var(--ccx-no-size) * var(--ccx-echelle)); color:var(--ccx-ink-soft)} /* ---------- Vignettes couleur (échantillon matière) ---------- La vignette porte la photo du décor si l'atelier en a chargé une ; la couleur reste dessous et sert de repli tant que l'image n'est pas arrivée. La loupe est un frère du