/* ===== Identité visuelle du portail mafacture ===== Vert de marque #00BE65 sur fond clair et calme. Sobre, pro, rassurant. */ @import url("jetons.cca40db587ca.css"); @import url("avis.4c3ad1e15e88.css"); /* 950 : jetons déplacés dans jetons.css (importé ci-dessus). */ /* Onglets / sous-menus (nav-pills) : bleu de marque, via variables */ .nav-pills{ --bs-nav-pills-link-active-bg:var(--blue); --bs-nav-link-color:var(--blue); --bs-nav-link-hover-color:var(--blue-dark); } /* Onglets « contrôle segmenté » (Réglages) : les 4 onglets forment un bloc gris, l'actif est une pastille blanche. Le groupe se lit comme un seul commutateur. */ .settings-seg{ display:inline-flex; gap:2px; flex-wrap:wrap; background:#F0F0EC; border:1px solid var(--line); border-radius:11px; padding:3px; width:max-content; max-width:100%; } .settings-seg .nav-item{ display:flex; } .settings-seg .nav-link{ --bs-nav-pills-link-active-bg:transparent; color:var(--muted); font-weight:500; border-radius:8px; padding:.4rem 1rem; transition:background-color .12s ease, color .12s ease; } .settings-seg .nav-link:hover{ color:var(--ink); } .settings-seg .nav-link.active{ background:#fff; color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(14,27,20,.10); } /* Recherche Acuity en ligne : survol des résultats en vert pâle (fidèle à la maquette). */ #acuityInlineResults .list-group-item{ cursor:default; transition:background-color .12s ease; } #acuityInlineResults .list-group-item:hover{ background:var(--brand-soft); } *{ -webkit-font-smoothing:antialiased; } body{ background:var(--surface); color:var(--ink); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; } h1,h2,h3,h4,.brand-wordmark,.display-face{ font-family:'Plus Jakarta Sans','Inter',sans-serif; letter-spacing:-.015em; } /* Marque */ .brand-wordmark{ font-weight:800; font-size:1.18rem; color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; } .brand-wordmark .dot{ width:.62rem; height:.62rem; border-radius:50%; background:var(--brand); display:inline-block; } /* Logo agrandi de 25% dans le header de l'accueil uniquement */ .lp-nav .brand-wordmark{ font-size:1.475rem; } .lp-nav .brand-wordmark .dot{ width:.775rem; height:.775rem; } .text-brand{ color:var(--brand-dark)!important; } /* 846 : texte vert sur blanc → vert foncé (4,5:1). */ /* 830 — Accueil : texte vert lisible (WCAG AA). #00BE65 (2,46:1 sur blanc) reste pour les boutons et les accents non textuels. Le !important est nécessaire ici : la règle .text-brand ci-dessus en porte un, qu'aucune spécificité seule ne peut battre. - Texte des diapositives du carrousel (cartes blanches) → --brand-dark (5,09:1). - Mot en vert du titre H1 (grand texte, ≥ 32 px) → --brand-titre (3,66:1, seuil 3:1). */ .hero-card .text-brand{ color:var(--brand-dark)!important; } .lp-hero h1 .text-brand{ color:var(--brand-titre)!important; } /* Boutons */ .btn-primary{ --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand); --bs-btn-color:var(--sur-vert); --bs-btn-disabled-color:var(--sur-vert); --bs-btn-hover-bg:var(--brand-dark); --bs-btn-hover-border-color:var(--brand-dark); --bs-btn-hover-color:#fff; --bs-btn-active-bg:var(--brand-dark); --bs-btn-active-border-color:var(--brand-dark); --bs-btn-active-color:#fff; --bs-btn-disabled-bg:var(--brand); --bs-btn-disabled-border-color:var(--brand); font-weight:600; } /* Bouton secondaire : blanc bordé au repos ; survol et appui GRIS PÂLE (941, règle d'Annie : plus jamais de noir, ni au survol). Une seule définition, la même sur toutes les pages. */ .btn-outline-secondary{ --bs-btn-color:var(--ink); --bs-btn-bg:#fff; --bs-btn-border-color:var(--line); /* 946 : texte --ink */ --bs-btn-hover-color:var(--ink); --bs-btn-hover-bg:var(--surface); --bs-btn-hover-border-color:var(--line-strong); --bs-btn-active-color:var(--ink); --bs-btn-active-bg:var(--line); --bs-btn-active-border-color:var(--line-strong); } /* ── Journal du suivi d'envoi (fiche de facture) ── Un journal se lit à la verticale : une colonne d'heures alignées, puis ce qui s'est passé. Rien en gras — un journal n'a pas de titres, il a des entrées. */ .suivi{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:auto 1fr; gap:.6rem .75rem; max-height:17rem; overflow-y:auto; } .suivi::-webkit-scrollbar{ width:8px; } .suivi::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; } .suivi li{ display:contents; } .suivi-h{ color:var(--muted); font-size:.8125rem; font-variant-numeric:tabular-nums; white-space:nowrap; padding-top:.05rem; } .suivi-e{ font-size:.875rem; color:var(--ink); min-width:0; } .suivi-e.echec{ color:#C0392B; } /* Ligne secondaire : adresse, raison d'un rebond, compteur d'ouvertures. */ .suivi-sec{ display:block; font-size:.78125rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* 898 : lien sous la ligne du dernier refus ; note grise sous « Signalée comme pourriel ». */ .suivi-lien{ display:inline-block; margin-top:.15rem; font-size:.78125rem; font-weight:500; color:var(--brand-dark); text-decoration:none; } .suivi-lien:focus-visible{ text-decoration:underline; } @media (hover:hover){ .suivi-lien:hover{text-decoration:underline; } } /* 961 : soulignement au survol, souris seulement */ .suivi-note{ white-space:normal; } .suivi-sous-titre{ font-size:.8125rem; color:var(--muted); margin-top:.05rem; } .suivi-jour{ font-size:.78125rem; color:var(--muted); margin-top:.9rem; padding-top:.55rem; border-top:1px solid var(--line); } /* ── Pastilles de filtre (choix unique) ── Périodes des Rapports, statut des Clients. Un « btn-group » disait « barre d'outils » alors qu'il s'agit d'un filtre : une seule pastille est pleine. */ .pastilles{ display:flex; flex-wrap:wrap; gap:.5rem; } .pastille{ display:inline-flex; align-items:center; justify-content:center; padding:.375rem 1rem; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--muted); font-size:.875rem; font-weight:500; text-decoration:none; line-height:1.4; transition:background-color .12s, color .12s, border-color .12s; } .pastille:hover{ border-color:var(--brand); color:var(--brand-dark); } /* 846 */ .pastille[aria-current="true"]{ background:var(--brand); border-color:var(--brand); color:var(--sur-vert); font-weight:600; } .pastille[aria-current="true"]:hover{ background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; } /* 941 : .btn-noir retiré (règle d'Annie : aucun bouton noir). Les boutons qui l'utilisaient sont des boutons secondaires blancs bordés (.btn-outline-secondary) ; garde-fou test_936. */ .btn-blue{ --bs-btn-color:#fff; --bs-btn-bg:var(--blue); --bs-btn-border-color:var(--blue); --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--blue-dark); --bs-btn-hover-border-color:var(--blue-dark); --bs-btn-active-color:#fff; --bs-btn-active-bg:var(--blue-active); --bs-btn-active-border-color:var(--blue-active); --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:var(--blue); --bs-btn-disabled-border-color:var(--blue); font-weight:600; } /* Ligne délai sous le CTA de la carte noire. */ .cta-ink-delai{ color:rgba(255,255,255,.75); font-size:.85rem; margin:.25rem 0 0; } /* Boutons d'action compacts et uniformes (listes) — hauteur fixe, sans icône, typo Inter */ .btn-chip{ display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 1rem; border-radius:10px; font-family:'Inter',sans-serif; font-weight:600; font-size:.82rem; line-height:1; white-space:nowrap; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:background .15s, color .15s, border-color .15s; } .btn-chip:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; } .btn-chip-neutral{ background:#fff; color:var(--ink); border-color:var(--line); } .btn-chip-neutral:hover{ background:var(--surface); color:var(--ink); } .btn-chip-warn{ background:#FFF6E6; color:#9A6B00; border-color:#F1E2BD; } .btn-chip-warn:hover{ background:#FBEED0; color:#9A6B00; } .btn-chip-go{ background:var(--brand-soft); color:var(--brand-dark); border-color:#C8EED9; } .btn-chip-go:hover{ background:#D5F3E3; color:var(--brand-dark); } .btn-chip-danger{ background:#FCEAEA; color:#C0392B; border-color:#F3D2D0; } .btn-chip-danger:hover{ background:#F8DBD9; color:#C0392B; } /* Barre de navigation de l'app */ .app-nav{ background:#fff; border-bottom:1px solid var(--line); padding-block:.5rem; } .app-nav .nav-link{ color:var(--muted); font-weight:500; border-radius:8px; padding:.4rem .7rem; } .app-nav .nav-link:hover{ color:var(--ink); background:var(--surface); } .app-nav .nav-link.active{ color:var(--brand-dark); background:var(--brand-soft); } /* Cartes */ .card{ border:1px solid var(--line); border-radius:16px; box-shadow:0 1px 2px rgba(14,27,20,.03); } .card-soft{ background:#fff; } /* Cartes indicateurs (KPI) */ .kpi{ position:relative; } .kpi .kpi-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; } .kpi .kpi-value{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.9rem; line-height:1.1; letter-spacing:-.02em; } /* Cartes teintées douces — une teinte par indicateur (option 3) */ .kpi.kpi-green { background:var(--brand-soft); } .kpi.kpi-green .kpi-label, .kpi.kpi-green .kpi-value { color:var(--brand-dark); } .kpi.kpi-blue { background:#E7EEFD; } .kpi.kpi-blue .kpi-label, .kpi.kpi-blue .kpi-value { color:var(--blue-dark); } .kpi.kpi-amber { background:var(--attention-soft); } /* 946 : variables */ .kpi.kpi-amber .kpi-label, .kpi.kpi-amber .kpi-value { color:var(--attention); } /* Neutre (gris) : pour un chiffre « d'information », PAS une alerte (ex. Taxes payées). L'ambre est réservé aux alertes (« Sans reçu », « En attente »). */ .kpi.kpi-neutral { background:#F1F3F5; } .kpi.kpi-neutral .kpi-label, .kpi.kpi-neutral .kpi-value { color:#566; } /* Rouge RÉSERVÉ au « en retard » (cohérent avec la pastille badge-retard). L'ambre reste pour « à surveiller » (en attente, taxes…). */ .kpi.kpi-danger { background:#FDECEC; } .kpi.kpi-danger .kpi-label, .kpi.kpi-danger .kpi-value { color:#B42318; } .kpi.kpi-violet { background:#F1EBFD; } .kpi.kpi-violet .kpi-label, .kpi.kpi-violet .kpi-value { color:#6D28D9; } .kpi .kpi-value .muted{ color:inherit!important; opacity:.65; } /* Badges de statut */ .badge-status{ font-weight:600; padding:.34em .7em; border-radius:999px; font-size:.74rem; white-space:nowrap; } .badge-draft{ background:var(--statut-draft-fond); color:var(--statut-draft-texte); } .pastille-sans-taxes{ background:var(--surface); color:var(--muted); } /* 964 : catégorie « Sans taxes par défaut » */ .badge-sent{ background:var(--statut-sent-fond); color:var(--statut-sent-texte); } .badge-paid{ background:var(--statut-paid-fond); color:var(--statut-paid-texte); } .badge-void{ background:var(--statut-void-fond); color:var(--statut-void-texte); } .badge-refunded{ background:var(--statut-refunded-fond); color:var(--statut-refunded-texte); } /* Livraison échouée : la facture n'a jamais atteint le client. Rouge, parce que c'est le seul état de cette liste qui exige une action immédiate. */ .badge-nondelivre{ background:var(--statut-nondelivre-fond); color:var(--statut-nondelivre-texte); display:inline-flex; align-items:center; gap:4px; } /* Facture en retard (échue et impayée). 950 (décision d'Annie) : fond pâle comme toutes les pastilles (plus de rouge plein) ; « Annulée » passe au gris pour ne pas s'y confondre. */ .badge-retard{ background:var(--statut-retard-fond); color:var(--statut-retard-texte); } /* 950 : pâle comme les autres (6,1:1) */ /* « Sans reçu » : ambre d'ALERTE (à régler avant la fin de l'année fiscale). Exception seulement — une dépense AVEC reçu est la normale et n'affiche rien. */ .badge-sansrecu{ background:var(--statut-sansrecu-fond); color:var(--statut-sansrecu-texte); } /* 864 : « Province à vérifier » (liste des clients) : mêmes couleurs, 5,9:1. */ /* Cases de sélection d'un tableau. Bootstrap dimensionne .form-check-input en « em » : la case hérite donc de la taille du texte de sa cellule. Comme l'entête est à .74rem et les lignes à 1rem, la case du « tout sélectionner » apparaissait 26 % plus petite que les autres. On fige la taille en rem pour qu'elles soient identiques, où qu'elles soient. */ .bulk-check{ width:1rem; height:1rem; margin-top:0; vertical-align:middle; } /* Barre segmentée : cinq segments font environ 520 px et ne tiennent pas sur un téléphone. Plutôt que de les replier sur deux rangées — ce qui casse l'effet de groupe — la barre défile au doigt sur une seule ligne. La barre de défilement est masquée : c'est le débordement visible du dernier segment qui annonce la suite, comme dans les applications mobiles natives. */ .segments-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; } .segments-scroll::-webkit-scrollbar{ display:none; } .segments-scroll .btn-group{ flex-wrap:nowrap; } /* Rangées d'onglets qui débordent (périodes, réglages) : dégradé à droite pour annoncer qu'il reste du contenu — mais SEULEMENT quand ça déborde vraiment (classe .is-scrollable posée par le JS). Sinon un dégradé fade le dernier onglet pour rien. L'onglet actif est amené dans le champ au chargement (JS). */ .segments-scroll.is-scrollable, .settings-seg.is-scrollable{ -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 44px), transparent); } /* 941 (règle d'Annie : RIEN ne glisse de côté au téléphone). Sous 576 px, les filtres des listes (#segmentsBar) passent en GRILLE dans un seul cadre : 2 colonnes à partir de 4 choix (2 × 2, un 5e choix prend toute la rangée) ; 3 choix ou moins sur une rangée, SAUF si un libellé ne tient pas sur une ligne : le JS de base.html pose alors .segments--2col (2 + 1). La Période (_periode.html) devient une liste déroulante au téléphone. */ @media (max-width: 575.98px){ #segmentsBar.segments-scroll{ overflow:visible; padding-bottom:0; -webkit-mask-image:none; mask-image:none; flex:1 1 100%; width:100%; } #segmentsBar .btn-group{ display:grid; width:100%; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; } #segmentsBar .btn-group:not(:has(> :nth-child(4))){ grid-template-columns:repeat(3, minmax(0,1fr)); } #segmentsBar .btn-group:not(:has(> :nth-child(3))){ grid-template-columns:repeat(2, minmax(0,1fr)); } #segmentsBar .btn-group.segments--2col{ grid-template-columns:repeat(2, minmax(0,1fr)); } #segmentsBar .btn-group > .btn{ border:0; border-radius:0; margin:0; display:flex; align-items:center; justify-content:center; text-align:center; background:#fff; } #segmentsBar .btn-group > .btn-primary{ background:var(--brand-soft); color:var(--brand-dark); } #segmentsBar .btn-group > .btn:last-child:nth-child(odd):not(:nth-child(1)){ grid-column:1 / -1; } #segmentsBar .btn-group:not(:has(> :nth-child(4))):not(.segments--2col) > .btn:last-child{ grid-column:auto; } #segmentsBar .btn-group.segments--2col > .btn{ white-space:normal; } .periode-segments{ display:none; } } @media (min-width: 576px){ .periode-liste{ display:none; } } /* Période « Personnalisé » au téléphone : Du et Au côte à côte (moitié chacun), boutons dessous. */ @media (max-width: 575.98px){ .periode-dates > div{ flex:1 1 calc(50% - .5rem); min-width:0; } .periode-dates > div .form-control{ width:100%; min-width:0; } } /* Chaque libellé sur UNE ligne (Bootstrap 5 laisse le texte casser par défaut) : sinon « À encaisser (7) » se replie en 3 lignes et désaligne la barre. Le débordement est absorbé par le défilement horizontal ci-dessus. */ .segments-scroll .btn{ white-space:nowrap; } /* Segment ACTIF = filtre sélectionné, pas un bouton d'action : vert PÂLE + texte vert foncé, pour ne pas imiter le bouton vert plein « Nouvelle facture ». Scopé aux segments : btn-primary garde son vert plein ailleurs dans l'app. */ .segments-scroll .btn-group > .btn-primary, .segments-scroll .btn-group > .btn-primary:focus, .segments-scroll .btn-group > .btn-primary:hover{ background:var(--brand-soft); border-color:#CDEBD9; color:var(--brand-dark); box-shadow:none; /* 941 */ } /* 941 : survol d'un segment non choisi = gris pâle (Bootstrap le remplissait de gris foncé). */ .segments-scroll .btn-group > .btn-outline-secondary:hover{ background:var(--surface); border-color:var(--bs-border-color); color:var(--ink); } .badge-part-refunded{ background:var(--statut-part-refunded-fond); color:var(--statut-part-refunded-texte); } /* 834 : lien texte dans la couleur des liens de l'app (--brand-dark, #037F45), pour les boutons .btn-link (Bootstrap les met sinon dans --bs-link-color, bleu). */ .btn-link.lien-app{ --bs-btn-color:var(--brand-dark); --bs-btn-hover-color:var(--brand-dark); --bs-btn-active-color:var(--brand-dark); } /* 838 : montant mis en valeur en vert LISIBLE (--brand-dark, 5,09:1 sur blanc) au lieu de .text-brand (#00BE65, 2,46:1). Ex. « Nette à remettre » de la page Rapports. */ .montant-vert{ color:var(--brand-dark); } /* Tableaux */ .table thead th{ font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; border-bottom:1px solid var(--line); } /* En-têtes de colonne TRIABLES : lien à pleine intensité #5F6B64 (5,56:1 sur blanc). L'ancien opacity-75 rabaissait var(--muted) à ~#849089 (sous le seuil 4,5:1). */ thead th a.th-tri{ color:#5F6B64; } thead th a.th-tri .th-fleche{ opacity:1; } .table td{ vertical-align:middle; } /* Pages d'authentification (accueil, connexion, choix d'entreprise) */ .auth-wrap{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem 1rem; background: radial-gradient(60rem 40rem at 50% -10%, var(--brand-soft), transparent 60%), var(--surface); } .auth-card{ width:100%; max-width:420px; background:#fff; border:1px solid var(--line); border-radius:20px; padding:2.2rem; box-shadow:0 10px 40px rgba(14,27,20,.06); } .auth-card .form-label{ font-weight:600; font-size:.85rem; } /* Mobile : moins de padding sur la carte de connexion pour laisser ≥300px au widget Cloudflare Turnstile (largeur minimale ~300px, sinon il déborde). + filet anti-débordement. */ @media (max-width:575.98px){ /* Donner assez de largeur au widget Turnstile (plancher ~300px) pour qu'il remplisse le conteneur = même largeur que les champs. Padding réduit (page + carte). */ .auth-wrap{ padding:1.5rem 0.5rem; } .auth-card{ padding:1.25rem 0.9rem; } } /* Turnstile en mode « flexible » : remplit 100% du conteneur = largeur des champs (tous viewports). */ .cf-turnstile{ width:100%; } .muted{ color:var(--muted); } /* Sélecteur d'entreprise */ .company-pill{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--line); background:#fff; border-radius:999px; padding:.3rem .8rem; font-weight:600; color:var(--ink); } .company-pill img{ height:20px; width:auto; border-radius:4px; } /* ===== Barre latérale verticale (bleu --blue, items mafacture) ===== */ :root{ --sidebar:#1748c0; --sidebar-line:rgba(255,255,255,.16); --bs-offcanvas-width:250px; } .layout{ display:flex; min-height:100vh; align-items:stretch; } .sidebar{ width:250px; background:var(--sidebar) !important; color:rgba(255,255,255,.88); } .sidebar.offcanvas-lg{ border:0; } @media (min-width:992px){ .sidebar{ position:sticky; top:0; height:100vh; flex:0 0 250px; } .sidebar .offcanvas-body{ height:100vh; } } .sidebar .offcanvas-body{ display:flex; flex-direction:column; padding:0; } /* Entreprise + rôle : même typo que le menu mais nettement plus petit */ .side-top{ padding:1rem .8rem .5rem; } .co-switch{ width:100%; text-align:left; background:rgba(255,255,255,.08); border:1px solid var(--sidebar-line); border-radius:12px; color:#fff; padding:.5rem .7rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem; } .co-switch:hover{ background:rgba(255,255,255,.14); } .co-switch .co-block{ display:flex; flex-direction:column; min-width:0; } .co-switch .co-name{ font-weight:700; font-size:.8rem; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .co-switch .role{ font-size:.68rem; color:rgba(255,255,255,.85); } .side-nav{ padding:.5rem; flex:1 1 auto; overflow-y:auto; } .side-nav a{ display:flex; align-items:center; gap:.7rem; padding:.6rem .8rem; border-radius:10px; color:rgba(255,255,255,.86); text-decoration:none; font-weight:500; font-size:.95rem; margin-bottom:2px; } .side-nav a:hover{ background:rgba(255,255,255,.10); color:#fff; } .side-nav a.active{ background:var(--blue-active); color:#fff; } .side-nav a i{ font-size:1.05rem; opacity:.95; width:1.25rem; text-align:center; } /* Sous-section « Administration » : petite et secondaire */ .side-section-label{ font-size:.66rem; text-transform:uppercase; letter-spacing:.09em; color:rgba(255,255,255,.72); font-weight:700; padding:.9rem .8rem .25rem; margin-top:.4rem; border-top:1px solid var(--sidebar-line); } .side-nav a.side-sm{ font-size:.82rem; color:rgba(255,255,255,.72); padding:.45rem .8rem; } .side-nav a.side-sm i{ font-size:.92rem; } .side-foot{ padding:.7rem .8rem; border-top:1px solid var(--sidebar-line); } .user-pill{ width:100%; text-align:left; display:flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.08); border:1px solid var(--sidebar-line); border-radius:10px; color:rgba(255,255,255,.92); padding:.45rem .7rem; font-size:.82rem; } .user-pill:hover{ background:rgba(255,255,255,.14); } .content{ flex:1 1 auto; min-width:0; background:var(--surface); } .content-inner{ padding:1.6rem clamp(1rem,3vw,2.2rem); } /* Conteneur centré à deux largeurs : l'en-tête ET le contenu partagent la même largeur, donc tout reste aligné (le « ⋯ » ne file plus au bord de l'écran). .page-narrow = formulaires/détails; .page-wide = listes/tableaux/tableau de bord. */ .page-container{ width:100%; margin-inline:auto; } .page-container.page-narrow{ max-width:820px; } .page-container.page-wide{ max-width:1140px; } .mobile-bar{ background:var(--sidebar); color:#fff; padding:.55rem .8rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem; position:sticky; top:0; z-index:1030; } /* Bouton « Envoyer par courriel » (bleu, distinct du vert « Payée ») */ .btn-send{ background:var(--blue); border-color:var(--blue); color:#fff; font-weight:600; } .btn-send:hover,.btn-send:focus{ background:var(--blue-dark); border-color:var(--blue-dark); color:#fff; } /* Bouton « Encaissement manuel » (contour bleu discret, style secondaire) */ .btn-counter{ background:#fff; border:1px solid var(--blue); color:var(--blue); font-weight:600; } .btn-counter:hover,.btn-counter:focus{ background:var(--blue); border-color:var(--blue); color:#fff; } /* Bouton « Repasser en brouillon » (noir encre, au lieu du gris) */ .btn-ink{ background:#12181F; border-color:#12181F; color:#fff; font-weight:600; } .btn-ink:hover,.btn-ink:focus{ background:#000; border-color:#000; color:#fff; } /* Contrôle segmenté du statut de facture (lot 144) : un clic sur un segment bascule le statut (avec confirmation) ; segment actif en noir encre ; segment désactivé quand la transition est interdite (ex. facture payée par Stripe). */ .seg-status{ display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:#fff; } .seg-status form{ flex:1 1 0; display:flex; margin:0; min-width:0; } .seg-status .seg{ flex:1 1 0; min-width:0; border:0; background:transparent; color:var(--muted); font-size:.85rem; font-weight:600; padding:.45rem .2rem; cursor:pointer; } .seg-status > * + *{ border-left:1px solid var(--line); } /* Segment actif : vert de marque. Le noir venait du même accident que « Rech. Acuity ». */ .seg-status .seg.active{ background:var(--brand-soft); color:var(--brand-dark); cursor:default; } /* 941 : comme .choix-seg */ .seg-status .seg:disabled{ color:#C9C6BC; cursor:not-allowed; background:#FAFAF7; } .seg-status .seg:not(.active):not(:disabled):hover{ background:var(--surface); color:#12181F; } /* ===== Page d'accueil (marketing sobre, sur invitation) ===== */ /* L'accueil remplit toujours la hauteur de l'écran, et s'adapte au redimensionnement */ .lp-body{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; background:#fff; } .lp-body .lp-hero{ flex:1 0 auto; display:flex; flex-direction:column; justify-content:center; } .lp-nav{ background:#fff; border-bottom:1px solid var(--line); } .lp-hero{ background: url('https://cdn.mafacture.ca/images/hero.jpg') center center/cover no-repeat, #fff; } /* iPad en PAYSAGE : image dédiée. Plage étendue à 1200 px pour couvrir aussi l'iPad Pro 10,5" (1112 px), sans toucher au 12,9" (1366 px) qui est bien en image desktop. */ @media (min-width:768px) and (max-width:1200px) and (orientation:landscape){ .lp-hero{ background: url('https://cdn.mafacture.ca/images/hero-ipad.jpg') 40% center/cover no-repeat, #fff; } } /* Mobile ET iPad en portrait : image portrait dédiée (mieux cadrée verticalement). */ @media (max-width:767px), (min-width:768px) and (max-width:1024px) and (orientation:portrait){ .lp-hero{ background: url('https://cdn.mafacture.ca/images/hero-mobile.jpg') center/cover no-repeat, #fff; } } .lp-hero h1{ font-size:clamp(2rem,4vw,3rem); line-height:1.08; } /* Panneau translucide (verre clair) derrière le texte du hero, pour la lisibilité par-dessus la photo de fond. Variante A : blanc 72 %, léger flou, ombre douce. */ .lp-hero .hero-text{ background:rgba(255,255,255,.52); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); border:1px solid rgba(255,255,255,.6); border-radius:16px; padding:2rem 2rem 2.25rem; box-shadow:0 12px 34px rgba(10,37,64,.12); } @media (max-width:991px){ .lp-hero .hero-text{ padding:1.5rem 1.25rem; } } /* Texte du hero (paragraphe + prix) en noir sur le panneau, pour la lisibilité. */ .lp-hero .hero-text .muted{ color:var(--ink); } /* Panneau plus compact sur grand écran (~36 %) et cartes de droite alignées en bas (révèle le visage sur la photo). Desktop seulement : rien ne change sur mobile. */ @media (min-width:992px){ .lp-hero .hero-text{ max-width:518px; } .lp-hero .col-lg-6:has(.hero-stage){ align-self:flex-end; } } .lp-eyebrow{ font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-dark); } .lp-feature{ background:var(--feature-bg); border:0; border-radius:16px; height:100%; display:flex; flex-direction:column; padding:1.5rem 1.5rem calc(1.5rem + 50px); } .lp-feature h2{ color:#fff; font-size:1.08rem; } .lp-feature .muted{ color:#fff; font-size:.92rem; line-height:1.45; } .lp-feature .ico{ width:auto; height:auto; border-radius:0; display:block; background:none; color:#fff; font-size:1.8rem; line-height:1; } /* ===== Visuels défilants de l'accueil ===== */ /* 837 — La CARTE est la scène elle-même : blanche, opaque et fixe pendant les transitions. Seul le contenu des diapositives (.hero-slide) fait un fondu ; la hauteur suit en douceur celle de la diapositive active (fixée en JS), sans saut. 300 px = repli sans JavaScript. Mouvement réduit : aucune transition de hauteur. */ .hero-stage{ position:relative; max-width:430px; margin-inline:auto; height:300px; background:#fff; border:1px solid var(--line); border-radius:18px; box-sizing:border-box; box-shadow:0 18px 50px rgba(14,27,20,.10); overflow:hidden; transition:height .35s ease; } @media (prefers-reduced-motion:reduce){ .hero-stage{ transition:none; } } .hero-slide{ position:absolute; inset:0; opacity:0; } .hero-slide.is-active{ opacity:1; } /* 837 : .hero-card n'est plus qu'une couche de CONTENU, sans fond ni bordure ni ombre (c'est .hero-stage qui porte la carte) ; sa hauteur suit son contenu. */ .hero-card{ background:transparent; box-sizing:border-box; padding:1.5rem; display:flex; flex-direction:column; justify-content:center; } .hero-card .row-line{ display:flex; justify-content:space-between; padding:.28rem 0; } .hero-dots{ display:flex; gap:.4rem; justify-content:center; margin-top:1.1rem; } .hero-dots button{ width:8px; height:8px; border-radius:50%; border:0; background:#CBD6CE; padding:0; cursor:pointer; transition:width .25s, background .25s; } .hero-dots button.is-active{ background:var(--brand); width:22px; border-radius:999px; } /* 837 — Points du carrousel de l'ACCUEIL, lisibles sur toute la photo : pastille blanche opaque derrière les points ; inactif #7A8A80 (3,64:1), actif --brand-dark (5,09:1), seuil 3:1 des éléments graphiques. Le carrousel des fonctionnalités n'est pas touché. */ .lp-hero .hero-dots{ width:fit-content; margin:1.1rem auto 0; padding:6px 10px; background:#fff; border-radius:999px; box-shadow:0 2px 8px rgba(14,27,20,.12); } .lp-hero .hero-dots button{ background:#7A8A80; } .lp-hero .hero-dots button.is-active{ background:var(--brand-dark); } @media (prefers-reduced-motion:reduce){ .lp-hero .hero-dots button{ transition:none; } } .mini-bar{ display:flex; align-items:flex-end; gap:6px; height:64px; } .mini-bar span{ flex:1; background:var(--brand-soft); border-radius:5px 5px 0 0; } .mini-bar span.hi{ background:var(--brand); } .lp-features{ background:#fff; } /* Carrousel des fonctionnalités */ .feat-carousel{ overflow:hidden; } .feat-track{ display:flex; gap:1.5rem; align-items:stretch; will-change:transform; } .feat-slide{ flex:0 0 calc((100% - 3rem) / 3); display:flex; } .feat-slide > .lp-feature{ width:100%; } @media (max-width:992px){ .feat-slide{ flex-basis:calc((100% - 1.5rem) / 2); } } @media (max-width:640px){ .feat-slide{ flex-basis:100%; } } .feat-nav{ display:flex; gap:1rem; justify-content:center; margin-top:1.75rem; } .feat-dots{ margin-top:1.9rem; } .feat-arrow{ width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--brand); font-size:1.15rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease; } .feat-arrow:hover{ background:var(--brand); color:var(--sur-vert); border-color:var(--brand); } /* Boîte d'appel à l'action (fond noir, texte blanc) */ /* Bouton d'action du popup (bleu) */ /* 842 : .btn-cta (blanc sur vert) retiré ; utiliser .btn-primary. */ /* Espacement standard sous l'en-tête d'une page (titre/barre d'actions → contenu). Valeur centrale : la modifier ici la change PARTOUT où .page-header est utilisée. */ .page-header { margin-bottom: 3rem; } /* 48px — la SEULE distance entre un en-tête et son contenu */ /* Lien de retour NOMMÉ, au-dessus du titre. Voir templates/portal/_retour.html. Une flèche seule n'annonce pas sa destination ; ce lien l'écrit. */ .retour-lien{ display:inline-flex; align-items:center; gap:.3rem; font-size:.9375rem; font-weight:500; text-decoration:none; color:var(--brand-dark); padding:.25rem 0; } @media (hover:hover){ .retour-lien:hover{color:var(--brand-dark); text-decoration:underline; } } /* 961 : soulignement au survol, souris seulement */ .retour-lien .bi{ font-size:1rem; } /* Mobile : plus d'air latéral sur les pages publiques (landing, calculatrices, légales) */ @media (max-width:575.98px){ .lp-body .container{ padding-left:30px; padding-right:30px; } } /* ===== Header public : hauteur pilotée par --lp-nav-h, contenu centré ===== */ .lp-nav .container{ min-height:var(--lp-nav-h); } .lp-body > main{ flex:1 0 auto; } /* pousse le footer en bas même sans hero */ /* ===== 941 : SÉLECTEUR D'OPTION, un seul style dans toute l'app (règle d'Annie) ===== Référence : « Pourcentage / Montant » de la page d'acompte (882). Un cadre, des séparateurs, choix actif fond --brand-soft + texte --brand-dark, survol gris pâle (jamais noir). Balisage :
puis +