/* « La finition » — 07/10/2026, Axel : « polir le site, lui donner un aspect luxueux, professionnel ».
   Une couche par-dessus trait.css et papier.css. Les choix du cadrage ne bougent pas (CONTRAT.md : le bouton or, le
   liseré rayé qui défile, le lauburu en filigrane, la typographie des titres, la chorégraphie) : on retire seulement ce
   qui faisait « pas fini » — ombres lourdes, filets épais, ombre des mots trop appuyée, grille trop présente, coins et
   pastilles trop marqués, cartes serrées. Pour revenir en arrière : retirer la ligne <link> de cette feuille. */

/* le papier : la grille se fait plus discrète (le plan reste lisible, le texte respire), et le papier prend un grain
   (papier-grain.svg, gris à 24 % ; « plus marqué », Axel) qui le fonce d'un souffle — Axel : « un côté un peu plus sombre, vraiment très
   légèrement, pour faire une sorte de texture ». Le grain est une couche de fond : rien ne se recalcule au défilement. */
.bloc{background-image:url(papier-grain.svg),linear-gradient(rgba(14,41,71,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(14,41,71,.05) 1px,transparent 1px),linear-gradient(rgba(14,41,71,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(14,41,71,.02) 1px,transparent 1px);
  background-size:240px 240px,40px 40px,40px 40px,8px 8px,8px 8px}
.scene::before{background-image:url(papier-grain.svg),linear-gradient(rgba(14,41,71,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(14,41,71,.055) 1px,transparent 1px),linear-gradient(rgba(14,41,71,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(14,41,71,.022) 1px,transparent 1px);
  background-size:240px 240px,40px 40px,40px 40px,8px 8px,8px 8px}

/* le titre : l'ombre des mots devient une profondeur à peine visible, plus un double gris */
.accueil h1 .mot::before,.accueil h1.pose .mot::before{opacity:.16}
@media (prefers-reduced-motion:reduce){.texte-pret .accueil h1 .mot::before{opacity:.16}}

/* le bouton or, en aplat net : plus d'ombre portée lourde ; un liseré d'un pixel ; le survol s'approfondit */
.bouton{font-weight:650;letter-spacing:.005em;border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(14,41,71,.1),0 1px 2px rgba(14,41,71,.1);transition:background .2s,box-shadow .25s,transform .15s}
.bouton:hover{background:#ECAB3A;box-shadow:inset 0 0 0 1px rgba(14,41,71,.14),0 8px 18px -12px rgba(14,41,71,.5)}

/* le liseré rayé : fin, comme le veut le cadrage (7 px → 3 px), il défile toujours */
.ruban{height:3px}

/* les métiers : des pastilles nettes, sans marche dessous */
.metiers button{border-color:rgba(14,41,71,.2);box-shadow:0 1px 2px rgba(14,41,71,.06)}
.metiers button:hover{border-color:rgba(14,41,71,.55)}
.metiers button[aria-pressed=true],.metiers button.appui{box-shadow:0 6px 14px -10px rgba(14,41,71,.7)}

/* les champs : un filet d'un pixel, et l'encre au focus */
.nommer input,.bloc .champ input,.bloc .champ select,.bloc .champ textarea{border:1px solid rgba(14,41,71,.2);transition:border-color .2s,box-shadow .2s}
.nommer input:focus,.bloc .champ input:focus,.bloc .champ select:focus,.bloc .champ textarea:focus{border-color:var(--encre);box-shadow:0 0 0 4px rgba(31,79,224,.1)}

/* les offres : plus d'air, un filet fin, des coins cotés plus légers, une ombre longue et douce */
.bloc .offre{padding:30px 28px 30px;border:1px solid rgba(14,41,71,.11);border-radius:16px;
  box-shadow:0 1px 2px rgba(14,41,71,.04),0 22px 44px -34px rgba(14,41,71,.4);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.offre::before,.offre::after{width:10px;height:10px;opacity:.7}
.offre::before{left:-1px;top:-1px;border-width:1.5px 0 0 1.5px;border-radius:16px 0 0 0}
.offre::after{right:-1px;bottom:-1px;border-width:0 1.5px 1.5px 0;border-radius:0 0 16px 0}
.offre__icone{display:block;width:38px;height:38px;stroke-width:1.3}   /* en bloc : plus d'interligne fantôme sous l'icône */
.offre h3{margin-top:18px}
.offre p{line-height:1.55}
@media (hover:hover){
  .bloc .offre:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(14,41,71,.05),0 28px 50px -30px rgba(14,41,71,.45)}
}
@media (prefers-reduced-motion:reduce){.bloc .offre{transition:none}.bloc .offre:hover{transform:none}}

/* les questions : un filet plus fin */
.bloc .faq,.bloc .faq details{border-color:rgba(14,41,71,.12)}

/* sur téléphone, le titre reste quand l'esquisse arrive (Axel, 07/10 : « le garder visible ») ; seule l'accroche, déjà
   lue, laisse sa place au champ du nom (trait.js réserve la hauteur du titre au-dessus du téléphone) */
@media (max-width:899px){
  .scene[data-etat=esquisse] .accueil{display:block}
  .scene[data-etat=esquisse] .accroche{display:none}
  .scene[data-etat=esquisse] .nommer{margin-top:10px}
}

/* audit du 07/10 : le contour de focus or ne ressortait pas sur le papier clair (1,7:1) → encre ; l'or reste sur le pied bleu
   nuit. L'ocre des surtitres et des « quand » passait juste sous 4,5:1 sur le papier grainé → un ton plus sombre (5,8:1). */
:focus-visible{outline-color:var(--encre)}
.pied :focus-visible{outline-color:var(--or)}
.bloc .surtitre,.bloc .etapes__quand,.bloc .realisation__quand,.bloc .formulaire__aide{color:#875000}