/* ==================================================================
   Ruban Pro — pages d'information et pages réglementaires (modèle
   « Page d'information ») : livraison, retours, paiement, CGV,
   conditions des produits personnalisés, mentions légales,
   confidentialité, cookies, contact, à propos.
   Reprise de la maquette validée maquettes/j-nouveau-style/pages.css ;
   complète nouveau.css (mêmes variables, préfixe « j-pg- »).
   ================================================================== */

/* ------------------------------------------------------------ en-tête de page */
.j-pg-tete { padding-block: 22px 34px; border-bottom: 1px solid var(--j-trait); background: var(--j-fond); }
.j-pg-tete h1 { margin-top: 18px; color: var(--j-encre); font: 800 clamp(30px, 3.6vw, 44px)/1.08 var(--j-police); letter-spacing: -.035em; }
.j-pg-tete .j-sous { max-width: 68ch; margin-top: 10px; font-size: 16.5px; }
.j-pg-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; color: var(--j-gris); font-size: 13px; }
.j-pg-meta span { display: inline-flex; align-items: center; gap: 6px; }
.j-pg-meta .j-ico { width: 16px; height: 16px; color: var(--j-bleu); }

/* Note de maquette : ce qui vient de l'administration */
.j-pg-note { display: flex; gap: 12px; max-width: 900px; margin-top: 20px; padding: 12px 16px; border: 1px solid #f0dd9c; border-radius: var(--j-r); background: var(--j-ambre); color: #5b4a17; font-size: 13.5px; line-height: 1.5; }
.j-pg-note .j-ico { flex: none; width: 19px; height: 19px; margin-top: 1px; color: #c27c0e; }
.j-pg-note b { color: #3f3310; }

/* Donnée à renseigner dans l'administration */
.j-pg-vide {
  display: inline; padding: 1px 7px; border: 1px dashed #d9a52b; border-radius: 4px;
  background: #fff8e1; color: #7a5a06; font-size: .92em; font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.j-pg-vide::before { content: "⟨"; margin-right: 2px; opacity: .6; }
.j-pg-vide::after { content: "⟩"; margin-left: 2px; opacity: .6; }

/* ------------------------------------------------------------ texte + sommaire */
.j-pg-corps { padding-block: 40px 64px; }
.j-pg-grille { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; }
.j-pg-grille--seule { grid-template-columns: minmax(0, 1fr); max-width: 820px; }

.j-pg-sommaire { position: sticky; top: 92px; }
.j-pg-sommaire h2 { margin-bottom: 10px; color: var(--j-gris); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.j-pg-sommaire ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: s; border-left: 2px solid var(--j-trait); }
.j-pg-sommaire a {
  display: block; margin-left: -2px; padding: 6px 0 6px 14px; border-left: 2px solid transparent;
  color: var(--j-texte); font-size: 14px; line-height: 1.35; text-decoration: none;
}
.j-pg-sommaire a:hover { color: var(--j-bleu); }
.j-pg-sommaire a[aria-current="true"] { border-left-color: var(--j-bleu); color: var(--j-bleu); font-weight: 700; }
.j-pg-sommaire details > summary { display: none; }

.j-pg-texte { max-width: 760px; font-size: 15.5px; line-height: 1.7; }
.j-pg-texte > h2:not(:first-child) { margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--j-trait); }
.j-pg-texte > :first-child { margin-top: 0; }
.j-pg-texte h2 { scroll-margin-top: 92px; color: var(--j-encre); font: 800 23px/1.2 var(--j-police); letter-spacing: -.02em; }
.j-pg-texte h2 small { display: block; margin-bottom: 4px; color: var(--j-bleu); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.j-pg-texte h3 { margin-top: 22px; color: var(--j-encre); font: 700 17px/1.3 var(--j-police); }
.j-pg-texte p, .j-pg-texte ul, .j-pg-texte ol, .j-pg-texte dl { margin: 12px 0 0; }
.j-pg-texte ul, .j-pg-texte ol { padding-left: 22px; }
.j-pg-texte li + li { margin-top: 6px; }
.j-pg-texte li::marker { color: var(--j-bleu); }
.j-pg-texte a:not(.j-btn) { color: var(--j-bleu); font-weight: 600; text-underline-offset: 3px; }
.j-pg-texte b, .j-pg-texte strong { color: var(--j-encre); }

/* Liste de définitions (identité, hébergeur…) */
.j-pg-fiche { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); margin-top: 16px !important; border: 1px solid var(--j-trait); border-radius: var(--j-r); overflow: hidden; }
.j-pg-fiche dt, .j-pg-fiche dd { margin: 0; padding: 11px 16px; border-top: 1px solid var(--j-trait); font-size: 14.5px; }
.j-pg-fiche dt { background: var(--j-fond); color: var(--j-gris); font-weight: 600; }
.j-pg-fiche dt:first-of-type, .j-pg-fiche dt:first-of-type + dd { border-top: 0; }

/* Encadrés */
.j-pg-encadre { display: flex; gap: 12px; margin-top: 18px !important; padding: 14px 18px; border-radius: var(--j-r); background: var(--j-bleu-voile); border: 1px solid var(--j-bleu-pale); font-size: 14.5px; line-height: 1.6; }
.j-pg-encadre > .j-ico { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--j-bleu); }
.j-pg-encadre p:first-child { margin-top: 0; }
.j-pg-encadre--alerte { border-color: #f0dd9c; background: var(--j-ambre); }
.j-pg-encadre--alerte > .j-ico { color: #c27c0e; }
.j-pg-legal { margin-top: 18px !important; padding: 16px 20px; border: 1px solid var(--j-trait-2); border-radius: var(--j-r); background: #fafbfd; font-size: 14px; line-height: 1.6; }
.j-pg-legal h3 { margin-top: 0; font-size: 15px; }

/* Tableaux */
.j-pg-defile { overflow-x: auto; margin-top: 16px; border: 1px solid var(--j-trait); border-radius: var(--j-r); }
.j-pg-tableau { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.j-pg-tableau th, .j-pg-tableau td { padding: 10px 14px; border-top: 1px solid var(--j-trait); text-align: left; vertical-align: top; }
.j-pg-tableau thead th { border-top: 0; background: var(--j-fond); color: var(--j-gris); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.j-pg-tableau code { font-size: 13px; color: var(--j-encre); }

/* Cartes (modes de livraison, moyens de paiement, savoir-faire) */
.j-pg-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 18px !important; padding: 0 !important; list-style: none; }
.j-pg-cartes > li { margin: 0 !important; padding: 18px; border: 1px solid var(--j-trait); border-radius: var(--j-r-l); background: #fff; font-size: 14px; line-height: 1.55; }
.j-pg-cartes > li > .j-ico { width: 40px; height: 40px; padding: 9px; border-radius: 9px; background: var(--j-bleu-pale); color: var(--j-bleu); }
.j-pg-cartes b { display: block; margin-top: 12px; color: var(--j-encre); font-size: 15.5px; }
.j-pg-cartes p { margin-top: 4px !important; color: var(--j-gris); }
.j-pg-cartes .j-pg-etat { display: inline-block; margin-top: 10px; padding: 2px 9px; border-radius: 999px; background: var(--j-fond); color: var(--j-gris); font-size: 12px; font-weight: 600; }

/* Frise des délais */
.j-pg-frise { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 20px !important; padding: 0 !important; list-style: none; counter-reset: f; }
.j-pg-frise li { position: relative; margin: 0 !important; padding: 44px 12px 0 0; font-size: 14px; line-height: 1.45; counter-increment: f; }
.j-pg-frise li::before {
  content: counter(f); position: absolute; top: 0; left: 0; z-index: 1;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--j-bleu); color: #fff; font-size: 14px; font-weight: 800;
}
.j-pg-frise li::after { content: ""; position: absolute; top: 15px; left: 32px; right: 0; height: 2px; background: var(--j-trait-2); }
.j-pg-frise li:last-child::after { display: none; }
.j-pg-frise b { display: block; color: var(--j-encre); font-size: 15px; }
.j-pg-frise span { display: block; margin-top: 4px; color: var(--j-gris); }

/* ------------------------------------------------------------ pages liées + aide */
.j-pg-suite { padding-block: 44px; border-top: 1px solid var(--j-trait); background: var(--j-fond); }
.j-pg-suite h2 { color: var(--j-encre); font: 800 22px/1.2 var(--j-police); letter-spacing: -.02em; }
.j-pg-liens { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.j-pg-liens a {
  display: flex; align-items: center; gap: 12px; height: 100%; padding: 14px 16px;
  border: 1px solid var(--j-trait); border-radius: var(--j-r); background: #fff;
  color: var(--j-encre); font-size: 14.5px; font-weight: 600; text-decoration: none;
}
.j-pg-liens a:hover { border-color: var(--j-bleu); color: var(--j-bleu); }
.j-pg-liens a[aria-current="page"] { border-color: var(--j-bleu); background: var(--j-bleu-voile); color: var(--j-bleu); }
.j-pg-liens .j-ico { flex: none; width: 20px; height: 20px; color: var(--j-bleu); }

.j-pg-aide { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 30px; padding: 22px 26px; border-radius: var(--j-r-l); background: var(--j-nuit); color: #c5ccd8; }
.j-pg-aide b { display: block; color: #fff; font-size: 18px; }
.j-pg-aide .j-pg-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.j-pg-aide .j-btn--cadre { border-color: rgba(255, 255, 255, .3); background: transparent; color: #fff; }
.j-pg-aide .j-btn--cadre:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

/* ------------------------------------------------------------ contact */
.j-pg-contact { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.j-pg-carte { padding: 28px 30px; border: 1px solid var(--j-trait); border-radius: var(--j-r-l); background: #fff; box-shadow: var(--j-ombre); }
.j-pg-carte h2 { color: var(--j-encre); font: 800 22px/1.2 var(--j-police); letter-spacing: -.02em; }
.j-pg-form { display: grid; gap: 16px; margin-top: 18px; }
.j-pg-form textarea { width: 100%; min-height: 150px; padding: 10px 12px; border: 1px solid var(--j-trait-2); border-radius: 4px; resize: vertical; }
.j-pg-form textarea:focus { outline: none; border-color: var(--j-bleu); box-shadow: 0 0 0 3px rgba(10, 92, 255, .15); }
.j-pg-form .j-champ.est-erreur :is(input, select, textarea) { border-color: #d93a3a; }
.j-pg-form .j-pg-erreur { color: #c62828 !important; font-size: 12.5px !important; }
.j-pg-fichier { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px dashed var(--j-trait-2); border-radius: var(--j-r); background: var(--j-fond); font-size: 13.5px; }
.j-pg-fichier .j-ico { flex: none; width: 22px; height: 22px; color: var(--j-bleu); }
.j-pg-fichier input { max-width: 100%; font-size: 13px; }
.j-pg-petit { color: var(--j-gris); font-size: 13px; line-height: 1.5; }
.j-pg-petit a { color: var(--j-bleu); font-weight: 600; }
.j-pg-retour { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--j-r); background: #e3f4ec; color: #0d5c42; font-size: 14px; }
.j-pg-retour .j-ico { flex: none; width: 19px; height: 19px; }

.j-pg-coord { display: grid; gap: 14px; }
.j-pg-coord .j-pg-carte { padding: 22px 24px; box-shadow: none; }
.j-pg-coord ul { display: grid; gap: 14px; margin: 14px 0 0; padding: 0; list-style: none; }
.j-pg-coord li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.45; }
.j-pg-coord li > .j-ico { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 8px; background: var(--j-bleu-pale); color: var(--j-bleu); }
.j-pg-coord li small { display: block; color: var(--j-gris); font-size: 12.5px; }
.j-pg-raccourcis { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.j-pg-raccourcis a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border: 1px solid var(--j-trait); border-radius: var(--j-r); color: var(--j-encre); font-size: 14px; font-weight: 600; text-decoration: none; }
.j-pg-raccourcis a:hover { border-color: var(--j-bleu); color: var(--j-bleu); }
.j-pg-raccourcis .j-ico { width: 17px; height: 17px; color: var(--j-bleu); }

/* ------------------------------------------------------------ à propos */
.j-pg-heros { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.j-pg-heros__visuel { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--j-r-l); background: var(--j-fond-2); }
.j-pg-heros__visuel .rpc-rendu, .j-pg-heros__visuel canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.j-pg-heros { margin-top: 18px; }
.j-pg-heros h1 { margin-top: 0; }
.j-pg-heros .j-pg-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.j-pg-bloc { padding-block: 52px; }
.j-pg-bloc + .j-pg-bloc { border-top: 1px solid var(--j-trait); }
.j-pg-bloc--fond { background: var(--j-fond); }
.j-pg-bloc > .j-conteneur > .j-h2 + .j-sous { max-width: 64ch; }
.j-pg-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 26px 0 0; padding: 0; list-style: none; counter-reset: e; }
.j-pg-etapes li { padding: 20px; border: 1px solid var(--j-trait); border-radius: var(--j-r-l); background: #fff; font-size: 14px; line-height: 1.55; counter-increment: e; }
.j-pg-etapes li::before { content: "0" counter(e); display: block; color: var(--j-bleu); font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.j-pg-etapes b { display: block; margin-top: 8px; color: var(--j-encre); font-size: 16px; }
.j-pg-etapes p { margin-top: 4px; color: var(--j-gris); }
.j-pg-histoire { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; margin-top: 24px; }
.j-pg-a-rediger { padding: 22px 24px; border: 2px dashed #e3c469; border-radius: var(--j-r-l); background: #fffcf1; color: #5b4a17; font-size: 14.5px; line-height: 1.6; }
.j-pg-a-rediger > b { display: block; margin-bottom: 6px; color: #3f3310; }
.j-pg-a-rediger ul { margin: 8px 0 0; padding-left: 20px; }

/* Six cartes de savoir-faire : trois par ligne */
.j-pg-bloc .j-pg-cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 26px !important; }
.j-pg-coord .j-pg-raccourcis li { display: block; }

/* ------------------------------------------------------------ pied de page : liens légaux */


/* ------------------------------------------------------------ responsive */
/* À propos : proposition de texte et mosaïque de photos */
.j-pg-proposition { position: relative; }
.j-pg-proposition__etiq { display: inline-block; margin-bottom: 10px; padding: 3px 10px; border: 1.5px dashed #e3c469; border-radius: 999px; background: #fffcf1; color: #5b4a17; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.j-pg-proposition > p { max-width: 62ch; margin: 12px 0 0; font-size: 16px; line-height: 1.7; color: var(--j-texte-2, #444); }
.j-pg-histoire { align-items: center; }
.j-pg-mosaique { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 12px; margin: 0; }
.j-pg-mosaique > div { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--j-r-l); background: var(--j-fond-2); }
.j-pg-mosaique > .j-pg-mosaique__grande { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.j-pg-mosaique .rpc-rendu, .j-pg-mosaique canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.j-pg-mosaique figcaption { grid-column: 1 / -1; font-size: 13px; color: var(--j-texte-3, #777); }

/* ------------------------------------------------------------ thème */

/* Donnée vide ou paragraphe conditionnel masqué : pas de trou dans le texte. */
.j-pg-texte > p:empty, .j-pg-texte li:empty, .j-pg-texte > h2:empty, .j-pg-texte > ul:empty { display: none; }
.j-pg-vide { text-decoration: none; }

/* Questions dépliables (bloc « Détails » de l'éditeur : FAQ). */
.j-pg-texte details.wp-block-details { margin: 10px 0 0; border: 1px solid var(--j-trait); border-radius: var(--j-r-l); background: #fff; }
.j-pg-texte h2 + details.wp-block-details { margin-top: 16px; }
.j-pg-texte details.wp-block-details > summary { position: relative; padding: 14px 44px 14px 18px; color: var(--j-encre); font-weight: 700; line-height: 1.4; cursor: pointer; list-style: none; }
.j-pg-texte details.wp-block-details > summary::-webkit-details-marker { display: none; }
.j-pg-texte details.wp-block-details > summary::after { content: "+"; position: absolute; top: 50%; right: 18px; transform: translateY(-50%); color: var(--j-bleu); font-size: 22px; font-weight: 400; line-height: 1; }
.j-pg-texte details.wp-block-details[open] > summary::after { content: "−"; }
.j-pg-texte details.wp-block-details > :not(summary) { margin: 0; padding: 0 18px 14px; color: var(--j-gris); }
.j-pg-texte details.wp-block-details > ul { padding-left: 40px; }

/* Liste de liens commentés (pages Conseils et Secteurs). */
.j-pg-texte .j-pg-liste { padding: 0; list-style: none; }
.j-pg-texte .j-pg-liste > li { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--j-trait); }
.j-pg-texte .j-pg-liste > li:first-child { border-top: 1px solid var(--j-trait); }
.j-pg-texte .j-pg-liste a { display: inline-block; margin-bottom: 2px; }

/* Champs du formulaire de contact (repris de la maquette style.css). */
.j-pg-form .j-champs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 14px; }
.j-pg-form .j-champ { grid-column: span 6; display: grid; gap: 5px; align-content: start; margin: 0; }
.j-pg-form .j-champ--moitie { grid-column: span 3; }
.j-pg-form .j-champ[hidden] { display: none; }
.j-pg-form .j-champ > span { color: var(--j-texte); font-size: 13.5px; }
.j-pg-form .j-champ > span i { color: #d93a3a; font-style: normal; }
.j-pg-form .j-champ input, .j-pg-form .j-champ select { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--j-trait-2); border-radius: 4px; background: #fff; font: inherit; font-size: 14.5px; }
.j-pg-form .j-champ textarea { font: inherit; font-size: 14.5px; }
.j-pg-form .j-champ select { padding-right: 32px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c111c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 15px; -webkit-appearance: none; appearance: none; }
.j-pg-form .j-champ input:focus, .j-pg-form .j-champ select:focus { outline: none; border-color: var(--j-bleu); box-shadow: 0 0 0 3px rgba(10, 92, 255, .15); }
.j-pg-form .j-champ small { color: var(--j-gris-2); font-size: 12px; }
.j-pg-fichier[hidden] { display: none; }
.j-pg-fichier.est-erreur { border-color: #d93a3a; }
.j-pg-fichier .j-pg-erreur { color: #c62828; font-size: 12.5px; }
.j-pg-form button[aria-busy="true"] { opacity: .7; pointer-events: none; }
.j-pg-piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.j-pg-retour { margin-top: 16px; }
.j-pg-retour:focus { outline: none; }
.j-pg-retour--erreur { background: #fdecec; color: #8e1d1d; }
.j-pg-coord li a { color: var(--j-encre); font-weight: 600; }

@media (max-width: 1000px) {
  .j-pg-grille { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .j-pg-sommaire { position: static; padding: 4px 16px; border: 1px solid var(--j-trait); border-radius: var(--j-r); background: #fff; }
  .j-pg-sommaire h2 { display: none; }
  .j-pg-sommaire details > summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; color: var(--j-encre); font-size: 14.5px; font-weight: 700; cursor: pointer; list-style: none; }
  .j-pg-sommaire details > summary::-webkit-details-marker { display: none; }
  .j-pg-sommaire details > summary .j-ico { width: 18px; height: 18px; transition: transform .2s; }
  .j-pg-sommaire details[open] > summary .j-ico { transform: rotate(180deg); }
  .j-pg-sommaire ol { margin-bottom: 12px; }
  .j-pg-contact, .j-pg-heros, .j-pg-histoire { grid-template-columns: minmax(0, 1fr); }
  .j-pg-etapes, .j-pg-bloc .j-pg-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .j-pg-tete { padding-block: 14px 26px; }
  .j-pg-corps { padding-block: 26px 48px; }
  .j-pg-texte { font-size: 15px; }
  .j-pg-texte h2 { font-size: 20.5px; }
  .j-pg-fiche { grid-template-columns: minmax(0, 1fr); }
  .j-pg-fiche dt { padding-bottom: 4px; border-top: 1px solid var(--j-trait); background: none; font-size: 12.5px; }
  .j-pg-fiche dd { padding-top: 0; border-top: 0; }
  .j-pg-frise { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .j-pg-frise li { padding: 4px 0 0 46px; min-height: 32px; }
  .j-pg-frise li::after { top: 32px; bottom: -16px; left: 15px; right: auto; width: 2px; height: auto; }
  .j-pg-carte { padding: 22px 18px; }
  .j-pg-form .j-champ--moitie { grid-column: span 6; }
  .j-pg-etapes, .j-pg-bloc .j-pg-cartes { grid-template-columns: minmax(0, 1fr); }
  .j-pg-aide { padding: 20px; }
  .j-pg-bloc { padding-block: 38px; }
}