, pas des : cibler `> div`
n'aurait rien peint du tout sans qu'aucune règle ne paraisse fausse. */
.duo > * {
background: var(--surface); border: 1px solid var(--trait);
border-radius: var(--rayon); padding: 1.4rem 1.5rem;
}
.duo h3 { font-size: var(--t-lg); margin-bottom: var(--e-court); }
.duo ul { list-style: none; padding: 0; margin: 0; }
.duo li {
display: flex; gap: .6rem; align-items: flex-start;
font-size: var(--t-sm); color: var(--texte-doux); margin-bottom: .5rem;
}
.duo svg { width: 1rem; height: 1rem; flex: none; margin-top: .34rem; }
.duo--oui svg { color: var(--menthe); }
.duo--non svg { color: var(--texte-tenu); }
/* --- 13. Galeries et mosaïques ------------------------------------------- */
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; }
.galerie img {
width: 100%; aspect-ratio: 1; object-fit: cover;
border-radius: var(--rayon-court);
}
.galerie > :first-child { grid-column: span 2; grid-row: span 2; }
.galerie > :first-child img { aspect-ratio: 1; border-radius: var(--rayon); }
/* La mosaïque d'ouverture d'une fiche : une grande image et deux petites.
La première passe en arche — c'est une ouverture de page. */
.mosaique { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr;
gap: var(--e-court); }
.mosaique img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
border-radius: var(--rayon-court); height: 100%; }
.mosaique > :first-child { grid-column: span 2; grid-row: span 2; }
.mosaique > :first-child img { aspect-ratio: 16 / 11; border-radius: var(--arche-douce); }
/* --- 14. Catalogue et filtres -------------------------------------------- */
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filtre {
font-family: var(--titre); font-weight: 600; font-size: var(--t-sm);
background: transparent; color: var(--texte-doux);
border: 1.5px solid var(--trait-fort); border-radius: var(--pilule);
padding: .55rem 1.05rem; cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
.filtre:hover { border-color: var(--accent); color: var(--accent); }
.filtre[aria-pressed="true"] {
background: var(--accent); border-color: var(--accent); color: var(--sur-accent);
}
.filtres__compte {
font-family: var(--titre); font-weight: 600; font-size: var(--t-sm);
color: var(--texte-tenu); margin-left: auto;
}
/* --- 15. Questions ------------------------------------------------------- */
.qr { border-bottom: 1px solid var(--trait); }
.qr summary {
cursor: pointer; list-style: none; padding: 1.05rem 2.4rem 1.05rem 0;
font-family: var(--titre); font-weight: 600; font-size: var(--t-lg);
position: relative; color: var(--texte);
}
.qr summary::-webkit-details-marker { display: none; }
.qr summary::after {
content: ""; position: absolute; right: .4rem; top: 1.5rem;
width: .75rem; height: .75rem;
border-right: 2px solid var(--action); border-bottom: 2px solid var(--action);
rotate: 45deg; transition: rotate .2s;
}
.qr[open] summary::after { rotate: -135deg; }
.qr summary:hover { color: var(--accent); }
.qr__reponse { padding-bottom: 1.15rem; color: var(--texte-doux); max-width: 70ch; }
/* --- 16. Formulaire ------------------------------------------------------ */
.form { display: grid; gap: var(--e-moyen); }
.duo-champs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-moyen); }
.champ { display: grid; gap: .4rem; }
.champ label { font-family: var(--titre); font-weight: 600; font-size: var(--t-sm); }
.champ .req { color: var(--action); }
.champ input, .champ select, .champ textarea {
font: inherit; font-size: var(--t-md); color: var(--texte);
background: var(--surface); border: 1.5px solid var(--trait-fort);
border-radius: var(--rayon-court); padding: .75rem .9rem; width: 100%;
transition: border-color .15s, box-shadow .15s;
}
.champ textarea { min-height: 9rem; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-tenu);
}
.champ__aide { font-size: var(--t-xs); color: var(--texte-tenu); margin: 0; }
.champ input[type="checkbox"] {
width: 1.5rem; height: 1.5rem; min-width: 1.5rem; flex: none;
accent-color: var(--action); cursor: pointer;
}
.champ--erreur input, .champ--erreur select, .champ--erreur textarea { border-color: var(--action); }
/* Le piège à robots : masqué SANS coordonnée hors écran. « left:-9999px »
élargit la boîte du document et fait déborder la page horizontalement — un
défaut invisible à l'œil mais bien réel, et présent sur toutes les largeurs. */
.pot-de-miel {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.message {
border-radius: var(--rayon-court); padding: .9rem 1.1rem; margin: 0;
font-size: var(--t-sm); border: 1.5px solid;
}
.message--ok { background: #E8F5EF; border-color: var(--menthe); color: #0A5B46; }
.message--ko { background: #FCEAE4; border-color: var(--action); color: var(--corail-fonce); }
/* --- 17. Crédits photo --------------------------------------------------- */
.credit-photo {
font-family: var(--mono); font-size: var(--t-xs); color: var(--texte-tenu);
margin-top: .5rem;
}
.vedette { font-weight: 700; }
.classe { display: inline-block; }
/* --- 18. Pied ------------------------------------------------------------ */
.pied {
background: var(--fond-plein); color: #BFD6E4;
padding-block: var(--e-bloc) var(--e-large); margin-top: 0;
/* Le pied est un fond sombre : on y REDÉFINIT les jetons de texte plutôt que
de repeindre chaque règle. Sans cela, un style en ligne du gabarit
(color:var(--texte-doux)) posait du gris foncé sur du bleu nuit — 1,78:1,
illisible, et invisible à la relecture du CSS puisque la faute est ailleurs. */
--texte-doux: #C6DCE9;
--texte-tenu: #9DBACD;
--action: var(--sable-clair);
}
.pied a { color: #DCEAF3; text-decoration: none; }
.pied a:hover { color: var(--sable-clair); }
.pied .marque { color: #fff; }
.pied .marque__nom small { color: var(--sable-clair); }
.pied__grille {
display: grid; grid-template-columns: 1.5fr repeat(3, 1fr);
gap: var(--e-large); padding-bottom: var(--e-large);
}
.pied__grille ul { list-style: none; padding: 0; margin: 0; }
.pied__grille li { margin-bottom: .5rem; font-size: var(--t-sm); }
.pied-titre {
font-family: var(--titre); font-weight: 600; font-size: var(--t-xs);
letter-spacing: .17em; text-transform: uppercase; color: var(--sable-clair);
margin: 0 0 var(--e-court);
}
.pied__signature { color: #93B2C6; }
.pied__signature a { border-bottom: 1px solid rgb(255 255 255 / .28); }
.pied__bas {
border-top: 1px solid rgb(255 255 255 / .14); padding-top: var(--e-moyen);
display: flex; justify-content: space-between; gap: var(--e-moyen);
flex-wrap: wrap; font-size: var(--t-xs); color: #93B2C6;
}
/* --- 19. Divers ---------------------------------------------------------- */
.rail { display: flex; gap: var(--e-court); overflow-x: auto; padding-bottom: .5rem; }
.plaque--ouverture { justify-self: end; width: 100%; }
/* --- 20. Adaptations ----------------------------------------------------- */
@media (max-width: 1080px) {
.bento { grid-template-columns: repeat(2, 1fr); }
.case--haute { grid-row: auto; }
.grille-plaques { grid-template-columns: repeat(2, 1fr); }
/* Les fiches de LIEU portent l'arche, les fiches d'excursion non : le motif
marque ce qui est un endroit, pas ce qui est un produit. Une arche partout
ne signifierait plus rien. */
.fiche--lieu .fiche__vue { padding: .5rem .5rem 0; }
.fiche--lieu .fiche__vue img { border-radius: var(--arche-douce); }
.fiche--vedette { grid-column: span 2; }
}
@media (max-width: 900px) {
.nav--principale, .bouton--action-entete { display: none; }
.burger { display: inline-flex; }
.ouverture__grille { grid-template-columns: 1fr; }
.plaque--ouverture { order: -1; max-width: 30rem; margin-inline: auto; }
.tour__corps { grid-template-columns: 1fr; }
.carte-resa { position: static; }
.bande { grid-template-columns: repeat(2, 1fr); }
.pied__grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.grille-plaques, .bento, .duo, .duo-champs { grid-template-columns: 1fr; }
.mosaique { grid-template-columns: 1fr 1fr; }
.mosaique > :first-child { grid-column: span 2; grid-row: auto; }
.case--large, .fiche--vedette { grid-column: auto; }
.galerie { grid-template-columns: 1fr 1fr; }
.galerie > :first-child { grid-column: span 2; grid-row: auto; }
.entete-section { flex-direction: column; align-items: flex-start; }
.pied__grille { grid-template-columns: 1fr; gap: var(--e-moyen); }
.filtres__compte { margin-left: 0; width: 100%; }
}
/* --- 21. Mouvement ------------------------------------------------------- */
/* Le contenu est VISIBLE au repos : l'animation ne fait que le monter un peu,
jamais apparaître depuis l'opacité zéro. Une page qui attend un observateur
pour s'afficher est une page vide au premier coup d'œil, et à l'impression. */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.apparait {
animation: monte linear both;
animation-timeline: view();
animation-range: entry 0% entry 55%;
}
@keyframes monte { from { translate: 0 22px; } to { translate: 0 0; } }
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important; animation-iteration-count: 1 !important;
transition-duration: .001ms !important; scroll-behavior: auto !important;
}
}
@media print {
.entete, .tiroir, .bandeau, .appel, .evitement, .burger { display: none !important; }
body { background: #fff; color: #000; }
.fiche, .case, .carte-resa { break-inside: avoid; }
}