/* ============================================================================
   base.css, le reset, la typo, et les composants récurrents du hub.

   Ne contient aucune valeur graphique en dur : tout vient de tokens.css.
   Les composants ici sont ceux du hub : bandeau, ouverture, cartes d'outil,
   texte tenu à la main, fiches de source, chaîne, pied. Un outil qui importe
   ce fichier hérite du reset, de la voix des cotes et des boutons ; le reste
   ne le gêne pas.

   Registre éditorial : les pages du hub posent <html class="page">, la page
   défile normalement et le quadrillage de la table court sur tout le fond.

   Refonte « établi », 24 août 2026 : les règles qui vivaient en <style> dans
   index.html et demarche/index.html sont remontées ici, section par section.
   Les composants de l'accueil V1 qu'elles remplacent (hero sur deux colonnes,
   index d'outils en lignes) sont dans archive/base-v1-accueil.css.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Socle
   --------------------------------------------------------------------------- */

* { box-sizing:border-box; }
html, body { margin:0; }
body {
  font-family:var(--font); font-size:var(--base); line-height:1.55;
  color:var(--ink); background:var(--desk);
}
::selection { background:var(--acc-hi); color:var(--desk); }
a { color:inherit; }
img, svg { max-width:100%; }
[hidden] { display:none !important; }

/* la page éditoriale : plus aérée que l'outil, et posée sur la table quadrillée */
html.page { --base:var(--base-page); scroll-behavior:smooth; }
html.page body { min-height:100vh; background-image:var(--grid); background-size:28px 28px; }
@media (prefers-reduced-motion:reduce) { html.page { scroll-behavior:auto; } }

/* le lien d'évitement, hors écran jusqu'à ce qu'il prenne le focus */
.saut { position:absolute; left:-9999px; z-index:20;
        background:var(--paper); border:1px solid var(--ink); padding:8px 12px; }
.saut:focus { left:26px; top:8px; }

/* ---------------------------------------------------------------------------
   2. La voix des cotes
   Tout ce qui mesure, nomme un état ou numérote passe en mono capitales
   espacées. L'interlettrage suit le corps : plus c'est petit, plus c'est espacé.
   --------------------------------------------------------------------------- */

.cote { font-family:var(--mono); font-size:10.5px; font-weight:500;
        letter-spacing:.14em; text-transform:uppercase; color:var(--mut); }
.cote-xs { font-family:var(--mono); font-size:9px; letter-spacing:.1em;
           text-transform:uppercase; color:var(--mut); }
/* partout où un nombre change en place, sinon la ligne tremble */
.num { font-variant-numeric:tabular-nums; }

/* Un outil qui n'ouvre pas encore n'est pas un lien : une page ne promet que
   ce qui répond. Il reste nommé, parce qu'il existe et qu'on en parle, mais il
   dit lui-même où il en est. Sert au pied de page comme au fil du texte. */
.a-venir { color:var(--mut); }
.a-venir .etat { font-family:var(--mono); font-size:8.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); margin-left:7px; white-space:nowrap; }

/* ---------------------------------------------------------------------------
   3. Trame de page

   Le ménage dans les filets. Le fond de page est déjà un quadrillage : un
   filet de séparation par section s'y ajoutait sans rien séparer, et deux
   trames se superposaient. Les sections se distinguent par le vide et par
   leur cote, pas par un trait. Ne subsistent comme lignes horizontales : le
   bas du bandeau, le haut du pied, et le bord des objets posés sur la table.
   --------------------------------------------------------------------------- */

.contenu { max-width:1120px; margin:0 auto; padding:0 26px; }
.section { padding:56px 0; }
.section > .contenu > p { max-width:62ch; line-height:1.65; margin:0 0 16px; }
/* le chapô reste plus étroit que le texte courant, y compris dans une section :
   d'où la sélectivité, sinon la règle ci-dessus l'emporterait sur .chapo seul */
/* 62ch et non 46 : à 46, un sous-titre de section d'une seule phrase se
   coupait en deux alors qu'il tenait largement sur une ligne, et une phrase
   cassée en deux se lit comme un paragraphe amputé. 62ch est déjà la mesure du
   texte suivi de ce fichier, les deux se répondent. Les chapôs vraiment longs
   se replient toujours, ce qui est leur affaire. */
.chapo, .section > .contenu > .chapo {
  max-width:62ch; font-size:17px; line-height:1.6; color:var(--mut); margin:0 0 26px;
}
.appui { color:var(--ink); font-weight:600; }
/* les liens dans le texte suivi : filet sous le mot, accent au survol, comme
   au pied de page. Ciblé sur les paragraphes pour ne pas souligner le nom
   d'une carte d'outil, dont le lien couvre déjà tout le titre. */
.section p a, .source dd a { text-decoration:none; border-bottom:1px solid var(--mid); }
.section p a:hover, .source dd a:hover { color:var(--acc-hi); border-bottom-color:var(--acc-hi); }
.duo { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:34px; }
.duo p { max-width:62ch; line-height:1.65; margin:0 0 16px; }
.duo p:last-child { margin-bottom:0; }

/* le titre de section : sa cote au-dessus. Le tiret d'accent qui suivait le
   titre est tombé avec les filets : c'était une ligne de plus. */
.titre-sec { margin:0 0 26px; }
/* --mut plutôt que --faint : en thème clair, le tertiaire sur papier tombe
   sous le seuil de contraste et la cote de section devient illisible.
   Écart assumé par rapport au relevé de charte. */
.titre-sec .num { display:block; font-family:var(--mono); font-size:10.5px;
                  letter-spacing:.2em; text-transform:uppercase; color:var(--mut);
                  margin-bottom:8px; }
.titre-sec h2 { font-size:24px; font-weight:800; letter-spacing:.04em;
                text-transform:uppercase; margin:0; line-height:1.2; }

/* ---------------------------------------------------------------------------
   4. Bandeau et pied, injectés ou enrichis par entete.js / pied.js
   --------------------------------------------------------------------------- */

.bandeau-site { position:sticky; top:0; z-index:10;
                display:flex; align-items:center; gap:22px; height:48px;
                padding:0 26px; background:var(--paper); border-bottom:1px solid var(--ink); }
.marque { font-size:13px; font-weight:800; letter-spacing:.24em; text-transform:uppercase;
          text-decoration:none; }
.marque::before { content:"+"; font-family:var(--mono); font-weight:400; color:var(--acc-hi);
                  margin-right:10px; }
.appartenance { font-family:var(--mono); font-size:9px; letter-spacing:.1em;
                text-transform:uppercase; color:var(--mut); margin-left:-14px; }

.nav { display:flex; gap:18px; margin-left:auto; align-items:center; }
.nav a { font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
         text-transform:uppercase; color:var(--mut); text-decoration:none;
         padding:4px 0; box-shadow:inset 0 -2px 0 transparent;
         transition:color .12s, box-shadow .12s; }
.nav a:hover { color:var(--ink); box-shadow:inset 0 -2px 0 var(--acc-hi); }
.nav a[aria-current] { color:var(--ink); box-shadow:inset 0 -2px 0 var(--acc-hi); }
.nav a:focus-visible { outline:1px solid var(--acc-hi); outline-offset:3px; }
/* le lien sortant porte sa flèche, pour qu'on sache qu'on quitte le hub */
.nav a.sortant::after { content:" ↗"; color:var(--faint); }
@media (max-width:820px) { .nav .masquable { display:none; } }

.theme-toggle { font-family:var(--mono); font-size:10px; letter-spacing:.12em;
                text-transform:uppercase; color:var(--mut); background:transparent;
                border:1px solid var(--mid); border-radius:0; padding:4px 9px; cursor:pointer;
                transition:color .12s, border-color .12s; }
.theme-toggle::before { content:"◐ "; color:var(--acc-hi); }
.theme-toggle:hover { color:var(--acc-hi); border-color:var(--acc-hi); }
.theme-toggle:focus-visible { outline:1px solid var(--acc-hi); outline-offset:2px; }

.pied { border-top:1px solid var(--ink); background:var(--paper);
        padding:40px 0 34px; margin-top:72px; }
.pied-grille { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:26px; }
.pied-titre { font-family:var(--mono); font-size:10px; letter-spacing:.2em;
              text-transform:uppercase; color:var(--mut); margin:0 0 12px; }
.pied ul { list-style:none; margin:0; padding:0; }
.pied li { margin-bottom:7px; }
.pied a { font-size:13.5px; color:var(--ink); text-decoration:none;
          border-bottom:1px solid var(--mid); }
/* Un outil qui n'ouvre pas encore n'est pas un lien : un pied de page ne
   promet que ce qui répond. Il reste listé, parce qu'il existe et qu'on le
   verra plus haut dans la page, mais il dit lui-même où il en est. */
.pied .a-venir { font-size:13.5px; }
.pied a:hover { border-bottom-color:var(--acc-hi); color:var(--acc-hi); }
.pied .mentions { margin-top:34px; padding-top:18px; border-top:1px solid var(--hair);
                  font-family:var(--mono); font-size:9.5px; letter-spacing:.06em;
                  color:var(--faint); line-height:1.8; max-width:none; }
/* un lien au fil des mentions garde leur corps : la règle ci-dessus vise les
   listes de navigation, pas ce paragraphe en cote */
.pied .mentions a { font-size:inherit; letter-spacing:inherit; color:var(--mut); }
.pied .mentions a:hover { color:var(--acc-hi); }

/* ---------------------------------------------------------------------------
   5. Boutons
   Cadre encre, coins vifs, étiquette mono. Le survol double le trait par
   l'intérieur au lieu d'épaissir la bordure, ce qui bougerait la mise en page.
   --------------------------------------------------------------------------- */

/* line-height en pixels et non en multiple : sans elle, le bouton hérite
   l'interligne de son voisinage (1,55 dans le corps, 1,65 dans une section,
   1,6 dans la note de fin) et sa hauteur tombe sur un tiers de pixel. Le bord
   du bas se retrouve alors à cheval sur deux pixels écran, l'antialiasing le
   partage en deux, et il paraît plus fin que les trois autres. 14 + 9 + 9 + 2
   font 34, un compte rond, et tous les boutons de la page font la même taille
   quel que soit l'endroit où ils se trouvent. */
.btn { font-family:var(--mono); font-size:10.5px; line-height:14px; letter-spacing:.08em; text-transform:uppercase;
       padding:9px 12px; border:1px solid transparent; border-radius:0; background:var(--paper);
       /* Le cadre est tracé en `outline` rentrant, pas en `border`. Mesuré au
          pixel : une bordure d'un pixel sur une boîte posée entre deux pixels
          écran rend son bord du bas à 66 de luminance là où le haut est à 225,
          soit un cinquième de l'encre. Le contour, lui, est peint comme une
          décoration calée sur la grille : les quatre bords sortent à 225.
          La bordure transparente reste pour ne rien changer aux dimensions. */
       outline:1px solid var(--ink); outline-offset:-1px;
       color:var(--ink); cursor:pointer; text-decoration:none; display:inline-block;
       transition:box-shadow .1s, background .1s, color .1s; }
.btn:hover { box-shadow:inset 0 0 0 1px var(--ink); }
.btn:active { transform:translate(1px,1px); }
.btn:focus-visible { outline:1px solid var(--acc-hi); outline-offset:3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity:.35; cursor:not-allowed; }
.btn:disabled:hover, .btn[aria-disabled="true"]:hover { box-shadow:none; }
/* l'action qui fait avancer : un seul par écran */
.btn.cta { background:var(--acc); outline-color:var(--acc); color:#fff; font-weight:600; }
.btn.cta:hover { box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); }
.btns { display:flex; gap:8px; flex-wrap:wrap; }
.nav .btn { padding:7px 11px; }

/* ---------------------------------------------------------------------------
   6. Les ouvertures de page

   Deux formes, la même intention : dire où l'on est en une phrase et laisser
   la page montrer la suite. `.ouverture` est celle de la refonte : un titre,
   une ou deux phrases à la mesure de lecture, deux renvois discrets, et rien
   qui plaide. `.hero` est celle qui reste sur /donnees/, à reprendre quand
   cette page passera à son tour.
   --------------------------------------------------------------------------- */

.ouverture { padding:56px 0 0; }
.ouverture h1 { font-size:clamp(30px, 4.6vw, 48px); font-weight:800; line-height:1.06;
                letter-spacing:-.015em; margin:0; max-width:21ch; }
.ouverture h1 .acc { color:var(--acc-hi); }
/* le paragraphe d'entrée garde la mesure de lecture : en pleine largeur, l'œil
   perd la ligne suivante et l'ouverture se met à ressembler à un article */
.ouverture .phrase { max-width:58ch; font-size:16.5px; line-height:1.62;
                     color:var(--mut); margin:22px 0 0; }
.ouverture .apres { display:flex; gap:22px; align-items:center; flex-wrap:wrap; margin:30px 0 0; }
.ouverture .apres .discret { font-family:var(--mono); font-size:10px; letter-spacing:.1em;
                             text-transform:uppercase; color:var(--mut); text-decoration:none;
                             border-bottom:1px solid var(--mid); padding-bottom:2px; }
.ouverture .apres .discret:hover { color:var(--acc-hi); border-bottom-color:var(--acc-hi); }

.hero { padding:72px 0 48px; }
.hero h1 { font-size:clamp(28px, 4.6vw, 44px); font-weight:800; line-height:1.08;
           letter-spacing:.01em; margin:0 0 18px; text-wrap:balance; max-width:20ch; }
.hero h1 .acc { color:var(--acc-hi); }
.hero .btns { margin-top:26px; }
.hero .btn { padding:12px 18px; font-size:11px; }

/* ---------------------------------------------------------------------------
   7. Les cartes d'outil

   Deux par rangée sur un écran classique. La planche carrée dessus, son
   cartouche, le texte dessous. La carte est un objet posé sur la table
   quadrillée : elle a un bord, et c'est le seul trait qu'elle porte, avec
   celui qui sépare la planche du cartouche.
   --------------------------------------------------------------------------- */

.cartes { --gouttiere:22px;
          list-style:none; margin:0; padding:0;
          display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--gouttiere); }
@media (max-width:780px) { .cartes { grid-template-columns:minmax(0,1fr); } }

/* La carte vedette : le premier outil couché sur les deux colonnes.

   À trois outils en service, le troisième se poserait seul sur la deuxième
   ligne, à demi largeur, avec un vide à sa droite : ça se lit comme une carte
   qui manque, pas comme un choix. En couchant le premier, il n'y a plus de
   reste à placer, les deux suivants font une rangée pleine, et le plus ancien
   des outils est celui qu'on voit en premier.

   La planche reste carrée, comme celles des autres cartes, et fait exactement
   la largeur intérieure de la carte qui se trouve dessous : son bord droit
   tombe au pixel sur le bord droit de la planche du dessous, et le trait qui
   la longe prolonge le bord de cette carte. Le compte : 100% vaut ici la
   largeur intérieure de la vedette, soit la rangée moins ses deux bords ; la
   carte du dessous occupe la moitié de la rangée moins la gouttière, dont
   deux pixels partent dans ses propres bords. D'où (100% - gouttière - 2) / 2.
   La gouttière est en variable pour que les deux comptes ne se séparent pas
   le jour où l'écart entre les cartes change.

   Sous 781 px la vedette redevient une carte ordinaire : rien à défaire, le
   bloc entier est dans la requête de média.

   La carte couchée (.couchee) reprend la même mise en page sans le titre
   agrandi. Elle sert quand une section compte un nombre impair de cartes,
   pour qu'aucune ne se pose seule à demi largeur : Fond de plan en bas
   d'« En service », Jouons par le paysage en tête d'« En chantier »
   (octobre 2026). Une section qui redevient paire rend la carte ordinaire
   en retirant la classe. */
@media (min-width:781px) {
  .cartes .carte.vedette,
  .cartes .carte.couchee { grid-column:1 / -1;
    display:grid;
    grid-template-columns:calc((100% - var(--gouttiere) - 2px) / 2) minmax(0,1fr);
    grid-template-rows:auto 1fr; }
  .carte.vedette .planche,
  .carte.couchee .planche { grid-area:1 / 1 / 3 / 2; aspect-ratio:1/1;
                            border-right:1px solid var(--mid); }
  .carte.vedette .cartouche,
  .carte.couchee .cartouche { grid-area:1 / 2 / 2 / 3; padding:14px 18px 7px; }
  .carte.vedette .dire,
  .carte.couchee .dire { grid-area:2 / 2 / 3 / 3; padding:15px 18px 18px; }
  .carte.couchee .resume { max-width:52ch; }
  /* le titre monte d'un cran, pas deux : c'est le premier outil, pas une
     bannière. Le reste du texte ne bouge pas, sinon la carte cesse d'être la
     même carte que les deux autres. */
  .carte.vedette h3 { font-size:clamp(27px, 3vw, 34px); }
  .carte.vedette .resume { max-width:52ch; }
  /* .mots porte déjà margin-top:auto : les mots clefs et le bouton se posent
     au bas de la colonne, en face du bas de la planche. */
}

.carte { background:var(--paper); border:1px solid var(--mid);
         display:flex; flex-direction:column; transition:border-color .12s; }
.carte:hover { border-color:var(--ink); }
.carte .planche { aspect-ratio:1/1; overflow:hidden; }
/* margin:0 : le cartouche est un <p>, et un <p> garde la marge que lui donne
   le navigateur, 15 px en haut et en bas. Elle ouvrait une bande vide entre la
   planche et la légende, avec le filet posé à son bord inférieur, ce qui la
   faisait lire comme un bloc à part. Et ses 15 px du bas expliquaient à eux
   seuls presque tout l'écart avec le numéro qui suit. */
.carte .cartouche { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0;
                    padding:9px 14px 7px; }
.carte .cartouche .valeur { font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
                            text-transform:uppercase; color:var(--faint); }
/* 14 px sur les côtés, la même valeur que le cartouche juste au-dessus : le
   texte s'alignait 10 px plus à droite que la cote, et la carte comptait
   trois bords gauches, celui de la planche, celui du cartouche et celui du
   texte. Un seul suffit.

   8 px en haut, et non 22 : le cartouche a déjà 9 px sous son texte, les deux
   s'additionnaient. Le cartouche et le texte qui le suit sont deux blocs
   voisins, pas deux sections, ils se touchent presque. */
.carte .dire { padding:15px 14px 14px; display:flex; flex-direction:column; gap:10px; flex:1; }
.carte .repere { font-family:var(--mono); font-size:10px; letter-spacing:.2em;
                 color:var(--faint); margin:0; }
.carte h3 { font-size:clamp(21px, 2.3vw, 27px); font-weight:800; line-height:1.05;
            letter-spacing:-.01em; margin:0; }
.carte h3 a { text-decoration:none; }
.carte:hover h3 a { color:var(--acc-hi); }
.carte .descripteur { font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
                      text-transform:uppercase; color:var(--mut); margin:0; }
.carte .resume { font-size:13px; line-height:1.55; color:var(--mut); margin:0; }
/* Les mots clefs, à la place des cotes. Une cote (« 1/20 000 · socle 250 mm »)
   ne dit rien à qui découvre l'outil et n'apporte rien à la recherche. Ces
   mots-là sont ceux qu'on tape pour trouver ce genre d'outil, et ils disent au
   passage ce qui sort de la machine. */
.carte .mots { display:flex; flex-wrap:wrap; gap:6px; margin:auto 0 0; padding-top:16px; }
.carte .mots span { font-family:var(--mono); font-size:9px; letter-spacing:.1em;
                    text-transform:uppercase; color:var(--mut);
                    border:1px solid var(--hair); padding:3px 7px; }
.carte .btns { margin:16px 0 0; }

/* La démo est le sujet de la carte, et elle EST son propre bouton : on clique
   la planche pour en tirer une autre. Un bouton « Encore » à côté faisait deux
   commandes pour un seul geste. En <button> et non en <div> pour que le clavier
   l'atteigne comme la souris. */
button.planche { display:block; width:100%; padding:0; border:0; background:none;
                 font:inherit; color:inherit; cursor:pointer; }
/* .carte .planche img et non button.planche img : une carte sans série (Maillage,
   en chantier) pose une vue fixe dans une simple <div class="planche">.
   Pas .planche img tout court : l'accueil de Maquettes de territoire a sa
   propre figure.planche, hors carte, qu'il ne faut pas recadrer. */
.carte .planche img { display:block; width:100%; height:100%; object-fit:cover; line-height:0; }
/* Fond de plan sort une feuille au format A, jamais carrée : sa proportion est
   une information, on ne la recadre pas. Elle se pose entière sur le papier
   riso, comme une planche posée sur la table. */
button.planche[data-apercu="fond-de-plan"] { background:var(--riso-papier); }
button.planche[data-apercu="fond-de-plan"] img { object-fit:contain; padding:5%; }
button.planche:focus-visible { outline:2px solid var(--acc-hi); outline-offset:-2px; }
/* au survol, la planche se signale par son cartouche : le tirage suivant est
   à un clic, et rien ne bouge dans la mise en page */
.carte:hover .cartouche .valeur,
button.planche:focus-visible + .cartouche .valeur { color:var(--ink); }

/* la carte d'un outil en chantier : même format, un ton plus bas. Le titre est
   plus petit, l'action n'a pas d'accent, et la page dit qu'ils ne promettent
   pas la même chose sans avoir à l'écrire. La planche reste carrée comme
   celle des outils en service (elle a été en 4:3 jusqu'en octobre 2026) :
   les séries sortent carrées, et le 4:3 rognait leurs bords. */
.carte.en-chantier h3 { font-size:19px; letter-spacing:.01em; }
.carte.en-chantier .dire { padding:15px 14px 14px; gap:9px; }
.carte.en-chantier .resume { font-size:12.5px; }
.carte.en-chantier .reste { margin:auto 0 0; padding-top:14px;
                            font-family:var(--mono); font-size:9.5px; letter-spacing:.08em;
                            text-transform:uppercase; color:var(--faint); }
.carte.en-chantier .reste b { color:var(--mut); font-weight:500; }

/* ---------------------------------------------------------------------------
   8. Le texte tenu à la main

   Pas de cadre ni de filet : un libellé en marge, du texte en regard. Sert à
   tout ce qui se dit sans être une fiche produit : les explorations de
   l'accueil, les chantiers d'origine et les critères de publication de la
   démarche. Un mot clef en marge plutôt qu'une date : une recherche qui n'a
   pas bougé depuis huit mois reste une recherche, alors qu'une note datée de
   huit mois fait un site à l'abandon.
   --------------------------------------------------------------------------- */

.pistes { list-style:none; margin:0; padding:0; display:grid; gap:22px; max-width:860px; }
.pistes > li { display:grid; grid-template-columns:170px minmax(0,1fr); gap:24px;
               align-items:baseline; }
.pistes .libelle { font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
                   text-transform:uppercase; color:var(--faint); line-height:1.5; }
.pistes .quoi { margin:0; font-size:13.5px; line-height:1.6; color:var(--mut); max-width:62ch; }
.pistes .quoi b { color:var(--ink); font-weight:600; }
/* un renvoi hors du hub : la flèche dit qu'on quitte le site, comme au bandeau */
.pistes .quoi a.sortant { display:table; margin-top:10px; font-family:var(--mono);
                          font-size:10px; letter-spacing:.1em; text-transform:uppercase;
                          color:var(--ink); text-decoration:none;
                          border-bottom:1px solid var(--mid); }
.pistes .quoi a.sortant::after { content:" ↗"; color:var(--faint); }
.pistes .quoi a.sortant:hover { color:var(--acc-hi); border-bottom-color:var(--acc-hi); }
@media (max-width:600px) { .pistes > li { grid-template-columns:minmax(0,1fr); gap:5px; } }

/* la ligne qui referme une liste : une remarque sur ce qu'on vient de lire,
   pas un élément de plus */
.apres-liste { margin:22px 0 0; font-size:13.5px; line-height:1.6;
               color:var(--mut); max-width:62ch; }

/* ---------------------------------------------------------------------------
   9. Le socle commun
   Les quelques appuis partagés par tous les outils, en deux colonnes de titres
   courts. Ni cadre ni numéro : ce ne sont pas des étapes, ce sont des partis pris.
   --------------------------------------------------------------------------- */

.socle { list-style:none; margin:0; padding:0;
         display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:30px 40px;
         max-width:900px; }
@media (max-width:640px) { .socle { grid-template-columns:minmax(0, 1fr); gap:24px; } }
.socle h3 { font-size:14px; font-weight:700; margin:0 0 7px; letter-spacing:.01em; }
.socle p { font-size:13.5px; line-height:1.55; color:var(--mut); margin:0; max-width:44ch; }

/* ---------------------------------------------------------------------------
   10. Les fiches de source de données

   Une fiche par source, appelée par la clé `sources` de outils.json. Une
   fiche est un objet posé sur la table : son cadre, et du vide autour. Elles
   étaient auparavant empilées dans un cadre unique, séparées par des filets,
   deux trames de plus sur un fond déjà quadrillé.
   --------------------------------------------------------------------------- */

.fiches { display:grid; gap:22px; max-width:880px; }
.source { background:var(--paper); border:1px solid var(--mid); padding:22px 24px; }
.source > p { max-width:66ch; line-height:1.6; margin:0 0 12px; }

.source .tete-source { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 14px;
                       margin-bottom:10px; }
.source h3 { margin:0; font-size:17px; }
/* la licence, en étiquette : c'est une cote, pas un titre */
.licence { font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase;
           padding:2px 7px; border:1px solid var(--mid); color:var(--mut); }
.source dl { display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:6px 18px;
             margin:12px 0 0; font-size:13.5px; }
.source dt { font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
             color:var(--faint); padding-top:3px; }
.source dd { margin:0; color:var(--mut); }
@media (max-width:600px) { .source dl { grid-template-columns:minmax(0, 1fr); gap:2px; }
                           .source dd { margin-bottom:8px; } }

/* la mention à porter à l'écran ou sur la planche : donnée à recopier telle
   quelle, donc présentée comme une valeur, dans le fond des champs de saisie */
/* max-width:none : c'est une valeur à recopier, pas du texte suivi, elle
   prend toute la largeur du bloc plutôt que la mesure de lecture */
.section > .contenu > .mention { max-width:none; }
.mention { font-family:var(--mono); font-size:11.5px; line-height:1.6; color:var(--ink);
           background:var(--field); border:1px solid var(--mid); padding:10px 12px;
           margin:0; display:block; white-space:pre-wrap; max-width:none; }

/* ---------------------------------------------------------------------------
   11. La chaîne de fabrication et sa cote

   Les cinq temps de la méthode d'Atelier VOUS, du support brut à l'outil posé
   sur la table. Cinq pièces posées avec du vide entre elles, et non plus une
   bande découpée par des filets.

   Le propos de la section n'est pas dans les cases mais dans la cote qui court
   dessous : les générateurs ne sont pas un temps de la méthode, ils prennent
   une tâche quelque part dans les quatre premiers. Un trait, deux repères
   d'extrémité, une étiquette : la ligne de cote d'un plan. Le cinquième temps
   reste en dehors.
   --------------------------------------------------------------------------- */

.chaine { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:14px; }

.temps { background:var(--paper); border:1px solid var(--mid); padding:16px 18px;
         display:flex; flex-direction:column; gap:6px; min-width:0; }
.temps .n { font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
            color:var(--faint); font-variant-numeric:tabular-nums; }
.temps h3 { font-size:14px; font-weight:700; letter-spacing:.01em; margin:0; }
.temps p { font-size:12.5px; line-height:1.45; color:var(--mut); margin:0; }

/* les temps couverts par la cote sont posés en ligne comme les autres :
   `display:contents` les rend à la grille de la chaîne, le groupe ne sert
   qu'à porter la cote, et à se replier d'un bloc en écran étroit */
.portee { display:contents; }
/* le temps hors cote est placé à la main : sans ça il se rangerait après
   l'étiquette, en deuxième ligne */
.chaine .hors { grid-column:5; grid-row:1; }

.etendue { grid-column:1 / 5; grid-row:2; margin:0; position:relative;
           border-top:1px solid var(--acc-hi); padding-top:10px;
           font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
           text-transform:uppercase; color:var(--acc-hi); text-align:center; }
.etendue::before, .etendue::after { content:""; position:absolute; top:-5px;
                                    width:1px; height:10px; background:var(--acc-hi); }
.etendue::before { left:0; }
.etendue::after { right:0; }

/* cinq colonnes ne tiennent pas sous 900 px : la chaîne se lit alors de haut
   en bas, ce qui reste une chaîne, et la cote bascule avec elle : le trait
   passe à gauche des temps qu'il couvre, l'étiquette en bas */
@media (max-width:900px) {
  .chaine { grid-template-columns:minmax(0, 1fr); }
  .portee { display:grid; gap:14px; border-left:1px solid var(--acc-hi); padding-left:14px; }
  .chaine .hors { grid-column:auto; grid-row:auto; }
  .etendue { grid-column:auto; grid-row:auto; border-top:0; padding-top:0; text-align:left; }
  .etendue::before, .etendue::after { content:none; }
}

/* ---------------------------------------------------------------------------
   12. Les encarts de fin

   `.appel` : l'ombre nette d'une feuille posée sur une autre, pour un appel
   qui doit se détacher. `.note-fin` : la même carte, sans ombre et sans
   accent, pour l'appel B2B qui ferme une page : c'est une note de fin, pas un
   argumentaire, et c'est elle qu'emploient l'accueil et la démarche.
   --------------------------------------------------------------------------- */

.appel { background:var(--paper); border:1px solid var(--ink); padding:34px;
         box-shadow:8px 8px 0 var(--shadow-soft); }
.appel h2 { font-size:19px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
            margin:0 0 12px; }
.appel p { max-width:62ch; line-height:1.65; margin:0 0 16px; }

.note-fin { background:var(--paper); border:1px solid var(--mid); padding:28px 30px;
            display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 34px;
            align-items:start; }
/* le titre court sur les deux colonnes : les deux textes commencent alors à la
   même ligne, ce qu'ils ne faisaient pas quand le titre occupait la colonne
   de gauche et repoussait son propre texte d'une ligne */
.note-fin h2 { grid-column:1 / -1; font-size:16px; font-weight:800; letter-spacing:.04em;
               text-transform:uppercase; margin:0 0 20px; }
.note-fin p { font-size:13px; line-height:1.6; color:var(--mut); margin:0 0 14px; max-width:52ch; }
.note-fin .direct { margin:14px 0 0; font-size:12.5px; }
.note-fin .direct a { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--mid); }
.note-fin .direct a:hover { color:var(--acc-hi); border-bottom-color:var(--acc-hi); }
@media (max-width:760px) { .note-fin { grid-template-columns:minmax(0,1fr); }
                           .note-fin > div:first-of-type { margin-bottom:18px; } }

/* ---------------------------------------------------------------------------
  13. Mouvement
   Rare et court. La pose à l'arrivée d'un bloc, rien d'autre en entrée.
   --------------------------------------------------------------------------- */

.pose { animation:pose .5s ease-out backwards; }
@keyframes pose { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce) { .pose { animation:none; } }