/* =========================================================================
   Module Événements - feuille de style des landings publiques
   =========================================================================
   Volontairement AUTONOME : cette page ne charge pas style.css (180 Ko). Elle
   est ouverte au smartphone, sur le réseau saturé d'un salon, après un scan de
   QR code - chaque kilo-octet coûte une conversion. Aucune police distante :
   la pile système suffit et évite un aller-retour réseau bloquant.

   La couleur d'accent (--ev-accent) est injectée par event_page_shell() depuis
   l'événement : une seule feuille sert toutes les landings.
   ========================================================================= */

:root {
    --ev-accent:   #f7941d;               /* surchargé par l'événement */
    --ev-navy:     #16235e;
    --ev-ink:      #2b3350;
    --ev-muted:    #6b7280;
    --ev-line:     #ece3d8;
    --ev-card:     #ffffff;
    --ev-cream:    #fdf8f3;
    --ev-cream-2:  #fbeee0;
    --ev-r:        16px;
    --ev-r-lg:     26px;
    --ev-shadow:   0 18px 44px -24px rgba(22, 35, 94, .35);
    --ev-shadow-sm:0 6px 18px -12px rgba(22, 35, 94, .30);
    --ev-font:     system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color-scheme: light;                  /* landing volontairement claire */
}

*, *::before, *::after { box-sizing: border-box; }

@font-face {
    font-family: 'Kaushan Script';
    src: url('../fonts/kaushan-script-latin.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}

/* Écriture manuscrite de la maquette : « Consulting » sous le logo et le
   « Et vous ? » du hero. */
.ev-script {
    font-family: 'Kaushan Script', 'Segoe Script', 'Brush Script MT', cursive;
    font-style: normal;
}

/* L'attribut `hidden` doit toujours l'emporter : une classe qui pose un
   `display` (ici .ev-champ) le neutralise silencieusement, et un champ censé
   être masqué reste visible ET soumis. */
[hidden] { display: none !important; }

.ev-body {
    margin: 0;
    font-family: var(--ev-font);
    color: var(--ev-ink);
    background: var(--ev-cream);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.ev-body svg { width: 1em; height: 1em; flex: 0 0 auto; }

/* =========================================================================
   Écran 1 - Accueil
   ========================================================================= */

.ev-hero {
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: 32px 22px 44px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 80% at 100% 0%,   color-mix(in srgb, var(--ev-accent) 22%, transparent) 0%, transparent 55%),
        radial-gradient(90%  70% at 0% 100%,   var(--ev-cream-2) 0%, transparent 60%),
        linear-gradient(165deg, #ffffff 0%, var(--ev-cream) 58%, var(--ev-cream-2) 100%);
}

/* Visuel de fond de la maquette : feuillage à gauche, vagues orange à droite.
   Livré par défaut avec le module, remplaçable par un téléversement au
   back-office (--ev-bg).

   Cadrage : `100% auto` ancré en bas plutôt que `cover`. L'image est presque
   carrée ; en `cover` sur un écran de téléphone en portrait, les bords seraient
   rognés - donc le feuillage OU les vagues disparaîtraient. En pleine largeur
   ancrée en bas, les deux restent visibles à toutes les tailles, et seul le
   haut (uni) sort du cadre.

   Le fondu en haut évite toute ligne de raccord entre l'image et le dégradé
   de la page, quelle que soit la hauteur de l'écran. */
.ev-hero::before {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    /* Le calque épouse le format de l'image : le fondu porte alors sur le HAUT
       DE L'IMAGE, et non sur le haut de la page. Sans cela, le dégradé de
       masquage tombait au-dessus de l'image et laissait une ligne de raccord
       visible en travers de l'écran. */
    /* Téléphone : l'image est presque carrée. Ramenée à 375 px de large, ses
       décors deviennent un liseré. On donne donc au calque un format portrait
       et on cadre en bas à gauche : le feuillage retrouve la présence qu'il a
       sur la maquette, la teinte orange du bord droit reste visible. */
    aspect-ratio: 3 / 4;
    background-image: var(--ev-bg, url('../img/event-fond.webp'));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: cover;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 32%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 32%);
    pointer-events: none; z-index: 0;
}
@media (min-width: 640px) {
    .ev-hero::before { aspect-ratio: 1600 / 1378; background-position: center bottom; }
}
@media print { .ev-hero::before { display: none; } }

.ev-hero-inner {
    position: relative; z-index: 1;
    width: 100%; max-width: 560px; margin: 0 auto;
}

.ev-top {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
    padding-bottom: 22px; margin-bottom: 30px;
    border-bottom: 1px solid var(--ev-line);
}
.ev-logo img { display: block; width: 150px; height: auto; }
.ev-baseline {
    margin: 0; font-size: .82rem; line-height: 1.45; color: var(--ev-muted);
    padding-bottom: 9px; position: relative;
}
.ev-baseline b { color: var(--ev-accent); font-weight: 700; }
.ev-baseline::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 34px; height: 2px; border-radius: 2px; background: var(--ev-accent);
}

/* Le logo et sa signature manuscrite forment un bloc. */
.ev-logo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ev-logo-script {
    font-size: 1.15rem; color: var(--ev-navy); line-height: 1;
    margin-left: 4px; opacity: .9;
}

.ev-titre {
    margin: 0;
    font-size: clamp(2.5rem, 12vw, 3.9rem);
    line-height: .96;
    letter-spacing: -.03em;
    font-weight: 800;
    color: var(--ev-navy);
    text-transform: uppercase;
}
.ev-titre span { display: block; }
.ev-titre-accent { color: var(--ev-accent); }

.ev-sous-titre {
    margin: 14px 0 0;
    font-size: clamp(1.7rem, 6.5vw, 2.2rem);
    font-weight: 400;
    color: var(--ev-navy);
    line-height: 1.15;
}

.ev-accroche {
    margin: 26px 0 0;
    font-size: 1.02rem; line-height: 1.65; color: var(--ev-ink);
}
.ev-accroche mark {
    background: none; color: var(--ev-accent); font-weight: 700;
}

.ev-badges {
    list-style: none; margin: 26px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 12px 22px;
}
.ev-badges li {
    display: flex; align-items: center; gap: 8px;
    font-size: .88rem; font-weight: 600; color: var(--ev-navy);
}
.ev-badge-ico {
    display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: color-mix(in srgb, var(--ev-accent) 8%, #fff);
    border: 1.5px solid color-mix(in srgb, var(--ev-accent) 38%, #fff);
    color: var(--ev-accent); font-size: 16px;
}

.ev-ctas { display: grid; gap: 12px; margin-top: 32px; }

.ev-urgence {
    margin: 14px 0 0; font-size: .85rem; color: var(--ev-accent); font-weight: 600;
}

.ev-phrase-pied {
    margin: 34px 0 0; text-align: center;
    font-size: .92rem; color: var(--ev-muted);
}
.ev-coeur {
    margin-top: 10px; text-align: center;
    color: var(--ev-accent); font-size: 20px; opacity: .75;
}

/* =========================================================================
   Boutons
   ========================================================================= */

.ev-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px 24px;
    font: inherit; font-size: .95rem; font-weight: 700;
    letter-spacing: .02em; text-transform: uppercase;
    border-radius: var(--ev-r);
    border: 2px solid transparent;
    cursor: pointer; text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
    /* Cible tactile confortable : la landing est utilisée au pouce, debout. */
    min-height: 54px;
}
.ev-btn svg { font-size: 18px; }
.ev-btn:active { transform: translateY(1px); }

.ev-btn-primary {
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--ev-accent) 88%, #fff) 0%,
        var(--ev-accent) 55%,
        color-mix(in srgb, var(--ev-accent) 88%, #000) 100%);
    color: #fff;
    box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--ev-accent) 85%, #000);
}
.ev-btn-primary:hover { filter: brightness(1.04); }

.ev-btn-ghost {
    background: #fff; color: var(--ev-accent);
    border-color: color-mix(in srgb, var(--ev-accent) 45%, #fff);
}
.ev-btn-ghost:hover { border-color: var(--ev-accent); background: color-mix(in srgb, var(--ev-accent) 6%, #fff); }

.ev-btn-danger { color: #b3261e; border-color: #f0c6c2; }
.ev-btn-danger:hover { border-color: #b3261e; background: #fdf3f2; }

.ev-btn-full { width: 100%; }
.ev-btn-sm { padding: 11px 18px; min-height: 44px; font-size: .82rem; }

.ev-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* =========================================================================
   Écran 2 - Modale
   ========================================================================= */

.ev-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 18px; }
.ev-modal[hidden] { display: none; }
.ev-modal-scrim { position: absolute; inset: 0; background: rgba(22, 35, 94, .55); backdrop-filter: blur(2px); }

.ev-modal-box {
    position: relative;
    width: 100%; max-width: 560px;
    max-height: calc(100svh - 36px); overflow-y: auto;
    background: var(--ev-card);
    border-radius: var(--ev-r-lg);
    box-shadow: var(--ev-shadow);
    padding: 34px 24px 28px;
    text-align: center;
    animation: ev-pop .22s cubic-bezier(.22, .61, .36, 1);
}
@keyframes ev-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .ev-modal-box { animation: none; } }

.ev-modal-close {
    position: absolute; top: 14px; right: 14px;
    width: 38px; height: 38px; display: grid; place-items: center;
    border: 0; border-radius: 50%; background: transparent;
    color: var(--ev-muted); font-size: 20px; cursor: pointer;
}
.ev-modal-close:hover { background: #f3f5f8; color: var(--ev-navy); }

.ev-modal-ico {
    width: 60px; height: 60px; margin: 0 auto 18px;
    display: grid; place-items: center; border-radius: 50%;
    background: #f4f6fa; color: var(--ev-navy); font-size: 26px;
}

.ev-modal-box h2 {
    margin: 0; font-size: 1.4rem; font-weight: 800; color: var(--ev-navy); letter-spacing: -.01em;
}
/* Filet d'accent sous le titre - seulement sur l'écran de choix : les vues
   suivantes (créneaux, formulaire) portent un bouton « Retour » et n'ont pas
   la même respiration. */
[data-ev-vue="choix"] > h2 { padding-bottom: 14px; position: relative; }
[data-ev-vue="choix"] > h2::after {
    content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 38px; height: 2px; border-radius: 2px; background: var(--ev-accent);
}
.ev-modal-texte { margin: 10px 0 0; font-size: .92rem; line-height: 1.55; color: var(--ev-muted); }
.ev-modal-pied {
    margin: 22px 0 0; display: flex; align-items: center; justify-content: center; gap: 7px;
    font-size: .8rem; color: var(--ev-muted);
}

.ev-retour {
    position: absolute; top: 16px; left: 16px;
    display: inline-flex; align-items: center; gap: 6px;
    border: 0; background: transparent; cursor: pointer;
    font: inherit; font-size: .85rem; font-weight: 600; color: var(--ev-muted);
    padding: 6px 8px; border-radius: 8px;
}
.ev-retour:hover { background: #f3f5f8; color: var(--ev-navy); }
/* Le bouton « Retour » étant en position absolue, les vues qui en portent un
   décalent leur titre : sinon il passe dessous sur petit écran. */
[data-ev-vue="creneaux"] > h2,
[data-ev-vue="form"] > h2 { margin-top: 34px; }

/* ── Les deux cartes de choix ── */
.ev-cartes { display: grid; gap: 12px; margin-top: 24px; }
@media (min-width: 480px) { .ev-cartes { grid-template-columns: 1fr 1fr; } }

.ev-carte {
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    padding: 26px 18px;
    background: #f5f7fa; border: 1.5px solid #e6eaf0; border-radius: var(--ev-r);
    cursor: pointer; font: inherit; text-align: center;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ev-carte:hover { transform: translateY(-2px); box-shadow: var(--ev-shadow-sm); border-color: var(--ev-line-2, #ccd4e0); }

/* La carte « créneau » est l'action que l'on souhaite voir choisie : elle est
   teintée et bordée dès le repos, pas seulement au survol. */
.ev-carte-accent {
    background: color-mix(in srgb, var(--ev-accent) 9%, #fff);
    border-color: color-mix(in srgb, var(--ev-accent) 32%, #fff);
}
.ev-carte-accent:hover { border-color: color-mix(in srgb, var(--ev-accent) 60%, #fff); }

.ev-carte-ico {
    display: grid; place-items: center; width: 52px; height: 52px;
    border-radius: 50%; background: #fff; color: var(--ev-accent); font-size: 22px;
    box-shadow: var(--ev-shadow-sm);
}
.ev-carte-accent .ev-carte-ico { border-radius: 15px; }
.ev-carte-titre { font-size: 1rem; font-weight: 800; color: var(--ev-navy); line-height: 1.25; }
.ev-carte-texte { font-size: .82rem; color: var(--ev-muted); line-height: 1.45; }

/* ── Grille de créneaux ── */
.ev-jours {
    display: flex; gap: 8px; overflow-x: auto; margin: 22px 0 16px;
    padding-bottom: 6px; scrollbar-width: thin;
}
.ev-jour {
    flex: 0 0 auto; padding: 10px 16px; border-radius: var(--ev-r);
    border: 2px solid var(--ev-line); background: #fff;
    font: inherit; font-size: .85rem; font-weight: 600; color: var(--ev-navy);
    cursor: pointer; white-space: nowrap;
}
.ev-jour.on { border-color: var(--ev-accent); background: color-mix(in srgb, var(--ev-accent) 10%, #fff); }

.ev-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px; }
.ev-slot {
    padding: 13px 8px; border-radius: 12px;
    border: 2px solid var(--ev-line); background: #fff;
    font: inherit; font-size: .95rem; font-weight: 700; color: var(--ev-navy);
    cursor: pointer; line-height: 1.2;
}
.ev-slot:hover:not([disabled]) { border-color: var(--ev-accent); }
.ev-slot small { display: block; font-size: .66rem; font-weight: 600; color: var(--ev-accent); margin-top: 3px; }
/* Un créneau complet reste VISIBLE (grisé) : voir qu'il ne reste presque plus
   de place pousse à réserver, le masquer donne l'impression d'un agenda vide. */
.ev-slot[disabled] { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.ev-slot[disabled] small { color: var(--ev-muted); text-decoration: none; }

.ev-vide { grid-column: 1 / -1; margin: 0; padding: 22px 0; color: var(--ev-muted); font-size: .9rem; }

/* =========================================================================
   Formulaire
   ========================================================================= */

.ev-form { margin-top: 20px; text-align: left; }
.ev-champs { display: grid; gap: 14px; }
@media (min-width: 480px) { .ev-champs { grid-template-columns: 1fr 1fr; } }

.ev-champ { display: block; margin-bottom: 14px; }
.ev-champs .ev-champ { margin-bottom: 0; }
.ev-champ > span {
    display: block; margin-bottom: 6px;
    font-size: .8rem; font-weight: 700; color: var(--ev-navy);
}
.ev-champ > span i { color: var(--ev-accent); font-style: normal; }

.ev-champ input, .ev-champ select, .ev-champ textarea {
    width: 100%; padding: 13px 14px;
    font: inherit; font-size: 1rem;   /* 16px : empêche le zoom auto d'iOS */
    color: var(--ev-ink); background: #fff;
    border: 2px solid var(--ev-line); border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ev-champ textarea { resize: vertical; min-height: 76px; }
.ev-champ input:focus, .ev-champ select:focus, .ev-champ textarea:focus {
    outline: 0; border-color: var(--ev-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ev-accent) 18%, transparent);
}
.ev-champ.ev-ko input, .ev-champ.ev-ko select { border-color: #d9534f; }

.ev-consent {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 18px 0; font-size: .82rem; line-height: 1.5; color: var(--ev-muted);
}
.ev-consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ev-accent); flex: 0 0 auto; }
.ev-consent i { color: var(--ev-accent); font-style: normal; }
.ev-consent.ev-ko span { color: #b3261e; }

.ev-rappel-slot {
    margin: 14px 0 0; padding: 11px 14px; border-radius: 12px;
    background: color-mix(in srgb, var(--ev-accent) 10%, #fff);
    font-size: .88rem; font-weight: 700; color: var(--ev-navy);
}

.ev-erreur {
    margin: 0 0 14px; padding: 12px 14px; border-radius: 12px;
    background: #fdf0ef; border: 1px solid #f3c9c5; color: #b3261e;
    font-size: .86rem; line-height: 1.45;
}

/* Honeypot : hors flux et hors lecture d'écran, mais présent dans le DOM. */
.ev-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =========================================================================
   Écran 3 - Confirmation
   ========================================================================= */

.ev-merci, .ev-simple {
    max-width: 560px; margin: 0 auto; padding: 48px 22px 56px;
    min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
    text-align: center; position: relative;
    background:
        radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--ev-accent) 12%, transparent) 0%, transparent 60%);
}

/* Décor de l'écran de confirmation : posé derrière la coche, sans jamais
   capter le clic ni gêner la lecture. */
.ev-confetti {
    position: absolute; left: 50%; top: 26px; transform: translateX(-50%);
    width: min(360px, 96%); color: var(--ev-accent);
    pointer-events: none; z-index: 0; opacity: .85;
}
.ev-confetti svg { width: 100%; height: auto; display: block; }
@media (min-width: 1024px) { .ev-confetti { top: 10px; width: min(430px, 70%); } }
@media print { .ev-confetti { display: none; } }

.ev-check {
    position: relative; z-index: 1;
    width: 92px; height: 92px; margin: 0 auto 26px;
    display: grid; place-items: center; border-radius: 50%;
    background: #fff; color: var(--ev-accent); font-size: 42px;
    box-shadow: 0 14px 40px -18px color-mix(in srgb, var(--ev-accent) 80%, #000);
    border: 3px solid color-mix(in srgb, var(--ev-accent) 22%, #fff);
}
.ev-check-mute { color: var(--ev-muted); border-color: var(--ev-line); box-shadow: var(--ev-shadow-sm); }

.ev-merci-titre {
    margin: 0; font-size: clamp(2.1rem, 9vw, 3rem); font-weight: 800;
    color: var(--ev-navy); letter-spacing: -.02em;
}
.ev-merci-texte { margin: 12px 0 0; font-size: 1rem; color: var(--ev-ink); }

.ev-rdv-card {
    margin: 26px 0 0; padding: 22px 20px;
    background: #fff; border-radius: var(--ev-r-lg); box-shadow: var(--ev-shadow-sm);
    border: 1px solid var(--ev-line);
}
.ev-rdv-k { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ev-muted); }
.ev-rdv-v { margin: 6px 0 4px; font-size: 1.15rem; font-weight: 800; color: var(--ev-navy); }
.ev-rdv-meta { font-size: .84rem; color: var(--ev-muted); margin-bottom: 16px; }

.ev-puces {
    list-style: none; margin: 24px 0 0; padding: 20px;
    background: #fff; border-radius: var(--ev-r-lg); box-shadow: var(--ev-shadow-sm);
    display: grid; gap: 16px; text-align: left;
}
.ev-puces li { display: flex; align-items: flex-start; gap: 14px; font-size: .88rem; line-height: 1.5; color: var(--ev-muted); }
.ev-puces strong { display: block; color: var(--ev-navy); font-size: .92rem; }
.ev-puce-ico {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 50%;
    background: color-mix(in srgb, var(--ev-accent) 12%, #fff);
    color: var(--ev-accent); font-size: 19px;
}

.ev-signature {
    margin: 30px 0 0; font-size: 1.7rem; font-weight: 400; color: var(--ev-navy);
}
.ev-annuler-lien { margin: 18px 0 0; font-size: .82rem; color: var(--ev-muted); }
.ev-annuler-lien a { color: var(--ev-muted); }

.ev-marque {
    margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--ev-line);
    display: flex; align-items: center; justify-content: center; gap: 18px;
    font-size: .78rem; line-height: 1.45; color: var(--ev-muted); text-align: left;
}
.ev-marque img { width: 120px; height: auto; }

/* Écrans utilitaires (404, annulation) */
.ev-simple h1 { margin: 0 0 12px; font-size: 1.8rem; font-weight: 800; color: var(--ev-navy); }
.ev-simple p { margin: 0 0 10px; color: var(--ev-muted); line-height: 1.6; }
.ev-simple-actions { display: grid; gap: 10px; margin-top: 24px; }
.ev-simple-foot { margin-top: 28px; font-size: .8rem; }

/* =========================================================================
   Responsive - trois mises en page réelles
   =========================================================================
   La base ci-dessus est la version SMARTPHONE (colonne unique, pleine
   largeur). Les deux paliers suivants ne se contentent pas de l'élargir :
   la tablette respire et aligne les actions, le bureau passe en deux
   colonnes - le titre à gauche, les actions à droite - car une colonne de
   560 px centrée au milieu d'un écran de 1600 px n'est pas une version
   bureau, c'est une version mobile étirée.
   ========================================================================= */

/* ── Tablette ─────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
    .ev-hero { padding: 46px 34px; }
    .ev-hero-inner { max-width: 680px; }

    .ev-titre       { font-size: clamp(3rem, 7.4vw, 4rem); }
    .ev-sous-titre  { font-size: clamp(1.7rem, 4vw, 2.1rem); }
    .ev-accroche    { font-size: 1.08rem; max-width: 58ch; }

    /* Les boutons se dimensionnent sur leur libellé plutôt que sur une
       demi-largeur : « Être rappelé par un expert » ne doit pas se couper. */
    .ev-ctas { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
    .ev-ctas .ev-btn { flex: 0 1 auto; }

    .ev-badges { gap: 14px 28px; }

    .ev-merci, .ev-simple { max-width: 640px; padding: 56px 30px 60px; }
    .ev-puces { padding: 26px; }
    .ev-modal-box { max-width: 620px; }
}

/* ── Bureau ───────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    .ev-hero { padding: 0; display: grid; align-items: center; }
    .ev-hero-inner {
        max-width: 1180px; margin: 0 auto; padding: 60px 56px 64px;
    }

    /* Deux colonnes : le discours à gauche, la décision à droite.
       Nom explicite : `.ev-body` est déjà la classe du <body> de la page. */
    .ev-hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
        gap: 20px 64px;
        align-items: center;
    }
    .ev-side {
        display: flex; flex-direction: column; align-items: flex-start;
        gap: 4px;
        padding-left: 40px;
        border-left: 1px solid var(--ev-line);
    }

    .ev-titre      { font-size: clamp(3.6rem, 4.4vw, 4.9rem); }
    .ev-sous-titre { font-size: 2.3rem; margin-top: 14px; }
    .ev-accroche   { font-size: 1.12rem; margin-top: 30px; max-width: 46ch; }

    /* Dans la colonne d'action, les repères s'empilent : lus de haut en bas,
       ils construisent l'argument juste avant le bouton. */
    .ev-badges { flex-direction: column; align-items: flex-start; gap: 14px; margin: 0 0 28px; }
    .ev-badges li { font-size: .95rem; }

    .ev-ctas { flex-direction: column; align-self: stretch; gap: 12px; margin: 0; }
    .ev-ctas .ev-btn { width: 100%; flex: 0 0 auto; font-size: 1rem; padding: 17px 26px; }

    .ev-urgence     { margin: 16px 0 0; }
    .ev-phrase-pied { text-align: left; margin: 26px 0 0; }
    .ev-coeur       { text-align: left; margin-top: 12px; }

    /* Le voile décoratif ne doit plus barrer le pied d'une page haute. */
    .ev-hero::after { height: 24%; }

    /* Écran 3 : la confirmation s'aère au lieu de rester en colonne étroite. */
    .ev-merci, .ev-simple { max-width: 780px; padding: 64px 40px 72px; }
    .ev-puces { grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 30px; text-align: center; }
    .ev-puces li { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
    .ev-modal-box { max-width: 680px; }
}

/* ── Très grands écrans ───────────────────────────────────────────────── */
@media (min-width: 1500px) {
    .ev-hero-inner { max-width: 1300px; }
    .ev-titre      { font-size: 5.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ev-btn, .ev-carte { transition: none; }
}