/* Palette : papier écru, encre brune, toiles de métier. Le métier vient des data-teinte (corps des pages services, offres,
   index, fiches), jamais de l'adresse ni des médias. L'action (--accent*) est à l'encre dans profond-action.css.
   La couleur de la barre du navigateur suit --bg (script en tête du corps) : #f7eee1. Contrastes mesurés (WCAG 2.x, styles calculés) :
   encre #271f19          papier 14,10 · surface 12,77 · filet 10,42
   secondaire #5c5047     papier 6,78 · surface 6,14 · filet et survol de surface 5,02 (au plus bas)
   toiles, écru · second. bordeaux 9,15 · 5,87 · vert 8,39 · 5,50 · bleu de Prusse 8,64 · 5,66 (survol : 11,10 · 10,28 · 10,63)
   carte contact          écru 14,10 · secondaire 8,32 (survol 11,20 · 6,61)
   formulaire             sur la surface et le fond fort, plus de teinte claire : encre 12,77 · 10,42 ; choix au survol, filet
                          d'encre 1 px (12,77 contre la surface) ; erreur au bordeaux, texte 9,15 sur le papier, filet 8,29 sur la surface
   filet                  un seul : 1 px #d8cec0, manchette, index, feuillets et pied compris */

:root {
  --bg: #f7eee1;            /* papier écru */
  --fg: #271f19;            /* encre brune */
  --fg58: #5c5047;          /* secondaire, opaque */
  --line: #d8cec0;          /* filet */
  --filet-encre: #aea69b;   /* soulignement à l'encre : l'encre à 35 % sur le papier */
  --surface: #ede3d5;       /* papier bis : cartes neutres, médias, atelier */
  --surface-forte: #d8cec0; /* survol d'une surface : l'étage du filet */
  --surface-fort: #d8cec0;  /* même jeton, sous le nom que profond.css emploie */
  --surface-legere: #f1e7da; /* cartes sous les offres, au repos : la surface à 60 % sur le papier · encre 13,26 · second. 6,38 */
  --surface-moyenne: #e4dacc; /* les mêmes au survol, entre surface et filet · encre 11,73 · second. 5,64 */
  /* L'offre de départ (l'esquisse, sur /offres/) : un ocre à part des trois toiles, texte à l'encre (paquet 8).
     encre 9,68 · secondaire #4a3f36 6,10 ; au survol #dfb95c : encre 8,66 · secondaire 5,46 */
  --ocre: #e8c46c;
  --ocre-fort: #dfb95c;
  --sur-ocre: #4a3f36;
  /* L'esquisse (paquet 9) : le bordeaux de la typographie à 20 % sur le papier, 28 % au survol, texte à l'encre.
     encre 9,96 · secondaire #4a3f36 6,28 ; au survol #d0b7ad : encre 8,53 · secondaire 5,38 */
  --bordeaux-clair: #dbc7bc;
  --bordeaux-clair-fort: #d0b7ad;
  --sur-clair: #4a3f36;
  --sombre: #271f19;        /* carte contact, pilule suiveuse, croix, fil répondu : l'encre */
  --sombre-fort: #3a3027;
  --sur-sombre: #c4b8aa;
}

/* ---- Le métier, par data-teinte ----
   Les cartes, le volume des tarifs, l'index « Besoin d'autre chose ? », les offres et le pied de fiche reprennent la toile
   de leur métier, que profond.css pose sur chaque [data-teinte]. Le volume et le pied de fiche la tiennent de leur page ou de leur fiche, l'index et les offres
   la portent eux-mêmes (profond.css, branchée après cette couche, l'emporte alors). */
.carte, .pied-contact, .renvoi, .offre { --teinte: inherit; --teinte-forte: inherit; }

/* ---- Numéros, sceau, formulaire ---- */
/* Numéros : une étiquette au secondaire (sur une toile, le secondaire de la toile) */
.entree-numero.etiquette, .offre-numero.etiquette { color: var(--fg58); }
.num { color: inherit; }
/* Sceau de l'ouverture : à l'encre */
.sceau { color: var(--fg); }
/* Formulaire : la question en cours prend la teinte claire du métier, sans trait ni numéro rouges */
.formulaire .fil button.courant, .formulaire .fil button.repondu.courant { background-color: var(--teinte-forte); color: var(--fg); box-shadow: none; }
.formulaire .fil button.repondu.courant:is(:hover, .capte) { background-color: var(--teinte-forte); }
.fil button.courant .numero { color: inherit; }
.fil button.repondu { background-color: var(--accent); }
/* Au survol, une case répondue prend le fond fort du formulaire (la teinte claire forte du métier), texte à l'encre */
.fil button.repondu:not(:disabled):hover, .fil button.repondu.capte { background-color: var(--teinte-forte); color: var(--fg); }
/* Choix et dépôt (survol au filet d'encre, coché sur le fond fort, case pleine à l'encre). Plus aucune
   teinte claire héritée (l'argile, la sauge et l'ardoise ne colorent plus les choix). */
.etape .erreur-envoi { color: var(--fg); }
/* L'alerte des coordonnées (champs fautifs et message sous l'email) : le bordeaux de la palette */
.champs { --alerte: var(--bordeaux); }
/* La pilule désactivée (le filet, au secondaire) donne ici #5c5047 sur #d8cec0 : 5,02:1 */

/* ---- Les couleurs écrites en dur : l'encre et le papier ---- */
.voile { background: rgba(39, 31, 25, 0.32); }
.pilule.claire > span { box-shadow: 0 4px 18px rgba(39, 31, 25, 0.16); }
.fondu-haut { background: linear-gradient(var(--bg) 48px, rgba(247, 238, 225, 0)); }
.fondu-bas { background: linear-gradient(rgba(247, 238, 225, 0), var(--bg)); }
/* Projet suivant (paquet 9) : plus de voile sur le média ; sous la légende, un seul fond : l'encre à 72 % sur le média flouté,
   qui monte en fondu sur 160 px (masque). Le flou efface les lettres d'une page filmée sous le titre ; même sur du blanc pur,
   l'écru y garde 5,58:1. */
.pied-suivant::after { background: none; }
.pied-suivant .legende-suivant::before {
  top: calc(-1 * var(--fondu));
  bottom: 0;
  height: auto;
  z-index: -1;
  background: rgba(39, 31, 25, 0.72);
  /* 2026-10-30 (Viktor) : plus de flou sous la légende, l'image fixe du projet reste nette ; l'encre à 72 % suffit au contraste */
  /* paquet 10 : le fondu monte en courbe douce (paliers d'une ease-in-out), sans arête visible.
     2026-10-30 (Viktor) : 160 px cachaient l'image ; 96 px au bureau, 56 px au téléphone */
  --fondu: 96px;
  -webkit-mask-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.03) calc(var(--fondu) * 0.1), rgba(0,0,0,0.1) calc(var(--fondu) * 0.2), rgba(0,0,0,0.22) calc(var(--fondu) * 0.3), rgba(0,0,0,0.37) calc(var(--fondu) * 0.4), rgba(0,0,0,0.53) calc(var(--fondu) * 0.5), rgba(0,0,0,0.69) calc(var(--fondu) * 0.6), rgba(0,0,0,0.82) calc(var(--fondu) * 0.7), rgba(0,0,0,0.92) calc(var(--fondu) * 0.8), rgba(0,0,0,0.98) calc(var(--fondu) * 0.9), #000 var(--fondu));
  mask-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.03) calc(var(--fondu) * 0.1), rgba(0,0,0,0.1) calc(var(--fondu) * 0.2), rgba(0,0,0,0.22) calc(var(--fondu) * 0.3), rgba(0,0,0,0.37) calc(var(--fondu) * 0.4), rgba(0,0,0,0.53) calc(var(--fondu) * 0.5), rgba(0,0,0,0.69) calc(var(--fondu) * 0.6), rgba(0,0,0,0.82) calc(var(--fondu) * 0.7), rgba(0,0,0,0.92) calc(var(--fondu) * 0.8), rgba(0,0,0,0.98) calc(var(--fondu) * 0.9), #000 var(--fondu));
  /* Chromium ne coupe pas le flou d'arrière-plan au rayon de la carte (overflow et isolation n'y font rien, un clip-path
     sur le fond non plus) : le média débordait aux deux coins bas. Le flou suit en revanche le rayon de son propre élément :
     le fond reprend les 30 px de la carte à ses coins bas. */
  border-radius: 0 0 30px 30px;
}
@media (max-width: 759px) { .pied-suivant .legende-suivant::before { --fondu: 56px; } }
.atelier-panneau::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.12 0 0 0 0 0.1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}