/**
 * Domaine de la Vape — identite reprise du site actuel (thème Woodmart).
 *
 * A poser dans le THEME ENFANT uniquement (themes/akira-child-theme/assets/css/).
 * Le theme parent n'est jamais modifie.
 *
 * Couleurs relevees sur https://www.domaine-delavape.com/ :
 *   --wd-primary-color      rgb(137,0,0)   #890000  rouge, couleur principale
 *   --wd-alternative-color  rgb(134,80,33) #865021  brun, couleur secondaire
 *   fond du pied de page    rgb(137,0,0)   (.wd-footer)
 *
 * IMPORTANT — pourquoi les selecteurs commencent par `.elementor-3` et non `footer` :
 * la page contient DEUX balises <footer>. La premiere, `footer.page-footer`, est celle
 * de PrestaShop et elle est VIDE. Le pied de page reellement affiche est construit par
 * AxonCreator dans un `div.elementor.elementor-3` (3 = identifiant de la page « Footer 1 »),
 * hors de toute balise <footer>. Tout selecteur prefixe par `footer` reste donc sans effet.
 */

:root {
    /* Les couleurs sont definies une seule fois, dans grille.css. On ne les redeclare
       pas ici : on s'y raccorde. Une valeur ecrite a deux endroits finit toujours par
       diverger — c'est le principe de source unique du document de reference. */
    --ddlv-rouge: var(--accent);
    --ddlv-rouge-clair: #a81010;
    --ddlv-brun: #865021;          /* couleur secondaire, propre a cette feuille */
    --ddlv-titre: var(--ink);
}

/* ---------- Typographie ----------
   AxonCreator ecrit dans le <head> de chaque page :
     .elementor-widget-heading .elementor-heading-title{
         font-family:"Roboto",Sans-serif; font-weight:600; color:#6ec1e4; }
   Cette regle inline impose Roboto et un bleu de demonstration a TOUS les titres. */
.elementor-widget-heading .elementor-heading-title,
.elementor-heading-title {
    font-family: 'Playfair Display', Georgia, serif !important;
}
.linklist-toggle,
.linklist-wrapper .linklist-toggle .title-text {
    font-family: 'Playfair Display', Georgia, serif;
}
body,
.elementor-widget-text-editor,
.elementor-icon-box-description {
    font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Pied de page (.elementor-3) : lisibilite sur le fond rouge ----------
   Le theme y pose des bleus de demonstration : #6ec1e4 sur les titres, #347bf0 sur
   le numero de telephone et le bouton d'inscription. Illisibles sur du rouge, et
   etrangers a la charte. */
.elementor-3 .elementor-heading-title,
.elementor-3 .elementor-text-editor,
.elementor-3 .elementor-widget-text-editor,
.elementor-3 p,
.elementor-3 .linklist-toggle,
.elementor-3 .linklist-toggle .title-text,
.elementor-3 .linklist-wrapper a,
.elementor-3 a {
    color: #fff !important;
}
.elementor-3 a:hover,
.elementor-3 .linklist-wrapper a:hover {
    color: #f2d6d6 !important;
}

/* Le numero de telephone ne doit jamais etre coupe en deux lignes */
.elementor-3 .elementor-heading-title,
.elementor-3 a[href^="tel:"] {
    white-space: nowrap;
}

/* Le bandeau de reassurance precede le pied de page rouge : il reste sur fond clair,
   son texte doit donc rester sombre. */
.elementor-3 .elementor-widget-icon-box .elementor-icon-box-title,
.elementor-3 .elementor-widget-icon-box .elementor-icon-box-title span,
.elementor-3 .elementor-widget-icon-box .elementor-icon-box-description {
    color: var(--ddlv-titre) !important;
}

/* Bouton « S'abonner » : le brun de la charte, lisible sur le rouge */
.elementor-3 button,
.elementor-3 input[type="submit"],
.elementor-3 .elementor-button,
.elementor-3 form button[type="submit"] {
    background-color: var(--ddlv-brun) !important;
    border-color: var(--ddlv-brun) !important;
    color: #fff !important;
}
.elementor-3 button:hover,
.elementor-3 form button[type="submit"]:hover {
    background-color: #6f4119 !important;
    border-color: #6f4119 !important;
}

/* Le champ de saisie garde un texte sombre sur son fond blanc */
.elementor-3 input[type="text"],
.elementor-3 input[type="email"] {
    color: #333 !important;
}

/* Quatre colonnes de largeur egale */
@media (min-width: 992px) {
    .elementor-3 .elementor-container > .elementor-row > .elementor-column.elementor-col-25 {
        width: 25%;
    }
}

/* Le logo blanc garde une largeur confortable dans sa colonne */
.elementor-3 .elementor-widget-image img {
    max-width: 240px;
    height: auto;
}

/* ---------- Couleur principale : le rouge du site ---------- */
.btn-primary,
.badge-primary,
.product-flag.new,
.product-flag.on-sale {
    background-color: var(--ddlv-rouge);
    border-color: var(--ddlv-rouge);
}
.btn-primary:hover {
    background-color: var(--ddlv-rouge-clair);
    border-color: var(--ddlv-rouge-clair);
}

/* Le numero de telephone touchait le paragraphe de presentation : on l'aere,
   et on separe les deux intitules « Une question ? » / « Moyens de paiement »
   qui se retrouvaient colles sur la meme ligne. */
.elementor-3 .elementor-widget-heading {
    margin-bottom: 10px;
}
.elementor-3 .elementor-widget-text-editor {
    margin-top: 14px;
    line-height: 1.65;
}
.elementor-3 .elementor-widget-image {
    margin-top: 6px;
}

/* ---------- Le bleu de demonstration du kit AxonCreator ----------
   Le kit livre avec le theme pose #6ec1e4 (bleu ciel) comme couleur d'accent sur
   les icones, les titres d'encadre, les onglets, les accordeons, les listes et les
   traits de separation ; et #347bf0 sur les boutons. Aucun des deux n'appartient a
   la charte. On les remplace par le rouge du site. */

/* Traits de separation */
.elementor-divider {
    --divider-border-color: var(--accent);
}
.elementor-divider-separator {
    border-color: var(--ddlv-rouge) !important;
}

/* Icones */
.elementor-widget-icon.elementor-view-stacked .elementor-icon,
.elementor-widget-icon-box.elementor-view-stacked .elementor-icon {
    background-color: var(--ddlv-rouge);
}
.elementor-widget-icon.elementor-view-default .elementor-icon,
.elementor-widget-icon.elementor-view-framed .elementor-icon,
.elementor-widget-icon-box.elementor-view-default .elementor-icon,
.elementor-widget-icon-box.elementor-view-framed .elementor-icon,
.elementor-widget-icon-list .elementor-icon-list-icon i {
    color: var(--ddlv-rouge);
    border-color: var(--ddlv-rouge);
}
.elementor-widget-icon.elementor-view-default .elementor-icon svg,
.elementor-widget-icon-box.elementor-view-default .elementor-icon svg,
.elementor-widget-icon-list .elementor-icon-list-icon svg {
    fill: var(--ddlv-rouge);
}

/* Titres d'encadres, onglets, accordeons, compteurs */
.elementor-widget-image-box .elementor-image-box-content .elementor-image-box-title,
.elementor-widget-icon-box .elementor-icon-box-content .elementor-icon-box-title,
.elementor-widget-counter .elementor-counter-number-wrapper,
.elementor-widget-progress .elementor-title,
.elementor-widget-tabs .elementor-tab-title,
.elementor-widget-tabs .elementor-tab-title a,
.elementor-widget-accordion .elementor-accordion-title,
.elementor-widget-toggle .elementor-toggle-title {
    color: var(--ddlv-titre);
}
.elementor-widget-progress .elementor-progress-wrapper .elementor-progress-bar,
.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap {
    background-color: var(--ddlv-rouge);
}

/* Dans le pied de page rouge, les icones et titres d'encadre restent sur fond clair */
.elementor-3 .elementor-widget-icon-box.elementor-view-default .elementor-icon,
.elementor-3 .elementor-widget-icon-box .elementor-icon svg {
    color: var(--ddlv-titre);
    fill: var(--ddlv-titre);
}

/* ---------- Logo ----------
   Le fichier fait 1192x445 (ratio 2,68). On borne sa largeur et on laisse la hauteur
   suivre, pour qu'il ne soit jamais deforme ni demesure. La regle heritee de
   sexy-plaisir ne s'appliquait qu'en dessous de 768 px. */
.elementor-widget-image img[src*="logo-ddlv"] {
    width: 240px;
    max-width: 100%;
    height: auto;
}
@media (max-width: 991px) {
    .elementor-widget-image img[src*="logo-ddlv"] {
        width: 180px;
    }
}
@media (max-width: 575px) {
    .elementor-widget-image img[src*="logo-ddlv"] {
        width: 150px;
    }
}
