/*
 * Passepasse.
 *
 * Bootstrap sert de reset et de quelques utilitaires (.d-none, .visually-hidden). Tout le reste
 * est ici : la page n'utilise aucun composant Bootstrap, parce que la carte a ombre portee et le
 * bouton bleu sont exactement ce qu'on obtient quand on ne decide rien.
 *
 * La politique de securite du contenu declare style-src 'self'. Aucun attribut style=, aucune
 * balise <style>, et le JavaScript ne pilote que des classes. Toute regle visuelle passe par ce
 * fichier.
 *
 * REGLE DE COULEUR, la seule qu'il faut retenir : --jamais-transmis est reserve a la matiere
 * secrete. Le fragment d'URL, la cle, la passphrase, le secret en clair. Jamais un bouton, jamais
 * un lien, jamais un accent decoratif. Quand cette couleur apparait, elle veut dire une chose et
 * une seule : ceci ne quitte pas votre navigateur.
 *
 * PRECISION, pour la liste de champs : c'est le bloc entier qui porte le sur-titre « Dechiffre
 * dans ce navigateur », et c'est lui qui marque l'ensemble comme matiere secrete. A l'interieur,
 * l'indigo distingue alors la charge de son etiquette : la valeur est en indigo, la cle en encre.
 * Une valeur encore masquee est en --transmis, pas en indigo : l'indigo apparait exactement au
 * moment ou le secret apparait.
 *
 * ADAPTATION AUX ECRANS, la doctrine du fichier. Trois types de requete media, trois motifs
 * distincts, et jamais l'un pour l'autre :
 *
 *   @media (max-width: ...)    la mise en page, et rien d'autre.
 *   @media (hover: hover)      TOUTES les regles de survol. Sans cela un etat de survol reste
 *                              colle apres un tap sur telephone, et le bouton parait selectionne
 *                              pour toujours.
 *   @media (pointer: coarse)   les tailles au doigt. Une tablette de 1024px en a besoin, une
 *                              fenetre de bureau de 380px non : la largeur ne dit rien du doigt.
 *
 * Les trois blocs vivent en fin de fichier, apres les regles qu'ils surchargent.
 */

:root {
    color-scheme: light dark;

    --papier: #FCFBF9;
    --papier-creux: #F4F2EE;
    --encre: #14181F;
    --transmis: #5A6472;
    --jamais-transmis: #3B2FD4;
    --irreversible: #A8321C;
    --voile: #E4E1DB;

    /*
     * Hauteur commune des controles d'une meme rangee, select et case a cocher. Deux boites de
     * hauteurs differentes alignees par le bas ne peuvent pas partager le meme centre : plutot
     * que de compenser au pixel, on leur donne la meme hauteur et le centrage suit.
     */
    --controle: 2.25rem;

    --sans: "Segoe UI Variable Display", "SF Pro Display", -apple-system, BlinkMacSystemFont,
            "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
    --mono: "Cascadia Code", "SF Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace,
            Menlo, Consolas, monospace;

    --duree: 240ms;
    --courbe: cubic-bezier(0.2, 0.8, 0.2, 1);

    --bs-body-bg: var(--papier);
    --bs-body-color: var(--encre);
    --bs-border-color: var(--voile);
}

@media (prefers-color-scheme: dark) {
    :root {
        --papier: #0E1116;
        --papier-creux: #161B22;
        --encre: #E8EAED;
        --transmis: #8B96A5;
        --jamais-transmis: #8F86FF;
        --irreversible: #FF7A5C;
        --voile: #232A33;
    }
}

/* ---------------------------------------------------------------------------------------------
   Structure
   --------------------------------------------------------------------------------------------- */

body {
    background-color: var(--papier);
    color: var(--encre);
    font-family: var(--sans);
    font-size: 0.9375rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.page {
    max-width: 44rem;
    margin: 0 auto;
    padding: 3.5rem 1.5rem 6rem;
}

.filet {
    height: 1px;
    background-color: var(--voile);
    border: 0;
    margin: 2.5rem 0;
    opacity: 1;
}

.bloc {
    border: 1px solid var(--voile);
    border-radius: 3px;
    padding: 1.5rem;
    background-color: var(--papier);
}

.bloc--creux {
    background-color: var(--papier-creux);
}

/* ---------------------------------------------------------------------------------------------
   Typographie

   L'eyebrow n'est pas un ornement : c'est le dispositif qui dit, en un mot, de quel cote de la
   frontiere serveur se trouve la chose qu'il surtitre.
   --------------------------------------------------------------------------------------------- */

.eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--transmis);
    margin: 0 0 0.5rem;
}

.eyebrow--secret {
    color: var(--jamais-transmis);
}

/*
 * Trois lettres, en chasse fixe et en bas de casse : la marque est l'adresse. Serrees, elles se
 * liraient comme un mot tronque ; c'est le cranage ouvert qui en fait une marque. Il prend le
 * role que tenait le # de l'ancien logotype, donner au coin de la page une presence voulue.
 *
 * Ce # a disparu d'ici, et c'est un resserrement : --jamais-transmis ne parait plus que sur de
 * la vraie matiere secrete, jamais sur un signe qui la represente.
 */
.marque {
    font-family: var(--mono);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--encre);
    margin: 0 0 3rem;
}

.titre {
    font-size: clamp(2rem, 6.5vw, 2.9rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0 0 1rem;
    text-wrap: balance;
}

.lede {
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--transmis);
    max-width: 34rem;
    margin: 0;
}

.lede__diese {
    font-family: var(--mono);
    color: var(--jamais-transmis);
    font-weight: 600;
}

.sous-titre {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 0.25rem;
}

/*
 * Le titre d'un repli reste un titre : le modele de contenu de <summary> accepte un element
 * d'en-tete. Encore faut-il le rendre en ligne. Un bloc dans un <summary> deplace le marqueur natif
 * de repli, et le repli perd l'affordance qui dit qu'on peut l'ouvrir : meme cause, et meme
 * consequence, que le display:flex contre lequel ce fichier met en garde plus bas.
 *
 * La ligne et la marge ne sont pas decoratives non plus : le reboot de Bootstrap pose sur h2 un
 * line-height de 1.2 et une marge basse de 0.5rem, que .sous-titre ne couvre pas.
 */
.sous-titre--replie {
    display: inline;
    line-height: 1.3;
    margin: 0;
}

.note {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--transmis);
    margin: 0;
}

.note--serre {
    margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------------------------------
   Le heros : l'URL, coupee au diese

   Toute la promesse du produit tient dans ce caractere. Ce qui le precede part au serveur, ce
   qui le suit ne part jamais. La typographie le montre plutot que de l'expliquer.
   --------------------------------------------------------------------------------------------- */

.lien {
    font-family: var(--mono);
    font-size: clamp(0.875rem, 2.6vw, 1.0625rem);
    line-height: 1.7;
    overflow-wrap: anywhere;
    margin: 0;
}

.lien__transmis {
    color: var(--transmis);
}

.lien__diese {
    color: var(--jamais-transmis);
    font-size: 1.5em;
    font-weight: 700;
    line-height: 0;
    padding: 0 0.16em;
    vertical-align: -0.08em;
}

.lien__secret {
    color: var(--jamais-transmis);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------------------------
   Les deux canaux : le meme objet, ouvert en deux

   L'ecart entre les deux colonnes est le conseil. Envoyer la moitie gauche par un canal et la
   moitie droite par un autre se lit dans la forme, pas dans un paragraphe.
   --------------------------------------------------------------------------------------------- */

.canaux {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 1.75rem;
    align-items: start;
}

.canaux__charniere {
    background-color: var(--voile);
    align-self: stretch;
    min-height: 6rem;
}

.canal__valeur {
    font-family: var(--mono);
    font-size: 0.8125rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
    margin: 0 0 0.875rem;
    color: var(--transmis);
}

.canal__valeur--secret {
    color: var(--jamais-transmis);
}

/* ---------------------------------------------------------------------------------------------
   Controles

   Selects et cases a cocher restent natifs : color-scheme les rend corrects en clair comme en
   sombre, sans image de fond en data URI ni regle de theme supplementaire.
   --------------------------------------------------------------------------------------------- */

.etiquette {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
}

.champ {
    width: 100%;
    font-family: var(--mono);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--encre);
    background-color: var(--papier);
    border: 1px solid var(--voile);
    border-radius: 3px;
    padding: 0.75rem 0.875rem;
    transition: border-color var(--duree) var(--courbe);
}

.champ:focus {
    outline: 2px solid var(--encre);
    outline-offset: 1px;
    border-color: transparent;
}

.champ--secret,
.champ--secret:read-only {
    color: var(--jamais-transmis);
}

.champ--secret:focus {
    outline-color: var(--jamais-transmis);
}

.champ--depasse {
    border-color: var(--irreversible);
}

.champ-select {
    font-family: var(--sans);
    font-size: 0.875rem;
    color: var(--encre);
    background-color: var(--papier);
    border: 1px solid var(--voile);
    border-radius: 3px;
    /* La hauteur vient du jeton, le remplissage vertical n'a donc plus de role a jouer. */
    height: var(--controle);
    padding: 0 0.625rem;
    min-width: 11rem;
}

.champ-select:focus {
    outline: 2px solid var(--encre);
    outline-offset: 1px;
}

/*
 * La case prend la hauteur d'un controle et centre son contenu : c'est ce qui la met au meme
 * centre que le select d'a cote, sans qu'aucun decalage n'ait a etre calcule.
 */
.case {
    display: inline-flex;
    align-items: center;
    min-height: var(--controle);
    gap: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
}

.case__boite {
    accent-color: var(--encre);
    width: 1rem;
    height: 1rem;
    flex: none;
}

.reglages {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    align-items: flex-end;
}

/* Le repli de la passphrase. Pas de fleche dessinee : le marqueur natif suffit. */
.repli {
    border-top: 1px solid var(--voile);
    padding-top: 1.25rem;
    margin-top: 1.75rem;
}

/*
 * Le repli qui ouvre une section, et non un reglage. Il reprend au pixel le rythme du
 * <hr class="filet"> qu'il remplace : meme trait, memes 2.5rem de part et d'autre. Le filet a
 * disparu du gabarit, parce que cette bordure EST le filet, devenue cliquable.
 *
 * Il ne porte surtout PAS data-marge-haute : ce crochet est declare en toute fin de feuille et
 * gagnerait a specificite egale, ecrasant en silence le rythme regle ici.
 */
.repli--section {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
}

.repli__titre {
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    list-style-position: outside;
    user-select: none;
}

.repli__corps {
    padding-top: 1rem;
    max-width: 24rem;
}

/*
 * La mesure de lecture ci-dessus vaut pour un champ de saisie, pas pour une grille : elle
 * ecraserait les deux canaux sur 24rem. Le defaut ne se serait vu qu'entre 30 et 40rem, une largeur
 * qu'on ne regarde ni depuis un telephone, ni depuis un poste en plein ecran.
 */
.repli__corps--large {
    max-width: none;
}

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

   Le bouton principal est encre sur papier, pas indigo : l'indigo appartient a la matiere
   secrete, et un bouton n'en est pas.
   --------------------------------------------------------------------------------------------- */

.bouton {
    font-family: var(--sans);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    /*
     * Les quatre lignes qui suivent ne servent qu'aux <a class="bouton">. La page de revelation en
     * porte un : quitter une page n'est pas une action sur elle, c'est un depart, et un depart
     * s'ecrit avec un lien. Sur un <button>, ces quatre valeurs sont deja celles du navigateur,
     * elles ne changent donc rien. Les deux dernieres annulent le reboot de Bootstrap, qui souligne
     * et colore les <a>. Les variantes --principal, --discret et --secret declarent leur couleur
     * plus bas, a specificite egale : elles gagnent par l'ordre source.
     */
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: var(--encre);
    border-radius: 3px;
    padding: 0.625rem 1.25rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color var(--duree) var(--courbe),
                border-color var(--duree) var(--courbe),
                color var(--duree) var(--courbe);
}

.bouton:focus-visible {
    outline: 2px solid var(--encre);
    outline-offset: 2px;
}

.bouton--principal {
    background-color: var(--encre);
    color: var(--papier);
}

.bouton--discret {
    background-color: transparent;
    color: var(--encre);
    border-color: var(--voile);
}

.bouton--discret:focus-visible {
    outline-color: var(--encre);
}

/* Le seul bouton qui porte l'indigo : celui qui copie de la matiere secrete. */
.bouton--secret {
    background-color: transparent;
    color: var(--jamais-transmis);
    border-color: var(--jamais-transmis);
}

.bouton--secret:focus-visible {
    outline-color: var(--jamais-transmis);
}

.bouton:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.rangee-action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.etat {
    font-size: 0.8125rem;
    color: var(--transmis);
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------------------------
   Messages

   --irreversible n'apparait que deux fois dans tout le produit : la page qui ne reviendra pas, et
   la destruction au moment de l'affichage. Un rouge qu'on voit partout ne veut plus rien dire.
   --------------------------------------------------------------------------------------------- */

.avertissement {
    border-left: 2px solid var(--irreversible);
    padding-left: 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.avertissement__titre {
    color: var(--irreversible);
    font-weight: 600;
}

.message {
    border: 1px solid var(--voile);
    border-radius: 3px;
    padding: 1.25rem 1.5rem;
    background-color: var(--papier-creux);
}

.message__titre {
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.pied {
    border-top: 1px solid var(--voile);
    margin-top: 4rem;
    padding-top: 1.5rem;
}

/* ---------------------------------------------------------------------------------------------
   Mouvement

   Un moment orchestre par page, pas des effets disperses.
   --------------------------------------------------------------------------------------------- */

.entree {
    animation: monter 420ms var(--courbe) both;
}

.entree--differee {
    animation-delay: 180ms;
}

@keyframes monter {
    from {
        opacity: 0;
        translate: 0 0.5rem;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

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

    .bouton,
    .champ {
        transition-duration: 0.01ms;
    }
}

/* ---------------------------------------------------------------------------------------------
   Selecteur de mode : trois vrais boutons radio derriere leurs etiquettes

   Les radios restent focalisables (opacite nulle, pas display:none), ce qui conserve la
   navigation aux fleches et l'annonce correcte aux lecteurs d'ecran, sans une ligne de JavaScript.
   --------------------------------------------------------------------------------------------- */

.selecteur-mode {
    display: inline-flex;
    /* Trois etiquettes au pouce depassent 320px de large : elles passent a la ligne plutot que de
       deborder de la page. */
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px;
    margin: 0 0 1.25rem;
    border: 1px solid var(--voile);
    border-radius: 4px;
}

.selecteur-mode__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.selecteur-mode__option {
    padding: 0.35rem 1rem;
    border-radius: 2px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--transmis);
    cursor: pointer;
    transition: background-color var(--duree) var(--courbe), color var(--duree) var(--courbe);
}

.selecteur-mode__radio:checked + .selecteur-mode__option {
    background-color: var(--encre);
    color: var(--papier);
}

.selecteur-mode__radio:focus-visible + .selecteur-mode__option {
    outline: 2px solid var(--encre);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------------------------
   Saisie des champs
   --------------------------------------------------------------------------------------------- */

.champs {
    display: grid;
    gap: 0.5rem;
}

.champs__ligne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
    gap: 0.5rem;
    align-items: center;
}

.champ--compact {
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
}

.champs__retirer,
.fichiers__retirer {
    width: 2rem;
    height: 2rem;
    border: 1px solid transparent;
    border-radius: 3px;
    background-color: transparent;
    color: var(--transmis);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: color var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}

.champs__retirer:focus-visible,
.fichiers__retirer:focus-visible {
    outline: 2px solid var(--encre);
    outline-offset: 1px;
}

/* Proposition de conversion : une ligne discrete, un verbe, rien de plus. */
.offre-conversion {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--transmis);
}

.bouton-texte {
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    color: var(--encre);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.bouton-texte:focus-visible {
    outline: 2px solid var(--encre);
    outline-offset: 2px;
}

/*
 * Variante en retrait, pour une action disponible mais qui n'est pas le chemin principal :
 * « Afficher » a cote de « Copier ». Le soulignement reste, parce qu'un controle qui ressemble a
 * du texte n'a plus d'affordance ; c'est sa couleur qui recule, pas sa nature.
 */
.bouton-texte--discret {
    color: var(--transmis);
    font-weight: 500;
    text-decoration-color: var(--voile);
}

/* ---------------------------------------------------------------------------------------------
   Restitution des champs

   La valeur masquee n'est pas un effet de style : elle n'est pas dans le document tant que
   « Afficher » n'a pas ete clique. Ce que l'on voit ici est un masque de longueur fixe, jamais
   proportionnel a la valeur, parce que la longueur d'un mot de passe est une information.
   --------------------------------------------------------------------------------------------- */

.fiches {
    border-top: 1px solid var(--voile);
}

.fiche {
    display: grid;
    grid-template-columns: minmax(6rem, 11rem) 1px minmax(0, 1fr);
    gap: 1.5rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--voile);
    align-items: start;
}

/*
 * La charniere du lien, reprise ici. Ce n'est pas une citation decorative : elle marque dans les
 * deux cas la meme chose, la frontiere entre ce qui decrit et ce qui est le secret. Sur le lien,
 * elle separe ce que le serveur voit de ce qu'il ne verra jamais ; sur une fiche, l'etiquette
 * choisie par l'expediteur de la valeur qu'il transmet.
 */
.fiche__charniere {
    background-color: var(--voile);
    align-self: stretch;
}

.fiche__cle {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--encre);
    overflow-wrap: anywhere;
}

.fiche__corps {
    min-width: 0;
}

.fiche__valeur {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.875rem;
    color: var(--jamais-transmis);
    overflow-wrap: anywhere;
}

/* Les points ne sont pas la valeur : ils n'ont donc pas droit a l'indigo. */
.fiche__valeur--masquee {
    color: var(--transmis);
    letter-spacing: 0.15em;
}

.fiche__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 0.5rem;
}

.bouton--petit {
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
}

/* ---------------------------------------------------------------------------------------------
   Fichiers : le depot a la creation, la remise a la reception

   La zone de depot est un confort de souris et rien d'autre : tout ce qu'elle permet reste
   accessible au clavier et au doigt par le bouton qu'elle contient. Un pointille qui n'accepte que
   le glisser serait une fonctionnalite reservee aux souris.
   --------------------------------------------------------------------------------------------- */

.depot {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    padding: 2rem 1.5rem;
    border: 1px dashed var(--voile);
    border-radius: 3px;
    background-color: var(--papier-creux);
    transition: border-color var(--duree) var(--courbe);
}

/* Trait plein et indigo pendant le survol d'un glisser : la zone accepte, et elle le dit. */
.depot--survole {
    border-style: solid;
    border-color: var(--jamais-transmis);
}

.depot__consigne {
    margin: 0;
    font-size: 0.875rem;
    color: var(--transmis);
}

.fichiers {
    display: grid;
    gap: 0.5rem;
}

.fichiers__ligne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    border: 1px solid var(--voile);
    border-radius: 3px;
}

.fichiers__nom {
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

/*
 * Le poids est une information de service : il prend la couleur de ce qui decrit, jamais celle de
 * ce qui est secret. Le contenu du fichier, lui, n'entre a aucun moment dans le document.
 */
.fichiers__taille {
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: var(--transmis);
    white-space: nowrap;
}

.recus {
    border-top: 1px solid var(--voile);
}

.recu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--voile);
}

.recu__identite {
    min-width: 0;
}

.recu__nom {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.recu__taille {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: var(--transmis);
}

/* Deux actions possibles sur un recu, calquees sur .fiche__actions : meme motif, meme rythme. */
.recu__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

/* ---------------------------------------------------------------------------------------------
   L'apercu avant impression

   Le cadre lui-meme n'est pas dans le gabarit : impression.js le cree et le detruit, parce qu'un
   <iframe> pose en dur devrait porter un src, et que src="" recharge la page courante, ce qui
   perdrait le secret dechiffre. Seules les classes vivent ici.

   LE FILET DE BORD GAUCHE est celui de .avertissement, a la geometrie pres, en indigo au lieu de
   rouge. Ce n'est pas un emprunt decoratif : la regle de couleur du fichier reserve
   --jamais-transmis a la matiere secrete, et un PDF dechiffre en est. Le filet dit donc ici ce
   qu'il dit partout ailleurs, ceci ne quitte pas votre navigateur, et il le dit sur la seule chose
   du produit qui ne soit ni un texte, ni une valeur, ni une URL.

   Il englobe le document ET le bouton qui l'imprime. Separer les deux ferait de l'impression une
   action de page comme une autre ; ils forment un seul objet, et la parcelle le montre.
   --------------------------------------------------------------------------------------------- */

.apercu {
    border-left: 2px solid var(--jamais-transmis);
    padding-left: 1rem;
}

.apercu__hote {
    /* L'hote existe meme vide : sans hauteur propre, il ne fait rien de visible. */
    display: block;
}

/*
 * Une chaine a reconnaitre ailleurs, pas de la prose.
 *
 * Le fichier pose partout la meme frontiere : ce qui est une cle, un secret, un identifiant ou une
 * URL est en chasse fixe, ce qui le decrit est en sans. « Enregistrer au format PDF » tombe du bon
 * cote de cette frontiere : c'est le libelle exact que l'imprimeur doit retrouver, et ecarter, dans
 * une fenetre qui n'est pas la notre. La chasse fixe le marque comme un litteral, et rend inutiles
 * les guillemets qui faisaient ce travail moins bien.
 *
 * En `em` et non en `rem` : la taille suit celle de la note qui la porte.
 */
.litteral {
    font-family: var(--mono);
    font-size: 0.9375em;
}

/*
 * La hauteur est relative au viewport, pas a un ratio de page. Un cadre au format A4 mentirait
 * deux fois : un PDF peut etre en paysage, et il peut compter quarante pages. Le plafond en rem
 * evite qu'un grand ecran de bureau n'affiche un cadre de deux metres.
 *
 * dvh apres vh, et non a la place : sur telephone, vh se calcule barre d'adresse retractee, et le
 * cadre depasse alors sous le pouce. La declaration vh reste au-dessus comme repli.
 */
/*
 * Aucun filet autour du cadre, et c'est un retrait volontaire.
 *
 * Ajuste a la largeur, le document remplit le cadre et dessine sa propre arete. Un filet de plus
 * serait un second bord pose sur un premier, plus faible que lui et invisible a cote : le produit
 * n'encadre nulle part ailleurs la matiere secrete, et il n'a pas de raison de commencer ici. La
 * parcelle indigo dit deja de quoi il s'agit.
 *
 * La couleur de fond, elle, sert au seul moment ou le cadre est vide : entre la pose et le rendu.
 */
.apercu__cadre {
    display: block;
    width: 100%;
    height: min(70vh, 48rem);
    height: min(70dvh, 48rem);
    border: 0;
    background-color: var(--papier-creux);
}

/* ---------------------------------------------------------------------------------------------
   Survol : toutes les regles de survol du fichier, et aucune ailleurs

   Un appareil tactile n'a pas de survol, mais il en simule un au tap et le laisse colle jusqu'au
   tap suivant. Sans ce bloc, toucher « Copier » remplit le bouton d'indigo et l'y laisse : il a
   l'air selectionne pour toujours. HygieneSourcesFrontTest verifie qu'aucun `:hover` ne sort
   d'ici.
   --------------------------------------------------------------------------------------------- */

@media (hover: hover) {
    .bouton--principal:hover:not(:disabled) {
        background-color: var(--transmis);
    }

    .bouton--discret:hover:not(:disabled) {
        border-color: var(--encre);
    }

    .bouton--secret:hover:not(:disabled) {
        background-color: var(--jamais-transmis);
        color: var(--papier);
    }

    .champs__retirer:hover,
    .fichiers__retirer:hover {
        color: var(--irreversible);
        border-color: var(--voile);
    }

    .depot:hover {
        border-color: var(--transmis);
    }

    .bouton-texte--discret:hover {
        color: var(--encre);
        text-decoration-color: currentColor;
    }
}

/* ---------------------------------------------------------------------------------------------
   Doigt : tailles minimales quand le pointeur est grossier

   Regle sur le pointeur et non sur la largeur, parce que la largeur ne dit rien du doigt : une
   tablette de 1024px se touche, une fenetre de bureau de 380px se clique.
   --------------------------------------------------------------------------------------------- */

@media (pointer: coarse) {
    /*
     * Seize pixels, pas un de moins. Safari sur iPhone agrandit le viewport des qu'un champ
     * focalise est sous cette taille, et n'en revient jamais : taper la premiere cle deforme la
     * mise en page pour le reste de la visite.
     */
    .champ,
    .champ--compact,
    .champ-select {
        font-size: 1rem;
    }

    /* Quarante-quatre pixels, le plancher praticable au pouce. */
    .bouton,
    .bouton--petit {
        min-height: 44px;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .champs__retirer,
    .fichiers__retirer {
        width: 44px;
        height: 44px;
    }

    .selecteur-mode__option {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding-inline: 1.25rem;
    }

    /*
     * Un seul jeton monte, et le select comme la case le suivent : ils restent de meme hauteur,
     * donc de meme centre, et le select rejoint le plancher des 44px que tous les autres
     * controles respectent deja.
     */
    :root {
        --controle: 44px;
    }

    .case__boite {
        width: 1.25rem;
        height: 1.25rem;
    }

    /*
     * Le repli et les boutons texte s'agrandissent par le remplissage, jamais par un display:flex.
     * Sur un <summary>, passer en flex supprime le marqueur natif de repli.
     */
    .repli__titre {
        padding-block: 0.7rem;
    }

    .bouton-texte {
        padding-block: 0.75rem;
    }
}

/* ---------------------------------------------------------------------------------------------
   Mise en page : les colonnes s'empilent

   Les deux dispositifs du produit ne reagissent pas de la meme facon, parce qu'ils ne disent pas
   la meme chose.

   La CHARNIERE pivote, elle ne se couche pas. Elle marque la frontiere entre ce qui decrit et ce
   qui est le secret : empilee, elle devient la bordure gauche du bloc de valeur, l'etiquette
   dehors et la charge en retrait derriere le trait. Meme enonce, autre axe.

   L'ECART grandit, il ne devient pas un trait. Entre les deux canaux, c'est la distance qui porte
   le conseil : ces deux moities voyagent separement. Un filet entre elles dirait qu'elles forment
   un ensemble, soit l'inverse exact de ce qu'on recommande.
   --------------------------------------------------------------------------------------------- */

@media (max-width: 40rem) {
    .canaux {
        grid-template-columns: minmax(0, 1fr);
        /* Le plus grand ecart de la page, et de loin : c'est lui qui porte le conseil. */
        gap: 3rem;
    }

    .canaux__charniere {
        display: none;
    }

    /*
     * Deux pixels, pas un. En large, la charniere est epaulee par deux colonnes qui disent deja
     * la separation ; empilee, elle la porte seule, et gagne donc en presence ce que la mise en
     * page lui a retire.
     */
    .fiche {
        grid-template-columns: 2px minmax(0, 1fr);
        gap: 0 0.875rem;
    }

    .fiche__cle {
        grid-column: 1 / -1;
        margin-bottom: 0.5rem;
    }

    .champs__ligne {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .champs__ligne .champs__valeur {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    /* Les lignes respirent davantage, pour que chaque couple cle/valeur se lise comme un bloc. */
    .champs {
        gap: 1.25rem;
    }
}

/* ---------------------------------------------------------------------------------------------
   Rythme telephone

   Un seul endroit pour tout l'espacement vertical en dessous de 30rem, seuil qui couvre tous les
   telephones en portrait, iPhone Pro Max compris. Les valeurs de bureau ne bougent pas d'un pixel.
   --------------------------------------------------------------------------------------------- */

@media (max-width: 30rem) {
    .page {
        padding: 2.25rem 1.25rem 3.5rem;
    }

    .marque {
        margin-bottom: 2rem;
    }

    .filet {
        margin: 1.75rem 0;
    }

    .pied {
        margin-top: 2.5rem;
    }

    .repli {
        margin-top: 1.5rem;
    }

    /*
     * Obligatoire, et non decoratif : la regle ci-dessus est declaree APRES .repli--section, a
     * specificite egale. Sans cet ajustement, la section garderait ses 2.5rem sous le trait et
     * n'aurait plus que 1.5rem au dessus. Le repli de section suit le filet qu'il remplace, qui
     * passe lui aussi a 1.75rem ici.
     */
    .repli--section {
        margin-top: 1.75rem;
        padding-top: 1.75rem;
    }

    .reglages {
        gap: 1.25rem 1.5rem;
    }

    .message {
        padding: 1rem 1.125rem;
    }

    /*
     * Le heros est compacte a la CREATION seulement. Qui cree connait deja l'outil et vient faire
     * une chose ; le champ de saisie doit etre visible sans defiler. Qui recoit, lui, decouvre
     * souvent le produit juste avant un clic irreversible : sa page garde l'explication en pleine
     * taille.
     */
    .page--composition .titre {
        font-size: 1.75rem;
    }

    .page--composition .lede {
        font-size: 0.9375rem;
    }
}

/* ---------------------------------------------------------------------------------------------
   Crochet d'espacement vertical, en toute fin de feuille

   Un attribut plutot qu'une classe pour qu'on voie tout de suite, dans le gabarit, que c'est de
   la mise en page et non un composant. Sa specificite est celle d'une classe : il doit donc etre
   declare APRES tous les composants, sinon un `.note { margin: 0 }` place plus bas l'annule en
   silence. C'est exactement le piege que ce projet devait eviter.
   --------------------------------------------------------------------------------------------- */

[data-marge-haute] {
    margin-top: 1.75rem;
}

@media (max-width: 30rem) {
    [data-marge-haute] {
        margin-top: 1.25rem;
    }

    /* Au doigt, le cadre laisse voir ce qui l'entoure : le bouton d'impression reste atteignable
       sans defiler, et l'avertissement au-dessus reste dans le champ. */
    .apercu__cadre {
        height: min(60dvh, 30rem);
    }
}

/* ---------------------------------------------------------------------------------------------
   Impression : cette page ne s'imprime pas

   Un quatrieme motif, qui ne figure pas dans la doctrine d'en-tete parce qu'il ne regle ni la mise
   en page, ni le survol, ni le doigt. Il ferme un defaut qui existait avant l'apercu et que
   l'apercu rend probable : Ctrl+P sur la page de revelation imprime le secret DECHIFFRE, valeurs
   revelees et noms de fichiers compris. Ajouter un bouton « Imprimer » installe justement ce
   reflexe clavier.

   Le document a imprimer est dans le cadre, et c'est lui qui s'imprime, depuis son propre
   contexte. La page qui le porte, elle, n'a rien a faire sur du papier.
   --------------------------------------------------------------------------------------------- */

@media print {
    .page > * {
        display: none;
    }

    .page::after {
        display: block;
        font-family: var(--sans);
        content: "Cette page ne s'imprime pas. Utilisez le bouton Imprimer de l'apercu : c'est le "
                 "document qui part a l'imprimante, pas la page qui le montre.";
    }
}