/* Public pages only; the administration retains its own stylesheet.
   Palette « sauge & bleu » : chaque paire texte/fond annoncée ci-dessous est
   mesurée selon WCAG 2.1, rapport de contraste en regard du token. */
:root {
  /* — Surfaces ——————————————————————————————————— */
  --paper:#f6f7f2;          /* fond général */
  --white:#ffffff;          /* panneaux de formulaire */
  --sage:#e2e9da;           /* bande « L'approche » + panneau résultat */
  --sage-soft:#dbe3d2;      /* fond d'attente des images */
  --session:#eef1e7;        /* bande « Le déroulement » */
  --band:#1b342b;           /* bandes sombres (fin d’accueil) */
  --surface:#e3e6db;        /* filet des cartes flottantes */

  /* — Encre ————————————————————————————————————— */
  --ink:#1f3a2e;            /* 11,45:1 sur --paper */
  --muted:#4e6058;          /* 6,22:1 paper · 5,39:1 sauge */
  --on-dark:#c3d0c6;        /* 8,37:1 sur --band */
  --placeholder:#5f6d61;    /* 5,46:1 sur --white */
  --muted-soft:#56675c;     /* pastilles de chapitre : 5,59:1 sur --paper ;
                               sur --band le script bascule en --on-dark (2,22:1 sinon) */

  /* — Accents ——————————————————————————————————— */
  --green:#2b5c42;          /* bouton : 7,74:1 avec --white */
  --green-deep:#1f4732;     /* survol du bouton */
  --accent:#14507e;         /* bleu : italiques, numéros, survols — 7,87:1 sur paper */
  --accent-soft:#a9c9e4;    /* 7,73:1 sur --band (le bleu --accent n'y ferait que 1,4:1) */
  --selection:#d8e3ea;

  /* — Traits ———————————————————————————————————— */
  --line:#d3dbcd;           /* filet décoratif (pas de seuil WCAG) */
  --hairline:#b9c4b2;       /* filet de structure, décoratif */
  --band-line:#3f5b4c;      /* filet sur bande sombre, décoratif */
  --underline:#73826c;      /* souligné de lien + contour de carte : 4,09:1 sur blanc */
  --field:#73826c;          /* contour de champ : 4,09:1 blanc · 3,20:1 sauge */
  --shadow:0 12px 35px #1b342b14;

  /* — États ————————————————————————————————————— */
  --error:#8a3b2c;
  --error-bg:#fbeae4;

  /* — Structure (inchangée) ————————————————————— */
  --header-h:182px;
  --sticky-band:var(--header-h);
  /* Marge respiratoire sous l'en-tête collant : sert à la fois d'offset
     d'ancrage (scroll-padding-top) et de hauteur perdue pour les chapitres
     plein écran. Une seule valeur, donc les ancres #chapitre tombent
     exactement sur un point d'accroche du défilement vertical. */
  --anchor-offset:6px;
  --serif:Georgia,'Times New Roman',serif;
  --ease:cubic-bezier(.22,1,.36,1)
}

* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--sticky-band) + var(--anchor-offset))
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Segoe UI',Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-underline-offset:5px
}
button,input,select,textarea {
  font:inherit
}
button {
  cursor:pointer
}
button:disabled {
  cursor:wait;
  opacity:.65
}
:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px
}
::selection {
  background:var(--selection);
  color:var(--ink)
}
[hidden] {
  display:none!important
}
h1,h2,h3,p,figure {
  margin:0
}
h1,h2,h3 {
  font-family:var(--serif);
  font-weight:400;
  line-height:1.12
}
h1 {
  font-size:clamp(3.3rem,5.7vw,5.7rem);
  letter-spacing:-.065em
}
h2 {
  font-size:clamp(2.55rem,4vw,4rem);
  letter-spacing:-.05em
}
h3 {
  font-size:1.5rem;
  letter-spacing:-.025em
}
h1 em,h2 em {
  color:var(--accent);
  font-weight:400
}
p+p {
  margin-top:1rem
}
.icon {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:0 0 auto
}
.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:100;
  padding:12px 20px;
  background:var(--ink);
  color:white
}
.skip-link:focus {
  top:10px
}
/* Contenu lu par les technologies d'assistance, invisible à l'écran :
   titre de tableau, compléments de libellé. */
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}
.site-header {
  position:sticky;
  /* Below 561px the nav drops to its own row: only that row stays pinned (--sticky-band:50px).
     From 561px up the whole header stays pinned, so the offset is 0. */
  top:calc(var(--sticky-band) - var(--header-h));
  z-index:20;
  background:rgba(246,247,242,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px)
}
.header-inner {
  max-width:1440px;
  min-height:94px;
  padding:15px 6%;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  flex-shrink:0
}
.brand-mark {
  width:170px;
  height:auto;
  object-fit:contain;
  color:var(--green)
}
.brand-name {
  display:block;
  font-family:var(--serif);
  font-size:2rem;
  line-height:1;
  letter-spacing:-.04em
}
.brand-caption {
  display:block;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  margin-top:7px
}
.nav-links {
  display:flex;
  align-items:center;
  gap:32px
}
.nav-links a {
  text-decoration:none;
  font-size:.86rem;
  padding:8px 0;
  position:relative
}
.nav-links a[aria-current=page]::after {
  content:'';
  position:absolute;
  height:2px;
  background:var(--green);
  bottom:0;
  left:0;
  width:20px
}
.nav-links a:hover {
  color:var(--accent)
}
.header-cta {
  text-decoration:none;
  font-size:.8rem;
  border:1px solid var(--underline);
  border-radius:30px;
  padding:11px 18px;
  display:inline-flex;
  align-items:center;
  gap:16px
}
.header-cta .icon {
  width:16px;
  height:16px
}
.container {
  width:88%;
  max-width:1180px;
  margin-inline:auto
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--muted);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:24px
}
.eyebrow::before {
  content:'';
  width:25px;
  height:1px;
  background:currentColor;
  flex:0 0 auto
}
.lead {
  font-size:1.04rem;
  color:var(--muted);
  max-width:450px;
  line-height:1.85
}
.actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:22px;
  margin-top:30px
}
.button {
  border:1px solid var(--green);
  border-radius:32px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  padding:14px 24px;
  text-decoration:none;
  font-size:.83rem;
  font-weight:600;
  background:var(--green);
  color:white;
  transition:background .25s,transform .35s var(--ease)
}
.button:hover {
  background:var(--green-deep);
  transform:translateY(-2px)
}
.button .icon {
  width:18px;
  height:18px
}
.button-light {
  background:var(--paper);
  color:var(--ink);
  border-color:var(--paper)
}
.button-light:hover {
  background:var(--sage)
}
.text-link {
  font-size:.83rem;
  display:inline-flex;
  gap:10px;
  align-items:center;
  text-decoration:none;
  border:0;
  border-bottom:1px solid var(--underline);
  background:transparent;
  color:inherit;
  padding:0 0 5px
}
.text-link .icon {
  width:17px;
  height:17px
}
.slide {
  /* Plein écran sous l'en-tête collant. Le repli vh précède svh pour les
     navigateurs qui ignorent les unités de petite fenêtre (iOS < 15.4) ;
     svh est préféré ensuite car il ne change pas quand la barre d'URL du
     navigateur mobile se replie, ce qui évite de recalculer les points
     d'accroche en pleine interaction. */
  min-height:calc(100vh - var(--sticky-band) - var(--anchor-offset));
  min-height:calc(100svh - var(--sticky-band) - var(--anchor-offset));
  padding:75px 0;
  display:flex;
  align-items:center;
  position:relative;
  scroll-margin-top:0
}
.hero {
  padding:42px 0 26px
}
.hero-grid {
  display:grid;
  grid-template-columns:1fr 1.02fr;
  gap:7%;
  align-items:center
}
.hero h1 {
  margin-bottom:25px
}
.hero .lead {
  max-width:380px
}
.hero-art {
  position:relative;
  padding:0 0 25px 14px
}
.hero-image {
  display:block;
  width:100%;
  aspect-ratio:1/1.08;
  object-fit:cover;
  border-radius:48% 48% 8px 8px;
  background:var(--sage-soft)
}
.visual-note {
  position:absolute;
  bottom:6px;
  left:-18px;
  padding:19px 24px;
  background:var(--white);
  box-shadow:0 12px 35px var(--shadow);
  border:1px solid var(--surface);
  max-width:230px
}
.visual-note .icon {
  width:26px;
  height:26px;
  margin-bottom:8px
}
.visual-note p {
  font-family:var(--serif);
  font-size:1.18rem;
  line-height:1.3
}
.hero-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-top:44px;
  padding-top:20px;
  border-top:1px solid var(--line)
}
.animal-list {
  font-size:.75rem;
  letter-spacing:.04em;
  display:flex;
  gap:21px;
  flex-wrap:wrap;
  /* Liste nommée (« Animaux accompagnés ») : le nom n'est valide que porté par
     une vraie liste, pas par un div générique. */
  margin:0;
  padding:0;
  list-style:none
}
.animal-list > li+li::before {
  content:'·';
  padding-right:21px;
  color:var(--underline)
}
.scroll-cue {
  display:inline-flex;
  gap:12px;
  align-items:center;
  color:var(--muted);
  text-decoration:none;
  font-size:.7rem
}
.scroll-cue .icon {
  width:17px
}
.slide-rail {
  position:fixed;
  right:15px;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  display:grid;
  gap:9px
}
/* Repères du rail : plus aucun numéro (demande de Drass, 26/10/2026). Le
   lien garde sa cible de 32 px (au-dessus des 24 px requis), le repère
   visible est un point de 7 px en currentColor ; le chapitre courant
   s'allonge en pastille et passe en --ink (11,45:1 sur --paper). Une forme
   différente ET un contraste différent : l'état ne repose jamais sur la
   seule couleur (WCAG 1.4.1), et jamais sur un chiffre. */
.slide-rail a {
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  text-decoration:none;
  color:var(--muted-soft);
  border-radius:50%
}
.slide-rail a::before {
  content:'';
  width:7px;
  height:7px;
  border-radius:999px;
  background:currentColor;
  /* Aucune transition de largeur : la forme du repère change d'un coup au
     passage de chapitre, ce qui évite d'animer une propriété de mise en
     page (un seul repère concerné, mais la règle vaut pour tous). */
  transition:background .35s
}
.slide-rail a[aria-current=step] {
  color:var(--ink)
}
.slide-rail a[aria-current=step]::before {
  width:22px
}
/* Retour visuel au survol et au clavier : le point s'allonge, sans changer
   de couleur (un changement de couleur ici casserait le contraste sur la
   bande sombre, ou la classe .is-on-band a déjà pris la main). */
.slide-rail a:not([aria-current=step]):hover::before,
.slide-rail a:not([aria-current=step]):focus-visible::before {
  width:14px
}
/* Le rail est fixe : quand il passe au-dessus de la dernière bande sombre,
   --muted-soft n'y fait que 2,22:1. Les jetons existants suffisent :
   --on-dark est à 8,37:1 sur --band, et la pastille du chapitre courant en
   --paper y fait 12,40:1. La classe est posée lien par lien par le script
   (le rail peut chevaucher la limite). */
.slide-rail a.is-on-band {
  color:var(--on-dark)
}
.slide-rail a.is-on-band[aria-current=step]::before {
  background:var(--paper)
}
.section-top {
  display:flex;
  gap:40px;
  justify-content:space-between;
  align-items:end;
  margin-bottom:48px
}
.section-top .lead {
  max-width:340px;
  font-size:.95rem
}
.approach {
  background:var(--sage)
}
.approach-grid {
  display:grid;
  grid-template-columns:.9fr 1fr;
  gap:11%;
  align-items:center
}
.portrait-art {
  width:100%;
  display:block;
  aspect-ratio:4/4.3;
  object-fit:cover;
  border-radius:7px 7px 45% 7px
}
.figure-label {
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-top:14px;
  font-size:.7rem;
  color:var(--muted)
}
.approach h2 {
  margin-bottom:25px
}
.approach .lead {
  max-width:none
}
.small-rule {
  border:0;
  border-top:1px solid var(--hairline);
  margin:30px 0 23px
}
.principle {
  display:flex;
  gap:16px;
  align-items:start;
  font-size:.86rem
}
.principle strong {
  font-weight:600;
  display:block
}
.principle p {
  color:var(--muted)
}
.reasons-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:40px
}
.reason {
  padding:28px 0;
  border-top:1px solid var(--line)
}
.reason .icon {
  width:30px;
  height:30px;
  color:var(--accent);
  margin-bottom:20px
}
.reason h3 {
  margin-bottom:12px
}
.reason p {
  color:var(--muted);
  font-size:.88rem;
  max-width:300px
}
.session {
  background:var(--session)
}
.steps {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px
}
.step {
  border-top:1px solid var(--hairline);
  padding-top:23px
}
.step-number {
  font-family:var(--serif);
  font-size:2.4rem;
  color:var(--accent);
  display:block;
  margin-bottom:32px
}
.step h3 {
  margin-bottom:16px
}
.step p {
  font-size:.89rem;
  color:var(--muted)
}
.session-note {
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:44px;
  font-size:.79rem;
  color:var(--muted)
}
.last-slide {
  background:var(--band);
  color:var(--paper)
}
.last-slide .eyebrow,.last-slide .lead {
  color:var(--on-dark)
}
.last-slide h2 em {
  color:var(--accent-soft)
}
.closing-grid {
  display:grid;
  grid-template-columns:1.25fr .8fr;
  gap:12%;
  align-items:center
}
.last-slide .lead {
  margin-top:26px
}
.care-note {
  border-top:1px solid var(--band-line);
  padding-top:28px
}
.care-note .icon {
  width:34px;
  height:34px;
  margin-bottom:20px;
  color:var(--accent-soft)
}
.care-note h3 {
  margin-bottom:20px;
  font-size:1.9rem
}
.care-note p {
  color:var(--on-dark);
  font-size:.88rem
}
.last-slide .text-link {
  color:var(--paper)
}
.site-footer {
  padding:27px 0;
  border-top:1px solid var(--line)
}
.footer-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:.7rem;
  color:var(--muted)
}
.footer-name {
  font-family:var(--serif);
  font-size:1.2rem;
  color:var(--ink)
}
/* Cible tactile : les liens du pied de page mesuraient 18 px de haut, sous le
   minimum de 24 px (WCAG 2.2, 2.5.8). Le rembourrage vertical porte la cible à
   24 px sans toucher à la taille du texte ni aux écarts validés. */
.footer-inner a,.footer-contact a {
  display:inline-block;
  padding-block:3px
}
.footer-inner a {
  text-decoration:none
}
.footer-inner a:hover {
  text-decoration:underline
}
.footer-contact {
  margin:12px auto 0;
  display:flex;
  flex-wrap:wrap;
  gap:2px 18px;
  font-size:.7rem;
  color:var(--muted)
}
.footer-contact a {
  text-decoration:underline;
  text-decoration-color:var(--underline);
  text-underline-offset:3px
}
.footer-contact a:hover {
  color:var(--ink)
}
/* Réseaux sociaux du pied de page (demande de Drass du 28/10/2026) : MÊME
   composant que la page Contact (.channel-link : pastille de 44 px, nom
   accessible, focus visible hérité), posé sous les coordonnées et aligné sur
   la même gouttière. Le bloc n'occupe aucune place tant qu'aucun réseau n'est
   publié : l'attribut hidden est dans la page et assets/js/reseaux.js ne le
   retire que s'il a au moins un lien à montrer. */
.footer-social {
  margin:14px auto 0
}
.footer-channels {
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:0;
  padding-left:0
}
.page-intro {
  padding:60px 0 40px
}
.page-intro h1 {
  /* 2,8rem de plancher rendait « Politique de confidentialité » énorme sur
     téléphone (44,8 px pour un titre de 27 caractères). Le plancher descend
     sous celui du h2 générique (2,55rem) sans jamais passer en dessous du
     sous-titre : les titres des pages légales sont réduits d'autant plus bas. */
  font-size:clamp(2.6rem,4.4vw,4.4rem);
  overflow-wrap:break-word;
  margin-bottom:22px
}
.page-intro .lead {
  max-width:590px
}
.page-intro .eyebrow {
  margin-bottom:20px
}
.page-section {
  padding-bottom:70px
}
/* Pages rendues par le serveur (mentions légales, confidentialité) : les blocs
   sont des enfants DIRECTS de .page-section (h2 puis p). Sans cette règle un
   paragraphe collait au titre (0 px mesuré) et les lignes couraient sur toute
   la largeur (148 caractères mesurés à 1440 px). Les sélecteurs visent les
   enfants directs : la page Tarifs imbrique les siens dans .estimate-layout et
   ne doit pas changer. */
.page-section > :first-child {
  margin-top:0
}
.page-section > h2 {
  /* Sous-titres d'un document, pas des accroches : ils passent sous le h1 à
     toutes les largeurs (le clamp global donne 40,8 px sur téléphone, soit
     plus que le titre de la page). */
  font-size:clamp(1.5rem,2.3vw,2rem);
  line-height:1.28;
  margin-top:2.4rem
}
.page-section > h2 + p {
  margin-top:1rem
}
.page-section > p {
  max-width:72ch
}
.estimate-layout {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden
}
.form-panel {
  padding:36px 42px;
  background:var(--white)
}
.form-panel h2,.result-panel h2 {
  font-size:1.7rem;
  letter-spacing:-.03em;
  margin-bottom:24px
}
.field {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:23px;
  font-size:.8rem;
  font-weight:600
}
input,select,textarea {
  width:100%;
  min-height:49px;
  padding:12px 14px;
  border:1px solid var(--field);
  border-radius:5px;
  color:var(--ink);
  background:var(--white);
  font-size:.9rem;
  font-weight:400
}
input::placeholder,textarea::placeholder {
  color:var(--placeholder)
}
textarea {
  resize:vertical;
  min-height:145px
}
.field-hint,.fine-print {
  font-size:.75rem;
  font-weight:400;
  color:var(--muted)
}
.result-panel {
  background:var(--sage);
  padding:36px 42px;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.result-label {
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:12px
}
.price {
  font-family:var(--serif);
  font-size:4.8rem;
  line-height:1.2;
  letter-spacing:-.06em;
  padding:8px 0 18px
}
.price-breakdown {
  margin:0 0 20px;
  padding:0
}
.price-breakdown div {
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:.81rem;
  padding:9px 0;
  border-bottom:1px solid var(--hairline)
}
.price-breakdown dd {
  margin:0;
  font-weight:600
}
.result-panel .text-link {
  margin-top:20px;
  align-self:flex-start
}
.form-status {
  font-size:.83rem;
  padding:12px 15px;
  border-radius:5px
}
.form-status:empty {
  display:none
}
.form-status.ok {
  background:var(--sage);
  color:var(--ink)
}
.form-status.error {
  color:var(--error);
  background:var(--error-bg)
}
.retry {
  margin-top:12px
}
.tariff-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:65px;
  padding-top:54px
}
.tariff-grid h2 {
  font-size:1.9rem;
  margin-bottom:20px
}
table {
  border-collapse:collapse;
  width:100%;
  font-size:.86rem
}
th,td {
  border-bottom:1px solid var(--line);
  padding:13px 0;
  text-align:left
}
th {
  color:var(--muted);
  font-size:.7rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.08em
}
td:last-child,th:last-child {
  text-align:right
}
td:last-child {
  font-weight:600
}
.tariff-grid .fine-print {
  margin-top:16px
}
.contact-layout {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:8%;
  align-items:start
}
.contact-intro h1 {
  font-size:clamp(3rem,4.3vw,4.5rem);
  margin-bottom:24px
}
.contact-intro .lead {
  font-size:.96rem
}
.contact-section {
  padding-top:65px;
  padding-bottom:65px
}
.contact-form {
  border:1px solid var(--line);
  border-radius:8px
}
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}
.contact-form .button {
  margin-top:18px
}
.contact-details {
  border-top:1px solid var(--line);
  margin-top:35px;
  padding-top:25px;
  display:grid;
  gap:22px
}
.contact-detail {
  display:flex;
  gap:16px;
  align-items:start;
  font-size:.83rem
}
.contact-detail .icon {
  color:var(--muted)
}
.contact-detail strong {
  display:block;
  font-weight:600
}
.contact-detail p {
  color:var(--muted);
  font-size:.78rem
}
.contact-link {
  text-decoration:underline;
  text-decoration-color:var(--underline);
  text-underline-offset:3px
}
.contact-link:hover {
  color:var(--ink)
}
.contact-credentials {
  margin-top:20px;
  font-size:.78rem;
  color:var(--muted)
}
.contact-aside-note {
  font-family:var(--serif);
  font-size:1.25rem;
  color:var(--muted);
  margin-top:30px;
  font-style:italic
}
/* Blocs « Autres moyens de contact » et « Avis » de la page Contact : remplis
   par /api/public-settings. Sans JavaScript ils restent dans le document avec
   l'attribut hidden : la page reste complète, sans trou ni promesse vide. */
.contact-side {
  margin-top:35px;
  border-top:1px solid var(--line);
  padding-top:25px
}
.contact-side + .contact-side {
  margin-top:26px;
  border-top:0;
  padding-top:0
}
.contact-side h2 {
  font-size:1.18rem;
  letter-spacing:-.02em;
  line-height:1.3;
  margin-bottom:12px
}
.contact-channels {
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:0;
  padding-left:0
}
/* Le logo remplace la phrase « Écrire sur … » : cible de 44 px (WCAG 2.5.8),
   nom accessible porté par aria-label sur le lien, contour de focus hérité de
   :focus-visible. Couleurs de la charte uniquement : --ink sur --white
   (11,45:1), bordure --field (4,09:1), survol --green sur --sage (6,23:1). */
.channel-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid var(--field);
  border-radius:50%;
  background:var(--white);
  color:var(--ink);
  text-decoration:none;
  transition:background .25s,color .25s,border-color .25s
}
.channel-link:hover {
  background:var(--sage);
  border-color:var(--green);
  color:var(--green)
}
.channel-icon {
  width:22px;
  height:22px;
  fill:currentColor
}
/* Les réseaux vivent dans le bloc de coordonnées, à la suite du téléphone et
   de l'e-mail : le bloc garde son rôle de section (titre lisible par les
   technologies d'assistance) mais perd son filet et sa marge de section. */
.contact-detail .contact-side {
  margin-top:12px;
  border-top:0;
  padding-top:0
}
.reviews-summary {
  font-size:.83rem;
  color:var(--muted);
  line-height:1.7;
  margin-bottom:14px;
  max-width:42ch
}
.reviews-summary strong {
  color:var(--ink);
  font-weight:600
}
.reviews-note {
  font-family:var(--serif);
  font-style:italic;
  color:var(--muted)
}
/* Page Contact — compactage sur ordinateur (demande de Drass du 28/10/2026) :
   le formulaire, le téléphone, l'e-mail et les réseaux doivent tenir dans la
   première fenêtre, à 1366×768 comme à 1920×1080. Tous les sélecteurs sont
   propres à la page Contact : aucune autre page n'est touchée.
   Le rendu mobile/tablette (moins de 1000 px) n'est pas concerné. */
@media(min-width:1000px) {
  .contact-section {
    padding-top:26px;
    padding-bottom:44px
  }
  .contact-layout {
    grid-template-columns:.78fr 1.22fr;
    gap:6%
  }
  .contact-intro .eyebrow {
    margin-bottom:12px
  }
  .contact-intro h1 {
    font-size:clamp(2.1rem,2.6vw,2.9rem);
    margin-bottom:14px
  }
  .contact-intro .lead {
    font-size:.9rem;
    line-height:1.55
  }
  .contact-details {
    margin-top:20px;
    padding-top:16px;
    gap:12px
  }
  .contact-detail {
    gap:12px;
    font-size:.79rem
  }
  .contact-detail .icon {
    width:19px;
    height:19px
  }
  .contact-detail strong {
    line-height:1.35
  }
  .contact-detail p {
    font-size:.75rem;
    line-height:1.5
  }
  .contact-credentials {
    margin-top:14px;
    font-size:.74rem
  }
  .contact-aside-note {
    margin-top:16px;
    font-size:1.05rem;
    line-height:1.4
  }
  .contact-form {
    padding:26px 32px
  }
  .contact-form h2 {
    font-size:1.5rem;
    margin-bottom:16px
  }
  .contact-form .field {
    margin-bottom:16px
  }
  .contact-form textarea {
    min-height:104px
  }
  .contact-form .fine-print {
    font-size:.72rem
  }
  .contact-form .button {
    margin-top:14px
  }
}
.hero-image,.portrait-art {
  height:auto
}
@media(min-width:761px) {
  .hero-image {
    max-height:calc(100svh - 270px)
  }
  .hero-bottom {
    margin-top:26px;
    padding-top:16px
  }
}
/* Progressive enhancement: no hidden content when JavaScript is unavailable. */
.reveal.is-pending {
  opacity:0;
  transform:translateY(28px)
}
.reveal {
  transition:opacity 850ms var(--ease),transform 1100ms var(--ease)
}
@media(min-width:1000px) {
  .hero-copy {
    animation:arrive 1.1s var(--ease) both
  }
  .hero-art {
    animation:arrive 1.4s .08s var(--ease) both
  }
}
@keyframes arrive {
  from {
    opacity:0;
    transform:translateY(22px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@media(min-width:1600px) {
  .container {
    max-width:1320px
  }
  .hero-image {
    max-height:650px
  }
}
@media(max-width:1050px) {
  .header-cta {
    display:none
  }
  .slide-rail {
    right:4px
  }
  .hero-grid {
    gap:5%
  }
  .hero h1 {
    font-size:4rem
  }
  .visual-note {
    left:0;
    max-width:195px;
    padding:15px 18px
  }
  .hero-bottom {
    margin-top:28px
  }
  .closing-grid {
    gap:7%
  }
}
@media(max-width:760px) {
  :root {
    /* Real height of the header while the nav sits next to the logo. */
    --header-h:162px
  }
  html {
    scroll-padding-top:calc(var(--header-h) + 3px)
  }
  .header-inner {
    min-height:auto;
    padding:15px 6% 12px;
    gap:16px;
    flex-wrap:wrap
  }
  .brand-name {
    font-size:1.7rem
  }
  .brand-mark {
    width:150px;
    height:auto
  }
  .brand-caption {
    font-size:.7rem
  }
  .nav-links {
    gap:23px
  }
  .nav-links a {
    font-size:.77rem
  }
  .slide {
    min-height:auto;
    padding:58px 0;
    scroll-margin-top:0
  }
  .hero {
    padding-top:35px
  }
  /* minmax(0,…) : une piste « 1fr » garde un minimum égal au contenu le plus
     large (mot long, bouton), ce qui déborde de la page avant 200 % de zoom
     de texte. minmax(0,1fr) la laisse rétrécir. */
  .hero-grid,.approach-grid,.closing-grid,.contact-layout,.estimate-layout {
    grid-template-columns:minmax(0,1fr);
    gap:38px
  }
  .hero h1 {
    font-size:clamp(3.5rem,11vw,4.7rem)
  }
  .hero .lead {
    max-width:450px
  }
  .hero-art {
    width:100%;
    max-width:480px;
    margin:auto;
    padding-left:0
  }
  .hero-image {
    aspect-ratio:1.2;
    border-radius:43% 43% 6px 6px
  }
  .visual-note {
    bottom:0;
    left:-8px
  }
  .hero-bottom {
    margin-top:45px
  }
  .animal-list {
    gap:10px;
    font-size:.75rem
  }
  .animal-list > li+li::before {
    padding-right:10px
  }
  .scroll-cue,.slide-rail {
    display:none
  }
  .approach figure {
    order:2;
    max-width:480px;
    width:100%;
    margin:auto
  }
  .portrait-art {
    aspect-ratio:1.3
  }
  .section-top {
    display:block;
    margin-bottom:30px
  }
  .section-top .lead {
    margin-top:23px;
    max-width:500px
  }
  .reasons-grid {
    grid-template-columns:1fr 1fr;
    gap:0 25px
  }
  .reason h3 {
    font-size:1.3rem
  }
  .steps {
    grid-template-columns:1fr 1fr;
    gap:30px
  }
  .step-number {
    margin-bottom:15px
  }
  .closing-grid {
    gap:50px
  }
  .care-note {
    max-width:500px
  }
  .footer-inner {
    flex-wrap:wrap;
    /* Quatre entrées sur deux lignes : « space-between » les écartait aux deux
       bords avec des trous irréguliers. À gauche, avec un écart constant, le
       bloc se lit comme une liste. */
    justify-content:flex-start;
    font-size:.7rem;
    gap:10px 18px
  }
  .page-intro {
    padding-top:40px
  }
  .form-panel,.result-panel {
    padding:28px
  }
  .estimate-layout {
    gap:0
  }
  .tariff-grid {
    gap:35px
  }
  .contact-section {
    padding-top:38px
  }
  .contact-layout {
    gap:35px
  }
}
/* Below 561px the nav wraps onto its own row: only that row stays pinned, and the
   anchor offset follows the visible band instead of the whole header height. */
@media(max-width:560px) {
  :root {
    --header-h:214px;
    --sticky-band:50px
  }
  html {
    /* même jeton que l'accroche du chapitre 1 ci-dessous : les deux termes se
       compensent exactement (toute autre valeur entière décale le repos). */
    scroll-padding-top:calc(var(--sticky-band) + var(--anchor-offset))
  }
  /* Le lien d'ancre #bienvenue vise le HAUT DU DOCUMENT, pas un chapitre
     qu'on rejoint en défilant : sa cible vaut --header-h − scroll-padding-top
     = 152 px (390x844) ou 158 px (540x900), deux positions où l'en-tête se
     replie sur sa seule bande collante et où le LOGO est entièrement hors
     écran (mesuré : logo de -137 à -3,1 px). Cette marge ramène l'ancre à 0,
     en-tête ET logo visibles. Depuis la décision Drass du 28/10/2026 il n'y a
     plus d'accroche du tout sur mobile et tablette (voir la règle média en fin
     de bloc) : cette marge ne sert donc plus qu'à l'ancre #bienvenue (lien du
     rail, URL en #bienvenue), jamais au défilement libre, qui reste là où le
     doigt le laisse. Aucune position des chapitres 2 à 6 ni du marqueur de fin
     ne change. */
  #bienvenue {
    scroll-margin-top:calc(var(--header-h) - var(--sticky-band) - var(--anchor-offset))
  }
  .nav-links {
    width:100%
  }
}
@media(max-width:480px) {
  :root {
    --header-h:208px
  }
  .header-inner {
    gap:10px
  }
  .brand {
    width:100%
  }
  .nav-links {
    width:100%;
    justify-content:space-between;
    gap:10px
  }
  .hero h1 {
    font-size:clamp(2.9rem,14vw,3.45rem)
  }
  .eyebrow {
    font-size:.7rem;
    letter-spacing:.14em
  }
  .actions {
    gap:20px
  }
  .button {
    padding:13px 19px;
    gap:15px
  }
  .reasons-grid {
    grid-template-columns:1fr;
    column-gap:20px
  }
  .reason p {
    font-size:.81rem
  }
  .steps,.tariff-grid,.form-row {
    grid-template-columns:1fr
  }
  .step {
    display:grid;
    grid-template-columns:38px 1fr;
    gap:13px
  }
  .step-number {
    font-size:1.65rem
  }
  .step p {
    margin-top:12px
  }
  .form-panel,.result-panel {
    padding:24px
  }
  .contact-form .button {
    width:100%
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
  .reveal.is-pending {
    opacity:1;
    transform:none
  }
}

/* =====================================================================
   Zones photographiques — blocs ajoutés par la palette « sauge & bleu ».
   Aucune règle existante n'est modifiée : uniquement de nouveaux blocs,
   plus trois surcharges de cadrage explicitées au point 4.
   ===================================================================== */

/* 1 · Galerie des espèces suivies (accueil) — 5 tuiles 1:1 */
.species {
  padding-top:70px;
  padding-bottom:70px;
  border-top:1px solid var(--line)
}
.species-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px
}
.species-card {
  display:flex;
  flex-direction:column;
  gap:14px
}
.species-media {
  overflow:hidden;
  border-radius:6px;
  background:var(--sage-soft)
}
.species-media img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  transition:transform 900ms var(--ease)
}
.species-card:hover .species-media img {
  transform:scale(1.04)
}
.species-name {
  display:block;
  font-family:var(--serif);
  font-size:1.12rem;
  letter-spacing:-.02em;
  line-height:1.2
}
.species-note {
  display:block;
  font-size:.75rem;
  color:var(--muted);
  margin-top:3px
}
@media(max-width:1050px) {
  .species-grid { grid-template-columns:repeat(3,1fr); gap:16px }
}
@media(max-width:760px) {
  .species-grid { grid-template-columns:repeat(2,1fr); gap:14px }
  .species { padding-top:52px; padding-bottom:52px }
}

/* 2 · Photo d'appui dans l'en-tête de la page Tarifs — 4:5 */
.page-intro-grid {
  display:grid;
  grid-template-columns:1.4fr .6fr;
  gap:7%;
  align-items:end
}
.page-photo img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:6px 6px 45% 6px;
  background:var(--sage-soft)
}
@media(max-width:760px) {
  .page-intro-grid { grid-template-columns:1fr; gap:26px }
  .page-photo img { aspect-ratio:4/3; border-radius:6px }
}

/* 3 · (pas de photo sur la page Contact en v1 : voir NOTES.md, zone réservée) */

/* 4 · Surcharges de cadrage et de filet, explicitées
   — le hero passe d'une illustration à une photo verticale : on montre
     le haut du corps et la tête du cheval plutôt que le sol ;
   — le portrait d'approche est une photo horizontale dans un cadre
     quasi carré : on centre sur les mains ;
   — le contact zoome dans une source verticale pour ne garder que
     l'animal et les mains (le décor de la pièce sort du cadre). */
.hero-image {
  object-position:50% 32%
}
.portrait-art {
  object-position:50% 45%
}
.last-slide .text-link {
  border-bottom-color:var(--accent-soft)
}

/* =====================================================================
   Accueil vertical : chapitres plein écran qui s'accrochent au défilement
   (décision Drass 27/10/2026).

   SNAP_ENABLED = true — l'accroche vit ENTIÈREMENT ici : aucun JavaScript
   n'est nécessaire, donc elle fonctionne aussi sans script. Pour la couper,
   un seul endroit : ramener --snap-y à « none » ci-dessous — c'est déjà le cas
   sur mobile et tablette, voir la règle média en fin de bloc.

   « y proximity » et non « mandatory » : à 900x700 comme à 390x844, plusieurs
   chapitres sont plus hauts que la fenêtre (le contenu fait la hauteur).
   Avec mandatory, l'accroche ramènerait inlassablement le lecteur en haut du
   même chapitre et le bas de ces chapitres deviendrait inatteignable — un
   piège de défilement. Proximity aligne le chapitre quand on s'en approche et
   laisse le pied de page, le clavier et les lecteurs d'écran libres.
   ===================================================================== */
:root {
  --snap-y:y proximity
}
html {
  scroll-snap-type:var(--snap-y)
}
/* — Accroche coupée sur mobile et tablette —————————————————————————
   Décision Drass (28/10/2026, retour de test sur Android/Brave) : plus AUCUNE
   accroche verticale sur mobile et tablette, « le défilement doit rester là où
   le doigt le laisse ». Les deux conditions reprennent la frontière exacte du
   mode horizontal (assets/js/index.js : « (min-width: 1000px) and (pointer:
   fine) ») : sous 1000 px de large, ou dès que le pointeur principal est
   tactile (pointer: coarse), --snap-y passe à « none ». Le bureau garde donc
   l'accroche de la décision du 27/10, inchangée, et le mode horizontal (qui
   exige justement 1000 px ET un pointeur fin) ne voit rien changer : il
   n'utilise pas cette variable. Chapitres plein écran, défilement natif,
   clavier et pied de page ne bougent pas : seule la retenue automatique du
   geste disparaît. */
@media (max-width:999px), (pointer:coarse) {
  :root {
    --snap-y:none
  }
}
/* Un seul point d'accroche par chapitre, porté par un marqueur de 1 px posé
   absolument en haut de chaque section (aucun effet sur la mise en page).
   Pourquoi pas la section elle-même : quand un chapitre est plus haut que
   l'écran, le navigateur y voit DEUX points d'accroche (son début et sa fin),
   parfois distants de quelques pixels. Mesuré à 1440x900 : la molette se
   bloquait sur la paire 0/24 px du premier chapitre, le lecteur ne pouvait
   plus quitter « Bienvenue ». Avec un marqueur, il n'y a qu'une position par
   chapitre et la molette repart normalement. */
.snap-start {
  position:absolute;
  top:0;
  left:0;
  width:1px;
  height:1px;
  pointer-events:none;
  scroll-snap-align:start;
  /* normal et jamais always : un geste rapide doit pouvoir traverser
     plusieurs chapitres sans être retenu. */
  scroll-snap-stop:normal
}
/* Point d'accroche de FIN de document : un marqueur de 0 px posé après le
   pied de page (dans index.html). Sans lui, le dernier chapitre s'accroche à
   3472 px (son marqueur à 3660 px moins les 188 px de scroll-padding-top)
   alors que le bas du document est à 3659 px à 1366x768 : la fenêtre de
   proximité ramenait sur 3472 px la molette, la touche Fin et le tactile, et
   les 187 px du pied de page n'entraient JAMAIS dans la vue (mesuré :
   Fin -> scrollY 3472, pied de page à 768 px, zéro pixel visible).
   Aligné sur « end », ce marqueur n'ajoute qu'UNE position de repos — le bas
   du document — qui affiche le pied de page en entier. Hauteur 0 : la mise en
   page et les hauteurs de chapitre sont inchangées. Mesuré après correction à
   1366x768 : Fin -> 3659 px, pied de page 581-768 px, réseaux 697-741 px. */
.snap-end {
  display:block;
  height:0;
  pointer-events:none;
  scroll-snap-align:end;
  scroll-snap-stop:normal
}

/* =====================================================================
   Accueil en chapitres HORIZONTAUX (tache #65, prototype valide par Drass).
   Ne s'applique QUE si <html> porte la classe .hx, posee par
   assets/js/index.js quand l'environnement s'y prete : JavaScript actif, pas
   de prefers-reduced-motion, ecran d'au moins 1000 px avec pointeur fin.
   Sans JS, sous prefers-reduced-motion, sur ecran etroit ou tactile, aucune
   de ces regles n'est active : la page reste le defilement vertical d'avant.
   Seuls transform et opacity sont animes (aucune animation de mise en page).
   ===================================================================== */

/* Le mode horizontal gere lui-meme ses defilements doux sur la piste : le
   defilement doux du document ajouterait une animation parasite au passage
   d'un mode a l'autre. */
html.hx {
  scroll-behavior:auto
}

/* — Controles ————————————————————————————————————————————————
   Masques par l'attribut hidden hors mode horizontal ([hidden] est
   prioritaire sur ces display, regle globale de la feuille). */
html.hx .slide-nav {
  position:fixed;
  right:14px;
  bottom:clamp(14px,2.4vw,24px);
  z-index:30;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:8px 6px;
  border-radius:999px;
  background:rgba(246,247,242,.92);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px)
}
html.hx .slide-nav-button {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:50%;
  border:1px solid var(--underline);
  background:var(--white);
  color:var(--ink);
  transition:background .25s var(--ease),color .25s var(--ease)
}
html.hx .slide-nav-button .icon {
  width:18px;
  height:18px
}
html.hx .slide-nav-prev .icon {
  transform:rotate(180deg)
}
html.hx .slide-nav-button:hover:not(:disabled) {
  background:var(--green);
  border-color:var(--green);
  color:var(--white)
}
html.hx .slide-nav-button:disabled {
  opacity:.35;
  cursor:default
}

/* — Barre de progression : transform seulement, jamais de mise en page —— */
html.hx .track-progress {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  z-index:29;
  background:var(--line);
  overflow:hidden
}
html.hx .track-progress-fill {
  display:block;
  height:100%;
  background:var(--green);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .18s linear
}

/* — La piste ————————————————————————————————————————————————— */
html.hx .slide-track {
  display:flex;
  height:var(--hx-track-h,calc(100svh - var(--header-h)));
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch
}
html.hx .slide-track::-webkit-scrollbar {
  display:none
}
html.hx .slide-track:focus-visible {
  outline-offset:-8px
}

/* — Un chapitre = une vue. Le chapitre est lui-meme le conteneur de
     defilement vertical : un contenu plus haut que l'ecran se lit en
     defilant DANS le chapitre, jamais rogne (margin:auto centre le bloc
     quand il y a la place, le laisse a 0 quand il deborde).
     PAS d'overscroll-behavior-y:contain ici (tache #66, P2-a) : il coupait le
     relais du defilement vers le document en bas du dernier chapitre, donc le
     pied de page n'etait atteignable ni a la molette ni au clavier. Le script
     ne consomme la molette qu'A L'INTERIEUR de la presentation ; aux bornes il
     laisse l'evenement au defilement natif, qui enchaine vers le document.
     La piste garde son contain HORIZONTAL (geste de retour du navigateur). ——— */
html.hx .slide {
  flex:0 0 100%;
  width:100%;
  height:100%;
  min-height:0;
  display:flex;
  align-items:flex-start;
  padding:44px 0 32px;
  overflow-y:auto;
  scroll-snap-align:start;
  scroll-snap-stop:always
}
html.hx .slide > .container {
  margin-block:auto
}
html.hx .hero {
  padding-top:24px
}
/* La photo de couverture ne doit jamais rendre le chapitre 1 plus haut que
   la vue : on plafonne sa hauteur (mise en page statique, rien d'anime). */
html.hx .hero-image {
  max-height:calc(var(--hx-track-h,calc(100svh - var(--header-h))) - 200px)
}
html.hx .species,
html.hx .session {
  padding-top:44px;
  padding-bottom:32px
}

/* Entree du chapitre : une apparition (opacite + translation) jouee a
   l'arrivee du chapitre, et a ce moment-la seulement. Le remplissage `both`
   laisse le chapitre a opacity:1 au repos : aucun texte n'est laisse a demi
   transparent, ce qui ferait echouer le contraste (1,91:1 mesure sur le
   prototype quand l'estompage restait en place). */
@keyframes hx-enter {
  from {
    opacity:.45;
    transform:translate3d(0,18px,0)
  }
  to {
    opacity:1;
    transform:none
  }
}
html.hx .slide.is-current > .container {
  animation:hx-enter .5s var(--ease) both
}
/* Les apparitions au defilement vertical n'ont plus cours en horizontal ; ce
   filet garantit qu'aucun .reveal ne reste estompe. */
html.hx .reveal.is-pending {
  opacity:1;
  transform:none
}

/* — Affordance : la fleche du « faire defiler » pointe a droite ————— */
html.hx .scroll-cue .icon {
  transform:rotate(-90deg)
}

/* — Chapitre sombre : les reperes fixes (rail, progression) passent en clair.
     --on-dark est a 8,37:1 sur --band, --muted-soft n'y ferait que 2,22:1.
     En horizontal la page ne defile plus : c'est le script qui pose la classe
     sur <html> pour le chapitre courant (le suivi lien par lien de
     .is-on-band ne vaut que pour le defilement vertical). ————————— */
html.hx.on-dark .slide-rail a {
  color:var(--on-dark)
}
html.hx.on-dark .slide-rail a[aria-current=step]::before {
  background:var(--paper)
}
html.hx.on-dark .track-progress {
  background:var(--band-line)
}
html.hx.on-dark .track-progress-fill {
  background:var(--on-dark)
}