/* Fichier: 30-woocommerce-amont.css - Role: Styles: WooCommerce amont (parcours, grilles, fiches) */
/* =========================================================
   WOOCOMMERCE — AMONT
   - grille d'orientation
   - fiche éditoriale
   - modales (SCREEN) 
   /fiches avant sélection
   ========================================================= */

/* =======================================================

A-ancre - GRILLE D'ORIENTATION

========================================================= */

/* Grille éditoriale (Publications + Ressources) — vignettes portrait robustes (cat-document) */
.pg-grille-editoriale li.wc-block-product.product_cat-cat-document .wc-block-components-product-image{
  position: relative;
  display: block;
  width: 100%;
  height: 0 !important;
  padding-top: 141.421% !important; /* ISO A (√2) : A4/A5 */
  overflow: hidden;
}
.pg-grille-editoriale li.wc-block-product.product_cat-cat-document .wc-block-components-product-image a,
.pg-grille-editoriale li.wc-block-product.product_cat-cat-document .wc-block-components-product-image img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pg-grille-editoriale li.wc-block-product.product_cat-cat-document .wc-block-components-product-image img{
  box-sizing: border-box;
  border: 1px solid #999;
  background: #fff;
}

/* Grille éditoriale (Publications + Ressources) — grille stable (5 / 3 / 2 / 1) */
.pg-grille-editoriale{
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important; /* >970 (acquis) */
  gap: 18px !important;
}

/* <= 860 : on bascule sur 3 colonnes (tablette + mobile paysage large) */
@media (max-width: 860px){
  .pg-grille-editoriale{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Mobile portrait : 2 colonnes (le coeur de ta demande) */
@media (max-width: 540px) and (orientation: portrait){
  .pg-grille-editoriale{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important; /* un peu plus serré en portrait */
  }
}

/* Grille éditoriale — TITRE VIGNETTE taille lisible */
.pg-grille-editoriale li.wc-block-product h2{
  font-size: 1.3rem !important;   /* + lisible sans dominer */
  line-height: 1.3 !important;
  margin-top: 0.7rem !important;
  margin-bottom: 0 !important;
}

/* Grille éditoriale — réserver 2 lignes pour le titre, sous-titre flexible */
.pg-grille-editoriale li.wc-block-product h2.wp-block-post-title{
  margin-bottom: 0.25rem !important;
  line-height: 1.3 !important;
  min-height: calc(2 * 1.3em) !important; /* réserve 2 lignes */
  display: block;
}

/* Si titre plus long : on coupe à 2 lignes */
.pg-grille-editoriale li.wc-block-product h2.wp-block-post-title a{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

/* Grille éditoriale — identité typographique + neutralisation conflit OceanWP (couleur/gras) */
.pg-grille-editoriale li.wc-block-product h2.wp-block-post-title a,
.pg-grille-editoriale li.wc-block-product h2.wp-block-post-title a *{
  color: #111 !important;
  -webkit-text-fill-color: #222 !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em;
  text-decoration: none !important;

  font-size: 1.25rem !important;     /* ??? au lieu de 14px */
  line-height: 1.3 !important;
  text-underline-offset: 0 !important;
  text-decoration-thickness: auto !important;
}
.pg-grille-editoriale li.wc-block-product h2.wp-block-post-title a:hover,
.pg-grille-editoriale li.wc-block-product h2.wp-block-post-title a:hover *,
.pg-grille-editoriale li.wc-block-product h2.wp-block-post-title a:focus,
.pg-grille-editoriale li.wc-block-product h2.wp-block-post-title a:focus *{
  color: #FFC000 !important;
  -webkit-text-fill-color: #FFC000 !important;
}

/* SOUS-TITRE VIGNETTE (description courte) — centrage et identité typographique */
.pg-grille-editoriale li.wc-block-product .pg-product-subtitle{
  text-align: center !important;
  font-size: 1.2rem !important;
  line-height: 1.35 !important;
  color: #333 !important;
  margin-top: 0.3rem !important;
}

/* Pages contenant une grille éditoriale (.pg-grille-editoriale) → centrage/layout commun Publications & Ressources */
body:has(.pg-acces-list) #content-wrap.container{
  width: 100% !important;
  max-width: none !important;

  padding-left: 0 !important;
  padding-right: 0 !important;

  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
body:has(.pg-acces-list) #primary.content-area.clr{
  float: none !important;

  width: 100% !important;
  max-width: none !important;

  padding-left: 0 !important;
  padding-right: 0 !important;

  margin-left: auto !important;
  margin-right: auto !important;

  box-sizing: border-box !important;
}

/* Publications — recentrer le titre sous la vignette */
.pg-grille-editoriale h2.wp-block-post-title{
  text-align: center;
}
/* Publications — supprimer le marqueur décoratif du titre, sans toucher au centrage */
.pg-grille-editoriale h2.wp-block-post-title a::before{
  content: none !important;
}
ul.pg-grille-editoriale,
ul.pg-grille-editoriale > li{
  list-style: none !important;
}
ul.pg-grille-editoriale{
  padding-left: 0 !important;

  width: 100% !important;
  max-width: 1100px !important;  /* plafond cohérent avec ton breakpoint PC */
  margin: 0 auto !important;     /* centrage horizontal réel */
}

/* Grille éditoriale — recentrer le conteneur OceanWP (titre + grille) */
body:has(.pg-grille-editoriale) #content-wrap.container{
  margin-left: auto !important;
  margin-right: auto !important;
}

body:has(.pg-grille-editoriale) #primary.content-area.clr{
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;

  width: 100% !important;
  max-width: 1100px !important;
}

/* Titre "les publications" : centré (au cas où le thème le garde à gauche) */
body:has(.pg-grille-editoriale) .wp-block-query-title{
  text-align: center !important;
}

/* =======================================================

B-ancre- FICHE ÉDITORIALE ID : 6441 (référence stable)
   Rôle :
   - Affichage plein large (sidebar OceanWP désactivée)
   - Base unique de la fiche éditoriale
   - Réutilisée en affichage popup (cf. sections C)

========================================================= */

/* Conteneur général */
.pg-fiche-page{
  box-sizing: border-box;
  max-width: 780px;
  height: 380px;
  padding: 18px;
  margin: 0 auto;
  border: 3px solid #ffc000; /* jaune */
  border-radius: 10px;
  background: #fff;
  display: block;
float: none;
clear: both;

}

/* Grille 3 colonnes */
.pg-fiche-page .pg-fiche-grid{
  box-sizing: border-box;
  height: 100%;
  display: grid;
  grid-template-columns: 240px 1.25fr 0.95fr;
  column-gap: 20px;
  align-items: stretch; /* <-- au lieu de start : permet de pousser les actions en bas */
}

/* Colonne droite : titres, infos, actions (pousser les liens en bas) */
.pg-fiche-page .pg-fiche-meta{
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pg-fiche-page .pg-fiche-actions{
  margin-top: auto; /* <-- colle les 2 liens en bas de la colonne */
}

/* Visuel : 340×240, non cliquable */
.pg-fiche-page .pg-fiche-visuel{
  width: 240px;
}
.pg-fiche-page .pg-fiche-visuel img{
  display: block;
  width: 240px;
  height: 340px;
  object-fit: cover;
  border: 1px solid #222; /* bordure visuel */
}

/* Texte éditorial : hauteur fixe 340px + scroll */
.pg-fiche-page .pg-fiche-texte{
  height: 340px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 10px; /* respiration avant la scrollbar */
  line-height: 1.35;
}

/* =========================================================
   FICHE ÉDITORIALE — colonne droite : titres + infos + actions (centrage & identité)
   ========================================================= */
   
 /* Colonne droite : titres, infos, actions */
.pg-fiche-page .pg-fiche-meta{
  min-width: 0;
}

/* Centrer les 3 zones (titres / infos / actions) */
.pg-fiche-page .pg-fiche-meta{
  text-align: center;
}

/* Titres : même “identité” que les vignettes, en plus gros */
.pg-fiche-page .pg-fiche-titres{
  margin-bottom: 14px;
}

.pg-fiche-page .pg-fiche-titre{
  color: #111;
  font-weight: 400;
  letter-spacing: 0.01em;
  font-size: 1.65rem;
  line-height: 1.25;
  margin: 0;
}

.pg-fiche-page .pg-fiche-soustitre{
  color: #333;
  font-weight: 400;
  letter-spacing: 0.01em;
  font-size: 1.3rem;
  line-height: 1.3;
  margin-top: 14px;
}

/* Infos éditoriales : distinguer (italique) */
.pg-fiche-page .pg-fiche-infos{
  font-size: 1.1rem;
  line-height: 1.3;
  font-style: italic;
  color: #444;
  margin-bottom: 18px;
}

.pg-fiche-page .pg-fiche-infos > div{
  margin-bottom: 6px;
}

/* Liens (tu réutilises lnk-stylise tel qu'il existe déjà ailleurs) */
.pg-fiche-page .pg-fiche-actions .lnk-stylise{
  display: block;
  text-align: center;
  margin-top: 10px;
}
/* =========================================================
   FICHE ÉDITORIALE — PAGE WP (ID 6441) : supprimer sidebar + plein large
   ========================================================= */

body.pg-page-fiche #right-sidebar{
  display: none !important;
}

body.pg-page-fiche #primary{
  width: 100% !important;
  float: none !important;
}

body.pg-page-fiche #content-wrap{
  max-width: none !important;
}

/* Page 6441 : masquer le titre de page du thème (on garde le H2 i18n du composant) */
body.pg-page-fiche .page-header{
  display: none !important;
}
body.pg-page-fiche header.page-header,
body.pg-page-fiche .page-title,
body.pg-page-fiche h1.page-title,
body.pg-page-fiche .page-header-title,
body.pg-page-fiche h1.page-header-title,
body.pg-page-fiche .entry-title,
body.pg-page-fiche h1.entry-title{
  display: none !important;
}

/* =========================================================
   MISE EN PAGE POLICES FICHE ÉDITORIALE
   ========================================================= */
/* Centrage par rapport à la colonne éditoriale */
#main a.lnk-stylise {
  display: block;
  width: fit-content;
  margin: 12px auto 0 auto;   /* centrage horizontal + respiration */
}

/* =========================================================
   FICHE ÉDITORIALE — pousser les actions en bas (colonne droite)
   ========================================================= */

.pg-fiche-grid {
  align-items: stretch; /* les cellules remplissent la hauteur de la ligne */
}

.pg-fiche-meta {
  display: flex;
  flex-direction: column;
}

.pg-fiche-actions {
  margin-top: auto; /* pousse le bloc des 2 liens en bas */
  padding-bottom: 16px; /* respecte le padding bas visuel (ajuste si besoin) */
}

/* =========================================================
   FICHE ÉDITORIALE — ajustement fin espace bas (actions)
   ========================================================= */

.pg-fiche-page .pg-fiche-actions {
  margin-top: auto;
  padding-bottom: 3px;   /* ajuste ici : 8 / 12 / 16 selon la maquette */
}

.pg-fiche-page .pg-fiche-actions > *:last-child {
  margin-bottom: 0;       /* supprime toute marge parasite interne */
}

/* =========================================================
   FICHE ÉDITORIALE — texte central (lecture dense)
   ========================================================= */

.pg-fiche-page .pg-fiche-texte{
  font-size: 0.92em;        /* légèrement inférieur */
  line-height: 1.45;
  text-align: justify;
  hyphens: auto;
  padding-top: 3px;

  /* IMPORTANT : on neutralise pre-line pour éviter le double espacement */
  white-space: normal !important;
}

/* --- Contrôle précis des paragraphes --- */
.pg-fiche-page .pg-fiche-texte p{
  margin: 0 0 0.6em 0 !important;   /* espace entre paragraphes */
}

.pg-fiche-page .pg-fiche-texte p:last-child{
  margin-bottom: 0 !important;
}

/* --- Les <br> ne doivent PAS créer de respiration supplémentaire --- */
.pg-fiche-page .pg-fiche-texte br{
  line-height: 1;
}

/* --- Listes éventuelles --- */
.pg-fiche-page .pg-fiche-texte ul,
.pg-fiche-page .pg-fiche-texte ol{
  margin: 0 0 0.6em 1.2em !important;
  padding: 0 !important;
}

.pg-fiche-page .pg-fiche-texte li{
  margin: 0.15em 0 !important;
}

/* =========================================================
   FICHE MOBILE <970 — page unique + accordéons + overlay plein écran
   ========================================================= */

/* =================================================
   Bascule d’affichage : on prépare un bloc HTML .pg-fiche-mobile (ajouté côté PHP)
   - >=970 : on cache le mobile, on garde l’existant
   - <970 : on affiche le mobile
*/

.pg-fiche-mobile{ display:none !important; }
.pg-fiche-desktop{ display:block !important; }

@media (max-width:969px){

  .pg-fiche-mobile{ display:block !important; }
  .pg-fiche-desktop{ display:none !important; }

  /* En mobile, pas de cadre jaune autour de la fiche */
.pg-fiche-page{
  border: 0 !important;
  border-radius: 0 !important;
  height: auto !important;

  max-width: 520px !important;
  margin: 0 auto !important;

  padding: 10px 8px 0 8px !important;
  box-sizing: border-box !important;
  }

  /* Header mobile : visuel OUT */
  .pg-fiche-mobile .pg-fm-visuel{ display:none !important; }

  /* 1ère de couv dans l’overlay (spécifique fiche) */
  .pg-fiche-mobile .pg-ov-cover{
    max-width: 240px !important;
    margin: 6px auto 14px auto !important;
  }
  .pg-fiche-mobile .pg-ov-cover img{
    display:block !important;
    width:100% !important;
    height:auto !important;
  }

  /* Écrans VP dans les 2 blocs action : fluides */
  .pg-fiche-mobile .pg-vp-shell{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    --pg-col1: 0px;
    --pg-col2: 0px;
    --pg-col3: 0px;
    --pg-col4: 34%;
    --pg-col5: 33%;
    --pg-col6: 33%;
  }
  .pg-fiche-mobile .pg-vp-shell .pg-vp-grid{
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
  }

  /* Masquer COL1/COL2/COL3 (mobile fiche) + supprimer leur place */
  .pg-fiche-mobile .pg-vp-shell .pg-vp-grid .pg-vp-col.pg-vp-col1,
  .pg-fiche-mobile .pg-vp-shell .pg-vp-grid .pg-vp-col.pg-vp-col2,
  .pg-fiche-mobile .pg-vp-shell .pg-vp-grid .pg-vp-col.pg-vp-col3{
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* Sécurité : si un style externe force display:block, on cache le contenu COL3 */
  .pg-fiche-mobile .pg-vp-shell .pg-vp-grid .pg-vp-col.pg-vp-col3 *{
    display: none !important;
  }

  /* Respirations dans COL4/5/6 */
  .pg-fiche-mobile .pg-vp-shell .pg-vp-grid .pg-vp-col4,
  .pg-fiche-mobile .pg-vp-shell .pg-vp-grid .pg-vp-col5,
  .pg-fiche-mobile .pg-vp-shell .pg-vp-grid .pg-vp-col6{
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* Blocs action : titres fixes (pas cliquables) */
  .pg-fiche-mobile .pg-acc-sum{
    cursor: default !important;  /* supprime la “main” */
  }

  /* Séparateurs + suppression du blanc final */
  .pg-fiche-mobile .pg-acc:last-child{ margin-bottom: 0 !important; }
  .pg-fiche-mobile{ margin-bottom: 0 !important; padding-bottom: 0 !important; }
}

/*  Blocs action — fiche mobile uniquement (évite effets de bord ailleurs) */

@media (max-width:969px){

  /* Blocs action */
  .pg-fiche-mobile .pg-acc{
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .pg-fiche-mobile .pg-acc-sum{
    list-style: none !important;
    cursor: default !important;
    padding: 4px 0 !important; /* espace après le titre */

    font-size: 1.25rem !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    color: #111 !important;
    background: #fff !important;

    user-select: none !important;
  }

  /* Pas de triangle à gauche */
  .pg-fiche-mobile .pg-acc-sum::before{
    content: none !important;
  }

  .pg-fiche-mobile .pg-acc-body{
    padding: 10px 0 !important;
  }

  /* Séparateurs “FAQ” (mobile fiche) */
  .pg-fiche-mobile .pg-acc::before{
    content: "" !important;
    display: block !important;
    height: 1px !important;
    background: #FFC000 !important;
    margin: 2px 0 !important;  /* espace au-dessus la bordure médiane et haute */
  }

  .pg-fiche-mobile .pg-acc:last-child::after{
    content: "" !important;
    display: block !important;
    height: 1px !important;
    background: #FFC000 !important;
    margin: 12px 0 0 0 !important;
  }

  /* Réduire l’espace avant le footer (au bon niveau) */
  .pg-fiche-page{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .pg-fiche-mobile{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .pg-fiche-mobile .pg-acc:last-child,
  .pg-fiche-mobile .pg-acc:last-child .pg-acc-body{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Fiche mobile : éviter la coupe du CTA sur petits écrans (≈420) */
.pg-fiche-mobile .pg-vp-shell .pg-vp-grid .pg-vp-col6{
  padding-left: 6px !important; /* au lieu de 12 */
  }
   
  /* ===== Entête fiche éditoriale — mobile (<970) : compact comme la modale ===== */

  /* Empêche l'effet "éclaté" entre 420 et 970 : on plafonne et on centre */
  .pg-fiche-mobile .pg-fm-head{
    max-width: 440px !important;
    margin: 0 auto !important;
    padding: 10px 8px 0 8px !important;
    box-sizing: border-box !important;
  }

  /* H2 : vrai titre de section, centré (et visuellement distinct du titre produit) */
.pg-fiche-mobile .pg-fm-h2{
  margin: -12px 0 20px 0 !important;   /* plus d'air comme tes pages édito */
  text-align: center !important;

  font-size: 2rem !important;      /* “vrai” niveau H2 visuel */
  line-height: 1.2 !important;
  font-weight: 600 !important;
  color: #111 !important;
}

  /* Titres produit : proches de la modale VP (pas trop gros) */
  .pg-fiche-mobile .pg-fm-titres{
    text-align: center !important;
    margin: 0 0 10px 0 !important;
  }
  .pg-fiche-mobile .pg-fm-titre{
    font-size: 1.55rem !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
    margin: 0 0 6px 0 !important;
    color: #111 !important;
  }
  .pg-fiche-mobile .pg-fm-soustitre{
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    color: #444 !important;
  }

  /* Lien "4e de couverture" : utiliser lnk-stylise (déjà défini dans 20-typographie.css) */
  .pg-fiche-mobile .pg-fm-4e{
    text-align: center !important;
    margin: 14px 0 18px 0 !important;
  }
  .pg-fiche-mobile .pg-fm-4e-link{
    cursor: pointer !important;
  }
  .pg-fiche-mobile .pg-fm-4e-link.lnk-stylise{
    display: inline-block !important;
    margin: 0 auto !important;
  }

  /* Deux colonnes : centrées, compactes */
  .pg-fiche-mobile .pg-fm-grid2{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    align-items: start !important;
    justify-items: center !important;      /* centre le contenu des colonnes */
    margin: 12px 0 0 0 !important;
  }

  .pg-fiche-mobile .pg-fm-col{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;       /* centrage horizontal */
    justify-content: flex-start !important; /* départ en haut (anti “centrage vertical”) */
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .pg-fiche-mobile .pg-fm-infos{
    margin-top: 0 !important;
  }

  .pg-fiche-mobile .pg-fm-tech{
    margin-top: 0 !important; /* sécurité (certaines feuilles ajoutent une marge) */
  }
  /* Réglage fin : décalage vertical du bloc infos (colonne gauche) */
.pg-fiche-mobile{
  --pg-fm-infos-nudge: 3px; /* ajuste ici : 0px à 12px */
}

.pg-fiche-mobile .pg-fm-col-infos .pg-fm-infos{
  margin-top: var(--pg-fm-infos-nudge) !important;
}
  
    /* Filet vertical entre les 2 colonnes */
  .pg-fiche-mobile .pg-fm-col-tech{
    border-left: 1px solid #BDBDBD !important;
    padding-left: 12px !important;
  }

  /* Colonne gauche (infos éditoriales) : centrée comme en modale */
  .pg-fiche-mobile .pg-fm-infos{
    text-align: center !important;
    font-size: 1.0rem !important;
    line-height: 1.25 !important;
    font-style: italic !important;
    color: #444 !important;
  }

  /* Tableau poids/taille : compact + traits internes (comme la table "pg-vp-i-x") */
  .pg-fiche-mobile .pg-fm-tech{
    width: auto !important;               /* reste compact */
    margin: 0 auto !important;            /* centré dans la colonne */
    border-collapse: collapse !important;
    table-layout: auto !important;
    font-size: 0.95rem !important;
    line-height: 1.15 !important;
  }

  .pg-fiche-mobile .pg-fm-tech td{
    padding: 2px 6px !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    border-right: 1px solid #BDBDBD !important;
    border-bottom: 1px solid #BDBDBD !important;
  }
  .pg-fiche-mobile .pg-fm-tech tr td:last-child{
    border-right: 0 !important;
  }
  .pg-fiche-mobile .pg-fm-tech tr:last-child td{
    border-bottom: 0 !important;
  }

  .pg-fiche-mobile .pg-fm-tech-l{
    color: #666 !important;
    text-align: left !important;
    padding-right: 10px !important;
  }
  .pg-fiche-mobile .pg-fm-tech-v{
    text-align: left !important;          /* compact, comme ta table modale */
    color: #111 !important;
  }

  /* Rupture très étroite : 1 colonne seulement (tu as déjà mis 360) */
  @media (max-width: 360px){
    .pg-fiche-mobile .pg-fm-grid2{
      grid-template-columns: 1fr !important;
    }
  }

 
}


/* =======================================================

C-ancre - FICHE ÉDITORIALE (spécificités modale)

========================================================= */

/* LIST PAPER — liens vers fiche éditoriale (visuel + titre)
   Neutraliser toute "boîte" ajoutée par <a> */
.pg-acces-paper a.pg-open-modal{
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  box-shadow: none;
  outline: none;
  text-decoration: none;
}
/* LIST PAPER — titre cliquable : noir → jaune au hover */
.pg-acces-paper a.pg-open-modal .pg-vp-i-title{
  color: #444;
}

.pg-acces-paper a.pg-open-modal:hover .pg-vp-i-title{
  color: #FFC000;
}
/*    Objectif :
   - supprimer le cadre interne (double boîte)
   - reporter la largeur de référence sur la vraie modale */

/* 1) Supprimer le cadre interne de la fiche QUAND elle est dans une modale */
.pg-modal .pg-fiche-page,
.pg-modal .pg-fiche-grid{
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* 2) Donner à la VRAIE modale la largeur du cadre jaune "édition page" */
/* MODALE (PG) — réduire la largeur de la vraie boîte
   DOM confirmé : .pg-modal-overlay (flex) > .pg-modal */
.pg-modal-overlay{
  justify-content: center !important; /* empêche l'étirement horizontal */
}

/* IMPORTANT :
   - Par défaut, la modale "SCREEN" (PAPER/DOWNLOAD) garde sa largeur (926px)
   - On ne réduit à 780px QUE la modale "fiche éditoriale" via une classe sur l’overlay */
.pg-modal-overlay.pg-kind-fiche > .pg-modal{
  flex: 0 1 780px !important;   /* largeur cible */
  width: 90vw !important;       /* responsive */
  max-width: 780px !important;  /* plafond */
}


/* FICHE ÉDITORIALE — en MODALE
   Supprimer les liens "Téléchargement libre" et "Version papier" */
.pg-modal .pg-fiche-page a{
  display: none !important;
}


/* =======================================================

D-ancre - PG-MODAL (socle générique : overlay/shell/close/body)

========================================================= */

/* MODALE = skin stable (indépendant du contenu injecté) */
.pg-modal{
  box-sizing: border-box !important;
  width: 926px !important;               /* bordure incluse */
  max-width: calc(100vw - 40px) !important;
  border: 3px solid #FFC000 !important;
  border-radius: 8px !important;
  background: #fff !important;
  position: relative !important;
  overflow: hidden !important;
}

/* On supprime la “barre de titre” interne (si injectée) */
.pg-modal .pg-modal-title{ display:none !important; }

.pg-modal .pg-modal-head{
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Croix : 28×28, à 6px du bord haut/droit (mémo) */
.pg-modal .pg-modal-close{
  position: absolute !important;
  top: 0px !important;
  right: 0px !important;

  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 0 !important;
  background: transparent !important;
  color: #000 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  z-index: 50 !important;
}

/* Corps : aucun padding, pas de scroll interne (la GRILLE est “indéformable”) */
.pg-modal .pg-modal-body{
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Cas “Chargement…” / “Erreur…” (on garde lisible) */
.pg-modal .pg-modal-body > p{
  margin: 0 !important;
  padding: 14px 18px !important;
  text-align: center !important;
}

 /* =======================================================

E-ancre - GRILLE PAPER (indéformable) — organisation “mémo”
- E0 Géométrie (2 lignes / 6 colonnes) + variables de largeurs
- E1 Règles communes (cases, centrages, paddings HT/BS)
- E2 Case par case : COL1, COL2HT, COL2BS, ... COL6HT, COL6BS
- E3 Contrôles (select/input) + disabled

========================================================= */

/* ---------------------------
   E0 — Géométrie (variables)
   --------------------------- */

.pg-vp-shell{
  box-sizing: border-box !important;
  width: 920px !important;
  height: 86px !important;
  padding: 4px !important;              /* zone utile interne = 912×78 */
  overflow: hidden !important;
  background: #fff !important;

  /* Largeurs colonnes — tu joues ici */
  --pg-col1: 78px;
  --pg-col2: 284px;
  --pg-col3: 180px;
  --pg-col4: 120px;
  --pg-col5: 116px;
  --pg-col6: 134px;

  /* Hauteurs lignes */
  --pg-row: 39px;                       /* HT et BS */
}

.pg-vp-shell .pg-vp-grid{
  box-sizing: border-box !important;
  width: 912px !important;
  height: 78px !important;

  display: grid !important;
  grid-template-columns: var(--pg-col1) var(--pg-col2) var(--pg-col3) var(--pg-col4) var(--pg-col5) var(--pg-col6) !important;
  grid-template-rows: var(--pg-row) var(--pg-row) !important;
  gap: 0 !important;
}

/* ---------------------------
   E1 — Règles communes “cases”
   --------------------------- */

/* Chaque colonne ne doit jamais forcer la largeur (anti débordements) */
.pg-vp-shell .pg-vp-grid > *{
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Padding vertical commun “mémo” */
.pg-vp-shell .pg-vp-grid .pg-vp-ht{ padding-top: 1px !important; }
.pg-vp-shell .pg-vp-grid .pg-vp-bs{ padding-bottom: 1px !important; }

/* Utilitaires : contenu 1 ligne centré verticalement dans sa “case” */
.pg-vp-shell .pg-vp-grid .pg-vp-center{
  display: flex !important;
  align-items: center !important;
}

/* ---------------------------
   E2 — COL1 (visuel) — 78×78
   --------------------------- */

.pg-vp-shell .pg-vp-grid .pg-vp-col1{
  grid-column: 1;
  grid-row: 1 / span 2;

  width: 78px !important;
  height: 78px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.pg-vp-shell .pg-vp-grid .pg-vp-col1 img{
  width: auto !important;
  height: auto !important;
  max-width: 78px !important;
  max-height: 78px !important;
  object-fit: contain !important;
  display: block !important;
  background: #fff !important;
  border: 1px solid #999 !important;
  box-sizing: border-box !important;
}

/* --------------------------------------
   E2 — COL2 (titres) — padding L/R 4 px
   Cases : COL2HT / COL2BS
   -------------------------------------- */

.pg-vp-shell .pg-vp-grid .pg-vp-col2{
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: 1px 0px 0px 12px !important;

  display: grid !important;
  grid-template-rows: var(--pg-row) var(--pg-row) !important;
  text-align: center !important;
}

/* COL2HT */
.pg-vp-shell .pg-vp-grid .pg-vp-col2 .pg-vp-ht{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* COL2BS */
.pg-vp-shell .pg-vp-grid .pg-vp-col2 .pg-vp-bs{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Titre : 2 lignes max, ellipsis (mémo §11) */
.pg-vp-shell .pg-vp-grid .pg-vp-i-title{
  font-size: 1.6rem !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  max-height: 2.5em !important;
}

/* Sous-titre : 2 lignes max, ellipsis (mémo §11) */
.pg-vp-shell .pg-vp-grid .pg-vp-i-subtitle{
  font-size: 1.25rem !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  max-height: 2.6em !important;
}

/* --------------------------------------
   E2 — COL3 (infos) — padding L/R 4 px
   Cases : COL3HT / COL3BS
   -------------------------------------- */

.pg-vp-shell .pg-vp-grid .pg-vp-col3{
  grid-column: 3;
  grid-row: 1 / span 2;
  padding: 1px 12px 0px 0px !important;

  display: grid !important;
  grid-template-rows: var(--pg-row) var(--pg-row) !important;
}

/* COL3HT : centré verticalement ET horizontalement dans la case (39px) */
.pg-vp-shell .pg-vp-grid .pg-vp-col3 .pg-vp-ht{
  height: var(--pg-row) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;     /* <- centre horizontal */
  text-align: center !important;
}

/* COL3BS : centré verticalement ET horizontalement dans la case (39px) */
.pg-vp-shell .pg-vp-grid .pg-vp-col3 .pg-vp-bs{
  height: var(--pg-row) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;     /* <- centre horizontal */
}

/* Infos éditoriales : 2 lignes max, italic (mémo §11) */
.pg-vp-shell .pg-vp-grid .pg-vp-i-editorial{
  font-size: 1.05rem !important;
  line-height: 1.35 !important;
  font-style: italic !important;
  color: #444 !important;
  letter-spacing: 0.01em !important;

  text-align: center !important;
  padding-right: 2px !important;          /* <- évite le “dernier caractère mangé” */

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  max-height: 2.7em !important;
}

/* Bloc infos complémentaires (parent) — centré dans la case */
.pg-vp-shell .pg-vp-grid .pg-vp-i-extra{
  width: 100% !important;
  height: 100% !important;

  display: flex !important;
  align-items: center !important;          /* <- centre vertical */
  justify-content: center !important;      /* <- centre horizontal */

  font-size: 0.95rem !important;
  line-height: 1.25 !important;
}

/* Table 2×2 : plus lisible + croix grise */
.pg-vp-shell .pg-vp-grid .pg-vp-i-x{
  border-collapse: collapse !important;

  display: inline-table !important;   /* devient un “objet” centré */
  width: auto !important;             /* ne remplit plus la case */
  table-layout: auto !important;

  font-size: 0.92em !important;
  line-height: 1.15 !important;

  margin: 0 auto !important;          /* centre horizontal */
}


/* Cellules : un peu d’air + traits internes */
.pg-vp-shell .pg-vp-grid .pg-vp-i-x td{
  padding: 1px 2px !important;             /* <- moins serré */
  vertical-align: middle !important;
  white-space: nowrap !important;

  border-right: 1px solid #BDBDBD !important;
  border-bottom: 1px solid #BDBDBD !important;
}

/* Pas de bordure à droite sur la 2e colonne */
.pg-vp-shell .pg-vp-grid .pg-vp-i-x td:nth-child(2){
  border-right: 0 !important;
}

/* Pas de bordure en bas sur la 2e ligne */
.pg-vp-shell .pg-vp-grid .pg-vp-i-x tr:nth-child(2) td{
  border-bottom: 0 !important;
}

/* Alignements internes (mémo : libellés/valeurs à gauche) */
.pg-vp-shell .pg-vp-grid .pg-vp-i-x .pg-vp-i-l,
.pg-vp-shell .pg-vp-grid .pg-vp-i-x .pg-vp-i-v{
  text-align: left !important;
}


/* --------------------------------------
   E2 — COL4 (langue/quantité) — padding L/R 4 px
   Cases : COL4HT / COL4BS
   -------------------------------------- */

.pg-vp-shell .pg-vp-grid .pg-vp-col4{
  grid-column: 4;
  grid-row: 1 / span 2;
  padding: 0 4px !important;

  display: grid !important;
  grid-template-rows: var(--pg-row) var(--pg-row) !important;
}

/* COL4HT et COL4BS : label gauche / contrôle droite */
.pg-vp-shell .pg-vp-grid .pg-vp-col4 .pg-vp-row{
  height: var(--pg-row) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
}

/* --------------------------------------
   E2 — COL5 (prix) — padding L/R 1 px
   Cases : COL5HT / COL5BS
   -------------------------------------- */

.pg-vp-shell .pg-vp-grid .pg-vp-col5{
  grid-column: 5;
  grid-row: 1 / span 2;
  padding: 0 12px !important;

  display: grid !important;
  grid-template-rows: var(--pg-row) var(--pg-row) !important;
}

/* COL5 — libellés prix sur 2 lignes (mémo) */
.pg-vp-shell .pg-vp-grid .pg-vp-col5 .pg-vp-label{
  display: block !important;
  max-width: 40px !important;       /* force le retour à la ligne */
  white-space: normal !important;
  line-height: 1.05 !important;
  text-align: left !important;
}

/* COL5HT et COL5BS : libellé gauche / montant droite */
.pg-vp-shell .pg-vp-grid .pg-vp-col5 .pg-vp-row{
  height: var(--pg-row) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
}
/* Prix unitaire : gris (pas jaune) */
.pg-vp-shell .pg-vp-grid .pg-vp-col5 .pg-vp-unit .woocommerce-Price-amount,
.pg-vp-shell .pg-vp-grid .pg-vp-col5 .pg-vp-unit .amount,
.pg-vp-shell .pg-vp-grid .pg-vp-col5 .pg-vp-unit bdi{
  color: #555 !important;
  font-weight: 400 !important; /* ou 500 si tu veux un très léger appui */
}

/* Montant total en gras 500 (mémo) */
.pg-vp-shell .pg-vp-grid .pg-vp-col5 .pg-vp-total-price{
  font-weight: 510 !important;
}

/* --------------------------------------
   E2 — COL6 (action) — padding gauche 4 / droite 0
   Cases : COL6HT (format) / COL6BS (CTA)
   -------------------------------------- */

.pg-vp-shell .pg-vp-grid .pg-vp-col6{
  grid-column: 6;
  grid-row: 1 / span 2;

  padding-left: 12px !important;
  padding-right: 0 !important;

  display: grid !important;
  grid-template-rows: var(--pg-row) var(--pg-row) !important;

  justify-items: start !important; /* collé à gauche */
  align-items: center !important;
}

.pg-vp-shell .pg-vp-grid .pg-vp-col6 .pg-vp-row{
  height: var(--pg-row) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* ---------------------------
   E3 — Libellés & contrôles
   --------------------------- */

/* Libellés (Langue/Quantité/Prix...) */
.pg-vp-shell .pg-vp-grid .pg-vp-label,
.pg-vp-shell .pg-vp-grid .pg-vp-row label{
  margin: 0 !important;
  padding: 0 !important;

  font-size: 12px !important;
  line-height: 1.05 !important;
  color: #555 !important;
  font-weight: 400 !important;
}

/* Contrôles : skin commun (mémo) — verrouillage hauteur */
.pg-vp-shell .pg-vp-grid select,
.pg-vp-shell .pg-vp-grid input[type="number"]{
  box-sizing: border-box !important;

  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;

  padding: 0 6px !important;
  line-height: 28px !important;        /* force la hauteur perçue */
  font-size: 12px !important;          /* cohérent libellés */
  color: #555 !important;

  border: 1px solid #FFC000 !important;
  border-radius: 4px !important;
  background-color: #fff !important;

  -webkit-appearance: none !important; /* neutralise styles thème/navigateur */
  -moz-appearance: none !important;
  appearance: none !important;
}
/* Quantité : réactiver les flèches et les rendre visibles (WebKit) */
.pg-vp-shell .pg-vp-grid input[type="number"]{
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;
  appearance: auto !important;
}

.pg-vp-shell .pg-vp-grid input[type="number"]::-webkit-inner-spin-button,
.pg-vp-shell .pg-vp-grid input[type="number"]::-webkit-outer-spin-button{
  opacity: 1 !important;
  height: 28px !important;
}

/* Quantité : réactiver les flèches natives */
.pg-vp-shell .pg-vp-grid input[type="number"]{
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;
  appearance: auto !important;
}

/* SELECT — flèche ajustée (plus petite, plus claire, bien contenue) */
.pg-vp-shell .pg-vp-grid select{
  background-color: #fff !important;

  background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23777' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
  linear-gradient(#fafafa,#fafafa) !important;
  background-repeat: no-repeat, no-repeat !important;

  /* flèche centrée dans son “cartouche” */
  background-position:
    calc(100% - 10px) 50%,
    calc(100% - 4px) 50% !important;

  /* tailles réduites */
  background-size:
    8px 5px,
    16px 18px !important;

  padding-right: 20px !important; /* ajuste l’espace sans débordement */
}


/* Désactivé : bordure grise, pas d’opacité */
.pg-vp-shell .pg-vp-grid select:disabled,
.pg-vp-shell .pg-vp-grid input:disabled{
  opacity: 1 !important;
  border-color: #BDBDBD !important;
  color: #777 !important;
  cursor: default !important;
}
/* Readonly : même rendu que “désactivé” (bordure grise) */
.pg-vp-shell .pg-vp-grid input[readonly]{
  opacity: 1 !important;
  border-color: #BDBDBD !important;
  color: #777 !important;
  background-color: #fff !important;
}


/* Largeurs fixes contrôles — verrouillage (résiste aux styles thème/plugins) */
.pg-vp-shell .pg-vp-grid .pg-vp-col4 select,
.pg-vp-shell .pg-vp-grid .pg-vp-col4 input#pg-vp-qty{
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  flex: 0 0 56px !important;        /* empêche l’étirement dans flex */
  inline-size: 56px !important;     /* certains thèmes override width */
  text-align: center !important;
  box-sizing: border-box !important;
}

.pg-vp-shell .pg-vp-grid .pg-vp-col6 .pg-vp-format select{
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  flex: 0 0 68px !important;
  inline-size: 68px !important;
  box-sizing: border-box !important;
}


/* Bouton CTA — gabarit VP local (mémo) */
.pg-vp-shell .pg-vp-grid .pg-vp-col6 .btn-action.pg-vp-select{
  width: 112px !important;
  height: 24px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
  line-height: 1 !important;
  
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;

}

/* CTA (LIST + écrans) — couleurs stables sur tous états (évite "tout noir" après clic) */
.pg-vp-shell .pg-vp-grid .pg-vp-col6 .btn-action.pg-vp-select{
  background: #000 !important;
  color: #FFC000 !important;
  -webkit-text-fill-color: #FFC000 !important;
}

.pg-vp-shell .pg-vp-grid .pg-vp-col6 .btn-action.pg-vp-select:hover,
.pg-vp-shell .pg-vp-grid .pg-vp-col6 .btn-action.pg-vp-select:focus,
.pg-vp-shell .pg-vp-grid .pg-vp-col6 .btn-action.pg-vp-select:focus-visible,
.pg-vp-shell .pg-vp-grid .pg-vp-col6 .btn-action.pg-vp-select:active{
  background: #000 !important; /* on reste noir */
  color: #FFC000 !important;   /* texte reste jaune */
  -webkit-text-fill-color: #FFC000 !important;
  outline: 0 !important;
}


/* CTA (VP local) : taille de police plus petite */
.pg-vp-shell .pg-vp-grid .pg-vp-col6 .btn-action.pg-vp-select{
  font-size: 10px !important;     /* ajuste ici si besoin */
  letter-spacing: 0.085em !important;
}

/* =======================================================

F-ancre - GRILLE DOWNLOAD

========================================================= */

/* DOWNLOAD — surcharges minimales vs PAPER
   Objectif :
   - garder la même géométrie indéformable (E0–E3)
   - masquer le placeholder FORMAT de PAPER
   - conserver COL5 (prix) vide sans bouger la grille
*/

/* PAPER contient une ligne placeholder .pg-vp-format.pg-vp-empty (HT COL6).
   En DOWNLOAD, le PHP injecte le vrai <select> FORMAT : on masque le placeholder.
*/
/* DOWNLOAD — supprimer totalement la ligne placeholder (ne doit occuper AUCUNE place) */
.pg-ecran-download .pg-vp-row.pg-vp-format.pg-vp-empty{
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}





/* =======================================================

G-ancre - GRILLE RESOURCE

========================================================= */

/* =======================================================

H-ancre - LIST (skin) — mise en page générale
Objectifs :
- LIST alignée sur la GRILLE (920) et centrée gauche/droite
- neutraliser les paddings latéraux OceanWP sur les pages LIST
- filets horizontaux 2px #FFC000 : ouverture / inter-items / fermeture
- NE JAMAIS toucher au padding du .pg-vp-shell (indéformable)

========================================================= */

/* Pages contenant une LIST → neutraliser le padding latéral du thème (comme pour .pg-grille-editoriale) */
body:has(.pg-acces-list) #content-wrap.container{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body:has(.pg-acces-list) #primary.content-area.clr{
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Conteneur LIST : largeur + centrage gauche/droite */
.pg-acces-list{
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto !important;

  border-top: 2px solid #FFC000 !important;    /* ouverture */
  border-bottom: 2px solid #FFC000 !important; /* fermeture */
  overflow: visible !important;                /* indispensable pour le ::before en top:-2px */
}

/* LIST — éviter le “saut” de centrage en MID (970–1100)
   On garde la LIST centrée même si la largeur utile devient <920. */
   
/* Chaque item LIST = 1 shell (grille) */
.pg-acces-list > .pg-vp-shell{
  display: block !important;
  position: relative !important;
  margin: 0 auto !important;
  width: 920px !important;
  overflow: visible !important; /* pour afficher le filet dans l'interstice */
}

/* MID 970–1100 : éviter le décrochage quand la largeur utile < 920 */
@media (max-width:1100px) and (min-width:970px){

  /* Le shell ne doit jamais dépasser son parent */
  .pg-acces-list > .pg-vp-shell{
    width: 100% !important;
    max-width: 920px !important;
  }

  /* (option sécurité) : la grille interne suit aussi */
  .pg-acces-list .pg-vp-grid{
    width: 100% !important;
    max-width: 912px !important;
  }
}

/* Interstice réel de 2px ENTRE deux grilles */
.pg-acces-list > .pg-vp-shell + .pg-vp-shell{
  margin-top: 2px !important;
}

/* Filet DANS l’interstice (donc il “prend” 2px entre les grilles) */
.pg-acces-list > .pg-vp-shell + .pg-vp-shell::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -2px !important;          /* exactement dans l'interstice créé par margin-top */
  height: 2px !important;
  background: #FFC000 !important;
  z-index: 10 !important;
  pointer-events: none !important;
}




/* =======================================================

I-ancre - ACCES PAPER

========================================================= */


/* =======================================================

J-ancre - ACCES DOWNLOAD

========================================================= */

/* =========================================================
   J — LIST DOWNLOAD
   Titre cliquable : noir au repos, jaune au survol
   ========================================================= */

/* État normal */
.pg-acces-download a.pg-open-modal .pg-vp-i-title{
  color: #444 !important;
}

/* Survol du lien : le titre passe en jaune */
.pg-acces-download a.pg-open-modal:hover .pg-vp-i-title,
.pg-acces-download a.pg-open-modal:focus .pg-vp-i-title{
  color: #FFC000 !important;
}


/* =======================================================

K-ancre - ACCES RESOURCE

========================================================= */

/* =========================================================
   MODALE RESOURCE — CARRÉ FIXE 480×480
   - bande blanche périphérique (épaisseur 24px)
   - croix en haut-droite DANS la bande
   - titres tout en bas DANS la bande : TITRE gauche / SOUS-TITRE droite
   - visuel : carré FIXE, centré horizontalement & verticalement
   ========================================================= */

.pg-modal-overlay.pg-kind-resource > .pg-modal{
  --pg-band: 24px;                 /* bande périphérique */
  --pg-visual: 432px;              /* carré visuel fixe (480 - 2×24) */
  position: relative !important;
  width: 480px !important;
  height: 480px !important;
  max-width: 480px !important;
  max-height: 480px !important;
  box-sizing: border-box !important; /* inclut la bordure jaune dans les 480 */
  overflow: hidden !important;
  box-sizing: border-box;
}

/* le head ne doit pas ajouter de hauteur */
.pg-modal-overlay.pg-kind-resource .pg-modal-head{
  height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.pg-modal-overlay.pg-kind-resource .pg-modal-title{
  display: none !important;
}

/* body = “surface blanche” 480×480 avec bande périphérique */
.pg-modal-overlay.pg-kind-resource .pg-modal-body{
    position: relative !important;
  height: 100% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: #fff !important;
  overflow: hidden !important;
}

/* croix dans le coin haut-droite, dans la bande */
.pg-modal-overlay.pg-kind-resource .pg-modal-close{
  position: absolute !important;
  top: 0px !important;
  right: 0px !important;
  z-index: 50 !important;
}

/* conteneur HTML renvoyé par l’endpoint */
.pg-modal-overlay.pg-kind-resource .pg-resource-view{
  position: relative;
  height: 100%;
}

/* VISUEL : carré fixe centré (calque au-dessus) */
.pg-modal-overlay.pg-kind-resource .pg-resource-visual{
  position: absolute;
  top: var(--pg-band);
  left: var(--pg-band);
  right: var(--pg-band);
  height: var(--pg-visual);
  transform: none;

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 10;
}

/* image : conserve proportions, pas de déformation */
.pg-modal-overlay.pg-kind-resource .pg-resource-visual img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* FOOTER : tout en bas DANS la bande blanche (pas sous le visuel) */
.pg-modal-overlay.pg-kind-resource .pg-resource-footer{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: var(--pg-band);
  padding: 0 var(--pg-band);
  background: #fff;
  z-index: 30;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 5px;
  gap: 12px;

  line-height: 1;
  overflow: hidden;
}

/* 1 seule ligne + ellipsis (évite “2 lignes”) */
.pg-modal-overlay.pg-kind-resource .pg-resource-title,
.pg-modal-overlay.pg-kind-resource .pg-resource-subtitle{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* TITRE à gauche / SOUS-TITRE à droite */
.pg-modal-overlay.pg-kind-resource .pg-resource-title{
  text-align: left;
  flex: 1 1 auto;
  font-size: 11px;
  color: #444;
  font-weight: 400;
}
.pg-modal-overlay.pg-kind-resource .pg-resource-subtitle{
  text-align: right;
  flex: 0 1 auto;
  font-size: 11px;
  color: #444;
  font-weight: 400;
}