@CHARSET "UTF-8";

html, body {
    overflow-x: hidden; /* Empêche le défilement horizontal parasite sur mobile */
    width: 100%;
    margin: 0;
    padding: 0;
}

/* ============================================================
    1. RÉINITIALISATION & BASES
   ============================================================ */
* {
    box-sizing: border-box;
    max-width: 100%;
}

html, body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    color: #000;
    background-color: #FFF;
    font-family: Arial, sans-serif;
}

body { padding: 10px; }

/* Liens globaux */
a:link { color: #3366FF; text-decoration: underline; }
a:visited { color: #CC0000; }
a:hover { color: blue; }

/* Glossaire & Galerie */
a.gloss, a.galerie { color: blue; text-decoration: none; }
a.gloss:hover, a.galerie:hover { color: black; }

/* ============================================================
    2. HEADER MODERNE (FLEXBOX)
   ============================================================ */
#top_moyen {
    width: 100%;
    background: url(../presentation/Haut_petit.jpg) repeat-x;
    padding: 10px 0;
    overflow-x: hidden;
}

#top_moyen .top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}

.logo-header { height: 90px; width: auto; }
.button { height: 50px; width: auto; }

@media (max-width: 600px) {
    .logo-header { height: 60px; }
    .button { height: 35px; }
}

/* PayPal 
.paypal-img {
    height: 50px;
    display: block;
    margin: 0 auto 5px auto; /* petit espace sous l’image */
}*/

/* ============================================================
    3. CONTENURS DE PAGES
   ============================================================ */
#contenu2, #contenu3 {
    position: relative;
    margin: 20px auto;
    width: 95%;
    background-color: white;
}

#contenu2 { font-size: 18px; }
#contenu3 { font-size: 12px; }

.contenu-souple {
    padding: 10px;
}

@media (max-width: 600px) {
    #contenu2 { width: 100%; font-size: 16px; }
}

/* ============================================================
    4. TABLEAUX & WRAPPERS (Le gros ménage)
   ============================================================ */

/* Wrapper universel pour le défilement mobile */
.table-wrapper, .obs-table-wrap, .cycle-wrap, .table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
}

/* Style général des tableaux */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

/* Tableaux de données (Fiches, Pieges, etc.) */
.table-wrapper table {
    table-layout: auto;
}

.table-wrapper td {
    padding: 8px 0 !important; /* Ajoute 8px de hauteur en haut et en bas */
}

@media (min-width: 800px) {
    .table-wrapper table:not(.cycle-table) {
        width: 75%;
        margin: 0 auto;
    }
}

/* Spécifique au Cycle Biologique (Ligne continue) */
.cycle-wrap table {
    table-layout: fixed;
    width: 650px; 
    border-spacing: 0; /* Évite les micro-espaces entre les cellules */
}

.cycle-wrap td {
    padding: 8px 0 !important; /* Ajoute 8px de hauteur en haut et en bas */
    line-height: 0;
    vertical-align: middle;    /* Centre le contenu verticalement */
}

.cycle-wrap img {
    display: inline-block; /* Permet à l'image de respecter le padding du parent */
    margin: 0;
    vertical-align: middle;
}

/* ============================================================
    5. ÉLÉMENTS DE FICHE (Ravageurs, Plantes)
   ============================================================ */
.group-title {
    display: block;
    width: 100%;
    background: #f4f7f6;
    padding: 12px 15px;
    border-left: 5px solid #63adf5;
    border-radius: 4px;
    font-size: 1.4rem;
    margin: 30px 0 15px;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Couleurs spécifiques par type (optionnel) */
.group-title.disease { border-left-color: #e74c3c; } /* Rouge */
.group-title.insect  { border-left-color: #27ae60; } /* Vert */
.group-title.nematode  { border-left-color: #8b6914; } /* brun */
.group-title.virus  { border-left-color: #ffc0cb; } /* rose */
.group-title.disorder { border-left-color: #f39c12; } /* Orange */
.group-title.nutrition { border-left-color: #1e90ff; } /* bleu */
.group-title.other { border-left-color: #bfbfbf; } /* gris */

.ravageur-item, .plante-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 25px;
    padding: 10px;
    border-bottom: 1px dotted #ccc;
}

/* Photos de fiches */
.fiche-photos, .ravageur-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
}

/* Force l'image (ou son texte de remplacement) à rester dans un carré */
.thumb, .fiche-photos img {
    display: inline-block;
    width: 150px;      /* Largeur fixe pour garder le format carré */
    height: 120px;     /* Hauteur fixe */
    object-fit: cover; /* Si l'image existe, elle remplit le carré sans se déformer */
    
    /* Pour le cas où l'image est manquante : */
    background-color: #f0f0f0; 
    border: 1px solid #000; /* LIGNE NOIRE ici */
    overflow: hidden;         /* Coupe le texte qui dépasse sur grand écran */
    font-size: 10px;          /* Réduit la taille du texte alternatif */
    text-align: center;
    vertical-align: top;
}

.thumb {
    height: 120px;
    width: auto;
    max-width: 150px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
    background: #fff;  /* LIGNE GRISE ici */
    transition: transform 0.2s;
}

.thumb:hover { transform: scale(1.05); }

/* ============================================================
    6. FORMULAIRES & SELECTS
   ============================================================ */
.select-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 10px 0;
}

select {
    appearance: none;
    -webkit-appearance: none;
    background: #fff url("data:image/svg+xml;utf8,<svg fill='black' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 10px center;
    border: 1px solid #888;
    border-radius: 4px;
    font-size: 16px;

    /* --- CORRECTIFS POUR LE TEXTE COUPÉ --- */
    display: inline-block;
    height: 45px;            /* On force une hauteur fixe suffisante */
    line-height: 1.5;        /* Donne de l'espace vertical au texte */
    padding: 0 30px 0 10px;  /* On réduit le padding vertical car 'height' gère l'espace */
    vertical-align: top;
}

/* ============================================================
    7. PHOTOSWIPE & TIPPY (Correctifs Z-index)
   ============================================================ */
.pswp { z-index: 99999 !important; }
.tippy-box { position: relative !important; }

.footer {
    clear: both;
    margin-top: 30px;
    text-align: center;
    padding: 20px 0;
}

/* Style du bouton Fermer de Tippy */
.tippy-close {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 28px;
    font-weight: bold;
    color: #ff4d4d; /* Rouge pour être bien visible */
    cursor: pointer;
    z-index: 10000;
    line-height: 1;
    padding: 5px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.tippy-close:hover {
    color: #ff0000;
    background: #fff;
}

/* On ajoute une marge en haut de la galerie pour ne pas que le X cache les titres */
.tippy-scroll-galery {
    padding-top: 30px !important;
}

/* On force le titre de section à casser le flux Flex pour prendre toute la ligne */
/* Style final pour les bandeaux de groupe */
.group-title {
    /* Sécurité Flexbox : occupe toute la largeur et refuse de rétrécir */
    flex: 1 0 100% !important; 
    width: 95% !important;
    max-width: 100% !important;
    min-width: 100% !important;

    /* Force le retour à la ligne avant et après */
    display: block;
    clear: both; 

    /* Design */
    background-color: #f4f7f6;
    color: #2c3e50;
    padding: 12px 15px;
    border-left: 5px solid #63adf5;
    border-radius: 4px;
    font-size: 1.4rem;
    margin: 30px 0 15px 0;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 30px; /* Donne de l'air entre les catégories */
    margin-bottom: 20px;
    margin-left: 5px;
    margin-right: auto;
    clear: both;
}

/* On s'assure que le conteneur principal accepte le retour à la ligne */
.ravageur-liste {
    display: flex;
    flex-direction: column; /* Force les items à être les uns sous les autres */
    width: 98%;
}

/* Chaque ligne de plante doit aussi prendre 100% pour rester l'une sous l'autre */
/* Chaque bloc de plante occupe toute la largeur */
.plante-item {
    display: flex;
    flex-direction: column; /* Force le nom en haut et les photos en dessous */
    width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 25px;
    padding: 10px;
    border-bottom: 1px dotted #ccc;
}

/* Le nom du ravageur prend toute la place en haut */
.plante-nom {
    width: 100%;
    font-size: 1.1rem;
    margin-bottom: 8px; /* Espace avant les photos */
    color: #333;
}

/* Le conteneur de photos prend toute la place en dessous */
.plante-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    margin-top: 5px;
    justify-content: flex-start; /* Aligne au début */
    align-items: flex-start;     /* IMPORTANT : empêche l'étirement vertical */
}

/* ============================================================
   LÉGENDES (TOP & BOTTOM)
   ============================================================ */

/* --- Bloc Commun (Propriétés partagées) --- */
.pswp__caption-top, 
.pswp__caption-bottom {
    position: absolute !important;
    left: 10% !important; 
    width: 80% !important;
    text-align: center !important;
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.8) !important;
    box-sizing: border-box !important;
    border-radius: 8px;
    pointer-events: auto !important; 
    display: block !important;
    z-index: 100005 !important; 
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
}

/* --- Positionnement spécifique du HAUT --- */
.pswp__caption-top {
    top: 40px !important;    /* Positionné par rapport au haut */
    bottom: auto !important; /* Annule tout résidu de bottom */
    padding: 10px !important;
    font-weight: bold !important;
}

/* --- Positionnement spécifique du BAS --- */
.pswp__caption-bottom {
    bottom: 20px !important; /* Positionné par rapport au bas */
    top: auto !important;    /* INDISPENSABLE : Annule le top du bloc commun */
    padding: 15px !important;
}

/* Réactiver les clics UNIQUEMENT sur les liens dans les légendes */
.pswp__caption-bottom a,
.pswp__caption-top a {
    pointer-events: auto !important;
    color: #58ccff !important;
    text-decoration: underline !important;
}

/* Si PhotoSwipe cache l'interface, on cache aussi nos légendes */
.pswp--ui-hidden .pswp__caption-top,
.pswp--ui-hidden .pswp__caption-bottom {
    opacity: 0 !important;
    transition: opacity 0.2s ease;
}

/* Curseurs de zoom */
.pswp--zoom-allowed .pswp__img { cursor: zoom-in !important; }
.pswp--zoomed-in .pswp__img { cursor: zoom-out !important; }

/* ============================================================
    8. Ravageur image
   ============================================================ */

.ravageur-image {
    text-align: center;
    margin-top: 12px;
}

.ravageur-image a {
  float: none !important;
  display: inline-block;
}

.ravageur-image img {
    max-width: 100%;
    height: auto;
    border: 1px solid #000000;
}

/* ============================================================
    9. Utilitaires
   ============================================================ */

.centered {
    text-align: center;
    margin: 5px auto;
    max-width: 98%;
}

.justified {
    text-align: justify;
    margin: 5px auto;
    max-width: 98%;
}

.centered ul {
    display: inline-block;
    list-style-type: square;
    text-align: left; /* pour garder les puces alignées */
}

/* En-tête */
.header {
    text-align: center;
    padding: 10px 0;
}

/* ============================================================
   10. Style pour la fiche
   ============================================================ */

.legende-clic {
    text-align: center;      /* Remplace <center> */
    font-size: 11px;         /* Plus petit que le texte standard */
    font-style: italic;      /* Remplace <i> */
    color: #666666;          /* Une couleur grise pour plus de discrétion */
    margin-top: 5px;         /* Espace au-dessus */
    margin-bottom: 10px;      /* Espace en-dessous */
    font-family: Arial, sans-serif;
    letter-spacing: 0.5px;   /* Optionnel : rend le petit texte plus lisible */
}

/* ============================================================
   11. Titres
   ============================================================ */

h1{
    margin:0;
    padding: 0 0 3px;
    color: black;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size:12px;
}
h2{
    margin:0;
    padding: 0 0 3px;
    color: #000;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size:12px;
}

h3{
    font-size: 125%;
    margin:0;
    padding: 0 0 2px;
    background: lightgrey;
    color: #000;
    text-align: center;
    font-family: Arial, sans-serif;
}

h3.fiche{
    font-size: 100%;
    margin:0;
    padding: 0 0 3px;
    background: none;
    color: #000;
    text-align: center;
    font-family: Arial, sans-serif;
}

h3.gauche{
    font-size: 100%;
    margin:0;
    padding: 0 0 3px;
    background: none;
    color: #000;
    text-align: left;
    text-decoration: underline;
    font-family: Arial, sans-serif;
}

/* ============================================================
   12. @Media
   ============================================================ */

@media (min-width: 700px) {

  .ravageur-bloc {
    display: flex;
    align-items: flex-start;
    gap: 15px;
  }

  .ravageur-texte {
    flex: 1;
  }

  .ravageur-image {
    text-align: right;
    margin-top: 0;
  }

  .ravageur-image a {
    float: right;
  }
}

/* ============================================================
   13. Bas de page
   ============================================================ */

/* Bas de page */
#lebas{
    position: absolute;
    left:0px;
    top: 815px;
    height: 205px;
    width: 100%;
    text-align: center;
    background-color: white;
    background-image: url(../presentation/Bas.jpg);
    background-repeat: repeat-x;
    font-family: Arial, sans-serif;
    font-size:14px;
}

#lebas2{
    position: static;
    height: 105px;
    width: 100%;
    background-color: white;
    background-image: url(../presentation/Bas.jpg);
    background-repeat: repeat-x;
    font-family: Arial, sans-serif;
    font-size:14px;
}

#lebas3{
    position: static;
    height: 130px;
    width: 100%;
    background-color: white;
    background-image: url(../presentation/Bas.jpg);
    background-repeat: repeat-x;
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: black;
}

#lebas4{
    position: static;
    height: 135px;
    width: 100%;
    background-color: white;
    background-image: url(../presentation/Bas.jpg);
    background-repeat: repeat-x;
    font-family: Arial, sans-serif;
    font-size:12px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
}

/* ============================================================
   14. Glossaire
   ============================================================ */

.question p {
    margin-bottom: 10px;
}
.question {
    display: block;
    justify-content: space-between;
    text-align: center;
    padding: 20px;
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.3;
}

/* ============================================================
   15. Listes
   ============================================================ */

/* Liste principale */
#sortedList {
    list-style: none;
    padding: 0;
    margin: 0;
}
#sortedList li {
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.nom-espece a,
.nom-espece span {
    font-size: 18px;
    font-weight: bold;
    color: #000;
    text-decoration: none;
}

.liens-outils {
    margin-top: 4px;
}

.liens-outils a {
    font-size: 14px;
    color: #444;
    text-decoration: none;
}

#sortedList li:hover {
    background-color: #f0f0f0;
}
#sortedList li {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    transition: background-color 0.2s ease;
}

#sortedList li:hover {
    background-color: #f0f0f0; /* gris clair */
}

#sortedList li a {
    text-decoration: none;
    color: #000;
    display: block;
}

/* ============================================================
   16. Titre de Liste avec lien
   ============================================================ */

/* Le lien parent */
dt a {
    text-decoration: none !important; /* On enlève le soulignement de base */
    color: #2c3e50;
}

/* Le nom du ravageur */
dt a b {
    text-decoration: underline; /* On remet le soulignement UNIQUEMENT ici */
    text-underline-offset: 3px;
}

/* L'émoji cliquable mais SANS trait */
.icon-fiche {
    display: inline-block;      /* CRUCIAL : casse le soulignement du lien */
    text-decoration: none !important; 
    margin-left: 5px;
    vertical-align: middle;     /* Aligne l'émoji avec le texte */
}

/* Optionnel : un petit effet au survol pour montrer que c'est cliquable */
dt a:hover .icon-fiche {
    transform: scale(1.2);      /* L'émoji grossit un peu au survol */
    transition: transform 0.2s;
}

/* ============================================================
   17. Liste globale des photos
   ============================================================ */


.ravageur-nom {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    font-size: 1.1em;
    color: #333;
    border-bottom: 1px solid #eee; /* Optionnel : pour bien séparer */
}

.ravageur-item {
    display: block;
    width: 100%;
    clear: both;
    margin-bottom: 30px;
    padding: 10px;
}

/* ============================================================
   18. header sur cellulaire
   ============================================================ */

/* Force le header à prendre toute la largeur et centre son contenu */
.header.centered {
    display: block;          /* Plus stable que flex pour les vieux rendus Chrome */
    width: 100%;             
    text-align: center;      /* Méthode classique la plus fiable */
    padding: 10px 0;
    overflow: hidden;        /* Empêche le débordement visuel */
}

.header.centered img {
    display: inline-block;   /* Permet au text-align: center de fonctionner */
    max-width: 90%;          
    height: auto;
    margin: 0 auto;          /* Centrage de secours */
}

/* On cible très précisément l'image dans le header et on force le centrage */
.header img {
    display: block !important; /* Force l'image à être un bloc */
    margin-left: auto !important; /* Centre horizontalement */
    margin-right: auto !important; /* Centre horizontalement */
    max-width: 90% !important; /* S'assure qu'elle ne dépasse pas */
    height: auto !important;
}

/* ============================================================
   19. tableau sur cellulaire et chrome
   ============================================================ */

/* Pour tous les écrans */
table.middle {
    margin-left: auto; 
    margin-right: auto;
    min-width: 50%; /* Remplace le WIDTH=50% */
}

/* Spécifique au mobile (Chrome friendly) */
@media screen and (max-width: 600px) {
    table.responsive-table {
        width: 95% !important; /* On prend presque toute la largeur sur mobile */
    }
    
    /* On réduit un peu les images du tableau pour qu'elles ne poussent pas les murs */
    table.responsive-table img {
        max-width: 100%;
        height: auto; /* Important pour ne pas écraser l'image */
    }
    
    /* On force les cellules à s'empiler si nécessaire ou à se serrer */
    table.responsive-table td {
        display: table-cell; 
        font-size: 0.9em; /* On réduit un peu le texte pour gagner de la place */
    }
}

/* ============================================================
   20. conteneur principale
   ============================================================ */

/* Conteneur principal */
.choix-container {
    display: flex;
    flex-wrap: wrap;       /* Permet de passer à la ligne sur mobile */
    justify-content: center;
    align-items: center;
    gap: 20px;             /* Espace entre les éléments */
    width: 100%;
    margin: 20px 0;
    text-align: center;
}

/* Style des deux blocs (Plantes et Ravageurs) */
.choix-item {
    flex: 1;               /* Prend l'espace disponible */
    min-width: 250px;      /* Largeur minimale avant de passer à la ligne */
    max-width: 400px;
    padding: 10px;
}

.choix-item img {
    max-width: 100%;
    height: 200px;         /* On garde votre hauteur de 200 */
    object-fit: contain;   /* Évite de déformer l'image */
}

/* Style du séparateur */
.choix-separateur img {
    height: 250px;
}

/* AJUSTEMENT MOBILE (Chrome) */
@media screen and (max-width: 600px) {
    .choix-separateur {
        display: none;     /* On cache le séparateur vertical sur mobile, c'est plus joli */
    }
    
    .choix-item {
        flex: 0 0 100%;    /* Chaque bloc prend 100% de la largeur sur mobile */
    }
}

/* ============================================================
   21. Correction des bouton du header
   ============================================================ */

.nav-bar-mobile {
    width: 100% !important;
    text-align: center !important; /* Centre l'ensemble des boutons */
    display: block !important;
    padding: 10px 0;
    white-space: nowrap;           /* Interdit le retour à la ligne */
}

.nav-bar-mobile a {
    display: inline-block !important; /* Force l'alignement horizontal */
    margin: 0 4px !important;         /* Petit espace entre les boutons */
    text-decoration: none;
    width: auto !important;           /* Empêche le bouton de prendre toute la largeur */
}

.nav-bar-mobile img {
    height: 50px !important;
    width: auto !important;           /* Garde les proportions */
    display: inline-block !important;
}

.logo-container-mobile {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    padding: 15px 0;
}

.logo-container-mobile img {
    display: inline-block !important;
    max-width: 90% !important;
    height: auto !important;
}

/* ============================================================
   21. Debug css
   ============================================================ */

/* --- CODE DE DÉPANNAGE TEMPORAIRE --- */

/* Bordure rouge pour TOUS les tableaux */
/*table {
    border: 2px solid red !important;
}*/

/* Bordure bleue pour les listes (UL) */
/*ul {
    border: 2px solid blue !important;
}*/

/* Bordure verte pour les DIV de structure */
/*div.centered, #contenu-souple, .logo-container-mobile {
    border: 2px solid green !important;
}*/

/* Bordure orange pour les images */
/*img {
    border: 2px solid orange !important;
}*/

/* LA RÈGLE MAGIQUE : Fond rouge si un élément dépasse du corps de la page */
/*body {
    outline: 3px solid purple;
}*/