/* Theme Name: Conso Energie Theme URI: https://www.conso-energie.fr Author: Lucas L Description: Theme classique, leger et oriente SEO/performance pour conso-energie.fr, guide national de la consommation energetique des logements. Direction artistique institutionnelle francaise, editoriale et moderne. Mobile-first, sans dependance front externe. Version: 0.2.0 Requires at least: 6.4 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: conso-energie */ /* ========================================================= 0. Polices auto-hebergees (RGPD : aucun appel externe) ========================================================= */ @font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/figtree-400.woff2") format("woff2"); } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/figtree-500.woff2") format("woff2"); } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/figtree-600.woff2") format("woff2"); } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/figtree-700.woff2") format("woff2"); } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/figtree-800.woff2") format("woff2"); } /* ========================================================= 1. Design tokens ========================================================= */ :root { /* Couleurs nationales */ --c-blue: #000091; /* Bleu France, couleur primaire */ --c-blue-800: #00006e; /* survol / aplats fonces */ --c-blue-100: #e7e7ff; /* fond bleute clair */ --c-blue-050: #f3f3ff; --c-red: #e1000f; /* rouge, accents et liseres tricolores */ --c-red-800: #b4000c; --c-green: #18a05a; /* accent energie ponctuel (eco) */ --c-ink: #1b1b2f; /* texte principal, jamais noir pur */ --c-ink-soft: #525275; /* texte secondaire */ --c-line: #dcdce6; /* filets, bordures */ --c-line-strong: #b9b9cf; --c-bg: #ffffff; --c-bg-soft: #f4f4fb; /* fonds de section */ --c-bg-blue: #000091; /* Typographie : Figtree, douce et tres lisible, pour titres et texte. */ --font-serif: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fs-base: 1.0625rem; /* 17px */ --lh-base: 1.65; /* Espacement */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; --radius: 4px; --radius-lg: 6px; --container: 1180px; --container-narrow: 760px; --tricolore: linear-gradient(90deg, var(--c-blue) 0 33.33%, #ffffff 33.33% 66.66%, var(--c-red) 66.66% 100%); } /* ========================================================= 2. Reset et base ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--c-ink); background: var(--c-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--c-blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--c-red-800); } h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--c-blue); line-height: 1.14; font-weight: 800; margin: 0 0 var(--sp-4); letter-spacing: -.02em; } h3, h4 { font-weight: 700; letter-spacing: -.01em; } h1 { font-size: clamp(2.1rem, 5.2vw, 3.2rem); } h2 { font-size: clamp(1.6rem, 3.6vw, 2.25rem); } h3 { font-size: clamp(1.2rem, 2.4vw, 1.45rem); } p { margin: 0 0 var(--sp-4); } ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; } li { margin-bottom: var(--sp-2); } strong { color: var(--c-blue); font-weight: 600; } :focus-visible { outline: 3px solid var(--c-red); outline-offset: 2px; } /* ========================================================= 3. Tricolore et utilitaires ========================================================= */ .tricolore-bar { height: 4px; background: var(--tricolore); width: 100%; } .tricolore-accent { height: 3px; width: 64px; background: var(--tricolore); border: 0; margin: 0 0 var(--sp-4); } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); } .container--narrow { max-width: var(--container-narrow); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--c-blue); color: #fff; padding: var(--sp-3) var(--sp-4); } .skip-link:focus { left: 0; color: #fff; } .surtitre { display: inline-flex; align-items: center; gap: .5rem; text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; font-weight: 700; color: var(--c-red-800); font-family: var(--font-sans); margin: 0 0 var(--sp-3); } .surtitre::before { content: ""; width: 18px; height: 3px; background: var(--tricolore); } /* ========================================================= 4. Boutons ========================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-family: var(--font-sans); font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; padding: .9rem 1.5rem; border-radius: var(--radius); border: 2px solid transparent; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; } .btn--accent, .btn--primary { background: var(--c-blue); color: #fff; } .btn--accent:hover, .btn--primary:hover { background: var(--c-blue-800); color: #fff; } .btn--ghost { background: #fff; color: var(--c-blue); border-color: var(--c-line-strong); } .btn--ghost:hover { border-color: var(--c-blue); color: var(--c-blue); } .btn--lg { padding: 1.05rem 1.9rem; font-size: 1.05rem; } .btn--block { width: 100%; } .btn--sur-bleu { background: #fff; color: var(--c-blue); } .btn--sur-bleu:hover { background: var(--c-blue-100); color: var(--c-blue); } .btn--pro { background: #fff; color: var(--c-red-800); border-color: var(--c-red); } .btn--pro:hover { background: #fdeeef; color: var(--c-red-800); border-color: var(--c-red-800); } .lien-fleche { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; color: var(--c-blue); } .lien-fleche::after { content: "\2192"; transition: transform .15s; } .lien-fleche:hover { color: var(--c-red-800); } .lien-fleche:hover::after { transform: translateX(4px); } /* ========================================================= 5. En-tete ========================================================= */ .site-header { background: #fff; position: sticky; top: 0; z-index: 100; } .site-header__inner { display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-3); min-height: 112px; } .site-logo { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; } .site-logo__icone { width: 96px; height: 96px; } .site-logo--footer .site-logo__icone { width: 96px; height: 96px; } .site-header__cta { display: none; } .site-header__actions { display: flex; align-items: center; gap: var(--sp-3); order: 2; } .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; background: #fff; border: 1px solid var(--c-line-strong); border-radius: var(--radius); cursor: pointer; order: 3; } .nav-toggle__barres, .nav-toggle__barres::before, .nav-toggle__barres::after { content: ""; display: block; width: 22px; height: 2px; background: var(--c-blue); margin-inline: auto; transition: transform .2s, opacity .2s; } .nav-toggle__barres { position: relative; } .nav-toggle__barres::before { position: absolute; top: -7px; left: 0; } .nav-toggle__barres::after { position: absolute; top: 7px; left: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__barres { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle__barres::before { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__barres::after { transform: translateY(-7px) rotate(-45deg); } .nav-principale { display: none; } .nav-principale.is-open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--c-line); border-bottom: 3px solid var(--c-blue); padding: var(--sp-2) var(--sp-4) var(--sp-4); box-shadow: 0 14px 26px rgba(0,0,40,.07); max-height: calc(100vh - 112px); overflow-y: auto; } .nav-principale__liste { list-style: none; margin: 0; padding: 0; } .nav-item { position: relative; border-bottom: 1px solid var(--c-line); } .nav-link { display: flex; align-items: center; gap: .4rem; width: 100%; padding: var(--sp-3) 3rem var(--sp-3) 0; text-decoration: none; color: var(--c-blue); font-weight: 600; font-size: 1.02rem; font-family: inherit; background: none; border: 0; text-align: left; cursor: pointer; } .nav-chevron { color: var(--c-ink-soft); transition: transform .2s ease; flex-shrink: 0; } .nav-sub-toggle { position: absolute; top: 0; right: 0; width: 52px; height: 52px; background: none; border: 0; cursor: pointer; } .nav-item.is-sub-open .nav-chevron { transform: rotate(180deg); } .mega { display: none; } .nav-item.is-sub-open > .mega { display: block; padding-bottom: var(--sp-2); } .mega__col { margin-bottom: var(--sp-2); } .mega__col-titre { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 700; color: var(--c-ink-soft); margin: .4rem 0; } .mega__list { list-style: none; margin: 0; padding: 0; } .mega__link { display: block; padding: .5rem .7rem; text-decoration: none; border-radius: var(--radius); } .mega__link:hover { background: var(--c-blue-050); } .mega__link-t { display: block; font-weight: 600; color: var(--c-blue); font-size: .95rem; } .mega__link-d { display: block; font-size: .82rem; color: var(--c-ink-soft); } .mega__featured { display: block; padding: var(--sp-4); background: var(--c-blue-050); border: 1px solid var(--c-line); border-radius: var(--radius); text-decoration: none; margin-top: var(--sp-2); } .mega__featured-t { display: block; font-family: var(--font-serif); font-weight: 700; color: var(--c-blue); } .mega__featured-d { display: block; font-size: .85rem; color: var(--c-ink-soft); margin: .25rem 0 .5rem; } .mega__featured-cta { font-weight: 600; color: var(--c-red-800); font-size: .9rem; } a.mega__col-titre--link { color: var(--c-blue); transition: color .15s ease; } a.mega__col-titre--link:hover { color: var(--c-red-800); text-decoration: underline; } .mega--compact .mega__link { padding: .35rem .7rem; } .mega--compact .mega__link-t { font-size: .92rem; } .nav-principale__cta-mobile { margin-top: var(--sp-4); width: 100%; } .nav-principale__pro-mobile { margin-top: var(--sp-2); width: 100%; } .site-header__pro { display: none; } @media (min-width: 1000px) { .site-header__inner { display: flex; align-items: center; justify-content: center; gap: clamp(var(--sp-4), 3vw, var(--sp-6)); } .site-logo { margin-right: 0; flex-shrink: 0; } .nav-toggle { display: none; } .nav-principale { display: flex !important; justify-content: center; align-self: stretch; position: static; padding: 0; border: 0; background: transparent; box-shadow: none; max-height: none; overflow: visible; } .nav-principale__liste { display: flex; flex-direction: row; align-items: stretch; gap: var(--sp-1); height: 100%; } .nav-item { position: static; border: 0; display: flex; align-items: center; } .nav-sub-toggle { display: none; } .nav-link { width: auto; height: 100%; padding: .5rem .6rem; font-size: 1rem; border-bottom: 2px solid transparent; } .nav-link:hover, .has-mega:hover > .nav-link, .has-mega:focus-within > .nav-link { border-bottom-color: var(--c-red); } .nav-chevron { width: 13px; height: 13px; } .has-mega:hover > .nav-link .nav-chevron, .has-mega:focus-within > .nav-link .nav-chevron { transform: rotate(180deg); } .nav-principale__cta-mobile { display: none; } .site-header__cta, .site-header__pro { display: inline-flex; white-space: nowrap; padding: .6rem 1rem; font-size: .92rem; } .nav-principale__pro-mobile { display: none; } .site-header__actions { flex-shrink: 0; margin-left: var(--sp-2); } .mega { display: block; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--c-line); border-bottom: 3px solid var(--c-blue); box-shadow: 0 18px 30px rgba(0,0,40,.10); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 90; } .has-mega:hover > .mega, .has-mega:focus-within > .mega { opacity: 1; visibility: visible; transform: none; } .mega__inner { display: flex; gap: var(--sp-6); padding: var(--sp-6) var(--sp-5); align-items: flex-start; } .mega__col { flex: 1 1 0; min-width: 0; margin: 0; } .mega__col-titre { margin-top: 0; } .mega__list { display: grid; gap: 2px; } .mega__featured { flex: 0 0 250px; margin-top: 0; align-self: stretch; } } /* ---- Mega "Nos services" : rail d'encarts + panneau de pages (N3) ---- */ .svc-list { list-style: none; margin: 0; padding: 0; } .svc { position: relative; border-bottom: 1px solid var(--c-line); } .svc-card { position: relative; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 2.6rem var(--sp-3) 0; text-decoration: none; color: var(--c-blue); } .svc-card__icone { flex-shrink: 0; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: var(--c-blue); } .svc-card__icone svg { width: 26px; height: 26px; } .svc-card__body { display: flex; flex-direction: column; line-height: 1.25; } .svc-card__t { font-weight: 700; font-size: 1rem; } .svc-card__d { font-size: .82rem; color: var(--c-ink-soft); font-weight: 400; } .svc-card__arrow { display: inline-flex; margin-left: auto; color: var(--c-ink-soft); transition: transform .2s ease; } .svc-card__toggle { position: absolute; top: 0; right: 0; width: 56px; height: 58px; background: none; border: 0; cursor: pointer; } .svc.is-open > .svc-card .svc-card__arrow { transform: rotate(90deg); } .svc-panel { position: relative; z-index: 1; display: none; padding: 0 0 var(--sp-3) calc(34px + var(--sp-3)); } .svc.is-open > .svc-panel { display: block; } .svc-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); text-decoration: none; margin-bottom: var(--sp-1); } .svc-panel__titre { font-weight: 700; color: var(--c-blue); } .svc-panel__all { font-size: .82rem; font-weight: 600; color: var(--c-red-800); white-space: nowrap; } .svc-panel__list { list-style: none; margin: 0; padding: 0; } .svc-panel__link { display: block; padding: .4rem .6rem; text-decoration: none; color: var(--c-ink); border-radius: var(--radius); font-size: .94rem; } .svc-panel__link:hover { background: var(--c-blue-050); color: var(--c-blue); } .svc-panel__soon { font-size: .9rem; color: var(--c-ink-soft); margin: 0 0 var(--sp-2); } .svc-panel__cta { font-size: .9rem; } .svc-rail__cta { display: block; margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--c-blue-050); border: 1px solid var(--c-line); border-radius: var(--radius); text-decoration: none; } .svc-rail__cta-t { display: block; font-weight: 700; color: var(--c-blue); } .svc-rail__cta-d { display: block; font-size: .85rem; font-weight: 600; color: var(--c-red-800); margin-top: .15rem; } @media (min-width: 1000px) { .mega--rail .mega__inner--rail { position: relative; display: block; padding: var(--sp-5) var(--sp-5); min-height: 320px; } .svc-rail { width: 320px; } .svc-card { padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-2); border-radius: var(--radius); } .svc { position: static; border-bottom: 0; } .svc-card__arrow { display: inline-flex; margin-left: auto; color: var(--c-ink-soft); transition: transform .15s ease; } .svc-card__toggle { display: none; } .svc.is-active > .svc-card { background: var(--c-blue-050); } .svc.is-active > .svc-card .svc-card__arrow { transform: translateX(2px); color: var(--c-blue); } .svc-panel { position: absolute; top: var(--sp-5); left: calc(320px + var(--sp-6)); right: var(--sp-5); padding: 0 0 0 var(--sp-6); border-left: 1px solid var(--c-line); min-height: 270px; } .svc.is-active > .svc-panel { display: block; } .svc-panel__head { margin-bottom: var(--sp-3); } .svc-panel__titre { font-size: 1.15rem; font-family: var(--font-serif); } .svc-panel__list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--sp-4); } .svc-rail__cta { margin-top: var(--sp-4); } } /* ========================================================= 6. Fil d'Ariane ========================================================= */ .breadcrumb { padding: var(--sp-5) 0 0; font-size: .88rem; } .breadcrumb__list { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; color: var(--c-ink-soft); } .breadcrumb__item { display: flex; align-items: center; gap: .4rem; margin: 0; } .breadcrumb__item:not(:last-child)::after { content: "\203A"; color: var(--c-line-strong); } .breadcrumb a { text-decoration: none; color: var(--c-ink-soft); } .breadcrumb a:hover { color: var(--c-red-800); } .breadcrumb [aria-current="page"] { color: var(--c-blue); font-weight: 600; } /* ========================================================= 7. CTA devis ========================================================= */ .cta-devis { background: var(--c-blue-050); border: 1px solid var(--c-line); border-left: 4px solid var(--c-blue); border-radius: 0 var(--radius) var(--radius) 0; padding: var(--sp-5); margin: var(--sp-6) 0; display: grid; gap: var(--sp-4); } .cta-devis--banner { background: var(--c-blue); border-color: var(--c-blue); color: #fff; border-radius: var(--radius); position: relative; overflow: hidden; } .cta-devis--banner::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--tricolore); } .cta-devis--banner .cta-devis__titre, .cta-devis--banner .cta-devis__texte { color: #fff; } .cta-devis--banner .btn--accent { background: #fff; color: var(--c-blue); } .cta-devis--banner .btn--accent:hover { background: var(--c-blue-100); } .cta-devis__titre { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; color: var(--c-blue); margin: 0; } .cta-devis__texte { margin: .35rem 0 0; color: var(--c-ink-soft); } .cta-devis__reassurance { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: 0; padding: 0; font-size: .9rem; color: var(--c-ink-soft); } .cta-devis--banner .cta-devis__reassurance { color: rgba(255,255,255,.9); } .cta-devis__reassurance li { margin: 0; padding-left: 1.4rem; position: relative; } .cta-devis__reassurance li::before { content: "\2713"; position: absolute; left: 0; color: var(--c-red); font-weight: 700; } .cta-devis--banner .cta-devis__reassurance li::before { color: #fff; } @media (min-width: 760px) { .cta-devis { grid-template-columns: 1fr auto; align-items: center; } .cta-devis__reassurance { grid-column: 1 / -1; } } /* ========================================================= 8. Reassurance ========================================================= */ .reassurance { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: 1fr; } .reassurance__item { display: flex; flex-direction: column; gap: .25rem; background: #fff; border: 1px solid var(--c-line); border-top: 3px solid var(--c-blue); padding: var(--sp-5) var(--sp-4); } .reassurance__icone { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--c-blue-050); color: var(--c-blue); margin-bottom: var(--sp-3); } .reassurance__icone svg { width: 26px; height: 26px; } .reassurance__titre { font-family: var(--font-serif); font-weight: 700; font-size: 1.1rem; color: var(--c-blue); } .reassurance__texte { color: var(--c-ink-soft); font-size: .95rem; } @media (min-width: 760px) { .reassurance { grid-template-columns: repeat(4, 1fr); } } /* ========================================================= 9. Listes d'articles ========================================================= */ .page-entete { padding: var(--sp-6) 0 var(--sp-4); } .page-entete__titre { margin-bottom: var(--sp-3); } .page-entete__intro { color: var(--c-ink-soft); max-width: var(--container-narrow); font-size: 1.12rem; } .liste-articles { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; padding-bottom: var(--sp-6); } .carte-article { border: 1px solid var(--c-line); background: #fff; } .carte-article__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .carte-article__corps { padding: var(--sp-4); } .carte-article__titre { font-size: 1.2rem; margin-bottom: var(--sp-2); } .carte-article__titre a { text-decoration: none; } .carte-article__extrait { color: var(--c-ink-soft); font-size: .95rem; } @media (min-width: 760px) { .liste-articles { grid-template-columns: repeat(3, 1fr); } } .pagination { padding: var(--sp-6) 0; } .pagination .nav-links { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; } .pagination a, .pagination .current { padding: .5rem .9rem; border: 1px solid var(--c-line-strong); text-decoration: none; } .pagination .current { background: var(--c-blue); color: #fff; border-color: var(--c-blue); } /* ========================================================= 10. FAQ ========================================================= */ .faq { margin: var(--sp-7) 0; } .faq__titre { margin-bottom: var(--sp-4); } .faq__list { display: grid; gap: var(--sp-2); } .faq__item { border: 1px solid var(--c-line); background: #fff; } .faq__q { cursor: pointer; font-family: var(--font-serif); font-weight: 600; font-size: 1.08rem; color: var(--c-blue); padding: var(--sp-4); list-style: none; position: relative; padding-right: 2.5rem; } .faq__q::-webkit-details-marker { display: none; } .faq__q::after { content: "+"; position: absolute; right: var(--sp-4); top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--c-red); } .faq__item[open] .faq__q::after { content: "\2212"; } .faq__a { padding: 0 var(--sp-4) var(--sp-4); color: var(--c-ink-soft); } /* ========================================================= 11. Pied de page (style institutionnel a la gouv.fr) ========================================================= */ .site-footer { background: #fff; border-top: 1px solid var(--c-line); margin-top: var(--sp-8); } .site-footer__haut { padding: var(--sp-7) 0; } .site-footer__grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; } .site-footer__brand { max-width: 40ch; } .site-footer__brand .site-logo { margin-bottom: var(--sp-3); } .site-footer__signature { font-family: var(--font-serif); font-weight: 700; font-size: 1.05rem; color: var(--c-blue); margin: 0 0 var(--sp-2); } .site-footer__baseline { font-size: .92rem; color: var(--c-ink-soft); } .site-footer__cols { display: grid; gap: var(--sp-5); grid-template-columns: 1fr 1fr; } .site-footer__titre { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; color: var(--c-blue); margin: 0 0 var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 2px solid var(--c-line); } .site-footer__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); } .site-footer__liste a { color: var(--c-ink); text-decoration: none; font-size: .95rem; } .site-footer__liste a:hover { color: var(--c-red-800); text-decoration: underline; } .site-footer__bas { border-top: 1px solid var(--c-line); background: var(--c-bg-soft); padding: var(--sp-4) 0; } .site-footer__bas-inner { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; justify-content: space-between; } .site-footer__legal { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0; padding: 0; font-size: .85rem; } .site-footer__legal li { margin: 0; position: relative; } .site-footer__legal a { color: var(--c-ink-soft); text-decoration: none; } .site-footer__legal a:hover { color: var(--c-blue); text-decoration: underline; } .site-footer__copy { font-size: .82rem; color: var(--c-ink-soft); margin: 0; } .site-footer__mention { font-size: .8rem; color: var(--c-ink-soft); margin: var(--sp-2) 0 0; } @media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.1fr 3fr; } .site-footer__cols { grid-template-columns: repeat(4, 1fr); } } /* Bande de confiance (Bleu France) */ .site-footer__trust { background: var(--c-blue); color: #fff; } .site-footer__trust-inner { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); padding: var(--sp-5) 0; } .site-footer__trust-item { display: flex; align-items: flex-start; gap: var(--sp-3); } .site-footer__trust-ic { flex-shrink: 0; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .12); border-radius: 50%; } .site-footer__trust-ic svg { width: 22px; height: 22px; } .site-footer__trust-item > span { display: flex; flex-direction: column; line-height: 1.3; } .site-footer__trust-item strong { font-size: .98rem; color: #fff; } .site-footer__trust-item span span { font-size: .82rem; color: rgba(255, 255, 255, .8); } @media (min-width: 760px) { .site-footer__trust-inner { grid-template-columns: repeat(4, 1fr); } } /* CTA dans le bloc marque */ .site-footer__cta { margin-top: var(--sp-4); } /* Ressources officielles */ .site-footer__officiel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--c-line); } .site-footer__officiel-label { text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; font-weight: 700; color: var(--c-ink-soft); } .site-footer__officiel-liste { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0; padding: 0; } .site-footer__officiel-liste a { color: var(--c-blue); text-decoration: none; font-weight: 600; font-size: .9rem; } .site-footer__officiel-liste a:hover { text-decoration: underline; } /* Bande partenaires (logos déposés dans assets/img/partenaires/) */ .site-footer__partenaires { border-top: 1px solid var(--c-line); background: var(--c-bg-soft); } .site-footer__partenaires .container { padding-top: var(--sp-5); padding-bottom: var(--sp-5); } .site-footer__partenaires-titre { text-align: center; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; font-weight: 700; color: var(--c-ink-soft); margin: 0 0 var(--sp-4); } .site-footer__logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); align-items: center; justify-content: center; } .site-footer__logos img { max-height: 46px; width: auto; filter: grayscale(1); opacity: .7; transition: filter .15s ease, opacity .15s ease; } .site-footer__logos img:hover { filter: none; opacity: 1; } /* ========================================================= 12. Contenu editorial ========================================================= */ .prose { max-width: var(--container-narrow); font-size: 1.075rem; } .prose h2 { margin-top: var(--sp-7); scroll-margin-top: 90px; } .prose h2::after { content: ""; display: block; width: 56px; height: 3px; background: var(--tricolore); margin-top: var(--sp-3); } .prose h3 { margin-top: var(--sp-5); } .prose img { margin: var(--sp-5) 0; } .prose ul li::marker { color: var(--c-red); } .aucun-resultat { padding: var(--sp-7) 0; color: var(--c-ink-soft); } /* ========================================================= 13. Sections homepage ========================================================= */ .section { padding: var(--sp-8) 0; } .section--soft { background: var(--c-bg-soft); } .section--blue { background: var(--c-blue); color: #fff; } .section--blue h2, .section--blue .section__intro { color: #fff; } .section__entete { max-width: var(--container-narrow); margin-bottom: var(--sp-6); } .section__intro { color: var(--c-ink-soft); margin: 0; font-size: 1.1rem; } /* Hero */ .hero { position: relative; background: #fff; padding: var(--sp-8) 0; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 92% 0%, var(--c-blue-050) 0%, transparent 60%); z-index: 0; } .hero__inner { position: relative; z-index: 1; display: grid; gap: var(--sp-6); grid-template-columns: 1fr; align-items: center; } .hero__titre { margin-bottom: var(--sp-4); } .hero__titre em { font-style: normal; color: var(--c-red); } .hero__intro { font-size: 1.18rem; color: var(--c-ink-soft); max-width: 54ch; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-4); } .hero__points { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: 0; padding: 0; font-size: .92rem; color: var(--c-ink-soft); } .hero__points li { margin: 0; padding-left: 1.5rem; position: relative; } .hero__points li::before { content: "\2713"; position: absolute; left: 0; color: var(--c-green); font-weight: 700; } .hero__media { position: relative; display: flex; justify-content: center; } .hero__mascotte { width: clamp(180px, 40vw, 290px); height: auto; } .hero__media-fond { position: absolute; inset: auto 0 0 0; width: 78%; aspect-ratio: 1; margin: auto; background: var(--c-blue-050); border-radius: 50%; z-index: -1; } @media (min-width: 900px) { .hero__inner { grid-template-columns: 1.25fr .75fr; } } /* Chiffres cles */ .chiffres { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); } .chiffre { background: #fff; padding: var(--sp-5) var(--sp-4); text-align: center; } .chiffre__val { font-family: var(--font-serif); font-weight: 700; font-size: clamp(2rem, 5vw, 2.8rem); color: var(--c-blue); line-height: 1; } .chiffre__lab { display: block; margin-top: var(--sp-2); font-size: .92rem; color: var(--c-ink-soft); } @media (min-width: 760px) { .chiffres { grid-template-columns: repeat(4, 1fr); } } /* Grille verticales */ .grille-verticales { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: 1fr; } .carte-verticale { margin: 0; } .carte-verticale__lien { display: block; height: 100%; background: #fff; border: 1px solid var(--c-line); border-top: 3px solid var(--c-blue); padding: var(--sp-5); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; position: relative; } .carte-verticale__lien:hover { border-top-color: var(--c-red); transform: translateY(-3px); } .carte-verticale__icone { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: var(--radius); background: var(--c-blue-050); color: var(--c-blue); margin-bottom: var(--sp-3); } .carte-verticale__titre { display: block; font-family: var(--font-serif); font-weight: 700; font-size: 1.2rem; color: var(--c-blue); margin-bottom: var(--sp-2); } .carte-verticale__desc { display: block; color: var(--c-ink-soft); font-size: .95rem; } .carte-verticale__badge { display: inline-block; margin-top: var(--sp-3); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-ink-soft); background: var(--c-bg-soft); border: 1px solid var(--c-line); padding: .2rem .6rem; } @media (min-width: 640px) { .grille-verticales { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .grille-verticales { grid-template-columns: repeat(3, 1fr); } } /* Comment ca marche (etapes) */ .etapes { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; counter-reset: etape; } .etape { position: relative; background: #fff; border: 1px solid var(--c-line); padding: var(--sp-5); padding-top: var(--sp-6); } .etape__num { position: absolute; top: -22px; left: var(--sp-5); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--c-blue); color: #fff; font-family: var(--font-serif); font-weight: 700; font-size: 1.3rem; border-radius: 50%; } .etape__titre { font-family: var(--font-serif); font-size: 1.2rem; color: var(--c-blue); margin: 0 0 var(--sp-2); } .etape__texte { color: var(--c-ink-soft); font-size: .96rem; margin: 0; } @media (min-width: 760px) { .etapes { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } } /* Couverture nationale */ .couverture { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; align-items: center; } .couverture__mascotte { width: clamp(160px, 34vw, 240px); height: auto; justify-self: center; } .couverture__villes { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 0; padding: 0; } .couverture__villes li { margin: 0; } .couverture__villes span { display: inline-block; background: #fff; border: 1px solid var(--c-line); padding: .35rem .8rem; font-size: .88rem; color: var(--c-blue); } @media (min-width: 860px) { .couverture { grid-template-columns: .8fr 1.2fr; } } /* Grille guides */ .grille-guides { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; } .carte-guide { background: #fff; border: 1px solid var(--c-line); padding: var(--sp-5); border-left: 4px solid var(--c-red); } .carte-guide__titre { font-size: 1.18rem; margin-bottom: var(--sp-2); } .carte-guide__titre a { text-decoration: none; } .carte-guide__desc { color: var(--c-ink-soft); font-size: .95rem; margin-bottom: var(--sp-3); } @media (min-width: 760px) { .grille-guides { grid-template-columns: repeat(3, 1fr); } } .carte-guide__cat { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-red-800); margin-bottom: .4rem; } .grille-guides__plus { text-align: center; margin: var(--sp-5) 0 0; } /* Bloc simulateur sur la home (couverture avec texte large + fond bleuté) */ .couverture--simu { background: var(--c-blue-050); border: 1px solid var(--c-blue-100); border-radius: var(--radius-lg); padding: var(--sp-6); } @media (min-width: 860px) { .couverture--simu { grid-template-columns: 1.2fr .8fr; } } /* Grille des bandes dessinées (page d'accueil) */ .bd-grille { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); grid-template-columns: 1fr; } @media (min-width: 680px) { .bd-grille { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .bd-grille { grid-template-columns: repeat(3, 1fr); } } .bd-carte { display: flex; gap: var(--sp-4); background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-4); } .bd-carte__visuel { flex-shrink: 0; } .bd-carte__visuel img { width: 110px; height: auto; display: block; border: 1px solid var(--c-line); border-radius: var(--radius); } .bd-carte__corps { display: flex; flex-direction: column; gap: .35rem; } .bd-carte__theme { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-red-800); } .bd-carte__titre { font-family: var(--font-serif); font-weight: 700; color: var(--c-blue); margin: 0; line-height: 1.2; } /* --- Recherche à suggestions (header) --- */ .site-search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex-shrink: 0; background: none; color: var(--c-blue); border: 0; border-radius: var(--radius); cursor: pointer; } .site-search-toggle:hover { color: var(--c-red-800); } /* Panneau fermé par défaut : déplié (grille 0fr) + masqué, ouvert au clic de la loupe. */ .site-search { display: grid; grid-template-rows: 0fr; opacity: 0; background: #fff; border-bottom: 0 solid var(--c-blue); box-shadow: none; transition: grid-template-rows .3s ease, opacity .22s ease, border-bottom-width .3s ease, box-shadow .3s ease; } .site-search > .container { overflow: hidden; min-height: 0; } .site-search.is-open { grid-template-rows: 1fr; opacity: 1; border-top: 1px solid var(--c-line); border-bottom-width: 3px; box-shadow: 0 16px 30px rgba(0, 0, 40, .08); } .site-search__bar { display: flex; align-items: center; gap: .6rem; padding: var(--sp-3) 0; color: var(--c-blue); } .site-search__bar input { flex: 1; height: 48px; border: 1.5px solid var(--c-line-strong); border-radius: var(--radius); padding: 0 1rem; font-size: 1.05rem; font-family: inherit; color: var(--c-ink); } .site-search__bar input:focus { border-color: var(--c-blue); outline: none; } .site-search__close { width: 42px; height: 42px; flex-shrink: 0; border: 0; background: none; color: var(--c-ink-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .site-search__close:hover { color: var(--c-red-800); } .site-search__results { list-style: none; margin: 0; padding: 0 0 var(--sp-4); max-height: calc(100vh - 210px); max-height: calc(100svh - 210px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .site-search__results li { margin: 0; } .site-search__res { display: flex; align-items: flex-start; gap: .7rem; padding: .6rem 1rem; text-decoration: none; border-radius: var(--radius); } .site-search__res:hover, .site-search__res.is-active { background: var(--c-blue-050); } .site-search__res-ic { flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px; background: var(--c-blue-050); color: var(--c-blue); display: inline-flex; align-items: center; justify-content: center; } .site-search__res-ic svg { width: 20px; height: 20px; } .site-search__res-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .site-search__res-t { color: var(--c-blue); font-weight: 600; font-size: 1rem; } .site-search__res-d { color: var(--c-ink-soft); font-size: .85rem; line-height: 1.35; } .site-search__empty { color: var(--c-ink-soft); padding: .6rem 1rem .4rem; font-size: .92rem; line-height: 1.5; } .site-search__hint { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 700; color: var(--c-ink-soft); padding: .8rem 1rem .25rem; } .site-search__chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 1rem .4rem; } .site-search__chip { font-family: inherit; font-size: .88rem; font-weight: 600; color: var(--c-blue); background: var(--c-blue-050); border: 1px solid var(--c-line); border-radius: 999px; padding: .35rem .8rem; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .site-search__chip:hover { background: #fff; border-color: var(--c-blue); } .site-search__dym { font-family: inherit; font-size: inherit; font-weight: 700; color: var(--c-red-800); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; } .site-search__cta { display: flex; flex-wrap: wrap; gap: .6rem; padding: .8rem 1rem .2rem; } .site-search__cta-main, .site-search__cta-alt { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .92rem; padding: .6rem 1.1rem; border-radius: var(--radius); text-decoration: none; } .site-search__cta-main { background: var(--c-red); color: #fff; } .site-search__cta-main:hover { background: var(--c-red-800); } .site-search__cta-alt { background: #fff; color: var(--c-blue); border: 1.5px solid var(--c-line-strong); } .site-search__cta-alt:hover { border-color: var(--c-blue); } /* ========================================================= 14. Formulaires + tunnel de devis ========================================================= */ input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], select, textarea { width: 100%; font: inherit; color: var(--c-ink); background: #fff; border: 1.5px solid var(--c-line-strong); border-radius: var(--radius); padding: .75rem .85rem; transition: border-color .15s, box-shadow .15s; } input:focus, select:focus, textarea:focus { border-color: var(--c-blue); outline: none; box-shadow: 0 0 0 3px var(--c-blue-100); } .is-invalid { border-color: var(--c-red) !important; box-shadow: 0 0 0 3px rgba(225,0,15,.12); } label { font-weight: 500; } .devis { background: #fff; border: 1px solid var(--c-line); border-top: 4px solid var(--c-blue); padding: var(--sp-5); margin-bottom: var(--sp-7); } .devis__progress { list-style: none; display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-5); padding: 0; } .devis__progress li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem; font-size: .75rem; color: var(--c-ink-soft); text-align: center; } .devis__progress li span { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-bg-soft); border: 1.5px solid var(--c-line-strong); color: var(--c-ink-soft); font-weight: 700; } .devis__progress li.is-active span { background: var(--c-blue); border-color: var(--c-blue); color: #fff; } .devis__progress li.is-done span { background: var(--c-red); border-color: var(--c-red); color: #fff; } .devis__progress li.is-active { color: var(--c-blue); font-weight: 600; } .devis__etape { display: none; border: 0; padding: 0; margin: 0; position: relative; } .devis__etape.is-visible { display: block; } .devis__legend { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 700; color: var(--c-blue); margin-bottom: var(--sp-4); padding: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); width: 100%; } .devis__mascotte { display: none; flex-shrink: 0; width: 84px; height: auto; } @media (min-width: 600px) { .devis__mascotte { display: block; } } .devis__champ { margin-bottom: var(--sp-4); } .devis__label { display: block; font-weight: 600; color: var(--c-blue); margin-bottom: var(--sp-2); } .devis__ligne { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; } @media (min-width: 560px) { .devis__ligne { grid-template-columns: 1fr 1fr; } } .devis__choix-grille { display: grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr; } .devis__choix-grille--compact { grid-template-columns: 1fr; } @media (min-width: 560px) { .devis__choix-grille { grid-template-columns: repeat(3, 1fr); } .devis__choix-grille--compact { grid-template-columns: repeat(3, 1fr); } } .devis__choix { position: relative; display: flex; cursor: pointer; } .devis__choix input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .devis__choix-label { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 3.4rem; padding: .7rem .75rem; border: 1.5px solid var(--c-line-strong); border-radius: var(--radius); font-weight: 600; line-height: 1.25; color: var(--c-blue); background: #fff; transition: border-color .15s, background .15s; } .devis__choix input:hover + .devis__choix-label { border-color: var(--c-blue); } .devis__choix input:checked + .devis__choix-label { border-color: var(--c-blue); background: var(--c-blue-050); } .devis__choix input:focus-visible + .devis__choix-label { outline: 3px solid var(--c-red); outline-offset: 2px; } .devis__consentement { display: flex; gap: var(--sp-3); align-items: flex-start; font-weight: 400; font-size: .92rem; color: var(--c-ink-soft); background: var(--c-bg-soft); border: 1px solid var(--c-line); padding: var(--sp-3); margin: var(--sp-3) 0; } .devis__consentement input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; } .devis__actions { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-5); } .devis__actions .btn { min-width: 130px; } .devis__reassurance { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; margin: var(--sp-5) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--c-line); font-size: .85rem; color: var(--c-ink-soft); } .devis__reassurance li { margin: 0; padding-left: 1.3rem; position: relative; } .devis__reassurance li::before { content: "\2713"; position: absolute; left: 0; color: var(--c-red); font-weight: 700; } .devis__erreur-globale { background: #fdecea; border: 1px solid #f3c4bd; color: var(--c-red-800); padding: var(--sp-3); margin-bottom: var(--sp-4); font-size: .92rem; } .devis__succes { background: var(--c-blue-050); border: 1px solid var(--c-blue); color: var(--c-blue); padding: var(--sp-5); text-align: center; font-weight: 600; } .devis__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .page-entete__meta { color: var(--c-ink-soft); font-size: .9rem; margin: 0; } .page-article__media img { width: 100%; margin: var(--sp-4) 0; } .page-404__liens { margin: var(--sp-4) 0; } .recherche-404 { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); } .recherche-404 input { flex: 1; } /* ========================================================= 15. Sommaire (table des matieres) ========================================================= */ .sommaire { background: var(--c-bg-soft); border: 1px solid var(--c-line); border-left: 4px solid var(--c-red); padding: var(--sp-4) var(--sp-5); margin: var(--sp-5) 0 var(--sp-6); } .sommaire__titre { font-family: var(--font-sans); font-weight: 700; color: var(--c-blue); margin: 0 0 var(--sp-2); text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; } .sommaire__liste { margin: 0; padding-left: 1.2rem; columns: 1; } .sommaire__liste li { margin-bottom: var(--sp-1); } .sommaire__liste a { text-decoration: none; color: var(--c-blue); } .sommaire__liste a:hover { color: var(--c-red-800); text-decoration: underline; } @media (min-width: 640px) { .sommaire__liste { columns: 2; column-gap: var(--sp-6); } } /* ========================================================= 16. Mascotte en situation ========================================================= */ .cta-devis__mascotte { display: none; width: 120px; height: auto; align-self: end; } @media (min-width: 760px) { .cta-devis--mascotte { grid-template-columns: auto 1fr auto; } .cta-devis__mascotte { display: block; } } .entete-mascotte { display: flex; align-items: center; gap: var(--sp-5); } .entete-mascotte__txt { flex: 1; min-width: 0; } .entete-mascotte__owl { width: 104px; height: auto; flex-shrink: 0; display: none; } @media (min-width: 760px) { .entete-mascotte__owl { display: block; } } .page-mascotte { width: 150px; height: auto; display: block; margin: 0 auto var(--sp-5); } /* ========================================================= 17. Simulateur energie ========================================================= */ .simu { background: #fff; border: 1px solid var(--c-line); border-top: 4px solid var(--c-blue); padding: var(--sp-5); } .simu__top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); } .simu__progress { flex: 1; height: 8px; background: var(--c-bg-soft); border-radius: 999px; overflow: hidden; } .simu__progress span { display: block; height: 100%; background: var(--tricolore); transition: width .3s ease; } .simu__compteur { font-size: .82rem; font-weight: 600; color: var(--c-ink-soft); white-space: nowrap; margin: 0; } .simu__back { background: none; border: 0; color: var(--c-ink-soft); font: inherit; font-size: .9rem; cursor: pointer; padding: 0; margin-bottom: var(--sp-3); } .simu__back:hover { color: var(--c-blue); } .simu__q-titre { font-size: clamp(1.3rem, 3vw, 1.7rem); margin-bottom: var(--sp-2); } .simu__q-sous { color: var(--c-ink-soft); margin-bottom: var(--sp-5); } .simu__choix { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; } @media (min-width: 560px) { .simu__choix { grid-template-columns: 1fr 1fr; } } .simu__opt { display: flex; align-items: center; gap: var(--sp-3); text-align: left; width: 100%; background: #fff; border: 1.5px solid var(--c-line-strong); border-radius: var(--radius); padding: var(--sp-4); cursor: pointer; font: inherit; color: var(--c-blue); font-weight: 600; transition: border-color .15s, background .15s, transform .1s; } .simu__opt:hover { border-color: var(--c-blue); background: var(--c-blue-050); } .simu__opt:active { transform: scale(.99); } .simu__opt.is-selected { border-color: var(--c-blue); background: var(--c-blue-050); } .simu__opt-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius); background: var(--c-blue-050); color: var(--c-blue); } .simu__opt-ic svg { width: 24px; height: 24px; } .simu__opt:hover .simu__opt-ic, .simu__opt.is-selected .simu__opt-ic { background: var(--c-blue); color: #fff; } .simu__num { max-width: 420px; } .simu__num-val { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-4); } .simu__num-val input { font-family: var(--font-serif); font-size: 2rem; font-weight: 800; color: var(--c-blue); width: 130px; text-align: center; padding: .4rem; } .simu__num-u { font-size: 1.1rem; color: var(--c-ink-soft); font-weight: 600; } .simu__num input[type="range"] { width: 100%; accent-color: var(--c-blue); margin-bottom: var(--sp-4); } .simu__presets { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); } .simu__preset { background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: 999px; padding: .35rem .8rem; font: inherit; font-size: .85rem; color: var(--c-blue); cursor: pointer; } .simu__preset:hover { border-color: var(--c-blue); background: var(--c-blue-050); } .simu__continue { width: 100%; } /* Resultat */ .simu__result-sur { text-transform: uppercase; letter-spacing: .1em; font-size: .76rem; font-weight: 700; color: var(--c-red-800); margin: 0 0 var(--sp-2); } .simu__result-titre { font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin-bottom: var(--sp-4); } .simu__result-intro { color: var(--c-ink-soft); margin: var(--sp-5) 0 var(--sp-3); } .simu-jauge { height: 14px; background: var(--c-bg-soft); border-radius: 999px; overflow: hidden; margin-bottom: var(--sp-2); } .simu-jauge__fill { display: block; height: 100%; border-radius: 999px; transition: width .5s ease; } .simu__stats { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); } @media (min-width: 560px) { .simu__stats { grid-template-columns: repeat(3, 1fr); } } .simu__stat { background: #fff; padding: var(--sp-4); text-align: center; } .simu__stat-v { display: block; font-family: var(--font-serif); font-weight: 800; font-size: 1.7rem; color: var(--c-blue); line-height: 1.1; } .simu__stat-l { display: block; font-size: .82rem; color: var(--c-ink-soft); margin-top: .25rem; } .simu__recos { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; } @media (min-width: 760px) { .simu__recos { grid-template-columns: repeat(3, 1fr); } } .simu-reco { display: flex; flex-direction: column; border: 1px solid var(--c-line); border-top: 3px solid var(--c-red); padding: var(--sp-4); background: #fff; } .simu-reco__h { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); } .simu-reco__ic { display: inline-flex; width: 30px; height: 30px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-blue-050); color: var(--c-blue); } .simu-reco__ic svg { width: 18px; height: 18px; } .simu-reco__t { font-family: var(--font-serif); font-weight: 700; color: var(--c-blue); margin: 0; font-size: 1.05rem; } .simu-reco__e { color: var(--c-ink-soft); font-size: .92rem; margin: 0 0 var(--sp-2); flex: 1; } .simu-reco__eco { margin: 0 0 var(--sp-1); font-size: .95rem; } .simu-reco__p { margin: 0 0 var(--sp-3); font-size: .82rem; color: var(--c-ink-soft); } .simu-reco__cta { width: 100%; font-size: .92rem; padding: .7rem 1rem; } .simu-reco__tag { display: inline-block; font-size: .8rem; font-weight: 600; color: var(--c-ink-soft); background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: 999px; padding: .3rem .8rem; text-align: center; } .simu__aides { display: flex; gap: var(--sp-2); align-items: flex-start; background: var(--c-blue-050); border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-4); margin: var(--sp-5) 0; font-size: .92rem; color: var(--c-ink); } .simu__aides-ic { color: var(--c-green); flex-shrink: 0; } .simu__aides-ic svg { width: 20px; height: 20px; } .simu__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); } .simu__note { font-size: .82rem; color: var(--c-ink-soft); } /* ========================================================= 18. Carte des zones d'intervention ========================================================= */ .carte-fr { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; align-items: start; margin: var(--sp-5) 0; } @media (min-width: 760px) { .carte-fr { grid-template-columns: 1.7fr 1fr; } } /* Seule la carte deborde de la colonne de texte etroite (le titre et l'intro restent alignes), centree. */ @media (min-width: 1000px) { .carte-fr { width: min(1100px, 94vw); position: relative; left: 50%; transform: translateX(-50%); } } .carte-fr__map svg { width: 100%; height: auto; display: block; } .carte-fr__map path[data-d] { fill: #c2cef2; stroke: #ffffff; stroke-width: 1.3; stroke-linejoin: round; cursor: pointer; transition: fill .12s ease; } .carte-fr__map path[data-d]:hover { fill: var(--c-blue); } .carte-fr__map path[data-d]:focus-visible { fill: var(--c-blue); outline: none; } .carte-fr__map path[data-d].is-active { fill: var(--c-red); } .carte-fr__panel { background: #fff; border: 1px solid var(--c-line); border-top: 3px solid var(--c-blue); padding: var(--sp-5); } @media (min-width: 760px) { .carte-fr__panel { position: sticky; top: 128px; } } .carte-fr__hint { color: var(--c-ink-soft); margin: 0; } .carte-fr__dept { font-family: var(--font-serif); font-weight: 800; font-size: 1.3rem; color: var(--c-blue); margin: 0 0 var(--sp-2); } .carte-fr__code { color: var(--c-ink-soft); font-weight: 400; font-size: .95rem; } .carte-fr__txt { color: var(--c-ink-soft); font-size: .92rem; margin: 0 0 var(--sp-3); } .carte-fr__villes { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: 0; } .carte-fr__villes li { margin: 0; } .carte-fr__villes a, .carte-fr__ville-btn { display: inline-block; background: var(--c-blue-050); border: 1px solid var(--c-line); border-radius: 999px; padding: .3rem .8rem; font-size: .88rem; font-family: inherit; text-decoration: none; color: var(--c-blue); cursor: pointer; } .carte-fr__villes a:hover, .carte-fr__ville-btn:hover { border-color: var(--c-blue); background: #fff; } .carte-fr__cta { width: 100%; } /* ---- Liste de villes (local SEO : villes proches, zones) ---- */ .villes-proches { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); } .villes-proches li { margin: 0; } .villes-proches a { display: inline-block; background: var(--c-blue-050); border: 1px solid var(--c-line); border-radius: 999px; padding: .35rem .85rem; text-decoration: none; color: var(--c-blue); font-size: .9rem; } .villes-proches a:hover { border-color: var(--c-blue); background: #fff; } /* ---- Hero estimateur (pages villes) ---- */ .ville-hero { margin: var(--sp-4) 0 var(--sp-5); padding: var(--sp-5); background: var(--c-blue-050); border: 1px solid var(--c-line); border-left: 5px solid var(--c-red); border-radius: var(--radius); } .ville-hero__kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700; color: var(--c-red-800); margin: 0 0 .25rem; } .ville-hero__titre { font-family: var(--font-serif); font-weight: 700; font-size: 1.2rem; color: var(--c-blue); margin: 0 0 var(--sp-3); } .ville-hero__label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .35rem; } .ville-hero__select { width: 100%; max-width: 440px; padding: .6rem .7rem; border: 1px solid var(--c-line); border-radius: var(--radius); font: inherit; background: #fff; color: var(--c-ink); } .ville-hero__resultat { margin: var(--sp-3) 0 0; font-size: 1.02rem; color: var(--c-ink); } .ville-hero__resultat strong { color: var(--c-blue); font-size: 1.15rem; } .ville-hero__note { display: block; font-size: .8rem; color: var(--c-ink-soft); font-weight: 400; margin-top: .2rem; } .ville-hero__actions { margin-top: var(--sp-4); } .ville-hero__reass { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-3) 0 0; padding: 0; font-size: .85rem; color: var(--c-ink-soft); } .ville-hero__reass li::before { content: "\2713"; color: #18a05a; font-weight: 700; margin-right: .3rem; } /* Simulateur de prix par ville (estimateur précis) */ .ville-sim { margin-top: var(--sp-3); } .ville-sim__champs { display: grid; gap: var(--sp-3) var(--sp-4); grid-template-columns: 1fr; align-items: end; } @media (min-width: 560px) { .ville-sim__champs { grid-template-columns: 1fr 1fr; } .ville-sim__champ--full { grid-column: 1 / -1; } } .ville-sim__champ { min-width: 0; } .ville-sim__range { width: 100%; accent-color: var(--c-blue); margin-top: .5rem; height: 6px; } .ville-sim .ville-hero__select { width: 100%; max-width: none; height: 46px; -webkit-appearance: none; appearance: none; padding: 0 2.2rem 0 .85rem; border: 1.5px solid var(--c-line-strong); border-radius: var(--radius); background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000091' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 13px; color: var(--c-ink); font: inherit; cursor: pointer; } .ville-sim .ville-hero__select:focus { border-color: var(--c-blue); outline: none; } .ville-sim__result { margin-top: var(--sp-4); background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-4); text-align: center; } .ville-sim__result-label { display: block; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 700; color: var(--c-ink-soft); } .ville-sim__result-val { display: block; font-size: 1.9rem; font-weight: 800; color: var(--c-blue); margin: .2rem 0 .5rem; line-height: 1.1; } .ville-sim__gauge { display: block; height: 8px; max-width: 360px; margin: 0 auto .5rem; background: var(--c-blue-050); border: 1px solid var(--c-line); border-radius: 999px; overflow: hidden; } .ville-sim__gauge-fill { display: block; height: 100%; width: 20%; background: linear-gradient(90deg, var(--c-blue), var(--c-red)); border-radius: 999px; transition: width .15s ease; } .ville-sim__result-note { display: block; font-size: .82rem; color: var(--c-ink-soft); } .ville-sim__contexte { font-size: .88rem; color: var(--c-ink-soft); margin: var(--sp-3) 0 0; } /* Simulateur clim des pages villes (puissance kW + budget pose) */ .vclim-sim { margin-top: var(--sp-3); } .vclim-sim__champs { display: grid; gap: var(--sp-3) var(--sp-4); grid-template-columns: 1fr; align-items: end; } @media (min-width: 560px) { .vclim-sim__champs { grid-template-columns: 1fr 1fr; } .vclim-sim__champ--full { grid-column: 1 / -1; } } .vclim-sim__champ { min-width: 0; } .vclim-sim__range { width: 100%; accent-color: var(--c-blue); margin-top: .5rem; height: 6px; } .vclim-sim .ville-hero__select { width: 100%; max-width: none; height: 46px; -webkit-appearance: none; appearance: none; padding: 0 2.2rem 0 .85rem; border: 1.5px solid var(--c-line-strong); border-radius: var(--radius); background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000091' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 13px; color: var(--c-ink); font: inherit; cursor: pointer; } .vclim-sim .ville-hero__select:focus { border-color: var(--c-blue); outline: none; } .vclim-sim__result { margin-top: var(--sp-4); background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-4); text-align: center; } .vclim-sim__result-label { display: block; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 700; color: var(--c-ink-soft); } .vclim-sim__result-val { display: block; font-size: 1.7rem; font-weight: 800; color: var(--c-blue); margin: .2rem 0 .15rem; line-height: 1.1; } .vclim-sim__result-budget { display: block; font-size: 1rem; color: var(--c-ink); margin-bottom: .5rem; } .vclim-sim__result-budget strong { color: var(--c-red-800); } .vclim-sim__gauge { display: block; height: 8px; max-width: 360px; margin: 0 auto .5rem; background: var(--c-blue-050); border: 1px solid var(--c-line); border-radius: 999px; overflow: hidden; } .vclim-sim__gauge-fill { display: block; height: 100%; width: 20%; background: linear-gradient(90deg, var(--c-blue), var(--c-red)); border-radius: 999px; transition: width .15s ease; } .vclim-sim__result-note { display: block; font-size: .82rem; color: var(--c-ink-soft); } .vclim-sim__contexte { font-size: .88rem; color: var(--c-ink-soft); margin: var(--sp-3) 0 0; } .vclim-sim__promesse { font-size: .92rem; color: var(--c-ink); background: #fff; border: 1px dashed var(--c-line-strong); border-radius: var(--radius); padding: .7rem .9rem; margin: var(--sp-3) 0 0; } /* Simulateur PV des pages villes (panneaux solaires) : calque sur .vclim-sim. */ .vpv-sim { margin-top: var(--sp-3); } .vpv-sim__champs { display: grid; gap: var(--sp-3) var(--sp-4); grid-template-columns: 1fr; align-items: end; } .vpv-sim__champ { min-width: 0; } .vpv-sim__champ--full { grid-column: 1 / -1; } .vpv-sim__range { width: 100%; accent-color: var(--c-blue); margin-top: .5rem; height: 6px; } .vpv-sim__hint { font-weight: 400; color: var(--c-ink-soft); font-size: .85rem; } .vpv-sim__result { margin-top: var(--sp-4); background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-4); text-align: center; } .vpv-sim__result-label { display: block; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 700; color: var(--c-ink-soft); } .vpv-sim__result-val { display: block; font-size: 1.7rem; font-weight: 800; color: var(--c-blue); margin: .2rem 0 .15rem; line-height: 1.1; } .vpv-sim__result-eco { display: block; font-size: 1rem; color: var(--c-ink); margin-bottom: .5rem; } .vpv-sim__result-eco strong { color: #18a05a; } .vpv-sim__gauge { display: block; height: 8px; max-width: 360px; margin: 0 auto .5rem; background: var(--c-blue-050); border: 1px solid var(--c-line); border-radius: 999px; overflow: hidden; } .vpv-sim__gauge-fill { display: block; height: 100%; width: 20%; background: linear-gradient(90deg, var(--c-blue), #f5b301); border-radius: 999px; transition: width .15s ease; } .vpv-sim__result-budget { display: block; font-size: 1rem; color: var(--c-ink); margin-bottom: .2rem; } .vpv-sim__result-budget strong { color: var(--c-red-800); } .vpv-sim__result-note { display: block; font-size: .82rem; color: var(--c-ink-soft); } .vpv-sim__contexte { font-size: .88rem; color: var(--c-ink-soft); margin: var(--sp-3) 0 0; } .vpv-sim__promesse { font-size: .92rem; color: var(--c-ink); background: #fff; border: 1px dashed var(--c-line-strong); border-radius: var(--radius); padding: .7rem .9rem; margin: var(--sp-3) 0 0; } /* Calculateur de rentabilité PV (/panneaux-solaires/rentabilite/). */ .pv-renta-calc { margin: var(--sp-4) 0 var(--sp-5); padding: var(--sp-5); background: var(--c-blue-050); border: 1px solid var(--c-line); border-left: 5px solid var(--c-red); border-radius: var(--radius); } .pv-renta-calc__kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700; color: var(--c-red-800); margin: 0 0 .25rem; } .pv-renta-calc__titre { font-family: var(--font-serif); font-weight: 700; font-size: 1.25rem; color: var(--c-blue); margin: 0 0 var(--sp-4); } .pv-renta-calc__titre em { font-style: italic; } .pv-renta-calc__champs { display: grid; gap: var(--sp-3) var(--sp-4); grid-template-columns: 1fr; align-items: end; } @media (min-width: 620px) { .pv-renta-calc__champs { grid-template-columns: 1fr 1fr; } .pv-renta-calc__champ--full { grid-column: 1 / -1; } } .pv-renta-calc__champ { min-width: 0; } .pv-renta-calc__range { width: 100%; accent-color: var(--c-blue); margin-top: .5rem; height: 6px; } .pv-renta-calc__hint { font-weight: 400; color: var(--c-ink-soft); font-size: .85rem; } .pv-renta-calc .ville-hero__select { width: 100%; max-width: none; height: 46px; -webkit-appearance: none; appearance: none; padding: 0 2.2rem 0 .85rem; border: 1.5px solid var(--c-line-strong); border-radius: var(--radius); background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000091' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 13px; color: var(--c-ink); font: inherit; cursor: pointer; } .pv-renta-calc .ville-hero__select:focus { border-color: var(--c-blue); outline: none; } .pv-renta-calc__results { display: grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr; margin-top: var(--sp-4); } @media (min-width: 620px) { .pv-renta-calc__results { grid-template-columns: repeat(4, 1fr); } } .pv-renta-calc__card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-3); text-align: center; } .pv-renta-calc__card--hero { border: 1.5px solid var(--c-red); background: #fff7f7; } .pv-renta-calc__card-label { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: .68rem; font-weight: 700; color: var(--c-ink-soft); } .pv-renta-calc__card-val { display: block; font-size: 1.5rem; font-weight: 800; color: var(--c-blue); line-height: 1.15; margin-top: .15rem; } .pv-renta-calc__card--hero .pv-renta-calc__card-val { color: var(--c-red-800); } .pv-renta-calc__card-val small { font-size: .72rem; font-weight: 700; color: var(--c-ink-soft); } .pv-renta-calc__timeline { margin-top: var(--sp-4); } .pv-renta-calc__tl-track { position: relative; display: block; height: 12px; background: #eafaf1; border: 1px solid var(--c-line); border-radius: 999px; overflow: hidden; } .pv-renta-calc__tl-fill { position: absolute; left: 0; top: 0; height: 100%; width: 40%; background: linear-gradient(90deg, var(--c-blue), var(--c-red)); border-radius: 999px 0 0 999px; transition: width .15s ease; } .pv-renta-calc__tl-marker { position: absolute; top: -3px; width: 2px; height: 18px; background: var(--c-ink); left: 40%; transition: left .15s ease; } .pv-renta-calc__tl-legend { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: .74rem; color: var(--c-ink-soft); margin-top: .3rem; } .pv-renta-calc__note { font-size: .85rem; color: var(--c-ink); margin: var(--sp-3) 0 0; min-height: 1.2em; } .pv-renta-calc__cta { margin-top: var(--sp-4); } .pv-renta-calc__hypotheses { font-size: .76rem; color: var(--c-ink-soft); margin: var(--sp-3) 0 0; line-height: 1.4; } /* BD affichée ouverte (planche déroulée dans le contenu) */ .bd-open { margin: var(--sp-5) auto; max-width: 520px; text-align: center; } .bd-open img { width: 100%; height: auto; display: block; border: 1px solid var(--c-line); border-radius: var(--radius); } .bd-open__cap { margin-top: .55rem; font-size: .85rem; color: var(--c-ink-soft); } .bd-open__cap a { color: var(--c-blue); font-weight: 600; margin-left: .35rem; } /* Étapes "comment ça marche" (pilier panneaux solaires) */ .ps-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: 1fr; } @media (min-width: 640px) { .ps-steps { grid-template-columns: repeat(4, 1fr); } } .ps-step { display: flex; gap: .6rem; align-items: flex-start; background: #fff; border: 1px solid var(--c-line); border-top: 3px solid var(--c-blue); border-radius: var(--radius); padding: .75rem .8rem; } .ps-step__num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; background: var(--c-blue); color: #fff; font-weight: 700; font-size: .85rem; display: flex; align-items: center; justify-content: center; } .ps-step__txt { font-size: .9rem; line-height: 1.35; color: var(--c-ink); } .mpr-elig__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-2); } .mpr-elig .ville-hero__label { font-size: .9rem; } .mpr-elig .ville-hero__select { max-width: none; } .mpr-elig__resultat { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-3); } @media (max-width: 639px) { .mpr-elig__grid { grid-template-columns: 1fr; } } /* ---- Blog / Actualités ---- */ .blog-meta { font-size: .85rem; color: var(--c-ink-soft); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 var(--sp-2); } .blog-meta__cat { color: var(--c-red-800); font-weight: 700; text-decoration: none; } .blog-meta__cat:hover { text-decoration: underline; } .blog-cover { margin: 0 0 var(--sp-5); } .blog-cover img { width: 100%; height: auto; border-radius: var(--radius); display: block; } .blog-cover figcaption { font-size: .8rem; color: var(--c-ink-soft); margin-top: .4rem; text-align: center; } /* --- Article gold standard : bloc réponse, FAQ, infographie, sources --- */ .prose .tldr { background: var(--c-blue-050); border: 1px solid var(--c-blue-100); border-left: 4px solid var(--c-blue); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); margin: 0 0 var(--sp-6); } .prose .tldr p:last-child { margin-bottom: 0; } .prose .tldr strong { display: inline-flex; align-items: center; gap: .4rem; text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; color: var(--c-red-800); font-family: var(--font-sans); } .prose .infographie { margin: var(--sp-6) 0; border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-4); background: #fff; } .prose .infographie svg { width: 100%; height: auto; display: block; } .prose .infographie figcaption { font-size: .8rem; color: var(--c-ink-soft); margin-top: var(--sp-3); } .prose .page-video { margin: var(--sp-6) 0; } .prose .page-video__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--c-line); background: var(--c-blue-050); } .prose .page-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .prose .page-video figcaption { font-size: .8rem; color: var(--c-ink-soft); margin-top: var(--sp-3); } /* Calculateur de prix de DPE (page prix) */ .prose .dpecalc { background: var(--c-blue-050); border: 1px solid var(--c-blue-100); border-radius: var(--radius-lg); padding: var(--sp-5); margin: var(--sp-6) 0; } .dpecalc__titre { font-family: var(--font-serif); font-weight: 700; color: var(--c-blue); font-size: 1.2rem; margin: 0 0 var(--sp-4); } .dpecalc__champs { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; } @media (min-width: 680px) { .dpecalc__champs { grid-template-columns: 1fr 1fr 1fr; } } .dpecalc__champs label { display: flex; flex-direction: column; gap: .4rem; font-weight: 600; color: var(--c-blue); font-size: .9rem; } .dpecalc__champs select { padding: .55rem .6rem; border: 1.5px solid var(--c-line-strong); border-radius: var(--radius); background: #fff; color: var(--c-ink); font-family: inherit; font-size: .95rem; } .dpecalc__champs input[type="range"] { width: 100%; accent-color: var(--c-blue); } .dpecalc__result { margin-top: var(--sp-4); padding: var(--sp-4); background: #fff; border-radius: var(--radius); border: 1px solid var(--c-line); text-align: center; } .dpecalc__result-label { display: block; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 700; color: var(--c-ink-soft); } .dpecalc__result-val { display: block; font-size: 1.9rem; font-weight: 800; color: var(--c-blue); margin: .2rem 0; line-height: 1.1; } .dpecalc__result-note { display: block; font-size: .8rem; color: var(--c-ink-soft); } .dpecalc__cta { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); justify-content: space-between; } .dpecalc__cta p { margin: 0; font-weight: 600; color: var(--c-blue); } .dpecalc__cta a { display: inline-flex; align-items: center; background: var(--c-red); color: #fff; font-weight: 700; padding: .6rem 1.1rem; border-radius: var(--radius); text-decoration: none; } .dpecalc__cta a:hover { background: var(--c-red-800); } /* Simulateur de classe DPE (estimateur) */ .prose .dpesim { background: var(--c-blue-050); border: 1px solid var(--c-blue-100); border-radius: var(--radius-lg); padding: var(--sp-5); margin: var(--sp-6) 0; } .dpesim__titre { font-family: var(--font-serif); font-weight: 700; color: var(--c-blue); font-size: 1.25rem; margin: 0 0 var(--sp-2); } .dpesim__chapo { margin: 0 0 var(--sp-4); color: var(--c-ink); font-size: .95rem; } .dpesim__champs { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; } @media (min-width: 680px) { .dpesim__champs { grid-template-columns: 1fr 1fr; } } .dpesim__champs label { display: flex; flex-direction: column; gap: .4rem; font-weight: 600; color: var(--c-blue); font-size: .9rem; } .dpesim__champs select { padding: .55rem .6rem; border: 1.5px solid var(--c-line-strong); border-radius: var(--radius); background: #fff; color: var(--c-ink); font-family: inherit; font-size: .95rem; } .dpesim__result { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-5); padding: var(--sp-4); background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); } .dpesim__badge { flex-shrink: 0; width: 74px; height: 74px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: 800; color: #fff; } .dpesim__verdict { font-size: 1.15rem; font-weight: 800; color: var(--c-blue); margin: 0 0 .2rem; } .dpesim__sub { font-size: .9rem; color: var(--c-ink); margin: 0 0 .3rem; } .dpesim__note { font-size: .78rem; color: var(--c-ink-soft); margin: 0; } .dpesim__cta { margin-top: var(--sp-4); } .dpesim__cta a { display: inline-flex; align-items: center; background: var(--c-red); color: #fff; font-weight: 700; padding: .65rem 1.2rem; border-radius: var(--radius); text-decoration: none; } .dpesim__cta a:hover { background: var(--c-red-800); } /* Fil de lecture des articles (barre mobile + rail mascotte desktop) */ .lecture-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; pointer-events: none; } .lecture-bar__fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--c-blue), var(--c-red)); } .lecture-fil { display: none; } .lecture-fil__head { display: flex; flex-direction: column; gap: .1rem; margin-bottom: var(--sp-3); } .lecture-fil__label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--c-ink-soft); } .lecture-fil__reste { font-size: 1rem; font-weight: 800; color: var(--c-blue); } .lecture-fil__body { position: relative; padding-left: 30px; } .lecture-fil__rail { position: absolute; left: 7px; top: 5px; bottom: 5px; width: 3px; background: var(--c-line); border-radius: 3px; } .lecture-fil__fill { position: absolute; left: 7px; top: 5px; width: 3px; height: 0; background: linear-gradient(var(--c-blue), var(--c-red)); border-radius: 3px; } .lecture-fil__owl-marker { position: absolute; left: -9px; top: 0; width: 36px; height: 40px; transform: translateY(-50%); transition: top .12s linear; filter: drop-shadow(0 2px 4px rgba(0, 0, 40, .18)); } .lecture-fil__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; } .lecture-fil__item a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .82rem; line-height: 1.3; color: var(--c-ink-soft); text-decoration: none; transition: color .15s ease; } .lecture-fil__item a:hover { color: var(--c-blue); } .lecture-fil__item.is-done a { color: var(--c-ink); } .lecture-fil__item.is-active a { color: var(--c-blue); font-weight: 700; } @media (min-width: 1240px) { .lecture-bar { display: none; } .lecture-fil { display: block; position: fixed; top: 50%; left: calc(50% - 608px); width: 210px; padding: 8px 4px 18px 16px; transform: translateY(-50%); max-height: 82vh; overflow-y: auto; z-index: 80; transition: opacity .2s ease, visibility .2s ease; } .lecture-fil.is-off { opacity: 0; visibility: hidden; pointer-events: none; } } /* Appels à l'action tissés dans les articles (conversion) */ .prose .cta-inline { display: flex; align-items: center; gap: var(--sp-4); background: var(--c-blue-050); border: 1px solid var(--c-blue-100); border-left: 5px solid var(--c-red); border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5); margin: var(--sp-6) 0; } .prose .cta-inline__owl { width: 88px; height: auto; flex-shrink: 0; } .prose .cta-inline__body { flex: 1; min-width: 0; } .prose .cta-inline__t { font-family: var(--font-serif); font-weight: 700; font-size: 1.18rem; color: var(--c-blue); margin: 0 0 .25rem; } .prose .cta-inline__d { color: var(--c-ink); font-size: .98rem; line-height: 1.5; margin: 0 0 var(--sp-3); } .prose .cta-inline__btn { display: inline-flex; align-items: center; background: var(--c-red); color: #fff; font-weight: 700; padding: .65rem 1.3rem; border-radius: var(--radius); text-decoration: none; transition: background .15s ease; } .prose .cta-inline__btn:hover { background: var(--c-red-800); } .prose .cta-inline__rea { color: var(--c-ink-soft); font-size: .8rem; margin: .55rem 0 0; } @media (max-width: 600px) { .prose .cta-inline { flex-direction: column; align-items: flex-start; } .prose .cta-inline__owl { width: 64px; } } .prose .cta-soft { background: #fff; border: 1px solid var(--c-line); border-left: 4px solid var(--c-red); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin: var(--sp-5) 0; font-size: 1rem; } .prose .cta-soft a { font-weight: 700; } .prose .faq { margin: var(--sp-5) 0; } .prose details.faq-item { border: 1px solid var(--c-line); border-radius: var(--radius); margin-bottom: var(--sp-3); background: #fff; } .prose details.faq-item[open] { border-color: var(--c-blue-100); } .prose details.faq-item > summary { cursor: pointer; list-style: none; padding: var(--sp-4); font-weight: 600; color: var(--c-blue); font-family: var(--font-serif); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); } .prose details.faq-item > summary::-webkit-details-marker { display: none; } .prose details.faq-item > summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--c-ink-soft); flex-shrink: 0; } .prose details.faq-item[open] > summary::after { content: "–"; } .prose details.faq-item > p { padding: 0 var(--sp-4) var(--sp-4); margin: 0; } .prose .sources { font-size: .88rem; color: var(--c-ink-soft); border-top: 1px solid var(--c-line); margin-top: var(--sp-6); padding-top: var(--sp-4); } .prose .sources li { margin-bottom: .3rem; } /* --- Simulateur « Mon plan rénovation » (namespace .simr, distinct de l'ancien simulateur .simu) --- */ .simr { background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-5); margin: var(--sp-5) 0 var(--sp-6); } .simr-disclaimer { font-size: .82rem; color: var(--c-ink-soft); margin: var(--sp-3) 0 0; } .simr__progress { display: flex; flex-wrap: wrap; gap: var(--sp-3); list-style: none; margin: 0 0 var(--sp-5); padding: 0; } .simr__progress li { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--c-ink-soft); font-weight: 600; } .simr__progress li span { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 1px solid var(--c-line-strong); font-size: .78rem; flex-shrink: 0; } .simr__progress li.is-active { color: var(--c-blue); } .simr__progress li.is-active span { background: var(--c-blue); color: #fff; border-color: var(--c-blue); } .simr__etape { display: none; border: 0; padding: 0; margin: 0; } .simr__etape.is-visible { display: block; } .simr__legend { font-family: var(--font-serif); font-weight: 800; font-size: 1.25rem; color: var(--c-blue); margin: 0 0 var(--sp-4); padding: 0; } .simr__champ { margin-bottom: var(--sp-4); } .simr__label { display: block; font-weight: 600; color: var(--c-ink); margin-bottom: var(--sp-2); font-size: .95rem; } .simr__aide { font-size: .85rem; color: var(--c-ink-soft); margin: 0 0 var(--sp-3); } .simr__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); } .simr__choix-grille { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-2); } .simr__choix-grille--compact { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } .simr__choix-grille--multi { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .simr__choix { position: relative; display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem; background: #fff; border: 1.5px solid var(--c-line-strong); border-radius: var(--radius); cursor: pointer; font-size: .92rem; transition: border-color .15s, background-color .15s; } .simr__choix:hover { border-color: var(--c-blue); } .simr__choix input { accent-color: var(--c-blue); flex-shrink: 0; } .simr__choix:has(input:checked) { border-color: var(--c-blue); background: var(--c-blue-050); font-weight: 600; } .simr input[type="number"], .simr select { width: 100%; padding: .75rem .9rem; border: 1.5px solid var(--c-line-strong); border-radius: var(--radius); font-family: inherit; font-size: 1rem; background: #fff; } .simr input[type="number"]:focus, .simr select:focus { border-color: var(--c-blue); outline: none; } .simr__actions { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); } .simr-resultat { margin: var(--sp-5) 0 var(--sp-6); } .simr-resultat__titre { font-family: var(--font-serif); color: var(--c-blue); } .simr-resultat__vide, .simr-resultat__note { background: var(--c-blue-050); border-left: 4px solid var(--c-blue); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); } .simr-badge { display: inline-block; padding: .5rem 1rem; border-radius: var(--radius); font-size: .92rem; border: 1px solid var(--c-line); } .simr-badge--bleu { background: #e7f0ff; border-color: #b9d4ff; } .simr-badge--jaune { background: #fff6da; border-color: #f0dca0; } .simr-badge--violet { background: #efe7fb; border-color: #d2bdf0; } .simr-badge--rose { background: #fde7ef; border-color: #f2bcd2; } .simr-table-wrap { overflow-x: auto; margin: var(--sp-4) 0; } .simr-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 540px; } .simr-table th, .simr-table td { padding: .7rem .8rem; text-align: left; border-bottom: 1px solid var(--c-line); } .simr-table thead th { background: var(--c-blue); color: #fff; font-weight: 600; } .simr-table tfoot td { background: var(--c-bg-soft); font-weight: 600; border-top: 2px solid var(--c-line-strong); } .simr-na { color: var(--c-ink-soft); } .simr-synthese { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin: var(--sp-4) 0; } .simr-synthese__box { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-4); text-align: center; } .simr-synthese__box span { display: block; font-size: .82rem; color: var(--c-ink-soft); margin-bottom: .3rem; } .simr-synthese__box strong { font-size: 1.05rem; color: var(--c-ink); } .simr-synthese__box--aide { background: #eafaf1; border-color: #b6e6c9; } .simr-synthese__box--aide strong { color: #0f7a42; } .simr-synthese__box--reste { background: var(--c-blue-050); border-color: var(--c-blue-100); } .simr-synthese__box--reste strong { color: var(--c-blue); } .simr-resultat__plus { font-size: .9rem; color: var(--c-ink-soft); } .simr-notes { list-style: none; padding: 0; margin: var(--sp-4) 0; display: grid; gap: var(--sp-2); } .simr-notes li { background: var(--c-blue-050); border-left: 3px solid var(--c-blue); padding: .7rem 1rem; border-radius: var(--radius); font-size: .9rem; } .simr-cta { background: var(--c-blue); color: #fff; border-radius: var(--radius-lg); padding: var(--sp-5); margin: var(--sp-5) 0 var(--sp-4); text-align: center; } .simr-cta__txt { margin: 0 0 var(--sp-4); } .simr-cta strong { color: #fff; } .simr-cta .btn { background: var(--c-blue-800); color: #fff; border-color: rgba(255, 255, 255, .4); } .simr-cta .btn:hover { background: #fff; color: var(--c-blue); border-color: #fff; } /* Bloc CTA dans une colonne du méga-menu (ex. simulateur sous « Comprendre ») */ .mega__cta { display: flex; gap: var(--sp-3); align-items: flex-start; margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--c-blue-050); border: 1px solid var(--c-blue-100); border-radius: var(--radius-lg); text-decoration: none; transition: background-color .15s, border-color .15s; } .mega__cta:hover { background: var(--c-blue-100); border-color: var(--c-blue); } .mega__cta-ic { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-blue); color: #fff; } .mega__cta-ic svg { width: 22px; height: 22px; } .mega__cta-body { display: flex; flex-direction: column; gap: .1rem; } .mega__cta-t { font-weight: 700; color: var(--c-blue); font-size: .98rem; } .mega__cta-d { font-size: .82rem; color: var(--c-ink-soft); line-height: 1.3; } .mega__cta-go { font-size: .82rem; font-weight: 600; color: var(--c-red-800); margin-top: .25rem; } @media (max-width: 640px) { .simr__choix-grille { grid-template-columns: 1fr 1fr; } .simr-synthese { grid-template-columns: 1fr; } .simr__ligne { grid-template-columns: 1fr; } } .blog-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-6) 0; padding: var(--sp-4) var(--sp-5); background: var(--c-blue-050); border: 1px solid var(--c-line); border-left: 5px solid var(--c-red); border-radius: var(--radius); } .blog-cta__txt { margin: 0; max-width: 48ch; } .blog-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: 1fr; } @media (min-width: 700px) { .blog-cards--wide { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .blog-cards--wide { grid-template-columns: repeat(3, 1fr); } } .blog-card { margin: 0; } .blog-card__link { display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: var(--sp-4); background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); text-decoration: none; transition: border-color .15s ease, transform .15s ease; } .blog-card__link:hover { border-color: var(--c-blue); transform: translateY(-2px); } .blog-card__cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--c-red-800); } .blog-card__titre { font-family: var(--font-serif); font-weight: 700; color: var(--c-blue); font-size: 1.05rem; line-height: 1.3; } .blog-card__exc { font-size: .9rem; color: var(--c-ink-soft); } .blog-card__date { margin-top: auto; font-size: .8rem; color: var(--c-ink-soft); } .blog-lies { margin-top: var(--sp-7); } .blog-lies__titre, .blog-section-titre { font-family: var(--font-serif); color: var(--c-blue); font-size: 1.3rem; margin: 0 0 var(--sp-4); } .blog-cats { list-style: none; margin: 0 0 var(--sp-7); padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr); } @media (min-width: 760px) { .blog-cats { grid-template-columns: repeat(4, 1fr); } } .blog-cat { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding: var(--sp-4); background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); text-decoration: none; transition: border-color .15s ease, transform .15s ease; } .blog-cat:hover { border-color: var(--c-blue); transform: translateY(-2px); } .blog-cat__ic { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--c-blue); background: var(--c-blue-050); border-radius: 10px; } .blog-cat__ic svg { width: 24px; height: 24px; } .blog-cat__t { font-family: var(--font-serif); font-weight: 700; color: var(--c-blue); } .blog-cat__n { font-size: .8rem; color: var(--c-ink-soft); } /* ---- Mascotte : encart conseil qui aère le contenu ---- */ .ce-masc { display: flex; align-items: center; gap: var(--sp-4); justify-content: center; margin: var(--sp-6) auto; padding: var(--sp-3) var(--sp-5); max-width: 580px; background: var(--c-blue-050); border: 1px solid var(--c-line); border-radius: var(--radius); } .ce-masc img { width: 96px; height: auto; flex-shrink: 0; } .ce-masc figcaption { font-family: var(--font-serif); font-weight: 700; color: var(--c-blue); font-size: 1.08rem; line-height: 1.4; } .ce-masc--alt { flex-direction: row-reverse; } @media (max-width: 559px) { .ce-masc, .ce-masc--alt { flex-direction: column; text-align: center; gap: var(--sp-2); } .ce-masc img { width: 84px; } } /* ---- Encart BD (telechargement PDF) ---- */ .bd-band { margin: var(--sp-5) auto; max-width: 760px; padding: var(--sp-4) var(--sp-5); background: var(--c-blue-050); border: 1px solid var(--c-line); border-left: 5px solid var(--c-red); border-radius: var(--radius); } .bd-encart { display: flex; gap: var(--sp-5); align-items: center; } .bd-encart__visuel { flex: 0 0 auto; line-height: 0; } .bd-encart__visuel img { width: 150px; height: auto; border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: 0 10px 24px rgba(0,0,40,.12); transition: transform .15s ease; } .bd-encart__visuel:hover img { transform: translateY(-3px); } .bd-encart__corps { flex: 1 1 auto; min-width: 0; } .bd-encart__kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700; color: var(--c-red-800); margin: 0 0 .25rem; } .bd-encart__titre { font-family: var(--font-serif); font-weight: 700; font-size: 1.25rem; color: var(--c-blue); margin: 0 0 .4rem; } .bd-encart__txt { color: var(--c-ink-soft); margin: 0 0 var(--sp-3); max-width: 46ch; } .bd-encart__btn { display: inline-flex; } @media (max-width: 639px) { .bd-encart { flex-direction: column; text-align: center; gap: var(--sp-3); } .bd-encart__txt { margin-left: auto; margin-right: auto; } } /* ---- Modale generique (devis depuis la carte des zones) ---- */ body.ce-modal-open { overflow: hidden; } .ce-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: flex-start; justify-content: center; padding: var(--sp-4); overflow-y: auto; } .ce-modal:not([hidden]) { display: flex; } .ce-modal__backdrop { position: fixed; inset: 0; background: rgba(0, 0, 40, .55); } .ce-modal__dialog { position: relative; z-index: 1; background: #fff; border-radius: var(--radius); max-width: 680px; width: 100%; margin: 0 auto; box-shadow: 0 24px 60px rgba(0, 0, 40, .35); } .ce-modal__close { position: absolute; top: .4rem; right: .4rem; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: 0; background: none; font-size: 1.9rem; line-height: 1; color: var(--c-ink-soft); cursor: pointer; border-radius: var(--radius); } .ce-modal__close:hover { background: var(--c-blue-050); color: var(--c-blue); } .ce-modal__body { padding: var(--sp-5); } .ce-modal__titre { font-family: var(--font-serif); font-weight: 700; font-size: 1.3rem; color: var(--c-blue); margin: 0 2.5rem .25rem 0; } .ce-modal__intro { color: var(--c-ink-soft); margin: 0 0 var(--sp-3); font-size: .95rem; } .ce-modal .devis { margin: 0; } .carte-fr__erreur { color: var(--c-ink-soft); } /* ========================================================= 19. Etapes numerotees (pose, methode) ========================================================= */ .etapes-pose { counter-reset: pose; list-style: none; padding-left: 0; margin: var(--sp-4) 0; } .etapes-pose li { position: relative; padding-left: 2.8rem; margin-bottom: var(--sp-3); min-height: 1.9rem; } .etapes-pose li::before { counter-increment: pose; content: counter(pose); position: absolute; left: 0; top: 0; width: 1.9rem; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center; background: var(--c-blue); color: #fff; border-radius: 50%; font-family: var(--font-serif); font-weight: 700; font-size: .95rem; } .lien-retour { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--c-line); color: var(--c-ink-soft); font-size: .95rem; } .prose-table { overflow-x: auto; margin: var(--sp-5) 0; } .prose-table table { width: 100%; border-collapse: collapse; font-size: .95rem; } .prose-table th, .prose-table td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--c-line); } .prose-table thead th { background: var(--c-blue-050); color: var(--c-blue); font-weight: 700; border-bottom: 2px solid var(--c-blue); } .prose-table tbody tr:hover { background: var(--c-bg-soft); } .prose-table a { text-decoration: none; font-weight: 600; } /* Tableaux posés directement dans le contenu (.prose table) : même style, responsive. */ .prose table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; font-size: .95rem; margin: var(--sp-5) 0; } .prose table th, .prose table td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--c-line); vertical-align: top; } .prose table thead th { background: var(--c-blue-050); color: var(--c-blue); font-weight: 700; border-bottom: 2px solid var(--c-blue); white-space: nowrap; } .prose table tbody tr:hover { background: var(--c-blue-050); } .prose table tbody tr:last-child td { border-bottom: 0; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* Auteurs éditoriaux (byline, encadré fin d'article, page auteur). */ .blog-meta__auteur a { color: var(--c-blue); font-weight: 600; text-decoration: none; } .blog-meta__auteur a:hover { text-decoration: underline; } .auteur-avatar { flex: 0 0 auto; border-radius: 50%; } .auteur-avatar--photo { object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--c-line); } .auteur-box { display: flex; gap: var(--sp-4); align-items: flex-start; background: var(--c-bg-soft); border: 1px solid var(--c-line); border-left: 4px solid var(--c-blue); border-radius: var(--radius); padding: var(--sp-4); margin: var(--sp-5) 0; } .auteur-box__nom { margin: 0 0 .2rem; font-weight: 700; font-size: 1.02rem; } .auteur-box__nom a { color: var(--c-blue); text-decoration: none; } .auteur-box__nom a:hover { text-decoration: underline; } .auteur-box__spec { display: block; font-weight: 400; font-size: .8rem; color: var(--c-ink-soft); text-transform: uppercase; letter-spacing: .05em; } .auteur-box__bio { margin: .35rem 0; font-size: .92rem; color: var(--c-ink); } .auteur-box__lien { font-size: .88rem; font-weight: 600; color: var(--c-blue); } .auteur-hero { display: flex; gap: var(--sp-4); align-items: flex-start; background: var(--c-blue-050); border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-5); margin: var(--sp-4) 0 var(--sp-5); } .auteur-hero__nom { margin: 0; font-size: 1.6rem; } .auteur-hero__spec { margin: .2rem 0 .6rem; color: var(--c-ink-soft); font-weight: 600; font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; } .auteur-hero__bio { margin: 0 0 .5rem; max-width: 620px; } .auteur-hero__lien { margin: 0; font-size: .92rem; } /* Footer : bandeau « La rédaction » (crédibilité éditoriale). */ .site-footer__redaction { display: flex; gap: var(--sp-4); align-items: baseline; flex-wrap: wrap; padding-top: var(--sp-4); margin-top: var(--sp-3); border-top: 1px solid var(--c-line); } .site-footer__redaction-liste { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); margin: 0; padding: 0; } .site-footer__auteur { display: grid; grid-template-columns: 32px auto; column-gap: .55rem; align-items: center; text-decoration: none; } .site-footer__auteur .auteur-avatar { grid-row: 1 / 3; width: 32px; height: 32px; } .site-footer__auteur-nom { grid-column: 2; font-size: .85rem; font-weight: 600; color: var(--c-blue); line-height: 1.25; white-space: nowrap; } .site-footer__auteur-spec { grid-column: 2; font-size: .72rem; color: var(--c-ink-soft); line-height: 1.25; white-space: nowrap; } .site-footer__auteur:hover .site-footer__auteur-nom { text-decoration: underline; } /* Schémas illustrés in-text (mascotte incluse). */ .schema-illustre svg { width: 100%; height: auto; display: block; } .couverture__consigne { font-weight: 600; color: var(--c-blue); margin: var(--sp-4) 0 var(--sp-2); font-size: .95rem; } .carte-fr--mini { display: block; margin: 0; max-width: 460px; } .carte-fr--mini .carte-fr__map { max-width: 420px; } .carte-fr--mini .carte-fr__panel { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); font-size: .92rem; } .carte-fr--mini .carte-fr__panel h3 { font-size: 1.05rem; margin-top: 0; } /* Suivi de demande (/suivi/) : saisie du numéro + frise des statuts. */ .suivi { max-width: 640px; } .suivi__form { background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-5); margin-bottom: var(--sp-5); } .suivi__label { display: block; font-weight: 700; margin-bottom: var(--sp-2); } .suivi__champ { display: flex; gap: var(--sp-3); flex-wrap: wrap; } .suivi__input { flex: 1 1 240px; padding: .7rem .9rem; border: 1px solid var(--c-line-strong); border-radius: var(--radius); font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; font-family: var(--font-sans); } .suivi__input:focus { outline: 2px solid var(--c-blue); outline-offset: 1px; } .suivi__erreur { color: var(--c-red); font-weight: 600; margin: var(--sp-3) 0 0; font-size: .95rem; } .suivi__carte { background: var(--c-bg); border: 1px solid var(--c-line); border-top: 3px solid var(--c-blue); border-radius: var(--radius-lg); padding: var(--sp-5); margin-bottom: var(--sp-5); } .suivi__salut { margin: 0 0 var(--sp-3); } .suivi__recap { border-bottom: 1px solid var(--c-line); padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); } .suivi__numero { margin: 0; font-size: 1.35rem; font-weight: 800; color: var(--c-blue); letter-spacing: .06em; } .suivi__meta { margin: .2rem 0 0; color: var(--c-ink-soft); font-size: .95rem; } .suivi__frise { list-style: none; margin: 0; padding: 0; } .suivi__etape { position: relative; padding: 0 0 var(--sp-5) 2rem; } .suivi__etape:last-child { padding-bottom: 0; } .suivi__etape::before { content: ""; position: absolute; left: .55rem; top: 1.15rem; bottom: -.15rem; width: 2px; background: var(--c-line); } .suivi__etape:last-child::before { display: none; } .suivi__etape.est-atteint::before { background: var(--c-blue); } .suivi__puce { position: absolute; left: 0; top: .25rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 2px solid var(--c-line-strong); background: var(--c-bg); } .suivi__etape.est-atteint .suivi__puce { border-color: var(--c-blue); background: var(--c-blue); } .suivi__etape.est-courant .suivi__puce { box-shadow: 0 0 0 4px var(--c-blue-100); } .suivi__etape-label { margin: 0; font-weight: 700; color: var(--c-ink-soft); } .suivi__etape.est-atteint .suivi__etape-label { color: var(--c-ink); } .suivi__etape-date { font-weight: 400; font-size: .85rem; color: var(--c-ink-soft); margin-left: .4rem; white-space: nowrap; } .suivi__etape-desc { margin: .3rem 0 0; font-size: .95rem; color: var(--c-ink); background: var(--c-blue-050); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); } .suivi__aide h2 { font-size: 1.25rem; } /* Icône « mon compte » (suivi de demande) dans le header. */ .site-compte-lien { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0; color: var(--c-blue); border-radius: var(--radius); } .site-compte-lien:hover { color: var(--c-red-800); } .nav-principale__liste > .nav-item > .nav-link { white-space: nowrap; } /* Espace pro (/pro/) : formulaire de candidature partenaire. */ .pro { max-width: 720px; } .pro__form { background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-5); margin-bottom: var(--sp-6); } .pro__section { font-size: 1.15rem; color: var(--c-blue); margin: var(--sp-5) 0 var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 2px solid var(--c-blue-100); } .pro__form .pro__section:first-of-type { margin-top: 0; } .pro__input { width: 100%; padding: .65rem .8rem; border: 1px solid var(--c-line-strong); border-radius: var(--radius); font-size: 1rem; font-family: var(--font-sans); background: #fff; } .pro__input:focus { outline: 2px solid var(--c-blue); outline-offset: 1px; } .pro__fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-4); } .pro__verticales { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-2) var(--sp-3); } .pro__check { display: flex; align-items: center; gap: .45rem; font-size: .97rem; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: .5rem .7rem; cursor: pointer; } .pro__check:has(input:checked) { border-color: var(--c-blue); background: var(--c-blue-050); } .pro__hint { font-weight: 400; color: var(--c-ink-soft); font-size: .85rem; } .pro__actions { margin: var(--sp-5) 0 0; } .pro__ok { margin: var(--sp-4) 0 0; font-weight: 700; color: var(--c-green); } .pro .est-invalide .pro__input, .pro .est-invalide .pro__check { border-color: var(--c-red); } .pro .est-invalide .devis__label, .pro .est-invalide legend { color: var(--c-red); } .pro__aide h2 { font-size: 1.25rem; } /* Phrase de confirmation avec coche verte (merci devis + candidature pro). */ .confirm-mail { display: block; position: relative; font-weight: 600; color: var(--c-ink); background: #f0faf4; border: 1px solid #bfe6cf; border-radius: var(--radius); padding: var(--sp-3) var(--sp-4) var(--sp-3) 2.3rem; margin: var(--sp-4) 0; } .confirm-mail::before { content: "✓"; position: absolute; left: var(--sp-4); top: var(--sp-3); color: var(--c-green); font-weight: 800; } /* --- Carte sécheresse (/alerte-secheresse/) --- */ .sech__maj { color: var(--c-ink-soft); font-size: .92rem; margin: var(--sp-2) 0 0; } .sech__partage { max-width: 860px; } .sech { margin: var(--sp-5) 0 var(--sp-6); } .sech__legende { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-4); padding: 0; font-size: .92rem; } .sech__leg { display: inline-flex; align-items: center; gap: .45rem; } .sech__leg strong { background: var(--c-bg-soft); border-radius: 10px; padding: 0 .5rem; font-size: .85rem; } .sech__pastille { width: .95rem; height: .95rem; border-radius: 3px; display: inline-block; flex-shrink: 0; border: 1px solid rgba(0,0,0,.12); } .sech__leg--aucun .sech__pastille, .sech__carte-niveau--aucun .sech__pastille { background: #dcefe3; } .sech__leg--vigilance .sech__pastille, .sech__carte-niveau--vigilance .sech__pastille { background: #d9deea; } .sech__leg--alerte .sech__pastille, .sech__carte-niveau--alerte .sech__pastille { background: #ffd166; } .sech__leg--alerte_renforcee .sech__pastille, .sech__carte-niveau--alerte_renforcee .sech__pastille { background: #f4874b; } .sech__leg--crise .sech__pastille, .sech__carte-niveau--crise .sech__pastille { background: #e1000f; } .sech__grille { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); } @media (min-width: 860px) { .sech__grille { grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr); align-items: start; } } .sech__map svg { width: 100%; height: auto; display: block; } .sech__map path { fill: #e9ecf5; stroke: #fff; stroke-width: .8; cursor: pointer; transition: opacity .12s; } .sech__map path:hover, .sech__map path:focus-visible { opacity: .78; outline: none; } .sech__map path.is-active { stroke: var(--c-ink); stroke-width: 1.4; } .sech__map path.sech--aucun { fill: #dcefe3; } .sech__map path.sech--vigilance { fill: #d9deea; } .sech__map path.sech--alerte { fill: #ffd166; } .sech__map path.sech--alerte_renforcee { fill: #f4874b; } .sech__map path.sech--crise { fill: #e1000f; } .sech__panel { background: var(--c-bg-soft); border: 1px solid var(--c-line); border-top: 3px solid var(--c-blue); border-radius: var(--radius-lg); padding: var(--sp-5); } .sech__hint { color: var(--c-ink-soft); margin: 0; } .sech__dept { font-size: 1.2rem; font-weight: 800; color: var(--c-blue); margin: 0 0 var(--sp-2); } .sech__code { font-weight: 400; color: var(--c-ink-soft); font-size: .95rem; } .sech__badge { display: inline-block; font-weight: 700; border-radius: 20px; padding: .3rem .85rem; margin: 0 0 var(--sp-3); font-size: .95rem; } .sech__badge--aucun { background: #dcefe3; color: #14522f; } .sech__badge--vigilance { background: #d9deea; color: #3a3a5c; } .sech__badge--alerte { background: #ffd166; color: #5c4300; } .sech__badge--alerte_renforcee { background: #f4874b; color: #fff; } .sech__badge--crise { background: #e1000f; color: #fff; } .sech__desc { margin: 0 0 var(--sp-3); } .sech__note { font-size: .88rem; color: var(--c-ink-soft); margin: 0 0 var(--sp-3); } .sech__lien { margin: 0; font-weight: 600; } .sech__drom-ligne { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; } .sech__drom-label { font-weight: 700; color: var(--c-ink-soft); font-size: .92rem; } .sech__drom { border: 1px solid rgba(0,0,0,.15); border-radius: 20px; padding: .3rem .8rem; font-size: .88rem; cursor: pointer; font-family: var(--font-sans); } .sech__drom--aucun { background: #dcefe3; } .sech__drom--vigilance { background: #d9deea; } .sech__drom--alerte { background: #ffd166; } .sech__drom--alerte_renforcee { background: #f4874b; color: #fff; } .sech__drom--crise { background: #e1000f; color: #fff; } .sech__note-carte { margin-top: var(--sp-4); font-size: .92rem; color: var(--c-ink-soft); } .sech__niveaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); margin: var(--sp-4) 0 var(--sp-6); } .sech__carte-niveau { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-4); } .sech__carte-niveau--crise { border-top: 3px solid #e1000f; } .sech__carte-niveau--alerte_renforcee { border-top: 3px solid #f4874b; } .sech__carte-niveau--alerte { border-top: 3px solid #ffd166; } .sech__carte-niveau--vigilance { border-top: 3px solid #d9deea; } .sech__carte-titre { display: flex; align-items: center; gap: .5rem; font-weight: 800; margin: 0 0 var(--sp-2); color: var(--c-ink); } .sech__carte-desc { margin: 0; font-size: .95rem; color: var(--c-ink); } .sech__reflexes { background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-6); margin: 0 0 var(--sp-6); } .sech__reflexes-entete { display: flex; gap: var(--sp-4); align-items: center; margin-bottom: var(--sp-4); } .sech__bulle { position: relative; background: #fff; border: 2px solid var(--c-blue); border-radius: 14px; padding: var(--sp-3) var(--sp-4); font-weight: 600; color: var(--c-blue); max-width: 560px; } .sech__bulle::before { content: ""; position: absolute; left: -11px; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-right-color: var(--c-blue); } .sech__reflexes-titre { margin: 0 0 var(--sp-4); } .sech__reflexes-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); } .sech__reflexe { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-4); } .sech__reflexe-ic { color: var(--c-blue); display: inline-flex; margin-bottom: var(--sp-2); } .sech__reflexe-t { font-weight: 700; margin: 0 0 var(--sp-1); } .sech__reflexe-d { margin: 0; font-size: .92rem; color: var(--c-ink-soft); } /* Rubrique Actualités sous le bloc mis en avant du mega menu. */ .mega__actus { margin-top: var(--sp-3); } .mega__actus-titre { display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-soft); margin: 0 0 var(--sp-2); text-decoration: none; } .mega__actus-titre:hover { color: var(--c-blue); } .mega__actus .mega__link-t::before { content: "●"; color: var(--c-red); font-size: .6rem; vertical-align: 2px; margin-right: .4rem; } @media (min-width: 860px) { .mega__aside { flex: 0 0 250px; align-self: stretch; } .mega__aside .mega__featured { margin-top: 0; } } .bd-sech { margin: 0 0 var(--sp-6); } .bd-sech svg { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); box-shadow: 0 2px 14px rgba(27, 27, 47, .08); } .bd-sech .infographie__legende { font-size: .88rem; color: var(--c-ink-soft); margin-top: var(--sp-2); } /* --- Prochaine canicule (/prochaine-canicule/) --- */ .cani { margin: 0 0 var(--sp-6); } .cani h2 { font-size: 1.5rem; } .cani-verdict { border-radius: var(--radius-lg); border: 1px solid var(--c-line); padding: var(--sp-4) var(--sp-5); margin: var(--sp-4) 0; background: var(--c-bg-soft); } .cani-verdict.est-oui { background: #fdeeef; border-color: #f3b2b7; } .cani-verdict.est-mitige { background: #fff7e0; border-color: #ecd28a; } .cani-verdict.est-non { background: #eef8f1; border-color: #bfe6cf; } .cani-verdict__t { margin: 0 0 var(--sp-2); font-size: 1.15rem; font-weight: 800; } .cani-verdict__t--oui { color: var(--c-red-800); } .cani-verdict__t--mitige { color: #8a6400; } .cani-verdict__t--non { color: #14522f; } .cani-verdict__d { margin: 0; } .cani-villes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); margin: var(--sp-4) 0; } .cani-ville { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); } .cani-ville__tete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); } .cani-ville__nom { font-weight: 800; color: var(--c-blue); } .cani-badge { font-size: .78rem; font-weight: 700; border-radius: 12px; padding: .15rem .6rem; white-space: nowrap; } .cani-badge--oui { background: #e1000f; color: #fff; } .cani-badge--mitige { background: #ffd166; color: #5c4300; } .cani-badge--non { background: #eef8f1; color: #14522f; } .cani-strip { display: flex; gap: 3px; } .cani-strip__c { flex: 1; height: 22px; border-radius: 3px; } .cani-t1 { background: #dfe3f0; } .cani-t2 { background: #ffe999; } .cani-t3 { background: #ffd166; } .cani-t4 { background: #f4874b; } .cani-t5 { background: #e1000f; } .cani-ville__pic { margin: var(--sp-2) 0 0; font-size: .88rem; color: var(--c-ink-soft); } .cani-methodo { font-size: .92rem; color: var(--c-ink-soft); background: var(--c-bg-soft); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); } .cani-quiz { background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-6); margin: var(--sp-6) 0; } .cani-quiz__q { margin-bottom: var(--sp-4); } .cani-quiz__label { font-weight: 700; margin: 0 0 var(--sp-2); } .cani-quiz__choix { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .cani-quiz__btn { background: #fff; border: 1.5px solid var(--c-line-strong); border-radius: var(--radius); padding: .6rem .9rem; font-family: var(--font-sans); font-size: .95rem; cursor: pointer; text-align: left; } .cani-quiz__btn:hover { border-color: var(--c-blue); } .cani-quiz__btn.est-choisi { border-color: var(--c-blue); background: var(--c-blue-050); color: var(--c-blue); font-weight: 700; } .cani-quiz__resultat { background: #fff; border: 1px solid var(--c-line); border-top: 3px solid var(--c-blue); border-radius: var(--radius-lg); padding: var(--sp-5); margin-top: var(--sp-4); } .cani-quiz__reco-titre { margin: 0 0 var(--sp-2); font-size: 1.1rem; } .cani-quiz__reco-texte { margin: 0 0 var(--sp-4); } .cani-quiz__reco-actions { margin: 0 0 var(--sp-3); display: flex; gap: var(--sp-3); flex-wrap: wrap; } .cani-quiz__reco-liens { margin: 0; font-size: .9rem; color: var(--c-ink-soft); } .table-scroll { overflow-x: auto; } /* Rubrique Alertes & vigilance : cartes (hub blog + page rubrique). */ .alertes-hub { background: var(--c-blue-050); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-5) var(--sp-5) var(--sp-4); margin: var(--sp-6) 0; } .alertes-hub__entete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; } .alertes-hub .blog-section-titre { margin: 0; } .alertes-hub__tout { font-weight: 700; color: var(--c-red-800); text-decoration: none; font-size: .95rem; } .alertes-hub__tout:hover { text-decoration: underline; } .alertes-hub__intro { margin: var(--sp-2) 0 var(--sp-4); color: var(--c-ink-soft); font-size: .95rem; } .alertes-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); margin: 0 0 var(--sp-4); padding: 0; } .alerte-card { display: flex; flex-direction: column; gap: var(--sp-2); height: 100%; background: #fff; border: 1px solid var(--c-line); border-top: 3px solid var(--c-red); border-radius: var(--radius-lg); padding: var(--sp-4); text-decoration: none; transition: box-shadow .15s; } .alerte-card:hover { box-shadow: 0 4px 16px rgba(27, 27, 47, .1); } .alerte-card__badge { align-self: flex-start; background: var(--c-blue-100); color: var(--c-blue); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-radius: 12px; padding: .2rem .6rem; } .alerte-card__t { font-weight: 800; color: var(--c-ink); line-height: 1.35; } .alerte-card__d { font-size: .9rem; color: var(--c-ink-soft); flex: 1; } .alerte-card__go { font-weight: 700; color: var(--c-red-800); font-size: .9rem; } /* --- Fissures sécheresse (/fissures-secheresse/) --- */ .fis { margin: 0 0 var(--sp-6); } .fis h2 { font-size: 1.5rem; } .fis-form { position: relative; max-width: 480px; margin: var(--sp-4) 0; } .fis-input { text-transform: none; letter-spacing: normal; width: 100%; } .fis-suggestions { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; list-style: none; margin: 4px 0 0; padding: 0; background: #fff; border: 1px solid var(--c-line-strong); border-radius: var(--radius); box-shadow: 0 8px 22px rgba(27,27,47,.14); overflow: hidden; } .fis-suggestions button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: .6rem .9rem; font-family: var(--font-sans); font-size: .98rem; cursor: pointer; } .fis-suggestions button span { color: var(--c-ink-soft); font-size: .85rem; } .fis-suggestions button:hover { background: var(--c-blue-050); } .fis-attente { background: var(--c-bg-soft); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); } .fis-carte { background: #fff; border: 1px solid var(--c-line); border-top: 3px solid var(--c-blue); border-radius: var(--radius-lg); padding: var(--sp-5); } .fis-carte__commune { font-size: 1.25rem; font-weight: 800; color: var(--c-blue); margin: 0 0 var(--sp-2); } .sech__badge--fis-forte { background: #e1000f; color: #fff; } .sech__badge--fis-moyenne { background: #f4874b; color: #fff; } .sech__badge--fis-faible { background: #ffd166; color: #5c4300; } .sech__badge--fis-nulle { background: #dcefe3; color: #14522f; } .fis-carte__desc { margin: 0 0 var(--sp-3); } .fis-carte__catnat { margin: 0 0 var(--sp-3); background: var(--c-blue-050); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); } .fis-carte__detail summary { cursor: pointer; font-weight: 600; color: var(--c-blue); margin-bottom: var(--sp-2); } .fis-carte__detail ul { margin: 0 0 var(--sp-3); padding-left: 1.2rem; font-size: .92rem; } .fis-carte__note { margin: 0; font-size: .88rem; color: var(--c-ink-soft); } /* --- Encart statistiques DPE (pages villes, services, articles) --- */ .dpe-encart { background: var(--c-bg-soft); border: 1px solid var(--c-line); border-left: 4px solid var(--c-blue); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); margin: var(--sp-5) 0; } .dpe-encart__titre { margin: 0 0 var(--sp-1); font-weight: 800; color: var(--c-blue); } .dpe-encart__total { margin: 0 0 var(--sp-3); font-size: .95rem; } .dpe-encart__barre { display: flex; height: 26px; border-radius: 5px; overflow: hidden; margin-bottom: var(--sp-2); } .dpe-encart__seg { display: inline-flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 800; color: rgba(0,0,0,.55); min-width: 0; } .dpe-encart__source { margin: 0; font-size: .82rem; color: var(--c-ink-soft); } /* --- Outil DPE par adresse --- */ .dpea-modes { display: flex; gap: var(--sp-2); margin: var(--sp-4) 0; } .dpea-mode { background: #fff; border: 1.5px solid var(--c-line-strong); border-radius: 20px; padding: .45rem 1rem; font-family: var(--font-sans); font-weight: 600; font-size: .95rem; cursor: pointer; } .dpea-mode.est-actif { background: var(--c-blue); border-color: var(--c-blue); color: #fff; } .dpea-carte { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-3); } .dpea-carte__adresse { margin: 0 0 var(--sp-2); font-weight: 800; color: var(--c-ink); } .dpea-carte__badges { margin: 0 0 var(--sp-2); display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; } .dpea-badge { display: inline-block; font-weight: 800; border-radius: 5px; padding: .3rem .7rem; font-size: .95rem; } .dpea-perime { background: #fdeeef; color: var(--c-red-800); font-weight: 700; border-radius: 12px; padding: .2rem .6rem; font-size: .82rem; } .dpea-carte__meta { list-style: none; margin: 0; padding: 0; font-size: .9rem; color: var(--c-ink-soft); } .dpea-carte__meta li { margin-bottom: .15rem; } /* Encadré de l'outil DPE par adresse, mascotte loupe posée sur le coin. */ .dpea-cadre { position: relative; background: var(--c-bg-soft); border: 1px solid var(--c-line); border-top: 3px solid var(--c-blue); border-radius: var(--radius-lg); padding: var(--sp-5); margin: var(--sp-5) 0 var(--sp-4); } .dpea-cadre__mascotte { position: absolute; top: -46px; right: 26px; width: 96px; height: auto; transform: rotate(4deg); pointer-events: none; } .dpea-cadre .dpea-modes { margin-top: 0; padding-right: 110px; } .dpea-cadre .cani-methodo { background: #fff; margin-bottom: 0; } @media (max-width: 600px) { .dpea-cadre__mascotte { width: 72px; top: -36px; right: 12px; } .dpea-cadre .dpea-modes { padding-right: 80px; flex-wrap: wrap; } } /* Byline E-E-A-T des pages services. */ .lp-byline { display: flex; align-items: center; gap: .55rem; margin: calc(-1 * var(--sp-3)) 0 var(--sp-5); font-size: .88rem; color: var(--c-ink-soft); } .lp-byline .auteur-avatar { width: 28px; height: 28px; flex-shrink: 0; } .lp-byline a { color: var(--c-blue); font-weight: 600; text-decoration: none; } .lp-byline a:hover { text-decoration: underline; } /* Bloc d'intégration du widget (page sécheresse). */ .sech-embed { background: var(--c-blue-050); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-5); margin: 0 0 var(--sp-6); } .sech-embed__titre { margin: 0 0 var(--sp-2); font-size: 1.2rem; color: var(--c-blue); } .sech-embed__texte { margin: 0 0 var(--sp-3); font-size: .95rem; } .sech-embed__code { background: #1b1b2f; color: #e7e7ff; border-radius: var(--radius); padding: var(--sp-4); font-size: .8rem; line-height: 1.5; overflow-x: auto; white-space: pre-wrap; word-break: break-all; margin: 0 0 var(--sp-3); } /* Abonnement aux alertes par commune. */ .abo { background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-5); margin: 0 0 var(--sp-6); } .abo__titre { margin: 0 0 var(--sp-4); font-size: 1.2rem; } .abo__form { position: relative; } .abo__champs { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-bottom: var(--sp-3); } @media (min-width: 640px) { .abo__champs { grid-template-columns: 1fr 1fr; } } .abo__champ--commune { position: relative; } .abo__types { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); } .abo__actions { margin: 0 0 var(--sp-2); } .abo__note { margin: 0; font-size: .82rem; color: var(--c-ink-soft); } .abo__retour { margin: var(--sp-3) 0 0; font-weight: 700; } .abo__retour.est-ok { color: var(--c-green); } .abo__retour.est-erreur { color: var(--c-red-800); } /* Comparateur de coût de chauffage. */ .comp__besoin { margin-bottom: var(--sp-4); max-width: 420px; } .comp__input-besoin { text-transform: none; letter-spacing: normal; } .comp__ligne { margin-bottom: var(--sp-3); background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); } .comp__ligne.est-mini { border-color: var(--c-green); border-width: 1.5px; } .comp__ligne-tete { display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); } .comp__nom { font-weight: 700; } .comp__nom small { font-weight: 400; color: var(--c-ink-soft); } .comp__cout { font-weight: 800; color: var(--c-blue); } .comp__badge { background: var(--c-green); color: #fff; font-size: .72rem; font-weight: 700; border-radius: 10px; padding: .15rem .5rem; vertical-align: 2px; } .comp__barre { background: var(--c-blue-050); border-radius: 4px; height: 14px; overflow: hidden; } .comp__barre span { display: block; height: 100%; background: var(--c-blue); border-radius: 4px; } .comp__ligne.est-mini .comp__barre span { background: var(--c-green); } .comp__kwh { margin: .3rem 0 0; font-size: .82rem; color: var(--c-ink-soft); } .comp__prix { margin: var(--sp-4) 0; } .comp__prix summary { cursor: pointer; font-weight: 700; color: var(--c-blue); } .comp__prix-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); } .comp__prix-grille label { font-size: .85rem; font-weight: 600; color: var(--c-ink-soft); } .comp__prix-grille input { width: 100%; padding: .45rem .6rem; border: 1px solid var(--c-line-strong); border-radius: var(--radius); font-family: var(--font-sans); } /* Page contact : raccourcis de routage. */ .contact-raccourcis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); margin: 0 0 var(--sp-5); } .contact-raccourci { display: flex; flex-direction: column; gap: .2rem; background: var(--c-blue-050); border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-4); text-decoration: none; color: var(--c-ink); } .contact-raccourci:hover { border-color: var(--c-blue); } .contact-raccourci strong { color: var(--c-blue); } .contact-raccourci span { font-size: .88rem; color: var(--c-ink-soft); } /* Assistant mascotte : bulle flottante + panneau de chat. */ .asst { position: fixed; right: 16px; bottom: 16px; z-index: 900; font-family: var(--font-sans); } .asst__bulle { display: flex; align-items: center; gap: .5rem; background: #fff; border: 1.5px solid var(--c-blue); border-radius: 999px; padding: .4rem 1rem .4rem .5rem; cursor: pointer; box-shadow: 0 4px 18px rgba(0, 0, 60, .18); font-family: var(--font-sans); } .asst__bulle:hover { background: var(--c-blue-050); } .asst__bulle img { display: block; } .asst__bulle-label { font-weight: 700; color: var(--c-blue); font-size: .95rem; } .asst--ouvert .asst__bulle { display: none; } .asst__panneau[hidden] { display: none; } .asst__panneau { position: absolute; right: 0; bottom: 0; width: 370px; max-width: calc(100vw - 32px); height: 540px; max-height: calc(100vh - 100px); background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: 0 10px 40px rgba(0, 0, 60, .25); display: flex; flex-direction: column; overflow: hidden; } .asst__tete { display: flex; align-items: center; gap: .6rem; background: var(--c-blue); color: #fff; padding: .7rem .9rem; } .asst__tete img { background: #fff; border-radius: 50%; padding: 3px; } .asst__tete-txt { display: flex; flex-direction: column; line-height: 1.25; } .asst__tete-txt strong { font-size: .95rem; color: #fff; } .asst__tete-txt span { font-size: .72rem; opacity: .85; } .asst__fermer { margin-left: auto; background: none; border: 0; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 .2rem; } .asst__messages { flex: 1; overflow-y: auto; padding: .9rem; display: flex; flex-direction: column; gap: .6rem; background: var(--c-bg-soft); } .asst__msg { max-width: 88%; border-radius: 12px; padding: .55rem .75rem; font-size: .92rem; line-height: 1.5; } .asst__msg p { margin: 0; } .asst__msg--bot { align-self: flex-start; background: #fff; border: 1px solid var(--c-line); border-bottom-left-radius: 3px; } .asst__msg--user { align-self: flex-end; background: var(--c-blue); color: #fff; border-bottom-right-radius: 3px; } .asst__source { display: inline-block; margin-top: .45rem; font-size: .85rem; font-weight: 600; color: var(--c-blue); } .asst__actions { display: flex; flex-direction: column; gap: .4rem; margin-top: .55rem; } .asst__action { display: block; text-align: center; border: 1px solid var(--c-blue); border-radius: var(--radius); padding: .45rem .7rem; font-size: .88rem; font-weight: 700; color: var(--c-blue); text-decoration: none; background: #fff; } .asst__action:hover { background: var(--c-blue-050); } .asst__action--devis { background: var(--c-blue); color: #fff; } .asst__action--devis:hover { background: var(--c-blue-800); color: #fff; } .asst__relies { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; } a.asst__chip { text-decoration: none; } .asst__chip { display: inline-block; background: var(--c-blue-050); border: 1px solid var(--c-line-strong); border-radius: 999px; padding: .3rem .7rem; font-size: .82rem; font-family: var(--font-sans); color: var(--c-ink); cursor: pointer; text-align: left; } .asst__chip:hover { border-color: var(--c-blue); color: var(--c-blue); } .asst__typing { display: flex; gap: 4px; align-items: center; } .asst__typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--c-line-strong); animation: asst-pt 1s infinite; } .asst__typing span:nth-child(2) { animation-delay: .18s; } .asst__typing span:nth-child(3) { animation-delay: .36s; } @keyframes asst-pt { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } } .asst__form { display: flex; gap: .5rem; padding: .6rem .7rem; border-top: 1px solid var(--c-line); background: #fff; } .asst__input { flex: 1; border: 1px solid var(--c-line-strong); border-radius: 999px; padding: .5rem .9rem; font-family: var(--font-sans); font-size: .92rem; } .asst__input:focus { outline: 2px solid var(--c-blue); outline-offset: 1px; border-color: var(--c-blue); } .asst__envoyer { background: var(--c-blue); color: #fff; border: 0; border-radius: 50%; width: 38px; height: 38px; cursor: pointer; font-size: .95rem; flex: 0 0 auto; } .asst__envoyer:hover { background: var(--c-blue-800); } .asst__envoyer:disabled { opacity: .5; cursor: default; } .asst__note { margin: 0; padding: .45rem .8rem .6rem; font-size: .68rem; color: var(--c-ink-soft); background: #fff; } @media (max-width: 640px) { .asst { right: 12px; bottom: 12px; } .asst__bulle { padding: .4rem; } .asst__bulle-label { display: none; } .asst__panneau { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; height: 82vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } } /* Carte sécheresse : sélecteur par ressource (aligné sur vigieau.gouv.fr/carte). */ .sech__ressources { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); } .sech__ressources-label { font-weight: 700; } .sech__ressource { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; } .sech__ressource input { accent-color: var(--c-blue); } .sech__multi { list-style: none; margin: var(--sp-3) 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; } .sech__multi li { display: flex; align-items: center; gap: .45rem; color: var(--c-ink-soft); } .sech__multi li.est-actif { font-weight: 700; color: var(--c-ink); } .sech__puce { width: .8rem; height: .8rem; border-radius: 3px; display: inline-block; flex-shrink: 0; border: 1px solid rgba(0,0,0,.12); } .sech__puce--aucun { background: #dcefe3; } .sech__puce--vigilance { background: #d9deea; } .sech__puce--alerte { background: #ffd166; } .sech__puce--alerte_renforcee { background: #f4874b; } .sech__puce--crise { background: #e1000f; } /* Encart entreprises RGE (pages villes). */ .rge-encart { background: var(--c-blue-050); border: 1px solid var(--c-line); border-left: 4px solid var(--c-green); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); margin: var(--sp-5) 0; } .rge-encart__titre { font-weight: 800; color: var(--c-blue); margin: 0 0 var(--sp-2); } .rge-encart__total { margin: 0 0 var(--sp-2); } .rge-encart__domaines { margin: 0 0 var(--sp-2); font-size: .9rem; color: var(--c-ink-soft); } .rge-encart__verif { margin: 0 0 var(--sp-2); } .rge-encart__source { margin: 0; font-size: .8rem; color: var(--c-ink-soft); } /* Outil de vérification RGE (/aides/rge/). */ .rgev { margin: var(--sp-5) 0 var(--sp-6); } .rgev-cadre { position: relative; background: #fff; border: 2px solid var(--c-blue); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: 4px 4px 0 var(--c-blue-100); } .rgev-mascotte { position: absolute; top: -52px; right: 18px; width: 96px; height: auto; } .rgev__titre { margin: 0 0 var(--sp-2); color: var(--c-blue); padding-right: 96px; } .rgev__intro { margin: 0 0 var(--sp-4); color: var(--c-ink-soft); } .rgev__champs { display: grid; grid-template-columns: 1fr 200px; gap: var(--sp-3); margin-bottom: var(--sp-3); align-items: end; } .rgev__champ span { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .3rem; white-space: nowrap; } .rgev__champ small { font-weight: 400; color: var(--c-ink-soft); } .rgev__champ input { width: 100%; padding: .6rem .8rem; border: 1px solid var(--c-line-strong); border-radius: var(--radius); font-family: var(--font-sans); font-size: 1rem; } .rgev__champ input:focus { outline: 2px solid var(--c-blue); outline-offset: 1px; } .rgev__resultats { margin-top: var(--sp-4); } .rgev__msg { background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); } .rgev__msg--erreur { border-color: var(--c-red); color: var(--c-red-800); } .rgev__msg--vide ul { margin: var(--sp-2) 0 0 1.1rem; } .rgev__carte { border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-4); margin-bottom: var(--sp-3); background: #fff; } .rgev__carte-tete { display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; align-items: baseline; } .rgev__nom { margin: 0; font-size: 1.05rem; } .rgev__etat { font-size: .8rem; font-weight: 700; border-radius: 10px; padding: .2rem .7rem; } .rgev__etat--ok { background: #d9f2e5; color: #0f6a3c; } .rgev__etat--ko { background: #fde8e8; color: var(--c-red-800); } .rgev__adresse { margin: .3rem 0 var(--sp-3); font-size: .88rem; color: var(--c-ink-soft); } .rgev__quals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; } .rgev__qual { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline; font-size: .9rem; border-top: 1px solid var(--c-line); padding-top: .45rem; } .rgev__qual.est-expiree { opacity: .55; } .rgev__qual-dom { font-weight: 700; } .rgev__qual-detail { color: var(--c-ink-soft); font-size: .82rem; } .rgev__qual-validite { font-size: .8rem; color: var(--c-ink-soft); } .rgev__qual-validite.est-ok { color: #0f6a3c; font-weight: 700; } .rgev__qual-lien { font-size: .82rem; } .rgev__verifie { font-size: .8rem; color: var(--c-ink-soft); } .rgev__note { margin: var(--sp-4) 0 0; font-size: .82rem; color: var(--c-ink-soft); } @media (max-width: 640px) { .rgev__champs { grid-template-columns: 1fr; } .rgev-mascotte { width: 72px; top: -40px; } } /* Carte de vigilance canicule (page /prochaine-canicule/). */ .vig { margin: 0 0 var(--sp-6); } .vig__titre { margin: 0 0 var(--sp-2); } .vig__maj { font-size: .85rem; color: var(--c-ink-soft); margin: 0 0 var(--sp-3); } .vig__legende { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); padding: 0; margin: 0 0 var(--sp-3); } .vig__leg { display: flex; align-items: center; gap: .4rem; font-size: .9rem; } .vig__leg strong { background: var(--c-bg-soft); border-radius: 10px; padding: 0 .5rem; } .vig__pastille { width: .95rem; height: .95rem; border-radius: 3px; display: inline-block; flex-shrink: 0; border: 1px solid rgba(0,0,0,.12); } .vig__leg--vert .vig__pastille { background: #4c9a52; } .vig__leg--jaune .vig__pastille { background: #f2c200; } .vig__leg--orange .vig__pastille { background: #f08a1d; } .vig__leg--rouge .vig__pastille { background: #e0261b; } .vig__grille { display: grid; grid-template-columns: 1fr 300px; gap: var(--sp-4); align-items: start; } .vig__map svg { width: 100%; height: auto; display: block; } .vig__map path { cursor: pointer; stroke: #fff; stroke-width: .5; fill: #e0e0e6; transition: fill .15s ease; outline: none; } .vig__map path.vig--vert { fill: #4c9a52; } .vig__map path.vig--jaune { fill: #f2c200; } .vig__map path.vig--orange { fill: #f08a1d; } .vig__map path.vig--rouge { fill: #e0261b; } .vig__map path.vig--na { fill: #e0e0e6; } .vig__map path.is-active { stroke: var(--c-ink); stroke-width: 1.5; } .vig__map path:focus-visible { stroke: var(--c-blue); stroke-width: 1.5; } .vig__panel { background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-4); } .vig__hint { margin: 0; color: var(--c-ink-soft); font-size: .9rem; } .vig__dept { font-weight: 800; margin: 0 0 .3rem; } .vig__code { color: var(--c-ink-soft); font-weight: 400; } .vig__badge { display: inline-block; font-weight: 700; border-radius: 4px; padding: .2rem .6rem; margin: 0 0 var(--sp-2); } .vig__badge--vert { background: #e3f1e4; color: #2e6b34; } .vig__badge--jaune { background: #fbf1c4; color: #8a6d00; } .vig__badge--orange { background: #fde3c7; color: #9c4e00; } .vig__badge--rouge { background: #fbdcd9; color: #a01810; } .vig__badge--na { background: var(--c-bg-soft); color: var(--c-ink-soft); border: 1px solid var(--c-line); } .vig__desc { margin: 0 0 var(--sp-2); font-size: .92rem; } .vig__lien { margin: 0; font-size: .88rem; font-weight: 600; } .vig__note-carte { margin: var(--sp-3) 0 0; font-size: .82rem; color: var(--c-ink-soft); } @media (max-width: 859px) { .vig__grille { grid-template-columns: 1fr; } } /* Menu niveau 1 (5 items) : léger élargissement du header pour la lisibilité. */ @media (min-width: 1000px) { .site-header__inner { max-width: 1240px; } } .mega__featured-ic { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 8px; background: #fff; color: var(--c-blue); margin-bottom: var(--sp-2); } .mega__featured-ic svg { width: 24px; height: 24px; } /* Portrait énergétique communal. */ .portrait { margin: var(--sp-5) 0 var(--sp-6); } /* Encart de recherche mis en avant (mascotte + accroche). */ .portrait__accroche { display: flex; align-items: center; gap: var(--sp-4); background: linear-gradient(135deg, var(--c-blue-050), #fff); border: 1px solid var(--c-blue); border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); box-shadow: 0 10px 28px rgba(0,0,80,.08); } .portrait__masc { flex: 0 0 auto; width: 96px; height: 96px; } .portrait__form { position: relative; flex: 1 1 auto; min-width: 0; margin: 0; } .portrait__label { display: block; font-size: 1.15rem; font-weight: 800; color: var(--c-blue); margin-bottom: .15rem; } .portrait__accroche-txt { margin: 0 0 .7rem; font-size: .92rem; color: var(--c-ink-soft); } .portrait__search { position: relative; max-width: 480px; } .portrait__input { width: 100%; padding: .8rem 2.6rem .8rem 1rem; border: 1.5px solid var(--c-blue); border-radius: var(--radius); font-family: var(--font-sans); font-size: 1.05rem; } .portrait__input:focus { outline: 3px solid rgba(0,0,145,.18); outline-offset: 1px; } .portrait__search-ic { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); color: var(--c-blue); pointer-events: none; display: inline-flex; } @media (max-width: 620px) { .portrait__accroche { flex-direction: column; text-align: center; } .portrait__masc { width: 76px; height: 76px; } .portrait__search { max-width: none; } } .portrait__suggest { list-style: none; margin: 4px 0 0; padding: 0; position: absolute; z-index: 10; left: 0; right: 0; background: #fff; border: 1px solid var(--c-line-strong); border-radius: var(--radius); box-shadow: 0 8px 20px rgba(0,0,60,.12); max-height: 260px; overflow-y: auto; } .portrait__suggest-item { padding: .55rem .9rem; cursor: pointer; } .portrait__suggest-item:hover { background: var(--c-blue-050); } .portrait__hint { color: var(--c-ink-soft); } .portrait__tete { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem var(--sp-3); margin: 0 0 var(--sp-4); } .portrait__commune { font-size: 1.25rem; font-weight: 800; color: var(--c-blue); } .portrait__pop { font-size: .85rem; font-weight: 600; color: var(--c-ink-soft); background: var(--c-blue-050); border-radius: 999px; padding: .2rem .7rem; } .portrait__bloc { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-3); } .portrait__bloc-tete { display: flex; align-items: center; gap: .7rem; margin: 0 0 var(--sp-2); } .portrait__bloc-ic { flex: 0 0 auto; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--c-blue-050); color: var(--c-blue); } .portrait__bloc-titre { font-size: 1.05rem; margin: 0; } .portrait__chiffre { font-size: 1.4rem; font-weight: 800; color: var(--c-blue); margin: 0 0 .2rem; } .portrait__sous { font-size: .9rem; color: var(--c-ink-soft); margin: 0 0 var(--sp-2); } .portrait__source { font-size: .78rem; color: var(--c-ink-soft); margin: var(--sp-2) 0 0; font-style: italic; } .portrait__barre { display: flex; height: 26px; border-radius: 4px; overflow: hidden; margin: var(--sp-2) 0; } .portrait__seg { display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; color: rgba(0,0,0,.55); } /* Bloc « situation du jour » : carte du département + statuts sécheresse/canicule. */ .portrait__situation { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; } .portrait__dept { flex: 0 0 auto; width: 130px; height: 130px; display: flex; align-items: center; justify-content: center; } .portrait__dept-svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 4px rgba(0,0,40,.14)); } .portrait__situation-col { flex: 1 1 220px; min-width: 200px; } .portrait__statut { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: .45rem 0; border-bottom: 1px solid var(--c-line); } .portrait__statut:first-child { border-top: 1px solid var(--c-line); } .portrait__statut-lib { font-size: .9rem; font-weight: 600; } .portrait__pill { font-size: .8rem; font-weight: 700; padding: .25rem .7rem; border-radius: 999px; white-space: nowrap; } .portrait__pill--na { background: #ececef; color: var(--c-ink-soft); font-weight: 600; } .portrait__aides { margin: 0; padding-left: 18px; } .portrait__aides a { font-weight: 600; } .portrait__partage { background: var(--c-blue-050); border: 1px solid var(--c-line); border-left: 4px solid var(--c-blue); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); margin-top: var(--sp-4); } .portrait__partage-titre { font-weight: 800; color: var(--c-blue); margin: 0 0 .3rem; } .portrait__copie { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; } .portrait__url { flex: 1 1 260px; padding: .55rem .8rem; border: 1px solid var(--c-line-strong); border-radius: var(--radius); font-family: var(--font-sans); font-size: .9rem; background: #fff; } /* Espace collectivités (landing). */ .collec-atouts { list-style: none; margin: var(--sp-4) 0 var(--sp-5); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); } .collec-atout { display: flex; align-items: center; gap: .55rem; font-size: .9rem; font-weight: 600; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: .7rem .85rem; } .collec-atout__ic { flex: 0 0 auto; color: var(--c-blue); display: inline-flex; } .collec-atout__ic svg { width: 22px; height: 22px; } .collec-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin: var(--sp-4) 0; } .collec-carte { position: relative; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-5); display: flex; flex-direction: column; } .collec-carte__ic { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--c-blue-050); color: var(--c-blue); margin-bottom: var(--sp-3); } .collec-carte__ic svg { width: 28px; height: 28px; } .collec-carte__titre { margin: 0 0 var(--sp-2); color: var(--c-blue); } .collec-carte__texte { margin: 0 0 var(--sp-2); } .collec-carte .btn { margin-top: auto; align-self: flex-start; } /* Carte vedette (portrait) : en-tête icône+pastille sur une ligne + aperçu. */ .collec-carte--vedette { margin: var(--sp-4) 0; border-top: 3px solid var(--c-blue); background: var(--c-blue-050); } .collec-carte__tete { display: flex; align-items: center; gap: .7rem; margin-bottom: var(--sp-3); } .collec-carte--vedette .collec-carte__ic { margin: 0; background: var(--c-blue); color: #fff; } .collec-carte__tag { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--c-blue); background: #fff; border: 1px solid var(--c-blue); border-radius: 999px; padding: .28rem .8rem; white-space: nowrap; } .collec-vedette__corps { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-5); align-items: center; } .collec-vedette__txt { min-width: 0; } .collec-apercu { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem .9rem; } .collec-apercu li { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; } .collec-apercu__ic { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: #fff; color: var(--c-blue); } .collec-apercu__ic svg { width: 18px; height: 18px; } /* Mini-aperçu illustratif de ce que contient un portrait. */ .collec-vedette__apercu { margin: 0; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-4); box-shadow: 0 8px 22px rgba(0,0,80,.07); } .collec-apercu-carte__lib { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-ink-soft); margin-bottom: .6rem; } .collec-apercu-carte__ligne { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .88rem; padding: .35rem 0; } .collec-apercu-carte__ligne strong { color: var(--c-blue); font-size: 1.05rem; } .collec-apercu-carte__barre { display: flex; height: 16px; border-radius: 4px; overflow: hidden; margin: .1rem 0 .5rem; } .collec-apercu-carte__barre i { display: block; height: 100%; } .collec-apercu-carte__pill { font-size: .72rem; font-weight: 700; color: #fff; padding: .18rem .55rem; border-radius: 999px; font-style: normal; white-space: nowrap; } .collec-liens { margin: var(--sp-2) 0 0; padding: 0; list-style: none; } .collec-liens li { display: flex; align-items: center; gap: .55rem; margin-bottom: .55rem; } .collec-liens__ic { flex: 0 0 auto; color: var(--c-blue); display: inline-flex; } .collec-liens__ic svg { width: 20px; height: 20px; } @media (max-width: 900px) { .collec-grille { grid-template-columns: 1fr; } .collec-vedette__corps { grid-template-columns: 1fr; } } @media (max-width: 720px) { .collec-atouts { grid-template-columns: repeat(2, 1fr); } .collec-apercu { grid-template-columns: 1fr; } }