/* ========================================================================== TaGestion — Feuille de style de la page de vente ========================================================================== COMMENT UTILISER CE FICHIER (depuis github.dev sur téléphone ou ordinateur) Tout ce qui touche l'APPARENCE du site est ici. Le fichier index.html ne contient plus que le TEXTE et la STRUCTURE. Donc : • Pour changer une COULEUR, une POLICE : modifie le bloc « RÉGLAGES » juste en dessous. Une seule ligne repeint tout le site. • Pour changer un TEXTE : va plutôt dans index.html. Les couleurs sont des « variables ». Par exemple, --jaune est utilisé partout pour les boutons et les accents. Change sa valeur ici, et TOUS les boutons changent d'un coup. Pas besoin de chercher dans tout le fichier. ========================================================================== */ /* ========================================================================== RÉGLAGES — LES SEULES LIGNES QUE TU MODIFIERAS SOUVENT ========================================================================== Change une valeur de couleur (ex: #E5C144) pour repeindre tout le site. Les codes commençant par # sont des couleurs : tu peux en générer sur un site comme coolors.co ou simplement demander à Claude. ========================================================================== */ :root { /* --- COULEURS PRINCIPALES --- */ --encre: #131C26; /* Fond foncé (hero, entête, pied de page) */ --papier: #F4F5F1; /* Fond clair général */ --blanc: #FFFFFF; /* Surfaces blanches (cartes, sélecteur) */ /* --- COULEUR D'ACCENT (boutons, surlignage, détails) --- */ --jaune: #E5C144; /* La couleur vedette. Change-la pour re-thémer. */ --jaune-vif: #F0CF54; /* Version plus claire (survol des boutons) */ --jaune-fonce: #B8952A; /* Version plus foncée (ombres, tranche) */ --rose: #D9A6A0; /* Accent secondaire (2e couleur de la tranche) */ /* --- COULEURS DE TEXTE ET DÉTAILS --- */ --gris: #6B7A88; /* Texte secondaire, sous-titres */ --regle: #DDE0DA; /* Filets, bordures, lignes de séparation */ --bleu: #1B4E8F; /* Bleu (si besoin d'un lien ou accent froid) */ --vert: #2A7F5F; /* Vert (coche des listes de prix) */ /* --- POLICES D'ÉCRITURE --- */ /* Pour changer de police : remplace le premier nom. Si tu veux une police Google Fonts différente, dis-le à Claude, il ajustera aussi le . */ --display: 'Bricolage Grotesque', system-ui, sans-serif; /* Gros titres */ --corps: 'Public Sans', system-ui, sans-serif; /* Texte courant */ --mono: 'IBM Plex Mono', ui-monospace, monospace; /* Chiffres, étiquettes */ } /* ========================================================================== MISE EN FORME DU SITE -------------------------------------------------------------------------- En dessous, c'est la « mécanique » visuelle. Tu n'as pas besoin d'y toucher pour les changements courants. Si tu veux modifier une section précise (l'entête, le hero, les prix...), repère son commentaire de titre : chaque grande zone est identifiée. ========================================================================== */ /* ========================================================== TaGestion — site vitrine Direction : le carnet de factures carboné. Tout travailleur autonome au Québec en a eu un dans son camion : la feuille blanche pour le client, la jaune pour soi. L'identité vient de là — encre foncée, papier, jaune carbone. ========================================================== */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--papier);color:var(--encre); font-family:var(--corps);font-size:17px;line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0} p{margin:0 0 1em} a{color:inherit} .enveloppe{max-width:1080px;margin:0 auto;padding:0 24px} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} .eyebrow{ font-family:var(--mono);font-size:.68rem;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--gris); margin:0 0 14px; } .saut-contenu{ position:absolute;left:-9999px;background:var(--jaune);color:var(--encre); padding:10px 16px;border-radius:3px;font-weight:600;z-index:99; } .saut-contenu:focus{left:16px;top:16px} :focus-visible{outline:3px solid var(--jaune);outline-offset:2px} /* ---------- Barre du haut ---------- */ .entete{ background:var(--encre);color:var(--papier); border-bottom:1px solid rgba(255,255,255,.1); position:sticky;top:0;z-index:40; } .entete .enveloppe{ display:flex;align-items:center;justify-content:space-between; height:64px;gap:16px; } .logo{ font-family:var(--display);font-weight:800;font-size:1.22rem; letter-spacing:-.03em;text-decoration:none;display:flex;align-items:center;gap:2px; } .logo b{color:var(--jaune);font-weight:800} .entete nav{display:flex;align-items:center;gap:26px;font-size:.92rem} .entete nav a{color:rgba(244,245,241,.78);text-decoration:none} .entete nav a:hover{color:var(--papier)} .bouton{ display:inline-block;font-family:var(--corps);font-weight:600;font-size:.95rem; padding:11px 22px;border-radius:3px;text-decoration:none;border:2px solid transparent; cursor:pointer;transition:transform .12s ease; } .bouton:hover{transform:translateY(-1px)} .bouton.jaune{background:var(--jaune);color:var(--encre);border-color:var(--jaune)} .bouton.jaune:hover{background:#F0CF54} .bouton.contour{border-color:rgba(244,245,241,.35);color:var(--papier);background:none} .bouton.contour:hover{border-color:var(--jaune);color:var(--jaune)} .bouton.encre{background:var(--encre);color:var(--papier);border-color:var(--encre)} .bouton.grand{padding:15px 32px;font-size:1.05rem} /* ---------- Hero ---------- */ .hero{ background:var(--encre);color:var(--papier); padding:76px 0 88px;position:relative;overflow:hidden; } /* Les lignes réglées d'un carnet, en filigrane */ .hero::before{ content:'';position:absolute;inset:0; background:repeating-linear-gradient( to bottom, transparent 0 35px, rgba(244,245,241,.045) 35px 36px ); pointer-events:none; } .hero .enveloppe{position:relative} .hero h1{ font-size:clamp(2.3rem,6.2vw,4.1rem); max-width:16ch;margin-bottom:22px; } .hero h1 .surligne{ color:var(--jaune); position:relative;white-space:nowrap; } .hero .accroche{ font-size:clamp(1.02rem,2.2vw,1.22rem); color:rgba(244,245,241,.8);max-width:52ch;margin-bottom:32px; } .hero .actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:14px} .hero .fine{font-size:.84rem;color:rgba(244,245,241,.55);margin:0} /* ---------- Le sélecteur de métier : la signature ---------- */ .selecteur{ margin-top:64px; background:var(--blanc);color:var(--encre); border-radius:5px; box-shadow:0 1px 0 var(--jaune-fonce), 0 18px 44px rgba(0,0,0,.34); overflow:hidden; } /* La tranche jaune : l'épaisseur de la copie carbone sous la feuille */ .selecteur::before{ content:'';display:block;height:7px; background:linear-gradient(to right,var(--jaune) 0 62%,var(--rose) 62% 100%); } .selecteur-tete{padding:26px 28px 0} .selecteur-tete h2{font-size:1.32rem;margin-bottom:6px} .selecteur-tete p{color:var(--gris);font-size:.94rem;margin-bottom:20px} .onglets{ display:flex;flex-wrap:wrap;gap:7px; padding:0 28px 22px; } .onglet{ font-family:var(--corps);font-size:.88rem;font-weight:500; padding:8px 15px;border-radius:100px;cursor:pointer; background:var(--papier);border:1px solid var(--regle);color:var(--encre); transition:background .12s ease,border-color .12s ease; } .onglet:hover{background:#EAEBE5} .onglet[aria-pressed="true"]{ background:var(--jaune);border-color:var(--jaune-fonce);font-weight:600; } .resultats{ border-top:1px solid var(--regle); background:var(--papier); padding:26px 28px 30px; } .resultats-tete{ display:flex;justify-content:space-between;align-items:baseline; gap:16px;flex-wrap:wrap;margin-bottom:20px; } .resultats-tete strong{font-family:var(--display);font-size:1.06rem;font-weight:800} .resultats-tete span{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)} .liste-deductions{ display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:2px;background:var(--regle);border:1px solid var(--regle);border-radius:4px;overflow:hidden; } .deduction{background:var(--blanc);padding:17px 19px} .deduction h3{ font-family:var(--corps);font-size:.98rem;font-weight:600; letter-spacing:0;margin-bottom:6px; } .deduction p{font-size:.88rem;color:var(--gris);margin:0} @media (prefers-reduced-motion:no-preference){ .deduction{animation:apparait .32s ease both} .deduction:nth-child(2){animation-delay:.05s} .deduction:nth-child(3){animation-delay:.1s} .deduction:nth-child(4){animation-delay:.15s} @keyframes apparait{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} } /* ---------- Sections ---------- */ section{padding:82px 0} .section-titre{font-size:clamp(1.75rem,3.6vw,2.5rem);max-width:22ch;margin-bottom:18px} .section-intro{color:var(--gris);max-width:56ch;font-size:1.04rem;margin-bottom:46px} /* ---------- Trois piliers ---------- */ .piliers{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:26px} .pilier{ background:var(--blanc);border:1px solid var(--regle); border-radius:4px;padding:28px 26px; border-top:4px solid var(--encre); } .pilier:nth-child(2){border-top-color:var(--jaune)} .pilier:nth-child(3){border-top-color:var(--rose)} .pilier .numero{ font-family:var(--mono);font-size:.7rem;letter-spacing:.14em; color:var(--gris);display:block;margin-bottom:14px; } .pilier h3{font-size:1.24rem;margin-bottom:11px} .pilier p{font-size:.95rem;color:var(--gris);margin:0} /* ---------- Démonstration du calcul ---------- */ .demo{background:var(--encre);color:var(--papier)} .demo .section-intro{color:rgba(244,245,241,.72)} .demo-grille{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center} .facture-exemple{ background:var(--blanc);color:var(--encre); border-radius:4px;padding:26px 28px; box-shadow:0 16px 40px rgba(0,0,0,.3); } .facture-exemple .entete-fac{ display:flex;justify-content:space-between;align-items:flex-start; border-bottom:2px solid var(--encre);padding-bottom:14px;margin-bottom:16px; } .facture-exemple .entete-fac div:last-child{text-align:right} .facture-exemple .titre-fac{font-family:var(--display);font-weight:800;font-size:1.1rem} .facture-exemple .petit{font-family:var(--mono);font-size:.72rem;color:var(--gris);letter-spacing:.06em} .facture-exemple table{width:100%;border-collapse:collapse;font-size:.88rem} .facture-exemple td{padding:8px 0;border-bottom:1px solid var(--regle)} .facture-exemple td:last-child{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums} .facture-exemple .taxe td{color:var(--gris);font-size:.83rem} .facture-exemple .total td{ border-bottom:none;border-top:2px solid var(--encre); padding-top:13px;font-weight:700;font-size:1.08rem; } .facture-exemple .total td:last-child{font-weight:700} .demo-points{list-style:none;padding:0;margin:0} .demo-points li{ padding:0 0 22px 26px;position:relative; color:rgba(244,245,241,.78);font-size:.98rem; } .demo-points li::before{ content:'';position:absolute;left:0;top:9px; width:9px;height:9px;background:var(--jaune);border-radius:2px; } .demo-points strong{color:var(--papier);display:block;font-weight:600;margin-bottom:3px} /* ---------- Prix ---------- */ .prix{background:var(--papier)} .prix-grille{display:grid;grid-template-columns:1fr 1.15fr;gap:26px;max-width:800px} .forfait{ background:var(--blanc);border:1px solid var(--regle); border-radius:5px;padding:32px 30px;display:flex;flex-direction:column; } .forfait.vedette{border:2px solid var(--encre);position:relative} .forfait.vedette::before{ content:'';position:absolute;top:-2px;left:-2px;right:-2px;height:7px; background:var(--jaune);border-radius:5px 5px 0 0; } .forfait h3{font-size:1.3rem;margin-bottom:6px} .forfait .sous{color:var(--gris);font-size:.9rem;margin-bottom:22px} .montant{ font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:2.9rem;font-weight:600;letter-spacing:-.04em;line-height:1; } .montant small{font-family:var(--corps);font-size:.94rem;font-weight:500;color:var(--gris);letter-spacing:0} .forfait ul{list-style:none;padding:0;margin:26px 0 28px;flex:1} .forfait li{ padding:0 0 11px 24px;position:relative;font-size:.94rem; } .forfait li::before{ content:'';position:absolute;left:2px;top:8px; width:8px;height:8px;border-radius:50%;background:var(--vert); } .forfait.gratuit li::before{background:var(--gris)} /* ---------- Questions ---------- */ .questions{background:var(--blanc);border-top:1px solid var(--regle)} .question{border-bottom:1px solid var(--regle);padding:24px 0;max-width:760px} .question:first-of-type{border-top:1px solid var(--regle)} .question h3{font-size:1.08rem;font-family:var(--corps);font-weight:600;letter-spacing:0;margin-bottom:9px} .question p{color:var(--gris);font-size:.96rem;margin:0} /* ---------- Appel final ---------- */ .final{background:var(--jaune);color:var(--encre);text-align:center} .final h2{font-size:clamp(1.9rem,4.4vw,3rem);max-width:20ch;margin:0 auto 18px} .final p{max-width:48ch;margin:0 auto 30px;font-size:1.06rem} /* ---------- Pied ---------- */ footer{background:var(--encre);color:rgba(244,245,241,.62);padding:52px 0 40px;font-size:.88rem} footer .logo{color:var(--papier);margin-bottom:16px;display:inline-flex} .mention{ border-top:1px solid rgba(255,255,255,.12); margin-top:28px;padding-top:22px;font-size:.8rem;line-height:1.65;max-width:74ch; } /* ---------- Responsive ---------- */ @media (max-width:840px){ .demo-grille,.prix-grille{grid-template-columns:1fr;gap:34px} .entete nav a:not(.bouton){display:none} section{padding:58px 0} .hero{padding:52px 0 64px} .selecteur-tete,.onglets,.resultats{padding-left:20px;padding-right:20px} }