/* FICHIER GENERE par outils/construire_pages.mjs depuis contenu/style.mjs.
   Ne pas modifier ici : il est reecrit a chaque construction. */

/* Poppins, SIL Open Font License 1.1, servie depuis notre propre domaine.
     Aucun appel a un service tiers : la politique de securite du site
     (connect-src 'self') l'interdit, et c'est voulu. Une police chargee chez
     Google serait une requete sortante a chaque visite, donc une faille dans la
     promesse "rien ne quitte votre machine" : la promesse doit valoir pour les
     ressources du site autant que pour le fichier du visiteur.
     Licence complete dans /polices/LICENCE_POPPINS.txt */
  @font-face {
    font-family: 'Poppins';
    src: url('/polices/poppins-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: 'Poppins';
    src: url('/polices/poppins-700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
  }


  /* Palette validee par Alex le 18/08. L'orange ne sert qu'a la conversion :
     un seul bouton orange par ecran, celui qui ramene a l'outil. */
  :root {
    --navy: #0A2D4D;
    --orange: #FF6A00;
    --encre: #0A2D4D;
    --papier: #ffffff;
    --gris: #7B8794;
    --trait: #E3E8ED;
    --accent: #0A2D4D;
    --gris-clair: #F6F8FA;
    --vert: #0E7C52;
    /* LES LAMPES DU FEU, et pourquoi elles ne sont pas les couleurs de charte.
       Les trois officielles n'ont pas la meme luminance : le vert #0E7C52 vaut
       0,151, l'orange 0,316, le rouge #9C3722 0,099. Cote a cote dans un
       boitier, l'orange ecrase les deux autres, et le feu cesse de se lire.
       Ces deux valeurs rapprochent les luminances sans quitter la famille, et
       elles ne vivent QUE dans la lampe : le texte d'etat, le filet de carte
       et la barre laterale gardent les couleurs officielles, qui portent le
       contraste necessaire a la lecture. L'orange, lui, ne bouge pas. */
    --lampe-verte: #16A44F;
    --lampe-rouge: #E23B2E;
    --feu-boitier: #102331;
    /* Poppins pour le logotype et les titres, arbitrage du master prompt §8.
       Le texte courant reste sur la pile systeme : elle est deja installee chez
       le visiteur, donc zero octet a telecharger et zero attente. */
    --pile-systeme: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--papier); color: var(--encre);
    font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  /* ------------------------------------------------------------- l'entete
     Version validee par Alex le 18/08.
     Les rubriques de navigation (Techniques de marquage, Marquage par objet,
     Questions frequentes) sont arretees mais PAS encore posees ici : aucune
     des pages qu'elles designent n'existe. Un lien de navigation qui ne mene
     nulle part est une page vide sous une autre forme, et la regle du projet
     est qu'aucune page ne nait vide. Elles arrivent avec les premiers guides.
     Ce qui est deja la, en revanche, c'est ce qui ne depend d'aucun contenu :
     le retour a l'outil et la preuve de confidentialite. */
  /* HAUTEURS RESSERREES LE 25/08 AU SOIR. Le produit demarrait a 170 px du
     haut de la fenetre : 48 px de marge de page, 34 px sous le filet
     d'entete, 24 px avant le bandeau, plus l'entete elle-meme. Sur un portable
     de 800 px de haut, la zone de depot arrivait au ras du pli. Un outil qu'on
     ne voit pas sans faire defiler n'est pas un outil, c'est une brochure. */
  .entete { display: flex; align-items: center; justify-content: space-between;
            gap: 16px; padding: 10px 0 14px; border-bottom: 1px solid var(--trait);
            margin-bottom: 22px; flex-wrap: wrap; }
  .lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .lockup svg { width: 36px; height: 36px; display: block; }
  .lockup .mot { font-family: 'Poppins', var(--pile-systeme); font-weight: 700;
                 font-size: 18px; line-height: 1.05; color: var(--navy);
                 letter-spacing: -0.025em; }
  .entete .droite { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .cta-entete { font-size: 14px; font-weight: 600; padding: 9px 15px; border-radius: 8px;
                border: 1.5px solid var(--orange); background: var(--orange); color: #fff;
                text-decoration: none; white-space: nowrap; }
  .cta-secondaire { display: inline-block; padding: 9px 15px; border-radius: 8px;
                    border: 1.5px solid var(--trait); color: var(--encre); font-weight: 600;
                    font-size: 14px; text-decoration: none; white-space: nowrap; }
  .cta-secondaire:hover { border-color: var(--gris); }
  .mesures-detail summary { cursor: pointer; color: var(--gris); font-size: 14px;
                            padding: 8px 0; font-weight: 600; }
  #couleurs h2, #verdict h2 { margin-top: 26px; }
  /* ------------------------------------------------- la largeur du site

     Deux largeurs, et la distinction n'est pas cosmetique.

     LE CADRE fait 1120 px : entete, pied de page, zone de depot, tableau de
     mesures, cartes de verdict. Ce sont des objets qu'on BALAIE du regard,
     et les etaler evite l'effet de colonne perdue au milieu d'un grand ecran.

     LA COLONNE DE LECTURE fait 68 caracteres : tout ce qui se LIT ligne apres
     ligne. Au-dela, l'oeil rate le retour a la ligne suivante ; c'est la seule
     regle de mise en page qui repose sur une mesure et non sur un gout.

     La premiere version appliquait 860 px aux deux, ce qui etait trop etroit
     pour le cadre et a peu pres juste pour le texte. */
  main { max-width: 1120px; margin: 0 auto; padding: 20px 24px 96px; }
  h1 { font-family: 'Poppins', var(--pile-systeme); font-weight: 700; font-size: 34px;
       line-height: 1.2; margin: 0 0 12px; letter-spacing: -0.02em; }
  h2 { font-family: 'Poppins', var(--pile-systeme); font-weight: 700; font-size: 17px;
       margin: 32px 0 12px; letter-spacing: -0.01em; }
  .accroche { color: var(--gris); margin: 0 0 8px; max-width: 62ch; font-size: 17px; }

  /* Le bandeau d'accueil. En dessous de 1000 px, une colonne : le discours
     puis l'action. Au-dessus, deux colonnes de meme poids, parce que la zone
     de depot etiree sur toute la largeur d'un grand ecran devenait un vide
     avec un titre au milieu. */
  /* LA VITRINE. Trois tuiles de meme largeur dans le cadre de 1120 px, donc
     357 px chacune gouttieres comprises. Les images font 700 px de large :
     c'est exactement le facteur deux qu'un ecran dense demande, et pas
     davantage, parce que ce sont les premieres images de la page la plus vue.
     En dessous de 760 px, une colonne : trois objets cote a cote sur un
     telephone ne montrent plus aucun logo. */
  /* LA VITRINE, A L'ECHELLE RELATIVE REELLE.
     Chaque image porte sa part de hauteur, calculee a la construction depuis
     les millimetres du lot. La feuille ne fixe QUE la hauteur : la largeur
     suit le rapport de l'image, donc elle ne peut pas mentir.
     Les objets sont alignes en BAS, comme poses sur une meme table. Centres,
     un carnet flotterait au milieu du vide a cote d'un t-shirt.
     La hauteur de reference est le seul reglage. Elle vaut ce qu'il faut pour
     que le bloc ne mange pas l'ecran juste sous la zone de depot. */
  .vitrine { --hauteur-vitrine: 330px;
             display: flex; align-items: flex-end; justify-content: center;
             flex-wrap: wrap; gap: 28px; margin: 0 0 30px; }
  .vitrine img { display: block; width: auto; border-radius: 10px;
                 height: calc(var(--hauteur-vitrine) * var(--part, 1));
                 background: var(--gris-clair); }
  .vitrine figcaption { flex-basis: 100%; color: var(--gris); font-size: 14px;
                        line-height: 1.5; margin: 4px 0 0; text-align: center; }
  @media (max-width: 900px) { .vitrine { --hauteur-vitrine: 250px; gap: 20px; } }
  @media (max-width: 620px) { .vitrine { --hauteur-vitrine: 180px; gap: 14px; } }

  .bandeau { display: grid; gap: 28px; align-items: center; margin: 4px 0 16px; }
  .bandeau h1 { margin-top: 0; }
  @media (min-width: 1000px) {
    .bandeau { grid-template-columns: 1fr 1fr; gap: 56px; margin: 10px 0 24px; }
    .bandeau h1 { font-size: 40px; }
  }
  #depot {
    border: 2px dashed var(--trait); border-radius: 12px; padding: 56px 24px;
    text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
  }
  #depot:hover, #depot.survol { border-color: var(--accent); background: var(--gris-clair); }
  #depot strong { display: block; font-size: 18px; margin-bottom: 6px; }
  /* §7.1 du brief du 20/08 : une fois l'analyse faite, la zone de depot montre
     le logo analyse plutot que de reclamer une action deja accomplie. */
  #depot.depot-analyse { border-style: solid; border-color: var(--trait);
    background: #fff; padding: 14px; }
  /* La legende de la vignette teintee. Elle n'est pas decorative : sans elle,
     on montrerait au visiteur un logo d'une couleur qui n'est pas la sienne. */
  .vignette-teinte { display: block; margin-top: 8px; color: #B02463;
    font-size: 13px; line-height: 1.45; }
  #depot .vignette { display: block; max-width: 150px; max-height: 150px;
    margin: 0 auto 10px; }
  #depot span { color: var(--gris); font-size: 14px; }
  input[type=file] { display: none; }
  .ligne { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--trait); }
  .intitule { flex: 0 0 210px; color: var(--gris); font-size: 14px; }
  .valeur { font-weight: 600; font-variant-numeric: tabular-nums; }
  .precision { color: var(--gris); font-size: 13px; }
  .pastille { display: inline-block; width: 13px; height: 13px; border-radius: 3px; margin-left: 3px;
              vertical-align: -1px; border: 1px solid rgba(0,0,0,.15); }
  .secondaire { color: var(--gris); font-weight: 400; font-size: 13px; }
  .technique .situation { margin: 8px 0 10px; font-size: 14.5px; line-height: 1.55; }
  .technique .couleurs-technique { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5;
    color: #5b6470; }
  /* Le bandeau du fichier, 20/08 : la premiere question est le fichier. */
  .etat-fichier.fichier-ok { border-left-color: #1d6b38; }
  .etat-fichier.fichier-refus { border-left-color: #9c3722; }
  /* Le ton partiel, ne du correctif du 20/08 : un fichier qui ouvre une moitie
     des techniques et pas l'autre n'est ni un feu vert ni un refus. */
  .etat-fichier.fichier-partiel { border-left-color: var(--orange); }
  .cta-fichier { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 600;
    padding: 9px 17px; border-radius: 8px; border: 1.5px solid var(--orange);
    background: var(--orange); color: #fff; text-decoration: none; }
  /* LA GRILLE DE PRODUITS, pivot du 20/08. Des cartes qui se lisent en une
     seconde : une silhouette, un nom, un verdict, une phrase. */
  .grille-produits { display: grid; gap: 14px; margin: 16px 0 18px;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
  .produit { border: 1px solid #e3e6ea; border-radius: 10px; padding: 16px 18px;
    background: #fff; display: grid; grid-template-columns: 46px minmax(0, 1fr);
    gap: 16px; align-items: start; }
  .produit-corps { display: grid; gap: 8px; min-width: 0; align-content: start; }
  .produit-image { color: var(--navy); opacity: .7; }
  .produit .silhouette { width: 46px; height: 46px; }
  .produit h3 { margin: 2px 0 0; font-size: 15.5px; line-height: 1.35; }
  .produit-verdict { justify-self: start; display: inline-block; font-size: 11.5px; font-weight: 700;
    letter-spacing: .03em; text-transform: uppercase; padding: 2px 8px;
    border-radius: 20px; background: var(--gris-clair); }
  .produit-phrase { margin: 0; font-size: 14.5px; line-height: 1.5; }
  .produit-autres { margin: 0; font-size: 12.5px; color: var(--gris); }
  /* Le gain de la vectorisation sur un produit qui dit deja oui. Il remplace
     le peage supprime : ce n'est plus une condition, c'est une ouverture. */
  .produit-gain { margin: 0; font-size: 13.5px; line-height: 1.45; color: #8f3d08; }
  .appel-grille { margin: 14px 0 2px; }
  /* STRUCTURE C DU BRIEF DU 21/08 : le verdict d'abord, seul, en gros. Le test
     du couloir se joue sur ces trois regles. */
  /* LA REPONSE, en haut de page. Le visiteur a lu « Votre logo est-il bon a
     marquer ? » et il a depose son fichier : la premiere ligne REPOND, elle ne
     mesure pas. Le compte de couleurs suit, en second, plus petit. */
  .verdict-tete { margin: 8px 0 14px; padding: 14px 18px; border-radius: 10px;
    border: 1px solid var(--trait); background: var(--gris-clair);
    border-left: 4px solid var(--gris); }
  .verdict-tete p { margin: 0; }
  .fait-reponse { font-family: 'Poppins', var(--pile-systeme); font-size: 21px;
    font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
  .fait-couleurs { margin-top: 8px !important; font-size: 15px; color: var(--gris); }
  .fait-couleurs b { color: var(--encre); }
  /* La couleur du filet suit celle du feu le plus favorable de la grille : la
     reponse et les cartes disent la meme chose, elles doivent se ressembler. */
  .reponse-oui { border-left-color: var(--vert); }
  .reponse-oui .fait-reponse { color: var(--vert); }
  .reponse-format { border-left-color: var(--orange); }
  .reponse-format .fait-reponse { color: #8f3d08; }
  .reponse-definition { border-left-color: var(--orange); }
  .reponse-definition .fait-reponse { color: #8f3d08; }
  .reponse-retouche { border-left-color: #9c3722; }
  .reponse-retouche .fait-reponse { color: #9c3722; }
  /* L'ECRAN D'UN EPS. La deuxieme part, « ce qu'on ne sait pas », est celle
     qu'un autre site supprimerait : elle se distingue donc, sans crier. */
  .eps-limite { margin: 0 0 20px; padding: 14px 18px; border: 1px solid var(--trait);
    border-left: 4px solid var(--gris); border-radius: 10px; background: #fff; }
  .eps-limite p { margin: 0 0 10px; font-size: 15px; line-height: 1.55; max-width: 68ch; }
  .eps-limite p:last-child { margin-bottom: 0; }
  /* LES CONSEILS, DANS LA REPONSE depuis le 25/08. Trois au maximum, en
     retrait sous le bloc d'etat : ils prolongent la reponse, ils ne la
     concurrencent pas. */
  .fait-conseils { margin: 0 0 18px; padding: 0 18px; }
  .fait-conseils p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55;
    max-width: 68ch; color: var(--gris); }
  .fait-conseils b { color: var(--encre); }
  /* Le volet des couleurs est monte juste sous la reponse : il se pose comme
     une ligne discrete, pas comme un bloc de plus. */
  #volet_couleurs { margin: 0 0 18px; }
  .verdict-action { margin: 0 0 22px; }
  .verdict-action .note { margin: 8px 0 0; }
  .cta-large { display: block; text-align: center; padding: 14px 20px; border-radius: 10px;
    background: var(--orange); color: #fff; font-weight: 700; font-size: 16px;
    text-decoration: none; }
  .verdict-action-ok p { margin: 0; padding: 12px 16px; border-radius: 10px;
    background: #eef5f0; border-left: 3px solid #1d6b38; }
  /* ------------------------------------------------------- LA GRILLE DE FEUX
     Lot 1 du 21/08, redessine le 24/08 sur la direction « piste 3 compacte »
     validee par Alex.

     CE QUI NE MARCHAIT PAS : « c'est tres texte, puis texte, puis texte, c'est
     peu visuel ». Sept lignes pleine largeur empilees, une pastille de 16 px
     chacune : la page se LISAIT, elle ne se balayait pas, alors que la grille
     doit se comprendre SANS LIRE.

     CE QUI CHANGE : deux cartes par ligne, un boitier de feu a trois lampes a
     gauche, un picto de technique dans le titre, et les objets frequents en
     puces illustrees. La hauteur suit le contenu et n'est JAMAIS egalisee. */
  .sprite-pictos { position: absolute; width: 0; height: 0; overflow: hidden; }
  .picto { fill: none; stroke: currentColor; stroke-width: 2.5;
    stroke-linejoin: round; stroke-linecap: round; }
  .grille-feux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px; align-items: start; margin: 4px 0 22px; }
  .feu { display: grid; grid-template-columns: 66px minmax(0, 1fr);
    border: 1px solid var(--trait); border-radius: 10px; overflow: hidden;
    background: #fff; align-self: start; }
  /* LA BARRE D'ETAT, 3 px, du cote gauche du rail. Elle etait posee en ombre
     interne dans la maquette : une bordure fait exactement la meme image, et le
     site ne porte aucune ombre. */
  .feu-rail { background: var(--gris-clair); border-right: 1px solid var(--trait);
    padding: 15px 9px; display: flex; justify-content: center; align-items: flex-start; }
  .feu-vert .feu-rail { border-left: 3px solid var(--vert); }
  .feu-orange .feu-rail { border-left: 3px solid var(--orange); }
  .feu-rouge .feu-rail { border-left: 3px solid #9c3722; }
  .feu-boitier { width: 46px; padding: 7px; background: var(--feu-boitier);
    border-radius: 20px; display: flex; flex-direction: column; gap: 6px;
    align-items: center; }
  /* Les lampes eteintes gardent leur teinte a tres faible opacite : neutres,
     elles cesseraient de se lire comme un feu. */
  .feu-lampe { width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .13); }
  .lampe-rouge { background: rgba(226, 59, 46, .17); }
  .lampe-orange { background: rgba(255, 106, 0, .16); }
  .lampe-vert { background: rgba(22, 164, 79, .17); }
  /* LA SEULE LUEUR DU SITE, et elle est autorisee par le brief du 24/08 : une
     diffusion de 3 px a 10 % d'opacite sur la lampe allumee. Ce n'est pas une
     elevation, c'est ce qui distingue une lampe allumee d'une pastille. */
  .lampe-rouge.allumee { background: var(--lampe-rouge);
    box-shadow: 0 0 0 3px rgba(226, 59, 46, .10); }
  .lampe-orange.allumee { background: var(--orange);
    box-shadow: 0 0 0 3px rgba(255, 106, 0, .10); }
  .lampe-vert.allumee { background: var(--lampe-verte);
    box-shadow: 0 0 0 3px rgba(22, 164, 79, .10); }
  .feu-corps { padding: 15px 16px 16px; display: flex; flex-direction: column;
    gap: 8px; min-width: 0; }
  .feu-titre { display: flex; align-items: center; gap: 10px; }
  .feu-picto { width: 38px; height: 38px; border: 1px solid var(--trait);
    border-radius: 8px; background: var(--gris-clair); display: grid;
    place-items: center; color: rgba(10, 45, 77, .72); flex: 0 0 auto; }
  .picto-technique { width: 34px; height: 34px; }
  .feu-rang { display: block; font-family: 'Poppins', var(--pile-systeme);
    font-size: 10.5px; color: var(--gris); font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; line-height: 1.1; margin-bottom: 2px; }
  .feu h3 { margin: 0; font-size: 20px; line-height: 1.05; letter-spacing: -.025em; }
  /* L'ETAT EST LE VERDICT DE LA CARTE, donc il se lit. Il etait en capitales de
     11,5 px colle au titre : c'etait la charte des etiquettes appliquee a ce qui
     n'en est pas une. Les vraies etiquettes de la carte, le rang et « objets
     frequents », gardent les capitales. */
  .feu-etat { margin: 0; font-family: 'Poppins', var(--pile-systeme);
    font-size: 15.5px; font-weight: 700; line-height: 1.15; }
  .feu-vert .feu-etat { color: var(--vert); }
  .feu-orange .feu-etat { color: #8f3d08; }
  .feu-rouge .feu-etat { color: #9c3722; }
  .feu-definition { margin: 0; font-size: 14px; line-height: 1.45; }
  .feu-raison { margin: 0; font-size: 14px; line-height: 1.45; color: var(--gris); }
  /* LES OBJETS FREQUENTS. C'est la traduction de la technique, et le picto la
     rend balayable. Il reste PETIT : sa fonction n'est pas de faire grossir la
     carte. */
  .feu-produits { padding-top: 8px; border-top: 1px solid var(--trait); }
  .feu-produits-titre { margin: 0 0 6px; font-family: 'Poppins', var(--pile-systeme);
    font-size: 10.5px; color: var(--gris); font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; }
  .feu-objets { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0;
    list-style: none; }
  .feu-objet { display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid var(--trait); border-radius: 999px; padding: 4px 8px 4px 6px;
    font-size: 12.5px; line-height: 1; background: #fff; }
  .picto-objet { width: 15px; height: 15px; color: rgba(10, 45, 77, .55);
    flex: 0 0 auto; }
  /* LE BOUTON DE CONVERSION, plein, arbitrage Alex du 24/08. En contour, il se
     lisait comme secondaire alors que c'est LA conversion du site. C'est la
     meme action sur les trois cartes oranges, pas trois actions qui se
     disputent l'ecran, et le bandeau orange du bas s'efface quand elles sont
     la. */
  .feu-action { align-self: flex-start; margin: 2px 0 0; padding: 10px 18px;
    border-radius: 8px; border: 1.5px solid var(--orange); background: var(--orange);
    color: #fff; font-weight: 600; font-size: 14.5px; text-decoration: none; }
  .feu-action:hover { background: #e85f00; border-color: #e85f00; }
  .feu-sortie { margin: 0; font-size: 14px; line-height: 1.5; }
  /* LE BRIEF DU GRAPHISTE, sous un rouge. Le site ecrit ce que le visiteur ne
     saurait pas demander, et le bouton le lui met dans le presse-papier. */
  .feu-brief { margin: 2px 0 0; padding: 10px 12px; border-radius: 10px;
    border: 1px solid rgba(156, 55, 34, .25); }
  .feu-brief-titre { font-family: 'Poppins', var(--pile-systeme); font-size: 11.5px;
    text-transform: uppercase; letter-spacing: .03em; font-weight: 700;
    color: #9c3722; }
  .feu-brief p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.5; }
  .feu-brief p:last-child { margin-bottom: 0; }
  .feu-brief .note { color: var(--gris); }
  /* La couleur est explicite : la regle generale des boutons pose du texte
     blanc sur fond navy, et un bouton clair qui en herite est invisible. Celui
     ci est navy plein, comme les telechargements : copier n'est pas convertir,
     et l'orange resterait pris pour un second appel a l'action. */
  .feu-copier { margin-top: 4px; padding: 9px 12px; border-radius: 8px;
    border: 1.5px solid var(--navy); background: var(--navy); color: #fff;
    font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
  .feu-copier:hover { background: #08243d; border-color: #08243d; }
  @media (max-width: 900px) {
    .grille-feux { grid-template-columns: 1fr; }
  }
  @media (max-width: 520px) {
    .feu { grid-template-columns: 60px minmax(0, 1fr); }
    .feu-corps { padding: 14px 13px; }
    .feu h3 { font-size: 19px; }
    .feu-action, .feu-copier { width: 100%; text-align: center; }
  }
  /* LA RESERVE, dite UNE fois sous la grille. Repetee dans les sept cartes,
     elle deviendrait du bruit qu'on saute, et c'est justement la phrase qui
     doit rester lisible : nous lisons un fichier, pas une machine. */
  .grille-reserve { margin: -14px 0 22px; font-size: 13px; line-height: 1.5;
    color: var(--gris); max-width: 68ch; }
  /* Les points d'attention : ce qui change la lecture de TOUTES les lignes. */
  .points-attention { margin: 0 0 22px; }
  .points-attention h2 { font-size: 18px; margin: 0 0 8px; }
  .points-attention ul { margin: 0; padding-left: 20px; }
  .points-attention li { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; }
  /* Les trois groupes de C3. Melangees, les cartes sont un inventaire. */
  .groupe-titre { margin: 22px 0 10px; font-size: 15px; letter-spacing: .01em; }
  .groupe-passe { color: #12522a; }
  .groupe-vectoriel { color: #8f3d08; }
  .groupe-coince { color: #9c3722; }
  /* C4 : la suite, pour le visiteur le plus chaud du parcours. */
  .et-maintenant { margin-top: 26px; }
  .et-maintenant h2 { margin: 0 0 6px; font-size: 19px; }
  .suite-champs { display: grid; gap: 8px; margin: 14px 0 10px; max-width: 460px; }
  .suite-champs label { font-size: 13.5px; color: var(--gris); }
  .suite-champs input { padding: 10px 12px; border: 1px solid var(--trait);
    border-radius: 8px; font-size: 15px; font-family: inherit; }
  .suite-champs button { padding: 11px 18px; border-radius: 8px; border: 0;
    background: var(--navy); color: #fff; font-weight: 600; font-size: 15px;
    cursor: pointer; justify-self: start; font-family: inherit; }
  /* §7 du lot 1 : l'exemple, c'est la grille de feux et rien d'autre. Une
     demi-hauteur d'ecran, compris sans lire. */
  /* C5 a C7 : la preuve se replie, elle ne barre plus la route. */
  .volet { border-top: 1px solid var(--trait); margin-top: 18px; padding-top: 12px; }
  .volet > summary { cursor: pointer; font-weight: 600; font-size: 15.5px;
    color: var(--navy); list-style: none; }
  .volet > summary::-webkit-details-marker { display: none; }
  .volet > summary::before { content: '▸ '; color: var(--gris); }
  .volet[open] > summary::before { content: '▾ '; }
  .produit-oui { border-left: 3px solid #1d6b38; }
  .produit-oui .produit-verdict { color: #12522a; background: #e8f3ec; }
  .produit-si { border-left: 3px solid var(--orange); }
  .produit-si .produit-verdict { color: #8f3d08; background: #fdf0e6; }
  /* §5 du brief du 20/08 : « techniquement, oui » n'est pas un oui franc. */
  .produit-reserve { border-left-color: #b07a1a; }
  .produit-reserve .produit-verdict { color: #7a5310; background: #fbf3e2; }
  .produit-non { border-left: 3px solid #9c3722; background: #fcfaf9; }
  .produit-non .produit-verdict { color: #9c3722; background: #f8ebe8; }
  .produit-non .produit-image { opacity: .3; }
  /* La vue produit, 20/08 : le menu deroulant et la carte du produit choisi. */
  .choix-produit { margin: 14px 0 16px; display: flex; gap: 14px; flex-wrap: wrap;
    align-items: flex-end; }
  .choix-produit label { display: block; font-weight: 600; font-size: 14px;
    margin: 0 0 6px; }
  .choix-produit select { font: inherit; font-size: 15px; padding: 9px 12px;
    border: 1px solid #c9ced6; border-radius: 8px; background: #fff; min-width: 260px;
    max-width: 100%; }
  .produit-verdict { border: 1px solid #e3e6ea; border-radius: 10px;
    padding: 16px 18px; margin: 0 0 16px; background: #fff; }
  .produit-verdict h3 { margin: 0 0 10px; font-size: 17px; }
  .produit-techniques { list-style: none; padding: 0; margin: 0; display: grid;
    gap: 12px; }
  .produit-techniques li { font-size: 15px; line-height: 1.55; }
  .produit-techniques .couleurs-technique { display: block; font-size: 13px;
    color: #5b6470; margin-top: 2px; }
  .produit-techniques .note-produit { color: #5b6470; font-weight: 400; }
  .produit-techniques .ligne-ok { color: #1d6b38; font-weight: 600; }
  .produit-techniques .ligne-ko { color: #9c3722; font-weight: 600; }
  .par-technique { margin: 6px 0 14px; }
  .par-technique > summary { cursor: pointer; color: var(--gris); font-size: 14px;
    margin-bottom: 10px; }
  .sources-verdict h4 { margin: 14px 0 4px; font-size: 13.5px; }
  .minimums .note-calcul { margin: 8px 0 0; font-size: 12.5px; color: var(--gris);
    line-height: 1.5; }
  .minimums { margin: 0 0 10px; }
  .minimums summary { cursor: pointer; color: var(--gris); font-size: 13px; }
  .minimums table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12.5px; }
  .minimums th { text-align: left; font-weight: 600; color: var(--gris); font-size: 11.5px;
                 text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px 4px 0;
                 border-bottom: 1px solid var(--trait); }
  .minimums td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--trait);
                 vertical-align: top; }
  .minimums td.mm { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .minimums td.date, .minimums td.tient { color: var(--gris); white-space: nowrap; }
  .minimums tr.ne-tient-pas td.mm, .minimums tr.ne-tient-pas td.tient { color: #b23b32; }
  .minimums a { color: inherit; }
  #largeur label { display: inline-block; color: var(--gris); font-size: 14px; margin-right: 10px; }
  #largeur input { width: 110px; padding: 9px 12px; font: inherit; font-size: 16px;
                   border: 1px solid var(--trait); border-radius: 6px; background: #fff; }
  #largeur .unite { margin-left: 8px; color: var(--gris); font-size: 14px; }
  /* UNE LIGNE PAR POINT depuis le 24/08. Le fait reste en avant, la mecanique
     passe en gris derriere lui : c'est la meme hierarchie qu'avant, sur une
     ligne au lieu de trois blocs. */
  ul.conseils { list-style: none; padding: 0; margin: 12px 0 0; }
  .conseil { border-left: 3px solid var(--trait); padding: 2px 0 2px 16px;
    margin: 0 0 14px; font-size: 15px; line-height: 1.55; }
  .conseil .mecanique { color: var(--gris); }
  .palette { list-style: none; padding: 0; margin: 12px 0 0; }
  .teinte { display: flex; align-items: center; gap: 12px; padding: 6px 0;
            border-bottom: 1px solid var(--trait); }
  .teinte .pastille { width: 22px; height: 22px; margin-left: 0; flex: 0 0 22px; }
  .teinte .hex { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px;
                 font-weight: 600; letter-spacing: .02em; user-select: all; }
  .teinte .rvb { color: var(--gris); font-size: 13.5px; font-variant-numeric: tabular-nums;
                 user-select: all; }
  .teinte .part { margin-left: auto; color: var(--gris); font-size: 13px;
                  font-variant-numeric: tabular-nums; }
  @media (max-width: 520px) {
    .teinte { flex-wrap: wrap; gap: 8px 10px; }
    .teinte .part { margin-left: 0; flex-basis: 100%; }
  }
  .preuves { margin: 10px 0 0; }
  .preuves summary { cursor: pointer; color: var(--gris); font-size: 14px; padding: 6px 0; }
  .preuves > *:not(summary) { margin-left: 2px; }
  .note { color: var(--gris); font-size: 13.5px; margin: 10px 0; }
  .gris { background: var(--gris-clair); border-left: 3px solid var(--trait); padding: 14px 16px;
          color: var(--gris); font-size: 14px; border-radius: 0 6px 6px 0; }
  .techniques { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .techniques li { font-size: 13px; color: var(--gris); background: var(--gris-clair);
                   border: 1px solid var(--trait); border-radius: 999px; padding: 4px 12px; }
  #apercu { margin-top: 14px; border: 1px solid var(--trait); border-radius: 8px; padding: 12px;
            background: repeating-conic-gradient(#f3f4f6 0% 25%, #ffffff 0% 50%) 50% / 16px 16px; }
  #apercu svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }
  #telechargements { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

  /* L'attribut hidden ne resiste pas a une regle display, et le navigateur ne
     previent pas. En production, le 19/08 : les trois boutons de
     telechargement etaient AFFICHES avant tout depot de fichier, parce que
     « #telechargements { display: flex } » ecrasait le hidden du HTML. On
     proposait de telecharger un fichier qui n'existait pas.
     La regle ci-dessous met fin a la classe entiere de ce defaut, pour tous
     les blocs du site et pas seulement celui-la. */
  [hidden] { display: none !important; }

  /* Le contenu sous l'outil. Colonne de lecture, comme partout ailleurs. */
  .explication { margin-top: 56px; border-top: 1px solid var(--trait); padding-top: 8px; }
  .explication h2, .explication p, .explication ul, .explication ol { max-width: 68ch; }
  .explication h3 { font-family: 'Poppins', var(--pile-systeme); font-weight: 700;
                    font-size: 15px; margin: 20px 0 6px; max-width: 68ch; }
  .explication li { margin-bottom: 8px; }

  /* Les avertissements. Ils ont le poids de ce qu'ils disent : un fichier
     trop petit produira un marquage rate, ce n'est pas une note de bas de
     page. Le remede est en gras parce que c'est la seule ligne qui demande
     une action au visiteur. */
  .alerte { border-left: 4px solid var(--orange); background: #FFF7F0;
            border-radius: 0 8px 8px 0; padding: 14px 18px; margin: 22px 0;
            max-width: 68ch; }
  .alerte-titre { font-family: 'Poppins', var(--pile-systeme); font-weight: 700;
                  font-size: 16px; margin: 0 0 8px; }
  .alerte p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; }
  .alerte p:last-child { margin-bottom: 0; }
  .alerte-remede { font-weight: 600; }
  .alerte-notable { border-left-color: #C9A227; background: #FFFBF0; }

  /* Un apercu vide n'est pas un apercu : c'est un cadre a damier au milieu de
     la page. Il ne se montre que quand il a quelque chose a montrer. */
  #apercu:empty { display: none; }
  button { font: inherit; font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 8px;
           border: 1.5px solid var(--navy); background: var(--navy); color: #fff; cursor: pointer; }
  button.second { background: #fff; color: var(--encre); }
  button.tertiaire { background: #fff; color: var(--gris); border-color: var(--trait); font-weight: 500; }
  #travail { margin-top: 20px; color: var(--gris); font-size: 14px; }
  #erreur { margin-top: 20px; color: #b42318; background: #fef3f2; border: 1px solid #fecdca;
            padding: 12px 14px; border-radius: 8px; font-size: 14px; }
  footer { border-top: 1px solid var(--trait); margin-top: 56px; padding-top: 20px;
           color: var(--gris); font-size: 13px; }

/* ------------------------------------------------------ pages de contenu */

/* Meme doctrine sur les pages de contenu : le cadre est large, la colonne de
   lecture ne l'est pas. Les tableaux, eux, debordent volontairement de la
   colonne, parce qu'un tableau se balaie et ne se lit pas ligne a ligne. */
.page-contenu { max-width: 1120px; margin: 0 auto; padding: 0 24px 90px; }
.page-contenu > p,
.page-contenu > ul,
.page-contenu > ol,
.page-contenu > h2,
.page-contenu > h3 { max-width: 68ch; }
.page-contenu > h1 { max-width: 24ch; }
.page-contenu h1 { font-family: 'Poppins', var(--pile-systeme); font-weight: 700;
  font-size: 34px; line-height: 1.18; margin: 26px 0 14px; letter-spacing: -0.02em; }
.page-contenu .chapo { font-size: 18px; color: var(--texte); margin: 0 0 30px; line-height: 1.6; }
.page-contenu h2 { font-family: 'Poppins', var(--pile-systeme); font-weight: 700;
  font-size: 22px; margin: 40px 0 12px; letter-spacing: -0.015em; }
.page-contenu h3 { font-family: 'Poppins', var(--pile-systeme); font-weight: 700;
  font-size: 17px; margin: 26px 0 8px; }
.page-contenu p { margin: 0 0 14px; }
.page-contenu ul { margin: 0 0 16px; padding-left: 22px; }
.page-contenu li { margin-bottom: 7px; }
.page-contenu a { color: var(--navy); font-weight: 500; }
.page-contenu code { background: var(--gris-clair); border: 1px solid var(--trait);
  border-radius: 5px; padding: 1px 6px; font-size: 13.5px; }
.page-contenu table { width: 100%; border-collapse: collapse; margin: 18px 0 24px; font-size: 14.5px; }
.page-contenu th, .page-contenu td { padding: 10px 12px; text-align: left;
  border-bottom: 1px solid var(--trait); vertical-align: top; }
.page-contenu th { background: var(--gris-clair); font-family: 'Poppins', var(--pile-systeme);
  font-weight: 600; color: var(--navy); font-size: 13.5px; }
.fil { font-size: 13px; color: var(--gris); margin: 0 0 4px; }
.fil a { color: var(--gris); text-decoration: none; }
.fil a:hover { color: var(--navy); }
.encadre { background: var(--gris-clair); border: 1px solid var(--trait);
  border-left: 3px solid var(--navy); border-radius: 0 8px 8px 0; padding: 16px 18px; margin: 22px 0; }
.encadre p:last-child { margin-bottom: 0; }
.encadre b { font-family: 'Poppins', var(--pile-systeme); font-weight: 600; color: var(--navy); }
.preuve { background: #F0F7F3; border-color: #C6E3D4; border-left-color: var(--vert); }
.preuve b { color: #0B5C3D; }
.appel { text-align: center; margin: 40px 0 10px; }
.appel a { display: inline-block; font-family: 'Poppins', var(--pile-systeme); font-weight: 600;
  font-size: 15px; padding: 13px 26px; border-radius: 9px; background: var(--orange);
  color: #fff; text-decoration: none; }

/* ----------------------------------------------- navigation et pied commun */

.nav-site { display: flex; align-items: center; gap: 18px; font-size: 14px;
            font-weight: 500; flex-wrap: wrap; }
.nav-site a { color: var(--texte); text-decoration: none; white-space: nowrap; }
.nav-site a:hover, .nav-site a[aria-current] { color: var(--navy); }
/* LA PILULE DE VECTORISATION, arbitrage Alex du 25/08 au soir. Elle detache
   la vectorisation des deux rubriques de contenu sans inventer de couleur :
   c'est le niveau « secondaire » de la charte, navy sur blanc. L'orange reste
   ce qu'il est depuis le 18/08, un seul par ecran, et il est ailleurs.
   Le selecteur porte .nav-site parce que la regle .nav-site a impose deja
   une couleur : une regle a un seul point ne la battrait pas. */
.nav-site a.nav-action { padding: 7px 13px; border-radius: 6px; font-weight: 600;
                         border: 1.5px solid var(--trait); color: var(--navy); }
.nav-site a.nav-action:hover { border-color: var(--gris); }

/* L'ENTETE SUR UN PORTABLE DE 1024, mesure du 25/08 au soir. Elle se cassait
   deja en deux lignes AVANT ce tour d'entete, a 135 px, et personne ne l'avait
   vu : le controle de hauteur ne mesure qu'a 1280. Les elements demandent
   1017 px pour un cadre qui n'en offre que 976 a cette largeur. On resserre
   les gouttieres et les boutons plutot que de couper un libelle, et le
   controle mesure desormais les deux largeurs. */
/* L'ENTETE SE RESSERRE EN CONTINU, ET PLUS PAR PALIER.
   Deuxieme tentative, et la premiere merite d'etre racontee.

   J'avais pose un palier a 1100 px, calcule sur une mesure prise dans un
   conteneur Linux. Il tenait la. Il debordait sur la machine d'Alex, a 114 px
   au lieu de 67, parce que la pile systeme n'est pas la meme police d'un
   systeme a l'autre : le texte de la navigation et des boutons, qui fait
   l'essentiel de la largeur, n'a pas la meme chasse sous San Francisco et
   sous une police de substitution. J'avais mesure mon instrument, pas
   l'objet. Le harnais, lui, mesurait l'objet, et il a dit non.

   D'ou le changement de methode. Un palier suppose qu'on connaisse la largeur
   du texte, ce qui est faux d'un systeme a l'autre. Une interpolation, non :
   elle rend de la place proportionnellement a l'ecran, sans jamais supposer
   de combien on a besoin. Les bornes hautes sont les valeurs de la charte,
   les bornes basses sont le plancher de lisibilite. */
@media (max-width: 1180px) {
  .entete { gap: clamp(7px, 1vw, 16px); }
  .entete .droite { gap: clamp(7px, 1vw, 14px); }
  .nav-site { gap: clamp(8px, 1.15vw, 18px); font-size: clamp(12px, 1.02vw, 14px); }
  .nav-site a.nav-action { padding: clamp(5px, .55vw, 7px) clamp(7px, .95vw, 13px); }
  .cta-entete, .cta-secondaire { font-size: clamp(12px, 1.02vw, 14px);
                                 padding: clamp(7px, .7vw, 9px) clamp(8px, 1.1vw, 15px); }
  .lockup { gap: 8px; }
  .lockup svg { width: 30px; height: 30px; }
  .lockup .mot { font-size: 16px; }
}
.pied-site { border-top: 1px solid var(--trait); margin-top: 60px; padding: 30px 20px 40px;
  background: var(--gris-clair); }
.pied-site .colonnes { max-width: 1120px; margin: 0 auto; display: flex; gap: 40px; flex-wrap: wrap; }
.pied-site b { display: block; font-family: 'Poppins', var(--pile-systeme); font-weight: 600;
  color: var(--navy); font-size: 13px; margin-bottom: 8px; }
.pied-site a { display: block; color: var(--gris); text-decoration: none; font-size: 13px; padding: 3px 0; }
.pied-site a:hover { color: var(--navy); }
.pied-site .mention { max-width: 1120px; margin: 26px auto 0; font-size: 12.5px; color: var(--gris); }

@media (max-width: 700px) {
  .page-contenu h1 { font-size: 27px; }
  .pied-site .colonnes { gap: 26px; }
}

/* Bloc « A lire aussi », genere en pied de chaque question. */
.voisines { list-style: none; padding: 0; margin: 14px 0 0; }
.voisines li { margin: 0 0 9px; }
.voisines a { font-weight: 600; }

/* ------------------------------------------------- la couche verdict

   Trois etats, TROIS TRAITEMENTS DE MEME POIDS. L'inconnu n'est ni grise ni
   relegue : c'est un etat a part entiere, et le plus frequent au lancement.
   Le griser reviendrait a s'excuser de ne pas savoir, alors que le dire est
   precisement ce qui distingue ce site. */
.techniques-verdict { display: grid; gap: 14px; margin: 18px 0 6px; }
@media (min-width: 900px) {
  /* Sept techniques en colonne unique font defiler pour rien. Deux colonnes
     des qu'il y a la place : on les COMPARE, on ne les lit pas a la suite. */
  .techniques-verdict { grid-template-columns: 1fr 1fr; }
  div.encadre.verdict-inconnu { grid-column: 1 / -1; }
}
.technique { border: 1px solid #e3e6ea; border-radius: 10px; padding: 14px 16px; }
.technique h3 { margin: 0 0 8px; font-size: 16px; display: flex;
  align-items: baseline; justify-content: space-between; gap: 12px; }
.technique .etiquette { font-size: 13px; font-weight: 600; white-space: nowrap; }
.technique .base { margin: 0 0 8px; font-size: 14px; color: #5b6470; }
.technique .criteres { list-style: none; padding: 0; margin: 0;
  font-size: 14px; line-height: 1.55; }
.technique .criteres li { padding-left: 16px; position: relative; }
.technique .criteres li::before { position: absolute; left: 0; }

.verdict-favorable { border-color: #bcd9c4; }
.verdict-favorable > h3 .etiquette { color: #1d6b38; }
li.verdict-favorable::before { content: "+"; color: #1d6b38; }

.verdict-defavorable { border-color: #e6c3bc; }
.verdict-defavorable > h3 .etiquette { color: #9c3722; }
li.verdict-defavorable::before { content: "-"; color: #9c3722; }

/* Ni rouge ni vert : une troisieme couleur, franche, qui ne suggere ni un
   probleme ni une permission. */
.verdict-inconnu { border-color: #cdd4dd; }
.verdict-inconnu > h3 .etiquette { color: #44536b; }
li.verdict-inconnu::before { content: "?"; color: #44536b; }
div.encadre.verdict-inconnu { background: #f4f6f9; }

#verdict .resume { font-size: 15px; margin: 10px 0 0; }
#verdict .note { font-size: 13px; color: #5b6470; margin-top: 14px; }

/* ------------------------------------------------------------------ SIMULATION
   La page /voir-mon-logo. Aucune couleur nouvelle, aucun rayon nouveau : tout
   vient des variables posees en haut de cette feuille. Un ecran de plus ne
   justifie pas une palette de plus.

   PAS DE BOUTON ORANGE ICI. L'entete en porte deja un, celui qui ramene a
   l'outil, et la charte n'en autorise qu'un par ecran. Les commandes du
   simulateur sont des reglages, pas des conversions. */

.mention-simulation {
  border-left: 4px solid var(--orange);
  background: #FDF0E6;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14.5px;
  line-height: 1.5;
  margin: 14px 0 0;
  max-width: 62ch;
}
.mention-simulation a { color: var(--encre); }

/* LE PRODUIT DOIT SE VOIR SANS FAIRE DEFILER, arbitrage Alex du 25/08.
   Mesure sur un ecran de 860 px de haut : la scene commencait a 528 px, il
   n'en restait qu'un tiers. Quatre gains cumules, aucun sur le fond :
   le titre tient sur une ligne parce que sa colonne s'elargit, les deux
   paragraphes gagnent la meme largeur donc une ligne chacun, et les marges
   verticales du bandeau se resserrent. */
body[data-mode="simulation"] .wrap { padding-top: 18px; }
body[data-mode="simulation"] .bandeau { margin: 10px 0 16px; }
@media (min-width: 1000px) {
  body[data-mode="simulation"] .bandeau { grid-template-columns: 1.45fr 1fr; gap: 40px; }
}
body[data-mode="simulation"] .accroche,
body[data-mode="simulation"] .mention-simulation { max-width: none; }
body[data-mode="simulation"] #depot { padding: 40px 24px; }

.simu { display: grid; gap: 24px; align-items: start; margin: 0 0 32px; }
@media (min-width: 900px) {
  .simu { grid-template-columns: minmax(0, 1fr) 340px; }
  /* L'objet suit le regard. Le panneau de droite est plus haut que l'image,
     et sans ca on fait defiler les mesures en perdant de vue ce qu'elles
     mesurent. */
  .simu-scene { position: sticky; top: 16px; }
}
.simu-attente { color: var(--gris); font-size: 14px; margin: 0; }

.simu-scene {
  border: 1px solid var(--trait);
  border-radius: 10px;
  background: var(--gris-clair);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}
.simu-scene canvas { max-width: 100%; max-height: 520px; display: block; }

.simu-panneau { display: flex; flex-direction: column; gap: 16px; }
.simu-bloc { border: 1px solid var(--trait); border-radius: 10px; padding: 14px 16px; }
.simu-bloc h2 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--gris); margin: 0 0 10px; font-weight: 700; font-family: inherit;
}

.simu-puces { display: flex; flex-wrap: wrap; gap: 6px; }
/* Un bouton a fond blanc DOIT poser sa couleur de texte : la regle globale
   button du site met du blanc sur navy, et sans cette ligne la puce serait
   blanche sur blanc. Ce defaut a deja ete paye une fois. */
.simu-puce {
  border: 1px solid var(--trait); border-radius: 999px; padding: 5px 11px;
  font: inherit; font-size: 13px; background: var(--papier); color: var(--encre);
  cursor: pointer;
}
.simu-puce:hover { border-color: var(--gris); }
.simu-puce[aria-pressed="true"] {
  background: var(--navy); border-color: var(--navy); color: var(--papier);
}

.simu-bloc select {
  width: 100%; padding: 8px; border: 1px solid var(--trait); border-radius: 8px;
  font: inherit; background: var(--papier); color: var(--encre);
}
.simu-bloc label { display: block; font-size: 13.5px; margin: 14px 0 6px; }
.simu-bloc input[type="range"] { width: 100%; accent-color: var(--navy); }
.simu-bornes { display: flex; justify-content: space-between; font-size: 12px; color: var(--gris); }

.simu-mesures { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.simu-mesures li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--trait);
}
.simu-mesures li:last-child { border-bottom: 0; }
.simu-mesures b { font-variant-numeric: tabular-nums; }

.simu-avert {
  border-left: 4px solid var(--orange); background: #FDF0E6;
  border-radius: 8px; padding: 10px 12px; font-size: 13.5px;
  line-height: 1.5; margin-top: 12px;
}
.simu-note { color: var(--gris); font-size: 13px; line-height: 1.5; margin: 10px 0 0; }

/* LES DEUX LARGEURS. Ce qui se LIT reste dans la colonne de lecture ; le
   tableau, lui, se BALAIE et prend le cadre entier. Contraindre un tableau a
   68 caracteres le rend illisible pour gagner une regularite que personne ne
   regarde. */
.simu-apres { margin: 0 0 40px; }
.simu-apres p, .simu-apres h2 { max-width: 68ch; }
.objets-simulation {
  width: 100%; border-collapse: collapse; margin: 4px 0 28px; font-size: 14px;
}
.objets-simulation th, .objets-simulation td {
  text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--trait);
  vertical-align: top;
}
.objets-simulation th { font-size: 12.5px; color: var(--gris); font-weight: 700; }
.objets-simulation td:nth-child(3) { font-variant-numeric: tabular-nums; }
.simu-apres h2 { font-size: 21px; margin: 0 0 10px; }
.simu-apres p { margin: 0 0 12px; }