/* ==========================================================================
   KIPO - Styles propres à la page Tarifs
   (intro + bascule mensuel/annuel, grille de forfaits, tableau comparatif)
   ========================================================================== */

/* Desktop resserre (demande Dylan) : Tarifs cape son contenu plus etroit que le
   --conteneur global (2280px) pour une page de prix plus propre et mieux agencee,
   pas etiree sur les grands ecrans. La FAQ garde sa largeur etroite (conteneur--etroit). */
.tarifs-hero,
.tarifs-forfaits,
.tarifs-faire,
.tarifs-comparatif,
.tarifs-demarrage,
.tarifs-cloture { --conteneur: 1120px; }

/* --- Hero : texte/infos a gauche, photo a droite (asymetrique, pas centre) --------- */
.tarifs-hero__grille {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
}
.tarifs-hero__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.tarifs-hero__titre { font-size: var(--fs-h1); }
.tarifs-hero__sous { color: var(--muted); font-size: var(--fs-lead); max-width: 46ch; }
.tarifs-hero__cta { margin-top: 4px; }
.tarifs-hero__note-cta { color: var(--subtle); font-size: var(--fs-sm); }
.tarifs-hero__photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--r-panel-lg) var(--r-panel-sm) var(--r-panel-lg) var(--r-panel-sm);
    border: 1px solid var(--border);
    background: var(--pale);
}

.bascule-prix {
    display: inline-flex;
    gap: 4px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    padding: 4px;
    margin-top: 6px;
}
.bascule-prix__option {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--muted);
    padding: 10px 18px;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: var(--r-pill);
    transition: background var(--t), color var(--t);
}
.bascule-prix__option.is-active { background: var(--green); color: var(--ink); }

/* ==========================================================================
   Decor : blobs organiques (page Tarifs) - meme systeme que la Demo.
   Chaque frontiere de section est une VAGUE, donc TOUS les blobs FLOTTENT
   (top:%, sortent par un cote) : un bord plat ne peut pas epouser une vague.
   Tailles/positions en clamp(), couleurs selon le fond (.blob--* opaques via
   --blob-base). Contenu au-dessus via .tarifs-tige .conteneur. z-index 0,
   dans les gouttieres. Nombre VARIABLE : intro 2, forfaits 2, faire 2, comparatif 1, demarrage 1, faq 2.
   ========================================================================== */
.tarifs-tige .conteneur { position: relative; z-index: 1; }

/* Hero (creme) : sable a gauche, olive a droite. */
.tarifs-hero__blob-1 { width: clamp(200px, 24vw, 320px); height: clamp(200px, 24vw, 320px); left: clamp(-150px, -8vw, -90px); top: 18%; border-radius: 54% 46% 60% 40% / 48% 52% 48% 52%; }
.tarifs-hero__blob-2 { width: clamp(150px, 16vw, 240px); height: clamp(150px, 16vw, 240px); right: clamp(-110px, -6vw, -70px); top: 6%; border-radius: 46% 54% 42% 58% / 56% 44% 56% 44%; }

/* Forfaits (sable) : vert grand a droite, pale en bas a gauche. */
.tarifs-forfaits__blob-1 { width: clamp(240px, 27vw, 400px); height: clamp(240px, 27vw, 400px); right: clamp(-170px, -9vw, -100px); top: 10%; border-radius: 42% 58% 56% 44% / 54% 46% 54% 46%; }
.tarifs-forfaits__blob-2 { width: clamp(160px, 18vw, 280px); height: clamp(160px, 18vw, 280px); left: clamp(-120px, -6vw, -75px); top: 54%; border-radius: 58% 42% 48% 52% / 44% 56% 44% 56%; }

/* Comparatif (creme) : olive a gauche. */
.tarifs-comparatif__blob-1 { width: clamp(200px, 22vw, 320px); height: clamp(200px, 22vw, 320px); left: clamp(-150px, -8vw, -95px); top: 26%; border-radius: 50% 50% 58% 42% / 56% 48% 52% 44%; }

/* FAQ (sable, conteneur etroit -> larges marges) : vert a droite, pale a gauche. */
.tarifs-faq__blob-1 { width: clamp(220px, 24vw, 360px); height: clamp(220px, 24vw, 360px); right: clamp(-160px, -8vw, -100px); top: 8%; border-radius: 56% 44% 52% 48% / 46% 56% 44% 54%; }
.tarifs-faq__blob-2 { width: clamp(140px, 15vw, 220px); height: clamp(140px, 15vw, 220px); left: clamp(-100px, -5vw, -65px); top: 52%; border-radius: 48% 52% 44% 56% / 58% 46% 54% 42%; }

/* Ce que Kipo fait (creme) : olive a droite, sable a gauche-bas. */
.tarifs-faire__blob-1 { width: clamp(190px, 21vw, 320px); height: clamp(190px, 21vw, 320px); right: clamp(-150px, -8vw, -90px); top: 14%; border-radius: 52% 48% 60% 40% / 46% 54% 46% 54%; }
.tarifs-faire__blob-2 { width: clamp(140px, 15vw, 230px); height: clamp(140px, 15vw, 230px); left: clamp(-100px, -5vw, -65px); top: 58%; border-radius: 44% 56% 50% 50% / 58% 44% 56% 42%; }

/* Mise en route (creme) : olive a gauche. */
.tarifs-demarrage__blob-1 { width: clamp(180px, 20vw, 300px); height: clamp(180px, 20vw, 300px); left: clamp(-140px, -7vw, -85px); top: 20%; border-radius: 56% 44% 46% 54% / 50% 56% 44% 50%; }

/* --- Grille de forfaits -------------------------------------------------- */
.tarifs-forfaits { padding-top: clamp(18px, 3vw, 30px); }
.tarifs-forfaits__note {
    max-width: 820px;
    margin: 14px auto 0;   /* petit ecart : les galets de reassurance precedent la note */
    color: var(--muted);
    font-size: var(--fs-sm);
}

/* Bande de reassurance : galets .chip-info centres sous les forfaits. */
.tarifs-forfaits__reassurance { justify-content: center; margin-top: clamp(28px, 4vw, 44px); }

/* Bascule mensuel/annuel : placee ici, au-dessus des cartes qu'elle controle, centree. */
.tarifs-prix-bascule {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0 auto clamp(26px, 3vw, 36px);
}
.tarifs-prix-bascule__mention { color: var(--subtle); font-size: var(--fs-sm); }

/* --- Tableau comparatif -------------------------------------------------- */
.comparatif {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-panel-lg) var(--r-panel-sm) var(--r-panel-lg) var(--r-panel-sm);   /* panneau premium (coins galet amples), comme .preuve__panneau de la Demo */
    overflow: hidden;
    overflow-x: auto;
}
.comparatif__table {
    width: 100%;
    min-width: 720px;   /* garde-fou inerte : les cartes prennent le relais des 900px, avant le point de debordement (~791px) */
    border-collapse: collapse;
}
.comparatif__table th,
.comparatif__table td {
    padding: 13px 18px;
    text-align: center;
    font-size: var(--fs-sm);
    border-top: 1px solid var(--border);
    vertical-align: middle;
}
.comparatif__table thead th { border-top: 0; padding-top: 20px; padding-bottom: 16px; }
.comparatif__table tbody th[scope="row"] {
    text-align: left;
    font-weight: 600;
    color: var(--ink);
    width: 44%;
}
.comparatif__entete-libelle { text-align: left; width: 44%; color: var(--subtle); font-weight: 700; }
.comparatif__entete-plan { font-weight: 700; color: var(--ink); }
.comparatif__entete-plan.is-pop { color: var(--olive); }
.comparatif__table th.is-pop,
.comparatif__table td.is-pop { background: var(--pale); }
.comparatif__table tbody tr:hover td:not(.is-pop) { background: color-mix(in srgb, var(--sand) 40%, transparent); }

.comparatif__oui { display: inline-flex; color: var(--olive); }
.comparatif__oui .icon { width: 18px; }
.comparatif__non { display: inline-flex; color: var(--subtle); }
.comparatif__non .icon { width: 16px; }
.comparatif__val { font-weight: 600; }

/* Comparatif en CARTES (mobile <= 900px) : une carte par forfait, chaque ligne
   = libelle / valeur. Masquees en desktop ; le basculement table<->cartes est dans
   la section RESPONSIVE. L'AT ne voit qu'UNE representation a la fois (l'autre est
   en display:none). */
.comparatif__cartes { display: none; }
.comparatif__carte { padding: clamp(18px, 4vw, 26px); }
.comparatif__carte + .comparatif__carte { border-top: 1px solid var(--border); }
.comparatif__carte.is-pop { background: var(--pale); }
.comparatif__carte-titre { font-size: var(--fs-h3); margin-bottom: 10px; }
.comparatif__carte-liste { display: flex; flex-direction: column; }
.comparatif__carte-ligne {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 9px 0;
    border-top: 1px solid var(--border);
    font-size: var(--fs-sm);
}
.comparatif__carte-ligne dt { color: var(--prose); }
.comparatif__carte-ligne dd { flex: none; text-align: right; font-weight: 600; color: var(--ink); }

/* Bloc « Lequel pour moi ? » : aide au choix profil -> forfait, panneau en tete du comparatif. */
.tarifs-choix {
    max-width: 720px;
    margin: 0 auto clamp(28px, 4vw, 44px);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-galet-lg);
    padding: clamp(20px, 3vw, 32px);
}
.tarifs-choix__titre { font-size: var(--fs-h3); margin-bottom: 8px; }
.tarifs-choix__liste { list-style: none; display: flex; flex-direction: column; }
.tarifs-choix__liste li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
}
.tarifs-choix__liste li:first-child { border-top: 0; padding-top: 4px; }
.tarifs-choix__profil { color: var(--prose); font-size: var(--fs-sm); }
.tarifs-choix__liste .chip { flex: none; }

/* Section « Ce que Kipo fait a votre place » : 4 tuiles galet (le travail elimine). */
.tarifs-faire__grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 1.6vw, 22px);
    align-items: stretch;
}
.tarifs-faire__tuile {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-galet-lg);
    padding: clamp(18px, 2vw, 26px);
}
.tarifs-faire__ic {
    flex: none;
    width: 40px; height: 40px;
    border-radius: var(--r-galet-xs);
    background: var(--pale);
    color: var(--olive);
    display: grid; place-items: center;
}
.tarifs-faire__ic .icon { width: 22px; height: 22px; }
.tarifs-faire__tuile p { margin: 0; font-size: var(--fs-sm); color: var(--prose); }

/* Section « Comment se passe la mise en route » : 3 etapes numerotees, a plat. */
.tarifs-demarrage__etapes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 40px);
}
.tarifs-demarrage__etape { display: flex; flex-direction: column; gap: 10px; }
.tarifs-demarrage__num {
    width: 40px; height: 40px;
    border-radius: var(--r-galet-xs);
    background: var(--pale);
    color: var(--olive);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    display: grid; place-items: center;
}
.tarifs-demarrage__etape h3 { font-size: var(--fs-h3); margin: 0; }
.tarifs-demarrage__etape p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }

/* ==========================================================================
   RESPONSIVE - regroupe en fin de fichier (apres les regles de base).
   Un seul palier de largeur : <= 900px (meme bascule mobile que le reste du site).
   Le mouvement reduit est neutralise globalement par kipo.css ([data-reveal] > *).
   ========================================================================== */
@media (max-width: 900px) {
    /* Hero : texte puis photo, empiles ; photo capee et centree. */
    .tarifs-hero__grille { grid-template-columns: 1fr; }
    .tarifs-hero__media { max-width: 460px; margin-inline: auto; }

    /* Forfaits : la grille passe en 1 colonne, centree. */
    .grille-forfaits { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; }

    /* Comparatif : le tableau (qui deborderait) cede la place aux cartes par forfait. */
    .comparatif__table { display: none; }
    .comparatif__cartes { display: block; }

    /* Ce que Kipo fait : 2 colonnes ; mise en route : 1 colonne centree. */
    .tarifs-faire__grille { grid-template-columns: repeat(2, 1fr); }
    .tarifs-demarrage__etapes { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }

    /* Decor : on allege les blobs secondaires sur la mise en page empilee. */
    .tarifs-hero__blob-2,
    .tarifs-forfaits__blob-2,
    .tarifs-faire__blob-2,
    .tarifs-faq__blob-2 { display: none; }
}

/* Petit mobile : les tuiles « ce que Kipo fait » passent en 1 colonne. */
@media (max-width: 560px) {
    .tarifs-faire__grille { grid-template-columns: 1fr; }
}

/* Tres petit mobile : la bascule mensuel/annuel empile ses 2 options en pleine
   largeur (le label « Annuel (10 % de rabais) » est trop long pour tenir cote a
   cote sans se couper sous ~360px). */
@media (max-width: 420px) {
    .bascule-prix { flex-wrap: wrap; width: 100%; max-width: 340px; }
    .bascule-prix__option { flex: 1 1 100%; }
}