/* ==========================================================================
   Kelian — Invest in Armenia — Feuille de style principale
   Palette de marque étendue (vert sapin + cuivre + neutres clairs + touche bordeaux rosé).
   Fond clair unique sur tout le site : le vert sapin n'est jamais utilisé en grand aplat,
   seulement pour le texte et le logotype. Le cuivre est la couleur d'accent principale
   (boutons, bordures, motif) ; le bordeaux rosé est réservé à quelques touches ponctuelles
   (point du séparateur, erreurs de formulaire).
   Le site utilise quelques animations discrètes (dérive du motif de fond, entrée en cascade du
   hero, apparitions au scroll via la classe .reveal, survols de cartes) pour donner une
   impression de finition — toutes désactivées si l'utilisateur préfère moins de mouvement
   (prefers-reduced-motion).
   Sommaire :
   1. Variables (palette + rôles) et reset
   2. Utilitaires (container, boutons, titres de section, séparateur, apparitions au scroll)
   3. En-tête et navigation
   4. Hero
   5. Section "Comment ça marche"
   6. Instagram (en-tête, pied de page, bouton hero)
   7. Section à propos
   8. Section CTA
   9. Formulaire de contact
   10. Messages flash (succès / erreur)
   11. Pages texte (mentions légales, confidentialité)
   12. Pied de page
   13. Responsive
   14. Intro (ouverture animée de la page d'accueil)
   ========================================================================== */

/* 1. Variables et reset ---------------------------------------------------- */
:root {
    /* Palette de marque */
    --vert-sapin: #0f1d17;
    --vert-mousse: #1c3229;
    --vert-sauge: #3a5548;

    --cuivre: #c6976f;
    --cuivre-fonce: #a5734a;
    --cuivre-clair: #dbaf89;
    --sable: #f0d5b8;

    --blanc-casse: #f7f2ea;
    --creme: #e8dcc8;
    --beige-gris: #b9ac98;
    --brun-texte: #2a241d;

    --bordeaux-rose: #8a3b4c;

    --degrade-cuivre: linear-gradient(135deg, var(--cuivre-clair), var(--cuivre-fonce));

    /* Rôles — thème clair, utilisé sur tout le site.
       Note lisibilité : --texte-attenue utilise vert-sauge (contraste ~6:1 sur fond crème),
       pas beige-gris (contraste ~1,6:1, illisible). --accent (cuivre) est réservé aux traits
       fins, bordures et fonds de bouton — jamais utilisé comme couleur de texte lisible,
       son contraste sur fond clair est trop faible (~3:1). */
    --fond: var(--creme);
    --fond-carte: var(--blanc-casse);
    --texte: var(--brun-texte);
    --texte-attenue: var(--vert-sauge);
    --titre: var(--vert-sapin);
    --accent: var(--cuivre-fonce);
    --bordure: rgba(165, 115, 74, 0.3);
    --point-couleur: var(--bordeaux-rose);

    --succes-texte: var(--vert-mousse);
    --succes-fond: rgba(58, 85, 72, 0.1);
    --erreur-texte: var(--bordeaux-rose);
    --erreur-fond: rgba(138, 59, 76, 0.1);

    --rayon: 10px;
    --ombre: 0 12px 30px rgba(15, 29, 23, 0.1);

    --police-titres: 'Cinzel', 'Times New Roman', serif;
    --police-texte: 'Cormorant Garamond', 'Georgia', serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--police-texte);
    font-size: 19px;
    color: var(--texte);
    background: var(--fond);
    line-height: 1.65;
}

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

h1, h2, h3, h4 {
    font-family: var(--police-titres);
    color: var(--titre);
    line-height: 1.3;
    margin: 0 0 0.5em;
    letter-spacing: 0.03em;
}

a {
    color: inherit;
    text-decoration: none;
}

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

/* 2. Utilitaires ------------------------------------------------------------ */
.container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: 88px 0;
    text-align: center;
}

.section-titre {
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.section-titre-gauche {
    text-align: left;
}

.section-soustitre {
    color: var(--texte-attenue);
    max-width: 620px;
    margin: 0 auto 48px;
    font-size: 20px;
    font-style: italic;
}

.section-icone {
    width: 56px;
    margin: 0 auto 16px;
    opacity: 0.9;
}

/* Séparateur orné : ligne - point - ligne, tel que sur les visuels de marque */
.separateur-orne {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 220px;
    margin: 0 auto 20px;
}

.separateur-orne span:not(.separateur-point) {
    flex: 1;
    height: 1px;
    background: var(--accent);
    opacity: 0.7;
}

.separateur-point {
    width: 7px;
    height: 7px;
    border: 1px solid var(--point-couleur);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Apparition progressive au scroll : la classe .visible est ajoutée en JS (IntersectionObserver)
   quand l'élément entre dans le viewport. --delai-reveal (défini par élément) permet un effet
   de cascade sans jamais entrer en conflit avec les transitions de survol (:hover). */
.reveal {
    opacity: 0;
    transform: translateY(28px);
}

.reveal.visible {
    animation: reveal-entree 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--delai-reveal, 0s);
}

@keyframes reveal-entree {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.btn {
    display: inline-block;
    padding: 14px 30px;
    border-radius: 999px;
    font-family: var(--police-titres);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-principal {
    background: var(--degrade-cuivre);
    color: var(--vert-sapin);
    box-shadow: 0 4px 14px rgba(15, 29, 23, 0.15);
}

.btn-principal:hover {
    opacity: 0.9;
    box-shadow: 0 6px 18px rgba(15, 29, 23, 0.22);
}

.btn-outline {
    background: transparent;
    border-color: var(--titre);
    color: var(--titre);
}

.btn-outline:hover {
    background: var(--titre);
    color: var(--fond);
}

/* 3. En-tête et navigation --------------------------------------------------- */
/* Pastille flottante en verre dépoli (glassmorphism), au lieu d'une barre pleine largeur */
.entete {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    padding: 16px 24px 0;
}

.entete-contenu {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    max-width: 880px;
    padding: 10px 20px;
    gap: 24px;
    background: rgba(247, 242, 234, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--bordure);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 29, 23, 0.08);
}

.entete-contenu > .logo {
    grid-column: 1;
}

.entete-contenu > .navigation {
    grid-column: 2;
    justify-self: center;
}

.entete-contenu > .menu-mobile-bouton {
    grid-column: 3;
    justify-self: end;
}

.entete-embleme {
    grid-column: 3;
    justify-self: end;
    height: 34px;
    width: auto;
}

.logo {
    display: flex;
    flex-direction: column;
    line-height: 1;
    white-space: nowrap;
}

.logo-nom {
    font-family: var(--police-titres);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--titre);
}

.logo-baseline {
    font-family: var(--police-titres);
    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--texte-attenue);
    margin-top: 4px;
}

.navigation ul {
    display: flex;
    gap: 32px;
}

.navigation a {
    font-family: var(--police-titres);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--texte);
    padding: 8px 0;
    border-bottom: 1px solid transparent;
}

.navigation a:hover,
.navigation a.actif {
    color: var(--titre);
    border-bottom-color: var(--accent);
}

/* Sélecteur de langue en drapeaux, en petit coin fixe de la page (toujours visible, même au scroll).
   Repositionné en bas à droite sur mobile/tablette pour ne jamais chevaucher le bouton du menu
   mobile, qui occupe déjà le coin haut droit de l'en-tête à ces largeurs. */
.langue-coin {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 101;
    display: flex;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(247, 242, 234, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--bordure);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 29, 23, 0.08);
}

.langue-coin a {
    display: block;
    line-height: 0;
    border-radius: 3px;
    overflow: hidden;
    opacity: 0.45;
    filter: grayscale(60%);
    box-shadow: 0 0 0 1px rgba(15, 29, 23, 0.12);
    transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}

.langue-coin a:hover,
.langue-coin a.actif {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.12);
}

.entete-cta {
    white-space: nowrap;
}

.menu-mobile-bouton {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.menu-mobile-bouton span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--titre);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* 4. Hero -------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 48px 24px 120px;
    text-align: center;
    overflow: hidden;
}

/* Motif en filigrane (silhouette d'arche inspirée du logo), très discret, pas un aplat de couleur.
   Dérive lente et continue pour donner une impression vivante plutôt que statique. */
.hero-motif {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(240px, 60vw, 620px);
    height: auto;
    z-index: 0;
    opacity: 0.06;
    pointer-events: none;
    transform-origin: center;
    animation: motif-derive 26s ease-in-out infinite;
}

@keyframes motif-derive {
    0%   { transform: translate(-50%, -50%) scale(1); }
    50%  { transform: translate(-50%, -53%) scale(1.06); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

.hero-motif path {
    fill: none;
    stroke: var(--vert-sapin);
    stroke-width: 1.5;
}

/* Myosotis (emblème du souvenir), niché à la base du motif d'arche en arrière-plan, entre
   les deux arcs. Le décalage vertical est calculé sur la même base que .hero-motif (largeur
   clamp() x ratio de hauteur du viewBox) pour que les deux restent alignés à toutes les tailles. */
.hero-myosotis {
    position: absolute;
    top: calc(50% + 0.575 * clamp(240px, 60vw, 620px));
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(80px, 10vw, 130px);
    height: auto;
    z-index: 0;
    opacity: 0.16;
    pointer-events: none;
}

.hero-contenu {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto;
}

/* Entrée en cascade au chargement de la page */
@keyframes hero-entree {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-contenu > * {
    opacity: 0;
    animation: hero-entree 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-contenu > .hero-baseline { animation-delay: 0.18s; }
.hero-contenu > h1            { animation-delay: 0.3s; }
.hero-contenu > .hero-texte   { animation-delay: 0.48s; }
.hero-contenu > .hero-actions { animation-delay: 0.64s; }

.hero-baseline {
    font-family: var(--police-titres);
    text-transform: uppercase;
    letter-spacing: 0.35em;
    font-size: 13px;
    color: var(--texte-attenue);
    margin-bottom: 18px;
}

.hero h1 {
    font-size: clamp(26px, 3.6vw, 46px);
    line-height: 1.15;
    margin-bottom: 22px;
}

.hero-texte {
    font-size: 20px;
    color: var(--texte-attenue);
    margin: 0 auto 36px;
    max-width: 620px;
}

.hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* 5. Section "Comment ça marche" ---------------------------------------------- */
/* Recouvre le bas de la photo du hero avec un bord arrondi, comme un panneau qui glisse par-dessus. */
.comment-ca-marche {
    position: relative;
    z-index: 2;
    background: var(--fond);
    margin-top: -40px;
    padding-top: 128px;
    border-radius: 40px 40px 0 0;
}

.etapes-grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin-top: 24px;
}

.etape-carte {
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 36px 24px;
    box-shadow: var(--ombre);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.etape-carte:hover {
    transform: translateY(-6px);
    border-color: var(--accent);
    box-shadow: 0 20px 40px rgba(15, 29, 23, 0.14);
}

.etape-carte:nth-child(1) { --delai-reveal: 0s; }
.etape-carte:nth-child(2) { --delai-reveal: 0.08s; }
.etape-carte:nth-child(3) { --delai-reveal: 0.16s; }
.etape-carte:nth-child(4) { --delai-reveal: 0.24s; }

.etape-numero {
    display: block;
    font-family: var(--police-titres);
    font-size: 44px;
    font-weight: 700;
    background: var(--degrade-cuivre);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 10px;
}

.etape-carte h3 {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}

.etape-carte p {
    color: var(--texte-attenue);
    font-size: 18px;
    margin: 0;
}

/* 6. Instagram (en-tête, pied de page, bouton hero) --------------------------- */
.entete-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.entete-instagram {
    display: inline-flex;
    color: var(--titre);
    opacity: 0.85;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.entete-instagram:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.btn-instagram {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pied-instagram {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--texte-attenue);
}

.pied-instagram:hover {
    color: var(--titre);
}

.icone-instagram {
    flex-shrink: 0;
}

.icone-whatsapp {
    flex-shrink: 0;
    vertical-align: -4px;
}

.contact-lien {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.15s ease;
}

.contact-lien:hover {
    color: var(--titre);
}

/* 7. Section à propos --------------------------------------------------------- */
.a-propos-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
    text-align: left;
}

.a-propos-grille p {
    color: var(--texte-attenue);
    font-size: 19px;
}

.atouts-liste {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.atout-carte {
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 22px 26px;
    box-shadow: var(--ombre);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.atout-carte:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
    box-shadow: 0 16px 32px rgba(15, 29, 23, 0.12);
}

.atout-carte:nth-child(1) { --delai-reveal: 0s; }
.atout-carte:nth-child(2) { --delai-reveal: 0.1s; }
.atout-carte:nth-child(3) { --delai-reveal: 0.2s; }

.atout-carte h3 {
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.atout-carte p {
    margin: 0;
    color: var(--texte-attenue);
    font-size: 18px;
}

/* 8. Section CTA --------------------------------------------------------------- */
.cta-contenu {
    max-width: 640px;
    margin: 0 auto;
}

.cta-contenu p {
    color: var(--texte-attenue);
    font-size: 19px;
    margin-bottom: 30px;
}

.cta-contenu h2 {
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* 9. Formulaire de contact ------------------------------------------------------ */
.entete-page {
    border-bottom: 1px solid var(--bordure);
    text-align: center;
    padding: 64px 24px 44px;
}

.entete-page p {
    color: var(--texte-attenue);
    max-width: 560px;
    margin: 0 auto;
    font-size: 19px;
}

.contact-grille {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 48px;
    align-items: start;
    text-align: left;
}

.contact-infos,
.contact-formulaire-conteneur {
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 34px;
    box-shadow: var(--ombre);
}

.contact-infos h2 {
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.contact-infos p {
    margin: 10px 0;
    color: var(--texte-attenue);
}

.contact-note {
    margin-top: 18px;
    font-size: 16px;
    font-style: italic;
}

.champ-groupe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.champ {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.champ label {
    font-family: var(--police-titres);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--titre);
}

.champ input,
.champ select,
.champ textarea {
    width: 100%;
    font-family: var(--police-texte);
    font-size: 17px;
    padding: 12px 14px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    background: rgba(165, 115, 74, 0.06);
    color: var(--texte);
}

.champ select option {
    background: var(--fond-carte);
    color: var(--texte);
}

.champ input::placeholder,
.champ textarea::placeholder {
    color: var(--texte-attenue);
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(165, 115, 74, 0.18);
}

.champ input.champ-erreur,
.champ textarea.champ-erreur {
    border-color: var(--erreur-texte);
}

.champ textarea {
    resize: vertical;
}

/* Champ piège anti-spam : masqué visuellement mais accessible aux robots */
.champ-piege {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/* 10. Messages flash -------------------------------------------------------------- */
.flash-message {
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 500;
    transition: opacity 0.4s ease;
}

.flash-succes {
    background: var(--succes-fond);
    color: var(--succes-texte);
    border: 1px solid var(--vert-sauge);
}

.flash-erreur {
    background: var(--erreur-fond);
    color: var(--erreur-texte);
    border: 1px solid var(--erreur-texte);
}

.flash-message-cachee {
    opacity: 0;
}

/* 11. Pages texte ------------------------------------------------------------------ */
.page-texte {
    text-align: left;
}

.page-texte h1 {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 28px;
}

.page-texte h2 {
    font-size: 19px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 36px;
}

.page-texte p {
    color: var(--texte-attenue);
    font-size: 19px;
}

.note-a-completer {
    background: rgba(165, 115, 74, 0.08);
    border: 1px solid var(--accent);
    color: var(--titre);
    padding: 14px 18px;
    border-radius: 8px;
    font-style: italic;
}

/* 12. Pied de page ------------------------------------------------------------------ */
.pied-de-page {
    border-top: 1px solid var(--bordure);
    margin-top: 40px;
}

.pied-grille {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 32px;
    padding: 56px 24px 32px;
    text-align: left;
}

.pied-baseline {
    font-family: var(--police-titres);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 12px;
    color: var(--titre);
    margin-top: -8px;
    margin-bottom: 16px;
}

.pied-bloc h3,
.pied-bloc h4 {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 16px;
}

.pied-bloc p {
    color: var(--texte-attenue);
    font-size: 16px;
}

.pied-liens li {
    margin-bottom: 8px;
}

.pied-liens a {
    color: var(--texte-attenue);
    font-size: 16px;
}

.pied-liens a:hover {
    color: var(--titre);
}

.pied-copyright {
    border-top: 1px solid var(--bordure);
    text-align: center;
    padding: 18px 24px;
    font-size: 14px;
    color: var(--texte-attenue);
}

/* 13. Responsive --------------------------------------------------------------------- */
@media (max-width: 960px) {
    .etapes-grille {
        grid-template-columns: repeat(2, 1fr);
    }

    .a-propos-grille,
    .contact-grille {
        grid-template-columns: 1fr;
    }

    .pied-grille {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .navigation {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        background: rgba(247, 242, 234, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid var(--bordure);
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(15, 29, 23, 0.1);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }

    .navigation.navigation-ouverte {
        max-height: 320px;
    }

    .navigation ul {
        flex-direction: column;
        padding: 16px 24px;
        gap: 16px;
    }

    .menu-mobile-bouton {
        display: flex;
    }

    .entete-embleme {
        display: none;
    }

    /* Le coin haut droit est déjà pris par le bouton du menu mobile à ces largeurs :
       le sélecteur de langue descend en bas à droite pour ne jamais le chevaucher. */
    .langue-coin {
        top: auto;
        bottom: 16px;
        right: 16px;
    }

    .menu-mobile-bouton.actif span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .menu-mobile-bouton.actif span:nth-child(2) {
        opacity: 0;
    }

    .menu-mobile-bouton.actif span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

@media (max-width: 600px) {
    .champ-groupe {
        grid-template-columns: 1fr;
    }

    .etapes-grille {
        grid-template-columns: 1fr;
    }

    .pied-grille {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 56px 0;
    }
}

/* Hero mobile ET tablette (jusqu'à 1024px, pas juste les téléphones) : espacement généreux
   façon desktop (via gap), sans forcer toute la hauteur de l'écran (ça créait un vide immense
   sous le titre). */
@media (max-width: 1024px) {
    .hero {
        min-height: 82vh;
        gap: 48px;
        padding: 40px 20px;
    }
}

/* 14. Intro (ouverture animée de la page d'accueil) ------------------------------------- */
/* Séquence unique à la première visite : on avance vers l'arche du logo, elle grandit et
   "s'ouvre" (le motif grossit jusqu'à dépasser l'écran) pendant que le fond s'efface,
   révélant le site en dessous. Ne s'affiche qu'une fois par session (voir main.js),
   jamais sur les autres pages, et jamais si JavaScript est désactivé ou si l'utilisateur
   préfère moins de mouvement. */
.intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--fond);
    cursor: pointer;
    animation: intro-fondu 6s ease forwards;
}

.intro-overlay.intro-terminee {
    display: none;
}

.intro-arche {
    width: min(58vw, 420px);
    height: auto;
    opacity: 0;
    transform: scale(0.5);
    animation: intro-arche-anim 6s ease forwards;
}

.intro-nom,
.intro-baseline,
.intro-passer {
    opacity: 0;
    animation: intro-texte-anim 6s ease forwards;
}

.intro-nom {
    margin-top: 22px;
    font-family: var(--police-titres);
    font-size: 28px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--titre);
}

.intro-baseline {
    margin-top: 6px;
    font-family: var(--police-titres);
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--texte-attenue);
}

.intro-passer {
    position: absolute;
    bottom: 32px;
    font-family: var(--police-texte);
    font-size: 14px;
    color: var(--texte-attenue);
}

@keyframes intro-arche-anim {
    0%   { opacity: 0; transform: scale(0.5); }
    12%  { opacity: 1; }
    45%  { opacity: 1; transform: scale(1); }
    68%  { opacity: 1; transform: scale(1); }
    100% { opacity: 1; transform: scale(8); }
}

@keyframes intro-texte-anim {
    0%   { opacity: 0; transform: translateY(8px); }
    20%  { opacity: 1; transform: translateY(0); }
    58%  { opacity: 1; transform: translateY(0); }
    72%  { opacity: 0; transform: translateY(0); }
    100% { opacity: 0; }
}

@keyframes intro-fondu {
    0%   { opacity: 1; }
    72%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Respecte la préférence utilisateur "moins de mouvement" : toutes les animations sont neutralisées. */
@media (prefers-reduced-motion: reduce) {
    .intro-overlay {
        display: none !important;
    }

    .hero-motif,
    .hero-contenu > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .hero-myosotis {
        opacity: 0.16 !important;
    }

    .reveal {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .etape-carte,
    .atout-carte,
    .btn {
        transition: none !important;
    }
}