/* ========================================================================== avocat.anthonioz.ch – Refonte : feuille de style commune Design « origine en verre » (maquette 8, septembre 2026) : bleu Étude, colonne latérale de verre à droite sur grand écran, barre flottante en haut et dock en bas sur mobile, thèmes clair et sombre (attribut data-theme sur , sinon thème du système). Contraste AA vérifié au pire cas (texte sur verre au-dessus du halo le plus défavorable). Pictogrammes : ../img/pictos.svg – Polices : ../fonts ========================================================================== */ /* Polices : Lato (SIL Open Font License 1.1), voir ../fonts/LISEZMOI.txt */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/lato-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/lato-400-italique.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/lato-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: light; --fond: #e9effa; --b1: #8fdff3; --b2: #9fb6ef; --b3: #c8c6f3; --b4: #ffd6cf; --verre: rgba(255, 255, 255, .62); --verre-fort: rgba(255, 255, 255, .84); --verre-puce: rgba(255, 255, 255, .62); --verre-bord: rgba(255, 255, 255, .8); --lisere-1: rgba(255, 255, 255, .95); --lisere-2: rgba(255, 255, 255, .15); --lueur: rgba(255, 255, 255, .4); --ombre: 0 24px 60px -30px rgba(37, 54, 101, .42); --lateral: rgba(58, 91, 184, .88); --lateral-bord: rgba(255, 255, 255, .38); --lateral-filet: rgba(255, 255, 255, .3); --actif-fond: rgba(255, 255, 255, .95); --actif-texte: #34529f; --rdv-fond: #ffffff; --rdv-texte: #253665; --texte: #4c4c4c; --titre: #2b2b2b; --gris: #5a5a5a; --pied-texte: #4c4c4c; --logo-tiers: #000000; --filet-fort: rgba(74, 108, 202, .32); --info-fond: rgba(74, 108, 202, .09); --info-bord: rgba(74, 108, 202, .3); --alerte-fond: rgba(209, 0, 0, .06); --alerte-bord: rgba(209, 0, 0, .28); --rouge-ico: #c00000; --coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E"); --croix: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E"); --filet: rgba(74, 108, 202, .18); --champ: #6b7285; --bleu-titre: #4a6cca; --bleu-lien: #3a59b8; --bleu-survol: #253665; --lien: #253665; --lien-trait: rgba(74, 108, 202, .45); --lien-trait-fort: #4a6cca; --lien-surlignage: rgba(74, 108, 202, .12); --fleche-lien: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23253665' stroke-opacity='.75' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); --fleche-externe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); --bouton: #3f5fbf; --bouton-survol: #253665; --rouge: #d10000; --rouge-survol: #7f0000; --or: #9a7700; --ciel: #2f86c0; --focus: #253665; --grain: .06; --flou: blur(20px) saturate(160%); --police: Lato, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --rayon: 26px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --fond: #081226; --b1: #0e7490; --b2: #2f4aa0; --b3: #4c3aa0; --b4: #9f1239; --verre: rgba(13, 22, 46, .6); --verre-fort: rgba(13, 22, 46, .84); --verre-puce: rgba(255, 255, 255, .07); --verre-bord: rgba(255, 255, 255, .14); --lisere-1: rgba(255, 255, 255, .32); --lisere-2: rgba(255, 255, 255, .03); --lueur: rgba(142, 167, 255, .07); --ombre: 0 24px 60px -28px rgba(0, 0, 0, .75); --lateral: rgba(20, 34, 82, .86); --lateral-bord: rgba(255, 255, 255, .14); --lateral-filet: rgba(255, 255, 255, .14); --actif-fond: rgba(201, 213, 255, .95); --actif-texte: #0b1530; --rdv-fond: #e8edff; --rdv-texte: #0b1530; --texte: #dfe6f3; --titre: #ffffff; --gris: #b8c2d6; --pied-texte: #b8c2d6; --logo-tiers: #ffffff; --filet-fort: rgba(255, 255, 255, .22); --info-fond: rgba(142, 167, 255, .12); --info-bord: rgba(142, 167, 255, .32); --alerte-fond: rgba(255, 110, 110, .1); --alerte-bord: rgba(255, 130, 130, .38); --rouge-ico: #ff8f8f; --filet: rgba(255, 255, 255, .1); --champ: #8b94a8; --bleu-titre: #8ea7ff; --bleu-lien: #a9bdff; --bleu-survol: #d3ddff; --lien: #dbe4ff; --lien-trait: rgba(142, 167, 255, .55); --lien-trait-fort: #8ea7ff; --lien-surlignage: rgba(142, 167, 255, .16); --fleche-lien: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dbe4ff' stroke-opacity='.75' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); --bouton-survol: #2f4aa0; --or: #e6c35c; --ciel: #7cc4f0; --focus: #c9d5ff; --grain: .05; } } :root[data-theme="dark"] { color-scheme: dark; --fond: #081226; --b1: #0e7490; --b2: #2f4aa0; --b3: #4c3aa0; --b4: #9f1239; --verre: rgba(13, 22, 46, .6); --verre-fort: rgba(13, 22, 46, .84); --verre-puce: rgba(255, 255, 255, .07); --verre-bord: rgba(255, 255, 255, .14); --lisere-1: rgba(255, 255, 255, .32); --lisere-2: rgba(255, 255, 255, .03); --lueur: rgba(142, 167, 255, .07); --ombre: 0 24px 60px -28px rgba(0, 0, 0, .75); --lateral: rgba(20, 34, 82, .86); --lateral-bord: rgba(255, 255, 255, .14); --lateral-filet: rgba(255, 255, 255, .14); --actif-fond: rgba(201, 213, 255, .95); --actif-texte: #0b1530; --rdv-fond: #e8edff; --rdv-texte: #0b1530; --texte: #dfe6f3; --titre: #ffffff; --gris: #b8c2d6; --pied-texte: #b8c2d6; --logo-tiers: #ffffff; --filet-fort: rgba(255, 255, 255, .22); --info-fond: rgba(142, 167, 255, .12); --info-bord: rgba(142, 167, 255, .32); --alerte-fond: rgba(255, 110, 110, .1); --alerte-bord: rgba(255, 130, 130, .38); --rouge-ico: #ff8f8f; --filet: rgba(255, 255, 255, .1); --champ: #8b94a8; --bleu-titre: #8ea7ff; --bleu-lien: #a9bdff; --bleu-survol: #d3ddff; --lien: #dbe4ff; --lien-trait: rgba(142, 167, 255, .55); --lien-trait-fort: #8ea7ff; --lien-surlignage: rgba(142, 167, 255, .16); --fleche-lien: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dbe4ff' stroke-opacity='.75' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); --bouton-survol: #2f4aa0; --or: #e6c35c; --ciel: #7cc4f0; --focus: #c9d5ff; --grain: .05; } /* Moins de transparence demandée, ou flou non pris en charge : surfaces opaques */ @media (prefers-reduced-transparency: reduce) { :root { --verre: rgba(255, 255, 255, .95); --verre-fort: #ffffff; --verre-puce: #f1f5fb; --lateral: #3a5bb8; --flou: none; } :root[data-theme="dark"] { --verre: rgba(13, 22, 46, .96); --verre-fort: #0d162e; --verre-puce: #1b2743; --lateral: #142252; } } @media (prefers-reduced-transparency: reduce) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --verre: rgba(13, 22, 46, .96); --verre-fort: #0d162e; --verre-puce: #1b2743; --lateral: #142252; } } @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { :root { --verre: rgba(255, 255, 255, .92); --verre-fort: rgba(255, 255, 255, .97); --lateral: rgba(58, 91, 184, .97); } :root[data-theme="dark"] { --verre: rgba(13, 22, 46, .94); --verre-fort: rgba(13, 22, 46, .98); --lateral: rgba(20, 34, 82, .97); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --verre: rgba(13, 22, 46, .94); --verre-fort: rgba(13, 22, 46, .98); --lateral: rgba(20, 34, 82, .97); } } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } .sans-transition, .sans-transition * { transition: none !important; } body { margin: 0; color: var(--texte); font-family: var(--police); font-size: clamp(1rem, .96rem + .2vw, 1.125rem); line-height: 1.7; -webkit-font-smoothing: antialiased; } h1, h2, h3 { color: var(--titre); font-weight: 700; line-height: 1.25; margin: 0 0 .5em; } p, ul, ol, dl { margin: 0 0 1.1em; } a { color: var(--bleu-lien); text-decoration-thickness: 1px; text-underline-offset: .18em; } a:hover { color: var(--bleu-survol); text-decoration-thickness: 2px; } /* Liens dans le texte courant et les intertitres : encre, soulignement fin et décalé, surlignage doux au survol, petite flèche pour les liens qui ouvrent un nouvel onglet ; une adresse trop longue pour la ligne peut être coupée */ main :is(p, li, td, h2, h3, h4) a:not([class]) { color: var(--lien); text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: var(--lien-trait); text-underline-offset: .32em; border-radius: 3px; overflow-wrap: break-word; transition: text-decoration-color .2s, background-color .2s, box-shadow .2s; } main :is(p, li, td, h2, h3, h4) a:not([class]):hover { color: var(--lien); text-decoration-color: var(--lien-trait-fort); background-color: var(--lien-surlignage); box-shadow: 0 0 0 .14em var(--lien-surlignage); } /* La flèche est dessinée dans la marge intérieure d’un gluon de mots (U+2060, invisible et insécable) : elle reste collée au dernier mot et ne part jamais seule à la ligne. C’est une image de fond aux couleurs des liens (--fleche-lien, un jeton par thème) et non un masque : sur iPhone, Safari affichait un rectangle gris à la place du masque appliqué à cette boîte en ligne. */ main :is(p, li, td, h2, h3, h4) a:not([class])[target="_blank"]::after { content: "\2060"; padding-left: .88em; background: var(--fleche-lien) no-repeat right center / .68em .68em; } @media (prefers-reduced-motion: reduce) { main :is(p, li, td, h2, h3, h4) a:not([class]) { transition: none; } } strong { color: var(--titre); } sup { font-size: .7em; line-height: 0; position: relative; top: -.45em; vertical-align: baseline; } abbr[title] { text-decoration: none; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; } .entete :focus-visible, .info :focus-visible { outline-color: #ffffff; } .vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ico { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .skip { position: absolute; left: .75rem; top: -10rem; z-index: 100; padding: .6rem 1rem; border-radius: 10px; background: var(--bouton); color: #ffffff; font-weight: 700; } .skip:focus { top: .75rem; color: #ffffff; } /* Fond : halos (couleurs du bandeau actuel) et grain */ .aurore { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: var(--fond); } .halo { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; opacity: .85; } .h1 { top: -24vmax; left: -18vmax; background: radial-gradient(closest-side, var(--b1), transparent); } .h2 { top: -14vmax; right: -20vmax; background: radial-gradient(closest-side, var(--b2), transparent); } .h3 { bottom: -30vmax; left: 4vw; background: radial-gradient(closest-side, var(--b3), transparent); } .h4 { bottom: -28vmax; right: -12vmax; background: radial-gradient(closest-side, var(--b4), transparent); } @media (prefers-reduced-motion: no-preference) and (hover: hover) and (min-width: 64em) { .h1 { animation: derive-a 44s ease-in-out infinite alternate; } .h2 { animation: derive-b 50s ease-in-out infinite alternate; } .h3 { animation: derive-c 56s ease-in-out infinite alternate; } .h4 { animation: derive-a 62s ease-in-out infinite alternate-reverse; } } @keyframes derive-a { to { transform: translate(8vw, 7vh) scale(1.1); } } @keyframes derive-b { to { transform: translate(-10vw, 9vh) scale(.92); } } @keyframes derive-c { to { transform: translate(7vw, -9vh) scale(1.08); } } .grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Matière de verre */ .verre { position: relative; background-color: var(--verre); -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); border: 1px solid var(--verre-bord); box-shadow: var(--ombre); } .verre::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, var(--lisere-1), var(--lisere-2) 38%, var(--lisere-2) 62%, var(--lisere-1)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .verre--fort { background-color: var(--verre-fort); } /* Mise en page : colonne latérale à droite (grand écran), barres haute et basse (mobile) */ .page { display: flex; flex-direction: column; gap: .9rem; padding: .75rem; } main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } @media (min-width: 64em) { .page { display: grid; grid-template-columns: minmax(0, 58rem) 19.5rem; grid-template-areas: "annonce cote" "main cote" "pied cote"; justify-content: center; align-items: start; gap: 1.1rem; padding: 1.1rem; } .annonce { grid-area: annonce; } .entete { grid-area: cote; } main { grid-area: main; gap: 1.1rem; } .pied { grid-area: pied; } } /* Bandeau d’annonce */ .annonce { padding: .6rem 1rem; border-radius: 18px; display: flex; gap: .6rem; align-items: flex-start; justify-content: center; font-size: .92rem; line-height: 1.45; } .annonce p { margin: 0; } .annonce .ico { color: var(--bleu-lien); margin-top: .12rem; } @media (max-width: 35.99em) { .annonce { font-size: .85rem; line-height: 1.35; justify-content: flex-start; } } /* Bandeau en réserve (attribut hidden) : masqué, et la colonne principale remonte au niveau de la colonne latérale */ .annonce[hidden] { display: none; } @media (min-width: 64em) { .page:has(> .annonce[hidden]) { grid-template-areas: "main cote" "pied cote"; } } /* En-tête : barre bleue flottante (mobile) / colonne latérale (grand écran) */ .entete { position: sticky; top: .75rem; z-index: 30; display: flex; align-items: center; gap: .5rem; padding: .45rem .5rem .45rem .65rem; border-radius: 999px; color: #ffffff; background-color: var(--lateral); -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); border: 1px solid var(--lateral-bord); box-shadow: var(--ombre); } .entete a { color: #ffffff; } .marque { display: flex; align-items: center; gap: .6rem; margin-right: auto; min-width: 0; text-decoration: none; } /* Logo : balance carrée dans la barre mobile, logo rectangulaire « Avocat Genève » dans la colonne latérale */ .logo { display: none; height: auto; flex: none; } .logo-carre { display: block; width: 2.5rem; height: 2.5rem; flex: none; } .marque__nom { display: block; font-weight: 700; font-size: 1rem; line-height: 1.2; } .titres, .lateral__rdv, .nav-lateral, .lateral__bas { display: none; } .outils { display: flex; align-items: center; gap: .3rem; } .bouton-rond { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .12); color: #ffffff; cursor: pointer; } .bouton-rond:hover { background: rgba(10, 20, 60, .3); color: #ffffff; } .bouton-rond--plein { background: var(--rdv-fond); color: var(--rdv-texte); border-color: var(--rdv-fond); } .entete a.bouton-rond--plein { color: var(--rdv-texte); } .bouton-rond--plein:hover { background: var(--rdv-fond); color: var(--rdv-texte); } /* Bouton de langue (barre mobile) : code de l’autre langue, « EN » sur les pages françaises, « FR » sur les pages anglaises */ .bouton-rond.langue { font-size: .8rem; font-weight: 700; letter-spacing: .04em; line-height: 1; text-decoration: none; } /* Barre mobile à trois boutons (langue, thème, rendez-vous) : boutons de la taille du logo carré, nom sur deux lignes (« Mᵉ Jean-Philippe » / « Anthonioz ») dès 360 px */ .outils .bouton-rond { width: 2.5rem; height: 2.5rem; } /* Boutons secondaires en simple contour : le texte « EN » repose sur le bleu de la barre (contraste AA) */ .outils .bouton-rond:not(.bouton-rond--plein) { background: transparent; } .outils .bouton-rond:not(.bouton-rond--plein):hover { background: rgba(10, 20, 60, .3); } @media (max-width: 24.99em) { .entete { padding-left: .55rem; } .marque { gap: .5rem; } .marque__nom { font-size: .94rem; } } @media (max-width: 22.49em) { .logo-carre { width: 2.25rem; height: 2.25rem; } .outils .bouton-rond { width: 2.35rem; height: 2.35rem; } } .theme .i-soleil { display: none; } .theme[aria-pressed="true"] .i-soleil { display: block; } .theme[aria-pressed="true"] .i-lune { display: none; } .no-js .theme { display: none; } @media (min-width: 64em) { .entete { top: 1.1rem; height: calc(100vh - 2.2rem); height: calc(100dvh - 2.2rem); flex-direction: column; align-items: stretch; gap: 0; padding: 1.6rem 1.35rem 1.1rem; border-radius: 28px; overflow-y: auto; text-align: center; } .marque { flex-direction: column; margin: 0; gap: .9rem; } .logo { display: block; width: 8.5rem; } .logo-carre { display: none; } .marque__nom { font-size: 1.45rem; } .titres { display: block; margin: .6rem 0 1.1rem; font-style: italic; font-size: .95rem; line-height: 1.5; } .lateral__rdv { display: grid; gap: .4rem; margin-bottom: 1rem; } .lateral__rdv .btn-rdv { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .5rem .75rem; border-radius: 12px; background: var(--rdv-fond); color: var(--rdv-texte); font-size: .95rem; font-weight: 700; white-space: nowrap; text-decoration: none; } .lateral__rdv .btn-rdv:hover { box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); } .lateral__tel { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.5rem; font-weight: 700; text-decoration: none; } .lateral__tel:hover { text-decoration: underline; } .nav-lateral { display: block; } .outils { display: none; } .lateral__bas { display: flex; flex-direction: column; align-items: center; gap: .65rem; margin-top: auto; padding-top: 1.2rem; } } .nav-lateral ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lateral-filet); } .nav-lateral li { border-bottom: 1px solid var(--lateral-filet); } .nav-lateral a { display: block; margin: .1rem 0; padding: .45rem .5rem; border-radius: 12px; font-weight: 700; line-height: 1.35; text-decoration: none; } .nav-lateral a:hover { background: rgba(10, 20, 60, .3); color: #ffffff; } .nav-lateral a.is-active { background: var(--actif-fond); color: var(--actif-texte); } .lang { margin: 0; font-size: .92rem; white-space: nowrap; } .lang span[aria-current] { font-weight: 700; padding: .1rem .6rem; border-radius: 999px; background: var(--actif-fond); color: var(--actif-texte); } .lang a { padding: .1rem .4rem; } /* Colonne latérale sur écran peu haut (portables) : resserrer plutôt que faire défiler */ @media (min-width: 64em) and (max-height: 49em) { .entete { padding-top: 1.2rem; padding-bottom: .85rem; } .marque { gap: .7rem; } .logo { width: 7rem; } .titres { margin: .45rem 0 .85rem; } .lateral__rdv { margin-bottom: .8rem; } .lateral__tel { min-height: 2.25rem; } .nav-lateral a { padding-top: .34rem; padding-bottom: .34rem; } .lateral__bas { gap: .5rem; padding-top: .85rem; } } @media (min-width: 64em) and (max-height: 45em) { .entete { padding-top: 1rem; padding-bottom: .75rem; } .marque { gap: .55rem; } .logo { width: 5.75rem; } .marque__nom { font-size: 1.25rem; } .titres { margin: .35rem 0 .7rem; font-size: .9rem; line-height: 1.4; } .lateral__rdv { gap: .3rem; margin-bottom: .6rem; } .lateral__rdv .btn-rdv { min-height: 2.4rem; } .lateral__tel { min-height: 2rem; } .nav-lateral a { padding-top: .24rem; padding-bottom: .24rem; } .lateral__bas { gap: .45rem; padding-top: .7rem; } .lateral__bas .bouton-rond { width: 2.4rem; height: 2.4rem; } } @media (min-width: 64em) and (max-height: 40em) { .titres { display: none; } .lateral__rdv { margin-top: .7rem; } } /* Dock (mobile et tablette) */ .dock { position: fixed; z-index: 30; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); gap: .15rem; padding: .3rem; border-radius: 24px; } .dock a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 3.4rem; border-radius: 18px; color: var(--texte); text-decoration: none; font-size: .72rem; font-weight: 700; } .dock a:hover { background: var(--verre-puce); color: var(--texte); } .dock a.is-active { background: var(--bouton); color: #ffffff; } .dock .ico { width: 1.35rem; height: 1.35rem; } /* Marges de défilement : ni la cible d’une ancre ni l’élément qui a le focus ne passent sous la barre du haut ou le dock (WCAG 2.4.11) */ @media (max-width: 63.99em) { body { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); } html { scroll-padding-top: 5.5rem; scroll-padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); } } @media (min-width: 64em) { .dock { display: none; } html { scroll-padding-top: 1.1rem; } } /* Cartes de section */ .carte { border-radius: var(--rayon); padding: 1.75rem 1.35rem 1.25rem; background-image: radial-gradient(34rem circle at var(--mx, -50rem) var(--my, -50rem), var(--lueur), transparent 60%); } @media (min-width: 48em) { .carte { padding: 2.5rem 2.75rem 2rem; } } .sec-head { margin-bottom: 1.5rem; } .sec-head h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); margin: 0; } .sec-head p { font-size: 1.15rem; color: var(--gris); margin: .3rem 0 0; line-height: 1.45; } /* En-tête avec pictogramme : colonne à droite, centrée verticalement sur le titre et le sous-titre */ .sec-head--ico { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; align-items: center; } .sec-head--ico > :not(.sec-ico) { grid-column: 1; } .sec-ico { grid-column: 2; grid-row: 1 / span 2; width: 3.2rem; height: 3.2rem; stroke-width: 1.6; } @media (max-width: 39.99em) { .sec-ico { display: none; } .sec-head--ico { display: block; } } /* Accueil */ .bandeau { position: relative; overflow: hidden; height: 6rem; margin: -1.75rem -1.35rem 1.75rem; border-radius: var(--rayon) var(--rayon) 0 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .1) 0 1px, transparent 1px 16px), linear-gradient(45deg, rgba(0, 228, 255, .5) 0%, rgba(74, 108, 202, .88) 68%, rgba(61, 91, 179, .95) 100%); } .bandeau::after { content: "§"; position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); font: 400 5rem/1 Georgia, "Times New Roman", serif; color: rgba(255, 255, 255, .28); } @media (min-width: 48em) { .bandeau { height: 10rem; margin: -2.5rem -2.75rem 2.25rem; } .bandeau::after { right: 3rem; font-size: 8.5rem; } } /* Titre de page : refonte.js le réduit pour qu’il tienne sur une ligne (voir « Titre de page ») */ .major { font-size: clamp(2.4rem, 1.7rem + 3vw, 3.6rem); color: var(--bleu-titre); margin: 0; line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; } .major-sub { font-size: clamp(1.2rem, 1rem + 1vw, 1.65rem); font-weight: 700; color: var(--gris); margin: .5rem 0 .4rem; line-height: 1.3; } .hero-titres { font-style: italic; color: var(--gris); margin: 0 0 .5rem; } @media (min-width: 64em) { .hero-titres { display: none; } } @media (min-width: 64em) and (max-height: 40em) { .hero-titres { display: block; } } .situations { list-style: none; padding: 0; margin: 1.5rem 0 1.75rem; } .situations li + li { border-top: 1px solid var(--filet); } .situations a { display: flex; gap: 1rem; align-items: center; padding: .8rem .6rem; border-radius: 14px; color: inherit; text-decoration: none; transition: background-color .15s; } .situations a:hover { background: var(--verre-puce); color: var(--texte); } .situations a:hover .s-txt { text-decoration: underline; text-underline-offset: .18em; } .tuile-ico { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 2px solid var(--bleu-lien); border-radius: 10px; color: var(--bleu-lien); background: var(--verre-puce); } .tuile-ico .ico { width: 1.35rem; height: 1.35rem; } .s-go { margin-left: auto; color: var(--bleu-lien); } /* Boutons (verre brillant) */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 2.9rem; padding: .55rem 1.3rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .28); font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center; cursor: pointer; color: #ffffff; transition: background-color .15s, transform .15s, box-shadow .15s; } .btn .ico { width: 1.15em; height: 1.15em; } .btn--bleu { background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%), var(--bouton); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 22px -12px rgba(37, 54, 101, .8); } .btn--bleu:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 55%), var(--bouton-survol); color: #ffffff; } .btn--rouge { background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%), var(--rouge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 22px -12px rgba(127, 0, 0, .8); } .btn--rouge:hover { background: var(--rouge-survol); color: #ffffff; } .btn--bloc { display: flex; width: 100%; } /* Bouton secondaire (contour), p. ex. dans les outils : « Agrandir », « Réinitialiser » */ .btn--contour { background: var(--verre-puce); color: var(--titre); border: 1.5px solid var(--champ); box-shadow: none; } .btn--contour:hover { color: var(--lien); border-color: var(--bleu-lien); } .btn--contour[aria-pressed="true"] { border-color: var(--bleu-lien); box-shadow: inset 0 0 0 1px var(--bleu-lien); } @media (prefers-reduced-motion: no-preference) { .btn:hover { transform: translateY(-1px); } } @media (prefers-reduced-motion: reduce) { .btn, .situations a { transition: none; } } /* Rangées de boutons : grille 2 × 2 à largeurs égales (comme la grille « grid-4 » du site actuel), une seule colonne quand la carte est trop étroite pour les libellés */ .actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; list-style: none; padding: 0; margin: 1.75rem 0 .5rem; } .actions > li { display: flex; min-width: 0; } .actions .btn { flex: 1; min-height: 3.1rem; padding: .6rem 1rem; white-space: normal; } @media (min-width: 38.5em) { .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; } } /* Domaines : pastilles bleues */ .domaines { list-style: none; padding: 0; display: grid; gap: .3rem 1.5rem; margin: 1.5rem 0; } @media (min-width: 40em) { .domaines { grid-template-columns: 1fr 1fr; } } .dom { display: flex; gap: .9rem; align-items: flex-start; padding: .7rem .6rem; border-radius: 14px; color: inherit; text-decoration: none; } a.dom:hover { background: var(--verre-puce); color: inherit; } a.dom:hover .d-titre { text-decoration: underline; text-underline-offset: .18em; } .pastille { flex: none; width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border-radius: 50%; color: #ffffff; background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 48%), var(--bouton); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .18), 0 8px 16px -8px rgba(37, 54, 101, .7); } .pastille .ico { width: 1.2rem; height: 1.2rem; } .d-titre { display: block; font-weight: 700; color: var(--titre); line-height: 1.35; } a.dom .d-titre { color: var(--bleu-lien); } .d-detail { display: block; font-size: .92rem; color: var(--gris); font-style: italic; line-height: 1.45; margin-top: .15rem; } /* Citation */ .carte--citation { text-align: center; padding-top: 2.25rem; padding-bottom: 2.25rem; } .carte--citation figure { margin: 0 auto; max-width: 36rem; } .latin { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.1rem); font-style: italic; color: var(--titre); line-height: 1.35; margin: 0; } .latin .q { color: var(--or); font-style: normal; font-weight: 700; } .carte--citation figcaption { color: var(--gris); margin-top: .5rem; } /* Documents à télécharger : rangées de verre (jusqu’à 4 documents) */ .docs { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .5rem; } .doc { display: flex; align-items: center; gap: .85rem; padding: .8rem 1rem; border-radius: 16px; background: var(--verre-puce); border: 1px solid var(--verre-bord); color: var(--titre); text-decoration: none; line-height: 1.4; transition: background-color .2s, border-color .2s; } .doc:hover { background: var(--verre-fort); border-color: var(--lien-trait); color: var(--titre); } .doc .doc-ico { color: var(--lien); } .doc-titre { flex: 1; min-width: 0; font-size: .95rem; } .doc:hover .doc-titre { text-decoration: underline; text-decoration-color: var(--lien-trait-fort); text-underline-offset: .3em; } .doc-type { flex: none; padding: .15rem .55rem; border-radius: 999px; border: 1px solid var(--lien-trait); color: var(--lien); font-size: .7rem; font-weight: 700; letter-spacing: .08em; } .doc[rel~="external"]::after { content: ""; flex: none; width: .75rem; height: .75rem; background-color: var(--lien); opacity: .75; -webkit-mask: var(--fleche-externe) no-repeat center / contain; mask: var(--fleche-externe) no-repeat center / contain; } .docs-titre { margin: 1.75rem 0 .65rem; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); } /* Liste compacte (validée, en réserve), automatique dès 5 documents (ou classe docs--compact) : un seul panneau, rangées fines séparées par un filet, format en tête de ligne, deux colonnes si la place le permet. Exemple de balisage en commentaire dans la section Divorce. */ :is(.docs--compact, .docs:has(> li:nth-child(5))) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 0 1.5rem; padding: 0 .75rem; border-radius: 18px; background: var(--verre-puce); border: 1px solid var(--verre-bord); overflow: hidden; } :is(.docs--compact, .docs:has(> li:nth-child(5))) > li { box-shadow: 0 -1px 0 var(--filet); } :is(.docs--compact, .docs:has(> li:nth-child(5))) .doc { gap: .8rem; min-height: 3rem; padding: .55rem .4rem; border: 0; border-radius: 10px; background: none; } :is(.docs--compact, .docs:has(> li:nth-child(5))) .doc:hover { background: var(--lien-surlignage); } :is(.docs--compact, .docs:has(> li:nth-child(5))) .doc:focus-visible { outline-offset: -3px; } :is(.docs--compact, .docs:has(> li:nth-child(5))) .doc-ico { display: none; } :is(.docs--compact, .docs:has(> li:nth-child(5))) .doc-titre { font-size: .9rem; line-height: 1.35; } :is(.docs--compact, .docs:has(> li:nth-child(5))) .doc-type { order: -1; min-width: 3.2rem; padding: .2rem .35rem; border: 0; border-radius: 6px; background: var(--lien-surlignage); text-align: center; font-size: .66rem; } /* Divorce : ruban */ .carte--divorce { overflow: hidden; } .carte--divorce::before { inset: 0; } .carte--divorce .sec-head { padding-right: 4.5rem; } .ruban { position: absolute; top: 1.45rem; right: -3.4rem; width: 13rem; margin: 0; transform: rotate(45deg); padding: .45rem 0; text-align: center; color: #ffffff; font-weight: 700; letter-spacing: .02em; background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 60%), var(--rouge); box-shadow: 0 6px 14px -6px rgba(127, 0, 0, .7); } /* FAQ */ .faq details { margin-bottom: .6rem; border-radius: 14px; background: var(--verre-puce); border: 1px solid var(--verre-bord); } .faq summary { list-style: none; cursor: pointer; position: relative; padding: .9rem 3.25rem .9rem 1.15rem; font-weight: 700; color: var(--titre); border-radius: 14px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: 1.2rem; top: calc(50% - .45rem); width: .9rem; height: .9rem; background: linear-gradient(var(--bleu-lien), var(--bleu-lien)) center / 100% 2px no-repeat, linear-gradient(var(--bleu-lien), var(--bleu-lien)) center / 2px 100% no-repeat; } .faq details[open] summary::after { background: linear-gradient(var(--bleu-lien), var(--bleu-lien)) center / 100% 2px no-repeat; } .faq .reponse { padding: 0 1.15rem 1rem; } .faq .reponse p:last-child { margin-bottom: 0; } /* Contact */ .info { display: flex; gap: .7rem; align-items: flex-start; margin: 0 0 1.5rem; padding: .9rem 1.2rem; border-radius: 14px; color: #ffffff; font-weight: 700; background-color: var(--lateral); border: 1px solid var(--lateral-bord); } .info .ico { margin-top: .2rem; } .info strong { color: #ffffff; } /* Coordonnées : cartes de verre, la carte entière est cliquable (lien étiré) */ .coord { display: grid; gap: .7rem; margin: 2rem 0; } @media (min-width: 40em) { .coord { grid-template-columns: 1fr 1fr; } } .coord-carte { position: relative; display: flex; align-items: flex-start; gap: .9rem; min-width: 0; padding: 1rem 1.1rem; border-radius: 18px; background: var(--verre-puce); border: 1px solid var(--verre-bord); transition: background-color .2s, border-color .2s; } .coord-carte:has(.coord-principal):hover { background: var(--verre-fort); border-color: var(--lien-trait); } .coord-ico { flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; color: #ffffff; background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 48%), var(--bouton); box-shadow: 0 6px 14px -8px rgba(37, 54, 101, .7); } .coord-ico .ico { width: 1.15rem; height: 1.15rem; } .coord-corps { flex: 1; min-width: 0; } .coord-etiquette { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); } .coord-valeur { display: block; margin-top: .1rem; font-size: 1.1rem; font-weight: 700; line-height: 1.35; color: var(--titre); overflow-wrap: anywhere; } a.coord-principal { text-decoration: none; } a.coord-principal:hover { color: var(--titre); } a.coord-principal::before { content: ""; position: absolute; inset: 0; border-radius: inherit; } @supports selector(:has(*)) { a.coord-principal:focus-visible { outline: none; } .coord-carte:has(.coord-principal:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; } } .coord-note { display: block; margin-top: .25rem; font-size: .9rem; line-height: 1.45; color: var(--gris); } .coord-texte { margin: .2rem 0 0; font-size: .95rem; line-height: 1.6; } .coord-fleche { flex: none; align-self: center; color: var(--gris); transition: transform .2s, color .2s; } .coord-carte:hover .coord-fleche { transform: translateX(3px); color: var(--lien); } a.coord-renvoi { position: relative; z-index: 1; display: inline-block; margin-top: .3rem; font-size: .88rem; color: var(--lien); text-decoration: underline; text-decoration-color: var(--lien-trait); text-underline-offset: .3em; } a.coord-renvoi:hover { color: var(--lien); text-decoration-color: var(--lien-trait-fort); } .pilules { list-style: none; margin: .55rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; } .pilule { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.3rem; padding: .3rem .8rem; border-radius: 999px; background: var(--verre-fort); border: 1px solid var(--verre-bord); color: var(--lien); font-size: .88rem; font-weight: 700; text-decoration: none; transition: border-color .2s; } .pilule:hover { color: var(--lien); border-color: var(--lien-trait-fort); } .pilule .ico { width: 1.1em; height: 1.1em; color: var(--logo-tiers); } @media (prefers-reduced-motion: reduce) { .coord-carte, .coord-fleche, .doc, .pilule { transition: none; } } .form-bloc { border-top: 1px solid var(--filet); padding-top: 1.75rem; margin-top: 1.75rem; } .form-bloc h3 { font-size: 1.3rem; } .form { display: grid; gap: 1rem; } @media (min-width: 40em) { .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } } .form label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .3rem; color: var(--titre); } .form .opt { font-weight: 400; color: var(--gris); } .form input, .form textarea { width: 100%; font: inherit; color: var(--texte); background: var(--verre-puce); border: 1.5px solid var(--champ); border-radius: 12px; padding: .65rem .85rem; } .form input:focus, .form textarea:focus { border-color: var(--bleu-lien); } .form textarea { min-height: 9rem; resize: vertical; } .form-note { font-size: .9rem; color: var(--gris); margin: 0; } .form-status { font-weight: 700; margin: 0; } .avertissement { margin-top: 1.75rem; padding: 1rem 1.2rem; border: 1px dashed var(--champ); border-radius: 14px; font-size: .88rem; line-height: 1.6; color: var(--gris); } .avertissement strong { color: var(--titre); } /* Pied de page : simple colophon sous un filet, sans carte (liens, puis mentions) */ .pied { margin: .5rem 1.35rem 0; padding: .9rem 0 .3rem; border-top: 1px solid var(--filet); font-size: .82rem; line-height: 1.5; color: var(--pied-texte); } @media (min-width: 48em) { .pied { margin-inline: 2.75rem; } } .pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.4rem; } .pied ul + ul { margin-top: .35rem; } .pied a { display: inline-block; padding: .2rem 0; color: var(--lien); text-decoration: none; } .pied a:hover { color: var(--lien); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--lien-trait-fort); text-underline-offset: .3em; } /* ========================================================================== Pages de domaine (p. ex. divorce.html) ========================================================================== */ /* Colonne latérale : sommaire long, seule la liste défile si la hauteur manque */ @media (min-width: 64em) { .nav-lateral { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -.4rem; padding: .3rem .4rem; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .4) transparent; } } .nav-lateral .nav-retour a { display: flex; align-items: center; justify-content: center; gap: .4rem; font-weight: 400; font-size: .92rem; } .nav-lateral .nav-retour .ico { width: 1rem; height: 1rem; } /* Bloc spécial « contour prisme » (partenariat enregistré) : le liseré de verre prend les six couleurs arc-en-ciel de la page d’origine ; texte et fond inchangés */ .carte--prisme { border-color: transparent; } .carte--prisme::before { padding: 2px; background: linear-gradient(120deg, #d04b36, #e36511, #ffba00, #00b180, #147aab, #675997); } /* Bandeau sans signe § (page avec ruban) ; le ruban passe au-dessus du bandeau */ .bandeau--sobre::after { content: none; } .ruban { z-index: 2; } /* Fil d’Ariane */ .fil-ariane ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .55rem; margin: 0 0 .8rem; padding: 0; font-size: .92rem; color: var(--gris); } .fil-ariane li + li::before { content: ""; display: inline-block; width: .38em; height: .38em; margin: 0 .6rem .12em 0; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); } .fil-ariane a { color: var(--lien); text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: var(--lien-trait); text-underline-offset: .3em; } .fil-ariane a:hover { color: var(--lien); text-decoration-color: var(--lien-trait-fort); } .fil-ariane [aria-current] { color: var(--titre); font-weight: 700; } /* Intertitres et listes du texte courant (pages de domaine) */ /* .intertitre : intertitre d’introduction en h2 (plan des titres), avec l’apparence des intertitres h3 */ .carte > h3:not([class]), .carte > h2.intertitre { font-size: 1.25rem; margin: 2rem 0 .7rem; } .carte > h4:not([class]) { font-size: 1.05rem; color: var(--titre); margin: 1.5rem 0 .5rem; } .carte > .sec-head + :is(h3, h4):not([class]) { margin-top: 0; } :is(.reponse, .note-corps) :is(h3, h4):not([class]) { font-size: 1rem; color: var(--titre); margin: 1rem 0 .4rem; } :is(.carte, .reponse, .note-corps) > :is(ul, ol):not([class]) { padding-left: 1.4rem; } :is(.carte, .reponse, .note-corps) > :is(ul, ol):not([class]) > li { margin-bottom: .45rem; } :is(.carte, .reponse, .note-corps) > :is(ul, ol):not([class]) > li::marker { color: var(--bleu-titre); } /* Bouton « Retourner au site principal » en fin de page : même espacement que l’avertissement au-dessus */ .retour-accueil { margin: 1.75rem 0 0; } /* Lien vers la version anglaise */ .lien-langue { margin: .9rem 0 1.4rem; } /* Encadrés : neutre (« à retenir »), information, attention */ .note { display: flex; gap: .8rem; align-items: flex-start; margin: 0 0 1.4rem; padding: 1rem 1.15rem; border-radius: 16px; background: var(--note-fond, var(--verre-puce)); border: 1px solid var(--note-bord, var(--verre-bord)); } .note > .ico { flex: none; width: 1.3rem; height: 1.3rem; margin-top: .22rem; color: var(--note-ico, var(--gris)); } .note-corps { flex: 1; min-width: 0; } .note-corps > :last-child { margin-bottom: 0; } .note-corps .docs, .note-corps .actions { margin-bottom: 0; } .note-corps .actions { margin-top: 1rem; } .note--info { --note-fond: var(--info-fond); --note-bord: var(--info-bord); --note-ico: var(--bleu-lien); } .note--attention { --note-fond: var(--alerte-fond); --note-bord: var(--alerte-bord); --note-ico: var(--rouge-ico); } .carte--note { padding-top: 1.25rem; padding-bottom: 1.25rem; } /* Documents dans un encadré : rangée plus serrée ; titres longs coupés au besoin sur petit écran */ .docs { grid-template-columns: minmax(0, 1fr); } .doc-titre { overflow-wrap: anywhere; } .note .doc { padding: .6rem .75rem; gap: .6rem; } @media (max-width: 35.99em) { .note { padding: .85rem .9rem; gap: .6rem; } .etapes > li { padding-left: 2.9rem; } } .carte--note .note { margin: 0; background: none; border: 0; padding: 0; } /* Remarque en ligne (dans une réponse) */ .remarque { display: flex; gap: .55rem; align-items: flex-start; } .remarque > .ico { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .32rem; color: var(--bleu-lien); } .remarque--alerte > .ico { color: var(--rouge-ico); } /* Réponses repliables dans une section (même présentation que la FAQ) :
*/ .questions { margin-top: 1.75rem; } .faq .reponse > :last-child { margin-bottom: 0; } /* Table des matières */ .sommaire ol { columns: 2 15rem; column-gap: 2.5rem; margin: 0; padding-left: 1.6rem; } .sommaire li { break-inside: avoid; padding: .22rem 0; } .sommaire li::marker { color: var(--bleu-titre); font-weight: 700; } .sommaire a { color: var(--lien); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: var(--lien-trait); text-underline-offset: .3em; } .sommaire a:hover { color: var(--lien); text-decoration-color: var(--lien-trait-fort); } .maj { margin: 1.25rem 0 0; font-size: .85rem; color: var(--gris); text-align: right; } /* Lien « imprimer » */ .imprimer { margin: -.5rem 0 1.25rem; text-align: right; font-size: .92rem; } .imprimer a { display: inline-flex; align-items: center; gap: .4rem; color: var(--lien); text-decoration: underline; text-decoration-color: var(--lien-trait); text-underline-offset: .3em; } .imprimer a:hover { color: var(--lien); text-decoration-color: var(--lien-trait-fort); } /* Forfait : ce qui est inclus / non inclus */ .forfait-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1rem; margin: 1.5rem 0; } .forfait-bloc { padding: 1.15rem 1.25rem .5rem; border-radius: 18px; background: var(--verre-puce); border: 1px solid var(--verre-bord); } .forfait-bloc h3 { font-size: 1.1rem; margin: 0 0 .85rem; } .forfait-bloc > p { font-size: .95rem; line-height: 1.55; } .liste-coches { list-style: none; margin: 0 0 .75rem; padding: 0; } .liste-coches li { position: relative; padding-left: 1.8rem; margin-bottom: .7rem; font-size: .95rem; line-height: 1.55; } .liste-coches li::before { content: ""; position: absolute; left: 0; top: .22rem; width: 1.15rem; height: 1.15rem; background-color: var(--bleu-lien); -webkit-mask: var(--coche) no-repeat center / contain; mask: var(--coche) no-repeat center / contain; } .liste-coches--non li::before { background-color: var(--rouge-ico); -webkit-mask-image: var(--croix); mask-image: var(--croix); } /* Notes numérotées (façon notes de bas de page) : appel en exposant dans le texte (), notes en petit sous un filet (ol.liste-notes, role="list") ; le numéro de chaque note (a.num-note) ramène à son appel */ .appel-note { padding: 0 .12em; border-radius: 3px; font-weight: 700; color: var(--lien); text-decoration: none; } .appel-note:hover { color: var(--lien); background-color: var(--lien-surlignage); } .liste-notes { list-style: none; margin: 0 0 1.1em; padding: .85rem 0 0; border-top: 1px solid var(--filet); font-size: .88rem; line-height: 1.55; color: var(--gris); } .liste-notes > li { position: relative; padding-left: 1.35rem; margin-bottom: .45rem; } .num-note { position: absolute; left: 0; top: 0; font-weight: 700; color: var(--lien); text-decoration: none; } .num-note:hover { color: var(--lien); text-decoration: underline; } /* Note ou appel atteint par un lien : surlignage doux pour le repérer */ .liste-notes > li:target, .appel-note:target { background-color: var(--lien-surlignage); box-shadow: 0 0 0 .3em var(--lien-surlignage); border-radius: 4px; } /* Parcours en quatre temps */ .parcours { list-style: none; margin: 1.5rem 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem .75rem; counter-reset: pas; } @media (min-width: 40em) { .parcours { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .parcours > li { position: relative; counter-increment: pas; } .parcours-pas { display: flex; flex-direction: column; align-items: center; gap: .65rem; text-align: center; color: var(--titre); font-weight: 700; font-size: .95rem; line-height: 1.3; text-decoration: none; } a.parcours-pas:hover { color: var(--titre); } a.parcours-pas:hover .parcours-texte { text-decoration: underline; text-decoration-color: var(--lien-trait-fort); text-underline-offset: .3em; } .parcours .pastille { position: relative; width: 3.6rem; height: 3.6rem; } .parcours .pastille .ico { width: 1.5rem; height: 1.5rem; } .parcours .pastille::after { content: counter(pas); content: counter(pas) / ""; position: absolute; top: -.3rem; right: -.35rem; width: 1.45rem; height: 1.45rem; display: grid; place-items: center; border-radius: 50%; font-size: .78rem; font-weight: 700; color: var(--actif-texte); background: var(--actif-fond); box-shadow: 0 2px 6px -2px rgba(37, 54, 101, .5); } @media (min-width: 40em) { .parcours > li:not(:last-child)::after { content: ""; position: absolute; top: 1.8rem; left: calc(50% + 2.3rem); width: calc(100% - 4.6rem + .75rem); height: 2px; border-radius: 2px; background: var(--filet-fort); } } /* Étapes détaillées (ligne de temps numérotée) */ .etapes { list-style: none; margin: 1.5rem 0 2rem; padding: 0; counter-reset: etape; } .etapes > li { position: relative; padding: 0 0 1.6rem 3.3rem; counter-increment: etape; } .etapes > li::before { content: counter(etape); content: counter(etape) / ""; position: absolute; left: 0; top: -.05rem; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; font-weight: 700; color: #ffffff; background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 48%), var(--bouton); box-shadow: 0 6px 14px -8px rgba(37, 54, 101, .7); } .etapes > li:not(:last-child)::after { content: ""; position: absolute; left: calc(1.125rem - 1px); top: 2.55rem; bottom: .35rem; width: 2px; border-radius: 2px; background: var(--filet-fort); } .etapes > li > :last-child { margin-bottom: 0; } .etapes > li > p:first-child { margin-top: 0; } .etapes .note, .etapes .docs { margin-top: 1rem; } /* Tableau de calcul */ .tableau-titre { margin: 0 0 .6rem; } .tableau-bloc { overflow-x: auto; margin: 0 0 .75rem; } .tableau { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.45; font-variant-numeric: tabular-nums; } .tableau th, .tableau td { padding: .55rem .6rem; border-bottom: 1px solid var(--filet); text-align: left; vertical-align: top; } .tableau thead th { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); border-bottom-color: var(--filet-fort); } .tableau .op { width: 1.8rem; text-align: center; color: var(--gris); } .tableau .montant { text-align: right; white-space: nowrap; } .tableau .deduction td { font-style: italic; color: var(--gris); } .tableau tfoot td { font-weight: 700; color: var(--titre); border-bottom: 0; border-top: 2px solid var(--filet-fort); } .tableau-note { font-size: .88rem; color: var(--gris); margin: 0; } /* Contraste élevé de Windows : les pictogrammes dessinés par un masque CSS prennent une couleur système, sinon ils disparaissent */ @media (forced-colors: active) { main :is(p, li, td, h2, h3, h4) a:not([class])[target="_blank"]::after { forced-color-adjust: none; background: LinkText; -webkit-mask: var(--fleche-externe) no-repeat right center / .68em .68em; mask: var(--fleche-externe) no-repeat right center / .68em .68em; } .doc[rel~="external"]::after { forced-color-adjust: none; background-color: LinkText; opacity: 1; } .liste-coches li::before { forced-color-adjust: none; background-color: CanvasText; } } /* Impression : contenu seul (le script déplie les réponses avant l’impression) */ @media print { /* En mode sombre aussi, l’impression reprend les couleurs du thème clair (sinon texte clair sur papier blanc) */ :root, :root:not([data-theme="light"]), :root[data-theme="dark"] { color-scheme: light; --texte: #1a1a1a; --titre: #000000; --gris: #444444; --pied-texte: #444444; --logo-tiers: #000000; --lien: #1f3f99; --lien-trait: rgba(31, 63, 153, .45); --lien-trait-fort: #1f3f99; --bleu-titre: #1f3f99; --bleu-lien: #1f3f99; --bleu-survol: #1f3f99; --fleche-lien: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3f99' stroke-opacity='.75' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); --filet: rgba(0, 0, 0, .15); --filet-fort: rgba(0, 0, 0, .3); --champ: #666666; --verre-puce: #ffffff; --info-fond: rgba(74, 108, 202, .08); --info-bord: rgba(74, 108, 202, .3); --alerte-fond: rgba(209, 0, 0, .05); --alerte-bord: rgba(209, 0, 0, .28); --rouge-ico: #c00000; --or: #7a5b00; } .aurore, .grain, .annonce, .entete, .dock, .skip, .form-bloc, .imprimer, .partage { display: none !important; } body { padding: 0; color: #000000; background: #ffffff; } .page { display: block; padding: 0; } .verre, .carte { background: none !important; box-shadow: none !important; border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .verre::before { content: none; } .carte { padding: 0 0 1.5rem; break-inside: auto; } a { color: #000000; } }