/* =====================================================================
   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 Components/Pages/{Page}.razor.css.
   ===================================================================== */

: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; }

/* Petits écrans : les mots composés allemands (« Einstellungsoberfläche ») débordent aussi des titres et des colonnes
   flexibles, où break-word ne suffit pas (il ne réduit pas la largeur minimale). Césure partout, coupure en dernier recours. */
@media (max-width: 640px) {
    :lang(de) { hyphens: auto; overflow-wrap: anywhere; }
}

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 ; min(…, 100%) : une seule colonne sans débordement à 320 px. */
.qa-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; }

/* --- Couleurs des 8 modules (accueil, solutions) ----------------------
   Fond de carte, pastille (icône, puce, numéro) et texte d'accent ; la classe .qa-module-{ancre} les fixe. */

.qa-module-alert { --module-bg: #FCE8EF; --module-dot: #D6336C; --module-accent: #B0255A; }
.qa-module-one { --module-bg: #E5F4EA; --module-dot: #2E9E57; --module-accent: #1D7540; }
.qa-module-display { --module-bg: #F2E8F9; --module-dot: #9149C4; --module-accent: #7433A6; }
.qa-module-hub { --module-bg: #E5EFF9; --module-dot: #2F78C2; --module-accent: #225E9C; }
.qa-module-data { --module-bg: #E0F2F1; --module-dot: #138A84; --module-accent: #0D6A65; }
.qa-module-staff { --module-bg: #E8E9F8; --module-dot: #4F55C9; --module-accent: #3C41A8; }
.qa-module-journey { --module-bg: #FDEFDD; --module-dot: #E0861B; --module-accent: #9A5508; }
.qa-module-companion { --module-bg: #FDF5D6; --module-dot: #C29B00; --module-accent: #7E6300; }

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

/* Grand bandeau de l'accueil : sa photo et son voile sont dans Index.razor.css. */
.qa-hero {
    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.webp);
    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-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.webp);
}

[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);
}

/* --- 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. */

/* Pages Contact et Nous rejoindre : colonne de présentation + panneau blanc du formulaire, qui passe dessous en mobile. */
.qa-form-layout { display: flex; flex-wrap: wrap; gap: 48px; }

.qa-form-panel {
    flex: 999 1 520px;
    min-width: 0;
    background: #ffffff;
    border-radius: 24px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.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;
}