/* ========================================================================== iD.LYS Solutions — styles éditoriaux : article, liste des actualités Pages concernées : Repris du design system du groupe (idlys.fr), accent orange Solutions. Contrairement à idlys.fr (feuille asynchrone + bloc critique inliné), la feuille est chargée normalement : le site est petit, on garde simple. THÈME : fond blanc en permanence — les pages éditoriales ne basculent pas avec le réglage du visiteur. color-scheme: light le verrouille, y compris pour les contrôles de formulaire dessinés par le navigateur. ========================================================================== */ /* ---- Jetons éditoriaux ---- */ html.p-edito { color-scheme: light; --ed-bg: #ffffff; --ed-surface: #f7f6f4; --ed-border: #e5e4e0; --ed-text: #1c1c1e; /* titres */ --ed-body: #3f3f45; /* corps */ --ed-muted: #6e6e77; /* méta */ --ed-accent: #ec7838; /* déco uniquement : bordures, barres, dégradés */ --ed-accent-text: #ec7838;/* accent texte : l'orange du logo */ --ed-accent-fonce: #d96524; --ed-ombre: 0 18px 40px rgb(27 27 28 / 8%); } /* ---- Base typographique lisible (68ch, corps fluide, interlignage 1.65) --- */ html.p-edito body { background: var(--ed-bg); color: var(--ed-body); font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.65; } /* Le `:not()` protège le pied de page partagé (titres blancs sur fond noir). */ html.p-edito :is(h1, h2, h3):not(.ic-footer *, .ic-nl *) { color: var(--ed-text); text-wrap: balance; } html.p-edito p { text-wrap: pretty; } /* ---- Fil d'Ariane : peu de mots avant le H1, mais un contexte crawlable -- */ .fil { max-width: 1160px; margin: 0 auto; padding: 16px 24px 0; font-size: 0.85rem; color: var(--ed-muted); } .fil ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0; padding: 0; list-style: none; } .fil li { display: flex; align-items: center; gap: 6px; } .fil li + li::before { content: "›"; line-height: 1; } .fil a, .fil [aria-current] { display: inline-block; padding: 4px 2px; /* cible ≥ 24 px de haut, identique sur les deux */ color: var(--ed-muted); text-decoration: none; text-underline-offset: 2px; } .fil a:hover { color: var(--ed-accent-text); text-decoration: underline; } /* ---- Grille de la page article -------------------------------------------- Le DOM place le sommaire APRÈS le corps (crawlers et lecteurs d'écran touchent le texte d'abord). La grille le repositionne : · mobile : ordre visuel entête → à retenir → sommaire → corps (order) · ≥ 1024px : aside sticky en colonne 2, sans changer le DOM */ .art-page { display: grid; grid-template-columns: minmax(0, 68ch); gap: 0 clamp(32px, 4vw, 56px); max-width: 1160px; margin: 0 auto; padding: 20px 24px 56px; overflow-wrap: break-word; } .art-page > * { grid-column: 1; min-width: 0; } .art-entete { order: -3; } .art-retenir { order: -2; } .art-sommaire { order: -1; } @media (min-width: 1024px) { .art-page { grid-template-columns: minmax(0, 68ch) minmax(240px, 300px); } .art-sommaire { grid-column: 2; grid-row: 1 / span 40; /* couvre toutes les lignes implicites */ align-self: start; position: sticky; top: calc(var(--ic-header-h) + 24px); max-height: calc(100vh - var(--ic-header-h) - 48px); overflow: auto; } } /* ---- Entête d'article : kicker, H1, chapô, ligne auteur ------------------- */ .art-kicker { display: inline-block; margin: 18px 0 14px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ed-accent-text); text-decoration: none; } .art-kicker:hover { text-decoration: underline; text-underline-offset: 3px; } .art-entete h1 { margin: 0 0 18px; font-size: clamp(1.7rem, 1.2rem + 2.6vw, 2.6rem); font-weight: 900; line-height: 1.12; letter-spacing: 0.01em; } .art-chapo { margin: 0 0 18px; font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem); line-height: 1.55; color: var(--ed-text); font-weight: 500; } /* Ligne auteur compacte (la bio complète est en fin d'article) */ .art-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--ed-border); font-size: 0.88rem; color: var(--ed-muted); } .art-meta a { color: inherit; font-weight: 700; text-underline-offset: 2px; } .art-meta a:hover { color: var(--ed-accent-text); } /* Les premiers mots : réponse complète, avant toute illustration */ .art-reponse p { margin: 0 0 14px; } /* ---- Bloc « À retenir » ---------------------------------------------------- */ .art-retenir { margin: 10px 0 26px; padding: 22px 24px; background: var(--ed-surface); border-left: 4px solid var(--ed-accent); border-radius: 0 12px 12px 0; } .art-retenir h2 { margin: 0 0 12px; font-size: 1rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .art-retenir ul { margin: 0; padding: 0; list-style: none; } .art-retenir li { position: relative; margin-bottom: 8px; padding-left: 22px; font-size: 0.97rem; } .art-retenir li::before { content: ""; position: absolute; top: 0.55em; left: 0; width: 12px; height: 5px; border-radius: 3px; background: var(--ed-accent); } /* ---- Sommaire (details natif : fonctionne sans JS via les ancres) -------- */ .art-sommaire { margin: 0 0 26px; font-size: 0.92rem; } .art-sommaire details { border: 1px solid var(--ed-border); border-radius: 12px; background: var(--ed-surface); } .art-sommaire summary { padding: 14px 18px; font-weight: 700; color: var(--ed-text); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .art-sommaire summary::-webkit-details-marker { display: none; } .art-sommaire summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease; flex-shrink: 0; } .art-sommaire details[open] summary::after { transform: rotate(-135deg); } .art-sommaire ol { margin: 0; padding: 4px 10px 12px; list-style: none; } .art-sommaire ol a { display: block; padding: 7px 10px; border-left: 3px solid transparent; border-radius: 0 6px 6px 0; color: var(--ed-body); text-decoration: none; line-height: 1.4; } .art-sommaire ol a:hover { color: var(--ed-accent-text); background: var(--ed-bg); } /* État posé par JS (scrollspy) — simple surlignage, aucun layout */ .art-sommaire ol a[aria-current="true"] { border-left-color: var(--ed-accent); color: var(--ed-accent-text); font-weight: 700; } /* ---- Barre de progression de lecture -------------------------------------- transform: scaleX() uniquement. Version CSS pure via animation-timeline quand le navigateur la connaît ; sinon article.js prend le relais. -------- */ .art-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1200; pointer-events: none; } .art-progress b { display: block; height: 100%; background: var(--ed-accent); transform: scaleX(0); transform-origin: 0 50%; } @supports (animation-timeline: scroll()) { .art-progress b { animation: art-prog linear both; animation-timeline: scroll(root); } @keyframes art-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } } } @media (prefers-reduced-motion: reduce) { .art-progress { display: none; } } /* ---- Corps de l'article ---------------------------------------------------- */ .art-corps { overflow-wrap: break-word; hyphens: auto; } .art-corps h2 { margin: 2.4em 0 0.6em; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.65rem); font-weight: 700; line-height: 1.25; } .art-corps h3 { margin: 1.8em 0 0.5em; font-size: clamp(1.08rem, 1rem + 0.5vw, 1.25rem); font-weight: 700; } .art-corps p { margin: 0 0 1em; } /* Réponse autoportante placée immédiatement sous chaque H2 */ .art-rd { padding: 2px 0 2px 16px; border-left: 3px solid var(--ed-border); color: var(--ed-text); font-weight: 500; } .art-corps a { color: var(--ed-accent-text); text-decoration: underline; text-underline-offset: 2px; } .art-corps a:hover { color: var(--ed-accent-fonce); } .art-corps :is(ul, ol) { margin: 0 0 1.2em; padding-left: 22px; } .art-corps li { margin-bottom: 6px; } .art-corps li::marker { color: var(--ed-accent); } /* ---- Figures / images ------------------------------------------------------ */ .art-corps figure { margin: 1.8em 0; } .art-corps figure img { width: 100%; height: auto; border-radius: 12px; background: var(--ed-surface); /* zone réservée avant décodage */ } /* Illustration étroite (affiche, schéma vertical) : jamais étirée pleine largeur, centrée dans la colonne */ .art-corps figure.art-figure-etroite img { width: auto; max-width: min(100%, 380px); margin: 0 auto; } .art-corps figcaption { margin-top: 8px; font-size: 0.85rem; color: var(--ed-muted); } /* ---- Encadré définition ---------------------------------------------------- */ .art-def { margin: 1.6em 0; padding: 20px 22px; background: var(--ed-surface); border: 1px solid var(--ed-border); border-radius: 12px; } .art-def h3 { margin: 0 0 8px; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ed-accent-text); } .art-def p { margin: 0; font-size: 0.97rem; } /* ---- Bloc chiffre clé (avec source datée) ---------------------------------- */ .art-chiffre { margin: 1.6em 0; padding: 22px 24px; border: 1px solid var(--ed-border); border-radius: 12px; text-align: left; } .art-chiffre strong { display: block; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); font-weight: 900; line-height: 1.1; color: var(--ed-accent-text); } .art-chiffre p { margin: 6px 0 0; color: var(--ed-text); } .art-chiffre small { display: block; margin-top: 8px; font-size: 0.82rem; color: var(--ed-muted); } /* ---- Citation --------------------------------------------------------------- */ .art-corps blockquote { margin: 1.8em 0; padding: 6px 0 6px 22px; border-left: 4px solid var(--ed-accent); } .art-corps blockquote p { margin: 0 0 8px; font-size: 1.1rem; color: var(--ed-text); font-weight: 500; } .art-corps blockquote footer { font-size: 0.85rem; color: var(--ed-muted); } /* ---- Tableau comparatif (défilement horizontal propre sur mobile) ---------- */ .art-table-scroll { margin: 1.8em 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--ed-border); border-radius: 12px; } .art-table-scroll table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.93rem; } .art-table-scroll caption { padding: 14px 16px 4px; text-align: left; font-weight: 700; color: var(--ed-text); } .art-table-scroll :is(th, td) { padding: 10px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--ed-border); } .art-table-scroll thead th { border-top: 0; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ed-muted); } .art-table-scroll tbody th { font-weight: 700; color: var(--ed-text); } .art-table-scroll tbody tr:nth-child(even) { background: var(--ed-surface); } /* ---- Note de mise à jour ---------------------------------------------------- */ .art-maj { margin: 2.4em 0 0; padding: 14px 18px; border: 1px dashed var(--ed-border); border-radius: 10px; font-size: 0.88rem; color: var(--ed-muted); } /* ---- Bio auteur complète ---------------------------------------------------- */ .art-bio { display: flex; gap: 18px; align-items: flex-start; margin: 2.6em 0 0; padding: 24px; background: var(--ed-surface); border-radius: 14px; content-visibility: auto; contain-intrinsic-size: auto 180px; } .art-bio picture { flex-shrink: 0; } .art-bio img { width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; } .art-bio h2 { margin: 0; font-size: 1.05rem; } .art-bio .art-bio-role { margin: 2px 0 8px; font-size: 0.85rem; color: var(--ed-muted); } .art-bio p { margin: 0 0 10px; font-size: 0.95rem; } .art-bio nav { display: flex; gap: 16px; font-size: 0.88rem; font-weight: 700; } .art-bio nav a { color: var(--ed-accent-text); text-underline-offset: 2px; } /* ---- Sources ----------------------------------------------------------------- */ .art-sources { margin: 2.6em 0 0; content-visibility: auto; contain-intrinsic-size: auto 260px; } .art-sources h2 { margin: 0 0 12px; font-size: 1.1rem; } .art-sources ol { margin: 0; padding-left: 22px; font-size: 0.92rem; } .art-sources li { margin-bottom: 8px; } .art-sources a { color: var(--ed-accent-text); text-underline-offset: 2px; } .art-sources span { color: var(--ed-muted); } /* ---- Articles liés + cartes de la liste (styles partagés) -------------------- */ .art-lies { margin: 2.8em 0 0; content-visibility: auto; contain-intrinsic-size: auto 420px; } .art-lies h2 { margin: 0 0 18px; font-size: 1.25rem; } .al-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; } /* Carte d'article : même anatomie que .ic-actu de l'accueil — vignette puis corps. Ratio réservé, donc CLS nul. */ .al-carte { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--ed-border); border-radius: 12px; background: var(--ed-bg); text-decoration: none; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } /* height: auto est INDISPENSABLE : sans lui, l'attribut height de l'image l'emporte et aspect-ratio est ignoré. Les attributs restent obligatoires (réservation de place avant décodage → CLS 0). */ .al-vignette { aspect-ratio: 16 / 9; width: 100%; height: auto; object-fit: cover; background: var(--ed-surface); } /* Repli des articles sans image : dégradé accent + pictogramme */ .al-sans-image { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; width: 100%; background: linear-gradient(135deg, var(--ed-accent), var(--ed-accent-fonce)); } .al-sans-image svg { opacity: 0.9; } .al-corps { display: flex; flex-direction: column; gap: 10px; flex-grow: 1; padding: 22px 24px 24px; } .al-carte:hover { transform: translateY(-4px); border-color: var(--ed-accent); box-shadow: var(--ed-ombre); } /* Méta de carte : la CATÉGORIE porte le signal, la DATE reste discrète. */ .al-carte .al-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; } .al-carte .al-cat { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ed-accent-text); } .al-carte .al-meta time { font-size: 0.76rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ed-muted); font-variant-numeric: tabular-nums; } .al-carte :is(h2, h3) { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.35; } .al-carte p { margin: 0; flex-grow: 1; font-size: 0.92rem; color: var(--ed-body); } .al-carte .al-suite { font-size: 0.84rem; font-weight: 700; color: var(--ed-text); } .al-carte .al-suite::after { content: " \2192"; } /* ---- Bouton retour en haut (révélé par JS après l'entête) --------------------- */ .art-haut { position: fixed; right: 18px; bottom: 18px; z-index: 1100; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ed-accent); color: #fff; text-decoration: none; box-shadow: var(--ed-ombre); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s; } .art-haut.est-visible { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s; } /* ========================================================================== Liste des actualités (/actualites/) ========================================================================== */ .al-hero { max-width: 1160px; margin: 0 auto; padding: clamp(36px, 6vw, 64px) 24px 8px; } .al-hero h1 { margin: 6px 0 12px; font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.5rem); font-weight: 900; } .al-hero > p { max-width: 62ch; margin: 0 0 8px; color: var(--ed-body); } /* Outils de recherche : invisibles tant que JS n'est pas là (hidden dans le HTML) mais l'espace est réservé — la révélation ne décale rien (CLS 0) */ .al-outils[hidden] { display: flex !important; visibility: hidden; } .al-outils { max-width: 1160px; margin: 0 auto; padding: 10px 24px 6px; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-end; } .al-champ label { display: block; margin-bottom: 6px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ed-muted); } .al-champ input { min-width: min(340px, 72vw); padding: 11px 14px; border: 1.5px solid var(--ed-border); border-radius: 8px; background: var(--ed-bg); color: var(--ed-text); font: inherit; font-size: 0.95rem; } .al-champ input:focus-visible { outline: 2px solid var(--ed-accent); outline-offset: 2px; border-color: var(--ed-accent); } .al-chips { display: flex; flex-wrap: wrap; gap: 8px; } .al-chip { padding: 9px 16px; /* cible ≥ 24×24 px */ border: 1.5px solid var(--ed-border); border-radius: 999px; background: var(--ed-bg); color: var(--ed-body); font: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; } .al-chip:hover { border-color: var(--ed-accent); color: var(--ed-accent-text); } .al-chip[aria-pressed="true"] { background: var(--ed-accent); border-color: var(--ed-accent); color: #fff; } .al-compte { max-width: 1160px; margin: 0 auto; padding: 4px 24px 14px; font-size: 0.88rem; color: var(--ed-muted); } .al-liste { max-width: 1160px; margin: 0 auto; padding: 6px 24px 64px; } .al-vide { padding: 32px 0; color: var(--ed-muted); } .al-vide a { color: var(--ed-accent-text); } /* ========================================================================== Impression : contenu seul, URLs des liens en clair ========================================================================== */ @media print { #idh-desktop, #idh-mobile, .art-progress, .art-sommaire, .art-haut, .art-lies, .al-outils, .ic-nl, .ic-footer { display: none !important; } html.p-edito body { background: #fff; color: #000; font-size: 11pt; } .art-page { display: block; max-width: none; padding: 0; } .art-entete h1 { font-size: 20pt; } .art-corps a[href^="http"]::after, .art-sources a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #444; } .art-retenir, .art-def, .art-chiffre, .art-table-scroll { break-inside: avoid; } }