/* ══════════════════════════════════════════════════════════════════ LES PAGES JURIDIQUES Mêmes jetons que la page d'accueil, et une seule décision de plus : ici on LIT. La colonne est étroite (68 caractères), l'interligne généreux, et la hiérarchie tient en trois niveaux. Une page de conditions générales qui court sur 1180 px ne se lit pas — et une page qu'on ne lit pas ne vaut pas grand-chose, y compris devant un juge. Les polices sont chargées par la page elle-même (voir le ), pas ici : ce fichier ne connaît que la mise en forme. ══════════════════════════════════════════════════════════════════ */ :root{ --fond:#F4F0EA; --surface:#FFFDFB; --encre:#23201C; --doux:#6E675F; --filet:#E7E0D6; --or:#8A6A2E; --or-texte:#6D5324; --serif:"Cormorant Garamond",Garamond,"EB Garamond","Apple Garamond",Georgia,"Times New Roman",serif; --sans:"Instrument Sans","Helvetica Neue",Helvetica,Arial,system-ui,-apple-system,sans-serif; --r:3px; --marge:clamp(20px,5vw,64px); } *{box-sizing:border-box} body{ margin:0; background:var(--fond); color:var(--encre); font-family:var(--sans); font-size:17px; line-height:1.68; -webkit-font-smoothing:antialiased; } a{color:var(--or-texte)} a:focus-visible{outline:2px solid var(--or);outline-offset:2px;border-radius:var(--r)} /* ---------- en-tête ---------- */ .entete{ background:var(--surface); border-bottom:1px solid var(--filet); } .entete .dedans{ max-width:820px;margin:0 auto;padding:20px var(--marge); display:flex;align-items:baseline;gap:16px;flex-wrap:wrap; } .marque{font-family:var(--serif);font-size:26px;line-height:1;letter-spacing:-.01em} .marque a{color:var(--encre);text-decoration:none} .retour{margin-left:auto;font-size:15px;color:var(--doux)} /* ---------- la colonne de lecture ---------- */ main{max-width:820px;margin:0 auto;padding:56px var(--marge) 96px} .chapeau{border-bottom:1px solid var(--filet);padding-bottom:28px;margin-bottom:12px} h1{ font-family:var(--serif);font-weight:400; font-size:clamp(34px,6vw,52px);line-height:1.08;letter-spacing:-.015em; margin:0 0 14px; } .chapeau p{margin:0;color:var(--doux);font-size:16px;max-width:62ch} h2{ font-family:var(--serif);font-weight:400; font-size:clamp(24px,3.4vw,30px);line-height:1.2;letter-spacing:-.01em; margin:44px 0 12px; } h3{font-size:17px;font-weight:600;margin:26px 0 6px} p,li{max-width:68ch} p{margin:0 0 14px} ul,ol{margin:0 0 14px;padding-left:22px} li{margin:0 0 6px} strong{font-weight:600} em{font-style:italic} /* Le tableau des sous-traitants : il doit tenir sur un téléphone, donc il défile dans son propre cadre plutôt que de pousser la page. */ .cadre-table{ overflow-x:auto;margin:0 0 18px; border:1px solid var(--filet);border-radius:var(--r); /* Une ombre qui n'apparaît que du côté où il reste du tableau à voir, et qui s'efface quand on arrive au bout. Deux fonds qui défilent avec le contenu masquent deux ombres fixes : c'est tout le mécanisme, et il n'exige aucun script. */ background: linear-gradient(to right, var(--surface) 40%, rgba(255,253,251,0)) left / 44px 100% no-repeat local, linear-gradient(to left, var(--surface) 40%, rgba(255,253,251,0)) right / 44px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(35,32,28,.30), rgba(35,32,28,0)) left / 18px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(35,32,28,.30), rgba(35,32,28,0)) right / 18px 100% no-repeat scroll, var(--surface); } table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px} th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--filet);vertical-align:top} th{font-weight:600;background:#FAF6F0;white-space:nowrap} tr:last-child td{border-bottom:0} /* L'avertissement de brouillon. Il se voit, et il ne se confond pas avec le texte : ce n'est pas une clause, c'est un état. */ .brouillon{ border:1px dashed var(--or);border-radius:var(--r); background:rgba(201,167,94,.10); padding:16px 18px;margin:0 0 34px; font-size:16px;color:var(--or-texte); } .brouillon p{margin:0;max-width:none} .brouillon p + p{margin-top:8px} .encadre{ border:1px solid var(--filet);border-radius:var(--r);background:var(--surface); padding:16px 18px;margin:0 0 18px; } .encadre p:last-child{margin-bottom:0} /* ---------- pied ---------- */ .pied{border-top:1px solid var(--filet);background:var(--surface)} .pied .dedans{ max-width:820px;margin:0 auto;padding:26px var(--marge); font-size:14px;color:var(--doux); } .pied a{color:var(--doux)} .pied p{margin:0 0 6px;max-width:none} @media (max-width:640px){ main{padding-top:36px} } /* Les trous qui restent à combler par MEDI-BAYT. Même signe que sur la page d'accueil : ce n'est pas du texte, c'est une décision qui manque. Aucun de ces trous ne doit survivre à la publication. */ .trou{ display:inline-block;max-width:100%;padding:1px 8px; border:1px dashed var(--or);border-radius:var(--r); color:var(--or-texte);font-size:16px;font-weight:500; background:rgba(201,167,94,.10); overflow-wrap:anywhere; } /* Le sommaire en tête des pages longues. */ .sommaire{margin:0 0 34px;padding:16px 18px;border:1px solid var(--filet);border-radius:var(--r);background:var(--surface)} .sommaire h2{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--doux);margin:0 0 8px} .sommaire ol{margin:0;padding-left:20px;font-size:15px;columns:2;column-gap:28px} .sommaire li{margin:0 0 4px;max-width:none;break-inside:avoid} @media (max-width:640px){.sommaire ol{columns:1}} .date-maj{font-size:14px;color:var(--doux);margin-top:34px;padding-top:14px;border-top:1px solid var(--filet)} /* Les cibles tactiles. Trois blocs de cette page sont de la NAVIGATION et pas du texte courant : le sommaire, le lien de retour et le pied. Un lien de navigation de 17 px de haut se rate au pouce — on lui donne ses 44 px par du rembourrage vertical, sans grossir le texte. Les liens à l'intérieur des paragraphes gardent leur taille : on ne les vise pas au pouce, on les rencontre en lisant. */ .marque a{display:inline-block;padding:10px 0} .retour a{display:inline-block;padding:10px 0} .sommaire li{margin:0} .sommaire li a{display:inline-block;padding:12px 0;line-height:1.4} .pied a{display:inline-block;padding:11px 0}