/* ============================================================
   AU FIL DES ÂMES — assets/css/accueil.css
   Styles spécifiques à la page d'accueil (index.php)
   ============================================================ */

/* ── Styles spécifiques à index.php ───────────── */
.page-accueil { padding-bottom: 4rem; }
.section-bloc { margin-top: 2.75rem; }

/* ── Édito de la Jardinière ───────────────────── */
.edito-carte {
    display: grid;
    grid-template-columns: 120px 1fr;
    overflow: hidden;
    padding: 0;
}
/* Carte cliquable */
.edito-lien {
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition), transform var(--transition);
}
.edito-lien:hover {
    box-shadow: var(--ombre-survol);
    transform: translateY(-2px);
}
.edito-lien:hover .edito-suite {
    color: var(--accent);
    text-decoration: underline;
}
.edito-photo {
    overflow: hidden;
    background: var(--accent-doux);
}
.edito-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform .4s ease;
}
.edito-lien:hover .edito-photo img {
    transform: scale(1.04);
}
.edito-photo-placeholder {
    width: 100%; height: 100%; min-height: 160px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem;
}
.edito-corps {
    padding: 1.75rem 2rem;
    display: flex; flex-direction: column;
    gap: 1.25rem; justify-content: center;
}
.edito-texte {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: var(--texte-secondaire);
    line-height: 1.85;
    font-style: italic;
}
.edito-suite {
    font-family: var(--font-sans);
    font-size: var(--taille-xs);
    color: var(--texte-discret);
    font-style: normal;
    margin-left: .25rem;
    transition: color var(--transition);
}
.edito-signature {
    display: flex; align-items: center; gap: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--bordure-douce);
}
.edito-nom  { font-family: var(--font-sans); font-size: var(--taille-sm); font-weight: 500; color: var(--accent); }
.edito-date { font-family: var(--font-sans); font-size: var(--taille-xs); color: var(--texte-discret); }

/* Hero membre */
.hero-membre { padding: 2.75rem 0 .5rem; }
.hero-bienvenue { font-family: var(--font-serif); font-size: 1.7rem; color: var(--texte-principal); }
.hero-sous { font-size: var(--taille-sm); color: var(--texte-discret); margin-top: .3rem; }

/* Hero visiteur */
.hero-visiteur { padding: 5rem 0 3rem; text-align: center; }
.hero-surtitle {
    font-family: var(--font-sans); font-size: var(--taille-xs);
    letter-spacing: .15em; text-transform: uppercase;
    color: var(--texte-discret); margin-bottom: 1rem;
}
.hero-titre { font-size: clamp(1.9rem, 4.5vw, 2.8rem); line-height: 1.2; margin-bottom: 1.25rem; }
.hero-chapeau { font-size: 1.05rem; color: var(--texte-secondaire); line-height: 1.75; margin-bottom: 1.75rem; }
.hero-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* Blocs à venir */
.grille-a-venir { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.a-venir-carte { display: flex; align-items: flex-start; gap: 1.1rem; opacity: .82; }
.a-venir-icone { font-size: 1.4rem; flex-shrink: 0; margin-top: .1rem; }
.a-venir-corps { display: flex; flex-direction: column; gap: .4rem; }
.a-venir-titre { font-family: var(--font-serif); font-size: 1rem; color: var(--texte-secondaire); }
.a-venir-texte { font-size: var(--taille-sm); color: var(--texte-discret); line-height: 1.6; }
.theme-carte { max-width: 460px; }

/* Coup de cœur */
.coup-de-coeur {
    display: grid; grid-template-columns: 1fr 1.5fr;
    overflow: hidden; padding: 0;
    text-decoration: none; color: inherit;
    transition: box-shadow var(--transition), transform var(--transition);
}
.coup-de-coeur:hover { box-shadow: var(--ombre-survol); transform: translateY(-2px); }
.cdc-image { overflow: hidden; min-height: 240px; }
.cdc-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.coup-de-coeur:hover .cdc-image img { transform: scale(1.04); }
.cdc-corps { padding: 2rem 2.25rem; display: flex; flex-direction: column; justify-content: center; gap: .8rem; }
.cdc-rubrique { font-size: var(--taille-xs); color: var(--accent-or); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.cdc-titre { font-size: 1.45rem; line-height: 1.25; }
.cdc-mot { font-family: var(--font-serif); font-size: .95rem; color: var(--texte-secondaire); line-height: 1.7; border-left: 2px solid var(--bordure); padding-left: 1rem; font-style: italic; }
.cdc-mot cite { display: block; margin-top: .35rem; font-size: var(--taille-xs); font-style: normal; color: var(--texte-discret); font-family: var(--font-sans); }
.cdc-chapeau { font-size: var(--taille-sm); color: var(--texte-secondaire); line-height: 1.65; }
.cdc-auteur { font-size: var(--taille-xs); color: var(--texte-discret); }

/* Vignette sans photo */
.vignette-placeholder {
    width: 100%; height: 100%; min-height: 150px;
    background: var(--accent-doux);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
}

/* Articles vides */
.articles-vides { padding: 2.5rem 1.5rem; }

/* Bloc écrire */
.bloc-ecrire { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.bloc-ecrire-texte { font-size: 1.05rem; color: var(--texte-secondaire); line-height: 1.7; flex: 1; min-width: 200px; }

/* Footer */
.site-footer { margin-top: 4rem; border-top: 1px solid var(--bordure-douce); padding: 2.5rem 0; background: var(--fond-carte); }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
.footer-logo { font-family: var(--font-serif); font-size: 1rem; color: var(--texte-secondaire); }
.footer-devise { font-size: var(--taille-sm); color: var(--texte-discret); }
.footer-nav { display: flex; gap: 1.5rem; margin-top: .5rem; flex-wrap: wrap; justify-content: center; }
.footer-nav a { font-size: var(--taille-xs); color: var(--texte-discret); transition: color var(--transition); }
.footer-nav a:hover { color: var(--texte-secondaire); }

/* Responsive */
@media (max-width: 768px) {
    .grille-a-venir, .coup-de-coeur { grid-template-columns: 1fr; }
    .cdc-image { min-height: 200px; }
    .cdc-corps { padding: 1.5rem; }
    .bloc-ecrire { flex-direction: column; text-align: center; }
    /* Édito mobile — photo au-dessus du texte */
    .edito-carte { grid-template-columns: 1fr; }
    .edito-photo { height: 160px; }
    .edito-corps { padding: 1.25rem 1.5rem; }
}

/* ============================================================
   ACCUEIL.CSS — AJOUT POUR LE PAVÉ « MODE D'EMPLOI DU SITE »
   À coller à la FIN de assets/css/accueil.css
   ============================================================ */


/* ── Variante de carte : ton brun chaud ─────────────────────
   Cohérente avec carte-vert / carte-or / carte-bleu / carte-violet
   déjà définies. On ajoute carte-brun pour le Mode d'emploi. */
.carte-brun {
    border-left: 4px solid #9c7a5c;
}


/* ── Pavé « Mode d'emploi » sur l'accueil ──────────────────
   Même esprit que le bloc édito, version plus sobre :
   icône + titre + préambule + lien de lecture */
.guide-accueil-carte {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 1.8rem 2rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .25s, transform .2s;
}

.guide-accueil-carte:hover {
    box-shadow: 0 6px 22px rgba(0, 0, 0, .09);
    transform: translateY(-2px);
}

.guide-accueil-icone {
    font-size: 2.2rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: .25rem;
    color: #9c7a5c;
}

.guide-accueil-corps {
    flex: 1;
    min-width: 0;
}

.guide-accueil-titre {
    font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--texte-principal, #1e1c1a);
    margin: 0 0 .6rem;
}

.guide-accueil-preambule {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--texte-secondaire, #6b5f52);
    margin: 0 0 .8rem;
}

.guide-accueil-suite {
    display: inline-block;
    font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif);
    font-size: .85rem;
    color: #9c7a5c;
    letter-spacing: .02em;
    transition: color .2s;
}

.guide-accueil-lien:hover .guide-accueil-suite {
    color: #7a5c3e;
}


/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 640px) {
    .guide-accueil-carte {
        flex-direction: column;
        gap: .8rem;
        padding: 1.4rem 1.2rem;
    }
    .guide-accueil-icone    { font-size: 1.8rem; margin-top: 0; }
    .guide-accueil-titre    { font-size: 1.3rem; }
    .guide-accueil-preambule { font-size: 1rem; }
}
/* ============================================================
   À AJOUTER À LA FIN de assets/css/accueil.css
   Carrousel des derniers articles publiés
   ============================================================ */


/* ── Conteneur du carrousel ────────────────────────────────── */
.carrousel-articles {
    position: relative;
    /* Marge horizontale négative pour que les cartes "respirent" sur les bords
       (effet bord d'une revue) */
    margin: 0 -.25rem;
}

.carrousel-articles:focus {
    outline: none;
}

.carrousel-articles:focus-visible .carrousel-piste {
    box-shadow: 0 0 0 2px var(--accent-doux);
    border-radius: var(--rayon-lg);
}


/* ── Piste de défilement ───────────────────────────────────── */
/* Utilise scroll-snap CSS — natif, fluide, swipe gratuit sur mobile */
.carrousel-piste {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2rem) / 3); /* 3 cartes visibles sur desktop */
    gap: 1rem;

    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    /* Marge intérieure pour que les cartes ne soient pas collées aux bords */
    padding: .5rem .25rem 1rem;

    /* Cacher la scrollbar (subtile sur mobile, propre sur desktop) */
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* IE/Edge */
}

.carrousel-piste::-webkit-scrollbar {
    display: none;                    /* Chrome/Safari */
}


/* ── Slides — chaque carte article ─────────────────────────── */
.carrousel-slide {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    /* Hérite du style .carte-article de style.css */
    /* Permet le hover plein effet (élévation + zoom photo) — c'est public */
}


/* ── Graines de navigation ─────────────────────────────────── */
.carrousel-graines {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .65rem;
    margin-top: 1.4rem;
    padding: 0 1rem;
    flex-wrap: wrap;
}

.graine {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background var(--transition),
                transform var(--transition),
                border-color var(--transition);
    /* Zone tactile élargie sans grossir le visuel */
    position: relative;
}

.graine::before {
    /* Zone de clic invisible plus large que le rond visible */
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
}

.graine:hover {
    background: var(--accent-doux);
    transform: scale(1.15);
}

.graine:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    outline-style: dotted;
}

.graine.active {
    background: var(--accent);
    transform: scale(1.1);
}


/* ── Responsive ─────────────────────────────────────────────── */

/* Tablette intermédiaire — on garde 3 cartes mais un peu moins large */
@media (max-width: 1024px) {
    .carrousel-piste {
        grid-auto-columns: calc((100% - 1.5rem) / 3);
        gap: .75rem;
    }
}

/* Mobile — 1 seule carte visible, plus large */
@media (max-width: 767px) {
    .carrousel-piste {
        grid-auto-columns: calc(100% - 1rem);
        gap: 1rem;
        padding: .5rem .5rem 1rem;
    }

    .carrousel-articles {
        margin: 0 -1rem; /* Bord à bord visuel */
    }

    .carrousel-graines {
        gap: .55rem;
        margin-top: 1.2rem;
    }
}


/* ── Indication visuelle — bordure droite estompée ─────────── */
/* Sur desktop, hint visuel qu'il y a plus de contenu à droite
   (gradient blanc cassé qui simule un fade). Visible seulement
   quand il y a plus de contenu à voir. */
@media (min-width: 1025px) {
    .carrousel-articles::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 2rem;
        width: 30px;
        pointer-events: none;
        background: linear-gradient(to right,
                    transparent,
                    var(--fond-page) 90%);
        opacity: .6;
        border-radius: 0 var(--rayon-lg) var(--rayon-lg) 0;
    }
}

/* ============================================================
   LA PENSÉE DU JOUR — carte d'accueil
   À coller à la FIN de assets/css/accueil.css
   ============================================================ */
.pensee-carte {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition), transform var(--transition);
}
.pensee-carte:hover {
    box-shadow: var(--ombre-survol);
    transform: translateY(-2px);
}

.pensee-icone {
    font-size: 2.2rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: .2rem;
    color: var(--accent-or);
}

.pensee-corps { flex: 1; min-width: 0; }

.pensee-label {
    font-family: var(--font-sans);
    font-size: var(--taille-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texte-discret);
    margin: 0 0 .6rem;
}

.pensee-citation {
    font-size: 1.3rem;
    line-height: 1.55;
    color: var(--texte-principal);
    margin: 0 0 .7rem;
}

.pensee-auteur {
    font-family: var(--font-sans);
    font-size: var(--taille-sm);
    color: var(--texte-secondaire);
    margin: 0 0 .9rem;
}
.pensee-source { font-style: italic; color: var(--texte-discret); }

.pensee-suite {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: .85rem;
    color: var(--accent);
    letter-spacing: .02em;
    transition: transform .2s, color .2s;
}
.pensee-lien:hover .pensee-suite { transform: translateX(4px); }

@media (max-width: 640px) {
    .pensee-carte { gap: .9rem; }
    .pensee-icone { font-size: 1.8rem; margin-top: 0; }
    .pensee-citation { font-size: 1.15rem; }
}