/* ========================================================================== La Caisse Énergie — Landing page Contenu inspiré des planches de design-reference/ ========================================================================== */ /* --- Boutons --- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; justify-content: center; padding: 0.85rem 2rem; border-radius: var(--radius); font-weight: 600; font-size: var(--fs-body); transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-sm { padding: 0.6rem 1.4rem; font-size: var(--fs-small); } .btn-primary { background-color: var(--color-primary); color: var(--color-white); } .btn-dark { background-color: var(--color-dark); color: var(--color-white); } .btn-accent { background-color: var(--color-accent); color: var(--color-dark); } .btn-outline { background-color: transparent; color: var(--color-dark); border: 2px solid rgba(53, 61, 47, 0.25); } .btn-outline:hover { border-color: var(--color-dark); } /* --- En-tête / navigation --- */ .site-header { position: sticky; top: 0; z-index: 100; background-color: var(--color-white); border-bottom: 1px solid rgba(53, 61, 47, 0.08); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-block: var(--space-sm); } .logo { font-family: var(--font-heading); font-size: 1.4rem; color: var(--color-dark); } .nav-links { display: flex; align-items: center; gap: var(--space-md); } .nav-links a { font-weight: 500; } .nav-links a:not(.btn):hover { color: var(--color-primary); } /* Bouton hamburger — masqué sur desktop */ .nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 0.5rem; } .nav-toggle span { display: block; width: 24px; height: 2px; background-color: var(--color-dark); border-radius: 2px; } /* --- Sections génériques --- */ .section { padding-block: var(--space-xl); } .section-dark { background-color: var(--color-dark); color: var(--color-white); } .section-dark h1, .section-dark h2, .section-dark h3 { color: var(--color-white); } .section-light { background-color: var(--color-light); } /* Largeur volontairement généreuse : les textes d'introduction se déroulent sur moins de lignes. Au-delà, la lecture d'un texte centré devient pénible. */ .section-header { text-align: center; max-width: 58rem; margin: 0 auto var(--space-lg); } .section-header .subheading { margin-top: var(--space-xs); } .section-intro { margin-top: var(--space-sm); color: rgba(53, 61, 47, 0.75); } /* --- Hero --- */ .hero { padding-block: var(--space-xl); } .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center; } .badge { display: inline-block; background-color: var(--color-accent); color: var(--color-dark); font-weight: 500; font-size: var(--fs-small); padding: 0.5rem 1.25rem; border-radius: 999px; margin-bottom: var(--space-md); } .hero-lead { margin-top: var(--space-md); font-size: 1.125rem; color: rgba(53, 61, 47, 0.8); max-width: 34ch; } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); } /* Bouton Google Agenda : injecté par leur script, qui lui applique la classe .qxCTlb (police Google Sans, rayon 4px, padding 8/16). Cette règle le réaligne sur nos propres boutons. Pas de !important : « .hero-actions button » vaut (0,1,1) contre (0,1,0) pour « .qxCTlb », donc la spécificité suffit — à condition que main.css reste chargé après la feuille de Google, ce qui est le cas dans . Sa couleur de fond vient du paramètre « color » passé au script. */ .hero-actions button { cursor: pointer; font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; letter-spacing: normal; line-height: 1.6; white-space: nowrap; padding: 0.85rem 2rem; border-radius: var(--radius); transition: transform 0.15s ease, box-shadow 0.15s ease; } .hero-actions button:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Image avec décalage jaune façon "carte imprimée" */ .hero-media { position: relative; } .hero-media::before { content: ""; position: absolute; inset: -18px -18px 18px 18px; background-color: var(--color-accent); border-radius: 28px; transform: rotate(-1.5deg); } .hero-media img { position: relative; width: 100%; border-radius: 24px; box-shadow: var(--shadow-md); } /* --- Bandeau partenaires défilant --- */ .partners { padding-block: var(--space-lg); } /* Bande grise : elle n'entoure que les logos défilants, pas le titre. Le fond est porté ici et non sur .marquee, dont le masque en dégradé estomperait la couleur à ses deux extrémités. */ .marquee-band { background-color: var(--color-light); padding-block: var(--space-md); } .partners-title { text-align: center; font-family: var(--font-subheading); font-size: var(--fs-subheading); color: var(--color-primary); margin-bottom: var(--space-md); } .marquee { overflow: hidden; /* Estompe les logos sur les bords plutôt que de les couper net */ -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; width: max-content; animation: marquee-scroll 38s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-list { display: flex; align-items: center; gap: var(--space-xl); padding-right: var(--space-xl); } /* Logos affichés dans leurs couleurs d'origine : les chartes graphiques des partenaires interdisent généralement toute altération (désaturation, transparence). Le calage se fait sur la hauteur. */ .marquee-list img { height: 46px; max-width: 170px; width: auto; object-fit: contain; } /* Logos carrés ou compacts : rehaussés pour équilibrer optiquement la ligne face aux logos très allongés. */ .marquee-list img.is-compact { height: 60px; } /* La piste contient deux listes identiques : la translation de la moitié exacte de sa largeur rend la boucle invisible. */ @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Accessibilité : pas d'animation si l'utilisateur la refuse */ @media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; } .marquee-track { animation: none; } } /* --- Bandeau photo pleine largeur --- */ .photo-band { position: relative; /* Le fond sombre évite un aplat blanc le temps que la photo se charge */ background-color: var(--color-dark); } .photo-band img { width: 100%; /* Le recadrage se fait ici : la hauteur s'adapte à l'écran et la photo est rognée au centre-bas, là où se trouvent les toitures. */ height: clamp(150px, 18vw, 240px); object-fit: cover; object-position: center 72%; display: block; /* Photo volontairement atténuée : le bleu du ciel est très saturé et jurerait avec la palette. L'opacité la fond dans le vert foncé du fond, ce qui l'assourdit sans la ternir. */ opacity: 0.55; } /* Voile sombre en bas : le dégradé assure la lisibilité du texte blanc. Il peut rester léger, l'opacité de la photo ayant déjà assombri l'ensemble. */ .photo-band-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: var(--space-lg) var(--space-md); background: linear-gradient(to top, rgba(53, 61, 47, 0.5), transparent 70%); } .photo-band-overlay p { max-width: var(--container-width); margin-inline: auto; width: 100%; color: var(--color-white); font-family: var(--font-heading); font-size: var(--fs-h3); line-height: 1.2; } /* --- Bandeau réglementaire --- */ .section-band { background-color: var(--color-light); padding-block: var(--space-lg); text-align: center; } .section-band p { max-width: 92ch; margin-inline: auto; } .section-band a { color: var(--color-dark); font-weight: 600; text-decoration: underline; } .section-band a:hover { color: var(--color-primary); } /* --- Cartes services --- */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-md); } /* Variante 3 colonnes, pour éviter un orphelin en fin de ligne */ .cards-grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* Variante 4 colonnes : largeur imposée plutôt qu'auto-fit, pour garantir que les quatre cartes tiennent sur un seul bandeau en desktop. Passe à 2×2 puis 1 colonne via les media queries plus bas. */ .cards-grid-4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); /* Chaque carte prend sa propre hauteur : sans cela, déplier une carte étirerait les trois autres à la même hauteur, avec du vide dedans. */ align-items: start; } /* Cartes plus compactes : quatre de front laissent peu de largeur */ .cards-grid-4 .card { padding: var(--space-sm); } .cards-grid-4 .card-illu { max-width: 120px; height: 90px; } .cards-grid-4 .card-list { font-size: 0.82rem; } .card { background-color: var(--color-white); border: 1px solid rgba(53, 61, 47, 0.1); border-radius: var(--radius); padding: var(--space-md); transition: transform 0.15s ease, box-shadow 0.15s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .card-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius); background-color: var(--color-accent); font-size: 1.4rem; margin-bottom: var(--space-sm); } .card h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; margin-bottom: var(--space-xs); } .card p { color: rgba(53, 61, 47, 0.75); font-size: var(--fs-small); } /* Liste à puces dans une carte */ .card-list { display: grid; gap: var(--space-xs); text-align: left; font-size: var(--fs-small); color: rgba(53, 61, 47, 0.75); } .card-list li { position: relative; padding-left: 1.5rem; } .card-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-primary); } /* Carte avec illustration en tête (section « Pour qui ») */ .card-illustrated { text-align: center; } /* --- Cartes « Pour qui » dépliables --- */ /* Neutralise le display:flex hérité de « .cards-grid > .card », qui perturberait le couple summary / contenu de
. Le sélecteur de type « details » porte la spécificité à (0,2,1) contre (0,2,0) : la règle l'emporte quel que soit son ordre dans le fichier. */ .cards-grid > details.audience { display: block; } .audience summary { cursor: pointer; list-style: none; position: relative; } /* Masque le triangle natif (Safari / anciens Chrome) */ .audience summary::-webkit-details-marker { display: none; } /* Indicateur + / − : signale que la carte se déplie */ .audience summary::after { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-top: var(--space-xs); border-radius: 50%; background-color: var(--color-accent); color: var(--color-dark); font-weight: 700; font-size: 1.1rem; line-height: 1; } .audience[open] summary::after { content: "–"; } .audience summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: var(--radius); } .audience .card-list { margin-top: var(--space-sm); } /* Hauteur fixe : les illustrations n'ont pas les mêmes proportions, et sans cela les titres des cartes ne s'alignent pas d'une colonne à l'autre. */ .card-illu { width: 100%; max-width: 180px; height: 110px; object-fit: contain; margin: 0 auto var(--space-sm); } /* Les listes démarrent juste sous le titre : comme les illustrations ont une hauteur fixe et les titres tiennent sur une ligne, les puces s'alignent d'une carte à l'autre. Surtout pas de margin-top:auto ici, qui collerait les listes en bas de carte et décalerait leur première ligne. */ .cards-grid > .card { display: flex; flex-direction: column; } /* --- Chiffres clés --- */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); text-align: center; } /* Taille calée sur le chiffre le plus long (« < 300 kWc ») pour qu'aucun ne passe à la ligne : nowrap force le constat plutôt qu'un repli discret. */ .stat-value { font-family: var(--font-heading); font-size: clamp(1.75rem, 2.5vw, 2.5rem); color: var(--color-accent); line-height: 1.1; white-space: nowrap; } .stat-label { margin-top: var(--space-xs); font-size: var(--fs-small); color: rgba(255, 255, 255, 0.85); } /* --- Chaîne de valeur --- */ .chain { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-sm); } /* Les maillons sont des