/**
* 2010-2026 ADPixNet | WebMastering
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop or ThirtyBees to newer
* versions in the future. If you wish to customize PrestaShop or ThirtyBees for your
* needs please refer to https://www.prestashop.com or https://www.thirtybees.com for more information.
*
*
* @Module		SGK FAQ
* @Description	Module FAQ : questions/réponses sur page CMS dédiée, recherche AJAX, accordéon, typographie personnalisable.
* @Version		1.7.0
* @Copyright	ADPixNet | WebMasterring <https://adpixnet.com/>
* @Addons		PrestaShop - ThirtyBees Developments <https://addons.adpixnet.com/>
* @support		Support Requests <https://admin.adpixnet.com/forms/ticket?styled=1&with_logo=1>
* @license		Valid for 1 website (or project) for each purchase of license International Registered 
*				Trademark & Property of ADPixNet. More information on <https://addons.adpixnet.com/content/1-politique-de-license>
 */

/* =========================================================================
   RESET & WRAPPER
   ========================================================================= */

.sgkfaq-wrapper {
    margin-bottom: 2rem;
    width: 100%;
    box-sizing: border-box;
}

.sgkfaq-wrapper *,
.sgkfaq-wrapper *::before,
.sgkfaq-wrapper *::after {
    box-sizing: border-box;
}

/* =========================================================================
   GROUPE CATÉGORIE – titre sans icône
   ========================================================================= */

.sgkfaq-group {
    margin-bottom: 1.75rem;
}

.sgkfaq-group__header {
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid #e4eaf5;
}

.sgkfaq-group__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.3;
    letter-spacing: .01em;
}

/* =========================================================================
   LISTE FAQ
   ========================================================================= */

.sgkfaq-list {
    border: 1px solid #dde3ed;
    border-radius: .375rem;
    overflow: hidden;
    width: 100%;
}

/* Item */
.sgkfaq-item {
    border-bottom: 1px solid #dde3ed;
}

.sgkfaq-item:last-child {
    border-bottom: none;
}

/* =========================================================================
   BOUTON QUESTION
   ========================================================================= */

.sgkfaq-item__btn {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: .9rem 1.125rem;
    background: #ffffff;
    border: none;
    text-align: left;
    cursor: pointer;
    gap: .6rem;
    margin: 0;
    line-height: 1.5;
    transition: background .18s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.sgkfaq-item__btn:hover {
    background: #f5f7fc;
}

.sgkfaq-item__btn:focus-visible {
    outline: 2px solid #1a73e8;
    outline-offset: -2px;
}

.sgkfaq-item--open > .sgkfaq-item__btn {
    background: #f5f7fc;
}

/* =========================================================================
   ICÔNE "?" — fto-right-open
   ========================================================================= */

.sgkfaq-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    background: #eef2ff;
    flex-shrink: 0;
    transition: background .18s ease, color .18s ease;
    margin-top: 3px;
}

.sgkfaq-item--open > .sgkfaq-item__btn .sgkfaq-item__icon {
    background: #d8e4fc;
}

.sgkfaq-item__icon [class^="fto-"],
.sgkfaq-item__icon [class*=" fto-"] {
    font-size: .9375rem;
    color: #1a73e8;
    line-height: 1;
}

/* =========================================================================
   TEXTE QUESTION
   ========================================================================= */

.sgkfaq-item__question {
    flex: 1;
    font-weight: 600;
    font-size: .9375rem;
    color: #2c2c3e;
    line-height: 1.45;
    word-break: break-word;
}

/* =========================================================================
   CHEVRON – fto-resize-vertical
   Pas de rotation — l'icône ▲▼ indique visuellement l'état
   par un changement de couleur et une légère mise à l'échelle
   ========================================================================= */

.sgkfaq-item__chevron {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3px;
    width: 22px;
    height: 22px;
}

.sgkfaq-item__chevron [class^="fto-"],
.sgkfaq-item__chevron [class*=" fto-"] {
    font-size: 1.1875rem;
    color: #b0b8c9;
    transition: color .22s ease, transform .22s ease;
    display: block;
    line-height: 1;
}

/* État ouvert : couleur principale + légère compression verticale */
.sgkfaq-item__chevron--open [class^="fto-"],
.sgkfaq-item__chevron--open [class*=" fto-"] {
    color: #1a73e8;
    transform: scaleY(.75);
}

/* =========================================================================
   RÉPONSE / ANSWER
   ========================================================================= */

.sgkfaq-item__answer {
    background: #ffffff;
    overflow: hidden;
}

.sgkfaq-item__answer-body {
    padding: .75rem 1.125rem .9rem 3.25rem;
    font-size: .9375rem;
    color: #4a4a5a;
    line-height: 1.75;
    word-break: break-word;
}

.sgkfaq-item__answer-body p:last-child {
    margin-bottom: 0;
}

.sgkfaq-item__answer-body img {
    max-width: 100%;
    height: auto;
    border-radius: .25rem;
}

.sgkfaq-item__answer-body a {
    color: #1a73e8;
}

.sgkfaq-item__answer-body ul,
.sgkfaq-item__answer-body ol {
    padding-left: 1.375rem;
    margin-bottom: .625rem;
}

/* =========================================================================
   ÉTAT VIDE
   ========================================================================= */

.sgkfaq-empty-state {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: #f8f9fb;
    border-radius: .5rem;
    border: 1px dashed #d0d9ea;
    margin-bottom: 1.5rem;
}

.sgkfaq-empty-state__icon {
    margin-bottom: .75rem;
}

.sgkfaq-empty-state__icon [class^="fto-"],
.sgkfaq-empty-state__icon [class*=" fto-"] {
    font-size: 2.75rem;
    color: #b0b8c9;
}

.sgkfaq-empty-state__text {
    margin: 0;
    color: #6c757d;
    font-size: .9375rem;
}

/* =========================================================================
   BOUTON RETOUR ACCUEIL — positionné APRÈS toutes les questions/réponses
   ========================================================================= */

.sgkfaq-home-link-wrap {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e8edf5;
}

.sgkfaq-home-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #5a6275;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 18px 8px 14px;
    border: 1px solid #d0d9ea;
    border-radius: 99px;
    background: #f4f6fb;
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .15s ease;
    white-space: nowrap;
}

.sgkfaq-home-link:hover,
.sgkfaq-home-link:focus {
    color: #1a73e8;
    background: #e8f0fe;
    border-color: #a8c4f8;
    text-decoration: none;
    transform: translateX(-3px);
    outline: none;
}

.sgkfaq-home-link__icon {
    display: flex;
    align-items: center;
}

.sgkfaq-home-link__icon [class^="fto-"],
.sgkfaq-home-link__icon [class*=" fto-"] {
    font-size: 1.0625rem;
    line-height: 1;
}

/* =========================================================================
   RESPONSIVE – Mobile First
   ========================================================================= */

/* Petit mobile */
@media (max-width: 575.98px) {
    .sgkfaq-item__icon { display: none; }
    .sgkfaq-item__btn  { padding: .75rem .875rem; gap: .5rem; }
    .sgkfaq-item__answer-body { padding: .625rem .875rem .75rem .875rem; }
    .sgkfaq-item__question { font-size: .875rem; }
    .sgkfaq-group__title { font-size: .9375rem; }
    .sgkfaq-home-link { font-size: .8125rem; padding: 7px 14px 7px 11px; }
    .sgkfaq-home-link-wrap { margin-top: 1.25rem; padding-top: .875rem; }
}

/* Tablette portrait */
@media (min-width: 576px) and (max-width: 767.98px) {
    .sgkfaq-item__icon { display: none; }
    .sgkfaq-item__answer-body { padding-left: 1.125rem; }
}

/* Desktop */
@media (min-width: 768px) {
    .sgkfaq-item__icon { display: flex; }
}
