/* =====================================================================
   WebApp — Base : reset léger, typographie, éléments communs
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* ---- Ascenseurs personnalisés (toute l'application) ---- */
* { scrollbar-width: thin; scrollbar-color: var(--brand) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 10px; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--brand), var(--brand-700));
    border-radius: 10px; border: 3px solid var(--surface-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-700); }
::-webkit-scrollbar-corner { background: transparent; }

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--body);
    background: var(--bg);
    line-height: 1.65;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-head);
    color: var(--ink);
    line-height: 1.2;
    margin: 0 0 .5em;
    font-weight: 700;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); }

p { margin: 0 0 1rem; }

a { color: var(--brand); text-decoration: none; transition: color .15s; }
a:hover { color: var(--brand-700); }

img { max-width: 100%; height: auto; display: block; }

ul { margin: 0; padding: 0; list-style: none; }

/* Conteneur centré */
.container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* --- SECTIONS : TROIS DENSITÉS -----------------------------------------
   LE CONSTAT. Les dix sections de l'accueil avaient toutes exactement le
   même espacement, 96 px en haut comme en bas. La page se lisait donc comme
   une liste de blocs de poids égal : rien ne disait ce qui appartenait à
   quoi, ni où le discours changeait de registre.

   LA RÈGLE. L'espace vertical dit à quel point deux sections sont liées.

     .section            un sujet nouveau                  (défaut)
     .section--suite     prolonge la précédente            (retrait réduit)
     .section--ample     changement de registre            (retrait augmenté)

   Une section « suite » garde le FOND de celle qu'elle prolonge : c'est la
   conjonction des deux — même fond, peu d'espace — qui les fait lire comme
   un seul bloc. L'alternance de fond ne reprend qu'entre blocs distincts.
   Elle s'était cassée sur l'accueil, où trois sections claires se
   suivaient : le procédé ne signalait plus rien. */
.section { padding-block: clamp(48px, 7vw, 96px); }
.section--suite { padding-block-start: clamp(18px, 2.4vw, 32px); }
.section--ample { padding-block: clamp(72px, 10vw, 132px); }
.section--soft { background: var(--bg-soft); }
.section__head { max-width: 720px; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; }
.section__head p { color: var(--muted); font-size: var(--t-base); }

.eyebrow {
    display: inline-block;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--t-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-050);
    padding: .35em .8em;
    border-radius: var(--r-full);
    margin-bottom: 1rem;
}

/* Icônes SVG */
.icon { width: 24px; height: 24px; stroke: currentColor; }

/* Boutons */
.btn {
    --btn-bg: var(--brand);
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--t-base);
    padding: .8em 1.5em;
    border-radius: var(--r-full);
    border: 1.5px solid transparent;
    background: var(--btn-bg);
    color: #fff;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
    box-shadow: var(--shadow-sm);
}
.btn:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn .icon { width: 18px; height: 18px; }
.btn--accent { --btn-bg: var(--accent); }
.btn--ghost {
    background: transparent;
    color: var(--brand);
    border-color: var(--line);
}
.btn--ghost:hover { color: var(--brand-700); background: var(--brand-050); }
.btn--lg { padding: 1em 1.9em; font-size: var(--t-base); }
.btn--light { background: var(--surface); color: var(--brand); }
.btn--light:hover { color: var(--brand-700); }

/* Cartes */
.card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s;
    height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #c7d2e3; }
.card__icon {
    width: 54px; height: 54px;
    display: grid; place-items: center;
    border-radius: var(--r-md);
    background: var(--grad-brand);
    color: #fff;
    margin-bottom: 18px;
}
.card__icon .icon { width: 28px; height: 28px; }
/* Les titres de vignette sont passés de <h3> à <h2> pour supprimer le saut
   de niveau depuis le <h1> des pages de liste. Or `h2` vaut par défaut
   clamp(1.6rem, 3.2vw, 2.3rem) : sans la taille fixée ici, les cartes
   auraient doublé. La taille visuelle d'un titre de carte est désormais
   déclarée à part de son niveau sémantique — ce sont deux choses
   différentes, et c'est ce qui permet de corriger l'une sans casser l'autre. */
.card h2, .card h3 { font-size: var(--t-lg); margin-bottom: .4em; }
.card p { color: var(--muted); margin-bottom: 0; }

/* Grilles */
.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* Badges (admin + statuts) */
.badge {
    display: inline-block;
    font-size: var(--t-xs);
    font-weight: 600;
    padding: .25em .7em;
    border-radius: var(--r-full);
    background: #f1f5f9; color: var(--muted);
}
.badge--success { background: var(--success-bg); color: var(--success); }
.badge--warning { background: var(--warning-bg); color: var(--warning); }
.badge--info    { background: var(--info-bg);    color: var(--info); }
.badge--muted   { background: #f1f5f9;           color: var(--muted); }

/* Messages flash */
.alert {
    padding: 14px 18px;
    border-radius: var(--r-md);
    margin-bottom: 18px;
    font-size: var(--t-base);
    border: 1px solid transparent;
}
.alert--success { background: var(--success-bg); color: var(--success); border-color: #bbf7d0; }
.alert--error   { background: var(--danger-bg);  color: var(--danger);  border-color: #fecaca; }
.alert--info    { background: var(--info-bg);    color: var(--info);    border-color: #bfdbfe; }

/* Formulaires — champs en relief (3D), bien visibles */
.form-group { margin-bottom: 20px; }
.form-label {
    display: flex; align-items: center; gap: 7px;
    font-family: var(--font-head); font-weight: 600; color: var(--ink);
    margin-bottom: 8px; font-size: var(--t-sm);
}
.form-label .icon { width: 16px; height: 16px; color: var(--brand); }
.form-control {
    width: 100%;
    padding: .8em 1em;
    font: inherit;
    color: var(--ink);
    background: var(--surface-2);                 /* contraste sur cartes blanches */
    border: 1.6px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-inset);              /* léger creux 3D */
    transition: border-color .15s, box-shadow .18s, background .15s, transform .05s;
}
.form-control::placeholder { color: var(--muted); opacity: .75; }
.form-control:hover { border-color: var(--brand-600); }
.form-control:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--brand);
    box-shadow: var(--ring), var(--shadow-sm);    /* halo + relief au focus */
}
select.form-control { cursor: pointer; }
textarea.form-control { min-height: 140px; resize: vertical; }
.form-error { display: flex; align-items: center; gap: 5px; color: var(--danger); font-size: var(--t-sm); margin-top: 5px; }

/* Champ avec icône intégrée */
.input-icon { position: relative; }
.input-icon > .icon {
    position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: var(--muted); pointer-events: none; transition: color .15s;
}
.input-icon .form-control { padding-inline-start: 42px; }
.input-icon:focus-within > .icon { color: var(--brand); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 580px) { .form-row { grid-template-columns: 1fr; } }

/* Cartes de formulaire nettement délimitées (relief) */
.contact-card, .form-card, .login-card {
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
    position: relative;
}
.contact-card::before, .form-card::before {
    content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px;
    background: var(--grad-brand); border-radius: var(--r-lg) var(--r-lg) 0 0;
}

/* Honeypot : champ anti-spam invisible */
/*
   Leurre anti-spam. NE PAS revenir a « left: -9999px » : en arabe (dir=rtl)
   ce decalage etend la zone defilable du document au lieu de sortir de
   l'ecran. Mesure sur /ar/contact : 10 357 px de large, soit 8 857 px de
   defilement horizontal parasite. Meme piege que le lien d'evitement, deja
   corrige de la meme facon.
   Le masquage par decoupe reste hors de vue sans deplacer la boite. */
.hp-field {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Accessibilité : focus visible */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Utilitaires */
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}