/*
Theme Name: Sonia & Pascal - Bientot (SOON)
Theme URI: https://soniapascal2027.be/
Author: Sonia & Pascal
Description: Version allegee "bientot en ligne" du theme du mariage de Sonia & Pascal : une seule page d'accueil avec compte a rebours et une mention personnalisable. Meme habillage graphique (bleu ciel, monogramme S/P) que le theme complet "soniapascal2027", mais sans menu, sans navigation horizontale et sans les autres sections. Pense pour ne jamais ecraser le theme complet en cours de developpement : nom de dossier, prefixe de fonctions et identifiants CSS/JS entierement distincts.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: soniapascal2027-soon
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

===================================================================
 SOMMAIRE DU FICHIER
===================================================================
 1. VARIABLES DE COULEURS & TYPOGRAPHIE (a modifier ici en priorite)
 2. RESET & BASES
 3. UTILITAIRES
 4. ECRAN D'ACCUEIL (logo, noms, date)
 5. COMPTE A REBOURS
 6. MENTION "BIENTOT PLUS D'INFORMATIONS" (texte + taille modifiables)
 7. RESPONSIVE / MOBILE-FIRST + ECRANS BAS (tout tient sur 1 seul écran)
 8. ACCESSIBILITE
===================================================================
*/

/* ===================================================================
   1. VARIABLES DE COULEURS & TYPOGRAPHIE
   -------------------------------------------------------------------
   Identiques dans l'esprit au theme complet, pour garder EXACTEMENT
   le même rendu visuel. Modifiables aussi depuis Apparence >
   Personnaliser (voir inc/customizer.php).
=================================================================== */
:root {
    --color-blue-dark:   #4E7AA0;  /* titres + compte à rebours + mention "Bientôt..." */
    --color-blue-medium: #7FA8CB;
    --color-white:  #FFFFFF;
    --color-text:   #2E4356;
    --color-text-light: #6B7F91;

    --font-heading: 'Cormorant Garamond', 'Georgia', serif;
    --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;

    /* Taille de la mention "Bientôt plus d'informations" : modifiable
       depuis Apparence > Personnaliser > Message d'attente (curseur),
       sans toucher au code. Valeur par défaut ci-dessous. */
    --soon-message-size: 1rem;
}

/* ===================================================================
   2. RESET & BASES
=================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-white);
    line-height: 1.6;
    font-weight: 300;
    /* Empêche tout défilement : tout doit tenir sur un seul écran */
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
}

h1 {
    font-family: var(--font-heading);
    color: var(--color-blue-dark);
    font-weight: 600;
    letter-spacing: 0.03em;
    margin: 0;
}

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

/* ===================================================================
   3. UTILITAIRES
=================================================================== */
.eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--color-blue-medium);
    margin-bottom: var(--space-xs);
}

/* ===================================================================
   4. ECRAN D'ACCUEIL
   -------------------------------------------------------------------
   Une seule "page" plein écran, centrée, sans menu ni navigation.
=================================================================== */
.hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: var(--space-md) var(--space-sm);
}

.hero .boat-watermark {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -55%);
    width: min(70vw, 640px);
    opacity: 0.32;
    z-index: 0;
    pointer-events: none;
}

.hero .hero-content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    /* clamp() : la marge verticale entre les éléments s'adapte à la
       hauteur de l'écran pour que tout tienne sans défiler (voir aussi
       la section 7, pour les très petits écrans) */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.4rem, 2vh, 1rem);
}

.hero .crest {
    width: clamp(80px, 14vh, 130px);
}

.hero .names {
    font-size: clamp(2.2rem, 9vh, 4.4rem);
    line-height: 1.05;
}
.hero .names .and {
    display: block;
    font-size: 0.5em;
    color: var(--color-blue-medium);
    margin: 0.15em 0;
}

.hero .date-line {
    font-size: clamp(0.75rem, 2.2vh, 1rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

/* ===================================================================
   5. COMPTE A REBOURS
=================================================================== */
.countdown-grid {
    display: flex;
    gap: clamp(0.8rem, 3vw, 2rem);
    justify-content: center;
    flex-wrap: nowrap;
}
.countdown-item { min-width: 60px; }
.countdown-item .value {
    font-family: var(--font-heading);
    font-size: clamp(1.7rem, 6.5vh, 3rem);
    color: var(--color-blue-dark);
    display: block;
    line-height: 1;
    font-weight: 600;
}
.countdown-item .label {
    font-size: clamp(0.6rem, 1.4vh, 0.7rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

/* ===================================================================
   6. MENTION "BIENTOT PLUS D'INFORMATIONS"
   -------------------------------------------------------------------
   Texte ET taille modifiables depuis Apparence > Personnaliser >
   Message d'attente (voir inc/customizer.php). La couleur reprend
   automatiquement celle du compte à rebours (--color-blue-dark) :
   changer cette seule variable met tout à jour d'un coup.
=================================================================== */
.soon-message {
    font-family: var(--font-heading);
    color: var(--color-blue-dark);           /* même couleur que le compte à rebours */
    font-size: var(--soon-message-size);     /* taille pilotée depuis le Personnaliseur */
    letter-spacing: 0.08em;
    font-style: italic;
    margin: 0;
}

/* ===================================================================
   7. RESPONSIVE / MOBILE-FIRST + ECRANS BAS
   -------------------------------------------------------------------
   Le CSS ci-dessus est déjà fluide (clamp(), unités vh) : mobile et
   desktop affichent la même mise en page, juste mise à l'échelle.
   Sur les écrans très bas (mobile en mode paysage, petits mobiles),
   on resserre encore les espacements pour ne jamais avoir besoin de
   défiler.
=================================================================== */
@media (max-height: 700px) {
    .hero .hero-content { gap: 0.35rem; }
    .hero .crest { width: clamp(56px, 11vh, 90px); }
    .hero .names { font-size: clamp(1.8rem, 8vh, 3rem); }
    .countdown-item .value { font-size: clamp(1.3rem, 5.5vh, 2rem); }
}

@media (max-width: 360px) {
    .countdown-grid { gap: 0.6rem; }
    .countdown-item { min-width: 50px; }
}

/* ===================================================================
   8. ACCESSIBILITE
=================================================================== */
:focus-visible { outline: 2px solid var(--color-blue-medium); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}