@import url("coulissant-panoramique.css");
/* @import Google Fonts retiré le 2 oct. 2026 (audit RGPD) : polices servies par assets/css/fonts.css, lié par views/layout.php. */
/* Espace PRO (1er oct. 2026), d'après les captures de tylko.com/fr-fr/tylko-pro
   envoyées par Jeremy. Reprend coulissant-panoramique.css (grand visuel .cp-hero,
   formulaire .cp-form, .btn) et ajoute le gabarit Tylko Pro : fond crème, section
   grise, titres larges, pastilles, mosaïque étiquetée, liste dépliable, bandeau
   photo, avis en cartes, carte du showroom, formulaire posé sur une photo.
   Titres en Poppins comme les pages gamme ; accents bleu du site. */

body.page-espace-pro{--pr-creme:#f4f2f0;--pr-gris:#e9e6e2;--pr-bleu:#001d6d;background:var(--pr-creme)}
.pr-sec{padding:clamp(72px,9vw,128px) 0}
.pr-clair{background:var(--pr-creme)}
.pr-gris{background:var(--pr-gris)}
.pr-sec-haut0{padding-top:0}
.pr-sur{font-size:.92rem;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin:0 0 18px}
.pr-h2{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;letter-spacing:-.025em;font-size:clamp(2.1rem,4.2vw,3.6rem);line-height:1.08;margin:0;text-wrap:balance}
.pr-h2-gauche{max-width:20ch;margin-bottom:clamp(28px,3.5vw,44px)}
/* 6 oct. 2026 (Jeremy : « le titre sur 3 lignes ») : « Prenez contact avec votre
   commercial référent » passait sur 4 lignes à la taille des autres titres. */
.pr-h2-referent{font-size:clamp(1.9rem,2.45vw,2.6rem);max-width:none}
.pr-tete-centre{text-align:center;max-width:980px;margin:0 auto clamp(48px,6vw,80px)}
.pr-intro{margin:22px auto 0;max-width:72ch;color:var(--ink-soft);font-size:1.02rem;line-height:1.7}
.pr-tete-ligne{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;margin-bottom:clamp(28px,3.5vw,44px)}
.pr-tete-ligne .pr-h2-gauche{margin-bottom:0}

/* Boutons en pilule */
.pr-btn{display:inline-flex;align-items:center;justify-content:center;padding:16px 32px;border-radius:999px;font-weight:500;font-size:1.02rem;
  text-decoration:none;white-space:nowrap;transition:transform .25s,background .25s,color .25s}
.pr-btn:hover{transform:translateY(-2px)}
.pr-btn-blanc{background:#fff;color:var(--ink)}
.pr-btn-trait{border:1.5px solid var(--ink);color:var(--ink)}
.pr-btn-trait:hover{background:var(--ink);color:#fff}
.pr-btn-verre{border:1.5px solid rgba(255,255,255,.8);color:#fff}
.pr-btn-verre:hover{background:#fff;color:var(--ink)}

/* 1. Grand visuel : texte centré, chiffres en bas */
.pr-hero{min-height:min(88vh,900px);align-items:stretch}
.pr-hero-voile{background:radial-gradient(ellipse at 50% 45%,rgba(8,16,20,.5) 0%,rgba(8,16,20,.25) 60%,rgba(8,16,20,.15) 100%),
  linear-gradient(180deg,rgba(8,16,20,.45) 0%,rgba(8,16,20,0) 25%,rgba(8,16,20,0) 70%,rgba(8,16,20,.55) 100%)}
/* 2 oct. 2026 (Jeremy : « dans la page pro aussi moins noir ») : environ 40 % de noir
   en moins, comme l'accueil. Le titre centré garde son ombre portée (text-shadow). */
.pr-hero-voile{background:radial-gradient(ellipse at 50% 45%,rgba(8,16,20,.3) 0%,rgba(8,16,20,.15) 60%,rgba(8,16,20,.08) 100%),
  linear-gradient(180deg,rgba(8,16,20,.25) 0%,rgba(8,16,20,0) 25%,rgba(8,16,20,0) 70%,rgba(8,16,20,.35) 100%)}
.pr-hero-in{display:flex;flex-direction:column;justify-content:space-between;text-align:center;padding-bottom:28px}
.pr-hero-in > .wrap{margin:auto 0;display:flex;flex-direction:column;align-items:center}
.cp-hero .pr-hero-h1{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;letter-spacing:-.025em;
  font-size:clamp(2.1rem,4.2vw,3.7rem);line-height:1.08;margin:0 auto 18px;max-width:22ch;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.pr-marque{display:block;font-size:clamp(1.2rem,1.8vw,1.6rem);font-weight:500;letter-spacing:-.01em;margin-bottom:14px}
.pr-marque sup{font-size:.55em;margin-left:3px;letter-spacing:.04em}
.pr-hero-sous{font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.5;color:#fff;max-width:60ch;margin:0 auto 34px;text-shadow:0 1px 18px rgba(0,0,0,.4)}
.pr-hero-faits{list-style:none;margin:48px 0 0;padding:0 24px;display:flex;justify-content:center;flex-wrap:wrap;gap:12px clamp(32px,7vw,120px)}
.pr-hero-faits li{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;font-size:clamp(1rem,1.6vw,1.35rem);letter-spacing:-.01em;color:#fff;opacity:.95}

/* 2. Trois colonnes */
.pr-trois{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px clamp(32px,5vw,72px)}
.pr-trois li{display:flex;gap:18px;align-items:flex-start}
.pr-trois svg{flex:none;width:26px;height:26px;margin-top:6px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pr-trois h3{font-family:"Poppins",-apple-system,sans-serif;font-weight:300;font-size:clamp(1.4rem,2vw,1.85rem);line-height:1.2;letter-spacing:-.01em;margin:0 0 14px}
.pr-trois p{margin:0;color:var(--ink-soft);font-size:1.02rem;line-height:1.6}
@media (max-width:960px){ .pr-trois{grid-template-columns:minmax(0,1fr)} }

/* 3. Pastilles + mosaïque (grande à gauche, deux empilées à droite) */
.pr-pastilles{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:clamp(32px,4vw,48px)}
.pr-pastille{font:inherit;font-size:1rem;padding:13px 22px;border-radius:999px;border:1px solid rgba(15,22,27,.25);background:transparent;color:var(--ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.pr-pastille:hover{border-color:var(--ink)}
.pr-pastille[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.pr-pastille:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pr-mosaique{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:16px;height:clamp(520px,58vw,860px)}
.pr-mosaique[hidden]{display:none}
.pr-tuile{position:relative;display:block;border-radius:16px;overflow:hidden;background:var(--pr-creme)}
.pr-tuile:first-child{grid-row:span 2}
/* 4 tuiles (Terrasse, 15 oct. 2026) : grande photo à gauche, une large en haut à droite, deux en dessous */
.pr-mosaique-4{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr)}
.pr-mosaique-4 .pr-tuile:nth-child(2){grid-column:span 2}
.pr-tuile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.pr-tuile:hover img{transform:scale(1.03)}
.pr-etiquettes{position:absolute;left:14px;bottom:14px;display:flex;flex-wrap:wrap;gap:10px}
.pr-etiquette{display:inline-block;padding:9px 14px;border-radius:10px;background:rgba(240,238,235,.92);color:var(--ink);font-size:1rem;font-weight:500;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pr-etiquette-voile{background:rgba(240,238,235,.45);color:#fff;font-weight:400}
.pr-tuile{cursor:zoom-in}
/* Visionneuse des chantiers (15 oct. 2026) : copie du dessin de .in-visio (inspiration.css) */
.pr-visio:not([open]){display:none}
.pr-visio[open]{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;width:100vw;height:100vh;
  max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden}
.pr-visio::backdrop{background:rgba(6,12,16,.9)}
.pr-visio figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:calc(100vw - 180px)}
.pr-visio img{max-width:100%;max-height:calc(100vh - 170px);border-radius:24px;object-fit:contain;background:#111}
.pr-visio figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 20px;color:rgba(255,255,255,.9);font-size:1rem;text-align:center}
.pr-visio .pr-btn{padding:12px 26px}
.pr-visio-fermer,.pr-visio-fl{position:fixed;z-index:2;width:50px;height:50px;border-radius:50%;border:0;background:#fff;color:#0f161b;
  cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}
.pr-visio-fermer{top:18px;right:18px}
.pr-visio-fl{top:50%;margin-top:-25px}
.pr-visio-fl[data-pr-sens="-1"]{left:18px}
.pr-visio-fl[data-pr-sens="1"]{right:18px}
.pr-visio.seule .pr-visio-fl{display:none}
.pr-visio svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
html.pr-visio-ouvert{overflow:hidden}
@media (max-width:700px){
  .pr-visio figure{max-width:100vw;padding:0 10px}
  .pr-visio-fl{top:auto;bottom:18px;margin-top:0}
  .pr-visio img{max-height:calc(100vh - 220px)}
}
@media (max-width:760px){
  .pr-mosaique{grid-template-columns:minmax(0,1fr);grid-template-rows:none;height:auto}
  .pr-tuile,.pr-tuile:first-child{grid-row:auto;aspect-ratio:4/3}
  .pr-mosaique-4 .pr-tuile:nth-child(2){grid-column:auto}
}

/* 4. Qu'est-ce qui vous attend ? : image + liste dépliable */
.pr-attend{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
/* Photo verticale de l'artisan (1er oct.) : cadre 4/5, plafonné, visage gardé. */
.pr-attend-img{border-radius:16px;overflow:hidden;aspect-ratio:4/5;max-height:760px}
.pr-attend-img img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
@media (max-width:960px){ .pr-attend-img{aspect-ratio:4/3} }
.pr-acc details{border-bottom:1px solid rgba(15,22,27,.15)}
.pr-acc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;
  padding:22px 0;font-family:"Poppins",-apple-system,sans-serif;font-weight:400;font-size:clamp(1.15rem,1.6vw,1.45rem);letter-spacing:-.01em}
.pr-acc summary::-webkit-details-marker{display:none}
.pr-acc summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pr-plus{position:relative;flex:none;width:18px;height:18px}
.pr-plus::after{content:"";position:absolute;left:4px;top:2px;width:10px;height:10px;border-right:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink);transform:rotate(45deg);transition:transform .25s}
.pr-acc details[open] .pr-plus::after{transform:translateY(5px) rotate(-135deg)}
.pr-acc details p{margin:0 0 24px;max-width:60ch;color:var(--ink-soft);font-size:1rem;line-height:1.65}
@media (max-width:960px){ .pr-attend{grid-template-columns:minmax(0,1fr)} }

/* 5. Grand bandeau photo, texte en bas à gauche */
.pr-bandeau{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.pr-bandeau > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pr-bandeau-voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,16,20,0) 40%,rgba(8,16,20,.6) 100%),linear-gradient(90deg,rgba(8,16,20,.35) 0%,rgba(8,16,20,0) 60%)}
.pr-bandeau-in{position:relative;z-index:1;width:100%;padding-top:80px;padding-bottom:clamp(48px,6vw,80px)}
.pr-bandeau .pr-sur{color:#fff}
.pr-bandeau h2{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;letter-spacing:-.025em;font-size:clamp(2.1rem,4.4vw,3.7rem);line-height:1.08;
  max-width:19ch;margin:0 0 34px;color:#fff;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.3)}
.pr-bandeau-btns{display:flex;gap:16px;flex-wrap:wrap}

/* 6. Avis */
.pr-avis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:1100px){ .pr-avis{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .pr-avis{grid-template-columns:minmax(0,1fr)} }
.pr-avis-carte{margin:0;background:#fff;border-radius:18px;padding:40px 38px;display:flex;flex-direction:column;gap:36px}
.pr-avis-carte img{width:130px;height:130px;border-radius:50%;object-fit:cover;background:var(--pr-creme)}
.pr-avis-carte blockquote{margin:0;flex:1}
.pr-avis-carte blockquote p{margin:0;font-style:italic;font-size:clamp(1.1rem,1.4vw,1.3rem);line-height:1.5;color:var(--ink)}
.pr-avis-carte figcaption{font-size:.95rem;color:var(--ink-soft)}
.pr-avis-carte figcaption b{display:block;color:var(--ink);font-weight:600}

/* 7. Carte du showroom */
/* 1er oct. (Jeremy : « mets le bloc en grand dans la page ») : toute la largeur
   du contenu (avant : 980 px max), photo plus haute, texte plus grand. */
.pr-lieu{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);background:#fff;border-radius:16px;overflow:hidden}
.pr-lieu-img{position:relative;min-height:clamp(380px,38vw,600px)}
.pr-lieu-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pr-lieu-img .pr-etiquette{position:absolute;left:12px;top:12px}
.pr-lieu-txt{padding:clamp(28px,4vw,64px);display:flex;flex-direction:column;justify-content:center}
.pr-lieu-txt h3{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 24px}
.pr-lieu-txt p{margin:0 0 16px;color:var(--ink);font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.6}
.pr-lieu-txt .pr-lien{margin-top:16px}
.pr-lien{margin-top:auto;padding-top:20px;align-self:flex-start;color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.pr-lien:hover{color:var(--accent-deep)}
@media (max-width:760px){ .pr-lieu{grid-template-columns:minmax(0,1fr)} .pr-lieu-img{min-height:0;aspect-ratio:4/3} }

/* 8. Inscription : liste à gauche, formulaire posé sur une photo à droite */
.pr-inscription{scroll-margin-top:110px;overflow:hidden}
.pr-inscription-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:center}
.pr-inscription-lede{margin:0 0 30px;color:var(--ink-soft);font-size:1.05rem;line-height:1.6}
.pr-inscription-lede a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pr-coches{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.pr-coches li{display:flex;gap:14px;align-items:flex-start;font-size:1.1rem;color:var(--ink)}
.pr-coches svg{flex:none;width:20px;height:20px;margin-top:3px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pr-tel{display:inline-block;margin-top:28px;color:var(--ink-soft)}
.pr-tel b{color:var(--ink)}
.pr-inscription-droite{position:relative;padding:clamp(40px,5vw,80px) 0 clamp(40px,5vw,80px) clamp(40px,5vw,80px);margin-right:calc(-1 * clamp(56px,11vw,220px))}
.pr-inscription-fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:24px 0 0 24px}
.pr-form{position:relative;z-index:1;max-width:620px;border-radius:24px;box-shadow:0 30px 60px -30px rgba(12,40,58,.45)}
@media (max-width:960px){
  .pr-inscription-in{grid-template-columns:minmax(0,1fr)}
  .pr-inscription-droite{margin-right:-24px;margin-left:-24px;padding:32px 16px}
  .pr-inscription-fond{border-radius:0}
}

@media (prefers-reduced-motion:reduce){
  .pr-btn,.pr-tuile img,.pr-plus::before,.pr-plus::after{transition:none}
}