/* cmsms stylesheet: ELS Conseil 2026 modified: dimanche 26 juillet 2026 04:56:02 */ /* Polices auto-hébergées (Sora + Manrope, variables, OFL). Récupérées de Google Fonts, servies en local pour retirer la requête render-blocking. url() relatif à tmp/cache/ -> valable en local (/els-conseil/) comme en prod (/). */ @font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url(../../uploads/fonts/Manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url(../../uploads/fonts/Manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Sora';font-style:normal;font-weight:500 800;font-display:swap;src:url(../../uploads/fonts/Sora-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Sora';font-style:normal;font-weight:500 800;font-display:swap;src:url(../../uploads/fonts/Sora-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* ========================================================================== ELS Conseil — Feuille de style 2026 Reprend les tokens du handoff Claude Design (README.md §4). Les styles de mise en page restent en ligne dans le markup, conformément à l'exigence de fidélité au pixel. Ne sont centralisés ici que : les règles globales, les animations, le responsive et les états :hover (qui ne peuvent pas s'exprimer en style inline). ========================================================================== */ /* --- Base ---------------------------------------------------------------- */ * { box-sizing: border-box; } body { margin: 0; } a { color: #256EC7; } a:hover { color: #1F63C4; } img { max-width: 100%; } /* --- Apparition au scroll ------------------------------------------------ */ /* Repli sans JS : .els-reveal reste visible tant que n'a pas la classe els-js. Le script l'ajoute avant le premier rendu. */ .els-js .els-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.16,.8,.24,1), transform .7s cubic-bezier(.16,.8,.24,1); } .els-js .els-reveal.is-in { opacity: 1; transform: none; } /* --- Animations ---------------------------------------------------------- */ @keyframes els-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes els-pulse { 0% { transform: scale(.8); opacity: .9; } 70% { transform: scale(2.4); opacity: 0; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .els-js .els-reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation: none !important; transition: none !important; } } /* --- En-tête ------------------------------------------------------------- */ .els-burger { display: none; } /* Appel direct, MOBILE UNIQUEMENT. Sous 1150 px, .els-cta-desktop disparaît : l'en-tête n'y porte alors plus aucun appel à l'action, alors que c'est précisément l'écran du dirigeant en panne. Même géométrie que la loupe et le burger (44x44). Orange #D0481E : 4,54:1 sur blanc, conforme AA. ⚠️ MESURE À CONNAÎTRE : le logo (191 px) et le groupe de boutons sont tous deux en flex-shrink:0. Avec ce 3e bouton l'en-tête demande 419 px, d'où un débordement horizontal mesuré à 35 px sur un écran de 360, 20 px à 375 et 5 px à 390. Au-delà de ~395 px, aucun débordement. En test sur iPhone 16 Pro (402 px). Si l'on veut couvrir les écrans plus étroits : réduire les marges de l'en-tête (24->16), l'écart logo/boutons (24->12) et l'écart entre boutons (12->8) libère 36 px. */ .els-tel-mobile { display: none; } /* Seuil de bascule vers le menu burger. ⚠️ Était à 1040 px, ce qui était trop bas : la barre bureau (logo 264 + six entrées + loupe + bouton) demande ~1133 px. Entre 1041 et 1133 px elle débordait donc horizontalement — 92 px à 1041, 43 px à 1090, 13 px à 1120 — sur un portable en fenêtre non maximisée. Défaut mesuré et corrigé le 26/07. Si l'on rallonge un jour un libellé de navigation, refaire la mesure : ce seuil en dépend directement. */ @media (max-width: 1150px) { .els-nav-links { display: none !important; } .els-burger { display: inline-flex !important; } .els-cta-desktop { display: none !important; } .els-tel-mobile { display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #EAECF0; background: #fff; border-radius: 10px; color: #D0481E; text-decoration: none; flex-shrink: 0; } .els-tel-mobile:hover { border-color: #C7CCD6; } } @media (max-width: 520px) { .els-logo { height: 42px !important; } } /* Sous 430 px, l'en-tête n'a plus la place de tenir le logo ET les trois boutons (loupe, téléphone, burger) : il demandait 419 px de large. Mesuré avant ce correctif : débordement horizontal de 20 px sur iPhone 11 Pro (375), 35 px à 360, 5 px à 390 — confirmé sur appareil réel. L'iPhone 16 Pro (402) passait, d'où l'importance de tester plus étroit que son propre écran. On resserre donc les espacements et on réduit le logo, mobile UNIQUEMENT. Les !important sont nécessaires : ces valeurs sont en style inline dans les gabarits (exigence de fidélité au pixel du handoff, cf. en-tête de ce fichier). */ @media (max-width: 430px) { .els-hd-inner { padding: 0 16px !important; gap: 12px !important; } .els-hd-actions { gap: 8px !important; } .els-logo { height: 36px !important; } } .els-mobile-nav { display: none; } .els-mobile-nav.is-open { display: block; } /* Cible tactile ≥ 44px (accessibilité, README §8) */ .els-nav-links a { min-height: 40px; display: inline-flex; align-items: center; } /* --- États :hover -------------------------------------------------------- */ /* Traduction 1:1 des attributs `style-hover` du handoff (non standard). */ /* CTA orange, variante de base (7 occurrences) */ .els-hv-cta:hover { background: #A9451B; transform: translateY(-2px); } /* CTA orange, grand format */ .els-hv-cta-lg:hover { background: #A9451B; transform: translateY(-2px); box-shadow: 0 18px 34px -10px rgba(232,98,42,0.8); } /* CTA orange, en-tête */ .els-hv-cta-sm:hover { background: #A9451B; transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(232,98,42,0.75); } /* CTA orange, décalage discret */ .els-hv-cta-1:hover { background: #A9451B; transform: translateY(-1px); } /* Lien sur fond sombre */ .els-hv-white:hover { color: #fff; } /* Bouton sombre */ .els-hv-dark:hover { background: #000; transform: translateY(-2px); } /* Bouton fantôme sur bandeau dégradé */ .els-hv-ghost:hover { background: rgba(0,0,0,0.30); } /* Carte standard */ .els-hv-card:hover { border-color: #D7DCE4; box-shadow: 0 26px 50px -28px rgba(35,60,110,0.4); transform: translateY(-4px); } /* Carte accent orange */ .els-hv-card-orange:hover { border-color: #EBD3C6; box-shadow: 0 26px 50px -28px rgba(232,98,42,0.4); transform: translateY(-4px); } /* Élévations simples */ .els-hv-lift3:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -28px rgba(35,60,110,0.4); } .els-hv-lift3-sm:hover { transform: translateY(-3px); box-shadow: 0 24px 46px -28px rgba(35,60,110,0.4); } .els-hv-lift3-lg:hover { transform: translateY(-3px); box-shadow: 0 30px 56px -30px rgba(35,60,110,0.45); } .els-hv-lift4:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(35,60,110,0.45); } /* Carte douce */ .els-hv-soft:hover { border-color: #C7CCD6; background: #FAFBFC; } /* --- Plan du site -------------------------------------------------------- */ .els-plan { max-width: 980px; margin: 0 auto; padding: clamp(36px,4vw,56px) 24px clamp(48px,6vw,72px); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px 40px; font-family: 'Manrope', sans-serif; } .els-plan-actus { grid-column: 1 / -1; } .els-plan-bloc h2 { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 18px; color: #23242A; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid #EAECF0; } .els-plan-bloc h3 { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 14px; color: #D0481E; margin: 18px 0 8px; text-transform: uppercase; letter-spacing: 0.5px; } .els-plan-bloc ul { list-style: none; margin: 0; padding: 0; } .els-plan-bloc li { margin: 0 0 9px; } .els-plan-bloc a { color: #33343A; text-decoration: none; font-size: 15px; border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease; } .els-plan-bloc a:hover { color: #256EC7; border-bottom-color: #256EC7; } .els-plan-actus ul { columns: 2; column-gap: 40px; } @media (max-width: 560px) { .els-plan-actus ul { columns: 1; } } /* --- Recherche ----------------------------------------------------------- */ .els-search-open { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #EAECF0; background: #fff; border-radius: 10px; cursor: pointer; color: #33343A; flex-shrink: 0; transition: border-color .15s ease, color .15s ease; } .els-search-open:hover { border-color: #C7CCD6; color: #256EC7; } .els-search { position: fixed; inset: 0; z-index: 300; } .els-search[hidden] { display: none; } .els-search-fond { position: absolute; inset: 0; background: rgba(35,36,42,0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .els-search-modale { position: relative; max-width: 680px; margin: 8vh auto 0; background: #fff; border-radius: 20px; box-shadow: 0 40px 90px -30px rgba(35,60,110,0.6); padding: 22px 22px 12px; max-height: 78vh; display: flex; flex-direction: column; font-family: 'Manrope', sans-serif; } .els-search-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .els-search-label { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 16px; color: #23242A; } .els-search-fermer { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: none; background: #F3F4F6; color: #33343A; border-radius: 9px; cursor: pointer; } .els-search-fermer:hover { background: #E7E9ED; } .els-search-champ-boite { display: flex; align-items: center; gap: 10px; margin-top: 14px; border: 1px solid #DDE1E8; border-radius: 12px; padding: 0 14px; transition: border-color .15s ease, box-shadow .15s ease; } .els-search-champ-boite:focus-within { border-color: #256EC7; box-shadow: 0 0 0 3px rgba(43,125,224,0.14); } .els-search-champ { flex: 1; border: none; outline: none; font-family: 'Manrope', sans-serif; font-size: 16px; color: #23242A; padding: 14px 0; background: transparent; } .els-search-champ::placeholder { color: #A2A7B0; } .els-search-etat { font-size: 13px; color: #6B6F79; margin: 12px 2px 6px; } .els-search-resultats { list-style: none; margin: 0; padding: 0 0 10px; overflow-y: auto; } .els-search-item + .els-search-item { border-top: 1px solid #F0F1F4; } .els-search-item a { display: block; padding: 14px 12px; border-radius: 12px; text-decoration: none; transition: background .12s ease; } .els-search-item a:hover, .els-search-item a:focus { background: #F6F8FB; outline: none; } .els-search-type { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #D0481E; } .els-search-titre { display: block; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 16px; line-height: 1.3; color: #23242A; margin-top: 4px; } .els-search-extrait { display: block; font-size: 13.5px; line-height: 1.55; color: #6B6F79; margin-top: 5px; } @media (max-width: 620px) { .els-search-modale { margin: 0; border-radius: 0; max-height: 100vh; height: 100vh; } } /* --- Bandeau de consentement --------------------------------------------- */ .els-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200; background: #fff; border: 1px solid #E4E8EE; border-radius: 18px; box-shadow: 0 24px 60px -24px rgba(35,60,110,0.45); font-family: 'Manrope', sans-serif; } .els-consent[hidden] { display: none; } .els-consent-box { max-width: 1000px; margin: 0 auto; padding: 20px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; justify-content: space-between; } .els-consent-titre { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 16px; color: #23242A; margin: 0 0 6px; } .els-consent-texte { font-size: 14px; line-height: 1.6; color: #6B6F79; margin: 0; max-width: 640px; } .els-consent-texte a { color: #256EC7; font-weight: 600; text-decoration: none; } .els-consent-texte a:hover { text-decoration: underline; } .els-consent-actions { display: flex; gap: 10px; flex-shrink: 0; } /* Refuser et Accepter ont le même poids visuel : refuser doit être aussi simple qu'accepter (recommandation CNIL). */ .els-consent-btn { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 15px; line-height: 1; padding: 13px 22px; border-radius: 10px; cursor: pointer; min-height: 44px; transition: background .15s ease, border-color .15s ease, transform .15s ease; } .els-consent-btn:hover { transform: translateY(-1px); } .els-consent-refuse { background: #fff; color: #33343A; border: 1px solid #D8DDE4; } .els-consent-refuse:hover { border-color: #B9C0CA; } .els-consent-accept { background: #23242A; color: #fff; border: 1px solid #23242A; } .els-consent-accept:hover { background: #000; } @media (max-width: 640px) { .els-consent-box { padding: 18px; } .els-consent-actions { width: 100%; } .els-consent-btn { flex: 1; } } /* --- Filtres par catégorie (page Actualités) ------------------------------ */ .els-cats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 32px; } .els-cat-pill { display: inline-flex; align-items: center; gap: 9px; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 14px; line-height: 1; text-decoration: none; border: 1px solid #E4E8EE; border-radius: 999px; padding: 10px 14px 10px 16px; min-height: 40px; transition: border-color .15s ease, background .15s ease, transform .15s ease; } .els-cat-pill:hover { border-color: #C7CCD6; transform: translateY(-1px); } .els-cat-pill[aria-current="true"]:hover { border-color: #23242A; } .els-cat-count { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 8px; min-width: 22px; text-align: center; } .els-cat-info { font-size: 14.5px; color: #6B6F79; margin: -18px 0 30px; } .els-cat-info a { color: #256EC7; font-weight: 600; text-decoration: none; } .els-cat-info a:hover { color: #1F63C4; text-decoration: underline; } @media (max-width: 560px) { .els-cats { gap: 8px; } .els-cat-pill { font-size: 13.5px; padding: 9px 12px 9px 14px; } } /* --- Pages légales ------------------------------------------------------- */ /* Le corps de ces pages est du HTML hérité de l'ancien thème : des suites de

,
et , sans classes. On le met en forme ici, sans toucher au texte juridique lui-même. */ .els-legal { max-width: 820px; margin: 0 auto; padding: clamp(36px, 4vw, 56px) 24px clamp(48px, 6vw, 72px); font-size: 16px; line-height: 1.75; color: #4A4D56; } .els-legal p { margin: 0 0 18px; } /* Les

de l'éditeur WYSIWYG servaient d'espaceurs : on les neutralise. */ .els-legal p:empty { display: none; } .els-legal strong { color: #23242A; font-weight: 600; } /* NB : pas de règle «
…
= titre » ici. En CSS, :only-child ignore les nœuds texte, donc «
Le coût…
» serait à tort traité comme un titre et « Le » se retrouverait orphelin. Les pages utilisent de vrais
/
pour leurs titres. */ .els-legal h2, .els-legal h3 { font-family: 'Sora', sans-serif; color: #23242A; letter-spacing: -0.4px; line-height: 1.3; } .els-legal h2 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; margin: 44px 0 14px; } .els-legal h3 { font-size: 18px; font-weight: 600; margin: 32px 0 10px; } .els-legal a { color: #256EC7; text-decoration: none; border-bottom: 1px solid rgba(43,125,224,0.28); } .els-legal a:hover { color: #1F63C4; border-bottom-color: #1F63C4; } .els-legal ul, .els-legal ol { margin: 0 0 18px; padding-left: 22px; } .els-legal li { margin-bottom: 8px; } .els-legal table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 14.5px; } .els-legal th, .els-legal td { border: 1px solid #EAECF0; padding: 10px 12px; text-align: left; vertical-align: top; } .els-legal th { background: #F6F8FB; font-weight: 600; color: #23242A; } /* Les tableaux larges défilent au lieu de déborder la page. */ .els-legal .els-table-scroll { overflow-x: auto; } .els-legal img { max-width: 100%; height: auto; border-radius: 10px; } /* --- Pied de page -------------------------------------------------------- */ .els-legal-links { display: flex; flex-wrap: wrap; gap: 16px; } .els-legal-links a { color: #888B93; text-decoration: none; font-size: 13px; transition: color .15s ease; } .els-legal-links a:hover { color: #C7CAD2; } /* --- Champs de formulaire ------------------------------------------------ */ /* Reprise à l'identique du