:root {
    --tldr-border-radius: 12px;
    --tldr-offset: 6px;
}



.ligne-separateur,.warning p:first-child strong {
    text-transform: uppercase;
    letter-spacing: 1px
}



/***********************************************************************/

.checklist {  margin: 2rem 0;}

/* --- Titre H3 --- */
.checklist h3 {
margin-top: 0;
  margin-bottom: 1.5rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--color-primary-muted);
}

/* --- La Liste --- */
.checklist-steps {
  list-style: none; /* Supprime les puces par défaut */
  padding: 0;
  margin: 0;
}

/* --- Les Items --- */
.checklist-steps li {
  position: relative;
  padding-left: 2.2rem; 
  margin-bottom: 0.8rem;
}

/* Nettoyage du dernier item */
.checklist-steps li:last-child {
  margin-bottom: 0;
}

/* --- La Coche (Checkmark) --- */
.checklist-steps li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
      line-height: 1.2rem;
  color: var(--color-primary); /* Rose vif */
  font-weight: 900;
  font-size: 1.2rem;
}
/*******************************list-check*****************************/
.list-check {
  margin: 2rem 0;
}

.list-check h3 {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
}



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

.list-check li {
  position: relative;
  padding-left: 2.2rem;
  margin-bottom: 1rem;
  border-bottom: 1px dashed #cfcfcf; 
  padding-bottom: 1rem;
}

.list-check li:last-child {
  border-bottom: none;
}

/* Puce Ronde Colorée */
.list-check li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  
  width: 24px;
  height: 24px;
  background-color: var(--color-primary-muted); /* Fond Rose pâle */
  color: var(--color-primary-dark); /* Texte Rose foncé */
  border-radius: 50%;
  
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  font-weight: bold;
}
/*****************************************************************************************/

.list-steps {
  margin: 2rem 0;
}

.list-steps h3 {
  margin-bottom: 2rem;
}

.steps-container {
  list-style: none;
  padding: 0;
  margin: 0 0 0 1rem; /* Marge gauche pour la ligne */
  border-left: 2px solid var(--color-primary-muted); /* La ligne verticale */
  counter-reset: process-step;
}

.list-steps li {
  position: relative;
  padding-left: 2.5rem; /* Espace entre ligne et texte */
  margin-bottom: 2rem;
  counter-increment: process-step;
}

/* Le Point sur la ligne */
.list-steps li::before {
  content: counter(process-step);
  position: absolute;
  left: -16px; /* Centré sur la ligne */
  top: 0;
  
  width: 30px;
  height: 30px;
  background-color: #fff;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--color-primary);
}

.list-steps li strong {
  display: block;
  color: #222;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.list-steps li div[itemprop="text"] {
  background-color: #f3f3f3;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #cfcfcf;
}
.list-steps li div[itemprop="text"] p { margin: 0; }

/***********************************pros-cons*******************************************************/



.pros-cons {
  background-color: #ffffff87;
  
  /* Cadre et Ombre Signature */
  border: 2px solid var(--color-primary);
  border-radius: var(--tldr-border-radius);
   padding: 1em;
  margin: 2rem 0;
  overflow: hidden;
}

/* --- Structure en Colonnes --- */
.pros-cons div[itemprop="review"] {
  display: flex;
  align-items: stretch; /* Hauteur égale */
}

/* --- Colonne Commune --- */
.pros-column, .cons-column {
  flex: 1; /* Largeur 50% */
  padding: 2rem;
}

/* --- Colonne Les Plus (Gauche) --- */
.pros-column {
  border-right: 1px dashed var(--color-primary-muted); /* Séparation */
}

.pros-column h3 {
  text-transform: uppercase;
  font-size: 1.1rem;
  font-weight: 800;
  margin-top: 0;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
}
/* Icône Plus */
.pros-column h3::before {
  content: "✚"; 
  margin-right: 10px;
  background: #f1f8f0; /* Fond vert très pâle */
  color: #7f9c78;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; justify-content: center; align-items: center;
  font-size: 0.8rem;
}

/* --- Colonne Les Moins (Droite) --- */
.cons-column h3 {
  color: var(--color-primary);
  text-transform: uppercase;
  font-size: 1.1rem;
  font-weight: 800;
  margin-top: 0;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
}
/* Icône Moins */
.cons-column h3::before {
  content: "━"; 
  margin-right: 10px;
  background: var(--color-primary-muted); /* Fond rose pâle */
  color: var(--color-primary);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; justify-content: center; align-items: center;
  font-size: 0.8rem;
}

/* --- Listes --- */
.pros-cons ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pros-cons li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 1rem;
}

/* Puces spécifiques */
.pros-column li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: #7f9c78;
  font-weight: 900;
}

.cons-column li::before {
  content: "✖";
  position: absolute; left: 0; top: 1px;
  color: var(--color-primary);
  font-weight: 900;
  font-size: 0.8rem;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .pros-cons div[itemprop="review"] {
    flex-direction: column;
  }
  .pros-column {
    border-right: none;
    border-bottom: 1px dashed var(--color-primary-muted);
  }
}




/*********************************date***************************************/
.dt-modified,.dt-published {
    margin-bottom: 15px;
    display: inline-block;
    font-size: .9rem;
    color: #fff;
    background: var(--color-primary-dark);
    padding: 6px 12px;
    position: relative
}

/***************************************blockquote et Témoignage*************************************/



/* --- Conteneur Global (Citation & Témoignage) --- */
blockquote {
  position: relative;
  background-color: transparent;
  border: 2px solid var(--color-primary);
  border-radius: var(--tldr-border-radius);  
  padding: 2.5rem 2rem 2rem 2rem;
  margin: 2rem 0;
  margin-left: 0;
  margin-right: 0;
}

/* --- Guillemet Géant Décoratif --- */
blockquote::before {
content: "“";
    position: absolute;
    top: -2px;
    left: 20px;
    font-family: serif;
    font-size: 6rem;
    line-height: 1;
    color: var(--color-primary);
    padding: 0 10px;
    height: 40px;
    display: flex;
    align-items: center;
}

/* --- Le Texte (Contenu) --- */
.citation-content,
.temoignage-content {
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
  text-align: center;
}

/* --- La Zone Auteur (Footer & Cite) --- */
blockquote footer,
blockquote cite {
  display: block;
  border-top: 1px dashed var(--color-primary-muted);
  padding-top: 1rem;
  font-size: 0.95rem;
  color: #666;
  font-style: normal; /* Reset de l'italique par défaut de cite */
}

/* --- Le Nom (En gras) --- */
blockquote footer span[itemprop="name"],
blockquote cite span[itemprop="name"] {
  color: var(--color-primary-dark);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}

/* --- La Fonction / Description (En italique) --- */
blockquote footer span[itemprop="jobTitle"],
blockquote cite span:nth-of-type(2) {
  font-style: italic;
}

/* --- Gestion des Liens (<a>) dans la signature --- */
blockquote footer a,
blockquote cite a {
  text-decoration: none;
  color: #666; /* Reste gris par défaut pour être discret */
  border-bottom: 1px solid var(--color-primary-muted); /* Soulignement subtil */
  transition: all 0.2s ease;
}

/* Au survol du lien */
blockquote footer a:hover,
blockquote cite a:hover {
  color: var(--color-primary); /* Devient rose */
  border-bottom-color: var(--color-primary);
}

/******************************************************************/
.archive h2,.archive h3 {
    color: #181818;
}

.single .the-post ol li::marker,.single .the-post ul li::marker {
    color: var(--color-primary)
}

.nav-post-cat {  padding-top: 20px}

.ligne-separateur {
    margin: 60px 0 20px;
    border-bottom: 2px dashed var(--color-primary-muted);
    color: var(--color-primary);
    font-family: monospace;
    font-weight: 700;
    padding-bottom: 5px
}

/**********************************tldr-hybrid***************************************/
.tldr-hybrid{
    border: 2px solid var(--color-primary);
    border-radius: var(--tldr-border-radius);
    padding: 1.5rem;
    margin: 2rem 0;
    position: relative;
    transition: transform .2s
}


.tldr-hybrid:hover{  transform: translateY(-2px)}

.tldr-hybrid strong {  color: var(--color-primary-dark)}

.tldr-hybrid ul{   padding-left: 1.2rem; list-style: none}

.tldr-hybrid ul li{  margin-bottom: .5rem;  position: relative}

.tldr-hybrid ul li::before {
    content: "•";
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1.5em;
    position: absolute;
    left: -1rem;
    top: -2px
}

.tldr-hybrid p:last-child {
    background-color: #f9f9f9;
    padding: 1rem;
    border-left: 4px solid var(--color-primary);
    border-radius: 4px;
    margin-bottom: 0;
    font-style: normal
}

/*********************tldr-parag-tldr-list********************/

.tldr-paragraph,
.tldr-list {
  border: 2px solid var(--color-primary);
  border-radius: var(--tldr-border-radius);
  padding: 1.5rem 2rem;
  margin: 2rem 0; 
 transition: transform .2s;
}

.tldr-paragraph:hover, .tldr-list:hover{  transform: translateY(-2px);}

.tldr-paragraph strong {
  display: inline; 
  color: var(--color-primary-dark);
  font-weight: 600;
}


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

.tldr-list li {
  position: relative;
  padding-left: 2rem; 
  margin-bottom: 0.8rem;
}

.tldr-list li:last-child {
  margin-bottom: 0;
}


.tldr-list li::before {
content: "→";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primary);
    font-weight: 900;
    font-size: 1.5rem;
    line-height: 1.5rem;
}

/***********************************pro-tip-author*******************************************/

.pro-tip-author {
  position: relative;
  background-color: #ffffff87;
  
  /* Forme de bulle */
  border-radius: 0 16px 16px 16px;
  
  /* Ombre douce */
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  
  margin: 3rem 0 2rem 0;
  
  /* Bordure supérieure colorée */
  border-top: 4px solid var(--color-primary);
}

/* --- Avatar (Emoji qui sort du cadre) --- */
.pro-tip-author::before {
      content: "💡";
    position: absolute;
    top: -30px;
    left: 0;
    width: 60px;
    height: 60px;
    background-color: var(--color-primary);
    color: #fff;
    border: 4px solid #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    z-index: 2;
}

/* --- Zone de Contenu --- */
.author-content {
  /* Padding haut important (2.5rem) pour que le texte ne touche pas l'avatar */
  padding: 2.5rem 2rem 2rem 2rem;
}

/* --- Le Texte du Conseil --- */
.author-content p {
    margin: 0;
    background: #f3f3f3;
    padding: 1.2rem;
    border-radius: 8px;
    border: 1px dashed #bdbdbd;
}
/*******************************myth-busting-author******************************************/


.myth-busting-author {
  background-color: #ffffff87;
  border: 2px solid var(--color-primary);
  border-radius: var(--tldr-border-radius);
  box-shadow: var(--tldr-offset) var(--tldr-offset) 0 var(--color-primary-muted);  
  padding: 2rem;
  margin: 2rem 0;
}

.myth-busting-author > p:first-of-type strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  
  margin-bottom: 1.5rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--color-primary-muted);
}

.myth-busting-author > p:nth-of-type(2) {
  background-color: #f3f3f3;
  padding: 1rem 1.5rem;
  border-left: 4px solid #ccc; 
  border-radius: 0 8px 8px 0;
  margin-bottom: 2rem;
  color: #666;
  font-style: italic;
}


.myth-busting-author div[itemprop="reviewBody"] > p:first-child {
  padding-left: 1rem;
  border-left: 4px solid var(--color-primary);
  font-weight: 500;
}

.myth-busting-author div[itemprop="reviewBody"] > p:first-child strong {
  color: var(--color-primary);
  font-size: 1.1rem;
  display: block;
  margin-bottom: 0.5rem;
}


.myth-busting-author div[itemprop="reviewBody"] ul {
  margin: 1.5rem 0;
  padding-left: 1.5rem;
}

.myth-busting-author div[itemprop="reviewBody"] li {
  margin-bottom: 0.5rem;
  position: relative;
  list-style: none;
}

/* Puce personnalisée */
.myth-busting-author div[itemprop="reviewBody"] li::before {
content: "•";
    color: var(--color-primary);
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 1.5rem;
    position: absolute;
    left: -1rem;
    top: 0;
}

/* --- 5. La Recommandation --- */
/* Cible le dernier paragraphe du reviewBody */
.myth-busting-author div[itemprop="reviewBody"] > p:last-child {
background-color: rgb(from var(--color-primary) r g b / 0.1);
  border: 1px dashed var(--color-primary);
  padding: 1rem 1.5rem;
  border-radius: 8px;
  margin-top: 1.5rem;
}

.myth-busting-author div[itemprop="reviewBody"] > p:last-child strong {
  color: var(--color-primary-dark);
  text-transform: uppercase;
  font-size: 0.85rem;
  display: block;
  margin-bottom: 0.5rem;
}

/* --- 6. Disclaimer final --- */
.myth-busting-author > p:last-of-type {
  margin-top: 1.5rem;
  text-align: right;
  border-top: 1px solid #f0f0f0;
  padding-top: 1rem;
 font-size: 0.8rem;
  color: #999;
}
/*************************direct-answer*************************************/


.direct-answer {
    position: relative;
    background-color: #ffffff87;
    border-radius: 8px;
    border: 1px solid #eeeeee8c;
    padding: 2rem;
    margin: 2rem 0;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05), 0 2px 10px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    z-index: 1;
}


.direct-answer::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 150px;
  height: 150px;
  background: var(--color-primary);
  filter: blur(60px); /* Le flou extrême crée la lumière */
  opacity: 0.15; /* Subtil */
  pointer-events: none;
}

.direct-answer-label {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px; /* Espacement large "Tech" */
  color: var(--color-primary);
  margin-bottom: 1.2rem;
}

.direct-answer-label::after {
  content: "";
  flex: 1; /* Prend tout l'espace restant */
  height: 1px;
  background: linear-gradient(90deg, var(--color-primary-muted), transparent);
  margin-left: 15px;
}


/************************************************************************/
.instant-answer {
  position: relative;
  background-color: #ffffff80;
  border-radius: var(--tldr-border-radius);
  margin: 2rem 0;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;
  overflow: hidden; 
}


.instant-answer::before {
  content: "";
  display: block;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-muted) 100%);
}


.instant-answer .question {
  padding: 2rem 2rem 0.5rem 2rem;
  font-size: 1.25rem; 
  font-weight: 600;
  color: var(--color-primary-dark); 
  line-height: 1.3;
}

.instant-answer .answer {  padding: 0 2rem 2.5rem 2rem;}
.instant-answer .answer::before {
  content: "↳"; 
  display: block;
  font-size: 1.5rem;
  color: var(--color-primary-muted);
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.instant-answer .answer p { margin: 0;}

/*****************************************actionnable********************************************/

.actionable-list {
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,.05);
    margin: 2rem 0;
    overflow: hidden
}

.single .the-post .actionable-list h3 {
    background-color: var(--color-primary);
    color: #fff!important;
    margin: 0;
    padding: 1.5rem 2rem
}

.actionable-list ol {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: list-ui
}

.actionable-list li {
    position: relative;
    padding: 1.5rem 2rem 1.5rem 4.5rem;
    border-bottom: 1px solid #e5e5e5;
    counter-increment: list-ui;
    line-height: 1.6
}



.actionable-list li:last-child,table tbody tr:last-child td,table.table-data tbody tr:last-child td {
    border-bottom: none
}

.actionable-list li::before {
    content: counter(list-ui);
    position: absolute;
    left: 1.5rem;
    top: 1.3rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #f4f2f2;
    color: var(--color-primary-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    font-size: .9rem;
    transition: .3s;
border: 1px solid var(--color-primary);
}

.actionable-list li strong {
    display: inline-block;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: .4rem
}

.actionable-list li:hover::before {
    background-color: var(--color-primary);
    color: #fff;
    transform: scale(1.1)
}



.block-spc,.info-box {
    background-color: #f3f3f3
}
.info-box strong:first-child {  color: var(--color-primary);}

.block-spc {
    padding: 2rem;
    box-shadow: 4px 4px 10px rgba(0,0,0,.1)
}


.block-spc a{
    color: var(--color-primary-dark)
}



table,table.table-data {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,.05);
    overflow: hidden
}

table caption,table.table-data caption {
    text-align: left;
    padding: .5rem 1rem;
    color: inherit;
    margin-bottom: .5rem
}

table thead th,table.table-data thead th {
    text-align: left;
    padding: 1.2rem 1rem!important;
    border-bottom: 3px solid var(--color-primary)!important;
    color: var(--color-primary-dark);
    font-weight: 600
}

table tbody td,table.table-data tbody td {
    padding: 1rem!important;
    border-bottom: 1px solid #eee!important;
    color: inherit;
    font-size: 1rem
}

table tbody tr:hover,table.table-data tbody tr:hover {
    background-color: #0000000a;
    color: inherit;
    transition: background-color .1s
}



.block-spc {
    margin: 2rem auto;
    color: inherit
}

.block-spc a {
    text-decoration: underline
}

/*************************************key-takeaways****************************************/

.key-takeaways {
background-color: #ffffff87;
    border-radius: 20px;
    box-shadow: 0 10px 40px -10px rgb(0 0 0 / 20%);
    border: 1px solid rgb(0 0 0 / 6%);
    padding: 2.5rem;
    margin: 2rem 0;
}

/* --- Le Titre (Centré avec décorations) --- */
.key-takeaways p[itemprop="name"], .key-takeaways p:first-child {
  text-align: center;
  color: var(--color-primary-dark);
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 0;
  margin-bottom: 2.5rem;
  
  /* Lignes décoratives de chaque côté du titre */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.key-takeaways p[itemprop="name"]::before,
.key-takeaways p[itemprop="name"]::after {
  content: "";
  height: 2px;
  width: 40px;
  background-color: var(--color-primary-muted);
  border-radius: 2px;
}

/* --- La Liste --- */
.key-takeaways ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem; /* Espace entre les barres */
}

/* --- Les Items (Barres) --- */
.key-takeaways li {
  display: flex; /* Flexbox pour aligner l'icône et le texte */
  align-items: center;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 1rem 1.5rem; 
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.key-takeaways li strong{display: contents;}

/* Interaction au survol */
.key-takeaways li:hover {
  transform: scale(1.02); /* Léger zoom */
  border-color: var(--color-primary-muted);
  background-color: #ffffff87;
   box-shadow: 0 4px 15px rgb(0 0 0 / 10%);
}

/* --- L'Icône (Check Carré) --- */
.key-takeaways li::before {
  content: "✓";
  flex-shrink: 0; /* Empêche l'icône de s'écraser */
  
  width: 24px;
  height: 24px;
  margin-right: 1.5rem;
  
  background-color: var(--color-primary); /* Fond Rose */
  color: #fff; /* Coche Blanche */
  border-radius: 6px; /* Carré arrondi */
  
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 0.9rem;
}


/*******************************before-after********************************/

.before-after {
  margin: 2rem 0;
}

.before-after div[itemprop="reviewBody"] {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 colonnes égales */
  gap: 1.5rem;
}

/* Style commun aux deux blocs */
.before-after p {
  margin: 0;
  padding: 1.5rem;
  border-radius: 12px;
}

/* --- Bloc AVANT --- */
.before-after p:first-child {
  background-color: #ffffff87;
  border: 1px solid #ddd;
}
.before-after p:first-child strong {
  color: #000;
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  text-transform: uppercase;
}

/* --- Bloc APRÈS --- */
.before-after p:last-child {
background-color: rgb(from var(--color-primary) r g b / 0.1);
  border: 1px solid var(--color-primary);
}
.before-after p:last-child strong {
  color: var(--color-primary);
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  text-transform: uppercase;
}

/* Mobile */
@media (max-width: 960px) {
  .before-after div[itemprop="reviewBody"] {
    grid-template-columns: 1fr; /* Une seule colonne sur mobile */
  }
}
/***************************FAQ***************************************/
.faq-block {
  background-color: #ffffff87;
  
  /* Cadre Rose */
  border: 2px solid var(--color-primary);
  border-radius: var(--tldr-border-radius);
  
  /* Ombre décalée (Signature) */
  box-shadow: var(--tldr-offset) var(--tldr-offset) 0 var(--color-primary-muted);
  
  padding: 2rem;
  margin: 2rem 0;
}

.faq-block h2 {
  margin-top: 0;
  margin-bottom: 2rem;
}

/* --- Item FAQ (<details>) --- */
.faq-item {
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 1rem;
}

.faq-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* --- La Question (<summary>) --- */
.faq-item summary {
  cursor: pointer;
  padding: 1rem 0;
  list-style: none; /* Cache la flèche par défaut */
  
  font-weight: 600;


  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.2s;
}

/* Cache le marqueur par défaut sur Chrome/Safari */
.faq-item summary::-webkit-details-marker {
  display: none;
}

/* Interaction au survol */
.faq-item summary:hover {
  color: var(--color-primary);
}

/* Icône "+" personnalisée */
.faq-item summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--color-primary);
  margin-left: 10px;
  transition: transform 0.3s ease;
}

/* Quand l'accordéon est ouvert */
.faq-item[open] summary {
  color: var(--color-primary-dark);
  border-bottom: 1px dashed var(--color-primary-muted);
  margin-bottom: 1rem;
}

.faq-item[open] summary::after {
  transform: rotate(45deg); /* Le + devient une croix x */
}

/* --- La Réponse (Div cachée) --- */
.faq-item div[itemprop="acceptedAnswer"] {
  padding-bottom: 1.5rem;
  line-height: 1.6;
  font-size: 1rem;
  
  /* Petite animation d'apparition */
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
/*****************************************/

.author-block {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 3rem 0
}

.pro-tip,.warning {
    margin: 2rem 0
}

.author-block .avatar {
    flex-shrink: 0;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 3px solid #f9f9f9;
    box-shadow: 0 0 0 2px var(--color-primary)
}

.author-block .author-text {
    font-size: .95rem;
    line-height: 1.6;
    color: #333;
    text-align: justify
}

.author-block .author-text a {
    display: inline-block;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
    text-transform: uppercase;
    border-bottom: 2px solid var(--color-primary-muted);
    margin-bottom: .3rem;
    transition: .2s
}

.author-block .author-text a:hover {
    background-color: #f9f9f9;
    border-bottom-color: var(--color-primary);
    border-radius: 4px
}
.info-box { border: 1px solid var(--color-primary-muted);}
.info-box,.success-box {
    padding: 1.5rem 1.5rem .6rem;
    margin: 2rem 0;
    border-radius: 8px;
    border-left: 5px solid
}

.info-box {
    border-color: var(--color-primary)
}

.success-box {
    background-color: #f0fdf4;
    border-color: #4ade80;
    color: #166534
}

.warning {
    border-left: 6px solid #ffc740;
    border-top: 1px solid #ffc740;
    border-right: 1px solid #ffc740;
    border-bottom: 1px solid #ffc740;
    border-radius: 0 12px 12px 0;
    padding: 1.5rem 2rem;
    box-shadow: 0 5px 15px rgba(255,199,64,.15)
}

.warning p:first-child strong {
    color: #d97706;
    font-weight: 900;
    display: flex;
    align-items: center;
    margin-bottom: .5rem
}

.warning p:first-child strong::before {
    content: "⚠️";
    font-size: 1.4em;
    margin-right: 12px;
    position: relative;
    top: -1px
}

.warning ul {
    list-style: none;
    padding: 1rem 0 0;
    margin-top: 1.2rem;
    border-top: 1px dashed #ffc740
}

.warning li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: .8rem;
    line-height: 1.6
}

.warning li::before {
    content: "!";
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    background-color: #d97706;
    color: #fff;
    border-radius: 50%;
    font-weight: 800;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center
}

.warning li strong {
    color: #d97706;
    font-weight: 700;
    margin-right: 4px
}

.pro-tip {
    background-color: #f9f9f9;
    border: 1px dashed var(--color-primary);
    padding: 1.5rem 1.5rem .5rem;
    border-radius: 8px
}

.pro-tip strong {
    position: relative;
    z-index: 1;
    color: var(--color-primary-dark);
    padding: 0 4px;
    margin-right: 4px
}



.pro-tip strong::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 35%;
    background-color: var(--color-primary-muted);
    z-index: -1;
    opacity: .7;
    transform: skewX(-10deg)
}



.key-stat {
  display: flex; 
  align-items: center; 
  gap: 1.5rem; 
  border: 2px solid var(--color-primary);
  border-radius: var(--tldr-border-radius);
box-shadow: var(--tldr-offset) var(--tldr-offset) 0 color-mix(in srgb, var(--color-primary-muted), transparent 70%);
  padding: 1.5rem 2rem;
  margin: 2rem 0;
}


.key-stat .value {
  font-size: 20px; 
  font-weight: 900;
  color: var(--color-primary); 
  line-height: 1; 
  margin: 0; 
  flex-shrink: 0; 
}


.key-stat .label { margin: 0; }

/* --- Responsive Mobile --- */
@media (max-width: 960px) {
  .key-stat {
    padding: 1.2rem;
    gap: 1rem;
  }
  .key-stat .value {
    font-size: 2.2rem;
  }
}
/****************************timeline ***********************************/

.timeline {
  list-style: none; /* Supprime les puces */
  padding: 0;
  margin: 2em 0 2rem 1rem; /* Marge gauche pour la ligne */
  
  /* La ligne verticale continue */
  border-left: 2px solid var(--color-primary-muted);
}

/* --- Les Items (LI) --- */
.timeline li {
  position: relative;
  padding-left: 2rem; /* Espace entre la ligne et le contenu */
  margin-bottom: 2rem;
}

.timeline li:last-child {
  margin-bottom: 0;
  /* Masque la ligne qui dépasse le dernier point (optionnel) */
  border-image: linear-gradient(to bottom, var(--color-primary-muted) 0%, transparent 0%) 1 100%;
}

/* --- Le Point sur la ligne (Cercle) --- */
.timeline li::before {
  content: "";
  position: absolute;
  left: -9px; /* Centré sur la ligne de 2px (-9px = -8px largeur - 1px bordure) */
  top: 0; /* Aligné en haut */
  
  width: 16px;
  height: 16px;
  background-color: #fff; /* Centre blanc */
  border: 3px solid var(--color-primary); /* Contour Rose */
  border-radius: 50%; /* Rond */
  
  /* Petite ombre pour détacher le point de la ligne */
  box-shadow: 0 0 0 4px #fff; 
}

/* --- Le Temps (J+0...) --- */
.timeline time {
  display: block; /* Force le passage à la ligne */
  font-family: sans-serif;
  font-weight: 800;
  color: var(--color-primary);
  text-transform: uppercase;
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
  line-height: 1;
}





/****************************decision-tree*****************************/
.decision-tree {
  background-color: #ffffff80;
  border: 1px solid var(--color-primary-muted);
  border-radius: var(--tldr-border-radius);
  padding: 2rem;
  margin: 2rem 0;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

/* --- Le Titre Principal (La Question) --- */
.decision-tree p:first-child strong {
  display: block;
  color: var(--color-primary-dark);
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- La Liste (L'Arbre) --- */
.decision-tree ul {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  /* Ligne verticale principale à gauche */
  border-left: 2px solid var(--color-primary);
  margin-left: 1.5rem;
}

/* --- Les Branches (Items) --- */
.decision-tree li {
  position: relative;
  padding-left: 2.5rem; /* Espace pour la connexion */
  margin-bottom: 2rem;
}

.decision-tree li:last-child {
  margin-bottom: 0;
  /* Masque la ligne verticale qui dépasse le dernier point */
  border-image: linear-gradient(to bottom, var(--color-primary) 20px, transparent 20px) 1 100%;
}

/* Le Connecteur (Branche horizontale + Rond) */
.decision-tree li::before {
  content: "";
  position: absolute;
  left: 0; /* Part de la ligne principale */
  top: 12px; /* Hauteur de la branche */
  
  width: 30px; /* Longueur de la branche */
  height: 2px;
  background-color: var(--color-primary);
}

/* Le Noeud (Cercle au bout de la branche) */
.decision-tree li::after {
  content: "";
  position: absolute;
  left: 30px; /* Au bout de la branche */
  top: 7px;
  
  width: 12px;
  height: 12px;
  background-color: #fff;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
}

/* --- Le Texte de la Condition ("Si...") --- */
.decision-tree li strong {
  display: block;
  color: var(--color-primary);
  font-size: 1rem;
  margin-bottom: 0.5rem;
  /* Petit fond pour détacher le texte */
  background: var(--color-primary-muted);
  color: var(--color-primary-dark);
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  display: inline-block;
}

/* --- La Réponse ("Alors...") --- */
.decision-tree li div[itemprop="text"] {
  margin-top: 0.5rem;
  padding-left: 0.5rem;
  border-left: 2px solid #eee; /* Ligne fine pour le texte */
}
/*****************myth-busting*****************/
.myth-busting {
  background-color: #ffffff87;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden; /* Important pour les coins arrondis */
  margin: 2rem 0;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* --- Zone 1 : Affirmation (Haut - Fond clair) --- */
.myth-busting > p:first-of-type {
  background-color: #fafafa;
  padding: 1.5rem 2rem;
  margin: 0;
  border-bottom: 1px dashed #ccc; /* Ligne de séparation */
}

/* Le Titre "Affirmation" */
.myth-busting > p:first-of-type strong {
  color: #000;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 800;
  display: block;
  margin-bottom: 0.5rem;
}
/* Petite icône croix grise */
.myth-busting > p:first-of-type strong::before {
  content: "✖";
  margin-right: 8px;
  color: #bbb;
}

/* --- Zone 2 : Réponse (Bas - Fond teinté) --- */
.myth-busting div[itemprop="reviewBody"] {
  /* Fond très légèrement rosé */
background-color: rgb(from var(--color-primary) r g b / 0.1);
  padding: 1.5rem 2rem;
  position: relative; /* Pour le repère visuel */
}

/* Barre latérale rose pour marquer la vérité */
.myth-busting div[itemprop="reviewBody"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background-color: var(--color-primary);
}

/* Le Titre "Réponse" */
.myth-busting div[itemprop="reviewBody"] p strong {
  color: var(--color-primary);
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 800;
  display: block;
  margin-bottom: 0.5rem;
}

/* Petite icône coche verte/rose */
.myth-busting div[itemprop="reviewBody"] p strong::before {
  content: "✔";
  margin-right: 8px;
  font-size: 1.1rem;
}

.myth-busting div[itemprop="reviewBody"] p { margin: 0;}
/****************************************/

.case-study-block {
position: relative;
    border: 2px solid var(--color-primary);
    border-radius: var(--tldr-border-radius);
    padding: 1.5rem;
    margin: 2rem 0;
}

/* --- Le Titre (Étiquette flottante) --- */
.case-study-block-title {
background-color: var(--color-primary);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    padding: 0.4rem 1.2rem;
    border-radius: 4px;
    margin: 0 0 1.5em;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
display: inline-block;
}

/* --- Le Texte --- */
.case-study-block div[itemprop="text"] p {
  margin: 0;
  border-left: 3px solid #eee;
  padding-left: 1rem;
}
/*****************************lexique*********************************/

.lexique {
  margin: 2rem 0;
  /* Fond très subtil global */
background-color: #ffffff80;
  padding: 1.5rem;
  border-radius: 8px;
  /* Petite bordure fine à gauche seulement pour structurer */
  border-left: 4px solid var(--color-primary-muted);
}

/* --- Le Terme (DT) --- */
.lexique dt {
  display: inline; /* Le terme reste dans le flux */
  color: #222;
  font-weight: 800;
  font-size: 1.1rem;
  margin-right: 0.5rem; /* Espace avant la définition si inline */
  
  /* Effet de surlignage Rose Pâle */
  background: linear-gradient(to top, var(--color-primary-muted) 40%, transparent 40%);
  padding: 0 4px;
  border-radius: 2px;
}

/* Style de la balise <dfn> */
.lexique dfn {
  font-style: normal;
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- La Définition (DD) --- */
.lexique dd {
  display: inline; /* La définition suit directement le terme sur la même ligne */
  margin: 0;
  line-height: 1.7;
}
/**********************************************************/
.analogy {
    border-left: 4px solid var(--color-primary);
    background: linear-gradient(to right,#f9f9f9,transparent);
    padding: 1.5rem 1.5rem .5rem;
    font-style: italic;
    margin: 2rem 0;
}

.analogy strong,.before strong {
    font-weight: 600;
    color: #000
}



@media (max-width: 960px) {

    .author-block {
        flex-direction: column;
        text-align: center
    }

    .dt-modified,.dt-published {
        margin-top: 15px
    }

    table caption,table.table-data caption {
        white-space: normal;
        width: 100%;
        display: block
    }
.tldr-paragraph, .tldr-list, .myth-busting-author, .direct-answer, .warning, .lexique, .decision-tree, .before-after p, .key-takeaways, .table-of-contents, .pros-column, .cons-column, .faq-block{    padding: 20px;}
.decision-tree ul {  margin-left: 0;}
.key-takeaways li {  padding: 15px;}
}


/**********************************/
.table-of-contents {
  border: 2px solid var(--color-primary-muted); 
  border-radius: var(--tldr-border-radius);
  padding: 2rem;
  margin: 2rem 0;
}

/* --- Titre (H2) --- */
.table-of-contents h2 {
  color: var(--color-primary-dark); 
  margin-top: 0;
  margin-bottom: 1.5rem;
  display: inline-block;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 5px;
}

/* --- Liste (OL) --- */
.table-of-contents ol {
  list-style: none; /* Supprime les numéros par défaut */
  padding: 0;
  margin: 0;
}

/* --- Items (LI) --- */
.table-of-contents li {
  position: relative;
  padding-left: 2rem; /* Espace pour la coche */
  margin-bottom: 0.8rem;
  line-height: 1.5;
}

/* --- La Coche (Checkmark) --- */
.table-of-contents li::before {
  content: "✔"; /* Caractère coche */
  position: absolute;
  left: 0;
  top: 1px; /* Ajustement vertical */  
  color: var(--color-primary); /* Rose principal */
  font-weight: 900;
  font-size: 1.1rem;
}

.ymyl-disclaimer {
  background-color: #fafafa; 
  border: 1px solid var(--color-primary-muted);
  border-radius: var(--tldr-border-radius);
  box-shadow: var(--tldr-offset) var(--tldr-offset) 0 rgba(0,0,0,0.03); 
  padding: 1.5rem;
  margin: 2rem 0;
  font-size: 0.9rem;
  line-height: 1.6;
}

.ymyl-disclaimer p {  margin: 0;}
.ymyl-disclaimer p:first-child { margin-bottom: 0.7rem;     width: 100%;}
.ymyl-disclaimer p:last-child { margin-top: 0.5rem;}

.ymyl-disclaimer strong {
  color: var(--color-primary-dark); 
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.85rem;
  background-color: #ffffff87;
  border: 1px solid var(--color-primary-muted);
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  display: inline-block;
}


.ymyl-disclaimer strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}