/* Accueil : blocs propres à la page d'accueil (le reste vient de site.css) */

/* Couverture : sous-titre sous le grand titre (pas de fil d'Ariane sur l'accueil) */
.couverture-accueil { --chevauche: 64px; padding-bottom: calc(var(--chevauche) + clamp(28px, 4vw, 48px)); }
.couverture-accueil h1 { margin-top: 0; }
.couverture-sous-titre { margin-top: 20px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: rgb(255 255 255 / .86); }

/* Prix distinction Diamant : carte blanche à ombre posée sur le bas de la photo du haut, sceau à droite.
   Carte basse comme le site actuel (choix A d'Alexandre, 2026-11-02) : bouton foncé posé à cheval sur le bord du bas (marge négative de la moitié de sa hauteur) */
.diamant { position: relative; z-index: 2; margin: calc(-1 * var(--chevauche, 64px)) 0 24px; }
.diamant-carte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 4vw, 48px); align-items: center; padding: clamp(24px, 2.4vw, 34px) clamp(32px, 5vw, 72px) 0; border-radius: 10px; background: var(--blanc); box-shadow: 0 0 56px 2px rgb(0 0 0 / .18); }
.diamant-carte .petit { max-width: 46em; margin-top: 10px; font-size: 16.5px; line-height: 1.65; }
.diamant-carte .pilule { display: flex; width: fit-content; margin: 16px 0 -24px; border-color: var(--encre); background: var(--encre); color: var(--blanc); }
.diamant-carte .pilule:hover { border-color: #33373e; background: #33373e; }
.diamant-sceau { display: block; width: clamp(90px, 9vw, 118px); padding-bottom: 28px; }
.diamant-sceau img { width: 100%; height: auto; }

/* Services : les cartes du site actuel (.familles, dans css/site.css : aussi sur la page Services) */
.accueil-services { padding: var(--espace) 0; }

/* Témoignages : les 11 avis en une rangée qu'on fait défiler (comme le carrousel actuel, trois à la fois), textes longs coupés avec « Lire la suite » (js/site.js) */
.avis-entete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 24px; margin-bottom: var(--espace-tete); }  /* très petits écrans : les flèches passent sous le titre (« Testimonials ») */
.avis-entete .titre { margin-bottom: 0; }  /* l'espace sous le titre passe sous l'en-tête : les flèches s'alignent sur le bas du titre au lieu de coller aux cartes (Alexandre, 2026-11-02) */
.avis-fleches { display: flex; gap: 10px; }
.avis-fleche { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--ligne); border-radius: 50%; background: var(--blanc); color: var(--encre); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.avis-fleche:first-child .ico { transform: rotate(180deg); }
.avis-fleche:hover { border-color: var(--encre); background: var(--encre); color: var(--blanc); }
.avis-fleche .ico { width: 16px; height: 16px; }
.avis-accueil .avis-grille { --ecart: clamp(16px, 2vw, 24px); display: flex; gap: var(--ecart); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.avis-accueil .avis-grille::-webkit-scrollbar { display: none; }
.avis-accueil .avis-carte { flex: 0 0 calc((100% - 2 * var(--ecart)) / 3); scroll-snap-align: start; }
.avis-accueil blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; font-size: 15px; font-weight: 500; line-height: 1.6; }
.avis-accueil blockquote p { display: inline; }
.avis-accueil blockquote p + p::before { content: " "; }
.avis-accueil .avis-carte.ouvert blockquote { display: block; -webkit-line-clamp: unset; }
.avis-accueil .avis-carte.ouvert blockquote p { display: block; }
.avis-accueil .avis-carte.ouvert blockquote p + p { margin-top: 10px; }
.avis-accueil .avis-carte.ouvert blockquote p + p::before { content: none; }
.avis-suite { align-self: start; min-height: 44px; margin-top: -10px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 600; color: var(--accent); cursor: pointer; }

/* Réalisations : les dernières publications Instagram (vignettes : styles dans site.css) */
.accueil-realisations { padding: 0 0 var(--espace); }

/* Pied de page : pas de section grise avant lui sur l'accueil */
.pied { background: var(--blanc); }

@media (max-width: 1024px) {
  .avis-accueil .avis-carte { flex-basis: calc((100% - var(--ecart)) / 2); }
}
@media (max-width: 699px) {
  .couverture-accueil { --chevauche: 40px; }
  .diamant { margin-top: -40px; }
  .diamant-carte { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 24px 24px 0; }
  .diamant-carte .titre { font-size: 26px; }
  .diamant-carte .petit { margin-top: 8px; }
  .diamant-carte .pilule { margin-top: 14px; }
  .diamant-sceau { grid-row: 1; width: 76px; padding-bottom: 0; }
  .avis-accueil .avis-carte { flex-basis: 86%; }
  .avis-accueil .avis-grille { margin-right: calc(-1 * var(--gouttiere)); padding-right: var(--gouttiere); }
}
@media (max-width: 699px) {
  /* « Plus de 10 000 clients… » se lisait mal sur la photo (Alexandre, 2026-11-03, choix B) : blanc, un peu plus gras, ombre douce */
  .couverture-sous-titre { color: #fff; font-weight: 500; text-shadow: 0 1px 14px rgb(0 0 0 / .7), 0 0 2px rgb(0 0 0 / .5); }
}