/* Theme Name: S-Méridian Theme URI: https://s-meridian.com Author: Seobooster LTD Description: Le carnet de route des 1 000 premiers jours — grossesse et petite enfance, par ville et par mois. Version: 1.0.7 Requires PHP: 7.4 Text Domain: s-meridian */ /* ========================================================================== 1. JETONS DE COULEUR — clair par défaut, sombre via prefers-color-scheme ET bascule manuelle [data-theme]. Mathias lit en sombre : les DEUX variantes sont vérifiées pour le contraste, pas seulement déclarées. ========================================================================== */ :root{ --lait:#FBF6F1; --voile:#F3E9E4; --prune:#3A2346; --encre:#2E2530; --abricot:#E9855A; --abricot-fonce:#B5532C; --sauge:#8FBFA8; --miel:#F2C36B; --alerte:#B23A48; --surf:#FFFFFF; --bord: color-mix(in srgb, var(--prune) 14%, transparent); --ombre: 0 12px 32px -18px color-mix(in srgb, var(--prune) 55%, transparent); --ombre-sm: 0 4px 14px -8px color-mix(in srgb, var(--prune) 45%, transparent); --titre: "Corben", Georgia, "Times New Roman", serif; --corps: "Atkinson Hyperlegible Next", -apple-system, "Segoe UI", Arial, sans-serif; --rayon-carte: 18px; --rayon-pilule: 999px; --rayon-champ: 12px; --large: 1200px; --gouttiere: 24px; --marge: 16px; color-scheme: light; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --lait:#1C1520; --voile:#271D2C; --prune:#F1E6EC; --encre:#E9E1E4; --abricot:#F09A72; --abricot-fonce:#F7B999; --sauge:#7FB29A; --miel:#E6B85E; --alerte:#E0707D; --surf:#241A29; --bord: color-mix(in srgb, var(--prune) 18%, transparent); color-scheme: dark; } } [data-theme="dark"]{ --lait:#1C1520; --voile:#271D2C; --prune:#F1E6EC; --encre:#E9E1E4; --abricot:#F09A72; --abricot-fonce:#F7B999; --sauge:#7FB29A; --miel:#E6B85E; --alerte:#E0707D; --surf:#241A29; --bord: color-mix(in srgb, var(--prune) 18%, transparent); color-scheme: dark; } /* ========================================================================== 2. RESET SOBRE ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--lait); color:var(--encre); font-family:var(--corps); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; } @media (min-width:768px){ body{ font-size:18px } } img,svg{max-width:100%; display:block} a{color:inherit} ul,ol{margin:0; padding:0} button{font:inherit; cursor:pointer} input,select,textarea{font:inherit} h1,h2,h3,h4{font-family:var(--titre); color:var(--prune); line-height:1.2; margin:0 0 .5em} h1{font-size:34px} h2{font-size:26px} h3{font-size:20px} @media (min-width:1024px){ h1{font-size:56px} h2{font-size:38px} h3{font-size:24px} } p{margin:0 0 1em} small{font-size:14px} .sm-oeil{ position:absolute; left:-999px; top:0; background:var(--prune); color:var(--lait); padding:.75em 1.2em; z-index:200; border-radius:0 0 var(--rayon-champ) 0; } .sm-oeil:focus{left:0} .sm-oeil-txt{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* ========================================================================== 3. CONTENEURS ========================================================================== */ .sm-bande-in{ max-width:var(--large); margin:0 auto; padding:56px var(--marge) } .sm-bande{ overflow:hidden } .sm-bande--lait{ background:var(--lait) } .sm-bande--voile{ background:var(--voile) } .sm-bande--prune{ background:var(--prune); color:var(--lait) } .sm-bande--prune h2,.sm-bande--prune .sm-bande-titre{ color:var(--lait) } .sm-bande--miel{ background:color-mix(in srgb, var(--miel) 32%, var(--lait)) } .sm-bande-titre{ margin-bottom:.3em } .sm-bande-chapo{ max-width:60ch; color:color-mix(in srgb, var(--encre) 80%, transparent); font-size:1.05em } .sm-bande--prune .sm-bande-chapo{ color:color-mix(in srgb, var(--lait) 78%, transparent) } .sm-bande-in--deux{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--gouttiere); align-items:start } @media (max-width:900px){ .sm-bande-in--deux{ grid-template-columns:1fr } } .sm-surligne{ position:relative; white-space:nowrap } .sm-surligne::after{ content:""; position:absolute; left:-2%; right:-2%; bottom:.06em; height:.4em; background:var(--miel); z-index:-1; border-radius:3px; } /* ========================================================================== 4. ICÔNES ========================================================================== */ .sm-ico{ width:1.15em; height:1.15em; flex:none; vertical-align:-0.2em } /* ========================================================================== 5. LOGO ========================================================================== */ .sm-logo{ display:inline-flex; align-items:center; gap:10px; color:var(--prune) } .sm-logo-symbole{ flex:none } .sm-logo-mot{ font-family:var(--titre); font-weight:700; font-size:22px; color:var(--prune) } .sm-logo-point{ color:var(--abricot) } /* ========================================================================== 6. BOUTONS / CTA ========================================================================== */ .sm-cta{ display:inline-flex; align-items:center; gap:.5em; border-radius:var(--rayon-pilule); padding:.85em 1.4em; font-weight:700; text-decoration:none; border:2px solid transparent; transition:transform .15s ease, background .15s ease; font-size:15px; } .sm-cta:hover{ transform:translateY(-1px) } .sm-cta--pleine{ background:var(--abricot); color:#fff } .sm-bande--miel .sm-cta--pleine, .sm-bande--voile .sm-cta--pleine{ color:#fff } .sm-cta--filaire{ background:transparent; border-color:currentColor; color:var(--prune) } .sm-cta--tete{ padding:.65em 1.1em; font-size:14px } .sm-lien-plus{ display:inline-flex; align-items:center; gap:.35em; font-weight:700; color:var(--abricot-fonce); text-decoration:none; margin-top:.6em; } .sm-lien-plus .sm-ico{ width:1em; height:1em } /* ========================================================================== 7. EN-TÊTE ========================================================================== */ .sm-tete{ position:sticky; top:0; z-index:100; background:color-mix(in srgb, var(--lait) 92%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--bord); } .sm-tete-in{ max-width:var(--large); margin:0 auto; padding:12px var(--marge); display:flex; align-items:center; gap:20px; flex-wrap:nowrap; min-width:0; } .sm-tete-in > *{ min-width:0 } .sm-marque{ text-decoration:none; margin-right:auto } .sm-nav{ display:none; align-items:center; gap:22px; white-space:nowrap } .sm-nav a{ text-decoration:none; font-weight:700; font-size:15px; color:var(--encre); padding:.3em 0; border-bottom:2px solid transparent; } .sm-nav a[aria-current="page"], .sm-nav a:hover{ color:var(--abricot-fonce); border-color:var(--abricot) } .sm-nav-mobile-seule{ display:none } .sm-tete-actions{ display:flex; align-items:center; gap:12px } .sm-bascule{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--voile); border:none; color:var(--prune); } .sm-bascule .sm-ico--soleil{ display:none } [data-theme="dark"] .sm-bascule .sm-ico--lune{ display:none } [data-theme="dark"] .sm-bascule .sm-ico--soleil{ display:block } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .sm-bascule .sm-ico--lune{ display:none } :root:not([data-theme="light"]) .sm-bascule .sm-ico--soleil{ display:block } } .sm-burger{ display:inline-flex; flex-direction:column; gap:5px; width:34px; height:34px; align-items:center; justify-content:center; background:none; border:none; margin-left:auto; } .sm-burger span{ width:22px; height:2px; background:var(--prune); border-radius:2px } .sm-nav-fond{ position:fixed; inset:0; background:rgba(20,12,22,.45); z-index:105; opacity:0; pointer-events:none; transition:opacity .25s ease; } .sm-nav-fond.is-ouvert{ opacity:1; pointer-events:auto } .sm-nav-fond[hidden]{ display:none } @media (min-width:1024px){ .sm-nav{ display:flex } .sm-burger{ display:none } .sm-nav-mobile-seule{ display:none !important } } @media (max-width:1023px){ .sm-nav{ display:flex; position:fixed; inset:0 0 0 auto; width:min(320px,86vw); height:100vh; background:var(--surf); flex-direction:column; align-items:flex-start; padding:90px 24px 24px; gap:6px; z-index:110; transform:translateX(100%); transition:transform .25s ease; box-shadow:var(--ombre); } .sm-nav.is-ouvert{ transform:translateX(0) } .sm-nav a{ width:100%; padding:.7em 0; border-bottom:1px solid var(--bord); font-size:18px } .sm-nav-mobile-seule{ display:block } .sm-cta--tete{ padding:.6em .8em; font-size:12.5px; white-space:nowrap } .sm-tete-in{ gap:10px } .sm-logo-mot{ font-size:18px } } @media (max-width:360px){ .sm-logo-mot{ display:none } } /* ========================================================================== 8. HERO ACCUEIL / 404 ========================================================================== */ .sm-hero-in{ max-width:var(--large); margin:0 auto; padding:48px var(--marge) 56px; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; } .sm-hero-texte h1{ margin-bottom:.35em } .sm-hero-intro{ font-size:1.15em; max-width:46ch; color:color-mix(in srgb, var(--encre) 82%, transparent) } .sm-hero-photo{ border-radius:var(--rayon-carte); overflow:hidden; aspect-ratio:3/2; box-shadow:var(--ombre) } .sm-hero-photo img{ width:100%; height:100%; object-fit:cover } @media (max-width:900px){ .sm-hero-in{ grid-template-columns:1fr } .sm-hero-photo{ order:-1 } } .sm-recherche-hero{ background:var(--surf); border:1px solid var(--bord); border-radius:var(--rayon-carte); padding:18px; margin:24px 0 16px; display:grid; gap:12px; box-shadow:var(--ombre-sm); } .sm-recherche-champ{ display:flex; align-items:center; gap:8px; border:1px solid var(--bord); border-radius:var(--rayon-champ); padding:.4em .8em; flex-wrap:wrap; } .sm-recherche-champ input{ border:none; outline:none; background:none; flex:1 1 160px; padding:.5em 0; color:var(--encre) } .sm-geoloc{ display:inline-flex; align-items:center; gap:.35em; background:var(--voile); border:none; border-radius:var(--rayon-pilule); padding:.5em .9em; font-size:13px; font-weight:700; color:var(--prune); } .sm-recherche-hero select{ border:1px solid var(--bord); border-radius:var(--rayon-champ); padding:.7em .9em; background:var(--surf); color:var(--encre); } .sm-hero-puces{ display:flex; flex-wrap:wrap; gap:10px } .sm-puce{ display:inline-flex; align-items:center; gap:.4em; border:1px solid var(--bord); border-radius:var(--rayon-pilule); padding:.5em 1em; text-decoration:none; font-weight:700; font-size:14px; color:var(--prune); background:var(--surf); } .sm-404 .sm-bande-in{ text-align:center; display:grid; justify-items:center; gap:20px } .sm-suptitre{ text-transform:uppercase; font-size:13px; letter-spacing:.08em; font-weight:700; color:var(--fam,var(--abricot-fonce)); display:flex; align-items:center; gap:.4em; margin-bottom:.4em; } /* ========================================================================== 9. FRISE DES 1 000 JOURS ========================================================================== */ .sm-frise{ margin-top:8px } .sm-frise-piste{ display:flex; gap:0; overflow-x:auto; scroll-snap-type:x proximity; padding:10px 4px 18px; position:relative; } .sm-frise-piste::before{ content:""; position:absolute; left:24px; right:24px; top:24px; height:3px; background:var(--sauge); border-radius:3px; z-index:0; } .sm-jalon{ position:relative; z-index:1; flex:0 0 auto; width:110px; display:flex; flex-direction:column; align-items:center; text-align:center; scroll-snap-align:center; cursor:default; } .sm-jalon-point{ width:16px; height:16px; border-radius:50%; background:var(--surf); border:3px solid var(--sauge); margin-bottom:8px } .sm-jalon.is-actif .sm-jalon-point{ background:var(--abricot); border-color:var(--abricot); box-shadow:0 0 0 5px color-mix(in srgb, var(--abricot) 25%, transparent) } .sm-jalon-label{ font-family:var(--titre); font-weight:700; font-size:14px; color:var(--prune) } .sm-jalon.is-actif .sm-jalon-label{ color:var(--abricot-fonce) } .sm-jalon-note{ position:absolute; top:100%; margin-top:10px; width:180px; background:var(--surf); color:var(--encre); border:1px solid var(--bord); border-radius:var(--rayon-champ); padding:.7em .9em; font-size:13px; box-shadow:var(--ombre-sm); z-index:5; } .sm-frise--mini .sm-jalon{ width:64px } .sm-frise--mini .sm-jalon-label{ font-size:11px } .sm-frise--mini .sm-jalon-point{ width:11px; height:11px } .sm-frise--mini .sm-jalon-note{ display:none } /* ========================================================================== 10. TROIS RAISONS / CARTES GÉNÉRIQUES / PASTILLES / REPLIS ========================================================================== */ .sm-trois{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gouttiere) } @media (max-width:860px){ .sm-trois{ grid-template-columns:1fr } } .sm-trois-carte{ background:var(--surf); border-radius:var(--rayon-carte); padding:26px; text-decoration:none; color:var(--encre); display:flex; flex-direction:column; gap:8px; box-shadow:var(--ombre-sm); border:1px solid var(--bord); } .sm-trois-carte h3{ margin:.2em 0 0 } .sm-trois-carte p{ margin:0; font-size:15px; color:color-mix(in srgb, var(--encre) 78%, transparent) } .sm-repli{ display:grid; place-items:center; aspect-ratio:var(--sm-ratio,4/3); border-radius:var(--rayon-carte); color:var(--repli-fg, var(--prune)); } .sm-repli .sm-ico{ width:34%; height:34%; opacity:.85 } .sm-repli--sauge{ background:color-mix(in srgb, var(--sauge) 30%, var(--voile)); --repli-fg:color-mix(in srgb, var(--sauge) 65%, var(--prune)) } .sm-repli--miel{ background:color-mix(in srgb, var(--miel) 34%, var(--voile)); --repli-fg:var(--abricot-fonce) } .sm-repli--voile{ background:var(--voile); --repli-fg:var(--prune) } .sm-repli--prune{ background:color-mix(in srgb, var(--prune) 16%, var(--voile)); --repli-fg:var(--prune) } .sm-repli--hero{ width:100%; height:100%; aspect-ratio:auto } .sm-pastille{ display:inline-flex; align-items:center; border-radius:var(--rayon-pilule); padding:.25em .8em; font-size:12px; font-weight:700; width:fit-content; } .sm-pastille--sauge{ background:color-mix(in srgb, var(--sauge) 35%, var(--voile)); color:color-mix(in srgb, var(--sauge) 55%, var(--prune)) } .sm-pastille--miel{ background:color-mix(in srgb, var(--miel) 40%, var(--voile)); color:var(--abricot-fonce) } .sm-pastille--voile{ background:var(--voile); color:var(--prune) } .sm-pastille--prune{ background:var(--prune); color:var(--lait) } .sm-pastille--surimpression{ position:absolute; left:12px; bottom:12px } /* ========================================================================== 11. TUILES DE GROS CHIFFRES ========================================================================== */ .sm-tuiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--gouttiere); margin-top:20px } .sm-tuile{ display:flex; flex-direction:column; gap:.2em } .sm-tuile b{ font-family:var(--titre); font-size:44px; line-height:1 } @media (min-width:1024px){ .sm-tuile b{ font-size:72px } } .sm-tuile span{ font-size:15px; color:color-mix(in srgb, var(--lait) 80%, transparent) } .sm-bande--lait .sm-tuile span,.sm-bande--voile .sm-tuile span{ color:color-mix(in srgb, var(--encre) 78%, transparent) } .sm-tuile small{ color:var(--abricot); font-size:12px; margin-top:.3em } /* ========================================================================== 12. GRILLES D'ARTICLES / CARTES ========================================================================== */ .sm-grille-articles{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gouttiere) } .sm-grille-articles .sm-carte--majeure{ grid-column:1 / -1 } .sm-grille-articles .sm-carte--majeure .sm-carte-photo{ aspect-ratio:16/9 } @media (max-width:900px){ .sm-grille-articles{ grid-template-columns:1fr 1fr } } @media (max-width:600px){ .sm-grille-articles{ grid-template-columns:1fr } } .sm-carte{ display:flex; flex-direction:column; gap:8px } .sm-carte-photo{ display:block; position:relative; border-radius:var(--rayon-carte); overflow:hidden; aspect-ratio:4/3 } .sm-carte-photo img{ width:100%; height:100%; object-fit:cover } .sm-carte h3{ font-size:18px; margin:0 } .sm-carte h3 a{ text-decoration:none } .sm-carte h3 a:hover{ text-decoration:underline } .sm-chapo{ font-size:14px; color:color-mix(in srgb, var(--encre) 76%, transparent); margin:0 } .sm-date{ font-size:13px; color:color-mix(in srgb, var(--encre) 60%, transparent); margin:0 } .sm-actu-grille{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:var(--gouttiere) } .sm-actu-carte{ display:flex; flex-direction:column; gap:8px } .sm-actu-carte--majeure{ grid-row:span 2 } .sm-actu-photo{ position:relative; display:block; border-radius:var(--rayon-carte); overflow:hidden; aspect-ratio:4/3 } .sm-actu-carte--majeure .sm-actu-photo{ aspect-ratio:16/9 } .sm-actu-photo img{ width:100%; height:100%; object-fit:cover } @media (max-width:900px){ .sm-actu-grille{ grid-template-columns:1fr 1fr } .sm-actu-carte--majeure{ grid-column:1/-1; grid-row:auto } } @media (max-width:600px){ .sm-actu-grille{ grid-template-columns:1fr } } .sm-lies{ margin-top:40px; padding-top:32px; border-top:1px solid var(--bord) } .sm-lies-grille{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gouttiere); margin-top:14px } @media (max-width:700px){ .sm-lies-grille{ grid-template-columns:1fr } } .sm-vide{ color:color-mix(in srgb, var(--encre) 65%, transparent) } .sm-pagination{ display:flex; flex-wrap:wrap; gap:8px; margin-top:32px } .sm-pagination a,.sm-pagination span{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; border-radius:var(--rayon-champ); border:1px solid var(--bord); text-decoration:none; padding:0 .6em; } .sm-pagination .current{ background:var(--prune); color:var(--lait); border-color:var(--prune) } /* ========================================================================== 13. KIOSQUE DES RUBRIQUES ========================================================================== */ .sm-kiosque{ display:flex; flex-wrap:wrap; gap:10px; max-width:var(--large); margin:24px auto; padding:0 var(--marge) } .sm-kiosque-lien{ display:inline-flex; align-items:center; gap:.4em; border-radius:var(--rayon-pilule); padding:.55em 1.1em; text-decoration:none; font-weight:700; font-size:14px; border:1px solid var(--bord); color:var(--prune); } .sm-kiosque-lien.is-actif{ background:var(--prune); color:var(--lait); border-color:var(--prune) } .sm-kiosque-lien--sauge:not(.is-actif){ background:color-mix(in srgb, var(--sauge) 22%, var(--lait)) } .sm-kiosque-lien--miel:not(.is-actif){ background:color-mix(in srgb, var(--miel) 26%, var(--lait)) } .sm-kiosque-lien--voile:not(.is-actif){ background:var(--voile) } .sm-kiosque-lien--prune:not(.is-actif){ background:color-mix(in srgb, var(--prune) 10%, var(--lait)) } /* ========================================================================== 14. HUB DE RUBRIQUE ========================================================================== */ .sm-hub-tete .sm-bande-in{ text-align:center; display:grid; justify-items:center; gap:6px } .sm-hub-tete .sm-ico{ width:40px; height:40px; margin-bottom:6px } .sm-hub-details summary{ cursor:pointer; font-weight:700; font-family:var(--titre); font-size:20px; color:var(--prune); padding:.4em 0; } .sm-hub-details[open] summary{ margin-bottom:.6em } /* ========================================================================== 15. ARTICLE ========================================================================== */ .sm-article-tete{ max-width:760px; margin:40px auto 0; padding:0 var(--marge) } .sm-fil-ariane ol{ display:flex; flex-wrap:wrap; gap:.4em; list-style:none; font-size:13px; color:color-mix(in srgb, var(--encre) 65%, transparent); margin-bottom:16px } .sm-fil-ariane li:not(:last-child)::after{ content:"›"; margin-left:.4em } .sm-fil-ariane a{ text-decoration:none; color:inherit } .sm-fil-ariane a:hover{ text-decoration:underline } .sm-article-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:16px 0 20px; font-size:14px; color:color-mix(in srgb, var(--encre) 75%, transparent) } .sm-meta-sep{ opacity:.5 } .sm-auteur-ligne{ display:flex; align-items:center; gap:10px } .sm-auteur-photo img,.sm-auteur-photo img.avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; display:block } .sm-auteur-photo--grand img{ width:72px; height:72px } .sm-auteur-nom{ font-weight:700; color:var(--prune); text-decoration:none; display:block } .sm-auteur-nom:hover{ text-decoration:underline } .sm-auteur-role{ display:block; font-size:12px; color:color-mix(in srgb, var(--encre) 65%, transparent) } .sm-une{ margin:0 auto; max-width:960px; padding:0 var(--marge) } .sm-une img{ width:100%; border-radius:var(--rayon-carte); max-height:420px; object-fit:cover } .sm-une--page img{ max-height:340px } @media (max-width:600px){ .sm-une img{ max-height:220px } } .sm-article-corps{ max-width:760px; margin:32px auto 0; padding:0 var(--marge) 64px } .sm-page-corps{ max-width:760px; margin:24px auto 0; padding:0 var(--marge) 64px } .sm-page-tete{ max-width:760px; margin:40px auto 0; padding:0 var(--marge) } .sm-essentiel{ background:var(--voile); border-left:4px solid var(--abricot); border-radius:0 var(--rayon-champ) var(--rayon-champ) 0; padding:16px 20px; margin-bottom:28px; } .sm-essentiel-titre{ display:flex; align-items:center; gap:.4em; font-weight:700; color:var(--prune); margin-bottom:.3em } .sm-essentiel p:last-child{ margin:0 } .sm-lecture{ font-size:1.02em } .sm-lecture h2{ margin-top:1.6em; scroll-margin-top:90px } .sm-lecture h3{ margin-top:1.2em } .sm-lecture a{ color:var(--abricot-fonce); text-decoration-thickness:1.5px } .sm-lecture img{ border-radius:var(--rayon-carte); aspect-ratio:16/9; object-fit:cover; width:100%; height:auto; max-height:420px } .sm-lecture--legale img{ display:none } .sm-lecture ul:not(.sm-checklist-liste), .sm-lecture ol:not(.sm-sommaire ol){ padding-left:1.3em } .sm-lecture blockquote{ margin:0; padding:.4em 1.2em; border-left:4px solid var(--sauge); color:color-mix(in srgb, var(--encre) 85%, transparent); font-style:italic } .sm-sommaire{ background:var(--surf); border:1px solid var(--bord); border-radius:var(--rayon-carte); padding:18px 20px; margin-bottom:28px; } .sm-sommaire p{ font-weight:700; font-family:var(--titre); color:var(--prune); margin-bottom:.4em } .sm-sommaire ol{ list-style:decimal; padding-left:1.2em; display:grid; gap:.3em } .sm-sommaire a{ text-decoration:none } .sm-sommaire a:hover{ text-decoration:underline } /* Tableau du socle (sbs_enveloppe_tableaux) : défilable, jamais débordant. */ .sbs_tableau{ overflow-x:auto; margin:1.4em 0; border-radius:var(--rayon-carte); border:1px solid var(--bord); -webkit-overflow-scrolling:touch } .sbs_tableau table{ border-collapse:collapse; width:100%; min-width:480px } .sbs_tableau th,.sbs_tableau td{ padding:.7em .9em; border-bottom:1px solid var(--bord); text-align:left; font-size:15px } .sbs_tableau th{ background:var(--voile); color:var(--prune); font-family:var(--titre); white-space:nowrap } .sbs_tableau tr:last-child td{ border-bottom:none } /* --------- Checklist infographie (procédé signature §6.4) --------- */ .sm-checklist{ display:block; background:var(--voile); border-radius:var(--rayon-carte); padding:20px 22px; margin:1.6em 0 } .sm-checklist-titre{ display:block; font-family:var(--titre); color:var(--prune); font-size:19px; margin-bottom:.5em } .sm-checklist-groupe{ display:block; margin:1em 0 .4em; color:var(--abricot-fonce); font-size:13px; text-transform:uppercase; letter-spacing:.05em } .sm-checklist-liste{ list-style:none; display:grid; gap:.55em; padding:0 } .sm-checklist-liste label{ display:flex; align-items:flex-start; gap:.6em; cursor:default } .sm-checklist-liste input[type=checkbox]{ appearance:none; -webkit-appearance:none; width:22px; height:22px; flex:none; margin-top:1px; border:2px solid var(--sauge); border-radius:50%; background:var(--surf); position:relative; } .sm-checklist-liste input[type=checkbox]:checked{ background:var(--sauge) } .sm-checklist-liste input[type=checkbox]:checked::after{ content:""; position:absolute; left:5px; top:2px; width:8px; height:12px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(40deg); } @media print{ .sm-checklist{ background:none; border:1px solid #000 } } /* --------- Onglets « qui paie quoi » --------- */ .sm-onglets{ display:block; margin:1.6em 0; border:1px solid var(--bord); border-radius:var(--rayon-carte); overflow:hidden } .sm-onglets-titre{ display:block; padding:14px 18px 0; font-family:var(--titre); color:var(--prune) } .sm-onglets-tetes{ display:flex; flex-wrap:wrap; gap:0; padding:12px 18px 0 } .sm-onglet-radio{ position:absolute; opacity:0; pointer-events:none } .sm-onglet-tete{ cursor:pointer; padding:.6em 1.1em; border-radius:var(--rayon-pilule); font-weight:700; font-size:14px; background:var(--voile); color:var(--prune); margin:0 8px 8px 0; } .sm-onglet-radio:checked + .sm-onglet-tete{ background:var(--prune); color:var(--lait) } .sm-onglets-corps{ padding:0 18px 18px; position:relative } .sm-onglet-panneau{ display:none } .sm-onglets-tetes{ counter-reset:onglet } /* CSS-only : on s'appuie sur l'ordre DOM + :has() moderne, avec repli JS (voir app.js). */ .sm-onglet-panneau.is-actif{ display:block } .sm-onglets-corps p:last-child{ margin-bottom:0 } /* --------- Bloc Sources « carnet de santé » --------- */ .sm-sources{ border-left:4px solid var(--prune); background:var(--surf); padding:16px 20px; margin:1.8em 0; border-radius:0 var(--rayon-champ) var(--rayon-champ) 0 } .sm-sources-titre{ display:flex; align-items:center; gap:.4em; font-family:var(--titre); color:var(--prune); font-weight:700; margin-bottom:.5em } .sm-sources ul{ list-style:none; display:grid; gap:.4em; font-size:14px } .sm-sources a{ color:var(--abricot-fonce) } /* --------- Socle : fiche-lieu / tarifs / frise générique / jauges --------- */ .sbs_lieu,.sbs_tarifs,.sbs_frise,.sbs_jauges{ display:block; background:var(--surf); border:1px solid var(--bord); border-radius:var(--rayon-carte); padding:18px 20px; margin:1.6em 0; } .sbs_lieu_nom,.sbs_tarifs_titre,.sbs_frise_titre,.sbs_jauges_titre{ display:block; font-family:var(--titre); color:var(--prune); font-size:18px; margin-bottom:.4em } .sbs_lieu_adresse{ font-style:normal; display:block; margin-bottom:.2em } .sbs_lieu_acces{ display:block; color:color-mix(in srgb, var(--encre) 75%, transparent); margin-bottom:.6em } .sbs_lieu_carte{ display:inline-flex; align-items:center; gap:.4em; color:var(--abricot-fonce); font-weight:700; text-decoration:none } .sbs_icone_repere{ width:18px; height:18px; fill:currentColor } .sbs_tarif{ display:grid; grid-template-columns:1fr 2fr; gap:10px; align-items:center; margin-bottom:.6em } .sbs_tarif_libelle{ font-size:14px } .sbs_tarif_barre{ width:100%; height:14px; --sm-meter:var(--abricot) } .sbs_tarif_barre::-webkit-meter-bar{ background:var(--voile); border-radius:99px; border:none } .sbs_tarif_barre::-webkit-meter-optimum-value{ background:var(--abricot); border-radius:99px } .sbs_tarif_barre::-moz-meter-bar{ background:var(--abricot); border-radius:99px } .sbs_tarifs_notes{ display:block; margin-top:.4em; color:color-mix(in srgb, var(--encre) 70%, transparent) } .sbs_etape{ display:grid; grid-template-columns:100px 1fr; gap:12px; padding:.5em 0; border-top:1px solid var(--bord) } .sbs_etape:first-of-type{ border-top:none } .sbs_etape_date{ font-weight:700; color:var(--abricot-fonce); font-size:13px } .sbs_etape_titre{ display:block } .sbs_etape_desc{ display:block; color:color-mix(in srgb, var(--encre) 75%, transparent) } .sbs_jauges{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:16px } .sbs_jauges_titre{ grid-column:1/-1 } .sbs_jauge{ display:flex; flex-direction:column; gap:.2em } .sbs_jauge_valeur{ font-family:var(--titre); font-size:32px; color:var(--prune) } .sbs_jauge_libelle{ order:-1; color:color-mix(in srgb, var(--encre) 70%, transparent) } .sbs_source{ display:block; margin-top:.6em; color:color-mix(in srgb, var(--encre) 65%, transparent) } /* --------- FAQ auto --------- */ .sm-faq-groupe{ margin:1em 0 } .sm-faq{ border:1px solid var(--bord); border-radius:var(--rayon-champ); padding:.2em .9em; margin-bottom:.6em } .sm-faq summary{ cursor:pointer; font-weight:700; padding:.6em 0; color:var(--prune) } .sm-faq[open] summary{ border-bottom:1px solid var(--bord); margin-bottom:.5em } /* --------- Publicité (articles uniquement) --------- */ .sm-pub{ position:relative; margin:2em 0; padding:14px; border-radius:var(--rayon-champ); background:var(--voile); text-align:center; min-height:90px; display:grid; place-items:center; gap:.3em; } .sm-pub-label{ position:absolute; text-transform:uppercase; letter-spacing:.08em; font-size:10px; color:color-mix(in srgb, var(--encre) 55%, transparent); align-self:flex-start } /* --------- Bloc auteur fin d'article --------- */ .sm-bloc-auteur{ display:flex; gap:16px; align-items:flex-start; background:var(--voile); border-radius:var(--rayon-carte); padding:20px; margin:2.4em 0; } .sm-auteur-suptitre{ margin:0; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:color-mix(in srgb, var(--encre) 60%, transparent) } .sm-auteur-nom--grand{ font-size:19px } .sm-bloc-auteur .sm-auteur-bio{ margin:.4em 0; font-size:14px } .sm-bloc-auteur .sm-date{ margin:0 } /* ========================================================================== 16. FORMULAIRES ========================================================================== */ .sm-form{ background:var(--surf); border:1px solid var(--bord); border-radius:var(--rayon-carte); padding:22px; display:grid; gap:12px } .sm-form h3{ margin:0 } .sm-form-note{ font-size:13px; color:color-mix(in srgb, var(--encre) 70%, transparent); margin:0 0 .3em } .sm-form label{ display:grid; gap:.35em; font-size:14px; font-weight:700; color:var(--prune) } .sm-form input:not([type=checkbox]),.sm-form select,.sm-form textarea{ border:1px solid var(--bord); border-radius:var(--rayon-champ); padding:.75em .9em; background:var(--lait); color:var(--encre); font-weight:400; width:100%; } .sm-form textarea{ resize:vertical } .sm-leurre{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0 } .sm-form-fin{ margin-top:2.4em } .sm-form-ok{ color:var(--sauge); font-weight:700; display:flex; align-items:center; gap:.4em } /* Simulateur de tarif */ .sm-simulateur{ background:var(--surf); border:1px solid var(--bord); border-radius:var(--rayon-carte); padding:22px; display:grid; gap:14px } .sm-simulateur-champs{ display:grid; gap:12px } .sm-simulateur-champs label{ display:grid; gap:.3em; font-size:14px; font-weight:700; color:var(--prune) } .sm-simulateur-champs input,.sm-simulateur-champs select{ border:1px solid var(--bord); border-radius:var(--rayon-champ); padding:.7em .9em; background:var(--lait) } .sm-simulateur-resultat{ font-family:var(--titre); font-size:22px; color:var(--prune); min-height:1.4em; margin:0 } .sm-simulateur-resultat b{ color:var(--abricot-fonce) } .sm-sources-note{ color:color-mix(in srgb, var(--encre) 60%, transparent) } /* ========================================================================== 17. PAGE CONTACT — visible sans défiler ========================================================================== */ .sm-contact{ min-height:calc(100vh - 140px); display:flex; align-items:center } .sm-contact-in{ max-width:var(--large); margin:0 auto; padding:24px var(--marge); display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; width:100% } .sm-contact-texte h1{ margin-bottom:.3em } .sm-contact-intro{ font-size:15px; color:color-mix(in srgb, var(--encre) 80%, transparent) } .sm-contact-intro p{ margin:0 0 .6em } .sm-contact-reperes{ list-style:none; display:grid; gap:.5em; margin-top:14px; font-size:14px } .sm-contact-reperes li{ display:flex; align-items:center; gap:.5em } @media (max-width:860px){ .sm-contact{ min-height:auto } .sm-contact-in{ grid-template-columns:1fr; padding-top:8px; padding-bottom:24px } .sm-contact-texte{ order:0 } .sm-contact-texte h1{ font-size:28px } .sm-contact-intro{ display:none } .sm-form--contact{ padding:16px; gap:8px } } /* ========================================================================== 18. PAGES GÉOGRAPHIQUES (région / département / ville) ========================================================================== */ .sm-geo-tete .sm-bande-in{ display:grid; gap:6px } .sm-geo-carte-bloc,.sm-region-bloc{ display:grid; grid-template-columns:1.3fr 1fr; gap:var(--gouttiere); align-items:start; margin-top:24px } @media (max-width:860px){ .sm-geo-carte-bloc,.sm-region-bloc{ grid-template-columns:1fr } } .sm-carte-reelle{ border-radius:var(--rayon-carte); overflow:hidden; border:1px solid var(--bord); position:relative; background:var(--surf) } .sm-carte-reelle iframe{ width:100%; height:360px; border:0; display:block; filter:none } [data-theme="dark"] .sm-carte-reelle iframe{ filter:invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.9) } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .sm-carte-reelle iframe{ filter:invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.9) } } .sm-carte-agrandir{ position:absolute; right:10px; bottom:10px; background:var(--surf); border:1px solid var(--bord); border-radius:var(--rayon-pilule); padding:.4em .8em; font-size:12px; font-weight:700; text-decoration:none; display:inline-flex; gap:.3em; align-items:center; } .sm-region-liste{ display:grid; gap:8px; align-content:start; max-height:360px; overflow-y:auto } .sm-region-lien{ display:flex; align-items:center; gap:.5em; padding:.7em .9em; border:1px solid var(--bord); border-radius:var(--rayon-champ); text-decoration:none; color:var(--prune); font-weight:700; background:var(--surf); } .sm-pastilles-liens{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px } .sm-pastilles-liens a{ display:inline-flex; padding:.5em 1em; border-radius:var(--rayon-pilule); background:var(--surf); border:1px solid var(--bord); text-decoration:none; font-size:14px; font-weight:700; color:var(--prune); } /* --------- Ville : hero photo + grille contenu/formulaire sticky --------- */ .sm-ville-hero{ position:relative } .sm-ville-photo{ aspect-ratio:21/9; max-height:340px; overflow:hidden } .sm-ville-photo img{ width:100%; height:100%; object-fit:cover } .sm-ville-hero-texte{ max-width:var(--large); margin:0 auto; padding:18px var(--marge) 0 } .sm-ville-hero-texte h1{ font-size:30px } @media (min-width:1024px){ .sm-ville-hero-texte h1{ font-size:42px } } .sm-ville-grille{ max-width:var(--large); margin:0 auto; padding:24px var(--marge) 40px; display:grid; grid-template-columns:1fr 340px; gap:var(--gouttiere); align-items:start } .sm-ville-form{ position:sticky; top:90px } @media (max-width:960px){ .sm-ville-grille{ grid-template-columns:1fr } .sm-ville-form{ position:fixed; inset:auto 0 0 0; z-index:150; background:var(--surf); border-radius:20px 20px 0 0; box-shadow:0 -12px 30px -10px rgba(0,0,0,.25); padding:16px var(--marge) calc(16px + env(safe-area-inset-bottom)); transform:translateY(105%); transition:transform .25s ease; max-height:80vh; overflow-y:auto; } .sm-ville-form.is-ouvert{ transform:translateY(0) } } .sm-ville-bouton-mobile{ display:none; position:fixed; left:50%; bottom:calc(78px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:140; background:var(--abricot); color:#fff; border:none; border-radius:var(--rayon-pilule); padding:.9em 1.4em; font-weight:700; box-shadow:var(--ombre); align-items:center; gap:.5em; } @media (max-width:960px){ .sm-ville-bouton-mobile{ display:inline-flex } } /* ========================================================================== 19. PIED DE PAGE — compact, rubriques uniquement ========================================================================== */ .sm-pied{ background:var(--prune); color:var(--lait); margin-top:40px } .sm-pied-in{ max-width:var(--large); margin:0 auto; padding:48px var(--marge) 24px; display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:28px; } @media (max-width:960px){ .sm-pied-in{ grid-template-columns:1fr 1fr } } @media (max-width:600px){ .sm-pied-in{ grid-template-columns:1fr } } .sm-pied .sm-logo,.sm-pied .sm-logo-mot,.sm-pied .sm-logo-symbole{ color:var(--lait) } .sm-pied-baseline{ color:color-mix(in srgb, var(--lait) 78%, transparent); margin:10px 0 16px; font-size:14px } .sm-pied-recherche{ display:flex; gap:6px; background:color-mix(in srgb, var(--lait) 12%, transparent); border-radius:var(--rayon-pilule); padding:4px 4px 4px 14px } .sm-pied-recherche input{ background:none; border:none; color:var(--lait); flex:1; outline:none } .sm-pied-recherche input::placeholder{ color:color-mix(in srgb, var(--lait) 60%, transparent) } .sm-pied-recherche button{ background:var(--abricot); border:none; border-radius:50%; width:34px; height:34px; display:grid; place-items:center; color:#fff } .sm-pied-col h2{ color:var(--lait); font-size:14px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.7em } .sm-pied-col ul{ list-style:none; display:grid; gap:.5em } .sm-pied-col a{ text-decoration:none; color:color-mix(in srgb, var(--lait) 85%, transparent); font-size:14px } .sm-pied-col a:hover{ color:var(--lait); text-decoration:underline } .sm-pied-bas{ border-top:1px solid color-mix(in srgb, var(--lait) 16%, transparent); padding:18px var(--marge); max-width:var(--large); margin:0 auto; font-size:12px; color:color-mix(in srgb, var(--lait) 68%, transparent); } /* ========================================================================== 20. NAVIGATION MOBILE BASSE ========================================================================== */ .sm-nav-mobile{ position:fixed; left:0; right:0; bottom:0; z-index:130; display:none; background:var(--surf); border-top:1px solid var(--bord); padding-bottom:env(safe-area-inset-bottom); } .sm-nav-mobile-item{ display:flex; flex-direction:column; align-items:center; gap:2px; text-decoration:none; color:color-mix(in srgb, var(--encre) 65%, transparent); font-size:11px; padding:8px 0; flex:1; } .sm-nav-mobile-item.is-actif{ color:var(--abricot-fonce) } .sm-nav-mobile-item .sm-ico{ width:22px; height:22px } @media (max-width:1023px){ .sm-nav-mobile{ display:flex } body{ padding-bottom:64px } } /* ========================================================================== 21. LOGIN (support socle : cf. sbs_config('login') dans functions.php) ========================================================================== */ /* ========================================================================== 22. CORRECTIF 390 px (orchestrateur, 18/09/2026) — débordement mesuré 710/390 ========================================================================== */ @media (max-width:1023px){ .sm-nav{ visibility:hidden } .sm-nav.is-ouvert{ visibility:visible } .sm-nav-mobile{ width:100%; max-width:100vw } .sm-nav-mobile-item{ min-width:0; flex:1 1 0; overflow:hidden } .sm-nav-mobile-item span{ display:block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center } .sm-tete-in{ min-width:0 } .sm-cta--tete{ flex-shrink:1; min-width:0; overflow:hidden; text-overflow:ellipsis } } html, body{ overflow-x:clip } /* 23. CARTE DES RÉGIONS + PIED SOMBRE + CONSENTEMENT (orchestrateur, 18/09/2026) */ .sm-carte-france{ background:var(--surf); border:1px solid var(--bord); border-radius:var(--rayon-carte); padding:18px; display:flex; align-items:center; justify-content:center } .sm-france{ width:100%; height:auto; max-height:460px } .sm-france path{ fill:color-mix(in srgb, var(--abricot, #E8875A) 22%, var(--surf)); stroke:var(--surf); stroke-width:1.6; transition:fill .2s } .sm-france a:hover path,.sm-france a:focus path{ fill:var(--abricot, #E8875A) } .sm-consentement{ display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.45; font-weight:400 } .sm-consentement input{ margin-top:3px; width:auto; flex:none } .sm-consentement a{ color:inherit; text-decoration:underline } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .sm-pied{ background:#140E17; color:#F1E6EC } } [data-theme="dark"] .sm-pied{ background:#140E17; color:#F1E6EC } /* 24. Photos des portes d'accueil, frise pleine largeur, consentement (18/09/2026) */ .sm-trois-carte .sm-photo-porte{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--rayon-champ); height:auto } @media (min-width:900px){ .sm-frise-piste{ overflow-x:visible } .sm-jalon{ flex:1 1 0; width:auto; min-width:0 } } .sm-consentement > span{ flex:1; display:block } .sm-form label.sm-consentement{ display:flex; gap:10px; align-items:flex-start; font-weight:400; font-size:13px; color:var(--encre) } /* 25. Mobile : en-tête sans chevauchement, héros dans la gouttière (18/09/2026) */ @media (max-width:900px){ .sm-hero-in{ grid-template-columns:minmax(0,1fr) } .sm-hero-texte{ min-width:0 } .sm-hero-texte h1{ font-size:clamp(32px,8.6vw,48px) } .sm-hero-texte h1 .sm-surligne{ white-space:normal } } @media (max-width:599px){ .sm-cta--tete{ display:none } .sm-logo-mot{ font-size:19px } } /* ========================================================================== 26. CORRECTIFS — VERDICT-DESIGN-20260918.md (designer, 20/09/2026) ========================================================================== */ /* --- Défaut 1 (bloquant) : pied de page invisible en sombre -------------- Le fond était déjà corrigé (règle 23) mais les enfants (.sm-pied-col a, h2, logo, recherche…) portaient encore var(--lait)/var(--prune), qui S'INVERSENT en sombre : le texte redevenait aussi sombre que le fond. Le pied a maintenant ses propres jetons FIXES en sombre, jamais var(). */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .sm-pied{ background:#2A1B33; color:#F1E6EC } } [data-theme="dark"] .sm-pied{ background:#2A1B33; color:#F1E6EC } [data-theme="dark"] .sm-pied .sm-logo, [data-theme="dark"] .sm-pied .sm-logo-mot, [data-theme="dark"] .sm-pied .sm-logo-symbole, [data-theme="dark"] .sm-pied-baseline, [data-theme="dark"] .sm-pied-recherche input, [data-theme="dark"] .sm-pied-col h2{ color:#F1E6EC } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .sm-pied .sm-logo, :root:not([data-theme="light"]) .sm-pied .sm-logo-mot, :root:not([data-theme="light"]) .sm-pied .sm-logo-symbole, :root:not([data-theme="light"]) .sm-pied-baseline, :root:not([data-theme="light"]) .sm-pied-recherche input, :root:not([data-theme="light"]) .sm-pied-col h2{ color:#F1E6EC } } [data-theme="dark"] .sm-pied-col h2{ color:#F09A72 } /* titres de colonne en abricot clair (mineur 14) */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .sm-pied-col h2{ color:#F09A72 } } [data-theme="dark"] .sm-pied-recherche{ background:rgba(241,230,236,.12) } [data-theme="dark"] .sm-pied-recherche input::placeholder{ color:rgba(241,230,236,.6) } [data-theme="dark"] .sm-pied-col a{ color:rgba(233,225,228,.85) } [data-theme="dark"] .sm-pied-col a:hover{ color:#F1E6EC } [data-theme="dark"] .sm-pied-bas{ border-top-color:rgba(241,230,236,.16); color:rgba(241,230,236,.68) } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .sm-pied-recherche{ background:rgba(241,230,236,.12) } :root:not([data-theme="light"]) .sm-pied-recherche input::placeholder{ color:rgba(241,230,236,.6) } :root:not([data-theme="light"]) .sm-pied-col a{ color:rgba(233,225,228,.85) } :root:not([data-theme="light"]) .sm-pied-col a:hover{ color:#F1E6EC } :root:not([data-theme="light"]) .sm-pied-bas{ border-top-color:rgba(241,230,236,.16); color:rgba(241,230,236,.68) } } /* --- Défaut 3 : colonnes vides ------------------------------------------ footer.php ne rend plus de