/*
Theme Name: Fewer
Theme URI: https://wordpress.com/theme/fewer
Author: Automattic
Author URI: https://automattic.com
Description: Fewer is perfect for showcasing portfolios and blogs. With a clean and opinionated design, it offers excellent typography and style variations that make it easy to present your work or business. The theme is highly versatile, making it ideal for bloggers and businesses alike, and it offers a range of customizable options that allow you to tailor your site to your specific needs.
Requires at least: 5.8
Tested up to: 6.2
Requires PHP: 5.7
Version: 1.0.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fewer
Tags: blog, news, portfolio, grid-layout, two-columns, three-columns, left-sidebar, wide-blocks, block-patterns, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, rtl-language-support, style-variations, template-editing, theme-options, threaded-comments, translation-ready
*/

/*
 * Font smoothing
 * https://github.com/WordPress/gutenberg/issues/35934
 */
body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

/*
 * Control the hover stylings of outline block style.
 * Unnecessary once block styles are configurable via theme.json
 * https://github.com/WordPress/gutenberg/issues/42794
 */
.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--background);
	border-color: var(--wp--preset--color--secondary);
}

/**
 * Currently table styles are only available with 'wp-block-styles' 
 * theme support (block css) thus the following needs to be included
 * since 'wp-block-styles' aren't used for this theme.
 * https://github.com/WordPress/gutenberg/issues/45065
 */
.wp-block-table thead {
	border-bottom: 3px solid;
}
.wp-block-table tfoot {
	border-top: 3px solid;
}
.wp-block-table td,
.wp-block-table th {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid;
	word-break: normal;
}
.wp-block-table figcaption {
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: .02em !important;
	text-underline-offset: .25em;
}

/* style.css */

/* Style général du conteneur du logo */
.logo-container {
    font-family: 'Bebas Neue', sans-serif;
    text-align: center;
    padding: 10px;
    width: 90%;
    max-width: 550px;
    margin: 60px auto;
    overflow: hidden; /* Très important pour l'effet d'apparition par le bas */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Style de la partie supérieure : l'acronyme */
.acronym {
    font-size: 5em; /* Taille des lettres */
    font-weight: 700; /* Gras */
    color: #000000; /* Couleur bleue, à adapter */
    margin-bottom: 15px;
}

/* Phones (max 600px wide) */
@media (max-width: 600px) {
  .acronym {
    font-size: 3em;   /* smaller on phones */
    margin-bottom: 10px; /* optional: tighten spacing */
  }
}

/* Style de base pour chaque lettre de l'acronyme */
.acronym span {
    opacity: 0; /* Les lettres sont invisibles au départ */
    position: relative;
    /* Animation : nom, durée, et état final */
    animation: appearFromLeft 0.2s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Décalage de l'animation pour chaque lettre */
.acronym span:nth-child(1) { animation-delay: 0.15s; }
.acronym span:nth-child(2) { animation-delay: 0.3s; }
.acronym span:nth-child(3) { animation-delay: 0.45s; }
.acronym span:nth-child(4) { animation-delay: 0.60s; }
.acronym span:nth-child(5) { animation-delay: 0.75s; }

/* Style de la partie inférieure : le nom complet */
.full-name {
    font-size: 1.2em;
    color: #34495e;
    opacity: 0; /* Le nom est invisible au départ */
    /* Animation : nom, durée, décalage, et état final */
    animation: slideFromBottom 0.75s 1s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- KEYFRAMES (Règles d'animation) --- */

/* Animation pour l'apparition des lettres par la gauche */
@keyframes appearFromLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animation pour l'apparition du nom par le bas */
@keyframes slideFromBottom {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}