/* Polices hébergées sur le site (sous-ensemble latin) — Bricolage Grotesque et Figtree, licence SIL OFL */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/figtree-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/figtree.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Jolie Pelouse — feuille de style
   ========================================================================== */

:root {
    --fond: #F4F7EF;
    --blanc: #FFFFFF;
    --encre: #15241A;
    --doux: #4A5A4E;
    --trait: #DCE5D3;
    --foret: #1D4A2B;
    --foret-2: #2E6B3E;
    --foret-3: #24563A;
    --tilleul: #C8EE6A;
    --feuille: #DDEFC6;
    --vert-pale: #E8F0DE;
    --ambre: #F2A33A;
    --ambre-pale: #FCE9C9;
    --ambre-fonce: #7A4A0E;
    --rayon: 24px;
    --titres: 'Bricolage Grotesque', system-ui, sans-serif;
    --texte: Figtree, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--encre);
    font-family: var(--texte);
    font-size: 18px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--foret); }
a:hover { color: var(--foret-2); }
h1, h2, h3 { font-family: var(--titres); letter-spacing: -0.02em; line-height: 1.1; font-weight: 800; }
h1 { font-size: clamp(36px, 5vw, 58px); margin: 16px 0; }
:focus-visible { outline: 3px solid var(--ambre); outline-offset: 2px; border-radius: 4px; }

.conteneur { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.section { padding-top: 80px; padding-bottom: 24px; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-evitement { position: absolute; left: -9999px; }
.lien-evitement:focus { left: 16px; top: 16px; z-index: 10; background: var(--blanc); padding: 8px 16px; border-radius: 8px; }
.icone { flex-shrink: 0; }
.frise { display: block; width: 100%; height: 56px; position: absolute; left: 0; right: 0; bottom: -1px; }

/* Boutons, pastilles ------------------------------------------------------ */

.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 13px 22px; border-radius: 14px; border: 1px solid transparent;
    font: inherit; font-weight: 700; font-size: 17px; line-height: 1.2; text-decoration: none; cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}
.bouton:hover { filter: brightness(1.06); }
.bouton:active { transform: translateY(1px); }
.bouton-foret { background: var(--foret); color: var(--blanc); }
.bouton-foret:hover { color: var(--blanc); }
.bouton-foret .icone { color: var(--tilleul); }
.bouton-clair { background: var(--blanc); color: var(--encre); border-color: var(--trait); }
.bouton-amazon { background: var(--ambre); color: var(--encre); font-weight: 800; }
.bouton-amazon:hover { color: var(--encre); }
.bouton-tilleul { background: var(--tilleul); color: var(--encre); font-weight: 800; }
.bouton-tilleul:hover { color: var(--encre); }
.bouton-petit { min-height: 44px; padding: 10px 14px; font-size: 15px; white-space: nowrap; }
.boutons { display: flex; flex-wrap: wrap; gap: 12px; }

.pastille {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    background: var(--feuille); color: var(--foret); font-weight: 700; font-size: 13px; line-height: 1.4;
    padding: 4px 12px; border-radius: 999px;
}
.pastille-icone { font-size: 14px; padding: 6px 14px; margin: 0; }
.pastille-vive { background: var(--tilleul); color: var(--encre); }
.pastille-problemes { background: var(--ambre-pale); color: var(--ambre-fonce); }

.surtitre { margin: 0; font-weight: 700; font-size: 15px; color: var(--foret-2); text-transform: uppercase; letter-spacing: .08em; }
.surtitre-tilleul { color: var(--tilleul); }
.titre-section { font-size: clamp(30px, 4vw, 44px); margin: 8px 0 10px; }
.intro-section { color: var(--doux); font-size: 19px; margin: 0 0 32px; }
.titre-avec-lien { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 32px; }
.titre-avec-lien .intro-section { margin: 0; }
.lien-fleche { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; }
.lien-tilleul, .lien-tilleul:hover { color: var(--tilleul); }
.chapo { font-size: 20px; color: var(--doux); max-width: 760px; margin: 0 0 22px; }

/* En-tête ----------------------------------------------------------------- */

.entete { border-bottom: 1px solid var(--trait); background: var(--fond); position: relative; z-index: 5; }
.entete-interieur { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre); font-family: var(--titres); font-weight: 800; font-size: 23px; letter-spacing: -0.03em; }
.logo:hover { color: var(--encre); }
.logo-clair, .logo-clair:hover { color: var(--blanc); }
.menu { font-weight: 600; font-size: 16px; }
.menu-liste { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.menu-item { position: relative; }
.menu-tete { display: flex; align-items: center; gap: 2px; }
.menu-lien { text-decoration: none; color: var(--encre); padding: 6px 0; }
.menu-lien:hover, .menu-lien[aria-current] { color: var(--foret); box-shadow: inset 0 -3px 0 var(--tilleul); }
.menu-ouvrir { width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--encre); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.menu-ouvrir:hover { background: var(--vert-pale); }
.menu-ouvrir .icone { transition: transform .2s ease; }
.menu-item.ouvert .menu-ouvrir .icone { transform: rotate(180deg); }
.sous-menu { display: none; position: absolute; top: calc(100% + 12px); left: -18px; z-index: 20; min-width: 290px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 20px; padding: 14px 12px 12px; box-shadow: 0 24px 50px -24px rgba(21, 36, 26, .45); }
.sous-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.menu-item:hover .sous-menu, .menu-item:focus-within .sous-menu, .menu-item.ouvert .sous-menu { display: block; }
.menu-item-large .sous-menu { left: auto; right: -110px; min-width: 560px; }
.sous-menu-groupes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.menu-item-large .sous-menu-groupes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sous-menu-titre { margin: 0 0 4px 10px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); }
.sous-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sous-menu ul a { display: block; padding: 7px 10px; border-radius: 10px; text-decoration: none; color: var(--encre); font-weight: 600; font-size: 15px; line-height: 1.35; }
.sous-menu ul a:hover, .sous-menu ul a[aria-current] { background: var(--vert-pale); color: var(--foret); }
.sous-menu-tout { display: block; margin: 10px 2px 0; padding: 10px 8px 2px; border-top: 1px solid var(--trait); font-size: 14px; font-weight: 700; color: var(--foret); text-decoration: none; }
.sous-menu-tout:hover { color: var(--foret-2); }
.bouton-menu { display: none; width: 48px; height: 48px; border-radius: 24px; border: 1px solid var(--trait); background: var(--blanc); color: var(--encre); align-items: center; justify-content: center; cursor: pointer; }

/* Cartes ------------------------------------------------------------------ */

.carte {
    background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon);
    text-decoration: none; color: var(--encre); overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.carte:hover { color: var(--encre); transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(21, 36, 26, .35); }
.carte-statique { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); }
.carte-titre { font-family: var(--titres); font-weight: 800; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; }
.carte-texte { color: var(--doux); font-size: 16px; line-height: 1.55; }
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }

.carte-article { display: flex; flex-direction: column; }
.carte-article img, .carte-illustration { width: 100%; height: 190px; object-fit: cover; }
.carte-illustration { display: flex; align-items: center; justify-content: center; }
.carte-corps { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 24px; }
.carte-large .carte-titre { font-size: 24px; }

.rubrique-creer, .rubrique-entretenir, .rubrique-materiel { background: var(--feuille); color: var(--foret); }
.rubrique-problemes { background: var(--ambre-pale); color: var(--ambre-fonce); }

/* Accueil ----------------------------------------------------------------- */

.accueil-hero { position: relative; overflow: hidden; padding-top: 56px; }
.accueil-hero-grille { display: flex; flex-wrap: wrap; gap: 48px; align-items: stretch; }
.accueil-hero-texte { flex: 1 1 460px; min-width: 0; padding-bottom: 96px; }
.accueil-hero h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.02; margin: 20px 0; }
.surligne { background: linear-gradient(transparent 62%, var(--tilleul) 62%); }
.accueil-hero-visuel { flex: 1 1 420px; min-width: 0; position: relative; min-height: 440px; }
.accueil-hero-visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 32px 32px 0 0; }
.hero-bulle {
    position: absolute; left: -24px; bottom: 96px; max-width: 300px;
    display: flex; gap: 14px; align-items: center; padding: 16px 18px;
    background: var(--blanc); border-radius: 18px; box-shadow: 0 16px 40px -18px rgba(21, 36, 26, .45);
    text-decoration: none; color: var(--encre); line-height: 1.35;
}
.hero-bulle:hover { color: var(--encre); }
.hero-bulle-icone { width: 48px; height: 48px; border-radius: 14px; background: var(--foret); color: var(--tilleul); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hero-bulle-etiquette { display: block; font-size: 13px; color: var(--doux); font-weight: 600; }
.hero-bulle-titre { display: block; font-weight: 700; }

.bande-foret { background: var(--foret); color: var(--blanc); padding: 56px 0 64px; }
.bande-foret .titre-section { color: var(--blanc); }
.bande-mois { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: start; }
.texte-doux { color: #D3E2D2; }
.taches { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.tache { display: flex; gap: 14px; padding: 20px; background: var(--foret-3); border-color: var(--foret-3); color: var(--blanc); line-height: 1.45; }
.tache:hover { color: var(--blanc); }
.tache strong { display: block; font-size: 17px; }
.tache span span { color: #D3E2D2; font-size: 15px; }
.tache-coche { width: 30px; height: 30px; border-radius: 15px; background: var(--tilleul); color: var(--foret); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.grille-rubriques { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.carte-rubrique { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.carte-rubrique .carte-titre { font-size: 24px; }
.carte-rubrique-icone { width: 64px; height: 64px; border-radius: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.carte-lien { margin-top: auto; font-weight: 700; color: var(--foret-2); font-size: 15px; }

.diagnostic { background: var(--blanc); border: 1px solid var(--trait); border-radius: 32px; padding: 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; }
.diagnostic .intro-section { margin: 0; }
.diagnostic-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.symptome { padding: 18px; background: #FBFCF8; display: flex; flex-direction: column; line-height: 1.4; }
.symptome svg { width: 100%; height: 56px; margin-bottom: 10px; }
.symptome span { font-size: 14px; color: var(--doux); }

.grille-populaires { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grille-populaires .carte-large { grid-row: span 4; }
.grille-populaires .carte-large img { height: 340px; }
.grille-populaires .carte-large .carte-titre { font-size: 30px; }
.carte-horizontale { flex-direction: row; }
.carte-horizontale img, .carte-horizontale .carte-illustration { width: 150px; height: auto; min-height: 110px; flex-shrink: 0; }
.carte-horizontale .carte-titre { font-size: 20px; }
.carte-horizontale .carte-corps { padding: 18px 20px; justify-content: center; }

.bande-verte { background: var(--vert-pale); padding: 80px 0; margin-top: 64px; }
.engagements { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 32px; padding-bottom: 88px; }
.engagements .titre-section { font-size: 34px; margin: 0; }
.engagement { display: flex; gap: 14px; }
.engagement p { margin: 4px 0 0; color: var(--doux); font-size: 16px; }
.engagement-icone { width: 44px; height: 44px; border-radius: 14px; background: var(--feuille); color: var(--foret); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Rubrique, calendrier, pages simples --------------------------------------- */

.rubrique-entete { position: relative; padding: 40px 0 88px; }
.rubrique-titre { display: flex; align-items: center; gap: 18px; }
.rubrique-titre h1 { color: var(--encre); }
.rubrique-entete .chapo { color: var(--encre); opacity: .8; }
.rubrique-entete .carte-rubrique-icone { background: var(--blanc); }

.mois-navigation { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.mois-navigation a { padding: 8px 14px; border-radius: 999px; background: var(--blanc); border: 1px solid var(--trait); text-decoration: none; font-weight: 700; font-size: 15px; text-transform: capitalize; }
.mois-navigation a[aria-current] { background: var(--foret); color: var(--blanc); border-color: var(--foret); }
.calendrier { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
.mois { padding: 26px 28px; scroll-margin-top: 24px; }
.mois h2 { font-size: 24px; margin: 4px 0 8px; }
.mois p { margin: 0 0 12px; color: var(--doux); font-size: 16px; }
.mois-nom { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--foret-2) !important; text-transform: uppercase; letter-spacing: .06em; font-size: 14px !important; }
.mois-courant { border: 2px solid var(--foret); }
.mois-taches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.5; }
.mois-taches li { display: flex; gap: 10px; }
.mois-taches .icone { color: var(--foret-2); margin-top: 3px; }

.rubrique-texte { margin-top: 56px; color: var(--doux); }
.page-simple { padding-top: 40px; padding-bottom: 88px; }
.page-simple .prose { max-width: 760px; }
.page-404 .grille-rubriques { margin-top: 32px; }

/* Article ----------------------------------------------------------------- */

.article-entete { padding-top: 40px; }
.article-entete h1 { max-width: 900px; }
.fil-ariane { display: flex; flex-wrap: wrap; gap: 8px; font-size: 15px; color: var(--doux); }
.fil-ariane a { text-decoration: none; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; font-size: 15px; color: var(--doux); margin: 0; }
.article-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.article-meta .icone { color: var(--foret-2); }
.mention-affiliation { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--doux); margin: 16px 0 0; max-width: 760px; line-height: 1.5; }
.article-image { width: 100%; height: 420px; object-fit: cover; border-radius: 28px; margin-top: 32px; }
.article-bandeau { position: relative; overflow: hidden; height: 260px; border-radius: 28px; margin-top: 32px; display: flex; align-items: center; justify-content: center; padding-bottom: 40px; }
.article-bandeau .frise { height: 64px; }

.article-grille { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; padding-top: 48px; padding-bottom: 40px; }
.sommaire { flex: 1 1 240px; max-width: 300px; min-width: 0; background: var(--blanc); border: 1px solid var(--trait); border-radius: 20px; padding: 22px; font-size: 16px; line-height: 1.45; position: sticky; top: 20px; }
.sommaire-titre { font-family: var(--titres); font-weight: 800; font-size: 19px; margin: 0 0 12px; }
.sommaire nav { display: flex; flex-direction: column; gap: 10px; }
.sommaire a { text-decoration: none; color: var(--doux); padding-left: 15px; border-left: 3px solid transparent; }
.sommaire a:hover { color: var(--foret); border-left-color: var(--tilleul); }
.article-large .prose { max-width: none; }
.article-large .prose > p, .article-large .prose > h2, .article-large .faq { max-width: 860px; }
.prose { flex: 999 1 560px; min-width: 0; max-width: 760px; }
.prose > p, .prose li { margin: 0 0 18px; }
.prose h2 { font-size: 32px; margin: 52px 0 16px; scroll-margin-top: 24px; }
.prose h3 { font-size: 23px; margin: 32px 0 10px; }
.prose ul, .prose ol { padding-left: 24px; margin: 0 0 22px; }
.prose li { margin-bottom: 8px; }
.prose a:not(.bouton) { text-decoration-color: var(--tilleul); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.prose figure { margin: 28px 0 32px; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 24px; }
.prose figcaption { font-size: 15px; color: var(--doux); margin-top: 10px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.prose th, .prose td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.prose thead th { background: var(--vert-pale); color: var(--foret); font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.prose > .tableau-simple { background: var(--blanc); border: 1px solid var(--trait); border-radius: 20px; overflow-x: auto; margin: 0 0 28px; }

.essentiel { background: var(--foret); color: var(--blanc); border-radius: var(--rayon); padding: 28px 30px; margin-bottom: 40px; }
.essentiel-titre { font-family: var(--titres); font-weight: 800; font-size: 22px; color: var(--tilleul); margin: 0 0 12px; }
.essentiel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 17px; line-height: 1.5; }
.essentiel li { display: flex; gap: 12px; margin: 0; }
.essentiel .icone { color: var(--tilleul); margin-top: 2px; stroke-width: 3; }
.essentiel a { color: var(--tilleul); }

.encadre { display: flex; gap: 16px; border-radius: 20px; padding: 22px 24px; margin: 28px 0; font-size: 17px; line-height: 1.6; }
.encadre p { margin: 0; }
.encadre-titre { font-family: var(--titres); font-weight: 800; font-size: 19px; }
.encadre-icone { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.encadre-astuce { background: var(--vert-pale); }
.encadre-astuce .encadre-icone { background: var(--foret); color: var(--tilleul); }
.encadre-attention { background: #FDF1E0; }
.encadre-attention .encadre-icone { background: #9A5B0B; color: var(--blanc); }
.encadre-info { background: var(--blanc); border: 1px solid var(--trait); }
.encadre-info .encadre-icone { background: var(--feuille); color: var(--foret); }

.etapes { list-style: none; padding: 0 !important; margin: 28px 0 32px; display: flex; flex-direction: column; gap: 14px; counter-reset: none; }
.etapes li { display: flex; gap: 18px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 20px; padding: 20px 22px; margin: 0; }
.etapes p { margin: 0; font-size: 17px; }
.etape-numero { width: 40px; height: 40px; border-radius: 20px; background: var(--tilleul); color: var(--foret); font-family: var(--titres); font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.etape-titre { font-weight: 800; font-size: 18px !important; }

.saisons { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 24px 0 32px; font-size: 16px; line-height: 1.45; }
.saison { background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; padding: 18px; }
.saison p { margin: 0; }
.saison-nom { font-family: var(--titres); font-weight: 800; font-size: 20px; margin-bottom: 6px !important; }
.saison-detail { color: var(--doux); }
.saison-printemps .saison-nom { color: var(--foret-2); }
.saison-ete .saison-nom { color: #9A5B0B; }
.saison-automne .saison-nom { color: #8A4B1E; }
.saison-hiver .saison-nom { color: #31597A; }

.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details { background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; padding: 18px 22px; }
.faq summary { font-weight: 700; font-size: 18px; display: flex; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq-signe::before { content: '+'; color: var(--foret-2); font-size: 22px; line-height: 1; }
.faq details[open] .faq-signe::before { content: '–'; }
.faq details p { margin: 10px 0 0; color: var(--doux); font-size: 17px; }

/* Produits et comparatifs ----------------------------------------------------- */

.produit { background: var(--blanc); border: 2px solid var(--foret); border-radius: var(--rayon); overflow: hidden; margin: 28px 0; }
.produit-bandeau { background: var(--foret); color: var(--tilleul); font-weight: 700; font-size: 14px; padding: 8px 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.produit-affilie { color: #D3E2D2; font-weight: 500; }
.produit-corps { padding: 24px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.produit-visuel { flex: 0 0 120px; height: 120px; border-radius: 18px; background: var(--feuille); color: var(--foret); display: flex; align-items: center; justify-content: center; }
.produit-texte { flex: 1 1 280px; min-width: 0; }
.produit-texte p { margin: 0; }
.produit-nom { font-family: var(--titres); font-weight: 800; font-size: 23px; line-height: 1.2; }
.produit-resume { color: var(--doux); font-size: 16px; margin-top: 6px !important; }
.produit-points { list-style: none; margin: 12px 0 0 !important; padding: 0 !important; font-size: 16px; line-height: 1.5; display: flex; flex-direction: column; gap: 6px; }
.produit-points li { display: flex; gap: 10px; margin: 0; }
.produit-points .plus .icone { color: var(--foret-2); margin-top: 3px; stroke-width: 3; }
.produit-points .moins .icone { color: #9A5B0B; margin-top: 3px; stroke-width: 3; }

.tableau-defilant { overflow-x: auto; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); margin: 24px 0 32px; }
.comparatif { min-width: 760px; }
.comparatif td { vertical-align: middle; }

.choix-rapide { background: var(--foret); color: var(--blanc); border-radius: 32px; padding: 36px; margin: 8px 0 40px; }
.choix-rapide .surtitre { color: var(--tilleul); }
.choix-question { font-family: var(--titres); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; font-size: 30px; margin: 8px 0 20px !important; color: var(--blanc); }
.choix-options { display: flex; flex-wrap: wrap; gap: 10px; }
.choix-options button {
    min-height: 44px; padding: 10px 18px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer;
    background: transparent; color: var(--blanc); border: 2px solid #4F7D5C;
}
.choix-options button[aria-pressed="true"] { background: var(--tilleul); border-color: var(--tilleul); color: var(--encre); }
.choix-resultat { margin-top: 22px; background: var(--foret-3); border-radius: 22px; padding: 24px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.choix-resultat[hidden] { display: none; }
.choix-icone { width: 68px; height: 68px; border-radius: 20px; background: var(--tilleul); color: var(--foret); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.choix-texte { flex: 1 1 300px; min-width: 0; }
.choix-texte p { margin: 0; color: #D3E2D2; font-size: 17px; }
.choix-etiquette { font-size: 14px !important; font-weight: 600; }
.prose .choix-titre { font-family: var(--titres); font-weight: 800; font-size: 24px; color: var(--blanc); line-height: 1.2; }

/* Récapitulatif matériel ------------------------------------------------------- */

.materiel-guide { background: var(--vert-pale); border-radius: var(--rayon); padding: 28px 30px; margin: 48px 0 8px; }
.prose .materiel-guide h2 { margin: 0 0 6px; font-size: 28px; }
.materiel-intro { margin: 0 0 18px !important; color: var(--doux); font-size: 16px; }
.materiel-intro span { font-size: 14px; }
.materiel-liste { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 10px; }
.materiel-liste li { display: flex; align-items: center; gap: 16px; background: var(--blanc); border-radius: 18px; padding: 14px 16px; margin: 0; flex-wrap: wrap; }
.materiel-icone { width: 52px; height: 52px; border-radius: 14px; background: var(--feuille); color: var(--foret); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.materiel-texte { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.materiel-texte strong { font-size: 17px; }
.materiel-texte span { font-size: 15px; color: var(--doux); }

/* Comparateurs ----------------------------------------------------------------- */

.comparateur { margin: 8px 0 40px; }
.comparateur-outils { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.comparateur-filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.comparateur-filtres button { min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--trait); background: var(--blanc); color: var(--encre); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.comparateur-filtres button[aria-pressed="true"] { background: var(--foret); border-color: var(--foret); color: var(--blanc); }
.comparateur-tri { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.comparateur-tri select { min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--trait); background: var(--blanc); font: inherit; font-size: 15px; color: var(--encre); }
.comparateur-tableau th[scope="row"] { font-weight: 700; }
.comparateur-tableau th[scope="row"] a { text-decoration: none; }
.comparateur-tableau .prix { font-weight: 800; white-space: nowrap; color: var(--foret); }
.comparateur [hidden] { display: none !important; }
.comparateur-note { display: flex; gap: 8px; align-items: flex-start; font-size: 14px !important; color: var(--doux); margin: -16px 0 32px !important; line-height: 1.5; }
.comparateur-fiches { display: flex; flex-direction: column; gap: 20px; }
.fiche { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 24px 26px; scroll-margin-top: 20px; }
.fiche-entete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; align-items: flex-start; margin-bottom: 14px; }
.fiche-sortie { display: inline-block; margin-left: 6px; font-size: 13px; color: var(--doux); font-weight: 600; }
.prose .fiche h3 { margin: 8px 0 0; font-size: 26px; }
.fiche-prix { margin: 0 !important; text-align: right; font-family: var(--titres); font-weight: 800; font-size: 24px; color: var(--foret); line-height: 1.2; }
.fiche-prix span { display: block; font-family: var(--texte); font-weight: 600; font-size: 13px; color: var(--doux); }
.fiche-carac { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 16px; }
.fiche-carac div { background: var(--fond); border-radius: 14px; padding: 10px 14px; }
.fiche-carac dt { font-size: 13px; color: var(--doux); font-weight: 600; }
.fiche-carac dd { margin: 2px 0 0; font-weight: 700; font-size: 16px; line-height: 1.35; }
.fiche-pour { font-size: 17px; margin: 0 0 16px !important; }
.fiche-avis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.fiche-avis > div { border-radius: 16px; padding: 14px 18px; font-size: 16px; line-height: 1.45; }
.fiche-avis p { margin: 0 0 6px !important; font-weight: 800; }
.fiche-avis ul { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 6px; }
.fiche-avis li { display: flex; gap: 8px; margin: 0; }
.fiche-plus { background: #EFF6E6; }
.fiche-plus p { color: var(--foret); }
.fiche-plus .icone { color: var(--foret-2); margin-top: 3px; stroke-width: 3; }
.fiche-moins { background: #FDF1E0; }
.fiche-moins p { color: var(--ambre-fonce); }
.fiche-moins .icone { color: #9A5B0B; margin-top: 3px; stroke-width: 3; }
.fiche-note { font-size: 14px !important; color: var(--doux); margin: 0 0 14px !important; }
.fiche-liens { display: flex; flex-wrap: wrap; gap: 10px; }
.comparateur-methode { font-size: 15px !important; color: var(--doux); background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; padding: 16px 20px; margin-top: 28px !important; }

/* Pied de page, cookies -------------------------------------------------------- */

.pied { background: var(--encre); color: #C9D6CB; padding: 64px 0 40px; font-size: 15px; margin-top: 40px; }
.pied-interieur { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; }
.pied-marque { flex: 1 1 280px; max-width: 380px; }
.pied-marque p { margin: 14px 0 0; }
.pied-colonne { display: flex; flex-direction: column; gap: 8px; }
.pied-colonne a, .lien-bouton { color: #C9D6CB; text-decoration: none; }
.pied-colonne a:hover, .lien-bouton:hover { color: var(--tilleul); }
.pied-titre { color: var(--blanc); font-weight: 700; margin: 0 0 4px; }
.lien-bouton { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }
.pied-affiliation { margin-top: 40px; padding-top: 24px; border-top: 1px solid #2C3D31; font-size: 14px; color: #A9B8AC; }

.cookies {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 20; max-width: 560px; margin: 0 auto;
    background: var(--blanc); border: 1px solid var(--trait); border-radius: 20px; padding: 20px 22px;
    box-shadow: 0 20px 50px -20px rgba(21, 36, 26, .5); font-size: 16px; line-height: 1.5;
}
.cookies[hidden] { display: none; }
.cookies p { margin: 0 0 14px; }
.cookies-boutons { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* Mobile ------------------------------------------------------------------------ */

@media (max-width: 900px) {
    .bande-mois, .diagnostic { grid-template-columns: minmax(0, 1fr); }
    .grille-populaires { grid-template-columns: minmax(0, 1fr); }
    .grille-populaires .carte-large { grid-row: auto; }
    .sommaire { position: static; max-width: none; }
}

@media (max-width: 760px) {
    body { font-size: 17px; }
    .conteneur { padding-left: 16px; padding-right: 16px; }
    .article-entete, .page-simple { padding-top: 24px; }
    .article-grille { padding-top: 32px; }
    .section { padding-top: 56px; }
    .bouton-menu { display: inline-flex; }
    .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--fond); border-bottom: 1px solid var(--trait); padding: 4px 16px 16px; max-height: calc(100vh - 76px); overflow-y: auto; box-shadow: 0 24px 40px -30px rgba(21, 36, 26, .5); }
    .menu.ouvert { display: block; }
    .menu-liste { flex-direction: column; gap: 0; }
    .menu-item { border-bottom: 1px solid var(--trait); }
    .menu-tete { justify-content: space-between; }
    .menu-lien { padding: 13px 0; flex: 1; }
    .menu-lien:hover, .menu-lien[aria-current] { box-shadow: none; }
    .menu-ouvrir { width: 44px; height: 44px; }
    .menu-item:hover .sous-menu, .menu-item:focus-within .sous-menu { display: none; }
    .sous-menu, .menu-item-large .sous-menu { position: static; min-width: 0; border: 0; border-radius: 0; box-shadow: none; padding: 0 0 12px; background: none; }
    .sous-menu::before { display: none; }
    .menu-item.ouvert .sous-menu { display: block; }
    .menu-item-large .sous-menu-groupes { grid-template-columns: minmax(0, 1fr); }
    .sous-menu ul a { padding: 10px 12px; }
    .accueil-hero { padding-top: 32px; }
    .accueil-hero-texte { padding-bottom: 0; }
    .accueil-hero-visuel { min-height: 300px; margin-bottom: 40px; }
    .hero-bulle { left: 12px; right: 12px; bottom: 24px; max-width: none; }
    .diagnostic { padding: 28px 20px; }
    .article-image { height: 240px; border-radius: 20px; }
    .article-bandeau { height: 180px; }
    .prose h2 { font-size: 27px; }
    .choix-rapide { padding: 24px 20px; }
    .carte-horizontale img, .carte-horizontale .carte-illustration { width: 110px; }
}