/* === Image dans le bloc Extension Inter-îles (version ajustée) === */ .inter-iles-img-wrapper { display: flex; justify-content: center; align-items: center; margin-top: 0.8rem; width: 100%; } .inter-iles-img { width: 90%; max-height: 150px; object-fit: cover; border-radius: 14px; box-shadow: 0 4px 12px rgba(9,16,32,0.08); display: block; transition: transform 0.25s ease, box-shadow 0.25s ease; } .inter-iles-img:hover { transform: scale(1.02); box-shadow: 0 8px 18px rgba(9,16,32,0.12); } :root { --brand:#0f2147; --accent:#11b5e5; --accent2:#67d1f1; --ink:#0b1020; --muted:#5c667a; --bg:#f6f8fb; --radius:18px; --shadow:0 10px 30px rgba(15,33,71,.14); --ok:#14b8a6; --warn:#f59e0b; --sky:#67d1f1; --sky-weak:rgba(103,209,241,.18); --sky-stroke:rgba(103,209,241,.45); } * { box-sizing:border-box; } html,body { margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif; scroll-behavior:smooth; } img { max-width:100%; height:auto; display:block; } a { color:inherit; text-decoration:none; } .container { width:min(1168px,92vw); margin-inline:auto; } .section { padding:3.25rem 0; } .muted { color:var(--muted); } .tiny { font-size:.86rem; color:var(--muted); } h2 { font-size:clamp(1.5rem,2.8vw,2.2rem); margin:0 0 1rem 0; } .card { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:1.35rem; position:relative; overflow:hidden; } .two-col { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; } @media (max-width:980px) { .two-col { grid-template-columns:1fr; } } /* Rapproche le bloc Paiement */ #paiement-mini.section.container { margin-top:-0.5rem !important; } /* Harmonise le bord supérieur */ #paiement-mini .card { margin-top:0; border-top-left-radius:0; border-top-right-radius:0; } /* === Image dans le bloc Extension Inter-îles (version ajustée) === */ .inter-iles-img-wrapper { display: flex; justify-content: center; align-items: center; margin-top: 0.8rem; width: 100%; } .inter-iles-img { width: 85% !important; /* un peu plus étroite */ max-height: 130px !important; /* réduit la hauteur */ object-fit: cover !important; border-radius: 14px !important; box-shadow: 0 4px 12px rgba(9,16,32,0.08) !important; display: block !important; margin: 0 auto 0.4rem !important; /* centrée et légère marge basse */ } .inter-iles-img:hover { transform: scale(1.02); box-shadow: 0 8px 18px rgba(9,16,32,0.12); } /* ==== Inter-îles : image ajustée (hauteur un peu plus grande) ==== */ @media (min-width: 980px){ #inter-iles .inter-iles-img-wrapper { height: 170px; /* 🔧 augmente légèrement la hauteur */ margin-top: .7rem; border-radius: 14px; overflow: hidden; } #inter-iles .inter-iles-img { width: 100%; height: 100%; object-fit: cover; display: block; } } /* Bloc image Inter-îles verrouillé (pas de décalage) */ #inter-iles .inter-iles-hero{ height: 170px; /* ajuste 160–190px selon ton œil */ margin-top: .7rem; border-radius: 14px; background: url("assets/img/transfert-inter-iles-obc-antilles.png") center/cover no-repeat; box-shadow: 0 4px 12px rgba(9,16,32,.08); overflow: hidden; /* respecte l’arrondi */ } @media (max-width: 980px){ #inter-iles .inter-iles-hero{ height: 160px; } /* un peu plus compact sur mobile */ } /* === Remonte légèrement la section Tarifs + Inter-îles === */ #pricing.section.container { padding-top: -1.6rem; /* au lieu de ~3rem par défaut */ margin-top: -0.8rem; /* 🔧 remonte légèrement le bloc */ /* Footer toujours collé en bas + pas de blanc sous la page */ body { padding-bottom: 110px; } /* coussin = hauteur du footer (ajustable) */ footer { position: fixed; left: 0; right: 0; bottom: 0; /* colle en bas */ z-index: 50; /* au-dessus du fond */ background: #0a1325; /* ta couleur actuelle */ color: #98a6c7; padding: 1.5rem 0; /* hauteur ~110px avec texte */ text-align: center; margin: 0; /* aucune marge parasite */ border: 0; box-shadow: 0 -6px 18px rgba(0,0,0,.08); /* léger relief (optionnel) */ } /* === Réduction de l'écart sous la section Tarifs + Extensions === */ #pricing.section.container { margin-bottom: 0.5rem !important; /* espace externe minimal */ padding-bottom: 0.5rem !important; /* espace interne minimal */ } /* Le dernier bloc (Paiement & validation) n'ajoute plus d'espace inutile */ #pricing .card:last-child { margin-bottom: 0 !important; padding-bottom: 1rem !important; } .drawer-image { display: flex; justify-content: center; padding: 1.5rem 0 2rem; } .drawer-image img { width: 85%; max-width: 320px; border-radius: 18px; object-fit: cover; box-shadow: 0 6px 20px rgba(0,0,0,0.25); } .drawer-image { display: flex; justify-content: center; align-items: center; padding: 1.6rem 0 2rem; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.05) 100%); } .drawer-image img { width: 85%; max-width: 320px; border-radius: 22px; overflow: hidden; object-fit: cover; box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.05); transition: transform 0.4s ease, box-shadow 0.4s ease; } .drawer-image img:hover { transform: scale(1.03); box-shadow: 0 12px 32px rgba(0,0,0,0.3); } /* Carte : l’ombre est sur le figure, pas sur l’élément qui clippe */ .photo-interiles{ margin: 1.25rem 0; border-radius: 18px; box-shadow: 0 10px 28px rgba(10,20,40,.12); background:#fff; /* évite la transparence sous l’image */ } /* Le conteneur qui coupe l’image : contexte séparé et sûr pour Chrome */ .photo-interiles .img-frame{ border-radius: 18px; overflow: hidden; contain: paint; /* isole la peinture -> moins de bugs GPU */ isolation: isolate; /* nouveau stacking context */ backface-visibility: hidden; /* évite des artefacts lors du composite */ } /* L’image : aucune transform/transition, rendu simple */ .photo-interiles img{ display: block; width: 100%; height: auto; object-fit: cover; will-change: auto !important; /* ne pas forcer la promotion GPU */ transform: none !important; transition: none !important; image-rendering: auto; } /* Correction du décalage d'ancre (CGV, mentions, etc.) */ :target { scroll-margin-top: 100px; /* ajuste la valeur selon la hauteur de ta barre */ } /* --- BOUTON PREMIUM OBC AVEC AVION --- */ .backToTop { position: fixed; bottom: 22px; right: 22px; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(145deg, #0B1A34, #12305A); box-shadow: 0 6px 18px rgba(0,0,0,0.25), 0 0 0 2px rgba(17,181,229,0.25), 0 0 18px rgba(17,181,229,0.25); display: flex; justify-content: center; align-items: center; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease, transform .3s ease, box-shadow .4s ease; z-index: 9999; backdrop-filter: blur(4px); } /* Affichage quand on scrolle */ .backToTop.show { opacity: 1; visibility: visible; transform: translateY(0); } /* Hover premium : halo lumineux + montée */ .backToTop:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.4), 0 0 0 3px rgba(17,181,229,0.35), 0 0 25px rgba(17,181,229,0.45); } /* Avion premium */ .plane-icon { font-size: 24px; color: #fff; display: block; transform: rotate(-45deg) !important; /* avion incliné */ transition: transform .35s ease; } .backToTop:hover .plane-icon { transform: rotate(-45deg) translateY(-3px) !important; }