/* ==========================================================================
   Briques d'interface partagées
   --------------------------------------------------------------------------
   Sommaire
     1. Carte générique
     2. Carte service
     3. Pastille commune
     4. Badge de statut
     5. Accordéon
     6. Citation d'avis
     7. Emplacement photo
     8. Pastille de note Google
     9. Étapes numérotées
    10. Duo de CTA
    11. Frise de suivi

   ÉCART SYSTÉMATIQUE ASSUMÉ AVEC LES FILAIRES
   Les filaires composent le corps de texte à 13–14,5 px sur mobile. La règle
   d'accessibilité du projet impose 16 px minimum pour le corps des pages
   publiques ; elle prime. Sont donc remontés à 16 px sur mobile : questions de
   FAQ, citations d'avis, texte des étapes, titres de carte service.
   Restent aux tailles des filaires (ce ne sont pas des corps de texte) :
   micro-labels, méta, prix sur les cartes, auteurs d'avis, badges, légendes.
   Le desktop reprend exactement les valeurs des filaires.
   ========================================================================== */

/* ---- 1. Carte générique ---------------------------------------------- */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-11);
    padding: var(--sp-13);
}

/* ---- 2. Carte service -------------------------------------------------
   Mobile : ligne cliquable.  Desktop : carte en grille (5 colonnes).       */
.service-card {
    display: flex;
    align-items: center;
    gap: var(--sp-11);
    min-height: var(--tap-min);
    box-sizing: border-box;
    padding: var(--sp-13);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-10);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease;
}

.service-card:hover {
    border-color: var(--c-blue);
    color: inherit;
}

.service-card__icon {
    color: var(--c-blue);
}

.service-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.service-card__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--fs-body);
    line-height: 1.25;
    color: var(--c-heading);
}

.service-card__price {
    font-size: var(--fs-small);
    color: var(--c-meta);
}

.service-card__chevron {
    margin-left: auto;
    color: var(--c-chevron);
}

/* Deux libellés sont rendus : le long sert à la liste mobile, le court à la
   grille desktop où la colonne ne fait qu'un cinquième de la largeur. */
.service-card__title-short,
.service-card__price-short {
    display: none;
}

/* ---- 3. Pastille commune ---------------------------------------------- */
.commune-pill {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: var(--sp-6) var(--sp-13);
    background: var(--c-surface);
    border: 1px solid var(--c-border-pill);
    border-radius: var(--r-pill);
    color: var(--c-blue);
    font-size: var(--fs-meta);
    text-decoration: none;
    white-space: nowrap;
}

.commune-pill:hover {
    border-color: var(--c-blue);
    background: var(--c-blue-bg);
    color: var(--c-blue);
}

/* ---- 4. Badge de statut ------------------------------------------------ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-4);
    padding: 3px var(--sp-11);
    border-radius: var(--r-pill);
    font-size: var(--fs-label);
    line-height: 1.5;
    white-space: nowrap;
}

.badge--demande-recue { background: #f0f0f0; color: #555555; }
.badge--devis-envoye  { background: var(--c-green-bg); color: var(--c-green); }
.badge--devis-accepte { background: var(--c-green-bg); color: var(--c-green); }
.badge--planifiee     { background: var(--c-blue-bg);  color: var(--c-blue); }
.badge--realisee      { background: var(--c-blue-bg);  color: var(--c-blue); }
.badge--facturee      { background: #f0f0f0; color: #777777; }

/* ---- 5. Accordéon ------------------------------------------------------ */
.accordion__item {
    border-bottom: 1px solid var(--c-border);
}

/* Le <h3> ne sert qu'à placer la question dans le plan du document : il ne
   doit pas imposer sa typographie, c'est le bouton qui la porte. */
.accordion__heading {
    margin: 0;
    font: inherit;
    color: inherit;
}

.accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-13);
    width: 100%;
    min-height: var(--tap-min);
    padding: var(--sp-13) 0;
    box-sizing: border-box;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    color: var(--c-heading);
}

.accordion__trigger:hover {
    color: var(--c-blue);
}

.accordion__chevron {
    display: flex;
    flex: none;
    color: var(--c-orange);
}

.accordion__panel {
    padding-bottom: var(--sp-13);
}

.accordion__content {
    font-size: var(--fs-body);
    color: var(--c-body);
    max-width: 68ch; /* confort de lecture sur les longues réponses */
}

/* ---- 6. Citation d'avis ------------------------------------------------ */
.quote {
    margin: 0;
    padding-left: var(--sp-11);
    border-left: 2px solid var(--c-orange);
}

.quote__text {
    margin: 0;
    font-size: var(--fs-quote);
    line-height: 1.45;
    color: var(--c-body);
}

.quote__author {
    margin-top: var(--sp-6);
    font-size: var(--fs-label);
    color: var(--c-label);
}

/* ---- 7. Emplacement photo ----------------------------------------------
   Hachures en dégradé répété, comme sur les filaires : impossible de
   confondre avec une vraie image, et le rappel « à fournir » reste lisible.  */
.photo-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    block-size: var(--ph-h, 180px);
    aspect-ratio: var(--ph-ratio, auto);
    padding: var(--sp-11);
    border: 1.5px dashed #b5ad9c;
    border-radius: var(--ph-r, 12px);
    background: repeating-linear-gradient(
        45deg,
        #f3f1ec,
        #f3f1ec 10px,
        #e6e2d8 10px,
        #e6e2d8 20px
    );
    color: #8d8574;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}

.photo-ph__label {
    font-weight: 700;
    letter-spacing: 0.03em;
}

.photo-ph__caption {
    max-width: 30ch;
}

/* ---- 8. Pastille de note Google ---------------------------------------- */
.rating {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-6);
    color: var(--c-proof);
}

.rating--pill {
    padding: 5px var(--sp-11);
    border: 1px solid var(--c-border);
    border-radius: var(--r-pill);
    font-size: var(--fs-meta);
    background: var(--c-surface);
}

.rating__stars {
    display: inline-flex;
    gap: 1px;
    color: var(--c-orange);
}

.rating--pill .rating__score {
    font-weight: 700;
}

/* Variante « ligne » : la note en gros, en tête de la section Avis. */
.rating--line {
    gap: var(--sp-9);
    align-items: baseline;
}

.rating--line .rating__score {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    color: var(--c-heading);
}

.rating--line .rating__count {
    font-size: var(--fs-meta);
    color: var(--c-meta);
}

.rating--line .rating__stars {
    align-self: center;
}

/* ---- 9. Étapes numérotées ---------------------------------------------- *
 * Trois cartes plutôt que trois lignes de texte. Le passage sert à rassurer
 * quelqu'un qui hésite à appeler : une liste grise ne rassure personne.       */
.steps {
    display: flex;
    flex-direction: column;
    gap: var(--sp-11);
    /* Le filet orange des cartes affleure leur bord haut : sans cette marge,
       il vient toucher le libellé de section juste au-dessus. */
    margin: var(--sp-13) 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.steps__item {
    position: relative;
    padding: var(--sp-15);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-11);
}

/* Filet orange à gauche : il donne à la pile sa direction — on descend les
   étapes dans l'ordre. Discret, 3 px, il n'entre pas en concurrence avec les
   CTA. */
.steps__item::before {
    content: '';
    position: absolute;
    inset-block: var(--sp-15);
    inset-inline-start: 0;
    inline-size: 3px;
    background: var(--c-orange);
    border-start-end-radius: var(--r-pill);
    border-end-end-radius: var(--r-pill);
}

.steps__entete {
    display: flex;
    align-items: center;
    gap: var(--sp-9);
    margin-block-end: var(--sp-11);
}

/* L'icône porte la couleur de marque sur son fond pâle : c'est ce qui rend
   l'étape lisible avant même qu'on ait lu un mot. */
.steps__icone {
    display: grid;
    place-items: center;
    inline-size: 38px;
    block-size: 38px;
    flex: none;
    background: var(--c-blue-bg);
    border-radius: var(--r-10);
    color: var(--c-blue);
}

.steps__num {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 24px;
    block-size: 24px;
    flex: none;
    margin-inline-start: auto;
    border: 1.5px solid var(--c-blue);
    border-radius: 50%;
    color: var(--c-blue);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
}

.steps__text {
    margin: 0;
    font-size: var(--fs-body);
    color: var(--c-heading);
    line-height: 1.45;
}

.steps__detail {
    margin: var(--sp-6) 0 0;
    font-size: var(--fs-meta);
    color: var(--c-meta);
    line-height: 1.5;
}

/* Sans icône — étapes des pages service : le numéro reprend sa place à
   gauche, et la carte retrouve la mise en page d'origine. */
.steps__item:not(:has(.steps__icone)) .steps__entete {
    margin-block-end: var(--sp-9);
}

.steps__item:not(:has(.steps__icone)) .steps__num {
    margin-inline-start: 0;
}

/* ---- 10. Duo de CTA ----------------------------------------------------- */
.cta-pair {
    display: flex;
    flex-direction: column;
    gap: var(--sp-9);
}

.cta-pair__item {
    flex: 1;
}

/* ---- 11. Frise de suivi -------------------------------------------------
   Mobile : 6 × 80 px = 480 px, la frise défile horizontalement.
   Desktop : les connecteurs s'étirent sur toute la largeur de la carte.     */
.timeline {
    display: flex;
    margin: 0;
    padding: 0 0 var(--sp-4);
    list-style: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.timeline__step {
    position: relative;
    flex: none;
    inline-size: 80px;
    text-align: center;
    font-size: 10px;
    line-height: 1.3;
}

.timeline__marker {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 18px;
    block-size: 18px;
    margin: 0 auto var(--sp-6);
    box-sizing: border-box;
    border-radius: 50%;
    color: #ffffff;
}

/* Connecteur vers l'étape suivante */
.timeline__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 8px;
    left: calc(50% + 13px);
    inline-size: calc(100% - 26px);
    block-size: 2px;
    background: #dddddd;
}

.timeline__step--faite .timeline__marker {
    background: var(--c-green);
}

/* `:not(:last-child)` est répété ici À DESSEIN : sans lui, ce sélecteur est
   moins spécifique que la règle grise ci-dessus (0,1,1 contre 0,2,1) et le
   connecteur d'une étape franchie resterait gris. */
.timeline__step--faite:not(:last-child)::after {
    background: var(--c-green);
}

.timeline__step--courante .timeline__marker {
    background: var(--c-orange);
}

.timeline__step--courante .timeline__label {
    font-weight: 700;
    color: var(--c-heading);
}

.timeline__step--avenir .timeline__marker {
    background: var(--c-surface);
    border: 2px solid #dddddd;
}

.timeline__step--avenir .timeline__label {
    color: #999999;
}

/* ==========================================================================
   Desktop — on reprend les valeurs typographiques exactes des filaires
   ========================================================================== */
@media (min-width: 768px) {
    /* Carte service en grille : icône au-dessus, libellés courts, pas de chevron */
    .service-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-9);
        padding: var(--sp-15);
        border-radius: var(--r-10);
    }

    .service-card__chevron {
        display: none;
    }

    .service-card__title {
        font-size: 13px;
    }

    .service-card__price {
        font-size: 11.5px;
    }

    .service-card__title-long,
    .service-card__price-long {
        display: none;
    }

    .service-card__title-short,
    .service-card__price-short {
        display: inline;
    }

    .accordion__trigger {
        font-size: 14.5px;
    }

    .accordion__content {
        font-size: var(--fs-body);
    }

    /* Trois étapes en ligne : c'est un DÉROULÉ, et l'aligner horizontalement
       le donne à lire d'un coup d'œil. Empilées, elles laissaient les deux
       tiers droits de la section vides. */
    .steps {
        flex-direction: row;
        gap: var(--sp-15);
        align-items: stretch;
    }

    .steps__item {
        flex: 1 1 0;
        min-inline-size: 0;
        padding: var(--sp-18);
    }

    /* En ligne, le filet passe EN HAUT : à gauche, il aurait séparé les cartes
       les unes des autres au lieu de les relier dans une progression.

       Une vraie bordure plutôt qu'un pseudo-élément : elle épouse les angles
       arrondis de la carte, là où une barre absolue dépassait des coins. */
    .steps__item {
        border-block-start: 3px solid var(--c-orange);
    }

    .steps__item::before {
        content: none;
    }

    .steps__text {
        font-size: 15px;
    }

    /* Un accordéon étiré sur 1 200 px éloigne le « + » de sa question au point
       qu'on ne les associe plus. On borne la mesure de lecture. */
    .accordion {
        max-inline-size: 820px;
    }

    .cta-pair {
        flex-direction: row;
    }

    /* La frise n'a plus besoin de défiler : elle occupe toute la carte. */
    .timeline {
        overflow-x: visible;
    }

    .timeline__step {
        flex: 1;
        inline-size: auto;
        min-inline-size: 0;
        font-size: 10px;
    }

    .timeline__marker {
        inline-size: 14px;
        block-size: 14px;
    }

    .timeline__step:not(:last-child)::after {
        top: 6px;
        left: calc(50% + 11px);
        inline-size: calc(100% - 22px);
    }
}

/* Pointeur fin : les pastilles communes peuvent retrouver la compacité des
   filaires, la contrainte des 44 px ne visant que le tactile. */
@media (min-width: 768px) and (pointer: fine) {
    .commune-pill {
        min-height: 0;
        padding: 5px var(--sp-11);
        font-size: var(--fs-small);
    }
}