/* ========================================================================= HERPETOFILES — feuille de style partagée Chargée par l'accueil, les pages de section et les 33 fiches espèces. ========================================================================= */ :root{ --bg:#0c1410; --bg-2:#111c17; --panel:#16241d; --panel-2:#1c2e25; --line:#25392f; --line-2:#31493c; --txt:#e6efe9; --txt-2:#9fb4a8; --txt-3:#6d8577; --moss:#4ade80; --moss-2:#22c55e; --deep:#0f766e; --amber:#fbbf24; --clay:#e07a5f; --violet:#a78bfa; --amph:#5eead4; --rept:#fbbf24; --r:14px; --r-s:9px; --mx:1180px; } *{box-sizing:border-box; margin:0; padding:0} html{scroll-behavior:smooth} body{ background:var(--bg); color:var(--txt); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.65; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{line-height:1.2; letter-spacing:-.02em; font-weight:650} a{color:inherit; text-decoration:none} button{font:inherit; color:inherit; background:none; border:none; cursor:pointer} img{max-width:100%; display:block} .wrap{max-width:var(--mx); margin:0 auto; padding:0 24px} .sci{font-style:italic} .hide{display:none !important} /* Bilingue sans duplication de page : les deux langues sont dans le HTML (bon pour l'indexation), seule celle de s'affiche. */ html[lang="fr"] [data-l="en"], html[lang="en"] [data-l="fr"]{display:none} /* ---------- NAV ---------- */ header{ position:sticky; top:0; z-index:50; background:rgba(12,20,16,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .nav{display:flex; align-items:center; gap:28px; height:64px} .logo{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.03em; font-size:1.12rem} .logo-mark{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:linear-gradient(145deg,var(--moss),var(--deep)); color:#08120d; font-size:1rem; } .nav-links{display:flex; gap:24px; margin-left:auto} .nav-links a{color:var(--txt-2); font-size:.93rem; font-weight:500; transition:color .15s} .nav-links a:hover,.nav-links a.on{color:var(--moss)} .lang{display:flex; border:1px solid var(--line-2); border-radius:999px; overflow:hidden} .lang button{padding:5px 13px; font-size:.78rem; font-weight:600; color:var(--txt-3); transition:.15s} .lang button[aria-pressed="true"]{background:var(--moss); color:#08120d} .burger{display:none; margin-left:auto; font-size:1.5rem; color:var(--txt-2)} /* ---------- HERO D'ACCUEIL ---------- */ .hero{position:relative; padding:110px 0 96px; overflow:hidden; border-bottom:1px solid var(--line); text-align:center} .hero::before{ content:""; position:absolute; inset:0; background: radial-gradient(70% 55% at 78% 8%, rgba(74,222,128,.12), transparent 62%), radial-gradient(55% 50% at 12% 92%, rgba(15,118,110,.16), transparent 60%); pointer-events:none; } .hero .wrap{position:relative} .eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border:1px solid var(--line-2); border-radius:999px; font-size:.76rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--moss); background:rgba(74,222,128,.06); margin-bottom:26px; } /* Le titre est l'élément central de la page : gros, capitales, très espacé. */ .wordmark{ font-size:clamp(2.6rem,9vw,6.4rem); font-weight:800; letter-spacing:-.045em; line-height:.95; margin-bottom:22px; } .wordmark em{font-style:normal; color:var(--moss)} .hero p{color:var(--txt-2); font-size:clamp(1rem,2vw,1.16rem); max-width:60ch; margin:0 auto 34px} .cta{display:flex; gap:12px; flex-wrap:wrap; justify-content:center} .btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:999px; font-weight:600; font-size:.94rem; transition:transform .12s, background .15s, border-color .15s; } .btn:active{transform:translateY(1px)} .btn-p{background:var(--moss); color:#08120d} .btn-p:hover{background:#6ee79b} .btn-s{border:1px solid var(--line-2); color:var(--txt)} .btn-s:hover{border-color:var(--moss); color:var(--moss)} .stats{display:flex; gap:44px; margin-top:58px; flex-wrap:wrap; justify-content:center} .stat b{display:block; font-size:1.7rem; font-weight:700; letter-spacing:-.03em} .stat span{font-size:.83rem; color:var(--txt-3)} /* ---------- SECTIONS ---------- */ section{padding:88px 0; border-bottom:1px solid var(--line)} .sec-head{margin-bottom:40px; max-width:62ch} .sec-tag{font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--moss); margin-bottom:12px} .sec-head h2{font-size:clamp(1.6rem,3.4vw,2.2rem); margin-bottom:12px} .sec-head p{color:var(--txt-2)} /* ---------- ARBRE ---------- */ .tree-layout{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:28px; align-items:start} .card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r)} .card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); } .card-head h3{font-size:.98rem} .tools{display:flex; gap:6px} .tool{padding:5px 11px; border:1px solid var(--line-2); border-radius:999px; font-size:.75rem; color:var(--txt-3); transition:.15s} .tool:hover{color:var(--moss); border-color:var(--moss)} .tree{padding:14px 16px; max-height:620px; overflow-y:auto} .tree ul{list-style:none; margin-left:15px; padding-left:13px; border-left:1px dashed var(--line-2)} .tree li{margin:1px 0} .node{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:5px 9px; border-radius:var(--r-s); transition:background .13s; } .node:hover{background:var(--panel-2)} .caret{ width:15px; flex:none; color:var(--txt-3); font-size:.62rem; transition:transform .18s; transform:rotate(-90deg); } li.open > .node .caret{transform:rotate(0)} li.open > ul{display:block} li > ul{display:none} .rank{ font-size:.6rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--txt-3); border:1px solid var(--line-2); border-radius:4px; padding:1px 5px; flex:none; } .n-name{font-size:.9rem; font-weight:550} .n-vern{font-size:.78rem; color:var(--txt-3)} .n-count{margin-left:auto; font-size:.7rem; color:var(--txt-3); flex:none} /* Le genre est le nœud pivot : il ouvre le panneau latéral. */ .node.genus .n-name{font-style:italic} .node.genus .rank{color:var(--moss); border-color:rgba(74,222,128,.35)} .node.genus.active{background:rgba(74,222,128,.13); box-shadow:inset 0 0 0 1px rgba(74,222,128,.3)} /* L'espèce quitte la page : on la signale comme un lien. */ .node.leaf .n-name{font-style:italic; font-weight:500} .node.leaf::before{content:""; width:6px; height:6px; border-radius:50%; flex:none; margin-left:15px} .node.leaf.amph::before{background:var(--amph)} .node.leaf.rept::before{background:var(--rept)} .node.leaf::after{content:"↗"; margin-left:auto; color:var(--txt-3); font-size:.72rem; opacity:0; transition:opacity .13s} .node.leaf:hover::after{opacity:1} .node.leaf:hover .n-name{color:var(--moss)} /* ---------- PANNEAU LATÉRAL : LES ESPÈCES DU GENRE ---------- */ .panel{position:sticky; top:88px; overflow:hidden} .panel-hero{ padding:22px 24px 18px; border-bottom:1px solid var(--line); background:linear-gradient(160deg, var(--panel-2), var(--panel)); } .pill{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; } .pill.amph{background:rgba(94,234,212,.14); color:var(--amph)} .pill.rept{background:rgba(251,191,36,.14); color:var(--rept)} .pill.iucn{background:rgba(74,222,128,.12); color:var(--moss)} .pill.iucn.VU,.pill.iucn.EN,.pill.iucn.CR{background:rgba(224,122,95,.16); color:#f0b8a6} .pill.iucn.NT{background:rgba(251,191,36,.14); color:var(--rept)} .pill.prot{background:rgba(167,139,250,.13); color:var(--violet)} .panel-hero h3{font-size:1.5rem; font-style:italic; margin:10px 0 4px} .panel-hero .sub{color:var(--txt-2); font-size:.9rem} .panel-list{padding:14px; display:flex; flex-direction:column; gap:12px; max-height:520px; overflow-y:auto} /* La carte espèce : image d'abord, c'est elle qui donne envie de cliquer. */ .sp-card{ display:flex; gap:14px; align-items:stretch; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-s); overflow:hidden; transition:border-color .16s, transform .16s; } .sp-card:hover{border-color:var(--moss); transform:translateX(3px)} .sp-card:hover .sp-go{color:var(--moss)} .thumb{position:relative; width:112px; flex:none; overflow:hidden; background:var(--panel-2)} .thumb img{width:100%; height:100%; object-fit:cover} /* Tant qu'aucune photo n'est déposée, le motif tient la place proprement : jamais d'icône d'image cassée. */ .thumb::before{ content:""; position:absolute; inset:0; z-index:0; background: radial-gradient(120% 90% at 20% 10%, rgba(74,222,128,.20), transparent 60%), repeating-linear-gradient(58deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px), linear-gradient(150deg, var(--panel-2), var(--bg-2)); } .thumb[data-g="rept"]::before{ background: radial-gradient(120% 90% at 20% 10%, rgba(251,191,36,.16), transparent 60%), repeating-linear-gradient(58deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px), linear-gradient(150deg, var(--panel-2), var(--bg-2)); } .thumb img{position:relative; z-index:1} .sp-card-body{padding:12px 14px 12px 0; flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center} .sp-card-body .sp-sci{font-style:italic; font-weight:600; font-size:.95rem} .sp-card-body .sp-vern{font-size:.82rem; color:var(--txt-2); margin-bottom:7px} .sp-tags{display:flex; gap:6px; flex-wrap:wrap; align-items:center} .sp-go{font-size:.75rem; color:var(--txt-3); margin-top:8px; transition:color .16s} .empty{padding:64px 26px; text-align:center; color:var(--txt-3); font-size:.9rem} .empty div{font-size:2.1rem; margin-bottom:12px; opacity:.5} .empty p{max-width:34ch; margin:0 auto} /* ---------- FICHE ESPÈCE (page entière, pleine largeur) ---------- */ .fiche-hero{ position:relative; min-height:clamp(340px,58vh,540px); display:flex; align-items:flex-end; border-bottom:1px solid var(--line); overflow:hidden; } .fiche-hero .bg{position:absolute; inset:0; z-index:0} .fiche-hero .bg img{width:100%; height:100%; object-fit:cover} /* Même logique que les vignettes : le fond vit sans photo. */ .fiche-hero .bg::before{ content:""; position:absolute; inset:0; background: radial-gradient(80% 70% at 78% 10%, rgba(74,222,128,.16), transparent 62%), radial-gradient(60% 60% at 8% 96%, rgba(15,118,110,.20), transparent 60%), repeating-linear-gradient(58deg, rgba(255,255,255,.022) 0 3px, transparent 3px 11px), linear-gradient(160deg, var(--panel-2), var(--bg)); } .fiche-hero[data-g="rept"] .bg::before{ background: radial-gradient(80% 70% at 78% 10%, rgba(251,191,36,.14), transparent 62%), radial-gradient(60% 60% at 8% 96%, rgba(120,85,31,.24), transparent 60%), repeating-linear-gradient(58deg, rgba(255,255,255,.022) 0 3px, transparent 3px 11px), linear-gradient(160deg, var(--panel-2), var(--bg)); } /* Voile de lisibilité : le texte doit tenir sur n'importe quelle photo. */ .fiche-hero .veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(12,20,16,.96) 8%, rgba(12,20,16,.72) 42%, rgba(12,20,16,.25) 100%); } .fiche-hero .wrap{position:relative; z-index:2; padding-top:56px; padding-bottom:40px} .crumb{display:flex; gap:8px; flex-wrap:wrap; font-size:.78rem; color:var(--txt-3); margin-bottom:18px} .crumb a:hover{color:var(--moss)} .crumb i{font-style:normal; opacity:.5} .crumb .sci{font-style:italic} .fiche-hero h1{font-size:clamp(2rem,5.5vw,3.5rem); font-style:italic; margin-bottom:8px} .fiche-hero .vern{font-size:clamp(1.05rem,2.4vw,1.5rem); color:var(--txt-2); font-weight:500; margin-bottom:20px} .fiche-tags{display:flex; gap:8px; flex-wrap:wrap} /* Bandeau de faits, pleine largeur */ .facts-strip{background:var(--bg-2); border-bottom:1px solid var(--line)} .facts-strip .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; padding:0} .fact{padding:22px 24px; border-right:1px solid var(--line)} .fact:last-child{border-right:0} .fact span{display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.09em; color:var(--txt-3); margin-bottom:4px} .fact b{font-size:1.02rem; font-weight:600} /* Corps : lecture au centre, encarts à droite */ .fiche-body{padding:72px 0 88px} .fiche-grid{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:48px; align-items:start} .block{margin-bottom:44px} .block h2{ font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--moss); margin-bottom:14px; } .block p{font-size:1.06rem; color:var(--txt-2); line-height:1.75} .block.lead p{font-size:1.18rem; color:var(--txt); line-height:1.7} .aside{position:sticky; top:88px; display:flex; flex-direction:column; gap:20px} .legal{padding:20px 22px; border-radius:var(--r); font-size:.92rem; line-height:1.6} .legal.protected{background:rgba(224,122,95,.09); border:1px solid rgba(224,122,95,.28); color:#f0b8a6} .legal b{display:block; margin-bottom:6px; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase} .aside-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden} .aside-card > h3{ padding:15px 20px; border-bottom:1px solid var(--line); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-3); } .aside-card .panel-list{padding:12px; gap:10px; max-height:none} .sibling{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--r-s); transition:background .14s} .sibling:hover{background:var(--panel-2)} .sibling.self{background:rgba(74,222,128,.1); box-shadow:inset 0 0 0 1px rgba(74,222,128,.25)} .sibling .dot{width:6px; height:6px; border-radius:50%; flex:none} .sibling .dot.amph{background:var(--amph)} .sibling .dot.rept{background:var(--rept)} .sibling .s-sci{font-style:italic; font-size:.9rem; font-weight:550} .sibling .s-vern{font-size:.78rem; color:var(--txt-3); margin-left:auto; text-align:right} /* Navigation espèce précédente / suivante */ .prevnext{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px} .pn{ padding:16px 18px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); transition:border-color .16s; } .pn:hover{border-color:var(--moss)} .pn span{display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.09em; color:var(--txt-3); margin-bottom:5px} .pn b{font-style:italic; font-size:.94rem; font-weight:600} .pn.next{text-align:right} /* ---------- CARTE DE FRANCE (page Rendez-vous) ---------- */ .ev-layout{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start} .map-card{padding:8px} svg.fr{width:100%; height:auto; display:block} .region{ fill:var(--panel-2); stroke:var(--bg); stroke-width:1.4; stroke-linejoin:round; vector-effect:non-scaling-stroke; transition:fill .16s; cursor:pointer; } .region:hover{fill:var(--line-2)} .region.sel{fill:var(--moss); stroke:var(--moss); stroke-width:2} .map-legend{display:flex; align-items:center; gap:9px; padding:10px 14px 6px; font-size:.72rem; color:var(--txt-3)} /* ---------- ÉTATS VIDES DES PAGES DE SECTION ---------- */ .page-head{padding:72px 0 44px; border-bottom:1px solid var(--line)} .page-head h1{font-size:clamp(1.9rem,4.4vw,2.8rem); margin-bottom:12px} .page-head p{color:var(--txt-2); max-width:62ch} .hollow{ margin:56px 0; padding:72px 30px; text-align:center; background:var(--panel); border:1px dashed var(--line-2); border-radius:var(--r); } .hollow .ico{font-size:2.6rem; margin-bottom:16px; opacity:.55} .hollow h2{font-size:1.25rem; margin-bottom:10px} .hollow p{color:var(--txt-2); max-width:46ch; margin:0 auto 22px} /* ---------- PIED ---------- */ footer{padding:52px 0 40px} .foot{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:center} .foot p{font-size:.83rem; color:var(--txt-3)} .foot-links{display:flex; gap:20px} .foot-links a{font-size:.85rem; color:var(--txt-2)} .foot-links a:hover{color:var(--moss)} /* ---------- RESPONSIVE ---------- */ @media(max-width:900px){ .tree-layout,.ev-layout,.fiche-grid{grid-template-columns:1fr} .panel,.aside{position:static} .facts-strip .wrap{grid-template-columns:1fr 1fr} .fact{border-bottom:1px solid var(--line)} .fact:nth-child(2){border-right:0} .nav-links{ display:none; position:absolute; top:64px; left:0; right:0; flex-direction:column; gap:0; padding:8px 24px 16px; background:var(--bg-2); border-bottom:1px solid var(--line); } .nav-links.on{display:flex} .nav-links a{padding:11px 0; border-bottom:1px solid var(--line)} .burger{display:block} .lang{order:3} section{padding:64px 0} .fiche-body{padding:52px 0 64px} .prevnext{grid-template-columns:1fr} }