/* ==========================================
   CSS pour les tunnels de vente
   Chargé uniquement sur les pages articleitem
   ========================================== */

/* ===========================================
   FAMILLE 1 — tunnel-card-*
   Carte verticale, icône en haut, accent top border,
   fond blanc, texte centré  (ex : contrat moral)
   ---
   Usage HTML :
     <div class="tunnel-card-purple">             ← ou -green / -orange
       <i class="fas fa-ICONE tunnel-card-purple-icon"></i>   ← icône FA obligatoire
       <h4>Titre de la carte</h4>                   ← couleur surchargée si -green/-orange
       <p>Description. Mot clé : <strong>valeur</strong>.</p>
     </div>
   À placer dans une grille Bootstrap (ex : col-md-3).
   =========================================== */

.tunnel-card-purple,
.tunnel-card-green,
.tunnel-card-orange {
    background: #fff;
    border-radius: 0.375rem;
    padding: 1.25rem;
    width: 100%;
    text-align: center;
}
.tunnel-card-purple { border: 1px solid #d8c8ed; border-top: 4px solid #925CC7; }
.tunnel-card-green  { border: 1px solid #b5ddb8; border-top: 4px solid #1A7A6E; }
.tunnel-card-orange { border: 1px solid #f0d0a0; border-top: 4px solid #D4822A; }

.tunnel-card-purple-icon,
.tunnel-card-green-icon,
.tunnel-card-orange-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
	text-align: center;
}
.tunnel-card-purple-icon { color: #925CC7; }
.tunnel-card-green-icon  { color: #1A7A6E; }
.tunnel-card-orange-icon { color: #D4822A; }

.tunnel-card-purple p,
.tunnel-card-green p,
.tunnel-card-orange p {
    font-size: 0.875rem;
    text-align: left;
}
/* h4 : purple hérite du global (#925CC7) — surcharge green et orange */
.tunnel-card-green h4  { color: #1A7A6E; }
.tunnel-card-orange h4 { color: #D4822A; }
/* strong : surcharge du global (#AC82D4) pour green et orange */
.tunnel-card-green strong  { color: #1A7A6E; }
.tunnel-card-orange strong { color: #D4822A; }

/* ===========================================
   FAMILLE 2 — tunnel-card-vertical-*
   Carte verticale, fond teinté, bordure uniforme
   (ex : Qui suis-je ?)
   ---
   Usage HTML :
     <div class="tunnel-card-vertical-purple">    ← ou -green / -orange
       <h4>Titre de la section</h4>                ← couleur surchargée si -green/-orange
       <p>Texte principal. <strong>Point clé</strong>.</p>
       <ul><li>Élément de liste</li></ul>
     </div>
   Pas d'icône dans cette famille.
   =========================================== */

.tunnel-card-vertical-purple,
.tunnel-card-vertical-green,
.tunnel-card-vertical-orange {
    border-radius: 0.375rem;
    padding: 1.25rem 1.5rem;
    width: 100%;
}
.tunnel-card-vertical-purple { background-color: #F5F0FB; border: 2px solid #925CC7; }
.tunnel-card-vertical-green  { background-color: #DAF7A6; border: 2px solid #1A7A6E; }
.tunnel-card-vertical-orange { background-color: #FEF3CD; border: 2px solid #D4822A; }

.tunnel-card-vertical-purple h4,
.tunnel-card-vertical-green h4,
.tunnel-card-vertical-orange h4 {
    text-align: center;
    margin-bottom: 0.75rem;
}
.tunnel-card-vertical-green h4  { color: #1A7A6E; }
.tunnel-card-vertical-orange h4 { color: #D4822A; }

.tunnel-card-vertical-purple p, .tunnel-card-vertical-purple ul { color: #333; }
.tunnel-card-vertical-green p,  .tunnel-card-vertical-green ul  { color: #1A7A6E; }
.tunnel-card-vertical-orange p, .tunnel-card-vertical-orange ul { color: #333; }
/* strong : surcharge du global (#AC82D4) pour green et orange */
.tunnel-card-vertical-green strong  { color: #1A7A6E; }
.tunnel-card-vertical-orange strong { color: #D4822A; }

/* ===========================================
   FAMILLE 3 — tunnel-paragraph-*
   Flex horizontal, grande icône à gauche
   (ex : engagement / promesses)
   ---
   Usage HTML :
     <div class="tunnel-paragraph-purple">        ← ou -green / -orange
       <i class="fas fa-ICONE tunnel-paragraph-purple-icon"></i>  ← icône FA obligatoire
       <div class="tunnel-paragraph-body">        ← wrapper obligatoire (flex)
         <h4>Titre</h4>                            ← couleur surchargée si -green/-orange
         <p>Texte détaillé. <strong>Point clé</strong>.</p>
         <ul><li>Élément de liste</li></ul>
       </div>
     </div>
   =========================================== */

.tunnel-paragraph-purple,
.tunnel-paragraph-green,
.tunnel-paragraph-orange {
    border-radius: 0.375rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}
.tunnel-paragraph-purple { background-color: #F5F0FB; border: 2px solid #925CC7; }
.tunnel-paragraph-green  { background-color: #DAF7A6; border: 2px solid #1A7A6E; }
.tunnel-paragraph-orange { background-color: #FEF3CD; border: 2px solid #D4822A; }

.tunnel-paragraph-purple-icon,
.tunnel-paragraph-green-icon,
.tunnel-paragraph-orange-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
    width: 3rem;
    text-align: center;
    padding-top: 0.2rem;
}
.tunnel-paragraph-purple-icon { color: #925CC7; }
.tunnel-paragraph-green-icon  { color: #1A7A6E; }
.tunnel-paragraph-orange-icon { color: #D4822A; }

.tunnel-paragraph-body { flex: 1; }

.tunnel-paragraph-purple h4 { margin-bottom: 0.5rem; }
.tunnel-paragraph-green h4  { color: #1A7A6E; margin-bottom: 0.5rem; }
.tunnel-paragraph-orange h4 { color: #D4822A; margin-bottom: 0.5rem; }

.tunnel-paragraph-purple p, .tunnel-paragraph-purple ul { color: #925CC7; }
.tunnel-paragraph-green p,  .tunnel-paragraph-green ul  { color: #1A7A6E; }
.tunnel-paragraph-orange p, .tunnel-paragraph-orange ul { color: #D4822A; }
/* strong : couleur complémentaire pour faire ressortir sur le texte courant */
.tunnel-paragraph-purple strong { color: #D4822A; }  /* orange sur fond mauve   */
.tunnel-paragraph-green strong  { color: #D4822A; }  /* orange sur fond vert    */
.tunnel-paragraph-orange strong { color: #925CC7; }  /* purple sur fond orange  */

/* --- Table de contribution --- */
.tunnel-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}
.tunnel-table thead tr {
    background-color: #925CC7;
    color: #fff;
}
.tunnel-table th {
    padding: 0.5rem 0.75rem;
    text-align: left;
}
.tunnel-table td {
    padding: 0.5rem 0.75rem;
}
.tunnel-table td.left-col {
    white-space: nowrap;
}
.tunnel-table tr {
    border-bottom: 1px solid #ddd;
}
.tunnel-table tr.alt {
    background: #fbfbfb;
}
.tunnel-table tr.highlight {
    background: #fff8dc;
}

/* --- Widget de sélection du montant (spécifique shopguidmail — ne pas reproduire) --- */
.free-amount-widget {
    max-width: 420px;
    margin: 0 auto 1.5rem auto;
    padding: 1.25rem;
    border: 2px solid #f5dfc2;;
    border-radius: 0.5rem;
    text-align: center;
}
#free-amount-label {
    min-height: 2.8rem;
    font-size: 0.78rem;
    font-family: 'Open Sans', sans-serif;
    color: #D4822A;
    font-weight: 600;
    line-height: 1.45;
    margin-bottom: 0.35rem;
}
.free-amount-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 0.5rem 0;
}
.free-amount-btn {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 700;
    transition: all .2s;
    padding: 0;
}
#free-amount-minus {
    border: 2px solid #ccc;
    color: #ccc;
    cursor: not-allowed;
}
#free-amount-plus {
    border: 2px solid #D4822A;
    color: #D4822A;
    cursor: pointer;
}
#free-amount-value {
    font-size: 1.7rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: #D4822A;
    min-width: 4.5rem;
    text-align: center;
}
#free-amount-callout {
    min-height: 2.5rem;
    font-size: 0.78rem;
    font-family: 'Open Sans', sans-serif;
    color: #777;
    font-style: italic;
    line-height: 1.4;
    margin-bottom: 0.75rem;
}

/* ===========================================
   LAYOUT AVEC IMAGE — ariastyle="counter"
   Rendu par articleitem.php : 2 colonnes Bootstrap
   (texte + image flottante), responsive.
   Pas de CSS tunnel spécifique — layout hérité de
   styles.reviewsarticles.css (.counter).
   ---
   Usage XML :
     <paragraphe ariastyle="counter"
                 leftcolumns="2" rightcolumns="10"
                 imagepath="mon-image.jpg" align="left"
                 style="back-yellow">          ← fond coloré optionnel
     <![CDATA[
       <span class="badge-orange">Titre du bloc</span>
       <p>Texte. <strong>Mot clé</strong>.</p>
       <ul><li>Élément</li></ul>
     ]]>
     </paragraphe>

   Fonds colorés disponibles (styles.extra.css) :
     style=""           → fond blanc (défaut)
     style="back-purple" → #F5F0FB (mauve très clair)
     style="back-green"  → #DAF7A6 (vert très clair)
     style="back-orange" → #FEF0D4 (orange très clair)
     style="back-yellow" → #F4ECA4 (jaune clair)  ← à préférer à "myyellow"

   Placement de l'image :
     leftcolumns="2"  rightcolumns="10" align="left"  → image à gauche
     leftcolumns="10" rightcolumns="2"  align="right" → image à droite

   Note : .counter applique ses propres styles sur h2, .section-title,
   .list-unstyled, etc. — les surcharges tunnel (h4, strong) ci-dessus
   ne s'appliquent PAS dans ce contexte (pas de .counter dans le sélecteur).
   =========================================== */

/* =============================================================================
   LAYOUT .sg-vertical — Fiche produit [image | description] + détails bas
   -----------------------------------------------------------------------------
   Partagé par shopguid/*.xml et shoplen/*.xml.
   Défini ici une seule fois — les blocs <style> inline dans les pages XML
   peuvent être supprimés pour éviter la duplication.

   Structure HTML :
     <div class="cards-2 sg-vertical">
       <div class="container"><div class="row"><div class="col-lg-12">
         <div class="card tunnel-form-orange">        ← ou green / purple
           <div class="row no-gutters">
             <div class="col-12 col-lg-7 order-2 order-lg-1">
               <div class="card-body"> ... </div>
             </div>
             <div class="col-12 col-lg-5 order-1 order-lg-2 sg-img-col">
               <div class="card-image"><img ...></div>
             </div>
           </div>
           <div class="sg-details">
             <div class="collapse" id="details-pN">
               <div class="tf-detail-box"> ... </div>
             </div>
             <div class="button-container"> ... </div>
           </div>
         </div>
       </div></div></div>
     </div>
   ============================================================================= */

.cards-2.sg-vertical .card {
    display: block !important;
    max-width: 100% !important;
    width: 100%;
}
@media (min-width: 992px) {
    .cards-2.sg-vertical .col-lg-12 div.card:nth-child(3n+2) {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* Mobile (< 992px) : image en haut, caractéristiques, détails */
@media (max-width: 991.98px) {
    .cards-2.sg-vertical .card-body {
        border-bottom: none !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    .cards-2.sg-vertical .sg-details {
        padding: 0.75rem 1rem 1.5rem;
    }
}

/* Desktop (>= 992px) : [description (gauche) | image (droite)] / [détails pleine largeur] */
@media (min-width: 992px) {
    .cards-2.sg-vertical .card {
        border: 1px solid #ebe8e8;
        border-radius: 0.375rem;
        overflow: hidden;
    }
    .cards-2.sg-vertical .card-body {
        border: none !important;
        border-radius: 0 !important;
        height: 100%;
    }
    .cards-2.sg-vertical .sg-img-col {
        overflow: hidden;
    }
    .cards-2.sg-vertical .sg-img-col .card-image {
        height: 100%;
    }
    .cards-2.sg-vertical .sg-img-col img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0 !important;
    }
    .cards-2.sg-vertical .sg-details {
        padding: 0.75rem 1rem 1.5rem;
    }
}

/* Rotation de la flèche au déploiement/repli */
.cards-2.sg-vertical a[data-toggle="collapse"] .fa-chevron-down {
    display: inline-block;
    transition: transform 0.25s ease;
}
.cards-2.sg-vertical a[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

/* =============================================================================
   FAMILLE 4 — tunnel-form-* (fiche produit colorée)
   -----------------------------------------------------------------------------
   Appliqué sur l'élément .card à l'intérieur de .cards-2.sg-vertical.
   Définit l'accentuation couleur pour toute la carte : bordure supérieure,
   fonds tintés, badge, sous-titre, icônes, boîte détails et lien toggle.

   Classes enfants (à poser sur les éléments correspondants dans le HTML) :
     .tf-badge            → <span> badge statut en haut à gauche du .card-body
     .tf-subtitle         → <p> sous-titre italique centré sous le h3
     .tf-icon             → <i class="fas ..."> dans les lignes de features flex
                             (NE PAS utiliser sur les <i> dans ul.list-unstyled)
     .tunnel-summary-text → <p> texte résumé placé après le <hr> séparateur,
                             avant la ul.list-unstyled — police Open Sans 0.88rem,
                             couleur #000, line-height 1.5 (commune aux 3 variantes)
     .tf-detail-box       → <div> de fond teinté + bordure gauche dans .sg-details

   Usage :
     <div class="card tunnel-form-orange">
       <div class="card-body">
         <span class="tf-badge">Nouveau</span>
         <h3 class="card-title">Titre</h3>
         <p class="tf-subtitle">Sous-titre</p>
         <div style="font-size:0.82rem; font-family:'Open Sans',sans-serif; margin-bottom:1rem;">
           <div style="display:flex; align-items:flex-start; margin-bottom:0.3rem;">
             <i class="fas fa-tag tf-icon"></i>
             <span>...</span>
           </div>
         </div>
         <hr style="margin-top:0; margin-bottom:1rem;">
         <p class="tunnel-summary-text">Résumé accrocheur de la fiche produit.</p>
         <ul class="list-unstyled li-space-lg">
           <li class="media"><i class="fas fa-square"></i><div class="media-body">...</div></li>
         </ul>
         <a href="#details-pN" data-toggle="collapse" aria-expanded="false"
            aria-controls="details-pN" style="font-size:0.8rem; text-decoration:none;
            display:inline-block; margin-bottom:0.75rem;">
           <i class="fas fa-chevron-down" style="margin-right:0.3rem;"></i>Voir plus
         </a>
       </div>
       ...
       <div class="sg-details">
         <div class="collapse" id="details-pN">
           <div class="tf-detail-box"> ... </div>
         </div>
         <div class="button-container"> ... </div>
       </div>
     </div>

   Variantes disponibles : tunnel-form-orange | tunnel-form-green | tunnel-form-purple
   ============================================================================= */

/* --- Classes enfants communes aux 3 variantes --- */

.tf-badge {
    display: inline-block;
    color: #fff;
    font: 700 0.68rem 'Montserrat', sans-serif;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.7rem;
    border-radius: 0.2rem;
    margin-bottom: 0.6rem;
    text-transform: uppercase;
    border: 2px solid rgba(255,255,255,0.65); /* anneau interne blanc */
}

.tf-subtitle {
    font-size: 0.88rem;
    font-style: italic;
    text-align: center;
    margin-top: -0.4rem;
    margin-bottom: 0.85rem;
}

/* Icône dans les lignes features flex (hors ul.list-unstyled) */
.tf-icon {
    width: 1.1rem;
    margin-top: 0.18rem;
    margin-right: 0.45rem;
    flex-shrink: 0;
}

.tf-detail-box {
    border-radius: 0.25rem;
    padding: 1rem;
    font-size: 0.82rem;
    color: #484a46;
    margin-bottom: 0.75rem;
    line-height: 1.55;
    margin-top: 0.75rem;
}

/* Texte résumé sous le <hr> dans .card-body */
.tunnel-summary-text {
    font-size: 0.88rem;
    font-family: 'Open Sans', sans-serif;
    color: #000;
    line-height: 1.5;
}

/* --- Base commune aux 3 variantes (héritage font) --- */
.tunnel-form-orange,
.tunnel-form-green,
.tunnel-form-purple {
    font-family: 'Open Sans', sans-serif;
}

/* h3/h4 ont color:#925CC7 et strong a color:#AC82D4 dans styles.reviewsarticles.css
   → surcharger par la couleur de chaque variante */
.tunnel-form-orange h3, .tunnel-form-orange h4 { color: #D4822A; }
.tunnel-form-green  h3, .tunnel-form-green  h4 { color: #1A7A6E; }
.tunnel-form-purple h3, .tunnel-form-purple h4 { color: #925CC7; }

/* --- Variante ORANGE (#D4822A / fond #FFF9EE) --- */

.cards-2.sg-vertical .card.tunnel-form-orange {
    border: 1px solid #D4822A;
    border-top-width: 3px;
    border-radius: 0.375rem;
    overflow: hidden;
}
.tunnel-form-orange .card-body,
.tunnel-form-orange .sg-img-col,
.tunnel-form-orange .sg-details {
    background-color: #FFF9EE;
}
.tunnel-form-orange .tf-badge       { background-color: #D4822A; outline: 2px dashed #D4822A; }
.tunnel-form-orange .tf-subtitle    { color: #D4822A; }
.tunnel-form-orange .tf-icon        { color: #D4822A; }
.tunnel-form-orange .tf-detail-box  { background: #f5dfc2; border-left: 3px solid #D4822A; }
.tunnel-form-orange .list-unstyled .fas            { color: #D4822A; }
.tunnel-form-orange a[data-toggle="collapse"]      { color: #D4822A; }
.tunnel-form-orange strong                         { color: #D4822A; }
.tunnel-form-orange li::marker                     { color: #D4822A; }

/* --- Variante GREEN (#1A7A6E / fond #EDF7F5) --- */

.cards-2.sg-vertical .card.tunnel-form-green {
    border: 1px solid #1A7A6E;
    border-top-width: 3px;
    border-radius: 0.375rem;
    overflow: hidden;
}
.tunnel-form-green .card-body,
.tunnel-form-green .sg-img-col,
.tunnel-form-green .sg-details {
    background-color: #EDF7F5;
}
.tunnel-form-green .tf-badge       { background-color: #1A7A6E; outline: 2px dashed #1A7A6E; }
.tunnel-form-green .tf-subtitle    { color: #1A7A6E; }
.tunnel-form-green .tf-icon        { color: #1A7A6E; }
.tunnel-form-green .tf-detail-box  { background: #c8e8e3; border-left: 3px solid #1A7A6E; }
.tunnel-form-green .list-unstyled .fas             { color: #1A7A6E; }
.tunnel-form-green a[data-toggle="collapse"]       { color: #1A7A6E; }
.tunnel-form-green  strong                         { color: #1A7A6E; }
.tunnel-form-green  li::marker                     { color: #1A7A6E; }

/* --- Variante PURPLE (#925CC7 / fond #F5F0FB) --- */

.cards-2.sg-vertical .card.tunnel-form-purple {
    border: 1px solid #925CC7;
    border-top-width: 3px;
    border-radius: 0.375rem;
    overflow: hidden;
}
.tunnel-form-purple .card-body,
.tunnel-form-purple .sg-img-col,
.tunnel-form-purple .sg-details {
    background-color: #F5F0FB;
}
.tunnel-form-purple .tf-badge       { background-color: #925CC7; outline: 2px dashed #925CC7; }
.tunnel-form-purple .tf-subtitle    { color: #925CC7; }
.tunnel-form-purple .tf-icon        { color: #925CC7; }
.tunnel-form-purple .tf-detail-box  { background: #ddd0f2; border-left: 3px solid #925CC7; }
.tunnel-form-purple .list-unstyled .fas            { color: #925CC7; }
.tunnel-form-purple a[data-toggle="collapse"]      { color: #925CC7; }
.tunnel-form-purple strong                         { color: #925CC7; }
.tunnel-form-purple li::marker                     { color: #925CC7; }

/* =============================================================================
   Hover des boutons btn-solid-reg dans les variantes tunnel-form-*
   Inversion fond/texte avec la couleur de la famille.
   !important sur background-color : nécessaire pour surcharger le style inline
   (background-color:#X; border-color:#X;) posé directement sur le <a>.
   ============================================================================= */
.tunnel-form-orange .btn-solid-reg:hover { background-color: transparent !important; color: #D4822A; }
.tunnel-form-green  .btn-solid-reg:hover { background-color: transparent !important; color: #1A7A6E; }
.tunnel-form-purple .btn-solid-reg:hover { background-color: transparent !important; color: #925CC7; }