/* Fenêtre modale (popup) */
.cb-modal {
    position: fixed;				/* Popup toujours visible et fixé par rapport à la fenêtre  du navigateur */
	inset: 0;						/* Popup recouvre toute la zone de la fenêtre */
    background: rgba(0,0,0,.45);	/* Couleur de fond défini en noir avec une transparence de 45%, ce qui permet de tamiser le contenu derrière la modale. */
    z-index: 9999;					/* Priorité d'affichage du popup sur l'axe Z (9999 place le popup au dessus de tous les autres éléments */
    display: flex;					/* Active Flexbox pour gérer l'agencement des éléments internes au popup */
    justify-content: center;		/* Eléments internes au popup centrés horizontalement */
    align-items: center;			/* Eléments internes au popup centrés verticalement */
}

/* Conteneur du popup */
.cb-container {
    width: 850px;					/* Largeur totale de la fenêtre */
    height: 580px;					/* Hauteur totale de la fenêtre */
    background: #fff;				/* Couleur du fond de la fenêtre (blanc pur) */
    display: flex;					/* Affichage transformé en conteneur flex (Flexbox) */
    flex-direction: column;			/* logo en haut, contenu principal dessous */
    border-radius: 8px;				/* Taille du rayon de l'arrondi des coins du cadre */
    box-shadow: 0 30px 80px rgba(0,0,0,.25);	/* Ombre portée (décalage horizontale, verticale, flou de l'ombre, couleur) */
    font-family: Inter, Arial, sans-serif;		/* Priorité d'affichage des polices de caractères (1ère police préférée = inter) */
}

/* Conteneur de la bannière du popup */
.cb-logo {
    display: flex;					/* Transforme .cb-logo en conteneur flex */ 
    justify-content: center;		/* Centre le logo horizontalement */
    padding-top: 15px;				/* Ajoute 15px d’espace au-dessus du logo */
    padding-bottom: 15px;			/* Ajoute 15px d’espace en dessous du logo */
    border-bottom: 1px solid #eee;	/* Ajout d'une bordure fine en bas du logo */
}

/* Conteneur de la bannière - Format de l'image */
.cb-logo img {
    max-height: 60px;				/* Hauteur maxi 60 pixels */
    width: auto;					/* Largeur calculée en fonction de la hauteur */				
}

/* Conteneur principal */
.cb-main {
    flex: 1 1 auto;					/* Prend toute la hauteur restante après le logo */
    display: flex;					/* Menu + panels côte à côte */
    min-height: 0;					/* Nécessaire pour le scroll flex */
}

/* Conteneur du menu latéral */
.cb-sidebar {
    width: 170px;					/* Largeur fixe du menu */
    flex-shrink: 0;					/* Empêche le menu de rétrécir */
    background: #f7f9fb;			/* Couleur de fond gris très clair légèrement bleutée */
    border-right: 1px solid #e3e7eb;	/* Séparation "subtile" entre la barre de menu et le contenu principal */
    display: flex;					/* Gestion facile de la mise en page des éléments de menu à l'intérieur de l'ascenceur */
    flex-direction: column;			/* Les éléments de menu sont empilés verticalement */
}

/* Présentation de base des options du menu latéral */
.cb-tab {
    padding: 16px;					/* "Tampon" autour du bouton rendant celui-ci plus grand et plus facile à cliquer */
    border: none;					/* Pas de bord par défaut des boutons HTML */
    background: none;				/* pas de fond par défaut des boutons HTML */
    text-align: left;				/* Texte interne au bouton aligné à gauche */
    cursor: pointer;				/* Change le curseur de la souris sur le bouton (affiche la main pour indiquer que l’élément est cliquable) */
    font-size: 14px;				/* Taille du texte standardisé */
}

/* Présentation de l'option active  */
.cb-tab.active {
    background: #e8f3ff;			/* Couleur de fond bleu pastel si bouton activé */
    font-weight: 600;				/* Trait plus épais que la normale */ 
    color: #1a73e8;					/* Couleur du texte bleu vif */
}

/* Conteneur du panneaux de droite affichant le contenu des trois onglets */
.cb-content {
    flex: 1 1 auto;					/* Prend tout l'espace restant dans le conteneur */
    display: flex;					/* Active Flexbox pour gérer l'agencement des éléments internes au panneau de droite */
    flex-direction: column;			/* Les éléments de menu sont empilés verticalement */
    min-height: 0;					/* Evite que les éléments internes dépassent la hauteur du conteneur */
    padding: 30px;					/* Espace intérieur pour le contenu */
}

/* Conteneur individuel du contenu de chaque onglet */
.cb-panel {
    flex: 1 1 auto;					/* Le panneau prend l'espace restant du conteneur parent et peut se rétrécir si nécessaire */
    min-height: 0;					/* Empêche le panneau de forcer la hauteur minimale à cause de ses éléments internes */
    display: none;					/* Masque le panneau par défaut */
    flex-direction: column;			/* Organise les éléments internes verticalement */
    overflow-y: auto;				/* Scroll automatique vertical si contenu trop grand pour la hauteur disponible */
    padding-right: 20px;			/* Préserve un espace interne à droite pour que le texte ou les éléments ne soient pas collés à l'ascenseur */
}

/* Conteneur de l'onglet actif */
.cb-panel.active {
    display: flex;					/* Affiche le panneau lorsqu'il est actif et le transforme en conteneur flex */
}

/* Conteneur consentement sans ascenseur */
.cb-panel#consent {
    overflow: visible;				/* Le contenu peut dépasser librement le conteneur */
    padding-right: 0;				/* Supprime l'espace intérieur, permet au contenu de s'étendre sur toute la largeur disponible du panneau */
}

/* Spécifique aux navigateurs Webkit (Chrome, Edge, Safari) */
.cb-panel::-webkit-scrollbar {
    width: 8px;						/* Largeur de l'ascenseur */
}

/* Spécifique aux navigateurs Webkit (Chrome, Edge, Safari) */
.cb-panel::-webkit-scrollbar-thumb {
    background: #aaa;				/* Couleur du curseur d'ascenseur gris moyen */
    border-radius: 4px;				/* Arrondi les coins du curseur d'ascenseur */
}

/* Spécifique aux navigateurs Webkit (Chrome, Edge, Safari) */
.cb-panel::-webkit-scrollbar-track {
    background: #f1f1f1;			/* Couleur de fond de l'ascenseur en gris très clair */
}

/* Données d'onglet - Cible uniquement les listes non ordonnées <ul> à l'intérieur de cb-panel */
.cb-panel ul {
    list-style-type: disc;			/* Affiche des puces rondes pour les éléments de liste <li> */
	margin-top: 6px;				/* Ajoute un espace vertical entre le haut de la liste et les autres éléments */
    margin-bottom: 6px;				/* Ajoute un espace vertical entre le bas de la liste et les autres éléments */
    padding-left: 20px;				/* Décale le contenu de la liste pour que les puces soient visibles et le texte aligné correctement */
}

/* Données d'onglet - Cible uniquement les listes <ul> imbriquées dans un <li> */
.cb-panel li > ul {
    margin-top: 2px;				/* Petit espace au-dessus de la sous-liste */
    margin-bottom: 6px;				/* Espace après la sous-liste */
    padding-left: 5px;				/* Légère indentation pour la sous-liste */
	font-family: Inter, Arial, sans-serif;	/* Priorité d'affichage des polices de caractères (1ère police préférée = inter) */
    font-size: 14px;				/* Taille du texte standardisé */
	color: #000;					/* Texte en noir pur */
}

/* Données d'onglet - Cible uniquement les liste ordonnée <ol> à l'intéreur de cb-panel */
.cb-panel ol {
    list-style-type: lower-latin;	/* Affiche des puces alphabétique minuscules pour les éléments de liste <li> */
	margin-top: 6px;				/* Ajoute un espace vertical entre le haut de la liste et les autres éléments */
    margin-bottom: 6px;				/* Ajoute un espace vertical entre le bas de la liste et les autres éléments */
	padding-left: 20px;				/* Décale le contenu de la liste pour que les puces soient visibles et le texte aligné correctement */
}

/* Données d'onglet - Cible les éléments de listes <li> à l'intérieur de cb-panel */
.cb-panel li {
	margin-bottom: 4px;				/* Petit espace vertical entre chaque élément de liste */
    line-height: 1.3;				/* Espacement vertical entre les lignes de texte à l’intérieur d’un même <li> */
	font-family: Inter, Arial, sans-serif;	/* Priorité d'affichage des polices de caractères (1ère police préférée = inter) */
    font-size: 14px;				/* Taille du texte standardisé */
	color: #000;					/* Texte en noir pur */
}

/* Données d'onglet - Cible les titres <h3> à l'intérieur de cb-panel */
.cb-panel h3 {
	display: block;					/* Force <h3> à se comporter comme un élément bloc */
	font-family: Inter, Arial, sans-serif;	/* Priorité d'affichage des polices de caractères (1ère police préférée = inter) */
    font-size: 20px;				/* Taille fixe du texte des titres de niveau <h3> */
    font-weight: 600;				/* Texte semi-gras */
    line-height: 1.3;				/* Espacement vertical entre les lignes du titre */
    color: #000;					/* Texte en noir pur */
	text-align: left;				/* Texte aligné à gauche */
	background: none;				/* Pas de fond de couleur */
}

/* Données d'onglet - Cible les paragraphes <p> à l'intérieur  de cb-panel */
.cb-panel p {
	margin-top: 4px;				/* Taille de la marge avant le paragraphe */
	margin-bottom: 4px;				/* Taille de la marge après le paragraphe */
    font-family: Inter, Arial, sans-serif;	/* Priorité d'affichage des polices de caractères (1ère police préférée = inter) */
    font-size: 14px;				/* Taille du texte standardisé */
    line-height: 1.5;				/* Espacement vertical entre les lignes du bloc */
    color: #333;					/* Couleur du texte gris très foncé */
}

/* Données d'onglet - Cible uniquement la mise en gras de texte <strong> à l'intérieur de cb-panel */
.cb-panel strong {
    font-weight: 700;				/* Epaisseur de la police en gras marqué (bold) */
}

/* Données d'onglet - Cible les lignes horizontales <hr> à l'intérieur de cb-panel */
.cb-panel hr {
    border: none;					/* Supprime le style par défaut */
    border-top: 1px solid #e5e7eb;	/* Recrée un séparateur gris clair, fin et propre en utilisant uniquement la bordure du haut */
    margin: 25px 0;					/* Ajoute un espace vertical de 16px au-dessus et en dessous du séparateur */
}

/* Conteneur des types de cookies avec la case à cocher */
.cb-toggle {
    display: flex;					/* Transforme l’élément en conteneur flex */
    justify-content: space-between;	/* Répartit les enfants aux extrémités du conteneur. Premier élément collé à gauche, dernier à droite, avec espace flexible entre eux */
    padding: 12px 0;				/* Ajout de 14px d’espace vertical au-dessus et en dessous */
    border-bottom: 1px solid #eee;	/* Ajout d'une ligne horizontale légère sous le toggle */
}

/* Conteneur du pied du popup fixe */
.cb-footer {
    flex-shrink: 0;					/* Empêche le footer de rétrécir si le conteneur parent est trop petit */
    display: flex;					/* Transforme le footer en conteneur flex */
    justify-content: flex-end;		/* Aligne le bouton à droite (à remplacer par center si plusieurs boutons) */
    align-items: center;			/* Aligne verticalement les enfants au centre du footer */
    padding-top: 20px;				/* Espace intérieur au-dessus du contenu pour séparer visuellement le footer du reste du panneau */
    border-top: 1px solid #eee;		/* Ligne horizontale très légère pour délimiter le footer du contenu principal */
    margin-top: 20px;				/* Espace externe supplémentaire au-dessus du footer */
}

/* Formatage des boutons de choix */
.cb-btn {
    padding: 10px 18px;				/* Espace intérieur du bouton */
    border-radius: 4px;				/* Arrondit légèrement les coins du bouton */
    border: none;					/* Supprime la bordure par défaut du bouton */
    cursor: pointer;				/* Change le curseur de la souris sur le bouton (affiche la main pour indiquer que l’élément est cliquable) */
}

/* Bouton Accepter tout - Formatage de base */
.cb-btn.primary {
    background: #1a73e8;			/* Couleur de fond du bouton bleu vif */
    color: white;					/* Couleur du texte du bouton en blanc */
}

/* Bouton Accepter tout - Modification de la couleur de fond lors du survol de la souris */
.cb-btn.primary:hover {
    background: #1666c1;			/* Bleu plus foncé lors du survol */
}

/* Bouton Sauvegarder tout - Formatage de base */
.cb-btn.secondary {
    background: #e8f0fe;			/* Fond du bouton bleu très clair */
    color: #1a73e8;					/* Couleur du texte en bleu vif */
}

/* Bouton Refuser tout - Formatage de base */
.cb-link {
    background: none;				/* Supprime tout fond par défaut */
    border: none;					/* Supprime la bordure par défaut */
    color: #666;					/* Couleur du texte en gris moyen */
    cursor: pointer;				/* Change le curseur de la souris sur le bouton (affiche la main pour indiquer que l’élément est cliquable) */
}

/* Frame d'affichage du détail des cookies */
.cb-frame {
    display: block;					/* Bloc standard */
    direction: ltr;					/* Force sens normal gauche-droite */
    unicode-bidi: isolate;			/* Isole du contexte parent */
	border: 1px solid #e5e7eb;		/* Bordure fine et claire pour délimiter le cadre */
    text-align: left;				/* Texte aligné à gauche */
    background: #f7f9fb;			/* Couleur de fond gris très clair légèrement bleutée */
	padding: 15px;					/* Espace intérieur entre la bordure et le contenu */
	border-radius: 8px;				/* Arrondit les coins du cadre */
}

/* Frame - Liste non ordonnée <ul> */
/* !important force la règle à s’appliquer même si une autre règle plus spécifique ou plus tardive essaie de l’écraser. */
.cb-frame ul {
    all: revert;					/* Neutralise tous les styles globaux */
    display: block;					/* Annule flex/grid éventuel */
    list-style-type: disc;			/* Puces rondes */
    list-style-position: outside;	/* Puces à l’extérieur */
    padding-inline-start: 1.4em !important;	/* Décalage standard pour listes de 1er niveau */
    margin-top: 6px;				/* Marge de 6px au dessus de la liste */
	margin-bottom: 6px;				/* Marge de 6 px au dessous de la liste */
	margin-left: 0;					/* Pas de marge à gauche */
	margin-right: 0;				/* Pas de marge à droite */

}

/* Sous-listes <ul> dans <li> */
.cb-frame li > ul {
    padding-inline-start: 1.4em !important;  /* Indentation plus grande pour sous-listes */
}

/* Frame - Cible uniquement les liste ordonnée <ol> à l'intéreur de cb-frame */
.cb-frame ol {
    list-style-type: lower-latin;	/* Affiche des puces alphabétique minuscules pour les éléments de liste <li> */
	margin-top: 6px;				/* Ajoute un espace vertical entre le haut de la liste et les autres éléments */
    margin-bottom: 6px;				/* Ajoute un espace vertical entre le bas de la liste et les autres éléments */
	padding-left: 20px;				/* Décale le contenu de la liste pour que les puces soient visibles et le texte aligné correctement */
}

/* Sous-listes <ul> dans <li> d'une <ol> */
.cb-frame ol > li > ul {
    all: revert;					/* Neutralise les resets globaux */
	list-style-type: disc;			/* Puces rondes */
    padding-inline-start: 1.4em !important;	/* Indentation plus grande */
    margin-top: 6px;                      
    margin-bottom: 6px;                   
}


/* Élément de liste */
.cb-frame li {
    all: revert;					/* Neutralise styles globaux */
    display: list-item;				/* ESSENTIEL pour les puces */
    line-height: 1.3;				/* Espacement vertical entre les lignes de texte à l’intérieur d’un même <li> */
	margin-bottom: 4px;				/* Petit espace vertical entre chaque élément de liste */
    font-family: Inter, Arial, sans-serif;	/* Priorité d'affichage des polices de caractères (1ère police préférée = inter) */
    font-size: 14px;				/* Taille du texte standardisé */
    color: #000;					/* Texte en noir pur */
    text-align: left;				/* Texte aligné à gauche */
    direction: ltr;					/* Force sens normal gauche-droite */
}

/* Contenu interne du li (p, span, strong...) */
.cb-frame li > * {
    display: inline;				/* évite que les blocs internes cassent la mise en page */
}

/* Paragraphes internes dans li */
.cb-frame li p {
    margin-top: 0.3em;				/* Marge au dessus de chaque ligne de 30% de la hauteur de la police de caractères */
	margin-bottom: 0.3em;			/* Marge au dessous de chaque ligne de 30% de la hauteur de la police de caractères */
	margin-left: 0;					/* Pas de marge à gauche */
	margin-right: 0;				/* Pas de marge à droite */
}

/* Correction du pseudo-élément ::marker (puce de la liste) */
.cb-frame li::marker {
    direction: ltr !important;		/* Force sens normal gauche-droite */		
    unicode-bidi: isolate !important;	/* Isole du contexte parent */
    color: initial;					/* Couleur normale, ou modifier si tu veux */
}

/* Frame - Caractères gras */
.cb-frame strong {
	font-weight: 700;				/* Epaisseur de la police en gras marqué (bold) */
	color: #000;					/* Texte en noir pur */
}