/* ========================================================================== SCALYX, feuille de style partagee de tout le site. HTML + CSS a la main. Aucune dependance, aucune requete externe. Le site reste entierement lisible sans JavaScript. -------------------------------------------------------------------------- INVENTAIRE DES CLASSES PARTAGEES Les pages secondaires (support, confidentialite, conditions, /en/) doivent se servir de ces classes et n'ajouter AUCUN CSS. -------------------------------------------------------------------------- SQUELETTE COMMUN, a recopier tel quel sur chaque page .saut ................ lien d'evitement, premier element du .site-entete ......... en-tete colle en haut (position: sticky) .entete-in ......... rangee interne .marque ............ logo texte Scalyx, pointe le haut de la page .nav ............... navigation principale, visible a TOUTES les largeurs .nav-lien .......... lien de la navigation .entete-cote ....... groupe de droite (langues + bouton) .langues ........... selecteur FR / EN a[aria-current="true"] marque la langue courante .entete-store ...... petit bouton Telecharger de l'en-tete .site-pied ........... pied de page commun .pied-in ........... colonne interne du pied .pied-tete ......... rangee marque + liens .pied-marque, .pied-liens, .pied-legal, .pied-note MISE EN PAGE .wrap ................ conteneur centre, largeur max + marges laterales .wrap-etroit ......... variante etroite, pour les pages de texte .section ............. bloc vertical standard .section-douce ....... bloc sur fond legerement teinte .apparait ............ apparition douce au defilement, en CSS pur. Sans support ou en mouvement reduit : visible. TYPOGRAPHIE ET PETITS ELEMENTS .eyebrow ............. sur-titre en capitales, couleur violette .num ............... numero en serif dans un .eyebrow .lede ................ paragraphe d'introduction, plus grand et plus doux .puces ............... liste a pastilles rondes coloree par --teinte .citation ............ phrase en serif, grande, sert de respiration .chiffre ............. nombre en serif (durees, quantites) .note ................ petite ligne discrete sous un bouton ou une image BOUTONS .bouton .............. bouton principal violet .bouton-doux ......... bouton secondaire, contour discret .bloc-store .......... groupe bouton + mentions sous le bouton .mention ............. ligne "Gratuit" sous le bouton .mention-fine ........ mention encore plus discrete (achats integres) CARTES ET PASTILLES .grille .............. grille de cartes qui se replie toute seule .carte ............... carte blanche, rayon 18px, ombre de l'app, sans bord .pastille ............ rond pastel qui porte une icone. L'encre reste TOUJOURS sombre : le blanc sur pastel ne passerait pas 3:1. modificateurs : .p-peche .p-sauge .p-bleu .p-mauve .p-sable .p-lavande .p-eau .p-corail .p-menthe .p-rose .p-indigo .p-ocre VISUELS .telephone ........... cadre d'iPhone autour d'une capture .telephone-halo ...... variante posee sur un halo colore .duo-visuel .......... deux telephones legerement decales PAGE D'ACCUEIL .hero, .hero-in, .hero-texte, .hero-visuel, .halo .bandeau ............. phrase de transition en serif .moment, .moment-in, .moment-texte, .moment-visuel, .moment-inverse .coda ................ bloc affirmation .final ............... dernier appel au telechargement PAGES DE TEXTE LONG (support, confidentialite, conditions...) .page-texte .......... enveloppe unique. A l'interieur, les h1 / h2 / h3, p, ul, ol, a, strong, table et blockquote sont deja mis en forme, sans classe supplementaire. .page-entete ....... titre de la page + chapeau .maj ............... "Derniere mise a jour le ..." .mise-en-garde ..... encadre d'avertissement doux .tableau ........... enveloppe a mettre AUTOUR d'un (elle apporte le defilement horizontal) .sommaire .......... liste d'ancres en haut de page QUESTIONS / REPONSES .faq ................. conteneur .faq-item ............ un

(fonctionne sans JavaScript) > summary .......... la question le reste du contenu . la reponse Variante sans repli : .faq > .faq-item sans

, avec h3 + p. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Jetons, releves dans le code de l'app -------------------------------------------------------------------------- */ :root { /* surfaces et encres */ --papier: #FBFBFA; --papier-2: #F4F3F1; --carte: #FFFFFF; --encre: #1F1C1A; --encre-corps: #4A4541; --encre-douce: #78736E; --trait: rgba(31, 28, 26, .10); /* violet de marque, en trois roles distincts. --violet : decor seulement (points, halos, pastilles) --violet-texte : texte violet sur le papier. Du #A052FF ne donnerait que 4,08:1, il faut l'assombrir. --violet-bouton : fond des boutons, associe a --encre-bouton. */ --violet: #A052FF; --violet-texte: #7B2FD6; --violet-bouton: #7B2FD6; --encre-bouton: #FFFFFF; /* pastels de l'app */ --peche: #F5BFA3; --sauge: #C7D1AD; --bleu: #ADC2EB; --mauve: #B8809E; --sable: #D9C78C; --lavande: #AD9EF0; --eau: #8CD1B8; --corail: #F28C80; --menthe: #99D9B3; --rose: #ED99BF; --indigo: #7380D9; --ocre: #D99959; /* encre posee sur les pastilles. Sombre dans les deux modes : #1F1C1A sur #C7D1AD donne 10,6:1, du blanc n'en donnerait que 1,6:1. */ --encre-pastille: #1F1C1A; /* ombre exacte des cartes de l'app, sans bordure */ --ombre-carte: 0 5px 13px rgba(0, 0, 0, .07); --ombre-telephone: 0 4px 12px rgba(31, 28, 26, .10), 0 34px 70px -30px rgba(31, 28, 26, .38); --ombre-bouton: 0 8px 22px -12px rgba(123, 47, 214, .75); --rayon: 18px; --rayon-large: 26px; --serif: ui-serif, "New York", Georgia, "Times New Roman", serif; --sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --largeur: 1160px; --largeur-etroite: 46rem; --marge: clamp(1.25rem, 4vw, 3rem); --souffle: clamp(4.5rem, 9vw, 8rem); /* hauteur de l'en-tete. Reprise par scroll-padding-top pour que les ancres ne passent pas sous la barre. Deux rangees en dessous de 900px. */ --h-entete: 104px; } @media (min-width: 900px) { :root { --h-entete: 66px; } } @media (prefers-color-scheme: dark) { :root { /* noir NEUTRE, comme Theme.swift */ --papier: #0A0A0A; --papier-2: #141414; --carte: #1F1F1F; --encre: #F0EDEB; --encre-corps: #D3CFCC; --encre-douce: #A3A09E; --trait: rgba(240, 237, 235, .14); --violet-texte: #C49BFF; /* en sombre, le bouton devient lavande clair avec de l'encre noire : du blanc sur #C49BFF ne donnerait que 2,2:1. La, on est a 8,9:1. */ --violet-bouton: #C49BFF; --encre-bouton: #0A0A0A; --ombre-carte: 0 5px 13px rgba(0, 0, 0, .45); --ombre-telephone: 0 4px 14px rgba(0, 0, 0, .6), 0 34px 80px -30px rgba(0, 0, 0, .9); --ombre-bouton: 0 8px 24px -12px rgba(0, 0, 0, .9); } } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* clip et non hidden : hidden ferait du html un conteneur de defilement et tuerait position: sticky sur l'en-tete. */ overflow-x: clip; scroll-padding-top: calc(var(--h-entete) + 1rem); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--papier); color: var(--encre-corps); font-family: var(--sans); font-size: clamp(1.0313rem, .99rem + .22vw, 1.125rem); line-height: 1.68; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, picture { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3, h4, blockquote { font-family: var(--serif); color: var(--encre); font-weight: 600; letter-spacing: -.02em; line-height: 1.14; margin: 0; text-wrap: balance; } p, ul, ol, figure, table { margin: 0; } a { color: inherit; } strong, b { color: var(--encre); font-weight: 600; } :focus-visible { outline: 3px solid var(--violet-texte); outline-offset: 3px; border-radius: 6px; } ::selection { background: rgba(160, 82, 255, .22); color: var(--encre); } .saut { position: absolute; top: .5rem; left: -9999px; z-index: 90; background: var(--encre); color: var(--papier); padding: .7rem 1.2rem; border-radius: 999px; font-size: .95rem; text-decoration: none; } .saut:focus { left: .5rem; } /* -------------------------------------------------------------------------- 3. Mise en page -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--marge); } .wrap-etroit { max-width: calc(var(--largeur-etroite) + var(--marge) * 2); } .section { padding-block: var(--souffle); } .section-douce { background: var(--papier-2); } /* Apparition au defilement, en CSS pur. Etat par defaut : VISIBLE. Rien ne depend de JavaScript. */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .apparait { animation: monte linear both; animation-timeline: view(); animation-range: entry 0% entry 78%; } @keyframes monte { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } } } /* -------------------------------------------------------------------------- 4. En-tete commune -------------------------------------------------------------------------- */ .site-entete { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--papier) 82%, transparent); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--trait); } @supports not (backdrop-filter: blur(2px)) { .site-entete { background: var(--papier); } } .entete-in { display: grid; grid-template-areas: "marque cote" "nav nav"; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem; min-height: var(--h-entete); padding-block: .5rem; } .marque { grid-area: marque; display: inline-flex; align-items: center; gap: .55rem; font-family: var(--serif); font-size: 1.32rem; font-weight: 600; letter-spacing: -.02em; color: var(--encre); text-decoration: none; white-space: nowrap; } .marque-logo { /* La marguerite de l'icône de l'app, détourée. Elle porte les deux teintes de la marque, donc elle se lit sur le papier comme sur le noir : pas de variante sombre à prévoir. */ width: 26px; height: 26px; flex: none; display: block; } /* La navigation existe a TOUTES les largeurs. En dessous de 900px elle passe sur une seconde rangee, et si la place manque vraiment (320px) elle defile lateralement, sans jamais disparaitre. */ .nav { grid-area: nav; display: flex; align-items: center; gap: clamp(.7rem, 2.4vw, 1.5rem); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; margin-inline: calc(var(--marge) * -1); padding-inline: var(--marge); padding-block: .35rem; } .nav::-webkit-scrollbar { display: none; } .nav-lien { font-size: .95rem; color: var(--encre-corps); text-decoration: none; white-space: nowrap; padding-block: .2rem; border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease; } .nav-lien:hover { color: var(--encre); border-bottom-color: var(--violet); } /* sur les tres petits ecrans, les quatre liens tiennent quand meme */ @media (max-width: 419px) { .nav { gap: .55rem; } .nav-lien { font-size: .8438rem; } } .entete-cote { grid-area: cote; display: flex; align-items: center; gap: .75rem; } .langues { display: inline-flex; align-items: center; gap: .1rem; font-size: .82rem; font-weight: 600; letter-spacing: .04em; } .langues a { display: inline-block; padding: .35rem .5rem; border-radius: 8px; color: var(--encre-douce); text-decoration: none; } .langues a:hover { color: var(--encre); } .langues a[aria-current="true"] { color: var(--encre); background: color-mix(in srgb, var(--violet) 16%, transparent); } .langues span[aria-hidden="true"] { color: var(--trait); } .entete-store { font-size: .9rem; font-weight: 600; color: var(--encre-bouton); background: var(--violet-bouton); text-decoration: none; padding: .5rem 1rem; border-radius: 999px; white-space: nowrap; transition: filter .2s ease; } .entete-store:hover { filter: brightness(1.08); } @media (max-width: 559px) { .entete-store { display: none; } } @media (min-width: 900px) { .entete-in { grid-template-areas: "marque nav cote"; grid-template-columns: auto 1fr auto; padding-block: 0; } .nav { justify-content: center; overflow: visible; margin-inline: 0; padding-inline: 0; } } /* -------------------------------------------------------------------------- 5. Boutons -------------------------------------------------------------------------- */ .bouton { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 52px; padding: .85rem 1.7rem; background: var(--violet-bouton); color: var(--encre-bouton); font-family: var(--sans); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; text-align: center; text-decoration: none; border: 0; border-radius: 999px; box-shadow: var(--ombre-bouton); transition: transform .22s cubic-bezier(.22, .61, .36, 1), filter .22s ease; } .bouton:hover { transform: translateY(-2px); filter: brightness(1.07); } .bouton:active { transform: translateY(0); } .bouton svg { width: 21px; height: 21px; flex: none; fill: currentColor; } .bouton-doux { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .85rem 1.6rem; background: transparent; color: var(--encre); font-size: 1.0625rem; font-weight: 500; text-decoration: none; border: 1px solid var(--trait); border-radius: 999px; transition: border-color .2s ease, background-color .2s ease; } .bouton-doux:hover { border-color: var(--encre-douce); background: var(--carte); } .bloc-store { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; } .mention { font-size: .95rem; font-weight: 500; color: var(--encre-corps); } .mention .chiffre { font-size: 1.05rem; } .mention-fine { font-size: .8125rem; color: var(--encre-douce); } @media (prefers-reduced-motion: reduce) { .bouton, .bouton-doux, .nav-lien, .carte { transition: none; } .bouton:hover { transform: none; } } /* -------------------------------------------------------------------------- 6. Petits elements de texte -------------------------------------------------------------------------- */ .eyebrow { display: flex; align-items: baseline; gap: .6rem; margin-bottom: 1rem; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--violet-texte); } .eyebrow .num { font-family: var(--serif); font-size: 1rem; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; text-transform: none; } .lede { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.66; color: var(--encre-corps); max-width: 46ch; text-wrap: pretty; } .puces { list-style: none; padding: 0; margin-top: 1.4rem; display: grid; gap: .7rem; max-width: 46ch; } .puces li { position: relative; padding-left: 1.6rem; font-size: 1rem; line-height: 1.6; color: var(--encre-corps); } .puces li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--teinte, var(--violet)); } .citation { font-family: var(--serif); font-size: clamp(1.5rem, 1.05rem + 2.1vw, 2.5rem); font-weight: 600; line-height: 1.28; letter-spacing: -.022em; color: var(--encre); text-wrap: pretty; } .chiffre { font-family: var(--serif); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--encre); } .note { font-size: .875rem; color: var(--encre-douce); line-height: 1.5; } /* -------------------------------------------------------------------------- 7. Cartes et pastilles -------------------------------------------------------------------------- */ .grille { list-style: none; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); } .carte { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-carte); padding: 1.5rem 1.4rem 1.6rem; transition: transform .25s cubic-bezier(.22, .61, .36, 1); } .carte:hover { transform: translateY(-3px); } .carte h3 { font-size: 1.1875rem; margin-block: 1rem .45rem; letter-spacing: -.015em; } .carte p { font-size: .9688rem; line-height: 1.6; color: var(--encre-corps); } .pastille { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--teinte, var(--lavande)); /* encre sombre dans les deux modes : voir la note des jetons */ color: var(--encre-pastille); } .pastille svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .p-peche { --teinte: var(--peche); } .p-sauge { --teinte: var(--sauge); } .p-bleu { --teinte: var(--bleu); } .p-mauve { --teinte: var(--mauve); } .p-sable { --teinte: var(--sable); } .p-lavande { --teinte: var(--lavande); } .p-eau { --teinte: var(--eau); } .p-corail { --teinte: var(--corail); } .p-menthe { --teinte: var(--menthe); } .p-rose { --teinte: var(--rose); } .p-indigo { --teinte: var(--indigo); } .p-ocre { --teinte: var(--ocre); } /* -------------------------------------------------------------------------- 8. Telephone -------------------------------------------------------------------------- */ .telephone { position: relative; width: 100%; max-width: 278px; margin-inline: auto; padding: 9px; border-radius: 46px; background: linear-gradient(158deg, #56514D 0%, #201E1D 46%, #383432 100%); box-shadow: var(--ombre-telephone); } .telephone img { width: 100%; height: auto; aspect-ratio: 1206 / 2622; object-fit: cover; object-position: top center; border-radius: 38px; background: var(--papier); } /* pas d'encoche dessinee : les captures contiennent deja la leur */ .telephone-halo::before { content: ""; position: absolute; z-index: -1; /* le debordement lateral reste sous la marge disponible dans la colonne (48px au point le plus serre, a 860px) : sinon la page devient defilable horizontalement. */ inset: -4% -12% 2%; border-radius: 50%; background: radial-gradient( closest-side, color-mix(in srgb, var(--teinte, var(--lavande)) 95%, transparent) 0%, color-mix(in srgb, var(--teinte, var(--lavande)) 48%, transparent) 52%, transparent 100% ); filter: blur(34px); pointer-events: none; } @media (prefers-color-scheme: dark) { .telephone-halo::before { opacity: .5; } } .duo-visuel { display: flex; justify-content: center; align-items: flex-start; gap: clamp(.75rem, 2.5vw, 1.75rem); } .duo-visuel .telephone { max-width: 226px; } .duo-visuel .telephone:first-child { transform: rotate(-2.5deg); } .duo-visuel .telephone:last-child { transform: rotate(2.5deg) translateY(1.75rem); } @media (max-width: 479px) { .duo-visuel { gap: .5rem; } .duo-visuel .telephone { max-width: 46%; padding: 5px; border-radius: 26px; } .duo-visuel .telephone img { border-radius: 22px; } } /* -------------------------------------------------------------------------- 9. Hero -------------------------------------------------------------------------- */ .hero { position: relative; isolation: isolate; padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 7vw, 5.5rem); /* surtout pas d'overflow: hidden ici : le telephone incline doit rester entier, et le halo doit pouvoir deborder. html { overflow-x: clip } se charge d'eviter la barre de defilement horizontale. */ } /* Halo lavande, entierement en degrades radiaux : il s'eteint dans le vide, il ne se termine jamais sur une ligne droite. */ /* Le halo reste dans la largeur de la fenetre : s'il debordait sur les cotes, il rendrait la page defilable horizontalement, meme avec overflow-x: clip. Les degrades sont donc places pres des bords, et ils s'eteignent dans le vide : aucun ne se termine sur une ligne droite. */ .halo { position: absolute; z-index: -1; inset: -22% 0 auto 0; height: 118%; pointer-events: none; background: radial-gradient(34% 32% at 16% 18%, color-mix(in srgb, var(--lavande) 52%, transparent) 0%, transparent 70%), radial-gradient(30% 30% at 80% 22%, color-mix(in srgb, var(--violet) 26%, transparent) 0%, transparent 72%), radial-gradient(34% 28% at 94% 64%, color-mix(in srgb, var(--eau) 22%, transparent) 0%, transparent 74%), radial-gradient(30% 24% at 2% 74%, color-mix(in srgb, var(--peche) 24%, transparent) 0%, transparent 76%); filter: blur(10px); } @media (prefers-color-scheme: dark) { .halo { opacity: .38; } } .hero-in { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); align-items: center; } .hero h1 { font-size: clamp(2.25rem, 1.35rem + 3.9vw, 4.25rem); line-height: 1.04; letter-spacing: -.033em; margin-bottom: 1.1rem; } .hero .lede { font-size: clamp(1.0625rem, 1rem + .55vw, 1.3125rem); } .hero .bloc-store { margin-top: 1.9rem; } .hero-visuel { display: flex; justify-content: center; } .hero-visuel .telephone { transform: rotate(-3.2deg); max-width: min(272px, 74vw); } @media (min-width: 900px) { .hero-in { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: clamp(2rem, 4vw, 4rem); } .hero-visuel .telephone { max-width: 300px; } } /* -------------------------------------------------------------------------- 10. Bandeau de transition -------------------------------------------------------------------------- */ .bandeau { padding-block: clamp(3.5rem, 8vw, 6.5rem); } .bandeau p { font-family: var(--serif); font-size: clamp(1.375rem, .95rem + 1.9vw, 2.125rem); font-weight: 500; line-height: 1.34; letter-spacing: -.02em; color: var(--encre-douce); max-width: 24ch; text-wrap: pretty; } .bandeau strong { font-weight: 600; color: var(--encre); } /* -------------------------------------------------------------------------- 11. Moments (blocs fonction avec capture) -------------------------------------------------------------------------- */ .moment { padding-block: clamp(3rem, 6.5vw, 5rem); } .moment-in { display: grid; gap: clamp(2.25rem, 5vw, 3rem); align-items: center; } .moment-texte h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem); line-height: 1.12; letter-spacing: -.026em; margin-bottom: .9rem; } .moment-visuel { position: relative; display: flex; justify-content: center; } @media (min-width: 860px) { .moment-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); } .moment-inverse .moment-texte { order: 2; } .moment-inverse .moment-visuel { order: 1; } } /* -------------------------------------------------------------------------- 12. Coda (affirmation) et appel final -------------------------------------------------------------------------- */ .coda { position: relative; isolation: isolate; padding-block: var(--souffle); background: var(--papier-2); } .coda-in { display: grid; gap: clamp(2.25rem, 5vw, 3.5rem); align-items: center; } .coda blockquote { font-size: clamp(1.5rem, 1.05rem + 2vw, 2.375rem); font-weight: 500; line-height: 1.3; letter-spacing: -.02em; text-wrap: pretty; } .coda figcaption { margin-top: 1.1rem; font-size: .9375rem; color: var(--encre-douce); } @media (min-width: 860px) { .coda-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } } .final { position: relative; isolation: isolate; padding-block: var(--souffle); text-align: center; } .final h2 { font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3rem); letter-spacing: -.028em; margin-bottom: 1rem; } .final .lede { margin-inline: auto; text-align: center; } .final .bloc-store { align-items: center; margin-top: 2rem; } /* halo plus discret sur l'appel final : il ne doit pas voler la vedette au bouton, et il s'eteint dans le vide comme celui du hero. */ .final .halo { inset: -8% 0 auto 0; height: 108%; opacity: .62; filter: blur(30px); } @media (prefers-color-scheme: dark) { .final .halo { opacity: .3; } } /* -------------------------------------------------------------------------- 13. Pied de page commun -------------------------------------------------------------------------- */ .site-pied { border-top: 1px solid var(--trait); padding-block: 3rem 2.5rem; background: var(--papier); } .pied-in { display: grid; gap: 1.5rem; } /* rangee haute du pied : marque a gauche, liens a droite des 760px */ .pied-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.1rem 2.5rem; } .pied-marque { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: var(--encre); text-decoration: none; } .pied-marque .marque-logo { width: 21px; height: 21px; } .pied-liens { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; font-size: .9375rem; } .pied-liens a { color: var(--encre-corps); text-decoration: none; border-bottom: 1px solid var(--trait); padding-bottom: 1px; } .pied-liens a:hover { color: var(--encre); border-bottom-color: var(--violet); } .pied-legal, .pied-note { font-size: .875rem; color: var(--encre-douce); line-height: 1.6; } .pied-legal a { color: var(--encre-corps); text-underline-offset: .18em; } .pied-legal a:hover { color: var(--encre); } /* -------------------------------------------------------------------------- 14. Pages de texte long : .page-texte Aucune classe supplementaire n'est necessaire a l'interieur. -------------------------------------------------------------------------- */ .page-texte { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--souffle); } .page-entete { margin-bottom: clamp(2rem, 4vw, 3rem); } .page-texte h1 { font-size: clamp(2rem, 1.35rem + 2.9vw, 3.125rem); letter-spacing: -.03em; margin-bottom: .9rem; } .page-texte .maj { font-size: .875rem; color: var(--encre-douce); font-variant-numeric: tabular-nums; } .page-texte h2 { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem); letter-spacing: -.02em; margin-top: 2.75rem; margin-bottom: .75rem; } .page-texte h3 { font-size: 1.125rem; letter-spacing: -.012em; margin-top: 1.9rem; margin-bottom: .5rem; } .page-texte p, .page-texte ul, .page-texte ol { margin-bottom: 1.1rem; max-width: 68ch; } .page-texte ul, .page-texte ol { padding-left: 1.35rem; display: grid; gap: .5rem; } .page-texte ul { list-style: none; padding-left: 1.5rem; } .page-texte ul > li { position: relative; } .page-texte ul > li::before { content: ""; position: absolute; left: -1.15rem; top: .66em; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); } .page-texte ol > li::marker { color: var(--violet-texte); font-family: var(--serif); font-weight: 600; } .page-texte a { color: var(--violet-texte); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; } .page-texte a:hover { text-decoration-thickness: 2px; } /* un bouton garde son encre et reste sans soulignement, meme au milieu d'une page de texte */ .page-texte .bouton, .page-texte .bouton-doux { color: var(--encre-bouton); text-decoration: none; } .page-texte .bouton-doux { color: var(--encre); } /* respiration autour des blocs poses dans une page de texte */ .page-texte .faq, .page-texte .grille { margin: 1.5rem 0 2.25rem; } .page-texte blockquote { font-size: 1.1875rem; font-weight: 500; line-height: 1.45; color: var(--encre); margin: 1.75rem 0; padding-left: 1.25rem; border-left: 3px solid var(--violet); max-width: 60ch; } .page-texte hr { border: 0; border-top: 1px solid var(--trait); margin: 2.5rem 0; } /* Encadre de mise en garde, ton doux */ .mise-en-garde { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-carte); border-left: 4px solid var(--sable); padding: 1.25rem 1.35rem; margin: 1.75rem 0; max-width: 68ch; } .mise-en-garde > :last-child { margin-bottom: 0; } .mise-en-garde strong { color: var(--encre); } /* Sommaire d'ancres */ .sommaire { list-style: none; padding: 1.1rem 1.25rem; margin-bottom: 2.5rem; background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-carte); display: grid; gap: .45rem; max-width: 68ch; font-size: .9688rem; } .sommaire li::before { display: none; } /* Tableaux simples. Mettre

autour du

. */ .tableau { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0; border-radius: var(--rayon); box-shadow: var(--ombre-carte); background: var(--carte); } .page-texte table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: .9375rem; text-align: left; } .page-texte th, .page-texte td { padding: .85rem 1.1rem; vertical-align: top; border-bottom: 1px solid var(--trait); } .page-texte th { font-family: var(--sans); font-weight: 600; color: var(--encre); white-space: nowrap; } .page-texte tbody tr:last-child td { border-bottom: 0; } /* -------------------------------------------------------------------------- 15. Questions / reponses : .faq .faq-item est un

, donc il fonctionne sans JavaScript. -------------------------------------------------------------------------- */ .faq { display: grid; gap: .8rem; max-width: 52rem; } .faq-item { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre-carte); padding: .35rem 1.35rem; } .faq-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 0; font-family: var(--serif); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.012em; color: var(--encre); } .faq-item > summary::-webkit-details-marker { display: none; } .faq-item > summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--violet-texte); border-bottom: 2px solid var(--violet-texte); transform: translateY(-3px) rotate(45deg); transition: transform .22s ease; } .faq-item[open] > summary::after { transform: translateY(1px) rotate(-135deg); } .faq-item > :not(summary) { margin-bottom: 1.05rem; font-size: 1rem; line-height: 1.65; color: var(--encre-corps); max-width: 62ch; } /* Variante sans repli : h3 + p directement dans .faq-item */ .faq-item > h3 { font-size: 1.0625rem; margin: 1.05rem 0 .4rem; } .faq-item a { color: var(--violet-texte); text-decoration: underline; text-underline-offset: .18em; } @media (prefers-reduced-motion: reduce) { .faq-item > summary::after { transition: none; } } /* -------------------------------------------------------------------------- 16. Impression -------------------------------------------------------------------------- */ @media print { .site-entete, .site-pied, .halo, .bouton, .telephone { display: none; } body { background: #FFFFFF; color: #000000; font-size: 11pt; } }