/* Dropiris - Fichier : app.css - Role : composants du site marketing, mobile first - Auteur : Gilles J Capelluto - GJC */
/* Approche : base sous 360 px, puis seuils min-width croissants (annexe M). */
/* Inspiration : mockup COVALE Studio, hero navy vers violet, cartes blanches sur canvas clair. */

/* --- Base et typographie ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-900);
    background: var(--canvas);
}

h1, h2, h3 { line-height: 1.15; margin: 0 0 var(--s-4); letter-spacing: -0.01em; }
h1 { font-size: clamp(1.9rem, 5.5vw, 3.2rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 700; }
p  { margin: 0 0 var(--s-4); }

a { color: var(--primary-500); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--primary-600); }

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

/* Focus clavier toujours visible : anneau net, jamais supprime. */
:focus-visible {
    outline: 3px solid var(--primary-500);
    outline-offset: 2px;
    border-radius: var(--r-compact);
}

/* Lien d'evitement : premier element focusable, visible au clavier seulement. */
.evitement {
    position: absolute; left: -9999px; top: 0;
    background: var(--surface); color: var(--ink-900);
    padding: var(--s-3) var(--s-4); z-index: 100; border-radius: 0 0 var(--r-compact) 0;
}
.evitement:focus { left: 0; }

.conteneur {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--s-4);
}

/* --- Boutons : une action principale par zone --------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    padding: 12px 22px;
    border-radius: var(--r-card);
    border: 1px solid transparent;
    font: 600 1rem var(--font-ui);
    cursor: pointer;
    text-decoration: none;
    /* Reactivite immediate : l'accuse visuel part avant la fin du traitement (annexe I). */
    transition: background-color var(--motion-fast) var(--ease-sortie),
                border-color var(--motion-fast) var(--ease-sortie),
                transform var(--motion-fast) var(--ease-entree),
                box-shadow var(--motion-fast) var(--ease-sortie);
}
.btn:active { transform: scale(0.985); }

.btn-primaire { background: var(--primary-500); color: #fff; box-shadow: var(--shadow-1); }
.btn-primaire:hover { background: var(--primary-600); color: #fff; box-shadow: var(--shadow-2); }

.btn-secondaire { background: var(--surface); color: var(--ink-900); border-color: var(--border); }
.btn-secondaire:hover { border-color: var(--primary-500); color: var(--primary-600); }

/* Variante sur fond sombre (hero) : lisibilite AA conservee. */
.btn-clair { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.btn-clair:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }

.btn-large { padding: 14px 26px; font-size: 1.05rem; }

/* --- Badges sobres ------------------------------------------------------ */
.badge {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: 4px 12px; border-radius: var(--r-pill);
    font: 600 0.8rem var(--font-ui); letter-spacing: 0.02em;
}
.badge-mint    { background: var(--mint-050); color: #0E7A6E; }
.badge-primary { background: var(--primary-050); color: var(--primary-600); }

/* --- En-tete ------------------------------------------------------------ */
.entete {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}
.entete-barre {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-4); min-height: 64px;
}
.logo {
    display: inline-flex; align-items: center; gap: 10px;
    font: 800 1.25rem var(--font-ui); color: var(--ink-900); text-decoration: none;
}
.logo-iris { width: 26px; height: 26px; flex: none; }

/* Navigation : cachee en mobile, deroulee par le bouton menu (aria-expanded). */
.nav-principale { display: none; }
.nav-principale.ouverte {
    display: flex; flex-direction: column;
    position: absolute; inset: 64px 0 auto 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: var(--s-4); gap: var(--s-2); box-shadow: var(--shadow-2);
}
.nav-lien {
    color: var(--ink-900); text-decoration: none; font-weight: 600;
    padding: var(--s-2) var(--s-3); border-radius: var(--r-compact);
}
.nav-lien:hover { background: var(--canvas); color: var(--primary-600); }

.bouton-menu {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; /* cible tactile suffisante a tous les seuils */
    background: none; border: 1px solid var(--border); border-radius: var(--r-compact);
    cursor: pointer; color: var(--ink-900);
}

.entete-actions { display: none; }

/* --- Hero : degrade navy vers violet, texte blanc ----------------------- */
.hero {
    background: linear-gradient(120deg, var(--ink-900) 0%, #2A3170 55%, var(--primary-500) 130%);
    color: #fff;
    padding: var(--s-16) 0 var(--s-20);
}
.hero-eyebrow {
    display: inline-block;
    font: 700 0.78rem var(--font-ui);
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted-dark);
    margin-bottom: var(--s-4);
}
.hero h1 { color: #fff; max-width: 17ch; }
.hero-texte { font-size: 1.15rem; color: #D8DFEC; max-width: 54ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-6) 0 var(--s-4); }
.hero-note { font-size: 0.9rem; color: var(--muted-dark); margin: 0; }

/* --- Sections et cartes -------------------------------------------------- */
.section { padding: var(--s-16) 0; }
.section-blanche { background: var(--surface); }
.section-titre { text-align: center; max-width: 60ch; margin-inline: auto; }
.section-intro { text-align: center; color: var(--muted); max-width: 62ch; margin: 0 auto var(--s-10); }

.grille { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }

.carte {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    padding: var(--s-6);
    box-shadow: var(--shadow-1);
}
.carte h3 { margin-bottom: var(--s-2); }
.carte p { color: var(--muted); margin: 0; }

.carte-pictogramme {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-050); color: var(--primary-600);
    margin-bottom: var(--s-4);
}
.carte-pictogramme.mint { background: var(--mint-050); color: #0E7A6E; }

/* Etapes numerotees */
.etape-numero {
    font: 800 0.9rem var(--font-mono);
    color: var(--primary-600);
    letter-spacing: 0.06em;
}

/* --- Tarifs --------------------------------------------------------------- */
.tarif-carte {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-hero); padding: var(--s-8);
    box-shadow: var(--shadow-2);
    max-width: 460px; margin-inline: auto;
    text-align: center;
}
.tarif-prix { font: 800 3rem var(--font-ui); letter-spacing: -0.02em; }
.tarif-periode { color: var(--muted); }
.tarif-liste { list-style: none; padding: 0; margin: var(--s-6) 0; text-align: left; }
.tarif-liste li {
    padding: var(--s-2) 0 var(--s-2) 32px; position: relative; color: var(--ink-900);
}
/* Coche dessinee en CSS : le vert confirme, sans image externe. */
.tarif-liste li::before {
    content: ""; position: absolute; left: 0; top: 14px;
    width: 14px; height: 8px;
    border-left: 2.5px solid var(--success-500);
    border-bottom: 2.5px solid var(--success-500);
    transform: rotate(-45deg);
}

.table-packs { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-1); }
.table-packs th, .table-packs td { padding: var(--s-4); text-align: left; border-bottom: 1px solid var(--border); }
.table-packs th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); background: var(--canvas); }
.table-packs tr:last-child td { border-bottom: none; }
.table-packs .prix { font-weight: 800; white-space: nowrap; }

/* --- FAQ accessible : details/summary natifs ------------------------------ */
.faq { max-width: 760px; margin-inline: auto; }
.faq details {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-card); padding: var(--s-4) var(--s-5);
    margin-bottom: var(--s-3);
}
.faq summary { font-weight: 700; cursor: pointer; }
.faq details[open] summary { color: var(--primary-600); margin-bottom: var(--s-2); }
.faq p { color: var(--muted); margin: 0; }

/* --- Formulaires d'authentification --------------------------------------- */
.panneau-auth {
    max-width: 440px; margin: var(--s-12) auto;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-hero); padding: var(--s-8);
    box-shadow: var(--shadow-2);
}
.champ { margin-bottom: var(--s-4); }
.champ label { display: block; font-weight: 600; margin-bottom: var(--s-1); }
.champ input {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: var(--r-card);
    font: 400 1rem var(--font-ui); color: var(--ink-900); background: var(--surface);
    transition: border-color var(--motion-fast) var(--ease-sortie), box-shadow var(--motion-fast) var(--ease-sortie);
}
.champ input:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--primary-050); }
.champ .aide { font-size: 0.85rem; color: var(--muted); margin-top: var(--s-1); }
/* L'erreur est reliee au champ par aria-describedby et ne repose pas que sur la couleur. */
.champ .erreur { font-size: 0.9rem; color: var(--danger-500); font-weight: 600; margin-top: var(--s-1); }
.champ input[aria-invalid="true"] { border-color: var(--danger-500); }

.separateur {
    display: flex; align-items: center; gap: var(--s-3);
    color: var(--muted); font-size: 0.85rem; margin: var(--s-5) 0;
}
.separateur::before, .separateur::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.message-succes {
    background: var(--mint-050); border: 1px solid var(--mint-500);
    color: #0E7A6E; border-radius: var(--r-card);
    padding: var(--s-4); margin-bottom: var(--s-4); font-weight: 600;
}
.message-erreur {
    background: #FDECEB; border: 1px solid var(--danger-500);
    color: #B23A31; border-radius: var(--r-card);
    padding: var(--s-4); margin-bottom: var(--s-4); font-weight: 600;
}

/* --- Bande d'appel a l'action finale --------------------------------------- */
.bande-cta {
    background: linear-gradient(120deg, var(--ink-900), #2A3170);
    color: #fff; border-radius: var(--r-hero);
    padding: var(--s-10) var(--s-6); text-align: center;
    box-shadow: var(--shadow-2);
}
.bande-cta h2 { color: #fff; }
.bande-cta p { color: var(--muted-dark); }

/* --- Pied de page ----------------------------------------------------------- */
.pied {
    background: var(--ink-900); color: var(--muted-dark);
    padding: var(--s-12) 0 var(--s-8); margin-top: var(--s-16);
}
.pied a { color: #D8DFEC; text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied-grille { display: grid; grid-template-columns: 1fr; gap: var(--s-6); }
.pied-baseline { max-width: 34ch; }
.pied-liens { display: flex; flex-direction: column; gap: var(--s-2); }
.pied-legal { border-top: 1px solid rgba(255,255,255,0.12); margin-top: var(--s-8); padding-top: var(--s-5); font-size: 0.85rem; }
.pied .langues { display: flex; gap: var(--s-3); }
.pied .langues a[aria-current="true"] { color: #fff; font-weight: 700; text-decoration: underline; }

/* --- Points de rupture (annexe M) : la mise en page s'enrichit par seuils --- */

/* sm >= 480 px : grande mobile */
@media (min-width: 480px) {
    .hero-actions .btn { min-width: 220px; }
}

/* md >= 768 px : tablette portrait, grilles a 2 colonnes, navigation visible */
@media (min-width: 768px) {
    .grille-2md { grid-template-columns: repeat(2, 1fr); }
    .bouton-menu { display: none; }
    .nav-principale, .nav-principale.ouverte {
        display: flex; position: static; flex-direction: row;
        padding: 0; border: none; box-shadow: none; background: none;
        gap: var(--s-1);
    }
    .entete-actions { display: flex; gap: var(--s-3); align-items: center; }
    .pied-grille { grid-template-columns: 2fr 1fr 1fr; }
}

/* lg >= 1024 px : grilles a 3 et 4 colonnes */
@media (min-width: 1024px) {
    .grille-3lg { grid-template-columns: repeat(3, 1fr); }
    .grille-4lg { grid-template-columns: repeat(4, 1fr); }
    .section { padding: var(--s-20) 0; }
}

/* xl >= 1280 px : respiration de bureau */
@media (min-width: 1280px) {
    .hero { padding: var(--s-24) 0; }
}

/* 2xl >= 1536 px : le conteneur s'elargit moderement, la ligne de lecture reste bornee */
@media (min-width: 1536px) {
    .conteneur { max-width: 1320px; }
}

/* 3xl >= 1920 px : tres grand ecran, on borne pour ne jamais etirer les lignes */
@media (min-width: 1920px) {
    .conteneur { max-width: 1400px; }
    body { font-size: 17px; }
}