/**
 * Horaires — les quatre mises en forme de [ck_horaires], de la balise dynamique
 * « Horaires CercleKit » et du widget Elementor cd_horaires.
 *
 * Feuille de FRONT : elle habille le site du client, pas notre interface. Donc
 * aucune couleur imposée (tout est `currentColor`), aucune police, et des
 * espacements en `em` — les horaires prennent la typo et la couleur de l'endroit
 * où on les dépose. La seule chose qu'on impose, c'est la mise en page.
 *
 * Les quatre mesures réglables passent par des variables : le widget les écrit
 * dans `{{WRAPPER}}` depuis ses curseurs, et les valeurs ci-dessous restent les
 * défauts pour le shortcode et la balise dynamique, qui n'ont pas de curseurs.
 *
 * Elle n'est enfilée que si render_horaires() produit quelque chose.
 */

/* Nos enveloppes sont des <span> — voir la note de class-infos-generales.php :
   la sortie doit pouvoir vivre à l'intérieur d'un <p> de widget Elementor. Le
   CSS leur rend le comportement de blocs. */
.ck-horaires-bloc,
.ck-horaires,
.ck-horaires__tete,
.ck-horaires__fermeture,
.ck-horaires__fermeture-texte,
.ck-horaires__p,
.ck-horaires--colonnes .ck-horaires__ligne,
.ck-horaires--groupe .ck-horaires__ligne {
    display: block;
}

/* Les paragraphes du message de fermeture, quand la balise dynamique les rend
   en ligne : le <p> de l'hôte est déjà là, on ne peut pas en ouvrir un second.
   Les <span> n'ont pas de marge par défaut — sans cette règle, deux paragraphes
   se collent. */
.ck-horaires__p + .ck-horaires__p {
    margin-top: 0.6em;
}

/* Sauf « une seule ligne », qui vit justement sur une ligne. */
.ck-horaires--ligne,
.ck-horaires--ligne .ck-horaires__ligne {
    display: inline;
}

.ck-horaires-bloc,
.ck-horaires {
    /* L'alignement passe par une variable, et JAMAIS par un `text-align` posé
       en dur sur une variante : sinon la variante gagne contre le réglage de
       l'utilisateur, et le contrôle « Alignement » ne fait rien — c'est le
       défaut qu'avait « groupé », signalé par Kévin le 2026-08-11.

       ⚠️ ET LE DÉFAUT EST `inherit`, PAS `start`. Mesuré sur
       scierie.cercledesign.fr, page « Le Magasin » : les horaires déposés dans
       une cellule de tableau sortaient CENTRÉS (`--ckh-align: center` de la
       variante « groupé ») alors que la cellule est en `ck-al-left`. Symétrie
       du même défaut : `start` aurait maintenu le bloc à gauche dans une
       cellule centrée. Hors du widget cd_horaires, il n'existe AUCUN contrôle
       pour rattraper ça.
       `inherit` fait suivre l'endroit où on pose les horaires — ce que dit
       l'en-tête de ce fichier : « les horaires prennent la typo et la couleur
       de l'endroit où on les dépose ». L'alignement ne fait pas exception. */
    --ckh-align: inherit;

    text-align: var(--ckh-align);
}

.ck-horaires {
    /* Écart VERTICAL entre deux lignes — la respiration entre deux groupes
       de jours. C'est la mesure qu'on règle le plus souvent. */
    --ckh-gap-y: 0.35em;
    /* Écart HORIZONTAL entre le jour et ses heures. */
    --ckh-gap-x: 1.5em;
    /* Filet de séparation : épaisseur nulle = pas de filet. */
    --ckh-sep-w: 0px;
    --ckh-sep-c: rgba(128, 128, 128, 0.3);

    /* Poids du jour en cours et du titre de fermeture : des VARIABLES, pas des
       valeurs. Le widget les réécrit, et surtout un poids en dur écrasait la
       typographie du widget Elementor dans lequel on dépose la balise
       dynamique — « ça doit prendre le style que je définis dans le widget ».*/
    --ckh-poids-actif: 600;
    --ckh-poids-titre: 600;

    margin: 0;
    /* TOUT EST HÉRITÉ. Ni taille, ni graisse, ni couleur, ni police ici : les
       horaires prennent celles de l'endroit où on les pose — y compris quand
       la balise dynamique les dépose dans un widget Elementor qui a sa propre
       typographie. ⚠️ `font` est un raccourci : il remet aussi
       `font-variant-numeric`, il doit donc passer AVANT la ligne suivante. */
    /* ⚠️ NI POLICE NI COULEUR ICI. Ajouté en 4.2.843 « par symétrie », il
       écrasait le mode sombre du site, qui colore les `p` : la couleur ne
       changeait plus. La couleur n'a jamais eu besoin d'être forcée — `font`
       ne la contient pas, et elle cascade toute seule. Régression signalée
       par Kévin le 2026-08-11. */
    /* ⚠️ PAS DE `font-variant-numeric: tabular-nums` ICI, ET C'EST MESURÉ.
       Il y était pour aligner les chiffres en colonne. Mais les chiffres
       tabulaires d'une police ne sont pas les mêmes DESSINS que les chiffres
       courants : sur Montserrat, dix « 1 » font 99,8 px en tabulaire contre
       53,8 px en normal — le « 1 » tabulaire porte un pied, un empattement que
       le reste du site n'a pas. Kévin l'a vu sur lesescaliersmougin.fr : le
       « 1 » des horaires ne ressemblait pas au « 1 » du téléphone posé juste
       au-dessus, dans la même police.

       L'alignement promis n'existait de toute façon pas : les lignes n'ont pas
       la même longueur (« 07:00 – 12:00, 13:30 – 16:30 » contre
       « 07:00 – 12:00 »), il n'y a aucune colonne de chiffres à empiler. On
       payait un dessin étranger pour un gain nul. Les heures prennent donc les
       chiffres du site, comme le reste. */
}

/* Le filet est l'identité de la variante « colonnes » — il y est par défaut. */
.ck-horaires--colonnes {
    --ckh-sep-w: 1px;
}

@supports (color: color-mix(in srgb, currentColor 20%, transparent)) {
    /* Un filet qui suit la couleur du texte, donc lisible sur fond clair
       comme sur fond sombre. Le `rgba` gris ci-dessus reste le repli. */
    .ck-horaires {
        --ckh-sep-c: color-mix(in srgb, currentColor 20%, transparent);
    }
}

.ck-horaires__jour {
    white-space: nowrap;
}

/* LA VALEUR PEUT PASSER À LA LIGNE — c'est la PLAGE qui ne se coupe pas.
   Avant, `nowrap` était sur la valeur entière : une journée à deux plages
   (« 07:00 – 12:00, 13:30 – 16:30 ») sortait du cadre dès qu'on la posait dans
   une colonne de téléphone. Mesuré sur une fiche de 300 px : 40 px de trop,
   le texte passait par-dessus la bordure. Signalé par Kévin.

   Le retour à la ligne se fait donc à la virgule, et là seulement : chaque
   plage est enveloppée par le rendu et reste d'un bloc. Sans cette enveloppe,
   le navigateur coupait après le tiret — « 13:30 – » d'un côté, « 16:30 » de
   l'autre. Mesuré aussi. */
.ck-horaires__val {
    white-space: normal;
}
.ck-horaires__plage {
    white-space: nowrap;
}

.ck-horaires__ligne.is-ferme .ck-horaires__val {
    opacity: 0.65;
}

/* --- Tableau -------------------------------------------------------------
   Les cellules sont écrites avec DEUX classes du composant (0,2,2) pour
   passer devant les `.elementor-widget-text-editor table td` des thèmes, qui
   sont exactement à 0,2,2 mais peuvent être chargés après nous. Sans ça, le
   tableau récupère les bordures grises du thème — c'est le défaut d'origine. */
table.ck-horaires.ck-horaires--tableau {
    width: auto;
    background: none;
    border: 0;
    border-collapse: collapse;
}

table.ck-horaires.ck-horaires--tableau th,
table.ck-horaires.ck-horaires--tableau td {
    padding: calc(var(--ckh-gap-y) / 2) 0;
    /* ⚠️ `text-align: left` était ICI EN DUR — 0,2,2 sur les cellules, donc il
       battait l'héritage de `--ckh-align` et le contrôle « Alignement » ne
       commandait RIEN en mise en forme « Tableau ». C'est le même oubli que
       celui corrigé pour « groupé » le 2026-08-11, relevé au §7.2 du prompt de
       reprise : la variante avait été laissée derrière. */
    text-align: var(--ckh-align);
    vertical-align: baseline;
    background: none;
    border: 0;
    border-bottom: var(--ckh-sep-w) solid var(--ckh-sep-c);
    font-weight: inherit;
}

table.ck-horaires.ck-horaires--tableau th {
    padding-right: var(--ckh-gap-x);
}

table.ck-horaires.ck-horaires--tableau tr:last-child th,
table.ck-horaires.ck-horaires--tableau tr:last-child td {
    border-bottom: 0;
}

/* --- Le même tableau, sans <table> ---------------------------------------
   La balise dynamique se dépose dans un <p> de widget : un <table> n'y tient
   pas plus qu'un <p>. La liste sort alors en <span>, et la grille lui rend ses
   deux colonnes alignées à gauche — même écarts, même filet, même résultat à
   l'œil que la version <table>. `display: contents` fait passer le jour et les
   heures directement dans la grille, sans casser la ligne comme élément. */
span.ck-horaires--tableau {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    column-gap: var(--ckh-gap-x);
}

span.ck-horaires--tableau .ck-horaires__ligne {
    display: contents;
}

span.ck-horaires--tableau .ck-horaires__jour,
span.ck-horaires--tableau .ck-horaires__val {
    padding: calc(var(--ckh-gap-y) / 2) 0;
    border-bottom: var(--ckh-sep-w) solid var(--ckh-sep-c);
    /* Même règle que la version <table> : jamais d'alignement en dur. */
    text-align: var(--ckh-align);
}

span.ck-horaires--tableau .ck-horaires__ligne:last-child .ck-horaires__jour,
span.ck-horaires--tableau .ck-horaires__ligne:last-child .ck-horaires__val {
    border-bottom: 0;
}

/* --- Groupé, centré ------------------------------------------------------
   Centré par DÉFAUT, pas de force : le contrôle « Alignement » écrit la même
   variable et reprend donc la main.

   ⚠️ MAIS SEULEMENT DANS LE WIDGET, et c'est tout le point. Le widget
   `cd_horaires` possède ce contrôle : y centrer par défaut est une proposition
   que l'utilisateur peut refuser. La balise dynamique et le shortcode, eux,
   n'ont AUCUN réglage d'alignement — un centrage y devient une contrainte
   qu'on ne peut pas lever. Constaté sur la page « Le Magasin » de
   scierie.cercledesign.fr : horaires centrés dans une cellule alignée à
   gauche, avec tout le reste du tableau à gauche.
   Hors widget, on hérite donc de l'hôte (voir `--ckh-align: inherit`). */
.elementor-widget-cd_horaires .ck-horaires-bloc--groupe,
.elementor-widget-cd_horaires .ck-horaires--groupe {
    --ckh-align: center;
}

.ck-horaires--groupe .ck-horaires__ligne {
    padding: calc(var(--ckh-gap-y) / 2) 0;
    border-bottom: var(--ckh-sep-w) solid var(--ckh-sep-c);
}

.ck-horaires--groupe .ck-horaires__ligne:last-child {
    border-bottom: 0;
}

/* --- Deux colonnes alignées ---------------------------------------------- */
.ck-horaires--colonnes .ck-horaires__ligne {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ckh-gap-x);
    padding: calc(var(--ckh-gap-y) / 2) 0;
    border-bottom: var(--ckh-sep-w) solid var(--ckh-sep-c);
}

.ck-horaires--colonnes .ck-horaires__ligne:last-child {
    border-bottom: 0;
}

/* --- Une seule ligne ----------------------------------------------------- */
.ck-horaires--ligne .ck-horaires__ligne + .ck-horaires__ligne::before {
    content: "·";
    margin: 0 0.5em;
    opacity: 0.5;
}

/* --- L'écart jour ↔ heures sur les deux variantes qui n'ont pas deux colonnes
   ---------------------------------------------------------------------------
   « groupé » et « une seule ligne » écrivent le jour et ses heures d'un seul
   tenant : sans ces deux règles, le curseur « Écart entre le jour et les
   heures » ne commandait RIEN sur ces deux mises en forme, et se taisait.
   Le défaut est 0 — l'espace du texte suffit — donc le rendu ne bouge pas tant
   que personne ne touche au curseur, et il répond dès qu'on y touche. */
.ck-horaires--groupe,
.ck-horaires--ligne {
    --ckh-gap-x: 0;
}

.ck-horaires--groupe .ck-horaires__sep {
    padding: 0 calc(var(--ckh-gap-x) / 2);
}

.ck-horaires--ligne .ck-horaires__val {
    margin-left: var(--ckh-gap-x);
}

/* --- Jour en cours -------------------------------------------------------
   Posé par cd-horaires.js, jamais par le serveur : voir l'en-tête du script. */
.ck-horaires__ligne.is-aujourdhui .ck-horaires__jour,
.ck-horaires__ligne.is-aujourdhui .ck-horaires__val {
    font-weight: var(--ckh-poids-actif);
}

/* --- Titre et pastille d'état -------------------------------------------- */
/* La tête n'est PAS en flex : en `text-align`, elle suit l'alignement du bloc
   sans qu'on ait à traduire gauche/centre/droite en flex-start/center/flex-end
   — une traduction que `justify-content: left` ne fait pas partout. */
.ck-horaires__tete {
    /* Écart entre le titre et la pastille. */
    --ckh-tete-gap: 0.75em;

    margin-bottom: 0.6em;
}

.ck-horaires__titre {
    display: inline-block;
    margin: 0;
    vertical-align: baseline;
}

.ck-horaires__titre + .ck-horaires__etat {
    margin-left: var(--ckh-tete-gap);
}

/* --- Période de fermeture ------------------------------------------------
   Masquée ou montrée par le serveur au rendu, puis corrigée par le script si
   la page vient d'un cache. `[hidden]` est renforcé : des thèmes posent un
   `display` sur les div qui l'annulerait. */
.ck-horaires__fermeture[hidden],
.ck-horaires[hidden] {
    display: none !important;
}

.ck-horaires__fermeture {
    margin-bottom: 0.6em;
}

.ck-horaires__fermeture-titre {
    font-weight: var(--ckh-poids-titre);
}

.ck-horaires__fermeture-texte > :first-child { margin-top: 0; }
.ck-horaires__fermeture-texte > :last-child  { margin-bottom: 0; }

/* Vide tant que le navigateur n'a pas tranché : `:empty` évite qu'une pastille
   sans texte laisse un pavé de couleur pendant le chargement. */
.ck-horaires__etat:empty {
    display: none;
}

/* Tout est réglable depuis la section « Pastille » du widget : Elementor écrit
   ses règles sous `.elementor-element-XXX .ck-horaires__etat`, plus spécifique
   que celles-ci, qui ne sont donc que les valeurs de départ. */
.ck-horaires__etat {
    display: inline-block;
    padding: 0.15em 0.7em;
    border-radius: 999px;
    border: 1px solid currentColor;
    /* En `em` : la pastille suit la taille de son entourage plutôt que d'en
       imposer une. */
    font-size: 0.8em;
    line-height: 1.5;
    white-space: nowrap;
}