/* Cocagne — pages SEO (contenu éditorial : chasser en France, gibier, offres…)
   CSS repris du dossier cocagne-pages-seo (identique sur les 49 pages). En-tête et pied : voir app.css. */
.page-seo{
  /* Jetons repris de la maquette Claude Design « Accueil cocagne.fr » */
  --vert:#0A4034; --orange:#F04A00; --orange-hover:#D23F00; --orange-clair:#FF782C;
  --lien:#B84A0A; --lien-hover:#9C3E08;
  --texte:#3E403D; --texte-doux:#484A46; --bouton-sec:#1F2A26;
  --fond:#FFFFFF; --chaud:#FAF6F1; --peche:#FFF3EA; --bord-peche:#F7C9B0; --filet:#EAE4DC;
  --sauge:#9DB79F; --verifie:#3E6B3F;
  --ombre:0 2px 12px rgba(10,64,52,.05);
  --font:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  box-sizing:border-box; color-scheme:light;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
/* Pas de mode sombre : la maquette de l'accueil est toujours sur fond clair. */
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 96px); scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{margin:0; background:var(--fond); color:var(--texte); font-family:var(--font); font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--lien); text-underline-offset:3px; text-decoration-thickness:1px; font-weight:600}
a:hover{color:var(--lien-hover); text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px; border-radius:6px}
h1,h2,h3{font-family:var(--font); color:var(--vert); margin:0; font-weight:800}
h1{font-size:clamp(2.3rem,4.6vw,3.75rem); line-height:1.04; letter-spacing:-.025em}
h1 span,h2 span{color:var(--orange)}
h2{font-size:clamp(1.75rem,3vw,2.5rem); line-height:1.1; letter-spacing:-.02em; margin:0 0 1rem}
h3{font-size:1.3rem; line-height:1.3; letter-spacing:-.015em; margin:1.8rem 0 .5rem}
p{margin:0 0 1.05rem}
.wrap{max-width:1260px; margin:0 auto; padding:0 40px}
@media (max-width:640px){ .wrap{padding:0 16px} }

/* Boutons (pilule + chevron, comme l'accueil) */
main .btn{display:inline-flex; align-items:center; justify-content:center; gap:12px; height:56px; padding:0 30px; border-radius:999px; font-family:var(--font); font-weight:700; font-size:16px; text-decoration:none; border:1px solid transparent; transition:background-color .15s, border-color .15s}
main .btn::after{content:""; width:7px; height:7px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); margin-left:2px}
main .btn-plein{background:var(--orange); color:#fff}
main .btn-plein:hover{background:var(--orange-hover); color:#fff}
main .btn-ligne{background:var(--fond); color:var(--bouton-sec); border-color:var(--bord-peche)}
main .btn-ligne:hover{border-color:var(--orange); color:var(--bouton-sec)}
main .btn-ligne::after{color:var(--orange)}
main .btn-petit{height:48px; padding:0 24px; font-size:15px}
main .btn-petit::after{display:none}

/* Bandeau gratuit */
.gratuit{position:relative; overflow:hidden; display:flex; align-items:center; gap:22px; margin:18px 0 0; padding:14px 40px; min-height:96px; border-radius:20px; background:var(--chaud) url("../images/topo-fZ1NL2-.svg") center/cover no-repeat}
.gratuit img.cadeau{width:66px; height:66px; flex:none}
.gratuit p{margin:0; color:var(--vert); font-weight:800; font-size:1.35rem; line-height:1.2}
.gratuit p strong{display:block; color:var(--orange); font-size:2rem; letter-spacing:-.02em}
.gratuit img.arbres{position:absolute; right:0; bottom:0; height:100%; width:auto; pointer-events:none}
@media (max-width:700px){ .gratuit{padding:14px 18px} .gratuit img.arbres{display:none} .gratuit p{font-size:1.05rem} .gratuit p strong{font-size:1.5rem} }

/* Héros */
.heros{position:relative; overflow:hidden; padding:30px 0 72px}
.heros::before{content:""; position:absolute; inset:0; background:url("../images/topo-fZ1NL2-.svg") center/cover no-repeat; opacity:.5; pointer-events:none}
.heros > .wrap{position:relative}
.ariane{font-size:.875rem; color:var(--texte-doux); margin-bottom:34px}
.ariane ol{list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0}
.ariane li+li::before{content:"›"; margin-right:8px; color:var(--orange)}
.ariane a{font-weight:500}
.heros-grille{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center}
.chapo{font-size:1.25rem; line-height:1.5; color:var(--texte); max-width:30em; margin-top:1.4rem}
.heros-actions{display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin-top:1.8rem}
.verifie{display:flex; align-items:center; gap:8px; margin-top:1.4rem; color:var(--verifie); font-weight:700; font-size:.95rem}
.illu svg{display:block; width:100%; height:auto}
@media (max-width:900px){ .heros-grille{grid-template-columns:1fr} .illu{max-width:380px; margin:0 auto} }

/* Corps */
.corps{display:grid; grid-template-columns:250px minmax(0,1fr); gap:64px; padding:64px 40px 24px}
.sommaire{position:sticky; top:108px; align-self:start; background:var(--fond); border-radius:20px; box-shadow:var(--ombre); border:1px solid var(--filet); padding:22px 24px; font-size:.95rem}
.sommaire p{font-weight:800; color:var(--vert); font-size:1.05rem; margin-bottom:.7rem}
.sommaire ol{margin:0; padding-left:1.1rem; display:grid; gap:.5rem}
.sommaire li::marker{color:var(--orange); font-weight:700}
.sommaire a{text-decoration:none; color:var(--vert); font-weight:500}
.sommaire a:hover{color:var(--orange)}
.article{max-width:44rem}
.article section{margin-bottom:3.4rem}
.especes{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:1rem 0 1.2rem}
.especes li{background:var(--peche); border:1px solid var(--bord-peche); color:var(--vert); border-radius:999px; padding:.35rem 1rem; font-weight:700; font-size:.92rem}
.article ul:not(.especes) li::marker{color:var(--orange)}
.article strong{color:var(--vert)}
.rappel{background:var(--peche); border-radius:20px; padding:1.1rem 1.4rem 1.1rem 1.4rem; margin:1.4rem 0; border-left:5px solid var(--orange)}
.rappel p:last-child{margin:0}
#cantal{background:var(--chaud); border-radius:20px; padding:32px 34px 18px}
@media (max-width:900px){ .corps{grid-template-columns:1fr; gap:28px; padding:36px 16px 16px} .sommaire{position:static} #cantal{padding:24px 20px 12px} }

/* Étapes */
.etapes-bloc{background:var(--chaud); padding:64px 0 72px; margin:16px 0 64px}
.etapes-bloc .intro{max-width:46rem}
.etapes{list-style:none; counter-reset:e; padding:0; margin:2rem 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.etapes li{counter-increment:e; background:var(--fond); border-radius:20px; box-shadow:var(--ombre); padding:26px 26px 28px}
.etapes li::before{content:counter(e); width:48px; height:48px; border-radius:50%; background:var(--peche); color:var(--orange); font-weight:800; font-size:1.35rem; display:grid; place-items:center; margin-bottom:16px}
.etapes h3{margin:0 0 .4rem; font-size:1.2rem}
.etapes p{color:var(--texte-doux); margin:0; font-size:1rem}
@media (max-width:1000px){ .etapes{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .etapes{grid-template-columns:1fr} }

/* Bloc territoires (bandeau vert de l'accueil) */
.territoires{background:#0A4034; color:#fff; border-radius:24px; padding:48px 56px 0; position:relative; overflow:hidden}
.territoires::before{content:""; position:absolute; inset:0; background:url("../images/topo-dark-52eJMwQ.svg") center/cover no-repeat; opacity:.18; pointer-events:none}
.territoires > *{position:relative}
.territoires h2{color:#fff; font-size:clamp(1.75rem,3vw,2.6rem); padding-right:140px}
.territoires h2 span{color:var(--orange-clair)}
.territoires p{color:#DCE6E1; max-width:38rem}
.territoires a.lien{color:#FFB585}
.territoires .chasseur{position:absolute; right:56px; top:44px; width:104px; height:104px}
.territoires img.paysage{display:block; width:calc(100% + 112px); max-width:none; margin:24px -56px 0; height:110px; opacity:.9}
@media (max-width:700px){ .territoires h2{padding-right:0} .territoires{padding:28px 22px 0} .territoires .chasseur{display:none} .territoires img.paysage{width:calc(100% + 44px); margin:20px -22px 0} }

/* FAQ */
.faq details{background:var(--fond); border:1px solid var(--filet); border-radius:16px; padding:0 20px; margin-bottom:10px}
.faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:1rem 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{margin:0; font-size:1.08rem}
.faq summary .plus{flex:none; width:30px; height:30px; border-radius:50%; background:var(--peche); color:var(--orange); display:grid; place-items:center; font-weight:800; transition:transform .2s}
.faq details[open] .plus{transform:rotate(45deg)}
.faq details p{margin:0 0 1.1rem; color:var(--texte-doux)}
.final{padding:16px 0 80px}

/* Encarts et tableaux */
.encart{background:var(--chaud); border-radius:20px; padding:32px 34px 18px}
.tableau{overflow-x:auto; margin:1.2rem 0 1.4rem; border-radius:16px; border:1px solid var(--filet)}
.tableau table{border-collapse:collapse; width:100%; min-width:520px; font-size:1rem}
.tableau th{background:var(--chaud); color:var(--vert); font-weight:800; text-align:left; padding:12px 16px}
.tableau td{padding:12px 16px; border-top:1px solid var(--filet); vertical-align:top}
.tableau td:first-child{font-weight:700; color:var(--vert); white-space:nowrap}
@media (max-width:900px){ .encart{padding:24px 20px 12px} }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important} }