@font-face {
    font-family: 'Grotesque MT Std';
    src: url('fonts/GrotesqueMTStd-Black.woff2') format('woff2'), url('fonts/GrotesqueMTStd-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Grotesque MT Std Bold';
    src: url('fonts/GrotesqueMTStd-Bold.woff2') format('woff2'), url('fonts/GrotesqueMTStd-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Grotesque MT Std Bold Condensed';
    src: url('fonts/GrotesqueMTStd-BoldExtended.woff2') format('woff2'), url('fonts/GrotesqueMTStd-BoldExtended.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Grotesque MT Std';
    src: url('fonts/GrotesqueMTStd-Condensed.woff2') format('woff2'), url('fonts/GrotesqueMTStd-Condensed.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Grotesque MT Std';
    src: url('fonts/GrotesqueMTStd-ExtraCond.woff2') format('woff2'), url('fonts/GrotesqueMTStd-ExtraCond.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Grotesque MT Std';
    src: url('fonts/GrotesqueMTStd-Italic.woff2') format('woff2'), url('fonts/GrotesqueMTStd-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Grotesque MT Std';
    src: url('fonts/GrotesqueMTStd-Light.woff2') format('woff2'), url('fonts/GrotesqueMTStd-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Grotesque MT Std';
    src: url('fonts/GrotesqueMTStd-LightCond.woff2') format('woff2'), url('fonts/GrotesqueMTStd-LightCond.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Grotesque MT Std';
    src: url('fonts/GrotesqueMTStd-LightItalic.woff2') format('woff2'), url('fonts/GrotesqueMTStd-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Grotesque MT Std';
    src: url('fonts/GrotesqueMTStd.woff2') format('woff2'), url('fonts/GrotesqueMTStd.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Letter Gothic Std';
    src: url('fonts/LetterGothicStd-Bold.woff2') format('woff2'), url('fonts/LetterGothicStd-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Letter Gothic Std';
    src: url('fonts/LetterGothicStd-BoldSlanted.woff2') format('woff2'), url('fonts/LetterGothicStd-BoldSlanted.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Letter Gothic Std';
    src: url('fonts/LetterGothicStd-Slanted.woff2') format('woff2'), url('fonts/LetterGothicStd-Slanted.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Letter Gothic Std';
    src: url('fonts/LetterGothicStd.woff2') format('woff2'), url('fonts/LetterGothicStd.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Serifa Std';
    src: url('fonts/SerifaStd-Black.woff2') format('woff2'), url('fonts/SerifaStd-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Serifa Std';
    src: url('fonts/SerifaStd-Bold.woff2') format('woff2'), url('fonts/SerifaStd-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Serifa Std';
    src: url('fonts/SerifaStd-Italic.woff2') format('woff2'), url('fonts/SerifaStd-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Serifa Std';
    src: url('fonts/SerifaStd-Light.woff2') format('woff2'), url('fonts/SerifaStd-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Serifa Std';
    src: url('fonts/SerifaStd-LightItalic.woff2') format('woff2'), url('fonts/SerifaStd-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Serifa Std';
    src: url('fonts/SerifaStd-Roman.woff2') format('woff2'), url('fonts/SerifaStd-Roman.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Le Maïeuthon — une seule page, deux vues : l'accueil (les trois portraits)
   et la page d'un philosophe. Les maquettes sont dans docs/DA/.
   Couleurs relevées dans les maquettes : encre #1d1d1b, carte sombre #333,
   cartes claires #fbfbfb, texte du bouton #414987, liseré #70706f.
   ========================================================================== */

[hidden] { display: none !important; }

body {
    margin: 0;
    padding: 0;
    text-align: center;
    color: #1d1d1b;
    background: #fff;
    font-family: 'Grotesque MT Std Bold', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
button {
    font-family: 'Grotesque MT Std', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
textarea { resize: none; }

/* En-tête : le logo ramène à l'accueil */
#entete {
    width: min(44rem, 92vw);
    margin: 0 auto;
    padding: 1.2rem 0 1.4rem;
    border-bottom: 1px solid #70706f;
}
#entete a { display: inline-block; }
#entete img { display: block; max-width: 70%; height: auto; margin: 0 auto; }

main { padding: 1rem 1rem 3rem; }

/* Un philosophe : prénom léger au-dessus du nom en gras */
.identite {
    margin: 0 0 .5rem;
    font-family: 'Grotesque MT Std', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 1.6rem;
    line-height: 1;
    color: #1d1d1b;
}
.identite .nom { display: block; font-weight: 900; }

.portrait,
.portrait-accueil {
    display: block;
    border-radius: 50%;
    margin: 0 auto;
}

/* --- Accueil : trois portraits à l'envers, côte à côte ------------------ */
.trio {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    width: min(44rem, 92vw);
    margin: 2rem auto 0;
}
.choix {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.choix .identite { font-size: 1.4rem; }
.portrait-accueil { width: 100%; max-width: 10rem; height: auto; aspect-ratio: 1; }

/* --- Page d'un philosophe ------------------------------------------------ */
#vue-philosophe {
    width: min(26rem, 92vw);
    margin: 1.5rem auto 0;
}
.portrait-lien {
    display: block;
    width: 8rem;
    margin: 0 auto;
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.portrait-lien:focus-visible { outline: 2px solid #414987; outline-offset: 4px; }
.portrait {
    width: 8rem;
    height: 8rem;
    /* Les fichiers portrait sont à l'envers : c'est l'état de l'accueil. */
    transform: none;
    transition: transform .45s ease-in-out;
}
/* À l'arrivée sur la page, le portrait se retourne de 180° et se met à l'endroit. */
.portrait.debout { transform: rotate(180deg); }

/* Le passage d'une vue à l'autre : le portrait se DÉPLACE et se RETOURNE dans le
   même mouvement, sur la même durée.

   Le déplacement est celui du groupe (position et taille). Le retournement est
   celui des deux images, l'ancienne et la nouvelle : l'ancienne tourne vers
   l'orientation d'arrivée, la nouvelle part de l'orientation de départ, et elles
   coïncident à chaque instant — l'œil ne voit qu'un portrait qui tourne en
   voyageant. Pendant la transition, le vrai portrait ne tourne pas tout seul
   (sinon la capture de la nouvelle vue le prendrait à mi-rotation). */
:root.vt-entree .portrait,
:root.vt-sortie .portrait { transition: none; }

/* Le fondu du reste de la page se termine avant la fin du mouvement du portrait. */
:root.vt-entree::view-transition-old(root),
:root.vt-entree::view-transition-new(root),
:root.vt-sortie::view-transition-old(root),
:root.vt-sortie::view-transition-new(root) { animation-duration: .3s; }

::view-transition-group(portrait),
::view-transition-old(portrait),
::view-transition-new(portrait) {
    animation-duration: .45s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
}
::view-transition-old(portrait),
::view-transition-new(portrait) {
    mix-blend-mode: normal;
    opacity: 1;
}
/* Arrivée sur une page de philosophe : le portrait se met à l'endroit (+180°). */
:root.vt-entree::view-transition-old(portrait) { animation-name: tourne-0-a-180; }
:root.vt-entree::view-transition-new(portrait) { animation-name: tourne-moins180-a-0; }
/* Retour à l'accueil : il se remet à l'envers, dans l'autre sens. */
:root.vt-sortie::view-transition-old(portrait) { animation-name: tourne-0-a-moins180; }
:root.vt-sortie::view-transition-new(portrait) { animation-name: tourne-180-a-0; }

@keyframes tourne-0-a-180      { from { transform: rotate(0deg); }    to { transform: rotate(180deg); } }
@keyframes tourne-moins180-a-0 { from { transform: rotate(-180deg); } to { transform: rotate(0deg); } }
@keyframes tourne-0-a-moins180 { from { transform: rotate(0deg); }    to { transform: rotate(-180deg); } }
@keyframes tourne-180-a-0      { from { transform: rotate(180deg); }  to { transform: rotate(0deg); } }

/* Carte d'accroche */
.bandeau-jeu {
    background: #333;
    color: #fff;
    padding: 1.2rem 1.2rem 1.4rem;
    border-radius: 6px;
    margin: 1.4rem 0 .6rem;
    text-align: center;
    font-family: 'Serifa Std', serif;
}
.bandeau-jeu p { margin: 0; }
.bandeau-titre { font-size: 1.6rem; font-weight: 300; margin-bottom: .7rem !important; }
.bandeau-verbes { font-size: 1.15rem; line-height: 1.25; font-weight: bold; margin-bottom: .8rem !important; }
.bandeau-explication { font-size: .8rem; line-height: 1.45; text-align: left; padding: 0 .6rem; }

/* Carte des échanges */
.qa-history {
    /* La place du premier message est réservée : le champ de saisie ne descend pas
       pendant que le philosophe écrit, et la page n'a pas à rattraper son retard. */
    min-height: 11rem;
    max-height: 22rem;
    overflow-y: auto;
    padding: 10px;
    background-color: #fbfbfb;
    border: 1px solid #d6d6d6;
    border-radius: 6px;
    text-align: left;
    font-family: 'Serifa Std', serif;
    font-size: .85rem;
}
.message { margin-bottom: .55rem; }
.message.assistant-message { margin-top: .5em; }
.message.erreur { color: #8a1c1c; font-style: italic; }

/* « Spinoza réfléchit » */
#thinking-indicator {
    display: none;
    padding: 10px;
    font-style: italic;
    font-size: .85rem;
    color: #666;
    text-align: left;
}
.thinking-dots { padding: .5em 0; }

/* Champ de saisie : police à chasse fixe, cadre gris clair */
.qa-form {
    position: relative;
    margin-top: .6rem;
}
.qa-form textarea {
    display: block;
    width: 100%;
    min-height: 4.5rem;
    box-sizing: border-box;
    padding: .7rem 2.6rem .7rem .8rem; /* à droite, la place du bouton d'envoi (1,5 rem + marges) */
    border: 1px solid #b9b9b9;
    border-radius: 4px;
    background: #fbfbfb;
    font-family: 'Letter Gothic Std', 'Courier New', monospace;
    font-size: 16px; /* évite le zoom d'iOS */
}
.qa-form textarea::placeholder { color: #70706f; }
.qa-form textarea:focus { outline: 1px solid #70706f; }
.qa-form .envoi {
    /* L'image EST le bouton : un rond noir et sa flèche (101 px, nette jusqu'à 3 rem).
       Une seule taille ; pas de padding, il rognerait le rond. Position et taille
       réglées par FJD le 13/10 (1,5 rem, à .5 rem du coin). */
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: transform .15s ease;
}
.qa-form .envoi:hover:not(:disabled) { transform: scale(1.06); }
/* Le dessin fait 24 px mais la zone qui répond au toucher en fait ~42 : invisible,
   sans effet sur la mise en page. */
.qa-form .envoi::after { content: ''; position: absolute; inset: -.6rem; border-radius: 50%; }
.qa-form .envoi img { display: block; width: 100%; height: 100%; }
.qa-form .envoi:disabled { opacity: .4; cursor: default; }

/* Bouton de fin : rond, centré sous le champ, toujours présent.
   Éteint (aria-disabled) : 30 % et aucun clic ; allumé : pleine opacité. */
.fin-zone { text-align: center; padding: 1.2rem 0 .4rem; }

/* Grand écran : le bouton rond (décompte, puis « Qui suis-je ? ») se place À DROITE du
   champ de saisie, son centre aligné sur celui du champ, sa légende dessous. Il ne
   descend plus sous le bas de l'écran : il est visible tant que le champ l'est. Il
   déborde de la colonne sans la décaler (position absolue). Sous 880 px de large, il
   reste sous le champ. */
.saisie-bloc { position: relative; }
@media (min-width: 880px) {
    .fin-zone {
        position: absolute;
        left: calc(100% + .6rem);
        top: 50%;
        transform: translateY(-2.9rem); /* la moitié du bouton : son centre sur celui du champ */
        width: 10rem;
        padding: 0;
        margin: 0;
    }
    .fin-zone .fin-legende { max-width: 10rem; }
}
.btn-fin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.8rem;
    height: 5.8rem;
    margin: 0 auto;
    padding: .5rem;
    box-sizing: border-box;
    border: 1px solid #70706f;
    border-radius: 50%;
    background: #fff;
    color: #414987;
    font-family: 'Serifa Std', serif;
    font-size: .95rem;
    line-height: 1.15;
    text-align: center;
    white-space: pre-line; /* respecte le retour à la ligne de « Qui / suis-je ? » */
    cursor: pointer;
    opacity: 1;
    transition: opacity .3s ease;
}
/* Le décompte : un chiffre qui occupe le rond, gras, dense, d'une seule couleur d'encre.
   ⚠️ INUTILISÉE depuis le 15/10 : le bouton n'affiche plus de décompte, il est actif
   dès l'ouverture et c'est le serveur qui répond « Le Flâneur » si l'élève a trop peu
   parlé. La règle est gardée parce que sa mesure est coûteuse à refaire (voir ci-dessous) :
   si le décompte revient un jour, elle est prête. Elle ne peut pas nuire — aucun élément
   ne porte plus la classe `decompte`. */
.btn-fin.decompte {
    /* L'encre d'un chiffre ne remplit pas la ligne : la police réserve de la place
       SOUS les chiffres (pour les jambages des lettres), donc le chiffre, centré par
       sa ligne, se retrouve trop haut (mesuré : 9 px au-dessus du centre du rond,
       pour un rond de 93 px). On rend ce décalage au contenu par un padding-top ; le
       centrage ne reprend que la moitié, d'où le double du décalage voulu (0,155 em).
       Mesure à refaire si la police ou la taille changent. */
    padding: .31em 0 0;
    color: #1d1d1b;
    font-family: 'Grotesque MT Std', 'Arial Narrow', sans-serif;
    font-weight: 900;
    font-size: 3.6rem;
    line-height: 1;
}
.btn-fin[aria-disabled="true"] { opacity: .3; pointer-events: none; cursor: default; }
.btn-fin:disabled { opacity: .6; cursor: wait; }

/* La légende sous le bouton : ce qu'il promet. Toujours lisible (pas à 30 %). */
.fin-legende {
    max-width: 16rem;
    min-height: 2.5em;
    text-wrap: balance; /* pas de mot orphelin sur la deuxième ligne */
    margin: .7rem auto 0;
    font-family: 'Letter Gothic Std', monospace;
    font-size: .8rem;
    line-height: 1.25;
    color: #70706f;
    text-align: center;
}

/* Sujet épinglé en haut de l'écran quand le chat l'a fait sortir de la vue.
   Sous la fenêtre de résultat (z-index 10000), au-dessus du reste. */
#sujet-fixe {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    padding: .55rem 1rem;
    background: #333;
    color: #fff;
    font-family: 'Serifa Std', serif;
    font-size: .85rem;
    line-height: 1.3;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.sujet-fixe-etiquette {
    margin-right: .5em;
    opacity: .6;
    text-transform: uppercase;
    font-size: .7em;
    letter-spacing: .08em;
}

/* Réduire les animations est un choix du lecteur : plus de transition, mais le
   portrait garde son orientation finale. */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
        animation: none !important;
    }
}

/* ==========================================================================
   Partager son résultat (fenêtre de résultat)
   Un bouton ; au clic, une barre de logos glisse juste au-dessus.
   ========================================================================== */
.partage {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 1.4rem;
    font-family: 'Letter Gothic Std', monospace;
}
.partage-bouton {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.1rem;
    border: 1px solid #70706f;
    border-radius: 999px;
    background: #fff;
    color: #1d1d1b;
    font-family: inherit;
    font-size: .95rem;
    cursor: pointer;
    transition: background .2s ease;
}
.partage-bouton:hover,
.partage.ouvert .partage-bouton { background: #f1f1f1; }
.partage-bouton:focus-visible,
.partage-lien:focus-visible { outline: 2px solid #414987; outline-offset: 2px; }

/* Le panneau : l'aperçu de la publication, puis la barre des logos. Il glisse
   juste au-dessus du bouton. Fermé : invisible, hors du clavier, un peu plus bas. */
.partage-panneau {
    position: absolute;
    bottom: calc(100% + .55rem);
    left: 50%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, .6rem);
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.partage.ouvert .partage-panneau {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
.partage-apercu {
    margin: 0;
    padding: 0;
    line-height: 0;
    border: 1px solid #d6d6d6;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.16);
}
.partage-apercu img { display: block; width: 8.5rem; height: auto; }
.partage-barre {
    display: flex;
    gap: .1rem;
    padding: .3rem .5rem;
    border: 1px solid #d6d6d6;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.16);
}
.partage-lien {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #1d1d1b;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease;
}
.partage-lien:hover { background: #f1f1f1; }
.partage-info {
    position: absolute;
    top: calc(100% + .35rem);
    left: 50%;
    transform: translateX(-50%);
    font-size: .8rem;
    color: #414987;
    white-space: nowrap;
}

/* ==========================================================================
   Fenêtre de résultat : la croix, le lien « revoir », et le panneau de partage
   (l'aperçu de la publication + la barre des logos).
   ========================================================================== */
.resultat-fermer {
    position: absolute;
    top: .7rem;
    right: .7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #1d1d1b;
    cursor: pointer;
    transition: background .15s ease;
}
.resultat-fermer:hover { background: #f1f1f1; }
.resultat-fermer:focus-visible { outline: 2px solid #414987; outline-offset: 2px; }

.lien-discret {
    display: block;
    margin: .8rem auto 0;
    padding: .2rem .4rem;
    border: none;
    background: transparent;
    color: #414987;
    font-family: 'Serifa Std', serif;
    font-size: .8rem;
    text-decoration: underline;
    cursor: pointer;
}

/* Le défi : on arrive par le lien partagé d'un ami. */
.defi {
    position: relative;
    padding: .65rem 2.6rem .65rem 1rem;
    background: #333;
    color: #fff;
    font-family: 'Serifa Std', serif;
    font-size: .92rem;
    line-height: 1.3;
    text-align: center;
}
.defi-fermer {
    position: absolute;
    top: 50%;
    right: .5rem;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
.defi-resultat {
    margin: .6rem 0 0;
    font-family: 'Letter Gothic Std', monospace;
    font-size: .95rem;
    color: #333;
}

/* ==========================================================================
   La fiche du philosophe (étape 12) : une fenêtre comme celle du résultat
   (fond sombre, carte blanche, croix), avec la phrase de synthèse et le lexique.
   ========================================================================== */
.fiche-fenetre { animation: fiche-fond .2s ease-out both; }
.fiche-carte { text-align: left; animation: fiche-entree .28s ease-out both; }
@keyframes fiche-fond { from { opacity: 0; } to { opacity: 1; } }
@keyframes fiche-entree {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
.fiche-titre { margin: 0 2.6rem .8rem 0; font-size: 1.35rem; color: #333; }
.fiche-synthese { margin: 0 0 1.1rem; font-size: .98rem; line-height: 1.55; color: #333; }
.fiche-soustitre {
    margin: 0 0 .3rem;
    font-size: .75rem;
    font-weight: normal;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #414987;
}
.fiche-lexique { margin: 0 0 1.2rem; }
.fiche-lexique dt { margin-top: .6rem; font-weight: bold; font-size: .92rem; color: #1d1d1b; }
.fiche-lexique dd { margin: .1rem 0 0; font-size: .85rem; line-height: 1.4; color: #333; }
.fiche-continuer {
    display: block;
    margin: 0 auto;
    padding: .75rem 1.8rem;
    border: none;
    border-radius: 25px;
    background: #333;
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
}
.fiche-continuer:hover { background: #414987; }
.fiche-continuer:focus-visible { outline: 2px solid #414987; outline-offset: 2px; }