/* Guide du Chasseur — feuille de style du site. Socle commun + une couleur d'accent par univers (data-univers sur ). */ :root{ --fond:#f5f7f2; --surface:#ffffff; --surface-2:#eef1ea; --trait:#e1e5dc; --trait-2:#c9d0c4; --encre:#0f1512; --encre-2:#46514a; --encre-3:#7b867e; --foret:#0e1f16; --foret-2:#16301f; --sur-foret:#f2f5ef; --sur-foret-2:#9fb3a5; --lime:#d7f25a; --lime-encre:#2b3a00; --accent:#2f8f5b; --accent-fonce:#1f6b42; --accent-doux:#dff2e6; --accent-encre:#145233; --ok:#2f8f5b; --alerte:#d9503f; --r-s:8px; --r-m:12px; --r-l:16px; --ombre:none; --ombre-2:0 12px 32px -16px rgba(15,21,18,.25); --gouttiere:clamp(16px,4vw,48px); --colonne:1200px; } [data-univers="especes"]{--accent:#2f8f5b;--accent-fonce:#1f6b42;--accent-doux:#dff2e6;--accent-encre:#145233} [data-univers="territoires"]{--accent:#d97a2b;--accent-fonce:#b35f17;--accent-doux:#fbe9d8;--accent-encre:#7a3f0b} [data-univers="agenda"]{--accent:#e4553f;--accent-fonce:#bf3b27;--accent-doux:#fde3de;--accent-encre:#7d2114} [data-univers="permis"]{--accent:#c9a227;--accent-fonce:#9c7b12;--accent-doux:#f8f0cf;--accent-encre:#5f4a05} [data-univers="reglementation"]{--accent:#4c6c8a;--accent-fonce:#365068;--accent-doux:#e0e8f0;--accent-encre:#243a4f} *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--fond);color:var(--encre);font:16px/1.55 "Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration-color:var(--trait-2);text-underline-offset:3px} a:hover{text-decoration-color:var(--accent)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} img,svg{max-width:100%} h1,h2,h3,.display{font-family:"Schibsted Grotesk","Figtree",sans-serif;font-weight:700;line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-.015em} h2{font-size:clamp(1.6rem,2.6vw,2.1rem)} h3{font-size:1.15rem;font-weight:600;letter-spacing:-.01em} p{margin:0 0 1em} .sans{font-family:"Schibsted Grotesk",sans-serif} .num{font-variant-numeric:tabular-nums} .muted{color:var(--encre-2)} .petit{font-size:.9rem} /* ---- Séquence d'arrivée : une seule, courte, en cascade */ @keyframes lever{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes pousser{from{transform:scaleY(.15)}to{transform:none}} @keyframes poser{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}} .hero{animation:lever .5s cubic-bezier(.2,.7,.2,1) both} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}} /* ---- En-tête du site */ .site{background:var(--foret);color:var(--sur-foret);position:sticky;top:0;z-index:10} .site-inner{max-width:var(--colonne);margin-inline:auto;padding:.7rem var(--gouttiere);display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap} .marque{font-family:"Schibsted Grotesk",sans-serif;font-weight:800;font-size:1.2rem;letter-spacing:-.02em;text-decoration:none;display:flex;align-items:center;gap:.5rem;white-space:nowrap} .marque i{width:28px;height:28px;border-radius:9px;background:var(--lime);color:var(--lime-encre);display:inline-grid;place-items:center;font-style:normal;font-size:.95rem;font-weight:800} .recherche{flex:1 1 260px;display:flex;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:.5rem .6rem .5rem 1rem;gap:.6rem;align-items:center;color:var(--sur-foret-2);transition:background .2s,border-color .2s} .recherche:focus-within{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)} .recherche input{background:none;border:0;color:var(--sur-foret);flex:1;font:inherit;min-width:0;outline:0} .recherche input::placeholder{color:var(--sur-foret-2)} .recherche kbd{font:600 .72rem/1 "Figtree",sans-serif;background:rgba(255,255,255,.12);padding:.3rem .45rem;border-radius:6px;color:var(--sur-foret)} .nav{display:flex;gap:.2rem;font-weight:600;font-size:.95rem} .nav a{text-decoration:none;color:var(--sur-foret-2);padding:.4rem .7rem;border-radius:999px;transition:color .15s,background .15s} .nav a:hover{color:var(--sur-foret);background:rgba(255,255,255,.07)} .nav a[aria-current]{color:var(--sur-foret);background:rgba(255,255,255,.1)} @media(max-width:760px){.nav{display:none}} /* ---- Fil d'Ariane */ .ariane{max-width:var(--colonne);margin-inline:auto;padding:1rem var(--gouttiere) 0;font-size:.88rem;color:var(--encre-3);display:flex;gap:.45rem;flex-wrap:wrap;font-weight:500} .ariane a{text-decoration:none;color:var(--encre-2)} .ariane span::before{content:"›";margin-right:.45rem;color:var(--trait-2)} /* ---- Hero photo, titre incrusté, panneau en verre */ .hero{position:relative;max-width:var(--colonne);margin:.8rem auto 0;padding-inline:var(--gouttiere)} .hero-cadre{position:relative;border-radius:var(--r-l);overflow:hidden;min-height:clamp(320px,44vw,520px);display:flex;align-items:flex-end;color:var(--sur-foret);background:linear-gradient(170deg,#2d5a3d 0%,#1a3a27 50%,#0e1f16 100%)} .hero-cadre .topo{position:absolute;inset:0;opacity:.28;mix-blend-mode:screen} .hero-cadre .photo-note{position:absolute;top:1rem;right:1rem;font-size:.78rem;font-weight:500;color:var(--sur-foret-2);border:1px dashed rgba(255,255,255,.3);padding:.25rem .6rem;border-radius:4px} .hero-texte{position:relative;padding:clamp(1.4rem,3.5vw,2.8rem);background:linear-gradient(to top,rgba(14,31,22,.9) 0%,rgba(14,31,22,.4) 55%,rgba(14,31,22,0));width:100%} .hero-univers{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.9rem;color:var(--sur-foret);margin-bottom:.8rem} .hero-univers::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent)} .hero h1{font-size:clamp(2.8rem,7.5vw,5.4rem);font-weight:700;letter-spacing:-.03em;color:#fff} .hero-sous{color:var(--sur-foret-2);font-size:1.05rem;margin-top:.6rem;font-weight:500} /* ---- Grille de la fiche */ .fiche{max-width:var(--colonne);margin-inline:auto;padding:2rem var(--gouttiere) 4rem;display:grid;gap:2rem;grid-template-columns:minmax(0,1fr)} @media(min-width:960px){.fiche{grid-template-columns:minmax(0,1fr) 320px;gap:3rem}} .principal{min-width:0;display:flex;flex-direction:column;gap:3rem} .lateral{display:flex;flex-direction:column;gap:1.2rem} @media(min-width:960px){.lateral{position:sticky;top:4.6rem;align-self:start}} .bloc h2{display:flex;align-items:baseline;gap:.7rem;margin-bottom:1.1rem;flex-wrap:wrap} .bloc h2 small{font-family:"Figtree",sans-serif;font-weight:500;font-size:.9rem;color:var(--encre-3);letter-spacing:0} .bloc > p{max-width:64ch} /* ---- Bento : tuiles de données */ .bento{display:grid;gap:0;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--trait);border-radius:var(--r-m);overflow:hidden;background:var(--surface)} @media(min-width:720px){.bento{grid-template-columns:repeat(3,minmax(0,1fr))}} .bento .t{padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.3rem;border-right:1px solid var(--trait);border-bottom:1px solid var(--trait)} .bento .t:nth-child(2n){border-right:0}.bento .t:nth-last-child(-n+2){border-bottom:0} @media(min-width:720px){.bento .t:nth-child(2n){border-right:1px solid var(--trait)}.bento .t:nth-child(3n){border-right:0}.bento .t:nth-last-child(-n+3){border-bottom:0}} .bento .t b{font-family:"Schibsted Grotesk",sans-serif;font-size:clamp(1.5rem,2.4vw,1.9rem);font-weight:700;letter-spacing:-.02em;line-height:1.05;color:var(--encre)} .bento .t span{font-size:.88rem;color:var(--encre-2);font-weight:500} .bento .t.fort b{color:var(--accent-fonce)} .bento .t.lime b{color:var(--accent-fonce)} .bento .t.lime b::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ok);margin-right:.45rem;vertical-align:middle} /* ---- Panneau latéral */ .identite{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-m);padding:1.1rem 1.2rem;box-shadow:var(--ombre)} .identite h3{margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem} .identite h3::before{content:"";width:3px;height:1em;border-radius:2px;background:var(--accent)} .identite dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;margin:0;font-size:.93rem} .identite dt{color:var(--encre-3);font-weight:500} .identite dd{margin:0;font-weight:500} .identite .grand{font-family:"Schibsted Grotesk",sans-serif;font-size:1.9rem;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--accent-fonce)} /* ---- Frise des 12 mois */ .frise{display:grid;grid-template-columns:repeat(12,1fr);gap:4px} .frise .mois{text-align:center;font-size:.8rem;font-weight:600;color:var(--encre-3);padding-bottom:.4rem} .frise .seg{height:40px;background:var(--surface-2);border-radius:4px;position:relative} .frise .seg.ouvert{background:var(--accent)} .frise .seg.partiel{background:repeating-linear-gradient(135deg,var(--accent) 0 6px,var(--accent-doux) 6px 12px)} .frise .seg.actuel::after{content:"";position:absolute;left:50%;top:-8px;width:8px;height:8px;border-radius:50%;background:var(--encre);transform:translateX(-50%)} .legende{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.86rem;font-weight:500;color:var(--encre-2);margin-top:.9rem} .legende span{display:inline-flex;align-items:center;gap:.4rem} .legende i{width:18px;height:12px;border-radius:4px;background:var(--surface-2);display:inline-block} .legende i.ouvert{background:var(--accent)} .legende i.partiel{background:repeating-linear-gradient(135deg,var(--accent) 0 4px,var(--accent-doux) 4px 8px)} /* ---- Puces de modes de chasse */ .modes{display:flex;flex-wrap:wrap;gap:.6rem} .mode{display:inline-flex;align-items:center;gap:.55rem;border-radius:999px;padding:.45rem 1rem .45rem .5rem;font-weight:600;font-size:.95rem;background:var(--surface);border:1px solid var(--trait);text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s} .mode:hover{border-color:var(--accent);background:var(--accent-doux)} .mode i{width:28px;height:28px;border-radius:50%;background:var(--accent-doux);display:inline-grid;place-items:center;font-style:normal;color:var(--accent-encre);font-size:.9rem} /* ---- Carte de France en tuiles */ .tuiles{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;max-width:520px;aspect-ratio:1} .tuile{aspect-ratio:1;border-radius:6px;background:var(--surface-2);font-size:.7rem;font-weight:600;display:grid;place-items:center;color:var(--encre-3);cursor:default;position:relative;animation:poser .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.2s + var(--d,0) * 12ms);transition:transform .15s} .tuile:hover{transform:scale(1.12);z-index:2} .tuile.p1{background:var(--accent-doux);color:var(--accent-encre)} .tuile.p2{background:color-mix(in srgb,var(--accent) 60%,#fff);color:#fff} .tuile.p3{background:var(--accent);color:#fff} .tuile.ici{box-shadow:0 0 0 2px var(--encre) inset;font-weight:700} .tuile[title]:hover::after{content:attr(title);position:absolute;bottom:115%;left:50%;transform:translateX(-50%);background:var(--encre);color:#fff;padding:.3rem .6rem;border-radius:8px;white-space:nowrap;font-size:.8rem;font-weight:500;z-index:3;pointer-events:none} .carte-et-liste{display:grid;gap:1.6rem;grid-template-columns:minmax(0,1fr)} @media(min-width:720px){.carte-et-liste{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}} .liste-dep{columns:2;column-gap:1.2rem;font-size:.95rem;list-style:none;padding:0;margin:0} .liste-dep li{break-inside:avoid;padding:.35rem 0;border-bottom:1px solid var(--trait)} .liste-dep a{text-decoration:none;display:flex;justify-content:space-between;gap:.5rem;font-weight:500} .liste-dep small{color:var(--encre-3);font-weight:600} /* ---- Encart réglementaire sourcé */ .regles{display:grid;gap:.8rem} .regle{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-m);padding:1.1rem 1.25rem;display:grid;gap:.4rem;box-shadow:var(--ombre)} .regle h3{font-size:1.1rem} .regle p{margin:0;font-size:.95rem;color:var(--encre-2)} .regle .source{font-size:.85rem;color:var(--encre-3);display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin-top:.4rem;padding-top:.6rem;border-top:1px solid var(--trait);font-weight:500} .regle .source b{font-weight:600;color:var(--ok);display:inline-flex;align-items:center;gap:.35rem} .regle .source b::before{content:"✓";font-size:.75rem;width:16px;height:16px;border-radius:50%;background:var(--accent-doux);display:inline-grid;place-items:center} .avert{font-size:.88rem;color:var(--encre-2);background:var(--surface-2);border-radius:var(--r-s);padding:.7rem .9rem;max-width:66ch} /* ---- Cartes de contenu liées */ .cartes{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))} .carte{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-m);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;box-shadow:var(--ombre)} .carte:hover{border-color:var(--trait-2);box-shadow:var(--ombre-2)} .carte .vignette{aspect-ratio:4/3;background:linear-gradient(135deg,var(--accent-doux),var(--surface-2));display:grid;place-items:center;color:var(--encre-3);font-size:.82rem;font-weight:600} .carte .corps{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;gap:.3rem} .carte .type{font-size:.78rem;color:var(--accent-encre);font-weight:700;text-transform:none} .carte h3{font-size:1.1rem;line-height:1.15} .carte .meta{font-size:.85rem;color:var(--encre-3);margin-top:auto;padding-top:.4rem;font-weight:500} /* ---- Liste d'événements */ .evenements{display:grid;gap:.7rem} .evt{display:grid;grid-template-columns:64px 1fr;gap:1rem;background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-m);padding:.9rem 1rem;text-decoration:none;align-items:center;transition:transform .2s,box-shadow .2s;box-shadow:var(--ombre)} .evt:hover{border-color:var(--trait-2)} .evt .date{text-align:center;line-height:1;border-right:1px solid var(--trait);padding:.3rem .6rem .3rem 0;color:var(--accent-fonce)} .evt .date b{display:block;font-family:"Schibsted Grotesk",sans-serif;font-size:1.7rem;font-weight:800;letter-spacing:-.03em} .evt .date span{font-size:.78rem;font-weight:700} .evt h3{font-size:1.08rem;margin-bottom:.2rem} .evt .lieu{font-size:.88rem;color:var(--encre-2);font-weight:500} /* ---- Boutons */ .btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--encre);color:#fff;border-radius:var(--r-s);padding:.7rem 1.25rem;font-weight:700;font-size:.95rem;text-decoration:none;border:0;cursor:pointer;transition:transform .15s,background .15s} .btn:hover{background:var(--accent-fonce)} .btn.second{background:transparent;color:var(--encre);border:1px solid var(--trait-2)} .btn.second:hover{background:var(--surface);border-color:var(--encre)} /* ---- Voisins (maillage) */ .voisins{display:flex;flex-wrap:wrap;gap:.5rem} .voisin{font-size:.9rem;font-weight:500;padding:.35rem .75rem;border-radius:var(--r-s);text-decoration:none;background:var(--surface);border:1px solid var(--trait);transition:border-color .15s,background .15s} .voisin:hover{border-color:var(--accent);background:var(--accent-doux)} /* ---- Pied de page */ .pied{background:var(--foret);color:var(--sur-foret-2);margin-top:2rem} .pied-inner{max-width:var(--colonne);margin-inline:auto;padding:2rem var(--gouttiere);font-size:.9rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-weight:500} .pied a{color:var(--sur-foret);text-decoration:none} /* ---- Utilitaires */ .fraicheur{font-size:.85rem;color:var(--encre-3);font-weight:500} .grille-2{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .stat{line-height:1} .stat b{display:block;font-family:"Schibsted Grotesk",sans-serif;font-size:2rem;font-weight:700;letter-spacing:-.02em;color:var(--encre)} .stat span{color:var(--encre-2);font-size:.9rem;font-weight:500} /* ---- Cartes réelles (Leaflet) */ .carte-reelle{width:100%;height:100%;min-height:360px;border-radius:var(--r-m);border:1px solid var(--trait);overflow:hidden;background:#eaf0e6;z-index:0} .leaflet-container{font:inherit} .leaflet-control-attribution{font-size:.65rem!important;background:rgba(255,255,255,.7)!important} .leaflet-tooltip{font:500 .85rem "Figtree",sans-serif;border:1px solid var(--trait);border-radius:6px;box-shadow:none} .leaflet-popup-content-wrapper{border-radius:8px;box-shadow:0 8px 24px -8px rgba(0,0,0,.3);font:inherit} .leaflet-popup-content{margin:.7rem .9rem;font-size:.9rem} .leaflet-popup-content b{display:block;font-family:"Schibsted Grotesk",sans-serif;font-size:1rem} .marqueur{width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 0 0 2px var(--accent)} /* ---- Accueil */ .accueil-hero{position:relative;background:var(--foret);color:var(--sur-foret);overflow:hidden} .accueil-hero .topo{position:absolute;inset:0;width:100%;height:100%;opacity:.2;mix-blend-mode:screen} .accueil-inner{position:relative;max-width:var(--colonne);margin-inline:auto;padding:clamp(3rem,8vw,6rem) var(--gouttiere) clamp(2.5rem,6vw,4rem)} .accueil-inner h1{font-size:clamp(2.2rem,5.5vw,4.2rem);font-weight:700;letter-spacing:-.03em;color:#fff;max-width:16ch} .accueil-inner .lede{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--sur-foret-2);max-width:50ch;margin:1rem 0 2rem;font-weight:500} .chercheur{position:relative;max-width:760px} .chercheur form{display:flex;background:#fff;border-radius:var(--r-m);padding:.45rem .45rem .45rem 1.1rem;gap:.6rem;align-items:center;color:var(--encre-3);box-shadow:0 20px 50px -20px rgba(0,0,0,.6)} .chercheur input{flex:1;border:0;background:none;font:500 1.1rem "Figtree",sans-serif;color:var(--encre);min-width:0;outline:0;padding:.55rem 0} .chercheur input::placeholder{color:var(--encre-3)} .chercheur button{background:var(--encre);color:#fff;border:0;border-radius:var(--r-s);padding:.75rem 1.2rem;font:600 1rem "Figtree",sans-serif;cursor:pointer} .chercheur button:hover{background:#2f8f5b} .suggestions{position:absolute;left:0;right:0;top:calc(100% + .5rem);background:#fff;color:var(--encre);border-radius:var(--r-m);border:1px solid var(--trait);overflow:hidden;z-index:20;box-shadow:0 24px 60px -20px rgba(0,0,0,.5)} .suggestions .groupe{padding:.6rem 1rem .2rem;font-size:.75rem;font-weight:700;color:var(--encre-3);text-transform:uppercase;letter-spacing:.05em} .suggestions a{display:grid;grid-template-columns:36px 1fr auto;gap:.8rem;align-items:center;padding:.55rem 1rem;text-decoration:none;font-size:.95rem} .suggestions a:hover,.suggestions a.actif{background:var(--surface-2)} .suggestions a i{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.8rem;color:#fff} .suggestions a b{font-weight:600;display:block} .suggestions a small{color:var(--encre-2);display:block;font-size:.85rem} .suggestions a span{font-size:.8rem;color:var(--encre-3);font-weight:500} .suggestions .direct{background:#dff2e6;border-bottom:1px solid var(--trait)} .exemples{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;font-size:.9rem;color:var(--sur-foret-2);align-items:center} .exemples a{color:var(--sur-foret);text-decoration:none;border:1px solid rgba(255,255,255,.2);padding:.3rem .7rem;border-radius:var(--r-s);font-weight:500} .exemples a:hover{border-color:rgba(255,255,255,.5)} .section{max-width:var(--colonne);margin-inline:auto;padding:clamp(2.5rem,5vw,4rem) var(--gouttiere) 0} .section h2{margin-bottom:.4rem} .section .sous{color:var(--encre-2);margin-bottom:1.4rem;max-width:60ch} .section .tete{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem} .section .tete h2{margin:0} .section .tete a{font-weight:600;font-size:.95rem;text-decoration:none;color:var(--encre-2);white-space:nowrap} .section .tete a:hover{color:var(--encre)} .portes{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))} .porte{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-m);padding:1.2rem 1.2rem 1.1rem;text-decoration:none;display:flex;flex-direction:column;gap:.5rem;min-height:170px;transition:border-color .15s} .porte:hover{border-color:var(--p)} .porte i{width:38px;height:38px;border-radius:10px;background:var(--p);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:1rem} .porte h3{font-size:1.2rem} .porte p{margin:0;font-size:.9rem;color:var(--encre-2)} .porte small{margin-top:auto;font-size:.82rem;color:var(--encre-3);font-weight:600} .etat{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .etat .item{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-m);padding:1rem 1.1rem;display:grid;grid-template-columns:1fr auto;gap:.2rem .8rem;text-decoration:none} .etat .item h3{font-size:1.05rem;grid-column:1} .etat .item p{margin:0;font-size:.88rem;color:var(--encre-2);grid-column:1} .etat .item .puce{grid-row:1/3;grid-column:2;align-self:start;font-size:.78rem;font-weight:700;padding:.25rem .6rem;border-radius:var(--r-s);white-space:nowrap} .puce.ouvert{background:#dff2e6;color:#145233} .puce.bientot{background:#fbe9d8;color:#7a3f0b} .puce.ferme{background:var(--surface-2);color:var(--encre-2)} .puce.suspendu{background:#fde3de;color:#7d2114} .pres{display:grid;gap:1.2rem;grid-template-columns:minmax(0,1fr)} @media(min-width:900px){.pres{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}} .pres .carte-reelle{min-height:420px} .pres .evenements{align-content:start} .guides-liste{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))} .confiance{max-width:var(--colonne);margin:clamp(2.5rem,5vw,4rem) auto 0;padding-inline:var(--gouttiere)} .confiance-inner{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-m);padding:1.4rem 1.6rem;display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .confiance h3{font-size:1.05rem;margin-bottom:.3rem} .confiance p{margin:0;font-size:.9rem;color:var(--encre-2)} /* ---- Pages de liste et contenu long */ .page{max-width:var(--colonne);margin-inline:auto;padding:1.5rem var(--gouttiere) 4rem} .page-tete{margin-bottom:2rem;max-width:70ch} .page-tete h1{font-size:clamp(2rem,4.5vw,3.2rem);margin-bottom:.5rem} .page-tete .lede{color:var(--encre-2);font-size:1.1rem} .prose{max-width:68ch;font-size:1.02rem;line-height:1.65} .prose h2{font-size:1.5rem;margin:2rem 0 .6rem} .prose h3{font-size:1.2rem;margin:1.5rem 0 .4rem} .prose ul,.prose ol{padding-left:1.3em} .prose li{margin:.25em 0} .prose table{border-collapse:collapse;width:100%;font-size:.93rem;margin:1em 0} .prose th,.prose td{border:1px solid var(--trait);padding:.5em .7em;text-align:left;vertical-align:top} .prose th{background:var(--surface-2)} .prose blockquote{margin:1em 0;padding:.6em 1em;border-left:3px solid var(--accent);background:var(--surface-2);border-radius:0 var(--r-s) var(--r-s) 0} .prose a{color:var(--accent-fonce)} .liste-groupes{display:grid;gap:2rem} .liste-especes{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))} .espece-item{display:grid;grid-template-columns:1fr auto;gap:.2rem .6rem;background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-m);padding:.85rem 1rem;text-decoration:none;align-items:center;transition:border-color .15s} .espece-item:hover{border-color:var(--accent)} .espece-item b{font-weight:600} .espece-item i{font-style:italic;color:var(--encre-3);font-size:.85rem;grid-column:1} .espece-item .puce{grid-column:2;grid-row:1/3} .liste-dep-grille{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))} .dep-item{display:flex;gap:.6rem;align-items:baseline;background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-s);padding:.6rem .8rem;text-decoration:none;font-weight:500} .dep-item:hover{border-color:var(--accent)} .dep-item small{color:var(--encre-3);font-weight:700;min-width:2em} .region-bloc h2{font-size:1.3rem;margin:1.6rem 0 .6rem} .calendrier{display:grid;grid-template-columns:160px repeat(12,1fr);gap:4px 3px;align-items:center} .calendrier .entete{font-size:.8rem;font-weight:600;color:var(--encre-3);text-align:center;padding-bottom:.3rem} .calendrier .espece{font-size:.93rem;font-weight:600;padding-right:.6rem;text-decoration:none;display:flex;justify-content:space-between;gap:.4rem;align-items:baseline} .calendrier .espece small{color:var(--encre-3);font-weight:500;font-size:.75rem} .calendrier .c{height:28px;background:var(--surface-2);border-radius:6px} .calendrier .c.o{background:var(--accent)} .calendrier .c.p{background:repeating-linear-gradient(135deg,var(--accent) 0 5px,var(--accent-doux) 5px 10px)} .calendrier .groupe{grid-column:1/-1;font-size:.8rem;font-weight:700;color:var(--encre-3);padding:.9rem 0 .2rem} @media(max-width:560px){.calendrier{grid-template-columns:110px repeat(12,1fr)}.calendrier .espece{font-size:.85rem}} .filtres{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem} .filtre{font:600 .9rem "Figtree",sans-serif;padding:.4rem .95rem;border:1px solid var(--trait);border-radius:999px;background:var(--surface);cursor:pointer;transition:all .15s} .filtre:hover{border-color:var(--accent)} .filtre[aria-pressed="true"]{background:var(--encre);color:#fff;border-color:var(--encre)} .communes{display:flex;flex-wrap:wrap;gap:.45rem;font-size:.9rem;font-weight:600} .communes a{text-decoration:none;padding:.35rem .8rem;background:var(--surface);border:1px solid var(--trait);border-radius:999px;transition:all .15s} .communes a:hover{border-color:var(--accent);background:var(--accent-doux)} .hero-carte{display:grid;grid-template-columns:minmax(0,1fr);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--ombre-2)} @media(min-width:800px){.hero-carte{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}} .hero-carte .carte{background:#eaf0e6;min-height:320px;position:relative} .hero-carte .carte .carte-reelle{position:absolute;inset:0;height:100%;border:0;border-radius:0} @media(max-width:799px){.hero-carte .carte{height:320px}} .hero-carte .texte{background:var(--foret);color:var(--sur-foret);padding:clamp(1.4rem,3vw,2.6rem);display:flex;flex-direction:column;justify-content:flex-end} .hero-carte h1{font-size:clamp(2.8rem,7vw,5rem);font-weight:700;letter-spacing:-.04em;color:#fff} .hero-carte .code{display:inline-block;font-family:"Schibsted Grotesk",sans-serif;font-size:1rem;color:var(--lime-encre);background:var(--lime);font-weight:700;padding:.25rem .7rem;border-radius:999px;margin-bottom:1rem;align-self:flex-start} .hero-carte .chiffres{display:flex;gap:2rem;margin-top:1.6rem;flex-wrap:wrap} .hero-carte .chiffres b{display:block;font-family:"Schibsted Grotesk",sans-serif;font-size:2rem;font-weight:700;letter-spacing:-.03em;line-height:1;color:#fff} .hero-carte .chiffres span{color:var(--sur-foret-2);font-size:.88rem;font-weight:500} .hero-evt{display:grid;grid-template-columns:minmax(0,1fr);border-radius:var(--r-l);overflow:hidden;background:var(--foret);color:var(--sur-foret);box-shadow:var(--ombre-2)} @media(min-width:760px){.hero-evt{grid-template-columns:280px minmax(0,1fr)}} .hero-evt .quand{background:var(--accent);color:#fff;padding:clamp(1.4rem,3vw,2.2rem);font-family:"Schibsted Grotesk",sans-serif;line-height:1;display:flex;flex-direction:column;justify-content:center;gap:.3rem;position:relative;overflow:hidden} .hero-evt .quand::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.12);right:-90px;bottom:-110px} .hero-evt .quand .jours{font-size:clamp(4rem,12vw,7rem);font-weight:700;letter-spacing:-.06em} .hero-evt .quand .moisan{font-size:1.5rem;font-weight:700;letter-spacing:-.02em} .hero-evt .quand .heures{font:500 .95rem/1.4 "Figtree",sans-serif;margin-top:1rem;opacity:.9} .hero-evt .quoi{padding:clamp(1.4rem,3vw,2.6rem);display:flex;flex-direction:column;justify-content:flex-end;position:relative;min-height:280px} .hero-evt .quoi .topo{position:absolute;inset:0;opacity:.22} .hero-evt .quoi > *{position:relative} .hero-evt h1{font-size:clamp(2.2rem,6vw,4.2rem);font-weight:700;letter-spacing:-.04em;color:#fff} .hero-evt .lieu{font-size:1.05rem;color:var(--sur-foret-2);margin-top:.6rem;font-weight:500} .hero-evt .cat{display:inline-block;align-self:flex-start;font-size:.85rem;font-weight:700;color:var(--lime-encre);background:var(--lime);padding:.3rem .75rem;border-radius:999px;margin-bottom:1rem} .pratique{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-m);padding:1.1rem 1.2rem;display:grid;gap:.8rem} .pratique .ligne{display:grid;grid-template-columns:80px 1fr;gap:.8rem;font-size:.93rem} .pratique .ligne span:first-child{color:var(--encre-3);font-weight:600} .etapes{counter-reset:etape;display:grid;gap:1rem;max-width:70ch} .etape{display:grid;grid-template-columns:44px 1fr;gap:1rem;background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-m);padding:1.1rem 1.2rem} .etape::before{counter-increment:etape;content:counter(etape);width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:"Schibsted Grotesk",sans-serif;font-weight:700} .etape h3{margin-bottom:.3rem} .etape p{margin:0;font-size:.95rem;color:var(--encre-2)} .recherche-resultats{display:grid;gap:1.6rem} .recherche-groupe h2{font-size:1.1rem;color:var(--encre-3);margin-bottom:.6rem} .recherche-groupe .liste{display:grid;gap:.5rem} .resultat{display:grid;grid-template-columns:40px 1fr;gap:.9rem;align-items:center;background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-m);padding:.8rem 1rem;text-decoration:none} .resultat:hover{border-color:var(--accent)} .resultat i{width:40px;height:40px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-weight:700;color:#fff;font-size:.85rem} .resultat b{display:block;font-weight:600} .resultat small{color:var(--encre-2)} .resultat.direct{border-color:var(--accent);background:var(--accent-doux)} .vide{background:var(--surface-2);border-radius:var(--r-m);padding:1.5rem;max-width:60ch} .pagination{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:1.5rem} .pagination a,.pagination span{padding:.4rem .8rem;border:1px solid var(--trait);border-radius:var(--r-s);text-decoration:none;font-weight:600;font-size:.9rem} .pagination span{background:var(--encre);color:#fff;border-color:var(--encre)} .avert-legal{font-size:.85rem;color:var(--encre-2);background:var(--surface-2);border-left:3px solid var(--accent);border-radius:0 var(--r-s) var(--r-s) 0;padding:.7rem .9rem;margin-top:1rem;max-width:70ch} .avert-legal a{color:var(--encre)} .photo-vide{background:linear-gradient(170deg,#2d5a3d 0%,#1a3a27 50%,#0e1f16 100%)} .hero-cadre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .pied-inner{flex-direction:column;gap:1.2rem} .pied-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem} .pied-bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1rem;font-size:.82rem;border-top:1px solid rgba(255,255,255,.1);padding-top:1rem} .menu-mobile{display:none} @media(max-width:760px){ .menu-mobile{display:flex;gap:.3rem;overflow-x:auto;padding:.4rem var(--gouttiere) .6rem;background:var(--foret);font-weight:600;font-size:.9rem;-webkit-overflow-scrolling:touch} .menu-mobile a{color:var(--sur-foret-2);text-decoration:none;padding:.35rem .7rem;border-radius:999px;white-space:nowrap;border:1px solid rgba(255,255,255,.12)} .menu-mobile a[aria-current]{color:var(--sur-foret);background:rgba(255,255,255,.1)} }