/*
 * Pages d'attente de fabea.fr (CDC v1.32) : accueil « ouverture le 30 novembre » et « Ouvrir ma boutique » fermée.
 * Couleurs et polices de la charte J (Encre & Lin), recopiées ici : ces pages n'utilisent pas le site Laravel.
 * Aucun appel vers un autre site (polices dans polices.css).
 */
:root {
    --ch-fond: #FAF6F0;
    --ch-surface: #FFFFFF;
    --ch-texte: #26304A;
    --ch-texte-secondaire: #5F596D;
    --ch-trait: #EBE2D5;
    --ch-primaire: #2C4F7C;
    --ch-accent: #E9A93A;
    --ch-sur-accent: #26304A;
    --ch-fil: #B8693A;
    --ch-pastel-1: #F7D9C8;
    --ch-pastel-2: #FCE7B0;
    --ch-pastel-3: #D3ECE6;
    --ch-couture: #2C4F7C6B;
    --ch-police-titre: "Young Serif", Georgia, serif;
    --ch-police-texte: Figtree, "Segoe UI", system-ui, sans-serif;
    --ch-police-main: Caveat, "Segoe Print", cursive;
    --contour: color-mix(in srgb, var(--ch-texte) 28%, var(--ch-trait));
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: clamp(1.5rem, 1rem + 3vw, 4rem) 1rem;
    background: var(--ch-fond);
    color: var(--ch-texte);
    font-family: var(--ch-police-texte);
    font-size: 1.0625rem;
    line-height: 1.6;
}

a { color: var(--ch-primaire); }
a:focus-visible { outline: 3px solid var(--ch-accent); outline-offset: 3px; border-radius: 4px; }

.page {
    width: 100%;
    max-width: 38rem;
    display: grid;
    justify-items: center;
    gap: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
    text-align: center;
}

.logo {
    margin: 0;
    font-family: var(--ch-police-titre);
    font-size: clamp(2.25rem, 1.75rem + 2vw, 3rem);
    line-height: 1;
    color: var(--ch-primaire);
    text-decoration: none;
}
.logo small {
    display: block;
    margin-top: 0.6rem;
    font-family: var(--ch-police-main);
    font-size: 0.5em;
    font-weight: 600;
    color: var(--ch-fil);
}

/* Décor : une ficelle qui ploie et trois étiquettes suspendues, toujours droites. */
.etiquettes {
    --fil-hauteur: clamp(26px, 1.25rem + 2vw, 40px);
    width: 100%;
    max-width: 26rem;
}
.fil {
    height: var(--fil-hauteur);
    border-bottom: 2px solid var(--ch-fil);
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.etiquettes ul {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
}
.etiquettes li {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -2px;
}
.etiquettes li:nth-child(odd) { margin-top: calc(var(--fil-hauteur) * -0.255 - 2px); }
.etiquettes li::before {
    content: '';
    width: 2px;
    height: var(--attache, 16px);
    background: var(--ch-fil);
}
.etiquettes li:nth-child(2) { --attache: 34px; }
.etiquettes li:nth-child(3) { --attache: 24px; }
.etiquette {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(5.25rem, 4rem + 6vw, 7rem);
    aspect-ratio: 3 / 4;
    padding: 1.5rem 0.5rem 0.6rem;
    background: var(--ch-pastel-1);
    border-radius: 8px;
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%, 0 12px);
    font-family: var(--ch-police-main);
    font-weight: 600;
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
    line-height: 1.05;
}
.etiquettes li:nth-child(2) .etiquette { background: var(--ch-pastel-2); }
.etiquettes li:nth-child(3) .etiquette { background: var(--ch-pastel-3); }
.etiquette::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 50%;
    background: var(--ch-fond);
    box-shadow: inset 0 0 0 2px var(--ch-couture);
}

.message { display: grid; justify-items: center; gap: 1rem; }

h1 {
    margin: 0;
    font-family: var(--ch-police-titre);
    font-weight: 400;
    font-size: clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem);
    line-height: 1.15;
    text-wrap: balance;
}

h2 {
    margin: 0;
    font-family: var(--ch-police-titre);
    font-weight: 400;
    font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.7rem);
    line-height: 1.2;
}

/* Date d'ouverture : écrite à la main, comme une étiquette de marché. */
.ouverture {
    margin: 0;
    font-family: var(--ch-police-main);
    font-weight: 600;
    font-size: clamp(1.5rem, 1.25rem + 1vw, 1.9rem);
    line-height: 1.2;
    color: var(--ch-fil);
}

.bouton {
    display: inline-block;
    margin: 0.25rem 0 0;
    padding: 0.7rem 1.75rem;
    border-radius: 999px;
    background: var(--ch-accent);
    color: var(--ch-sur-accent);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--ch-accent) 35%, transparent);
}
.bouton:hover { background: color-mix(in srgb, var(--ch-accent) 88%, var(--ch-texte)); }
.bouton--contour {
    background: transparent;
    color: var(--ch-primaire);
    box-shadow: inset 0 0 0 2px var(--ch-primaire);
}
.bouton--contour:hover { background: color-mix(in srgb, var(--ch-primaire) 8%, transparent); }

.explication {
    width: 100%;
    margin: 0;
    padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
    background: var(--ch-surface);
    border: 1px solid var(--contour);
    border-radius: 18px;
    color: var(--ch-texte-secondaire);
    text-wrap: pretty;
}
.explication strong { color: var(--ch-texte); }
.explication p { margin: 0 0 1rem; }
.explication p:last-child { margin-bottom: 0; }
div.explication .points { max-width: 30rem; margin-inline: auto; }

/* « Ouvrir ma boutique » fermée : un bandeau d'annonce, puis l'explication. */
.annonce {
    width: 100%;
    display: grid;
    justify-items: center;
    gap: 0.85rem;
    padding: clamp(1.75rem, 1.25rem + 2.5vw, 2.75rem) clamp(1.25rem, 1rem + 2vw, 2.5rem);
    border-radius: 22px;
    background: var(--ch-primaire);
    color: var(--ch-surface);
}
.annonce__accroche {
    margin: 0;
    font-family: var(--ch-police-main);
    font-weight: 600;
    font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.65rem);
    line-height: 1.1;
    color: var(--ch-pastel-2);
}
.annonce p { margin: 0; text-wrap: pretty; }
.pastille {
    display: inline-block;
    padding: 0.25rem 0.85rem;
    border-radius: 999px;
    background: var(--ch-pastel-2);
    color: var(--ch-texte);
    font-size: 0.875rem;
    font-weight: 700;
}

.points {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}
.points li { padding-left: 1.6rem; position: relative; }
.points li::before {
    content: '';
    position: absolute;
    left: 0.25rem;
    top: 0.55em;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--ch-accent);
}

.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }