/* =========================================
   1. CONFIGURATION GÉNÉRALE & BODY
   ========================================= */

/* Scrollbar style Mac OS (Invisible et élégante) */
::-webkit-scrollbar {
    width: 12px;
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    border: 3px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

/* Body : Fond dégradé + Apparition douce */
body {
    margin: 0 auto ;
    width:1080px ;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #1d1d1f;
    
    /* Le dégradé gris vers blanc */
    background: linear-gradient(to bottom, #e6e6e6 0%, #ffffff 80%);
    background-attachment: fixed;
    
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    /* Animation d'ouverture de page */
    animation: pageFadeIn 0.6s ease-out forwards;
}

/* =========================================
   2. HEADER & NAVIGATION
   ========================================= */

header {
    text-align: center;
}

/* Le conteneur du menu (La barre flottante) */
nav ul {
    list-style: none;
    margin: 10px auto;
    padding: 10px 60px; /* J'ai ajusté un peu pour l'équilibre */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 15px;

    /* Style Liquid Glass */
    background: rgba(255, 255, 255, 0.8);
    border: 0.5px solid rgba(0, 0, 0, 0.15);
    border-radius: 50px;
    
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Style UNIFIÉ : Liens du menu + Bouton contact (.apple-btn) */
nav a, .apple-btn {
    text-decoration: none;
    color: #363535;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;

    display: inline-block;
    padding: 12px 24px;
    border-radius: 50px;
    cursor: pointer;

    /* Aspect visuel des bulles */
    background: rgba(255, 255, 255, 0.8); 
    border: 1px solid rgba(0, 0, 0, 0.15); 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- ÉTAT ACTIF DU MENU (PAGE COURANTE) --- */
nav a.active {
    /* 1. Changement de couleur pour marquer la sélection */
    background: #ffffff;       /* Fond devient blanc opaque */
    color: #0071e3;            /* Texte devient Bleu Apple */
    
    /* 2. Petit effet visuel supplémentaire */
    box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.15); /* Fin halo bleu autour */
    font-weight: 700;          /* Texte un peu plus gras */
    
    /* On annule légèrement la transparence pour que ça ressorte */
    backdrop-filter: none; 
}       

/* Animation au survol (Zoom + Blanc pur) */
nav a:hover, .apple-btn:hover {
    transform: scale(1.08);
    background: #ffffff;
    color: #000000;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* =========================================
   3. RECHERCHE (EXPANDABLE)
   ========================================= */

.search-item {
    display: flex;
    align-items: center;
}

.search-container {
    display: flex;
    align-items: center;
    background: transparent;
    border-radius: 50px;
    padding: 5px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.search-input {
    width: 0;
    opacity: 0;
    border: none;
    background: transparent;
    outline: none;
    color: #1d1d1f;
    font-size: 14px;
    padding: 0;
    transition: all 0.3s ease;
}

.search-btn {
    cursor: pointer;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.search-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* État Actif (Ouvert) */
.search-container.active {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding-left: 15px;
}

.search-container.active .search-input {
    width: 220px;
    opacity: 1;
}

/* =========================================
   4. CONTENU PRINCIPAL (MAIN)
   ========================================= */

main {
    flex: 1;
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
    width: 90%;
}

h1 {
    font-weight: 600;
    font-size: 40px;
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: -0.01em;
    animation: apparitionTitre 0.5s ease-out forwards;
}

/* Bloc Présentation (Texte Accueil) */
.presentation {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    border-radius: 40px;

    max-width: 800px;
    width: 90%;
    margin: 40px auto;
    padding: 50px;
    text-align: center;
    
    /* Animation spécifique */
    animation: pageFadeIn 0.5s ease-out forwards; 
}

/* =========================================
   5. GRILLE PRODUITS (ACCUEIL)
   ========================================= */

.demos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
}

.demo {
    width: 30%; 
    text-align: center; 
    margin-bottom: 40px;
    
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.022em;
    line-height: 1.5;
    
    padding-top: 15px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.demo img {
    height: 200px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 5px;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.demo:hover img {
    transform: scale(1.06);
}

.demo a {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

/* =========================================
   6. TABLEAUX (DONNÉES)
   ========================================= */

table {
    width: 100%;
    border-collapse: separate; 
    border-spacing: 0;
    
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.5);
    overflow: hidden;
}

/* Animation d'apparition du tableau */
.dataTables_wrapper {
    animation: apparitionDouce 0.8s ease-out forwards;
}

thead tr {
    background-color: rgba(245, 245, 247, 0.8) !important;
}

th {
    text-align: left;
    padding: 18px 25px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: #86868b;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

td {
    padding: 20px 25px;
    font-size: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    vertical-align: middle;
}

tbody tr:hover {
    background-color: rgba(0, 113, 227, 0.03);
    transition: background-color 0.2s ease;
}

tbody tr:last-child td {
    border-bottom: none;
}

/* =========================================
   7. CONTACT (STYLE EXACT ACCUEIL & HEADER)
   ========================================= */

/* 1. La Carte Globale (Copie exacte de la classe .presentation de l'accueil) */
.contact-card {
    /* FOND & TEXTURE : Identique au Header */
    background: rgba(255, 255, 255, 0.8) !important; /* Force la transparence */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* BORDURE : Fine et grise comme le menu */
    border: 1px solid rgba(0, 0, 0, 0.15); 
    
    /* FORME : Arrondi de 40px (comme le bloc Présentation de l'accueil) */
    border-radius: 40px; 
    
    /* OMBRE : Identique à l'accueil */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    
    /* Dimensions et Espacement */
    max-width: 800px; /* Même largeur que le texte d'accueil pour l'alignement */
    width: 90%;
    margin: 40px auto 100px auto; /* Mêmes marges */
    padding: 50px; /* Même espacement interne */
}

/* 2. Mise en page interne */
.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

/* --- UTILITAIRES DE TAILLE (Pour le ratio 70/30) --- */
.col-70 {
    flex: 7 !important; /* Prend 7 parts de l'espace (70%) */
}

.col-30 {
    flex: 3 !important; /* Prend 3 parts de l'espace (30%) */
}

.form-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 25px;
}

.form-group label {
    font-size: 13px; /* Un tout petit peu plus grand pour la lisibilité */
    font-weight: 600;
    color: #1d1d1f; /* Noir Apple (au lieu de gris) pour plus de contraste */
    margin-bottom: 10px;
    margin-left: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
}

/* 3. Les Champs de saisie (Inputs) */
/* Style "Liquid Glass" comme les boutons du Header */
.form-group input, 
.form-group textarea {
    /* FOND : Blanc semi-transparent */
    background-color: rgba(255, 255, 255, 0.6); 
    
    /* BORDURE : Grise fine (Style Header) */
    border: 1px solid rgba(0, 0, 0, 0.15); 
    
    /* TEXTURE */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* FORME */
    border-radius: 18px; /* Arrondi proche des boutons */
    padding: 18px 20px;
    font-size: 15px;
    font-family: inherit;
    color: #1d1d1f;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
    
    /* Suppression de l'ombre interne par défaut sur iOS */
    -webkit-appearance: none;
    box-shadow: none;
}

/* 4. Effet Focus (Quand on écrit) */
.form-group input:focus, 
.form-group textarea:focus {
    background-color: #ffffff; /* Blanc pur */
    border-color: #0071e3;     /* Bleu Apple */
    box-shadow: 0 4px 15px rgba(0, 113, 227, 0.15); /* Halo bleu */
    transform: scale(1.01);
    outline: none;
}

/* 5. Le Bouton Envoyer */
.form-submit {
    text-align: center;
    margin-top: 20px;
}

/* Note : Le bouton utilise déjà la classe .apple-btn (définie avec le header) 
   donc il est DEJA identique à vos boutons de menu. */

/* =========================================
   8. FOOTER
   ========================================= */

footer {
    background-color: #f5f5f7;
    padding: 30px;
    text-align: center;
    font-size: 12px;
    color: #86868b;
    border-top: 1px solid #d2d2d7;
    margin-top: auto;
}

.logoapple {
    display: flex;             
    align-items: center;       
    justify-content: center;    
}

/* =========================================
   9. ANIMATIONS (KEYFRAMES)
   ========================================= */

@keyframes apparitionDouce {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes apparitionTitre {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes pageFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* --- ÉCRAN DE DÉMARRAGE (BOOT SCREEN) --- */

#boot-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* Fond blanc (ou #000000 pour le mode sombre) */
    z-index: 10000; /* Toujours au-dessus de tout le reste */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-out; /* Disparition douce */
}

.boot-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.boot-logo {
    width: 50px;         /* <-- C'est ici ! Essaie 40px, 50px ou 60px */
    margin-bottom: 20px; /* Espace entre la pomme et la barre */
}

/* Le "Rail" de la barre (le fond gris) */
.boot-progress-track {
    width: 200px;        /* Largeur fixe et discrète */
    height: 4px;         /* Très fin */
    background-color: #e5e5e5; /* Gris très clair */
    border-radius: 10px; /* Bords ronds */
    overflow: hidden;    /* Pour couper ce qui dépasse */
}

/* Le Remplissage (la partie noire qui avance) */
.boot-progress-fill {
    width: 0%;           /* Vide au début */
    height: 100%;
    background-color: #1d1d1f; /* Noir Apple */
    border-radius: 10px;
    
    /* Animation fluide du remplissage */
    /* cubic-bezier pour un effet réaliste : lent au début, rapide, puis lent */
    transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); 
}

/* 1. STYLE GÉNÉRAL (Pour tous les champs) */
.form-group input, 
.form-group textarea,
.form-group select {
    background-color: rgba(255, 255, 255, 0.6); 
    border: 1px solid rgba(0, 0, 0, 0.15); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 18px;
    padding: 18px 20px;
    font-size: 17px;
    font-family: inherit;
    color: #1d1d1f;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
    
    /* IMPORTANT : On force l'absence d'image par défaut pour ne pas avoir de flèche sur Nom/Prénom/Email */
    background-image: none !important; 
    box-shadow: none;
    -webkit-appearance: none;
}

/* 2. STYLE SPÉCIFIQUE AU MENU DÉROULANT (On ajoute la flèche ici seulement) */
.form-group select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    
    /* La petite flèche bleue Apple uniquement ici */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%230071e3%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 12px;
    padding-right: 40px; /* Place pour la flèche */
}

/* 3. EFFET FOCUS (Quand on clique) */
.form-group input:focus, 
.form-group textarea:focus,
.form-group select:focus {
    background-color: #ffffff;
    border-color: #0071e3;
    outline: none;
}

.form_messager{
    text-align: center;
/* --- BULLE DE RÉPONSE (Style Glassmorphism) --- */
    /* 1. Positionnement et Taille */
    margin: 30px auto 0 auto;       /* Ecart avec le bouton et centré */
    width: fit-content;             /* S'adapte à la longueur du texte */
    max-width: 90%;                 /* Ne dépasse pas sur mobile */
    
    /* 2. L'effet "Verre" (Identique à tes champs) */
    background-color: rgba(255, 255, 255, 0.75); /* Blanc translucide */
    backdrop-filter: blur(20px);                 /* Flou puissant */
    -webkit-backdrop-filter: blur(20px);         /* Pour Safari */
    border: 1px solid rgba(255, 255, 255, 0.8);  /* Bordure lumineuse */
    
    /* 3. Forme et Typographie */
    border-radius: 30px;            /* Forme de pilule très ronde */
    padding: 14px 30px;             /* Espace intérieur aéré */
    color: #1d1d1f;                 /* Gris foncé Apple */
    font-size: 15px;
    font-weight: 500;               /* Texte légèrement gras pour la lisibilité */
    text-align: center;
    
    /* 4. Ombre portée douce (Effet de lévitation) */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}



/* CONTENEUR DE LA GALERIE */
.memo {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;                
  justify-content: center;
  padding: 20px;
}

/* UN FILM */
.memo > div {
  width: calc(33.33% - 20px); /* 3 par ligne */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* TITRE DU FILM */
.memo p {
  margin-bottom: 10px;
  text-align: center;
  font-size: 14px;
  color: #ffffff;
}

/* IMAGE */
.memo img {
  width: 100%;
  height: 420px;            
  object-fit: cover;
  border-radius: 10px;

  /* filtre noir et blanc */
  filter: grayscale(100%);
  transition: filter 0.3s ease, transform 0.3s ease;
}

/* AU SURVOL */
.memo img:hover {
  filter: grayscale(0%);
  transform: scale(1.03);
}

/* RESPONSIVE (optionnel mais propre) */
@media (max-width: 900px) {
  .memo > div {
    width: calc(50% - 20px); /* 2 par ligne */
  }
}

@media (max-width: 500px) {
  .memo > div {
    width: 100%;            /* 1 par ligne */
  }
}




/* =========================================
   FORMULAIRE STYLE HEADER (GLASS)
   ========================================= */

/* Le bloc du formulaire */
.presentation form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;
}

/* On CACHE le vrai input vilain du navigateur */
#image {
    display: none;
}

/* Le style UNIFIÉ (Copié de ton Header "nav a") */
/* S'applique au bouton "Choisir" (label) et "Télécharger" (submit) */
.btn-apple-glass {
    appearance: none;
    border: none;
    text-decoration: none;
    font-family: inherit;
    
    /* Le Style Header exact */
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    border-radius: 50px;
    padding: 12px 24px;
    
    color: #363535;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    margin: 5px 0; /* Un peu d'espace autour des boutons */
}

/* Animation au survol (Zoom + Blanc pur) */
.btn-apple-glass:hover {
    transform: scale(1.08);
    background: #ffffff;
    color: #000000;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Le texte "Aucun fichier choisi" qui sera en dessous */
#file-name-display {
    margin: 15px 0 25px 0; /* Espace au dessus et en dessous */
    font-size: 13px;
    color: #86868b;        /* Gris Apple discret */
    font-weight: 500;
    font-style: italic;
}

/* Petit titre au dessus */
.presentation label.titre-form {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #86868b;
    margin-bottom: 20px;
}

/* Le texte "Nous avons : X image" */
.info-compteur {
    /* Le même style que "Ajouter une image" */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #86868b;      /* Gris Apple */
    font-weight: 600;
    
    /* La taille demandée (plus petit) */
    font-size: 10px;     
    
    /* Centrage et espacement */
    text-align: center;
    margin-top: 10px;
    margin-bottom: 30px; /* Espace avant les images */
}

/* =========================================
   STYLE SPÉCIFIQUE PAGE PARTENAIRES
   ========================================= */

/* La grille conteneur (4 par ligne) */
.partenaires-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;                /* Espace entre les blocs */
    justify-content: center;
    padding: 20px 0;
}

/* Chaque bloc partenaire (25% de largeur) */
.partenaires-grid > div {
    flex: 0 0 calc(25% - 30px); /* 4 par ligne */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* L'image : Carrée, Couleur, Pas de zoom */
.partenaires-grid img {
    width: 180px;            /* Taille réduite fixe */
    height: 180px;           /* Hauteur égale = Carré */
    object-fit: cover;       /* Coupe l'image proprement sans déformer */
    border-radius: 20px;     /* Bords arrondis modernes */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* Ombre douce */
    margin-bottom: 15px;
    
    /* Pas de filtres ni transitions (Reste fixe et en couleur) */
}

/* Gestion du responsive (Tablette et Mobile) */
@media (max-width: 1000px) {
    .partenaires-grid > div {
        flex: 0 0 calc(50% - 30px); /* 2 par ligne */
    }
}

@media (max-width: 600px) {
    .partenaires-grid > div {
        flex: 0 0 100%;             /* 1 par ligne */
    }
}