/* =========================================================================
   Tempo Solutions — Site vitrine (refonte « Une journée avec Tempo »)
   -------------------------------------------------------------------------
   Chargée UNIQUEMENT par www/_layout.php, après tempo.css. Tout est limité à
   `main.v` (et au pied de page via `.v-pied`) : l'en-tête du site, l'espace
   artisan et l'admin ne sont jamais touchés. Mobile d'abord. Aucun dégradé.
   Police système uniquement ; contrastes vérifiés (voir les commentaires).
   ========================================================================= */

/* ═══ VARIANTE D'ESPACEMENT ═══════════════════════════════════════════════════════════════════════════
   Pour changer de variante, modifier UNE seule ligne : les trois nombres ci-dessous (1 = variante active, 0 = inactive).
       A (intermédiaire, conteneur 1240 px)  : --v-a: 1; --v-b: 0; --v-c: 0;
       B (aérée, conteneur 1320 px)          : --v-a: 0; --v-b: 1; --v-c: 0;
       C (la plus aérée, 1400 px, marges 40) : --v-a: 0; --v-b: 0; --v-c: 1;
   Tout le reste (valeurs A / B / C de chaque espace) est dans le tableau qui suit : un seul endroit à lire. */
:root { --v-a: 0; --v-b: 1; --v-c: 0; }

/* Valeurs par défaut (mobile), puis ordinateur (≥ 900 px). Les tailles de texte et de boutons ne figurent PAS ici : elles ne changent pas. */
:root {
    --v-largeur           : calc(var(--v-a) * 1240px + var(--v-b) * 1320px + var(--v-c) * 1400px);   /* largeur du conteneur central  [A 1240 · B 1320 · C 1400] */
    --v-marge-cote        : calc(var(--v-a) * 20px + var(--v-b) * 20px + var(--v-c) * 20px);   /* marges latérales du conteneur  [A 20 · B 20 · C 20] */
    --v-espace-bande      : calc(var(--v-a) * 26px + var(--v-b) * 30px + var(--v-c) * 34px);   /* espace vertical des grandes bandes de page (avant la réduction : 56 / 88 ; avant cette retouche : 14 / 22)  [A 26 · B 30 · C 34] */
    --v-espace-hero-bas   : calc(var(--v-a) * 22px + var(--v-b) * 26px + var(--v-c) * 30px);   /* bas de la bande d'accueil (le haut, sous l'en-tête fixe, ne change pas)  [A 22 · B 26 · C 30] */
    --v-espace-titre      : calc(var(--v-a) * 10px + var(--v-b) * 12px + var(--v-c) * 14px);   /* titre -> texte d'introduction  [A 10 · B 12 · C 14] */
    --v-espace-bloc       : calc(var(--v-a) * 20px + var(--v-b) * 24px + var(--v-c) * 28px);   /* introduction -> contenu (cartes, tarifs, FAQ, étapes) et texte -> boutons  [A 20 · B 24 · C 28] */
    --v-espace-moyen      : calc(var(--v-a) * 14px + var(--v-b) * 18px + var(--v-c) * 22px);   /* entre deux paragraphes ou blocs voisins, avant un lien ou un bouton secondaire  [A 14 · B 18 · C 22] */
    --v-espace-petit      : calc(var(--v-a) * 8px + var(--v-b) * 10px + var(--v-c) * 12px);   /* petit écart : titre de carte -> texte, icône -> titre, ligne -> ligne  [A 8 · B 10 · C 12] */
    --v-espace-label      : calc(var(--v-a) * 5px + var(--v-b) * 6px + var(--v-c) * 8px);   /* étiquette -> champ du formulaire  [A 5 · B 6 · C 8] */
    --v-ecart-cartes      : calc(var(--v-a) * 14px + var(--v-b) * 18px + var(--v-c) * 22px);   /* écart entre cartes, étapes, cases  [A 14 · B 18 · C 22] */
    --v-ecart-liste       : calc(var(--v-a) * 8px + var(--v-b) * 10px + var(--v-c) * 12px);   /* écart entre lignes d'une liste  [A 8 · B 10 · C 12] */
    --v-ecart-boutons     : calc(var(--v-a) * 14px + var(--v-b) * 16px + var(--v-c) * 18px);   /* écart entre boutons  [A 14 · B 16 · C 18] */
    --v-pad-carte-y       : calc(var(--v-a) * 14px + var(--v-b) * 16px + var(--v-c) * 18px);   /* intérieur des cartes, hauteur  [A 14 · B 16 · C 18] */
    --v-pad-carte-x       : calc(var(--v-a) * 14px + var(--v-b) * 16px + var(--v-c) * 18px);   /* intérieur des cartes, côtés  [A 14 · B 16 · C 18] */
    --v-ecart-tarifs      : calc(var(--v-a) * 26px + var(--v-b) * 30px + var(--v-c) * 34px);   /* écart entre les trois formules  [A 26 · B 30 · C 34] */
    --v-espace-formule    : calc(var(--v-a) * 8px + var(--v-b) * 10px + var(--v-c) * 12px);   /* écart entre les lignes à l'intérieur d'une formule  [A 8 · B 10 · C 12] */
    --v-pad-f-haut        : calc(var(--v-a) * 22px + var(--v-b) * 26px + var(--v-c) * 30px);   /* intérieur d'une formule, haut  [A 22 · B 26 · C 30] */
    --v-pad-f-bas         : calc(var(--v-a) * 22px + var(--v-b) * 26px + var(--v-c) * 30px);   /* intérieur d'une formule, bas  [A 22 · B 26 · C 30] */
    --v-pad-f-cote        : calc(var(--v-a) * 20px + var(--v-b) * 22px + var(--v-c) * 24px);   /* intérieur d'une formule, côtés  [A 20 · B 22 · C 24] */
    --v-faq-largeur       : calc(var(--v-a) * 880px + var(--v-b) * 960px + var(--v-c) * 1040px);   /* largeur de la liste des questions  [A 880 · B 960 · C 1040] */
    --v-faq-ligne         : calc(var(--v-a) * 12px + var(--v-b) * 15px + var(--v-c) * 18px);   /* hauteur de respiration d'une question  [A 12 · B 15 · C 18] */
    --v-faq-reponse       : calc(var(--v-a) * 14px + var(--v-b) * 18px + var(--v-c) * 22px);   /* espace sous une réponse ouverte  [A 14 · B 18 · C 22] */
    --v-ecart-contact     : calc(var(--v-a) * 24px + var(--v-b) * 30px + var(--v-c) * 36px);   /* écart entre texte et formulaire de contact  [A 24 · B 30 · C 36] */
    --v-ecart-champs      : calc(var(--v-a) * 14px + var(--v-b) * 18px + var(--v-c) * 22px);   /* écart entre les champs du formulaire  [A 14 · B 18 · C 22] */
    --v-hero-ecart        : calc(var(--v-a) * 24px + var(--v-b) * 28px + var(--v-c) * 32px);   /* accueil mobile : écart texte / image  [A 24 · B 28 · C 32] */
    --v-hero-texte        : calc(var(--v-a) * 492px + var(--v-b) * 532px + var(--v-c) * 564px);   /* accueil ordinateur : largeur de la colonne de texte (l'image reste au même endroit : 688 px à 1440 px)  [A 492 · B 532 · C 564] */
    --v-interligne        : calc(var(--v-a) * 1.55 + var(--v-b) * 1.6 + var(--v-c) * 1.6);   /* interligne du texte courant (avant la réduction : 1,6 ; avant cette retouche : 1,5) */
    --v-paragraphe        : calc(var(--v-a) * 0.9em + var(--v-b) * 1em + var(--v-c) * 1.1em);   /* espace sous un paragraphe (avant la réduction : 1 em ; avant cette retouche : .75 em) */
    --v-faq-lecture       : calc(var(--v-a) * 66ch + var(--v-b) * 72ch + var(--v-c) * 78ch);   /* largeur de lecture d'une réponse de la FAQ */
}
@media (min-width: 900px) {
    :root {
        --v-marge-cote        : calc(var(--v-a) * 32px + var(--v-b) * 32px + var(--v-c) * 40px);   /* [A 32 · B 32 · C 40] */
        --v-espace-bande      : calc(var(--v-a) * 40px + var(--v-b) * 46px + var(--v-c) * 54px);   /* [A 40 · B 46 · C 54] */
        --v-espace-hero-bas   : calc(var(--v-a) * 30px + var(--v-b) * 36px + var(--v-c) * 44px);   /* [A 30 · B 36 · C 44] */
        --v-espace-titre      : calc(var(--v-a) * 14px + var(--v-b) * 18px + var(--v-c) * 22px);   /* [A 14 · B 18 · C 22] */
        --v-espace-bloc       : calc(var(--v-a) * 28px + var(--v-b) * 34px + var(--v-c) * 40px);   /* [A 28 · B 34 · C 40] */
        --v-espace-moyen      : calc(var(--v-a) * 18px + var(--v-b) * 22px + var(--v-c) * 26px);   /* [A 18 · B 22 · C 26] */
        --v-ecart-cartes      : calc(var(--v-a) * 24px + var(--v-b) * 30px + var(--v-c) * 36px);   /* [A 24 · B 30 · C 36] */
        --v-ecart-boutons     : calc(var(--v-a) * 16px + var(--v-b) * 18px + var(--v-c) * 20px);   /* [A 16 · B 18 · C 20] */
        --v-pad-carte-y       : calc(var(--v-a) * 18px + var(--v-b) * 22px + var(--v-c) * 26px);   /* [A 18 · B 22 · C 26] */
        --v-pad-carte-x       : calc(var(--v-a) * 20px + var(--v-b) * 24px + var(--v-c) * 28px);   /* [A 20 · B 24 · C 28] */
        --v-ecart-tarifs      : calc(var(--v-a) * 22px + var(--v-b) * 28px + var(--v-c) * 34px);   /* [A 22 · B 28 · C 34] */
        --v-pad-f-haut        : calc(var(--v-a) * 30px + var(--v-b) * 36px + var(--v-c) * 42px);   /* [A 30 · B 36 · C 42] */
        --v-pad-f-bas         : calc(var(--v-a) * 26px + var(--v-b) * 32px + var(--v-c) * 38px);   /* [A 26 · B 32 · C 38] */
        --v-pad-f-cote        : calc(var(--v-a) * 24px + var(--v-b) * 28px + var(--v-c) * 32px);   /* [A 24 · B 28 · C 32] */
        --v-faq-ligne         : calc(var(--v-a) * 14px + var(--v-b) * 17px + var(--v-c) * 20px);   /* [A 14 · B 17 · C 20] */
        --v-ecart-contact     : calc(var(--v-a) * 44px + var(--v-b) * 56px + var(--v-c) * 68px);   /* [A 44 · B 56 · C 68] */
    }
}
main.v {
    --v-marine: #1a3a5c;
    --v-marine-profond: #12293f;   /* texte sur boutons orange (5:1), bandes sombres */
    --v-orange: #e07b39;           /* boutons et un point fort par écran, jamais en texte courant */
    --v-orange-texte: #a84f14;     /* orange lisible sur fond clair (5,2:1 sur #f5f8ff) */
    --v-fond: #f5f8ff;
    --v-blanc: #ffffff;
    --v-texte: #2b3a4a;            /* 10:1 sur fond clair */
    --v-texte-doux: #4f5f71;       /* 6:1 sur fond clair */
    --v-filet: #d9e2f0;

    font-size: 1.125rem;           /* 18 px : lisible sans lunettes */
    line-height: var(--v-interligne);
    color: var(--v-texte);
    background: var(--v-blanc);
}
main.v *, main.v *::before, main.v *::after { box-sizing: border-box; }
:where(main.v) h1, :where(main.v) h2, :where(main.v) h3 { color: var(--v-marine); font-weight: 800; line-height: 1.15; margin: 0; letter-spacing: -.01em; }
:where(main.v) h1 { font-size: clamp(2.1rem, 7vw, 3.6rem); }
:where(main.v) h2 { font-size: clamp(1.7rem, 4.6vw, 2.5rem); max-width: 22ch; }
:where(main.v) h3 { font-size: 1.25rem; line-height: 1.25; }
:where(main.v) p { margin: 0 0 var(--v-paragraphe); }
:where(main.v) a { color: var(--v-marine); }
:where(main.v) a:hover { color: var(--v-orange-texte); }

/* Focus clavier toujours visible (anneau marine + liseré blanc, lisible sur fond clair comme foncé) */
main.v :focus-visible, .v-pied :focus-visible {
    outline: 3px solid var(--v-marine); outline-offset: 3px; border-radius: 4px;
    box-shadow: 0 0 0 6px #fff;
}
main.v .v-sombre :focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px var(--v-marine-profond); }

.v-conteneur { width: 100%; max-width: var(--v-largeur); margin: 0 auto; padding: 0 var(--v-marge-cote); }

.v-bande { padding: var(--v-espace-bande) 0; }
.v-bande.v-fond { background: var(--v-fond); }
.v-bande.v-sombre { background: var(--v-marine); color: #e8eef8; }
.v-bande.v-sombre h2, .v-bande.v-sombre h3 { color: #fff; }
.v-bande.v-sombre a { color: #fff; }
.v-chapeau { font-size: 1.2rem; max-width: 68ch; color: var(--v-texte-doux); margin-top: var(--v-espace-titre); }
.v-sombre .v-chapeau { color: #cdd9ea; }

/* ── Boutons ─────────────────────────────────────────────────────────── */
.v-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
    padding: 12px 28px; border-radius: 10px; border: 2px solid transparent;
    font: inherit; font-size: 1.1rem; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
main.v a.v-btn-orange, main.v button.v-btn-orange { background: var(--v-orange); color: var(--v-marine-profond); }
main.v a.v-btn-orange:hover, main.v button.v-btn-orange:hover { background: #ee8c4b; color: var(--v-marine-profond); }
main.v a.v-btn-marine, main.v button.v-btn-marine { background: var(--v-marine); color: #fff; }
main.v a.v-btn-marine:hover, main.v button.v-btn-marine:hover { background: var(--v-marine-profond); color: #fff; }
main.v a.v-btn-contour { border-color: var(--v-marine); color: var(--v-marine); background: transparent; }
main.v a.v-btn-contour:hover { background: var(--v-marine); color: #fff; }
.v-sombre a.v-btn-contour { border-color: #fff; color: #fff; }
.v-sombre a.v-btn-contour:hover { background: #fff; color: var(--v-marine); }
.v-lien-simple { font-weight: 700; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.v-hero { background: var(--v-fond); padding: 86px 0 var(--v-espace-hero-bas); }
@media (min-width: 900px) { .v-hero { padding-top: 92px; } }
.v-hero-grille { display: grid; gap: var(--v-hero-ecart); align-items: center; }
/* Ordinateur : la colonne de l'image est plus large (image agrandie) ; écart net avec le texte (64 px) ; sur grand écran l'image déborde à peine (12 px) dans la marge de droite : même taille qu'avant, décalée de 32 px vers la gauche. */
@media (min-width: 960px) { .v-hero-grille { grid-template-columns: minmax(0, .77fr) minmax(0, 1fr); gap: 64px; } }
/* Conteneur élargi à 1240 px : l'image garde sa taille (572 px) ET sa position d'avant (colonnes fixes 492 + 64 + 560, alignées à gauche du conteneur). */
@media (min-width: 1240px) { .v-hero-grille { grid-template-columns: minmax(0, var(--v-hero-texte)) 560px; justify-content: start; } .v-hero-visuel { margin-right: -12px; } }
/* Ordinateur : l'image est calée sur le haut de la grille avec un décalage FIXE (54 px, sa position d'avant à 1440 px) : elle ne bouge plus quand le texte à côté s'aère. */
@media (min-width: 960px) { .v-hero-grille { align-items: start; } .v-hero-visuel { margin-top: 54px; } }
.v-hero h1 { max-width: 15ch; }
.v-hero .v-chapeau { font-size: 1.25rem; margin: var(--v-espace-moyen) 0 var(--v-espace-bloc); max-width: 52ch; }
.v-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-ecart-boutons) calc(var(--v-ecart-boutons) * 1.7); }
.v-hero-visuel { min-width: 0; }
/* Mobile : un peu plus large que la colonne de texte (légère sortie dans les marges, jamais hors de l'écran). */
@media (max-width: 959px) { .v-hero-visuel { margin: 0 -8px; } }
.v-hero-image { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 12px; border: 1px solid var(--v-filet); box-shadow: 0 10px 30px rgba(26,58,92,.12); }


/* Avis demandé : étoiles + lien */
.v-etoiles { color: var(--v-orange-texte); letter-spacing: .1em; font-size: 1.25rem; }

/* ── Tarifs : trois colonnes séparées par des filets, sans cartes ───── */
.v-tarifs { display: grid; margin-top: var(--v-espace-bloc); border-top: 1px solid var(--v-filet); }
.v-formule { padding: 28px 0 32px; border-bottom: 1px solid var(--v-filet); display: flex; flex-direction: column; gap: var(--v-espace-formule); position: relative; }
@media (min-width: 900px) {
    .v-tarifs { grid-template-columns: repeat(3, 1fr); border-top: none; }
    .v-formule { padding: 32px 32px 36px; border-bottom: none; border-left: 1px solid var(--v-filet); border-top: 6px solid var(--v-filet); }
    .v-formule:first-child { border-left: none; padding-left: 0; }
}
.v-formule.v-reco { border-top-color: var(--v-orange); }
@media (max-width: 899px) { .v-formule.v-reco { border-left: 6px solid var(--v-orange); padding-left: 18px; } }
.v-formule-etiquette { font-weight: 800; font-size: 1rem; color: var(--v-orange-texte); min-height: 0; }
.v-formule h3 { font-size: 1.5rem; }
.v-formule .v-sous { color: var(--v-texte-doux); font-size: 1rem; margin: 0 0 var(--v-espace-petit); }
.v-prix { font-size: 3rem; font-weight: 800; line-height: 1; color: var(--v-marine); font-variant-numeric: tabular-nums; }
.v-prix small { font-size: 1.1rem; font-weight: 700; color: var(--v-texte-doux); margin-left: 4px; }
.v-prix-barre { font-size: 1rem; color: var(--v-texte-doux); margin: var(--v-espace-petit) 0 0; }
.v-prix-total { font-size: .88rem; font-weight: 400; color: var(--v-texte-doux); margin: var(--v-espace-petit) 0 var(--v-espace-moyen); } /* le total reste affiché (transparence tarifaire), mais discret : l’œil va d’abord au prix par mois */
.v-formule ul { margin: 0 0 var(--v-espace-bloc); padding: 0; list-style: none; display: grid; gap: var(--v-ecart-liste); font-size: 1.05rem; }
.v-formule li { padding-left: 26px; position: relative; }
.v-formule li::before { content: ""; position: absolute; left: 4px; top: .35em; width: 9px; height: 15px; border: solid var(--v-marine); border-width: 0 3px 3px 0; transform: rotate(40deg); }
.v-formule .v-btn { margin-top: auto; }
.v-tva { margin: var(--v-espace-bloc) 0 0; font-size: 1rem; color: var(--v-texte-doux); }
.v-mention { margin: var(--v-espace-moyen) 0 0; max-width: 80ch; font-size: .9rem; color: var(--v-texte-doux); }

/* ── Logos (défilement lent) ────────────────────────────────────────── */
.v-logos-bande { padding: var(--v-espace-logos) 0; border-top: 1px solid var(--v-filet); border-bottom: 1px solid var(--v-filet); background: var(--v-blanc); }
.v-logos-titre { text-align: center; font-weight: 700; color: var(--v-texte-doux); margin: 0 0 var(--v-espace-moyen); font-size: 1.05rem; }
.v-logos-bande .logos-carrousel { background: transparent; }
.v-logos-bande .logos-item { color: var(--v-marine); text-decoration: none; }
.v-logos-bande .logos-item-nom { font-weight: 700; color: var(--v-marine); }
.v-logos-bande .logos-item img { filter: none; opacity: 1; }

/* ── Avis des artisans : un grand propos à la fois ──────────────────── */
.v-avis-tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--v-espace-moyen); margin-bottom: var(--v-espace-bloc); }
.v-avis-pilotage { display: flex; gap: var(--v-ecart-boutons); }
.v-avis-pilotage button {
    width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--v-marine); background: transparent; color: var(--v-marine);
    font: inherit; font-size: 1.5rem; font-weight: 800; line-height: 1; cursor: pointer;
}
.v-avis-pilotage button:hover { background: var(--v-marine); color: #fff; }
.v-avis-piste { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0; padding: 0; list-style: none; }
.v-avis-piste::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .v-avis-piste { scroll-behavior: auto; } }
.v-avis { flex: 0 0 100%; scroll-snap-align: start; padding: 4px 0 var(--v-espace-petit); margin: 0; }
@media (min-width: 900px) { .v-avis { flex-basis: 50%; padding-right: 48px; } }
.v-avis blockquote { margin: 0; }
.v-avis blockquote p { font-size: 1.45rem; line-height: 1.4; font-weight: 700; color: var(--v-marine); margin: var(--v-espace-petit) 0 var(--v-espace-moyen); max-width: 30ch; }
.v-avis figcaption { font-size: 1rem; color: var(--v-texte-doux); }
.v-avis figcaption strong { color: var(--v-marine); }

/* ── Questions fréquentes : <details> natif, au clavier sans JavaScript ─ */
.v-faq { margin-top: var(--v-espace-bloc); border-top: 1px solid var(--v-filet); max-width: var(--v-faq-largeur); }
.v-faq details { border-bottom: 1px solid var(--v-filet); }
.v-faq summary { list-style: none; cursor: pointer; padding: var(--v-faq-ligne) 44px var(--v-faq-ligne) 0; font-weight: 800; font-size: 1.2rem; color: var(--v-marine); position: relative; line-height: 1.3; }
.v-faq summary::-webkit-details-marker { display: none; }
.v-faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.8rem; font-weight: 700; color: var(--v-marine); }
.v-faq details[open] summary::after { content: "\2212"; }
.v-faq details > div { padding: 0 0 var(--v-faq-reponse); max-width: var(--v-faq-lecture); }
.v-faq details > div p:last-child { margin-bottom: 0; }

/* ── Contact ────────────────────────────────────────────────────────── */
.v-contact-grille { display: grid; gap: var(--v-ecart-contact); }
@media (min-width: 900px) { .v-contact-grille { grid-template-columns: 1fr 1.1fr; } }
.v-form { display: grid; gap: var(--v-ecart-champs); }
.v-form label { display: block; font-weight: 700; margin-bottom: var(--v-espace-label); color: var(--v-marine); }
.v-form input, .v-form textarea {
    width: 100%; font: inherit; font-size: 1.1rem; color: var(--v-texte); background: var(--v-blanc);
    border: 2px solid #9fb0c7; border-radius: 10px; padding: 13px 14px; min-height: 52px;
}
.v-form textarea { min-height: 108px; resize: vertical; }
.v-form input:focus, .v-form textarea:focus { border-color: var(--v-marine); outline: 3px solid rgba(26,58,92,.25); outline-offset: 1px; box-shadow: none; }
.v-message { padding: 10px 14px; border-radius: 10px; font-weight: 700; margin-bottom: var(--v-espace-moyen); }
.v-message.v-ok { background: #e3f1e3; color: #1f4d1f; border: 1px solid #a9cfa9; }
.v-message.v-erreur { background: #fbe9e7; color: #7a1f1a; border: 1px solid #e3b1ab; }
.v-contact-direct { margin-top: var(--v-espace-moyen); font-size: 1.1rem; }
.v-contact-direct a { font-weight: 800; }

/* ── Bandeau final ──────────────────────────────────────────────────── */
.v-final { text-align: left; }
.v-final h2 { max-width: 20ch; }
.v-final p { max-width: 50ch; font-size: 1.2rem; margin: var(--v-espace-moyen) 0 var(--v-espace-bloc); color: #cdd9ea; }

/* ── Pages légales ──────────────────────────────────────────────────── */
.v-legal { padding: 90px 0 20px; background: var(--v-blanc); }
.v-legal h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin-bottom: .4em; }
.v-legal h2 { font-size: 1.45rem; margin: .85em 0 .25em; max-width: none; }
.v-legal h3 { font-size: 1.15rem; margin: .7em 0 .2em; }
.v-legal ul, .v-legal ol { padding-left: 1.3em; }
.v-legal li { margin-bottom: .2em; }
.v-legal a { color: var(--v-marine); font-weight: 600; }
/* Tableaux des pages légales (tarifs des CGV, traitements de la politique de confidentialité) : sur téléphone, défilement horizontal DANS le
   tableau plutôt qu'un débordement de toute la page. Sur grand écran le tableau garde toute sa largeur. */
@media (max-width: 640px) {
    .v-legal table.data { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Pied de page (le gabarit .site-footer de tempo.css reste la base) ─ */
.v-pied.site-footer { background: #12293f; color: #cdd9ea; padding: 16px 0 10px; font-size: 1rem; }
.v-pied .brand { font-size: 1.15rem; margin-bottom: 4px; }
.v-pied .v-pied-phrase { max-width: 40ch; color: #fff; font-weight: 700; font-size: 1.15rem; margin: 0 0 3px; }
.v-pied p { margin: 0 0 5px; }
.v-pied .links a { color: #e8eef8; text-decoration: underline; text-underline-offset: 3px; }
.v-pied .links a:hover { color: #fff; }
.v-pied .links { margin: 8px 0; gap: 6px 16px; }
.v-pied .bas { color: #aebfd6; margin-top: 10px; padding-top: 10px; }

/* Lien d'évitement : invisible, il n'apparaît qu'au clavier (Tab) pour sauter l'en-tête et aller au contenu */
.v-evitement { position: absolute; left: 12px; top: -80px; z-index: 100; background: #fff; color: #1a3a5c; font-weight: 800; padding: 12px 18px; border-radius: 8px; border: 2px solid #1a3a5c; text-decoration: none; }
.v-evitement:focus { top: 12px; }


/* ── Fonctionnalités : des cases, sobres (filet fin, pas d'ombre) ───── */
.v-cartes { display: grid; gap: var(--v-ecart-cartes); margin-top: var(--v-espace-bloc); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .v-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .v-cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v-carte { background: var(--v-blanc); border: 1px solid var(--v-filet); border-top: 4px solid var(--v-marine); border-radius: 10px; padding: var(--v-pad-carte-y) var(--v-pad-carte-x); }
.v-bande.v-fond .v-carte { background: var(--v-blanc); }
.v-ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 10px; background: var(--v-fond); color: var(--v-marine); margin-bottom: var(--v-espace-petit); }
.v-carte h3 { font-size: 1.2rem; margin-bottom: var(--v-espace-petit); }
.v-carte p { margin: 0; font-size: 1.02rem; color: var(--v-texte); }

/* ── En pratique : trois étapes, simples ────────────────────────────── */
.v-etapes { display: grid; gap: var(--v-ecart-cartes); margin-top: var(--v-espace-bloc); }
@media (min-width: 900px) { .v-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--v-ecart-cartes) * 1.4); } }
.v-etape { border-left: 4px solid var(--v-orange); padding-left: 18px; }
.v-etape h3 { font-size: 1.3rem; margin-bottom: var(--v-espace-petit); }
.v-etape p { margin: 0; }

/* ── Pour qui : quatre cases courtes ────────────────────────────────── */
.v-metiers-cases { display: grid; gap: var(--v-ecart-cartes); margin-top: var(--v-espace-bloc); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .v-metiers-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .v-metiers-cases { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v-metier-case { background: var(--v-fond); border: 1px solid var(--v-filet); border-radius: 10px; padding: var(--v-pad-carte-y) var(--v-pad-carte-x); }
.v-metier-case h3 { font-size: 1.2rem; margin-bottom: var(--v-espace-petit); }
.v-metier-case p { margin: 0; font-size: 1.02rem; }

/* Mobile : case compacte (icône à gauche, texte à droite) pour que la page reste courte */
@media (max-width: 639px) {
    .v-carte { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; padding: var(--v-pad-carte-y) var(--v-pad-carte-x); }
    .v-carte .v-ico { grid-row: 1 / span 2; margin-bottom: 0; }
    .v-carte h3 { margin-bottom: calc(var(--v-espace-petit) * .6); align-self: center; }
    .v-carte p, .v-carte .v-liste { grid-column: 2; }
}

/* ── En-tête pleine largeur : le logo « Tempo Solutions » colle au bord gauche de l'écran et les boutons
   « Mon espace » / « Démarrer maintenant » au bord droit, au lieu d'être rentrés dans un cadre de 1440 px
   (sur grand écran, ils flottaient loin des bords). La navigation reste au centre. */
.site-header .container-wide { max-width: none; padding-left: clamp(16px, 2.2vw, 40px); padding-right: clamp(16px, 2.2vw, 40px); }
/* Ordinateur : trois zones — logo à gauche, navigation exactement au centre de la page, boutons à droite. */
@media (min-width: 860px) {
    .site-header .container-wide { display: grid; grid-template-columns: 1fr auto 1fr; }
    .site-header .brand { justify-self: start; }
    .site-header nav.site-nav { flex: none; }
    .site-header .actions { justify-self: end; }
}
/* ── En-tête sur petit écran : le bouton « Démarrer maintenant » ne doit pas sortir de l'écran ──
   Uniquement sous 440 px ; au-dessus, l'en-tête reste exactement celui de tempo.css (logo, navigation, bouton). */
@media (max-width: 440px) {
    .site-header .container-wide { padding: 0 14px; gap: 10px; }
    .site-header .brand { font-size: .95rem; }
    .site-header .actions .btn { padding: 10px 14px; font-size: .9rem; white-space: nowrap; }
}
@media (max-width: 380px) {
    .site-header .container-wide { padding: 0 12px; }
    .site-header .actions .btn { padding: 9px 11px; font-size: .85rem; }
}
@media (max-width: 340px) {
    .site-header .container-wide { padding: 0 10px; gap: 8px; }
    .site-header .brand { font-size: .85rem; gap: 6px; }
    .site-header .actions .btn { padding: 8px 9px; font-size: .78rem; }
}

/* Case « Automatisation » : plus large, avec la liste de ce qui part chez les clients */
@media (min-width: 640px) { .v-carte-large { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .v-carte-large { grid-column: span 2; } }
.v-carte-large { border-top-color: var(--v-orange); }
.v-carte .v-liste { margin: var(--v-espace-moyen) 0 0; padding: 0; list-style: none; display: grid; gap: var(--v-ecart-liste); font-size: 1.02rem; }
.v-carte .v-liste li { padding-left: 22px; position: relative; }
.v-carte .v-liste li::before { content: ""; position: absolute; left: 0; top: .6em; width: 9px; height: 9px; border-radius: 50%; background: var(--v-orange); }
.v-carte .v-liste strong { color: var(--v-marine); }
@media (min-width: 900px) { .v-carte-large .v-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--v-ecart-liste) + 4px) 28px; } }
.v-carte .v-carte-note { margin: var(--v-espace-moyen) 0 0; font-weight: 700; color: var(--v-marine); }
@media (max-width: 639px) {
    .v-carte-large .v-carte-note { grid-column: 2; }
}

/* ── Pour qui : cases cliquables vers la page du métier ─────────────── */
a.v-metier-case { display: block; text-decoration: none; color: var(--v-texte); transition: border-color .15s ease, background-color .15s ease; }
a.v-metier-case:hover { border-color: var(--v-marine); background: var(--v-blanc); color: var(--v-texte); }
.v-metier-case .v-metier-cible { color: var(--v-texte-doux); font-size: .95rem; margin-bottom: 8px; }
.v-metier-lien { display: inline-block; margin-top: 12px; font-weight: 800; color: var(--v-marine); text-decoration: underline; text-underline-offset: 3px; }
a.v-metier-case:hover .v-metier-lien { color: var(--v-orange-texte); }

/* ── Page d'un métier ───────────────────────────────────────────────── */
.v-hero-metier { padding-bottom: var(--v-espace-hero-bas); }
.v-hero-metier h1 { max-width: 22ch; }
.v-retour { margin: 0 0 var(--v-espace-petit); font-weight: 700; }
.v-cartes-metier { margin-top: var(--v-espace-bloc); }
@media (min-width: 1000px) { .v-cartes-metier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v-cartes-metier .v-carte { border-top-color: var(--v-orange); }
.v-autres-metiers { list-style: none; margin: var(--v-espace-moyen) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.v-autres-metiers a { font-weight: 800; font-size: 1.15rem; }

/* Accueil : liste simple des métiers couverts (www/_metiers-accueil.php) */
.v-metiers-liste { list-style: none; margin: var(--v-espace-bloc) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--v-espace-petit) calc(var(--v-espace-petit) * 1.2); }
.v-metiers-liste li { background: var(--v-fond); border: 1px solid var(--v-filet); border-radius: 999px; padding: 10px 22px; font-weight: 800; font-size: 1.1rem; color: var(--v-marine); }
.v-metiers-autre { margin: var(--v-espace-moyen) 0 0; color: var(--v-texte-doux); }

/* Astérisque du prix mensuel et sa note */
.v-ast { color: var(--v-orange-texte); font-size: .6em; vertical-align: super; margin-left: 2px; }
.v-prix-note { color: var(--v-texte); font-weight: 700; }

/* ── Carrousel de logos : boucle sans saut ──────────────────────────────
   La piste porte un padding-right égal à l'espace entre logos et glisse d'UNE copie exacte (variable --v-decalage,
   calculée dans src/vitrine_carrousel.php) : sans cela, le « -50 % » de tempo.css tombait une demi-espace trop loin
   (130 px de saut à chaque tour). */
@keyframes v-logos-defiler { from { transform: translateX(0); } to { transform: translateX(var(--v-decalage, -50%)); } }
.v-logos-bande .logos-piste { animation-name: v-logos-defiler; }

/* ── Prix barré et badge d'économie (forfaits 1 an et 3 ans) ──────────── */
.v-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.v-reduc { display: flex; align-items: center; gap: 10px; min-height: 1.7rem; margin: 0 0 2px; }
.v-prix-ancien { font-size: 1.25rem; font-weight: 700; color: #5f6f80; text-decoration: line-through; text-decoration-thickness: 2px; font-variant-numeric: tabular-nums; }
.v-badge-reduc { display: inline-block; background: var(--v-orange); color: var(--v-marine-profond); font-weight: 800; font-size: .95rem; line-height: 1; padding: 6px 10px; border-radius: 999px; }

/* Sur mobile les cartes sont empilées : les lignes vides qui alignent les prix côte à côte sur ordinateur disparaissent. */
@media (max-width: 899px) {
    .v-reduc[aria-hidden="true"], .v-sous[aria-hidden="true"], .v-formule-etiquette:empty { display: none; }
}

/* ═══ Cartes tarifs : style « Relief doux » (variante A retenue) ═══
   Cartes blanches arrondies, ombres en couches, surélévation au survol ; la carte Recommandé est plus grande,
   cernée d'orange, avec une pastille en relief. Aucun dégradé. Espacements : variables --v-pad-f-* et --v-ecart-tarifs. */
.v-tarifs { gap: var(--v-ecart-tarifs); border-top: none; padding-top: 12px; }
.v-formule {
    background: #fff; border: 1px solid var(--v-filet); border-radius: 22px; padding: var(--v-pad-f-haut) var(--v-pad-f-cote) var(--v-pad-f-bas);
    box-shadow: 0 1px 2px rgba(18,41,63,.06), 0 8px 18px rgba(18,41,63,.08), 0 22px 40px rgba(18,41,63,.08);
    transition: transform .2s ease, box-shadow .2s ease;
}
.v-formule:first-child { padding-left: var(--v-pad-f-cote); border-left: 1px solid var(--v-filet); }
.v-formule:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(18,41,63,.08), 0 14px 26px rgba(18,41,63,.12), 0 32px 56px rgba(18,41,63,.12); }
.v-formule.v-reco { padding: calc(var(--v-pad-f-haut) + 10px) calc(var(--v-pad-f-cote) - 1px) calc(var(--v-pad-f-bas) - 1px); border: 2px solid var(--v-orange); box-shadow: 0 2px 4px rgba(224,123,57,.20), 0 16px 34px rgba(18,41,63,.18), 0 34px 60px rgba(18,41,63,.14); }
.v-formule.v-reco .v-formule-etiquette {
    position: absolute; top: -16px; left: 24px; background: var(--v-orange); color: var(--v-marine-profond);
    padding: 6px 16px; border-radius: 999px; font-size: .95rem; box-shadow: 0 4px 10px rgba(224,123,57,.35);
}
@media (min-width: 900px) {
    .v-formule, .v-formule:first-child { border-top: 1px solid var(--v-filet); }
    .v-formule.v-reco { padding: var(--v-pad-f-haut) calc(var(--v-pad-f-cote) - 1px) calc(var(--v-pad-f-bas) - 1px); transform: scale(1.04); z-index: 1; }
    .v-formule.v-reco:hover { transform: scale(1.04) translateY(-6px); }
}
/* ── Section « Ce que Tempo Solutions fait pour vous » (contenu du flyer, page 2) ──────────────────
   Uniquement cette section : mêmes couleurs que le reste du site (marine, orange), aucun autre bloc modifié. */
.v-fonct-titre { position: relative; padding-bottom: calc(var(--v-espace-petit) + 4px); max-width: none; }
.v-fonct-titre::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 5px; border-radius: 3px; background: var(--v-orange); }
.v-fonct-auto { margin-top: var(--v-espace-bloc); background: #fdf1e6; border: 1px solid #f6d9bf; border-left: 8px solid var(--v-orange); border-radius: 16px; padding: var(--v-pad-carte-y) var(--v-pad-carte-x); }
.v-fonct-auto h3, .v-fonct-rangee-titre { display: flex; align-items: center; gap: 12px; font-size: 1.25rem; }
.v-fonct-pastille { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--v-orange); color: #fff; }
.v-fonct-pastille svg { stroke: #fff; }
.v-fonct-puces { list-style: none; margin: var(--v-espace-moyen) 0 0; padding: 0; display: grid; gap: var(--v-ecart-liste); font-size: 1.02rem; }
.v-fonct-puces li { position: relative; padding-left: 24px; }
.v-fonct-puces li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 10px; height: 10px; border-radius: 50%; background: var(--v-orange); }
.v-fonct-puces strong { color: var(--v-marine); }
.v-fonct-auto .v-carte-note { margin: var(--v-espace-moyen) 0 0; }
@media (min-width: 900px) { .v-fonct-auto { padding: var(--v-pad-carte-y) calc(var(--v-pad-carte-x) + 6px); } .v-fonct-puces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v-ecart-liste) 40px; } }

.v-fonct-rangees { display: grid; gap: var(--v-ecart-cartes); margin-top: var(--v-ecart-cartes); }
.v-fonct-rangee { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--v-fond); border: 1px solid var(--v-filet); border-radius: 16px; overflow: hidden; }
.v-fonct-rangee-titre { margin: 0; padding: calc(var(--v-espace-petit) + 2px) 16px; background: var(--v-marine); color: #fff; }
.v-fonct-rangee-titre .v-fonct-pastille { width: 38px; height: 38px; }
.v-fonct-pts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.v-fonct-pts li { display: flex; align-items: center; gap: 12px; padding: var(--v-espace-petit) 16px; font-weight: 700; color: var(--v-marine); font-size: 1rem; line-height: 1.35; }
.v-fonct-pts li + li { border-top: 2px solid var(--v-filet); }
.v-fonct-coche { flex: none; }
@media (min-width: 900px) {
    .v-fonct-rangee { grid-template-columns: 290px minmax(0, 1fr); }
    .v-fonct-rangee-titre { padding: 0 22px; min-height: 48px; }
    .v-fonct-pts { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }
    .v-fonct-pts li { flex-direction: column; justify-content: center; text-align: center; gap: 4px; padding: var(--v-espace-petit) 8px; }
    .v-fonct-pts li + li { border-top: 0; border-left: 2px solid var(--v-filet); }
}
.v-fonct-auto .v-carte-note { font-size: .95rem; font-weight: 700; color: var(--v-marine); }