@import url('reset.css');
@import url('variable.css');
@import url('color.css');
@import url('police.css');

/* Page « Aide et contact » : une seule carte centrée, rien d'autre.
   Mêmes codes que le reste du site : titre en Poltawski Nowy, texte en Afacad,
   surfaces blanches bordées, arrondis généreux, accents violets. */

.contactMain{
    display: flex;
    justify-content: center;
    padding: 48px 5% 80px 5%;
}

.contactCard{
    box-sizing: border-box;
    width: 100%;
    max-width: 720px;
    padding: 44px 44px 36px 44px;
    background-color: #fff;
    border: 1px solid #E6E6E6;
    border-radius: 24px;
    font-family: 'Afacad';
}

.contactTitle{
    margin: 0 0 12px 0;
    font-family: 'Poltawski Nowy';
    font-size: 38px;
    font-weight: 600;
    line-height: 1.15;
    color: #000;
    text-wrap: balance;
}

.contactLead{
    margin: 0 0 32px 0;
    font-size: 18px;
    line-height: 1.5;
    color: #434343;
    text-wrap: pretty;
}

/* Liens du chapeau : la FAQ et l'adresse email */
.contactMailLink{
    color: #4D3DFF;
    text-underline-offset: 3px;
    /* Une adresse email n'a pas d'espace : sans coupure permise, elle élargissait
       la page sous 300 px et mordait sur la marge de la carte jusqu'à 340 px.
       Elle ne se coupe que si elle ne tient pas sur la ligne. */
    overflow-wrap: anywhere;
}

/* Chapeau et aide des cartes de la demande et de l'authentification : le
   chapeau dit ce qui se passe, l'aide (sous un champ ou seule) le précise en
   plus petit et en gris. Classes posées depuis longtemps par les gabarits mais
   jamais définies : le texte retombait en Poppins, collé au champ. */
.contactIntro{
    margin: 0 0 24px 0;
    font-size: 18px;
    line-height: 1.5;
    color: #434343;
    text-wrap: pretty;
}

.contactIntro strong{
    font-weight: 600;
}

.contactHint{
    margin: 6px 0 16px 0;
    font-size: var(--ui-fs-sm);
    line-height: 1.4;
    color: var(--ui-text-muted);
}

/* Récapitulatif des erreurs en tête de carte (formulaire de demande) : texte
   foncé sur le fond clair de l'alerte « danger », un lien par champ fautif. */
.contactErrors{
    margin: 0 0 24px 0;
    padding: 14px 18px;
    background-color: #F8D7DA;
    border: 1px solid #F5C2C7;
    border-radius: 12px;
    color: #842029;
}

.contactErrorsTitle{
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
}

.contactErrorsList{
    margin: 6px 0 0 0;
    padding-left: 20px;
    font-size: 16px;
    line-height: 1.4;
}

.contactErrorsList a{
    color: #842029;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* style.css pose Poppins sur chaque élément (sélecteur « * ») : la police de
   .contactCard ne descend pas jusqu'aux paragraphes, liens et messages, on la
   leur redonne ici. Libellés, champs et erreurs l'ont déjà (ui.css). */
.contactLead,
.contactLead a,
.contactIntro,
.contactIntro *,
.contactHint,
.contactHint a,
.contactErrors,
.contactErrors *,
.contactNote,
.contactFeedback{
    font-family: 'Afacad';
}

/* ── Formulaire ────────────────────────────────────────────────────────── */

.contactForm{
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Deux champs par ligne sur grand écran, empilés en dessous */
.contactRow{
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.contactField{
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin: 0;
}

/* La base de 220 px est une LARGEUR : elle ne vaut que pour deux champs posés
   côte à côte dans une ligne. Posée sur tous les champs, elle devenait une
   hauteur dans une colonne (le champ du message réservait 220 px pour 207). */
.contactRow > .contactField{
    flex: 1 1 220px;
}

/* Message d'erreur sous chaque champ (contact.js). Vide, il ne prend pas de
   place : ces messages n'apparaissent qu'à l'envoi, et une réserve sous chaque
   champ allongeait le formulaire pour rien. Seul celui de l'email garde la
   sienne (ui.css) : il s'affiche dès la sortie du champ, en pleine saisie, et
   ne doit pas faire sauter les champs suivants. */
.contactField .ui-formError:empty:not(#emailError){
    display: none;
}

/* De vrais libellés : un texte indicatif disparaît dès qu'on tape, et on ne sait
   plus ce qu'on remplit. */






/* ── Envoi ─────────────────────────────────────────────────────────────── */

.contactActions{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 6px;
}





.contactFeedback{
    font-size: 16px;
}

.contactFeedback.isSuccess{
    color: #15803D;
}

.contactFeedback.isError{
    color: #C62828;
}

.contactNote{
    margin: 26px 0 0 0;
    padding-top: 20px;
    border-top: 1px solid #EFEFEF;
    font-size: 14px;
    line-height: 1.5;
    color: #6B6B6B;
}

/* Champ piège anti-robots : hors du champ visuel, jamais display:none (il doit
   rester rempli par un robot pour qu'on le détecte). */
.contactHoneypot{
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 576px){
    .contactMain{
        padding: 28px 16px 56px 16px;
    }

    .contactCard{
        padding: 28px 20px 24px 20px;
        border-radius: 18px;
    }

    .contactTitle{
        font-size: 28px;
    }

    .contactLead,
    .contactIntro{
        font-size: 16px;
    }

    /* Une colonne : deux champs côte à côte deviennent illisibles. Chaque champ
       prend toute la ligne, et la ligne reste en flex-wrap : passée en colonne,
       elle faisait de la base de 220 px une hauteur (135 px vides sous chaque
       champ). L'écart de 18 px vient du gap de .contactRow. */
    .contactRow > .contactField{
        flex-basis: 100%;
    }

}

/* ── Pages d'erreur ────────────────────────────────────────────────────── */

/* Les pages d'erreur (bundles/TwigBundle/Exception/_error_base.html.twig)
   reprennent cette carte. Leur corps peut venir du back office : image bornée,
   texte dans la police de la carte (la règle « * » de style.css impose sinon
   Poppins à chaque élément : paragraphes, puces, mais aussi liens et gras),
   actions espacées, y compris quand elles passent l'une sous l'autre. */
.errorCardImage{
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 8px auto 24px auto;
}

.errorCardBody,
.errorCardBody *{
    font-family: 'Afacad';
}

.errorCardActions{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}