/* ========================================================================== www.leplombiersauvinois.fr : feuille de style, fond clair Mise en page sombre a bandeau, barre laterale et navigation repliable. ========================================================================== */ :root { --fond: #ffffff; --fond-2: #f5f8f5; --fond-3: #ecf3ee; --vert: #15803d; --vert-clair:#16a34a; --or: #b45309; --or-2: #92400e; --texte: #15231a; --texte-2: #566b5c; --ligne: #d8e3da; --r: 12px; --titre: "Madefor Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --corps: "Madefor Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* Les polices Madefor ne sont pas fournies avec cette archive. La pile systeme prend le relais : aucun fichier a telecharger, aucun decalage de mise en page au chargement. Pour revenir aux polices de marque, deposez madefor-display.woff2 et madefor-text.woff2 dans assets/fonts/ puis decommentez les deux blocs ci-dessous et les deux balises preload du . */ /* @font-face { font-family: "Madefor Display"; src: url("../fonts/madefor-display.woff2") format("woff2"); font-weight: 400 800; font-display: swap; } @font-face { font-family: "Madefor Text"; src: url("../fonts/madefor-text.woff2") format("woff2"); font-weight: 400 700; font-display: swap; } */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--corps); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--vert-clair); text-decoration: none; } a:hover { text-decoration: underline; } .wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; } .skip { position: absolute; left: -9999px; top: 0; background: var(--vert); color: #ffffff; padding: .7rem 1.1rem; border-radius: 0 0 var(--r) 0; z-index: 100; } .skip:focus { left: 0; } /* ------------------------------------------------------------- En-tete */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ligne); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .7rem; padding-bottom: .7rem; } .brand img { height: 28px; width: auto; } .header-actions { display: flex; align-items: center; gap: .6rem; } /* -------------------------------------------------------------- Boutons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; background: var(--or); color: #ffffff; font-family: var(--titre); font-weight: 700; font-size: .95rem; padding: .72rem 1.35rem; border-radius: 10px; border: 2px solid transparent; transition: transform .12s ease, background .12s ease; text-align: center; } .btn:hover { background: #c2410c; text-decoration: none; transform: translateY(-1px); color: #ffffff; } .btn:active { transform: translateY(1px); } .btn-sm { font-size: .86rem; padding: .5rem 1rem; } .btn-line { background: transparent; color: var(--texte); border-color: #c2d4c7; } .btn-line:hover { background: rgba(21,128,61,.12); color: var(--texte); border-color: var(--vert); } .btn-bleu { background: var(--vert); color: #ffffff; } .btn-bleu:hover { background: var(--vert-clair); color: #ffffff; } .btn-wide { width: 100%; } /* --------------------------------------------------------------- Bandeau */ .hero { margin: 1.4rem 0 1.6rem; border-radius: 18px; overflow: hidden; position: relative; border: 1px solid var(--ligne); /* Le degrade reste en dessous : il sert de repli si l'image ne charge pas et garantit la lisibilite du texte sur la partie gauche. */ background-color: #ffffff; background-image: linear-gradient(100deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.34) 42%, rgba(255,255,255,.08) 74%, rgba(255,255,255,0) 100%), url("../img/hero-clair-1200.webp"); background-size: cover, cover; background-position: center, center right; background-repeat: no-repeat, no-repeat; } @media (min-width: 1280px) { .hero { background-image: linear-gradient(100deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.34) 42%, rgba(255,255,255,.08) 74%, rgba(255,255,255,0) 100%), url("../img/hero-clair-1920.webp"); } } @media (max-width: 760px) { .hero { background-image: linear-gradient(180deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.34) 52%, rgba(255,255,255,.06) 100%), url("../img/hero-clair-760.webp"); } } .hero-inner { padding: clamp(1.8rem, 4vw, 3.4rem); max-width: 720px; position: relative; z-index: 2; } .hero-logo { height: 34px; width: auto; margin-bottom: 1.1rem; } .hero h1 { font-family: var(--titre); font-weight: 800; letter-spacing: -.02em; font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.6rem); line-height: 1.04; margin: 0 0 .7rem; } .hero .accroche { font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); color: #33483a; margin: 0 0 1.4rem; } .hero .accroche strong { color: #0f1a12; } .hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1rem; } .hero-meta { font-size: .86rem; color: var(--texte-2); margin: 0; } .hero-chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ligne); border-top: 1px solid var(--ligne); } .hero-chiffres div { background: #ffffff; padding: 1rem 1.1rem; text-align: center; } .hero-chiffres b { display: block; font-family: var(--titre); font-weight: 800; color: #0f1a12; font-size: clamp(1.1rem, .9rem + .8vw, 1.5rem); line-height: 1.1; } .hero-chiffres span { font-size: .78rem; color: var(--texte-2); } @media (max-width: 720px) { .hero-chiffres { grid-template-columns: repeat(2, 1fr); } } /* --------------------------------------------------------- Mise en page */ .layout { display: grid; grid-template-columns: 260px 1fr; gap: 1.8rem; align-items: start; padding-bottom: 3rem; } @media (max-width: 980px) { .layout { grid-template-columns: 1fr; } } .rail { position: sticky; top: 74px; display: grid; gap: .5rem; } @media (max-width: 980px) { .rail { position: static; } } .rail-lien { display: flex; align-items: center; gap: .7rem; background: var(--fond-2); border: 1px solid var(--ligne); border-radius: 10px; padding: .8rem 1rem; color: var(--texte); font-weight: 600; font-size: .95rem; transition: border-color .12s ease, background .12s ease; } .rail-lien:hover { border-color: var(--vert); background: var(--fond-3); text-decoration: none; color: #0f1a12; } .rail-lien .ico { width: 20px; text-align: center; color: var(--or); flex-shrink: 0; } .rail-cta { margin-top: .4rem; } /* --------------------------------------------------- Navigation repliable */ .nav-repli { background: var(--fond-2); border: 1px solid var(--ligne); border-radius: var(--r); margin-bottom: 1.4rem; overflow: hidden; } .nav-repli > summary { list-style: none; cursor: pointer; padding: 1rem 1.2rem; font-family: var(--titre); font-weight: 700; color: var(--or); display: flex; align-items: center; justify-content: space-between; } .nav-repli > summary::-webkit-details-marker { display: none; } .nav-repli > summary::after { content: "\25BE"; color: var(--texte-2); font-size: .9rem; } .nav-repli[open] > summary::after { content: "\25B4"; } .nav-repli ol { margin: 0; padding: 0 1.2rem 1.1rem 2.4rem; columns: 2; column-gap: 1.6rem; color: var(--texte-2); } .nav-repli li { margin-bottom: .35rem; break-inside: avoid; } .nav-repli a { color: var(--texte); font-size: .93rem; } @media (max-width: 720px) { .nav-repli ol { columns: 1; } } /* ----------------------------------------------------------- Contenu */ .prose { min-width: 0; } .prose section { margin-bottom: 2.6rem; } .prose h2 { font-family: var(--titre); font-weight: 800; color: #0f1a12; letter-spacing: -.01em; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; margin: 0 0 .9rem; padding-bottom: .6rem; border-bottom: 2px solid var(--ligne); } .prose h3 { font-family: var(--titre); font-weight: 700; color: #0f1a12; font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); margin: 1.8rem 0 .6rem; } .prose h4 { font-family: var(--titre); font-weight: 700; color: var(--or); font-size: 1.02rem; margin: 1.4rem 0 .5rem; } .prose p { margin: 0 0 1rem; } .prose strong { color: #0f1a12; font-weight: 700; } .prose ul, .prose ol { margin: 0 0 1.1rem; padding-left: 1.3rem; } .prose li { margin-bottom: .5rem; } figure { margin: 1.5rem 0; } figure img { border-radius: var(--r); border: 1px solid var(--ligne); } figcaption { font-size: .86rem; color: var(--texte-2); text-align: center; margin-top: .6rem; font-style: italic; } /* ------------------------------------------------------------ Tableaux */ .table-wrap { overflow-x: auto; border: 1px solid var(--ligne); border-radius: var(--r); margin: 1.4rem 0; } table { width: 100%; border-collapse: collapse; font-size: .95rem; } caption { text-align: left; padding: .9rem 1.1rem; color: var(--texte-2); font-size: .86rem; border-bottom: 1px solid var(--ligne); } th, td { padding: .8rem 1.1rem; border-bottom: 1px solid var(--ligne); text-align: left; vertical-align: top; } thead th { background: var(--fond-3); color: #0f1a12; font-family: var(--titre); font-weight: 700; font-size: .88rem; } tbody th { color: #0f1a12; font-weight: 700; } tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; } tbody tr:nth-child(even) { background: rgba(236,243,238,.6); } /* -------------------------------------------------------------- Encadres */ .box { border: 1px solid var(--ligne); border-left: 4px solid var(--vert); background: var(--fond-2); border-radius: var(--r); padding: 1.1rem 1.3rem; margin: 1.5rem 0; } .box-vert { border-left-color: #14b8a6; } .box-ambre { border-left-color: #d97706; } .box-rouge { border-left-color: #dc2626; } .box .kicker { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vert-clair); margin: 0 0 .35rem; } .box-vert .kicker { color: #0f766e; } .box-ambre .kicker { color: #b45309; } .box-rouge .kicker { color: #b91c1c; } .box p { margin: 0 0 .6rem; } .box p:last-child { margin-bottom: 0; } /* ---------------------------------------------------------- Offre, note */ .offre { display: grid; grid-template-columns: 1fr auto; gap: 1.2rem; align-items: center; background: linear-gradient(135deg, var(--fond-2), var(--fond-3)); border: 1px solid var(--vert); border-radius: var(--r); padding: 1.3rem 1.5rem; margin: 1.6rem 0; } @media (max-width: 720px) { .offre { grid-template-columns: 1fr; } } .offre .lbl { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vert-clair); margin: 0 0 .3rem; } .offre .montant { font-family: var(--titre); font-weight: 800; color: #0f1a12; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.7rem); line-height: 1.15; margin: 0 0 .35rem; } .offre .detail { margin: 0; color: var(--texte-2); font-size: .92rem; } .note-globale { display: flex; align-items: center; gap: 1.2rem; border: 1px solid var(--ligne); background: var(--fond-2); border-radius: var(--r); padding: 1.2rem 1.4rem; margin: 0 0 1.5rem; } .note-globale .score { flex-shrink: 0; width: 5rem; height: 5rem; border-radius: 14px; background: linear-gradient(135deg, var(--vert), #166534); color: #ffffff; display: grid; place-items: center; font-family: var(--titre); font-weight: 800; line-height: 1; } .note-globale .score b { font-size: 1.7rem; display: block; } .note-globale .score span { font-size: .72rem; opacity: .9; } .note-globale p { margin: 0; } .note-globale .titre { display: block; font-family: var(--titre); font-weight: 700; color: #0f1a12; font-size: 1.05rem; margin-bottom: .2rem; } .critere { display: grid; grid-template-columns: 12rem 1fr auto; gap: .9rem; align-items: center; font-size: .93rem; margin-bottom: .55rem; } @media (max-width: 620px) { .critere { grid-template-columns: 1fr auto; } .critere .barre { grid-column: 1 / -1; } } .critere .nom { color: var(--texte-2); } .critere .barre { height: .55rem; border-radius: 999px; background: var(--fond-3); overflow: hidden; } .critere .barre i { display: block; height: 100%; background: linear-gradient(90deg, var(--vert), var(--vert-clair)); border-radius: 999px; } .critere .val { font-family: var(--titre); font-weight: 700; color: #0f1a12; font-size: .9rem; } /* --------------------------------------------------------- Pour / contre */ .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.4rem 0; } @media (max-width: 720px) { .duo { grid-template-columns: 1fr; } } .duo > div { background: var(--fond-2); border: 1px solid var(--ligne); border-radius: var(--r); padding: 1.1rem 1.3rem; } .duo h3 { margin-top: 0; font-size: 1.05rem; } .duo h3.pro { color: #0f766e; } .duo h3.con { color: #b91c1c; } .duo ul { margin-bottom: 0; } /* ---------------------------------------------------------------- Etapes */ ol.steps { counter-reset: etape; list-style: none; padding-left: 0; } ol.steps li { counter-increment: etape; position: relative; padding-left: 2.6rem; margin-bottom: .9rem; } ol.steps li::before { content: counter(etape); position: absolute; left: 0; top: .1rem; width: 1.8rem; height: 1.8rem; border-radius: 8px; background: var(--vert); color: #0f1a12; font-family: var(--titre); font-weight: 700; font-size: .85rem; display: grid; place-items: center; } /* ------------------------------------------------------------------- FAQ */ .faq details { background: var(--fond-2); border: 1px solid var(--ligne); border-radius: var(--r); margin-bottom: .7rem; overflow: hidden; } .faq summary { cursor: pointer; padding: 1rem 1.2rem; font-family: var(--titre); font-weight: 700; color: #0f1a12; font-size: 1rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--or); font-size: 1.4rem; line-height: 1; } .faq details[open] summary::after { content: "\2013"; } .faq details > div { padding: 0 1.2rem 1.1rem; border-top: 1px solid var(--ligne); padding-top: 1rem; } .faq details > div p { margin: 0; } /* -------------------------------------------------------------- Rappels */ .cta-row { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.5rem 0; } .final { background: linear-gradient(135deg, var(--fond-2), var(--fond-3)); border: 1px solid var(--ligne); border-radius: var(--r); padding: 1.6rem 1.8rem; margin: 2.4rem 0 0; } .final h2 { border-bottom: 0; padding-bottom: 0; } /* ------------------------------------------------------------ Divulgation */ .divulgation { font-size: .85rem; color: var(--texte-2); background: var(--fond-2); border: 1px solid var(--ligne); border-radius: var(--r); padding: .9rem 1.2rem; margin: 1.2rem 0; } .divulgation strong { color: var(--texte); } /* ----------------------------------------------------------- Pied de page */ .site-footer { background: #e6efe8; border-top: 1px solid var(--ligne); padding: 2.4rem 0 1.6rem; margin-top: 2rem; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; margin-bottom: 1.8rem; } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; } } .footer-grid img { margin-bottom: .8rem; height: 30px; width: auto; } .footer-grid p { color: var(--texte-2); font-size: .92rem; margin: 0; } .footer-titre { font-family: var(--titre); font-weight: 700; color: #0f1a12; margin: 0 0 .6rem; font-size: 1rem; } .footer-grid ul { list-style: none; margin: 0; padding: 0; } .footer-grid li { margin-bottom: .4rem; } .footer-grid a { color: var(--texte-2); font-size: .93rem; } .footer-grid a:hover { color: var(--texte); } .legal { border-top: 1px solid var(--ligne); padding-top: 1.2rem; font-size: .84rem; color: var(--texte-2); } .legal p { margin: 0 0 .7rem; } .age { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #dc2626; color: #0f1a12; font-family: var(--titre); font-weight: 700; font-size: .78rem; flex-shrink: 0; } /* -------------------------------------------------------- Barre collante */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; gap: .6rem; padding: .7rem 1rem; background: rgba(255,255,255,.97); border-top: 1px solid var(--ligne); backdrop-filter: blur(10px); } .sticky-cta .btn { flex: 1; } @media (max-width: 720px) { .sticky-cta { display: flex; } body { padding-bottom: 4.6rem; } } .crumbs { font-size: .85rem; color: var(--texte-2); padding: .9rem 0 0; } .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; } .crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--ligne); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } } /* --------------------------------------------------------- Grille de jeux */ .jeux-grille { display: grid; grid-template-columns: repeat(6, 1fr); gap: .8rem; margin: 1.5rem 0; } @media (max-width: 900px) { .jeux-grille { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 520px) { .jeux-grille { grid-template-columns: repeat(2, 1fr); } } .jeu { position: relative; display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--ligne); background: var(--fond-2); transition: transform .14s ease, border-color .14s ease; } .jeu:hover { transform: translateY(-3px); border-color: var(--vert); text-decoration: none; } .jeu img { width: 100%; height: auto; display: block; } .jeu .play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(21,35,26,.45); opacity: 0; transition: opacity .14s ease; } .jeu:hover .play, .jeu:focus-visible .play { opacity: 1; } .jeu .play span { width: 42px; height: 42px; border-radius: 50%; background: var(--vert); color: #0f1a12; display: grid; place-items: center; font-size: 1rem; font-weight: 700; padding-left: 3px; } .jeu .nom { display: block; padding: .5rem .6rem; font-size: .78rem; color: var(--texte-2); text-align: center; line-height: 1.25; } /* ------------------------------------------------- Bloc de transparence */ .eeat-debut { margin-top: 3rem; padding-top: 2.2rem; border-top: 3px solid var(--vert); } .eeat-debut::before { content: "À propos de cette page"; display: block; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vert-clair); margin-bottom: .8rem; } .auteur { display: flex; gap: 1.2rem; align-items: flex-start; border: 1px solid var(--ligne); border-left: 4px solid var(--vert); border-radius: var(--r); background: var(--fond-2); padding: 1.3rem 1.5rem; margin: 1.4rem 0; } .auteur-jeton { width: 4.2rem; height: 4.2rem; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--vert), #166534); color: #ffffff; display: grid; place-items: center; font-family: var(--titre); font-weight: 800; font-size: 1.3rem; } .auteur .nom { font-family: var(--titre); font-weight: 700; color: #0f1a12; font-size: 1.05rem; margin: 0 0 .1rem; } .auteur .role { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vert-clair); margin: 0 0 .6rem; } .auteur p { margin: 0 0 .6rem; font-size: .95rem; } .auteur p:last-child { margin-bottom: 0; } @media (max-width: 620px) { .auteur { flex-direction: column; } } /* ========================================================================== Carrousels : defilement horizontal par accrochage, sans JavaScript ========================================================================== */ .rang { margin: 2.2rem 0; } .rang-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; } .rang-tete h2 { margin: 0; border: 0; padding: 0; font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); } .rang-tete .indice { font-size: .82rem; color: var(--texte-2); white-space: nowrap; } .piste { display: grid; grid-auto-flow: column; gap: .8rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: .2rem; padding: .2rem .2rem 1rem; scrollbar-color: var(--vert) var(--fond-2); scrollbar-width: thin; } .piste::-webkit-scrollbar { height: 8px; } .piste::-webkit-scrollbar-track { background: var(--fond-3); border-radius: 999px; } .piste::-webkit-scrollbar-thumb { background: var(--vert); border-radius: 999px; } .piste > * { scroll-snap-align: start; } .piste-jeux > * { width: 236px; } .piste-pastilles > * { width: 200px; } .carte-jeu { position: relative; display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--ligne); background: var(--fond-2); transition: transform .14s ease, border-color .14s ease; } .carte-jeu:hover, .carte-jeu:focus-visible { transform: translateY(-3px); border-color: var(--vert); text-decoration: none; } .carte-jeu img { width: 100%; height: auto; display: block; } .carte-jeu .voile { position: absolute; left: 0; right: 0; top: 0; bottom: 3.1rem; display: grid; place-items: center; background: rgba(21,35,26,.45); opacity: 0; transition: opacity .14s ease; } .carte-jeu:hover .voile, .carte-jeu:focus-visible .voile { opacity: 1; } .carte-jeu .voile span { width: 46px; height: 46px; border-radius: 50%; background: var(--vert); color: #ffffff; display: grid; place-items: center; font-size: 1.05rem; padding-left: 3px; } .carte-jeu .titre-jeu { display: block; padding: .6rem .7rem; font-size: .84rem; color: var(--texte); font-family: var(--titre); font-weight: 700; text-align: center; line-height: 1.25; } .carte-jeu .editeur { display: block; padding: 0 .7rem .6rem; font-size: .74rem; color: var(--texte-2); text-align: center; } .pastille img { width: 100%; height: auto; border-radius: 12px; display: block; } /* ------------------------------------------------- Compte a rebours, offre */ .bandeau-offre { position: relative; overflow: hidden; border-radius: 16px; margin: 2.6rem 0; border: 1px solid var(--vert); background: linear-gradient(135deg, #f3faf5 0%, #e9f4ec 55%, #dff0e5 100%); padding: clamp(1.4rem, 3vw, 2.4rem); display: grid; grid-template-columns: 1.2fr .8fr; gap: 1.6rem; align-items: center; } @media (max-width: 800px) { .bandeau-offre { grid-template-columns: 1fr; } } .bandeau-offre h2 { border: 0; padding: 0; margin: 0 0 .6rem; } .bandeau-offre .mention { font-size: .78rem; color: var(--texte-2); margin: .9rem 0 0; } .bandeau-offre img { border-radius: 12px; border: 1px solid var(--ligne); } .chiffres-offre { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 0; padding: 0; list-style: none; } .chiffres-offre li { background: #ffffff; border: 1px solid var(--ligne); border-radius: 10px; padding: .55rem .9rem; font-size: .88rem; } .chiffres-offre b { color: #0f1a12; font-family: var(--titre); } /* ------------------------------------------------------- Note et confiance */ .bloc-note { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; background: var(--fond-2); border: 1px solid var(--ligne); border-radius: var(--r); padding: 1rem 1.3rem; margin: 1.4rem 0; } .etoiles { color: #ca8a04; font-size: 1.1rem; letter-spacing: .12em; } .bloc-note .detail-note { font-size: .9rem; color: var(--texte-2); margin: 0; } .bloc-note .detail-note b { color: #0f1a12; } .logos-confiance { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; margin: 1.2rem 0 0; } .logos-confiance a { color: var(--texte-2); font-size: .84rem; font-weight: 600; } .logos-confiance a:hover { color: var(--texte); } /* ------------------------------------------ Navigation et pages secondaires */ .site-nav { margin-left: auto; margin-right: .8rem; } .site-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 0; padding: 0; font-size: .9rem; } .site-nav a { color: var(--texte-2); font-weight: 600; } .site-nav a:hover, .site-nav a[aria-current="page"] { color: #0f1a12; text-decoration: none; } @media (max-width: 900px) { .site-nav { display: none; } } .eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vert-clair); margin: 0 0 .5rem; } .lede { font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); color: #33483a; max-width: 62ch; margin: 0 0 1rem; } .lede strong { color: #0f1a12; } .hero .wrap { padding-top: 2.2rem; padding-bottom: 2.2rem; } /* ------------------------------------------- Ajustements propres au fond clair */ .site-header { box-shadow: 0 1px 3px rgba(21,35,26,.06); } .hero { box-shadow: 0 2px 18px rgba(21,35,26,.07); } .carte-jeu, .pastille img, .box, .offre, .bandeau-offre, .bloc-note, .auteur, .final { box-shadow: 0 1px 3px rgba(21,35,26,.05); } .carte-jeu:hover { box-shadow: 0 6px 20px rgba(21,128,61,.14); } table { background: #ffffff; } thead th { background: var(--fond-3); } tbody tr:nth-child(even) { background: #fafcfa; } .site-footer { background: var(--fond-2); border-top: 1px solid var(--ligne); } .etoiles { color: #ca8a04; } .auteur-jeton { color: #ffffff; } .eyebrow { color: var(--vert); } .lede { color: #33483a; } ::selection { background: rgba(21,128,61,.18); }