/* Filtrer mon eau — look propre au site : clair, aéré, eau fraîche (aqua, menthe, blanc).
   Règles du site : jamais de bordure colorée d'un seul côté d'un bloc, pas de rangées de cartes à flèche. */
:root {
  --fond: #fbfefe;
  --texte: #10303a;
  --texte-2: #4b6872;
  --surface: #eef8f8;
  --surface-2: #f2faf6;
  --filet: #d6eaeb;
  --accent: #0b7285;
  --accent-fonce: #075766;
  --menthe: #2fae97;
  --menthe-pale: #dcf4ee;
  --sable: #fff8ec;
  --sable-filet: #f1dfbd;
  --sur-accent: #ffffff;
  --ombre: 0 1px 2px rgba(16, 48, 58, .05), 0 8px 24px rgba(16, 48, 58, .06);
  --rayon: 18px;
  --rayon-petit: 10px;
  --colonne: 740px;
  --large: 1160px;
  --police: "Manrope Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --titres: "Outfit Variable", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 17.5px/1.7 var(--police); font-feature-settings: "ss01"; }
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-fonce); }
:focus-visible { outline: 3px solid var(--menthe); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--titres); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; color: var(--texte); font-optical-sizing: auto; }
h1 { font-size: clamp(2rem, 4.6vw, 3rem); margin: .2em 0 .35em; }
h2 { font-size: clamp(1.5rem, 3vw, 1.95rem); margin: 2.2em 0 .6em; }
h3 { font-size: 1.25rem; margin: 1.6em 0 .4em; }
.cadre { width: 100%; max-width: var(--large); margin: 0 auto; padding: 0 16px; }
.aller-contenu { position: absolute; left: -999px; }
.aller-contenu:focus { left: 16px; top: 8px; z-index: 10; background: #fff; padding: 8px 12px; }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 5; background: rgba(251, 254, 254, .9); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--filet); }
.entete-cadre { display: flex; align-items: center; justify-content: space-between; min-height: 66px; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--titres); font-weight: 600; font-size: 1.25rem; text-decoration: none; color: var(--texte); }
.menu-large { display: none; gap: 6px; }
.menu-large a { padding: 8px 14px; border-radius: 999px; text-decoration: none; color: var(--texte); font-weight: 600; font-size: .95rem; }
.menu-large a:hover, .menu-large a[aria-current] { background: var(--surface); color: var(--accent-fonce); }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--filet); border-radius: 999px; font-weight: 600; font-size: .95rem; }
.menu summary::-webkit-details-marker { display: none; }
.menu-icone, .menu-icone::before, .menu-icone::after { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
.menu-icone::before, .menu-icone::after { content: ""; position: absolute; left: 0; }
.menu-icone::before { top: -5px; } .menu-icone::after { top: 5px; }
.menu nav { position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--filet); border-radius: var(--rayon-petit); box-shadow: var(--ombre); padding: 8px; min-width: 230px; display: grid; }
.menu nav a { padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--texte); font-weight: 600; }
.menu nav a:hover, .menu nav a[aria-current] { background: var(--surface); }
@media (min-width: 900px) { .menu-large { display: flex; } .menu { display: none; } }

/* Fil d'Ariane et tête de page */
.ariane { font-size: .88rem; color: var(--texte-2); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 6px; }
.ariane a { color: var(--texte-2); }
.ariane-sep { color: var(--filet); }
.page-tete { max-width: calc(var(--colonne) + 32px); }
.page-meta { color: var(--texte-2); font-size: .92rem; margin: 0; }
.page-mention { color: var(--texte-2); font-size: .85rem; margin: .3em 0 0; }

/* Colonne de lecture */
.article { max-width: calc(var(--colonne) + 32px); padding-bottom: 56px; }
.texte p, .texte li { max-width: var(--colonne); }
.texte ul, .texte ol { padding-left: 1.2em; }
.texte li { margin: .35em 0; }
.texte li::marker { color: var(--menthe); }
.texte strong { font-weight: 700; }
.chapo { font-size: 1.12rem; color: var(--texte-2); }
.source { font-size: .88rem; color: var(--texte-2); }

/* Blocs */
.en-bref { background: linear-gradient(135deg, var(--surface) 0%, var(--menthe-pale) 100%); border-radius: var(--rayon); padding: 22px 24px; margin: 24px 0; }
.en-bref-titre, .sommaire-titre, .avant-lire-titre, .a-lire-titre { font-weight: 800; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-fonce); margin: 0 0 .5em; display: flex; align-items: center; gap: 8px; }
.en-bref p { margin: .4em 0; }
.en-bref-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 14px !important; }
.lien-discret { font-weight: 600; font-size: .95rem; }
.avant-lire { background: var(--sable); border: 1px solid var(--sable-filet); border-radius: var(--rayon); padding: 20px 24px; margin: 24px 0; }
.avant-lire-titre { color: #8a5a12; }
.avant-lire p { margin: .4em 0; }
.sommaire { border: 1px solid var(--filet); border-radius: var(--rayon); padding: 18px 24px; margin: 28px 0; background: #fff; }
.sommaire ol { margin: 0; padding-left: 1.2em; columns: 2 220px; column-gap: 32px; }
.sommaire li { margin: .25em 0; break-inside: avoid; }
.sommaire a { text-decoration: none; }
.sommaire a:hover { text-decoration: underline; }
.encart { background: var(--surface-2); border-radius: var(--rayon); padding: 18px 24px; margin: 24px 0; }
.encart p:first-child { margin-top: 0; } .encart p:last-child { margin-bottom: 0; }

/* Tableau simple (devient une liste de fiches sur téléphone) */
.tableau { width: 100%; border-collapse: separate; border-spacing: 0; margin: 20px 0; font-size: .95rem; border: 1px solid var(--filet); border-radius: var(--rayon-petit); overflow: hidden; }
.tableau th, .tableau td { text-align: left; padding: 12px 14px; vertical-align: top; border-bottom: 1px solid var(--filet); }
.tableau thead th { background: var(--surface); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-fonce); }
.tableau tr:last-child td { border-bottom: 0; }
@media (max-width: 700px) {
  .tableau, .tableau tbody, .tableau tr, .tableau td { display: block; width: 100%; }
  .tableau thead { display: none; }
  .tableau tr { border-bottom: 1px solid var(--filet); padding: 8px 0; }
  .tableau td { border: 0; padding: 4px 14px; }
  .tableau td::before { content: attr(data-l); display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-2); font-weight: 700; }
  .tableau td:first-child { font-weight: 700; font-size: 1.02rem; }
  .tableau td:first-child::before { display: none; }
}

/* Comparatif produits */
.comparatif { display: grid; gap: 12px; margin: 20px 0 8px; }
.comparatif-ligne { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--filet); border-radius: var(--rayon-petit); padding: 14px 16px; }
.comparatif-nom { margin: 0; font-weight: 700; }
.comparatif-nom a { color: var(--texte); text-decoration: none; }
.comparatif dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px 16px; }
.comparatif dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-2); font-weight: 700; }
.comparatif dd { margin: 0; font-size: .95rem; }
@media (min-width: 820px) { .comparatif-ligne { grid-template-columns: 210px 1fr auto; } }

/* Encadré produit */
.produit { display: grid; grid-template-columns: 1fr; gap: 20px; background: #fff; border: 1px solid var(--filet); border-radius: var(--rayon); padding: 22px; margin: 22px 0; box-shadow: var(--ombre); scroll-margin-top: 90px; }
@media (min-width: 680px) { .produit { grid-template-columns: 190px 1fr; } }
.produit-visuel { display: grid; place-items: center; background: var(--surface); border-radius: var(--rayon-petit); min-height: 170px; aspect-ratio: 1; color: var(--accent); position: relative; overflow: hidden; }
.produit-visuel.a-photo { background: #fff; padding: 8px; }
.produit-visuel img { width: 100%; height: 100%; object-fit: contain; }
.produit-visuel.a-photo .picto { display: none; }
.sans-photos .produit-visuel img { display: none; }
.sans-photos .produit-visuel .picto { display: block; }
.produit-visuel .picto { width: 64px; height: 64px; }
.badge { display: inline-block; background: var(--menthe); color: #fff; font-weight: 800; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.produit-nom { font-family: var(--titres); margin: .35em 0 .3em; font-size: 1.35rem; }
.produit-pour-qui { margin: 0 0 12px; }
.produit-mesures { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.produit-mesures div { background: var(--surface); border-radius: 10px; padding: 6px 12px; }
.produit-mesures dt { font-size: .72rem; color: var(--texte-2); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.produit-mesures dd { margin: 0; font-weight: 700; font-size: .95rem; }
.produit-colonnes { display: grid; grid-template-columns: 1fr; gap: 6px 24px; margin-bottom: 16px; }
@media (min-width: 900px) { .produit-colonnes { grid-template-columns: 1fr 1fr; } }
.col-titre { font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; margin: 0 0 4px; }
.plus .col-titre { color: #1d7d6b; } .moins .col-titre { color: #9b5a1a; }
.produit-colonnes ul { margin: 0; padding-left: 0; list-style: none; }
.produit-colonnes li { position: relative; padding-left: 22px; margin: .3em 0; font-size: .96rem; }
.plus li::before, .moins li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.plus li::before { content: "+"; color: var(--menthe); }
.moins li::before { content: "–"; color: #c27a2c; }
.produit-avis { font-size: .98rem; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: var(--sur-accent); font-weight: 700; text-decoration: none; padding: 12px 22px; border-radius: 999px; transition: background .15s, transform .15s; white-space: nowrap; }
.btn:hover { background: var(--accent-fonce); color: #fff; transform: translateY(-1px); }
.btn-petit { padding: 9px 16px; font-size: .92rem; }
.btn-clair { background: #fff; color: var(--accent-fonce); border: 1px solid var(--filet); }
.btn-clair:hover { background: var(--surface); color: var(--accent-fonce); }

/* Questions fréquentes */
.faq details { border-bottom: 1px solid var(--filet); }
.faq summary { cursor: pointer; padding: 16px 32px 16px 0; font-weight: 700; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 1.4rem; color: var(--menthe); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq-reponse p { margin: 0 0 16px; color: var(--texte-2); }

/* À lire aussi */
.a-lire { margin: 40px 0 0; padding: 22px 24px; border-radius: var(--rayon); background: var(--surface); display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.a-lire-titre { width: 100%; }
.a-lire a { background: #fff; padding: 8px 16px; border-radius: 999px; text-decoration: none; font-weight: 600; border: 1px solid var(--filet); }
.a-lire a:hover { border-color: var(--accent); }

/* Accueil */
.heros { position: relative; overflow: hidden; background: radial-gradient(1200px 500px at 85% -10%, #d6f3ee 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, #dff0f7 0%, transparent 55%), var(--fond); padding: 56px 0 90px; }
.heros-grille { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .heros-grille { grid-template-columns: 1.15fr .85fr; } }
.heros h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); margin-top: 0; }
.heros .chapo { font-size: 1.18rem; max-width: 36em; }
.surtitre { display: inline-block; font-weight: 800; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-fonce); background: rgba(255,255,255,.7); border: 1px solid var(--filet); padding: 6px 12px; border-radius: 999px; }
.heros-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.heros-visuel { display: grid; place-items: center; }
.heros-visuel img { border-radius: 28px; box-shadow: var(--ombre); }
.vague { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 70px; color: var(--fond); }
.section { padding: 48px 0; }
.section-claire { background: var(--surface-2); }
.section h2:first-child { margin-top: 0; }
.etapes { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 28px; counter-reset: e; }
@media (min-width: 820px) { .etapes { grid-template-columns: repeat(3, 1fr); } }
.etapes li { counter-increment: e; }
.etapes li::before { content: counter(e); display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--menthe-pale); color: var(--accent-fonce); font-family: var(--titres); font-weight: 700; font-size: 1.2rem; margin-bottom: 10px; }
.etapes h3 { margin: 0 0 .3em; }
.etapes p { margin: 0; color: var(--texte-2); }
.rubrique-liste { display: grid; gap: 0; margin-top: 16px; }
.rubrique-bloc { display: grid; gap: 6px 32px; padding: 24px 0; border-top: 1px solid var(--filet); }
@media (min-width: 820px) { .rubrique-bloc { grid-template-columns: 300px 1fr; } }
.rubrique-bloc h3 { margin: 0; }
.rubrique-bloc h3 a { color: var(--texte); text-decoration: none; }
.rubrique-bloc h3 a:hover { color: var(--accent); }
.rubrique-bloc p { margin: 0 0 8px; color: var(--texte-2); }
.liens-ligne { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: 0; list-style: none; }
.liens-ligne a { font-weight: 600; }

/* Page de rubrique */
.rubrique-tete { padding: 12px 0 8px; max-width: 800px; }
.pages-rubrique { list-style: none; padding: 0; margin: 12px 0 48px; max-width: 820px; }
.pages-rubrique li { padding: 22px 0; border-top: 1px solid var(--filet); }
.pages-rubrique h2 { font-size: 1.4rem; margin: 0 0 .3em; }
.pages-rubrique h2 a { color: var(--texte); text-decoration: none; }
.pages-rubrique h2 a:hover { color: var(--accent); }
.pages-rubrique p { margin: 0; color: var(--texte-2); }
.etiquette { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-fonce); background: var(--surface); border-radius: 999px; padding: 3px 10px; margin-bottom: 8px; }

/* Pages simples */
.page-simple { max-width: calc(var(--colonne) + 32px); padding-top: 8px; padding-bottom: 64px; }
.page-maj { color: var(--texte-2); font-size: .9rem; }

/* Pied de page */
.pied { background: #0d2f38; color: #cfe3e6; margin-top: 40px; padding: 44px 0 28px; font-size: .94rem; }
.pied a { color: #e9f6f7; text-decoration: none; }
.pied a:hover { text-decoration: underline; }
.pied-grille { display: grid; gap: 28px; }
@media (min-width: 820px) { .pied-grille { grid-template-columns: 1.4fr 1fr 1fr; } }
.pied-logo { display: flex; align-items: center; gap: 10px; font-family: var(--titres); font-size: 1.2rem; color: #fff; margin: 0 0 8px; }
.pied-texte { margin: 0; max-width: 34em; }
.pied-titre { font-weight: 800; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: #8fc9c6; margin: 0 0 8px; }
.pied-rubriques, .pied-liens { display: grid; gap: 6px; align-content: start; }
.pied-affiliation { border-top: 1px solid rgba(255,255,255,.12); margin: 28px 0 0; padding-top: 20px; font-size: .86rem; color: #a9c6ca; }

/* Cookies */
.cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid var(--filet); border-radius: var(--rayon); box-shadow: 0 10px 40px rgba(16,48,58,.18); padding: 16px 20px; z-index: 20; font-size: .94rem; }
.cookies-choix { display: flex; gap: 10px; margin-top: 10px; }
.cookies-choix button { flex: 1; font: inherit; font-weight: 700; padding: 10px; border-radius: 999px; border: 1px solid var(--accent); background: #fff; color: var(--accent-fonce); cursor: pointer; }
.cookies-choix button:hover { background: var(--surface); }

/* Divers */
.bandeau-brouillon { margin: 0; background: #ffe9b3; text-align: center; padding: 6px; font-weight: 700; }
.a-ecrire { opacity: .55; }
.picto { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }
@media print { .entete, .pied, .cookies, .btn { display: none; } }

/* ---------- Accueil visuel (v2) ---------- */
.h1-accent { color: var(--accent); }
.heros-garanties { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .9rem; font-weight: 600; color: var(--texte-2); }
.heros-garanties li { display: inline-flex; align-items: center; gap: 6px; }
.heros-garanties li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--menthe-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d7d6b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat; }
.heros-visuel img { width: 100%; max-width: 520px; border-radius: 32px; box-shadow: 0 30px 60px -20px rgba(11, 114, 133, .35); }
.heros-visuel .picto { width: 160px; height: 160px; }
.titre-centre { text-align: center; margin-top: 0; }
.sous-titre-centre { text-align: center; color: var(--texte-2); margin: -.2em auto 28px; max-width: 36em; }

.besoins { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.besoin { display: grid; gap: 6px; align-content: start; padding: 22px; border-radius: var(--rayon); text-decoration: none; color: var(--texte); transition: transform .15s, box-shadow .15s; border: 1px solid transparent; }
.besoin:hover { transform: translateY(-3px); box-shadow: var(--ombre); color: var(--texte); border-color: rgba(11,114,133,.15); }
.besoin-aqua { background: #e7f6f8; } .besoin-menthe { background: #e2f5ee; } .besoin-sable { background: #fbf3e4; } .besoin-ciel { background: #eaf1fb; }
.besoin-icone { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #fff; margin-bottom: 6px; }
.besoin-icone .picto { width: 30px; height: 30px; }
.besoin-titre { font-family: var(--titres); font-weight: 600; font-size: 1.2rem; }
.besoin-texte { color: var(--texte-2); font-size: .95rem; line-height: 1.5; }

.vitrine { display: grid; gap: 18px; }
@media (min-width: 960px) { .vitrine { grid-template-columns: 1.05fr 1fr; } }
.vitrine-vedette { background: #fff; border-radius: 24px; padding: 28px; box-shadow: var(--ombre); display: grid; gap: 22px; align-content: start; }
.vitrine-photo { aspect-ratio: 4 / 3; min-height: 0; border-radius: 18px; }
.vitrine-vedette h3 { font-size: 1.6rem; margin: .4em 0 .3em; }
.vitrine-autres { display: grid; gap: 14px; }
.vitrine-item { background: #fff; border-radius: var(--rayon); padding: 18px; display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: center; border: 1px solid var(--filet); }
.vitrine-mini { min-height: 0; aspect-ratio: 1; border-radius: 12px; }
.vitrine-mini .picto { width: 40px; height: 40px; }
.vitrine-item h3 { font-size: 1.12rem; margin: .2em 0 .2em; }
.vitrine-item p { margin: 0; font-size: .95rem; color: var(--texte-2); }
.vitrine-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px !important; }

.bande-chiffres { background: linear-gradient(135deg, #0b5f6e 0%, #0d3a45 100%); color: #e6f4f5; padding: 56px 0; }
.bande-chiffres h2 { color: #fff; margin-top: 0; text-align: center; }
.chiffres { display: grid; gap: 24px; margin-top: 28px; }
@media (min-width: 820px) { .chiffres { grid-template-columns: repeat(3, 1fr); } }
.chiffre { text-align: center; padding: 8px 12px; }
.chiffre-valeur { font-family: var(--titres); font-size: clamp(2rem, 4vw, 2.7rem); font-weight: 600; color: #8ee6d3; margin: 0 0 6px; line-height: 1.1; }
.chiffre p:last-child { margin: 0; color: #cfe6e8; }
.bande-source { text-align: center; font-size: .8rem; color: #9cc3c7; margin: 28px 0 0; }
.bande-source a { color: #cdeeee; }

.solutions { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 20px; }
.solution { display: grid; gap: 8px; padding: 24px; border-radius: var(--rayon); background: #fff; border: 1px solid var(--filet); text-decoration: none; color: var(--texte); transition: border-color .15s, transform .15s; }
.solution:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--texte); }
.solution-forte { background: linear-gradient(160deg, #f0fbf8 0%, #e5f4f7 100%); }
.solution-nom { font-family: var(--titres); font-size: 1.35rem; font-weight: 600; margin-bottom: 4px; }
.solution-ligne { font-size: .94rem; color: var(--texte-2); }
.solution-ligne b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-fonce); }

.methode { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .methode { grid-template-columns: 1fr 1.1fr; } }
.methode h2 { margin-top: 0; }
.methode-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.methode-points li { background: #fff; border-radius: var(--rayon-petit); padding: 16px 18px; color: var(--texte-2); }
.methode-points b { color: var(--texte); display: block; }

.guides { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 16px; }
.guide-titre { font-family: var(--titres); font-weight: 600; font-size: 1.15rem; margin: 0 0 8px; }
.guide-titre a { color: var(--texte); text-decoration: none; }
.guide-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.guide-col a { font-weight: 600; }
.en-bref-produit { display: grid; gap: 18px; align-items: center; }
@media (min-width: 640px) { .en-bref-produit { grid-template-columns: 130px 1fr; } }
.en-bref-photo { width: 130px; min-height: 0; aspect-ratio: 1; border-radius: 14px; box-shadow: var(--ombre); }
.en-bref-photo .picto { width: 44px; height: 44px; }

/* Pages de rubrique : bannière et cartes */
.rubrique-tete-image { display: grid; gap: 28px; align-items: center; max-width: none; }
@media (min-width: 900px) { .rubrique-tete-image { grid-template-columns: 1fr 1fr; } }
.rubrique-banniere { width: 100%; border-radius: 24px; box-shadow: var(--ombre); object-fit: cover; aspect-ratio: 3 / 2; }
.cartes { display: grid; gap: 18px; margin: 20px 0 56px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.carte { display: grid; grid-template-rows: auto 1fr; background: #fff; border: 1px solid var(--filet); border-radius: 20px; overflow: hidden; text-decoration: none; color: var(--texte); transition: transform .15s, box-shadow .15s; }
.carte:hover { transform: translateY(-3px); box-shadow: var(--ombre); color: var(--texte); }
.carte-visuel { display: grid; place-items: center; aspect-ratio: 4 / 3; background: linear-gradient(160deg, #eef8f8, #e2f5ee); overflow: hidden; color: var(--accent); }
.carte-visuel img { width: 100%; height: 100%; object-fit: cover; }
.carte-photo-produit { background: #fff; padding: 18px; }
.carte-photo-produit img { object-fit: contain; }
.carte-visuel .picto { width: 64px; height: 64px; }
.carte-corps { display: grid; gap: 6px; padding: 18px 20px 22px; align-content: start; }
.carte-titre { font-family: var(--titres); font-weight: 600; font-size: 1.3rem; line-height: 1.2; }
.carte-texte { color: var(--texte-2); font-size: .95rem; line-height: 1.5; }
.carte-lien { margin-top: 8px; font-weight: 700; color: var(--accent); font-size: .95rem; }
@media (min-width: 820px) {
  .carte-une { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: 1.1fr 1fr; }
  .carte-une .carte-visuel { aspect-ratio: auto; min-height: 280px; }
  .carte-une .carte-corps { align-content: center; padding: 32px; }
  .carte-une .carte-titre { font-size: 1.8rem; }
}
.cartes { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.carte .etiquette { justify-self: start; }
.carte-une .carte-visuel { max-height: 360px; }
/* Cartes de rubrique plus compactes : le titre visible sans défiler */
.cartes { grid-template-columns: repeat(auto-fill, minmax(240px, 300px)); justify-content: start; gap: 16px; }
.carte-visuel { aspect-ratio: auto; height: 170px; }
.carte-photo-produit { padding: 12px; }
.carte-corps { padding: 14px 16px 18px; gap: 4px; }
.carte-titre { font-size: 1.12rem; }
.carte-texte { font-size: .9rem; }
.rubrique-tete { padding-bottom: 0; }
.rubrique-tete .chapo { margin-bottom: 8px; }
.section-intro { padding-top: 24px; }
.intro { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .intro { grid-template-columns: 1.1fr 1fr; gap: 48px; } }
.intro h2 { margin-top: 0; }
.intro p { color: var(--texte-2); }
.intro-types { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.intro-types li { display: grid; gap: 2px; padding: 14px 18px; background: var(--surface); border-radius: var(--rayon-petit); }
.intro-types a { text-decoration: none; color: var(--texte); }
.intro-types a:hover b { color: var(--accent); }
.intro-types b { font-family: var(--titres); font-size: 1.08rem; font-weight: 600; }
.intro-types span { color: var(--texte-2); font-size: .94rem; }