/* =====================================================================
   Styles globaux du site.
   - Les styles des composants (en-tête, pied de page…) sont dans leurs
     fichiers .razor.css (isolation CSS Blazor).
   - Les styles propres à une page sont dans css/pages/{page}.css,
     chargés uniquement sur cette page par SiteShell.
   ===================================================================== */

:root {
    --qa-pink: #C92A62;
    --qa-pink-dark: #9E1F4C;
    --qa-pink-light: #F06A97;
    --qa-ink: #23252F;
    --qa-muted: #545866;
    --qa-border: #E4E5EA;
    --qa-font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
    --qa-font-heading: 'Sora', 'Segoe UI', system-ui, sans-serif;
}

[dir="rtl"] {
    --qa-font-body: 'Source Sans 3', 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
    --qa-font-heading: 'Sora', 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
}

body {
    margin: 0;
    background: #ffffff;
    overflow-wrap: break-word;
    hyphens: manual;
}

/* Les mots longs (surtout en allemand) sont coupés plutôt que de faire déborder la page. */
:lang(de) p { hyphens: auto; }

/* Les colonnes flexibles des fragments HTML peuvent rétrécir sous la largeur de leur contenu. */
[style*="flex: 1 1"], [style*="flex: 999 1"] { min-width: 0; }

a { color: var(--qa-pink); }
a:hover { color: var(--qa-pink-dark); }

.qa-root {
    font-family: var(--qa-font-body);
    color: var(--qa-ink);
    background: #ffffff;
    font-size: 17px;
    line-height: 1.55;
}

/* --- Mise en page des sections ------------------------------------------
   Briques communes à toutes les pages. Ce qui est propre à une page reste dans son .razor.css. */

.qa-section { padding: 96px 32px; }
.qa-section-muted { background: #F4F4F7; }
.qa-section-dark { background: var(--qa-ink); }

/* Conteneur centré de 1240 px ; avec .qa-stack, ses blocs sont empilés et espacés. */
.qa-container { max-width: 1240px; margin: 0 auto; }
.qa-stack { display: flex; flex-direction: column; gap: 40px; }

/* Bloc de titre de section (SectionHeading + éventuel paragraphe d'introduction). */
.qa-heading { display: flex; flex-direction: column; gap: 14px; }
.qa-lead { margin: 0; font-size: 19px; color: var(--qa-muted); }

/* Grille de cartes qui s'adapte à la largeur. */
.qa-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }

/* --- Bandeaux (hero) ------------------------------------------------- */

.qa-hero {
    background-image: linear-gradient(90deg, rgba(18,20,30,0.55) 0%, rgba(18,20,30,0.25) 50%, rgba(18,20,30,0) 100%), url(/assets/hero-clair.jpg);
    background-size: cover;
    background-position: center;
}

.qa-hero-sm {
    background-image: linear-gradient(90deg, rgba(18,20,30,0.82) 0%, rgba(18,20,30,0.58) 50%, rgba(18,20,30,0.15) 85%, rgba(18,20,30,0.05) 100%), url(/assets/hero-ville.jpg);
    background-size: cover;
    background-position: center 60%;
}

.qa-hero h1, .qa-hero p, .qa-hero-sm h1, .qa-hero-sm p {
    text-shadow: 0 2px 14px rgba(10,12,20,0.55);
}

/* --- Fond quadrillé -------------------------------------------------- */

.qa-grid {
    background-color: #F7F7F9;
    background-image: linear-gradient(rgba(35,37,47,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(35,37,47,0.045) 1px, transparent 1px);
    background-size: 3.2cqw 3.2cqw;
}

/* --- Droite à gauche (arabe) : dégradés inversés ---------------------- */

[dir="rtl"] .qa-hero {
    background-image: linear-gradient(270deg, rgba(18,20,30,0.55) 0%, rgba(18,20,30,0.25) 50%, rgba(18,20,30,0) 100%), url(/assets/hero-clair.jpg);
}

[dir="rtl"] .qa-hero-sm {
    background-image: linear-gradient(270deg, rgba(18,20,30,0.82) 0%, rgba(18,20,30,0.58) 50%, rgba(18,20,30,0.15) 85%, rgba(18,20,30,0.05) 100%), url(/assets/hero-ville.jpg);
}

[dir="rtl"] .qa-grid {
    background-image: linear-gradient(rgba(35,37,47,0.045) 1px, transparent 1px), linear-gradient(270deg, rgba(35,37,47,0.045) 1px, transparent 1px);
}

/* --- Mobile : les boutons sur une ligne peuvent passer à la ligne ----- */

@media (max-width: 640px) {
    a span[style*="nowrap"], a[style*="nowrap"] { white-space: normal !important; }
}

/* --- Pages de message (404, erreur) ---------------------------------- */

.qa-message {
    max-width: 1240px;
    margin: 0 auto;
    padding: 120px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}

.qa-message h1 {
    margin: 0;
    font-family: var(--qa-font-heading);
    font-weight: 700;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
}

.qa-message p {
    margin: 0;
    font-size: 19px;
    color: var(--qa-muted);
}

/* --- Bouton principal -------------------------------------------------- */

.qa-btn {
    background: var(--qa-pink);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 17px;
    padding: 16px 28px;
    border-radius: 999px;
}

.qa-btn:hover {
    color: #ffffff;
}

/* --- Formulaires (contact, candidature) ---------------------------------
   Partagés par les composants de Components/Forms. Les Input* de Blazor sont des
   composants enfants : ces styles globaux les atteignent sans ::deep. */

.qa-form-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.qa-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.qa-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qa-field > label {
    font-weight: 600;
    font-size: 15px;
}

.qa-required {
    color: var(--qa-pink);
}

.qa-hint {
    font-size: 14px;
    color: var(--qa-muted);
}

.qa-input {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--qa-font-body);
    font-size: 17px;
    color: var(--qa-ink);
    background: #ffffff;
    border: 1.5px solid #C9CBD3;
    border-radius: 12px;
    padding: 13px 14px;
    min-height: 48px;
}

textarea.qa-input {
    resize: vertical;
}

input[type="file"].qa-input {
    padding: 11px 14px;
}

.qa-input.invalid {
    border-color: #B3261E;
}

.validation-message {
    color: #B3261E;
    font-size: 14px;
}

.qa-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.qa-consent > input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 3px;
    accent-color: var(--qa-pink);
    flex-shrink: 0;
}

.qa-consent > label {
    font-size: 15px;
    color: var(--qa-muted);
}

.qa-form-error {
    margin: 0;
    color: #B3261E;
    font-weight: 600;
}

/* Champ piège anti-spam : masqué par découpage plutôt que display:none, que certains robots détectent.
   Pas de décalage hors écran (left: -10000px) : en arabe (RTL), il créerait un défilement horizontal. */
.qa-trap {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.qa-submit {
    align-self: flex-start;
    background: var(--qa-pink);
    color: #ffffff;
    border: none;
    font-family: var(--qa-font-body);
    font-weight: 700;
    font-size: 17px;
    padding: 16px 30px;
    border-radius: 999px;
    cursor: pointer;
    min-height: 52px;
}

/* Confirmation après envoi. */

.qa-sent {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 0;
}

.qa-sent h2 {
    margin: 0;
    font-family: var(--qa-font-heading);
    font-weight: 700;
    font-size: 28px;
}

.qa-sent p {
    margin: 0;
    font-size: 17px;
    color: var(--qa-muted);
}

.qa-btn-secondary {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    margin-top: 10px;
    background: #ffffff;
    color: var(--qa-pink);
    border: 1.5px solid var(--qa-pink);
    font-weight: 700;
    font-size: 16px;
    padding: 12px 22px;
    border-radius: 999px;
    min-height: 48px;
    text-decoration: none;
}