@charset "UTF-8";
/* =========================================================
Immobien – style.css (header + bases)
========================================================= */
/* ===== Variables & bases ===== */
:root{
--head-h:120px;
--brand:#1C042C;
--accent:#42F6AD;
--border:#E9EDF1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
color:#0F1222;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
}
small {
font-size: 12px;
}
a {
text-decoration: none;
color: #1C042C;
}
a:hover {
color: #368D6A;
}
p {line-height: 27px}
.pt-100 {
padding-top: 100px;
}
.ib-offset{padding-top:var(--head-h)}
.ib-rounded {
margin: 50px 0;
}
.ib-rounded .img-fluid {
border-radius: 30px;
}
/* Améliore les ancres (#id) sous header fixe */
[id]{scroll-margin-top:var(--head-h)}
/* ===== Header fixe ===== */
.ib-header{
position:fixed;top:0;left:0;right:0;height:var(--head-h);z-index:1000;
background:#fff;
}
.ib-wrap{
max-width:1200px;margin:0 auto;height:100%;padding:0 24px;
display:flex;align-items:center;justify-content:space-between;gap:24px
}
/* ===== Logo / Marque ===== */
.ib-brand{display:flex;align-items:center;text-decoration:none}
.ib-logo{height:32px;width:auto;display:block}
/* Variante texte (si jamais utilisée) */
.ib-brand-text{
position:relative;font-weight:700;font-size:24px;color:var(--brand);
letter-spacing:.2px;line-height:1
}
.ib-brand-text::after{
content:"";position:absolute;left:2.4ch;top:-10px;width:10px;height:10px;
background:var(--accent);transform:rotate(45deg);border-radius:1px
}
/* ===== Navigation ===== */
.ib-nav{
display:flex;align-items:center;gap:48px; /* espacement large comme la maquette */
}
.ib-nav a{
color:#0D1230;text-decoration:none;font-weight:500;line-height:1;font-size:18px;
}
.ib-nav a:hover{opacity:.8}
.ib-nav a.is-active{color:var(--brand)}
/* ===== CTA (selon ton brief) ===== */
.ib-btn{
background-color:#42F6AD;
font-family:"Lexend",Sans-serif;
font-size:16px;font-weight:400;line-height:20px;
color:#1C042C;fill:#1C042C;
border-radius:20px;padding:20px 27px 20px 30px;
display:inline-block;border:0;text-decoration:none;
transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,color .15s ease
}
.ib-btn:hover{
background-color:#1C042C;
color:#fff;
transform:translateY(-1px);
box-shadow:0 8px 22px rgba(28,4,44,.12)
}
.ib-nav a:focus-visible,.ib-btn:focus-visible{
outline:2px solid var(--brand);outline-offset:2px;border-radius:10px
}
/* ===== Icône flèche (sans lib externe) ===== */
.icon{display:inline-block;width:18px;height:18px;vertical-align:-3px;margin-left:8px;background-color:currentColor}
.icon-arrow-right{
-webkit-mask:url('data:image/svg+xml;utf8,') center/18px 18px no-repeat;
mask:url('data:image/svg+xml;utf8,') center/18px 18px no-repeat;
}
/* Icône flèche style maquette : suit la couleur du texte */
.ib-ico{ width:22px; height:22px; margin-left:10px; vertical-align:-3px; }
/* Rien d’autre à changer : ta règle .ib-btn:hover passe déjà la couleur en blanc,
l’icône suit grâce à stroke: currentColor dans le SVG */
/* ===== Burger mobile (sans JS) ===== */
.ib-toggle{display:none}
.ib-burger{display:none;width:36px;height:28px;position:relative;cursor:pointer}
.ib-burger span{
position:absolute;left:0;right:0;height:2px;background:#0D1230;border-radius:2px;transition:.2s
}
.ib-burger span:nth-child(1){top:5px}
.ib-burger span:nth-child(2){top:13px}
.ib-burger span:nth-child(3){top:21px}
/* ===== Responsive ===== */
@media (max-width: 992px){
.ib-burger{display:block}
.ib-nav{
position:fixed;top:var(--head-h);left:0;right:0;background:#fff;
border-bottom:1px solid var(--border);
flex-direction:column;align-items:stretch;gap:8px;padding:14px 16px;
transform:translateY(-12px);opacity:0;pointer-events:none;
transition:transform .2s,opacity .2s
}
#ib-toggle:checked ~ .ib-nav{
transform:translateY(0);opacity:1;pointer-events:auto
}
.ib-btn{width:100%;text-align:center}
}
/* ===== Section & container (contenu centré) ===== */
.ib-section{ padding:clamp(16px,3vw,0px) 0; }
.ib-container{ max-width:1200px; margin:0 auto; padding:0 16px; }
/* ===== Hero contenu (pas plein écran) ===== */
.ib-hero{
position:relative;
width:100%;
min-height:520px; /* hauteur confortable desktop, pas full screen */
background-size:cover;
background-position:center;
background-repeat:no-repeat;
border-radius:50px;
overflow:hidden;
display:flex; /* centre verticalement le contenu */
align-items:center;
}
.ib-hero__inner{
width:100%;
padding:clamp(14px, 4vw, 56px);
}
.ib-hero__content{
max-width:660px;
color:#fff;
}
.ib-hero h1{
margin:0 0 16px;
font-weight:700;
font-size:clamp(30px, 6vw, 60px);
line-height:1.1;
letter-spacing:.2px;
color:#fff;
}
.ib-city{ }
/* Liste avec icônes “check” vertes */
.ib-list-check{
list-style:none;
margin:0 0 24px;
padding:0;
font-weight:600;
}
.ib-list-check li{
display:flex;
align-items:center;
gap:12px;
margin:10px 0;
color:#fff;
}
.ib-list-check li::before{
content:"";
width:18px; height:18px; flex:0 0 18px;
background-color:var(--accent, #42F6AD);
-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
/* ===== Responsive ===== */
@media (max-width: 992px){
.ib-hero{ min-height:380px; }
}
@media (max-width: 600px){
.ib-hero{ min-height:340px; }
.ib-list-check li{ margin:8px 0; }
}
/* ===== Section titres (optionnel, harmonise avec le reste) ===== */
.ib-sec-head { margin-bottom: 24px; }
.ib-sec-head .ib-sec-lead { color:#6b7280; margin:8px 0 0; }
/* === Section header (optionnel) === */
.ib-sec-head{ margin-bottom:24px; }
.ib-sec-head .ib-sec-lead{ color:#6b7280; margin:8px 0 0; }
/* === Frise chronologique avec images parfaitement alignées === */
:root{ --tl-gap:64px } /* espace de part et d’autre de la ligne centrale */
/* Conteneur + ligne centrale */
.ib-history{
position:relative;
list-style:none;
margin:0;
padding:12px 0 0;
}
.ib-history::before{
content:"";
position:absolute; top:0; bottom:0; left:50%;
width:2px; background:#E9EDF1; transform:translateX(-1px);
}
/* Chaque étape : la hauteur du = hauteur de la CARTE.
L'image est hors flux (absolute) et s'aligne automatiquement en face. */
.ib-history__item{
position:relative;
margin:56px 0;
min-height:220px;
}
/* Pastille centrée sur la carte (puisque la hauteur du li = carte) */
.ib-history__node{
position:absolute; left:50%; top:50%;
transform:translate(-50%,-50%);
width:16px; height:16px; background:var(--accent, #42F6AD);
border-radius:50%; box-shadow:0 0 0 4px #F5F7FA;
}
/* Carte */
.ib-history__card{
width:calc(50% - var(--tl-gap)); background:#fff;
}
.ib-history__item:nth-child(odd) .ib-history__card{ margin-right:auto; } /* à gauche */
.ib-history__item:nth-child(even) .ib-history__card{ margin-left:auto; } /* à droite */
.ib-history__date{
display:inline-block; font-weight:600; color:#AE29B3; font-size:14px; margin-bottom:10px;
}
.ib-history__title{ margin:6px 0 6px; font-size:26px; font-weight:700; color:#020268; }
.ib-history__text{ margin:0; color:#374151; }
/* Image en face de la carte (absolue => ne “pousse” plus la hauteur) */
.ib-history__media{
position:absolute; top:0; bottom:0;
width:calc(50% - var(--tl-gap));
border-radius:20px; overflow:hidden;
box-shadow:0 10px 30px rgba(2,6,23,.08); background:#f3f4f6; margin:0;
}
.ib-history__media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Position de l'image selon la parité de l'étape */
.ib-history__item:nth-child(odd) .ib-history__media{ left:calc(50% + var(--tl-gap)); } /* image à droite */
.ib-history__item:nth-child(even) .ib-history__media{ right:calc(50% + var(--tl-gap)); } /* image à gauche */
/* === Responsive === */
@media (max-width: 992px){
.ib-history::before{ left:22px; transform:none; } /* ligne à gauche */
.ib-history__item{
display:flex; flex-direction:column; gap:16px; margin:28px 0 32px;
}
.ib-history__node{ left:22px; top:22px; transform:none; } /* pastille en haut à gauche */
/* Repasser l'image dans le flux sous la carte, alignée à droite de la ligne */
.ib-history__media{
position:static; width:auto; height:auto; margin-left:48px; order:2;
aspect-ratio:16/9; /* garde une jolie hauteur sur mobile */
}
.ib-history__card{ width:auto; margin-left:48px; order:1; }
}
@media (max-width: 600px){
.ib-history__node{ visibility: hidden }
.ib-history::before { visibility: hidden }
.ib-history__media { margin-left:0; }
.ib-history__card {margin-left:0; }
}
/* Cartes témoignages */
.ib-testi{
display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start;
background:#fff; border:1px solid var(--border,#E9EDF1);
border-radius:20px; padding:20px; box-shadow:0 10px 30px rgba(2,6,23,.06);
}
.ib-testi__avatar{ width:96px; height:96px; border-radius:50%; object-fit:cover; display:block; }
.ib-testi__body{ min-width:0; }
.ib-testi__quote{ margin:6px 0 14px; font-size:clamp(16px, 2.1vw, 16px); line-height:1.5; color:#0F1222; }
.ib-testi__name{ font-weight:700; font-size:20px; color:#0F1222; }
.ib-testi__role{ color:#9424B8; font-size:16px; }
/* Étoiles */
.ib-stars{ display:inline-flex; color:#FACC15; margin-bottom:6px; }
.ib-stars .star{
width:18px; height:18px; background:currentColor;
-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
/* Empile sur mobile */
@media (max-width:575.98px){
.ib-testi{ grid-template-columns:1fr; }
.ib-testi__avatar{ width:72px; height:72px; }
}
.section-grey {
background-color: #F6F6F7;
padding: 100px 0;
}
/* ===== FAQ ===== */
#faq { scroll-margin-top: calc(var(--head-h) + 16px); }
.session-faq {
padding: 100px 0;
}
.ib-faq{
display: grid;
gap: 12px;
}
/* Bloc Q/R */
.ib-faq__item{
background:#fff;
border:1px solid var(--border, #E9EDF1);
border-radius:20px;
overflow:hidden;
box-shadow:0 8px 24px rgba(2,6,23,.06);
}
/* Question (summary) */
.ib-faq__q{
list-style:none;
cursor:pointer;
padding:16px 18px;
font-weight:700;
color:#0F1222;
position:relative;
user-select:none;
}
.ib-faq__q::-webkit-details-marker{ display:none; }
/* Chevron */
.ib-faq__q::after{
content:"";
position:absolute; right:16px; top:50%;
width:18px; height:18px; transform:translateY(-50%) rotate(0deg);
background-color:#0F1222; opacity:.8;
-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
transition:transform .2s ease, opacity .2s ease;
}
.ib-faq__item[open] .ib-faq__q::after{ transform:translateY(-50%) rotate(180deg); }
/* États hover / focus */
.ib-faq__q:hover{ background:#f8fafc; }
.ib-faq__q:focus{ outline:none; }
.ib-faq__q:focus-visible{
outline:2px solid var(--brand, #1C042C);
outline-offset:2px;
border-radius:8px;
}
/* Réponse (sans bordure supérieure pour éviter la “ligne noire”) */
.ib-faq__a{
padding:14px 18px 18px;
color:#374151;
border-top:0 !important;
}
.ib-faq__a p{ margin:0; }
/* ===== Footer global ===== */
.ib-footer{ margin-top:clamp(24px,4vw,48px); }
/* ===== FOOTER HAUT (col-md) ===== */
.ib-foot-top{
background:#F7F9FB;
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
padding:clamp(24px,4vw,48px) 0;
}
/* Titres + sous-titres */
.ib-foot-top h4{
margin:30px 0 10px;
font-weight:700;
color:var(--brand,#1C042C);
font-size:18px;
}
.ib-foot-subttl{
margin:18px 0 8px;
font-size:16px;
font-weight:700;
color:var(--brand,#1C042C);
}
/* Listes de liens */
.ib-foot-links{ list-style:none; padding:0; margin:0 0 10px; }
.ib-foot-links li{ margin:10px 0; }
.ib-foot-links a{
color:#0F1222;
text-decoration:none;
}
.ib-foot-links a:hover{ text-decoration:underline; }
/* Réseaux sociaux */
.ib-foot-social .s i{ font-size:30px; line-height:1; margin-right: 20px }
/* Colonne aside (image + claim + CTA) */
.ib-foot-top .text-center{ /* correspond à ta col "aside" */
display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
}
.ib-foot-map{ max-width:240px; height:auto; opacity:.9; }
.ib-foot-claim{ margin:0; color:#3b3f4a; }
.ib-foot-btn{ margin-top:6px; }
/* ===== FOOTER BAS (col-md-2 / col-md-8 / col-md-2) ===== */
.ib-foot-bottom{
background:#fff;
border-top:1px solid var(--border);
padding:30px 0;
}
.ib-foot-logo{ height:36px; width:auto; }
/* Zone mentions + liens */
.ib-foot-legal{ color:#3b3f4a; }
.ib-foot-copy{ margin-bottom:6px; }
/* Liens légaux en ligne avec séparateurs */
.ib-foot-legal-links{
list-style:none; padding:0; margin:0;
display:flex; flex-wrap:wrap; gap:10px;
justify-content:center; /* centré en mobile */
}
@media (min-width:768px){
.ib-foot-legal-links{ justify-content:flex-start; }
}
.ib-foot-legal-links li{
position:relative; padding-left:12px; margin-left:12px;
}
.ib-foot-legal-links li::before{
content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
width:1px; height:14px; background:var(--border);
}
.ib-foot-legal-links li:first-child{ padding-left:0; margin-left:0; }
.ib-foot-legal-links li:first-child::before{ content:none; }
.ib-foot-legal a{ color:#0F1222; text-decoration:none; font-size: 14px; }
.ib-foot-legal a:hover{ text-decoration:underline; }
/* Lien “Haut de page” */
.ib-backtop{
display:inline-flex; align-items:center; gap:8px; text-decoration:none;
color:#0F1222; white-space:nowrap;
}
.ib-backtop:hover{ text-decoration:underline; }
ul {
list-style: none;
padding: 0;
margin: 0;
}
.city li a{
font-size: 13px;
}
/* ===== Responsive tweaks ===== */
@media (max-width: 767.98px){
.ib-backtop{ justify-content:center; width:100%; }
}
/* Base: desktop + tablette = 800px */
#embed{
width: 100%;
max-width: 100%;
height: 700px;
border: 0;
display: block;
}
/* Mobile (<768px) = 1000px */
@media (max-width: 767.98px){
#embed{ height: 1000px; }
}
/* Optionnel : évite un scroll horizontal parasite */
html, body { overflow-x: hidden; }