/* ==========================================================================
   Thème ASA jfk — d'après la maquette home022 (octobre 2026)
   Sources : DOC/transfer-01a1209a (logo, pictos, carte, photos).
   Polices de la maquette : PT Serif, Parisienne, Avenir (Nunito Sans en repli).
   ========================================================================== */

:root {
    --c-ink: #13302e;
    --c-olive: #71794a;
    --c-olive-dark: #5c6339;
    --c-olive-light: #dfe1d3;
    --c-red: #c01012;
    --c-sand: #eceade;
    --c-cream: #faf9f5;
    --c-card: #ebebdf;
    --c-white: #fff;
    --c-line: #d3d0bf;

    --f-serif: "PT Serif", Georgia, serif;
    --f-sans: "Avenir Next", Avenir, "Nunito Sans", system-ui, sans-serif;
    --f-script: "Parisienne", cursive;

    --container: 1140px;
    --gutter: clamp(16px, 4vw, 40px);
    --radius: 10px;
}

/* Taille du texte (boutons A- / A / A+) */
html { font-size: 100%; }
html[data-font-size="medium"] { font-size: 112.5%; }
html[data-font-size="large"] { font-size: 125%; }

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--c-white);
    color: var(--c-ink);
    font-family: var(--f-sans);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: inherit; }
a:hover { color: var(--c-olive); }
:focus-visible { outline: 2px solid var(--c-olive); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--f-serif); font-weight: 400; line-height: 1.25; }

.container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute; left: 1rem; top: -4rem; z-index: 100;
    padding: .5rem 1rem; background: var(--c-ink); color: var(--c-white);
}
.skip-link:focus { top: 1rem; }

.eyebrow {
    margin: 0 0 1rem;
    color: var(--c-olive);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.eyebrow a { text-decoration: none; }

/* Boutons et liens --------------------------------------------------------- */

.btn {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .65rem 1.3rem;
    border: 0; border-radius: 999px;
    font: 600 .8rem/1 var(--f-sans);
    text-decoration: none; text-transform: uppercase; letter-spacing: .03em;
    cursor: pointer;
}
.btn--don, .btn--primary { background: var(--c-olive); color: var(--c-white); box-shadow: 0 2px 6px rgb(0 0 0 / .15); }
.btn--don:hover, .btn--primary:hover { background: var(--c-olive-dark); color: var(--c-white); }
.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.6; }

.more-link {
    color: var(--c-red);
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.more-link:hover { color: var(--c-ink); }

/* En-tête ------------------------------------------------------------------ */

.site-header {
    position: relative;
    z-index: 20;
    background: var(--c-white);
}
.site-header__inner {
    display: flex; align-items: center; gap: 2rem;
    padding: .35rem max(var(--gutter), 5.67vw);
}
.site-logo { flex: none; display: block; line-height: 0; }
.site-logo img { width: 146px; }

.site-nav { margin-left: auto; }
.site-nav__list { display: flex; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.site-nav__item { position: relative; display: flex; align-items: center; }
.site-nav__item > a {
    padding: .75rem 0;
    border-bottom: 2px solid transparent;
    font-size: .72rem; font-weight: 600;
    text-decoration: none; text-transform: uppercase; letter-spacing: .03em;
}
.site-nav__item.is-active > a { border-bottom-color: var(--c-olive); }
.site-nav__sub-toggle {
    width: 1.2rem; height: 1.2rem; margin-left: .15rem; padding: 0;
    border: 0; background: none; color: inherit; cursor: pointer;
}
.site-nav__sub-toggle::before {
    content: ""; display: block; width: .35rem; height: .35rem; margin: -.2rem auto 0;
    border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg);
}
.site-nav__sub {
    position: absolute; top: 100%; left: -1rem;
    min-width: 15rem; margin: 0; padding: .6rem 0;
    background: var(--c-white); border-radius: var(--radius);
    box-shadow: 0 8px 24px rgb(19 48 46 / .12);
    list-style: none;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .15s, transform .15s, visibility .15s;
}
.site-nav__sub a { display: block; padding: .45rem 1.1rem; font-size: .9rem; text-decoration: none; }
.site-nav__sub a[aria-current] { color: var(--c-olive); font-weight: 700; }
.site-nav__item:hover > .site-nav__sub,
.site-nav__item:focus-within > .site-nav__sub,
.site-nav__item.is-open > .site-nav__sub { opacity: 1; visibility: visible; transform: none; }

.nav-toggle { display: none; }

.font-size {
    position: absolute; right: max(var(--gutter), 3vw); top: calc(100% + 1rem);
    display: flex; gap: .6rem;
}
.font-size button {
    width: 2.6rem; height: 2.6rem;
    border: 0; border-radius: 50%;
    background: rgb(236 234 222 / .85); color: var(--c-olive);
    font: 600 1rem var(--f-sans); cursor: pointer;
    box-shadow: 0 1px 4px rgb(0 0 0 / .12);
}
.font-size button[data-font-size=""] { font-size: .7rem; }
.font-size button[data-font-size="large"] { font-size: 1.25rem; }
.font-size button[aria-pressed="true"] { background: var(--c-olive); color: var(--c-white); }

/* Accueil : hero ----------------------------------------------------------- */

/*
 * Valeurs relevées dans home02.psd (1023 px de large, bandeau 2048×970 au même ratio).
 * Le hero suit la largeur d'écran : hauteur au ratio du bandeau, textes en em
 * sur une base qui grandit avec la fenêtre (+10px max) tout en gardant l'effet A-/A+.
 */
.hero {
    position: relative;
    font-size: calc(1rem + clamp(0px, 1.564vw - 16px, 10px));
    background: #fff var(--hero-image) right center / cover no-repeat;
}
/* Texte agrandi : le hero grandit et la photo zoome, on garde un fond lisible sous le texte */
html[data-font-size] .hero {
    background:
        linear-gradient(90deg, #fff 0, rgb(255 255 255 / .92) 32%, rgb(255 255 255 / 0) 52%),
        #fff var(--hero-image) right center / cover no-repeat;
}
.hero__inner {
    max-width: none; margin: 0;
    min-height: clamp(485px, calc(100vw * 970 / 2048), calc(100vh - 5rem));
    padding: 3.75em 2rem 3em max(var(--gutter), 5.67vw);
}
.hero .eyebrow {
    max-width: 24.8em; margin-bottom: 2.6em;
    font-size: .6875em; line-height: 1.4545; font-weight: 600; letter-spacing: .02em;
}
.hero__title { max-width: 9.6em; margin: 0 0 .9em; font-size: 2em; line-height: 1.25; font-weight: 700; }
.hero__lead { max-width: 16em; margin: 0 0 .45em; font-family: var(--f-serif); font-size: 1.125em; line-height: 1.6667; font-weight: 700; }
.hero__age { margin: 0 0 1em; font-family: var(--f-script); font-size: 2.25em; line-height: 1; color: #757c4e; }

.checklist { margin: 0; padding: 0; list-style: none; font-size: .875em; font-weight: 500; line-height: 1; max-width: 21em; }
.checklist li { position: relative; margin-bottom: .7em; padding-left: 2em; }
.checklist li::before {
    content: ""; position: absolute; left: 0; top: -.1em;
    width: 1.1em; height: 1.4em;
    background: url("../images/check.svg") center / contain no-repeat;
}

/* Accueil : bandeau intro -------------------------------------------------- */

.intro { background: var(--c-sand); }
.intro__inner { display: flex; align-items: center; gap: 2.5rem; padding-block: 1.8rem; }
.intro__icon { flex: none; width: 96px; height: 96px; border-radius: 50%; }
.intro__title { margin: 0 0 .7rem; font-size: 1.25rem; font-weight: 700; }
.intro p { margin: 0; font-size: .95rem; }

/* Sections ----------------------------------------------------------------- */

.section { padding-block: 3.5rem 3rem; }
.section--alt { background: var(--c-cream); }
.section-title {
    margin: 0 0 2.5rem;
    font-family: var(--f-sans); font-size: .95rem; font-weight: 600;
    text-align: center; text-transform: uppercase; letter-spacing: .08em;
}
.section-title::after {
    content: ""; display: block; width: 110px; height: 14px; margin: .7rem auto 0;
    background:
        linear-gradient(var(--c-olive), var(--c-olive)) left center / 40px 1px no-repeat,
        linear-gradient(var(--c-olive), var(--c-olive)) right center / 40px 1px no-repeat,
        var(--section-icon) center / 14px 14px no-repeat;
}
.section-title--heart { --section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c01012' d='M12 21s-8-4.9-9.8-10C1 7.4 3.4 4 7 4c2.1 0 3.9 1.2 5 3 1.1-1.8 2.9-3 5-3 3.6 0 6 3.4 4.8 7-1.8 5.1-9.8 10-9.8 10z'/%3E%3C/svg%3E"); }
.section-title--paw { --section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c01012'%3E%3Cellipse cx='12' cy='16.5' rx='5' ry='4.5'/%3E%3Cellipse cx='5' cy='10' rx='2.2' ry='2.8'/%3E%3Cellipse cx='19' cy='10' rx='2.2' ry='2.8'/%3E%3Cellipse cx='9' cy='5.5' rx='2.2' ry='2.8'/%3E%3Cellipse cx='15' cy='5.5' rx='2.2' ry='2.8'/%3E%3C/svg%3E"); }
.section-empty { text-align: center; }

/* Animaux à placer --------------------------------------------------------- */

.animal-teasers {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem;
    max-width: 840px; margin-inline: auto;
}
.animal-list { display: grid; gap: 2.5rem; margin-block: 2rem; }
.animal-teaser { display: flex; gap: 1.5rem; }
.animal-photos {
    position: relative; flex: none; width: 190px; height: 190px;
    border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 2px 8px rgb(0 0 0 / .12);
}
.animal-list .animal-photos { width: 280px; height: 280px; }
.animal-photos img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity .8s ease;
}
.animal-photos img.is-active { opacity: 1; }
.animal-photos__dots { position: absolute; left: 0; right: 0; bottom: .5rem; display: flex; justify-content: center; gap: .35rem; }
.animal-photos__dots button {
    width: .6rem; height: .6rem; padding: 0; border: 1px solid #fff; border-radius: 50%;
    background: rgb(255 255 255 / .4); cursor: pointer;
}
.animal-photos__dots button[aria-current="true"] { background: #fff; }
.animal-video { position: relative; aspect-ratio: 16 / 9; margin: 1rem 0; border-radius: var(--radius); overflow: hidden; }
.animal-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.animal-teaser__body { display: flex; flex-direction: column; font-size: .85rem; }
.animal-teaser__body p { margin: 0 0 1rem; }
.animal-teaser__body .more-link { margin-top: auto; }
.animal-teaser__name {
    margin: 0 0 .7rem;
    font-family: var(--f-script); font-size: 2rem; color: var(--c-olive); line-height: 1.1;
}

/* Nos solutions ------------------------------------------------------------ */

.solution-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.solution-card {
    display: flex; flex-direction: column;
    background: var(--c-card); border: 1px solid var(--c-line);
    text-align: center;
}
.solution-card__media { position: relative; aspect-ratio: 207 / 187; }
.solution-card__media > img:first-child { width: 100%; height: 100%; object-fit: cover; display: block; }
.solution-card__picto {
    position: absolute; left: 50%; bottom: 0; translate: -50% 50%;
    width: 68px; height: 68px; border-radius: 50%;
    border: 3px solid var(--c-white); background: var(--c-white);
    object-fit: cover;
}
.solution-card__body { display: flex; flex-direction: column; flex: 1; padding: 3rem 1rem 1rem; }
.solution-card__title {
    margin: 0 0 1rem;
    font-size: 1.2rem; letter-spacing: .12em; text-transform: uppercase;
}
.solution-card__text { margin-bottom: 1rem; font-size: .9rem; line-height: 1.4; }
.solution-card__text p { margin: 0; }
.solution-card .more-link { margin-top: auto; }

/* Pages intérieures -------------------------------------------------------- */

.page-header { position: relative; padding-block: 3rem 2.5rem; background: var(--c-sand); overflow: hidden; }
.page-header .container { position: relative; }
.page-header__title { margin: 0; max-width: 18em; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 700; }
.page-header--image { display: flex; align-items: center; min-height: clamp(220px, 24vw, 340px); background: #fff; }
.page-header--image .container { max-width: none; margin: 0; padding-left: max(var(--gutter), 5.67vw); }
.page-header__image {
    position: absolute; top: 0; right: 0; bottom: 0; width: 62%; height: 100%;
    object-fit: cover; object-position: center 35%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%);
    mask-image: linear-gradient(90deg, transparent 0, #000 38%);
}
.page-header--image .page-header__title, .page-header--image .eyebrow { max-width: 45%; }

.page-body { padding-block: 2.5rem 4rem; }
.prose { max-width: calc(860px + 2 * var(--gutter)); }
.prose h2 { font-size: 1.5rem; margin-top: 2.2rem; }
.prose h3 { font-size: 1.2rem; }
.prose a { color: var(--c-olive); }
.prose img { border-radius: var(--radius); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; margin-block: 2rem; }
.card { padding: 1.25rem; background: var(--c-cream); border: 1px solid var(--c-line); border-radius: var(--radius); }
.card img { width: 100%; max-height: 180px; object-fit: cover; }

/* Page Liens : logo dans une zone fixe, carte entière cliquable */
.cards--links { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.card--link { position: relative; display: flex; flex-direction: column; gap: .75rem; }
.card--link__logo { display: flex; align-items: center; height: 72px; }
.card--link__logo img { width: auto; max-width: 100%; max-height: 72px; object-fit: contain; }
.card--link__initial {
    display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
    background: var(--c-olive-light); color: var(--c-olive-dark); font-family: var(--f-serif); font-size: 1.5rem;
}
.card--link__title { margin: 0; font-size: 1.15rem; }
.card--link__url {
    margin-top: auto; font-size: .9rem; color: var(--c-olive); text-decoration: none;
    overflow-wrap: anywhere;
}
.card--link__stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card--link:hover .card--link__url { text-decoration: underline; }
.card--link:focus-within { outline: 2px solid var(--c-olive); outline-offset: 3px; }
.card--link__url:focus-visible { outline: none; }

/* Belles histoires : récits photo + texte, en alternance */
.stories { display: grid; gap: 3rem; margin-block: 2.5rem; }
.story { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 2rem; align-items: start; }
.story + .story { padding-top: 3rem; border-top: 1px solid var(--c-line); }
.story:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
.story:nth-child(even) .story__photo { order: 2; }
.story:not(:has(.story__photo)) { grid-template-columns: 1fr; }
.story__photo { width: 100%; height: auto; box-shadow: 0 6px 18px rgb(19 48 46 / .12); }
.story .story__title { margin: 0 0 .75rem; line-height: 1.1; font-size: 1.6rem; color: var(--c-olive-dark); }
.story__body p { margin: 0 0 .8rem; }
.story__body p:last-child { margin-bottom: 0; }
.story__body em { color: var(--c-olive-dark); }

.subpages { display: grid; gap: .5rem; padding: 0; list-style: none; }
.subpages a { display: block; padding: .8rem 1rem; background: var(--c-cream); border-radius: var(--radius); text-decoration: none; }

/* Formulaires */
.form-block { margin-top: 2.5rem; padding: clamp(1.25rem, 3vw, 2.5rem); background: var(--c-cream); border-radius: var(--radius); }

.asa-form__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.1rem 1.25rem; }
.asa-form__grid > * { grid-column: 1 / -1; }
.asa-form__grid > .field--half { grid-column: span 3; }
.asa-form__grid > .field--third { grid-column: span 2; }
.asa-form__grid > .field--two-thirds { grid-column: span 4; }
.asa-form__section {
    margin: 1.5rem 0 0; padding-bottom: .5rem;
    border-bottom: 1px solid var(--c-line);
    font-size: 1.15rem;
}
.asa-form__grid > .asa-form__section:first-child { margin-top: 0; }

.field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.field label, .field legend { padding: 0; font-weight: 600; font-size: .95rem; }
.field abbr, .asa-form__legend abbr { color: var(--c-red); text-decoration: none; }
.field input:not([type="radio"], [type="checkbox"]),
.field textarea {
    width: 100%; padding: .7rem .85rem;
    border: 1px solid var(--c-line); border-radius: 6px;
    background: var(--c-white); color: var(--c-ink);
    font: inherit;
}
.field textarea { resize: vertical; min-height: 6rem; }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--c-olive); box-shadow: 0 0 0 3px var(--c-olive-light); }
.field legend { margin-bottom: .4rem; }

.choices { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.choice { display: inline-flex; align-items: flex-start; gap: .55rem; font-weight: 400 !important; cursor: pointer; }
.choice input { flex: none; width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; accent-color: var(--c-olive); }
.field--accept .choice { font-size: .95rem; }
.field--accept a { color: var(--c-olive); font-weight: 600; }

.field__error { color: var(--c-red); font-size: .85rem; }
.field__error:empty { display: none; }
.field:has(.field__error:not(:empty)) input,
.field:has(.field__error:not(:empty)) textarea { border-color: var(--c-red); }

.asa-form__notice { padding: 1rem 1.25rem; background: var(--c-white); border-left: 3px solid var(--c-olive); border-radius: 0 6px 6px 0; font-size: .92rem; }
.asa-form__notice p { margin: 0 0 .4rem; }
.asa-form__notice ul { margin: 0; padding-left: 1.2rem; }
.asa-form__notice li + li { margin-top: .3rem; }

.asa-form__legend { margin: 1.25rem 0; font-size: .85rem; }
.asa-form button[type="submit"] { padding: .9rem 1.6rem; font-size: .85rem; }
.asa-form button[type="submit"]:disabled { opacity: .6; cursor: wait; }
.asa-form__callback { margin: 1rem 0 0; font-size: .9rem; color: var(--c-olive-dark); }

.asa-form__success { padding: 1.5rem; background: var(--c-white); border-left: 3px solid var(--c-olive); border-radius: 0 6px 6px 0; }
.asa-form__success h3 { margin-top: 0; }
.asa-form__antenne a { color: var(--c-olive); }

/* Formulaire de contact (plugin pixinside/contact) */
.contact-form__step { display: grid; gap: 1.1rem; }
.contact-form [hidden] { display: none !important; }
.contact-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; }
.contact-form__field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.contact-form__label { font-weight: 600; font-size: .95rem; }
.contact-form__label-optional { font-weight: 400; color: var(--c-olive-dark); font-size: .85rem; }
.contact-form__input,
.contact-form__textarea {
    width: 100%; padding: .7rem .85rem;
    border: 1px solid var(--c-line); border-radius: 6px;
    background: var(--c-white); color: var(--c-ink);
    font: inherit;
}
.contact-form__input::placeholder,
.contact-form__textarea::placeholder { color: #8a8f80; }
.contact-form__select {
    appearance: none; padding-right: 2.5rem; cursor: pointer;
    background: var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2371794a' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right .9rem center;
}
.contact-form__textarea { resize: vertical; min-height: 9rem; }
.contact-form__input:focus,
.contact-form__textarea:focus { outline: 0; border-color: var(--c-olive); box-shadow: 0 0 0 3px var(--c-olive-light); }
.contact-form__checkbox-label { display: inline-flex; align-items: flex-start; gap: .55rem; font-size: .95rem; cursor: pointer; }
.contact-form__checkbox { flex: none; width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; accent-color: var(--c-olive); }
.contact-form__privacy-link { color: var(--c-olive); font-weight: 600; }
.contact-form__actions { margin-top: .4rem; }
.contact-form__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-width: 12rem; padding: .9rem 1.6rem; border: 0; border-radius: 999px;
    background: var(--c-olive); color: var(--c-white); box-shadow: 0 2px 6px rgb(0 0 0 / .15);
    font: 700 .85rem var(--f-sans); text-transform: uppercase; letter-spacing: .03em;
    cursor: pointer; transition: background .15s;
}
.contact-form__btn:hover { background: var(--c-olive-dark); }
.contact-form__btn:disabled { opacity: .6; cursor: wait; }
.contact-form__btn-loader svg { display: block; animation: contact-spin 1s linear infinite; }
@keyframes contact-spin { to { transform: rotate(360deg); } }
.contact-form__success {
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    padding: 2rem 1.5rem; background: var(--c-white); border-left: 3px solid var(--c-olive);
    border-radius: 0 6px 6px 0; text-align: center; color: var(--c-olive);
}
.contact-form__success-title { margin: .5rem 0 0; font: 1.35rem var(--f-serif); color: var(--c-ink); }
.contact-form__success-text { margin: 0; color: var(--c-ink); }
.contact-form__error {
    margin-top: 1rem; padding: .8rem 1rem; border-left: 3px solid var(--c-red);
    border-radius: 0 6px 6px 0; background: #fbeaea; color: var(--c-red); font-size: .92rem;
}

/* Pied de page ------------------------------------------------------------- */

.site-footer { font-size: .8rem; }
.site-footer__top { padding-block: 2rem; background: var(--c-sand); }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, auto); gap: 2rem; }
.site-footer__col { padding-right: 1.5rem; border-right: 1px solid var(--c-line); }
.site-footer__col:last-child { border-right: 0; }
.site-footer__col ul { margin: 0; padding: 0; list-style: none; }
.site-footer__col li { margin: 0; }
.site-footer__col a { display: inline-block; min-height: 24px; line-height: 24px; text-decoration: none; }
.site-footer__col p { margin: 0 0 .8rem; }
.site-footer__title {
    margin: 0 0 .8rem;
    font: 700 .72rem var(--f-sans); text-transform: uppercase; letter-spacing: .03em;
}

.site-footer__map { padding-block: 1.5rem; background: var(--c-cream); font-size: 1rem; }
.site-footer__map-grid { display: grid; grid-template-columns: 325px 1fr; gap: 3rem; align-items: center; }
.zone-map__svg { display: block; width: 100%; height: auto; }
.zone-map__svg path, .zone-map__svg polygon { stroke-width: 1px; vector-effect: non-scaling-stroke; }
.zone-map__antenne { fill: var(--c-olive); opacity: .15; transition: opacity .3s; }
.zone-map__antenne.is-active { opacity: .55; }

.commune-search__field {
    display: flex; align-items: center; gap: .7rem;
    max-width: 22rem; margin-block: 1.2rem;
    padding: .55rem 1rem;
    background: var(--c-white); border: 1px solid var(--c-olive); border-radius: 999px;
}
.commune-search__field svg { flex: none; width: 1.4rem; height: 1.4rem; fill: var(--c-olive); }
.commune-search__field input {
    width: 100%; border: 0; outline: 0; background: none;
    font: 600 .85rem var(--f-sans); color: var(--c-ink);
}
.commune-search__field input::placeholder { color: var(--c-olive); text-transform: uppercase; }
.commune-search__field:focus-within { box-shadow: 0 0 0 3px var(--c-olive-light); }
.commune-result p { margin: 0 0 1rem; }
.commune-result a { text-decoration: none; }
.commune-result__suggestions { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.commune-result__suggestions button {
    padding: .35rem .8rem; border: 1px solid var(--c-line); border-radius: 999px;
    background: var(--c-white); font: inherit; font-size: .85rem; cursor: pointer;
}
.commune-result__suggestions button:hover { border-color: var(--c-olive); }
.commune-result__more { font-size: .85rem; color: var(--c-olive); }

.site-footer__bottom { padding-block: 1rem; background: var(--c-sand); }
.site-footer__bottom-inner { display: flex; align-items: center; gap: 2rem; }
.site-footer__bottom-inner p { flex: 1; margin: 0; font-size: .7rem; }
.site-footer__bottom-inner a:not(.btn) { text-decoration: none; }
.social-link {
    display: inline-grid; place-items: center;
    width: 2rem; height: 2rem; margin-left: 3rem;
    border-radius: 50%; background: var(--c-olive); color: var(--c-white);
}
.social-link svg { width: 1.2rem; fill: currentColor; }

/* Responsive --------------------------------------------------------------- */

@media (max-width: 1100px) {
    .site-header__inner { gap: 1rem; }
    .site-nav__list { gap: 1.2rem; }
    .solution-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .site-footer__grid > .site-logo { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .nav-toggle {
        display: block; order: 3; margin-left: auto;
        width: 2.75rem; height: 2.75rem; padding: 0;
        border: 0; background: none; cursor: pointer;
    }
    .nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after {
        display: block; width: 1.6rem; height: 2px; margin-inline: auto;
        background: var(--c-ink); content: ""; transition: transform .2s;
    }
    .nav-toggle__bar { position: relative; }
    .nav-toggle__bar::before { position: absolute; left: 0; top: -7px; }
    .nav-toggle__bar::after { position: absolute; left: 0; top: 7px; }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(7px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-7px) rotate(-45deg); }

    .site-header__don { order: 2; margin-left: auto; }
    .site-nav {
        display: none; order: 4; flex-basis: 100%; margin: 0;
    }
    .site-nav.is-open { display: block; }
    .site-header__inner { flex-wrap: wrap; }
    .site-nav__list { flex-direction: column; gap: 0; padding-bottom: 1rem; }
    .site-nav__item { flex-wrap: wrap; border-top: 1px solid var(--c-sand); }
    .site-nav__item > a { flex: 1; padding: .9rem 0; font-size: .85rem; border-bottom: 0; }
    .site-nav__sub-toggle { width: 2.75rem; height: 2.75rem; }
    .site-nav__sub {
        position: static; display: none; flex-basis: 100%;
        min-width: 0; padding: 0 0 .6rem; box-shadow: none;
        opacity: 1; visibility: visible; transform: none;
    }
    .site-nav__item.is-open > .site-nav__sub { display: block; }
    .site-nav__item.is-open > .site-nav__sub-toggle::before { transform: translateY(.2rem) rotate(-135deg); }
    .site-nav__item:hover > .site-nav__sub { display: none; }
    .site-nav__item.is-open:hover > .site-nav__sub { display: block; }

    .font-size { position: static; justify-content: flex-end; padding: 0 var(--gutter) .6rem; }
    .font-size button { width: 2.2rem; height: 2.2rem; }

    .hero { background: #fff; }
    .hero::before {
        content: ""; display: block; aspect-ratio: 16 / 10;
        background: var(--hero-image) 85% center / cover no-repeat;
    }
    .hero { font-size: 1rem; }
    .hero__inner { min-height: 0; padding: 2rem var(--gutter); }
    .hero__inner > *, .hero .eyebrow, .hero__title, .hero__lead, .checklist { max-width: none; }

    .intro__inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .animal-teasers { grid-template-columns: 1fr; gap: 2rem; }
    .site-footer__map-grid { grid-template-columns: 1fr; gap: 1rem; }
    .page-header--image { flex-direction: column; align-items: stretch; min-height: 0; padding-top: 0; }
    .page-header__image { position: static; width: 100%; height: 180px; -webkit-mask-image: none; mask-image: none; }
    .page-header--image .container { padding: 1.5rem var(--gutter) 0; }
    .page-header--image .page-header__title, .page-header--image .eyebrow { max-width: none; }
    .zone-map { max-width: 280px; }
}

@media (max-width: 600px) {
    .site-logo img { width: 120px; }
    .site-header__don { display: none; }
    .solution-cards { grid-template-columns: 1fr; }
    .animal-teaser { flex-direction: column; }
    .animal-photos, .animal-list .animal-photos { width: 100%; height: auto; aspect-ratio: 1; }
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
    .site-footer__col { border-right: 0; padding-right: 0; }
    .site-footer__bottom-inner { flex-wrap: wrap; gap: 1rem; }
    .site-footer__bottom-inner p { flex-basis: 100%; }
    .social-link { margin-left: auto; }
    .asa-form__grid > .field--half,
    .asa-form__grid > .field--third,
    .asa-form__grid > .field--two-thirds { grid-column: 1 / -1; }
    .contact-form__row { grid-template-columns: 1fr; }
    .story, .story:nth-child(even) { grid-template-columns: 1fr; gap: 1.25rem; }
    .story:nth-child(even) .story__photo { order: 0; }
    .story__photo { max-width: 480px; }
    .contact-form__btn { width: 100%; }
}

/* Animations --------------------------------------------------------------- */

/*
 * La classe .motion est posée dans le <head> du layout (sauf mouvement réduit) :
 * sans JS ou avec mouvement réduit, tout s'affiche normalement.
 * Apparition au défilement : theme.js ajoute .is-visible (voir revealSelector).
 */
:root { --ease-out: cubic-bezier(.22, .7, .2, 1); }

@keyframes asa-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes asa-fade { from { opacity: 0; } }
@keyframes asa-settle { from { opacity: 0; transform: scale(1.06); } }

html.motion { scroll-behavior: smooth; }

/* Hero : textes en cascade */
.motion .hero__inner > * { animation: asa-rise .9s var(--ease-out) both; }
.motion .hero__inner > :nth-child(2) { animation-delay: .12s; }
.motion .hero__inner > :nth-child(3) { animation-delay: .24s; }
.motion .hero__inner > :nth-child(4) { animation-delay: .36s; }
.motion .hero__inner > :nth-child(n+5) { animation-delay: .48s; }
.motion .hero { animation: asa-fade 1.2s ease both; }

/* Pages intérieures : bandeau et contenu */
.motion .page-header .eyebrow,
.motion .page-header__title { animation: asa-rise .8s var(--ease-out) both; }
.motion .page-header__title { animation-delay: .1s; }
.motion .page-header__image { animation: asa-settle 1.6s var(--ease-out) both; }
.motion .page-body { animation: asa-rise .8s .2s var(--ease-out) both; }

/* Apparition au défilement */
.motion [data-reveal] {
    opacity: 0; transform: translateY(24px);
    transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), translate .35s var(--ease-out), box-shadow .35s var(--ease-out);
    transition-delay: var(--reveal-delay, 0s), var(--reveal-delay, 0s), 0s, 0s;
}
.motion [data-reveal].is-visible { opacity: 1; transform: none; }

/* Titres de section : les filets se déploient de part et d'autre du picto */
.motion .section-title::after {
    background-size: 0 1px, 0 1px, 14px 14px;
    transition: background-size .9s .25s var(--ease-out);
}
.motion .section-title.is-visible::after { background-size: 40px 1px, 40px 1px, 14px 14px; }

/* Survols */
.btn, .font-size button, .commune-result__suggestions button {
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s var(--ease-out);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgb(19 48 46 / .18); }
.btn:active { transform: none; }
a, .more-link { transition: color .2s; }
.more-link span[aria-hidden] { display: inline-block; transition: transform .25s var(--ease-out); }
.more-link:hover span[aria-hidden] { transform: translateX(4px); }

.site-nav__item > a { transition: border-color .25s, color .2s; }
.site-nav__item > a:hover { border-bottom-color: var(--c-olive-light); }
.site-nav__item.is-active > a:hover { border-bottom-color: var(--c-olive); }

/* Cartes : levée au survol via translate (transform sert à l'apparition) */
.solution-card, .event-card, .card { transition: translate .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.solution-card:hover, .event-card:hover, .card:hover { translate: 0 -4px; box-shadow: 0 12px 28px rgb(19 48 46 / .12); }
.solution-card__picto { transition: transform .4s var(--ease-out); }
.solution-card:hover .solution-card__picto { transform: scale(1.08); }

.animal-photos img { transition: opacity .8s ease, transform 1.2s var(--ease-out); }
.animal-teaser:hover .animal-photos img { transform: scale(1.04); }
.event-card img { transition: transform 1s var(--ease-out); }
.event-card:hover img { transform: scale(1.04); }

.intro__icon { transition: transform .6s var(--ease-out); }
.intro__inner:hover .intro__icon { transform: rotate(-6deg) scale(1.04); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    html { scroll-behavior: auto !important; }
}

/* Page Contact : antennes */
.antennes { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin-block: 1rem 2rem; }
.antenne { padding: 1.1rem 1.25rem; background: var(--c-cream); border-radius: var(--radius); }
.antenne p { margin: 0 0 .5rem; }
.antenne p:last-child { margin-bottom: 0; }
.prose .lead, .prose p.lead { font-size: 1.1rem; }
.prose .lead-dispositions { padding: .9rem 1.1rem; background: var(--c-cream); border-left: 3px solid var(--c-olive); border-radius: 0 6px 6px 0; }
.paypal-donate { margin: .5rem 0 1rem; }

/* Événements */
.event-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.5rem; margin-block: 1rem 2.5rem; }
.event-card { background: var(--c-cream); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; }
.event-card img { display: block; width: 100%; aspect-ratio: 14 / 9; object-fit: cover; border-radius: 0; }
.event-card__body { padding: 1rem 1.25rem 1.25rem; }
.event-card h3 { margin: .25rem 0 .5rem; font-size: 1.15rem; }
.event-card h3 a { text-decoration: none; color: var(--c-ink); }
.event-meta { margin: 0; color: var(--c-olive); font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.event-image { display: block; width: 100%; margin: 1.5rem 0; }

/* Espace privé bénévoles ----------------------------------------------------- */

.manager-header { background: var(--c-sand); border-bottom: 1px solid var(--c-line); }
.manager-header__inner {
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem;
    padding: .5rem max(var(--gutter), 5.67vw);
}
.manager-header .site-logo img { width: 110px; }
.manager-header__label { font-family: var(--f-serif); font-size: 1.1rem; font-weight: 700; }
.manager-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin-left: auto; }
.manager-nav a, .manager-user a { font-size: .8rem; font-weight: 600; text-decoration: none; text-transform: uppercase; letter-spacing: .03em; }
.manager-nav a[aria-current] { color: var(--c-olive); border-bottom: 2px solid var(--c-olive); }
.manager-user { display: flex; gap: 1rem; align-items: center; font-size: .9rem; }
.manager-title { margin-top: 0; font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 700; }

.manager-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.25rem; }
.manager-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--c-cream); border: 1px solid var(--c-line); border-radius: var(--radius);
    text-decoration: none; color: inherit; transition: box-shadow .15s;
}
.manager-card:hover { box-shadow: 0 6px 18px rgb(19 48 46 / .12); color: inherit; }
.manager-card img, .manager-card__nophoto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-sand); }
.manager-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding: 1rem; }
.manager-card__name { font-family: var(--f-serif); font-size: 1.2rem; }
.manager-card__meta { font-size: .85rem; color: #4a5a58; }

.status { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: var(--c-olive-light); color: var(--c-olive-dark); }
.status--nouveau { background: #f6dede; color: var(--c-red); }
.status--adopte { background: #e3e8e7; color: #4a5a58; }
.status--published { background: #fff; border: 1px solid var(--c-olive); }

.manager-animal__head { display: grid; grid-template-columns: minmax(0, 22rem) 1fr; gap: 2rem; align-items: start; margin-bottom: 1rem; }
.manager-animal__photo { width: 100%; border-radius: var(--radius); }
.manager-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; }
.btn--ghost { background: #fff; color: var(--c-ink); border: 1px solid var(--c-line); }
.btn--danger { background: #fff; color: var(--c-red); border: 1px solid var(--c-red); }
.btn--danger:hover { background: var(--c-red); color: #fff; }
.field select {
    width: 100%; padding: .7rem .85rem; border: 1px solid var(--c-line); border-radius: 6px;
    background: var(--c-white); color: var(--c-ink); font: inherit;
}
.manager-flash { padding: .8rem 1rem; border-radius: 6px; background: var(--c-olive-light); }
.manager-flash--error { background: #f6dede; color: var(--c-red); }

/* Connexion / inscription (composants RainLab.User) */
.auth-block { max-width: 34rem; }
.auth-block input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%; padding: .7rem .85rem; border: 1px solid var(--c-line); border-radius: 6px; font: inherit; background: #fff;
}
.auth-block label { display: block; margin: .9rem 0 .35rem; font-weight: 600; }
.auth-block button[type="submit"], .auth-block .btn-primary {
    margin-top: 1rem; padding: .85rem 1.5rem; border: 0; border-radius: 999px;
    background: var(--c-olive); color: #fff; font: 600 .85rem var(--f-sans); text-transform: uppercase; cursor: pointer;
}

@media (max-width: 700px) {
    .manager-animal__head { grid-template-columns: 1fr; }
    .manager-nav { margin-left: 0; }
}
.auth-block .field { margin-bottom: 1rem; }
.auth-recover { margin-top: 1.5rem; }
.auth-recover summary { cursor: pointer; color: var(--c-olive); font-weight: 600; }