/* ============================================================ OuioBill - Design System Extrait et étendu des 3 maquettes "Clarté". Sert de base au futur thème Laravel + Livewire. ============================================================ */ /* ---------- Tokens ---------- */ :root{ --fond:#F5F7FB; --surface:#FFFFFF; --surface2:#FAFBFE; --encre:#16233B; --encre2:#5B6B85; --encre3:#8494AE; /* Valeurs de repli : les Réglages réinjectent ce bloc avec la couleur choisie. Elles doivent rester définies ici pour que la feuille tienne debout seule (pages d'erreur, aperçus hors application). */ --accent:#2E6BFF; --accent-fonce:#1F4FD6; --accent-pale:#E9F0FF; --accent-clair:#7DA2FF; --accent-sombre:#14367F; --accent-bord:#B9CBF5; --accent-rgb:46,107,255; --ok:#129E6E; --ok-pale:#E3F7EE; --alerte:#E8590C; --alerte-pale:#FFF0E6; --rouge:#D6455D; --rouge-pale:#FDEBEE; --violet:#7A3FF2; --violet-pale:#F1EBFF; --navy:#0E1B33; --navy2:#182A4D; --navy3:#22375F; --bord:#E4E9F2; --bord2:#EDF1F7; --r:14px; --r-sm:10px; --r-lg:18px; --ombre:0 4px 16px rgba(var(--accent-rgb),.08); --ombre-fort:0 12px 40px rgba(14,27,51,.14); --side-w:236px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} /* ---------- Icônes SVG ---------- */ .ic-wrap{display:inline-flex;align-items:center;justify-content:center;line-height:0} .oi{display:block;flex:none} .side a.nav .em{width:20px;height:20px;color:currentColor} .side .brand .em{width:22px;height:22px} .act .ic .oi{width:16px;height:16px} .btn .ic-wrap,.mini-btn .ic-wrap{margin:0} body{font-family:'Inter',system-ui,sans-serif;background:var(--fond);color:var(--encre);font-size:13.5px;line-height:1.45;-webkit-font-smoothing:antialiased} h1,h2,h3,h4,.brand,.font-title{font-family:'Bricolage Grotesque','Inter',sans-serif} a{color:inherit} img{max-width:100%} ::selection{background:var(--accent-pale)} /* ---------- Layout applicatif ---------- */ .app{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh} /* ---------- Sidebar ---------- */ .side{background:var(--navy);color:#C4D0E6;padding:20px 14px;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--navy3) transparent} .side::-webkit-scrollbar{width:6px} .side::-webkit-scrollbar-thumb{background:var(--navy3);border-radius:99px} .brand{color:#fff;font-size:20px;font-weight:800;padding:0 10px;letter-spacing:-.5px;display:flex;align-items:center;text-decoration:none;white-space:nowrap} .brand span{color:#5C8CFF} /* Logo de l'entreprise, posé à même la barre navy : plutôt qu'une pastille claire derrière, le logo est aplati en blanc. brightness(0) écrase toutes ses couleurs en noir, invert(1) les remonte en blanc — le tracé est conservé, les couleurs non. Le résultat est identique quel que soit le logo de départ, clair ou sombre. */ .brand .brand-logo{display:inline-flex;align-items:center;max-width:148px} .brand .brand-logo img{display:block;max-height:26px;max-width:100%;object-fit:contain; filter:brightness(0) invert(1)} .brand .adm{margin-left:8px;font-family:'Inter';font-size:9px;font-weight:800;background:var(--accent);padding:3px 7px;border-radius:6px;letter-spacing:.8px;color:#fff} .side .grp{margin-top:20px} .side .grp .t{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#5F7194;padding:0 12px;margin-bottom:6px} .side a.nav{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:9px;color:#AAB9D4;text-decoration:none;font-weight:500;font-size:13px;transition:.15s} .side a.nav .em{width:18px;text-align:center;flex-shrink:0} .side a.nav:hover{background:var(--navy2);color:#fff} .side a.nav.on{background:var(--accent);color:#fff;box-shadow:0 4px 14px rgba(var(--accent-rgb),.35)} .side a.nav .n{margin-left:auto;background:var(--alerte);color:#fff;font-size:10px;font-weight:800;padding:1px 7px;border-radius:99px} .side a.nav .n.bleu{background:#3D5FA8} .side a.nav .n.ok{background:var(--ok)} .side-foot{margin-top:auto;padding-top:16px} .statut-srv{background:var(--navy2);border-radius:12px;padding:13px} .statut-srv .dot{width:8px;height:8px;border-radius:50%;background:#3DDC97;display:inline-block;margin-right:8px;box-shadow:0 0 0 4px rgba(61,220,151,.15);animation:pulse 2s infinite} @keyframes pulse{50%{box-shadow:0 0 0 7px rgba(61,220,151,.04)}} .statut-srv b{color:#fff;font-size:12.5px} .statut-srv p{font-size:11.5px;color:#8FA2C4;margin-top:4px} /* Grand écran : la barre latérale respire, les libellés cessent d'être tassés. Placé après les règles de base pour gagner à la cascade. */ @media(min-width:1500px){ :root{--side-w:272px} .side{padding:24px 16px} .side a.nav{font-size:14px;padding:9px 14px;gap:12px} .side a.nav .em{width:20px} .side .grp .t{font-size:10.5px;padding:0 14px} .side .grp{margin-top:24px} } /* ---------- Main + topbar ---------- */ .main{padding:22px 30px 60px;max-width:1320px;width:100%} .topbar{display:flex;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap} .topbar h1{font-size:23px;font-weight:700;letter-spacing:-.5px} .topbar .sub{color:var(--encre2);font-size:13px;margin-top:2px} .rechg{flex:1;max-width:420px;display:flex;align-items:center;gap:9px;border:1.5px solid var(--bord);border-radius:10px;background:#fff;padding:0 13px;transition:.15s} .rechg:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-pale)} .rechg .rechg-ic{color:var(--encre3);display:flex;flex-shrink:0} .rechg input{flex:1;min-width:0;border:0 none !important;outline:none;box-shadow:none !important;background:transparent;padding:9px 0;font-family:inherit;font-size:13px;color:var(--encre)} /* Résultats de la recherche du haut : posés par-dessus la page, sans la pousser. */ .rechg{position:relative} .rechg-res{position:absolute;top:calc(100% + 7px);left:0;right:0;z-index:60;max-height:60vh;overflow-y:auto; background:var(--surface);border:1px solid var(--bord);border-radius:12px;box-shadow:var(--ombre-fort);padding:6px} .rechg-fam{padding:8px 10px 4px;font-size:10.5px;font-weight:700;text-transform:uppercase; letter-spacing:.6px;color:var(--encre3)} .rechg-l{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;text-decoration:none;color:inherit} .rechg-l:hover,.rechg-l:focus{background:var(--accent-pale);outline:none} .rechg-l-ic{color:var(--encre3);display:flex;flex-shrink:0} .rechg-l-txt{min-width:0} .rechg-l-txt b{display:block;font-size:13px;font-weight:600;color:var(--encre); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rechg-l-txt em{display:block;font-style:normal;font-size:11.5px;color:var(--encre2); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rechg-vide{padding:14px 12px;font-size:12.5px;color:var(--encre2)} /* En-tete de colonne triable. */ th.th-tri{cursor:pointer;user-select:none;white-space:nowrap} th.th-tri:hover{color:var(--accent)} th.th-tri.on{color:var(--accent)} .th-fleche{font-size:11px;margin-left:3px} /* Filtre deroulant dans une barre d'outils de tableau. */ .filtre-select{height:32px;padding:0 26px 0 10px;font-size:12.5px;border-radius:8px; border:1.5px solid var(--bord);background:var(--surface);color:var(--encre);max-width:210px} /* Ligne de tableau qui mène quelque part. */ tr.cliquable{cursor:pointer;transition:background .12s} tr.cliquable:hover{background:var(--accent-pale)} tr.cliquable a{position:relative;z-index:1} .topbar-right{display:flex;align-items:center;gap:12px;margin-left:auto} .icon-btn{width:38px;height:38px;border-radius:10px;border:1.5px solid var(--bord);background:#fff;display:grid;place-items:center;cursor:pointer;font-size:15px;position:relative;color:var(--encre)} .icon-btn:hover{border-color:var(--accent)} .icon-btn .dotn{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--rouge);border:2px solid #fff} .avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-clair));color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex-shrink:0;cursor:pointer} .avatar.sm{width:30px;height:30px;font-size:11px} .avatar.lg{width:52px;height:52px;font-size:17px} /* burger mobile */ .burger{display:none;width:38px;height:38px;border-radius:10px;border:1.5px solid var(--bord);background:#fff;cursor:pointer;font-size:16px} /* ---------- Boutons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--accent);color:#fff;border:none;padding:9px 16px;border-radius:10px;font-weight:600;font-size:13px;cursor:pointer;font-family:inherit;text-decoration:none;transition:.15s;white-space:nowrap} .btn:hover{background:var(--accent-fonce)} .btn.ghost{background:#fff;color:var(--encre);border:1.5px solid var(--bord)} .btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:#fff} .btn.ok{background:var(--ok)}.btn.ok:hover{filter:brightness(.94)} .btn.rouge{background:var(--rouge)}.btn.rouge:hover{filter:brightness(.94)} .btn.alerte{background:var(--alerte)}.btn.alerte:hover{filter:brightness(.94)} .btn.lg{padding:12px 22px;font-size:14px;border-radius:11px} .btn.sm{padding:6px 11px;font-size:12px;border-radius:8px} .btn.block{width:100%} .btn:disabled{opacity:.5;cursor:not-allowed} .mini-btn{border:1px solid var(--bord);background:#fff;border-radius:8px;padding:6px 11px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--encre);text-decoration:none;display:inline-flex;align-items:center;gap:5px;transition:.15s} .mini-btn:hover{border-color:var(--accent);color:var(--accent)} .mini-btn.rouge:hover{border-color:var(--rouge);color:var(--rouge)} /* ---------- Cartes ---------- */ .card{background:var(--surface);border:1px solid var(--bord);border-radius:var(--r);padding:20px} .card.pad0{padding:0} .card .tete{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap} .card .tete.brd{padding:16px 20px;margin:0;border-bottom:1px solid var(--bord)} .card h2{font-size:15px;font-weight:700} .card h3{font-size:14px;font-weight:700} .card .tete a.lien,.lien{color:var(--accent);text-decoration:none;font-weight:600;font-size:12.5px} /* Certains liens sont des boutons : une action Livewire, pas une adresse. Ils doivent en avoir l'air malgré tout. */ button.lien{background:none;border:0;padding:0;font-family:inherit;cursor:pointer} /* Une valeur qui signale un souci sans être une erreur franche. */ .txt-warn{color:var(--alerte)} /* Ordre des extensions : deux flèches serrées, qui ne prennent pas la place d'une colonne de données. */ .rang{display:flex;gap:3px} .rang .mini-btn{padding:3px 6px} .rang .mini-btn:disabled{opacity:.35;cursor:default} .card-pad{padding:20px} .section-titre{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 14px} .section-titre h2{font-size:18px;font-weight:700} .grid{display:grid;gap:14px} .g2,.g3,.g4{display:grid;gap:14px} .g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)} .row-15{display:grid;grid-template-columns:1.5fr 1fr;gap:14px} .row-12{display:grid;grid-template-columns:1.2fr 1fr;gap:14px} /* Vue facture / devis : PDF à gauche, actions à droite */ .pdf-split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:18px;align-items:start} .pdf-frame{background:var(--surface2);border:1px solid var(--bord);border-radius:14px;overflow:hidden;height:calc(100vh - 180px);min-height:520px;position:sticky;top:18px} .pdf-frame iframe{width:100%;height:100%;border:0;display:block} .pdf-side{min-width:0} .kv{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px solid var(--bord);font-size:13px} .kv:last-child{border-bottom:0} .kv>span{color:var(--encre-doux)} .kv>b{text-align:right} .kv a{color:var(--accent);text-decoration:none} .kv.total{border-top:1.5px solid var(--bord);border-bottom:0;margin-top:4px;padding-top:12px} .kv.total>span{font-weight:600;color:var(--encre)} .mb{margin-bottom:20px}.mb-sm{margin-bottom:12px}.mt{margin-top:20px} /* ---------- KPI / stats ---------- */ .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .kpi{background:var(--surface);border:1px solid var(--bord);border-radius:var(--r);padding:16px 18px} .kpi .lbl{color:var(--encre2);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px} .kpi .val{font-family:'Bricolage Grotesque';font-size:26px;font-weight:700;margin-top:5px} .kpi .evo{font-size:12px;margin-top:3px;font-weight:600} .kpi .evo.up{color:var(--ok)}.kpi .evo.down{color:var(--rouge)}.kpi .evo.neutre{color:var(--encre2);font-weight:500} /* ---------- Pills / tags / badges ---------- */ .pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:99px;white-space:nowrap} .pill.ok{background:var(--ok-pale);color:var(--ok)} .pill.ok::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)} .pill.attente{background:var(--alerte-pale);color:var(--alerte)} .pill.fraude,.pill.rouge{background:var(--rouge-pale);color:var(--rouge)} .pill.bleu{background:var(--accent-pale);color:var(--accent)} .pill.violet{background:var(--violet-pale);color:var(--violet)} .pill.gris{background:var(--bord2);color:var(--encre2)} .tag{font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;white-space:nowrap} .tag.due{background:var(--alerte-pale);color:var(--alerte)} .tag.paye{background:var(--ok-pale);color:var(--ok)} .tag.rep{background:var(--accent-pale);color:var(--accent)} .tag.annule{background:var(--rouge-pale);color:var(--rouge)} /* ---------- Tableaux ---------- */ .tbl-wrap{overflow-x:auto;max-width:100%} /* Une colonne de grille ne descend pas sous la largeur de son contenu sans min-width:0. Sans cette ligne, un tableau large ne défilait pas dans son cadre : il élargissait la page entière, et le téléphone se retrouvait à défiler latéralement sur tout l'espace client. */ .main{min-width:0} table{width:100%;border-collapse:collapse} th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--encre2);padding:10px 12px;border-bottom:1.5px solid var(--bord);white-space:nowrap} td{padding:11px 12px;border-bottom:1px solid var(--bord);font-size:13px;vertical-align:middle} tbody tr:last-child td{border-bottom:none} tbody tr:hover td{background:var(--surface2)} td .m,.m{color:var(--encre2);font-size:11.5px;margin-top:1px} th.r,td.r{text-align:right} .tbl-select{width:15px;height:15px;accent-color:var(--accent)} /* ---------- Formulaires ---------- */ label,.label{display:block;font-size:12px;font-weight:700;color:var(--encre);margin-bottom:6px} label .opt{color:var(--encre3);font-weight:500;text-transform:none} .field{margin-bottom:16px} input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=date],select,textarea{ width:100%;border:1.5px solid var(--bord);border-radius:10px;padding:10px 13px;font-family:inherit;font-size:13.5px;background:#fff;outline:none;transition:.15s;color:var(--encre)} input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-pale)} textarea{resize:vertical;min-height:90px} select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235B6B85' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px} .hint{font-size:11.5px;color:var(--encre2);margin-top:6px} .field .err,span.err{display:block;color:var(--rouge);font-size:12px;font-weight:600;margin-top:5px} input.error,select.error,textarea.error{border-color:var(--rouge)} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px} .input-group{display:flex} .input-group input{border-radius:10px 0 0 10px} .input-group .suffix{display:flex;align-items:center;padding:0 13px;border:1.5px solid var(--bord);border-left:none;border-radius:0 10px 10px 0;background:var(--surface2);color:var(--encre2);font-size:13px;font-weight:600;white-space:nowrap} /* toggle */ .switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0} .switch input{display:none} .switch .sl{position:absolute;inset:0;background:var(--bord);border-radius:99px;transition:.2s;cursor:pointer} .switch .sl::before{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)} .switch input:checked + .sl{background:var(--accent)} .switch input:checked + .sl::before{transform:translateX(18px)} .check-row{display:flex;align-items:center;gap:10px;padding:10px 0} /* radio card */ .radio-card{border:1.5px solid var(--bord);border-radius:12px;padding:14px 16px;cursor:pointer;transition:.15s;display:flex;gap:12px;align-items:flex-start} .radio-card:hover{border-color:var(--accent-bord)} .radio-card.on{border-color:var(--accent);background:linear-gradient(180deg,var(--accent-pale),#fff 70%)} .radio-card .rd{width:18px;height:18px;border-radius:50%;border:2px solid var(--bord);flex-shrink:0;margin-top:2px} .radio-card.on .rd{border-color:var(--accent);background:radial-gradient(circle,var(--accent) 45%,#fff 50%)} /* ---------- Onglets ---------- */ .tabs{display:flex;gap:3px;background:var(--surface2);border:1px solid var(--bord);border-radius:12px;padding:4px;margin-bottom:22px;overflow-x:auto} .tabs a{padding:9px 15px;font-weight:600;font-size:13px;color:var(--encre2);text-decoration:none;border-radius:8px;white-space:nowrap;transition:.15s;display:inline-flex;align-items:center;gap:7px} .tabs a:hover{color:var(--encre);background:rgba(14,27,51,.04)} .tabs a.on{color:#fff;background:var(--accent);box-shadow:0 2px 6px rgba(var(--accent-rgb),.25)} .tabs a .muted{color:inherit;opacity:.72;font-weight:600} .tabs a.on .muted{opacity:.85} .pill-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px} .pill-tabs a{padding:7px 14px;border-radius:99px;font-weight:600;font-size:12.5px;color:var(--encre2);text-decoration:none;background:#fff;border:1.5px solid var(--bord)} .pill-tabs a.on{background:var(--accent);color:#fff;border-color:var(--accent)} /* ---------- Bandeau / alerte ---------- */ .bandeau{border-radius:var(--r);padding:14px 18px;display:flex;align-items:center;gap:14px;margin-bottom:22px;font-size:13.5px} .bandeau.warn{background:#FFF4EC;border:1px solid #FFD9BF} .bandeau.warn b{color:var(--alerte)} .bandeau.info{background:var(--accent-pale);border:1px solid #C7D9FF} .bandeau.ok{background:var(--ok-pale);border:1px solid #B7E8D2} .bandeau .btn{margin-left:auto} /* Page publique de signature de devis */ .pub-wrap{min-height:100vh;background:var(--surface2);padding:40px 16px;display:flex;justify-content:center} .pub-card{background:#fff;border:1px solid var(--bord);border-radius:18px;box-shadow:var(--ombre);max-width:720px;width:100%;padding:34px 38px} .pub-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px} .brand-lg{font-family:'Bricolage Grotesque';font-weight:800;font-size:22px;color:var(--navy)} .pub-card h1{font-family:'Bricolage Grotesque';font-size:26px;font-weight:800;margin-bottom:4px} .pub-intro{margin:16px 0;padding:14px 16px;background:var(--surface2);border-radius:10px;font-size:14px} .pub-totaux{max-width:300px;margin-left:auto;margin-top:16px;display:flex;flex-direction:column;gap:6px} .pub-totaux .total{border-top:1.5px solid var(--bord);padding-top:12px;margin-top:4px;align-items:baseline} .pub-notes{margin-top:20px;padding-top:16px;border-top:1px solid var(--bord);font-size:13px;color:var(--encre-doux);white-space:pre-line} .pub-sign{margin-top:26px;padding-top:22px;border-top:2px solid var(--bord)} .pub-sign h2{font-family:'Bricolage Grotesque';font-size:19px;font-weight:700;margin-bottom:6px} .check{display:flex;align-items:flex-start;gap:10px;margin-top:12px;font-size:13.5px;cursor:pointer} .check input{margin-top:2px;width:16px;height:16px;flex:0 0 auto} .btn.block{width:100%;justify-content:center} .pub-foot{margin-top:28px;padding-top:16px;border-top:1px solid var(--bord);text-align:center;font-size:12px;color:var(--encre-doux)} /* ---------- Barre de progression ---------- */ .barre{height:6px;background:var(--bord2);border-radius:99px;overflow:hidden} .barre i{display:block;height:100%;border-radius:99px;background:var(--accent)} .barre i.chaud{background:var(--alerte)} .barre i.ok{background:var(--ok)} /* ---------- Avatar list / activité ---------- */ .act{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--bord);font-size:12.5px} .act:last-child{border-bottom:none} .act .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:13px;flex-shrink:0;background:var(--accent-pale)} .act .quand{margin-left:auto;color:var(--encre2);font-size:11.5px;white-space:nowrap} /* ---------- Etat vide ---------- */ .empty{text-align:center;padding:44px 20px;color:var(--encre2)} .empty .em{font-size:34px;opacity:.6} .empty h3{margin:12px 0 4px;color:var(--encre)} /* ---------- Breadcrumb ---------- */ .bread{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--encre2);margin-bottom:14px;flex-wrap:wrap} .bread a{color:var(--encre2);text-decoration:none}.bread a:hover{color:var(--accent)} .bread .sep{opacity:.5} /* ---------- Modale ---------- */ .modal-bg{position:fixed;inset:0;background:rgba(14,27,51,.5);backdrop-filter:blur(2px);display:grid;place-items:center;z-index:80;padding:20px} .modal{background:#fff;border-radius:var(--r-lg);width:100%;max-width:520px;box-shadow:var(--ombre-fort);overflow:hidden} .modal .m-tete{padding:18px 22px;border-bottom:1px solid var(--bord);display:flex;justify-content:space-between;align-items:center} .modal .m-tete h3{font-size:16px} .modal .m-corps{padding:22px;max-height:72vh;overflow-y:auto} .icon-pick{display:grid;grid-template-columns:repeat(8,1fr);gap:6px} .icon-pick button{border:1.5px solid var(--bord);border-radius:9px;padding:8px;background:#fff;cursor:pointer;color:var(--encre2);display:grid;place-items:center} .icon-pick button:hover{border-color:var(--accent-bord)} .icon-pick button.on{border-color:var(--accent);background:var(--accent-pale);color:var(--accent-fonce)} @media(max-width:520px){.icon-pick{grid-template-columns:repeat(6,1fr)}} /* Lecture d'un courriel envoyé : plus large qu'une boîte de dialogue, et le message rendu dans un cadre isolé — il porte ses propres styles. */ .modal.lg{max-width:760px} .courriel-vu{width:100%;min-height:340px;border:1px solid var(--bord);border-radius:var(--r);background:#fff} .modal .m-pied{padding:16px 22px;border-top:1px solid var(--bord);display:flex;justify-content:flex-end;gap:10px;background:var(--surface2)} .x{cursor:pointer;color:var(--encre2);font-size:20px;line-height:1;background:none;border:none} /* ---------- Dropdown ---------- */ .menu{background:#fff;border:1px solid var(--bord);border-radius:12px;box-shadow:var(--ombre-fort);padding:6px;min-width:200px} .menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;text-decoration:none;color:var(--encre);font-size:13px;font-weight:500} .menu a:hover{background:var(--surface2)} .menu a.danger{color:var(--rouge)} .menu .sep{height:1px;background:var(--bord);margin:6px 0} /* Menus déroulants topbar (notifications + profil) */ [x-cloak]{display:none !important} .drop{position:relative} .icon-btn.on{background:var(--surface2);color:var(--accent)} .drop .menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60} .menu-notif{width:340px;padding:6px} .menu-head{display:flex;align-items:center;gap:8px;padding:8px 10px 6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--encre-doux)} .menu-head .cptn{background:var(--accent);color:#fff;font-size:11px;font-weight:700;border-radius:20px;padding:1px 7px;text-transform:none;letter-spacing:0} .menu-notif a{align-items:flex-start;padding:9px 10px} .menu-notif .n-ic{flex:0 0 auto;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface2);border-radius:8px;color:var(--accent);margin-top:1px} .menu-notif .n-body{display:flex;flex-direction:column;gap:1px;min-width:0} .menu-notif .n-body b{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .menu-notif .n-body em{font-style:normal;font-size:12px;color:var(--encre-doux);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .menu-empty{padding:16px 12px;text-align:center;color:var(--encre-doux);font-size:13px} .menu-user{width:230px} .menu-user-head{padding:6px 12px 4px;display:flex;flex-direction:column;gap:1px} .menu-user-head b{font-size:13px;font-weight:600} .menu-user-head span{font-size:12px;color:var(--encre-doux);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .menu-user form{margin:0} .menu-link{display:flex;width:100%;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;background:none;border:0;cursor:pointer;color:var(--encre);font-size:13px;font-weight:500;text-align:left;font-family:inherit} .menu-link:hover{background:var(--surface2)} .menu-link.danger{color:var(--rouge)} /* Liens de la section Système (Réglages) */ .sys-links{display:flex;flex-direction:column;gap:12px} .sys-link{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--surface);border:1px solid var(--bord);border-radius:14px;text-decoration:none;color:var(--encre);transition:border-color .12s,box-shadow .12s} .sys-link:hover{border-color:var(--accent);box-shadow:var(--ombre)} .sys-link .sys-ic{flex:0 0 auto;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-pale);color:var(--accent);border-radius:11px} .sys-link .sys-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0} .sys-link .sys-body b{font-size:14px} .sys-link .sys-body em{font-style:normal;font-size:12.5px;color:var(--encre-doux)} /* ---------- Utilitaires ---------- */ .flex{display:flex}.between{justify-content:space-between}.center{align-items:center}.wrap{flex-wrap:wrap} .gap6{gap:6px}.gap10{gap:10px}.gap14{gap:14px} .txt-c{text-align:center}.txt-r{text-align:right} .muted{color:var(--encre2)}.small{font-size:11.5px} .b{font-weight:700}.mono{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace} .prix-xl{font-family:'Bricolage Grotesque';font-size:24px;font-weight:800} .hr{height:1px;background:var(--bord);border:none;margin:16px 0} /* ---------- Responsive ---------- */ @media(max-width:1000px){ .app{grid-template-columns:1fr} .side{position:fixed;left:0;top:0;z-index:70;transform:translateX(-100%);transition:transform .25s;box-shadow:var(--ombre-fort)} .side.open{transform:translateX(0)} .burger{display:grid;place-items:center} .kpis,.g4{grid-template-columns:repeat(2,1fr)} .g3,.g2,.row-15,.row-12,.form-grid,.pdf-split{grid-template-columns:1fr} .pdf-frame{position:static;height:80vh;order:2} .main{padding:18px 16px 50px} .side-scrim{position:fixed;inset:0;background:rgba(14,27,51,.4);z-index:69} } @media(max-width:560px){ /* Les indicateurs restent à deux par ligne : empilés, ils occupaient un tiers de la hauteur de l'écran avant le moindre contenu. */ .kpis{grid-template-columns:repeat(2,1fr);gap:10px} .kpi{padding:13px 14px} .kpi .val{font-size:22px} .g4{grid-template-columns:1fr} .topbar h1{font-size:20px} } /* Bandeau d'impersonation (staff connecté en tant que client) */ .imp-bar{display:flex;align-items:center;gap:10px;background:#0E1B33;color:#fff;padding:10px 22px;font-size:13px} .imp-bar b{color:#8FB0FF} .imp-back{background:#fff;color:#0E1B33;border:none;border-radius:8px;padding:6px 13px;font-weight:700;font-size:12.5px;cursor:pointer;font-family:inherit} .imp-back:hover{background:#E9F0FF} /* ============================================================ Espace client — tableau de bord, fiche service, tickets, 2FA ============================================================ */ /* Types d'input supplémentaires (mêmes règles que les autres champs) */ input[type=url],input[type=tel],input[type=datetime-local],input[type=time]{ width:100%;border:1.5px solid var(--bord);border-radius:10px;padding:10px 13px;font-family:inherit; font-size:13.5px;background:#fff;outline:none;transition:.15s;color:var(--encre)} .ovh{overflow:hidden} tr.row-link{cursor:pointer} tr.row-link:hover td{background:var(--surface2)} /* KPI cliquables */ .kpi-link{display:block;text-decoration:none;color:inherit;transition:.15s} .kpi-link:hover{border-color:var(--accent);box-shadow:var(--ombre);transform:translateY(-1px)} .kpi-link .evo .ic-wrap{opacity:.55;margin-left:2px} /* Listes internes aux cartes : lignes simples, pas de carte dans la carte */ .list{display:flex;flex-direction:column} .list-row{display:flex;align-items:center;gap:12px;padding:13px 20px;text-decoration:none;color:inherit; border-bottom:1px solid var(--bord2);transition:background .12s} .list-row:last-child{border-bottom:none} a.list-row:hover{background:var(--surface2)} .list-body{flex:1;min-width:0} .list-body b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .list-body .m{display:block} .list-ic{width:34px;height:34px;border-radius:10px;background:var(--accent-pale);color:var(--accent-fonce); display:grid;place-items:center;flex:0 0 auto} .list-go{color:var(--encre3);flex:0 0 auto} /* Bandeau support / numéro client (dégradé bleu) */ .client-id{background:linear-gradient(135deg,var(--accent),var(--accent-sombre));color:#fff;padding:18px 20px; display:flex;align-items:center;justify-content:space-between;gap:14px} .client-id .lbl{font-family:'Bricolage Grotesque','Inter',sans-serif;font-size:16px;font-weight:800; letter-spacing:-.2px;color:#fff;display:block} .client-id .hint{font-size:12px;color:#C7D9FF;margin:4px 0 9px;display:block;max-width:300px} .client-id .id-pill{display:inline-flex;align-items:center;background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.4);border-radius:99px;padding:6px 15px;font-size:17px;font-weight:800; letter-spacing:1.4px;color:#fff} .client-id-ic{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.16); display:grid;place-items:center;flex:0 0 auto} /* Actualités */ .news-item{display:flex;gap:14px;align-items:flex-start} .news-item h2{font-size:15.5px} .news-body{font-size:13.2px;line-height:1.6;color:var(--encre)} .news-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto; background:var(--accent-pale);color:var(--accent)} .news-ic.violet{background:var(--violet-pale);color:var(--violet)} .news-ic.attente{background:var(--alerte-pale);color:var(--alerte)} .news-ic.rouge{background:var(--rouge-pale);color:var(--rouge)} .news-ic.gris{background:var(--bord2);color:var(--encre2)} .news-mini{display:flex;gap:11px;align-items:flex-start} .news-mini b{font-size:13px;display:block} .news-mini p{margin:0} /* ---------- Ticket : pleine largeur + pièces jointes ---------- */ .ticket-split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);gap:18px;align-items:start} .msg{display:flex;gap:12px;margin-bottom:18px} .msg .bubble{flex:1;min-width:0;background:var(--surface2);border:1px solid var(--bord);border-radius:12px;padding:14px 16px} .msg.staff .bubble{background:var(--accent-pale);border-color:#C7D9FF} .msg .who{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap} .msg .who b{font-size:13px} .msg .who .m{font-size:11.5px} .msg p{font-size:13px;line-height:1.55;word-wrap:break-word} .pj-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .pj{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--bord); border-radius:10px;padding:7px 11px;text-decoration:none;color:var(--encre);transition:.15s;max-width:100%} .pj:hover{border-color:var(--accent);color:var(--accent)} .pj-ic{width:26px;height:26px;border-radius:8px;background:var(--surface2);color:var(--accent); display:grid;place-items:center;flex:0 0 auto} .pj-body{display:flex;flex-direction:column;min-width:0} .pj-body b{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px} .pj-body em{font-style:normal;font-size:11px;color:var(--encre2)} .pj-drop{margin-top:12px} .pj-pick{display:flex;flex-direction:column;align-items:center;gap:3px;border:1.5px dashed var(--bord); border-radius:12px;padding:16px;cursor:pointer;text-align:center;color:var(--encre2);transition:.15s;margin:0} .pj-pick:hover{border-color:var(--accent);background:var(--accent-pale);color:var(--accent-fonce)} .pj-pick span:nth-child(2){font-weight:700;font-size:13px;color:var(--encre)} .pj-pick em{font-style:normal;font-size:11.5px} .pj-queue{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px} .pj-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--bord); border-radius:99px;padding:5px 10px;font-size:12px} .pj-chip button{border:none;background:none;cursor:pointer;color:var(--encre2);font-size:12px;padding:0 2px} .pj-chip button:hover{color:var(--rouge)} .info-grid .l{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0; border-bottom:1px solid var(--bord2);font-size:12.8px} .info-grid .l:last-child{border-bottom:none} .info-grid .l .k{color:var(--encre2)} /* ---------- Fiche service ---------- */ .svc-top{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,1.5fr);gap:18px;align-items:stretch} .svc-hero{border-radius:var(--r);color:#fff;display:flex;flex-direction:column;justify-content:space-between; min-height:230px;overflow:hidden;box-shadow:var(--ombre); /* Dégradé de la couleur d'accent choisie dans les réglages. */ background:linear-gradient(160deg,var(--accent),var(--accent-sombre))} .svc-hero-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:10px;padding:26px 20px;text-align:center} .svc-hero-body h2{font-size:20px;font-weight:800;color:#fff;letter-spacing:-.3px} .svc-hero-ic{opacity:.95} .svc-hero-grp{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.75)} .svc-hero-foot{background:rgba(0,0,0,.18);padding:12px 16px;text-align:center;font-size:12.5px;font-weight:600} /* Options souscrites et disponibles, sur la fiche d'un service. */ .opt-l{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--bord2)} .opt-l:last-of-type{border-bottom:none} .opt-l-txt{flex:1;min-width:0} .opt-l-txt b{display:block;font-size:13.5px;font-weight:700} .opt-l-txt em{display:block;font-style:normal;font-size:11.5px;color:var(--encre2);margin-top:2px} .opt-l-prix{font-size:13.5px;font-weight:800;text-align:right;white-space:nowrap} .opt-l-prix em{display:block;font-style:normal;font-size:11px;font-weight:600;color:var(--encre3)} .opt-l.dispo .opt-l-prix{color:var(--encre2)} .opt-sep{height:1px;background:var(--bord);margin:12px 0} .opt-groupe{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--encre3);margin:12px 0 2px} .mini-btn.primaire{background:var(--accent);border-color:var(--accent);color:#fff} .svc-facts .v .svc-detail{display:block;font-style:normal;font-size:11.5px;font-weight:500;color:var(--encre3);text-align:right} .svc-facts .f{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0; border-bottom:1px solid var(--bord2);font-size:13px} .svc-facts .f:last-child{border-bottom:none} .svc-facts .k{color:var(--encre2)} .svc-facts .v{font-weight:700;text-align:right} .svc-facts .v.due{color:var(--rouge)} .action-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px} .act-btn{border:1px solid var(--bord);border-radius:12px;padding:14px;text-align:center;text-decoration:none; color:var(--encre);font-weight:600;font-size:12.5px;transition:.15s;display:flex;flex-direction:column; align-items:center;gap:8px;background:#fff} .act-btn:hover{border-color:var(--accent);color:var(--accent);box-shadow:var(--ombre)} .act-btn.off{opacity:.55;cursor:not-allowed;background:var(--surface2)} .act-btn.off:hover{border-color:var(--bord);color:var(--encre);box-shadow:none} .act-btn em{font-style:normal;font-size:10.5px;color:var(--encre2);text-transform:uppercase;letter-spacing:.5px} /* Zone sensible (dégradé rouge) */ .danger-zone{background:linear-gradient(150deg,#D6455D,#8E1E33);border-radius:var(--r-lg);padding:22px;color:#fff; box-shadow:0 12px 30px rgba(142,30,51,.22)} .dz-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px} .dz-head h2{font-size:17px;font-weight:800;color:#fff} .dz-head p{font-size:12.8px;color:rgba(255,255,255,.82);margin-top:3px;max-width:640px} .dz-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px} .dz-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:16px} .dz-card b{font-size:13.5px;display:block;margin-bottom:5px} .dz-card p{font-size:12.3px;color:rgba(255,255,255,.82);line-height:1.5;margin-bottom:12px} .dz-card select,.dz-card textarea{background:rgba(255,255,255,.95);border-color:transparent;margin-bottom:10px} .dz-card .err{color:#FFD9DF} .dz-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;background:rgba(255,255,255,.14); color:#fff;border:1.5px solid rgba(255,255,255,.45);border-radius:10px;padding:9px 14px;font-family:inherit; font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s;text-decoration:none} .dz-btn:hover{background:#fff;color:#8E1E33;border-color:#fff} .dz-btn.solid{background:#fff;color:#8E1E33;border-color:#fff} .dz-btn.solid:hover{background:rgba(255,255,255,.86)} .dz-btn.ghost{background:transparent;border-color:rgba(255,255,255,.35)} .dz-btn:disabled{opacity:.45;cursor:not-allowed} /* ---------- Compte : moyens de paiement + 2FA ---------- */ .pm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px} .pm{display:flex;align-items:center;gap:12px;border:1px solid var(--bord);border-radius:12px;padding:14px 16px} .pm .brand{width:44px;height:30px;border-radius:6px;background:var(--navy);color:#fff;display:grid; place-items:center;font-size:10px;font-weight:800} .tfa-setup{border:1px solid var(--bord);border-radius:14px;padding:16px;background:var(--surface2)} .tfa-steps{margin:0 0 16px 18px;font-size:12.8px;line-height:1.7;color:var(--encre2)} .tfa-steps b{color:var(--encre)} .tfa-pair{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start} .tfa-qr{background:#fff;border:1px solid var(--bord);border-radius:12px;padding:10px;line-height:0;flex:0 0 auto} .tfa-qr svg{display:block;width:190px;height:190px} .tfa-on{display:flex;align-items:center;gap:12px;background:var(--ok-pale);border:1px solid #B7E8D2; border-radius:12px;padding:14px 16px;color:var(--ok);flex-wrap:wrap} .tfa-on b{color:var(--encre)} .tfa-on .m{color:var(--encre2)} .codes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px} .codes-grid span{background:#fff;border:1px solid var(--bord);border-radius:8px;padding:7px 10px; text-align:center;font-size:13px;font-weight:700;letter-spacing:1px} .tips{margin:0 0 0 18px;font-size:12.8px;color:var(--encre2);line-height:1.8} /* Lien de commande direct (fiche produit admin) */ .order-link h3{font-size:14px} .order-link-input{max-width:420px;font-size:12.5px} /* ---------- Pages d'erreur ---------- */ .err-page{display:grid;place-items:center;min-height:100vh;padding:24px;background:var(--fond)} .err-card{width:100%;max-width:560px;background:var(--surface);border:1px solid var(--bord); border-radius:var(--r-lg);padding:34px;box-shadow:var(--ombre)} .err-code{font-family:'Bricolage Grotesque';font-size:56px;font-weight:800;line-height:1; background:linear-gradient(135deg,#D6455D,#8E1E33);-webkit-background-clip:text;background-clip:text; color:transparent;margin-bottom:10px} .err-code.calme{background:linear-gradient(135deg,var(--accent),var(--accent-sombre));-webkit-background-clip:text;background-clip:text} .err-card h1{font-size:23px;font-weight:800;letter-spacing:-.4px} .err-lead{color:var(--encre2);margin-top:8px;font-size:14px;line-height:1.6} .err-note{display:flex;align-items:center;gap:10px;background:var(--accent-pale);border:1px solid #C7D9FF; border-radius:12px;padding:12px 14px;margin-top:16px;font-size:12.8px;color:var(--accent-fonce)} .err-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px} .err-report{margin-top:24px;border-top:1px solid var(--bord);padding-top:18px} .err-report summary{cursor:pointer;font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:8px; color:var(--accent);list-style:none} .err-report summary::-webkit-details-marker{display:none} .err-report form{margin-top:14px} .err-ref{margin-top:20px;font-size:12px;color:var(--encre2);text-align:center} @media(max-width:1000px){ .ticket-split,.svc-top{grid-template-columns:1fr} .client-id .id-pill{font-size:15px} } /* ============================================================ Tunnel de commande — assistant une seule page ============================================================ */ .wz-shell{max-width:1240px;margin:0 auto;padding:0 24px} /* Pages publiques : on est sur un site de vente, pas dans un back-office. Le texte y est plus grand que la densité compacte de l'application. */ .pub-body{font-size:14.5px;line-height:1.5} .pub-body .card h2{font-size:17px} .pub-body .card h3{font-size:15.5px} .pub-body .muted.small,.pub-body .small{font-size:13px} .pub-body .btn{font-size:14px;padding:11px 18px} .pub-body .btn.lg{font-size:15.5px;padding:13px 24px} /* Champs de saisie : confortables au doigt, et jamais sous 16px sur mobile, sinon Safari iOS zoome à chaque prise de focus. */ .pub-body label,.pub-body .label{font-size:13px} .pub-body input[type=text],.pub-body input[type=email],.pub-body input[type=password], .pub-body input[type=number],.pub-body input[type=search],.pub-body input[type=date], .pub-body select,.pub-body textarea{font-size:15px;padding:12px 14px} @media(max-width:640px){ .pub-body input[type=text],.pub-body input[type=email],.pub-body input[type=password], .pub-body input[type=number],.pub-body input[type=search],.pub-body input[type=date], .pub-body select,.pub-body textarea{font-size:16px} } /* Bandeau d'en-tête */ .wz-hero{background:linear-gradient(160deg,var(--navy),var(--navy2));color:#fff;padding:44px 0 40px;margin-bottom:26px} .wz-hero h1{font-size:clamp(27px,3vw,38px);font-weight:800;letter-spacing:-.8px;color:#fff;margin:0;line-height:1.12} .wz-hero .sub{color:#B7C6E4;font-size:clamp(14px,1.2vw,16px);margin-top:10px;max-width:62ch} /* Catégorie en lettres creuses, comme sur le tunnel du vitrine. */ .wz-cat{font-family:'Bungee Outline','Bricolage Grotesque',sans-serif;font-size:clamp(1.7rem,4.4vw,2.9rem); line-height:1.1;color:#fff;margin:0 0 10px;letter-spacing:0} /* Fil des étapes */ .wz-stepper{display:flex;align-items:center;margin:0 0 24px} .wz-st{display:flex;align-items:center;gap:10px;flex:0 0 auto} .wz-st .dot{width:32px;height:32px;border-radius:99px;background:#fff;border:2px solid var(--bord);color:var(--encre2); display:grid;place-items:center;font-weight:800;font-size:13px;flex:0 0 auto} .wz-st .cap{font-weight:700;font-size:13px;color:var(--encre2);white-space:nowrap} .wz-st.active .dot{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 14px rgba(var(--accent-rgb),.3)} .wz-st.active .cap{color:var(--encre)} .wz-st.done .dot{background:var(--ok);border-color:var(--ok);color:#fff} .wz-st.done .cap{color:var(--encre)} .wz-line{height:2px;background:var(--bord);flex:1;margin:0 10px} .wz-line.on{background:var(--ok)} @media(max-width:820px){.wz-st .cap{display:none}.wz-line{margin:0 6px}} /* Colonnes : étapes + récapitulatif collant */ .wz-grid{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:28px;align-items:start;padding-bottom:60px} .wz-aside{position:sticky;top:20px} @media(max-width:920px){ .wz-grid{grid-template-columns:1fr} .wz-aside{order:-1;position:static} } /* Cartes de choix (durée, mode de domaine, hébergement). Sur grand écran, deux colonnes : une liste de bandes pleine largeur laisse un vide inutile à droite de chaque libellé. */ .wz-opts{display:grid;gap:12px} @media(min-width:1180px){.wz-opts{grid-template-columns:repeat(2,minmax(0,1fr))}} .wz-opt{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:left; border:2px solid var(--bord);border-radius:12px;padding:15px 17px;background:#fff;cursor:pointer; font-family:inherit;color:var(--encre);transition:border-color .12s,background .12s} .wz-opt:hover{border-color:var(--accent-bord)} .wz-opt.sel{border-color:var(--accent);background:linear-gradient(180deg,var(--accent-pale),#fff 75%)} .wz-opt .lft{display:flex;align-items:center;gap:12px;min-width:0} .wz-opt .rad{width:20px;height:20px;border-radius:99px;border:2px solid var(--bord);flex:0 0 auto;position:relative} .wz-opt.sel .rad{border-color:var(--accent)} .wz-opt.sel .rad::after{content:"";position:absolute;inset:3px;border-radius:99px;background:var(--accent)} .wz-opt .ttl{display:block;font-weight:700;font-size:15px} .wz-opt .sub{display:block;font-size:13px;color:var(--encre2);margin-top:3px} .wz-opt .pr{font-weight:800;font-size:19px;text-align:right;white-space:nowrap} .wz-opt .pr small{display:block;font-size:12px;font-weight:600;color:var(--encre2)} .wz-opt.col{flex-direction:column;align-items:flex-start;gap:4px;min-height:84px} .wz-save{background:var(--ok-pale);color:var(--ok);font-size:11px;font-weight:800;padding:2px 8px;border-radius:99px;margin-left:8px} .wz-seg{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} @media(max-width:600px){.wz-seg{grid-template-columns:1fr}} /* Vérification de domaine */ .wz-dsearch{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap} .wz-dsearch .field{margin:0} .wz-dsearch .f-name{flex:1 1 260px} .wz-dsearch .f-tld{flex:0 0 210px} .wz-dsearch .f-go{flex:0 0 auto;height:46px} @media(max-width:560px){ .wz-dsearch .f-tld{flex:1 1 150px} .wz-dsearch .f-go{flex:1 1 100%;justify-content:center} } .wz-dc{font-weight:700;font-size:14px;margin-top:12px} .wz-dc.ok{color:var(--ok)}.wz-dc.ko{color:var(--rouge)}.wz-dc.wait{color:var(--encre2)} .wz-alts{display:grid;gap:8px;margin-top:12px} .wz-alts-t{font-size:11.5px;font-weight:800;color:var(--encre2);text-transform:uppercase;letter-spacing:.06em} .wz-alt{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left; border:1px solid var(--bord);background:#fff;border-radius:10px;padding:11px 14px;font-family:inherit; font-size:13.5px;font-weight:700;color:var(--encre);cursor:pointer;transition:border-color .12s,box-shadow .12s} .wz-alt:hover{border-color:var(--accent);box-shadow:var(--ombre)} .wz-alt b{color:var(--accent);white-space:nowrap} .wz-dns{background:var(--surface2);border:1px dashed var(--bord);border-radius:10px;padding:12px 14px; font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--encre2);white-space:pre-line} .wz-optgroup{border-top:1px solid var(--bord2);padding-top:16px;margin-top:16px} .wz-optgroup:first-of-type{border-top:none;padding-top:0;margin-top:0} .wz-optgroup h3{margin-bottom:12px} /* Champs personnalisés du produit (étape « Informations ») */ .wz-check{display:flex;align-items:flex-start;gap:11px;margin:0;font-weight:600;font-size:14.5px;cursor:pointer} .wz-check input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--accent)} .wz-check em{display:block;font-style:normal;font-weight:400;font-size:13px;color:var(--encre2);margin-top:3px} /* Barre de navigation */ .wz-nav{display:flex;justify-content:space-between;gap:12px;margin-top:20px} /* Récapitulatif latéral */ .wz-sum{padding:22px} .wz-sum-head{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:0;cursor:pointer; font-family:inherit;color:var(--encre);text-align:left} .wz-sum-head .t{font-family:'Bricolage Grotesque','Inter',sans-serif;font-size:16.5px;font-weight:800} .wz-sum-head .tt{margin-left:auto;font-weight:800;font-size:16px} .wz-sum-head .chev{width:9px;height:9px;border-right:2px solid var(--encre2);border-bottom:2px solid var(--encre2); transform:rotate(45deg);transition:transform .18s;flex:0 0 auto;margin-left:auto} .wz-sum-head .chev.up{transform:rotate(-135deg)} .wz-sum-head .tt + .chev{margin-left:8px} @media(min-width:921px){.wz-sum-head{cursor:default}.wz-sum-head .chev{display:none}} .wz-li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0; border-bottom:1px dashed var(--bord);font-size:14.5px} .wz-li:first-of-type{margin-top:12px} .wz-li .amt{font-weight:700;text-align:right;white-space:nowrap} .wz-li .amt small{display:block;font-size:11px;font-weight:600;color:var(--encre2)} .wz-li.st{border-bottom:1px solid var(--bord)} .wz-li.tot{border-bottom:0;font-size:19px;font-weight:800;padding-top:12px} .wz-promo{margin-top:14px;padding-top:14px;border-top:1px solid var(--bord2)} .wz-promo label{font-weight:700;display:block} /* Confirmation */ .wz-done{max-width:640px;padding-bottom:60px} .wz-done .big-check{width:70px;height:70px;border-radius:50%;background:var(--ok-pale);color:var(--ok); display:grid;place-items:center;margin:0 auto 16px} .wz-recap-l{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--bord2);font-size:13.5px} .wz-recap-l:last-of-type{border-bottom:none} /* ============================================================ Pages publiques (avant connexion) — en-tête et pied ouioweb.com ============================================================ */ /* La nav et le pied de page gardent la charte du vitrine, indépendamment des variables du design system OuioBill chargé après. */ #navbar,.mobile-nav,footer{--primary:#0132b3;--primary-light:#3661d2;--accent:#f2b138;--accent-dark:#e09f1f} .pub-body{background:var(--fond)} /* Barre pleine (pages sans bandeau sombre). Sélecteur id + classe + !important : la feuille du vitrine cible `#navbar` avec un fond transparent, sinon l'en-tête devient invisible sur les pages claires. */ #navbar.pub-nav-solid{background:#fff !important;box-shadow:0 2px 18px rgba(15,23,42,.06)} .pub-body .pub-main{padding-top:110px;padding-bottom:60px} /* Barre translucide au-dessus d'un bandeau sombre : texte blanc jusqu'au défilement. La feuille du vitrine venant d'un autre domaine, ses règles sont illisibles depuis ici : les deux états sont posés explicitement plutôt que supposés. */ .pub-body #navbar:not(.scrolled):not(.pub-nav-solid){background:transparent !important;box-shadow:none !important} .pub-body #navbar.scrolled:not(.pub-nav-solid){ background:rgba(255,255,255,.97) !important; box-shadow:0 4px 30px rgba(11,20,55,.12) !important; backdrop-filter:blur(12px); } #navbar:not(.scrolled):not(.pub-nav-solid) .nav-link, #navbar:not(.scrolled):not(.pub-nav-solid) .logo{color:#fff !important} #navbar:not(.scrolled):not(.pub-nav-solid) .nav-link.cta{color:#fff !important;border-color:rgba(255,255,255,.6) !important} #navbar:not(.scrolled):not(.pub-nav-solid) .hamburger span{background:#fff !important} #navbar:not(.scrolled):not(.pub-nav-solid) .logo img{filter:brightness(0) invert(1) !important} /* Une fois la barre blanche, tout redevient sombre et le logo reprend ses couleurs. Posé explicitement : sans ces règles, un texte resté blanc sur fond blanc deviendrait illisible au défilement. */ .pub-body #navbar.scrolled .logo img{filter:none !important} .pub-body #navbar.scrolled .nav-link, .pub-body #navbar.scrolled .logo, .pub-body #navbar.scrolled .lang-select{color:#0f172a !important} .pub-body #navbar.scrolled .nav-link.cta{color:#0132b3 !important;border-color:rgba(15,23,42,.18) !important} .pub-body #navbar.scrolled .hamburger span{background:#0f172a !important} .pub-body #navbar.scrolled .dropdown-arrow{border-top-color:#0f172a !important} /* Le bandeau du tunnel passe sous la barre fixe. */ .pub-body .wz-hero{padding:126px 0 44px} .pub-body .wz-done{padding-top:8px} /* Repli activé par JS uniquement si la feuille du vitrine n'a pas pu être chargée (sinon ces règles écraseraient sa mise en page, l'en-tête ne serait plus le même). */ .pub-fallback #navbar{position:fixed;top:0;left:0;right:0;z-index:900;background:#fff; box-shadow:0 2px 18px rgba(15,23,42,.06)} .pub-fallback #navbar .nav-container{display:flex;align-items:center;gap:18px;max-width:1240px;margin:0 auto;padding:14px 22px} .pub-fallback #navbar .logo img{height:34px;display:block} .pub-fallback #navbar .nav-menu{display:flex;align-items:center;gap:6px;margin-left:auto;list-style:none} .pub-fallback #navbar .nav-link{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:10px; text-decoration:none;font-weight:700;font-size:14px;color:#0f172a} .pub-fallback #navbar .nav-link.cta{border:1.5px solid rgba(15,23,42,.18)} .pub-fallback #navbar .mega-menu,.pub-fallback .nav-lang{display:none} .pub-fallback .hamburger{display:none} .pub-fallback footer{background:var(--navy);color:#fff;padding:40px 0} .pub-fallback footer .container{max-width:1120px;margin:0 auto;padding:0 20px} .pub-fallback footer a{color:#C4D0E6;text-decoration:none} .pub-fallback footer .footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:24px} .pub-fallback footer .footer-links{list-style:none;display:grid;gap:6px;font-size:13px} .pub-fallback footer h4{color:#fff;font-size:14px;margin-bottom:10px} .pub-fallback footer .footer-desc{color:#AAB9D4;font-size:13px;margin-top:10px} .pub-fallback footer .footer-bottom{margin-top:26px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12); color:#8FA2C4;font-size:12px} @media(max-width:1024px){ .pub-fallback #navbar .nav-menu{display:none} .pub-fallback .hamburger{display:flex;flex-direction:column;justify-content:center;gap:5px;margin-left:auto; width:42px;height:42px;border:0;background:none;cursor:pointer} .pub-fallback .hamburger span{display:block;height:2px;width:22px;background:#0f172a;border-radius:2px} .pub-body .pub-main{padding-top:96px} .pub-body .wz-hero{padding:112px 0 38px} } /* Domaine offert : cases a cocher de la fiche produit */ .fd-grid{display:flex;flex-wrap:wrap;gap:8px} .fd-chip{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--bord);border-radius:99px; padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;background:#fff;margin:0} .fd-chip:hover{border-color:var(--accent-bord)} .fd-chip.on{border-color:var(--accent);background:var(--accent-pale);color:var(--accent-fonce)} .fd-chip input{width:15px;height:15px;accent-color:var(--accent)} .fd-chip em{font-style:normal;font-size:11.5px;color:var(--encre2)} /* ---------- Pagination ---------- */ .pagi{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;width:100%} .pagi-count{font-size:12.5px;color:var(--encre2)} .pagi-links{display:flex;align-items:center;gap:4px;flex-wrap:wrap} .pagi-btn{min-width:32px;height:32px;padding:0 9px;border:1px solid var(--bord);background:#fff;border-radius:8px; font-family:inherit;font-size:12.5px;font-weight:700;color:var(--encre);cursor:pointer;display:inline-flex; align-items:center;justify-content:center;transition:.12s} .pagi-btn:hover{border-color:var(--accent);color:var(--accent)} .pagi-btn.on{background:var(--accent);border-color:var(--accent);color:#fff} .pagi-btn.off{opacity:.4;cursor:default} .pagi-btn.off:hover{border-color:var(--bord);color:var(--encre)} .pagi-gap{padding:0 4px;color:var(--encre3);font-size:12.5px} @media(max-width:560px){.pagi{justify-content:center}.pagi-count{width:100%;text-align:center}} /* --------------------------------------------------------------- Moyens de paiement : cartes cliquables plutôt qu'une liste déroulante. Le radio natif reste dans le DOM (clavier, Livewire), il est simplement masqué au profit de la pastille. --------------------------------------------------------------- */ .pay-choices{display:grid;gap:10px} @media(min-width:760px){.pay-choices{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}} .pay-choice{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer; border:2px solid var(--bord);border-radius:12px;background:#fff; transition:border-color .12s,background .12s,box-shadow .12s} .pay-choice:hover{border-color:var(--accent-bord)} .pay-choice.on{border-color:var(--accent);background:linear-gradient(180deg,var(--accent-pale),#fff 75%)} .pay-choice:focus-within{box-shadow:0 0 0 3px rgba(1,50,179,.14)} .pay-choice input{position:absolute;opacity:0;width:0;height:0} .pay-choice-ic{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;border-radius:10px; background:var(--surface2);color:var(--encre2)} .pay-choice.on .pay-choice-ic{background:var(--accent);color:#fff} .pay-choice-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .pay-choice-txt b{font-size:14.5px;line-height:1.25} .pay-choice-txt .m{color:var(--encre2);font-size:12.5px;line-height:1.35} .pay-choice-dot{width:20px;height:20px;border-radius:99px;border:2px solid var(--bord);flex:0 0 auto;position:relative} .pay-choice.on .pay-choice-dot{border-color:var(--accent)} .pay-choice.on .pay-choice-dot::after{content:'';position:absolute;inset:3px;border-radius:99px;background:var(--accent)} /* --------------------------------------------------------------- Coordonnées : jauge de mot de passe, indicatif téléphonique, sélecteur de pays avec recherche. --------------------------------------------------------------- */ .mdp-jauge{display:flex;align-items:center;gap:9px;margin-top:7px} .mdp-barres{display:flex;gap:4px;flex:1} .mdp-barres span{height:4px;flex:1;border-radius:99px;background:var(--bord);transition:background .15s} .mdp-txt{font-size:12px;font-weight:600;white-space:nowrap} .mdp-jauge[data-note="1"] .mdp-barres span.on,.mdp-jauge[data-note="2"] .mdp-barres span.on{background:var(--alerte)} .mdp-jauge[data-note="1"] .mdp-txt,.mdp-jauge[data-note="2"] .mdp-txt{color:var(--alerte)} .mdp-jauge[data-note="3"] .mdp-barres span.on{background:#E0A21C} .mdp-jauge[data-note="3"] .mdp-txt{color:#B4790A} .mdp-jauge[data-note="4"] .mdp-barres span.on{background:var(--ok)} .mdp-jauge[data-note="4"] .mdp-txt{color:var(--ok)} .field .hint{display:block;margin-top:6px;color:var(--encre2);font-size:12px} /* Indicatif + numéro sur une seule ligne. */ .tel-row{display:flex;gap:8px} .tel-row .tel-code{flex:0 0 clamp(130px,32%,190px);min-width:0} .tel-row input{flex:1;min-width:0} /* Champ de recherche de pays. */ .cbx{position:relative} .cbx-chev{position:absolute;right:14px;top:50%;width:8px;height:8px;pointer-events:none; border-right:2px solid var(--encre2);border-bottom:2px solid var(--encre2); transform:translateY(-70%) rotate(45deg)} .cbx-input{width:100%;padding-right:34px} .cbx-list{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:40;max-height:262px;overflow-y:auto; background:#fff;border:1px solid var(--bord);border-radius:12px;box-shadow:var(--ombre-fort);padding:5px} .cbx-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%; padding:9px 11px;border:0;border-radius:8px;background:none;cursor:pointer;text-align:left; font-family:inherit;font-size:14px;color:var(--encre)} .cbx-item.on{background:var(--accent-pale);color:var(--accent-fonce)} .cbx-ind{color:var(--encre2);font-size:12.5px;font-variant-numeric:tabular-nums} .cbx-item.on .cbx-ind{color:var(--accent-fonce)} .cbx-vide{padding:12px;color:var(--encre2);font-size:13px;text-align:center} /* Actualité repliée : on clique pour lire la suite. Le dégradé de bas de bloc signale la coupe sans l'annoncer par du texte. */ .news-coupe{max-height:7.4em;overflow:hidden;position:relative} .news-replie .news-coupe::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2.6em; background:linear-gradient(to bottom,rgba(255,255,255,0),var(--surface) 88%)} .news-replie:hover{border-color:var(--accent-bord)} .news-plus{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:0;border:0;background:none; cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:var(--accent)} .news-plus:hover{text-decoration:underline} .news-chev{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg);transition:transform .15s} .news-chev.haut{transform:translateY(1px) rotate(-135deg)} /* Filigrane des indicateurs : une icône large, inclinée, à peine visible dans l'angle droit de la carte. Elle ne doit jamais gêner la lecture du chiffre, d'où le très faible contraste et le débord masqué. */ .kpi{position:relative;overflow:hidden} .kpi-ic{position:absolute;right:-14px;top:50%;color:var(--accent);opacity:.09; transform:translateY(-50%) rotate(-14deg);pointer-events:none;transition:opacity .18s,transform .18s} .kpi-link:hover .kpi-ic{opacity:.15;transform:translateY(-50%) rotate(-8deg) scale(1.04)} .kpi .lbl,.kpi .val,.kpi .evo{position:relative} /* Sur téléphone l'icône était masquée : les cartes y perdaient ce qui les distingue d'un coup d'œil. Elle reste, plus petite et plus discrète, pour ne pas passer sous le chiffre. */ @media(max-width:560px){ .kpi-ic{right:-10px;opacity:.10} .kpi-ic svg{width:54px;height:54px} } /* Bandeau d'état de la barre latérale : cliquable, couleur suivant l'état réel. La pastille ne pulse que lorsque tout va bien — une alerte clignotante fatigue plus qu'elle n'informe. */ .statut-srv{display:block;text-decoration:none;transition:background .15s} .statut-srv:hover{background:var(--navy3,#1B2C55)} .statut-srv.degraded .dot{background:#F0B429;box-shadow:0 0 0 4px rgba(240,180,41,.15);animation:none} .statut-srv.down .dot{background:#FF6B7E;box-shadow:0 0 0 4px rgba(255,107,126,.18);animation:none} .statut-srv.unknown .dot{background:#8FA2C4;box-shadow:none;animation:none} .statut-srv.on{background:var(--navy3);box-shadow:inset 2px 0 0 var(--accent)} /* --------------------------------------------------------------- Réglages : choix de la couleur d'accent. L'aperçu utilise la teinte en cours de saisie (--apercu), pas encore enregistrée. --------------------------------------------------------------- */ .coul-choix{display:flex;gap:10px;flex-wrap:wrap} .coul-pastille{width:38px;height:38px;border-radius:11px;border:2px solid transparent;background:var(--pastille); cursor:pointer;display:grid;place-items:center;color:#fff;padding:0; box-shadow:0 2px 8px rgba(14,27,51,.12);transition:transform .12s,box-shadow .12s} .coul-pastille:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(14,27,51,.18)} .coul-pastille span{opacity:0;transition:opacity .12s} .coul-pastille.on{border-color:var(--encre)} .coul-pastille.on span{opacity:1} .coul-saisie{display:flex;gap:8px;align-items:center} .coul-saisie input[type=color]{width:46px;height:42px;padding:2px;border:1px solid var(--bord); border-radius:10px;background:#fff;cursor:pointer;flex:0 0 auto} .coul-saisie input[type=text]{flex:1;min-width:0;text-transform:uppercase} .coul-apercu{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--bord); border-radius:10px;background:var(--surface2);min-height:42px} .coul-apercu .ap-btn{background:var(--apercu);color:#fff;font-size:12.5px;font-weight:600; padding:7px 13px;border-radius:9px} .coul-apercu .ap-pill{background:color-mix(in srgb,var(--apercu) 12%,#fff);color:var(--apercu); font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:99px} .coul-apercu .ap-grad{flex:1;min-width:36px;height:22px;border-radius:7px; background:linear-gradient(135deg,var(--apercu),color-mix(in srgb,var(--apercu) 45%,#0E1B33))} /* Photo de profil dans la pastille du bandeau : elle remplit le rond, le dégradé d'initiales reste dessous pour les comptes sans photo. */ .avatar{overflow:hidden;padding:0} .avatar img{width:100%;height:100%;object-fit:cover;display:block} /* --------------------------------------------------------------- Écrans d'authentification : connexion, code de vérification, mot de passe oublié, création de compte. Mise en page unique, dans la feuille partagée plutôt qu'en