/* ==========================================================================
assets/css/accueil.css
--------------------------------------------------------------------------
Les 6 blocs de section propres à l'accueil (ou disponibles partout pour
.final/.cta) : volet, séjour, mosaïque, avis, dispo, appel final.
========================================================================== */
/* --- Cadre de contenu (largeur max cohérente sur grand écran) ------------
Sous 1400px + 2×rail : comportement inchangé, padding = var(--rail).
Au-delà : le padding grandit pour recentrer le contenu dans un cadre de
1400px, au lieu de l'étirer à l'infini sur un écran large. Remplace
var(--rail) par var(--idh-cadre) dans le padding-inline des sections
pleine largeur ci-dessous (volet, séjour, mosaïque, avis, dispo, final).
========================================================================== */
:root {
--idh-cadre: max(var(--rail), calc((100% - 1400px) / 2));
}
/* ==========================================================================
VOLETS — [idh_volets]
========================================================================== */
.volet { position: relative; isolation: isolate; min-height: min(86svh, 760px); display: flex; align-items: flex-end; overflow: hidden; }
/* display:grid + stretch : l' (élément remplacé) est étirée pour REMPLIR
toute la hauteur du média — un height:100% ne se résout pas ici (hauteur du
.volet en `auto`), et top:0/bottom:0 ne suffit pas sur un élément remplacé. */
.volet__media { position: absolute; inset: 0; z-index: -2; display: grid; }
.volet__media img {
grid-area: 1 / 1; align-self: stretch; justify-self: stretch;
min-width: 0; min-height: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center; display: block;
}
.volet::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10,17,13,.82), rgba(10,17,13,.24) 52%, rgba(10,17,13,.08)); }
.volet__corps { padding: clamp(46px, 8vh, 96px) var(--idh-cadre); color: #fff; }
.volet__corps h2 { color: #fff; max-width: 18ch; }
/* Corps de texte du volet (paragraphe sans classe) : blanc plein. `:not([class])`
et non `:last-of-type` — le CTA .idh-section-cta est désormais le dernier
. */
.volet__corps > p:not([class]) { margin-top: 20px; color: #fff; max-width: 62ch; font-size: 1rem; line-height: 1.6; }
.volet .section-kicker { color: var(--idh-accent); }
.volet .section-sub { color: rgba(255,255,255,.78); }
.volet__chiffres { display: flex; flex-wrap: wrap; gap: 10px 34px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.24); }
.volet__chiffres div { color: #fff; }
.volet__chiffres b { display: block; font-family: var(--idh-font-display); font-size: 1.55rem; font-weight: 600; letter-spacing: -.03em; }
.volet__chiffres span { font-size: .8rem; color: rgba(255,255,255,.7); }
.volet--droite { justify-content: flex-end; text-align: right; }
.volet--droite .volet__corps h2, .volet--droite .volet__corps > p { margin-left: auto; }
.volet--droite .section-kicker { justify-content: flex-end; }
.volet--droite .section-sub { margin-left: auto; }
.volet--droite .volet__chiffres { justify-content: flex-end; }
@media (max-width: 820px) {
.volet { min-height: 64svh; }
}
/* ==========================================================================
SÉJOUR — [idh_sejour]
========================================================================== */
.sejour { margin-top: clamp(80px, 12vh, 150px); background: var(--idh-primary); color: var(--idh-on-primary); position: relative; z-index: 1; }
.sejour h2 { color: var(--idh-on-primary); }
.sejour .section-sub { color: rgba(255,255,255,.78); }
/* Toujours un rectangle net : contrairement aux médias produits/territoire,
la photo du séjour n'est jamais découpée par le kit d'identité (pas de
--idh-media-radius / --idh-media-clip ici, quel que soit le kit actif). */
.sejour__photo,
.etape__img,
.etape__img img { border-radius: 0; clip-path: none; }
.sejour__photo { height: clamp(240px, 42vh, 460px); background-size: cover; background-position: center; background-attachment: fixed; }
.sejour__contenu { padding: clamp(60px, 9vh, 110px) var(--idh-cadre) clamp(70px, 10vh, 130px); }
.sejour h2 { max-width: 16ch; }
.sejour__chapo { margin-top: 22px; max-width: 48ch; opacity: .82; color: inherit; }
.etapes {
margin-top: clamp(44px, 7vh, 78px); display: grid;
/* Autant de colonnes que d'étapes réellement saisies (2, 3 ou 4) — pas de
4 colonnes fixes : avec 2 ou 3 items, les cases manquantes restaient
vides (grand pavé gris à droite). Même correctif que .hero__today
(components.css) : grid-auto-flow:column laisse la grille suivre le
nombre d'enfants au lieu d'un repeat() figé. */
grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px;
background: rgba(242,243,238,.2); border: 1px solid rgba(242,243,238,.2);
/* IDH · 1 → réglages généraux, idh_charte_rayon_image → --idh-radius
(includes/tokens.php). overflow:hidden : sans ça, les cartes .etape
(coins droits) dépasseraient du cadre arrondi — même correctif que
.hero__today (components.css). */
border-radius: var(--idh-radius);
overflow: hidden;
}
.etape { background: var(--idh-primary); padding: 0 0 28px; display: flex; flex-direction: column; }
.etape__img { margin: 0; overflow: hidden; background: rgba(255,255,255,.06); }
.etape__img img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; display: block; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.etape:hover .etape__img img { transform: scale(1.05); }
.etape__quand { margin: 22px 26px 10px; color: var(--idh-accent); }
.etape h3 { margin: 0 26px 10px; color: var(--idh-on-primary); font-size: 1.22rem; }
.etape p { margin: 0 26px; font-size: .93rem; opacity: .82; color: inherit; }
/* En dessous de 1000px, grille explicite en lignes de 2 (quel que soit le
nombre d'étapes) — grid-auto-flow:column empilerait sinon tout sur une
seule ligne, beaucoup trop étroite. */
@media (max-width: 1000px) { .etapes { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .etapes { grid-template-columns: 1fr; } .sejour__photo { background-attachment: scroll; } }
/* ==========================================================================
MOSAÏQUE / TERRITOIRE — [idh_mosaique]
--------------------------------------------------------------------------
Deux blocs dans la même section :
1. .territoire__tete / .onglets / .piste → widget à onglets adresses/
randos/agenda (idh_territoire_* dans components/mosaique.php).
2. .mosaique__grille → grille de photos, inchangée.
Le padding horizontal du bloc 1 est full-bleed volontaire (le .piste
déborde du cadre pour laisser deviner la carte suivante) : la section
n'a donc plus de padding-inline propre, chaque enfant porte le sien.
========================================================================== */
.mosaique { padding: clamp(40px, 6vh, 80px) 0 clamp(60px, 9vh, 110px); position: relative; z-index: 1; }
/* CTA « Découvrir notre destination » ([idh_destination]) : cadré sur le rail de
contenu comme l'en-tête et la grille — .mosaique n'a pas de padding-inline
propre (chaque enfant porte le sien), sinon le bouton s'étale plein écran. */
.mosaique > .idh-section-cta { padding-inline: var(--idh-cadre, var(--rail)); }
/* --- En-tête + compteur -------------------------------------------------- */
.territoire__tete {
padding-inline: var(--idh-cadre, var(--rail));
display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.territoire__compte { margin: 0 0 16px; color: var(--idh-ink-soft); font-size: .85rem; }
.territoire__tete .section-sub,
.territoire__tete p.venue:last-child { max-width: 46ch; }
/* --- Lien « Voir tous les … » (remplace les flèches de défilement) -------- */
.territoire__voir-tout {
display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
font-size: .9rem; font-weight: 600; color: var(--idh-ink);
padding-bottom: 2px; border-bottom: 1px solid currentColor;
transition: color .3s, gap .3s;
}
.territoire__voir-tout svg { flex-shrink: 0; transition: transform .3s; }
.territoire__voir-tout:hover { color: var(--idh-primary); }
.territoire__voir-tout:hover svg { transform: translateX(3px); }
/* --- Onglets -------------------------------------------------------------- */
.onglets {
display: flex; gap: 8px; flex-wrap: wrap;
padding-inline: var(--idh-cadre, var(--rail));
margin: 26px 0 30px;
}
/* background/color en !important : le