/* ========================================================= NIBELIS – HOME 01/02/03 IFRAME RIGHT - Image toujours bas/droite - Texte avec .content (padding indépendant) - Responsive largeur + hauteur (dont 600px) ========================================================= */ /* ========================= FONTS – LOCAL HOSTED ========================= */ @font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins/Poppins-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins/Poppins-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins/Poppins-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat/Montserrat-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat/Montserrat-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat/Montserrat-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ========================= VARIABLES (valeurs desktop) ========================= */ :root{ --bg: #ffffff; --text: #393939; --yellow: #FDD910; /* Typo (desktop) */ --h2: clamp(34px, 2.6vw, 45px); --h3: clamp(18px, 1.4vw, 22px); --p: clamp(22px, 1.2vw, 26px); /* Layout texte (padding intérieur) */ --pad: clamp(24px, 3vw, 64px); /* Réserves pour que le texte ne passe jamais sous l'image */ --reserveRight: clamp(240px, 26vw, 560px); --reserveBottom: clamp(220px, 22vw, 460px); /* Taille image */ --mediaW: min(52vw, 980px); /* Couleurs par défaut (surclassées par home-01/02/03) */ --c-h2: #003378; --c-h3: #2479BE; --c-btn: #003378; } /* ========================= RESET / BASE ========================= */ *{ box-sizing: border-box; } html, body{ height: 100%; } body{ margin: 0; background: var(--bg); color: var(--text); font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } /* Évite scrollbars dans l'iframe */ body.iframe-right{ overflow: hidden; } /* Canvas plein écran */ body.iframe-right .page{ position: relative; width: 100vw; height: 100vh; } /* Panel droit : 50% par défaut (si ton iframe est déjà "la moitié droite") */ body.iframe-right .wrap{ position: fixed; top: 0; left: 0; /* important */ right: 0; width: 100%; /* ou 100vw */ height: 100%; margin: 0; padding: 0; max-width: none; background: #fff; overflow: hidden; } /* Si tu utilises parfois la page en plein écran (test direct), ajoute class "full" sur body: */ body.iframe-right.full .wrap{ width: 100vw; } /* Bloc global */ body.iframe-right .block{ position: relative; width: 100%; height: 100%; margin: 0; } /* ========================= CONTENT (texte uniquement) ========================= */ body.iframe-right .content{ position: relative; z-index: 2; /* toujours au-dessus du visuel */ padding: var(--pad); /* Réserve image */ padding-right: calc(var(--pad) + var(--reserveRight)); padding-bottom: calc(var(--pad) + var(--reserveBottom)); } /* ========================= TYPO ========================= */ body.iframe-right .content h2{ margin: 0 0 12px 0; font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; line-height: 1.10; color: var(--c-h2); font-size: var(--h2); } body.iframe-right .content h3{ margin: 0 0 10px 0; font-family: "Montserrat", system-ui, sans-serif; font-weight: 600; line-height: 1.30; color: var(--c-h3); font-size: var(--h3); } /* texte / bullets */ body.iframe-right .content p, body.iframe-right .content .icon-text{ margin: 0; color: var(--text); font-size: var(--p); line-height: 1.35; } /* Highlight */ body.iframe-right .double-highlight{ position: relative; display: inline-block; } body.iframe-right .double-highlight::before, body.iframe-right .double-highlight::after{ content:""; position:absolute; left:0; right:0; height:6px; background:#ffe570; border-radius: 20px; z-index:-1; } body.iframe-right .double-highlight::before{ bottom: -2px; transform: rotate(-1deg); } body.iframe-right .double-highlight::after{ bottom: -6px; transform: rotate(1deg); } /* ========================= LISTE (sans puces) ========================= */ body.iframe-right .icon-list{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; } body.iframe-right .icon-item{ margin: 0; padding: 0; display: flex; gap: 10px; align-items: flex-start; } body.iframe-right .icon{ width: 32px; flex: 0 0 32px; display: flex; align-items: flex-start; justify-content: center; margin-top: 2px; } body.iframe-right .icon svg{ width: 28px; height: 14px; display:block; } /* ========================= BOUTON (Montserrat) ========================= */ body.iframe-right .actions{ margin-top: 16px; } body.iframe-right .btn{ display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 14px; text-decoration: none; font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; letter-spacing: 0.02em; border: 1px solid transparent; background: var(--c-btn); color: #fff; /* taille bouton suit la typo */ font-size: clamp(16px, 1.2vw, 22px); } body.iframe-right .btn-icon{ width: 16px; height: 16px; display: inline-flex; } body.iframe-right .btn-icon svg{ width: 16px; height: 16px; display:block; fill: currentColor; } /* ========================= IMAGE (toujours bas/droite) ========================= */ body.iframe-right .media{ position: absolute; right: 0; bottom: 0; margin: 0; padding: 0; z-index: 1; pointer-events: none; width: var(--mediaW); } body.iframe-right .media img{ display: block; width: 100%; height: auto; max-height: 78vh; /* évite d’exploser en hauteur */ object-fit: contain; } /* ========================= COULEURS PAR PAGE ========================= */ body.home-01{ --c-h2: #0FB7E2; --c-h3: #2479BE; --c-btn: #0FB7E2; } body.home-02{ --c-h2: #003378; --c-h3: #2479BE; --c-btn: #003378; } body.home-03{ --c-h2: #0FB7E2; --c-h3: #2479BE; --c-btn: #0FB7E2; } /* H2 page 03 demandé */ /* ========================= RESPONSIVE LARGEUR ========================= */ /* Quand l’iframe devient étroite (ex: 800px en 50/50 => ~400px), on réduit image + typo + réserves, mais image reste absolue. */ @media (max-width: 800px){ :root{ --pad: 20px; --mediaW: min(92vw, 820px); --reserveRight: 20px; --reserveBottom: clamp(240px, 52vw, 380px); --h2: clamp(26px, 6.2vw, 34px); --h3: clamp(16px, 4.2vw, 20px); --p: clamp(15px, 3.8vw, 18px); } body.iframe-right .btn{ padding: 12px 18px; border-radius: 14px; } } @media (max-width: 420px){ :root{ --pad: 16px; --mediaW: min(92vw, 420px); --reserveRight: 16px; --reserveBottom: clamp(220px, 60vw, 340px); --h2: clamp(24px, 6.8vw, 32px); --h3: clamp(15px, 4.6vw, 18px); --p: clamp(14px, 4.0vw, 16px); } body.iframe-right .icon svg{ width: 24px; height: 12px; } } @media (max-width: 360px){ :root{ --mediaW: min(96vw, 360px); --reserveBottom: clamp(200px, 68vw, 300px); --h2: clamp(22px, 7.4vw, 28px); --p: clamp(13px, 4.4vw, 15px); } } /* ========================= RESPONSIVE HAUTEUR (ton cas 600px) ========================= */ @media (max-height: 600px){ :root{ --pad: 16px; /* image plus petite */ --mediaW: min(46vw, 720px); /* moins de réserve en bas => le texte remonte */ --reserveBottom: clamp(160px, 22vw, 280px); /* typo plus compacte */ --h2: clamp(24px, 2.8vw, 34px); --h3: clamp(15px, 1.5vw, 18px); --p: clamp(13px, 1.15vw, 16px); } body.iframe-right .icon-list{ gap: 0; } body.iframe-right .btn{ padding: 10px 16px; border-radius: 12px; } /* limite encore l'image en hauteur */ body.iframe-right .media img{ max-height: 70vh; } } /* Petit bonus : largeur + hauteur petites = réduction plus agressive */ @media (max-width: 800px) and (max-height: 600px){ :root{ --mediaW: min(92vw, 700px); --reserveBottom: clamp(180px, 55vw, 320px); --p: clamp(13px, 3.2vw, 16px); } } /* Grands écrans : on augmente un peu tout (typo + image) */ @media (min-width: 1400px){ :root{ /* texte */ --h2: clamp(40px, 2.8vw, 56px); --h3: clamp(20px, 1.6vw, 28px); --p: clamp(22px, 1.25vw, 30px); /* image */ --mediaW: min(70vw, 1180px); /* réserves pour que le texte ne passe pas sous l’image */ --reserveRight: clamp(280px, 28vw, 720px); --reserveBottom: clamp(240px, 24vw, 540px); } } /* ✅ Écrans "moyens" (là où tu veux plus grand) */ @media (min-width: 900px) and (max-width: 1399px) and (min-height: 650px){ :root{ --mediaW: min(62vw, 1080px); /* image plus grande au milieu */ --reserveRight: clamp(260px, 28vw, 660px); --reserveBottom: clamp(240px, 24vw, 520px); --h2: clamp(38px, 2.8vw, 48px); --h3: clamp(20px, 1.6vw, 26px); --p: clamp(22px, 1.3vw, 28px); } body.iframe-right .media img{ max-height: 84vh; /* 🔥 plus de hauteur autorisée */ } } /* ========================================= BOOST ÉCRANS MOYENS (PLUS GROS) ========================================= */ @media (min-width: 900px) and (max-width: 1399px){ body.iframe-right{ /* Image beaucoup plus présente */ --mediaW: min(70vw, 1250px); /* On agrandit aussi les réserves pour éviter le chevauchement */ --reserveRight: clamp(300px, 30vw, 760px); --reserveBottom: clamp(260px, 26vw, 560px); /* Typo plus imposante */ --h2: clamp(40px, 3.2vw, 54px); --h3: clamp(22px, 1.9vw, 28px); --p: clamp(22px, 1.5vw, 28px); } /* Autoriser un peu plus de hauteur à l’image */ body.iframe-right .media img{ max-height: 85vh; } }