/* ============================================================ VITRINE PUBLIQUE DYIMMO — feuille de style dédiée Indépendante de assets/style.css (la gestion n'est pas touchée). Univers du logo : LINE-ART (maison au trait) + motif CHEVRON, charte bleue « Office », dégradés animés, scène jour/nuit vivante. Mobile-first (320px -> desktop). Zéro dépendance externe. prefers-reduced-motion respecté (bloc en fin de fichier). ============================================================ */ :root{ --bleu:#2B579A; --bleu-fonce:#1F407A; --bleu-vif:#3A6BC4; --bleu-nuit:#132a52; --bleu-clair:#EFF4FB; --bleu-pale:#F5F9FF; --bleu-bord:#CFDEF3; --or:#E4B34A; --or-fonce:#C6952A; --encre:#1B2733; --gris:#54606F; --gris-clair:#8794A5; --blanc:#ffffff; --bord:#E3EAF3; --rayon:20px; --rayon-s:13px; --ombre:0 12px 34px rgba(19,42,82,.12); --ombre-fort:0 26px 60px rgba(19,42,82,.22); --cycle:30s; /* durée du cycle jour <-> nuit */ --max:1160px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body.vit{ margin:0; color:var(--encre); background:var(--bleu-pale); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:var(--bleu);text-decoration:none} .wrap{max-width:var(--max);margin:0 auto;padding:0 22px} .svg-ico{width:100%;height:100%;display:block} /* Motif chevron décoratif (rappel du logo) */ .chevrons{display:inline-block;color:var(--bleu-vif);opacity:.9} .chevrons svg{display:block;height:14px;width:auto} .sec-eyebrow .chevrons{vertical-align:middle;margin-right:8px;color:currentColor;opacity:.8} /* ---------- Apparition au défilement (activée seulement si JS) ---------- html.js est posé AVANT le rendu (script dans ) : pas de clignotement. */ html.js :is(.sec-tete,.av,.etape,.serv,.pq,.comp-col,.atout,.qs-carte,.punch,.form-carte,.contact-info,.def-logo,.def-txt,.rassure .r,.bien-carte){ opacity:0;transform:translateY(36px); transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1); } html.js :is(.sec-tete,.av,.etape,.serv,.pq,.comp-col,.atout,.qs-carte,.punch,.form-carte,.contact-info,.def-logo,.def-txt,.rassure .r,.bien-carte).vu{opacity:1;transform:none} /* petits décalages en cascade pour les grilles */ html.js .grille-av .av:nth-child(2),html.js .grille-cartes>*:nth-child(2),html.js .grille-etapes .etape:nth-child(2),html.js .grille-pq .pq:nth-child(2){transition-delay:.08s} html.js .grille-av .av:nth-child(3),html.js .grille-cartes>*:nth-child(3),html.js .grille-etapes .etape:nth-child(3),html.js .grille-pq .pq:nth-child(3){transition-delay:.16s} html.js .grille-av .av:nth-child(4),html.js .grille-etapes .etape:nth-child(4){transition-delay:.24s} /* ---------- Barre supérieure + menu ---------- */ .vit-top{ position:sticky;top:0;z-index:60; background:rgba(255,255,255,.9);backdrop-filter:saturate(1.5) blur(12px); border-bottom:1px solid var(--bord); } .vit-top .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;height:64px} .vit-marque{display:flex;align-items:center;gap:12px;flex:0 0 auto} .vit-marque img{height:44px;width:auto} /* Liens de navigation */ .vit-nav{display:flex;align-items:center;gap:20px} .vit-nav>a{color:var(--encre);font-weight:600;font-size:14.5px;transition:color .15s;white-space:nowrap} .vit-nav>a:hover,.vit-nav>a.actif{color:var(--bleu)} .vit-nav-tel{display:flex;align-items:center;gap:6px;color:var(--bleu-fonce);font-weight:800} .vit-nav-tel svg{width:18px;height:18px} .vit-nav-cta{display:inline-flex!important;align-items:center;gap:7px;background:linear-gradient(135deg,#f0c765,var(--or) 50%,var(--or-fonce)); color:#3a2a05!important;font-weight:800!important;padding:9px 16px;border-radius:999px;box-shadow:0 8px 20px rgba(198,149,42,.32)} .vit-nav-cta svg{width:17px;height:17px} .vit-nav-cta:hover{transform:translateY(-1px)} .vit-nav-gestion{color:var(--gris)!important;border:1.5px solid var(--bord);padding:8px 14px;border-radius:999px;font-size:13px!important;font-weight:600!important} .vit-nav-gestion:hover{color:var(--bleu)!important;border-color:var(--bleu-bord)} /* Bouton hamburger (mobile) */ .vit-burger{display:none;align-items:center;justify-content:center;width:46px;height:46px; border:1.5px solid var(--bord);border-radius:12px;background:#fff;color:var(--bleu-fonce);cursor:pointer} .vit-burger svg{width:24px;height:24px} .vit-burger .i-close{display:none} .vit-burger[aria-expanded="true"] .i-open{display:none} .vit-burger[aria-expanded="true"] .i-close{display:inline-flex} @media(max-width:920px){ .vit-burger{display:inline-flex} .vit-nav{ position:absolute;top:calc(100% + 1px);left:0;right:0;flex-direction:column;align-items:stretch;gap:2px; background:#fff;border-bottom:1px solid var(--bord);box-shadow:var(--ombre);padding:10px 16px 16px; transform:translateY(-10px);opacity:0;visibility:hidden;transition:transform .2s ease,opacity .2s ease,visibility .2s; } .vit-nav.ouvert{transform:none;opacity:1;visibility:visible} .vit-nav>a{padding:13px 6px;font-size:16px;min-height:46px;display:flex;align-items:center;border-bottom:1px solid var(--bleu-clair)} .vit-nav-tel{border-bottom:1px solid var(--bleu-clair)} .vit-nav-cta{justify-content:center;margin-top:10px;padding:14px} .vit-nav-gestion{justify-content:center;text-align:center;margin-top:6px;border:none;color:var(--gris)!important} } @media(max-width:400px){ .vit-marque img{height:40px} } /* Compensation de la hauteur de barre pour les ancres */ :target{scroll-margin-top:78px} section[id],div[id]{scroll-margin-top:78px} /* ---------- Boutons ---------- */ .btn-cta{ display:inline-flex;align-items:center;gap:11px;justify-content:center; background:linear-gradient(135deg,#f0c765,var(--or) 45%,var(--or-fonce)); color:#3a2a05;font-weight:900;font-size:16.5px; padding:15px 26px;border-radius:999px;border:0;cursor:pointer; box-shadow:0 14px 32px rgba(198,149,42,.42);transition:transform .18s,box-shadow .18s; } .btn-cta:hover{transform:translateY(-3px);box-shadow:0 20px 42px rgba(198,149,42,.55)} .btn-cta svg{width:23px;height:23px} .btn-ghost{ display:inline-flex;align-items:center;gap:10px;justify-content:center; background:rgba(255,255,255,.12);color:#fff;font-weight:800;font-size:15.5px; padding:14px 24px;border-radius:999px;border:1.5px solid rgba(255,255,255,.55); cursor:pointer;transition:.18s; } .btn-ghost:hover{background:rgba(255,255,255,.24);transform:translateY(-2px)} .btn-ghost svg{width:21px;height:21px} /* ---------- Héros : dégradé bleu ANIMÉ ---------- */ .hero{ position:relative;overflow:hidden;color:#fff; background:linear-gradient(125deg,#0e2246 0%,#1F407A 28%,#2B579A 52%,#16335f 76%,#0e2246 100%); background-size:320% 320%; animation:heroGrad var(--cycle) ease-in-out infinite; } @keyframes heroGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} .hero:before{ /* halo lumineux qui respire */ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(1100px 520px at 78% -8%,rgba(96,156,240,.5),transparent 62%); animation:heroHalo 13s ease-in-out infinite; } @keyframes heroHalo{0%,100%{opacity:.5}50%{opacity:1}} .hero .wrap{position:relative;z-index:2;padding:64px 22px 72px} .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center} .hero-logo-pill{ display:inline-flex;align-items:center;background:#fff;border-radius:18px; padding:12px 20px;margin-bottom:22px;box-shadow:0 16px 38px rgba(6,17,40,.45); } .hero-logo-pill img{height:62px;width:auto;display:block} .hero-badge{ display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);color:#e6eefc;font-weight:700;font-size:13px; padding:7px 15px;border-radius:999px;margin-bottom:20px; } .hero-badge svg{width:18px;height:18px} .hero h1{font-size:41px;line-height:1.1;margin:0 0 20px;font-weight:900;letter-spacing:-.8px} .hero h1 .surlign{color:var(--or)} .hero .sous{font-size:18px;line-height:1.5;color:#dce7f8;margin:0 0 30px;max-width:33em} .hero-actions{display:flex;flex-wrap:wrap;gap:16px} .hero-sousbtn{margin-top:18px;font-size:14px;color:#bccee8} .hero-illu{position:relative} .hero-illu .scene{width:100%;height:auto;display:block;border-radius:22px; box-shadow:0 30px 60px rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.14)} .hero-vague{display:block;width:100%;height:auto;margin-bottom:-6px;position:relative;z-index:2} @media(max-width:860px){ .hero .wrap{padding:44px 20px 54px} .hero-grid{grid-template-columns:1fr;gap:28px;text-align:center} .hero-logo-pill{margin-left:auto;margin-right:auto} .hero h1{font-size:30px} .hero .sous{font-size:17px;margin-left:auto;margin-right:auto} .hero-actions{justify-content:center} .hero-illu{max-width:460px;margin:4px auto 0} } @media(max-width:400px){ .hero h1{font-size:26px} .hero .sous{font-size:16px} } /* ---------- Scène animée jour <-> nuit ---------- */ .scene .sky-day{opacity:1} .scene .sky-dusk,.scene .sky-night,.scene .stars,.scene .win-lit{opacity:0} .scene .moon{opacity:0} .scene .sky-day{animation:skyDay var(--cycle) ease-in-out infinite} .scene .sky-dusk{animation:skyDusk var(--cycle) ease-in-out infinite} .scene .sky-night{animation:skyNight var(--cycle) ease-in-out infinite} .scene .stars{animation:skyNight var(--cycle) ease-in-out infinite} .scene .win-lit{animation:winLit var(--cycle) ease-in-out infinite} .scene .sun{animation:sunArc var(--cycle) ease-in-out infinite} .scene .moon{animation:moonArc var(--cycle) ease-in-out infinite} .scene .car{animation:carRun 8s linear infinite} .scene .cloud-a{animation:cloud 26s linear infinite} .scene .cloud-b{animation:cloud 40s linear infinite} .scene .twinkle{animation:twinkle 3s ease-in-out infinite} @keyframes skyDay{0%{opacity:1}35%{opacity:1}45%{opacity:0}88%{opacity:0}96%{opacity:1}100%{opacity:1}} @keyframes skyDusk{0%{opacity:0}34%{opacity:0}42%{opacity:.95}50%{opacity:0}84%{opacity:0}90%{opacity:.95}96%{opacity:0}100%{opacity:0}} @keyframes skyNight{0%{opacity:0}46%{opacity:0}53%{opacity:1}82%{opacity:1}89%{opacity:0}100%{opacity:0}} @keyframes winLit{0%{opacity:0}48%{opacity:0}56%{opacity:1}82%{opacity:1}88%{opacity:0}100%{opacity:0}} @keyframes sunArc{ 0%{transform:translate(50px,250px);opacity:0} 6%{opacity:1} 25%{transform:translate(240px,58px)} 44%{transform:translate(430px,250px);opacity:1} 49%{opacity:0} 100%{transform:translate(50px,250px);opacity:0} } @keyframes moonArc{ 0%,48%{opacity:0} 53%{transform:translate(70px,240px);opacity:1} 67%{transform:translate(240px,66px)} 84%{transform:translate(410px,240px);opacity:1} 90%{opacity:0} 100%{opacity:0} } @keyframes carRun{0%{transform:translateX(-90px)}100%{transform:translateX(540px)}} @keyframes cloud{0%{transform:translateX(-70px)}100%{transform:translateX(520px)}} @keyframes twinkle{0%,100%{opacity:.35}50%{opacity:1}} /* ---------- Bandeau réassurance ---------- */ .rassure{background:#fff;border-bottom:1px solid var(--bord)} .rassure .wrap{display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:center;padding:20px 22px} .rassure .r{display:flex;align-items:center;gap:10px;font-weight:800;font-size:14.5px;color:var(--bleu-fonce)} .rassure .r svg{width:22px;height:22px;flex:0 0 auto;color:var(--bleu)} /* ---------- Sections génériques ---------- */ section{padding:72px 0;position:relative} .sec-tete{text-align:center;max-width:42em;margin:0 auto 46px} .sec-eyebrow{display:inline-flex;align-items:center;color:var(--bleu);font-weight:900;font-size:13px;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:13px} /* Motif CHEVRON (rappel du logo) devant chaque intertitre, en currentColor */ .sec-eyebrow::before, .atout .eyebrow::before{ content:"";display:inline-block;width:38px;height:12px;margin-right:11px;vertical-align:middle; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='12'%3E%3Cpath d='M2 10L7 3l5 7 5-7 5 7 5-7 5 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='12'%3E%3Cpath d='M2 10L7 3l5 7 5-7 5 7 5-7 5 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; } .sec-tete h2{font-size:29px;line-height:1.15;margin:0 0 14px;font-weight:900;letter-spacing:-.5px;color:var(--bleu-nuit)} .sec-tete p{font-size:17px;color:var(--gris);margin:0} @media(max-width:640px){ section{padding:52px 0} .sec-tete h2{font-size:24px} .sec-tete p{font-size:16px} } /* ---------- Les 4 avantages ---------- */ .avantages{background:linear-gradient(180deg,var(--bleu-pale),#fff)} .grille-av{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .av{ background:#fff;border:1px solid var(--bord);border-radius:var(--rayon); padding:30px 26px;box-shadow:var(--ombre);position:relative;overflow:hidden; transition:transform .2s,box-shadow .2s; } .av:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--bleu-vif),var(--bleu-fonce));opacity:0;transition:opacity .2s} .av:hover{transform:translateY(-6px);box-shadow:var(--ombre-fort)} .av:hover:before{opacity:1} .av-ico{ width:64px;height:64px;border-radius:17px;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--bleu-clair),#fff);border:1.5px solid var(--bleu-bord); color:var(--bleu);margin-bottom:18px; } .av-ico svg{width:34px;height:34px} .av h3{margin:0 0 9px;font-size:18.5px;color:var(--bleu-nuit);font-weight:800;line-height:1.22} .av p{margin:0;font-size:15.5px;color:var(--gris)} .av .pct{font-size:15px;font-weight:900;color:var(--or-fonce)} @media(max-width:960px){ .grille-av{grid-template-columns:repeat(2,1fr)} } @media(max-width:520px){ .grille-av{grid-template-columns:1fr} } /* ---------- Section comparative ---------- */ .comparatif{background:linear-gradient(180deg,#fff,var(--bleu-clair))} .punch{font-size:23px;line-height:1.3;font-weight:900;color:var(--bleu-nuit);text-align:center;max-width:21em;margin:0 auto 38px;letter-spacing:-.4px} .punch .bleu{color:var(--bleu-vif)} .comp-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:920px;margin:0 auto} .comp-col{border-radius:var(--rayon);padding:32px 28px} .comp-autres{background:#fff;border:1px solid var(--bord)} .comp-nous{background:linear-gradient(160deg,var(--bleu-vif),var(--bleu-fonce));color:#fff;box-shadow:var(--ombre-fort)} .comp-col h3{margin:0 0 18px;font-size:18px;font-weight:900;display:flex;align-items:center;gap:10px} .comp-autres h3{color:var(--gris)} .comp-col ul{list-style:none;margin:0;padding:0;display:grid;gap:15px} .comp-col li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px} .comp-col li svg{width:22px;height:22px;flex:0 0 auto;margin-top:1px} .comp-autres li svg{color:#c86b64} .comp-nous li svg{color:#a7ecc0} .comp-nous li{color:#eef5ff} @media(max-width:720px){ .comp-grid{grid-template-columns:1fr} .punch{font-size:19px} } /* ---------- Atouts (grandes cartes illustrées) ---------- */ .atouts{background:#fff} .atout{ display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch; border:1px solid var(--bord);border-radius:var(--rayon);overflow:hidden; box-shadow:var(--ombre);margin-bottom:26px; } .atout:last-child{margin-bottom:0} .atout-txt{padding:46px 46px;display:flex;flex-direction:column;justify-content:center} .atout-illu{background:linear-gradient(160deg,var(--bleu-clair),var(--bleu-pale));display:flex;align-items:center;justify-content:center;padding:26px;min-height:300px} .atout-illu svg{width:100%;max-width:360px;height:auto} .atout.inverse .atout-txt{order:2} .atout.inverse .atout-illu{order:1} .atout .eyebrow{color:var(--bleu);font-weight:900;font-size:14px;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center} .atout h3{margin:0 0 12px;font-size:24px;line-height:1.18;font-weight:900;color:var(--bleu-nuit);letter-spacing:-.5px} .atout p{margin:0 0 16px;font-size:16px;color:var(--gris)} .atout .liste-check{list-style:none;margin:0;padding:0;display:grid;gap:12px} .atout .liste-check li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:var(--encre)} .atout .liste-check svg{width:21px;height:21px;color:var(--bleu);flex:0 0 auto;margin-top:2px} @media(max-width:760px){ .atout,.atout.inverse{grid-template-columns:1fr} .atout.inverse .atout-txt{order:2}.atout.inverse .atout-illu{order:1} .atout-txt{padding:32px 26px}.atout h3{font-size:21px} .atout-illu{min-height:230px} } /* Grille de cartes garanties (3 colonnes) */ .grille-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px} @media(max-width:860px){ .grille-cartes{grid-template-columns:1fr} } /* ---------- Qui sommes-nous ---------- */ .quisommes{background:linear-gradient(180deg,var(--bleu-clair),#fff)} .qs-carte{ background:#fff;border:1px solid var(--bord);border-radius:var(--rayon); box-shadow:var(--ombre);max-width:960px;margin:0 auto;padding:52px 54px;position:relative;overflow:hidden; } .qs-carte:before{content:"";position:absolute;top:0;left:0;width:7px;height:100%;background:linear-gradient(180deg,var(--bleu-vif),var(--bleu-fonce))} .qs-carte .sec-eyebrow{color:var(--bleu)} .qs-carte h2{font-size:27px;line-height:1.18;margin:0 0 18px;font-weight:900;color:var(--bleu-nuit);letter-spacing:-.5px} .qs-carte p{font-size:16.5px;color:#3c4855;margin:0 0 16px} .qs-carte p:last-child{margin-bottom:0} .qs-carte strong{color:var(--bleu-fonce)} .qs-signature{margin-top:24px;padding-top:20px;border-top:1px solid var(--bord);font-weight:900;color:var(--bleu-nuit);font-size:16px} @media(max-width:640px){ .qs-carte{padding:30px 24px} .qs-carte h2{font-size:23px} .qs-carte p{font-size:15.5px} } /* ---------- Bande Abidjan (photo skyline) ---------- */ .bande-abidjan{ position:relative;color:#fff;text-align:center;padding:88px 0; background:linear-gradient(rgba(19,42,82,.72),rgba(31,64,122,.78)),var(--bleu-nuit); background-size:cover;background-position:center; } .bande-abidjan.a-photo{background-image:linear-gradient(rgba(19,42,82,.72),rgba(31,64,122,.8)),var(--photo)} .bande-abidjan h2{font-size:29px;font-weight:900;margin:0 0 12px;letter-spacing:-.5px} .bande-abidjan p{font-size:17.5px;color:#dbe7ff;max-width:34em;margin:0 auto 26px} .bande-abidjan .btn-cta{margin-top:4px} @media(max-width:640px){ .bande-abidjan{padding:60px 0} .bande-abidjan h2{font-size:24px} .bande-abidjan p{font-size:16px} } /* ---------- Comment ça marche ---------- */ .etapes{background:var(--bleu-nuit);color:#fff;position:relative;overflow:hidden} .etapes .sec-tete h2{color:#fff} .etapes .sec-tete p{color:#c3d3ee} .etapes .sec-eyebrow{color:var(--or)} .grille-etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .etape{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--rayon);padding:28px 24px;position:relative} .etape .num{ width:48px;height:48px;border-radius:50%;background:var(--or);color:#3a2a05; font-weight:900;font-size:21px;display:flex;align-items:center;justify-content:center;margin-bottom:16px; } .etape .e-ico{width:32px;height:32px;color:#bcd3f5;margin-bottom:12px} .etape h3{margin:0 0 8px;font-size:17px;font-weight:800} .etape p{margin:0;font-size:16px;color:#c3d3ee} @media(max-width:860px){ .grille-etapes{grid-template-columns:repeat(2,1fr)} } @media(max-width:480px){ .grille-etapes{grid-template-columns:1fr} } /* ---------- Autres services ---------- */ .services .grille-serv{display:grid;grid-template-columns:1fr 1fr;gap:24px} .serv{background:#fff;border:1px solid var(--bord);border-radius:var(--rayon);padding:0;box-shadow:var(--ombre);overflow:hidden;display:flex;flex-direction:column} .serv-head{padding:30px 30px 0;display:flex;align-items:flex-start;gap:18px} .serv-ico{width:60px;height:60px;flex:0 0 auto;border-radius:16px;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--bleu-clair),#fff);border:1.5px solid var(--bleu-bord);color:var(--bleu)} .serv-ico svg{width:34px;height:34px} .serv h3{margin:0 0 4px;font-size:20px;color:var(--bleu-nuit);font-weight:900} .serv-body{padding:16px 30px 30px} .serv-body>p{margin:0 0 16px;color:var(--gris);font-size:15.5px} .formules{display:grid;gap:14px} .formule{border:1px solid var(--bleu-bord);border-radius:var(--rayon-s);padding:16px 18px;background:var(--bleu-pale)} .formule b{display:block;color:var(--bleu-fonce);margin-bottom:4px;font-size:15.5px} .formule span{font-size:15px;color:var(--gris)} .badge-soon{display:inline-flex;align-items:center;gap:6px;background:var(--or);color:#3a2a05; font-weight:900;font-size:12.5px;letter-spacing:.5px;text-transform:uppercase;padding:5px 13px;border-radius:999px;margin-left:auto} .serv.a-venir{background:linear-gradient(180deg,#fff,var(--bleu-clair))} .serv .liste-check{list-style:none;margin:0;padding:0;display:grid;gap:11px} .serv .liste-check li{display:flex;gap:10px;align-items:flex-start;font-size:16px;color:var(--encre)} .serv .liste-check svg{width:20px;height:20px;color:var(--bleu);flex:0 0 auto;margin-top:2px} @media(max-width:860px){ .services .grille-serv{grid-template-columns:1fr} } /* ---------- Pourquoi DYIMMO ---------- */ .pourquoi{background:linear-gradient(180deg,#fff,var(--bleu-pale))} .grille-pq{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .pq{background:#fff;border:1px solid var(--bord);border-radius:var(--rayon);padding:30px;box-shadow:var(--ombre);transition:transform .2s,box-shadow .2s} .pq:hover{transform:translateY(-5px);box-shadow:var(--ombre-fort)} .pq .p-ico{width:52px;height:52px;color:var(--bleu);margin-bottom:14px} .pq h3{margin:0 0 8px;font-size:18px;color:var(--bleu-nuit);font-weight:800} .pq p{margin:0;font-size:15.5px;color:var(--gris)} @media(max-width:860px){ .grille-pq{grid-template-columns:1fr} } /* ---------- Définition DYIMMO ---------- */ .definition{background:linear-gradient(160deg,#16335f,var(--bleu-nuit));color:#fff;position:relative;overflow:hidden} .definition .wrap{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;max-width:1000px} .def-logo{background:#fff;border-radius:22px;padding:20px 26px;box-shadow:0 20px 44px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center} .def-logo img{height:120px;width:auto} .def-txt .sec-eyebrow{color:var(--or)} .def-txt h2{font-size:26px;font-weight:900;margin:0 0 13px;letter-spacing:-.5px;line-height:1.18} .def-txt p{font-size:16.5px;color:#d6e3f6;margin:0} .def-txt strong{color:#fff} @media(max-width:760px){ .definition .wrap{grid-template-columns:1fr;text-align:center;gap:24px;justify-items:center} .def-logo img{height:92px}.def-txt h2{font-size:22px}.def-txt p{font-size:16px} } /* ---------- Formulaire de contact ---------- */ .contact{background:var(--bleu-nuit);color:#fff} .contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start} .contact-info h2{font-size:28px;margin:0 0 14px;font-weight:900;letter-spacing:-.5px} .contact-info p{color:#c8d7ef;font-size:16.5px;margin:0 0 22px} .contact-info .co-ligne{display:flex;align-items:center;gap:13px;margin-bottom:15px;font-size:16px} .contact-info .co-ligne svg{width:24px;height:24px;color:var(--or);flex:0 0 auto} .btn-wa{display:inline-flex;align-items:center;gap:11px;background:#25D366;color:#04310f; font-weight:900;font-size:17px;padding:16px 26px;border-radius:999px;box-shadow:0 12px 28px rgba(37,211,102,.35); transition:transform .18s;margin-top:6px} .btn-wa:hover{transform:translateY(-3px)} .btn-wa svg{width:24px;height:24px} .form-carte{background:#fff;border-radius:var(--rayon);padding:32px;box-shadow:var(--ombre-fort);color:var(--encre)} .form-carte h3{margin:0 0 5px;color:var(--bleu-nuit);font-size:20px;font-weight:900} .form-carte .fc-sous{margin:0 0 20px;color:var(--gris);font-size:15.5px} .champ{margin-bottom:17px} .champ label{display:block;font-weight:800;font-size:15px;margin-bottom:7px;color:var(--bleu-nuit)} .champ input,.champ select,.champ textarea{ width:100%;padding:15px 16px;border:1.5px solid var(--bleu-bord);border-radius:var(--rayon-s); font-size:17px;font-family:inherit;background:var(--bleu-pale);color:var(--encre);transition:.15s; } .champ input:focus,.champ select:focus,.champ textarea:focus{ outline:none;border-color:var(--bleu);background:#fff;box-shadow:0 0 0 4px rgba(43,87,154,.14); } .champ textarea{min-height:104px;resize:vertical} .champ-miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form-carte .btn-cta{width:100%;margin-top:6px} .form-note{font-size:13.5px;color:var(--gris-clair);text-align:center;margin:16px 0 0} .form-ok{background:#e8f7ee;border:1px solid #b6e5c6;color:#136c33;border-radius:var(--rayon-s);padding:22px;text-align:center;font-weight:600;margin-bottom:6px} .form-ok .grand{font-size:18px;font-weight:900;display:block;margin-bottom:5px} .form-err{background:#fdecea;border:1px solid #f5c2be;color:#a12820;border-radius:var(--rayon-s);padding:15px 17px;margin-bottom:17px;font-size:15px} @media(max-width:860px){ .contact-grid{grid-template-columns:1fr;gap:28px} .contact-info h2{font-size:24px} } /* ---------- Pied ---------- */ .vit-pied{background:#0d1e3d;color:#aebfd9;padding:48px 0 30px;font-size:15px} .pied-haut{display:flex;flex-wrap:wrap;justify-content:space-between;gap:26px;align-items:flex-start;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.12)} .pied-marque{display:flex;align-items:center;gap:14px} .pied-marque img{height:52px;width:auto} .pied-marque b{color:#fff;font-size:20px;letter-spacing:.6px;font-weight:900} .pied-marque span{display:block;color:#8ba0c4;font-size:14px} .pied-co{display:grid;gap:8px} .pied-co>div{display:flex;align-items:center;gap:8px} .pied-co svg{width:18px;height:18px;flex:0 0 auto;color:var(--or)} .pied-co a{color:#cdd9ee} .pied-bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:20px;color:#7e93b8;font-size:14px} .pied-bas a{color:#7e93b8} .pied-bas a:hover{color:#fff;text-decoration:underline} /* ---------- Nos derniers biens disponibles ---------- */ .biens{background:linear-gradient(180deg,var(--bleu-pale),#fff)} .biens-piste{display:flex;gap:18px;overflow-x:auto;padding:4px 4px 14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch} .biens-piste::-webkit-scrollbar{height:8px} .biens-piste::-webkit-scrollbar-thumb{background:var(--bleu-bord);border-radius:8px} .bien-carte{ flex:0 0 250px;scroll-snap-align:start;background:#fff;border:1px solid var(--bord);border-radius:var(--rayon); overflow:hidden;box-shadow:var(--ombre);color:var(--encre);display:flex;flex-direction:column; transition:transform .18s,box-shadow .18s; } .bien-carte:hover{transform:translateY(-5px);box-shadow:var(--ombre-fort)} .bien-photo{position:relative;height:158px;background:var(--bleu-clair);overflow:hidden} .bien-photo img,.bien-photo .bien-illu{width:100%;height:100%;object-fit:cover;display:block} .bien-badge{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:5px; background:rgba(255,255,255,.95);color:#1c7a44;font-weight:800;font-size:12px;padding:5px 11px;border-radius:999px;box-shadow:var(--ombre)} .bien-badge svg{width:14px;height:14px} .bien-corps{padding:15px 16px 16px;display:flex;flex-direction:column;gap:7px;flex:1} .bien-type{display:flex;align-items:center;gap:7px;font-weight:800;color:var(--bleu-nuit);font-size:16px} .bien-type svg{width:18px;height:18px;color:var(--bleu)} .bien-lieu{display:flex;align-items:center;gap:7px;color:var(--gris);font-size:14px} .bien-lieu svg{width:16px;height:16px;color:var(--bleu)} .bien-loyer{font-weight:900;color:var(--bleu);font-size:18px;margin-top:2px} .bien-loyer span{font-weight:600;color:var(--gris);font-size:13px} .bien-lien{margin-top:auto;display:inline-flex;align-items:center;gap:7px;color:var(--bleu-fonce);font-weight:800;font-size:14px;padding-top:8px} .bien-lien svg{width:17px;height:17px} .biens-pied,.biens-vide{text-align:center;margin-top:26px} @media(max-width:520px){ .bien-carte{flex-basis:220px} } /* ---------- Chat d'assistance ---------- */ .chat-dyimmo{position:fixed;right:max(18px,env(safe-area-inset-right));left:auto;bottom:max(18px,env(safe-area-inset-bottom));z-index:2147483000} .chat-bulle{ display:inline-flex;align-items:center;gap:9px;min-height:52px;padding:0 18px 0 15px; background:linear-gradient(135deg,var(--bleu-vif),var(--bleu-fonce));color:#fff;border:0;border-radius:999px; box-shadow:0 12px 30px rgba(19,42,82,.4);cursor:pointer;font-weight:800;font-size:15px; transition:transform .18s,box-shadow .18s; } .chat-bulle:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(19,42,82,.5)} .chat-bulle svg{width:26px;height:26px} .chat-dyimmo.ouvert .chat-bulle{display:none} .chat-panneau{ position:absolute;right:0;left:auto;bottom:0;width:min(360px,calc(100vw - 32px)); max-height:min(560px,calc(100vh - 90px));display:flex;flex-direction:column; background:#fff;border:1px solid var(--bord);border-radius:20px;overflow:hidden; box-shadow:0 26px 60px rgba(8,20,45,.4);animation:chatIn .22s ease; } @keyframes chatIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}} .chat-tete{display:flex;align-items:center;justify-content:space-between;gap:10px; background:linear-gradient(135deg,var(--bleu),var(--bleu-fonce));color:#fff;padding:14px 16px} .chat-titre{font-weight:800;font-size:15.5px} .chat-x{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center; background:rgba(255,255,255,.16);border:0;border-radius:10px;color:#fff;cursor:pointer} .chat-x svg{width:20px;height:20px} .chat-fil{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--bleu-pale)} .chat-msg{max-width:85%;padding:11px 14px;border-radius:14px;font-size:14.5px;line-height:1.5} .chat-msg.bot{background:#fff;border:1px solid var(--bord);color:var(--encre);border-bottom-left-radius:5px;align-self:flex-start} .chat-msg.user{background:linear-gradient(135deg,var(--bleu-vif),var(--bleu-fonce));color:#fff;border-bottom-right-radius:5px;align-self:flex-end} .chat-msg strong{color:inherit} .chat-quick{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px;border-top:1px solid var(--bord);background:#fff} .chat-qbtn{display:inline-flex;align-items:center;gap:6px;background:var(--bleu-clair);color:var(--bleu-fonce); border:1px solid var(--bleu-bord);border-radius:999px;padding:9px 13px;font-size:13.5px;font-weight:700; cursor:pointer;text-align:left;transition:.15s;font-family:inherit} .chat-qbtn:hover{background:#fff;border-color:var(--bleu)} .chat-qbtn.fort{background:linear-gradient(135deg,#f0c765,var(--or) 55%,var(--or-fonce));color:#3a2a05;border-color:transparent} .chat-saisie{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--bord);background:#fff} .chat-saisie input{flex:1;min-height:44px;padding:0 14px;border:1.5px solid var(--bleu-bord);border-radius:999px; font-size:15px;font-family:inherit;background:var(--bleu-pale);color:var(--encre)} .chat-saisie input:focus{outline:none;border-color:var(--bleu);background:#fff} .chat-saisie button{width:44px;height:44px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; background:var(--bleu);color:#fff;border:0;border-radius:50%;cursor:pointer} .chat-saisie button svg{width:20px;height:20px} /* Correctif : sans cette règle, `display:flex` du panneau l'emporte sur le `[hidden]{display:none}` du navigateur — le panneau ne se fermait jamais (la croix restait sans effet). La spécificité classe+attribut suffit. */ .chat-panneau[hidden]{display:none} /* ---------- Lanceur « conseillère » (avatar) ---------- */ .chat-lanceur{padding:6px 20px 6px 6px;gap:12px} .chat-ava{width:48px;height:48px;flex:0 0 auto;border-radius:50%;overflow:hidden; background:#EAF2FE;display:block;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)} .chat-ava img,.chat-ava svg{width:100%;height:100%;display:block;object-fit:cover} .chat-lanceur .chat-bulle-txt{max-width:150px;line-height:1.15;text-align:left} .chat-dot{position:absolute;top:6px;right:6px;width:11px;height:11px;border-radius:50%; background:#57C486;border:2px solid #fff} .chat-lanceur{position:relative} .chat-tete-ava{width:30px;height:30px;border-radius:50%;overflow:hidden;background:#EAF2FE; display:inline-flex;flex:0 0 auto;vertical-align:middle;margin-right:8px} .chat-tete-ava img,.chat-tete-ava svg{width:100%;height:100%;object-fit:cover;display:block} .chat-titre{display:inline-flex;align-items:center} /* Indicateur « en train d'écrire » */ .chat-typing{display:inline-flex;gap:4px;align-items:center} .chat-typing i{width:7px;height:7px;border-radius:50%;background:#9FB6D8;display:inline-block; animation:chatBlink 1s infinite ease-in-out} .chat-typing i:nth-child(2){animation-delay:.16s} .chat-typing i:nth-child(3){animation-delay:.32s} @keyframes chatBlink{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}} @media(max-width:480px){ .chat-dyimmo{left:auto;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))} .chat-panneau{position:fixed;width:auto;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));max-height:min(72vh,540px)} .chat-bulle-txt{display:none} .chat-bulle{padding:0;width:56px;height:56px;justify-content:center} .chat-lanceur{padding:5px;width:62px;height:62px} .chat-ava{width:52px;height:52px} } /* ============================================================ MOUVEMENT RÉDUIT : on fige tout sur une belle scène de JOUR ============================================================ */ @media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} .hero{background-position:20% 50%} .hero:before{opacity:.7} html.js :is(.sec-tete,.av,.etape,.serv,.pq,.comp-col,.atout,.qs-carte,.punch,.form-carte,.contact-info,.def-logo,.def-txt,.rassure .r,.bien-carte){opacity:1!important;transform:none!important} .scene .sky-day{opacity:1} .scene .sky-dusk,.scene .sky-night,.scene .stars,.scene .win-lit,.scene .moon{opacity:0} .scene .sun{transform:translate(240px,58px);opacity:1} .scene .car{transform:translateX(210px)} }