/* ============================================================ Romain Jacquinot — Tarifs immobilier · Design system KOVA (sombre) Valeurs reprises du handoff design_handoff_tarifs_studio ============================================================ */ /* Police chargée dans le des pages (Hanken Grotesk 400..900). */ :root{ --surface-page:#0C0B0A; --surface-card:#1C1A18; --surface-inverse:#FAFAFA; --ink-900:#FFFFFF; --ink-800:#2E2B28; --ink-700:#E7E5E4; --gray-600:#D6D3D1; --gray-500:#A8A29E; --gray-400:#78716C; --gray-300:#3F3B37; --gray-200:#2E2B28; --border-subtle:#2E2B28; --border-strong:#3F3B37; --border-hover:#57534E; --violet:#8855ff; /* seule couleur du site : contour de la fenêtre + survol de toutes les cartes */ --glass-bg:rgba(12,11,10,.72); --glass-border:rgba(255,255,255,.1); --duration-base:300ms; --duration-reveal:800ms; --ease-out:cubic-bezier(.22,1,.36,1); --font-sans:'Hanken Grotesk',-apple-system,'Helvetica Neue',sans-serif; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--surface-page); color:var(--gray-600); font-family:var(--font-sans); font-size:17px; line-height:1.6; min-height:100vh; overflow-x:clip; -webkit-font-smoothing:antialiased; } a{color:#FFFFFF;text-decoration:none} img{max-width:100%;display:block} input,select,textarea{font-family:var(--font-sans)} input::placeholder,textarea::placeholder{color:var(--gray-400)} @keyframes rj-reveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @keyframes rj-faq-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .reveal{animation:rj-reveal var(--duration-reveal) var(--ease-out) both} /* ★ VALIDÉ ★ arrivée « B · Cascade » (choisie le 10/09/2026) Les enfants directs arrivent l'un après l'autre, de haut en bas. `--retard` permet de faire démarrer un bloc après un autre. */ .cascade{--retard:0ms} .cascade > *{animation:rj-reveal 700ms var(--ease-out) both} .cascade > *:nth-child(1){animation-delay:calc(var(--retard) + 0ms)} .cascade > *:nth-child(2){animation-delay:calc(var(--retard) + 110ms)} .cascade > *:nth-child(3){animation-delay:calc(var(--retard) + 220ms)} .cascade > *:nth-child(4){animation-delay:calc(var(--retard) + 330ms)} .cascade > *:nth-child(5){animation-delay:calc(var(--retard) + 440ms)} .cascade > *:nth-child(6){animation-delay:calc(var(--retard) + 550ms)} @media (prefers-reduced-motion:reduce){ .reveal,.cascade > *{animation:none} } /* ★ VALIDÉ ★ Apparition au défilement (10/09/2026) Les blocs sous le hero montent quand on arrive dessus. Les classes sont retirées une fois l'effet joué, pour ne pas gêner les transitions de survol des cartes. */ .apparait{ opacity:0;transform:translateY(24px); transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out); } .apparait.vu{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .apparait{opacity:1;transform:none;transition:none} } /* ---------- Conteneurs ---------- */ .container{max-width:1200px;margin:0 auto;padding-left:24px;padding-right:24px} .section{padding:clamp(72px,9vw,120px) 24px} .section--rule{border-top:1px solid var(--border-subtle);padding:clamp(88px,10vw,140px) 24px;background:var(--surface-page)} /* ---------- Nav flottante (glass) ---------- */ .nav{ position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:100; display:flex;flex-direction:column;align-items:center;gap:12px; width:min(calc(100% - 32px),1000px); } .nav__pill{ display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%; height:56px;padding:0 8px 0 22px;border-radius:999px; background:var(--glass-bg); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); box-shadow:inset 0 0 0 1px var(--glass-border),0 2px 4px rgba(20,18,16,.04),0 12px 32px rgba(20,18,16,.08); /* ★ VALIDÉ ★ menu « E · Pilule qui se rétracte » (choisi le 10/09/2026) */ margin:0 auto; transition:max-width 500ms var(--ease-out); } .nav__brand{display:flex;align-items:center;gap:10px;font-weight:850;font-size:17px;letter-spacing:-0.03em;color:#FFFFFF;white-space:nowrap} .nav__brand img{width:32px;height:32px;border-radius:10px} .nav__links{display:flex;gap:4px;transition:opacity 300ms var(--ease-out),max-width 500ms var(--ease-out);max-width:600px} .nav__link{padding:8px 14px;border-radius:999px;font-size:15px;font-weight:550;color:var(--gray-600);transition:color var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out)} .nav__link:hover{color:#FFFFFF;background:rgba(255,255,255,.08)} .nav__link--active{color:#FFFFFF} .nav__right{display:flex;align-items:center;gap:4px} .nav__menu-btn{display:none;background:none;border:none;cursor:pointer;font-family:inherit;font-size:15px;font-weight:550;color:var(--gray-600);padding:8px 12px;border-radius:999px} .nav__panel{ width:100%;padding:16px;border-radius:24px; background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); box-shadow:inset 0 0 0 1px var(--glass-border),0 4px 10px rgba(20,18,16,.05),0 28px 64px rgba(20,18,16,.12); display:grid;grid-template-columns:1fr 1fr;gap:4px; } .nav__panel[hidden]{display:none} .nav__panel a{display:block;padding:12px;border-radius:12px;font-size:15px;font-weight:550;color:var(--gray-600)} .nav__panel a:hover{color:#FFFFFF;background:rgba(255,255,255,.08)} .nav__cta{ display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:999px; background:#FFFFFF;color:#0C0B0A;font-size:14px;font-weight:550;white-space:nowrap; transition:background var(--duration-base) var(--ease-out); } .nav__cta:hover{background:var(--ink-700);color:#0C0B0A} @media (max-width:819px){ .nav__links{display:none} .nav__menu-btn{display:inline-flex} } /* Correctif mobile : dans le handoff, « Romain Jacquinot » + Menu + le bouton ne tiennent pas dans la pilule (contenu 400 px pour 343 px de large) et le bouton était coupé. Sous 820 px on garde le logo seul et on resserre les marges ; le nom revient dès 820 px. */ @media (max-width:819px){ .nav__brand{font-size:0;gap:0} .nav__brand img{width:32px;height:32px} .nav__pill{padding:0 8px 0 10px;gap:8px} .nav__menu-btn{padding:8px 10px} .nav__cta{padding:0 16px} } /* ★ VALIDÉ ★ Rétraction au défilement (desktop seulement : sur mobile il y a déjà le bouton Menu). Elle se rétracte quand on descend, elle revient dès qu'on remonte. */ @media (min-width:820px){ .nav.is-reduit .nav__pill{max-width:420px} .nav.is-reduit .nav__links{opacity:0;max-width:0;overflow:hidden;pointer-events:none} } @media (prefers-reduced-motion:reduce){ .nav__pill,.nav__links{transition:none} } @media (min-width:820px){ .nav__panel{display:none !important} } /* ---------- Boutons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; border-radius:999px;font-family:inherit;font-weight:550;cursor:pointer; text-decoration:none;border:none;position:relative; transition:all var(--duration-base) var(--ease-out); } .btn:active{transform:scale(.98)} .btn--md{height:44px;padding:0 24px;font-size:15px} .btn--lg{height:56px;padding:0 32px;font-size:17px} .btn--primary{background:#FFFFFF;color:#0C0B0A} .btn--primary:hover{background:var(--ink-700);color:#0C0B0A;box-shadow:0 4px 10px rgba(20,18,16,.05),0 28px 64px rgba(20,18,16,.12)} .btn--secondary{background:transparent;color:#FFFFFF;box-shadow:inset 0 0 0 1px var(--border-strong)} .btn--secondary:hover{box-shadow:inset 0 0 0 1px var(--gray-500);color:#FFFFFF} /* ---------- Hero ---------- */ /* La section occupe toute la largeur : c'est elle qui porte le fond. */ .hero-section{position:relative;overflow:hidden} .hero{ box-sizing:content-box; max-width:1200px;margin:0 auto; padding:clamp(140px,18vw,200px) 24px clamp(64px,8vw,112px); display:grid;grid-template-columns:minmax(0,1fr); gap:40px;align-items:end; } /* ★ VALIDÉ ★ hero en 2 colonnes (photo du 11/09/2026) : titre à gauche sur 3 lignes, paragraphe + lien « Voir les formules » à droite, calés sur le bas du titre. */ @media (min-width:900px){ .hero{grid-template-columns:minmax(0,1fr) 340px;column-gap:70px} } .hero__col{position:relative;z-index:1} /* Ombre très douce : le texte reste lisible même sur les images claires de la vidéo. */ .hero__col .eyebrow,.hero__col h1,.hero__col .hero__text,.hero__lien{text-shadow:0 1px 22px rgba(12,11,10,.5)} .hero__col{display:flex;flex-direction:column;gap:28px} .hero__col--droite{gap:24px;padding-bottom:4px} .hero__lien{ align-self:flex-start;display:inline-flex;align-items:center;gap:8px; font-size:15px;font-weight:600;color:#FFFFFF;text-decoration:none; padding-bottom:8px;border-bottom:1px solid #FFFFFF; transition:gap var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out); } .hero__lien svg{transition:transform var(--duration-base) var(--ease-out)} @media (hover:hover){ .hero__lien:hover{gap:12px} } .eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-500);font-weight:500} h1{font-size:clamp(44px,6vw,84px);font-weight:700;letter-spacing:-0.03em;line-height:1.02;color:#FFFFFF;text-wrap:pretty;margin:0;max-width:820px} /* « avant la visite » en violet depuis le 11/09/2026 */ h1 .muted{color:var(--violet)} .hero__text{margin:0;font-size:17px;line-height:1.6;color:var(--gray-600);max-width:460px;text-wrap:pretty} @media (min-width:900px){.hero__text{max-width:none}} .hero__actions{display:flex;flex-wrap:wrap;gap:12px} /* Visuel du haut de page : photo ou vidéo en arrière-plan, réglé dans data.js (HERO_MEDIA). Il déborde volontairement du conteneur pour occuper toute la largeur de l'écran. */ .hero__fond{ position:absolute;inset:0; z-index:0;overflow:hidden; animation:rj-fondu 1200ms var(--ease-out) both; } .hero__fond img,.hero__fond video{width:100%;height:100%;object-fit:cover;object-position:50% var(--cadrage);display:block} /* Voile : juste ce qu'il faut pour garder le texte lisible, sans écraser la vidéo. Pour l'assombrir ou l'éclaircir, ce sont les 4 valeurs de --voile-* ci-dessous. */ .hero__fond{ --voile-gauche:.55; /* derrière le texte */ --voile-droite:.08; /* côté dégagé : la vidéo se voit */ --voile-haut:.21; /* sous la barre de navigation */ --voile-bas:.56; /* raccord avec la section suivante */ /* Quelle partie de la vidéo on voit : 0% = tout en haut, 50% = le milieu, 100% = le bas */ --cadrage:15%; } .hero__fond::after{ content:'';position:absolute;inset:0;pointer-events:none; background: linear-gradient(90deg, rgba(12,11,10,var(--voile-gauche)) 0%, rgba(12,11,10,calc(var(--voile-gauche) * .55)) 45%, rgba(12,11,10,var(--voile-droite)) 100%), linear-gradient(180deg, rgba(12,11,10,var(--voile-haut)) 0%, rgba(12,11,10,0) 30%, rgba(12,11,10,0) 62%, rgba(12,11,10,var(--voile-bas)) 100%); } @keyframes rj-fondu{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){ .hero__fond{animation:none} } /* ---------- Section Formules ---------- */ .formules{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:56px} .formules__head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:32px} .formules__title-wrap{display:flex;flex-direction:column;align-items:center;gap:20px;max-width:820px} .h2-xl{font-size:clamp(56px,8vw,104px);font-weight:700;letter-spacing:-0.03em;line-height:1;color:#FFFFFF;text-wrap:pretty;margin:0} .h2{font-size:clamp(34px,4vw,52px);font-weight:700;letter-spacing:-0.03em;line-height:1.05;color:#FFFFFF;text-wrap:pretty;margin:0} .lead{margin:0;font-size:17px;line-height:1.6;color:var(--gray-600);text-wrap:pretty} .segmented{display:inline-flex;padding:4px;border-radius:999px;background:var(--surface-card);box-shadow:inset 0 0 0 1px var(--border-subtle);flex-wrap:wrap;justify-content:center} .segmented button{ height:40px;padding:0 18px;border-radius:999px;border:none;cursor:pointer; font-family:inherit;font-size:14px;font-weight:550; background:transparent;color:var(--gray-600); transition:all var(--duration-base) var(--ease-out); } /* palier choisi : en violet depuis le 11/09/2026 */ .segmented button.is-active{background:var(--violet);color:#FFFFFF} .sub-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:8px 0} .sub-head h3{font-size:35px;font-weight:700;letter-spacing:-0.02em;line-height:1.1;color:#FFFFFF;margin:0} .sub-head p{margin:0;font-size:15px;line-height:1.6;color:var(--gray-600);max-width:520px;text-wrap:pretty} .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:20px;padding-top:14px;align-items:stretch;margin-top:-32px} .plans--video{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));max-width:800px;width:100%;margin:-32px auto 0;padding-top:0} .card{ --mx:50%;--my:50%; position:relative;display:flex;flex-direction:column;gap:24px; padding:32px 28px;border-radius:28px;background:var(--surface-page);height:100%; box-shadow:inset 0 0 0 1px var(--border-subtle); transform-style:preserve-3d; /* ★ VALIDÉ ★ survol « E · Projecteur + Inclinaison » (choisi le 11/09/2026) remplace « A · Soulèvement » du 10/09 (sauvegarde V6.2-avant-survol-E) */ transition:transform 600ms var(--ease-out),background var(--duration-base) var(--ease-out); } /* pendant que la souris bouge sur la carte, l'inclinaison la suit sans retard */ .card.is-live{transition:transform 90ms linear,background var(--duration-base) var(--ease-out)} /* la perspective vient de la grille, pour que toutes les cartes basculent dans le même espace */ .plans{perspective:1100px} /* Projecteur : contour lumineux qui suit la souris (le trait visible = padding 1.5px) */ .card::before{ content:'';position:absolute;inset:0;border-radius:28px;pointer-events:none;padding:1.5px; background:radial-gradient(276px circle at var(--mx) var(--my),var(--violet),rgba(136,85,255,.29) 40%,transparent 70%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude; opacity:0;transition:opacity 400ms ease; } /* halo violet très doux à l'intérieur de la carte */ .card::after{ content:'';position:absolute;inset:0;border-radius:28px;pointer-events:none; background:radial-gradient(483px circle at var(--mx) var(--my),rgba(136,85,255,.115),transparent 65%); opacity:0;transition:opacity 400ms ease; } /* la lumière s'allume sur TOUTES les cartes de la grille survolée : la voisine s'éclaire déjà quand on s'en approche */ .plans.is-on .card::before,.plans.is-on .card::after{opacity:1} @media (hover:hover){ .card:hover{background:#131211} } /* Doigt : pas de survol sur mobile, on garde un retour visible à l'appui */ .card:active{background:#131211;box-shadow:inset 0 0 0 1.5px var(--violet)} /* Respect du réglage système « réduire les animations » : pas d'inclinaison */ @media (prefers-reduced-motion:reduce){ .card{transition:background var(--duration-base) var(--ease-out)} .card.is-live{transition:background var(--duration-base) var(--ease-out)} .card,.card.is-live{transform:none !important} } .card__head{display:flex;flex-direction:column;gap:4px} .card__name{font-size:20px;font-weight:700;letter-spacing:-0.01em;color:#FFFFFF;margin:0} .card__desc{margin:0;font-size:14px;line-height:1.5;color:var(--gray-500)} .card__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;padding-bottom:20px;border-bottom:1px solid var(--border-subtle)} .card__amount{font-size:40px;font-weight:700;letter-spacing:-0.02em;line-height:1;color:#FFFFFF;white-space:nowrap} .card__unit{font-size:13px;color:var(--gray-500);white-space:nowrap} .card__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;flex:1} .card__list li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--gray-600)} .card__list svg{flex:none;margin-top:3px;color:#FFFFFF} .card__more{ display:inline-flex;align-items:center;gap:8px;align-self:flex-start; background:none;border:none;padding:0;cursor:pointer; font-family:inherit;font-size:14px;font-weight:550;color:#FFFFFF; } .card__plus{ display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px; border-radius:50%;background:#FFFFFF;color:var(--surface-page); transition:transform var(--duration-base) var(--ease-out); } .card__more.is-open .card__plus{transform:rotate(45deg)} .card__note{margin:0;padding-top:16px;border-top:1px solid var(--border-subtle);font-size:12.5px;line-height:1.5;color:var(--gray-500)} .note-palier{margin:-32px 0 0;font-size:14px;line-height:1.6;color:var(--gray-500);max-width:720px;text-wrap:pretty} /* ---------- Panneaux (réseaux sociaux / à la carte) ---------- */ .block{display:flex;flex-direction:column;gap:24px;padding-top:24px} .panels{display:flex;flex-direction:column;gap:20px;min-width:0;width:100%;max-width:900px;margin:0 auto} .panel{display:flex;flex-direction:column;background:var(--surface-page);border-radius:24px;box-shadow:inset 0 0 0 1px var(--border-subtle);overflow:hidden;min-width:0} .panel__label{padding:18px 28px 6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-500);font-weight:550} .panel__row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:16px 28px;border-top:1px solid var(--border-subtle)} .panel__row > .panel__nom,.panel__row > span:first-child{font-size:15px;color:#FFFFFF;min-width:0} /* Nom de la ligne + pastille d'économie (ajoutée le 11/09/2026) */ .panel__nom{display:flex;align-items:center;flex-wrap:wrap;gap:10px} .pastille{ display:inline-flex;align-items:center;flex:none; padding:3px 10px;border-radius:999px; background:rgba(255,255,255,.09); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); font-size:11.5px;font-weight:550;line-height:1.2;color:#FFFFFF;white-space:nowrap; } .panel__row .price{font-size:18px;font-weight:700;letter-spacing:-0.02em;color:#FFFFFF;white-space:nowrap} /* ---------- Contenu réseaux sociaux : en cartes (« H », 11/09/2026) ---------- */ .soc-groupe{display:flex;flex-direction:column;gap:14px} .soc-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px} .soc-carte{ display:flex;flex-direction:column;gap:14px;padding:24px 24px 26px; border-radius:22px;background:var(--surface-page); box-shadow:inset 0 0 0 1px var(--border-subtle); /* même réaction que les autres cartes du site */ transition:box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out); } @media (hover:hover){ .soc-carte:hover{transform:translateY(-6px);background:#131211;box-shadow:inset 0 0 0 1.5px var(--violet)} } .soc-carte:active{transform:translateY(-3px) scale(.99);background:#131211;box-shadow:inset 0 0 0 1.5px var(--violet)} @media (prefers-reduced-motion:reduce){ .soc-carte,.soc-carte:hover,.soc-carte:active{transition:box-shadow var(--duration-base) var(--ease-out);transform:none} } .soc-carte__entete{display:flex;align-items:center;flex-wrap:wrap;gap:10px} .soc-carte__titre{font-size:19px;font-weight:700;letter-spacing:-0.01em;color:#FFFFFF} .soc-carte__prix{font-size:32px;font-weight:700;letter-spacing:-0.02em;line-height:1;color:#FFFFFF} .soc-carte__detail{font-size:13.5px;line-height:1.5;color:var(--gray-500)} /* Bouton « + » en bas à droite : il ouvre une fenêtre par-dessus (11/09/2026) */ .soc-carte--pliable{position:relative;padding-bottom:30px} .soc-carte--pliable .soc-carte__detail{padding-right:44px} .soc-plus{ position:absolute;right:22px;bottom:22px; display:inline-flex;align-items:center;justify-content:center; width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;padding:0; background:#FFFFFF;color:var(--surface-page); transition:transform var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out); } .soc-plus:hover{background:var(--ink-700);transform:scale(1.08)} /* ---------- La fenêtre ---------- */ .fenetre{ width:min(980px,calc(100% - 32px));max-height:calc(100dvh - 48px); padding:0;border:none;border-radius:28px;overflow:visible; background:var(--surface-page);color:var(--gray-600); box-shadow:inset 0 0 0 1px var(--border-subtle),0 30px 80px rgba(0,0,0,.6); } /* Fenêtre entourée de violet (demandé le 11/09/2026) */ .fenetre--violet{ box-shadow:inset 0 0 0 1.5px var(--violet),0 30px 80px rgba(0,0,0,.6); } .fenetre::backdrop{ background:rgba(6,5,5,.72); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } .fenetre[open]{animation:rj-fenetre 320ms var(--ease-out)} .fenetre[open]::backdrop{animation:rj-voile 320ms var(--ease-out)} @keyframes rj-fenetre{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}} @keyframes rj-voile{from{opacity:0}to{opacity:1}} .fenetre__corps{ display:flex;flex-direction:column;gap:26px; padding:clamp(26px,3vw,40px);max-height:calc(100dvh - 48px);overflow-y:auto; } .fenetre__fermer{ position:absolute;top:18px;right:18px; display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;padding:0; background:rgba(255,255,255,.09);color:#FFFFFF; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); transition:background var(--duration-base) var(--ease-out); } .fenetre__fermer:hover{background:rgba(255,255,255,.18)} .fenetre__entete{display:flex;flex-direction:column;gap:10px;padding-right:44px} .fenetre__titre{font-size:26px;font-weight:700;letter-spacing:-0.02em;line-height:1.1;color:#FFFFFF;margin:0} .fenetre__prix{display:flex;align-items:center;flex-wrap:wrap;gap:10px} .fenetre__montant{font-size:34px;font-weight:700;letter-spacing:-0.02em;line-height:1;color:#FFFFFF} .fenetre__detail{margin:0;font-size:14px;line-height:1.5;color:var(--gray-500)} .fenetre__liste{ list-style:none;margin:0;padding:18px 0 0;display:flex;flex-direction:column;gap:11px; border-top:1px solid var(--border-subtle); } .fenetre__liste li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--gray-600)} .fenetre__liste svg{flex:none;margin-top:3px;color:#FFFFFF} /* Les formules côte à côte dans la fenêtre */ .fenetre__grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px} .fenetre__formule{ display:flex;flex-direction:column;gap:14px;padding:24px; border-radius:20px;background:var(--surface-card); box-shadow:inset 0 0 0 1px var(--border-subtle); } .fenetre__formule-entete{display:flex;align-items:center;flex-wrap:wrap;gap:10px} .fenetre__formule-nom{font-size:18px;font-weight:700;letter-spacing:-0.01em;color:#FFFFFF} .fenetre__formule-prix{font-size:30px;font-weight:700;letter-spacing:-0.02em;line-height:1;color:#FFFFFF} .fenetre__formule .fenetre__liste{padding-top:14px;gap:10px} .fenetre__formule .fenetre__liste li{font-size:14px} .fenetre__pied{margin:0;font-size:13px;line-height:1.5;color:var(--gray-400)} @media (prefers-reduced-motion:reduce){ .soc-plus{transition:none} .fenetre[open],.fenetre[open]::backdrop{animation:none} } .alacarte{max-width:900px;margin:0 auto;width:100%} .alacarte .panel__row{padding:20px 28px} .alacarte__name{display:flex;flex-direction:column;gap:2px;min-width:0} .alacarte__name b{font-size:16px;font-weight:550;color:#FFFFFF} .alacarte__name span{font-size:14px;color:var(--gray-500)} .alacarte .price{font-size:20px} /* ---------- Conditions ---------- */ .conditions{display:flex;flex-direction:column;min-width:0;width:100%;max-width:900px;margin:0 auto} .condition{display:grid;grid-template-columns:minmax(120px,160px) minmax(0,1fr);gap:8px 24px;padding:16px 0;border-top:1px solid var(--border-subtle)} .condition__label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-500);font-weight:550;padding-top:3px} .condition__text{font-size:15px;line-height:1.6;color:var(--gray-600)} /* ---------- Sur mesure ---------- */ .custom{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:40px;align-items:center; background:var(--surface-page);border-radius:32px;padding:clamp(32px,4vw,56px); box-shadow:inset 0 0 0 1px var(--border-subtle); } .custom__col{display:flex;flex-direction:column;gap:16px} .custom__col h3{font-size:clamp(28px,3vw,40px);font-weight:850;letter-spacing:-0.03em;line-height:1.02;color:#FFFFFF;text-wrap:pretty;margin:0} .custom__col p{margin:0;font-size:17px;line-height:1.6;color:var(--gray-600);max-width:520px;text-wrap:pretty} .custom__list{display:flex;flex-direction:column;gap:14px} .custom__list div{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--gray-600)} .custom__list svg{flex:none;margin-top:3px;color:#FFFFFF} /* ---------- Portfolio ---------- */ .portfolio{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:48px} .portfolio__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px} .portfolio__head > div{display:flex;flex-direction:column;gap:16px;max-width:560px} .portfolio__more{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:550;color:#FFFFFF} /* Mosaïque : les photos se calent les unes sous les autres dans leur colonne, sans laisser de trou même quand les formats sont mélangés. */ .portfolio__grid{columns:2;column-gap:32px} .portfolio__item{break-inside:avoid;margin-bottom:32px} @media (max-width:760px){ .portfolio__grid{columns:1} } .portfolio__item{display:flex;flex-direction:column;gap:12px;break-inside:avoid;margin-bottom:32px} .portfolio__media{aspect-ratio:3/2;border-radius:28px;overflow:hidden;background:var(--surface-card);box-shadow:inset 0 0 0 1px var(--border-subtle);display:flex;align-items:center;justify-content:center} .portfolio__media img{width:100%;height:100%;object-fit:cover} /* Photo verticale. Le rapport 0.691 (au lieu de 2/3 = 0.667) recadre l'image de 3,5 % pour que « Vue aérienne » tombe exactement en face de « Salon urbain » dans la mosaïque. */ .portfolio__media--vertical{aspect-ratio:0.691} .portfolio__media .placeholder{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;color:var(--gray-400);letter-spacing:.04em;padding:16px;text-align:center} .portfolio__caption{display:flex;justify-content:space-between;font-size:14px;gap:16px} .portfolio__caption b{color:#FFFFFF;font-weight:550} .portfolio__caption span{color:var(--gray-500)} /* ---------- Processus (refonte du 11/09/2026, d'après sa maquette) ---------- */ .proc{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(40px,5vw,64px)} .proc__entete{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:clamp(24px,4vw,64px);align-items:center; } .proc__titre-bloc{display:flex;flex-direction:column;gap:18px} .proc__titre{ margin:0;font-size:clamp(36px,4.4vw,56px);font-weight:400; letter-spacing:-0.02em;line-height:1.12;color:#FFFFFF;text-wrap:balance; max-width:11ch; } .proc__intro{ margin:0;font-size:16px;line-height:1.65;color:var(--gray-600); max-width:380px;justify-self:end; } .proc__grille{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:clamp(32px,4vw,56px); border-top:1px solid var(--border-subtle);padding-top:clamp(32px,4vw,48px); } .proc__etape{display:flex;flex-direction:column;gap:16px;align-items:flex-start} .proc__num{ font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:var(--gray-500);font-weight:500; } .proc__duree{ margin:0;font-size:clamp(30px,2.8vw,36px);font-weight:400; letter-spacing:-0.02em;line-height:1.1;color:#FFFFFF; } .proc__texte{margin:0;font-size:16px;line-height:1.65;color:var(--gray-600);text-wrap:pretty} .proc__bouton{ display:inline-flex;align-items:center;gap:12px; background:none;border:none;padding:0;margin-top:2px;cursor:pointer; font-family:inherit;font-size:12px;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--gray-600); transition:color var(--duration-base) var(--ease-out); } .proc__bouton:hover{color:#FFFFFF} .proc__signe{ display:inline-flex;align-items:center;justify-content:center;flex:none; width:30px;height:30px;border-radius:7px; box-shadow:inset 0 0 0 1px var(--border-strong); color:#FFFFFF; transition:box-shadow var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out); } .proc__bouton:hover .proc__signe{box-shadow:inset 0 0 0 1px var(--violet)} .proc__liste{ list-style:none;margin:0;padding:0;width:100%; display:flex;flex-direction:column; animation:rj-faq-in var(--duration-base) var(--ease-out); } .proc__liste[hidden]{display:none} .proc__liste li{ padding:15px 0;border-top:1px solid var(--border-subtle); font-size:15px;line-height:1.5;color:var(--gray-500);text-wrap:pretty; } /* Les 3 colonnes partagent les mêmes rangées : les boutons « Détails » se retrouvent sur la même ligne même si les textes n'ont pas la même longueur. (Uniquement quand il y a plusieurs colonnes ; en dessous, chaque étape s'empile.) */ @media (min-width:760px){ @supports (grid-template-rows: subgrid){ .proc__grille{grid-template-rows:auto auto auto auto auto;row-gap:16px} .proc__etape{ display:grid;grid-row:span 5;grid-template-rows:subgrid; gap:16px;align-content:start; } .proc__bouton{justify-self:start;align-self:start} .proc__duree,.proc__num{align-self:start} .proc__texte{align-self:start} } } @media (prefers-reduced-motion:reduce){ .proc__liste{animation:none} } /* ---------- FAQ ---------- */ .faq{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:48px;align-items:center} .faq__head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;max-width:720px} .faq__head p{max-width:380px} .faq__list{display:flex;flex-direction:column;gap:12px;min-width:0;width:100%;max-width:900px} .faq-item{ border-radius:24px;background:var(--surface-page); box-shadow:inset 0 0 0 1px var(--border-subtle);overflow:hidden; transition:box-shadow var(--duration-base) var(--ease-out); } .faq-item:hover{box-shadow:inset 0 0 0 1px var(--border-hover)} .faq-item__q{ display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%; padding:24px 28px;background:none;border:none;cursor:pointer; font-family:inherit;font-size:17px;font-weight:550;color:#FFFFFF;text-align:left; } .faq-item__plus{ flex:none;width:36px;height:36px;border-radius:50%;background:#FFFFFF;color:#0C0B0A; display:flex;align-items:center;justify-content:center; transition:transform var(--duration-base) var(--ease-out); } .faq-item.is-open .faq-item__plus{transform:rotate(45deg)} .faq-item__a{padding:0 28px 24px;margin:0;color:var(--gray-600);font-size:15px;line-height:1.6;animation:rj-faq-in var(--duration-base) var(--ease-out)} .faq-item__a[hidden]{display:none} /* ---------- Carte claire « Appel vidéo » ---------- */ .callcard{ display:flex;flex-direction:column;gap:20px;border-radius:32px; background:var(--surface-inverse);padding:clamp(32px,4vw,40px);color:#57534E; } .callcard .eyebrow{color:var(--gray-400)} .callcard h3{font-size:28px;font-weight:700;letter-spacing:-0.02em;line-height:1.1;color:#0C0B0A;margin:0} .callcard p{margin:0;font-size:15px;line-height:1.6} .callcard__btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; height:52px;padding:0 24px;border-radius:999px; background:#0C0B0A;color:#FFFFFF;font-size:15px;font-weight:550; transition:background var(--duration-base) var(--ease-out); } .callcard__btn:hover{background:var(--ink-800);color:#FFFFFF} .callsection{padding:0 24px clamp(72px,9vw,120px)} .callsection .callcard{box-sizing:content-box;max-width:640px;margin:0 auto} /* ---------- Footer ---------- */ footer{font-size:14px;color:var(--gray-500)} .footer__inner{box-sizing:content-box;max-width:1200px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;gap:40px} .footer__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px} .footer__brand{font-weight:850;font-size:17px;letter-spacing:-0.03em;color:#FFFFFF} .footer__nav{display:flex;flex-wrap:wrap;gap:24px} .footer__nav a{color:var(--gray-500);transition:color var(--duration-base) var(--ease-out)} .footer__nav a:hover{color:#FFFFFF} .footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:24px;padding:40px 0 48px;border-top:1px solid var(--border-subtle)} .footer__cell{display:flex;flex-direction:column;gap:10px} .footer__cell span.label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-500)} .footer__cell a,.footer__cell span.value{font-size:17px;color:#FFFFFF;width:fit-content} .footer__cell a{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--border-hover);transition:color var(--duration-base) var(--ease-out)} .footer__cell a:hover{color:var(--gray-500)} .footer__bar{border-top:1px solid var(--border-subtle);padding:28px 24px;text-align:center;font-size:14px;color:var(--gray-500)} /* ---------- Page Contact ---------- */ .contact__head{ box-sizing:content-box; display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px; max-width:1200px;margin:0 auto;padding:clamp(140px,18vw,200px) 24px clamp(48px,6vw,72px); } .contact__head h1{font-size:clamp(44px,7vw,88px);letter-spacing:-0.035em;line-height:1;max-width:900px} .contact__head p{margin:0;font-size:17px;line-height:1.6;max-width:480px;text-wrap:pretty;color:var(--gray-600)} .contact__grid.cascade{--retard:280ms} .contact__grid{ box-sizing:content-box; max-width:1200px;margin:0 auto;display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:clamp(40px,6vw,80px);padding:0 24px clamp(72px,9vw,120px);align-items:start; } .form{display:flex;flex-direction:column;gap:36px;min-width:0} .form__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:36px 40px} .field{display:flex;flex-direction:column;gap:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-500)} .field input,.field select,.field textarea{ height:44px;padding:0;border:none;border-bottom:1px solid var(--border-strong); background:transparent;font-size:18px;color:#FFFFFF;outline:none;width:100%; letter-spacing:0;text-transform:none;border-radius:0; transition:border-color var(--duration-base) var(--ease-out); } .field select{appearance:none;-webkit-appearance:none;cursor:pointer} .field select option{color:#0C0B0A} .field textarea{height:auto;padding:12px 0;resize:vertical;line-height:1.5} .field input:focus,.field select:focus,.field textarea:focus{border-color:#FFFFFF} .form__foot{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:8px;flex-wrap:wrap} .form__foot span{font-size:13px;color:var(--gray-400)} .contact__aside{display:flex;flex-direction:column;gap:24px} .infos{display:flex;flex-direction:column;border-radius:32px;box-shadow:inset 0 0 0 1px var(--border-subtle);padding:8px 32px} .infos__row{display:flex;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid var(--border-subtle);font-size:15px} .infos__row:last-child{border-bottom:none} .infos__row span:first-child{color:var(--gray-500)} .infos__row a,.infos__row span:last-child{color:#FFFFFF} .sent{display:flex;flex-direction:column;gap:12px;min-width:0} .sent h3{font-size:24px;font-weight:850;letter-spacing:-0.02em;color:#FFFFFF;margin:0} .sent p{margin:0;font-size:15px;line-height:1.6;color:var(--gray-600)} .form__error{font-size:14px;color:#E7A5A5;margin:0} /* ---------- Repère de version ---------- */ .version{position:fixed;bottom:8px;right:10px;font-size:10px;color:#3F3B37;z-index:5;letter-spacing:.06em;pointer-events:none}