/* Polices Poppins (titres) / Open Sans (corps) : auto-hébergées via « Aegis+ › Réglages généraux » (upload de typo, aucun appel à Google Fonts). Sans téléversement : repli sur les polices système. */ /* Aegis-Tarifs — page « Tarifs granulés ». Classes atg-* (jamais celles du thème). */ .atg { --atg-accent: #51B148; --atg-ink: #171B1F; --atg-muted: #5E6468; --atg-line: #E4E7EA; --atg-bg: #f7faf6; font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: var(--atg-ink); /* Garde-fou : les sections pleine largeur utilisent width:100vw (qui inclut la barre de défilement) ; on empêche tout débordement horizontal sur mobile. */ overflow-x: hidden; } /* Sécurité : aucun média ne dépasse son conteneur (le graphe SVG garde son ratio). */ .atg img, .atg svg { max-width: 100%; } .atg-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; } .atg-h2 { font-family: 'Poppins', system-ui, sans-serif; font-weight: 800; font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 0 0 8px; color: var(--atg-ink); line-height: 1.15; } .atg-lead { color: var(--atg-muted); margin: 0 0 26px; font-size: 1.02rem; } /* Hero : texte à gauche, carte graphique à droite (fond clair) */ .atg-hero { background: linear-gradient(180deg, #f3f9f1, #ffffff); padding: 60px 0 52px; } /* Desktop : le header du thème est fixe (env. 80px). On dégage le haut du hero pour que la carte graphique passe entièrement SOUS le header, sans chevauchement. */ @media (min-width: 921px) { .atg-hero { padding-top: 124px; } } .atg-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } @media (max-width: 920px) { .atg-hero__grid { grid-template-columns: 1fr; } } .atg-eyebrow { font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--atg-accent); } .atg-hero__title { font-family: 'Poppins', system-ui, sans-serif; font-weight: 800; font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.08; margin: 12px 0 16px; color: var(--atg-ink); max-width: 16ch; } .atg-hl { color: var(--atg-accent); } .atg-hero__sub { font-size: 1.1rem; color: var(--atg-muted); max-width: 52ch; margin: 0 0 26px; } .atg-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; } /* Boutons */ .atg-btn { font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; text-decoration: none; padding: 14px 28px; border-radius: 999px; transition: transform .15s ease, box-shadow .15s ease; display: inline-block; } .atg-btn--primary { background: var(--atg-accent); color: #fff; } .atg-btn--light { background: #fff; color: var(--atg-ink); border: 1px solid var(--atg-line); } .atg-btn--ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.6); } .atg-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.12); } /* Carte graphique (dans le hero) */ .atg-chartcard { background: #fff; border: 1px solid var(--atg-line); border-radius: 20px; padding: 20px 22px; box-shadow: 0 22px 50px rgba(15,23,42,.09); } .atg-chartcard__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; } .atg-chartcard__range { display: block; font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: .12em; color: var(--atg-accent); } .atg-chartcard__title { font-family: 'Poppins', system-ui, sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--atg-ink); } .atg-chartcard__trend { color: var(--atg-accent); font-size: 1.3rem; line-height: 1; } .atg-chart { display: block; width: 100%; height: auto; font-family: 'Open Sans', system-ui, sans-serif; } .atg-chartcard__legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .atg-leg { display: flex; flex-direction: column; align-items: center; gap: 1px; flex: 1; min-width: 60px; text-align: center; } .atg-leg__top { display: inline-flex; align-items: center; gap: 5px; } .atg-leg__dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .atg-leg__name { font-size: .72rem; font-weight: 600; color: var(--atg-ink); } .atg-leg__evo { font-size: .72rem; color: var(--atg-muted); } /* Bandeau de prix par énergie (pleine largeur) */ .atg-stats { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: #fff; border-top: 1px solid var(--atg-line); border-bottom: 1px solid var(--atg-line); } .atg-statsrow { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); } @media (max-width: 900px) { .atg-statsrow { grid-template-columns: repeat(3, 1fr); } } /* Mobile : on garde une GRILLE 2 colonnes (jamais 1 seule colonne empilée). */ @media (max-width: 620px) { .atg-statsrow { grid-template-columns: repeat(2, 1fr); } } .atg-stat { padding: 22px 24px; border-left: 1px solid var(--atg-line); } /* Bordures propres à chaque nombre de colonnes (pas de séparateur orphelin au wrap). */ .atg-statsrow .atg-stat:first-child { border-left: 0; } @media (max-width: 900px) { .atg-stat { border-top: 1px solid var(--atg-line); } .atg-statsrow .atg-stat:nth-child(3n+1) { border-left: 0; } .atg-statsrow .atg-stat:nth-child(-n+3) { border-top: 0; } } @media (max-width: 620px) { .atg-statsrow .atg-stat:nth-child(3n+1) { border-left: 1px solid var(--atg-line); } .atg-statsrow .atg-stat:nth-child(2n+1) { border-left: 0; } .atg-statsrow .atg-stat:nth-child(-n+3) { border-top: 1px solid var(--atg-line); } .atg-statsrow .atg-stat:nth-child(-n+2) { border-top: 0; } } .atg-stat__top { display: flex; align-items: center; gap: 8px; color: var(--c, #8a939b); } .atg-stat__name { font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--atg-muted); } .atg-stat__val { font-family: 'Poppins', system-ui, sans-serif; font-weight: 800; font-size: 1.7rem; color: var(--atg-ink); margin: 8px 0 4px; } .atg-stat__val small { font-size: .8rem; font-weight: 600; color: var(--atg-muted); } /* Énergies les moins chères (bois bûche + granulés) : prix en vert marque. */ .atg-stat--cheap .atg-stat__val { color: var(--atg-accent, #51B148); } /* Desktop uniquement : centrage horizontal du contenu de chaque case d'énergie (mobile inchangé). */ @media (min-width: 901px) { .atg-stat { text-align: center; } .atg-stat__top { justify-content: center; } } .atg-stat__evo { font-size: .82rem; font-weight: 700; color: #d23b3b; } .atg-stat__upd { font-size: .72rem; color: var(--atg-muted); font-style: italic; margin-top: 3px; } /* Prix granulés */ .atg-prix { padding: 60px 0; background: var(--atg-bg); } .atg-prix__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; } .atg-prix__head .atg-h2 { margin: 6px 0 4px; } .atg-prix__head .atg-lead { margin: 0; } .atg-badge { display: inline-block; font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--atg-accent); background: #eaf6e7; border: 1px solid #cfe8c8; border-radius: 999px; padding: 9px 16px; white-space: nowrap; } .atg-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; } @media (max-width: 860px) { .atg-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .atg-cards { grid-template-columns: 1fr; } } /* Cartes façon maquette : coins arrondis + ombre douce, en colonne pour aligner le bouton « Pré-commander » en bas quelle que soit la longueur de la note. */ .atg-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--atg-line); border-radius: 24px; padding: 26px 22px; text-align: center; box-shadow: 0 8px 24px -8px rgba(15,23,42,.12); } .atg-card__fmt { font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--atg-muted); font-size: .82rem; } .atg-card__price { font-family: 'Poppins', system-ui, sans-serif; font-weight: 800; font-size: 2.1rem; color: var(--atg-accent); margin: 8px 0 4px; } .atg-card__note { font-size: .84rem; color: var(--atg-muted); margin-bottom: auto; } /* Note de rendement (carte feature) */ .atg-feature { padding: 60px 0; } .atg-feature__card { display: grid; grid-template-columns: 128px 1fr 264px; background: #fff; border: 1px solid var(--atg-line); border-radius: 20px; overflow: hidden; box-shadow: 0 1px 3px rgba(15,23,42,.05); } @media (max-width: 860px) { .atg-feature__card { grid-template-columns: 1fr; } } .atg-feature__icon { display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #e9f6e6, #f4faf2); color: var(--atg-accent); } @media (max-width: 860px) { .atg-feature__icon { padding: 22px 0; } } .atg-feature__body { padding: 30px 34px; } .atg-feature__title { font-family: 'Poppins', system-ui, sans-serif; font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 1.95rem); color: var(--atg-ink); margin: 8px 0 12px; line-height: 1.2; } .atg-feature__text { color: var(--atg-muted); font-size: 1.02rem; line-height: 1.6; margin: 0; } .atg-feature__rail { display: flex; flex-direction: column; border-left: 1px solid var(--atg-line); } /* Mobile : grille 2 colonnes propre (au lieu d'un flex-wrap aux bordures orphelines). */ @media (max-width: 860px) { .atg-feature__rail { display: grid; grid-template-columns: repeat(2, 1fr); border-left: 0; border-top: 1px solid var(--atg-line); } } .atg-railstat { padding: 16px 22px; text-align: center; border-bottom: 1px solid var(--atg-line); } .atg-railstat:last-child { border-bottom: 0; } @media (max-width: 860px) { .atg-railstat { border-bottom: 1px solid var(--atg-line); border-right: 1px solid var(--atg-line); } .atg-railstat:nth-child(2n) { border-right: 0; } .atg-railstat:nth-last-child(-n+1):nth-child(odd) { grid-column: 1 / -1; } } .atg-railstat__val { font-family: 'Poppins', system-ui, sans-serif; font-weight: 800; font-size: 1.3rem; color: var(--atg-accent); line-height: 1.1; } .atg-railstat__lbl { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--atg-muted); margin-top: 5px; } /* Certifications : sortent du corps de phrase pour devenir un rang de puces. */ .atg-feature__certs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 14px; } .atg-cert{ display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border:1px solid rgba(81,177,72,.42); border-radius:999px; background:rgba(81,177,72,.07); font-family:'Poppins',system-ui,sans-serif; font-weight:700; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--atg-accent); white-space:nowrap; } .atg-cert::before{ content:""; width:5px;height:5px;border-radius:50%; background:var(--atg-accent); } .atg-cert__note{ font-size:.78rem; color:var(--atg-muted); } /* Valeurs techniques mises en pastille dans le fil du texte. */ .atg-val{ display:inline-block; padding:1px 7px; border-radius:5px; background:rgba(81,177,72,.10); font-family:'Poppins',system-ui,sans-serif; font-weight:600; font-size:.94em; font-variant-numeric:tabular-nums; color:var(--atg-ink); white-space:nowrap; } /* Conclusion commerciale : encadré doux, séparé de la ligne de specs. */ .atg-feature__claim{ margin:16px 0 0; padding:13px 16px; border:1px solid var(--atg-line); border-left:3px solid var(--atg-accent); border-radius:4px 12px 12px 4px; background:var(--atg-bg); color:var(--atg-ink); font-size:1rem; line-height:1.55; } .atg-feature__claim strong{ font-family:'Poppins',system-ui,sans-serif; font-weight:700; white-space:nowrap; } @media (max-width:620px){ .atg-feature__body{padding:26px 22px} .atg-feature__claim{padding:12px 14px} } /* Bouton « Pré-commander » sous chaque carte de prix. !important neutralise le button:hover{background:red} du thème. */ /* La note remplit l'espace restant (margin-bottom:auto) → le bouton est poussé en bas avec un écart fixe, donc tous les boutons s'alignent sur une même ligne quelle que soit la hauteur des cartes. */ /* !important OBLIGATOIRE : le thème stylise les