/* La section 5 de l'accueil (#tarifs) : le tableau des offres, repris TEL QUEL du prototype publié (tableau-offres, version 21, 1792806679-617d, md5 00474e8c) ; règles portées sous #tarifs (§ 2.7 du plan v2.1) ; bandeau, cadre d'essai, noms courts et règles de la page retirés (commun.css). Piste E seule (décision d'Alex n° 22 du 22/10) : des cartes courtes, deux encarts, le détail en tableau. Charte AXIOM, clair. */ #tarifs :is(.btn, .lien):focus-visible { outline: 2px solid var(--bleu-plan); outline-offset: 2px; } #tarifs { --entre-sections: 64px; } /* espace.9 : 96 px entre deux sections, 64 au téléphone (comme #produit, #questions, #contact) */ @media (min-width: 744px) { #tarifs { --entre-sections: 96px; } } /* la tablette dès 744 px (décision n° 34 d'Alex) */ #tarifs { margin-top: var(--entre-sections); --haut-colle: calc(var(--barre) + 1px + env(safe-area-inset-top, 0px)); } /* l'en-tête du détail se colle SOUS la barre collée du site (bord bas : sa hauteur, son filet) */ #tarifs h2 { margin: 0; font-size: 40px; line-height: 1.15; font-weight: 400; letter-spacing: -0.03em; text-wrap: balance; } #tarifs .appui { margin: 16px 0 0; font-size: 18px; color: var(--encre-2); } #tarifs .rendu { margin-top: 48px; } #tarifs .mentions { margin-top: 32px; display: grid; gap: 4px; font-size: 15px; color: var(--encre-2); max-width: 860px; } #tarifs .mention-depassement { margin: 0; } /* la phrase du dépassement, posée en tête des mentions par le script */ #tarifs .btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; background: var(--encre); color: var(--feuille); border: 0; border-radius: 6px; font: inherit; font-size: 16px; font-weight: 500; text-decoration: none; } #tarifs .lien { position: relative; color: var(--encre); text-underline-offset: 3px; font-size: 16px; } /* un lien seul (« Écrivez-nous ») : 44 px de cible au moins sans toucher à sa ligne, comme dans les sections 6-7 : une zone invisible qui déborde de 12 px en haut et en bas, et de 4 px sur les côtés */ #tarifs .lien::after { content: ''; position: absolute; inset: -12px -4px; } #tarifs .num { font-variant-numeric: tabular-nums; } /* Le tableau du détail (règles de base, reprises du tableau de la v1.4) */ #tarifs .tableau-boite { overflow-x: auto; } #tarifs table { width: 100%; min-width: 760px; border-collapse: collapse; font-variant-numeric: tabular-nums; } #tarifs th, #tarifs td { text-align: left; vertical-align: top; padding: 12px; border-bottom: 1px solid var(--grille); font-size: 16px; line-height: 1.5; } #tarifs thead th { border-bottom: 0; padding-top: 0; } #tarifs thead td { border-bottom: 0; } #tarifs thead tr:last-child > * { border-bottom: 1px solid var(--grille); } /* un filet sous tout l'en-tête, case du coin comprise */ #tarifs th[scope="row"] { font-weight: 400; color: var(--encre-2); padding-left: 0; width: 22%; } #tarifs tbody th[scope="rowgroup"] { padding: 32px 0 8px; font-size: 13px; font-weight: 500; color: var(--encre-3); } #tarifs .petit { font-size: 15px; color: var(--encre-3); } #tarifs .col-choisie { background: var(--brume); } #tarifs th.col-choisie { box-shadow: inset 0 3px 0 var(--bleu-plan); } /* Les cartes (sur la base des cartouches de l'ancienne piste B) */ #tarifs .cartouches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(13, auto); column-gap: 16px; } #tarifs .cartouche { grid-row: 1 / span 13; display: grid; grid-template-rows: subgrid; border: 1px solid var(--encre); border-radius: 8px; background: var(--feuille); min-width: 0; overflow: hidden; } #tarifs .cartouche > div { padding: 12px 16px; border-top: 1px solid var(--grille); min-width: 0; } #tarifs .cartouche > div:first-child { border-top: 0; padding-top: 16px; } #tarifs .titre-offre { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } /* « Recommandé » en étiquette de la charte : 26 px, coins de 4 px, sur blanc bordé ; centrée sur la ligne du h3 (32 px), qu'elle ferait grandir de 1 px alignée sur la ligne de base */ #tarifs .marque-offre { align-self: center; display: inline-flex; align-items: center; height: 26px; padding: 0 8px; border: 1px solid var(--grille); border-radius: 4px; background: var(--feuille); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--encre); white-space: nowrap; } /* au téléphone seulement (plus bas, n° 7 du 23/10) : le résumé d'une offre repliée (son prix, en annuel « payé d'avance », ses palettes) et « Détail », qui l'ouvre ; ailleurs, la carte entière */ #tarifs .cartouche :is(.resume-prix, .resume-an, .resume) { display: none; } #tarifs .cartouche > .entete { background: var(--papier); border-bottom: 1px solid var(--encre); } #tarifs .cartouche > .entete + div { border-top: 0; } #tarifs .cartouche h3 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 500; } #tarifs .cartouche .phrase { margin: 4px 0 0; font-size: 15px; color: var(--encre-3); } #tarifs .case .lib { display: block; font-size: 13px; line-height: 18px; color: var(--encre-3); } #tarifs .case .val { display: block; font-size: 16px; line-height: 1.45; } #tarifs .case .val.gros { font-size: 28px; line-height: 36px; } #tarifs .case .val .accessoire { font-size: 15px; line-height: 1; color: var(--encre-2); } /* sans quoi la ligne du prix passe de 36 à 40 px */ /* Cartes courtes, options à part, détail en tableau (ancienne piste D, 16/10, que E reprend) */ #tarifs .reglages { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px 48px; margin-bottom: 32px; } #tarifs .volume { flex: 1 1 420px; max-width: 640px; min-width: 0; } #tarifs .volume label { display: block; font-size: 15px; font-weight: 500; } #tarifs .volume .tete-volume { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; } #tarifs .volume input[type="range"] { display: block; width: 100%; height: 44px; margin: 4px 0 0; accent-color: var(--bleu-plan); cursor: pointer; } #tarifs .volume input[type="range"]:focus-visible { outline: 2px solid var(--bleu-plan); outline-offset: 2px; } #tarifs .volume output { margin-left: auto; font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } /* la réponse du curseur (« À 1 500 palettes par mois : Pro, … ») et, dessous, la phrase « Le volume ne décide pas seul… » : 16 px, interligne 1,5, toutes deux (décisions d'Alex n° 8 et 21 du 22/10) */ #tarifs .conseil { margin: 4px 0 0; font-size: 16px; line-height: 1.5; color: var(--encre-2); } #tarifs .conseil strong { font-weight: 500; color: var(--encre); } #tarifs .conseil small { display: block; margin-top: 2px; font-size: 16px; line-height: 1.5; color: var(--encre-3); } #tarifs .facturation { margin: 0; padding: 0; border: 0; min-width: 0; } #tarifs .facturation legend { padding: 0; margin-bottom: 4px; font-size: 15px; font-weight: 500; } #tarifs .bascule { display: inline-flex; padding: 3px; border: 1px solid var(--filet); border-radius: 8px; background: var(--feuille); } #tarifs .bascule label { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 6px; font-size: 15px; color: var(--encre-2); cursor: pointer; } #tarifs .bascule input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; } #tarifs .bascule label:has(input:checked) { background: var(--calque); color: var(--encre); font-weight: 500; box-shadow: inset 0 0 0 1px var(--bleu-plan); } #tarifs .bascule label:has(input:focus-visible) { outline: 2px solid var(--bleu-plan); outline-offset: 2px; } #tarifs .remise { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border: 1px solid var(--grille); border-radius: 4px; background: var(--feuille); font-size: 13px; line-height: 1; font-weight: 500; color: var(--encre); } #tarifs .cartouches.courtes { grid-template-rows: repeat(5, auto); position: relative; } #tarifs .cartouches.courtes .cartouche { grid-row: 1 / span 5; transition: border-color 300ms cubic-bezier(0.2, 0, 0, 1); } #tarifs .cartouches.courtes .cartouche.choisie { border-color: var(--bleu-plan); } #tarifs .cartouches.courtes .cartouche > .entete { transition: background-color 300ms cubic-bezier(0.2, 0, 0, 1); } /* l'offre que le curseur de volume désigne : un cadre bleu plan, avec « Recommandé », qui glisse d'une carte à l'autre (jeton « moyen », courbe standard) ; l'en-tête passe au calque, le bord de la carte au bleu et le bouton devient le seul bouton plein des cartes, au même rythme. Le cadre est posé dans la case de grille de l'offre : le même rectangle que la carte, arrondi au pixel de la même façon, son trait de 2 px SUR le bord de la carte (un trait, pas deux : décalé d'un pixel à l'intérieur du bord, il laissait voir le bord encre à côté du bleu) */ #tarifs .cadre-choix { position: absolute; inset: 0; grid-row: 1 / span 5; z-index: 2; pointer-events: none; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--bleu-plan); } /* sa case : celle de l'offre choisie (data-offre, posé par poserCadre), qui dépend de la disposition des cartes (une rangée de quatre, deux rangées de deux en tablette tenue debout, une colonne au téléphone tenu debout, deux tenu en paysage) ; « span 1 » : la fin « auto » d'un élément positionné serait le bord de la grille */ #tarifs .cadre-choix[data-offre="0"] { grid-column: 1 / span 1; } #tarifs .cadre-choix[data-offre="1"] { grid-column: 2 / span 1; } #tarifs .cadre-choix[data-offre="2"] { grid-column: 3 / span 1; } #tarifs .cadre-choix[data-offre="3"] { grid-column: 4 / span 1; } /* « Recommandé » épinglé sur le bord haut du cadre, qu'il chevauche : il voyage avec lui et ne touche jamais le nom d'une offre (dans la ligne du titre, il mordait sur « Enterprise » de 1 024 à 1 100 px) */ #tarifs .cadre-choix .marque-offre { position: absolute; top: -12px; right: 16px; } /* centrée sur le trait de 2 px */ /* en couleurs forcées (contraste élevé), l'ombre du cadre disparaît : un contour de 2 px à sa place exacte (à l'intérieur du cadre), en Highlight, la couleur système d'un élément sélectionné, distincte du texte et du bord des cartes ; un contour ne prend aucune place (un bord aurait décalé « Recommandé » de 2 px). Décision d'Alex n° 26 du 22/10 */ @media (forced-colors: active) { #tarifs .cadre-choix { outline: 2px solid Highlight; outline-offset: -2px; } } /* les boutons des cartes : le fond, le texte et le trait (plein ↔ bordé, le changement d'offre) en 300 ms ; la teinte du survol à part, dans sa propre couche (--s5-survol, une couleur peinte en dégradé uni au-dessus du fond), avec sa propre durée : une transition prend la durée du style d'arrivée, et la sortie du survol arrive au même style que le changement d'offre (décision d'Alex n° 2 du 23/10). La couche n'existe qu'au survol et pendant sa sortie : posée dès l'entrée, retirée 70 ms après le départ de la souris (allow-discrete), quand sa teinte est revenue à rien (le mot posé à part, par transition-behavior : écrit dans le raccourci, un moteur qui ne le connaît pas jetterait toute la transition des boutons ; là, il ne perd que cette ligne, et la couche part d'un coup) ; au repos, rien de plus n'est peint (même transparente, elle changeait le dessin des coins des boutons : mesuré le 23/10). En couleurs forcées, Chromium retire ce dégradé de lui-même (mesuré le 23/10) */ @property --s5-survol { syntax: ''; inherits: false; initial-value: transparent; } #tarifs .cartouches.courtes .btn { transition: background-color 300ms cubic-bezier(0.2, 0, 0, 1), color 300ms cubic-bezier(0.2, 0, 0, 1), box-shadow 300ms cubic-bezier(0.2, 0, 0, 1), --s5-survol 70ms cubic-bezier(0.3, 0, 1, 1), background-image 0s 70ms; transition-behavior: normal, normal, normal, normal, allow-discrete; } #tarifs .cartouche.choisie > .entete { background: var(--calque); } #tarifs .cartouche.choisie .phrase { color: var(--encre-2); } /* sur le calque, le texte discret passe en secondaire : 7,36:1 (charte, contrôle 5) */ #tarifs .matrice th, #tarifs .matrice td { transition: background-color 300ms cubic-bezier(0.2, 0, 0, 1), box-shadow 300ms cubic-bezier(0.2, 0, 0, 1); } @media (prefers-reduced-motion: reduce) { #tarifs .cartouches.courtes .cartouche, #tarifs .cartouches.courtes .cartouche > .entete, #tarifs .matrice th, #tarifs .matrice td { transition-duration: 150ms; } /* les boutons : plus bas */ } #tarifs .case .val .apres { display: block; font-size: 15px; line-height: 1.5; color: var(--encre-3); } #tarifs .plus .tete { display: block; font-size: 13px; line-height: 18px; color: var(--encre-3); } #tarifs .plus ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; } #tarifs .plus li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: 16px; line-height: 1.45; } /* la coche au trait de la couleur du texte (encre) : en couleurs forcées, elle prend la couleur du système comme les mots (un trait encre écrit en dur y restait bleu nuit, presque invisible sur un thème sombre) */ #tarifs .coche { width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } #tarifs .cartouche .cta { align-self: end; border-top: 0; padding-top: 8px; padding-bottom: 16px; } /* le bouton d'une carte : sur toute sa largeur (.large) ; plein (.btn seul) ou bordé (.borde, le bouton secondaire de la charte). Décision d'Alex n° 26 du 22/10 : comme dans les autres prototypes du site, au survol, le plein passe à l'encre 2 et le bordé à la brume (charte, Composants), en 100 ms à l'entrée (charte, Mouvement, jeton « réponse ») et 70 ms à la sortie (« × 0,7 de l'entrée » : décision n° 2 du 23/10), le changement d'offre gardant ses 300 ms (la couche du survol : plus haut) ; en couleurs forcées, les fonds disparaissent : un bord de 2 px garde chaque bouton (comme dans les sections 4 et 6-7), 4 px pour celui de l'offre désignée (la différence de la n° 23), qui perd 2 px de rembourrage de chaque côté : sa boîte de contenu reste celle des bordés, et changer d'offre ne déplace rien (un libellé se coupe pareil, la carte garde sa hauteur) */ #tarifs .btn.large { width: 100%; justify-content: center; } #tarifs .btn.borde { background: var(--feuille); color: var(--encre); box-shadow: inset 0 0 0 2px var(--encre); } #tarifs .cartouches .btn:hover { --s5-survol: var(--encre-2); background-image: linear-gradient(var(--s5-survol), var(--s5-survol)); } #tarifs .cartouches .btn.borde:hover { --s5-survol: var(--brume); } /* les durées, dans l'ordre de transition-property (fond, texte, trait, teinte du survol, présence de sa couche) : au survol, la teinte en 100 ms, courbe standard, la couche tout de suite ; à la sortie, la règle du repos (la teinte en 70 ms, courbe de sortie, puis la couche retirée) ; mouvement réduit : le changement d'offre en 150 ms, comme le reste de la section, la sortie toujours en 70 ms */ #tarifs .cartouches.courtes .btn:hover { transition-duration: 300ms, 300ms, 300ms, 100ms, 0s; transition-delay: 0s; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); } @media (prefers-reduced-motion: reduce) { #tarifs .cartouches.courtes .btn { transition-duration: 150ms, 150ms, 150ms, 70ms, 0s; } #tarifs .cartouches.courtes .btn:hover { transition-duration: 150ms, 150ms, 150ms, 100ms, 0s; } } @media (forced-colors: active) { #tarifs .cartouches .btn { border: 2px solid ButtonText; } #tarifs .cartouches .btn:not(.borde) { border-width: 4px; } /* 8 et 20 px moins les 2 px de bord en plus ; ce sélecteur l'emporte sur celui qui pose les 8 px (.cartouches.courtes.e .btn.large) */ #tarifs .cartouches.courtes.e .btn.large:not(.borde) { padding: 6px 18px; } } #tarifs .options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; } #tarifs .option { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 24px; padding: 16px; border: 1px solid var(--grille); border-radius: 8px; background: var(--feuille); } #tarifs .option h3 { margin: 0; font-size: 18px; line-height: 26px; font-weight: 500; } #tarifs .option p { margin: 0; grid-column: 1; font-size: 15px; line-height: 1.5; color: var(--encre-2); } #tarifs .option .montant { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-size: 24px; line-height: 32px; font-variant-numeric: tabular-nums; white-space: nowrap; } #tarifs .option .montant small { display: block; font-size: 13px; line-height: 18px; color: var(--encre-3); } #tarifs .option .lien { grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap; } #tarifs .matrice { margin-top: 64px; } #tarifs .matrice h3 { margin: 0 0 16px; font-size: 24px; line-height: 32px; font-weight: 400; } #tarifs .matrice .tableau-boite { overflow-x: auto; position: relative; } /* repère des libellés .sr : sans lui ils élargissaient la page */ #tarifs .matrice table { min-width: 720px; } #tarifs .matrice td.non { color: var(--encre-3); } #tarifs .matrice td .coche { vertical-align: -3px; margin: 0 4px 0 0; } #tarifs .matrice thead th { font-size: 18px; line-height: 26px; font-weight: 500; } /* sous l'intitulé des palettes incluses, le prix d'une palette au-delà du forfait : petit texte discret, comme la précision d'un intitulé dans le tableau de la v1.4 (.petit) */ #tarifs .matrice th[scope="row"] .petit { display: block; margin-top: 4px; line-height: 1.5; text-wrap: pretty; } /* les dessins du détail (Alex, 17/10 : « à la place de marquer L shape on pourrait faire un petit colis en L et le placer […] et si y'a pas bah on place pas ») : véhicules, formes de colis et documents, une chose par ligne, son nom à gauche sur la même ligne (charte : jamais une icône sans son mot) ; dans chaque case, le dessin si l'offre la traite, rien sinon. Véhicules et documents au trait de la charte (1,5, bouts ronds), dans la couleur du texte ; les formes de colis en petites images 3D de 28 px (décision d'Alex n° 1 du 23/10 ; imageForme, dans le script), à la même place et posées de la même façon */ #tarifs .matrice tr.dessinee > * { padding-top: 6px; padding-bottom: 6px; } #tarifs .matrice .noms, #tarifs .matrice .dessins { display: grid; grid-auto-rows: 36px; } #tarifs .matrice .noms > span, #tarifs .matrice .dessins > span { display: flex; align-items: center; } #tarifs .matrice .noms > span { font-size: 15px; line-height: 18px; } #tarifs .dessin { flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } #tarifs .dessin path { vector-effect: non-scaling-stroke; } #tarifs .matrice.a-poser .dessin { opacity: 0; } /* jusqu'à ce que le détail paraisse : les dessins s'y posent alors */ @media print { #tarifs .matrice.a-poser .dessin { opacity: 1; } } /* en couleurs forcées, une image garde ses couleurs mais perd le fond de sa case : sur un thème sombre (fond noir), le fût et la sphère, en acier gris bleu, tombaient sous 3:1 (2,4 contre 4,3 sur le papier ; RAPPORT-22-10.md, « 23/10 ») ; chaque image garde donc le papier de la page sous elle, quel que soit le thème */ @media (forced-colors: active) { #tarifs .matrice img.forme { forced-color-adjust: none; background-color: var(--papier); } } /* décision d'Alex n° 8 du 22/10 : dans les cartes, les petits textes qui portent une information (« Hors taxes », « Palettes par période de 30 jours », la tête de la liste) passent de 13 à 15 px, la taille des légendes de la charte, interligne 1,5 ; les étiquettes (« Recommandé », « −15 % ») et l'unité de l'en-tête du détail restent à 13 px. Les coches des cartes : 24 px au trait de 1,5 (charte, icônes) ; celles du détail gardent 18 px. (« e » : la classe de l'ancienne piste E, gardée sur les cartes et le détail : elle porte la spécificité de ces règles face aux règles de base) */ #tarifs .cartouches.courtes.e .case .lib, #tarifs .cartouches.courtes.e .plus .tete { font-size: 15px; line-height: 1.5; } #tarifs .cartouches.courtes.e .plus li { grid-template-columns: 24px minmax(0, 1fr); } #tarifs .cartouches.courtes.e .coche { width: 24px; height: 24px; margin-top: 0; stroke-width: 1.5; } /* un libellé de bouton sur deux lignes (« Demander un devis » d'Enterprise, dans les cartes étroites du bureau, vers 902 à 1 000 px : mesuré) : centré, avec 8 px d'air au-dessus et en dessous (interligne 20 px) ; sans cela, ses deux lignes partaient à gauche et touchaient les bords du bouton. Sur une ligne, rien ne bouge (48 px, centré) */ #tarifs .cartouches.courtes.e .btn.large { text-align: center; padding-block: 8px; line-height: 20px; } #tarifs .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Le détail (idées de l'ancienne piste E) : documents dessinés, sites en repères, en-tête collant ; colonnes des offres de même largeur */ #tarifs .matrice.e table { table-layout: fixed; border-collapse: separate; border-spacing: 0; } /* séparé : le filet de l'en-tête suit l'en-tête collant */ #tarifs .matrice.e col.libelles { width: 22%; } #tarifs .matrice.e thead > tr > * { padding-top: 12px; } #tarifs .matrice.e .prix-entete { display: block; font-size: 15px; line-height: 1.5; font-weight: 400; color: var(--encre-2); font-variant-numeric: tabular-nums; } /* la case du coin de l'en-tête (collée avec lui au bureau, à gauche au téléphone), calée en bas : l'unité des prix, en-tête de tableau (13 px, encre 3 : charte, Tableaux), sur la ligne des prix */ #tarifs .matrice.e thead td { vertical-align: bottom; padding-left: 0; font-size: 13px; line-height: 18px; color: var(--encre-3); } /* une valeur, puis son dessin (repères), puis sa précision ; « pretty » : le navigateur évite, quand il le peut, un mot seul sur la dernière ligne */ #tarifs .matrice .ligne-sous { display: block; text-wrap: pretty; } #tarifs .matrice .precision { display: block; margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--encre-2); text-wrap: pretty; } /* « montage couche par couche » : la suite du rapport, sur la ligne d'en dessous (un nom qui commence par une minuscule), décalée (n° 25 du 22/10). Sa case et celle de son dessin, dans chaque colonne : deux rangées sous 1 440 px (il ne tient pas toujours sur une ligne, moins encore sous l'espacement de texte de WCAG 1.4.12), une dès 1 440 px (la page ne s'élargit plus) ; lui et son dessin EN HAUT de leur case (décision d'Alex n° 8 du 23/10) : sa première ligne à la place d'un nom d'une rangée (centrée dans les 36 premiers pixels, quel que soit l'interligne : l'air avec « Rapport PDF » reste celui des autres noms), le dessin centré sur elle, le vide dessous. Quand ses lignes n'y tiennent pas (espacement agrandi, police de repli), la ligne du tableau dit les rangées qu'il lui faut (data-rangees-montage, posé par suivreMontage, dans le script). Ses lignes équilibrées (balance) : jamais un mot seul sur la dernière. Mesures : RAPPORT-22-10.md, « 22/10, soir » et « 23/10 : version 21 » */ #tarifs .matrice .noms > .sous-nom { padding-left: 12px; align-items: flex-start; padding-top: calc((36px - 1lh) / 2); text-wrap: balance; } #tarifs .matrice .dessins > .sous-nom { align-items: flex-start; padding-top: 4px; } @media (max-width: 1439px) { #tarifs .matrice :is(.noms, .dessins) > .sous-nom { grid-row: span 2; } } #tarifs .matrice tr[data-rangees-montage="2"] :is(.noms, .dessins) > .sous-nom { grid-row: span 2; } #tarifs .matrice tr[data-rangees-montage="3"] :is(.noms, .dessins) > .sous-nom { grid-row: span 3; } #tarifs .matrice tr[data-rangees-montage="4"] :is(.noms, .dessins) > .sous-nom { grid-row: span 4; } #tarifs .reperes-sites { display: flex; margin-top: 4px; } #tarifs .reperes-sites .dessin { width: 24px; height: 24px; } @media (max-width: 743px) { /* au téléphone (sous 744 px) : quand le tableau défile de côté, la case du coin reste à gauche, devant les noms des offres, et les intitulés de groupe aussi */ #tarifs .matrice.e thead td { position: sticky; left: 0; z-index: 2; background: var(--papier); } #tarifs .matrice.e .titre-groupe { position: sticky; left: 0; display: inline-block; } /* le défilement s'arrête d'offre en offre, chacune juste après les intitulés : 160 px d'intitulés, puis, dans les 720 px du tableau, quatre colonnes de 140 px (des largeurs entières : à 22 %, les arrêts tombaient entre deux pixels et laissaient un fil de la colonne voisine) ; quand le tableau défile, une marge de fin (la place visible moins une colonne : 100 % − 300 px) laisse la dernière offre venir là aussi, au lieu d'un morceau de la précédente entre les intitulés et elle. Le min() annule la marge quand le tableau tient dans la page (100 % ≥ 720 px) */ #tarifs .matrice.e col.libelles { width: 160px; } #tarifs .matrice.e .tableau-boite { scroll-snap-type: x mandatory; scroll-padding-left: 160px; padding-right: max(0px, min((720px - 100%) * 1000, 100% - 300px)); } #tarifs .matrice.e thead th { scroll-snap-align: start; } } @media (min-width: 744px) { /* en tablette (dès 744 px) et au bureau, le tableau tient dans la page : il ne défile plus de côté, et son en-tête (noms et prix) reste en haut de l'écran tant qu'on lit le détail ; --haut-colle : la hauteur de la barre du site, quand elle est collée elle aussi */ #tarifs .matrice.e .tableau-boite { overflow: visible; } #tarifs .matrice.e table { min-width: 0; } /* 720 px au téléphone, pour son défilement ; ici, la largeur de la page (680 px à 744) */ #tarifs .matrice.e thead > tr > * { position: sticky; top: var(--haut-colle, 0px); z-index: 3; background: var(--papier); } #tarifs .matrice.e thead th.col-choisie { background: var(--brume); } } /* en couleurs forcées (contraste élevé), l'ombre bleue de la colonne choisie disparaît : un trait en haut de son nom la garde */ @media (forced-colors: active) { #tarifs .matrice.e thead th.col-choisie { border-top: 3px solid; } } @media (max-width: 900px) { #tarifs .options { grid-template-columns: minmax(0, 1fr); } #tarifs .option { grid-template-columns: minmax(0, 1fr); } #tarifs .option .montant, #tarifs .option .lien { grid-column: 1; grid-row: auto; text-align: left; margin-top: 8px; } /* le tableau défile de côté ; ses intitulés restent à gauche */ #tarifs .matrice th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--papier); min-width: 140px; } #tarifs .matrice tbody th[scope="rowgroup"] { position: sticky; left: 0; } } /* au téléphone (sous 744 px ; décision d'Alex n° 7 du 23/10, comme la v9 servie et les plans visuels du téléphone) : les quatre offres REPLIÉES, l'une sous l'autre (deux par deux tenu en paysage : plus bas) ; tenu debout, elles tiennent sur un écran (la hauteur de la v9 au plus : RAPPORT-22-10.md, « 23/10 : version 21 »). Au repos, dans la bande de la carte : son nom et son prix (en annuel, « payé d'avance » sur la ligne d'en dessous : dans la boîte du prix, il l'élargissait et faisait passer le prix sous le nom à 320 px), sa phrase, ses palettes et « Détail » (un bouton, aria-expanded ; sa zone de toucher, tout le résumé) ; puis le bouton de l'offre. Ouvert : ce que comprend l'offre (sa case « plus »), sous le résumé ; rien ne bouge au-dessus. Les cases du prix et des palettes ne se montrent pas ici : le résumé les dit ; « hors taxes », que portait la case du prix, est écrit une fois sous les blocs (.ht-telephone) ; « sans engagement » et le prix à la palette sont dans le détail, plus bas. Aucune animation à l'ouverture. Le cadre, dans la case de l'offre choisie : une rangée par offre. Relecture de la v21 : RAPPORT-22-10.md, « Corrections de la relecture » */ #tarifs .ht-telephone { display: none; } @media (max-width: 743px) { #tarifs .cartouches.courtes.e { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 16px; padding-top: 14px; } #tarifs .cartouches.courtes.e .cartouche { grid-row: auto; display: block; } #tarifs .cartouches.courtes.e .cadre-choix { grid-column: 1 / span 1; grid-row: 1 / span 1; } #tarifs .cartouches.courtes.e .cadre-choix[data-offre="1"] { grid-row: 2 / span 1; } #tarifs .cartouches.courtes.e .cadre-choix[data-offre="2"] { grid-row: 3 / span 1; } #tarifs .cartouches.courtes.e .cadre-choix[data-offre="3"] { grid-row: 4 / span 1; } #tarifs .cartouches.courtes.e .cartouche > .entete { position: relative; padding: 14px 16px 10px; } #tarifs .cartouches.courtes.e .titre-offre { flex-wrap: wrap; column-gap: 12px; } #tarifs .cartouches.courtes.e .phrase { text-wrap: pretty; } /* à 360 px, « API. » restait seul sur sa ligne */ #tarifs .cartouches.courtes.e .resume-prix { display: block; margin-left: auto; font-size: 28px; line-height: 36px; color: var(--encre); text-align: right; } #tarifs .cartouches.courtes.e .resume-prix .unite { font-size: 15px; line-height: 1; color: var(--encre-2); } /* sans quoi la ligne du prix passe de 36 à 40 px (comme dans les cartes) */ #tarifs .cartouches.courtes.e .resume-an:not(:empty) { display: block; margin: -6px 0 0; font-size: 15px; line-height: 1.5; color: var(--encre-2); text-align: right; } #tarifs .cartouches.courtes.e .resume { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 12px; margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--encre-2); } #tarifs .cartouches.courtes.e .cartouche > .case { display: none; } #tarifs .cartouches.courtes.e .cartouche:has(.ouvrir[aria-expanded="true"]) > .plus { display: block; border-top: 0; } #tarifs .cartouches.courtes.e .cartouche > .cta { padding: 10px 16px 12px; } #tarifs .ht-telephone { display: block; margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--encre-2); } } /* tenu en paysage (relecture de la v21 : en une colonne, le quatrième prix y était à 1,8 écran ; la v9 y passe à deux colonnes), dès que deux blocs de 255 px tiennent (la règle de la v9 ; à 558 px, la page en a 526) : deux par deux, Starter et Pro, puis Réseau et Enterprise. Chaque carte en sous-grille de trois rangées (sa bande, ce qu'elle comprend, son bouton) : dans une rangée, les bandes, les lignes des palettes (en bas de la bande, la phrase prend la place libre) et les boutons alignés ; ouvrir un bloc ne bouge ni la bande ni « Détail » de son voisin, seul le bouton du voisin suit la rangée. Entre les deux rangées, 16 px, comme entre les blocs l'un sous l'autre : « Recommandé » y dépasse de 12 px. Les lignes de la phrase équilibrées (balance) : dans ces blocs étroits, « pretty » laissait « standardiser. » seul sur sa ligne (558 px). Le cadre, dans les trois rangées de la carte choisie */ @media (min-width: 558px) and (max-width: 743px) { #tarifs .cartouches.courtes.e { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto) 16px repeat(3, auto); gap: 0 16px; } #tarifs .cartouches.courtes.e .cartouche { display: grid; grid-template-rows: subgrid; grid-row: 1 / span 3; } #tarifs .cartouches.courtes.e .cartouche:nth-child(n+3) { grid-row: 5 / span 3; } #tarifs .cartouches.courtes.e .cartouche > .entete { grid-row: 1; display: flex; flex-direction: column; } #tarifs .cartouches.courtes.e .cartouche > .plus { grid-row: 2; } #tarifs .cartouches.courtes.e .cartouche > .cta { grid-row: 3; } #tarifs .cartouches.courtes.e .phrase { flex: 1 0 auto; text-wrap: balance; } #tarifs .cartouches.courtes.e .cadre-choix { grid-row: 1 / span 3; } #tarifs .cartouches.courtes.e .cadre-choix[data-offre="1"] { grid-column: 2 / span 1; grid-row: 1 / span 3; } #tarifs .cartouches.courtes.e .cadre-choix[data-offre="2"] { grid-column: 1 / span 1; grid-row: 5 / span 3; } #tarifs .cartouches.courtes.e .cadre-choix[data-offre="3"] { grid-column: 2 / span 1; grid-row: 5 / span 3; } } /* « Détail » : le plus des questions de la section 6, sa barre verticale retirée quand le bloc est ouvert ; le nom lu dit l'offre (« Détail de l'offre Starter ») ; sa zone de toucher couvre tout le résumé (la bande de la carte), le bouton de l'offre restant à part ; l'anneau du focus sur cette zone, 3 px à l'intérieur de la carte : sur l'offre désignée, 2 px de bande le séparent du cadre (collé à lui, du même bleu, il s'y fondait : relecture de la v21) */ #tarifs .ouvrir { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 auto; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; line-height: 1.5; font-weight: 500; color: var(--encre); cursor: pointer; } #tarifs .ouvrir::after { content: ''; position: absolute; inset: 0; } #tarifs .ouvrir:focus-visible { outline: none; } #tarifs .ouvrir:focus-visible::after { outline: 2px solid var(--bleu-plan); outline-offset: -5px; } #tarifs .ouvrir .icone { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; } #tarifs .ouvrir[aria-expanded="true"] .barre-verticale { display: none; } /* en tablette tenue debout, de 744 à 900 px (décisions d'Alex du 19/10, n° 34 et 36) : les marges de 32 px des sections 6-7 ; les cartes de E en deux rangées de deux : chaque rangée garde ses cases alignées (sous-grille) ; entre les deux, une rangée vide de 32 px, où l'étiquette « Recommandé », épinglée 12 px au-dessus du cadre, ne touche pas la carte du dessus ; le cadre va dans la case de la carte choisie (data-offre). Le détail de E : ses règles dès 744 px, plus haut */ @media (min-width: 744px) and (max-width: 900px) { #tarifs .cartouches.courtes.e { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto) 32px repeat(5, auto); gap: 0 16px; padding: 0; overflow: visible; } #tarifs .cartouches.courtes.e .cartouche { grid-row: 1 / span 5; grid-template-rows: subgrid; } #tarifs .cartouches.courtes.e .cadre-choix { grid-row: 1 / span 5; } #tarifs .cartouches.courtes.e .cartouche:nth-child(n+3), #tarifs .cartouches.courtes.e .cadre-choix:is([data-offre="2"], [data-offre="3"]) { grid-row: 7 / span 5; } #tarifs .cartouches.courtes.e .cadre-choix[data-offre="2"] { grid-column: 1 / span 1; } #tarifs .cartouches.courtes.e .cadre-choix[data-offre="3"] { grid-column: 2 / span 1; } } @media (max-width: 600px) { #tarifs h2 { font-size: 32px; } }