/* Espaces — « visite du club » : rail sticky sobre + chapitres éditoriaux (carte papier à liseré abricot). */
.spaces-tour{--rail-w:220px;--tour-gap:clamp(40px,5vw,96px);position:relative;display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);gap:var(--tour-gap);align-items:start;padding-block:var(--space-section) 0;scroll-margin-top:0}
/* Rail : filet vertical, libellés courts, l'espace visible est marqué d'un trait abricot */
.spaces-rail{position:sticky;top:calc(var(--header-height) + 32px);align-self:start}
.spaces-rail ol{display:grid;border-left:1px solid var(--border-subtle)}
.spaces-rail a{display:block;margin-left:-1px;padding:14px 0 14px 22px;border-left:2px solid transparent;font:500 var(--text-xs)/1.4 var(--font-label);letter-spacing:1.2px;text-transform:uppercase;color:var(--color-muted)}
.spaces-rail a:is(:hover,:focus-visible){color:var(--color-text)}
.spaces-rail a[aria-current=true]{border-left-color:var(--color-accent);color:var(--color-text)}
/* Chapitres */
.spaces-panels{--panel-gap:clamp(72px,9vw,150px);display:grid;gap:var(--panel-gap);min-width:0}
/* Bandes légères : fond écru plus profond avec grain naturel, pleine largeur. */
.space-panel:nth-child(even)::before{content:'';position:absolute;z-index:-1;inset:calc(var(--panel-gap) / -2) -100vmax calc(var(--panel-gap) / -2) calc(-100vmax - var(--rail-w) - var(--tour-gap));background:var(--forge-grain) 0 0/256px 256px,var(--band-chapter)}
.space-panel{--band-chapter:color-mix(in srgb,var(--color-surface) 94%,var(--color-text));position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;min-height:calc(var(--section-height) - 80px);scroll-margin-top:calc(var(--header-height) + 16px)}
.space-media{grid-column:1/9;grid-row:1;position:relative;min-height:0;aspect-ratio:5/4;overflow:hidden;border-radius:var(--radius);background:var(--color-forest)}
.space-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.space-copy{grid-column:6/13;grid-row:1;position:relative;z-index:1;min-width:0;margin-top:clamp(64px,9vw,140px);padding:clamp(32px,3.4vw,60px);color:var(--color-surface);background:var(--forge-grain) 0 0/256px 256px,var(--color-forest);border-left:8px solid var(--color-accent);border-radius:var(--radius);box-shadow:0 28px 64px rgba(14,17,8,.22)}
.space-panel:nth-child(even) .space-media{grid-column:5/13}
.space-panel:nth-child(even) .space-copy{grid-column:1/8}
.space-copy h2{font-size:clamp(32px,3.3vw,48px);line-height:1.14;letter-spacing:-.8px;margin-bottom:20px;overflow-wrap:normal;hyphens:manual}
.space-subtitle{font:500 var(--text-body)/1.5 var(--font-heading);color:var(--color-accent);margin-bottom:24px}
.space-body{font-size:var(--text-body);line-height:1.75;color:var(--color-surface);max-width:520px}
/* Équipements : fiche technique à filets fins */
.space-tags{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;margin-block:32px;border-bottom:1px solid var(--color-line-on-dark)}
.space-tags li{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--color-line-on-dark);font:500 var(--text-xs)/1.4 var(--font-label);letter-spacing:1.2px;text-transform:uppercase}
.space-tags li::before{content:'';width:6px;height:6px;flex-shrink:0;background:var(--color-accent)}
.space-band{position:absolute;top:28px;left:28px;background:var(--color-accent);color:var(--color-text);padding:9px 20px;font:500 var(--text-sm)/1.4 var(--font-heading);text-transform:uppercase;letter-spacing:1px}
/* Illustrations identifiées comme telles ; photos éditables dans le CMS. */
.space-media-graphic{display:grid;place-items:center}
.space-led{position:absolute;inset:0;width:100%;height:100%;background:radial-gradient(ellipse at center,var(--color-ember),var(--color-forest) 65%)}
.space-graphic-caption{position:absolute;bottom:24px;left:24px;right:24px;color:var(--color-paper);font:400 var(--text-2xs)/1.5 var(--font-heading);letter-spacing:1px;text-transform:uppercase;text-align:center}
.space-data>p{font:500 clamp(56px,6vw,104px)/1 var(--font-heading);color:var(--color-accent)}
.space-data{width:100%;height:100%;padding:48px;display:flex;flex-direction:column;justify-content:center;gap:36px}
.space-data-bars{height:180px;display:flex;align-items:flex-end;gap:12px}
.space-data-bars span{flex:1;background:var(--color-accent);height:25%;opacity:.35;border-radius:2px}
.space-data-bars span:nth-child(2){height:40%;opacity:.5}.space-data-bars span:nth-child(3){height:58%;opacity:.65}.space-data-bars span:nth-child(4){height:78%;opacity:.8}.space-data-bars span:nth-child(5){height:100%;opacity:1}
.space-empty-media{color:var(--color-accent);font:500 40px/1.1 var(--font-heading);text-align:center;padding:40px}
/* Pré-footer : bande pleine largeur sur la bande claire chaude (pas une section flottante, pas de dark). */
.spaces-next{display:flex;align-items:center;min-height:50vh;padding-block:clamp(48px,6vw,80px);background:var(--forge-grain) 0 0/256px 256px,color-mix(in srgb,var(--color-brand) 13%,var(--color-surface));color:var(--color-text)}
.spaces-next-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);align-items:center;width:min(var(--content-width),calc(100% - var(--gutter)*2))}
.spaces-next .test-panel{position:relative;min-width:0;min-height:clamp(300px,38vh,380px)}
@media(max-width:1100px){
.spaces-tour{--rail-w:0px;--tour-gap:0px;grid-template-columns:minmax(0,1fr);gap:0;padding-top:0}
.spaces-rail{position:sticky;top:var(--header-height);z-index:20;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);background:color-mix(in srgb,var(--color-surface) 94%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle)}
.spaces-rail ol{display:flex;gap:28px;overflow-x:auto;border-left:0;scrollbar-width:none}
.spaces-rail a{margin:0;min-width:44px;text-align:center;padding:16px 0 14px;border-left:0;border-bottom:2px solid transparent;white-space:nowrap}
.spaces-rail a[aria-current=true]{border-bottom-color:var(--color-accent)}
.spaces-panels{padding-top:var(--space-section)}
}
@media(max-width:900px){
.space-panel,.space-panel:nth-child(even){grid-template-columns:minmax(0,1fr);min-height:0}
.space-media,.space-panel:nth-child(even) .space-media{grid-column:1/-1;aspect-ratio:4/3}
.space-copy,.space-panel:nth-child(even) .space-copy{grid-column:1/-1;grid-row:2;margin:-56px 16px 0}
}
@media(max-width:700px){
.space-copy,.space-panel:nth-child(even) .space-copy{margin:-40px 8px 0;padding:28px 22px}

.space-body{font-size:var(--text-label)}
.space-subtitle{font-size:var(--text-ui);margin-bottom:20px}
.space-tags{grid-template-columns:minmax(0,1fr);margin-block:24px}
.space-data{padding:32px}
.spaces-next{min-height:0}.spaces-next-inner{grid-template-columns:minmax(0,1fr);gap:32px}
}
@media(max-width:360px){.space-copy h2{font-size:28px}.space-data{padding:24px}}
@media print{.spaces-rail,.spaces-next{display:none}.space-panel{break-inside:avoid}}

/* Chapitres sans chevauchement : photo et texte côte à côte, le texte posé directement sur la bande claire (ni carte ni cadre). */
.space-media{grid-column:1/7}
.space-copy{grid-column:8/13;margin-top:0;padding:0;color:var(--color-text);background:none;border-left:0;border-radius:0;box-shadow:none}
.space-panel:nth-child(even) .space-media{grid-column:7/13}
.space-panel:nth-child(even) .space-copy{grid-column:2/7}
.space-body{color:var(--color-text)}
.space-subtitle{color:var(--color-accent-strong)}
.space-tags{border-bottom-color:var(--border-subtle)}
.space-tags li{border-top-color:var(--border-subtle)}
@media(max-width:900px){
.space-panel,.space-panel:nth-child(even){row-gap:28px}
.space-media,.space-panel:nth-child(even) .space-media{grid-column:1/-1;grid-row:1}
.space-copy,.space-panel:nth-child(even) .space-copy{grid-column:1/-1;grid-row:2;margin:0}
}

/* Quinconce : d'un espace à l'autre, les photos alternent aussi en hauteur (une haute, la suivante descendue), en plus de l'alternance gauche et droite. */
.space-media{align-self:start}
.space-copy{align-self:center}
.space-panel:nth-child(even) .space-media{margin-top:clamp(120px,16vw,260px)}
@media(max-width:900px){
.space-panel:nth-child(even) .space-media{margin-top:0}
}

/* Marges régulières : grille à 12 colonnes avec gouttière, photo (6 colonnes) et texte (5 colonnes) séparés par une colonne vide.
   Le texte des lignes paires commence sur le même bord gauche que la photo des lignes impaires, et ne touche plus jamais la photo. */
.space-panel{column-gap:clamp(24px,3vw,48px)}
.space-media,.space-panel:nth-child(odd) .space-media{grid-column:1/7}
.space-copy,.space-panel:nth-child(odd) .space-copy{grid-column:8/13}
.space-panel:nth-child(even) .space-media{grid-column:7/13}
.space-panel:nth-child(even) .space-copy{grid-column:1/6}
@media(max-width:900px){
.space-media,.space-panel:nth-child(odd) .space-media,.space-panel:nth-child(even) .space-media{grid-column:1/-1}
.space-copy,.space-panel:nth-child(odd) .space-copy,.space-panel:nth-child(even) .space-copy{grid-column:1/-1}
}

/* Mêmes marges latérales que le reste du site (grille .wrap) : plus de photo à 32 px du bord quand l'en-tête et les titres sont à 64 px. */
.spaces-tour.wide{width:min(var(--content-width),calc(100% - var(--gutter)*2))}

/* Zigzag en hauteur, avec de l'air : la photo de chaque espace pair est descendue de plus de 250 px par rapport à celle de l'espace impair. Photo et texte occupent des colonnes
   distinctes, donc la dérive du parallaxe ne les fait jamais se toucher. Les sections gardent toute leur hauteur et leurs marges. */
@media(min-width:901px){
.space-media,.space-panel:nth-child(even) .space-media{aspect-ratio:4/5}
.space-panel:nth-child(even) .space-media{margin-top:clamp(150px,19vw,300px)}
.space-media{position:relative;top:var(--space-drift,0px)}
.space-copy{transform:translate3d(0,var(--space-copy-drift,0px),0)}
}
@media(prefers-reduced-motion:reduce){.space-media{top:0}.space-copy{transform:none;will-change:auto}}

/* Mots longs (Photobiomodulation, Accompagnement) : la taille du titre suit la largeur de la colonne de texte pour que le mot le plus long tienne sur une ligne, jamais coupé en lettres. */
.space-copy{container-type:inline-size}
.space-copy h2{font-size:min(clamp(32px,3.3vw,48px),9.4cqi)}

/* Essai : transition douce entre les sections. La bande des espaces pairs n'a plus de bords nets : elle apparaît et disparaît en dégradé (masque), au lieu d'un aplat découpé. */
.space-panel:nth-child(even)::before{top:calc(var(--panel-gap) / -1);bottom:calc(var(--panel-gap) / -1);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 74%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 74%,transparent 100%)}

/* Essai : tracés verticaux de la marque qui relient une section à la suivante. Chacun descend de la section précédente jusqu'au bord haut de la photo
   (il suit la dérive de la photo) et se dessine à l'entrée dans l'écran. Le cadre ne coupe plus : seule l'image est arrondie. */
.space-media{overflow:visible}
.space-media>img,.space-media>.space-led,.space-media>.space-data{border-radius:inherit}
.space-media>.trace-vertical{position:absolute;z-index:-1;left:var(--trace-x,45%);bottom:calc(100% - 2px);width:clamp(26px,2.4vw,40px);height:var(--trace-h);pointer-events:none}
.space-panel:nth-child(odd){--trace-h:calc(var(--panel-gap) * .9);--trace-x:40%}
.space-panel:nth-child(even){--trace-h:calc(var(--panel-gap) + clamp(90px,11vw,190px));--trace-x:52%}
.space-panel:nth-child(4n){--trace-x:36%}
.space-panel:nth-child(4n+3){--trace-x:58%}
@media(max-width:900px){.space-media>.trace-vertical{display:none}}
@media print{.space-media>.trace-vertical{display:none}}

/* Photos en 4:5 (portrait) : la photo passe sur 5 colonnes (au lieu de 6) pour garder une hauteur raisonnable ; le texte garde 5 colonnes, avec une colonne vide entre les deux. */
@media(min-width:901px){
.space-media,.space-panel:nth-child(odd) .space-media{grid-column:1/6}
.space-copy,.space-panel:nth-child(odd) .space-copy{grid-column:7/12}
.space-panel:nth-child(even) .space-media{grid-column:8/13}
.space-panel:nth-child(even) .space-copy{grid-column:2/7}
}

/* 4:5 à toutes les largeurs (mobile compris) */
.space-media,.space-panel:nth-child(even) .space-media{aspect-ratio:4/5}
@media(max-width:900px){.space-media,.space-panel:nth-child(even) .space-media{max-width:520px}}