/* WIZIYO, pages de contenu : méthode, agence, journal, articles, fiches des réalisations.
   Les mêmes pages s'affichent seules (documents écrits par outils/pages.py) ou dans le feuillet du site immersif,
   qui monte par-dessus la scène comme une eau. Trois ambiances, une seule palette : clair (la pierre de la maison),
   nuit (le bleu du seuil), papier (lecture). Rappel : 1rem vaut 1 % de la largeur sur ordinateur, 16 px sur téléphone ;
   les grandes mesures sont donc bornées par la largeur (min(rem, vw)). */

@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: .28s; }
::view-transition-new(root) { animation-duration: .5s; }

.feuille, html.page {
  --fond: #e6ecf5; --texte: #131a2e; --doux: rgba(19, 26, 46, .68); --filet: rgba(19, 26, 46, .2); --voile: rgba(19, 26, 46, .045);
  --eau: #3f7cf0; --plein: #131a2e; --sur-plein: #fff;
  --marge: clamp(1.25rem, 6.4vw, 9rem);
  --lecture: clamp(17px, 1.28rem, 21px);
}
.feuille[data-ambiance="nuit"], html.page[data-ambiance="nuit"] {
  --fond: #1d2f63; --texte: #f2f6fd; --doux: rgba(242, 246, 253, .76); --filet: rgba(242, 246, 253, .24); --voile: rgba(242, 246, 253, .06);
  --eau: #8fb3ff; --plein: #f2f6fd; --sur-plein: #131a2e;
}
.feuille[data-ambiance="papier"], html.page[data-ambiance="papier"] { --fond: #f3f5f9; --voile: rgba(19, 26, 46, .035); }

/* Document seul : la page défile normalement, la barre garde sa place. */
html.page { scrollbar-width: thin; scrollbar-color: var(--filet) transparent; background: var(--fond); }
html.page::-webkit-scrollbar { display: block; width: 8px; }
html.page::-webkit-scrollbar-thumb { background: var(--filet); border-radius: 8px; }
html.page body { --texte-barre: var(--texte); background: var(--fond); color: var(--texte); }
html.page .barre { --pied: 1; }
/* Sous la barre, la page s'efface : le logo et les liens restent lisibles pendant le défilement. */
html.page .barre::before, body[data-vue="page"] .barre::before { content: ''; position: absolute; inset: 0 0 -2.4rem; z-index: -1; background-color: var(--fond-barre, var(--fond)); -webkit-mask-image: linear-gradient(#000 64%, transparent); mask-image: linear-gradient(#000 64%, transparent); transition: background-color .6s ease; pointer-events: none; }
html.page .liens a[aria-current] .droit { opacity: 0; transform: translateY(-.4rem); }
html.page .liens a[aria-current] .italique { opacity: 1; transform: none; }
/* Départ vers le site immersif : la page s'efface sur le bleu du seuil, qui prend la suite. */
html.page.sort { background: #1d2f63; }
html.page.sort body { opacity: 0; transition: opacity .32s ease; }

/* Dans le site immersif : le feuillet. Son fond monte du bas de l'écran, bord bombé comme un ménisque ; le contenu
   paraît quand il a couvert la scène. À la fermeture, il redescend et la scène reprend. */
.feuillet { position: fixed; inset: 0; z-index: 20; visibility: hidden; pointer-events: none; }
.feuillet.ouvert, .feuillet.ferme { visibility: visible; }
.feuillet.ouvert { pointer-events: auto; }
.feuillet-fond { position: absolute; inset: 0; background: var(--fond-feuillet, #e6ecf5); transform: translateY(104%); transition: transform .95s var(--courbe), background-color .6s ease; }
.feuillet-fond::before { content: ''; position: absolute; left: -6%; right: -6%; bottom: calc(100% - 1px); height: 4.5rem; background: inherit; border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform-origin: 50% 100%; transition: transform .95s var(--courbe); }
.feuillet.ouvert .feuillet-fond { transform: none; }
.feuillet.ouvert .feuillet-fond::before { transform: scaleY(0); }
.feuillet.ferme .feuillet-fond { transition-duration: .8s; transition-timing-function: cubic-bezier(.7, 0, .3, 1); }
.feuillet-corps { position: absolute; inset: 0; overflow: hidden auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: rgba(128, 140, 170, .5) transparent; opacity: 0; transition: opacity .22s ease; }
.feuillet.pret .feuillet-corps { opacity: 1; transition: opacity .5s ease; }
.feuillet .feuille { background: transparent; }
.avec-webgl .bas { transition: opacity .3s ease, visibility 0s; }
body[data-vue="page"] .bas { opacity: 0 !important; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
body[data-vue="page"] .bas * { transition: none; }
.avec-webgl .barre { transition: color .5s ease; }
/* Le fond de la barre n'arrive qu'avec le feuillet : pas de bandeau clair sur la scène pendant qu'il monte. */
.avec-webgl body[data-vue="page"] .barre::before { animation: pg-barre .45s ease .5s both; }
@keyframes pg-barre { from { opacity: 0; } }
body[data-vue="page"] .barre { color: var(--texte-barre, var(--encre)); }
@media (prefers-reduced-motion: reduce) { .feuillet-fond, .feuillet-fond::before { transition: none; } }

/* Pièce : la page d'une section de contenu (méthode, agence, journal). Elle défile par-dessus la scène, qui reste
   visible autour d'elle ; son fond est transparent, ce sont ses cartes qui portent le texte. */
.piece { position: fixed; inset: 0; z-index: 4; visibility: hidden; pointer-events: none; transition: visibility 0s .4s; }
.piece.pose { visibility: visible; pointer-events: auto; transition: none; }
.piece-corps { position: absolute; inset: 0; overflow: hidden auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; opacity: 0; transition: opacity .35s ease; }
.piece-corps::-webkit-scrollbar { display: none; }
/* Retenue : l'élan du geste qui a conduit ici ne fait pas défiler la page (js/app.js la relâche dès qu'il s'éteint). */
.piece-corps.retenu { overflow-y: hidden; }
.piece.pret .piece-corps { opacity: 1; transition: opacity .9s ease; }
.piece .feuille { background: transparent; }
.piece .feuille::before { display: none; }

/* La feuille : fond, grain de pierre, marges. */
.feuille { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; padding: 0 var(--marge); background: var(--fond); color: var(--texte); font-size: max(1.12rem, 16px); line-height: 1.5; overflow-wrap: break-word; }
.feuille:focus { outline: none; }
.feuille::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .56  0 0 0 0 .72  0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E"); }
.feuille a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.feuille .surtitre { font-size: max(.86rem, 11.5px); letter-spacing: .02em; }
.feuille .surtitre a { text-decoration: none; }
.feuille .surtitre a:hover { text-decoration: underline; }
.feuille h1, .feuille h2, .feuille h3 { margin: 0; font-weight: 400; text-wrap: balance; }
.feuille .pilule { min-height: 2.75rem; padding: 0 1.4rem; font-size: max(1.05rem, 15px); }
.feuille .pilule.sombre { background: var(--plein); color: var(--sur-plein); }
@media (hover: hover) { .feuille .pilule.sombre:hover { background: transparent; border-color: var(--plein); color: var(--texte); } }
.feuille .pilule.contour { border-color: var(--texte); color: var(--texte); }
@media (hover: hover) { .feuille .pilule.contour:hover { background: var(--plein); color: var(--sur-plein); } }

/* Tête de page : surtitre, grand titre en deux voix (italique à empattements puis grotesque, comme le titre d'accueil), chapeau. */
.tete { max-width: 78rem; padding-top: min(12rem, 34vw); }
.tete.etroite { max-width: 52rem; }
/* Le surtitre passe devant le grand titre : les jambages de l'italique débordent de sa ligne et couvriraient ses liens. */
.tete .surtitre { position: relative; z-index: 1; }
.grand { margin-top: 1.1rem; font-size: min(8.6rem, 15.5vw); line-height: .93; letter-spacing: -.04em; }
.grand em { display: block; padding-bottom: .04em; font-family: var(--serif); font-style: italic; letter-spacing: -.025em; }
.chapeau { max-width: 36em; margin: 2.3rem 0 0; font-size: 1.62rem; line-height: 1.34; letter-spacing: -.01em; text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 2.2rem 0 0; }

/* Tirages : images fixes de la scène « L'anse ». Elles se découvrent du bas vers le haut, comme une eau qui se retire. */
.tirage { margin: min(6rem, 13vw) calc(var(--marge) * -.42) 0; }
.tirage img, .ecran img { display: block; width: 100%; height: auto; border-radius: .45rem; background: var(--voile); }
.tirage figcaption, .ecran figcaption, .orbite figcaption { margin-top: .9rem; font-size: max(.9rem, 13px); color: var(--doux); }

/* Entrée et apparitions (classes posées par js/commun.js ; sans script ou en mouvements réduits, tout est simplement là). */
.anime .tete > * { opacity: 0; transform: translateY(1.5rem); }
.anime.entre .tete > * { opacity: 1; transform: none; transition: opacity .8s ease, transform 1.1s var(--courbe); transition-delay: calc(var(--rang, 0) * .09s + .12s); }
.anime .tete > :nth-child(2) { --rang: 1; } .anime .tete > :nth-child(3) { --rang: 2; } .anime .tete > :nth-child(4) { --rang: 3; } .anime .tete > :nth-child(5) { --rang: 4; }
.anime .revele { opacity: 0; transform: translateY(1.8rem); transition: opacity .8s ease, transform 1.1s var(--courbe); }
.anime .revele.vu { opacity: 1; transform: none; }
.anime :is(.tirage, .ecran).revele { opacity: 1; transform: none; }
.anime :is(.tirage, .ecran).revele img { clip-path: inset(100% 0 0 0); transform: scale(1.06); transform-origin: 50% 100%; transition: clip-path 1.25s var(--courbe), transform 1.6s var(--courbe); }
.anime :is(.tirage, .ecran).revele.vu img { clip-path: inset(0); transform: none; }

/* Méthode, agence, index du journal, démonstrations : css/pieces.css. */

/* Journal : un sommaire éditorial, une ligne par article. */
.tirage.panorama img { aspect-ratio: 2 / 1; object-fit: cover; }
.entrees { margin: min(5rem, 12vw) 0 0; padding: 0; list-style: none; }
.entree { position: relative; display: grid; grid-template-columns: 4fr 8fr; column-gap: 3rem; padding: 2.1rem 0 2.3rem; border-top: 1px solid var(--filet); text-decoration: none; }
.entree::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--eau); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--courbe); }
.entree:is(:hover, :focus-visible)::before { transform: none; }
.entree-meta { grid-column: 1; grid-row: 1 / span 3; font-size: max(.9rem, 12.5px); line-height: 1.5; color: var(--doux); }
.entree-titre { grid-column: 2; font-size: min(2.5rem, 6.4vw); line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; transition: transform .6s var(--courbe); }
.entree.une .entree-titre { font-size: min(4.1rem, 8.6vw); line-height: 1.02; letter-spacing: -.03em; }
.entree:is(:hover, :focus-visible) .entree-titre { transform: translateX(.7rem); }
.entree-resume { grid-column: 2; max-width: 40em; margin-top: .9rem; color: var(--doux); }
.entree-lire { grid-column: 2; display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.1rem; font-size: max(.98rem, 14px); }
.entree-lire .ico { transition: transform .5s var(--courbe); }
.entree:is(:hover, :focus-visible) .entree-lire .ico { transform: translate(.14em, .14em); }
.etat { display: inline-block; padding: .08em .6em; border: 1px dashed currentColor; border-radius: 99rem; white-space: nowrap; }
.vide { margin: 4rem 0 0; font-size: 1.4rem; color: var(--doux); }
/* Note de relecture : écrite dans la version de relecture seulement, jamais dans une publication. */
.relecture { max-width: 52rem; margin: 2.6rem 0 0; padding: 1.2rem 1.5rem 1.3rem; border: 1px dashed var(--doux); border-radius: .5rem; background: var(--voile); font-size: max(.98rem, 14px); line-height: 1.45; }
.relecture p { margin: 0; }
.relecture p + p { margin-top: .55rem; }
.relecture ul { margin: .6rem 0 0; padding-left: 1.15rem; }
.relecture li + li { margin-top: .3rem; }
.relecture code { font-size: .92em; }

/* Article : une colonne de lecture (65 caractères environ), son sommaire à gauche, la ligne d'eau de l'avancée tout en haut. */
.avance { position: fixed; left: 0; right: 0; top: 0; z-index: 31; height: 2px; background: #3f7cf0; transform: scaleX(var(--lu, 0)); transform-origin: 0 50%; pointer-events: none; }
.article h1 { margin-top: 1.2rem; font-size: min(4.5rem, 9.4vw); line-height: 1.02; letter-spacing: -.035em; }
.article .chapeau { margin-top: 1.6rem; font-size: min(1.45rem, 5vw); color: var(--doux); }
.article-meta { margin: 1.6rem 0 0; font-size: max(.9rem, 13px); color: var(--doux); }
.article-corps { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 43rem); column-gap: 5rem; margin-top: min(4.5rem, 11vw); padding-top: 2.4rem; border-top: 1px solid var(--filet); }
.article-corps > .prose:only-child { grid-column: 2; }
.sommaire { position: sticky; top: 7.5rem; align-self: start; max-height: calc(100vh - 9rem); overflow: auto; scrollbar-width: none; }
.sommaire ol { margin: 1rem 0 0; padding: 0; list-style: none; }
.sommaire a { display: block; padding: .42rem 0 .42rem .9rem; border-left: 1px solid var(--filet); font-size: max(.9rem, 13px); line-height: 1.3; text-decoration: none; color: var(--doux); transition: color .3s, border-color .3s; }
.sommaire a:hover, .sommaire a[aria-current] { border-left-color: var(--eau); color: var(--texte); }
.sommaire a[aria-current] { padding-left: calc(.9rem - 1px); border-left-width: 2px; }
.prose { font-size: var(--lecture); line-height: 1.62; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 1.15em 0 0; text-wrap: pretty; }
.prose h2 { margin-top: 2.4em; font-size: 1.62em; font-weight: 500; line-height: 1.14; letter-spacing: -.02em; scroll-margin-top: 7.5rem; }
.prose h3 { margin-top: 1.9em; font-size: 1.16em; font-weight: 600; line-height: 1.25; }
.prose ul, .prose ol { margin: 1.1em 0 0; padding-left: 1.3em; }
.prose li + li { margin-top: .5em; }
.prose li::marker { color: var(--eau); }
.prose strong { font-weight: 600; }
.prose blockquote { margin: 1.8em 0 0; padding: 0 0 0 1.4em; font-family: var(--serif); font-style: italic; font-size: 1.3em; line-height: 1.35; }
.prose code { padding: .1em .35em; border-radius: .3em; background: var(--voile); font-size: .9em; }
.tableau { margin: 1.8em 0 0; overflow-x: auto; }
.prose table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .9em; line-height: 1.4; }
.prose th, .prose td { padding: .75em .9em .75em 0; border-bottom: 1px solid var(--filet); text-align: left; vertical-align: top; }
.prose thead th { border-bottom-color: var(--texte); font-weight: 600; }
.prose details { border-top: 1px solid var(--filet); }
.prose details:last-of-type { border-bottom: 1px solid var(--filet); }
.prose h2 + details { margin-top: 1.2em; }
.prose summary { position: relative; padding: 1em 2.2em 1em 0; font-weight: 500; line-height: 1.3; cursor: pointer; list-style: none; }
.prose summary::-webkit-details-marker { display: none; }
.prose summary::after { content: ''; position: absolute; right: .3em; top: 1.35em; width: .62em; height: .62em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .4s var(--courbe); }
.prose details[open] summary::after { transform: translateY(.3em) rotate(-135deg); }
.prose details p { margin: 0 0 1.2em; color: var(--doux); }
.article-fin { margin-top: min(6rem, 14vw); }
.article-fin .entrees { margin-top: 1.4rem; }
.article-fin .entree-titre { font-size: min(2rem, 5.6vw); }
.article-fin > p:last-child { margin: 2.2rem 0 0; }

/* Fiche d'une réalisation. */
.fiche-reperes { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 3.6rem; margin: 2.6rem 0 0; }
.fiche-reperes dt { font-size: max(.82rem, 11.5px); letter-spacing: .03em; text-transform: uppercase; color: var(--doux); }
.fiche-reperes dd { margin: .3rem 0 0; }
.ecran { margin: min(5.5rem, 12vw) calc(var(--marge) * -.42) 0; }
.ecran a { display: block; overflow: hidden; border-radius: .45rem; box-shadow: 0 2.6rem 5.5rem -2.4rem rgba(29, 47, 99, .5); }
.ecran img { border-radius: 0; transition: transform 1.2s var(--courbe); }
.ecran a:hover img { transform: scale(1.025); }
.fiche-corps { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4rem; margin-top: min(5.5rem, 12vw); }
.fiche-corps section { padding: 1.7rem 0 2.6rem; border-top: 1px solid var(--filet); }
.rang { margin: 0 0 .9rem; font-size: max(.9rem, 12px); letter-spacing: .04em; color: var(--doux); }
.fiche-corps h2 { font-size: min(2.1rem, 6vw); line-height: 1.1; letter-spacing: -.02em; }
.fiche-corps p, .fiche-corps ul { max-width: 31em; margin: 1.1rem 0 0; }
.fiche-corps ul { padding-left: 1.15rem; }
.fiche-corps li + li { margin-top: .55rem; }
.fiche-corps li::marker { color: var(--eau); }
.fiche-corps .etiquettes { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; list-style: none; }
.etiquettes li { margin: 0 !important; padding: .42rem .95rem; border: 1px solid var(--filet); border-radius: 99rem; font-size: max(.95rem, 13.5px); }
.mention { max-width: 44rem; margin: 2rem 0 0; font-size: max(.92rem, 13px); color: var(--doux); }
.voisins { display: grid; grid-template-columns: 1fr 1fr; margin-top: min(6rem, 14vw); border-top: 1px solid var(--filet); }
.voisin { display: flex; flex-direction: column; gap: .7rem; padding: 2rem 0 0; text-decoration: none; }
.voisin.apres { align-items: flex-end; padding-left: 2rem; border-left: 1px solid var(--filet); text-align: right; }
.voisin .serif { font-size: min(4.4rem, 9vw); line-height: 1; letter-spacing: -.02em; transition: transform .6s var(--courbe); }
.voisin.avant:hover .serif { transform: translateX(-.6rem); }
.voisin.apres:hover .serif { transform: translateX(.6rem); }

/* Page de service (v29) : la tête des pièces, les repères et les sections numérotées des fiches. Les sections 05 et 06
   (démonstrations, questions) prennent toute la largeur ; puis les pages voisines et l'appel. */
.fiche-corps .large { grid-column: 1 / -1; }
.fiche-corps ol { max-width: 31em; margin: 1.1rem 0 0; padding-left: 1.3rem; }
.fiche-corps ol li + li { margin-top: .55rem; }
.fiche-corps ol li::marker { color: var(--eau); }
.fiche-corps strong { font-weight: 600; }
.fiche-corps .demos-service { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.6rem 2.4rem; max-width: none; margin: 2.2rem 0 1.8rem; padding: 0; list-style: none; }
.fiche-corps .demos-service > li { margin: 0; }
.demos-service a { display: block; text-decoration: none; }
.demos-service img { display: block; width: 100%; height: auto; border-radius: .45rem; background: var(--voile); box-shadow: 0 1.8rem 3.6rem -2.2rem rgba(29, 47, 99, .55); transition: transform 1.2s var(--courbe); }
.demos-service a:is(:hover, :focus-visible) img { transform: scale(1.015); }
.demos-service .serif { display: block; margin-top: 1.1rem; font-size: min(2.6rem, 8vw); line-height: 1; letter-spacing: -.02em; }
.demos-service .doux { display: block; margin-top: .45rem; font-size: max(.95rem, 13.5px); color: var(--doux); }
.questions .prose { max-width: 52rem; margin-top: 1.4rem; }
/* (v30 : la page Motion design montre l'extrait de son film, lu à la demande.) */
.fiche-corps .film { max-width: 64rem; margin: 2rem 0 1.6rem; }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: .45rem; background: var(--voile); box-shadow: 0 1.8rem 3.6rem -2.2rem rgba(29, 47, 99, .55); }
.film figcaption { margin-top: .9rem; font-size: max(.9rem, 13px); color: var(--doux); }
.voir-aussi { margin-top: min(4.5rem, 11vw); }
.voir-aussi ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.voir-aussi a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem; border: 1px solid var(--filet); border-radius: 99rem; text-decoration: none; transition: border-color .3s; }
.voir-aussi a:is(:hover, :focus-visible) { border-color: var(--texte); }
.appel-service { margin-top: min(6rem, 14vw); padding-top: 2.4rem; border-top: 1px solid var(--filet); }
.appel-service h2 { font-size: min(4.4rem, 10vw); line-height: 1; letter-spacing: -.02em; }
.appel-garanties { margin: 1.2rem 0 0; color: var(--doux); }
.appel-service .actions { margin-top: 1.8rem; }

/* Pied : l'invitation au contact, les repères, puis le nom en grand au-dessus de son reflet, comme au seuil. */
.pied { margin: min(10rem, 22vw) calc(var(--marge) * -1) 0; padding: min(5.5rem, 13vw) var(--marge) 0; border-top: 1px solid var(--filet); overflow: hidden; }
.pied-lien { display: inline-flex; align-items: center; gap: 1.2rem; margin-top: 1rem; font-size: min(7rem, 11vw); line-height: 1.02; letter-spacing: -.025em; text-decoration: none; }
.pied-lien .serif { padding-bottom: .08em; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .7s var(--courbe); }
.pied-lien:is(:hover, :focus-visible) .serif { background-size: 100% 2px; }
.pied-lien .ico { font-size: .5em; stroke-width: 1.1; transition: transform .6s var(--courbe); }
.pied-lien:hover .ico { transform: translate(.16em, .16em); }
.pied-bas { display: grid; grid-template-columns: 1fr auto auto auto; align-items: end; gap: 2rem 4rem; margin-top: min(5.5rem, 13vw); }
.pied-bas p { margin: 0; line-height: 1.5; }
.pied-liens { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
.pied-liens a, .pied-adresses a, .pied-services a { text-decoration: none; }
.pied-liens a:hover, .pied-adresses a:hover, .pied-services a:hover { text-decoration: underline; }
/* v29 : sous les sections, les pages de services qui existent. */
.pied-navs { display: grid; gap: 1.5rem; }
.pied-services { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.6rem; }
.pied-services .surtitre { color: var(--doux); }
.pied-services ul { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: 0; padding: 0; list-style: none; }
/* Le reflet est le même nom, retourné sous sa ligne de base ; on n'en garde que le bas des lettres, qui s'efface. */
.pied-signe { margin: min(5rem, 12vw) 0 0; padding-bottom: 3vw; }
.pied-nom { display: flex; align-items: baseline; justify-content: center; font-size: 22.4vw; font-weight: 600; line-height: .78; letter-spacing: .015em; white-space: nowrap; }
.pied-w { flex: none; width: 1.163em; height: .727em; margin-right: .09em; overflow: visible; }
.pied-reflet { margin: -.03em 0 -.36em; opacity: .2; transform: scaleY(-1); clip-path: inset(.39em -5% 0 -5%); filter: url(#w-onde-fixe); -webkit-mask-image: linear-gradient(to top, #000 4%, transparent 50%); mask-image: linear-gradient(to top, #000 4%, transparent 50%); }
.introuvable { min-height: 100svh; }

@media (max-width: 1000px) {
  .article-corps { grid-template-columns: minmax(0, 43rem); }
  .article-corps > .prose:only-child { grid-column: 1; }
  .sommaire { position: static; max-height: none; margin-bottom: 2.6rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--filet); }
}

@media (max-width: 760px) {
  .feuille, html.page { --lecture: 17px; }
  .feuille { font-size: 1rem; }
  .tete { padding-top: 7.4rem; }
  .chapeau { margin-top: 1.5rem; font-size: 1.14rem; }
  .tirage, .ecran { margin-left: calc(var(--marge) * -.5); margin-right: calc(var(--marge) * -.5); }
  .fiche-corps { grid-template-columns: 1fr; }
  .entree { grid-template-columns: 1fr; padding: 1.5rem 0 1.7rem; }
  .entree-meta { grid-column: 1; grid-row: auto; margin-bottom: .7rem; }
  .entree-titre, .entree-resume, .entree-lire { grid-column: 1; }
  .fiche-reperes { grid-template-columns: 1fr; gap: 1rem; }
  .voisin.apres { padding-left: 1rem; }
  .pied-bas { grid-template-columns: 1fr 1fr; align-items: start; }
  .pied-navs { grid-column: 1 / -1; }
  .fiche-corps .demos-service { grid-template-columns: 1fr; gap: 2.2rem; }
  .prose table { font-size: .84em; }
}