/* Site petrini.mc repris : COMPOSANTS COMMUNS à toutes les pages (Hub, Article, page auteur…). Une section « COMPOSANT : nom » par fonction de outils/migration/composants.py (puis includes/composants.php). Modifier un composant ici le modifie sur tout le site. S'appuie sur petrini.css (jetons, boutons, en-tête) et hub.css (pied de page). */ .g-main{background:var(--paper)} .g-eyebrow{font:600 .7rem/1.2 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--terra-deep);margin:0 0 14px} .g-eyebrow a{text-decoration:none} /* Titres sans Hn (règle de Paolo du 19/10/2026 : « attention à la duplication des Hn à travers le site ») : un titre commun répété d'une page à l'autre (À lire aussi, Questions fréquentes, Aller plus loin, titres de cartes…) est un paragraphe .g-t2 / .g-t3 au dessin exact d'un H2 / H3 ; contrôle : outils/modules/hn_dupliques.py (sas). Placé avant les règles des blocs, qui l'ajustent comme leurs H2 / H3. */ .g-t2,.g-t3,.pl-main .g-t2,.pl-main .g-t3{font-family:var(--display);font-weight:500;color:var(--ink);letter-spacing:-.012em;margin:0;max-width:none;text-wrap:balance} .g-t2{font-size:clamp(1.6rem,1.25rem + 1.6vw,2.6rem);line-height:1.12} .g-t3{font-size:clamp(1.15rem,1.05rem + .4vw,1.4rem);line-height:1.2} .pl-main .g-t2{margin:0 0 14px} /* Barre de lecture */ .g-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none} .g-bar span{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--terra),var(--terra-deep))} /* Fil d'Ariane */ /* COMPOSANT : fil_ariane */ .g-crumbs ol{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;font-size:.78rem;letter-spacing:.02em} .g-crumbs li{display:flex;align-items:center} .g-crumbs li+li::before{content:"";display:inline-block;flex:none;vertical-align:middle;width:4px;height:4px;margin:0 11px 2px;border-radius:50%;background:currentColor;opacity:.75} .g-crumbs a{text-decoration:none;opacity:.82} .g-crumbs a:hover{opacity:1;text-decoration:underline} .g-crumbs [aria-current]{opacity:.62} /* ===== Ouverture du Hub : photo pleine page, carton de verre ===== */ .g-hero{position:relative;min-height:min(92svh,820px);display:flex;align-items:flex-end;padding:120px var(--gutter) clamp(28px,5vw,64px);color:#fff;isolation:isolate} .g-hero picture,.g-hero picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .g-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(30,14,11,.45) 0%,rgba(30,14,11,0) 28%,rgba(30,14,11,.12) 52%,rgba(30,14,11,.72) 100%)} .g-hero-in{width:100%;max-width:var(--max);margin:0 auto} .g-hero h1{color:#fff;font-size:clamp(2.1rem,1.4rem + 3.6vw,4.6rem);line-height:1.02;letter-spacing:-.02em;max-width:17ch;margin:0 0 26px;text-shadow:0 2px 30px rgba(0,0,0,.25)} .g-hero .g-eyebrow{color:var(--rose)} .g-hero .g-meta{color:rgba(255,255,255,.92)} .g-hero .g-who img{box-shadow:0 0 0 2px rgba(255,255,255,.7)} .g-hero-play{margin-top:26px;display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 22px 0 7px;border-radius:999px;border:0;cursor:pointer;color:#fff;font:600 .9rem/1 var(--text);letter-spacing:.02em;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),inset 0 1px 0 rgba(255,255,255,.5);transition:background .35s var(--ease),transform .35s var(--ease)} .g-hero-play:hover{background:rgba(255,255,255,.26)} .g-hero-play:active{transform:scale(.97)} /* Méta : auteur, date, lecture */ .g-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;font-size:.86rem;color:var(--muted)} .g-who{display:inline-flex;align-items:center;gap:10px;text-decoration:none;margin-right:6px} .g-who img{width:36px;height:36px;border-radius:50%;object-fit:cover} .g-who strong{font-weight:600} .g-dot{display:inline-flex;align-items:center} .g-dot::before{content:"";width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55;margin:0 12px} .g-meta>.g-dot:first-child::before{display:none} /* Pastilles des chapitres (enfants du hub) */ /* COMPOSANT : dans_ce_guide — mêmes bords que l'en-tête et le sommaire (Paolo, 06/10/2026) */ .g-chips{max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:clamp(28px,4vw,44px) var(--gutter) 0} .g-chips ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px} .g-chips ol::-webkit-scrollbar{display:none} .g-chips li{flex:none} .g-chips a{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px 0 8px;border-radius:999px;text-decoration:none;font-size:.88rem;font-weight:500;color:var(--ink);background:var(--paper2);box-shadow:inset 0 0 0 1px var(--line);transition:background .3s var(--ease),box-shadow .3s var(--ease)} .g-chips a:hover{background:#fff;box-shadow:inset 0 0 0 1px rgba(178,90,69,.45)} .g-chips .num{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--terra-deep);font-size:.72rem;font-weight:600;box-shadow:inset 0 0 0 1px var(--line)} /* ===== Ouverture de l'Article : éditoriale, couverture arrondie ===== */ /* règle d'espacement (Paolo, 08/10/2026) : la même distance entre l'en-tête et le début de chaque page, sur tout le site */ :root{--haut-page:calc(104px + env(safe-area-inset-top,0px))} @media (max-width:899px){:root{--haut-page:calc(80px + env(safe-area-inset-top,0px))}} .g-ahero{padding:var(--haut-page) var(--gutter) 0;max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto} .g-ahero-in{max-width:880px} .g-ahero h1{font-size:clamp(2rem,1.4rem + 2.8vw,3.7rem);line-height:1.06;letter-spacing:-.02em;margin:0 0 24px} .g-ahero .g-crumbs{color:var(--muted)} .g-cover{margin:clamp(28px,4vw,48px) 0 0;border-radius:clamp(18px,2vw,28px);overflow:hidden;aspect-ratio:16/8;background:var(--paper2);box-shadow:0 30px 60px -40px rgba(61,30,25,.45)} .g-cover img{width:100%;height:100%;object-fit:cover} .g-article .nav:not(.stuck),.g-authorpage .nav:not(.stuck),.g-hub-nu .nav:not(.stuck){color:var(--ink)} .g-article .nav:not(.stuck) .logo-l,.g-authorpage .nav:not(.stuck) .logo-l,.g-hub-nu .nav:not(.stuck) .logo-l{display:none}.g-article .nav:not(.stuck) .logo-d,.g-authorpage .nav:not(.stuck) .logo-d,.g-hub-nu .nav:not(.stuck) .logo-d{display:block} .g-authorpage .nav:not(.stuck) .globe>button,.g-article .nav:not(.stuck) .globe>button, .g-hub-nu .nav:not(.stuck) .globe>button{background:rgba(255,255,255,.6);border-color:rgba(61,30,25,.12)} /* ===== Corps : sommaire collant + colonne de lecture ===== */ /* COMPOSANT : sommaire (+ colonne de lecture) — le sommaire part du bord gauche des pastilles, le texte finit sur le bord droit de l'en-tête */ .g-wrap{max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:clamp(36px,5vw,72px) var(--gutter) var(--s4);display:grid;grid-template-columns:minmax(0,1fr);gap:0} .g-toc{display:none} .g-toc-m ol,.g-toc ol,.g-chap-s ol{list-style:none;margin:0;padding:0 18px 14px;counter-reset:t} .g-toc-m li,.g-toc li,.g-chap-s li{counter-increment:t} .g-toc-m a,.g-toc ol a,.g-chap-s ol a{display:flex;gap:12px;padding:9px 0;text-decoration:none;font-size:.92rem;line-height:1.35;color:var(--body);border-top:1px solid var(--line)} .g-toc-m a::before,.g-toc ol a::before,.g-chap-s ol a::before{content:counter(t,decimal-leading-zero);font:600 .72rem/1.9 var(--text);color:var(--terra-deep);font-variant-numeric:tabular-nums} .g-prose{min-width:0;max-width:none;font-size:1.06rem;line-height:1.75;color:var(--body)} .g-prose p{max-width:none;margin:0 0 1.15em} .g-prose .g-lead{font-size:clamp(1.14rem,1.05rem + .4vw,1.32rem);line-height:1.6;color:var(--ink)} .g-prose h2{font-size:clamp(1.55rem,1.2rem + 1.5vw,2.35rem);line-height:1.14;margin:2.4em 0 .7em;scroll-margin-top:100px} .g-hub .g-prose{counter-reset:ch} .g-hub .g-prose>hr{display:none} .g-hub .g-prose>h2{counter-increment:ch;padding-top:1.6em;border-top:1px solid var(--line)} .g-hub .g-prose>h2::before{content:counter(ch,decimal-leading-zero);display:block;font:600 .74rem/1 var(--text);letter-spacing:.2em;color:var(--terra-deep);margin-bottom:16px} .g-prose h3{margin:1.8em 0 .5em} .g-prose a:not(.btn):not(.g-author-l){color:var(--ink);text-decoration-color:rgba(178,90,69,.55);text-decoration-thickness:1.5px;text-underline-offset:.2em;transition:text-decoration-color .25s,color .25s} .g-prose a:not(.btn):not(.g-author-l):hover{color:var(--terra-deep);text-decoration-color:var(--terra-deep)} .g-prose strong a,.g-prose a strong{font-weight:600} .g-prose img{height:auto;border-radius:14px} .g-prose ul:not([class]),.g-prose ol:not([class]){padding-left:1.2em} .g-prose li p{margin:0} /* Listes de phrases en tuiles de verre (même texte, autre présentation) */ .g-prose ul.g-tiles{list-style:none;padding:0;margin:1.6em 0;display:grid;grid-template-columns:1fr;grid-auto-rows:auto;gap:10px;counter-reset:tl} /* une colonne (téléphone) : chaque tuile à sa hauteur, pas celle de la plus haute (20/10/2026) */ .g-tiles li{counter-increment:tl;transition:background .3s var(--ease),box-shadow .3s var(--ease);position:relative;padding:18px 18px 18px 58px;border-radius:18px;background:linear-gradient(160deg,#fff 0%,var(--paper2) 100%);box-shadow:inset 0 0 0 1px var(--line),0 10px 26px -22px rgba(61,30,25,.5);font-size:.97rem;line-height:1.55} .g-tiles li::before{content:counter(tl);position:absolute;left:16px;top:16px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 .74rem/1 var(--text);color:#fff;background:linear-gradient(135deg,var(--terra),var(--terra-deep))} /* Vidéo : façade légère (aucun lecteur chargé avant le clic) */ .g-video{margin:1.8em 0;border-radius:20px;overflow:hidden;position:relative;aspect-ratio:16/9;background:#1d0f0c;box-shadow:0 30px 60px -36px rgba(61,30,25,.6)} .g-video-btn{all:unset;cursor:pointer;position:absolute;inset:0;display:grid;place-items:center} .g-video-btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform .8s var(--ease)} .g-video-btn:hover img{transform:scale(1.03)} .g-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .g-play{position:relative;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.22);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 18px 40px -16px rgba(0,0,0,.5)} .g-play svg{width:28px;height:28px;fill:#fff;margin-left:3px} .g-video .g-play{background:rgba(255,255,255,.94)}.g-video .g-play svg{fill:var(--terra-deep)} .g-play.sm{width:38px;height:38px;background:#fff} .g-play.sm svg{width:16px;height:16px;fill:var(--terra-deep);margin-left:2px} /* Encart conseiller (au fil du texte et en fin d'article) */ .g-cta{margin:2.6em 0;padding:clamp(22px,3vw,30px);border-radius:24px;display:grid;gap:18px;background:linear-gradient(150deg,#fff 0%,var(--rose) 130%);box-shadow:inset 0 0 0 1px rgba(178,90,69,.18),0 24px 50px -36px rgba(61,30,25,.55)} .g-cta-faces{display:flex} .g-cta-faces img{width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff} .g-cta-faces img+img{margin-left:-12px} .g-cta .g-eyebrow{margin-bottom:8px} .g-cta-h{font-family:var(--display);font-weight:500;color:var(--ink);font-size:clamp(1.3rem,1.1rem + .8vw,1.65rem);line-height:1.18;margin:0 0 8px!important} .g-cta-txt p:last-child{margin:0;font-size:.95rem;line-height:1.55} .g-cta-btns{display:flex;flex-wrap:wrap;gap:10px} .g-cta-btns .btn{text-decoration:none} /* ===== Guides enfants : grille éditoriale ===== */ .g-guides{padding:var(--s4) var(--gutter);background:var(--paper2)} .g-guides h2,.g-guides .g-t2{margin:0 0 clamp(28px,4vw,48px);max-width:18ch} .g-grid{display:grid;grid-template-columns:1fr;gap:clamp(14px,2vw,22px)} .g-card{display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 18px 40px -34px rgba(61,30,25,.6);transition:transform .45s var(--ease),box-shadow .45s var(--ease)} .g-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(178,90,69,.3),0 30px 60px -36px rgba(61,30,25,.6)} .g-card-img{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:var(--paper2)} .g-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)} .g-card:hover .g-card-img img{transform:scale(1.04)} .g-kick{position:absolute;left:14px;top:14px;height:30px;padding:0 13px;border-radius:999px;display:inline-flex;align-items:center;font:600 .7rem/1 var(--text);letter-spacing:.06em;color:var(--ink);background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)} .g-card-txt{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1} .g-card h3,.g-card .g-t3{font-size:clamp(1.15rem,1.05rem + .4vw,1.38rem);line-height:1.22;margin:0 0 10px} .g-card h3 a,.g-card .g-t3 a{text-decoration:none} .g-card h3 a::after,.g-card .g-t3 a::after{content:"";position:absolute;inset:0} .g-card{position:relative} .g-card-txt>p{margin:0;font-size:.93rem;line-height:1.55;color:var(--body)} .g-subs{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:6px;position:relative;z-index:1} .g-subs a{font-size:.85rem;color:var(--muted);text-decoration:none;display:flex;gap:8px} .g-subs a::before{content:"→";color:var(--terra-deep)} .g-subs a:hover{color:var(--terra-deep)} .g-endcta{padding:0 var(--gutter) var(--s4);background:var(--paper2)} .g-endcta .g-cta{margin:0 auto;max-width:980px} /* Corrections d'en-tête : contenu des articles (.pnc-) conservé tel quel */ .g-prose section[class^="pnc-"],.g-prose section[class*=" pnc-"]{margin-left:0;margin-right:0} @media (min-width:700px){ .g-prose ul.g-tiles{grid-template-columns:1fr 1fr;grid-auto-rows:1fr} .g-grid{grid-template-columns:1fr 1fr} .g-cta{grid-template-columns:auto 1fr;align-items:center} .g-cta-btns{grid-column:2} } @media (min-width:1080px){ .g-wrap{grid-template-columns:300px minmax(0,1fr);gap:clamp(48px,4.4vw,64px)} /* Paolo, 08/10/2026 : moins d’espace entre sommaire et article (180 → 64 px) ; bords gauche et droit toujours alignés sur l’en-tête */ .g-toc{display:block;position:sticky;top:110px;align-self:start;max-height:calc(100vh - 140px);overflow:auto;scrollbar-width:none} .g-toc ol{padding:0} .g-toc ol a{font-size:.86rem;padding:10px 0;opacity:.78;transition:opacity .25s,color .25s} .g-toc ol a:hover,.g-toc ol a.on{opacity:1;color:var(--ink)} .g-toc ol a.on::before{color:var(--terra)} .g-prog{height:2px;background:var(--line);margin-top:14px;border-radius:2px;overflow:hidden} .g-prog span{display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:var(--terra-deep)} .g-toc-m{display:none} .g-grid{grid-template-columns:repeat(3,1fr)} .g-grid .g-card.big{grid-column:span 1} .g-grid:not(.three) .g-card.big:first-child{grid-column:span 2;flex-direction:row} .g-grid:not(.three) .g-card.big:first-child .g-card-img{aspect-ratio:auto;flex:1.25} .g-grid:not(.three) .g-card.big:first-child .g-card-txt{flex:1;padding:32px;justify-content:center} .g-grid:not(.three) .g-card.big:first-child h3{font-size:1.8rem} .g-grid .g-card.wide{grid-column:span 2;flex-direction:row} .g-grid .g-card.wide .g-card-img{aspect-ratio:auto;flex:1.25} .g-grid .g-card.wide .g-card-txt{flex:1;padding:28px;justify-content:center} .g-hero-in{display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:40px} .g-hero-in>*{grid-column:1} .g-hero-play{grid-column:2;grid-row:3 / span 2;margin:0 0 4px} } @media (max-width:899px){ .g-meta{font-size:.8rem} .g-hero .g-meta .g-who,.g-ahero .g-meta .g-who{flex-basis:100%;margin-bottom:6px} .g-hero .g-meta .g-who+.g-dot::before,.g-ahero .g-meta .g-who+.g-dot::before{display:none} /* jamais de point en début de ligne (guides aussi, 20/10/2026) */ .g-ahero .g-meta>.g-dot,.g-hero .g-meta>.g-dot{flex-basis:100%}.g-ahero .g-meta>.g-dot::before,.g-hero .g-meta>.g-dot::before{display:none} /* téléphone : une info par ligne, comme les articles (21/10/2026 : « • Mis à jour » en début de ligne sur les immeubles) */ .g-hero{min-height:58svh;padding-top:104px;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))} /* Paolo, 06/10/2026 : un tiers de hauteur en moins sur téléphone */ .g-hero::after{background:linear-gradient(180deg,rgba(30,14,11,.5) 0%,rgba(30,14,11,.22) 26%,rgba(30,14,11,.42) 50%,rgba(30,14,11,.8) 100%)} /* téléphone : le titre sur deux ou trois lignes remonte sur la photo, voile plus dense (Devenir propriétaire, 21/10/2026) */ .g-hero h1{max-width:none} .g-cover{aspect-ratio:4/3;margin-left:calc(-1 * var(--gutter) / 2);margin-right:calc(-1 * var(--gutter) / 2)} .g-wrap{padding-bottom:calc(var(--s4) + 40px)} } @media (prefers-reduced-motion:reduce){ .g-card,.g-card-img img,.g-video-btn img{transition:none} } /* ===== En-tête du SITE petrini.mc (menus repris de www.petrini.mc) ===== */ .ps-nav{grid-template-columns:auto 1fr auto;padding:0 6px 0 16px} .ps-nav .ps-brand{grid-column:1;display:block} .ps-nav .ps-l{display:none} .ps-nav .ps-r{grid-column:3;display:flex;align-items:center;gap:6px} .ps-nav .ps-rl{display:none} .ps-a{position:relative;display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 12px;border-radius:999px;font:500 .86rem/1 var(--text);letter-spacing:.01em;text-decoration:none;color:inherit;transition:background .3s var(--ease)} .ps-a .icon{width:14px;height:14px;opacity:.7} .ps-a:hover,.ps-dd:focus-within>.ps-a{background:rgba(255,255,255,.18)} .nav.stuck .ps-a:hover,.nav.stuck .ps-dd:focus-within>.ps-a,.g-article .ps-a:hover,.g-hub-nu .ps-a:hover{background:rgba(61,30,25,.06)} .ps-a[aria-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:1.5px;border-radius:2px;background:currentColor;opacity:.7} .ps-ico{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:inherit;text-decoration:none;transition:background .3s var(--ease)} .ps-ico:hover{background:rgba(255,255,255,.18)}.nav.stuck .ps-ico:hover{background:rgba(61,30,25,.06)} /* revue UX du 27/10/2026 : le cœur porte l'anneau du globe (petrini-landing .globe>button), sur la photo comme sur fond clair */ .ps-ico{background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.35)} .nav.stuck .ps-ico,:where(.g-article,.g-authorpage,.g-hub-nu,.g-media) .nav .ps-ico{background:rgba(255,255,255,.6);border-color:rgba(61,30,25,.12)} .nav .ps-ico:hover{background:rgba(255,255,255,.3)} .nav.stuck .ps-ico:hover,:where(.g-article,.g-authorpage,.g-hub-nu,.g-media) .nav .ps-ico:hover{background:#fff} .ps-dd{position:relative} .ps-dd ul{position:absolute;left:0;top:48px;list-style:none;margin:0;padding:8px;min-width:210px;border-radius:18px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);box-shadow:0 0 0 1px rgba(61,30,25,.06),0 22px 44px -20px rgba(61,30,25,.45);color:var(--ink);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease)} .ps-dd ul::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px} .ps-dd:hover ul,.ps-dd:focus-within ul{opacity:1;transform:none;pointer-events:auto} .ps-dd li a{display:block;padding:9px 12px;border-radius:10px;font-size:.88rem;text-decoration:none} .ps-dd li a:hover{background:var(--paper2);color:var(--terra-deep)} .ps-dd .ps-all{margin-top:6px} /* « Tout voir » sans trait au-dessus (jamais de ligne de séparation, revue UX du 27/10/2026) */ .ps-dd .ps-all a{font-weight:600;color:var(--terra-deep)} .ps-burger{width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;display:grid;place-content:center;gap:6px;color:inherit;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)} .nav.stuck .ps-burger,.g-article .ps-burger,.g-authorpage .ps-burger,.g-hub-nu .ps-burger{background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(61,30,25,.12)} /* menu : deux traits de 1 px sur des pixels entiers (revue de Paolo du 08/10/2026 : « ligne non égale, pas fine ») */ .ps-burger span{display:block;width:18px;height:1px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease)} .ps-open .ps-burger span:first-child{transform:translateY(3.5px) rotate(45deg)} .ps-open .ps-burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)} .ps-open .nav{background:rgba(255,255,255,.9);color:var(--ink)} .ps-open .nav .logo-l{display:none}.ps-open .nav .logo-d{display:block} .ps-drawer{position:fixed;inset:0;z-index:39;padding:calc(84px + env(safe-area-inset-top,0px)) var(--gutter) calc(110px + env(safe-area-inset-bottom,0px));overflow:auto;background:rgba(251,245,241,.94);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);color:var(--ink)} .ps-drawer nav{display:grid} .ps-drawer nav>a,.ps-drawer summary{display:flex;justify-content:space-between;align-items:center;padding:16px 4px;border-bottom:1px solid var(--line);font:500 1.35rem/1.2 var(--display);text-decoration:none;color:var(--ink);cursor:pointer;list-style:none} .ps-drawer summary::-webkit-details-marker{display:none} .ps-drawer details[open] summary .icon{transform:rotate(180deg)} .ps-drawer details ul{list-style:none;margin:0;padding:6px 0 12px;display:grid;grid-template-columns:1fr 1fr;gap:4px} .ps-drawer details li a{display:block;padding:10px 12px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:.92rem;text-decoration:none} .ps-dlang{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .ps-dlang a{display:inline-flex;height:38px;align-items:center;padding:0 16px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:.85rem;text-decoration:none} .ps-dlang a[aria-current]{background:var(--ink);color:#fff;box-shadow:none} @media (min-width:1080px){ .ps-nav{grid-template-columns:1fr auto 1fr;padding:0 8px 0 10px} .ps-nav .ps-l{grid-column:1;display:flex;align-items:center;gap:2px} .ps-nav .ps-brand{grid-column:2} .ps-nav .ps-r{grid-column:3;justify-content:flex-end} .ps-nav .ps-rl{display:flex;gap:2px;margin-right:4px} .ps-burger,.ps-drawer{display:none!important} /* revue UX du 27/10/2026 : menu transparent sur la photo, le texte du premier lien et l'anneau du globe tombent sur les bords du contenu (120 et 1320 px en 1440 : 10 px de retrait + 12 px du lien à gauche, 8 px à droite) ; en pilule (menu défilé, articles), le retrait revient en glissant. Décalage par transform, sans toucher à la mise en page */ .ps-nav .ps-l,.ps-nav .ps-r{transition:transform .45s var(--ease)} .ps-nav:not(.stuck) .ps-l{transform:translateX(-22px)} .ps-nav:not(.stuck) .ps-r{transform:translateX(8px)} .a-art .ps-nav:not(.stuck) .ps-l,.a-art .ps-nav:not(.stuck) .ps-r{transform:none} } @media (min-width:1080px) and (max-width:1260px){.ps-a{padding:0 9px;font-size:.82rem}.ps-nav .logo{height:20px}.ps-nav:not(.stuck) .ps-l{transform:translateX(-19px)}} /* Pied de page du site */ .ps-foot .ps-about{max-width:42ch;margin:0 0 18px;color:#CDB3A6;font-size:.9rem;line-height:1.6} .ps-foot .ff-addr a{color:inherit} .ps-soc{display:flex;gap:8px;margin-top:18px} .ps-soc a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#F5E4D8;background:rgba(245,228,216,.08);box-shadow:inset 0 0 0 1px rgba(245,228,216,.16);transition:background .3s var(--ease)} .ps-soc a:hover{background:rgba(245,228,216,.18)} .ps-soc svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5} .ps-cols{grid-template-columns:1fr 1fr!important;gap:28px 20px!important} @media (min-width:1080px){.ps-cols{grid-template-columns:repeat(4,1fr)!important}} /* Pied de page, ordinateur (revue UX du 27/10/2026 ; le téléphone garde le pied « A » validé) : - bas de page : les mentions au centre exact (grille 1fr auto 1fr) et plus de trait au-dessus (jamais de ligne de séparation) ; - pastilles de contact sans icône, comme sur téléphone (WhatsApp et Telegram n'en avaient pas), marge = moitié de la hauteur ; sur une ligne quand elles tiennent (la ligne mesure 393 px en FR/EN, 422 en IT/DE, 440 en RU), sinon deux par ligne, jamais une seule ; - pour que la ligne tienne en FR/EN dès 1280, la colonne de gauche prend sur l'espace qui la sépare des liens (406 à 421 px) ; les colonnes de liens gardent leur largeur (2/3 d'avant), aucun lien de plus sur deux lignes, dans aucune langue */ @media (min-width:900px){ .ps-foot .bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-top:0} .ps-foot .bottom>:last-child{justify-self:end} .ps-foot .ff-left{container:ps-pied/inline-size} .ps-foot .ff-pills{display:grid;grid-template-columns:1fr 1fr;max-width:360px} .ps-foot .ff-pill{padding:0 19px;justify-content:center} .ps-foot .ff-pill svg{display:none} } @media (min-width:1080px){.foot.ps-foot .ff{grid-template-columns:minmax(0,1fr) calc((100% - clamp(32px,5vw,80px)) * 2 / 3);column-gap:clamp(24px,2vw,32px)}} @container ps-pied (min-width:400px){.ps-foot:is(:lang(fr),:lang(en)) .ff-pills{display:flex;max-width:none}} @container ps-pied (min-width:448px){.ps-foot .ff-pills{display:flex;max-width:none}} /* Vidéo hébergée */ .g-mp4 video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#1d0f0c} .g-mp4.on .g-video-btn{display:none} .ps-foot .ff-logo{height:auto!important;width:min(240px,70%)!important;margin:0 0 24px!important;display:block} .ps-drawer{background:rgba(251,245,241,.985)} /* ===== Règle de contraste des boutons (Petrini, 05/10/2026) : au survol, le texte garde toujours sa couleur ; un bouton plein reste blanc sur terracotta, jamais terracotta sur terracotta. ===== */ .btn.solid,.btn.solid:hover,.btn.solid:focus-visible{color:#fff!important} .btn.solid:hover{background:#9E4E3B} .btn.wa,.btn.wa:hover{color:var(--ink)!important} button.btn{font-family:var(--text)} /* Fil d'Ariane lisible sur la photo */ .g-hero .g-crumbs ol{text-shadow:0 1px 12px rgba(0,0,0,.45)} .g-hero .g-crumbs a{opacity:.86;color:#fff} .g-hero .g-crumbs [aria-current]{opacity:.86;color:#fff;font-weight:500} .g-ahero .g-crumbs [aria-current]{opacity:.7;color:var(--ink);font-weight:500} /* Vidéo : extraits muets en boucle, film complet au clic */ .g-mp4{background:#1d0f0c} .g-mp4 video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .g-mp4 .g-full{opacity:0;pointer-events:none;object-fit:contain;background:#000} .g-mp4.on .g-full{opacity:1;pointer-events:auto} .g-mp4.on .g-teaser,.g-mp4.on .g-video-btn,.g-mp4.on figcaption{display:none} .g-mp4 .g-video-btn{background:linear-gradient(180deg,rgba(30,14,11,0) 45%,rgba(30,14,11,.55) 100%);grid-template-rows:1fr auto;padding:0 0 18px} .g-mp4 .g-play{align-self:center} .g-vlabel{align-self:end;justify-self:center;display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;color:#fff;font:600 .82rem/1 var(--text);letter-spacing:.02em;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)} .g-mp4 figcaption{position:absolute;left:16px;top:14px;color:#fff;font-size:.74rem;letter-spacing:.06em;opacity:.85;pointer-events:none} .g-play{transition:transform .35s var(--ease)} .g-video-btn:hover .g-play{transform:scale(1.07)} /* Encart conseiller : Eugenia et Paolo Petrini */ .g-cta-people{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px 22px} .g-cta-people li{display:flex;align-items:center;gap:12px} .g-cta-people img{width:56px;height:56px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 8px 18px -10px rgba(61,30,25,.5)} .g-cta-people span{display:grid;line-height:1.25} .g-cta-people strong{font:500 1.02rem/1.2 var(--display);color:var(--ink)} .g-cta-people small{font-size:.78rem;color:var(--muted)} .g-cta{grid-template-columns:1fr!important} .g-cta-btns{grid-column:auto!important} /* Fenêtre de rendez-vous */ .g-rdv{width:min(760px,calc(100vw - 24px));height:min(860px,calc(100svh - 24px));padding:0;border:0;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 40px 90px -30px rgba(30,14,11,.6)} .g-rdv::backdrop{background:rgba(30,14,11,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .g-rdv[open]{display:flex;flex-direction:column} .g-rdv-top{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 18px;border-bottom:1px solid var(--line)} .g-rdv-top p{margin:0;flex:1;font:500 1.1rem var(--display);color:var(--ink)} .g-rdv-top .g-cta-faces img{width:36px;height:36px} .g-rdv-x{width:40px;height:40px;border-radius:50%;border:0;background:var(--paper2);font-size:1.4rem;cursor:pointer;color:var(--ink)} .g-rdv iframe{flex:1;width:100%;border:0} /* Carte auteur en fin de texte */ /* lot 1575 (Paolo : « le cadre est gris ») : crème et filet terracotta, jamais de gris */ .g-author{margin:3em 0 0;padding:clamp(20px,3vw,28px);border-radius:24px;display:grid;grid-template-columns:auto 1fr;gap:18px;background:linear-gradient(160deg,#FFFBF8 0%,var(--paper2) 100%);box-shadow:inset 0 0 0 1px rgba(178,90,69,.18),0 22px 46px -38px rgba(61,30,25,.45)} .g-author img{width:88px;height:88px;border-radius:50%;object-fit:cover} .g-author .g-eyebrow{margin:0 0 4px} .g-author-n{font:500 1.35rem/1.2 var(--display);margin:0!important} .g-author-n a{text-decoration:none!important;color:var(--ink)!important} .g-author-j{font-size:.85rem;color:var(--muted);margin:2px 0 10px!important} .g-author p:not([class]){font-size:.95rem;line-height:1.6;margin:0 0 12px} .g-author-l{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.88rem;color:var(--terra-deep);text-decoration:none} .g-author-l .icon{width:16px;height:16px} /* Lettre d'information, avant le pied de page */ .g-nl{padding:var(--s3) var(--gutter);background:var(--paper2)} .g-nl-in{max-width:var(--max);margin:0 auto;display:grid;gap:22px;padding:clamp(24px,4vw,48px);border-radius:28px;background:linear-gradient(140deg,#fff 0%,var(--rose) 140%);box-shadow:inset 0 0 0 1px rgba(178,90,69,.18),0 30px 60px -44px rgba(61,30,25,.6)} .g-nl-h{font:500 clamp(1.5rem,1.2rem + 1.4vw,2.3rem)/1.1 var(--display);color:var(--ink);margin:0 0 10px;letter-spacing:-.015em} /* revue UX du 27/10/2026 : titre à 32,4 px au plus (36,8 px coupait « de » seul en fin de ligne) ; surtitre #9E4E3B (le terracotta faisait 4,31:1 sur le beige). Sélecteurs à trois classes : petrini-landing/assets/club.css, chargé après, répète l'ancienne taille et l'ancienne couleur */ .g-nl .g-nl-txt .g-nl-h{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.025rem)} .g-nl .g-nl-txt .g-eyebrow{color:#9E4E3B} @media (min-width:900px){.g-nl .g-nl-txt .g-nl-h{text-wrap:balance}} .g-nl-txt p:last-child{margin:0;max-width:52ch} .g-nl-f{display:grid;grid-template-columns:1fr;gap:10px;align-content:center} .g-nl-f input{height:56px;border-radius:999px;border:0;padding:0 22px;font:400 1rem var(--text);color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1px rgba(61,30,25,.16)} .g-nl-f input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--terra-deep)} .g-nl-f .btn{--h:56px;justify-content:space-between} .g-nl-legal{grid-column:1/-1;margin:2px 0 0;font-size:.76rem;color:var(--muted)} .g-nl-legal a{color:inherit} .g-nl-ok{grid-column:1/-1;margin:0;font-weight:600;color:var(--terra-deep)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media (min-width:900px){.g-nl-in{grid-template-columns:1.1fr 1fr;align-items:center;gap:48px}.g-nl-f{grid-template-columns:1fr auto}} /* Club : carte de membre « Club privé » (Paolo, lot 906 du 10/10/2026, 2e reprise) — posée sur la carte du Club et débordant de son cadre (en haut à gauche sur ordinateur, en haut sur téléphone) ; le fond aux P entrelacés passe en dégradé dans le Club (plus de panneau à part). Flotte doucement et se redresse au survol ; immobile avec « réduire les animations ». */ .g-nl-in.avec-v{position:relative;background:linear-gradient(100deg,#fff 0%,rgba(255,255,255,.94) 38%,rgba(251,234,223,.55) 100%),#FBF3EE} .g-nl-carte{position:absolute;z-index:2;display:block;width:clamp(210px,24vw,320px);aspect-ratio:1.586;border-radius:16px;background:linear-gradient(135deg,#CB735D 0%,#B25A45 48%,#9C4B38 100%);box-shadow:0 34px 60px -26px rgba(61,30,25,.6),inset 0 0 0 1px rgba(255,255,255,.22);transform:rotate(-8deg);transition:transform .9s var(--ease);overflow:hidden} .g-nl-carte::before{content:"";position:absolute;inset:-40% -60%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);transform:translateX(-60%);transition:transform 1.4s var(--ease)} .g-nl-mot{position:absolute;left:9%;top:14%;width:44%;height:auto;filter:brightness(0) invert(1)} .g-nl-club{position:absolute;left:9%;bottom:13%;font:500 .62rem/1 var(--text);letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.92)} .g-nl-carte .g-nl-ok{position:absolute;right:8%;bottom:11%;width:22px;height:22px} .g-nl-ok circle{fill:#fff}.g-nl-ok path{fill:none;stroke:var(--terra-deep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} @media (hover:hover){.g-nl:hover .g-nl-carte{transform:rotate(-3deg) translateY(-6px)}.g-nl:hover .g-nl-carte::before{transform:translateX(60%)}} @media (prefers-reduced-motion:no-preference){.g-nl-carte{animation:g-nl-flotte 7s ease-in-out infinite}.g-nl:hover .g-nl-carte{animation-play-state:paused}} @keyframes g-nl-flotte{0%,100%{translate:0 0}50%{translate:0 -6px}} /* téléphone et tablette : la carte déborde au-dessus du Club, à droite ; place laissée au texte */ @media (max-width:899px){ .g-nl:has(.avec-v){padding-top:calc(var(--s3) + 70px)} .g-nl-in.avec-v{padding-top:clamp(110px,30vw,150px);background:linear-gradient(180deg,rgba(251,234,223,.5) 0%,rgba(255,255,255,.94) 46%,#fff 100%),#FBF3EE} .g-nl-carte{top:-64px;right:clamp(16px,6vw,40px);width:min(62vw,260px)} } @media (min-width:900px){ .g-nl:has(.avec-v){padding-top:calc(var(--s3) + 40px)} .g-nl-in.avec-v{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);padding-left:calc(clamp(210px,24vw,320px) + clamp(48px,5vw,80px))} /* titre plus large que la fiche (revue UX du 27/10/2026, 1.1fr avant) */ .g-nl-carte{left:clamp(-36px,-2vw,-16px);top:-44px} } /* MODULE Club privé, piste A « nuit monégasque » (lot 4350, Paolo : « pas sexy, pareil rebarbatif les fonds et transitions, je veux plus jouer avec les outils qu'on a, on doit avoir un site exceptionnel » ; choisie le 29/10/2026 sur la page de choix, tout le site, accueil compris) : la bande se lève sur la page (coins arrondis, ombre douce), photo d'intérieur assombrie (img.g-nl-ph, chargée à la demande) et motif aux P en blanc (ps_motif), carte du Club en verre fumé ; elle se fond dans le pied de page. Fiche d'inscription ouverte (.is-2) : le verre s'éclaire, la fiche se lit en encre. Sélecteurs .g-nl.g-nl-nuit : club.css (petrini-landing) se charge après et garde le Club clair des landings Ads. */ /* la bande se pose sur le bloc d'avant (lot 4357, Paolo : « transition non conforme, on voit une couleur et pas le fond du bloc d'avant ») : elle remonte de la hauteur de ses coins, qui laissent voir ce bloc et jamais le blanc de la page ; le bloc d'avant s'allonge d'autant (bordure transparente peinte par son propre fond), l'air au-dessus de la bande ne change pas. Fiche de bien : fiche-t12.css. */ :root{--nuit-r:28px} @media (min-width:900px){:root{--nuit-r:44px}} .g-nl.g-nl-nuit{position:relative;isolation:isolate;margin-top:calc(-1 * var(--nuit-r));background:#2B1612;border-radius:var(--nuit-r) var(--nuit-r) 0 0;box-shadow:0 -22px 44px -26px rgba(30,14,11,.5);padding-bottom:calc(var(--s3) + 20px)} main:has(+ .g-nl.g-nl-nuit)>:last-child,:not(main):has(+ .g-nl.g-nl-nuit){border-bottom:var(--nuit-r) solid transparent;background-origin:border-box} .g-nl.g-nl-nuit::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(30,14,11,.8) 0%,rgba(30,14,11,.84) 60%,#3D1E19 100%)} .g-nl-nuit>.g-nl-ph{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 40%;border-radius:inherit} .g-nl-nuit>.motif{border-radius:inherit;--motif-couleur:#fff;--motif-opacite:.06;--motif-fondu:linear-gradient(180deg,#000 0,#000 60%,transparent 100%)} .g-nl.g-nl-nuit .g-nl-in.avec-v{background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 40px 80px -44px rgba(0,0,0,.6);transition:background .5s var(--ease),box-shadow .5s var(--ease)} .g-nl.g-nl-nuit .g-nl-txt .g-nl-h{color:#FFF1E8} .g-nl.g-nl-nuit .g-nl-txt .g-eyebrow{color:#F2C6B6} .g-nl.g-nl-nuit .g-nl-txt p:not(.g-nl-h):not(.g-eyebrow),.g-nl.g-nl-nuit .g-consent{color:rgba(245,228,216,.85)} .g-nl.g-nl-nuit .g-consent.need{color:var(--ink)} .g-nl.g-nl-nuit .g-nl-f input[type=email]{box-shadow:none} .g-nl.g-nl-nuit .g-nl-ok{color:#F2C6B6} /* fiche d'inscription ouverte (.is-2), même nuit (Paolo, 3e tour : « la carte ouverte doit être dans le même style nuit monégasque ») : textes clairs, curseur Tout | Ventes | Locations et pastilles en verre fumé, choix en terracotta ; champs blancs comme le premier */ .g-nl.g-nl-nuit .g-club-h{color:#FFF1E8} .g-nl.g-nl-nuit .g-club-p,.g-nl.g-nl-nuit .g-seg-cap{color:rgba(245,228,216,.78)} .g-nl.g-nl-nuit .g-club-lab{color:#F2C6B6} .g-nl.g-nl-nuit .g-fld span,.g-nl.g-nl-nuit .g-club-pro summary{color:rgba(245,228,216,.78)} .g-nl.g-nl-nuit .g-fld input{box-shadow:none} .g-nl.g-nl-nuit .g-seg{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)} .g-nl.g-nl-nuit .g-seg-thumb{background:var(--terra-deep);box-shadow:0 8px 20px -8px rgba(0,0,0,.55)} .g-nl.g-nl-nuit .g-seg button{color:#FFF1E8} .g-nl.g-nl-nuit .g-seg button[aria-checked="true"]{color:#fff} .g-nl.g-nl-nuit .g-seg button:focus-visible{outline-color:#F2C6B6} .g-nl.g-nl-nuit .g-club-prochips button{background:rgba(255,255,255,.08);color:#FFF1E8;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)} .g-nl.g-nl-nuit .g-club-prochips button[aria-checked="true"]{background:var(--terra-deep);color:#fff;box-shadow:none} .g-nl.g-nl-nuit .g-club-done{color:#FFF1E8} .g-nl.g-nl-nuit .g-club-done b{color:#F2C6B6} /* sans marge négative : la bande ne remonte jamais sur le bloc précédent (elle recouvrait la ligne « Collection privée » des fiches de bien) ; coins arrondis et ombre vers le haut gardent l'effet de bande qui se lève */ /* Pied de page : titres de colonnes (pas de Hn) */ .ps-ct{font:500 1.1rem var(--display);margin:0 0 12px;color:#F5E4D8} .ps-ct a{color:inherit;text-decoration:none}.ps-ct a:hover{text-decoration:underline;text-underline-offset:.2em} /* Page auteur */ .g-au{padding-bottom:var(--s3)} .g-au-in{display:grid;gap:clamp(24px,4vw,64px);align-items:start} .g-au-ph{margin:0;border-radius:28px;overflow:hidden;aspect-ratio:4/5;background:var(--paper2);box-shadow:0 30px 60px -40px rgba(61,30,25,.5)} .g-au-ph img{width:100%;height:100%;object-fit:cover} .g-au h1{margin-bottom:22px} .g-au-bio{max-width:680px} .g-au-contact{padding:0 var(--gutter) var(--s3)} .g-au-contact .inner{max-width:980px} .g-au-contact h2,.g-author-page h2{margin:0 0 20px} @media (min-width:900px){.g-au-in{grid-template-columns:minmax(280px,420px) 1fr}.g-au-ph{position:sticky;top:110px}} .g-later{display:none} .g-grid.all .g-later{display:flex} .g-moreall{grid-column:1/-1;display:flex;justify-content:center;margin:12px 0 0} .g-grid.all .g-moreall{display:none} /* MODULE Pagination (lot 1542 ; ps_pagination, site.js data-pag) : mêmes pastilles que la pagination du catalogue (.pc-pag) */ .g-pag{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;margin:28px 0 0} .g-pag ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px} .g-pag button,.g-pag-x{display:grid;place-items:center;min-width:44px;height:44px;padding:0 10px;border:0;border-radius:999px;font:600 .9rem/1 var(--text);color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:box-shadow .3s var(--ease),background .3s var(--ease)} .g-pag-x{background:none;box-shadow:none;cursor:default;min-width:24px;padding:0} .g-pag button:hover:not(:disabled):not([aria-current]){box-shadow:inset 0 0 0 1px rgba(178,90,69,.45)} .g-pag button[aria-current]{background:var(--ink);color:#fff;box-shadow:none;cursor:default} .g-pag button:disabled{opacity:.35;cursor:default} .g-pag-f .icon{width:18px;height:18px;fill:none;stroke:var(--terra-deep);stroke-width:2} .g-pag-av .icon{transform:scaleX(-1)} @media (max-width:899px){.g-au-ph{width:min(220px,62%);aspect-ratio:1;border-radius:24px}.g-au{padding-top:calc(96px + env(safe-area-inset-top,0px))}} /* Fil d'Ariane : règle pour tout le site. Discret ; la page courante est coupée si elle est longue ; sur téléphone, seul le niveau parent est montré (« ‹ Parent »), le titre de la page étant juste dessous. */ .g-crumbs [aria-current]{max-width:42ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block} .g-crumbs li{min-width:0} @media (max-width:899px){ .g-crumbs li{display:none} .g-crumbs li[aria-current]{display:none} .g-crumbs li:nth-last-child(2){display:flex} .g-crumbs li:nth-last-child(2)::before{content:"";width:6px;height:6px;margin:0 8px 0 2px;background:none;border-radius:0;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.8} } /* Canaux de contact : Telegram et e-mail à côté de WhatsApp */ .wa-dot.tg{background:#229ED9} .wa-dot.ml{background:var(--ink);color:#fff} .wa-dot.ml svg{fill:none;stroke:#fff} .g-cta-btns{display:flex;flex-wrap:wrap;gap:8px} .g-cta-btns .btn.wa{padding:0 16px 0 7px} .g-rdv-top p small{display:block;font:400 .78rem/1.3 var(--text);color:var(--muted);margin-top:2px} .g-rdv-alt{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--paper2);font-size:.85rem;color:var(--muted)} .g-rdv-alt span:first-child{margin-right:4px} .g-pill{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 5px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none;font-weight:600;font-size:.82rem} .g-pill .wa-dot{width:28px;height:28px} .g-pill .wa-dot svg{width:15px;height:15px} /* FAQ : règle pour tout le site (après les guides, avant le club) */ .g-faq{padding:var(--s4) var(--gutter);background:var(--paper)} .g-faq .inner{max-width:880px} .g-faq h2,.g-faq .g-t2{margin:0 0 clamp(20px,3vw,32px)} .g-faq-l{display:grid;gap:10px} /* modèle unique de FAQ du site (décision de Paolo du 07/10/2026 : celui de la page Gestion locative) ; .pc-faq = FAQ écrite dans le texte des listes du catalogue (lot 906) */ .g-faq details,.pc-faq details{background:#fff;border-radius:18px;padding:4px 20px;box-shadow:inset 0 0 0 1px var(--line)} .g-faq summary,.pc-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 0;color:var(--ink)} .g-faq summary::-webkit-details-marker,.pc-faq summary::-webkit-details-marker{display:none} .g-faq summary h3,.pc-faq summary strong{font:600 1rem/1.35 var(--text);letter-spacing:0;color:var(--ink);margin:0} .g-faq summary::after,.pc-faq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--rose);color:var(--terra-deep);font:500 1.2rem/1 var(--text)} .g-faq details[open] summary::after,.pc-faq details[open] summary::after{content:"\2212"} .g-faq-a{padding:0 0 16px;font-size:.95rem;line-height:1.7} .g-faq-a p{margin:0;max-width:none;font-size:.95rem} .g-faq-a a{color:var(--ink);text-decoration-color:rgba(178,90,69,.55);text-underline-offset:.2em} .g-draft{display:inline-block;margin-left:8px;padding:3px 8px;border-radius:6px;background:#FFF3C4;color:#6B4E00;letter-spacing:.04em;text-transform:none;font-weight:600} /* COMPOSANT : tuiles (listes de phrases) — même taille ; une tuile reliée est cliquable en entier (lien étiré), léger voile au survol */ .g-tiles li a{color:var(--ink)!important;text-decoration:none!important} .g-tiles li a::after{content:"";position:absolute;inset:0;border-radius:18px} .g-tiles li:has(a){cursor:pointer} .g-tiles li:has(a):hover{background:linear-gradient(160deg,#fff 0%,var(--rose) 100%);box-shadow:inset 0 0 0 1px rgba(178,90,69,.35),0 14px 30px -22px rgba(61,30,25,.55)} .g-tiles li:has(a):hover a{color:var(--terra-deep)!important} .g-tiles li:has(a)::after{content:"";position:absolute;right:16px;bottom:14px;width:7px;height:7px;border-top:1.5px solid var(--terra-deep);border-right:1.5px solid var(--terra-deep);transform:rotate(45deg);opacity:0;transition:opacity .3s var(--ease),transform .3s var(--ease)} .g-tiles li:has(a):hover::after{opacity:1;transform:translateX(3px) rotate(45deg)} /* COMPOSANT : conseiller — Eugenia et Paolo vers leur page ; quatre boutons de même taille */ .g-cta-people a{display:flex;align-items:center;gap:12px;text-decoration:none;border-radius:999px;padding-right:10px;transition:background .3s var(--ease)} .g-cta-people a:hover strong{color:var(--terra-deep)} .g-cta-btns{display:grid!important;grid-template-columns:1fr 1fr;gap:10px} .g-cb{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 16px 8px 8px;border:0;border-radius:999px;cursor:pointer;background:#fff;color:var(--ink);text-decoration:none;font:600 .9rem/1.25 var(--text);text-align:left;box-shadow:inset 0 0 0 1px var(--line),0 8px 20px -18px rgba(61,30,25,.5);transition:box-shadow .3s var(--ease),transform .3s var(--ease)} .g-cb:hover{box-shadow:inset 0 0 0 1px rgba(178,90,69,.45),0 14px 26px -18px rgba(61,30,25,.5);transform:translateY(-1px)} .g-cb .wa-dot{flex:none;width:40px;height:40px} .g-cb .wa-dot svg{width:19px;height:19px} .g-cb-rdv{background:var(--terra-deep);color:#fff;box-shadow:0 12px 26px -16px rgba(178,90,69,.8)} .g-cb-rdv:hover{background:#9E4E3B;box-shadow:0 16px 30px -16px rgba(178,90,69,.9)} .g-cb-rdv .wa-dot.cal{background:rgba(255,255,255,.18)} .g-cb-rdv .wa-dot.cal svg{stroke:#fff} .wa-dot.ml,.wa-dot.cal{background:var(--rose)!important;color:var(--terra-deep)} .wa-dot.ml svg,.wa-dot.cal svg{fill:none!important;stroke:var(--terra-deep)!important;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} @media (max-width:420px){.g-cta-btns{grid-template-columns:1fr}} /* COMPOSANT : carte_auteur — la signature d'origine en tête */ .g-author-sig{font-size:.86rem!important;line-height:1.5!important;color:var(--muted);margin:0 0 6px!important} .g-author-sig a{color:inherit!important} /* En-tête du site : liens en terracotta quand l'en-tête est sur fond clair (Paolo, 06/10/2026 : « pas en noir ») */ .nav.stuck .ps-a,.g-article .nav .ps-a,.g-authorpage .nav .ps-a,.g-hub-nu .nav .ps-a{color:var(--terra-deep)} .nav.stuck .ps-a:hover,.g-article .nav .ps-a:hover,.g-authorpage .nav .ps-a:hover,.g-hub-nu .nav .ps-a:hover{color:#9E4E3B} /* COMPOSANT : carte_guide — aspect validé en v5 (Paolo, 06/10/2026). Le titre garde le niveau H2 du site actuel (invisible à l'œil) et le texte complet du site actuel reste dans la page, l'affichage s'arrête à 4 lignes comme avant. */ .g-guides .g-card h2{font-size:clamp(1.15rem,1.05rem + .4vw,1.38rem);line-height:1.22;margin:0 0 10px;max-width:none} .g-card h2 a{text-decoration:none} .g-card h2 a::after{content:"";position:absolute;inset:0} .g-grid:not(.three) .g-card.big:first-child h2{font-size:1.8rem} .g-card-txt>p.g-acc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden} .g-card-txt>p.g-acc a{position:relative;z-index:1;color:inherit;text-decoration:none} .g-card-txt>p.g-acc a:hover{color:var(--terra-deep);text-decoration:underline;text-underline-offset:.18em} .g-card-txt>p.g-acc strong,.g-card-txt>p.g-acc b{font-weight:inherit} /* COMPOSANT : dans_ce_guide — une pastille longue passe à la ligne, jamais de débordement sur téléphone */ .g-chips li{max-width:100%} .g-chips a{max-width:100%;height:auto;min-height:44px;padding-top:6px;padding-bottom:6px;line-height:1.3} .g-chips .num{flex:none} /* COMPOSANT : cta_catalogue — bandeau du site actuel vers les appartements à vendre (en tête du texte) */ .g-cat{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin:0 0 2.2em;padding:clamp(18px,2.6vw,24px) clamp(18px,2.6vw,26px);border-radius:22px;background:linear-gradient(140deg,#fff 0%,var(--rose) 150%);box-shadow:inset 0 0 0 1px rgba(178,90,69,.2),0 18px 40px -34px rgba(61,30,25,.55)} .g-cat-t{flex:1 1 280px;min-width:0} .g-cat-h{margin:0 0 6px!important;font:500 clamp(1.12rem,1rem + .5vw,1.3rem)/1.25 var(--display);color:var(--terra-deep)} .g-cat-h span{white-space:nowrap} .g-cat-s{margin:0!important;font-size:.92rem!important;line-height:1.45;color:var(--body)} .g-prose a.g-cat-b,.g-cat-b{flex:none;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:999px;background:#fff;color:var(--ink);text-decoration:none!important;font-weight:600;font-size:.9rem;box-shadow:inset 0 0 0 1px rgba(178,90,69,.45);transition:box-shadow .3s var(--ease),transform .3s var(--ease)} .g-cat-b .icon{width:16px;height:16px;color:var(--terra-deep);transition:transform .3s var(--ease)} .g-cat-b:hover{box-shadow:inset 0 0 0 1px var(--terra-deep),0 10px 22px -14px rgba(178,90,69,.6);transform:translateY(-1px)} .g-cat-b:hover .icon{transform:translateX(3px)} /* COMPOSANT : selection_biens — les 6 biens mis en avant (ordre ImmoToolBox), rail sur téléphone, grille de 3 sur ordinateur */ .g-sel{padding:var(--s4) var(--gutter) var(--s3);background:var(--paper)} .g-sel h2,.g-sel .g-t2{margin:0 0 clamp(24px,3.4vw,40px);max-width:22ch} .g-sel-r{list-style:none;margin:0;padding:0 0 6px;display:grid;grid-auto-flow:column;grid-auto-columns:min(82%,340px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none} .g-sel-r::-webkit-scrollbar{display:none} .g-sel-r li{scroll-snap-align:start;display:flex} .g-sel-c{display:flex;flex-direction:column;width:100%;border-radius:22px;overflow:hidden;background:#fff;color:var(--body);text-decoration:none;box-shadow:inset 0 0 0 1px var(--line),0 18px 40px -34px rgba(61,30,25,.6);transition:transform .45s var(--ease),box-shadow .45s var(--ease)} .g-sel-c:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(178,90,69,.3),0 30px 60px -36px rgba(61,30,25,.6)} .g-sel-img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--paper2)} .g-sel-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)} .g-sel-c:hover .g-sel-img img{transform:scale(1.04)} .g-sel-bds{position:absolute;left:12px;top:12px;display:flex;gap:6px} .g-sel-bd,.g-sel-p{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;font:600 .74rem/1 var(--text);letter-spacing:.04em;color:var(--ink);background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85)} .g-sel-p{position:absolute;left:12px;bottom:12px;height:auto;min-height:34px;padding:6px 14px;flex-wrap:wrap;gap:2px 6px;font:600 .9rem/1.2 var(--text);font-variant-numeric:tabular-nums;letter-spacing:0} .g-sel-p small{font-weight:500;font-size:.74rem;color:var(--muted)} .g-sel-b{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px;flex:1} .g-sel-l{font:600 .7rem/1.3 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--terra-deep)} .g-sel-t{font:500 1.15rem/1.25 var(--display);color:var(--ink)} .g-sel-d{font-size:.88rem;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden} .g-sel-f{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:10px} .g-sel-f span{font-size:.78rem;font-variant-numeric:tabular-nums;padding:4px 10px;border-radius:999px;background:var(--paper2);color:var(--ink)} @media (min-width:1080px){.g-sel-r{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:auto;overflow:visible;gap:22px}} /* COMPOSANT : quartiers — quartiers de Monaco et leurs immeubles (maillage du site actuel) */ .g-qu{padding:var(--s3) var(--gutter) var(--s4);background:var(--paper2)} .g-qu-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px} .g-qu-l>li{min-width:0} .g-qu-d{display:inline-flex;align-items:center;min-height:38px;padding:6px 16px;border-radius:999px;background:#fff;color:var(--ink);text-decoration:none;font-weight:600;font-size:.9rem;box-shadow:inset 0 0 0 1px rgba(178,90,69,.35);transition:background .3s var(--ease),color .3s var(--ease)} .g-qu-d:hover{background:var(--terra-deep);color:#fff} .g-qu-l ul{list-style:none;margin:10px 0 0;padding:0 0 0 4px;display:grid;gap:4px} .g-qu-l ul a{font-size:.85rem;color:var(--muted);text-decoration:none} .g-qu-l ul a:hover{color:var(--terra-deep);text-decoration:underline;text-underline-offset:.18em} @media (min-width:700px){.g-qu-l{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (min-width:1080px){.g-qu-l{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 24px}} /* COMPOSANT : a_lire — « Les derniers articles » et « Recherches fréquentes » (colonne latérale de petrini.mc, ici après le texte) */ .g-alire{background:var(--paper)} .g-alire .g-grid{margin-bottom:clamp(28px,4vw,44px)} .g-rech ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px} .g-rech a{display:inline-flex;align-items:center;min-height:40px;padding:6px 16px;border-radius:999px;background:var(--paper2);color:var(--ink);text-decoration:none;font-size:.88rem;font-weight:500;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s var(--ease),background .3s var(--ease)} .g-rech a:hover{background:#fff;box-shadow:inset 0 0 0 1px rgba(178,90,69,.45)} .g-new{padding-top:0} /* Intitulé de section qui n'est pas un titre (le site actuel l'affiche en

) */ .g-sec-h{font:500 clamp(1.5rem,1.2rem + 1.4vw,2.3rem)/1.15 var(--display);color:var(--ink);letter-spacing:-.015em;margin:0 0 clamp(24px,3.4vw,40px);max-width:24ch} /* carte sans image (page du CMS sans visuel de chapeau) */ .g-card.noimg .g-card-txt{padding-top:24px} /* images glissées dans le texte d'une carte (CMS) : gardées dans la page, non affichées dans la carte */ .g-card-txt>p img{display:none} /* Images du texte (CMS) : le CMS impose souvent une taille fixe (style="width:1200px;height:675px") ; la largeur suit la colonne, la hauteur suit les proportions de l'image (jamais d'image écrasée). */ .g-prose img{max-width:100%!important;height:auto!important} .g-prose figure,.g-prose p:has(>img){max-width:100%} /* COMPOSANT : sommaire sur téléphone — ouvert en tête du texte, pastille du chapitre en cours, sommaire en panneau du bas */ .g-toc-m{margin:0 0 30px;padding:16px 0 4px;border-radius:20px;background:var(--paper2);box-shadow:inset 0 0 0 1px var(--line)} .g-toc-m .g-eyebrow{margin:0 18px 6px} .g-toc-m li:first-child a{border-top:0} .g-chap{position:fixed;z-index:38;top:calc(70px + env(safe-area-inset-top,0px));left:50%;max-width:min(560px,calc(100vw - 2 * var(--gutter)));display:flex;align-items:center;gap:10px;height:44px;padding:0 6px 0 16px;border:0;border-radius:999px;cursor:pointer;color:var(--ink);font:500 .86rem/1 var(--text);background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);box-shadow:0 0 0 1px rgba(61,30,25,.08),0 12px 30px -16px rgba(61,30,25,.45);opacity:0;pointer-events:none;transform:translate(-50%,-10px);transition:opacity .35s var(--ease),transform .35s var(--ease)} .g-chap.on{opacity:1;pointer-events:auto;transform:translate(-50%,0)} .g-chap-n{font:600 .72rem/1 var(--text);letter-spacing:.06em;color:var(--terra-deep);font-variant-numeric:tabular-nums} .g-chap-t{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .g-chap-r{flex:none;width:32px;height:32px;transform:rotate(-90deg)} .g-chap-r circle{fill:none;stroke:var(--line);stroke-width:3} .g-chap-r .v{stroke:var(--terra-deep);stroke-linecap:round;stroke-dasharray:calc(var(--p,0) * 100) 100} .g-chap-s{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:72svh;overflow:auto;padding:10px 0 calc(16px + env(safe-area-inset-bottom,0px));border:0;border-radius:24px 24px 0 0;background:#fff;color:var(--ink);box-shadow:0 -20px 50px -20px rgba(30,14,11,.45);animation:g-up .32s var(--ease)} .g-chap-s::backdrop{background:rgba(30,14,11,.35);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .g-chap-s.out{animation:g-down .22s ease-in forwards} .g-chap-grab{display:block;width:40px;height:5px;margin:0 auto 14px;border-radius:9px;background:rgba(61,30,25,.18)} .g-chap-s .g-eyebrow{margin:0 18px 6px} .g-chap-s ol a{padding:13px 0;font-size:1rem} .g-chap-s ol a.on{color:var(--terra-deep);font-weight:600} @keyframes g-up{from{transform:translateY(100%)}} @keyframes g-down{to{transform:translateY(100%)}} @media (min-width:1080px){.g-chap,.g-chap-s{display:none!important}} @media (prefers-reduced-motion:reduce){.g-chap,.g-chap-s{transition:none;animation:none}} .g-chap-s:focus{outline:none} /* pastille du chapitre : même largeur et mêmes bords que l'en-tête (Paolo, 06/10/2026) */ .g-chap{left:var(--gutter);right:var(--gutter);max-width:var(--max);margin:0 auto;height:48px;padding:0 6px 0 18px;transform:translateY(-10px)} .g-chap.on{transform:none} .g-chap-t{flex:1} /* TEST barre du bas — variante B (téléphone) : une seule barre, chapitre en cours + « Parler à un conseiller » */ .g-barb{display:none} @media (max-width:1079px){ html[data-v=b] .sticky,html[data-v=b] .g-chap{display:none!important} html[data-v=b] .g-barb{position:fixed;left:var(--gutter);right:var(--gutter);bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:45;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;padding:6px;border-radius:999px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 14px 30px -14px rgba(61,30,25,.45)} } .g-barb-c{display:flex;align-items:center;gap:10px;min-width:0;height:52px;padding:0 10px 0 6px;border:0;border-radius:999px;background:transparent;color:var(--ink);text-align:left;cursor:pointer;font:500 .84rem/1.2 var(--text)} .g-barb-c .g-chap-r{width:36px;height:36px} .g-barb-t{display:grid;min-width:0} .g-barb-t small{font:600 .62rem/1.2 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--terra-deep)} .g-barb-t .g-chap-t{overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .g-barb-cta{--h:52px;padding:0 18px!important;font-size:.86rem!important;font-weight:650;white-space:nowrap;box-shadow:0 8px 18px -8px rgba(178,90,69,.7)} /* COMPOSANT : pub — message au visiteur dans le panneau du sommaire (téléphone seulement) */ .g-pub-slot{padding:0 16px 14px} .g-pub{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:10px;border-radius:20px;background:linear-gradient(140deg,#fff 0%,var(--rose) 150%);box-shadow:inset 0 0 0 1px rgba(178,90,69,.22);text-decoration:none;color:var(--body)} .g-pub img{width:96px;height:96px;border-radius:14px;object-fit:cover} .g-pub-t{display:grid;gap:3px;min-width:0} .g-pub-t small{font:600 .62rem/1.2 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--terra-deep)} .g-pub-t strong{font:500 1.08rem/1.2 var(--display);color:var(--ink)} .g-pub-t span{font-size:.8rem;line-height:1.4} .g-pub-t em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-weight:600;font-size:.8rem;color:var(--terra-deep)} .g-pub-t em .icon{width:14px;height:14px} .g-barb-r{position:relative;flex:none;width:40px;height:40px;display:grid;place-items:center} .g-barb-r .g-chap-r{position:absolute;inset:0;width:40px;height:40px} .g-barb-n{position:relative;font:700 .7rem/1 var(--text);color:var(--terra-deep);font-variant-numeric:tabular-nums} .g-barb-t .g-chap-t{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:.8rem;line-height:1.25} /* barre B : titre du chapitre sur 3 lignes au plus (les titres varient beaucoup d'une langue à l'autre — Paolo, 07/10/2026) */ .g-barb-c{height:auto;min-height:52px;padding-top:4px;padding-bottom:4px} .g-barb-t .g-chap-t{-webkit-line-clamp:3;font-size:.76rem;line-height:1.2} html[data-v=b] .g-barb{align-items:center} .g-who a{color:inherit;text-decoration:none} .g-who a:hover strong{text-decoration:underline;text-underline-offset:.18em} /* titres : un mot très long (russe, allemand) se coupe avec un trait d'union plutôt que de déborder sur téléphone */ .g-hero h1,.g-ahero h1,.g-prose h2,.g-card h2,.g-card h3,.g-card .g-t3{overflow-wrap:normal;-webkit-hyphens:manual;hyphens:manual} /* règle de Paolo (08/10/2026) : jamais de mot coupé dans un titre ; un mot trop long fait réduire le titre (assets/site.js, ajuster) */ /* ===================== COMPOSANT : kit visuel Petrini 2027 (validé par Paolo le 07/10/2026, atelier/kit-2027) ===================== Encarts des pages (tableaux, courbes, chiffres clés, résumé, regard professionnel, frise, guides connexes, signature des données). Le CMS écrit le contenu ; outils/migration/exporter.py (kit_cms) pose ces classes ; assets/kit.js anime et dessine. */ .k{color:var(--body);font:400 1.02rem/1.68 var(--text)} .k *{box-sizing:border-box} .k .num{font-variant-numeric:tabular-nums lining-nums} .k-eb{display:inline-flex;align-items:center;gap:10px;font:700 .7rem/1 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--terra-deep)} /* lot 4350 (Paolo : « j'aime pas ce genre de traits, à supprimer avant le texte de partout ») : plus de trait avant le sur-titre */ .k .k-t{font:500 clamp(1.35rem,1.1rem + 1vw,1.9rem)/1.15 var(--display);letter-spacing:-.01em;color:var(--ink);margin:10px 0 6px;text-wrap:balance} .k .k-sub{font-size:.86rem;color:var(--muted);margin:0} .sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Carte commune : blanc, rayon 26, liseré fin, ombre douce (même famille que la FAQ et les tuiles validées) */ .k-card{background:#fff;border-radius:26px;padding:22px 18px;box-shadow:inset 0 0 0 1px var(--line),0 24px 60px -44px rgba(61,30,25,.55)} @media (min-width:900px){.k-card{padding:36px 36px 30px}} /* ---------- 01 Tableau de données → barres classées (le reste le contenu) ---------- */ .k-rank table{width:100%;border-collapse:separate;border-spacing:0 8px;margin:18px 0 4px} .k-rank thead{display:none} .k-rank tbody tr{display:grid;grid-template-columns:96px 1fr;grid-template-areas:"e v" "b b" "x x";gap:6px 12px;padding:12px 14px;border-radius:16px;background:var(--paper2);transition:background .3s} .k-rank tbody td{padding:0} .k-rank .e{grid-area:e;font:600 .86rem/1.3 var(--text);color:var(--ink)} .k-rank .v{grid-area:v;font:600 1.12rem/1.2 var(--text);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums} .k-rank .x{grid-area:x;font-size:.78rem;line-height:1.4;color:var(--muted)} .k-rank .k-bar{grid-area:b;height:10px;border-radius:6px;background:rgba(61,30,25,.07);overflow:hidden;align-self:center} .k-rank .k-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#E9B9A8,var(--terra));transform-origin:left;transform:scaleX(0);transition:transform 1.3s var(--ease);transition-delay:calc(var(--i,0) * 70ms)} .k-rank.on .k-bar i{transform:scaleX(var(--w,0))} .k-rank tr.top{background:var(--rose)} .k-rank tr.top .k-bar i{background:linear-gradient(90deg,var(--terra),var(--terra-deep))} .k-rank tr.top .v::after{content:attr(data-badge);display:inline-block;margin-left:8px;vertical-align:2px;padding:3px 8px;border-radius:999px;background:var(--terra-deep);color:#fff;font:700 .6rem/1.2 var(--text);letter-spacing:.12em;text-transform:uppercase} @media (min-width:900px){ .k-rank thead{display:block} .k-rank thead tr,.k-rank tbody tr{display:grid;grid-template-columns:120px minmax(0,1fr) 250px 300px;grid-template-areas:"e b v x";align-items:center;gap:18px;padding:14px 18px} .k-rank thead tr{padding:0 18px 2px} .k-rank thead th{font:700 .66rem/1.3 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0} .k-rank thead th.v{text-align:right} .k-rank tbody tr:hover{background:var(--rose)} .k-rank .k-bar{height:12px} } /* ---------- 02 Courbe → ligne dessinée au défilement, aire rose, lecture au doigt ---------- */ .k-line .k-plot{position:relative;margin:18px 0 0;touch-action:pan-y} .k-line svg{display:block;width:100%;height:auto;overflow:visible} .k-line .grid line{stroke:rgba(61,30,25,.08);stroke-width:1} .k-line .ax text{font:500 11px var(--text);fill:var(--muted)} .k-line .area{fill:url(#kGrad);opacity:0;transition:opacity 1.2s .9s} .k-line .path{fill:none;stroke:var(--terra);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 2s var(--ease)} .k-line.on .path{stroke-dashoffset:0} .k-line.on .area{opacity:1} .k-line .dot{fill:#fff;stroke:var(--terra-deep);stroke-width:3;opacity:0;transition:opacity .4s 1.9s} .k-line.on .dot{opacity:1} .k-line .end{opacity:0;transition:opacity .5s 2s} .k-line.on .end{opacity:1} .k-line .end rect{fill:var(--terra-deep)} .k-line .end text{font:700 12px var(--text);fill:#fff} .k-line .cur{pointer-events:none;opacity:0;transition:opacity .2s} .k-line .cur.on{opacity:1} .k-line .cur line{stroke:var(--terra-deep);stroke-width:1;stroke-dasharray:3 3} .k-line .cur circle{fill:var(--terra-deep);stroke:#fff;stroke-width:3} .k-tip{position:absolute;top:0;transform:translate(-50%,-110%);padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px var(--line),0 10px 30px -14px rgba(61,30,25,.4);font:600 .82rem/1.3 var(--text);color:var(--ink);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s} .k-tip small{display:block;font-weight:500;color:var(--muted)} .k-tip.on{opacity:1} .k-big{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:10px} .k-big b{font:600 clamp(2.2rem,1.6rem + 2.6vw,3.6rem)/1 var(--text);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums} .k-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--rose);color:#9C4B38;font:700 .74rem/1 var(--text)} /* ---------- 03 Barres empilées (neuf / reventes) ---------- */ .k-stack .k-cols{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:clamp(10px,3vw,28px);align-items:end;height:240px;margin:22px 0 8px;padding:0 4px;border-bottom:1px solid var(--line)} .k-stack .k-col{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;height:100%;position:relative} .k-stack .k-col b{display:block;text-align:center;font:600 .9rem/1 var(--text);color:var(--ink);margin-bottom:8px;opacity:0;transition:opacity .4s 1.1s} .k-stack.on .k-col b{opacity:1} .k-stack .k-seg{border-radius:10px 10px 4px 4px;transform-origin:bottom;transform:scaleY(0);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i,0) * 90ms)} .k-stack .k-seg+.k-seg{border-radius:4px;margin-top:3px} .k-stack.on .k-seg{transform:none} .k-stack .s1{background:var(--terra-deep)} .k-stack .s2{background:#EBC2B3} .k-stack .k-x{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:clamp(10px,3vw,28px);padding:8px 4px 0;font:600 .8rem var(--text);color:var(--muted);text-align:center} .k-leg{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:.82rem} .k-leg span{display:inline-flex;align-items:center;gap:7px} .k-leg i{width:12px;height:12px;border-radius:4px} /* ---------- 04 Chiffres clés ---------- */ .k-kpis{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:10px} .k-kpis li{display:flex;flex-direction:column;gap:8px;padding:18px 16px;border-radius:20px;background:var(--paper2);box-shadow:inset 0 0 0 1px var(--line)} .k-kpis b{font:600 clamp(1.5rem,1.1rem + 1.6vw,2.3rem)/1 var(--text);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums} .k-kpis span{font-size:.82rem;line-height:1.4} .k-kpis li:first-child{background:var(--terra-deep);box-shadow:none} .k-kpis li:first-child b,.k-kpis li:first-child span{color:#fff} @media (min-width:900px){.k-kpis{grid-template-columns:repeat(4,1fr);gap:14px}.k-kpis li{padding:24px 20px}} /* ---------- 05 Ce qu'il faut retenir → tuiles numérotées (même famille que S'installer) ---------- */ .k-keep ol{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-auto-rows:auto;gap:10px;counter-reset:k} .k-keep li{counter-increment:k;display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:start;padding:16px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:.94rem;line-height:1.55} .k-keep li::before{content:counter(k,decimal-leading-zero);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--rose);color:var(--terra-deep);font:700 .8rem/1 var(--text)} .k-keep li strong{color:var(--ink)} @media (min-width:900px){.k-keep ol{grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:14px}} .k-tip-band{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;margin-top:14px;padding:16px;border-radius:18px;background:var(--rose);color:var(--ink);font-size:.92rem;line-height:1.55} .k-tip-band .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#fff;color:var(--terra-deep)} .k-tip-band svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .k-tip-band b{display:block;font:700 .7rem/1.4 var(--text);letter-spacing:.16em;text-transform:uppercase;color:#9C4B38;margin-bottom:2px} /* ---------- 06 Regard professionnel → point de vue signé, sur le fond Petrini aux P ---------- */ .k-view{position:relative;overflow:hidden;border-radius:28px;padding:26px 20px;background:var(--paper2) var(--pat,none) center/cover;box-shadow:inset 0 0 0 1px var(--line)} .k-view .in{position:relative;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);border-radius:22px;padding:24px 20px;box-shadow:0 30px 70px -40px rgba(61,30,25,.5)} .k-view .who{display:flex;align-items:center;gap:12px;margin-bottom:16px} .k-view .who img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:center top;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--terra)} .k-view .who b{display:block;font:600 .95rem/1.2 var(--text);color:var(--ink)} .k-view .who small{font-size:.78rem;color:var(--muted)} .k-view blockquote{margin:0 0 16px;font:500 clamp(1.4rem,1.1rem + 1.4vw,2.2rem)/1.2 var(--display);letter-spacing:-.01em;color:var(--ink);text-wrap:balance} .k-view blockquote::before{content:"\201C";display:block;font:500 4.2rem/.6 var(--display);color:var(--terra);margin-bottom:6px} .k-view p{margin:0 0 .9em;font-size:.96rem} .k-view .k-w{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(8px);transition:opacity .7s var(--ease),filter .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 55ms)} .k-view.on .k-w{opacity:1;filter:none;transform:none} @media (min-width:900px){.k-view{padding:56px}.k-view .in{padding:44px 48px;max-width:860px}} /* ---------- 07 Frise (dates) : la ligne ne traverse jamais un rond ---------- */ .k-tl{list-style:none;margin:20px 0 0;padding:0 0 0 30px;position:relative;display:grid;gap:18px} .k-tl::before,.k-tl::after{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:rgba(61,30,25,.1)} .k-tl::after{background:var(--terra);transform-origin:top;transform:scaleY(0);transition:transform 1.8s var(--ease)} .k-tl.on::after{transform:none} .k-tl li{position:relative} .k-tl li::before{content:"";position:absolute;left:-30px;top:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--terra);z-index:1} .k-tl li.key::before{background:var(--terra-deep);box-shadow:0 0 0 5px var(--rose)} .k-tl b{display:block;font:600 1.15rem/1.1 var(--text);color:var(--ink);font-variant-numeric:tabular-nums} .k-tl span{font-size:.88rem;line-height:1.45} @media (min-width:900px){ .k-tl{grid-template-columns:repeat(var(--n,6),1fr);padding:34px 0 0;gap:18px} .k-tl::before,.k-tl::after{left:10px;right:10px;top:9px;bottom:auto;width:auto;height:2px} .k-tl::after{transform-origin:left;transform:scaleX(0)} .k-tl.on::after{transform:none} .k-tl li::before{left:0;top:-34px} } /* ---------- 08 Source, citation et partage (remplace le logo + « merci de citer Petrini ») ---------- */ .k-src{display:grid;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.78rem;line-height:1.5;color:var(--muted)} .k-sig{display:inline-flex;align-items:flex-start;gap:8px;text-decoration:none;justify-self:start} .k-mac{flex:none;width:20px;height:20px;display:block;margin-top:1px} .k-mac svg{width:100%;height:100%;display:block;overflow:visible} .k-mac .m-r{transform-origin:50px 50px;transform:scale(.6);opacity:0;transition:transform .7s var(--ease),opacity .4s} .k-mac .m-c{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s .45s var(--ease)} .on .k-mac .m-r{transform:none;opacity:1} .on .k-mac .m-c{stroke-dashoffset:0} .k-sig-t{display:flex;flex-direction:column;gap:5px} .k-mot{width:96px;height:auto;display:block} .k-sig small{font:500 .54rem/1 var(--text);letter-spacing:.24em;text-transform:uppercase;color:#9C4B38} @media (prefers-reduced-motion:reduce){.k-mac .m-r{transform:none;opacity:1;transition:none}.k-mac .m-c{stroke-dashoffset:0;transition:none}} .k-src .acts{display:flex;gap:8px;flex-wrap:wrap} .k-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:0;background:var(--paper2);box-shadow:inset 0 0 0 1px var(--line);font:600 .78rem/1 var(--text);color:var(--ink);cursor:pointer;text-decoration:none} .k-btn svg{width:16px;height:16px;fill:none;stroke:var(--terra-deep);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .k-btn.ok{background:var(--rose)} @media (min-width:900px){.k-src{grid-template-columns:auto 1fr auto;align-items:center;gap:24px}.k-mot{width:104px}} /* ---------- 09 Guides connexes → cartes photo (famille « Aller plus loin ») ---------- */ .k-guides{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:10px;margin-top:18px} .k-guides a{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;color:var(--ink);transition:transform .35s var(--ease)} .k-guides img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} .k-guides span{padding:12px 12px 14px;font:500 1rem/1.2 var(--display)} .k-guides small{display:block;margin-top:6px;font:400 .76rem/1.4 var(--text);color:var(--muted)} .k-guides a:hover{transform:translateY(-4px)} @media (min-width:900px){.k-guides{grid-template-columns:repeat(4,1fr);gap:14px}} /* ---------- Apparition ---------- */ .k .rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * 80ms)} .k .rv.on{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.k .rv,.k .k-w{opacity:1;transform:none;filter:none;transition:none}.k-rank .k-bar i,.k-stack .k-seg,.k-tl::after{transform:none;transition:none}.k-rank .k-bar i{transform:scaleX(var(--w,0))}.k-line .path{stroke-dashoffset:0;transition:none}.k-line .area,.k-line .dot,.k-line .end{opacity:1;transition:none}} /* Colonne du sommaire d'une page sans intertitre : gardée vide sur ordinateur (grille), absente sur téléphone (21/10/2026) */ @media (max-width:899px){.g-toc-vide:not([aria-label]){display:none}} /* Texte avant les biens (programmes de Mareterra : page CMS 2156, comme petrini.mc) : colonne du texte, avant le bloc des biens (21/10/2026) */ .g-bb{padding:clamp(40px,6vw,72px) 0 0}.g-bb .inner{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}.g-bb h2{margin-top:0} /* Fiche technique des pages Immeuble (tête du texte du CMS, comme petrini.mc : « Adresse 45 Rue Grimaldi », « Concierge Oui »…) : libellé puis valeur, en grille (21/10/2026) */ .g-prose .g-tech ul{list-style:none;margin:0 0 1.8em;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px} .g-prose .g-tech li{margin:0;padding:11px 14px;border-radius:14px;background:var(--paper2);font-size:.86rem;line-height:1.35;color:var(--muted)} .g-prose .g-tech li strong,.g-prose .g-tech li b{display:block;margin-top:2px;font-size:.98rem;font-weight:600;color:var(--ink)} @media (min-width:900px){.g-prose .g-tech ul{grid-template-columns:repeat(4,1fr)}} /* Tableaux écrits dans le CMS (sans classe) : sur téléphone, un tableau plus large que l'écran défile de côté au lieu de déborder de la page (20/10/2026, ex. comparatif des studios de /de/pilates-monaco.html) */ @media (max-width:899px){.g-prose [style*="justify"]{text-align:left!important}} /* texte justifié du CMS : sur téléphone, des trous entre les mots (Transaction RU, Gestion, 21/10/2026) ; aligné à gauche, texte inchangé */ @media (max-width:899px){.g-prose table:not([class]){display:block;max-width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}} /* encadré du CMS qui défile de côté (style en ligne overflow-x:auto) : rangée de côté, jamais un panneau vertical (21/10/2026) */ .g-prose [style*="overflow-x:auto"]{overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch} /* Kit dans le texte des pages reprises : il prime sur les styles de .g-prose (titres, listes, tableaux, images, liens) */ .g-prose .k{margin:2em 0} .g-prose .k .k-t{font:500 clamp(1.35rem,1.1rem + 1vw,1.9rem)/1.15 var(--display);margin:10px 0 6px;scroll-margin-top:100px} .g-prose .k ol,.g-prose .k ul{padding-left:0} .g-prose .k p{margin:0 0 .9em} .g-prose .k .k-sub{margin:0} .g-prose .k img{border-radius:0} .g-prose .k a.k-sig,.g-prose .k .k-guides a{text-decoration:none;color:var(--ink)} .g-prose .k .k-guides img{border-radius:0;height:auto!important} .g-prose .k-view .who img{border-radius:50%;width:56px!important;height:56px!important} .k-view{--pat:url(img/fond-petrini-1200.webp)} @media (min-width:900px){.k-view{--pat:url(img/fond-petrini-2400.webp)}} /* Tableau du kit (quand la 2e colonne n'est pas un chiffre) : lignes claires, en-tête discret, défilement horizontal sur mobile */ .k-table{overflow:hidden} .k-table table{width:100%;border-collapse:collapse;margin:16px 0 4px;font-size:.9rem} .k-table .k-scroll{overflow-x:auto} .k-table th{text-align:left;font:700 .66rem/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:0 12px 10px 0;border-bottom:1px solid var(--line)} .k-table td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);vertical-align:top} .k-table tbody tr:last-child td{border-bottom:0} .k-table td:first-child{font-weight:600;color:var(--ink)} /* Pied de page « A » : le titre de colonne passe d'un

à un dans

; même aspect sur ordinateur qu'avant */ /* revue UX du 27/10/2026 : un seul style de titre, lien ou non (le lien prenait la taille et la couleur des liens du pied), 14 px dessous */ @media (min-width:900px){.ps-foot .fm-t-d{display:block;font-size:14.4px;color:#CDB3A6;margin:0 0 14px}.foot.ps-foot .ff-cols .fm-t-d a{font-size:inherit;color:inherit}} /* Règles esthétiques de Paolo (08/10/2026) : une pilule ne passe jamais sur deux lignes. « Dans ce guide » sur téléphone : des lignes pleine largeur aux coins arrondis (plus des pilules), le titre peut tenir sur deux lignes ; liens de quartiers : liens typographiques avec flèche, comme sur le catalogue (petrini-catalogue .pc-qu .g-qu-d). */ @media (max-width:899px){.g-chips li{flex:1 1 100%}.g-chips a{display:flex;width:100%;border-radius:16px;padding:8px 16px 8px 8px}} .g-qu-d{display:inline-flex;align-items:baseline;gap:8px;min-height:0;padding:0;border-radius:0;background:none;box-shadow:none;font:500 1.02rem/1.35 var(--display);color:var(--ink)} .g-qu-d::after{content:"→";font:600 .85rem var(--text);color:var(--terra-deep);transition:transform .25s} .g-qu-d:hover{background:none;color:var(--terra-deep)}.g-qu-d:hover::after{transform:translateX(3px)} /* Règle de Paolo (08/10/2026), tout le site : une photo de personne n'est jamais ovale, toujours un rond parfait. (La règle .g-prose img{height:auto!important} contre les images écrasées du CMS déformait les portraits placés dans le texte.) */ .g-prose .g-author img{width:88px!important;height:88px!important} .g-prose .g-cta-people img{width:56px!important;height:56px!important} .g-prose .g-who img{width:36px!important;height:36px!important} .g-author img,.g-cta-people img,.g-who img,.k-view .who img{aspect-ratio:1/1;object-fit:cover;border-radius:50%;flex:none} /* ============ COMPOSANT : carte de bien = carte des pages Ads (revue de Paolo du 08/10/2026 : « reprendre celui des Ads exactement ») ============ Fonction ps_carte_html (includes/composants.php), diaporama et « Voir le bien » dans site.js (psCartes). Sélection du site, listes et pages à critères. La carte entière est le
  • : photo (6 photos + aperçu vidéo, flèches visibles aussi au doigt, compteur, « Vidéo »), titre, lieu, surface et chambres avec pictos, prix, « Voir le bien » + messagerie en rond, référence. Ordre du texte dans le lien = petrini.mc (ancres) ; ordre affiché par « order ». */ .pc-c{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line);transition:transform .45s var(--ease),box-shadow .45s var(--ease)} @media (hover:hover){.pc-c:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(178,90,69,.3),0 30px 60px -36px rgba(61,30,25,.6)}.pc-c:hover .g-sel-t{text-decoration:none}} /* titre jamais souligné au survol (Paolo, lot 906, 10/10/2026) */ .pc-c .g-sel-c,.pc-c .g-sel-c:hover{flex:1;width:100%;border-radius:0;overflow:visible;background:none;box-shadow:none;transform:none} /* coins : la photo et la zone qui défile portent elles-mêmes l'arrondi (une zone qui défile n'est pas découpée proprement par son parent) ; le masque est sur la photo, pas sur la carte : l'ombre de la carte reste entière */ .pc-c .g-sel-img,.pc-c .pc-track,.pc-c .pc-hov{border-radius:20px 20px 0 0} .pc-c .g-sel-img{overflow:hidden;-webkit-mask-image:-webkit-radial-gradient(#fff,#000);isolation:isolate} .pc-c.vendu .g-sel-img img{filter:saturate(.55)} .pc-track{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain} .pc-track::-webkit-scrollbar{display:none} .pc-track>img,.pc-track>.pc-vs{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start;scroll-snap-stop:always} .pc-track>img:not([src]){background:var(--rose,#FBEADF)} .pc-c .g-sel-img .pc-track img,.g-sel-c:hover .g-sel-img .pc-track img{transform:none} .pc-vs{position:relative;display:block;background:var(--rose,#FBEADF)} .pc-vs video,.pc-hov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .pc-hov{opacity:0;transition:opacity .45s;pointer-events:none;z-index:1} .pc-hov.on{opacity:1} .pc-nav{position:absolute;left:0;right:0;top:0;aspect-ratio:4/3;pointer-events:none;z-index:2} .pc-arr{pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--ink);box-shadow:0 4px 14px -6px rgba(42,20,17,.45);cursor:pointer} .pc-arr svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .pc-arr.l{left:10px}.pc-arr.r{right:10px} .pc-ctr{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:5px 10px;border-radius:999px;font:600 .72rem/1 var(--text);font-variant-numeric:tabular-nums;color:#fff;background:rgba(42,20,17,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .pc-vid{position:absolute;left:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 16px 0 8px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--ink);font:600 .78rem/1 var(--text);white-space:nowrap;box-shadow:0 6px 18px -8px rgba(42,20,17,.45)} .pc-vid svg{width:20px;height:20px;padding:4px;border-radius:50%;background:var(--terra-deep);fill:#fff;box-sizing:border-box} .pc-c .g-sel-bds{flex-wrap:wrap;right:56px;z-index:2} /* badges (Exclusivité…) : pastille claire en verre, teinte terracotta (préférée par Paolo le 08/10/2026), la norme du site */ .pc-bd{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:inset 0 0 0 1px rgba(178,90,69,.22);color:var(--terra-deep);font:600 .74rem/1 var(--text);letter-spacing:.02em;white-space:nowrap} .pc-bd.om{background:rgba(255,255,255,.88);color:var(--ink)} .pc-fav{position:absolute;z-index:3;top:10px;right:10px;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);cursor:pointer;color:var(--ink)} .pc-fav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7} .pc-fav[aria-pressed="true"]{color:var(--terra-deep)}.pc-fav[aria-pressed="true"] svg{fill:currentColor} .pc-c .g-sel-b{padding:14px 16px 0;gap:6px} .pc-c .g-sel-t{order:1}.pc-c .g-sel-l{order:2}.pc-c .g-sel-d{order:3}.pc-c .g-sel-f,.pc-c .pc-fl{order:4}.pc-c .g-sel-p{order:5} .pc-c .g-sel-d{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:400 .86rem/1.45 var(--text);color:var(--muted)} .pc-c .g-sel-t{font:500 1.2rem/1.2 var(--display);color:var(--ink)} .pc-c .g-sel-l{order:-1;font:600 .7rem/1.3 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--terra-deep)} /* lieu en tête, majuscules terracotta, comme avant (Paolo, 08/10/2026) */ .pc-c .pc-fl{order:4;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font:400 .86rem/1.3 var(--text);color:var(--muted)} .pc-c .pc-fl .g-sel-f{order:0} .pc-c .pc-pk{order:1;display:inline-flex;align-items:center;gap:5px} /* même graisse que les autres faits (Paolo : « plus épais, pas bon ») */ .pc-c .pc-pk .icon{width:16px;height:16px} .pc-c .g-sel-f{display:flex;flex-wrap:wrap;gap:6px 12px;margin:0;padding:0;font:400 .86rem/1.3 var(--text);color:var(--muted)} .pc-c .g-sel-f span{display:inline-flex;align-items:center;gap:5px;padding:0;border-radius:0;background:none;font:inherit;color:inherit} .pc-c .g-sel-f span:empty{display:none} .pc-c .g-sel-f .icon{width:16px;height:16px} .pc-c .g-sel-p{position:static;display:block;height:auto;min-height:0;margin-top:auto;padding:6px 0 0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;font:600 1.1rem/1.2 var(--text);font-variant-numeric:tabular-nums;color:var(--ink);white-space:normal} .pc-acts{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px 16px 16px} .pc-ask{height:48px;border:0;border-radius:999px;background:var(--terra-deep);color:#fff;font:600 .88rem/1 var(--text);cursor:pointer} .pc-ask:hover{filter:brightness(1.06)} .pc-msgq{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 1px var(--line)} .pc-ref{display:block;padding:4px 16px 16px;font-size:.74rem;color:var(--muted)} /* boutons à pastille ronde (WhatsApp, Telegram, appel, e-mail) : la pastille dans le creux de la pilule, même retrait en haut, en bas et à gauche (bouton de 56 px, pastille de 40 px : 8 px), texte juste après (revue de Paolo du 08/10/2026), sur tout le site */ .pl-sh .a-btn.a-msg,.g-cb{justify-content:flex-start;gap:12px;padding-left:8px} .pl-sh .a-btn.a-msg .wa-dot,.g-cb .wa-dot{width:40px;height:40px;margin:0} /* prix juste sous le titre, sur toutes les cartes (Paolo, 08/10/2026) */ .pc-c .g-sel-t{order:0}.pc-c .g-sel-p{order:1;margin-top:0;padding-top:0} /* revue de Paolo du 08/10/2026 (suite) : prix en terracotta ; surface, chambres et parkings dans des pilules ; photo du conseiller dans le creux du bouton de la barre du bas (8 px de retrait, comme les pastilles rondes) */ .pc-c .g-sel-p{color:var(--terra-deep)} .pc-c .pc-fl{gap:6px} .pc-c .g-sel-f{gap:6px} .pc-c .g-sel-f span:not(:empty),.pc-c .pc-pk{height:30px;padding:0 13px;border-radius:999px;background:var(--paper2,#FBF5F1);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font-size:.8rem;white-space:nowrap} .sticky .btn.wa,.pf-barre .pf-b-wa{justify-content:flex-start;gap:12px;padding-left:8px} .sticky .btn.wa .pf-av img,.sticky .btn.wa .wa-dot,.pf-barre .pf-b-wa .pf-av img,.pf-barre .pf-b-wa .wa-dot{width:40px;height:40px} /* revue de Paolo du 09/10/2026 : toutes les cartes de bien ont la même mise en page, quelle que soit la longueur du texte de l'annonce. Titre sur deux lignes au plus, accroche sur deux lignes, chacun avec sa place réservée (espace laissé si le texte est plus court) ; les pilules de surface, chambres et parkings sur une seule ligne, calées en bas, à la même hauteur sur toutes les cartes d'une rangée */ .pc-c .g-sel-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.4em} .pc-c .g-sel-d{min-height:2.9em} .pc-c .g-sel-f,.pc-c .pc-fl{flex-wrap:nowrap;overflow:hidden;margin-top:auto;padding-top:4px} .pc-c .pc-fl .g-sel-f{margin-top:0;padding-top:0} .pc-c .g-sel-b{flex:1} .pc-c .g-sel-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* le lieu tient sur une ligne */ .pc-c,.pc-c .g-sel-c,.pc-c .g-sel-b{min-width:0} /* les lignes coupées (lieu, pilules) ne doivent jamais élargir la carte */ /* revue de Paolo du 09/10/2026 (suite) : le prix est une information importante, il respire : de l'air au-dessus et au-dessous */ .pc-c .g-sel-p{margin:10px 0 4px} /* Club, lot 2212 (Paolo, 10/10/2026) : carte au milieu de sa colonne (ordinateur) ; recto terracotta, verso vue de Monaco ; la carte se retourne quand la fiche d'inscription s'ouvre (étape « Merci. Un dernier détail », form.g-club2) ; champs de la fiche l'un sous l'autre */ .g-nl-carte{background:none;box-shadow:none;overflow:visible;transform-style:preserve-3d;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)} .g-nl-carte::before{display:none} .g-nl-face,.g-nl-dos{position:absolute;inset:0;border-radius:16px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 34px 60px -26px rgba(61,30,25,.6),inset 0 0 0 1px rgba(255,255,255,.22)} .g-nl-face{background:linear-gradient(135deg,#CB735D 0%,#B25A45 48%,#9C4B38 100%)} .g-nl-face::before{content:"";position:absolute;inset:-40% -60%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);transform:translateX(-60%);transition:transform 1.4s var(--ease)} @media (hover:hover){.g-nl:hover .g-nl-face::before{transform:translateX(60%)}} .g-nl-dos{transform:rotateY(180deg);background:var(--rose)} .g-nl-dos img{display:block;width:100%;height:100%;object-fit:cover} .g-nl:has(.g-club2) .g-nl-carte{transform:rotateY(180deg) rotate(4deg)} .g-nl-in.avec-v .g-club-grid{grid-template-columns:1fr} .g-nl-in.avec-v .g-club-grid .g-fld{grid-column:auto} @media (min-width:900px){ .g-nl:has(.avec-v){padding-top:var(--s3)} .g-nl-in.avec-v{padding-left:calc(clamp(210px,24vw,320px) + 2 * clamp(28px,3vw,52px))} .g-nl-carte{left:clamp(28px,3vw,52px);top:50%;margin-top:calc(clamp(210px,24vw,320px) / -3.172);transform:rotate(-6deg)} @media (hover:hover){.g-nl:hover .g-nl-carte{transform:rotate(-2deg) translateY(-6px)}} .g-nl:has(.g-club2) .g-nl-carte,.g-nl:has(.g-club2):hover .g-nl-carte{transform:rotateY(180deg) rotate(3deg)} } @media (prefers-reduced-motion:reduce){.g-nl-carte{transition:none}} .g-nl-in.avec-v .g-club2 .btn{width:100%;justify-content:center;padding:0 24px} /* bouton de la fiche : toute la largeur, texte jamais collé au bord */ /* Club déplié, lot 957 (Paolo, 10/10/2026) : fini les trois colonnes étriquées (carte | titre | fiche) ; ordinateur : 1/3 pour la carte animée, 2/3 pour le titre puis la fiche (prénom | nom, téléphone | e-mail) ; le passage plié → déplié est animé dans site.js (clubDeplie) */ @media (min-width:900px){ .g-nl.is-2 .g-nl-in.avec-v{grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:clamp(36px,4vw,64px);row-gap:26px;align-items:start;padding:clamp(40px,4vw,60px) clamp(36px,4vw,60px)} .g-nl.is-2 .g-nl-carte{position:relative;left:auto;top:auto;margin:0;grid-column:1;grid-row:1/span 2;align-self:center;justify-self:center;width:min(100%,340px)} .g-nl.is-2 .g-nl-txt,.g-nl.is-2 .g-club2{grid-column:2;min-width:0} .g-nl.is-2 .g-nl-txt{padding-bottom:22px} /* lot 4350 : sans filet sous le texte (lignes de séparation proscrites, Paolo, 27/10/2026) */ .g-nl.is-2 .g-nl-h{margin-bottom:8px} .g-nl.is-2 .g-nl-txt p:last-child{max-width:62ch} .g-nl.is-2 .g-club2{gap:18px;animation:none} .g-nl.is-2 .g-nl-in.avec-v .g-club-grid{grid-template-columns:1fr 1fr;gap:14px 16px} .g-nl.is-2 .g-club-prefs{display:grid;grid-template-columns:minmax(0,420px) auto;align-items:center;column-gap:18px} .g-nl.is-2 .g-club-prefs .g-club-lab{grid-column:1/-1} .g-nl.is-2 .g-club-prefs .g-seg-cap{margin:0;padding:0;text-align:left} .g-nl.is-2 .g-club-act{margin-top:4px} .g-nl.is-2 .g-nl-in.avec-v .g-club2 .btn{width:auto;min-width:min(100%,320px);justify-content:center;padding:0 36px} } /* ======== Variantes enregistrées des modules (Paolo, lot 978 du 11/10/2026 : « des modules réutilisables et réemployables ») ======== */ /* Club, variante « fond P » (ps_club( $lg, [ 'fond' => 'pp' ] )) : les P entrelacés sur toute la bande, fondus depuis la crème de la page ; la carte, le formulaire et la version ouverte du Club restent ceux du module */ /* variante « pp » (accueil) : couverte par la piste A du lot 4350, motif aux P sur toute la bande (bloc MODULE Club privé, piste A) */ /* Conseiller de fin de page, variante « fond P » (ps_fin_conseiller( $lg, $settle, [ 'fond' => 'pp' ] ), lot 1541, page Actualités) : sans les portraits, posé à même la bande aux P entrelacés (même fond que le Club « fond pp ») ; titre et texte à gauche, boutons à droite */ .g-endcta.g-endcta-pp{position:relative;isolation:isolate;padding:clamp(56px,7vw,96px) var(--gutter);background:var(--paper2)} .g-endcta.g-endcta-pp::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(img/fond-petrini-2400.webp) center/cover no-repeat;opacity:.9} /* lot 1565 (« ajouter une transition entre deux blocs dégradés ») : plus de bord net ; la bande naît du blanc de la page (fond et motif fondus en haut) et le motif s'efface en bas dans la crème du Club, qui suit */ .g-endcta.g-endcta-pp{background:linear-gradient(180deg,var(--paper) 0,var(--paper2) clamp(72px,9vw,128px))} .g-endcta.g-endcta-pp::before{-webkit-mask:linear-gradient(180deg,transparent 0,#000 30%,#000 62%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 30%,#000 62%,transparent 100%)} .g-endcta-pp .g-cta.g-cta-pp{max-width:var(--max);margin:0 auto;padding:0;gap:22px;background:none;box-shadow:none;border-radius:0} .g-cta-pp .g-cta-h{font-size:clamp(1.6rem,1.25rem + 1.5vw,2.4rem);line-height:1.1;letter-spacing:-.015em;text-wrap:balance} .g-cta-pp .g-cta-txt p:last-child{max-width:46ch;color:var(--body)} @media (min-width:900px){ .g-endcta-pp .g-cta.g-cta-pp{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)!important;align-items:center;gap:56px} .g-cta-pp .g-cta-btns{grid-column:2!important} } @media (max-width:899px){.g-endcta.g-endcta-pp::before{background-image:url(img/fond-petrini-1200.webp)}} /* FAQ, variante « deux colonnes » (ps_faq( $p, [ 'variante' => 'deux-colonnes' ] )) : titre à gauche, questions à droite ; les questions gardent le composant FAQ du site (filet et trait terracotta d'ouverture retirés au lot 1007 du 17/10/2026 : « ligne inutile ») */ .g-faq.g-faq-2c{padding:0;background:none;margin:clamp(56px,6vw,88px) 0 0} section.g-faq.g-faq-2c{padding:clamp(56px,6vw,88px) var(--gutter);margin:0} .g-faq-2c .g-faq-in{position:relative;max-width:var(--max);margin:0 auto} .g-faq-2c .g-eyebrow{margin:0 0 10px} .g-faq-2c .g-faq-in>h2,.g-faq-2c .g-faq-in>h3,.g-faq-2c .g-faq-in>.g-t2{margin:0 0 clamp(20px,3vw,32px);font:500 clamp(28px,4.2vw,46px)/1.1 var(--display);letter-spacing:-.01em;color:var(--ink);text-wrap:balance} .g-faq-2c summary h3,.g-faq-2c summary h4{margin:0;font:600 1rem/1.35 var(--text);letter-spacing:0;color:var(--ink)} @media (min-width:900px){ .g-faq-2c .g-faq-in{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.3fr);column-gap:clamp(24px,3vw,48px);align-items:start} .g-faq-2c .g-faq-in>.g-eyebrow,.g-faq-2c .g-faq-in>h2,.g-faq-2c .g-faq-in>h3,.g-faq-2c .g-faq-in>.g-t2{grid-column:1} .g-faq-2c .g-faq-in>h2,.g-faq-2c .g-faq-in>h3,.g-faq-2c .g-faq-in>.g-t2{margin:0;position:sticky;top:120px} .g-faq-2c .g-faq-l{grid-column:2;grid-row:1/span 3;padding-top:4px} } /* Club (lots 975 et 978) : la carte ouvre le panneau 2 et ramène au panneau 1 (club.js) */ .g-nl[data-club] .g-nl-carte{cursor:pointer} /* ---------- MODULE Blog (17/10/2026 ; includes/blog.php) : listes d'articles lues dans WordPress, mobile d'abord ---------- téléphone : rangées qui défilent au doigt, aimantées (comme les carrousels de petrini.mc) ; ordinateur : grilles, la 1re carte à la une en large */ .g-blog{padding:var(--s4) var(--gutter);background:var(--paper2)} .g-blog-une{margin-bottom:clamp(8px,2vw,24px)} .g-blog-r{list-style:none;margin:0 calc(var(--gutter) * -1);padding:6px var(--gutter) 22px;display:grid;grid-auto-flow:column;grid-auto-columns:min(84%,340px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain} .g-blog-r::-webkit-scrollbar{display:none} .g-blog-r>li{scroll-snap-align:start;display:flex} .g-blog-r>li>.g-card{width:100%} .g-blog-rub{margin-top:clamp(28px,5vw,56px)} .g-blog-rub h2{margin:0 0 14px;font-size:clamp(1.45rem,1.2rem + 1.1vw,2.05rem);max-width:none} .g-blog-rub h2 a{text-decoration:none;color:inherit} .g-art-cat{margin:0 0 8px;font-size:.68rem;line-height:1.35} .g-art-t{font-family:var(--display);font-weight:500;font-size:clamp(1.12rem,1.05rem + .4vw,1.32rem);line-height:1.22;margin:0 0 10px!important;color:var(--ink)} .g-art-t a{text-decoration:none;color:inherit} .g-art-t a::after{content:"";position:absolute;inset:0} .g-art .g-acc{-webkit-line-clamp:3;line-clamp:3} .g-art-who{display:flex;align-items:center;gap:10px;margin:auto 0 0!important;padding-top:16px;font-size:.8rem} .g-card-txt .g-art-who img{display:block;flex:none;width:32px;height:32px;border-radius:50%;object-fit:cover;object-position:top center} .g-art-who span{display:flex;flex-direction:column;line-height:1.3;font-weight:600;color:var(--ink)} .g-art-who time{font-weight:400;color:var(--body)} .g-blog-tous{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--terra-deep);text-decoration:none} .g-blog-tous .icon{width:18px;height:18px} @media (min-width:900px){ .g-blog-r{margin:0;padding:0;grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(3,1fr);gap:22px;overflow:visible} .g-blog-une .g-blog-r{grid-template-columns:repeat(4,1fr)} .g-blog-une .g-blog-r>li:first-child{grid-column:1/-1} .g-blog-une .g-card.une{flex-direction:row} .g-blog-une .g-card.une .g-card-img{aspect-ratio:auto;flex:1.25;min-height:380px} .g-blog-une .g-card.une .g-card-txt{flex:1;padding:36px 40px;justify-content:center} .g-blog-une .g-card.une .g-art-t{font-size:1.9rem} .g-blog-une .g-card.une .g-acc{-webkit-line-clamp:5;line-clamp:5} .g-blog-tous{margin-top:12px} } /* Fidélité au CMS (17/10/2026) : 2e étiquette des encarts et de la FAQ, légendes et titres de blocs en paragraphe, citation du « regard professionnel » */ .k .k-eb2,.g-eb2{margin-left:8px;opacity:.75} .g-eb2::before{content:"·";margin-right:8px} p.k-t{display:block} .g-prose .k-view blockquote>p{margin:0;font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit} /* MODULE Blog : barre de filtres (pastilles qui défilent au doigt sur téléphone, centrées sur ordinateur) et liste d'une rubrique */ .g-blog-f{padding:18px 0 4px} .g-blog-f ul{list-style:none;margin:0;padding:4px var(--gutter) 10px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity} .g-blog-f ul::-webkit-scrollbar{display:none} .g-blog-f li{flex:none;scroll-snap-align:start} .g-blog-f a{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;font:600 .85rem/1 var(--text);color:var(--ink);text-decoration:none;background:#fff;box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap} .g-blog-f a[aria-current]{color:#fff;background:var(--terra-deep);box-shadow:none} .g-blog-g{display:grid;grid-template-columns:1fr;gap:16px} @media (min-width:900px){ .g-blog-f ul{flex-wrap:wrap;justify-content:center;overflow:visible;padding:4px 0 10px} .g-blog-g{grid-template-columns:repeat(3,1fr);gap:22px} .g-blog-g .g-card.une{grid-column:1/-1;flex-direction:row} .g-blog-g .g-card.une .g-card-img{aspect-ratio:auto;flex:1.25;min-height:360px} .g-blog-g .g-card.une .g-card-txt{flex:1;padding:36px 40px;justify-content:center} .g-blog-g .g-card.une .g-art-t{font-size:1.8rem} } /* MODULE Blog : « Lire la suite » des cartes, pagination des rubriques (cibles de 44 px au doigt), titre des pages N (sans H1, comme petrini.mc) */ .g-art-lire{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font:600 .82rem/1 var(--text);color:var(--terra-deep);text-decoration:none} .g-art-lire .icon{width:16px;height:16px} a.g-art-lire{position:relative;z-index:1} h3.g-art-t{font-family:var(--display);font-weight:500} .g-blog-p ul{list-style:none;margin:clamp(24px,4vw,40px) 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px} .g-blog-p a{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 12px;border-radius:999px;font:600 .9rem/1 var(--text);color:var(--ink);text-decoration:none;background:#fff;box-shadow:inset 0 0 0 1px var(--line)} .g-blog-p a[aria-current]{color:#fff;background:var(--terra-deep);box-shadow:none} .g-hero .g-h1{font:500 clamp(2.1rem,1.4rem + 3.6vw,4.6rem)/1.02 var(--display);letter-spacing:-.02em;color:#fff;max-width:17ch;margin:0 0 26px;text-shadow:0 2px 30px rgba(0,0,0,.25)} /* page de texte sans photo de couverture (charte éditoriale, 17/10/2026) : le texte suit la date, sans le blanc prévu pour la photo */ body .pl-main .g-ahero.nocover{padding-bottom:0} .g-ahero.nocover+.g-wrap{padding-top:clamp(20px,3vw,36px)} /* page « Découvrez notre équipe » : membres de l'agence (bloc relevé sur petrini.mc, en tête du texte, modifiable), 17/10/2026 */ .g-prose .g-team{margin:0 0 2.4em} .g-prose .g-team ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px} .g-prose .g-team li{margin:0;padding:0} .g-prose .g-team li::before{display:none} .g-prose .g-team h2{margin:0;font:500 1.1rem/1.2 var(--display);letter-spacing:0;scroll-margin-top:110px} .g-prose .g-team h2 a{color:inherit;text-decoration:none} .g-prose .g-team p{margin:4px 0 0;font:500 .82rem/1.35 var(--text);color:var(--muted)} @media (min-width:900px){.g-prose .g-team ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px}.g-prose .g-team h2{font-size:1.25rem}} /* MODULE Équipe (bloc des membres, section.g-team) — lot 1543 : portraits dans un cercle (photos de petrini.mc en arche sur fond rosé : l'image est agrandie dans le cercle pour que l'arche et le fond ne se voient pas), nom et fonction centrés */ .g-prose .g-team figure{position:relative;width:min(calc(100% - 20px),220px);aspect-ratio:1;margin:0 auto 14px;border-radius:50%;overflow:hidden;background:var(--rose,#fbeadf);box-shadow:0 0 0 6px #fff,0 0 0 7px var(--line),0 22px 40px -26px rgba(61,30,25,.45);transition:box-shadow .35s var(--ease,ease)} .g-prose .g-team img{width:100%;height:auto;border-radius:0;transform:translateY(-3%) scale(1.25);transform-origin:50% 0;transition:transform .6s var(--ease,ease)} .g-prose .g-team li{text-align:center} .g-prose .g-team li:hover figure{box-shadow:0 0 0 6px #fff,0 0 0 7px var(--terra),0 26px 44px -24px rgba(61,30,25,.5)} .g-prose .g-team li:hover img{transform:translateY(-3%) scale(1.3)} /* MODULE Avis (section.g-avis, avis clients écrits dans le contenu de la page) — lot 1543 : note mise en avant, cartes alignées, étoiles terracotta ; téléphone : cartes qui défilent ; ordinateur : grille de deux (la première en large si le nombre est impair) */ .g-prose .g-avis{margin:2.6em 0} .g-prose .g-avis-tete{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:20px 24px;border-radius:24px;background:var(--paper2,#fbf5f1)} .g-prose p.g-avis-n{margin:0;font:500 3.2rem/1 var(--display);color:var(--ink);letter-spacing:-.02em} .g-prose .g-avis-n small{margin-left:6px;font:500 .9rem/1 var(--text);color:var(--muted);letter-spacing:0} .g-prose p.g-avis-et{margin:0;color:var(--terra);font-size:1.05rem;line-height:1;letter-spacing:.14em} .g-prose .g-avis-tete .g-avis-et{font-size:1.9rem;text-shadow:0 6px 18px color-mix(in srgb,var(--terra) 40%,transparent)} .g-prose p.g-avis-src{margin:0 0 0 auto;font:600 .72rem/1.2 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--terra-deep)} .g-prose ul.g-avis-l{list-style:none;margin:0 -16px;padding:18px 16px 34px;display:grid;grid-auto-flow:column;grid-auto-columns:min(84%,340px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:16px;scrollbar-width:none} .g-prose ul.g-avis-l::-webkit-scrollbar{display:none} .g-prose .g-avis-c{position:relative;margin:0;padding:24px 22px 20px;display:flex;flex-direction:column;gap:14px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px -28px rgba(61,30,25,.38);scroll-snap-align:start;transition:transform .35s var(--ease,ease),box-shadow .35s var(--ease,ease)} .g-prose .g-avis-c::before{content:"\201C";position:absolute;top:6px;right:18px;font:500 4.6rem/1 var(--display);color:var(--terra);opacity:.2;pointer-events:none} .g-prose .g-avis-c blockquote{flex:1;margin:0;padding:0;border:0;font:500 1rem/1.6 var(--text);color:var(--body)} .g-prose .g-avis-c blockquote p{margin:0} .g-prose p.g-avis-a{display:flex;align-items:center;gap:12px;margin:0;padding-top:14px;border-top:1px solid var(--line);line-height:1.25} .g-prose .g-avis-i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--rose,#fbeadf);color:var(--terra-deep);font:500 1.1rem/1 var(--display)} .g-prose .g-avis-a strong{display:block;font:600 .95rem/1.25 var(--text);color:var(--ink)} .g-prose .g-avis-a small{display:block;font:500 .78rem/1.3 var(--text);color:var(--muted)} @media (hover:hover){.g-prose .g-avis-c:hover{transform:translateY(-4px);box-shadow:0 26px 50px -28px rgba(61,30,25,.45)}} @media (min-width:900px){ .g-prose ul.g-avis-l{margin:0;padding:18px 0 8px;grid-auto-flow:row;grid-template-columns:1fr 1fr;grid-auto-columns:auto;grid-auto-rows:1fr;gap:18px;overflow:visible} .g-prose .g-avis-c{padding:28px 28px 22px} .g-prose .g-avis-c:first-child:nth-last-child(odd){grid-column:1/-1} .g-prose .g-avis-c:first-child:nth-last-child(odd) blockquote{font:500 1.3rem/1.5 var(--display);color:var(--ink)} } /* effet : les cartes montent à leur arrivée à l'écran (navigateurs qui le savent ; jamais transparentes, une capture pleine page reste lisible). Les étoiles restent toujours pleines (jamais d'effet qui en éteint une) */ @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){.g-prose .g-avis-c{animation:g-avis-monte linear both;animation-timeline:view();animation-range:entry 0% entry 80%}} } @keyframes g-avis-monte{from{translate:0 34px}to{translate:none}} /* ======== MODULE Rangée de biens (ps_rangee_biens, includes/modules.php ; lot 1565, page Actualités) ======== Le bloc « Acheter » de l'accueil : surtitre, intertitre, lien terracotta à pastille, rail de cartes (3 visibles et flèches hors des cartes sur ordinateur, défilement au doigt sur téléphone, ombres jamais coupées). Mêmes valeurs que l'accueil (lots 965, 970, 1007). */ .g-rang{padding:clamp(48px,5vw,64px) 0 clamp(40px,4.6vw,64px);overflow-x:clip} .g-rang-in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)} .g-rang-g{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "r" "l"} .g-rang-tete{grid-area:t;min-width:0} .g-rang .g-eyebrow{margin:0 0 10px} .g-rang .g-rang-h{margin:0;font:500 clamp(1.5rem,1.2rem + 1.2vw,2.2rem)/1.1 var(--display);letter-spacing:-.015em;color:var(--ink);text-wrap:balance} .g-rang .ac-lien{grid-area:l;justify-self:start;display:inline-flex;align-items:center;gap:10px;margin-top:4px;padding:4px 0;font:600 .9rem/1 var(--text);color:var(--terra-deep);text-decoration:none} .g-rang .ac-fl{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:none;background:var(--terra-deep);color:#fff;transition:transform .35s var(--ease)} .g-rang .ac-fl .icon{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8} @media (hover:hover){.g-rang .ac-lien:hover .ac-fl{transform:translateX(3px)}} .g-rang-rail{grid-area:r;position:relative;min-width:0;margin-top:22px} .g-rang .ac-rail{list-style:none;margin:0;padding:0} .g-rang .ac-rail-b{display:none} @media (max-width:899px){ .g-rang .ac-rail{display:flex!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1 * var(--gutter));padding:4px var(--gutter) 28px;scroll-padding:0 var(--gutter)} .g-rang .ac-rail::-webkit-scrollbar{display:none} .g-rang .ac-rail>.pc-c{flex:0 0 84%;scroll-snap-align:start;min-width:0} } @media (min-width:900px){ .g-rang-g{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t l" "r r";align-items:end;column-gap:32px} .g-rang .ac-lien{justify-self:end;margin:0} .g-rang-rail{margin-top:40px} .g-rang .ac-rail{display:flex!important;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;margin:-24px -28px -40px;padding:24px 28px 40px;scroll-padding:0 28px;-webkit-mask:linear-gradient(90deg,transparent 8px,#000 28px,#000 calc(100% - 28px),transparent calc(100% - 8px));mask:linear-gradient(90deg,transparent 8px,#000 28px,#000 calc(100% - 28px),transparent calc(100% - 8px))} .g-rang .ac-rail::-webkit-scrollbar{display:none} .g-rang .ac-rail>.pc-c{flex:0 0 calc((100% - 40px) / 3);scroll-snap-align:start;min-width:0} .g-rang .ac-rail-b{position:absolute;top:calc(50% - 28px);z-index:4;display:grid;place-items:center;width:56px;height:56px;border:0;border-radius:50%;background:#fff;color:var(--terra-deep);box-shadow:0 12px 30px rgba(61,30,25,.18);cursor:pointer;transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease)} .g-rang .ac-rail-b[hidden]{display:none} .g-rang .ac-rail-n{right:max(-80px,calc((100% - 100vw) / 2 + 16px))}.g-rang .ac-rail-p{left:max(-80px,calc((100% - 100vw) / 2 + 16px))} .g-rang .ac-rail-b .icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8} .g-rang .ac-rail-b:hover{background:var(--terra-deep);color:#fff;transform:scale(1.06)} } @media (prefers-reduced-motion:reduce){.g-rang .ac-rail{scroll-behavior:auto}.g-rang .ac-fl,.g-rang .ac-rail-b{transition:none}} /* ===== MODULES DE L'ARTICLE (lot 1575 du 19/10/2026 : « un template article avec des modules interchangeables et interconnectés ») ===== */ /* En-tête des articles d'actualité : en pilule dès le haut de la page (la photo d'ouverture ne laissait pas lire les liens) */ .a-art .nav:not(.stuck){background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);box-shadow:0 0 0 1px rgba(61,30,25,.08),inset 0 1px 0 rgba(255,255,255,.9),0 12px 32px -18px rgba(61,30,25,.4);color:var(--ink)} /* MODULE Ce qu'il faut retenir des articles repris : carte du kit (.k-keep, « 05 » plus haut) ; En bref et Conseil Petrini séparés retirés le 20/10/2026 (Paolo : « garder comme la page loi de protection du Rocher ») */ /* MODULE FAQ, variante « corps » : dans la colonne de l'article, au dessin validé de la FAQ (cartes qui s'ouvrent) */ .g-prose .g-faq-corps{margin:2.8em 0 0;padding:0;background:none} .g-prose .g-faq.g-faq-corps>h2,.g-prose .g-faq.g-faq-corps>.g-t2{margin:6px 0 clamp(18px,2.4vw,26px)} .g-prose .g-faq summary h3{margin:0;font:600 1rem/1.4 var(--text);letter-spacing:0;color:var(--ink)} .g-prose .g-faq .g-faq-a p{margin:0;font-size:.95rem;line-height:1.7} .g-prose .g-faq details{list-style:none} /* MODULE Biens de l'article : derniers biens disponibles dans le texte (tuiles de bien) */ .g-prose .g-bart{margin:2.6em 0;padding:clamp(18px,2.4vw,26px);border-radius:28px;background:linear-gradient(165deg,#FFFBF8 0%,var(--paper2) 100%);box-shadow:inset 0 0 0 1px rgba(178,90,69,.14)} .g-prose .g-bart-vide{display:grid;justify-items:start;gap:10px} .g-prose .g-bart-vide .g-bart-vt{margin:0;font-size:.95rem;color:var(--body)} .g-bart-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 14px} .g-prose .g-bart .g-t3{margin:0} .g-prose .g-bart .g-bart-a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font:600 .85rem/1 var(--text);color:var(--terra-deep);text-decoration:none} .g-bart-a .icon{width:15px;height:15px;transition:transform .25s var(--ease)}.g-bart-a:hover .icon{transform:translateX(3px)} .g-bart-r{display:grid;grid-auto-flow:column;grid-auto-columns:74%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px} .g-bart-r::-webkit-scrollbar{display:none} .g-bart .m-t{scroll-snap-align:start;aspect-ratio:3/4} .g-prose .g-bart .m-t,.g-prose .g-bart .m-t *{color:#fff;text-decoration:none} .g-prose .g-bart .m-t img,.g-prose .g-video-btn img{position:absolute;inset:0;width:100%;height:100%!important;margin:0;object-fit:cover;border-radius:0} /* contre .g-prose img{height:auto!important} */ .a-art .g-prose .g-bart .m-t,.a-art .g-prose .g-bart .m-t *{color:#fff;text-decoration:none} @media (min-width:700px){.g-bart-r{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;overflow:visible}} /* MODULE Contact du sommaire : Eugenia sous le sommaire (ordinateur), bouton vers le contact par besoin */ .g-toc .g-tct{display:grid;gap:14px} .g-toc .g-tct .g-tct-t{margin:0} .g-tct{margin:24px 0 4px;padding:18px 18px 18px;border-radius:20px;background:linear-gradient(160deg,#FFFBF8 0%,var(--paper2) 100%);box-shadow:inset 0 0 0 1px rgba(178,90,69,.16),0 18px 40px -32px rgba(61,30,25,.5)} .g-tct-p{display:flex;align-items:center;gap:12px} .g-tct-p{gap:10px}.g-tct-p img{flex:none;width:40px!important;height:40px!important;border-radius:50%;object-fit:cover;object-position:top;box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(178,90,69,.28)} .g-tct-p span{display:grid;line-height:1.25} .g-tct-p strong{font:500 1.02rem/1.2 var(--display);color:var(--ink)} .g-tct-p small{font-size:.76rem;color:var(--muted)} .g-tct-t{margin:10px 0 12px;font-size:.84rem;line-height:1.5;color:var(--body)} .g-tct .g-tct-b{width:100%;justify-content:center} @media (min-width:1080px){.g-toc:has(.g-tct){display:flex;flex-direction:column;overflow:visible}.g-toc:has(.g-tct) ol{flex:0 1 auto;min-height:0;overflow:auto;scrollbar-width:none}.g-toc:has(.g-tct) .g-tct{flex:none}} /* MODULE Contact par besoin : fenêtre en deux temps (besoin, puis façon d'échanger) ; panneau du bas sur téléphone */ .g-cbs{width:min(560px,calc(100vw - 24px));max-height:calc(100svh - 24px);padding:26px 24px 22px;border:0;border-radius:26px;background:#fff;color:var(--body);box-shadow:0 40px 90px -30px rgba(30,14,11,.6);overflow:auto} .g-cbs::backdrop{background:rgba(30,14,11,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .g-cbs-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:var(--paper2);color:var(--ink);font:400 1.3rem/1 var(--text);cursor:pointer} .g-cbs-h{margin:0 0 16px;font:500 1.35rem/1.2 var(--display);color:var(--ink)} .g-cbs-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px} .g-cbs-o{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 14px;border:0;border-radius:16px;background:var(--paper2);color:var(--ink);font:600 .92rem/1.25 var(--text);text-align:left;cursor:pointer;transition:background .25s,box-shadow .25s} .g-cbs-o:hover,.g-cbs-o:focus-visible{background:#fff;box-shadow:inset 0 0 0 1.5px var(--terra);outline:none} .g-cbs-i{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--terra-deep)} .g-cbs-i svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .g-cbs-back{margin:0 0 14px;padding:6px 12px;border:0;border-radius:999px;background:var(--paper2);color:var(--terra-deep);font:600 .82rem/1 var(--text);cursor:pointer} .g-cbs-who{display:flex;align-items:center;gap:12px;margin:0 0 16px} .g-cbs-who p{margin:0;font-size:.88rem;line-height:1.45;color:var(--body)} .g-cbs-faces{display:flex;flex:none}.g-cbs-faces img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:top;box-shadow:0 0 0 3px #fff}.g-cbs-faces img+img{margin-left:-10px} .g-cbs[data-dir="0"] .g-cbs-faces,.g-cbs[data-dir="0"] .g-cbs-who p[data-dir="1"],.g-cbs:not([data-dir="0"]) .g-cbs-who p[data-dir="0"]{display:none} .g-cbs-c{display:grid;grid-template-columns:1fr 1fr;gap:10px} .g-cbs-c .g-cb-rdv,.g-cbs-c a[href^="tel:"]{grid-column:1 / -1} .g-cbs-f{display:grid;gap:10px;margin:0} .g-cbs-2c{display:grid;grid-template-columns:1fr 1fr;gap:10px} .g-cbs-f .pl-tel{position:relative;display:block} /* indicatif du pays : même dessin que les formulaires du Club et des landings (club.css .g-fld .pl-cc) */ .g-cbs-f .pl-cc{position:absolute;left:6px;top:6px;bottom:6px;z-index:1;display:flex;align-items:center;gap:6px;padding:0 10px 0 12px;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font:600 .95rem/1 var(--text);font-variant-numeric:tabular-nums;color:var(--ink)} .g-cbs-f .pl-cc::after{content:"";width:7px;height:7px;border-right:1.6px solid var(--terra-deep);border-bottom:1.6px solid var(--terra-deep);transform:translateY(-2px) rotate(45deg)} .g-cbs-f .pl-cc select{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;cursor:pointer;border:0} .g-cbs-f .pl-cc:focus-within{box-shadow:inset 0 0 0 1.5px var(--terra)} .g-cbs-f .pl-tel input{padding-left:96px!important} .g-cbs-ou{margin:18px 0 10px;padding-top:16px;border-top:1px solid var(--line);font:600 .78rem/1.3 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .g-cbs-f label{display:grid;gap:4px;font:600 .78rem/1.3 var(--text);color:var(--ink)} .g-cbs-f input[type=text],.g-cbs-f input[type=email],.g-cbs-f input[type=tel],.g-cbs-f textarea{width:100%;padding:12px 14px;border:0;border-radius:12px;background:var(--paper2);color:var(--ink);font:400 .95rem/1.4 var(--text)} .g-cbs-f .g-cbs-ok{display:flex;align-items:flex-start;gap:8px;font-weight:400;color:var(--body)} .g-cbs-f .g-cbs-ok a{color:var(--terra-deep)} .g-cbs-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .g-cbs-r{margin:0;font-size:.86rem;color:var(--terra-deep)} /* formulaire posé dans une page (page contact, 27/10/2026) : le projet en pastilles au-dessus des champs, puis qui vous répond */ .g-cbs-bes{margin:0 0 2px;padding:0;border:0;min-width:0} .g-cbs-f .g-cbs-q{display:block;margin:0 0 12px;padding:0;font:500 1.28rem/1.2 var(--display);color:var(--ink)} .g-cbs-pass{display:flex;flex-wrap:wrap;gap:8px} .g-cbs-f .g-cbs-pas{display:block;position:relative;font:inherit;cursor:pointer} .g-cbs-pas input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer} .g-cbs-pas span{display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:999px;background:var(--paper2);box-shadow:inset 0 0 0 1px rgba(61,30,25,.07);font:600 .86rem/1 var(--text);color:var(--ink);white-space:nowrap;transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)} .g-cbs-pas:hover span{box-shadow:inset 0 0 0 1.5px var(--terra)} .g-cbs-pas input:checked+span{background:var(--terra-deep);color:#fff;box-shadow:0 10px 22px -14px rgba(178,90,69,.9)} .g-cbs-pas input:focus-visible+span{outline:2px solid var(--terra);outline-offset:3px} .g-cbs-qui{display:flex;align-items:center;gap:12px;min-height:40px;margin:2px 0 4px} .g-cbs-qui p{margin:0;font-size:.86rem;line-height:1.45;color:var(--body)} .g-cbs-qui .g-cbs-faces img{width:40px;height:40px} .g-cbs-qui[data-dir="0"] .g-cbs-faces,.g-cbs-qui[data-dir="0"] p[data-dir="1"],.g-cbs-qui[data-dir="1"] p[data-dir="0"]{display:none} .g-cbs-f-page{gap:12px} .g-cbs-f-page [type=submit]{width:100%;margin-top:4px} @media (prefers-reduced-motion:reduce){.g-cbs-pas span{transition:none}} @media (max-width:599px){.g-cbs{margin:auto 0 0;width:100%;max-width:none;border-radius:26px 26px 0 0;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}.g-cbs-c{grid-template-columns:1fr}} /* MODULE Conseiller, variante « case » (fin d'article) : bande aux P entrelacés bien visibles, logo complet au P renforcé, tout centré, canaux en pilules de verre (charte du site) ; data-v g « Case de verre » / h « Sans case » (propositions du 3e tour) */ .g-endcta.g-endcta-case{position:relative;isolation:isolate;padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px);background:var(--paper2)} .g-endcta.g-endcta-case>.motif{--motif-fondu-haut:18%;--motif-fondu-bas:18%} /* lot 4296 : le motif SVG (ps_motif) remplace l'ancienne image */ .g-cta.g-cta-case{max-width:880px;margin:0 auto;grid-template-columns:1fr!important;justify-items:center;gap:0;padding:clamp(34px,5vw,52px) clamp(20px,5vw,56px);text-align:center;border-radius:32px;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),0 30px 70px -44px rgba(61,30,25,.5)} .g-cta.g-cta-case[data-v="h"]{max-width:880px;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none} .g-cta-case .g-cta-logo{width:clamp(170px,22vw,230px);height:auto;margin:0 0 22px} .g-cta-case .g-eyebrow{margin:0 0 12px} .g-cta-case .g-cta-h{font-size:clamp(1.65rem,1.2rem + 1.5vw,2.4rem);margin:0 0 14px!important} .g-cta-case-p{margin:0 auto 28px;max-width:52ch;font-size:1rem;line-height:1.6;color:var(--body)} .g-cta-case .g-cta-case-b{min-height:54px;padding:0 34px} .g-cta-case-l{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:22px 0 0} .g-gp{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px 0 6px;border-radius:999px;background:rgba(255,255,255,.58);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 12px 28px -20px rgba(61,30,25,.45);color:var(--ink);font:600 .88rem/1.2 var(--text);text-decoration:none;white-space:nowrap;transition:transform .25s var(--ease),box-shadow .25s var(--ease)} .g-gp .wa-dot{flex:none;width:36px;height:36px} .g-gp:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(178,90,69,.35),0 16px 32px -20px rgba(61,30,25,.5)} @media (max-width:599px){.g-cta-case-l{display:grid;grid-template-columns:1fr;width:100%}.g-gp{justify-content:flex-start}} @media (prefers-reduced-motion:reduce){.g-gp{transition:none}} /* MODULE Quartiers : carte de Monaco (pc_carte_monaco) sur la bande aux P entrelacés */ .g-qu.avec-carte{position:relative;isolation:isolate;padding-top:clamp(56px,7vw,96px);background:var(--paper2)} .g-qu.avec-carte>.motif{--motif-fondu-haut:14%;--motif-fondu-bas:30%} /* lot 4296 (« visuel vieillot ») : le motif SVG (ps_motif) remplace l'ancienne image */ /* lot 1575 (Paolo : « pas de cadre, la carte directement sur le fond avec un léger halo terracotta, comme l'accueil ») : même halo que l'accueil (.ac-qz) */ .g-qu .pc-carte{margin:0 0 clamp(20px,2.6vw,36px);padding:0;border-radius:0;box-shadow:none;background:radial-gradient(closest-side at 52% 54%,#F2DED2 0%,rgba(246,229,219,.75) 50%,rgba(251,245,241,0) 100%)} .g-qu .pc-carte svg{display:block;width:100%;height:auto;max-height:420px;overflow:visible} .g-qu .pc-carte polygon{fill:#fff;stroke:#EFD9CC;stroke-width:1.1;stroke-linejoin:round;transition:fill .35s var(--ease)} .g-qu .pc-carte polygon.nu{fill:#FBF3EE} .g-qu .pc-carte a{cursor:pointer;outline:none} .g-qu .pc-carte a:hover polygon,.g-qu .pc-carte a.on polygon{fill:var(--terra);stroke:#fff} .g-qu .pc-carte text{font:600 8px/1 var(--text);letter-spacing:.1em;text-transform:uppercase;fill:#8C6E62;text-anchor:middle;dominant-baseline:middle;pointer-events:none;paint-order:stroke;stroke:#fff;stroke-width:2.6px;stroke-linejoin:round;transition:fill .3s,stroke .3s} .g-qu .pc-carte text.on{fill:#fff;stroke:var(--terra)} .g-qu .pc-carte.g-qu-tel{display:none} .g-qu.avec-carte .g-qu-l>li.on .g-qu-d{color:var(--terra-deep)} @media (max-width:899px){.g-qu .pc-carte.g-qu-carte{display:none}.g-qu .pc-carte.g-qu-tel{display:block}.g-qu .pc-carte.g-qu-tel svg{max-height:70vh}.g-qu .pc-carte.g-qu-tel text{font-size:15px;stroke-width:4px}} /* Enchaînement des blocs de fin d'article (lot 1575 : « trop d'espace ») ; lot 4296 : aussi les guides (variante « fin » du module À lire) */ .g-alire.g-alire-fin{padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(24px,3vw,40px)} .g-alire.g-alire-fin .g-alire-t{margin-top:8px} /* lot 4350 : « À lire aussi » est le titre de l'en-tête, comme sur la fiche */ .a-art .g-sel,.g-guide .g-sel{padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(40px,5vw,64px)} @media (prefers-reduced-motion:reduce){.g-qu .pc-carte polygon,.g-qu .pc-carte text,.g-bart-a .icon{transition:none}} /* MODULE Motif entrelacé (lot 4296) : bibliothèque prismaze-design-graphique, composant motif-entrelace du 27/10/2026 (validé par Paolo, « en SVG seulement, plus l'image ») ; carreau img/petrini-p.svg tiré du sigle P (192 × 189), posé par ps_motif(). Calque en masque : couleur, opacité, échelle, fondu et lumière en variables. Adresse du carreau écrite ici en clair (jamais dans une variable : Safari la résoudrait contre la page). Taille du carreau : celle du catalogue (largeur / 12,5). Motif de base = motif--creux motif--lumiere motif--actuel. */ .motif{--motif-ratio:.984375;--motif-taille:calc(100vw / 12.5);--motif-couleur:var(--terra);--motif-opacite:.12;--motif-fond:transparent;--motif-x:0px;--motif-y:0px;--motif-fondu:linear-gradient(#000 0 0);--motif-lumiere:linear-gradient(#000 0 0);position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--motif-fond);-webkit-mask-image:var(--motif-fondu),var(--motif-lumiere);mask-image:var(--motif-fondu),var(--motif-lumiere);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:source-in;mask-composite:intersect} .motif::before{content:"";position:absolute;inset:0;background:var(--motif-couleur);opacity:var(--motif-opacite);-webkit-mask:url(img/petrini-p.svg) var(--motif-x) var(--motif-y)/var(--motif-taille) calc(var(--motif-taille) * var(--motif-ratio)) repeat;mask:url(img/petrini-p.svg) var(--motif-x) var(--motif-y)/var(--motif-taille) calc(var(--motif-taille) * var(--motif-ratio)) repeat} .motif--creux::before{-webkit-mask:url(img/petrini-p.svg) var(--motif-x) var(--motif-y)/var(--motif-taille) calc(var(--motif-taille) * var(--motif-ratio)) repeat,linear-gradient(#000 0 0);mask:url(img/petrini-p.svg) var(--motif-x) var(--motif-y)/var(--motif-taille) calc(var(--motif-taille) * var(--motif-ratio)) repeat,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} .motif--fondu{--motif-fondu-haut:18%;--motif-fondu-bas:38%;--motif-fondu:linear-gradient(180deg,transparent 0,#000 var(--motif-fondu-haut),#000 calc(100% - var(--motif-fondu-bas)),transparent 100%)} .motif--fondu-bas{--motif-fondu:linear-gradient(180deg,#000 0,#000 40%,transparent 100%)} .motif--lumiere{--motif-lumiere:linear-gradient(204deg,#000 0,rgba(0,0,0,.92) 14%,rgba(0,0,0,.8) 34%,rgba(0,0,0,.73) 41%,rgba(0,0,0,.47) 47%,transparent 54%,transparent 61%,rgba(0,0,0,.23) 75%,rgba(0,0,0,.48) 88%,rgba(0,0,0,.5) 100%)} .motif--actuel{--motif-couleur:#D6C6BE;--motif-opacite:.42} .motif,.motif::before{-webkit-print-color-adjust:exact;print-color-adjust:exact} /* MODULE À lire (lot 4296, Paolo : « module vieillot, motif P derrière à mettre ») : bande au motif de base, cartes blanches et pilules de verre posées dessus ; suivie de la fin d'article (« case »), les deux bandes n'en font qu'une (aucun creux blanc entre elles) */ .g-alire{position:relative;isolation:isolate;background:var(--paper2)} .g-alire>.motif{--motif-fondu-haut:14%;--motif-fondu-bas:20%} .g-alire:has(+.g-endcta-case)>.motif{--motif-fondu-bas:0%} .g-alire+.g-endcta-case>.motif{--motif-fondu-haut:0%} .g-alire+.g-endcta-case{padding-top:clamp(16px,2vw,32px)} /* lot 4350 (Paolo : « le bloc article pas bon, pas moderne » ; « regarde le template catalogue quand il y a des articles de blog liés à l'immeuble ») : le dessin des articles de la fiche de bien (petrini-catalogue/assets/fiche-plus.css, .fp-actus) : en-tête à gauche (surtitre, grand titre), une rangée par article à droite, sur un léger fond opaque (vignette carrée, date, titre, flèche) ; jamais de trait de séparation. Les cartes seules, sans les sous-pages des guides (Paolo, 4e tour). Une colonne sur téléphone. */ .g-alire-l{display:grid;gap:18px 20px;align-items:start} .g-alire-h .g-eyebrow{margin:0} .g-alire-t{margin:8px 0 0;font:500 clamp(1.75rem,2.25vw,2.2rem)/1.17 var(--display);color:var(--ink);letter-spacing:-.012em;text-wrap:balance} .g-alire-r{list-style:none;margin:0;padding:0;display:grid;gap:10px;min-width:0} .g-row{display:grid;grid-template-columns:72px minmax(0,1fr) 24px;grid-template-rows:auto auto;column-gap:20px;row-gap:5px;align-items:center;padding:10px 18px 10px 10px;border-radius:20px;background:rgba(255,255,255,.78);box-shadow:0 14px 30px -26px rgba(61,30,25,.4);color:inherit;text-decoration:none;transition:background .3s,box-shadow .3s} .g-row:hover{background:#fff;box-shadow:0 18px 36px -24px rgba(61,30,25,.45)} .g-row-i{grid-row:1/3;display:block;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--paper2)} .g-row-i img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .g-row:hover .g-row-i img{transform:scale(1.06)} .g-row-r{grid-column:2;align-self:end;font:600 .7rem/1.2 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--terra-deep)} .g-row-t{grid-column:2;align-self:start;font:500 1.06rem/1.32 var(--display);color:var(--ink);transition:color .3s} .g-row:not(:has(.g-row-r)) .g-row-t{grid-row:1/3;align-self:center} .g-row:hover .g-row-t{color:var(--terra-deep)} .g-row-f{grid-column:3;grid-row:1/3;display:grid;place-items:center;color:var(--terra-deep);transition:transform .3s} .g-row-f svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .g-row:hover .g-row-f{transform:translateX(4px)} @media (min-width:900px){.g-alire-l{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:20px}.g-alire-h{grid-column:1;padding:14px 12px 0 0}.g-alire-r{grid-column:2/-1}} @media (prefers-reduced-motion:reduce){.g-row,.g-row-i img,.g-row-f{transition:none}} .g-alire-l+.g-rech{margin-top:clamp(28px,4vw,44px)} .g-alire .g-rech a{background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 10px 24px -20px rgba(61,30,25,.45)} .g-alire .g-rech a:hover{background:#fff;box-shadow:inset 0 0 0 1px rgba(178,90,69,.4),0 12px 26px -20px rgba(61,30,25,.5)} /* MODULE Tableau (lot 4296, Paolo : « tableau obsolète, mise en page vieux site, à reprendre ») : tableaux de l'ancien CMS sans leurs styles en ligne (ps_corps_tableaux, corps.php), 5 langues. Carte blanche aérée sur un léger dégradé crème ; titre au dessin d'un intertitre ; en-têtes en petites capitales terracotta ; une rangée sur deux teintée, aux bouts arrondis (jamais de filets : « lignes de séparation proscrites », Paolo, 27/10/2026) ; chiffres alignés à droite en terracotta (th/td.n) ; note en petit dessous. Sur téléphone, un tableau large défile de côté dans sa carte. */ .g-prose .g-tab{margin:2.2em 0;padding:clamp(24px,3.2vw,40px) clamp(18px,3vw,40px) clamp(20px,2.6vw,30px);border-radius:28px;background:linear-gradient(165deg,#fff 0%,#fff 50%,var(--paper2) 100%);box-shadow:inset 0 0 0 1px rgba(178,90,69,.14),0 30px 60px -46px rgba(61,30,25,.42)} .g-prose .g-tab .g-tab-t{margin:0 0 8px;font:500 clamp(1.3rem,1.1rem + .7vw,1.7rem)/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)} .g-prose .g-tab .g-tab-s{margin:0 0 clamp(18px,2.2vw,26px);font-size:.9rem;line-height:1.6;color:var(--muted)} .g-prose .g-tab .g-tab-n{margin:clamp(18px,2.4vw,26px) 0 0;font-size:.8rem;line-height:1.6;color:var(--muted)} .g-prose .g-tab-x{max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity} .g-prose .g-tab>.g-tab-x{max-width:none;margin:0 calc(-1 * clamp(18px,3vw,40px));padding:0 clamp(18px,3vw,40px)} .g-prose table.g-t{width:100%;margin:0;border-collapse:separate;border-spacing:0;font-size:.95rem;line-height:1.45;color:var(--body);font-variant-numeric:tabular-nums;background:none} .g-prose table.g-t th{padding:0 14px 12px;text-align:left;vertical-align:bottom;font:600 .68rem/1.4 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--terra-deep);background:none;border:0} .g-prose table.g-t td{padding:14px;vertical-align:middle;background:none;border:0} .g-prose table.g-t tbody tr:nth-child(odd) td{background:rgba(251,234,223,.5)} .g-prose table.g-t tbody tr>td:first-child{border-radius:14px 0 0 14px} .g-prose table.g-t tbody tr>td:last-child{border-radius:0 14px 14px 0} .g-prose table.g-t td:first-child{color:var(--ink);font-weight:600} .g-prose table.g-t .n{text-align:right;white-space:nowrap} .g-prose table.g-t td.n,.g-prose table.g-t td.n strong{color:var(--terra-deep);font-weight:600} .g-prose table.g-t td strong{font-weight:600} @media (max-width:899px){.g-prose table.g-t{font-size:.88rem}.g-prose table.g-t:has(tr>:nth-child(4)){min-width:600px}} /* Guide au grand bandeau (lot 4296, Paolo : « présentation comme S'installer, grosse bannière ») : même bandeau que les rubriques (.g-hero) ; rubrique de l'article au-dessus du titre, en clair sur la photo ; l'article commence juste dessous (« espace grand » sous l'ancienne couverture) */ .g-hero .g-eyebrow a{color:inherit;text-decoration:none} .g-hero-guide .g-eyebrow{margin:0 0 14px;text-shadow:0 1px 12px rgba(0,0,0,.35)} .g-hero-guide h1{max-width:22ch;font-size:clamp(2rem,1.3rem + 3vw,4.1rem)} /* titres des guides plus longs que ceux des rubriques : 3 lignes plutôt que 5 */ /* photos de guide souvent claires (plans, marbre) : voile plus dense derrière le texte, à gauche et en bas, pour que le fil d'Ariane se lise */ @media (min-width:900px){.g-hero-guide::after{background:linear-gradient(90deg,rgba(30,14,11,.42) 0%,rgba(30,14,11,.18) 45%,rgba(30,14,11,0) 70%),linear-gradient(180deg,rgba(30,14,11,.45) 0%,rgba(30,14,11,.12) 24%,rgba(30,14,11,.22) 50%,rgba(30,14,11,.74) 100%)}} .g-hero-guide+.g-wrap{padding-top:clamp(32px,4vw,56px)} /* ===== En-tête de guide, variante Estimation (lot 4296, piste B validée par Paolo le 29/10/2026) : la carte d'estimation des Ads (module Estimation, petrini-landing : pl_est_carte, estimation.css) à droite du titre sur ordinateur, juste sous la photo sur téléphone ; templates/page.php (.g-est-top) pour toute page qui portait l'ancien calculateur ===== */ .g-est-top+.g-wrap{padding-top:clamp(32px,4vw,56px)} .g-est-carte{padding:24px var(--gutter) 0} .g-est-in{max-width:var(--max);margin:0 auto} @media (min-width:900px){ .g-est-top:has(>.g-hero){display:grid;grid-template:1fr / 1fr} .g-est-top>.g-hero,.g-est-top>.g-hero~.g-est-carte{grid-area:1 / 1} .g-est-top>.g-hero~.g-est-carte{position:relative;z-index:2;align-self:end;padding:120px var(--gutter) clamp(28px,5vw,64px);pointer-events:none} .g-est-top>.g-hero~.g-est-carte .g-est-in{display:flex;justify-content:flex-end} .g-est-top>.g-hero~.g-est-carte .vd-card,.g-est-top>.g-hero~.g-est-carte .pc-om-verre{width:410px;pointer-events:auto} /* même place pour la carte d'accès de la page Off-market (29/10/2026) */ .g-hero-est .g-hero-in{padding-right:466px} .g-hero-est h1{max-width:16ch} }