/* Le Mexique de mapped by. La collection donne la grille (charte.css) ; le pays donne
   ses couleurs, sa lettre et ses motifs, pour le guide web, le PDF et le site :
   rosa mexicano et murs peints, papel picado, cartes de lotería, arcs de Barragán,
   azulejos de Talavera, enseigne peinte à la main (Shrikhand), affiche de lucha libre (Archivo condensé).
   Contrastes sur --cal : tinta 17:1, tinta-douce 8:1, rosa-texte 6,1:1. Blanc sur --rosa 5,2:1,
   cal sur --anil 9:1, tinta sur --amarillo 11,7:1, sur --turquesa 6,2:1, sur --naranja 6:1. */
:root {
  --cal: #FFF4E4; --tinta: #1C0F17; --tinta-douce: #5A4650;
  --rosa: #D6006F; --rosa-vif: #FF6FB5; --rosa-texte: #B8005F;
  --naranja: #FF5A1F; --amarillo: #FFC414; --anil: #2233A8; --turquesa: #00A79D; --nopal: #0F6B45;

  /* Rôles de la charte commune */
  --papier: var(--cal); --sable: #FBE6CC; --trait: #EBCBA5; --encre: var(--tinta); --encre-douce: var(--tinta-douce);
  --moutarde: var(--amarillo); --moutarde-texte: #8A5300; --destination: var(--rosa);
  --destination-texte: var(--rosa-texte); --focus: var(--anil); --bandeau: var(--anil);
  --destination-vif: var(--rosa-vif); --seconde: var(--anil);
  --script: 'Shrikhand', Georgia, serif;
  --pointille: radial-gradient(circle, var(--rosa) 0 1.1px, transparent 1.5px);

  /* Azulejo de Talavera, un carreau de 56 px qui se raccorde de tous côtés */
  --talavera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Crect width='56' height='56' fill='%23FFF4E4'/%3E%3Cpath d='M28 6c5 9 9 13 22 22-13 9-17 13-22 22-5-9-9-13-22-22 13-9 17-13 22-22Z' fill='%232233A8'/%3E%3Cpath d='M28 17c2.6 5 5 7.4 11 11-6 3.6-8.4 6-11 11-2.6-5-5-7.4-11-11 6-3.6 8.4-6 11-11Z' fill='%23FFF4E4'/%3E%3Ccircle cx='28' cy='28' r='4.4' fill='%23FFC414'/%3E%3Cpath d='M0 0h10L0 10ZM56 0v10L46 0ZM0 56V46l10 10ZM56 56H46l10-10Z' fill='%232233A8'/%3E%3Ccircle r='3.4' fill='%23D6006F'/%3E%3Ccircle cx='56' r='3.4' fill='%23D6006F'/%3E%3Ccircle cy='56' r='3.4' fill='%23D6006F'/%3E%3Ccircle cx='56' cy='56' r='3.4' fill='%23D6006F'/%3E%3C/svg%3E");
  /* Les arcs du mur « Amor » de Roma Norte */
  --amor: repeating-radial-gradient(circle at 50% 100%, var(--rosa-vif) 0 7%, var(--naranja) 7% 14%, var(--amarillo) 14% 21%, var(--cal) 21% 28%);
}

/* ---------- Motifs ---------- */

/* Papel picado : une guirlande de fanions découpés, qui bouge à peine */
.picado { display: flex; justify-content: center; gap: .35em; overflow: hidden; position: relative; pointer-events: none; padding-top: .55em; }
.picado::before { content: ''; position: absolute; left: 0; right: 0; top: .5em; height: 2px; background: currentColor; opacity: .55; }
.picado svg { flex: none; width: 3.4em; height: 4.4em; transform-origin: 50% 0; }
.ecran .picado svg, .site .picado svg { animation: picado 4.2s ease-in-out infinite alternate; }
.picado svg:nth-child(3n+1) { animation-delay: -1.4s; }
.picado svg:nth-child(3n+2) { animation-delay: -2.8s; }
@keyframes picado { from { transform: rotate(-3deg); } to { transform: rotate(3deg) skewX(1.5deg); } }

/* Arc de Barragán : une photo dans une baie cintrée */
.arco { border-radius: 999px 999px 0 0; overflow: hidden; }
.arco img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sello : le macaron qui tourne autour de la promesse */
.sello { display: block; aspect-ratio: 1; }
.sello__fond { fill: var(--turquesa); }
.sello__anneau text { fill: var(--tinta); font: 800 13.5px var(--titre); font-stretch: 75%; letter-spacing: .04em; text-transform: uppercase; }
.sello__chiffre { fill: var(--tinta); font: 400 64px/1 var(--script); text-anchor: middle; }
.sello__mot { fill: var(--tinta); font: 900 20px var(--titre); font-stretch: 62%; letter-spacing: .08em; text-anchor: middle; text-transform: uppercase; }
.ecran .sello__anneau, .site .sello__anneau { transform-origin: 100px 100px; animation: sello 30s linear infinite; }
@keyframes sello { to { transform: rotate(360deg); } }

/* Bande de Talavera */
.talavera { height: 56px; background: var(--talavera) 0 0 / 56px 56px; }

@media (prefers-reduced-motion: reduce) {
  .picado svg, .sello__anneau, .ticker__piste { animation: none !important; }
}

/* ---------- Le guide aux couleurs du Mexique ---------- */

/* Couverture : affiche rose, fanions, baie cintrée sur les arcs « Amor » */
.couverture { background: var(--rosa); color: var(--cal); isolation: isolate; }
.couverture .picado { color: var(--cal); position: absolute; top: 0; left: 0; right: 0; font-size: 10px; z-index: 2; }
.couverture .logo { color: var(--cal); }
.couverture .logo__mot b { color: var(--amarillo); }
.couverture h1 { color: var(--cal); font-size: 1em; }
.couverture h1 .l1 { display: block; }
.couverture h1 .amp { display: block; font: 400 .62em/.9 var(--script); color: var(--amarillo); text-transform: none; margin: .04em 0 .02em; }
.couverture h1 .l2 { display: block; color: var(--tinta); font-size: .72em; }
.couverture__sous { color: var(--cal); font: 600 1em/1.3 var(--texte); }
.couverture__vue { position: absolute; z-index: 0; }
.couverture__amor { position: absolute; background: var(--amor); border-radius: 999px 999px 0 0; }
.couverture__vue .arco { position: absolute; inset: 0; border: .35em solid var(--cal); box-sizing: border-box; }
.couverture__vue .arco img { object-position: 20% 50%; }
.couverture__vue .sello { position: absolute; }
.couverture__accroche { font: 400 1.05em/1.1 var(--script); color: var(--amarillo); }
.couverture__promesses { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cal); }
.couverture .badge { color: var(--cal); }
.couverture__route .pin--etape { background: var(--amarillo); color: var(--tinta); }
.couverture__route li + li::before { background: radial-gradient(circle, var(--cal) 0 1.1px, transparent 1.5px) 0 50% / 7px 4px repeat-x; }

/* Titres : affiche de lucha libre, avec un mot peint à la main */
section > h2 { color: var(--tinta); }
.mot__titre, .jour h2 span, .jours-vides h2 span { font-family: var(--script); font-weight: 400; font-stretch: 100%; text-transform: none; color: var(--rosa-texte); }
.mot__titre { line-height: 1.05; }
.jour__surtitre { color: var(--rosa-texte); }

/* Bucket list en cartes de lotería */
.bucket__liste li { background: var(--cal); border: 2.5px solid var(--tinta); box-shadow: 4px 4px 0 var(--tinta); padding: .5em .5em 0; position: relative; }
.bucket__liste img { border: 2px solid var(--tinta); }
.bucket__n { position: absolute; top: .2em; left: .2em; min-width: 1.7em; height: 1.7em; display: grid; place-items: center; background: var(--cal); border: 2px solid var(--tinta); font: 400 1.1em/1 var(--script); color: var(--rosa-texte); }
.bucket__texte { font-weight: 900; font-stretch: 70%; text-transform: uppercase; letter-spacing: .01em; }
.bucket__liste li:nth-child(odd) { transform: rotate(-1.2deg); }
.bucket__liste li:nth-child(even) { transform: rotate(1deg); }

/* Ouvertures de partie : bleu de Coyoacán pour Mexico City, mer de Cortés pour la Basse-Californie */
.partie--cdmx { background: var(--anil); color: var(--cal); }
.partie--bcs { background: var(--turquesa); color: var(--tinta); }
.partie--cdmx .partie__nom, .partie--cdmx .partie__gmaps, .partie--cdmx .partie__gmaps .picto { color: var(--cal); }
.partie--bcs .partie__nom, .partie--bcs .partie__gmaps, .partie--bcs .partie__gmaps .picto { color: var(--tinta); }
.partie__sigle { font-family: var(--script); font-weight: 400; letter-spacing: .02em; }
.partie--cdmx .partie__sigle { color: var(--amarillo); }
.partie--bcs .partie__sigle { color: var(--anil); }
.partie__photos img { border-radius: 999px 999px 0 0; }
.partie__frise { position: absolute; left: 0; right: 0; bottom: 0; }
.partie--cdmx .partie__frise { background: var(--talavera) 0 0 / 28px 28px; }
.partie--bcs .partie__frise { background: var(--amor); background-size: 100% 200%; }

/* Adresses : photo en baie cintrée, nom en lettres d'affiche */
.lieu .photo { border-radius: 999px 999px 0 0; }
.lieu h3 { text-transform: uppercase; font-weight: 900; font-stretch: 70%; letter-spacing: .01em; }
.lieu h3 .pin { background: var(--rosa); color: #fff; }
.lieu__prix { color: var(--rosa-texte); }

/* Tracé du jour : l'heure peinte à la main */
.trace__heure { font: 400 1.05em/1 var(--script); color: var(--rosa-texte); }
.trace__jours { color: var(--rosa-texte); }
.trace__photo { border-radius: 999px 999px 0 0; }

/* Infos, plans, sommaire */
.infos__bloc h3 { display: inline-block; background: var(--anil); color: var(--cal); padding: .3em .55em .25em; border-radius: 3px; }
.gmaps__liste { background: var(--turquesa); border-color: var(--tinta); }
.gmaps__liste small { color: var(--tinta); }
.sommaire__partie a, .sommaire__haut a { color: var(--rosa-texte); font-family: var(--script); font-weight: 400; font-stretch: 100%; text-transform: none; }

/* Travel advisory et dos */
.advisory__offre { background: var(--turquesa); color: var(--tinta); }
.advisory__offre b { font-family: var(--script); font-weight: 400; }
.advisory__signe { font-family: var(--script); color: var(--rosa-texte); }
.bouton { background: var(--rosa); color: #fff; }
.dos { background: var(--rosa); color: var(--cal); position: relative; overflow: hidden; }
.dos .picado { color: var(--cal); position: absolute; top: 0; left: 0; right: 0; font-size: 10px; }
.dos .logo { color: var(--cal); }
.dos p { color: var(--cal); }
.trou { border-color: var(--rosa-texte); color: var(--rosa-texte); }