/* POPOWE 2027 · De l'image à l'espace */
:root{
  --encre:#231F20;--blanc:#FFFFFF;--pierre:#EEEDEA;--rouge:#ED1C24;--rouge-texte:#C8102E;
  --ardoise:#5E5A58;--texte2:#3A3536;--filet:#D9D6D2;--filet2:#BDB8B4;
  --display:'Josefin Sans',Futura,'Century Gothic',sans-serif;
  --texte:'DM Sans',Arial,sans-serif;
  --mono:'DM Mono',ui-monospace,Menlo,monospace;
  --max:1280px;--gut:32px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--blanc);color:var(--encre);font-family:var(--texte);font-size:16px;line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--encre)}a:hover{color:var(--rouge-texte)}
:focus-visible{outline:2px solid var(--encre);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--encre);color:#fff;padding:12px 16px;z-index:100}
.skip:focus{left:16px;top:16px}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.sec{padding-top:96px;padding-bottom:96px}
.bg-pierre{background:var(--pierre)}.bg-encre{background:var(--encre);color:#fff}
.bg-encre a{color:#fff}

/* type */
.sur{margin:0;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--ardoise)}
.bg-encre .sur{color:var(--filet2)}
.h1{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(44px,6.4vw,92px);line-height:.98;letter-spacing:.04em;text-transform:uppercase}
.h2{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(30px,3.4vw,46px);line-height:1.1;letter-spacing:.08em;text-transform:uppercase}
.h3{font-family:var(--display);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.lead{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--texte2);max-width:32em}
.bg-encre .lead{color:var(--filet)}
.muted{color:var(--ardoise)}
.mono{font-family:var(--mono)}
.stack{display:flex;flex-direction:column;gap:22px}
.head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px}
.head-row p:last-child{margin:0;max-width:28em;color:var(--ardoise)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 24px;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border:1px solid var(--encre);cursor:pointer;transition:background .2s,color .2s}
.btn-encre{background:var(--encre);color:#fff}.btn-encre:hover{background:var(--ardoise);border-color:var(--ardoise);color:#fff}
.btn-ligne{background:transparent;color:var(--encre)}.btn-ligne:hover{background:var(--encre);color:#fff}
.btn-blanc{background:#fff;color:var(--encre);border-color:#fff}.btn-blanc:hover{background:var(--pierre);color:var(--encre)}
.btn-contour-blanc{background:transparent;color:#fff;border-color:#fff;font-family:var(--mono);letter-spacing:0;text-transform:none;font-size:15px}
.btn-contour-blanc:hover{background:#fff;color:var(--encre)}
.btns{display:flex;flex-wrap:wrap;gap:14px}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--filet)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:74px}
.logo img{height:34px;width:auto}
.nav{display:flex;align-items:center;gap:28px;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase}
.nav a{text-decoration:none}
.nav a[aria-current=page]{border-bottom:2px solid var(--encre);padding-bottom:4px}
.nav .btn{font-size:13px;min-height:44px;padding:12px 18px}
.menu-btn{display:none;background:none;border:0;width:48px;height:48px;padding:12px;cursor:pointer}
.menu-btn span{display:block;height:2px;background:var(--encre);margin:6px 0;transition:transform .3s,opacity .3s}
@media (max-width:980px){
  .menu-btn{display:block}
  .nav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--filet);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gut) 24px;display:none}
  .nav.open{display:flex}
  .nav a{padding:16px 0;border-bottom:1px solid var(--filet)}
  .nav a[aria-current=page]{padding-bottom:16px}
  .nav .btn{margin-top:16px;border-bottom:1px solid var(--encre)}
  .menu-btn[aria-expanded=true] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .menu-btn[aria-expanded=true] span:nth-child(2){opacity:0}
  .menu-btn[aria-expanded=true] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}

/* hero */
.hero{background:var(--pierre);overflow:hidden}
.hero .wrap{padding-top:72px;padding-bottom:88px;display:flex;flex-wrap:wrap;align-items:center;gap:56px}
.hero-txt{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:28px}
.hero-fig{flex:1 1 420px;min-width:0;margin:0;display:flex;flex-direction:column;align-items:center;gap:18px}
.hero-fig figcaption{font-size:14px;color:var(--ardoise);text-align:center;max-width:26em}
.accroche{margin:0;font-family:var(--mono);font-size:15px;color:var(--ardoise)}

/* iris */
.iris{position:relative;width:100%;max-width:540px;aspect-ratio:1/1;border-radius:50%;overflow:hidden}
.iris .lm{position:absolute;overflow:hidden;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.iris .lm img{width:100%;height:100%;object-fit:cover}
.lm-l{left:0;top:0;width:calc(33% - 3px);height:calc(67% - 3px)}
.lm-tr{left:calc(33% + 3px);top:0;right:0;height:calc(33% - 3px);background:var(--rouge)}
.lm-r{left:calc(67% + 3px);top:calc(33% + 3px);right:0;bottom:0}
.lm-b{left:0;top:calc(67% + 3px);width:calc(67% - 3px);bottom:0}
.iris.ouvert .lm-l,.iris:hover .lm-l{transform:translate(-18px,-10px)}
.iris.ouvert .lm-tr,.iris:hover .lm-tr{transform:translate(12px,-18px)}
.iris.ouvert .lm-r,.iris:hover .lm-r{transform:translate(18px,12px)}
.iris.ouvert .lm-b,.iris:hover .lm-b{transform:translate(-12px,18px)}
@media (prefers-reduced-motion:reduce){.iris .lm{transition:none}}

/* manifeste */
.manif{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.manif .sur{flex:0 1 220px}
.manif-txt{flex:1 1 560px;min-width:0;display:flex;flex-direction:column;gap:24px}
.manif-txt p:first-child{margin:0;font-size:clamp(24px,2.6vw,36px);line-height:1.4}
.manif-txt p:last-child{margin:0;font-size:19px;line-height:1.65;color:var(--filet);max-width:40em}

/* pôles */
.poles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:2px;background:var(--filet);border:2px solid var(--filet)}
.pole{background:#fff;padding:36px;text-decoration:none;display:flex;flex-direction:column;gap:18px;min-height:300px;transition:background .3s}
.pole:hover{background:var(--pierre);color:var(--encre)}
.pole .nom{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--ardoise)}
.pole .verbe{font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:.08em;text-transform:uppercase}
.pole .desc{color:var(--texte2)}
.pole .prix{margin-top:auto;font-family:var(--mono);font-size:14px;color:var(--ardoise)}

/* preuve */
.preuve img{width:100%;height:clamp(320px,46vw,640px);object-fit:cover}
.preuve figcaption{background:var(--encre);color:#fff;padding:28px 32px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;align-items:center}
.preuve figcaption p{margin:0;color:var(--filet);max-width:34em}
.preuve h2{margin:0;font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:.1em;text-transform:uppercase}
.preuve .sur{color:var(--filet2);font-size:12px}

/* split */
.split{display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.split>*{flex:1 1 440px;min-width:0}
.mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.mosaic picture:first-child{grid-column:1/3}
.mosaic img{width:100%;object-fit:cover;height:220px}
.mosaic picture:first-child img{height:340px}
.prix-ligne{display:flex;flex-wrap:wrap;gap:10px 28px;font-family:var(--mono);font-size:14px;color:var(--ardoise)}

/* segments */
.segs{display:flex;flex-wrap:wrap;gap:8px}
.seg{min-height:44px;padding:10px 18px;font:600 14px var(--texte);cursor:pointer;border:1px solid var(--filet2);background:#fff;color:var(--encre)}
.seg:hover{border-color:var(--encre)}
.seg[aria-pressed=true]{background:var(--encre);border-color:var(--encre);color:#fff}
.seg.caps{font-family:var(--display);font-size:13px;letter-spacing:.2em;text-transform:uppercase}

/* comparateur */
.carte{background:#fff;padding:40px;display:flex;flex-direction:column;gap:22px}
.bg-pierre .carte{background:#fff}
.ligne{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--filet);padding-bottom:12px}
.verdict{font-family:var(--mono);font-weight:500;font-size:clamp(52px,6vw,84px);line-height:1}
.verdict.rouge{color:var(--rouge)}
.note{margin:0;font-size:13px;line-height:1.5;color:var(--ardoise)}
.barre{height:14px;background:#fff}.barre i{display:block;height:14px;transition:width .4s}
.simu-res{background:var(--pierre);padding:40px;display:flex;flex-direction:column;gap:22px}
.simu-form{display:flex;flex-direction:column;gap:26px}
.simu-form label{display:flex;flex-direction:column;gap:4px}
.simu-form .lbl{display:flex;justify-content:space-between;font-size:14px;color:var(--ardoise)}
.simu-form .lbl output{font-family:var(--mono);color:var(--encre)}
input[type=range]{accent-color:var(--encre);width:100%;height:44px}

/* méthode */
.etapes{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));border-top:2px solid var(--encre)}
.etapes li{padding:22px 20px 18px 0;display:flex;flex-direction:column;gap:10px}
.etapes .j{font-family:var(--mono);font-size:14px;color:var(--ardoise)}
.etapes .t{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.08em;text-transform:uppercase}
.etapes .d{font-size:15px;line-height:1.55;color:var(--texte2)}

/* outils / valeurs */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px}
.card{background:#fff;display:flex;flex-direction:column}
.card img{width:100%;height:260px;object-fit:cover}
.card .in{padding:28px;display:flex;flex-direction:column;gap:12px}
.card .in span:first-child{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:.12em;text-transform:uppercase}
.card .in span:last-child{color:var(--texte2);font-size:15px;line-height:1.65}
.valeurs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:32px}
.valeurs div{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--ardoise);padding-top:18px}
.valeurs b{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:.14em;text-transform:uppercase}
.valeurs span{font-size:15px;color:var(--filet)}

/* références */
.refs{display:flex;flex-wrap:wrap;gap:48px}
.refs>div{flex:0 1 300px}
.refs ul{flex:1 1 560px;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));column-gap:32px;font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.12em;text-transform:uppercase}
.refs li{padding:14px 0;border-bottom:1px solid var(--filet)}

/* cta */
.cta{position:relative;overflow:hidden;background:var(--encre);color:#fff}
.cta>picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
.cta .wrap{position:relative;padding-top:120px;padding-bottom:120px;display:flex;flex-direction:column;gap:28px}
.cta h2{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(34px,5vw,72px);line-height:1.02;letter-spacing:.06em;text-transform:uppercase;max-width:14em}
.cta p{margin:0;font-size:19px;max-width:34em;color:var(--pierre)}

/* footer */
.site-footer{border-top:1px solid var(--filet)}
.site-footer .cols{padding-top:56px;padding-bottom:40px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px}
.site-footer .col{display:flex;flex-direction:column;gap:8px;flex:1 1 220px;font-size:15px}
.site-footer .col a{text-decoration:none}
.site-footer .col img{height:40px;width:auto;align-self:flex-start}
.site-footer .sign{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--ardoise);margin:8px 0 0}
.site-footer .lab{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ardoise)}
.site-footer .copy{padding-bottom:32px;font-size:13px;color:var(--ardoise)}

/* page hero photo */
.phero{position:relative;background:var(--encre);color:#fff;overflow:hidden}
.phero>picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.phero .wrap{position:relative;padding-top:140px;padding-bottom:72px;display:flex;flex-direction:column;gap:24px}
.phero .h1{font-size:clamp(44px,6vw,88px);max-width:12em}
.phero .lead{color:#fff}
.phero .sur{color:var(--pierre)}
.phero small{font-size:13px;color:var(--filet)}

/* stands */
.modeles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:24px}
.modele{border:1px solid var(--filet);padding:36px;display:flex;flex-direction:column;gap:16px}
.modele.fort{border:2px solid var(--encre)}
.modele b{font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:.1em;text-transform:uppercase}
.modele p{margin:0;color:var(--texte2)}
.modele span{font-family:var(--mono);font-size:15px;color:var(--ardoise)}
.gammes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:2px;background:var(--filet);border:2px solid var(--filet)}
.gamme{background:#fff;padding:32px;display:flex;flex-direction:column;gap:6px}
.gamme.encre{background:var(--encre);color:#fff}
.gamme b{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.gamme .px{font-family:var(--mono);font-size:30px}
.gamme small{font-size:13px;color:var(--ardoise)}
.gamme.encre small{color:var(--filet2)}
.gamme ul{margin:14px 0 0;padding-left:18px;font-size:15px;line-height:1.75;color:var(--texte2)}
.gamme.encre ul{color:var(--filet)}
.tech{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.tech>*{flex:1 1 420px;min-width:0}
.tech img{width:100%;height:340px;object-fit:cover}
.tech ul{margin:0;padding-left:18px;font-size:16px;line-height:1.8;color:var(--filet)}
.g3d{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px}
.g3d figure{margin:0;position:relative}
.g3d img{width:100%;aspect-ratio:4/3;object-fit:cover}
.tag3d{position:absolute;left:0;bottom:0;background:var(--encre);color:#fff;font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.26em;text-transform:uppercase;padding:8px 12px}
.bandeau{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding-top:72px;padding-bottom:72px}
.bandeau p{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(22px,2.6vw,34px);letter-spacing:.08em;text-transform:uppercase;max-width:22em}

/* réalisations */
.port{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:24px}
.tuile{margin:0;display:flex;flex-direction:column;gap:12px}
.tuile[hidden]{display:none}
.tuile .cadre{overflow:hidden;aspect-ratio:4/3;background:var(--pierre)}
.tuile img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tuile:hover img{transform:scale(1.04)}
.tuile figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid var(--filet);padding-bottom:12px}
.tuile figcaption b{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.1em;text-transform:uppercase}
.tuile figcaption span{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ardoise)}
.tarifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:24px}
.tarif{background:#fff;padding:28px;display:flex;flex-direction:column;gap:12px;text-decoration:none}
.tarif.encre{background:var(--encre);color:#fff}
.tarif.encre:hover{color:#fff;background:#3A3536}
.tarif .lab{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--ardoise)}
.tarif.encre .lab{color:var(--filet2)}
.tarif .l{display:flex;justify-content:space-between;gap:12px;font-size:15px;border-bottom:1px solid var(--filet);padding-bottom:10px}
.tarif.encre .l{border-color:var(--ardoise)}
.tarif .l span:last-child{font-family:var(--mono)}
.tarif .go{margin-top:auto;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase}

/* devis */
.devis{display:flex;flex-wrap:wrap;gap:64px;align-items:flex-start}
.devis-g{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:24px}
.devis-d{flex:2 1 560px;min-width:0}
.coord{background:var(--pierre);padding:28px;display:flex;flex-direction:column;gap:12px;font-size:15px}
.coord a{text-decoration:none}
.coord .tel{font-family:var(--mono);font-size:18px}
form.f{display:flex;flex-direction:column;gap:28px}
fieldset{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:16px}
legend{padding:0;margin-bottom:12px;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.28em;text-transform:uppercase}
.choix-poles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr));gap:8px}
.choix-poles label{position:relative;cursor:pointer}
.choix-poles input{position:absolute;opacity:0;inset:0}
.choix-poles span{display:block;min-height:72px;padding:14px;border:1px solid var(--filet2);background:#fff}
.choix-poles b{display:block;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.16em;text-transform:uppercase}
.choix-poles small{display:block;font-size:12px;margin-top:4px;opacity:.8}
.choix-poles input:checked+span{background:var(--encre);border-color:var(--encre);color:#fff}
.choix-poles input:focus-visible+span{outline:2px solid var(--encre);outline-offset:2px}
.grid-f{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px}
.stand-only{background:var(--pierre);padding:20px}
.stand-only[hidden]{display:none}
.f label.c{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.f label.c i{font-style:normal;font-weight:400;color:var(--ardoise)}
.champ{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--filet2);border-radius:0;background:#fff;color:var(--encre);font:400 16px var(--texte)}
.champ:focus{outline:2px solid var(--encre);outline-offset:0;border-color:var(--encre)}
textarea.champ{resize:vertical}
.radios{display:flex;flex-wrap:wrap;gap:24px}
.radios label{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.radios input{width:20px;height:20px;accent-color:var(--encre)}
.f-bas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--filet);padding-top:24px}
.f-bas span{font-size:13px;color:var(--ardoise);max-width:30em}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.merci{background:var(--encre);color:#fff;padding:48px;display:flex;flex-direction:column;gap:18px}
.merci b{font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:.08em;text-transform:uppercase}
.merci p{margin:0;color:var(--filet);font-size:17px}
.erreur{background:#FCE8E9;border-left:0;border:1px solid var(--rouge-texte);color:var(--encre);padding:16px 20px}

@media (max-width:640px){
  :root{--gut:20px}
  .sec{padding-top:64px;padding-bottom:64px}
  .pole,.carte,.simu-res{padding:28px}
  .mosaic img{height:160px}.mosaic picture:first-child img{height:240px}
  .phero .wrap{padding-top:96px}
}