/* ========================================================================= SNAPLINE - PAGES DOCUMENTAIRES ------------------------------------------------------------------------- A propos, mentions legales, conditions d'utilisation, donnees personnelles. Cette feuille vient APRES styles.css et n'en redefinit rien : elle ne fait qu'ajouter la mise en page d'un document lu de haut en bas. Toutes les couleurs, la typo et la gouttiere (.wrap) viennent de styles.css - une page legale qui ne ressemblerait pas au site aurait l'air d'un document etranger colle dessus, ce qui est exactement l'inverse de l'effet recherche. ========================================================================= */ /* ------------------------------ En-tete -------------------------------- */ /* L'en-tete des pages documentaires est PLUS PETIT que celui de l'accueil : ici le titre du site n'est plus le sujet, c'est un chemin de retour. */ .doc-header { padding: clamp(1.1rem, 2.6vw, 1.9rem) 0 1.1rem; border-bottom: 1px solid var(--rule); } .doc-header .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .doc-home { font-family: var(--display); font-stretch: 118%; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(1.15rem, 2.6vw, 1.5rem); color: var(--paper); text-decoration: none; line-height: 1; } .doc-home:hover { color: var(--brand); } .doc-back { font-size: .82rem; color: var(--text-dim); text-decoration: none; font-stretch: 112%; } .doc-back:hover { color: var(--brand); } /* ---------------------------- Barre d'onglets --------------------------- */ /* Les quatre documents se repondent : depuis n'importe lequel on atteint les trois autres. Sans cette barre, chaque page serait un cul-de-sac dont on ne sort qu'en revenant a l'accueil. */ .doc-nav { border-bottom: 1px solid var(--rule); padding: .7rem 0; } .doc-nav .wrap { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; } .doc-nav a { font-family: var(--display); font-stretch: 112%; font-weight: 600; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); text-decoration: none; padding: .38rem .72rem; border: 1px solid transparent; border-radius: var(--r-pill); line-height: 1.4; } .doc-nav a:hover { color: var(--text); border-color: var(--rule); } .doc-nav a[aria-current="page"] { color: var(--brand); border-color: var(--brand); } /* ------------------------------ Le document ----------------------------- */ .doc { flex: 1 0 auto; padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 4.5rem); } /* ⚠️ LA LARGEUR DE LECTURE NE DEPEND PAS DE LA GOUTTIERE DU SITE. Le site est une mosaique large ; un texte de loi lu sur 1320 px est illisible. On borne a 72ch, comme le synopsis de la fiche. */ .doc-body { width: min(72ch, 100% - 1.75rem); margin-inline: auto; } .doc-eyebrow { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brand); margin: 0 0 .7rem; } .doc-title { font-family: var(--display); font-stretch: 118%; font-weight: 800; font-size: clamp(1.9rem, 5.2vw, 3rem); line-height: 1.04; letter-spacing: -.01em; margin: 0 0 .9rem; color: var(--paper); text-wrap: balance; } /* ⚠️ LES QUATRE PAGES SONT DU TEXTE QU'ON LIT, PAS UNE INTERFACE (V44). C'est meme l'endroit du site ou l'appariement se justifie le plus : des CGU et une politique de confidentialite sont de la prose longue, lue ligne a ligne sur 72ch. Les TITRES restent a Archivo - un titre se repere - et c'est le contraste des deux voix qui structure la page, la ou une seule grotesque donnait un document de specification. */ .doc-lede, .doc-body p, .doc-body li, .doc-body dd { font-family: var(--read); font-weight: 400; letter-spacing: .004em; } .doc-lede { font-size: 1.04rem; line-height: 1.62; color: var(--text-dim); margin: 0 0 .6rem; } .doc-date { font-size: .76rem; color: var(--text-dim); opacity: .8; margin: 0 0 2.4rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--rule); } .doc-body h2 { font-family: var(--display); font-stretch: 114%; font-weight: 750; font-size: 1.28rem; line-height: 1.25; letter-spacing: -.004em; color: var(--paper); margin: 2.6rem 0 .85rem; text-wrap: balance; } .doc-body h2:first-of-type { margin-top: 0; } .doc-body h3 { font-family: var(--display); font-stretch: 110%; font-weight: 700; font-size: 1rem; color: var(--text); margin: 1.7rem 0 .5rem; } .doc-body p { margin: 0 0 .95rem; line-height: 1.68; color: var(--text-dim); } .doc-body p strong, .doc-body li strong { color: var(--text); font-weight: 600; } /* ⚠️⚠️ V280 - LE BOUTON EST EXCLU DE LA COULEUR DE LIEN, ET C EST LE PIEGE Nº 2 EN PRODUCTION DEPUIS QUE `.doc-action` EXISTE. Cette regle fait (0,1,1) ; `.doc-action` fait (0,1,0). Elle gagnait donc TOUJOURS, et le bouton se peignait `--brand` SUR un fond `--brand` : du rouge sur du rouge, contraste 1:1, TEXTE INVISIBLE. Mesure : color et background-color rendaient tous les deux rgb(226, 54, 54). ⚠️ CE N EST PAS UNE FAUTE DE COULEUR, C EST UNE FAUTE DE SPECIFICITE : la teinte juste etait ECRITE dans `.doc-action` (`var(--ink)`) et n arrivait jamais. « Une regle qui ne gagne que par ORDRE DE SOURCE ne gagne pas, elle attend » - ici elle n attendait meme pas, elle perdait. ⚠️⚠️ ET C ETAIT VISIBLE EN LIGNE : le bouton « Revenir sur mes choix » de `confidentialite.html` - le SEUL chemin de cette page vers la banniere de consentement - etait un pave rouge sans texte lisible. ⚠️ ON EXCLUT PLUTOT QUE DE SURENCHERIR : `.doc-body a.doc-action` aurait ajoute une regle pour DEFAIRE une regle, et aurait laisse le bouton sans couleur hors de `.doc-body`. La couleur de LIEN n avait rien a faire sur un BOUTON : on ne la pose pas la. (« On ne defait pas des regles, on ne les pose pas », regle de la carte de destination.) */ .doc-body a:not(.doc-action) { color: var(--brand); } .doc-body a:not(.doc-action):hover { color: var(--paper); } .doc-body ul, .doc-body ol { margin: 0 0 1.1rem; padding-left: 0; } .doc-body ul { list-style: none; } .doc-body ul li { position: relative; padding-left: 1.15rem; margin-bottom: .5rem; line-height: 1.65; color: var(--text-dim); } .doc-body ul li::before { content: ""; position: absolute; left: .1rem; top: .68em; width: 5px; height: 5px; background: var(--brand); opacity: .75; } .doc-body ol { padding-left: 1.3rem; } .doc-body ol li { margin-bottom: .5rem; line-height: 1.65; color: var(--text-dim); } /* --------------------------- Blocs particuliers ------------------------- */ /* Un encadre pour ce qui doit etre lu meme en diagonale : la clause de non-affiliation, l'avertissement sur les spoilers, la ligne "aucun compte". */ /* ⚠️⚠️ V338 - LE LISERE LATERAL DE 3 px EST PARTI, ET C EST UNE REGLE DE CHARTE, PAS UN GOUT. Une bordure coloree epaisse sur un seul cote d un encadre est le tic le plus reconnaissable des interfaces fabriquees a la chaine ; la charte du Visuel_B dit que ce qui distingue une surface est sa CLARTE et son filet, jamais un onglet colle sur son flanc. ⚠️ LA COULEUR NE SE PERD PAS, ELLE CHANGE DE PORTEUR : le filet entier prend la teinte, en sourdine, et le fond la reprend a 6 % - donc l encadre reste lisible comme « rouge » (general) ou « vert » (Doomsday), et ses quatre coins sont enfin arrondis pareil. */ .doc-callout { --callout: var(--brand); border: 1px solid color-mix(in srgb, var(--callout) 45%, var(--rule)); background: color-mix(in srgb, var(--callout) 6%, var(--panel)); padding: 1rem 1.2rem; margin: 1.5rem 0; border-radius: var(--r-2); } .doc-callout p:last-child { margin-bottom: 0; } .doc-callout--doom { --callout: var(--doom); } /* ⚠️ V355 - LA TROISIEME TEINTE PASSE PAR LE MEME JETON, jamais par une regle a elle : c est ce que la V338 a gagne en faisant CHANGER LA COULEUR DE PORTEUR. Un encadre d avertissement est le seul qui doive arreter l oeil, et `--tier-reco` est deja la teinte de ce qui alerte sur ce site (le panneau *Signaler*, V258). */ .doc-callout--warn { --callout: var(--tier-reco); } /* A COMPLETER : ce qui manque doit se VOIR. Un gabarit juridique livre avec des blancs invisibles finit en ligne avec ses blancs. */ .doc-todo { display: inline-block; font-family: var(--display); font-stretch: 108%; font-weight: 700; font-size: .74rem; letter-spacing: .05em; /* V334 - les deux valeurs se DERIVENT du jeton de statut au lieu d etre recopiees : elles suivront la charte au lieu de vieillir a cote d elle. */ color: color-mix(in srgb, var(--tier-reco) 62%, #FFFFFF); background: color-mix(in srgb, var(--tier-reco) 12%, transparent); border: 1px dashed var(--tier-reco); padding: .1rem .45rem; border-radius: var(--r-1); } /* Tableau de donnees : meme grammaire que les tableaux de la fiche. */ .doc-table-wrap { overflow-x: auto; margin: 1.2rem 0 1.5rem; border: 1px solid var(--rule); border-radius: var(--r-2); } .doc-table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: .86rem; } .doc-table th, .doc-table td { text-align: left; padding: .6rem .85rem; border-bottom: 1px solid var(--rule); vertical-align: top; } /* ⚠️ V338 - LE TROISIEME JUMEAU DU PLANCHER DE 11 px (V279, V287). Les en-tetes de colonne se LISENT pour comprendre le tableau : c est du texte FONCTIONNEL, donc le second plancher, pas celui des etiquettes. Mesure : .68rem = 10,88 px - au-dessus du plancher de la V230 (10,5) et SOUS celui de 11. « Un plancher se franchit, il ne se frole pas » : .69rem = 11,04 px, la meme valeur que .footer-nav a et .doc-nav a. */ .doc-table th { font-family: var(--display); font-stretch: 108%; font-weight: 700; font-size: .69rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); background: var(--panel-2); } .doc-table td { color: var(--text-dim); line-height: 1.55; } .doc-table tbody tr:last-child th, .doc-table tbody tr:last-child td { border-bottom: none; } .doc-table code { color: var(--text); } .doc-body code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .86em; background: var(--panel-2); color: var(--text); padding: .08em .35em; border-radius: var(--r-1); } /* Le bouton qui rouvre la banniere de consentement. Il vit dans le corps du texte de la page Donnees, pas seulement en pied de page : c'est la que la question se pose. */ .doc-action { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: .82rem; letter-spacing: .04em; color: var(--ink); background: var(--brand); border: 0; padding: .6rem 1.1rem; border-radius: var(--r-pill); cursor: pointer; margin: .4rem 0 1.2rem; } .doc-action:hover { background: var(--paper); } /* ⚠️ V495 - LES RACCOURCIS CLAVIER, AU BAS DU GUIDE. Ce n est pas une commande du guide (celle-la, c est « C est parti ») : c est une porte vers une autre aide, donc elle se lit comme un lien et non comme un bouton. */ .tuto-clavier { margin: .1rem 0 .9rem; text-align: center; } .tuto-clavier button { appearance: none; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; min-height: 34px; padding: .25rem .6rem; font-family: var(--display); font-stretch: 110%; font-weight: 600; font-size: .69rem; color: var(--text-dim); text-decoration: underline; } .tuto-clavier button:hover { color: var(--brand); } /* ------------------------------ Pied de page ---------------------------- */ /* La bande de liens du pied de page, commune a toutes les pages y compris l'accueil. Elle REMPLACE la phrase "MVP - Road to Avengers" qui n'etait plus vraie depuis cinq routes. */ .footer-nav { display: flex; flex-wrap: wrap; gap: .3rem .2rem; align-items: center; justify-content: center; margin: 0 0 .9rem; } /* ⚠️ V495 - DEUX GROUPES, UN SEUL BLOC A L OEIL. Le groupe du site et le groupe legal sont deux