/**
 * Tableaux — bloc Tableau natif de Gutenberg (core/table)
 *
 * Règle générale unique, sans option par tableau : CSS seul, pas de JS,
 * pas de filtre PHP sur le contenu.
 *
 * Markup produit par le bloc :
 * <figure class="wp-block-table">
 *   <table class="has-fixed-layout"><thead>…</thead><tbody>…</tbody></table>
 *   <figcaption class="wp-element-caption">…</figcaption>
 * </figure>
 *
 * Ordre de chargement en production : cette feuille est imprimée dans le
 * <head>, mais kadence-content.css est imprimée plus tard, dans le <body>.
 * À spécificité égale, Kadence gagne : chaque règle ci-dessous doit donc
 * gagner par sa spécificité, jamais par sa position.
 */

/* ==========================================================================
   Styles historiques, déplacés tels quels depuis style.css
   ========================================================================== */

.single-content table {
	margin-bottom: 0 ! important;
}

thead {
	background: linear-gradient(to right, #073574, #090366);
	color: white;
	font-weight: bold;
	border-radius: 5px 5px 0 0;
}

tbody tr:nth-child(even) {
    background-color: #dfe5f6;
}

/* ==========================================================================
   Apparence — alignée sur les tableaux du plugin IF Platform (table.if-table)
   ==========================================================================
   Carte arrondie et ombrée, en-tête en dégradé, séparateurs horizontaux fins,
   séparateurs verticaux plus légers encore, zébrage très léger.

   Valeurs recopiées des tokens de if-platform/assets/blocks/blocks.css
   (défauts, identiques à la production au 10/11/2026). Le plugin scope ses
   tokens sur .if-scope : le thème ne peut pas les lire. Si l'écran Apparence
   du plugin change ces valeurs, les reporter ici.

   Sélecteurs en figure.wp-block-table (0,1,2) et plus : Kadence et WordPress
   stylent les cellules en .wp-block-table td (0,1,1), dans une feuille
   chargée après celle-ci. */

figure.wp-block-table {
	--if-tableau-radius: 12px;
	--if-tableau-shadow: 0 3px 14px rgba(7, 53, 116, .10);
	--if-tableau-thead-bg: linear-gradient(135deg, #073574 0%, #090366 100%);
	--if-tableau-border: #d0d8f0;
	/* Séparateurs verticaux : 60 % de la couleur des horizontaux (≈ #e3e8f6),
	   pour que la lecture par ligne reste dominante. */
	--if-tableau-border-v: color-mix(in srgb, var(--if-tableau-border) 60%, #fff);
	--if-tableau-thead-separator: rgba(255, 255, 255, .18);
	--if-tableau-row-alt: #f8f9ff;
	--if-tableau-row-hover: #eef2ff;
	--if-tableau-text: #374151;
	--if-tableau-name: #111827;
}

/* La carte, c'est le tableau. Le figure ne fait que défiler : l'indication
   de défilement et la légende restent ainsi hors de la carte, comme la
   légende des tableaux du plugin. */
figure.wp-block-table table {
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	border-radius: var(--if-tableau-radius);
	box-shadow: var(--if-tableau-shadow);
	overflow: hidden;
	color: var(--if-tableau-text);
}

/* Le figure défile (overflow-x: auto) : il rognerait l'ombre de la carte.
   Une marge interne lui laisse la place, compensée par une marge externe
   négative sur les côtés : la zone du tableau (et donc la règle 2) garde
   exactement la largeur de la colonne de texte. Exclu pour les alignements,
   qui ont leurs propres marges. */
.wp-block-table:not(.alignleft, .alignright, .aligncenter, .alignwide, .alignfull) {
	padding: 4px 14px 18px;
	margin-inline: -14px;
}

/* Coins arrondis portés aussi par les cellules d'angle, comme dans le
   plugin : overflow: hidden sur un tableau n'est pas rogné partout. */
figure.wp-block-table table > :first-child > tr:first-child > :first-child { border-top-left-radius: var(--if-tableau-radius); }
figure.wp-block-table table > :first-child > tr:first-child > :last-child  { border-top-right-radius: var(--if-tableau-radius); }
figure.wp-block-table table > :last-child > tr:last-child > :first-child   { border-bottom-left-radius: var(--if-tableau-radius); }
figure.wp-block-table table > :last-child > tr:last-child > :last-child    { border-bottom-right-radius: var(--if-tableau-radius); }

/* Séparateur horizontal au-dessus de chaque ligne du corps, sauf la
   première. Porté par le haut de la cellule (pas le bas) pour qu'une
   cellule fusionnée jusqu'à la dernière ligne ne dessine pas de trait sur
   le bord inférieur de la carte. */
figure.wp-block-table table :is(th, td) {
	border: 0;
	padding: .875rem 1rem;
	vertical-align: middle;
}

figure.wp-block-table table tbody tr:not(:first-child) > :is(th, td) {
	border-top: 1px solid var(--if-tableau-border);
}

/* Séparateurs verticaux légers. Sans eux, les colonnes de valeurs centrées
   se confondent et les cellules fusionnées n'ont plus de bord visible.
   Tracés par une ombre d'1px à gauche de chaque cellule, pas par une
   bordure :
   - aucun effet sur les largeurs (la règle 2 et ses mesures restent valables) ;
   - juste avec les cellules fusionnées : dans une ligne prolongée par un
     rowspan, la première cellule n'est pas en colonne 1, et un sélecteur
     :first-child se tromperait. Ici chaque cellule trace son propre bord
     gauche ;
   - le trait de la colonne 1 tombe hors du tableau, rogné par overflow: hidden. */
figure.wp-block-table table :is(th, td) {
	box-shadow: -1px 0 0 var(--if-tableau-border-v);
}

figure.wp-block-table table thead :is(th, td) {
	box-shadow: -1px 0 0 var(--if-tableau-thead-separator);
}

/* Le gras du corps (noms de contrats, libellés de ligne) prend la couleur
   des noms de produits du plugin (--if-name), plus foncée que le texte. */
figure.wp-block-table table tbody strong {
	color: var(--if-tableau-name);
}

/* En-tête : dégradé porté par la rangée entière, jamais par la cellule.
   Majuscules comme le plugin, mais plus compactes (.85rem et .04em au lieu
   de .95rem et .06em) : les majuscules élargissent les colonnes, et avec
   les valeurs du plugin un tableau de 7 colonnes défilait de 2px sans
   indication à 1440px. Avec ces valeurs, aucune anomalie sur 70 mesures. */
figure.wp-block-table table thead {
	background: var(--if-tableau-thead-bg);
	border: 0;
}

figure.wp-block-table table thead :is(th, td) {
	background: transparent;
	color: #fff;
	font-size: .85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 1rem;
}

/* Zébrage très léger, porté par les cellules (arrondis de la dernière
   ligne). L'ancien zébrage #dfe5f6, posé sur les lignes, est neutralisé. */
figure.wp-block-table table tbody tr {
	background-color: transparent;
}

figure.wp-block-table table tbody tr:nth-child(even) > :is(th, td) {
	background-color: var(--if-tableau-row-alt);
}

/* Règle 5 — Pas de zébrage sur les tableaux à cellules fusionnées.
   Fusions faites dans un tableur puis collées dans le bloc, qui conserve
   rowspan. Le zébrage ligne par ligne colorerait différemment les lignes
   d'un même groupe fusionné. (0,3,5) contre (0,2,5) pour le zébrage. */
figure.wp-block-table table:has([rowspan]) tbody tr:nth-child(even) > :is(th, td) {
	background-color: transparent;
}

/* Survol d'une ligne, souris uniquement (pas de survol collant au doigt).
   :nth-child(n) ne filtre rien : il porte la spécificité à (0,3,5), et la
   règle étant placée après la règle 5, le survol marche aussi sur les
   tableaux à cellules fusionnées. */
@media (hover: hover) {
	figure.wp-block-table table tbody tr:nth-child(n):hover > :is(th, td) {
		background-color: var(--if-tableau-row-hover);
	}
}

/* ==========================================================================
   Règle 1 — Colonnes à la largeur de leur contenu, mots jamais coupés
   ==========================================================================
   L'option « Cellules de largeur fixe » (classe has-fixed-layout, cochée par
   défaut) donne des colonnes égales et coupe les mots n'importe où
   (« Capitalisatio / n »). On l'annule : cette option n'a plus d'effet.

   Spécificités à battre (CSS natif de WordPress) :
   - .wp-block-table .has-fixed-layout              (0,2,0) table-layout: fixed
   - .wp-block-table .has-fixed-layout td           (0,2,1) word-break: break-word
   Pour les tableaux sans cette option, Kadence remet déjà word-break: normal
   sur les cellules (.wp-block-table td, kadence-content.css).

   Tableaux alignés exclus : WordPress les affiche en display: table, qui ne
   défile pas. Seule la coupure des mots les fait tenir dans un écran étroit.
   Sans elle, un tableau centré de 6 colonnes mesure 556px pour 311px de zone
   à 390px de large. Il est alors rogné par #wrapper (overflow-x: clip), et le
   lecteur ne peut pas faire défiler pour voir la partie coupée.
   ========================================================================== */

/* (0,3,1) */
.wp-block-table:not(.alignleft, .alignright, .aligncenter) table.has-fixed-layout {
	table-layout: auto;
}

/* (0,3,2) */
.wp-block-table:not(.alignleft, .alignright, .aligncenter) table.has-fixed-layout :is(th, td) {
	word-break: normal;
}

/* ==========================================================================
   Règle 2 — Budget de lecture : 8.5rem (136px) par colonne, tolérance 90 %
   ==========================================================================
   Place nécessaire = nombre de colonnes × 8.5rem.
   - La zone du tableau fait au moins 90 % de cette place : le tableau tient
     dans la largeur (règle 1 seule).
   - Sinon : le tableau prend la place nécessaire comme largeur minimale et
     défile horizontalement (overflow-x: auto, déjà fourni par WordPress).
   Avec la tolérance, un tableau qui défile dépasse toujours d'au moins ~11 % :
   pas de défilement de quelques pixels.

   Le budget n'est pas une largeur par colonne, c'est la largeur minimale du
   tableau entier : le navigateur la répartit selon le contenu (une colonne de
   ✅ reste étroite, une colonne de texte s'élargit).

   Navigateurs sans requêtes de conteneur ou sans :has() (avant Safari 16,
   Chrome 105, Firefox 121) : la règle est ignorée, le tableau se comporte
   selon la règle 1 seule.
   ========================================================================== */

/* Le figure devient le conteneur de requête, sous un nom propre : les
   requêtes ci-dessous ne peuvent interroger que lui, jamais un conteneur
   ancêtre ajouté un jour par Kadence ou une extension.
   Tableaux alignés exclus : WordPress leur donne display: table; width: auto
   (largeur au contenu), incompatible avec container-type: inline-size
   (le figure s'écraserait). */
.wp-block-table:not(.alignleft, .alignright, .aligncenter) {
	container: if-tableau / inline-size;
}

/* Seuil = n × 8.5rem × 0.9 ; largeur minimale = n × 8.5rem.
   Nombre de colonnes : :has(tr > :nth-child(n)) = « au moins une ligne a n
   cellules ». Avec des cellules fusionnées, les lignes complètes (en-tête,
   premières lignes) portent le bon nombre.
   L'ORDRE CROISSANT EST OBLIGATOIRE : à spécificité égale, la dernière règle
   gagne, donc celle du plus grand nombre de colonnes.

   Chaque bloc affiche aussi l'indication de défilement (règle 6) : mêmes
   conditions, donc elle apparaît exactement quand le tableau défile. */
@container if-tableau (width < 15.3rem) {
	.wp-block-table table:has(tr > :nth-child(2)) { min-width: 17rem; }
	.wp-block-table:has(tr > :nth-child(2))::before { display: block; }
}
@container if-tableau (width < 22.95rem) {
	.wp-block-table table:has(tr > :nth-child(3)) { min-width: 25.5rem; }
	.wp-block-table:has(tr > :nth-child(3))::before { display: block; }
}
@container if-tableau (width < 30.6rem) {
	.wp-block-table table:has(tr > :nth-child(4)) { min-width: 34rem; }
	.wp-block-table:has(tr > :nth-child(4))::before { display: block; }
}
@container if-tableau (width < 38.25rem) {
	.wp-block-table table:has(tr > :nth-child(5)) { min-width: 42.5rem; }
	.wp-block-table:has(tr > :nth-child(5))::before { display: block; }
}
@container if-tableau (width < 45.9rem) {
	.wp-block-table table:has(tr > :nth-child(6)) { min-width: 51rem; }
	.wp-block-table:has(tr > :nth-child(6))::before { display: block; }
}
@container if-tableau (width < 53.55rem) {
	.wp-block-table table:has(tr > :nth-child(7)) { min-width: 59.5rem; }
	.wp-block-table:has(tr > :nth-child(7))::before { display: block; }
}
@container if-tableau (width < 61.2rem) {
	.wp-block-table table:has(tr > :nth-child(8)) { min-width: 68rem; }
	.wp-block-table:has(tr > :nth-child(8))::before { display: block; }
}
@container if-tableau (width < 68.85rem) {
	.wp-block-table table:has(tr > :nth-child(9)) { min-width: 76.5rem; }
	.wp-block-table:has(tr > :nth-child(9))::before { display: block; }
}
@container if-tableau (width < 76.5rem) {
	.wp-block-table table:has(tr > :nth-child(10)) { min-width: 85rem; }
	.wp-block-table:has(tr > :nth-child(10))::before { display: block; }
}

/* ==========================================================================
   Règle 3 — Taille de police
   ==========================================================================
   .9rem sur tous les écrans, comme les tableaux du plugin (--if-body-size).
   Remplace l'ancienne règle « .9em sur mobile » : sur ordinateur, le texte
   du site est à 17px, ce qui élargissait les colonnes.
   La règle 2 est en rem : ses seuils ne dépendent pas de cette police. */

figure.wp-block-table table {
	font-size: .9rem;
}

/* ==========================================================================
   Règle 4 — Légende visible pendant le défilement, décollée du tableau
   ==========================================================================
   Le figcaption fait la largeur visible du figure (le conteneur qui défile).
   Avec sticky + left: 0, il reste centré sur la partie visible quand le
   tableau défile. Kadence le centre déjà (text-align: center).
   Taille, couleur et écart repris de la légende du plugin
   (.if-table__caption) : .75rem sous la carte, hors de son ombre.
   (0,1,2) contre (0,1,1) pour la règle Kadence, chargée après. */

figure.wp-block-table figcaption {
	position: sticky;
	left: 0;
	margin-top: .75rem;
	font-size: .85em;
	color: #666;
}

/* Règle 5 : voir la section Apparence (le zébrage est porté par les
   cellules, la règle qui le retire doit les viser aussi). */

/* ==========================================================================
   Règle 6 — Indication explicite de défilement
   ==========================================================================
   Sur iOS, Android et macOS (trackpad), la barre de défilement est masquée
   par le système et n'apparaît que pendant le geste ; Safari iOS ignore le
   CSS qui la stylise. Sans indication, le lecteur ne sait pas que des colonnes
   sont cachées à droite.

   Le texte est placé au-dessus du tableau, aligné à droite (vers la partie
   cachée), et reste visible pendant le défilement (sticky, comme la légende).
   Masqué par défaut : la règle 2 l'affiche, dans les mêmes conditions que la
   largeur minimale. Sans requêtes de conteneur, il ne s'affiche jamais.

   Le second « content » donne un texte alternatif vide : les lecteurs d'écran
   ne lisent pas cette consigne visuelle. Les navigateurs qui ne comprennent
   pas cette syntaxe gardent la première déclaration. */

.wp-block-table:not(.alignleft, .alignright, .aligncenter)::before {
	content: "Faites glisser le tableau →";
	content: "Faites glisser le tableau →" / "";
	display: none;
	position: sticky;
	left: 0;
	margin-bottom: .5rem;
	text-align: right;
	font-size: 85%;
	font-weight: 600;
	color: #073574;
}

/* Souris ou trackpad : on ne « glisse » pas, on fait défiler. */
@media (pointer: fine) {
	.wp-block-table:not(.alignleft, .alignright, .aligncenter)::before {
		content: "Faites défiler le tableau →";
		content: "Faites défiler le tableau →" / "";
	}
}

/* ==========================================================================
   Chiffres tabulaires
   ==========================================================================
   Tous les chiffres ont la même largeur : les montants et pourcentages
   (« +2,70 % », « 1 000 € ») s'alignent d'une ligne à l'autre. */

.wp-block-table :is(th, td) {
	font-variant-numeric: tabular-nums;
}
