/* ==========================================================================
   agencemidnight.fr : blocs riches des articles (refonte 2026, S3)
   --------------------------------------------------------------------------
   Remplace les 36 feuilles collées dans le contenu par l'ancien site
   (contenu/communs/styles-embarques/, R2). Contrat HTML : design/composants.md
   §43. Chargée SEULEMENT sur les articles, APRÈS site.css.

   Rendu reproduit : celui de l'aspiration ISO (getComputedStyle en 1366 et
   390 px), et non le CSS d'origine lu à la lettre. Le kit Elementor écrasait
   une partie de ces feuilles :
     - titres h2 / h3 en Genica One, marges 35 px / 20 px, interligne 1,2 ;
     - marge basse de 25 px sur les paragraphes ;
     - interligne fixe de 27 px hérité du contenu d'article.
   Ces valeurs sont donc écrites ici telles qu'elles sont rendues.

   Spécificité : chaque élément est préfixé par la classe de son bloc
   (« .bloc .bloc__element », 0-2-0) pour passer devant les règles
   « .article__contenu p / h2 / ul / table… » (0-1-1) de site.css.
   Aucun !important, aucun style en ligne (CSP).

   Couleurs : jetons de jetons.css quand l'écart est imperceptible
   (CIEDE2000 ≤ 1). Les autres couleurs sont propres aux blocs, déclarées
   une seule fois ci-dessous (--a-*). Les variantes transparentes sont
   dérivées par color-mix(), sans nouvelle couleur.

   Points de rupture : ceux des feuilles d'origine (768, 760, 700, 600 et
   480 px), pour un rendu identique à ces largeurs.

   Sommaire :
     0. Couleurs propres aux blocs
     1. Palmarès (cartes sombres classées)          .palmares
     2. Encadré « À retenir »                        .resume
     3. Repères chiffrés sombres                     .chiffres
     4. Formule                                      .formule
     5. Revenus                                      .revenus
     6. Repères en cartes blanches                   .reperes
     7. Tendances                                    .tendances
     8. Répertoire (tableau sombre)                  .repertoire
     9. Galerie de publications Instagram           .galerie-insta
    10. Mouvement réduit
    11. Synthèse en tête d'article (G3)            .synthese
    12. Encadré nuit (G3)                           .encadre-nuit
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Couleurs propres aux blocs (hors jetons, écart perceptible)
   -------------------------------------------------------------------------- */
:root {
  /* Interligne du contenu d'article, hérité en pixels par tous les blocs */
  --a-interligne: 27px;

  /* Palmarès : dégradés nuit des cartes (3 nuances qui alternent) */
  --a-nuit-1: #1A1D35;
  --a-nuit-2a: #0D0F1C;
  --a-nuit-2b: #181B2E;
  --a-nuit-3a: #12152A;
  --a-nuit-3b: #1D2038;
  --a-or-clair: #E8B55E;      /* fin du dégradé des pastilles */
  --a-gris-clair: #E0E0E0;    /* catégories et étiquettes */

  /* Encadré « À retenir » */
  --a-texte-doux: #AAB0C6;    /* intro */
  --a-texte-points: #D0D5E8;  /* points cochés */
  --a-or-survol: #C9923A;     /* survol du lien-bouton */

  /* Repères chiffrés et formule */
  --a-carte-sombre: #111828;
  --a-encart-sombre: #1B2238;
  --a-gris-bleu: #8E97B4;     /* segment */
  --a-gris-bleu-fonce: #79819E; /* libellé du chiffre */
  --a-gris-ardoise: #6B7290;  /* note, exemple de la formule */
  --a-fond-formule: #F8F7F4;
  --a-encre-formule: #1E2745;

  /* Revenus */
  --a-marine-clair: #3D4A6B;  /* fin du dégradé */

  /* Repères en cartes blanches */
  --a-noir-doux: #111111;
  --a-ombre-violette: #6774A2;

  /* Tendances et répertoire (palette des pages « restaurants de youtubeurs ») */
  --a-yt-or: #C9A84C;
  --a-yt-or-clair: #E8C97A;
  --a-yt-fond: #0F0F18;
  --a-yt-carte: #14141E;
  --a-yt-bord: #222232;
  --a-yt-bord-table: #252535;
  --a-yt-texte: #E4E4F0;
  --a-yt-discret: #6E6E8A;
  --a-yt-bleu: #4A9EFF;
  --a-yt-vert: #3DCB7A;
  --a-yt-orange: #F0925A;
  --a-yt-violet: #9B7DE8;
  --a-yt-rouge: #E8605A;

  /* Tableaux du thème (Elementor) : même gris que site.css */
  --a-gris-tableau: hsla(0, 0%, 50%, .502);
}


/* --------------------------------------------------------------------------
   1. Palmarès — §43.1
   Cartes nuit en dégradé : rang ou icône dans un rond or, nom or, catégorie,
   encart or à 10 %. Variantes : --serre, --plateforme, --colonne, --multi,
   --hashtags, --types.
   -------------------------------------------------------------------------- */
.palmares {
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
  color: var(--c-nuit);
  font-family: var(--f-systeme-segoe);
  font-size: var(--fs-texte);
  line-height: var(--a-interligne);
}
.palmares .palmares__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.palmares .palmares__carte {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 25px;
  border: 1px solid color-mix(in srgb, var(--c-or) 20%, transparent);
  border-radius: var(--r-m);
  background: linear-gradient(135deg, var(--c-nuit) 0%, var(--a-nuit-1) 100%);
  box-shadow: var(--o-bloc-article, 0 8px 20px 0 rgba(0, 0, 0, .15));
  color: var(--c-blanc);
  text-align: center;
  transition: transform var(--t-rapide) ease, box-shadow var(--t-rapide) ease;
}
.palmares .palmares__carte:nth-child(3n+2) { background: linear-gradient(135deg, var(--a-nuit-2a) 0%, var(--a-nuit-2b) 100%); }
.palmares .palmares__carte:nth-child(3n+3) { background: linear-gradient(135deg, var(--a-nuit-3a) 0%, var(--a-nuit-3b) 100%); }
.palmares .palmares__carte:hover {
  border-color: color-mix(in srgb, var(--c-or) 40%, transparent);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--c-or) 30%, transparent);
  transform: translateY(-8px);
}
/* Halo or décoratif, agrandi au survol */
.palmares .palmares__carte::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-or) 10%, transparent) 0%, transparent 70%);
  transition: transform .5s ease;
}
.palmares .palmares__carte:hover::before { transform: scale(1.2); }

/* Contenu des cartes : au-dessus du halo */
.palmares .palmares__rang,
.palmares .palmares__icone,
.palmares .palmares__nom,
.palmares .palmares__categorie,
.palmares .palmares__encart,
.palmares .palmares__badge {
  position: relative;
  z-index: 2;
}
.palmares .palmares__rang {
  position: absolute;
  top: 15px;
  left: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-rond);
  background: linear-gradient(135deg, var(--c-or) 0%, var(--a-or-clair) 100%);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--c-or) 50%, transparent);
  color: var(--c-nuit);
  font-size: 18px;
  font-weight: var(--fw-gras);
}
.palmares .palmares__nom {
  margin: 15px 0 10px;
  color: var(--c-or);
  font-size: 20px;
  font-weight: var(--fw-gras);
}
.palmares .palmares__categorie {
  margin: 0 0 15px;
  color: var(--a-gris-clair);
  font-size: var(--fs-mini);
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: .9;
}
.palmares .palmares__encart {
  margin: 15px 0 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--c-or) 30%, transparent);
  border-radius: var(--r-s);
  background: color-mix(in srgb, var(--c-or) 10%, transparent);
  backdrop-filter: blur(10px);
}
.palmares .palmares__chiffre {
  display: block;
  margin: 0 0 5px;
  color: var(--c-or);
  font-size: 22px;
  font-weight: var(--fw-gras);
}
.palmares .palmares__etiquette {
  color: var(--a-gris-clair);
  font-size: 11px;
  text-transform: uppercase;
  opacity: .85;
}

/* --serre : pas de marge sous le chiffre (top food) */
.palmares--serre .palmares__chiffre { margin-bottom: 0; }

/* --plateforme : l'encart ne contient que la plateforme, en or (top santé) */
.palmares--plateforme .palmares__etiquette {
  color: var(--c-or);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .5px;
  opacity: 1;
}

/* --colonne et --multi : cartes en colonne de même hauteur, encart en bas */
.palmares--colonne .palmares__carte,
.palmares--multi .palmares__carte {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.palmares--colonne .palmares__nom,
.palmares--multi .palmares__nom { margin-top: 25px; }
.palmares--colonne .palmares__categorie,
.palmares--multi .palmares__categorie {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
}
.palmares--colonne .palmares__encart,
.palmares--multi .palmares__encart { margin-top: auto; }
.palmares--colonne .palmares__chiffre { font-size: 14px; }

/* --multi : plusieurs chiffres empilés (top Bordeaux, Nice, sport, Snapchat) */
.palmares--multi .palmares__nom { font-size: 18px; }
.palmares--multi .palmares__encart {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.palmares--multi .palmares__chiffre {
  margin: 0;
  font-size: var(--fs-mini);
}

/* --hashtags : icône emoji, nom en capitales, liste de hashtags */
.palmares--hashtags .palmares__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin: 0 auto 15px;
  border-radius: var(--r-rond);
  background: linear-gradient(135deg, var(--c-or) 0%, var(--a-or-clair) 100%);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--c-or) 50%, transparent);
  color: var(--c-nuit);
  font-size: 22px;
  font-weight: var(--fw-gras);
}
.palmares--hashtags .palmares__nom {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin: 0 0 15px;
  font-size: var(--fs-texte);
  letter-spacing: .5px;
  line-height: 1.3;
  text-transform: uppercase;
}
.palmares--hashtags .palmares__encart {
  padding: 15px;
  list-style: none;
}
.palmares--hashtags .palmares__encart li {
  display: block;
  margin: 8px 0;
  color: var(--a-gris-clair);
  font-size: var(--fs-texte-xs);
  font-weight: var(--fw-moyen);
}
.palmares--hashtags .palmares__encart li:first-child {
  color: var(--c-or);
  font-size: var(--fs-texte-s);
  font-weight: 600;
}

/* --types : grande icône, fourchette d'abonnés, description et badge */
.palmares--types .palmares__grille { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.palmares--types .palmares__carte { padding: 30px 25px; }
.palmares--types .palmares__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  border-radius: var(--r-rond);
  background: linear-gradient(135deg, var(--c-or) 0%, var(--a-or-clair) 100%);
  box-shadow: 0 4px 15px color-mix(in srgb, var(--c-or) 40%, transparent);
  font-size: 28px;
}
.palmares--types .palmares__nom { font-size: 22px; }
.palmares--types .palmares__categorie {
  font-size: var(--fs-texte-xs);
  font-weight: var(--fw-moyen);
  letter-spacing: .5px;
  text-transform: none;
}
.palmares--types .palmares__encart {
  padding: 15px;
  color: var(--a-gris-clair);
  font-size: var(--fs-texte-xs);
  line-height: 1.6;
}
.palmares .palmares__badge {
  display: inline-block;
  margin: 12px 0 0;
  padding: 5px 12px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--c-or) 20%, transparent);
  color: var(--c-or);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .palmares .palmares__grille {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 15px;
  }
  .palmares .palmares__carte { padding: 20px 15px; }
  .palmares .palmares__nom { font-size: var(--fs-texte); }
  .palmares .palmares__chiffre { font-size: 18px; }
  .palmares--plateforme .palmares__etiquette { font-size: 12px; }
  .palmares--colonne .palmares__chiffre { font-size: var(--fs-mini); }
  .palmares--multi .palmares__nom { font-size: var(--fs-texte-s); }
  .palmares--multi .palmares__chiffre { font-size: 12px; }

  .palmares--hashtags .palmares__icone {
    width: 45px;
    height: 45px;
    margin-bottom: 12px;
    font-size: 20px;
  }
  .palmares--hashtags .palmares__nom {
    min-height: 36px;
    padding: 0 5px;
    font-size: var(--fs-mini);
  }
  .palmares--hashtags .palmares__encart { padding: 12px; }
  .palmares--hashtags .palmares__encart li { margin: 6px 0; font-size: 12px; }
  .palmares--hashtags .palmares__encart li:first-child { font-size: var(--fs-mini); }

  .palmares--types .palmares__grille {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
  }
  .palmares--types .palmares__carte { padding: 25px 20px; }
  .palmares--types .palmares__nom { font-size: 20px; }
}
@media (max-width: 480px) {
  .palmares--hashtags .palmares__grille { grid-template-columns: 1fr; }
  .palmares--hashtags .palmares__carte {
    max-width: 300px;
    margin: 0 auto;
  }
}


/* --------------------------------------------------------------------------
   2. Encadré « À retenir » — §43.2
   Bloc nuit, étiquette or, h2 blanc, points cochés, lien-bouton or.
   Variantes : --titre-s (h2 de 20 px), --appel (ancien cta-box).
   -------------------------------------------------------------------------- */
.resume {
  box-sizing: border-box;
  max-width: 720px;
  margin: 40px auto;
  padding: 40px;
  border-radius: 16px;
  background: var(--c-nuit);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--c-noir) 40%, transparent);
  color: var(--c-blanc);
  font-family: var(--f-inter);
  font-size: var(--fs-texte);
  line-height: var(--a-interligne);
}
.resume .resume__etiquette {
  display: inline-block;
  margin: 0 0 16px;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--c-or);
  color: var(--c-nuit);
  font-size: 11px;
  font-weight: var(--fw-gras);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.resume .resume__titre {
  margin: 35px 0 20px;
  color: var(--c-blanc);
  font-family: var(--f-titre);
  font-size: 22px;
  font-weight: var(--fw-gras);
  line-height: 1.4;
}
.resume .resume__intro {
  margin: 0 0 25px;
  color: var(--a-texte-doux);
  font-size: var(--fs-texte-xs);
  line-height: 1.6;
}
.resume .resume__filet {
  height: 0;
  margin: 0 0 28px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--c-blanc) 10%, transparent);
}
.resume .resume__points {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.resume .resume__points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  color: var(--a-texte-points);
  font-size: var(--fs-texte-xs);
  line-height: 1.6;
}
.resume .resume__points strong { color: var(--c-blanc); }
.resume .resume__coche {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: var(--r-rond);
  background: color-mix(in srgb, var(--c-or) 15%, transparent);
  color: var(--c-or);
}
.resume .resume__coche svg {
  width: 11px;
  height: 11px;
}
.resume .resume__action { margin: 0; }
.resume .resume__lien {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--r-bouton-form);
  background: var(--c-or);
  color: var(--c-nuit);
  font-size: var(--fs-mini);
  font-weight: var(--fw-gras);
  text-decoration: none;
  transition: background-color .2s ease;
}
.resume .resume__lien:hover {
  background: var(--a-or-survol);
  color: var(--c-nuit);
}
.resume .resume__lien:focus-visible {
  outline: 2px solid var(--c-blanc);
  outline-offset: 3px;
}

.resume--titre-s .resume__titre { font-size: 20px; }

.resume--appel {
  padding: 32px;
  box-shadow: none;
}
@media (max-width: 600px) {
  .resume--appel { padding: 26px 22px; }
  .resume--appel .resume__titre { font-size: 19px; }
}


/* --------------------------------------------------------------------------
   3. Repères chiffrés sombres — §43.3
   Deux colonnes de cartes sombres, chiffre or dans un encart.
   Variante : --tarifs (chiffre de 26 px, note en italique).
   -------------------------------------------------------------------------- */
.chiffres {
  color: var(--c-nuit);
  font-family: var(--f-texte);
  font-size: var(--fs-texte);
  line-height: var(--a-interligne);
}
.chiffres .chiffres__grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 28px 0 34px;
  padding: 0;
  list-style: none;
}
.chiffres--tarifs .chiffres__grille { margin-bottom: 22px; }
.chiffres .chiffres__carte {
  margin: 0;
  padding: 22px 24px;
  border-radius: var(--r-s);
  background: var(--a-carte-sombre);
}
.chiffres .chiffres__nom {
  margin: 0 0 25px;
  color: var(--c-or);
  font-size: 19px;
  font-weight: var(--fw-gras);
  line-height: 1.25;
}
.chiffres .chiffres__segment {
  margin: 0 0 25px;
  color: var(--a-gris-bleu);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.chiffres .chiffres__stat {
  margin: 0;
  padding: 14px;
  border-radius: 7px;
  background: var(--a-encart-sombre);
  text-align: center;
}
.chiffres .chiffres__stat strong {
  display: block;
  color: var(--c-or);
  font-size: 28px;
  font-weight: var(--fw-gras);
  line-height: 1;
}
.chiffres--tarifs .chiffres__stat strong {
  font-size: 26px;
  line-height: 1.1;
}
.chiffres .chiffres__stat span {
  display: block;
  margin-top: 7px;
  color: var(--a-gris-bleu-fonce);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.chiffres .chiffres__note {
  margin: 0 0 25px;
  color: var(--a-gris-ardoise);
  font-size: var(--fs-mini);
  font-style: italic;
  line-height: 1.6;
}
@media (max-width: 760px) {
  .chiffres .chiffres__grille { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   4. Formule — §43.4
   Encadré clair, filet or à gauche.
   -------------------------------------------------------------------------- */
.formule {
  margin: 22px 0 26px;
  padding: 22px 26px;
  border-left: 4px solid var(--c-or);
  border-radius: 0 8px 8px 0;
  background: var(--a-fond-formule);
  color: var(--c-nuit);
  font-size: var(--fs-texte);
  line-height: var(--a-interligne);
}
.formule .formule__calcul {
  margin: 0 0 25px;
  color: var(--a-encre-formule);
  font-size: 18px;
  font-weight: var(--fw-gras);
  line-height: 1.5;
}
.formule .formule__exemple {
  margin: 10px 0 25px;
  color: var(--a-gris-ardoise);
  font-size: var(--fs-texte-xs);
  line-height: 1.6;
}
@media (max-width: 600px) {
  .formule { padding: 18px 20px; }
  .formule .formule__calcul { font-size: var(--fs-texte); }
}


/* --------------------------------------------------------------------------
   5. Revenus — §43.5
   Bloc marine en dégradé, cartes translucides.
   -------------------------------------------------------------------------- */
.revenus {
  max-width: 800px;
  margin: 30px auto;
  padding: 15px 30px 30px;
  border-radius: var(--r-m);
  background: linear-gradient(135deg, var(--c-marine) 0%, var(--a-marine-clair) 100%);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--c-noir) 20%, transparent);
  color: var(--c-blanc);
  font-family: var(--f-systeme-segoe);
  font-size: var(--fs-texte);
  line-height: var(--a-interligne);
}
.revenus .revenus__titre {
  margin: 35px 0 20px;
  padding: 0 0 15px;
  border-bottom: 2px solid color-mix(in srgb, var(--c-blanc) 30%, transparent);
  color: var(--c-blanc);
  font-family: var(--f-titre);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.revenus .revenus__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.revenus .revenus__carte {
  margin: 0;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--c-blanc) 20%, transparent);
  border-radius: var(--r-s);
  background: color-mix(in srgb, var(--c-blanc) 15%, transparent);
  backdrop-filter: blur(10px);
  transition: transform var(--t-rapide) ease;
}
.revenus .revenus__carte:hover {
  background: color-mix(in srgb, var(--c-blanc) 20%, transparent);
  transform: translateY(-5px);
}
.revenus .revenus__carte h3 {
  margin: 35px 0 20px;
  color: var(--c-or);
  font-family: var(--f-titre);
  font-size: var(--fs-texte);
  font-weight: var(--fw-moyen);
  line-height: 1.2;
  opacity: .9;
}
.revenus .revenus__valeur {
  display: block;
  margin: 10px 0;
  font-size: 28px;
  font-weight: var(--fw-gras);
}
.revenus .revenus__description {
  margin: 0 0 25px;
  font-size: var(--fs-texte-xs);
  line-height: 1.5;
  opacity: .85;
}
@media (max-width: 600px) {
  .revenus {
    margin: 20px 10px;
    padding: 15px 20px 20px;
  }
  .revenus .revenus__valeur { font-size: 24px; }
}


/* --------------------------------------------------------------------------
   6. Repères en cartes blanches — §43.6
   Grille de cartes blanches à ombre violette.
   Police : « Poppins » jamais chargée, donc police sans empattement par
   défaut du système (rendu actuel conservé).
   -------------------------------------------------------------------------- */
.reperes {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
  color: var(--c-nuit);
  font-family: sans-serif;
  font-size: var(--fs-texte);
  line-height: var(--a-interligne);
}
.reperes .reperes__titre {
  margin: 35px 0 20px;
  color: var(--c-nuit);
  font-family: var(--f-titre);
  font-size: var(--fs-h2-article);
  font-weight: var(--fw-moyen);
  line-height: 1.2;
  text-align: center;
}
.reperes .reperes__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.reperes .reperes__carte {
  min-height: 180px;
  margin: 0;
  padding: 30px 20px;
  border-radius: 16px;
  background: var(--c-blanc);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--a-ombre-violette) 30%, transparent);
  text-align: center;
  transition: transform var(--t-rapide), box-shadow var(--t-rapide);
}
.reperes .reperes__carte:hover {
  box-shadow: 0 12px 35px color-mix(in srgb, var(--a-ombre-violette) 50%, transparent);
  transform: translateY(-5px);
}
.reperes .reperes__carte h3 {
  margin: 35px 0 20px;
  color: var(--c-or);
  font-family: var(--f-titre);
  font-size: 20px;
  font-weight: var(--fw-moyen);
  line-height: 1.2;
}
.reperes .reperes__carte p {
  margin: 5px 0 25px;
  color: var(--c-gris-texte);
  font-size: var(--fs-texte);
}
.reperes .reperes__carte strong {
  color: var(--a-noir-doux);
  font-weight: 600;
}


/* --------------------------------------------------------------------------
   7. Tendances — §43.7
   Quatre cartes sombres ; chaque carte a sa couleur d'accent (--accent),
   d'après sa position, pour le filet du haut, l'icône, l'étiquette et le halo.
   -------------------------------------------------------------------------- */
.tendances {
  margin: 40px 0;
  color: var(--c-nuit);
  font-family: var(--f-outil-dmsans);
  font-size: var(--fs-texte);
  line-height: var(--a-interligne);
}
.tendances .tendances__surtitre {
  margin: 0 0 20px;
  color: var(--a-yt-or);
  font-size: 10px;
  font-weight: var(--fw-gras);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.tendances .tendances__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tendances .tendances__carte {
  --accent: var(--a-yt-orange);
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 28px;
  border: 1px solid var(--a-yt-bord);
  border-radius: 16px;
  background: var(--a-yt-carte);
  transition: transform .2s ease, border-color .2s ease;
  animation: tendances-entree .5s ease both;
}
.tendances .tendances__carte:nth-child(2) { --accent: var(--a-yt-bleu); animation-delay: .15s; }
.tendances .tendances__carte:nth-child(3) { --accent: var(--a-yt-violet); animation-delay: .25s; }
.tendances .tendances__carte:nth-child(4) { --accent: var(--a-yt-vert); animation-delay: .35s; }
.tendances .tendances__carte:nth-child(1) { animation-delay: .05s; }
.tendances .tendances__carte:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  transform: translateY(-3px);
}
/* Filet d'accent en haut de la carte */
.tendances .tendances__carte::before {
  content: "";
  position: absolute;
  top: 0;
  right: 24px;
  left: 24px;
  height: 2px;
  border-radius: 0 0 4px 4px;
  background: var(--accent);
  opacity: .7;
}
/* Halo discret au survol */
.tendances .tendances__carte::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-rapide) ease;
}
.tendances .tendances__carte:hover::after { opacity: 1; }
.tendances .tendances__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-size: 22px;
}
.tendances .tendances__titre {
  margin: 0 0 10px;
  color: var(--a-yt-texte);
  font-family: var(--f-outil-syne);
  font-size: var(--fs-texte-s);
  font-weight: var(--fw-gras);
  line-height: 1.3;
}
.tendances .tendances__texte {
  margin: 0;
  color: var(--a-yt-discret);
  font-size: 13.5px;
  line-height: 1.65;
}
.tendances .tendances__etiquette {
  display: inline-flex;
  margin: 14px 0 0;
  padding: 3px 10px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
}
@keyframes tendances-entree {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
  .tendances .tendances__grille { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   8. Répertoire (tableau sombre) — §43.8
   En-tête, légende à pastilles, tableau rayé (rayures et bordures du thème
   d'origine conservées). Sous 700 px, la 5e colonne est masquée ; le
   tableau, plus large que l'écran, est coupé comme aujourd'hui (écart S3-3).
   -------------------------------------------------------------------------- */
.repertoire {
  position: relative;
  overflow: hidden;
  margin: 40px 0;
  border: 1px solid var(--a-yt-bord-table);
  border-radius: 20px;
  background: var(--a-yt-fond);
  color: var(--c-nuit);
  font-family: var(--f-outil-dmsans);
  font-size: var(--fs-texte);
  line-height: var(--a-interligne);
}
/* Filet or dégradé en haut du bloc */
.repertoire::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--a-yt-or), transparent);
}
.repertoire .repertoire__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px 24px;
  border-bottom: 1px solid var(--a-yt-bord-table);
  background: linear-gradient(90deg, color-mix(in srgb, var(--a-yt-or) 5%, transparent) 0%, transparent 60%);
}
.repertoire .repertoire__titres {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.repertoire .repertoire__surtitre {
  color: var(--a-yt-or);
  font-size: 10px;
  font-weight: var(--fw-gras);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.repertoire .repertoire__titre {
  color: var(--a-yt-texte);
  font-family: var(--f-outil-syne);
  font-size: 18px;
  font-weight: var(--fw-gras);
}
.repertoire .repertoire__compte {
  padding: 5px 14px;
  border: 1px solid color-mix(in srgb, var(--a-yt-or) 25%, transparent);
  border-radius: 100px;
  background: color-mix(in srgb, var(--a-yt-or) 12%, transparent);
  color: var(--a-yt-or);
  font-size: 12px;
  font-weight: var(--fw-gras);
}
.repertoire .repertoire__legende {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
  padding: 14px 32px;
  border-bottom: 1px solid var(--a-yt-bord-table);
  background: color-mix(in srgb, var(--c-blanc) 1.5%, transparent);
  list-style: none;
}
.repertoire .repertoire__legende li {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--a-yt-discret);
  font-size: 12px;
}
.repertoire .repertoire__pastille {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--r-rond);
}
.repertoire .repertoire__pastille--dark { background: var(--a-yt-bleu); }
.repertoire .repertoire__pastille--physique { background: var(--a-yt-vert); }
.repertoire .repertoire__pastille--franchise { background: var(--a-yt-orange); }
.repertoire .repertoire__pastille--gd { background: var(--a-yt-violet); }

.repertoire .repertoire__table {
  width: 100%;
  margin: 0 0 15px;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: var(--fs-tableau);
  line-height: var(--a-interligne);
}
.repertoire .repertoire__table th,
.repertoire .repertoire__table td {
  border: 1px solid var(--a-gris-tableau);
  line-height: 1.5;
}
.repertoire .repertoire__table th {
  padding: 12px 20px;
  border-bottom-color: var(--a-yt-bord-table);
  background: color-mix(in srgb, var(--c-blanc) 2%, transparent);
  color: var(--a-yt-discret);
  font-size: 10px;
  font-weight: var(--fw-gras);
  letter-spacing: 1.2px;
  text-align: left;
  text-transform: uppercase;
  vertical-align: top;
}
.repertoire .repertoire__table td {
  padding: 14px 20px;
  color: var(--a-yt-texte);
  font-size: 13.5px;
  vertical-align: middle;
}
.repertoire .repertoire__table tbody tr {
  border-bottom: 1px solid color-mix(in srgb, var(--a-yt-bord-table) 70%, transparent);
  transition: background .15s;
  animation: repertoire-ligne .4s ease both;
}
.repertoire .repertoire__table tbody tr:last-child { border-bottom: 0; }
.repertoire .repertoire__table tbody tr:hover { background: color-mix(in srgb, var(--a-yt-or) 4%, transparent); }
/* Rayures et survol du thème d'origine (sur les cellules) */
.repertoire .repertoire__table tbody > tr:nth-child(odd) > td { background-color: hsla(0, 0%, 50%, .071); }
.repertoire .repertoire__table tbody tr:hover > td { background-color: hsla(0, 0%, 50%, .102); }
/* Apparition des lignes en cascade (11 lignes) */
.repertoire .repertoire__table tbody tr:nth-child(1) { animation-delay: .05s; }
.repertoire .repertoire__table tbody tr:nth-child(2) { animation-delay: .1s; }
.repertoire .repertoire__table tbody tr:nth-child(3) { animation-delay: .15s; }
.repertoire .repertoire__table tbody tr:nth-child(4) { animation-delay: .2s; }
.repertoire .repertoire__table tbody tr:nth-child(5) { animation-delay: .25s; }
.repertoire .repertoire__table tbody tr:nth-child(6) { animation-delay: .3s; }
.repertoire .repertoire__table tbody tr:nth-child(7) { animation-delay: .35s; }
.repertoire .repertoire__table tbody tr:nth-child(8) { animation-delay: .4s; }
.repertoire .repertoire__table tbody tr:nth-child(9) { animation-delay: .45s; }
.repertoire .repertoire__table tbody tr:nth-child(10) { animation-delay: .5s; }
.repertoire .repertoire__table tbody tr:nth-child(11) { animation-delay: .55s; }
@keyframes repertoire-ligne {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Années : pastille colorée */
.repertoire .repertoire__annee {
  --accent: var(--a-yt-or);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 3px 8px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  font-family: var(--f-outil-syne);
  font-size: var(--fs-mini);
  font-weight: var(--fw-gras);
}
.repertoire .repertoire__annee--2018 { --accent: var(--a-yt-rouge); }
.repertoire .repertoire__annee--2021 { --accent: var(--a-yt-orange); }
.repertoire .repertoire__annee--2022 { --accent: var(--a-yt-or); }
.repertoire .repertoire__annee--2023 { --accent: var(--a-yt-vert); }
.repertoire .repertoire__annee--2024 { --accent: var(--a-yt-bleu); }
.repertoire .repertoire__annee--2025 { --accent: var(--a-yt-violet); }

.repertoire .repertoire__nom {
  display: block;
  color: var(--a-yt-texte);
  font-weight: 600;
}
.repertoire .repertoire__resto {
  display: block;
  color: var(--a-yt-or-clair);
  font-weight: 600;
}
.repertoire .repertoire__sous {
  display: block;
  margin-top: 2px;
  color: var(--a-yt-discret);
  font-size: 12px;
}

/* Modèles : badge à bordure */
.repertoire .repertoire__modele {
  --accent: var(--a-yt-bleu);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.repertoire .repertoire__modele--dark { --accent: var(--a-yt-bleu); }
.repertoire .repertoire__modele--physique { --accent: var(--a-yt-vert); }
.repertoire .repertoire__modele--gd { --accent: var(--a-yt-violet); }
.repertoire .repertoire__modele--franchise { --accent: var(--a-yt-orange); }

@media (max-width: 700px) {
  .repertoire .repertoire__entete {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .repertoire .repertoire__table th:nth-child(5),
  .repertoire .repertoire__table td:nth-child(5) { display: none; }
  .repertoire .repertoire__table th,
  .repertoire .repertoire__table td { padding: 12px 14px; }
}


/* --------------------------------------------------------------------------
   9. Galerie de publications Instagram — §43.9
   Cartes blanches arrondies autour des façades Instagram (§36).
   -------------------------------------------------------------------------- */
.galerie-insta {
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
}
.galerie-insta .galerie-insta__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.galerie-insta .galerie-insta__carte {
  overflow: hidden;
  margin: 0;
  border-radius: 12px;
  background: var(--c-blanc);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c-noir) 10%, transparent);
  transition: transform var(--t-rapide) ease, box-shadow var(--t-rapide) ease;
}
.galerie-insta .galerie-insta__carte:hover {
  box-shadow: var(--o-bloc-article, 0 8px 20px 0 rgba(0, 0, 0, .15));
  transform: translateY(-5px);
}
.galerie-insta .galerie-insta__carte iframe {
  width: 100%;
  min-height: 580px;
  border: 0;
}
@media (max-width: 768px) {
  .galerie-insta .galerie-insta__grille {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}


/* --------------------------------------------------------------------------
   10. Mouvement réduit
   Les blocs d'origine animaient sans condition. Ici, on coupe les entrées et
   les déplacements au survol quand le visiteur le demande (rendu au repos
   inchangé).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tendances .tendances__carte,
  .repertoire .repertoire__table tbody tr { animation: none; }
  .palmares .palmares__carte,
  .palmares .palmares__carte::before,
  .revenus .revenus__carte,
  .reperes .reperes__carte,
  .tendances .tendances__carte,
  .galerie-insta .galerie-insta__carte { transition: none; }
  .palmares .palmares__carte:hover,
  .revenus .revenus__carte:hover,
  .reperes .reperes__carte:hover,
  .tendances .tendances__carte:hover,
  .galerie-insta .galerie-insta__carte:hover { transform: none; }
  .palmares .palmares__carte:hover::before { transform: none; }
}


/* --------------------------------------------------------------------------
   11. Synthèse en tête d'article (G3, 2026-10-29) — §43.11
   Ancien div#resume-* à styles en ligne (9 articles, sans feuille collée) :
   en-tête nuit + icône + titre, corps gris clair, intro encadrée, puis points
   cochés (ul), étapes notées (ol) ou options comparées (ul), et une note.
   Valeurs relevées dans l'aspiration (getComputedStyle, 1366 et 390 px) :
   rem du site d'origine ; police Inter jamais chargée à l'origine, donc pile
   sans Inter (repli Arial sous Windows, comme aujourd'hui). Préfixe
   .article__contenu : passe devant « .article__contenu > :first-child »
   (marge haute de 40 px conservée) et les h2 / p / ul.
   Palette : nuit (défaut) ou or (--or, top 9 mode FR / EN).
   -------------------------------------------------------------------------- */
.article__contenu .synthese {
  --sy-bord: #BCBDC1;
  --sy-encre: #020305;
  --sy-entete: linear-gradient(135deg, #0A0C16 0%, var(--c-nuit) 100%);
  --sy-corps: #F3F3F4;
  --sy-doux: #8D8E8F;
  --sy-puce-fond: #4B4D59;
  --sy-puce: #0A0C16;
  max-width: 720px;
  margin: 2.5rem auto;
  overflow: hidden;
  border: 1px solid var(--sy-bord);
  border-radius: 14px;
  background: var(--c-blanc);
  box-shadow: 0 20px 50px -16px rgba(0, 0, 0, .22);
  color: var(--sy-encre);
  /* pile d'origine sans « Inter » : jamais chargée à l'origine, mais servie par outils.css (S4) sur /hook/ */
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: var(--a-interligne);
}
.article__contenu .synthese--or {
  --sy-bord: #F5E6CC;
  --sy-encre: #21190B;
  --sy-entete: linear-gradient(135deg, #906B2F 0%, var(--c-or) 100%);
  --sy-corps: #FDFBF6;
  --sy-doux: #9B9891;
  --sy-puce-fond: #E6BC76;
  --sy-puce: #906B2F;
}
.synthese .synthese__entete {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1.4rem 1.8rem;
  background: var(--sy-entete);
}
.synthese .synthese__icone { display: block; flex-shrink: 0; font-size: 1.7rem; line-height: 1; }
.synthese .synthese__titre {
  display: block;
  margin: 0 0 0 .8rem;       /* + un écart de flex : Elementor insère un span vide (ancre de menu) avant le titre */
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--c-blanc);
}
.synthese .synthese__corps {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.5rem 1.8rem 1.7rem;
  background: var(--sy-corps);
}
.synthese .synthese__intro {
  margin: 0;
  padding: .9rem 1.1rem;
  border: 1px solid var(--sy-bord);
  border-radius: 10px;
  background: var(--c-blanc);
  font-size: .88rem;
  line-height: 1.6;
  color: var(--sy-doux);
}
.synthese .synthese__intro strong { font-weight: var(--fw-gras); color: var(--sy-encre); }
.synthese :is(.synthese__points, .synthese__etapes) {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.synthese :is(.synthese__point, .synthese__etape) {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin: 0;
  padding: .75rem 1rem;
  border: 1px solid var(--sy-bord);
  border-radius: 9px;
  background: var(--c-blanc);
}
.synthese :is(.synthese__puce, .synthese__num) {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: .05rem;
  border-radius: 50%;
  background: var(--sy-puce-fond);
  font-size: .8rem;
  font-weight: 800;
  color: var(--sy-puce);
}
.synthese .synthese__num { width: 1.6rem; height: 1.6rem; background: var(--c-nuit); font-size: .75rem; color: var(--c-blanc); }
.synthese .synthese__texte { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--sy-encre); }
.synthese .synthese__etape-corps { flex: 1; }
.synthese .synthese__etape-titre { display: block; margin-bottom: .15rem; font-size: .9rem; font-weight: var(--fw-gras); color: var(--sy-encre); }
.synthese .synthese__detail { margin: 0; font-size: .82rem; line-height: 1.4; color: var(--sy-doux); }
.synthese .synthese__option .synthese__detail { line-height: 1.45; }
.synthese .synthese__niveau {
  display: block;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: .1rem;
  padding: .15rem .5rem;
  border-radius: 4px;
  font-size: .68rem;
  font-weight: var(--fw-gras);
  white-space: nowrap;
}
.synthese .synthese__niveau--facile { background: #E3F4EA; color: #1A4A22; }
.synthese .synthese__niveau--moyen { background: #FFF3E0; color: #6A3C10; }
.synthese .synthese__niveau--expert { background: #FBE9E8; color: #5C1E1C; }
.synthese .synthese__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.synthese .synthese__option {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin: 0;
  padding: .9rem 1rem;
  border: 1px solid var(--sy-bord);
  border-radius: 10px;
  background: var(--c-blanc);
}
.synthese .synthese__option--recommandee { border: 2px solid var(--c-nuit); }
.synthese .synthese__option-titre { display: block; margin: 0; font-size: .9rem; font-weight: var(--fw-gras); color: #0A0C16; }
.synthese .synthese__liste { margin: 0; padding-left: 1.1rem; }
.synthese .synthese__liste li { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--sy-encre); }
.synthese .synthese__note {
  margin: 0 0 25px;          /* marge basse du kit Elementor, non écrasée à l'origine */
  padding: .7rem 1rem;
  border: 1px solid #F0D9A8;
  border-left: 3px solid #C4762E;
  border-radius: 0 8px 8px 0;
  background: #FFF8EC;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--sy-doux);
}
.synthese .synthese__note strong { font-weight: var(--fw-gras); color: #6A3C10; }
.synthese .synthese__note a { color: inherit; }


/* --------------------------------------------------------------------------
   12. Encadré nuit (G3, 2026-10-29) — §43.12
   Paragraphe de l'éditeur à fond nuit (ancien style en ligne : fond #0F1222,
   texte blanc, coins de 15 px, rembourrage WordPress 1,25em / 2,375em =
   20 / 38 px). Liens : règle des articles (or souligné), comme aujourd'hui.
   --haut-30 / --haut-40 : marges hautes en ligne de « facteurs d'influence ».
   -------------------------------------------------------------------------- */
.article__contenu .encadre-nuit {
  padding: 1.25em 2.375em;
  border-radius: 15px;
  background: var(--c-nuit);
  color: var(--c-blanc);
}
.article__contenu .encadre-nuit--haut-30 { margin-top: 30px; }
.article__contenu .encadre-nuit--haut-40 { margin-top: 40px; }