/* =============================================================================
   Cession TPE — compléments des pages intérieures non maquettées
   (expertises, expertise, cabinet, réseau, territoire, contact, page,
   article, liste d'articles, 404).

   Chargée après site.css : elle lit ses jetons (--nuit, --oblique,
   --bande-texte…) et ne redéfinit aucun composant de la maquette (bandeau,
   intro, scinde, tuiles, chiffres, metiers, appel, contact, .rte, .fil,
   .pagination, .puces sont dans site.css). Elle n'ajoute que les pièces que la
   maquette n'avait pas : colonne de lecture, citation, pictogramme d'argument,
   listes à barres obliques, grille à séparateurs obliques, tuiles par trois,
   bandeau court, date des cartes d'articles.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. BANDEAU COURT (404)
   -------------------------------------------------------------------------- */
.bandeau--court{min-height:calc(var(--h-top) + var(--h-nav) + 200px)}

/* -----------------------------------------------------------------------------
   2. BANDE D'INTRODUCTION ET PANNEAUX
   -------------------------------------------------------------------------- */
/* Introduction sans phrase forte : le texte prend une seule colonne */
.intro-grille--seule{grid-template-columns:minmax(0, 1fr)}
.intro-grille--seule .intro-texte{max-width:760px}
.intro-texte > * + *{margin-top:14px}
.intro-texte .fort{font-weight:700}
.intro-texte li{font-size:15.5px}
/* Sur le panneau --bande, les barres des listes passent en nuit, comme le « / » des titres */
.scinde-contenu .rte ul > li::before{color:var(--barre, var(--oblique))}

/* Citation du cabinet, à la place de la phrase forte */
.citation{margin:0}
.citation-texte{font-size:clamp(23px, 2.1vw, 26px);font-weight:700;line-height:1.3;text-wrap:balance}
.citation-texte::before{content:"/";content:"/" / "";margin-right:10px;font-weight:900;color:var(--oblique)}
.citation-source{
  margin-top:16px;
  font:700 12px/1.4 var(--f-texte);letter-spacing:.12em;text-transform:uppercase;color:var(--oblique);
}

/* Pictogramme posé au-dessus du titre d'un argument, dans un panneau */
.argument-picto{display:block;margin-bottom:14px;line-height:0;color:var(--barre, var(--oblique))}
.argument-picto svg{width:54px;height:auto}
.argument .lien-fleche{margin-top:20px}

/* -----------------------------------------------------------------------------
   3. LISTES À BARRES OBLIQUES (livrables, points, filières, arguments)
   -------------------------------------------------------------------------- */
.puces-obliques{display:grid;gap:12px}
.puces-obliques li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.65}
.puces-obliques li::before{
  content:"/";content:"/" / "";position:absolute;left:2px;top:0;
  font-weight:900;color:var(--barre, var(--oblique));
}
.scinde-contenu .puces-obliques{margin-top:18px}
.section .puces-obliques li{font-weight:600;color:var(--nuit)}
.section .puces-obliques li::before{color:var(--bande-texte)}

/* -----------------------------------------------------------------------------
   4. GRILLE À SÉPARATEURS OBLIQUES (valeurs, départements, engagements)
   Même filet oblique que .chiffre et .metier.
   -------------------------------------------------------------------------- */
.grille-obliques{display:grid;gap:36px 24px}
.grille-obliques > li{position:relative;min-width:0}
.grille-obliques > li::before{
  content:"";display:none;position:absolute;left:-12px;top:6px;bottom:6px;width:2px;
  background:var(--oblique);transform:skewX(-14deg);
}
.grille-lien{display:block;height:100%;color:inherit;text-decoration:none}
.grille-titre{font-size:18px;font-weight:var(--g-titre-sec);line-height:1.35;color:var(--nuit)}
.grille-lien:hover .grille-titre{
  text-decoration:underline;text-decoration-color:var(--oblique);
  text-decoration-thickness:2px;text-underline-offset:.3em;
}
.grille-sur{
  margin-top:6px;
  font:700 11.5px/1.5 var(--f-texte);letter-spacing:.1em;text-transform:uppercase;color:var(--bande-texte);
}
.grille-obliques p:not([class]){margin-top:10px;font-size:15px;line-height:1.7;color:var(--texte-2)}
.grille-picto{display:block;margin-bottom:16px;line-height:0;color:var(--bande-texte)}
.grille-picto svg{width:56px;height:auto}

/* -----------------------------------------------------------------------------
   5. BLOCS DE SUITE, PASTILLES
   -------------------------------------------------------------------------- */
.bloc-suite{margin-top:clamp(40px, 5vw, 60px)}
.bloc-suite .surtitre{margin-bottom:14px}
.fonce .bloc-suite .lien-fleche{margin-top:0}
.pilule .num{margin-left:6px;color:var(--texte-2)}

/* -----------------------------------------------------------------------------
   6. COLONNE DE LECTURE (pages légales, articles, texte de l'éditeur)
   La typographie du texte vient de .rte (site.css).
   -------------------------------------------------------------------------- */
.lecture{max-width:720px;font-size:16.5px}
.lecture-vignette{margin-bottom:clamp(28px, 4vw, 44px)}
.lecture-vignette img{width:100%;height:auto}

/* -----------------------------------------------------------------------------
   7. LISTE D'ARTICLES
   -------------------------------------------------------------------------- */
.carte-photo .carte-photo-date{
  margin-top:18px;
  font:700 11.5px/1.4 var(--f-texte);letter-spacing:.1em;text-transform:uppercase;color:var(--bande-texte);
}
.carte-photo-date + .carte-photo-titre{margin-top:6px}
.cartes-vide h2{margin-bottom:8px;font-size:clamp(22px, 2vw, 26px);color:var(--nuit)}

/* -----------------------------------------------------------------------------
   8. RÉSEAU EN DÉTAIL (template-parts/reseau-losanges, detail => true)
   Utilisé seulement par les pages « Réseau d'experts » et « Nos expertises » :
   le métier passe en petit libellé, le titre et le texte suivent.
   -------------------------------------------------------------------------- */
.metiers-grille--detail .metier{gap:10px}
.metiers-grille--detail .metier-nom{
  margin-top:4px;
  font:700 12px/1.4 var(--f-texte);letter-spacing:.1em;text-transform:uppercase;color:var(--oblique);
}
.metiers-grille--detail .metier-titre{font-size:17px;font-weight:var(--g-titre-sec);line-height:1.35}
.metiers-grille--detail .metier-texte{font-size:14.5px;line-height:1.7}
.metiers-grille--detail .metier-points{margin-top:4px}

/* -----------------------------------------------------------------------------
   9. REQUÊTES MÉDIA (après les règles qu'elles surchargent)
   -------------------------------------------------------------------------- */
@media (min-width: 640px){
  .grille-obliques{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .grille-obliques > li:nth-child(even)::before{display:block}
}

@media (min-width: 768px){
  .bandeau--court{min-height:calc(var(--h-top) + var(--h-nav) + 240px)}
  .puces-obliques--colonnes{grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px 48px}
}

@media (min-width: 1024px){
  .grille-obliques{grid-template-columns:repeat(4, minmax(0, 1fr));gap:48px}
  .grille-obliques > li:nth-child(n)::before{display:none}
  .grille-obliques > li:not(:nth-child(4n+1))::before{display:block;left:-24px}

  .grille-obliques--trois{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .grille-obliques--trois > li:nth-child(n)::before{display:none}
  .grille-obliques--trois > li:not(:nth-child(3n+1))::before{display:block;left:-24px}

  .tuiles--trois{grid-template-columns:repeat(3, minmax(0, 1fr))}

  /* Textes longs : trois colonnes plutôt que quatre, séparateurs recalés */
  .metiers-grille--detail{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .metiers-grille--detail .metier:nth-child(n)::before{display:none}
  .metiers-grille--detail .metier:not(:nth-child(3n+1))::before{display:block;left:-36px}
}