/* Theme Name: Iles Lofoten Theme URI: https://iles-lofoten.com Author: Tom Lionne Description: Thème maison léger pour Iles Lofoten, carnet de voyage sur l'archipel arctique norvégien. Sans page builder, sans framework. Archétype éditorial glacial : hero cinématique + carte en verre dépoli, guide thématique, section saisons (aurores / soleil de minuit). Migration depuis Astra/Elementor. Version: 1.0.0 Requires at least: 6.0 Requires PHP: 8.0 License: GNU General Public License v2 or later Text Domain: lofoten */ /* ========================================================================== Tokens — palette glaciale ========================================================================== */ :root{ --sky:#7fb4d6; /* bleu glacier clair */ --blue:#2c6f97; /* bleu lisible : liens, CTA */ --blue-deep:#215877; --fjord:#103850; /* navy fjord : header/footer */ --deep:#0a2634; /* le plus profond */ --ice:#eef4f8; /* fond frost */ --ice-2:#f7fafc; --ink:#15262f; /* titres */ --text:#37505c; /* texte */ --muted:#6f8590; --line:#dde8ee; --white:#fff; --ember:#c15a34; /* accent chaud rare (rorbuer) : pastilles catégorie */ --radius:12px; --radius-lg:20px; --maxw:1240px; --read:750px; --shadow:0 20px 50px rgba(16,56,80,.16); --shadow-sm:0 8px 24px rgba(16,56,80,.10); --font-head:"Fraunces",Georgia,"Times New Roman",serif; --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; } /* ========================================================================== Reset / base ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--white);color:var(--text);font-family:var(--font-body); font-size:17px;line-height:1.75;font-weight:400;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:var(--blue);text-decoration:none} h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);line-height:1.08; font-weight:600;letter-spacing:-.01em;margin:0 0 .5em} h1{font-size:clamp(2.3rem,5.2vw,3.8rem)} h2{font-size:clamp(1.9rem,3.4vw,2.7rem)} h3{font-size:1.35rem} p{margin:0 0 1.1em} .lof-container{max-width:var(--maxw);margin:0 auto;padding:0 24px} .lof-kicker{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.22em; font-size:.74rem;font-weight:600;color:var(--blue);margin:0 0 .8rem} .lof-eyebrow{color:var(--muted)} .lof-center{text-align:center} /* Buttons */ .lof-btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-body); font-weight:600;font-size:.95rem;padding:.85em 1.5em;border-radius:100px; border:1.5px solid transparent;cursor:pointer;transition:.18s ease;line-height:1} .lof-btn--primary{background:var(--fjord);color:#fff;border-color:var(--fjord)} .lof-btn--primary:hover{background:var(--deep);border-color:var(--deep);transform:translateY(-1px)} .lof-btn--light{background:#fff;color:var(--fjord);border-color:#fff} .lof-btn--light:hover{background:transparent;color:#fff} .lof-btn--ghost{background:transparent;color:var(--fjord);border-color:var(--line)} .lof-btn--ghost:hover{border-color:var(--blue);color:var(--blue)} .lof-btn .lof-arrow{transition:transform .18s ease} .lof-btn:hover .lof-arrow{transform:translateX(3px)} /* ========================================================================== Header (frost, éditorial) ========================================================================== */ .lof-site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9); backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)} .lof-site-header .lof-container{display:flex;align-items:center;gap:1.5rem;min-height:76px} .lof-brand{display:flex;align-items:center;gap:.6rem;flex-shrink:0;color:var(--ink)} .lof-brand svg{display:block;flex-shrink:0} .lof-brand img{max-height:46px;width:auto} .lof-brand__name{font-family:var(--font-head);font-weight:600;font-size:1.35rem;color:var(--ink);letter-spacing:-.01em} .lof-nav{display:flex;gap:1.7rem;margin-left:auto;list-style:none;padding:0} .lof-nav ul{display:contents;list-style:none;margin:0;padding:0} .lof-nav li{list-style:none;margin:0;padding:0;position:relative} .lof-nav a{font-family:var(--font-body);font-weight:500;font-size:.94rem;color:var(--ink);padding:.5rem 0;position:relative} .lof-nav a:hover{color:var(--blue)} .lof-nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:var(--blue);transition:.2s} .lof-nav a:hover::after{width:100%} .lof-nav li.menu-item-has-children>a::after{display:none} .lof-nav ul.sub-menu{position:absolute;top:100%;left:0;min-width:210px;background:#fff;border:1px solid var(--line); border-radius:12px;box-shadow:var(--shadow);padding:8px;display:none;flex-direction:column;z-index:60} .lof-nav li:hover>ul.sub-menu{display:flex} .lof-nav ul.sub-menu a{padding:.55rem .8rem;border-radius:8px;font-size:.9rem} .lof-nav ul.sub-menu a:hover{background:var(--ice)} .lof-header-actions{display:flex;align-items:center;gap:.6rem;flex-shrink:0} .lof-search-toggle{background:var(--ice);border:0;width:40px;height:40px;border-radius:50%;color:var(--fjord);cursor:pointer;display:grid;place-items:center;transition:.18s} .lof-search-toggle:hover{background:var(--sky);color:#fff} .lof-nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.4rem;flex-direction:column;gap:5px} .lof-nav-toggle span{width:26px;height:2px;background:var(--ink);display:block;transition:.2s} .lof-searchbar{background:var(--fjord);display:none} .lof-searchbar.lof-open{display:block} .lof-searchbar form{max-width:640px;margin:0 auto;display:flex;gap:.5rem;padding:16px 24px} .lof-searchbar input{flex:1;border:0;border-radius:100px;padding:.85em 1.3em;font-family:var(--font-body);font-size:1rem} .lof-searchbar button{border:0;background:var(--sky);color:var(--deep);border-radius:100px;padding:0 1.4em;font-weight:600;cursor:pointer} /* ========================================================================== Hero cinématique + carte verre dépoli ========================================================================== */ .lof-hero{position:relative;min-height:80vh;display:flex;align-items:flex-end;background:var(--fjord);overflow:hidden} .lof-hero__img{position:absolute;inset:0} .lof-hero__img img{width:100%;height:100%;object-fit:cover} .lof-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,38,52,.15),rgba(10,38,52,.35) 60%,rgba(10,38,52,.6))} .lof-hero__inner{position:relative;z-index:2;width:100%;padding:0 0 56px} .lof-hero__card{max-width:620px;background:rgba(255,255,255,.14);backdrop-filter:saturate(1.3) blur(16px); border:1px solid rgba(255,255,255,.28);border-radius:var(--radius-lg);padding:34px 38px;color:#fff} .lof-hero__kicker{text-transform:uppercase;letter-spacing:.22em;font-size:.74rem;font-weight:600;color:#eaf3f9;margin:0 0 .8rem} .lof-hero__title{color:#fff;font-size:clamp(2rem,4.4vw,3.2rem);margin:0 0 .6rem;text-shadow:0 2px 24px rgba(0,0,0,.28)} .lof-hero__title a{color:#fff} .lof-hero__excerpt{color:rgba(255,255,255,.92);font-size:1.08rem;margin:0 0 1.3rem} .lof-hero__meta{display:flex;gap:.9rem;align-items:center;font-size:.85rem;color:rgba(255,255,255,.85);flex-wrap:wrap} /* ========================================================================== Sections ========================================================================== */ .lof-section{padding:70px 0} .lof-section--ice{background:var(--ice)} .lof-section__head{text-align:center;max-width:640px;margin:0 auto 42px} .lof-section__head.lof-left{text-align:left;margin-left:0} .lof-section__head h2{margin:0} .lof-section__head p{margin:.5rem 0 0} /* Guide thématique (catégories) */ .lof-guide{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .lof-guide__card{position:relative;display:flex;flex-direction:column;justify-content:flex-end; min-height:180px;border-radius:var(--radius-lg);overflow:hidden;background:var(--fjord);color:#fff;padding:22px} .lof-guide__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;transition:.4s ease} .lof-guide__card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,38,52,.1),rgba(10,38,52,.75))} .lof-guide__card:hover img{transform:scale(1.06);opacity:.8} .lof-guide__card span{position:relative;z-index:2} .lof-guide__name{font-family:var(--font-head);font-weight:600;font-size:1.35rem;display:block} .lof-guide__count{font-size:.82rem;color:rgba(255,255,255,.85)} /* Grille articles */ .lof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px} .lof-card{display:flex;flex-direction:column;transition:.2s ease} .lof-card__media{aspect-ratio:3/2;overflow:hidden;background:var(--ice);display:block;border-radius:var(--radius-lg)} .lof-card__media img{width:100%;height:100%;object-fit:cover;transition:.5s ease} .lof-card:hover .lof-card__media img{transform:scale(1.04)} .lof-card__ph{width:100%;height:100%;background:linear-gradient(135deg,var(--sky),var(--fjord));display:grid;place-items:center} .lof-card__ph svg{width:60px;height:60px;opacity:.9} .lof-card__body{padding:16px 2px 0;display:flex;flex-direction:column;gap:.5rem;flex:1} .lof-card__cat{align-self:flex-start;font-family:var(--font-body);text-transform:uppercase;letter-spacing:.09em; font-size:.66rem;font-weight:700;color:#fff;background:var(--ember);border-radius:100px;padding:.28rem .7rem} .lof-card__title{font-family:var(--font-head);font-weight:600;font-size:1.3rem;line-height:1.16;color:var(--ink);margin:0} .lof-card:hover .lof-card__title{color:var(--blue)} .lof-card__excerpt{color:var(--muted);font-size:.94rem;margin:0} .lof-card__meta{margin-top:auto;padding-top:.5rem;font-size:.8rem;color:var(--muted);display:flex;gap:.5rem;align-items:center} /* Section saisons (aurores / soleil de minuit) */ .lof-seasons{display:grid;grid-template-columns:1fr 1fr;gap:24px} .lof-season{position:relative;min-height:400px;border-radius:var(--radius-lg);overflow:hidden;display:flex;align-items:flex-end;color:#fff;background:var(--deep)} .lof-season img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.5s ease} .lof-season:hover img{transform:scale(1.05)} .lof-season::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,38,52,.05),rgba(10,38,52,.82))} .lof-season__body{position:relative;z-index:2;padding:30px 32px} .lof-season__body .lof-kicker{color:#bfe0f2} .lof-season__body h3{color:#fff;font-size:1.7rem;margin:.2rem 0 .5rem} .lof-season__body p{color:rgba(255,255,255,.9);margin:0 0 1rem;font-size:.97rem} /* Newsletter */ .lof-news{background:linear-gradient(120deg,var(--fjord),var(--blue));color:#fff} .lof-news .lof-container{padding:56px 24px;display:flex;align-items:center;gap:38px;justify-content:space-between;flex-wrap:wrap} .lof-news__txt{max-width:46ch} .lof-news__txt h2{color:#fff;margin:.2rem 0 .4rem} .lof-news__txt p{color:rgba(255,255,255,.84);margin:0} .lof-news__form{display:flex;gap:.6rem;flex:1;min-width:290px;max-width:460px} .lof-news__form input{flex:1;border:0;border-radius:100px;padding:.9em 1.3em;font-family:var(--font-body);font-size:.95rem} /* ========================================================================== Single article ========================================================================== */ .lof-breadcrumb{font-size:.85rem;color:var(--muted);padding:22px 0 2px} .lof-breadcrumb a{color:var(--muted)} .lof-breadcrumb a:hover{color:var(--blue)} .lof-breadcrumb .lof-sep{margin:0 .45rem;color:var(--sky)} .lof-article-head{max-width:var(--read);margin:0 auto;text-align:center;padding:10px 0 28px} .lof-article-head .lof-card__cat{display:inline-block;margin-bottom:1rem} .lof-article-head h1{margin-bottom:.6rem} .lof-article-meta{color:var(--muted);font-size:.9rem;display:flex;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap} .lof-article-cover{max-width:1080px;margin:0 auto 44px} .lof-article-cover img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow)} .lof-article-body{max-width:var(--read);margin:0 auto;font-size:1.13rem;line-height:1.8;color:var(--text)} .lof-article-body h2{margin:2.3rem 0 .9rem;font-size:1.8rem} .lof-article-body h3{margin:1.8rem 0 .7rem;font-size:1.35rem} .lof-article-body p{margin:0 0 1.3em} .lof-article-body a{color:var(--blue);text-decoration:underline;text-underline-offset:3px} .lof-article-body a:hover{color:var(--blue-deep)} .lof-article-body ul,.lof-article-body ol{margin:0 0 1.4em;padding-left:1.3em} .lof-article-body li{margin:.5em 0} .lof-article-body li::marker{color:var(--sky)} .lof-article-body img{border-radius:var(--radius);margin:1.7em 0} .lof-article-body blockquote{border-left:4px solid var(--sky);background:var(--ice);margin:1.7em 0;padding:1.1em 1.4em;border-radius:0 var(--radius) var(--radius) 0;font-style:italic;color:var(--fjord)} .lof-article-body table{width:100%;border-collapse:collapse;margin:1.7em 0;font-size:.98rem} .lof-article-body th{background:var(--fjord);color:#fff;font-family:var(--font-body);font-weight:600;text-align:left;padding:.8em 1em} .lof-article-body td{border-bottom:1px solid var(--line);padding:.8em 1em} .lof-article-body tr:nth-child(even) td{background:var(--ice)} /* Callout (couvre aussi .ilof-callout des articles existants) */ .lof-callout,.callout,.ilof-callout{max-width:var(--read);margin:0 auto 32px;background:var(--ice); border-left:5px solid var(--sky);border-radius:0 var(--radius-lg) var(--radius-lg) 0;padding:24px 30px} .lof-callout__label,.callout__label,.ilof-callout__label{font-family:var(--font-head);font-weight:600;font-size:1.15rem;color:var(--fjord);display:block;margin-bottom:.6rem} .lof-callout__body,.callout__body,.ilof-callout__body{margin:0;color:var(--text)} .lof-callout__body p:last-child,.callout__body p:last-child,.ilof-callout__body p:last-child{margin-bottom:0} .lof-callout ul,.callout ul,.ilof-callout ul{margin:0;padding-left:1.2em} .lof-callout li,.callout li,.ilof-callout li{margin:.4em 0} .ilof-callout li::marker,.lof-callout li::marker,.callout li::marker{color:var(--sky)} .lof-article-footer{max-width:var(--read);margin:42px auto 0;padding-top:24px;border-top:1px solid var(--line)} .lof-tags a{display:inline-block;font-size:.82rem;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:.3rem .85rem;margin:.2rem .3rem .2rem 0} .lof-tags a:hover{background:var(--ice);border-color:var(--sky);color:var(--blue)} /* Page + archive hero */ .lof-page-hero{background:var(--fjord);color:#fff;padding:60px 0;text-align:center} .lof-page-hero .lof-kicker{color:#9fd0ea;margin-bottom:.5rem} .lof-page-hero h1{color:#fff} .lof-page-hero .lof-eyebrow{color:rgba(255,255,255,.85)} .lof-page-body{max-width:var(--read);margin:48px auto;padding:0 24px} /* ========================================================================== Footer (fjord) ========================================================================== */ .lof-site-footer{background:var(--fjord);color:rgba(255,255,255,.74);padding:60px 0 28px} .lof-footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px} .lof-site-footer h4{color:#fff;font-family:var(--font-head);font-weight:600;font-size:1rem;margin-bottom:1rem} .lof-site-footer ul{list-style:none;margin:0;padding:0} .lof-site-footer li{margin:.5rem 0;font-size:.92rem} .lof-site-footer a{color:rgba(255,255,255,.74)} .lof-site-footer a:hover{color:#fff} .lof-footer-brand__name{font-family:var(--font-head);font-size:1.5rem;color:#fff;display:block;margin-bottom:.6rem} .lof-footer-brand p{font-size:.92rem;max-width:38ch} .lof-footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:44px;padding-top:20px;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem} /* Pagination */ .pagination{display:flex;gap:.5rem;justify-content:center;margin:50px 0 10px} .pagination a,.pagination span{font-family:var(--font-body);font-weight:600;border:1px solid var(--line);border-radius:10px;padding:.55rem .9rem;color:var(--ink)} .pagination a:hover{background:var(--ice);border-color:var(--sky)} .pagination .current{background:var(--fjord);color:#fff;border-color:var(--fjord)} /* Search form fallback */ .search-form{display:flex;gap:.5rem} .search-form .search-field{flex:1;border:1px solid var(--line);border-radius:100px;padding:.8em 1.2em;font-family:var(--font-body)} .search-form .search-submit{border:0;background:var(--fjord);color:#fff;border-radius:100px;padding:.7em 1.4em;font-weight:600;cursor:pointer} /* ========================================================================== Responsive ========================================================================== */ @media(max-width:980px){ .lof-guide{grid-template-columns:1fr 1fr} .lof-grid{grid-template-columns:1fr 1fr} .lof-seasons{grid-template-columns:1fr} .lof-footer-grid{grid-template-columns:1fr 1fr} } @media(max-width:680px){ .lof-nav{display:none} .lof-nav-toggle{display:flex} .lof-nav.lof-open{display:flex;position:absolute;top:76px;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:8px 24px 16px;box-shadow:var(--shadow);margin:0;z-index:60} .lof-nav.lof-open li{width:100%} .lof-nav.lof-open a{padding:.8rem 0;border-bottom:1px solid var(--line);width:100%} .lof-nav.lof-open ul.sub-menu{position:static;display:flex;box-shadow:none;border:0;padding:0 0 0 12px} .lof-grid,.lof-guide,.lof-footer-grid{grid-template-columns:1fr} .lof-hero{min-height:70vh} .lof-hero__card{padding:26px 24px} .lof-news .lof-container{flex-direction:column;align-items:flex-start} .lof-news__form{max-width:none;width:100%} } /* ========================================================================== Encart « Où dormir » (rorbu) : bloc de réservation ========================================================================== */ .ilof-stay{display:block;max-width:var(--read);margin:2.6rem auto .9rem; background:linear-gradient(180deg,#fdf7f3 0%,#fbefe7 100%); padding:24px 28px 22px; color:var(--text);text-decoration:none; transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease} .lof-article-body a.ilof-stay{text-decoration:none;color:var(--text)} .ilof-stay__kicker{display:flex;align-items:center;gap:.55em;font-family:var(--font-body); text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;font-weight:700; color:var(--ember);margin:0 0 .9rem} .ilof-stay__kicker::before{content:"";width:19px;height:19px;flex:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c15a34' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 10.6 12 3.2l9.4 7.4'/%3E%3Cpath d='M5.2 10.6v7.2h13.6v-7.2'/%3E%3Cpath d='M7.4 17.8v3.1M16.6 17.8v3.1'/%3E%3Cpath d='M1.8 21h20.4'/%3E%3Cpath d='M10.3 17.8v-4.2h3.4v4.2'/%3E%3C/svg%3E") no-repeat center/contain} .ilof-stay__top{display:flex;align-items:flex-start;gap:1rem} .ilof-stay__id{display:block;min-width:0} .ilof-stay__name{display:block;font-family:var(--font-head);font-weight:600;font-size:1.4rem; line-height:1.15;color:var(--ink);margin:0 0 .3rem} .ilof-stay__where{display:block;font-size:.86rem;line-height:1.5;color:var(--muted);margin:0} .ilof-stay__score{flex:none;margin-left:auto;text-align:center;background:var(--fjord); color:#fff;border-radius:10px 10px 10px 3px;padding:.5rem .55rem .45rem;min-width:54px; font-family:var(--font-body)} .ilof-stay__score b{display:block;font-size:1.2rem;font-weight:700;line-height:1} .ilof-stay__score span{display:block;font-size:.58rem;letter-spacing:.08em; text-transform:uppercase;opacity:.82;margin-top:.25rem} .ilof-stay__hook{display:block;margin:1rem 0 1.2rem;font-size:1rem;line-height:1.62;color:var(--text)} .ilof-stay__cta{display:inline-flex;align-items:center;gap:.55em;background:var(--ember); color:#fff;font-family:var(--font-body);font-weight:600;font-size:.93rem; padding:.78em 1.4em;border-radius:100px;line-height:1;transition:background .18s ease} .ilof-stay__cta::after{content:"\2192";display:inline-block;transition:transform .18s ease} .ilof-stay:hover .ilof-stay__cta{background:#a54823} .ilof-stay:hover .ilof-stay__cta::after{transform:translateX(3px)} .ilof-stay__more{max-width:var(--read);margin:0 auto 2.6rem;padding-left:5px; font-size:.87rem;line-height:1.5;color:var(--muted)} .lof-article-body p.ilof-stay__more{margin:0 auto 2.6rem} @media(max-width:620px){ .ilof-stay{padding:20px 20px 18px;border-radius:0 var(--radius) var(--radius) 0} .ilof-stay__name{font-size:1.18rem} .ilof-stay__top{gap:.7rem} .ilof-stay__score{min-width:48px;padding:.4rem .45rem} } /* ========================================================================== Bandeau « réserver » en haut d'article (fjord) ========================================================================== */ .ilof-book{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;position:relative; overflow:hidden;max-width:var(--read);margin:2rem auto 2.6rem;background:var(--fjord); border-radius:var(--radius-lg);padding:22px 26px;text-decoration:none; color:rgba(255,255,255,.82); transition:box-shadow .22s ease,transform .22s ease} .lof-article-body a.ilof-book{text-decoration:none;color:rgba(255,255,255,.82)} .ilof-book::after{content:"";position:absolute;right:-18px;bottom:-22px;width:200px;height:150px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath d='M2 44 22 10l10 16 8-12 22 30H2Z' fill='%23ffffff'/%3E%3Cpath d='M22 10l6.5 10.4L24 27l-4-6.5L22 10Z' fill='%237fb4d6'/%3E%3C/svg%3E") no-repeat right bottom/contain; opacity:.1;pointer-events:none} .ilof-book__txt{flex:1 1 300px;min-width:0;position:relative;z-index:1} .ilof-book__kicker{display:block;font-family:var(--font-body);font-size:.67rem; letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--sky); margin:0 0 .45rem} .ilof-book__title{display:block;font-family:var(--font-head);font-weight:600; font-size:1.34rem;line-height:1.15;color:#fff;margin:0 0 .4rem} .ilof-book__sub{display:block;font-family:var(--font-body);font-size:.94rem;line-height:1.55; color:rgba(255,255,255,.78)} .ilof-book__cta{flex:none;position:relative;z-index:1;display:inline-flex;align-items:center; gap:.55em;background:var(--ember);color:#fff;font-family:var(--font-body);font-weight:600; font-size:.93rem;padding:.8em 1.45em;border-radius:100px;line-height:1; transition:background .18s ease} .ilof-book__cta::after{content:"\2192";display:inline-block;transition:transform .18s ease} .ilof-book:hover .ilof-book__cta{background:#a54823} .ilof-book:hover .ilof-book__cta::after{transform:translateX(3px)} @media(max-width:620px){ .ilof-book{padding:20px;gap:1.1rem;border-radius:var(--radius)} .ilof-book__title{font-size:1.18rem} .ilof-book__cta{width:100%;justify-content:center} } /* ========================================================================== Encart « excursion » (bateau) : bloc activite ========================================================================== */ .ilof-do{display:block;max-width:var(--read);margin:2.5rem auto;background:#fff; border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 26px; color:var(--text);text-decoration:none; transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease} .lof-article-body a.ilof-do{text-decoration:none;color:var(--text)} .ilof-do__kicker{display:flex;align-items:center;gap:.55em;font-family:var(--font-body); text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;font-weight:700; color:var(--blue);margin:0 0 .85rem} .ilof-do__kicker::before{content:"";width:20px;height:20px;flex:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c6f97' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 14.4h17.2l-2.7 4.3H6.1z'/%3E%3Cpath d='M12.6 14.4V3.4l5.6 11'/%3E%3Cpath d='M11 14.4H6.2L11 8.2z'/%3E%3Cpath d='M2 21.3c1.3 0 1.3-1 2.6-1s1.3 1 2.7 1 1.3-1 2.7-1 1.3 1 2.6 1 1.4-1 2.7-1 1.3 1 2.7 1'/%3E%3C/svg%3E") no-repeat center/contain} .ilof-do__top{display:flex;align-items:flex-start;gap:1rem} .ilof-do__id{display:block;min-width:0} .ilof-do__name{display:block;font-family:var(--font-head);font-weight:600;font-size:1.34rem; line-height:1.18;color:var(--ink);margin:0 0 .3rem} .ilof-do__meta{display:block;font-size:.86rem;line-height:1.5;color:var(--muted);margin:0} .ilof-do__score{flex:none;margin-left:auto;text-align:center;background:var(--ice); border:1px solid var(--sky);border-radius:100px;padding:.45rem .8rem;min-width:64px; font-family:var(--font-body);color:var(--blue-deep)} .ilof-do__score b{display:block;font-size:1.1rem;font-weight:700;line-height:1} .ilof-do__score span{display:block;font-size:.58rem;letter-spacing:.08em; text-transform:uppercase;opacity:.75;margin-top:.22rem} .ilof-do__hook{display:block;margin:1rem 0 1.15rem;font-size:1rem;line-height:1.62;color:var(--text)} .ilof-do__cta{display:inline-flex;align-items:center;gap:.55em;background:var(--blue); color:#fff;font-family:var(--font-body);font-weight:600;font-size:.93rem; padding:.78em 1.4em;border-radius:100px;line-height:1;transition:background .18s ease} .ilof-do__cta::after{content:"\2192";display:inline-block;transition:transform .18s ease} .ilof-do:hover .ilof-do__cta{background:var(--blue-deep)} .ilof-do:hover .ilof-do__cta::after{transform:translateX(3px)} @media(max-width:620px){ .ilof-do{padding:20px;border-radius:var(--radius)} .ilof-do__name{font-size:1.16rem} .ilof-do__top{gap:.7rem} .ilof-do__score{min-width:56px;padding:.4rem .6rem} } /* ========================================================================== v2 des encarts d'affiliation : grammaire commune, 3 teintes (deploye sur tout le site) ========================================================================== */ .ilof-book, .ilof-stay, .ilof-do{ position:relative;overflow:hidden;max-width:var(--read); border-radius:var(--radius-lg);border:1px solid;padding:24px 28px; text-decoration:none; transition:background-color .24s ease,border-color .24s ease,box-shadow .24s ease} .ilof-book::after, .ilof-stay::after, .ilof-do::after{ content:"";position:absolute;right:-24px;bottom:-26px;width:148px;height:111px; background-repeat:no-repeat;background-position:right bottom;background-size:contain; pointer-events:none;opacity:.07;transition:opacity .24s ease,transform .24s ease} .ilof-book:hover::after, .ilof-stay:hover::after, .ilof-do:hover::after{opacity:.15;transform:translateX(-8px)} .ilof-book:hover, .ilof-stay:hover, .ilof-do:hover{transform:none} /* --- teinte 1 : le bandeau de listing (fjord) --- */ .ilof-book{background:var(--fjord);border-color:#1d5375; box-shadow:0 14px 30px rgba(16,56,80,.28);margin:2rem auto 2.6rem} .ilof-book:hover{background:#164a6b;border-color:var(--sky); box-shadow:0 14px 30px rgba(16,56,80,.28)} .ilof-book::after{opacity:.11;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath d='M2 44 22 10l10 16 8-12 22 30H2Z' fill='%23ffffff'/%3E%3C/svg%3E")} /* --- teinte 2 : l'hebergement (ember) --- */ .ilof-stay{background:#fdf7f3;border-color:#eed9cb; box-shadow:0 14px 30px rgba(193,90,52,.17);margin:2.6rem auto .9rem} .ilof-stay:hover{background:#fbeee4;border-color:#d79a76; box-shadow:0 14px 30px rgba(193,90,52,.17)} .ilof-stay::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath fill='%23c15a34' d='M4 22 32 3l28 19h-7v14H11V22H4Z'/%3E%3Cpath fill='%23c15a34' d='M17 36h5v9h-5zM42 36h5v9h-5z'/%3E%3Cpath fill='%23c15a34' d='M1 45h62v3H1z'/%3E%3C/svg%3E")} /* --- teinte 3 : l'excursion (bleu glacier) --- */ .ilof-do{background:#f6fbfd;border-color:#d7e7f0; box-shadow:0 14px 30px rgba(44,111,151,.16);margin:2.5rem auto} .ilof-do:hover{background:#ecf5fb;border-color:var(--sky); box-shadow:0 14px 30px rgba(44,111,151,.16)} .ilof-do::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath fill='%232c6f97' d='M5 29h54l-9 13H14z'/%3E%3Cpath fill='%232c6f97' d='M34 27V2l17 25z'/%3E%3Cpath fill='%232c6f97' d='M30 27H13L30 8z'/%3E%3C/svg%3E")} /* --- rythme interne commun --- */ .ilof-book__txt, .ilof-stay__top, .ilof-do__top{position:relative;z-index:1} .ilof-stay__hook, .ilof-do__hook{position:relative;z-index:1;margin:1rem 0 1.2rem} .ilof-book__cta, .ilof-stay__cta, .ilof-do__cta{position:relative;z-index:1; padding:.78em 1.4em;border-radius:100px;font-size:.93rem;font-weight:600} /* pastille de note : meme forme et meme couleur partout */ .ilof-stay__score, .ilof-do__score{flex:none;margin-left:auto;text-align:center; background:var(--fjord);border:0;color:#fff;border-radius:12px; padding:.5rem .6rem .45rem;min-width:58px;font-family:var(--font-body)} .ilof-stay__score b, .ilof-do__score b{display:block;font-size:1.2rem;font-weight:700;line-height:1;color:#fff} .ilof-stay__score span, .ilof-do__score span{display:block;font-size:.58rem;letter-spacing:.08em; text-transform:uppercase;opacity:.8;margin-top:.25rem;color:#fff} @media(max-width:620px){ .ilof-book, .ilof-stay, .ilof-do{padding:20px;border-radius:var(--radius)} .ilof-book::after, .ilof-stay::after, .ilof-do::after{width:130px;height:98px;opacity:.07} } /* ========================================================================== Recap haut d'article : hebergements + activites dans un seul panneau ========================================================================== */ .ilof-book{display:block;padding:26px 28px 24px} .ilof-book:hover{background:var(--fjord);border-color:#1d5375} .ilof-book:hover::after{opacity:.11;transform:none} .ilof-book__head{position:relative;z-index:1;margin:0 0 1.15rem} .ilof-book__tiles{position:relative;z-index:1;display:grid; grid-template-columns:1fr 1fr;gap:14px} .ilof-book__tile{display:block;padding:16px 18px 15px;border-radius:14px; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14); text-decoration:none;color:rgba(255,255,255,.8); transition:background-color .2s ease,border-color .2s ease} .lof-article-body a.ilof-book__tile{text-decoration:none;color:rgba(255,255,255,.8)} .ilof-book__tile:hover{background:rgba(255,255,255,.13)} .ilof-book__tile--stay:hover{border-color:var(--ember)} .ilof-book__tile--do:hover{border-color:var(--sky)} .ilof-book__tlabel{display:flex;align-items:center;gap:.5em;font-family:var(--font-body); text-transform:uppercase;letter-spacing:.18em;font-size:.64rem;font-weight:700; margin:0 0 .55rem} .ilof-book__tile--stay .ilof-book__tlabel{color:#e9a882} .ilof-book__tile--do .ilof-book__tlabel{color:var(--sky)} .ilof-book__tlabel::before{content:"";width:16px;height:16px;flex:none; background-repeat:no-repeat;background-position:center;background-size:contain} .ilof-book__tile--stay .ilof-book__tlabel::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9a882' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 10.6 12 3.2l9.4 7.4'/%3E%3Cpath d='M5.2 10.6v7.2h13.6v-7.2'/%3E%3Cpath d='M7.4 17.8v3.1M16.6 17.8v3.1'/%3E%3Cpath d='M1.8 21h20.4'/%3E%3C/svg%3E")} .ilof-book__tile--do .ilof-book__tlabel::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fb4d6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 14.4h17.2l-2.7 4.3H6.1z'/%3E%3Cpath d='M12.6 14.4V3.4l5.6 11'/%3E%3Cpath d='M11 14.4H6.2L11 8.2z'/%3E%3Cpath d='M2 21.3c1.3 0 1.3-1 2.6-1s1.3 1 2.7 1 1.3-1 2.7-1 1.3 1 2.6 1 1.4-1 2.7-1 1.3 1 2.7 1'/%3E%3C/svg%3E")} .ilof-book__tnum{display:block;font-family:var(--font-head);font-weight:600; font-size:1.55rem;line-height:1;color:#fff;margin:0 0 .3rem} .ilof-book__tsub{display:block;font-size:.85rem;line-height:1.45; color:rgba(255,255,255,.72);margin:0 0 .8rem} .ilof-book__tgo{display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-body); font-weight:600;font-size:.85rem;color:#fff} .ilof-book__tgo::after{content:"\2192";display:inline-block;transition:transform .18s ease} .ilof-book__tile:hover .ilof-book__tgo::after{transform:translateX(3px)} @media(max-width:620px){ .ilof-book__tiles{grid-template-columns:1fr} .ilof-book__tnum{font-size:1.35rem} } /* ========================================================================== Carte des hebergements (iframe Stay22) ========================================================================== */ .ilof-map{position:relative;max-width:var(--read);margin:2.5rem auto;background:#fff; border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 20px 16px; box-shadow:0 14px 30px rgba(16,56,80,.12)} .ilof-map__kicker{display:flex;align-items:center;gap:.55em;font-family:var(--font-body); text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;font-weight:700; color:var(--blue);margin:0 0 .85rem} .ilof-map__kicker::before{content:"";width:18px;height:18px;flex:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c6f97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s7-6.1 7-11.2a7 7 0 1 0-14 0c0 5.1 7 11.2 7 11.2z'/%3E%3Ccircle cx='12' cy='10.1' r='2.6'/%3E%3C/svg%3E") no-repeat center/contain} .ilof-map__frame{display:block;width:100%;height:400px;border:0;border-radius:var(--radius); background:var(--ice)} .ilof-map__cap{display:block;font-size:.83rem;line-height:1.5;color:var(--muted);margin:.85rem 0 0} @media(max-width:620px){ .ilof-map{padding:16px 16px 14px;border-radius:var(--radius)} .ilof-map__frame{height:320px} } /* ========================================================================== Colonne laterale collante : la carte a droite du texte ========================================================================== */ .lof-withaside{max-width:var(--maxw);margin:0 auto;padding:0 24px; display:grid;grid-template-columns:minmax(0,var(--read)) 340px;gap:0 44px; justify-content:center;align-items:start} .lof-withaside .lof-article-body{max-width:none;margin:0;min-width:0} .lof-aside{height:100%} .lof-aside__inner{position:sticky;top:96px} .lof-aside .ilof-map{max-width:none;margin:0;padding:16px 16px 13px} .lof-aside .ilof-map__frame{height:min(470px,calc(100vh - 265px))} .lof-aside .ilof-map__cap{font-size:.78rem;margin-top:.7rem} @media(max-width:1180px){ .lof-withaside{display:block;max-width:none;padding:0} .lof-withaside .lof-article-body{max-width:var(--read);margin:0 auto} .lof-aside{height:auto} .lof-aside__inner{position:static} .lof-aside .ilof-map{max-width:var(--read);margin:2.5rem auto;padding:20px 20px 16px} .lof-aside .ilof-map__frame{height:400px} .lof-aside .ilof-map__cap{font-size:.83rem;margin-top:.85rem} } @media(max-width:620px){ .lof-aside .ilof-map{padding:16px 16px 14px;border-radius:var(--radius)} .lof-aside .ilof-map__frame{height:320px} } /* Titre recale sur la colonne de texte quand une colonne laterale est presente */ @media(min-width:1181px){ /* titre centre sur la page : il coiffe la couverture, pas la seule colonne de texte */ .lof-has-aside .lof-article-cover{max-width:1134px} } /* ========================================================================== Home v2 : sections editoriales (iles / villages / que faire / ciel / preparer) ========================================================================== */ /* Les huit iles : tuiles image, 4 par rangee */ .lof-isles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .lof-isle{position:relative;display:flex;align-items:flex-end;min-height:230px; border-radius:var(--radius-lg);overflow:hidden;background:var(--fjord);color:#fff; padding:20px 22px;text-decoration:none} .lof-isle img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;transition:.45s ease} .lof-isle::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(10,38,52,.08),rgba(10,38,52,.8))} .lof-isle:hover img{transform:scale(1.06);opacity:.82} .lof-isle__body{position:relative;z-index:2} .lof-isle__name{display:block;font-family:var(--font-head);font-weight:600;font-size:1.3rem; line-height:1.12;color:#fff} .lof-isle__tag{display:block;font-size:.82rem;line-height:1.35;color:rgba(255,255,255,.82);margin-top:.3rem} /* Les villages : index typographique, sans image */ .lof-villages{list-style:none;margin:0;padding:0;columns:2;column-gap:56px} .lof-villages li{break-inside:avoid;margin:0} .lof-villages a{display:flex;align-items:baseline;gap:.9rem;padding:.95rem 0; border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:.18s ease} .lof-villages a:hover{color:var(--blue);padding-left:.4rem} .lof-villages__num{flex:none;font-family:var(--font-body);font-size:.72rem;font-weight:700; letter-spacing:.08em;color:var(--sky)} .lof-villages__name{font-family:var(--font-head);font-weight:600;font-size:1.22rem} .lof-villages__isle{margin-left:auto;font-size:.82rem;color:var(--muted);flex:none} /* Que faire : rangees larges image + texte */ .lof-doing{display:grid;grid-template-columns:1fr 1fr;gap:20px 30px} .lof-do-row{display:flex;gap:20px;align-items:stretch;text-decoration:none;color:var(--text); border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff; transition:border-color .2s ease,box-shadow .2s ease} .lof-do-row:hover{border-color:var(--sky);box-shadow:0 14px 30px rgba(16,56,80,.12)} .lof-do-row__media{flex:none;width:158px;position:relative;overflow:hidden;background:var(--ice)} .lof-do-row__media img{width:100%;height:100%;object-fit:cover;transition:.45s ease} .lof-do-row:hover .lof-do-row__media img{transform:scale(1.06)} .lof-do-row__body{display:flex;flex-direction:column;gap:.4rem;padding:18px 20px 16px 0;min-width:0} .lof-do-row__title{font-family:var(--font-head);font-weight:600;font-size:1.16rem;line-height:1.18;color:var(--ink)} .lof-do-row:hover .lof-do-row__title{color:var(--blue)} .lof-do-row__excerpt{font-size:.9rem;line-height:1.5;color:var(--muted)} .lof-do-row__go{margin-top:auto;font-family:var(--font-body);font-weight:600;font-size:.85rem;color:var(--blue)} .lof-do-row__go .lof-arrow{display:inline-block;transition:transform .18s ease} .lof-do-row:hover .lof-do-row__go .lof-arrow{transform:translateX(3px)} /* Complements de la section ciel */ .lof-sky-more{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px} .lof-sky-more a{display:inline-flex;align-items:center;gap:.5em;background:#fff; border:1px solid var(--line);border-radius:100px;padding:.7em 1.25em; font-family:var(--font-body);font-weight:600;font-size:.9rem;color:var(--fjord);text-decoration:none; transition:.18s ease} .lof-sky-more a:hover{border-color:var(--sky);color:var(--blue)} /* Preparer : index a points de conduite */ .lof-prep{list-style:none;margin:0;padding:0;max-width:820px} .lof-prep li{margin:0} .lof-prep a{display:flex;align-items:baseline;gap:.6rem;padding:1rem 0; border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:.18s ease} .lof-prep a:hover{color:var(--blue)} .lof-prep__title{font-family:var(--font-head);font-weight:600;font-size:1.18rem;line-height:1.2} .lof-prep__dots{flex:1;height:1px;min-width:24px; background-image:radial-gradient(circle,var(--line) 1px,transparent 1px); background-size:6px 1px;background-repeat:repeat-x;background-position:0 100%} .lof-prep__time{flex:none;font-size:.82rem;color:var(--muted)} @media(max-width:980px){ .lof-isles{grid-template-columns:repeat(2,1fr)} .lof-doing{grid-template-columns:1fr} } @media(max-width:680px){ .lof-isles{grid-template-columns:1fr 1fr;gap:12px} .lof-isle{min-height:180px;padding:16px} .lof-isle__name{font-size:1.08rem} .lof-isle__tag{font-size:.76rem} .lof-villages{columns:1} .lof-do-row__media{width:112px} .lof-do-row__body{padding:14px 16px 12px 0} } /* ========================================================================== Carte des villages (SVG maison, cote OSM simplifiee, aucun script) ========================================================================== */ .lof-map-villages{position:relative;margin:0 0 26px} .lof-map-villages svg{display:block;width:100%;height:auto} .lof-map__land path{fill:#fff;stroke:var(--sky);stroke-width:1.1;stroke-linejoin:round; vector-effect:non-scaling-stroke} .lof-map__pin{cursor:pointer} .lof-map__pin circle{fill:var(--fjord);stroke:#fff;stroke-width:3;transition:.18s ease} .lof-map__pin text{font-family:var(--font-head);font-weight:600;font-size:23px;fill:var(--ink); paint-order:stroke;stroke:var(--ice);stroke-width:5px;stroke-linejoin:round;transition:.18s ease; dominant-baseline:middle} .lof-map__pin:hover circle{fill:var(--ember);r:9.5} .lof-map__pin:hover text{fill:var(--blue-deep)} /* Rappel en pastilles : legende sur grand ecran, navigation sur mobile */ .lof-villages{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px;columns:auto} .lof-villages li{margin:0} .lof-villages a{display:inline-flex;align-items:baseline;gap:.5em;background:#fff; border:1px solid var(--line);border-radius:100px;padding:.55em 1.05em;text-decoration:none; color:var(--ink);transition:.18s ease;border-bottom:1px solid var(--line)} .lof-villages a:hover{border-color:var(--sky);color:var(--blue);padding-left:1.05em} .lof-villages__num{display:none} .lof-villages__name{font-family:var(--font-head);font-weight:600;font-size:1rem} .lof-villages__isle{margin-left:0;font-size:.76rem;color:var(--muted)} @media(max-width:700px){ .lof-map-villages{display:none} .lof-villages a{width:100%} } /* ========================================================================== Carte des spots dans le corps d article ========================================================================== */ .lof-spotmap{max-width:var(--read);margin:2.2rem auto;background:var(--ice); border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 18px 14px} .lof-spotmap__title{display:block;font-family:var(--font-body);text-transform:uppercase; letter-spacing:.18em;font-size:.68rem;font-weight:700;color:var(--blue);margin:0 0 .8rem} .lof-spotmap svg{display:block;width:100%;height:auto} .lof-spotmap__land path{fill:#fff;stroke:var(--sky);stroke-width:1.1;stroke-linejoin:round; vector-effect:non-scaling-stroke} .lof-spotmap__pt circle{fill:var(--ember);stroke:#fff;stroke-width:2.5} .lof-spotmap__pt text{font-family:var(--font-head);font-weight:600;fill:var(--ink); paint-order:stroke;stroke:var(--ice);stroke-width:5px;stroke-linejoin:round} .lof-aside .lof-spotmap,.lof-withaside .lof-spotmap{max-width:none} /* Pastilles numerotees + legende (les etiquettes sur la carte se chevauchaient) */ .lof-spotmap__pt circle{fill:var(--ember);stroke:#fff;stroke-width:2.5} .lof-spotmap__pt text{font-family:var(--font-body);font-weight:700;fill:#fff;stroke:none;paint-order:normal} .lof-spotmap__legend{list-style:none;margin:.9rem 0 0;padding:0;display:grid; grid-template-columns:repeat(2,1fr);gap:.35rem 1.6rem;counter-reset:spot} .lof-spotmap__legend li{counter-increment:spot;display:flex;align-items:baseline;gap:.55rem; font-size:.9rem;line-height:1.45;color:var(--text);margin:0} .lof-spotmap__legend li::before{content:counter(spot);flex:none;width:1.35rem;height:1.35rem; border-radius:100px;background:var(--ember);color:#fff;font-family:var(--font-body); font-weight:700;font-size:.72rem;display:inline-flex;align-items:center;justify-content:center} .lof-spotmap__legend span{font-family:var(--font-head);font-weight:600;color:var(--ink)} .lof-spotmap__legend em{font-style:normal;color:var(--muted);font-size:.85rem} @media(max-width:620px){.lof-spotmap__legend{grid-template-columns:1fr}} /* ========================================================================== Bandeau calendrier (remplace l ancienne image : plus de libelle tronque) ========================================================================== */ .lof-cal{max-width:var(--read);margin:2.3rem auto;background:var(--ice); border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px 18px} .lof-cal__title{display:block;font-family:var(--font-head);font-weight:600;font-size:1.22rem; line-height:1.2;color:var(--ink);margin:0 0 1.1rem} .lof-cal__head,.lof-cal__row{display:grid;grid-template-columns:minmax(140px,206px) 1fr; align-items:center;gap:0 16px} .lof-cal__head{margin-bottom:.35rem} .lof-cal__head .lof-cal__lab{display:block} .lof-cal__head{grid-template-columns:minmax(140px,206px) repeat(12,1fr)} .lof-cal__m{font-family:var(--font-body);font-size:.72rem;font-weight:700;color:var(--muted); text-align:center} .lof-cal__row{padding:.55rem 0;border-top:1px solid var(--line)} .lof-cal__lab b{display:block;font-family:var(--font-head);font-weight:600;font-size:1rem; line-height:1.2;color:var(--ink)} .lof-cal__lab em{display:block;font-style:normal;font-size:.78rem;line-height:1.35; color:var(--muted);margin-top:.15rem} .lof-cal__track{display:grid;grid-template-columns:repeat(12,1fr);gap:0;align-items:center; min-height:38px} .lof-cal__bar{grid-row:1;height:34px;border-radius:8px;display:flex;align-items:center; justify-content:center;padding:0 6px;margin:0 2px} .lof-cal__bar i{font-style:normal;font-family:var(--font-body);font-weight:700;font-size:.76rem; line-height:1.1;color:#fff;text-align:center;overflow-wrap:anywhere} .lof-cal__bar--deep{background:var(--fjord)} .lof-cal__bar--blue{background:var(--blue)} .lof-cal__bar--sky{background:var(--sky)} .lof-cal__bar--sky i{color:var(--deep)} .lof-cal__note{margin:1rem 0 0;font-size:.78rem;line-height:1.45;color:var(--muted)} @media(max-width:760px){ .lof-cal{padding:18px 16px 14px} .lof-cal__head{display:none} .lof-cal__row{grid-template-columns:1fr;gap:.45rem} .lof-cal__track{min-height:32px} .lof-cal__bar{height:30px} .lof-cal__bar i{font-size:.68rem} } /* Calendrier v2 : entete alignee sur la piste, etiquettes hors des barres etroites */ .lof-cal__head,.lof-cal__row{display:grid;grid-template-columns:minmax(140px,206px) 1fr; align-items:center;gap:0 18px} .lof-cal__head .lof-cal__track{min-height:0} .lof-cal__m{font-family:var(--font-body);font-size:.72rem;font-weight:700;color:var(--muted); text-align:center;grid-row:1} .lof-cal__tag{grid-row:1;align-self:center;font-family:var(--font-body);font-weight:700; font-size:.74rem;line-height:1.15;color:var(--fjord);white-space:nowrap;padding:0 .5rem; overflow:visible} .lof-cal__tag--left{text-align:right} @media(max-width:760px){ .lof-cal__tag{font-size:.68rem;padding:0 .35rem;white-space:normal} } /* Pastilles de carte cliquables */ .lof-spotmap__pt--link{cursor:pointer} .lof-spotmap__pt--link circle{transition:fill .18s ease,r .18s ease} .lof-spotmap__pt--link:hover circle{fill:var(--fjord);r:calc(var(--r,12px))} .lof-spotmap__legend span a{color:var(--ink);text-decoration:none;border:0;transition:color .18s ease} .lof-spotmap__legend span a:hover{color:var(--blue)} .lof-article-body .lof-spotmap__legend span a{text-decoration:none} /* Fiche technique des randonnees : bandeau d entete pleine largeur */ .lof-article-body table.lof-fiche th[colspan]{font-family:var(--font-head);font-size:1.05rem;letter-spacing:.01em} .lof-article-body table.lof-fiche td:first-child{width:46%;color:var(--muted)} .lof-article-body table.lof-fiche td:last-child{font-weight:600;color:var(--ink)} /* ========================================================================== Bandeau de chiffres d une fiche randonnee ========================================================================== */ .lof-stats{max-width:var(--read);margin:2rem auto 2.4rem;background:var(--ice); border:1px solid var(--line);border-radius:var(--radius-lg);padding:8px 10px; display:grid;grid-template-columns:repeat(4,1fr)} .lof-stat{padding:16px 14px;text-align:center;position:relative} .lof-stat + .lof-stat::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:1px;background:var(--line)} .lof-stat__ico{display:block;width:24px;height:24px;margin:0 auto .5rem; background-repeat:no-repeat;background-position:center;background-size:contain} .lof-stat__val{display:block;font-family:var(--font-head);font-weight:600;font-size:1.32rem; line-height:1.1;color:var(--ink);overflow-wrap:anywhere} .lof-stat__lab{display:block;font-family:var(--font-body);text-transform:uppercase; letter-spacing:.16em;font-size:.62rem;font-weight:700;color:var(--muted);margin-top:.4rem} @media(max-width:900px){.lof-stats{grid-template-columns:repeat(3,1fr)} .lof-stat:nth-child(3n+1)::before{display:none}} @media(max-width:620px){.lof-stats{grid-template-columns:repeat(2,1fr)} .lof-stat::before{display:none!important} .lof-stat{padding:14px 8px}.lof-stat__val{font-size:1.12rem}} .lof-stat--distance .lof-stat__ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c6f97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M6 8.5 2.5 12 6 15.5'/%3E%3Cpath d='M18 8.5 21.5 12 18 15.5'/%3E%3C/svg%3E")} .lof-stat--denivele .lof-stat__ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c6f97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19h18'/%3E%3Cpath d='M4 16 11 6l4 5.5L20 16'/%3E%3C/svg%3E")} .lof-stat--altitude .lof-stat__ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c6f97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20 9.5 6l5 8.5L18 9l4 11z'/%3E%3Cpath d='M9.5 6 12 10.5 10 13'/%3E%3C/svg%3E")} .lof-stat--duree .lof-stat__ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c6f97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12.5' r='8.5'/%3E%3Cpath d='M12 7.5v5.2l3.4 2'/%3E%3C/svg%3E")} .lof-stat--difficulte .lof-stat__ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c6f97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 21 20H3z'/%3E%3Cpath d='M12 10v4.2M12 17.2v.1'/%3E%3C/svg%3E")} .lof-stat--type .lof-stat__ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c6f97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13a3.5 3.5 0 0 1 0 7H7'/%3E%3Cpath d='M7.5 4.5 4 8l3.5 3.5'/%3E%3Cpath d='M9.5 11.5 6 15l3.5 3.5'/%3E%3C/svg%3E")} .lof-stat--balisage .lof-stat__ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c6f97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21V3.5'/%3E%3Cpath d='M6 4.5h12l-2.5 4 2.5 4H6z'/%3E%3C/svg%3E")} .lof-stat--frequentation .lof-stat__ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c6f97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5'/%3E%3Cpath d='M16.5 5.6a3.2 3.2 0 0 1 0 4.8'/%3E%3Cpath d='M18.5 20c0-2.4-1-4.3-2.6-5.2'/%3E%3C/svg%3E")} .lof-stat--periode .lof-stat__ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c6f97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='5' width='17.6' height='16' rx='2.5'/%3E%3Cpath d='M3.2 10h17.6M8 3v4M16 3v4'/%3E%3C/svg%3E")} .lof-stat--depart .lof-stat__ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c6f97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s7-6.1 7-11.2a7 7 0 1 0-14 0c0 5.1 7 11.2 7 11.2z'/%3E%3Ccircle cx='12' cy='10.1' r='2.6'/%3E%3C/svg%3E")} /* ========================================================================== Trace d une randonnee (sentiers OpenStreetMap, rendu maison) ========================================================================== */ .lof-trace{max-width:var(--read);margin:2.2rem auto;background:var(--ice); border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 18px 14px} .lof-trace__kicker{display:block;font-family:var(--font-body);text-transform:uppercase; letter-spacing:.2em;font-size:.68rem;font-weight:700;color:var(--blue);margin:0 0 .8rem} .lof-trace svg{display:block;width:100%;height:auto;background:#fff;border-radius:var(--radius)} .lof-trace .t-fond{fill:#fff} .lof-trace .t-cote{fill:none;stroke:var(--sky);stroke-width:1.4;vector-effect:non-scaling-stroke} .lof-trace .t-eau{fill:#e3eff7;stroke:#a9cbe2;stroke-width:1;vector-effect:non-scaling-stroke} .lof-trace .t-route{fill:none;stroke:#cfdae2;stroke-width:4;stroke-linecap:round;stroke-linejoin:round} .lof-trace .t-sentier{fill:none;stroke:#c0ad9d;stroke-width:1.6;stroke-dasharray:5 4;stroke-linecap:round} .lof-trace .t-principal{stroke:var(--ember);stroke-width:3.8;stroke-dasharray:none;stroke-linejoin:round} .lof-trace .t-marches{stroke:var(--ember);stroke-width:4.4;stroke-dasharray:10 5} .lof-trace .t-sommet circle{opacity:0} .lof-trace .t-sommet path{fill:var(--fjord);stroke:#fff;stroke-width:2.4} .lof-trace .t-echelle line{stroke:var(--text);stroke-width:2} .lof-trace .t-echelle text{font-family:var(--font-body);font-weight:700;font-size:13px;fill:var(--text)} .lof-trace__leg{display:flex;flex-wrap:wrap;gap:.45rem 1.3rem;margin:.85rem 0 0} .lof-trace__k{display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-body); font-size:.78rem;color:var(--muted)} .lof-trace__k::before{content:"";width:20px;height:0;border-top-width:3px;border-top-style:solid;flex:none} .lof-trace__k--principal::before{border-color:var(--ember)} .lof-trace__k--autre::before{border-color:#c0ad9d;border-top-style:dashed} .lof-trace__k--route::before{border-color:#cfdae2;border-top-width:4px} .lof-trace__k--sommet::before{width:0;height:0;border:6px solid transparent;border-bottom-color:var(--fjord);border-top:0} .lof-article-body figure.lof-trace figcaption{margin-top:.7rem;font-size:.83rem;color:var(--muted);text-align:left} .lof-stat--ile .lof-stat__ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c6f97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 18.5c1.4 0 1.4-1 2.9-1s1.5 1 2.9 1 1.5-1 2.9-1 1.5 1 2.9 1 1.5-1 2.9-1 1.5 1 2.9 1'/%3E%3Cpath d='M5 14.5 10.5 5l3.5 5.5L17 7l4 7.5z'/%3E%3C/svg%3E")} .lof-stat--orientation .lof-stat__ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c6f97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M15 9l-2 5-5 2 2-5z'/%3E%3C/svg%3E")} .lof-stat--houle .lof-stat__ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c6f97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9.5c1.6 0 1.6-1.4 3.3-1.4S6.9 9.5 8.5 9.5s1.7-1.4 3.3-1.4 1.7 1.4 3.3 1.4 1.7-1.4 3.4-1.4 1.7 1.4 3.5 1.4'/%3E%3Cpath d='M2 15.5c1.6 0 1.6-1.4 3.3-1.4s1.6 1.4 3.2 1.4 1.7-1.4 3.3-1.4 1.7 1.4 3.3 1.4 1.7-1.4 3.4-1.4 1.7 1.4 3.5 1.4'/%3E%3C/svg%3E")} .lof-stat--fond .lof-stat__ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c6f97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17.5h18'/%3E%3Cpath d='M5.5 14.6v.1M9 15.6v.1M12.5 14.4v.1M16 15.5v.1M19 14.7v.1'/%3E%3Cpath d='M2 20.5h20'/%3E%3C/svg%3E")} .lof-stat--niveau .lof-stat__ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c6f97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V13M10 20V9M16 20V5M22 20h-20'/%3E%3C/svg%3E")} .lof-stat--acces .lof-stat__ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c6f97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20 9 4l3 6 3-3 5 13z'/%3E%3Cpath d='M9.5 20c0-2.5 1.8-4 3-4s3 1.5 3 4'/%3E%3C/svg%3E")} .lof-stat--surplace .lof-stat__ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c6f97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 4l9 7'/%3E%3Cpath d='M5.5 10.5V20h13v-9.5'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E")} .lof-stat--abri .lof-stat__ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c6f97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 20.5 7v5.5c0 4.6-3.5 7.4-8.5 8.5-5-1.1-8.5-3.9-8.5-8.5V7z'/%3E%3C/svg%3E")} .lof-stat--largeur .lof-stat__ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c6f97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6v12M21 6v12'/%3E%3Cpath d='M6 12h12'/%3E%3Cpath d='M8.5 9.5 6 12l2.5 2.5M15.5 9.5 18 12l-2.5 2.5'/%3E%3C/svg%3E")} .lof-stat--saison .lof-stat__ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c6f97' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='5' width='17.6' height='16' rx='2.5'/%3E%3Cpath d='M3.2 10h17.6M8 3v4M16 3v4'/%3E%3C/svg%3E")} /* ---- Profil altimetrique --------------------------------------------- */ .lof-profil{max-width:var(--read);margin:2.2rem auto;background:var(--ice); border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 18px 14px} .lof-profil__kicker{display:block;font-family:var(--font-body);text-transform:uppercase; letter-spacing:.2em;font-size:.68rem;font-weight:700;color:var(--blue);margin:0 0 .9rem} .lof-profil svg{display:block;width:100%;height:auto;background:#fff;border-radius:var(--radius)} .lof-profil .p-grid{stroke:#e4ecf2;stroke-width:1} .lof-profil .p-axe{stroke:#b9c9d5;stroke-width:1.5} .lof-profil .p-tick{stroke:#b9c9d5;stroke-width:1.5} .lof-profil .p-aire{fill:url(#pg);stroke:none} .lof-profil .p-ligne{fill:none;stroke:var(--blue);stroke-width:3;stroke-linejoin:round;stroke-linecap:round} .lof-profil .p-pt{fill:#fff;stroke:var(--blue);stroke-width:3} .lof-profil .p-som{fill:var(--ember);stroke:#fff;stroke-width:2} .lof-profil .p-lab{font-family:var(--font-body);font-size:15px;fill:#8ba1b1} .lof-profil .p-lab--y{text-anchor:end} .lof-profil .p-lab--x{text-anchor:middle} .lof-profil .p-tag{font-family:var(--font-body);font-size:17px;font-weight:700;fill:var(--text)} .lof-profil .p-tag--end{text-anchor:end} .lof-article-body figure.lof-profil figcaption{margin-top:.75rem;font-size:.83rem;color:var(--muted);text-align:left} @media(max-width:620px){ .lof-profil{padding:14px 12px 10px} .lof-profil .p-lab{font-size:19px} .lof-profil .p-tag{font-size:21px} } .lof-spotmap__tie{stroke:var(--ember);stroke-width:2.2;opacity:.5;stroke-linecap:round} .lof-spotmap__anchor{fill:var(--ember);opacity:.75} /* ---- Blog : filtres par rubrique ---- */ .lof-filters{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin:0 0 42px} .lof-filter{font-family:var(--font-body);font-size:.9rem;font-weight:600;color:var(--text); background:var(--white);border:1px solid var(--line);border-radius:999px; padding:.55rem 1.05rem;cursor:pointer;transition:background .15s,border-color .15s,color .15s} .lof-filter span{display:inline-block;margin-left:.45rem;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums} .lof-filter:hover{background:var(--ice);border-color:var(--sky)} .lof-filter.is-on{background:var(--fjord);border-color:var(--fjord);color:#fff} .lof-filter.is-on span{color:rgba(255,255,255,.7)} .lof-filters__empty{text-align:center;color:var(--muted);font-family:var(--font-body);margin:40px 0 0} .lof-card[hidden]{display:none} /* un bloc de pagination vide laissait une bande de 60px avant le pied de page */ .pagination:empty{display:none;margin:0} @media(max-width:700px){ .lof-filters{gap:.45rem;margin-bottom:30px} .lof-filter{font-size:.84rem;padding:.48rem .85rem} } /* ---- Hero video de la home ---- */ .lof-hero__video{position:absolute;inset:0} .lof-hero__poster,.lof-hero__mp4{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .lof-hero__mp4{opacity:0;transition:opacity .6s ease} .lof-hero__mp4.is-on{opacity:1} /* si la video ne demarre pas, ou si l utilisateur veut moins d animation, le poster reste */ @media (prefers-reduced-motion: reduce){ .lof-hero__mp4{display:none} } /* la video se superpose au poster des qu elle a des images ; sans JS, c est l attribut poster du