/* QUALITE 24 — pages « Projet exemple » (05/11/2026). Système de design « un site, 2 parties » (archives/site-unique-05-11/PLAN.md § 3), tout préfixé pe- :
   aucun effet sur les autres pages. Couleurs, polices et formes = q24-systeme.css des maquettes. Aucun texte sous 12 px, zones tactiles 44 px, aucun défilement horizontal. */
.pe{--ivoire:#F7F5F0;--papier:#FFFDF9;--encre:#23262B;--douce:#5A5E66;--trait:#E3DDD2;--trait-fort:#CFC8BC;--rouge:#9E1022;--rouge-fonce:#7E0C1B;
  --nuit:#0E0F11;--nuit-2:#17191C;--nuit-trait:#2A2D31;--sur-nuit:#F4F2EE;--sur-nuit-doux:#B9B5AD;--rouge-sur-nuit:#FF6A72;--focus:#1456D9;
  --titre:"Instrument Serif","New York",ui-serif,Georgia,serif;--texte:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --marge:clamp(20px,4vw,48px);--max:1280px;--section:clamp(64px,8vw,112px);--bas:env(safe-area-inset-bottom,0px);
  background:var(--ivoire);color:var(--encre);font:400 17px/1.55 var(--texte);-webkit-font-smoothing:antialiased;overflow-x:clip}
.pe *{box-sizing:border-box}
.pe [hidden]{display:none!important}
.pe img{max-width:100%;display:block}
.pe a{color:inherit}
.pe :focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.pe-cadre{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--marge)}
.pe-section{padding-block:var(--section)}
.pe-papier{background:var(--papier)}
.pe-nuit{background:var(--nuit);color:var(--sur-nuit)}
.pe h1,.pe h2,.pe h3{font-family:var(--titre);font-weight:400;margin:0;letter-spacing:-.01em;text-wrap:balance}
.pe h1{font-size:clamp(40px,6.4vw,84px);line-height:1.02}
.pe h2{font-size:clamp(32px,4.4vw,56px);line-height:1.06}
.pe h3{font-size:clamp(24px,2.6vw,30px);line-height:1.15}
.pe h1 em,.pe h2 em,.pe h3 em{font-style:italic}
.pe-lead{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--douce);max-width:56ch;margin:0}
.pe-nuit .pe-lead{color:#E6E2DA}
.pe-sur{font-size:14px;font-weight:500;color:var(--douce);margin:0 0 12px}
.pe-nuit .pe-sur{color:var(--sur-nuit-doux)}
.pe-petit{font-size:14px;line-height:1.45;color:var(--douce)}
.pe-nuit .pe-petit{color:var(--sur-nuit-doux)}
.pe-fil{font-size:14px;margin:0 0 24px;color:var(--sur-nuit-doux)}
.pe-fil a{text-decoration:none}.pe-fil a:hover{text-decoration:underline}
/* boutons */
.pe-actions{display:flex;flex-wrap:wrap;gap:12px}
.pe-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;border-radius:999px;border:1px solid transparent;font:600 16px/1 var(--texte);text-decoration:none;cursor:pointer;transition:background .2s,color .2s,transform .15s}
.pe-btn:active{transform:scale(.98)}
.pe-rouge{background:var(--rouge);color:#fff}.pe-rouge:hover{background:var(--rouge-fonce)}
.pe-trait{background:transparent;color:var(--encre);border-color:var(--encre)}.pe-trait:hover{background:var(--encre);color:var(--ivoire)}
.pe-trait-clair{background:rgba(255,255,255,.08);color:var(--sur-nuit);border-color:rgba(255,255,255,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.pe-trait-clair:hover{background:rgba(255,255,255,.18)}
.pe-lien{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--rouge);text-decoration:none}.pe-lien:hover{text-decoration:underline;text-underline-offset:4px}
.pe-nuit .pe-lien{color:var(--rouge-sur-nuit)}
/* héros */
.pe-heros{position:relative;min-height:min(92svh,900px);display:flex;align-items:flex-end;color:var(--sur-nuit);background:radial-gradient(120% 90% at 70% 10%,#262a30 0%,var(--nuit) 62%);overflow:hidden;isolation:isolate}
.pe-heros>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;z-index:-2}
.pe-heros::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,15,17,.5) 0%,rgba(14,15,17,.2) 30%,rgba(14,15,17,.72) 62%,rgba(14,15,17,.94) 100%)}
.pe-heros-in{padding-block:96px 56px;width:100%}
.pe-heros h1,.pe-heros .pe-sur,.pe-heros .pe-fil,.pe-heros .pe-fil a,.pe-nuit h2,.pe-nuit h3,.pe-nuit p,.pe-nuit li{color:var(--sur-nuit)}
.pe-heros .pe-fil,.pe-heros .pe-sur,.pe-nuit .pe-sur,.pe-nuit .pe-petit{color:var(--sur-nuit-doux)}
.pe-heros .pe-lead,.pe-nuit .pe-lead{color:#E6E2DA}
.pe h1,.pe h2,.pe h3{color:inherit}
.pe-heros h1{text-shadow:0 2px 24px rgba(0,0,0,.45)}
.pe-heros .pe-lead{margin-top:20px}
.pe-heros .pe-actions{margin-top:28px}
.pe-etiquette{position:absolute;top:20px;right:var(--marge);z-index:2;font-size:13px;line-height:1.3;color:#fff;background:rgba(14,15,17,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.25)}
/* chiffres clés */
.pe-chiffres{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--trait);border:1px solid var(--trait);border-radius:20px;overflow:hidden;margin:0;padding:0;list-style:none}
.pe-chiffres li{background:var(--papier);padding:22px 20px;display:flex;flex-direction:column;gap:4px}
.pe-chiffres b{font:400 clamp(34px,4vw,52px)/1 var(--titre)}
.pe-chiffres span{font-size:14px;color:var(--douce)}
@media (min-width:800px){.pe-chiffres{grid-template-columns:repeat(4,1fr)}}
/* deux colonnes de texte */
.pe-duo{display:grid;gap:40px}
@media (min-width:900px){.pe-duo{grid-template-columns:1fr 1fr;gap:72px;align-items:start}}
.pe-duo p{margin:0 0 16px;color:var(--douce);max-width:60ch}
.pe-liste{list-style:none;margin:0;padding:0;display:grid;gap:0}
.pe-liste li{border-top:1px solid var(--trait-fort);padding:14px 0 14px 0;font-size:17px}
.pe-liste li:last-child{border-bottom:1px solid var(--trait-fort)}
.pe-liste b{font-weight:600}
/* vues réalistes */
.pe-vue{margin:0;border-radius:24px;overflow:hidden;background:var(--trait);position:relative}
.pe-vue img{width:100%;height:auto;aspect-ratio:1920/1030;object-fit:cover}
.pe-vue figcaption{font-size:14px;color:var(--douce);padding:12px 4px 0}
.pe-emplacement{border:2px dashed var(--trait-fort);border-radius:24px;aspect-ratio:16/9;display:grid;place-items:center;text-align:center;padding:24px;color:var(--douce);background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(35,38,43,.03) 14px 28px)}
.pe-emplacement p{margin:0;max-width:40ch}
/* plans */
.pe-plans{display:grid;gap:32px}
@media (min-width:900px){.pe-plans{grid-template-columns:1fr 1fr}}
.pe-plan{background:var(--papier);border:1px solid var(--trait);border-radius:24px;padding:clamp(16px,2.4vw,28px);margin:0}
.pe-plan h3{margin-bottom:16px}
.pe-plan img{width:100%;height:auto;border-radius:12px;background:#FFFDF9}
.pe-legende{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:0;counter-reset:l}
.pe-legende li{display:flex;align-items:center;gap:12px;min-height:44px;border-top:1px solid var(--trait);font-size:16px}
.pe-legende li::before{counter-increment:l;content:counter(l);flex:none;width:28px;height:28px;border-radius:50%;background:var(--rouge);color:#fff;font:700 14px/28px var(--texte);text-align:center}
.pe-legende span{margin-left:auto;color:var(--douce);font-variant-numeric:tabular-nums;white-space:nowrap}
.pe-total{display:flex;justify-content:space-between;padding-top:14px;border-top:2px solid var(--encre);font-weight:600;margin-top:4px}
.pe-cle{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--douce);margin:14px 0 0}
.pe-cle i{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-right:6px}
/* visite 3D */
.pe-3d{background:var(--nuit-2);border:1px solid var(--nuit-trait);border-radius:24px;padding:clamp(14px,2.4vw,28px);min-height:340px}
.pe-3d .m3{--m3-texte:var(--sur-nuit);--m3-gris:var(--sur-nuit-doux)}
.pe-3d-attente{display:grid;place-items:center;text-align:center;gap:16px;min-height:300px;color:var(--sur-nuit-doux)}
.pe-3d-attente p{margin:0;max-width:42ch}
/* prestations */
.pe-cartes{display:grid;gap:20px}
@media (min-width:700px){.pe-cartes{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1050px){.pe-cartes{grid-template-columns:repeat(3,1fr)}}
.pe-carte{background:var(--papier);border:1px solid var(--trait);border-radius:20px;padding:26px 24px}
.pe-carte h3{font-size:28px;margin-bottom:12px}
.pe-carte ul{margin:0;padding:0 0 0 18px;color:var(--douce);font-size:16px;display:grid;gap:6px}
.pe-carte li::marker{color:var(--rouge)}
.pe-notice{border:1px solid var(--trait-fort);border-radius:14px;padding:16px 22px;background:var(--papier);font-size:15px;color:var(--douce);margin:0}
.pe-nuit .pe-notice{background:transparent;border-color:var(--nuit-trait);color:var(--sur-nuit-doux)}
/* appel final et autres projets */
.pe-appel{display:grid;gap:28px;align-items:center}
@media (min-width:900px){.pe-appel{grid-template-columns:1.3fr 1fr}}
.pe-autres{display:grid;gap:20px}
@media (min-width:700px){.pe-autres{grid-template-columns:repeat(2,1fr)}}
.pe-autre{display:flex;flex-direction:column;gap:6px;text-decoration:none;background:var(--papier);border:1px solid var(--trait);border-radius:20px;padding:24px;min-height:44px;transition:transform .3s,box-shadow .3s}
.pe-autre:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(35,38,43,.06),0 8px 28px rgba(35,38,43,.08)}
.pe-autre h3{font-size:28px}.pe-autre p{margin:0;color:var(--douce);font-size:15px}
@media (prefers-reduced-motion:reduce){.pe *{transition:none!important;animation:none!important}}
/* cartes « Projets exemples » (Nos maisons et accueil) */
.pe-liste-projets{display:grid;gap:20px}
@media (min-width:700px){.pe-liste-projets{grid-template-columns:repeat(2,1fr)}}
.pe-pc{display:flex;flex-direction:column;background:#FFFDF9;border:1px solid #E3DDD2;border-radius:20px;overflow:hidden;text-decoration:none;color:#23262B;transition:transform .3s,box-shadow .3s}
.pe-pc:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(35,38,43,.06),0 8px 28px rgba(35,38,43,.08)}
.pe-pc-img{aspect-ratio:4/3;background:#EFECE6;overflow:hidden;display:grid;place-items:center}
.pe-pc-img img{width:100%;height:100%;object-fit:cover}
.pe-pc-img.plan img{object-fit:contain;padding:14px;background:#FFFDF9}
.pe-pc-corps{padding:22px 24px 24px;display:flex;flex-direction:column;gap:8px}
.pe-pc-corps h3{margin:0;font:400 28px/1.1 "Instrument Serif","New York",ui-serif,Georgia,serif}
.pe-pc-corps p{margin:0;color:#5A5E66;font-size:15px}
.pe-pc-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:#5A5E66}
.pe-pc-meta b{color:#23262B;font-weight:600}
.pe-pc-lien{margin-top:6px;font-weight:600;color:#9E1022;display:inline-flex;align-items:center;min-height:44px}
.pe-heros .pe-fil,.pe-heros .pe-sur{color:#F4F1EA;text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 14px rgba(0,0,0,.5)}   /* 13/11 : lisible sur la photo sombre (captures iPhone) */