/* ==========================================================================
   Isckaa Informatique — surcharges du thème
   Chargé APRÈS style.min.css. Ne jamais modifier les fichiers du thème :
   tout ajustement maison se met ici pour survivre à une mise à jour.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Menu déroulant "Services" (desktop)
   Le thème dimensionne le déroulant comme un bloc de contenu :
   270px de large, 15px de padding, liens en 17px. Trop lourd pour un menu.
   -------------------------------------------------------------------------- */

.rd-navbar-static .rd-navbar-dropdown {
  width: auto;
  min-width: 210px;
  padding: 8px 0;
}

.rd-navbar-static .rd-navbar-dropdown .rd-dropdown-item {
  padding: 0;
}

.rd-navbar-static .rd-navbar-dropdown .rd-dropdown-link {
  display: block;
  padding: 7px 20px;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: .04em;
  white-space: nowrap;
  /* Le thème utilise #9B9B9B : 2,78:1 sur blanc, sous le minimum WCAG AA
     de 4,5:1. On repasse sur le gris foncé des titres — 16,1:1. */
  color: #212121;
  font-weight: 400;
  /* Le thème positionne le lien à left:-3px au repos et left:0 au survol,
     ce qui fait glisser le libellé. On fige la position. */
  left: 0;
}

/* Le thème affiche au survol un chevron FontAwesome en ::before, et rebascule
   le padding-left de 20px à 14px : le libellé se décale de quelques pixels.
   On neutralise le chevron (le liseré orange ci-dessous joue déjà ce rôle)
   et on verrouille le padding dans tous les états. */
.rd-navbar-static .rd-navbar-dropdown .rd-dropdown-link::before {
  display: none;
}

/* Survol : fond léger + accent orange, sans perdre le contraste.
   Le padding est répété à l'identique pour figer la géométrie. */
.rd-navbar-static .rd-navbar-dropdown .rd-dropdown-link:hover,
.rd-navbar-static .rd-navbar-dropdown .rd-dropdown-link:focus,
.rd-navbar-static .rd-navbar-dropdown .rd-dropdown-item.focus .rd-dropdown-link,
.rd-navbar-static .rd-navbar-dropdown .rd-dropdown-item.opened .rd-dropdown-link {
  padding: 7px 20px;
  left: 0;
  color: #212121;
  background: rgba(255, 106, 0, .1);
  box-shadow: inset 3px 0 0 #ff6a00;
}

/* --------------------------------------------------------------------------
   Bandeaux photo des pages services
   Photo détourée sur fond blanc, sujet calé à droite, texte à gauche.
   Chaque page ne définit que son background-image.
   -------------------------------------------------------------------------- */

.bunner-photo {
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  background-color: #ffffff;
}

/* Voile blanc côté texte pour garantir le contraste du titre */
.bunner-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.6) 45%, rgba(255,255,255,0) 72%);
}

@media (max-width: 991px) {
  /* Sur mobile le sujet passe derrière le texte : voile plus couvrant */
  .bunner-photo { background-position: 72% center; }
  .bunner-photo::after {
    background: linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.88) 60%, rgba(255,255,255,.72) 100%);
  }
}

/* --------------------------------------------------------------------------
   Mise en page éditoriale des pages services
   -------------------------------------------------------------------------- */

.art-wrap { max-width: 820px; margin: 0 auto; }

.art-wrap h2 {
  font-size: 26px;
  line-height: 1.3;
  color: #212121;
  text-transform: none;
  margin: 45px 0 15px;
  padding-bottom: 8px;
  border-bottom: 3px solid #ff6a00;
  display: inline-block;
}

.art-wrap h3 {
  font-size: 19px;
  color: #212121;
  text-transform: none;
  margin: 28px 0 10px;
}

.art-wrap p { font-size: 16px; line-height: 1.7; color: #444; margin-bottom: 14px; }

.art-wrap ul { margin: 0 0 18px 0; padding-left: 22px; list-style: none; }

.art-wrap ul li {
  font-size: 16px;
  line-height: 1.7;
  color: #444;
  margin-bottom: 8px;
  position: relative;
  padding-left: 18px;
}

.art-wrap ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff6a00;
}

.art-lead { font-size: 18px !important; line-height: 1.7 !important; color: #333 !important; }

.art-callout {
  background: #f7f7f7;
  border-left: 4px solid #ff6a00;
  padding: 18px 22px;
  margin: 28px 0;
  border-radius: 0 6px 6px 0;
}

.art-callout p:last-child { margin-bottom: 0; }

.art-cta {
  /* Même gris que le pied de page (.footer-classic) pour l'unité visuelle */
  background: #37383e;
  color: #fff;
  padding: 32px 28px;
  border-radius: 8px;
  margin-top: 50px;
  text-align: center;
}

.art-cta p { color: rgba(255,255,255,.85) !important; }
.art-cta h3 { color: #fff !important; margin-top: 0; }

.art-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: stretch;
  margin-top: 22px;
}

.art-cta-actions .button { margin: 0; }

/* Tableau simple (ex. exemples de tarifs après crédit d'impôt) */
.art-table-wrap { overflow-x: auto; margin: 22px 0 18px; }

.art-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.art-table th,
.art-table td {
  padding: 11px 14px;
  border-bottom: 1px solid #e5e5e5;
  text-align: left;
  color: #444;
}

.art-table th {
  background: #f7f7f7;
  color: #212121;
  font-weight: 700;
  white-space: nowrap;
}

.art-table td:last-child { font-weight: 700; color: #212121; white-space: nowrap; }

/* Tableau des paliers CGPS : colonnes sur grand écran, cartes empilées
   sur mobile (chaque palier devient un bloc lisible sans défilement). */
@media (max-width: 767px) {
  .art-table-paliers thead { display: none; }

  .art-table-paliers,
  .art-table-paliers tbody,
  .art-table-paliers tr,
  .art-table-paliers td {
    display: block;
    width: 100%;
  }

  .art-table-paliers tr {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
  }

  .art-table-paliers td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 10px 14px;
    white-space: normal;
    text-align: right;
  }

  .art-table-paliers td::before {
    content: attr(data-label);
    font-weight: 400;
    color: #666;
    text-align: left;
    flex-shrink: 0;
  }

  .art-table-paliers td.palier-nom {
    display: block;
    background: #212121;
    color: #ffffff;
    font-size: 16px;
    text-align: left;
    border-bottom: 3px solid #ffc107;
  }

  .art-table-paliers td.palier-nom strong { color: #ffffff; }

  .art-table-paliers td:last-child {
    font-weight: 700;
    color: #212121;
  }

  .art-table-paliers tr td:last-child { border-bottom: none; }
}

/* --------------------------------------------------------------------------
   Page Tarifs — encart explicatif des deux circuits (direct / ACCÈS SAP)
   -------------------------------------------------------------------------- */

.tarifs-note-sap {
  background: #ffffff;
  border-left: 4px solid #ff6a00;
  padding: 16px 20px;
  margin: 0 0 25px;
  border-radius: 0 6px 6px 0;
  text-align: left;
}

.tarifs-note-sap p {
  font-size: 15px;
  line-height: 1.65;
  color: #444;
  margin-bottom: 10px;
}

.tarifs-note-sap p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Page Tarifs — alignement des lignes de prix
   Le thème applique margin-left:10px aux liens des <h5> (.event-item-classic-caption
   h5 a). Les lignes avec lien se retrouvaient décalées de 10px par rapport aux
   lignes en texte simple. On remet tout à zéro.
   -------------------------------------------------------------------------- */

.event-item-classic-caption h5 a { margin-left: 0; }

/* Contraste des tarifs.
   Le thème affiche les prix en rgba(21,21,21,.5), soit un gris #8A8A8A
   effectif sur blanc : 3,45:1, sous le minimum WCAG AA de 4,5:1.
   Les liens en #1D81DE plafonnaient à 4,00:1. */

.event-item-classic-caption h5 {
  color: #3a3a3a;          /* 10,4:1 */
  opacity: 1;
}

.event-item-classic-caption h5 a {
  color: #0d65b4;          /* 5,94:1 */
  text-decoration: underline;
  text-underline-offset: 2px;
}

.event-item-classic-caption h5 a:hover,
.event-item-classic-caption h5 a:focus {
  color: #b34a00;          /* 5,39:1 — orange de marque assombri */
}

/* Le montant après crédit d'impôt : c'est l'information à retenir */
.event-item-classic-caption h5 strong {
  color: #212121;          /* 16,1:1 */
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Formulaire de contact
   -------------------------------------------------------------------------- */

.form-intro {
  font-size: 15px;
  line-height: 1.7;
  color: #444;
  margin-bottom: 22px;
  text-align: center;
}

/* « Tous les champs sont obligatoires » : sur sa propre ligne, en retrait */
.form-required-note {
  display: inline-block;
  margin-top: 4px;
  font-size: 14px;
  color: #6b6b6b;
}

/* Liste déroulante "Sujet".
   Le thème n'a pas de style de select : on reprend celui des champs texte.
   Label statique au-dessus, car le label flottant du thème chevaucherait
   la valeur sélectionnée (un select a toujours une valeur). */

.form-wrap-select { padding-top: 8px; }

.form-label-static {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #3a3a3a;
  text-align: left;   /* la section est centrée : on réaligne sur les champs */
}

.form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 60px;
  padding: 16px 48px 16px 25px;
  border: 1px solid #c4c4c4;
  border-radius: 5px;
  background-color: #fff;
  font-size: 15px;
  color: #3a3a3a;
  cursor: pointer;
  /* Chevron en SVG inline : aucune requête réseau */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 22px center;
}

.form-select:focus {
  outline: none;
  border-color: #ff6a00;
}

/* Tant qu'aucun sujet n'est choisi, le texte reste gris clair */
.form-select:invalid,
.form-select option[value=""] { color: #8a8a8a; }

.form-rgpd {
  font-size: 13px;
  line-height: 1.6;
  color: #6b6b6b;          /* 5,7:1 sur blanc */
  margin-top: 22px;
  text-align: left;
}

.form-rgpd a {
  color: #0d65b4;          /* 5,94:1 sur blanc */
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Accueil — lien en pied de tuile de service
   -------------------------------------------------------------------------- */

.box-icon-caption .box-link {
  margin-top: 12px;
  margin-bottom: 0;
}

.box-icon-caption .box-link a {
  font-size: 14px;
  font-weight: 700;
  color: #b34a00;            /* 5,39:1 sur blanc — orange de marque assombri */
  text-decoration: underline;
  text-underline-offset: 3px;
}

.box-icon-caption .box-link a:hover,
.box-icon-caption .box-link a:focus {
  color: #212121;
}

/* --------------------------------------------------------------------------
   Page Tarifs — resserrement du bloc d'introduction
   Le thème lui applique 100px de padding haut et bas. Comme ce bloc et la
   section des onglets partagent le même fond gris, ça créait deux grands
   vides : après le hero, puis avant les tarifs.
   -------------------------------------------------------------------------- */

.tarifs-intro {
  /* padding-top natif de section-lg (aligné sur la page santé) ; */
  /* seul le bas reste réduit pour éviter un vide gris avant les tarifs. */
  padding-bottom: 30px;
}

@media (max-width: 767px) {
  .tarifs-intro {
    padding-bottom: 22px;
  }
}

/* --------------------------------------------------------------------------
   Page Tarifs — panneau de comparaison des deux formules (onglet Particuliers)
   Doit accrocher l'œil : c'est l'argument commercial principal de la page.
   -------------------------------------------------------------------------- */

.sap-panel {
  background: #ffffff;
  border: 2px solid #ff6a00;
  border-radius: 10px;
  padding: 28px 26px 22px;
  margin: 0 0 30px;
  text-align: left;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .09);
}

.sap-panel-title {
  font-size: 21px;
  line-height: 1.3;
  color: #212121;
  text-transform: none;
  margin: 0 0 22px;
  text-align: center;
}

.sap-compare {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 22px;
}

.sap-option {
  flex: 1 1 220px;
  position: relative;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 20px 18px 16px;
  text-align: center;
  background: #fafafa;
}

.sap-option-best {
  border-color: #ff6a00;
  background: rgba(255, 106, 0, .06);
}

.sap-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: #ff6a00;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 11px;
  white-space: nowrap;
}

.sap-option-label {
  font-size: 13px !important;
  font-weight: 700;
  color: #212121 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 10px !important;
}

.sap-option-price {
  font-size: 34px !important;
  font-weight: 900;
  line-height: 1 !important;
  color: #212121 !important;
  margin: 0 0 4px !important;
}

.sap-option-note {
  font-size: 13px !important;
  color: #777 !important;
  margin: 0 0 14px !important;
}

.sap-option-fiscal {
  font-size: 13px !important;
  font-weight: 700;
  margin: 0 0 12px !important;
  padding: 5px 8px;
  border-radius: 4px;
}

.sap-ko { color: #8a8a8a !important; background: #efefef; }
.sap-ok { color: #b34a00 !important; background: rgba(255, 106, 0, .14); }

.sap-option-real {
  font-size: 15px !important;
  color: #444 !important;
  margin: 0 !important;
  padding-top: 12px;
  border-top: 1px solid #e2e2e2;
}

.sap-option-real strong { font-size: 20px; color: #212121; }
.sap-option-best .sap-option-real strong { color: #ff6a00; }

.sap-panel-text {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: #444 !important;
  margin: 0 0 20px !important;
}

.sap-panel-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid #ececec;
}

.sap-panel-logo { max-width: 150px; height: auto; }

.sap-panel-link {
  font-size: 14px;
  font-weight: 700;
  color: #ff6a00;
}

@media (max-width: 575px) {
  .sap-panel { padding: 24px 16px 18px; }
  .sap-panel-title { font-size: 18px; }
  .sap-compare { gap: 22px; }
  .sap-panel-footer { justify-content: center; text-align: center; }
}

/* --------------------------------------------------------------------------
   Menu déroulant en mobile (panneau burger)
   Le déroulant s'affiche en pleine largeur : on garde la lisibilité tactile
   mais on distingue visuellement les sous-entrées du niveau principal.
   -------------------------------------------------------------------------- */

.rd-navbar-fixed .rd-navbar-dropdown .rd-dropdown-link {
  font-size: 14px;
  letter-spacing: .03em;
  /* Même correctif de contraste : le panneau mobile est sombre,
     on éclaircit au lieu d'assombrir. */
  color: rgba(255, 255, 255, .92);
}

.rd-navbar-fixed .rd-navbar-dropdown .rd-dropdown-link:hover,
.rd-navbar-fixed .rd-navbar-dropdown .rd-dropdown-link:focus {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Animations (V1.9) : hero, cartes de services, FAQ en accordéon.
   Tout est en CSS pur ; les visiteurs qui préfèrent réduire les animations
   (réglage système) sont respectés via prefers-reduced-motion en fin de bloc.
   -------------------------------------------------------------------------- */

/* Hero : zoom lent type "Ken Burns" sur l'image du bandeau d'accueil. */
.section-main-bunner {
  overflow: hidden;
}

/* Pages internes (particuliers, professionnels, santé, portfolio) : bandeau
   ramené à la même hauteur que le bandeau de la page Tarifs (569 px), au lieu
   des 700 px du bandeau d'accueil. L'accueil et la vCard gardent leur taille. */
.section-main-bunner.bunner-page {
  height: auto;
  min-height: 569px;
}

.section-main-bunner.bunner-page .main-bunner-inner {
  padding-top: 20px;
  padding-bottom: 20px;
}

.main-bunner-img {
  animation: isckaa-kenburns 22s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes isckaa-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* Hero : mot rotatif du titre (Dépannage / Maintenance / Assistance). */
.mot-anime {
  display: inline-block;
  transition: opacity .4s ease, transform .4s ease;
}

.mot-anime-out {
  opacity: 0;
  transform: translateY(12px);
}

/* FAQ en accordéon : <details>/<summary>, aucun JavaScript nécessaire. */
.faq-item {
  border-bottom: 1px solid rgba(33, 33, 33, .1);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 16px 40px 16px 0;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* Pas de contour bleu au clic souris ; contour jaune visible
   uniquement en navigation clavier (accessibilité). */
.faq-item summary:focus {
  outline: none;
}

.faq-item summary:focus-visible {
  outline: 2px solid #ffc107;
  outline-offset: 2px;
}

.faq-item summary h3 {
  display: inline;
  text-transform: none;
  margin: 0;
}

/* Chevron "+" qui pivote en "×" à l'ouverture. */
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 300;
  color: #ffc107;
  transition: transform .3s ease;
}

.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq-item p {
  margin: 0;
  padding: 0 40px 16px 0;
  font-size: 16px;
  line-height: 1.6;
  color: #444;
  animation: isckaa-faq-open .35s ease;
}

@keyframes isckaa-faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Respect du réglage système "réduire les animations". */
@media (prefers-reduced-motion: reduce) {
  .main-bunner-img,
  .faq-item p {
    animation: none;
  }

  .mot-anime,
  .faq-item summary::after {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Carrousel d'avis Google (alimenté par bat/google-avis.php).
   Masqué par défaut : le script l'affiche seulement s'il reçoit des avis.
   -------------------------------------------------------------------------- */
.avis-google { display: none; }
.avis-google.is-ready { display: block; }

.avis-head {
  text-align: center;
  margin-bottom: 34px;
}

.avis-head .avis-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.avis-note-chiffre {
  font-size: 34px;
  font-weight: 700;
  color: #212121;
  line-height: 1;
}

.avis-stars {
  display: inline-flex;
  gap: 2px;
  color: #FFC107;
  font-size: 20px;
  line-height: 1;
}

.avis-note-total {
  color: #666;
  font-size: 15px;
}

.avis-note-total a { color: #666; text-decoration: underline; }
.avis-note-total a:hover { color: #FF6A00; }

/* Piste défilante */
.avis-viewport { position: relative; }

.avis-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px 2px 14px;
}
.avis-track::-webkit-scrollbar { display: none; }

.avis-card {
  scroll-snap-align: center;
  flex: 0 0 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 10px;
  padding: 26px 26px 22px;
  box-shadow: 0 6px 22px rgba(33, 33, 33, .06);
  display: flex;
  flex-direction: column;
}

@media (min-width: 576px) { .avis-card { flex-basis: calc((100% - 24px) / 2); } }
@media (min-width: 992px) { .avis-card { flex-basis: calc((100% - 48px) / 3); } }

.avis-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.avis-card .avis-stars { font-size: 17px; }

.avis-g {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.avis-text {
  color: #444;
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 20px;
  /* Limite l'aperçu à 6 lignes, uniformise la hauteur des cartes. */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.avis-auteur {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.avis-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: #FFC107;
  color: #212121;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 17px;
}

.avis-auteur-nom { display: block; font-weight: 700; color: #212121; font-size: 15px; line-height: 1.3; text-decoration: none; }
.avis-auteur-nom:hover { color: #FF6A00; }
.avis-auteur-date { display: block; color: #999; font-size: 13px; }

/* Contrôles */
.avis-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
}

.avis-arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid #e2e2e2;
  background: #fff;
  color: #212121;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avis-arrow:hover { border-color: #FFC107; color: #FF6A00; }
.avis-arrow:focus-visible { outline: 2px solid #FFC107; outline-offset: 2px; }
.avis-arrow[disabled] { opacity: .4; cursor: default; }
.avis-arrow[disabled]:hover { border-color: #e2e2e2; color: #212121; }

.avis-dots { display: flex; gap: 8px; }
.avis-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: #d9d9d9;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.avis-dot.is-active { background: #FF6A00; transform: scale(1.2); }
.avis-dot:focus-visible { outline: 2px solid #FFC107; outline-offset: 2px; }