.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}

.accueil h1 .mot::before,.accueil h1.pose .mot::before{opacity:.16}
@media (prefers-reduced-motion:reduce){.texte-pret .accueil h1 .mot::before{opacity:.16}}

.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)}

.ruban{height:3px}

.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)}

.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)}

.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}
.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}}

.bloc .faq,.bloc .faq details{border-color:rgba(14,41,71,.12)}

@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}
}

: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}

.enseigne{position:relative;margin-right:auto;min-width:0}
.enseigne .signe{margin-right:0}
.enseigne__metier{position:absolute;left:0;top:calc(100% - 6px);margin:0;white-space:nowrap;
  font:700 .68rem/1.2 var(--titre);letter-spacing:.12em;text-transform:uppercase;color:#875000}

@media (max-width:899px){
  .bandeau{flex-wrap:wrap;height:auto;row-gap:0}
  .enseigne{display:contents}
  .enseigne .signe{margin-right:auto}
  .enseigne__metier{position:static;order:3;flex:0 0 100%;margin-top:6px;white-space:normal;font-size:.6rem;letter-spacing:.09em}
}

.realisations--cartes{display:grid;gap:16px;margin-top:1.4rem;max-width:44rem}
.carte-real__lien{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:18px;align-items:center;padding:14px 18px 14px 14px;
  border:1px solid rgba(14,41,71,.13);border-radius:14px;background:rgba(255,255,255,.62);color:inherit;text-decoration:none;
  box-shadow:0 1px 2px rgba(14,41,71,.04);transition:border-color .2s,box-shadow .25s}
.carte-real__lien:hover{border-color:rgba(14,41,71,.45);box-shadow:0 14px 30px -24px rgba(14,41,71,.5)}
.carte-real__image{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:8px;border:1px solid rgba(14,41,71,.1);background:#fff}
.carte-real__image img{display:block;width:100%;height:100%;object-fit:cover;object-position:0 0}
.carte-real__texte{display:grid;gap:4px;min-width:0}
.carte-real__type{font:700 .7rem/1.3 var(--titre);letter-spacing:.11em;text-transform:uppercase;color:#875000}
.carte-real__nom{font:700 1.15rem/1.25 var(--titre);color:var(--encre)}
.carte-real__desc{font-size:.95rem;line-height:1.45;color:var(--texte-doux)}
@media (max-width:520px){.carte-real__lien{grid-template-columns:minmax(0,6.5rem) minmax(0,1fr);gap:14px;padding:12px 14px 12px 12px}}
@media (prefers-reduced-motion:reduce){.carte-real__lien{transition:none}}