/* ==========================================================================
   CANINOVA — COMPOSANTS PARTAGÉS
   Boutons · pastilles · cartes · médias · formulaires · filtres · tableau
   comparatif · FAQ · onglets · progression · pagination · notices
   ========================================================================== */

/* ==========================================================================
   BOUTONS
   ========================================================================== */

.cn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--cn-font-body);
  font-size: var(--cn-t-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--cn-r-md);
  cursor: pointer;
  transition: background-color var(--cn-ease), color var(--cn-ease),
    border-color var(--cn-ease), box-shadow var(--cn-ease), transform var(--cn-ease);
}

.cn-btn:active {
  transform: translateY(1px);
}

/* Primaire — terracotta */
.cn-btn--primary {
  background: var(--cn-terracotta);
  color: #fff;
  box-shadow: var(--cn-shadow-cta);
}

.cn-btn--primary:hover {
  background: var(--cn-terracotta-dark);
  color: #fff;
}

/* Secondaire — vert profond */
.cn-btn--secondary {
  background: var(--cn-teal);
  color: #fff;
  padding: 15px 26px;
}

.cn-btn--secondary:hover {
  background: #0c4b47;
  color: #fff;
}

/* Contour */
.cn-btn--outline {
  background: transparent;
  color: var(--cn-teal);
  border-color: var(--cn-teal-line);
  border-radius: var(--cn-r-sm);
  padding: 12px 20px;
}

/* Survol : remplissage plein. Un simple voile à 10 % restait illisible dès
   que le bouton se posait sur une image claire ou orangée (héro vidéo). */
.cn-btn--outline:hover {
  background: var(--cn-teal);
  color: #fff;
  border-color: var(--cn-teal);
}

.cn-dark .cn-btn--outline {
  color: var(--cn-cream);
  border-color: rgba(244, 238, 227, 0.35);
}

/* Contexte sombre : on inverse en pastille crème pleine, texte encre. Le
   contraste ne dépend plus de ce qui passe derrière (vidéo du héro). */
.cn-dark .cn-btn--outline:hover {
  background: var(--cn-cream);
  color: var(--cn-ink);
  border-color: var(--cn-cream);
}

/* Inversé — sur fond sombre */
.cn-btn--inverse {
  background: var(--cn-sand);
  color: var(--cn-ink);
}

.cn-btn--inverse:hover {
  background: #fff;
  color: var(--cn-ink);
}

/* Lien souligné */
.cn-btn--link {
  padding: 0 0 2px;
  border: 0;
  border-bottom: 2px solid rgba(15, 92, 87, 0.25);
  border-radius: 0;
  color: var(--cn-teal);
  background: none;
}

.cn-btn--link:hover {
  border-bottom-color: var(--cn-terracotta);
  color: var(--cn-terracotta);
}

.cn-dark .cn-btn--link {
  color: var(--cn-cream);
  border-bottom-color: rgba(244, 238, 227, 0.35);
}

.cn-dark .cn-btn--link:hover {
  color: var(--cn-terracotta);
  border-bottom-color: var(--cn-terracotta);
}

/* Lien fléché discret (« Voir les mini-webinaires → ») */
.cn-btn--arrow {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cn-text);
  font-size: 0.875rem;
}

.cn-btn--arrow::after {
  content: '→';
  transition: transform var(--cn-ease);
}

.cn-btn--arrow:hover {
  color: var(--cn-terracotta);
}

.cn-btn--arrow:hover::after {
  transform: translateX(3px);
}

.cn-dark .cn-btn--arrow {
  color: var(--cn-cream);
}

.cn-dark .cn-btn--arrow:hover {
  color: var(--cn-terracotta);
}

/* Tailles */
.cn-btn--lg {
  font-size: 1rem;
  padding: 18px 32px;
  box-shadow: var(--cn-shadow-cta-lg);
}

.cn-btn--sm {
  font-size: var(--cn-t-card);
  padding: 9px 15px;
  border-radius: var(--cn-r-sm);
}

.cn-btn--xs {
  font-size: var(--cn-t-meta);
  padding: 8px 13px;
  border-radius: var(--cn-r-sm);
}

.cn-btn--block {
  display: flex;
  width: 100%;
}

.cn-btn[disabled],
.cn-btn[aria-disabled='true'] {
  opacity: 0.55;
  pointer-events: none;
}

/* État de chargement */
.cn-btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.cn-btn.is-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentcolor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: cn-spin 0.7s linear infinite;
  color: #fff;
}

@keyframes cn-spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   PASTILLES ET ÉTIQUETTES
   ========================================================================== */

.cn-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--cn-t-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 5px 11px;
  border-radius: var(--cn-r-pill);
  white-space: nowrap;
}

.cn-badge--accent {
  background: var(--cn-terracotta);
  color: var(--cn-ink);
}

.cn-badge--outline {
  border: 1px solid var(--cn-border-2);
  color: var(--cn-text);
}

.cn-dark .cn-badge--outline {
  border-color: rgba(244, 238, 227, 0.3);
  color: var(--cn-cream);
}

.cn-badge--soft {
  background: var(--cn-terracotta-soft);
  color: var(--cn-terracotta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--cn-t-meta);
  padding: 6px 12px;
}

.cn-badge--teal {
  background: var(--cn-teal-soft);
  color: var(--cn-teal);
}

/* Pastille de type de contenu, posée sur une vignette */
.cn-tag {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--cn-teal);
  padding: 5px 10px;
  border-radius: var(--cn-r-pill);
}

.cn-tag--mini      { background: var(--cn-terracotta); }
.cn-tag--webinaire { background: var(--cn-teal); }
.cn-tag--formation { background: var(--cn-ink); }
.cn-tag--evenement { background: var(--cn-brown); }

/* Pastille de héro, translucide */
.cn-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--cn-t-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cn-cream);
  background: rgba(253, 251, 246, 0.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 7px 13px;
  border-radius: var(--cn-r-pill);
}

.cn-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cn-terracotta);
  flex-shrink: 0;
}

.cn-chip--plain::before {
  display: none;
}

/* Points de séparation d'une liste de garanties */
.cn-dotlist {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: var(--cn-t-card);
  color: var(--cn-text-2);
}

.cn-dotlist > * + *::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentcolor;
  opacity: 0.5;
  margin-right: 14px;
  vertical-align: middle;
}

/* ==========================================================================
   CARTES
   ========================================================================== */

.cn-card {
  display: flex;
  flex-direction: column;
  background: var(--cn-surface);
  border: 1px solid var(--cn-border);
  border-radius: var(--cn-r-lg);
  padding: 22px;
}

.cn-card--flush   { padding: 0; overflow: hidden; }
.cn-card--lg      { padding: 34px; border-radius: var(--cn-r-xl); }
.cn-card--xl      { padding: 46px; border-radius: var(--cn-r-2xl); }
.cn-card--plain   { border-color: transparent; }
.cn-card--sand    { background: var(--cn-sand); border-color: transparent; }
.cn-card--cream   { background: var(--cn-cream); border-color: rgba(15, 92, 87, 0.18); }
.cn-card--accent  { border-color: rgba(224, 103, 75, 0.3); }
.cn-card--teal    { background: var(--cn-teal); border-color: transparent; }
.cn-card--ink     { background: var(--cn-ink); border-color: transparent; }
.cn-card--elevate { box-shadow: var(--cn-shadow-card); }

/* Carte cliquable */
.cn-card--link {
  transition: border-color var(--cn-ease), box-shadow var(--cn-ease), transform var(--cn-ease);
}

.cn-card--link:hover {
  border-color: var(--cn-teal-line);
  box-shadow: 0 18px 36px -22px rgba(18, 38, 31, 0.4);
  transform: translateY(-2px);
}

/* Rend toute la carte cliquable depuis un lien intérieur, sans imbriquer d'ancres */
.cn-card__overlay-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Corps de carte qui pousse le pied en bas */
.cn-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
}

.cn-card__grow { flex: 1; }

.cn-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}

/* Carte numérotée (01 / 02 / 03) */
.cn-numcard {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--cn-surface);
  border: 1px solid var(--cn-border);
  border-radius: 15px;
  padding: 22px;
}

.cn-numcard__num {
  font-family: var(--cn-font-title);
  font-size: var(--cn-t-h3);
  font-weight: 600;
  line-height: 1;
  color: var(--cn-terracotta);
  flex-shrink: 0;
}

.cn-numcard__title {
  font-family: var(--cn-font-title);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--cn-text);
}

.cn-numcard__title + p {
  margin-top: 5px;
}

/* Posée dans une carte qui porte déjà fond et bordure. */
.cn-numcard--plain {
  background: none;
  border: 0;
  padding: 0;
}

/* Carte « format » du campus, sur fond teal */
.cn-format-card {
  display: flex;
  flex-direction: column;
  background: rgba(253, 251, 246, 0.06);
  border: 1px solid rgba(253, 251, 246, 0.16);
  border-radius: var(--cn-r-lg);
  padding: 26px 22px;
  transition: background-color var(--cn-ease), border-color var(--cn-ease);
}

.cn-format-card:hover {
  background: rgba(253, 251, 246, 0.1);
  border-color: rgba(253, 251, 246, 0.28);
}

.cn-format-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* Liste à coches */
.cn-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.cn-checklist li {
  display: flex;
  gap: 9px;
  font-size: 0.875rem;
  color: var(--cn-text-2);
}

.cn-checklist li::before {
  content: '✓';
  color: var(--cn-teal);
  font-weight: 700;
  flex-shrink: 0;
}

.cn-dark .cn-checklist li {
  color: rgba(244, 238, 227, 0.88);
}

.cn-dark .cn-checklist li::before {
  color: var(--cn-terracotta);
}

.cn-checklist--single {
  grid-template-columns: 1fr;
}

/* ==========================================================================
   MÉDIAS
   ========================================================================== */

.cn-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--cn-r-lg);
  background: repeating-linear-gradient(
    135deg,
    var(--cn-sand-deep), var(--cn-sand-deep) 10px,
    var(--cn-sand-mid) 10px, var(--cn-sand-mid) 20px
  );
}

.cn-media--16-9 { aspect-ratio: 16 / 9; }
.cn-media--5-4  { aspect-ratio: 5 / 4; }
.cn-media--1-1  { aspect-ratio: 1; }
.cn-media--4-5  { aspect-ratio: 4 / 5; }
.cn-media--flat { border-radius: 0; }

.cn-media img,
.cn-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bouton lecture posé sur une vignette */
.cn-play {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(253, 251, 246, 0.9);
  transition: transform var(--cn-ease), background-color var(--cn-ease);
}

.cn-play::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 13px solid var(--cn-terracotta);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left: 3px;
}

.cn-media:hover .cn-play {
  transform: scale(1.08);
  background: #fff;
}

.cn-play--sm { width: 44px; height: 44px; }

.cn-play--sm::before {
  border-left-width: 12px;
}

/* Pastille posée en haut à gauche d'une vignette */
.cn-media__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

/* Barre de progression de visionnage en bas de vignette */
.cn-media__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(18, 38, 31, 0.15);
  z-index: 2;
}

.cn-media__progress > span {
  display: block;
  height: 100%;
  background: var(--cn-terracotta);
}

/* Avatar / initiales */
.cn-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cn-teal);
  color: var(--cn-sand);
  font-size: var(--cn-t-card);
  font-weight: 600;
  overflow: hidden;
  flex-shrink: 0;
}

.cn-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   FORMULAIRES
   ========================================================================== */

.cn-field {
  display: flex;
  flex-direction: column;
}

.cn-label {
  display: block;
  font-size: 0.81rem;
  font-weight: 600;
  color: var(--cn-text);
  margin-bottom: 6px;
}

.cn-label .cn-required {
  color: var(--cn-terracotta);
}

.cn-input,
.cn-textarea,
.cn-select {
  width: 100%;
  font-family: var(--cn-font-body);
  font-size: var(--cn-t-sm);
  color: var(--cn-text);
  background: var(--cn-white);
  border: 1px solid var(--cn-border-3);
  border-radius: 11px;
  padding: 13px 14px;
  transition: border-color var(--cn-ease), box-shadow var(--cn-ease);
}

.cn-textarea {
  border-radius: var(--cn-r-md);
  padding: 14px;
  resize: vertical;
  min-height: 96px;
}

.cn-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2312261F' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

.cn-input::placeholder,
.cn-textarea::placeholder {
  color: var(--cn-text-5);
}

.cn-input:focus,
.cn-textarea:focus,
.cn-select:focus {
  outline: none;
  border-color: var(--cn-teal);
  box-shadow: 0 0 0 3px rgba(15, 92, 87, 0.12);
}

.cn-input:focus-visible,
.cn-textarea:focus-visible,
.cn-select:focus-visible {
  outline: none;
}

/* Champ en erreur */
.cn-input.is-invalid,
.cn-textarea.is-invalid,
.cn-select.is-invalid {
  border-color: #c0442c;
  box-shadow: 0 0 0 3px rgba(192, 68, 44, 0.12);
}

.cn-field__error {
  font-size: var(--cn-t-meta);
  color: #c0442c;
  margin-top: 6px;
}

/* Champs sur fond sombre */
.cn-dark .cn-input,
.cn-dark .cn-textarea,
.cn-dark .cn-select,
.cn-input--on-dark {
  background: rgba(244, 238, 227, 0.06);
  border-color: rgba(244, 238, 227, 0.22);
  color: var(--cn-cream);
}

.cn-dark .cn-input::placeholder,
.cn-dark .cn-textarea::placeholder,
.cn-input--on-dark::placeholder {
  color: rgba(244, 238, 227, 0.5);
}

.cn-dark .cn-input:focus,
.cn-dark .cn-textarea:focus,
.cn-input--on-dark:focus {
  border-color: var(--cn-terracotta);
  box-shadow: 0 0 0 3px rgba(224, 103, 75, 0.2);
}

.cn-dark .cn-label {
  color: var(--cn-cream);
}

/* Champ sur fond crème (boîte à idées) */
.cn-input--soft,
.cn-textarea--soft {
  background: var(--cn-cream);
}

/* Case à cocher / consentement RGPD */
.cn-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--cn-t-meta);
  line-height: 1.5;
  color: var(--cn-text-3);
  cursor: pointer;
}

.cn-check input[type='checkbox'] {
  appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  border: 1px solid var(--cn-border-3);
  border-radius: 5px;
  background: var(--cn-white);
  cursor: pointer;
  transition: background-color var(--cn-ease), border-color var(--cn-ease);
}

.cn-check input[type='checkbox']:checked {
  background: var(--cn-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m1 5 3.5 3.5L11 1.5'/%3E%3C/svg%3E") center no-repeat;
  border-color: var(--cn-teal);
}

/* Interrupteur */
.cn-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  border-radius: var(--cn-r-pill);
  background: var(--cn-text-6);
  transition: background-color var(--cn-ease);
  flex-shrink: 0;
}

.cn-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--cn-ease);
}

.cn-switch.is-on {
  background: var(--cn-teal);
}

.cn-switch.is-on::after {
  transform: translateX(18px);
}

/* Messages de retour de formulaire */
.cn-notice {
  font-size: var(--cn-t-sm);
  line-height: 1.55;
  padding: 13px 16px;
  border-radius: 11px;
  border: 1px solid transparent;
}

.cn-notice--success {
  background: rgba(15, 92, 87, 0.08);
  border-color: rgba(15, 92, 87, 0.25);
  color: var(--cn-teal);
}

.cn-notice--error {
  background: rgba(192, 68, 44, 0.08);
  border-color: rgba(192, 68, 44, 0.3);
  color: #a93a24;
}

.cn-notice--info {
  background: var(--cn-sand);
  border-color: var(--cn-border);
  color: var(--cn-text-2);
}

.cn-notice[hidden] {
  display: none;
}

/* Formulaire empilé */
.cn-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cn-form--tight {
  gap: 10px;
}

.cn-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

/* Honeypot anti-spam. Sorti de l'écran plutôt que masqué en display:none,
   pour rester crédible auprès des robots.

   Cette règle vit dans la couche partagée, et non dans un module de page :
   un honeypot dont le masquage dépend d'un css/pages/<slug>.css s'affiche
   comme un champ normal dès que ce module ne se charge pas, et le visiteur
   qui le remplit voit sa demande rejetée comme spam. C'est exactement ce qui
   est arrivé au formulaire de contact. */
.cn-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   NEWSLETTER
   Le partial template-parts/newsletter-signup.php est réutilisé par l'accueil,
   les deux listings webinaires et les deux fiches webinaire : ses règles vivent
   donc ici, dans les composants partagés, et non dans un module de page.

   CONTRAT JS : js/newsletter.js réécrit intégralement le className de
   #cani-newsletter-msg à chaque envoi (msg.className = 'cani-newsletter-msg')
   puis ajoute --success ou --error. Impossible d'y poser .cn-notice : ces
   règles en sont la transposition sur les classes que le JS impose.
   Ne pas empiler d'autres classes sur cet élément, elles sauteraient.
   ========================================================================== */

.cani-newsletter-msg {
  font-size: var(--cn-t-sm);
  line-height: 1.55;
  color: var(--cn-text-2);
}

/* Aucun retour serveur : pas de bloc vide dans la mise en page. */
.cani-newsletter-msg:empty {
  display: none;
}

.cani-newsletter-msg--success,
.cani-newsletter-msg--error {
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: var(--cn-r-sm);
  font-weight: 600;
}

/* La section est en contexte .cn-dark : les variables sont déjà basculées. */
.cani-newsletter-msg--success {
  background: var(--cn-teal-soft);
  border-color: var(--cn-border-2);
  color: var(--cn-cream);
}

.cani-newsletter-msg--error {
  background: var(--cn-terracotta-soft);
  border-color: var(--cn-terracotta);
  color: var(--cn-terracotta);
}

/* Le champ ne doit pas se réduire au point de devenir inutilisable avant que
   le bouton ne passe à la ligne (.cn-row gère déjà le retour à la ligne). */
.cn-divers__newsletter-row .cn-input {
  min-width: 13rem;
}

/* Le widget Cloudflare est injecté en iframe : on lui réserve sa hauteur pour
   éviter le saut de mise en page au chargement du script. */
.cn-divers__newsletter .cf-turnstile {
  min-height: 65px;
}

/* Pot de miel anti-robot : masqué sans être retiré du DOM. */
.cani-newsletter-honey {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 700px) {
  /* Champ et bouton pleine largeur, empilés. */
  .cn-divers__newsletter-row .cn-input,
  .cn-divers__newsletter-row .cani-newsletter-btn {
    min-width: 0;
    width: 100%;
  }
}

/* ==========================================================================
   BARRE DE FILTRES
   ========================================================================== */

.cn-filterbar {
  position: sticky;
  top: var(--cn-header-h);
  z-index: 20;
  background: var(--cn-cream);
  border-bottom: 1px solid var(--cn-border);
}

.cn-filterbar__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-block: 16px;
}

.cn-filter {
  font-family: var(--cn-font-body);
  font-size: var(--cn-t-card);
  font-weight: 600;
  color: var(--cn-text-2);
  background: var(--cn-white);
  border: 1px solid rgba(18, 38, 31, 0.15);
  border-radius: var(--cn-r-pill);
  padding: 9px 16px;
  cursor: pointer;
  transition: background-color var(--cn-ease), color var(--cn-ease), border-color var(--cn-ease);
}

.cn-filter:hover {
  border-color: var(--cn-teal-line);
  color: var(--cn-teal);
}

.cn-filter.is-active,
.cn-filter[aria-current='true'] {
  background: var(--cn-teal);
  border-color: var(--cn-teal);
  color: #fff;
}

.cn-filterbar__count {
  margin-left: auto;
  font-size: 0.81rem;
  color: var(--cn-text-4);
}

/* Élément masqué par un filtre client */
.cn-filtered-out {
  display: none !important;
}

/* ==========================================================================
   TABLEAU COMPARATIF
   ========================================================================== */

.cn-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--cn-border-2);
  border-radius: var(--cn-r-lg);
  background: var(--cn-white);
  -webkit-overflow-scrolling: touch;
}

.cn-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.cn-table thead tr {
  background: var(--cn-sand);
}

.cn-table th {
  padding: 18px 14px;
  font-family: var(--cn-font-title);
  font-weight: 600;
  color: var(--cn-text);
  text-align: center;
}

.cn-table th:first-child,
.cn-table td:first-child {
  text-align: left;
  padding-inline: 20px;
  font-family: var(--cn-font-body);
}

.cn-table tbody tr {
  border-top: 1px solid var(--cn-border);
}

.cn-table td {
  padding: 15px 14px;
  text-align: center;
  color: var(--cn-text-2);
}

/* Colonne mise en avant */
.cn-table .is-featured {
  background: rgba(15, 92, 87, 0.05);
  font-weight: 600;
}

.cn-table thead .is-featured {
  background: rgba(15, 92, 87, 0.07);
  color: var(--cn-teal);
}

.cn-table__yes { color: var(--cn-teal); }
.cn-table__no  { color: var(--cn-text-6); }

.cn-table__price-row {
  border-top: 2px solid var(--cn-border-2) !important;
  background: var(--cn-sand);
}

.cn-table__price-row td {
  padding: 18px 14px;
  font-family: var(--cn-font-title);
  font-weight: 600;
  color: var(--cn-teal);
}

.cn-table__price-row td:first-child {
  font-family: var(--cn-font-body);
  color: var(--cn-text);
}

/* ==========================================================================
   ACCORDÉON / FAQ
   ========================================================================== */

.cn-faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cn-faq__item {
  background: var(--cn-white);
  border: 1px solid var(--cn-border);
  border-radius: 13px;
  overflow: hidden;
}

.cn-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  text-align: left;
  font-family: var(--cn-font-body);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--cn-text);
  padding: 20px 22px;
  cursor: pointer;
}

.cn-faq__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cn-terracotta);
  font-size: 0.75rem;
  transition: transform var(--cn-ease);
}

.cn-faq__q[aria-expanded='true'] .cn-faq__icon {
  transform: rotate(180deg);
}

.cn-faq__a {
  padding: 0 22px 20px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--cn-text-3);
}

.cn-faq__a[hidden] {
  display: none;
}

/* Variante statique : question + réponse toujours visibles */
.cn-faq__item--static {
  padding: 20px 22px;
}

.cn-faq__item--static .cn-faq__a {
  padding: 8px 0 0;
}

/* ==========================================================================
   ONGLETS
   ========================================================================== */

.cn-tabs {
  display: flex;
  gap: 6px;
  background: rgba(18, 38, 31, 0.06);
  padding: 5px;
  border-radius: var(--cn-r-md);
}

.cn-tab {
  flex: 1;
  font-family: var(--cn-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cn-text-3);
  background: transparent;
  padding: 10px;
  border-radius: var(--cn-r-sm);
  cursor: pointer;
  transition: background-color var(--cn-ease), color var(--cn-ease);
}

.cn-tab.is-active,
.cn-tab[aria-selected='true'] {
  background: var(--cn-white);
  color: var(--cn-teal);
}

/* ==========================================================================
   PROGRESSION
   ========================================================================== */

.cn-progress {
  height: 8px;
  background: rgba(18, 38, 31, 0.08);
  border-radius: var(--cn-r-pill);
  overflow: hidden;
}

.cn-progress__fill {
  display: block;
  height: 100%;
  background: var(--cn-teal);
  border-radius: var(--cn-r-pill);
  transition: width 0.4s ease;
}

.cn-progress--sm { height: 6px; }

.cn-dark .cn-progress {
  background: rgba(244, 238, 227, 0.2);
}

.cn-dark .cn-progress__fill {
  background: var(--cn-terracotta);
}

.cn-progress__legend {
  display: flex;
  justify-content: space-between;
  font-size: var(--cn-t-meta);
  color: var(--cn-text-4);
  margin-top: 8px;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.cn-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 44px;
}

.cn-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cn-text-2);
  background: var(--cn-white);
  border: 1px solid var(--cn-border-2);
  border-radius: var(--cn-r-sm);
  transition: background-color var(--cn-ease), color var(--cn-ease), border-color var(--cn-ease);
}

.cn-pagination .page-numbers:hover {
  border-color: var(--cn-teal-line);
  color: var(--cn-teal);
}

.cn-pagination .page-numbers.current {
  background: var(--cn-teal);
  border-color: var(--cn-teal);
  color: #fff;
}

.cn-pagination .page-numbers.dots {
  border-color: transparent;
  background: none;
}

/* ==========================================================================
   ÉTAT VIDE
   ========================================================================== */

.cn-empty {
  text-align: center;
  padding: 48px 24px;
  border: 1px dashed rgba(18, 38, 31, 0.18);
  border-radius: 14px;
  background: rgba(18, 38, 31, 0.03);
  color: var(--cn-text-4);
  font-size: var(--cn-t-card);
}

/* ==========================================================================
   EN-TÊTE DE PAGE
   ========================================================================== */

.cn-pagehead {
  background: linear-gradient(180deg, var(--cn-sand), var(--cn-cream));
}

.cn-pagehead__inner {
  padding-block: 52px 40px;
}

.cn-pagehead--center .cn-pagehead__inner {
  text-align: center;
  padding-block: 56px 48px;
}

.cn-pagehead--center .cn-h1,
.cn-pagehead--center .cn-lead {
  margin-inline: auto;
}

.cn-pagehead .cn-h1 {
  margin-top: 12px;
  max-width: 760px;
}

.cn-pagehead .cn-lead {
  margin-top: 16px;
  max-width: 600px;
}

/* Encart de redirection posé sous un en-tête de page */
.cn-inline-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  background: rgba(15, 92, 87, 0.08);
  border: 1px solid rgba(15, 92, 87, 0.15);
  border-radius: var(--cn-r-pill);
  padding: 8px 8px 8px 16px;
  font-size: 0.81rem;
  font-weight: 500;
  color: var(--cn-teal);
  text-align: left;
}

.cn-inline-cta .cn-btn {
  padding: 7px 13px;
  border-radius: var(--cn-r-pill);
  font-size: var(--cn-t-meta);
}

/* ==========================================================================
   BANDEAU CTA FINAL
   ========================================================================== */

.cn-cta-band {
  background: var(--cn-ink);
  text-align: center;
}

.cn-cta-band__inner {
  padding-block: 56px;
}

.cn-cta-band .cn-h2 {
  color: var(--cn-cream);
  max-width: 640px;
  margin-inline: auto;
}

.cn-cta-band__text {
  font-size: 0.97rem;
  color: rgba(244, 238, 227, 0.68);
  margin: 14px auto 26px;
  max-width: 480px;
}

.cn-cta-band__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}