html,
body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    /* Empêche la barre de défilement horizontale */
}

body {
    background: #222;
    display: flex;
    /* 1 a coté autres horizontal */
    flex-direction: column;
    /*renverser*/
}

.content {
    padding: 10px 50px 50px;
    background: #ffffff;
    flex-grow: 1;
    /* prend espac restant entre footer et body*/
}

h1,
h2 {
    font-family: 'DynaPuff', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

h1 {
    text-align: center;
    /*font-size: 40px;*/
}

h2 {
    text-align: center;
    font-size: 22px;
}

@media(min-width:900px) {
    h1 {
        font-size: 40px;
    }

    h2 {
        font-size: 24px;
    }
}

.crochet-made {
    text-align: center;
    font-family: 'DynaPuff', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 40px;
}

.made {
    width: 50px;
    height: auto;
    vertical-align: middle;
    object-fit: contain;
    /* S'assure que l'image n'est pas déformée */
}

#crochet {
    width: 45px;
    height: auto;
}

/* transformer noir to choisit https://angel-rs.github.io/css-color-filter-generator/ */
#plt {
    filter: brightness(0) saturate(100%) invert(59%) sepia(100%) saturate(373%) hue-rotate(110deg) brightness(89%) contrast(87%);
}

#drag {
    width: 100px;
    height: auto;
    margin-left: -20px;
}

/* Grande taille pc*/
@media(min-width: 900px) {
    .crochet-made {
        font-size: 50px;
    }

    .made {
        width: 70px;
        height: 70px;
    }

    #crochet {
        width: 50px;
    }

    #drag {
        width: 150px;
        margin-left: -30px;
    }
}


.browse-links {
    display: flex;
    /* cote cote */
    justify-content: center;
    /* centrer */
    gap: 20px;
    margin-top: 30px;
}

.btn-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #222;
    text-decoration: none;
    font-size: 18px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    padding-bottom: 5px;
    gap: 8px;
    /* espassement icone / texte*/
}

.btn-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 2px;
    background-color: #c4a914;
    transition: width 0.3s ease-out;
}

.btn-link:hover::after {
    width: 100%;
}

/* Style des icônes dans les liens */
.imgs-browse {
    width: 24px;
    /* Taille de l'icône, vous pouvez ajuster (ex: 20px, 30px) */
    height: 24px;
    vertical-align: middle;
    /* Aligne l'icône avec le texte */
    margin-right: 2px;
    /* Espace entre l'icône et le texte */
    object-fit: contain;
    /* S'assure que l'image n'est pas déformée */
}


#lpe-reverse {
    transform: scaleX(-1);
    /* renverse mon png de gauche a droite */
    width: 34px;
    /*compenser marges png trop gros */
    height: auto;
    margin-right: -6px;
    /* marge img et txt*/
}

.dropdown-container {
    /*Div englobant btn et div masqué*/
    position: relative;
    /*Déplacer par rapport a sa position origine*/
    display: inline-block;
    /*elements cotes cotes*/
}

button.btn-link {
    /* supprime les styles par defaut des boutons pour prendre le style de la classe btn-link */
    background: none;
    border: none;
    cursor: pointer;
}

.dropdown-menu {
    display: none;
    /* caché*/
    position: absolute;
    /* se supperpose */
    top: 120%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    box-shadow: 0 10px rgba(0, 0, 0, 0.01);
    border-radius: 12px;
    padding: 10px 0;
    min-width: 200px;
    z-index: 100;
}

.dropdown-menu.visible {
    display: block;
    animation: apparitionMenu 0.2s ease-out;
}

.dropdown-menu ul {
    list-style: none;
    /* Enlève les gros points noirs */
    margin: 0;
    padding: 0;
}

.dropdown-menu li a {
    display: block;
    padding: 12px 20px;
    color: #333;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    transition: background 0.2s;
}

.dropdown-menu li a:hover {
    background-color: #f5f5f5;
    /* Grise légèrement au survol */
    color: #c4a914;
}

/* Animation d'apparition */
@keyframes apparitionMenu {
    from {
        opacity: 0;
        transform: translate(-50%, -10px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}



/* carte de présentation */
.presentation-sec {
    display: flex;
    /* AUtorise déplacement */
    justify-content: flex-start;
    /*  plaqué a gauche*/
    margin-top: 60px;
    /* marge sécu externe */
    padding: 0 20px;
    /* marges internes*/

    /* PADDING INFO : 
    First 0: Top padding
    Second 0: Right padding
    Third 0: Bottom padding
    Fourth 0: Left padding */
}

.presentation-card {
    background: #ffffff;
    max-width: 450px;
    /*  texte s'étale pas*/
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.3);
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease
}

.presentation-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);

}

/* 2. Le style de la "Carte" blanche */
.presentation-card {
    background: #ffffff;
    max-width: 450px;
    /* Empêche le texte de s'étaler sur toute la largeur de l'écran */
    padding: 30px;
    /* Le fameux padding : 30px d'espace à l'intérieur tout autour du texte */
    border-radius: 20px;
    /* Arrondit les coins de la carte */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    /* L'ombre douce qui donne l'effet 3D */
    border: 1px solid rgba(0, 0, 0, 0.03);
    /* Un tout petit trait très fin sur les bords */
    text-align: left;
    /* Le texte est aligné à gauche */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Prépare l'animation du survol */
}

/* 3. L'animation quand la souris passe dessus */
.presentation-card:hover {
    transform: translateY(-5px);
    /* Fait "léviter" la carte vers le haut de 5 pixels */
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    /* Accentue l'ombre pour renforcer l'effet */
}

/* 4. Le petit "Badge" décoratif au dessus du titre */
.presentation-card .badge {
    display: inline-block;
    background-color: #f3f0e1;
    /* Fond un peu doré/sable */
    color: #c4a914;
    /* Texte de la même couleur que votre bouton tournant */
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    /* Met le texte en MAJUSCULES */
    padding: 6px 12px;
    /* 6px en haut/bas et 12px à gauche/droite à l'intérieur du badge */
    border-radius: 50px;
    /* Coins très arrondis pour faire une pilule */
    margin-bottom: 15px;
    /* Pousse le titre vers le bas */
    letter-spacing: 1px;
    /* Écarte un peu les lettres entre elles */
}

/* 5. Le Titre de la carte */
.presentation-card h3 {
    font-family: 'DynaPuff', cursive, sans-serif;
    /* Reprend la police de votre grand titre */
    font-size: 20px;
    color: #222;
    /* Gris très foncé presque noir */
    margin: 0 0 15px 0;
    /* Marge uniquement en bas (15px) pour séparer du texte */
}

/* 6. Le Texte de la carte */
.presentation-card p {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #555;
    /* Un gris un peu plus clair, plus doux pour les yeux */
    line-height: 1.6;
    /* Aère l'espace entre les lignes du paragraphe */
    margin: 0;
}







.fab {
    position: fixed;
    bottom: 30px;
    right: 30px;
    /* Bouton un peu plus grand pour laisser la place au texte */
    width: 80px;
    height: 80px;
    background-color: #c4a914;
    /* Un fond sombre premium */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    text-decoration: none;
    transition: transform 0.3s ease;
}

/* Effet de zoom au survol */
.fab:hover {
    transform: scale(1.05);
}

/* L'icône centrale */
.fab-icone {
    width: 45px;
    height: 45px;
    z-index: 2;
    /* S'assure que l'icône est au-dessus du texte */
    object-fit: contain;
}

/* Le conteneur du texte SVG */
.fab-texte-tournant {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotation-texte 2.5s ease-out forwards;
}

/* Assure que le SVG respecte parfaitement la taille du bouton */
.fab-texte-tournant svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    /* Empêche le SVG de couper le texte */
}

/* Style du texte lui-même */
.fab-texte-tournant text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    /* Légèrement ajusté pour le rayon */
    font-weight: 600;
    fill: #ffffff;
    /* Couleur du texte */
    letter-spacing: 1.5px;
    /* Réduit pour laisser la place à la répétition */
    text-transform: uppercase;
}

/* L'animation de rotation */
@keyframes rotation-texte {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}




/* ====== FOOTER MODERNE ====== */
footer {
    background-color: #1a1a1a; /* Fond sombre et premium activé ! */
    color: #a0a0a0;
    /* Texte gris clair discret */
    padding: 20px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    letter-spacing: 0.5px;
    border-top: 1px solid #2d2d2d;
    /* Ligne de séparation très subtile */
}

footer p {
    margin: 0;
}

/* Le lien du créateur */
footer a {
    color: #ffffff;
    /* Le nom ressort en blanc */
    text-decoration: none;
    /* Pas de soulignement grossier */
    font-weight: 600;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    /* Animation fluide */
}

/* Animation moderne au survol */
footer a:hover {
    color: #4da6ff;
    /* Bleu moderne lumineux */
    text-shadow: 0 0 8px rgba(77, 166, 255, 0.5);
    /* Léger effet néon/glow */
}

/* RESPONSIVE LAYOUT */

/* petit ecran (Mobile) */
.main-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Étire les deux colonnes pour qu'elles aient la même largeur */
    gap: 40px;
}

/* Sur mobile, on s'assure que les cartes prennent toute la place (jusqu'à 450px) et sont centrées */
.layout-left,
.layout-right {
    display: flex;
    justify-content: center;
}

.presentation-card {
    width: 100%;
    /* Force les deux cartes à prendre toute la largeur disponible */
    box-sizing: border-box;
    /* Empêche le "padding" d'ajouter de la largeur invisible */
}

/* Sur grand écran (Plus de 900px de large) */
@media (min-width: 900px) {
    .main-layout {
        flex-direction: row;
        /* Côte à côte */
        justify-content: center;
        align-items: stretch;
        /* Les deux cartes s'étireront pour avoir la même hauteur */
        gap: 80px;
        /* Bel espace entre les deux cartes */
        margin-top: 40px;
        /* Aère le haut de la page */
    }

    .layout-left,
    .layout-right {
        flex: 1;
        /* Force les deux colonnes à faire exactement la même largeur (50/50) */
        display: flex;
    }

    .layout-left {
        justify-content: flex-end;
        /* Pousse la carte de présentation vers le milieu */
    }

    .layout-right {
        justify-content: flex-start;
        /* Pousse la carte de l'équation vers le milieu */
    }

    .presentation-sec {
        margin-top: 0;
    }
}

/* ====== DROPDOWN MENU ====== */
.dropdown-container {
    position: relative;
    display: inline-block;
}

button.btn-link {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    /* Pour garder les styles du .btn-link sans être écrasé par le style natif du bouton */
}

.dropdown-menu {
    display: none; 
    position: absolute; 
    top: 120%; 
    left: 50%;
    transform: translateX(-50%); 
    background-color: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 10px 0;
    min-width: 200px;
    z-index: 100; 
}

.dropdown-menu.visible {
    display: block; 
    animation: apparitionMenu 0.2s ease-out; 
}

.dropdown-menu ul {
    list-style: none; 
    margin: 0;
    padding: 0;
}

.dropdown-menu li a {
    display: block;
    padding: 12px 20px;
    color: #333;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    transition: background 0.2s, color 0.2s;
    text-align: center;
}

.dropdown-menu li a:hover {
    background-color: #f5f5f5; 
    color: #c4a914;
}

@keyframes apparitionMenu {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}