/* Page Reiki : styles spécifiques
   (les styles communs viennent de common.css) */

/* ---- Les deux piliers : lignée & préceptes ---- */
.reiki-pillar {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 36px 40px 40px;
    box-shadow: var(--shadow);
    max-width: 860px;
    margin: 40px auto 0;
}

.reiki-pillar-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.reiki-pillar-num {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--sage-pale);
    border: 2px solid var(--sage);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Amatic SC', cursive;
    font-size: 34px;
    font-weight: 700;
    color: var(--sage-dark);
}

.reiki-pillar-title {
    font-family: 'Amatic SC', cursive;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text);
}

.reiki-pillar-sub {
    font-size: 14px;
    font-style: italic;
    color: var(--sage-dark);
    margin-top: 2px;
}

.reiki-text {
    color: var(--text-light);
    font-size: 15px;
    line-height: 1.8;
}

.reiki-text + .reiki-text {
    margin-top: 14px;
}

/* Encadré « Pourquoi c'est important ? » */
.reiki-callout {
    background: var(--sage-pale);
    border-left: 4px solid var(--sage);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-top: 20px;
}

.reiki-callout p {
    color: var(--text);
    font-size: 14px;
    line-height: 1.75;
}

.reiki-callout strong {
    color: var(--sage-dark);
}

/* Lignée : chaîne de transmission */
/* Encadré à gauche, lignée à droite : le fil vertical est étroit, le mettre
   seul sur toute la largeur laissait un grand vide à droite en desktop. */
.reiki-pillar-split {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 34px;
    /* « stretch » : les deux colonnes se terminent à la même hauteur. Sans ça,
       l'encadré (plus court que la lignée) laissait un vide en bas à gauche. */
    align-items: stretch;
    margin-top: 22px;
}

/* Les marges hautes internes feraient décrocher les deux colonnes */
.reiki-pillar-split .reiki-callout,
.reiki-pillar-split .reiki-lineage-intro {
    margin-top: 0;
}

/* L'encadré étant étiré, son texte est centré verticalement plutôt que
   plaqué en haut d'une boîte trop grande. */
.reiki-pillar-split .reiki-callout {
    display: flex;
    align-items: center;
}

.reiki-lineage-intro {
    color: var(--text-light);
    font-size: 15px;
    line-height: 1.8;
    margin-top: 24px;
    margin-bottom: 14px;
}

/* Fil de transmission VERTICAL : un maître par ligne, reliés par un trait
   en pointillés. Une lignée est une descente ordonnée, la lire de haut en
   bas évite tout retour à la ligne, donc plus aucun alignement bancal, quels
   que soient la longueur des noms et la largeur de l'écran. */
.reiki-lineage {
    list-style: none;
    position: relative;
    padding-left: 30px;
}

/* le fil qui relie les maillons */
.reiki-lineage::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 16px;
    bottom: 16px;
    border-left: 2px dotted var(--sage);
}

.reiki-lineage li {
    position: relative;
    padding: 4px 0;
}

/* le point posé sur le fil, en face de chaque nom */
.reiki-lineage li::before {
    content: "";
    position: absolute;
    left: -28px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--sage);
    animation: lineage-pulse 9s ease-in-out infinite;
}

/* Impulsion qui descend la lignée : les points s'allument l'un après l'autre,
   puis marquent une pause avant de repartir, évoque la transmission de
   l'énergie de maître à élève. Rythme volontairement lent (0,9 s par maillon,
   cycle de 9 s) pour rester dans l'esprit apaisant du site. */
.reiki-lineage li:nth-child(2)::before {
    animation-delay: 0.9s;
}

.reiki-lineage li:nth-child(3)::before {
    animation-delay: 1.8s;
}

.reiki-lineage li:nth-child(4)::before {
    animation-delay: 2.7s;
}

.reiki-lineage li:nth-child(5)::before {
    animation-delay: 3.6s;
}

.reiki-lineage li:nth-child(6)::before {
    animation-delay: 4.5s;
}

@keyframes lineage-pulse {
    0%, 36%, 100% {
        background: #fff;
        box-shadow: 0 0 0 0 rgba(122, 158, 126, 0);
    }
    8% {
        background: var(--sage);
        box-shadow: 0 0 0 5px rgba(122, 158, 126, 0.3);
    }
    22% {
        background: var(--sage);
        box-shadow: 0 0 0 8px rgba(122, 158, 126, 0);
    }
}

/* Mikao Usui reste rempli en permanence (il est la source) :
   seul le halo pulse, sans vider la pastille. */
@keyframes lineage-pulse-source {
    0%, 36%, 100% {
        box-shadow: 0 0 0 0 rgba(122, 158, 126, 0);
    }
    8% {
        box-shadow: 0 0 0 5px rgba(122, 158, 126, 0.3);
    }
    22% {
        box-shadow: 0 0 0 8px rgba(122, 158, 126, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .reiki-lineage li::before {
        animation: none;
    }
}

.reiki-lineage-name {
    display: inline-block;
    background: var(--cream);
    border: 1.5px solid var(--sand);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

/* Mikao Usui, à la source de la lignée */
.reiki-lineage li:first-child::before {
    background: var(--sage);
    animation-name: lineage-pulse-source;
}

.reiki-lineage li:first-child .reiki-lineage-name {
    background: var(--sage-pale);
    border-color: var(--sage);
    color: var(--sage-dark);
}

/* Les 5 préceptes */
.reiki-preceptes {
    list-style: none;
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.reiki-preceptes li {
    position: relative;
    background: var(--cream);
    border-radius: var(--radius);
    padding: 16px 20px 16px 46px;
}

.reiki-preceptes li::before {
    content: "✦";
    position: absolute;
    left: 18px;
    top: 16px;
    color: var(--sage);
    font-size: 14px;
}

.reiki-preceptes strong {
    display: block;
    color: var(--text);
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 4px;
}

.reiki-preceptes span {
    display: block;
    color: var(--text-light);
    font-size: 14px;
    line-height: 1.65;
}

/* ---- Les bienfaits ---- */
.reiki-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 44px;
}

.reiki-benefit {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--sage-pale);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
    box-shadow: var(--shadow);
}

/* 5 bienfaits sur 2 colonnes : le dernier occupe toute la largeur
   pour ne pas laisser une carte orpheline. */
.reiki-benefits > .reiki-benefit:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.reiki-benefit-icon {
    font-size: 26px;
    line-height: 1;
    flex-shrink: 0;
}

.reiki-benefit-title {
    font-family: 'Amatic SC', cursive;
    font-size: 25px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.reiki-benefit p {
    color: var(--text-light);
    font-size: 14px;
    line-height: 1.7;
}

/* ---- Tableau : fréquence des soins ---- */
.reiki-table-wrap {
    margin-top: 44px;
}

.reiki-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: var(--radius-lg);
    /* Rogne le fond de l'en-tête pour respecter les coins arrondis.
       (N'affecte pas l'ombre portée du tableau, qui est dessinée à l'extérieur.) */
    overflow: hidden;
    box-shadow: var(--shadow);
}

.reiki-table th {
    background: var(--sage-pale);
    color: var(--sage-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: left;
    padding: 12px 20px;
}

/* Alternance de teinte : sur des lignes larges et hautes, elle aide l'œil à
   suivre une même ligne d'une colonne à l'autre. Les filets sont conservés
   pour marquer nettement la limite entre deux lignes. */
.reiki-table tbody tr:nth-child(even) {
    background: rgba(122, 158, 126, 0.06);
}

.reiki-table td {
    padding: 13px 20px;
    vertical-align: top;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-light);
    border-top: 1px solid var(--sage-pale);
}

.reiki-table td strong {
    display: block;
    color: var(--text);
    margin-bottom: 1px;
}

.reiki-table-note {
    display: block;
    font-size: 13px;
    font-style: italic;
    color: var(--text-xlight);
    margin-top: 1px;
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
    .reiki-pillar {
        padding: 28px 24px 32px;
    }

    .reiki-benefits {
        grid-template-columns: 1fr;
    }

    /* Encadré et lignée se réempilent l'un sous l'autre */
    .reiki-pillar-split {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .reiki-pillar-split .reiki-lineage-intro {
        margin-top: 4px;
    }
}

@media (max-width: 720px) {
    /* Le tableau devient une pile de fiches lisibles sans défilement latéral */
    .reiki-table {
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        /* Indispensable : sinon l'ombre portée des fiches (les <tr>, qui sont
           des descendants) serait rognée par le overflow:hidden du desktop. */
        overflow: visible;
    }

    .reiki-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    /* Chaque ligne devient une fiche autonome : on annule l'alternance de
       teinte, qui donnerait des cartes de couleurs différentes. */
    .reiki-table tr,
    .reiki-table tbody tr:nth-child(even) {
        display: block;
        background: #fff;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        padding: 6px 0;
        margin-bottom: 16px;
    }

    .reiki-table td {
        display: block;
        border-top: none;
        padding: 12px 20px;
    }

    .reiki-table td + td {
        border-top: 1px solid var(--sage-pale);
    }

    .reiki-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--sage-dark);
        margin-bottom: 6px;
    }
}

/* Appel à l'action de fin de page. La page présentait le Reiki sans jamais
   proposer de rendez-vous : ce bloc referme la lecture sur une action. */
.reiki-cta {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}

/* La couleur, la taille et l'interligne viennent de .section-text, qui place
   aussi le paragraphe dans l'animation d'apparition avec le reste du bloc. */
.reiki-cta p {
    margin-top: 12px;
}