/* Polices chargées via dans le de chaque page (plus rapide qu'un @import). */ /* ========================================================================= CPTS — DESIGN SYSTEM PARTAGÉ Polices identiques aux sites CPTS : Rubik (titres) + Nunito (texte). Change ces variables pour rebrander toute la CPTS en 30 secondes. ========================================================================= */ :root{ /* Palette extraite du logo CPTS Sud Ouest Amiénois (5 pétales + texte) */ --navy:#082850; /* bleu foncé du logo → titres */ --marine:#304c74; /* pétale marine */ --sky:#74a8d8; /* pétale bleu ciel */ --coral:#ec706c; /* pétale rose-rouge → boutons */ --yellow:#f0b840; /* pétale jaune */ --green:#94c830; /* pétale vert */ --primary:#2f6aa8; /* bleu d'interaction (liens, icônes, filtres) */ --primary-dark:var(--navy); --primary-light:#e9f1f9; --accent:var(--coral); --accent-light:#fdeceb; --accent2:var(--green); --ink:#1f2e3d; /* texte principal */ --muted:#586a78; /* texte secondaire */ --bg:#ffffff; --bg-soft:#eef3f8; --border:#e3e9ef; --radius:14px; /* Ombres douces, teintées et étagées (profondeur naturelle, pas la même partout) */ --shadow:0 1px 2px rgba(20,54,84,.05),0 10px 30px -14px rgba(20,54,84,.13); --shadow-hover:0 2px 8px rgba(20,54,84,.07),0 24px 50px -18px rgba(20,54,84,.22); --font:'Nunito',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --font-head:'Rubik','Nunito',-apple-system,Helvetica,Arial,sans-serif; --max:1180px; } /* ============================ RESET / BASE ============================ */ *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{font-family:var(--font);color:var(--ink);line-height:1.6;background:var(--bg);} img{max-width:100%;display:block;} a{text-decoration:none;color:inherit;} ul{list-style:none;} .container{max-width:var(--max);margin:0 auto;padding:0 24px;position:relative;z-index:2;} section{padding:72px 0;} h1,h2,h3,h4{line-height:1.25;font-weight:800;font-family:var(--font-head);letter-spacing:-.01em;} .logo,.btn,.nav-cta .btn,.menu a{font-family:var(--font-head);} h2.section-title{font-size:clamp(27px,3.6vw,40px);text-align:center;color:var(--primary-dark);letter-spacing:-.02em;line-height:1.15;} h2.section-title span{color:var(--primary);} .section-sub{text-align:center;color:var(--muted);max-width:600px;margin:16px auto 0;font-size:17px;line-height:1.55;} .center{text-align:center;} .mt-30{margin-top:30px;} .btn{display:inline-block;padding:13px 28px;border-radius:999px;font-weight:700;font-size:15px;cursor:pointer;border:none;transition:.25s;} .btn-primary{background:var(--primary);color:#fff;} .btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-hover);} .btn-outline{background:transparent;color:var(--primary);border:2px solid var(--primary);} .btn-outline:hover{background:var(--primary);color:#fff;} .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:2px solid rgba(255,255,255,.55);} .btn-ghost:hover{background:rgba(255,255,255,.22);} .btn-white{background:#fff;color:var(--primary);} .btn-white:hover{background:var(--accent-light);color:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-hover);} /* Focus accessible (clavier) */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,.btn:focus-visible{ outline:3px solid var(--accent);outline-offset:2px;} /* ============================ HEADER ============================ */ header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);} .nav{display:flex;align-items:center;height:74px;gap:28px;} .logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18px;color:var(--primary);white-space:nowrap;flex-shrink:0;} .logo .mark{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--primary),var(--accent));display:grid;place-items:center;color:#fff;font-size:20px;flex-shrink:0;} .menu{display:flex;align-items:center;justify-content:center;gap:24px;flex:1;} .menu a{font-weight:600;font-size:15px;color:var(--ink);position:relative;padding:6px 0;transition:.2s;white-space:nowrap;} .menu a:hover,.menu a.active{color:var(--primary);} .menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--primary);transition:.25s;} .menu a:hover::after,.menu a.active::after{width:100%;} .nav-cta{display:flex;gap:10px;align-items:center;flex-shrink:0;} /* Boutons du header : compacts et nets (pas le gros contour) */ .nav-cta .btn{padding:9px 18px;font-size:14px;} .nav-cta .btn-outline{background:var(--primary-light);color:var(--primary);border:none;} .nav-cta .btn-outline:hover{background:var(--primary);color:#fff;} .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:8px;} .burger span{width:26px;height:3px;background:var(--ink);border-radius:3px;transition:.3s;} /* ============================ PAGE BANNER (pages intérieures) ============================ */ .page-banner{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;padding:64px 0;position:relative;overflow:hidden;} .page-banner::before{content:"";position:absolute;top:-60px;right:-60px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.07);} .page-banner h1{font-size:clamp(28px,4vw,44px);position:relative;z-index:2;} .breadcrumb{position:relative;z-index:2;margin-top:10px;opacity:.9;font-size:14px;} .breadcrumb a:hover{text-decoration:underline;} /* ============================ HERO (accueil) ============================ */ .hero{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;position:relative;overflow:hidden;padding:90px 0;} .hero::before{content:"";position:absolute;top:-80px;right:-80px;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.07);} .hero::after{content:"";position:absolute;bottom:-120px;left:-60px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.05);} .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;position:relative;z-index:2;} .hero h1{font-size:clamp(30px,4.5vw,50px);margin-bottom:18px;} .hero p.lead{font-size:19px;opacity:.95;margin-bottom:28px;max-width:520px;} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;} .hero-card{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:var(--radius);padding:30px;backdrop-filter:blur(6px);} .hero-card .quote{font-size:20px;font-style:italic;line-height:1.5;} .hero-card .author{margin-top:14px;font-weight:700;opacity:.85;} /* ============================ STATS ============================ */ .stats{background:var(--bg-soft);} .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .stat{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:32px 20px;text-align:center;box-shadow:var(--shadow);transition:.25s;} .stat:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);} .stat .stat-ico{width:54px;height:54px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center; font-size:24px;background:var(--primary-light);border:1px solid rgba(47,106,168,.12);color:var(--primary);transition:.35s cubic-bezier(.34,1.56,.64,1);} .stat:hover .stat-ico{background:var(--primary);color:#fff;transform:scale(1.08) rotate(-6deg);} .stat .num{font-size:42px;font-weight:800;color:var(--primary);font-family:var(--font-head);} .stat .label{color:var(--muted);font-weight:600;margin-top:6px;font-size:15px;} /* ============================ INTRO / TEXT BLOCKS ============================ */ .intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;} .intro-grid.rev{direction:rtl;}.intro-grid.rev>*{direction:ltr;} .media-box{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;background:var(--primary-light);display:grid;place-items:center;color:var(--primary);font-weight:700;} .block h2{font-size:clamp(24px,3vw,34px);margin-bottom:16px;} .block h2 span{color:var(--primary);} .block p{color:var(--muted);margin-bottom:14px;font-size:16px;} .prose{max-width:820px;margin:0 auto;} .prose p{color:var(--muted);font-size:16px;margin-bottom:16px;} .prose h3{color:var(--ink);font-size:22px;margin:28px 0 12px;} .prose ul.bullets{margin:0 0 16px;padding-left:0;} .prose ul.bullets li{position:relative;padding-left:30px;margin-bottom:10px;color:var(--muted);} .prose ul.bullets li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:800;} /* ============================ ESPACES ============================ */ .espaces-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;} .espace{border-radius:var(--radius);padding:36px 28px;color:#fff;position:relative;overflow:hidden;min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;transition:.25s;} .espace:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);} .espace.pro{background:linear-gradient(135deg,var(--primary),var(--primary-dark));} .espace.patient{background:linear-gradient(135deg,var(--accent2),#127a54);} .espace.adherent{background:linear-gradient(135deg,#5a4fcf,#3f37a8);} .espace .ico{font-size:34px;margin-bottom:14px;} .espace h3{font-size:22px;margin-bottom:8px;} .espace p{opacity:.9;font-size:15px;margin-bottom:16px;} .espace .arrow{font-weight:700;} /* ============================ CARDS / MISSIONS ============================ */ .cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;} .cards-grid.cols-2{grid-template-columns:repeat(2,1fr);} .card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:32px 30px;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s;} .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:rgba(47,106,168,.28);} .card .ico{width:54px;height:54px;border-radius:50%;background:var(--primary-light);border:1px solid rgba(47,106,168,.12);color:var(--primary);display:grid;place-items:center;font-size:24px;margin-bottom:18px;} .card h3{font-size:18px;margin-bottom:8px;} .card p{color:var(--muted);font-size:15px;} /* ============================ TEAM ============================ */ .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px;} .member{text-align:center;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px 18px;box-shadow:var(--shadow);} .member .avatar{width:88px;height:88px;border-radius:50%;margin:0 auto 16px;background:var(--primary-light);border:1px solid rgba(47,106,168,.12);display:grid;place-items:center;font-size:32px;color:var(--primary);font-weight:800;} .member h4{font-size:16px;} .member .role{color:var(--primary);font-weight:600;font-size:14px;margin-top:2px;} .member .pro{color:var(--muted);font-size:13px;margin-top:4px;} /* ============================ ACTUS ============================ */ .actus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;} .actu{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.25s;} .actu:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);} .actu .thumb{aspect-ratio:16/9;background:var(--primary-light);display:grid;place-items:center;color:var(--primary);font-weight:700;} .actu .body{padding:22px;} .actu .date{font-size:13.5px;color:var(--muted);font-weight:600;} .actu h3{font-size:18px;margin:8px 0;} .actu p{color:var(--muted);font-size:14px;margin-bottom:12px;} .actu .read{color:var(--primary);font-weight:700;font-size:14px;} .filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:30px;} .filters button{padding:9px 20px;border-radius:999px;border:1px solid var(--border);background:#fff;font-weight:600;cursor:pointer;transition:.2s;} .filters button.active,.filters button:hover{background:var(--primary);color:#fff;border-color:var(--primary);} /* ============================ ACCORDION / FAQ ============================ */ .accordion{max-width:820px;margin:36px auto 0;} .acc-item{border:1px solid var(--border);border-radius:12px;margin-bottom:12px;overflow:hidden;background:#fff;} .acc-head{padding:18px 22px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:16px;} .acc-head .plus{color:var(--primary);font-size:22px;transition:.3s;} .acc-item.open .acc-head .plus{transform:rotate(45deg);} .acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease;} .acc-body p{padding:0 22px 18px;color:var(--muted);} /* ============================ TABLE / ANNUAIRE ============================ */ .table-wrap{overflow-x:auto;margin-top:30px;border:1px solid var(--border);border-radius:var(--radius);} table.annuaire{width:100%;border-collapse:collapse;min-width:560px;} table.annuaire th,table.annuaire td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--border);font-size:15px;} table.annuaire th{background:var(--primary-light);color:var(--primary);font-weight:700;} table.annuaire tr:hover td{background:var(--bg-soft);} .search-bar{display:flex;gap:12px;max-width:560px;margin:30px auto 0;} .search-bar input,.search-bar select{padding:12px 14px;border:1px solid var(--border);border-radius:10px;font-family:inherit;font-size:15px;flex:1;} /* ============================ INFO BOXES (urgences) ============================ */ .info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px;} .info-box{border-radius:var(--radius);padding:30px;border-left:5px solid var(--primary);background:var(--bg-soft);} .info-box.alert{border-color:#d9534f;background:#fdf0ef;} .info-box h3{font-size:19px;margin-bottom:10px;display:flex;align-items:center;gap:10px;} .info-box p{color:var(--muted);font-size:15px;margin-bottom:8px;} .info-box .big-phone{font-size:30px;font-weight:800;color:var(--primary);} /* ============================ PARTNERS ============================ */ .partners-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:36px;} .plogo{width:150px;height:80px;background:#fff;border:1px solid var(--border);border-radius:12px;display:grid;place-items:center;color:var(--muted);font-weight:700;font-size:14px;filter:grayscale(1);opacity:.7;transition:.25s;} .plogo:hover{filter:none;opacity:1;} /* ============================ CONTACT ============================ */ .contact{background:linear-gradient(135deg,var(--primary-light),var(--accent-light));} .contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start;} .contact-info h2{font-size:clamp(24px,3vw,34px);margin-bottom:16px;} .contact-info h2 span{color:var(--primary);} .contact-info .item{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px;} .contact-info .item .ico{width:44px;height:44px;border-radius:12px;background:#fff;color:var(--primary);display:grid;place-items:center;font-size:20px;flex-shrink:0;box-shadow:var(--shadow);} .contact-info .item strong{display:block;} .contact-info .item span{color:var(--muted);font-size:15px;} .form{background:#fff;border-radius:var(--radius);padding:34px;box-shadow:var(--shadow);} .form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .field{margin-bottom:16px;} .field label{display:block;font-weight:600;font-size:14px;margin-bottom:6px;} .field input,.field textarea,.field select{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:10px;font-family:inherit;font-size:15px;transition:.2s;} .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);} .field textarea{resize:vertical;min-height:120px;} .map-box{aspect-ratio:16/10;border-radius:var(--radius);background:linear-gradient(135deg,var(--primary-light),var(--accent-light));display:grid;place-items:center;color:var(--primary);font-weight:700;margin-top:30px;box-shadow:var(--shadow);} /* ============================ CTA BAND ============================ */ .cta-band{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;text-align:center;border-radius:var(--radius);padding:54px 30px;margin:0 auto;} .cta-band h2{font-size:clamp(24px,3vw,34px);margin-bottom:12px;} .cta-band p{opacity:.95;margin-bottom:24px;font-size:17px;} /* ============================ FOOTER ============================ */ footer{background:var(--ink);color:#cdd8e0;padding:60px 0 24px;} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;} .footer-grid h4{color:#fff;font-size:16px;margin-bottom:16px;} .footer-grid a{display:block;color:#cdd8e0;padding:5px 0;font-size:14px;transition:.2s;} .footer-grid a:hover{color:#fff;padding-left:4px;} .footer-logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:18px;color:#fff;margin-bottom:14px;} .footer-logo .mark{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--accent));display:grid;place-items:center;} .socials{display:flex;gap:10px;margin-top:16px;} .socials a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:16px;transition:.2s;} .socials a:hover{background:var(--primary);} .footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:20px;text-align:center;font-size:13px;color:#8da0ad;} /* ============================ ANIMATIONS ============================ */ .reveal{opacity:0;transform:translateY(24px);transition:.6s ease;} .reveal.in{opacity:1;transform:none;} /* ============================ RESPONSIVE ============================ */ @media(max-width:900px){ .menu,.nav-cta .btn{display:none;} .burger{display:flex;} .nav{justify-content:space-between;} .menu.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;background:#fff;padding:20px 24px;gap:6px;border-bottom:1px solid var(--border);box-shadow:var(--shadow);} .menu.open a{padding:12px 0;border-bottom:1px solid var(--border);} .hero-grid,.intro-grid,.contact-grid{grid-template-columns:1fr;} .intro-grid.rev{direction:ltr;} .stats-grid,.team-grid{grid-template-columns:repeat(2,1fr);} .espaces-grid,.cards-grid,.cards-grid.cols-2,.actus-grid,.info-grid{grid-template-columns:1fr;} .footer-grid{grid-template-columns:1fr 1fr;} .form .row{grid-template-columns:1fr;} } @media(max-width:520px){ .stats-grid,.team-grid,.footer-grid{grid-template-columns:1fr;} section{padding:50px 0;} } /* ========================================================================= ✨ PACK ANIMATIONS — appliqué automatiquement à toutes les pages ========================================================================= */ /* ---- Barre de progression de lecture (en haut) ---- */ .scroll-progress{position:fixed;top:0;left:0;height:4px;width:0;z-index:200; background:linear-gradient(90deg,var(--primary),var(--accent));transition:width .1s linear;} /* ---- Header qui rétrécit au scroll ---- */ header{transition:box-shadow .3s,background .3s;} header.scrolled{box-shadow:0 4px 24px rgba(11,110,158,.12);background:rgba(255,255,255,.98);} header.scrolled .nav{height:62px;transition:height .3s;} .nav{transition:height .3s;} /* ---- Variantes de reveal (direction) + cascade ---- */ .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);} .reveal.from-left{transform:translateX(-22px);} .reveal.from-right{transform:translateX(22px);} .reveal.zoom{transform:scale(.95);} .reveal.in{opacity:1;transform:none;} /* ---- Fond dégradé animé (hero + bannières + bandeaux CTA) ---- */ .hero,.page-banner,.cta-band{background-size:200% 200%;animation:gradientShift 14s ease infinite;} @keyframes gradientShift{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}} /* ---- Formes flottantes du hero/bannière ---- */ .hero::before,.page-banner::before{animation:floatY 9s ease-in-out infinite;} .hero::after{animation:floatY 11s ease-in-out infinite reverse;} @keyframes floatY{0%,100%{transform:translateY(0) translateX(0);}50%{transform:translateY(-26px) translateX(14px);}} /* ---- Carte hero : léger flottement ---- */ .hero-card{animation:bob 6s ease-in-out infinite;} @keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}} /* ---- Boutons : effet de brillance au survol ---- */ .btn{position:relative;overflow:hidden;} .btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-20deg);transition:left .6s;} .btn:hover::after{left:130%;} /* ---- Cartes : icône qui s'anime au survol ---- */ .card{transition:.3s cubic-bezier(.2,.7,.2,1);} .card:hover{transform:translateY(-8px);} .card .ico{transition:.4s cubic-bezier(.34,1.56,.64,1);} .card:hover .ico{transform:rotate(-8deg) scale(1.12);background:var(--primary);color:#fff;} /* ---- Espaces : zoom doux + flèche qui glisse ---- */ .espace{transition:.35s cubic-bezier(.2,.7,.2,1);} .espace:hover{transform:translateY(-10px) scale(1.015);} .espace .arrow{display:inline-block;transition:transform .3s;} .espace:hover .arrow{transform:translateX(6px);} /* ---- Stats : pop au survol + ombre colorée ---- */ .stat{transition:.35s cubic-bezier(.34,1.56,.64,1);} .stat:hover{transform:translateY(-6px) scale(1.04);box-shadow:0 16px 40px rgba(11,110,158,.22);} .stat:hover .num{color:var(--accent);} .stat .num{transition:color .3s;} /* ---- Actus : image qui zoome dans son cadre ---- */ .actu{transition:.35s cubic-bezier(.2,.7,.2,1);} .actu .thumb{overflow:hidden;transition:.5s;} .actu:hover .thumb{filter:brightness(1.05) saturate(1.1);transform:scale(1.04);} .actu .read{transition:.25s;} .actu:hover .read{letter-spacing:.4px;} /* ---- Membres équipe : avatar qui réagit ---- */ .member{transition:.35s cubic-bezier(.2,.7,.2,1);} .member:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);} .member .avatar{transition:.4s cubic-bezier(.34,1.56,.64,1);} .member:hover .avatar{transform:scale(1.1) rotate(5deg);} /* ---- Logos partenaires : rebond doux ---- */ .plogo{transition:.3s cubic-bezier(.34,1.56,.64,1);} .plogo:hover{transform:translateY(-5px) scale(1.05);} /* ---- Numéro d'urgence : pulsation ---- */ .info-box.alert .big-phone{animation:pulse 2s ease-in-out infinite;display:inline-block;} @keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}} /* ---- Liens menu : déjà soulignés ; on ajoute un léger lift ---- */ .menu a{transition:color .2s,transform .2s;} .menu a:hover{transform:translateY(-2px);} /* ---- Champs de formulaire : focus animé ---- */ .field input,.field textarea,.field select{transition:border-color .25s,box-shadow .25s,transform .2s;} .field input:focus,.field textarea:focus,.field select:focus{transform:translateY(-1px);} /* ---- Media box : effet shimmer ---- */ .media-box,.map-box{position:relative;overflow:hidden;} .media-box::after,.map-box::after{content:"";position:absolute;inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%); transform:translateX(-100%);animation:shimmer 4s infinite;} @keyframes shimmer{0%{transform:translateX(-100%);}60%,100%{transform:translateX(100%);}} /* ---- Bouton retour en haut (injecté par JS) ---- */ .to-top{position:fixed;bottom:26px;right:26px;width:50px;height:50px;border-radius:50%; background:var(--primary);color:#fff;border:none;cursor:pointer;font-size:22px;z-index:150; box-shadow:var(--shadow-hover);opacity:0;pointer-events:none;transform:translateY(20px); transition:.35s cubic-bezier(.34,1.56,.64,1);display:grid;place-items:center;} .to-top.show{opacity:1;pointer-events:auto;transform:translateY(0);} .to-top:hover{background:var(--accent);transform:translateY(-4px) scale(1.08);} /* ---- Accessibilité : respecte "réduire les animations" ---- */ @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;} .reveal{opacity:1!important;transform:none!important;} } /* ========================================================================= 💳 ADHÉSION / PAIEMENT ========================================================================= */ .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;} .tier{background:#fff;border:2px solid var(--border);border-radius:var(--radius);padding:32px 26px; text-align:center;cursor:pointer;position:relative;transition:.3s cubic-bezier(.2,.7,.2,1);} .tier:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:var(--primary);} .tier.selected{border-color:var(--primary);box-shadow:0 12px 32px rgba(11,110,158,.2);background:var(--primary-light);} .tier.selected::after{content:"✓";position:absolute;top:16px;right:16px;width:28px;height:28px;border-radius:50%; background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:800;} .tier.popular{border-color:var(--accent);} .tier .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff; font-size:12px;font-weight:700;padding:4px 14px;border-radius:999px;white-space:nowrap;} .tier h3{font-size:19px;margin-bottom:6px;} .tier .price{font-size:40px;font-weight:800;color:var(--primary);margin:8px 0;} .tier .price small{font-size:15px;color:var(--muted);font-weight:600;} .tier ul{margin:18px 0 0;text-align:left;} .tier ul li{position:relative;padding-left:26px;margin-bottom:9px;color:var(--muted);font-size:14px;} .tier ul li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:800;} /* récap paiement */ .pay-summary{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px 30px; box-shadow:var(--shadow);margin-top:34px;} .pay-summary .line{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);} .pay-summary .line:last-of-type{border:none;} .pay-summary .total{font-size:22px;font-weight:800;color:var(--primary);} .pay-methods{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:18px;flex-wrap:wrap;} .pay-methods .chip{background:var(--bg-soft);border:1px solid var(--border);border-radius:8px;padding:7px 14px; font-weight:700;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px;} .secure-note{text-align:center;color:var(--muted);font-size:13px;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:6px;} @media(max-width:900px){.tiers{grid-template-columns:1fr;}} /* ========================================================================= 🔺 FORMES GÉOMÉTRIQUES DÉCORATIVES (signature des 3 sites CPTS) Injectées par script.js dans le hero, les bannières et certaines sections. ========================================================================= */ .deco-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;} .shape{position:absolute;will-change:transform;} /* triangles (bordure CSS) */ .shape.tri{width:0;height:0;border-style:solid;} .shape.tri-up{border-left:34px solid transparent;border-right:34px solid transparent;border-bottom:58px solid var(--accent);} .shape.tri-down{border-left:30px solid transparent;border-right:30px solid transparent;border-top:52px solid var(--primary);} .shape.tri-blue{border-bottom-color:rgba(47,106,168,.5);} .shape.tri-orange{border-bottom-color:rgba(236,112,108,.55);} /* cercles pleins */ .shape.circle{border-radius:50%;} /* anneaux (cercles vides) */ .shape.ring{border-radius:50%;background:transparent;border:4px solid;} /* ellipses */ .shape.ellipse{border-radius:50%;} /* sur fond foncé (hero/bannière) les formes sont blanches translucides */ .hero .shape.soft,.page-banner .shape.soft,.cta-band .shape.soft{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);} .hero .shape.tri-up.soft,.page-banner .shape.tri-up.soft{border-bottom-color:rgba(255,255,255,.12);} /* rotation lente de certaines formes */ .shape.spin{animation:spin 26s linear infinite;} @keyframes spin{from{transform:rotate(0);}to{transform:rotate(360deg);}} .shape.driftA{animation:floatY 10s ease-in-out infinite;} .shape.driftB{animation:floatY 13s ease-in-out infinite reverse;} /* sections claires recevant un léger décor */ section.has-deco{position:relative;overflow:hidden;} /* ========================================================================= 🖼️ GALERIE PHOTOS (inspirée de CPTS Cœur de l'Aisne) ========================================================================= */ .gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:160px;gap:14px;margin-top:40px;} .gallery .ph{border-radius:12px;overflow:hidden;position:relative;cursor:pointer; background:linear-gradient(135deg,var(--primary-light),var(--accent-light)); display:grid;place-items:center;color:var(--primary);font-weight:700;font-size:14px;transition:.4s;} .gallery .ph.big{grid-column:span 2;grid-row:span 2;} .gallery .ph::after{content:"🔍";position:absolute;inset:0;display:grid;place-items:center;font-size:26px; background:rgba(47,106,168,.0);opacity:0;transition:.3s;} .gallery .ph:hover{transform:scale(.98);} .gallery .ph:hover::after{background:rgba(47,106,168,.35);opacity:1;color:#fff;} @media(max-width:760px){.gallery{grid-template-columns:repeat(2,1fr);}.gallery .ph.big{grid-column:span 2;}} /* ========================================================================= 📅 AGENDA / ÉVÉNEMENTS (inspiré de CPTS Trésor) ========================================================================= */ .agenda{max-width:780px;margin:40px auto 0;} .event{display:flex;gap:20px;align-items:center;background:#fff;border:1px solid var(--border); border-radius:12px;padding:18px 22px;margin-bottom:14px;transition:.25s;} .event:hover{transform:translateX(4px);box-shadow:var(--shadow-hover);border-color:var(--primary);} .event .date-badge{flex-shrink:0;width:72px;text-align:center;background:var(--primary-light); border-radius:10px;padding:10px 0;color:var(--primary);} .event .date-badge .d{font-size:24px;font-weight:800;line-height:1;font-family:var(--font-head);} .event .date-badge .m{font-size:12px;font-weight:700;text-transform:uppercase;} .event .info h4{font-size:17px;margin-bottom:3px;} .event .info p{color:var(--muted);font-size:14px;} .event .info .meta{color:var(--accent);font-weight:700;font-size:13px;margin-top:4px;} /* captcha simple */ .captcha{display:flex;align-items:center;gap:12px;background:var(--bg-soft);border:1px solid var(--border); border-radius:10px;padding:12px 14px;margin-bottom:16px;} .captcha label{font-weight:700;font-size:15px;margin:0;white-space:nowrap;} .captcha input{max-width:90px;} /* ========================================================================= 🎛️ AMÉLIORATIONS UX ========================================================================= */ /* ---- Burger animé en croix ---- */ .burger span{transition:transform .3s,opacity .2s;} .burger.active span:nth-child(1){transform:translateY(8px) rotate(45deg);} .burger.active span:nth-child(2){opacity:0;} .burger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);} /* ---- Menu mobile : animation d'ouverture ---- */ @media(max-width:900px){ .menu.open{animation:menuDrop .3s ease;} } @keyframes menuDrop{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:none;}} /* ---- Indicateur "scroll" dans le hero ---- */ .scroll-hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3; color:rgba(255,255,255,.85);font-size:28px;animation:bounce 1.8s infinite;cursor:pointer;} @keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(8px);}} /* ---- Bandeau cookies RGPD ---- */ .cookie-banner{position:fixed;bottom:20px;left:20px;right:20px;max-width:720px;margin:0 auto;z-index:300; background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 40px rgba(47,106,168,.2); padding:20px 24px;display:flex;gap:18px;align-items:center;flex-wrap:wrap; transform:translateY(140%);transition:transform .5s cubic-bezier(.2,.7,.2,1);} .cookie-banner.show{transform:translateY(0);} .cookie-banner p{flex:1;min-width:240px;font-size:14px;color:var(--muted);margin:0;} .cookie-banner p strong{color:var(--ink);} .cookie-banner .actions{display:flex;gap:10px;} .cookie-banner .btn{padding:10px 20px;font-size:14px;} .btn-text{background:transparent;color:var(--muted);border:1px solid var(--border);} .btn-text:hover{background:var(--bg-soft);color:var(--ink);} /* ---- Notifications toast ---- */ .toast-wrap{position:fixed;bottom:24px;right:24px;z-index:350;display:flex;flex-direction:column;gap:12px;} .toast{background:#fff;border-left:5px solid var(--accent2);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.15); padding:16px 20px;min-width:280px;max-width:360px;display:flex;gap:12px;align-items:flex-start; transform:translateX(140%);opacity:0;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s;} .toast.show{transform:translateX(0);opacity:1;} .toast .t-ico{font-size:20px;} .toast .t-body strong{display:block;font-size:15px;color:var(--ink);} .toast .t-body span{font-size:13.5px;color:var(--muted);} @media(max-width:520px){.toast-wrap{left:16px;right:16px;}.toast{min-width:0;}} /* ========================================================================= 📰 ACTUALITÉS DYNAMIQUES (connexion WordPress — voir assets/wp.js) ========================================================================= */ /* La carte entière devient cliquable, sans changer son apparence. */ .actu-link{display:block;color:inherit;text-decoration:none;height:100%;} .actu-link:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:var(--radius);} /* Image à la une (si l'article en a une) : remplit joliment la vignette. */ .actu .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:.5s;} /* Vignette sans image : dégradé du site + icône, au lieu de « [ Image ] ». */ .actu .thumb{font-size:34px;} /* Message « aucune actualité ». */ .wp-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 0;font-size:16px;} /* ---- Squelette de chargement (rectangles gris animés) ---- */ .actu.skeleton{pointer-events:none;} .actu.skeleton .thumb{background:#eef2f6;} .actu.skeleton .body{padding:22px;display:flex;flex-direction:column;gap:10px;} .sk{display:block;border-radius:6px;background:#eef2f6;position:relative;overflow:hidden;} .sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%); animation:shimmer 1.4s infinite;} .sk-date{width:45%;height:12px;} .sk-title{width:85%;height:18px;margin:4px 0;} .sk-line{width:100%;height:12px;} .sk-line.short{width:60%;} /* ========================================================================= 📄 PAGE ARTICLE (article.html) ========================================================================= */ .article-wrap{max-width:760px;} .article-meta{margin-bottom:18px;} .article-meta .date{font-size:13px;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.5px;} .article-hero{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:28px;aspect-ratio:16/9;} .article-hero img{width:100%;height:100%;object-fit:cover;display:block;} .article-body{font-size:17px;} .article-body img{border-radius:var(--radius);margin:20px 0;box-shadow:var(--shadow);} .article-body h2{font-size:26px;color:var(--ink);margin:32px 0 14px;} .article-body h3{color:var(--ink);font-size:21px;margin:26px 0 12px;} .article-body a{color:var(--primary);font-weight:600;text-decoration:underline;} .article-body ul,.article-body ol{padding-left:22px;margin:0 0 16px;color:var(--muted);} .article-body li{margin-bottom:8px;} .article-body blockquote{border-left:4px solid var(--primary);background:var(--bg-soft); padding:14px 20px;margin:20px 0;border-radius:0 var(--radius) var(--radius) 0;color:var(--ink);font-style:italic;} /* ========================================================================= ✉️ CARTE CONTACT PAR EMAIL (remplace l'ancien formulaire) ========================================================================= */ .contact-cta{background:#fff;border:1px solid var(--border);border-radius:var(--radius); padding:40px 34px;box-shadow:var(--shadow);text-align:center;display:flex; flex-direction:column;align-items:center;justify-content:center;} .contact-cta .cta-ico{width:74px;height:74px;border-radius:50%;display:grid;place-items:center; font-size:32px;background:var(--primary-light);color:var(--primary);margin-bottom:20px; transition:transform .3s cubic-bezier(.2,.7,.2,1),color .2s,background .2s;} .contact-cta:hover .cta-ico{transform:translateY(-3px);background:#fdeceb;color:var(--coral);} .contact-cta h3{font-size:21px;color:var(--primary-dark);margin-bottom:12px;} .contact-cta p{color:var(--muted);font-size:15px;margin-bottom:26px;max-width:340px;} .contact-info .item span a{color:var(--primary);font-weight:700;text-decoration:none;} .contact-info .item span a:hover{text-decoration:underline;} /* ========================================================================= 🌤️ HERO CLAIR — fond clair pour que le titre soit en BLEU FONCÉ et lisible (ces règles sont en fin de fichier : elles remplacent le hero bleu foncé) ========================================================================= */ .hero{background:linear-gradient(135deg,#ffffff 0%,var(--primary-light) 100%);color:var(--ink);} .hero h1{color:var(--primary-dark);} .hero p.lead{color:var(--muted);opacity:1;} .hero::before{background:rgba(47,106,168,.06);} .hero::after{background:rgba(236,112,108,.06);} /* Carte citation : passe en carte blanche nette */ .hero-card{background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);backdrop-filter:none;} .hero-card .quote{color:var(--ink);} .hero-card .author{color:var(--muted);opacity:1;} /* Indicateur de scroll + formes décoratives : recolorés pour le fond clair */ .hero .scroll-hint{color:var(--primary);} .hero .shape.soft{background:rgba(47,106,168,.06)!important;border-color:rgba(47,106,168,.16)!important;} .hero .shape.tri-up.soft{border-bottom-color:rgba(236,112,108,.20)!important;} /* ========================================================================= ✨ PASSE DE RAFFINEMENT UI — typographie, rythme, détails « fait main » (n'affecte que l'apparence : aucun texte, bouton ni lien modifié) ========================================================================= */ /* Titres plus resserrés et affirmés (moins « police par défaut ») */ h1,h2,h3,h4{letter-spacing:-.02em;} .hero h1{letter-spacing:-.03em;line-height:1.08;} /* Un peu plus d'air entre les sections → respiration éditoriale */ section{padding:82px 0;} /* Cartes : titres plus nets, texte plus lisible */ .card h3{font-size:18.5px;color:var(--ink);} .card p{line-height:1.62;} /* Sous-titres de section : longueur de ligne maîtrisée */ .section-sub{max-width:560px;} /* Actus : titre plus soigné, lien avec transition douce */ .actu h3{letter-spacing:-.01em;color:var(--ink);line-height:1.3;} .actu .read{transition:color .2s,transform .2s;display:inline-block;} .actu:hover .read{transform:translateX(2px);} /* Annuaire : survol des lignes en teinte de marque (plus vivant) */ table.annuaire tr:hover td{background:var(--primary-light);} /* Carte citation du hero : citation plus présente */ .hero-card .quote{font-size:19px;line-height:1.55;letter-spacing:-.01em;} /* Liens de contenu : soulignement plus fin et élégant */ .prose a{text-underline-offset:3px;text-decoration-thickness:1px;} /* ========================================================================= ⚖️ PAGES LÉGALES (mentions légales, confidentialité, cookies) ========================================================================= */ .footer-bottom a{color:#b8c6d0;transition:color .2s;} .footer-bottom a:hover{color:#fff;text-decoration:underline;} .legal .maj{color:var(--muted);font-size:14px;margin-bottom:26px;} .legal h2{font-size:22px;color:var(--primary-dark);margin:36px 0 12px;letter-spacing:-.01em;} .legal h2:first-of-type{margin-top:8px;} .legal ul{list-style:disc;padding-left:22px;margin:0 0 16px;color:var(--muted);} .legal li{margin-bottom:8px;} .legal a{color:var(--primary);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;} .legal code{background:var(--primary-light);color:var(--primary-dark);padding:2px 7px;border-radius:5px;font-size:13.5px;} .legal table{width:100%;border-collapse:collapse;font-size:14.5px;margin:14px 0 22px;} .legal th,.legal td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top;color:var(--muted);} .legal th{background:var(--primary-light);color:var(--primary);font-weight:700;} .legal td:first-child{color:var(--ink);font-weight:600;} @media(max-width:640px){ .legal table,.legal tbody,.legal tr,.legal td{display:block;width:100%;} .legal thead{display:none;} .legal tr{border:1px solid var(--border);border-radius:12px;margin-bottom:12px;background:#fff;overflow:hidden;} .legal td{border-bottom:1px dashed var(--border);padding:10px 14px;} .legal td:last-child{border-bottom:0;} .legal td::before{content:attr(data-label);display:block;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--primary);margin-bottom:3px;} .legal td:first-child{color:var(--ink);font-weight:600;background:var(--primary-light);} } /* Bloc « vos préférences » de la page cookies */ .cookie-status{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);padding:24px 26px;margin:14px 0 8px;} .cookie-status p{margin-bottom:14px;} .cookie-status .cookie-hint{font-size:14px;color:var(--muted);margin:12px 0 0;} /* ========================================================================= 🎨 ICÔNES SVG (assets/icons.js) — remplacent les emojis La taille suit le font-size du conteneur (1em) → aucune règle par bloc. ========================================================================= */ [data-icon]{display:grid;place-items:center;} [data-icon] svg{width:1.05em;height:1.05em;display:block;} /* Réseaux sociaux du pied de page */ .socials a[data-icon]{font-size:17px;} /* Vignette actu sans image : icône journal discrète */ .actu .thumb[data-icon]{font-size:38px;color:rgba(47,106,168,.55);} /* ========================================================================= 🎨 CHARTE CPTS SUD OUEST AMIÉNOIS — appliquée en fin de feuille ========================================================================= */ /* Boutons rose-rouge (couleur du logo, demande du client) */ .btn-primary{background:var(--coral);color:#fff;} .btn-primary:hover{background:#d95f5b;} .btn-outline{color:var(--coral);border-color:var(--coral);background:transparent;} .btn-outline:hover{background:var(--coral);color:#fff;} /* Header : symbole du logo (image intacte) + nom en texte */ .logo{gap:12px;} .logo .logo-img{height:46px;width:auto;display:block;transition:height .3s;} .logo .logo-text{display:flex;flex-direction:column;line-height:1.05;color:var(--navy);font-weight:800;font-size:19px;letter-spacing:-.01em;} .logo .logo-text small{font-size:12px;font-weight:600;color:var(--marine);letter-spacing:0;margin-top:2px;} header.scrolled .logo .logo-img{height:40px;} /* Pied de page : bleu foncé du logo, logo complet sur carte blanche */ footer{background:var(--navy);} .footer-logo{background:#fff;border-radius:12px;padding:10px 12px;display:inline-block;margin-bottom:16px;} .footer-logo img{height:96px;width:auto;display:block;} /* Bannières intérieures : dégradé marine → bleu foncé */ .page-banner{background:linear-gradient(135deg,var(--marine) 0%,var(--navy) 100%);} /* Icônes déclinées aux 5 couleurs du logo (missions, objectifs) */ .ico.c-coral{background:#fdeceb;color:var(--coral);border-color:rgba(236,112,108,.28);} .ico.c-yellow{background:#fdf3dc;color:#c48a10;border-color:rgba(240,184,64,.4);} .ico.c-sky{background:#e9f1f9;color:var(--primary);border-color:rgba(116,168,216,.45);} .ico.c-green{background:#eef7dd;color:#5d8d10;border-color:rgba(148,200,48,.45);} .ico.c-marine{background:#e8edf4;color:var(--marine);border-color:rgba(48,76,116,.28);} /* Raisons d'adhérer : liste à coches */ .benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 28px;max-width:900px;margin:40px auto 0;} .benefit{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);} .benefit .check{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:#eef7dd;color:#5d8d10;display:grid;place-items:center;font-size:15px;font-weight:800;} .benefit p{margin:0;color:var(--ink);font-weight:600;font-size:15.5px;line-height:1.45;} @media(max-width:700px){.benefits{grid-template-columns:1fr;}} /* Infographie (image inchangée) : cadre, ombre, survol, zoom au clic */ .figure{margin:40px auto 0;max-width:980px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);cursor:zoom-in;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;} .figure:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);} .figure img{width:100%;height:auto;display:block;} .figure figcaption{text-align:center;color:var(--muted);font-size:13.5px;margin-top:12px;} .media-box.has-img{background:#fff;padding:14px;cursor:zoom-in;} .media-box.has-img img{width:100%;height:100%;object-fit:contain;display:block;} .media-box.has-img::after{display:none;} /* Visionneuse plein écran */ .lightbox{position:fixed;inset:0;background:rgba(8,40,80,.88);display:grid;place-items:center;z-index:300;padding:24px;opacity:0;pointer-events:none;transition:opacity .25s;} .lightbox.show{opacity:1;pointer-events:auto;} .lightbox img{max-width:min(1400px,96vw);max-height:92vh;background:#fff;border-radius:12px;padding:12px;box-shadow:0 30px 80px rgba(0,0,0,.45);} .lightbox .close{position:absolute;top:18px;right:22px;color:#fff;font-size:36px;background:none;border:none;cursor:pointer;line-height:1;} /* Carte Google Maps chargée au clic (RGPD) */ .map-box.map-consent{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:30px;aspect-ratio:auto;height:auto;min-height:260px;} .map-box.map-consent p{color:var(--muted);font-size:14.5px;max-width:440px;margin:0;} .map-box iframe{width:100%;height:100%;border:0;display:block;} .map-box.loaded{padding:0;background:#fff;} .map-box.loaded::after{display:none;} /* Logo complet dans la carte du hero */ .hero-logo{display:grid;place-items:center;padding:6px 0 2px;margin-bottom:14px;} .hero-logo img{max-height:230px;width:auto;} /* Bloc média contenant une vraie image : hauteur naturelle de l'image */ .media-box.has-img{aspect-ratio:auto;} /* ========================================================================= 🔷 NOS MISSIONS — infographie HTML/CSS en nid d'abeille (responsive) ========================================================================= */ .hexwheel{position:relative;display:grid;grid-template-columns:repeat(6,1fr);column-gap:8px;row-gap:0;max-width:680px;margin:48px auto 0;align-items:center;isolation:isolate;} .hexcell{position:relative;outline:none;z-index:1;transition:opacity .3s;} .hexcell.pos1{grid-area:1/2/2/4;} .hexcell.pos2{grid-area:1/4/2/6;} .hexcell.pos6{grid-area:2/1/3/3;margin:-24% 0;} .hexcell.pos3{grid-area:2/5/3/7;margin:-24% 0;} .hexcell.pos5{grid-area:3/2/4/4;} .hexcell.pos4{grid-area:3/4/4/6;} .hexcenter{grid-area:2/3/3/5;display:grid;place-items:center;text-align:center;color:var(--navy);font-family:var(--font-head);line-height:1;z-index:0;padding:8px;} .hexcenter img{height:clamp(48px,6.5vw,72px);width:auto;margin-bottom:10px;filter:drop-shadow(0 8px 14px rgba(8,40,80,.18));} .hexcenter span{display:block;font-size:clamp(11px,1.4vw,15px);font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.7;} .hexcenter strong{display:block;font-size:clamp(20px,2.8vw,30px);font-weight:900;letter-spacing:.04em;text-transform:uppercase;margin-top:4px;} /* Anneau pointillé qui tourne lentement (rappel des flèches de l'infographie) */ .hexring{position:absolute;left:50%;top:50%;width:64%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:2px dashed rgba(8,40,80,.16);z-index:0;pointer-events:none;} @keyframes ringSpin{to{transform:translate(-50%,-50%) rotate(360deg);}} /* Couleurs fidèles à l'infographie + ombre colorée */ .hexcell.red{--c:#f25c5c;--cd:#d94848;--sh:rgba(242,92,92,.40);} .hexcell.yellow{--c:#f5be1e;--cd:#dba70e;--sh:rgba(245,190,30,.40);} .hexcell.blue{--c:#5aa0e0;--cd:#3f86c8;--sh:rgba(90,160,224,.40);} .hexshadow{filter:drop-shadow(0 14px 22px var(--sh));transition:filter .35s;} /* Hexagone = coque blanche (liseré) + cœur coloré en dégradé */ .hex{position:relative;aspect-ratio:1/1.12;padding:5px;background:#fff;cursor:pointer; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); transition:transform .4s cubic-bezier(.2,.7,.2,1);} .hex-in{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:15% 13%;color:#fff; background:linear-gradient(160deg,var(--c) 0%,var(--c) 55%,var(--cd) 100%); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);overflow:hidden;} .hexcell.yellow .hex-in{color:#1f2e3d;} .hex-in::before{content:"";position:absolute;inset:0;background:linear-gradient(165deg,rgba(255,255,255,.28),rgba(255,255,255,0) 42%);pointer-events:none;} /* Reflet lumineux qui balaie l'hexagone au survol */ .hex-in::after{content:"";position:absolute;top:-60%;left:-80%;width:60%;height:220%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:rotate(20deg);opacity:0;pointer-events:none;} .hexcell:hover .hex-in::after,.hexcell:focus-within .hex-in::after{animation:hexShine .9s ease forwards;} @keyframes hexShine{0%{left:-80%;opacity:0;}20%{opacity:1;}100%{left:130%;opacity:0;}} /* Icône + numéro */ .hicon-wrap{position:relative;margin-bottom:10px;} .hex .hicon{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:23px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);} .hexcell.yellow .hex .hicon{background:rgba(255,255,255,.5);} .hex .num{position:absolute;top:-7px;right:-13px;width:28px;height:28px;border-radius:50%;background:#2b2b2b;color:#fff;font-weight:800;font-size:11.5px;display:grid;place-items:center;font-family:var(--font-head);box-shadow:0 3px 8px rgba(0,0,0,.28);} .hex .title{position:relative;font-family:var(--font-head);font-weight:800;text-transform:uppercase;font-size:clamp(9.5px,.95vw,11.5px);line-height:1.22;letter-spacing:.02em;} /* Survol : mise en avant, les autres s'estompent */ .hexcell:hover .hex,.hexcell:focus-within .hex{transform:scale(1.08);} .hexcell:hover,.hexcell:focus-within{z-index:5;} .hexcell:hover .hexshadow,.hexcell:focus-within .hexshadow{filter:drop-shadow(0 22px 30px var(--sh));} .hexwheel:has(.hexcell:hover) .hexcell:not(:hover){opacity:.72;} /* Carte des actions (survol) */ .hex-detail{position:absolute;top:calc(100% - 2px);left:50%;transform:translate(-50%,10px);width:250px;background:#fff;border-radius:14px;padding:14px 16px 12px 18px; box-shadow:0 18px 40px -12px rgba(8,40,80,.35);border-top:4px solid var(--c);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:8;text-align:left;} .hex-detail::before{content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%);border:7px solid transparent;border-bottom-color:var(--c);border-top:0;} .hexcell:hover .hex-detail,.hexcell:focus-within .hex-detail{opacity:1;transform:translate(-50%,0);} .hex-detail ul{list-style:none;margin:0;padding:0;} .hex-detail li{position:relative;padding-left:14px;font-size:13.5px;color:var(--ink);font-weight:600;line-height:1.35;margin:5px 0;} .hex-detail li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--c);} .hex-detail .more{display:block;margin-top:9px;font-size:12.5px;color:var(--muted);font-weight:600;} /* Apparition orchestrée : centre, puis les hexagones un à un, puis l'anneau */ @keyframes hexIn{from{opacity:0;transform:scale(.6) translateY(12px);}to{opacity:1;transform:none;}} @keyframes ringIn{from{opacity:0;}to{opacity:1;}} .hexwheel .hexcell,.hexwheel .hexcenter,.hexwheel .hexring{opacity:0;} .hexwheel.in .hexcell,.hexwheel.in .hexcenter{animation:hexIn .65s cubic-bezier(.2,.7,.2,1) both;} .hexwheel.in .hexring{animation:ringIn 1s 1s both,ringSpin 120s 2s linear infinite;} .hexwheel.in .hexcenter{animation-delay:.05s;} .hexwheel.in .pos1{animation-delay:.2s;} .hexwheel.in .pos2{animation-delay:.3s;} .hexwheel.in .pos3{animation-delay:.4s;} .hexwheel.in .pos4{animation-delay:.5s;} .hexwheel.in .pos5{animation-delay:.6s;} .hexwheel.in .pos6{animation-delay:.7s;} .hexwheel.reveal{transform:none;} /* Carte détaillée mise en lumière après un clic sur un hexagone */ .card.flash{box-shadow:0 0 0 3px var(--coral),var(--shadow-hover);transform:translateY(-4px);} /* Tablette / mobile : grille simple, actions toujours visibles */ @media(max-width:860px){ .hexwheel{grid-template-columns:repeat(2,1fr);column-gap:18px;row-gap:24px;max-width:560px;} .hexcell{grid-area:auto!important;margin:0!important;} .hexcenter{grid-area:auto;grid-column:1/-1;order:-1;margin-bottom:6px;} .hexring{display:none;} .hex{max-width:230px;margin:0 auto;} .hex-detail{position:static;opacity:1;transform:none;width:auto;margin:10px auto 0;max-width:230px;pointer-events:auto;} .hex-detail::before{display:none;} .hexcell:hover .hex{transform:none;} .hexwheel:has(.hexcell:hover) .hexcell:not(:hover){opacity:1;} } @media(max-width:480px){.hexwheel{grid-template-columns:1fr;}} @media(prefers-reduced-motion:reduce){.hexwheel .hexcell,.hexwheel .hexcenter,.hexwheel .hexring{opacity:1;animation:none!important;}} /* ========================================================================= 🔤 ACRONYME C·P·T·S (accueil) — typographie pure, initiales colorées ========================================================================= */ .acronym{display:flex;flex-direction:column;gap:2px;padding:6px 0;} .acro-word{position:relative;font-family:var(--font-head);font-weight:900;font-size:clamp(34px,4.6vw,58px);line-height:1.08;letter-spacing:-.035em;color:var(--navy);margin:0; transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .35s;} .acro-word b{font-weight:900;transition:transform .35s cubic-bezier(.34,1.56,.64,1);display:inline-block;transform-origin:bottom left;} .acro-word b.c-navy{color:var(--marine);} .acro-word b.c-coral{color:var(--coral);} .acro-word b.c-yellow{color:var(--yellow);} .acro-word b.c-green{color:var(--green);} .acro-de{position:absolute;left:-1.55em;top:.28em;font-family:var(--font);font-weight:600;font-size:.34em;letter-spacing:0;color:var(--muted);} .acronym:hover .acro-word{opacity:.55;} .acronym .acro-word:hover{opacity:1;transform:translateX(8px);} .acronym .acro-word:hover b{transform:scale(1.12);} @media(max-width:900px){.acronym{padding-left:1.4em;} } /* ========================================================================= 🗺️ FEUILLE DE ROUTE — projet de santé (page La CPTS) ========================================================================= */ .roadmap{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:8px 26px;box-shadow:var(--shadow);} .roadmap .step{display:flex;align-items:center;gap:18px;padding:18px 0;transition:transform .25s;} .roadmap .step+.step{border-top:1px dashed var(--border);} .roadmap .step:hover{transform:translateX(6px);} .roadmap .ico{flex-shrink:0;width:52px;height:52px;border-radius:50%;border-width:1px;border-style:solid;display:grid;place-items:center;font-size:23px;} .roadmap .step strong{display:block;font-family:var(--font-head);font-size:16.5px;color:var(--navy);line-height:1.3;} .roadmap .step span{display:block;color:var(--muted);font-size:14px;margin-top:3px;} /* ========================================================================= 🔗 STATISTIQUE CLIQUABLE (137 communes → annuaire) ========================================================================= */ a.stat-link{display:block;color:inherit;} .stat-more{display:block;margin-top:10px;font-size:13px;color:var(--coral);font-weight:700;opacity:0;transform:translateY(4px);transition:.25s;} a.stat-link:hover .stat-more,a.stat-link:focus-visible .stat-more{opacity:1;transform:none;} /* ========================================================================= 🏘️ ANNUAIRE DES COMMUNES (page Territoire) ========================================================================= */ #communes{scroll-margin-top:80px;} .alpha-nav{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:26px 0 8px;} .alpha-nav a,.alpha-nav span{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:#fff;border:1px solid var(--border);font-family:var(--font-head);font-weight:700;color:var(--navy);font-size:14px;transition:.2s;} .alpha-nav a:hover{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-2px);} .alpha-nav span{opacity:.3;} .letter-group{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px 22px 10px;margin-top:16px;box-shadow:var(--shadow);scroll-margin-top:90px;} .letter-group .letter{width:44px;height:44px;border-radius:12px;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--font-head);font-size:20px;font-weight:800;margin-bottom:12px;} .letter-group ul{columns:3;column-gap:32px;list-style:none;padding:0;margin:0;} .letter-group li{break-inside:avoid;display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px dashed var(--border);font-size:15px;} .letter-group li .name{font-weight:600;color:var(--ink);} .letter-group li .cp{color:var(--muted);font-size:13.5px;white-space:nowrap;} .letter-group li.siege .name::after{content:"Siège social";margin-left:8px;font-size:11px;font-weight:700;color:var(--coral);background:#fdeceb;padding:2px 7px;border-radius:999px;vertical-align:middle;} @media(max-width:800px){.letter-group ul{columns:2;}} @media(max-width:520px){.letter-group ul{columns:1;}} /* ========================================================================= 🤝 BANDEAU « REJOINDRE LA CPTS » (page Adhésion) ========================================================================= */ .join-band{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:52px 40px;text-align:center;box-shadow:var(--shadow);max-width:820px;margin:0 auto;position:relative;overflow:hidden;} .join-band::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--navy),var(--sky),var(--green),var(--yellow),var(--coral));} .join-ico{width:76px;height:76px;border-radius:50%;margin:0 auto 20px;display:grid;place-items:center;font-size:32px;background:#fdeceb;color:var(--coral);border:1px solid rgba(236,112,108,.28);} .join-band h2{font-size:clamp(24px,3vw,32px);color:var(--navy);letter-spacing:-.02em;margin-bottom:12px;} .join-band p{color:var(--muted);font-size:16.5px;max-width:560px;margin:0 auto 28px;} .join-band .join-free{display:inline-block;background:var(--bg-soft);color:var(--navy);border:1px solid var(--border);border-radius:14px;padding:10px 20px;font-size:15.5px;max-width:none;margin:0 auto 18px;} .join-band .join-free strong{color:var(--coral);} .join-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} .join-band .join-note{font-size:13.5px;margin:18px auto 0;} .btn-lg{padding:16px 36px;font-size:17px;} /* ========================================================================= 👥 ORGANIGRAMME DU BUREAU (page La CPTS) ========================================================================= */ .org{max-width:1080px;margin:44px auto 0;} .org-top{display:flex;justify-content:center;position:relative;padding-bottom:34px;} .org-top::after{content:"";position:absolute;left:50%;bottom:0;width:0;height:34px;border-left:2px dashed rgba(8,40,80,.28);} .org-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 18px;position:relative;padding-top:26px;} .org-cols::before{content:"";position:absolute;top:0;left:25%;right:12.5%;border-top:2px dashed rgba(8,40,80,.28);} .org-head{text-align:center;font-family:var(--font-head);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--marine);position:relative;padding-top:18px;} .org-head::before{content:"";position:absolute;top:-26px;left:50%;height:26px;border-left:2px dashed rgba(8,40,80,.28);} .org-head.span2{grid-column:span 2;} .org-head.span2::before{display:block;} .org-col{display:flex;flex-direction:column;gap:14px;} .member-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px 14px 16px;text-align:center;box-shadow:var(--shadow); transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s;--mc:var(--navy);--mc-bg:#e8edf4;} .member-card::before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:5px;border-radius:14px 14px 0 0;background:var(--mc);} .member-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);} .member-card.c-navy{--mc:var(--navy);--mc-bg:#e8edf4;} .member-card.c-green{--mc:#6fae1c;--mc-bg:#eef7dd;} .member-card.c-yellow{--mc:#d9a40c;--mc-bg:#fdf3dc;} .member-card.c-sky{--mc:#3f86c8;--mc-bg:#e9f1f9;} .org-col .member-card+.member-card::after{content:"";position:absolute;left:50%;top:-16px;height:14px;border-left:2px dashed rgba(8,40,80,.28);} .avatar-ini{width:54px;height:54px;border-radius:50%;margin:4px auto 12px;display:grid;place-items:center;background:var(--mc-bg);color:var(--mc);font-family:var(--font-head);font-weight:800;font-size:18px;border:2px solid var(--mc);} .member-card strong{display:block;font-family:var(--font-head);font-size:15px;color:var(--navy);line-height:1.25;letter-spacing:-.01em;} .member-card .role{display:block;color:var(--mc);font-weight:700;font-size:13.5px;margin-top:5px;} .member-card .pro{display:block;color:var(--muted);font-size:13px;margin-top:2px;} .org-top .member-card{min-width:250px;} @media(max-width:900px){ .org-cols{grid-template-columns:repeat(2,1fr);} .org-head.span2{grid-column:span 2;} .org-cols::before,.org-head::before,.org-top::after{display:none;} .org-top{padding-bottom:20px;} } @media(max-width:520px){ .org-cols{display:flex;flex-direction:column;gap:22px;padding-top:0;} .org-head{display:none;} .org-col::before{content:attr(data-label);display:block;text-align:center;font-family:var(--font-head);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--marine);margin-bottom:2px;} .org-col .member-card+.member-card::after{display:none;} } /* ========================================================================= 🤝 LOGOS PARTENAIRES (accueil) ========================================================================= */ .partners-logos{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px;} .plogo{width:auto;height:auto;filter:none;opacity:1;font-size:14px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px 24px;display:grid;place-items:center;min-height:120px;box-shadow:var(--shadow); transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s;font-weight:700;color:var(--muted);text-align:center;} .plogo img{max-height:70px;width:auto;max-width:100%;object-fit:contain;display:block;filter:grayscale(1);opacity:.7;transition:filter .35s,opacity .35s,transform .35s;} .plogo:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);} .plogo:hover img{filter:none;opacity:1;transform:scale(1.04);} @media(max-width:900px){.partners-logos{grid-template-columns:repeat(2,1fr);}} @media(max-width:480px){.partners-logos{grid-template-columns:1fr;}} /* ========================================================================= 🗺️ CARTE INTERACTIVE DU TERRITOIRE (page Territoire) ========================================================================= */ .carte{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);max-width:1000px;margin:40px auto 0;} .carte svg{width:100%;height:auto;display:block;overflow:visible;} .carte-outline path{fill:none;stroke:var(--navy);stroke-width:3.2;stroke-linejoin:round;} .carte .commune{fill:#e9edf2;stroke:#fff;stroke-width:1.1;stroke-linejoin:round;cursor:pointer;outline:none;transition:fill .18s;} .carte .commune:hover,.carte .commune:focus-visible,.carte .commune.hl{fill:#a9cdef;} .carte .commune.siege{fill:#fbd9d7;} .carte .commune.siege:hover,.carte .commune.siege.hl{fill:#f5b3af;} .carte-label{font-family:var(--font);font-size:12.5px;font-weight:600;fill:#2b3a48;text-anchor:middle;pointer-events:none; paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round;} .carte-label.siege{font-weight:800;fill:var(--navy);font-size:13.5px;} .carte-pin{fill:var(--coral);stroke:#fff;stroke-width:1.6;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25));pointer-events:none;} .carte-tip{position:absolute;pointer-events:none;background:var(--navy);color:#fff;padding:9px 13px;border-radius:10px;font-size:13px;line-height:1.35; opacity:0;transform:translate(-50%,calc(-100% - 14px));transition:opacity .15s;white-space:nowrap;box-shadow:0 12px 28px rgba(8,40,80,.32);z-index:5;} .carte-tip strong{display:block;font-family:var(--font-head);font-size:14.5px;margin-bottom:2px;} .carte-tip em{display:block;font-style:normal;color:#f9c9c6;font-weight:700;font-size:12px;margin-top:3px;} .carte-tip.show{opacity:1;} .carte-legend{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:14px;font-size:13.5px;color:var(--muted);} .carte-legend span{display:inline-flex;align-items:center;gap:8px;} .carte-legend .lg{width:16px;height:16px;border-radius:4px;border:1px solid #fff;box-shadow:0 0 0 1px var(--border);} .carte-legend .lg-commune{background:#dfe6ee;} .carte-legend .lg-siege{background:#fbd9d7;box-shadow:0 0 0 1px var(--coral);} .letter-group li.flash{background:#fdeceb;border-radius:8px;padding-left:8px;padding-right:8px;transition:background .3s;} @media(max-width:640px){.carte-label{display:none;} .carte{padding:8px;}} /* ========================================================================= 🧹 FINITIONS — badges, icônes de titres, accessibilité ========================================================================= */ /* Ressource pas encore disponible (remplace un lien mort) */ .soon{display:inline-block;font-size:12.5px;font-weight:700;color:var(--muted);background:var(--bg-soft);border:1px dashed var(--border);padding:4px 10px;border-radius:999px;} /* Petite icône devant un titre h3 (page Patients) */ .h-ico{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--primary-light);color:var(--primary);font-size:17px;margin-right:10px;vertical-align:middle;} .info-box.alert .h-ico{background:#fdeceb;color:var(--coral);} /* Lien d'évitement (navigation clavier) : invisible jusqu'au focus */ .skip-link{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--navy);color:#fff;padding:10px 16px;border-radius:0 0 10px 10px;font-weight:700;transition:top .2s;} .skip-link:focus{top:0;outline:3px solid var(--coral);} /* ========================================================================= ✨ HERO — emblème du logo + chiffres clés (remplace la carte citation) ========================================================================= */ .hero-visual{position:relative;display:grid;place-items:center;min-height:380px;} .hero-chips{display:contents;} .hero-halo{position:absolute;width:min(420px,90%);aspect-ratio:1;border-radius:50%; background:conic-gradient(from 0deg,rgba(236,112,108,.16),rgba(240,184,64,.16),rgba(148,200,48,.16),rgba(116,168,216,.16),rgba(48,76,116,.14),rgba(236,112,108,.16)); filter:blur(28px);animation:haloSpin 40s linear infinite;} @keyframes haloSpin{to{transform:rotate(360deg);}} .hero-emblem{position:relative;width:min(300px,68%);height:auto;filter:drop-shadow(0 22px 34px rgba(8,40,80,.22));animation:emblemFloat 7s ease-in-out infinite;} @keyframes emblemFloat{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-12px) rotate(2deg);}} /* Pastilles chiffres qui gravitent autour de l'emblème */ .hero-chip{position:absolute;display:flex;flex-direction:column;align-items:center;background:#fff;border:1px solid var(--border);border-radius:16px;padding:10px 18px; box-shadow:var(--shadow-hover);color:var(--navy);line-height:1.05;text-decoration:none;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s; animation:chipIn .7s cubic-bezier(.2,.7,.2,1) both;} .hero-chip strong{font-family:var(--font-head);font-size:24px;font-weight:900;letter-spacing:-.02em;} .hero-chip span{font-size:12.5px;font-weight:700;color:var(--muted);margin-top:3px;} .hero-chip:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 24px 50px -16px rgba(8,40,80,.35);} .chip-1{top:8%;left:0;animation-delay:.5s;border-top:3px solid var(--coral);} .chip-2{top:16%;right:0;animation-delay:.7s;border-top:3px solid var(--sky);} .chip-3{bottom:8%;left:12%;animation-delay:.9s;border-top:3px solid var(--green);} @keyframes chipIn{from{opacity:0;transform:translateY(16px) scale(.9);}to{opacity:1;transform:none;}} @media(max-width:900px){ .hero-visual{min-height:0;padding:10px 0 0;} .hero-emblem{width:180px;} .hero-chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px;} .hero-chip{position:static;animation:none;} } @media(prefers-reduced-motion:reduce){.hero-halo,.hero-emblem,.hero-chip{animation:none!important;}} /* Accueil : centre du nid d'abeille = logo seul (le titre de section est juste au-dessus) */ .hexcenter.logo-only img{height:clamp(84px,11vw,132px);margin:0;} @media(max-width:860px){.hexcenter.logo-only img{height:96px;}} .site-credit{margin-top:10px;text-align:center;font-size:12px;color:#6f8290;} .site-credit a{color:#9fb0bb;text-decoration:none;font-weight:500;} .site-credit a:hover{color:#fff;text-decoration:underline;} /* ========================================================================= ✅ RAISONS D'ADHÉRER — effet au survol ========================================================================= */ .benefit{position:relative;overflow:hidden;cursor:default;border-left:4px solid transparent; transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s;} .benefit::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(148,200,48,.10) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s ease;pointer-events:none;} .benefit:hover{transform:translateY(-4px) translateX(4px);box-shadow:var(--shadow-hover);border-left-color:var(--green);} .benefit:hover::after{transform:translateX(120%);} .benefit .check{transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .3s,color .3s;} .benefit:hover .check{transform:scale(1.18) rotate(-8deg);background:var(--green);color:#fff;} .benefit:hover p{color:var(--navy);} /* ========================================================================= 🔷 NID D'ABEILLE — infobulles positionnées par hexagone (rien n'est recouvert) ========================================================================= */ @media(min-width:861px){ /* au-dessus (utilisé pour 01/02 sur écran moyen, 03/06 aussi) */ .hex-detail.at-top{top:auto;bottom:calc(100% - 2px);transform:translate(-50%,-10px);border-top:0;border-bottom:4px solid var(--c);} .hexcell:hover .hex-detail.at-top,.hexcell:focus-within .hex-detail.at-top{transform:translate(-50%,0);} .hex-detail.at-top::before{top:auto;bottom:-11px;border:7px solid transparent;border-top-color:var(--c);border-bottom:0;} /* à droite */ .hex-detail.at-right{top:50%;left:calc(100% - 6px);bottom:auto;transform:translate(10px,-50%);border-top:0;border-left:4px solid var(--c);} .hexcell:hover .hex-detail.at-right,.hexcell:focus-within .hex-detail.at-right{transform:translate(0,-50%);} .hex-detail.at-right::before{top:50%;left:-11px;bottom:auto;transform:translateY(-50%);border:7px solid transparent;border-right-color:var(--c);border-left:0;} /* à gauche */ .hex-detail.at-left{top:50%;left:auto;right:calc(100% - 6px);bottom:auto;transform:translate(-10px,-50%);border-top:0;border-right:4px solid var(--c);} .hexcell:hover .hex-detail.at-left,.hexcell:focus-within .hex-detail.at-left{transform:translate(0,-50%);} .hex-detail.at-left::before{top:50%;left:auto;right:-11px;bottom:auto;transform:translateY(-50%);border:7px solid transparent;border-left-color:var(--c);border-right:0;} } @media(max-width:860px){.hex-detail.at-top,.hex-detail.at-right,.hex-detail.at-left{top:auto;left:auto;right:auto;bottom:auto;border:0;border-top:4px solid var(--c);}} /* Écran moyen (861-1099px) : infobulles plus étroites et rentrées sur l'hexagone pour rester dans l'écran */ @media(min-width:861px) and (max-width:1099px){ .hex-detail{width:190px;padding:12px 12px 10px 14px;} .hex-detail li{font-size:12.5px;} .hexcell.pos3 .hex-detail.at-right{left:calc(100% - 64px);} .hexcell.pos6 .hex-detail.at-left{right:calc(100% - 64px);} } /* ========================================================================= 🗺️ CARTE — intégrée au fond de page (plus de cadre blanc) ========================================================================= */ .carte{background:transparent;border:0;box-shadow:none;padding:0;} .carte .commune{fill:#dfe6ee;stroke:#fff;stroke-width:1.2;} .carte .commune.siege{fill:#f9cfcc;} .carte-label{stroke:var(--bg-soft);stroke-width:3.5px;} .carte-outline path{stroke-width:3.6;} /* ========================================================================= 🩺 RETOURS ÉLISE (21/09) — menu 9 onglets, formes santé, projet de santé, bulletin d'adhésion intégré ========================================================================= */ /* Menu à 9 entrées : on resserre un peu avant le passage en burger */ @media(max-width:1240px){.menu{gap:16px;} .menu a{font-size:14px;}} @media(max-width:1080px){.menu{gap:12px;} .menu a{font-size:13.5px;} .logo .logo-text{font-size:17px;}} /* Formes décoratives « santé » : pas de fond ni de bordure, juste le dessin, très discret */ .shape.health{background:none!important;border:0!important;border-radius:0;display:block;} .shape.health svg{width:100%;height:100%;display:block;} /* Projet de santé : deux groupes de missions */ .roadmap .group{display:flex;align-items:center;gap:10px;padding:16px 0 4px;font-family:var(--font-head);font-weight:800;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--marine);} .roadmap .group::after{content:"";flex:1;border-top:1px dashed var(--border);} .roadmap .group .tag{font-size:11px;font-weight:700;letter-spacing:0;text-transform:none;background:#e8edf4;color:var(--marine);padding:3px 9px;border-radius:999px;} .roadmap .group.opt .tag{background:#fdf3dc;color:#a8790a;} .roadmap .step+.step{border-top:0;} .roadmap .step{padding:12px 0;} .btn-doc{display:inline-flex;align-items:center;gap:10px;} .btn-doc small{font-weight:600;opacity:.8;} /* Bulletin d'adhésion (Google Form) intégré au clic, comme la carte */ .form-embed{max-width:820px;margin:36px auto 0;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;} .form-embed.consent{padding:36px 30px;text-align:center;} .form-embed.consent p{color:var(--muted);max-width:520px;margin:12px auto 22px;font-size:15px;} .form-embed iframe{width:100%;height:1500px;border:0;display:block;} @media(max-width:640px){.form-embed iframe{height:1700px;}} /* Badge « mission obligatoire / optionnelle » sur les cartes de la page Missions */ .mtag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--marine);background:#e8edf4;padding:3px 9px;border-radius:999px;margin-bottom:10px;} .mtag.opt{color:#a8790a;background:#fdf3dc;} /* ========================================================================= 📋 PROJET DE SANTÉ — sommaire institutionnel (page La CPTS) ========================================================================= */ .pds{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;} .pds-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:16px 26px 12px;background:var(--navy);color:#fff;} .pds-head span{font-family:var(--font-head);font-weight:800;font-size:15px;letter-spacing:.02em;} .pds-head em{font-style:normal;font-size:12.5px;opacity:.75;} .pds-head.opt{background:var(--marine);border-top:1px solid rgba(255,255,255,.12);} .pds-list{list-style:none;margin:0;padding:6px 0;} .pds-list li{display:flex;align-items:flex-start;gap:18px;padding:14px 26px;border-top:1px solid var(--border);transition:background .2s;} .pds-list li:first-child{border-top:0;} .pds-list li:hover{background:var(--bg-soft);} .pds-list .n{flex-shrink:0;font-family:var(--font-head);font-weight:900;font-size:22px;line-height:1;color:var(--coral);letter-spacing:-.02em;padding-top:2px;min-width:38px;} .pds-list strong{display:block;font-family:var(--font-head);font-weight:700;font-size:15.5px;color:var(--navy);line-height:1.3;} .pds-list div>span{display:block;color:var(--muted);font-size:13.5px;margin-top:3px;} .pds-list li:hover .n{color:var(--navy);}