:root {
    /* Système de couleurs */
    /* Couleurs de base */
    --color-1: #feec4d;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-gray-100: #e9e9e9;
    --color-gray-200: #a3a3a3;
    --color-gray-300: #878788;
    --color-gray-800: #1E1F1C;
    --color-gray-900: #161616;
    --color-accent: #e60000;

    /* Couleurs sémantiques */
    --color-text: var(--color-white);
    --color-text-secondary: var(--color-gray-100);
    --color-text-muted: var(--color-gray-200);
    --color-background: var(--color-gray-800);
    --color-background-alt: var(--color-gray-900);
    --color-border: var(--color-gray-200);
    --color-highlight: var(--color-1);

    
    /* Dimensions et espacements */
    --footer-padding: 20px 0;
    --footer-text-size: 16px;
    --footer-copy-size: 14px;

    /* Couleurs utile */
    --color-success: #17b93d;
    --color-warning: #ffde07;
    --color-danger: #ff0019;
    
    /* Typography */
    --font-primary: 'Poppins', system-ui, -apple-system, sans-serif;
    
    /* Tailles de police avec échelle cohérente */
    --font-size-base: 18px;      /* Base size */
    --scale-ratio: 1.25;         /* Échelle typographique */
    --font-size-xs: calc(var(--font-size-base) / var(--scale-ratio));
    --font-size-sm: var(--font-size-base);
    --font-size-md: calc(var(--font-size-base) * var(--scale-ratio));
    --font-size-lg: calc(var(--font-size-md) * var(--scale-ratio));
    --font-size-xl: calc(var(--font-size-lg) * var(--scale-ratio));
    --font-size-2xl: calc(var(--font-size-xl) * var(--scale-ratio));
    
    /* Line heights */
    --line-height-tight: 1.2;
    --line-height-base: 1.6;
    --line-height-loose: 2;
    
    /* Font weights */
    --font-weight-light: 200;
    --font-weight-normal: 400;
    --font-weight-bold: 600;
    
    /* Spacing - système d'échelle cohérent */
    /* Petits espacements (ex: marges de texte, padding internes) */
    --spacing-unit: 0.5rem;
    --spacing-xs: calc(var(--spacing-sm) / var(--scale-ratio));
    --spacing-sm: var(--spacing-unit);
    --spacing-md: calc(var(--spacing-sm) * var(--scale-ratio));
    --spacing-lg: calc(var(--spacing-md) * var(--scale-ratio));
    --spacing-xl: calc(var(--spacing-lg) * var(--scale-ratio));
    --spacing-2xl: calc(var(--spacing-xl) * var(--scale-ratio));

    /* Grands espacements (ex: sections, gros blocs) */
    --spacing-block-unit: 6rem;
    --spacing-block-xs: calc(var(--spacing-block-sm) / var(--scale-ratio));
    --spacing-block-sm: var(--spacing-block-unit);
    --spacing-block-md: calc(var(--spacing-block-sm) * var(--scale-ratio));
    --spacing-block-lg: calc(var(--spacing-block-md) * var(--scale-ratio));
    --spacing-block-xl: calc(var(--spacing-block-lg) * var(--scale-ratio));
    --spacing-block-2xl: calc(var(--spacing-block-xl) * var(--scale-ratio));

    /* Border radius */
    --radius-unit: 4px;
    --radius-sm: var(--radius-unit);
    --radius-md: calc(var(--radius-unit) * 2);
    --radius-lg: calc(var(--radius-unit) * 4);
    --radius-full: 9999px;
    
    /* Transitions */
    --duration-fast: 0.2s;
    --duration-normal: 0.3s;
    --duration-slow: 0.5s;
    --duration-super-slow: 2s;
    --timing-function: ease;
    --transition-base: all var(--duration-normal) var(--timing-function);
    --transition-fast: all var(--duration-fast) var(--timing-function);
    --transition-slow: all var(--duration-slow) var(--timing-function);
    --transition-super-slow: all var(--duration-super-slow) var(--timing-function);
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.20);
    
    /* Z-index */
    --z-negative: -1;
    --z-normal: 1;
    --z-optionel-2: 2;
    --z-optionel-3: 3;
    --z-header: 100;
    --z-dropdown: 200;
    --z-sticky: 300;
    --z-modal: 400;
    --z-overlay: 500;
    --z-tooltip: 600;
    
    /* Layout */
    --container-padding: var(--spacing-md);
    --container-max-width: 1200px;
    --content-max-width: 800px;
    
    /* Components */
    --header-height: 60px;
    --header-height-mobile: 50px;
    --button-padding: var(--spacing-sm) var(--spacing-md);
    --input-height: 2.5rem;
    --input-padding: var(--spacing-sm);
    
    /* Breakpoints */
    --breakpoint-xs: 480px;
    --breakpoint-sm: 600px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
}

/* Media queries pour les ajustements responsifs des variables */
@media (max-width: var(--breakpoint-md)) {
    :root {
        /* Ajustements pour les tailles de police sur mobile */
        --font-size-base: 14px;
        --scale-ratio: 1.2;
        
        /* Ajustements des espacements */
        --spacing-unit: 0.2rem;
        
        /* Ajustements des conteneurs */
        --container-padding: var(--spacing-sm);
    }
    :root {
        --font-size-base: 14px;
    }

    .corp {
        padding: var(--spacing-md);
    }

    .image-float {
        float: none;
        margin: var(--spacing-md) auto;
    }

    table {
        display: block;
        overflow-x: auto;
    }
    
    .gallery {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    body {
        font-size: 0.9em;
    }
    .md-flex-col { flex-direction: column; }
    .md-items-center { align-items: center; }
    .md-justify-center { justify-content: center; }
    .md-w-full { width: 100%; }
    .md-hidden { display: none; }
    .md-block { display: block; }
    .md-grid-cols-1 { grid-template-columns: 1fr; }
    .md-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .footer-links {
        flex-direction: column;
        align-items: center;
    }

}

@media (max-width: var(--breakpoint-sm)) {
    :root {
        --font-size-base: 12px;
        --header-height: var(--header-height-mobile);
    }
    body {
        font-size: 0.5em;
    }
    
    form {
        padding: var(--spacing-md);
    }
    
    input {
        font-size: 0.9em;
    }

    .button-spe {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
    
    #header #partiel {
        flex-direction: column-reverse;
    }
    
    #header.small #partiel {
        flex-direction: row;
    }
    
    header .logo img {
        width: 50px;
    }
    
    #header.small .logo img {
        width: 20px;
    }

    #header.small h1 {
        padding: 0.5em;
        font-size: 3em;
    }
    
    #header.small {
        height: 50px;
        background-color: var(--color-highlight);
        font-size: 0.7em;
    }
    
    main elem1 img {
        width: 60%;
    }
    
    elem1 {
        font-size: 0.7em;
    }
}

@media (max-width: var(--breakpoint-xs)) {
    .sm-flex-col { flex-direction: column; }
    .sm-items-center { align-items: center; }
    .sm-justify-center { justify-content: center; }
    .sm-w-full { width: 100%; }
    .sm-hidden { display: none; }
    .sm-block { display: block; }
    .sm-grid-cols-1 { grid-template-columns: 1fr; }
}


/* Reset et base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-background);
    font-weight: var(--font-weight-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-light);
    line-height: 1.2;
}
h1 { font-size: var(--font-size-2xl);  margin-bottom: var(--spacing-2xl); color: var(--color-highlight);}
h2 { font-size: var(--font-size-2xl);  margin-bottom: var(--spacing-xl); color: var(--color-highlight); }
h3 { font-size: var(--font-size-lg);   margin-bottom: var(--spacing-lg);}
h4 { font-size: var(--font-size-md);  margin-bottom: var(--spacing-md); }
h5 { font-size: var(--font-size-sm);   margin-bottom: var(--spacing-sm);}
h6 { font-size: var(--font-size-xs);  margin-bottom: var(--spacing-xs); color: var(--color-text-muted);}

p, ul, ol {
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
    list-style: none;
}

a {
    color: var(--color-highlight);
    text-decoration: none;
    transition: color var(--transition-fast);
}

/* Header Styles */
header {
    position: fixed;
    z-index: var(--z-header);
    display: flex;
    align-items: center;
   
}

header h1 {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    padding: var(--spacing-xs);

    font-size: 2em;
    color: var(--color-black);
    margin: 0;
}

header::before {
    content: "";
    background-image: url('../asset/tournevisse.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-negative);
    opacity: 1;
    transition: opacity 0.5s ease;
    transform: rotate(30deg);
}

#header {
    font-size: var(--font-size-2xl);
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-highlight);
    color: var(--color-black);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 1s;
    flex-direction: row;
}

#header.small {
    height: 60px;
    background-color: var(--color-highlight);
    font-size: var(--font-size-xs);
}

#header.small::before {
    opacity: 0;
}

#header.small h1 {
    padding: var(--spacing-xs);
}

#partiel {
    display: flex;
    align-items: center;
}

header .logo img {
    width: 100px;
}

#header.small .logo img {
    width: 2em;
}

/* Main Content */
main {
    color: var(--color-text);
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    padding-top: var(--spacing-sm);
    min-height: 100vh;
    justify-content: center
}

main elem1 img {
    width: 60%;
}

/* Formulaires et zones de test */
.zone-test {
    width: 100%;
    max-width: 600px;
    background-color: var(--color-black);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

a:hover {
    color: var(--color-accent);
}

.corp {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-lg);
}

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

.image-float {
    max-width: 300px;
    margin: var(--spacing-md);
}

.image-float.left { float: left; }
.image-float.right { float: right; }

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

/* Composants textuels */
.highlight {
    background-color: var(--color-background-alt);
    padding: var(--spacing-md);
    border-left: 4px solid var(--color-accent);
    margin: var(--spacing-md) 0;
    border-radius: var(--radius-sm);
}

blockquote.exergue {
    font-style: italic;
    padding: var(--spacing-md) var(--spacing-lg);
    border-left: 4px solid var(--color-highlight);
    background-color: var(--color-background-alt);
    margin: var(--spacing-lg) 0;
    color: var(--color-text-secondary);
}

/* Tableaux */
table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-lg) 0;
    background-color: var(--color-background-alt);
}

th, td {
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    text-align: left;
}

th {
    background-color: var(--color-background);
    font-weight: var(--font-weight-normal);
    color: var(--color-highlight);
}

form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    background-color: var(--color-background-alt);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    margin: var(--spacing-xl);
    width: 100%;
}

.form-group {
    margin-bottom: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-light);
}

input, textarea, select {
    width: 100%;
    padding: var(--spacing-sm);
    font-size: var(--font-size-xs);
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-background);
    color: var(--color-text);
    outline: none;
    transition: border-color 0.3s;
    font-family: inherit;
    font-size: inherit;
    transition: all var(--transition-fast);
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--color-highlight);
    box-shadow: 0 0 5px var(--color-highlight);
}

/* Messages d'erreur */
.error {
    font-size: 0.8rem;
    color: var(--color-accent);
    margin-top: -0.5rem;
    visibility: hidden;
}

/* Boutons */
.btn, button, input[type="submit"], .button-spe {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 20px;
    background-color: transparent;
    color: var(--color-white);
    border: 1px solid var(--color-white);
    font-weight: var(--font-weight-normal);
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    text-align: center;
    transition: all var(--transition-normal);
}

.btn:hover, button:hover, input[type="submit"]:hover, .button-spe:hover {
    background-color: var(--color-text);
    color: var(--color-black);
}



/* Utils */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }

.notification-container {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-overlay);
}

.notification {
    color: var(--color-text);
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: var(--shadow-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.notification.success {
    background-color: #4caf50;
}

.notification.error {
    background-color: #f44336;
}

.notification.info {
    background-color: #2196F3;
}

.notification.warning {
    background-color: #ff9800;
}

.notification .close-button {
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 16px;
    cursor: pointer;
    padding-left: 10px;
}

/*-------------------products-------------------------*/
/* Conteneur des produits */
.product-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
}
/* Carte produit */
.product-card {
    background-color: var(--color-text-muted);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease-in-out;
    text-align: left;
}
/* Image du produit */
.product-image {
    width: 100%;
    height: auto; 
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm); 
}
.product-card:hover {
    transform: scale(1.05);
}
/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}
.pagination-button {
    background-color: var(--color-highlight);
    color: var(--color-text);
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: background-color var(--transition-fast);
}
.pagination-button:disabled {
    background-color: var(--color-text-muted);
    cursor: not-allowed;
}
.pagination-button:hover {
    background-color: var(--color-accent);
}

/* Classes utilitaires pour Flexbox */

/* Conteneurs Flex */
.flex { display: flex; }
.flex-inline { display: inline-flex; }

/* Direction */
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }

/* Wrap */
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }

/* Justify Content (axe principal) */
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* Align Items (axe secondaire) */
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

/* Align Content (multi-lignes) */
.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-center { align-content: center; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }
.content-stretch { align-content: stretch; }

/* Align Self (pour les items individuels) */
.self-auto { align-self: auto; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-stretch { align-self: stretch; }

/* Flex Grow / Shrink */
.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }

/* Propriétés combinées */
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }

/* Order */
.order-first { order: -999; }
.order-last { order: 999; }
.order-none { order: 0; }

/* Gap */
.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }

/* Row & Column Gap */
.gap-x-xs { column-gap: var(--spacing-xs); }
.gap-x-sm { column-gap: var(--spacing-sm); }
.gap-x-md { column-gap: var(--spacing-md); }
.gap-x-lg { column-gap: var(--spacing-lg); }
.gap-x-xl { column-gap: var(--spacing-xl); }

.gap-y-xs { row-gap: var(--spacing-xs); }
.gap-y-sm { row-gap: var(--spacing-sm); }
.gap-y-md { row-gap: var(--spacing-md); }
.gap-y-lg { row-gap: var(--spacing-lg); }
.gap-y-xl { row-gap: var(--spacing-xl); }

/* Classes utilitaires pour Grid */

/* Conteneur Grid */
.grid { display: grid; }
.grid-inline { display: inline-grid; }

/* Colonnes et lignes */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }

/* Auto-fill et Auto-fit */
.grid-cols-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.grid-cols-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* Span d'éléments */
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-12 { grid-column: span 12 / span 12; }
.col-span-full { grid-column: 1 / -1; }

.row-span-1 { grid-row: span 1 / span 1; }
.row-span-2 { grid-row: span 2 / span 2; }
.row-span-3 { grid-row: span 3 / span 3; }
.row-span-4 { grid-row: span 4 / span 4; }
.row-span-5 { grid-row: span 5 / span 5; }
.row-span-6 { grid-row: span 6 / span 6; }
.row-span-full { grid-row: 1 / -1; }

/* Positionnement des éléments */
.col-start-1 { grid-column-start: 1; }
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }
.col-start-5 { grid-column-start: 5; }
.col-start-6 { grid-column-start: 6; }
.col-start-auto { grid-column-start: auto; }

.col-end-1 { grid-column-end: 1; }
.col-end-2 { grid-column-end: 2; }
.col-end-3 { grid-column-end: 3; }
.col-end-4 { grid-column-end: 4; }
.col-end-5 { grid-column-end: 5; }
.col-end-6 { grid-column-end: 6; }
.col-end-7 { grid-column-end: 7; }
.col-end-auto { grid-column-end: auto; }

.row-start-1 { grid-row-start: 1; }
.row-start-2 { grid-row-start: 2; }
.row-start-3 { grid-row-start: 3; }
.row-start-4 { grid-row-start: 4; }
.row-start-5 { grid-row-start: 5; }
.row-start-6 { grid-row-start: 6; }
.row-start-auto { grid-row-start: auto; }

.row-end-1 { grid-row-end: 1; }
.row-end-2 { grid-row-end: 2; }
.row-end-3 { grid-row-end: 3; }
.row-end-4 { grid-row-end: 4; }
.row-end-5 { grid-row-end: 5; }
.row-end-6 { grid-row-end: 6; }
.row-end-7 { grid-row-end: 7; }
.row-end-auto { grid-row-end: auto; }

/* Grid Flow */
.grid-flow-row { grid-auto-flow: row; }
.grid-flow-col { grid-auto-flow: column; }
.grid-flow-row-dense { grid-auto-flow: row dense; }
.grid-flow-col-dense { grid-auto-flow: column dense; }

/* Auto Columns/Rows */
.auto-cols-auto { grid-auto-columns: auto; }
.auto-cols-min { grid-auto-columns: min-content; }
.auto-cols-max { grid-auto-columns: max-content; }
.auto-cols-fr { grid-auto-columns: minmax(0, 1fr); }

.auto-rows-auto { grid-auto-rows: auto; }
.auto-rows-min { grid-auto-rows: min-content; }
.auto-rows-max { grid-auto-rows: max-content; }
.auto-rows-fr { grid-auto-rows: minmax(0, 1fr); }

/* Classes supplémentaires pour la mise en page générale */

/* Width & Height */
.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-auto { width: auto; }
.w-half { width: 50%; }
.w-third { width: 33.333333%; }
.w-quarter { width: 25%; }

.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-auto { height: auto; }
.h-half { height: 50%; }
.h-third { height: 33.333333%; }
.h-quarter { height: 25%; }

/* Max/Min dimensions */
.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-screen { max-width: 100vw; }
.max-w-full { max-width: 100%; }

.min-w-0 { min-width: 0px; }
.min-w-full { min-width: 100%; }
.min-w-min { min-width: min-content; }
.min-w-max { min-width: max-content; }

.min-h-0 { min-height: 0px; }
.min-h-full { min-height: 100%; }
.min-h-screen { min-height: 100vh; }
.min-h-min { min-height: min-content; }
.min-h-max { min-height: max-content; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.static { position: static; }

/* Top, Right, Bottom, Left */
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

.top-auto { top: auto; }
.right-auto { right: auto; }
.bottom-auto { bottom: auto; }
.left-auto { left: auto; }

/* Z-index */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-auto { z-index: auto; }


/* Display */
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.hidden { display: none; }

/* Overflow */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }




/* Footer global */
.footer {
    width: 100%;
    background-color: var(--color-black);
    color: var(--color-text);
    padding-top: var(--footer-padding);
    text-align: center;
    font-size: var(--footer-text-size);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
}

/* Container de navigation */
.footer-nav {
    margin-top: 70px;
    padding-bottom: 10px;
}

/* Liste des liens de navigation */
.footer-links {
    list-style: none;
    padding: 0;
    margin-bottom: 0;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm);
}

/* Style des liens */
.footer-link,
.footer a {
    color: var(--color-white);
    text-decoration: none;
    transition: color var(--transition-fast), text-decoration var(--transition-fast);
}

.footer-link:hover,
.footer-link:focus,
.footer a:hover,
.footer a:focus {
    color: var(--color-highlight);
    text-decoration: underline;
}

/* Section "Suivez-nous" */
.footer section {
    margin: var(--spacing-md) 0;
    display: flex;
        margin: var(--spacing-md) 0;
        flex-direction: column;
        align-items: flex-start;
}

.footer section h2 {
    font-size: 1.2rem;
   
}

.footer section ul {
    list-style: none;
    padding: 0;
   
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm);
}

.footer section ul li {
    margin: 0;
}

/* À propos */
.footer section p {
    text-align: left;
    max-width: 400px;
   
    line-height: 1.6;
}

/* Copyright */
.footer-copy {
    font-size: var(--footer-copy-size);
    opacity: 0.7;
   
}

.image, .svg {
    position: absolute;
    top: 0;
    left: 0;
}

.presonalisation {
    position: relative;
    width: 430px;
    height: 300px;
}

@font-face {
    font-family: 'mdr';
    src: url('SARAH SCRIPT.TTF') format('truetype');
}
@font-face {
    font-family: 'mama';
    src: url('VIPNAGORGIALLA.TTF') format('truetype');
}

.custom{
    padding: 2%;
    display: flex;
    justify-content: space-around;
}


/* Styles pour l'accordéon */
.accordion {
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 20px;
}

.accordion-item {
    border-bottom: 1px solid #ddd;
}

.accordion-item:last-child {
    border-bottom: none;
}

.accordion-trigger {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    font-size: 1rem;
    font-weight: 600;
    justify-content: space-between;
    padding: 15px;
    text-align: left;
    width: 100%;
}

.accordion-trigger:hover, 
.accordion-trigger:focus {
    background-color: #f5f5f5;
    outline: none;
}

.accordion-trigger[aria-expanded="true"] {
    border-bottom: 1px solid #eee;
}

.accordion-panel {
    padding: 0 15px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.accordion-panel:not([hidden]) {
    max-height: 500px;
    padding: 15px;
}

.accordion-icon {
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    display: inline-block;
    height: 8px;
    margin-left: 5px;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    width: 8px;
}

.accordion-trigger[aria-expanded="true"] .accordion-icon {
    transform: rotate(-135deg);
}
/* Search */
.search-container {
    position: relative;
    max-width: 400px;
    margin: 20px auto;
}
.search-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}
.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #ccc;
    border-top: none;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}
.search-suggestions li {
    padding: 10px;
    cursor: pointer;
}
.search-suggestions li:hover {
    background: #f0f0f0;
}
.filters {
    margin-top: 10px;
}


.search-container {
    position: relative;
    max-width: 400px;
    margin: 20px auto;
}
.search-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}
.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #ccc;
    border-top: none;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}
.search-suggestions li {
    padding: 10px;
    cursor: pointer;
}
.search-suggestions li:hover {
    background: #f0f0f0;
}
.filters {
    margin-top: 10px;
}


/* progresse barre */
.progress-container {
    margin: 30px 0;
    position: relative;
  }

.progress-bar {
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  position: relative;
  margin-bottom: 30px;
}
.progress-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: #4CAF50;
  border-radius: 4px;
  transition: width 0.5s ease-in-out;
}
.steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 10px;
}
.step {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e0e0e0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: white;
  position: relative;
  z-index: 2;
}
.step.active {
  background: #4CAF50;
}
.step-label {
  position: absolute;
  top: 40px;
  transform: translateX(-50%);
  font-size: 14px;
  color: #666;
  text-align: center;
  width: 100px;
}
.controls {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}

/*  home    */
/* ---- 1. Bloc d'introduction ---- */
.product-intro {
    max-width: var(--container-max-width);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: var(--spacing-block-sm) 0;
    gap: var(--spacing-md);
    
}

.product-intro img {

    max-width: 650px;
    border-radius: var(--radius-md);
    height: auto;
}

.info h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-xs);
}

.sub-title {
    color: var(--color-gray-200);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-sm);
}

/* ---- Bloc Générique : Qualité & Polyvalence ---- */
.feature-block {
    position: relative;
    display: flex;
    align-items: center;
    margin: var(--spacing-block-md) auto;
    overflow: hidden;
   
    min-height: 300px;

    gap: 50px;
    transition: var(--transition-slow);
}

.feature-title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    transform-origin: center;
    transition: var(--transition-slow);
    align-self: center;
}

.feature-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    width: 100%;
    height: 100%;
}

.feature-content img {
    max-width: 900px;
    border-radius: 10px 0  0 10px;
    height: auto;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--timing-function);
}

.feature-text {
    opacity: 0;
    max-width: 400px;
    transform: translateY(var(--spacing-md));
    transition: var(--transition-slow);
    visibility: hidden;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* Animation au survol */
.feature-block:hover .feature-title {
    writing-mode: horizontal-tb;
    font-size: var(--font-size-xl);
    margin-bottom: 0;
    align-self: center;
}

.feature-block:hover .feature-content img {
    transform: translateX(50%);
}

.feature-block:hover .feature-text {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%);
}

/* Version Inversée */
.feature-block.reverse {
    flex-direction: row-reverse;
}

.feature-block.reverse .feature-title {
    margin-left: var(--spacing-lg);
    transform-origin: right center;
}

.feature-block.reverse .feature-content {
    align-items: flex-end;
}

.feature-block.reverse .feature-text {
    right: 0;
    text-align: center;
}

.feature-block.reverse:hover .feature-content img {
    transform: translateX(-50%);
}



/* Responsivité */
@media (max-width: var(--breakpoint-md)) {
    .feature-block, .feature-block.reverse {
        flex-direction: column;
        align-items: center;
    }

    .feature-title {
        writing-mode: horizontal-tb;
        font-size: var(--font-size-xl);
        margin-bottom: var(--spacing-md);
        align-self: center;
    }

    .feature-text {
        position: relative;
        transform: none;
        top: auto;
        margin-top: var(--spacing-md);
        text-align: center;
    }

    .feature-content {
        align-items: center;
    }

    .feature-block:hover .feature-content img,
    .feature-block.reverse:hover .feature-content img {
        transform: translateX(0);
    }
}

/* ---- 4. Bloc Embouts Aimantés ---- */


.embout-aimenter {
    text-align: center;
    margin: var(--spacing-block-xs) 0 var(--spacing-2xl);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    flex-direction: column;
    background-color: var(--color-black);
    padding: var(--spacing-block-xs);
}
.embout-aimenter img {
    max-width: var(--container-max-width);
    filter: drop-shadow(0 0 10px #0021ff);
}

.embout-aimenter h2 {
    font-size: var(--font-size-2xl);
    color: var(--color-white);
}




.polyvalent {
    background-color: var(--color-text-secondary);
    padding: var(--spacing-block-md) 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    gap: var(--spacing-md);
    position: relative;
    
    background-image: url('../asset/show-2.webp');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16% auto;
}

.polyvalent::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 16%;
    height: 100%;
    background-image: url('../asset/show-2.webp');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    transform: scaleX(-1); /* Effet miroir */
}


.polyvalent h2,.polyvalent p {
  
    color: var(--color-black);
}

.polyvalent p {
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-md);
}

.polyvalent p strong {
    font-weight: var(--font-weight-bold);
}

.polyvalent img {
    border-radius: 15px;
    max-width: 40%;
    height: auto;
    margin-bottom: var(--spacing-md);
}

.polyvalent h6 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-300);
    margin-bottom: var(--spacing-md);
}

.polyvalent .bottom-icon {
    width: 220px;
    opacity: 0.8;
    scale: -1;
}

/* ---- 5. Bloc Compact ---- */
.product.compact {
    max-width: var(--container-max-width);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: var(--spacing-block-md) auto;
    gap: var(--spacing-md); /* Ajoute un espace entre l'image et le texte */
}

/* Image à gauche */
.product.compact figure {
    margin: 0;
    flex-shrink: 0; /* Empêche l'image de rétrécir */
}

/* Ajustement de l'image */
.product.compact figure img {
    
    max-width: 650px;
    border-radius: var(--radius-md);
    display: block;
}

/* Contenu texte à droite */
.product.compact .product-info {
    flex: 1;
}

/* Responsive : centrer en colonne */
@media (max-width: var(--breakpoint-md)) {
    .product.compact {
        flex-direction: column;
        text-align: center;
    }

    .product.compact figure img {
        width: 80%;
    }
}

/* ---- Responsive ---- */
@media (max-width: var(--breakpoint-md)) {
    .product-intro,
    .quality-content,
    .product,
    .image-container {
        flex-direction: column;
        text-align: center;
    }

    .product-intro img,
    .product figure img,
    .quality-content img {
        width: 80%;
    }

    .button-spe {
        width: 100%;
    }
}

.image-container img:last-child {
    transform: scaleX(-1);
}


/* ---- Section Avis Clients ---- */
.customer-reviews {
    max-width: var(--container-max-width);
    padding: var(--spacing-block-lg) 0;
    display: flex;
    justify-content: center;
    background: var(--color-light-gray);
    
}

.review-container {
    color: var(--color-black);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    max-width: 1200px;
    border-radius: var(--radius-md);

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   
}

.review-container figure {
    flex: 1;
    max-width: 400px;
}

.review-container img {
    width: 25%;
    height: auto;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    
}

.reviews-content {
    flex: 2;
    text-align: left;
    padding: 3%;
}

.reviews-content h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-md);
}

.reviews-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

blockquote {
    background: var(--color-white);
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    font-size: var(--font-size-md);
    font-style: italic;
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-400);
}
blockquote p {
    color: var(--color-black);
}


.more-reviews {
    display: block;
    width: 50px;
    height: 50px;
    font-size: var(--font-size-lg);
    font-weight: bold;
    color: var(--color-white);
    background: var(--color-primary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
}

.more-reviews:hover {
    background: var(--color-primary-dark);
}

/* Responsivité */
@media (max-width: var(--breakpoint-md)) {
    .review-container {
        flex-direction: column;
        text-align: center;
    }

    .reviews-content {
        text-align: center;
    }
}

/* ---- Section Cadeau Idéal ---- */
.gift-section {
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white) url('../asset/gift.webp') no-repeat left center;
    background-size: contain;
    padding: var(--spacing-lg);
    position: relative;
}

.gift-content {
    text-align: left;
    background: rgba(0, 0, 0, 0.9);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   
}

.gift-content h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-sm);
}

.gift-content h6 {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-md);
}



/* Responsivité */
@media (max-width: var(--breakpoint-md)) {
    .gift-section {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-md);
    }
}



/*  carroussell */
.carousel {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: var(--Profond_gray);
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
}


.carousel h1, h2, p {
    position: relative;
    z-index: 1;
}

.carousel-container {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.carousel-track {
    display: flex;
    transition: transform var(--transition-normal);
    height: 100%;
}
.carousel-slide img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Coupe les parties qui dépassent */
    top: 0;
    left: 0;
    z-index: 0;
}

/* Texte au-dessus de l'image */
.carousel-slide h2,
.carousel-slide h3 {
    position: relative;
    z-index: 1;
     /* Assurez-vous que le texte reste lisible */
    background: rgb(0, 0, 0, 0.7); /* Ajoute un fond semi-transparent pour améliorer la lisibilité */
    padding: var(--spacing-md);
    border-radius: 10px;
}
.carousel-slide h3 {
    color: var(--White);
    border-radius: 0 10px 10px 0;
}
.carousel-slide {
    position: relative; /* Permet de contenir l'image en absolute */
    flex: 0 0 100%;
    padding: var(--spacing-lg);
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Cache tout débordement */
    
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgb(0, 0, 0, 0.7);
    color: var(--White);
    border: none;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 1;
    transition: all var(--transition-fast);
    font-size: xx-large;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-button:hover {
    background-color: var(--Jaune);
    color: var(--Black);
}

.carousel-button-left { left: var(--spacing-sm); }
.carousel-button-right { right: var(--spacing-sm); }

@media (max-width: 768px) {
    .carousel {
        width: 90%;
    }
    
    .carousel-button {
        width: 30px;
        height: 30px;
    }
}

.carousel,
.carousel-track,
.carousel-container,
.carousel-slide {
    transition: var(--transition-super-slow);
}




/* Style du mini header */
.mini-header {
    width: 100%; /* S'assurer que le mini header occupe toute la largeur */
    text-align: right;
    z-index: 50;
    background-color: #222222; /* Couleur de fond plus subtile */
    font-size: 14px;
    position: sticky;
    top: 60px;
    padding: 2px 0; /* Ajout de padding pour plus d'espace */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombre subtile pour séparer le mini header */
    transition: background-color 0.3s ease; /* Effet de transition sur la couleur de fond */
}

.mini-header ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Utilisation de flexbox pour aligner les éléments horizontalement */
    justify-content: flex-end; /* Aligner à droite */
    align-items: center; /* Centrer verticalement */
    height: 100%; /* Assure une hauteur uniforme */
}

.mini-header li {
    margin-right: 25px; /* Espacement entre les éléments */
}

.mini-header a {
    text-decoration: none;
    color: #ffffff;
    
    font-size: 15px; /* Taille de police légèrement augmentée */
    padding: 5px 10px; /* Ajout de padding pour rendre les liens plus cliquables */
    border-radius: 5px; /* Coins arrondis pour les liens */
    transition: all 0.3s ease; /* Transition sur les changements de style */
}

/* Effet au survol des liens */
.mini-header a:hover {
    color: #007bff; /* Change la couleur du texte au survol */
    background-color: rgba(0, 123, 255, 0.1); /* Fond léger au survol */
    transform: scale(1.05); /* Effet de zoom léger */
}

/* Effet de survol pour le mini header pour indiquer l'interaction */
.mini-header:hover {
    background-color: #333333; /* Change légèrement la couleur de fond */
}

/* Style du conteneur des boutons */
.mini-header-buttons {
    text-align: right;
    display: flex;
    gap: 7px;
    position: absolute;
    background-color: #222222;
    padding: 0px 10px 6px 10px;
    margin-right: 2.5px;
    border-radius: 0 0 10px 10px;
    z-index: 50;
    justify-content: flex-end;
    top: 28px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Style des boutons */
.mini-header-buttons button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Effet au survol */
.mini-header-buttons button:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}