/* =============================================================================
   LUZPHOTOS – STYLES PERSONNALISÉS
   Indépendants du thème WordPress (chargés par luzphotos.php)

   SOMMAIRE
    1. En-tête et navigation   : logos, recherche, menu principal
    2. Défilement              : bouton « Retour en haut », défilement doux
    3. Sommaire dynamique      : shortcode [luz_toc], colonne collante, panneau mobile
    4. Titres H3 à H5          : décorations dans les articles
    5. Anciens articles        : images avec légende, images alignées, tableaux
    6. Blocs et extensions     : articles similaires Jetpack, commentaires,
                                 boucle de requête, dates, icônes de boutons
    7. Mise en forme du texte  : gras, couleurs de fond, lettrine...
    8. Remplacements des shortcodes de l'ancien thème Jarida
                               : séparateurs, liste à coches, accordéon, boîtes

   ATTENTION : à spécificité égale, la dernière règle écrite l'emporte.
   Dans une section, l'ordre des règles est donc volontaire : ne pas l'inverser.
   ============================================================================= */


/* =============================================================================
   1. EN-TÊTE ET NAVIGATION
   ============================================================================= */

/* ----- LOGOS : complet au-dessus de 900 px, compact en dessous ----- */

/* Logo compact : caché par défaut.
   Le logo complet n'a pas de règle ici, sa largeur (300 px) est réglée dans le bloc. */
.logo-compact { display: none; }

/* Largeur du logo compact : 15 % de l'écran, entre 64 px et 97 px */
.logo-compact img { width: clamp(64px, 15vw, 97px); height: auto; }

/* À 900 px ou moins : on échange les deux logos */
@media (max-width: 900px) {
  .logo-entete { display: none; }
  .logo-compact { display: block; }
}

/* ----- MOBILE : 767 px ou moins (là où le hamburger apparaît) ----- */
@media (max-width: 767px) {

  /* Le logo compact ne rétrécit plus quand la place manque */
  .logo-compact { flex: 0 0 auto; }

  /* Le menu (donc le bouton hamburger) passe en dernier, à droite, sans rétrécir */
  header.wp-block-template-part .wp-block-navigation { order: 3; flex: 0 0 auto; }

  /* La recherche prend uniquement la place restante, entre 120 et 360 px */
  .recherche-entete { flex: 1 1 0; min-width: 120px; max-width: 360px; margin-left: auto; }

  /* On supprime le petit espacement, inutile sur mobile */
  header.wp-block-template-part .wp-block-spacer { display: none; }
}

/* ----- Bloc Recherche de l'entête : évite le texte collé au bord gauche de la zone de saisie ----- */
header .wp-block-search__input {
  padding-left: 8px !important;
}

/* ----- Menu principal : boîte grisée plus foncée -----
   Opacité .15 au lieu de .1 par défaut. S'applique à la boîte du survol de la souris
   et à celle de l'entrée de menu sélectionnée (page affichée).
   Pour changer le niveau de gris, modifier la valeur d'opacité ci-dessous. */
:is(.wp-block-navigation.tw-nav-active-box > ul.wp-block-navigation__container, .wp-block-navigation.tw-nav-active-box .wp-block-navigation__responsive-container-content > ul.wp-block-navigation__container) .current-menu-item > a::before,
:is(.wp-block-navigation.tw-nav-hover-box > ul.wp-block-navigation__container, .wp-block-navigation.tw-nav-hover-box .wp-block-navigation__responsive-container-content > ul.wp-block-navigation__container) li > a:hover::before {
  opacity: .15 !important;
}

/* ----- Chevron des sous-menus : plus grand, avec plus d'espace pour une zone tactile confortable (tablette) -----
   Utile pour le menu catégorie de la page blog */
.wp-block-navigation .wp-block-navigation__submenu-icon {
  margin-left: 0.4em;   /* espace entre le titre et le chevron */
  width: 1.6em;         /* zone cliquable (le chevron reste petit dedans) */
  height: 1.6em;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Taille du chevron lui-même */
.wp-block-navigation .wp-block-navigation__submenu-icon svg {
  width: 18px;
  height: 18px;
}

/* ----- Menu mobile ouvert : marges internes (évite le texte collé au bord gauche) ----- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  padding-left: 20px;
  padding-right: 20px;
}


/* =============================================================================
   2. DÉFILEMENT
   ============================================================================= */

/* ----- Bouton « Retour en haut » -----
   Le bouton (#retour-haut) et son script sont dans un bloc HTML personnalisé du pied de page.
   Ici : uniquement son apparence. La classe .visible est ajoutée par le script au défilement. */
#retour-haut {
  position: fixed;
  right: 10px;
  bottom: 1px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 4px;
  background: rgba(80, 80, 80, 0.3);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, background 0.2s;
  z-index: 999;
}
#retour-haut.visible { opacity: 1; visibility: visible; }
#retour-haut:hover { background: rgba(80, 80, 80, 0.6); }

/* ----- Défilement doux -----
   Pour le bouton « Retour en haut », le lien d'ancre « Laisser un commentaire »
   et les liens du sommaire. Désactivé si le visiteur a réduit les animations dans son système. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* =============================================================================
   3. SOMMAIRE DYNAMIQUE (shortcode [luz_toc])
   Le sommaire est généré par le script de luzphotos.php.
   La colonne qui le contient doit avoir la classe luz-sticky-col.
   ============================================================================= */

/* --- Liste du sommaire --- */
.luz-toc { font-size: 1rem; line-height: 1.4; }
.luz-toc ul { list-style: none; margin: 0; padding: 0; }
.luz-toc li { margin: 0.4em 0; }
.luz-toc .luz-toc-h3 { padding-left: 1.2em; }   /* retrait des titres H3 */
.luz-toc .luz-toc-h4 { padding-left: 2.4em; }   /* retrait des titres H4 */
.luz-toc a {
  display: flex; gap: 0.5em;
  text-decoration: none; color: inherit; opacity: 0.7;
  border-left: 3px solid transparent; padding-left: 0.6em;
}
.luz-toc a.active {                              /* section en cours de lecture */
  opacity: 1; font-weight: 600; border-left-color: #0a66c2;
}
.luz-toc-num { flex: none; }                     /* numéro (1., 2.1., ...) */

/* --- Ordinateur : colonne collante qui suit le défilement --- */
.luz-sticky-col {
  position: sticky; top: 20px; align-self: flex-start;
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.admin-bar .luz-sticky-col {                     /* décalage barre d'admin (connecté) */
  top: 52px; max-height: calc(100vh - 72px);
}

/* --- Bouton flottant : caché sur ordinateur --- */
.luz-toc-btn { display: none; }

/* --- Mobile : la colonne devient un panneau qui monte du bas de l'écran ---
   Actif seulement quand le script a ajouté la classe luz-toc-ready.
   Seuil 767 px : WordPress seul empile les colonnes à 781 px et moins (côte à côte à partir
   de 782 px), mais Twentig les empile à 767 px et moins : la règle @media (max-width: 767px)
   force alors les colonnes à flex-basis:100%, et la règle @media (min-width: 768px) les remet
   côte à côte. On suit donc le seuil de Twentig. */
@media (max-width: 767px) {
  .luz-toc-ready .luz-sticky-col {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0;
    max-height: 60vh; overflow-y: auto;
    padding: 1rem 1.25rem 4.5rem;                /* place en bas pour le bouton */
    background: var(--wp--preset--color--base, #fff);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
    z-index: 999;
    transform: translateY(100%); visibility: hidden;   /* panneau fermé */
    transition: transform 0.25s ease, visibility 0.25s;
  }
  .luz-toc-ready .luz-sticky-col.luz-toc-open {        /* panneau ouvert */
    transform: translateY(0); visibility: visible;
  }
  .luz-toc-btn {
    display: block; position: fixed; left: 1rem; bottom: 1rem; z-index: 1000;
    padding: 0.6rem 1.1rem; border: 0; border-radius: 2rem;
    background: #34548e; color: #fff; font-size: 1rem; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}


/* =============================================================================
   4. TITRES H3 À H5 : décorations pour les mettre en exergue et faciliter la lecture
   Pour annuler le style sur un titre précis : lui ajouter la classe luz-sans-deco
   ============================================================================= */

/* Titre H3 : ligne grise #999 pleine de 2px sur 20 % de la largeur du contenu, puis dégradé jusqu'au bout */
.wp-block-post-content h3:not(.wp-block-post-title):not(.luz-sans-deco) {
  padding-top: 10px;
  background: linear-gradient(to right, #999 20%, transparent) left top / 100% 2px no-repeat;
}

/* Titre H4 : fil fin de la largeur du texte, fondu vers la droite */
.wp-block-post-content h4:not(.wp-block-post-title):not(.luz-sans-deco) {
  width: fit-content;
  padding-bottom: 4px;
  background: linear-gradient(to right, #999, transparent) left bottom / 100% 1px no-repeat;
}

/* Titre H5 : petit carré gris avant le titre */
.wp-block-post-content h5:not(.wp-block-post-title):not(.luz-sans-deco)::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #999;
  margin-right: 8px;
  vertical-align: middle;
}


/* =============================================================================
   5. ANCIENS ARTICLES (éditeur classique)
   ============================================================================= */

/* ----- Images avec légende -----
   Le code HTML d'origine impose une largeur fixe en ligne
   (style="width: 620px" sur <figure class="wp-caption">),
   ce qui faisait déborder la page sur les écrans étroits.
   max-width l'emporte sur ce width en ligne : la figure se
   réduit sur petit écran et garde sa taille sur grand écran. */
.wp-caption {
  max-width: 100%;
  height: auto;
}
.wp-caption img {
  max-width: 100%;
  height: auto; /* évite de déformer l'image quand elle se réduit */
}
.wp-caption.aligncenter {
  margin-inline: auto;
}

/* Images avec légende alignées à gauche/droite : en pleine
   largeur et centrées sur mobile, pour ne pas écraser le texte */
@media (max-width: 600px) {
  .wp-caption.alignleft,
  .wp-caption.alignright {
    float: none;
    margin-inline: auto;
  }
}

/* ----- Images alignées, sans légende -----
   Quelle que soit leur structure : <p><img class="alignleft">…</p>,
   <a><img class="alignleft"></a>, ou image seule.
   Twenty Twenty-Five ne rend flottantes que les images enfants directes
   du contenu ; on redonne ici le float à toutes les autres,
   pour que le texte s'enroule. */
.wp-block-post-content img.alignleft {
  float: left;
  margin: 0.3em 1.5em 1em 0;
}
.wp-block-post-content img.alignright {
  float: right;
  margin: 0.3em 0 1em 1.5em;
}
.wp-block-post-content img.aligncenter {
  display: block;
  margin: 1em auto;
}

/* Sur mobile : image seule, centrée, au-dessus du texte,
   pour éviter un texte trop étroit à côté de l'image */
@media (max-width: 600px) {
  .wp-block-post-content img.alignleft,
  .wp-block-post-content img.alignright {
    float: none;
    display: block;
    margin: 1em auto;
  }
}

/* ----- Tableaux -----
   À utiliser avec la classe « tableau » sur la balise <table> */
table.tableau {
  border-collapse: collapse;
  margin-bottom: 1em;
}
/* Entête de tableau */
table.tableau th {
  font-family: Arial, Georgia, "Bitstream Charter", Times, serif;
  line-height: 1em;
  font-size: 0.92em;
  font-weight: bold;
  text-align: center;
  border: 1px solid #999999;
  background-color: #d9edf7; /* entête bleu clair */
}
/* Titre spécifique h3 pour tableau : alimente le sommaire */
table.tableau h3 {
  line-height: 1.5;
  font-size: 1em;
  font-weight: bold;
  margin: 0;
}
table.tableau td {border: 1px solid #999999;}
/* Tableau sans bordure : <table class="tableau border-no"> */
table.tableau.border-no td {border: 0;}
/* Colonne centrée : classe à mettre dans <table>, <tbody>, <tr> ou <td> */
table.tableau .colc td,
table.tableau.colc td,
table.tableau td.colc {text-align: center;}
/* Alternance de lignes (à mettre dans <tr>) : ligne 1 légèrement grisée, ligne 2 blanche */
table.tableau .ligne1 td {background-color: #f9f9f9;}
table.tableau .ligne2 td {background-color: #ffffff;}
/* Ligne plus foncée au survol */
table.tableau tr:hover td {background-color: #f3f3f3;}


/* =============================================================================
   6. BLOCS ET EXTENSIONS
   ============================================================================= */

/* ----- Articles similaires (bloc Jetpack) : 3 articles alignés avec espacement -----
   Utilisé dans le modèle « Publications seules », modèle par défaut des articles.
   - Le bloc Jetpack n'a pas d'option « Espacement des blocs » dans l'éditeur,
     d'où ce CSS.
   - La liste passe en grille de 3 colonnes égales ; l'écart entre les articles
     se règle avec la valeur de « gap » (ex. 1rem = serré, 3rem = aéré).
   - Les largeurs en pourcentage imposées par Jetpack sont neutralisées pour
     éviter que le 3e article passe à la ligne.
   - En dessous de 600px (seuil petit écran de WordPress), les articles passent
     sur une seule colonne. */
.wp-block-jetpack-related-posts .jp-related-posts-i2__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.wp-block-jetpack-related-posts .jp-related-posts-i2__post {
  max-width: none;
  width: auto;
  margin: 0;
}
/* Sur téléphone : une colonne */
@media (max-width: 600px) {
  .wp-block-jetpack-related-posts .jp-related-posts-i2__list {
    grid-template-columns: 1fr;
  }
}

/* ----- Contenu d'un commentaire : empêcher le débordement horizontal -----
   (URL à rallonge, grande image...)
   - La première règle force la coupure des longues URL.
   - La seconde empêche les images, vidéos ou iframes de dépasser la largeur du commentaire. */
.wp-block-comment-content {
  overflow-wrap: anywhere;
}
.wp-block-comment-content img,
.wp-block-comment-content video,
.wp-block-comment-content iframe {
  max-width: 100%;
  height: auto;
}

/* ----- Texte visible seulement si une boucle de requête renvoie des résultats -----
   Usage : dans l'éditeur, placer un bloc (paragraphe, groupe, etc.) dans une
   Boucle de requête, au-dessus du Modèle de publication, puis lui donner la
   classe CSS additionnelle « luz-visible-si-resultats ».

   Fonctionnement :
   - S'il y a des résultats, la boucle contient un bloc « Modèle de
     publication » (.wp-block-post-template) : le texte s'affiche une seule
     fois, avant la liste, au lieu de se répéter à chaque article.
   - S'il n'y a aucun résultat, WordPress n'affiche pas ce modèle et ne rend
     que le bloc « Aucun résultat » : le texte est alors masqué.

   Remarque : dans l'éditeur, le texte reste toujours visible, car l'éditeur
   affiche les deux cas. Le masquage ne s'applique que sur le site public.
   Nécessite la pseudo-classe :has(), supportée par tous les navigateurs
   récents. */
.wp-block-query:not(:has(.wp-block-post-template)) .luz-visible-si-resultats {
  display: none;
}

/* ----- Dates sous le titre d'un article -----
   Classe « luz-dates-article » sur le bloc natif « Date de publication »
   (le texte « Publié le… / Mis à jour le… » est généré par luzphotos.php).
   Plus petites et discrètes que le texte courant. */
.luz-dates-article {
  font-size: var(--wp--preset--font-size--small, 0.875rem);
  opacity: 0.7;
  margin: 0;
}

/* ----- Icônes SVG pour les boutons Facebook et Instagram -----
   Utilisé dans la page « Soutenir le blog ».
   Classe luz-icone-facebook ou luz-icone-instagram sur le bloc Bouton. */
.luz-icone-facebook .wp-block-button__link::before,
.luz-icone-instagram .wp-block-button__link::before {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.5em;
  vertical-align: -0.15em;
  background-color: currentColor;
  -webkit-mask: var(--luz-icone) no-repeat center / contain;
  mask: var(--luz-icone) no-repeat center / contain;
}

.luz-icone-facebook {
  --luz-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.07C24 5.41 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.8-4.7 4.54-4.7 1.31 0 2.68.24 2.68.24v2.97h-1.5c-1.5 0-1.96.93-1.96 1.89v2.26h3.33l-.53 3.5h-2.8V24C19.62 23.1 24 18.1 24 12.07z'/%3E%3C/svg%3E");
}

.luz-icone-instagram {
  --luz-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.16c3.2 0 3.58.01 4.85.07 3.25.15 4.77 1.69 4.92 4.92.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.15 3.23-1.66 4.77-4.92 4.92-1.27.06-1.64.07-4.85.07s-3.58-.01-4.85-.07c-3.26-.15-4.77-1.7-4.92-4.92C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85C2.38 3.92 3.9 2.38 7.15 2.23 8.42 2.17 8.8 2.16 12 2.16zM12 0C8.74 0 8.33.01 7.05.07 2.7.27.27 2.69.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.2 4.36 2.62 6.78 6.98 6.98C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c4.35-.2 6.78-2.62 6.98-6.98.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.2-4.35-2.62-6.78-6.98-6.98C15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 100 12.32 6.16 6.16 0 000-12.32zM12 16a4 4 0 110-8 4 4 0 010 8zm6.4-11.85a1.44 1.44 0 100 2.88 1.44 1.44 0 000-2.88z'/%3E%3C/svg%3E");
}


/* =============================================================================
   7. MISE EN FORME DU TEXTE
   ============================================================================= */

/* Gras / italique / souligné sans signification sémantique */
.gras {font-weight: bold;}
.italique {font-style: italic;}
.souligne {text-decoration: underline;}

/* Couleurs de fond */
.bleu-c {background-color: #d9edf7;}
.vert-c {background-color: #ccffcc;}
.rouge-c {background-color: #ff9999;}

/* Marges et bordures comme avec les images
   Peut être appliqué sur un div, par ex. texte et image d'affiliation Amazon */
.marges-bloc {
  padding: 4px;
  margin: 2px 8px 3px 3px;
  display: inline;
  border: 1px solid #cbcdcc;
}

/* Mise en forme spécifique pour les exemples */
.exemple {
  padding: 0 3px 0 6px;
  margin: 0 0 20px 10px;
  color: #666666;
  border-left: 2px solid #cccccc;
}

/* Lettrine : comme « dropcap » mais moins grande (40 px au lieu de 50 px)
   Syntaxe : <span class="lettrine">texte</span> */
.lettrine {display: block;float: left;margin: 0 8px 0 0;font-size: 40px;line-height: 40px;font-family: Georgia, Arial,"helvetica neue",Helvetica,Verdana,sans-serif;}


/* =============================================================================
   8. REMPLACEMENTS DES SHORTCODES DE L'ANCIEN THÈME JARIDA
   ============================================================================= */

/* Séparateur Luzphotos : ligne grise épaisse dégradée des 2 côtés */
.luz-divider {
  height: 5px;
  border-radius: 3px;
  margin: 24px 0;
  clear: both;
  background: linear-gradient(to right, transparent, #999, transparent);
}

/* Séparateur ligne noire */
.luz-divider-black {
  height: 4px;
  background: #2b2b2b;
  margin: 4px 0;
  border: 0;
}

/* Liste avec coches vertes
   Ajouter la classe additionnelle luz-checklist à une liste normale */
.luz-checklist {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.luz-checklist li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 6px;
}
.luz-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 17px;
  height: 17px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%234ea30a' d='M9 16.2 4.8 12l-1.4 1.4L9 19 20.6 7.4 19.2 6z'/></svg>");
}

/* ----- Boîte « accordéon » (bloc Détails, classe luz-toggle) -----
   Chevron vers le bas quand c'est fermé, retourné quand c'est ouvert */
.luz-toggle {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #f6f6f6;
  margin: 0 0 20px;
}
.luz-toggle summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  font-size: 1.15em;
  font-weight: 600;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.luz-toggle summary::-webkit-details-marker {
  display: none;
}
.luz-toggle summary::after {
  content: "";
  width: 20px;
  height: 20px;
  margin-left: 12px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%23333' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/></svg>");
  transition: transform 0.2s ease;
}
.luz-toggle[open] summary::after {
  transform: rotate(180deg);
}
/* Contenu de la boîte accordéon */
.luz-toggle > *:not(summary) {
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 0;
  margin-bottom: 0.8em;   /* espace entre paragraphes : à ajuster */
}
/* Espace entre le titre et le premier paragraphe */
.luz-toggle > summary + * {
  margin-top: 10px;   /* à ajuster */
}
.luz-toggle > *:not(summary):last-child {
  margin-bottom: 0;
  padding-bottom: 20px;   /* espace en bas de la boîte */
}
/* Listes : puces indentées.
   Cette règle doit rester après « .luz-toggle > *:not(summary) » (spécificité égale) */
.luz-toggle > ul,
.luz-toggle > ol {
  margin-left: 20px;       /* aligne le début de la liste sur le texte des paragraphes */
  padding-left: 1.5em;     /* indentation du texte par rapport à la puce */
}

/* ----- BOÎTES personnalisées (classe luz-box + une variante) ----- */
.luz-box {
  padding: 20px;
  background: #f6f6f6;
  margin: 10px 0 20px;
  border: 1px solid #fff;
  border-radius: 5px;
  overflow-wrap: break-word;
}
.luz-box > :first-child { margin-top: 0; }
.luz-box > :last-child { margin-bottom: 0; }

/* Box Shadow (sans icône) */
.luz-box-shadow {
  border-color: #aaa;
  box-shadow: 2px 2px 7px rgba(153, 153, 153, 0.6);
}

/* 6 boîtes avec icône : réglages communs */
.luz-box-info,
.luz-box-success,
.luz-box-warning,
.luz-box-note,
.luz-box-error,
.luz-box-download {
  position: relative;
  box-sizing: border-box;
  min-height: 88px;
  padding-left: 82px;
}
.luz-box-info::before,
.luz-box-success::before,
.luz-box-warning::before,
.luz-box-note::before,
.luz-box-error::before,
.luz-box-download::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 20px;
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* Box Info */
.luz-box-info { background: #d6f6ff; border-color: #bfe3ec; }
.luz-box-info::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='32' cy='32' r='30' fill='%232CB4DA'/><circle cx='32' cy='18' r='4.8' fill='white'/><rect x='28' y='28' width='8' height='21' rx='2' fill='white'/></svg>");
}

/* Box Success */
.luz-box-success { background: #e2f2cb; border-color: #d1e4b7; }
.luz-box-success::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M10 36 24 52 54 10' fill='none' stroke='%238AB84D' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* Box Warning */
.luz-box-warning { background: #fffddb; border-color: #e9e59e; }
.luz-box-warning::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><polygon points='32,12 54,50 10,50' fill='%23ECC21B' stroke='%23ECC21B' stroke-width='10' stroke-linejoin='round'/><rect x='29' y='25' width='6' height='15' rx='3' fill='white'/><circle cx='32' cy='46' r='3.8' fill='white'/></svg>");
}

/* Box Note */
.luz-box-note { background: #fffddb; border-color: #e9e59e; }
.luz-box-note::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M16 6h18l18 18v30a4 4 0 0 1-4 4H16a4 4 0 0 1-4-4V10a4 4 0 0 1 4-4z' fill='%23ECC21B'/><path d='M34 6v14a4 4 0 0 0 4 4h14z' fill='%23F8E58A'/><rect x='21' y='36' width='22' height='4.5' rx='2.25' fill='white'/><rect x='21' y='46' width='22' height='4.5' rx='2.25' fill='white'/></svg>");
}

/* Box Error */
.luz-box-error { background: #ffe6e2; border-color: #eebfb8; }
.luz-box-error::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M12 12 52 52M52 12 12 52' fill='none' stroke='%23F03317' stroke-width='6' stroke-linecap='round'/></svg>");
}

/* Box Download */
.luz-box-download { background: #e2f2cb; border-color: #d1e4b7; }
.luz-box-download::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 8v32M18 27l14 14 14-14M12 46v8h40v-8' fill='none' stroke='%238AB84D' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* Ajustement des boîtes avec icône sur petit écran */
@media (max-width: 480px) {
  .luz-box-info,
  .luz-box-success,
  .luz-box-warning,
  .luz-box-note,
  .luz-box-error,
  .luz-box-download { padding-left: 68px; min-height: 76px; }
  .luz-box-info::before,
  .luz-box-success::before,
  .luz-box-warning::before,
  .luz-box-note::before,
  .luz-box-error::before,
  .luz-box-download::before { width: 36px; height: 36px; }
}