/* =========================================================================
   Café Moustache — V3 (retours du 07/11 au soir). Chargé après v2.css.
   - le rose #D9077A est réservé aux titres et à certains boutons : cadres en brun
   - dessins de chats en brun, jamais en rose
   - logo du parcours plus grand, entier, sans contour, qui tourne sur lui-même
   - boutons en fourrure détourés (Instagram, Facebook)
   - animations Lottie (LottieFiles) et traînée de pas de chat derrière la souris
   ========================================================================= */

/* --- Cadres : plus de rose ---------------------------------------------- */
.carte-flottante, .carte-avatar, .encart, .encart__fermer, .avis__carte, .menu__badge { border-color: var(--brun); }
.encart__fermer { color: var(--brun); }
.encart__fermer:hover { background: var(--brun); color: var(--creme); }
.hero__badge { border-color: var(--brun); }
.hero__badge-texte text { fill: var(--brun); }
.menu__badge { color: var(--brun); }
.menu--vedette { background: var(--brun); border-color: var(--brun); box-shadow: 0 30px 60px rgba(64, 32, 25, .3); }
.menu--vedette li b { color: var(--moutarde); }
.menu:not(.menu--vedette):hover { border-color: var(--brun); box-shadow: 0 24px 50px -20px rgba(64, 32, 25, .35); }
.charte__col--oui { background: var(--brun); box-shadow: 0 24px 50px rgba(64, 32, 25, .28); }
.charte__col--non p { text-decoration-color: rgba(64, 32, 25, .5); }
.asso:hover { border-color: var(--brun); box-shadow: 0 24px 50px -24px rgba(64, 32, 25, .4); }
.parcours__etape.est-atteinte .parcours__carte { border-color: var(--brun); box-shadow: 0 24px 50px -24px rgba(64, 32, 25, .35); }
.parcours__carte--foyer { background: var(--brun); border-color: var(--brun); }
.parcours__carte--foyer h3 em { color: var(--moutarde); }
.parcours__carte--foyer p { color: rgba(247, 241, 232, .88); }
.parcours__etape.est-atteinte .parcours__noeud { background: var(--brun); border-color: var(--brun); }
.tarifs b { background: var(--brun); }
.initiale { background: var(--brun); color: var(--creme); }
.avis { background: var(--creme-2); }
.filet::before, .filet::after { background: var(--brun); }
.filet span { color: var(--brun); }
.liste-num li:hover span { background: var(--brun); border-color: var(--brun); }
.etape:hover .etiquette { background: var(--brun); border-color: var(--brun); }
.coeur--a, .coeur--c { color: #fff; }

/* --- Dessins de chats : brun ------------------------------------------- */
.trait, .adoption__etape .trait, .parcours__visuel-trait { background: var(--brun) !important; }
.trait--clair { background: var(--moutarde) !important; }
.trait--creme { background: var(--creme) !important; }
.patte, .patte:nth-child(odd) { color: var(--brun); }
.patte:nth-child(odd) { opacity: .55; }

/* --- Parcours : le logo voyage, grand, entier, sans contour, en rotation - */
.parcours__voyageur {
  width: clamp(96px, 9vw, 130px); height: auto; aspect-ratio: 518.23 / 501.67; margin: 0;
  translate: none; background: none; border: 0; box-shadow: none; border-radius: 0;
  transform: translate(-50%, -50%); filter: drop-shadow(0 10px 18px rgba(64, 32, 25, .3));
}
.parcours__voyageur .logo-svg { width: 100%; background: var(--brun); animation: tourne-logo 6s linear infinite; }
@keyframes tourne-logo { to { rotate: 360deg; } }

/* --- Infos pratiques : la section « côté tasse » au-dessus a disparu ------ */
.infos { padding-top: var(--section); }

/* --- Boutons en fourrure détourés --------------------------------------- */
.boutons-fourrure { display: flex; justify-content: center; gap: clamp(8px, 4vw, 56px); }
.bouton-fourrure { display: block; border-radius: 30%; transition: translate .5s cubic-bezier(.3, 1.6, .5, 1); }
.bouton-fourrure:hover { translate: 0 -8px; }
.bouton-fourrure:focus-visible { outline-offset: -10px; }
.bouton-fourrure__tuile { position: relative; display: grid; place-items: center; width: clamp(138px, 18vw, 240px); aspect-ratio: 1; filter: drop-shadow(0 24px 22px rgba(64, 32, 25, .28)); }
.bouton-fourrure__tuile > svg { width: 30%; height: 30%; color: var(--brun); }
.bouton-fourrure__tuile.est-monte > svg { display: none; }
.bouton-fourrure__canevas { position: absolute; inset: 0; }
.reseaux__fiche { margin-top: 34px; text-align: center; font-size: 15px; }
.reseaux__fiche a { display: inline-flex; align-items: center; gap: 10px; color: var(--brun); text-underline-offset: 4px; }
.reseaux__fiche svg { width: 22px; height: 22px; color: var(--brun); }

/* --- Animations Lottie --------------------------------------------------- */
.lottie { display: block; pointer-events: none; }
.lottie svg { display: block; }
.lottie--bougon { width: clamp(150px, 15vw, 210px); aspect-ratio: 1; margin: 0 auto -10px; }
.lottie--joueur { width: min(560px, 90%); aspect-ratio: 1070 / 456; margin: -20px auto 10px; }
.charte .tete-centree .lottie--bougon { margin-bottom: 4px; }

/* traînée de pas de chat derrière le pointeur (souris uniquement) */
.trainee { position: fixed; left: 0; top: 0; z-index: 120; width: 110px; height: 110px; margin: -55px 0 0 -55px; pointer-events: none; opacity: 0; transition: opacity .4s; will-change: transform; }
.trainee.est-active { opacity: .85; }
@media (hover: none), (pointer: coarse) { .trainee { display: none; } }

@media (max-width: 860px) {
  .parcours__voyageur { width: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .parcours__voyageur .logo-svg { animation: none; }
  .trainee { display: none; }
}

/* coverflow monté : il prend sa propre hauteur */
.coverflow.est-monte { min-height: 0; }

/* =========================================================================
   V5 — palette : le rose #D9077A passe en minorité
   Accent principal : terre cuite #BF6A4B ; secondaires : moutarde #F2B705, orange #F29F05, brun #402019.
   Le rose ne reste que sur deux boutons d'appel (.bouton--rose) et la tuile Instagram.
   ========================================================================= */
.titre em, .hero__titre em, .texte-scrub em, .phrase em, .logo__mot em,
.parcours__carte h3 em, .asso h3 em, .carte-flottante h2, .carte-avatar em, .adoption__etape p em { color: var(--roux); }
.titre--clair em, .texte-scrub--clair em, .parcours__carte--foyer h3 em { color: var(--moutarde); }
.surtitre--gauche { color: var(--orange); }
.tiret { color: var(--roux); }
.tiret--clair { color: var(--moutarde); }
.nav a::after { background: var(--moutarde); }
.burger { background: var(--brun); }
.bouton:not(.bouton--contour):not(.bouton--creme):not(.bouton--contour-clair) {
  background: var(--brun); border-color: var(--brun); color: var(--creme); box-shadow: 0 12px 26px -14px rgba(64, 32, 25, .6);
}
.bouton:not(.bouton--contour):not(.bouton--creme):not(.bouton--contour-clair):hover { background: var(--roux); border-color: var(--roux); }
.bouton.bouton--rose:not(.bouton--contour):not(.bouton--creme):not(.bouton--contour-clair) { background: var(--rose); border-color: var(--rose); color: #fff; box-shadow: 0 12px 26px -12px rgba(217, 7, 122, .55); }
.bouton.bouton--rose:not(.bouton--contour):not(.bouton--creme):not(.bouton--contour-clair):hover { background: var(--rose-fonce); border-color: var(--rose-fonce); }
.bouton--contour:hover, .bouton--creme:hover { background: var(--roux); border-color: var(--roux); color: #fff; }
.question[open] summary .rond { background: var(--roux); border-color: var(--roux); }
.point::after { background: var(--orange); }
.parcours__trace { stroke: var(--orange); }
.coeur--1, .coeur--f, .coeur--d { color: var(--roux); }
.coeur--2 { color: var(--moutarde); }
.ruban--rose { background: var(--roux); color: #fff; }
.ruban--rose .ruban__piste svg { color: var(--moutarde); --creme: var(--roux); }
.ruban--moutarde .ruban__piste svg { color: var(--brun); }
.reseaux__fiche a:hover { color: var(--roux); }

/* --- Infos pratiques : plus de ronds, juste le texte ---------------------- */
.fleur-info { width: auto; aspect-ratio: auto; clip-path: none !important; background: none; color: var(--creme); padding: 10px clamp(8px, 2vw, 24px); }
.fleur-info strong { color: var(--moutarde); font-family: var(--titres); font-size: clamp(36px, 4vw, 56px); }
.fleur-info span { color: rgba(247, 241, 232, .82); }
.fleur-info .etiquette--clair { border-color: var(--moutarde); color: var(--moutarde); }

/* --- Parcours : pastilles plus claires ------------------------------------ */
.parcours__noeud { background: var(--creme); border: 2px solid var(--beige); color: var(--brun); }
.parcours__etape.est-atteinte .parcours__noeud { background: var(--moutarde); border-color: var(--moutarde); color: var(--brun); }
.parcours__noeud--foyer { color: var(--roux); }

/* --- Fil d'une visite : un fil tendu de fiche en fiche ------------------- */
.visite__piste { position: relative; padding-top: 46px; }
.visite__fil { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; list-style: none; }
.visite__fil svg { width: 100%; height: 100%; overflow: visible; }
.visite__fil-fond { fill: none; stroke: var(--beige); stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; }
.visite__fil-trace { fill: none; stroke: var(--brun); stroke-width: 2.5; stroke-linecap: round; }
.etape { position: relative; z-index: 1; transform-origin: 50% 0; transition: scale .7s cubic-bezier(.3, 1.4, .5, 1), opacity .6s, box-shadow .6s, border-color .6s; }
/* chaque fiche est « épinglée » au fil par une petite pince */
.etape::before { content: ""; position: absolute; left: 50%; top: -14px; width: 14px; height: 26px; margin-left: -7px; border-radius: 4px; background: var(--roux); box-shadow: 0 3px 6px rgba(64, 32, 25, .3); }
.js .visite .etape { scale: .86; opacity: .5; }
.js .visite .etape.est-vecue { scale: 1; opacity: 1; border-color: var(--brun); box-shadow: 0 30px 50px -30px rgba(64, 32, 25, .5); animation: balance 1.4s ease-out 1; }
@keyframes balance { 25% { rotate: 2.2deg; } 55% { rotate: -1.4deg; } 80% { rotate: .5deg; } }
@media (prefers-reduced-motion: reduce) { .js .visite .etape { scale: 1; opacity: 1; animation: none; } }

/* =========================================================================
   V6 — animations liées au défilement, associations empilées, retouches
   ========================================================================= */
/* chat animé (Lottie) posé sur les rubans croisés */
.rubans__chat { position: absolute; z-index: 4; left: 50%; top: 50%; width: clamp(130px, 13vw, 190px); aspect-ratio: 1; translate: -50% -86%; pointer-events: none; }
/* les rubans couvrent toute la largeur, du bord gauche au bord droit */
.ruban { left: -15%; width: 130%; }
.ruban--moutarde .ruban__piste svg { color: var(--brun); --creme: var(--moutarde); }

/* fil d'une visite : la taille de chaque fiche suit le défilement (variables posées en JS) */
.js .visite .etape, .js .visite .etape.est-vecue { scale: var(--s, .86); opacity: var(--o, .5); animation: none; transition: box-shadow .4s, border-color .4s; }

/* parcours : la carte grandit quand le logo passe à sa hauteur, puis redevient petite */
.parcours__carte { scale: var(--s, 1); transform-origin: center; }
.parcours__etape:nth-child(odd) .parcours__carte { transform-origin: right center; }
.parcours__etape:nth-child(even) .parcours__carte { transform-origin: left center; }
.parcours__lottie { width: 156px; aspect-ratio: 1; margin: -30px -24px -30px -26px; }
/* logo voyageur : de la taille des pastilles */
.parcours__voyageur { width: 62px; }

/* logos d'associations entiers : contenus dans le rond, sans recadrage */
.asso img, .parcours__logos img { object-fit: contain; background: #fff; padding: 7%; }

/* associations partenaires : les trois l'une sous l'autre */
.associations__grille { grid-template-columns: 1fr; max-width: 920px; margin-inline: auto; }
.asso { display: grid; grid-template-columns: 140px 1fr; gap: 6px 30px; align-items: center; text-align: left; padding: 30px 34px; }
.asso img { grid-row: span 2; width: 140px; height: 140px; margin: 0; }
.asso h3 { margin-bottom: 0; align-self: end; }
.asso p { align-self: start; }

@media (max-width: 860px) {
  .parcours__voyageur { width: 48px; }
  .parcours__lottie { width: 90px; margin: 0; }
  .asso { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 26px 22px; }
  .asso img { grid-row: auto; width: 110px; height: 110px; }
}

/* =========================================================================
   V7 — retouches téléphone, chat qui renverse la tasse sous la charte
   ========================================================================= */
.charte .pied-section .lottie--bougon { margin: 0 auto 10px; }
@media (max-width: 560px) {
  /* la carte : deux cartes par ligne */
  .carte__grille { grid-template-columns: 1fr 1fr; gap: 10px; row-gap: 26px; }
  .menu { padding: 20px 12px 16px; }
  .menu__emoji { font-size: 26px; margin-bottom: 4px; }
  .menu h3 { font-size: 21px; }
  .menu__intro { font-size: 12px; margin: 6px 0 12px; }
  .menu li { font-size: 12.5px; padding: 8px 0; gap: 2px 6px; }
  .menu li small { font-size: 11px; }
  .menu__badge { font-size: 14px; padding: 4px 10px; top: -13px; }
  .menu__note { font-size: 11.5px; }
  /* le chat se pose bien sur le ruban */
  .rubans__chat { translate: -50% -84%; } /* le bas du chat mord à peine (≈5 %) sur le ruban */
}

/* ===== V8 : vidéo plein cadre dans la carte « parenthèse de douceur » ===== */
.carte-flottante--mission { padding: 0; overflow: hidden; aspect-ratio: 9 / 14; width: clamp(190px, 17vw, 240px); }
.carte-flottante--mission .carte-flottante__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
  .carte-flottante--mission { width: 150px; padding: 0; }
}

/* ===== V9 : numéros 01–06 qui s'allument au défilement ===== */
.liste-num li.actif span { background: var(--brun); border-color: var(--brun); color: var(--creme); animation: num-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes num-pop { 0% { transform: scale(1); } 45% { transform: rotate(-12deg) scale(1.18); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .liste-num li.actif span { animation: none; } }
/* Phrase de mission seule (ancienne fin du fil d'une visite) */
.citation .pied-section { margin-top: 0; }

/* ===== V10 : logos d'associations détourés, chat joueur couché sur la fiche « Vérifiez les horaires » ===== */
.asso img, .parcours__logos img { object-fit: contain; background: none; padding: 0; border: 0; border-radius: 0; }
.avant__etapes li.avant__etape--chat { position: relative; }
.avant__etape--chat .lottie--joueur { position: absolute; right: 4%; bottom: 100%; width: min(240px, 66%); margin: 0; translate: 0 13.5%; pointer-events: none; } /* 13,5 % : vide sous le chat dans l'animation */

/* ===== V11 : horaires, jours et prix alignés sur la même ligne (le contenu sous chacun a des hauteurs différentes) ===== */
.infos__fleurs { align-items: flex-start; }
.fleur-info { align-content: start; }
.infos__lien { align-self: flex-start; margin-top: calc(10px + clamp(36px, 4vw, 56px) / 2 - 10px); }