:root{ /* === PALETTE Jampack (mappee depuis back-variables.scss) === Primary = teal #007D88 Success = green #00D67F Danger = red #FF0000 (utilise sobrement) Warning = yellow #FFC400 Info = cyan #18DDEF Black = #2F343A (texte / dark) */ /* Tons "logo" -> primary Jampack */ --logo-bleu: #007D88; /* primary teal Jampack */ --logo-bleu-nuit: #003a40; /* primary_dark_3 (~30% black mix) */ --logo-vert: #00D67F; /* success green Jampack */ --logo-vert-clair: #4dffae; /* success_light_2 */ --logo-cyan: #18DDEF; /* info cyan Jampack */ /* Palette Lund -> remaping vers nuances primary/info/success Jampack */ --c-peche: #ffd6c2; /* warning_light_3 */ --c-orange: #FF9100; /* orange Jampack */ --c-corail: #ff7a59; /* orange_light_1 */ --c-rouge-brique: #b85a3a; /* orange_dark_2 */ --c-rose-pale: #fbd5e8; /* pink_light_4 */ --c-magenta: #E92990; /* pink Jampack */ --c-prune: #8c1f57; /* pink_dark_2 */ --c-violet: #481244; /* purple_dark_3 */ --c-bleu-ciel: #b3e5ea; /* primary_light_3 */ --c-bleu: #009ba8; /* primary_light_1 (proche teal) */ --c-bleu-marine: #007D88; /* primary teal */ --c-bleu-nuit: #003a40; /* primary_dark_3 */ --c-mint: #99eaca; /* success_light_3 */ --c-emeraude: #00b369; /* success_dark_1 */ --c-vert: #00D67F; /* success */ --c-vert-fonce: #007a45; /* success_dark_3 */ /* Alias Mitzach -> couleurs Jampack */ --rouge: var(--logo-bleu); /* primaire = teal Jampack */ --rouge-dark: var(--logo-bleu-nuit); --jaune: var(--logo-vert); /* secondaire = success */ --jaune-dark: #007a45; /* success_dark_3 */ /* Base neutre alignee sur Jampack */ --noir:#2F343A; /* $black Jampack */ --noir-2:#262a2f; /* black_1 */ --blanc:#ffffff; --gris:#f5f6f7; /* gray_light_5 approx */ --gris-2:#e6e7e9; /* gray_light_4 approx */ --text:#2F343A; --text-soft:#4d5359; /* gray_dark_2 approx */ --shadow-1:0 2px 12px rgba(47,52,58,.08); --shadow-2:0 10px 40px rgba(47,52,58,.18); --radius:6px; --max:1240px; } *{box-sizing:border-box;margin:0;padding:0;min-width:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden} body{ font-family:var(--font-jampack), 'DM Sans', system-ui, -apple-system, sans-serif; color:var(--text);background:var(--blanc); line-height:1.6;-webkit-font-smoothing:antialiased; overflow-x:hidden;font-size:16px;width:100%;max-width:100vw; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{ font-family:var(--font-jampack), 'DM Sans', system-ui, -apple-system, sans-serif; font-weight:700;line-height:1.2;letter-spacing:-0.01em;color:var(--noir); letter-spacing:-.015em; font-variation-settings:"opsz" 144, "SOFT" 30; } h3,h4{font-variation-settings:"opsz" 36, "SOFT" 50} button{font-family:inherit;cursor:pointer;border:none;background:none} input,textarea,select{font-family:inherit;font-size:1rem} /* ============ TOP BAR ============ */ .topbar{ background:#1a1d23;color:#a8acb3; font-size:.78rem;padding:.65rem 0; border-bottom:1px solid rgba(255,255,255,.05); font-family:var(--font-jampack), 'DM Sans', system-ui, sans-serif; letter-spacing:.01em; } .topbar .inner{ max-width:var(--max);margin:0 auto;padding:0 1.75rem; display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem; } .topbar a{color:#c9ccd3;transition:color .2s, opacity .2s;font-weight:500} .topbar a:hover{color:var(--logo-bleu);opacity:1} .topbar .infos{display:flex;gap:1.75rem;flex-wrap:wrap;align-items:center} .topbar .infos span{display:inline-flex;align-items:center;gap:.55rem;color:#9ea1a8} .topbar .infos svg{width:14px;height:14px;stroke:var(--logo-bleu);fill:none;stroke-width:1.8;flex-shrink:0;opacity:.9} .topbar-admin{border-left:1px solid rgba(255,255,255,.08);padding-left:1.25rem;margin-left:.5rem} .topbar-admin a{color:var(--logo-bleu)!important;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.68rem;display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .65rem;border:1px solid rgba(0,125,136,.4);border-radius:4px;transition:all .2s} .topbar-admin a:hover{color:#fff!important;background:var(--logo-bleu);border-color:var(--logo-bleu)} .topbar-admin svg{stroke:currentColor!important} .topbar .badge{ background:transparent;color:var(--logo-bleu); padding:.25rem .7rem;border-radius:4px;font-weight:600;font-size:.68rem; letter-spacing:.08em;text-transform:uppercase; border:1px solid rgba(0,125,136,.4); transition:all .2s; } .topbar .badge:hover{background:rgba(0,125,136,.1);color:#fff} /* ============ HEADER ============ */ header.site-header{ position:sticky;top:0;z-index:100; background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); box-shadow:0 1px 0 rgba(31,33,38,.06); transition:box-shadow .3s, background .3s; } header.site-header.scrolled{ background:rgba(255,255,255,.96); box-shadow:0 4px 24px rgba(31,33,38,.1); } .nav-wrap{ max-width:var(--max);margin:0 auto;padding:0 1.5rem; display:flex;align-items:center;justify-content:space-between; height:160px;gap:1.5rem; transition:height .35s cubic-bezier(.22,1,.36,1); } .brand{display:flex;align-items:center;min-width:0;text-decoration:none;flex-shrink:0} .brand img{ height:148px;width:auto;flex-shrink:0; filter:drop-shadow(0 4px 14px rgba(0,31,92,.2)); transition:transform .35s cubic-bezier(.22,1,.36,1), filter .35s, height .35s cubic-bezier(.22,1,.36,1); } header.site-header.scrolled .brand img{height:88px} header.site-header.scrolled .nav-wrap{height:108px} .brand:hover img{ transform:scale(1.04); filter:drop-shadow(0 6px 20px rgba(0,160,240,.5)); } /* === MENU === */ nav.main-nav{display:flex;align-items:center;gap:.85rem} nav.main-nav ul{ display:flex;gap:.2rem;list-style:none; align-items:center; background:linear-gradient(180deg,var(--gris) 0%,#eef0f4 100%); padding:.45rem; border-radius:999px; border:1px solid var(--gris-2); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 2px 6px rgba(31,33,38,.04); } nav.main-nav a{ display:block;padding:.7rem 1.25rem; font-size:.94rem;font-weight:600;color:var(--text-soft); border-radius:999px;letter-spacing:.005em; position:relative;transition:color .25s, background .25s, transform .25s, box-shadow .25s; } nav.main-nav a::after{display:none} nav.main-nav a:hover{ color:var(--noir); background:#fff; box-shadow:0 2px 8px rgba(31,33,38,.08); } nav.main-nav a.active{ color:#fff; background:linear-gradient(135deg, var(--logo-bleu) 0%, var(--logo-cyan) 100%); box-shadow:0 4px 14px rgba(0,112,240,.35), inset 0 1px 0 rgba(255,255,255,.3); } nav.main-nav a.active:hover{transform:translateY(-1px)} /* CTA en bout de menu */ nav.main-nav .cta-link{ background:linear-gradient(135deg, var(--logo-vert) 0%, var(--logo-cyan) 100%); color:#fff; font-weight:700;font-size:.93rem; padding:.85rem 1.5rem; border-radius:999px; box-shadow:0 4px 16px rgba(46,165,74,.32), inset 0 1px 0 rgba(255,255,255,.25); display:inline-flex;align-items:center;gap:.55rem; white-space:nowrap; position:relative;overflow:hidden; transition:transform .25s, box-shadow .25s, background .35s; } nav.main-nav .cta-link::before{ content:"";width:7px;height:7px;border-radius:50%; background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.7); animation:pulseDot 2s ease-out infinite; flex-shrink:0; } nav.main-nav .cta-link::after{ content:"";position:absolute;top:0;left:-100%; width:50%;height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transition:left .7s;pointer-events:none; } nav.main-nav .cta-link:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,160,240,.45), inset 0 1px 0 rgba(255,255,255,.3); color:#fff; } nav.main-nav .cta-link:hover::after{left:150%} @keyframes pulseDot{ 0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)} 70%{box-shadow:0 0 0 8px rgba(255,255,255,0)} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0)} } .burger{display:none;background:none;border:1px solid var(--gris-2);border-radius:10px;cursor:pointer;padding:.6rem;flex-direction:column;gap:5px;width:46px;height:46px;align-items:center;justify-content:center;transition:border-color .25s, background .25s} .burger:hover{border-color:var(--rouge);background:var(--gris)} .burger span{width:22px;height:2px;background:var(--noir);transition:all .3s;border-radius:2px} .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ============ HERO ============ */ .hero{ position:relative;height:min(92vh,820px);min-height:580px; overflow:hidden;background:var(--noir); } .hero::before{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background-image:url("data:image/svg+xml;utf8,"); opacity:.4;mix-blend-mode:overlay; } .hero-slides{position:absolute;inset:0;z-index:0;background:var(--noir)} .hero-slide{ position:absolute;inset:0; opacity:0; transition:opacity 1.4s ease-in-out; } .hero-slide.active{opacity:1} .hero-slide video{ position:absolute;inset:0; width:100%;height:100%; object-fit:cover;object-position:center; } .hero-overlay{ position:absolute;inset:0;z-index:1; background: /* Voile sombre dense pour lisibilité du texte */ linear-gradient(100deg, rgba(0,15,40,.88) 0%, rgba(0,31,92,.7) 25%, rgba(0,15,40,.6) 50%, rgba(31,33,38,.65) 75%, rgba(31,33,38,.85) 100%), /* Halos colorés (couleurs logo) */ radial-gradient(ellipse at 20% 30%, rgba(0,112,240,.25) 0%, transparent 55%), radial-gradient(ellipse at 80% 70%, rgba(46,165,74,.2) 0%, transparent 55%); } /* Masque vertical en plus pour les zones sous le texte */ .hero-overlay::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,.4) 100%); } /* Spotlight derrière le texte (gauche) */ .hero-overlay::before{ content:"";position:absolute; left:0;top:50%;transform:translateY(-50%); width:65%;height:90%; background:radial-gradient(ellipse at 30% 50%, rgba(0,0,0,.55) 0%, transparent 65%); pointer-events:none; } .hero::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:120px; background:linear-gradient(to top, var(--noir) 0%, transparent 100%); z-index:1;pointer-events:none; } .hero-content{ position:relative;z-index:2; max-width:var(--max);margin:0 auto;padding:0 1.5rem; height:100%;display:flex;flex-direction:column;justify-content:center; color:var(--blanc); } .hero-logo{ height:110px;width:auto; margin-bottom:1.5rem; opacity:0; animation:logoIn 1s .15s cubic-bezier(.22,1,.36,1) forwards; filter: drop-shadow(0 4px 18px rgba(0,160,240,.6)) drop-shadow(0 0 30px rgba(46,165,74,.35)) drop-shadow(0 4px 12px rgba(0,0,0,.5)); } @keyframes logoIn{ from{opacity:0;transform:translateY(-20px) scale(.92)} to{opacity:1;transform:translateY(0) scale(1)} } .hero-kicker{ display:inline-flex;align-items:center;gap:.75rem; font-size:.8rem;letter-spacing:.28em;text-transform:uppercase; color:var(--jaune);font-weight:600;margin-bottom:1.25rem; opacity:0;animation:slideUp .9s .4s forwards; transition:color .6s; } .hero-kicker::before{ content:"";width:42px;height:2px;background:var(--jaune); transition:background .6s; } .hero-title{ font-size:clamp(2.4rem,6vw,5.2rem); color:var(--blanc);line-height:1.05;font-weight:600; max-width:920px; opacity:0;animation:slideUp .9s .5s forwards; text-shadow:0 4px 30px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.4); } .hero-title em{ color:var(--logo-vert-clair);font-style:normal; text-shadow: 0 0 30px rgba(0,0,0,.6), 0 4px 20px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.8); position:relative; display:inline-block; } .hero-tagline{ max-width:620px;margin-top:1.5rem; font-size:1.08rem;color:#e6e8ec;line-height:1.65; opacity:0;animation:slideUp .9s .7s forwards; text-shadow:0 2px 12px rgba(0,0,0,.5); } .hero-cta{ margin-top:2.2rem;display:flex;gap:1rem;flex-wrap:wrap; opacity:0;animation:slideUp .9s .9s forwards; } .btn{ display:inline-flex;align-items:center;gap:.6rem; padding:.95rem 1.8rem;border-radius:var(--radius); font-weight:600;font-size:.95rem; transition:all .25s;cursor:pointer;border:0; line-height:1.2; text-transform:none!important; } .btn-primary, .btn-ghost, .btn-white, .btn-outline{ text-transform:none!important; } .btn-primary{ background:linear-gradient(135deg, var(--rouge) 0%, var(--jaune) 100%); color:#fff; transition:all .25s, background .6s; position:relative;overflow:hidden; } .btn-primary::before{ content:"";position:absolute;inset:0; background:linear-gradient(135deg, var(--rouge-dark) 0%, var(--jaune-dark) 100%); opacity:0;transition:opacity .3s;z-index:0; } .btn-primary > *{position:relative;z-index:1} .btn-primary:hover::before{opacity:1} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,112,240,.35)} .btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)} .btn-ghost:hover{background:#fff;color:var(--noir);border-color:#fff} .btn-arrow{transition:transform .25s} .btn:hover .btn-arrow{transform:translateX(4px)} @keyframes slideUp{ from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} } /* Hero nav (compteur + dots) */ .hero-nav{ position:absolute;bottom:2.5rem;right:2.5rem;z-index:3; display:flex;align-items:center;gap:1.25rem;color:#fff; } .hero-dots{display:flex;gap:.5rem} .hero-dot{ width:34px;height:3px;background:rgba(255,255,255,.3); border:0;cursor:pointer;padding:0; transition:all .35s, background .6s; position:relative;overflow:hidden; } .hero-dot:hover{background:rgba(255,255,255,.5)} .hero-dot.active{ background:rgba(255,255,255,.25); width:52px; } .hero-dot.active::after{ content:"";position:absolute;inset:0; background:linear-gradient(90deg, var(--rouge), var(--jaune)); transform:scaleX(0);transform-origin:left; animation:dotProgress 7s linear forwards; } @keyframes dotProgress{to{transform:scaleX(1)}} @media (prefers-reduced-motion: reduce){ .hero-dot.active::after{transform:scaleX(1);animation:none} } .hero-count{font-size:.85rem;letter-spacing:.15em;color:#e6e8ec;font-variant-numeric:tabular-nums} .hero-count b{color:var(--jaune);font-weight:600;transition:color .6s} /* Hero scroll vertical (gauche) */ .hero-scroll{ position:absolute;left:2.5rem;bottom:2.5rem;z-index:3; color:#fff;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase; writing-mode:vertical-rl; display:flex;align-items:center;gap:.75rem; opacity:.85; } .hero-scroll::after{ content:"";width:1px;height:60px;background:linear-gradient(to bottom,var(--jaune),transparent); animation:scrollDown 2s infinite; } @keyframes scrollDown{ 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} } /* Frise signature 16 couleurs en bas du hero */ .hero-signature{ position:absolute;bottom:0;left:0;right:0;z-index:4; display:grid;grid-template-columns:repeat(16,1fr); height:6px; } .hero-signature span{display:block} /* ============ INFO BAR ============ */ .infobar{ background:linear-gradient(90deg, var(--rouge) 0%, var(--rouge-dark) 50%, var(--jaune) 100%); padding:1.75rem 0; position:relative;color:#fff; transition:background .6s; } .infobar::before{ content:"";position:absolute;inset:0; background:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.1) 100%); pointer-events:none; } .infobar .inner{ max-width:var(--max);margin:0 auto;padding:0 1.5rem; display:grid;grid-template-columns:repeat(4,1fr);gap:2rem; } .info-card{display:flex;align-items:center;gap:1rem;position:relative;z-index:1} .info-icon{ flex:0 0 44px;height:44px;border-radius:50%; background:rgba(255,255,255,.18);color:#fff; backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.25); display:flex;align-items:center;justify-content:center; } .info-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .info-card b{display:block;font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:#fff;font-weight:700;margin-bottom:.15rem} .info-card span{font-size:.88rem;color:rgba(255,255,255,.85)} /* ============ SECTIONS ============ */ section{padding:6rem 0} .container{max-width:var(--max);margin:0 auto;padding:0 1.5rem} .section-head{text-align:center;max-width:760px;margin:0 auto 4rem} .section-head.left{text-align:left;margin:0 0 4rem} .section-kicker{ display:inline-block;font-size:.78rem;letter-spacing:.28em;text-transform:uppercase; color:var(--rouge);font-weight:600;margin-bottom:1rem; transition:color .6s; } .section-title{font-size:clamp(1.95rem,4vw,3.1rem);margin-bottom:1rem;line-height:1.1} .section-title em{color:var(--rouge);font-style:normal;transition:color .6s} .section-lead{color:var(--text-soft);font-size:1.05rem;line-height:1.7} /* ============ SOCIAL DOCK (barre verticale flottante à gauche) ============ */ .social-dock{ position:fixed;left:1.2rem;top:50%; z-index:80; display:flex;flex-direction:column;gap:.55rem; padding:.55rem .4rem; background:rgba(255,255,255,.18); backdrop-filter:saturate(180%) blur(10px); -webkit-backdrop-filter:saturate(180%) blur(10px); border-radius:999px; border:1px solid rgba(255,255,255,.22); box-shadow:0 6px 20px rgba(0,0,0,.12); transform:translateY(-50%) translateX(0); opacity:0; transition:opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1); pointer-events:none; } .social-dock.visible{ opacity:1; pointer-events:auto; } .social-dock.hidden{ opacity:0; transform:translateY(-50%) translateX(-16px); pointer-events:none; } .social-dock a{ --c:var(--logo-bleu); width:36px;height:36px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:rgba(255,255,255,.85); background:transparent; transition:transform .25s cubic-bezier(.22,1,.36,1), background .25s, color .25s, box-shadow .25s; position:relative; } .social-dock a svg{ width:18px;height:18px; stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; } .social-dock a.fb-icon svg, .social-dock a.ig-icon svg, .social-dock a.tw-icon svg{stroke-width:0;fill:currentColor} .social-dock a:hover{ background:var(--c);color:#fff; transform:scale(1.1) translateX(2px); box-shadow:0 6px 16px color-mix(in srgb, var(--c) 45%, transparent); } .social-dock a::after{ content:attr(data-label); position:absolute;left:calc(100% + .65rem);top:50%;transform:translateY(-50%) translateX(-6px); background:#1f2126;color:#fff; font-size:.72rem;font-weight:600; padding:.35rem .65rem;border-radius:5px; white-space:nowrap;pointer-events:none; opacity:0;transition:opacity .2s, transform .2s; box-shadow:0 4px 12px rgba(0,0,0,.2); } .social-dock a::before{ content:"";position:absolute;left:calc(100% + .15rem);top:50%;transform:translateY(-50%); border:5px solid transparent;border-right-color:#1f2126; opacity:0;transition:opacity .2s; pointer-events:none; } .social-dock a:hover::after, .social-dock a:hover::before{opacity:1;transform:translateY(-50%) translateX(0)} /* Couleurs par réseau */ .social-dock a.fb-icon{--c:#1877f2} .social-dock a.ig-icon{--c:#e1306c} .social-dock a.tw-icon{--c:#1da1f2} .social-dock a.yt-icon{--c:#ff0000} .social-dock a.li-icon{--c:#0a66c2} .social-dock a.tk-icon{--c:#000} .social-dock a.rss-icon{--c:#f26522} .social-dock .sep{ height:1px;margin:.15rem .65rem; background:rgba(255,255,255,.22); } @media(max-width:1024px){ .social-dock{left:.8rem;padding:.4rem .3rem;gap:.35rem} .social-dock a{width:34px;height:34px} .social-dock a svg{width:16px;height:16px} .social-dock a::after, .social-dock a::before{display:none} } @media(max-width:640px){ .social-dock{ left:50%;top:auto;bottom:.85rem; transform:translateX(-50%); flex-direction:row; border-radius:999px; padding:.35rem .55rem;gap:.25rem; } .social-dock.hidden{ transform:translateX(-50%) translateY(20px); } .social-dock .sep{ width:1px;height:auto;margin:.55rem .15rem; } } /* ============ HERO CARDS "À LA UNE" (3 cartes flottantes) ============ */ .hero-cards{ position:relative;z-index:5; margin:-70px auto 3rem; max-width:var(--max);padding:0 1.5rem; display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem; } .hero-card{ display:flex;flex-direction:column; background:#fff;border-radius:14px;overflow:hidden; box-shadow:0 16px 40px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.08); border:1px solid rgba(255,255,255,.6); text-decoration:none;color:inherit; position:relative; transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; cursor:pointer; } .hero-card:hover{ transform:translateY(-6px); box-shadow:0 24px 50px rgba(0,0,0,.25), 0 6px 16px rgba(0,0,0,.1); } .hero-card .visual{ height:90px; position:relative; background:linear-gradient(135deg, var(--c1, var(--logo-bleu)), var(--c2, var(--logo-cyan))); overflow:hidden; } /* Tonalités hero cards (cohérent avec news-card) */ .hero-card.cat-vie {--c1:#0070f0;--c2:#00a0f0} .hero-card.cat-travaux {--c1:#e89240;--c2:#fb9d0b} .hero-card.cat-event {--c1:#7b3a6e;--c2:#b94082} .hero-card.cat-demarches {--c1:#2d8bb0;--c2:#6db8d4} .hero-card.cat-tourisme {--c1:#1f8a4c;--c2:#7dc7a8} .hero-card.cat-sport {--c1:#e15a3f;--c2:#fb8007} .hero-card.cat-mairie {--c1:#1a5c8a;--c2:#2d8bb0} .hero-card.cat-asso {--c1:#2ea54a;--c2:#70e030} .hero-card .visual::before{ content:"";position:absolute;inset:0; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.18), transparent 50%), radial-gradient(circle at 80% 70%, rgba(0,0,0,.14), transparent 55%); } .hero-card .visual::after{ content:"";position:absolute;inset:0; background-image:url("data:image/svg+xml;utf8,"); opacity:.35;mix-blend-mode:overlay;pointer-events:none; } .hero-card .visual svg.glyph{ position:absolute;left:50%;top:50%; width:42px;height:42px; transform:translate(-50%,-50%); stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round; filter:drop-shadow(0 3px 10px rgba(0,0,0,.3)); opacity:.95; transition:transform .5s cubic-bezier(.22,1,.36,1); } .hero-card:hover .visual svg.glyph{transform:translate(-50%,-50%) scale(1.08) rotate(-4deg)} .hero-card .tag{ position:absolute;top:.65rem;left:.7rem;z-index:2; font-size:.58rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase; background:rgba(255,255,255,.95);color:var(--noir); padding:.22rem .55rem;border-radius:3px; box-shadow:0 2px 6px rgba(0,0,0,.15); } .hero-card .body{ padding:.9rem 1.1rem 1rem; display:flex;flex-direction:column;gap:.3rem;flex:1; } .hero-card .date{ font-size:.68rem;color:var(--text-soft); font-weight:600;letter-spacing:.04em;text-transform:uppercase; } .hero-card h3{ font-size:.98rem;line-height:1.25; margin:0;color:var(--noir);font-weight:600; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .hero-card .read-more{ margin-top:auto;padding-top:.4rem; display:inline-flex;align-items:center;gap:.35rem; font-size:.74rem;font-weight:700;color:var(--logo-bleu); transition:gap .25s, color .25s; } .hero-card:hover .read-more{gap:.6rem;color:var(--logo-cyan)} /* Cascade au scroll */ .hero-cards .hero-card{ opacity:0;transform:translateY(30px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1), box-shadow .35s; } .hero-cards.in .hero-card{opacity:1;transform:translateY(0)} .hero-cards.in .hero-card:nth-child(1){transition-delay:.15s} .hero-cards.in .hero-card:nth-child(2){transition-delay:.3s} .hero-cards.in .hero-card:nth-child(3){transition-delay:.45s} /* ============ WELCOME (Concept + carte interactive France) ============ */ .welcome{background:var(--gris)} .welcome-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:center} /* Carte France + panneau mockup (split) */ .map-stage{ position:relative; display:grid;grid-template-columns:1fr;gap:1rem; } .map-wrap{ position:relative; border-radius:14px;overflow:hidden; height:520px; box-shadow:var(--shadow-2); border:1px solid var(--gris-2); background:#dde6ed; } #mapFrance{ position:absolute;inset:0; z-index:1; background:#dde6ed; } /* Léger ajustement (Positron est déjà gris clair) */ #mapFrance .leaflet-tile{filter:contrast(1.02)} .map-wrap .legend{ position:absolute;left:14px;bottom:14px;z-index:2; background:rgba(255,255,255,.95); backdrop-filter:blur(8px); border-radius:8px; padding:.6rem .85rem; font-size:.72rem;color:var(--text-soft); box-shadow:0 4px 12px rgba(0,0,0,.1); font-weight:500; } .map-wrap .legend strong{color:var(--noir);font-weight:700;display:block;margin-bottom:.2rem;font-size:.78rem} .map-wrap .legend .key{display:flex;align-items:center;gap:.4rem;margin-top:.18rem} .map-wrap .legend .key .pin{width:10px;height:10px;border-radius:50%;flex-shrink:0;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.25)} /* Marqueur custom */ .commune-pin{ width:24px;height:24px;border-radius:50%; background:var(--c1, #0070f0); border:3px solid #fff; box-shadow:0 4px 14px color-mix(in srgb, var(--c1, #0070f0) 50%, transparent), 0 2px 4px rgba(0,0,0,.2); cursor:pointer; transition:transform .25s cubic-bezier(.22,1,.36,1); position:relative; } .commune-pin.small{ width:14px;height:14px;border-width:2px; box-shadow:0 2px 8px color-mix(in srgb, var(--c1, #0070f0) 50%, transparent), 0 1px 2px rgba(0,0,0,.2); } .commune-pin.small::after{inset:-4px} .commune-pin::after{ content:"";position:absolute;inset:-6px;border-radius:50%; background:var(--c1, #0070f0); opacity:.25;animation:pinPulse 2.4s ease-out infinite; } .commune-pin.active{ transform:scale(1.4); box-shadow:0 6px 22px color-mix(in srgb, var(--c1, #0070f0) 65%, transparent), 0 0 0 3px #fff, 0 0 0 5px var(--c1,#0070f0); } .commune-pin.active::after{animation-duration:1.4s} @keyframes pinPulse{ 0%{transform:scale(1);opacity:.4} 70%{transform:scale(2.2);opacity:0} 100%{transform:scale(2.2);opacity:0} } /* Tooltip Leaflet override */ .leaflet-tooltip.commune-tooltip{ background:#1f2126;color:#fff; border:0;border-radius:6px; font-family:var(--font-jampack), 'DM Sans', sans-serif;font-size:.78rem;font-weight:600; padding:.45rem .7rem; box-shadow:0 6px 18px rgba(0,0,0,.25); white-space:nowrap; } .leaflet-tooltip.commune-tooltip::before{border-top-color:#1f2126} /* Panneau mockup unique (sous la carte) */ .preview-panel{ position:relative; border-radius:12px;overflow:hidden; background:#fff; box-shadow:0 12px 32px rgba(0,0,0,.12); border:1px solid var(--gris-2); transition:opacity .35s, transform .45s cubic-bezier(.22,1,.36,1); } .preview-panel.swap{opacity:0;transform:translateY(8px)} .preview{ --c1:#1a5c8a;--c2:#2d8bb0; width:100%; border-radius:12px; overflow:hidden; background:#fff; cursor:pointer; } /* Browser bar (URL + dots) */ .preview .browser{ height:28px; background:linear-gradient(180deg, #fafbfc, #f0f1f3); border-bottom:1px solid #e6e8ec; display:flex;align-items:center;gap:.5rem;padding:0 .8rem; } .preview .browser .dots{display:flex;gap:5px} .preview .browser .dots span{width:9px;height:9px;border-radius:50%;background:#d8dade} .preview .browser .dots span:nth-child(1){background:#fc625d} .preview .browser .dots span:nth-child(2){background:#fdbc40} .preview .browser .dots span:nth-child(3){background:#34c84a} .preview .browser .url{ flex:1;background:#fff;border-radius:4px; height:18px;font-size:.62rem; display:flex;align-items:center;padding:0 .55rem; color:#666;font-family:var(--font-jampack), 'DM Sans', sans-serif; border:1px solid #e6e8ec; } .preview .browser .url::before{ content:"";display:inline-block;width:7px;height:7px; border-radius:50%;background:#34c84a;margin-right:.4rem;flex-shrink:0; } /* Hero du site fictif */ .preview .hero-bg{ height:200px; background:linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%); position:relative;display:flex;flex-direction:column;justify-content:flex-end; padding:1.1rem 1.2rem 1rem;color:#fff; } .preview .hero-bg::before{ content:"";position:absolute;inset:0; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.18), transparent 55%), radial-gradient(circle at 80% 80%, rgba(0,0,0,.18), transparent 55%); } .preview .hero-bg::after{ content:"";position:absolute;inset:0; background-image:url("data:image/svg+xml;utf8,"); opacity:.35;mix-blend-mode:overlay;pointer-events:none; } .preview .nav-fake{ position:absolute;top:.55rem;left:1rem;right:1rem; display:flex;justify-content:space-between;align-items:center; } .preview .nav-fake .logo{ font-family:var(--font-jampack), 'DM Sans', sans-serif;font-weight:700;font-size:.78rem; letter-spacing:-.01em; } .preview .nav-fake .nav-bars{display:flex;gap:4px} .preview .nav-fake .nav-bars span{ width:14px;height:3px;background:rgba(255,255,255,.7);border-radius:2px; } .preview .hero-bg .titre{ font-family:var(--font-jampack), 'DM Sans', sans-serif; font-size:1.2rem;line-height:1.15;font-weight:700; position:relative;z-index:1; text-shadow:0 1px 4px rgba(0,0,0,.3); } .preview .hero-bg .accroche{ font-size:.62rem;opacity:.85;margin-top:.2rem; position:relative;z-index:1; } /* Corps : 3 mini-cards news */ .preview .body{padding:.7rem 1rem .9rem;background:#fff} .preview .body .label{ font-size:.55rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--c1);margin-bottom:.4rem; } .preview .mini-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem} .preview .mini-card{ background:#f6f7f9;border-radius:5px; padding:.4rem; border:1px solid #eef0f4; } .preview .mini-card .strip{ height:18px;border-radius:3px;margin-bottom:.3rem; background:linear-gradient(90deg, var(--c1), var(--c2)); opacity:.85; } .preview .mini-card .l1{ height:5px;background:#cfd2d8;border-radius:2px;margin-bottom:3px; } .preview .mini-card .l2{ height:5px;background:#cfd2d8;border-radius:2px;width:70%; } /* Étiquette "Nom de la commune" */ .preview .stamp{ position:absolute;top:.55rem;right:.6rem; background:rgba(255,255,255,.96); font-size:.55rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--c1); padding:.18rem .45rem;border-radius:3px; box-shadow:0 2px 6px rgba(0,0,0,.12); z-index:2; } /* Tonalités par preview */ .preview.bleu-rhin {--c1:#1a5c8a;--c2:#6db8d4} .preview.vert-foret {--c1:#1a5c3a;--c2:#7dc7a8} .preview.brique {--c1:#a83a2c;--c2:#e89240} .welcome-text h2{margin-bottom:1.5rem} .welcome-text > p{color:var(--text-soft);margin-bottom:1.2rem} .missions{display:grid;gap:1.25rem;margin-top:2rem} .mission{ display:flex;gap:1.1rem;align-items:flex-start; padding:1rem 0; border-top:1px solid var(--gris-2); } .mission:first-child{border-top:0;padding-top:0} .mission .ic{ flex:0 0 40px;height:40px;border-radius:50%; background:var(--rouge);color:#fff; display:flex;align-items:center;justify-content:center; transition:background .6s; } .mission .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .mission b{font-family:var(--font-jampack), 'DM Sans','Cormorant Garamond',serif;font-size:1.35rem;color:var(--noir);font-weight:600;display:block;margin-bottom:.2rem} .mission p{font-size:.95rem;color:var(--text-soft);margin:0} .stats{ display:grid;grid-template-columns:repeat(3,1fr);gap:1rem; margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--gris-2); } .stat b{font-family:var(--font-jampack), 'DM Sans','Cormorant Garamond',serif;font-size:2.4rem;color:var(--rouge);display:block;line-height:1;font-weight:700;transition:color .6s} .stat span{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft)} /* ============ DECOUVRIR (Mosaïque communes en cards style Mitzach) ============ */ .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem} .card{ background:#fff;border-radius:var(--radius);overflow:hidden; box-shadow:0 1px 3px rgba(31,33,38,.06), 0 4px 14px rgba(31,33,38,.06); transition:all .4s cubic-bezier(.22,1,.36,1); position:relative;display:flex;flex-direction:column; } .card:hover{ transform:translateY(-8px); box-shadow:0 4px 12px rgba(31,33,38,.08), 0 18px 50px rgba(0,112,240,.18); } .card.empty{cursor:pointer;border:2px dashed var(--gris-2)} .card.empty:hover{border-color:var(--rouge)} .card-color{ aspect-ratio:4/3;position:relative;overflow:hidden; } .card-color::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.4)); } .card-tag{ position:absolute;top:1rem;left:1rem;z-index:2; background:rgba(255,255,255,.95);color:var(--noir); font-size:.66rem;padding:.3rem .7rem; letter-spacing:.1em;text-transform:uppercase;font-weight:700; border-radius:3px; } .card-color .label{ position:absolute;bottom:1rem;left:1rem;right:1rem;z-index:2; color:#fff;font-family:var(--font-jampack), 'DM Sans','Cormorant Garamond',serif; font-size:1.45rem;font-weight:700;line-height:1.1; text-shadow:0 2px 8px rgba(0,0,0,.4); } .card.empty .card-color{ background:repeating-linear-gradient(45deg,rgba(31,33,38,.04) 0 8px,transparent 8px 16px); } .card.empty .card-color::after{display:none} .card.empty .label{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; color:var(--text-soft);font-style:italic;text-shadow:none;text-align:center; padding:0 1rem; } .card-body{padding:1.25rem;display:flex;justify-content:space-between;align-items:center;gap:.5rem} .card-body p{color:var(--text-soft);font-size:.82rem;margin:0} .card-link{ display:inline-flex;align-items:center;gap:.4rem; color:var(--noir);font-weight:600;font-size:.82rem; letter-spacing:.05em;transition:color .25s, gap .25s; } .card-link::after{content:"→";transition:transform .25s} .card:hover .card-link{color:var(--rouge)} .card:hover .card-link::after{transform:translateX(4px)} .cards-meta{ text-align:center;margin-top:2.5rem; font-size:.95rem;color:var(--text-soft); } .cards-meta strong{color:var(--noir)} /* ============ POURQUOI / 4 PILIERS ============ */ .pillars-section{background:var(--blanc)} .pillars{ display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem; } .pillar{ background:var(--gris); border-radius:8px; padding:2rem 1.75rem; position:relative; overflow:hidden; transition:all .4s cubic-bezier(.22,1,.36,1); cursor:default; border:1px solid transparent; } .pillar::before{ content:"";position:absolute;inset:0; background:linear-gradient(135deg, var(--rouge) 0%, var(--jaune) 100%); opacity:0;transition:opacity .4s, background .6s; z-index:0; } .pillar:hover{ transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,112,240,.2); color:#fff; } .pillar:hover::before{opacity:1} .pillar > *{position:relative;z-index:1;transition:color .3s} .pillar:hover h3, .pillar:hover p{color:#fff} .pillar:hover .pillar-num{color:rgba(255,255,255,.4)} .pillar-num{ font-family:var(--font-jampack), 'DM Sans','Cormorant Garamond',serif; font-size:3.4rem; font-weight:700; color:var(--rouge); line-height:1; margin-bottom:1rem; display:block; transition:color .6s; letter-spacing:-.02em; } .pillar h3{ font-size:1.4rem; margin-bottom:.75rem; color:var(--noir); } .pillar p{ font-size:.94rem; color:var(--text-soft); line-height:1.7; } /* ============ TECHNOLOGIE & IA (style "Agenda" Mitzach, fond noir + accents jaunes) ============ */ .tech{background:var(--noir);color:#e6e8ec;position:relative;overflow:hidden} .tech::before{ content:"";position:absolute;top:-150px;right:-150px;width:500px;height:500px; background:radial-gradient(circle,rgba(125,199,168,.18),transparent 70%); pointer-events:none; } .tech::after{ content:"";position:absolute;bottom:-150px;left:-150px;width:500px;height:500px; background:radial-gradient(circle,rgba(232,146,64,.12),transparent 70%); pointer-events:none; } .tech .section-title{color:#fff} .tech .section-title em{color:var(--c-mint)} .tech .section-kicker{color:var(--c-mint)} .tech .section-lead{color:#b8bbc3} .tech-grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem; max-width:1100px;margin:0 auto; position:relative;z-index:1; } .tech-item{ display:grid;grid-template-columns:64px 1fr;gap:1.4rem;align-items:flex-start; background:rgba(255,255,255,.04);padding:1.75rem;border-radius:var(--radius); border-left:3px solid var(--c-mint);transition:all .3s; } .tech-item:hover{background:rgba(255,255,255,.08);transform:translateX(6px)} .tech-item .num{ font-family:var(--font-jampack), 'DM Sans','Cormorant Garamond',serif; font-size:2.6rem;color:var(--c-mint);font-weight:700;line-height:1; } .tech-item h3{color:#fff;font-size:1.4rem;margin-bottom:.4rem} .tech-item p{font-size:.92rem;color:#c2c5cd;line-height:1.6} .tech-item .stat{ display:inline-block;margin-top:.6rem; font-size:.78rem;letter-spacing:.12em;text-transform:uppercase; color:var(--c-mint);font-weight:600; } /* ============ PROCESSUS (5 étapes) ============ */ .process{background:var(--blanc)} .process-grid{ display:grid;grid-template-columns:repeat(5,1fr);gap:0; position:relative; } .process-grid::before{ content:"";position:absolute;top:36px;left:8%;right:8%;height:2px; background:linear-gradient(to right,var(--gris-2),var(--rouge),var(--gris-2)); z-index:0;transition:background .6s; } .step{ position:relative;z-index:1; text-align:center;padding:0 1rem; } .step .num{ width:74px;height:74px;border-radius:50%; background:var(--blanc);border:2px solid var(--rouge);color:var(--rouge); display:flex;align-items:center;justify-content:center; font-family:var(--font-jampack), 'DM Sans','Cormorant Garamond',serif;font-weight:700;font-size:2rem; margin:0 auto 1.25rem; transition:all .3s, background .6s, border-color .6s, color .6s; } .step:hover .num{background:var(--rouge);color:#fff;transform:scale(1.05)} .step h3{font-size:1.25rem;margin-bottom:.4rem} .step p{font-size:.92rem;color:var(--text-soft);margin-bottom:.6rem} .step .duration{ display:inline-block; font-size:.7rem;letter-spacing:.12em;text-transform:uppercase; color:var(--jaune-dark);font-weight:700; padding:.2rem .55rem;background:color-mix(in srgb,var(--jaune) 18%,transparent); border-radius:3px; transition:color .6s, background .6s; } .step .soon{ display:inline-block;margin-top:.25rem; font-size:.78rem;font-weight:600;color:var(--rouge); font-style:italic; } .step .soon::before{ content:"";display:inline-block;width:8px;height:8px;border-radius:50%; background:var(--rouge);margin-right:.4rem;vertical-align:middle; animation:soonPulse 2s ease-in-out infinite; } @keyframes soonPulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} } /* ============ INCLUS DANS L'OFFRE ============ */ .includes{background:var(--gris);position:relative;overflow:hidden} .includes::before{ content:"";position:absolute;top:-200px;right:-200px;width:520px;height:520px; background:radial-gradient(circle,rgba(0,112,240,.08),transparent 70%); pointer-events:none;z-index:0; } .includes::after{ content:"";position:absolute;bottom:-200px;left:-200px;width:520px;height:520px; background:radial-gradient(circle,rgba(46,165,74,.08),transparent 70%); pointer-events:none;z-index:0; } .includes .container{position:relative;z-index:1} .includes-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:1rem; max-width:1140px;margin:0 auto; list-style:none;padding:0; } .includes-grid li{ list-style:none; display:flex;gap:.9rem;align-items:flex-start; padding:1.1rem 1.25rem; background:#fff; border-radius:8px; border:1px solid var(--gris-2); font-size:.92rem;line-height:1.5; position:relative;overflow:hidden; transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .35s; } .includes-grid li::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg, var(--rouge), var(--jaune)); transform:scaleY(0);transform-origin:top; transition:transform .5s cubic-bezier(.22,1,.36,1); } .includes-grid li:hover{ transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,112,240,.12); border-color:transparent; } .includes-grid li:hover::before{transform:scaleY(1)} /* Checkmark SVG : se dessine au scroll */ .includes-grid li .check{ width:28px;height:28px;flex-shrink:0; border-radius:50%; background:linear-gradient(135deg, var(--rouge), var(--jaune)); display:flex;align-items:center;justify-content:center; box-shadow:0 4px 12px rgba(0,112,240,.25); transition:transform .35s cubic-bezier(.22,1,.36,1); } .includes-grid li:hover .check{transform:rotate(-8deg) scale(1.08)} .includes-grid li .check svg{ width:14px;height:14px; stroke:#fff;fill:none;stroke-width:3; stroke-linecap:round;stroke-linejoin:round; } .includes-grid li .check svg path{ stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .6s cubic-bezier(.22,1,.36,1) .15s; } .includes-grid.in li .check svg path{stroke-dashoffset:0} /* Cascade au scroll */ .includes-grid li{ opacity:0;transform:translateY(20px); transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .35s; } .includes-grid.in li{opacity:1;transform:translateY(0)} .includes-grid.in li:nth-child(1){transition-delay:0ms} .includes-grid.in li:nth-child(2){transition-delay:60ms} .includes-grid.in li:nth-child(3){transition-delay:120ms} .includes-grid.in li:nth-child(4){transition-delay:180ms} .includes-grid.in li:nth-child(5){transition-delay:240ms} .includes-grid.in li:nth-child(6){transition-delay:300ms} .includes-grid.in li:nth-child(7){transition-delay:360ms} .includes-grid.in li:nth-child(8){transition-delay:420ms} .includes-grid.in li:nth-child(9){transition-delay:480ms} .includes-grid.in li:nth-child(10){transition-delay:540ms} .includes-grid.in li:nth-child(11){transition-delay:600ms} .includes-grid.in li:nth-child(12){transition-delay:660ms} .includes-grid.in li:nth-child(13){transition-delay:720ms} .includes-grid.in li:nth-child(14){transition-delay:780ms} .includes-grid.in li:nth-child(15){transition-delay:840ms} .includes-grid.in li:nth-child(16){transition-delay:900ms} .includes-grid.in li:nth-child(17){transition-delay:960ms} .includes-grid li .txt{flex:1;min-width:0} .includes-grid li strong{color:var(--noir);display:inline} /* Item IA : touche violette */ .includes-grid li.ai .check{ background:linear-gradient(135deg, var(--c-violet), var(--c-magenta)); box-shadow:0 4px 12px rgba(123,58,110,.3); } .includes-grid li.ai::before{ background:linear-gradient(180deg, var(--c-violet), var(--c-magenta)); } .tag-ai{ display:inline-block;margin-left:.4rem; background:linear-gradient(135deg, var(--c-violet), var(--c-magenta)); color:#fff; font-size:.6rem;padding:.15rem .45rem;border-radius:3px; font-weight:700;letter-spacing:.08em;vertical-align:middle; font-family:var(--font-jampack), 'DM Sans', sans-serif; box-shadow:0 2px 6px rgba(123,58,110,.25); } .tag-opt{ display:inline-block;margin-left:.4rem; background:var(--gris-2); color:var(--noir); font-size:.6rem;padding:.15rem .45rem;border-radius:3px; font-weight:700;letter-spacing:.08em;vertical-align:middle; font-family:var(--font-jampack), 'DM Sans', sans-serif; } /* ============ FAQ ============ */ .faq{background:var(--blanc)} .faq-list{max-width:880px;margin:0 auto} .faq-item{ border:1px solid var(--gris-2); border-radius:var(--radius); margin-bottom:.85rem; background:var(--blanc); overflow:hidden; transition:border-color .3s; } .faq-item.open{border-color:var(--rouge)} .faq-q{ width:100%; padding:1.4rem 1.6rem; display:flex;justify-content:space-between;align-items:center;gap:1rem; font-size:1.05rem;font-weight:600; color:var(--noir);text-align:left; font-family:var(--font-jampack), 'DM Sans','Cormorant Garamond',serif; font-size:1.25rem; } .faq-q .plus{ width:32px;height:32px;border-radius:50%; background:var(--gris);color:var(--rouge); display:flex;align-items:center;justify-content:center; font-size:1.4rem;font-weight:300;flex-shrink:0; transition:all .3s, background .6s, color .6s; } .faq-item.open .faq-q .plus{ background:var(--rouge);color:#fff;transform:rotate(45deg); } .faq-a{ max-height:0;overflow:hidden; transition:max-height .35s ease, padding .35s ease; color:var(--text-soft);font-size:.96rem;line-height:1.75; } .faq-a-inner{padding:0 1.6rem 1.6rem} .faq-item.open .faq-a{max-height:500px} /* ============ CONTACT (Formulaire) ============ */ .contact{background:var(--gris)} .contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:3rem;align-items:start} .contact-info,.contact-form{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-1)} .contact-info{padding:2.5rem} .contact-info h3{font-size:1.7rem;margin-bottom:1.5rem} .contact-info > p{color:var(--text-soft);margin-bottom:1.5rem;font-size:.95rem} .contact-row{display:flex;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--gris-2);align-items:center} .contact-row:last-of-type{border-bottom:0} .contact-row .ic{ flex:0 0 42px;height:42px;border-radius:50%;background:var(--rouge);color:#fff; display:flex;align-items:center;justify-content:center; transition:background .6s; } .contact-row .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .contact-row b{display:block;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-soft);margin-bottom:.2rem;font-weight:700} .contact-row span{color:var(--noir);font-weight:500;font-size:.95rem} .contact-form{padding:2.5rem} .contact-form h3{font-size:1.7rem;margin-bottom:.5rem} .contact-form .lead{color:var(--text-soft);margin-bottom:1.75rem;font-size:.95rem} .form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 1.25rem} .form-grid .full{grid-column:1/-1} .field label{ display:block;font-size:.78rem;font-weight:600;color:var(--noir); margin-bottom:.4rem;letter-spacing:.04em;text-transform:uppercase; } .field label .req{color:var(--c-corail)} .field input,.field select,.field textarea{ width:100%;padding:.8rem .95rem; border:1.5px solid var(--gris-2);border-radius:var(--radius); background:#fff;color:var(--noir); transition:border-color .2s, box-shadow .2s; font-size:.95rem; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--rouge); box-shadow:0 0 0 3px color-mix(in srgb, var(--rouge) 18%, transparent); } .field textarea{resize:vertical;min-height:90px} .field .hint{font-size:.78rem;color:var(--text-soft);margin-top:.3rem} .field-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;overflow:hidden} .consent{ display:flex;gap:.6rem;align-items:flex-start; font-size:.85rem;color:var(--text-soft);margin-top:.5rem;line-height:1.55; } .consent input{margin-top:3px;flex-shrink:0;width:18px;height:18px;accent-color:var(--rouge)} .form-submit{ width:100%;padding:1.1rem; background:var(--rouge);color:#fff; border-radius:var(--radius);font-size:1rem;font-weight:700; margin-top:1.25rem;letter-spacing:.04em; transition:all .25s, background .6s; } .form-submit:hover{background:var(--rouge-dark);transform:translateY(-2px);box-shadow:0 10px 30px color-mix(in srgb, var(--rouge) 30%, transparent)} .status-msg{ padding:1rem 1.25rem;border-radius:var(--radius); margin-bottom:1.5rem;font-size:.92rem;display:none; } .status-msg.show{display:block} .status-msg.ok{background:#e8f5e8;color:#1f5c2c;border-left:4px solid var(--c-emeraude)} .status-msg.err{background:#fff0ee;color:#8a2a1c;border-left:4px solid var(--c-corail)} /* ============ FOOTER ============ */ footer.site-footer{background:var(--noir);color:#9ea1a9;padding:4rem 0 0;position:relative} footer.site-footer .signature-strip{ display:grid;grid-template-columns:repeat(16,1fr);height:5px; position:absolute;top:0;left:0;right:0; } footer.site-footer .signature-strip span{display:block} .footer-grid{ max-width:var(--max);margin:0 auto;padding:1rem 1.5rem 0; display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:3rem; } .footer-brand img{ display:block; width:100%; height:110px; object-fit:contain; background:#fff; padding:.6rem 1.5rem; border-radius:12px; margin-bottom:1.2rem; box-shadow:0 6px 20px rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.15); } .footer-brand p{font-size:.9rem;margin-bottom:1.5rem;line-height:1.7} .footer-brand .quote{font-style:italic;font-family:var(--font-jampack), 'DM Sans','Cormorant Garamond',serif;font-size:1rem;color:#c9ccd3;border-left:2px solid var(--jaune);padding-left:1rem;transition:border-color .6s} .footer-col h5{ color:#fff;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase; margin-bottom:1.2rem;font-family:var(--font-jampack), 'DM Sans', sans-serif;font-weight:700; } .footer-col ul{list-style:none} .footer-col li{margin-bottom:.55rem} .footer-col a{font-size:.9rem;transition:color .2s} .footer-col a:hover{color:var(--jaune)} .footer-social{display:flex;gap:.5rem;margin-top:1.25rem} .footer-social a{ width:38px;height:38px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.06);transition:all .25s;color:#c9ccd3; } .footer-social a:hover{background:var(--rouge);color:#fff;transform:translateY(-3px)} .footer-social svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .footer-bottom{ max-width:var(--max);margin:3rem auto 0;padding:1.8rem 1.5rem; border-top:1px solid rgba(255,255,255,.08); display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem; font-size:.82rem;color:#6b6e78; } /* ============ RESPONSIVE ============ */ @media(max-width:1024px){ section{padding:4.5rem 0} .welcome-grid,.contact-grid{grid-template-columns:1fr;gap:2.5rem} .pillars{grid-template-columns:repeat(2,1fr)} .infobar .inner{grid-template-columns:repeat(2,1fr);gap:1.5rem} .footer-grid{grid-template-columns:1fr 1fr;gap:2rem} .hero-scroll{display:none} .tech-grid{grid-template-columns:1fr} .process-grid{grid-template-columns:repeat(2,1fr);gap:2.5rem 1rem} .process-grid::before{display:none} .process-grid .step:last-child{grid-column:1 / -1} } @media(max-width:768px){ .topbar{padding:.4rem 0} .topbar .inner{flex-direction:column;gap:.45rem;text-align:center;padding:0 1rem} .topbar .infos{justify-content:center;font-size:.72rem;gap:.85rem} .topbar .badge{font-size:.62rem} .nav-wrap{height:96px;padding:0 1rem} .brand img{height:80px} header.site-header.scrolled .nav-wrap{height:76px} header.site-header.scrolled .brand img{height:62px} .burger{display:flex} nav.main-nav{ position:absolute;top:100%;left:0;right:0;background:#fff; box-shadow:var(--shadow-2); max-height:0;overflow:hidden;transition:max-height .35s; flex-direction:column;gap:0;padding:0; } nav.main-nav.open{max-height:600px;padding:1rem 0} nav.main-nav ul{ flex-direction:column;padding:0;gap:0;width:100%; background:transparent;border:0;border-radius:0; } nav.main-nav a{ padding:.95rem 1.5rem;border-bottom:1px solid var(--gris-2); border-radius:0;width:100%;text-align:left; color:var(--noir);background:transparent;box-shadow:none; } nav.main-nav a.active{ background:transparent;color:var(--rouge); box-shadow:none; } nav.main-nav a.active::before{ content:"";display:inline-block;width:6px;height:6px;border-radius:50%; background:var(--rouge);margin-right:.6rem;vertical-align:middle; } nav.main-nav .cta-link{ margin:1rem 1.5rem 0; justify-content:center;border-radius:8px;padding:.95rem; } .hero{height:auto;min-height:auto;padding:5rem 0 6rem} .hero-content{padding:0 1.25rem;width:100%;max-width:100%} .hero-logo{height:64px;margin-bottom:1.25rem} .hero-kicker{font-size:.66rem;letter-spacing:.14em;margin-bottom:1rem} .hero-kicker::before{width:24px} .hero-title{font-size:1.7rem;line-height:1.2;max-width:100%;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto} .hero-tagline{font-size:.92rem;margin-top:1rem;line-height:1.55} .hero-cta{margin-top:1.75rem;flex-direction:column;gap:.65rem;width:100%} .hero-cta .btn{ width:100%;justify-content:center;padding:.9rem 1.2rem; gap:.5rem;text-transform:none!important; white-space:nowrap;font-size:.95rem; } .hero-cta .btn-arrow{flex-shrink:0} .hero-nav{bottom:1.25rem;right:1.25rem;left:1.25rem;justify-content:center} section{padding:3.5rem 0} .container{padding:0 1.25rem} .section-head{margin-bottom:2.5rem} .section-title{font-size:1.65rem} .section-lead{font-size:.95rem} .section-kicker{font-size:.7rem;letter-spacing:.18em} .infobar{padding:1.5rem 0} .infobar .inner{grid-template-columns:repeat(2,1fr);gap:1rem 1.5rem;justify-items:center} .info-card{justify-content:flex-start;align-items:center;text-align:center;flex-direction:column;gap:.4rem} .info-card > div:not(.info-icon){text-align:center} .info-icon{flex:0 0 36px;height:36px;width:36px} .info-icon svg{width:16px;height:16px} .info-card b{font-size:.68rem;margin-bottom:.1rem} .info-card span{font-size:.78rem;line-height:1.3} .map-wrap{height:340px} .map-stage{gap:.85rem} .missions{margin-top:1.5rem} .mission b{font-size:1.2rem} .stats{grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:1.5rem;padding-top:1.5rem} .stat b{font-size:1.7rem} .stat span{font-size:.65rem} .pillars{grid-template-columns:1fr;gap:1rem} .pillar{padding:1.5rem 1.25rem} .pillar-num{font-size:2.6rem;margin-bottom:.5rem} .pillar h3{font-size:1.2rem} .tech-item{padding:1.25rem;grid-template-columns:48px 1fr;gap:1rem} .tech-item .num{font-size:2rem} .tech-item h3{font-size:1.2rem} .process-grid{grid-template-columns:1fr;gap:1.75rem} .step{ display:grid; grid-template-columns:60px 1fr; grid-template-areas: "num title" "num desc" "num duration"; column-gap:1rem;row-gap:.35rem; text-align:left;padding:0;align-items:start; } .step .num{grid-area:num;margin:0;width:60px;height:60px;font-size:1.6rem;align-self:start} .step h3{grid-area:title;margin-bottom:0;align-self:center;min-height:60px;display:flex;align-items:center} .step p{grid-area:desc;margin-bottom:0} .step .duration{grid-area:duration;justify-self:start} .includes-grid{grid-template-columns:1fr;gap:0} .includes-grid li{font-size:.92rem} .faq-q{font-size:1.1rem;padding:1.1rem 1.25rem} .faq-q .plus{width:28px;height:28px;font-size:1.2rem} .faq-a-inner{padding:0 1.25rem 1.25rem} .contact-info,.contact-form{padding:1.5rem} .form-grid{grid-template-columns:1fr;gap:.85rem} .form-submit{font-size:.95rem;padding:1rem} .footer-grid{grid-template-columns:1fr;gap:2rem;padding:1rem 1.25rem 0} .footer-bottom{flex-direction:column;text-align:center;font-size:.75rem;padding:1.5rem 1.25rem} } @media(max-width:380px){ .hero-title{font-size:1.75rem} .section-title{font-size:1.45rem} } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .hero-logo, .hero-kicker, .hero-title, .hero-tagline, .hero-cta{ opacity:1 !important;transform:none !important; } } a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--jaune);outline-offset:2px; } /* ============ SCROLL ANIMATIONS ============ */ /* Sentinelles : elements qui apparaissent au scroll */ .reveal{ opacity:0; transform:translateY(30px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); will-change:opacity, transform; } .reveal.in{opacity:1;transform:translateY(0)} .reveal-left{transform:translateX(-40px)} .reveal-left.in{transform:translateX(0)} .reveal-right{transform:translateX(40px)} .reveal-right.in{transform:translateX(0)} .reveal-scale{transform:scale(.94)} .reveal-scale.in{transform:scale(1)} /* Stagger pour listes : enfants apparaissent en cascade */ .stagger > *{ opacity:0; transform:translateY(20px); transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); } .stagger.in > *{opacity:1;transform:translateY(0)} .stagger.in > *:nth-child(1){transition-delay:0ms} .stagger.in > *:nth-child(2){transition-delay:60ms} .stagger.in > *:nth-child(3){transition-delay:120ms} .stagger.in > *:nth-child(4){transition-delay:180ms} .stagger.in > *:nth-child(5){transition-delay:240ms} .stagger.in > *:nth-child(6){transition-delay:300ms} .stagger.in > *:nth-child(7){transition-delay:360ms} .stagger.in > *:nth-child(8){transition-delay:420ms} .stagger.in > *:nth-child(9){transition-delay:480ms} .stagger.in > *:nth-child(10){transition-delay:540ms} .stagger.in > *:nth-child(11){transition-delay:600ms} .stagger.in > *:nth-child(12){transition-delay:660ms} .stagger.in > *:nth-child(n+13){transition-delay:720ms} /* Underline animé sur titres */ .section-title em{ position:relative; display:inline-block; } .section-title em::after{ content:""; position:absolute;left:0;bottom:0; width:100%;height:3px; background:var(--rouge); transform:scaleX(0);transform-origin:left; transition:transform 1.2s cubic-bezier(.22,1,.36,1) .3s, background .6s; border-radius:2px; } .reveal.in .section-title em::after, .in .section-title em::after{transform:scaleX(.4)} /* Halo pulse sur logo header au load */ @keyframes logoPulse{ 0%,100%{filter:drop-shadow(0 2px 6px rgba(0,31,92,.18))} 50%{filter:drop-shadow(0 2px 16px rgba(0,160,240,.5)) drop-shadow(0 0 30px rgba(46,165,74,.3))} } .brand img{animation:logoPulse 4s ease-in-out infinite} /* Floating animation sur le compteur stats */ @keyframes countUp{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} } /* Scroll arrow animé */ @keyframes bounce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} } /* Card tilt effect (au survol) */ .card{ transform-style:preserve-3d; perspective:1000px; } /* Shimmer sur boutons primaires au hover */ .btn-primary{position:relative;overflow:hidden} .btn-primary::after{ content:"";position:absolute;top:0;left:-100%; width:50%;height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); transition:left .8s; pointer-events:none; } .btn-primary:hover::after{left:150%} /* Ripple sur process step */ .step .num{position:relative} .step .num::after{ content:"";position:absolute;inset:-4px; border-radius:50%; border:2px solid var(--rouge); opacity:0; transition:all .6s cubic-bezier(.22,1,.36,1), border-color .6s; } .step:hover .num::after{ opacity:.4; inset:-12px; } /* Tech-item border-left animé */ .tech-item{ position:relative; border-left:0; overflow:hidden; } .tech-item::before{ content:"";position:absolute;left:0;top:0;bottom:0; width:3px;background:var(--c-mint); transform:scaleY(0);transform-origin:top; transition:transform .8s cubic-bezier(.22,1,.36,1); } .tech-item.in-view::before{transform:scaleY(1)} /* FAQ glow */ .faq-item.open{ box-shadow:0 0 0 3px color-mix(in srgb, var(--rouge) 12%, transparent); } /* Progress bar du slider hero */ .hero-progress{ position:absolute;left:0;bottom:6px; height:2px;width:100%;z-index:5; background:transparent; overflow:hidden; } .hero-progress::before{ content:"";display:block;height:100%; background:linear-gradient(90deg, var(--rouge) 0%, var(--jaune) 100%); width:0%; transition:width 7s linear; } .hero-progress.run::before{width:100%} /* Reduced motion override */ @media (prefers-reduced-motion: reduce){ .reveal, .stagger > *{opacity:1 !important;transform:none !important} .reveal.in .section-title em::after, .in .section-title em::after{transform:scaleX(.4)} .brand img{animation:none} } /* ============ VITRINE 2026-10 : compléments propres au socle Next ============ */ /* Bootstrap est chargé avant cette feuille : ses marges (p, h3, h4, ul, figure) et le retrait des listes battent la remise à zéro « * ». Neutralisés ici, AVANT les règles de la vitrine, pour que celles-ci (même précision, plus loin) gardent le dernier mot. Précision (0,1,0) grâce à :where() : ne bat ni .ref-facts ni .drawer-links. */ .ref :where(p,h3,h4,ul,figure),.feat :where(p,h3,h4,ul,figure), .bo :where(p,h3,h4,ul,figure),.drawer :where(p,h3,h4,ul,figure){margin-top:0;margin-bottom:0} .ref :where(ul),.feat :where(ul),.bo :where(ul),.drawer :where(ul){padding-left:0} /* Jampack étire tout enfant d'un .btn (display:flex ; width:100%) : la flèche des boutons de la vitrine passait hors du bouton, et coupait le libellé du hero. Précision supérieure à la sienne. */ .btn > span.btn-arrow:not(.badge):not(.sr-only):not(span[class^=spinner]){display:inline;width:auto;height:auto} /* ============ VITRINE 2026-10 : réalisation Oderen, fonctionnalités, administration ============ */ :root{ --band:#eaf0f9; /* teinte des bandes : visible, contrairement à un gris à 3 % */ --band-filet:#cfdaec; --bleu-texte:#0062d6; /* bleu du logo assombri : 5,3:1 sur blanc, 4,7:1 sur --band */ } /* hidden casse position:sticky (le corps devient un conteneur de défilement) ; clip non. */ html,body{overflow-x:clip} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--logo-bleu);outline-offset:3px;border-radius:6px} .status-ic{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;margin-right:6px} .hero-card .visual svg.glyph{stroke-width:1.6} .btn-line{background:transparent;color:var(--logo-bleu-nuit);border:1.5px solid var(--band-filet)} .btn-line:hover{border-color:var(--logo-bleu);color:var(--bleu-texte);background:color-mix(in srgb,var(--logo-bleu) 6%,#fff)} /* --- Navigation : sous 1100 px, le tiroir remplace le menu (libellés plus longs qu'avant) --- */ @media(max-width:1100px){ nav.main-nav{display:none} .burger{display:flex} } .drawer-veil{position:fixed;inset:0;z-index:190;background:rgba(0,15,40,.5);opacity:0;transition:opacity .3s} .drawer-veil.open{opacity:1} .drawer{ position:fixed;top:0;right:0;bottom:0;z-index:200; width:min(100%,27rem);background:#fff; display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain; box-shadow:-24px 0 60px rgba(0,15,40,.22); transform:translateX(100%);visibility:hidden; transition:transform .32s cubic-bezier(.22,1,.36,1), visibility 0s linear .32s; } .drawer.open{transform:none;visibility:visible;transition:transform .32s cubic-bezier(.22,1,.36,1), visibility 0s} /* Enfants à hauteur fixe : sinon une colonne flex les écrase au lieu de défiler. */ .drawer > *{flex-shrink:0} .drawer-head{ position:sticky;top:0;z-index:1;background:#fff; display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:.9rem 1.25rem;border-bottom:1px solid var(--gris-2); } .drawer-title{font-family:var(--font-titres,'Fraunces',Georgia,serif);font-size:1.55rem;font-weight:600;color:var(--noir)} .drawer-close{ display:inline-flex;align-items:center;gap:.5rem;min-height:44px; padding:.55rem 1rem;border:2px solid var(--logo-bleu-nuit);border-radius:999px; color:var(--logo-bleu-nuit);font-weight:600;font-size:.92rem;background:#fff; } .drawer-close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round} .drawer-close:hover{background:var(--logo-bleu-nuit);color:#fff} .drawer-tiles{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;padding:1.25rem} .drawer-tile{ display:flex;flex-direction:column;justify-content:space-between;gap:.75rem;min-height:96px; padding:1rem;border:1px solid var(--gris-2);border-radius:14px; font-weight:600;color:var(--noir);line-height:1.25; } .drawer-tile svg{width:24px;height:24px;stroke:var(--bleu-texte);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .drawer-tile:hover{border-color:var(--logo-bleu);background:color-mix(in srgb,var(--logo-bleu) 6%,#fff)} /* Lien mis en avant : teinte légère et filet, pas d'aplat vif. */ .drawer-tile.is-accent{background:color-mix(in srgb,var(--logo-vert) 9%,#fff);border-color:color-mix(in srgb,var(--logo-vert) 35%,#fff)} .drawer-tile.is-accent svg{stroke:var(--jaune-dark)} .drawer-links{list-style:none;padding:0 1.25rem} .drawer-links a{ display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:52px; border-bottom:1px solid var(--gris-2);font-size:1.02rem;font-weight:500;color:var(--noir); } .drawer-links a::after{content:"→";color:var(--text-soft)} .drawer-links a:hover{color:var(--bleu-texte)} .drawer-foot{margin-top:auto;padding:1.5rem 1.25rem 2rem;display:flex;flex-wrap:wrap;gap:.4rem;font-size:.92rem;color:var(--text-soft)} .drawer-foot a{color:var(--bleu-texte);font-weight:700} body.drawer-open{overflow:hidden} /* --- Cadres d'appareils (captures) --- */ .frame{ background:#fff;border-radius:12px;overflow:hidden; border:1px solid #dbe2ee; box-shadow:0 30px 70px rgba(0,31,92,.16),0 6px 18px rgba(0,31,92,.08); } .frame-bar{display:flex;align-items:center;gap:.75rem;padding:.5rem .8rem;background:#f1f4f9;border-bottom:1px solid #e1e7f0} .frame-bar .dots{display:flex;gap:5px;flex-shrink:0} .frame-bar .dots i{width:9px;height:9px;border-radius:50%;background:#d3d9e4} .frame-bar .url{flex:1;min-width:0;background:#fff;border-radius:6px;padding:.2rem .7rem;font-size:.72rem;color:#525866;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .frame > img{display:block;width:100%;height:auto;aspect-ratio:16/10} .phone{ border-radius:30px;padding:7px;background:#0d1320; box-shadow:0 28px 60px rgba(0,15,40,.32),inset 0 0 0 1px rgba(255,255,255,.08); } .phone > img{display:block;width:100%;height:auto;aspect-ratio:540/1169;border-radius:24px} /* --- Réalisation --- */ .ref{background:#fff;padding:9rem 0 6rem} .ref-intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3.5rem;align-items:center} .ref-text .section-title{margin-bottom:1.25rem} .ref-facts{ list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem; margin:2rem 0;padding:1.4rem 0;border-top:1px solid var(--gris-2);border-bottom:1px solid var(--gris-2); } .ref-facts b{display:block;font-family:var(--font-titres,'Fraunces',Georgia,serif);font-size:2.4rem;line-height:1;color:var(--logo-bleu-nuit)} .ref-facts span{display:block;margin-top:.45rem;font-size:.84rem;line-height:1.45;color:var(--text-soft)} .ref-cta{display:flex;flex-wrap:wrap;gap:.75rem} .ref-cta .btn{white-space:nowrap} .device-stage{position:relative;padding:0 3.5rem 3.5rem 0} .device-stage .phone{position:absolute;right:0;bottom:0;width:clamp(120px,24%,190px)} .tour-head{margin:6rem 0 2rem} .tour-head h3{font-size:clamp(1.5rem,2.6vw,2.1rem)} .tour{display:grid;grid-template-columns:minmax(210px,270px) minmax(0,1fr);gap:2.5rem;align-items:start} .tour-tabs{display:flex;flex-direction:column;gap:.35rem;position:sticky;top:120px} .tour-tab{ display:flex;align-items:center;gap:.8rem;min-height:48px;width:100%; padding:.7rem 1rem;border-radius:12px;border:1px solid transparent; text-align:left;font-weight:600;font-size:.97rem;color:var(--text); } .tour-tab svg{width:20px;height:20px;flex:0 0 20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .tour-tab:hover{background:var(--gris)} .tour-tab[aria-selected="true"]{background:var(--band);border-color:var(--band-filet);color:var(--logo-bleu-nuit)} .tour-tab[aria-selected="true"] svg{color:var(--bleu-texte)} .tour-panel{margin:0} .tour-panel[hidden]{display:none} .tour-panel figcaption{display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;margin-top:1.4rem} .tour-panel h4{font-size:1.35rem;margin-bottom:.4rem} .tour-panel p{color:var(--text-soft);font-size:.98rem;line-height:1.65;max-width:60ch} .tour-link{flex-shrink:0;white-space:nowrap;font-weight:700;font-size:.9rem;color:var(--bleu-texte);padding:.35rem 0} .tour-link:hover{text-decoration:underline;text-underline-offset:3px} .phones{margin-top:6rem;padding:3rem;border-radius:22px;background:var(--band)} .phones-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:2.5rem;align-items:end;margin-bottom:2.5rem} .phones-head h3{font-size:clamp(1.5rem,2.6vw,2.1rem)} .phones-head p{color:var(--text-soft);line-height:1.65} .phones-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.75rem} .phones-row figure{margin:0} .phones-row .phone{max-width:220px;margin:0 auto} .phones-row figcaption{margin-top:1rem;text-align:center;font-size:.88rem;line-height:1.45;color:var(--text)} /* --- Fonctionnalités --- */ .feat{background:var(--band)} .feat .section-head{margin-bottom:2rem} .feat-group{margin-top:3rem} .feat-group-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1px solid var(--band-filet)} .feat-group-head h3{font-size:1.55rem} .feat-group-head span{color:var(--text-soft);font-size:.95rem} /* auto-fill (et non auto-fit) : un groupe court ne voit pas ses cartes s'étirer ; grid-auto-rows:1fr : toutes les cartes d'un groupe ont la même hauteur. */ .feat-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,14.5rem),1fr));grid-auto-rows:1fr;gap:1rem} .feat-card{ display:flex;flex-direction:column;gap:.55rem; padding:1.3rem 1.2rem 1.1rem;border-radius:14px; background:#fff;border:1px solid var(--band-filet); transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s; } .feat-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,31,92,.1)} .feat-ic{width:42px;height:42px;border-radius:12px;background:var(--band);color:var(--bleu-texte);display:flex;align-items:center;justify-content:center;margin-bottom:.2rem} .feat-ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .feat-card h4{font-size:1.12rem;color:var(--noir)} .feat-card p{flex:1 1 auto;font-size:.9rem;line-height:1.55;color:var(--text-soft)} .feat-card a,.feat-note{margin-top:auto;padding-top:.35rem;font-size:.83rem;font-weight:700;color:var(--bleu-texte)} .feat-card a:hover{text-decoration:underline;text-underline-offset:3px} .feat-note{color:var(--text-soft);font-weight:600} .feat-more{ margin-top:3rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem; padding:1.5rem 1.75rem;border-radius:16px;border:1.5px dashed color-mix(in srgb,var(--band-filet) 60%,#8a94a6);background:rgba(255,255,255,.55); } .feat-more p{font-size:.98rem;line-height:1.6;color:var(--text);max-width:75ch} .feat-more b{color:var(--noir)} .feat-more .btn{flex-shrink:0;background:#fff} /* --- Espace d'administration --- */ .bo{background:#fff} .bo-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:4rem;align-items:start} .bo-stage{position:sticky;top:110px} .bo-visual{position:relative;padding:0 4rem 3rem 0} .bo-app{display:grid;grid-template-columns:148px minmax(0,1fr);min-height:400px;font-size:12px;line-height:1.35} .bo-side{background:color-mix(in srgb,var(--logo-bleu-nuit) 80%,#0b0f18);color:#c5d1e5;padding:1rem .55rem;display:flex;flex-direction:column;gap:.1rem} .bo-side .bo-logo{height:20px;width:88px;border-radius:5px;margin:0 .45rem .9rem;background:linear-gradient(90deg,var(--logo-bleu),var(--logo-vert))} .bo-side span{padding:.38rem .55rem;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bo-side span.on{background:rgba(255,255,255,.13);color:#fff;font-weight:600} .bo-main{background:var(--band);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.65rem;min-width:0} .bo-top{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem} .bo-back{color:#4a5568} .bo-pill{padding:.12rem .55rem;border-radius:999px;background:color-mix(in srgb,var(--logo-bleu) 15%,#fff);color:var(--bleu-texte);font-weight:700;font-size:11px} .bo-see{margin-left:auto;padding:.22rem .65rem;border-radius:6px;border:1px solid #a9b9d4;color:#0f2747;font-weight:600} .bo-title{font-family:var(--font-titres,'Fraunces',Georgia,serif);font-size:19px;font-weight:600;color:#0f1d33} .bo-label{font-weight:700;color:#3a4558;font-size:11px;letter-spacing:.04em} /* Le blanc est réservé aux zones de saisie : panneaux teintés, champ blanc. */ .bo-field{background:#fff;border:1px solid #c6d1e3;border-radius:7px} .bo-tools{display:flex;flex-wrap:wrap;gap:.3rem;padding:.4rem .5rem;border-bottom:1px solid #e3e8f0;color:#3a4558} .bo-tools > *{padding:.08rem .38rem;border-radius:4px;background:#f0f3f8;font-style:normal} .bo-tools i{font-style:italic} .bo-lines{display:flex;flex-direction:column;gap:.45rem;padding:.7rem} .bo-lines i{display:block;height:6px;border-radius:3px;background:#d8dfeb} .bo-lines i:nth-child(2){width:93%} .bo-lines i:nth-child(3){width:64%} .bo-thumbs{display:flex;gap:.4rem;padding:0 .7rem .7rem} .bo-thumbs i{width:54px;height:40px;border-radius:5px;background:linear-gradient(135deg,#7dc7a8,#2d8bb0)} .bo-thumbs i:nth-child(2){background:linear-gradient(135deg,#f0a487,#e15a3f)} .bo-thumbs i:nth-child(3){background:linear-gradient(135deg,#6db8d4,#1a5c8a)} .bo-thumbs i.add{display:flex;align-items:center;justify-content:center;background:#fff;border:1.5px dashed #a9b9d4;color:#5a6476;font-style:normal;font-size:16px} .bo-rdv{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;border-radius:8px;background:color-mix(in srgb,var(--band-filet) 55%,var(--band));color:#26324a} .bo-rdv svg{width:20px;height:20px;flex:0 0 20px;stroke:var(--bleu-texte);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .bo-rdv b{display:block;color:#0f1d33} .bo-rdv div{min-width:0} .bo-chip{margin-left:.35rem;white-space:nowrap;vertical-align:1px;padding:.12rem .5rem;border-radius:999px;background:#e6f5ea;color:#1b6b34;font-weight:700;font-size:10.5px} .bo-actions{display:flex;justify-content:flex-start;gap:.45rem;margin-top:auto} .bo-btn{padding:.38rem .85rem;border-radius:6px;border:1px solid #a9b9d4;color:#0f2747;font-weight:600} .bo-btn.primary{background:var(--logo-bleu);border-color:var(--logo-bleu);color:#fff} .bo-phone{position:absolute;right:0;bottom:0;width:clamp(116px,24%,160px)} .bp-screen{border-radius:24px;background:var(--band);aspect-ratio:9/18;padding:1.1rem .7rem .8rem;display:flex;flex-direction:column;gap:.55rem;font-size:10.5px;overflow:hidden} .bp-head{font-family:var(--font-titres,'Fraunces',Georgia,serif);font-size:14px;font-weight:600;color:#0f1d33;padding:0 .2rem} .bp-grid{display:grid;grid-template-columns:1fr 1fr;gap:.35rem} .bp-grid i{aspect-ratio:4/3;border-radius:6px;background:linear-gradient(135deg,#7dc7a8,#2d8bb0)} .bp-grid i:nth-child(2n){background:linear-gradient(135deg,#f0a487,#e89240)} .bp-grid i:nth-child(3n){background:linear-gradient(135deg,#6db8d4,#133a5e)} .bp-progress{display:flex;flex-direction:column;gap:.3rem;color:#3a4558;font-weight:600} .bp-progress i{display:block;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--logo-vert) 75%,#cfd8e6 75%)} .bp-btn{margin-top:auto;white-space:nowrap;padding:.5rem;border-radius:8px;background:var(--logo-bleu);color:#fff;text-align:center;font-weight:700} .bo-note{margin-top:.9rem;font-size:.82rem;color:var(--text-soft)} .bo-groups{display:flex;flex-direction:column;gap:2.25rem} .bo-group h3{font-size:1.4rem;margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--gris-2)} .bo-list{list-style:none;display:flex;flex-direction:column;gap:1rem} .bo-list li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:.9rem;align-items:start} .bo-list .ic{width:38px;height:38px;border-radius:10px;background:var(--band);color:var(--bleu-texte);display:flex;align-items:center;justify-content:center} .bo-list .ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .bo-list b{display:block;font-size:.98rem;color:var(--noir);margin-bottom:.1rem} .bo-list span{display:block;font-size:.9rem;line-height:1.55;color:var(--text-soft)} .bo-mail{margin-top:4rem;display:flex;align-items:center;gap:1.25rem;padding:1.5rem 1.75rem;border-radius:16px;background:var(--band)} .bo-mail .ic{flex:0 0 48px;height:48px;border-radius:50%;background:#fff;color:var(--bleu-texte);display:flex;align-items:center;justify-content:center} .bo-mail .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .bo-mail p{line-height:1.6} .bo-mail b{color:var(--noir)} /* --- Pied de page (17/10/2026) --- Listes remises au bord de leur titre (Bootstrap leur ajoutait 32 px sur le socle Next), textes à 4,5:1 au moins sur le fond sombre (la ligne du bas était à 2,5:1). */ footer.site-footer{padding-top:4.5rem} .footer-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr) minmax(0,1.25fr) minmax(0,.9fr);gap:2.75rem 2.5rem} .footer-brand .footer-logo{display:inline-block;margin-bottom:1.25rem;border-radius:12px} .footer-brand .footer-logo img{ display:block;width:auto;height:64px;max-width:220px;margin:0; padding:.6rem 1rem;border-radius:12px;background:#fff;object-fit:contain; border:0;box-shadow:0 6px 20px rgba(0,0,0,.28); } .footer-brand p{margin:0 0 1.35rem;font-size:.92rem;line-height:1.7;color:#bfc2c9} .footer-brand p a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px} .footer-brand p a:hover{text-decoration-color:currentColor} .footer-brand .footer-cta{ display:inline-flex;align-items:center;gap:.55rem;min-height:46px; padding:.7rem 1.25rem;border-radius:999px;background:#fff;color:var(--noir); font-weight:700;font-size:.92rem;line-height:1.2;transition:transform .2s, box-shadow .2s; } .footer-brand .footer-cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.3);color:var(--noir)} .footer-brand .footer-note{margin:.7rem 0 0;font-size:.82rem;color:#aeb2ba} .footer-col h2{ margin:0 0 1.1rem;font-family:inherit;font-size:.78rem;font-weight:700;line-height:1.3; letter-spacing:.18em;text-transform:uppercase;color:#fff; } .footer-col ul{list-style:none;margin:0;padding:0} .footer-col li{margin:0 0 .55rem} .footer-col a{display:inline-block;padding:.12rem 0;font-size:.92rem;color:#c6c9cf} .footer-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px} .footer-contact li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:.7rem;align-items:start;font-size:.92rem;line-height:1.5;color:#c6c9cf} .footer-contact li > a,.footer-contact li > span{padding:0;overflow-wrap:anywhere} .footer-contact svg{width:18px;height:18px;margin-top:.15rem;stroke:var(--logo-vert-clair);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .footer-bottom{align-items:center;font-size:.82rem;color:#aeb2ba} .footer-top{ display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:.4rem .95rem; border:1px solid rgba(255,255,255,.22);border-radius:999px;background:transparent; color:#e2e4e8;font-size:.82rem;font-weight:600; } .footer-top svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .footer-top:hover{border-color:#fff;color:#fff} @media(max-width:1024px){ .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem 2rem} .footer-brand{grid-column:1 / -1;max-width:36rem} } @media(max-width:768px){ .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.25rem 1.5rem;padding:1rem 1.25rem 0} .footer-brand{grid-column:1 / -1} /* « L'offre » et « Informations » côte à côte, « Nous joindre » (adresse longue) en dessous. */ .footer-grid > .footer-col:nth-child(4){order:2} .footer-grid > .footer-col:nth-child(3){order:3;grid-column:1 / -1} .footer-bottom{flex-direction:column;align-items:center;text-align:center;gap:.75rem} } @media(max-width:360px){ .footer-grid{grid-template-columns:minmax(0,1fr)} } /* --- Carte de France : tuiles OpenStreetMap adoucies (17/10/2026) --- Le fond standard d'OSM est très coloré : gris clair, pour que les repères colorés des communes ressortent comme sur l'ancien fond CARTO. */ #mapFrance .leaflet-tile{filter:grayscale(1) brightness(1.08) contrast(.88)} #mapFrance .leaflet-control-attribution a{color:inherit;text-decoration:underline} /* --- Ancres : l'en-tête collant ne doit pas masquer le titre visé --- */ section[id]{scroll-margin-top:100px} @media(max-width:1024px){ .ref{padding-top:7rem} .ref-intro,.bo-grid{grid-template-columns:minmax(0,1fr);gap:3rem} .bo-stage{position:static} .tour{grid-template-columns:minmax(0,1fr);gap:1.25rem} .tour-tabs{ flex-direction:row;position:static;overflow-x:auto;scroll-snap-type:x proximity; padding:0 0 .5rem;margin:0 -1.5rem;padding-left:1.5rem;padding-right:1.5rem;scrollbar-width:thin; } .tour-tab{width:auto;flex:0 0 auto;white-space:nowrap;border-color:var(--gris-2);scroll-snap-align:start} .phones{padding:2rem 1.5rem} .phones-head{grid-template-columns:minmax(0,1fr);gap:.75rem} .phones-row{grid-template-columns:repeat(4,minmax(150px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.75rem} .phones-row figure{scroll-snap-align:start} } @media(max-width:768px){ .ref{padding-top:6rem} .tour-tabs{margin:0 -1.25rem;padding-left:1.25rem;padding-right:1.25rem} .tour-panel figcaption{flex-direction:column;gap:.75rem} .device-stage{padding:0 2rem 2.5rem 0} .bo-visual{padding:0 2rem 2.5rem 0} .bo-app{grid-template-columns:minmax(0,1fr)} .bo-side{display:none} .feat-more{flex-direction:column;align-items:flex-start} .bo-mail{flex-direction:column;align-items:flex-start} } @media(max-width:1024px){ .hero-cards{gap:.85rem} .hero-card .body{padding:.9rem 1rem} } @media(max-width:640px){ .hero-cards{grid-template-columns:minmax(0,1fr);margin-top:-40px} .hero-card .visual{height:72px} .bo-visual{padding:0} .bo-phone{display:none} } @media(max-width:480px){ .ref-cta .btn{width:100%;justify-content:center} .ref-facts{gap:.75rem} .ref-facts b{font-size:1.85rem} .ref-facts span{font-size:.78rem} .phones{padding:1.5rem 1rem;margin-left:-.25rem;margin-right:-.25rem} .bo-top .bo-back{display:none} } @media (prefers-reduced-motion: reduce){ .drawer,.drawer.open,.drawer-veil{transition:none} .feat-card{transition:none} .feat-card:hover{transform:none} } /* Palette Jampack de la production (sarcelle) et police DM Sans pour les titres. */ :root{ --band:#e5f1f2; --band-filet:#c0dde0; --bleu-texte:#006a74; /* sarcelle assombri : 6,3:1 sur blanc, 5,4:1 sur --band */ --font-titres:var(--font-jampack),'DM Sans',system-ui,-apple-system,sans-serif; }

Actualités des communes