/* GABARIT : contact (/xx/contact.html, templates/contact.php) — piste A « Le carton de verre », choisie par Paolo le 27/10/2026.
Photo de Monaco en plein écran, le formulaire est une carte de verre posée dessus qui se soulève à l'ouverture (opacité et mouvement
seulement), les autres canaux sous le titre ; puis l'agence, les guides tirés de S'installer et le bloc Actualités de l'ancienne page.
Jetons et composants du site : --terra-deep, --paper2, .btn.solid, .g-cb, .g-gp, champs .g-cbs-f, cartes .g-card (site.css). */
/* Ouverture : photo plein écran (ordinateur), deux tiers d'écran (téléphone) */
.ctp-hero{position:relative;isolation:isolate;padding:calc(120px + env(safe-area-inset-top,0px)) var(--gutter) clamp(48px,6vw,88px);color:#fff;background:var(--paper2)}
.ctp-hero picture{position:absolute;left:0;right:0;top:0;height:100%;z-index:-2;overflow:hidden}
.ctp-hero picture img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;animation:ctp-kb 14s var(--ease) both}
.ctp-hero::after{content:"";position:absolute;left:0;right:0;top:0;height:100%;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(30,14,11,.66) 0%,rgba(30,14,11,.34) 46%,rgba(30,14,11,.12) 100%),linear-gradient(180deg,rgba(30,14,11,.5) 0,rgba(30,14,11,0) 22%)}
.ctp-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);grid-template-areas:"t carte" "autre carte";column-gap:clamp(40px,6vw,104px);row-gap:36px;align-items:start}
.ctp-t{grid-area:t;align-self:end;padding-top:clamp(20px,6vh,90px)}
.ctp-hero .g-crumbs{color:#fff}
.ctp-hero .g-crumbs ol{text-shadow:0 1px 12px rgba(0,0,0,.45)}
.ctp-hero .g-eyebrow{color:var(--rose)}
.ctp-hero h1{color:#fff;font-size:clamp(2.5rem,1.6rem + 3.8vw,5.1rem);line-height:1;letter-spacing:-.02em;margin:0 0 22px;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.ctp-intro{margin:0;max-width:52ch;font-size:1.02rem;line-height:1.62;color:rgba(255,255,255,.92);text-shadow:0 1px 16px rgba(0,0,0,.35)}
/* Le carton de verre : le formulaire unique du site (ps_contact_form), avec le projet en pastilles */
.ctp-carte{grid-area:carte;position:relative;border-radius:28px;padding:clamp(22px,2.4vw,32px);color:var(--body);background:rgba(253,249,246,.93);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),0 44px 90px -44px rgba(30,14,11,.75);animation:ctp-leve 1s var(--ease) .15s both}
.ctp-carte .g-cbs-f input[type=text],.ctp-carte .g-cbs-f input[type=email],.ctp-carte .g-cbs-f input[type=tel],.ctp-carte .g-cbs-f textarea{background:rgba(251,245,241,.95)}
.ctp-carte .g-cbs-f textarea{min-height:92px;resize:vertical}
/* Ou échangez autrement : les boutons du module, deux par ligne sur la photo */
.ctp-autre{grid-area:autre;max-width:600px}
.ctp-ou{margin:0 0 12px;font:600 .74rem/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.ctp-cbs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ctp-cbs .g-cb{justify-content:flex-start}
.ctp-cbs .g-cb:not(.g-cb-rdv){background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* L'agence : la photo de l'enseigne, l'adresse, le téléphone, l'e-mail, l'itinéraire */
.ctp-ag{padding:var(--s4) var(--gutter);background:var(--paper2)}
.ctp-ag-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:center}
.ctp-ag-ph{margin:0;border-radius:28px;overflow:hidden;aspect-ratio:4/3;max-width:100%;background:var(--rose);box-shadow:0 30px 60px -40px rgba(61,30,25,.6)}
.ctp-ag-ph img{width:100%;height:100%;object-fit:cover}
.ctp-adr{font-style:normal;display:grid;gap:2px;margin:6px 0 18px;font-size:1.02rem;color:var(--body)}
.ctp-adr strong{font:500 1.2rem/1.3 var(--display);color:var(--ink);margin-bottom:4px}
.ctp-co{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 6px}
.ctp-co a{font-weight:600;color:var(--terra-deep);text-decoration:none;font-variant-numeric:tabular-nums}
.ctp-co a:hover{text-decoration:underline}
.ctp-we{margin:0 0 22px;font-size:.86rem;color:var(--muted)}
.ctp-iti{background:#fff}
.ctp-iti .wa-dot.ml svg{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Guides de S'installer, puis un seul bloc Actualités (H3 de l'ancienne page, texte, bouton) avec les 3 derniers articles du blog
(piste A du bas de page, choisie par Paolo le 27/10/2026 : « cette partie est pas claire » ; plus de photo sans rapport ni de 2e titre) */
.ctp-dec>.inner>.g-eyebrow{margin:0 0 10px}
.ctp-dec .g-t2{margin:0 0 clamp(24px,3vw,40px)}
.ctp-actu{margin-top:clamp(56px,7vw,96px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--line)}
.ctp-actu-t{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;align-items:end;margin-bottom:clamp(22px,3vw,34px)}
.ctp-actu-t .ctp-actu-h{grid-column:1;font-size:clamp(1.6rem,1.25rem + 1.5vw,2.5rem);line-height:1.12;margin:0 0 12px;max-width:24ch}
.ctp-actu-t p{grid-column:1;margin:0;max-width:68ch;font-size:.95rem}
.ctp-actu-t .btn{grid-column:2;grid-row:1 / span 2;align-self:end;text-decoration:none}
.ctp-actu .g-art .g-card-txt>p.g-art-t{font-size:clamp(1.12rem,1.05rem + .4vw,1.32rem);line-height:1.22}
@keyframes ctp-leve{from{opacity:0;transform:translateY(34px) scale(.985)}}
@keyframes ctp-kb{from{transform:scale(1.08)}to{transform:scale(1)}}
@media (max-width:899px){
/* téléphone (Paolo, 27/10/2026 : « trop d'image, le bloc contact peut dépasser sur l'image pour un effet plus moderne ») : la photo
couvre le texte et les 120 premiers pixels de la carte, quelle que soit la longueur de l'intro (grille : photo sur les rangées 1-2) */
.pl-main>section.ctp-hero{display:grid;grid-template-columns:var(--gutter) minmax(0,1fr) var(--gutter);grid-template-rows:auto 120px auto auto;padding:0 0 40px;color:var(--ink)} /* plus fort que .pl-main > section (petrini.css) */
.ctp-in{display:contents}
.ctp-hero picture,.ctp-hero::after{position:relative;grid-column:1 / -1;grid-row:1 / 3;height:auto;z-index:0}
.ctp-hero picture{z-index:-2}
.ctp-hero::after{z-index:-1;background:linear-gradient(180deg,rgba(30,14,11,.55) 0,rgba(30,14,11,.18) 30%,rgba(30,14,11,.35) 60%,rgba(30,14,11,.78) 100%)}
.ctp-t{grid-column:2;grid-row:1;min-height:calc(min(50svh,440px) - 120px);display:flex;flex-direction:column;justify-content:flex-end;padding:92px 0 22px;color:#fff}
.ctp-hero h1{font-size:clamp(2.1rem,9.6vw,2.6rem);margin:0 0 12px;hyphens:manual}
.ctp-intro{font-size:.93rem;line-height:1.5}
.ctp-carte{grid-column:2;grid-row:2 / 4;margin-top:0;background:#fff}
.ctp-autre{grid-column:2;grid-row:4;margin-top:28px;max-width:none}
.ctp-ou{color:var(--muted)}
.ctp-cbs .g-cb-rdv,.ctp-cbs a[href^="tel:"]{grid-column:1 / -1}
.ctp-cbs .g-cb:not(.g-cb-rdv){background:#fff}
.ctp-ag{padding:56px var(--gutter)}
.ctp-ag-in{grid-template-columns:1fr}
.ctp-actu-t{grid-template-columns:1fr}
.ctp-actu-t .btn{grid-column:1;grid-row:auto;justify-self:start;margin-top:18px}
/* barre d'action 50/50 (ps_barre_mobile) : la page n'a pas de chapitres pour la barre « B » des articles */
html body.g-contact .sticky{display:grid!important}
}
@media (prefers-reduced-motion:reduce){.ctp-hero picture img,.ctp-carte{animation:none}}
/* MODULE Guide par projet (includes/guide-projet.php ; piste A1 choisie par Paolo le 27/10/2026) : ordinateur, liste des projets à gauche
et carte du projet choisi à droite ; téléphone, accordéon qui s'ouvre sous le projet touché ; photos des pages à la place des numéros */
.pl-main>section.gp{padding:var(--s4) var(--gutter) clamp(24px,3vw,40px);background:var(--paper2)}
.gp .g-t2{margin:0 0 10px}
.gp-hint{display:flex;align-items:center;gap:12px;margin:0 0 22px;font-size:.95rem;color:var(--body)}
.gp-hint-i{position:relative;flex:none;width:12px;height:12px;margin-left:6px;border-radius:50%;background:var(--terra-deep)}
.gp-hint-i::after{content:"";position:absolute;inset:-6px;border-radius:50%;box-shadow:0 0 0 2px rgba(178,90,69,.45);animation:gp-onde 2.4s var(--ease) infinite}
@keyframes gp-onde{from{transform:scale(.6);opacity:1}to{transform:scale(1.6);opacity:0}}
.gp-i{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--paper2);color:var(--terra-deep)}
.gp-i svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gp-acc{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);column-gap:24px;row-gap:8px;align-items:start}
.gp-it{display:contents}
.gp-h{grid-column:1;display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:0 16px 0 12px;border:0;border-radius:18px;background:rgba(255,255,255,.55);color:var(--ink);font:600 .95rem/1.2 var(--text);text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line);transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.gp-h:hover{background:#fff}
.gp-h .gp-ch{margin-left:auto;width:20px;height:20px;color:var(--muted);transform:rotate(-90deg);transition:transform .35s var(--ease),color .3s}
.gp-it.on .gp-h{background:#fff;box-shadow:inset 0 0 0 1.5px var(--terra),0 14px 28px -20px rgba(61,30,25,.5)}
.gp-it.on .gp-h .gp-i{background:var(--terra-deep);color:#fff}
.gp-it.on .gp-h .gp-ch{color:var(--terra-deep)}
.gp-body{grid-column:2;grid-row:1 / span 6;padding:clamp(24px,2.6vw,36px);border-radius:28px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 30px 60px -44px rgba(61,30,25,.55)}
.gp-it:not(.on) .gp-body{display:none}
.gp-it.on .gp-body{animation:gp-in .45s var(--ease) both}
@keyframes gp-in{from{opacity:0;transform:translateY(8px)}}
.gp-q{margin:0 0 8px;font:500 clamp(1.45rem,1.2rem + 1vw,2rem)/1.15 var(--display);color:var(--ink)}
.gp-p{margin:0 0 20px;font-size:.95rem;line-height:1.6;color:var(--body);max-width:60ch}
.gp-pages{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gp-pages a{position:relative;display:flex;flex-direction:column;height:100%;border-radius:20px;overflow:hidden;background:var(--paper2);color:inherit;text-decoration:none;box-shadow:inset 0 0 0 1px rgba(61,30,25,.06);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.gp-pages a:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px rgba(178,90,69,.4),0 18px 34px -26px rgba(61,30,25,.6)}
.gp-ph{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--rose)}
.gp-ph img{width:100%;height:100%;object-fit:cover}
.gp-st{display:grid;gap:3px;padding:14px 16px 16px;min-width:0}
.gp-st b{font:500 1.08rem/1.25 var(--display);color:var(--ink)}
.gp-st span{font-size:.84rem;line-height:1.45;color:var(--body)}
.gp-go{position:absolute;right:12px;top:12px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--terra-deep);transition:transform .3s var(--ease)}
.gp-go .icon{width:16px;height:16px}
.gp-pages a:hover .gp-go{transform:translateX(3px)}
.gp-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding-top:18px;border-top:1px solid var(--line)}
.gp-qui{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 300px}
.gp-qui p{margin:0;font-size:.86rem;line-height:1.45;color:var(--body)}
.gp-qui .g-cbs-faces img{width:40px;height:40px}
.gp .g-cb-rdv{justify-content:flex-start}
.pl-main>.gp+.ctp-dec{padding-top:clamp(8px,1vw,16px)}
.gp+.ctp-dec .ctp-actu:first-child{margin-top:0} /* sinon sa marge sort de la section : bande blanche entre le guide et les actualités */
/* ordinateur (Paolo, 27/10/2026 : « lignes trop espacées et pas alignées avec le bas du module ») : la carte prend la hauteur du projet
le plus long (cartes cachées superposées, visibility et non display), les 6 boutons remplissent leur ligne à 8 px d'écart, le premier
sur le haut de la carte, le dernier sur le bas, sans saut d'un projet à l'autre ; un projet plus court agrandit ses photos plutôt que
de laisser un vide au-dessus du rendez-vous */
@media (min-width:900px){
.gp-acc{align-items:stretch}
.gp-body,.gp-it:not(.on) .gp-body{display:flex;flex-direction:column}
.gp-it:not(.on) .gp-body{visibility:hidden;pointer-events:none}
/* les trois cartes partagent les mêmes lignes (sous-grille) : photos de même hauteur, textes alignés, même avec une phrase sur deux lignes */
.gp-pages{flex:1 0 auto;grid-template-rows:minmax(0,1fr) auto}
.gp-pages>li{display:grid;grid-row:span 2;grid-template-rows:subgrid}
.gp-pages a{display:grid;grid-row:span 2;grid-template-rows:subgrid;height:auto}
.gp-ph{align-self:stretch}
.gp-st{align-content:start} /* titre et phrase restent serrés quand la carte voisine a une phrase sur deux lignes */
}
@media (max-width:899px){
.pl-main>section.gp{padding:56px var(--gutter) 8px}
.gp-acc{display:block}
.gp-it{display:block;margin:0 0 10px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.gp-it.on{box-shadow:inset 0 0 0 1.5px var(--terra),0 18px 36px -26px rgba(61,30,25,.55)}
.gp-h,.gp-it.on .gp-h{min-height:64px;background:none;box-shadow:none}
.gp-h .gp-ch{transform:none}
.gp-it.on .gp-h .gp-ch{transform:rotate(180deg)}
.gp-body{padding:4px 16px 18px;border-radius:0;background:none;box-shadow:none}
.gp-pages{grid-template-columns:1fr;gap:10px}
.gp-pages a{flex-direction:row;align-items:center;gap:14px;padding:10px 12px 10px 10px}
.gp-ph{flex:none;width:84px;aspect-ratio:4/3;border-radius:14px}
.gp-st{padding:0;flex:1}
.gp-go{position:static;background:#fff}
.gp-cta{flex-direction:column;align-items:flex-start}
.gp-qui{flex:none}
}
@media (prefers-reduced-motion:reduce){.gp-hint-i::after,.gp-it.on .gp-body{animation:none}.gp-h,.gp-pages a,.gp-go,.gp-ch{transition:none}}