/* =============================================================================
stackv.css — « Nos voyages à la une »
=============================================================================
Repris de la maquette figee : `style.css` l. 1148-1254, bornes CALCULEES sur les
titres de section (du commentaire « VOYAGES A LA UNE » jusqu'au `}` de sa @media
mobile, le repere suivant etant « ---- A LA UNE ---- » qui ouvre le bloc `feature`).
Equilibre verifie : 25 ouvrants pour 25 fermants.
⚠️⚠️ NE JAMAIS ECRIRE LES DEUX SEQUENCES DE COMMENTAIRE EN TOUTES LETTRES DANS UN
COMMENTAIRE : ce cartouche a porte « 25 slash-etoile pour 25 etoile-slash » ecrits
litteralement, et le second A FERME LE COMMENTAIRE sur place. Tout ce qui suivait a
ete lu comme du CSS parasite, jusqu'a la premiere accolade — emportant la regle
`.stackv{ padding:0 !important }`, donc les 126 px de `section[id]` revenaient en haut
ET en bas de la section. Symptome : notre section mesurait 1238 px la ou la maquette
en fait 1097, sur un contenu pourtant PLUS COURT.
⚠️ ET LE COMPTAGE D'EQUILIBRE NE L'AVAIT PAS VU : 39 ouvrants, 39 fermants. Un
fermant place DANS un commentaire le clot sans deranger le compte. Le geste 3 verifie
l'equilibre, pas l'imbrication — pour ca, il faut servir le fichier et regarder ce que
le navigateur a reellement retenu.
⚠️⚠️ SON TITRE EST PERIME ET DECRIT UN MECANISME QUI N'EXISTE PLUS. Il annonce
« cartes empilees au scroll (card-stacking) / chaque carte est position:sticky ».
C'est FAUX depuis le 03/07, et c'est le CSS lui-meme qui le dit 27 lignes plus bas :
« pilote par les FLECHES depuis le 03/07 (fini le pin sticky de 540vh : la cliente
ne veut PAS de zone qui bloque le scroll). La section fait ~1 ecran, le scroll est
libre. » Mesure a l'appui : `buildStackV()` (main.js:363-548) ne pose AUCUN ecouteur
de defilement et n'utilise aucune progression `--sp`.
⇒ Le titre est conserve tel quel par fidelite a la source, mais ne pas le lire comme
une specification. Huitieme commentaire perime releve dans la maquette.
⚠️ CE QUI RESTE STICKY, C'EST LE FOND, PAS LE CONTENU. `.stackv__bg` est
`position:sticky; top:0; height:100vh` et `.stackv__track` remonte par-dessus avec
`margin-top:-100vh` : la foret reste immobile pendant que la section defile
normalement. Retirer l'un des deux sans l'autre laisse une bande noire de 100vh.
⚠️ `padding:0 !important` SUR `.stackv` N'EST PAS UNE FORCE BRUTE : il annule le
padding que `section[id]` pose sur tous nos blocs (convention `id="section-N"`).
C'est l'ecueil qui avait coute son dégagement d'en-tete au hero — ici la maquette
l'avait deja desamorce elle-meme.
⚠️ CE QUI N'EST PAS REPRIS, et pourquoi :
· ✅ `.stackv__cta` — PORTE le 2026-10-07 avec la fiche voyage (`style.css:1239`, et
`mobile.css:989` dans le `@media (max-width:1024px)`), avec `.stackv__foot`
(`style.css:1230`, NEUF lignes plus haut et hors de la recherche faite d'abord sur
`stackv__cta` — je l'avais declaree sans regle a tort : un grep ne trouve que ce
qu'on lui demande).
· `.stackv__caption .trip__mode` (`style.css:1935`) — le « mode / etapes » est
fabrique par HACHAGE dans la maquette, aucune source en base.
⚠️ LES SOUS-COMPOSANTS DE LA CARTE SONT DEJA DANS `components.css` : `.trip__diff`,
`.trip__tag`, `.trip__date`, `.on-guide` / `.trip__guide`. Ce fichier ne porte que
les surcharges de CONTEXTE (bande blanche du polaroid, ruban qui deborde du cadre).
Ne pas les y redeclarer : c'est la promotion du 2026-10-07 qui les rend disponibles.
============================================================================= */
/* ===== VOYAGES À LA UNE — cartes empilées au scroll (card-stacking, façon incredibles.dev) =====
Chaque carte est position:sticky ; en scrollant, elles se calent les unes sur les autres.
--i = index de la carte (posé par JS) -> petit décalage vertical croissant = effet "paquet". */
/* FOND forêt FIXE : couche .stackv__bg sticky PLEINE HAUTEUR VIEWPORT (100vh), 1er enfant de .stackv.
Comme elle est sticky top:0 sur toute la hauteur de la section -> elle reste COLLÉE et IMMOBILE
pendant tout le battage (fond FIXE), en COVER sur 100vh (taille normale, pas zoomé), et couvre TOUT
(plus de bande noire). Le contenu (.stackv__track) remonte par-dessus via margin-top:-100vh. */
.stackv{ position:relative; background:var(--noir); padding:0 !important; } /* annule le padding section[id] (= les bandes noires) */
/* ⚠️ L'URL DE LA PHOTO N'EST PAS ICI, contrairement a la maquette qui la fige dans son
CSS (`url('../img/stackv/foret-sapins.jpg')`). C'est un CHAMP DU BLOC : la cliente la
change au backoffice, et la vue la pose en ligne. Le `background` ci-dessous ne garde
que l'aplat de repli et le cadrage — si la photo manque du disque, la section reste
noire et lisible au lieu d'afficher un cadre casse. */
.stackv__bg{ position:sticky; top:0; height:100vh; z-index:0; overflow:hidden;
background:var(--noir) center/cover no-repeat; }
.stackv__bg::after{ content:""; position:absolute; inset:0;
background:rgba(10,10,10,.62); } /* calque noir -> fait ressortir les polaroïds */
/* contenu PAR-DESSUS le bg sticky. Le track occupe EXACTEMENT 1 écran, header réservé en padding :
titre en haut (hauteur naturelle), stage = tout le reste -> rien ne déborde sur la section suivante. */
.stackv__track{ position:relative; z-index:1; margin-top:-100vh;
min-height:100vh; padding-top:var(--header-h, 112px);
display:flex; flex-direction:column; }
/* sur fond sombre : titre/sous-titre clairs */
.stackv .sec-title{ color:var(--blanc); }
.stackv .sec-sub{ color:rgba(255,255,255,.6); }
/* TITRE de section : DANS le stage sticky (en haut) -> il reste collé sous le header AVEC les cartes
pendant le battage, et se décolle AVEC elles à la fin (tout remonte ensemble). */
.stackv .sec-head{
position:relative; z-index:1;
max-width:820px; margin:0 auto;
padding:clamp(24px,3vw,40px) clamp(20px,4vw,40px) 0; text-align:center;
}
/* ÉVENTAIL/BATTAGE de cartes — piloté par les FLÈCHES depuis le 03/07 (fini le pin sticky de 540vh :
la cliente ne veut PAS de zone qui bloque le scroll). La section fait ~1 écran, le scroll est libre. */
.stackv__pin{ position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
/* STAGE = la zone des cartes SEULE (le titre est au-dessus) : prend toute la hauteur restante. */
/* STAGE = zone des cartes SEULE (titre au-dessus). min-height = carte pleine taille + respiration
haut/bas : si l'écran est trop court, c'est la SECTION (et son fond forêt) qui s'allonge,
la carte n'est jamais rognée. */
.stackv{ --stackv-marge:56px; }
.stackv__stage{ position:relative; flex:1 1 auto;
min-height:calc(var(--stack-h, 600px) + var(--stackv-marge) * 2); perspective:1600px; }
/* FLÈCHES ← → : ronds jaunes de part et d'autre du paquet de cartes */
.stackv__nav{
position:absolute; top:55%; transform:translateY(-50%); z-index:200;
width:58px; height:58px; border-radius:50%;
background:var(--jaune); color:var(--noir);
display:grid; place-items:center; cursor:pointer;
box-shadow:0 14px 34px -10px rgba(0,0,0,.6);
transition:background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.stackv__nav:hover{ background:var(--jaune-d); transform:translateY(-50%) scale(1.08);
box-shadow:0 18px 40px -10px rgba(244,183,33,.55); }
.stackv__nav--prev{ left:clamp(14px, 6vw, 120px); }
.stackv__nav--next{ right:clamp(14px, 6vw, 120px); }
/* ===== CARTE POLAROÏD : cadre blanc, photo en haut, bande blanche (caption) en bas ===== */
.stackv__card{
position:absolute; left:50%; top:50%;
width:min(520px, 86vw);
background:var(--blanc);
padding:14px 14px 0; /* cadre blanc ; la bande basse vient du padding de .caption */
border-radius:6px;
box-shadow:0 28px 55px -18px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.18);
will-change:transform;
/* --tx/--ty/--rot/--sc posés par main.js ; fallback repos = --dx0/--rot0. -50% recentre la carte. */
transform:translate(-50%, -50%)
translate(var(--tx, var(--dx0, 0px)), var(--ty, 0px))
rotate(var(--rot, var(--rot0, 0deg))) scale(var(--sc, 1));
}
/* PHOTO (haut du polaroïd) */
.stackv__photo{ position:relative; display:block; margin:0;
width:100%; aspect-ratio:3/2;
background:#241d12 center/cover no-repeat; border-radius:3px; } /* overflow visible : le ruban tag déborde à droite */
.stackv__badge{ position:absolute; left:12px; top:12px; display:inline-flex; align-items:center; gap:7px;
background:rgba(0,0,0,.42); backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,.25); border-radius:999px; color:var(--blanc);
padding:5px 12px; font-size:12px; letter-spacing:.05em; text-transform:uppercase; }
/* CAPTION = bande blanche du bas : texte en SOMBRE (lisible) */
.stackv__caption{ padding:30px 8px 20px; color:var(--noir); /* haut 30px : laisse passer la pastille pattes qui chevauche */
display:flex; flex-direction:column; gap:7px; }
/* font-weight:400 explicite : sans lui le h3 hérite du gras du navigateur, et Instrument Serif
(qui n'existe qu'en 400) est alors GRAISSÉ SYNTHÉTIQUEMENT par Chrome — un faux gras baveux. */
.stackv__caption .stackv__title{ font-family:var(--serif); font-weight:400; font-size:clamp(25px,2.3vw,32px);
-webkit-text-stroke:.35px currentColor; /* même densification que .trip__title */
line-height:1.08; color:var(--noir); }
.stackv__caption .stackv__sub{ font-size:var(--fs-small); line-height:1.5; color:var(--noir-50); }
/* Le tag du polaroïd réutilise le ruban .trip__tag — décalé pour DÉBORDER du cadre blanc
du polaroïd (padding 14px + 13px de débord), pli triangulaire dessous = effet de profondeur. */
.stackv__photo .trip__tag{ right:-27px; }
/* Mêmes infos que les fiches voyage, adaptées à la BANDE BLANCHE (règle lisibilité : textes sombres) */
.stackv__caption .trip__date{ color:var(--jaune-d); }
/* légende sur fond CLAIR : la base de `.trip__places` est réglée pour la carte sombre (2026-11-12) */
.stackv__caption .trip__places, .stackv__caption .trip__places::before{ color:var(--noir-50); }
.stackv__caption .trip__guide{ color:var(--noir-50); }
.stackv__caption .trip__guide strong{ color:var(--noir); }
.stackv__caption .trip__guide-pic{ border-color:rgba(14,14,14,.15); }
/* MOBILE : pas de pin/battage -> polaroïds empilés verticalement, droits. */
@media (max-width:760px){
.stackv__pin{ height:auto; }
.stackv__nav{ display:none; } /* mobile : polaroïds empilés, pas de battage */
.stackv__stage{ position:static; height:auto; display:block; perspective:none;
padding:0 clamp(16px,5vw,28px); }
.stackv__card{ position:relative; left:auto; top:auto; width:min(420px,100%);
margin:0 auto clamp(20px,5vw,32px);
transform:none !important; z-index:auto !important; }
/* fond forêt : non sticky en mobile (couvre la section en flux), pas de margin négatif sur le track */
.stackv__bg{ position:absolute; inset:0; height:100%; }
.stackv__track{ margin-top:0; padding:clamp(40px,8vw,64px) 0; height:auto; display:block; }
.stackv__pin{ display:block; }
}
/* =============================================================================
MOBILE — repris de `mobile.css`
=============================================================================
⚠️ TROIS ENDROITS DISPERSES, pas une plage : l. 916-1019 (le gros), l. 910 et 914
(dans une regle MIXTE du ruban de statut) et l. 819 (dans `@media (hover:none)`).
Les regles d'une meme classe ne sont pas contigues — ici elles sont a 100 lignes
d'ecart, sous des titres qui parlent d'autre chose.
⚠️⚠️ SOUS 1024 PX, LE BATTAGE EST ABANDONNE AU PROFIT D'UN CARROUSEL A BALAYAGE,
et c'est une decision de Fix, pas une adaptation cosmetique : le battage y etait
casse (cartes qui se chevauchent de ~34 px mesures a 375 px, ruban hors ecran,
titres illisibles). Ces regles NEUTRALISENT donc la mecanique desktop — fond non
sticky, marge negative annulee, `--stack-h` sans effet. Les reprendre a moitie
laisse une section d'un ecran de haut avec des cartes empilees au centre.
⚠️ `.stackv__piste` ET `.stackv__navrow` N'EXISTENT DANS AUCUN HTML : c'est
`js/blocs/stackv.js` qui les fabrique en deplacant les cartes. Du CSS sans
balisage est exactement l'angle mort de D123 (le menu mobile) — si le JS n'est pas
porte, ces regles n'habillent rien et rien ne le signale.
============================================================================= */
/* `style.css:1230` et `:1239` — le pied du polaroid et son bouton « Voir le voyage ». */
.stackv__foot{ display:flex; align-items:center; gap:16px; margin-top:6px; flex-wrap:wrap; }
.stackv__cta{ margin-left:auto; padding:9px 18px; font-size:var(--fs-small); }
@media (max-width:1024px){
/* ---- #stackv « Nos voyages à la une » : titre densifié -----------------
BUG TROUVÉ À LA MESURE (LOT 3, 22/07) : à l'alignement "haut de section
= haut d'écran" (méthode d'audit imposée §4bis), le bloc titre + sous-
titre mesurait 190px sur 375x667 -> la 1re carte (491px) débordait de
20px SOUS l'écran, et son CTA "Voir le voyage" (bas de carte, carte =
UN SEUL sur toute sa surface) tombait pile dans la bande de la
pilule (y:595-647) - dépassait même à DROITE de la pilule (carte 300px
plus large que la pilule 162px) : un bout du bouton restait visible et
cliquable à côté de la pilule. Sous-titre décoratif retiré (this
section only - .depforts/.blog gardent le leur) : gagne ~90px, la 1re
carte tient alors entière au-dessus de la pilule. */
.stackv .sec-sub{ display:none; }
.stackv .sec-head{ padding-top:8px; } /* marge de sécurité mesurée (voir commentaire ci-dessus) */
/* ---- #stackv « Nos voyages à la une » : CARROUSEL À SWIPE --------------
Décision Fix : sous 1024px on abandonne le battage (cassé — mesuré en
Chrome à 375px : cartes qui se chevauchent de ~34px, ruban hors écran,
titres illisibles). Cause racine du chevauchement/des fragments blancs :
.stackv__card est un , et l'ancienne règle mobile de style.css
(<=760px) le repasse en position:relative SANS display:block — un
sans display explicite retombe en display:inline (seul position:absolute
le "blockifiait" gratuitement en desktop), d'où width/padding/background
qui cessent de s'appliquer proprement. Le rend flex-item ci-dessous
blockifie la carte correctement et règle ça du même coup, sans avoir à
toucher style.css.
Neutralise aussi la mécanique de pin desktop (fond sticky, marge
négative, --stack-h) : la section retombe à une hauteur normale. */
.stackv__bg{ position:absolute; inset:0; height:100%; }
.stackv__track{ margin-top:0; padding-top:0; height:auto; }
.stackv__pin{ height:auto; }
.stackv__stage{
position:static; min-height:0; perspective:none;
display:flex; flex-direction:column; align-items:center; gap:14px;
padding:0;
}
/* ANCRAGE MAGNÉTIQUE (25/07, retour Fix : « ça s'arrête un peu à moitié »).
Avant : snap "x proximity" + align "start" -> le navigateur ne recalait QUE si
le doigt s'arrêtait déjà près d'un point d'ancrage, et alignait sur le bord
GAUCHE de la piste. Désormais "x mandatory" + align "center" : à chaque
relâchement du doigt, une carte se cale au CENTRE de l'écran, jamais deux
demi-cartes.
Le padding latéral vaut la moitié du vide restant (--card-w) : sans ça, la 1re
et la dernière carte ne peuvent PHYSIQUEMENT pas atteindre le centre (il
faudrait un scrollLeft négatif) et resteraient les seules décalées.
scroll-padding-inline supprimé : il ne servait qu'à rattraper un bug du snap
"start" (scrollLeft qui valait 22.5px au repos, fragment blanc au bord
gauche) - avec l'ancrage centré, la position de repos de la 1re carte est
exactement scrollLeft:0. */
.stackv__piste{
--card-w:min(320px,80vw);
width:100%;
display:flex; gap:14px;
overflow-x:auto; -webkit-overflow-scrolling:touch;
overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
scrollbar-width:none;
padding:6px calc((100% - var(--card-w)) / 2) 6px;
/* affordance de bord : montre qu'il y a d'autres cartes à swiper */
mask-image:linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
-webkit-mask-image:linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
.stackv__piste::-webkit-scrollbar{ display:none; }
.stackv__card{
position:relative; left:auto; top:auto;
flex:0 0 auto; width:var(--card-w,min(320px,80vw)); margin:0;
scroll-snap-align:center;
transform:none;
}
/* Flèches ← → existantes (main.js) recâblées par mobile.js pour scroller la
piste d'une carte -> ALTERNATIVE VISIBLE au geste de swipe (jamais le
seul chemin), posées sous le carrousel plutôt que dans le tas de cartes. */
/* LOT 1bis (22/07), réparation : les 2 flèches étaient groupées au centre de la piste
(navRow simple flex, centré par align-items:center du parent .stackv__stage) -> mesurées
PILE dans l'axe du burger flottant, cas exactement interdit par « la zone réservée du
burger ». Écartées aux 2 bords du carrousel (space-between sur toute la largeur).
LOT 2 (22/07, pilule) : la flèche de remontée n'est plus un élément flottant séparé à
droite (right:clamp(...)) - elle est désormais À L'INTÉRIEUR de la pilule, centrée en
bas. Le padding-right dédié au scroll-top devient donc caduc ; les 2 côtés reprennent la
MÊME marge que .stackv__piste, symétrique - les flèches restent de toute façon largement
à l'écart du faible encombrement horizontal de la pilule (centrée, ~220px), qu'importe où
la section défile sous elle. */
.stackv__navrow{
display:flex; width:100%;
justify-content:space-between; align-items:center;
padding-inline: clamp(16px,6vw,28px);
}
.stackv__nav{
position:static; display:flex;
align-items:center; justify-content:center; /* réparation : centre le chevron SVG dans le
cercle - sans ces 2 lignes, le display:flex (posé ici pour sortir .stackv__nav de son
position:absolute desktop) perd le place-items:center de style.css -> le SVG restait
flush au bord de départ (justify-content:normal = flex-start), mesuré collé au bord gauche
du bouton (24px d'icône dans 44px de bouton, 0px de marge à gauche contre 20px à droite). */
line-height:1;
width:44px; height:44px; /* cible tactile mini */
transform:none;
}
/* ⚠️ DEUX LIGNES VENUES D'UNE REGLE MIXTE (`mobile.css:909-915`), partagee avec
`.trip__tag`, `.depforts__grid .trip` et `.trip--light` — dont les parts sont
dans `components.css` et `blocs/depforts.css`. Ne garder ici que la part
polaroid : le ruban deborde de 27 px du cadre blanc en desktop, ce qui sortait
de l'ecran sous 1024 px. */
.stackv__photo .trip__tag{ right:0; border-radius:6px 6px 0 0; }
.stackv__card{ overflow:hidden; }
/* `mobile.css:989` — « Voir le voyage » recentre dans le polaroid. En desktop le
`margin-left:auto` le pousse a droite ; dans la piste mobile le pied ne porte que lui. */
.stackv__piste .stackv__cta{ margin-inline:auto; }
}
/* ⚠️ ET UNE DERNIERE, DANS `@media (hover:none)` (`mobile.css:819`) : la fleche ne
doit pas rester en teinte foncee apres un tap. Son commentaire d'origine explique
l'absence de `transform` ici — sous 1024 px le repos de `.stackv__nav` n'est plus
`translateY(-50%)` mais `none` (carrousel a plat) ; le redeclarer au survol la
ferait sauter au tap. En ne le declarant pas, c'est la regle de repos qui gagne
dans chaque contexte. */
@media (hover:none){
.stackv__nav:hover{ background:var(--jaune); box-shadow:0 14px 34px -10px rgba(0,0,0,.6); }
}