/* La suite du site, la partie qui explique : trois ecrans, un par question.
   Ce qui se passe, ce que ca coute, comment commencer. Le systeme est celui
   de la proposition E retenue par Pierre le 21 septembre : le recit en Nyght,
   Cantique une fois par ecran pour le titre, le rose pale des dates pour les
   prix et une phrase d'elle, des filets fins, de l'air. Rien ne bouge. Le
   ciel de l'ouverture est rendu une fois, immobile, au bord. */
.experience{position:relative}
/* No line between the galaxy and what follows: the ink of the reading
   sections rises over 45vh, and the living sky (tarifs-ciel.js) fades in
   within the reading section. The galaxy sinks into the night instead of being
   cut by an edge. */
.continuation{position:relative;isolation:isolate;z-index:4;background:linear-gradient(rgba(8,8,64,0),#080840 45vh);
  --reading-ink:#080840;--reading-text:#F5F1FA;--reading-muted:#C9C4DE;--reading-rose:#FFE4F3;--reading-line:rgba(255,228,243,.16);
  color:var(--reading-text);color-scheme:dark;
  font-family:'Nyght Serif',Georgia,serif;font-weight:300;font-size:clamp(17px,1.2vw,19.5px);line-height:1.7;text-wrap:pretty}
/* A broad, faint haze joins the two skies without moving the cloud canvas
   into the galaxy. Its opacity follows the existing scroll update. */
.continuation::before{content:'';position:absolute;top:-28vh;left:0;right:0;height:64vh;
  pointer-events:none;opacity:var(--scene-blend,0);
  background:radial-gradient(ellipse 64% 50% at 20% 52%,rgba(107,62,175,.10),transparent 75%),
    radial-gradient(ellipse 58% 48% at 85% 60%,rgba(64,72,157,.12),transparent 75%);}
.continuation-atmosphere{position:fixed;inset:0;z-index:-1;pointer-events:none;
  clip-path:inset(var(--sky-start,100vh) 0 var(--sky-end,0px));background:var(--reading-ink)}
.continuation-atmosphere canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#continuation-sky{opacity:.26;mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.14) 30%,rgba(0,0,0,.14) 70%,#000)}
#continuation-stars{opacity:.18}

/* --- un ecran par question ------------------------------------------------ */
.practical-section{position:relative;min-height:100vh;display:grid;align-items:center;
  padding:clamp(96px,14vh,150px) 0 clamp(72px,10vh,120px);scroll-margin-top:0;border-top:1px solid var(--reading-line)}
/* one sky runs under the first two sections: no rule between them */
.ciel-vivant .practical-section{border-top:0}
.section-inner{width:min(1180px,84%);margin-inline:auto}
/* Colonnes seulement : le gap d'origine valait aussi entre les lignes, et
   s'ajoutait a la marge du titre, ce qui ouvrait deux cents pixels de vide
   sous lui. L'espacement vertical est celui de .tete, et lui seul. */
.deux{display:grid;grid-template-columns:minmax(0,7fr) minmax(300px,5fr);
  column-gap:clamp(40px,7vw,120px);row-gap:0;align-items:start}
/* Le titre seul sur sa ligne. Les deux colonnes demarraient a la hauteur du
   surtitre, si bien que la colonne de droite venait se poser a cote du titre
   et lui disputait la ligne. En pleine largeur, il la garde pour lui. */
.tete{grid-column:1 / -1;margin-bottom:clamp(30px,4vw,56px)}
.tete h2{margin:0}
.surtitre{font-size:12px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--reading-rose);opacity:.7;margin:0 0 18px}
.practical-section h2{font-family:'Cantique',serif;font-weight:400;letter-spacing:.01em;line-height:1.1;text-wrap:balance;
  font-size:clamp(34px,3.4vw,50px);color:var(--reading-rose);max-width:22ch;margin:0 0 30px}
.practical-section h3{font-family:'Nyght Serif',serif;font-weight:500;font-size:1em;letter-spacing:.01em;color:var(--reading-text);margin:0 0 12px}
.practical-section p{margin:0 0 1.1em;color:var(--reading-muted);max-width:56ch}
.practical-section p:last-child{margin-bottom:0}
.practical-section a{color:inherit}
.practical-section :focus-visible,.site-footer a:focus-visible{outline:2px solid var(--reading-rose);outline-offset:6px}
.practical-section h2:focus,.practical-section h3[tabindex]:focus{outline:none}
.practical-section [hidden]{display:none!important}
.continuation ::selection{background:var(--reading-rose);color:var(--reading-ink)}
.voix{font-family:'Homemade Apple',cursive;font-size:1.05em;line-height:1.7;color:var(--reading-rose);max-width:34ch;margin:28px 0 0}
.text-link{display:inline-flex;align-items:center;gap:12px;padding-block:8px;min-height:44px;
  text-decoration:none;border-bottom:1px solid rgba(255,138,206,.55);color:var(--reading-rose);font-weight:400}
.text-link:hover{border-bottom-color:var(--reading-rose)}
.colonne{border-top:1px solid rgba(255,228,243,.28);padding-top:22px;scroll-margin-top:140px}

/* 1. ce qui se passe (« pas », pas « etapes » : .etapes est la liste des
   stations de la galaxie, cachee hors de la scene) */
.pas{list-style:none;margin:0;padding:0;counter-reset:e}
.pas li{counter-increment:e;position:relative;padding:14px 0 14px 44px;border-bottom:1px solid var(--reading-line)}
.pas li::before{content:counter(e);position:absolute;left:0;top:14px;font-weight:500;color:var(--reading-rose)}
.pas h4{font:500 1em/1.5 'Nyght Serif',serif;margin:0 0 4px;color:var(--reading-text)}
.pas p{font-size:.94em;margin:0}
.pollyanna-portrait{display:flex;align-items:center;gap:18px;margin:34px 0 0}
.pollyanna-portrait img{display:block;width:64px;height:80px;object-fit:cover;object-position:center 47%;border-radius:2px}
.pollyanna-portrait figcaption{max-width:23ch;font-size:.82em;color:var(--reading-muted);line-height:1.6}
.quand{margin-top:40px}

/* --- section 1 : communication animale -----------------------------------
   A reading section. The title keeps its line, Pollyanna's portrait holds
   in the left column while her text runs in the right one. The river that
   opened here now closes the page, in the footer. */
.decouverte-texte{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);column-gap:clamp(32px,6vw,96px);
  align-items:start;scroll-margin-top:120px}
.decouverte-texte .pollyanna-portrait{position:sticky;top:140px;flex-direction:column;align-items:flex-start;margin:6px 0 0}
.decouverte-texte .pollyanna-portrait img{width:100%;max-width:220px;height:auto;aspect-ratio:3/4}
.prose{max-width:64ch}
.prose p{max-width:none;margin:0 0 1.15em;line-height:1.75}
.prose .chapeau{font-size:1.24em;line-height:1.6;color:var(--reading-text);margin-bottom:1.3em}
/* The heading fades through the arriving atmosphere as one phrase,
   then the portrait and each paragraph rise in turn.
   Native scroll-driven animations; html.anime is set by sections.js when
   motion is allowed (or forced), and without support the text simply
   stands. */
@supports (animation-timeline: view()){
  .anime .services h2{animation:services-emerge both linear;
    animation-timeline:view();animation-range:entry 0% cover 35%}
  .anime .services .prose > p,.anime .services .pollyanna-portrait{animation:monter both cubic-bezier(.2,.7,.2,1);
    animation-timeline:view();animation-range:entry 0% entry 80%}
}
@keyframes services-emerge{from{opacity:0}to{opacity:1}}
@keyframes monter{from{opacity:0;transform:translateY(36px)}}
@media (max-width:900px){
  .decouverte-texte{grid-template-columns:1fr}
  .decouverte-texte .pollyanna-portrait{position:static;flex-direction:row;align-items:center;margin:0 0 28px}
  .decouverte-texte .pollyanna-portrait img{width:64px;height:80px}
}

/* 2. ce que ca coute */
.seance{display:grid;grid-template-columns:1fr auto;gap:4px 24px;padding:20px 0;border-bottom:1px solid var(--reading-line)}
.seance:first-child{border-top:1px solid rgba(255,228,243,.28)}
.seance .nom{font-weight:500;color:var(--reading-text)}
.seance .nom small{display:block;font-weight:300;font-size:.82em;color:var(--reading-rose);opacity:.8;margin-top:2px}
.seance .prix{text-align:right;color:var(--reading-rose);font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.5}
.seance .prix small{display:block;font-size:.78em;color:var(--reading-muted);opacity:.85}
.seance .plus{grid-column:1 / -1;font-size:.9em;margin:2px 0 0}
.seance .session-link{grid-column:1 / -1;margin-top:6px;font-size:.9em}
.session-link{display:inline-flex;align-items:center;gap:10px;width:fit-content;min-height:40px;text-decoration:none;
  color:var(--reading-rose);border-bottom:1px solid rgba(255,138,206,.45)}
.session-link:hover{border-bottom-color:var(--reading-rose)}
.session-link svg{width:16px;height:16px}
/* --- section 2 : les tarifs --------------------------------------------
   Trois colonnes egales, la structure d'une grille de prix. Ce qui en fait
   d'habitude un ecran de start-up est laisse de cote : pas de badge, pas de
   remise en pastille, pas de coche verte, pas de carte agrandie. L'offre du
   milieu se distingue par un filet plus clair et un bouton plein, rien de
   plus. Les puces sont des etoiles a quatre branches, la seule concession au
   ciel du reste du site. */
/* Rangees partagees entre les trois cartes (subgrid) : une info plus longue
   dans une carte faisait descendre son prix sous celui des deux autres. Dans
   une grille de prix, les prix s'alignent, et les boutons aussi. */
.offres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(5,auto);
  column-gap:clamp(14px,1.8vw,26px);row-gap:0}
.offre{position:relative;display:grid;grid-row:span 5;grid-template-rows:subgrid;min-width:0;
  padding:clamp(24px,2.4vw,34px) clamp(22px,2.2vw,32px) clamp(22px,2.2vw,30px);
  border:1px solid rgba(255,228,243,.15);border-radius:6px;background:rgba(60,52,160,.14)}
.offre--phare{border-color:rgba(255,228,243,.48);background:rgba(255,228,243,.045)}
.offre h3{font:500 1.18em/1.3 'Nyght Serif',serif;margin:0 0 6px;color:var(--reading-text)}
.offre .offre-prix{display:flex;align-items:baseline;gap:.22em;margin:clamp(22px,2.4vw,34px) 0 2px;
  font-family:'Cantique',serif;font-size:clamp(52px,5.2vw,78px);line-height:.9;color:var(--reading-text);
  font-variant-numeric:tabular-nums;max-width:none}
.offre-prix .devise{font-family:var(--ui);font-size:.24em;letter-spacing:.16em;color:var(--reading-muted)}
.offre .offre-unite{font-size:.84em;margin:0 0 22px;max-width:none}
.offre-inclus{list-style:none;margin:0 0 28px;padding:18px 0 0;border-top:1px solid var(--reading-line)}
.offre-inclus li{position:relative;padding:6px 0 6px 22px;font-size:.93em;line-height:1.55;color:var(--reading-muted)}
.offre-inclus li::before{content:'';position:absolute;left:0;top:.72em;width:10px;height:10px;
  background:var(--reading-rose);opacity:.75;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0 9.3 6.7 16 8 9.3 9.3 8 16 6.7 9.3 0 8 6.7 6.7z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0 9.3 6.7 16 8 9.3 9.3 8 16 6.7 9.3 0 8 6.7 6.7z'/%3E%3C/svg%3E") center/contain no-repeat}
.offre-lien{align-self:end;display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:48px;padding:0 18px;border:1px solid rgba(255,228,243,.4);border-radius:2px;
  color:var(--reading-text);text-decoration:none;font-size:.92em;transition:background .25s ease,color .25s ease,border-color .25s ease}
.offre-lien svg{width:16px;height:16px;flex-shrink:0}
.offre-lien:hover{background:rgba(255,228,243,.08);border-color:var(--reading-rose)}
.offre--phare .offre-lien{background:var(--reading-rose);border-color:var(--reading-rose);color:var(--reading-ink)}
.offre--phare .offre-lien:hover{background:#fff;border-color:#fff}
/* Le compteur d'animaux tient la rangee de l'unite dans la grille partagee :
   il est l'unite de cette carte (pour un, deux ou trois animaux), comme
   « le soin » et « l'ensemble » le sont des deux autres. */
/* Le prix n'est pas cliquable, et il ne doit pas le devenir par accident : la
   boite de Cantique deborde loin sous ses glyphes et recouvrait le bouton
   « un animal de moins ». Le clic tombait sur le chiffre, pas sur le bouton. */
.offre-prix{pointer-events:none}
.offre-prix .montant{position:relative;display:inline-block}
.offre-prix .chiffre{display:inline-block;will-change:transform,opacity}
.offre-prix .chiffre.sortant{position:absolute;left:0;top:0}
.compteur{display:flex;align-items:center;gap:14px;margin:0 0 22px}
.compteur-bouton{display:grid;place-items:center;width:32px;height:32px;padding:0;
  border:1px solid rgba(255,228,243,.4);border-radius:50%;background:transparent;color:var(--reading-rose);
  cursor:pointer;transition:background .2s ease,border-color .2s ease,opacity .2s ease}
.compteur-bouton svg{width:14px;height:14px}
.compteur-bouton:hover:not(:disabled){background:rgba(255,228,243,.1);border-color:var(--reading-rose)}
.compteur-bouton:disabled{opacity:.28;cursor:default}
.compteur-bouton:focus-visible{outline:2px solid var(--reading-rose);outline-offset:3px}
.compteur-valeur{min-width:7.5ch;text-align:center;font-size:.9em;color:var(--reading-text);font-variant-numeric:tabular-nums}

/* FAQ: an enclosed panel, title and a way to ask on the left, questions on
   the right. Native details/summary, so it opens with mouse, keyboard and
   screen reader without JS. The open row lifts with a faint rose wash, the
   chevron turns over. Where the browser can animate to an intrinsic size
   (interpolate-size) the answer unfolds; elsewhere it simply opens. */
.faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start;
  padding:clamp(28px,4vw,56px);border:1px solid rgba(255,228,243,.15);border-radius:6px;background:rgba(8,8,64,.42)}
/* no black in Ce que je propose: the FAQ lifts the sky instead of dimming it */
.faq{margin:clamp(48px,6vw,80px) 0 0;background:rgba(60,52,160,.14)}
.faq .faq-titre{font-family:'Cantique',serif;font-weight:400;font-size:clamp(30px,3.2vw,44px);line-height:1.1;
  letter-spacing:.01em;margin:0 0 18px;color:var(--reading-text)}
.faq-intro p{max-width:36ch;margin:0 0 26px}
.faq-bouton{width:fit-content;min-width:230px}
.faq-intro .faq-direct{font-size:.84em;margin:14px 0 0;opacity:.85}
.faq-direct a{color:var(--reading-rose);text-underline-offset:4px}
.faq-liste details{border-bottom:1px solid var(--reading-line);border-radius:2px;transition:background .3s ease}
.faq-liste details:first-child{border-top:1px solid var(--reading-line)}
.faq-liste details[open]{background:rgba(255,228,243,.05)}
.faq-liste summary{display:flex;align-items:center;gap:14px;min-height:56px;padding:14px 14px;
  cursor:pointer;list-style:none;color:var(--reading-text);line-height:1.45}
.faq-liste summary::-webkit-details-marker{display:none}
.faq-liste summary span{flex:1}
.faq-icone{flex-shrink:0;width:19px;height:19px;color:var(--reading-rose);opacity:.8}
.faq-chevron{flex-shrink:0;width:18px;height:18px;color:var(--reading-muted);transition:transform .35s cubic-bezier(.2,.8,.2,1),color .2s ease}
.faq-liste details[open] .faq-chevron{transform:rotate(180deg);color:var(--reading-rose)}
.faq-liste summary:hover{color:#fff}
.faq-liste summary:hover .faq-chevron{color:var(--reading-rose)}
.faq-liste summary:focus-visible{outline:2px solid var(--reading-rose);outline-offset:-2px}
.faq-liste details p{margin:0;padding:0 46px 18px 47px;font-size:.94em;color:var(--reading-muted);max-width:none}
@supports (interpolate-size:allow-keywords){
  .faq-liste{interpolate-size:allow-keywords}
  .faq-liste details::details-content{block-size:0;overflow:hidden;
    transition:block-size .35s cubic-bezier(.2,.8,.2,1),content-visibility .35s allow-discrete}
  .faq-liste details[open]::details-content{block-size:auto}
}
@media (max-width:900px){
  .faq{grid-template-columns:1fr;padding:26px 20px}
  .faq-liste summary{padding:14px 6px}
  .faq-liste details p{padding:0 10px 18px 39px}
}
@media (max-width:900px){
  .offres{grid-template-columns:1fr;grid-template-rows:none;row-gap:16px}
  .offre{display:flex;flex-direction:column;grid-row:auto}
  .offre-lien{margin-top:auto;align-self:stretch}
}

.savoir p{font-size:.94em;margin-bottom:.9em}
.savoir b{font-weight:500;color:var(--reading-text)}
.care-note{font-size:.84em;margin-top:26px;padding-top:18px;border-top:1px solid var(--reading-line);opacity:.8}

/* 3. commencer : l'intro a gauche, le formulaire a droite.
   The grid version Pierre chose (26 September): one framed panel on a faint
   star chart, the title and the direct contact on the left, the form in a
   frosted card on the right, filled fields. Then, at his request, in the
   language of the prices just above it: 6px on the containers and 2px on
   the controls, as on the price cards; Nyght throughout and Cantique for the
   title; the FAQ's veil for the panel, the featured offer's rose for the
   card, its button to send; no black shadows. The card carries the price
   cards' spotlight edge (tarifs-ciel.js feeds it). No placeholders: they
   would be new words. */
.request .section-inner{position:relative;isolation:isolate;
  padding:clamp(36px,4.2vw,64px) clamp(24px,4.6vw,72px);
  border:1px solid rgba(255,228,243,.15);border-radius:6px;background:rgba(60,52,160,.14)}
/* the star chart: a grid of fine lines and three sparse, offset layers of
   stars, strongest at the top and fading toward the bottom */
.request .section-inner::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(circle,rgba(255,255,255,.6) 0 .8px,transparent 1.4px) 0 0/173px 149px,
    radial-gradient(circle,rgba(255,228,243,.45) 0 .7px,transparent 1.3px) 61px 37px/241px 211px,
    radial-gradient(circle,rgba(200,215,255,.5) 0 .9px,transparent 1.6px) 113px 89px/317px 263px,
    linear-gradient(rgba(255,228,243,.06) 1px,transparent 1px) 0 -1px/58px 58px,
    linear-gradient(90deg,rgba(255,228,243,.06) 1px,transparent 1px) -1px 0/58px 58px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 0,#000 20%,transparent 100%);
  mask-image:radial-gradient(ellipse 90% 80% at 50% 0,#000 20%,transparent 100%)}
/* title and intro in the left column, the card spanning both rows beside
   them: the left block sits around the card's middle. The FAQ's 5/7 split
   and gap: at 5/6 the card was too narrow for "Communication animale" to
   hold on one line in its tile. */
.request .deux{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,80px)}
.request .tete{grid-column:1;grid-row:1;align-self:end;margin-bottom:26px}
.request .tete h2{max-width:none}
.request-intro{grid-column:1;grid-row:2;align-self:start}
.request .request-workspace{grid-column:2;grid-row:1 / span 2;align-self:center}
.request-intro p{max-width:40ch}
.request .request-reassurance{font-size:.94em;margin:0}

/* the card: the featured offer's rose frame and wash, frosted over the star
   chart so the fields read on a quiet ground. The status line under the
   button keeps its reserved height, so the bottom padding is the smaller
   one. */
.request .request-workspace{position:relative;border:1px solid rgba(255,228,243,.48);border-radius:6px;
  padding:clamp(24px,2.6vw,38px) clamp(24px,2.6vw,38px) clamp(12px,1.2vw,18px);
  background:rgba(255,228,243,.045);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.request form,.request fieldset{min-width:0}

/* the four choices, as tiles framed like the price cards' buttons */
.service-choice{border:0;margin:0 0 20px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.service-choice legend,.form-field label{font-size:.94em;font-weight:500;line-height:1.4;color:var(--reading-text)}
.service-choice legend{margin-bottom:10px}
.service-choice label{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 12px;
  border:1px solid rgba(255,228,243,.15);border-radius:2px;background:rgba(255,228,243,.03);cursor:pointer;
  font-size:.88em;line-height:1.35;color:var(--reading-muted);
  transition:background-color .25s ease,border-color .25s ease,color .25s ease}
.service-choice label:hover{border-color:rgba(255,228,243,.32);color:var(--reading-text)}
.service-choice label:has(input:checked){border-color:rgba(255,228,243,.6);background:rgba(255,228,243,.08);color:var(--reading-text)}
.service-choice label:has(input:focus-visible){outline:2px solid var(--reading-rose);outline-offset:3px}
.service-choice input{appearance:none;width:16px;height:16px;border:1px solid rgba(255,228,243,.5);border-radius:50%;margin:0;
  flex-shrink:0;display:grid;place-items:center;transition:border-color .2s ease}
.service-choice input::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--reading-rose);transform:scale(0);transition:transform .2s ease}
.service-choice input:checked{border-color:var(--reading-rose)}
.service-choice input:checked::before{transform:scale(1)}
.service-choice input:focus-visible{outline:none}

/* filled fields; focus lights the frame in rose with a soft halo, and a
   transparent outline that forced colours turn visible */
.request .form-guidance{font-size:.84em;line-height:1.6;margin:0 0 16px}
.form-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.form-field{margin-bottom:16px;min-width:0;scroll-margin-top:160px}
.form-field label{display:block;margin-bottom:8px}
.form-field label span{color:var(--reading-rose)}
.form-field input,.form-field textarea{display:block;width:100%;border:1px solid rgba(255,228,243,.14);border-radius:2px;
  background:rgba(255,228,243,.04);color:var(--reading-text);font:300 1em/1.55 'Nyght Serif',Georgia,serif;padding:11px 14px;
  caret-color:var(--reading-rose);transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
  scrollbar-width:thin;scrollbar-color:#8C789B #11113A}
.form-field input:hover,.form-field textarea:hover{border-color:rgba(255,228,243,.3)}
.form-field textarea{resize:vertical;min-height:112px;max-height:600px}
.form-field input:focus,.form-field textarea:focus{outline:2px solid transparent;outline-offset:2px;
  border-color:var(--reading-rose);background:rgba(255,228,243,.07);box-shadow:0 0 0 3px rgba(255,138,206,.2)}
/* an invalid field keeps its colour when the cursor comes back to it */
.form-field [aria-invalid="true"],.form-field [aria-invalid="true"]:focus{border-color:#FFA6B7;box-shadow:0 0 0 3px rgba(255,166,183,.16)}
.request .field-hint{font-size:.84em;line-height:1.5;margin:8px 0 0}
.request .field-error{font-size:.84em;line-height:1.5;color:#FFB5C3;margin:8px 0 0}

/* the send button: the featured offer's button, across the card */
.request-submit{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;
  min-height:48px;margin-top:4px;padding:0 18px;border:1px solid var(--reading-rose);border-radius:2px;
  background:var(--reading-rose);color:var(--reading-ink);font:inherit;font-size:.92em;cursor:pointer;
  transition:background .25s ease,border-color .25s ease}
.request-submit svg{width:16px;height:16px;flex-shrink:0}
.request-submit:hover{background:#fff;border-color:#fff}
.request-submit:focus-visible{outline:2px solid var(--reading-rose);outline-offset:3px}
.request-submit:disabled{opacity:.65;cursor:wait}
.request .form-status{font-size:.84em;line-height:1.6;margin:10px 0 0;min-height:1.6em}
.form-trap{display:none}
.request .preview-notice{font-size:.84em;line-height:1.6;margin-bottom:16px}
.request-received{padding:12px 0;scroll-margin-top:150px}
.request-received>svg{color:var(--reading-rose);margin-bottom:22px}
.request-received h3{font-family:'Cantique',serif;font-weight:400;font-size:clamp(28px,2.4vw,36px);line-height:1.2;margin-bottom:18px;color:var(--reading-rose)}
.request-received>p{max-width:46ch}
.request-received strong{font-weight:500;color:var(--reading-text);overflow-wrap:anywhere}

/* the direct contact: a question set like a subheading, then the two ways
   to reach her */
.direct-contact{margin-top:clamp(34px,4.5vw,56px)}
.direct-contact > p{font:500 1.1em/1.4 'Nyght Serif',Georgia,serif;color:var(--reading-text);margin:0 0 12px}
.direct-contact a{display:block;width:fit-content;max-width:100%;overflow-wrap:anywhere;padding:3px 0;text-decoration:none;color:var(--reading-text);
  font-size:.94em;border-bottom:1px solid transparent;transition:border-color .2s ease,color .2s ease}
.direct-contact a + a{color:var(--reading-muted)}
.direct-contact a:hover{border-bottom-color:rgba(255,228,243,.5);color:var(--reading-rose)}

/* --- navigation et cadre ----------------------------------------------- */
/* Sous la marque et la navigation, une brume de nuit plutot qu'un bandeau :
   ce qui passe dessous se floute et s'assombrit, puis la brume se dissout
   vers le bas, sans bord. Quand la riviere occupe l'ecran, il n'y a rien
   a lire dessous : la brume laisse la place a une ombre legere. */
.nav-backdrop{position:fixed;inset:0 0 auto;height:120px;z-index:5;
  background:linear-gradient(rgba(8,8,64,.8),rgba(8,8,64,.5) 55%,rgba(8,8,64,0));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  -webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent);
  visibility:hidden;opacity:0;pointer-events:none;transition:opacity .6s ease,visibility 0s linear .6s}
body.practical .nav-backdrop{visibility:visible;opacity:1;transition:opacity .6s ease,visibility 0s}
/* over the living sky the mist takes the deep blue of its floor, not ink */
body.sur-ciel .nav-backdrop{background:linear-gradient(rgba(24,24,82,.82),rgba(24,24,82,.5) 55%,rgba(24,24,82,0))}
/* sur la riviere, un simple assombrissement du haut du ciel, sans flou :
   le saule monte jusque sous les mots */
body.practical.scene-pleine .nav-backdrop{height:150px;-webkit-backdrop-filter:none;backdrop-filter:none;
  background:linear-gradient(rgba(5,5,24,.66),rgba(5,5,24,.32) 50%,rgba(5,5,24,0))}
/* and a close dark halo around the words, which carries them over the lit
   foliage without darkening the picture any further */
body.scene-pleine .nav a{text-shadow:0 0 3px rgba(5,5,24,.75),0 0 12px rgba(5,5,24,.8),0 1px 16px rgba(8,8,64,.8)}
/* the name's coloured half has a transparent fill (its colours are a clipped
   background): a text-shadow is painted over those glyphs and turned them
   black. A drop-shadow filter stays behind the whole name. */
body.scene-pleine .marque-nom{text-shadow:none;filter:drop-shadow(0 0 3px rgba(5,5,24,.8)) drop-shadow(0 1px 10px rgba(5,5,24,.75))}
body.scene-pleine .nav.filee a[aria-current]{text-shadow:0 0 3px rgba(5,5,24,.75),0 0 12px rgba(5,5,24,.8),0 0 16px rgba(255,138,206,.42)}
body.practical .aide{display:none}
body.practical .marque-bloc{top:20px;height:48px}
body.practical .nav{top:20px;height:48px;opacity:1;pointer-events:auto;transition-delay:0s}
.nav a[aria-current="location"]{color:#fff}
.nav a[aria-current="location"]::after{transform:scaleX(1);opacity:.65}
.skip-link{position:fixed;top:10px;left:10px;z-index:100;padding:14px 20px;background:#FBF5E8;color:#080840;
  transform:translateY(-150%);border-radius:4px}
.skip-link:focus{transform:none}
/* the galaxy fades out as the reading takes over: behind the rising ink a
   visibility pop would show */
.chemin #galaxie3d{transition:opacity .8s ease}
.experience-ended #galaxie3d{visibility:hidden!important;opacity:0!important;transition:opacity .8s ease,visibility 0s linear .8s!important}
.experience-ended .etapes,.experience-ended .chemin h2{
  visibility:hidden!important;opacity:0!important;pointer-events:none!important;transition:none!important}
/* --- pied de page : la riviere, en generique de fin -----------------------
   The painted river closes the page. It sits a nav's height below the top of
   the footer, because the willow's crown touches the top of the painting and
   ran under the menu, and its top edge dissolves into the ink. --haut is
   snapped to whole pixels: a fractional offset drew a light line on that
   edge. The credits stand top left, over the sky. sections.js loads the
   iframe as the footer approaches and pauses it off screen. */
.site-footer{position:relative;z-index:4;height:100vh;height:100svh;min-height:480px;overflow:hidden;
  background:#080840;color:#C9C4DE;font-family:'Nyght Serif',serif;font-weight:300;
  /* Pierre, 26 Sept: the painting takes the whole viewport. The river
     draws cover in the footer, cropped by its own rule (vertical crop
     anchored at the top so the willow's crown stays, horizontal centred);
     a short fade at the top melts its edge into the form above as it
     scrolls in. No title of its own: the brand at the top grows into it
     (body.au-pied, below). */}
.pied-scene{position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(transparent,#000 4%);mask-image:linear-gradient(transparent,#000 4%)}
.pied-riviere{display:block;width:100%;height:100%;border:0;background:#080840;pointer-events:none}
.site-footer p,.site-footer a{font-size:15px;line-height:1.6;color:inherit;margin:0}
.site-footer a{padding:10px 0;text-underline-offset:5px}
/* At the end of the page the brand grows into the footer's title (Pierre,
   26 Sept): logo and name, with the name's shifting colours, at the size
   the footer title had, where it stood, so the name is shown once. Name
   size, logo height and gap keep the header's proportions (48 / 21, 19 / 21). */
/* Then (same evening) twice that size and lower: the name, 92px at 1440,
   breaks after « by ». Beside the logo, level with it: the logo is exactly
   as tall as the name's ink, from the top of « Intuition » to the tail of
   the « y » in « Pollyanna », measured in Cantique at 2.645 em (its ascents
   and descents are long, the line boxes say nothing about them). The ink
   starts .163 em above the name's box: that margin puts the top of the
   letters level with the top of the logo. Up in the sky, under the nav
   (Pierre: « here », the empty sky around the Milky Way). Then reduced
   to seven tenths: 65px at 1440. */
body.au-pied .marque-bloc{--taille:clamp(42px,4.5vw,67px);top:max(12vh,96px);height:calc(2.645 * var(--taille));
  align-items:flex-start;gap:calc(.35 * var(--taille))}
body.au-pied .marque-nom{font-size:var(--taille);display:block;white-space:normal;max-width:6.6em;line-height:1.05;
  margin-top:calc(.163 * var(--taille))}

@media(max-width:1000px){
  .deux{gap:48px}
}
@media(max-width:900px){
  .practical-section{min-height:0;padding-top:calc(150px + env(safe-area-inset-top));scroll-margin-top:0}
  /* the nav sits under the brand here, its thread near 100px: the mist stays
     dense down to it and dissolves below */
  .nav-backdrop{height:calc(172px + env(safe-area-inset-top));
    -webkit-mask-image:linear-gradient(#000 66%,transparent);mask-image:linear-gradient(#000 66%,transparent)}
  body.practical.scene-pleine .nav-backdrop{height:calc(190px + env(safe-area-inset-top))}
  body.practical .marque-bloc{top:calc(18px + env(safe-area-inset-top));height:44px}
  /* on a phone the grown brand sits under the nav, and its name may wrap */
  body.au-pied .marque-bloc{--taille:27px;top:calc(122px + env(safe-area-inset-top));height:calc(2.645 * var(--taille))}
  body.practical .nav{top:calc(76px + env(safe-area-inset-top));height:auto}
  .deux{grid-template-columns:1fr;row-gap:44px}
  .colonne{border-top:0;padding-top:0}
  .form-pair{grid-template-columns:1fr}
  .request .deux{grid-template-columns:1fr}
  .request .tete,.request-intro,.request .request-workspace{grid-column:auto;grid-row:auto}
  .request .tete{margin-bottom:0}
}
@media(max-width:700px){
  .section-inner{width:86%}
  #continuation-sky{opacity:.22}
  .practical-section h2{font-size:clamp(32px,9vw,40px)}
  .request .section-inner{width:92%;padding:36px 16px 20px}
  .request .request-workspace{padding:22px 16px}
  .service-choice{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .nav-backdrop,.request-submit,.session-link,.service-choice label,.service-choice input::before,
  .form-field input,.form-field textarea{transition:none}
}
@media(forced-colors:active){
  .continuation-atmosphere{display:none}
  .service-choice input{appearance:auto}
  .request .section-inner::before{display:none}
}

/* The living sky under Communication animale and the prices (tarifs-ciel.js).
   It scrolls with the page; the canvas only sticks to the screen so that it
   paints what is seen, and the shader places each pixel in the page. The
   container starts at the reading section, keeping both galaxy corners clear.
   A broad top fade softens the sky's arrival within its own section.
   At the bottom the container fades into the form. No overflow here: it
   would break the sticky. */
.ciel-vivant{position:relative}
.tarifs-ciel{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(transparent,#000 min(36vh,320px),#000 calc(100% - min(26vh,220px)),transparent);
  mask-image:linear-gradient(transparent,#000 min(36vh,320px),#000 calc(100% - min(26vh,220px)),transparent)}
.tarifs-ciel canvas{position:sticky;top:0;display:block;width:100%;height:100vh}
.ciel-vivant .section-inner{position:relative;z-index:1}
@media(forced-colors:active){.tarifs-ciel{display:none}}

/* Footer, bottom line: the legal pages on the left, the Taykon credit on the
   right, over the river's dark grass. A low gradient under it keeps both
   readable whatever the painting does. Airfly is held small here at Pierre's
   request, under the Taykon system's 32px floor: it signs a page, it is not
   the wordmark of a cover. Both selectors on the links: .site-footer
   a:first-child would otherwise set the first legal link in Cantique. */
@font-face{font-family:'Airfly';src:url('../fonts/Airfly-taykon.woff2') format('woff2');font-display:swap}
.site-footer::after{content:'';position:absolute;inset:auto 0 0;height:min(34vh,260px);z-index:0;pointer-events:none;
  background:linear-gradient(transparent,rgba(5,5,24,.78))}
.pied-bas{position:absolute;z-index:1;left:8vw;right:8vw;bottom:max(14px,env(safe-area-inset-bottom));
  /* all on the left, over the water: at full viewport the painting's bottom right
     is the animals, and on a wide window the credit sat on the dog and the cat */
  display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:0 32px;
  text-shadow:0 0 3px rgba(5,5,24,.8),0 0 14px rgba(5,5,24,.8)}
.pied-bas nav{display:flex;gap:24px;flex-wrap:wrap}
.site-footer .pied-bas a,.site-footer .pied-bas a:first-child{font-family:inherit;font-size:14px;line-height:1.4;color:#C9C4DE;
  padding:10px 0;text-decoration:underline;text-decoration-color:rgba(201,196,222,.45)}
.site-footer .pied-bas a:hover{color:#fff}
.site-footer .pied-bas .credit{display:flex;align-items:baseline;gap:.55em;font-size:14px}
.pied-bas .credit-nom{color:#F5F1FA;font-family:'Airfly',serif;font-size:17px;letter-spacing:.04em;line-height:1}
@media(max-width:700px){.pied-bas{left:7vw;right:7vw;flex-direction:column;align-items:flex-start}}

/* Tarifs: the spotlight edge from Moss & Tall Trees' cards, in her colours.
   A 1px ring laid over each card's border shows a light that follows the
   pointer: white at its heart, the brand rose, then violet, nothing
   beyond 240px. Brighter than MTT's green: rose on this violet sky
   vanished at the same strength. The mask keeps the light to the border band. tarifs-ciel.js
   feeds --x and --y. Corners at 6px, as on MTT's cards. Hidden where there
   is no hover, since nothing would move it. */
.faq{position:relative}
.offre::before,.faq::before,.request .request-workspace::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:radial-gradient(240px 240px at calc(var(--x,-9999) * 1px) calc(var(--y,-9999) * 1px),
    #fff,rgba(255,138,206,.95) 30%,rgba(140,0,255,.55) 62%,transparent 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
@media(hover:none),(forced-colors:active){.offre::before,.faq::before,.request .request-workspace::before{display:none}}

/* FAQ: its edge light runs 2px wide instead of 1 (Pierre). The panel is the
   widest frame on the page, and at 1px its light read as a hairline. The
   ring starts on the border and takes one more pixel inside it. */
.faq::before{padding:2px}