/* Site vitrine : accueil de la collection et page de vente d'un guide.
   Chargé après charte.css (la grille de la collection) et pays-<guide>.css (couleurs et motifs du pays). */
html { font-size: 17px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.site { margin: 0; line-height: 1.55; overflow-x: clip; }
.site *, .site *::before, .site *::after { box-sizing: border-box; }
.site img { display: block; max-width: 100%; }
.site ul, .site ol { margin: 0; }
:root { --gouttiere: max(16px, 4vw); }
@media (min-width: 1300px) { :root { --gouttiere: 48px; } }
.cadre { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gouttiere); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Lettres */
.titre-affiche { font-size: clamp(2.7rem, 7.5vw, 5.6rem); }
.titre-affiche em { display: inline-block; margin-left: .12em; font: 400 .6em/1 var(--script); font-style: normal; text-transform: none; color: var(--destination-texte); transform: rotate(-4deg) translateY(-.08em); }
.surtitre { margin-bottom: .8rem; font: 800 .8rem/1.2 var(--texte); letter-spacing: .16em; text-transform: uppercase; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 3.1rem; padding: .85rem 1.5rem; border: 2.5px solid var(--encre); border-radius: 999px; font: 800 1rem/1 var(--texte); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translate(-2px, -2px); }
.btn--amarillo { background: var(--moutarde); color: var(--encre); box-shadow: 4px 4px 0 var(--encre); }
.btn--amarillo:hover { box-shadow: 6px 6px 0 var(--encre); }
.btn--ligne { border-color: currentColor; color: inherit; }
.btn--encre { background: var(--encre); color: var(--papier); }
.btn--petit { min-height: 2.5rem; padding: .55rem 1.1rem; font-size: .9rem; background: var(--moutarde); color: var(--encre); }

/* Barre de navigation */
.barre { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 1240px; margin: 0 auto; padding: .9rem var(--gouttiere); }
.barre__logo { color: inherit; text-decoration: none; }
.barre .logo { font-size: 1.5rem; color: inherit; }
.barre nav { display: flex; align-items: center; gap: 1.5rem; font: 700 .95rem var(--texte); }
.barre nav a:not(.btn) { color: inherit; text-decoration: none; }
.barre nav a:not(.btn):hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 820px) { .barre nav a:not(.btn) { display: none; } }

/* ---------- Page du guide ---------- */

/* Ouverture : affiche rose, fanions, baie cintrée sur les arcs « Amor » */
.mx-haut { position: relative; overflow: hidden; background: var(--rosa); color: var(--cal); }
.mx-haut .picado { color: var(--cal); font-size: clamp(10px, 1.1vw, 14px); }
.mx-haut .logo__mot b { color: var(--amarillo); }
.mx-tete { --bas: 4.5rem; display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; padding-block: 1.5rem var(--bas); }
.mx-tete__auteur { font: 800 .85rem var(--texte); letter-spacing: .14em; text-transform: uppercase; }
.mx-tete__auteur b { margin-left: .2em; font: 400 2rem/1 var(--script); letter-spacing: 0; text-transform: none; color: var(--amarillo); }
.mx-titre { margin: 1.1rem 0 1.4rem; font-size: clamp(3.4rem, 10.5vw, 9.4rem); line-height: .86; color: var(--cal); }
.mx-titre .l1, .mx-titre .l2, .mx-titre .amp { display: block; }
.mx-titre .amp { margin: .02em 0 .04em .04em; font: 400 .55em/.95 var(--script); text-transform: none; color: var(--amarillo); }
.mx-titre .l2 { font-size: .6em; color: var(--tinta); }
.mx-tete__sous { max-width: 30ch; font: 600 clamp(1.1rem, 1.8vw, 1.35rem)/1.35 var(--texte); }
.mx-tete__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.mx-tete__actions .btn--ligne { border-color: var(--cal); }
.mx-tete__prix { margin-top: 1.3rem; font-size: 1rem; }
.mx-tete__prix b { font: 400 1.35em var(--script); color: var(--amarillo); }
.mx-vue { position: relative; align-self: end; justify-self: center; width: 100%; max-width: 500px; aspect-ratio: 4 / 5; }
.mx-vue__amor { position: absolute; left: -14%; right: -14%; bottom: calc(-1 * var(--bas)); height: 60%; border-radius: 999px 999px 0 0; background: var(--amor); }
.mx-vue__baie { position: absolute; inset: 0 7%; border: 8px solid var(--cal); box-shadow: 0 30px 60px rgba(28, 15, 23, .3); }
.mx-vue__baie img { object-position: 24% 50%; }
.mx-vue .sello { position: absolute; left: -5%; top: 9%; width: clamp(120px, 14vw, 172px); transform: rotate(-8deg); filter: drop-shadow(4px 4px 0 var(--tinta)); }
@media (max-width: 860px) {
  .mx-tete { --bas: 5.5rem; grid-template-columns: 1fr; }
  .mx-vue { max-width: 380px; }
  .mx-vue .sello { left: 0; }
}

/* Bandeau des étapes, qui défile */
.ticker { overflow: hidden; padding: .85rem 0; background: var(--tinta); color: var(--amarillo); }
.ticker__piste { display: flex; align-items: center; gap: 1.4rem; width: max-content; padding-right: 1.4rem; animation: ticker 38s linear infinite; font: 900 clamp(1.5rem, 3vw, 2.3rem)/1 var(--titre); font-stretch: 62%; text-transform: uppercase; letter-spacing: .02em; }
.ticker__sep { flex: none; width: .7em; height: .7em; color: var(--rosa-vif); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Ce qu'il y a dedans */
.mx-dedans { padding-block: 5rem 4rem; }
.cifras { list-style: none; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin-top: 2.4rem; padding: 0; }
.cifra { display: grid; align-content: space-between; gap: 1.6rem; min-height: 15rem; padding: 1.4rem 1.4rem 1.6rem; border: 2.5px solid var(--tinta); border-radius: 18px; box-shadow: 6px 6px 0 var(--tinta); }
.cifra:nth-child(odd) { justify-items: center; padding-top: 3rem; text-align: center; border-radius: 999px 999px 18px 18px; }
.cifra b { font: 400 clamp(4.5rem, 8vw, 6.5rem)/.9 var(--script); }
.cifra span { max-width: 18ch; font: 800 1.1rem/1.2 var(--texte); }
.cifra--rosa { background: var(--rosa); color: #fff; }
.cifra--anil { background: var(--anil); color: var(--cal); }
.cifra--turquesa { background: var(--turquesa); color: var(--tinta); }
.cifra--amarillo { background: var(--amarillo); color: var(--tinta); }
.mx-dedans__note { display: flex; align-items: center; gap: .6rem; margin-top: 2rem; font: 700 1.05rem var(--texte); }
.mx-dedans__note .picto { width: 1.6em; height: 1.6em; color: var(--rosa-texte); }

/* La route : la carte et les cinq étapes en baies cintrées */
.mx-ruta { padding-block: 5rem; background: var(--anil); color: var(--cal); }
.mx-ruta .titre-affiche { color: var(--cal); }
.mx-ruta .titre-affiche em { color: var(--amarillo); }
.mx-ruta__tete { display: grid; gap: 1rem; max-width: 46rem; }
.mx-ruta__tete p { font-size: 1.12rem; }
.mx-ruta__carte { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.5rem; align-items: end; margin-top: 2rem; }
.mx-ruta__carte figure { margin: 0; }
.mx-ruta .carte__pays { fill: rgba(255, 244, 228, .1); stroke: var(--cal); }
.mx-ruta .carte__vol { stroke: var(--amarillo); stroke-width: 3; }
.mx-ruta .carte__cadre, .mx-ruta .carte__route { stroke: var(--amarillo); }
.mx-ruta .carte__etape circle { fill: var(--rosa); stroke: var(--cal); }
.mx-ruta .carte__nom, .mx-ruta .carte__nomz, .mx-ruta .carte__nomr, .mx-ruta .carte__point { fill: var(--cal); }
.mx-ruta .carte__rappel line { stroke: var(--cal); }
.mx-ruta .carte__rappel circle { fill: var(--rosa); stroke: var(--cal); }
.mx-ruta .carte__baja { fill: var(--amarillo); }
.mx-ruta .carte__mer, .mx-ruta .carte__merz, .mx-ruta .carte__region, .mx-ruta .carte__petit { fill: rgba(255, 244, 228, .72); }
.mx-ruta .carte__zoom { padding: .6rem; border: 2px dashed var(--amarillo); border-radius: 12px; }
.mx-ruta .carte__zoom figcaption { margin-top: .3rem; font: 400 1.05rem var(--script); color: var(--amarillo); }
.etapes { list-style: none; display: grid; gap: 1.2rem; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 3rem; padding: 0; }
.etape__baie { aspect-ratio: 3 / 4; border: 4px solid var(--cal); }
.etape__jours { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin-top: .9rem; font: 800 .8rem/1.2 var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--amarillo); }
.etape__jours small { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--cal); }
.etape__jours .pin { font-size: .85rem; letter-spacing: 0; }
.etape h3 { margin-top: .35rem; font-size: 1.55rem; font-weight: 900; font-stretch: 62%; line-height: .95; text-transform: uppercase; }
.etape { position: relative; }
.etape__baie { display: block; }
.etape__porte { all: inherit; display: inline; padding: 0; cursor: pointer; text-align: left; }
.etape__porte::after { content: ""; position: absolute; inset: 0; }
.etape__porte:focus-visible { outline: none; }
.etape:has(.etape__porte:focus-visible) .etape__baie { outline: 3px solid var(--amarillo); outline-offset: 3px; }
.etape .etape__baie { transition: transform .2s ease, border-color .2s ease; }
.etape:hover .etape__baie, .etape:has([aria-expanded="true"]) .etape__baie { transform: translateY(-4px); border-color: var(--amarillo); }
.etape-ouvre { margin-top: 1.6rem; padding: 1.6rem; border: 2px dashed var(--amarillo); border-radius: 12px; }
.etape-ouvre[hidden] { display: none; }
.etape-ouvre__tete { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; }
.etape-ouvre__tete h3 { font-size: 1.9rem; font-weight: 900; font-stretch: 62%; line-height: .95; text-transform: uppercase; }
.etape-ouvre__fermer { margin-left: auto; padding: .4rem .9rem; border: 2px solid var(--cal); border-radius: 999px; background: none; color: inherit; font: 800 .8rem/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.etape-ouvre .etape-ouvre__points { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 0; padding: 0; }
.etape-ouvre__points li { padding: .35rem .8rem; border-radius: 999px; background: var(--amarillo); color: var(--tinta); font: 800 .85rem/1 var(--texte); }
.etape-ouvre .etape-ouvre__spots { list-style: none; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); margin: 1.2rem 0 0; padding: 0; }
.etape-ouvre__spots .spot__nom { font-size: 1.05rem; }
.etape-ouvre__suite { margin-top: 1.2rem; font-size: .95rem; color: rgba(255, 244, 228, .85); }
.etape-ouvre__suite a { color: var(--amarillo); }
.etape-ouvre__corps { display: grid; gap: 1.6rem 2rem; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; margin-top: 1.2rem; }
.etape-ouvre__carte .mx-ruta__carte { margin-top: 0; gap: 1rem; }
.etape-ouvre__carte .carte__zoom { padding: .4rem; }
.etape-ouvre__carte .carte__zoom figcaption { font-size: .9rem; }
.etape-ouvre__carte .carte__etape { opacity: .3; }
.etape-ouvre__carte .carte__etape--actif { opacity: 1; }
.etape-ouvre__carte .carte__etape--actif circle { fill: var(--amarillo); stroke: #fff; stroke-width: 3; }
.etape-ouvre__carte .carte__etape--actif text { fill: var(--tinta); }
.etape-ouvre .etape-ouvre__texte .etape-ouvre__points { margin-top: 0; }
@media (max-width: 900px) { .etape-ouvre__corps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .mx-ruta__carte { grid-template-columns: 1fr; }
  .mx-ruta .carte__zoom { max-width: 320px; }
  .etapes { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(190px, 58vw); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; }
  .etape { scroll-snap-align: start; }
}

/* Bucket list en cartes de lotería */
.mx-bucket { padding-block: 4.5rem 5.5rem; background: var(--amarillo); color: var(--tinta); }
.mx-bucket__grille { display: grid; gap: 2.5rem 3rem; grid-template-columns: minmax(0, .7fr) minmax(0, 2fr); align-items: start; }
.mx-bucket__tete { position: sticky; top: 2rem; }
.mx-bucket .titre-affiche { font-size: clamp(3.4rem, 7vw, 6.2rem); }
@media (max-width: 900px) { .mx-bucket__grille { grid-template-columns: 1fr; } .mx-bucket__tete { position: static; } }
.mx-bucket__chapo { max-width: 34ch; margin-top: 1rem; font: 700 1.2rem/1.35 var(--texte); }
.loteria { list-style: none; display: grid; gap: 2.2rem 1.6rem; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }
@media (max-width: 700px) { .loteria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1rem; } .carta__nom { font-size: .98rem; min-height: 4.6rem; } }
.carta { position: relative; padding: .7rem .7rem 0; background: var(--cal); border: 3px solid var(--tinta); box-shadow: 7px 7px 0 var(--tinta); transition: transform .2s; }
.carta:nth-child(3n+1) { transform: rotate(-2deg); }
.carta:nth-child(3n+2) { transform: rotate(1.4deg) translateY(.6rem); }
.carta:nth-child(3n) { transform: rotate(-.6deg); }
.carta:hover { transform: none; }
.carta img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 2.5px solid var(--tinta); }
.carta__n { position: absolute; z-index: 1; top: .25rem; left: .25rem; display: grid; place-items: center; min-width: 2.6rem; height: 2.6rem; background: var(--cal); border: 2.5px solid var(--tinta); font: 400 1.5rem/1 var(--script); color: var(--rosa-texte); }
.carta__nom { display: grid; place-items: center; min-height: 5.4rem; padding: .7rem .2rem .9rem; text-align: center; font: 900 1.12rem/1.02 var(--titre); font-stretch: 68%; letter-spacing: .01em; text-transform: uppercase; }

/* Jour 1 heure par heure */
.mx-jour { display: grid; gap: 3rem; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; padding-block: 5.5rem; }
.mx-jour__tete { position: sticky; top: 2rem; display: grid; gap: 1rem; }
.mx-jour__tete .titre-affiche em { display: block; margin: .15em 0 0; font-size: .62em; }
.mx-jour__tete > p:last-child { max-width: 34ch; font-size: 1.1rem; color: var(--tinta-douce); }
.horaire { list-style: none; position: relative; display: grid; gap: 2.2rem; padding: 0; }
.horaire::before { content: ''; position: absolute; left: 2.9rem; top: 1rem; bottom: 1rem; width: 6px; margin-left: -3px; background: radial-gradient(circle, var(--rosa) 0 2.2px, transparent 2.7px) center top / 6px 12px repeat-y; }
.moment { position: relative; display: grid; grid-template-columns: 5.8rem minmax(0, 1fr) auto; gap: 1.2rem; align-items: start; }
.moment__heure { position: relative; z-index: 1; justify-self: center; padding: .3rem .2rem; background: var(--cal); font: 400 1.55rem/1 var(--script); color: var(--rosa-texte); }
.moment__texte h3 { font-size: 1.5rem; font-weight: 900; font-stretch: 68%; line-height: 1; text-transform: uppercase; }
.moment__texte ul { list-style: none; display: grid; gap: .3rem; margin-top: .6rem; padding: 0; }
.moment__texte li::before { content: '→ '; font-weight: 800; color: var(--rosa-texte); }
.moment__photo { width: clamp(110px, 13vw, 160px); aspect-ratio: 3 / 4; border: 3px solid var(--tinta); }
.moment--vide .moment__heure { font-size: 1.2rem; }
@media (max-width: 860px) { .mx-jour { grid-template-columns: 1fr; } .mx-jour__tete { position: static; } }
@media (max-width: 520px) {
  .moment { grid-template-columns: 4.4rem minmax(0, 1fr); }
  .moment__photo { grid-column: 2; width: 100%; max-width: 240px; aspect-ratio: 4 / 3; }
  .horaire::before { left: 2.2rem; }
}

/* Les adresses : un défilé de baies */
.mx-adresses { padding-block: 5rem; background: var(--tinta); color: var(--cal); }
.mx-adresses .titre-affiche { color: var(--cal); }
.mx-adresses .titre-affiche em { color: var(--rosa-vif); }
.mx-adresses .cadre > p { max-width: 52ch; margin-top: 1rem; font-size: 1.1rem; color: rgba(255, 244, 228, .86); }
.vitrine { --bord: max(var(--gouttiere), calc((100% - 1240px) / 2 + var(--gouttiere))); list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(180px, 21vw, 240px); gap: 1.3rem; margin-top: 2.6rem; padding: 0 var(--bord) 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--bord); scrollbar-color: var(--rosa-vif) transparent; }
.spot { display: grid; gap: .45rem; align-content: start; scroll-snap-align: start; }
.spot__baie { aspect-ratio: 4 / 5; border: 3px solid var(--cal); }
.spot__nom { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; font: 900 1.3rem/1 var(--titre); font-stretch: 68%; text-transform: uppercase; }
.spot__nom .pin { font-size: .72rem; background: var(--rosa); color: #fff; box-shadow: none; }
.spot small { font-size: .9rem; color: rgba(255, 244, 228, .78); }

/* Prix : deux billets sur les arcs « Amor » */
.mx-precio { position: relative; overflow: hidden; padding-block: 5rem 6rem; background: var(--rosa); color: #fff; }
.mx-precio::after { content: ''; position: absolute; right: -10vw; bottom: 0; width: min(66vw, 840px); aspect-ratio: 2 / 1; border-radius: 999px 999px 0 0; background: var(--amor); }
.mx-precio__grille { position: relative; z-index: 1; display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.mx-precio .titre-affiche { color: #fff; }
.mx-precio .titre-affiche em { color: var(--amarillo); }
.mx-precio__tete > p { max-width: 40ch; margin: 1rem 0 1.6rem; font-size: 1.15rem; }
.boletos { display: grid; gap: 1.6rem; }
.boleto { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'type type' 'prix liste'; gap: .5rem 1.6rem; align-items: center; padding: 1.4rem 2rem 1.6rem; border-radius: 14px; background: var(--cal); color: var(--tinta); transform: rotate(1deg);
  -webkit-mask: radial-gradient(circle at 0 50%, #0000 15px, #000 16px) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 15px, #000 16px) 100% 0 / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, #0000 15px, #000 16px) 0 0 / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 15px, #000 16px) 100% 0 / 51% 100% no-repeat; }
.boleto--papier { background: var(--amarillo); transform: rotate(-1.5deg); }
.boleto__type { grid-area: type; font: 800 .82rem var(--texte); letter-spacing: .14em; text-transform: uppercase; color: var(--rosa-texte); }
.boleto--papier .boleto__type { color: var(--tinta); }
.boleto__prix { grid-area: prix; padding-right: 1.6rem; border-right: 3px dashed rgba(28, 15, 23, .3); font: 400 3.4rem/1 var(--script); }
.boleto ul { grid-area: liste; list-style: none; display: grid; gap: .3rem; padding: 0; font-weight: 700; }
.boleto li { display: flex; gap: .5rem; align-items: baseline; }
.boleto li::before { content: ''; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--rosa); transform: translateY(-.05rem); }
@media (max-width: 860px) { .mx-precio__grille { grid-template-columns: 1fr; } }
@media (max-width: 460px) {
  .boleto { grid-template-columns: 1fr; grid-template-areas: 'type' 'prix' 'liste'; padding-inline: 1.6rem; }
  .boleto__prix { padding: 0 0 .7rem; border-right: 0; border-bottom: 3px dashed rgba(28, 15, 23, .3); }
}

/* Formulaire d'inscription */
.inscription { display: grid; gap: .6rem; max-width: 34rem; }
.inscription > label:first-child { font: 800 .85rem var(--texte); letter-spacing: .1em; text-transform: uppercase; }
.inscription__ligne { display: flex; flex-wrap: wrap; gap: .6rem; }
.inscription input[type=email] { flex: 1 1 15rem; min-width: 0; min-height: 3.2rem; padding: .8rem 1.1rem; border: 2.5px solid var(--encre); border-radius: 999px; background: var(--papier); color: var(--encre); font: 600 1rem var(--texte); }
.inscription button { min-height: 3.2rem; padding: .8rem 1.5rem; border: 2.5px solid var(--encre); border-radius: 999px; background: var(--moutarde); color: var(--encre); font: 800 1rem var(--texte); cursor: pointer; box-shadow: 4px 4px 0 var(--encre); }
.inscription__accord { display: flex; align-items: start; gap: .55rem; font-size: .88rem; line-height: 1.4; }
.inscription__accord input { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--moutarde); }
.inscription__piege { position: absolute; left: -9999px; }

/* L'autrice */
.mx-autrice { display: grid; gap: 3.5rem; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); align-items: center; padding-block: 6rem; }
.mx-autrice__portrait { justify-self: center; width: 100%; max-width: 320px; aspect-ratio: 3 / 4; border: 6px solid var(--tinta); box-shadow: 14px 14px 0 var(--rosa); }
.mx-autrice__titre { margin-bottom: 1.4rem; font: 400 clamp(3rem, 7vw, 5.4rem)/1 var(--script); text-transform: none; color: var(--rosa-texte); }
.mx-autrice__texte p:not(.surtitre) { max-width: 56ch; font-size: 1.12rem; }
.mx-autrice__texte p + p { margin-top: .8rem; }
.mx-autrice__texte p:last-child { font-size: 1.3rem; font-weight: 800; }
@media (max-width: 760px) { .mx-autrice { grid-template-columns: 1fr; } }

/* Travel advisory */
.mx-advisory { padding-block: 5rem; background: var(--turquesa); color: var(--tinta); }
.mx-advisory__grille { display: grid; gap: 3rem; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.mx-advisory__offre { display: grid; place-content: center; gap: .2rem; width: clamp(180px, 22vw, 250px); aspect-ratio: 1; text-align: center; background: var(--cal); border: 3px solid var(--tinta); border-radius: 50%; box-shadow: 6px 6px 0 var(--tinta); transform: rotate(-6deg); }
.mx-advisory__offre b { font: 400 clamp(2.4rem, 4vw, 3.4rem)/1 var(--script); color: var(--rosa-texte); }
.mx-advisory__offre span { font: 900 1.45rem var(--titre); font-stretch: 70%; text-transform: uppercase; }
.mx-advisory__offre small { font-size: .85rem; font-weight: 600; }
.mx-advisory .titre-affiche em { color: var(--anil); }
.mx-advisory__accroche { margin: 1rem 0 .6rem; font: 800 1.35rem var(--texte); }
.mx-advisory__texte p + p { margin-top: .7rem; }
.mx-advisory__texte ul { display: grid; gap: .3rem; margin: .8rem 0; padding-left: 1.2rem; font-weight: 600; }
@media (max-width: 760px) { .mx-advisory__grille { grid-template-columns: 1fr; } }

/* Questions */
.mx-faq { padding-block: 5rem 6rem; }
.mx-faq details { max-width: 820px; padding: 1.2rem 0; border-bottom: 2.5px solid var(--tinta); }
.mx-faq details:first-of-type { margin-top: 2rem; border-top: 2.5px solid var(--tinta); }
.mx-faq summary { display: flex; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; font: 900 clamp(1.4rem, 2.6vw, 1.9rem)/1.05 var(--titre); font-stretch: 70%; text-transform: uppercase; }
.mx-faq summary::-webkit-details-marker { display: none; }
.mx-faq summary::after { content: '+'; font: 400 1.5em/.8 var(--script); color: var(--rosa-texte); }
.mx-faq details[open] summary::after { content: '–'; }
.mx-faq details p { max-width: 62ch; margin-top: .8rem; font-size: 1.08rem; color: var(--tinta-douce); }

/* Pied de page */
.pied { overflow: hidden; padding-bottom: 3rem; background: var(--encre); color: var(--papier); }
.pied .picado { color: var(--papier); font-size: clamp(9px, 1vw, 13px); }
.pied__corps { display: grid; gap: .8rem; padding-top: 2.5rem; }
.pied .logo { font-size: 2.2rem; color: var(--papier); }
.pied__signature { max-width: 22ch; font: 400 clamp(1.5rem, 3vw, 2.2rem)/1.15 var(--script); color: var(--moutarde); }
.pied a { color: var(--papier); }

/* ---------- Accueil de la collection ---------- */
.col-tete { display: grid; gap: 1.6rem 2.5rem; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: end; padding-block: 2.5rem 4.5rem; }
.col-titre { max-width: 12ch; font-size: clamp(3.6rem, 10vw, 8.6rem); line-height: .84; }
.col-baies { position: relative; height: clamp(320px, 36vw, 470px); }
.col-baie { position: absolute; width: 50%; aspect-ratio: 3 / 4; border: 5px solid var(--tinta); }
.col-baie--1 { left: 0; bottom: 0; box-shadow: 8px 8px 0 var(--rosa); }
.col-baie--2 { left: 25%; top: 0; z-index: 1; box-shadow: 8px 8px 0 var(--amarillo); }
.col-baie--3 { right: 0; bottom: 6%; z-index: 2; box-shadow: 8px 8px 0 var(--turquesa); }
.col-route, .col-tete__bas { grid-column: 1 / -1; }
@media (max-width: 860px) { .col-tete { grid-template-columns: 1fr; } .col-baies { width: 100%; max-width: 420px; height: 300px; } }
.col-route { width: 100%; height: clamp(50px, 8vw, 110px); overflow: visible; }
.col-route path { fill: none; stroke: var(--rosa); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1 16; vector-effect: non-scaling-stroke; }
.col-tete__bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.col-tete__bas p { max-width: 46ch; font-size: 1.2rem; font-weight: 500; }
.col-collection { padding-block: 2rem 5rem; }
.col-grille { display: grid; gap: 1.6rem; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); margin-top: 2rem; }
.affiche-mx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); grid-template-areas: 'picado picado' 'auteur baie' 'titre baie' 'pied baie'; grid-template-rows: auto auto auto 1fr; gap: 0 1.5rem; padding: 0 1.8rem 1.8rem; overflow: hidden; background: var(--rosa); color: var(--cal); border: 3px solid var(--tinta); border-radius: 22px; box-shadow: 8px 8px 0 var(--tinta); text-decoration: none; transition: transform .2s; }
.affiche-mx:hover { transform: translate(-3px, -3px); }
.affiche-mx .picado { grid-area: picado; margin-inline: -1.8rem; color: var(--cal); font-size: 10px; }
.affiche-mx__auteur { grid-area: auteur; margin-top: 1rem; }
.affiche-mx__auteur .logo { font-size: 1.3rem; color: var(--cal); }
.affiche-mx .logo__mot b { color: var(--amarillo); }
.affiche-mx__titre { grid-area: titre; display: block; margin-top: 1rem; font: 900 clamp(2.6rem, 5vw, 4.4rem)/.86 var(--titre); font-stretch: 62%; text-transform: uppercase; }
.affiche-mx__titre .l1, .affiche-mx__titre .l2, .affiche-mx__titre .amp { display: block; }
.affiche-mx__titre .amp { font: 400 .55em/.95 var(--script); text-transform: none; color: var(--amarillo); }
.affiche-mx__titre .l2 { font-size: .62em; color: var(--tinta); }
.affiche-mx__baie { grid-area: baie; align-self: end; aspect-ratio: 3 / 4; margin-top: 1.2rem; border: 5px solid var(--cal); }
.affiche-mx__baie img { object-position: 24% 50%; }
.affiche-mx__pied { grid-area: pied; align-self: end; display: grid; gap: .4rem; margin-top: 1.5rem; font-weight: 600; }
.affiche-mx__pied b { font: 400 1.8rem var(--script); color: var(--amarillo); }
.affiche-bientot { display: grid; align-content: center; gap: .6rem; padding: 2rem; border: 3px dashed var(--tinta); border-radius: 22px; }
.affiche-bientot__titre { font: 900 clamp(2rem, 3.4vw, 2.8rem)/.92 var(--titre); font-stretch: 62%; text-transform: uppercase; }
.col-grille > .affiche-bientot:nth-child(n+3) { grid-column: 1 / -1; }
@media (max-width: 860px) { .col-grille { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .affiche-mx { grid-template-columns: 1fr; grid-template-areas: 'picado' 'auteur' 'titre' 'baie' 'pied'; grid-template-rows: none; }
  .affiche-mx__baie { width: 100%; max-width: 280px; }
}
.col-comment { padding-block: 3rem 5rem; }
.col-etapes { list-style: none; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-top: 3.4rem; padding: 0; }
.col-etapes li { display: grid; align-content: start; gap: .6rem; padding-top: 1.2rem; border-top: 3px solid var(--tinta); }
.col-etapes b { font: 400 4.2rem/.9 var(--script); color: var(--rosa-texte); }
.col-etapes h3 { font-size: 1.5rem; font-weight: 900; font-stretch: 70%; text-transform: uppercase; }
.col-etapes p { color: var(--tinta-douce); }
.col-inscription { padding-block: 4.5rem; background: var(--bandeau); color: var(--papier); }
.col-inscription .titre-affiche { margin-bottom: 1.6rem; color: var(--papier); }
.col-inscription .titre-affiche em { color: var(--moutarde); }

/* Pages simples (données, retour du formulaire) */
.donnees { padding-block: 3rem 5rem; }
.donnees > section { display: grid; gap: 1rem; max-width: 760px; margin: 0 auto; padding-inline: var(--gouttiere); }
.donnees h1 { margin-bottom: 1rem; font-size: clamp(2.6rem, 7vw, 4.4rem); }

/* ---------- Feuillette le guide : le téléphone et les pages du PDF ---------- */
.mx-feuilleter { overflow: hidden; padding-block: 5rem 4.5rem; background: var(--nopal); color: var(--cal); }
.mx-feuilleter .titre-affiche { color: var(--cal); }
.mx-feuilleter .titre-affiche em { color: var(--amarillo); }
.mx-feuilleter__grille { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; }
.mx-feuilleter__tete { display: grid; gap: 1rem; }
.mx-feuilleter__tete > p:not(.surtitre) { max-width: 44ch; font-size: 1.15rem; }
.mx-feuilleter__note { display: flex; align-items: center; gap: .6rem; font-weight: 700; }
.mx-feuilleter__note .picto { width: 1.5em; height: 1.5em; color: var(--amarillo); }
/* Le téléphone : l'écran fait défiler le haut du guide web */
.telephone { --ecran: 600px; justify-self: center; width: calc(var(--ecran) * 390 / 844 + 24px); padding: 12px; border-radius: 46px; background: var(--tinta); box-shadow: 0 0 0 2px rgba(255, 244, 228, .25), 18px 22px 0 rgba(28, 15, 23, .35); transform: rotate(3deg); }
.telephone__ecran { position: relative; height: var(--ecran); overflow: hidden; border-radius: 34px; background: var(--rosa); }
.telephone__ecran::before { content: ''; position: absolute; z-index: 1; top: 10px; left: 50%; width: 30%; height: 22px; border-radius: 99px; background: var(--tinta); transform: translateX(-50%); }
.telephone__ecran img { width: 100%; animation: defile 46s ease-in-out infinite alternate; }
@keyframes defile { 0%, 6% { transform: translateY(0); } 94%, 100% { transform: translateY(calc(-100% + var(--ecran))); } }
@media (max-width: 860px) { .mx-feuilleter__grille { grid-template-columns: 1fr; } .telephone { --ecran: 520px; } }
/* Les pages du PDF, posées comme des feuilles */
.feuilles { --bord: max(var(--gouttiere), calc((100% - 1240px) / 2 + var(--gouttiere))); list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(170px, 19vw, 230px); gap: 1.6rem; margin-top: 3.5rem; padding: 1rem var(--bord) 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--bord); scrollbar-color: var(--amarillo) transparent; }
.feuille { display: grid; gap: .7rem; scroll-snap-align: start; }
.feuille img { width: 100%; height: auto; aspect-ratio: 560 / 795; background: var(--cal); box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 10px 14px 0 rgba(28, 15, 23, .3); transition: transform .3s; }
.feuille:nth-child(odd) img { transform: rotate(-1.2deg); }
.feuille:nth-child(even) img { transform: rotate(1deg) translateY(.5rem); }
.feuille:hover img { transform: translateY(-.4rem) scale(1.02); }
.feuille span { font: 800 .82rem/1.2 var(--texte); letter-spacing: .1em; text-transform: uppercase; color: var(--amarillo); }

/* ---------- Entrée des blocs dans l'écran (seulement avec JavaScript) ---------- */
.js [data-vu]:not(.loteria):not(.feuilles) { opacity: 0; transform: translateY(1.8rem); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js [data-vu].vu:not(.loteria):not(.feuilles) { opacity: 1; transform: none; }
.js .telephone[data-vu].vu { transform: rotate(3deg); }
.js .mx-advisory__offre[data-vu].vu { transform: rotate(-6deg); }
/* La lotería se distribue carte par carte, la liasse de pages aussi */
.loteria .carta, .feuilles .feuille { transition: opacity .45s ease, translate .6s cubic-bezier(.2, .8, .25, 1.15), rotate .6s cubic-bezier(.2, .8, .25, 1.15); }
.js .loteria:not(.vu) .carta, .js .feuilles:not(.vu) .feuille { opacity: 0; translate: 0 4rem; rotate: -8deg; }
.loteria .carta:nth-child(2), .feuilles .feuille:nth-child(2) { transition-delay: .08s; }
.loteria .carta:nth-child(3), .feuilles .feuille:nth-child(3) { transition-delay: .16s; }
.loteria .carta:nth-child(4), .feuilles .feuille:nth-child(4) { transition-delay: .24s; }
.loteria .carta:nth-child(5), .feuilles .feuille:nth-child(5) { transition-delay: .32s; }
.loteria .carta:nth-child(6), .feuilles .feuille:nth-child(6) { transition-delay: .4s; }
.feuilles .feuille:nth-child(7) { transition-delay: .48s; }
@media (prefers-reduced-motion: reduce) {
  .js [data-vu], .js .loteria .carta, .js .feuilles .feuille { opacity: 1 !important; translate: none !important; rotate: none !important; transition: none !important; }
  .js [data-vu]:not(.loteria):not(.feuilles):not(.telephone):not(.mx-advisory__offre) { transform: none !important; }
  .telephone__ecran img { animation: none; }
}

/* Message du formulaire après envoi */
.inscription__statut { padding: .8rem 1.1rem; border-radius: 14px; background: var(--papier); color: var(--encre); font-weight: 800; }

/* ---------- Vente : boutons d'achat, cadeau, mode test ---------- */
.boleto__achat { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.boleto__achat[hidden] { display: none; }
.boleto__achat .btn { min-height: 2.8rem; padding: .6rem 1.2rem; cursor: pointer; font-size: .95rem; }
.boleto__achat .btn--ligne { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.boleto__achat .picto { color: currentColor; }
.vente__cadeau { display: flex; gap: .5rem; align-items: baseline; font-weight: 600; }
.vente__cadeau .picto { color: var(--amarillo); }
.vente__test { padding: .7rem 1rem; border: 2px dashed var(--amarillo); border-radius: 12px; font-size: .9rem; }
.vente__statut:not(:empty) { font-weight: 800; }
.vente__avis { margin-bottom: 1rem; padding: .8rem 1rem; border-radius: 12px; background: var(--cal); color: var(--tinta); font-weight: 700; }
.mx-precio__tete [data-vente-ouverte] { display: grid; gap: .8rem; }
.mx-precio__tete [hidden] { display: none !important; }

/* Pied de page : les liens de la collection */
.pied__liens { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-weight: 700; }

/* Accueil : la deuxième voix, l'appel aux auteures */
a.affiche-bientot { color: inherit; text-decoration: none; transition: transform .2s, background .2s; }
a.affiche-bientot:hover { transform: translate(-3px, -3px); background: var(--sable); }
.col-auteures { padding-block: 1rem 5rem; }
.col-auteures__texte { display: grid; gap: 1rem; justify-items: start; max-width: 760px; padding: 2.4rem; border: 3px solid var(--tinta); border-radius: 22px; background: var(--amarillo); box-shadow: 8px 8px 0 var(--tinta); }
.col-auteures__texte p:not(.surtitre) { font-size: 1.12rem; font-weight: 500; }

/* ---------- Page d'un pays : les voix, le face-à-face ---------- */
.pays-haut { position: relative; overflow: hidden; background: var(--rosa); color: var(--cal); }
.pays-haut .picado { color: var(--cal); font-size: clamp(10px, 1.1vw, 14px); }
.pays-haut .barre .logo { color: var(--cal); }
.pays-tete { display: grid; gap: 2rem 3rem; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; padding-block: 2rem 4rem; }
.pays-tete__texte { display: grid; gap: 1.2rem; justify-items: start; }
.pays-titre { font-size: clamp(4rem, 13vw, 10rem); line-height: .82; color: var(--cal); }
.pays-tete__sous { max-width: 34ch; font: 600 clamp(1.1rem, 1.8vw, 1.35rem)/1.4 var(--texte); }
.pays-baies { position: relative; height: clamp(300px, 32vw, 430px); }
.pays-baie { position: absolute; width: 46%; aspect-ratio: 3 / 4; border: 5px solid var(--cal); }
.pays-baie--1 { left: 0; bottom: 0; box-shadow: 8px 8px 0 var(--amarillo); }
.pays-baie--2 { left: 27%; top: 0; z-index: 1; box-shadow: 8px 8px 0 var(--turquesa); }
.pays-baie--3 { right: 0; bottom: 8%; z-index: 2; box-shadow: 8px 8px 0 var(--tinta); }
@media (max-width: 860px) { .pays-tete { grid-template-columns: 1fr; } .pays-baies { max-width: 420px; height: 290px; } }

.voix { padding-block: 4rem 3rem; }
.voix__liste { list-style: none; display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); margin-top: 2rem; padding: 0; }
.voix__carte { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.4rem; align-items: end; padding: 1.6rem; border: 3px solid var(--tinta); border-radius: 22px; background: var(--cal); box-shadow: 8px 8px 0 var(--rosa); }
.voix__portrait { aspect-ratio: 3 / 4; border: 4px solid var(--tinta); }
.voix__texte { display: grid; gap: .6rem; justify-items: start; }
.voix__texte h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 900; font-stretch: 70%; text-transform: uppercase; line-height: .95; }
.voix__signe .logo { font-size: 1.3rem; }
.voix__meta { font-weight: 700; color: var(--rosa-texte); }
.voix__carte--vide { grid-template-columns: 1fr; border-style: dashed; background: transparent; box-shadow: none; }
@media (max-width: 480px) { .voix__carte { grid-template-columns: 1fr; } .voix__portrait { max-width: 220px; } }

.face { padding-block: 3rem 5rem; }
.face__chapo { max-width: 52ch; margin-top: 1rem; font-size: 1.15rem; font-weight: 500; }
.face__axe { display: grid; grid-template-columns: minmax(0, .45fr) minmax(0, 1.55fr); gap: 1.2rem 2rem; margin-top: 2.4rem; padding-top: 1.4rem; border-top: 3px solid var(--encre); }
.face__nom h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 900; font-stretch: 62%; text-transform: uppercase; line-height: .9; }
.face__nom p { margin-top: .4rem; color: var(--encre-douce); }
.face__cellules { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.face__cellule { display: grid; gap: .55rem; align-content: start; padding: 1.2rem 1.3rem; border: 2px solid var(--encre); border-radius: 16px; background: #fff; }
.face__cellule--vide { place-content: center; justify-items: center; min-height: 9rem; border-style: dashed; background: transparent; color: var(--encre-douce); font-weight: 700; }
.face__cellule--ecriture { border-style: dashed; }
.face__qui { font: 800 .78rem var(--texte); letter-spacing: .12em; text-transform: uppercase; color: var(--destination-texte); }
.face__qui .logo { font-size: 1.05rem; letter-spacing: -.02em; text-transform: none; }
.face__titre { margin-top: -.3rem; font-weight: 800; }
.face__statut { justify-self: start; padding: .15em .6em; border-radius: 99px; background: var(--moutarde); color: var(--encre); font: 800 .7rem/1.4 var(--texte); letter-spacing: .08em; text-transform: uppercase; }
.face__citation { font: 400 1.35rem/1.25 var(--script); color: var(--seconde); }
.face__badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.face__badges .badge { color: var(--destination-texte); font-size: .66rem; }
.face__budget { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0; }
.face__budget dt { font-weight: 800; }
.face__budget dd { margin: 0; }
.face__nuits { list-style: none; margin: -.2rem 0 .5rem; padding: 0; }
.face__nuits li { margin: .05rem 0; }
.face__regle { font-size: .78rem; line-height: 1.35; color: var(--encre-douce); }
.face .trou { color: var(--destination-texte); border-color: currentColor; }
@media (max-width: 760px) { .face__axe { grid-template-columns: 1fr; } }
/* La barre des étapes : les couleurs du Mexique quand la feuille du Mexique est là, sinon les jetons de rôle du pays. */
.route-barre { display: flex; gap: 3px; height: 1.9rem; border-radius: 99px; overflow: hidden; border: 2px solid var(--encre); }
.route-barre__seg { display: grid; place-items: center; min-width: 1.6rem; color: var(--encre); font-size: .8rem; }
.route-barre__seg--rosa { background: var(--rosa, var(--destination-texte)); color: #fff; }
.route-barre__seg--turquesa { background: var(--turquesa, var(--destination)); }
.route-barre__seg--amarillo { background: var(--amarillo, var(--moutarde)); }
.route-barre__seg--anil { background: var(--anil, var(--encre)); color: var(--cal, var(--papier)); }
.route-barre__seg--naranja { background: var(--naranja, var(--sable)); }
.route-legende { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .9rem; padding: 0; font-size: .86rem; font-weight: 600; }
.route-legende i, .parts__legende i { display: inline-block; width: .8rem; height: .8rem; margin-right: .35rem; border-radius: 50%; vertical-align: -.05rem; }
/* Les six catégories de la charte, plus les expériences sans catégorie (hachurées). */
.parts { display: flex; gap: 3px; height: 1.2rem; border-radius: 99px; overflow: hidden; border: 2px solid var(--encre); }
.parts__seg--culture { background: var(--anil, var(--destination-texte)); }
.parts__seg--nature { background: var(--nopal, var(--moutarde-texte)); }
.parts__seg--plage { background: var(--turquesa, var(--destination)); }
.parts__seg--table { background: var(--rosa, var(--moutarde)); }
.parts__seg--sport { background: var(--naranja, var(--encre)); }
.parts__seg--detente { background: var(--amarillo, var(--sable)); }
.parts__seg--nonClasse { background: repeating-linear-gradient(45deg, var(--trait) 0 3px, #fff 3px 6px); }
.parts__legende i.parts__seg--nonClasse { border: 1px solid var(--encre-douce); }
.parts__legende { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .9rem; padding: 0; font-size: .9rem; }

/* ---------- Devenir auteure ---------- */
.aut-haut { position: relative; overflow: hidden; background: var(--anil); color: var(--cal); }
.aut-haut .picado { color: var(--cal); font-size: clamp(10px, 1.1vw, 14px); }
.aut-haut .barre .logo { color: var(--cal); }
.aut-tete { display: grid; gap: 1.3rem; justify-items: start; padding-block: 2.5rem 4.5rem; }
.aut-tete .titre-affiche { max-width: 14ch; color: var(--cal); font-size: clamp(3rem, 9vw, 7rem); }
.aut-tete .titre-affiche em { color: var(--amarillo); }
.aut-tete__sous { max-width: 46ch; font: 600 clamp(1.1rem, 1.8vw, 1.35rem)/1.45 var(--texte); }
.aut-tete__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.aut-tete .btn--ligne { border-color: var(--cal); color: var(--cal); }
.aut-bloc { padding-block: 4rem 1rem; }
.aut-deux { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.aut-deux > div { display: grid; gap: 1rem; align-content: start; }
.aut-deux p { font-size: 1.08rem; }
.aut-liste { display: grid; gap: .6rem; padding-left: 1.2rem; font-size: 1.08rem; }
.aut-liste li::marker { color: var(--rosa); }
.aut-chapo { max-width: 60ch; margin-top: 1.2rem; font-size: 1.1rem; }
.niveaux { list-style: none; display: grid; gap: .6rem; margin-top: 1.8rem; padding: 0; }
.niveau { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: 1rem; align-items: center; margin-left: calc(var(--i) * clamp(0px, 2.4vw, 2rem)); padding: .9rem 1.2rem; border: 2px solid var(--tinta); border-radius: 14px; background: var(--cal); }
.niveau b { font: 900 1.5rem/1 var(--titre); font-stretch: 70%; text-transform: uppercase; color: var(--rosa-texte); }
@media (max-width: 560px) { .niveau { grid-template-columns: 1fr; gap: .3rem; } }
.aut-appel { margin-top: 4rem; padding-block: 4.5rem; background: var(--amarillo); }
.aut-appel .cadre { display: grid; gap: 1rem; justify-items: start; }
.aut-appel p:not(.surtitre) { max-width: 50ch; font-size: 1.15rem; font-weight: 500; }

/* ---------- L'atelier ---------- */
.atelier { padding-block: 2rem 5rem; }
.atelier__tete { display: grid; gap: 1rem; max-width: 820px; }
.atelier__tete .titre-affiche { font-size: clamp(2.6rem, 7vw, 5rem); }
.atelier__outils { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.atelier__outils .btn { cursor: pointer; background: transparent; color: var(--tinta); border-color: var(--tinta); }
.atelier__confirmer { font-weight: 700; color: var(--rosa-texte); }
.atelier__jauge { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; font-weight: 700; }
.atelier__jauge progress { width: min(320px, 100%); height: 12px; accent-color: var(--rosa); }
.atelier__garde { font-weight: 500; color: var(--tinta-douce); }
.atelier__etapes { position: sticky; top: 0; z-index: 3; display: flex; gap: .4rem; margin: 2rem calc(-1 * var(--gouttiere)) 0; padding: .7rem var(--gouttiere); overflow-x: auto; background: var(--cal); border-bottom: 2px solid var(--tinta); scrollbar-width: none; }
.atelier__etapes button { flex: none; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border: 1.5px solid var(--tinta); border-radius: 99px; background: transparent; font: 700 .9rem var(--texte); cursor: pointer; }
.atelier__etapes button b { font: 400 1rem/1 var(--script); color: var(--rosa-texte); }
.atelier__etapes [aria-current="true"] { background: var(--tinta); color: var(--cal); }
.atelier__etapes [aria-current="true"] b { color: var(--amarillo); }
.atelier__panneau { display: grid; gap: 1rem; max-width: 980px; padding-top: 1.8rem; outline: none; }
.atelier__panneau h2 { font-size: clamp(2rem, 5vw, 3.4rem); }
.atelier__panneau h3 { margin-top: 1rem; font-size: 1.4rem; font-weight: 900; font-stretch: 70%; text-transform: uppercase; }
.atelier__panneau > p { max-width: 62ch; color: var(--tinta-douce); }
.grille { display: grid; gap: .9rem 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.champ { display: grid; gap: .3rem; align-content: start; }
.champ--large { grid-column: 1 / -1; }
.champ label { font: 800 .8rem var(--texte); letter-spacing: .04em; }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 2.8rem; padding: .6rem .8rem; border: 2px solid var(--tinta); border-radius: 10px; background: #fff; color: var(--tinta); font: 500 1rem var(--texte); }
.champ textarea { resize: vertical; }
.champ small { color: var(--tinta-douce); font-size: .8rem; }
.carte-atelier { display: grid; gap: .8rem; margin: 0; padding: 1.1rem 1.2rem 1.2rem; border: 2px solid var(--tinta); border-radius: 16px; background: var(--cal); }
.carte-atelier legend { padding: 0 .5rem; font: 800 .85rem var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--rosa-texte); }
.carte-atelier.experience { background: #fff; }
.retirer { justify-self: start; padding: 0; border: 0; background: none; color: var(--rosa-texte); font: 700 .86rem var(--texte); text-decoration: underline; cursor: pointer; }
.atelier__panneau .btn { cursor: pointer; justify-self: start; }
.atelier__panneau .btn--ligne { color: var(--tinta); border-color: var(--tinta); background: transparent; }
.jours-puces { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; }
.puce-jour { width: 2.6rem; height: 2.6rem; border: 2px solid var(--tinta); border-radius: 50%; background: var(--cal); font: 800 .95rem var(--texte); cursor: pointer; }
.puce-jour--partiel { background: linear-gradient(90deg, var(--amarillo) 50%, var(--cal) 50%); }
.puce-jour--complet { background: var(--turquesa); }
.puce-jour[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--cal), 0 0 0 6px var(--rosa); }
.jour-titre { font-size: 2rem !important; }
.demi { display: grid; gap: .8rem; padding: 1rem 0 0; border-top: 2px dashed var(--trait); }
.demi header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.demi h4 { margin: 0; font: 900 1.3rem/1 var(--titre); font-stretch: 70%; text-transform: uppercase; }
.demi h4 small { font: 600 .8rem var(--texte); text-transform: none; color: var(--tinta-douce); }
.libre { display: flex; gap: .4rem; align-items: center; font-weight: 700; }
.libre input { width: 1.2rem; height: 1.2rem; accent-color: var(--rosa); }
.controles { list-style: none; display: grid; gap: .5rem; padding: 0; }
.controles li { display: flex; gap: .8rem; align-items: baseline; padding: .7rem 1rem; border-radius: 12px; background: #fff; border: 2px solid var(--trait); }
.controles li.ok { border-color: var(--turquesa); }
.controles b { flex: none; width: 1.4rem; height: 1.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--trait); }
.controles li.ok b { background: var(--turquesa); }
.controles span { display: grid; gap: .2rem; font-weight: 600; }
.controles small { font-weight: 500; color: var(--rosa-texte); }
.envoi { display: grid; gap: .8rem; margin-top: 1rem; }
.envoi .inscription__accord input { accent-color: var(--rosa); }
.envoi [role=status]:not(:empty) { font-weight: 800; }

/* ---------- Après le paiement ---------- */
.merci { display: grid; gap: 1.2rem; justify-items: start; padding-block: 3rem 5rem; }
.merci [data-livraison], .merci > * { max-width: 760px; }
.merci .titre-affiche { font-size: clamp(3rem, 9vw, 6rem); }
.merci__chapo { font-size: 1.25rem; font-weight: 600; }
.merci__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.merci__garder { display: grid; gap: .6rem; padding: 1.4rem; border: 2px dashed var(--tinta); border-radius: 16px; }
.merci__garder h2 { font-size: 1.8rem; }
.merci__lien { display: flex; gap: .5rem; }
.merci__lien input { flex: 1; min-width: 0; padding: .6rem .8rem; border: 2px solid var(--tinta); border-radius: 10px; font: 500 .85rem var(--texte); }
.merci__lien .btn { border: 2.5px solid var(--tinta); cursor: pointer; }
.merci__papier, .merci__panne, .merci__attente { font-weight: 600; }
.cadeau { display: grid; gap: 1.4rem; justify-items: center; padding-block: 3rem 5rem; }
.bon { display: grid; gap: .9rem; width: min(100%, 720px); aspect-ratio: 210 / 148; align-content: center; padding: clamp(1.4rem, 4vw, 3rem); border: 3px solid var(--tinta); border-radius: 22px; background: var(--rosa); color: var(--cal); box-shadow: 10px 10px 0 var(--tinta); }
.bon__logo { font: 800 1.2rem var(--titre); }
.bon__logo b { font: 400 1.3em var(--script); color: var(--amarillo); }
.bon__surtitre { font: 800 .85rem var(--texte); letter-spacing: .14em; text-transform: uppercase; }
.bon__titre { font-size: clamp(2rem, 5.4vw, 3.6rem); color: var(--cal); }
.bon__message { font: 400 clamp(1.1rem, 2.4vw, 1.5rem)/1.3 var(--script); color: var(--amarillo); }
.bon__de { font-weight: 700; }
.bon__acces { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; margin-top: .4rem; }
.bon__qr { width: clamp(84px, 14vw, 118px); padding: 8px; border-radius: 10px; background: var(--cal); }
.bon__qr svg { display: block; width: 100%; height: auto; }
.bon__acces p { font-size: .92rem; font-weight: 600; }
@media print {
  @page { size: A5 landscape; margin: 0; }
  .site--cadeau .barre, .site--cadeau .pied, .bon__imprimer { display: none !important; }
  .site--cadeau, .site--cadeau .cadeau { margin: 0; padding: 0; background: var(--rosa); }
  .bon { width: 210mm; height: 148mm; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; padding: 14mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Le carnet ---------- */
.carnet-page { display: grid; gap: 1rem; padding-block: 3rem 5rem; }
.carnet-page__chapo { max-width: 52ch; font-size: 1.15rem; font-weight: 500; }
.billets { list-style: none; display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin-top: 1.6rem; padding: 0; }
.billet a { display: grid; gap: .7rem; color: inherit; text-decoration: none; }
.billet__baie { aspect-ratio: 4 / 5; border: 4px solid var(--tinta); box-shadow: 6px 6px 0 var(--rosa); transition: transform .2s; }
.billet a:hover .billet__baie { transform: translate(-3px, -3px); }
.billet h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-stretch: 70%; line-height: .95; }
.billet p { color: var(--tinta-douce); }
.article { display: grid; gap: 1.6rem; max-width: 820px; padding-block: 3rem 5rem; }
.article__tete { display: grid; gap: .9rem; }
.article__tete .surtitre .logo { font-size: 1em; letter-spacing: 0; text-transform: none; }
.article h1 { font-size: clamp(2.4rem, 6.4vw, 4.6rem); line-height: .9; }
.article__chapo { font-size: 1.25rem; font-weight: 600; }
.article__baie { width: min(100%, 520px); aspect-ratio: 4 / 5; border: 5px solid var(--tinta); box-shadow: 8px 8px 0 var(--amarillo); }
.article__corps { display: grid; gap: 1rem; font-size: 1.1rem; line-height: 1.65; }
.article__corps h2 { margin-top: 1rem; font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-stretch: 70%; }
.article__corps ul { display: grid; gap: .5rem; padding-left: 1.2rem; }
.article__corps li::marker { color: var(--rosa); }
.article__guide { display: grid; gap: .9rem; padding: 2rem; border-radius: 22px; background: var(--anil); color: var(--cal); }
.article__guide h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--cal); }
.article__autres h2 { font-size: 1.8rem; }

/* Travel designers sélectionnés (page de vente) */
.mx-selection { padding-block: 3.5rem 1rem; display: grid; gap: .8rem; max-width: 760px; }
.mx-selection > p:last-child { font-size: 1.12rem; line-height: 1.5; }
.boletos > .boleto:only-child { max-width: 560px; }