/*
Theme Name: OceanWP Child Theme
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme. Sample child theme.
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* =========================================================================
   SOMMAIRE
   1. Variables globales
   2. Base (reset, body, container)
   3. Typographie (titres)
   4. Responsive global
   5. Composants réutilisables
      5.1 Header
      5.2 Footer
      5.3 Bandeau d'accueil version 1
      5.4 Bandeau d'accueil version 2 
      5.5 Barre de stats
      5.6 Hub de navigation
      5.7 Hub de navigation type blog 
      5.8 Sommaire
      5.9 Panel de navigation (auteur / newsletter)
      5.10 CTA
      5.11 ACCORDEON
      5.12 LISTE A PUCES
      5.13 TABLEAU
      5.14 INSERTION D'IMAGE
      5.15 LIGHTBOX
      5.16 CARTES INFOS
      5.17 ENCARTS CONSEILS
      5.18 CARTES PRODUITS
      5.19 VERDICT CHOIX AFFILIATION
      5.20 FAQ
      5.21 POUR ALLER PLUS LOIN
      5.22 CARTE AUTEUR
      5.23 DERNIER ARTICLE
      5.24 CATEGORIES SOUS FORMES DE CARTES A CLIQUER
      5.25 HERO GENERIQUE
      5.26 VIDEOS
      5.27 COMPARATIFS PHARES
      5.28 BANDEAU EEAT

   6. Pages spécifiques
      6.2 Page "en construction"
   7. Utilitaires
   ========================================================================= */

/* ===================== 1. VARIABLES GLOBALES ===================== */

:root {
  --primary:       #3ba493;
  --primary-dark:  #2f8f7f;
  --primary-light: #e8f7f4;
  --text:          #000000;
  --muted:         #6b7a7a;
  --soft:          #f3fbf9;
  --border:        rgba(59, 164, 147, 0.18);
  --star:          #f4a261;
  --bg-soft:       #f5f1ec;
  --card-bg:       #EBEBEB;
  --vert:          #3ba493;
  --vert-bg:       #e8f7f4;
  --or:            #d4aa48;
  --green-dark:    #2f8f7f;
  --green-light:   #e8f7f4;

  --h2-primary-bg:     #4CA294;
  --h2-primary-text:   #E7E2DE;
  --h2-secondary-bg:   #E7E2DE;
  --h2-secondary-text: #000000;

  --h3-primary-bg:     #A5C9BA;
  --h3-primary-text:   #EBEBEB;
  --h3-secondary-bg:   #E7E2DE;
  --h3-secondary-text: #000000;

  --font-body:       'Roboto', sans-serif;

  --fs-base:         18px;
  --fs-base-tablet:  18px;
  --fs-base-mobile:  17px;

  --fs-h1:        clamp(26px, 3vw, 42px);
  --fs-h1-tablet: clamp(24px, 4vw, 36px);
  --fs-h1-mobile: clamp(22px, 6vw, 30px);
  --fw-h1:        800;
  --lh-h1:        1.2;

  --fs-h2:        42px;
  --fs-h2-tablet: 36px;
  --fs-h2-mobile: 30px;
  --fw-h2:        700;
  --lh-h2:        1.2;

  --fs-h3:        30px;
  --fs-h3-tablet: 26px;
  --fs-h3-mobile: 24px;
  --fw-h3:        600;
  --lh-h3:        1.3;

  --fs-h4:        24px;
  --fs-h4-mobile: 22px;
  --fw-h4:        600;
  --lh-h4:        1.4;

  --container-max: 1200px;
  --gutter:        clamp(20px, 5vw, 80px);
}

/* ===================== 2. BASE (RESET / BODY / CONTAINER) ===================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:             var(--font-body) !important;
  font-size:               18px !important;
  line-height:             1.6;
  color:                   var(--text) !important;
  background-color:        var(--card-bg) !important;
  margin:                  0;
  padding:                 0;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  margin-top: 0;
  margin-bottom: 1em;
  font-size: 18px !important;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--primary-dark);
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

.container,
.wp-block-group__inner-container,
.site-content .container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  width: 100%;
}

/* ===================== 3. TYPOGRAPHIE — TITRES ===================== */

/* --- Base --- */

h1, h2, h3, h4, h5, h6,
.theme-heading,
.entry-title,
.widget-title {
  font-family: var(--font-body) !important;
  margin: 0 0 0.5em 0 !important;
  line-height: inherit !important;
}

/* Elementor hérite désormais des couleurs du parent */
.elementor-heading-title {
  font-family: var(--font-body) !important;
  color: inherit !important;
}

h1,
.elementor-widget-heading h1.elementor-heading-title {
  font-size: var(--fs-h1) !important;
  font-weight: var(--fw-h1) !important;
  line-height: var(--lh-h1) !important;
  letter-spacing: -0.028em !important;
}

h2,
.elementor-widget-heading h2.elementor-heading-title {
  font-size: var(--fs-h2) !important;
  font-weight: var(--fw-h2) !important;
  line-height: var(--lh-h2) !important;
  letter-spacing: -1px !important;
}

h3,
.elementor-widget-heading h3.elementor-heading-title {
  font-size: var(--fs-h3) !important;
  font-weight: var(--fw-h3) !important;
  line-height: var(--lh-h3) !important;
}

h4,
.elementor-widget-heading h4.elementor-heading-title {
  font-size: var(--fs-h4) !important;
  font-weight: var(--fw-h4) !important;
  line-height: var(--lh-h4) !important;
}

/* --- Variantes colorées --- */

h2.h2-primary,
.elementor-widget-heading h2.h2-primary.elementor-heading-title {
  background: none !important;
  color: var(--primary-dark) !important;
  font-weight: 800 !important;
  padding: 0 0 22px 0 !important;
  margin-bottom: 32px !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  display: block !important;
  width: 100%;
  text-align: center;
  position: relative;
}

/* Soulignement dégradé, court et centré — remplace l'ancien border-bottom plein */
h2.h2-primary::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #4CA294 25%, #2f8f7f 50%, #4CA294 75%, transparent);
}

/* Icône/emoji en tête de titre : légère respiration, taille cohérente */
h2.h2-primary .h2-icon {
  display: inline-block;
  margin-right: 10px;
  font-size: 0.85em;
  vertical-align: -0.05em;
}

/* --- Variante alignée à gauche (si besoin sur d'autres pages) --- */
h2.h2-primary.left {
  text-align: left;
}
h2.h2-primary.left::after {
  left: 0;
  transform: none;
}

@media (max-width: 768px) {
  h2.h2-primary {
    padding-bottom: 18px !important;
    margin-bottom: 24px !important;
  }
  h2.h2-primary::after {
    width: 64px;
    height: 2.5px;
  }
}

h2.h2-secondary,
.elementor-widget-heading h2.h2-secondary.elementor-heading-title {
  background-color: var(--h2-secondary-bg) !important;
  color: var(--h2-secondary-text) !important;
  padding: 0.25em 0.5em !important;
  border-radius: 4px !important;
  display: inline-block !important;
}

h3.h3-primary,
.elementor-widget-heading h3.h3-primary.elementor-heading-title {
  background-color: var(--h3-primary-bg) !important;
  color: var(--h3-primary-text) !important;
  padding: 0.2em 0.45em !important;
  border-radius: 4px !important;
  display: inline-block !important;
}

h3.h3-secondary,
.elementor-widget-heading h3.h3-secondary.elementor-heading-title {
  background-color: var(--h3-secondary-bg) !important;
  color: var(--h3-secondary-text) !important;
  padding: 0.2em 0.45em !important;
  border-radius: 4px !important;
  display: inline-block !important;
}

h3.h3-card {
  background-color: transparent !important;
  color: var(--text) !important;
  padding: 0 !important;
}

/* ===================== 4. RESPONSIVE GLOBAL ===================== */

@media (max-width: 1024px) {

  body {
    font-size: var(--fs-base-tablet) !important;
  }

  h1,
  .elementor-widget-heading h1.elementor-heading-title {
    font-size: var(--fs-h1-tablet) !important;
  }

  h2,
  .elementor-widget-heading h2.elementor-heading-title {
    font-size: var(--fs-h2-tablet) !important;
  }

  h3,
  .elementor-widget-heading h3.elementor-heading-title {
    font-size: var(--fs-h3-tablet) !important;
  }
}

@media (max-width: 768px) {

  body {
    font-size: var(--fs-base-mobile) !important;
  }

  h1,
  .elementor-widget-heading h1.elementor-heading-title {
    font-size: var(--fs-h1-mobile) !important;
  }

  h2,
  .elementor-widget-heading h2.elementor-heading-title {
    font-size: var(--fs-h2-mobile) !important;
  }

  h3,
  .elementor-widget-heading h3.elementor-heading-title {
    font-size: var(--fs-h3-mobile) !important;
  }

  h4,
  .elementor-widget-heading h4.elementor-heading-title {
    font-size: var(--fs-h4-mobile) !important;
  }

  .container,
  .wp-block-group__inner-container,
  .site-content .container {
    padding-inline: 24px;
  }
}

/* =========================================================================
   5. COMPOSANTS RÉUTILISABLES
   (utilisés sur plusieurs pages du site : header, footer, panel)
   ========================================================================= */

/* ===================== 5.1 HEADER ===================== */

.site-header {
  width: calc(100% - 40px);
  max-width: 1840px;

  margin: 16px auto 0;
  border-radius: 18px;

  background: rgba(255,255,255,0.85);

  box-shadow:
    0 10px 40px rgba(0,0,0,0.08);

  border: 1px solid rgba(255,255,255,0.6);
}

.site-header-inner {
  max-width: 1400px;
  width: 100%;

  margin: 0 auto;
  padding: 16px 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
}


.site-header.scrolled {
  background: rgba(235, 235, 235, 0.95);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.06),
    0 12px 32px rgba(0,0,0,0.06);
}

/* --- Logo --- */
.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity 0.18s ease;
}
.header-logo:hover { opacity: 0.85; }

.header-logo .logo-img {
  height: 80px !important;
  width: auto !important;
  max-width: 220px !important;
  display: block !important;
}

.header-logo .logo-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #2c3d38;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.header-logo .logo-text span { color: #3ba493; }

/* --- Navigation --- */
.site-nav {
  display: flex;
  align-items: center;
  gap: 20px; 
}

/* Liens simples */
.site-nav > a {
  position: relative;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 18px; 
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #3a4a46;
  transition: color 0.18s ease;
}


.site-nav > a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 1.5px;
  background: #3ba493;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
.site-nav > a:hover::after,
.site-nav > a.active::after { transform: scaleX(1); }

/* --- Header right --- */
.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-cta-ghost {
  padding: 8px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #3a4a46;
  border: 1px solid rgba(0, 0, 0, 0.12);
  transition: all 0.18s ease;
}
.site-cta-ghost:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.18);
}

.site-cta {
  padding: 8px 16px;
  border-radius: 12px;
  text-decoration: none;
  white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: transparent;
  color: #1a2320;
  border: 1px solid rgba(0,0,0,0.1);
  transition: all 0.2s ease;
}
.site-cta:hover {
  background: #DDEBE6;
  color: #2F7F6D;
  border-color: #A5C9BA;
  transform: translateY(-1px);
}

.site-search {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: #3a4a46;
  text-decoration: none;
  border-radius: 10px;
  font-size: 18px;
  transition: all .2s ease;
}

.site-search:hover {
  background: rgba(255,255,255,.35);
  transform: translateY(-1px);
}

/* --- Burger --- */
.site-burger {
  display: none;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.05);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
}
.site-burger span {
  display: block;
  width: 15px;
  height: 1.5px;
  background: #1a2320;
  border-radius: 2px;
  transition: all 0.2s ease;
}

/* --- Dropdowns --- */
.nav-dropdown {
  position: relative;
}

.nav-dropdown__trigger {
  display: flex;
  align-items: center;
}

/* Lien cliquable vers la page catégorie */
.nav-dropdown__label {
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #3a4a46;
  padding: 10px 4px 10px 16px;
  transition: color 0.18s ease;
  position: relative;
}
.nav-dropdown__label:hover { color: #111; }

.nav-dropdown__label::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 0;
  bottom: 4px;
  height: 1.5px;
  background: #3ba493;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
.nav-dropdown__label:hover::after,
.nav-dropdown.open .nav-dropdown__label::after { transform: scaleX(1); }

/* Bouton flèche */
.nav-dropdown__arrow-btn {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 8px 10px 8px 2px;
  color: #9ca3af;
  transition: color 0.18s ease;
}
.nav-dropdown__arrow-btn:hover { color: #3a4a46; }

.nav-dropdown__arrow {
  font-size: 11px;
  display: inline-block;
  transition: transform 0.2s ease;
  line-height: 1;
}
.nav-dropdown.open .nav-dropdown__arrow { transform: rotate(180deg); }

/* Menu déroulant */

.nav-dropdown__menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 320px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
  padding: 6px;
  z-index: 100;
  flex-direction: column;
}

.nav-dropdown.open .nav-dropdown__menu {
  display: flex;
}

.nav-dropdown__menu a {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #3a4a46;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.nav-dropdown__menu a:hover {
  background: rgba(76, 162, 148, 0.08);
  color: #2f7f6d;
}

/* --- Header : mobile --- */
@media (max-width: 768px) {
  .site-header {
    height: auto;
    padding: 10px 16px;
  }
  .site-header-inner { flex-wrap: wrap; }

    .header-logo .logo-img {
    height: 55px !important;
    width: auto !important;
    max-width: 160px !important;
  }

  .header-logo .logo-text { font-size: 14px; }

  .site-nav,
  .header-right {
    display: none;
    width: 100%;
  }
  .site-burger { display: flex; }

  .site-burger.open ~ .site-nav,
  .site-burger.open ~ .header-right { display: flex; }

  .site-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 0;
    border-top: 1px solid rgba(0,0,0,0.07);
    margin-top: 10px;
  }
  .site-nav > a {
    width: 100%;
    padding: 10px 8px;
    font-size: 15px;
  }
  .header-right {
    padding: 8px 0 4px;
    justify-content: flex-start;
  }

  .site-burger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .site-burger.open span:nth-child(2) { opacity: 0; }
  .site-burger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  .nav-dropdown { width: 100%; }

  .nav-dropdown__trigger {
    width: 100%;
    justify-content: space-between;
  }
  .nav-dropdown__label {
    padding: 10px 8px;
    font-size: 15px;
    flex: 1;
  }
  .nav-dropdown__arrow-btn {
    padding: 10px 8px;
  }
  .nav-dropdown__menu {
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 0 4px 12px;
    background: transparent;
  }
  .nav-dropdown__menu a {
    font-size: 14px;
    color: #6b7280;
    padding: 7px 8px;
  }
}

/* ===================== 5.2 FOOTER ===================== */

.site-footer {
  width: calc(100% - 40px);
  max-width: 1840px;
  margin: 40px auto 16px;
  border-radius: 18px;
  background: #A5C9BA;
  color: #2c3d38;
  padding: 70px 0 30px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
  border: 1px solid rgba(255,255,255,0.6);
  overflow: hidden; /* pour que le border-radius s'applique proprement au contenu interne */
}

.site-footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Partie haute */

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(44,61,56,.15);
}

/* Logo + présentation */

.footer-brand {
 background: rgba(255,255,255,0.35);
 border: 1px solid rgba(255,255,255,0.5);
 border-radius: 20px;
 padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.footer-logo {
  display: inline-block;
  margin-bottom: 20px;
}

.footer-logo img {
  width: 180px;
  height: auto;
  display: block;
}

.footer-description {
  max-width: 340px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.8;
  color: #3a4a46;
}

/* Colonnes */

.footer-columns {
  display: flex;
  gap: 80px;
}

.footer-column h4 {
  font-size: 18px;
  margin-bottom: 18px;
  color: #1f2e2a;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column li {
  margin-bottom: 12px;
}

.footer-column a {
  text-decoration: none;
  color: #3a4a46;
  transition: all .2s ease;
}

.footer-column a:hover {
  color: #2F7F6D;
  padding-left: 4px;
}

/* Réseaux sociaux */

.footer-social {
  display: flex;
  gap: 14px;
  margin-top: 20px;
}

.footer-social a {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2c3d38;
  font-size: 18px;
  text-decoration: none;
  transition: all .2s ease;
}

.footer-social a:hover {
  background: #fff;
  transform: translateY(-2px);
}

/* Partie basse */

.footer-bottom {
  background: #ffffff;

  margin-top: 40px;
  padding: 18px 24px;

  text-align: center;

  font-size: 14px;
  color: #2c3d38;

  border-radius: 12px;
}

.footer-bottom a {
  color: inherit;
  text-decoration: none;
}

.footer-bottom a:hover {
  color: #2F7F6D;
}

/* --- Footer : mobile --- */

@media (max-width: 768px) {

  .site-footer {
    margin-top: 50px;
    padding: 40px 0 20px;
  }

  .footer-top {
    flex-direction: column;
    gap: 25px;
    padding-bottom: 25px;
  }

  .footer-brand {
    padding: 20px;
  }

  .footer-logo img {
    width: 120px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
  }

  .footer-description {
    font-size: 14px;
    line-height: 1.6;
  }

  .footer-columns {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }

  .footer-column h4 {
    margin-bottom: 10px;
  }

  .footer-column li {
    margin-bottom: 6px;
  }

  .footer-column ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
	
	.footer-column:not(:first-child) {
    position: relative;
    padding-top: 18px;
    margin-top: 18px;
  }

  .footer-column:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 1px;
    background: rgba(255,255,255,0.7);
  }

  .footer-social {
    margin-top: 12px;
  }

  .footer-bottom {
    margin-top: 25px;
    padding: 14px 18px;
    font-size: 13px;
  }

}

/* ===================== 5.3 BANDEAU ACCUEIL  (CROC-HERO-WRAPPER) ===================== */

.croc-hero-wrapper {
  max-width: 100%;
  margin: 20px 0 20px;
  padding: 0;
  /* FIX: empêche le débordement horizontal */
  overflow: hidden;
  box-sizing: border-box;
}

/* --- Fil d'Ariane --- */
.croc-breadcrumb {
width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 max(16px, 10%);
  box-sizing: border-box;
}

.croc-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
}

.croc-breadcrumb li {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #9ca3af;
}

.croc-breadcrumb li + li::before {
  content: '›';
  color: #d1d5db;
  font-size: 15px;
  line-height: 1;
}

.croc-breadcrumb a {
  color: #4b5563;
  text-decoration: none;
  transition: color 0.15s;
}

.croc-breadcrumb a:hover {
  color: #2f7f6d;
}

.croc-breadcrumb li[aria-current="page"] {
  color: #2f7f6d;
  font-weight: 600;
}


/* ===================== 5.4 BANDEAU ACCUEIL  (HERO) ===================== */

.croc-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns:
    minmax(0, 620px)
    minmax(0, 480px);
  justify-content: center;
  align-items: center;
  justify-items: center;
  gap: 48px;
  padding: 24px 10%;
  border-radius: 0;
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-top: 1px solid rgba(76,162,148,0.30);
  border-bottom: 1px solid rgba(76,162,148,0.30);
  background:
    radial-gradient(circle at top left,
    rgba(76,162,148,0.10),
    transparent 35%),
    linear-gradient(
      180deg,
      #f8fbfa 0%,
      #f4f7f6 100%
    );
}

/* Texture */
.croc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(76,162,148,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.4;
  pointer-events: none;
}

/* Glow */
.croc-hero::after {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  right: -120px;
  top: -120px;
  background: radial-gradient(circle, rgba(76,162,148,0.14), transparent 70%);
  pointer-events: none;
}

/*  TEXTE */

.croc-hero__text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding-top: 0px;
  width: 100%;
  max-width: 620px;
  /* FIX: évite que le texte déborde de sa colonne */
  min-width: 0;
  box-sizing: border-box;
}

/* Badge intro */
.croc-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(76,162,148,0.24);
  color: #2f6b5e;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 28px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

/* TITRE  */
.croc-hero__title {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-size: clamp(28px, 3.6vw, 44px) !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
  max-width: 18ch;
  color: #111827 !important;
  text-wrap: balance;
  /* FIX: empêche le titre de sortir du flux */
  word-break: break-word;
}

/* Highlight */
.hl-primary {
  display: inline;
  color: #2f6b5e;
  padding: 4px 12px 6px;
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(76,162,148,0.16),
    rgba(76,162,148,0.26)
  );
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.55);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/*  DESCRIPTION  */
.croc-hero__desc {
  max-width: 620px;
  font-size: 18px;
  line-height: 1.65;
  color: #5b6472;
  margin-bottom: 34px;
}

/*  ACTIONS  */
.croc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}

/* CTA primary */
.croc-hero__btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 15px 28px;
  border-radius: 16px;
  color: #fff;
  font-size: 15px;
  font-weight: 650;
  background: linear-gradient(180deg, #58b3a4 0%, #4CA294 100%);
  box-shadow: 0 12px 28px rgba(76,162,148,0.24);
  transition: 0.22s ease;
  white-space: nowrap;
}

.croc-hero__btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(76,162,148,0.32);
}

/* CTA ghost */
.croc-hero__btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 14px 24px;
  border-radius: 16px;
  border: 1px solid rgba(76,162,148,0.24);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px);
  color: #2f6b5e;
  font-size: 15px;
  font-weight: 600;
  transition: 0.18s ease;
}

.croc-hero__btn-ghost:hover {
  background: rgba(76,162,148,0.08);
  transform: translateY(-1px);
}

/*  IMAGE COLUMN  */
.croc-hero__image {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  /* FIX: évite le débordement de la colonne image */
  box-sizing: border-box;
  min-width: 0;
}

/*  PORTRAIT WRAP  */
.croc-hero__portrait-wrap {
  position: relative;
  /* FIX: largeur fluide au lieu de fixe */
  width: min(430px, 100%);
  animation: floatHero 6s ease-in-out infinite;
}

/* Deco behind */
.croc-hero__portrait-deco {
  position: absolute;
  inset: 0;
  transform: rotate(-2deg) translate(12px, 12px);
  border-radius: 28px;
  border: 1px solid rgba(76,162,148,0.30);
  background: linear-gradient(180deg, rgba(255,255,255,0.35), transparent);
  z-index: 0;
}

/* IMAGE */
.croc-hero__portrait {
  position: relative;
  /* FIX: largeur fluide + hauteur auto proportionnelle */
  width: min(430px, 100%);
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 28px;
  overflow: hidden;
  background: #A5C9BA;
  box-shadow: 0 30px 60px rgba(17,24,39,0.12),
              0 10px 24px rgba(76,162,148,0.10);
  z-index: 1;
}

.croc-hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.croc-hero__portrait:hover img {
  transform: scale(1.05);
}

/*  OVERLAY GLASS  */
.croc-hero__overlay {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(76,162,148,0.18);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: #2f6b5e;
}

/*  BADGES SOUS IMAGE  */
.croc-hero__image-badges {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  width: 100%;
}

.croc-hero__badge-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(76,162,148,0.18);
  backdrop-filter: blur(10px);
  font-size: 13.5px;
  font-weight: 600;
  color: #2f6b5e;
  box-shadow: 0 8px 20px rgba(0,0,0,0.04);
  white-space: nowrap;
  transition: transform 0.2s ease, background 0.2s ease;
}

.croc-hero__badge-item:hover {
  transform: translateY(-2px);
  background: rgba(76,162,148,0.08);
}

/*  FLOAT  */
@keyframes floatHero {
  0%,100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

/*  RESPONSIVE  */
@media (max-width: 768px) {

  .croc-hero {
    grid-template-columns: 1fr;
    gap: 32px;
    /* FIX: padding cohérent avec le ratio 10%/80%, avec un plancher lisible en px */
    padding: 20px max(16px, 10%) 24px;
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
  }

	.croc-hero-wrapper {
  margin: 10px 0;
}

  .croc-hero__text {
    width: 100%;
    max-width: 100%;
  }

  .croc-hero__title {
    max-width: 100%;
    /* FIX: taille minimum lisible sur petit écran */
    font-size: clamp(24px, 6vw, 36px) !important;
  }

  .croc-hero__desc {
    font-size: 17px;
    margin-bottom: 24px;
  }

  .croc-hero__portrait,
  .croc-hero__portrait-wrap {
    /* FIX: largeur fluide bornée, plus de px fixe */
    width: min(300px, 80vw);
  }

  /* FIX: la hauteur suit la largeur via aspect-ratio (défini plus haut) */

  .croc-hero__image {
    padding: 0 8px;
    width: 100%;
  }

  .croc-hero__badge-item {
    font-size: 12.5px;
    padding: 8px 12px;
  }
}

/* ===================== 5.5 BARRE DE STATS ===================== */

.croc-stats-bar {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  justify-content:       center;
  gap:                   0;
  background:            #ffffff;
  border-radius:         16px;
  border:                1px solid rgba(76, 162, 148, 0.2);
  overflow:              hidden;
  margin:                0 0 40px;
}
div.croc-stats-bar {
  display:               grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  flex-direction:        unset !important;
  flex-wrap:             unset !important;
}
.croc-stat {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  padding:        20px 16px;
  border-right:   3px solid rgba(76, 162, 148, 0.3);
}
.croc-stat:last-child {
  border-right: none;
}
.croc-stat__icon {
  width:           60px;
  height:          60px;
  border-radius:   10px;
  background:      #A5C9BA;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       40px;
  margin-bottom:   10px;
}
.croc-stat__value {
  font-size:     22px;
  font-weight:   800;
  color:         #111827;
  line-height:   1;
  margin-bottom: 4px;
}
.croc-stat__value span {
  font-size:   17px;
  font-weight: 500;
  color:       #4CA294;
}
/* FIX: label réduit de 18px → 17px */
.croc-stat__label {
  font-size:   17px;
  color:       #4b5563;
  line-height: 1.4;
  font-weight: 600;
}
/* FIX: sub déjà à 17px, inchangé */
.croc-stat__sub {
  font-size:  17px;
  color:      #6b7280;
  margin-top: 3px;
  font-style: italic;
}

/*  RESPONSIVE*/
@media (max-width: 768px) {
  .croc-stats-bar,
  div.croc-stats-bar {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .croc-stat:nth-child(even) {
    border-right: none;
  }
  .croc-stat {
    border-bottom: 3px solid rgba(76, 162, 148, 0.3);
  }
  .croc-stat:nth-last-child(-n+2) {
    border-bottom: none;
  }
}

@media (max-width: 480px) {
  .croc-stats-bar,
  div.croc-stats-bar {
    grid-template-columns: 1fr !important;
    border-radius: 12px;
  }
  .croc-stat {
    border-right:  none !important;
    border-bottom: 3px solid rgba(76, 162, 148, 0.3) !important;
    padding:       16px;
  }
  .croc-stat:last-child {
    border-bottom: none !important;
  }
  /* FIX: textes plafonnés à 17px sur mobile */
  .croc-stat__value {
    font-size: 20px;
  }
  .croc-stat__label,
  .croc-stat__sub,
  .croc-stat__value span {
    font-size: 15px;
  }
	
	.croc-stat__icon {
  width:     48px;
  height:    48px;
  font-size: 28px;
}
}


/* ===================== 5.6 HUB de navigation (multi filtres) ===================== */


.hub-section {
  margin: 0 0 64px;
}

.hub-intro-text {
  text-align:    center;
  font-size:     18px;
  color:         #111827 !important;
  margin-bottom: 24px;
  font-style:    italic;
}

/*  FILTRES PILLS  */
.hub-filters {
  display:         flex;
  gap:             8px;
  flex-wrap:       wrap;
  justify-content: center;
  margin-bottom:   28px;
}

.hub-pill {
  padding:       7px 16px;
  border-radius: 30px;
  border:        1px solid rgba(59, 164, 147, 0.18);
  font-size:     14px;
  font-family:   'Roboto', sans-serif;
  background:    #ffffff;
  color:         #6b7a7a;
  cursor:        pointer;
  transition:    all 0.15s;
}

.hub-pill:hover {
  border-color: #4CA294;
  color:        #2f8f7f;
}

.hub-pill.active {
  background:   #4CA294 !important;
  color:        #ffffff !important;
  border-color: #4CA294 !important;
  font-weight:  600;
}

/* Accessibilité clavier — focus visible sur les filtres du hub */
.hub-pill:focus {
  outline: none;
}

.hub-pill:focus-visible {
  outline: 3px solid #4CA294;
  outline-offset: 2px;
}

/*  GRILLE DE CARTES  */
/* flex + justify-content:center pour un centrage réel peu importe le nombre
   de cartes (avant, grid gardait ses colonnes fixes et collait les cartes
   à gauche quand il y en avait moins que le nombre de colonnes) */
.hub-grid {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  max-width:       900px;
  margin:          0 auto 40px;
  gap:             14px;
}

.hub-card {
  flex:      1 1 230px;
  max-width: 260px;
}

@media (min-width: 769px) {
  .hub-grid {
    max-width: 1700px;
  }

  .hub-card {
    /* 4 cartes par ligne, gap déduit du calcul */
    flex:      0 1 calc((100% - 3 * 14px) / 4);
    max-width: calc((100% - 3 * 14px) / 4);
    padding:   16px 14px 14px;
  }

  .hub-card p {
    font-size: 14px !important;
  }
}

/*  CARTE  */
.hub-card {
  background:      #ffffff !important;
  border:          1px solid rgba(59, 164, 147, 0.14);
  border-radius:   12px;
  padding:         20px 18px 16px;
  cursor:          pointer;
  box-shadow:      0 1px 4px rgba(17, 24, 39, 0.04);
  transition:      border-color 0.15s, box-shadow 0.2s, transform 0.15s;
  text-decoration: none;
  display:         flex;
  flex-direction:  column;
  gap:             10px;
}

.hub-card:hover {
  border-color: #4CA294;
  box-shadow:   0 8px 26px rgba(59, 164, 147, 0.16);
  transform:    translateY(-2px);
}

.hub-card.hidden {
  display: none;
}

/*  BADGES CATÉGORIE  */
.hub-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  font-size:      11px !important;
  font-weight:    600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding:        3px 9px;
  border-radius:  4px;
  width:          fit-content;
}

.badge-age {
  background: #e8f7f4;
  color:      #2f8f7f;
}

.badge-sante {
  background: #A5C9BA;
  color:      #2f6b5e;
}

.badge-race {
  background: #E7E2DE !important;
  color:      #000000 !important;
}

.badge-pratique {
  background: #e8f7f4 !important;
  color:      #2f8f7f !important;
}

/*  ICÔNE (boîte carrée, une seule définition — plus de conflit) */
.hub-card-icon {
  width:           44px;
  height:          44px;
  border-radius:   10px;
  background:      #4CA294;
  box-shadow:      0 4px 10px rgba(76, 162, 148, 0.28);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       22px;
  line-height:     1;
  margin:          2px 0 0;
  transition:      transform 0.15s;
}

.hub-card:hover .hub-card-icon {
  transform: scale(1.06);
}

/*  TITRE (une seule définition — plus de conflit) */
.hub-card h3 {
  font-size:   17px !important;
  font-weight: 600 !important;
  color:       #000000 !important;
  margin:      0 !important;
  line-height: 1.3 !important;
  font-family: 'Roboto', sans-serif !important;
}

.hub-card p {
  font-size:   18px !important;
  color:       #6b7a7a !important;
  margin:      0 !important;
  line-height: 1.55;
  flex:        1;
}

.hub-card-arrow {
  font-size:   18px;
  color:       #3ba493;
  align-self:  flex-end;
  margin-top:  6px;
  transition:  transform 0.15s;
}

.hub-card:hover .hub-card-arrow {
  transform: translateX(4px);
}

/*  CTA BAR  */
.hub-cta-bar {
  text-align: center;
  margin-top: 8px;
}

.hub-cta-bar p {
  font-size:     18px;
  color:         #111827 !important;
  margin-bottom: 14px;
}

.hub-cta-bar a.cta-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  text-decoration: none;
  color:           #ffffff !important;
  background:      #4CA294;
  font-size:       15px;
  font-weight:     600;
  padding:         12px 24px;
  border-radius:   12px;
  transition:      background 0.18s ease, transform 0.18s ease;
}

.hub-cta-bar a.cta-btn:hover {
  background: #3a8a7e;
  color:      #ffffff !important;
  transform:  translateY(-1px);
}

/*  TITRE HUB  */
#spokes {
  color: #111827 !important;
}

.hub-card.hub-card--hidden {
  display: none !important;
}

.hub-show-more-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 24px;
}

.hub-show-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: transparent;
  border: 2px solid #4CA294;
  color: #4CA294;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.hub-show-more-btn:hover {
  background: #4CA294;
  color: #ffffff;
}

.hub-show-more-btn.hub-show-more-btn--hidden {
  display: none;
}

/* RESPONSIVE  */
@media (max-width: 768px) {
  .hub-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .hub-intro-text {
    display: none;
  }

  .hub-card {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
  }

  .hub-card-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
    margin: 0;
    flex-shrink: 0;
  }

  .hub-card h3 {
    font-size: 14px !important;
  }

  /* Masquée en mobile pour garder une carte compacte */
  .hub-card p {
    display: none;
  }

  .hub-card-arrow {
    margin-top: 0;
    margin-left: auto;
    align-self: center;
  }

  .hub-badge {
    display: none;
  }
}

@media (max-width: 480px) {
  .hub-card {
    padding: 10px 14px;
  }

  .hub-card-icon {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}

/* ===================== 5.7 HUB DE NAVIGATION VERSION BLOG  ===================== */
 
/* Toolbar */
.bloghub-toolbar {
    display:flex;
    justify-content:flex-end;
    align-items:center;
    margin-bottom:18px;
    font-size:18px;
    color:#64716e;
    font-weight:500;
}
 
/* Message vide */
.bloghub-empty {
    display:none;
    padding:45px;
    text-align:center;
    border-radius:18px;
    background:#f8f8f8;
    color:#64716e;
    font-size:18px;
}
 
/* Animation cartes */
.bloghub-card.hidden {
    display:none;
    opacity:0;
    transform:translateY(10px);
    scale:.98;
}
 
/* Section / largeur globale */
.bloghub-section {
    max-width:1200px;
    margin:60px auto;
    width:100%;
}
 
/* Recherche */
.bloghub-search {
    position:relative;
    margin-bottom:24px;
}
.bloghub-search input {
    width:100%;
    height:54px;
    border:1px solid #dce7e5;
    border-radius:30px;
    padding:0 25px 0 55px;
    font-size:16px;
    font-family:Roboto, sans-serif;
}
.bloghub-search-icon {
    position:absolute;
    left:25px;
    top:50%;
    transform:translateY(-50%);
    color:#6c8580;
    font-size:22px;
}
 
/* Pills */
.bloghub-filters {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
    margin-bottom:40px;
}
.bloghub-pill {
    border:none;
    background:#f6f4f1;
    padding:12px 26px;
    border-radius:30px;
    cursor:pointer;
    font-family:Roboto, sans-serif;
    transition:.25s;
	font-size: 14px;
}
.bloghub-pill.active {
    background:#4CA294;
    color:white;
}
 
/* Cards */
.bloghub-grid {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap:25px;
}
.bloghub-card {
    background:white;
    border-radius:20px;
    padding:0;
    text-decoration:none;
    color:#243331;
    box-shadow:0 8px 25px rgba(0,0,0,.05);
    transition:.25s;
    display:block;
    overflow:hidden;
}
.bloghub-card:hover {
    transform:translateY(-5px);
}
/* IMAGE À LA UNE */
.bloghub-card-image {
    width:100%;
    aspect-ratio: 16 / 10;
    overflow:hidden;
}
.bloghub-card-image img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .4s ease;
}
.bloghub-card:hover .bloghub-card-image img {
    transform:scale(1.06);
}
/* CONTENU TEXTE */
.bloghub-card-content {
    padding:22px 28px 28px;
}
.bloghub-tag {
    font-size:14px;
    color:#4CA294;
    font-weight:700;
}
.bloghub-card h3 {
    margin:15px 0 10px;
}
.bloghub-card p {
    display:none;
}
.bloghub-card.hidden {
    display:none;
}
 
/* Bouton "Afficher plus" */
.bloghub-loadmore-wrap {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}
.bloghub-loadmore {
    display: none; /* affiché en JS uniquement si besoin */
    align-items: center;
    gap: 8px;
    background: #4CA294;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
    border: none;
    padding: 13px 28px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.bloghub-loadmore:hover {
    background: #3a8a7e;
    transform: translateY(-1px);
}
 
@media (max-width: 767px) {
    .bloghub-card h3 {
        font-size: var(--fs-h3-mobile);
        line-height: 1.2;
    }
	/* Masquer les pills */
    .bloghub-filters {
        display: none;
    }
}
/* ===================== 5.8 SOMMAIRE ===================== */

.sommaire-crocadabra {
  background: #fff;
  border-radius: 20px;
  padding: 36px 40px;
  border: 1px solid rgba(76, 162, 148, 0.14);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.07);
  position: relative;
  overflow: hidden;
}

/* Filet décoratif en haut */
.sommaire-crocadabra::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #4CA294, #d4aa48, #4CA294);
}

.sommaire-label {
  color: #9ca7a2;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.sommaire-group {
  margin-bottom: 32px;
}
.sommaire-group:last-child {
  margin-bottom: 0;
}

/* --- Titre de groupe (par défaut = groupe principal) --- */
.sommaire-group__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: #1f3d3a;
  margin-bottom: 18px;
  font-size: 19px;
}
.sommaire-group__title::before {
  content: "";
  width: 5px;
  height: 22px;
  border-radius: 3px;
  background: linear-gradient(180deg, #4CA294, #2f8f7f);
  flex-shrink: 0;
}

.sommaire-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 640px) {
  .sommaire-grid { grid-template-columns: 1fr; }
}

/* --- Liens du groupe principal : mini cartes --- */
.sommaire-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f7fbfa;
  border: 1px solid rgba(76, 162, 148, 0.14);
  text-decoration: none;
  color: #1a2e2a;
  font-weight: 500;
  font-size: 18px;
  transition: all 0.2s ease;
}

.sommaire-link:hover {
  background: #ffffff;
  border-color: #4CA294;
  box-shadow: 0 10px 24px rgba(76, 162, 148, 0.16);
  transform: translateY(-2px);
}

.sommaire-badge {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(145deg, #57C0AE, #2f8f7f);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(47, 143, 127, 0.35);
}

/* ==========================================================
   GROUPE SECONDAIRE ("Pour aller plus loin")
   Ciblé automatiquement : 2ᵉ .sommaire-group du bloc
   ========================================================== */

.sommaire-group + .sommaire-group {
  position: relative;
  padding-top: 26px;
}

/* Séparateur fondu, plus élégant qu'une barre franche */
.sommaire-group + .sommaire-group::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(76, 162, 148, 0.4), transparent);
}

/* Titre secondaire : label discret, accent OR pour marquer "bonus" */
.sommaire-group + .sommaire-group .sommaire-group__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9a9084;
  margin-bottom: 14px;
}

.sommaire-group + .sommaire-group .sommaire-group__title::before {
  background: linear-gradient(180deg, #d4aa48, #b8892f);
}

.sommaire-list-secondary {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sommaire-link-sec {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: #3ba493;
  font-size: 18px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.sommaire-link-sec:hover {
  background: #f2f8f6;
  color: #2f8f7f;
}

@media (max-width: 768px) {
  .sommaire-crocadabra {
    padding: 26px 24px;
  }
  .sommaire-link,
  .sommaire-link-sec {
    font-size: 17px;
  }
}

/* ===================== 5.9 PANEL (auteur / newsletter) ===================== */

.crocadabra-panel.crocadabra-panel{
    --radius:22px;
    --green:#2d9d84;
    --green-dark:#25816d;
    display:flex;
    align-items:center;
    gap:2.5rem;
    padding:1.8rem;
    border:1px solid #dce7e3;
    border-radius:var(--radius);
    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #f6fbf8 100%
        );
    box-sizing:border-box;
}

.crocadabra-panel-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* Variante : auteur */
.crocadabra-panel.crocadabra-panel.crocadabra-panel--author{
    text-align:left;
}

/* Variante : newsletter */
.crocadabra-panel.crocadabra-panel.crocadabra-panel--newsletter{
    justify-content:center;
    text-align:center;
}

/* Media (image/avatar) */
.crocadabra-panel.crocadabra-panel .crocadabra-panel__media{
    flex:0 0 220px;
    align-self:stretch;
}
.crocadabra-panel.crocadabra-panel .crocadabra-panel__media img{
    display:block;
    width:100%;
    height:100%;
    min-height:200px;
    object-fit:cover;
    border-radius:
        34px
        18px
        18px
        34px;
}

/* Contenu texte */
.crocadabra-panel.crocadabra-panel .crocadabra-panel__content{
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:100%;
}

.crocadabra-panel.crocadabra-panel .crocadabra-panel__header{
    margin-bottom:1.2rem;
}
.crocadabra-panel.crocadabra-panel .crocadabra-panel__eyebrow{
    display:block;
    margin-bottom:.45rem;
    font-size:.85rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#9ca7a2;
}
.crocadabra-panel.crocadabra-panel .crocadabra-panel__title{
    margin:0;
    font-size:2.35rem;
    font-weight:800;
    line-height:1.1;
    color:#303936;
}
.crocadabra-panel.crocadabra-panel .crocadabra-panel__text{
    margin:0;
    max-width:38rem;
    font-size:18px;
    line-height:1.8;
    color:#56625d;
}
.crocadabra-panel.crocadabra-panel .crocadabra-panel__actions{
    margin-top:1.5rem;
}
.crocadabra-panel.crocadabra-panel .crocadabra-panel__button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.95rem 1.45rem;
    border-radius:10px;
    background:
        linear-gradient(
            180deg,
            #34ab90,
            #2b9179
        );
    color:#fff;
    font-weight:700;
    text-decoration:none;
    transition:.25s;
}
.crocadabra-panel.crocadabra-panel .crocadabra-panel__button:hover{
    background:
        linear-gradient(
            180deg,
            #2b9179,
            #247864
        );
}

/* Formulaire (newsletter) */
.crocadabra-panel.crocadabra-panel .crocadabra-panel__form{
    display:flex;
    justify-content:center;
    gap:.8rem;
    margin-top:1.5rem;
}
.crocadabra-panel.crocadabra-panel .crocadabra-panel__input{
    flex:1;
    min-width:260px;
    padding:.95rem 1rem;
    border:1px solid #d8e5df;
    border-radius:10px;
    background:#fff;
    font-size:1rem;
}
.crocadabra-panel.crocadabra-panel .crocadabra-panel__input:focus{
    outline:none;
    border-color:#2d9d84;
}
.crocadabra-panel.crocadabra-panel .crocadabra-panel__note{
    margin-top:1rem;
    font-size:.85rem;
    color:#8b9590;
}

/* ================= RESPONSIVE ================= */

/* --- TABLETTE : 2 colonnes conservées, cartes en style compact (comme mobile) --- */
@media (max-width: 1024px) and (min-width: 769px) {

  .crocadabra-panel-row {
    grid-template-columns: 1fr 1fr;
  }

  .crocadabra-panel.crocadabra-panel {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
    padding: 1.5rem;
  }

  .crocadabra-panel.crocadabra-panel .crocadabra-panel__media {
    flex: none;
    align-self: center;
    width: 132px;
    height: 132px;
  }

  .crocadabra-panel.crocadabra-panel .crocadabra-panel__media img {
    width: 132px;
    height: 132px;
    min-height: 0;
    border-radius: 50%;
  }

  .crocadabra-panel.crocadabra-panel .crocadabra-panel__title {
    font-size: 1.7rem;
  }

  .crocadabra-panel.crocadabra-panel .crocadabra-panel__text {
    font-size: 16px;
  }

  .crocadabra-panel.crocadabra-panel .crocadabra-panel__form {
    flex-direction: column;
  }

  .crocadabra-panel.crocadabra-panel .crocadabra-panel__input {
    min-width: 0;
    width: 100%;
  }

  .crocadabra-panel.crocadabra-panel .crocadabra-panel__button {
    width: 100%;
  }
}

/* --- MOBILE : inchangé --- */
@media (max-width:768px){

    .crocadabra-panel-row {
      grid-template-columns: 1fr;
    }

    .crocadabra-panel.crocadabra-panel{
        flex-direction:column;
        text-align:center;
        gap:1.5rem;
        padding:1.5rem;
    }
    .crocadabra-panel.crocadabra-panel .crocadabra-panel__media{
        flex:none;
        align-self:center;
        width:132px;
        height:132px;
    }
    .crocadabra-panel.crocadabra-panel .crocadabra-panel__media img{
        width:132px;
        height:132px;
        min-height:0;
        border-radius:50%;
    }
    .crocadabra-panel.crocadabra-panel .crocadabra-panel__title{
        font-size:2rem;
    }
    .crocadabra-panel.crocadabra-panel .crocadabra-panel__text{
        font-size:17px;
    }
    .crocadabra-panel.crocadabra-panel .crocadabra-panel__form{
        flex-direction:column;
    }
    .crocadabra-panel.crocadabra-panel .crocadabra-panel__input{
        min-width:0;
        width:100%;
    }
    .crocadabra-panel.crocadabra-panel .crocadabra-panel__button{
        width:100%;
    }
}



/* ===================== 5.10 CTA ===================== */

.cta-vertpremium {
  font-family: 'Roboto', sans-serif;
  font-size: 18px; 
  margin: 20px 0 20px;
}

.cta-vertpremium .cta-content {
  display: flex;
  flex-direction: column;
  gap: 16px;      
  padding: 24px;
  border-radius: 18px;
  background: linear-gradient(135deg, #3ba493, #2f8d7f);
  color: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

@media (min-width: 768px) {
  .cta-vertpremium .cta-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.cta-vertpremium .cta-text { max-width: 600px; }

.cta-vertpremium .cta-title {
  font-size: 19px;  
  font-weight: 600;
  margin: 0 0 6px;
  color: #fff;
}

.cta-vertpremium .cta-subtitle {
  font-size: 18px;  
  margin: 0;
  color: rgba(255,255,255,0.9);
  line-height: 1.5;
}

.cta-vertpremium .cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  color: #3ba493;
  font-size: 18px;  
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s ease;
  white-space: normal;
  word-break: break-word;
  text-align: center;
}

.cta-vertpremium .cta-button:hover {
  background: #e6f4f1;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
.cta-vertpremium {
    font-size: 17px;
  }

  .cta-vertpremium .cta-title {
    font-size: 18px;
  }

  .cta-vertpremium .cta-subtitle {
    font-size: 17px;
  }

  .cta-vertpremium .cta-button {
    font-size: 17px;   /* 👈 important */
    width: 100%;
    padding: 12px 14px;
  }
}
.cta-vertpremium .cta-title,
.cta-vertpremium .cta-subtitle {
  color: #ffffff !important;
}

.cta-vertpremium.cta-vertpremium--gold .cta-content {
  background: linear-gradient(135deg, #2f8d7f, #256b60);
  border: 2px solid #d4aa48;
  box-shadow: 0 12px 30px rgba(212, 170, 72, 0.25);
  position: relative;
}

.cta-vertpremium.cta-vertpremium--gold .cta-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #d4aa48, transparent);
  border-radius: 0 0 4px 4px;
}

.cta-vertpremium.cta-vertpremium--gold .cta-button {
  background: #d4aa48;
  color: #ffffff;
}

.cta-vertpremium.cta-vertpremium--gold .cta-button:hover {
  background: #c29a3d;
  transform: translateY(-2px);
}

.cta-vertpremium.cta-vertpremium--light .cta-content {
  background: #e8f7f4;
  border: 1px solid rgba(59, 164, 147, 0.25);
  box-shadow: 0 6px 16px rgba(0,0,0,0.05);
  color: #1f5c52;
}

.cta-vertpremium.cta-vertpremium--light .cta-title,
.cta-vertpremium.cta-vertpremium--light .cta-text p {
  color: #1f5c52 !important;
}

.cta-vertpremium.cta-vertpremium--light .cta-button {
  background: #3ba493;
  color: #ffffff;
}

.cta-vertpremium.cta-vertpremium--light .cta-button:hover {
  background: #2f8d7f;
  transform: translateY(-2px);
}

/* ===================== 5.11 ACCORDEON ===================== */

.acc-group {
  margin: 20px 0 20px;
}

.acc-group__label {
  font-size:      22px;
  font-weight:    700;
  color:          #4CA294;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin:         0 0 10px;
  padding:        0 4px;
}

.acc-item {
  background:    #ffffff;
  border-radius: 16px;
  border:        1px solid rgba(76, 162, 148, 0.18);
  margin-bottom: 8px;
  overflow:      hidden;
  transition:    box-shadow 0.2s;
}

.acc-item:hover {
  box-shadow: 0 4px 16px rgba(76, 162, 148, 0.1);
}

/* HEADER  */
.acc-header {
  display:     flex;
  align-items: center;
  gap:         14px;
  padding:     18px 20px;
  cursor:      pointer;
}

.acc-header__icon {
  width:           60px;
  height:          60px;
  border-radius:   10px;
  background:      #A5C9BA;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       40px;
  flex-shrink:     0;
}

.acc-header__content {
  flex: 1;
}

.acc-header__title {
  font-size:   19px !important;
  font-weight: 600 !important;
  color:       #111827 !important;
  margin:      0 0 3px !important;
  line-height: 1.3 !important;
}

.acc-header__sub {
  font-size:   18px;
  color:       #6b7280;
  margin:      0;
  line-height: 1.4;
}

.acc-toggle {
  width:           28px;
  height:          28px;
  border-radius:   50%;
  background:      rgba(76, 162, 148, 0.1);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #4CA294;
  font-size:       20px;
  font-weight:     300;
  flex-shrink:     0;
  transition:      transform 0.2s ease, background 0.2s ease;
  line-height:     1;
}

/* Accessibilité clavier — focus visible sur le header d'accordéon */
.acc-header:focus {
  outline: none;
}

.acc-header:focus-visible {
  outline: 3px solid #4CA294;
  outline-offset: -3px;
  border-radius: 16px;
}

.acc-item.open .acc-toggle {
  transform:  rotate(45deg);
  background: #4CA294;
  color:      #ffffff;
}

/* CORPS  */
.acc-body {
  display: none;
  padding: 0 20px 18px 70px;
}

.acc-item.open .acc-body {
  display: block;
}

/* Titres H3 dans le corps */
.acc-body h3 {
  background-color: #4CA294 !important;
  color:            #EBEBEB !important;
  padding:          0.2em 0.45em !important;
  border-radius:    4px !important;
  display:          inline-block !important;
  font-size:        18px !important;
  font-weight:      600 !important;
  margin:           16px 0 10px !important;
  line-height:      1.3 !important;
}

/* Texte courant */
.acc-body p {
  font-size:   18px;
  color:       #4b5563;
  margin:      0 0 14px;
  line-height: 1.65;
}

/*  LIENS DANS LE TEXTE  */
/* Liens externes inclus dans un <p> — colorisation simple, pas de bouton */
.acc-body p a {
  display:         inline !important;
  background:      none !important;
  padding:         0 !important;
  border-radius:   0 !important;
  color:           #4CA294 !important;
  font-weight:     600 !important;
  font-size:       inherit !important;
  text-decoration: underline !important;
  transition:      color 0.15s ease !important;
}

.acc-body p a:hover {
  color:      #2f8f7f !important;
  background: none !important;
}

/*  BOUTONS CTA  */
/* Liens avec classe .acc-cta-link — style bouton vert */
.acc-body .acc-cta-link {
  display:         inline-flex !important;
  align-items:     center !important;
  gap:             6px !important;
  font-size:       15px !important;
  font-weight:     500 !important;
  color:           #ffffff !important;
  background:      #4CA294 !important;
  padding:         9px 18px !important;
  border-radius:   8px !important;
  text-decoration: none !important;
  transition:      background 0.18s ease, transform 0.18s ease !important;
  margin-top:      8px !important;
}

.acc-body .acc-cta-link:hover {
  background:  #3a8a7e !important;
  color:       #ffffff !important;
  transform:   translateY(-1px) !important;
}

/*  RESPONSIVE */
@media (max-width: 768px) {
  .acc-body {
    padding: 0 16px 16px 16px;
  }

  .acc-header {
    padding: 14px 16px;
  }

  .acc-header__icon {
    width:     44px;
    height:    44px;
    font-size: 28px;
  }

  .acc-header__title {
    font-size: 17px !important;
  }

  .acc-header__sub {
    font-size: 14px;
    line-height: 1.35;
  }

  .acc-body p {
    font-size: 17px;
  }

  .acc-body h3 {
    font-size: 17px !important;
  }
}

/* ===================== 5.12 LISTE A PUCES  ===================== */

/* GLOBAL */
.list-box {
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  margin: 20px 0 40px;
}

/* TITLE */
.list-title {
  font-weight: 600;
  margin-bottom: 18px;
  color: #1f3d3a;
  display: flex;
  align-items: center;
  font-size: 18px;
}

.list-title::before {
  content: "▮▮▮";
  color: #4ca294;
  margin-right: 10px;
  font-size: 18px;
}

/* LIST */
.custom-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ITEM */
.custom-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f0f7f6; /* était #ffffff */
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #d4eae6; /* était #eee */
  box-shadow: 0 6px 14px rgba(0,0,0,0.04);
  transition: all 0.2s ease;
}

/* HOVER desktop */
@media (hover: hover) {
  .custom-list li:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.06);
    background: #e4f3f0; /* était absent, ajoute un hover visible */
  }
}

/* LIST-ICON */
.list-icon {
  color: #4ca294;
  font-size: 18px;
  margin-top: 4px;
  flex-shrink: 0;
}


/* MOBILE */
@media (max-width: 768px) {

  .list-box {
    font-size: 17px;
  }

  .list-title,
  .list-title::before {
    font-size: 17px;
  }

  .custom-list li {
    padding: 12px 14px;
    gap: 10px;
  }

  .list-icon {
    font-size: 17px;
  }
}

/* ===================== 5.13 TABLEAU   ===================== */

.table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 16px;
  -webkit-overflow-scrolling: touch;
  line-height: normal;
	margin : 20px 0 20px;
}

.table-wrap table {
  width: 100%;
  min-width: 750px;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 38px rgba(0,0,0,0.10);
  margin-bottom: 0;
  table-layout: auto;
}

.table-wrap thead {
  background: #4CA294;
  color: #fff;
}
.table-wrap th {
  padding: 16px;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.table-wrap td {
  padding: 16px;
  font-size: 18px;
  border-top: 1px solid rgba(0,0,0,0.08);
  vertical-align: middle;
  color: #1f2d2b;
}
.table-wrap tbody tr:nth-child(even) { background: #f6fbfa; }
.table-wrap tbody tr:hover { background: #e9f6f4; }
.table-wrap td:first-child { font-weight: 600; color: #1b2b29; }
.table-wrap td:first-child a,
.table-wrap td:first-child a:visited {
  color: #1b2b29 !important;
  text-decoration: none;
}
.table-wrap td:first-child a:hover {
  text-decoration: underline;
}
.table-wrap .price {
  font-weight: 700;
  font-size: 18px;
  color: #2f6f66;
}
.table-wrap .badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
  background: rgba(76, 162, 148, 0.12);
  color: #2f6f66;
  font-weight: 600;
  border: 1px solid rgba(76, 162, 148, 0.35);
}
.table-wrap .cta-affiliate {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 10px;
  background: #4CA294;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 6px 14px rgba(76, 162, 148, 0.25);
  white-space: nowrap;
}
.table-wrap .cta-affiliate:hover {
  transform: translateY(-2px);
  background: #3f8f83;
  box-shadow: 0 10px 20px rgba(76, 162, 148, 0.35);
}

.table-wrap td,
.table-wrap th {
  line-height: 1.5; 
}


@media (max-width: 768px) {

  /* On cache le tableau natif */
    .table-wrap {
    overflow-x: visible;
    border-radius: 0;
  }
  .table-wrap table {
    min-width: 0 !important;
    width: 100% !important;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
  }
  .table-wrap table,
  .table-wrap thead,
  .table-wrap tbody,
  .table-wrap tr {
    display: block;
  }
  .table-wrap thead { display: none; }

  /* Chaque ligne = une carte */
  .table-wrap tbody tr {
    background: #ffffff !important;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(76,162,148,0.15);
    margin-bottom: 14px;
  }
  .table-wrap tbody tr:hover { background: #ffffff !important; }

  /* Première cellule = header de carte */
  .table-wrap td:first-child {
    background: #4CA294;
    color: #ffffff !important;
    font-size: 17px;
    font-weight: 700;
    padding: 14px 16px;
    border-top: none;
    letter-spacing: 0.2px;
  }
	
	.table-wrap td:first-child a,
.table-wrap td:first-child a:visited {
  color: #ffffff !important;
  text-decoration: none;
}
.table-wrap td:first-child a:hover {
  text-decoration: underline;
}

  /* Cellule prix = barre mise en avant */
  .table-wrap td.price-cell {
    background: #e9f6f4;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(76,162,148,0.15);
    border-top: none;
  }
  .table-wrap td.price-cell .price {
    font-size: 24px;
    font-weight: 800;
  }

  /* Toutes les autres cellules : label + valeur sur la même ligne */
  .table-wrap td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    font-size: 17px;
    border-top: 1px solid rgba(0,0,0,0.06);
    gap: 12px;
  }

  /* Le label généré via data-label */
  .table-wrap td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #7a9e9b;
    flex-shrink: 0;
  }

  /* Badge conservé */
  .table-wrap .badge {
    font-size: 11px;
    padding: 3px 8px;
  }

  /* CTA pleine largeur */
  .table-wrap .cta-affiliate {
    display: block;
    text-align: center;
    margin: 12px 16px 14px;
    padding: 13px;
    font-size: 17px;
    box-shadow: none;
  }
  .table-wrap td:has(.cta-affiliate) {
    border-top: none;
    padding: 0;
  }
  .table-wrap td:has(.cta-affiliate)::before { display: none; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
}

/* ===================== 5.14 IMAGES   ===================== */
.infographie-wrapper {
  display: flex;
  justify-content: center;
  margin: 32px auto;
  max-width: 100%;
}

.infographie-wrapper a {
  display: block;
  cursor: zoom-in;
  max-width: 100%;
}

.img-infographie {
  width: 100% !important;
  max-width: 900px !important;
  height: auto !important;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: block;
}

.img-infographie:hover {
  transform: scale(1.01);
  box-shadow: 0 14px 40px rgba(0,0,0,0.15);
}

/* Tablette */
@media (max-width: 1024px) {
  .img-infographie {
    max-width: 100% !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .img-infographie {
    max-width: 100% !important;
    border-radius: 10px;
  }
}

/* ===================== 5.15 LIGHTBOX (nécessite lightbox.js)  ===================== */

.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  padding: 20px;
}

.lightbox-overlay.active {
  display: flex;
}

.lightbox-overlay img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  object-fit: contain;
  animation: lightboxIn 0.22s ease;
}

.lightbox-close {
  position: fixed;
  top: 20px;
  right: 24px;
  color: #fff;
  font-size: 32px;
  font-weight: 300;
  cursor: pointer;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.15s;
  background: none;
  border: none;
}

.lightbox-close:hover {
  opacity: 1;
}

@keyframes lightboxIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}


/* ===================== 5.16 CARTES INFOS   ===================== */
.cartes-infos {
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  margin: 20px 0 20px;
}

.cartes-infos__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

@media (max-width: 900px) {
  .cartes-infos {
    font-size: 17px;
  }
}

@media (max-width: 480px) {
  .cartes-infos__grid {
    gap: 14px;
  }
}

.cartes-infos__card {
  flex: 0 1 calc(25% - 15px); /* 4 cartes/ligne desktop */
  background: linear-gradient(145deg, #f7f4ef, #ffffff);
  border: 1px solid #e6ded3;
  border-radius: 18px;
  padding: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  transition: all 0.25s ease;
  min-width: 0;
  word-break: break-word;
}

@media (max-width: 900px) {
  .cartes-infos__card {
    flex-basis: calc(50% - 10px); /* 2 cartes/ligne tablette */
  }
}

@media (max-width: 480px) {
  .cartes-infos__card {
    flex-basis: 100%; /* 1 carte/ligne mobile */
  }
}

@media (hover: hover) {
  .cartes-infos__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 35px rgba(0,0,0,0.08);
  }
}

/* ICÔNE */
.cartes-infos__icon {
  width: 50px;
  height: 50px;
  background: #A5C9BA;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .cartes-infos__icon {
    font-size: 20px;
  }
}
@media (max-width: 480px) {
  .cartes-infos__icon {
    font-size: 19px;
  }
}

/* H3 */
.cartes-infos__card h3 {
  font-size: 21px !important;
  font-weight: 600;
  color: #4CA294;
  margin: 0.3em 0;
}
@media (max-width: 900px) {
  .cartes-infos__card h3 {
    font-size: 18px !important;
  }
}
@media (max-width: 480px) {
  .cartes-infos__card h3 {
    font-size: 17px !important;
  }
}

.cartes-infos__card p {
  font-size: 18px;
  color: #4b5563;
  margin: 0;
}
@media (max-width: 900px) {
  .cartes-infos__card p {
    font-size: 17px;
  }
}

.cartes-infos__card:not(.cartes-infos__card--photo)::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: #4ca294;
  border-radius: 2px;
  margin-bottom: 6px;
}

/* ===== VARIANTE PHOTO CLIQUABLE ===== */
.cartes-infos__card--photo {
  position: relative;
  text-decoration: none;
  color: inherit;
  padding: 1.4em;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 4 / 5; 
}

.cartes-infos__card--photo-top {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cartes-infos__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
  color: #4b5563;
}

.cartes-infos__list li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 2px;
}

.cartes-infos__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #4ca294;
}

/* Image en fond de carte */
.cartes-infos__card--photo-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 18px;
}

.cartes-infos__card--photo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dégradé pour garder le texte lisible sur la photo */
.cartes-infos__card--photo-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 30%, rgba(255,255,255,0) 60%);
}

@media (hover: hover) {
  .cartes-infos__card--photo:hover .cartes-infos__card--photo-img img {
    filter: brightness(0.95);
  }
}

/* ===================== 5.17 ENCART CONSEILS  ===================== */

.conseil-box {
  position: relative;
  font-size: 18px;
  line-height: 1.6;
  background: #f0f7f6;
  border: 1px solid #d7efe9;
  border-left: 5px solid #4ca294;
  border-radius: 16px;
  padding: 1.2em 1.2em 1.2em 1.4em;
  margin: 2rem 0;
  color: #2f3e3a;
}

@media (max-width: 768px) {
  .conseil-box {
    font-size: 17px;
  }
}

.conseil-icon {
  position: absolute;
  top: -12px;
  left: 16px;
  background: #fff;
  border: 2px solid #4ca294;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.conseil-box a {
  color: #4ca294;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(76,162,148,0.4);
}

.conseil-box a:hover {
  text-decoration-color: #4ca294;
}

.conseil-title {
  color: #4ca294;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===================== 5.18 CARTES DESCRIPTIVES PRODUITS ===================== */

.croc-wrapper {
  --card-bg: transparent;
}
.croc-wrapper .croc-product-card {
  background:#fff !important;
  border:1px solid var(--border);
  border-radius:12px;
  padding:20px;
  margin:20px 0 20px;
	}

.croc-wrapper .croc-product-card p{
  font-size:18px;
  line-height:1.75;
}

.croc-wrapper .croc-product-card.top{
  border:1px solid var(--vert);
  border-left:4px solid var(--or);
}

/* BADGE */
.croc-wrapper .croc-product-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background: rgba(212,170,72,0.25);
  color: #9a7000;
  border: 1px solid
	rgba(212,170,72,0.4);
  font-size:15px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  padding:5px 10px;
  border-radius:999px;
  margin-bottom:12px;
}

/* RANK */
.croc-wrapper .croc-product-rank{
  font-size:18px;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--gris);
  margin-bottom:4px;
}

/* NAME */
.croc-wrapper .croc-product-name{
  font-family:'Syne',sans-serif;
  font-size:1.35rem;
  line-height:1.25;
  color:#4CA294;
  margin-bottom:16px;
}

/* HIGHLIGHTS (résumé rapide) */
.croc-wrapper .croc-product-highlights {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1.5px solid var(--vert);
  border-radius: 12px;
  overflow: hidden;
  margin: 20px 0;
}

.croc-wrapper .croc-product-highlight {
  padding: 14px 18px;
  border-right: 1px solid rgba(59,164,147,0.2);
  border-bottom: 1px solid rgba(59,164,147,0.2);
	background: #EEF6F1 !important;
}

.croc-wrapper .croc-product-highlight:nth-child(even) {
  border-right: none;
}

.croc-wrapper .croc-product-highlight:nth-last-child(-n+2) {
  border-bottom: none;
}

.croc-wrapper .croc-product-highlight strong {
  display: block;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--gris);
  margin-bottom: 6px;
}

.croc-wrapper .croc-product-highlight span {
  font-size: 18px;
  font-weight: 500;
  color: var(--vert);
}

/* AVANTAGES / INCONVÉNIENTS */
.croc-wrapper .croc-product-cols{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin:20px 0;
}

.croc-wrapper .croc-product-plus,
.croc-product-moins{
  border-radius:10px;
  padding:16px;
}

.croc-wrapper .croc-product-plus{
  background:#EEF6F1;
}

.croc-wrapper .croc-product-moins{
  background:#FBF7F0;
}

.croc-wrapper .croc-product-plus-title,
.croc-wrapper .croc-product-moins-title{
  font-size:18px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.8px;
  margin-bottom:10px;
}

.croc-wrapper .croc-product-plus-title{
  color:var(--vert);
}

.croc-wrapper .croc-product-moins-title{
  color:var(--gris);
}

.croc-wrapper .croc-product-plus ul,
.croc-wrapper .croc-product-moins ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
  font-size:18px;
}

.croc-wrapper .croc-product-plus li::before{
  content:"✓";
  color:var(--vert);
  margin-right:8px;
  font-weight:700;
}

.croc-wrapper .croc-product-moins li::before{
  content:"–";
  color:var(--gris);
  margin-right:8px;
  font-weight:700;
}

/* VERDICT */
.croc-wrapper .croc-product-verdict{
  margin-top:18px;
  padding:16px;
  background:#A5C9BA!important;
  border-left:3px solid var(--vert)!important;
  border-radius:0 8px 8px 0;
  font-size:18px;
  line-height:1.6;
}

.croc-wrapper .croc-product-verdict strong{
  color:var(--vert);
}

/* FOOTER */
.croc-wrapper .croc-product-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--border);
}

.croc-wrapper .croc-product-prix{
  font-family:'Syne',sans-serif;
  font-size:18px;
  font-weight:700;
  color:var(--texte);
}

.croc-wrapper .croc-product-prix span{
  font-size:.15px;
  font-weight:400;
  color:var(--gris);
}

/* CTA */
.croc-wrapper .croc-product-ctas{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.croc-wrapper .croc-cta-zoomalia{
  background:#4ca294!important;
  color:#ffffff;
  padding:10px 14px;
  border-radius:10px;
  font-size:18px;
  font-weight:700;
  text-decoration:none;
}

.croc-wrapper .croc-cta-amazon{
  background: #FF9900 !important;
  color: #111111 !important;
  border:1px solid var(--vert);
  padding:10px 14px;
  border-radius:10px;
  font-size:18px;
  font-weight:700;
  text-decoration:none;
}

/* MOBILE */
@media (max-width:768px){

  .croc-wrapper .croc-product-cols{
    grid-template-columns:1fr;
  }

  /* Highlights masqués sur mobile : trop long pour l'UX */
  .croc-wrapper .croc-product-highlights {
    display: none;
  }

  .croc-wrapper .croc-product-card > p {
    display: none;
  }

  /* Listes avantages / inconvénients */
  .croc-wrapper .croc-product-plus ul,
  .croc-wrapper .croc-product-moins ul {
    font-size: 17px;
  }

  /* Titres des colonnes */
  .croc-wrapper .croc-product-plus-title,
  .croc-wrapper .croc-product-moins-title {
    font-size: 17px;
  }

  /* Verdict */
  .croc-wrapper .croc-product-verdict {
    font-size: 17px;
  }

  /* Prix : taille réduite sur mobile */
  .croc-wrapper .croc-product-prix {
    font-size: 15px;
  }

  /* CTA Zoomalia / Amazon : taille réduite sur mobile */
  .croc-wrapper .croc-cta-zoomalia,
  .croc-wrapper .croc-cta-amazon {
    font-size: 14px;
    padding: 9px 12px;
  }
}



/* ===================== 5.19 VERDICT CHOIX AFFILIATION  ===================== */

.icones-choix {
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  margin: 2.5rem 0;
}
.icones-choix__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
@media (max-width: 900px) {
  .icones-choix__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .icones-choix__grid {
    grid-template-columns: 1fr;
  }
  .icones-choix {
    font-size: 17px;
  }
}
.icones-choix__card {
  position: relative;
  background: linear-gradient(145deg, #f7f4ef, #ffffff);
  border: 1px solid #e6ded3;
  border-radius: 20px;
  padding: 1.6em 1.4em;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  transition: all 0.25s ease;
}
@media (hover: hover) {
  .icones-choix__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 35px rgba(0,0,0,0.08);
  }
}
.icones-choix__icon-wrap {
  width: 50px;
  height: 50px;
  background: #A5C9BA;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 6px;
}
.icones-choix__label {
  font-size: 0.7em;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: #6b7280;
}
.icones-choix__value {
  font-size: 20px;
  font-weight: 700;
  color: #4ca294;
  margin: 4px 0 6px 0;
}
.icones-choix__meta {
  font-size: 18px;
  color: #374151;
}
.icones-choix__meta--light {
  font-size: 0.85em;
  color: #6b7280;
}
.icones-choix__card--featured {
  border: 2px solid #4ca294;
  background: linear-gradient(145deg, #eef6f4, #ffffff);
}
.icones-choix__badge {
  position: absolute;
  top: -10px;
  left: 14px;
  background: #4ca294;
  color: white;
  font-size: 0.65em;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.icones-choix__cta-box {
  margin-top: 2rem;
  padding: 1.6em;
  border-radius: 16px;
  background: linear-gradient(135deg, #4ca294, #3b8d7f);
  text-align: center;
  color: white;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}
.icones-choix__cta-box p {
  margin-bottom: 0.8em;
  font-size: 18px;
}
.icones-choix__cta-btn {
  display: inline-block;
  background: white;
  color: #4ca294;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  text-align: center;
}
.icones-choix__cta-btn:hover {
  background: #e6f4f1;
}
		
/* CTA AFFILIATION EN CARTE */
.icones-choix__cta-pair {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}
.icones-choix__cta-affil {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 0.78em;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: filter 0.2s, transform 0.2s;
  white-space: nowrap;
}
.icones-choix__cta-affil:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

/* Zoomalia — vert */
.icones-choix__cta-affil--zoomalia {
  background: #4ca294;
  color: #ffffff;
}

/* Amazon — jaune */
.icones-choix__cta-affil--amazon {
  background: #FF9900;
  color: #111111;
}

@media (max-width: 480px) {
  .icones-choix__cta-pair {
    flex-direction: column;
  }
  .icones-choix__cta-affil {
    width: 100%;
    white-space: normal;
  }
}

===================== 5.20 FAQ ===================== */
.faq-premium {
  font-family: 'Roboto', sans-serif;
  font-size: var(--fs-base);
  line-height: 1.6;
  margin: 2.5rem 0;
}
/* ITEM */
.faq-premium .faq-item {
  border: 1px solid rgba(76,162,148,.18);
  border-left: 5px solid 
#4ca294;
  border-radius: 16px;
  margin-bottom: 16px;
  overflow: hidden;
  background: 
#f8fcfb;
  box-shadow: 0 8px 22px rgba(0,0,0,.05);
  transition: all .25s ease;
}
/* HOVER */
@media (hover: hover) {
  .faq-premium .faq-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0,0,0,.08);
  }
}
/* QUESTION (conteneur summary) */
.faq-premium .faq-question {
  cursor: pointer;
  padding: 18px 20px;
  background: 
#fbfefe;
  position: relative;
  list-style: none;
  transition: background .25s ease, color .25s ease;
}
/* TITRE H3 — sélecteur d'attribut, isolé des styles globaux du thème */
.faq-premium h3[class="faq-h3"] {
  margin: 0 !important;
  padding-right: 36px;
  font-weight: 600 !important;
  font-size: 20px !important;
  line-height: 1.4 !important;
  color: var(--text);
  transition: color .25s ease;
}
.faq-premium .faq-item[open] h3[class="faq-h3"] {
  color: 
#2f8f7f;
}
/* enlever flèche native */
.faq-premium .faq-question::-webkit-details-marker {
  display: none;
}
/* ICONE + */
.faq-premium .faq-question::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 400;
  color: var(--primary);
  transition: all .25s ease;
}
/* Accessibilité clavier — focus visible sur les questions FAQ */
.faq-premium .faq-question:focus {
  outline: none;
}
.faq-premium .faq-question:focus-visible {
  outline: 3px solid 
#4ca294;
  outline-offset: -3px;
  border-radius: 16px 16px 0 0;
}
/* ÉTAT OUVERT */
.faq-premium .faq-item[open] {
  background: 
#ffffff;
  border-color: 
#4ca294;
  box-shadow: 0 14px 35px rgba(76,162,148,.18);
}
/* Icône devient - */
.faq-premium .faq-item[open] .faq-question::after {
  content: "–";
}
/* Question ouverte : fond du summary */
.faq-premium .faq-item[open] .faq-question {
  background: 
#eef8f5;
}
/* ANSWER */
.faq-premium .faq-answer {
  padding: 0 20px 20px;
  font-size: 18px;
  color: var(--muted);
  background: 
#ffffff;
  animation: faqFade .25s ease;
}
/* ANIMATION */
@keyframes faqFade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Séparateur */
.faq-premium .faq-item[open] .faq-answer {
  border-top: 1px solid rgba(76,162,148,.15);
  margin-top: 8px;
  padding-top: 18px;
}
/* MOBILE */
@media (max-width: 768px) {
  .faq-premium {
    font-size: var(--fs-base-mobile);
  }
   .faq-premium h3[class="faq-h3"] {
    font-size: 17px !important;
  }
  .faq-premium .faq-question {
    padding: 16px;
  }
  .faq-premium .faq-answer {
    font-size: 17px;
    padding: 0 16px 16px;
  }
}

/* ===================== 5.21 EN SAVOIR PLUS ===================== */

.more-box {
  font-size: 18px;
  background: #f6fbf9;
  padding: 40px 32px;
  border-radius: 24px;
  width: min(1100px, 100%);
  margin: 80px auto 40px;
  border: 1px solid rgba(76,162,148,0.18);
  position: relative;
}

/* petit marqueur supérieur */
.more-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 40px;
  width: 80px;
  height: 5px;
  background: #4CA294;
  border-radius: 0 0 8px 8px;
}

.more-title {
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  color:#1b2f2c;
  font-size:22px;
  margin-bottom:26px;
}

.more-title .more-icon {
  color:#4CA294;
  font-size:22px;
}

/* grille ressources */

.more-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}

/* cartes */

.more-card {
  background:transparent;
  padding:16px 18px;
  font-size:18px;
  line-height:1.5;
  color:#253533;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:12px;
  border-radius:12px;
  border:1px solid rgba(76,162,148,0.18);
  transition:.25s ease;
}

/* suppression effet FAQ */
.more-card::before {
  display:none;
}

.more-card:hover {
  background:#ffffff;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  border-color:#4CA294;
  color:#4CA294;
}

.more-arrow {
  color:#4CA294;
  font-size:18px;
  flex-shrink:0;
  transition:.2s ease;
}

.more-card:hover .more-arrow {
  transform:translateX(4px);

}

/* MOBILE */

@media(max-width:768px){

  .more-box{
    padding:28px 18px;
    margin-top:60px;
    font-size: 17px;
  }

  .more-title{
    font-size:18px;
  }
	
  .more-grid{
    grid-template-columns:1fr;
  }
  .more-card{
   font-size:17px;
  }
}


/* ===================== 5.22 CARTE AUTEUR ===================== */

.author-card {
  display: flex;
  align-items: center;
  gap: 36px;
  max-width: 980px;
  margin: 60px auto 40px;
  padding: 36px 40px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: linear-gradient(145deg, #f7fbfa, #ffffff);
  border-radius: 28px;
  border: 1px solid rgba(76, 162, 148, 0.18);
  box-shadow:
    0 18px 50px rgba(0,0,0,0.07),
    0 1px 0 rgba(76,162,148,0.08) inset;
  position: relative;
  overflow: hidden;
}

/* Ligne d'accentuation supérieure — dégradé fondu au lieu de plein */
.author-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #4ca294, #d4aa48, #4ca294, transparent);
}

/* --- Photo --- */
.author-card__image {
  flex: 0 0 auto;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(76, 162, 148, 0.22);
  border: 4px solid #ffffff;
  outline: 2px solid rgba(76, 162, 148, 0.30);
  outline-offset: 2px;
}

.author-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Contenu --- */
.author-card__content {
  flex: 1 1 0;
  min-width: 0;
}

.author-card__content p {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.7;
  color: #4b5563;
}

.author-card__content p:last-child {
  margin-bottom: 0;
}

.author-card__content strong {
  color: #1e6f61;
  font-weight: 650;
}

/* --- Badge : cohérent avec .hub-badge / .cd-badge --- */
.author-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(76, 162, 148, 0.12);
  border: 1px solid rgba(76, 162, 148, 0.28);
  color: #2f7f6d;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 14px;
}

/* --- Nom --- */
.author-card__title {
  font-size: 20px;
  font-weight: 800;
  color: #111827;
  margin: 0 0 12px !important;
}

.author-card__title span {
  color: #1e6f61;
}

/* --- Mobile --- */
@media (max-width: 768px) {
  .author-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding: 28px 22px;
    border-radius: 22px;
    margin-top: 40px;
  }

  .author-card__image {
    width: 110px;
    height: 110px;
  }

  .author-card__badge {
    font-size: 12px;
  }

  .author-card__title {
    font-size: 18px;
  }

  .author-card__content p {
    font-size: 17px;
  }
}

/* ===================== 5.23 DERNIER ARTICLE CROCADABRA ===================== */

.cd-last-post{
    display:flex;
    align-items:stretch;
    gap:32px;
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
    border:1px solid rgba(76,162,148,.12);
    margin:40px 0;
    transition:.35s ease;
}

.cd-last-post:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.cd-last-post-image{
    flex:0 0 48%;
    overflow:hidden;
}

.cd-last-post-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .6s ease;
}

.cd-last-post:hover .cd-last-post-image img{
    transform:scale(1.05);
}

.cd-last-post-content{
    flex:1;
    padding:32px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.cd-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    margin-bottom:18px;
}

.cd-badge{
    background:#e8f7f4;
    color:#2f8d7f;
    padding:6px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
}

.cd-new{
    background:#4CA294;
    color:#fff;
}

.cd-reading-time{
    font-size:18px;
    color:#667085;
}

.cd-last-post h2{
    margin:0 0 14px;
    font-size:32px;
    line-height:1.2;
}

.cd-last-post h2 a{
    color:#1f2937;
    text-decoration:none;
}

.cd-last-post h2 a:hover{
    color:#4CA294;
}

.cd-last-post p{
    font-size:18px;
    line-height:1.7;
    color:#4b5563;
    margin-bottom:24px;
}

.cd-button{
    align-self:flex-start;
    background:#4CA294;
    color:#fff;
    text-decoration:none;
    padding:14px 24px;
    border-radius:999px;
    font-weight:700;
    transition:.3s ease;
}

.cd-button:hover{
    background:#2f8d7f;
    transform:translateY(-2px);
}

/* MOBILE */

@media(max-width:768px){

    .cd-last-post{
        flex-direction:column;
        gap:0;
    }

    .cd-last-post-image{
        flex:auto;
    }

    .cd-last-post-image img{
        height:260px;
    }

    .cd-last-post-content{
        padding:24px;
    }

    .cd-last-post h2{
        font-size:24px;
    }

    .cd-reading-time{
        font-size:17px;
    }

    .cd-last-post p{
        font-size:17px;
    }

}

/* ===================== 5.24 CATEGORIE SOUS FORME DE CARTES A CLIQUER  ===================== */

.categories-site{
    position:relative;
    overflow:hidden;
    /* Dégradé diagonal + halo de lumière au lieu d'un vert plat */
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.35), transparent 45%),
        radial-gradient(circle at 90% 85%, rgba(76,162,148,.25), transparent 55%),
        linear-gradient(135deg, #b6d4c8 0%, #9cc0b1 45%, #86b3a3 100%);
    border:1px solid rgba(76,162,148,.18);
    border-radius:20px;
    padding:28px;
    margin:35px 0 45px;
    /* Ombre portée douce + léger relief intérieur pour un rendu "premium" */
    box-shadow:
        0 18px 40px -12px rgba(36,50,58,.18),
        inset 0 1px 0 rgba(255,255,255,.35);
}

/* Texture fine en overlay (grain discret), sans alourdir le fond */
.categories-site::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px);
    background-size:22px 22px;
    opacity:.08;
    pointer-events:none;
}

/* Liseré lumineux en haut de la section, effet "verre" */
.categories-site::after{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
}

/* S'assure que le contenu reste au-dessus de l'overlay de texture */
.categories-site > *{
    position:relative;
    z-index:1;
}

/*TITRE */
.categories-site h2{
    margin:0 0 20px;
    font-size:24px;
    color:#24323A;
    font-weight:700;
    letter-spacing:-.01em;
}

/* GRID */
.categories-site__grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(145px,1fr));
    gap:16px;
}

/* CARTE */
.categories-site__card{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    text-decoration:none;
    background:linear-gradient(180deg, #FFFFFF 0%, #FBFDFC 100%);
    border:1px solid rgba(220,235,229,.9);
    border-radius:16px;
    min-height:105px;
    padding:16px 12px;
    transition:all .25s ease;
    box-shadow:
        0 4px 14px rgba(0,0,0,.04),
        inset 0 1px 0 rgba(255,255,255,.8);
}
.categories-site__card:hover{
    transform:translateY(-4px);
    border-color:#4CA294;
    background:#FFFFFF;
    box-shadow:
        0 12px 28px rgba(76,162,148,.18),
        inset 0 1px 0 rgba(255,255,255,.9);
}

/* ICONE */
.categories-site__icon{
    width:48px;
    height:48px;
    border-radius:50%;
    background:linear-gradient(145deg, #F4FAF8, #E6F3EE) !important;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    margin-bottom:10px;
    transition:.25s;
    box-shadow:inset 0 1px 2px rgba(255,255,255,.9), 0 1px 3px rgba(76,162,148,.12);
}
.categories-site__card:hover .categories-site__icon{
    transform:scale(1.08);
    background:linear-gradient(145deg, #E4F2EC, #D3E9E0) !important;
}

/* TITRE CARTE */
.categories-site__card h3{
    margin:0 !important;
    font-size:15px !important;
    line-height:1.3 !important;
    font-weight:400 !important;
    color:#3A7C71 !important;
    text-wrap:balance;
}

/* TABLETTE */
@media(max-width:1100px){
.categories-site__grid{
    grid-template-columns:repeat(3,1fr);
}
}

/* MOBILE */
@media(max-width:768px){
.categories-site{
    padding:20px;
    border-radius:16px;
    margin:28px 0;
}
.categories-site h2{
    font-size:22px;
    margin-bottom:16px;
}
.categories-site__grid{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}
.categories-site__card{
    min-height:100px;
    padding:14px 8px;
    border-radius:14px;
}
.categories-site__icon{
    width:38px;
    height:38px;
    font-size:18px;
    margin-bottom:8px;
}
.categories-site__card h3{
    font-size:12px !important;
    font-weight:400 !important;
    line-height:1.2 !important;
    color:#3A7C71 !important;
    word-wrap:break-word;
    overflow-wrap:break-word;
    hyphens:auto;
}
}

/* PETITS MOBILES */
@media(max-width:480px){
.categories-site{
    padding:16px;
}
.categories-site__grid{
    grid-template-columns:repeat(2,1fr);
    gap:8px;
}
.categories-site__card{
    min-height:88px;
    padding:10px 6px;
}
.categories-site__icon{
    width:32px;
    height:32px;
    font-size:16px;
    margin-bottom:6px;
}
.categories-site__card h3{
    font-size:11px !important;
    font-weight:400 !important;
    line-height:1.15 !important;
    word-wrap:break-word;
    overflow-wrap:break-word;
    hyphens:auto;
}
}
/* ===================== 5.25 HERO GÉNÉRIQUE (multi-pages) ===================== */

#accueilcrocadabra-hero{
    position:relative;
    min-height:700px;
    display:flex;
    align-items:center;
    overflow:hidden;
	border-radius: 24px;
}

/* Image */

#accueilcrocadabra-hero .accueilcrocadabra-hero-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

#accueilcrocadabra-hero .accueilcrocadabra-hero-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* Overlay */

#accueilcrocadabra-hero .accueilcrocadabra-overlay{
    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,0.95) 0%,
        rgba(255,255,255,0.82) 35%,
        rgba(255,255,255,0.20) 70%,
        rgba(255,255,255,0) 100%
    );

    z-index:1;
}

/* Contenu */

#accueilcrocadabra-hero .accueilcrocadabra-content{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:80px 40px;
}

/* Badge */

#accueilcrocadabra-hero .accueilcrocadabra-badge{

    display:inline-flex;
    align-items:center;

    padding:10px 18px;

    border-radius:999px;

    background:#F5FAF8;

    border:1px solid #D8E8E3;

    color:#3B6D67;

    font-size:1.4rem;
    font-weight:600;

    margin-bottom:28px;
}

/* Titre */

#accueilcrocadabra-hero .accueilcrocadabra-title{

    max-width:850px;
    margin:0;

    font-size:clamp(3rem,5vw,5.2rem);

    line-height:0.98;

    font-weight:800;

    letter-spacing:-0.05em;

    color:#0E2342;

    text-wrap:balance;
}

/* Surbrillance */

#accueilcrocadabra-hero .accueilcrocadabra-highlight{

    display:inline-block;

    padding:0.05em 0.22em;

    border-radius:14px;

    background:#DCEBE7;

    color:#2B746A;
}

/* Texte */

#accueilcrocadabra-hero .accueilcrocadabra-subtitle{

    max-width:650px;

    margin-top:28px;

    font-size:18px;

    line-height:1.8;

    color:#55657A;
}

/* Boutons */

#accueilcrocadabra-hero .accueilcrocadabra-buttons{

    display:flex;
    gap:16px;

    margin-top:40px;

    flex-wrap:wrap;
}

#accueilcrocadabra-hero .accueilcrocadabra-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:18px 30px;

    border-radius:14px;

    text-decoration:none;

    font-weight:700;

    transition:all .25s ease;
}

/* Bouton principal */

#accueilcrocadabra-hero .accueilcrocadabra-btn-primary{

    background:linear-gradient(
        135deg,
        #57C0AE,
        #2B746A
    );

    color:#ffffff;

    box-shadow:
    0 10px 25px rgba(43,116,106,.18);
}

#accueilcrocadabra-hero .accueilcrocadabra-btn-primary:hover{

    transform:translateY(-2px);

    box-shadow:
    0 14px 30px rgba(43,116,106,.25);
}

/* Bouton secondaire */

#accueilcrocadabra-hero .accueilcrocadabra-btn-secondary{

    background:#ffffff;

    color:#2B746A;

    border:1px solid #C9DDD9;
}

#accueilcrocadabra-hero .accueilcrocadabra-btn-secondary:hover{

    background:#F7FBFA;
}

/* Hero : mobile */

@media (max-width:768px){

    #accueilcrocadabra-hero{

        min-height:760px;

        align-items:flex-start;
    }

    #accueilcrocadabra-hero .accueilcrocadabra-overlay{

        background:linear-gradient(
            180deg,
            rgba(255,255,255,.95) 0%,
            rgba(255,255,255,.70) 45%,
            rgba(255,255,255,.15) 100%
        );
    }

    #accueilcrocadabra-hero .accueilcrocadabra-content{

        padding:40px 24px;
    }

    #accueilcrocadabra-hero .accueilcrocadabra-title{

        font-size:3rem;
    }

    #accueilcrocadabra-hero .accueilcrocadabra-subtitle{

        font-size:17px;
        line-height:1.7;
    }

    #accueilcrocadabra-hero .accueilcrocadabra-buttons{

        flex-direction:column;
    }

    #accueilcrocadabra-hero .accueilcrocadabra-btn{

        width:100%;
    }

    #accueilcrocadabra-hero .accueilcrocadabra-badge{

        font-size:0.85rem;
    }
}

/* ===================== 5.26 VIDEO ===================== */


.video-card{

    width:100%;
    margin:36px 0;
    background:#fff;
    border:1px solid #dde8e4;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

/* ---------- HEADER ---------- */

.video-card__header{
    padding:28px 34px 18px;
}

.video-card__badge{
    display:inline-block;
    background:#4ca592;
    color:#fff;
    padding:6px 12px;
    border-radius:999px;
    font-size:.82rem;
    font-weight:700;
    margin-bottom:16px;
}

.video-card__title{
    margin:0;
    color:#183b35;
    font-size:1.55rem;
    line-height:1.3;
}

.video-card__intro{
    margin-top:18px;
    color:#4d5b56;
    line-height:1.8;
    font-size:1.02rem;
}

/* ---------- VIDEO ---------- */

.video-wrapper{
	max-width:960px;
    width:100%;
    margin:0 auto 32px;
}

.video-wrapper iframe{
	width:100%;
    aspect-ratio:16/9;
    border-radius:16px;
    display:block;
}

/* ---------- FOOTER ---------- */

.video-card__footer{
    display:none;
}

/* ======= ACTIONS VIDEO == */

.video-card__actions{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:16px;
    padding:0 34px 32px;
    flex-wrap:wrap;
}

.video-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:240px;
    padding:14px 24px;
    border-radius:999px;
    text-decoration:none;
    font-weight:700;
    font-size:1.08rem;
    transition:all .25s ease;
}

/* Bouton YouTube */
.video-btn--youtube{
    background:#ffffff;
    color:#183b35;
    border:2px solid #d7e6e1;
}

.video-btn--youtube:hover{
    background:#f4faf8;
    border-color:#4ca592;
    transform:translateY(-2px);
}

/* Bouton Amazon */
.video-btn--amazon{
    background:#4ca592;
    color:#fff;
    border:2px solid #4ca592;
}

.video-btn--amazon:hover{
    background:#3d8b7b;
    border-color:#3d8b7b;
    transform:translateY(-2px);
}


/* ======= MOBILE ===== */

@media (max-width:768px){

.video-card__actions{
    padding:0 18px 20px;
    gap:12px;
}

.video-btn{
    width:100%;
    min-width:0;

}.video-card{
    margin:26px 0;
    border-radius:18px;
}

.video-card__header{
    padding:20px 18px 12px;
}

.video-wrapper{
    padding:0 8px 16px;
}

.video-wrapper iframe{
    border-radius:12px;
}

/* intro cachée */
.video-card__intro{
    display:none;
}

/* footer visible */
.video-card__footer{
    display:block;
    padding:18px;
    background:#f7fbfa;
    border-top:1px solid #e5efeb;
    font-size:1.05rem;
    line-height:1.7;
    color:#45514d;
}

.video-card__title{
    font-size:1.28rem;
}

}

/* ===================== 5.27 COMPARATIFS PHARES ===================== */
 
.cphares-section {
  margin: 0 0 64px;
}
 
.cphares-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-width: 1300px;
  margin: 0 auto;
}
 
.cphares-card {
  background:      #ffffff;
  border:          1px solid rgba(59, 164, 147, 0.14);
  border-radius:   14px;
  overflow:        hidden;
  box-shadow:      0 1px 4px rgba(17, 24, 39, 0.04);
  text-decoration: none;
  color:           inherit;
  display:         flex;
  flex-direction:  column;
  transition:      border-color 0.15s, box-shadow 0.2s, transform 0.15s;
}
 
.cphares-card:hover {
  border-color: #4CA294;
  box-shadow:   0 10px 28px rgba(59, 164, 147, 0.16);
  transform:    translateY(-3px);
}
 
.cphares-card-image {
  width:        100%;
  aspect-ratio: 16 / 10;
  overflow:     hidden;
  background:   #e8f7f4;
}
 
.cphares-card-image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.4s ease;
}
 
.cphares-card:hover .cphares-card-image img {
  transform: scale(1.06);
}
 
.cphares-card-content {
  padding:        18px 20px 20px;
  display:        flex;
  flex-direction: column;
  gap:            8px;
  flex:           1;
}
 
.cphares-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding:        3px 9px;
  border-radius:  4px;
  width:          fit-content;
}
 
.cphares-badge.badge-age      { background: #e8f7f4; color: #2f8f7f; }
.cphares-badge.badge-sante    { background: #A5C9BA; color: #2f6b5e; }
.cphares-badge.badge-race     { background: #E7E2DE; color: #000000; }
.cphares-badge.badge-pratique { background: #e8f7f4; color: #2f8f7f; }
 
.cphares-card h3 {
  font-size:   17px;
  font-weight: 600;
  color:       #000000;
  margin:      0;
  line-height: 1.3;
  font-family: 'Roboto', sans-serif;
}
 
.cphares-card p {
  font-size:   14px;
  color:       #6b7a7a;
  margin:      0;
  line-height: 1.55;
}
 
.cphares-card-arrow {
  font-size:  16px;
  color:      #3ba493;
  align-self: flex-end;
  margin-top: 4px;
  transition: transform 0.15s;
}
 
.cphares-card:hover .cphares-card-arrow {
  transform: translateX(4px);
}
 
@media (max-width: 768px) {
  .cphares-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .cphares-card h3 {
    font-size: 16px;
  }
}



/* ===================== 5.28 BANDEAU EEAT (méthodologie) ===================== */

.eeat-section {
 display:         flex;
  align-items:     stretch;
  gap:              32px;
  width:            100%;
  max-width:        100%;
  box-sizing:       border-box;
  margin:           0 0 64px;
  padding:          36px 40px;
  background:       #ffffff;
  border:           1px solid rgba(59, 164, 147, 0.14);
  border-radius:    18px;
}

/* ---------- COLONNE GAUCHE : méthodologie ---------- */
.eeat-left {
  flex: 1 1 65%;
  display: flex;
  flex-direction: column;
}

.eeat-title {
  font-size:   24px;
  font-weight: 700;
  color:       #3ba493 !important;
  margin:      0 0 6px;
  font-family: 'Roboto', sans-serif;
}

.eeat-subtitle {
  font-size:   15px;
  color:       #6b7a7a;
  margin:      0 0 28px;
}

.eeat-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.eeat-step {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.eeat-icon-wrap {
  position:        relative;
  width:           56px;
  height:          56px;
  border-radius:   50%;
  background:      #e8f7f4;
  border:          1px solid rgba(59, 164, 147, 0.25);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.eeat-icon-wrap svg {
  width:  26px;
  height: 26px;
  stroke: #2f8f7f;
}

.eeat-step-number {
  position:        absolute;
  top:             -6px;
  left:            -6px;
  width:           20px;
  height:          20px;
  border-radius:   50%;
  background:      #4CA294;
  color:           #ffffff;
  font-size:       11px;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     'Roboto', sans-serif;
}

.eeat-step h3 {
  font-size:   16px !important;
  font-weight: 600 !important;
  color:       #111827 !important;
  margin:      0 !important;
  line-height: 1.3 !important;
  font-family: 'Roboto', sans-serif !important;
}

.eeat-step p {
  font-size:   14px !important;
  color:       #6b7a7a !important;
  margin:      0 !important;
  line-height: 1.5;
}

/* ---------- COLONNE DROITE : indépendance ---------- */
.eeat-right {
  flex:            1 1 30%;
  position:        relative;
  overflow:        hidden;
  background:      #eef6f3;
  border-radius:   14px;
  padding:         28px 26px;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             12px;
}

.eeat-right-deco {
  position: absolute;
  top:      -30px;
  right:    -30px;
  width:    140px;
  height:   140px;
  opacity:  0.5;
  pointer-events: none;
}

.eeat-right h3 {
  font-size:   19px !important;
  font-weight: 700 !important;
  color:       #111827 !important;
  margin:      0 !important;
  line-height: 1.25 !important;
  font-family: 'Roboto', sans-serif !important;
  position:    relative;
  z-index:     1;
}

.eeat-right p {
  font-size:   14px !important;
  color:       #4b5a57 !important;
  margin:      0 !important;
  line-height: 1.55;
  position:    relative;
  z-index:     1;
}

.eeat-right .cta-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  text-decoration: none;
  color:           #ffffff !important;
  background:      #3ba493;
  font-size:       14px;
  font-weight:     600;
  padding:         11px 20px;
  border-radius:   999px;
  width:           fit-content;
  margin-top:      6px;
  transition:      background 0.18s ease, transform 0.18s ease;
  position:        relative;
  z-index:         1;
}

.eeat-right .cta-btn:hover {
  background: #d4aa48;
  color:      #ffffff !important;
  transform:  translateY(-1px);
}

/* VARIANTE EEAT COURTE */

.eeat-simple .eeat-left {
  justify-content: center;
}

.eeat-simple .croc-intro-text {
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #6b7a7a;
}


/* Rééquilibrage des colonnes */
.eeat-simple .eeat-left {
  flex: 1 1 65%;
}

.eeat-simple .eeat-right {
  flex: 1 1 35%;
}


/* Suppression des espaces liés aux étapes */
.eeat-simple .eeat-subtitle {
  margin-bottom: 0;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .eeat-section {
    flex-direction: column;
    padding: 28px 24px;
  }

  .eeat-steps {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* ===================== 5.29 CROC-INTRO (texte d'accroche design) ===================== */

.croc-intro {
  position: relative;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  margin: 40px 0;
  padding: 28px 32px;
  background: #FBF9F4;
  border-left: 4px solid #1F7A67;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(23, 42, 58, 0.07);
}

.croc-intro__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(31, 122, 103, 0.12);
  border-radius: 50%;
  font-size: 22px;
}

.croc-intro__text {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.75;
  color: #172A3A;
}

.croc-intro__text strong {
  color: #1F7A67;
  font-weight: 700;
}

/* Variante amber, utilisée sous "Ma méthodologie" */
.croc-intro--accent {
  border-left-color: #E8A33D;
}

.croc-intro--accent .croc-intro__icon {
  background: rgba(232, 163, 61, 0.18);
}

.croc-intro--accent .croc-intro__text strong {
  color: #E8A33D;
}

/* Masque le bloc intro sur mobile et tablette */
@media (max-width: 768px) {
  .croc-intro {
    display: none;
  }
}


/* ========== 5.30 BANDEAU EEAT - FIN DU BLOC ==================== */

.crocadabra-health-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;
    margin: 14px auto 0;
    padding: 8px 16px;

    font-family: Roboto, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #3f4543;

    text-align: center;
}

.crocadabra-health-note__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 17px;
    line-height: 1;
    color: #4CA294;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 767px) {

    .crocadabra-health-note {
        gap: 6px;
        padding: 8px 12px;
        font-size: 12px;
        line-height: 1.45;
    }

    .crocadabra-health-note__icon {
        font-size: 16px;
    }

}

/* =========================================================================
   6. PAGES SPÉCIFIQUES
   (styles propres à une seule page — préfixés pour éviter tout conflit)
   ========================================================================= */


/* ===================== 6.2 PAGE "EN CONSTRUCTION" ===================== */

.croc-construction {
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  line-height: 1.6;
}

.croc-construction .page {
  max-width: 760px;
  width: 100%;
  text-align: center;
}

.croc-construction .eyebrow {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15px;
  color: var(--primary-dark);
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}

.croc-construction .bowl-wrap {
  width: 132px;
  height: 132px;
  margin: 0 auto 32px;
  position: relative;
}

.croc-construction .bowl-wrap svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.croc-construction .kibble {
  animation: croc-drop 2.6s ease-in infinite;
  opacity: 0;
}
.croc-construction .kibble:nth-child(1) { animation-delay: 0s; }
.croc-construction .kibble:nth-child(2) { animation-delay: 0.55s; }
.croc-construction .kibble:nth-child(3) { animation-delay: 1.1s; }
.croc-construction .kibble:nth-child(4) { animation-delay: 1.65s; }

@keyframes croc-drop {
  0%   { transform: translateY(-46px); opacity: 0; }
  12%  { opacity: 1; }
  62%  { transform: translateY(2px); opacity: 1; }
  78%  { transform: translateY(2px); opacity: 0; }
  100% { transform: translateY(2px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .croc-construction .kibble { animation: none; opacity: 1; transform: translateY(2px); }
}

.croc-construction h1 {
  font-family: var(--font-body);
  font-weight: var(--fw-h1);
  font-size: clamp(28px, 5vw, 38px);
  line-height: var(--lh-h1);
  color: var(--text);
  margin-bottom: 16px;
  letter-spacing: -0.028em;
}

.croc-construction h1 em {
  font-style: normal;
  color: var(--primary-dark);
  font-weight: var(--fw-h1);
}

.croc-construction .subtext {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--muted);
  max-width: 460px;
  margin: 0 auto 36px;
}

.croc-construction .form-card {
  background: var(--primary-light);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 28px 24px;
  margin-bottom: 28px;
}

.croc-construction .form-card p.lead {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  color: var(--primary-dark);
  margin-bottom: 6px;
}

.croc-construction .form-card p.lead-sub {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--muted);
  margin-bottom: 20px;
}

.croc-construction form {
  display: flex;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto;
}

@media (max-width: 480px) {
  .croc-construction form { flex-direction: column; }
}

.croc-construction input[type="email"] {
  flex: 1;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  outline: none;
}

.croc-construction input[type="email"]::placeholder {
  color: #94a8a3;
}

.croc-construction input[type="email"]:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 164, 147, 0.18);
}

.croc-construction button {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 22px;
  background: var(--primary-dark);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.croc-construction button:hover {
  background: var(--or);
  color: var(--text);
}

.croc-construction button:focus-visible,
.croc-construction input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.croc-construction .form-note {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: #8a9b97;
  margin-top: 14px;
}

.croc-construction .confirm {
  display: none;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--primary-dark);
  font-weight: 700;
}

.croc-construction .divider-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  color: var(--border);
}

.croc-construction .divider-row .line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.croc-construction .divider-row span {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}

.croc-construction .explore {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.croc-construction .explore a {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--text);
  text-decoration: none;
  background: #ffffff;
  border: 1px solid var(--border);
  padding: 10px 16px;
  border-radius: 100px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.croc-construction .explore a:hover {
  border-color: var(--primary);
  color: var(--primary-dark);
}

/* =========================================================================
   7. UTILITAIRES
   ========================================================================= */

/* Affichage conditionnel desktop / mobile */
@media (max-width: 768px) {
  .intro-desktop-only {
    display: none;
  }
}