/* Parresia-F — À la une sponsorisée : disposition grand écran.
   Les jetons du thème Parresia (tokens.css : --font-titre, --c-encre, --fs-titre-m…)
   sont lus en premier ; les presets WordPress puis des valeurs sûres servent de repli.
   Les règles par appareil (grand écran, tablette, mobile) sont générées depuis
   responsive.css.tpl + device-rules.css.tpl avec les seuils du site. */
.dcsf-featured{
  /* Repli = charte Parresia (valeurs relevées sur dentaire365) : le bloc reste fidèle au design
     même quand le thème Parresia n'est pas actif. Les polices Libre Franklin / Source Serif 4
     sont chargées par le plugin si l'option « polices hors thème » est cochée. */
  --dcsf-accent:var(--c-rouge,var(--wp--preset--color--primary,#C8102E));
  --dcsf-ink:var(--c-encre,#0E1B3C);
  --dcsf-text:var(--c-texte,#16181D);
  --dcsf-paper:var(--c-papier,#fff);
  --dcsf-muted:var(--c-texte-doux,#5C6472);
  --dcsf-line:var(--c-filet,#DEE1E7);
  --dcsf-panel:#eef0f3;
  --dcsf-surface:var(--c-trame,#F4F5F7);
  --dcsf-sponsor-name:var(--c-sponsor-nom,#4A5261);
  --dcsf-heading:var(--font-titre,'Libre Franklin',system-ui,-apple-system,'Segoe UI',Arial,sans-serif);
  --dcsf-body:var(--font-texte,'Source Serif 4',Georgia,'Times New Roman',serif);
  /* 2.1.0 — polices relatives (François, 29/09 : « pas de titre sur 5 lignes »). Chaque zone de
     texte (carte, corps de carte, texte de la une) est un conteneur : 1cqi = 1 % de la largeur
     dont dispose réellement le texte. Les jetons du thème deviennent des plafonds ; sous ces
     plafonds, le corps suit la largeur, donc le nombre de caractères par ligne reste à peu près
     constant. Les planchers gardent la lecture confortable. Les unités cqi restent en jetons
     dans ces variables : elles sont évaluées là où la variable est utilisée. Les titres de carte
     sont en plus ajustés à leur longueur (voir .dcsf-featured .dcsf-card plus bas). */
  --dcsf-fs-hero:var(--fs-une-carte,24px);--dcsf-lh-hero:var(--lh-titre-l,1.25);
  --dcsf-fs-title-m:clamp(13px,9cqi,var(--fs-titre-m,18px));--dcsf-lh-title-m:var(--lh-titre-m,1.3);
  --dcsf-fs-title-s:clamp(13px,9cqi,var(--fs-titre-s,16px));--dcsf-lh-title-s:var(--lh-titre-s,1.35);
  --dcsf-fs-excerpt:clamp(13px,6cqi,var(--fs-chapo,15px));--dcsf-lh-excerpt:var(--lh-chapo,1.5);
  --dcsf-fs-meta:clamp(11px,5cqi,var(--fs-folio,12.5px));--dcsf-lh-meta:var(--lh-folio,1.4);
  --dcsf-fs-kicker:clamp(10px,4.6cqi,var(--fs-surtitre,12px));--dcsf-ls-kicker:var(--ls-surtitre,.08em);--dcsf-e-kicker:var(--e-surtitre-titre,2px);
  --dcsf-radius:var(--r-image,10px);--dcsf-radius-block:var(--r-bloc,12px);
  --dcsf-e4:var(--e4,16px);--dcsf-e5:var(--e5,20px);
  /* Variables pilotées par responsive.css.tpl (vignette des listes, largeur de diapositive, lignes d'extrait). */
  --dcsf-thumb:190px;--dcsf-thumb-2col:38%;--dcsf-slide:calc(50% - 8px);--dcsf-clamp:3;--dcsf-row-gap:var(--dcsf-e5);--dcsf-row-space:22px;--dcsf-panel-pad:14px;--dcsf-2col-gap:28px;--dcsf-col-2rows:calc((100% - 24px) / 3);
  container: dcsf-featured / inline-size;
  display:flex;flex-direction:column;gap:28px;color:var(--dcsf-ink);box-sizing:border-box
}
.dcsf-featured *{box-sizing:border-box}.dcsf-featured a{color:inherit;text-decoration:none}.dcsf-featured a:hover{color:var(--dcsf-accent)}
/* Ergonomie (critique UX 07/09) : toute la carte et toute la une sont cliquables grâce à un lien
   « étiré » (masqué aux lecteurs d'écran et au clavier : les liens visibles restent la voie d'accès) ;
   les éléments interactifs visibles passent au-dessus. Focus clavier visible sur tout le bloc. */
.dcsf-card{position:relative}
.dcsf-card__link,.dcsf-hero__link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.dcsf-card__media,.dcsf-card h3 a,.dcsf-card .dcsf-read-more,.dcsf-hero__media,.dcsf-hero h2 a,.dcsf-hero__cta,.dcsf-hero .dcsf-read-more{position:relative;z-index:2}
/* 2.1.0 — zones de texte en conteneurs (polices relatives). Un conteneur crée un contexte
   d'empilement : le texte passe donc au-dessus du lien étiré, mais laisse passer les clics
   (pointer-events) sauf sur ses propres liens. La carte est aussi conteneur : quand son corps
   est en display:contents (compacte, listes mobiles), c'est la carte qui sert de référence. */
.dcsf-card{container-type:inline-size}
.dcsf-card__body,.dcsf-hero__copy{container-type:inline-size;position:relative;z-index:2;pointer-events:none}
.dcsf-card__body a,.dcsf-hero__copy a{pointer-events:auto}
/* 2.4.0 (François, 19/10 : « conserver la même taille de police pour les titres et adapter la
   longueur de l'extrait pour que les tailles de cartes soient uniformes »). Les titres de carte ne
   sont plus ajustés à leur longueur (2.1.0, --dcsf-fit) : un titre long n'est plus composé plus
   petit que ses voisins, il prend une ligne de plus et c'est l'extrait qui raccourcit
   (assets/even-cards.js). Le corps reste relatif à la largeur du texte : jeton du thème, réduit à
   9 % de la largeur dans un bloc étroit, jamais moins de 13 px. even-cards.js aligne en plus les
   cartes partenaires (texte plus étroit de leur marge intérieure) sur le corps des cartes
   éditoriales. --dcsf-len-title / --dcsf-len-inline ne servent plus que pour la une. */
.dcsf-featured .dcsf-card{
  --dcsf-fs-title-m:clamp(13px,9cqi,var(--fs-titre-m,18px));
  --dcsf-fs-title-s:clamp(13px,9cqi,var(--fs-titre-s,16px));
  --dcsf-fs-title-press:clamp(13px,9cqi,var(--dcsf-cap-press,var(--fs-titre-m,18px)))
}
/* Réglages d'even-cards.js : lignes d'extrait au moins / au plus dans les cartes verticales. */
.dcsf-featured{--dcsf-ex-min:2;--dcsf-ex-max:4}
.dcsf-featured a:focus-visible,.dcsf-dots__dot:focus-visible,.dcsf-dots__arrow:focus-visible,.dcsf-featured [tabindex="0"]:focus-visible{outline:2px solid var(--dcsf-accent);outline-offset:2px}

/* ---- Mise en avant ---- */
/* 2.2.0 (François, 29/09) : retour au format 1.13, calé sur le hero de Parresia Blocks (relevé préprod
   07/09) — fond encre, étiquette « À la une », sur-titre blanc, titre Libre Franklin, chapô serif,
   date en pied, texte à gauche (40 % avec un plancher à --col-droite, 300 px), image à droite.
   Côte à côte à toutes les largeurs, mobile compris (François, 29/09) ; la boîte a toujours la hauteur
   de l'image entière, qui remplit sa colonne, et le texte s'adapte à cette hauteur (2.2.1, François
   30/09 ; règles dans device-rules.css.tpl). La colonne de texte s'élargit quand le bloc rétrécit :
   --dcsf-hero-col, ci-dessous (largeur du BLOC, pas de l'écran). */
.dcsf-hero{--dcsf-hero-col:minmax(var(--col-droite,300px),var(--dcsf-hero-text-width,40%));position:relative;display:grid;grid-template-columns:var(--dcsf-hero-col) minmax(0,1fr);min-height:320px;border-radius:var(--dcsf-radius-block);overflow:hidden;background:var(--dcsf-ink);color:#fff}
@container dcsf-featured (max-width:700px){.dcsf-hero{--dcsf-hero-col:minmax(0,45%)}}
@container dcsf-featured (max-width:500px){.dcsf-hero{--dcsf-hero-col:minmax(0,50%)}}
.dcsf-hero__label{position:absolute;top:18px;left:18px;z-index:2;padding:7px 10px;border-radius:4px;background:var(--dcsf-accent);color:#fff;font:800 clamp(10px,1.5cqi,12px)/1 var(--dcsf-heading);letter-spacing:.06em;text-transform:uppercase}
.dcsf-hero__copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:58px 28px 24px}
/* Sur-titre § 5.2 du thème Parresia (.kicker) : Libre Franklin 700, --fs-surtitre, --ls-surtitre, rouge, collé au titre. */
.dcsf-kicker{display:block;margin:0 0 var(--dcsf-e-kicker);color:var(--dcsf-accent);font:700 var(--dcsf-fs-kicker)/1.25 var(--dcsf-heading);letter-spacing:var(--dcsf-ls-kicker);text-transform:uppercase}
.dcsf-hero .dcsf-kicker{color:#fff;opacity:.82;font-size:clamp(10px,4.5cqi,12px);letter-spacing:.08em;margin-bottom:12px}
/* Sur-titre en tête de titre (satellifacts.com) : même police et corps que le titre, en rouge. */
.dcsf-kicker--inline{display:none;margin:0;font:inherit;letter-spacing:inherit;text-transform:none;color:var(--dcsf-accent)}
.dcsf-hero .dcsf-kicker--inline{color:#ff9aa8;opacity:1;font-size:inherit;letter-spacing:inherit}
/* Lien « Lire la suite… » en fin de chapô et mention de mise à jour (Satellifacts). */
.dcsf-read-more{font-style:italic;color:var(--dcsf-muted);white-space:nowrap}
.dcsf-read-more:hover{color:var(--dcsf-accent)}
.dcsf-updated{display:block;margin:0 0 3px;color:var(--dcsf-muted);font:600 clamp(9px,4cqi,10.5px)/1.3 var(--dcsf-heading);letter-spacing:.06em;text-transform:uppercase}
.dcsf-hero .dcsf-updated{color:#b8c0cf}
/* Titre : polices relatives (2.1.0) appliquées au format 1.13. Le corps est le plus petit de :
   10 % de la colonne de texte (cqi = % de .dcsf-hero__copy), la taille qui fait tenir le titre en
   ≈ 3,4 lignes (largeur × lignes ÷ (signes × 0,55 em, Libre Franklin gras) ; --dcsf-len posé par le
   serveur sur le h2) et le jeton du thème --fs-une-carte (24 px), jamais moins de 15 px. Pas de coupe
   par défaut : le réglage « Nombre maximal de lignes du titre » pose -webkit-line-clamp s'il est
   renseigné (hero_css). */
.dcsf-hero h2{--dcsf-len:var(--dcsf-len-title,80)}
.dcsf-hero h2{font:700 clamp(15px,min(10cqi,100cqi * var(--dcsf-fit-lines,3.4) / (var(--dcsf-len,80) * var(--dcsf-em-card,.55))),var(--dcsf-fs-hero))/var(--dcsf-lh-hero) var(--dcsf-heading);letter-spacing:-.01em;margin:0;overflow-wrap:break-word;hyphens:auto;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;flex-shrink:0}.dcsf-hero h2 a:hover{color:#fff;text-decoration:underline}
/* Chapô : 3 lignes par défaut (réglage « lignes de l'extrait » à 0) ; côte à côte, 2 lignes sous 800 px
   de bloc et masqué sous 700 px (device-rules.css.tpl). */
.dcsf-hero p{color:var(--c-nuit-chapo,#C4CBDC);font:clamp(13px,5.6cqi,var(--fs-chapo,15px))/var(--dcsf-lh-excerpt) var(--dcsf-body);margin:12px 0 0;max-width:34ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Une en carrousel (maquette « À la une ») : plusieurs mises en avant qui défilent, calage par article. */
.dcsf-heroes{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:var(--dcsf-radius-block)}
.dcsf-heroes::-webkit-scrollbar{display:none}
.dcsf-heroes>.dcsf-hero{flex:0 0 100%;min-width:0;scroll-snap-align:start}
/* 2.2.0 : chaque une garde la hauteur de sa propre image (sinon toutes prennent celle de la plus haute,
   avec une bande vide sous les images plus basses — constat du 29/09, 51 px). */
.dcsf-heroes{align-items:flex-start}
.dcsf-hero__cta{display:inline-block;flex-shrink:0;margin-top:14px;padding:9px 18px;border-radius:5px;background:var(--dcsf-accent);color:#fff;font:700 clamp(11px,4.4cqi,13px)/1 var(--dcsf-heading);letter-spacing:.02em}
.dcsf-hero__cta:hover{background:var(--c-rouge-h,#a50d26);color:#fff}
/* Points de navigation (assets/swipe.js) : rouge allongé pour la page courante, comme la maquette. */
.dcsf-dots{display:flex;justify-content:center;align-items:center;gap:2px;margin:-18px 0 0;padding:0}
.dcsf-dots[hidden]{display:none}
/* Le point visible reste à 8 px, mais le bouton offre une cible tactile de 32 × 32 px. */
.dcsf-dots__dot{position:relative;width:32px;height:32px;padding:0;border:0;border-radius:16px;background:none;cursor:pointer}
.dcsf-dots__dot::before{content:"";position:absolute;top:12px;left:12px;width:8px;height:8px;border-radius:4px;background:var(--dcsf-line);transition:width .25s,left .25s,background .2s}
.dcsf-dots__dot.is-active{width:46px}
.dcsf-dots__dot.is-active::before{left:12px;width:22px;background:var(--dcsf-accent)}
/* Flèches précédent / suivant : à la souris seulement, dès la tablette large ; au doigt, on balaie. */
.dcsf-dots__arrow{display:none;align-items:center;justify-content:center;width:32px;height:32px;margin:0 6px;padding:0;border:1px solid var(--dcsf-line);border-radius:50%;background:#fff;color:var(--dcsf-ink);font:700 18px/1 var(--dcsf-heading);cursor:pointer}
.dcsf-dots__arrow:hover{border-color:var(--dcsf-accent);color:var(--dcsf-accent)}
.dcsf-dots__arrow[disabled]{opacity:.35;cursor:default}
@media (min-width:768px) and (hover:hover){.dcsf-dots__arrow{display:inline-flex}}
/* Folio § 2.1 du thème (.meta) : serif, --fs-folio, texte doux, séparateur rouge. */
.dcsf-meta{margin-top:auto;padding-top:var(--e2,8px);color:var(--dcsf-muted);font:var(--dcsf-fs-meta)/var(--dcsf-lh-meta) var(--dcsf-body);letter-spacing:.01em}.dcsf-meta__sep{color:var(--dcsf-accent)}.dcsf-hero .dcsf-meta{color:#b8c0cf}.dcsf-hero .dcsf-meta__sep{color:#b8c0cf}
.dcsf-hero__media,.dcsf-card__media{position:relative;display:block;overflow:hidden;background:#dfe3ea}
/* Le ratio 1000/550 est porté par le visuel, pas par la mise en avant entière : un titre long
   agrandit la carte au lieu d'être rogné (défaut 1.2.x). */
/* Largeur contrainte par la grille, hauteur déduite du ratio, image hors du flux. */
.dcsf-hero__media{width:100%;max-width:100%;min-width:0;height:auto;min-height:0;aspect-ratio:1000/550}
.dcsf-hero__image,.dcsf-card__image,.dcsf-placeholder{display:block;width:100%;height:100%;object-fit:cover}
.dcsf-placeholder{min-height:100%;background:linear-gradient(135deg,#cbd3e3,#8f9bb0)}
.dcsf-hero .dcsf-card__by{margin:10px 0 0;color:#d7dce6}.dcsf-hero .dcsf-card__by strong{color:#fff}

/* ---- En-tête de section (titre du bloc) ----
   2.2.0 (François, 29/09 : « la bonne font avec le format pour les titres des blocs ») : format de
   l'en-tête de rubrique du thème Parresia (.sec-head, § 5.1) — barre rouge 26 × 3, titre en capitales,
   Libre Franklin 400, interlettrage --ls-rubrique, filet extensible, pilule « Tout voir » (.pill).
   Corps relatif : le jeton --fs-rubrique (26 px) au plus, réduit dans un bloc étroit (6 % de sa
   largeur), jamais sous 20 px. Mêmes règles pour « À la une sponsorisée » et le Module catégorie. */
.dcsf-section-head{display:flex;align-items:center;gap:var(--e3,12px)}
.dcsf-section-head__bar{width:26px;height:3px;background:var(--dcsf-accent);flex:none}
.dcsf-section-head h2{margin:0;font-family:var(--dcsf-heading);font-weight:400;font-size:clamp(20px,6cqi,var(--fs-rubrique,26px));line-height:var(--lh-rubrique,1.1);letter-spacing:var(--ls-rubrique,.02em);text-transform:uppercase;color:var(--dcsf-ink);overflow-wrap:break-word;hyphens:auto}
.dcsf-section-head h2 a{color:inherit}.dcsf-section-head h2 a:hover{color:var(--dcsf-accent)}
.dcsf-section-head__line{height:1px;background:var(--dcsf-line);flex:1}
/* Sélecteur à deux classes : « .dcsf-featured a / .dcsf-cm a { color:inherit } » l'emportait sur la
   couleur rouge de la pilule (texte bleu nuit, constat du 29/09). */
.dcsf-section-head .dcsf-view-all{display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;height:var(--h-toutvoir,28px);padding:0 var(--e3,12px);border:1px solid var(--dcsf-accent);border-radius:999px;background:var(--c-papier,#fff);color:var(--dcsf-accent);font:700 var(--fs-toutvoir,10.5px)/1 var(--dcsf-heading);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.dcsf-section-head .dcsf-view-all:hover{background:var(--dcsf-accent);color:#fff}

/* ---- Grandes cartes : base 3 colonnes (repli si le CSS par appareil manque) ---- */
.dcsf-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.dcsf-card{min-width:0}.dcsf-card__body{min-width:0;display:flex;flex-direction:column}
.dcsf-card.dcsf-partner{padding:0 13px 14px;border-radius:8px;overflow:hidden;background:var(--dcsf-panel)}
.dcsf-card__media{aspect-ratio:1000/550;margin-bottom:12px;border-radius:var(--dcsf-radius)}
.dcsf-card.dcsf-partner .dcsf-card__media{width:calc(100% + 26px);margin-left:-13px;margin-right:-13px;border-radius:0}
.dcsf-card__tag{position:absolute;top:12px;left:12px;padding:7px 9px;border-radius:4px;background:var(--dcsf-accent);color:#fff;font:800 clamp(9px,4cqi,10px)/1 var(--dcsf-heading);letter-spacing:.05em;text-transform:uppercase}
/* Titre de carte § 2.1 (.art-title) : Libre Franklin 700, encre, --fs-titre-m, césure française. */
.dcsf-card h3{margin:0;font:700 var(--dcsf-fs-title-m)/var(--dcsf-lh-title-m) var(--dcsf-heading);letter-spacing:-.005em;color:var(--dcsf-ink);overflow-wrap:break-word;hyphens:auto}
/* Chapô § 2.1 (.art-text) : serif, rapproché du titre. */
.dcsf-card p{margin:var(--e2,8px) 0 0;color:var(--dcsf-text);font:var(--dcsf-fs-excerpt)/var(--dcsf-lh-excerpt) var(--dcsf-body)}
.dcsf-card__by{display:block;margin:9px 0 0;color:var(--dcsf-muted);font:italic var(--dcsf-fs-meta)/1.4 var(--dcsf-body);letter-spacing:.02em}.dcsf-card__by strong{font-style:normal;font-weight:600;color:var(--dcsf-sponsor-name)}
.dcsf-empty{color:var(--dcsf-muted);font-style:italic}

/* Une : conserver le visuel entier, indépendamment du ratio du fichier source.
   Le cadre reste en 1000/550 ; les images d'un autre format sont contenues dedans.
   Le positionnement absolu empêche leur taille intrinsèque de gonfler la grille. */
.dcsf-hero .dcsf-hero__media{align-self:center;background:var(--dcsf-ink)}
.dcsf-hero .dcsf-hero__image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.dcsf-hero .dcsf-hero__label{z-index:3;pointer-events:none}

/* Cadre média distinct : aucune marge autour de l’image, seules les copies sont espacées. */
.dcsf-featured .dcsf-hero{background:var(--dcsf-hero-bg,var(--dcsf-ink));border-radius:var(--dcsf-hero-radius,12px);min-height:var(--dcsf-hero-min-height,320px)}
.dcsf-featured .dcsf-hero__copy{padding:calc(var(--dcsf-hero-padding,24px) + 34px) var(--dcsf-hero-padding,24px) var(--dcsf-hero-padding,24px)}
.dcsf-featured .dcsf-hero .dcsf-hero__media{padding:0;margin:0;background:var(--dcsf-hero-image-bg,var(--dcsf-ink));height:auto;min-height:0;aspect-ratio:1000/550}
.dcsf-hero__image-link{display:block;position:relative;width:100%;height:100%;z-index:2}
.dcsf-featured .dcsf-hero--natural .dcsf-hero__media{aspect-ratio:auto}
.dcsf-featured .dcsf-hero--natural .dcsf-hero__image-link{height:auto}
.dcsf-featured .dcsf-hero--natural .dcsf-hero__image{position:static;width:100%;height:auto;max-width:100%;object-fit:contain}
.dcsf-featured .dcsf-hero--video .dcsf-hero__media{aspect-ratio:16/9}
.dcsf-featured .dcsf-hero--square .dcsf-hero__media{aspect-ratio:1}
.dcsf-hero .dcsf-placeholder{display:block;aspect-ratio:1000/550}

/* Espaces liés à la largeur réelle de la rubrique (étiquette, marges du texte). La typographie est
   celle du format 1.13 (règles .dcsf-hero plus haut), en tailles relatives à la colonne de texte. */
.dcsf-featured .dcsf-hero{--dcsf-hero-fluid-pad:clamp(16px,2.4cqw,var(--dcsf-hero-padding,24px))}
.dcsf-featured .dcsf-hero .dcsf-meta{flex-shrink:0;flex-wrap:wrap}
.dcsf-featured .dcsf-hero .dcsf-kicker{flex-shrink:0}
.dcsf-featured .dcsf-hero .dcsf-hero__label{top:var(--dcsf-hero-fluid-pad);left:var(--dcsf-hero-fluid-pad)}
.dcsf-featured .dcsf-hero__copy:has(.dcsf-hero__cta) p .dcsf-read-more{display:none}
/* Une image en hauteur (portrait) est plafonnée, pour que la une ne devienne pas une colonne de
   600 px de haut ; dans les cadres fixes (formes pleine largeur), elle reste centrée. */
.dcsf-featured .dcsf-hero .dcsf-hero__image{max-height:var(--dcsf-hero-image-max,560px);object-fit:contain;margin:auto}
/* Un seul contour extérieur pour les deux colonnes. */
.dcsf-featured .dcsf-hero{border:1px solid var(--dcsf-hero-bg,var(--dcsf-ink));box-sizing:border-box}
.dcsf-featured .dcsf-hero .dcsf-hero__media,.dcsf-featured .dcsf-hero .dcsf-hero__image-link,.dcsf-featured .dcsf-hero .dcsf-hero__image{border:0;border-radius:0;box-shadow:none}