/* =========================================================================
   particuliers.avoloi.fr — compléments au thème actuel (style.css + orange.css)
   Volontairement court : tout le reste vient du thème existant d'avoloi.fr.
   ========================================================================= */

/* Lien « Mon compte » discret dans l'en-tête (icône + libellé) */
.nav-account { white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.nav-account i { font-size: 1.35rem; line-height: 1; }
.navbar .nav-account.btn-outline-primary:hover, .navbar .nav-account.btn-outline-primary:focus { background: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: #fff !important; }

/* Bouton CTA collant en bas d'écran sur mobile */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; /* sous le menu mobile (offcanvas) */
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -0.25rem 1.25rem rgba(30, 34, 40, .08);
}
@media (max-width: 767.98px) {
  body { padding-bottom: 4.5rem; }           /* évite que le bouton masque le pied de page */
  .progress-wrap { bottom: 5.5rem !important; }
}

/* Questions de FAQ en <h3> sans changer le rendu de l'accordéon du thème */
.accordion-wrapper .faq-q { font-size: inherit; font-weight: inherit; line-height: inherit; }
.accordion-wrapper .faq-q button { font-size: 1.05rem; text-align: left; }

/* Pastilles de domaines (accueil) */
.domain-pills .btn { font-size: .95rem; padding: .55rem 1.2rem; }

/* Points de réassurance du hero Diagnostic */
.hero-points li { font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }
.hero-points i { font-size: 1.25rem; }

/* Paragraphe de définition (bloc GEO) */
.definition { border-left: 4px solid var(--bs-primary); padding-left: 1.25rem; }

/* Situations (page Médiation) */
.situations li {
  background: #fff; border-radius: 50rem; padding: .7rem 1.25rem;
  box-shadow: 0 .25rem 1rem rgba(30, 34, 40, .05); font-weight: 500;
}

/* Bloc d'accès rapide Médiation */
.acces-rapide { border-left: 5px solid var(--bs-primary); }

/* Illustration de la carte Médiation (accueil) : même hauteur que la vignette Diagnostic */
.service-illu { height: 170px; width: auto; max-width: 100%; object-fit: contain; }

/* Colonne collante (sections « Pourquoi ») */
@media (min-width: 992px) { .sticky-col { top: 8rem; align-self: flex-start; } }

/* Marqueurs « à confirmer » de la maquette — À SUPPRIMER avant mise en ligne
   (ou retirer les <span class="todo"> du HTML une fois les infos validées) */
.todo { background: #fff3cd; color: #7a5b00; font-size: .85em; padding: 0 .3em; border-radius: .25rem; }

/* Lien d'évitement (accessibilité) */
.visually-hidden-focusable:focus { position: fixed; top: .5rem; left: .5rem; z-index: 2000; background: #fff; padding: .5rem 1rem; border-radius: .4rem; }

/* ---- Itération 2 ---------------------------------------------------- */
/* Illustrations à fond blanc : le blanc se fond dans les fonds colorés */
.illu-blend { mix-blend-mode: multiply; }

/* Bouton « Mon compte » : contour, sans fond */
.nav-account { gap: .4rem; }
.nav-account i { font-size: 1.1rem; }

/* FAQ sur fond coloré : questions en cartes blanches, bien espacées */
.faq-bloc .accordion-wrapper .card.plain {
  background: #fff; border-radius: .8rem; padding: 0; margin-bottom: 1rem;
  box-shadow: 0 .25rem 1.25rem rgba(30, 34, 40, .06);
}
.faq-bloc .accordion-wrapper .card.plain:last-child { margin-bottom: 0; }
.faq-bloc .accordion-wrapper .card.plain .card-header { padding: 1.15rem 1.5rem 1.15rem 3.1rem; }
.faq-bloc .accordion-wrapper .card.plain .card-header button { position: relative; padding: 0; }
.faq-bloc .accordion-wrapper .card.plain .card-header button:before {
  left: -1.75rem; top: 50%; margin: 0; transform: translateY(-50%); line-height: 1;
}
.faq-bloc .accordion-wrapper .card.plain .card-body { padding: 0 1.5rem 1.25rem 3.1rem; }

/* Pied de page : lien vers le site avocats */
.footer-avocat { color: var(--bs-primary) !important; font-size: 1.05rem; font-weight: 700; }
.footer-avocat:hover { text-decoration: underline; }

/* Médiation : durée mise en valeur */
.duree-box {
  display: flex; gap: 1.25rem; align-items: center; max-width: 46rem;
  background: #fff; border-left: 5px solid var(--bs-primary); border-radius: .6rem;
  padding: 1.25rem 1.5rem; box-shadow: 0 .5rem 1.5rem rgba(30, 34, 40, .07);
}

/* Médiation : bloc définition sur fond coloré */
.definition-card { border-left: 6px solid var(--bs-primary); }
.definition-card .definition { border-left: 0; padding-left: 0; }

/* Diagnostic : 3 pictos alignés à la même hauteur */
.hero-points li { display: block; font-weight: 600; font-size: .95rem; line-height: 1.3; }

/* Accueil : bandeau de réassurance */
.reassurance li { display: flex; align-items: center; gap: .85rem; line-height: 1.3; }
@media (max-width: 575.98px) { .reassurance li { flex-direction: column; text-align: center; gap: .5rem; } }
/* Le thème remplit les boutons de l'en-tête quand il devient collant : on garde le contour */
.navbar .nav-account.btn-outline-primary:not(:hover):not(:focus) {
  background: transparent !important; color: var(--bs-primary) !important; border-color: var(--bs-primary) !important;
}

/* Bandeau d'appel à l'action final sur fond corail */
.cta-corail { border: 0; border-radius: 1rem; }
.cta-corail::before, .cta-corail::after {
  content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .1); pointer-events: none;
}
.cta-corail::before { width: 18rem; height: 18rem; top: -7rem; right: -5rem; }
.cta-corail::after { width: 12rem; height: 12rem; bottom: -5rem; left: -3rem; }
.cta-corail .lead, .cta-corail p { color: rgba(255, 255, 255, .92) !important; }
.cta-corail a:not(.btn) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cta-corail .btn-white:hover { background: #fff; color: var(--bs-primary) !important; transform: translateY(-2px); }

/* Accueil : cartes « Pourquoi faire confiance » alignées */
.confiance .card-body { padding: 2.5rem 2.25rem; }
@media (min-width: 768px) { .confiance h3 { min-height: 2.6em; display: flex; align-items: flex-start; } }

/* Accueil : bloc témoignage */
.temoignage { border-radius: 1rem; border: 0; }
.temoignage figure img { display: block; margin: 0 auto; }
.cta-corail::before, .cta-corail::after { z-index: 0; }
.cta-corail .card-body { z-index: 1; }
@media (max-width: 575.98px) { .cta-corail::before { width: 11rem; height: 11rem; top: -4rem; right: -4rem; } .cta-corail::after { width: 8rem; height: 8rem; } }

/* Accueil : bandeau des protections juridiques partenaires */
.partenaires .logo-card { border-radius: .8rem; min-height: 7rem; }
.partenaires .logo-card img { max-width: 100%; max-height: 3.4rem; width: auto; height: auto; }

/* Accueil : avis Google en carrousel */
.avis-card { border-radius: 1rem; }
.avis-card .ratings { width: 5.2rem; height: 1rem; font-size: 1rem; }
.avis-source { font-size: .8rem; font-weight: 600; color: #60697b; white-space: nowrap; }
.avis-source i { color: #4285f4; font-size: 1rem; vertical-align: -2px; }
.avis-card blockquote { font-style: normal; }
.avis-card blockquote:before { display: none; }
.avis-google .swiper-slide { height: auto; }

/* Avis Google : flèches de défilement bien visibles, hors des cartes */
.avis-google { position: relative; }
.swiper-container.avis-google .swiper-navigation .swiper-button {
  width: 3rem; height: 3rem; background: var(--bs-primary); color: #fff;
  box-shadow: 0 .4rem 1.2rem rgba(30, 34, 40, .15); opacity: 1;
}
.swiper-container.avis-google .swiper-navigation .swiper-button:hover { background: #e9705c; color: #fff; }
.swiper-container.avis-google .swiper-navigation .swiper-button:after { font-size: 1.5rem; }
.swiper-container.avis-google .swiper-navigation .swiper-button.swiper-button-prev { left: -1.6rem; }
.swiper-container.avis-google .swiper-navigation .swiper-button.swiper-button-next { right: -1.6rem; }
.swiper-container.avis-google .swiper-navigation .swiper-button.swiper-button-disabled { opacity: .35; }
@media (max-width: 767.98px) {
  .swiper-container.avis-google .swiper-navigation .swiper-button { width: 2.4rem; height: 2.4rem; }
  .swiper-container.avis-google .swiper-navigation .swiper-button.swiper-button-prev { left: -.5rem; }
  .swiper-container.avis-google .swiper-navigation .swiper-button.swiper-button-next { right: -.5rem; }
}