/* =========================================================================
   MUSLIMA WORK — LES PAGES JURIDIQUES

   Mentions légales, politique de confidentialité, conditions générales. Une
   publication, pas une page de site : une seule colonne de lecture, des
   filets, et rien d'autre. Aucune carte autour des paragraphes, aucune ombre,
   aucun aplat de couleur — la couleur de la marque n'intervient qu'aux liens
   et à la petite barre du sur-titre.

   Le fond est l'ivoire de la barre du site (voir header.css) : la page ne
   change pas de couleur sous elle.

   Chargée en dernier, après les feuilles publiques, comme header.css et
   footer.css : elle ne redessine rien d'autre que ce bloc.
   ========================================================================= */

/* Fond blanc, comme les autres pages du site ; le bandeau prune porte la
   couleur. Le fond de la zone du header suit (« --fond-juridique »,
   header.css). */
body:has(.jur){background:#fff}
/* Il y avait ici « body:has(.jur) .header{background:transparent} ». Cette
   règle pesait plus lourd que la règle globale de header.css — un `:has` vaut
   une classe — et vidait donc la barre de son fond sur les trois pages
   juridiques, quoi que la page ait déclaré. Le fond vient maintenant du jeton
   « --fond-juridique », passé par chaque page à <Header fond="…">. */

/* Le conteneur est celui du header : « .parc-sec > .wrap » (parcours.css).
   La colonne de 780 px d'avant est remplacée par la grille ci-dessous. */
.sec--jur{background:transparent;padding-bottom:var(--e-5)}

/* --- Le bandeau ------------------------------------------------------------
   Le bandeau des parcours (parcours.css), avec un losange nacré devant le
   sur-titre — celui de la synthèse du tableau de bord recruteur. */
.jur__sur{display:inline-flex;align-items:center;gap:10px}
.jur__losange{
  flex:none;width:9px;height:9px;rotate:45deg;border-radius:1px;
  background:radial-gradient(62% 62% at 33% 29%,#FFFFFF 0%,#FFEAF4 44%,#FFC6DE 100%);
  box-shadow:0 0 10px rgba(255,150,196,.46);
  animation:jur-eclat 4.2s ease-in-out infinite;
}
@keyframes jur-eclat{
  0%,100%{box-shadow:0 0 8px rgba(255,150,196,.40)}
  50%{box-shadow:0 0 14px rgba(255,236,246,.85)}
}
.jur__date{margin-top:2px}

/* --- La page : sommaire à gauche, texte à droite ---------------------------
   Le texte s'arrête à une largeur de lecture : 72 caractères environ. */
.jur{
  display:grid;grid-template-columns:232px minmax(0,1fr);
  gap:56px;align-items:start;margin-top:44px;
}
.jur--seul{grid-template-columns:minmax(0,1fr)}
.jur__texte{min-width:0;max-width:740px}

.jur__cote{position:sticky;top:112px}
.jur__sommaire-t{
  margin:0 0 12px;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#8A7C83;
}
.jur__sommaire-liste{
  list-style:none;margin:0;padding:0 0 0 14px;
  display:grid;gap:8px;border-left:1px solid #F1EAEE;
}
.jur__sommaire-liste a{
  display:block;font-size:13.5px;line-height:1.45;color:#5F5158;text-decoration:none;
  transition:color 160ms ease;
}
@media (hover:hover){
.jur__sommaire-liste a:hover{color:var(--mw-bordeaux)}
}
.jur__sommaire-mobile{display:none}

/* Le bandeau de la version de travail (local seulement). */
.jur__brouillon{
  margin:0 0 28px;padding:11px 14px;border-radius:10px;
  background:var(--mw-info-fond);border:1px solid var(--mw-info-bord);
  font-size:13.5px;line-height:1.5;color:var(--mw-info-texte);
}
.jur__a-completer{
  padding:1px 6px;border-radius:4px;
  background:var(--mw-avant-fond);box-shadow:inset 0 0 0 1px var(--mw-avant-bord);
  color:var(--mw-avant-titre);font-weight:600;
}
/* Sur le prune du bandeau, le marqueur garde le rose pâle, en plus doux. */
.parc-bandeau .jur__a-completer{box-shadow:none}

/* --- Les parties ----------------------------------------------------------
   Un filet fin entre elles : c'est ce qui donne au document son rythme, sans
   qu'aucune n'ait besoin d'un cadre. */
.jur__partie + .jur__partie{margin-top:36px;padding-top:32px;border-top:1px solid #F1EAEE}
.jur__h2{
  margin:0 0 14px;font-size:19px;font-weight:600;line-height:1.3;
  letter-spacing:-.012em;color:var(--plum);
  /* La barre de la sticky : sans elle, une ancre du sommaire amène le titre
     sous la barre du site. Voir html{scroll-padding-top} dans header.css —
     cette réserve-ci s'y ajoute pour que le titre ne soit pas collé dessous. */
  scroll-margin-top:118px;
}
.jur__h3{
  margin:24px 0 10px;font-size:16px;font-weight:600;line-height:1.4;
  color:var(--plum);scroll-margin-top:118px;
}
.jur__p{margin:0 0 14px;font-size:16px;line-height:1.75;color:#463840}
.jur__p:last-child{margin-bottom:0}

/* --- Les listes ----------------------------------------------------------- */
.jur__liste{margin:2px 0 16px;padding:0;list-style:none;display:grid;gap:8px}
.jur__liste:last-child{margin-bottom:0}
.jur__liste li{
  position:relative;padding-left:22px;
  font-size:16px;line-height:1.7;color:#463840;
}
/* Une puce dessinée, pas celle du navigateur : elle se pose sur la première
   ligne quelle que soit la taille du texte. */
.jur__liste li::before{
  content:"";position:absolute;left:2px;top:.72em;
  width:5px;height:5px;border-radius:50%;background:#D8B9CA;
}

/* --- Les liens ------------------------------------------------------------
   Framboise, soulignés au survol seulement. Dans un texte de loi, tout
   souligner d'avance hachure la page. */
.jur__lien{
  color:var(--mw-framboise);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color 160ms ease,color 160ms ease;
  overflow-wrap:anywhere;
}
@media (hover:hover){
.jur__lien:hover{color:var(--mw-accent);border-bottom-color:currentColor}
}
.jur__lien:focus-visible,
.jur__sommaire-liste a:focus-visible{
  outline:2px solid var(--mw-bordeaux);outline-offset:3px;border-radius:2px;
}

.jur strong{font-weight:600;color:var(--plum)}

/* --- Les tableaux ---------------------------------------------------------
   Des filets, pas de cases pleines ; la première colonne en tête de ligne.
   Le cadre défile seul sur un écran étroit. */
.jur__tableau-cadre{margin:4px 0 14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.jur__tableau-cadre:focus-visible{outline:2px solid var(--mw-bordeaux);outline-offset:3px}
.jur__tableau{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.6;color:#463840}
.jur__tableau th,.jur__tableau td{
  padding:11px 12px;text-align:left;vertical-align:top;border-bottom:1px solid #F1EAEE;
}
.jur__tableau thead th{
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8A7C83;
  border-bottom-color:#E7DCE2;
}
.jur__tableau tbody th{width:32%;font-weight:600;color:var(--plum)}

/* --- Sous 1024 px : une colonne, sommaire replié au-dessus du texte ------- */
@media (max-width:1024px){
  .jur{grid-template-columns:minmax(0,1fr);gap:0;margin-top:28px}
  .jur__cote{display:none}
  .jur__texte{max-width:none}
  .jur__sommaire-mobile{
    display:block;margin:0 0 30px;border-radius:10px;
    background:var(--mw-info-fond);border:1px solid var(--mw-info-bord);
  }
  .jur__sommaire-mobile summary{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:13px 16px;cursor:pointer;list-style:none;
    font-size:14px;font-weight:600;color:var(--mw-info-texte);
  }
  .jur__sommaire-mobile summary::-webkit-details-marker{display:none}
  /* Le chevron : un trait tourné, qui se retourne à l'ouverture. */
  .jur__sommaire-mobile summary::after{
    content:"";width:8px;height:8px;flex:none;margin-top:-4px;
    border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    rotate:45deg;transition:rotate 200ms ease,margin 200ms ease;
  }
  .jur__sommaire-mobile[open] summary::after{rotate:-135deg;margin-top:4px}
  .jur__sommaire-mobile summary:focus-visible{outline:2px solid var(--mw-bordeaux);outline-offset:2px;border-radius:10px}
  .jur__sommaire-mobile .jur__sommaire-liste{margin:0 16px 16px;border-left-color:var(--mw-info-bord)}
}

/* --- Sous 760 px ----------------------------------------------------------
   Vingt pixels de gouttière de chaque côté, et un texte qui ne rétrécit pas :
   seize pixels restent seize pixels — c'est un document qu'on lit en entier. */
@media (max-width:760px){
  .jur{margin-top:22px}
  .jur__partie + .jur__partie{margin-top:28px;padding-top:26px}
  .jur__h2{font-size:18px}
  .jur__p,.jur__liste li{font-size:15.5px}
  /* Le tableau s'empile : chaque ligne devient un petit bloc — son titre,
     puis son contenu, sur toute la largeur. Rien ne défile de côté. */
  .jur__tableau,.jur__tableau tbody,.jur__tableau tr,
  .jur__tableau th,.jur__tableau td{display:block;width:auto}
  .jur__tableau thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .jur__tableau tr{padding:12px 0;border-bottom:1px solid #F1EAEE}
  .jur__tableau tbody th,.jur__tableau td{padding:0;border:0}
  .jur__tableau tbody th{width:auto;margin-bottom:4px;font-size:14.5px}
  .jur__tableau td{font-size:14.5px}
}

@media (prefers-reduced-motion:reduce){
  .jur__lien,.jur__sommaire-liste a{transition:none}
  .jur__losange{animation:none}
  .jur__sommaire-mobile summary::after{transition:none}
}