/* Styles d'administration - priorité sur les styles du designer */

.btn-primary {
  padding: 0.5rem 1rem !important;
  background-color: #2563eb !important;
  color: white !important;
  font-weight: 500 !important;
  border-radius: 0.375rem !important;
  border: none !important;
  cursor: pointer !important;
}

.btn-primary:hover {
  background-color: #1d4ed8 !important;
}

.btn-secondary {
  @apply px-4 py-2 bg-gray-600 text-white font-medium rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 !important;
}

/* Tables d'admin */
.admin-table {
  @apply min-w-full divide-y divide-gray-200 !important;
}

.admin-table th {
  @apply px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider !important;
}

.admin-table td {
  @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 !important;
}

/* Layout d'admin */
.admin-container {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 !important;
}

.admin-card {
  @apply bg-white shadow-md rounded-lg overflow-hidden !important;
}

.admin-header {
  @apply bg-white shadow !important;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Polices Adobe Fonts - Hébergées localement */
@font-face {
    font-family: "garamond-premier-pro-display";
    src: url(/fonts/garamond-premier-pro-display-bold.woff2) format("woff2");
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    font-stretch: normal;
}

@font-face {
    font-family: "garamond-premier-pro-display";
    src: url(/fonts/garamond-premier-pro-display-regular.woff2) format("woff2");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
}

@font-face {
    font-family: "garamond-premier-pro-display";
    src: url(/fonts/garamond-premier-pro-display-italic.woff2) format("woff2");
    font-display: swap;
    font-style: italic;
    font-weight: 400;
    font-stretch: normal;
}

@font-face {
    font-family: "garamond-premier-pro";
    src: url(/fonts/garamond-premier-pro-regular.woff2) format("woff2");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
}

@font-face {
    font-family: "garamond-premier-pro";
    src: url(/fonts/garamond-premier-pro-italic.woff2) format("woff2");
    font-display: swap;
    font-style: italic;
    font-weight: 400;
    font-stretch: normal;
}

@font-face {
    font-family: "garamond-premier-pro";
    src: url(/fonts/garamond-premier-pro-bold.woff2) format("woff2");
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    font-stretch: normal;
}

@font-face {
    font-family: "garamond-premier-pro";
    src: url(/fonts/garamond-premier-pro-bold-italic.woff2) format("woff2");
    font-display: swap;
    font-style: italic;
    font-weight: 700;
    font-stretch: normal;
}

@font-face {
    font-family: "p22-hopper-edward";
    src: url(/fonts/p22-hopper-edward.woff2) format("woff2");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
}

.tk-garamond-premier-pro-display {
    font-family: "garamond-premier-pro-display",serif;
}

.tk-garamond-premier-pro {
    font-family: "garamond-premier-pro",serif;
}

.tk-maiola {
    font-family: "maiola",serif;
}

.tk-p22-hopper-edward {
    font-family: "p22-hopper-edward",sans-serif;
}

/*
Maiola Regular
font-family: "maiola", serif;
font-weight: 400;
font-style: normal;
Maiola Italic
font-family: "maiola", serif;
font-weight: 400;
font-style: italic;
Maiola Book
font-family: "maiola", serif;
font-weight: 500;
font-style: normal;
Maiola Book Italic
font-family: "maiola", serif;
font-weight: 500;
font-style: italic;
Maiola Bold
font-family: "maiola", serif;
font-weight: 700;
font-style: normal;
Maiola Bold Italic
font-family: "maiola", serif;
font-weight: 700;
font-style: italic;

*/

/*
P22 Hopper Edward
font-family: "p22-hopper-edward", sans-serif;
font-weight: 400;
font-style: normal;

Garamond Premier Pro Regular
font-family: "garamond-premier-pro", serif;
font-weight: 400;
font-style: normal;
Garamond Premier Pro Italic
font-family: "garamond-premier-pro", serif;
font-weight: 400;
font-style: italic;
Garamond Premier Pro Bold
font-family: "garamond-premier-pro", serif;
font-weight: 700;
font-style: normal;
Garamond Premier Pro Bold Italic
font-family: "garamond-premier-pro", serif;
font-weight: 700;
font-style: italic;
Garamond Premier Pro Display
font-family: "garamond-premier-pro-display", serif;
font-weight: 400;
font-style: normal;
Garamond Premier Pro Italic Display
font-family: "garamond-premier-pro-display", serif;
font-weight: 400;
font-style: italic;
Garamond Premier Pro Bold Display
font-family: "garamond-premier-pro-display", serif;
font-weight: 700;
font-style: normal;

*/

@layer base {
  body{
      @apply font-serif lining-nums min-h-screen bg-white;
      font-kerning: normal;
    -moz-font-feature-settings: "kern", "liga", "clig", "calt";
    -ms-font-feature-settings: "kern", "liga", "clig", "calt";
    -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
    font-feature-settings: "kern", "liga", "clig", "calt";
  }
  footer{
    @apply border-t pt-8 pb-4 lg:pt-12 lg:pb-8
  }
  .bloc-footer{
    @apply grid grid-cols-1 lg:grid-cols-6 gap-8 lg:gap-12 lg:py-12;
  }
  .titre-footer {
    @apply lg:col-span-2 lg:order-last max-w-lg lg:w-auto
  }
  .catalogue-footer{
    @apply flex gap-8
  }
  .legal-footer{
    @apply text-2xs mt-6
  }
  .liens-footer{
    @apply grid gap-4 md:gap-16 grid-cols-2 md:grid-cols-3 lg:col-span-3 gap-y-12
  }
  .liens-footer .titre-liens{
    @apply text-xs lg:text-sm flex gap-x-2 justify-between uppercase font-medium
  }
  .liens-footer ul{
    @apply mt-2
  }
  .liens-footer ul li a {
    @apply text-xs lg:text-sm hover:underline
  }
  .bloc-copyright{
    @apply flex justify-between items-end pt-12
  }
  .lien-aeco{
    @apply max-w-sm text-right
  }
  .lien-aeco a {
    @apply bg-white pl-4 flex items-end text-xs
  }
  .lien-aeco a svg{
    @apply text-black h-4 transition border-transparent border-b hover:border-solid hover:border-black
  }
  .font-display{
    font-variant-ligatures: common-ligatures;
  }
}

@layer components {
    /* Styles pour les champs input text/number qui correspondent aux styles des Select */
  .form-input-styled {
      @apply block w-full rounded-md border-gray-300 py-2 px-3 shadow-sm text-sm text-gray-700;
      @apply transition-all duration-200;
      /* États par défaut et hover */
      @apply bg-white hover:border-gray-400;
      /* Focus */
      @apply focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:shadow-sm focus:outline-none;
      /* Placeholder */
      @apply placeholder:text-gray-400;
      /* Taille exacte pour correspondre aux React Select */
      min-height: 38px;
      border-radius: 0.375rem;
      /* Police et style de texte adaptée au style du site */
      font-family: Optima, "Optima Nova", "Segoe UI", Candara, Calibri, Arial, sans-serif !important;
      font-size: 0.875rem;
      line-height: 1.5;
      letter-spacing: normal;
      color: #1e293b; /* Même couleur que dans les composants React */
  }

  /* Style spécifique pour focus */
  .form-input-styled:focus {
      box-shadow: 0 0 0 1px #6366f1;
  }

  /* On retire complètement le style pour les champs remplis, les laissant avec un fond blanc */
  /* C'est le comportement de base souhaité */

  /* Style pour les selects natifs qui correspondent aux styles des input */
  .form-select-styled {
      @apply block w-full rounded-md border border-solid border-[#d1d5db] py-2 px-3 shadow-sm text-sm text-gray-700;
      @apply transition-all duration-200;
      /* États par défaut et hover */
      @apply bg-white hover:border-gray-400;
      /* Focus */
      @apply focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:shadow-sm focus:outline-none;
      /* Taille exacte pour correspondre aux autres éléments de formulaire */
      min-height: 38px;
      height: 38px;
      border-radius: 0.375rem;
      /* Police et style de texte adaptée au style du site */
      font-family: Optima, "Optima Nova", "Segoe UI", Candara, Calibri, Arial, sans-serif !important;
      font-size: 0.875rem;
      line-height: 1.5;
      letter-spacing: normal;
      color: #1e293b;
      /* Garder l'apparence native de sélection */
      appearance: none;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
      background-position: right 0.5rem center;
      background-repeat: no-repeat;
      background-size: 1.5em 1.5em;
      padding-right: 2.5rem;
  }

  /* Style pour les textarea qui correspondent aux styles des input */
  .form-textarea-styled {
      @apply block w-full rounded-md border-gray-300 py-2 px-3 shadow-sm text-sm text-gray-700;
      @apply transition-all duration-200;
      /* États par défaut et hover */
      @apply bg-white hover:border-gray-400;
      /* Focus */
      @apply focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:shadow-sm focus:outline-none;
      /* Placeholder */
      @apply placeholder:text-gray-400;
      /* Police et style de texte adaptée au style du site */
      font-family: Optima, "Optima Nova", "Segoe UI", Candara, Calibri, Arial, sans-serif !important;
      font-size: 0.875rem;
      line-height: 1.5;
      letter-spacing: normal;
      color: #1e293b;
      /* Assurer une taille minimale raisonnable */
      min-height: 80px;
      border-radius: 0.375rem;
      resize: vertical;
  }

/* Classe de bouton personnalisée pour standardiser les boutons du site */
@layer utilities {
    .btn-primary {
        @apply inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium;
        @apply bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
        @apply text-white transition-colors duration-200 ease-in-out;
    }

    /* Variante plus petite */
    .btn-primary-sm {
        @apply inline-flex items-center justify-center px-3 py-1.5 border border-transparent rounded-md shadow-sm text-xs font-medium;
        @apply bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
        @apply text-white transition-colors duration-200 ease-in-out;
    }

    /* Variante plus grande */
    .btn-primary-lg {
        @apply inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium;
        @apply bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
        @apply text-white transition-colors duration-200 ease-in-out;
    }

    /* Variante désactivée */
    .btn-primary-disabled {
        @apply inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium;
        @apply bg-indigo-400 hover:bg-indigo-400 cursor-not-allowed;
        @apply text-white transition-colors duration-200 ease-in-out;
    }

    /* Capitaliser uniquement la première lettre */
    .first-letter-capitalize::first-letter {
        text-transform: uppercase;
    }
}
  /* GLOBAL */
  .conteneur {
    @apply mx-auto max-w-[90rem] 2xl:max-w-[90rem] px-5 lg:px-12
  }
  .ariane, .separateur {
    @apply relative w-full
  }
  .divide-ariane, .divide-titre {
    @apply absolute inset-0 flex items-center
  }
  .border-ariane, .border-titre {
    @apply w-full border-t
  }
  .conteneur-ariane, .conteneur-titre {
    @apply w-full relative flex justify-start bg-transparent overflow-hidden
  }
  .conteneur-ariane{
    @apply conteneur 
  }
  .align-ariane {
    @apply bg-white px-3 lg:px-5 -ml-3 lg:-ml-5 overflow-hidden
  }
  .align-titre {
    @apply bg-white pr-3 lg:pr-5
  }
  .align-ariane nav {
    @apply flex pb-1.5 overflow-hidden
  }
  .align-ariane nav ol {
    @apply flex items-center space-x-1 lg:space-x-3 overflow-hidden
  }
  .align-ariane nav ol li svg {
    @apply h-4 shrink-0 text-black
  }
  .arbo-ariane {
    @apply flex items-center
  }
  .ariane nav ol li {
    @apply shrink-0 min-w-0
  }
  .ariane nav li:not(:first-child):last-child {
    @apply flex-1 min-w-16
  }
  .ariane nav li a {
    @apply text-xs font-medium shrink-0
  }
  .ariane nav li:not(:first-child) a {
    @apply ml-1 lg:ml-3 
  }

  .ariane nav li:last-child span {
    @apply text-xs font-medium ml-1 lg:ml-3 truncate
  }
  .ariane nav li div {
    height: 16px;
    line-height: 16px;
    display: flex;
    align-items: center;
  }
  .border, .border-t, .border-r, .border-b, .border-l{
    @apply border-dotted;
    border-color:black;
  }
  .lien {}
  .lien-dropdown{ 
    @apply relative inline-block text-left
  }
  .lien-dropdown a {
    @apply shrink-0 inline-block uppercase flex items-center
  }
  .mini-lien{
    @apply text-xs underline underline-offset-2 decoration-1
  }
  .entete{
    @apply flex items-center justify-between
  }
  .entete-titre{
    @apply text-3xl/7 uppercase
  }
  .titre-liste {
    @apply uppercase font-bold
  }
  .liste-ref {
    @apply list-disc list-inside mt-4 max-w-xl space-y-2
  }
  .signature-ms {
    @apply font-cursive text-3xl lg:text-4xl
  }
  .s-caps{
    -moz-font-feature-settings: "c2sc", "smcp";
    -ms-font-feature-settings: "c2sc", "smcp";
    -webkit-font-feature-settings: "c2sc", "smcp";
    font-feature-settings: "c2sc", "smcp";
    letter-spacing: 0.05em;
  }
  .xls-caps{
    font-variant-caps: small-caps;
  }
  .chiffre{
    @apply lining-nums;
  }
  .input-texte {
    @apply focus-within:relative 
  }
  .full-input {
    @apply flex flex-col-reverse relative justify-center
  }

  /* ACCUEIL */
  .input-ms{
    @apply relative placeholder:duration-500 placeholder:absolute focus:placeholder:pt-10 block w-full px-3 py-3 appearance-none border border-l-white border-transparent border-solid text-white 
    duration-300 bg-zinc-800 focus:border focus:border-white focus:border-solid focus:bg-zinc-950 focus:outline-none duration-100 focus:ring-white sm:text-sm h-14 focus:placeholder:text-transparent z-10
  }
  textarea.input-ms{
    @apply h-auto
  }

  .label-ms{
    @apply duration-500 opacity-0 mb-1 peer-focus:opacity-100 text-zinc-400 text-xs -translate-y-6 peer-focus:translate-y-0 after:ml-0.5 after:text-red-500 after:content-['*'] z-0
  }
  .btinput-ms{
    @apply pointer-events-none col-start-1 row-start-1 z-10 self-center justify-self-end h-14 w-12 mt-5 flex items-center justify-center
  }
  .btinput-ms svg{
    @apply h-5 text-zinc-200 sm:h-4
  }
  .bt-ms{
    @apply flex items-center justify-center px-3 py-3 appearance-none border border-transparent border-solid border-y-black text-black bg-transparent hover:bg-white hover:border-x-black outline-none duration-300 
    hover:ring-black sm:text-sm h-14 z-10;
  }
  .bt-light{
    @apply border-y-zinc-300 text-zinc-300 bg-transparent hover:bg-black hover:border-x-zinc-300 outline-none duration-300 
    hover:ring-white
  }
 .bt-ct-ms{
    @apply flex items-center justify-center px-3 py-3 appearance-none border border-black text-black bg-white hover:bg-neutral-100 outline-none duration-300 
    hover:ring-white sm:text-sm h-14 z-10;
  }
  .a-action {
    @apply underline
  }

  .bloc-temoignage {
    @apply max-w-xl lg:col-span-7
  }
    /* Styles pour Quill.js blockquote (citations) */
  .quill-content blockquote {
    border-left: 4px solid #ce7360 !important;
    padding-left: 1rem !important;
    margin: 1rem 0 !important;
    color: #4b5563 !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0 0.25rem 0.25rem 0 !important;
  }

  .quill-content a {
    text-decoration: underline;
    cursor: pointer;
  }


  .temoignage{
    @apply relative border-l-4 border-degas pl-6 lg:-ml-6
  }
  .temoignage blockquote {
    @apply text-xl/8 font-semibold tracking-tight
  }
  .temoignage figcaption {
    @apply mt-4
  }
  .bloc-figcaption {
    @apply text-sm/6
  }
  .nom-fig{
    @apply font-semibold italic
  }
  .date-fig {
    @apply text-zinc-600
  }

  .bloc-recherche{
    @apply mx-auto grid grid-cols-1 lg:gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2
  }
  .action-recherche{
    @apply py-12 bg-zinc-950 text-white
  }
  .align-recherche {
    @apply max-w-[45rem] px-8 lg:px-12 lg:ml-auto h-full flex flex-col justify-between
  }
  .sticky-recherche{
    @apply lg:top-12 lg:sticky space-y-12
  }
  .bloc-input{
    @apply grid grid grid-cols-1 lg:grid-cols-3 lg:items-start
  }
  .titre-input {
  }
  .input-recherche {
    @apply col-span-2 grid grid-cols-1 focus-within:relative
  }
  .align-input {
    @apply col-start-1 row-start-1 flex flex-col-reverse relative justify-center
  }
  .bloc-action {
    @apply grid grid grid-cols-1 lg:grid-cols-3 lg:items-start lg:pt-4
  }
  .align-action {
    @apply col-span-2 grid grid-cols-1 flex flex-col gap-y-4
  }
  .grid-action {
    @apply grid grid-cols-1 gap-8 md:grid-cols-2
  }
  .col-action {
    @apply flex flex-col-reverse relative
  }
  .img-action {
    @apply /*order-first*/ w-full /*lg:order-last*/
  }
  .page-texte {
    @apply relative isolate overflow-hidden bg-white py-16 sm:py-24 xl:py-32
  }
  .intro-page-texte {
    @apply mx-auto max-w-2xl lg:mx-0
  }
  .titre-intro {
    @apply mt-2 text-pretty text-4xl font-semibold tracking-tight sm:text-5xl
  }
  .intro-page-texte .texte-intro {
    @apply mt-6 text-base sm:text-lg font-medium
  }
  .grid-page-texte {
    @apply mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-16 gap-y-16 lg:gap-x-24 lg:mx-0 lg:mt-10 lg:max-w-none lg:grid-cols-12
  }
  .bloc-stat {
    @apply relative lg:order-last lg:col-span-5
  }
  .grid-stat{
    @apply grid max-w-xl grid-cols-2 sm:grid-cols-3 lg:grid-cols-1 gap-8
  }
  .deco-stat{
    @apply flex flex-col gap-y-0.5 lg:gap-y-2 border-l border-black pl-6 transition-all duration-200
  }
  .deco-stat:hover{
    @apply border-gray-600 pl-8
  }
  .deco-stat dt{
    @apply text-sm/6
  }
  .deco-stat dd{
    @apply order-first text-xl lg:text-3xl font-semibold tracking-tight
  }
  .table-degas {
    @apply my-4 lg:my-12 pb-24 
  }

 .nav-pagination {
  @apply flex items-center justify-between px-4 sm:px-0
 }
 .bloc-pagination {
  @apply -mt-px flex w-0 flex-1 justify-end
 }
 .item-pagination {
  @apply flex justify-between md:justify-end items-center md:space-x-6 xl:space-x-12
 }
 .h-pagination {
  @apply flex items-center items-stretch
 }
 .chiffres-pagination {
  @apply flex justify-end items-stretch
 }
 .chiffres-pagination a {
  @apply uppercase inline-flex self-stretch items-center p-2 xl:p-4 text-sm border-t border-transparent hover:border-black
  hover:border-t
 }
 .chiffres-pagination a.active {
    @apply border-t-black border-solid
 }
 .bloc-fleches {
  @apply flex items-center hover:items-stretch
 }
 .separator-fleches{
  @apply inline-flex items-center py-2 pr-2 xl:pr-4 border border-transparent border-r-black
 }
 .fleche-g{
  @apply inline-flex items-center p-2 xl:p-4 text-sm font-medium self-stretch border border-transparent hover:border-y-black border-r-black
 }
 .fleche-d {
  @apply inline-flex items-center px-2 xl:px-4 text-sm font-medium border border-transparent hover:border-y-black border-r-black
 }

  /* GALLERIE */
  .gallerie {
    @apply my-4 lg:my-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-y-24 gap-24 pb-24
  }
  .grille-actions{
    @apply flex flex-col gap-6
  }
  .actions-g{
    @apply flex-1 flex flex-col gap-6 md:flex-row md:gap-4
  }
  .titre-actions {
    @apply text-lg leading-none font-medium text-gray-900
  }
  .bt-actions {
    @apply flex items-center relative p-2 lg:px-3 border border-solid border-x-transparent border-t border-b md:border-y-black text-black shrink-0 hover:border-x-black active:bg-black active:text-white bg-white
  }
  .infos-filtre-g{
    @apply flex flex-1 flex-col items-stretch justify-start text-left min-w-0 relative md:pl-6 lg:pl-0 gap-y-2 self-end max-w-full
  }  
  .filtre-actif-g{
    @apply text-xs leading-none relative w-full flex items-stretch max-w-full
  }  
  .titre-filtre-g, .detail-filtre-g, .bt-filtre-actif, .resultat-filtre-g, .txt-resultat-filtre-g {
    @apply flex items-center
  }
  .titre-filtre-g{
    @apply uppercase text-2xs border border-solid shrink-0
  }
  .notif-bt{
    @apply bg-black text-white font-bold shrink-0 border border-solid absolute top-0 right-0 -mt-2 -mr-px
  }
  .titre-filtre-g.notif span{
    @apply shrink-0 font-bold 
  }
  .titre-filtre-g:not(.notif-bt) {
    @apply min-w-[100px] max-w-[170px];
    span{
      @apply truncate
    }
  }
  .detail-filtre-g{
    @apply flex flex-1 truncate items-center px-2 bg-neutral-400/20 w-full
  }
  .bt-filtre-actif{
    @apply bg-black text-white border border-transparent border-l-black hover:border-black active:border-solid text-black bg-white
  }
  .resultat-filtre-g {
    @apply col-span-2 flex items-center gap-x-2 basis-full justify-self-end
  }
  .line-filtre-g{
    @apply relative w-full flex items-start
  }
  .separateur-filtre-g {
    @apply absolute inset-0 flex items-end
  }
  .border-filtre-g {
    @apply w-full border-t border-black
  }
  .txt-resultat-filtre-g{
    @apply relative bg-white font-bold pr-4 bg-white leading-[0] space-x-1.5 -mb-[2px]
  }
  .item-g {
    @apply relative space-y-2
  }

  .nav-filtres{
    @apply sm:flex sm:space-y-0 justify-end
  }
  .nav-filtres nav{
    @apply flex justify-between md:justify-end items-center md:space-x-6 xl:space-x-12
  }
  .bloc-fleches-hb {
    @apply -mt-px flex items-center hover:items-stretch
  }
  .label-fleches {
    @apply uppercase inline-flex items-center pr-4 text-sm font-bold border border-transparent border-r-black
  }
  .entete-item-g, .cat-item-g {
    @apply flex items-start gap-x-4
  }

  /*oeuvre*/
  .visuel-item-g {
    @apply border border-transparent w-full transition ease-out duration-75 transform-gpu group-hover:border-black group-active:border-solid
  }
  /*gauche*/
  .titre-item-g, .tech-item-g {
    @apply flex-1
  }
  /*droite*/
  .date-item-g, .date-item-g{
    @apply inline-block align-text-top 
  }
  /*haut*/
  .tech-item-g, .ref-item-g {
    @apply uppercase
  }
  /*bas*/
  .date-item-g, .ref-item-g{
    @apply shrink-0 text-right 
  }
  /*style*/
  .titre-item-g{
    @apply font-bold line-clamp-2 leading-none
  }
  .date-item-g{
    @apply text-sm shrink-0
  }
  .tech-item-g{
    @apply w-full flex-1 text-xs font-medium tracking-tight line-clamp-2 
  }
  .ref-item-g{
    @apply w-12 flex-none shrink-0 text-xs uppercase before:content-['ms\000020\00003A'] before:mr-0.5 before:uppercase;
  }
  
/* TABLES */
  .conteneur-table{}
  .table-degas{
    @apply min-w-full
  }
  /*Titres de la table*/
  .table-degas thead tr th{
    @apply text-left text-sm xl:text-base font-semibold 
    px-3 py-3.5
    first:py-3.5 first:pl-4 first:pr-3 first:sm:pl-3
    last:px-3 last:py-3.5
  }
  .table-degas tbody {
    @apply bg-white border-t
  }
  .table-degas tbody tr {
    @apply even:bg-neutral-100
  }
  /*Lignes de la table*/
  .table-degas tbody tr td{
    @apply text-sm xl:text-base 
    first:w-full first:max-w-0 first:sm:w-auto first:sm:max-w-none
    last:align-top
  }
  .table-degas tbody tr td:first-child dl{
    @apply font-normal flex align-baseline sm:hidden
  }
  .table-degas tbody tr td dl dt{
    @apply sr-only
  }
  .table-degas tbody tr td dl dd{
    @apply mt-1 
  }
  .table-degas tbody tr td:fist-child dl dd.localisation{
    @apply xls-caps after:content-['·'] after:mx-1 
  }
  .table-degas tbody tr td:not(:fist-child) dl dd.localisation{
    @apply mt-1 truncate italic
  }
  .table-degas tbody tr td.localisation{
    @apply italic
  }
  
  .table-degas tbody tr td dl dd.lieu{
    @apply italic line-clamp-2
  }
  .table-degas tbody tr td span.localisation{
    @apply xls-caps
  }

  /* MENU MOBILE */

 .conteneur-menumobile {
  @apply flex flex-col bg-white h-full
 }
 .bloc-menumobile {
  @apply mx-auto px-4 w-full bg-white
 }
 .bloc-menumobile .ligne-dropdown {
  @apply text-lg py-1
 }
 /* Styles pour les dropdowns du menu mobile footer */
 #mobile-menu-footer .ligne-dropdown {
  @apply text-lg py-1 block
 }

}

@layer utilities {
  .text-pretty {
    text-wrap: pretty;
  }
  .text-balance {
    text-wrap: balance;
  }
  .min-w-16 {
    min-width: 4rem;
  }
  .h-mobile-full {
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh; /* Dynamic Viewport Height - exclut les barres mobiles */
  }
  .max-h-mobile {
    max-height: 90vh;
    max-height: 90dvh; /* Dynamic Viewport Height - exclut les barres mobiles */
  }

  /* Bloquer le scroll du body quand le menu mobile est ouvert - seulement en dessous de lg */
  body:has(#mobile-menu-toggle:checked) {
    @apply max-lg:overflow-hidden max-lg:h-screen;
  }
  
  /* Styles pour le tableau Degas avec @apply */
  .table-degas {
    @apply my-4 lg:my-12 pb-24 min-w-full;
  }

  /* Titres de la table */
  .table-degas thead tr th {
    @apply text-left text-sm xl:text-base font-semibold 
      px-3 py-3.5
      first:py-3.5 first:pl-4 first:pr-3 first:sm:pl-3
      last:px-3 last:py-3.5;
  }

  .table-degas tbody {
    @apply bg-white border-t;
  }

  /* Lignes de la table */
  .table-degas tbody tr td {
    @apply text-sm xl:text-base 
      first:w-full first:max-w-0 first:sm:w-auto first:sm:max-w-none
      last:align-top;
  }

  .table-degas tbody tr td a:not(.action-btn) {
    @apply block p-3;
  }

  .table-degas tbody tr.main-line:hover {
    @apply bg-gray-50;
  }

  .table-degas tbody tr.main-line:hover + tr.actions-line {
    @apply bg-gray-50;
  }

  /* Pour les cellules sans lien (actions, cellules vides) */
  .table-degas tbody tr td:not(:has(a)) {
    @apply p-3;
  }

  .table-degas tbody tr td:first-child dl {
    @apply font-normal sm:hidden;
  }

  .table-degas tbody tr td dl dt {
    @apply sr-only;
  }

  .table-degas tbody tr td dl dd {
    @apply mt-1;
  }

  .table-degas tbody tr td:first-child dl dd.localisation {
    @apply after:content-['·'] after:mx-1;
  }

  .table-degas tbody tr td:not(:first-child) dl dd.localisation {
    @apply mt-1 truncate italic;
  }

  .table-degas tbody tr td.localisation {
    @apply italic;
  }

  .table-degas tbody tr td dl dd.lieu {
    @apply italic line-clamp-2;
  }

  .table-degas tbody tr td span.localisation {
    font-variant: small-caps;
  }

  /* Alternance des couleurs par paires de lignes */
  .table-degas tbody tr.line-even {
    @apply bg-white;
  }

  .table-degas tbody tr.line-odd {
    @apply bg-neutral-100;
  }

  .logo{
    @apply text-xl italic font-display block lg:text-3xl xl:mb-1;
  }
  .intervale {
    @apply chiffre text-base lg:text-xl;
  }
  .titre-catalogue{
    @apply max-w-md uppercase lg:text-xl xl:text-xl/6 ;
  }
  .auteur-catalogue{
    @apply text-xs shrink-0 lg:text-base;
  }
  .bloc-nav{
    @apply bg-white flex justify-between lg:block
  }
  .navprincipale{
    @apply flex justify-between gap-4 lg:w-full lg:gap-12
  }
  .navprincipale .bloc-logo{
    @apply items-center flex gap-12 py-4 basis-1/2 
  }
  .navprincipale .bloc-logo .logo-texte {
    @apply text-center shrink-0 lg:py-4 xl:py-6 flex items-baseline gap-x-2 md:block
  }
  .navprincipale .bloc-menu {
    @apply items-center hidden lg:flex gap-4 basis-1/2
  }
  .navprincipale .liens{
    @apply text-xl grid grid-rows-2 grid-flow-col gap-x-12 xl:gap-x-24 xl:gap-y-0.5 lg:text-lg 2xl:xl:gap-x-32
  }
  .navprincipale .liens a{
    @apply shrink-0 hover:before:content-['\2219'] before:block before:absolute before:-left-4 relative inline-block
  }
  .navprincipale .liens a.active, footer ul li a.active{
    @apply before:font-bold before:content-['\2219'] before:text-black
  }
  .navsecondaire .bloc-dropdown a.active{
    @apply after:font-bold after:content-['\2219'] after:ml-2 bg-neutral-100
  }
  .navsecondaire .bloc-dropdown a{
    @apply hover:after:content-['\2219'] after:ml-2 hover:no-underline
  }
  footer ul li a{
    @apply hover:before:content-['\2219'] hover:no-underline before:block before:absolute before:-left-3 relative inline-block
  }
  .navprincipale .bloc-titres {
    @apply hidden xl:flex xl:flex-col
  }
  .navsecondaire{
    @apply hidden text-sm lg:flex justify-end gap-4 lg:w-full lg:gap-12
  }
  .navsecondaire .liens{
    @apply flex gap-4 justify-end items-center w-full
  }
  .navsecondaire a:not(.bloc-dropdown a){
    @apply uppercase font-medium flex items-center mt-4
  }
  .navsecondaire .liens a:not(.lien-dropdown a):last-child{
    @apply border-l pl-4
  }
  .navsecondaire .bloc-dropdown {
    @apply absolute right-0 z-10 w-56 origin-top-right bg-white border ring-offset-2 ring-2 ring-white
  }
  .navsecondaire .bloc-dropdown .ligne-dropdown{
    @apply block px-4 py-2 text-base text-black hover:bg-neutral-100 normal-case
  }
  #menumobile{
    @apply lg:hidden flex items-center
  }
  #menumobile a.lien {
    @apply text-xs shrink-0 inline-block uppercase py-4
  }
  /**/
  .intro{
    @apply bg-white px-6 py-12 sm:py-24 lg:px-8
  }
  .intro .texte-intro{
    @apply mx-auto max-w-2xl text-center
  }
  .gros-titre{
    @apply text-4xl text-pretty tracking-[-0.015em] sm:text-5xl lg:text-6xl font-display; 
  }

  .prose-intro{
    @apply mt-4 lg:mt-8 text-pretty text-base sm:text-lg font-medium lg:text-xl/8 text-pretty
  }
}

.bg-header-image {
  background-image: url(/repetition.jpg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Classe ref-item-g exacte du designer */
.ref-item-g {
  @apply w-12 flex-none shrink-0 text-xs uppercase text-right;
}
.ref-item-g::before {
  content: 'ms: ';
  @apply mr-0.5 uppercase;
}

/* Système de toggle pour les sections d'œuvres */
.artwork-toggle-checkbox + label {
  user-select: none;
}

.artwork-toggle-checkbox:checked + label svg:first-child {
  display: none;
}

.artwork-toggle-checkbox:checked + label svg:last-child {
  display: block !important;
}

.artwork-toggle-checkbox:checked ~ div {
  display: block !important;
}

/* Système de toggle pour le header */
.navsecondaire label[for="toggle-expertise-header"], .navsecondaire label[for="toggle-language-header"] {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  font-weight: 500;
  text-transform: uppercase;
  user-select: none;
}

.header-toggle-checkbox:checked + label svg:first-child {
  display: none;
}

.header-toggle-checkbox:checked + label svg:last-child {
  display: block !important;
}

.header-toggle-checkbox:checked ~ div {
  display: block !important;
}

/* Fix pour border-top pagination sur mobile */
@media (max-width: 768px) {
  nav {
    overflow-y: visible !important;
  }
  
  /* Correction pour le menu mobile */
  #menumobile {
    width: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
}

/* Menu mobile - Contrôle de la popup avec checkbox */
#menumobile:has(#mobile-menu-toggle:checked) #mobile-menu-popup {
  display: flex !important;
}

/* Label flottant pour le React Select home_edit avec  + focus-within */
.align-input:focus-within .label-ms {
  @apply opacity-100 translate-y-0;
}

/* Menu mobile - Contrôle du dropdown Expertise */
#mobile-menu-footer:has(#mobile-expertise-toggle:checked) #mobile-expertise-dropdown {
  display: block !important;
}
/* Menu mobile - Contrôle du dropdown Langue */
#mobile-menu-footer:has(#mobile-language-toggle:checked) #mobile-language-dropdown {
  display: block !important;
}

/* Éviter la sélection de texte sur les labels du menu mobile */
#menumobile label {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Navigation active links - système simple avec classes */

/* Header - navigation principale (style before) */
body[data-page="pastels_and_paintings"] .link-nav-header.page-pastels_and_paintings,
body[data-page="drawings"] .link-nav-header.page-drawings,
body[data-page="exhibitions"] .link-nav-header.page-exhibitions,
body[data-page="bibliographies"] .link-nav-header.page-bibliographies,
body[data-page="sales"] .link-nav-header.page-sales,
body[data-page="museums"] .link-nav-header.page-museums {
  @apply before:font-bold before:content-['\2219'] before:text-black
}

/* Header - navigation secondaire dropdown (style after + fond) */
body[data-page="news"] .link-nav-header.page-news,
body[data-page="methodology"] .link-nav-header.page-methodology,
body[data-page="mschulman"] .link-nav-header.page-mschulman,
body[data-page="genealogy"] .link-nav-header.page-genealogy,
body[data-page="signatures"] .link-nav-header.page-signatures,
body[data-page="press"] .link-nav-header.page-press {
  @apply after:font-bold after:content-['\2219'] after:ml-2 bg-neutral-100
}

/* Footer - tous les liens de navigation (style before) */
body[data-page="home"] .link-nav-footer.page-home,
body[data-page="pastels_and_paintings"] .link-nav-footer.page-pastels_and_paintings,
body[data-page="drawings"] .link-nav-footer.page-drawings,
body[data-page="exhibitions"] .link-nav-footer.page-exhibitions,
body[data-page="bibliographies"] .link-nav-footer.page-bibliographies,
body[data-page="sales"] .link-nav-footer.page-sales,
body[data-page="museums"] .link-nav-footer.page-museums,
body[data-page="methodology"] .link-nav-footer.page-methodology,
body[data-page="mschulman"] .link-nav-footer.page-mschulman,
body[data-page="genealogy"] .link-nav-footer.page-genealogy,
body[data-page="signatures"] .link-nav-footer.page-signatures,
body[data-page="press"] .link-nav-footer.page-press,
body[data-page="help"] .link-nav-footer.page-help,
body[data-page="tos"] .link-nav-footer.page-tos,
body[data-page="news"] .link-nav-footer.page-news,
body[data-page="contact"] .link-nav-footer.page-contact {
  @apply before:font-bold before:content-['\2219'] before:text-black
}

/* Footer - langues (style before) */
html[lang="fr"] .link-nav-footer.lang-fr,
html[lang="en"] .link-nav-footer.lang-en {
  @apply before:font-bold before:content-['\2219'] before:text-black
}

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */