/* ========================================================================== avisjuridique.ch — feuille de style unique (écrite à la main) Reprise de la maquette 1 « Modernist » validée (maquettes/1-modernist.html). Style typographique international suisse : grille de 12 colonnes, colonnes 1–3 pour les repères (numéro rouge + nom), 4–12 pour le contenu ; filets de 1 px, aucun effet (ni ombre, ni dégradé, ni arrondi). JETONS DE COULEUR (contrastes WCAG 2.1 sur --paper) Clair (défaut) Sombre --paper #F5F4F0 #121211 fond --paper-2 #ECEAE4 #1D1D1B champs, encadrés --ink #121212 17,0:1 #F1EFE9 16,3:1 texte --ink-2 #4D4C48 7,8:1 #B0AEA8 8,5:1 texte secondaire --line #76746E 4,3:1 #7A7873 4,3:1 soulignés des champs --rule #121212 17,0:1 #D8D6D0 12,9:1 filets forts --hair #CFCCC4 1,5:1 #3F3E3A 1,8:1 filets décoratifs --red #C4161C 5,5:1 #F2463C 5,1:1 numéros, focus --red-fill #C4161C 5,5:1 #D42A1C 3,7:1 bouton, carrés --on-red #FFFFFF 6,0:1 #FFFFFF 5,1:1 texte du bouton Rouge réservé : numéros de section, carrés, action principale, focus. THÈME assets/js/theme.js (synchrone dans ) pose data-theme="light|dark" et la classe « js » sur . Sans JavaScript : prefers-color-scheme. POLICE Inter 4.1 variable auto-hébergée (SIL OFL, voir fonts/LICENSE-Inter.txt). Texte courant : taille optique automatique. Éléments « Display » (titres, prix, logotype, chiffres) : font-variation-settings "opsz" 32, soit la coupe Inter Display. -------------------------------------------------------------------------- COMPOSANTS (classes disponibles ; ne pas modifier ce fichier, copier le balisage de src/modele-page.html) -------------------------------------------------------------------------- Structure commune .skip lien d’évitement (cible :
) .site-header > .wrap.bar en-tête collant : .logo, .cta, .menu-btn, #panel.panel (.nav, .tools > .seg + .theme-btn, .panel-cta) .site-header.is-simple en-tête réduit (logotype seul) : pages message .wrap conteneur centré (84rem, marges --pad) .grid grille 12 colonnes ; enfants : .c-label (1–3) .c-main (4–12) .c-text (4–9) .c-side (10–12) .sec-rule filet fort en tête de bloc (sur .wrap.grid) .sec-label > .sec-no repère : numéro rouge (+ nom facultatif) .sec-title grand titre de section (h2) .kicker > .sq surtitre précédé d’un carré rouge .lead-text / .body-text chapeau / texte secondaire .btn.btn-primary bouton rouge ; .btn.btn-ghost bouton secondaire ; .btn-sm petit ; .arr flèche (→ interne, ↗ externe) .more lien isolé souligné avec flèche .box encadré (fond --paper-2, filet fort) .coords (dl) coordonnées :
.sr texte réservé aux lecteurs d’écran .site-footer .foot pied de page (.f1 à .f4) ; .giant logotype géant a) Page de texte (déclaration de protection des données) main.doc header.doc-head > .wrap.grid p.kicker surtitre h1.doc-title titre .doc-row.grid rangée sous filet : .doc-meta (c-label) « Dernière mise à jour » + .back .doc-lead (c-text) p.lead-text (chapeau) aside.box.brief (c-side) « En bref » : h2 + ul nav.toc > .wrap.grid.sec-rule sommaire : .sec-label + ol.toc-list (liens d’ancre) section.doc-sec > .wrap.grid.sec-rule p.sec-label.c-label numéro (ou nom court) — aria-hidden si redondant div.prose.c-text h2, h3, p, ul, ol, dl.coords, a aside.c-side (facultatif) note marginale (.aside-note) .doc-end > .wrap.grid.sec-rule lien .more.back « Retour à l’accueil » Mesure : .prose limitée à 36em (≈ 65–75 caractères). b) Page message (confirmation d’envoi, erreurs, échec de mail.php) body.page-msg ; header.site-header.is-simple (logotype seul) main.msg section.msg-block (lang="fr") > .wrap.grid.sec-rule p.msg-code.c-label grand code « 404 » (pages d’erreur seulement) div.msg-body.c-text p.kicker, h1.msg-title, p.lead-text, p, .actions (.btn-primary / .btn-ghost), .copy (label + textarea[readonly]) section.msg-block (lang="en") même structure, titre en h2.msg-title Blocs FR et EN empilés, séparés par le filet .sec-rule. Aucun JavaScript requis. ========================================================================== */ /* ========================================================================== 1. Police ========================================================================== */ @font-face { font-family: "InterVariable"; src: url("../fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* ========================================================================== 2. Jetons ========================================================================== */ :root { --paper: #F5F4F0; --paper-2: #ECEAE4; --ink: #121212; --ink-2: #4D4C48; --line: #76746E; --rule: #121212; --hair: #CFCCC4; --red: #C4161C; --red-fill:#C4161C; --on-red: #FFFFFF; --focus: #C4161C; color-scheme: light; --sans: "InterVariable", "Inter", "Helvetica Neue", Arial, sans-serif; /* Coupe Display d’Inter 4 : axe de taille optique au maximum. */ --opsz-display: "opsz" 32; --maxw: 84rem; --pad: clamp(1rem, 4vw, 3rem); --gap: clamp(1rem, 2vw, 1.5rem); --header-h: 4rem; --section-y: clamp(4.5rem, 9vw, 8rem); } :root[data-theme="dark"] { --paper: #121211; --paper-2: #1D1D1B; --ink: #F1EFE9; --ink-2: #B0AEA8; --line: #7A7873; --rule: #D8D6D0; --hair: #3F3E3A; --red: #F2463C; --red-fill:#D42A1C; --on-red: #FFFFFF; --focus: #F2463C; color-scheme: dark; } /* Sans JavaScript (aucun data-theme) : réglage du système. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --paper: #121211; --paper-2: #1D1D1B; --ink: #F1EFE9; --ink-2: #B0AEA8; --line: #7A7873; --rule: #D8D6D0; --hair: #3F3E3A; --red: #F2463C; --red-fill:#D42A1C; --on-red: #FFFFFF; --focus: #F2463C; color-scheme: dark; } } /* ========================================================================== 3. Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.55; font-feature-settings: "kern", "calt"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } sup { font-size: .62em; line-height: 0; vertical-align: .5em; } a { color: inherit; } button, input, textarea { font: inherit; color: inherit; } ::selection { background: var(--red-fill); color: var(--on-red); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } :focus:not(:focus-visible) { outline: none; } /* Cible du lien d’évitement : pas de cadre autour de tout le contenu. */ #contenu:focus, #contenu:focus-visible { outline: none; } .sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .num { font-feature-settings: "tnum", "kern"; } .nw { white-space: nowrap; } /* Lien d’évitement */ .skip { position: absolute; left: var(--pad); top: -10rem; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none; } .skip:focus { top: .75rem; } /* ========================================================================== 4. Grille 12 colonnes ========================================================================== */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); } .grid > * { grid-column: 1 / -1; min-width: 0; } @media (min-width: 64rem) { .c-label { grid-column: 1 / span 3; } .c-main { grid-column: 4 / -1; } .c-text { grid-column: 4 / span 6; } .c-side { grid-column: 10 / -1; } } @media (min-width: 44rem) and (max-width: 63.999rem) { .c-text { grid-column: 1 / span 7; } .c-side { grid-column: 8 / -1; } } /* ========================================================================== 5. Logotype ========================================================================== */ .logo { display: inline-flex; align-items: baseline; min-height: 44px; padding-block: .6rem; font-family: var(--sans); font-variation-settings: var(--opsz-display); font-size: 1.25rem; line-height: 1; letter-spacing: -.02em; color: var(--ink); text-decoration: none; white-space: nowrap; } .logo b { font-weight: 700; } .logo span { font-weight: 400; } /* Le point du nom de domaine devient un carré rouge. */ .logo i { display: inline-block; width: .24em; height: .24em; margin: 0 .07em 0 .08em; background: var(--red-fill); font-style: normal; } /* ========================================================================== 6. Boutons et liens ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 3.25rem; padding: 0 1.25rem; border: 1px solid transparent; border-radius: 0; font-family: var(--sans); font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .12s, color .12s, border-color .12s; } .btn .arr { font-weight: 400; } .btn-primary { background: var(--red-fill); color: var(--on-red); } .btn-primary:hover { background: var(--ink); color: var(--paper); } .btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; } .btn-ghost:hover { background: var(--ink); color: var(--paper); } .btn-sm { min-height: 2.75rem; padding: 0 1rem; font-size: .9375rem; gap: .75rem; } /* Lien isolé : inline-block pour 44 px de cible ; la flèche (inline-block) n’hérite pas du soulignement. Dans le HTML, le dernier mot, le texte masqué et la flèche sont groupés dans un span.nw : la flèche ne passe jamais seule à la ligne. */ .more { display: inline-block; min-height: 44px; padding-block: .6rem; line-height: 1.5; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: var(--line); } .more:hover { color: var(--red); text-decoration-color: currentColor; } .more .arr { display: inline-block; margin-left: .45em; font-weight: 400; transition: transform .15s; } .more:hover .arr { transform: translateX(.15em); } .prose a { text-decoration-thickness: 1px; text-underline-offset: .2em; } .prose a:hover { color: var(--red); } /* ========================================================================== 7. En-tête ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--hair); } .bar { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1rem; min-height: var(--header-h); } .bar .logo { margin-right: auto; font-size: 1.375rem; } .panel { display: flex; align-items: center; gap: 1.25rem; order: 1; } .bar .cta { order: 2; } .nav ul { display: flex; gap: .25rem; } .nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .7rem; font-size: .9375rem; font-weight: 500; text-decoration: none; color: var(--ink); border-bottom: 1px solid transparent; } .nav a:hover { color: var(--red); } .tools { display: flex; align-items: center; gap: .5rem; } /* Langue : deux libellés, la langue de la page soulignée en rouge, l’autre est un lien vers la page traduite. */ .seg { display: inline-flex; align-items: center; } .seg .sl { color: var(--line); font-size: .8125rem; } .seg a, .seg .on { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 .35rem; font-size: .8125rem; font-weight: 500; letter-spacing: .04em; color: var(--ink-2); text-decoration: underline 2px transparent; text-underline-offset: .45em; } .seg .on { color: var(--ink); font-weight: 700; text-decoration-color: var(--red); } .seg a:hover { color: var(--ink); text-decoration-color: var(--line); } /* Bouton de thème : le libellé annonce l’action (« Mode sombre » en thème clair, « Mode clair » en thème sombre). Les deux libellés sont dans la page ; la feuille de style masque l’autre selon data-theme, posé par theme.js avant l’affichage : aucun changement visible au chargement. Inutile sans JavaScript, donc masqué dans ce cas. */ .theme-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .6rem; border: 0; background: transparent; cursor: pointer; font-size: .875rem; font-weight: 500; color: var(--ink-2); } .theme-btn:hover { color: var(--ink); } .theme-btn .ico { position: relative; width: .875rem; height: .875rem; border: 1px solid currentColor; } .theme-btn .ico::after { content: ""; position: absolute; inset: 0 50% 0 0; background: currentColor; } :root[data-theme="dark"] .theme-btn .ico::after { inset: 0 0 0 50%; } :root[data-theme="dark"] .theme-btn .lbl-sombre, :root:not([data-theme="dark"]) .theme-btn .lbl-clair { display: none; } :root:not(.js) .theme-btn { display: none; } .menu-btn { display: none; align-items: center; gap: .6rem; min-height: 44px; padding: 0 .25rem 0 .75rem; border: 0; background: transparent; font-size: .9375rem; font-weight: 600; cursor: pointer; } /* Deux filets qui deviennent une croix rouge à l’ouverture. */ .menu-btn .bars { position: relative; width: 1.25rem; height: 11px; } .menu-btn .bars::before, .menu-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .15s, top .15s; } .menu-btn .bars::before { top: 0; } .menu-btn .bars::after { top: 10px; } .menu-btn[aria-expanded="true"] .bars::before, .menu-btn[aria-expanded="true"] .bars::after { top: 5px; height: 1.5px; background: var(--red); } .menu-btn[aria-expanded="true"] .bars::before { transform: rotate(45deg); } .menu-btn[aria-expanded="true"] .bars::after { transform: rotate(-45deg); } .menu-btn .lbl { min-width: 3.6em; text-align: left; } .menu-btn[aria-expanded="true"] .lbl-open, .menu-btn:not([aria-expanded="true"]) .lbl-close { display: none; } .panel-cta { display: none; } @media (max-width: 67.5rem) { /* Sans JavaScript : la navigation s’affiche en liste sous le logotype (en-tête non collant) ; aucun contenu n’est inaccessible. */ :root:not(.js) .site-header { position: static; } .panel { order: 4; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 1.5rem; border-top: 1px solid var(--rule); } .panel .nav { order: 1; } .panel .panel-cta { order: 2; } .panel .tools { order: 3; margin-top: auto; padding-top: 2rem; } .nav ul { flex-direction: column; gap: 0; } .nav li { border-bottom: 1px solid var(--hair); } .nav a { width: 100%; padding: 0; min-height: 3.5rem; font-variation-settings: var(--opsz-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; } .tools { justify-content: space-between; border-top: 1px solid var(--hair); padding-bottom: .25rem; } /* Avec JavaScript : bouton Menu / Fermer et panneau plein écran (hauteur plafonnée) ; rien de la page ne transparaît dessous. */ :root.js .menu-btn { display: inline-flex; order: 3; } :root.js .panel { display: none; position: absolute; left: 0; right: 0; top: 100%; width: auto; background: var(--paper); padding: .5rem var(--pad) 1.5rem; min-height: min(calc(100svh - var(--header-h)), 60rem); max-height: calc(100svh - var(--header-h)); overflow-y: auto; } :root.js .panel.open { display: flex; border-bottom: 1px solid var(--rule); } } @media (max-width: 43.999rem) { .bar .cta { display: none; } .panel-cta { display: flex; margin-top: 1.5rem; width: 100%; } } /* En-tête réduit des pages message : logotype seul. */ .site-header.is-simple { position: static; } /* ========================================================================== 8. Sections : repères communs ========================================================================== */ .section { padding-block: 0 var(--section-y); } .section > .wrap { position: relative; } /* Filet de section posé sur la largeur du contenu (hors marges latérales). */ .sec-rule { position: relative; padding-top: 1.25rem; row-gap: 2.5rem; } .sec-rule::before { content: ""; position: absolute; top: 0; left: var(--pad); right: var(--pad); border-top: 1px solid var(--rule); } .sec-label { display: flex; gap: .85rem; align-items: baseline; font-size: .9375rem; line-height: 1.3; color: var(--ink-2); } .sec-no { color: var(--red); font-weight: 700; font-feature-settings: "tnum"; letter-spacing: .02em; } .sec-title { font-family: var(--sans); font-variation-settings: var(--opsz-display); font-weight: 600; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); line-height: 1.04; letter-spacing: -.028em; max-width: 18em; text-wrap: balance; } @media (min-width: 64rem) { .sec-label { padding-top: .55rem; } .sec-rule > .sec-title { grid-row: 1; } } @media (max-width: 63.999rem) { .sec-rule { row-gap: 1.25rem; } .sec-title { margin-bottom: .75rem; } } .lead-text { font-size: 1.1875rem; line-height: 1.5; color: var(--ink); max-width: 36em; } .body-text { color: var(--ink-2); max-width: 36em; } .body-text + .body-text { margin-top: 1rem; } /* ========================================================================== 9. Accroche ========================================================================== */ .hero { padding-top: clamp(3rem, 7vw, 6.5rem); padding-bottom: clamp(3rem, 5vw, 4.5rem); } .kicker { display: flex; align-items: center; gap: .75rem; font-size: .9375rem; font-weight: 600; letter-spacing: .01em; } .sq { display: inline-block; width: .75rem; height: .75rem; background: var(--red-fill); flex: none; } .hero h1 { margin-top: clamp(1.5rem, 3vw, 2.5rem); font-variation-settings: var(--opsz-display); font-weight: 600; font-size: clamp(2.5rem, 1.2rem + 5.4vw, 5.75rem); line-height: .98; letter-spacing: -.038em; } .hero h1 .a { display: block; text-wrap: balance; } .hero h1 .b { display: block; color: var(--ink-2); text-wrap: balance; } .hero-row { margin-top: clamp(2.5rem, 5vw, 4.5rem); padding-top: 1.25rem; border-top: 1px solid var(--rule); row-gap: 2.5rem; } .mini { display: block; margin-bottom: .75rem; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); } .hero-tel .tel { display: inline-flex; align-items: center; min-height: 44px; font-variation-settings: var(--opsz-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; text-decoration: none; font-feature-settings: "tnum"; } .hero-tel .tel:hover { color: var(--red); } .hero-tel .hours { display: block; margin-top: .25rem; font-size: .9375rem; color: var(--ink-2); max-width: 17em; } .hero-lead .lead-text { max-width: 30em; } .actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; } .index { border-top: 1px solid var(--hair); } .index a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; min-height: 3rem; padding: .7rem 0; border-bottom: 1px solid var(--hair); text-decoration: none; font-size: .9375rem; line-height: 1.35; } .index a:hover .n { color: var(--red); } .index .p { font-weight: 600; white-space: nowrap; font-feature-settings: "tnum"; } @media (min-width: 64rem) { .hero .kicker { grid-column: 1 / span 3; } .hero h1 { grid-column: 1 / span 11; } .hero-tel { grid-column: 1 / span 3; grid-row: 1; } .hero-lead { grid-column: 4 / span 6; grid-row: 1; } .hero-index { grid-column: 10 / -1; grid-row: 1; } } /* Ordre du source : chapeau, prestations, téléphone (ordre de lecture et de tabulation sur mobile) ; en tablette et sur bureau, placement explicite. */ @media (min-width: 44rem) and (max-width: 63.999rem) { .hero-lead { grid-column: 1 / -1; } .hero-tel { grid-column: 1 / span 5; grid-row: 2; } .hero-index { grid-column: 7 / -1; grid-row: 2; } } @media (max-width: 43.999rem) { .actions .btn { width: 100%; } } /* ========================================================================== 10. Prestations : tableau à trois colonnes ========================================================================== */ .offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; column-gap: var(--gap); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: 1rem; } .offer { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 1.25rem; position: relative; padding: 1.75rem 0 1.5rem; } /* Filet vertical au milieu de la gouttière : chaque offre démarre pile sur une colonne de la grille (1, 5, 9). */ .offer + .offer::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gap) / -2); border-left: 1px solid var(--hair); } .offer h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; } .offer h3 .k { display: block; margin-bottom: .6rem; font-size: .8125rem; font-weight: 600; color: var(--ink-2); font-feature-settings: "tnum"; letter-spacing: .04em; } .price { font-variation-settings: var(--opsz-display); font-weight: 500; font-size: clamp(2.25rem, 1rem + 2.5vw, 3.25rem); line-height: 1; letter-spacing: -.03em; font-feature-settings: "tnum"; white-space: nowrap; } /* « CHF » en petit corps, calé sur la hauteur des capitales ; l’espace insécable est dans le span, donc au petit corps (écart resserré). */ .price .cur { font-size: .42em; font-weight: 600; letter-spacing: .02em; vertical-align: .95em; margin-right: .06em; } .price-note { margin-top: .6rem; font-size: .9375rem; color: var(--ink-2); } .offer .body-text { max-width: 28em; } .offer .more { align-self: end; justify-self: start; } @media (max-width: 55rem) { .offers { grid-template-columns: 1fr; grid-template-rows: none; } .offer { grid-row: auto; display: block; padding: 1.75rem 0; } .offer + .offer { border-top: 1px solid var(--hair); } .offer + .offer::before { display: none; } .offer > * + * { margin-top: 1rem; } } @media (min-width: 36rem) and (max-width: 55rem) { .offer { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr; column-gap: var(--gap); row-gap: 0; } .offer > * + * { margin-top: 0; } .offer h3 { grid-column: 1; grid-row: 1; } .offer .price-block { grid-column: 1; grid-row: 2 / span 2; margin-top: 1rem; } .offer .body-text { grid-column: 2; grid-row: 1 / span 2; } .offer .more { grid-column: 2; grid-row: 3; margin-top: .5rem; } } /* ========================================================================== 11. Démarche ========================================================================== */ .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2.5rem; } .step { position: relative; border-top: 1px solid var(--rule); padding-top: 1.5rem; } .step::before { content: ""; position: absolute; left: 0; top: -.4rem; width: .75rem; height: .75rem; background: var(--red-fill); } .step .n { display: block; font-variation-settings: var(--opsz-display); font-weight: 300; font-size: clamp(3rem, 2rem + 2.5vw, 4.5rem); line-height: 1; letter-spacing: -.04em; font-feature-settings: "tnum"; } .step h3 { margin-top: 1.5rem; font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; } .step p { margin-top: .6rem; color: var(--ink-2); max-width: 22em; } .note { display: flex; gap: .75rem; align-items: baseline; margin-top: 3rem; color: var(--ink-2); font-size: .9375rem; } .note .sq { width: .5rem; height: .5rem; transform: translateY(-.1em); } @media (max-width: 47.999rem) { .steps { grid-template-columns: 1fr; } } /* ========================================================================== 12. Domaines ========================================================================== */ .areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); border-bottom: 1px solid var(--hair); } /* Liste non ordonnée : pas de numéros (la seule numérotation forte est celle des sections). */ .areas li { padding: .85rem 0; border-top: 1px solid var(--hair); line-height: 1.35; } .after-list { margin-top: 1.5rem; } @media (max-width: 63.999rem) { .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 35.999rem) { .areas { grid-template-columns: 1fr; } } /* ========================================================================== 13. L’avocat ========================================================================== */ /* Monogramme à la place d’un portrait (même carré, filet de 1 px). */ .mono { aspect-ratio: 1 / 1; width: 100%; max-width: 12rem; border: 1px solid var(--rule); display: flex; align-items: flex-start; padding: 1rem; } .mono span { font-variation-settings: var(--opsz-display); font-weight: 700; font-size: clamp(2.75rem, 1.8rem + 2.4vw, 3.75rem); line-height: .8; letter-spacing: -.06em; } .bio h3 { font-variation-settings: var(--opsz-display); font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; } .roles { margin-top: 1.25rem; border-top: 1px solid var(--hair); max-width: 36em; } .roles li { padding: .7rem 0; border-bottom: 1px solid var(--hair); font-weight: 500; } .bio .body-text { margin-top: 1.5rem; } .bio .more { margin-top: 1rem; } @media (min-width: 64rem) { .c-mono { grid-column: 4 / span 3; } .c-bio { grid-column: 7 / -1; } } @media (min-width: 44rem) and (max-width: 63.999rem) { .c-mono { grid-column: 1 / span 4; } .c-bio { grid-column: 5 / -1; } } @media (max-width: 43.999rem) { .mono { max-width: 8rem; padding: .75rem; } .mono span { font-size: 2.5rem; } } /* ========================================================================== 14. Assistance judiciaire, encadré ========================================================================== */ .box { border: 1px solid var(--rule); background: var(--paper-2); padding: 1.25rem 1.25rem 1.4rem; } .box h2, .box h3 { display: flex; gap: .6rem; align-items: baseline; font-size: 1rem; font-weight: 700; line-height: 1.35; } .box p { margin-top: .5rem; font-size: .9375rem; color: var(--ink-2); } .docs { border-bottom: 1px solid var(--hair); } .docs a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; min-height: 3.5rem; padding: .8rem 0; border-top: 1px solid var(--hair); text-decoration: none; line-height: 1.35; } .docs a:hover .t { color: var(--red); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; } .tag { display: inline-block; padding: .15rem .4rem; border: 1px solid var(--line); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; color: var(--ink-2); } .docs .arr, .ext { color: var(--ink-2); } @media (min-width: 64rem) { .c-docs { grid-column: 4 / -1; } } /* ========================================================================== 15. Contact : formulaire et coordonnées ========================================================================== */ .form { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); row-gap: 1.75rem; } .form .full { grid-column: 1 / -1; } .field label { display: block; margin-bottom: .4rem; font-size: .9375rem; font-weight: 600; } .opt { font-weight: 400; color: var(--ink-2); } /* Champs simplement soulignés, sans aplat ; la zone de message porte un filet de 1 px sur ses quatre côtés pour se lire comme une surface. */ .field input, .field textarea { display: block; width: 100%; min-height: 3rem; padding: .6rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1.0625rem; line-height: 1.45; } .field textarea { resize: vertical; min-height: 10rem; padding: .7rem .75rem; border: 1px solid var(--line); } .field input::placeholder, .field textarea::placeholder { color: var(--ink-2); opacity: 1; } .field input:hover { border-bottom-color: var(--ink); } .field textarea:hover { border-color: var(--ink); } /* Contour transparent (et non « none ») : invisible d’ordinaire, il devient visible en mode contraste élevé, où box-shadow est supprimé. */ .field input:focus-visible, .field textarea:focus-visible, .field input:focus, .field textarea:focus { outline: 2px solid transparent; outline-offset: 0; border-bottom-color: var(--focus); box-shadow: inset 0 -2px 0 var(--focus); } .field textarea:focus { border-color: var(--focus); } .form-note { font-size: .875rem; color: var(--ink-2); max-width: 40em; } .form-note a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .2em; } .form-note a:hover { color: var(--red); } .form-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; } @media (max-width: 35.999rem) { .form { grid-template-columns: 1fr; } .form-foot .btn { width: 100%; } } @media (max-width: 63.999rem) { #contact .c-form { margin-top: 1rem; } } /* Mobile : de l’air entre le bouton d’envoi et les coordonnées ; pas de double filet entre le dernier bloc et l’avertissement. */ @media (max-width: 43.999rem) { .c-coords { margin-top: 1.5rem; } .c-coords > div:last-child { border-bottom: 0; } } .coords { border-top: 1px solid var(--rule); } .coords > div { padding: .9rem 0 1rem; border-bottom: 1px solid var(--hair); } .coords dt { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); } .coords dd { margin: .3rem 0 0; line-height: 1.45; } .coords dd a { text-decoration-thickness: 1px; text-underline-offset: .2em; } .coords dd a:hover { color: var(--red); } .coords .hours { display: block; font-size: .875rem; color: var(--ink-2); margin-top: .2rem; } .coords .big { font-variation-settings: var(--opsz-display); font-size: 1.25rem; font-weight: 600; font-feature-settings: "tnum"; text-decoration: none; } .coords .addr { display: inline-block; text-decoration: none; } .coords .addr:hover .u { text-decoration: underline; } .coords .tap { display: inline-flex; align-items: center; min-height: 44px; } .c-coords { align-self: start; } /* Ordre du source : formulaire puis coordonnées (sur mobile, le formulaire vient d’abord) ; sur grand écran, les coordonnées passent à droite. */ @media (min-width: 64rem) { .c-coords { grid-row: 2 / span 2; } .c-form { grid-row: 3; } } @media (min-width: 44rem) and (max-width: 63.999rem) { .c-form { grid-column: 1 / span 7; grid-row: 4; } .c-coords { grid-column: 8 / -1; grid-row: 3 / span 2; } #contact .lead-text { grid-row: 3; } } .disclaimer { display: grid; gap: .5rem; padding-top: 1.25rem; border-top: 1px solid var(--hair); margin-top: 1rem; } .disclaimer h3 { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); } .disclaimer p { font-size: .9375rem; color: var(--ink-2); max-width: 36em; } /* ========================================================================== 16. Pied de page ========================================================================== */ .site-footer { padding-top: 0; } .foot { border-top: 1px solid var(--rule); padding-top: 1.25rem; row-gap: .5rem; font-size: .9375rem; color: var(--ink-2); } .foot a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } .foot a:hover { color: var(--red); } .foot .arr { display: inline-block; margin-left: .35em; color: var(--ink-2); } .foot ul li + li { margin-top: .15rem; } /* Bloc en ligne (et non flex) : la flèche ↗ suit le texte si le lien passe à la ligne. */ .foot .tap { display: inline-block; min-height: 44px; padding-block: .6rem; line-height: 1.55; } .foot .f1, .foot .f3 { padding-top: .6rem; } @media (min-width: 64rem) { .f1 { grid-column: 1 / span 3; } .f2 { grid-column: 4 / span 3; } .f3 { grid-column: 7 / span 3; } .f4 { grid-column: 10 / -1; } } @media (min-width: 44rem) and (max-width: 63.999rem) { .f1, .f3 { grid-column: 1 / span 6; } .f2, .f4 { grid-column: 7 / -1; } } /* Logotype géant calé sur la largeur de la grille. */ .giant { container-type: inline-size; margin-top: clamp(3rem, 7vw, 6rem); padding-bottom: clamp(1.5rem, 3vw, 3rem); } .giant .logo { display: flex; min-height: 0; padding: 0; font-size: 16.2cqi; line-height: .8; letter-spacing: -.055em; pointer-events: none; } .giant .logo i { width: .2em; height: .2em; margin: 0 .03em 0 .05em; } /* ========================================================================== 17. Gabarit a) page de texte (protection des données) ========================================================================== */ .doc-head { padding-top: clamp(3rem, 7vw, 6.5rem); padding-bottom: clamp(3rem, 5vw, 4.5rem); } .doc-title { margin-top: clamp(1.5rem, 3vw, 2.5rem); font-variation-settings: var(--opsz-display); font-weight: 600; font-size: clamp(2.25rem, 1.2rem + 3.8vw, 4.5rem); line-height: 1; letter-spacing: -.034em; max-width: 16em; text-wrap: balance; } .doc-row { margin-top: clamp(2.5rem, 5vw, 4.5rem); padding-top: 1.25rem; border-top: 1px solid var(--rule); row-gap: 2rem; } .doc-meta { font-size: .9375rem; color: var(--ink-2); } .doc-meta p + p { margin-top: .5rem; } .brief ul { margin-top: .75rem; } .brief li { position: relative; padding-left: 1.1rem; font-size: .9375rem; color: var(--ink-2); line-height: 1.45; } .brief li + li { margin-top: .5rem; } .brief li::before { content: ""; position: absolute; left: 0; top: .5em; width: .4rem; height: .4rem; background: var(--red-fill); } @media (min-width: 64rem) { .doc-head .kicker { grid-column: 1 / span 3; } .doc-title { grid-column: 1 / span 11; } .doc-meta { grid-column: 1 / span 3; grid-row: 1; } .doc-lead { grid-column: 4 / span 6; grid-row: 1; } .doc-row .brief { grid-column: 10 / -1; grid-row: 1; align-self: start; } } @media (min-width: 44rem) and (max-width: 63.999rem) { .doc-lead { grid-column: 1 / span 7; } .doc-row .brief { grid-column: 8 / -1; grid-row: 1 / span 2; align-self: start; } .doc-meta { grid-column: 1 / span 7; } } /* Sommaire : liste de liens d’ancre en rangées filetées, deux colonnes. */ .toc { padding-bottom: clamp(3rem, 6vw, 5rem); } .toc-list { columns: 2; column-gap: var(--gap); counter-reset: toc; } /* Filet haut et bas sur chaque entrée ; la marge de −1 px superpose les filets voisins : chaque colonne est fermée en bas. */ .toc-list li { break-inside: avoid; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin-bottom: -1px; } .toc-list a { display: flex; gap: .85rem; align-items: baseline; min-height: 3rem; padding: .7rem 0; line-height: 1.35; text-decoration: none; } .toc-list a:hover { color: var(--red); } .toc-list .sec-no { flex: none; min-width: 1.6em; font-size: .9375rem; } @media (max-width: 43.999rem) { .toc-list { columns: 1; } } .toc .sec-label { font-weight: 600; } /* Lien de retour : flèche ← placée avant le texte. */ .more.back .arr { margin: 0 .45em 0 0; } .more.back:hover .arr { transform: translateX(-.15em); } /* Flèche en ligne (et non inline-block) : précédée de  , elle ne se sépare ni du lien ni de la ponctuation qui suit. */ .prose a .arr { color: var(--ink-2); } .doc-sec { padding-block: 0 clamp(3rem, 6vw, 5rem); } .doc-sec .aside-note { font-size: .875rem; color: var(--ink-2); } /* Sous 64 rem, le numéro seul est rapproché du titre. */ @media (max-width: 63.999rem) { .doc-sec .sec-rule { row-gap: .5rem; } } .doc-end { padding-bottom: clamp(3rem, 6vw, 5rem); } /* Texte long : mesure de 65–75 caractères, texte à l’encre pleine. */ .prose { max-width: 36em; } .prose > * + * { margin-top: 1rem; } .prose h2 { font-variation-settings: var(--opsz-display); font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); line-height: 1.12; letter-spacing: -.022em; text-wrap: balance; } .prose h2 + * { margin-top: 1.25rem; } .prose h3 { margin-top: 2rem; font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; } .prose h3 + * { margin-top: .5rem; } .prose ul > li, .prose ol > li { position: relative; padding-left: 1.5rem; } .prose li + li { margin-top: .4rem; } .prose ul > li::before { content: ""; position: absolute; left: .15rem; top: .62em; width: .4rem; height: .4rem; background: var(--red-fill); } .prose ol { counter-reset: item; } .prose ol > li { counter-increment: item; } .prose ol > li::before { content: counter(item) "."; position: absolute; left: 0; top: 0; font-weight: 600; color: var(--ink-2); font-feature-settings: "tnum"; } .prose .coords { margin-top: 1.5rem; } .prose .small { font-size: .9375rem; color: var(--ink-2); } .prose strong { font-weight: 600; } /* ========================================================================== 18. Gabarit b) page message (confirmation, erreurs) ========================================================================== */ .msg { padding-top: clamp(2.5rem, 6vw, 5rem); } .msg-block { padding-bottom: clamp(3rem, 7vw, 6rem); } .msg-code { font-variation-settings: var(--opsz-display); font-weight: 300; font-size: clamp(4rem, 2rem + 7vw, 8rem); line-height: .9; letter-spacing: -.05em; font-feature-settings: "tnum"; } .msg-title { margin-top: 1.25rem; font-variation-settings: var(--opsz-display); font-weight: 600; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); line-height: 1.04; letter-spacing: -.028em; max-width: 18em; text-wrap: balance; } .msg-body > .lead-text { margin-top: 1.5rem; } .msg-body > p + p { margin-top: 1rem; } .msg-body > .body-text { margin-top: 1rem; } .msg-body > .copy + .body-text { margin-top: 1.5rem; } .msg-body .actions { margin-top: 2rem; } .copy { margin-top: 2rem; } .copy label { display: block; margin-bottom: .4rem; font-size: .9375rem; font-weight: 600; } .copy textarea { display: block; width: 100%; min-height: 12rem; padding: .7rem .75rem; border: 1px solid var(--line); border-radius: 0; background: var(--paper-2); color: var(--ink); font-size: .9375rem; line-height: 1.5; resize: vertical; } .copy textarea:focus { outline: 2px solid transparent; outline-offset: 0; border-color: var(--focus); box-shadow: inset 0 -2px 0 var(--focus); } .copy .hint { margin-top: .5rem; font-size: .875rem; color: var(--ink-2); } @media (max-width: 63.999rem) { .msg-code { margin-bottom: .5rem; } } @media (max-width: 43.999rem) { .msg-body .actions .btn { width: 100%; } } /* ========================================================================== 19. Mouvement réduit et impression ========================================================================== */ /* Mode contraste élevé (Windows) : contour de focus des champs imposé. */ @media (forced-colors: active) { .field input:focus, .field textarea:focus, .copy textarea:focus { outline: 2px solid CanvasText; outline-offset: 2px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } @media print { /* Noir sur blanc, quel que soit le thème. */ :root, :root[data-theme="dark"], :root:not([data-theme]) { --paper: #fff; --paper-2: #fff; --ink: #000; --ink-2: #333; --line: #666; --rule: #000; --hair: #bbb; --red: #000; --red-fill: #000; --on-red: #fff; color-scheme: light; } body { font-size: 10.5pt; line-height: 1.45; background: #fff; color: #000; } .lead-text { font-size: 12pt; } .skip, .menu-btn, .tools, .bar .cta, .panel, .actions, .panel-cta, .form, .giant, .toc, .doc-end, .more.back, .copy, .msg-body .actions { display: none !important; } .site-header { position: static; border-bottom: 1px solid #000; } .section, .doc-sec { padding-bottom: 1.5rem; } .hero, .doc-head { padding-top: 1rem; padding-bottom: 1.5rem; } .sec-title { font-size: 20pt; } .hero h1, .doc-title { font-size: 26pt; } .step, .offer, .box, .coords > div, .prose li { break-inside: avoid; } h1, h2, h3 { break-after: avoid; } /* Adresse des liens externes de texte courant. */ .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; } }