/* =============================================================================
   PAGES PILIERS — styles de contenu
   Convergent / my-people — version du 13 août 2026

   IMPORTANT : toutes les règles sont cloisonnées sous « .pilier ».
   Elles ne peuvent donc pas interférer avec la navigation, le pied de page
   ni les styles de l'accueil, qui vivent dans styles-globaux.css.

   Les variables de couleur (--coral, --ink, --paper, --line…) proviennent de
   styles-globaux.css et ne sont pas redéfinies ici.
   ============================================================================= */

/* Les deux sites nomment différemment la couleur d'accent : --coral sur
   convergent.fr, --green sur my-people.fr (valeurs identiques). On définit
   donc des alias tolérants, avec une valeur de repli. */
.pilier,.encart-langue{
  --accent:var(--coral,var(--green,#E24A2C));
  --accent-wash:var(--coral-wash,var(--green-wash,#FBE9E3))
}

.pilier{
  max-width:720px;margin:0 auto;padding:32px 24px 96px;
  font-size:17px;line-height:1.65
}
/* styles-globaux.css applique « section{padding:82px 0} » à toutes les
   sections du site : on le neutralise à l'intérieur du contenu des piliers,
   dont les sections (Références, Voir aussi) ont leur propre espacement. */
.pilier section{padding:0}

/* --- Fil d'Ariane ---------------------------------------------------------
   Il est balisé <nav> pour l'accessibilité, ce qui lui ferait hériter du
   style de la barre de navigation du site (sticky, fond translucide, flou).
   On neutralise donc explicitement ces propriétés. */
.pilier nav.fil{
  position:static;top:auto;z-index:auto;background:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:0;animation:none
}
.pilier .fil{font-size:13px;color:var(--ink-soft);margin:0 0 40px}
.pilier .fil a{color:var(--ink-soft);text-decoration:none}
.pilier .fil a:hover{color:var(--accent)}

/* --- Titres --------------------------------------------------------------- */
.pilier h1{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;
  font-size:clamp(28px,5vw,40px);line-height:1.15;letter-spacing:-.02em;margin:0 0 24px
}
.pilier h2{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;
  font-size:clamp(24px,3.4vw,29px);line-height:1.2;letter-spacing:-.02em;
  margin:72px 0 12px;position:relative;padding-top:16px
}
.pilier h2::before{
  content:"";position:absolute;top:0;left:0;width:40px;height:2px;background:var(--accent)
}
.pilier h2.mini{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:400;
  font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);
  margin:0 0 12px;padding-top:0
}
.pilier h2.mini::before{content:none}
.pilier h3{font-size:19px;font-weight:600;margin:32px 0 8px;line-height:1.3}
.pilier p + h3{margin-top:26px}
.pilier h3 + p{margin-top:0}

/* --- Blocs mis en avant --------------------------------------------------- */
.pilier .reponse{
  background:var(--accent-wash);border-left:3px solid var(--accent);
  padding:20px 24px;margin:0 0 20px;font-size:18px
}
/* l'encadré d'ouverture suit le <h1>, qui porte déjà sa marge ;
   celui de clôture suit un paragraphe et a besoin d'air au-dessus */
.pilier p + .reponse,.pilier div + .reponse,.pilier ol + .reponse{margin-top:36px}
.pilier .reponse p{margin:0}
.pilier .maj{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px
}

/* --- Sommaire repliable --------------------------------------------------- */
.pilier .sommaire{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:12px 0;margin:0 0 8px
}
.pilier .sommaire summary{
  cursor:pointer;list-style:none;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)
}
.pilier .sommaire summary::-webkit-details-marker{display:none}
.pilier .sommaire summary::after{content:" +";color:var(--accent)}
.pilier .sommaire[open] summary::after{content:" \2212";color:var(--accent)}
.pilier .sommaire ol{margin:14px 0 4px;padding-left:22px;font-size:15px;line-height:2}
.pilier .sommaire a{color:var(--ink-soft);text-decoration:none}
.pilier .sommaire a:hover{color:var(--accent);text-decoration:underline}

/* --- Tableaux ------------------------------------------------------------- */
.pilier table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}
.pilier th,.pilier td{
  text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top
}
.pilier th{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);font-weight:400
}

/* --- Chronologies numérotées ---------------------------------------------- */
.pilier ol.jalons{list-style:none;padding:0;counter-reset:j}
.pilier ol.jalons > li{
  counter-increment:j;padding:16px 0 16px 52px;position:relative;
  border-bottom:1px solid var(--line)
}
.pilier ol.jalons > li::before{
  content:counter(j,decimal-leading-zero);position:absolute;left:0;top:16px;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;color:var(--accent)
}
.pilier ol.jalons ul{margin:12px 0;padding-left:18px;list-style:disc}
.pilier ol.jalons ul li{padding:5px 0;border-bottom:none;position:static}
.pilier ol.jalons ul li::before{content:none}

/* --- Blocs de périmètre --------------------------------------------------- */
.pilier .perimetre div{padding:16px 0;border-bottom:1px solid var(--line)}
.pilier .perimetre h3{margin:0 0 4px;font-size:17px}
.pilier .perimetre p{margin:0;font-size:15px;color:var(--ink-soft)}
.pilier .perimetre div p + p{margin-top:8px}

/* --- Blocs « erreurs » ---------------------------------------------------- */
.pilier .erreur{border-top:2px solid var(--ink);padding-top:14px;margin:28px 0}
.pilier .erreur h3{margin-top:0}
.pilier .erreur p{margin:0}
.pilier .erreur p + p{margin-top:10px}

/* --- Notes de bas de page ------------------------------------------------- */
.pilier sup a{color:var(--accent);text-decoration:none;font-size:12px}
.pilier .notes{
  margin-top:44px;padding-top:18px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.5;color:var(--ink-soft)
}
.pilier .notes h2.mini{font-size:12px;margin-bottom:8px}
.pilier .notes ol{padding-left:18px;margin:0}
.pilier .notes li{margin-bottom:3px}
.pilier .notes > p{margin:8px 0 0;font-size:12px}

/* --- Appel à l'action et renvois ------------------------------------------
   Le bouton reprend la classe .btn de styles-globaux.css : même forme,
   même typographie et même comportement que sur l'accueil. On ne règle
   ici que son espacement dans le flux du texte. */
.pilier .btn{margin-top:12px}
.pilier .voiraussi{margin-top:56px;padding-top:24px;border-top:1px solid var(--line)}
.pilier .voiraussi a{
  display:block;padding:10px 0;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line)
}
.pilier .voiraussi a:hover{color:var(--accent)}

.pilier a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* -------------------------------------------------------------------------
   Encart affiché sur les pages monolingues lorsque le visiteur demande
   l'autre langue. Hors .pilier : il s'insère avant le contenu.
   Voir langue-pages-monolingues.js.
   ------------------------------------------------------------------------- */
.encart-langue{
  position:relative;max-width:720px;margin:0 auto;
  padding:16px 44px 16px 20px;background:var(--accent-wash);
  border-left:3px solid var(--accent);font-size:15px;line-height:1.55
}
.encart-langue[hidden]{display:none}
.encart-langue p{margin:0}
.encart-langue-liens{margin-top:8px!important;font-weight:600}
.encart-langue a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.encart-langue a:hover{color:var(--accent)}
.encart-langue-fermer{
  position:absolute;top:8px;right:10px;background:none;border:0;
  font-size:20px;line-height:1;color:var(--ink-soft);cursor:pointer;padding:4px 8px
}
.encart-langue-fermer:hover{color:var(--accent)}

@media (max-width:560px){
  .pilier{padding:24px 18px 72px}
  .pilier table{font-size:14px}
  .pilier th,.pilier td{padding:10px 6px}
  .pilier h2{margin-top:56px}
  .encart-langue{padding:14px 40px 14px 16px;font-size:14px}
}