/* ============================================================ gm-connexion gm-test
   CSS additionnel - la machine a ecrire
   Police de base (Courier / Georgia) : geree par le theme.
   ============================================================ */

/* ---- L'encrier : toutes les couleurs, un seul endroit ---- */
:root {
    --encre:       #2A2925;   /* noir du ruban */
    --encre-bleue: #1F2A52;   /* bleu nuit des traits */
    --stylo:       #1855ff;   /* encre du stylo (manuscrit, liens, submit) */
    --rouge:       #e12a12;   /* erreurs et verdicts */
    --gris:        #55524B;   /* pointilles */
    --papier:      #FCFCF7;   /* fond de page (sert a masquer l'auto-remplissage) */
}

/* ---- Les champs et boutons heritent de la police du theme ---- */
input, button, textarea, select {
    font: inherit;
}

/* ============================================================
   Base formulaire commune (test + connexion + suivants)
   ============================================================ */

/* Champs : pas de cadre, un pointille de machine */
.gm input[type="prenom"],
.gm input[type="text"],
.gm input[name$="_autre"],
.gm input[type="password"],
.gm input[type="email"],
.gm input[type="prenom"]:focus,
.gm input[type="text"]:focus,
.gm input[name$="_autre"]:focus,
.gm input[type="password"]:focus,
.gm input[type="email"]:focus {
    font-family: "Comic Sans MS", cursive;
    /* font-style: italic; */
    font-size: 1.2em;
    color: var(--stylo);
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0 .2em;
    outline: none;
    border-bottom: 1px dashed var(--gris);
}


.gm input {
    width: 100%;
    padding: .4em .2em;
}

/* Submit : un lien bleu, souligne, qui se desouligne au survol */
button[type="submit"],
button[type="submit"]:hover,
button[type="submit"]:focus,
button[type="submit"]:active {
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding: 0;
    color: var(--stylo);
    cursor: pointer;
}
button[type="submit"] {
    text-decoration: underline;
}
button[type="submit"]:hover {
    text-decoration: none;
}

.entry-content a,
.entry-content a:hover,
.entry-content a:focus,
.entry-content a:active {
    color: var(--stylo);
    text-underline-offset: 2px;
    transition: none;
}
.entry-content a {
    text-decoration: underline;
}
.entry-content a:hover {
    text-decoration: none;
}

/* Erreurs : une seule encre rouge */
.gm-erreur,
.gm-resultat {
    color: var(--rouge);
}
.gm-resultat.gm-admis {
    color: var(--stylo);
}

/* ============================================================
   Test d'entree
   ============================================================ */

.gm fieldset {
    border: none;
    margin: 0 0 1.6em;
    padding: 0;
}
.gm legend {
    padding: 0;
    margin-bottom: .4em;
}
.gm .gm-case {
    margin: .15em 0;          /* les reponses se suivent comme des lignes tapees */
    line-height: 1.35;
}


/* Cases : crochets tapes, coche au stylo */
.gm input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: none;
    width: 2em;
    height: 1.2em;
    padding: 0;              /* annule le .4em .2em du .gm input générique */
    position: relative;
    cursor: text;
    vertical-align: baseline;
}
.gm input[type="checkbox"]::before {
    content: "[\00a0]";      /* espace insécable : plus de césure possible */
    color: var(--encre);
    white-space: nowrap;
}
.gm input[type="checkbox"]:checked::after {
    content: "\2713";
    position: absolute;
    left: .35em;
    top: -.45em;
    font-size: 2em;
    color: var(--stylo);
    transform: rotate(-12deg);
}

/* Identite : prenom et email sur la meme ligne */
.gm .gm-identite {
  display: flex;
  align-items: baseline;
  gap: 1em;
}
.gm .gm-identite label {
  white-space: nowrap;
}
.gm .gm-identite input[type="email"] {
  flex: 1;
  width: auto;
  min-width: 0;
}
/* ============================================================
   Page de connexion
   ============================================================ */

.gm .gm-titre {
    font-weight: normal;
}
.gm label {
    font-size: .95em;
}
.gm-liens {
    margin-top: 3em;
    font-size: .9em;
}
.gm a {
    color: var(--stylo);
}

/* ============================================================
   Divers
   ============================================================ */

/* L'accroche decalee, facon adresse du destinataire */
.entry-content .accroche-droite {
    width: fit-content;
    margin-left: auto;
    font-size: 1.15em;
    text-align: center;
    font-weight: 600;
    margin-bottom: 2em !important ;   /* la "ligne vide", en dur */
    margin-top: 2em;   /* la "ligne vide", en dur */
}
.single-content p, .single-content h3 {
    padding-top: 0 !important;
    padding-bottom: 1.2em !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

@media (max-width: 600px) {
    .gm .gm-identite { flex-wrap: wrap; }
}

/* ============================================================
   Champs auto-remplis : meme rendu qu'un champ tape a la main
   (fond papier, encre du stylo, Comic Sans)
   ============================================================ */

.gm input:-webkit-autofill,
.gm input:-webkit-autofill:hover,
.gm input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--papier) inset;
    box-shadow: 0 0 0 1000px var(--papier) inset;
    -webkit-text-fill-color: var(--stylo);
    caret-color: var(--stylo);
}

.gm input:-webkit-autofill::first-line {
    font-family: "Comic Sans MS", cursive;
    font-size: 1em;
}

/* Firefox */
.gm input:autofill {
    filter: none;
    background-color: var(--papier);
    color: var(--stylo);
}

/* ============================================================
   Case de consentement : vraie case du navigateur + fleche
   Ne touche que les cases dont le name finit par "_consent".
   Les cases [ ] du test d'entree restent telles quelles.
   ============================================================ */

.gm .gm-case label:has(input[name$="_consent"]) {
    display: flex;
    align-items: center;   /* au lieu de flex-start */
    gap: .5em;
    cursor: pointer;
}

/* La case : on annule les crochets, on rend la case native */
.gm .gm-case input[name$="_consent"] {
    all: revert;
    flex: none;
    width: 1.1em;
    height: 1.1em;
    margin: 0;
    accent-color: var(--stylo);
    cursor: pointer;
}
.gm .gm-case input[name$="_consent"]::before,
.gm .gm-case input[name$="_consent"]:checked::after {
    content: none;
}

/* Fleche devant la case : place reservee, invisible par defaut */
.gm .gm-case label:has(input[name$="_consent"])::before {
    content: "→";
    flex: none;
    font-weight: bold;
    color: var(--stylo);
    visibility: hidden;
}

/* Elle clignote quand l'email est rempli et valide, ou apres une erreur,
   tant que la case n'est pas cochee */
.gm form:has(input[type="email"]:valid) .gm-case label:has(input[name$="_consent"]:not(:checked))::before,
.gm form:has(.gm-erreur) .gm-case label:has(input[name$="_consent"]:not(:checked))::before {
    visibility: visible;
    animation: gm-clignote 1s step-end infinite;
}

@keyframes gm-clignote {
    50% { opacity: 0; }
}

/* Visiteurs qui ont desactive les animations : fleche fixe */
@media (prefers-reduced-motion: reduce) {
    .gm .gm-case label::before {
        animation: none !important;
    }
}

/* protection copie +++++++++++++++++++++++++++++++++++++++++++*/

.gm-protege::before {
    content: attr(data-texte);
}

.gm form .gm-case label:has(input[name$="_consent"]) {
    align-items: center;
}
.gm form .gm-case input[name$="_consent"] {
    margin: 0;
    font-size: inherit;
}



/* souligne manuel */ 

.surligne {
  background: linear-gradient(104deg, transparent 0.9%, #ffe066 2.4%, #ffe066 97%, transparent 98%);
  background-size: 100% 45%;
  background-repeat: no-repeat;
  background-position: 0 85%;
  padding: 0 2px;
}