/* projet.css — page « projet client » (1er oct. 2026). Modèle : pages projet de
 * comenza.com, à la charte du site : bandeau de titre des autres pages, arrondis
 * 24 px, pastilles et cartouches blancs de la page Inspiration. */

.pj-bandeau{background:var(--bone);padding:clamp(56px,7vw,96px) 0 clamp(32px,4vw,48px)}
.pj-bandeau-in{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px}
.pj-retour{display:table;font-size:.88rem;color:var(--ink-soft);margin-bottom:18px;text-decoration:none}
.pj-retour:hover{color:#001d6d}
.pj-titre{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;line-height:1.1;letter-spacing:-.02em;
  font-size:clamp(2rem,4.2vw,3.2rem);color:var(--ink);margin:14px 0 0;text-wrap:balance}

.pj-corps{background:#fff;padding:clamp(32px,4vw,56px) 0 clamp(56px,7vw,96px)}
.pj-photo{margin:0 0 clamp(36px,5vw,64px)}
.pj-photo img{display:block;width:100%;height:auto;max-height:78vh;object-fit:cover;border-radius:24px}
/* 15 oct. 2026 (« mets la première photo en 1/2 à droite et le texte à gauche ») : récit à gauche,
   photo à droite (collante au défilement) ; empilés sous 900 px, la photo d'abord. */
.pj-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start;
  margin:0 0 clamp(28px,4vw,48px)}
.pj-intro .pj-photo{margin:0}
.pj-media{position:sticky;top:120px}            /* colonne photo collante (photo + galerie) */
.pj-photo a{display:block;cursor:zoom-in}
/* Galerie du chantier sous la grande photo (15 oct. 2026) : 4 vignettes par rangée. */
.pj-galerie{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pj-galerie a{display:block;border-radius:12px;overflow:hidden;cursor:zoom-in;aspect-ratio:4/3;background:#eef1f3}
.pj-galerie img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.pj-galerie a:hover img{transform:scale(1.05)}
.pj-galerie a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* Visionneuse (même dessin que .in-visio / .pr-visio) */
.pj-visio:not([open]){display:none}
.pj-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}
.pj-visio::backdrop{background:rgba(6,12,16,.9)}
.pj-visio img{max-width:calc(100vw - 180px);max-height:calc(100vh - 80px);border-radius:24px;object-fit:contain}
.pj-visio-fermer,.pj-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)}
.pj-visio-fermer{top:18px;right:18px}
.pj-visio-fl{top:50%;margin-top:-25px}
.pj-visio-fl[data-pj-sens="-1"]{left:18px}
.pj-visio-fl[data-pj-sens="1"]{right:18px}
.pj-visio.seule .pj-visio-fl{display:none}
.pj-visio svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
html.pj-visio-ouvert{overflow:hidden}
/* 16 oct. 2026 (Jeremy : « dans la galerie des fois il y a un film bleu qui apparaît sur les
   images ») : voile bleu de SÉLECTION du navigateur après un double-clic (flèches de la
   visionneuse, vignettes) et surlignage bleu au toucher sur mobile. Photos non sélectionnables. */
.pj-photo,.pj-galerie,.pj-recit-img,.pj-autres-grille,.pj-visio{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.pj-photo img,.pj-galerie img,.pj-recit-img img,.pj-autres-grille img,.pj-visio img{-webkit-user-drag:none}
@media (max-width:700px){
  .pj-visio img{max-width:calc(100vw - 20px);max-height:calc(100vh - 160px)}
  .pj-visio-fl{top:auto;bottom:18px;margin-top:0}
  .pj-galerie{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.pj-intro .pj-index{margin:0 0 clamp(24px,3vw,36px)}   /* catégories en tête de la colonne gauche (15 oct.) */
.pj-intro .pj-photo img{max-height:80vh}
@media (max-width:900px){
  .pj-intro{grid-template-columns:1fr}
  .pj-media{position:static;order:-1}
}

/* 1er oct. 2026 (Jeremy : « moins d'espace entre catégorie et l'autre bloc et agrandis
   le bloc 2/3 ») : colonnes 1/4 – 3/4, écart 20 à 36 px (avant 1/3 – 2/3, écart 28 à 80 px). */
.pj-grille{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,3fr);gap:clamp(20px,2.5vw,36px);align-items:start}
.pj-index{position:sticky;top:140px}
.pj-index-t{font-size:.82rem!important;font-weight:600!important;letter-spacing:.12em!important;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 14px}
.pj-index ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pj-index a{display:inline-flex;padding:9px 16px;border-radius:999px;background:#f2f4f5;color:var(--ink);font-size:.9rem;
  text-decoration:none;transition:background .2s}
.pj-index a:hover{background:#e7ebee}

/* 1er oct. 2026 (Jeremy : « agrandis le texte sur le restant de la page en 2/3 ») :
   catégories 1/3, texte sur les 2/3 restants, sans largeur de lecture limitée.
   Avant : colonnes 1 / 2,4 et texte limité à 72 caractères. */
.pj-texte{max-width:none}
.pj-chapo{font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.5;color:var(--ink);margin:0 0 22px}
.pj-texte p{color:var(--ink-soft);line-height:1.75}
.pj-h2{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;font-size:clamp(1.5rem,2.6vw,2.2rem);
  letter-spacing:-.02em;line-height:1.15;color:var(--ink);margin:clamp(32px,4vw,48px) 0 20px}
.pj-h2 em{font-style:normal;font-weight:300}
/* Image 3D fixe du produit, sur fond blanc (15 oct. 2026 ; avant : configurateur animé en
   iframe, puis 3D + fiche du chantier en 1/2 – 1/2, fiche passée depuis dans la carte ci-dessous). */
.pj-produit{margin:0 0 22px}
.pj-3d{margin:0;padding:clamp(16px,3vw,32px);border-radius:24px;background:#fff;border:1px solid #e6eaee;
  display:flex;align-items:center;justify-content:center}
.pj-3d img{display:block;width:auto;max-width:100%;max-height:420px;height:auto}

/* Partie « Le produit » : 3D + atouts à gauche, carte « Fiche technique » à droite (15 oct. 2026,
   d'après la capture envoyée par Jeremy : carte blanche bordée, lignes libellé / valeur, « Pour
   aller plus loin » ; d'abord à côté du récit, puis « mets-le au niveau du produit »). */
.pj-recit-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px);gap:clamp(32px,5vw,72px);align-items:start;
  margin:0 0 clamp(28px,4vw,48px)}
.pj-fichetech{position:sticky;top:120px;padding:clamp(22px,2.5vw,32px);border:1px solid #e3e7eb;border-radius:16px;background:#fff}
.pj-fichetech-t{font-family:"Poppins",-apple-system,sans-serif;font-weight:600;font-size:1.25rem;margin:0 0 14px;color:var(--ink)}
.pj-fichetech dl{margin:0}
.pj-fichetech dl div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid #e3e7eb}
.pj-fichetech dt{color:var(--ink-soft);font-size:.95rem}
.pj-fichetech dd{margin:0;font-weight:600;font-size:.95rem;text-align:right;color:var(--ink)}
.pj-fichetech-k{margin:26px 0 12px!important;font-size:.78rem!important;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.pj-fichetech-lien{font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
@media (max-width:900px){ .pj-recit-grille{grid-template-columns:1fr} .pj-fichetech{position:static} }
.pj-h2-associe{margin-top:clamp(36px,5vw,64px)!important}   /* produit associé du chantier (15 oct. 2026) */
/* Récit (15 oct. 2026, skill blog) : image dans une section, questions/réponses */
.pj-recit-img{margin:6px 0 26px}
.pj-recit-img a{display:block;border-radius:20px;overflow:hidden;cursor:zoom-in}
.pj-recit-img img{display:block;width:100%;height:auto}
.pj-faq strong{display:block;color:var(--ink);margin-bottom:4px}
/* Intertitre numéroté + sous-titre plus petit (15 oct. 2026) */
.pj-h2.pj-h2-num{margin-bottom:6px!important}
.pj-soustitre{font-family:"Poppins",-apple-system,sans-serif;font-weight:400;font-size:clamp(1.1rem,1.5vw,1.3rem)!important;
  line-height:1.35;color:var(--ink-soft);margin:0 0 16px!important}
/* 3D cliquable vers la page produit (15 oct. 2026) */
a.pj-3d{text-decoration:none;transition:border-color .2s ease,box-shadow .2s ease}
a.pj-3d img{transition:transform .35s ease}
a.pj-3d:hover{border-color:#c9d2db;box-shadow:0 14px 34px -22px rgba(0,0,0,.35)}
a.pj-3d:hover img{transform:scale(1.03)}
a.pj-3d:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.pj-atouts{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:18px}
.pj-atouts li{padding:20px 22px;border-radius:24px;background:#f5f7f9}
.pj-atouts h3{font-size:1.05rem!important;margin:0 0 6px}
.pj-atouts p{margin:0;font-size:.97rem}
.pj-lien{display:inline-flex;align-items:center;gap:10px;color:#001d6d;font-weight:600;text-decoration:none}
.pj-lien svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pj-lien:hover{text-decoration:underline;text-underline-offset:3px}

.pj-autres{background:#fff;padding:0 0 clamp(56px,7vw,96px)}
.pj-autres-tete{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 28px;margin-bottom:24px}
.pj-autres-tete .pj-h2{margin:0}
.pj-autres-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.pj-carte{position:relative;display:block;overflow:hidden;border-radius:24px;height:clamp(20rem,28vw,28rem);background:#eef1f3;text-decoration:none}
.pj-carte img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.pj-carte:hover img{transform:scale(1.04)}
.pj-badge{position:absolute;left:1.25rem;bottom:1.25rem;right:1.25rem;max-width:max-content;padding:1rem 1.2rem;border-radius:24px;
  background:#fff;color:#0f161b;box-shadow:0 12px 30px -16px rgba(0,0,0,.45)}
.pj-badge-l{display:block;font-size:.8rem;color:#5b6670;margin-bottom:4px}
.pj-badge-t{display:block;font-family:"Poppins",-apple-system,sans-serif;font-weight:500;font-size:1.02rem;line-height:1.25}

.pj-contact{background:#f5f7f9;padding:clamp(56px,7vw,96px) 0;text-align:center}
.pj-contact h2{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;font-size:clamp(2rem,4vw,3.4rem);
  letter-spacing:-.02em;line-height:1.1;color:#001d6d;margin:0 0 14px}
.pj-contact h2 em{font-style:normal;font-weight:300}
.pj-contact p{color:var(--ink-soft);max-width:60ch;margin:0 auto 26px}
.pj-contact-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

@media (max-width:900px){
  .pj-grille{grid-template-columns:1fr}
  .pj-index{position:static}
  .pj-autres-grille{grid-template-columns:1fr}
}

/* 1er oct. 2026 (Jeremy : « mets catégorie au-dessus et le texte en dessous en 1/1 ») :
   une seule colonne pleine largeur — catégories en rangée, puis le texte.
   Remplace les colonnes 1/4 – 3/4 ci-dessus. */
.pj-grille{grid-template-columns:1fr;gap:clamp(24px,3vw,36px)}
.pj-index{position:static;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  padding-bottom:clamp(20px,2.5vw,28px);border-bottom:1px solid var(--line-soft)}
.pj-index-t{margin:0!important}
/* Récit (1er oct. 2026) : accroche en grand titre, paragraphes lisibles. */
.pj-accroche{font-family:"Poppins",-apple-system,sans-serif;font-weight:500;font-size:clamp(1.7rem,3.2vw,2.6rem);
  letter-spacing:-.02em;line-height:1.15;color:var(--ink);margin:0 0 18px;text-wrap:balance}
.pj-texte p{font-size:17px;margin:0 0 16px}   /* 15 oct. 2026 (Jeremy : « font size 17px pour le texte ») ; avant 1.04rem */
.pj-texte .pj-chapo{font-size:clamp(1.15rem,1.6vw,1.4rem)}