/* Case in Hand, feuille de style. Refaite le 20 août 2026 : le propriétaire a dit « it looks ugly asf » et « I want a pretty app like the canada version ». Il avait raison, et je ne l'avais jamais REGARDÉ, j'avais mesuré des rapports de contraste pendant des jours sans ouvrir une capture d'écran. Les jetons ci-dessous ne sont pas inventés : ils sont repris tels quels du site québécois (site-public-v0/styles.css), pour que les deux côtés soient de la même famille. */ :root{ /* palette québécoise, verbatim */ --encre:#1F2933; --encre-douce:#4A5563; --bleu:#1E3A5F; --bleu-fonce:#162C49; --papier:#FAF7F2; --blanc:#FFFFFF; --vert:#2F6B4F; --vert-pale:#E8F2EC; --ambre:#B8791F; --ambre-texte:#8A5A13; --ambre-pale:#FBF3E4; --brume:#E7E1D8; --serif:Georgia,'Times New Roman',serif; --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; /* alias conservés : d'anciennes règles et des tests s'y réfèrent */ --ink:var(--encre); --soft:var(--encre-douce); --line:var(--brume); --paper:var(--blanc); --wash:var(--papier); --accent:var(--bleu); --warn:var(--ambre-texte); --gap:#8A3A2E; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font:16px/1.7 var(--sans);color:var(--encre);background:var(--papier)} .enveloppe{max-width:1080px;margin:0 auto;padding:0 24px} /* ---------- bandeau utilitaire ---------- Il porte DEUX faits que chaque page doit énoncer : dans quel pays on est, et que ceci ne remplace pas un avocat (Tex. Gov't Code § 81.101(c)). C'était deux pavés empilés, un jaune et un bleu, ~100 px de chrome avant le moindre contenu. C'est maintenant UNE ligne fine. Le désaveu reste avant le premier titre et au-dessus de la ligne de flottaison, ce que le harnais exige, mais il se lit comme une mention légale, pas comme une alarme. */ .utilitaire{background:var(--blanc);border-bottom:1px solid var(--brume);font-size:.8rem} /* Deux blocs en flex se disputaient la ligne et se cassaient en deux, le désaveu échoué tout seul à gauche. Ils coulent maintenant comme UNE phrase continue qui se replie naturellement : c'est une mention légale, pas deux bandeaux. */ .utilitaire .enveloppe{padding-top:10px;padding-bottom:11px;line-height:1.6} .region{display:block;margin:0;font-size:.84rem} .region-ici{display:inline-block;margin-right:8px; padding:2px 10px;border:1px solid var(--brume);border-radius:999px; font-weight:700;letter-spacing:.03em;color:var(--bleu);background:var(--papier)} .region-txt{color:var(--encre-douce)} .region-txt a{color:var(--bleu);text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px;text-decoration-color:var(--ambre)} .region-txt a:hover{color:var(--bleu-fonce);text-decoration-thickness:2px} /* Le désaveu ne concourt pas avec le reste : il est présent et lisible, pas criard. En gras il forçait le bandeau à passer sur deux lignes. */ /* Le désaveu du Texas doit être « clear and conspicuous » : le harnais l'exige JAMAIS plus petit que le texte courant. Je l'avais descendu à 0,78 rem pour que le bandeau tienne sur une ligne, c'est-à-dire que j'avais rétréci une mention légale obligatoire pour des raisons de mise en page. Mesuré à 12,48 px contre 16, sur les trois largeurs. Il reprend sa taille et prend sa propre ligne : deux lignes assumées valent mieux qu'une conforme seulement en apparence. */ p.disclaimer{display:block;margin:5px 0 0;color:var(--ambre-texte);font-size:1rem;font-weight:600} .utilitaire{font-size:.78rem} /* ---------- en-tête ---------- */ header.site{background:var(--blanc);border-bottom:1px solid var(--brume);padding:14px 0} /* nowrap, et non wrap. C est CETTE regle qui empilait le logo et la navigation : plus specifique que .barre (0,2,0 contre 0,1,0), elle gagnait, et la barre revenait a la ligne quoi que fasse la classe. Mesure avant correction : marque a y=64, navigation a y=120, soit un en-tete de 129 px de haut. Le cote quebecois a du reclamer une cinquantaine de pixels pour tenir sur une ligne ; les ecarts sont resserres plus bas dans le meme esprit. */ header.site .enveloppe{display:flex;align-items:center;justify-content:space-between; gap:10px 18px;flex-wrap:nowrap} .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:none} .brand svg{width:30px;height:36px;display:block;flex:none} .brand .nom{font-family:var(--serif);font-weight:700;font-size:1.28rem;color:var(--bleu); white-space:nowrap;letter-spacing:-.005em} .brand .nom::after{content:'.';color:var(--ambre)} header.site nav{min-width:0} /* La liste ne se coupe pas non plus : elle est la moitie du probleme de largeur. */ header.site nav ul{list-style:none;display:flex;flex-wrap:nowrap;gap:2px 15px;margin:0;padding:0} header.site nav a{display:inline-block;padding:4px 0;color:var(--encre-douce); text-decoration:none;font-size:.95rem;border-bottom:2px solid transparent;white-space:nowrap} header.site nav a:hover{color:var(--bleu);border-bottom-color:var(--brume)} header.site nav a[aria-current="page"]{color:var(--bleu);font-weight:600;border-bottom-color:var(--ambre)} /* ---------- structure ---------- */ main{max-width:1080px;margin:0 auto;padding:44px 24px 64px} main.etroit{max-width:820px} h1,h2,h3{font-family:var(--serif);color:var(--bleu);line-height:1.25;margin:0 0 .5em} h1{font-size:clamp(1.85rem,4.4vw,2.5rem);letter-spacing:-.01em} h2{font-size:clamp(1.25rem,3vw,1.6rem);margin-top:1.7em} h3{font-size:1.1rem;margin-top:1.4em} p{margin:0 0 1em} .lede{font-size:1.12rem;line-height:1.65;color:var(--encre-douce);max-width:62ch;margin-bottom:1.6em} a{color:var(--bleu)} .small{font-size:.88rem;color:var(--encre-douce)} hr{border:0;border-top:1px solid var(--brume);margin:44px 0} /* ---------- cartes ---------- */ .box{background:var(--blanc);border:1px solid var(--brume);border-radius:14px; padding:26px 28px;margin:24px 0;box-shadow:0 1px 2px rgba(31,41,51.04),0 8px 24px -18px rgba(31,41,51.28)} .box > :first-child{margin-top:0} .box > :last-child{margin-bottom:0} .box h2{margin-top:0;font-size:1.22rem} .box ul{margin:.5em 0;padding-left:1.15em} .box li{margin:.5em 0} .grille{display:grid;gap:24px} @media (min-width:760px){.grille.deux{grid-template-columns:1fr 1fr}} /* ---------- contrôles ---------- */ label{display:block;font-weight:600;font-size:.9rem;color:var(--encre);margin:0 0 6px} select,input[type=text],input[type=date],textarea{font:inherit;padding:11px 13px; border:1px solid var(--brume);border-radius:9px;background:var(--blanc);color:var(--encre); max-width:100%} select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--ambre);outline-offset:1px} button{font:600 1rem/1.3 var(--sans);padding:12px 22px;border-radius:9px;border:2px solid var(--bleu); background:var(--bleu);color:var(--blanc);cursor:pointer;min-height:44px; transition:background .15s,color .15s} button:hover{background:var(--bleu-fonce);border-color:var(--bleu-fonce)} button.secondaire{background:transparent;color:var(--bleu)} button.secondaire:hover{background:var(--bleu);color:var(--blanc)} button:focus-visible{outline:3px solid var(--ambre);outline-offset:2px} .rangee{display:flex;flex-wrap:wrap;gap:12px;align-items:center} /* ---------- tableau de couverture ---------- */ .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%; border:1px solid var(--brume);border-radius:14px;background:var(--blanc)} .tbl-scroll:focus-visible{outline:3px solid var(--ambre);outline-offset:2px} table.cov{width:100%;border-collapse:collapse;font-size:.94rem;min-width:640px} table.cov caption{text-align:left;color:var(--encre-douce);font-size:.88rem;padding:16px 18px 10px} table.cov th,table.cov td{padding:11px 14px;text-align:left;vertical-align:top; border-bottom:1px solid var(--brume)} table.cov thead th{background:var(--papier);color:var(--bleu);font-family:var(--serif); font-size:.9rem;letter-spacing:.02em;position:relative} table.cov tbody tr:last-child th,table.cov tbody tr:last-child td{border-bottom:0} tr.ok th[scope=row]{color:var(--vert);font-weight:700} tr.gap th[scope=row]{color:var(--gap);font-weight:700} tr.gap td{color:var(--encre-douce)} tr.vise th[scope=row],tr.vise td{background:var(--ambre-pale)} /* ---------- questions ---------- */ article.qa{background:var(--blanc);border:1px solid var(--brume);border-radius:14px; padding:24px 26px;margin:0 0 20px; box-shadow:0 1px 2px rgba(31,41,51.04),0 8px 24px -18px rgba(31,41,51.28)} article.qa h2{margin:0 0 6px;font-size:1.15rem} .qa-scope{margin:0 0 14px;font-size:.76rem;color:var(--ambre-texte); text-transform:uppercase;letter-spacing:.09em;font-weight:700} blockquote.qa-quote{margin:0 0 14px;padding:16px 20px;background:var(--papier); border-left:3px solid var(--ambre);border-radius:0 10px 10px 0; font-family:var(--serif);font-size:1.02rem;line-height:1.6;color:var(--encre)} blockquote.qa-quote p{margin:0 0 8px} blockquote.qa-quote footer{font-family:var(--sans);font-size:.84rem;color:var(--encre-douce)} article.qa > p:last-child{margin-bottom:0;color:var(--encre-douce)} article.qa-method blockquote{display:none} /* ---------- panneau « votre État » ---------- Un manque honnête doit se voir autant qu'une réponse : encadré, jamais grisé. */ section.vous{border:1px solid var(--brume);border-left:4px solid var(--bleu);border-radius:12px; padding:20px 24px;margin:22px 0;background:var(--blanc)} section.vous h2{margin:0 0 8px;font-size:1.2rem} section.vous p{margin:0 0 8px} section.vous p:last-child{margin-bottom:0} section.vous-lu{border-left-color:var(--vert);background:var(--vert-pale)} section.vous-manque{border-left-color:var(--gap);background:var(--ambre-pale)} .vous-cite{font-weight:600;font-family:var(--serif)} .etat-choix{background:var(--blanc);border:1px solid var(--brume);border-radius:14px; padding:24px 26px;margin:0 0 24px; box-shadow:0 1px 2px rgba(31,41,51.04),0 8px 24px -18px rgba(31,41,51.28)} .etat-choix h2{margin-top:0} /* ---------- l'outil ---------- */ .rec{list-style:none;margin:0;padding:0} .rec li{background:var(--blanc);border:1px solid var(--brume);border-radius:12px; padding:16px 18px;margin:0 0 12px} .rec-date{font-family:var(--serif);font-weight:700;color:var(--bleu);display:block;margin-bottom:4px} .rec-quoi{margin:0 0 8px} .rec-piece{font-size:.88rem;color:var(--vert)} .rec-nopiece{font-size:.88rem;color:var(--ambre-texte);margin:0} .err{color:var(--gap);font-weight:600} /* Panne de stockage (audit 3, 20 août 2026) : le texte n'est pas perdu, il n'est pas gardé. */ .nosave{border:1px solid var(--gap);border-left:4px solid var(--gap);background:var(--ambre-pale); border-radius:12px;padding:14px 18px;margin:16px 0} /* ---------- pied ---------- */ footer.site{border-top:1px solid var(--brume);background:var(--blanc);margin-top:64px;padding:36px 0} footer.site .enveloppe{max-width:1080px} footer.site p{color:var(--encre-douce);font-size:.92rem;margin:0 0 .7em} footer.site p:last-child{margin-bottom:0} /* ---------- accessibilité ---------- */ /* Le lien d'évitement reste ABSOLU au focus : « left » fait donc réellement le travail. La version précédente repassait en position:static, où « left » est inerte, la règle aurait pu être écrite pour satisfaire un test sans rien déplacer. */ .saut{position:absolute;left:-9999px;top:0;z-index:50} .saut:focus{left:0;top:0;padding:12px 20px;background:var(--bleu);color:var(--blanc); border-radius:0 0 10px 0;font-weight:600;text-decoration:none; box-shadow:0 6px 18px -6px rgba(31,41,51.5)} a:focus-visible,button:focus-visible,select:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--ambre);outline-offset:2px} @media (max-width:720px){ main{padding:30px 18px 48px} .enveloppe{padding:0 18px} .utilitaire{font-size:.76rem} } /* ---------- l'outil : champs pleine largeur ---------- Les champs étaient à leur largeur par défaut, une date étroite, une zone de texte étroite, une pièce étroite, toutes différentes : une colonne en dents de scie. */ #ajout label{margin-top:16px} #ajout label:first-child{margin-top:0} #ajout input[type=date],#ajout input[type=text],#ajout textarea{width:100%;display:block} #ajout textarea{min-height:96px;resize:vertical;font-family:inherit;line-height:1.6} #ajout p{margin:18px 0 0} .bouton-fichier{display:inline-flex;align-items:center;justify-content:center;min-height:44px; padding:12px 22px;border:2px solid var(--bleu);border-radius:9px;background:transparent; color:var(--bleu);font-weight:600;cursor:pointer} .bouton-fichier:hover{background:var(--bleu);color:var(--blanc)} /* Effacer n'est pas « encore un bouton » : il est à part, en rouge, et il dit ce qu'il coûte. */ .rangee-danger{margin-top:28px;padding-top:20px;border-top:1px solid var(--brume); align-items:center;gap:14px} button.danger{border-color:var(--gap);color:var(--gap)} button.danger:hover{background:var(--gap);border-color:var(--gap);color:var(--blanc)} /* ---------- héros de l'accueil ---------- L'accueil était deux boîtes grises et 300 px de vide avant le pied. Le côté québécois ancre son accueil avec un extrait de ce que l'outil PRODUIT ; on fait la même chose, et l'extrait est marqué comme illustration pour qu'il ne passe jamais pour un vrai dossier. */ .heros{display:grid;gap:40px;align-items:center;margin:0 0 8px} @media (min-width:900px){.heros{grid-template-columns:1.1fr .9fr;gap:56px}} .heros h1{margin-bottom:.35em} .heros .lede{margin-bottom:1.4em} .heros-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 14px} .bouton{display:inline-flex;align-items:center;justify-content:center;min-height:48px; padding:13px 26px;border-radius:9px;border:2px solid var(--bleu);font-weight:600; font-size:1.02rem;text-decoration:none;transition:background .15s,color .15s} .bouton.primaire{background:var(--bleu);color:var(--blanc)} .bouton.primaire:hover{background:var(--bleu-fonce);border-color:var(--bleu-fonce);color:var(--blanc)} .bouton.secondaire{background:transparent;color:var(--bleu)} .bouton.secondaire:hover{background:var(--bleu);color:var(--blanc)} .apercu{background:var(--blanc);border:1px solid var(--brume);border-radius:16px;padding:26px 28px; box-shadow:0 2px 4px rgba(31,41,51.04),0 22px 50px -30px rgba(31,41,51.45)} .apercu-titre{font-family:var(--serif);font-weight:700;color:var(--bleu);text-align:center; letter-spacing:.02em;margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--brume)} .apercu-liste{list-style:none;margin:0;padding:0;font-size:.93rem} .apercu-liste li{padding:0 0 14px;margin:0 0 14px;border-bottom:1px dashed var(--brume);line-height:1.6} .apercu-liste li:last-child{border-bottom:0;margin-bottom:0} .apercu-liste b{font-family:var(--serif);color:var(--bleu)} .apercu-piece.apercu-sans{display:block;margin-top:5px;font-size:.82rem} .apercu-piece{color:var(--vert)} .apercu-piece::before{content:'\2713\00a0'} .apercu-sans{color:var(--ambre-texte)} .apercu-pied{font-size:.85rem;color:var(--encre-douce);margin:16px 0 0;padding-top:14px; border-top:1px solid var(--brume)} .apercu-marque{margin:12px 0 0;text-align:right} .apercu-marque{font-size:.74rem;color:var(--encre-douce);letter-spacing:.05em;text-transform:uppercase} /* ---------- tuiles de clôture ---------- */ .fermeture{margin-top:40px} .tuile{display:block;background:var(--blanc);border:1px solid var(--brume);border-radius:14px; padding:24px 26px;text-decoration:none;color:var(--encre); box-shadow:0 1px 2px rgba(31,41,51.04),0 8px 24px -18px rgba(31,41,51.28); transition:border-color .15s,transform .15s,box-shadow .15s} .tuile:hover{border-color:var(--ambre);transform:translateY(-2px); box-shadow:0 2px 4px rgba(31,41,51.05),0 16px 34px -22px rgba(31,41,51.4)} .tuile-chiffre{display:block;font-family:var(--serif);font-size:2.6rem;line-height:1; color:var(--bleu);font-weight:700} .tuile-sur{font-size:1.3rem;color:var(--encre-douce);font-weight:400} .tuile-titre{display:block;margin:10px 0 8px;font-weight:700;color:var(--bleu)} .tuile-titre::after{content:' \2192';color:var(--ambre)} .tuile-txt{display:block;font-size:.9rem;color:var(--encre-douce);line-height:1.6} /* ---------- IMPRESSION ---------- Constat le plus grave de l'audit du 20 août 2026, trouvé par TROIS lentilles indépendantes : « Print the record » est la seule sortie du produit, la chose que la personne apporte au tribunal, et il n'existait AUCUNE règle @media print. window.print() imprimait donc l'interface d'édition : la navigation, le bandeau, le formulaire de saisie, les boutons. Ce qu'on imprime ici est un DOCUMENT : un en-tête qui dit ce que c'est et qui l'a écrit, les faits dans l'ordre, chacun avec sa pièce ou la mention qu'il n'y en a pas, et un pied qui redit ce que ce document n'est pas. */ @media print { @page { margin: 18mm 16mm 20mm; } html, body { background: #fff !important; color: #000; font-size: 11.5pt; line-height: 1.5; } /* L'interface ne s'imprime pas. */ .utilitaire, header.site.saut.etat-choix, #ajout.rangee.rangee-danger, footer.site.heros-actions, #f-err, #r-nosave { display: none !important; } main { max-width: none; padding: 0; } /* En-tête du document : il doit se suffire à lui-même hors de l'écran. */ main::before { content: "Record of what happened, prepared by the person named below"; display: block; font-family: Georgia, 'Times New Roman', serif; font-size: 15pt; font-weight: 700; color: #000; border-bottom: 1.5pt solid #000; padding-bottom: 5pt; margin-bottom: 4pt; } main::after { content: "This record was written by the person filing it. It is not a legal document, it is not a substitute for the advice of an attorney, and no part of it was drafted, chosen or advised by Case in Hand."; display: block; margin-top: 14pt; padding-top: 6pt; border-top: .5pt solid #666; font-size: 8.5pt; color: #222; } h1 { font-size: 13pt; margin: 0 0 2pt; color: #000; } .lede { font-size: 9.5pt; color: #222; margin: 0 0 12pt; max-width: none; } h2 { font-size: 11.5pt; color: #000; margin: 12pt 0 5pt; page-break-after: avoid; } #r-compte { font-size: 9.5pt; color: #333; } /* Les entrées : jamais coupées au milieu, numérotées, chacune avec sa pièce. */ .rec { margin: 0; padding: 0; } .rec li { border: 0; border-bottom: .5pt solid #999; border-radius: 0; padding: 6pt 0; margin: 0; page-break-inside: avoid; background: none; } .rec li:last-child { border-bottom: 0; } .rec-date { font-family: Georgia, serif; font-weight: 700; color: #000; font-size: 11pt; } .rec-quoi { margin: 2pt 0 3pt; color: #000; } .rec-piece.rec-nopiece { font-size: 9.5pt; color: #222; } .rec-piece::before { content: 'Exhibit: '; font-weight: 700; } .rec-nopiece::before { content: 'Exhibit: '; font-weight: 700; } /* Le panneau « votre État » s'imprime : il dit quel droit a été lu, et à quelle date. */ section.vous { border: .5pt solid #999; border-left: 2pt solid #000; background: none; padding: 6pt 9pt; page-break-inside: avoid; } section.vous h2 { margin-top: 0; } a { color: #000; text-decoration: none; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #333; } * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* ---------- actions par entrée ---------- La classe .lien était émise par le générateur et n'existait NULLE PART dans la feuille : « remove », une suppression irréversible en un clic, héritait donc du style de bouton primaire, un pavé bleu plein, identique au bouton d'ajout. Trouvé par trois lentilles. */ .rec-actions{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:14px} button.lien{min-height:auto;padding:2px 0;border:0;background:none;color:var(--bleu); font:600 .86rem/1.4 var(--sans);text-decoration:underline;text-underline-offset:3px; text-decoration-color:var(--brume);cursor:pointer} button.lien:hover{background:none;color:var(--bleu-fonce);text-decoration-color:var(--ambre)} button.lien-danger{color:var(--gap)} button.lien-danger:hover{color:#6d2b21;background:none} button.lien:focus-visible{outline:3px solid var(--ambre);outline-offset:3px;border-radius:3px} /* Un message qui n'est pas une erreur ne doit pas être rouge : l'import réussi et l'effacement réussi passaient par la même boîte « err ». */ #f-err.note{color:var(--vert);font-weight:600} #f-err.err{color:var(--gap);font-weight:600} #r-titre:focus{outline:3px solid var(--ambre);outline-offset:4px;border-radius:4px} /* Les classes .sans et .rec-quoi n'avaient aucune règle : la mention « N of these have no exhibit » se fondait dans le corps de texte. */ .sans{font-size:.9rem;color:var(--ambre-texte);background:var(--ambre-pale); border-left:3px solid var(--ambre);border-radius:0 8px 8px 0;padding:9px 14px;margin:0 0 14px} /* Rien ne bornait ce qu'une personne tape : une seule chaîne sans espace débordait la carte. */ body.rec-quoi.rec-piece.rec-nopiece,td,blockquote.qa-quote{overflow-wrap:anywhere;word-break:break-word} /* Le pied était un pavé blanc de trois paragraphes gris identiques, sans un seul lien, un cul-de-sac au bas de chaque page. */ .pied-liens{display:flex;flex-wrap:wrap;gap:8px 22px;margin:18px 0 0;padding-top:16px; border-top:1px solid var(--brume)} .pied-liens a{color:var(--bleu);text-decoration:none;font-size:.92rem;font-weight:600; border-bottom:2px solid transparent;padding-bottom:2px} .pied-liens a:hover{border-bottom-color:var(--ambre)} /* Les liens ordinaires du corps n'avaient AUCUN état de survol, y compris les 34 liens « official source » de la page de couverture, qui sont la preuve du produit. */ main a:not(.bouton):not(.tuile):hover{text-decoration-thickness:2px; text-decoration-color:var(--ambre);color:var(--bleu-fonce)} /* Un tableau de 52 lignes sans alternance ni survol : on perd sa ligne en le parcourant. */ table.cov tbody tr:nth-child(even){background:rgba(231,225,216.28)} table.cov tbody tr:hover{background:var(--ambre-pale)} /* ---------- BAS DE PAGE ---------- C'etait un pave blanc de trois paragraphes gris sans un seul lien : un cul-de-sac au bas de chaque page. Le cote canadien y met des colonnes sur fond marine ; on fait la meme chose. Le desaveu du Texas (81.101(c)) termine ici, discret mais jamais plus petit que le texte courant : le proprietaire l'a demande hors du haut de page, deux fois. */ footer.site{background:var(--bleu-fonce);border-top:0;color:#C9D8EA;margin-top:72px;padding:44px 0 32px} footer.site .enveloppe{max-width:1080px} footer.site a{color:#C9D8EA;text-decoration:none;border-bottom:1px solid transparent} footer.site a:hover{color:var(--blanc);border-bottom-color:var(--ambre)} .pied-phrase{color:#DCE6F2;font-size:1rem;max-width:60ch;margin:0 0 30px} .pied-colonnes{display:flex;flex-wrap:wrap;gap:26px 60px;margin:0 0 28px} .pied-colonnes ul{list-style:none;margin:0;padding:0} .pied-colonnes li{margin:.4em 0;font-size:.93rem} .pied-colonnes li strong{display:block;margin-bottom:.6em;color:var(--blanc); font-family:var(--serif);font-size:.98rem;letter-spacing:.02em} .pied-fin{border-top:1px solid rgba(255,255,255,.18);padding-top:18px;margin:0; font-size:.9rem;color:#B9C6D6;line-height:1.65} .pied-fin strong{color:var(--blanc)} /* Le desaveu : present sur chaque page, lisible, jamais sous la taille du texte courant. */ footer.site p.disclaimer{margin:16px 0 0;color:#E4C88A;font-size:1rem;font-style:italic} /* La marque partagee : c'est la meme application, seul le nom change. */ .brand img{display:block;width:34px;height:42px;flex:none} /* La regle « footer.site p{color:var(--encre-douce)} » ecrite quand le pied etait blanc survivait sur le nouveau fond marine : gris fonce sur bleu fonce, mesure a 1,86:1 par la sonde de rendu. Une couleur ecrite pour un fond ne survit pas au changement de ce fond. */ footer.site p{color:#DCE6F2} footer.site .small{color:#B9C6D6} /* La piece et la mention « sans piece » doivent tomber sous le fait, pas se coller a sa fin. */ .apercu-piece,.apercu-sans{display:block;margin-top:6px} /* Il restait ~300 px de vide entre la derniere carte et le pied. */ main{padding-bottom:44px} .fermeture{margin-bottom:0} /* Le lien vers l'adresse propre de chaque reponse, et le fil de retour depuis celle-ci. */ .qa-lien{margin:14px 0 0;font-size:.9rem} .qa-lien a{color:var(--bleu);text-decoration:none;border-bottom:2px solid var(--brume);padding-bottom:1px} .qa-lien a:hover{border-bottom-color:var(--ambre)} .fil{font-size:.88rem;margin:0 0 12px} .fil a{color:var(--encre-douce);text-decoration:none} .fil a:hover{color:var(--bleu)} .fil a::before{content:'\2190\00a0'} /* ---------- COFFRE A PIECES ---------- Le fichier ne bouge jamais ; seule l'empreinte est gardee. L'empreinte doit donc se voir et se lire : c'est elle qui prouve, plus tard, que le fichier presente est le meme. */ .coffre{list-style:none;margin:14px 0 0;padding:0} .coffre li{background:var(--papier);border:1px solid var(--brume);border-radius:12px; padding:14px 16px;margin:0 0 10px} .coffre-nom{display:block;font-weight:700;color:var(--bleu)} .coffre-meta{display:block;font-size:.84rem;color:var(--encre-douce);margin:2px 0 6px} .coffre-emp{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.74rem;color:var(--vert);background:var(--vert-pale);border-radius:6px; padding:6px 9px;overflow-wrap:anywhere;margin:0 0 8px} #f-piecenote{color:var(--encre-douce)} /* ---------- CHRONOLOGIE ---------- */ .vue-bascule{margin:0 0 16px} .vue-bascule button[aria-pressed="true"]{background:var(--bleu);color:var(--blanc)} .chrono{border-left:2px solid var(--brume);padding-left:22px;margin-left:6px} .chrono-mois{margin:0 0 22px} .chrono-mois h3{font-size:1rem;margin:0 0 10px;color:var(--bleu);position:relative} .chrono-mois h3::before{content:'';position:absolute;left:-29px;top:.45em;width:11px;height:11px; border-radius:50%;background:var(--ambre)} .chrono-mois ol{list-style:none;margin:0;padding:0} .chrono-mois li{display:flex;flex-wrap:wrap;gap:4px 12px;padding:9px 0; border-bottom:1px dashed var(--brume)} .chrono-mois li:last-child{border-bottom:0} .chrono-j{font-family:var(--serif);font-weight:700;color:var(--bleu);min-width:2.2em} .chrono-t{flex:1 1 16em} .chrono-p{font-size:.84rem;color:var(--vert)} .chrono-sp{font-size:.84rem;color:var(--ambre-texte)} /* ---------- RAPPORT ET ADHESION ---------- Documenter reste gratuit ; c'est le rapport forme qui demande une adhesion. La porte dit ce que le rapport CONTIENDRAIT plutot que de se contenter de refuser. */ #rapport{margin:32px 0 0;padding-top:24px;border-top:1px solid var(--brume)} .mur{background:var(--ambre-pale);border:1px solid var(--ambre);border-left:4px solid var(--ambre); border-radius:12px;padding:20px 22px} .mur p:last-child{margin-bottom:0} .rap{background:var(--blanc);border:1px solid var(--brume);border-radius:14px;padding:24px 26px} .rap-meta{color:var(--encre-douce);font-size:.9rem} .att{list-style:none;margin:12px 0 0;padding:0;font-size:.88rem} .att li{padding:9px 0;border-bottom:1px dashed var(--brume)} .att li:last-child{border-bottom:0} .att code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.72rem; color:var(--vert);overflow-wrap:anywhere} @media print{ .vue-bascule,#coffre-liste button,.mur{display:none !important} #rapport{border-top:0;padding-top:0} .att code{color:#000} } /* ---------- L'APPLICATION : coquille a barre laterale ---------- L'outil canadien n'est pas une page qui defile, c'est une application a sections. C'est la difference entre « une page pour sauver du texte » et un endroit ou l'on travaille. */ .outil{display:grid;gap:32px;align-items:start} @media (min-width:900px){.outil{grid-template-columns:232px 1fr;gap:44px}} .outil-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:16px} .outil-grp{margin:16px 0 6px;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase; color:var(--ambre-texte);font-weight:700} .outil-grp:first-child{margin-top:0} .onglet{display:block;width:100%;text-align:left;background:none;border:0;border-left:3px solid transparent; border-radius:0;padding:9px 12px;min-height:auto;font:600 .95rem/1.3 var(--sans); color:var(--encre-douce);cursor:pointer} .onglet:hover{background:var(--blanc);color:var(--bleu);border-left-color:var(--brume)} .onglet[aria-current="page"]{background:var(--blanc);color:var(--bleu);border-left-color:var(--ambre); box-shadow:0 1px 2px rgba(31,41,51,.05)} .onglet:focus-visible{outline:3px solid var(--ambre);outline-offset:-3px} .outil-corps{min-width:0} .vue h1{margin-top:0} .vh{position:absolute;left:-9999px} /* tuiles du tableau de bord */ .tuile-stat{background:var(--blanc);border:1px solid var(--brume);border-radius:14px;padding:20px 22px; box-shadow:0 1px 2px rgba(31,41,51,.04)} .ts-n{display:block;font-family:var(--serif);font-size:2.2rem;line-height:1;color:var(--bleu);font-weight:700} .ts-l{display:block;margin-top:6px;font-size:.88rem;color:var(--encre-douce)} #t-conseils{margin:.4em 0 0;padding-left:1.15em} #t-conseils li{margin:.5em 0} /* dates a garder */ .dates{list-style:none;margin:16px 0 0;padding:0} .dates li{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;background:var(--blanc); border:1px solid var(--brume);border-left:3px solid var(--brume);border-radius:12px; padding:14px 16px;margin:0 0 10px} .dates li.dprox{border-left-color:var(--ambre);background:var(--ambre-pale)} .dates li.dpass{border-left-color:var(--gap)} .d-quand{font-family:var(--serif);font-weight:700;color:var(--bleu)} .d-quoi{flex:1 1 14em;font-weight:600} .d-j{font-size:.86rem;color:var(--encre-douce)} .dates li.dprox .d-j{color:var(--ambre-texte);font-weight:700} .dates li.dpass .d-j{color:var(--gap);font-weight:700} .d-ou{flex-basis:100%;font-size:.82rem;color:var(--encre-douce)} #vite-err.note,#d-err.note{color:var(--vert);font-weight:600} @media print{.outil-nav{display:none !important}.outil{display:block}} /* Le titre de section recoit le focus au changement d onglet, pour que le clavier et les lecteurs d ecran suivent. Un anneau doit apparaitre au CLAVIER, pas a chaque clic de souris. */ .vue h2:focus{outline:none} .vue h2:focus-visible{outline:3px solid var(--ambre);outline-offset:4px;border-radius:4px} .outil-h1{margin:0 0 22px;font-size:clamp(1.5rem,3.4vw,2rem)} /* Le filtre des questions. Il masque, il ne retire rien : le HTML garde les 37 reponses. */ .filtres{background:var(--blanc);border:1px solid var(--brume);border-radius:14px; padding:18px 20px;margin:0 0 24px;box-shadow:0 1px 2px rgba(31,41,51,.04)} .filtres label{display:inline;margin:0 4px 0 0;white-space:nowrap} .filtres input[type=text]{flex:1 1 15em;min-width:0} #q-compte{margin:10px 0 0} /* ============================================================ PRICING · the three plans. Deliberately NOT a "most popular" highlighted middle column. That pattern pushes a choice, and the whole product is built on not pushing choices at people who are already being pushed around by a process they did not pick. The three read as equals; the copy says who each one is for. ============================================================ */ .plans{ display:flex; flex-wrap:wrap; margin:26px 0 8px; } .plan{ flex:1 1 260px; box-sizing:border-box; margin:0 10px 18px 0; background:var(--blanc); border:1px solid var(--brume); border-radius:10px; padding:22px 20px 18px; } .plan:last-child{ margin-right:0; } .plan h3{ font:600 17px/1.3 var(--serif); color:var(--bleu); margin:0 0 10px; } .plan-prix{ margin:0; font:400 15px/1.2 var(--sans); color:var(--encre-douce); } .plan-prix strong{ font:700 30px/1 var(--serif); color:var(--encre); margin-right:5px; } .plan-an{ margin:4px 0 12px; font-size:13px; color:var(--encre-douce); } .plan-pour{ margin:0 0 12px; font:400 14.5px/1.55 var(--serif); color:var(--encre); } .plan-inc{ margin:0 0 16px; padding-left:18px; } .plan-inc li{ font-size:14px; line-height:1.65; color:var(--encre-douce); } .plan .bouton{ display:inline-block; width:100%; box-sizing:border-box; text-align:center; } @media (max-width:700px){ .plan{ flex:1 1 100%; margin-right:0; } } /* ============================================================ PER-STATE PAGES. A quoted statute is set apart from our prose on purpose. On these pages the two must never be mistaken for each other: one is the law and one is us describing it, and the visual difference is the honest signal. ============================================================ */ .st-cite{ margin:10px 0; padding:12px 16px; border-left:3px solid var(--bleu); background:var(--papier); font:400 15.5px/1.66 var(--serif); color:var(--encre); } .st-src{ margin:0 0 18px; font-size:13px; color:var(--encre-douce); } .st-src strong{ color:var(--encre); } .st-gap{ margin:10px 0 18px; padding:11px 14px; border-left:3px solid var(--ambre); background:var(--ambre-pale); font-size:14px; line-height:1.6; color:var(--ambre-texte); } .st-attention{ margin:12px 0 18px; padding:12px 15px; border:1px solid #E8D3A8; border-radius:8px; background:var(--ambre-pale); font-size:14px; line-height:1.62; color:var(--ambre-texte); } .st-chiffre{ margin:6px 0 4px; font:700 30px/1.1 var(--serif); color:var(--vert); } .st-tbl{ width:100%; border-collapse:collapse; margin:12px 0 8px; font-size:14.5px; } .st-tbl th{ text-align:left; padding:9px 10px; border-bottom:2px solid var(--brume); font:600 12px/1.3 var(--sans); letter-spacing:.4px; text-transform:uppercase; color:var(--encre-douce); } .st-tbl td{ padding:9px 10px; border-bottom:1px solid var(--brume); vertical-align:top; } .st-tbl td:nth-child(2){ white-space:nowrap; color:var(--bleu); } .st-tbl td:last-child{ font-size:13px; color:var(--encre-douce); } /* The list of every state, on the coverage page. */ .st-liste{ display:flex; flex-wrap:wrap; margin:14px 0 6px; padding:0; list-style:none; } .st-liste li{ flex:1 1 200px; margin:0 8px 8px 0; } .st-liste a{ display:block; padding:9px 12px; border:1px solid var(--brume); border-radius:7px; background:var(--blanc); text-decoration:none; color:var(--encre); font-size:14.5px; } .st-liste a:hover{ border-color:var(--bleu); } .st-liste .st-n{ display:block; font-size:12px; color:var(--encre-douce); margin-top:2px; } .st-liste .lu .st-n{ color:var(--vert); } /* ── Classes reprises telles quelles de la feuille quebecoise ── Le formulaire de compte (sign-in) reutilise le balisage eprouve du Quebec. Ces six classes manquaient cote US : sans elles la page se serait affichee sans mise en forme. Mesure du 27 aout 2026. */ /* ---------- Structure ---------- */ .contenant { max-width: 980px; margin: 0 auto; padding: 0 20px; } .carte { background: var(--blanc); border: 1px solid var(--brume); border-radius: 10px; padding: 24px; } .carte .numero { font-family: var(--serif); font-size: 1.6rem; color: var(--ambre-texte); display: block; margin-bottom: .2em; } .carte.offre { display: flex; flex-direction: column; } .carte.offre .prix { font-family: var(--serif); font-size: 2.1rem; color: var(--bleu); margin: .2em 0 .1em; } .carte.offre .prix small { font-size: 1rem; color: var(--encre-douce); font-family: var(--sans); } .carte.offre ul { margin: .8em 0 1.2em 1.2em; } .carte.offre ul li { margin: .35em 0; } .carte.offre .bouton { margin-top: auto; } .carte.vedette { border: 2px solid var(--bleu); position: relative; } .carte.vedette .badge { position: absolute; top: -13px; left: 20px; background: var(--bleu); color: var(--blanc); font-size: .78rem; font-weight: 700; padding: 3px 12px; border-radius: 20px; } /* ---------- Formulaires (paiement, contact) ---------- */ label.champ { display: block; margin: 14px 0 4px; font-weight: 600; font-size: .92rem; } label.champ .aide { display: block; font-weight: 400; font-size: .84rem; color: var(--encre-douce); } /* ── Barre de navigation organisée, reprise du site québécois ────────── Le site US avait une liste plate de neuf liens sans hiérarchie, et les sept guides par domaine étaient enterrés derrière un seul lien « Guides ». Ces règles sont celles du site canadien, reprises telles quelles pour que les deux barres se comportent pareil (survol, focus, clavier, Échap). */ nav.principale ul { list-style: none; display: flex; flex-wrap: nowrap; gap: 4px 8px; } /* LE CONTEXTE DE POSITIONNEMENT, PERDU A LA REPRISE. Le sous-menu est en position: absolute avec top:100%; left:0 -- ce qui n a de sens que si son parent est positionne. Les deux regles ci-dessous existent dans la feuille quebecoise (lignes 128 et 150) et n ont PAS ete reprises avec le reste du bloc : le menu s ouvrait donc, mais ancre au document et non au bouton, c est-a-dire en haut a gauche de la page, sous l en-tete. De la barre, cela se lit « rien n apparait », au survol comme au clic. La bande de survol .menu-declencheur::after est absolue elle aussi et a besoin du meme contexte, sinon le pont entre le bouton et le menu tombe ailleurs et le menu se referme des qu on descend vers lui. */ nav.principale .menu { position: relative; } nav.principale .menu-declencheur { position: relative; } nav.principale a { white-space: nowrap; text-decoration: none; color: var(--encre); font-size: .95rem; padding: 8px 2px; display: inline-block; } nav.principale a:hover { color: var(--bleu); text-decoration: underline; text-underline-offset: 4px; } nav.principale a { border-bottom: 2px solid transparent; } nav.principale .menu-declencheur { white-space: nowrap; font: inherit; font-size: .95rem; color: var(--encre); background: none; border: 0; padding: 8px 2px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; } nav.principale .menu-declencheur:hover { color: var(--bleu); } nav.principale .menu-declencheur { border-bottom: 2px solid transparent; } nav.principale .menu-declencheur[data-actif] { color: var(--bleu); font-weight: 600; border-bottom-color: var(--ambre); } nav.principale .menu-declencheur .fleche { font-size: .7em; transition: transform .15s ease; } nav.principale .menu:hover .fleche, nav.principale .menu[data-ouvert] .fleche { transform: rotate(180deg); } nav.principale .sous-menu { position: absolute; top: 100%; left: 0; z-index: 60; background: var(--blanc); border: 1px solid var(--brume); border-radius: 10px; box-shadow: 0 12px 30px rgba(31, 41, 51, .16); padding: 6px; min-width: 218px; list-style: none; /* marge visuelle SANS créer de trou de survol : une bordure transparente */ margin-top: 6px; border-top: 6px solid transparent; background-clip: padding-box; display: none; flex-direction: column; gap: 2px; } nav.principale .menu-declencheur::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; } nav.principale .menu:hover .sous-menu, nav.principale .menu:focus-within .sous-menu, nav.principale .menu[data-ouvert] .sous-menu { display: flex; } nav.principale .sous-menu li { margin: 0; } nav.principale .sous-menu a { display: block; padding: 9px 12px; border-radius: 7px; white-space: nowrap; color: var(--encre); font-size: .95rem; text-decoration: none; } nav.principale .sous-menu a:hover { background: var(--papier); color: var(--bleu); } nav.principale .sous-menu a[aria-current="page"] { color: var(--bleu); font-weight: 600; border-bottom: 0; } /* DOUBLON RETIRE (27 aout 2026). En reprenant le bloc nav.principale de la feuille quebecoise, je l ai ajoute PAR-DESSUS des regles que le site US avait deja : il en resultait deux jeux contradictoires, dont le second annulait le survol par « .menu:hover .sous-menu { display: none } ». Le menu s ouvrait donc au clic mais pas au survol, ce qui de l exterieur ressemble simplement a un menu casse. Mon controle cliquait, donc il passait ; personne ne survolait. Le comportement retenu est celui du premier jeu, plus haut : survol, focus clavier ET clic. Le clic reste indispensable au tactile, ou le survol n existe pas. */ nav.principale a, nav.principale .menu-declencheur { font-size: .95rem; } nav.principale ul { gap: 4px 9px; } nav.principale a, nav.principale .menu-declencheur { font-size: .9rem; } /* RETIREE : « nav.principale { width:100%; order:3 } » vivait dans la requete media du site quebecois et mon extraction l a posee au premier niveau. width:100% forcait la navigation a prendre toute la ligne, et order:3 la deplacait APRES le bloc de connexion : mesure, « Sign in » se retrouvait entre le logo et le menu. Elle est conservee, correctement bornee, plus bas. */ nav.principale ul { flex-wrap: wrap; justify-content: flex-start; gap: 4px 14px; } nav.principale ul { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } nav.principale ul::-webkit-scrollbar { display: none; } nav.principale li { flex: 0 0 auto; } /* Pastille verte de l'état connecté, comme dans l'application. */ nav.principale .pastille { display:inline-block; width:8px; height:8px; border-radius:50%; background:#16a34a; margin-right:7px; vertical-align:middle; flex-shrink:0; } nav.principale a.compte { font-weight:600; } /* ── En-tete sur UNE ligne, comme le site quebecois ─────────────────── Le site US posait le logo dans une simple enveloppe, donc la navigation tombait sur une DEUXIEME ligne sous la marque, et « Sign in » se noyait au milieu des autres liens. Le canadien met logo, navigation et actions sur une seule rangee, avec la connexion detachee a droite. Ces regles sont les siennes, reprises telles quelles pour que les deux barres se comportent pareil. */ .barre { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 10px 20px; } /* « Preuve en main » ne se coupe jamais en deux lignes */ /* Zone d'actions : toujours à droite, largeur stable, ne rétrécit pas. C'est ce qui garantit que le bouton de langue occupe la MÊME place en français et en anglais, quelle que soit la longueur des libellés du menu. */ .barre-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; } .barre-actions .lien-compte { white-space: nowrap; text-decoration: none; font-weight: 600; font-size: .92rem; color: var(--encre); border-bottom: 2px solid transparent; /* Signalé le 10 août : « Mon compte » touchait presque « À propos ». Le lien est SORTI du menu par site.js pour rejoindre la zone d'actions, mais rien ne le séparait visuellement du dernier élément de navigation. Une marge seule ne suffit pas — il faut une frontière lisible entre « ce qui est le site » et « ce qui est vous ». D'où le filet vertical. */ margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--brume); } /* Quand la personne est connectée, une pastille verte est dessinée EN ABSOLU à l'intérieur du lien (règle a.pem-connecte plus bas), et cette règle-là impose son propre padding-left en !important — qui écrasait le mien. Résultat : la pastille se retrouvait à 2 px du filet, lui-même à 6 px d'« À propos », et les deux se touchaient. Signalé deux fois avant que je regarde la bonne règle. Ici on reprend la main avec la même arme, et on réserve la place de la pastille EN PLUS de la séparation : 18 px de filet + 16 px pour le point. */ .barre-actions .lien-compte:hover { color: var(--bleu); border-bottom-color: var(--ambre); } /* Cette regle vivait dans « @media (max-width: 980px) » cote quebecois, et mon extraction l a sortie de sa requete media : appliquee a TOUTE largeur, elle forcait le retour a la ligne, donc le logo et la navigation restaient empiles exactement comme avant. Mesure : marque a y=64, navigation a y=120. Elle est remise sous son seuil. */ @media (max-width: 980px) { .barre { flex-wrap: wrap; } nav.principale { width: 100%; order: 3; } } /* Lien « Mon compte » en état connecté — mesuré au rendu le 10 août 2026. Rectification : j'avais d'abord écrit ici que les règles scopées « .barre-actions .lien-compte.pem-connecte » ne s'appliquaient à rien. C'EST FAUX, et la mesure l'a réfuté : site.js DÉPLACE le lien de nav.principale vers .barre-actions et lui ajoute .lien-compte avant le rendu (site.js l.146-152), donc ces règles s'appliquaient — elles gagnaient même la cascade (34 px mesurés, contre 14 px demandés par a.pem-connecte). Pire : en élargissant la zone du compte de 16 px et en poussant la pastille de left:2px à left:16px, elles ont DÉPLACÉ LE POINT SUR LE TEXTE. Aucun réglage de padding ne pouvait corriger ce défaut. MAIS la vraie cause était ailleurs, et mesurée : l'en-tête demande 992 px (marque 211 + menu 550 + actions 191 + 2 écarts) pour 940 px utiles, et les points de rupture réagissent à la FENÊTRE, jamais au conteneur figé à 980 px — le menu débordait donc sous la zone du compte à TOUTE largeur de bureau. Récupéré les 52 px manquants : écart du menu 12→9 px, corps .98→.95 rem, séparation du compte resserrée. Vérifié au rendu, site.js exécuté (le lien est DÉPLACÉ du menu vers .barre-actions au chargement). Second passage : il restait 11 px de débordement, invisibles parce qu'ils tombaient dans l'écart de 20 px — mais 9 px de marge seulement, donc le moindre libellé rallongé (un domaine de plus, un prénom affiché) aurait ramené le même défaut. Écarts resserrés jusqu'à un débordement MESURÉ À ZÉRO, de 981 px à 1500 px. Sous 980, la barre s'empile. */ a.pem-connecte { margin-left: 10px !important; padding-left: 18px !important; border-left: 1px solid var(--brume); } /* Le bloc de pays est descendu du bandeau clair vers le PIED, qui est bleu nuit. Ses couleurs avaient ete choisies pour un fond blanc : mesure au rendu, .region-txt tombait a 1.86:1 sur rgb(22,44,73). C'est exactement le piege que le commentaire de la ligne 388 enregistre deja pour footer.site p, refait une fois de plus en deplaçant un bloc sans verifier le fond qui l'accueille. Les valeurs reprennent celles que le pied utilise deja pour son propre texte. */ footer.site .region-txt{color:#DCE6F2} footer.site .region-txt a{color:#FFFFFF;text-decoration-color:var(--ambre)} footer.site .region-ici{color:#0F2440;background:#C9D8EA;border-color:#C9D8EA} /* Les trois etapes de la page d accueil. Trois colonnes qui se replient en une seule sous 760 px : sur un telephone, trois colonnes de texte deviennent trois colonnes illisibles. */ .etapes { display:flex; gap:20px; margin:18px 0 14px; flex-wrap:wrap; } .etape { flex:1 1 220px; min-width:0; } .etape h3 { margin:0 0 6px; font-size:1.02rem; color:var(--bleu); } .etape p { margin:0; } @media (max-width:760px){ .etapes { flex-direction:column; gap:14px; } } /* Les sept domaines : des pastilles, pas une liste a puces. Elles se replient d elles-memes, donc rien a prevoir pour le telephone. */ .domaines { list-style:none; padding:0; margin:14px 0 10px; display:flex; flex-wrap:wrap; gap:8px; } .domaines li { margin:0; } .domaines a { display:inline-block; padding:7px 13px; border:1px solid var(--bord,#d8dde6); border-radius:999px; text-decoration:none; font-size:.94rem; } .domaines a:hover, .domaines a:focus { border-color:var(--bleu,#1f4f8f); } /* ALIGNEMENT DU DECLENCHEUR « Areas » — signale par le proprietaire le 2 septembre 2026 (« not aligned with the other words in the navbar »), et mesure sur la page en ligne : les liens voisins font 15.2 px de police, 35.8 px de haut, 4px 0 de marge interne ; le bouton faisait 14.4 px, 44 px de haut, 8px 2px. Un