/*
Theme Name:   Generatepress child
Description:  Thème enfant de GeneratePress — Cyclovolt
Author:       Moi
Template:     generatepress
Version:      1.0.0
*/

/*
 * CYCLOVOLT — Feuille de styles des fiches produit
 *
 * Organisation :
 *   A. Variables de design (modifiez ici en premier)
 *   B. Verdict (note, étoiles, CTA)
 *   C. Specs techniques
 *   D. Points forts / faibles
 *   E. Pour qui (texte + jauges)
 *   F. FAQ
 *   G. Avis final
 *   H. Éléments communs (titres de section, lien interne)
 *   I. Responsive
 */


/* ============================================================
   A. VARIABLES DE DESIGN
   Changez ces valeurs pour modifier l'apparence globale
   ============================================================ */

:root {
    --cv-vert          : #16de60;
    --cv-vert-fonce    : #0fb84f;
    --cv-vert-leger    : #edfbf3;
    --cv-texte         : #1c1c1c;
    --cv-texte-doux    : #58585e;
    --cv-bordure       : #e3e3e3;
    --cv-fond-gris     : #f6f6f5;
    --cv-rayon         : 8px;

    /* Polices — remplacez les noms pour changer la typo */
    --cv-police-titre  : 'Outfit', sans-serif;
    --cv-police-corps  : 'DM Sans', sans-serif;
}

/* Chargement des polices Google */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;1,9..40,400&display=swap');

/* Taille de police de base pour les fiches produit */
.woocommerce div.product {
    font-size: 18px;
    line-height: 1.65;
}

.woocommerce div.product p,
.woocommerce div.product li,
.woocommerce div.product .cv-avis-court,
.woocommerce div.product .cv-pour-qui-texte,
.woocommerce div.product .cv-avis-final-texte {
    font-size: 16px;
    line-height: 1.7;
}

.cv-description-complete {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Layout natif WooCommerce — image gauche, infos droite */
.woocommerce div.product div.images {
    width: 45% !important;
}

.woocommerce div.product div.summary {
    width: 52% !important;
}

/* Description complète en pleine largeur sous les deux colonnes */
.cv-description-complete {
    clear: both;
    max-width: 100%;
    padding: 24px 0 0;
}

/* Corriger la bordure verte qui s'étire */
.cv-avis-court {
    align-self: flex-start;
}

/* Responsive — mobile : tout en colonne */
@media (max-width: 768px) {
    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        width: 100% !important;
        float: none !important;
    }
}


/* ============================================================
   B. VERDICT — Note, étoiles, avis court, bouton CTA
   ============================================================ */

.cv-verdict {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Badge de catégorie */
.cv-categorie-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--cv-vert-fonce);
    background: var(--cv-vert-leger);
    padding: 3px 10px;
    border-radius: 4px;
}

/* Bloc note : chiffre à gauche, étoiles + détails à droite */
.cv-note-bloc {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--cv-fond-gris);
    padding: 14px 17px;
    border-radius: var(--cv-rayon);
}

.cv-note-chiffre {
    font-family: var(--cv-police-titre);
    font-size: 38px;
    font-weight: 700;
    color: var(--cv-texte);
    line-height: 1;
    letter-spacing: -1px;
    flex-shrink: 0;
}

.cv-note-chiffre small {
    font-size: 16px;
    font-weight: 400;
    color: var(--cv-texte-doux);
}

/* Étoiles */
.cv-etoiles {
    display: flex;
    gap: 3px;
    margin-bottom: 7px;
}

.cv-etoile {
    width: 16px;
    height: 16px;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    background: var(--cv-vert);
    flex-shrink: 0;
}

.cv-etoile--vide {
    background: #ddd;
}

.cv-etoile--demi {
    background: linear-gradient( 90deg, var(--cv-vert) 50%, #ddd 50% );
}

/* Sous-critères (confort, autonomie...) */
.cv-note-details {
    font-size: 12px;
    color: var(--cv-texte-doux);
    line-height: 1.6;
}

.cv-note-details strong {
    font-weight: 500;
    color: var(--cv-texte);
}

/* Avis court en italique avec bordure verte */
.cv-avis-court {
    font-size: 16px;
    line-height: 1.7;
    color: var(--cv-texte-doux);
    border-left: 3px solid var(--cv-vert);
    padding-left: 14px;
    font-style: italic;
    margin: 0;
}

/* Zone CTA */
.cv-cta-zone {
    padding-top: 6px;
    border-top: 1px solid var(--cv-bordure);
}

.cv-bouton-cta {
    display: block;
    text-align: center;
    background: var(--cv-vert);
    color: #082e16;
    font-family: var(--cv-police-titre);
    font-size: 15px;
    font-weight: 600;
    padding: 13px 22px;
    border-radius: var(--cv-rayon);
    text-decoration: none;
    transition: background 0.15s ease, transform 0.1s ease;
}

.cv-bouton-cta:hover {
    background: var(--cv-vert-fonce);
    transform: translateY(-1px);
    color: #082e16;
    text-decoration: none;
}


/* ============================================================
   C. SPECS TECHNIQUES
   ============================================================ */

.cv-specs {
    background: #fff;
    border: 1px solid var(--cv-bordure);
    border-radius: var(--cv-rayon);
    padding: 26px 30px;
    margin-top: 22px;
}

.cv-specs-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
}

.cv-spec-item {
    background: var(--cv-fond-gris);
    border-radius: var(--cv-rayon);
    padding: 13px 15px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.cv-spec-icone {
    font-size: 19px;
    flex-shrink: 0;
    margin-top: 1px;
}

.cv-spec-texte {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cv-spec-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cv-texte-doux);
    font-weight: 500;
}

.cv-spec-valeur {
    font-family: var(--cv-police-titre);
    font-size: 13px;
    font-weight: 600;
    color: var(--cv-texte);
    line-height: 1.3;
}


/* ============================================================
   D. POINTS FORTS / FAIBLES
   ============================================================ */

.cv-points {
    background: #fff;
    border: 1px solid var(--cv-bordure);
    border-radius: var(--cv-rayon);
    padding: 26px 30px;
    margin-top: 22px;
}

.cv-points-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
}

.cv-points-titre {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 11px;
}

.cv-points-titre--forts  { color: var(--cv-vert-fonce); }
.cv-points-titre--faibles { color: #c0392b; }

/* Les listes viennent du HTML généré par Claude */
.cv-points-liste--forts ul,
.cv-points-liste--faibles ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cv-points-liste--forts li,
.cv-points-liste--faibles li {
    font-size: 13px;
    line-height: 1.55;
    color: var(--cv-texte-doux);
    padding-left: 0;
}


/* ============================================================
   E. POUR QUI (texte + jauges)
   ============================================================ */

.cv-pour-qui {
    background: #fff;
    border: 1px solid var(--cv-bordure);
    border-radius: var(--cv-rayon);
    padding: 26px 30px;
    margin-top: 22px;
}

.cv-pour-qui-texte {
    font-size: 16px;
    line-height: 1.75;
    color: var(--cv-texte-doux);
    margin-bottom: 19px;
}

.cv-jauges {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.cv-jauge-ligne {
    display: grid;
    grid-template-columns: 130px 1fr 34px;
    align-items: center;
    gap: 13px;
}

.cv-jauge-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--cv-texte);
}

.cv-jauge-piste {
    height: 5px;
    background: #e5e5e5;
    border-radius: 3px;
    overflow: hidden;
}

.cv-jauge-remplissage {
    height: 100%;
    background: var(--cv-vert);
    border-radius: 3px;
}

.cv-jauge-score {
    font-family: var(--cv-police-titre);
    font-size: 12px;
    font-weight: 600;
    color: var(--cv-texte-doux);
    text-align: right;
}


/* ============================================================
   F. FAQ
   ============================================================ */

.cv-faq {
    background: #fff;
    border: 1px solid var(--cv-bordure);
    border-radius: var(--cv-rayon);
    padding: 26px 30px;
    margin-top: 22px;
}

/* Les h3 et p viennent du HTML généré */
.cv-faq-contenu h3 {
    font-family: var(--cv-police-titre);
    font-size: 14px;
    font-weight: 600;
    color: var(--cv-texte);
    padding: 15px 0 6px;
    border-top: 1px solid var(--cv-bordure);
    margin: 0;
}

.cv-faq-contenu h3:first-child {
    border-top: none;
    padding-top: 0;
}

.cv-faq-contenu p {
    font-size: 13px;
    line-height: 1.65;
    color: var(--cv-texte-doux);
    margin: 0 0 4px;
}


/* ============================================================
   G. AVIS FINAL
   ============================================================ */

.cv-avis-final {
    background: #fff;
    border: 1px solid var(--cv-bordure);
    border-radius: var(--cv-rayon);
    padding: 26px 30px;
    margin-top: 22px;
}

.cv-avis-final-texte {
    font-size: 16px;
    line-height: 1.8;
    color: var(--cv-texte-doux);
}

.cv-avis-final-texte strong {
    color: var(--cv-texte);
}

.cv-avis-final-texte p {
    margin: 0;
}


/* ============================================================
   H. ÉLÉMENTS COMMUNS
   ============================================================ */

/* Titre de chaque section */
.cv-titre-section {
    font-family: var(--cv-police-titre);
    font-size: 16px;
    font-weight: 600;
    color: var(--cv-texte);
    margin-bottom: 18px;
    padding-bottom: 11px;
    border-bottom: 2px solid var(--cv-vert);
    display: inline-block;
}

/* Lien de maillage interne */
.cv-lien-interne {
    color: var(--cv-vert-fonce);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cv-lien-interne:hover {
    color: var(--cv-vert);
}


/* ============================================================
   I. RESPONSIVE
   ============================================================ */

/* Tablette — ≤ 768px */
@media ( max-width: 768px ) {

    .cv-specs-grille {
        grid-template-columns: 1fr 1fr;
    }

    .cv-points-grille {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .cv-specs,
    .cv-points,
    .cv-pour-qui,
    .cv-faq,
    .cv-avis-final {
        padding: 22px 20px;
    }

    .cv-jauge-ligne {
        grid-template-columns: 100px 1fr 30px;
    }
}

/* Mobile — ≤ 480px */
@media ( max-width: 480px ) {

    .cv-note-bloc {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .cv-note-chiffre {
        font-size: 30px;
    }

    .cv-specs-grille {
        grid-template-columns: 1fr;
    }

    .cv-bouton-cta {
        width: 100%;
    }

    .cv-jauge-ligne {
        grid-template-columns: 88px 1fr 28px;
        gap: 8px;
    }

    .cv-jauge-label {
        font-size: 12px;
    }

    .cv-specs,
    .cv-points,
    .cv-pour-qui,
    .cv-faq,
    .cv-avis-final {
        padding: 18px 15px;
        margin-top: 15px;
    }
}