/* =============================================================================
 * SITE    : sab-pliage.fr  (site vitrine de Sabine — PROJET PERSONNEL)
 *           Rien à voir avec bibelenets (« burprod ») ni avec la boutique
 *           bureland.fr (« burboutique »).
 * FICHIER : assets/css/sabpliage.css
 * RÔLE    : habillage de la page d'attente (index.php).
 *           Chargée APRÈS Bootstrap, pour pouvoir le surcharger.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. La palette et les repères du site
 * -------------------------------------------------------------------------- */
:root {
    /* Couleurs */
    --sp-papier        : #FDF8F2;  /* le fond, un crème de papier */
    --sp-papier-ombre  : #F3EBE0;
    --sp-encre         : #2E2721;  /* les titres */
    --sp-encre-douce   : #5B4F44;  /* le texte courant */
    --sp-encre-pale    : #8A7A69;  /* les mentions discrètes */
    --sp-orange        : #C25C22;  /* la couleur de Sabine */
    --sp-orange-lien   : #B8501F;  /* un ton plus soutenu, pour les liens */
    --sp-orange-survol : #8F3C14;
    --sp-filet         : #EADDC9;  /* les traits de séparation */

    /* Polices */
    --sp-police-titre : 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --sp-police-texte : 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Éventail de pages : largeur d'une lamelle, écart, et échelle des hauteurs */
    --sp-lamelle-largeur : 5px;
    --sp-lamelle-ecart   : 6px;
    --sp-eventail-echelle: 1;
}

/* -----------------------------------------------------------------------------
 * 2. Réglages généraux
 * -------------------------------------------------------------------------- */
body.sp-attente {
    margin           : 0;
    background-color : var(--sp-papier);
    color            : var(--sp-encre-douce);
    font-family      : var(--sp-police-texte);
    font-weight      : 300;
    -webkit-font-smoothing : antialiased;
}

.sp-attente a {
    color           : var(--sp-orange-lien);
    font-weight     : 500;
    text-decoration : none;
    border-bottom   : 1px solid rgba(184, 80, 31, 0.35);
    transition      : color 0.2s ease, border-color 0.2s ease;
}

.sp-attente a:hover,
.sp-attente a:focus-visible {
    color        : var(--sp-orange-survol);
    border-color : var(--sp-orange-survol);
}

.sp-attente a:focus-visible {
    outline        : 2px solid var(--sp-orange-lien);
    outline-offset : 3px;
}

/* La page occupe toute la hauteur de l'écran, en-tête en haut, pied en bas */
.sp-page {
    min-height     : 100vh;
    min-height     : 100svh;   /* tient compte des barres des navigateurs mobiles */
    max-width      : 1440px;
    margin-inline  : auto;
    padding        : 52px clamp(24px, 5vw, 76px) 40px;
    display        : flex;
    flex-direction : column;
}

/* -----------------------------------------------------------------------------
 * 3. En-tête
 * -------------------------------------------------------------------------- */
.sp-entete {
    display         : flex;
    flex-wrap       : wrap;
    gap             : 8px 24px;
    align-items     : baseline;
    justify-content : space-between;
}

.sp-marque {
    margin         : 0;
    font-family    : var(--sp-police-titre);
    font-size      : clamp(26px, 3vw, 32px);
    font-weight    : 400;
    letter-spacing : 0.01em;
    color          : var(--sp-encre);
}

.sp-signature {
    margin         : 0;
    font-size      : 12px;
    letter-spacing : 0.22em;
    text-transform : uppercase;
    color          : #9A8875;
}

/* -----------------------------------------------------------------------------
 * 4. Corps de la page
 * -------------------------------------------------------------------------- */
.sp-corps {
    flex-grow   : 1;
    display     : flex;
    align-items : center;
    padding     : 48px 0;
}

.sp-corps > .row {
    width : 100%;
}

/* --- Colonne de texte ----------------------------------------------------- */
.sp-colonne-texte {
    display        : flex;
    flex-direction : column;
    gap            : 28px;
}

.sp-surtitre {
    margin         : 0;
    display        : flex;
    align-items    : center;
    gap            : 12px;
    font-size      : 12px;
    letter-spacing : 0.26em;
    text-transform : uppercase;
    color          : var(--sp-orange);
}

.sp-surtitre-trait {
    width      : 28px;
    height     : 1px;
    background : var(--sp-orange);
    flex-shrink: 0;
}

.sp-titre {
    margin      : 0;
    font-family : var(--sp-police-titre);
    font-size   : clamp(40px, 5.4vw, 70px);
    font-weight : 400;
    line-height : 1.05;
    color       : var(--sp-encre);
}

.sp-texte {
    margin      : 0;
    max-width   : 34em;
    font-size   : clamp(15px, 1.15vw, 17px);
    line-height : 1.75;
    color       : var(--sp-encre-douce);
}

.sp-promesse {
    display        : flex;
    flex-direction : column;
    gap            : 16px;
}

.sp-promesse-trait {
    width      : 64px;
    height     : 1px;
    background : #DDCDB6;
}

.sp-promesse-texte {
    margin      : 0;
    font-family : var(--sp-police-titre);
    font-style  : italic;
    font-size   : clamp(23px, 2.4vw, 30px);
    line-height : 1.3;
    color       : var(--sp-orange);
}

/* --- Colonne du motif ----------------------------------------------------- */
.sp-colonne-motif {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: flex-end;
}

/* L'éventail : une lamelle par page du livre */
.sp-eventail {
    display     : flex;
    align-items : flex-end;
    gap         : var(--sp-lamelle-ecart);
}

.sp-eventail > span {
    display          : block;
    width            : var(--sp-lamelle-largeur);
    height           : calc(var(--sp-h) * 1px * var(--sp-eventail-echelle));
    background-color : var(--sp-orange);
    border-radius    : 3px 3px 0 0;
    opacity          : var(--sp-o);
    transform-origin : bottom center;
    animation        : sp-deplier 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay  : var(--sp-d);
}

/* La tranche du livre, sous l'éventail */
.sp-tranche {
    display       : block;
    width         : min(380px, 80%);
    height        : 3px;
    border-radius : 2px;
    background    : var(--sp-encre);
    animation     : sp-apparaitre 0.6s ease both;
}

.sp-legende {
    margin         : 18px 0 0;
    font-size      : 12px;
    letter-spacing : 0.18em;
    text-transform : uppercase;
    color          : #9A8875;
    text-align     : center;
    animation      : sp-apparaitre 0.8s ease 0.5s both;
}

/* -----------------------------------------------------------------------------
 * 5. Pied de page
 * -------------------------------------------------------------------------- */
.sp-pied {
    display         : flex;
    flex-wrap       : wrap;
    gap             : 8px 24px;
    align-items     : center;
    justify-content : space-between;
    border-top      : 1px solid var(--sp-filet);
    padding-top     : 22px;
    font-size       : 14px;
    color           : var(--sp-encre-pale);
}

.sp-pied p {
    margin : 0;
}

/* -----------------------------------------------------------------------------
 * 6. Les animations, volontairement discrètes
 * -------------------------------------------------------------------------- */

/* Les pages se déplient depuis la tranche du livre */
@keyframes sp-deplier {
    from { transform : scaleY(0);   opacity : 0; }
    to   { transform : scaleY(1);   opacity : var(--sp-o); }
}

/* Une apparition toute simple, pour le reste */
@keyframes sp-apparaitre {
    from { opacity : 0; transform : translateY(10px); }
    to   { opacity : 1; transform : none; }
}

.sp-colonne-texte > * {
    animation : sp-apparaitre 0.7s ease both;
}

.sp-colonne-texte > *:nth-child(1) { animation-delay : 0.05s; }
.sp-colonne-texte > *:nth-child(2) { animation-delay : 0.15s; }
.sp-colonne-texte > *:nth-child(3) { animation-delay : 0.25s; }
.sp-colonne-texte > *:nth-child(4) { animation-delay : 0.35s; }
.sp-colonne-texte > *:nth-child(5) { animation-delay : 0.45s; }

/* Respect du réglage « animations réduites » du système */
@media (prefers-reduced-motion: reduce) {
    .sp-eventail > span,
    .sp-tranche,
    .sp-legende,
    .sp-colonne-texte > * {
        animation : none;
    }
    .sp-eventail > span {
        opacity : var(--sp-o);
    }
}

/* -----------------------------------------------------------------------------
 * 7. Adaptation aux écrans plus petits
 * -------------------------------------------------------------------------- */

/* Tablettes et grands téléphones : le motif passe au-dessus du texte */
@media (max-width: 991.98px) {
    :root {
        --sp-eventail-echelle : 0.55;
        --sp-lamelle-ecart    : 5px;
    }

    .sp-page {
        padding : 40px clamp(20px, 6vw, 40px) 28px;
    }

    .sp-corps {
        padding : 36px 0;
    }

    /* On remonte le motif avant le texte, comme sur la maquette mobile */
    .sp-colonne-motif {
        order : 1;
    }

    .sp-colonne-texte {
        order : 2;
        gap   : 22px;
    }

    .sp-texte {
        max-width : none;
    }

    .sp-pied {
        justify-content : center;
        text-align      : center;
        font-size       : 13px;
    }
}

/* Téléphones : on resserre encore l'éventail */
@media (max-width: 575.98px) {
    :root {
        --sp-eventail-echelle : 0.40;
        --sp-lamelle-largeur  : 5px;
        --sp-lamelle-ecart    : 4px;
    }

    .sp-entete {
        flex-direction : column;
        align-items    : center;
        text-align     : center;
        gap            : 6px;
    }

    .sp-signature {
        font-size : 10px;
    }

    .sp-legende {
        font-size : 10px;
    }
}