/* Theme Name: Atypik Theme URI: https://ville-renouvelee.fr Author: Odiens Description: Thème WordPress sur-mesure pour le programme immobilier Atypik (Quartier de l'Union, Roubaix). Header, homepage et footer balisés, lots gérés en CPT + ACF. Version: 1.10.32 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 7.4 License: GPL-2.0-or-later Text Domain: atypik */ :root{ --turquoise:#169499; --vert1:#97b360; --vert2:#6e8f30; --violet1:#8868af; --violet2:#603195; --orange1:#f98653; --orange2:#e36630; --blanc:#fff; --gris-clair:#f0f0f0; --gris-fonce:#d1d1d1; --noir:#434b5c; --rouge:#c71521; --l-union:#cb543e; --content:1500px; /* largeur du CONTENU : toutes les sections sont plafonnées ici et centrées (margin auto) */ --gut:250px; /* gouttière contenu (desktop) */ --gut-lg:100px;/* gouttière large */ } *{margin:0;padding:0;box-sizing:border-box} html{overflow-x:hidden} body{font-family:'Roboto',sans-serif;color:var(--noir);background:#fff;-webkit-font-smoothing:antialiased;overflow-y:auto;min-height:100%} /* MODÈLE DE LARGEUR : - .page (le « body ») n'a PLUS de max-width → pleine largeur, fond blanc, aucun cadre ni bande grise ; - les VISUELS pleine largeur (bandeaux de couleur & photos hero) ont width:100% → ils remplissent tout l'écran ; - le CONTENU est plafonné à --content (1500) et CENTRÉ (margin auto), via les règles de chaque section. html{overflow-x:hidden} reste le garde-fou anti-scroll latéral. */ .page{width:100%;margin:0 auto;background:#fff;position:relative} /* Le contenu À L'INTÉRIEUR des bandeaux pleine largeur (recap, programme, CTA, colonnes) reste plafonné et centré. */ .recap-inner{max-width:var(--content);margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px} .pr-inner,.cta-box,.atouts-cols,.acheter-cols,.chiffres-row{max-width:var(--content);margin-left:auto;margin-right:auto} h1,h2,h3{font-family:'Roboto Slab',serif;font-weight:700;line-height:1.12} img{display:block;max-width:100%} a{text-decoration:none;color:inherit} .pad250{width:100%;max-width:var(--content);margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px} .pad100{padding-left:var(--gut-lg);padding-right:var(--gut-lg);width:100%} .btn{display:inline-flex;align-items:center;justify-content:center;padding:7px 20px;border-radius:50px; font-weight:700;font-size:15px;cursor:pointer;border:none;line-height:normal;white-space:nowrap; transition:transform .15s,box-shadow .15s,filter .15s} .btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.12);filter:brightness(1.04)} .btn-turq{background:var(--turquoise);color:#fff} .btn-blanc{background:#fff;color:var(--turquoise)} /* HEADER */ /* En-tête intelligent (recette #50, étendu à TOUTES les pages — recette #125) : position:fixed (et non sticky) car un ancêtre en overflow-x:hidden casse position:sticky → le header ne réapparaissait qu'en haut de page. En fixed, le translateY (masquage au scroll bas / réapparition au scroll haut) fonctionne partout. Sa hauteur est compensée par un padding-top sur .page, posé en JS (--atypik-header-h) pour rester exact en responsive. */ .site-header{position:fixed;top:0;left:0;right:0;z-index:60;background:#fff;padding-bottom:20px;display:flex;flex-direction:column;gap:20px;align-items:center;transition:transform .3s ease} /* body > .page : cible le conteneur, pas le (body_class() ajoute « page » aux pages WP → éviterait un double décalage). */ body > .page{padding-top:var(--atypik-header-h,133px)} /* Sous la barre d'admin WordPress (utilisateurs connectés) : cale le header fixed à 32px (46px mobile). */ .admin-bar .site-header{top:32px} @media(max-width:782px){.admin-bar .site-header{top:46px}} .site-header--hidden{transform:translateY(-100%)} /* Ancres (#faq-…, etc.) : dégager la hauteur réelle du header fixe pour ne pas atterrir dessous (recette #125). */ html{scroll-padding-top:calc(var(--atypik-header-h,133px) + 12px)} /* Repli mobile : avant l'exécution du JS (ou sans JS), le header est bien plus haut que 133px → réserver ~200px. */ @media(max-width:600px){body > .page{padding-top:var(--atypik-header-h,200px)}} .topbar{background:var(--turquoise);display:flex;gap:20px;align-items:center;justify-content:center;padding:10px 16px;width:100%;flex-wrap:wrap} .topbar p{color:var(--gris-clair);font-weight:700;font-size:16px} .topbar .btn{background:#fff;color:var(--turquoise)} .nav{display:flex;gap:60px;align-items:center} .nav .logo{width:129px;height:41px} .menu{display:flex;gap:60px;align-items:center;list-style:none} .menu a{font-family:'Roboto Slab',serif;font-weight:700;font-size:16px;color:var(--vert2);text-transform:uppercase;transition:color .15s} .menu a:hover{color:var(--vert1)} .menu .pill a,.menu a.pill{background:var(--vert2);color:#fff;padding:8px 20px;border-radius:20px;display:inline-block} .menu .pill a:hover,.menu a.pill:hover{color:#fff;filter:brightness(.92)} .nav-toggle{display:none;background:none;border:0;cursor:pointer;font-size:26px;color:var(--vert2)} .body{display:flex;flex-direction:column;align-items:center;gap:0;padding-bottom:0} /* HERO + badge */ .hero{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;padding-bottom:66px} .hero-photo{width:100%;height:553px;overflow:hidden} .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 55%} .hero-cta{position:relative;margin-top:-56px;width:852px;max-width:calc(100% - 32px);height:113px;background:#fff;border-radius:60px; box-shadow:0 14px 40px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center} .badge{width:803px;max-width:calc(100% - 24px);height:75px;background:var(--turquoise);border-radius:74.5px;display:flex;align-items:center; color:#fff;padding:0 14px 0 28px;gap:24px} .badge .b-left{display:flex;flex-direction:column;align-items:flex-end;text-align:right;flex-shrink:0} .badge .b-left .l1{font-family:'Roboto Slab',serif;font-weight:500;font-size:16px;line-height:1.1} .badge .b-left .l2{font-family:'Roboto Slab',serif;font-weight:700;font-size:30px;line-height:1.05} .badge .divider{width:1px;align-self:stretch;background:#fff;opacity:.9;margin:10px 0;flex-shrink:0} .badge .b-mid{font-family:'Roboto Slab',serif;font-weight:700;font-size:24px;line-height:24px;flex:1} .badge .b-btn{background:#fff;color:var(--turquoise);font-weight:700;font-size:14px;text-align:center; border-radius:50px;padding:9px 16px;width:150px;line-height:1.15;flex-shrink:0;cursor:pointer} /* BLOCS COLORES */ .blocs{display:flex;flex-direction:column;gap:80px;width:100%;max-width:var(--content);margin-left:auto;margin-right:auto} /* Recette #103-105 : contenus longs → blocs home en hauteur auto (sinon texte coupé). padding-top conservé (~180px) pour que le texte coule SOUS le portrait, sans chevaucher la citation. */ .blocs .bloc{height:auto;min-height:494px} /* align-items:center (base) → photo centrée verticalement dans le bloc */ .blocs .bloc .panel{overflow:visible;justify-content:flex-start;padding-top:180px;padding-bottom:60px} @media(max-width:980px){ .blocs .bloc{align-items:stretch;min-height:0} .blocs .bloc .panel{padding-top:40px} /* mobile : le portrait est au-dessus (order:-1), pas de dégagement à réserver */ } .bloc{display:flex;align-items:center;height:494px;padding:0 60px;position:relative} .bloc .photo{width:620px;flex-shrink:0;z-index:2;position:relative;display:flex;flex-direction:column;align-items:flex-start} .bloc .photo .ph{width:100%;height:422px;overflow:hidden} .bloc .photo .ph img{width:100%;height:100%;object-fit:cover} /* #145 — cadrage ancré en bas : ne pas rogner le bas des photos (personnes / niveau rue) des blocs de l'accueil. */ .blocs .bloc .photo .ph img{object-position:center bottom} .bloc .photo .tab{width:156px;height:72px;background:#fff} .bloc .panel{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:10px; padding:180px 56px 60px;color:#fff;position:relative;overflow:hidden} .bloc .panel .wave{position:absolute;width:299px;height:266px;pointer-events:none} .bloc-vert .panel .wave,.bloc-orange .panel .wave{right:-46px;bottom:-8px;left:auto;top:auto} .bloc-violet .panel .wave{left:-37px;bottom:-8px;right:auto;top:auto} .bloc .panel .inner{display:flex;flex-direction:column;gap:20px;position:relative;z-index:2;width:100%} .bloc.left .photo{margin-right:-40px} .bloc.left .panel .inner{align-items:flex-start;text-align:left} /* Recette #155 : padding EXTÉRIEUR du panneau réduit (texte plus large, plus « paysage »), en miroir selon l'orientation — bloc « left » = bord droit, bloc « right » = bord gauche. */ .bloc.left .panel{padding-right:50px} .bloc.right{flex-direction:row-reverse} .bloc.right .photo{margin-left:-40px;align-items:flex-end} .bloc.right .panel{margin-right:-40px;padding-right:120px;padding-left:50px} .bloc.right .panel .inner{align-items:flex-end;text-align:right} .bloc .quote{font-family:'Roboto Condensed',sans-serif;font-style:italic;font-weight:300;line-height:1.25} .bloc .quote b{font-weight:700} .bloc .txt{font-size:16px;line-height:24px} .bloc .txt b{font-weight:700} .bloc-vert .panel{background:var(--vert1)} .bloc-vert .quote{font-size:24px} .bloc-violet .panel{background:var(--violet1)} .bloc-violet .quote{font-size:22px} .bloc-orange .panel{background:var(--orange1)} .bloc-orange .quote{font-size:22px} .round-pin{position:absolute;z-index:3;width:148px;height:148px;border-radius:50%;background:var(--gris-fonce); transform:rotate(-4.8deg);box-shadow:0 8px 24px rgba(0,0,0,.18);border:3px solid #fff;overflow:hidden} .round-pin img{width:100%;height:100%;object-fit:cover} .bloc-vert .round-pin{left:548px;top:-14px} .bloc-violet .round-pin{right:548px;top:-14px} .bloc-violet .round-pin.big{width:200px;height:200px;right:600px;top:10px} .bloc-orange .round-pin{left:548px;top:-40px;width:180px;height:180px} /* BIENS DISPOS */ .biens{width:100%;background:linear-gradient(to bottom,var(--gris-clair),#fff);display:flex;flex-direction:column;align-items:center;gap:37px;padding:80px 0} .biens .head{display:flex;flex-direction:column;align-items:center;gap:20px} .biens .head img{width:129px;height:41px} .biens .head h2{font-size:28px;color:var(--vert2);text-align:center} .lots{display:flex;flex-direction:column;gap:20px;align-items:center} .lots-block{width:100%;display:flex;flex-direction:column;gap:10px} .hr{height:1px;background:var(--gris-fonce);width:100%;border:0;opacity:.7} .type-band{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 20px;width:940px;max-width:100%;margin:0 auto;cursor:pointer} .type-band .left{display:flex;gap:20px;align-items:baseline;flex-wrap:wrap} .type-band .ttl{font-family:'Roboto Slab',serif;font-weight:700;color:var(--vert2)} .type-band .ttl .s{font-size:18px}.type-band .ttl .m{font-size:24px} .type-band .price{font-size:16px;color:var(--vert1)} .type-band .right{display:flex;gap:10px;align-items:center;color:var(--vert2);font-size:16px} .chev{width:18px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--vert2);font-size:14px;transition:transform .2s} .type-band.open .chev{transform:rotate(180deg)} .lots-list{display:flex;flex-direction:column;gap:10px;width:100%} .lot-card{background:#fff;border:1px solid var(--gris-clair);border-radius:10px;padding:20px;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%} .lot-card .info{display:flex;gap:20px;align-items:center;flex-wrap:wrap} .lot-card .prix{width:150px;color:var(--turquoise)} .lot-card .prix b{font-weight:700;font-size:24px;display:block;line-height:24px} .lot-card .prix span{font-size:16px} .lot-card .desc{width:338px;max-width:100%;color:var(--noir);font-size:16px;line-height:24px} .vue3d{width:100%} .vue3d img{width:100%;mix-blend-mode:darken} .projection{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center} .projection .titre{color:var(--vert2)} .projection .titre .sub{font-family:'Roboto Slab',serif;font-weight:300;font-size:24px} .projection .titre h2{font-size:24px} .btn-3d{background:var(--turquoise);color:#fff;border-radius:15px;padding:0 36px;height:53px;font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:14px} .btn-3d .play{width:30px;height:27px;display:flex;align-items:center} /* ETRE RAPPELE */ .rappele{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;padding:36px 20px} .rappele img{width:239px;height:77px} .rappele h2{font-size:24px;color:var(--vert2);max-width:780px} /* BROCHURE */ .brochure-wrap{display:flex;flex-direction:column;align-items:center;width:100%;padding-bottom:40px} .brochure-photo{width:100%;height:484px;overflow:hidden;margin-bottom:-100px} .brochure-photo img{width:100%;height:100%;object-fit:cover;object-position:center 50%} .brochure-cta{width:100%;max-width:var(--content);margin:0 auto;padding:0 24px;position:relative;z-index:2} .brochure{background:var(--turquoise);display:flex;gap:50px;align-items:center;justify-content:center;padding:22px 50px;color:#fff;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto} .brochure .left{display:flex;flex-direction:column;align-items:flex-end;gap:20px;width:378px;max-width:100%;text-align:right;padding:12px 0} .brochure .left h3{font-size:24px;line-height:27px} .brochure .img{width:300px;height:172px;flex-shrink:0;align-self:center} .brochure .img img{width:100%;height:100%;object-fit:contain} /* QUARTIER + PLAN */ .quartier{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:var(--content);margin:0 auto} .quartier .titre{text-align:center;color:var(--vert2)} .quartier .titre .sub{font-family:'Roboto Slab',serif;font-weight:300;font-size:24px} .quartier .titre h2{font-size:24px} .quartier .map{width:100%;padding:0 40px} .quartier .map img{width:100%} /* CONSEILLERS */ .conseillers{background:var(--vert1);display:flex;gap:49px;align-items:center;min-height:214px;padding:30px 250px;width:100%} .conseillers .photo{width:214px;height:214px;border-radius:50%;overflow:hidden;flex-shrink:0;background:#d9d9d9} .conseillers .photo img{width:100%;height:100%;object-fit:cover} .conseillers .content{display:flex;flex-direction:column;gap:16px;max-width:662px} .conseillers h3{font-size:22px;line-height:27px;color:var(--gris-clair)} .conseillers p{font-size:16px;line-height:24px;color:#fff} .conseillers p b{font-weight:700} /* FOOTER */ .site-footer{background:#fff;padding:40px 24px;display:flex;flex-direction:column;gap:24px;width:100%;max-width:var(--content);margin:0 auto} .site-footer .l1{display:flex;align-items:flex-end;justify-content:space-between;gap:32px 48px;padding-top:24px;border-top:1px solid var(--gris-fonce);flex-wrap:wrap} .site-footer .logos{display:flex;align-items:center;gap:44px;flex-wrap:wrap} .site-footer .logos .atypik{height:58px;width:auto;flex-shrink:0} .site-footer .logos-partners{display:flex;flex-direction:column;gap:16px} .site-footer .partners-top{display:flex;align-items:center;gap:24px} .site-footer .logos .vr{height:38px;width:auto;display:block} .site-footer .copromo{display:flex;align-items:center;gap:10px} .site-footer .copromo .lbl{color:var(--rouge);font-size:11px;text-align:right;line-height:1.15;width:98px} .site-footer .copromo .lmh{height:38px;width:auto;display:block} .site-footer .logos-team{display:flex;align-items:center;gap:30px;flex-wrap:wrap} .site-footer .logos-team img{height:34px;width:auto;object-fit:contain;display:block} .site-footer .actions{display:flex;flex-direction:column;align-items:flex-end;gap:16px;flex-shrink:0} .site-footer .actions .btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end} .site-footer .pagenum{font-family:'Roboto Slab',serif;font-weight:700;font-size:28px;color:var(--vert2);text-decoration:none;line-height:1} .site-footer .legal{display:flex;flex-direction:column;gap:14px;font-size:13px} .site-footer .legal .l{color:var(--vert2);line-height:1.5} .site-footer .legal .small{color:var(--gris-fonce);line-height:1.5} .site-footer .legal .small p{margin-bottom:0} /* Footer responsive — colonne centrée, logos harmonisés (redesign 2026-07-21). */ @media (max-width:980px){ .site-footer{text-align:center;gap:22px} .site-footer .l1{flex-direction:column;align-items:center;gap:22px} .site-footer .logos{flex-direction:column;align-items:center;gap:18px} .site-footer .logos-partners{align-items:center;gap:16px} .site-footer .partners-top{justify-content:center;flex-wrap:wrap;gap:12px 20px} .site-footer .copromo .lbl{text-align:center;width:auto} .site-footer .logos-team{justify-content:center;gap:20px 26px} .site-footer .actions{align-items:center;gap:12px} .site-footer .actions .btns{justify-content:center} .site-footer .legal{align-items:center;gap:12px} } /* ============ RESPONSIVE ============ */ @media (max-width:1200px){ :root{--gut:80px;--gut-lg:60px} .bloc{padding:0 60px} .conseillers{padding:30px 60px} .site-footer{padding:40px 60px} } @media (max-width:980px){ /* nav burger */ .nav{width:100%;justify-content:space-between;padding:0 24px} .nav-toggle{display:block} .menu{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;gap:24px; padding:24px;box-shadow:0 12px 24px rgba(0,0,0,.1);display:none} .menu.open{display:flex} /* badge hero -> empilé */ .hero-cta{height:auto;border-radius:32px;padding:14px} .badge{height:auto;flex-direction:column;align-items:stretch;text-align:center;gap:12px;border-radius:24px;padding:18px 20px} .badge .b-left{align-items:center;text-align:center} .badge .b-left .l2{font-size:26px} .badge .divider{width:auto;height:1px;margin:0} .badge .b-mid{text-align:center;font-size:20px} .badge .b-btn{width:100%} /* blocs colorés -> empilés */ .bloc,.bloc.right{flex-direction:column;height:auto;padding:0} .bloc .photo,.bloc.right .photo{width:100%;margin:0;align-items:center} .bloc .photo .ph{height:300px} .bloc .photo .tab{display:none} .bloc .panel,.bloc.right .panel{margin:0;padding:40px 32px} .bloc .panel .inner,.bloc.right .panel .inner{align-items:flex-start;text-align:left} .bloc .panel .wave{left:auto;right:10px;top:20px;opacity:.6} .round-pin{display:none} /* biens */ .type-band{width:100%} .lot-card{flex-direction:column;align-items:flex-start} .lot-card .info{flex-direction:column;align-items:flex-start;gap:8px} /* brochure */ .brochure{flex-direction:column;padding:30px} .brochure .left{align-items:center;text-align:center;width:100%} .brochure-photo{height:320px} /* conseillers */ .conseillers{flex-direction:column;text-align:center;height:auto;padding:40px 40px} .conseillers .content{align-items:center} /* footer : voir le bloc consolidé « Footer responsive » plus haut. */ } @media (max-width:600px){ :root{--gut:24px;--gut-lg:24px} .hero-photo{height:340px} .topbar{flex-direction:column} .biens .head h2{font-size:22px} .brochure-cta{padding:0 24px} .quartier .map,.brochure-photo{padding:0 16px} } /* ============================================================ PAGE LE PROGRAMME + composants partagés (flaps, chiffres, FAQ) ============================================================ */ /* Boutons additionnels */ .btn-orange{background:var(--orange2);color:#fff} .btn-arrow .arr{margin-left:8px;font-weight:700} .btn-3d{background:var(--turquoise);color:#fff;border-radius:15px;padding:0 36px;height:53px;font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:14px;cursor:pointer} .btn-3d .play{width:30px;height:27px;display:flex;align-items:center} /* Capsules / flaps */ .flap{display:inline-block;font-family:'Roboto Slab',serif;font-weight:700;color:#fff;padding:5px 10px; transform:rotate(-2deg);background:var(--vert1);line-height:normal} .flap-vert{background:var(--vert1)} .flap-orange{background:var(--orange2);font-size:22px} .flap-vert{font-size:28px} /* Séparateurs verticaux */ .vsep{width:1px;align-self:stretch;background:var(--gris-fonce);flex-shrink:0;min-height:113px} .vsep.tall{min-height:340px} /* PROG HERO */ .prog{display:flex;flex-direction:column;align-items:center;width:100%} .prog-hero{position:relative;width:100%;height:408px;overflow:hidden;display:flex;align-items:center;justify-content:center} .prog-hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .prog-hero .overlay{position:absolute;inset:0;background:rgba(5,57,59,.3)} .prog-hero h1{position:relative;color:#fff;font-size:48px;line-height:50px;text-align:center;max-width:1023px;padding:0 20px} /* Breadcrumb */ .breadcrumb{display:flex;gap:10px;align-items:center;padding-top:10px;padding-bottom:10px;font-size:13px;color:var(--vert2)} .breadcrumb .crumbs a{color:var(--vert2)} .breadcrumb .crumbs a.current{font-weight:700;text-decoration:underline} /* RECAP */ .recap{width:100%;background:var(--turquoise);padding:50px 0;position:relative} .recap-inner{display:flex;gap:30px;align-items:center;justify-content:center} .recap-q{font-family:'Roboto Slab',serif;font-weight:700;font-size:28px;color:#fff;text-align:right;width:343px;flex-shrink:0} .recap .vline{width:1px;align-self:stretch;min-height:226px;background:#fff;flex-shrink:0} .recap-body{flex:1;display:flex;flex-direction:column;gap:10px;color:#fff} .recap-body p{font-size:16px;line-height:24px} .recap-body b{font-weight:700} .recap-body .btn{align-self:flex-start;margin-top:6px} /* CHIFFRES */ .chiffres{display:flex;flex-direction:column;gap:40px;padding-top:100px;padding-bottom:50px} .chiffres-head{display:flex;flex-direction:column;gap:20px;text-align:center} .chiffres-head h2{font-size:28px;color:var(--vert2)} .chiffres-head p{font-size:16px;line-height:24px;color:var(--noir)} .chiffres-head b{font-weight:700} .chiffres-row{display:flex;gap:20px;align-items:flex-start;width:100%} .cle{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0} .cle .num{font-family:'Roboto Slab',serif;font-weight:700;font-size:38px;line-height:33px;color:var(--vert2)} .cle .lbl{font-family:'Roboto Slab',serif;font-weight:700;font-size:28px;line-height:28px;color:var(--vert2)} .cle .sub{font-size:16px;line-height:24px;color:var(--noir)} /* IMAGE + TEXTE (programme, réutilise .bloc) */ .prog-imgtext .panel .inner{gap:10px} .prog-imgtext .surtitre{font-family:'Roboto Slab',serif;font-weight:300;font-size:24px;line-height:normal} .prog-imgtext h3{font-size:28px;line-height:33px;margin-bottom:6px} .prog-imgtext .txt{font-size:16px;line-height:24px} .prog-biens{background:#fff;padding:50px 0 100px} /* ATOUTS (orange, 5 colonnes) */ .atouts{width:100%;display:flex;flex-direction:column;align-items:center} .atouts-photo{width:100%;height:422px;overflow:hidden} .atouts-photo img{width:100%;height:100%;object-fit:cover} .atouts-orange{width:100%;background:var(--orange1);display:flex;flex-direction:column;align-items:center;gap:40px;padding:40px 0 80px;position:relative} .atouts-head{display:flex;flex-direction:column;gap:10px;text-align:center;align-items:center} .atouts-head .surtitre{font-family:'Roboto Slab',serif;font-weight:300;font-size:24px;color:#fff} .atouts-head h2{font-size:28px;color:#fff} .atouts-head .intro{font-size:16px;font-weight:700;line-height:24px;color:var(--noir)} .atouts-cols{display:flex;gap:20px;align-items:flex-start;justify-content:center;padding-bottom:80px} .atout{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px} .atout-titre{display:flex;flex-direction:column;align-items:flex-start;gap:4px} .atout-h{font-family:'Roboto Slab',serif;font-weight:700;font-size:22px;line-height:22px;color:#fff} .atout-txt{font-size:16px;line-height:24px;color:var(--noir)} .prog-brochure{position:absolute;left:0;bottom:-60px;width:100%;padding:0 max(24px,calc((100% - var(--content))/2));z-index:3} /* L'UNION (réintégré pour le programme) */ .union{display:flex;flex-direction:column;align-items:center;gap:20px;padding:40px 0;width:100%} .union .inner{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center} .union .logo{width:218px;height:50px} .union .titre .sub{font-family:'Roboto Slab',serif;font-weight:300;font-size:22px;color:var(--vert2)} .union .titre h2{font-size:24px;color:var(--vert2)} .union p.body-txt{font-size:16px;line-height:24px;text-align:center} .union p.body-txt b{font-weight:700} .carousel{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%} .carousel .arrows{display:flex;gap:6px;justify-content:flex-end;width:100%;padding:0 38px} .carousel .a{width:44px;height:44px;border-radius:50%;background:var(--vert2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer} .carousel .cimg{width:1364px;max-width:calc(100% - 76px);height:394px;border-radius:30px;overflow:hidden} .carousel .cimg img{width:100%;height:100%;object-fit:cover} .carousel .cap{font-size:16px;line-height:24px;text-align:center} /* ACHETER (4 colonnes) */ .acheter{display:flex;flex-direction:column;align-items:center;gap:20px;padding-top:40px;padding-bottom:40px} .acheter-head{display:flex;flex-direction:column;gap:10px;text-align:center} .acheter-head h2{font-size:28px;color:var(--orange2)} .acheter-head p{font-size:16px;line-height:24px;color:var(--noir)} .acheter-cols{display:flex;gap:40px;align-items:flex-start;justify-content:center;width:100%} .acol{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px} .acol h3{font-size:22px;line-height:22px;color:var(--orange2)} .acol p{font-size:16px;line-height:24px;color:var(--noir)} .acheter-note{text-align:center;font-size:16px;line-height:24px;color:var(--noir)} .acheter-note em{font-style:italic} /* CTA Vous souhaitez acheter */ .cta-acheter{padding-top:0;padding-bottom:0;width:100%} .cta-box{background:var(--turquoise);display:flex;gap:40px;align-items:flex-end;justify-content:center;padding:30px 50px;width:100%} .cta-photo{width:150px;height:150px;flex-shrink:0;align-self:center} .cta-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;color:#fff} .cta-content h3{font-size:24px;line-height:normal} .cta-content p{font-size:16px;line-height:24px} .cta-content b{font-weight:700} .cta-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px} /* FAQ */ .faq{width:100%;background:var(--gris-clair);display:flex;flex-direction:column;align-items:center;gap:40px;padding:50px 0} .faq-titre{display:flex;flex-direction:column;align-items:center;gap:2px} .faq-titre .faq-sub{font-family:'Roboto Slab',serif;font-weight:700;font-size:28px;color:var(--vert2);transform:rotate(-2deg)} .faq-list{display:flex;flex-direction:column;gap:30px} .faq-item{display:flex;flex-direction:column;gap:20px;width:100%} .faq-q{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer} .faq-q p{font-family:'Roboto Slab',serif;font-weight:700;font-size:24px;color:var(--vert2)} .faq-chev{display:inline-flex;align-items:center;justify-content:center;width:26px;height:30px;border-radius:5px;color:#fff;font-size:11px;line-height:1;transition:transform .2s;flex-shrink:0} .faq-item.open .faq-chev{transform:rotate(180deg)} .faq-a p{font-size:16px;line-height:24px;color:var(--noir)} /* STYLEGUIDE */ .sg{display:flex;flex-direction:column;gap:50px;padding-top:50px;padding-bottom:80px} .sg-header{display:flex;flex-direction:column;gap:10px;align-items:flex-start} .sg-header h1{font-size:38px;color:var(--vert2)} .sg-section{display:flex;flex-direction:column;gap:20px} .sg-h{font-size:24px;color:var(--vert2);border-bottom:2px solid var(--gris-clair);padding-bottom:8px} .sg-colors{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px} .sg-color{display:flex;flex-direction:column;gap:4px} .sg-color .swatch{height:80px;border-radius:8px} .sg-color .sg-name{font-family:monospace;font-size:13px;color:var(--noir)} .sg-color .sg-hex{font-size:12px;color:var(--gris-fonce)} .sg-type{display:flex;flex-direction:column;gap:14px} .sg-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap} /* ===== Responsive pages programme / styleguide ===== */ @media (max-width:980px){ .prog-hero{height:300px} .prog-hero h1{font-size:30px;line-height:34px} .recap-inner{flex-direction:column;text-align:center} .recap-q{width:auto;text-align:center} .recap .vline{display:none} .recap-body{align-items:center;text-align:center} .recap-body .btn{align-self:center} .chiffres-row,.atouts-cols,.acheter-cols{flex-direction:column;align-items:center;text-align:center} .vsep,.vsep.tall{display:none} .cle,.atout,.acol{align-items:center;text-align:center} .prog-imgtext.bloc,.prog-imgtext.bloc.right{flex-direction:column;height:auto;padding:0} .prog-imgtext .photo{width:100%} .prog-brochure{position:static;padding:30px 24px 0} .atouts-orange{padding-bottom:40px} .cta-box{flex-direction:column;align-items:center;text-align:center} .cta-content{align-items:center} .cta-btns{justify-content:center} .faq-q p{font-size:20px} .faq-titre .faq-sub{font-size:22px} } @media (max-width:600px){ .prog-hero h1{font-size:24px;line-height:28px} .chiffres-head h2,.atouts-head h2,.acheter-head h2{font-size:22px} } /* ============================================================ PAGES FORMULAIRE (Contact / Être rappelé / Plaquette) ============================================================ */ .form-hero{position:relative;width:100%;height:200px;overflow:hidden;display:flex;align-items:center;justify-content:center} .form-hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .form-hero .overlay{position:absolute;inset:0;background:rgba(5,57,59,.3)} .form-hero h1{position:relative;color:#fff;font-size:48px;line-height:50px;text-align:center;max-width:1057px;padding:0 20px} .form-page{width:100%} .form-body{display:flex;flex-direction:column;gap:80px;align-items:center;padding-top:80px;padding-bottom:80px;width:100%} .form-intro{display:flex;flex-direction:column;gap:20px;text-align:center;width:100%} /* #127 — variante « center » (pages Recevoir la plaquette + Être rappelé) : borne la largeur du texte d'intro comme sur les autres pages formulaire (sinon un paragraphe unique s'étire sur toute la largeur). */ .form-intro.center{max-width:820px;margin-left:auto;margin-right:auto} .form-intro .t{font-family:'Roboto Slab',serif;font-weight:700;font-size:28px;color:var(--vert2)} .form-intro .t1{font-family:'Roboto Slab',serif;font-weight:700;font-size:28px;color:var(--vert2)} .form-intro .d{font-size:16px;line-height:24px;color:var(--noir)} .form-intro .d1{font-size:16px;line-height:24px;color:var(--noir)} .form-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:40px;width:100%;align-items:start} .form-grid-contact{gap:40px} .form-col{display:flex;flex-direction:column;gap:40px} .form-head{display:flex;flex-direction:column;gap:20px} .form-head p{font-size:16px;line-height:24px;color:var(--noir)} .form-note{font-size:16px;line-height:24px;color:var(--noir);margin-top:20px} .form-note em{font-style:italic} .form-notice{background:#fff7e6;border:1px solid var(--orange1);color:var(--noir);padding:12px 16px;font-size:14px;line-height:20px;border-radius:6px} /* Formulaire statique (repli) + skin Gravity Forms */ .static-form,.atypik-form-skin .gform_fields{display:flex;flex-direction:column;gap:10px} .static-form .fld,.atypik-form-skin .gfield{display:flex;gap:20px;align-items:center;width:100%} .static-form .fld.top,.atypik-form-skin .gfield--type-textarea{align-items:flex-start} .static-form label,.atypik-form-skin .gfield_label{width:150px;flex-shrink:0;font-family:'Roboto',sans-serif;font-weight:400;font-size:16px;color:var(--noir);margin:0;padding:0} .static-form .consent,.static-form .consent input{width:auto} .static-form input,.static-form select,.static-form textarea, .atypik-form-skin .ginput_container input, .atypik-form-skin .ginput_container select, .atypik-form-skin .ginput_container textarea{flex:1;min-width:0;width:100%;height:50px;border:1px solid var(--noir);padding:10px;font-family:'Roboto',sans-serif;font-size:16px;color:var(--noir);background:#fff;border-radius:0} .atypik-form-skin .ginput_container{flex:1;margin:0} .static-form textarea,.atypik-form-skin .ginput_container textarea{height:auto;min-height:140px;resize:vertical} .static-form select{appearance:auto} .static-form .consent{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:24px;color:var(--noir)} .static-form .consent input{width:16px;height:16px;margin-top:4px;border:2px solid var(--noir)} .static-form .consent u{text-decoration:underline} .static-form .oblig{font-size:16px;color:var(--noir)} .static-form button{margin-top:6px} /* --- Renforcement skin Gravity Forms (priorité sur le thème GF) --- */ .atypik-form-skin .gform_wrapper input[type=text], .atypik-form-skin .gform_wrapper input[type=email], .atypik-form-skin .gform_wrapper input[type=tel], .atypik-form-skin .gform_wrapper input[type=url], .atypik-form-skin .gform_wrapper select, .atypik-form-skin .gform_wrapper textarea{ width:100%!important;height:50px!important;border:1px solid var(--noir)!important;border-radius:0!important; padding:10px!important;font-family:'Roboto',sans-serif!important;font-size:16px!important;color:var(--noir)!important;background-color:#fff!important;box-shadow:none!important} .atypik-form-skin .gform_wrapper textarea{height:auto!important;min-height:140px!important} .atypik-form-skin .gform_wrapper .gfield_label{font-weight:400!important;color:var(--noir)!important} .atypik-form-skin .gform_wrapper .gfield_required{color:var(--noir)!important} .atypik-form-skin .gform_wrapper .gform_footer{margin:6px 0 0!important;padding:0!important} .atypik-form-skin .gform_wrapper .gform_footer input[type=submit], .atypik-form-skin .gform_wrapper .gform_footer button, .atypik-form-skin .gform_wrapper .gform_button, .atypik-form-skin .gform_button{ width:100%!important;background:var(--turquoise)!important;color:#fff!important;border:none!important; border-radius:50px!important;padding:18px 20px!important;font-family:'Roboto',sans-serif!important; font-weight:700!important;font-size:15px!important;line-height:1!important;cursor:pointer!important; text-transform:none!important;transition:filter .15s!important} .atypik-form-skin .gform_wrapper .gform_footer input[type=submit]:hover, .atypik-form-skin .gform_wrapper .gform_button:hover{filter:brightness(1.05)!important} /* Alignement optin (consent) + reCAPTCHA + bouton sur la colonne des champs — retours recette #62/#63/#64. Ces champs ont un label masqué : leur contenu retombe à gauche au lieu de s'aligner sous les inputs. 170px = largeur du label (150px) + gap de la ligne (20px). Remis à 0 en responsive (labels empilés). */ .atypik-form-skin .gfield--type-consent, .atypik-form-skin .gfield--type-captcha{padding-left:170px} .atypik-form-skin .gform_wrapper .gform_footer{padding-left:170px!important} .atypik-form-skin .gform_wrapper.gravity-theme, .atypik-form-skin .gform-theme--framework{ --gf-color-primary:var(--turquoise); --gf-ctrl-btn-bg-color-primary:var(--turquoise); --gf-ctrl-btn-bg-color-hover:var(--turquoise)} /* Encart contact (orange) */ .form-aside{display:flex;flex-direction:column;gap:20px} .contact-card{background:rgba(249,134,83,.2);display:flex;flex-direction:column;gap:24px;padding:40px;width:100%} .cc-titre{display:flex;flex-direction:column;align-items:center;gap:6px} .cc-novacity{font-size:16px;text-align:center;color:var(--noir)} .cc-logo{width:129px;height:41px;margin:0 auto} .contact-card .hr{opacity:.5} .cc-line{display:flex;flex-direction:column;gap:2px} .cc-line b{font-size:16px;color:var(--noir)} .cc-tel{font-family:'Roboto',sans-serif;font-weight:700;font-size:30px;color:var(--orange2)} .cc-mail{display:flex;gap:20px;align-items:center;justify-content:space-between;font-size:16px;color:var(--noir)} .cc-mail b{font-weight:700} .cc-addr{font-size:16px;line-height:24px;color:var(--noir)} .cc-addr b{font-weight:700} .form-aside-img{width:100%;height:auto;object-fit:cover} /* Colonnes image (rappel / plaquette) */ .form-aside.center-img{align-items:center;justify-content:center} .rotated-img{transform:rotate(-3deg);width:100%;box-shadow:0 8px 24px rgba(0,0,0,.15)} .framed-img{transform:rotate(-3deg);border:15px solid var(--vert2);box-shadow:0 8px 24px rgba(0,0,0,.15)} .framed-img img{display:block;width:100%} /* Responsive formulaires */ @media (max-width:980px){ .form-hero{height:160px} .form-hero h1{font-size:30px;line-height:34px} .form-grid,.form-grid-contact,.form-grid-simple{grid-template-columns:1fr;gap:40px} .static-form .fld,.atypik-form-skin .gfield{flex-direction:column;align-items:stretch;gap:6px} .static-form label,.atypik-form-skin .gfield_label{width:auto} /* Labels empilés : on annule l'indentation d'alignement (retours recette #62/#63/#64). */ .atypik-form-skin .gfield--type-consent, .atypik-form-skin .gfield--type-captcha{padding-left:0} .atypik-form-skin .gform_wrapper .gform_footer{padding-left:0!important} .form-aside.center-img{order:-1} } @media (max-width:600px){ .form-hero h1{font-size:24px;line-height:28px} .contact-card{padding:24px} } /* ============================================================ PAGE FAQ (dynamique — CPT FAQ) ============================================================ */ .faqpage{display:flex;flex-direction:column;align-items:center;width:100%} .faq-hero{width:100%;height:200px;background:var(--vert1);display:flex;align-items:center;justify-content:center} .faq-hero h1{color:#fff;font-size:48px;line-height:50px;text-align:center;max-width:1057px;padding:0 20px;white-space:pre-line} /* Sections */ .faq-sections{display:flex;flex-direction:column;gap:0;width:100%} .faq-section{display:flex;flex-direction:column;gap:20px;align-items:center;padding:50px 0;width:100%} .faq-flap-wrap{display:flex;justify-content:center} .faq-flap-wrap .flap{transform:rotate(-2deg);font-size:28px} .faq-list{display:flex;flex-direction:column;gap:30px;width:100%} .faq-item{display:flex;flex-direction:column;gap:20px;width:100%} .faq-q{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer} .faq-q p{font-family:'Roboto Slab',serif;font-weight:700;font-size:24px} .faq-chev{display:inline-flex;align-items:center;justify-content:center;width:26px;height:30px;border-radius:5px;color:#fff;font-size:11px;line-height:1;transition:transform .2s;flex-shrink:0} .faq-item.open .faq-chev{transform:rotate(180deg)} .faq-a{font-size:16px;line-height:24px;color:var(--noir);max-width:none} .faq-a p{margin-bottom:10px} /* Liens de maillage interne dans les réponses FAQ : visibles (couleur d'action + soulignement). */ .faq-a a{color:var(--turquoise);text-decoration:underline;text-underline-offset:2px;font-weight:500} .faq-a a:hover{text-decoration:none;filter:brightness(.9)} /* PAGES GÉNÉRIQUES (mentions légales, politique de confidentialité, page.php) — recette #129 */ .page-simple .ps-hero{background:var(--vert2);padding:56px 24px;text-align:center} .page-simple .ps-hero h1{color:#fff;font-family:'Roboto Slab',serif;font-weight:700;font-size:36px;line-height:1.2;max-width:var(--content);margin:0 auto} .page-simple .ps-body{padding-top:40px;padding-bottom:80px} .page-simple .entry-content{max-width:900px;margin:0 auto;color:var(--noir);font-size:16px;line-height:1.7} .page-simple .entry-content > *:first-child{margin-top:0} .page-simple .entry-content h1{font-family:'Roboto Slab',serif;font-weight:700;color:var(--vert2);font-size:28px;line-height:1.25;margin:40px 0 14px} .page-simple .entry-content h2{font-family:'Roboto Slab',serif;font-weight:700;color:var(--vert2);font-size:24px;line-height:1.25;margin:36px 0 12px} .page-simple .entry-content h3{font-family:'Roboto Slab',serif;font-weight:700;color:var(--vert2);font-size:19px;line-height:1.3;margin:28px 0 10px} .page-simple .entry-content h4{font-weight:700;color:var(--noir);font-size:17px;margin:22px 0 8px} .page-simple .entry-content p{margin:0 0 16px} .page-simple .entry-content ul,.page-simple .entry-content ol{margin:0 0 18px;padding-left:22px} .page-simple .entry-content li{margin-bottom:8px} .page-simple .entry-content li::marker{color:var(--vert2)} .page-simple .entry-content a{color:var(--turquoise);text-decoration:underline;text-underline-offset:2px} .page-simple .entry-content a:hover{text-decoration:none;filter:brightness(.9)} .page-simple .entry-content strong{font-weight:700;color:var(--noir)} .page-simple .entry-content hr{border:0;border-top:1px solid var(--gris-fonce);margin:28px 0} .page-simple .entry-content blockquote{border-left:3px solid var(--vert1);margin:0 0 16px;padding:4px 0 4px 18px;color:#5a5a5a} .page-simple .entry-content img{max-width:100%;height:auto} .page-simple .entry-content table{width:100%;border-collapse:collapse;margin:0 0 18px} .page-simple .entry-content th,.page-simple .entry-content td{border:1px solid var(--gris-fonce);padding:8px 12px;text-align:left;vertical-align:top} .page-simple .entry-content th{background:#f7f7f7} @media (max-width:600px){ .page-simple .ps-hero{padding:40px 24px} .page-simple .ps-hero h1{font-size:26px} } /* Lien discret (ex. « Création du site internet sous WordPress » → Odiens) : couleur héritée, soulignement pointillé léger. */ .page-simple .entry-content a.lien-discret{color:inherit;text-decoration:none;border-bottom:1px dotted #b9b9b9;font-weight:inherit} .page-simple .entry-content a.lien-discret:hover{color:var(--turquoise);border-bottom-color:var(--turquoise);filter:none} /* Embed (programme & autres pages) : fond gris + flap centré */ .faq-wrap{width:100%;background:var(--gris-clair);padding:50px 0} .faqpage--embed{width:100%} .faqpage--embed .faq-section{padding:0} .faqpage--embed .pad250,.faqpage--embed{padding-left:0;padding-right:0} .faq-wrap .faqpage--embed .faq-section{max-width:var(--content);margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px} .lotpage .faq-wrap .faqpage--embed .faq-section{max-width:938px} .faq-title{font-family:'Roboto Slab',serif;font-weight:700;font-size:28px;line-height:1.2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;max-width:760px;margin:0 auto} .faq-title-flap{display:inline-block;color:#fff;padding:1px 14px;transform:rotate(-2deg)} @media (max-width:980px){ .faq-hero{height:auto;padding:40px 20px} .faq-hero h1{font-size:30px;line-height:34px} .faq-q p{font-size:20px} .faq-flap-wrap .flap{font-size:22px} .faq-wrap .faqpage--embed .faq-section{padding-left:24px;padding-right:24px} } @media (max-width:600px){ .faq-hero h1{font-size:24px;line-height:28px} .faq-q p{font-size:18px} } /* ============================================================ PAGE DÉTAIL LOGEMENT T5 ============================================================ */ .lotpage{display:flex;flex-direction:column;align-items:center;width:100%} /* Rythme vertical entre les sections du BODY (gap 94px de la maquette) */ .lotpage .lot-imgtext, .lotpage .m3d, .lotpage .lot-pourquoi, .lotpage .chapo, .lotpage .prez3, .lotpage .faq-wrap{margin-top:94px} /* Hero */ .lot-hero{position:relative;width:100%;height:408px;overflow:hidden;display:flex;align-items:center;justify-content:center} .lot-hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .lot-hero .overlay{position:absolute;inset:0;background:rgba(5,57,59,.3)} .lot-hero h1{position:relative;color:#fff;font-size:48px;line-height:50px;text-align:center;max-width:1057px;padding:0 20px} /* Recap */ .lot-recap{width:100%;background:var(--turquoise);padding:50px 0;color:#fff} .recap-inner{display:flex;gap:30px;align-items:center;justify-content:center;width:100%} .recap-left{width:343px;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:10px} .rl-type{display:flex;flex-direction:column;align-items:flex-end;font-family:'Roboto Slab',serif;font-weight:700;line-height:1} .rl-type .t1{font-size:28px} .rl-type .t2{font-size:46px;line-height:1.05} .rl-ext{font-weight:700;font-size:14px;line-height:20px} .rl-pieces{font-family:'Roboto Slab',serif;font-weight:700;font-size:28px} .rl-pieces .small{font-size:13px} .rl-prix .s1{font-weight:700;font-size:13px} .rl-prix .s2{font-weight:700;font-size:28px} .rl-prix .s3{font-weight:700;font-size:22px} /* Mention légale commune (bas des pages typologie) — note de bas de page avant le footer */ .lot-mention{padding-top:0;padding-bottom:64px} .lot-mention p{max-width:1200px;margin:0 auto;padding-top:40px;border-top:1px solid #e6e6e6;font-size:12px;line-height:1.6;color:#9a9a9a;font-style:italic;text-align:left} @media(max-width:600px){.lot-mention{padding-bottom:40px}.lot-mention p{padding-top:28px}} .recap-inner .vline{width:1px;align-self:stretch;background:rgba(255,255,255,.5);flex-shrink:0} .recap-right{flex:1;min-width:0;display:flex;flex-direction:column;gap:30px;align-items:flex-start;align-self:stretch;justify-content:center} .recap-right .recap-btns{flex-direction:column;align-items:flex-start;gap:14px} .recap-right p{font-size:16px;line-height:24px;max-width:465px} .recap-right b{font-weight:700} .recap-btns{display:flex;gap:10px;flex-wrap:wrap} /* Présentation image + texte */ .lot-imgtext{display:flex;gap:40px;align-items:center;width:100%;padding-top:0;padding-bottom:0} .lot-imgtext .lit-img{width:716px;flex-shrink:0;height:394px;overflow:hidden} .lot-imgtext .lit-img img{width:100%;height:100%;object-fit:cover} .lot-imgtext .lit-txt{flex:1;min-width:0;max-width:512px;display:flex;flex-direction:column;gap:10px} .lot-imgtext .surtitre{font-family:'Roboto Slab',serif;font-weight:300;font-size:24px;color:var(--vert1)} .lot-imgtext h3{font-family:'Roboto Slab',serif;font-weight:700;font-size:28px;color:var(--vert2)} .lot-imgtext p{font-size:16px;line-height:24px;color:var(--noir)} /* ---- Section 3D interactive ---- */ .m3d{display:flex;flex-direction:column;gap:20px;align-items:center;width:100%;padding:0 20px} .m3d-head{text-align:center} .m3d-head .sub{font-family:'Roboto Slab',serif;font-weight:300;font-size:24px;color:var(--vert2)} .m3d-head h2{font-family:'Roboto Slab',serif;font-weight:700;font-size:24px;color:var(--vert2)} .m3d-stage{position:relative;width:100%;max-width:1021px;aspect-ratio:1021/447;background:#fff;overflow:hidden} .m3d-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:contain} .m3d-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:none} .m3d-calque{position:absolute;inset:0;background:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center} .m3d-btn{display:inline-flex;align-items:center;gap:12px;background:var(--turquoise);color:#fff;border:none; border-radius:15px;padding:16px 28px;font-family:'Roboto',sans-serif;font-weight:700;font-size:15px;cursor:pointer;transition:filter .15s} .m3d-btn:hover{filter:brightness(1.06)} .m3d-play{width:28px;height:auto;display:block;flex-shrink:0} .m3d-stage.revealed .m3d-preview,.m3d-stage.revealed .m3d-calque{display:none} .m3d-stage.revealed .m3d-frame{display:block} /* ---- Pourquoi choisir ---- */ .lot-pourquoi{width:100%;background:rgba(151,179,96,.2);padding:80px 0;display:flex;flex-direction:column;gap:0} .lp-head{display:flex;flex-direction:column;gap:10px;align-items:center;margin-bottom:40px} .lp-head h2{font-family:'Roboto Slab',serif;font-weight:700;font-size:28px;color:var(--vert2);text-align:center} .lp-logo{width:239px;height:auto;max-width:80%} .lp-blocs{display:flex;flex-direction:column;gap:40px;width:100%;max-width:938px} .lp-bloc{display:flex;gap:40px;align-items:center;width:100%} .lp-bloc.right{flex-direction:row-reverse} .lp-img{width:418px;flex-shrink:0;height:235px;overflow:hidden} .lp-img img{width:100%;height:100%;object-fit:cover} .lp-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px} .lp-txt h3{font-family:'Roboto Slab',serif;font-weight:700;font-size:22px;color:var(--vert2)} .lp-txt p{font-size:16px;line-height:24px;color:var(--noir)} .lot-cta{width:100%;margin-top:45px} .lotpage .lot-cta{margin-top:40px} .lot-pourquoi .cta-box{max-width:938px} .progpage .cta-box{max-width:938px} /* ---- Chapo ---- */ .chapo{display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center;width:100%;padding-top:0;padding-bottom:0} .chapo h3{font-family:'Roboto Slab',serif;font-weight:700;font-size:28px;color:var(--vert2)} .chapo p{font-size:16px;line-height:24px;color:var(--noir);max-width:931px} .chapo b{font-weight:700} /* ---- PREZ 3 COL (capsules) ---- */ .prez3{display:flex;flex-direction:column;gap:40px;align-items:center;width:100%;padding-top:0;padding-bottom:0} .prez3-head{text-align:center} .prez3-head .sub{font-family:'Roboto Slab',serif;font-weight:300;font-size:24px;color:var(--vert2)} .prez3-head h2{font-family:'Roboto Slab',serif;font-weight:700;font-size:28px;color:var(--vert2)} .prez3-cols{display:flex;gap:42px;align-items:flex-start;justify-content:center;width:100%;max-width:1212px} .prez3-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:30px;align-items:center} .prez3-col .cap{display:flex;flex-direction:column;align-items:center;width:100%} .cap-top{display:inline-block;transform:rotate(-3deg);font-family:'Roboto Slab',serif;font-weight:700;font-size:24px;color:#fff; padding:6px 16px;text-align:center;white-space:nowrap} .cap-bottom{display:block;font-family:'Roboto Slab',serif;font-weight:700;font-size:24px;color:#fff;padding:6px 18px;text-align:center;margin-top:4px} .cap-txt{font-size:16px;line-height:24px;color:var(--noir);text-align:center} .cap-vert .cap-top{background:var(--vert1)} .cap-vert .cap-bottom{background:var(--vert2)} .cap-violet .cap-top{background:var(--violet1)} .cap-violet .cap-bottom{background:var(--violet2)} .cap-orange .cap-top{background:var(--orange1)} .cap-orange .cap-bottom{background:var(--orange2)} /* Recette #108 : « avec un vrai avantage fiscal » sur une seule ligne (bloc orange moins haut) */ .cap-orange .cap-bottom{font-size:20px;white-space:nowrap} @media(max-width:600px){.cap-orange .cap-bottom{white-space:normal}} .prez3-dot{width:7px;height:7px;border-radius:50%;background:var(--gris-fonce);flex-shrink:0;align-self:center} /* Responsive T5 */ @media (max-width:980px){ .lotpage .lot-imgtext, .lotpage .m3d, .lotpage .lot-pourquoi, .lotpage .chapo, .lotpage .prez3, .lotpage .faq-wrap{margin-top:50px} .lot-hero{height:300px} .lot-hero h1{font-size:30px;line-height:34px} .recap-inner{flex-direction:column} .recap-left{width:100%;align-items:center;text-align:center} .recap-inner .vline{width:60%;height:1px;align-self:center} .recap-right{align-items:center;text-align:center} .recap-btns{justify-content:center} .recap-right .recap-btns{align-items:center} /* boutons empilés centrés en mobile (prime sur le fix #37 desktop) */ .lot-imgtext{flex-direction:column} .lot-imgtext .lit-img{width:100%;height:300px} .lot-imgtext .lit-txt{max-width:none;text-align:center} .lp-bloc,.lp-bloc.right{flex-direction:column} .lp-txt{text-align:center} .lp-img{width:100%;height:260px} .prez3-cols{flex-direction:column;align-items:center;gap:30px} .prez3-dot{display:none} .cap-top{white-space:normal} /* recette #48 : empilé, on contraint la bar à la largeur d'une colonne desktop pour que les libellés longs reviennent sur 2 lignes (cf. maquette) */ .prez3-col .cap{max-width:376px} } @media (max-width:600px){ .lot-hero h1{font-size:24px;line-height:28px} .rl-type .t2{font-size:54px} } /* ============================================================ HOME V2 — badge lancement, intro, avancement ============================================================ */ .launch-badge{width:803px;max-width:calc(100% - 24px);min-height:75px;background:var(--turquoise);border-radius:74.5px; display:flex;align-items:center;color:#fff;padding:0 25px 0 28px;gap:24px} .launch-badge .lb-title{font-family:'Roboto Slab',serif;font-weight:700;font-size:28px;line-height:1.05;text-align:right;flex-shrink:0;max-width:300px} .launch-badge .lb-date{display:flex;flex-direction:column;flex:1;padding-left:24px;border-left:1px solid rgba(255,255,255,.85); font-family:'Roboto Slab',serif;font-weight:700;font-size:22px;line-height:1.15} .launch-badge .lb-lieu{font-weight:700;font-size:13px;line-height:1.2;margin-top:4px} .launch-badge .lb-venir{background:#fff;color:var(--turquoise);font-weight:700;font-size:14px;border-radius:50px; padding:10px 20px;flex-shrink:0;display:inline-flex;align-items:center;gap:6px;cursor:pointer} .home-intro{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;color:var(--vert2);padding:28px 20px 44px} .home-intro .sur{font-family:'Roboto Slab',serif;font-weight:300;font-size:24px} .home-intro .titre{font-family:'Roboto Slab',serif;font-weight:700;font-size:24px} .home-intro .intro-legal{font-family:'Roboto',sans-serif;font-style:italic;font-size:13px;color:var(--noir);margin-top:8px} .avancement{display:flex;flex-direction:column;align-items:center;gap:40px;width:100%;max-width:var(--content);margin:0 auto;padding:0 24px 50px} .av-head{display:flex;flex-direction:column;align-items:center;gap:10px} .av-head h2{font-family:'Roboto Slab',serif;font-weight:700;font-size:28px;color:var(--vert2)} .av-count{display:flex;align-items:center;gap:10px;font-family:'Roboto Slab',serif;font-weight:700;font-size:24px;color:var(--vert2)} .av-count .num{background:var(--vert1);color:#fff;border-radius:50px;padding:2px 15px} .av-steps{position:relative;display:flex;gap:10px;width:100%;max-width:1240px;justify-content:center} .av-line{position:absolute;top:11px;left:8%;right:8%;height:1px;background:var(--gris-fonce);z-index:0} .av-step{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;z-index:1} .av-dot{width:24px;height:24px;border-radius:50%;background:var(--gris-fonce);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px} .av-step p{font-family:'Roboto Slab',serif;font-weight:700;font-size:16px;text-align:center;color:var(--gris-fonce);line-height:1.15} .av-step.done .av-dot{background:var(--vert1)} .av-step.done p{color:var(--vert1)} .home-m3d{padding:30px 20px 50px} .home-aides{padding-top:40px;padding-bottom:70px} @media (max-width:980px){ .launch-badge{height:auto;flex-direction:column;align-items:center;text-align:center;gap:12px;border-radius:24px;padding:18px 20px} .launch-badge .lb-title{text-align:center;max-width:none} .launch-badge .lb-date{border-left:0;padding-left:0;align-items:center} .avancement{padding:0 24px 40px} .av-steps{flex-wrap:wrap;gap:20px 10px} .av-step{flex:0 0 28%} .av-line{display:none} .home-intro .sur,.home-intro .titre{font-size:20px} } @media (max-width:600px){ .av-step{flex:0 0 45%} } /* ============================================================ Photos pivotées sur les blocs colorés (home V2) ============================================================ */ .bloc{overflow:visible} /* Recette #101 : portraits (portrait-*) avec cadre blanc + inclinaison DÉJÀ intégrés au PNG. On affiche l'image telle quelle (aucun recadrage, cadre ou rotation CSS) et l'ombre suit la forme réelle du visuel via drop-shadow → photo, cadre et ombre parfaitement alignés. */ .rot-photo{position:absolute;width:214px;height:auto;z-index:3} .rot-photo img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.22))} .bloc-vert .rot-photo{left:760px;top:-34px} .bloc-violet .rot-photo{left:540px;top:-46px;width:200px} .bloc-orange .rot-photo{left:760px;top:-44px} @media (max-width:1200px){ .bloc-vert .rot-photo,.bloc-orange .rot-photo{left:auto;right:60px} .bloc-violet .rot-photo{right:auto;left:60px} } @media (max-width:980px){ /* #16 — portrait pivoté : moitié au-dessus de la photo, moitié par-dessus (mobile uniquement). */ .rot-photo{position:relative;z-index:3;width:160px;height:auto;display:block} .bloc .rot-photo{order:-1;margin:18px auto -80px} /* -80px = moitié de la hauteur → recouvre le haut de la photo */ } /* ============================================================ LE PROGRAMME V2 ============================================================ */ .progpage{display:flex;flex-direction:column;align-items:center;width:100%;gap:15px} /* Recap simplifié */ .prog-recap{width:100%;background:var(--turquoise);padding:50px 0;color:#fff;position:relative;overflow:hidden} .pr-inner{display:flex;gap:30px;align-items:center;justify-content:center;width:100%} .pr-left{width:270px;flex-shrink:0;align-self:stretch;display:flex;align-items:center;justify-content:flex-end;text-align:right;font-family:'Roboto Slab',serif;font-weight:700;font-size:28px;line-height:1.1;position:relative;z-index:1} .pr-left>span{position:relative;z-index:1} /* recette #54 : le watermark « a » épouse le bord bas du cartouche vert. .pr-left s'étire sur la hauteur du contenu ; le -50px compense le padding bas du cartouche (50px) pour que le bas du « a » touche vraiment le bord inférieur du fond turquoise. */ .pr-watermark{position:absolute;left:32px;bottom:-50px;width:218px;height:auto;opacity:.45;pointer-events:none;z-index:0} .prog-recap .vline{width:1px;align-self:stretch;background:rgba(255,255,255,.5);flex-shrink:0;min-height:200px} .pr-right{flex:1;min-width:0;max-width:445px;display:flex;flex-direction:column;gap:16px} .pr-right p{font-size:16px;line-height:24px} .pr-right b{font-weight:700} .pr-right .btn{align-self:flex-start;margin-top:6px} /* Intro vivez différemment */ .prog-intro{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;padding-top:40px;padding-bottom:50px} .pi-logo{height:67px;width:auto} .prog-intro h2{font-family:'Roboto Slab',serif;font-weight:700;font-size:28px;color:var(--vert2)} .prog-intro p{font-size:16px;line-height:24px;color:var(--noir);max-width:820px} .prog-intro strong{font-weight:600} /* 3 volets verts */ .prog-flaps{display:flex;gap:33px;align-items:flex-start;justify-content:center;padding:20px 20px 48px;width:100%;max-width:1082px;margin:0 auto} .pf-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:20px} .pf-flap{transform:rotate(-3deg)} .pf-flap span{display:inline-block;background:var(--vert1);color:#fff;font-family:'Roboto Slab',serif;font-weight:700;font-size:24px;padding:6px 16px;text-align:center} .pf-col p{font-size:16px;line-height:24px;color:var(--noir);text-align:center} /* Texte réinvente */ .prog-lead{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;padding-bottom:20px} .prog-lead h2{font-family:'Roboto Slab',serif;font-weight:700;font-size:28px;color:var(--vert2)} .prog-lead p{font-size:16px;line-height:24px;color:var(--noir);max-width:918px} /* 3 chiffres-clés */ .prog-chiffres{display:flex;gap:20px;align-items:stretch;justify-content:center;padding-bottom:0;max-width:980px;margin-left:auto;margin-right:auto} .pc-item{flex:1;display:flex;flex-direction:column;gap:5px;font-family:'Roboto Slab',serif;font-weight:700;color:var(--vert2);text-align:left} .pc-item .l1{font-size:28px;line-height:33px} .pc-item .l2{font-size:28px;line-height:1.1} .pc-item .l2 b{font-size:38px;font-weight:700} .pc-item .big{font-size:38px;line-height:33px} .pc-sep{width:1px;background:var(--gris-fonce);align-self:center;height:113px;flex-shrink:0} /* Blocs titre + texte */ .bloc .bloc-title{font-family:'Roboto Slab',serif;font-weight:700;font-size:38px;line-height:1.1;color:#fff} .prog-blocs .bloc .panel .inner{gap:20px} .prog-blocs .bloc .txt b{font-weight:700} /* Photo ronde du CTA */ .cta-photo{overflow:hidden} .cta-photo img{width:100%;height:100%;object-fit:cover;display:block} @media (max-width:980px){ .pr-inner{flex-direction:column} .pr-left{width:100%;text-align:center;justify-content:center;align-self:auto;min-height:120px} .pr-watermark{left:50%;transform:translateX(-50%)} .prog-recap .vline{width:60%;height:1px;min-height:0;align-self:center} .pr-right{align-items:center;text-align:center} .pr-right .btn{align-self:center} .prog-flaps{flex-direction:column;align-items:center;padding-bottom:50px} .prog-chiffres{flex-direction:column;align-items:center;text-align:center} .pc-item{text-align:center} .pc-sep{width:60%;height:1px} .bloc .bloc-title{font-size:28px} } /* Encarts latéraux orange (rappel / plaquette) */ .aside-orange{background:rgba(249,134,83,.2);padding:40px;display:flex;flex-direction:column;align-items:center;width:100%} .aside-orange .ao-photo{width:216px;max-width:100%;margin-bottom:-14px;z-index:1} .aside-orange .ao-photo img{width:100%;display:block} .aside-orange .ao-flap{transform:rotate(-2deg);margin-bottom:-6px} .aside-orange .ao-flap span{display:inline-block;color:#fff;font-family:'Roboto Slab',serif;font-weight:700;font-size:28px;padding:5px 10px;text-align:center} .aside-plaquette{background:rgba(249,134,83,.2);padding:40px 30px;width:100%} .aside-plaquette img{width:100%;display:block;box-shadow:0 4px 15px rgba(249,134,83,.5)} /* (anciens overrides .prog-blocs retirés : ils forçaient align-self:flex-start sur .photo et écrasaient le décalage. Le layout définitif est en fin de fichier.) */ /* Brochure (programme) : espace avant la photo aérienne + cover pas pleine hauteur */ .progpage .brochure-wrap{margin-top:50px} .progpage .brochure{padding:30px 50px} .progpage .brochure .img{width:215px;height:175px;align-self:center} /* ============================================================ VIVRE À L'UNION ============================================================ */ .unionpage{display:flex;flex-direction:column;align-items:center;width:100%} /* Hero avec logo Union */ .union-hero{position:relative;width:100%;height:408px;overflow:hidden;display:flex;align-items:center;justify-content:center} .union-hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .union-hero .overlay{position:absolute;inset:0;background:rgba(5,57,59,.3)} .union-hero-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:30px;text-align:center;padding:0 20px} .union-logo{width:292px;max-width:80%;height:auto} .union-hero h1{color:#fff;font-size:48px;line-height:50px;max-width:1057px} /* Intro */ .union-intro{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;padding-top:20px;padding-bottom:60px} .union-intro h2{font-family:'Roboto Slab',serif;font-weight:700;font-size:24px;color:var(--vert2)} .union-intro p{font-size:16px;line-height:24px;color:var(--noir)} .union-intro b{font-weight:700} /* Grande image */ .union-bigimg{width:100%;display:flex;justify-content:center;padding:0 20px} .union-bigimg img{width:100%;max-width:941px;height:auto;display:block} /* Capsules */ .union-caps{padding-top:84px;padding-bottom:84px} /* Blocs média (carrousel / vidéo) */ .union-media{width:100%;display:flex;flex-direction:column;align-items:center;padding:40px 38px} /* Carrousel images */ .union-carousel{width:100%;max-width:941px;display:flex;flex-direction:column;align-items:flex-end;gap:2px} .uc-arrows{display:flex;gap:2px} .uc-arrows button{width:47px;height:47px;background:var(--turquoise);color:#fff;border:0;cursor:pointer;font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center} .uc-arrows button:hover{background:#0f7a7e} .uc-viewport{width:100%;overflow:hidden} .uc-track{display:flex;transition:transform .45s ease} .uc-slide{min-width:100%;aspect-ratio:16/9} .uc-slide img{width:100%;height:100%;object-fit:cover;display:block} .uc-cap{width:100%;text-align:center;font-size:16px;line-height:24px;color:#000;margin-top:10px} /* Vidéo YouTube 16:9 */ .union-video{width:100%;max-width:941px} .video-frame{position:relative;width:100%;padding-top:56.25%;overflow:hidden;background:#000} .video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* Carte / plan */ .union-map{width:100%;display:flex;flex-direction:column;gap:30px;padding:40px 0} .map-head{text-align:center} .map-head .light{font-family:'Roboto Slab',serif;font-weight:300;font-size:24px;color:var(--vert2)} .map-head h2{font-family:'Roboto Slab',serif;font-weight:700;font-size:24px;color:var(--vert2)} .map-box{margin:0 40px} .map-box iframe{width:100%;aspect-ratio:2726/1324;border:0;display:block} .map-box img{width:100%;aspect-ratio:2726/1324;object-fit:cover;display:block} .alentoor-widget{width:100%;aspect-ratio:2726/1324;min-height:340px;display:block} .map-placeholder{width:100%;aspect-ratio:2726/1324;display:flex;align-items:center;justify-content:center; background:repeating-linear-gradient(45deg,#f0f0f0,#f0f0f0 14px,#e6e6e6 14px,#e6e6e6 28px);border:2px dashed var(--gris-fonce)} .map-placeholder span{font-family:'Roboto Slab',serif;font-weight:700;font-size:22px;color:var(--noir);background:#fff;padding:10px 22px;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.08)} /* 2 colonnes texte */ .union-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px 108px;padding-top:40px;padding-bottom:40px;max-width:1065px;margin:0 auto;width:100%} .ug-title{grid-column:1/3;text-align:center;font-family:'Roboto Slab',serif;font-weight:700;font-size:24px;color:var(--vert2);margin-bottom:10px} .ug-title .light{font-weight:300} .union-grid .ug-col h3{font-family:'Roboto Slab',serif;font-weight:700;font-size:24px;color:var(--vert2);margin-bottom:16px} .union-grid .ug-col p{font-size:16px;line-height:24px;color:var(--noir)} /* Bandeau vert « pourquoi choisir » */ .union-nature{width:100%;background:rgba(151,179,96,.2);padding:59px 0} .un-inner{display:flex;gap:40px;align-items:center;justify-content:center} .un-img{flex-shrink:0;width:512px;max-width:45%} .un-img img{width:100%;height:auto;display:block} .un-text{width:482px;max-width:100%;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:left} .un-text h3{font-family:'Roboto Slab',serif;font-weight:700;font-size:24px;color:var(--vert2);width:100%} .un-text p{font-size:16px;line-height:24px;color:var(--vert2)} .un-text .btn{align-self:center;margin-top:6px} @media (max-width:980px){ .union-hero{height:300px} .union-hero h1{font-size:30px;line-height:34px} .union-logo{width:220px} .union-grid{grid-template-columns:1fr;gap:24px} .ug-title{grid-column:1} .un-inner{flex-direction:column} .un-img{width:100%;max-width:520px} .un-text{width:100%;text-align:center} /* recette : centrage des textes sur mobile */ .union-grid .ug-col{text-align:center} } @media (max-width:600px){ .union-hero h1{font-size:24px;line-height:28px} .union-media{padding:30px 16px} .map-box{margin:0 16px} } /* Espacement exact maquette — Le Programme */ .prog-blocs{gap:60px} /* ============================================================ CORRECTIFS RESPONSIVE (audit multi-largeurs 320→1440) Placés en fin de feuille pour primer sur les règles de même spécificité. Aucune règle desktop existante n'est modifiée. ============================================================ */ /* A) FOOTER — redesign consolidé dans le bloc « FOOTER » principal (logos harmonisés + responsive). */ /* B) CAPSULES (prez3) — autoriser le bandeau « cap-top » à s'enrouler pour éviter le débordement dans la zone 981–1200px (libellés longs type « Des frais de notaire réduits »). */ @media (max-width:1200px){ .cap-top{white-space:normal} } /* C) BLOCS COLORÉS — neutraliser la marge négative résiduelle de la photo en mode empilé (sa spécificité .bloc.left .photo battait la règle 980, ce qui, avec align-items:center, décalait la photo et débordait de 20px). */ @media (max-width:980px){ .bloc.left .photo,.bloc.right .photo{margin:0;width:100%} .prog-imgtext.bloc.left .photo,.prog-imgtext.bloc.right .photo{margin:0;width:100%} } /* D) BLOCS — autoriser le panneau à rétrécir sous sa largeur min-content (évite un débordement de quelques px dans la zone 981–1200px). */ .bloc .panel{min-width:0} /* E) CAPSULES home — la section « home-aides » n'avait aucun padding horizontal (contrairement aux autres .prez3 en pad250), donc les bandeaux pivotés (transform:rotate) débordaient de 2–3px. */ .home-aides{padding-left:24px;padding-right:24px} /* ============================================================ Formulaires fonctionnels — message de statut + e-mail carte ============================================================ */ .form-alert{padding:14px 18px;border-radius:8px;font-size:15px;line-height:22px;margin-bottom:4px} .form-alert.ok{background:#e7f5ec;border:1px solid #57a773;color:#1f6b3b} .form-alert.err{background:#fdecec;border:1px solid #d9534f;color:#a32a26} .cc-mailval{font-family:'Roboto',sans-serif;font-weight:700;font-size:18px;color:var(--orange2);word-break:break-word} .cc-mailval a{color:inherit} /* ============================================================ RECETTE page contact (#31 flèche select, #32 carte contact) ============================================================ */ /* #31 — flèche visible sur les menus déroulants (statique ET Gravity Forms), pour signaler qu'il y a des choix. On retire l'apparence native et on dessine un chevron en image de fond. */ .static-form select, .atypik-form-skin .ginput_container select, .atypik-form-skin .gform_wrapper select{ appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")!important; background-repeat:no-repeat!important; background-position:right 14px center!important; background-size:16px!important; padding-right:42px!important; } /* #32 — carte « Nous contacter directement » a) flaps agrandis pour s'harmoniser avec les autres flaps du site b) toutes les infos centrées (comme les flaps/logo déjà centrés) */ .cc-titre .flap{font-size:24px} .contact-card{text-align:center} .cc-line{align-items:center} /* c) sur mobile/tablette, le bloc orange est moins large et centré */ @media (max-width:980px){ .form-aside .contact-card, .form-aside .form-aside-img{max-width:440px;margin-left:auto;margin-right:auto} } /* ===== ESPACEMENTS PROGRAMME (recette #10 / #24 : aérer + harmoniser le rythme vertical, iso maquette) ===== */ .progpage .prog-intro{margin-top:39px} .progpage .prog-flaps{margin-top:40px} .progpage .prog-lead{margin-top:56px} .progpage .prog-chiffres{margin-top:30px} /* #124 — même respiration sur l'accueil (bloc chiffres-clés repris de la page Le Projet). */ .home .prog-lead{margin-top:56px} .home .prog-chiffres{margin-top:30px} .progpage .blocs.prog-blocs{margin-top:50px;gap:60px} .progpage .lot-cta{margin-top:81px} .progpage .brochure-wrap{margin-top:57px} .progpage .prez3{margin-top:109px} .progpage .faq-wrap{margin-top:92px} /* ===== BLOCS PROGRAMME : layout iso maquette (recette #8/#20/#21), SCOPÉ .prog-blocs pour ne pas impacter la home (qui a un design décoratif différent) ===== */ .prog-blocs .bloc{height:auto;padding:0;align-items:flex-start} .prog-blocs .bloc .photo{width:50%;display:block;align-self:flex-start;margin-top:36px} .prog-blocs .bloc .photo .ph{height:422px} .prog-blocs .bloc .photo .tab{display:none} .prog-blocs .bloc .panel{align-self:flex-start;min-height:422px;justify-content:center;padding:48px 56px;overflow:visible} .prog-blocs .bloc .panel .inner{gap:18px} .prog-blocs .bloc.left .photo{margin-right:-28px} .prog-blocs .bloc.left .panel{padding:48px 56px 48px 72px} .prog-blocs .bloc.right .photo{margin-left:-28px} .prog-blocs .bloc.right .panel{margin-right:0;padding:48px 72px 48px 56px} /* empilé : on annule le décalage vertical et on rend la photo pleine largeur */ @media (max-width:980px){ .prog-blocs .bloc .photo{margin-top:0;width:100%} .prog-blocs .bloc .photo .ph{height:300px} .prog-blocs .bloc .panel{min-height:0} } .logementspage .log-intro{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;width:100%;max-width:var(--content);margin:0 auto} .logementspage .log-intro .sub{font-family:'Roboto Slab',serif;font-weight:300;font-size:24px;color:var(--vert1)} .logementspage .log-intro h2{font-family:'Roboto Slab',serif;font-weight:700;font-size:28px;color:var(--vert2)} .log-grid{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;width:100%;max-width:var(--content);margin:30px auto 0} .log-card{flex:1 1 260px;max-width:320px;background:var(--turquoise);color:#fff;padding:34px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px} .log-card-type{font-family:'Roboto Slab',serif;font-weight:700;line-height:1.05;display:flex;flex-direction:column} .log-card-type .apt{font-size:22px} .log-card-type .lbl{font-size:54px} .log-card-desc{font-size:15px;line-height:22px;flex:1} .log-card-soon{font-weight:700;opacity:.9;border:1px solid rgba(255,255,255,.6);border-radius:30px;padding:8px 20px} @media(max-width:980px){.log-card{flex-basis:45%}} @media(max-width:600px){.log-card{flex-basis:100%;max-width:none}} /* ============ PAGES FORMULAIRES (contact / rappel / plaquette) ============ */ /* #41 + général : boutons d'envoi trop larges → largeur de la colonne formulaire */ .gform_wrapper .gform_footer input[type="submit"], .gform_wrapper .gform_footer button[type="submit"], .gform_wrapper .gform_footer .gform-button{ display:block; width:100%; max-width:600px; /* ≈ largeur du form sur la maquette — ajuste si besoin */ } /* #42 : police 16px sur tous les formulaires (labels + champs) */ .gform_wrapper .gfield_label, .gform_wrapper .gform-field-label, .gform_wrapper input, .gform_wrapper textarea, .gform_wrapper select{ font-size:16px; } /* #39 : Contact → masquer la photo de l'aside en mobile */ @media (max-width:980px){ .form-aside-img{ display:none; } } /* #40 : Rappel → flap orange "Une équipe à votre écoute" au-dessus de la photo */ .aside-orange{ position:relative; } .aside-orange .ao-flap{ position:relative; z-index:2; } /* #18 — FOOTER (ordre/harmonisation mobile) : remplacé par le redesign consolidé du bloc « FOOTER » principal (structure .partners-top + .logos-team height:34px, colonne centrée en responsive, sans display:contents/order). Ci-dessous : réduction des marges latérales en mobile — placée en fin de feuille pour primer sur « @media(max-width:1200px){.site-footer{padding:40px 60px}} ». */ @media (max-width:600px){ .site-footer{padding:36px 20px} } /* ===== PAGE « LES LOGEMENTS » (hub) — recette #91 : chapô SEO, blocs typologies T1→T5, évolutivité, bandeau lancement (scopé .logementspage) ===== */ .logementspage .log-intro .log-lead{margin-top:14px;max-width:940px;font-size:16px;line-height:26px;color:#434b5c;text-align:left} .logementspage .log-intro .log-lead b{font-weight:700} .logementspage .log-typos{display:flex;flex-direction:column;gap:56px;width:100%;max-width:var(--content);margin:70px auto 0} .logementspage .log-type{display:flex;flex-direction:column;gap:18px;max-width:940px;width:100%;margin:0 auto} .logementspage .log-type-head{display:flex;flex-direction:column;gap:10px} .logementspage .log-type-flap{align-self:flex-start;display:inline-block;font-family:'Roboto Slab',serif;font-weight:700;font-size:22px;color:#fff;padding:4px 16px;transform:rotate(-2deg)} .logementspage .log-type h3{font-family:'Roboto Slab',serif;font-weight:700;font-size:24px;line-height:1.2} .logementspage .log-type-body{display:flex;flex-direction:column;gap:14px} .logementspage .log-type-body p{font-size:16px;line-height:26px;color:#434b5c} .logementspage .log-type-cta{align-self:flex-start;margin-top:4px} .logementspage .log-type-soon{align-self:flex-start;margin-top:4px;font-weight:700;color:#8a8a8a;border:1px solid #d5d5d5;border-radius:50px;padding:7px 20px} /* Déclinaison couleur par typologie (flap + titre + CTA) */ .logementspage .log-type.c-vert .log-type-flap{background:var(--vert1)} .logementspage .log-type.c-vert h3{color:var(--vert2)} .logementspage .log-type.c-vert .log-type-cta{background:var(--vert2)} .logementspage .log-type.c-violet .log-type-flap{background:var(--violet1)} .logementspage .log-type.c-violet h3{color:var(--violet2)} .logementspage .log-type.c-violet .log-type-cta{background:var(--violet2)} .logementspage .log-type.c-orange .log-type-flap{background:var(--orange1)} .logementspage .log-type.c-orange h3{color:var(--orange2)} .logementspage .log-type.c-orange .log-type-cta{background:var(--orange2)} .logementspage .log-evolue{display:flex;flex-direction:column;gap:16px;width:100%;max-width:940px;margin:70px auto 0} .logementspage .log-evolue h2{font-family:'Roboto Slab',serif;font-weight:700;font-size:28px;color:var(--vert2)} .logementspage .log-evolue-body{font-size:16px;line-height:26px;color:#434b5c} .logementspage .log-evolue-body b{font-weight:700;color:var(--vert2)} .logementspage .log-legal{font-size:13px;line-height:20px;color:#8a8a8a;font-style:italic} .logementspage .launch-banner{background:var(--turquoise);color:#fff;margin-top:80px} .logementspage .launch-banner .lb-inner{max-width:var(--content);margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding-top:48px;padding-bottom:48px} .logementspage .launch-banner .lb-kicker{font-family:'Roboto Slab',serif;font-weight:300;font-size:20px;letter-spacing:.5px} .logementspage .launch-banner .lb-date{font-family:'Roboto Slab',serif;font-weight:700;font-size:28px} .logementspage .launch-banner .lb-offer{font-size:18px;font-weight:500} .logementspage .launch-banner .lb-btn{margin-top:12px} @media(max-width:980px){ .logementspage .log-typos{gap:44px;margin-top:50px} .logementspage .log-evolue,.logementspage .launch-banner .lb-inner{margin-top:0} } @media(max-width:600px){ .logementspage .log-intro .log-lead{font-size:15px;line-height:24px} .logementspage .log-type h3{font-size:21px} .logementspage .launch-banner .lb-date{font-size:22px} }