/*
Theme Name: Win2Lin
Theme URI: 
Author: Laurent MILLET
Author URI: 
Description: 
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: ollie
Text Domain: win2lin
Tags: 
*/

/* ====== Group styles ====== */

/* Carte blanche */
.wp-block-group.is-style-tn-card {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 24px;
  box-shadow: var(--wp--preset--shadow--soft);
}

/* Bloc soft (fond doux) */
.wp-block-group.is-style-tn-soft {
  background: var(--wp--preset--color--soft);
  border-radius: 30px;
}

/* Variante compacte (utile pour petites cartes) */
.wp-block-group.is-style-tn-tight {
  padding-top: var(--wp--preset--spacing--6) !important;
  padding-right: var(--wp--preset--spacing--6) !important;
  padding-bottom: var(--wp--preset--spacing--6) !important;
  padding-left: var(--wp--preset--spacing--6) !important;
}

/* ====== Button styles ====== */

/* Bouton contour */
.wp-block-button.is-style-tn-outline .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--accent);
  border: 2px solid var(--wp--preset--color--accent);
}

/* Bouton primaire (au cas où ton thème change des styles) */
.wp-block-button.is-style-tn-primary .wp-block-button__link {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--surface);
  border: 2px solid transparent;
}

/* Hover cohérent */
/* .wp-block-button.is-style-tn-outline .wp-block-button__link:hover,
.wp-block-button.is-style-tn-primary .wp-block-button__link:hover {
  filter: brightness(0.95);
}*/

/* ====== Paragraph styles ====== */

/* Note discrète */
.wp-block-paragraph.is-style-tn-note {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--sm);
}

/* ====== Heading styles ====== */

/* Sur-titre (petit label au-dessus d’un H2/H3) */
.wp-block-heading.is-style-tn-eyebrow {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.wp-block-image img[src$=".svg"] {
  max-width: 100%;
  height: auto;
  display: block;
}
/* Accueil - Pour qui : cartes de meme hauteur + bouton en bas */
.wp-block-columns.win2lin-eq .win2lin-card {
  display: flex;
  flex-direction: column;
}

.wp-block-columns.win2lin-eq .win2lin-card .win2lin-card-actions {
  margin-top: auto;
}

@media (min-width: 782px) {
  .wp-block-columns.win2lin-eq {
    align-items: stretch;
  }

  .wp-block-columns.win2lin-eq > .wp-block-column {
    display: flex;
  }

  .wp-block-columns.win2lin-eq > .wp-block-column > .win2lin-card {
    flex: 1;
    width: 100%;
  }
}

.wp-block-group.is-style-tn-card {
  padding: var(--wp--preset--spacing--6);
}

/* ====== Accueil - Methode structuree : titres et textes alignes ====== */

.win2lin-steps .win2lin-card {
  display: flex;
  flex-direction: column;
}

/* Desktop/tablette */
@media (min-width: 782px) {
  .win2lin-steps .wp-block-columns.win2lin-eq {
    align-items: stretch;
  }

  .win2lin-steps .wp-block-columns.win2lin-eq > .wp-block-column {
    display: flex;
  }

  .win2lin-steps .wp-block-columns.win2lin-eq > .wp-block-column > .win2lin-card {
    flex: 1;
    width: 100%;
  }

  /* Zone titre reservee : 2 lignes */
 
  .win2lin-steps .win2lin-step-title {
  margin: 0;
  line-height: 1.2;
  min-height: calc(1.2em * 2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

  /* Le texte commence toujours au meme niveau */
  .win2lin-steps .win2lin-step-text {
    margin-top: var(--wp--preset--spacing--3);
    margin-bottom: 0;
  }
}
 
/* Chevron - */
/* ====== Parcours "Une methode structuree" : alignements + chevrons ====== */

.win2lin-steps .win2lin-steps-grid {
  align-items: stretch;
}

/* Colonnes a hauteur egale (desktop) */
@media (min-width: 782px) {
  .win2lin-steps .win2lin-steps-grid > .wp-block-column {
    display: flex;
  }
}

/* Carte : pleine hauteur + ombre un peu plus marquee dans cette section */
.win2lin-steps .win2lin-step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Renforcer l'ombre seulement ici (sans toucher aux autres cartes) */
.win2lin-steps .wp-block-group.is-style-tn-card.win2lin-step-card {
  box-shadow: var(--wp--preset--shadow--soft), 0 18px 36px rgba(0, 0, 0, 0.08);
}

/* Titres et textes alignes : on reserve 2 lignes pour le titre */
@media (min-width: 782px) {
  .win2lin-steps .win2lin-step-title {
    margin: 0;
    line-height: 1.2;
    min-height: calc(1.2em * 2);

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;

    overflow: hidden;
  }

  .win2lin-steps .win2lin-step-text {
    margin-top: var(--wp--preset--spacing--3);
    margin-bottom: 0;
  }
}

/* Chevron entre cartes : uniquement desktop */
.win2lin-steps .win2lin-step-chevron {
  display: none;
}

@media (min-width: 782px) {
  .win2lin-steps .win2lin-steps-grid {
    column-gap: var(--wp--preset--spacing--8);
  }

  .win2lin-steps .win2lin-step-chevron {
    display: block;
    position: absolute;
    top: 50%;
    right: calc(var(--wp--preset--spacing--8) * -0.65);
    transform: translateY(-50%);
    width: 40px;
    height: auto;
    color: var(--wp--preset--color--muted);
    opacity: 0.95;
    pointer-events: none;
  }

  .win2lin-steps .win2lin-step-chevron img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Pas de chevron sur la derniere carte (si jamais tu en ajoutes un par erreur) */
  .win2lin-steps .wp-block-column:last-child .win2lin-step-chevron {
    display: none;
  }
}

/* ===== Steps layout ===== */

.win2lin-steps .wp-block-columns {
  align-items: stretch;
}

.win2lin-steps .wp-block-column {
  display: flex;
}

/* cartes hauteur egale */
.win2lin-steps .wp-block-group.is-style-tn-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}

/* titres alignes */
/* Mobile : titre normal, pas de hauteur reservee */
.win2lin-steps h3 {
  min-height: 0;
  margin-bottom: var(--wp--preset--spacing--2);
}

/* Desktop/tablette : reservation de 2 lignes pour aligner */
@media (min-width: 782px) {
  .win2lin-steps h3 {
    line-height: 1.25;
    min-height: 2.6em; /* 2 lignes */
    margin-bottom: var(--wp--preset--spacing--3);
  }
}

/* texte commence toujours au meme niveau */
.win2lin-steps .is-style-tn-note {
  margin-top: 0;
}

/* ===== Chevrons entre cartes ===== */

@media (min-width: 782px) {

  /* espace entre colonnes pour accueillir le chevron */
  .win2lin-steps .wp-block-columns {
    gap: 48px;
  }

  .win2lin-steps .wp-block-column:not(:last-child)
  .wp-block-group.is-style-tn-card::after {

    content: "";
    position: absolute;

    top: 50%;
    right: -30px; /* moitié du gap */

    transform: translateY(-50%) rotate(-45deg);

    width: 24px;
    height: 24px;

    border-right: 4px solid var(--wp--preset--color--muted);
    border-bottom: 4px solid var(--wp--preset--color--muted);

    opacity: 0.85;
  }
}
/* ===== Chevrons mobile (vers le bas) ===== */

@media (max-width: 781px) {

  .win2lin-steps .wp-block-columns {
    gap: 40px;
  }

  .win2lin-steps .wp-block-column:not(:last-child)
  .wp-block-group.is-style-tn-card::after {

    content: "";
    position: absolute;

    left: 50%;
    bottom: -27px;

    transform: translateX(-50%) rotate(45deg);

    width: 20px;
    height: 20px;

    border-right: 3px solid var(--wp--preset--color--muted);
    border-bottom: 3px solid var(--wp--preset--color--muted);

    opacity: 0.8;
  }

}

/* Renforcer la lisibilité des liens */
a {
  text-underline-offset: 0.15em;
  text-decoration-thickness: 2px;
}

a:hover {
  color: var(--wp--preset--color--accent-dark);
}

/* Focus clavier visible (important accessibilité) */
:focus-visible {
  outline: 3px solid var(--wp--preset--color--accent-light);
  outline-offset: 3px;
}

/* Boutons: hover plus net que brightness() qui peut être trop subtil */
.wp-block-button .wp-block-button__link:hover {
  background: var(--wp--preset--color--accent-dark);
}

/* Outline: meilleur contraste sur fonds "soft" */
.wp-block-button.is-style-tn-outline .wp-block-button__link {
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent);
}

.wp-block-button.is-style-tn-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--soft-2);
  color: var(--wp--preset--color--accent-dark);
  border-color: var(--wp--preset--color--accent-dark);
}

/* Texte secondaire: éviter qu'il paraisse "action" */
.wp-block-paragraph.is-style-tn-note,
.wp-block-heading.is-style-tn-eyebrow {
  color: var(--wp--preset--color--muted);
}
/* ===== Effet hover uniquement - Steps ===== */

.win2lin-steps .win2lin-card {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* Desktop uniquement */
@media (min-width: 782px) {
  .win2lin-steps .win2lin-card:hover {
    transform: translateY(-4px) scale(1.015);
    box-shadow:
      0 16px 36px rgba(0, 0, 0, 0.10),
      0 4px 12px rgba(0, 0, 0, 0.06);
  }
}