/* Boutons CTA enrichis.

   La carte est construite au rendu par inc/cta-buttons.php autour du lien saisi
   dans l'éditeur : badges de réassurance à gauche, note et mention à droite, le
   bouton lui-même occupant toute la largeur sous les badges.

   Le lien garde ses classes d'origine (.btn-quotation, .btn-simulator,
   .btn-phonebook, .btn-contact) : la mise en forme du bouton reste celle de
   style.css, seule sa présentation dans la carte est reprise ici. Les couleurs
   sont celles de la charte, déclinées par type via les variables --cta-*. */

.cta-card,
.shared_content .cta-card {
    display: flex;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
    margin: 0 0 2rem;
    padding: 16px;
    border: 2px solid var(--cta-color);
    border-radius: 16px;
    background: #fff;
}

/* Couleurs de charte, une declinaison par type. Les selecteurs sont redoubles
   (.cta-card.cta-card--x) pour rester au-dessus de la regle generique ci-dessus,
   elle-meme montee en specificite face a style.css. */
.cta-card.cta-card--quotation {
    --cta-color: #619e2b;
    --cta-color-dark: #2b6b00;
    --cta-badge-bg: #f2f8ec;
}

.cta-card.cta-card--phonebook {
    --cta-color: #e99320;
    --cta-color-dark: #cd7704;
    --cta-badge-bg: #fdf4e9;
}

.cta-card.cta-card--simulator {
    --cta-color: #287bbf;
    --cta-color-dark: #155182;
    --cta-badge-bg: #eef5fc;
}

.cta-card.cta-card--contact {
    --cta-color: #0b2557;
    --cta-color-dark: #06183a;
    --cta-badge-bg: #eef1f7;
}

/* Colonne principale : badges puis bouton. */
.cta-card__body {
    flex: 1 1 auto;
    /* Sans largeur minimale nulle, un libellé long empêcherait la colonne de se
       contracter et déborderait de la carte. */
    min-width: 0;
}

/* .shared_content ul (style.css) impose un retrait de 2rem et une marge basse
   aux listes du contenu, et .shared_content ul li un padding-bottom. Cette
   feuille etant chargee avant style.css, les selecteurs sont redoublés pour
   reprendre la main sans !important. */
.cta-card .cta-card__badges,
.shared_content .cta-card__badges {
    display: flex;
    /* Les 3 badges tiennent sur une seule ligne : ils se partagent la largeur et
       se compriment plutôt que de passer à la ligne. */
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.cta-card .cta-card__badge,
.shared_content .cta-card__badge {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Chaque badge se contracte pour tenir sur la ligne ; min-width:0 autorise
       la contraction sous la largeur de son texte. */
    flex: 0 1 auto;
    min-width: 0;
    justify-content: center;
    margin: 0;
    padding: 5px 10px;
    border: 1px solid var(--cta-color);
    border-radius: 8px;
    background: var(--cta-badge-bg);
    color: #1a1a1a;
    font-size: 0.8125em;
    font-weight: 500;
    line-height: 1.2;
    list-style: none;
}

/* Pastille cochée, dessinée en CSS : un rond plein de la couleur du bouton
   portant une coche blanche tracée avec deux bords. */
.cta-card .cta-card__badge:before,
.shared_content .cta-card__badge:before {
    content: "";
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--cta-color);
    /* La coche est un SVG en fond plutôt qu'un pseudo-élément supplémentaire :
       les puces de liste n'acceptent qu'un ::before et un ::after, ce dernier
       restant libre pour d'autres usages. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 68%;
}

/* Le bouton occupe toute la largeur de la carte : le plafond de 500 px hérité
   de style.css l'y laisserait trop étroit. */
.cta-card .btn-quotation,
.cta-card .btn-phonebook,
.cta-card .btn-simulator,
.cta-card .btn-contact,
.shared_content .cta-card .btn-quotation,
.shared_content .cta-card .btn-phonebook,
.shared_content .cta-card .btn-simulator,
.shared_content .cta-card .btn-contact {
    display: block;
    /* .shared_content a souligne et recolore les liens du contenu. */
    color: #fff;
    text-decoration: none;
    /* style.css impose width:100% + max-width:500px au bouton hors carte. Dans
       la carte, la largeur est celle de la colonne : la largeur fixe pousserait
       la colonne de réassurance hors du cadre. */
    width: auto;
    max-width: none;
    margin: 0;
    padding: 10px 40px;
    border-radius: 10px;
    /* Taille du texte courant du site (body vaut 1em a chaque palier de
       css/typography.css) : le bouton suit donc la typo des pages, en gras. */
    font-size: 1em;
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
}

/* Le picto de gauche des boutons de contenu (enveloppe, loupe...) n'a plus lieu
   d'être : la carte porte déjà ses propres repères visuels, et le libellé est
   centré. */
.cta-card .btn-quotation:before,
.cta-card .btn-phonebook:before,
.cta-card .btn-simulator:before,
.cta-card .btn-contact:before {
    content: none;
}

/* Chevron de droite, marque commune aux 4 boutons du visuel. */
.cta-card .btn-quotation:after,
.cta-card .btn-phonebook:after,
.cta-card .btn-simulator:after,
.cta-card .btn-contact:after {
    content: "";
    position: absolute;
    top: calc(50% - 9px);
    right: 14px;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100%;
}

/* Colonne de réassurance : note en étoiles puis mention. Sa largeur est fixée,
   sans quoi la colonne principale l'écraserait et la mention serait rognée. */
.cta-card__aside {
    flex: 0 0 165px;
    text-align: center;
    color: #1a1a1a;
    font-size: 0.875em;
    line-height: 1.3;
}

.cta-card__stars {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-bottom: 8px;
}

.cta-card__star {
    width: 20px;
    height: 20px;
    /* L'étoile est découpée dans un aplat : la couleur vient du fond, la forme
       du masque. Une seule règle sert donc aux trois états, seul le fond change
       — et la demi-étoile devient un simple dégradé à arête franche. */
    background-color: var(--cta-color);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
    -webkit-mask-size: 100%;
    mask-size: 100%;
}

.cta-card__star--empty {
    background-color: #c9ccd1;
}

/* Etoile partielle : le taux de remplissage vient de PHP (--cta-star-fill), si
   bien qu'une note de 4,9 remplit la derniere etoile a 90 % et non a moitie. */
.cta-card__star--partial {
    background-color: transparent;
    background-image: linear-gradient(
        to right,
        var(--cta-color) 0 var(--cta-star-fill, 50%),
        #c9ccd1 var(--cta-star-fill, 50%) 100%
    );
}

.cta-card__mention {
    display: block;
}

/* Chaque ligne de la mention est un fragment : en mode large elles s'empilent
   comme saisi dans les reglages. */
.cta-card__mention-line {
    display: block;
}

/* Les masques CSS restent indispensables aux étoiles ; là où ils manquent
   (anciens navigateurs), l'aplat carré serait illisible : la note disparaît et
   la mention seule tient la colonne. */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
    .cta-card__stars {
        display: none;
    }
}

/* ------------ Adaptation a la largeur DISPONIBLE

   La carte est posee aussi bien en pleine largeur que dans une colonne etroite
   (contenu avec sommaire et sidebar). Une media query, qui mesure l'ecran,
   laisserait la version large s'afficher dans une colonne de 570 px sur un
   grand ecran : les badges s'y comprimeraient sur 3 lignes et la note resterait
   collee au bouton. Les paliers portent donc sur le CONTENEUR.

   Les navigateurs sans @container gardent la version large : le repli en media
   queries plus bas couvre au moins les petits ecrans. */

/* Le conteneur de reference est l'ENVELOPPE de la carte, pas la carte : un
   element ne peut pas interroger sa propre taille. PHP emet donc un
   .cta-card-wrap autour de chaque carte, dont la largeur est celle de la
   colonne qui l'accueille. */
.cta-card-wrap,
.shared_content .cta-card-wrap {
    container-type: inline-size;
    container-name: cta-card;
    /* L'enveloppe ne doit rien changer au flux : la carte porte ses marges. */
    display: block;
}

/* Sous 720 px de large, la colonne de reassurance ne tient plus a cote du
   bouton : la carte s'empile — badges, bouton, puis note et mention centrees. */
@container cta-card (max-width: 720px) {
    .cta-card,
    .shared_content .cta-card {
        flex-direction: column;
        /* stretch etirerait chaque badge sur toute la largeur de la carte. */
        align-items: center;
        gap: 10px;
    }

    /* La colonne principale garde la pleine largeur : c'est le bouton qui doit
       s'etendre, pas les badges. */
    .cta-card__body {
        align-self: stretch;
    }

    .cta-card .cta-card__badges,
    .shared_content .cta-card__badges {
        /* Les 3 badges restent sur une seule ligne : leur taille est reduite
           plus bas pour qu'ils y tiennent sans se comprimer sur 2 lignes. */
        flex-wrap: nowrap;
        justify-content: center;
        gap: 5px;
    }

    /* Carte empilee : la note passe sous le bouton, ou la hauteur coute cher.
       Etoiles et mention s'y placent cote a cote plutot que l'une sous l'autre,
       et la mention se deplie sur une seule ligne — deux lignes de moins. */
    .cta-card__aside {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px 10px;
    }

    .cta-card__stars {
        margin-bottom: 0;
    }

    .cta-card__mention-line {
        display: inline;
    }

    .cta-card__mention-line + .cta-card__mention-line:before {
        content: " ";
    }
}

@container cta-card (max-width: 480px) {
    .cta-card,
    .shared_content .cta-card {
        padding: 12px;
    }

    /* Bande 430-480 px : les 3 badges y tiennent encore sur une ligne, mais de
       justesse — la police descend et les marges se resserrent pour que le plus
       long (« Pros selectionnes et verifies ») ne se coupe pas. En dessous de
       430 px, il n'y a plus rien a gagner par la compression : le palier suivant
       passe a 2 badges. */
    .cta-card .cta-card__badge,
    .shared_content .cta-card__badge {
        padding: 4px 6px;
        font-size: 0.6875em;
        gap: 4px;
        /* Le libelle tient sur une seule ligne dans sa pastille ; flex-shrink
           reste autorise, sans quoi les badges deborderaient du cadre. */
        white-space: nowrap;
        flex-shrink: 1;
    }

    .cta-card .cta-card__badge:before,
    .shared_content .cta-card__badge:before {
        width: 13px;
        height: 13px;
    }

    /* Le chevron occupe la droite du bouton : seul ce cote reserve de la place,
       pour ne pas etrangler un libelle long dans une colonne etroite. */
    .cta-card .btn-quotation,
    .cta-card .btn-phonebook,
    .cta-card .btn-simulator,
    .cta-card .btn-contact,
    .shared_content .cta-card .btn-quotation,
    .shared_content .cta-card .btn-phonebook,
    .shared_content .cta-card .btn-simulator,
    .shared_content .cta-card .btn-contact {
        padding: 11px 30px 11px 14px;
        /* Repartit un libelle long de facon equilibree entre les lignes plutot
           que de laisser un mot seul sur la derniere. */
        text-wrap: balance;
    }

    .cta-card .btn-quotation:after,
    .cta-card .btn-phonebook:after,
    .cta-card .btn-simulator:after,
    .cta-card .btn-contact:after {
        top: calc(50% - 8px);
        right: 10px;
        width: 16px;
        height: 16px;
    }

    .cta-card__star {
        width: 18px;
        height: 18px;
    }

    /* La mise a plat de la mention et sa mise cote a cote avec les etoiles sont
       posees au palier 720 px : rien a reprendre ici, seule la taille change. */

    .cta-card__aside {
        font-size: 0.8125em;
    }
}

/* En dessous de 430 px, les 3 badges ne tiennent plus sur une ligne : le seul
   texte des libelles fait deja ~300 px a 11 px, auxquels s'ajoutent bordure,
   padding et pastille cochee (~31 px par badge, soit 400 px au total pour une
   colonne qui n'en offre que ~290 a 360). Reduire la police ne suffit pas :
   meme a 9 px, illisible, il manquerait encore une trentaine de pixels.

   Plutot que deux lignes ou trois libelles tronques, on n'en affiche que deux :
   le badge du milieu est masque et les deux autres tiennent au large. Le choix
   porte sur le 2e de la liste, considere comme le moins determinant des trois —
   l'ordre des badges se regle dans Reglages > Boutons CTA. Les 3 restent
   affiches des que la colonne depasse 430 px (tablette, desktop, impression). */
@container cta-card (max-width: 430px) {
    .cta-card .cta-card__badge:nth-child(2),
    .shared_content .cta-card__badge:nth-child(2) {
        display: none;
    }

    /* Deux badges seulement : la place ne manque plus, les marges peuvent se
       desserrer un peu. La police reste celle du palier (0.6875em) et
       flex-shrink reste autorise : sur un ecran de 320 px la colonne ne fait
       que ~290 px, tout juste de quoi loger les deux libelles. */
    .cta-card .cta-card__badge,
    .shared_content .cta-card__badge {
        padding: 5px 8px;
    }
}

/* Repli pour les navigateurs sans @container : la bascule se fait alors sur la
   taille de l'ecran, ce qui couvre le mobile — le cas de la colonne etroite sur
   grand ecran leur reste inaccessible. */
@supports not (container-type: inline-size) {
    @media (max-width: 900px) {
        .cta-card,
        .shared_content .cta-card {
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        .cta-card__body {
            align-self: stretch;
        }

        .cta-card .cta-card__badges,
        .shared_content .cta-card__badges {
            flex-wrap: wrap;
            justify-content: center;
            gap: 6px;
        }

        /* Comme au palier conteneur : etoiles et mention cote a cote, sur une
           seule ligne, pour ne pas allonger la carte empilee. */
        .cta-card__aside {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 4px 10px;
        }

        .cta-card__stars {
            margin-bottom: 0;
        }

        .cta-card__mention-line {
            display: inline;
        }

        .cta-card__mention-line + .cta-card__mention-line:before {
            content: " ";
        }
    }

    @media (max-width: 600px) {
        .cta-card,
        .shared_content .cta-card {
            padding: 12px;
        }

        .cta-card .cta-card__badge,
        .shared_content .cta-card__badge {
            padding: 4px 8px;
            font-size: 0.75em;
        }

        .cta-card .btn-quotation,
        .cta-card .btn-phonebook,
        .cta-card .btn-simulator,
        .cta-card .btn-contact {
            padding: 11px 30px 11px 14px;
            text-wrap: balance;
        }

        .cta-card__star {
            width: 18px;
            height: 18px;
        }
    }

    /* Meme arbitrage qu'au palier conteneur 430 px : a cette largeur les 3
       badges ne tiennent pas sur une ligne, on n'en garde que deux. */
    @media (max-width: 430px) {
        .cta-card .cta-card__badge:nth-child(2),
        .shared_content .cta-card__badge:nth-child(2) {
            display: none;
        }
    }
}

/* ------------ Apercu dans l'editeur (TinyMCE)

   Dans l'editeur, le bouton est un lien seul : la carte est ajoutee au rendu,
   badges et etoiles n'existent donc pas dans le contenu et ne peuvent pas y
   etre montres. Ces regles alignent au moins le bouton sur son apparence
   finale — taille compacte, typo du site en gras, chevron, sans picto — pour
   que le redacteur ne travaille pas sur un aperçu trompeur.

   Elles sont limitees a body#tinymce : le front n'est pas concerne. */

body#tinymce .btn-quotation,
body#tinymce .btn-phonebook,
body#tinymce .btn-simulator,
body#tinymce .btn-contact {
    display: block;
    box-sizing: border-box;
    width: auto;
    max-width: none;
    margin: 0 0 2rem;
    padding: 10px 40px;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
}

/* Le picto de gauche laisse la place au libelle centre, comme sur le front. */
body#tinymce .btn-quotation:before,
body#tinymce .btn-phonebook:before,
body#tinymce .btn-simulator:before,
body#tinymce .btn-contact:before {
    content: none;
}

body#tinymce .btn-quotation:after,
body#tinymce .btn-phonebook:after,
body#tinymce .btn-simulator:after,
body#tinymce .btn-contact:after {
    content: "";
    position: absolute;
    top: calc(50% - 9px);
    right: 14px;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100%;
}