/* Cinq structures de hero. Petits visuels, données courtes, aucun fond d'image. */
.hero{position:relative;min-height:100svh;padding-top:72px;overflow:hidden}
.hero h1{font-family:var(--serif);font-variation-settings:"SERF" 100;font-weight:300;letter-spacing:-.025em;line-height:.98}
.hero h1 em{font-style:italic}
.hero .chapo{color:var(--encre-2);font-size:17px;line-height:1.55;max-width:46ch}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.donnee{font-size:12px;line-height:1.45;color:var(--encre-3);letter-spacing:-.01em}
.donnee b{color:var(--encre);font-weight:450}
.vis{display:block;width:100%;object-fit:cover;aspect-ratio:4/3;background:var(--papier-2)}

/* A. Constellation : titre au centre, petits visuels autour */
.hero-a{display:grid;place-items:center;text-align:center}
.hero-a .centre{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:26px;padding:0 var(--g)}
.hero-a h1{font-size:clamp(40px,5.4vw,96px);max-width:none;white-space:nowrap}
.hero-a h1 br{display:block}
@media (max-width:900px){.hero-a h1{white-space:normal;font-size:clamp(38px,9vw,64px)}.hero-a h1 br{display:none}}
.hero-a .chapo{margin-inline:auto}
.hero-a .actions{justify-content:center}
.hero-a .flottant{position:absolute;z-index:1;will-change:transform}
.hero-a .flottant img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hero-a .flottant .donnee{text-align:left;padding-top:8px;display:flex;justify-content:space-between;gap:12px}
.hero-a .f1{width:clamp(150px,15vw,240px);left:4%;top:16%}
.hero-a .f2{width:clamp(130px,12vw,200px);left:13%;bottom:9%}
.hero-a .f3{width:clamp(140px,13vw,210px);right:5%;top:13%}
.hero-a .f4{width:clamp(160px,16vw,260px);right:9%;bottom:12%}
.hero-a .f5{width:clamp(110px,9vw,150px);left:26%;top:9%}
.hero-a .f6{width:clamp(110px,9vw,150px);right:27%;bottom:6%}
.hero-a .note{position:absolute;z-index:1;font-size:12px;color:var(--encre-2);border-top:1px solid var(--filet);padding-top:8px;width:170px;text-align:left}
.hero-a .n1{left:5%;top:52%}
.hero-a .n2{right:6%;top:48%}
@media (max-width:900px){.hero-a .f5,.hero-a .f6,.hero-a .note{display:none}.hero-a .f1{top:12%;left:3%}.hero-a .f3{top:10%;right:3%}.hero-a .f2{bottom:4%;left:3%}.hero-a .f4{bottom:5%;right:3%}.hero-a .flottant .donnee{display:none}}

/* B. Paires : le texte à gauche, trois avant / après en vignettes à droite */
.hero-b .wrap{min-height:calc(100svh - 72px);display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2vw,28px);align-items:center}
.hero-b .texte{grid-column:1/6;display:flex;flex-direction:column;gap:28px}
.hero-b h1{font-size:clamp(44px,5.4vw,88px)}
.hero-b .paires{grid-column:7/13;display:flex;flex-direction:column;gap:14px}
.paire{display:grid;grid-template-columns:1fr 1fr 150px;gap:8px;align-items:end;border-top:1px solid var(--filet);padding-top:14px}
.paire .ap{position:relative;overflow:hidden}
.paire .ap img{clip-path:inset(0 100% 0 0)}
.paire.vu .ap img{clip-path:inset(0 0 0 0);transition:clip-path 1.2s var(--ease)}
.paire .donnee{padding-left:8px}
@media (max-width:900px){.hero-b .texte,.hero-b .paires{grid-column:1/-1}.hero-b .paires{margin-top:40px}.paire{grid-template-columns:1fr 1fr}.paire .donnee{grid-column:1/-1;padding:0}}

/* C. Fiche : un visuel annoté avec le descriptif */
.hero-c .wrap{min-height:calc(100svh - 72px);display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2vw,28px);align-items:center}
.hero-c .texte{grid-column:1/6;display:flex;flex-direction:column;gap:26px}
.hero-c h1{font-size:clamp(44px,5.2vw,84px)}
.hero-c .descriptif{list-style:none;border-top:1px solid var(--filet);counter-reset:d}
.hero-c .descriptif li{counter-increment:d;display:grid;grid-template-columns:28px 1fr auto;gap:10px;padding:10px 0;border-bottom:1px solid var(--filet);font-size:14px;cursor:default;transition:color .25s}
.hero-c .descriptif li::before{content:counter(d);font-size:12px;color:var(--encre-3);padding-top:2px}
.hero-c .descriptif li span{color:var(--encre-3);font-size:12px}
.hero-c .descriptif li.on{color:var(--chene)}
.hero-c figure{grid-column:7/13;position:relative}
.hero-c figure .cadre{position:relative}
.hero-c .point{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:rgba(250,248,244,.9);color:var(--encre);font-size:11px;font-weight:450;display:grid;place-items:center;transition:transform .3s var(--ease),background-color .3s}
.hero-c .point::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(250,248,244,.7);animation:onde 2.6s var(--ease) infinite}
.hero-c .point.on{background:var(--chene);color:#fff;transform:scale(1.15)}
@keyframes onde{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.6);opacity:0}}
.hero-c figcaption{display:flex;justify-content:space-between;gap:12px;padding-top:10px}
@media (max-width:900px){.hero-c .texte,.hero-c figure{grid-column:1/-1}.hero-c figure{margin-top:36px}}

/* D. Séquence : la méthode en cinq vignettes, qui s'enchaînent seules */
.hero-d .wrap{min-height:calc(100svh - 72px);display:flex;flex-direction:column;justify-content:center;gap:clamp(40px,6vh,72px)}
.hero-d .haut{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2vw,28px);align-items:end}
.hero-d h1{grid-column:1/8;font-size:clamp(44px,5.6vw,92px)}
.hero-d .cote{grid-column:9/13;display:flex;flex-direction:column;gap:22px}
.hero-d .bande{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1vw,14px)}
.hero-d .bande figure{transition:opacity .5s var(--ease)}
.hero-d .bande img{aspect-ratio:1/1;object-fit:cover;width:100%;background:#fff}
.hero-d .bande img.plan{object-fit:contain;padding:6%}
.hero-d .bande figcaption{display:flex;justify-content:space-between;gap:8px;padding-top:10px;border-top:1px solid var(--filet);margin-top:10px;position:relative}
.hero-d .bande figcaption::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--encre)}
.hero-d .bande figure.on figcaption::before{width:100%;transition:width 1.8s linear}
.hero-d .bande.anime figure:not(.on){opacity:.42}
@media (max-width:900px){.hero-d h1,.hero-d .cote{grid-column:1/-1}.hero-d .cote{margin-top:22px}.hero-d .bande{grid-template-columns:repeat(3,1fr)}.hero-d .bande figure:nth-child(n+4){display:none}}

/* E. Index : le titre, et la liste des pièces livrées avec un aperçu */
.hero-e .wrap{min-height:calc(100svh - 72px);display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,2vw,28px);align-items:center}
.hero-e .texte{grid-column:1/6;display:flex;flex-direction:column;gap:26px}
.hero-e h1{font-size:clamp(44px,5.6vw,92px)}
.hero-e .index{grid-column:7/13}
.hero-e .apercu{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--papier-2)}
.hero-e .apercu img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
.hero-e .apercu img.on{opacity:1;transform:none}
.hero-e ol{list-style:none;margin-top:14px;border-top:1px solid var(--filet)}
.hero-e li{display:grid;grid-template-columns:28px 1fr 1fr auto;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--filet);font-size:14px;cursor:pointer;transition:color .25s,padding-left .35s var(--ease)}
.hero-e li span{font-size:12px;color:var(--encre-3)}
.hero-e li.on{padding-left:8px}
.hero-e li.on b{color:var(--chene)}
@media (max-width:900px){.hero-e .texte,.hero-e .index{grid-column:1/-1}.hero-e .index{margin-top:36px}.hero-e li{grid-template-columns:24px 1fr auto}.hero-e li .typ{display:none}}