/*
Theme Name: Divi Child
Template: Divi
Version: 1.0
*/

/* =====================================================================
   SOMMAIRE
   ---------------------------------------------------------------------
   1. TOKENS        (:root — couleurs, rayons, ombres)
   2. GLOBAL        (logo, header, titres, listes, boutons menu)
   3. BLOCS TMD     (gabarits réutilisables)
        3.1  .tmd-benefit    — split texte/image + carte preuve + colonnes Avant/Avec
        3.2  .tmd-features   — grille de modules cliquables
        3.3  .tmd-faq        — accordéon natif <details>
        3.4  .tmd-hero-cta   — double CTA + barre de preuve
        3.5  .tmd-logos      — carrousel de logos infini
        3.6  .tmd-cbenef     — « Benefits Condensed » : 3 bénéfices condensés
        3.7  .tmd-hero       — hero sombre (bandeau + titre + checklist + CTA + preuve)
        3.8  .tmd-prose      — bloc de texte éditorial (titre + paragraphes)
        3.9  .tmd-args       — 3 cartes à icônes (carré dégradé teal, radius 8)
        3.10 .tmd-split      — cartes bénéfices : tag + titre + puces + image (alternées)
        3.11 .tmd-compare    — comparaison « Avant / Avec Timed » (2 colonnes)
        3.12 .tmd-cols       — 3 colonnes de texte avec filet teal (argumentaire)
        3.13 .tmd-testimonials — témoignages clients (citation + étoiles + auteur)
        3.14 .tmd-statement  — bannière : image + grand titre (cadre arrondi clair)
   4. PAGES         (landing /timed-expert : classes .preuve-*, .V3-*, etc.)

   MailerLite : le CSS du formulaire de démo reste dans la page (module
   Code de l'embed), pas dans le thème enfant — décision validée.
   ---------------------------------------------------------------------
   Ordre imposé : tokens en premier (les variables doivent exister avant
   d'être utilisées), le spécifique en dernier.
   Règle : les couleurs de marque passent par var(--…), jamais en dur.
   Historique des changements vs archive.css : voir CHANGELOG.md
   ===================================================================== */


/* =====================================================================
   1. TOKENS
   ---------------------------------------------------------------------
   Les blocs .tmd-* redéfinissaient chacun leur propre copie de ces
   variables. Elles sont désormais centralisées ici : on change une
   couleur à un seul endroit.
   NB : plusieurs "teal" coexistent dans le site (voir CHANGELOG, point
   ouvert "4 teals"). Ils sont conservés distincts tant que tu n'as pas
   tranché — aucune couleur n'a été unifiée.
   ===================================================================== */
:root {

    /* --- Couleurs marque ------------------------------------------- */
    --tmd-navy:            #1B2A4A;   /* texte fort, titres */

    /* Teal HARMONISÉ : les 4 verts quasi identiques d'avant (#217A7E,
       #2C9DA3, #1a7d80, #347D84) sont désormais un seul teal de marque. */
    --tmd-teal:            #347D84;   /* teal unique (boutons, accents, liens) */
    --tmd-teal-hover:      #2b6a70;   /* survol : teal assombri (dérivé, ajustable) */
    --tmd-teal-brand:      #44A1AA;   /* teal de BASE de la charte — bandeau sur fond sombre */
    --tmd-teal-bright:     #26d6d6;   /* accent VIF sur fond sombre (mot « Timed » du hero) */

    --tmd-orange:          #EE9F2E;   /* orange marque (blocs .tmd-*) */
    --tmd-orange-v3:       #faba53;   /* orange landing V3 */
    --tmd-mustard:         #E0A82E;   /* CTA « moutarde » — ajuste au hex exact de ta charte si besoin */
    --tmd-mustard-hover:   #C89320;   /* survol moutarde (dérivé, plus foncé) */
    --tmd-star:            #EAB308;   /* étoiles de notation */
    --tmd-grey:            #8A93A6;   /* gris labels / traits */
    --tmd-text:            #3A4560;   /* corps de texte */

    /* --- Couleurs landing V3 (palette perso de /timed-expert) ------- */
    --tmd-v3-navy:         #1F2041;
    --tmd-v3-grey:         #7a8499;
    --tmd-v3-grey-light:   #9aa3b0;

    /* --- Fonds ----------------------------------------------------- */
    --tmd-before-bg:       #F1F1F1;   /* colonne "Avant" */
    --tmd-after-bg:        #CFE7EB;   /* colonne "Avec Timed" */
    --tmd-icon-bg:         #E8F1F1;   /* pastille icône features */
    --tmd-hero-bg:         #F4F8F8;   /* réservé features (défini, non utilisé) */
    --tmd-card-bg:         #f9f9f9;   /* grosses cartes features */
    --tmd-line:            #e8e5dd;   /* bordure fine cartes */

    /* --- Rayons / ombres ------------------------------------------- */
    --tmd-radius:          16px;
    --tmd-shadow:          0 10px 30px rgba(27,42,74,.10);

    /* --- Espacements — échelle pour les pages codées --------------- */
    /* Règle : sur les nouvelles pages, les marges/paddings passent par
       ces tokens plutôt que des px en dur. L'existant n'a pas été converti. */
    --tmd-space-2xs:       6px;
    --tmd-space-xs:        12px;
    --tmd-space-sm:        20px;
    --tmd-space-md:        32px;
    --tmd-space-lg:        56px;
    --tmd-space-xl:        96px;    /* rythme vertical entre sections */
}


/* =====================================================================
   2. GLOBAL — corrections thème (tout le site)
   ===================================================================== */

/* --- Logo : taille normale --- */
#main-header .logo_container a img,
img#logo {
    max-width: 160px !important;
    max-height: 50px !important;
    width: auto !important;
    height: auto !important;
}

/* --- Logo : taille réduite quand le header devient sticky (scroll) --- */
.et-fixed-header #main-header .logo_container a img,
.et-fixed-header img#logo {
    max-width: 130px !important;
    max-height: 40px !important;
    width: auto !important;
    height: auto !important;
}

/* --- Logo : centré sur mobile --- */
@media (max-width: 980px) {
    #main-header .logo_container {
        text-align: center;
    }
}

/* --- Titres de blog --- */
.et_pb_blog_0 .et_pb_post .entry-title,
.et_pb_blog_0 .not-found-title {
    font-size: 20px;
    font-weight: bold;
}
.entry-title h2 {
    font-size: 20px;
    font-weight: bold;
}
.et_pb_post h2 {
    font-size: 2rem;
    margin-block-end: 1rem;
    font-weight: bold;
}
.et_pb_post h3 {
    font-size: 1.5rem;
    margin-block-end: 1rem;
    font-weight: bold;
}

/* --- Rythme vertical des titres + listes --- */
h1, h2, h3, h4, h5, h6 {
    margin-top: .5rem;
    margin-bottom: 1rem;
}
li {
    margin-bottom: 8px;
}

@media (max-width: 479px) {
    .et_pb_post h2 {
        font-size: 25px;
        font-weight: bold;
        padding-bottom: 12px;
        margin-top: 20px;
    }
    .et_pb_post h3 {
        font-size: 20px;
        font-weight: bold;
        padding-bottom: 10px;
        margin-top: 15px;
    }
}

/* --- Bouton DÉMO dans le header --- */
.et_pb_menu .menu-item.btn-demo > a,
#top-menu .menu-item.btn-demo > a {
    background: var(--tmd-teal);
    color: #fff !important;
    padding: 12px 18px !important;
    border-radius: 12px;
    font-weight: 600;
    line-height: 1.2;
    display: inline-block;
}
.et_pb_menu .menu-item.btn-demo > a:hover,
.et_pb_menu .menu-item.btn-demo > a:focus {
    filter: brightness(.95);
    outline: none;
    color: white;
}
.et_mobile_menu .menu-item.btn-demo > a {
    background: var(--tmd-teal);
    color: #fff !important;
    display: block;
    margin: 12px 16px;
    padding: 14px 18px !important;
    border-radius: 12px;
    text-align: center;
}

/* --- Bouton ESSAI GRATUIT dans le header --- */
.et_pb_menu .menu-item.btn-essai > a,
#top-menu .menu-item.btn-essai > a {
    background: #fff;
    color: var(--tmd-teal) !important;
    padding: 12px 18px !important;
    border-radius: 12px;
    font-weight: 600;
    line-height: 1.2;
    border: 2px solid var(--tmd-teal);
    display: inline-block;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.et_pb_menu .menu-item.btn-essai > a:hover,
.et_pb_menu .menu-item.btn-essai > a:focus,
#top-menu .menu-item.btn-essai > a:hover,
#top-menu .menu-item.btn-essai > a:focus {
    background: rgba(52,125,132,.08);   /* teal harmonisé, léger */
    transform: translateY(-1px);
    outline: none;
}
.et_mobile_menu .menu-item.btn-essai > a {
    background: #fff;
    color: var(--tmd-teal) !important;
    border: 2px solid var(--tmd-teal);
    display: block;
    margin: 12px 16px;
    padding: 14px 18px !important;
    border-radius: 12px;
    text-align: center;
}
.et_mobile_menu .menu-item.btn-essai > a:hover,
.et_mobile_menu .menu-item.btn-essai > a:focus {
    background: rgba(52,125,132,.08);   /* teal harmonisé, léger */
    outline: none;
}


/* =====================================================================
   3. BLOCS TMD — gabarits réutilisables sur les pages produit
   ===================================================================== */

/* --- 3.1  .tmd-benefit --------------------------------------------- */
/*     Split texte/image + carte preuve + colonnes Avant / Avec Timed  */
.tmd-benefit{
  --tmd-gap:48px;               /* espacement propre à ce bloc */
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
  font-family:inherit;
  color:var(--tmd-navy);
  box-sizing:border-box;
}
.tmd-benefit *,
.tmd-benefit *::before,
.tmd-benefit *::after{box-sizing:border-box;}
.tmd-benefit p{margin:0 0 14px;padding:0;}
.tmd-benefit p:last-child{margin-bottom:0;}
.tmd-benefit strong{font-weight:700;color:var(--tmd-navy);}

/* 1. Le split texte / image */
.tmd-benefit__split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--tmd-gap);
  align-items:center;           /* règle le vide sous le texte */
}
.tmd-benefit[data-reverse="true"] .tmd-benefit__text{order:2;}
.tmd-benefit[data-reverse="true"] .tmd-benefit__media{order:1;}

.tmd-benefit__title{
  font-size:clamp(26px,2.6vw,38px);
  line-height:1.2;
  font-weight:700;
  margin:0 0 22px;
  letter-spacing:-.01em;
}
.tmd-benefit__title em{font-style:normal;color:var(--tmd-teal);}

.tmd-benefit__text p{
  font-size:17px;
  line-height:1.65;
  color:var(--tmd-text);
}

/* 2. L'image + la carte preuve */
.tmd-benefit__media{
  position:relative;
  margin:0;
}
.tmd-benefit__media img{
  display:block;
  width:100%;
  aspect-ratio:4/3;            /* même ratio sur les 3 blocs */
  object-fit:cover;
  border-radius:var(--tmd-radius);
}

.tmd-proof{
  position:absolute;
  left:-24px;                   /* mord d'un seul côté */
  bottom:24px;
  width:min(88%,420px);
  background:#fff;
  border-radius:12px;
  box-shadow:var(--tmd-shadow);
  padding:16px 20px;
}
.tmd-benefit[data-reverse="true"] .tmd-proof{
  left:auto;
  right:-24px;
}
.tmd-proof__label{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tmd-grey);
  margin:0 0 6px;
}
.tmd-proof__punch{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:10px;
  font-size:clamp(22px,2.2vw,30px);
  font-weight:800;
  line-height:1.15;
  color:var(--tmd-orange);
  margin:0;
}
.tmd-proof__punch .tmd-was{
  font-size:15px;
  font-weight:500;
  color:var(--tmd-grey);
  text-decoration:line-through;
}
.tmd-proof__punch .tmd-arrow{
  font-size:20px;
  font-weight:400;
  color:var(--tmd-orange);
}
.tmd-proof__detail{
  font-size:13.5px;
  line-height:1.5;
  color:var(--tmd-grey);
  margin:8px 0 0;
}
.tmd-proof__detail strong{color:var(--tmd-text);}

/* 3. Les deux colonnes Avant / Avec Timed */
.tmd-scenes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--tmd-gap);
  margin-top:64px;
  align-items:start;            /* hauteurs libres : le déséquilibre raconte */
}
.tmd-scene{
  border-radius:var(--tmd-radius);
  overflow:hidden;
}
.tmd-scene--before{background:var(--tmd-before-bg);}
.tmd-scene--after{background:var(--tmd-after-bg);}
.tmd-scene__head{
  text-align:center;
  font-weight:700;
  font-size:17px;
  padding:16px;
  border-bottom:1px solid rgba(27,42,74,.08);
}
.tmd-scene__body{
  padding:26px 30px;
  font-size:15.5px;
  line-height:1.6;
  color:var(--tmd-text);
}
.tmd-scene__body ul{
  list-style:none;
  margin:0 0 14px;
  padding:0;
}
.tmd-scene__body li{
  position:relative;
  padding-left:16px;
  margin-bottom:6px;
}
.tmd-scene__body li::before{
  content:"–";
  position:absolute;
  left:0;
  color:var(--tmd-grey);
}

/* 4. Mobile */
@media (max-width:980px){
  .tmd-benefit__split,
  .tmd-scenes{
    grid-template-columns:1fr;
    gap:32px;
  }
  .tmd-benefit[data-reverse="true"] .tmd-benefit__text{order:1;}
  .tmd-benefit[data-reverse="true"] .tmd-benefit__media{order:2;}
  .tmd-benefit__media{margin-bottom:40px;}
  .tmd-proof,
  .tmd-benefit[data-reverse="true"] .tmd-proof{
    position:static;
    width:100%;
    margin-top:-40px;
    left:auto;right:auto;
  }
  .tmd-scenes{margin-top:40px;}
}


/* --- 3.2  .tmd-features -------------------------------------------- */
/*     Grille de modules cliquables (3 grosses cartes + 4 petites)     */
.tmd-features{
  max-width:1140px;
  margin:0 auto;
  padding:0 20px;
  font-family:inherit;
  box-sizing:border-box;
}
.tmd-features *,
.tmd-features *::before,
.tmd-features *::after{box-sizing:border-box;}

.tmd-features__title{
  text-align:center;
  font-size:clamp(24px,2.4vw,32px);
  font-weight:700;
  color:var(--tmd-navy);
  margin:0 0 8px;
  letter-spacing:-.01em;
}
.tmd-features__sub{
  text-align:center;
  font-size:16px;
  color:var(--tmd-text);
  margin:0 0 40px;
}

/* Rangée du haut : 3 grosses cartes */
.tmd-features__hero{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-bottom:22px;
}
.tmd-feat--big{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  background:var(--tmd-card-bg);
  border:1px solid transparent;
  border-radius:16px;
  padding:30px 28px;
  text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease;
}
.tmd-feat--big:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(27,42,74,.12);
}
.tmd-feat--big .tmd-feat__icon{
  width:56px;height:56px;border-radius:14px;
}
.tmd-feat--big .tmd-feat__icon svg{width:28px;height:28px;}
.tmd-feat--big .tmd-feat__name{font-size:20px;}
.tmd-feat--big .tmd-feat__desc{font-size:15px;}

/* Rangée du bas : 4 petites cartes */
.tmd-features__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.tmd-feat{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  background:#fff;
  border:1px solid var(--tmd-line);
  border-radius:14px;
  padding:22px 20px;
  text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tmd-feat:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(27,42,74,.10);
  border-color:transparent;
}

/* Commun aux deux tailles */
.tmd-feat__icon{
  width:48px;height:48px;border-radius:12px;
  background:var(--tmd-icon-bg);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.tmd-feat__icon svg{
  width:24px;height:24px;
  stroke:var(--tmd-teal);stroke-width:1.8;
  fill:none;stroke-linecap:round;stroke-linejoin:round;
}
.tmd-feat__name{
  font-size:16.5px;font-weight:700;color:var(--tmd-navy);margin:0;
}
.tmd-feat__desc{
  font-size:14px;line-height:1.5;color:var(--tmd-text);margin:0;
}
.tmd-feat__arrow{
  margin-top:auto;padding-top:4px;
  font-size:14px;font-weight:600;color:var(--tmd-teal);
  display:inline-flex;align-items:center;gap:6px;
  opacity:0;transform:translateX(-4px);
  transition:opacity .16s ease, transform .16s ease;
}
.tmd-feat--big:hover .tmd-feat__arrow,
.tmd-feat:hover .tmd-feat__arrow{opacity:1;transform:translateX(0);}

@media (max-width:1040px){
  .tmd-features__hero{grid-template-columns:1fr;}
  .tmd-features__grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .tmd-features__grid{grid-template-columns:1fr;}
}


/* --- 3.3  .tmd-faq ------------------------------------------------- */
/*     Accordéon natif <details>. (Bloc dédupliqué : était présent 2x  */
/*     à l'identique dans archive.css — voir CHANGELOG.)               */
.tmd-faq{
  max-width:840px;              /* plus étroit que les bénéfices : ça se lit */
  margin:0 auto;
  padding:0 20px;
  font-family:inherit;
  color:var(--tmd-navy);
  box-sizing:border-box;
}
.tmd-faq *,
.tmd-faq *::before,
.tmd-faq *::after{box-sizing:border-box;}
.tmd-faq p{margin:0 0 14px;padding:0;}
.tmd-faq p:last-child{margin-bottom:0;}

.tmd-faq__title{
  font-size:clamp(26px,2.8vw,40px);
  font-weight:800;
  line-height:1.18;
  letter-spacing:.01em;
  text-transform:uppercase;          /* aligné sur la convention des grandes sections */
  margin:0 0 36px;
  text-align:center;
  color:var(--tmd-navy);
}
.tmd-faq__title em{font-style:normal;color:var(--tmd-teal);}

.tmd-faq__item{
  border-top:1px solid rgba(27,42,74,.12);
}
.tmd-faq__item:last-child{
  border-bottom:1px solid rgba(27,42,74,.12);
}

/* la question */
.tmd-faq__q{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:22px 4px;
  cursor:pointer;
  list-style:none;
  font-size:17.5px;
  font-weight:600;
  line-height:1.45;
  color:var(--tmd-navy);
  transition:color .18s ease;
}
.tmd-faq__q::-webkit-details-marker{display:none;}  /* Safari */
.tmd-faq__q:hover{color:var(--tmd-teal);}
.tmd-faq__q:focus-visible{
  outline:2px solid var(--tmd-teal);
  outline-offset:3px;
  border-radius:4px;
}

/* le chevron */
.tmd-faq__chevron{
  flex:none;
  width:12px;
  height:12px;
  margin-top:6px;
  border-right:2px solid var(--tmd-grey);
  border-bottom:2px solid var(--tmd-grey);
  transform:rotate(45deg);
  transition:transform .22s ease;
}
.tmd-faq__item[open] .tmd-faq__chevron{
  transform:rotate(-135deg);
  border-color:var(--tmd-teal);
}

/* la réponse */
.tmd-faq__a{
  padding:0 40px 26px 4px;
  font-size:16px;
  line-height:1.7;
  color:var(--tmd-text);
}
.tmd-faq__a strong{font-weight:700;color:var(--tmd-navy);}
.tmd-faq__a a{color:var(--tmd-teal);text-decoration:underline;font-weight:600;}

@media (prefers-reduced-motion:reduce){
  .tmd-faq__chevron,
  .tmd-faq__q{transition:none;}
}
@media (max-width:640px){
  .tmd-faq__q{font-size:16px;padding:18px 2px;}
  .tmd-faq__a{padding-right:20px;font-size:15px;}
}


/* --- 3.4  .tmd-hero-cta -------------------------------------------- */
/*     Double CTA + barre de preuve (sous le hero de la home)          */
.tmd-hero-cta{
  font-family:inherit;
  box-sizing:border-box;
}
.tmd-hero-cta *,
.tmd-hero-cta *::before,
.tmd-hero-cta *::after{box-sizing:border-box;}

/* Les deux boutons */
.tmd-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}
.tmd-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 30px;
  border-radius:999px;
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  line-height:1;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
  cursor:pointer;
}
.tmd-btn--primary{
  background:var(--tmd-teal);
  color:#fff;
}
.tmd-btn--primary:hover{
  background:var(--tmd-teal-hover);   /* corrigé : "#2589 8f" (espace parasite) cassait le survol */
  transform:translateY(-2px);
}
.tmd-btn--mustard{
  background:var(--tmd-orange-v3);
  color:#fff;              
}
.tmd-btn--mustard:hover{
  background:var(--tmd-mustard-hover);
  transform:translateY(-2px);
}
.tmd-btn--ghost{
  background:transparent;
  color:#fff;
  border:1.5px solid rgba(255,255,255,.35);
}
.tmd-btn--ghost:hover{
  border-color:#fff;
  transform:translateY(-2px);
}
/* Taille XL : pour un CTA seul et centré (sinon il paraît petit) */
.tmd-btn--lg{
  padding:20px 44px;
  font-size:18px;
}
/* Bloc CTA réutilisable : centre le bouton (module Code à déposer partout) */
.tmd-cta-center{text-align:center;}

/* La barre de preuve (notation + compteur) */
.tmd-proof-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 28px;
  margin-top:26px;
}
.tmd-proof-item{
  display:flex;
  align-items:center;
  gap:9px;
}
.tmd-stars{
  display:inline-flex;
  gap:2px;
  color:var(--tmd-star);
  font-size:17px;
  line-height:1;
}
.tmd-proof-text{
  color:#fff;
  font-size:14.5px;
  line-height:1.3;
}
.tmd-proof-text b{font-weight:700;}
.tmd-proof-text .sub{
  color:#aeb8ca;               /* gris clair sur fond sombre (one-off) */
  font-size:12.5px;
  display:block;
  margin-top:2px;
}
.tmd-proof-sep{
  width:1px;
  height:34px;
  background:rgba(255,255,255,.2);
}
.tmd-proof-count{
  color:#fff;
  font-size:14.5px;
  line-height:1.35;
  max-width:230px;
}
.tmd-proof-count b{font-weight:700;color:var(--tmd-orange);}

@media (max-width:600px){
  .tmd-btn{width:100%;}
  .tmd-proof-sep{display:none;}
}


/* --- 3.5  .tmd-logos ----------------------------------------------- */
/*     Carrousel de logos infini                                       */
.tmd-logos{
  --tmd-speed:40s;          /* + grand = + lent */
  --tmd-gap:64px;           /* espace entre logos */
  --tmd-fade:120px;         /* largeur du fondu sur les bords */
  width:100%;
  overflow:hidden;
  padding:10px 0;
  /* fondu progressif gauche/droite */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--tmd-fade),#000 calc(100% - var(--tmd-fade)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 var(--tmd-fade),#000 calc(100% - var(--tmd-fade)),transparent);
  box-sizing:border-box;
}
.tmd-logos__track{
  display:flex;
  width:max-content;
  gap:var(--tmd-gap);
  animation:tmd-scroll var(--tmd-speed) linear infinite;
}
.tmd-logos:hover .tmd-logos__track{animation-play-state:paused;}

.tmd-logos__item{
  flex:none;
  display:flex;
  align-items:center;
}
.tmd-logos__item img{
  height:46px;
  width:auto;
  object-fit:contain;
  opacity:.75;
  transition:opacity .2s ease;
}
.tmd-logos__item img:hover{opacity:1;}

@keyframes tmd-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(calc(-50% - (var(--tmd-gap) / 2)));}
}

@media (prefers-reduced-motion:reduce){
  .tmd-logos__track{animation:none;flex-wrap:wrap;justify-content:center;}
}
@media (max-width:600px){
  .tmd-logos{--tmd-speed:28s;--tmd-gap:44px;--tmd-fade:50px;}
  .tmd-logos__item img{height:38px;}
}


/* --- 3.6  .tmd-cbenef ---------------------------------------------- */
/*     « Benefits Condensed » : les 3 bénéfices de Timed en version     */
/*     condensée (variante du bloc bénéfices de la landing). En prod.   */
.tmd-cbenef{
  --tmd-radius:16px;            /* local : garde l'arrondi même si le token global change */
  max-width:1140px;
  margin:0 auto;
  padding:0 20px;
  font-family:inherit;
  box-sizing:border-box;
}
.tmd-cbenef *,
.tmd-cbenef *::before,
.tmd-cbenef *::after{box-sizing:border-box;}

.tmd-cbenef__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
  margin-bottom:150px;
}
.tmd-cbenef__row:last-child{margin-bottom:0;}
.tmd-cbenef__row[data-reverse="true"] .tmd-cbenef__text{order:2;}
.tmd-cbenef__row[data-reverse="true"] .tmd-cbenef__media{order:1;}

.tmd-cbenef__media img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--tmd-radius);
}

.tmd-cbenef__title{
  font-size:clamp(22px,2.2vw,30px);
  font-weight:700;
  line-height:1.25;
  color:var(--tmd-navy);
  margin:0 0 16px;
  letter-spacing:-.01em;
}
.tmd-cbenef__title em{font-style:normal;color:var(--tmd-teal);}
.tmd-cbenef__desc{
  font-size:16.5px;
  line-height:1.65;
  color:var(--tmd-text);
  margin:0 0 18px;
}
.tmd-cbenef__link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:15px;
  font-weight:600;
  color:var(--tmd-teal);
  text-decoration:none;
  transition:gap .15s ease;
}
.tmd-cbenef__link:hover{gap:12px;}

@media (max-width:880px){
  .tmd-cbenef__row{grid-template-columns:1fr;gap:28px;margin-bottom:48px;}
  .tmd-cbenef__row[data-reverse="true"] .tmd-cbenef__text{order:1;}
  .tmd-cbenef__row[data-reverse="true"] .tmd-cbenef__media{order:2;}
}


/* --- 3.7  .tmd-hero ------------------------------------------------ */
/*     Hero sombre : bandeau + titre + checklist + double CTA + preuve. */
/*     Réutilise .tmd-cta-row / .tmd-btn / .tmd-proof-bar (bloc 3.4).   */
.tmd-hero{
  color:#fff;
  font-family:inherit;
  box-sizing:border-box;
}
/* Fond sombre : sous Divi, on le pose sur la SECTION en #1B2A4A (pleine
   largeur) + padding vertical sur la Section. La variante ci-dessous rend
   le bloc auto-portant (CSS gère fond + padding) si besoin hors Divi. */
.tmd-hero--dark{
  background:var(--tmd-navy);
  padding:clamp(48px,7vw,96px) 24px;
}
.tmd-hero *,
.tmd-hero *::before,
.tmd-hero *::after{box-sizing:border-box;}
.tmd-hero__inner{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,64px);
  align-items:center;
}
.tmd-hero__eyebrow{
  margin:0 0 var(--tmd-space-sm);
  font-size:14px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--tmd-teal-brand);
}
.tmd-hero__title{
  margin:0 0 var(--tmd-space-md);
  font-size:clamp(34px,4.6vw,56px);
  line-height:1.07;
  font-weight:800;
  letter-spacing:-.02em;
  color:#fff;
}
.tmd-hero__title em{font-style:normal;color:var(--tmd-teal-bright);}
.tmd-hero__sub{
  margin:0 0 var(--tmd-space-md);
  max-width:540px;
  font-size:18px;
  line-height:1.55;
  color:#C7D0E0;                 /* sous-titre clair sur fond navy */
}
.tmd-hero__list{
  list-style:none;
  margin:0 0 var(--tmd-space-md);
  padding:0;
  display:grid;
  gap:13px;
}
.tmd-hero__list li{
  position:relative;
  padding-left:30px;
  font-size:17px;
  line-height:1.45;
  color:#E6EAF2;
  list-style:none !important;   /* neutralise la puce native ajoutée par Divi */
}
.tmd-hero__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.15em;
  width:18px;
  height:18px;
  border-radius:50%;
  background-color:var(--tmd-teal);
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'/%3e%3c/svg%3e");
  background-size:11px 11px;
  background-position:center;
  background-repeat:no-repeat;
}
.tmd-hero__media img,
.tmd-hero__media .tmd-ph{
  width:100%;
  border-radius:20px;
}
@media (max-width:900px){
  .tmd-hero__inner{grid-template-columns:1fr;}
}

/* Variante CLAIRE : hero sur fond blanc (pages Features / intérieures).
   Même structure, couleurs inversées. Le fond blanc se pose sur la
   Section Divi (ou rien). Usage : class="tmd-hero tmd-hero--light". */
.tmd-hero--light{color:var(--tmd-text);}
.tmd-hero--light .tmd-hero__eyebrow{color:var(--tmd-teal);}
.tmd-hero--light .tmd-hero__title{color:var(--tmd-navy);font-size:clamp(32px,5vw,42px);}  /* 42px sur desktop (pages Features) */
.tmd-hero--light .tmd-hero__title em{color:var(--tmd-teal);}  /* teal foncé (lisible sur blanc) */
.tmd-hero--light .tmd-hero__list li{color:var(--tmd-text);}
.tmd-hero--light .tmd-hero__sub{color:var(--tmd-text);}
.tmd-hero--light .tmd-proof-text{color:var(--tmd-text);}
.tmd-hero--light .tmd-proof-text .sub{color:var(--tmd-grey);}
.tmd-hero--light .tmd-proof-count{color:var(--tmd-text);}
.tmd-hero--light .tmd-proof-sep{background:rgba(27,42,74,.15);}
.tmd-hero--light .tmd-btn--ghost{color:var(--tmd-navy);border-color:rgba(27,42,74,.28);}
.tmd-hero--light .tmd-btn--ghost:hover{border-color:var(--tmd-navy);}

/* --- Placeholder image (en attendant les visuels définitifs) ------- */
/*     À remplacer par une <img>. Garde le format 4/3 pour que la mise  */
/*     en page ne bouge pas au moment du remplacement.                  */
.tmd-ph{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  aspect-ratio:4/3;
  padding:22px;
  border-radius:16px;
  background:linear-gradient(135deg,#eef2f5,#dde6ec);
  color:var(--tmd-grey);
  font-size:14px;
  font-weight:600;
  line-height:1.4;
}
.tmd-ph--dark{
  background:linear-gradient(135deg,#26365b,#1b2742);
  color:#93a3c0;
}


/* --- 3.8  .tmd-prose ----------------------------------------------- */
/*     Bloc de texte éditorial : titre + paragraphes, largeur de        */
/*     lecture confortable (~760px). Réutilisable pour toutes les intros.*/
.tmd-prose{
  max-width:760px;
  margin:0 auto;
  padding:0 20px;
  font-family:inherit;
  color:var(--tmd-text);
  box-sizing:border-box;
}
.tmd-prose *,
.tmd-prose *::before,
.tmd-prose *::after{box-sizing:border-box;}
.tmd-prose__title{
  margin:0 0 var(--tmd-space-md);
  font-size:clamp(26px,2.8vw,40px);
  line-height:1.18;
  font-weight:800;
  letter-spacing:.01em;
  text-transform:uppercase;      /* grande section (page Features) = CAPS */
  color:var(--tmd-navy);
}
.tmd-prose__title em{font-style:normal;color:var(--tmd-teal);}
.tmd-prose p{
  margin:0 0 var(--tmd-space-sm);
  font-size:17.5px;
  line-height:1.75;
}
.tmd-prose p:last-child{margin-bottom:0;}
.tmd-prose strong{font-weight:700;color:var(--tmd-navy);}

/* Variante centrée (titre + texte) si besoin */
.tmd-prose--center{text-align:center;}


/* --- 3.9  .tmd-args ------------------------------------------------ */
/*     3 cartes à icônes : en-tête (titre + intro) puis grille de 3.    */
/*     Icône blanche sur carré dégradé teal (clair→moyen), radius 8px.  */
.tmd-args{
  max-width:1140px;
  margin:0 auto;
  padding:0 20px;
  font-family:inherit;
  box-sizing:border-box;
}
.tmd-args *,
.tmd-args *::before,
.tmd-args *::after{box-sizing:border-box;}

.tmd-args__head{
  max-width:760px;
  margin:0 auto var(--tmd-space-lg);
  text-align:center;
}
.tmd-args__title{
  margin:0 0 var(--tmd-space-sm);
  font-size:clamp(26px,2.8vw,40px);
  line-height:1.18;
  font-weight:800;
  letter-spacing:.01em;
  text-transform:uppercase;      /* grande section (page Features) = CAPS */
  color:var(--tmd-navy);
}
.tmd-args__title em{font-style:normal;color:var(--tmd-teal);}
.tmd-args__intro{
  margin:0;
  font-size:17px;
  line-height:1.6;
  color:var(--tmd-text);
}

.tmd-args__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.tmd-arg{
  background:#fff;
  border:1px solid var(--tmd-line);
  border-radius:16px;
  padding:28px 26px;
}
.tmd-arg__icon{
  width:44px;
  height:44px;
  border-radius:8px;                 /* carré arrondi, comme demandé */
  background:linear-gradient(135deg,var(--tmd-teal-brand),var(--tmd-teal));
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
}
.tmd-arg__icon svg{
  width:22px;
  height:22px;
  stroke:#fff;
  stroke-width:1.9;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.tmd-arg__title{
  margin:0 0 10px;
  font-size:19px;
  font-weight:700;
  line-height:1.25;
  color:var(--tmd-navy);
}
.tmd-arg__title em{font-style:normal;color:var(--tmd-teal);}
.tmd-arg__desc{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:var(--tmd-text);
}

@media (max-width:900px){
  .tmd-args__grid{grid-template-columns:1fr;}
}


/* --- 3.10  .tmd-split ---------------------------------------------- */
/*     Cartes bénéfices alternées : tag + titre + (intro) + puces +     */
/*     image. Desktop : alternance G/D via data-reverse. Mobile :       */
/*     l'image passe TOUJOURS au-dessus du texte (média 1er dans le DOM */
/*     n'est pas requis — on pilote l'ordre en CSS).                    */
/*     Le wrapper .tmd-splits contient toutes les cartes (1 module Code)*/
/*     et gère l'espacement vertical entre elles.                       */
.tmd-splits{
  max-width:1140px;
  margin:0 auto;
  padding:0 20px;
  display:grid;
  gap:clamp(56px,8vw,104px);
  font-family:inherit;
  box-sizing:border-box;
}
.tmd-splits *,
.tmd-splits *::before,
.tmd-splits *::after{box-sizing:border-box;}

/* Disposition par zones nommées (gère aussi le ré-empilement mobile) */
.tmd-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:"text media";
  gap:clamp(28px,4vw,56px);
  align-items:center;
}
.tmd-split[data-reverse="true"]{grid-template-areas:"media text";}

.tmd-split__text{grid-area:text;}
.tmd-split__media{grid-area:media;}
.tmd-split__illus{grid-area:illus;}

/* Style 1 (--rich) : texte + illustration en haut, grande image dessous */
.tmd-split--rich{
  align-items:start;
  grid-template-areas:
    "text  illus"
    "media media";
}
.tmd-split--rich[data-reverse="true"]{
  grid-template-areas:
    "illus text"
    "media media";
}

/* IMAGE produit (photo + UI) : coins arrondis. 1 image, ou 2 carrées. */
.tmd-split__media{display:grid;gap:16px;}
.tmd-split__media--duo{grid-template-columns:1fr 1fr;}
.tmd-split__media img{
  display:block;
  width:100%;
  border-radius:var(--tmd-radius);
}
/* ILLUSTRATION à fond transparent : ni arrondi ni fond */
.tmd-split__illus img{
  display:block;
  width:100%;
  height:auto;
}

.tmd-split__tag{
  display:inline-block;
  margin:0 0 16px;
  padding:5px 14px;
  border-radius:999px;
  background:var(--tmd-icon-bg);      /* teal très clair */
  color:var(--tmd-teal);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.03em;
}
.tmd-split__title{
  margin:0 0 16px;
  font-size:clamp(22px,2.2vw,28px);
  line-height:1.2;
  font-weight:700;                    /* carte/feature = H3, casse normale */
  letter-spacing:-.01em;
  color:var(--tmd-navy);
}
.tmd-split__title em{font-style:normal;color:var(--tmd-teal);}
.tmd-split__lead{
  margin:0 0 18px;
  padding-left:16px;
  border-left:3px solid var(--tmd-teal);   /* filet teal, cohérent avec .tmd-cols */
  font-style:italic;                        /* accroche = italique (pas besoin de <em>) */
  font-size:16.5px;
  line-height:1.6;
  color:var(--tmd-teal-hover);                    /* + foncé que les puces → se distingue */
}
.tmd-split__lead em{font-style:normal;}     /* si un <em> traîne, on évite le double-italique */
.tmd-split__list{
  list-style:none;
  margin:0 0 20px;
  padding:0;
  display:grid;
  gap:10px;
}
.tmd-split__list li{
  position:relative;
  padding-left:26px;
  font-size:16px;
  line-height:1.5;
  color:var(--tmd-text);
  list-style:none !important;   /* neutralise la puce native ajoutée par Divi */
}
.tmd-split__list li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.55em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--tmd-teal);
}
.tmd-split__link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:15px;
  font-weight:600;
  color:var(--tmd-teal);
  text-decoration:none;
  transition:gap .15s ease;
}
.tmd-split__link:hover{gap:12px;}

/* Liens en ligne dans le texte (renvois vers d'autres pages) */
.tmd-split__text a:not(.tmd-split__link){
  color:var(--tmd-teal);
  text-decoration:underline;
  font-weight:600;
}

@media (max-width:900px){
  /* Style 2 : texte au-dessus, image dessous */
  .tmd-split,
  .tmd-split[data-reverse="true"]{
    grid-template-columns:1fr;
    grid-template-areas:"text" "media";
    gap:22px;
  }
  /* Style 1 : illustration tout en haut, puis texte, puis image */
  .tmd-split--rich,
  .tmd-split--rich[data-reverse="true"]{
    grid-template-areas:"illus" "text" "media";
  }
}


/* --- 3.11  .tmd-compare -------------------------------------------- */
/*     Comparaison « Avant / Avec Timed » : titre (H2 CAPS) + 2 colonnes.*/
/*     Colonne "avant" grise, colonne "avec" teal clair.               */
.tmd-compare{
  max-width:1000px;
  margin:0 auto;
  padding:0 20px;
  font-family:inherit;
  box-sizing:border-box;
}
.tmd-compare *,
.tmd-compare *::before,
.tmd-compare *::after{box-sizing:border-box;}

.tmd-compare__head{
  max-width:760px;
  margin:0 auto var(--tmd-space-lg);
  text-align:center;
}
.tmd-compare__title{
  margin:0;
  font-size:clamp(26px,2.8vw,40px);
  line-height:1.18;
  font-weight:800;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--tmd-navy);
}
.tmd-compare__title em{font-style:normal;color:var(--tmd-teal);}

.tmd-compare__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:start;
}
.tmd-compare__col{
  border-radius:var(--tmd-radius);
  overflow:hidden;
}
.tmd-compare__col--before{background:var(--tmd-before-bg);}
.tmd-compare__col--after{background:var(--tmd-after-bg);}
.tmd-compare__label{
  text-align:center;
  font-weight:700;
  font-size:17px;
  padding:16px;
  color:var(--tmd-navy);
  border-bottom:1px solid rgba(27,42,74,.08);
}
.tmd-compare__col--before .tmd-compare__label{color:var(--tmd-grey);}
.tmd-compare__col--after  .tmd-compare__label{color:var(--tmd-teal);}
.tmd-compare__body{
  padding:26px 30px;
  font-size:16px;
  line-height:1.65;
  color:var(--tmd-text);
}
.tmd-compare__body p{margin:0 0 14px;}
.tmd-compare__body p:last-child{margin:0;}

@media (max-width:760px){
  .tmd-compare__grid{grid-template-columns:1fr;}
}


/* --- 3.12  .tmd-cols ----------------------------------------------- */
/*     Argumentaire en 3 colonnes : titre (H2 CAPS) + colonnes titre +  */
/*     paragraphe, chaque colonne coiffée d'un petit filet teal.        */
.tmd-cols{
  max-width:1140px;
  margin:0 auto;
  padding:0 20px;
  font-family:inherit;
  box-sizing:border-box;
}
.tmd-cols *,
.tmd-cols *::before,
.tmd-cols *::after{box-sizing:border-box;}

.tmd-cols__head{
  max-width:760px;
  margin:0 auto var(--tmd-space-lg);
  text-align:center;
}
.tmd-cols__title{
  margin:0;
  font-size:clamp(26px,2.8vw,40px);
  line-height:1.18;
  font-weight:800;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--tmd-navy);
}
.tmd-cols__title em{font-style:normal;color:var(--tmd-teal);}

.tmd-cols__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,4vw,48px);
}
.tmd-col__title{
  position:relative;
  margin:0 0 12px;
  padding-top:18px;                 /* place pour le filet */
  font-size:19px;
  font-weight:700;
  line-height:1.3;
  color:var(--tmd-navy);
}
.tmd-col__title::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:40px;
  height:3px;
  border-radius:2px;
  background:var(--tmd-teal);       /* le filet teal */
}
.tmd-col__text{
  margin:0;
  font-size:15.5px;
  line-height:1.65;
  color:var(--tmd-text);
}
.tmd-col__text a{
  color:var(--tmd-teal);
  text-decoration:underline;
  font-weight:600;
}

@media (max-width:860px){
  .tmd-cols__grid{grid-template-columns:1fr;gap:32px;}
}


/* --- 3.13  .tmd-testimonials --------------------------------------- */
/*     Témoignages : en-tête + grille de cartes (guillemet teal +       */
/*     étoiles + citation + auteur). Cartes à hauteur égale.            */
.tmd-testimonials{
  max-width:1140px;
  margin:0 auto;
  padding:0 20px;
  font-family:inherit;
  box-sizing:border-box;
}
.tmd-testimonials *,
.tmd-testimonials *::before,
.tmd-testimonials *::after{box-sizing:border-box;}

.tmd-testimonials__head{
  max-width:820px;
  margin:0 auto var(--tmd-space-lg);
  text-align:center;
}
.tmd-testimonials__title{
  margin:0 0 var(--tmd-space-sm);
  font-size:clamp(26px,2.8vw,40px);
  line-height:1.18;
  font-weight:800;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--tmd-navy);
}
.tmd-testimonials__title em{font-style:normal;color:var(--tmd-teal);}
.tmd-testimonials__intro{
  margin:0 0 6px;
  font-size:17px;
  line-height:1.5;
  color:var(--tmd-text);
}
.tmd-testimonials__specialties{
  margin:0;
  font-size:15.5px;
  font-weight:700;
  color:var(--tmd-navy);
}

.tmd-testimonials__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  align-items:stretch;
}
.tmd-testimonial{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--tmd-line);
  border-radius:16px;
  padding:28px 26px;
}
.tmd-testimonial__stars{
  color:var(--tmd-star);
  font-size:15px;
  letter-spacing:2px;
  line-height:1;
  margin-bottom:14px;
}
.tmd-testimonial__quote{
  margin:0 0 20px;
  font-size:15px;
  line-height:1.65;
  color:var(--tmd-text);
}
.tmd-testimonial__quote::before{
  content:"\201C";                 /* grosse guillemet ouvrante */
  display:block;
  font-family:Georgia,'Times New Roman',serif;
  font-size:46px;
  line-height:.5;
  margin-bottom:10px;
  color:var(--tmd-teal);
}
.tmd-testimonial__author{margin-top:auto;}   /* colle l'auteur en bas → hauteurs égales */
.tmd-testimonial__name{
  margin:0;
  font-size:15px;
  font-weight:700;
  color:var(--tmd-navy);
}
.tmd-testimonial__role{
  margin:2px 0 0;
  font-size:13.5px;
  color:var(--tmd-teal);
}

@media (max-width:900px){
  .tmd-testimonials__grid{grid-template-columns:1fr;}
}

/* --- Variantes de mise en page des témoignages -------------------- */
/* 2 cartes au lieu de 3 (pleine largeur : chaque carte = la moitié) */
.tmd-testimonials__grid--duo{
  grid-template-columns:repeat(2,1fr);
}
/* « Spotlight » : image (1/3) + une grande carte témoignage (2/3) */
.tmd-testimonials__grid--spotlight{
  grid-template-columns:1fr 2fr;
}
.tmd-testimonials__image{
  border-radius:16px;
  overflow:hidden;
}
.tmd-testimonials__image img{
  display:block;
  width:100%;
  height:100%;
  min-height:220px;
  object-fit:cover;
}
.tmd-testimonials__grid--spotlight .tmd-testimonial__quote{font-size:17px;}
.tmd-testimonials__grid--spotlight .tmd-testimonial__quote::before{font-size:52px;}

@media (max-width:900px){
  .tmd-testimonials__grid--duo,
  .tmd-testimonials__grid--spotlight{grid-template-columns:1fr;}
}


/* --- 3.14  .tmd-statement ------------------------------------------ */
/*     Bannière « déclaration » : image + grand titre, dans un cadre    */
/*     arrondi clair. Image à gauche, titre à droite, centrés verticalement.*/
.tmd-statement{
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
  font-family:inherit;
  box-sizing:border-box;
}
.tmd-statement *,
.tmd-statement *::before,
.tmd-statement *::after{box-sizing:border-box;}
.tmd-statement__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,64px);
  align-items:center;
  background:var(--tmd-hero-bg);      /* fond clair teinté (token déjà défini) */
  border-radius:24px;
  padding:clamp(28px,4vw,56px);
}
.tmd-statement__media img{
  display:block;
  width:100%;
  border-radius:16px;
}
.tmd-statement__title{
  margin:0;
  font-size:clamp(28px,3.4vw,46px);
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--tmd-navy);
}
.tmd-statement__title em{font-style:normal;color:var(--tmd-teal);}
.tmd-statement__sub{
  margin:18px 0 0;
  font-size:clamp(17px,1.6vw,20px);
  line-height:1.6;
  color:var(--tmd-text);
}
.tmd-statement__sub em{font-style:normal;font-weight:700;color:var(--tmd-teal);}

/* Variante sans cadre (épuré, sur fond blanc) */
.tmd-statement--plain .tmd-statement__inner{
  background:none;
  padding:0;
  border-radius:0;
}

@media (max-width:860px){
  .tmd-statement__inner{grid-template-columns:1fr;text-align:center;}
}


/* =====================================================================
   4. PAGES — spécifique landing V3 (/timed-expert)
   ---------------------------------------------------------------------
   Classes perso codées à la main. TOUTES conservées (page en prod).
   Préfixage des classes trop génériques via double sélecteur, le temps
   de renommer les modules Divi (voir CHANGELOG > "Renommage").
   ===================================================================== */

.preuve-label { font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--tmd-v3-grey); margin-bottom:0px; }
.preuve-line  { display:flex; align-items:baseline; gap:4px; margin:0; }

/* .avant / .fleche / .apres : noms trop génériques (risque de collision
   avec un plugin). On accepte le nouveau nom .tmd-* dès maintenant, tout
   en gardant l'ancien actif tant que le module Divi n'est pas renommé.
   → une fois les modules renommés, supprimer l'ancien sélecteur. */
.avant,  .tmd-avant  { font-size:16px; color:var(--tmd-v3-grey-light); text-decoration:line-through; }
.fleche, .tmd-fleche { font-size:24px; color:var(--tmd-orange-v3); }
.apres,  .tmd-apres  { font-size:32px; font-weight:800; color:var(--tmd-orange-v3); line-height:1; }

.preuve2-label { font-size:24px; font-weight:800; color:var(--tmd-orange-v3); margin-bottom:10px; }
.preuve2-texte { font-size:13px; letter-spacing:.08em; color:var(--tmd-v3-grey); margin-bottom:0px; }

.preuve3-label { font-size:24px; font-weight:800; color:var(--tmd-orange-v3); margin-bottom:10px; }
.preuve3-texte { font-size:13px; letter-spacing:.08em; color:var(--tmd-v3-grey); margin-bottom:0px; }

.V3-label { font-size:24px; font-weight:800; color:var(--tmd-teal); margin-bottom:10px; }
.V3-texte { font-size:17px; letter-spacing:.08em; color:var(--tmd-v3-navy); margin-bottom:0px; }