/* Feuille de style du site Podiamill.
   Écrite à la main, sans framework ni chaîne de build (cahier §10.4) : le site doit rester
   relisible et modifiable par Nicolas.

   COULEURS : aucune valeur de couleur ici, jamais. Toutes vivent dans `themes/defaut.css`, chargé
   avant cette feuille (cahier §10.4) ; on n'y référence que des rôles (`var(--accent)`, `var(--fond)`)
   comme les vues de l'application référencent les clés `Oc*` de son thème. Une couleur écrite en dur
   ici échapperait au thème sans que rien ne le signale — un test le refuse (`ThemeSiteTests`).

   Mise en page FLUIDE (cahier §10.4, décision « Mise en page fluide plutôt que maquettes par
   palier ») : marges et typographie en `clamp()`, grilles en `auto-fit`, et deux points de
   rupture seulement — 52rem (les colonnes s'empilent) puis 30rem (petits téléphones). La barre de
   navigation n'en dépend pas : elle montre ce qui tient et replie le reste (voir « En-tête »). Règle absolue : rien ne doit déborder horizontalement entre 320px et un grand
   écran. Le débordement se traite à la source (mots coupés, images plafonnées, tableaux et blocs
   de code dans leur propre cadre défilant), jamais par un `overflow-x: hidden` sur le body qui
   rendrait le contenu débordant inatteignable. */

/* Mesures de structure, communes à tous les thèmes : elles tiennent à la lisibilité et à
   l'accessibilité, pas à la charte graphique, et n'ont donc rien à faire dans un fichier de thème.
   Les couleurs et le rayon, eux, sont dans `themes/defaut.css`. */
:root {
    --largeur: 68rem;
    /* Marge latérale commune à l'en-tête, au contenu et au pied de page : 1rem sur un téléphone,
       1.5rem dès qu'il y a de la place. Les trois doivent utiliser la même variable, sinon les
       colonnes se décalent les unes par rapport aux autres. */
    --marge-page: clamp(1rem, 4vw, 1.5rem);
    /* Hauteur minimale d'une cible tactile (cahier §10.4). */
    --cible-tactile: 44px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Empêche iOS d'agrandir tout seul le texte quand le téléphone passe en paysage. */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* Une URL ou un identifiant Stripe sans espace ne doit pas pousser la page hors cadre. */
    overflow-wrap: break-word;
}

/* Décor fixe derrière toute la page (`--fond-decor`) : c'est ce que les surfaces translucides
   laissent deviner en le floutant (section AE). Un pseudo-élément fixe plutôt
   qu'un `background-attachment: fixed`, qu'iOS ignore. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--fond-decor);
    pointer-events: none;
}

/* Aucun média ne dépasse sa colonne, où qu'il soit inséré. */
img,
svg,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* ---------- En-tête ---------- */

.entete {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--entete-fond);
    -webkit-backdrop-filter: var(--entete-flou);
    backdrop-filter: var(--entete-flou);
    border-bottom: 1px solid var(--bordure);
}

.entete-contenu {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: .7rem var(--marge-page);
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.marque {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.01em;
    text-decoration: none;
    color: var(--texte);
    white-space: nowrap;
}

/* Le nom de la marque s'écrit en deux couleurs, comme le logo (cahier §7). */
.marque-accent {
    color: var(--accent);
}

.marque img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

/* Navigation « priorité » : pas de seuil de largeur. Sans JavaScript, la barre passe à la ligne
   et tout reste visible. Avec (classe `js`), elle tient sur une ligne : site.js mesure le
   débordement et range ce qui ne tient pas dans le menu « Plus », dans l'ordre de sacrifice décrit
   dans le layout. `overflow: hidden` masque l'éventuel débordement le temps de ce calcul — c'est
   aussi pourquoi la liste déroulante vit hors de ce conteneur. */
.js .entete-contenu {
    flex-wrap: nowrap;
    overflow: hidden;
}

.entete-contenu {
    flex-wrap: wrap;
}

.nav-principale {
    display: flex;
    align-items: center;
    gap: .25rem 1rem;
    flex-wrap: wrap;
    font-size: .95rem;
}

.js .nav-principale {
    flex-wrap: nowrap;
}

/* Aucun libellé ne passe jamais à la ligne : un onglet sur deux lignes étire toute la barre. */
.entete-contenu a,
.entete-contenu button {
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-compte .lien {
    color: var(--texte-doux);
    text-decoration: none;
}

.nav-compte .lien:hover {
    color: var(--texte);
}

.nav-principale a,
.nav-compte > a:not(.bouton) {
    display: inline-flex;
    align-items: center;
    min-height: var(--cible-tactile);
    color: var(--texte-doux);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.nav-principale a:hover,
.nav-compte > a:not(.bouton):hover {
    color: var(--texte);
}

.nav-principale a.actif {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.nav-compte {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .8rem;
    font-size: .95rem;
}

.nav-plus[hidden],
.nav-plus-liste[hidden] {
    display: none;
}

.bouton-menu {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: var(--cible-tactile);
    padding: .4rem .8rem;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    background: var(--surface);
    color: var(--texte-doux);
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
}

.bouton-menu:hover,
.bouton-menu[aria-expanded="true"] {
    background: var(--surface-appuyee);
    color: var(--texte);
}

.bouton-menu-barres {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    position: relative;
}

.bouton-menu-barres::before,
.bouton-menu-barres::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: currentColor;
}

.bouton-menu-barres::before {
    top: -6px;
}

.bouton-menu-barres::after {
    top: 6px;
}

/* La page courante est rangée dans le menu : le bouton la signale à sa place. */
.bouton-menu.actif {
    color: var(--accent);
    border-color: var(--accent);
}

/* Menu « Plus » : une simple liste, posée sous son bouton par site.js, jamais plus large que
   l'écran. */
.nav-plus-liste {
    position: absolute;
    top: 100%;
    display: flex;
    flex-direction: column;
    min-width: 13rem;
    max-width: calc(100% - 2 * var(--marge-page));
    padding: .35rem;
    background: var(--surface-menu);
    border: 1px solid var(--bordure);
    border-radius: 8px;
}

.nav-plus-liste a,
.nav-plus-liste .lien {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--cible-tactile);
    padding: .2rem .8rem;
    border-radius: 6px;
    color: var(--texte-doux);
    text-decoration: none;
    text-align: left;
}

.nav-plus-liste a:hover,
.nav-plus-liste .lien:hover {
    background: var(--surface-appuyee);
    color: var(--texte);
}

.nav-plus-liste a.actif {
    color: var(--accent);
    font-weight: 600;
}

.nav-plus-liste .en-ligne {
    display: block;
}

/* Derniers recours quand même les liens prioritaires manquent de place (petits téléphones) : le
   nom de la marque s'efface — le logo reste, et le nom reste lu par les lecteurs d'écran — puis
   les espacements se resserrent, et enfin le mot « Menu » s'efface derrière son icône. */
.marque-compacte .marque-nom,
.menu-icone .bouton-menu-texte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.entete-serree {
    gap: .5rem;
}

.entete-serree .nav-compte {
    gap: .5rem;
}

.entete-serree .bouton,
.entete-serree .bouton-menu {
    padding-left: .6rem;
    padding-right: .6rem;
}

/* ---------- Blocs de contenu ---------- */

main {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: clamp(1.5rem, 5vw, 2.5rem) var(--marge-page) 4rem;
}

main.etroit {
    max-width: 42rem;
}

h1 {
    font-size: clamp(1.6rem, 5.5vw, 2.1rem);
    line-height: 1.2;
    letter-spacing: -.02em;
    margin: 0 0 .6rem;
}

h2 {
    font-size: clamp(1.25rem, 3.5vw, 1.4rem);
    letter-spacing: -.01em;
    margin: 2.5rem 0 .8rem;
}

h3 {
    font-size: 1.1rem;
    margin: 1.8rem 0 .4rem;
}

a {
    color: var(--accent);
}

.accroche {
    color: var(--texte-doux);
    font-size: clamp(1rem, 2.6vw, 1.1rem);
    max-width: 40rem;
    /* Pas de mot orphelin en fin de paragraphe ; ignoré sans dommage par un navigateur ancien. */
    text-wrap: pretty;
}

/* L'accroche qui suit le titre d'une page tient sur la largeur de la page : bornée à 40rem, une
   phrase courte se coupait en plein milieu sur un écran large. Si elle doit passer à la ligne, ses
   lignes sont équilibrées plutôt que de laisser trois mots seuls sur la seconde. */
h1 + .accroche {
    max-width: none;
    text-wrap: balance;
}

/* Dans un bloc centré, l'accroche bornée se centre elle aussi : sinon son texte se centre dans une
   boîte collée à gauche, décalé par rapport au titre et aux boutons. */
.centre .accroche,
.appel-final .accroche,
.bloc-prix .accroche {
    margin-left: auto;
    margin-right: auto;
}

.discret {
    color: var(--texte-doux);
    font-size: .92rem;
}

/* ---------- Accueil ---------- */

.hero {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 1.5rem 0 3rem;
}

.hero-visuel {
    display: flex;
    justify-content: center;
}

.hero-visuel img {
    width: 100%;
    /* Le visuel montre une plaque de semelles imbriquées, pas un logo : il lui faut de la place. */
    max-width: 340px;
    height: auto;
    border-radius: 20px;
    box-shadow: var(--ombre);
    background: var(--surface);
}

/* Vidéo de présentation : pleine largeur sous l'accroche, l'interface filmée doit rester lisible. */
.video-presentation {
    margin: 0 0 3rem;
}

/* Titre centré, comme toute l'accroche au-dessus. */
.video-presentation h2 { text-align: center; }

.video-presentation video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    background: var(--surface);
}

.actions {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

/* `minmax(min(15rem, 100%), 1fr)` et non `minmax(15rem, 1fr)` : sur un écran de 320px, une piste
   de 15rem (240px) plus les marges déborderait. Le `min()` autorise la piste à rétrécir. */
.grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: 1.2rem;
    margin-top: 1.2rem;
}

.carte {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: clamp(1rem, 3vw, 1.3rem);
    box-shadow: var(--ombre);
}

.carte h3 {
    margin-top: 0;
}

.carte p:last-child {
    margin-bottom: 0;
}

.carte-lien {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform .12s ease, border-color .12s ease;
}

.carte-lien:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
}

/* ---------- Boutons ---------- */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--cible-tactile);
    padding: .6rem 1.2rem;
    border: 1px solid var(--accent);
    border-radius: 8px;
    text-decoration: none;
    color: var(--accent);
    background: var(--surface);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.bouton:hover {
    background: var(--surface-appuyee);
}

.bouton-principal {
    background: var(--principal-fond);
    border-color: var(--accent);
    color: var(--accent-texte);
}

.bouton-principal:hover {
    background: var(--accent-sombre);
    border-color: var(--accent-sombre);
}

.lien {
    border: 0;
    background: none;
    color: var(--texte-doux);
    font: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.en-ligne {
    display: inline;
}

/* Selecteur de langue (cahier 10.4). N'apparait que s'il existe une autre langue traduite. */
.selecteur-langue {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.selecteur-langue-courante {
    color: var(--texte-doux);
    font-size: .9rem;
}

.selecteur-langue-courante::after {
    content: "·";
    margin-left: .45rem;
}

.bouton-discret {
    border-color: var(--bordure);
    color: var(--texte-doux);
}

/* ---------- Page compte (cahier 10.1) ---------- */

/* Les actions s'empilent sur telephone plutot que de deborder : chacune reste une cible tactile
   pleine largeur, la ou trois boutons cote a cote deviendraient illisibles sous 400 px. */
.actions-compte {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.4rem;
}

.actions-compte .en-ligne {
    display: inline-flex;
}

.statut-ok {
    color: var(--succes);
}

.statut-ko {
    color: var(--alerte);
}

/* Issue d'une action (abonnement actualise, portail indisponible...), affichee au retour. */
.message {
    margin: 0 0 1.2rem;
    padding: .7rem 1rem;
    border-left: 4px solid var(--accent);
    background: var(--surface-appuyee);
    border-radius: 6px;
}

/* ---------- Encarts & formulaires ---------- */

.encart,
.formulaire {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: clamp(1.1rem, 4vw, 1.6rem);
    margin-top: 1.5rem;
    box-shadow: var(--ombre);
}

.encart h1:first-child,
.formulaire h1:first-child {
    margin-top: 0;
}

.encart-succes {
    border-left: 4px solid var(--succes);
}

.encart-alerte {
    border-left: 4px solid var(--alerte);
}

.encart-info {
    border-left: 4px solid var(--accent);
}

.encart-chantier {
    border-left: 4px solid var(--ambre);
    background: var(--encart-chantier-fond);
}

.formulaire {
    max-width: 30rem;
}

.formulaire label {
    display: block;
    margin-top: 1.1rem;
    font-weight: 600;
    font-size: .95rem;
}

/* `font-size: 1rem` explicite (16px) : en dessous de 16px, iOS zoome la page au premier clic dans
   un champ et ne la dézoome jamais — le visiteur se retrouve à faire défiler la page de côté
   (cahier §10.4). Ne pas descendre cette valeur. */
.formulaire input,
.formulaire textarea,
.formulaire select {
    width: 100%;
    margin-top: .3rem;
    padding: .6rem .75rem;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    font: inherit;
    font-size: 1rem;
    min-height: var(--cible-tactile);
    background: var(--surface);
    color: var(--texte);
}

.formulaire input:focus,
.formulaire textarea:focus,
.formulaire select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.formulaire textarea {
    min-height: 9rem;
    resize: vertical;
}

/* Champ mot de passe avec bouton « Afficher » (cahier §10.4). Le bouton est posé DANS le champ
   plutôt qu'à côté : la largeur du formulaire est déjà juste sur un téléphone. Sa cible tactile
   reste au minimum requis. Sans JavaScript, le bouton n'est jamais inséré et le champ se comporte
   exactement comme avant — amélioration progressive, comme le menu mobile. */
.champ-mot-de-passe {
    position: relative;
}

.champ-mot-de-passe input {
    padding-right: 5.5rem;
}

.bouton-voir-mdp {
    position: absolute;
    right: .35rem;
    bottom: .35rem;
    min-height: calc(var(--cible-tactile) - .7rem);
    padding: 0 .6rem;
    border: 1px solid var(--bordure);
    border-radius: 6px;
    background: var(--fond);
    color: var(--texte-doux);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}

.bouton-voir-mdp:hover {
    color: var(--texte);
    border-color: var(--accent);
}

.bouton-voir-mdp:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.formulaire button {
    margin-top: 1.6rem;
}

.aide {
    color: var(--texte-doux);
    font-size: .88rem;
    margin: .3rem 0 0;
}

.erreurs,
.erreur {
    color: var(--alerte);
    font-size: .93rem;
}

.erreurs ul {
    margin: 0;
    padding-left: 1.2rem;
}

.erreurs:empty {
    display: none;
}

/* ⚠ Le récapitulatif de validation d'ASP.NET n'est JAMAIS vide : sans erreur, il rend malgré tout
   un « <ul><li style="display:none"></li></ul> ». « :empty » ne s'y applique donc pas, et la puce
   de la liste s'affichait seule, en rouge, en haut de chaque formulaire du site. C'est la classe
   posée par ASP.NET — « valid » sans erreur, « errors » avec — qui tranche réellement. */
.erreurs.validation-summary-valid {
    display: none;
}

/* Indicateur de champ obligatoire, posé sur le libellé. */
.requis::after {
    content: "•";
    margin-left: .25rem;
    color: var(--alerte);
}

/* Un libellé qui porte une aide devient une rangée : le texte, puis le point rouge, puis la
   pastille. Sans cela, le bouton ajouté par le script se glissait AVANT le « ::after » — le point
   rouge se retrouvait derrière la pastille, et la pastille flottait trop bas. */
label.a-aide {
    display: inline-flex;
    align-items: center;
}

label.a-aide::after {
    order: 1;
}

label.a-aide .bouton-aide {
    order: 2;
    /* Remontée. Centrée sur la hauteur de ligne, la pastille tombe visiblement SOUS le texte : les
       jambages tirent la ligne vers le bas alors que l'œil aligne sur les capitales. Quatre pixels
       la ramènent au niveau du texte — valeur réglée sur captures comparées (0 à 6 px), 2026-09-12.
       En « rem » et non en « em » : un « em » se rapporterait à la police de la pastille, deux fois
       plus petite que celle du libellé, et le décalage serait deux fois trop faible — c'est
       exactement l'erreur du premier réglage, qui paraissait ne rien changer. */
    position: relative;
    top: -.7rem;
}

/* Le champ de recherche n'est PAS un champ du formulaire : il ne part pas à l'enregistrement, il
   ne fait que remplir ceux d'en dessous. Posé comme les autres, il se confondait avec eux (retour
   de Nicolas, 2026-09-12). Un encadré teinté, détaché, le donne à lire comme un outil. */
.recherche-cabinet {
    margin-bottom: 1.6rem;
    padding: .85rem 1rem 1rem;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface-appuyee);
}

.recherche-cabinet > label {
    margin-top: 0;
}

.recherche-cabinet .aide:last-child {
    margin-bottom: 0;
}

/* Aide contextuelle : une pastille « i » contre le libellé, et sa bulle sous le champ.
   Sans JavaScript, le bouton n'existe pas et le texte reste affiché en clair. */
.bouton-aide {
    flex: 0 0 auto;
    margin-left: .35rem;
    width: .95rem;
    height: .95rem;
    padding: 0;
    border: 1px solid var(--bordure);
    border-radius: 50%;
    background: transparent;
    color: var(--texte-doux);
    font-size: .62rem;
    /* Pas d'italique : le « i » penché sort du centre optique du cercle et paraît collé à droite
       (constaté au zoom, 2026-09-12). Le droit se centre tout seul. */
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.bouton-aide:hover,
.bouton-aide:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
}

.bulle-aide {
    margin-top: .4rem;
    padding: .6rem .75rem;
    border: 1px solid var(--bordure);
    border-left: 3px solid var(--accent);
    border-radius: var(--rayon);
    background: var(--surface-appuyee);
}

/* ---------- Fiches & tableaux ---------- */

.fiche {
    margin: 0;
}

.fiche dt {
    font-weight: 600;
    margin-top: 1.1rem;
    font-size: .9rem;
    color: var(--texte-doux);
}

.fiche dd {
    margin: .15rem 0 0;
}

/* Filtres à choix multiples (administration des gabarits, cahier §10.9) : une liste de cases
   repliable par critère, sans JavaScript. La liste défile au-delà d'une quinzaine de valeurs. */
.filtre {
    margin-top: 1.1rem;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    padding: 0 .75rem;
}

.filtre summary {
    cursor: pointer;
    font-weight: 600;
    font-size: .95rem;
    padding: .7rem 0;
}

.filtre-options {
    max-height: 16rem;
    overflow-y: auto;
    padding-bottom: .6rem;
}

.formulaire .filtre .case {
    margin-top: .35rem;
}

/* Aperçu du tracé d'un gabarit (administration, cahier §10.9). */
.apercu-trace {
    display: block;
    max-width: 100%;
    margin-top: 1.2rem;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    background: var(--surface-appuyee);
}

/* Un tableau ne se comprime pas : ses colonnes défilent dans leur propre cadre plutôt que de
   pousser la page entière hors de l'écran. TOUT `<table>` doit être enveloppé dans ce cadre —
   un test le vérifie sur les pages servies (§11.1). */
.tableau-defilant {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 1rem;
    /* Sans cette borne, une grille ou une carte parente laisse le cadre s'élargir au lieu de le
       faire défiler. */
    max-width: 100%;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: .93rem;
}

th,
td {
    text-align: left;
    padding: .6rem .7rem;
    border-bottom: 1px solid var(--bordure);
    white-space: nowrap;
}

th {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texte-doux);
}

tbody tr:hover {
    background: var(--surface-appuyee);
}

.etiquette {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
}

.etiquette-ok {
    background: var(--etiquette-ok-fond);
    color: var(--succes);
}

.etiquette-ko {
    background: var(--etiquette-ko-fond);
    color: var(--alerte);
}

.etiquette-attention {
    background: var(--etiquette-attention-fond);
    color: var(--ambre);
}

/* Ventes fermées (decisions.md section CU) : « Bientôt disponible », à la place d'un lien vers le
   téléchargement ou l'essai. Mêmes couleurs que le badge de prix de l'accueil. */
.etiquette-bientot {
    background: var(--surface-appuyee);
    color: var(--accent);
}

.statut-ok {
    color: var(--succes);
}

.statut-ko {
    color: var(--alerte);
}

/* ---------- Documentation ---------- */

/* En-tête d'un tutoriel : parcours, titre, temps de lecture (Pages/Tutoriels/Article). */
.doc-entete { margin-bottom: 1.6rem; }

.doc-entete h1 { margin: 0; }

.doc-lecture {
    margin: .45rem 0 0;
    color: var(--texte-doux);
    font-size: .95rem;
}

.doc h2 {
    padding-top: .4rem;
    border-top: 1px solid var(--bordure);
}

.doc code {
    background: var(--surface-appuyee);
    padding: .1rem .35rem;
    border-radius: 5px;
    font-size: .9em;
}

/* Un bloc de code garde ses lignes intactes et défile horizontalement dans son cadre : c'est du
   G-code ou une commande, la couper la rendrait fausse. */
.doc pre {
    background: var(--code-fond);
    color: var(--code-texte);
    padding: 1rem;
    border-radius: var(--rayon);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.doc pre code {
    background: none;
    color: inherit;
    padding: 0;
}

/* Les tableaux d'un tutoriel portent des phrases (Home et origine, réglages des ponts) : leurs
   cellules passent à la ligne, au lieu de déborder de la colonne de texte comme un tableau de
   données. */
.doc th,
.doc td {
    white-space: normal;
    vertical-align: top;
}

.doc ol,
.doc ul {
    padding-left: 1.3rem;
}

.doc li {
    margin: .3rem 0;
}

/* Captures d'écran des tutoriels : jamais plus larges que la colonne de texte (une capture de
   720 px déborderait sinon sur mobile), encadrées pour se distinguer du fond de page. Elles sont
   régénérées par `dotnet run --project tools/Podiamill.Screenshots`. */
.doc img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.2rem auto .4rem;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}

/* Légende : le paragraphe en italique qui suit immédiatement une image (`*Texte*` en markdown —
   le contenu reste du markdown pur, sans balise à écrire à la main). Si le navigateur ne connaît
   pas `:has()`, la légende s'affiche simplement en italique : rien n'est cassé. */
.doc p:has(> img) + p {
    margin-top: 0;
    text-align: center;
    color: var(--texte-doux);
    font-size: .9rem;
}

/* ---------- Pied de page ---------- */

.pied {
    border-top: 1px solid var(--bordure);
    background: var(--surface);
}

/* Grille plutôt que flex : les quatre colonnes se réorganisent d'elles-mêmes en deux colonnes sur
   une tablette, puis en une seule sur un téléphone, sans point de rupture à écrire. */
.pied-contenu {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 2rem var(--marge-page);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: 1.5rem 2rem;
    color: var(--texte-doux);
    font-size: .9rem;
}

.pied a {
    color: var(--texte-doux);
    text-decoration: none;
}

.pied a:hover {
    text-decoration: underline;
}

.pied ul {
    list-style: none;
    margin: .4rem 0 0;
    padding: 0;
}

.pied li {
    margin: .25rem 0;
}

.pied strong {
    color: var(--texte);
}

/* ---------- Écrans étroits : les colonnes s'empilent ---------- */

@media (max-width: 52rem) {
    .hero {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding-bottom: 2rem;
    }

    .hero-visuel {
        order: -1;
    }

    .hero-visuel img {
        max-width: 280px;
    }
}

/* ---------- Petits téléphones (≈320–480 px) ---------- */

@media (max-width: 30rem) {
    /* Les appels à l'action passent pleine largeur : deux boutons côte à côte sur 320px donneraient
       deux cibles étroites et un texte coupé. */
    .actions {
        flex-direction: column;
        align-items: stretch;
    }

    .actions .bouton {
        width: 100%;
    }

    h2 {
        margin-top: 2rem;
    }

    main {
        padding-bottom: 3rem;
    }

    .marque {
        font-size: 1.05rem;
    }
}

/* Téléchargement : le bouton et la somme de contrôle (cahier §9.6/§10.4). La somme est un bloc de
   64 caractères sans espace — sans wrap explicite elle déborde de la page sur mobile. */
.telechargement-bloc { text-align: center; }
.telechargement-action { margin: 0 0 0.6rem; }
.telechargement-meta { margin: 0 0 1rem; }

.somme {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
    word-break: break-all;
}

/* La vérification d'empreinte intéresse une minorité de visiteurs : repliée par défaut, pour ne
   pas noyer le bouton de téléchargement sous de la technique. */
.somme-details { text-align: left; margin-top: 1rem; }
.somme-details summary { cursor: pointer; }

/* L'installateur .exe, quand la fiche du Microsoft Store est le bouton principal (decisions.md
   section CE) : un secours, replié comme la somme de contrôle qu'il contient. */
.telechargement-secours { text-align: left; margin-top: 1rem; }
.telechargement-secours summary { cursor: pointer; }

.version { margin-bottom: 2.5rem; }

/* ---------- Utilitaires (cahier §10.10) ----------
   Ils remplacent les attributs style="" qui étaient écrits dans les pages : la politique de
   sécurité du contenu refuse tout style en ligne, et l'y autoriser lui aurait retiré une partie
   de son intérêt. */
.sans-marge { margin: 0; }
.sans-marge-haut { margin-top: 0; }
.sans-marge-bas { margin-bottom: 0; }
.marge-haut { margin-top: 1rem; }
.prix-grand { font-size: 1.6rem; }
.hors-ecran { position: absolute; left: -9999px; }

/* ---------- Cycle de vie du compte (cahier §10.11) ---------- */

/* Case à cocher dans un formulaire : `.formulaire input` étire tout champ sur la largeur, ce qui
   ferait d'une case un rectangle de 30 rem. La case reste à sa taille, le libellé à côté. */
.formulaire .case {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 400;
}

.formulaire .case input {
    width: auto;
    min-height: 0;
    margin: 0;
}

.section-compte {
    margin-top: 2rem;
}

.section-compte h2 {
    font-size: 1.15rem;
    margin-bottom: .3rem;
}

/* Liste des postes : une ligne par ordinateur, le bouton « Détacher » à droite — et en dessous
   sur téléphone, plutôt que de comprimer le nom de machine. */
.postes {
    list-style: none;
    padding: 0;
    margin: .8rem 0 0;
}

.postes li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .7rem 0;
    border-top: 1px solid var(--bordure);
}

.postes li:last-child {
    border-bottom: 1px solid var(--bordure);
}

.poste-nom {
    font-weight: 600;
}

.bouton-danger {
    border-color: var(--alerte);
    color: var(--alerte);
}

.bouton-danger.bouton-principal,
.bouton-danger.bouton-principal:hover {
    background: var(--alerte);
    border-color: var(--alerte);
    color: var(--alerte-texte);
}
/* ---------- Page de présentation (accueil) ---------- */

.prix-badge {
    display: inline-block;
    margin: .4rem 0 0;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: var(--surface-appuyee);
    color: var(--accent);
    font-weight: 700;
}

.bloc-texte { margin-top: 2.5rem; max-width: 52rem; }
.bloc-texte.centre { text-align: center; margin-left: auto; margin-right: auto; }

.liste-points {
    margin: .7rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1rem;
}

.liste-points li {
    position: relative;
    padding-left: 1.4rem;
    color: var(--texte-doux);
}

.liste-points li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 700;
}

/* Section image + texte, alternée un rang sur deux. */
.presentation {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    margin-top: 3rem;
}

.presentation.inverse .presentation-visuel { order: 2; }

.presentation-visuel { margin: 0; }

.presentation-visuel img {
    width: 100%;
    height: auto;
    border-radius: var(--rayon);
    border: 1px solid var(--bordure);
    box-shadow: var(--ombre);
    background: var(--surface);
}

.presentation-texte h2 { margin-top: 0; }

/* Tarif mis en avant. */
.bloc-prix { text-align: center; margin-top: 3rem; }
.bloc-prix .actions { justify-content: center; }

.prix-montant {
    font-size: clamp(2rem, 6vw, 2.8rem);
    font-weight: 800;
    color: var(--accent);
    margin: .3rem 0;
}

.appel-final { margin-top: 3rem; text-align: center; }
.appel-final .actions { justify-content: center; }

@media (max-width: 52rem) {
    .presentation { grid-template-columns: 1fr; }
    .presentation.inverse .presentation-visuel { order: 0; }
}

/* ---------- Pages vitrines : surtitres, chiffres, listes à coches ---------- */

/* Petit libellé au-dessus d'un titre de section : il dit de quelle partie du logiciel on parle. */
.surtitre {
    margin: 0 0 .35rem;
    color: var(--accent);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.presentation-texte .surtitre + h2 { margin-top: 0; }

/* Rangée de chiffres clés. */
.chiffres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: 1rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.chiffre {
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
    box-shadow: var(--ombre);
}

.chiffre strong {
    display: block;
    color: var(--accent);
    font-size: clamp(2rem, 5vw, 2.6rem);
    font-weight: 800;
    line-height: 1.1;
}

.chiffre span {
    color: var(--texte-doux);
    font-size: .95rem;
}

/* Liste d'avantages, une coche par ligne. */
.liste-coches {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.liste-coches li {
    position: relative;
    margin: .6rem 0;
    padding-left: 1.8rem;
}

.liste-coches li::before {
    content: "\2713";
    position: absolute;
    top: .1rem;
    left: 0;
    display: grid;
    place-items: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: var(--etiquette-ok-fond);
    color: var(--succes);
    font-size: .72rem;
    font-weight: 800;
}

/* Étapes du démarrage dans « Mon compte » (cahier 10.1) : un numéro par étape, la même coche verte
   que .liste-coches pour la seule étape que le site connaît, le compte. Le site ne sait ni si le
   matériel est arrivé ni si l'application est installée : aucune étape n'est mise en avant. */
.etapes-demarrage {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: etape;
}

.etapes-demarrage li {
    position: relative;
    margin: .7rem 0;
    padding-left: 2.1rem;
    counter-increment: etape;
}

.etapes-demarrage li::before {
    content: counter(etape);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--bordure);
    border-radius: 50%;
    color: var(--texte-doux);
    font-size: .8rem;
    font-weight: 700;
}

.etapes-demarrage li.faite { color: var(--texte-doux); }

.etapes-demarrage li.faite::before {
    content: "\2713";
    border-color: transparent;
    background: var(--etiquette-ok-fond);
    color: var(--succes);
    font-weight: 800;
}

/* « Démarrer en 4 étapes » sur l'accueil, pour le visiteur non connecté : quatre cartes de même
   niveau, chacune avec son icône, son numéro, une ligne d'explication et son lien. Ce sont des
   gestes à faire ; l'usage, dessous, se lit en frise. */
.demarrage-accueil { text-align: center; }

.demarrage-accueil .discret { margin: 1.4rem 0 0; }

.cartes-demarrage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: 1rem;
    margin-top: 1.6rem;
}

.carte-demarrage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    box-shadow: none;
}

.carte-demarrage svg {
    width: 2.2rem;
    height: 2.2rem;
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.carte-demarrage .numero-etape {
    color: var(--texte-doux);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.carte-demarrage h3 { margin: 0; font-size: 1.02rem; }

.carte-demarrage p { margin: 0; color: var(--texte-doux); font-size: .92rem; }

/* Le lien en bas de carte (ou, ventes fermées, sa mention « bientôt »), aligné d'une carte à
   l'autre quelle que soit la longueur du texte. */
.carte-demarrage .lien-etape,
.carte-demarrage .mention-bientot { margin-top: auto; padding-top: .5rem; font-weight: 600; }

/* Sous les cartes, l'usage au quotidien, plus léger : une frise de quatre gestes numérotés sous un
   filet, sans fond de carte ni lien — ce sont des choses qu'on fera, pas des gestes à faire ici. */
.demarrage-accueil .usage-titre { margin: 2.6rem 0 0; font-size: 1.05rem; }

.frise-usage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: 1rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: usage;
    text-align: left;
}

.frise-usage li {
    padding-top: .6rem;
    border-top: 2px solid var(--bordure);
    color: var(--texte-doux);
    counter-increment: usage;
}

.frise-usage li::before {
    content: counter(usage) ". ";
    color: var(--accent);
    font-weight: 700;
}


/* Carte d'une fonctionnalité de la découpe : un filet d'accent pour les distinguer. */
.carte-accent { border-top: 3px solid var(--accent); }

.bloc-texte.centre .surtitre + h2 { margin-top: 0; }

/* Trois colonnes au plus : six cartes font deux rangées pleines. */
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }


/* Captures agrandissables : un lien vers l'image, que site.js ouvre en grand sur la page. */
.agrandir {
    display: block;
    cursor: zoom-in;
}

.agrandir img { transition: transform .2s ease, box-shadow .2s ease; }

.agrandir:hover img { transform: translateY(-2px); }

.visionneuse {
    max-width: min(96vw, 1440px);
    max-height: 94vh;
    padding: 0;
    border: 0;
    border-radius: var(--rayon);
    background: transparent;
    overflow: visible;
}

.visionneuse::backdrop { background: var(--voile); }

.visionneuse img {
    display: block;
    max-width: 100%;
    max-height: 88vh;
    margin: 0 auto;
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    cursor: zoom-out;
}

.visionneuse-fermer {
    display: block;
    margin: .8rem auto 0;
    min-height: var(--cible-tactile);
    padding: .5rem 1.4rem;
    border: 0;
    border-radius: 999px;
    background: var(--surface);
    color: var(--texte);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* Sommaire du matériel : une liste numérotée dont chaque ligne mène à sa section. */
.sommaire-materiel {
    display: grid;
    gap: .6rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.sommaire-materiel li {
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
    transition: border-color .15s ease, transform .15s ease;
}

.sommaire-materiel li > a,
.sommaire-materiel li.sans-lien {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .75rem 1rem;
    color: inherit;
    text-decoration: none;
}

.sommaire-materiel li:has(> a):hover {
    border-color: var(--accent);
    transform: translateX(3px);
}

.sommaire-numero {
    display: grid;
    flex: none;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-texte);
    font-weight: 700;
}

.sommaire-option { border-style: dashed; }

.sommaire-option .sommaire-numero {
    background: var(--surface-appuyee);
    color: var(--accent);
}

/* Page de texte suivi (À propos) : colonne de lecture, cartes sur toute la largeur. */
.colonne-lecture { max-width: 46rem; }

/* Deux colonnes au plus : quatre cartes font deux rangées pleines. */
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); }

/* Section « vitrine » (accueil, fonctionnalités) : le texte d'un côté, le visuel de l'autre, en
   alternance stricte d'une section à la suivante, l'un et l'autre centrés en hauteur dans leur
   colonne (retour de Nicolas, 2026-10-06). Sur un téléphone : le titre, le texte, puis le visuel. */
.vitrine {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: clamp(1.5rem, 4.5vw, 4rem);
    align-items: center;
    margin-top: 7rem;
}

.vitrine.inverse { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }

.vitrine.inverse .vitrine-texte { order: 2; }

.vitrine-texte h2 { margin-top: 0; }

.vitrine-visuel { margin: 0; }

.vitrine-visuel img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    background: var(--surface);
}

/* Gros plan recadré : montré à sa taille réelle, jamais agrandi (il deviendrait flou). */
.vitrine-visuel.naturel img {
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}

/* Un schéma dans une vitrine occupe sa colonne, sans les marges d'un schéma isolé. */
.vitrine-visuel .schema {
    max-width: none;
    margin: 0;
}

/* Grille de cartes qui prolonge une vitrine. */
.vitrine + .grille { margin-top: 2rem; }

@media (max-width: 52rem) {
    .vitrine,
    .vitrine.inverse {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 3rem;
    }

    .vitrine.inverse .vitrine-texte { order: 0; }

    .vitrine-visuel { margin-top: 0; }
}

/* Galerie à onglets (les thèmes) : les images se superposent et passent de l'une à l'autre en
   fondu ; site.js bascule la classe est-masque des éléments marqués « fondu ». */
.galerie-images { display: grid; }

.galerie-images > * { grid-area: 1 / 1; }

.galerie-images img { box-shadow: none; }

.fondu { transition: opacity .35s ease; }

.fondu.est-masque {
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .fondu { transition: none; }
}

/* Liste des tutoriels : des cartes avec vignette (une illustration de wwwroot/images/vignettes/,
   produite par scripts/visuels/generer-schemas-site.py), numéro, résumé, temps de lecture. */
.rubrique-tutoriels { margin-top: 1.8rem; }

.rubrique-tutoriels h2 { margin-bottom: .2rem; }

.rubrique-tutoriels-lecture {
    margin: 0;
    color: var(--texte-doux);
    font-size: .9rem;
}

.cartes-tutoriels {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
    gap: 1.2rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.carte-tutoriel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
    box-shadow: var(--ombre);
    color: inherit;
    text-decoration: none;
    transition: transform .15s ease, border-color .15s ease;
}

.carte-tutoriel:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
}

/* Les vignettes sont dessinées en 2:1 : à cette proportion, rien n'est rogné, quelle que soit la
   largeur de la carte. */
.carte-tutoriel-vignette {
    display: block;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    border-bottom: 1px solid var(--bordure);
    background: var(--surface-appuyee);
}

.carte-tutoriel-vignette img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carte-tutoriel-corps {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .45rem;
    padding: 1.1rem 1.2rem 1.2rem;
}

.carte-tutoriel-numero {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-texte);
    font-size: .9rem;
    font-weight: 700;
}

.carte-tutoriel-titre { font-size: 1.12rem; }

/* Résumé tronqué à trois lignes : les cartes d'une rangée gardent la même hauteur de texte. */
.carte-tutoriel-resume {
    display: -webkit-box;
    overflow: hidden;
    color: var(--texte-doux);
    font-size: .95rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.carte-tutoriel-pied {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: .6rem;
    color: var(--texte-doux);
    font-size: .88rem;
}

.carte-tutoriel-lire {
    color: var(--accent);
    font-weight: 600;
}

/* Pages vitrines (accueil, fonctionnalités : main.page-vitrine) : de l'air entre les sections, et
   des intertitres à la taille de ceux des vitrines — avec les apparitions au défilement, une
   section à la fois occupe l'écran. */
.page-vitrine > h2,
.page-vitrine > .bloc-texte,
.page-vitrine > .groupe,
.page-vitrine > section.encart { margin-top: 6rem; }

.page-vitrine > .groupe > :first-child { margin-top: 0; }

.page-vitrine > h2,
.page-vitrine > .groupe > h2,
.page-vitrine .bloc-texte h2,
.page-vitrine > .encart h2,
.page-vitrine .vitrine-texte h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }

.page-vitrine h2 + .grille { margin-top: 2rem; }

.page-vitrine .bloc-texte > p:not(.accroche),
.page-vitrine .vitrine-texte > p:not(.surtitre) {
    color: var(--texte-doux);
    font-size: clamp(1rem, 2.4vw, 1.08rem);
}

/* Accueil : accroche centrée, sans visuel à côté — la vidéo, juste en dessous, en tient lieu. */
.hero-centre {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding: 3rem 0 3.5rem;
    text-align: center;
}

.hero-centre > div { max-width: 48rem; }

.hero-centre h1 { font-size: clamp(2.1rem, 5.5vw, 3.4rem); }

.hero-centre .accroche {
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(1.05rem, 2.6vw, 1.22rem);
}

.hero-centre .actions { justify-content: center; }

/* ---------- Apparitions au défilement (pages de présentation) ----------
   Sur une page marquée main.avec-apparitions, chaque groupe (enfant direct de main) entre par le
   bas, en 0,6 s, quand il arrive dans la fenêtre, et s'efface vers le haut quand il
   en sort par le haut (site.js, apparitionsAuDefilement). La classe « apparitions » n'est
   posée que si le navigateur sait le faire et que le visiteur n'a pas demandé à réduire les animations : sans elle, tout s'affiche.
   :where() ramène ces sélecteurs à une spécificité minimale : les états est-visible et est-passe
   l'emportent toujours. */
.apparitions :where(.avec-apparitions > *) {
    opacity: 0;
    transform: translateY(1.1rem) scale(.985);
    transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1);
}

.apparitions .avec-apparitions > .est-visible {
    opacity: 1;
    transform: none;
}

.apparitions .avec-apparitions > .est-passe {
    opacity: 0;
    transform: translateY(-.8rem) scale(.985);
    transition-duration: .28s;
}

/* ---------- Schémas explicatifs ----------
   Fragments de Contenu/Schemas/ (scripts/visuels/generer-schemas-site.py), insérés dans les pages et les
   tutoriels : un SVG intégré à la page, habillé ici par classes — le générateur n'écrit aucune
   couleur. Sans script, le schéma s'affiche dans son état initial ; site.js ajoute les boutons et
   anime le passage d'un état à l'autre (data-etats, data-pos-<état>, data-pour). */
.schema {
    margin: 2rem auto;
    max-width: 46rem;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: clamp(1rem, 3vw, 1.6rem);
}

.schema-dessin {
    display: block;
    width: 100%;
    height: auto;
    /* Un schéma en hauteur (pose du martyr, comme dans l'assistant de l'application) tient à l'écran avec sa
       légende et ses boutons : sa hauteur est plafonnée, le dessin se centre dans la largeur (retour de Nicolas). */
    max-height: min(50vh, 24rem);
    overflow: visible;
}

/* La pose du martyr est en hauteur : son cadre se resserre aussi en largeur (retour de Nicolas). */
.schema[data-schema="martyr"] { max-width: 32rem; }

.schema-dessin text { font-family: inherit; }

/* Les commandes n'ont de sens qu'avec le script : sans lui, elles ne s'affichent pas. */
.schema-commandes { display: none; }

.js .schema-commandes {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

/* Bascule entre deux états : un sélecteur segmenté, comme les étapes de l'atelier. */
.js .schema-commandes[role="group"] {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 1.1rem;
    padding: .25rem;
    border-radius: 999px;
    background: var(--surface-appuyee);
}

.schema-choix {
    min-height: calc(var(--cible-tactile) - .5rem);
    padding: .45rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--texte-doux);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.schema-choix:hover { color: var(--texte); }

.schema-choix[aria-pressed="true"] {
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--ombre);
}

/* Étapes : précédent, pastilles numérotées, suivant. */
.js .schema-etapes {
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.1rem;
}

.schema-pastilles {
    display: flex;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.schema-pastille {
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid var(--bordure);
    border-radius: 50%;
    background: var(--surface);
    color: var(--texte-doux);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.schema-pastille[aria-current="step"] {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-texte);
}

.schema-pas {
    min-height: calc(var(--cible-tactile) - .4rem);
    padding: .45rem .9rem;
    border: 1px solid var(--bordure);
    border-radius: 999px;
    background: var(--surface);
    color: var(--texte);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.schema-pas-suivant {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-texte);
}

.schema-pas:disabled {
    opacity: .35;
    cursor: default;
}

.schema-legende {
    margin-top: 1rem;
    color: var(--texte-doux);
    text-align: center;
    text-wrap: pretty;
}

.schema-legende strong { color: var(--texte); }

.schema-texte[hidden] { display: none; }

/* Dans un tutoriel, le schéma ne prend pas le style des images (.doc img) ni des paragraphes. */
.doc .schema-legende { font-size: .95rem; }

/* Sur un téléphone, les pastilles laissent la place aux flèches, et les deux choix d'une bascule
   s'empilent en boutons de même largeur plutôt que de passer à la ligne dans une pilule. */
@media (max-width: 34rem) {
    .schema-pastilles { display: none; }

    .js .schema-commandes[role="group"] {
        width: 100%;
        border-radius: var(--rayon);
    }

    .schema-choix {
        flex: 1 1 100%;
        border-radius: calc(var(--rayon) - 4px);
    }
}

/* Formes du dessin. */
.sc-plaque { fill: var(--schema-plaque); }
.sc-grille { fill: none; stroke: var(--schema-grille); stroke-width: 1; }
.sc-hachure { stroke: var(--schema-perdu); stroke-width: 3; }
.sc-perdu { stroke: var(--schema-perdu); stroke-width: 1; }
.sc-gagne { fill: var(--schema-gagne); stroke: var(--succes); stroke-width: 1.2; stroke-dasharray: 4 4; }
.sc-cadre { fill: none; stroke: var(--texte-doux); stroke-width: 1.2; stroke-dasharray: 5 4; }
.sc-piece path { fill: var(--schema-piece); stroke: var(--accent); stroke-width: 1.6; }
.sc-piece-paire path { fill: var(--schema-piece-paire); }
.sc-element { fill: var(--schema-element); stroke: var(--succes); stroke-width: 1.6; }
.sc-coupe { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* Ponts de maintien : la plaque (semelle et chute, une même matière), la découpe — un vide où l'on
   voit le martyr, interrompu aux ponts — et le voile de matière qui les forme. */
.sc-matiere { fill: var(--schema-piece); stroke: var(--accent); stroke-width: 1.2; stroke-linejoin: round; }
.sc-saignee-dessus { fill: none; stroke: var(--schema-martyr-bord); stroke-width: 5; stroke-linecap: butt; stroke-linejoin: round; }
.sc-voile { fill: none; stroke: var(--ambre); stroke-width: 2; stroke-dasharray: 4 3; }
.sc-martyr { fill: var(--schema-martyr); stroke: var(--schema-martyr-bord); stroke-width: 1.2; }
.sc-zone { fill: none; stroke: var(--texte-doux); stroke-width: 1.2; stroke-dasharray: 6 5; }
.sc-crayon { stroke: var(--schema-crayon); stroke-width: 2.2; stroke-linecap: round; }
.sc-crayon-contour { fill: none; stroke: var(--schema-crayon); stroke-width: 1.4; stroke-dasharray: 2 3; }
.sc-origine { fill: var(--succes); stroke: var(--surface); stroke-width: 3; }
/* Origine temporaire : ambre, comme sa pastille dans l'application ; une origine seulement gardée
   (pas active) est un rond en pointillé de sa couleur. */
.sc-origine-temporaire { fill: var(--ambre); stroke: var(--surface); stroke-width: 3; }
.sc-origine-gardee { fill: var(--surface); stroke: var(--succes); stroke-width: 2.5; stroke-dasharray: 4 3; }
.sc-origine-temporaire-gardee { fill: var(--surface); stroke: var(--ambre); stroke-width: 2.5; stroke-dasharray: 4 3; }
.sc-numero circle { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; }
.sc-numero text { fill: var(--accent); font-size: 12px; font-weight: 700; }
.sc-croix { fill: none; stroke: var(--alerte); stroke-width: 2; }
.sc-croix-halo { fill: var(--surface); opacity: .6; }
.sc-plaque-coupe { fill: var(--schema-piece); stroke: var(--accent); stroke-width: 1.4; }
.sc-zero { stroke: var(--succes); stroke-width: 2; stroke-dasharray: 7 5; }
.sc-contact { fill: none; stroke: var(--succes); stroke-width: 2.5; }
.sc-lame { fill: var(--schema-lame); stroke: var(--texte-doux); stroke-width: 1.2; }
.sc-pince { fill: var(--schema-pince); }
.sc-cote path { fill: none; stroke: var(--texte-doux); stroke-width: 1; }
.sc-fleche line { stroke: var(--texte); stroke-width: 2; stroke-linecap: round; }
.sc-fleche path { fill: var(--texte); }
.sc-fleche-pont line { stroke: var(--ambre); }
.sc-fleche-pont path { fill: var(--ambre); }
.sc-fleche-douce line { stroke: var(--accent); }
.sc-fleche-douce path { fill: var(--accent); }

.sc-texte { fill: var(--texte-doux); font-size: 14px; }
.sc-texte-petit { font-size: 12px; }
.sc-texte-titre { fill: var(--texte); font-size: 14px; font-weight: 600; }
.sc-texte-ok { fill: var(--succes); font-size: 13px; font-weight: 600; }
.sc-texte-ambre { fill: var(--ambre); font-size: 13px; font-weight: 600; }
.sc-texte-garde { fill: var(--succes); font-size: 12px; opacity: .8; }
.sc-texte-garde-ambre { fill: var(--ambre); font-size: 12px; opacity: .8; }
.sc-texte-pont { fill: var(--ambre); font-weight: 700; }
.sc-texte-axe { fill: var(--texte); font-size: 15px; font-weight: 700; }

/* Pose du martyr, table vue de dessus : les mêmes dessins que l'assistant de l'application
   (generer-schemas-site.py, dessins_martyr). */
.sc-etiquette { fill: var(--texte-doux); font-size: 10.5px; font-weight: 600; letter-spacing: .03em; }
.sc-etiquette-martyr { fill: var(--schema-martyr-texte); letter-spacing: .06em; }
.sc-etiquette-forte { fill: var(--texte); font-weight: 650; }
.sc-etiquette-accent { fill: var(--accent); font-weight: 650; }
.sc-etiquette-douce { fill: var(--texte-doux); font-weight: 500; }
.sc-etiquette-ok { fill: var(--succes); font-weight: 650; }
.sc-table { fill: var(--surface-menu); stroke: var(--bordure); stroke-width: 1.5; }
.sc-point { fill: var(--texte-doux); fill-opacity: .3; }
.sc-martyr-ligne { stroke: var(--schema-martyr-bord); stroke-opacity: .45; stroke-width: 1.2; }
.sc-pointe-halo { fill: var(--accent); fill-opacity: .16; }
.sc-pointe { fill: var(--surface-menu); stroke: var(--accent); stroke-width: 2.4; }
.sc-pointe-coeur { fill: var(--accent); }
.sc-repere { fill: none; stroke: var(--texte); stroke-opacity: .75; stroke-width: 1.8; stroke-linecap: round; }
.sc-tete { fill: var(--accent); }
.sc-fleche-forte { fill: none; stroke: var(--accent); stroke-width: 3.2; stroke-linecap: round; }
.sc-surface { fill: var(--accent); fill-opacity: .05; }
.sc-route { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 5; }
.sc-pastille { fill: var(--accent); stroke: var(--surface-menu); stroke-width: 2.5; }
.sc-pastille-texte { fill: var(--accent-texte); font-size: 11px; font-weight: 650; }
.sc-pastille-douce { fill: var(--etiquette-ok-fond); }
.sc-pastille-douce-texte { fill: var(--accent); font-size: 10.5px; font-weight: 700; }
.sc-fantome { fill: none; stroke: var(--schema-martyr-bord); stroke-width: 1.5; stroke-dasharray: 5 4; }
.sc-bord { stroke: var(--texte); stroke-width: 2.6; stroke-linecap: round; }
.sc-vise { stroke: var(--accent); stroke-width: 1.8; stroke-dasharray: 6 5; }
.sc-arc-fond { fill: none; stroke: var(--surface-menu); stroke-width: 7; stroke-linecap: round; }
.sc-arc { fill: none; stroke: var(--accent); stroke-width: 3.2; stroke-linecap: round; }
.sc-coin-fixe { fill: var(--texte); stroke: var(--surface-menu); stroke-width: 2.5; }
.sc-coin-fixe-coeur { fill: var(--surface-menu); }
.sc-cote-trait { stroke: var(--texte-doux); stroke-width: 1.2; }
.sc-trace { fill: none; stroke: var(--schema-crayon); stroke-opacity: .8; stroke-width: 1.5; stroke-dasharray: 4 3; }
.sc-crayon-dessin { fill: var(--surface-menu); stroke: var(--schema-crayon); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-colle { fill: none; stroke: var(--texte-doux); stroke-width: 2; stroke-linecap: round; }
.sc-pression { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Animations : les formes glissent d'un état à l'autre, les éléments propres à un état
   apparaissent en fondu, ceux qui « arrivent » en grandissant. */
.sc-mobile { transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
.sc-etat { transition: opacity .45s ease; }
.sc-etat.est-masque { opacity: 0; }
.sc-apparait { transition: transform .55s cubic-bezier(.34, 1.56, .64, 1) .5s; }
.est-masque .sc-apparait { transform: scale(.3); transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
    .sc-mobile,
    .sc-etat,
    .sc-apparait { transition: none; }
}

/* ---------- Matière des surfaces posées ---------- */

/* Verre dépoli (section AE) : les surfaces posées floutent le décor de la page (`--verre`) et
   se bordent d'un liseré clair (`--bordure-carte`). Le menu « Plus » n'y figure pas : posé dans
   l'en-tête, qui floute déjà, son propre flou ne verrait rien. */
.carte,
.formulaire,
.chiffre,
.carte-tutoriel,
.schema,
.sommaire-materiel li,
.bouton:not(.bouton-principal),
.bouton-menu,
.pied {
    -webkit-backdrop-filter: var(--verre);
    backdrop-filter: var(--verre);
}

.carte,
.formulaire,
.chiffre,
.carte-tutoriel,
.schema,
.sommaire-materiel li,
.entete,
.pied {
    border-color: var(--bordure-carte);
}