/* Gabarit enrichi des articles (extension NEWP).
   Reprend les variables et les composants de la feuille du site : --encre, --ciel,
   --jaune, --grotesque, .bouton. Rien n'est redefini ici qui existe deja la-bas. */

/* ------------------------------------------------------------------ L'essentiel */
.essentiel{margin:0 0 42px;background:var(--jaune-clair);border-radius:22px;padding:26px 30px}
.essentiel .sur-titre{display:block;font-family:var(--grotesque);font-weight:700;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--encre);margin-bottom:15px}
.essentiel ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.essentiel li{display:grid;grid-template-columns:11px 1fr;gap:13px;align-items:start;font-size:17px;line-height:1.5}
.essentiel li::before{content:"";width:11px;height:11px;margin-top:7px;border-radius:50%;background:var(--encre);opacity:.85}

/* ------------------------------------------------------------------ appel a l'action au milieu */
.encart-milieu{margin:40px 0;background:var(--ciel-pale);border:1px solid var(--ciel);border-radius:22px;padding:26px 30px;display:grid;gap:18px;justify-items:start}
.encart-milieu p{margin:0;font-size:17px;line-height:1.55}
.encart-milieu .bouton{font-size:16px}

/* ------------------------------------------------------------------ barre de fin d'article */
.actions-article{margin:44px 0 0;padding-top:28px;border-top:1px solid var(--ciel);display:grid;gap:24px}
.actions-groupe{display:grid;gap:12px}
.actions-groupe .sur-titre{font-family:var(--grotesque);font-weight:700;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--bleu)}
.actions-liste{display:flex;flex-wrap:wrap;gap:10px}
.puce-action{display:inline-flex;align-items:center;gap:.5em;padding:.62em 1.1em;border-radius:999px;border:1.5px solid var(--ciel);background:var(--blanc);color:var(--encre);font-family:var(--grotesque);font-weight:600;font-size:14.5px;line-height:1;text-decoration:none;cursor:pointer;transition:border-color .15s ease,background-color .15s ease,transform .15s ease}
.puce-action:hover{border-color:var(--bleu);background:var(--ciel-pale);transform:translateY(-1px)}
.puce-action svg{width:16px;height:16px;flex:none}
.puce-action i{width:7px;height:7px;border-radius:50%;background:var(--jaune);flex:none}
.puce-action.fait{border-color:var(--bleu);background:var(--ciel)}

/* ------------------------------------------------------------------ navigation vers l'article voisin
   Le thème pose un <span></span> vide quand il n'y a pas de voisin de ce côté, ce qui
   laissait une moitié de ligne béante et une carte seule, collée à droite et alignée
   à droite. On masque le vide, la carte restante prend toute la largeur, et la
   direction est portée par une flèche plutôt que par l'alignement du texte.
   Limité aux articles : les pages de rêve gardent le composant d'origine. */
.article-enrichi .voisins{grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin-top:44px;padding-top:30px;border-top:1px solid var(--ciel)}
.article-enrichi .voisins > span:empty{display:none}
.article-enrichi .voisins a,
.article-enrichi .voisins .suivant{display:grid;gap:9px;align-content:start;text-align:left;padding:20px 22px;border:1.5px solid var(--ciel);border-radius:20px;background:var(--ciel-pale);font-size:18px;line-height:1.32;transition:border-color .18s ease,background-color .18s ease}
.article-enrichi .voisins a:hover{border-color:var(--bleu);background:var(--blanc)}
.article-enrichi .voisins a span{display:flex;align-items:center;gap:.5em;margin:0;font-family:var(--grotesque);font-weight:700;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--bleu)}
.article-enrichi .voisins a:not(.suivant) span::before{content:"\2190";font-size:14px;letter-spacing:0}
.article-enrichi .voisins .suivant span::after{content:"\2192";font-size:14px;letter-spacing:0}

/* ------------------------------------------------------------------ rail de gauche */
.plv-rail{display:none}
.plv-rail__k{font-family:var(--grotesque);font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bleu);display:block;margin-bottom:11px}
.plv-rail__ia{display:grid;grid-template-columns:minmax(0,1fr);gap:7px}
.plv-rail__ia a{display:flex;align-items:center;gap:.55em;font-family:var(--grotesque);font-weight:600;font-size:13.5px;color:var(--encre);background:var(--blanc);border:1.5px solid var(--ciel);border-radius:11px;padding:.5em .7em;text-decoration:none;transition:border-color .18s ease,color .18s ease}
.plv-rail__ia a:hover{border-color:var(--bleu);color:var(--bleu)}
.plv-rail__ia i{width:7px;height:7px;border-radius:50%;background:var(--jaune);flex:none}
.plv-rail__partage{display:flex;flex-wrap:wrap;gap:7px}
.plv-rail__partage a,.plv-rail__partage button{width:36px;height:36px;border:1.5px solid var(--ciel);border-radius:11px;display:grid;place-items:center;color:var(--encre);background:var(--blanc);cursor:pointer;text-decoration:none;transition:border-color .18s ease,color .18s ease;padding:0}
.plv-rail__partage a:hover,.plv-rail__partage button:hover{border-color:var(--bleu);color:var(--bleu)}
.plv-rail__partage svg{width:17px;height:17px}

/* ------------------------------------------------------------------ rail de droite */
.plv-rail-d{display:none}
.plv-rail-d__k{font-family:var(--grotesque);font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bleu);display:block;margin-bottom:13px}
.plv-rail-d__cta{background:var(--encre);border-radius:20px;padding:24px 24px 22px;color:var(--blanc)}
.plv-rail-d__cta .plv-rail-d__k{color:var(--jaune)}
.plv-rail-d__cta h3{font-family:var(--grotesque);font-size:20px;line-height:1.2;color:var(--blanc);margin:0 0 9px;letter-spacing:-.01em}
.plv-rail-d__cta p{font-size:14.5px;line-height:1.5;color:#B9CBEE;margin:0 0 18px}
/* Le libellé doit tenir sur une ligne : une pastille arrondie sur deux lignes est
   disgracieuse, et c'est le bouton le plus important de la page. */
.plv-rail-d__cta .bouton{display:flex;justify-content:center;width:100%;font-size:15.5px;padding:.82em 1em;white-space:nowrap}
.plv-rail-d__tel{display:block;text-align:center;margin-top:12px;color:var(--blanc);text-decoration:none;font-family:var(--grotesque);font-weight:700;font-size:16px}
.plv-rail-d__tel:hover{color:var(--jaune)}
.plv-rail-d__boite{border:1.5px solid var(--ciel);border-radius:20px;padding:20px 22px;background:var(--blanc)}
.plv-rail-d__liens{list-style:none;margin:0;padding:0}
.plv-rail-d__liens li+li{border-top:1px solid var(--ciel)}
.plv-rail-d__liens a{display:block;padding:10px 0;color:var(--encre);text-decoration:none;font-family:var(--grotesque);font-weight:600;font-size:14.5px;line-height:1.35;transition:color .15s ease}
.plv-rail-d__liens a:hover{color:var(--bleu)}
.plv-rail-d__reves{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.plv-rail-d__reves a{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--encre)}
.plv-rail-d__vignette{width:52px;height:52px;border-radius:12px;overflow:hidden;flex:none;background:var(--ciel)}
.plv-rail-d__vignette img{width:100%;height:100%;object-fit:cover;display:block}
.plv-rail-d__titre{font-family:var(--grotesque);font-weight:600;font-size:14px;line-height:1.3}
.plv-rail-d__reves a:hover .plv-rail-d__titre{color:var(--bleu)}

/* ------------------------------------------------------------------ paliers d'affichage
   1240 px : le rail de gauche apparait, la colonne de lecture ne bouge pas.
   1440 px : les deux rails, et la colonne se resserre a 820 px, ce qui raccourcit
             les lignes et ameliore le confort de lecture.
   En dessous : une seule colonne, la barre de fin d'article fait le travail. */
/* Les rails sont des colonnes de la grille de l'article, pas des blocs flottants :
   ils commencent donc sous le heros, ne recouvrent jamais le titre, et accompagnent
   la lecture sans apparition ni animation. */
@media (min-width:1240px){
  .article-enrichi{display:grid;grid-template-columns:1fr minmax(0,900px) 1fr;align-items:start}
  /* La ligne est imposee aux trois colonnes : sans elle, le placement automatique
     renvoie le texte a la ligne suivante, sous les rails. */
  .article-enrichi > .enveloppe-lecture{grid-column:2;grid-row:1}
  .plv-rail{display:grid;gap:26px;grid-column:1;grid-row:1;justify-self:end;width:150px;margin-right:24px;position:sticky;top:96px}
  .plv-rail-d{grid-column:3;grid-row:1}
}
@media (min-width:1440px){
  .article-enrichi{grid-template-columns:1fr minmax(0,820px) 1fr}
  .article-enrichi > .enveloppe-lecture{max-width:820px}
  .plv-rail-d{display:grid;gap:16px;justify-self:start;width:252px;margin-left:28px;position:sticky;top:96px;max-height:calc(100vh - 124px);overflow:auto;scrollbar-width:none}
  .plv-rail-d::-webkit-scrollbar{display:none}
  .plv-rail-d__cta{padding:22px 22px 20px}
  .plv-rail-d__cta p{margin-bottom:16px}
  .plv-rail-d__boite{padding:18px 20px}
  .plv-rail-d__liens a{padding:9px 0}
}
@media (max-width:640px){
  .essentiel,.encart-milieu{padding:22px 20px;border-radius:18px}
  .puce-action{font-size:14px;padding:.6em .95em}
}
@media (prefers-reduced-motion:reduce){
  .puce-action{transition:none}
}