/* ==========================================================================
   Evolution Diver – styles complémentaires (refonte SEO 2026)
   Chargé après style.css. Ne pas modifier style.css (thème).
   ========================================================================== */

/* Accessibilité */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; background: #0473db; color: #fff; padding: 8px 16px; }
.skip-link:focus { left: 8px; top: 8px; color: #fff; }

/* Hero (slider accueil) : lisibilité + responsive */
.swiper-slider-4 .swiper-slide[data-slide-bg],
.swiper-slider-4 .swiper-slide.has-hero-img { position: relative; }
.swiper-slider-4 .swiper-slide[data-slide-bg]::before,
.swiper-slider-4 .swiper-slide.has-hero-img::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0, 12, 32, .74) 0%, rgba(0, 12, 32, .52) 45%, rgba(0, 12, 32, .22) 100%); }
.swiper-slider-4 .swiper-slide-caption { position: relative; z-index: 2; }
/* Image du hero : une vraie <img> (voir app/pages/home.php) posée en fond de la diapositive */
.swiper-slider-4 .hero-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.swiper-slider-4 .swiper-title-1 { color: #fff; font-size: clamp(28px, 3.6vw, 56px); line-height: 1.12; text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
.swiper-slider-4 .swiper-title-2 { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.5; max-width: 560px; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); margin-top: 18px; }
/* Le titre ne doit jamais passer sous la barre de navigation (header en position absolue sur le slider) */
@media (min-width: 992px) { .swiper-slider-4 .swiper-slide { padding-top: 190px; } }
@media (min-width: 1600px) { .swiper-slider-4 .swiper-slide { padding-top: 210px; } }
@media (max-width: 991.98px) { .swiper-slider-4 .swiper-slide { padding-top: 72px; } .swiper-slider-4 .swiper-slide-caption { padding-top: 24px; padding-bottom: 56px; } }
@media (max-width: 575px) { .swiper-slider-4 .swiper-title-1 { font-size: 24px; } .swiper-slider-4 .swiper-title-2 { font-size: 15px; margin-top: 12px; } }

/* Sélecteur de langue */
.lang-switch img { border-radius: 50%; width: 30px; height: 30px; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .35); opacity: .8; transition: opacity .2s, box-shadow .2s; }
.lang-switch:hover img { opacity: 1; }
.lang-switch.is-current img { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, .45); }

/* Bloc intro accueil */
.home-intro-text p { max-width: 900px; }
.home-intro-text p + p { margin-top: 14px; }

/* Bloc "SEO" sites (accueil) : fond blanc opaque, texte sombre */
.seo-text { color: #151515; background: #fff; border-radius: 10px; padding: 16px 20px; line-height: 1.9; box-shadow: 0 8px 30px rgba(0, 0, 0, .25); }
.seo-text a { color: #0b3d6e; text-decoration: underline; text-underline-offset: 3px; }
.seo-text a:hover { color: #0473db; }

/* Compteurs sur image de fond : texte blanc (les balises ne sont plus des h2/h6) */
.context-dark .counter-modern-number, .context-dark .counter-modern-title { color: #fff; }
.context-dark .counter-modern-number { text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }

/* (ancien bloc) */
.seo-box { color: #111; background: #fff; border-radius: 10px; padding: 18px 22px; max-width: 760px; }
.seo-box-list { list-style: none; padding: 0; margin: 10px 0; columns: 2; column-gap: 24px; }
.seo-box-list li { break-inside: avoid; margin-bottom: 4px; }
.seo-box-list a { color: #0473db; }
@media (max-width: 575px) { .seo-box-list { columns: 1; } }

/* CTA texte */
.cta-inline { font-size: 15px; }

/* Encart CTA (non utilisé par défaut) */
.cta-box { margin-top: 36px; padding: 24px; border-radius: 10px; background: #f3f7fb; border: 1px solid #dfe8f1; text-align: center; }
.cta-box-text { margin-bottom: 14px; }
.cta-box-buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta-box-buttons .button { margin: 0; }

/* Bouton WhatsApp flottant */
.whatsapp-float { position: fixed; right: 18px; bottom: 18px; z-index: 1050; display: flex; align-items: center; gap: 8px; background: #25d366; color: #fff; border-radius: 999px; padding: 10px 16px 10px 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); font-weight: 600; text-decoration: none; transition: transform .2s; }
.whatsapp-float:hover, .whatsapp-float:focus { color: #fff; transform: translateY(-2px); }
.whatsapp-float .icon { font-size: 26px; line-height: 1; }
@media (max-width: 575px) { .whatsapp-float-label { display: none; } .whatsapp-float { padding: 10px 12px; } }

/* Tableaux fiches / tarifs / comparatif */
.table-info-sheet th { width: 32%; white-space: nowrap; }
.table-info-sheet .price, .table-prices .price { color: #0473db; font-weight: 600; }
.table-compare th, .table-compare td, .table-prices th, .table-prices td { vertical-align: middle; font-size: 15px; }
@media (max-width: 767px) {
  .table-info-sheet th { width: auto; white-space: normal; }
  .table-info-sheet th, .table-info-sheet td { display: block; width: 100%; border-top: 0; }
  .table-info-sheet th { background: #f3f7fb; padding-bottom: 4px; }
  .table-info-sheet td { padding-top: 4px; }
  .table-info-sheet tr { display: block; border-top: 1px solid #dee2e6; }
}

/* Tags spécialités */
.list-inline-tags { list-style: none; padding: 0; margin: 12px -4px 0; display: flex; flex-wrap: wrap; }
.list-inline-tags li { margin: 4px; }
.list-inline-tags .tag { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid #cfdbe6; color: #0473db; font-size: 14px; }
.list-inline-tags .tag:hover { background: #0473db; color: #fff; }

/* Cartes sites : meta */
.post-classic-meta { margin-top: 6px; font-size: 14px; color: #6b6b6b; }

/* Avis */
.rating-badge { display: inline-block; padding: 18px 30px; border-radius: 12px; background: #f3f7fb; }
.rating-stars { color: #f5b301; font-size: 34px; letter-spacing: 4px; }
.rating-text { margin: 6px 0 0; font-weight: 600; }

/* Équipe */
.team-photo { width: 249px; height: 249px; border-radius: 50%; object-fit: cover; object-position: center; }
.team-creative-status { color: #0473db; font-weight: 600; margin-bottom: 8px; }

/* Guide / FAQ */
.guide-body h2 { margin-top: 32px; font-size: 26px; }
.guide-body h2:first-child { margin-top: 0; }
.guide-body ul { padding-left: 20px; }
.guide-body li + li { margin-top: 6px; }
.faq .card-body p { margin: 0; }

/* Bandeau interne */
.breadcrumbs-custom-subtitle { margin-top: 10px; max-width: 760px; opacity: .9; }
@media (max-width: 767px) { .breadcrumbs-custom-title { font-size: 26px; line-height: 1.25; } }

/* Footer */
.img_footer { width: 100%; max-width: 70px; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.footer-tagline { margin-top: 18px; font-size: 14px; opacity: .8; }

/* Galerie : bouton loupe sans image intérieure */
.thumbnail-classic-button .button { min-width: 48px; min-height: 48px; }

/* Le thème applique « * + img { margin-top: 30px } ». Dans une balise <picture>, le <img> est
   précédé d'un <source> : la règle s'appliquait donc à TOUTES nos images, ajoutant 30 px au-dessus.
   Un <source> n'affiche rien, il ne doit pas compter comme un élément précédent. */
picture > source + img { margin-top: 0; }

/* Images responsives par défaut dans les articles */
.post-modern-figure img, .post-modern-figure picture img { width: 100%; height: auto; border-radius: 6px; }
picture { display: contents; }

/* Contenu visible même si le JS d'animation ne s'exécute pas (SEO / LCP) */
.wow { visibility: visible; }

/* Drapeaux côte à côte dans l'en-tête mobile des pages internes */
@media (max-width: 768px) {
  .lang-switch-container_bis { display: flex !important; gap: 8px; align-items: center; margin-left: auto; margin-right: 10px; }
}

/* Le thème masque la page (.page { opacity: 0 }) et ne la révèle qu'une fois TOUTES les images
   chargées, via son écran de chargement. Cet écran est désactivé (config 'preloader' => false)
   car il retardait fortement l'affichage sur mobile : la page doit donc être visible d'emblée. */
.page { opacity: 1; }

/* Carrousels : avant leur initialisation par le JS, toutes les diapositives sont empilées,
   ce qui provoque un gros décalage de mise en page (CLS) au moment où le script s'exécute.
   On n'affiche que la première tant que le carrousel n'est pas prêt. */
.swiper-slider:not(.swiper-container-initialized) .swiper-slide:not(:first-child),
.owl-carousel:not(.owl-loaded) > *:not(:first-child) { display: none; }
/* Owl masque complètement le carrousel tant qu'il n'est pas initialisé (display:none) :
   la colonne n'occupe alors aucune hauteur, puis tout se décale d'un coup. On affiche
   la première diapositive dès le départ pour que la hauteur soit réservée. */
.owl-carousel:not(.owl-loaded) { display: block; }

/* Sur mobile, la barre de navigation passe en position fixe : le thème ajoute alors
   « padding-top: 56px » sur .page, mais seulement une fois son script exécuté — d'où un
   saut de toute la page (CLS). On réserve la hauteur dès le premier affichage. */
@media (max-width: 991.98px) { .has-navbar .page { padding-top: 56px; } }

/* Contraste : le thème pose #777 sur fond clair, soit 4,47:1 — juste sous le minimum WCAG AA (4,5:1).
   Un cran plus sombre (#6b6b6b, 5,1:1) suffit ; la différence est imperceptible à l'œil. */
body,
.box-info-modern,
.card-corporate .collapse,
.contacts-classic a, .contacts-classic a:focus, .contacts-classic a:active,
.breadcrumbs-custom-path a, .breadcrumbs-custom-path a:active, .breadcrumbs-custom-path a:focus { color: #6b6b6b; }
/* Gris trop clair du thème sur fond blanc (2,5:1) */
.box-info-modern-link { color: #6b6b6b; }
/* Pied de page sombre : le texte doit être clair, pas gris foncé */
.footer-modern p.rights, .footer-modern .copyright-year { color: #a9b4c1; }
/* Le lien de crédit est blanc sur ce gris clair : trop peu de contraste avec le texte
   qui l'entoure pour être repérable à la seule couleur. On le souligne. */
.footer-modern p.rights a { text-decoration: underline; text-underline-offset: 3px; }
/* Bleu des liens de contenu : #0473db tombe à 4,2:1 sur les panneaux bleu clair du thème.
   Un ton plus soutenu (#0466c4) repasse au-dessus de 4,5:1 sans changer l'identité visuelle.
   Ciblé sur les liens de texte : la navigation, le pied de page et les boutons gardent le bleu d'origine. */
main p a:not(.button), .card-body a:not(.button), .guide-body a:not(.button),
.cta-inline a, .seo-text a, .list-inline-tags .tag, .post-classic-meta a, .form-check-label a { color: #0466c4; }
/* Un lien dans un paragraphe doit rester reconnaissable autrement que par sa couleur */
main p a:not(.button), .card-body a:not(.button), .guide-body a:not(.button), .cta-inline a,
.form-check-label a, .breadcrumbs-custom-subtitle a { text-decoration: underline; text-underline-offset: 3px; }
.list-inline-tags .tag:hover { color: #fff; }

/* Sur l'accueil, les drapeaux vivent dans la bande du haut (.rd-navbar-aside-outer), que le thème
   masque dès que la barre se fige au défilement — on se retrouvait alors sans sélecteur de langue.
   On place donc un second jeu dans la barre elle-même, affiché uniquement à ce moment-là, sinon
   les drapeaux apparaîtraient en double. Le thème duplique la barre pour l'animer : les règles
   doivent couvrir l'original figé (--is-stuck) comme sa copie (--is-clone).
   L'espacement du menu passe de 42 à 28 px dans cet état : les huit entrées occupaient la largeur
   utile à 1 px près, il n'y avait pas la place pour les drapeaux sans faire passer « Contact »
   à la ligne. L'écart reste confortable et ne concerne que la barre figée de l'accueil :
   les pages internes ont un autre gabarit d'en-tête, où les drapeaux restent visibles. */
.lang-switch-container_stuck { display: none; }

.rd-navbar-creative.rd-navbar-static.rd-navbar--is-stuck .lang-switch-container_stuck,
.rd-navbar-creative.rd-navbar-static.rd-navbar--is-clone .lang-switch-container_stuck {
  display: flex;
  gap: 10px;
  align-items: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.rd-navbar-creative.rd-navbar-static.rd-navbar--is-stuck .rd-navbar-nav,
.rd-navbar-creative.rd-navbar-static.rd-navbar--is-clone .rd-navbar-nav { padding-right: 86px; }

.rd-navbar-creative.rd-navbar-static.rd-navbar--is-stuck .rd-navbar-nav > li + li,
.rd-navbar-creative.rd-navbar-static.rd-navbar--is-clone .rd-navbar-nav > li + li { margin-left: 28px; }