/* ========================================================================== douleurchronique.fr — Feuille de styles commune Dr Ph. Rault — 2013-2026 Architecture : style.css unique partagé par toutes les pages du site ========================================================================== */ /* ----- RESET & VARIABLES ----- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ /* Charte principale */ --sage:#0F6E56; --sage-light:#1D9E75; --sage-dark:#085041; --sage-pale:#EAF4EF; --cream:#FAF8F3; --surface:#FFFFFF; --warm:#F5F2EC; /* Texte */ --text:#1E1C18; --muted:#6B6760; --border:#E2DDD5; /* ================================================== IDENTITÉS VISUELLES PAR SECTION Activées par la classe sur le : - body.page-pathologie → palette verte - body.page-traitement → palette ambre - body.page-comprendre → palette bleue Les variables --accent / --accent-pale / --accent-dark / --accent-bg sont utilisées par tous les composants d'article. ================================================== */ /* Pathologies (vert sage) — palette par défaut */ --p-bg:#EAF4EF; --p-pill:#4A9E72; --p-pale:#C8E8D5; --p-dark:#1A5C3A; --p-text:#1A3A2A; --p-muted:#2A6040; /* Traitements (ambre) */ --t-bg:#FBF3E8; --t-pill:#D4902A; --t-pale:#FAE0B0; --t-dark:#7A4A0A; --t-text:#4A2E08; --t-muted:#6A4010; /* Comprendre (bleu) */ --l-bg:#EAF2F8; --l-pill:#4A90B8; --l-pale:#D4E8F5; --l-dark:#1F4A6E; --l-text:#0F2A40; --l-muted:#2A5A75; /* Variables génériques par défaut = Pathologies */ --accent:var(--p-pill); --accent-pale:var(--p-pale); --accent-dark:var(--p-dark); --accent-bg:var(--p-bg); --accent-text:var(--p-text); --accent-muted:var(--p-muted); } /* Bascule de palette selon la section */ body.page-pathologie{ --accent:var(--p-pill); --accent-pale:var(--p-pale); --accent-dark:var(--p-dark); --accent-bg:var(--p-bg); --accent-text:var(--p-text); --accent-muted:var(--p-muted); } body.page-traitement{ --accent:var(--t-pill); --accent-pale:var(--t-pale); --accent-dark:var(--t-dark); --accent-bg:var(--t-bg); --accent-text:var(--t-text); --accent-muted:var(--t-muted); } body.page-comprendre{ --accent:var(--l-pill); --accent-pale:var(--l-pale); --accent-dark:var(--l-dark); --accent-bg:var(--l-bg); --accent-text:var(--l-text); --accent-muted:var(--l-muted); } html{scroll-behavior:smooth;} body{font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--text);line-height:1.7;} /* ----- NAVIGATION ----- */ nav{background:var(--surface);padding:0 2rem;height:68px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;border-bottom:1px solid var(--border);} .nav-logo{font-family:'DM Serif Display',serif;font-size:20px;color:var(--sage);text-decoration:none;letter-spacing:-0.02em;} .nav-logo span{color:var(--sage-light);font-style:italic;} .nav-links{display:flex;align-items:center;gap:1.1rem;} .nav-links a{text-decoration:none;color:var(--muted);font-size:13px;transition:color 0.2s;} .nav-links a:hover,.nav-links a.active{color:var(--sage);} .nav-links a.active{font-weight:500;} .nav-links a.nav-ext{background:var(--sage)!important;color:white!important;padding:6px 12px;border-radius:6px;font-weight:500;font-size:13px;} .nav-toggle{display:none;flex-direction:column;justify-content:space-between;width:24px;height:18px;cursor:pointer;background:none;border:none;padding:0;} .nav-toggle span{display:block;height:2px;background:var(--text);border-radius:2px;} /* ----- FIL D'ARIANE ----- */ .breadcrumb{background:var(--warm);border-bottom:1px solid var(--border);padding:0.65rem 2rem;} .breadcrumb-inner{max-width:960px;margin:0 auto;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px;} .breadcrumb-inner a{color:var(--sage);text-decoration:none;} /* ========================================================================== ARTICLE — STYLE SOBRE Inspiré du modèle imprimé original : hiérarchie typographique, sans encadrés colorés, sans pastilles, sans numéros géants. ========================================================================== */ /* ----- EN-TÊTE D'ARTICLE ----- */ .article-header{max-width:780px;margin:0 auto;padding:3rem 2rem 1.5rem;} .article-header h1{font-family:'DM Serif Display',serif;font-size:clamp(1.8rem,4vw,2.4rem);color:var(--text);line-height:1.2;margin-bottom:0.4rem;letter-spacing:-0.02em;} .article-header .acronyme{font-size:15px;color:var(--muted);font-style:italic;margin-bottom:1rem;} .article-header .accroche{font-size:16px;color:var(--text);max-width:620px;line-height:1.6;font-style:italic;border-left:3px solid var(--accent);padding-left:14px;margin-bottom:1.25rem;} .article-meta{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;font-size:12px;color:var(--muted);padding-top:0.75rem;border-top:1px solid var(--border);} .article-meta-item{display:flex;align-items:center;gap:6px;} .article-meta-item svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;} /* ----- CORPS DE L'ARTICLE ----- */ .article-wrap{max-width:960px;margin:0 auto;padding:0 2rem 2.5rem;display:grid;grid-template-columns:1fr 240px;gap:2.5rem;align-items:start;} .article-body{max-width:780px;font-size:15.5px;line-height:1.75;} /* Sommaire sobre */ .article-toc{background:var(--warm);border:1px solid var(--border);border-radius:6px;padding:0.9rem 1.25rem;margin-bottom:2rem;} .article-toc-title{font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:0.5rem;} .article-toc ol{list-style:decimal;padding-left:1.25rem;} .article-toc ol li{font-size:14px;margin-bottom:2px;color:var(--muted);} .article-toc ol li a{color:var(--text);text-decoration:none;} .article-toc ol li a:hover{color:var(--accent);text-decoration:underline;} /* Sections d'article — typographie pure */ .article-section{margin-top:2rem;scroll-margin-top:80px;} .article-section:first-of-type{margin-top:0;} .article-section h2{font-family:'DM Serif Display',serif;font-size:1.45rem;color:var(--accent);letter-spacing:-0.01em;margin-bottom:0.75rem;font-weight:400;} .article-section h3{font-size:1.05rem;font-weight:600;color:var(--accent-dark);margin:1.25rem 0 0.5rem;} .article-section p{color:var(--text);margin-bottom:0.85rem;line-height:1.75;} .article-section p strong{font-weight:600;} .article-section a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;} .article-section a:hover{color:var(--accent-dark);} /* Listes — ressemblent au modèle imprimé original (tirets simples) */ .article-section ul{list-style:none;margin:0.6rem 0 0.9rem;padding-left:0;} .article-section ul li{padding:1px 0 1px 14px;position:relative;line-height:1.7;} .article-section ul li::before{content:'—';position:absolute;left:0;color:var(--accent);font-weight:600;} /* Référence en bas */ .article-reference{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--border);font-size:13px;color:var(--muted);font-style:italic;line-height:1.6;} .article-disclaimer{margin:0 0 1.5rem;padding:0.6rem 0.9rem;background:#FEF8E7;border-left:3px solid #B45309;color:#78350F;font-size:13.5px;font-style:italic;border-radius:4px;} /* Illustrations dans les articles — figure centrée avec légende optionnelle */ .article-figure{margin:1.5rem auto;text-align:center;max-width:600px;} .article-figure img{max-width:100%;height:auto;border-radius:6px;display:block;margin:0 auto;} .article-figure figcaption{font-size:13px;color:var(--muted);margin-top:0.6rem;font-style:italic;line-height:1.4;} /* Bloc "Pour aller plus loin" — liens vers les publications scientifiques */ .article-further{margin-top:2rem;padding:1rem 1.2rem;background:var(--warm);border-left:3px solid var(--accent);border-radius:0 6px 6px 0;} .article-further-title{font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:0.6rem;} .article-further ul{list-style:none;padding-left:0;margin:0;} .article-further ul li{padding:4px 0 4px 22px;position:relative;line-height:1.55;font-size:14px;border-bottom:1px solid var(--border);} .article-further ul li:last-child{border-bottom:none;} .article-further ul li::before{content:'';position:absolute;left:0;top:7px;width:14px;height:16px;background:url("data:image/svg+xml;utf8,") no-repeat;background-size:contain;} .article-further ul li a{color:var(--text);text-decoration:none;font-weight:500;} .article-further ul li a:hover{color:var(--accent);text-decoration:underline;} .article-further ul li .further-desc{display:block;font-size:13px;color:var(--muted);font-weight:400;margin-top:1px;} /* Bouton télécharger en PDF */ .pdf-btn{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);color:var(--muted);padding:8px 16px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;margin-bottom:1.75rem;transition:all 0.2s;text-decoration:none;} .pdf-btn:hover{background:var(--accent-bg);border-color:var(--accent);color:var(--accent-dark);} .pdf-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;} /* ----- SIDEBAR ----- */ .article-sidebar{position:sticky;top:88px;} .sidebar-block{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:1rem 1.1rem;margin-bottom:1rem;} .sidebar-block-title{font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-bottom:0.6rem;} /* Sidebar progression — bandeau pédagogique en 3 étapes pour la section Comprendre */ .sidebar-progress{background:var(--accent-bg);border:1px solid var(--accent-pale);border-radius:8px;padding:1.1rem 1.2rem;margin-bottom:1rem;} .sidebar-progress-title{font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);margin-bottom:0.9rem;} .sidebar-progress-list{list-style:none;padding:0;margin:0;position:relative;} .sidebar-progress-list li{position:relative;padding:0 0 0.9rem 36px;min-height:30px;} .sidebar-progress-list li:last-child{padding-bottom:0;} .sidebar-progress-list li::before{content:'';position:absolute;left:11px;top:24px;bottom:-2px;width:2px;background:var(--accent-pale);} .sidebar-progress-list li:last-child::before{display:none;} .sidebar-progress-step{position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--accent);background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--accent);transition:all 0.2s;} .sidebar-progress-list li.current .sidebar-progress-step{background:var(--accent);color:white;box-shadow:0 0 0 4px var(--accent-pale);} .sidebar-progress-label{font-size:13.5px;line-height:1.4;color:var(--muted);text-decoration:none;display:block;padding-top:3px;font-weight:400;transition:color 0.2s;} .sidebar-progress-list li.current .sidebar-progress-label{color:var(--accent);font-weight:600;} .sidebar-progress-list a.sidebar-progress-label:hover{color:var(--accent);} .sidebar-progress-desc{font-size:11.5px;color:var(--muted);margin-top:2px;display:block;line-height:1.35;} .sidebar-link{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;color:var(--text);text-decoration:none;padding:6px 0;border-bottom:1px solid var(--border);transition:color 0.2s;} .sidebar-link:last-child{border-bottom:none;} .sidebar-link:hover{color:var(--accent);} .sidebar-link-arrow{color:var(--muted);font-size:11px;} .sidebar-cta{background:var(--accent-bg);border:1px solid var(--accent);border-radius:8px;padding:1rem;margin-bottom:1rem;} .sidebar-cta h3{font-family:'DM Serif Display',serif;font-size:1.05rem;color:var(--accent-dark);margin-bottom:0.4rem;} .sidebar-cta p{font-size:13px;color:var(--accent-muted);line-height:1.55;margin-bottom:0.6rem;} .sidebar-cta a{display:inline-block;background:var(--accent);color:white;padding:6px 14px;border-radius:5px;text-decoration:none;font-size:13px;font-weight:500;} .sidebar-cta a:hover{background:var(--accent-dark);} /* ========================================================================== FOCUS — Marque de fabrique éditoriale Deux formats au choix selon le contenu de l'article : 1) .focus-card : un encadré simple pour un message-clé 2) .focus-grid : une grille de 3 cartes pour distinguer des concepts (variante .focus-grid.cols-2 pour 2 cartes côte à côte) Quatre teintes sémantiques pour les cartes : - .sage : concept fondateur, idée principale - .alert : alerte, signe d'avertissement (rose-rouge pastel) - .warn : vigilance, attention (ambre/jaune pastel) - .info : information complémentaire, distinction (violet pastel) ========================================================================== */ /* ----- ENCADRÉ SIMPLE (FOCUS-CARD) ----- */ .focus-card{border-radius:10px;padding:1.1rem 1.4rem;margin:1.5rem 0;border:1px solid var(--border);} .focus-card.sage{background:var(--accent-bg);border-color:var(--accent-pale);} .focus-card.alert{background:#FEF2F2;border-color:#FECACA;} .focus-card.warn{background:#FFFBEB;border-color:#FDE68A;} .focus-card.info{background:#F5F3FF;border-color:#DDD6FE;} .focus-card-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;display:inline-block;padding:2px 9px;border-radius:10px;margin-bottom:0.6rem;} .focus-card.sage .focus-card-label{background:var(--accent-pale);color:var(--accent-dark);} .focus-card.alert .focus-card-label{background:#FECACA;color:#991B1B;} .focus-card.warn .focus-card-label{background:#FDE68A;color:#92400E;} .focus-card.info .focus-card-label{background:#DDD6FE;color:#5B21B6;} .focus-card h3{font-size:1.05rem;font-weight:600;margin:0 0 0.4rem;line-height:1.3;} .focus-card.sage h3{color:var(--accent-dark);} .focus-card.alert h3{color:#991B1B;} .focus-card.warn h3{color:#92400E;} .focus-card.info h3{color:#5B21B6;} .focus-card p{font-size:14.5px;line-height:1.65;margin:0 0 0.5rem;color:var(--text);} .focus-card p:last-child{margin-bottom:0;} /* ----- GRILLE 3 CARTES (FOCUS-GRID) ----- */ .focus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.75rem;margin:1.5rem 0;} .focus-grid.cols-2{grid-template-columns:repeat(2,1fr);} .focus-grid .focus-card{margin:0;} .focus-grid .focus-card h3{font-size:1rem;} .focus-grid .focus-card ul{list-style:none;margin:0.4rem 0 0;padding-left:0;} .focus-grid .focus-card ul li{padding:2px 0 2px 12px;position:relative;line-height:1.55;font-size:13.5px;} .focus-grid .focus-card ul li::before{content:'—';position:absolute;left:0;font-weight:600;} .focus-grid .focus-card.sage ul li{color:var(--accent-dark);} .focus-grid .focus-card.sage ul li::before{color:var(--accent);} .focus-grid .focus-card.alert ul li{color:#7F1D1D;} .focus-grid .focus-card.alert ul li::before{color:#991B1B;} .focus-grid .focus-card.warn ul li{color:#78350F;} .focus-grid .focus-card.warn ul li::before{color:#92400E;} .focus-grid .focus-card.info ul li{color:#4C1D95;} .focus-grid .focus-card.info ul li::before{color:#5B21B6;} /* Responsive : 3 cartes deviennent empilées sur mobile */ @media(max-width:768px){ .focus-grid{grid-template-columns:1fr;} } /* ----- IMPRESSION ----- */ @media print{ *{color:#000!important;background:white!important;border-color:#999!important;} nav,.breadcrumb,.article-sidebar,.pdf-btn,footer{display:none!important;} .article-wrap{display:block!important;padding:0!important;} .article-header{padding:0 0 1rem!important;} .article-header h1{color:#000!important;font-size:18pt!important;} .article-section h2{color:#000!important;font-size:13pt!important;} .article-section a{color:#000!important;text-decoration:none!important;} body{font-size:10.5pt;line-height:1.55;} /* Focus à l'impression : juste un cadre sobre, pas de fond coloré */ .focus-card{border:1px solid #666!important;padding:0.6rem 0.8rem!important;} .focus-grid{grid-template-columns:1fr 1fr 1fr!important;} } /* ----- FOOTER ----- */ footer{background:#2A3F35;color:rgba(255,255,255,0.55);padding:1.25rem 2rem;text-align:center;font-size:13px;border-top:2px solid var(--sage-light);} footer a{color:#9FE1CB;text-decoration:none;} footer a:hover{color:white;} .footer-logo{font-family:'DM Serif Display',serif;font-size:18px;color:white;margin-bottom:4px;} .footer-logo span{color:#9FE1CB;font-style:italic;} .footer-links{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;margin:0.5rem 0;} .footer-disclaimer{font-size:11px;color:rgba(255,255,255,0.35);max-width:600px;margin:0.4rem auto 0;line-height:1.5;} /* ----- RESPONSIVE ----- */ @media(max-width:768px){ nav{padding:0 1.25rem;position:relative;} .nav-toggle{display:flex;} .nav-links{display:none;flex-direction:column;position:absolute;top:68px;left:0;right:0;background:var(--surface);padding:1rem 1.25rem;gap:0;z-index:200;border-bottom:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,0.08);} .nav-links.open{display:flex;} .nav-links a{padding:0.75rem 0;border-bottom:1px solid var(--border);font-size:15px;} .article-header{padding:2rem 1.25rem 1.25rem;} .article-wrap{grid-template-columns:1fr;gap:2rem;padding:0 1.25rem 2rem;} .article-sidebar{position:static;order:2;} }