/* ========================================================= PAGE D’ACCUEIL ANIIMO FRANCE ========================================================= */ #aif-home{ –ink:#0b2a42; –muted:#71899a; width:100vw; max-width:none; margin-left:calc(50% – 50vw); margin-right:calc(50% – 50vw); padding:28px 14px 0; font-family:Arial,Helvetica,sans-serif; color:var(–ink); line-height:1.4; min-height:100vh; /* IMAGE DE FOND SANS VOILE BLANC */ background-image: url(« https://cdn.aniimoverse.com/v1/page-heroes/map.webp »); background-position:center top; background-size:cover; background-repeat:no-repeat; background-attachment:fixed; } #aif-home *{ box-sizing:border-box; } #aif-home a{ text-decoration:none; } /* ========================================================= LARGEUR DU CONTENU ========================================================= */ #aif-home > .hero, #aif-home > .section, #aif-home > .footer-island{ width:calc(100% – 24px); max-width:1180px; margin-left:auto; margin-right:auto; } /* ========================================================= HAUT DE PAGE ========================================================= */ #aif-home .hero{ padding:28px 26px; border:1px solid #cbe3f1; border-radius:23px; background:rgba(255,255,255,.90); box-shadow: 0 10px 28px rgba(48,94,124,.13); text-align:center; } #aif-home .hero h1{ margin:0 0 8px; font-size:clamp(2rem,4vw,3.4rem); line-height:1.05; color:#0b2a42; } #aif-home .hero p{ max-width:850px; margin:0 auto; color:#536f81; font-size:1rem; } /* ========================================================= SECTIONS ========================================================= */ #aif-home .section{ margin-top:30px; padding:17px 15px 20px; border-radius:20px; background:rgba(255,255,255,.80); box-shadow: 0 8px 24px rgba(44,85,112,.10); } #aif-home .section h2{ margin:0 0 5px; font-size:1.75rem; color:#0b2a42; } #aif-home .section .intro{ margin:0 0 14px; color:var(–muted); } /* ========================================================= GRILLE DES BOUTONS ========================================================= */ #aif-home .button-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,280px)); justify-content:center; gap:12px; } /* ========================================================= BOUTONS PRINCIPAUX ========================================================= */ #aif-home .home-btn{ –accent:#1968d7; –edge:#4a98ed; –fade:#eaf3ff; position:relative; width:100%; height:92px; display:grid; grid-template-columns: 62px minmax(0,1fr) 18px; align-items:center; gap:9px; padding: 6px 11px 6px 3px; overflow:hidden; border:2px solid var(–edge); border-radius:18px; background: linear-gradient( 180deg, #ffffff, var(–fade) ); box-shadow: 0 5px 12px rgba(43,82,107,.14); color:var(–accent); transition: transform .16s ease, box-shadow .16s ease; } #aif-home .home-btn:hover{ transform:translateY(-2px); box-shadow: 0 9px 17px rgba(43,82,107,.20); } /* IMAGE ANIIMO */ #aif-home .home-btn img{ width:62px; height:68px; object-fit:contain; align-self:center; filter: drop-shadow( 0 5px 5px rgba(43,82,107,.14) ); } /* TITRE DU BOUTON */ #aif-home .home-btn .label{ display:flex; align-items:center; justify-content:center; text-align:center; min-width:0; height:100%; padding:0 3px; font-family: « Arial Narrow », « Segoe UI Condensed », Arial, sans-serif; font-size:1.08rem; line-height:1; font-weight:700; letter-spacing:-.035em; word-break:normal; overflow-wrap:normal; hyphens:none; } /* TITRES PLUS LONGS */ #aif-home .home-btn .compact-title{ font-size:1rem; line-height:.98; } /* FLECHE */ #aif-home .home-btn .arrow{ font-size:2.2rem; line-height:1; font-weight:900; text-align:center; color:var(–accent); } /* ========================================================= COULEURS ========================================================= */ #aif-home .blue{ –accent:#1968d7; –edge:#4a98ed; –fade:#eaf3ff; } #aif-home .cyan{ –accent:#0b8eaa; –edge:#3dbed2; –fade:#e9fbff; } #aif-home .green{ –accent:#25843c; –edge:#58b96b; –fade:#eefaf0; } #aif-home .red{ –accent:#d73a41; –edge:#ef7479; –fade:#fff0f0; } #aif-home .violet{ –accent:#6632d1; –edge:#9169ea; –fade:#f4efff; } #aif-home .sky{ –accent:#1762ba; –edge:#55afe4; –fade:#eaf7ff; } #aif-home .gold{ –accent:#95620e; –edge:#ddb64c; –fade:#fff7df; } #aif-home .orange{ –accent:#c65c13; –edge:#eb9348; –fade:#fff1e3; } #aif-home .pink{ –accent:#ae167f; –edge:#e162bd; –fade:#fff0fa; } /* ========================================================= PETITS BOUTONS GUIDES ========================================================= */ #aif-home .guide-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,235px)); justify-content:center; gap:9px; } #aif-home .guide-btn{ height:66px; display:grid; grid-template-columns: 52px minmax(0,1fr) 18px; align-items:center; gap:7px; padding: 5px 9px 5px 4px; border: 1px solid #cee1ed; border-radius:14px; background: rgba(255,255,255,.94); box-shadow: 0 4px 10px rgba(45,83,107,.08); color:#14364e; transition:.16s; } #aif-home .guide-btn:hover{ transform:translateY(-2px); border-color:#5dbce5; background:#f3fbff; } #aif-home .guide-btn img{ width:52px; height:52px; object-fit:contain; } #aif-home .guide-btn span{ display:flex; align-items:center; justify-content:center; text-align:center; font-family: « Arial Narrow », « Segoe UI Condensed », Arial, sans-serif; font-size:.9rem; font-weight:700; line-height:1; letter-spacing:-.03em; } #aif-home .guide-btn b{ font-size:1.55rem; color:#2189bb; } /* ========================================================= TU CHERCHES SURTOUT ========================================================= */ #aif-home .search-links{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,260px)); justify-content:center; gap:8px; } #aif-home .search-links a{ padding:10px 12px; border: 1px solid #d5e5ef; border-radius:12px; background: rgba(255,255,255,.94); color:#17394f; font-size:.84rem; font-weight:700; transition:.15s; } #aif-home .search-links a:hover{ transform:translateY(-2px); border-color:#55b5df; } /* ========================================================= PIED DE PAGE ILOT ========================================================= */ #aif-home .footer-island{ position:relative; height:210px; margin-top:38px; overflow:hidden; } /* ILOT HERBE + SABLE */ #aif-home .footer-island:before{ content: » »; position:absolute; left:50%; bottom:30px; transform:translateX(-50%); width:min(820px,92%); height:88px; border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%; background: linear-gradient( 180deg, #78d75d 0 18%, #4da542 19% 34%, #e3c27d 35% 70%, #b98a50 71% 100% ); box-shadow: 0 15px 25px rgba(66,82,63,.23), inset 0 8px 0 rgba(255,255,255,.20); z-index:1; } /* BORDURE D’HERBE */ #aif-home .footer-island:after{ content: » »; position:absolute; left:50%; bottom:84px; transform:translateX(-50%); width:min(740px,83%); height:23px; border-radius:50%; background: linear-gradient( 180deg, #91e56e, #58b548 ); box-shadow: inset 0 -3px 0 rgba(255,255,255,.30); z-index:2; } /* ANIIMO DU FOOTER */ #aif-home .footer-aniimo{ position:absolute; left:50%; bottom:72px; transform:translateX(-50%); width:min(610px,78%); display:flex; align-items:flex-end; justify-content:space-around; gap:10px; z-index:4; pointer-events:none; } #aif-home .footer-aniimo img{ display:block; width:104px; height:104px; object-fit:contain; filter: drop-shadow( 0 9px 7px rgba(36,59,67,.25) ); } #aif-home .footer-aniimo img:nth-child(2){ width:92px; height:92px; } #aif-home .footer-aniimo img:nth-child(3){ width:90px; height:90px; } #aif-home .footer-aniimo img:nth-child(4){ width:96px; height:96px; } /* TEXTE FOOTER */ #aif-home .footer-caption{ position:absolute; left:50%; bottom:3px; transform:translateX(-50%); z-index:5; color:#496676; font-size:.76rem; font-weight:700; white-space:nowrap; background: rgba(255,255,255,.75); padding:4px 11px; border-radius:999px; } /* ========================================================= MOBILE ========================================================= */ @media(max-width:600px){ #aif-home{ padding-left:7px; padding-right:7px; background-attachment:scroll; } #aif-home .button-grid{ grid-template-columns:1fr; } #aif-home .home-btn{ max-width:360px; margin:0 auto; } #aif-home .guide-grid{ grid-template-columns: 1fr 1fr; } #aif-home .footer-island{ height:165px; } #aif-home .footer-aniimo{ width:92%; bottom:66px; } #aif-home .footer-aniimo img{ width:76px; height:76px; } #aif-home .footer-aniimo img:nth-child(2), #aif-home .footer-aniimo img:nth-child(3), #aif-home .footer-aniimo img:nth-child(4){ width:70px; height:70px; } } @media(max-width:410px){ #aif-home .guide-grid{ grid-template-columns:1fr; } }