/* SPA du Val-de-Travers, feuille de style unique. Direction C «Épure», choisie le 07.10.2026.
   Procédés: une affirmation par bloc sur gris clair (Apple), boutons noirs arrondis (Revolut),
   blocs arrondis, image qui grandit au défilement. Polices libres hébergées sur le site. */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/BricolageGrotesque-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/BricolageGrotesque-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --fond: #f4f4f1;
  --blanc: #ffffff;
  --encre: #141614;
  --gris: #5e635c;
  --gris-clair: #8a8f88;
  --filet: #e2e3de;
  --vert: #2f5a36;
  --vert-fonce: #23442a;
  --vert-clair: #e7efe2;
  --lime: #cfdc46;
  --m: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --rayon: 28px;
  --titre: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --texte: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --sortie: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
* , *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 400 17px/1.6 var(--texte); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--vert); outline-offset: 3px; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3 { font-family: var(--titre); font-weight: 700; margin: 0; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
h3 { letter-spacing: -.02em; }
.cadre { max-width: calc(var(--max) + 2 * var(--m)); margin: 0 auto; padding-inline: var(--m); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.a-completer { font-style: italic; color: var(--gris); text-decoration: underline dotted var(--gris-clair); text-underline-offset: .22em; }
.discret { color: var(--gris); }
.petit { font-size: .9rem; }
.etiquette { display: block; font-size: .84rem; font-weight: 700; color: var(--vert); margin-bottom: .6rem; }

/* Boutons et liens */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; padding: .95em 1.4em; border-radius: 999px; border: 0; font: 700 1rem/1 var(--texte); text-decoration: none; cursor: pointer; transition: background-color .2s, transform .2s var(--sortie); }
.btn:active { transform: scale(.97); }
.btn-noir { background: var(--encre); color: #fff; }
.btn-noir:hover { background: var(--vert); }
.btn-blanc { background: var(--blanc); color: var(--encre); }
.btn-blanc:hover { background: var(--filet); }
.btn-petit { padding: .7em 1.1em; font-size: .9rem; }
.lien-fleche { font-weight: 700; color: var(--vert); text-decoration: none; display: inline-flex; align-items: center; gap: .3em; }
.lien-fleche::after { content: "›"; font-size: 1.3em; line-height: 0; transition: transform .25s var(--sortie); }
.lien-fleche:hover::after { transform: translateX(4px); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 1.8rem; }

/* Bandeau d'annonce */
.annonce { background: var(--encre); color: #fff; text-align: center; font-size: .9rem; padding: .55rem var(--m); }
.annonce a { color: var(--lime); font-weight: 700; }

/* Barre givrée */
.barre { position: sticky; top: 0; z-index: 30; background: rgba(244, 244, 241, .8); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); border-bottom: 1px solid rgba(20, 22, 20, .07); }
.barre-ligne { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 80px; }
.marque { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.marque img { height: 64px; width: auto; }
.marque span { font: 700 1.05rem/1.1 var(--titre); letter-spacing: -.015em; }
.nav { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.8rem); font-size: .95rem; }
.nav a:not(.btn) { text-decoration: none; color: var(--gris); transition: color .2s; padding-block: .3rem; }
.nav a:not(.btn):hover, .nav a[aria-current="page"]:not(.btn) { color: var(--encre); }
.nav a[aria-current="page"]:not(.btn) { box-shadow: inset 0 -2px 0 var(--vert); }
.menu-bouton { display: none; align-items: center; gap: .5rem; border: 0; background: var(--blanc); border-radius: 999px; padding: .65rem 1rem; font: 700 .95rem/1 var(--texte); color: var(--encre); cursor: pointer; }
.menu-bouton span { width: 16px; height: 8px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.menu-mobile { display: none; }

/* Ouverture de l'accueil */
.ouverture { text-align: center; padding-top: clamp(3rem, 7vw, 6.5rem); }
.ouverture .surtitre { font-weight: 700; color: var(--vert); margin-bottom: 1rem; }
.ouverture h1 { font-size: clamp(2.9rem, 1.2rem + 6.2vw, 7.2rem); letter-spacing: -.05em; line-height: .95; max-width: 13ch; margin-inline: auto; }
.ouverture h1 .doux { color: var(--gris-clair); }
.ouverture .sous { max-width: 40rem; margin: 1.5rem auto 0; font-size: clamp(1.08rem, 1rem + .35vw, 1.3rem); color: var(--gris); }
.ouverture .actions { justify-content: center; }
.scene { margin-top: clamp(2.5rem, 6vw, 4.5rem); padding-inline: var(--m); }
.scene-cadre { position: relative; max-width: 1400px; margin: 0 auto; border-radius: var(--rayon); overflow: hidden; transform: scale(var(--echelle, .9)); transform-origin: center top; aspect-ratio: 16 / 8; background: #cfd3cc; }
.scene-cadre img { width: 100%; height: 100%; object-fit: cover; }
.preuve { position: absolute; background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px; padding: 1rem 1.2rem; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .35); text-align: left; max-width: 280px; text-decoration: none; }
.preuve b { display: block; font: 700 1.5rem/1.05 var(--titre); letter-spacing: -.03em; }
.preuve span { display: block; font-size: .88rem; color: var(--gris); margin-top: .35rem; line-height: 1.35; }
.preuve .date { display: inline-block; background: var(--lime); color: var(--encre); border-radius: 8px; padding: .25em .55em; font: 700 .8rem/1 var(--texte); margin: 0 0 .55rem; }
.preuve.p1 { left: 3%; bottom: 7%; }
.preuve.p2 { right: 3%; top: 8%; }
.legende { text-align: center; font-size: .8rem; color: var(--gris-clair); margin-top: .8rem; }

/* Affirmations centrées */
.affirmation { text-align: center; padding-block: clamp(4.5rem, 10vw, 8rem) clamp(2.2rem, 5vw, 3.5rem); }
.affirmation h2 { font-size: clamp(2.3rem, 1.2rem + 4.2vw, 5rem); max-width: 17ch; margin-inline: auto; }
.affirmation p { max-width: 38rem; margin: 1.3rem auto 0; color: var(--gris); font-size: 1.15rem; }

/* Blocs arrondis */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.tuile { position: relative; background: var(--blanc); border-radius: var(--rayon); padding: clamp(1.4rem, 2.6vw, 2.2rem); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; text-decoration: none; min-height: 250px; transition: transform .5s var(--sortie), box-shadow .5s var(--sortie); }
a.tuile:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .35); }
.tuile h3 { font-size: clamp(1.7rem, 1.2rem + 1.3vw, 2.5rem); margin: 0 0 .6rem; }
.tuile p { color: var(--gris); margin: 0; max-width: 30rem; }
.tuile .lien-fleche { margin-top: .9rem; }
.t-4 { grid-column: span 4; } .t-3 { grid-column: span 3; } .t-2 { grid-column: span 2; } .t-6 { grid-column: span 6; }
.t-haute { grid-row: span 2; min-height: 520px; }
.t-photo { color: #fff; justify-content: flex-end; }
.t-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 1s var(--sortie); }
a.t-photo:hover > img { transform: scale(1.04); }
.t-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .74)); z-index: 1; }
.t-photo .etiquette, .t-photo h3 { text-shadow: 0 1px 14px rgba(0, 0, 0, .45); }
.t-photo > img.img-enclos { object-position: 12% 75%; }
.t-photo > div { position: relative; z-index: 2; }
.t-photo .etiquette, .t-photo p, .t-photo .lien-fleche { color: rgba(255, 255, 255, .9); }
.t-vert { background: var(--vert); color: #fff; }
.t-vert .etiquette, .t-vert p, .t-vert .lien-fleche { color: rgba(255, 255, 255, .85); }
.t-lime { background: var(--lime); }
.t-lime .etiquette, .t-lime p { color: var(--encre); }
.t-pale { background: var(--vert-clair); }
.grand-chiffre { font: 700 clamp(4.2rem, 2.4rem + 4vw, 6.4rem)/.85 var(--titre); letter-spacing: -.06em; }
.grand-chiffre small { display: block; font-size: .26em; letter-spacing: -.01em; margin-top: .6rem; }
.t-vert ul { list-style: none; font-size: .95rem; }
.t-vert li { padding: .5rem 0; border-top: 1px solid rgba(255, 255, 255, .2); }

/* En-tête des pages intérieures */
.tete-page { padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 5vw, 3.5rem); text-align: center; }
.tete-page h1 { font-size: clamp(2.6rem, 1.2rem + 5vw, 6rem); letter-spacing: -.05em; line-height: .96; max-width: 14ch; margin-inline: auto; }
.tete-page .sous { max-width: 40rem; margin: 1.4rem auto 0; color: var(--gris); font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); }
.tete-page .actions { justify-content: center; }
.photo-large { border-radius: var(--rayon); overflow: hidden; aspect-ratio: 16 / 7; background: #cfd3cc; }
.photo-large img { width: 100%; height: 100%; object-fit: cover; }

/* Sections et lecture */
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.carte-texte { background: var(--blanc); border-radius: var(--rayon); padding: clamp(1.6rem, 4vw, 3.4rem); }
.deux-col { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.deux-col h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); }
.lecture { max-width: 40rem; }
.lecture h3 { font-size: 1.45rem; margin: 2rem 0 .6rem; }
.lecture h3:first-child { margin-top: 0; }

/* Étapes */
.etapes { list-style: none; counter-reset: etape; display: grid; gap: 14px; }
.etapes li { counter-increment: etape; background: var(--blanc); border-radius: 22px; padding: 1.5rem 1.6rem; display: grid; grid-template-columns: 3.2rem 1fr; column-gap: 1rem; }
.etapes li::before { content: counter(etape); grid-row: 1 / span 3; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--vert-clair); color: var(--vert); display: grid; place-items: center; font: 700 1.1rem/1 var(--titre); }
.etapes h3 { grid-column: 2; font-size: 1.35rem; margin-bottom: .35rem; }
.etapes p { grid-column: 2; margin: 0; color: var(--gris); }
.etapes .actions { grid-column: 2; margin-top: 1rem; }

/* Encadré important */
.important { background: var(--lime); border-radius: 22px; padding: 1.4rem 1.6rem; }
.important strong { display: block; font: 700 1.3rem/1.15 var(--titre); letter-spacing: -.02em; margin-bottom: .4rem; }
.important p { margin: 0; }

/* Tableau à filets */
.tableau { width: 100%; border-collapse: collapse; }
.tableau th, .tableau td { padding: 1rem 0; border-bottom: 1px solid var(--filet); text-align: left; vertical-align: baseline; }
.tableau tr:first-child th, .tableau tr:first-child td { padding-top: 0; }
.tableau th { width: 38%; padding-right: 1.5rem; font-weight: 400; color: var(--gris); }
.tableau td { font: 700 1.2rem/1.3 var(--titre); letter-spacing: -.015em; }
.tableau-note { display: block; margin-top: .35rem; font: 400 .95rem/1.45 var(--texte); letter-spacing: 0; color: var(--gris); }

/* Histoire: le parcours. Un trait en pointillés part du nouveau refuge et descend dans le temps;
   chaque halte s'allume quand le trait l'atteint, et son image apparaît à ce moment-là. */
.depart { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.6rem, 3vw, 2.4rem); }
.depart-tete { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.5rem 3rem; align-items: start; }
.depart-tete h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); }
.depart-tete p { color: var(--gris); }
.depart::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--lime); border: 4px solid var(--vert); z-index: 2; }
.depart .galerie figure { font-size: .85rem; }

.parcours { position: relative; overflow-x: clip; padding-top: clamp(3rem, 7vw, 5rem); }
.trace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.trace path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trace-fond, .trace-avant { stroke-width: 5; stroke-dasharray: 0 13; }
.trace-fond { stroke: #cbcfc6; }
.trace-avant { stroke: var(--vert); }
.trace-revele { stroke: #fff; stroke-width: 24; }
.trace-coeur { fill: var(--lime); stroke: var(--vert); stroke-width: 4; }
.trace-halo { fill: var(--vert); opacity: .18; transform-box: fill-box; transform-origin: center; animation: halo 2.2s var(--sortie) infinite; }
@keyframes halo { from { transform: scale(.5); opacity: .35; } to { transform: scale(1.5); opacity: 0; } }

.halte { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr clamp(110px, 12vw, 160px) 1fr; align-items: center; padding-block: clamp(3rem, 8vw, 6.5rem); }
.halte-point { grid-column: 2; grid-row: 1; justify-self: center; width: 22px; height: 22px; border-radius: 50%; background: var(--fond); border: 4px solid #cbcfc6; transition: border-color .5s, background-color .5s, transform .6s var(--sortie); }
.halte.atteint .halte-point { border-color: var(--vert); background: var(--lime); transform: scale(1.15); }
.halte-texte { grid-column: 1; grid-row: 1; }
.halte-image { grid-column: 3; grid-row: 1; position: relative; justify-self: center; width: min(100%, 460px); }
.halte:nth-of-type(even) .halte-texte { grid-column: 3; }
.halte:nth-of-type(even) .halte-image { grid-column: 1; }
.halte .annee { font: 700 clamp(2.6rem, 1.5rem + 3.4vw, 4.6rem)/1 var(--titre); letter-spacing: -.05em; color: var(--vert); margin: 0 0 .7rem; }
.halte h2 { font-size: clamp(1.6rem, 1.15rem + 1.4vw, 2.4rem); margin-bottom: 1rem; }
.halte p { color: var(--gris); font-size: 1.06rem; }
.source { font-size: .82rem; color: var(--gris-clair); margin-top: .6rem; }
.citation { font: 700 clamp(1.45rem, 1.05rem + 1.4vw, 2.2rem)/1.15 var(--titre); letter-spacing: -.03em; color: var(--encre) !important; max-width: 24ch; }

/* Les images des haltes: photos posées de travers, timbre, billet, cachets de la poste */
.penche-g { --rot: -2.5deg; }
.penche-d { --rot: 2deg; }
.photo { margin: 0; background: var(--blanc); padding: 12px 12px 14px; border-radius: 6px; box-shadow: 0 30px 60px -32px rgba(20, 22, 20, .45); transform: rotate(var(--rot, 0deg)); }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.photo figcaption, .timbre figcaption { font-size: .8rem; color: var(--gris-clair); margin-top: .6rem; line-height: 1.35; }
.photo.vide > div { aspect-ratio: 4 / 5; display: grid; place-items: center; text-align: center; padding: 1.5rem; border: 2px dashed var(--filet); border-radius: 3px; color: var(--gris); font-size: .92rem; }
.photo.vide figcaption { font: 700 1rem/1.3 var(--titre); color: var(--encre); letter-spacing: -.01em; }
.billet { background: var(--lime); border-radius: var(--rayon); padding: clamp(1.6rem, 3vw, 2.4rem); transform: rotate(var(--rot, 0deg)); box-shadow: 0 30px 60px -36px rgba(20, 22, 20, .45); }
.billet .grand-chiffre { font: 700 clamp(5rem, 3rem + 5vw, 8rem)/.85 var(--titre); letter-spacing: -.06em; color: var(--encre); margin: 0 0 1rem; }
.billet .grand-chiffre small { display: inline; font-size: .3em; letter-spacing: -.02em; margin-left: .2em; }
.billet p:last-child { color: var(--encre); margin: 0; font-size: 1.1rem; }
.billet-pale { background: var(--vert-clair); }
.billet-pale .grand-chiffre { color: var(--vert); }
.timbre { --r: 7px; margin: 0; background: var(--blanc); padding: 22px 22px 18px; transform: rotate(-1.5deg); filter: drop-shadow(0 24px 30px rgba(20, 22, 20, .2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(var(--r) at var(--r) var(--r), #0000 97%, #000) calc(var(--r) * -1) calc(var(--r) * -1) / calc(var(--r) * 2.6) calc(var(--r) * 2.6) round;
          mask: linear-gradient(#000 0 0) content-box, radial-gradient(var(--r) at var(--r) var(--r), #0000 97%, #000) calc(var(--r) * -1) calc(var(--r) * -1) / calc(var(--r) * 2.6) calc(var(--r) * 2.6) round; }
.carte { display: block; width: 100%; height: auto; }
.carte-fond { fill: #eef1ea; }
.carte-riviere { fill: none; stroke: #a9c1cc; stroke-width: 4; stroke-linecap: round; }
.carte-eau { font: italic 15px var(--texte); fill: #6f8c99; }
.carte-region { font: 700 22px var(--titre); fill: #b9bfb5; letter-spacing: -.02em; }
.carte-trajet { fill: none; stroke: var(--vert); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0 13; }
.carte mask path { fill: none; stroke: #fff; stroke-width: 26; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s cubic-bezier(.45, 0, .2, 1) .3s; }
.carte-lieux circle { fill: var(--blanc); stroke: var(--encre); stroke-width: 2.5; }
.carte-lieux .depart-lieu { fill: var(--vert-clair); stroke: var(--vert); stroke-width: 3; }
.carte-lieux .arrivee { fill: var(--lime); stroke: var(--vert); stroke-width: 4; }
.carte-lieux text { font: 600 16px var(--texte); fill: var(--encre); paint-order: stroke; stroke: #eef1ea; stroke-width: 5px; stroke-linejoin: round; }
.carte-lieux .arrivee-nom { font: 700 22px var(--titre); fill: var(--vert); letter-spacing: -.02em; }
.carte-lieux .contexte { fill: var(--gris-clair); stroke: #c3c8bf; }
.carte-lieux text.contexte { fill: var(--gris-clair); stroke: #eef1ea; }
.cachet { position: absolute; z-index: 2; width: 116px; height: 116px; border-radius: 50%; border: 3px solid var(--vert); box-shadow: inset 0 0 0 5px var(--fond), inset 0 0 0 7px var(--vert); display: grid; place-content: center; text-align: center; padding: 0 14px; color: var(--vert); font: 700 .66rem/1.15 var(--texte); letter-spacing: .1em; text-transform: uppercase; background: rgba(244, 244, 241, .72); transform: rotate(-14deg); }
.cachet b { display: block; font: 700 1.55rem/1 var(--titre); letter-spacing: -.02em; text-transform: none; margin-top: .15rem; }
.cachet-d { right: -26px; top: -34px; }
.cachet-g { left: -34px; top: -38px; transform: rotate(10deg); }
.halte-image:has(.photo.vide) { width: min(100%, 340px); }

/* Apparitions, seulement quand le script tourne (sans lui, tout reste visible) */
.anime .halte-texte { opacity: .2; transform: translateY(26px); transition: opacity .9s var(--sortie), transform .9s var(--sortie); }
.anime .halte-image > :first-child { opacity: 0; clip-path: inset(0 0 100% 0); transform: rotate(var(--rot, 0deg)) translateY(40px); transition: opacity .6s, clip-path 1.2s var(--sortie) .15s, transform 1.2s var(--sortie) .15s; }
.anime .halte-image > .timbre:first-child { transform: rotate(-1.5deg) translateY(40px); }
.anime .cachet { opacity: 0; scale: 1.8; transition: opacity .25s 1s, scale .35s cubic-bezier(.3, 1.6, .5, 1) 1s; }
.anime .halte.atteint .halte-texte { opacity: 1; transform: none; }
.anime .halte.atteint .halte-image > :first-child { opacity: 1; clip-path: inset(0 0 0 0); transform: rotate(var(--rot, 0deg)); }
.anime .halte.atteint .halte-image > .timbre:first-child { transform: rotate(-1.5deg); }
.anime .halte.atteint .cachet { opacity: .92; scale: 1; }
.halte.atteint .carte mask path, html:not(.anime) .carte mask path { stroke-dashoffset: 0; }

/* Page de protection des données: des titres plus petits, la page est longue */
a[href^="tel:"]:not(.tuile), .tuile[href^="tel:"] h3 { white-space: nowrap; }
.page-legale .deux-col h2 { font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2rem); }

/* Les photos du drone: galerie du nouveau refuge et vue d'accès */
.galerie .galerie-photo { border: 0; padding: 0; display: block; aspect-ratio: auto; text-align: left; }
.galerie-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; }
.galerie-photo figcaption { margin-top: .5rem; font-size: .85rem; color: var(--gris); line-height: 1.35; }
.photo-acces { margin: 14px 0 0; }
.photo-acces img { display: block; width: 100%; height: auto; border-radius: var(--rayon); }

/* Liste des engagements du contrat d'adoption */
.engagements { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: .75rem; }
.engagements li { position: relative; padding-left: 1.7rem; color: var(--gris); }
.engagements li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 2px var(--vert); }

/* Galerie de chantier */
.galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.galerie figure { margin: 0; border-radius: 22px; aspect-ratio: 4 / 3; border: 2px dashed #cfd3cc; display: grid; place-items: center; text-align: center; padding: 1rem; color: var(--gris); font-size: .92rem; }

/* Questions et recherche */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.faq-tete { position: sticky; top: 112px; }
.faq-tete h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); }
.faq-tete .petit a { color: var(--vert); font-weight: 700; }
.recherche { display: block; position: relative; margin: 1.6rem 0 1rem; }
.recherche input { width: 100%; font: 400 1.05rem/1.2 var(--texte); padding: 1.05rem 1.3rem 1.05rem 3rem; border-radius: 999px; border: 1px solid var(--filet); background: var(--blanc); color: var(--encre); }
.recherche svg { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; stroke: var(--gris); }
.questions { display: grid; gap: 10px; }
.questions details { background: var(--blanc); border-radius: 20px; padding: 0 1.4rem; }
.questions summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 1.2rem 0; font: 700 1.15rem/1.3 var(--titre); letter-spacing: -.015em; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; font: 400 1.5rem/1 var(--texte); color: var(--vert); transition: transform .3s var(--sortie); }
.questions details[open] summary::after { transform: rotate(45deg); }
.questions details > div { padding: 0 0 1.3rem; color: var(--gris); }
.questions details > div p:last-child { margin: 0; }
.questions .aucune { text-align: center; color: var(--gris); display: none; }

/* Don */
.don-carte { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 2.5rem; align-items: center; }
.iban { font: 700 clamp(1.4rem, 1rem + 1.1vw, 2rem)/1.15 var(--titre); letter-spacing: -.01em; margin: .3rem 0 .5rem; white-space: nowrap; }
.qr { margin: 0; width: 160px; }
.qr img { width: 160px; height: 160px; image-rendering: pixelated; border-radius: 12px; }
.copier[data-fait] { background: var(--vert); color: #fff; }
.t-twint { flex-direction: row; align-items: center; }
.t-twint .qr, .t-twint .qr img { width: 150px; height: 150px; flex: none; }
.raisons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.raison { background: var(--blanc); border-radius: 22px; padding: 1.6rem; }
.raison .icone { width: 52px; height: 52px; border-radius: 16px; background: var(--vert-clair); display: grid; place-items: center; margin-bottom: 1.1rem; }
.raison .icone svg { width: 26px; height: 26px; stroke: var(--vert); }
.raison h3 { font-size: 1.35rem; margin-bottom: .4rem; }
.raison p { margin: 0; color: var(--gris); }

/* Partenaires */
.logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; list-style: none; }
.logos li { aspect-ratio: 3 / 2; border-radius: 22px; border: 2px dashed #cfd3cc; display: grid; place-items: center; color: var(--gris-clair); font-size: .9rem; text-align: center; padding: 1rem; }

/* Journal */
.journal-une { aspect-ratio: 1 / 1.414; max-width: 300px; background: var(--blanc); border-radius: 18px; padding: 1.4rem; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .4); }
.journal-photo { padding: 0; overflow: hidden; display: block; transition: transform .5s var(--sortie); }
.journal-photo:hover { transform: rotate(-1.5deg) translateY(-4px); }
.journal-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.journal-une .titre-journal { font: 700 2rem/1 var(--titre); letter-spacing: -.04em; color: var(--vert); margin: 0 0 .4rem; }
.journal-une .journal-numero { font-size: .85rem; color: var(--gris); margin: 0; padding-bottom: .8rem; border-bottom: 2px solid var(--vert); }
.journal-sommaire { list-style: none; font-weight: 700; font-size: .98rem; }
.journal-sommaire li { padding: .45rem 0; border-bottom: 1px solid var(--filet); }
.journal-une .numero { font-size: .78rem; color: var(--gris); margin: 0; }

/* Plan d'accès */
.plan { width: 100%; height: auto; border-radius: var(--rayon); }
.plan .plan-lieu { font: 700 15px var(--texte); fill: var(--encre); paint-order: stroke; stroke: #f4f6f1; stroke-width: 4px; stroke-linejoin: round; }
.plan .plan-refuge { fill: var(--vert); }
.plan .plan-rue { font: 12px var(--texte); fill: var(--gris); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.plan .plan-eau { font: italic 14px var(--texte); fill: #5f7a68; paint-order: stroke; stroke: #f4f6f1; stroke-width: 3px; }

/* Pied de page */
.pied { margin-top: clamp(3rem, 7vw, 5rem); background: var(--blanc); padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem; font-size: .95rem; }
.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; }
.pied img { height: 80px; width: auto; margin-bottom: 1rem; }
.pied h2 { font: 700 .82rem/1 var(--texte); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); margin: 0 0 .9rem; }
.pied ul { list-style: none; }
.pied li { margin-bottom: .45rem; }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--vert); text-decoration: underline; }
.pied address { font-style: normal; color: var(--gris); }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--filet); font-size: .85rem; color: var(--gris); }

/* Apparition au défilement */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--sortie), transform .9s var(--sortie); }
[data-reveal].vu { opacity: 1; transform: none; }

@media (max-width: 1060px) {
  .nav { display: none; }
  .menu-bouton { display: inline-flex; }
  .marque img { height: 54px; }
  .menu-mobile[data-ouvert] { display: block; padding-bottom: 1.2rem; }
  .menu-mobile ul { list-style: none; }
  .menu-mobile li a { display: block; padding: .85rem 0; border-bottom: 1px solid var(--filet); font: 700 1.35rem/1.2 var(--titre); letter-spacing: -.02em; text-decoration: none; }
  .menu-mobile .btn { width: 100%; margin-top: 1.1rem; }
}
@media (max-width: 960px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .t-4, .t-6, .t-3 { grid-column: span 2; }
  .t-2 { grid-column: span 1; }
  .t-haute { grid-row: auto; min-height: 440px; }
  .scene-cadre { aspect-ratio: 4 / 3; }
  .preuve.p2 { display: none; }
  .deux-col, .faq { grid-template-columns: 1fr; }
  .faq-tete { position: static; }
  .raisons, .galerie { grid-template-columns: 1fr 1fr; }
  .logos { grid-template-columns: repeat(3, 1fr); }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .photo-large { aspect-ratio: 4 / 3; }
}
@media (max-width: 860px) {
  .depart-tete { grid-template-columns: 1fr; }
  .depart::after { left: 22px; }
  .halte, .halte:nth-of-type(even) { grid-template-columns: 44px 1fr; row-gap: 2.2rem; align-items: start; padding-block: 2.5rem; }
  .halte-point { grid-column: 1; grid-row: 1; margin-top: .9rem; }
  .halte .halte-texte, .halte:nth-of-type(even) .halte-texte { grid-column: 2; grid-row: 1; }
  .halte .halte-image, .halte:nth-of-type(even) .halte-image { grid-column: 2; grid-row: 2; justify-self: start; width: min(100% - 24px, 420px); }
  .cachet { width: 96px; height: 96px; font-size: .58rem; }
  .cachet b { font-size: 1.25rem; }
  .cachet-d, .cachet-g { left: auto; right: -4px; top: -30px; }
}
@media (max-width: 600px) {
  .depart .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento, .raisons, .galerie { grid-template-columns: 1fr; }
  .t-2, .t-3, .t-4, .t-6 { grid-column: span 1; }
  .marque span { display: none; }
  .don-carte { grid-template-columns: 1fr; }
  .t-twint { flex-direction: column; align-items: flex-start; }
  .iban { white-space: normal; }
  .logos { grid-template-columns: 1fr 1fr; }
  .pied-grille { grid-template-columns: 1fr; }
  .tableau th, .tableau td { display: block; width: auto; padding: 0; border: 0; }
  .tableau tr { display: block; padding: .8rem 0; border-bottom: 1px solid var(--filet); }
  .tableau th { margin-bottom: .2rem; }
  .preuve.p1 { left: 4%; right: 4%; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .trace-halo { display: none; }
  .scene-cadre { transform: none; }
}

/* Petits ajustements (pas d'attribut style, la politique de sécurité les bloque) */
[data-x="espace"] { margin-top: 1.2rem; }
[data-x="sansmarge"] { margin: 0; }
[data-x="sanshaut"] { padding-top: 0; }
[data-x="centre"], .actions.centre { justify-content: center; }
.t-mail h3 { font-size: clamp(1.1rem, .85rem + .7vw, 1.4rem); overflow-wrap: anywhere; }

/* 26.10.2026: refonte selon le cahier de remarques de la SPA */
.ouverture .btn-blanc { box-shadow: inset 0 0 0 1.5px var(--filet); }
.sommaire { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.sommaire a { display: inline-block; padding: .55em 1.05em; border-radius: 999px; background: var(--blanc); color: var(--encre); text-decoration: none; font-weight: 700; font-size: .92rem; transition: background-color .2s; }
.sommaire a:hover { background: var(--vert-clair); }
.titre-section { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); margin: 0 0 1.4rem; }
.halte details { margin-top: .9rem; }
.halte summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .45em; color: var(--vert); font-weight: 700; }
.halte summary::-webkit-details-marker { display: none; }
.halte summary::after { content: "+"; font-weight: 400; font-size: 1.3em; line-height: 1; transition: transform .3s var(--sortie); }
.halte details[open] summary::after { transform: rotate(45deg); }
.halte details > div { margin-top: .6rem; }
.portraits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 14px 0 0; padding: 0; list-style: none; }
.portraits img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; }
@media (max-width: 760px) { .portraits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.questions .tableau { margin-bottom: .6rem; }
#nouveau-refuge .depart::after { display: none; }
.deux-col > * { min-width: 0; }
a[href^="mailto:"] { overflow-wrap: anywhere; }
.urgence { margin-block: clamp(1.6rem, 3vw, 2.4rem); }
.benevolat-photo { display: block; width: min(100%, 320px); height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; margin-top: 1.4rem; }
.photo-large + .portraits { margin-top: 14px; }

/* 27.10.2026: retours de la séance avec Céline (le vert des ailes du logo, le logo dans l'accueil, des photos en tête de page) */
:root { --lime: #b4cc6c; --chat: #4f8a4f; --vert-clair: #e9f0dc; }
.ouverture h1 .doux { color: var(--chat); }
.btn-noir { background: var(--vert); }
.btn-noir:hover { background: var(--chat); }
.ouverture-grille { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2rem clamp(2rem, 5vw, 4.5rem); align-items: center; text-align: left; }
.ouverture-texte { grid-column: 1; grid-row: 1; }
.ouverture-logo { grid-column: 2; grid-row: 1 / 3; width: clamp(170px, 19vw, 270px); height: auto; filter: drop-shadow(0 24px 32px rgba(47, 90, 54, .18)); }
.ouverture-grille .actions { grid-column: 1; grid-row: 2; justify-content: flex-start; margin-top: .4rem; }
.ouverture-grille h1 { font-size: clamp(2.5rem, 1.2rem + 4.4vw, 5.4rem); max-width: 12ch; margin-inline: 0; }
.ouverture-grille .sous { margin-inline: 0; }
@media (max-width: 760px) {
  .ouverture-grille { grid-template-columns: 1fr; text-align: center; }
  .ouverture-logo { grid-column: 1; grid-row: 1; justify-self: center; width: 120px; }
  .ouverture-texte { grid-row: 2; }
  .ouverture-grille .actions { grid-row: 3; justify-content: center; }
  .ouverture-grille h1, .ouverture-grille .sous { margin-inline: auto; }
}
.tete-page.avec-photo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.6rem, 4vw, 3.6rem); align-items: center; text-align: left; }
.tete-page.avec-photo h1 { font-size: clamp(2.3rem, 1.2rem + 3.4vw, 4.4rem); margin-inline: 0; max-width: 16ch; }
.tete-page.avec-photo .sous { margin-inline: 0; }
.tete-page.avec-photo .actions, .tete-page.avec-photo .sommaire { justify-content: flex-start; }
.tete-photo { margin: 0; }
.tete-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); box-shadow: 0 30px 60px -40px rgba(20, 22, 20, .5); }
@media (max-width: 860px) { .tete-page.avec-photo { grid-template-columns: 1fr; } .tete-photo { order: -1; } }
.raison-photo { padding: 0 0 1.4rem; overflow: hidden; }
.raison-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 1.1rem; }
.raison-photo h3, .raison-photo p { padding-inline: 1.4rem; }
.billet.merci .grand-chiffre { font-size: clamp(2.6rem, 1.6rem + 2.6vw, 4.2rem); line-height: .95; }
.logos li b { color: var(--encre); font: 700 1.2rem/1.2 var(--titre); }
.logos.noms li { border: 0; background: var(--blanc); }
.logos + .titre-section { margin-top: clamp(2rem, 4vw, 3rem); }
.logos { padding: 0; margin-block: 0; } .logos li { min-width: 0; overflow-wrap: anywhere; }

/* ================= 27.10.2026: police choisie (n° 6), chat animé, bouton Nous soutenir, couleurs, réglages ================= */
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-700-latin.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-500-Italic-latin.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-600-Italic-latin.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }

/* La police des titres: Cormorant Garamond (choisie le 27.10), Bricolage en réglage pour comparer */
html[data-police="cormorant"] { --titre: "Cormorant Garamond", Georgia, "Times New Roman", serif; }
html[data-police="cormorant"] :is(h1, h2, h3, .grand-chiffre, .important strong, .marque span) { font-weight: 600; letter-spacing: -.012em; font-size-adjust: ex-height .47; }
html[data-police="cormorant"] :is(.ouverture h1, .tete-page h1, .affirmation h2) { letter-spacing: -.02em; line-height: 1; }
html[data-police="cormorant"] .ouverture h1 .doux { font-style: italic; }
html[data-police="cormorant"] .marque span { font-size: 1.15rem; }

/* ---------- le chat animé de l'accueil */
.chat-anime { grid-column: 2; grid-row: 1 / 3; width: clamp(170px, 19vw, 270px); filter: drop-shadow(0 24px 32px rgba(47, 90, 54, .18)); }
.chat-anime svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (max-width: 760px) { .chat-anime { grid-column: 1; grid-row: 1; justify-self: center; width: 130px; } }
.ca-corps, .ca-oeil, .ca-patte, .ca-langue, .ca-etoile { transform-box: fill-box; }
.ca-corps { transform-origin: 50% 100%; }
.ca-cache { fill: #5a9555; }
.ca-amande { fill: #e7f0c4; stroke: #24604a; stroke-width: 4; stroke-linejoin: round; }
.ca-pupille { fill: #1d4636; }
.ca-reflet { fill: #fff; }
.ca-oeil { opacity: 0; transform-origin: 50% 55%; }
.ca-langue { fill: #ef9aae; stroke: #24604a; stroke-width: 2.5; opacity: 0; transform-origin: 50% 0; }
.ca-coussin { fill: #5a9555; stroke: #24604a; stroke-width: 4; stroke-linejoin: round; }
.ca-doigts { fill: none; stroke: #24604a; stroke-width: 3.5; stroke-linecap: round; }
.ca-patte { opacity: 0; transform-origin: 50% 100%; }
.ca-etoile { transform-origin: 50% 50%; }
.chat-anime[data-anim="clin"] .ca-oeil { animation: ca-clin 6s ease-in-out infinite; }
.chat-anime[data-anim="toilette"] .ca-patte { animation: ca-patte 6s ease-in-out infinite; }
.chat-anime[data-anim="toilette"] .ca-langue { animation: ca-langue 6s ease-in-out infinite; }
.chat-anime[data-anim="toilette"] .ca-corps { animation: ca-penche 6s ease-in-out infinite; }
.chat-anime[data-anim="etoile"] .ca-etoile { animation: ca-scintille 3s ease-in-out infinite; }
.chat-anime[data-anim="souffle"] .ca-corps { animation: ca-souffle 3.4s ease-in-out infinite alternate; }
.chat-anime[data-quand="survol"]:not(.joue) * { animation: none !important; }
@keyframes ca-clin {
  0%, 10% { opacity: 0; transform: scaleY(.15); }
  16% { opacity: 1; transform: scaleY(1); }
  42% { opacity: 1; transform: scaleY(1); }
  46% { opacity: 1; transform: scaleY(.1); }
  51% { opacity: 1; transform: scaleY(1); }
  74% { opacity: 1; transform: scaleY(1); }
  82%, 100% { opacity: 0; transform: scaleY(.15); }
}
@keyframes ca-patte {
  0%, 8% { opacity: 0; transform: translateY(48px); }
  20% { opacity: 1; transform: translateY(0); }
  30% { transform: translate(-3px, 3px) rotate(-7deg); }
  40% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(-3px, 3px) rotate(-7deg); }
  60% { transform: translate(0, 0) rotate(0); opacity: 1; }
  76%, 100% { opacity: 0; transform: translateY(48px); }
}
@keyframes ca-langue {
  0%, 22% { opacity: 0; transform: scaleY(0); }
  27% { opacity: 1; transform: scaleY(1); }
  33% { opacity: 0; transform: scaleY(0); }
  43% { opacity: 1; transform: scaleY(1); }
  49%, 100% { opacity: 0; transform: scaleY(0); }
}
@keyframes ca-penche { 0%, 12% { transform: none; } 24%, 60% { transform: rotate(-2.2deg); } 76%, 100% { transform: none; } }
@keyframes ca-scintille {
  0%, 100% { transform: scale(1) rotate(0); opacity: 1; }
  25% { transform: scale(1.4) rotate(18deg); opacity: 1; }
  45% { transform: scale(.75) rotate(-10deg); opacity: .55; }
  65% { transform: scale(1.15) rotate(6deg); opacity: 1; }
}
@keyframes ca-souffle { from { transform: scale(1, 1); } to { transform: scale(1.012, 1.022); } }

/* ---------- le bouton «Nous soutenir» qui suit la page */
.soutien-flottant { position: fixed; z-index: 40; right: 18px; bottom: 18px; display: none; align-items: center; gap: .55rem; text-decoration: none; color: #fff; font: 700 .98rem/1 var(--texte); opacity: 0; transform: translateY(16px); transition: opacity .35s, transform .35s var(--sortie); }
.soutien-flottant.visible { opacity: 1; transform: none; }
.soutien-flottant img { display: block; height: auto; }
.sf-buste, .sf-coeur { display: none; }
.sf-coeur { position: absolute; color: #e8607d; font-size: 1.2rem; pointer-events: none; }
html[data-soutien="pastille"] .soutien-flottant, html[data-soutien="bulle"] .soutien-flottant, html[data-soutien="coucou"] .soutien-flottant, html[data-soutien="onglet"] .soutien-flottant { display: flex; }
/* pastille */
html[data-soutien="pastille"] .soutien-flottant { background: var(--vert); border-radius: 999px; padding: .4rem 1.15rem .4rem .45rem; box-shadow: 0 16px 34px -18px rgba(20, 40, 25, .55); }
html[data-soutien="pastille"] .sf-tete { width: 42px; background: var(--vert-clair); border-radius: 50%; padding: 3px; transition: transform .4s var(--sortie); }
html[data-soutien="pastille"] .soutien-flottant:hover { background: var(--chat); transform: translateY(-3px); }
html[data-soutien="pastille"] .soutien-flottant:hover .sf-tete { animation: sf-remue .7s ease-in-out; }
html[data-soutien="pastille"] .sf-coeur { display: block; left: 30px; top: -6px; opacity: 0; transform: translateY(6px) scale(.4); transition: opacity .3s, transform .45s var(--sortie); }
html[data-soutien="pastille"] .soutien-flottant:hover .sf-coeur { opacity: 1; transform: translateY(-14px) scale(1); }
/* bulle ronde qui s'ouvre au survol */
html[data-soutien="bulle"] .soutien-flottant { background: var(--vert); border-radius: 999px; padding: 6px; box-shadow: 0 16px 34px -18px rgba(20, 40, 25, .55); }
html[data-soutien="bulle"] .sf-tete { width: 52px; background: var(--vert-clair); border-radius: 50%; padding: 4px; }
html[data-soutien="bulle"] .sf-texte { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .45s var(--sortie), padding .45s; }
html[data-soutien="bulle"] .soutien-flottant:hover .sf-texte, html[data-soutien="bulle"] .soutien-flottant:focus-visible .sf-texte { max-width: 12rem; padding-right: .8rem; }
html[data-soutien="bulle"] .soutien-flottant:hover .sf-tete { animation: sf-remue .7s ease-in-out; }
/* le chat qui dépasse du bas de l'écran */
html[data-soutien="coucou"] .soutien-flottant { right: 22px; bottom: 0; color: var(--encre); flex-direction: column; align-items: flex-end; gap: 0; }
html[data-soutien="coucou"] .sf-tete { display: none; }
html[data-soutien="coucou"] .sf-buste { display: block; width: 150px; margin-bottom: -58px; transition: margin .45s var(--sortie), transform .45s var(--sortie); }
html[data-soutien="coucou"] .sf-texte { order: -1; background: var(--blanc); border-radius: 16px 16px 4px 16px; padding: .6rem .9rem; box-shadow: 0 14px 30px -18px rgba(20, 22, 20, .45); opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s var(--sortie); }
html[data-soutien="coucou"] .soutien-flottant:hover .sf-buste, html[data-soutien="coucou"] .soutien-flottant:focus-visible .sf-buste { margin-bottom: -6px; }
html[data-soutien="coucou"] .soutien-flottant:hover .sf-texte, html[data-soutien="coucou"] .soutien-flottant:focus-visible .sf-texte { opacity: 1; transform: none; }
/* l'onglet sur le bord droit */
html[data-soutien="onglet"] .soutien-flottant { right: 0; bottom: 34%; flex-direction: column; background: var(--vert); border-radius: 16px 0 0 16px; padding: .5rem .55rem .9rem; transform: translateX(6px); }
html[data-soutien="onglet"] .soutien-flottant.visible { transform: translateX(6px); }
html[data-soutien="onglet"] .sf-tete { width: 40px; margin-top: -26px; transition: transform .4s var(--sortie); }
html[data-soutien="onglet"] .sf-texte { writing-mode: vertical-rl; transform: rotate(180deg); }
html[data-soutien="onglet"] .soutien-flottant:hover { transform: translateX(0); background: var(--chat); }
html[data-soutien="onglet"] .soutien-flottant:hover .sf-tete { transform: translateY(-6px) rotate(-8deg); }
@keyframes sf-remue { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 50% { transform: rotate(9deg); } 75% { transform: rotate(-5deg); } }
@media (max-width: 600px) {
  html[data-soutien="pastille"] .soutien-flottant { padding-right: .9rem; font-size: .9rem; }
  html[data-soutien="coucou"] .sf-buste { width: 116px; margin-bottom: -44px; }
}

/* ---------- les couleurs */
html[data-couleur="vert"] .tete-page.avec-photo, html[data-couleur="vif"] .tete-page.avec-photo { background: var(--vert-clair); border-radius: var(--rayon); padding-inline: clamp(1.4rem, 3.5vw, 3rem); margin-top: 1.2rem; }
html[data-couleur="vert"] .raison, html[data-couleur="vif"] .raison { background: var(--vert-clair); }
html[data-couleur="vert"] :is(.titre-section, .affirmation h2), html[data-couleur="vif"] :is(.titre-section, .affirmation h2) { color: var(--vert); }
html[data-couleur="vert"] .pied, html[data-couleur="vif"] .pied { background: var(--vert); color: #fff; }
html[data-couleur="vert"] .pied :is(h2, address, .pied-bas, .discret), html[data-couleur="vif"] .pied :is(h2, address, .pied-bas, .discret) { color: rgba(255, 255, 255, .78); }
html[data-couleur="vert"] .pied a:hover, html[data-couleur="vif"] .pied a:hover { color: var(--lime); }
html[data-couleur="vert"] .pied-bas, html[data-couleur="vif"] .pied-bas { border-top-color: rgba(255, 255, 255, .2); }
html[data-couleur="vert"] .pied img, html[data-couleur="vif"] .pied img { background: #fff; border-radius: 14px; padding: 6px; }
html[data-couleur="vif"] body { background: #eef3e2; }
html[data-couleur="vif"] .tete-page.avec-photo { background: var(--lime); }
html[data-couleur="vif"] .tete-page.avec-photo .sous { color: var(--encre); }
html[data-couleur="vif"] .t-pale { background: var(--lime); }
html[data-couleur="vif"] .carte-texte { box-shadow: inset 0 0 0 2px var(--vert-clair); }
html[data-couleur="vif"] .btn-blanc { background: var(--lime); }
html[data-couleur="vif"] .etiquette { color: var(--chat); }

/* ---------- le panneau de réglages */
.reglages { position: fixed; z-index: 45; left: 16px; bottom: 16px; font: 400 .9rem/1.3 var(--texte); }
.rg-bouton { display: inline-flex; align-items: center; gap: .45rem; border: 0; border-radius: 999px; background: var(--encre); color: #fff; padding: .6rem .95rem; font: 700 .85rem/1 var(--texte); cursor: pointer; box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .5); }
.rg-bouton svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.rg-panneau { position: absolute; left: 0; bottom: calc(100% + 10px); width: min(330px, calc(100vw - 32px)); max-height: min(70vh, 620px); overflow: auto; background: var(--blanc); border-radius: 20px; padding: 1rem 1.1rem 1.1rem; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .45); }
.rg-titre { font-weight: 700; margin: 0 0 .5rem; }
.rg-panneau fieldset { border: 0; margin: 0 0 .8rem; padding: 0; }
.rg-panneau legend { font-weight: 700; font-size: .78rem; color: var(--gris); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .35rem; }
.rg-choix { display: flex; flex-wrap: wrap; gap: 6px; }
.rg-choix button { border: 1px solid var(--filet); background: var(--fond); color: var(--encre); border-radius: 999px; padding: .38rem .7rem; font: 500 .82rem/1.1 var(--texte); cursor: pointer; }
.rg-choix button[aria-pressed="true"] { background: var(--vert); border-color: var(--vert); color: #fff; }
.rg-note { font-size: .78rem; color: var(--gris); margin: .2rem 0 .5rem; }
.rg-lien { border: 0; background: var(--vert-clair); color: var(--vert); border-radius: 999px; padding: .5rem .85rem; font: 700 .82rem/1 var(--texte); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .chat-anime *, .soutien-flottant, .soutien-flottant * { animation: none !important; transition: none !important; } }
@media print { .reglages, .soutien-flottant { display: none !important; } }
.sous-titre-galerie { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); margin: 1.2rem 0 0; }
html[data-police="cormorant"] .ouverture-grille h1 { max-width: 15ch; font-size: clamp(2.4rem, 1.1rem + 3.8vw, 5rem); }
.soutien-flottant .sf-buste { display: none; }
html[data-soutien="coucou"] .soutien-flottant .sf-buste { display: block; }
html[data-soutien="coucou"] .soutien-flottant .sf-tete { display: none; }
html[data-couleur="vert"] .tete-page.avec-photo, html[data-couleur="vif"] .tete-page.avec-photo { width: calc(100% - 2 * var(--m)); max-width: var(--max); margin-inline: auto; padding-inline: clamp(1.2rem, 3.5vw, 3rem); }
.iban { font-family: var(--texte); letter-spacing: 0; }
html[data-couleur="vert"] .tete-page.avec-photo, html[data-couleur="vif"] .tete-page.avec-photo { margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }

/* positions des traces de pattes (fond «pattes» de l'accueil) */
.hp-trace[data-i="0"] { left: 6%; top: 82%; --r: 25deg; animation-delay: 0.00s; }
.hp-trace[data-i="1"] { left: 12%; top: 70%; --r: 45deg; animation-delay: 0.45s; }
.hp-trace[data-i="2"] { left: 19%; top: 64%; --r: 25deg; animation-delay: 0.90s; }
.hp-trace[data-i="3"] { left: 25%; top: 52%; --r: 45deg; animation-delay: 1.35s; }
.hp-trace[data-i="4"] { left: 32%; top: 47%; --r: 25deg; animation-delay: 1.80s; }
.hp-trace[data-i="5"] { left: 38%; top: 35%; --r: 45deg; animation-delay: 2.25s; }
.hp-trace[data-i="6"] { left: 45%; top: 30%; --r: 25deg; animation-delay: 2.70s; }
.hp-trace[data-i="7"] { left: 51%; top: 19%; --r: 45deg; animation-delay: 3.15s; }
.hp-trace[data-i="8"] { left: 58%; top: 15%; --r: 25deg; animation-delay: 3.60s; }
.hp-trace[data-i="9"] { left: 64%; top: 5%; --r: 45deg; animation-delay: 4.05s; }

/* ================= 27.10.2026 (suite): polices 7, 9 et 12 en réglage, et cinq structures d'accueil ================= */
@font-face { font-family: "Lora"; src: url("../fonts/Lora-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/Lora-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/Lora-500-Italic-latin.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Josefin Sans"; src: url("../fonts/JosefinSans-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Josefin Sans"; src: url("../fonts/JosefinSans-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Josefin Sans"; src: url("../fonts/JosefinSans-400-Italic-latin.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
html[data-police="lora"] { --titre: "Lora", Georgia, serif; }
html[data-police="manrope"] { --titre: "Manrope", "Helvetica Neue", Arial, sans-serif; }
html[data-police="josefin"] { --titre: "Josefin Sans", "Helvetica Neue", Arial, sans-serif; }
html[data-police="lora"] :is(h1, h2, h3, .grand-chiffre, .important strong, .marque span) { font-weight: 500; letter-spacing: -.015em; font-size-adjust: ex-height .5; }
html[data-police="manrope"] :is(h1, h2, h3, .grand-chiffre, .important strong, .marque span) { font-weight: 500; letter-spacing: -.03em; font-size-adjust: ex-height .5; }
html[data-police="josefin"] :is(h1, h2, h3, .grand-chiffre, .important strong, .marque span) { font-weight: 400; letter-spacing: -.01em; font-size-adjust: ex-height .48; }
html:is([data-police="lora"], [data-police="josefin"]) .ouverture h1 .doux { font-style: italic; }
html:is([data-police="lora"], [data-police="manrope"], [data-police="josefin"]) .ouverture-grille h1 { max-width: 15ch; font-size: clamp(2.3rem, 1.1rem + 3.6vw, 4.8rem); line-height: 1.02; }

/* ---------- les fonds de l'accueil */
.ouverture { position: relative; }
.ouverture > .cadre, .ouverture > .scene { position: relative; z-index: 1; }
.hero-fond { display: none; }
.hf-drone, .hf-mosaique, .hf-pattes, .hf-vague { display: none; position: absolute; inset: 0; }
html:is([data-hero="drone"], [data-hero="mosaique"], [data-hero="pattes"], [data-hero="vague"]) .hero-fond { display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
html[data-hero="drone"] .hf-drone, html[data-hero="mosaique"] .hf-mosaique, html[data-hero="pattes"] .hf-pattes, html[data-hero="vague"] .hf-vague { display: block; }

/* 1. Vue du drone en fond: les vues du ciel s'enchaînent en zoom lent, comme un survol */
html:is([data-hero="drone"], [data-hero="mosaique"]) .ouverture { min-height: min(94vh, 920px); display: grid; align-content: center; padding-block: clamp(6rem, 11vw, 9rem) clamp(4rem, 8vw, 6rem); }
html:is([data-hero="drone"], [data-hero="mosaique"]) .ouverture .scene { display: none; }
.hf-drone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: hf-survol 24s linear infinite; }
.hf-drone img:nth-child(2) { animation-delay: 8s; }
.hf-drone img:nth-child(3) { animation-delay: 16s; }
.hf-drone::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 28, 16, .82), rgba(12, 28, 16, .5) 55%, rgba(12, 28, 16, .18)), linear-gradient(0deg, rgba(12, 28, 16, .45), transparent 45%); }
@keyframes hf-survol {
  0% { opacity: 0; transform: scale(1.06) translate(1.5%, 1%); }
  5% { opacity: 1; }
  33% { opacity: 1; }
  40% { opacity: 0; transform: scale(1.2) translate(-2%, -1.5%); }
  100% { opacity: 0; transform: scale(1.2) translate(-2%, -1.5%); }
}
html[data-hero="drone"] .ouverture-grille { color: #fff; }
html[data-hero="drone"] .ouverture h1 { color: #fff; }
html[data-hero="drone"] .ouverture h1 .doux { color: var(--lime); }
html[data-hero="drone"] .ouverture :is(.sous, .surtitre) { color: rgba(255, 255, 255, .88); }
html[data-hero="drone"] .chat-anime { background: rgba(255, 255, 255, .92); border-radius: var(--rayon); padding: 16px 18px 10px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
html[data-hero="drone"] .ouverture .btn-blanc { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
html[data-hero="drone"] .ouverture .btn-noir { background: var(--lime); color: var(--encre); }

/* 2. Mosaïque de chats qui défile: des colonnes de photos montent et descendent, le texte dans une carte au centre */
.hm-grille { position: absolute; inset: -20% -10%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; transform: rotate(-7deg); }
.hm-col { display: flex; flex-direction: column; gap: 14px; animation: hm-monte 46s linear infinite; }
.hm-col:nth-child(even) { animation-name: hm-descend; animation-duration: 54s; }
.hm-col img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; }
@keyframes hm-monte { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes hm-descend { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.hf-mosaique::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(244, 244, 241, .55), rgba(244, 244, 241, .15) 70%); }
html[data-hero="mosaique"] .ouverture-grille { max-width: 1020px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 32px; padding: clamp(1.6rem, 4vw, 3.4rem); box-shadow: 0 40px 90px -40px rgba(20, 30, 20, .5); }

/* 3. Traces de pattes animées: un chat invisible traverse la page; le chat au centre */
html[data-hero="pattes"] .ouverture { background: radial-gradient(ellipse at 20% 0%, var(--vert-clair), transparent 60%), radial-gradient(ellipse at 90% 30%, #eef4dd, transparent 55%); }
.hp-trace { position: absolute; width: clamp(26px, 3vw, 42px); height: auto; fill: var(--chat); opacity: 0; transform: rotate(var(--r)); animation: hp-pas 6s ease-in-out infinite; }
@keyframes hp-pas { 0% { opacity: 0; transform: rotate(var(--r)) scale(.6); } 8% { opacity: .5; transform: rotate(var(--r)) scale(1); } 55% { opacity: .35; } 80%, 100% { opacity: 0; transform: rotate(var(--r)) scale(1); } }
html[data-hero="pattes"] .ouverture-grille { grid-template-columns: 1fr; justify-items: center; text-align: center; }
html[data-hero="pattes"] .chat-anime { grid-column: 1; grid-row: 1; width: clamp(150px, 16vw, 220px); }
html[data-hero="pattes"] .ouverture-texte { grid-column: 1; grid-row: 2; }
html[data-hero="pattes"] .ouverture-grille .actions { grid-column: 1; grid-row: 3; justify-content: center; }
html[data-hero="pattes"] .ouverture-grille :is(h1, .sous) { margin-inline: auto; }

/* 4. Fond vert qui ondule: des taches de couleur qui flottent et une vague en bas */
.hv-tache { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; }
.hv-1 { width: 46vw; height: 46vw; left: -12vw; top: -14vw; background: var(--lime); animation: hv-flotte 18s ease-in-out infinite alternate; }
.hv-2 { width: 38vw; height: 38vw; right: -10vw; top: 6vw; background: #9fc59a; animation: hv-flotte 22s ease-in-out infinite alternate-reverse; }
.hv-3 { width: 30vw; height: 30vw; left: 35vw; top: 26vw; background: var(--vert-clair); animation: hv-flotte 16s ease-in-out infinite alternate; }
@keyframes hv-flotte { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vw, 4vw) scale(1.12); } }
.hv-onde { position: absolute; left: 0; bottom: 0; width: 200%; height: 90px; fill: rgba(79, 138, 79, .16); animation: hv-onde 14s linear infinite; }
.hv-onde .hv-onde2 { fill: rgba(180, 204, 108, .22); }
@keyframes hv-onde { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 760px) {
  .hm-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-col:nth-child(n+4) { display: none; }
  html:is([data-hero="drone"], [data-hero="mosaique"]) .ouverture { min-height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .hf-drone img, .hm-col, .hp-trace, .hv-tache, .hv-onde { animation: none !important; }
  .hf-drone img:first-child { opacity: 1; }
  .hp-trace { opacity: .3; }
}
.hf-pattes { bottom: auto; height: min(100%, 860px); }
.hp-trace { width: clamp(34px, 3.6vw, 54px); }
@keyframes hp-pas { 0% { opacity: 0; transform: rotate(var(--r)) scale(.6); } 8% { opacity: .75; transform: rotate(var(--r)) scale(1); } 55% { opacity: .55; } 80%, 100% { opacity: 0; transform: rotate(var(--r)) scale(1); } }
.hf-drone::after { background: linear-gradient(90deg, rgba(12, 28, 16, .7), rgba(12, 28, 16, .36) 55%, rgba(12, 28, 16, .06)), linear-gradient(0deg, rgba(12, 28, 16, .35), transparent 40%); }
.hf-drone::after { background: linear-gradient(90deg, rgba(12, 28, 16, .8), rgba(12, 28, 16, .48) 55%, rgba(12, 28, 16, .1)), linear-gradient(0deg, rgba(12, 28, 16, .35), transparent 40%); }

/* ================= 27.10.2026, sa correction: l'accueil tient dans le premier écran et y est centré, quel que soit le réglage ================= */
.ouverture, html:is([data-hero="drone"], [data-hero="mosaique"]) .ouverture { display: block; min-height: 0; padding-block: 0; }
.ouverture > .ouverture-ecran { position: relative; z-index: 1; }
.ouverture-ecran { display: grid; align-content: center; min-height: calc(100vh - 81px); min-height: calc(100svh - 81px); padding-block: clamp(1.25rem, 4svh, 3rem); }
.ouverture-ecran + .scene { margin-top: 0; }
.ouverture-grille { row-gap: min(1.2rem, 2.2svh); }
.ouverture .surtitre { margin-bottom: min(1rem, 1.8svh); }
.ouverture .sous { margin-top: min(1.5rem, 2.6svh); font-size: clamp(1rem, min(1rem + .35vw, 2.45svh), 1.3rem); }
.ouverture .sous[data-x="espace"] { margin-top: min(1rem, 1.8svh); }
.ouverture-grille .actions { margin-top: min(.4rem, 1svh); }
html[data-police="bricolage"] .ouverture-grille h1 { font-size: min(clamp(2.5rem, 1.2rem + 4.4vw, 5.4rem), 9svh); }
html[data-police="cormorant"] .ouverture-grille h1 { font-size: min(clamp(2.4rem, 1.1rem + 3.8vw, 5rem), 9.2svh); }
html:is([data-police="lora"], [data-police="manrope"], [data-police="josefin"]) .ouverture-grille h1 { font-size: min(clamp(2.3rem, 1.1rem + 3.6vw, 4.8rem), 8.4svh); }
.chat-anime { width: min(clamp(170px, 19vw, 270px), 42svh); }
html[data-hero="mosaique"] .ouverture-grille { padding: clamp(1.3rem, min(3.4vw, 5svh), 3rem); }
/* les pattes: tout au centre, le chat plus petit au-dessus et le titre sur deux lignes, pour tenir dans l'écran */
html[data-hero="pattes"] .chat-anime { width: min(clamp(100px, 10vw, 150px), 15svh); }
html[data-hero="pattes"] .ouverture-grille h1 { max-width: 22ch; }
html[data-hero="pattes"] .ouverture .sous { max-width: 46rem; }
html[data-hero="mosaique"] .ouverture-grille { max-width: 1160px; }
@media (max-width: 760px) {
  .chat-anime, html[data-hero="pattes"] .chat-anime { width: min(96px, 13svh); }
  html[data-hero="pattes"] .ouverture-grille h1 { max-width: 15ch; }
  .ouverture-ecran { padding-block: clamp(.9rem, 2.4svh, 1.5rem); }
  .ouverture .sous { font-size: 1rem; }
}

/* 27.10.2026: le portrait de Jacqueline Jeannin à la place de la carte «Merci, Jacqueline» */
.photo.portrait img { aspect-ratio: auto; }
.halte-image:has(.photo.portrait) { width: min(100%, 360px); }

/* 28.10.2026: les statuts de l'association, en bas de la page Le refuge */
.statuts details > div h3 { font: 700 .78rem/1.2 var(--texte); letter-spacing: .1em; text-transform: uppercase; color: var(--vert); margin: 1.5rem 0 .45rem; font-size-adjust: none; }
.statuts details > div h3:first-child { margin-top: .1rem; }
.statuts details > div p { margin: 0 0 .7rem; }
.statuts .engagements { margin: .2rem 0 .8rem; }

/* ================= 29.10.2026: les choix faits avec Céline (Lora, le chat qui respire et l'étoile, le chat debout, vif, le drone) ================= */
/* le chat respire, plus visiblement, et l'étoile brille en même temps */
@keyframes ca-souffle { from { transform: scale(1, 1); } to { transform: scale(1.024, 1.05); } }
.chat-anime[data-anim="vie"] .ca-corps { animation: ca-souffle 2.8s ease-in-out infinite alternate; }
.chat-anime[data-anim="vie"] .ca-etoile { animation: ca-scintille 3s ease-in-out infinite; }
.chat-anime[data-anim="souffle"] .ca-corps { animation-duration: 2.8s; }

/* le bouton Nous soutenir: le chat debout, entier, «Nous soutenir» toujours écrit au-dessus, il grandit au survol */
html[data-soutien="coucou"] .soutien-flottant { transform-origin: 100% 100%; }
html[data-soutien="coucou"] .soutien-flottant.visible:hover, html[data-soutien="coucou"] .soutien-flottant.visible:focus-visible { transform: scale(1.12); }
html[data-soutien="coucou"] .sf-buste, html[data-soutien="coucou"] .soutien-flottant:hover .sf-buste, html[data-soutien="coucou"] .soutien-flottant:focus-visible .sf-buste { width: 128px; margin-bottom: 0; }
html[data-soutien="coucou"] .sf-texte { opacity: 1; transform: none; background: var(--vert); color: #fff; margin-bottom: 4px; }
html[data-soutien="coucou"] .soutien-flottant:hover .sf-texte { background: var(--chat); }
@media (max-width: 760px) { html[data-soutien="coucou"] .sf-buste, html[data-soutien="coucou"] .soutien-flottant:hover .sf-buste { width: 96px; margin-bottom: 0; } html[data-soutien="coucou"] .sf-texte { font-size: .86rem; padding: .5rem .75rem; } }

/* le fond vert qui ondule, sur toutes les pages, à la place du vert clair uni */
html[data-couleur="vif"] body::before { content: ""; position: fixed; inset: -25vmax; z-index: -1; pointer-events: none;
  background: radial-gradient(36vmax 28vmax at 22% 28%, rgba(180, 204, 108, .42), transparent 70%), radial-gradient(32vmax 26vmax at 78% 34%, rgba(159, 197, 154, .38), transparent 70%), radial-gradient(40vmax 30vmax at 48% 78%, rgba(255, 255, 255, .55), transparent 70%), radial-gradient(28vmax 22vmax at 84% 82%, rgba(180, 204, 108, .30), transparent 70%);
  animation: fond-ondule 28s ease-in-out infinite alternate; }
html[data-couleur="vif"] body::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 110px; z-index: -1; pointer-events: none; background: url("../img/onde.svg") repeat-x 0 100% / 1440px 110px; animation: fond-vague 22s linear infinite; }
@keyframes fond-ondule { 0% { transform: translate(0, 0) rotate(0deg) scale(1); } 50% { transform: translate(4vmax, -3vmax) rotate(5deg) scale(1.06); } 100% { transform: translate(-3vmax, 3vmax) rotate(-4deg) scale(1.02); } }
@keyframes fond-vague { from { background-position: 0 100%; } to { background-position: -1440px 100%; } }

/* les petites pattes de la page Infos pratiques: dans les marges, derrière le contenu */
.pattes-page { position: absolute; top: 0; left: 0; width: 100%; z-index: -1; pointer-events: none; overflow: hidden; }
.pp { position: absolute; width: 26px; opacity: 0; animation: pp-pas 22s ease-in-out infinite; }
.pp svg { display: block; width: 100%; height: auto; fill: var(--chat); }
.pp-g { left: 2.2%; transform: rotate(168deg); }
.pp-g.pp-b { left: calc(2.2% + 30px); }
.pp-d { right: 2.2%; transform: rotate(192deg); }
.pp-d.pp-b { right: calc(2.2% + 30px); }
@keyframes pp-pas { 0% { opacity: 0; } 2% { opacity: .32; } 22% { opacity: .22; } 34%, 100% { opacity: 0; } }
@media (max-width: 1100px) { .pattes-page { display: none; } }
@media (prefers-reduced-motion: reduce) { html[data-couleur="vif"] body::before, html[data-couleur="vif"] body::after { animation: none; } }

/* ================= 29.10.2026: le site sur téléphone (iPhone et Android), même hiérarchie que sur ordinateur ================= */
html { -webkit-tap-highlight-color: transparent; }
@media (max-width: 760px) {
  /* l'en-tête garde le nom à côté du logo, comme sur ordinateur */
  .marque span { display: block; font-size: .98rem; }
  .marque img { height: 46px; }
  .marque { gap: .55rem; }
  /* les cartes: moins de vide, le texte reste dans le même ordre */
  .tuile { min-height: 0; gap: 1rem; }
  .tuile.t-photo { min-height: 260px; }
  .carte-texte { padding: 1.5rem 1.3rem; }
  .legende, figcaption, .photo figcaption { font-size: .86rem; }
  .statuts details > div h3 { font-size: .8rem; }
  /* iPhone: un champ en dessous de 16 px fait zoomer la page */
  .recherche input, input, select, textarea { font-size: 16px; }
  /* le chat Nous soutenir, plus petit pour ne pas cacher le texte */
  html[data-soutien="coucou"] .soutien-flottant { right: 10px; bottom: env(safe-area-inset-bottom, 0); }
  html[data-soutien="coucou"] .sf-buste, html[data-soutien="coucou"] .soutien-flottant:hover .sf-buste { width: 74px; }
  html[data-soutien="coucou"] .sf-texte { font-size: .8rem; padding: .42rem .65rem; border-radius: 12px 12px 3px 12px; }
  .pied { padding-bottom: 120px; }
  html[data-couleur="vif"] body::after { height: 70px; background-size: 900px 70px; }
}
@media (max-width: 380px) { .marque span { font-size: .9rem; } .marque img { height: 42px; } }
@media (hover: none) { html[data-soutien="coucou"] .soutien-flottant.visible:hover { transform: none; } }

/* 29.10.2026, sa correction: fond qui ondule plus présent, sans la vague du bas; pattes plus voyantes, qui passent sur le bord des encadrés */
html[data-couleur="vif"] body::after { content: none; }
html[data-couleur="vif"] body::before {
  background: radial-gradient(34vmax 27vmax at 20% 26%, rgba(180, 204, 108, .72), transparent 70%), radial-gradient(30vmax 25vmax at 80% 32%, rgba(140, 186, 134, .62), transparent 70%), radial-gradient(38vmax 28vmax at 46% 76%, rgba(255, 255, 255, .6), transparent 70%), radial-gradient(28vmax 22vmax at 86% 84%, rgba(180, 204, 108, .58), transparent 70%), radial-gradient(26vmax 20vmax at 12% 86%, rgba(140, 186, 134, .5), transparent 70%);
  animation: fond-ondule 18s ease-in-out infinite alternate; }
@keyframes fond-ondule { 0% { transform: translate(0, 0) rotate(0deg) scale(1); } 33% { transform: translate(7vmax, -5vmax) rotate(9deg) scale(1.1); } 66% { transform: translate(-6vmax, 4vmax) rotate(-7deg) scale(1.04); } 100% { transform: translate(4vmax, 6vmax) rotate(5deg) scale(1.12); } }
.pattes-page { z-index: 5; }
.pp { width: 34px; }
.pp-g { left: 1.6%; } .pp-g.pp-b { left: calc(1.6% + 38px); }
.pp-d { right: 1.6%; } .pp-d.pp-b { right: calc(1.6% + 38px); }
@keyframes pp-pas { 0% { opacity: 0; } 2% { opacity: .75; } 24% { opacity: .55; } 36%, 100% { opacity: 0; } }
@media (max-width: 1100px) { .pattes-page { display: block; } }
@media (max-width: 760px) { .pattes-page { display: none; } }
/* pattes: une marche par écran, toujours visible; taches vertes ramenées dans l'écran */
.pp { animation-duration: 7s; }
@keyframes pp-pas { 0% { opacity: 0; transform: var(--pp-r) scale(.7); } 6% { opacity: .8; transform: var(--pp-r) scale(1); } 60% { opacity: .6; } 85%, 100% { opacity: 0; } }
.pp-g { --pp-r: rotate(168deg); } .pp-d { --pp-r: rotate(192deg); }
html[data-couleur="vif"] body::before { inset: -12vmax;
  background: radial-gradient(30vmax 24vmax at 26% 24%, rgba(180, 204, 108, .8), transparent 70%), radial-gradient(28vmax 22vmax at 76% 30%, rgba(130, 180, 125, .65), transparent 70%), radial-gradient(34vmax 26vmax at 50% 72%, rgba(255, 255, 255, .55), transparent 70%), radial-gradient(26vmax 20vmax at 80% 80%, rgba(180, 204, 108, .7), transparent 70%), radial-gradient(24vmax 19vmax at 20% 82%, rgba(130, 180, 125, .55), transparent 70%); }
.pp-g.pp-b { left: calc(1.6% + 56px); } .pp-d.pp-b { right: calc(1.6% + 56px); }

/* 29.10.2026: sur téléphone, les photos paraissent trop claires: un peu plus sombres et plus contrastées (photos seulement, pas les logos ni le plan) */
@media (max-width: 760px) {
  :is(.scene-cadre, .t-photo, .photo, .galerie-photo, .portraits, .photo-large, .tete-photo, .raison-photo, .photo-acces, .vie) img, .benevolat-photo { filter: brightness(.86) contrast(1.1) saturate(1.06); }
  .hf-drone img { filter: brightness(.9) contrast(1.08); }
}

/* 29.10.2026, sa demande: le chat Nous soutenir plus grand sur téléphone */
@media (max-width: 760px) {
  html[data-soutien="coucou"] .sf-buste, html[data-soutien="coucou"] .soutien-flottant:hover .sf-buste { width: 108px; }
  html[data-soutien="coucou"] .sf-texte { font-size: .92rem; padding: .55rem .85rem; border-radius: 14px 14px 4px 14px; }
  .pied { padding-bottom: 160px; }
}

/* 30.10.2026: retours de Linda. Le journal en quatre pages JPG (plus de PDF), la photo de la chatterie des pensions */
.journal-carte .lecture { max-width: 46rem; }
.journal-pages { list-style: none; margin: clamp(1.4rem, 3vw, 2rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.4rem); }
.journal-pages a { display: block; border-radius: 10px; overflow: hidden; background: var(--blanc); box-shadow: 0 18px 40px -26px rgba(20, 22, 20, .5), 0 0 0 1px var(--filet); transition: transform .4s var(--sortie), box-shadow .4s var(--sortie); }
.journal-pages a:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 26px 50px -26px rgba(20, 22, 20, .55), 0 0 0 1px var(--filet); }
.journal-pages img { display: block; width: 100%; height: auto; }
.journal-note { margin: .9rem 0 0; }
@media (max-width: 760px) { .journal-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.t-photo > img.img-melons { object-position: 50% 45%; }
.don-carte .important { margin-bottom: 1rem; }
.don-carte .important p { margin: .3rem 0 0; }

/* 30.10.2026, sa demande: la photo de la chatterie des pensions en entier; la photo en hauteur d'un côté, le prix et les conditions de l'autre */
.pension-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 14px; align-items: stretch; }
.photo-pension { margin: 0; background: var(--blanc); border-radius: var(--rayon); overflow: hidden; display: flex; flex-direction: column; }
.photo-pension img { display: block; width: 100%; height: auto; }
.photo-pension figcaption { padding: 1.1rem 1.4rem 1.3rem; display: grid; gap: .35rem; }
.photo-pension figcaption strong { font: 600 clamp(1.25rem, 1rem + .8vw, 1.6rem)/1.15 var(--titre); color: var(--encre); letter-spacing: -.01em; }
.pension-infos { display: grid; gap: 14px; grid-auto-rows: 1fr; }
.pension-infos .tuile { min-height: 0; }
@media (max-width: 760px) {
  .pension-grille { grid-template-columns: 1fr; }
  .pension-infos { grid-auto-rows: auto; }
  .photo-pension img { filter: brightness(.86) contrast(1.1) saturate(1.06); }
}