/* L'accueil et la page artisans : le plan, le film, les règles.
   ⚠️ Le plan est lisible sans script : sans la classe .anime, la façade est dessinée et la liste est à plat.
   ⚠️ Trait blanc sur encre : c'est la signature. Le violet reste un accent, jamais un fond. */
.plan{position:relative;background-color:var(--encre);color:#fff;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:40px 40px}
.anime .plan{height:calc(100svh + 500vh)}
.plan-scene{padding:clamp(28px,5vw,56px) 0;display:grid;gap:28px}
.anime .plan-scene{position:sticky;top:var(--nav);height:calc(100svh - var(--nav));padding:0;grid-template-rows:minmax(0,1fr) auto;gap:0;overflow:hidden}
.plan-corps,.cartouche{width:min(1640px,calc(100% - clamp(32px,4.4vw,88px)));max-width:none;padding:0}
.plan-corps{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);gap:clamp(16px,2vw,36px);align-items:center;min-height:0}
.plan-texte{display:grid;min-width:0;min-height:0}
.plan-texte>*{min-width:0}
.anime .plan-texte>*{grid-area:1/1}
.plan-ouv{align-self:center}
.plan-ouv h1{font-family:var(--titre);font-stretch:118%;font-weight:800;font-size:clamp(40px,4.3vw,92px);line-height:.96;letter-spacing:-.02em;text-transform:uppercase;color:#fff}
.plan-ouv h1 span{display:block}
.plan-etat{display:block;font-family:"JetBrains Mono",var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:#C9C5D6;margin-bottom:22px}
.plan-ouv p{margin-top:20px;font-size:clamp(16.5px,1.5vw,20px);line-height:1.45;color:#D8D5E0;max-width:44ch}
.portes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px;max-width:520px}
.porte{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:60px;padding:0 18px;font-weight:700;font-size:16px;border:1.5px solid #fff;color:#fff;transition:background .18s,color .18s}
.porte::after{content:"→";font-family:"JetBrains Mono",var(--mono);transition:transform .18s}
.porte:hover{background:#fff;color:var(--encre)}
.porte:hover::after{transform:translateX(4px)}
.porte.pleine{background:#fff;color:var(--encre)}
.porte.pleine:hover{background:var(--accent);border-color:var(--accent);color:#0C0A12}
.plan-indice{display:none;margin-top:26px;font-family:"JetBrains Mono",var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#A9A5B6}
.anime .plan-indice{display:block}
.plan-etapes{margin-top:0}
.plan-etapes h2{font-family:var(--titre);font-stretch:112%;font-size:clamp(22px,2.6vw,34px);line-height:1.1;font-weight:750;color:#fff;margin-bottom:16px}
.plan-etapes ol{list-style:none;display:grid;gap:18px;counter-reset:m}
.plan-etapes li{counter-increment:m}
.plan-etapes a{display:block;color:#fff}
.et-n{display:block;font-family:"JetBrains Mono",var(--mono);font-size:13px;color:var(--accent);margin-bottom:6px}
.et-m{display:block;font-family:var(--titre);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:24px;line-height:1;letter-spacing:-.01em}
.et-p{display:block;margin-top:8px;font-size:16px;line-height:1.4;color:#D8D5E0}
.et-v{display:none;margin-top:14px;font-family:"JetBrains Mono",var(--mono);font-size:12.5px;letter-spacing:.04em;color:#fff;text-decoration:underline;text-underline-offset:4px}
.anime .plan-etapes{align-self:center;opacity:0;visibility:hidden}
.anime .plan-etapes h2{display:none}
.anime .plan-etapes ol{display:grid}
.anime .plan-etapes li{grid-area:1/1;opacity:0;transform:translateY(16px);transition:opacity .28s,transform .28s;pointer-events:none}
.anime .plan-etapes li.la{opacity:1;transform:none;pointer-events:auto}
.anime .et-m{font-size:clamp(30px,3.5vw,72px)}
.anime .et-p{font-size:clamp(17px,1.6vw,22px);max-width:30ch;margin-top:14px}
.anime .et-v{display:inline-block}
.plan-passer{display:none;font-family:"JetBrains Mono",var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#A9A5B6;margin-top:22px}
.anime .plan-passer{display:inline-block}
.maison{display:block;width:100%;height:auto;max-height:100%}
.anime .maison{height:100%}
.plan-dessin{min-width:0;min-height:0;height:100%;display:flex;align-items:center}
.scene{opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.scene.la,html:not(.anime) .scene-ouv{opacity:1;visibility:visible}
.scene{--d:1}
.maison .t{fill:none;stroke:#fff;stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,(var(--d) - var(--a,0)) / var(--b,1),1))}
.anime .scene-ouv .t{animation:trace 2.4s cubic-bezier(.65,0,.2,1) both}
@keyframes trace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.maison .ac{stroke:var(--accent)}
.maison .fort{stroke-width:2.4}
.maison .fin{stroke-width:1;stroke:rgba(255,255,255,.6)}
.maison .fond{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.3}
.maison .plein{fill:var(--encre);opacity:clamp(0,(var(--d) - var(--a,0)) / var(--b,1) * 3,1)}
.maison .x{font-family:"JetBrains Mono",var(--mono);font-size:14px;fill:#fff;opacity:clamp(0,(var(--d) - var(--a,.6)) / .15,1)}
.maison .lueur{fill:url(#lumiere);opacity:clamp(0,(var(--d) - .78) * 6,1)}
.maison .peinture{fill:var(--accent);opacity:.24;transform-box:fill-box;transform-origin:0 50%;transform:scaleX(var(--d))}
.maison .rouleau{transform:translateX(calc(var(--d) * 640px))}
.maison .fond-r{fill:none;stroke:#fff;stroke-width:2.4}
.cartouche{display:none;grid-template-columns:auto auto 1fr auto auto;border-top:1px solid rgba(255,255,255,.34);font-family:"JetBrains Mono",var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#fff}
.anime .cartouche{display:grid}
.cartouche span{padding:11px 18px;border-left:1px solid rgba(255,255,255,.34);white-space:nowrap}
.cartouche span:first-child{border-left:0;padding-left:0}
.cartouche span:last-child{padding-right:0}
.cartouche i{position:relative;align-self:stretch;border-left:1px solid rgba(255,255,255,.34)}
.cartouche i::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.2);transform-origin:left;transform:scaleX(var(--avance,0))}
@media (max-width:860px){
  .plan-corps{grid-template-columns:1fr;align-items:start;gap:14px}
  .anime .plan-corps{grid-template-rows:auto minmax(0,1fr);padding-top:20px}
  .plan-ouv h1{font-stretch:112%;font-size:clamp(36px,10.6vw,76px)}
  .plan-etat{margin-bottom:14px;font-size:11.5px}
  .plan-ouv p{margin-top:12px;font-size:16px}
  .portes{grid-template-columns:1fr;gap:8px;margin-top:16px}
  .porte{min-height:50px;font-size:15.5px}
  .plan-indice{display:none!important}
  .anime .et-m{font-size:clamp(26px,8.2vw,56px);font-stretch:112%}
  .plan-passer{margin-top:8px}
  .anime .et-p{font-size:16px;margin-top:8px;max-width:none}
  .anime .et-v{margin-top:8px}
  .cartouche{grid-template-columns:1fr auto}
  .cartouche i,.cartouche span:first-child,.cartouche span:nth-child(2){display:none}
  .cartouche span:nth-of-type(3){border-left:0;padding-left:0}
  .plan-ouv,.anime .plan-etapes{align-self:start}
  .cartouche span{padding:9px 12px;font-size:11px}
  .maison{object-position:center}
}
/* Le film */
.film{padding:clamp(60px,9vw,120px) 0}
.film-tete{font-family:var(--titre);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:clamp(32px,5.4vw,76px);line-height:.98;letter-spacing:-.02em;max-width:17ch}
.film-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);margin-top:clamp(28px,5vw,60px)}
.film-tel{position:sticky;top:calc(var(--nav) + 24px);align-self:start;display:flex;flex-direction:column;align-items:center;gap:10px;height:calc(100svh - var(--nav) - 48px);justify-content:center}
.tel{--h:min(620px,calc(100svh - var(--nav) - 90px));position:relative;height:var(--h);aspect-ratio:9/18.6;background:#0E0A1B;padding:9px;border-radius:calc(var(--h)*.07);flex:none}
.tel-ecran{position:relative;height:100%;background:#F7F6FB;border-radius:calc(var(--h)*.058);overflow:hidden;color:#17121F;font-family:var(--sans);font-size:calc(var(--h)*.0225)}
.tel-ecran::before{content:"";position:absolute;z-index:3;top:1.7%;left:50%;width:30%;height:3.3%;margin-left:-15%;background:#0E0A1B;border-radius:99px}
.ecran{position:absolute;inset:0 0 9.5% 0;padding:15% 6% 4%;display:flex;flex-direction:column;gap:2.4%;opacity:0;transform:translateY(12px);transition:opacity .1s}
.ecran.la{opacity:1;transform:none;transition:opacity .32s .1s,transform .32s .1s}
.e-nav{position:absolute;left:0;right:0;bottom:0;height:9.5%;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;text-align:center;background:#fff;border-top:1px solid #E5E2EC;font-size:.8em;font-weight:600;color:#615B70;padding-bottom:1.5%}
.e-nav .on{color:#5B21B6}
.e-tit{font-family:var(--titre);font-stretch:112%;font-weight:750;font-size:1.5em;line-height:1.08}
.e-sur{font-family:"JetBrains Mono",var(--mono);font-size:.76em;letter-spacing:.04em;text-transform:uppercase;color:#5B21B6;margin-bottom:-1.5%}
.e-bloc{background:#fff;border:1px solid #E5E2EC;padding:5%}
.e-l{display:flex;justify-content:space-between;gap:8px;padding:.5em 0;border-bottom:1px solid #EFEDF3}
.e-l:last-child{border-bottom:0}
.e-l b{font-variant-numeric:tabular-nums}
.e-p{color:#615B70;font-size:.92em}
.e-bt{display:flex;align-items:center;justify-content:center;min-height:3.3em;font-weight:700;background:#5B21B6;color:#fff;margin-top:2%}
.e-pas{display:inline-block;align-self:flex-start;padding:.2em .6em;font-weight:700;font-size:.82em;background:#0C0A12;color:#fff}
.e-pas.ok{background:#0F766E;color:#fff}
.e-gros{font-family:var(--titre);font-stretch:112%;font-weight:800;font-size:3.1em;line-height:1;color:#0F766E;font-variant-numeric:tabular-nums}
.e-barre{display:flex;gap:2px;height:1em;margin:.7em 0}
.e-barre i{display:block;transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.ecran.la .e-barre i{transform:none}
.e-sign{width:62%;margin-top:.4em}
.e-sign path{fill:none;stroke:#5B21B6;stroke-width:2.4;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s .25s}
.ecran.la .e-sign path{stroke-dashoffset:0}
.e-touches{display:grid;gap:.5em}
.e-touche{display:flex;align-items:center;justify-content:space-between;min-height:3em;padding:0 .9em;background:#fff;border:1px solid #E5E2EC;font-weight:700}
.e-touche.on{background:#5B21B6;border-color:#5B21B6;color:#fff}
.film-note{font-family:"JetBrains Mono",var(--mono);font-size:11.5px;color:var(--ink-2)}
.film-etapes{list-style:none;min-width:0}
.film-etape{min-height:78vh;display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--line);padding:32px 0}
.film-etape:last-child{min-height:62vh}
.film-etape small{font-family:"JetBrains Mono",var(--mono);font-size:13px;color:var(--brand-2)}
.film-etape h3{font-family:var(--titre);font-stretch:112%;font-size:clamp(26px,3.3vw,44px);line-height:1.04;font-weight:750;letter-spacing:-.015em;margin:10px 0 14px;max-width:16ch}
.film-etape p{font-size:clamp(16.5px,1.5vw,19px);line-height:1.5;color:var(--ink-2);max-width:42ch}
.fleche{display:inline-block;margin-top:16px;font-weight:700;color:var(--brand);text-decoration:underline;text-underline-offset:4px}
@media (max-width:860px){
  .film-grille{grid-template-columns:1fr;gap:0}
  .film-tel{top:var(--nav);height:auto;z-index:2;background:var(--ground);padding:10px 0 8px;border-bottom:1px solid var(--line)}
  .tel{--h:min(42svh,360px)}
  .film-note{font-size:10.5px}
  .film-etape{min-height:52svh;padding:26px 0}
  .film-etape:last-child{min-height:44svh}
}
/* Les règles */
.regles{background:var(--encre);color:#fff;padding:clamp(60px,9vw,120px) 0}
.regles h2{font-family:var(--titre);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:clamp(32px,5.4vw,76px);line-height:.98;letter-spacing:-.02em;color:#fff;max-width:14ch;margin-bottom:clamp(28px,4vw,56px)}
.regle{display:grid;grid-template-columns:64px minmax(0,6fr) minmax(0,5fr);gap:clamp(12px,3vw,40px);padding:clamp(20px,3vw,34px) 0;border-top:1px solid rgba(255,255,255,.22);align-items:baseline}
.regle small{font-family:"JetBrains Mono",var(--mono);font-size:13px;color:var(--accent)}
.regle h3{font-family:var(--titre);font-stretch:112%;font-size:clamp(23px,2.9vw,38px);line-height:1.06;font-weight:750;color:#fff}
.regle p{font-size:16.5px;line-height:1.5;color:#BDB9C8}
@media (max-width:760px){.regle{grid-template-columns:40px minmax(0,1fr)}.regle p{grid-column:2}}
/* L'index */
.index{padding:clamp(60px,9vw,110px) 0}
.index h2,.faq-tete{font-family:var(--titre);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:clamp(30px,4.6vw,64px);line-height:1;letter-spacing:-.02em}
.index-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(26px,4vw,48px)}
.index-g h3{font-family:var(--titre);font-stretch:112%;font-size:19px;font-weight:750;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.index-g h3 a:hover{color:var(--brand)}
.index-g ul{list-style:none}
.index-g li a{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15.5px;transition:color .15s,padding .15s}
.index-g li a::after{content:"→";font-family:"JetBrains Mono",var(--mono);color:var(--ink-3)}
.index-g li a:hover{color:var(--brand);padding-left:6px}
@media (max-width:820px){.index-g{grid-template-columns:1fr}}
.faq-acc{padding:0 0 clamp(60px,9vw,110px)}
.faq-acc details{border-top:1px solid var(--line)}
.faq-acc details:last-child{border-bottom:1px solid var(--line)}
.faq-acc summary{display:flex;justify-content:space-between;gap:16px;padding:20px 0;cursor:pointer;font-family:var(--titre);font-stretch:112%;font-size:clamp(18px,2vw,23px);font-weight:700;list-style:none}
.faq-acc summary::-webkit-details-marker{display:none}
.faq-acc summary::after{content:"+";font-family:"JetBrains Mono",var(--mono);color:var(--brand)}
.faq-acc details[open] summary::after{content:"−"}
.faq-acc p{padding:0 0 22px;max-width:66ch;color:var(--ink-2);font-size:16.5px;line-height:1.55}
.faq-tete{margin-bottom:clamp(22px,3vw,36px)}
/* La clôture */
.cloture{position:relative;overflow:hidden;background:var(--encre);color:#fff;padding:clamp(60px,9vw,120px) 0}
.cloture-marque{position:absolute;right:-6%;top:-14%;width:min(70vw,640px);opacity:.07;fill:#fff;pointer-events:none}
.cloture h2{position:relative;font-family:var(--titre);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:clamp(36px,6.4vw,92px);line-height:.96;letter-spacing:-.02em;color:#fff;max-width:13ch}
.cloture .portes{position:relative;max-width:680px;margin-top:clamp(26px,4vw,44px)}
/* La page artisans : le téléphone à côté du titre */
.hero-tel{display:flex;justify-content:center}
.hero-tel .tel{--h:min(540px,76vh)}
.hero-tel .ecran{position:absolute}
@media (max-width:920px){.hero-tel .tel{--h:440px}}