{%- comment -%} --- REGLAGES --- {%- endcomment -%}
{%- assign bg_color = "#ECE5DC" -%}
{%- assign accent_green = "#556B3F" -%}
{%- assign text_dark = "#333333" -%}
{%- assign title_color = "#000000" -%}
{%- comment -%} 👉 TON IMAGE EST INSÉRÉE ICI {%- endcomment -%}
{%- assign image_url = "https://cdn.shopify.com/s/files/1/1060/5900/6283/files/51812134-5D8C-499D-8F3B-4AD54741ADF9_71ed7204-0319-4ab0-b4ec-ae96cdb7a1b6.jpg?v=1783257634" -%}
{%- comment -%} 👉 Si hors page produit, définir le handle ici, sinon 'product' est auto {%- endcomment -%}
{%- comment -%}{%- assign product = all_products['handle-du-gant'] -%}{%- endcomment -%}
{%- assign product_title = product.title | default: "Gant en Soie Corps Kalyani" -%}
{%- assign product_desc = product.description | strip_html | truncatewords: 30 | default: "Le secret d'une peau instantanément lisse, soyeuse et rayonnante. Une alternative naturelle et luxueuse aux gommages chimiques, conçue pour révéler l'éclat originel de votre corps." -%}
{%- assign btn_label = "Ajouter au panier" -%}
{%- comment -%} --- CALCUL DES DATES DYNAMIQUES (J, J+1, J+3) --- {%- endcomment -%}
{%- assign date_now = 'now' | date: '%s' -%}
{%- assign date_exp = date_now | plus: 86400 -%}
{%- assign date_liv = date_now | plus: 259200 -%}
{%- assign m1 = date_now | date: "%m" -%}
{%- capture m_now -%}{% case m1 %}{% when '01' %}janv.{% when '02' %}févr.{% when '03' %}mars{% when '04' %}avr.{% when '05' %}mai{% when '06' %}juin{% when '07' %}juil.{% when '08' %}août{% when '09' %}sept.{% when '10' %}oct.{% when '11' %}nov.{% when '12' %}déc.{% endcase %}{%- endcapture -%}
{%- assign m2 = date_exp | date: "%m" -%}
{%- capture m_exp -%}{% case m2 %}{% when '01' %}janv.{% when '02' %}févr.{% when '03' %}mars{% when '04' %}avr.{% when '05' %}mai{% when '06' %}juin{% when '07' %}juil.{% when '08' %}août{% when '09' %}sept.{% when '10' %}oct.{% when '11' %}nov.{% when '12' %}déc.{% endcase %}{%- endcapture -%}
{%- assign m3 = date_liv | date: "%m" -%}
{%- capture m_liv -%}{% case m3 %}{% when '01' %}janv.{% when '02' %}févr.{% when '03' %}mars{% when '04' %}avr.{% when '05' %}mai{% when '06' %}juin{% when '07' %}juil.{% when '08' %}août{% when '09' %}sept.{% when '10' %}oct.{% when '11' %}nov.{% when '12' %}déc.{% endcase %}{%- endcapture -%}
<div class="kalyani-az-hero" style="--bg-color: {{ bg_color }}; --accent-green: {{ accent_green }}; --text-dark: {{ text_dark }}; --title-color: {{ title_color }};">
<div class="kalyani-az-image">
<img src="{{ image_url }}" alt="{{ product_title }}" loading="lazy" width="600" height="600">
</div>
<div class="kalyani-az-content">
<h1 class="kalyani-az-title">{{ product_title }}</h1>
<p class="kalyani-az-desc">{{ product_desc }}</p>
{%- comment -%} --- FORMULAIRE AJAX SHOPIFY --- {%- endcomment -%}
{% form 'product', product, class: 'kalyani-az-form' %}
{%- comment -%} Sélecteur de variante caché (prend la première disponible) {%- endcomment -%}
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
{%- comment -%} Quantité fixée à 1 {%- endcomment -%}
<input type="hidden" name="quantity" value="1">
<div class="kalyani-az-action-row">
{%- comment -%} Bouton Submit (Interactif) {%- endcomment -%}
<button type="submit" name="add" class="kalyani-az-btn"
{% unless product.available %}disabled{% endunless %}>
<span class="btn-text">
{% if product.available %}
{{ btn_label }}
{% else %}
Rupture de stock
{% endif %}
</span>
</button>
<div class="kalyani-az-timeline">
<div class="kalyani-tl-step">
<div class="kalyani-tl-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
</div>
<div class="kalyani-tl-date">{{ date_now | date: "%d" }} {{ m_now }}</div>
<div class="kalyani-tl-label">Commande passée</div>
</div>
<div class="kalyani-tl-line"></div>
<div class="kalyani-tl-step">
<div class="kalyani-tl-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle></svg>
</div>
<div class="kalyani-tl-date">{{ date_exp | date: "%d" }} {{ m_exp }}</div>
<div class="kalyani-tl-label">Commande expédiée</div>
</div>
<div class="kalyani-tl-line"></div>
<div class="kalyani-tl-step">
<div class="kalyani-tl-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline></svg>
</div>
<div class="kalyani-tl-date">{{ date_liv | date: "%d" }} {{ m_liv }}</div>
<div class="kalyani-tl-label"><strong>Livré !</strong></div>
</div>
</div>
</div>
{% endform %}
</div>
</div>
<style>
.kalyani-az-hero {
display: flex;
flex-wrap: wrap;
background-color: var(--bg-color);
border-radius: 8px;
overflow: hidden;
margin: 20px 0;
font-family: inherit;
width: 100%;
}
.kalyani-az-image {
flex: 1 1 45%;
min-width: 300px;
}
.kalyani-az-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
min-height: 100%;
}
.kalyani-az-content {
flex: 1 1 50%;
padding: 60px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Pour le formulaire Shopify généré */
.kalyani-az-form {
margin: 0;
padding: 0;
width: 100%;
}
.kalyani-az-title {
color: var(--title-color) !important;
font-size: 24px;
margin: 0 0 15px 0;
font-weight: 400;
line-height: 1.3;
width: 100%;
text-align: left;
}
.kalyani-az-desc {
color: var(--text-dark) !important;
font-size: 14px;
line-height: 1.6;
margin: 0 0 35px 0;
width: 100%;
text-align: left;
}
.kalyani-az-action-row {
display: flex;
flex-direction: column;
align-items: center;
gap: 35px;
width: 100%;
margin: 0 auto;
}
.kalyani-az-btn {
background-color: transparent !important;
color: var(--accent-green) !important;
border: 2px solid var(--accent-green) !important;
padding: 14px 45px;
border-radius: 6px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
width: fit-content;
display: inline-flex;
align-items: center;
justify-content: center;
}
.kalyani-az-btn:hover {
background-color: var(--accent-green) !important;
color: #ffffff !important;
}
.kalyani-az-btn[disabled] {
opacity: 0.5;
cursor: not-allowed;
border-color: #ccc !important;
color: #888 !important;
}
.kalyani-az-timeline {
display: flex;
align-items: flex-start;
justify-content: center;
width: 100%;
max-width: 400px;
}
.kalyani-tl-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 1;
}
.kalyani-tl-icon {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: transparent !important;
border: 1px solid var(--accent-green);
color: var(--accent-green) !important;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
}
.kalyani-tl-icon svg {
width: 14px;
height: 14px;
}
.kalyani-tl-line {
height: 1px;
background-color: var(--accent-green);
width: 40px;
margin-top: 15px;
opacity: 0.4;
}
.kalyani-tl-date {
font-size: 11px;
font-weight: 700;
color: var(--text-dark) !important;
margin-bottom: 2px;
}
.kalyani-tl-label {
font-size: 11px;
color: var(--text-dark) !important;
line-height: 1.2;
}
@media screen and (max-width: 768px) {
.kalyani-az-hero {
flex-direction: column;
}
.kalyani-az-image {
width: 100%;
height: 300px;
}
.kalyani-az-content {
padding: 30px 20px;
}
.kalyani-az-title {
font-size: 22px;
}
.kalyani-az-btn {
width: 100%;
text-align: center;
}
.kalyani-tl-line {
width: 25px;
}
}
</style>
{%- comment -%} --- REGLAGES --- {%- endcomment -%}
{%- assign bg_color = "#ECE5DC" -%}
{%- assign accent_green = "#556B3F" -%}
{%- assign text_dark = "#333333" -%}
{%- assign title_color = "#000000" -%}
{%- comment -%} 👉 TON IMAGE EST INSÉRÉE ICI {%- endcomment -%}
{%- assign image_url = "https://cdn.shopify.com/s/files/1/1060/5900/6283/files/51812134-5D8C-499D-8F3B-4AD54741ADF9_71ed7204-0319-4ab0-b4ec-ae96cdb7a1b6.jpg?v=1783257634" -%}
{%- comment -%} 👉 Si hors page produit, définir le handle ici, sinon 'product' est auto {%- endcomment -%}
{%- comment -%}{%- assign product = all_products['handle-du-gant'] -%}{%- endcomment -%}
{%- assign product_title = product.title | default: "Gant en Soie Corps Kalyani" -%}
{%- assign product_desc = product.description | strip_html | truncatewords: 30 | default: "Le secret d'une peau instantanément lisse, soyeuse et rayonnante. Une alternative naturelle et luxueuse aux gommages chimiques, conçue pour révéler l'éclat originel de votre corps." -%}
{%- assign btn_label = "Ajouter au panier" -%}
{%- comment -%} --- CALCUL DES DATES DYNAMIQUES (J, J+1, J+3) --- {%- endcomment -%}
{%- assign date_now = 'now' | date: '%s' -%}
{%- assign date_exp = date_now | plus: 86400 -%}
{%- assign date_liv = date_now | plus: 259200 -%}
{%- assign m1 = date_now | date: "%m" -%}
{%- capture m_now -%}{% case m1 %}{% when '01' %}janv.{% when '02' %}févr.{% when '03' %}mars{% when '04' %}avr.{% when '05' %}mai{% when '06' %}juin{% when '07' %}juil.{% when '08' %}août{% when '09' %}sept.{% when '10' %}oct.{% when '11' %}nov.{% when '12' %}déc.{% endcase %}{%- endcapture -%}
{%- assign m2 = date_exp | date: "%m" -%}
{%- capture m_exp -%}{% case m2 %}{% when '01' %}janv.{% when '02' %}févr.{% when '03' %}mars{% when '04' %}avr.{% when '05' %}mai{% when '06' %}juin{% when '07' %}juil.{% when '08' %}août{% when '09' %}sept.{% when '10' %}oct.{% when '11' %}nov.{% when '12' %}déc.{% endcase %}{%- endcapture -%}
{%- assign m3 = date_liv | date: "%m" -%}
{%- capture m_liv -%}{% case m3 %}{% when '01' %}janv.{% when '02' %}févr.{% when '03' %}mars{% when '04' %}avr.{% when '05' %}mai{% when '06' %}juin{% when '07' %}juil.{% when '08' %}août{% when '09' %}sept.{% when '10' %}oct.{% when '11' %}nov.{% when '12' %}déc.{% endcase %}{%- endcapture -%}
<div class="kalyani-az-hero" style="--bg-color: {{ bg_color }}; --accent-green: {{ accent_green }}; --text-dark: {{ text_dark }}; --title-color: {{ title_color }};">
<div class="kalyani-az-image">
<img src="{{ image_url }}" alt="{{ product_title }}" loading="lazy" width="600" height="600">
</div>
<div class="kalyani-az-content">
<h1 class="kalyani-az-title">{{ product_title }}</h1>
<p class="kalyani-az-desc">{{ product_desc }}</p>
{%- comment -%} --- FORMULAIRE AJAX SHOPIFY --- {%- endcomment -%}
{% form 'product', product, class: 'kalyani-az-form' %}
{%- comment -%} Sélecteur de variante caché (prend la première disponible) {%- endcomment -%}
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
{%- comment -%} Quantité fixée à 1 {%- endcomment -%}
<input type="hidden" name="quantity" value="1">
<div class="kalyani-az-action-row">
{%- comment -%} Bouton Submit (Interactif) {%- endcomment -%}
<button type="submit" name="add" class="kalyani-az-btn"
{% unless product.available %}disabled{% endunless %}>
<span class="btn-text">
{% if product.available %}
{{ btn_label }}
{% else %}
Rupture de stock
{% endif %}
</span>
</button>
<div class="kalyani-az-timeline">
<div class="kalyani-tl-step">
<div class="kalyani-tl-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
</div>
<div class="kalyani-tl-date">{{ date_now | date: "%d" }} {{ m_now }}</div>
<div class="kalyani-tl-label">Commande passée</div>
</div>
<div class="kalyani-tl-line"></div>
<div class="kalyani-tl-step">
<div class="kalyani-tl-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle></svg>
</div>
<div class="kalyani-tl-date">{{ date_exp | date: "%d" }} {{ m_exp }}</div>
<div class="kalyani-tl-label">Commande expédiée</div>
</div>
<div class="kalyani-tl-line"></div>
<div class="kalyani-tl-step">
<div class="kalyani-tl-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline></svg>
</div>
<div class="kalyani-tl-date">{{ date_liv | date: "%d" }} {{ m_liv }}</div>
<div class="kalyani-tl-label"><strong>Livré !</strong></div>
</div>
</div>
</div>
{% endform %}
</div>
</div>
<style>
.kalyani-az-hero {
display: flex;
flex-wrap: wrap;
background-color: var(--bg-color);
border-radius: 8px;
overflow: hidden;
margin: 20px 0;
font-family: inherit;
width: 100%;
}
.kalyani-az-image {
flex: 1 1 45%;
min-width: 300px;
}
.kalyani-az-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
min-height: 100%;
}
.kalyani-az-content {
flex: 1 1 50%;
padding: 60px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Pour le formulaire Shopify généré */
.kalyani-az-form {
margin: 0;
padding: 0;
width: 100%;
}
.kalyani-az-title {
color: var(--title-color) !important;
font-size: 24px;
margin: 0 0 15px 0;
font-weight: 400;
line-height: 1.3;
width: 100%;
text-align: left;
}
.kalyani-az-desc {
color: var(--text-dark) !important;
font-size: 14px;
line-height: 1.6;
margin: 0 0 35px 0;
width: 100%;
text-align: left;
}
.kalyani-az-action-row {
display: flex;
flex-direction: column;
align-items: center;
gap: 35px;
width: 100%;
margin: 0 auto;
}
.kalyani-az-btn {
background-color: transparent !important;
color: var(--accent-green) !important;
border: 2px solid var(--accent-green) !important;
padding: 14px 45px;
border-radius: 6px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
width: fit-content;
display: inline-flex;
align-items: center;
justify-content: center;
}
.kalyani-az-btn:hover {
background-color: var(--accent-green) !important;
color: #ffffff !important;
}
.kalyani-az-btn[disabled] {
opacity: 0.5;
cursor: not-allowed;
border-color: #ccc !important;
color: #888 !important;
}
.kalyani-az-timeline {
display: flex;
align-items: flex-start;
justify-content: center;
width: 100%;
max-width: 400px;
}
.kalyani-tl-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 1;
}
.kalyani-tl-icon {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: transparent !important;
border: 1px solid var(--accent-green);
color: var(--accent-green) !important;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
}
.kalyani-tl-icon svg {
width: 14px;
height: 14px;
}
.kalyani-tl-line {
height: 1px;
background-color: var(--accent-green);
width: 40px;
margin-top: 15px;
opacity: 0.4;
}
.kalyani-tl-date {
font-size: 11px;
font-weight: 700;
color: var(--text-dark) !important;
margin-bottom: 2px;
}
.kalyani-tl-label {
font-size: 11px;
color: var(--text-dark) !important;
line-height: 1.2;
}
@media screen and (max-width: 768px) {
.kalyani-az-hero {
flex-direction: column;
}
.kalyani-az-image {
width: 100%;
height: 300px;
}
.kalyani-az-content {
padding: 30px 20px;
}
.kalyani-az-title {
font-size: 22px;
}
.kalyani-az-btn {
width: 100%;
text-align: center;
}
.kalyani-tl-line {
width: 25px;
}
}
</style>
{%- comment -%} --- REGLAGES --- {%- endcomment -%}
{%- assign bg_color = "#ECE5DC" -%}
{%- assign accent_green = "#556B3F" -%}
{%- assign text_dark = "#333333" -%}
{%- assign title_color = "#000000" -%}
{%- comment -%} 👉 TON IMAGE EST INSÉRÉE ICI {%- endcomment -%}
{%- assign image_url = "https://cdn.shopify.com/s/files/1/1060/5900/6283/files/51812134-5D8C-499D-8F3B-4AD54741ADF9_71ed7204-0319-4ab0-b4ec-ae96cdb7a1b6.jpg?v=1783257634" -%}
{%- comment -%} 👉 Si hors page produit, définir le handle ici, sinon 'product' est auto {%- endcomment -%}
{%- comment -%}{%- assign product = all_products['handle-du-gant'] -%}{%- endcomment -%}
{%- assign product_title = product.title | default: "Gant en Soie Corps Kalyani" -%}
{%- assign product_desc = product.description | strip_html | truncatewords: 30 | default: "Le secret d'une peau instantanément lisse, soyeuse et rayonnante. Une alternative naturelle et luxueuse aux gommages chimiques, conçue pour révéler l'éclat originel de votre corps." -%}
{%- assign btn_label = "Ajouter au panier" -%}
{%- comment -%} --- CALCUL DES DATES DYNAMIQUES (J, J+1, J+3) --- {%- endcomment -%}
{%- assign date_now = 'now' | date: '%s' -%}
{%- assign date_exp = date_now | plus: 86400 -%}
{%- assign date_liv = date_now | plus: 259200 -%}
{%- assign m1 = date_now | date: "%m" -%}
{%- capture m_now -%}{% case m1 %}{% when '01' %}janv.{% when '02' %}févr.{% when '03' %}mars{% when '04' %}avr.{% when '05' %}mai{% when '06' %}juin{% when '07' %}juil.{% when '08' %}août{% when '09' %}sept.{% when '10' %}oct.{% when '11' %}nov.{% when '12' %}déc.{% endcase %}{%- endcapture -%}
{%- assign m2 = date_exp | date: "%m" -%}
{%- capture m_exp -%}{% case m2 %}{% when '01' %}janv.{% when '02' %}févr.{% when '03' %}mars{% when '04' %}avr.{% when '05' %}mai{% when '06' %}juin{% when '07' %}juil.{% when '08' %}août{% when '09' %}sept.{% when '10' %}oct.{% when '11' %}nov.{% when '12' %}déc.{% endcase %}{%- endcapture -%}
{%- assign m3 = date_liv | date: "%m" -%}
{%- capture m_liv -%}{% case m3 %}{% when '01' %}janv.{% when '02' %}févr.{% when '03' %}mars{% when '04' %}avr.{% when '05' %}mai{% when '06' %}juin{% when '07' %}juil.{% when '08' %}août{% when '09' %}sept.{% when '10' %}oct.{% when '11' %}nov.{% when '12' %}déc.{% endcase %}{%- endcapture -%}
<div class="kalyani-az-hero" style="--bg-color: {{ bg_color }}; --accent-green: {{ accent_green }}; --text-dark: {{ text_dark }}; --title-color: {{ title_color }};">
<div class="kalyani-az-image">
<img src="{{ image_url }}" alt="{{ product_title }}" loading="lazy" width="600" height="600">
</div>
<div class="kalyani-az-content">
<h1 class="kalyani-az-title">{{ product_title }}</h1>
<p class="kalyani-az-desc">{{ product_desc }}</p>
{%- comment -%} --- FORMULAIRE AJAX SHOPIFY --- {%- endcomment -%}
{% form 'product', product, class: 'kalyani-az-form' %}
{%- comment -%} Sélecteur de variante caché (prend la première disponible) {%- endcomment -%}
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
{%- comment -%} Quantité fixée à 1 {%- endcomment -%}
<input type="hidden" name="quantity" value="1">
<div class="kalyani-az-action-row">
{%- comment -%} Bouton Submit (Interactif) {%- endcomment -%}
<button type="submit" name="add" class="kalyani-az-btn"
{% unless product.available %}disabled{% endunless %}>
<span class="btn-text">
{% if product.available %}
{{ btn_label }}
{% else %}
Rupture de stock
{% endif %}
</span>
</button>
<div class="kalyani-az-timeline">
<div class="kalyani-tl-step">
<div class="kalyani-tl-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
</div>
<div class="kalyani-tl-date">{{ date_now | date: "%d" }} {{ m_now }}</div>
<div class="kalyani-tl-label">Commande passée</div>
</div>
<div class="kalyani-tl-line"></div>
<div class="kalyani-tl-step">
<div class="kalyani-tl-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle></svg>
</div>
<div class="kalyani-tl-date">{{ date_exp | date: "%d" }} {{ m_exp }}</div>
<div class="kalyani-tl-label">Commande expédiée</div>
</div>
<div class="kalyani-tl-line"></div>
<div class="kalyani-tl-step">
<div class="kalyani-tl-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline></svg>
</div>
<div class="kalyani-tl-date">{{ date_liv | date: "%d" }} {{ m_liv }}</div>
<div class="kalyani-tl-label"><strong>Livré !</strong></div>
</div>
</div>
</div>
{% endform %}
</div>
</div>
<style>
.kalyani-az-hero {
display: flex;
flex-wrap: wrap;
background-color: var(--bg-color);
border-radius: 8px;
overflow: hidden;
margin: 20px 0;
font-family: inherit;
width: 100%;
}
.kalyani-az-image {
flex: 1 1 45%;
min-width: 300px;
}
.kalyani-az-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
min-height: 100%;
}
.kalyani-az-content {
flex: 1 1 50%;
padding: 60px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Pour le formulaire Shopify généré */
.kalyani-az-form {
margin: 0;
padding: 0;
width: 100%;
}
.kalyani-az-title {
color: var(--title-color) !important;
font-size: 24px;
margin: 0 0 15px 0;
font-weight: 400;
line-height: 1.3;
width: 100%;
text-align: left;
}
.kalyani-az-desc {
color: var(--text-dark) !important;
font-size: 14px;
line-height: 1.6;
margin: 0 0 35px 0;
width: 100%;
text-align: left;
}
.kalyani-az-action-row {
display: flex;
flex-direction: column;
align-items: center;
gap: 35px;
width: 100%;
margin: 0 auto;
}
.kalyani-az-btn {
background-color: transparent !important;
color: var(--accent-green) !important;
border: 2px solid var(--accent-green) !important;
padding: 14px 45px;
border-radius: 6px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
width: fit-content;
display: inline-flex;
align-items: center;
justify-content: center;
}
.kalyani-az-btn:hover {
background-color: var(--accent-green) !important;
color: #ffffff !important;
}
.kalyani-az-btn[disabled] {
opacity: 0.5;
cursor: not-allowed;
border-color: #ccc !important;
color: #888 !important;
}
.kalyani-az-timeline {
display: flex;
align-items: flex-start;
justify-content: center;
width: 100%;
max-width: 400px;
}
.kalyani-tl-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 1;
}
.kalyani-tl-icon {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: transparent !important;
border: 1px solid var(--accent-green);
color: var(--accent-green) !important;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
}
.kalyani-tl-icon svg {
width: 14px;
height: 14px;
}
.kalyani-tl-line {
height: 1px;
background-color: var(--accent-green);
width: 40px;
margin-top: 15px;
opacity: 0.4;
}
.kalyani-tl-date {
font-size: 11px;
font-weight: 700;
color: var(--text-dark) !important;
margin-bottom: 2px;
}
.kalyani-tl-label {
font-size: 11px;
color: var(--text-dark) !important;
line-height: 1.2;
}
@media screen and (max-width: 768px) {
.kalyani-az-hero {
flex-direction: column;
}
.kalyani-az-image {
width: 100%;
height: 300px;
}
.kalyani-az-content {
padding: 30px 20px;
}
.kalyani-az-title {
font-size: 22px;
}
.kalyani-az-btn {
width: 100%;
text-align: center;
}
.kalyani-tl-line {
width: 25px;
}
}
</style>