/* ╔══════════════════════════════════════════════════════════════════════════╗ ║ palette-turquoise.css · 2026-08-23 · D-102 ║ ╚══════════════════════════════════════════════════════════════════════════╝ ⛔ COPIE DE `palette-ciel.css`, DONT SEULES LES VALEURS CHANGENT. L'original n'est pas touche : il suffit de reprendre son pour revenir en arriere. Gary, 23/08 : « Pour le triptyque, il faudra refaire les couleurs. Moi je garderais les couleurs du triptyque, je les trouve un peu plus fun. » · « Pour la couleur, j'aimerais bien que tu prennes la couleur qu'il y a sur le quiz. » ⛔ C'est l'INVERSE de ce que le dossier preparait : le board du 22/08 posait la question comme « repeindre le triptyque en Ciel ». C'est la HOME qui prend les couleurs du quiz. `D-74` (« Ciel ») est annulee. ⛔ TROIS JETONS VIENNENT DU TRIPTYQUE AU HEXADECIMAL PRES, les autres sont DERIVES de sa teinte — le triptyque n'a que six jetons, cette page en demande douze. Rien n'est invente : `--pale`, `--mi` et `--fonce` sont des points de l'echelle entre `--encre` et `--clair`. --encre #003035 ⛜ du triptyque --clair #98d7df ⛜ du triptyque --action #f28a6b ⛜ du triptyque --blanc #ffffff ⛜ identique ⛔ DEUX VALEURS ONT ETE CORRIGEES PARCE QUE LA MESURE LES REFUSAIT, et c'est la raison d'etre de ce commentaire : · `--mi` a 62 % de l'echelle donnait **4,38:1** pour l'encre — sous la barre de 4,5. Deplace a 64 % : **4,56:1**. C'est la nappe la plus difficile de la page, et elle porte du texte. · le corail brut sur `--fonce` donnait **2,82:1**, tres insuffisant. Sur les bandes sombres l'accent est donc eclairci (`--action-sombre` #f9c7b8, **4,53:1**), comme « Ciel » le faisait deja avec le sien. ⚠️ CES CHIFFRES SONT CALCULES SUR LES VALEURS DECLAREES. La mesure qui fait foi est celle des PIXELS RENDUS, et elle est faite juste apres la pose. `D-52` l'annoncait : « tout le contraste sera a remesurer ». */ /* ============================================================================ PALETTE « Ciel » — bleu ciel Generee par _gen/construire.mjs le 2026-08-14. Ne pas editer a la main. ⛔ CETTE FEUILLE NE FAIT QUE REDEFINIR DES JETONS. Elle se charge APRES home.css, au meme niveau de specificite (:root), donc elle gagne. Aucune mise en page, aucune taille de texte, aucune police n'est touchee. Le ciel de fin de journee. Bleu, mais un bleu qu'on a envie de regarder. ── LES CINQ ROLES ── nappe A (claire) #c8ddea nappe B (sombre) #324a5d encre #0f2433 action #a9511e / #ebb08e (claire, pour les bandes sombres) filets #324a5d sur fond clair · #c8ddea sur fond sombre ── LES DEUX VALEURS DERIVEES (meme teinte que la nappe A) ── pale #e9f1f7 mi #a3bfd1 ── CONTRASTES MESURES (WCAG 2.x, sRGB) ── encre / nappe A (clair) 11.35:1 OK encre / pale 13.93:1 OK encre / mi 8.28:1 OK encre / blanc 15.9:1 OK blanc / nappe B (fonce) 9.24:1 OK nappe A / nappe B (filet) 6.59:1 OK blanc / encre 15.9:1 OK ⛔ encre / nappe B (INTERDIT) 1.72:1 OK texte sur action 5.41:1 OK action / nappe A 3.86:1 OK action claire / nappe B 4.9:1 OK action claire / encre 8.43:1 OK encre / action claire 8.43:1 OK action / blanc 5.41:1 OK filet clair / nappe A 6.59:1 OK filet clair / pale 8.09:1 OK filet clair / mi 4.81:1 OK filet clair / blanc 9.24:1 OK filet sombre / nappe B 6.59:1 OK filet sombre / encre 11.35:1 OK masque illu / nappe B 8.09:1 OK ============================================================================ */ :root { /* D133 — rayon commun des CTA des trois pages principales, 09/09/2026. */ --rayon-cta: 5px; --pale: #d1edf1; --clair: #98d7df; --mi: #619ba2; --fonce: #2e6268; --encre: #003035; --blanc: #ffffff; --ciel: var(--clair); --action: #f28a6b; --sur-action: #003035; --action-sombre: #f9c7b8; --sur-action-sombre: #003035; --corail: var(--action); --filet-clair: #2e6268; --filet-sombre: #98d7df; --focus: #003035; --focus-sombre: #ffffff; } /* ⛔ LE SEUL AJOUT NON-JETON, ET IL EST IDENTIQUE SUR LES SEPT PALETTES. Sans lui, le role « action » n'existerait que sur le papier : la page pose ses boutons en .action--encre, donc la couleur d'action ne peindrait rien et on comparerait six palettes a quatre roles. Sur les palettes dont l'action EST l'encre, cette regle ne change rien du tout. */ .action--encre { background: var(--action); color: var(--sur-action); border-color: var(--action); } .action--encre:hover { background: var(--encre); color: var(--blanc); border-color: var(--encre); } /* le second bouton de la page, celui du parcours, est en .action--ligne : il porte la MEME action. Sans ca, la page n'aurait qu'un seul bouton colore. */ .action--ligne { background: var(--action); color: var(--sur-action); border-color: var(--action); } .action--ligne:hover { background: var(--encre); color: var(--blanc); border-color: var(--encre); } /* la barre d'en-tete porte le seul bouton plein du site, et home.css la vise avec une specificite de deux classes (.entete .action--encre) : il faut la meme. */ /* ⛔ CORRIGE LE 23/08 AU SOIR. Gary : « en haut a droite je vois "Reserver la date de mon operation" encore en ROSE PALE, alors que normalement c'etait ORANGE. » Cette regle donnait a l'en-tete l'action ECLAIRCIE (#f9c7b8), calculee pour tenir sur les bandes sombres de la page. Puis la page est passee au fond unique clair, et l'en-tete est reste son seul objet sombre : il portait un accent regle pour un contexte disparu. ⛔ Le corail plein y tient mieux, et c'est mesure : encre sur corail **5,85:1** (contre 9,42 pour le rose pale — plus contraste, mais delave). */ .entete .action--encre { background: var(--action); color: var(--sur-action); border-color: var(--action); } .entete .action--encre:hover { background: var(--blanc); color: var(--encre); border-color: var(--blanc); } /* ⛔ SUR LES BANDES SOMBRES, L'ACTION PASSE A SA VALEUR CLAIRE. Meme teinte, autre valeur. C'est la seule facon que le role « action » soit VISIBLE sur cette page : ses deux boutons sont tous les deux sur des bandes sombres. */ .bande--fonce .action--encre, .bande--encre .action--encre, .pied .action--encre, .bande--fonce .action--ligne, .bande--encre .action--ligne, .pied .action--ligne { background: var(--action-sombre); color: var(--sur-action-sombre); border-color: var(--action-sombre); } .bande--fonce .action--encre:hover, .bande--encre .action--encre:hover, .pied .action--encre:hover, .bande--fonce .action--ligne:hover, .bande--encre .action--ligne:hover, .pied .action--ligne:hover { background: var(--blanc); color: var(--encre); border-color: var(--blanc); } /* le masque d'illustration sur la bande sombre etait ecrit EN DUR en creme (home.css l. 1128, #f2ede4). Sur une palette froide, un creme est une septieme couleur qui n'appartient a personne. Il lit le jeton. */ .bande--fonce .hm-illu__masque { background-color: var(--pale); } /* ══════════════════════════════════════════════════════════════════════════ 2026-08-21 · D-88 · LE SECOND BOUTON PLEIN TOMBE ══════════════════════════════════════════════════════════════════════════ Un seul bouton plein sur tout le site (mesure Elevate, SPEC § 5A). L'élu est celui de l'en-tete. Celui du pied — « Prendre rendez-vous », la SEULE porte reellement branchee du site — reste un lien parfaitement visible et cliquable, avec sa cible de 44 px : il passe du plein au cercle. corrige `.pied .action--ligne` (0,2,0) l. 95 -> meme specificite, ordre. */ .pied .action--ligne { background: transparent; color: var(--action-sombre); border-color: var(--action-sombre); } .pied .action--ligne:hover, .pied .action--ligne:focus-visible { background: var(--action-sombre); color: var(--sur-action-sombre); border-color: var(--action-sombre); } /* le repli et son volet suivent la bande a l'encre de l'en-tete */ .entete__volet { background: var(--encre); color: var(--blanc); } /* ⛔ L'appel du volet est CERCLE : le seul bouton plein du site est celui de la rangee. Il garde sa cible de 44 px et sa pleine largeur. */ .entete__volet .action--ligne { background: transparent; color: var(--action-sombre); border-color: var(--action-sombre); } .entete__volet .action--ligne:hover, .entete__volet .action--ligne:focus-visible { background: var(--action-sombre); color: var(--sur-action-sombre); border-color: var(--action-sombre); }